mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
Fix mobile status bar
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user