clarity-ai 6.6.0 → 6.7.0

package/CHANGELOG.md

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

@@ -4,6 +4,7 @@ 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');
@@ -24,29 +25,39 @@ async function main() {
     process.stdin.resume();
   }
 
+  process.stdout.write(ansiEscapes.clearScreen);
+  process.stdout.write(ansiEscapes.cursorHide);
+
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
 
-  const { clear } = render(React.createElement(App, { config }), {
+  const { clear, waitUntilExit } = render(React.createElement(App, { config }), {
     fullscreen: true,
     patchConsole: false,
+    exitOnCtrlC: false,
   });
 
-  setInterval(() => {}, 2 ** 31 - 1);
+  const keepAlive = setInterval(() => {}, 2 ** 31 - 1);
 
   function cleanup() {
+    clearInterval(keepAlive);
+    process.stdout.write(ansiEscapes.cursorShow);
+    process.stdout.write('\x1b[0m');
     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);
+  });
 
   await new Promise(() => {});
 }
 
 main().catch(err => {
-  process.stdout.write('\x1b[?25h\x1b[0m');
+  process.stdout.write(ansiEscapes.cursorShow);
+  process.stdout.write('\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.7.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {
@@ -23,6 +23,10 @@
     "react": "^18",
     "ink-spinner": "^5",
     "chalk": "^5",
-    "wrap-ansi": "^9"
+    "wrap-ansi": "^9",
+    "gradient-string": "^3",
+    "figures": "^6",
+    "ansi-escapes": "^7",
+    "string-width": "^7"
   }
 }

package/src/components/AppRoot.js

@@ -34,11 +34,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; }
@@ -74,7 +72,7 @@ export function App({ config }) {
     }));
   }
 
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, height: '100%' },
     h(Layout, {
       state, streamContent, model, provider,
       showCommands, showModels,

package/src/components/CommandPicker.js

@@ -29,58 +29,47 @@ 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) onClose();
+    if (key.escape || key.ctrl && key.c) 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) => {
-    const isSel = i === idx;
-    return h(Box, {
+  const items = filtered.map((cmd, i) =>
+    h(Box, {
       key: cmd.name, height: 1,
-      backgroundColor: isSel ? hex.selectionBg : hex.bg,
+      backgroundColor: i === idx ? 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);
+        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', 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)
     ),
     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)
+      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(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,
+        sym.box.v + ' ' + (search || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + sym.box.v)
     ),
+    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)
     ),
     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/Layout.js

@@ -1,6 +1,7 @@
 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 { MessageList } from './MessageList.js';
 import { Composer } from './Composer.js';
@@ -9,21 +10,25 @@ 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 },
+  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,
+        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 }),
-    h(Box, { flexGrow: 1, flexDirection: 'column' },
+    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 })
   );
 }

package/src/components/MessageList.js

@@ -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 \u25C9 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,7 +24,7 @@ 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 },
@@ -40,11 +40,11 @@ function Line({ type, text, data }) {
       );
     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 },
@@ -66,46 +66,40 @@ 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, Math.max(viewport - (showLogo ? 14 : 0), viewport), contentWidth),
-    [entries, viewport, contentWidth, showLogo]
+    () => sliceToViewport(entries, effectiveViewport, contentWidth),
+    [entries, effectiveViewport, contentWidth]
   );
 
-  const lines = useMemo(
+  const rawLines = useMemo(
     () => buildLineArray(slice, clipIndex, clipLines, contentWidth),
     [slice, clipIndex, clipLines, contentWidth]
   );
 
-  const padded = [...lines];
+  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) {
-    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' });
-    }
+    for (let i = 0; i < 14; i++) padded.push({ type: 'logo', line: i });
   }
+  for (const ln of rawLines) padded.push(ln);
 
-  const logoVisible = showLogo;
-  const totalHeight = viewport;
-
-  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 });
+      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 || 'l') + '-' + i, height: 1 },
+      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

@@ -32,7 +32,7 @@ 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) onClose();
+    if (key.escape || key.ctrl && key.c) onClose();
     if (key.backspace) setSearch(s => s.slice(0, -1));
     else if (input && !key.ctrl && !key.meta) setSearch(s => s + input);
   });
@@ -43,7 +43,7 @@ export function ModelPicker({ onSelect, onClose }) {
     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)
+        h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' '.repeat(Math.max(0, w - m._provider.length - 6)) + sym.box.v)
       );
     }
     const isSel = i === idx;
@@ -55,37 +55,33 @@ export function ModelPicker({ onSelect, onClose }) {
         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' : '  '))
+      }, (isSel ? '\u276F ' : '  ') + m.label + (m.badge ? ' [' + m.badge + ']' : ''))
     );
   });
 
   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)
     ),
     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)
+      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(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,
+        sym.box.v + ' ' + (search || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + sym.box.v)
     ),
+    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)
     ),
     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

@@ -12,32 +12,21 @@ export function ThinkingBlock({ toolResults, 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 ? sym.triR : sym.triD) + ' 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 prefix = isLast ? sym.treeTip + '\u2500' : sym.treeFork + '\u2500';
         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
+        return h(Box, { key: tr.execId || i, height: 1 },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+            '      ' + prefix + ' ' + ico + ' ' + tr.name + td)
         );
       })
     )

package/src/components/ToolCard.js

@@ -36,10 +36,5 @@ export function ToolCard({ exec, isActive }) {
           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))
-        )
-      : null,
   );
 }

package/src/config/layout.js

@@ -1,18 +1,18 @@
 import wrapAnsi from 'wrap-ansi';
+import stringWidth from 'string-width';
 
 export function getLayout() {
   const rows = process.stdout.rows || 30;
   const cols = process.stdout.columns || 80;
-  return {
-    rows,
-    cols,
-    topBar: 1,
-    dock: 4,
-    viewport: Math.max(8, rows - 5),
-    contentWidth: Math.max(20, cols - 4),
-    padLeft: '  ',
-    padRight: '  ',
-  };
+  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: '  ' };
+}
+
+export function sw(text) {
+  return stringWidth(text || '');
 }
 
 export function wrapText(text, width) {
@@ -34,9 +34,9 @@ export function truncateText(text, maxLines, width) {
 
 export function measureEntry(entry, w) {
   const nr = entry.role;
-  if (nr === 'user') return 1 + countLines(entry.content, w) + 0;
+  if (nr === 'user') return 1 + countLines(entry.content, w);
   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));
+  if (nr === 'tool') return 1;
   if (nr === 'system' || nr === 'error') return 1;
   if (nr === 'streaming') return 2 + Math.min(40, countLines(entry.content, w));
   return 1;
@@ -94,12 +94,7 @@ export function buildLineArray(slice, clipIndex, clipLines, w) {
       }
       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 });
-      }
+      lines.push({ type: 'tool_line', text: (e.error ? '\u2716 ' : '\u25C9 ') + (e.toolName || 'tool') + (e.duration ? ' ' + e.duration + 'ms' : ''), data: e });
     } else if (nr === 'system') {
       if (skip <= 0) lines.push({ type: 'sys_line', text: e.content, data: e });
     } else if (nr === 'error') {
@@ -109,9 +104,8 @@ export function buildLineArray(slice, clipIndex, clipLines, w) {
       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));
+      const endLine = Math.min(contentLines.length, startLine + 40);
       for (let ci = startLine; ci < endLine; ci++) {
         lines.push({ type: 'stream_line', text: contentLines[ci], data: e });
       }

package/src/config/theme.js

@@ -1,4 +1,6 @@
 import chalk from 'chalk';
+import gradient from 'gradient-string';
+import figures from 'figures';
 
 export const hex = {
   bg: '#0A0A14',
@@ -21,9 +23,6 @@ export const hex = {
   textMuted: '#555577',
   white: '#FFFFFF',
   black: '#000000',
-  modalOverlay: 'rgba(0,0,0,0.85)',
-  logoOrange: '#FF6B35',
-  logoBlue: '#3B82F6',
 };
 
 export const color = {
@@ -48,55 +47,42 @@ export const color = {
 };
 
 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',
+  pointer: '\u276F',
 };
 
+export const gradientText = gradient(['#FF6B35', '#3B82F6']);
+export const gradientLine = gradient(['#FF6B35', '#3B82F6']);
+
 export const LOGO = [
   '                                                                              ',
   '  ██████  ██       █████  ██████  ██ ████████ ██    ██                       ',
   '  ██   ██ ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
   '  ██████  ██      ███████ ██████  ██    ██    ██    ██                       ',
   '  ██      ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
-  '  ██      ███████ ██   ██ ██   ██ ██    ██     ██████                        ',
+  '  ██      ███████ ██   ██ ██   ██ ██    ██    ██     ██████▄                  ',
   '                                                                              ',
   '                    █████  ██                                                 ',
   '                    ██   ██ ██                                                ',