clarity-ai 6.5.6 → 6.6.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ---
 
+## 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/package.json

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

package/src/components/AppRoot.js

@@ -76,12 +76,8 @@ export function App({ config }) {
 
   return h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
     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' },
@@ -36,28 +36,51 @@ export function CommandPicker({ query, onSelect, onClose }) {
 
   const w = Math.min(cols - 4, 48);
 
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt, width: w },
+  const items = filtered.map((cmd, i) => {
+    const isSel = i === idx;
+    return h(Box, {
+      key: cmd.name, height: 1,
+      backgroundColor: isSel ? hex.selectionBg : hex.bg,
+    },
+      h(Text, {
+        color: isSel ? hex.selectionText : hex.text,
+        bold: isSel,
+        backgroundColor: isSel ? hex.selectionBg : hex.bg,
+      }, '  ' + (isSel ? '\u276F ' : '  ') + cmd.name),
+      h(Text, {
+        color: isSel ? hex.selectionText : hex.textDim,
+        backgroundColor: isSel ? hex.selectionBg : hex.bg,
+      }, ' ' + cmd.desc)
+    );
+  });
+
+  const maxH = Math.min(items.length + 3, 16);
+
+  return h(Box, { flexDirection: 'column', width: w, marginLeft: 2, backgroundColor: hex.bg },
+    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.textMuted, backgroundColor: hex.surfaceAlt }, '  ' + sym.star + ' ' + (search || 'filter commands...'))
+      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)
     ),
-    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.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,
     ),
     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.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')
+    ),
   );
 }

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 - 6);
+  const w = Math.max(10, cols - 8);
   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 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 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];
 
   for (let i = 0; i < MAX_ROWS; i++) {
     const start = i * w;
@@ -60,7 +60,7 @@ 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...' : ' ')) + '  ')
       )
     );
   }
@@ -68,7 +68,7 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
   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')
+        '  ' + sym.box.bl + sym.box.h + ' ' + provider + ' ' + sym.midDot + ' ' + mShort + (agentMode ? ' ' + sym.midDot + ' AGENT' : '') + '  ' + sym.midDot + '  Ctrl+P')
     )
   );
 

package/src/components/Layout.js

@@ -9,29 +9,21 @@ 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%' },
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
     h(StatusBar, { model, provider, agentMode: state.agentMode, thinking: state.thinking }),
     h(Box, { flexGrow: 1, flexDirection: 'column' },
       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,
       })
     ),
     showCommands || showModels
-      ? h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
+      ? h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
           showCommands ? h(CommandPicker, { query: '', onSelect: onCommandSelect, onClose: onCloseCommands }) : null,
           showModels ? h(ModelPicker, { onSelect: onModelSelect, onClose: onCloseModels }) : null
         )
       : null,
-    h(Composer, {
-      provider, model,
-      agentMode: state.agentMode,
-      thinking: state.thinking,
-      onSlash,
-      onSubmit,
-    })
+    h(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,11 +8,11 @@ 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 ' + sym.bullet + ' 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 },
@@ -20,7 +20,7 @@ function Line({ type, text, data }) {
       );
     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 },
@@ -28,15 +28,15 @@ function Line({ type, text, data }) {
       );
     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 },
@@ -44,11 +44,11 @@ function Line({ type, text, data }) {
       );
     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 }, '    ' + sym.dot + ' ' + (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,24 +59,17 @@ 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 { slice, clipIndex, clipLines } = useMemo(
-    () => sliceToViewport(entries, viewport, contentWidth),
-    [entries, viewport, contentWidth]
+    () => sliceToViewport(entries, Math.max(viewport - (showLogo ? 14 : 0), viewport), contentWidth),
+    [entries, viewport, contentWidth, showLogo]
   );
 
   const lines = useMemo(
@@ -85,17 +78,36 @@ export function MessageList({ messages, thinking, streamContent, agentStatus, to
   );
 
   const padded = [...lines];
-  for (let i = padded.length; i < viewport; i++) {
-    padded.unshift({ 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' });
+    }
   }
 
-  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 })
-          )
-    )
+  const logoVisible = showLogo;
+  const totalHeight = viewport;
+
+  return h(Box, { height: totalHeight, flexDirection: 'column', overflow: 'hidden' },
+    padded.map((ln, i) => {
+      if (ln.type === 'empty') {
+        if (logoVisible && i < 14) {
+          const logoLine = LOGO[i] || '';
+          return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg },
+            h(Text, {
+              color: (i === 1 || i === 9 || i === 10 || i === 11) ? hex.accent : hex.textMuted,
+              backgroundColor: hex.bg,
+            }, '  ' + logoLine)
+          );
+        }
+        return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg });
+      }
+      return h(Box, { key: (ln.data?.id || 'l') + '-' + i, height: 1 },
+        h(Line, { type: ln.type, text: ln.text, data: ln.data })
+      );
+    })
   );
 }

package/src/components/ModelPicker.js

@@ -39,30 +39,53 @@ export function ModelPicker({ onSelect, onClose }) {
 
   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 - 8)) + sym.box.v)
+      );
+    }
+    const isSel = i === idx;
+    return h(Box, {
+      key: m.id, height: 1,
+      backgroundColor: isSel ? hex.selectionBg : hex.bg,
+    },
+      h(Text, {
+        color: isSel ? hex.selectionText : hex.text,
+        bold: isSel,
+        backgroundColor: isSel ? hex.selectionBg : hex.bg,
+      }, (isSel ? '\u276F ' : '  ') + m.label + (m.badge ? ' [' + m.badge + ']' : '') + ' '.repeat(Math.max(0, w - m.label.length - (m.badge ? m.badge.length + 4 : 0) - 4)) + (isSel ? '\u276F' : '  '))
+    );
+  });
+
+  const count = flat.filter(m => !m._header).length;
+
+  return h(Box, { flexDirection: 'column', width: w, marginLeft: 2, backgroundColor: hex.bg },
     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 + ' '),
+      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(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,
+    ),
+    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')
+    ),
   );
 }

package/src/components/StatusBar.js

@@ -8,7 +8,7 @@ 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 right = (agentMode ? '\u25C8 AGENT' : '\u25CB USER') + (thinking ? ' ' + sym.dot : '');
   const gap = Math.max(1, cols - left.length - right.length - 4);
   return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
     h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, '  ' + left + ' '.repeat(gap) + right + '  ')

package/src/components/ThinkingBlock.js

@@ -12,40 +12,34 @@ 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;
+  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 }, '  ' + headerText)
+      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    ' + icon + ' ' + headerText)
     ),
-    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 + sym.u.h : sym.treeFork + sym.u.h;
+        const conn = isLast ? ' ' : sym.treeCon;
+        const ico = tr.status === 'failed' ? sym.cross : sym.circle;
+        const col = tr.status === 'failed' ? hex.red : hex.green;
+        const td = tr.duration ? ' ' + tr.duration + 'ms' : '';
+        const line = '      ' + prefix + ' ' + ico + ' ' + tr.name + td;
+        const contentLine = tr.content && tr.content.length < 200
+          ? '      ' + conn + ' ' + String(tr.content).slice(0, cols - 14)
+          : null;
+        return h(Box, { key: tr.execId || i, flexDirection: 'column' },
+          h(Box, { height: 1 },
+            h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, line)
+          ),
+          contentLine ? h(Box, { height: 1 },
+            h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, contentLine)
+          ) : null
+        );
+      })
+    )
   );
 }

package/src/components/ToolCard.js

@@ -16,21 +16,30 @@ 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,
+    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

@@ -10,7 +10,8 @@ export function getLayout() {
     dock: 4,
     viewport: Math.max(8, rows - 5),
     contentWidth: Math.max(20, cols - 4),
-    padLeft: ' '.repeat(2),
+    padLeft: '  ',
+    padRight: '  ',
   };
 }
 
@@ -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');
@@ -98,14 +98,7 @@ export function buildLineArray(slice, clipIndex, clipLines, w) {
       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: label, data: e });
       }
     } else if (nr === 'system') {
       if (skip <= 0) lines.push({ type: 'sys_line', text: e.content, data: e });
@@ -113,7 +106,6 @@ export function buildLineArray(slice, clipIndex, clipLines, w) {
       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');

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

@@ -22,6 +22,8 @@ export const hex = {
   white: '#FFFFFF',
   black: '#000000',
   modalOverlay: 'rgba(0,0,0,0.85)',
+  logoOrange: '#FF6B35',
+  logoBlue: '#3B82F6',
 };
 
 export const color = {
@@ -64,6 +66,16 @@ export const sym = {
   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',
@@ -74,4 +86,22 @@ export const sym = {
   treeFork: '\u256D',
   star: '\u2726',
   asterisk: '\u2731',
+  gear: '\u2699',
+  thought: '\u25CB',
 };
+
+export const LOGO = [
+  '                                                                              ',
+  '  ██████  ██       █████  ██████  ██ ████████ ██    ██                       ',
+  '  ██   ██ ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
+  '  ██████  ██      ███████ ██████  ██    ██    ██    ██                       ',
+  '  ██      ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
+  '  ██      ███████ ██   ██ ██   ██ ██    ██     ██████                        ',
+  '                                                                              ',
+  '                    █████  ██                                                 ',
+  '                    ██   ██ ██                                                ',
+  '                    ██████  ██                                                ',
+  '                    ██   ██ ██                                                ',
+  '                    ██   ██ ███████                                           ',
+  '                                                                              ',
+];