diff --git a/src/frontends/tui/components/StatusBar.tsx b/src/frontends/tui/components/StatusBar.tsx index e0852ec..9e1369d 100644 --- a/src/frontends/tui/components/StatusBar.tsx +++ b/src/frontends/tui/components/StatusBar.tsx @@ -5,23 +5,57 @@ export interface StatusBarProps { sessionId: string; messageCount: number; model: string; + tokenUsage?: { + input: number; + output: number; + }; + isStreaming?: boolean; } -export function StatusBar({ sessionId, messageCount, model }: StatusBarProps): React.ReactElement { +function formatTokens(n: number): string { + if (n >= 1000) { + return `${(n / 1000).toFixed(1)}k`; + } + return String(n); +} + +export function StatusBar({ + sessionId, + messageCount, + model, + tokenUsage, + isStreaming, +}: StatusBarProps): React.ReactElement { + // Extract short model name (e.g., "claude-opus-4-5-20251101" -> "opus-4.5") + const shortModel = model + .replace('claude-', '') + .replace(/-\d{8}$/, '') + .replace('-4-5', '-4.5'); + return ( Flynn - | - Session: - {sessionId} + {isStreaming && ( + <> + | + streaming... + + )} - Messages: - {messageCount} - | Model: - {model} + {shortModel} + | + Msgs: + {messageCount} + {tokenUsage && ( + <> + | + Tokens: + {formatTokens(tokenUsage.input)}/{formatTokens(tokenUsage.output)} + + )} );