diff --git a/desktop/src/components/chat/StreamingIndicator.tsx b/desktop/src/components/chat/StreamingIndicator.tsx index 5a8a2f05..a7bb219f 100644 --- a/desktop/src/components/chat/StreamingIndicator.tsx +++ b/desktop/src/components/chat/StreamingIndicator.tsx @@ -1,18 +1,32 @@ import { useChatStore } from '../../stores/chatStore' -export function StreamingIndicator() { - const { chatState } = useChatStore() +function formatElapsed(seconds: number): string { + if (seconds < 60) return `${seconds}s` + const m = Math.floor(seconds / 60) + const s = seconds % 60 + return `${m}m ${s}s` +} - const verb = chatState === 'thinking' - ? 'Thinking' - : chatState === 'tool_executing' - ? 'Running' - : 'Working' +export function StreamingIndicator() { + const { chatState, statusVerb, elapsedSeconds, tokenUsage } = useChatStore() + + const verb = statusVerb + || (chatState === 'thinking' ? 'Thinking' : chatState === 'tool_executing' ? 'Running' : 'Working') return (
{verb}... + {elapsedSeconds > 0 && ( + + {formatElapsed(elapsedSeconds)} + + )} + {tokenUsage.output_tokens > 0 && ( + + · ↓ {tokenUsage.output_tokens} + + )}
) } diff --git a/desktop/src/stores/chatStore.ts b/desktop/src/stores/chatStore.ts index 62c40998..38daa85a 100644 --- a/desktop/src/stores/chatStore.ts +++ b/desktop/src/stores/chatStore.ts @@ -25,6 +25,7 @@ type ChatStore = { } | null tokenUsage: TokenUsage elapsedSeconds: number + statusVerb: string connectedSessionId: string | null slashCommands: Array<{ name: string; description: string }> @@ -56,6 +57,7 @@ export const useChatStore = create((set, get) => ({ pendingPermission: null, tokenUsage: { input_tokens: 0, output_tokens: 0 }, elapsedSeconds: 0, + statusVerb: '', connectedSessionId: null, slashCommands: [], @@ -190,7 +192,9 @@ export const useChatStore = create((set, get) => ({ case 'status': set({ chatState: msg.state, - ...(msg.state === 'idle' ? { activeThinkingId: null } : {}), + ...(msg.verb ? { statusVerb: msg.verb } : {}), + ...(msg.tokens ? { tokenUsage: { ...get().tokenUsage, output_tokens: msg.tokens } } : {}), + ...(msg.state === 'idle' ? { activeThinkingId: null, statusVerb: '' } : {}), }) if (msg.state === 'idle' && elapsedTimer) { clearInterval(elapsedTimer)