clarity-ai 7.2.1 → 7.3.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ---
 
+## 7.3.0 (2026-06-06)
+
+### Panel-driven TUI overhaul — structured frame layout with live thinking stream
+- **Bordered TopPanel**: ASCII banner + status chip + hotkey row wrapped in `┌─┐│├─┤` frame. No more floating text lines. Status badge, hotkey hints, and gradient logo all share a single structured surface.
+- **Anchored ComposerDock**: Box-drawn (`┌─┐│└─┘`) input panel hard-locked to bottom rows. Contains TextInput, provider/model/AGENT status line, and right-aligned `tab agents  ctrl+p` hotkey hints. Never moves during streaming.
+- **Live thinking stream engine**: Real-time `<think>...</think>` tag parser splits incoming token stream into:
+  - `reasoning` → collapsible low-contrast `#14141E` panel with dim gray text
+  - `display` → main chat viewport (cleaned, no reasoning noise)
+  - `Ctrl+T` toggles thinking panel visibility
+- **ThinkingPanel component**: Bordered frame with chevron toggle, character count, and last 8 wrapped lines of reasoning text. Sits inside chat viewport without polluting the final output.
+- **Box-drawing panel boundaries**: `┌ ─ ┐│├ ─ ┤└ ─ ┘` Unicode frames on all structural panels. Border color `#2A2A3A` for subtle but professional separation.
+- **Orange selection accent**: `#FF9F43` full-width highlight bars with `#000000` black text on all active popup rows and status chips.
+
 ## 7.2.1 (2026-06-06)
 
 ### Critical hotfix: mouse bleed elimination, CLARITY branding, TrueColor textures

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "7.2.1",
+  "version": "7.3.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {

package/src/app.js

@@ -2,16 +2,13 @@ import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { Box, useStdout, useInput } from 'ink';
 import { createChatState, handleSend, handleCommand } from './chat.js';
 import { hex } from './config/theme.js';
-import { Banner } from './components/Banner.js';
-import { StatusBar } from './components/StatusBar.js';
-import { StreamView } from './components/StreamView.js';
-import { InputDock } from './components/InputDock.js';
+import { TopPanel } from './components/TopPanel.js';
+import { ChatViewport } from './components/ChatViewport.js';
+import { ComposerDock } from './components/ComposerDock.js';
 import { SlashPopup } from './components/SlashPopup.js';
-import { Footer } from './components/Footer.js';
 const { createElement: h } = React;
 
 let abortController = null;
-
 export function getAbortController() { return abortController; }
 export function setAbortController(ac) { abortController = ac; }
 export function cancelStream() {
@@ -19,8 +16,7 @@ export function cancelStream() {
 }
 
 const DOCK_H = 4;
-const FOOTER_H = 2;
-const STATUS_H = 1;
+const TOP_H_PRE = 2;
 const POPUP_W = 44;
 
 const COMMAND_ITEMS = [
@@ -44,14 +40,31 @@ function getFiltered(input) {
   return COMMAND_ITEMS.filter(c => c.name.includes(q));
 }
 
+function parseStream(text) {
+  let reasoning = '';
+  let display = '';
+  let inThink = false;
+  let i = 0;
+  while (i < text.length) {
+    if (text.startsWith('<think>', i)) { inThink = true; i += 7; }
+    else if (text.startsWith('</think>', i)) { inThink = false; i += 8; }
+    else { if (inThink) reasoning += text[i]; else display += text[i]; i++; }
+  }
+  return { reasoning, display };
+}
+
 export function App({ config }) {
   const { stdout } = useStdout();
   const [dims, setDims] = useState({ rows: stdout.rows || 30, cols: stdout.columns || 80 });
   const [state, setState] = useState(() => createChatState());
   const [streamContent, setStreamContent] = useState('');
+  const [streamReasoning, setStreamReasoning] = useState('');
+  const [streamDisplay, setStreamDisplay] = useState('');
   const [thinkingStart, setThinkingStart] = useState(null);
+  const [thinkingMs, setThinkingMs] = useState(0);
   const [input, setInput] = useState('');
   const [popupIdx, setPopupIdx] = useState(0);
+  const [showThinking, setShowThinking] = useState(true);
   const defaultModel = (config.model || '').replace(/^[^/]+\//, '') || 'llama-3.3-70b-versatile';
   const [model, setModel] = useState(defaultModel);
   const [provider, setProvider] = useState(config.provider || 'groq');
@@ -66,11 +79,12 @@ export function App({ config }) {
   const rows = dims.rows;
   const cols = dims.cols;
   const bannerH = cols < 50 ? 2 : (cols < 60 ? 3 : 5);
+  const topH = bannerH + TOP_H_PRE;
   const status = deriveStatus(state, streamContent);
   const isChat = hasRealMessages(state.messages);
   const cardW = Math.min(cols - 4, 56);
   const showPopup = input.startsWith('/') && status === 'idle';
-  const availLines = Math.max(2, rows - bannerH - STATUS_H - DOCK_H - FOOTER_H - 2);
+  const availLines = Math.max(2, rows - topH - DOCK_H - 1);
 
   useEffect(() => {
     function onResize() { setDims({ rows: process.stdout.rows || 30, cols: process.stdout.columns || 80 }); }
@@ -79,9 +93,21 @@ export function App({ config }) {
   }, []);
 
   useEffect(() => {
-    if (state.thinking && !thinkingStart) setThinkingStart(Date.now());
-    else if (!state.thinking) setThinkingStart(null);
-  }, [state.thinking]);
+    if (state.thinking && !thinkingStart) {
+      setThinkingStart(Date.now());
+      const id = setInterval(() => setThinkingMs(Date.now() - thinkingStart), 100);
+      return () => clearInterval(id);
+    } else if (!state.thinking) {
+      setThinkingStart(null);
+      setThinkingMs(0);
+    }
+  }, [state.thinking, thinkingStart]);
+
+  useEffect(() => {
+    const { reasoning, display } = parseStream(streamContent || '');
+    setStreamReasoning(reasoning);
+    setStreamDisplay(display);
+  }, [streamContent]);
 
   const onSubmit = useCallback(async (val) => {
     if (val === '/exit') { process.exit(0); return; }
@@ -110,14 +136,10 @@ export function App({ config }) {
     else onSubmit(t);
   }
 
-  function handleInputChange(val) {
-    setInput(val);
-    if (val.startsWith('/')) setPopupIdx(0);
-  }
+  function handleInputChange(val) { setInput(val); if (val.startsWith('/')) setPopupIdx(0); }
 
   function handlePopupSelect(cmd) {
-    setInput('');
-    setPopupIdx(0);
+    setInput(''); setPopupIdx(0);
     if (cmd === '/exit') process.exit(0);
     onCommand(cmd);
   }
@@ -125,50 +147,56 @@ export function App({ config }) {
   function closePopup() { setInput(''); setPopupIdx(0); }
 
   useInput((ch, key) => {
-    if (!showPopup) return;
-    if (key.escape) { closePopup(); return; }
-    if (key.return) {
-      const filtered = getFiltered(input);
-      if (filtered[popupIdx]) handlePopupSelect(filtered[popupIdx].name);
-      return;
-    }
-    if (key.upArrow) { setPopupIdx(i => Math.max(0, i - 1)); return; }
-    if (key.downArrow) {
-      const filtered = getFiltered(input);
-      setPopupIdx(i => Math.min(filtered.length - 1, i + 1));
+    if (showPopup) {
+      if (key.escape) { closePopup(); return; }
+      if (key.return) { const f = getFiltered(input); if (f[popupIdx]) handlePopupSelect(f[popupIdx].name); return; }
+      if (key.upArrow) { setPopupIdx(i => Math.max(0, i - 1)); return; }
+      if (key.downArrow) { const f = getFiltered(input); setPopupIdx(i => Math.min(f.length - 1, i + 1)); return; }
     }
+    if (key.ctrl && key.t) { setShowThinking(p => !p); }
   });
 
-  const bottomArea = h(Box, { flexDirection: 'column', alignItems: 'center', width: '100%' },
+  const centerArea = h(Box, { flexDirection: 'column', alignItems: 'center', width: '100%' },
+    h(TopPanel, { cols, status, thinkingMs }),
+    isChat
+      ? h(Box, { flexGrow: 1, width: cardW, flexDirection: 'column', overflow: 'hidden' },
+          h(ChatViewport, {
+            messages: state.messages, streamContent, streamDisplay, reasoning: streamReasoning,
+            status, showThinking, onToggleThinking: () => setShowThinking(p => !p),
+            maxLines: availLines, width: cardW,
+          })
+        )
+      : null,
     showPopup
-      ? h(Box, { position: 'absolute', bottom: DOCK_H + FOOTER_H, alignItems: 'center', width: '100%' },
+      ? h(Box, { position: 'absolute', bottom: DOCK_H + 1, alignItems: 'center', width: '100%' },
           h(SlashPopup, { search: input, selectedIdx: popupIdx, width: POPUP_W })
         )
       : null,
-    h(InputDock, {
+    h(ComposerDock, {
       width: cardW, provider, model, agentMode: state.agentMode, status,
       input, onInputChange: handleInputChange, onSubmit: handleSubmit,
     }),
-    h(Footer, { cols })
   );
 
   if (!isChat) {
     return h(Box, { width: '100%', height: rows, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: hex.bg },
-      h(Box, { flexDirection: 'column', alignItems: 'center', width: cardW },
-        h(Banner, { cols }),
-        h(StatusBar, { status, thinkingStart }),
-        h(Box, { height: 1 }),
-        bottomArea
+      h(Box, { flexDirection: 'column', alignItems: 'center', width: '100%' },
+        h(TopPanel, { cols, status, thinkingMs }),
+        h(Box, { flexGrow: 1 }),
+        showPopup
+          ? h(Box, { position: 'absolute', bottom: DOCK_H + 1, alignItems: 'center', width: '100%' },
+              h(SlashPopup, { search: input, selectedIdx: popupIdx, width: POPUP_W })
+            )
+          : null,
+        h(ComposerDock, {
+          width: cardW, provider, model, agentMode: state.agentMode, status,
+          input, onInputChange: handleInputChange, onSubmit: handleSubmit,
+        }),
       )
     );
   }
 
   return h(Box, { width: '100%', height: rows, flexDirection: 'column', alignItems: 'center', backgroundColor: hex.bg },
-    h(Banner, { cols }),
-    h(StatusBar, { status, thinkingStart }),
-    h(Box, { flexGrow: 1, width: cardW, flexDirection: 'column', overflow: 'hidden' },
-      h(StreamView, { messages: state.messages, streamContent, status, maxLines: availLines, width: cardW })
-    ),
-    bottomArea
+    centerArea
   );
 }

package/src/components/{StreamView.js → ChatViewport.js}

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { hex } from '../config/theme.js';
 import wrapAnsi from 'wrap-ansi';
+import { ThinkingPanel } from './ThinkingPanel.js';
 const { createElement: h } = React;
 
 function lineCount(text, width) {
@@ -13,8 +14,6 @@ function measure(msg, width) {
   const cw = Math.max(4, width);
   if (msg.role === 'user') return 1 + lineCount(msg.content, cw);
   if (msg.role === 'assistant') return 1 + lineCount(msg.content, cw) + (msg.duration ? 1 : 0);
-  if (msg.role === 'tool') return 1;
-  if (msg.role === 'system' || msg.role === 'error') return 1;
   return 1;
 }
 
@@ -72,15 +71,17 @@ function StreamingBlock({ content, width }) {
   );
 }
 
-export function StreamView({ messages, streamContent, status, maxLines, width }) {
+export function ChatViewport({ messages, streamContent, streamDisplay, reasoning, status, showThinking, onToggleThinking, maxLines, width }) {
   const cw = Math.max(4, width - 2);
 
+  const thinkingH = showThinking && reasoning ? Math.min(10, 3 + wrapAnsi(String(reasoning), cw, { trim: false, hard: true }).split('\n').length) : 0;
+
   const visible = useMemo(() => {
     if (messages.length === 0) {
       return [{ id: 'welcome', role: 'system', content: 'CLARITY AI ready  \u00B7  /help for commands' }];
     }
 
-    let avail = maxLines;
+    let avail = maxLines - thinkingH;
     const result = [];
     for (let i = messages.length - 1; i >= 0; i--) {
       const needed = measure(messages[i], cw);
@@ -94,8 +95,8 @@ export function StreamView({ messages, streamContent, status, maxLines, width })
       result.unshift(messages[i]);
     }
 
-    if (streamContent && (status === 'streaming' || status === 'thinking')) {
-      const streamNeeded = 1 + lineCount(streamContent, cw);
+    if (streamDisplay && (status === 'streaming' || status === 'thinking')) {
+      const streamNeeded = 1 + lineCount(streamDisplay, cw);
       while (streamNeeded > avail && result.length > 0) {
         avail += measure(result[0], cw);
         result.shift();
@@ -103,17 +104,18 @@ export function StreamView({ messages, streamContent, status, maxLines, width })
     }
 
     return result;
-  }, [messages, streamContent, status, maxLines, cw]);
+  }, [messages, streamDisplay, status, maxLines, thinkingH, cw]);
 
-  return h(Box, { flexDirection: 'column', width: '100%', paddingLeft: 1, paddingRight: 1 },
+  return h(Box, { flexDirection: 'column', width: '100%' },
     visible.map(m => h(MsgBlock, { key: m.id, msg: m, width: cw })),
-    (status === 'streaming' || status === 'thinking') && streamContent
-      ? h(StreamingBlock, { content: streamContent, width: cw })
+    (status === 'streaming' || status === 'thinking') && streamDisplay
+      ? h(StreamingBlock, { content: streamDisplay, width: cw })
       : null,
-    status === 'thinking' && !streamContent
+    status === 'thinking' && !streamDisplay
       ? h(Box, { height: 1, backgroundColor: hex.cardBg },
           h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, '  \u25CF processing...')
         )
       : null,
+    h(ThinkingPanel, { reasoning, visible: showThinking, width, onToggle: onToggleThinking }),
   );
 }

package/src/components/ComposerDock.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+function borderLine(w, left, mid, right) {
+  return left + mid.repeat(Math.max(0, w - 2)) + right;
+}
+
+export function ComposerDock({ width, provider, model, agentMode, status, input, onInputChange, onSubmit }) {
+  const isLocked = status !== 'idle';
+  const mShort = model.replace(/^[^/]+\//, '').slice(0, 16);
+  const innerW = Math.max(4, width - 4);
+  const statusText = (provider || 'groq') + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '');
+
+  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.cardBg },
+    h(Box, { height: 1 },
+      h(Text, { color: hex.border }, borderLine(width, '\u251C', '\u2500', '\u2524'))
+    ),
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
+      h(TextInput, {
+        value: input,
+        onChange: onInputChange,
+        onSubmit,
+        placeholder: 'Ask anything...',
+        focus: !isLocked,
+      })
+    ),
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
+      h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, statusText),
+      h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg },
+        ' '.repeat(Math.max(0, innerW - statusText.length)) + 'tab agents  ctrl+p')
+    ),
+    h(Box, { height: 1 },
+      h(Text, { color: hex.border }, borderLine(width, '\u2514', '\u2500', '\u2518'))
+    ),
+  );
+}

package/src/components/ThinkingPanel.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+import wrapAnsi from 'wrap-ansi';
+const { createElement: h } = React;
+
+function borderLine(w, left, mid, right) {
+  return left + mid.repeat(Math.max(0, w - 2)) + right;
+}
+
+export function ThinkingPanel({ reasoning, visible, width, onToggle }) {
+  if (!visible || !reasoning) return null;
+
+  const innerW = Math.max(4, width - 4);
+  const wrapped = wrapAnsi(String(reasoning), innerW, { trim: false, hard: true });
+  const lines = wrapped.split('\n').slice(-8);
+  const panelH = Math.min(lines.length + 3, 10);
+
+  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.thinkingBg },
+    h(Box, { height: 1 },
+      h(Text, { color: hex.border }, borderLine(width, '\u250C', '\u2500', '\u2510'))
+    ),
+    h(Box, { height: 1, backgroundColor: hex.thinkingBg },
+      h(Text, { color: hex.border, backgroundColor: hex.thinkingBg }, '\u2502'),
+      h(Text, { color: hex.thinkingText, italic: true, backgroundColor: hex.thinkingBg }, '  \u25BE thinking '),
+      h(Text, { color: hex.textMuted, backgroundColor: hex.thinkingBg }, '(' + reasoning.length + ' chars)'),
+      h(Text, { color: hex.border, backgroundColor: hex.thinkingBg }, ' '.repeat(Math.max(0, innerW - reasoning.length.toString().length - 18)) + '\u2502')
+    ),
+    lines.map((l, i) =>
+      h(Box, { key: i, height: 1, backgroundColor: hex.thinkingBg },
+        h(Text, { color: hex.border, backgroundColor: hex.thinkingBg }, '\u2502'),
+        h(Text, { color: hex.thinkingText, backgroundColor: hex.thinkingBg }, '  ' + l),
+        h(Text, { color: hex.border, backgroundColor: hex.thinkingBg }, ' '.repeat(Math.max(0, innerW - l.length)) + '\u2502')
+      )
+    ),
+    h(Box, { height: 1 },
+      h(Text, { color: hex.border }, borderLine(width, '\u2514', '\u2500', '\u2518'))
+    ),
+  );
+}

package/src/components/TopPanel.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { appGradient, hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+const BANNER = [
+  '██████  ██       █████  ██████  ██ ████████ ██    ██',
+  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
+  '██       ██      ███████ ██████  ██    ██      ████',
+  '██       ██      ██   ██ ██   ██ ██    ██       ██',
+  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
+];
+
+const BANNER_COMPACT = [
+  '██████  ██       █████  ██████  ██ ████████ ██    ██',
+  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
+  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
+];
+
+function StatusChip({ status, thinkingMs }) {
+  if (status === 'idle') {
+    return h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+      h(Text, { color: hex.textMuted }, ' IDLE ')
+    );
+  }
+  if (status === 'thinking') {
+    return h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+      h(Text, { color: hex.orange }, ' \u25CF ' + thinkingMs + 'ms ')
+    );
+  }
+  return h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+    h(Text, { color: hex.blue }, ' \u25CF STREAMING ')
+  );
+}
+
+function borderLine(w, left, mid, right) {
+  return left + mid.repeat(Math.max(0, w - 2)) + right;
+}
+
+export function TopPanel({ cols, status, thinkingMs }) {
+  const innerW = Math.max(4, cols - 4);
+
+  if (cols < 50) {
+    return h(Box, { flexDirection: 'column', width: cols, backgroundColor: hex.cardBg },
+      h(Box, { height: 1 },
+        h(Text, { color: hex.border }, borderLine(cols, '\u250C', '\u2500', '\u2510'))
+      ),
+      h(Box, { height: 1, paddingLeft: 1, paddingRight: 1, backgroundColor: hex.cardBg },
+        h(Text, { bold: true, backgroundColor: hex.cardBg }, appGradient('CLARITY')),
+        h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, '  '),
+        h(StatusChip, { status, thinkingMs }),
+        h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, ' '.repeat(Math.max(0, innerW - 16)))
+      ),
+      h(Box, { height: 1 },
+        h(Text, { color: hex.border }, borderLine(cols, '\u2514', '\u2500', '\u2518'))
+      ),
+    );
+  }
+
+  const lines = cols < 60 ? BANNER_COMPACT : BANNER;
+  const panelH = lines.length + 2;
+
+  return h(Box, { flexDirection: 'column', width: cols, backgroundColor: hex.cardBg },
+    h(Box, { height: 1 },
+      h(Text, { color: hex.border }, borderLine(cols, '\u250C', '\u2500', '\u2510'))
+    ),
+    lines.map((line, i) =>
+      h(Box, { key: i, height: 1, backgroundColor: hex.cardBg },
+        h(Text, { color: hex.border, backgroundColor: hex.cardBg }, '\u2502'),
+        h(Text, { bold: true, backgroundColor: hex.cardBg }, appGradient.multiline(line)),
+        h(Text, { color: hex.border, backgroundColor: hex.cardBg },
+          ' '.repeat(Math.max(0, cols - line.length - 2)) + '\u2502')
+      )
+    ),
+    h(Box, { height: 1, backgroundColor: hex.cardBg },
+      h(Text, { color: hex.border, backgroundColor: hex.cardBg }, '\u2502'),
+      h(StatusChip, { status, thinkingMs }),
+      h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg },
+        '  tab agents    ctrl+p commands' + ' '.repeat(Math.max(0, innerW - 46)) + '\u2502')
+    ),
+    h(Box, { height: 1 },
+      h(Text, { color: hex.border }, borderLine(cols, '\u251C', '\u2500', '\u2524'))
+    ),
+  );
+}

package/src/config/theme.js

@@ -21,6 +21,9 @@ export const hex = {
   text: '#EEEEF0',
   textDim: '#9999AA',
   textMuted: '#555566',
+  border: '#2A2A3A',
+  thinkingBg: '#14141E',
+  thinkingText: '#666688',
 };
 
 export const color = {

package/src/components/Banner.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { appGradient } from '../config/theme.js';
-const { createElement: h } = React;
-
-const BANNER = [
-  '██████  ██       █████  ██████  ██ ████████ ██    ██',
-  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
-  '██       ██      ███████ ██████  ██    ██      ████',
-  '██       ██      ██   ██ ██   ██ ██    ██       ██',
-  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
-];
-
-const BANNER_COMPACT = [
-  '██████  ██       █████  ██████  ██ ████████ ██    ██',
-  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
-  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
-];
-
-export function Banner({ cols }) {
-  if (cols < 50) {
-    return h(Box, { height: 2, width: '100%', alignItems: 'center', justifyContent: 'center' },
-      h(Text, { bold: true }, appGradient('CLARITY'))
-    );
-  }
-
-  const lines = cols < 60 ? BANNER_COMPACT : BANNER;
-
-  return h(Box, { height: lines.length, width: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' },
-    lines.map((line, i) =>
-      h(Box, { key: i, height: 1 },
-        h(Text, { bold: true }, appGradient.multiline(line))
-      )
-    )
-  );
-}

package/src/components/Footer.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { hex } from '../config/theme.js';
-const { createElement: h } = React;
-
-export function Footer({ cols }) {
-  const showFull = cols >= 58;
-  const keybindText = 'tab agents    ctrl+p commands';
-
-  return h(Box, { width: '100%', flexDirection: 'column', backgroundColor: hex.bg },
-    h(Box, { height: 1, justifyContent: 'flex-end', paddingRight: 2, backgroundColor: hex.bg },
-      h(Text, { color: hex.textMuted }, keybindText)
-    ),
-    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.bg },
-      h(Text, { color: hex.textDim },
-        '\u2580 ',
-        h(Text, { color: hex.orange }, 'Tip'),
-        h(Text, { color: hex.textDim }, ': ' + (showFull
-          ? 'Use /help to view system commands and switch active models'
-          : 'Use /help for commands'))
-      )
-    )
-  );
-}

package/src/components/InputDock.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
-import { hex } from '../config/theme.js';
-const { createElement: h } = React;
-
-export function InputDock({ width, provider, model, agentMode, status, input, onInputChange, onSubmit }) {
-  const isLocked = status !== 'idle';
-  const mShort = model.replace(/^[^/]+\//, '').slice(0, 18);
-
-  return h(Box, { width, flexDirection: 'column', backgroundColor: hex.cardBg },
-    h(Box, { height: 1, backgroundColor: hex.orange }),
-    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
-      h(TextInput, {
-        value: input,
-        onChange: onInputChange,
-        onSubmit,
-        placeholder: 'Ask anything...',
-        focus: !isLocked,
-      })
-    ),
-    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
-      h(Text, { color: hex.textMuted },
-        (provider || 'groq') + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '')
-      )
-    ),
-    h(Box, { height: 1, backgroundColor: hex.cardBg }),
-  );
-}

package/src/components/StatusBar.js

@@ -1,45 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
-import { hex } from '../config/theme.js';
-const { createElement: h } = React;
-
-export function StatusBar({ status, thinkingStart }) {
-  const [elapsed, setElapsed] = useState(0);
-
-  useEffect(() => {
-    if (status === 'idle') { setElapsed(0); return; }
-    const id = setInterval(() => {
-      setElapsed(thinkingStart ? Date.now() - thinkingStart : 0);
-    }, 100);
-    return () => clearInterval(id);
-  }, [status, thinkingStart]);
-
-  const isThinking = status === 'thinking';
-  const isStreaming = status === 'streaming';
-
-  if (status === 'idle') {
-    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
-      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
-        h(Text, { color: hex.textMuted }, '  IDLE  ')
-      )
-    );
-  }
-
-  if (isThinking) {
-    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
-      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
-        h(Text, { color: hex.orange }, '  \u25CF THINKING ' + elapsed + 'ms  ')
-      )
-    );
-  }
-
-  if (isStreaming) {
-    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
-      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
-        h(Text, { color: hex.blue }, '  \u25CF STREAMING ' + elapsed + 'ms  ')
-      )
-    );
-  }
-
-  return null;
-}