clarity-ai 6.7.0 → 7.0.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ---
 
+## 7.0.0 (2026-06-06)
+
+### Ground-up architectural rebuild — centered minimalist terminal platform
+- **Complete UI obliteration**: all legacy components replaced with fresh centered layout
+- **Ink-text-input**: controlled form text entry via `ink-text-input` (v6) with dim placeholder
+- **Dynamic viewport hardening**: `process.stdout.on('resize')` listener tracks rows/columns live; auto-downgrades padding below 50 cols
+- **Centered gradient CLARITY logo**: permanent eye-level anchor using gradient-string (orange→blue); never unmounts or wraps
+- **Bordered PromptCard**: clean `┌─┐` container width-capped at 55 cols; status bar with model/provider/agent indicators
+- **Stream concurrency protection**: wrap-ansi + cli-truncate gates all text output; keyboard locked during thinking/streaming
+- **Keybind metadata footer**: right-aligned "tab agents ctrl+p commands" in muted text
+- **System callout banner**: `▀ Tip: Use /help ...` at bottom edge with keyword highlighting
+
+## 6.8.0 (2026-06-06)
+
+### Clean-slate TUI: dynamic dimension defense, sandboxed streams, @inkjs/ui
+- **Dimension defense**: monitors terminal resize; renders fallback if < 60x20
+- **stdout/stderr sandbox**: console.log/error/warn intercepted to prevent AI model noise from corrupting the viewport
+- **Hard-locked 3-tier Yoga grid**: headerBar(1) + messageViewport(flexGrow) + inputDock(3)
+- **@inkjs/ui + cli-truncate**: wrap-ansi + string-width + cli-truncate for zero-bleed text
+- **Single-line gradient header**: `CLARITY AI` with provider/model/mode badges — no ASCII art
+- **Floating picker overlays** with `position: absolute` — never shift the message stream
+- **Alternate screen buffer** with full SIGINT/SIGTERM cleanup and cursor restore
+- **Orange selection bar** (`#FF6B35`) on all active items
+
 ## 6.7.0 (2026-06-06)
 
 ### Premium Ink+React TUI Engine — zero-bleed grid

package/bin/clarity.js

@@ -1,14 +1,17 @@
 #!/usr/bin/env node
 import React from 'react';
 import { render } from 'ink';
-import { App } from '../src/components/AppRoot.js';
+import { App } from '../src/app.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
-import ansiEscapes from 'ansi-escapes';
 
 process.stdin.resume();
 process.stdin.setEncoding('utf8');
 
+const originalLog = console.log;
+const originalError = console.error;
+const originalWarn = console.warn;
+
 async function main() {
   const provider = process.env.CLARITY_PROVIDER || 'groq';
 
@@ -25,8 +28,11 @@ async function main() {
     process.stdin.resume();
   }
 
-  process.stdout.write(ansiEscapes.clearScreen);
-  process.stdout.write(ansiEscapes.cursorHide);
+  console.log = function sandboxedLog() {};
+  console.error = function sandboxedError() {};
+  console.warn = function sandboxedWarn() {};
+
+  let keepAlive;
 
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
 
@@ -36,28 +42,30 @@ async function main() {
     exitOnCtrlC: false,
   });
 
-  const keepAlive = setInterval(() => {}, 2 ** 31 - 1);
+  keepAlive = setInterval(() => {}, 2 ** 31 - 1);
 
   function cleanup() {
     clearInterval(keepAlive);
-    process.stdout.write(ansiEscapes.cursorShow);
-    process.stdout.write('\x1b[0m');
+    console.log = originalLog;
+    console.error = originalError;
+    console.warn = originalWarn;
     try { clear(); } catch {}
+    process.stdout.write('\x1b[?25h\x1b[0m');
     process.exit(0);
   }
 
   process.on('SIGINT', () => cleanup());
   process.on('SIGTERM', () => cleanup());
-  process.on('exit', () => {
-    process.stdout.write(ansiEscapes.cursorShow);
-  });
+  process.on('exit', () => { process.stdout.write('\x1b[?25h\x1b[0m'); });
 
   await new Promise(() => {});
 }
 
 main().catch(err => {
-  process.stdout.write(ansiEscapes.cursorShow);
-  process.stdout.write('\x1b[0m');
+  console.log = originalLog;
+  console.error = originalError;
+  console.warn = originalWarn;
+  process.stdout.write('\x1b[?25h\x1b[0m');
   console.error('\n\x1b[31mFatal error:\x1b[0m', err.message);
   process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "6.7.0",
+  "version": "7.0.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {
@@ -19,14 +19,18 @@
     "access": "public"
   },
   "dependencies": {
-    "ink": "^5",
-    "react": "^18",
-    "ink-spinner": "^5",
+    "@inkjs/ui": "^2",
+    "ansi-escapes": "^7",
     "chalk": "^5",
-    "wrap-ansi": "^9",
-    "gradient-string": "^3",
+    "cli-truncate": "^6",
+    "ink-text-input": "^6",
     "figures": "^6",
-    "ansi-escapes": "^7",
-    "string-width": "^7"
+    "gradient-string": "^3",
+    "ink": "^5",
+    "ink-spinner": "^5",
+    "ink-text-input": "^6.0.0",
+    "react": "^18",
+    "string-width": "^7",
+    "wrap-ansi": "^9"
   }
 }

package/src/app.js

@@ -0,0 +1,105 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { createChatState, handleSend, handleCommand } from './chat.js';
+import { hex } from './config/theme.js';
+import { getLayout } from './config/layout.js';
+import { Header } from './components/Header.js';
+import { StreamView } from './components/StreamView.js';
+import { PromptCard } from './components/PromptCard.js';
+import { Footer } from './components/Footer.js';
+const { createElement: h } = React;
+
+let abortController = null;
+
+export function getAbortController() {
+  return abortController;
+}
+
+export function setAbortController(ac) {
+  abortController = ac;
+}
+
+export function cancelStream() {
+  if (abortController) {
+    try { abortController.abort(); } catch {}
+    abortController = null;
+  }
+}
+
+export function App({ config }) {
+  const { stdout } = useStdout();
+  const [dims, setDims] = useState({ rows: stdout.rows || 30, cols: stdout.columns || 80 });
+  const [state, setState] = useState(() => createChatState());
+  const [streamContent, setStreamContent] = useState('');
+  const defaultModel = (config.model || 'groq/llama-3.3-70b-versatile').replace(/^[^/]+\//, '');
+  const [model, setModel] = useState(defaultModel);
+  const [provider, setProvider] = useState(config.provider || 'groq');
+
+  const stateRef = useRef(state);
+  const modelRef = useRef(model);
+  const providerRef = useRef(provider);
+  stateRef.current = state;
+  modelRef.current = model;
+  providerRef.current = provider;
+
+  useEffect(() => {
+    function onResize() {
+      setDims({ rows: process.stdout.rows || 30, cols: process.stdout.columns || 80 });
+    }
+    process.stdout.on('resize', onResize);
+    return () => process.stdout.removeListener('resize', onResize);
+  }, []);
+
+  const cols = dims.cols;
+  const rows = dims.rows;
+  const isCompact = cols < 50;
+  const cardWidth = Math.min(cols - 4, 55);
+  const contentPad = isCompact ? 1 : 2;
+
+  const onSubmit = useCallback(async (input) => {
+    if (input === '/exit') { process.exit(0); return; }
+    cancelStream();
+    const ac = new AbortController();
+    setAbortController(ac);
+    ac.signal.addEventListener('abort', () => {
+      setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
+      setStreamContent('');
+    });
+    await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent, ac.signal);
+  }, []);
+
+  const onCommand = useCallback(async (input) => {
+    if (input.startsWith('/stop')) { cancelStream(); return; }
+    if (input.startsWith('/exit')) { process.exit(0); return; }
+    await handleCommand(input, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
+  }, []);
+
+  function handleInputSubmit(value) {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    if (trimmed.startsWith('/')) {
+      onCommand(trimmed);
+    } else {
+      onSubmit(trimmed);
+    }
+  }
+
+  return h(Box, { width: '100%', height: '100%', flexDirection: 'column', alignItems: 'center', backgroundColor: hex.bg },
+    h(Box, { flexGrow: 1, minHeight: 1 }),
+    h(Header, { cols }),
+    h(Box, { flexGrow: 2, width: cardWidth, minHeight: 2 },
+      h(StreamView, { messages: state.messages, streamContent, thinking: state.thinking, width: cardWidth - 2 })
+    ),
+    h(PromptCard, {
+      width: cardWidth,
+      compact: isCompact,
+      provider,
+      model,
+      agentMode: state.agentMode,
+      thinking: state.thinking,
+      onSubmit: handleInputSubmit,
+    }),
+    h(Box, { flexGrow: 1, minHeight: 1 }),
+    h(Footer, { cols })
+  );
+}

package/src/chat.js

@@ -1,7 +1,7 @@
 import { callAI } from './providers/index.js';
 import { setKey } from './config/keys.js';
 import { TOOLS, executeTool } from './tools.js';
-import { cancelStream } from './components/AppRoot.js';
+import { cancelStream } from './app.js';
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 

package/src/components/Footer.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+export function Footer({ cols }) {
+  const showFull = cols >= 60;
+  const keybindText = 'tab agents    ctrl+p commands';
+  const tipText = 'Tip: Use /help to view system commands and switch active models';
+
+  return h(Box, { width: '100%', flexDirection: 'column', backgroundColor: hex.bg },
+    h(Box, { height: 1, justifyContent: 'flex-end', paddingRight: 2 },
+      h(Text, { color: hex.textMuted }, keybindText)
+    ),
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2 },
+      h(Text, { color: hex.textDim },
+        '\u2580 ',
+        h(Text, { color: hex.blue }, 'Tip'),
+        h(Text, { color: hex.textDim }, ': ' + (showFull ? tipText : 'Use /help for commands'))
+      )
+    )
+  );
+}

package/src/components/Header.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { appGradient } from '../config/theme.js';
+const { createElement: h } = React;
+
+export function Header({ cols }) {
+  const label = appGradient('CLARITY');
+  return h(Box, { height: 3, width: '100%', alignItems: 'center', justifyContent: 'center' },
+    h(Text, { bold: true }, label)
+  );
+}

package/src/components/PromptCard.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+const DIVIDER = '\u2500';
+
+export function PromptCard({ width, compact, provider, model, agentMode, thinking, onSubmit }) {
+  const [input, setInput] = useState('');
+  const mShort = model.replace(/^[^/]+\//, '').slice(0, compact ? 10 : 20);
+  const pShort = provider.slice(0, compact ? 6 : 10);
+  const statusLine = '[ ' + pShort + '  \u00B7  ' + mShort + (agentMode ? '  \u00B7  AGENT' : '') + ' ]';
+  const innerW = width - 2;
+
+  function handleSubmit(value) {
+    onSubmit(value);
+    setInput('');
+  }
+
+  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.surface },
+    h(Box, { height: 1 },
+      h(Text, { color: hex.textMuted },
+        '\u250C' + '\u2500'.repeat(Math.max(0, innerW)) + '\u2510')
+    ),
+    h(Box, { height: 1, paddingLeft: 1, paddingRight: 1 },
+      h(TextInput, {
+        value: input,
+        onChange: setInput,
+        onSubmit: handleSubmit,
+        placeholder: 'Ask anything...',
+        focus: !thinking,
+      })
+    ),
+    h(Box, { height: 1 },
+      h(Text, { color: hex.textMuted },
+        '\u2502' + '\u2500'.repeat(Math.max(0, innerW)) + '\u2502')
+    ),
+    h(Box, { height: 1, paddingLeft: 1, paddingRight: 1, alignItems: 'center' },
+      h(Text, { color: hex.textDim },
+        statusLine + ' '.repeat(Math.max(0, innerW - statusLine.length - 1))
+      ),
+      h(Text, { color: hex.textMuted }, '\u2502')
+    ),
+    h(Box, { height: 1 },
+      h(Text, { color: hex.textMuted },
+        '\u2514' + '\u2500'.repeat(Math.max(0, innerW)) + '\u2518')
+    ),
+  );
+}

package/src/components/StreamView.js

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+import wrapAnsi from 'wrap-ansi';
+import cliTruncate from 'cli-truncate';
+const { createElement: h } = React;
+
+function wrap(text, width) {
+  if (!text) return '';
+  return wrapAnsi(String(text), Math.max(1, width), { trim: false, hard: true });
+}
+
+function trunc(text, width) {
+  return cliTruncate(text || '', Math.max(1, width), { position: 'end' });
+}
+
+function MessageLine({ line, width }) {
+  switch (line.role) {
+    case 'system':
+      return h(Box, { height: 1 },
+        h(Text, { color: hex.blue }, '  \u25C9 ' + trunc(line.content, width - 4))
+      );
+    case 'user':
+      return h(Box, { height: 1 },
+        h(Text, { color: hex.accent, bold: true }, '  \u276F '),
+        h(Text, { color: hex.text }, trunc(line.content, width - 4))
+      );
+    case 'assistant':
+      return h(Box, { height: 1 },
+        h(Text, { color: hex.purple, bold: true }, '  \u25C6 '),
+        h(Text, { color: hex.text }, trunc(line.content, width - 4))
+      );
+    case 'tool':
+      return h(Box, { height: 1 },
+        h(Text, { color: hex.green }, '    \u25C9 ' + trunc((line.toolName || 'tool') + (line.duration ? ' ' + line.duration + 'ms' : ''), width - 6))
+      );
+    case 'error':
+      return h(Box, { height: 1 },
+        h(Text, { color: hex.red }, '  \u2716 ' + trunc(line.content, width - 4))
+      );
+    default:
+      return null;
+  }
+}
+
+function StreamingLine({ content, width }) {
+  const wrapped = wrap(content || '', width - 4);
+  const first = wrapped.split('\n')[0] || '';
+  return h(Box, { height: 1 },
+    h(Text, { color: hex.purple }, '  \u25CF '),
+    h(Text, { color: hex.text }, trunc(first, width - 4))
+  );
+}
+
+export function StreamView({ messages, streamContent, thinking, width }) {
+  const contentW = Math.max(1, width - 2);
+
+  const visibleMessages = useMemo(() => {
+    if (messages.length === 0) {
+      return [{ id: 'empty', role: 'system', content: 'CLARITY AI ready  \u00B7  Ctrl+P commands  \u00B7  /help' }];
+    }
+    return messages.slice(-20);
+  }, [messages]);
+
+  return h(Box, { flexDirection: 'column', width: '100%', paddingLeft: 1, paddingRight: 1 },
+    visibleMessages.map(m =>
+      h(MessageLine, { key: m.id, line: m, width: contentW })
+    ),
+    thinking && streamContent
+      ? h(StreamingLine, { content: streamContent, width: contentW })
+      : null,
+    thinking && !streamContent
+      ? h(Box, { height: 1 },
+          h(Text, { color: hex.blue }, '  \u25CF processing...')
+        )
+      : null,
+  );
+}

package/src/config/layout.js

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

package/src/config/theme.js

@@ -1,6 +1,5 @@
 import chalk from 'chalk';
 import gradient from 'gradient-string';
-import figures from 'figures';
 
 export const hex = {
   bg: '#0A0A14',
@@ -10,7 +9,6 @@ export const hex = {
   codeBg: '#0D0D18',
   selectionBg: '#FF6B35',
   selectionText: '#FFFFFF',
-  borderLight: '#202050',
   accent: '#FF6B35',
   purple: '#A855F7',
   green: '#22C55E',
@@ -21,8 +19,6 @@ export const hex = {
   text: '#EAEAEE',
   textDim: '#8888AA',
   textMuted: '#555577',
-  white: '#FFFFFF',
-  black: '#000000',
 };
 
 export const color = {
@@ -42,52 +38,6 @@ export const color = {
   text: chalk.hex(hex.text),
   textDim: chalk.hex(hex.textDim),
   textMuted: chalk.hex(hex.textMuted),
-  white: chalk.hex(hex.white),
-  black: chalk.hex(hex.black),
 };
 
-export const sym = {
-  circle: '\u25C9',
-  dot: '\u25CF',
-  triR: '\u25B8',
-  triD: '\u25BE',
-  bullet: '\u25C9',
-  cross: '\u2716',
-  ellipsis: '\u2026',
-  mdash: '\u2014',
-  midDot: '\u00B7',
-  arrowR: '\u2192',
-  arrowU: '\u2191',
-  arrowD: '\u2193',
-  box: {
-    tl: '\u250C', tr: '\u2510', bl: '\u2514', br: '\u2518',
-    h: '\u2500', v: '\u2502',
-  },
-  treeJ: '\u2514',
-  treeT: '\u251C',
-  treeCon: '\u2502',
-  treeTip: '\u2570',
-  treeFork: '\u256D',
-  star: '\u2726',
-  gear: '\u2699',
-  pointer: '\u276F',
-};
-
-export const gradientText = gradient(['#FF6B35', '#3B82F6']);
-export const gradientLine = gradient(['#FF6B35', '#3B82F6']);
-
-export const LOGO = [
-  '                                                                              ',
-  '  ██████  ██       █████  ██████  ██ ████████ ██    ██                       ',
-  '  ██   ██ ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
-  '  ██████  ██      ███████ ██████  ██    ██    ██    ██                       ',
-  '  ██      ██      ██   ██ ██   ██ ██    ██    ██    ██                       ',
-  '  ██      ███████ ██   ██ ██   ██ ██    ██    ██     ██████▄                  ',
-  '                                                                              ',
-  '                    █████  ██                                                 ',
-  '                    ██   ██ ██                                                ',
-  '                    ██████  ██                                                ',
-  '                    ██   ██ ██                                                ',
-  '                    ██   ██ ███████                                           ',
-  '                                                                              ',
-];
+export const appGradient = gradient(['#FF6B35', '#3B82F6']);

package/src/components/AppRoot.js

@@ -1,87 +0,0 @@
-import React, { useState, useCallback, useRef } from 'react';
-import { Box } from 'ink';
-import { createChatState, handleSend, handleCommand } from '../chat.js';
-import { hex } from '../config/theme.js';
-import { Layout } from './Layout.js';
-const { createElement: h } = React;
-
-let abortController = null;
-
-export function getAbortController() {
-  return abortController;
-}
-
-export function setAbortController(ac) {
-  abortController = ac;
-}
-
-export function cancelStream() {
-  if (abortController) {
-    try { abortController.abort(); } catch {}
-    abortController = null;
-  }
-}
-
-export function App({ config }) {
-  const [state, setState] = useState(() => createChatState());
-  const [streamContent, setStreamContent] = useState('');
-  const defaultModel = (config.model || 'groq/llama-3.3-70b-versatile').replace(/^[^/]+\//, '');
-  const [model, setModel] = useState(defaultModel);
-  const [provider, setProvider] = useState(config.provider || 'groq');
-  const [showCommands, setShowCommands] = useState(false);
-  const [showModels, setShowModels] = useState(false);
-
-  const stateRef = useRef(state);
-  const modelRef = useRef(model);
-  const providerRef = useRef(provider);
-  stateRef.current = state;
-  modelRef.current = model;
-  providerRef.current = provider;
-
-  const onSubmit = useCallback(async (input) => {
-    if (input === '/exit') { process.exit(0); return; }
-    if (input.startsWith('/')) {
-      if (input === '/model' || input === '/models') { setShowModels(true); return; }
-      if (input === '/help') { setShowCommands(true); return; }
-      if (input === '/stop') { cancelStream(); return; }
-      await handleCommand(input, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
-      return;
-    }
-    cancelStream();
-    const ac = new AbortController();
-    setAbortController(ac);
-    ac.signal.addEventListener('abort', () => {
-      setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
-      setStreamContent('');
-    });
-    await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent, ac.signal);
-  }, []);
-
-  function handleCommandSelect(cmdName) {
-    setShowCommands(false);
-    onSubmit(cmdName);
-  }
-
-  function handleModelSelect(modelId) {
-    setProvider(modelId.split('/')[0]);
-    setModel(modelId.replace(/^[^/]+\//, ''));
-    setShowModels(false);
-    setState(s => ({
-      ...s,
-      messages: [...s.messages, { id: 'sys-' + Date.now(), role: 'system', content: 'Switched to ' + modelId }],
-    }));
-  }
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, height: '100%' },
-    h(Layout, {
-      state, streamContent, model, provider,
-      showCommands, showModels,
-      onCommandSelect: handleCommandSelect,
-      onModelSelect: handleModelSelect,
-      onCloseCommands: () => setShowCommands(false),
-      onCloseModels: () => setShowModels(false),
-      onSlash: () => setShowCommands(true),
-      onSubmit,
-    })
-  );
-}

package/src/components/CodeBlock.js

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

package/src/components/CommandPicker.js

@@ -1,75 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { hex, sym } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-const COMMANDS = [
-  { name: '/keys',     desc: 'Set API key' },
-  { name: '/model',    desc: 'Switch model' },
-  { name: '/provider', desc: 'Switch provider' },
-  { name: '/agent',    desc: 'Toggle agent mode' },
-  { name: '/stop',     desc: 'Cancel running stream' },
-  { name: '/clear',    desc: 'Clear conversation' },
-  { name: '/export',   desc: 'Export conversation' },
-  { name: '/help',     desc: 'Show all commands' },
-  { name: '/exit',     desc: 'Exit CLARITY' },
-];
-
-export function CommandPicker({ query, onSelect, onClose }) {
-  const [search, setSearch] = useState('');
-  const [idx, setIdx] = useState(0);
-  const { cols } = getLayout();
-
-  const filtered = COMMANDS.filter(c =>
-    c.name.includes(search) || c.desc.toLowerCase().includes(search.toLowerCase())
-  );
-
-  useInput((input, key) => {
-    if (key.upArrow) setIdx(i => Math.max(0, i - 1));
-    if (key.downArrow) setIdx(i => Math.min(filtered.length - 1, i + 1));
-    if (key.return && filtered[idx]) onSelect(filtered[idx].name);
-    if (key.escape || key.ctrl && key.c) onClose();
-    if (key.backspace) setSearch(s => s.slice(0, -1));
-    else if (input && !key.ctrl && !key.meta) setSearch(s => s + input);
-  });
-
-  const w = Math.min(cols - 4, 48);
-
-  const items = filtered.map((cmd, i) =>
-    h(Box, {
-      key: cmd.name, height: 1,
-      backgroundColor: i === idx ? hex.selectionBg : hex.bg,
-    },
-      h(Text, {
-        color: i === idx ? hex.selectionText : hex.text,
-        bold: i === idx,
-        backgroundColor: i === idx ? hex.selectionBg : hex.bg,
-      }, '  ' + (i === idx ? '\u276F ' : '  ') + cmd.name + ' ' + cmd.desc)
-    )
-  );
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: w },
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.tl + sym.box.h.repeat(w - 2) + sym.box.tr)
-    ),
-    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.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

@@ -1,74 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { hex, sym } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-const MAX_ROWS = 3;
-
-export function Composer({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
-  const [input, setInput] = useState('');
-  const [cursor, setCursor] = useState(0);
-  const r = useRef('');
-  r.current = input;
-
-  const { cols } = getLayout();
-  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);
-  const isPlaceholder = !input && !thinking;
-
-  useInput((ch, key) => {
-    if (key.ctrl && key.p) { onSlash(); return; }
-    if (key.escape) { onSubmit('/exit'); return; }
-    if (key.return && !key.shift) {
-      if (input.trim()) { const t = input; setInput(''); setCursor(0); onSubmit(t); }
-      return;
-    }
-    if (key.return && key.shift) {
-      setInput(p => p.slice(0, cursor) + '\n' + p.slice(cursor));
-      setCursor(c => c + 1);
-      return;
-    }
-    if (key.backspace || key.delete) {
-      if (cursor > 0) { setInput(p => p.slice(0, cursor - 1) + p.slice(cursor)); setCursor(c => c - 1); }
-      return;
-    }
-    if (key.leftArrow && cursor > 0) { setCursor(c => c - 1); return; }
-    if (key.rightArrow && cursor < input.length) { setCursor(c => c + 1); return; }
-    if (key.home) { setCursor(0); return; }
-    if (key.end) { setCursor(input.length); return; }
-    if (ch && ch.length === 1 && ch.charCodeAt(0) >= 32) {
-      setInput(p => p.slice(0, cursor) + ch + p.slice(cursor));
-      setCursor(c => c + 1);
-    }
-  });
-
-  const 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;
-    const seg = input.slice(start, start + w);
-    rows.push(
-      h(Box, { key: 'r' + i, height: 1, backgroundColor: hex.bg },
-        h(Text, {
-          color: isPlaceholder ? hex.textMuted : hex.text,
-          backgroundColor: hex.bg,
-          wrap: 'truncate-end',
-        }, '  \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 },
-      '  \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,34 +0,0 @@
-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';
-import { CommandPicker } from './CommandPicker.js';
-import { ModelPicker } from './ModelPicker.js';
-const { createElement: h } = React;
-
-export function Layout({ state, streamContent, model, provider, showCommands, showModels, onCommandSelect, onModelSelect, onCloseCommands, onCloseModels, onSlash, onSubmit }) {
-  const { headerHeight, dockHeight, cols } = getLayout();
-
-  const picker = showCommands || showModels
-    ? h(Box, { position: 'absolute', top: headerHeight + 1, left: 2, width: Math.min(cols - 4, 52), backgroundColor: hex.bg, flexDirection: 'column' },
-        showCommands ? h(CommandPicker, { query: '', onSelect: onCommandSelect, onClose: onCloseCommands }) : null,
-        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', position: 'relative' },
-      h(MessageList, {
-        messages: state.messages, thinking: state.thinking,
-        streamContent, agentStatus: state.agentStatus,
-        toolExecutions: state.toolExecutions,
-      }),
-      picker
-    ),
-    h(Composer, { provider, model, agentMode: state.agentMode, thinking: state.thinking, onSlash, onSubmit })
-  );
-}

package/src/components/LoadingIndicator.js

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

package/src/components/MessageList.js

@@ -1,107 +0,0 @@
-import React, { useMemo } from 'react';
-import { Box, Text } from 'ink';
-import { hex, sym, LOGO } from '../config/theme.js';
-import { getLayout, sliceToViewport, buildLineArray } from '../config/layout.js';
-const { createElement: h } = React;
-
-function Line({ type, text, data }) {
-  switch (type) {
-    case 'user_head':
-      return h(Box, { height: 1, backgroundColor: hex.userBg },
-        h(Text, { color: hex.accent, bold: true, backgroundColor: hex.userBg }, '  \u276F \u25C9 YOU')
-      );
-    case 'user_line':
-      return h(Box, { height: 1, backgroundColor: hex.userBg },
-        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 }, '  \u25C6 CLARITY')
-      );
-    case 'asst_line':
-      return h(Box, { height: 1, backgroundColor: hex.surface },
-        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 }, '  \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 || ''))
-      );
-    case 'sys_line':
-      return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-        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 || ''))
-      );
-    case 'stream_head':
-      return h(Box, { height: 1, backgroundColor: hex.surface },
-        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 }, '    \u25CF ' + (text || ''))
-      );
-    case 'stream_line':
-      return h(Box, { height: 1, backgroundColor: hex.surface },
-        h(Text, { color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  \u2502 ' + (text || ' '))
-      );
-    default:
-      return null;
-  }
-}
-
-export function MessageList({ messages, thinking, streamContent, agentStatus, toolExecutions }) {
-  const { viewport, contentWidth } = getLayout();
-
-  const entries = useMemo(() => {
-    return messages.map(m => ({
-      id: m.id, role: m.role, content: m.content,
-      duration: m.duration, toolName: m.toolName, error: m.error, completed: true,
-    }));
-  }, [messages]);
-
-  const showLogo = entries.length <= 1 && !thinking && !streamContent;
-  const effectiveViewport = showLogo ? Math.max(viewport - 14, 4) : viewport;
-
-  const { slice, clipIndex, clipLines } = useMemo(
-    () => sliceToViewport(entries, effectiveViewport, contentWidth),
-    [entries, effectiveViewport, contentWidth]
-  );
-
-  const rawLines = useMemo(
-    () => buildLineArray(slice, clipIndex, clipLines, contentWidth),
-    [slice, clipIndex, clipLines, contentWidth]
-  );
-
-  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) => {
-      if (ln.type === 'empty') return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg });
-      if (ln.type === 'logo') {
-        const logoLine = LOGO[ln.line] || '';
-        return h(Box, { key: 'l' + i, height: 1, backgroundColor: hex.bg },
-          h(Text, {
-            color: (ln.line >= 1 && ln.line <= 5) || ln.line === 9 ? hex.accent : hex.textMuted,
-            backgroundColor: hex.bg,
-          }, ' ' + logoLine)
-        );
-      }
-      return h(Box, { key: (ln.data?.id || 'r') + '-' + i, height: 1 },
-        h(Line, { type: ln.type, text: ln.text, data: ln.data })
-      );
-    })
-  );
-}

package/src/components/ModelPicker.js

@@ -1,87 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { ALL_MODELS } from '../config/models.js';
-import { hex, sym } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-export function ModelPicker({ onSelect, onClose }) {
-  const [search, setSearch] = useState('');
-  const [idx, setIdx] = useState(0);
-  const { cols } = getLayout();
-
-  const flat = useMemo(() => {
-    const q = search.toLowerCase();
-    const filtered = ALL_MODELS.filter(m =>
-      m.id.toLowerCase().includes(q) || m.label.toLowerCase().includes(q)
-    );
-    const groups = {};
-    for (const m of filtered) {
-      if (!groups[m.provider]) groups[m.provider] = [];
-      groups[m.provider].push(m);
-    }
-    const list = [];
-    for (const [provider, models] of Object.entries(groups)) {
-      list.push({ _header: provider, _provider: provider });
-      for (const m of models) list.push(m);
-    }
-    return list;
-  }, [search]);
-
-  useInput((input, key) => {
-    if (key.upArrow) setIdx(i => Math.max(0, i - 1));
-    if (key.downArrow) setIdx(i => Math.min(flat.length - 1, i + 1));
-    if (key.return) { const m = flat[idx]; if (m && !m._header) onSelect(m.id); return; }
-    if (key.escape || key.ctrl && key.c) onClose();
-    if (key.backspace) setSearch(s => s.slice(0, -1));
-    else if (input && !key.ctrl && !key.meta) setSearch(s => s + input);
-  });
-
-  const w = Math.min(cols - 4, 52);
-
-  const items = flat.map((m, i) => {
-    if (m._header) {
-      return h(Box, { key: 'h-' + m._provider, height: 1, backgroundColor: hex.surfaceAlt },
-        h(Text, { color: hex.blue, bold: true, backgroundColor: hex.surfaceAlt }, sym.box.v + ' ' + m._provider.toUpperCase()),
-        h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' '.repeat(Math.max(0, w - m._provider.length - 6)) + sym.box.v)
-      );
-    }
-    const isSel = i === idx;
-    return h(Box, {
-      key: m.id, height: 1,
-      backgroundColor: isSel ? hex.selectionBg : hex.bg,
-    },
-      h(Text, {
-        color: isSel ? hex.selectionText : hex.text,
-        bold: isSel,
-        backgroundColor: isSel ? hex.selectionBg : hex.bg,
-      }, (isSel ? '\u276F ' : '  ') + m.label + (m.badge ? ' [' + m.badge + ']' : ''))
-    );
-  });
-
-  const count = flat.filter(m => !m._header).length;
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: w },
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        sym.box.tl + sym.box.h.repeat(w - 2) + sym.box.tr)
-    ),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.gold, backgroundColor: hex.surfaceAlt }, sym.box.v + ' Models  ' + count + ' available'),
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' '.repeat(Math.max(0, w - 19)) + sym.box.v)
-    ),
-    h(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,19 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-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, 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.accent, bold: true, backgroundColor: hex.surfaceAlt }, ' ' + left),
-    h(Text, { backgroundColor: hex.surfaceAlt }, ' '.repeat(gap)),
-    h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, right + ' ')
-  );
-}

package/src/components/ThinkingBlock.js

@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text } from 'ink';
-import { hex, sym } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-export function ThinkingBlock({ toolResults, duration }) {
-  const [collapsed, setCollapsed] = useState(true);
-  const { cols } = getLayout();
-  const items = toolResults || [];
-  const durStr = duration
-    ? (duration < 1000 ? duration + 'ms' : (duration / 1000).toFixed(1) + 's')
-    : '';
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt },
-        '    ' + (collapsed ? sym.triR : sym.triD) + ' Thought' + (durStr ? ' (' + durStr + ')' : ''))
-    ),
-    collapsed ? 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

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { hex, sym } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-export function ToolCard({ exec, isActive }) {
-  const { cols } = getLayout();
-  const name = exec.name || 'tool';
-  const status = exec.status || 'running';
-  const dur = exec.duration ? (exec.duration < 1000 ? exec.duration + 'ms' : (exec.duration / 1000).toFixed(1) + 's') : '';
-  const args = typeof exec.args === 'string' ? exec.args : JSON.stringify(exec.args || {});
-  const isDone = !isActive && (status === 'completed' || status === 'failed');
-
-  if (isDone) {
-    const c = status === 'failed' ? hex.red : hex.green;
-    const icon = status === 'failed' ? sym.cross : sym.bullet;
-    return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: c, backgroundColor: hex.surfaceAlt }, '    ' + icon + ' ' + name + (dur ? '  ' + dur : ''))
-    );
-  }
-
-  const w = Math.min(cols - 8, 56);
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    ' + sym.bullet + ' ' + name + (dur ? '  ' + dur : ''))
-    ),
-    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,
-  );
-}