From e42d6eadff49520c60adbd4db922ecb30c474c7b Mon Sep 17 00:00:00 2001
From: Jason Woltje <jason@diversecanvas.com>
Date: Sun, 15 Mar 2026 13:53:54 -0500
Subject: [PATCH] feat(cli): match TUI footer to reference design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove borders from input bar — clean '❯ message mosaic…' prompt
- Two-line footer without borders:
  - Line 1: compact cwd (branch) | Gateway: Connected/Disconnected
  - Line 2: token stats (^in v_out R_cache W_cache $cost ctx%) | (provider) model
- Extend TokenUsage with cacheRead, cacheWrite, cost, contextPercent, contextWindow
- Add providerName to socket hook return
- Reorder layout: top bar → messages → input → footer
---
 .../cli/src/tui/components/bottom-bar.tsx     | 108 +++++++++++++-----
 packages/cli/src/tui/components/input-bar.tsx |   8 +-
 packages/cli/src/tui/hooks/use-socket.ts      |  19 ++-
 3 files changed, 98 insertions(+), 37 deletions(-)

diff --git a/packages/cli/src/tui/components/bottom-bar.tsx b/packages/cli/src/tui/components/bottom-bar.tsx
index 6d00e21..7c494db 100644
--- a/packages/cli/src/tui/components/bottom-bar.tsx
+++ b/packages/cli/src/tui/components/bottom-bar.tsx
@@ -6,55 +6,101 @@ import type { GitInfo } from '../hooks/use-git-info.js';
 export interface BottomBarProps {
   gitInfo: GitInfo;
   tokenUsage: TokenUsage;
+  connected: boolean;
+  connecting: boolean;
+  modelName: string | null;
+  providerName: string | null;
 }
 
 function formatTokens(n: number): string {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
   return String(n);
 }
 
-/** Compact the cwd — show ~ for home, truncate long paths */
+/** Compact the cwd — replace home with ~ */
 function compactCwd(cwd: string): string {
   const home = process.env['HOME'] ?? '';
   if (home && cwd.startsWith(home)) {
-    cwd = '~' + cwd.slice(home.length);
-  }
-  // If still very long, show last 3 segments
-  const parts = cwd.split('/');
-  if (parts.length > 4) {
-    return '…/' + parts.slice(-3).join('/');
+    return '~' + cwd.slice(home.length);
   }
   return cwd;
 }
 
-export function BottomBar({ gitInfo, tokenUsage }: BottomBarProps) {
+export function BottomBar({
+  gitInfo,
+  tokenUsage,
+  connected,
+  connecting,
+  modelName,
+  providerName,
+}: BottomBarProps) {
+  const gatewayStatus = connected ? 'Connected' : connecting ? 'Connecting…' : 'Disconnected';
+  const gatewayColor = connected ? 'green' : connecting ? 'yellow' : 'red';
+
   const hasTokens = tokenUsage.total > 0;
 
   return (
-    <Box borderStyle="single" borderColor="gray" paddingX={1} justifyContent="space-between">
-      <Box>
-        <Text dimColor>cwd: </Text>
-        <Text>{compactCwd(gitInfo.cwd)}</Text>
-        {gitInfo.branch && (
-          <>
-            <Text dimColor> ⎇ </Text>
-            <Text color="cyan">{gitInfo.branch}</Text>
-          </>
-        )}
+    <Box flexDirection="column" paddingX={0} marginTop={0}>
+      {/* Line 1: path (branch)  ·····  Gateway: Status */}
+      <Box justifyContent="space-between">
+        <Box>
+          <Text dimColor>{compactCwd(gitInfo.cwd)}</Text>
+          {gitInfo.branch && <Text dimColor> ({gitInfo.branch})</Text>}
+        </Box>
+        <Box>
+          <Text dimColor>Gateway: </Text>
+          <Text color={gatewayColor}>{gatewayStatus}</Text>
+        </Box>
       </Box>
-      <Box>
-        {hasTokens ? (
-          <>
-            <Text dimColor>tokens: </Text>
-            <Text color="green">↑{formatTokens(tokenUsage.input)}</Text>
-            <Text dimColor> / </Text>
-            <Text color="yellow">↓{formatTokens(tokenUsage.output)}</Text>
-            <Text dimColor> ({formatTokens(tokenUsage.total)})</Text>
-          </>
-        ) : (
-          <Text dimColor>tokens: —</Text>
-        )}
+
+      {/* Line 2: token stats  ·····  (provider) model */}
+      <Box justifyContent="space-between">
+        <Box>
+          {hasTokens ? (
+            <>
+              <Text dimColor>^{formatTokens(tokenUsage.input)}</Text>
+              <Text dimColor>{'  '}</Text>
+              <Text dimColor>v{formatTokens(tokenUsage.output)}</Text>
+              {tokenUsage.cacheRead > 0 && (
+                <>
+                  <Text dimColor>{'  '}</Text>
+                  <Text dimColor>R{formatTokens(tokenUsage.cacheRead)}</Text>
+                </>
+              )}
+              {tokenUsage.cacheWrite > 0 && (
+                <>
+                  <Text dimColor>{'  '}</Text>
+                  <Text dimColor>W{formatTokens(tokenUsage.cacheWrite)}</Text>
+                </>
+              )}
+              {tokenUsage.cost > 0 && (
+                <>
+                  <Text dimColor>{'  '}</Text>
+                  <Text dimColor>${tokenUsage.cost.toFixed(3)}</Text>
+                </>
+              )}
+              {tokenUsage.contextPercent > 0 && (
+                <>
+                  <Text dimColor>{'  '}</Text>
+                  <Text dimColor>
+                    {tokenUsage.contextPercent.toFixed(1)}%/{formatTokens(tokenUsage.contextWindow)}
+                  </Text>
+                </>
+              )}
+            </>
+          ) : (
+            <Text dimColor>—</Text>
+          )}
+        </Box>
+        <Box>
+          {(providerName ?? modelName) && (
+            <Text dimColor>
+              {providerName ? `(${providerName}) ` : ''}
+              {modelName ?? ''}
+            </Text>
+          )}
+        </Box>
       </Box>
     </Box>
   );
diff --git a/packages/cli/src/tui/components/input-bar.tsx b/packages/cli/src/tui/components/input-bar.tsx
index 6f65ef6..ab02c2f 100644
--- a/packages/cli/src/tui/components/input-bar.tsx
+++ b/packages/cli/src/tui/components/input-bar.tsx
@@ -26,12 +26,10 @@ export function InputBar({ onSubmit, isStreaming, connected }: InputBarProps) {
       ? 'waiting for response…'
       : 'message mosaic…';
 
-  const promptColor = !connected ? 'red' : isStreaming ? 'yellow' : 'green';
-
   return (
-    <Box paddingX={1} borderStyle="single" borderColor="gray">
-      <Text bold color={promptColor}>
-        ❯{' '}
+    <Box paddingX={0}>
+      <Text bold color="green">
+        {'❯ '}
       </Text>
       <TextInput
         value={input}
diff --git a/packages/cli/src/tui/hooks/use-socket.ts b/packages/cli/src/tui/hooks/use-socket.ts
index 080e26d..31cd210 100644
--- a/packages/cli/src/tui/hooks/use-socket.ts
+++ b/packages/cli/src/tui/hooks/use-socket.ts
@@ -28,6 +28,11 @@ export interface TokenUsage {
   input: number;
   output: number;
   total: number;
+  cacheRead: number;
+  cacheWrite: number;
+  cost: number;
+  contextPercent: number;
+  contextWindow: number;
 }
 
 export interface UseSocketOptions {
@@ -47,6 +52,7 @@ export interface UseSocketReturn {
   activeToolCalls: ToolCall[];
   tokenUsage: TokenUsage;
   modelName: string | null;
+  providerName: string | null;
   sendMessage: (content: string) => void;
   connectionError: string | null;
 }
@@ -65,8 +71,18 @@ export function useSocket(opts: UseSocketOptions): UseSocketReturn {
   const [currentThinkingText, setCurrentThinkingText] = useState('');
   const [activeToolCalls, setActiveToolCalls] = useState<ToolCall[]>([]);
   // TODO: wire up once gateway emits token-usage and model-info events
-  const tokenUsage: TokenUsage = { input: 0, output: 0, total: 0 };
+  const tokenUsage: TokenUsage = {
+    input: 0,
+    output: 0,
+    total: 0,
+    cacheRead: 0,
+    cacheWrite: 0,
+    cost: 0,
+    contextPercent: 0,
+    contextWindow: 0,
+  };
   const modelName: string | null = null;
+  const providerName: string | null = null;
   const [connectionError, setConnectionError] = useState<string | null>(null);
 
   const socketRef = useRef<TypedSocket | null>(null);
@@ -191,6 +207,7 @@ export function useSocket(opts: UseSocketOptions): UseSocketReturn {
     activeToolCalls,
     tokenUsage,
     modelName,
+    providerName,
     sendMessage,
     connectionError,
   };