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)) const percentageUsed = Math.min(100, Math.round((props.contextSize / maxContextSize) * 100))
return `ctx ${formatTokenCount(props.contextSize)}/${formatTokenCount(maxContextSize)} (${percentageUsed}%)` return `ctx ${formatTokenCount(props.contextSize)}/${formatTokenCount(maxContextSize)} (${percentageUsed}%)`
}, [props.contextSize, props.contextWindow, props.model, props.agentFlavor]) }, [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(() => { const cacheHitLabel = useMemo(() => {
if (!props.contextCacheRead || props.contextCacheRead <= 0) return null if (!props.contextCacheRead || props.contextCacheRead <= 0) return null
return `cache ${formatTokenCount(props.contextCacheRead)}` return `cache ${formatTokenCount(props.contextCacheRead)}`
@@ -211,51 +218,56 @@ export function StatusBar(props: {
: null : null
return ( return (
<div className="flex items-center justify-between px-2 pb-1"> <div className="flex min-w-0 items-center justify-between gap-2 px-2 pb-1">
<div className="flex items-baseline gap-3"> <div className="flex min-w-0 items-baseline gap-2 sm:gap-3">
<div className="flex items-center gap-1.5"> <div className="flex shrink-0 items-center gap-1.5">
<span <span
className={`h-2 w-2 rounded-full ${connectionStatus.dotColor} ${connectionStatus.isPulsing ? 'animate-pulse' : ''}`} 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} {connectionStatus.text}
</span> </span>
</div> </div>
{contextUsageLabel ? ( {contextUsageLabel ? (
<span className={`text-[10px] ${contextWarning?.color ?? 'text-[var(--app-hint)]'}`}> <span className={`min-w-0 whitespace-nowrap text-[10px] ${contextWarning?.color ?? 'text-[var(--app-hint)]'}`}>
{contextUsageLabel}{contextWarning ? ` · ${contextWarning.text}` : ''} <span className="sm:hidden">
{compactContextUsageLabel}
</span>
<span className="hidden sm:inline">
{contextUsageLabel}{contextWarning ? ` · ${contextWarning.text}` : ''}
</span>
</span> </span>
) : null} ) : null}
{cacheHitLabel ? ( {cacheHitLabel ? (
<span className="text-[10px] text-[var(--app-hint)]"> <span className="hidden whitespace-nowrap text-[10px] text-[var(--app-hint)] sm:inline">
{cacheHitLabel} {cacheHitLabel}
</span> </span>
) : null} ) : null}
</div> </div>
<div className="flex min-w-0 items-center gap-2"> <div className="flex min-w-0 shrink-0 items-center gap-2">
{codexReasoningLabel ? ( {codexReasoningLabel ? (
<span className="text-xs text-[var(--app-hint)]"> <span className="whitespace-nowrap text-xs text-[var(--app-hint)]">
{codexReasoningLabel} {codexReasoningLabel}
</span> </span>
) : null} ) : null}
{codexFastMode ? ( {codexFastMode ? (
<span className="text-xs text-[#34C759]"> <span className="whitespace-nowrap text-xs text-[#34C759]">
fast fast
</span> </span>
) : null} ) : null}
{goalLabel ? ( {goalLabel ? (
<span className="text-xs text-[var(--app-link)]"> <span className="whitespace-nowrap text-xs text-[var(--app-link)]">
{goalLabel} {goalLabel}
</span> </span>
) : null} ) : null}
{collaborationModeLabel ? ( {collaborationModeLabel ? (
<span className="text-xs text-blue-500"> <span className="whitespace-nowrap text-xs text-blue-500">
{collaborationModeLabel} {collaborationModeLabel}
</span> </span>
) : null} ) : null}
{displayPermissionMode ? ( {displayPermissionMode ? (
<span className={`text-xs ${permissionModeColor}`}> <span className={`whitespace-nowrap text-xs ${permissionModeColor}`}>
{permissionModeLabel} {permissionModeLabel}
</span> </span>
) : null} ) : null}