+
{/* Model indicator */}
{sessionModel && (
@@ -420,6 +425,8 @@ export function TaskChatPanel({
Toggle plan mode
+ {/* Context window usage indicator */}
+ {contextWindow && }
+ sessionId ? state.contextWindow.bySessionId[sessionId]?.size : undefined
+ );
+ const used = useAppStore((state) =>
+ sessionId ? state.contextWindow.bySessionId[sessionId]?.used : undefined
+ );
+ const remaining = useAppStore((state) =>
+ sessionId ? state.contextWindow.bySessionId[sessionId]?.remaining : undefined
+ );
+ const efficiency = useAppStore((state) =>
+ sessionId ? state.contextWindow.bySessionId[sessionId]?.efficiency : undefined
+ );
+ const timestamp = useAppStore((state) =>
+ sessionId ? state.contextWindow.bySessionId[sessionId]?.timestamp : undefined
+ );
+
+ // Memoize the combined object
+ const contextWindow = useMemo(() => {
+ if (size === undefined) return undefined;
+ return { size, used: used ?? 0, remaining: remaining ?? 0, efficiency: efficiency ?? 0, timestamp };
+ }, [size, used, remaining, efficiency, timestamp]);
+
+ const session = useAppStore((state) =>
+ sessionId ? state.taskSessions.items[sessionId] : undefined
+ );
+ const setContextWindow = useAppStore((state) => state.setContextWindow);
+
+ // Populate context window from session metadata if not already in store
+ useEffect(() => {
+ if (!sessionId || contextWindow) return;
+
+ // Try to extract context_window from session metadata
+ const metadata = session?.metadata;
+ if (!metadata || typeof metadata !== 'object') return;
+
+ const storedContextWindow = (metadata as Record).context_window;
+ if (!storedContextWindow || typeof storedContextWindow !== 'object') return;
+
+ // Map stored context window to ContextWindowEntry
+ const cw = storedContextWindow as Record;
+ const entry: ContextWindowEntry = {
+ size: (cw.size as number) ?? 0,
+ used: (cw.used as number) ?? 0,
+ remaining: (cw.remaining as number) ?? 0,
+ efficiency: (cw.efficiency as number) ?? 0,
+ timestamp: (cw.timestamp as string) ?? undefined,
+ };
+
+ setContextWindow(sessionId, entry);
+ }, [sessionId, contextWindow, session?.metadata, setContextWindow]);
+
+ // Subscribe to session updates via WebSocket
+ useEffect(() => {
+ if (!sessionId) return;
+ const client = getWebSocketClient();
+ if (client) {
+ const unsubscribe = client.subscribeSession(sessionId);
+ return () => {
+ unsubscribe();
+ // Don't clear context window on cleanup - keep it cached
+ };
+ }
+ }, [sessionId]);
+
+ return contextWindow;
+}
+
diff --git a/apps/web/lib/state/store.ts b/apps/web/lib/state/store.ts
index 7e4d582ce7..9aae81a379 100644
--- a/apps/web/lib/state/store.ts
+++ b/apps/web/lib/state/store.ts
@@ -189,6 +189,18 @@ export type GitStatusState = {
bySessionId: Record;
};
+export type ContextWindowEntry = {
+ size: number;
+ used: number;
+ remaining: number;
+ efficiency: number;
+ timestamp?: string;
+};
+
+export type ContextWindowState = {
+ bySessionId: Record;
+};
+
export type Worktree = {
id: string;
sessionId: string;
@@ -270,6 +282,7 @@ export type AppState = {
shell: ShellState;
diffs: DiffState;
gitStatus: GitStatusState;
+ contextWindow: ContextWindowState;
connection: ConnectionState;
messages: MessagesState;
taskSessions: TaskSessionsState;
@@ -337,6 +350,7 @@ export type AppState = {
setSessionWorktrees: (sessionId: string, worktreeIds: string[]) => void;
setGitStatus: (sessionId: string, gitStatus: GitStatusEntry) => void;
clearGitStatus: (sessionId: string) => void;
+ setContextWindow: (sessionId: string, contextWindow: ContextWindowEntry) => void;
bumpAgentProfilesVersion: () => void;
};
@@ -380,6 +394,7 @@ const defaultState: AppState = {
shell: { outputs: {}, statuses: {} },
diffs: { files: [] },
gitStatus: { bySessionId: {} },
+ contextWindow: { bySessionId: {} },
connection: { status: 'disconnected', error: null },
messages: { bySession: {}, metaBySession: {} },
taskSessions: { items: {} },
@@ -433,6 +448,7 @@ const defaultState: AppState = {
setSessionWorktrees: () => undefined,
setGitStatus: () => undefined,
clearGitStatus: () => undefined,
+ setContextWindow: () => undefined,
bumpAgentProfilesVersion: () => undefined,
};
@@ -486,6 +502,7 @@ function mergeInitialState(
| 'setSessionWorktrees'
| 'setGitStatus'
| 'clearGitStatus'
+ | 'setContextWindow'
| 'bumpAgentProfilesVersion'
> {
if (!initialState) return defaultState;
@@ -515,6 +532,7 @@ function mergeInitialState(
shell: { ...defaultState.shell, ...initialState.shell },
diffs: { ...defaultState.diffs, ...initialState.diffs },
gitStatus: { ...defaultState.gitStatus, ...initialState.gitStatus },
+ contextWindow: { ...defaultState.contextWindow, ...initialState.contextWindow },
connection: { ...defaultState.connection, ...initialState.connection },
messages: { ...defaultState.messages, ...initialState.messages },
taskSessions: { ...defaultState.taskSessions, ...initialState.taskSessions },
@@ -883,6 +901,10 @@ export function createAppStore(initialState?: Partial) {
set((draft) => {
delete draft.gitStatus.bySessionId[sessionId];
}),
+ setContextWindow: (sessionId, contextWindow) =>
+ set((draft) => {
+ draft.contextWindow.bySessionId[sessionId] = contextWindow;
+ }),
bumpAgentProfilesVersion: () =>
set((draft) => {
draft.agentProfiles.version += 1;
diff --git a/apps/web/lib/types/backend.ts b/apps/web/lib/types/backend.ts
index b6d046e238..92c88d0ae7 100644
--- a/apps/web/lib/types/backend.ts
+++ b/apps/web/lib/types/backend.ts
@@ -155,6 +155,7 @@ export type TaskSessionStateChangedPayload = {
session_id: string;
old_state?: string;
new_state: string;
+ metadata?: Record;
};
export type TaskSessionWaitingForInputPayload = {
diff --git a/apps/web/lib/ws/handlers/agent-session.ts b/apps/web/lib/ws/handlers/agent-session.ts
index eb73ad5116..a4d23cd0f5 100644
--- a/apps/web/lib/ws/handlers/agent-session.ts
+++ b/apps/web/lib/ws/handlers/agent-session.ts
@@ -54,6 +54,22 @@ export function registerTaskSessionHandlers(store: StoreApi): WsHandle
store.getState().setTaskSessionsForTask(taskId, nextSessions);
}
}
+
+ // Extract context window data from metadata if present
+ const metadata = payload.metadata;
+ if (metadata && typeof metadata === 'object') {
+ const contextWindow = (metadata as Record).context_window;
+ if (contextWindow && typeof contextWindow === 'object') {
+ const cw = contextWindow as Record;
+ store.getState().setContextWindow(sessionId, {
+ size: (cw.size as number) ?? 0,
+ used: (cw.used as number) ?? 0,
+ remaining: (cw.remaining as number) ?? 0,
+ efficiency: (cw.efficiency as number) ?? 0,
+ timestamp: new Date().toISOString(),
+ });
+ }
+ }
}
},
'session.agentctl_starting': (message) => {