feat(tui): enhance StatusBar with token usage and streaming indicator

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 (
     <Box borderStyle="single" borderColor="gray" paddingX={1}>
       <Box flexGrow={1}>
         <Text color="cyan">Flynn</Text>
-        <Text color="gray"> | </Text>
-        <Text color="gray">Session: </Text>
-        <Text>{sessionId}</Text>
+        {isStreaming && (
+          <>
+            <Text color="gray"> | </Text>
+            <Text color="yellow">streaming...</Text>
+          </>
+        )}
       </Box>
       <Box>
-        <Text color="gray">Messages: </Text>
-        <Text>{messageCount}</Text>
-        <Text color="gray"> | </Text>
         <Text color="gray">Model: </Text>
-        <Text color="green">{model}</Text>
+        <Text color="green">{shortModel}</Text>
+        <Text color="gray"> | </Text>
+        <Text color="gray">Msgs: </Text>
+        <Text>{messageCount}</Text>
+        {tokenUsage && (
+          <>
+            <Text color="gray"> | </Text>
+            <Text color="gray">Tokens: </Text>
+            <Text>{formatTokens(tokenUsage.input)}/{formatTokens(tokenUsage.output)}</Text>
+          </>
+        )}
       </Box>
     </Box>
   );