Fix mobile status bar

This commit is contained in:
weishu
2026-05-17 23:23:28 +08:00
parent 0e594da84d
commit 2e96992dd4
+25 -13
View File
@@ -177,6 +177,13 @@ export function StatusBar(props: {
const percentageUsed = Math.min(100, Math.round((props.contextSize / maxContextSize) * 100))
return `ctx ${formatTokenCount(props.contextSize)}/${formatTokenCount(maxContextSize)} (${percentageUsed}%)`
}, [props.contextSize, props.contextWindow, props.model, props.agentFlavor])
const compactContextUsageLabel = useMemo(() => {
if (props.contextSize === undefined) return null
const maxContextSize = props.contextWindow ?? getContextBudgetTokens(props.model, props.agentFlavor)
if (!maxContextSize) return `ctx ${formatTokenCount(props.contextSize)}`
const percentageLeft = Math.max(0, Math.round(100 - (props.contextSize / maxContextSize) * 100))
return `ctx ${formatTokenCount(maxContextSize).toUpperCase()}, ${percentageLeft}% left`
}, [props.contextSize, props.contextWindow, props.model, props.agentFlavor])
const cacheHitLabel = useMemo(() => {
if (!props.contextCacheRead || props.contextCacheRead <= 0) return null
return `cache ${formatTokenCount(props.contextCacheRead)}`
@@ -211,51 +218,56 @@ export function StatusBar(props: {
: null
return (
<div className="flex items-center justify-between px-2 pb-1">
<div className="flex items-baseline gap-3">
<div className="flex items-center gap-1.5">
<div className="flex min-w-0 items-center justify-between gap-2 px-2 pb-1">
<div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
<div className="flex shrink-0 items-center gap-1.5">
<span
className={`h-2 w-2 rounded-full ${connectionStatus.dotColor} ${connectionStatus.isPulsing ? 'animate-pulse' : ''}`}
/>
<span className={`text-xs ${connectionStatus.color}`}>
<span className={`whitespace-nowrap text-xs ${connectionStatus.color}`}>
{connectionStatus.text}
</span>
</div>
{contextUsageLabel ? (
<span className={`text-[10px] ${contextWarning?.color ?? 'text-[var(--app-hint)]'}`}>
{contextUsageLabel}{contextWarning ? ` · ${contextWarning.text}` : ''}
<span className={`min-w-0 whitespace-nowrap text-[10px] ${contextWarning?.color ?? 'text-[var(--app-hint)]'}`}>
<span className="sm:hidden">
{compactContextUsageLabel}
</span>
<span className="hidden sm:inline">
{contextUsageLabel}{contextWarning ? ` · ${contextWarning.text}` : ''}
</span>
</span>
) : null}
{cacheHitLabel ? (
<span className="text-[10px] text-[var(--app-hint)]">
<span className="hidden whitespace-nowrap text-[10px] text-[var(--app-hint)] sm:inline">
{cacheHitLabel}
</span>
) : null}
</div>
<div className="flex min-w-0 items-center gap-2">
<div className="flex min-w-0 shrink-0 items-center gap-2">
{codexReasoningLabel ? (
<span className="text-xs text-[var(--app-hint)]">
<span className="whitespace-nowrap text-xs text-[var(--app-hint)]">
{codexReasoningLabel}
</span>
) : null}
{codexFastMode ? (
<span className="text-xs text-[#34C759]">
<span className="whitespace-nowrap text-xs text-[#34C759]">
fast
</span>
) : null}
{goalLabel ? (
<span className="text-xs text-[var(--app-link)]">
<span className="whitespace-nowrap text-xs text-[var(--app-link)]">
{goalLabel}
</span>
) : null}
{collaborationModeLabel ? (
<span className="text-xs text-blue-500">
<span className="whitespace-nowrap text-xs text-blue-500">
{collaborationModeLabel}
</span>
) : null}
{displayPermissionMode ? (
<span className={`text-xs ${permissionModeColor}`}>
<span className={`whitespace-nowrap text-xs ${permissionModeColor}`}>
{permissionModeLabel}
</span>
) : null}