Skip to content

在footbar增加context上下文使用量展示 #408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
carolove wants to merge 1 commit into from
+41 −1
Closed

在footbar增加context上下文使用量展示 #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/PromptInput/PromptInputFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ function PromptInputFooter({
toolPermissionContext={toolPermissionContext}
suppressHint={suppressHint}
isLoading={isLoading}
messages={messages}
tasksSelected={pillSelected}
teamsSelected={teamsSelected}
teammateFooterIndex={teammateFooterIndex}
Expand Down
41 changes: 40 additions & 1 deletion src/components/PromptInput/PromptInputFooterLeftSide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,17 @@ import { isAgentSwarmsEnabled } from '../../utils/agentSwarmsEnabled.js';
import { TeamStatus } from '../teams/TeamStatus.js';
import { isInProcessEnabled } from '../../utils/swarm/backends/registry.js';
import { useAppState, useAppStateStore } from 'src/state/AppState.js';
import { getIsRemoteMode } from '../../bootstrap/state.js';
import { getCurrentUsage } from '../../utils/tokens.js';
import { calculateContextPercentages, getContextWindowForModel } from '../../utils/context.js';
import { useMainLoopModel } from '../../hooks/useMainLoopModel.js';
import { getIsRemoteMode, getSdkBetas } from '../../bootstrap/state.js';
import HistorySearchInput from './HistorySearchInput.js';
import { usePrStatus } from '../../hooks/usePrStatus.js';
import { Byline, KeyboardShortcutHint } from '@anthropic/ink';
import { useTerminalSize } from '../../hooks/useTerminalSize.js';
import { useTasksV2 } from '../../hooks/useTasksV2.js';
import { formatDuration, formatFileSize } from '../../utils/format.js';
import type { Message } from '../../types/message.js';
import { VoiceWarmupHint } from './VoiceIndicator.js';
import { useVoiceEnabled } from '../../hooks/useVoiceEnabled.js';
import { useVoiceState } from '../../context/voice.js';
Expand Down Expand Up @@ -74,6 +78,23 @@ function useRssDisplay(): RssState | null {
return state;
}

type CtxState = { text: string; level: 'normal' | 'warning' | 'error' };

function useContextDisplay(messages: Message[]): CtxState | null {
const model = useMainLoopModel();
const currentUsage = useMemo(() => getCurrentUsage(messages), [messages]);
const contextWindowSize = useMemo(() => getContextWindowForModel(model, getSdkBetas()), [model]);
const percentages = useMemo(
() => calculateContextPercentages(currentUsage, contextWindowSize),
[currentUsage, contextWindowSize],
);

if (!currentUsage || percentages.used === null) return null;
const pct = percentages.used;
const level = pct >= 90 ? 'error' : pct >= 70 ? 'warning' : 'normal';
return { text: `ctx:${pct}%`, level };
}
Comment on lines +83 to +96
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win

New context-display feature is not gated by a feature flag.

The useContextDisplay hook and its rendering (lines 303, 400–411) are unconditionally active. Per coding guidelines, new features must use the feature('FLAG_NAME') pattern so they can be controlled at runtime.

♻️ Example of how to gate it 
+  const ctxState = feature('CONTEXT_WINDOW_DISPLAY') ? useContextDisplay(messages) : null;

And wrap the hook body:

 function useContextDisplay(messages: Message[]): CtxState | null {
+  if (!feature('CONTEXT_WINDOW_DISPLAY')) return null;
   const model = useMainLoopModel();
   ...

Note: because feature() is compile-time dead-code eliminated, the hook calls inside must still execute (React rules of hooks). Gate the return value, not the hook calls themselves, or extract non-hook logic into a plain helper.

As per coding guidelines: "New features must follow the pattern: keep import { feature } from 'bun:bundle' + feature('FLAG_NAME'), and control via environment variables or configuration at runtime."

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/PromptInput/PromptInputFooterLeftSide.tsx` around lines 83 -
96, The useContextDisplay hook (function useContextDisplay) must be gated behind
a feature flag: keep all hook calls (useMainLoopModel, useMemo/getCurrentUsage,
getContextWindowForModel, calculateContextPercentages) so React rules of hooks
are preserved, import feature from 'bun:bundle' and call feature('FLAG_NAME')
and then conditionally return the computed state only when the flag is true
(otherwise return null); do not wrap or remove the hook calls themselves—gate
the return value or extract pure non-hook logic into a helper and only use that
helper when feature('FLAG_NAME') is true.


type Props = {
exitMessage: {
show: boolean;
Expand All @@ -84,6 +105,7 @@ type Props = {
toolPermissionContext: ToolPermissionContext;
suppressHint: boolean;
isLoading: boolean;
messages: Message[];
showMemoryTypeSelector?: boolean;
tasksSelected: boolean;
teamsSelected: boolean;
Expand Down Expand Up @@ -134,6 +156,7 @@ export function PromptInputFooterLeftSide({
toolPermissionContext,
suppressHint,
isLoading,
messages,
tasksSelected,
teamsSelected,
tmuxSelected,
Expand Down Expand Up @@ -177,6 +200,7 @@ export function PromptInputFooterLeftSide({
toolPermissionContext={toolPermissionContext}
showHint={!suppressHint && !showVim}
isLoading={isLoading}
messages={messages}
tasksSelected={tasksSelected}
teamsSelected={teamsSelected}
teammateFooterIndex={teammateFooterIndex}
Expand All @@ -192,6 +216,7 @@ type ModeIndicatorProps = {
toolPermissionContext: ToolPermissionContext;
showHint: boolean;
isLoading: boolean;
messages: Message[];
tasksSelected: boolean;
teamsSelected: boolean;
tmuxSelected: boolean;
Expand All @@ -204,6 +229,7 @@ function ModeIndicator({
toolPermissionContext,
showHint,
isLoading,
messages,
tasksSelected,
teamsSelected,
tmuxSelected,
Expand Down Expand Up @@ -274,6 +300,7 @@ function ModeIndicator({
}, [voiceEnabled, voiceHintUnderCap]);
const isKillAgentsConfirmShowing = useAppState(s => s.notifications.current?.key === 'kill-agents-confirm');
const rssState = useRssDisplay();
const ctxState = useContextDisplay(messages);

// Derive team info from teamContext (no filesystem I/O needed)
// Match the same logic as TeamStatus to avoid trailing separator
Expand Down Expand Up @@ -370,6 +397,18 @@ function ModeIndicator({
</Text>,
]
: []),
// Context window usage — updates dynamically after each message
...(ctxState
? [
<Text
key="ctx"
dimColor={ctxState.level === 'normal'}
color={ctxState.level === 'error' ? 'error' : ctxState.level === 'warning' ? 'warning' : undefined}
>
{ctxState.text}
</Text>,
]
: []),
];

// Check if any in-process teammates exist (for hint text cycling)
Expand Down