clarity-ai 7.2.0 → 7.3.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ---
 
+## 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
+- **FIXED input corruption**: Removed XTerm mouse tracking (`\x1b[?1000h`) entirely. Raw `\x1b[<0;54;41M` sequences no longer leak into the chat text buffer. Termux soft keyboard now works reliably without raw-mode conflicts.
+- **FIXED ASCII logo**: Replaced the figlet banner that rendered as "GLARITY" with a clean 5-line solid block matrix (`██████`) that unambiguously spells CLARITY. Three-tier sizing (5-line / 3-line compact / 1-line gradient).
+- **TrueColor panel textures**: Every message block, streaming pane, and popup container now uses explicit `#1C1C1C` graphite backgrounds. No naked terminal defaults. Orange `#FF9F43` full-width selection bar with `#000000` black text on all active popup rows.
+- **Stderr isolation maintained**: `console.log/error/warn` continue routing to `clarity-debug.log` to prevent stray backend traces from corrupting the UI layer.
+
 ## 7.2.0 (2026-06-06)
 
 ### Sticky floating overlay engine — touch selection, phase-driven layout, virtualized log

package/bin/clarity.js

@@ -57,14 +57,14 @@ async function main() {
     logFile.write('[CLEANUP] CLARITY exiting\n');
     logFile.end();
     try { clear(); } catch {}
-    process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+    process.stdout.write('\x1b[?25h\x1b[0m');
     process.exit(0);
   }
 
   process.on('SIGINT', () => cleanup());
   process.on('SIGTERM', () => cleanup());
   process.on('exit', () => {
-    process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+    process.stdout.write('\x1b[?25h\x1b[0m');
   });
 
   await new Promise(() => {});
@@ -76,7 +76,7 @@ main().catch(err => {
   console.warn = originalWarn;
   logFile.write('[FATAL] ' + (err?.message || String(err)) + '\n');
   logFile.end();
-  process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+  process.stdout.write('\x1b[?25h\x1b[0m');
   console.error('\n\x1b[31mFatal error:\x1b[0m', err?.message || err);
   process.exit(1);
 });

package/package.json

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

package/src/app.js

@@ -2,17 +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';
-import { useMouse } from './hooks/useMouse.js';
 const { createElement: h } = React;
 
 let abortController = null;
-
 export function getAbortController() { return abortController; }
 export function setAbortController(ac) { abortController = ac; }
 export function cancelStream() {
@@ -20,10 +16,15 @@ 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 = [
+  { name: '/keys' }, { name: '/model' }, { name: '/provider' },
+  { name: '/agent' }, { name: '/stop' }, { name: '/clear' },
+  { name: '/export' }, { name: '/help' }, { name: '/exit' },
+];
+
 function deriveStatus(state, sc) {
   if (!state.thinking) return 'idle';
   return sc ? 'streaming' : 'thinking';
@@ -33,14 +34,37 @@ function hasRealMessages(msgs) {
   return msgs.some(m => m.role === 'user' || m.role === 'assistant');
 }
 
+function getFiltered(input) {
+  const q = input.replace(/^\//, '').toLowerCase();
+  if (!q) return COMMAND_ITEMS;
+  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');
@@ -54,23 +78,36 @@ export function App({ config }) {
 
   const rows = dims.rows;
   const cols = dims.cols;
-  const bannerH = cols < 50 ? 2 : 6;
+  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({ r: process.stdout.rows || 30, c: process.stdout.columns || 80 }); }
+    function onResize() { setDims({ rows: process.stdout.rows || 30, cols: process.stdout.columns || 80 }); }
     process.stdout.on('resize', onResize);
     return () => process.stdout.removeListener('resize', onResize);
   }, []);
 
   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; }
@@ -85,8 +122,8 @@ export function App({ config }) {
   }, []);
 
   const onCommand = useCallback(async (val) => {
-    if (val.startsWith('/stop')) { cancelStream(); return; }
-    if (val.startsWith('/exit')) { process.exit(0); return; }
+    if (val === '/stop') { cancelStream(); return; }
+    if (val === '/exit') { process.exit(0); return; }
     await handleCommand(val, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
   }, []);
 
@@ -99,86 +136,67 @@ 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);
-    if (cmd === '/stop') { cancelStream(); return; }
     onCommand(cmd);
   }
 
   function closePopup() { setInput(''); setPopupIdx(0); }
 
   useInput((ch, key) => {
-    if (!showPopup) return;
-    if (key.escape) { closePopup(); return; }
-    if (key.return) {
-      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
-      const q = input.replace(/^\//, '').toLowerCase();
-      const filtered = q ? COMMANDS.filter(c => c.name.includes(q)) : COMMANDS;
-      if (filtered[popupIdx]) handlePopupSelect(filtered[popupIdx].name);
-      return;
-    }
-    if (key.upArrow) { setPopupIdx(i => Math.max(0, i - 1)); return; }
-    if (key.downArrow) {
-      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
-      const q = input.replace(/^\//, '').toLowerCase();
-      const filtered = q ? COMMANDS.filter(c => c.name.includes(q)) : COMMANDS;
-      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 handleClick = useCallback(({ col, row }) => {
-    if (!showPopup) return;
-    const popupLeft = Math.floor((cols - POPUP_W) / 2) + 1;
-    const popupH = 1 + 9 + 1;
-    const popupTop = rows - DOCK_H - FOOTER_H - popupH;
-    if (col >= popupLeft && col < popupLeft + POPUP_W && row >= popupTop && row < popupTop + popupH) {
-      const itemRow = row - popupTop - 1;
-      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
-      if (itemRow >= 0 && itemRow < COMMANDS.length) {
-        handlePopupSelect(COMMANDS[itemRow].name);
-      }
-    }
-  }, [showPopup, cols, rows]);
-
-  useMouse(handleClick);
-
-  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(SlashPopup, { search: input, selectedIdx: popupIdx, onHover: setPopupIdx, width: POPUP_W })
+      ? 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;
 }
 
@@ -23,7 +22,7 @@ function wrap(text, width) {
   return wrapAnsi(String(text), Math.max(4, width), { trim: false, hard: true }).split('\n');
 }
 
-function MsgRole({ role }) {
+function RoleIcon({ role }) {
   switch (role) {
     case 'user': return h(Text, { color: hex.orange, bold: true }, '\u276F ');
     case 'assistant': return h(Text, { color: hex.purple, bold: true }, '\u25C6 ');
@@ -36,20 +35,21 @@ function MsgRole({ role }) {
 
 function MsgBlock({ msg, width }) {
   const lines = useMemo(() => wrap(msg.content, width), [msg.content, width]);
+  const bg = msg.role === 'user' ? hex.surface : hex.cardBg;
 
-  return h(Box, { flexDirection: 'column' },
-    h(Box, { height: 1 },
-      h(MsgRole, { role: msg.role }),
-      h(Text, { color: hex.text }, lines[0] || '')
+  return h(Box, { flexDirection: 'column', backgroundColor: bg },
+    h(Box, { height: 1, backgroundColor: bg },
+      h(RoleIcon, { role: msg.role }),
+      h(Text, { color: hex.text, backgroundColor: bg }, lines[0] || '')
     ),
     lines.slice(1).map((l, i) =>
-      h(Box, { key: i, height: 1 },
-        h(Text, { color: hex.text }, '    ' + l)
+      h(Box, { key: i, height: 1, backgroundColor: bg },
+        h(Text, { color: hex.text, backgroundColor: bg }, '    ' + l)
       )
     ),
     msg.role === 'assistant' && msg.duration
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textMuted },
+      ? h(Box, { height: 1, backgroundColor: bg },
+          h(Text, { color: hex.textMuted, backgroundColor: bg },
             '    ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
         )
       : null
@@ -58,28 +58,30 @@ function MsgBlock({ msg, width }) {
 
 function StreamingBlock({ content, width }) {
   const lines = useMemo(() => wrap(content, width), [content, width]);
-  return h(Box, { flexDirection: 'column' },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.blue, bold: true }, '\u25CF '),
-      h(Text, { color: hex.text }, lines[0] || '')
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.cardBg },
+    h(Box, { height: 1, backgroundColor: hex.cardBg },
+      h(Text, { color: hex.blue, bold: true, backgroundColor: hex.cardBg }, '\u25CF '),
+      h(Text, { color: hex.text, backgroundColor: hex.cardBg }, lines[0] || '')
     ),
     lines.slice(1).map((l, i) =>
-      h(Box, { key: i, height: 1 },
-        h(Text, { color: hex.text }, '    ' + l)
+      h(Box, { key: i, height: 1, backgroundColor: hex.cardBg },
+        h(Text, { color: hex.text, backgroundColor: hex.cardBg }, '    ' + l)
       )
     )
   );
 }
 
-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);
@@ -93,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();
@@ -102,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
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textMuted }, '  \u25CF processing...')
+    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/SlashPopup.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { hex } from '../config/theme.js';
 const { createElement: h } = React;
@@ -15,7 +15,7 @@ const COMMANDS = [
   { name: '/exit',     desc: 'Exit CLARITY' },
 ];
 
-export function SlashPopup({ search, selectedIdx, onHover, width }) {
+export function SlashPopup({ search, selectedIdx, width }) {
   const filtered = useMemo(() => {
     const q = search.replace(/^\//, '').toLowerCase();
     if (!q) return COMMANDS;
@@ -25,31 +25,33 @@ export function SlashPopup({ search, selectedIdx, onHover, width }) {
   }, [search]);
 
   const innerW = Math.max(10, width - 4);
-  const itemLabel = (cmd, i) => {
+  const label = (cmd, i) => {
     const sel = i === selectedIdx;
-    const label = '  ' + cmd.name + '  ' + cmd.desc;
-    return label.length > innerW ? label.slice(0, innerW - 2) + '\u2026' : label;
+    const text = '  ' + cmd.name + '  ' + cmd.desc;
+    return text.length > innerW ? text.slice(0, innerW - 2) + '\u2026' : text;
   };
 
-  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.surface },
+  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.cardBg },
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted }, '  ' + (search || '/') + ' '.repeat(Math.max(0, innerW - (search || '/').length)))
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '  ' + (search || '/') + ' '.repeat(Math.max(0, innerW - (search || '/').length)))
     ),
     filtered.map((cmd, i) =>
       h(Box, {
         key: cmd.name,
         height: 1,
-        backgroundColor: i === selectedIdx ? hex.orange : 'transparent',
+        backgroundColor: i === selectedIdx ? hex.orange : hex.cardBg,
       },
         h(Text, {
           color: i === selectedIdx ? '#000000' : hex.text,
           bold: i === selectedIdx,
-        }, itemLabel(cmd, i))
+          backgroundColor: i === selectedIdx ? hex.orange : hex.cardBg,
+        }, label(cmd, i))
       )
     ),
     filtered.length === 0
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textMuted }, '  No matching commands'))
+      ? h(Box, { height: 1, backgroundColor: hex.cardBg },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, '  No matching commands'))
       : null,
   );
 }

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,41 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { appGradient } from '../config/theme.js';
-const { createElement: h } = React;
-
-const BANNER_FULL = [
-  ' ██████╗██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
-  '██╔════╝██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
-  '██║  ███╗██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
-  '██║   ██║██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
-  '╚██████╔╝███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
-  ' ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
-];
-
-const BANNER_MED = [
-  '██████╗ ██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
-  '██╔════╝ ██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
-  '███████╗ ██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
-  '╚════██║ ██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
-  '██████╔╝ ███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
-  '╚═════╝  ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
-];
-
-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_MED : BANNER_FULL;
-  const bannerHeight = lines.length;
-
-  return h(Box, { height: bannerHeight, 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;
-}

package/src/hooks/useMouse.js

@@ -1,45 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useStdin } from 'ink';
-
-export function useMouse(handler) {
-  const { stdin } = useStdin();
-  const handlerRef = useRef(handler);
-  handlerRef.current = handler;
-
-  useEffect(() => {
-    process.stdout.write('\x1b[?1000h\x1b[?1006h');
-
-    function onData(chunk) {
-      const str = typeof chunk === 'string' ? chunk : Buffer.from(chunk).toString('utf8');
-
-      const sgr = str.match(/\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
-      if (sgr) {
-        const code = parseInt(sgr[1]);
-        const col = parseInt(sgr[2]);
-        const row = parseInt(sgr[3]);
-        const press = sgr[4] === 'M';
-        if (press && handlerRef.current) {
-          handlerRef.current({ col, row, button: code & 3 });
-        }
-        return;
-      }
-
-      const legacy = str.match(/\x1b\[M(.{3})/);
-      if (legacy) {
-        const chars = legacy[1];
-        const cb = chars.charCodeAt(0) - 32;
-        const col = chars.charCodeAt(1) - 32;
-        const row = chars.charCodeAt(2) - 32;
-        if (handlerRef.current) {
-          handlerRef.current({ col, row, button: cb & 3 });
-        }
-      }
-    }
-
-    stdin.on('data', onData);
-    return () => {
-      stdin.removeListener('data', onData);
-      process.stdout.write('\x1b[?1000l\x1b[?1006l');
-    };
-  }, [stdin]);
-}