clarity-ai 6.5.6 → 6.7.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ---
 
+## 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
+- **Models**: Flash → DeepSeek-R1-Distill-Qwen-1.5B (reasoning), Heavy → DeepSeek-R1-Distill-Qwen-7B (reasoning)
+- **Permanent center CLARITY ASCII logo** — stays as background until first message
+- **Box-drawing overlays** (`┌─┐│└─┘`) on CommandPicker and ModelPicker
+- **Non-bouncing 3-tier viewport** — topBar(1) + viewport(fill) + dock(4)
+- **Cleaner message rendering** — `│` prefix for assistant text, no wasted rows
+- **Tool log compression** — completed tools collapse to single-line chips
+- **Orange selection bar** (`#FF6B35`) on all pickers
+- **DeepSeek R1 reasoning** — model outputs `<think>` blocks naturally
+
 ## 6.5.6 (2026-06-06)
 
 ### Fix first-request timeout — model download needs >8s

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.5.6",
+  "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,14 +72,10 @@ 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,
+      state, streamContent, model, provider,
+      showCommands, showModels,
       onCommandSelect: handleCommandSelect,
       onModelSelect: handleModelSelect,
       onCloseCommands: () => setShowCommands(false),

package/src/components/CodeBlock.js

@@ -21,26 +21,28 @@ export function CodeBlock({ code, language }) {
   const { cols } = getLayout();
   const maxLines = 20;
   const visible = lines.slice(0, maxLines);
+  const codeWidth = cols - 10;
 
   return h(Box, { flexDirection: 'column', backgroundColor: hex.codeBg },
-    h(Box, { flexDirection: 'row', 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(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(Box, { flexDirection: 'column', backgroundColor: hex.codeBg },
       visible.map((line, i) =>
-        h(Box, { key: i, flexDirection: 'row', backgroundColor: hex.codeBg },
+        h(Box, { key: i, height: 1, backgroundColor: hex.codeBg },
           h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg },
-            ' ' + String(i + 1).padStart(lnW) + ' '
+            '   ' + String(i + 1).padStart(lnW) + ' '
           ),
           h(Text, { color: '#C9D1D9', backgroundColor: hex.codeBg, wrap: 'truncate-end' },
-            (line || ' ').slice(0, cols - 8)
+            (line || ' ').slice(0, codeWidth)
           )
         )
       ),
       lines.length > maxLines
-        ? h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg },
-            '  ' + sym.ellipsis + ' ' + (lines.length - maxLines) + ' more lines')
+        ? h(Box, { height: 1, backgroundColor: hex.codeBg },
+            h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, '    ' + sym.ellipsis + ' ' + (lines.length - maxLines) + ' more lines')
+          )
         : null
     )
   );

package/src/components/CommandPicker.js

@@ -5,7 +5,7 @@ import { getLayout } from '../config/layout.js';
 const { createElement: h } = React;
 
 const COMMANDS = [
-  { name: '/keys',     desc: 'Set API key for a provider' },
+  { name: '/keys',     desc: 'Set API key' },
   { name: '/model',    desc: 'Switch model' },
   { name: '/provider', desc: 'Switch provider' },
   { name: '/agent',    desc: 'Toggle agent mode' },
@@ -29,35 +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);
 
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt, width: w },
+  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.star + ' ' + (search || 'filter commands...'))
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        sym.box.tl + sym.box.h.repeat(w - 2) + sym.box.tr)
     ),
-    filtered.map((cmd, i) =>
-      h(Box, {
-        key: cmd.name, height: 1,
-        backgroundColor: i === idx ? hex.selectionBg : 'transparent',
-      },
-        h(Text, {
-          color: i === idx ? hex.selectionText : hex.text,
-          bold: i === idx,
-          backgroundColor: i === idx ? hex.selectionBg : 'transparent',
-        }, '  ' + cmd.name + '  '),
-        h(Text, {
-          color: i === idx ? hex.selectionText : hex.textDim,
-          backgroundColor: i === idx ? hex.selectionBg : 'transparent',
-        }, cmd.desc)
-      )
+    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(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, '  ' + sym.arrowU + sym.arrowD + ' nav  ' + sym.arrowR + ' select  Esc close')
-    )
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        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 },
+        '  \u2191\u2193 nav  \u2192 select  Esc close')
+    ),
   );
 }

package/src/components/Composer.js

@@ -45,11 +45,11 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
     }
   });
 
-  const rows = [
-    h(Box, { key: 'sep', height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, '  ' + sym.lightH.repeat(Math.max(0, cols - 4)))
-    ),
-  ];
+  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',
-        }, '  ' + sym.triR + ' ' + (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 },
-        '  ' + 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,29 +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, minHeight: '100%' },
+  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,
+        messages: state.messages, thinking: state.thinking,
+        streamContent, agentStatus: state.agentStatus,
         toolExecutions: state.toolExecutions,
-      })
+      }),
+      picker
     ),
-    showCommands || showModels
-      ? h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-          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(Composer, { provider, model, agentMode: state.agentMode, thinking: state.thinking, onSlash, onSubmit })
   );
 }

package/src/components/LoadingIndicator.js

@@ -4,8 +4,8 @@ import { hex, sym } from '../config/theme.js';
 const { createElement: h } = React;
 
 export function LoadingIndicator({ label }) {
-  return h(Box, { flexDirection: 'row', backgroundColor: hex.surface },
-    h(Text, { color: hex.blue, backgroundColor: hex.surface }, '  ' + sym.dot),
+  return h(Box, { height: 1, backgroundColor: hex.surface },
+    h(Text, { color: hex.blue, backgroundColor: hex.surface }, '    ' + sym.dot),
     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 } from '../config/theme.js';
+import { hex, sym, LOGO } from '../config/theme.js';
 import { getLayout, sliceToViewport, buildLineArray } from '../config/layout.js';
 const { createElement: h } = React;
 
@@ -8,47 +8,47 @@ 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 }, '  ' + 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 },
-        h(Text, { color: hex.text, backgroundColor: hex.userBg, wrap: 'wrap' }, '  ' + (text || ' '))
+        h(Text, { color: hex.text, backgroundColor: hex.userBg, wrap: 'wrap' }, '    ' + (text || ' '))
       );
     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 },
-        h(Text, { color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + (text || ' '))
+        h(Text, { color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  \u2502 ' + (text || ' '))
       );
     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 }, '    ' + sym.bullet + ' ' + (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 }, '    ' + sym.bullet + ' ' + (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 }, '    ' + sym.cross + ' ' + (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 },
-        h(Text, { color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + (text || ' '))
+        h(Text, { color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  \u2502 ' + (text || ' '))
       );
     default:
       return null;
@@ -59,43 +59,49 @@ export function MessageList({ messages, thinking, streamContent, agentStatus, to
   const { viewport, contentWidth } = getLayout();
 
   const entries = useMemo(() => {
-    const e = messages.map(m => ({
+    return messages.map(m => ({
       id: m.id, role: m.role, content: m.content,
       duration: m.duration, toolName: m.toolName, error: m.error, completed: true,
     }));
-    if (thinking || streamContent) {
-      e.push({
-        id: 'stream', role: 'streaming',
-        content: streamContent || '',
-        status: agentStatus || (thinking ? 'processing...' : ''),
-        completed: false,
-      });
-    }
-    return e;
-  }, [messages, thinking, streamContent, agentStatus]);
+  }, [messages]);
+
+  const showLogo = entries.length <= 1 && !thinking && !streamContent;
+  const effectiveViewport = showLogo ? Math.max(viewport - 14, 4) : viewport;
 
   const { slice, clipIndex, clipLines } = useMemo(
-    () => sliceToViewport(entries, viewport, contentWidth),
-    [entries, viewport, contentWidth]
+    () => 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];
-  for (let i = padded.length; i < viewport; i++) {
-    padded.unshift({ type: 'empty' });
+  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 (const ln of rawLines) padded.push(ln);
 
   return h(Box, { height: viewport, flexDirection: 'column', overflow: 'hidden' },
-    padded.map((ln, i) =>
-      ln.type === 'empty'
-        ? h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg })
-        : h(Box, { key: (ln.data?.id || 'l') + '-' + i, height: 1 },
-            h(Line, { type: ln.type, text: ln.text, data: ln.data })
-          )
-    )
+    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

@@ -32,37 +32,56 @@ 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);
   });
 
   const w = Math.min(cols - 4, 52);
 
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt, width: w },
+  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.star + ' ' + (search || 'search models...'))
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        sym.box.tl + sym.box.h.repeat(w - 2) + sym.box.tr)
     ),
-    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.triD + ' ' + m._provider.toUpperCase())
-        );
-      }
-      const isSel = i === idx;
-      return h(Box, {
-        key: m.id, height: 1,
-        backgroundColor: isSel ? hex.selectionBg : 'transparent',
-      },
-        h(Text, {
-          color: isSel ? hex.selectionText : hex.text,
-          bold: isSel,
-          backgroundColor: isSel ? hex.selectionBg : 'transparent',
-        }, '  ' + m.label + (m.badge ? ' [' + m.badge + ']' : ''))
-      );
-    }),
     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')
-    )
+      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 || '\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 },
+        '  \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 ? 'AGENT' : '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,40 +12,23 @@ export function ThinkingBlock({ toolResults, duration }) {
     ? (duration < 1000 ? duration + 'ms' : (duration / 1000).toFixed(1) + 's')
     : '';
 
-  const headerText = sym.triR + ' ' + (collapsed ? sym.triR : sym.triD) + ' Thought' + (durStr ? ' (' + durStr + ')' : '');
-
-  const rows = 1;
-  const totalRows = collapsed ? 1 : 1 + items.length;
-
   return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
     h(Box, { height: 1 },
-      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '  ' + 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 conn = isLast ? ' ' : sym.treeCon;
-            const icon = 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 + ' ' + icon + ' ' + tr.name + td;
-            const contentLine = tr.content && tr.content.length < 200
-              ? '  ' + conn + ' ' + String(tr.content).slice(0, cols - 10)
-              : 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
-            );
-          })
-        )
+    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 },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+            '      ' + prefix + ' ' + ico + ' ' + tr.name + td)
+        );
+      })
+    )
   );
 }

package/src/components/ToolCard.js

@@ -16,21 +16,25 @@ export function ToolCard({ exec, isActive }) {
     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 }, '    ' + icon + ' ' + name + (dur ? '  ' + dur : ''))
     );
   }
 
-  const w = Math.min(cols - 6, 56);
-  const lines = [sym.bullet + ' ' + name + (dur ? '  ' + dur : '')];
-  if (args.length < 80) lines.push('  ' + sym.triR + ' ' + args.slice(0, w));
-  if (status === 'running') lines.push('  ' + sym.dot + ' running');
-  if (status === 'failed' && exec.error) lines.push('  ' + sym.cross + ' ' + String(exec.error).slice(0, w - 4));
+  const w = Math.min(cols - 8, 56);
 
   return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-    lines.slice(0, 4).map((line, i) =>
-      h(Box, { key: i, height: 1 },
-        h(Text, { color: i === 0 ? hex.purple : hex.textDim, backgroundColor: hex.surfaceAlt }, '  ' + line)
-      )
-    )
+    h(Box, { height: 1 },
+      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    ' + sym.bullet + ' ' + name + (dur ? '  ' + dur : ''))
+    ),
+    args.length < 80
+      ? h(Box, { height: 1 },
+          h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, '      ' + sym.triR + ' ' + args.slice(0, w))
+        )
+      : null,
+    status === 'running'
+      ? h(Box, { height: 1 },
+          h(Text, { color: hex.blue, backgroundColor: hex.surfaceAlt }, '      ' + sym.dot + ' running')
+        )
+      : null,
   );
 }

package/src/config/layout.js

@@ -1,17 +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: ' '.repeat(2),
-  };
+  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) {
@@ -33,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;
@@ -78,7 +79,6 @@ export function buildLineArray(slice, clipIndex, clipLines, w) {
       }
     } else if (nr === 'assistant') {
       lines.push({ type: 'asst_head', data: e });
-      lines.push({ type: 'asst_bar', data: e });
       if (skip <= 0) {
         const wrapped = wrapText(e.content, w);
         const contentLines = wrapped.split('\n');
@@ -94,32 +94,18 @@ 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_head', text: label, data: e });
-        if (e.content) {
-          const wrapped = wrapText(String(e.content).slice(0, w * 3), w);
-          const cls = wrapped.split('\n');
-          for (let ci = Math.max(0, skip - 1); ci < Math.min(cls.length, 4); ci++) {
-            lines.push({ type: 'tool_line', text: cls[ci], 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') {
       if (skip <= 0) lines.push({ type: 'err_line', text: e.content, data: e });
     } else if (nr === 'streaming') {
       lines.push({ type: 'stream_head', data: e });
-      lines.push({ type: 'stream_bar', 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));
+      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/models.js

@@ -1,6 +1,6 @@
 export const ALL_MODELS = [
-  { id: 'huggingface/Universal-618/Clarity-flash-weights', provider: 'huggingface', label: 'Clarity Flash (Qwen 2.5 1.5B)', badge: 'Free' },
-  { id: 'huggingface/Universal-618/Clarity-heavy-weights', provider: 'huggingface', label: 'Clarity Heavy (Qwen 2.5 1.5B)', badge: 'Free' },
+  { id: 'huggingface/Universal-618/Clarity-flash-weights', provider: 'huggingface', label: 'DeepSeek R1 1.5B', badge: 'Reasoning' },
+  { id: 'huggingface/Universal-618/Clarity-heavy-weights', provider: 'huggingface', label: 'DeepSeek R1 7B', badge: 'Reasoning' },
   { id: 'groq/llama-3.3-70b-versatile', provider: 'groq', label: 'Llama 3.3 70B Versatile', badge: null },
   { id: 'groq/llama-3.1-8b-instant', provider: 'groq', label: 'Llama 3.1 8B Instant', badge: 'Fast' },
   { id: 'groq/llama-4-scout-17b-16e-instruct', provider: 'groq', label: 'Llama 4 Scout 17B', badge: null },

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,7 +23,6 @@ export const hex = {
   textMuted: '#555577',
   white: '#FFFFFF',
   black: '#000000',
-  modalOverlay: 'rgba(0,0,0,0.85)',
 };
 
 export const color = {
@@ -46,32 +47,47 @@ 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',
+  },
   treeJ: '\u2514',
   treeT: '\u251C',
   treeCon: '\u2502',
-  triR2: '\u25B8',
-  triD2: '\u25BE',
-  u: { h: '\u2500' },
   treeTip: '\u2570',
   treeFork: '\u256D',
   star: '\u2726',
-  asterisk: '\u2731',
+  gear: '\u2699',
+  pointer: '\u276F',
 };
+
+export const gradientText = gradient(['#FF6B35', '#3B82F6']);
+export const gradientLine = gradient(['#FF6B35', '#3B82F6']);
+
+export const LOGO = [
+  '                                                                              ',
+  '  ██████  ██       █████  ██████  ██ ████████ ██    ██                       ',
+  '  ██   ██ ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
+  '  ██████  ██      ███████ ██████  ██    ██    ██    ██                       ',
+  '  ██      ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
+  '  ██      ███████ ██   ██ ██   ██ ██    ██    ██     ██████▄                  ',
+  '                                                                              ',
+  '                    █████  ██                                                 ',
+  '                    ██   ██ ██                                                ',
+  '                    ██████  ██                                                ',
+  '                    ██   ██ ██                                                ',
+  '                    ██   ██ ███████                                           ',
+  '                                                                              ',
+];