clarity-ai 6.7.0 → 6.8.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ---
 
+## 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

package/bin/clarity.js

@@ -4,11 +4,14 @@ import { render } from 'ink';
 import { App } from '../src/components/AppRoot.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
-import ansiEscapes from 'ansi-escapes';
 
 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';
 
@@ -25,39 +28,44 @@ async function main() {
     process.stdin.resume();
   }
 
-  process.stdout.write(ansiEscapes.clearScreen);
-  process.stdout.write(ansiEscapes.cursorHide);
+  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, waitUntilExit } = render(React.createElement(App, { config }), {
+  const { clear, waitUntilExit, rerender } = render(React.createElement(App, { config }), {
     fullscreen: true,
     patchConsole: false,
     exitOnCtrlC: false,
   });
 
-  const keepAlive = setInterval(() => {}, 2 ** 31 - 1);
+  keepAlive = setInterval(() => {}, 2 ** 31 - 1);
 
   function cleanup() {
     clearInterval(keepAlive);
-    process.stdout.write(ansiEscapes.cursorShow);
-    process.stdout.write('\x1b[0m');
+    console.log = originalLog;
+    console.error = originalError;
+    console.warn = originalWarn;
     try { clear(); } catch {}
+    process.stdout.write('\x1b[?25h\x1b[0m');
     process.exit(0);
   }
 
   process.on('SIGINT', () => cleanup());
   process.on('SIGTERM', () => cleanup());
-  process.on('exit', () => {
-    process.stdout.write(ansiEscapes.cursorShow);
-  });
+  process.on('exit', () => { process.stdout.write('\x1b[?25h\x1b[0m'); });
 
   await new Promise(() => {});
 }
 
 main().catch(err => {
-  process.stdout.write(ansiEscapes.cursorShow);
-  process.stdout.write('\x1b[0m');
+  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.7.0",
+  "version": "6.8.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {
@@ -27,6 +27,8 @@
     "gradient-string": "^3",
     "figures": "^6",
     "ansi-escapes": "^7",
-    "string-width": "^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;
 
@@ -57,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);
   }
@@ -72,11 +73,20 @@ export function App({ config }) {
     }));
   }
 
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, height: '100%' },
+  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();
@@ -29,43 +29,41 @@ export function CommandPicker({ query, onSelect, onClose }) {
     if (key.upArrow) setIdx(i => Math.max(0, i - 1));
     if (key.downArrow) setIdx(i => Math.min(filtered.length - 1, i + 1));
     if (key.return && filtered[idx]) onSelect(filtered[idx].name);
-    if (key.escape || key.ctrl && key.c) onClose();
+    if (key.escape) onClose();
     if (key.backspace) setSearch(s => s.slice(0, -1));
     else if (input && !key.ctrl && !key.meta) setSearch(s => s + input);
   });
 
   const w = Math.min(cols - 4, 48);
 
-  const 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)
-    )
-  );
-
   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 + ' Commands'),
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' '.repeat(Math.max(0, w - 14)) + sym.box.v)
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '\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 || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + sym.box.v)
+        '\u2502 ' + (search || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + '\u2502')
+    ),
+    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, { flexDirection: 'column', backgroundColor: hex.bg }, ...items),
     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 },

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,34 +1,30 @@
 import React from 'react';
 import { Box } from 'ink';
 import { hex } from '../config/theme.js';
-import { getLayout } from '../config/layout.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 }) {
-  const { headerHeight, dockHeight, cols } = getLayout();
-
   const picker = showCommands || showModels
-    ? h(Box, { position: 'absolute', top: headerHeight + 1, left: 2, width: Math.min(cols - 4, 52), backgroundColor: hex.bg, flexDirection: 'column' },
-        showCommands ? h(CommandPicker, { query: '', onSelect: onCommandSelect, onClose: onCloseCommands }) : null,
+    ? 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, height: '100%' },
-    h(StatusBar, { model, provider, agentMode: state.agentMode, thinking: state.thinking }),
+  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
     ),
-    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 \u25C9 YOU')
+        h(Text, { color: hex.accent, bold: true, backgroundColor: hex.userBg }, '  \u276F YOU')
       );
     case 'user_line':
       return h(Box, { height: 1, backgroundColor: hex.userBg },
@@ -24,19 +24,20 @@ function Line({ type, text, data }) {
       );
     case 'asst_foot':
       return h(Box, { height: 1, backgroundColor: hex.surface },
-        h(Text, { color: hex.textDim, backgroundColor: hex.surface }, '  \u25B8 ' + (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 },
@@ -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,12 +66,9 @@ export function MessageList({ messages, thinking, streamContent, agentStatus, to
     }));
   }, [messages]);
 
-  const showLogo = entries.length <= 1 && !thinking && !streamContent;
-  const effectiveViewport = showLogo ? Math.max(viewport - 14, 4) : viewport;
-
   const { slice, clipIndex, clipLines } = useMemo(
-    () => sliceToViewport(entries, effectiveViewport, contentWidth),
-    [entries, effectiveViewport, contentWidth]
+    () => sliceToViewport(entries, viewport, contentWidth),
+    [entries, viewport, contentWidth]
   );
 
   const rawLines = useMemo(
@@ -78,27 +76,14 @@ export function MessageList({ messages, thinking, streamContent, agentStatus, to
     [slice, clipIndex, clipLines, contentWidth]
   );
 
+  const fillCount = Math.max(0, viewport - rawLines.length);
   const padded = [];
-  const logoRows = showLogo ? 14 : 0;
-  const fillRows = Math.max(0, effectiveViewport - rawLines.length - logoRows);
-  for (let i = 0; i < fillRows; i++) padded.push({ type: 'empty' });
-  if (showLogo) {
-    for (let i = 0; i < 14; i++) padded.push({ type: 'logo', line: i });
-  }
+  for (let i = 0; i < fillCount; i++) padded.push({ type: 'empty' });
   for (const ln of rawLines) padded.push(ln);
 
   return h(Box, { height: viewport, flexDirection: 'column', overflow: 'hidden' },
     padded.map((ln, i) => {
       if (ln.type === 'empty') return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg });
-      if (ln.type === 'logo') {
-        const logoLine = LOGO[ln.line] || '';
-        return h(Box, { key: 'l' + i, height: 1, backgroundColor: hex.bg },
-          h(Text, {
-            color: (ln.line >= 1 && ln.line <= 5) || ln.line === 9 ? hex.accent : hex.textMuted,
-            backgroundColor: hex.bg,
-          }, ' ' + logoLine)
-        );
-      }
       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;
 
@@ -32,52 +32,48 @@ export function ModelPicker({ onSelect, onClose }) {
     if (key.upArrow) setIdx(i => Math.max(0, i - 1));
     if (key.downArrow) setIdx(i => Math.min(flat.length - 1, i + 1));
     if (key.return) { const m = flat[idx]; if (m && !m._header) onSelect(m.id); return; }
-    if (key.escape || key.ctrl && key.c) onClose();
+    if (key.escape) onClose();
     if (key.backspace) setSearch(s => s.slice(0, -1));
     else if (input && !key.ctrl && !key.meta) setSearch(s => s + input);
   });
 
   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 - 6)) + 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 + ']' : ''))
-    );
-  });
-
-  const count = flat.filter(m => !m._header).length;
-
   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 + ' Models  ' + count + ' available'),
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' '.repeat(Math.max(0, w - 19)) + sym.box.v)
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '\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 || '\u2026') + ' '.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),
+    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 },

package/src/components/ThinkingBlock.js

@@ -1,12 +1,10 @@
 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')
@@ -15,20 +13,15 @@ export function ThinkingBlock({ toolResults, duration }) {
   return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
     h(Box, { height: 1 },
       h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt },
-        '    ' + (collapsed ? sym.triR : sym.triD) + ' Thought' + (durStr ? ' (' + durStr + ')' : ''))
+        '    ' + (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 + '\u2500' : sym.treeFork + '\u2500';
-        const conn = isLast ? ' ' : sym.treeCon;
-        const ico = tr.status === 'failed' ? sym.cross : sym.circle;
-        const td = tr.duration ? ' ' + tr.duration + 'ms' : '';
-        return h(Box, { key: tr.execId || i, height: 1 },
+      items.map((tr, i) =>
+        h(Box, { key: tr.execId || i, height: 1 },
           h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-            '      ' + prefix + ' ' + ico + ' ' + tr.name + td)
-        );
-      })
+            '      ' + (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,26 +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')
+          h(Text, { color: hex.blue, backgroundColor: hex.surfaceAlt }, '      \u25CF running')
         )
       : null,
   );

package/src/config/layout.js

@@ -1,49 +1,52 @@
 import wrapAnsi from 'wrap-ansi';
 import stringWidth from 'string-width';
+import cliTruncate from 'cli-truncate';
 
 export function getLayout() {
   const rows = process.stdout.rows || 30;
   const cols = process.stdout.columns || 80;
-  const headerHeight = 1;
-  const dockHeight = 4;
-  const viewport = Math.max(8, rows - headerHeight - dockHeight);
-  const contentWidth = Math.max(20, cols - 4);
-  return { rows, cols, headerHeight, dockHeight, viewport, contentWidth, pad: '  ' };
+  return {
+    rows,
+    cols,
+    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);
-  if (nr === 'assistant') return 2 + countLines(entry.content, w) + (entry.duration ? 1 : 0);
+  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,54 +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 && skip <= 0) {
+        lines.push({ type: 'asst_foot', text: String(e.duration), data: e });
       }
-      if (e.duration) lines.push({ type: 'asst_foot', text: String(e.duration), data: e });
     } else if (nr === 'tool') {
-      lines.push({ type: 'tool_line', text: (e.error ? '\u2716 ' : '\u25C9 ') + (e.toolName || 'tool') + (e.duration ? ' ' + e.duration + 'ms' : ''), data: e });
+      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 startLine = Math.min(skip, contentLines.length);
-      const endLine = Math.min(contentLines.length, startLine + 40);
-      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,6 +1,5 @@
 import chalk from 'chalk';
 import gradient from 'gradient-string';
-import figures from 'figures';
 
 export const hex = {
   bg: '#0A0A14',
@@ -10,7 +9,6 @@ export const hex = {
   codeBg: '#0D0D18',
   selectionBg: '#FF6B35',
   selectionText: '#FFFFFF',
-  borderLight: '#202050',
   accent: '#FF6B35',
   purple: '#A855F7',
   green: '#22C55E',
@@ -21,8 +19,6 @@ export const hex = {
   text: '#EAEAEE',
   textDim: '#8888AA',
   textMuted: '#555577',
-  white: '#FFFFFF',
-  black: '#000000',
 };
 
 export const color = {
@@ -42,52 +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 = {
-  circle: '\u25C9',
-  dot: '\u25CF',
-  triR: '\u25B8',
-  triD: '\u25BE',
-  bullet: '\u25C9',
-  cross: '\u2716',
-  ellipsis: '\u2026',
-  mdash: '\u2014',
-  midDot: '\u00B7',
-  arrowR: '\u2192',
-  arrowU: '\u2191',
-  arrowD: '\u2193',
-  box: {
-    tl: '\u250C', tr: '\u2510', bl: '\u2514', br: '\u2518',
-    h: '\u2500', v: '\u2502',
-  },
-  treeJ: '\u2514',
-  treeT: '\u251C',
-  treeCon: '\u2502',
-  treeTip: '\u2570',
-  treeFork: '\u256D',
-  star: '\u2726',
-  gear: '\u2699',
-  pointer: '\u276F',
-};
-
-export const gradientText = gradient(['#FF6B35', '#3B82F6']);
-export const gradientLine = gradient(['#FF6B35', '#3B82F6']);
-
-export const LOGO = [
-  '                                                                              ',
-  '  ██████  ██       █████  ██████  ██ ████████ ██    ██                       ',
-  '  ██   ██ ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
-  '  ██████  ██      ███████ ██████  ██    ██    ██    ██                       ',
-  '  ██      ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
-  '  ██      ███████ ██   ██ ██   ██ ██    ██    ██     ██████▄                  ',
-  '                                                                              ',
-  '                    █████  ██                                                 ',
-  '                    ██   ██ ██                                                ',
-  '                    ██████  ██                                                ',
-  '                    ██   ██ ██                                                ',
-  '                    ██   ██ ███████                                           ',
-  '                                                                              ',
-];
+export const appGradient = gradient(['#FF6B35', '#3B82F6']);