fix: move ctx line to rightdown

src/components/LogoV2/LogoV2.tsx

@@ -43,8 +43,6 @@ import { useAppState, useSetAppState } from '../../state/AppState.js';
 import { getEffortSuffix } from '../../utils/effort.js';
 import { useMainLoopModel } from '../../hooks/useMainLoopModel.js';
 import { renderModelSetting } from '../../utils/model/model.js';
-import { CtxProgressBar } from '../CtxProgressBar.js';
-import { useContextUsage } from '../../hooks/useContextUsage.js';
 const LEFT_PANEL_MAX_WIDTH = 50;
 export function LogoV2() {
   const $ = _c(94);
@@ -160,7 +158,6 @@ export function LogoV2() {
   useEffect(t7, t8);
   const model = useMainLoopModel();
   const fullModelDisplayName = renderModelSetting(model);
-  const contextUsage = useContextUsage();
   const setAppState = useSetAppState();
 
   // Poll for OpenRouter models when using 'default' model
@@ -384,7 +381,7 @@ export function LogoV2() {
       t18 = $[42];
       t19 = $[43];
     }
-    return <><OffscreenFreeze><Box flexDirection="column" borderStyle="round" borderColor="startupAccent" borderText={t11} paddingX={1} paddingY={1} alignItems="center" width={columns}><Text bold={true}>{welcomeMessage}</Text>{t12}{t13}{contextUsage.hasData && <CtxProgressBar currentTokens={contextUsage.currentTokens} contextWindowTokens={contextUsage.contextWindowTokens} compactionTargetTokens={contextUsage.compactionTargetTokens} utilizationPct={contextUsage.utilizationPct} />}<Text dimColor={true}>{billingType}</Text><Text dimColor={true}>{agentName ? `@${agentName} · ${truncatedCwd}` : truncatedCwd}</Text></Box></OffscreenFreeze>{t14}{t15}{t16}{t17}{t18}{t19}</>;
+    return <><OffscreenFreeze><Box flexDirection="column" borderStyle="round" borderColor="startupAccent" borderText={t11} paddingX={1} paddingY={1} alignItems="center" width={columns}><Text bold={true}>{welcomeMessage}</Text>{t12}{t13}<Text dimColor={true}>{billingType}</Text><Text dimColor={true}>{agentName ? `@${agentName} · ${truncatedCwd}` : truncatedCwd}</Text></Box></OffscreenFreeze>{t14}{t15}{t16}{t17}{t18}{t19}</>;
   }
   const welcomeMessage_0 = formatWelcomeMessage(username);
   const modelLine = !process.env.IS_DEMO && config.oauthAccount?.organizationName ? `${modelDisplayName} · ${billingType} · ${config.oauthAccount.organizationName}` : `${modelDisplayName} · ${billingType}`;
@@ -451,7 +448,7 @@ export function LogoV2() {
   }
   let t22;
   if ($[53] !== t20 || $[54] !== t21) {
-    t22 = <Box flexDirection="column" alignItems="center">{t20}{contextUsage.hasData && <CtxProgressBar currentTokens={contextUsage.currentTokens} contextWindowTokens={contextUsage.contextWindowTokens} compactionTargetTokens={contextUsage.compactionTargetTokens} utilizationPct={contextUsage.utilizationPct} />}{t21}</Box>;
+    t22 = <Box flexDirection="column" alignItems="center">{t20}{t21}</Box>;
     $[53] = t20;
     $[54] = t21;
     $[55] = t22;

src/components/TokenWarning.tsx

@@ -7,6 +7,7 @@ import { getFeatureValue_CACHED_MAY_BE_STALE } from '../services/analytics/growt
 import { calculateTokenWarningState, getEffectiveContextWindowSize, isAutoCompactEnabled } from '../services/compact/autoCompact.js';
 import { useCompactWarningSuppression } from '../services/compact/compactWarningHook.js';
 import { getUpgradeMessage } from '../utils/model/contextWindowUpgradeCheck.js';
+import { CtxProgressBar } from './CtxProgressBar.js';
 type Props = {
   tokenUsage: number;
   model: string;
@@ -163,10 +164,13 @@ export function TokenWarning(t0) {
     }
     return t4;
   }
+  const effectiveWindow = getEffectiveContextWindowSize(model);
+  const utilizationPct = Math.round((tokenUsage / Math.max(1, effectiveWindow)) * 100);
+  const compactionTargetTokens = effectiveWindow - 13_000;
   const autocompactLabel = reactiveOnlyMode ? `${100 - displayPercentLeft}% context used` : `${displayPercentLeft}% until auto-compact`;
   let t4;
   if ($[9] !== autocompactLabel || $[10] !== isAboveErrorThreshold || $[11] !== percentLeft) {
-    t4 = <Box flexDirection="row">{showAutoCompactWarning ? <Text dimColor={true} wrap="truncate">{upgradeMessage ? `${autocompactLabel} \u00b7 ${upgradeMessage}` : autocompactLabel}</Text> : <Text color={isAboveErrorThreshold ? "error" : "warning"} wrap="truncate">{upgradeMessage ? `Context low (${percentLeft}% remaining) \u00b7 ${upgradeMessage}` : `Context low (${percentLeft}% remaining) \u00b7 Run /compact to compact & continue`}</Text>}</Box>;
+    t4 = <Box flexDirection="row">{showAutoCompactWarning ? <><CtxProgressBar currentTokens={tokenUsage} contextWindowTokens={effectiveWindow} compactionTargetTokens={compactionTargetTokens} utilizationPct={utilizationPct} />{upgradeMessage && <Text dimColor={true}> · {upgradeMessage}</Text>}</> : <Text color={isAboveErrorThreshold ? "error" : "warning"} wrap="truncate">{upgradeMessage ? `Context low (${percentLeft}% remaining) \u00b7 ${upgradeMessage}` : `Context low (${percentLeft}% remaining) \u00b7 Run /compact to compact & continue`}</Text>}</Box>;
     $[9] = autocompactLabel;
     $[10] = isAboveErrorThreshold;
     $[11] = percentLeft;