clarity-ai 6.6.0 → 6.8.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ---
 
+## 6.8.0 (2026-06-06)
+
+### Clean-slate TUI: dynamic dimension defense, sandboxed streams, @inkjs/ui
+- **Dimension defense**: monitors terminal resize; renders fallback if < 60x20
+- **stdout/stderr sandbox**: console.log/error/warn intercepted to prevent AI model noise from corrupting the viewport
+- **Hard-locked 3-tier Yoga grid**: headerBar(1) + messageViewport(flexGrow) + inputDock(3)
+- **@inkjs/ui + cli-truncate**: wrap-ansi + string-width + cli-truncate for zero-bleed text
+- **Single-line gradient header**: `CLARITY AI` with provider/model/mode badges — no ASCII art
+- **Floating picker overlays** with `position: absolute` — never shift the message stream
+- **Alternate screen buffer** with full SIGINT/SIGTERM cleanup and cursor restore
+- **Orange selection bar** (`#FF6B35`) on all active items
+
+## 6.7.0 (2026-06-06)
+
+### Premium Ink+React TUI Engine — zero-bleed grid
+- **Hard-locked 3-tier grid**: Header(1) + Viewport(fill) + Dock(4) — absolute layout isolation
+- **Floating picker overlays** via `position: absolute` — CommandPicker/ModelPicker never shift the message stream
+- **Box-drawing borders** (`┌─┐│└─┘`) on all overlay panels
+- **Orange `#FF6B35` selection bars** — full-width active item highlight
+- **Gradient CLARITY header** via gradient-string (orange→blue)
+- **Alternate screen buffer** (`fullscreen: true`) + SIGINT/SIGTERM cleanup
+- **`string-width` render protection** — correct visual width for Unicode/emoji
+- **Permanent ASCII logo** centered in empty viewport
+- **ansi-escapes** for cursor hide/show, screen clear on boot
+
 ## 6.6.0 (2026-06-06)
 
 ### Premium UI rebuild + DeepSeek R1 reasoning models

package/bin/clarity.js

@@ -8,6 +8,10 @@ import { createInterface } from 'readline';
 process.stdin.resume();
 process.stdin.setEncoding('utf8');
 
+const originalLog = console.log;
+const originalError = console.error;
+const originalWarn = console.warn;
+
 async function main() {
   const provider = process.env.CLARITY_PROVIDER || 'groq';
 
@@ -24,16 +28,27 @@ async function main() {
     process.stdin.resume();
   }
 
+  console.log = function sandboxedLog() {};
+  console.error = function sandboxedError() {};
+  console.warn = function sandboxedWarn() {};
+
+  let keepAlive;
+
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
 
-  const { clear } = render(React.createElement(App, { config }), {
+  const { clear, waitUntilExit, rerender } = render(React.createElement(App, { config }), {
     fullscreen: true,
     patchConsole: false,
+    exitOnCtrlC: false,
   });
 
-  setInterval(() => {}, 2 ** 31 - 1);
+  keepAlive = setInterval(() => {}, 2 ** 31 - 1);
 
   function cleanup() {
+    clearInterval(keepAlive);
+    console.log = originalLog;
+    console.error = originalError;
+    console.warn = originalWarn;
     try { clear(); } catch {}
     process.stdout.write('\x1b[?25h\x1b[0m');
     process.exit(0);
@@ -41,11 +56,15 @@ async function main() {
 
   process.on('SIGINT', () => cleanup());
   process.on('SIGTERM', () => cleanup());
+  process.on('exit', () => { process.stdout.write('\x1b[?25h\x1b[0m'); });
 
   await new Promise(() => {});
 }
 
 main().catch(err => {
+  console.log = originalLog;
+  console.error = originalError;
+  console.warn = originalWarn;
   process.stdout.write('\x1b[?25h\x1b[0m');
   console.error('\n\x1b[31mFatal error:\x1b[0m', err.message);
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "6.6.0",
+  "version": "6.8.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {
@@ -23,6 +23,12 @@
     "react": "^18",
     "ink-spinner": "^5",
     "chalk": "^5",
-    "wrap-ansi": "^9"
+    "wrap-ansi": "^9",
+    "gradient-string": "^3",
+    "figures": "^6",
+    "ansi-escapes": "^7",
+    "string-width": "^7",
+    "@inkjs/ui": "^2",
+    "cli-truncate": "^6"
   }
 }

package/src/components/AppRoot.js

@@ -1,7 +1,8 @@
-import React, { useState, useCallback, useRef } from 'react';
-import { Box } from 'ink';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Box, Text } from 'ink';
 import { createChatState, handleSend, handleCommand } from '../chat.js';
 import { hex } from '../config/theme.js';
+import { getLayout } from '../config/layout.js';
 import { Layout } from './Layout.js';
 const { createElement: h } = React;
 
@@ -34,11 +35,9 @@ export function App({ config }) {
   const stateRef = useRef(state);
   const modelRef = useRef(model);
   const providerRef = useRef(provider);
-  const streamRef = useRef(streamContent);
   stateRef.current = state;
   modelRef.current = model;
   providerRef.current = provider;
-  streamRef.current = streamContent;
 
   const onSubmit = useCallback(async (input) => {
     if (input === '/exit') { process.exit(0); return; }
@@ -59,7 +58,7 @@ export function App({ config }) {
     await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent, ac.signal);
   }, []);
 
-  function handleCommandSelect(cmdName) {
+  function handleCmdSelect(cmdName) {
     setShowCommands(false);
     onSubmit(cmdName);
   }
@@ -74,11 +73,20 @@ export function App({ config }) {
     }));
   }
 
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
+  const layout = getLayout();
+
+  if (!layout.isLargeEnough) {
+    return h(Box, { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', backgroundColor: hex.bg },
+      h(Text, { color: hex.textDim },
+        'Terminal size too small. Please expand. (' + layout.cols + 'x' + layout.rows + ' needed: 60x20)')
+    );
+  }
+
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: '100%', height: '100%' },
     h(Layout, {
       state, streamContent, model, provider,
       showCommands, showModels,
-      onCommandSelect: handleCommandSelect,
+      onCommandSelect: handleCmdSelect,
       onModelSelect: handleModelSelect,
       onCloseCommands: () => setShowCommands(false),
       onCloseModels: () => setShowModels(false),

package/src/components/CodeBlock.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
-import { hex, sym } from '../config/theme.js';
+import { hex } from '../config/theme.js';
 import { getLayout } from '../config/layout.js';
 const { createElement: h } = React;
 
@@ -9,39 +9,34 @@ const LANG_COLORS = {
   py: '#3572A5', rb: '#CC342D', go: '#00ADD8', rs: '#DEA584',
   java: '#B07219', kt: '#7F52FF', swift: '#FFAC45',
   html: '#E34F26', css: '#1572B6', scss: '#CC6699',
-  sh: '#89E051', bash: '#89E051', dockerfile: '#384D54',
-  json: '#292929', yaml: '#CB171E', md: '#083FA1', sql: '#E38C00',
+  sh: '#89E051', bash: '#89E051',
 };
 
 export function CodeBlock({ code, language }) {
   const lang = language || 'code';
   const lines = useMemo(() => String(code).split('\n'), [code]);
   const langColor = LANG_COLORS[lang] || '#555';
-  const lnW = String(lines.length).length;
   const { cols } = getLayout();
-  const maxLines = 20;
+  const maxLines = 15;
   const visible = lines.slice(0, maxLines);
   const codeWidth = cols - 10;
+  const lnW = String(lines.length).length;
 
   return h(Box, { flexDirection: 'column', backgroundColor: hex.codeBg },
     h(Box, { height: 1, backgroundColor: hex.codeBg },
       h(Text, { color: langColor, bold: true, backgroundColor: hex.codeBg }, '  ' + lang),
-      h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, ' ' + String(lines.length) + ' lines '),
+      h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, ' ' + String(lines.length) + ' lines'),
     ),
     h(Box, { flexDirection: 'column', backgroundColor: hex.codeBg },
       visible.map((line, i) =>
         h(Box, { key: i, height: 1, backgroundColor: hex.codeBg },
-          h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg },
-            '   ' + String(i + 1).padStart(lnW) + ' '
-          ),
-          h(Text, { color: '#C9D1D9', backgroundColor: hex.codeBg, wrap: 'truncate-end' },
-            (line || ' ').slice(0, codeWidth)
-          )
+          h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, '   ' + String(i + 1).padStart(lnW) + ' '),
+          h(Text, { color: '#C9D1D9', backgroundColor: hex.codeBg, wrap: 'truncate-end' }, (line || ' ').slice(0, codeWidth))
         )
       ),
       lines.length > maxLines
         ? h(Box, { height: 1, backgroundColor: hex.codeBg },
-            h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, '    ' + sym.ellipsis + ' ' + (lines.length - maxLines) + ' more lines')
+            h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, '    \u2026 ' + (lines.length - maxLines) + ' more lines')
           )
         : null
     )

package/src/components/CommandPicker.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
-import { hex, sym } from '../config/theme.js';
+import { hex } from '../config/theme.js';
 import { getLayout } from '../config/layout.js';
 const { createElement: h } = React;
 
@@ -16,7 +16,7 @@ const COMMANDS = [
   { name: '/exit',     desc: 'Exit CLARITY' },
 ];
 
-export function CommandPicker({ query, onSelect, onClose }) {
+export function CommandPicker({ onSelect, onClose }) {
   const [search, setSearch] = useState('');
   const [idx, setIdx] = useState(0);
   const { cols } = getLayout();
@@ -36,51 +36,38 @@ export function CommandPicker({ query, onSelect, onClose }) {
 
   const w = Math.min(cols - 4, 48);
 
-  const items = filtered.map((cmd, i) => {
-    const isSel = i === idx;
-    return h(Box, {
-      key: cmd.name, height: 1,
-      backgroundColor: isSel ? hex.selectionBg : hex.bg,
-    },
-      h(Text, {
-        color: isSel ? hex.selectionText : hex.text,
-        bold: isSel,
-        backgroundColor: isSel ? hex.selectionBg : hex.bg,
-      }, '  ' + (isSel ? '\u276F ' : '  ') + cmd.name),
-      h(Text, {
-        color: isSel ? hex.selectionText : hex.textDim,
-        backgroundColor: isSel ? hex.selectionBg : hex.bg,
-      }, ' ' + cmd.desc)
-    );
-  });
-
-  const maxH = Math.min(items.length + 3, 16);
-
-  return h(Box, { flexDirection: 'column', width: w, marginLeft: 2, backgroundColor: hex.bg },
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: w },
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.tl + sym.box.h.repeat(w - 2) + sym.box.tr)
+        '\u250C' + '\u2500'.repeat(w - 2) + '\u2510')
     ),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.gold, backgroundColor: hex.surfaceAlt }, sym.box.v + ' '),
-      h(Text, { color: hex.text, backgroundColor: hex.surfaceAlt }, 'Commands'),
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '  type to filter...' + ' '.repeat(Math.max(0, w - 20 - 4)) + sym.box.v)
+        '\u2502 Commands' + ' '.repeat(Math.max(0, w - 12)) + '\u2502')
     ),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.v + ' ' + (search || sym.ellipsis) + ' '.repeat(Math.max(0, w - 6)) + sym.box.v)
+        '\u2502 ' + (search || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + '\u2502')
     ),
-    h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
-      ...items,
+    filtered.map((cmd, i) =>
+      h(Box, {
+        key: cmd.name, height: 1,
+        backgroundColor: i === idx ? hex.selectionBg : hex.bg,
+      },
+        h(Text, {
+          color: i === idx ? hex.selectionText : hex.text,
+          bold: i === idx,
+          backgroundColor: i === idx ? hex.selectionBg : hex.bg,
+        }, (i === idx ? '\u276F ' : '  ') + cmd.name + ' ' + cmd.desc)
+      )
     ),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.bl + sym.box.h.repeat(w - 2) + sym.box.br)
+        '\u2514' + '\u2500'.repeat(w - 2) + '\u2518')
     ),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '  ' + sym.arrowU + sym.arrowD + ' nav  ' + sym.arrowR + ' select  Esc close')
+        '  \u2191\u2193 nav  \u2192 select  Esc close')
     ),
   );
 }

package/src/components/Composer.js

@@ -13,7 +13,7 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
   r.current = input;
 
   const { cols } = getLayout();
-  const w = Math.max(10, cols - 8);
+  const w = Math.max(10, cols - 6);
   const lineCount = Math.max(1, Math.ceil((input.length || 1) / w));
   const visible = Math.min(lineCount, MAX_ROWS);
   const mShort = model.replace(/^[^/]+\//, '').slice(0, 18);
@@ -45,11 +45,11 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
     }
   });
 
-  const sep = h(Box, { key: 'sep', height: 1, backgroundColor: hex.surfaceAlt },
-    h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, '  ' + sym.box.tl + sym.box.h.repeat(Math.max(0, cols - 6)) + sym.box.tr)
-  );
-
-  const rows = [sep];
+  const rows = [];
+  rows.push(h(Box, { key: 'sep', height: 1, backgroundColor: hex.surfaceAlt },
+    h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+      '  \u250C' + sym.box.h.repeat(Math.max(0, cols - 6)) + '\u2510')
+  ));
 
   for (let i = 0; i < MAX_ROWS; i++) {
     const start = i * w;
@@ -60,17 +60,15 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
           color: isPlaceholder ? hex.textMuted : hex.text,
           backgroundColor: hex.bg,
           wrap: 'truncate-end',
-        }, '  \u2502 ' + (seg || (i === 0 && isPlaceholder ? 'type a message...' : ' ')) + '  ')
+        }, '  \u2502 ' + (seg || (i === 0 && isPlaceholder ? 'type a message...' : ' ')))
       )
     );
   }
 
-  rows.push(
-    h(Box, { key: 'st', height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '  ' + sym.box.bl + sym.box.h + ' ' + provider + ' ' + sym.midDot + ' ' + mShort + (agentMode ? ' ' + sym.midDot + ' AGENT' : '') + '  ' + sym.midDot + '  Ctrl+P')
-    )
-  );
+  rows.push(h(Box, { key: 'st', height: 1, backgroundColor: hex.surfaceAlt },
+    h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+      '  \u2514' + sym.box.h + ' ' + provider + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '') + '  \u00B7  Ctrl+P')
+  ));
 
   return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt }, ...rows);
 }

package/src/components/HeaderBar.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { hex, appGradient } from '../config/theme.js';
+import { getLayout } from '../config/layout.js';
+const { createElement: h } = React;
+
+export function HeaderBar({ model, provider, agentMode, thinking }) {
+  const { cols } = getLayout();
+  const m = model.replace(/^[^/]+\//, '').slice(0, Math.floor((cols - 20) / 2));
+  const status = thinking ? ' \u25CF' : ' \u25CB';
+  const mode = agentMode ? '\u25C8 AGENT' : '\u25CB USER';
+  const label = '[' + provider + '] ' + m + ' ' + status + ' ' + mode;
+  const labelLen = label.length + 14;
+  const gap = Math.max(1, cols - labelLen);
+
+  return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+    h(Text, { backgroundColor: hex.surfaceAlt }, appGradient(' CLARITY AI ')),
+    h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, ' '.repeat(gap) + label + ' ')
+  );
+}

package/src/components/InputBar.js

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { hex } from '../config/theme.js';
+import { getLayout } from '../config/layout.js';
+const { createElement: h } = React;
+
+export function InputBar({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
+  const [input, setInput] = useState('');
+  const [cursor, setCursor] = useState(0);
+  const { cols } = getLayout();
+  const w = Math.max(10, cols - 6);
+  const mShort = model.replace(/^[^/]+\//, '').slice(0, 16);
+
+  useInput((ch, key) => {
+    if (key.ctrl && key.p) { onSlash(); return; }
+    if (key.escape) { onSubmit('/exit'); return; }
+    if (key.return && !key.shift) {
+      if (input.trim()) { const t = input; setInput(''); setCursor(0); onSubmit(t); }
+      return;
+    }
+    if (key.return && key.shift) {
+      setInput(p => p.slice(0, cursor) + '\n' + p.slice(cursor));
+      setCursor(c => c + 1);
+      return;
+    }
+    if (key.backspace || key.delete) {
+      if (cursor > 0) { setInput(p => p.slice(0, cursor - 1) + p.slice(cursor)); setCursor(c => c - 1); }
+      return;
+    }
+    if (key.leftArrow && cursor > 0) { setCursor(c => c - 1); return; }
+    if (key.rightArrow && cursor < input.length) { setCursor(c => c + 1); return; }
+    if (key.home) { setCursor(0); return; }
+    if (key.end) { setCursor(input.length); return; }
+    if (ch && ch.length === 1 && ch.charCodeAt(0) >= 32) {
+      setInput(p => p.slice(0, cursor) + ch + p.slice(cursor));
+      setCursor(c => c + 1);
+    }
+  });
+
+  const isPlaceholder = !input && !thinking;
+
+  return h(Box, { flexDirection: 'column' },
+    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '  \u250C' + '\u2500'.repeat(Math.max(0, cols - 6)) + '\u2510')
+    ),
+    h(Box, { height: 1, backgroundColor: hex.bg },
+      h(Text, {
+        color: isPlaceholder ? hex.textMuted : hex.text,
+        backgroundColor: hex.bg,
+        wrap: 'truncate-end',
+      }, '  \u2502 ' + (input || (thinking ? '\u25CF processing...' : 'type a message...')) + ' ')
+    ),
+    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '  \u2514' + '\u2500' + ' ' + provider + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '') + '  \u00B7  Ctrl+P')
+    )
+  );
+}

package/src/components/Layout.js

@@ -1,29 +1,30 @@
 import React from 'react';
 import { Box } from 'ink';
 import { hex } from '../config/theme.js';
-import { StatusBar } from './StatusBar.js';
+import { HeaderBar } from './HeaderBar.js';
 import { MessageList } from './MessageList.js';
-import { Composer } from './Composer.js';
+import { InputBar } from './InputBar.js';
 import { CommandPicker } from './CommandPicker.js';
 import { ModelPicker } from './ModelPicker.js';
 const { createElement: h } = React;
 
 export function Layout({ state, streamContent, model, provider, showCommands, showModels, onCommandSelect, onModelSelect, onCloseCommands, onCloseModels, onSlash, onSubmit }) {
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
-    h(StatusBar, { model, provider, agentMode: state.agentMode, thinking: state.thinking }),
-    h(Box, { flexGrow: 1, flexDirection: 'column' },
+  const picker = showCommands || showModels
+    ? h(Box, { position: 'absolute', top: 1, left: 2, backgroundColor: hex.bg, flexDirection: 'column' },
+        showCommands ? h(CommandPicker, { onSelect: onCommandSelect, onClose: onCloseCommands }) : null,
+        showModels ? h(ModelPicker, { onSelect: onModelSelect, onClose: onCloseModels }) : null
+      )
+    : null;
+
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: '100%', height: '100%' },
+    h(HeaderBar, { model, provider, agentMode: state.agentMode, thinking: state.thinking }),
+    h(Box, { flexGrow: 1, flexDirection: 'column', position: 'relative' },
       h(MessageList, {
         messages: state.messages, thinking: state.thinking,
         streamContent, agentStatus: state.agentStatus,
-        toolExecutions: state.toolExecutions,
-      })
+      }),
+      picker
     ),
-    showCommands || showModels
-      ? h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
-          showCommands ? h(CommandPicker, { query: '', onSelect: onCommandSelect, onClose: onCloseCommands }) : null,
-          showModels ? h(ModelPicker, { onSelect: onModelSelect, onClose: onCloseModels }) : null
-        )
-      : null,
-    h(Composer, { provider, model, agentMode: state.agentMode, thinking: state.thinking, onSlash, onSubmit })
+    h(InputBar, { provider, model, agentMode: state.agentMode, thinking: state.thinking, onSlash, onSubmit })
   );
 }

package/src/components/LoadingIndicator.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Box, Text } from 'ink';
-import { hex, sym } from '../config/theme.js';
+import { hex } from '../config/theme.js';
 const { createElement: h } = React;
 
 export function LoadingIndicator({ label }) {
   return h(Box, { height: 1, backgroundColor: hex.surface },
-    h(Text, { color: hex.blue, backgroundColor: hex.surface }, '    ' + sym.dot),
+    h(Text, { color: hex.blue, backgroundColor: hex.surface }, '    \u25CF'),
     h(Text, { color: hex.textDim, backgroundColor: hex.surface }, ' ' + (label || 'processing'))
   );
 }

package/src/components/MessageList.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
-import { hex, sym, LOGO } from '../config/theme.js';
+import { hex } from '../config/theme.js';
 import { getLayout, sliceToViewport, buildLineArray } from '../config/layout.js';
 const { createElement: h } = React;
 
@@ -8,7 +8,7 @@ function Line({ type, text, data }) {
   switch (type) {
     case 'user_head':
       return h(Box, { height: 1, backgroundColor: hex.userBg },
-        h(Text, { color: hex.accent, bold: true, backgroundColor: hex.userBg }, '  \u276F ' + sym.bullet + ' YOU')
+        h(Text, { color: hex.accent, bold: true, backgroundColor: hex.userBg }, '  \u276F YOU')
       );
     case 'user_line':
       return h(Box, { height: 1, backgroundColor: hex.userBg },
@@ -16,7 +16,7 @@ function Line({ type, text, data }) {
       );
     case 'asst_head':
       return h(Box, { height: 1, backgroundColor: hex.surface },
-        h(Text, { color: hex.purple, bold: true, backgroundColor: hex.surface }, '  ' + sym.diamond + ' CLARITY')
+        h(Text, { color: hex.purple, bold: true, backgroundColor: hex.surface }, '  \u25C6 CLARITY')
       );
     case 'asst_line':
       return h(Box, { height: 1, backgroundColor: hex.surface },
@@ -24,27 +24,28 @@ function Line({ type, text, data }) {
       );
     case 'asst_foot':
       return h(Box, { height: 1, backgroundColor: hex.surface },
-        h(Text, { color: hex.textDim, backgroundColor: hex.surface }, '  ' + sym.triR + ' ' + (parseInt(text) < 1000 ? text + 'ms' : (parseInt(text) / 1000).toFixed(1) + 's'))
+        h(Text, { color: hex.textDim, backgroundColor: hex.surface },
+          '  \u25B8 ' + (parseInt(text) < 1000 ? text + 'ms' : (parseInt(text) / 1000).toFixed(1) + 's'))
       );
     case 'tool_line':
       return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-        h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    ' + sym.bullet + ' ' + (text || ''))
+        h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    \u25C9 ' + (text || ''))
       );
     case 'sys_line':
       return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-        h(Text, { color: hex.green, backgroundColor: hex.surfaceAlt }, '    ' + sym.bullet + ' ' + (text || ''))
+        h(Text, { color: hex.green, backgroundColor: hex.surfaceAlt }, '    \u25C9 ' + (text || ''))
       );
     case 'err_line':
       return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-        h(Text, { color: hex.red, backgroundColor: hex.surfaceAlt }, '    ' + sym.cross + ' ' + (text || ''))
+        h(Text, { color: hex.red, backgroundColor: hex.surfaceAlt }, '    \u2716 ' + (text || ''))
       );
     case 'stream_head':
       return h(Box, { height: 1, backgroundColor: hex.surface },
-        h(Text, { color: hex.purple, bold: true, backgroundColor: hex.surface }, '  ' + sym.diamond + ' CLARITY')
+        h(Text, { color: hex.purple, bold: true, backgroundColor: hex.surface }, '  \u25C6 CLARITY')
       );
     case 'stream_status':
       return h(Box, { height: 1, backgroundColor: hex.surface },
-        h(Text, { color: hex.blue, backgroundColor: hex.surface }, '    ' + sym.dot + ' ' + (text || ''))
+        h(Text, { color: hex.blue, backgroundColor: hex.surface }, '    \u25CF ' + (text || ''))
       );
     case 'stream_line':
       return h(Box, { height: 1, backgroundColor: hex.surface },
@@ -55,7 +56,7 @@ function Line({ type, text, data }) {
   }
 }
 
-export function MessageList({ messages, thinking, streamContent, agentStatus, toolExecutions }) {
+export function MessageList({ messages, thinking, streamContent, agentStatus }) {
   const { viewport, contentWidth } = getLayout();
 
   const entries = useMemo(() => {
@@ -65,47 +66,25 @@ export function MessageList({ messages, thinking, streamContent, agentStatus, to
     }));
   }, [messages]);
 
-  const showLogo = entries.length <= 1 && !thinking && !streamContent;
-
   const { slice, clipIndex, clipLines } = useMemo(
-    () => sliceToViewport(entries, Math.max(viewport - (showLogo ? 14 : 0), viewport), contentWidth),
-    [entries, viewport, contentWidth, showLogo]
+    () => sliceToViewport(entries, viewport, contentWidth),
+    [entries, viewport, contentWidth]
   );
 
-  const lines = useMemo(
+  const rawLines = useMemo(
     () => buildLineArray(slice, clipIndex, clipLines, contentWidth),
     [slice, clipIndex, clipLines, contentWidth]
   );
 
-  const padded = [...lines];
-  if (showLogo) {
-    while (padded.length < Math.max(viewport - 14, 0)) {
-      padded.unshift({ type: 'empty' });
-    }
-  } else {
-    for (let i = padded.length; i < viewport; i++) {
-      padded.unshift({ type: 'empty' });
-    }
-  }
-
-  const logoVisible = showLogo;
-  const totalHeight = viewport;
+  const fillCount = Math.max(0, viewport - rawLines.length);
+  const padded = [];
+  for (let i = 0; i < fillCount; i++) padded.push({ type: 'empty' });
+  for (const ln of rawLines) padded.push(ln);
 
-  return h(Box, { height: totalHeight, flexDirection: 'column', overflow: 'hidden' },
+  return h(Box, { height: viewport, flexDirection: 'column', overflow: 'hidden' },
     padded.map((ln, i) => {
-      if (ln.type === 'empty') {
-        if (logoVisible && i < 14) {
-          const logoLine = LOGO[i] || '';
-          return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg },
-            h(Text, {
-              color: (i === 1 || i === 9 || i === 10 || i === 11) ? hex.accent : hex.textMuted,
-              backgroundColor: hex.bg,
-            }, '  ' + logoLine)
-          );
-        }
-        return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg });
-      }
-      return h(Box, { key: (ln.data?.id || 'l') + '-' + i, height: 1 },
+      if (ln.type === 'empty') return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg });
+      return h(Box, { key: (ln.data?.id || 'r') + '-' + i, height: 1 },
         h(Line, { type: ln.type, text: ln.text, data: ln.data })
       );
     })

package/src/components/ModelPicker.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { ALL_MODELS } from '../config/models.js';
-import { hex, sym } from '../config/theme.js';
+import { hex } from '../config/theme.js';
 import { getLayout } from '../config/layout.js';
 const { createElement: h } = React;
 
@@ -39,53 +39,45 @@ export function ModelPicker({ onSelect, onClose }) {
 
   const w = Math.min(cols - 4, 52);
 
-  const items = flat.map((m, i) => {
-    if (m._header) {
-      return h(Box, { key: 'h-' + m._provider, height: 1, backgroundColor: hex.surfaceAlt },
-        h(Text, { color: hex.blue, bold: true, backgroundColor: hex.surfaceAlt }, sym.box.v + ' ' + m._provider.toUpperCase()),
-        h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' '.repeat(Math.max(0, w - m._provider.length - 8)) + sym.box.v)
-      );
-    }
-    const isSel = i === idx;
-    return h(Box, {
-      key: m.id, height: 1,
-      backgroundColor: isSel ? hex.selectionBg : hex.bg,
-    },
-      h(Text, {
-        color: isSel ? hex.selectionText : hex.text,
-        bold: isSel,
-        backgroundColor: isSel ? hex.selectionBg : hex.bg,
-      }, (isSel ? '\u276F ' : '  ') + m.label + (m.badge ? ' [' + m.badge + ']' : '') + ' '.repeat(Math.max(0, w - m.label.length - (m.badge ? m.badge.length + 4 : 0) - 4)) + (isSel ? '\u276F' : '  '))
-    );
-  });
-
-  const count = flat.filter(m => !m._header).length;
-
-  return h(Box, { flexDirection: 'column', width: w, marginLeft: 2, backgroundColor: hex.bg },
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: w },
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.tl + sym.box.h.repeat(w - 2) + sym.box.tr)
+        '\u250C' + '\u2500'.repeat(w - 2) + '\u2510')
     ),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.gold, backgroundColor: hex.surfaceAlt }, sym.box.v + ' '),
-      h(Text, { color: hex.text, backgroundColor: hex.surfaceAlt }, 'Models'),
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '  ' + count + ' available' + ' '.repeat(Math.max(0, w - 14 - 8)) + sym.box.v)
+        '\u2502 Models  ' + flat.filter(m => !m._header).length + ' available' + ' '.repeat(Math.max(0, w - 18)) + '\u2502')
     ),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.v + ' ' + (search || sym.ellipsis) + ' '.repeat(Math.max(0, w - 6)) + sym.box.v)
-    ),
-    h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
-      ...items,
+        '\u2502 ' + (search || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + '\u2502')
     ),
+    flat.map((m, i) => {
+      if (m._header) {
+        return h(Box, { key: 'h-' + m._provider, height: 1, backgroundColor: hex.surfaceAlt },
+          h(Text, { color: hex.blue, bold: true, backgroundColor: hex.surfaceAlt },
+            '\u2502 ' + m._provider.toUpperCase() + ' '.repeat(Math.max(0, w - m._provider.length - 5)) + '\u2502')
+        );
+      }
+      const isSel = i === idx;
+      return h(Box, {
+        key: m.id, height: 1,
+        backgroundColor: isSel ? hex.selectionBg : hex.bg,
+      },
+        h(Text, {
+          color: isSel ? hex.selectionText : hex.text,
+          bold: isSel,
+          backgroundColor: isSel ? hex.selectionBg : hex.bg,
+        }, (isSel ? '\u276F ' : '  ') + m.label + (m.badge ? ' [' + m.badge + ']' : ''))
+      );
+    }),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.bl + sym.box.h.repeat(w - 2) + sym.box.br)
+        '\u2514' + '\u2500'.repeat(w - 2) + '\u2518')
     ),
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
       h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '  ' + sym.arrowU + sym.arrowD + ' nav  ' + sym.arrowR + ' select  Esc close')
+        '  \u2191\u2193 nav  \u2192 select  Esc close')
     ),
   );
 }

package/src/components/StatusBar.js

@@ -1,16 +1,19 @@
 import React from 'react';
 import { Box, Text } from 'ink';
-import { hex, sym } from '../config/theme.js';
+import { hex } from '../config/theme.js';
 import { getLayout } from '../config/layout.js';
 const { createElement: h } = React;
 
 export function StatusBar({ model, provider, agentMode, thinking }) {
   const { cols } = getLayout();
-  const m = model.replace(/^[^/]+\//, '').slice(0, 22);
-  const left = sym.circle + ' CLARITY  ' + sym.midDot + '  ' + m + '  ' + sym.midDot + '  ' + provider;
-  const right = (agentMode ? '\u25C8 AGENT' : '\u25CB USER') + (thinking ? ' ' + sym.dot : '');
-  const gap = Math.max(1, cols - left.length - right.length - 4);
+  const m = model.replace(/^[^/]+\//, '').slice(0, 20);
+  const left = '\u25C9 CLARITY \u00B7 ' + m + ' \u00B7 ' + provider;
+  const right = (agentMode ? '\u25C8 AGENT' : '\u25CB USER') + (thinking ? ' \u25CF' : '');
+  const gap = Math.max(1, cols - left.length - right.length - 2);
+
   return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-    h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, '  ' + left + ' '.repeat(gap) + right + '  ')
+    h(Text, { color: hex.accent, bold: true, backgroundColor: hex.surfaceAlt }, ' ' + left),
+    h(Text, { backgroundColor: hex.surfaceAlt }, ' '.repeat(gap)),
+    h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, right + ' ')
   );
 }

package/src/components/ThinkingBlock.js

@@ -1,45 +1,27 @@
 import React, { useState } from 'react';
 import { Box, Text } from 'ink';
-import { hex, sym } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
+import { hex } from '../config/theme.js';
 const { createElement: h } = React;
 
-export function ThinkingBlock({ toolResults, duration }) {
-  const [collapsed, setCollapsed] = useState(true);
-  const { cols } = getLayout();
+export function ThinkingBlock({ toolResults, duration, collapsed: initialCollapsed }) {
+  const [collapsed, setCollapsed] = useState(initialCollapsed !== undefined ? initialCollapsed : true);
   const items = toolResults || [];
   const durStr = duration
     ? (duration < 1000 ? duration + 'ms' : (duration / 1000).toFixed(1) + 's')
     : '';
 
-  const headerText = sym.triR + ' Thought' + (durStr ? ' (' + durStr + ')' : '');
-  const icon = collapsed ? sym.triR : sym.triD;
-
   return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
     h(Box, { height: 1 },
-      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    ' + icon + ' ' + headerText)
+      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt },
+        '    ' + (collapsed ? '\u25B8' : '\u25BE') + ' Thought' + (durStr ? ' (' + durStr + ')' : ''))
     ),
     collapsed ? null : h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-      items.map((tr, i) => {
-        const isLast = i === items.length - 1;
-        const prefix = isLast ? sym.treeTip + sym.u.h : sym.treeFork + sym.u.h;
-        const conn = isLast ? ' ' : sym.treeCon;
-        const ico = tr.status === 'failed' ? sym.cross : sym.circle;
-        const col = tr.status === 'failed' ? hex.red : hex.green;
-        const td = tr.duration ? ' ' + tr.duration + 'ms' : '';
-        const line = '      ' + prefix + ' ' + ico + ' ' + tr.name + td;
-        const contentLine = tr.content && tr.content.length < 200
-          ? '      ' + conn + ' ' + String(tr.content).slice(0, cols - 14)
-          : null;
-        return h(Box, { key: tr.execId || i, flexDirection: 'column' },
-          h(Box, { height: 1 },
-            h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, line)
-          ),
-          contentLine ? h(Box, { height: 1 },
-            h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, contentLine)
-          ) : null
-        );
-      })
+      items.map((tr, i) =>
+        h(Box, { key: tr.execId || i, height: 1 },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+            '      ' + (i === items.length - 1 ? '\u2570\u2500' : '\u256D\u2500') + ' ' + (tr.status === 'failed' ? '\u2716' : '\u25C9') + ' ' + tr.name + (tr.duration ? ' ' + tr.duration + 'ms' : ''))
+        )
+      )
     )
   );
 }

package/src/components/ToolCard.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Box, Text } from 'ink';
-import { hex, sym } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
+import { hex } from '../config/theme.js';
+import { truncate } from '../config/layout.js';
 const { createElement: h } = React;
 
 export function ToolCard({ exec, isActive }) {
-  const { cols } = getLayout();
   const name = exec.name || 'tool';
   const status = exec.status || 'running';
   const dur = exec.duration ? (exec.duration < 1000 ? exec.duration + 'ms' : (exec.duration / 1000).toFixed(1) + 's') : '';
@@ -14,31 +13,23 @@ export function ToolCard({ exec, isActive }) {
 
   if (isDone) {
     const c = status === 'failed' ? hex.red : hex.green;
-    const icon = status === 'failed' ? sym.cross : sym.bullet;
     return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: c, backgroundColor: hex.surfaceAlt }, '    ' + icon + ' ' + name + (dur ? '  ' + dur : ''))
+      h(Text, { color: c, backgroundColor: hex.surfaceAlt }, '    ' + (status === 'failed' ? '\u2716' : '\u25C9') + ' ' + name + (dur ? '  ' + dur : ''))
     );
   }
 
-  const w = Math.min(cols - 8, 56);
-
   return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
     h(Box, { height: 1 },
-      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    ' + sym.bullet + ' ' + name + (dur ? '  ' + dur : ''))
+      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    \u25C9 ' + name + (dur ? '  ' + dur : ''))
     ),
     args.length < 80
       ? h(Box, { height: 1 },
-          h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, '      ' + sym.triR + ' ' + args.slice(0, w))
+          h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, '      \u25B8 ' + truncate(args, 56))
         )
       : null,
     status === 'running'
       ? h(Box, { height: 1 },
-          h(Text, { color: hex.blue, backgroundColor: hex.surfaceAlt }, '      ' + sym.dot + ' running')
-        )
-      : null,
-    status === 'failed' && exec.error
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.red, backgroundColor: hex.surfaceAlt }, '      ' + sym.cross + ' ' + String(exec.error).slice(0, w - 4))
+          h(Text, { color: hex.blue, backgroundColor: hex.surfaceAlt }, '      \u25CF running')
         )
       : null,
   );

package/src/config/layout.js

@@ -1,4 +1,6 @@
 import wrapAnsi from 'wrap-ansi';
+import stringWidth from 'string-width';
+import cliTruncate from 'cli-truncate';
 
 export function getLayout() {
   const rows = process.stdout.rows || 30;
@@ -6,44 +8,45 @@ export function getLayout() {
   return {
     rows,
     cols,
-    topBar: 1,
-    dock: 4,
-    viewport: Math.max(8, rows - 5),
-    contentWidth: Math.max(20, cols - 4),
-    padLeft: '  ',
-    padRight: '  ',
+    headerHeight: 1,
+    dockHeight: 3,
+    viewport: Math.max(4, rows - 4),
+    contentWidth: Math.max(10, cols - 4),
+    isLargeEnough: cols >= 60 && rows >= 20,
   };
 }
 
+export function sw(text) {
+  return stringWidth(text || '');
+}
+
+export function truncate(text, width) {
+  return cliTruncate(text || '', width, { position: 'end' });
+}
+
 export function wrapText(text, width) {
   if (!text) return '';
-  return wrapAnsi(String(text), width, { trim: false, hard: true });
+  return wrapAnsi(String(text), Math.max(1, width), { trim: false, hard: true });
 }
 
 export function countLines(text, width) {
   if (!text) return 1;
-  return wrapAnsi(String(text), width, { trim: false, hard: true }).split('\n').length;
-}
-
-export function truncateText(text, maxLines, width) {
-  const wrapped = wrapText(text, width);
-  const lines = wrapped.split('\n');
-  if (lines.length <= maxLines) return wrapped;
-  return lines.slice(0, maxLines).join('\n');
+  return wrapAnsi(String(text), Math.max(1, width), { trim: false, hard: true }).split('\n').length;
 }
 
 export function measureEntry(entry, w) {
   const nr = entry.role;
-  if (nr === 'user') return 1 + countLines(entry.content, w) + 0;
-  if (nr === 'assistant') return 2 + countLines(entry.content, w) + (entry.duration ? 1 : 0);
-  if (nr === 'tool') return 2 + (entry.completed ? 0 : Math.min(6, countLines(entry.content || '', w) + 2));
+  const cw = Math.max(1, w);
+  if (nr === 'user') return 1 + countLines(entry.content, cw);
+  if (nr === 'assistant') return 2 + countLines(entry.content, cw) + (entry.duration ? 1 : 0);
+  if (nr === 'tool') return 1;
   if (nr === 'system' || nr === 'error') return 1;
-  if (nr === 'streaming') return 2 + Math.min(40, countLines(entry.content, w));
+  if (nr === 'streaming') return 2 + Math.min(30, countLines(entry.content, cw));
   return 1;
 }
 
 export function sliceToViewport(entries, viewportRows, w) {
-  const heights = entries.map(e => measureEntry(e, w));
+  const heights = entries.map(e => measureEntry(e, Math.max(1, w)));
   let used = 0;
   let start = entries.length;
   let clipLines = 0;
@@ -59,60 +62,46 @@ export function sliceToViewport(entries, viewportRows, w) {
     used += heights[i];
     start = i;
   }
-  const slice = entries.slice(start);
-  return { slice, clipLines, clipIndex: clipLines > 0 ? 0 : -1 };
+  return { slice: entries.slice(start), clipLines, clipIndex: clipLines > 0 ? 0 : -1 };
 }
 
 export function buildLineArray(slice, clipIndex, clipLines, w) {
   const lines = [];
+  const cw = Math.max(1, w);
   for (let idx = 0; idx < slice.length; idx++) {
     const e = slice[idx];
     const nr = e.role;
     let skip = 0;
     if (idx === clipIndex && clipLines > 0) skip = clipLines;
+
     if (nr === 'user') {
       lines.push({ type: 'user_head', data: e });
-      const wrapped = wrapText(e.content, w);
-      const contentLines = wrapped.split('\n');
+      const contentLines = wrapText(e.content, cw).split('\n');
       for (let ci = skip; ci < contentLines.length; ci++) {
         lines.push({ type: 'user_line', text: contentLines[ci], data: e });
       }
     } else if (nr === 'assistant') {
       lines.push({ type: 'asst_head', data: e });
-      if (skip <= 0) {
-        const wrapped = wrapText(e.content, w);
-        const contentLines = wrapped.split('\n');
-        for (let ci = 0; ci < contentLines.length; ci++) {
-          lines.push({ type: 'asst_line', text: contentLines[ci], data: e });
-        }
-      } else {
-        const wrapped = wrapText(e.content, w);
-        const contentLines = wrapped.split('\n');
-        for (let ci = skip - 1; ci < contentLines.length; ci++) {
-          lines.push({ type: 'asst_line', text: contentLines[ci], data: e });
-        }
+      const contentLines = wrapText(e.content, cw).split('\n');
+      const startIdx = skip > 0 ? skip - 1 : 0;
+      for (let ci = startIdx; ci < contentLines.length; ci++) {
+        lines.push({ type: 'asst_line', text: contentLines[ci], data: e });
       }
-      if (e.duration) lines.push({ type: 'asst_foot', text: String(e.duration), data: e });
-    } else if (nr === 'tool') {
-      const label = (e.error ? '\u2716 ' : '\u25C9 ') + (e.toolName || 'tool');
-      if (e.completed) {
-        if (skip <= 0) lines.push({ type: 'tool_line', text: label + '  ' + (e.duration ? e.duration + 'ms' : ''), data: e });
-      } else {
-        lines.push({ type: 'tool_line', text: label, data: e });
+      if (e.duration && skip <= 0) {
+        lines.push({ type: 'asst_foot', text: String(e.duration), data: e });
       }
+    } else if (nr === 'tool') {
+      lines.push({ type: 'tool_line', text: truncate((e.error ? '\u2716 ' : '\u25C9 ') + (e.toolName || 'tool') + (e.duration ? ' ' + e.duration + 'ms' : ''), cw), data: e });
     } else if (nr === 'system') {
-      if (skip <= 0) lines.push({ type: 'sys_line', text: e.content, data: e });
+      if (skip <= 0) lines.push({ type: 'sys_line', text: truncate(e.content, cw), data: e });
     } else if (nr === 'error') {
-      if (skip <= 0) lines.push({ type: 'err_line', text: e.content, data: e });
+      if (skip <= 0) lines.push({ type: 'err_line', text: truncate(e.content, cw), data: e });
     } else if (nr === 'streaming') {
       lines.push({ type: 'stream_head', data: e });
-      if (e.status) lines.push({ type: 'stream_status', text: e.status, data: e });
-      const wrapped = wrapText(e.content || '', w);
-      const contentLines = wrapped.split('\n');
-      const maxLines = 40;
-      const startLine = Math.min(skip, contentLines.length);
-      const endLine = Math.min(contentLines.length, startLine + (maxLines - lines.length));
-      for (let ci = startLine; ci < endLine; ci++) {
+      if (e.status && skip <= 0) lines.push({ type: 'stream_status', text: e.status, data: e });
+      const contentLines = wrapText(e.content || '', cw).split('\n');
+      const startIdx = Math.min(skip, contentLines.length);
+      for (let ci = startIdx; ci < Math.min(contentLines.length, startIdx + 30); ci++) {
         lines.push({ type: 'stream_line', text: contentLines[ci], data: e });
       }
     }

package/src/config/theme.js

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+import gradient from 'gradient-string';
 
 export const hex = {
   bg: '#0A0A14',
@@ -8,7 +9,6 @@ export const hex = {
   codeBg: '#0D0D18',
   selectionBg: '#FF6B35',
   selectionText: '#FFFFFF',
-  borderLight: '#202050',
   accent: '#FF6B35',
   purple: '#A855F7',
   green: '#22C55E',
@@ -19,11 +19,6 @@ export const hex = {
   text: '#EAEAEE',
   textDim: '#8888AA',
   textMuted: '#555577',
-  white: '#FFFFFF',
-  black: '#000000',
-  modalOverlay: 'rgba(0,0,0,0.85)',
-  logoOrange: '#FF6B35',
-  logoBlue: '#3B82F6',
 };
 
 export const color = {
@@ -43,65 +38,6 @@ export const color = {
   text: chalk.hex(hex.text),
   textDim: chalk.hex(hex.textDim),
   textMuted: chalk.hex(hex.textMuted),
-  white: chalk.hex(hex.white),
-  black: chalk.hex(hex.black),
 };
 
-export const sym = {
-  diamond: '\u25C6',
-  circle: '\u25C9',
-  dot: '\u25CF',
-  smallDot: '\u25CB',
-  triR: '\u25B8',
-  triD: '\u25BE',
-  bullet: '\u25C9',
-  cross: '\u2716',
-  ellipsis: '\u2026',
-  mdash: '\u2014',
-  ndash: '\u2013',
-  midDot: '\u00B7',
-  arrowR: '\u2192',
-  arrowL: '\u2190',
-  arrowU: '\u2191',
-  arrowD: '\u2193',
-  lightV: '\u2502',
-  lightH: '\u2500',
-  box: {
-    tl: '\u250C', tr: '\u2510', bl: '\u2514', br: '\u2518',
-    h: '\u2500', v: '\u2502',
-    tm: '\u252C', bm: '\u2534', lm: '\u251C', rm: '\u2524',
-    cross: '\u253C',
-  },
-  powerline: {
-    padlock: '\uE0B0',
-    rpadlock: '\uE0B2',
-  },
-  treeJ: '\u2514',
-  treeT: '\u251C',
-  treeCon: '\u2502',
-  triR2: '\u25B8',
-  triD2: '\u25BE',
-  u: { h: '\u2500' },
-  treeTip: '\u2570',
-  treeFork: '\u256D',
-  star: '\u2726',
-  asterisk: '\u2731',
-  gear: '\u2699',
-  thought: '\u25CB',
-};
-
-export const LOGO = [
-  '                                                                              ',
-  '  ██████  ██       █████  ██████  ██ ████████ ██    ██                       ',
-  '  ██   ██ ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
-  '  ██████  ██      ███████ ██████  ██    ██    ██    ██                       ',
-  '  ██      ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
-  '  ██      ███████ ██   ██ ██   ██ ██    ██     ██████                        ',
-  '                                                                              ',
-  '                    █████  ██                                                 ',
-  '                    ██   ██ ██                                                ',
-  '                    ██████  ██                                                ',
-  '                    ██   ██ ██                                                ',
-  '                    ██   ██ ███████                                           ',
-  '                                                                              ',
-];
+export const appGradient = gradient(['#FF6B35', '#3B82F6']);