clarity-ai 6.8.0 → 7.0.0

package/CHANGELOG.md

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

package/bin/clarity.js

@@ -1,7 +1,7 @@
 #!/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';
 
@@ -36,7 +36,7 @@ async function main() {
 
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
 
-  const { clear, waitUntilExit, rerender } = render(React.createElement(App, { config }), {
+  const { clear, waitUntilExit } = render(React.createElement(App, { config }), {
     fullscreen: true,
     patchConsole: false,
     exitOnCtrlC: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "6.8.0",
+  "version": "7.0.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {
@@ -19,16 +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",
+    "gradient-string": "^3",
+    "ink": "^5",
+    "ink-spinner": "^5",
+    "ink-text-input": "^6.0.0",
+    "react": "^18",
     "string-width": "^7",
-    "@inkjs/ui": "^2",
-    "cli-truncate": "^6"
+    "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/components/AppRoot.js

@@ -1,97 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Box, Text } from 'ink';
-import { createChatState, handleSend, handleCommand } from '../chat.js';
-import { hex } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-import { Layout } from './Layout.js';
-const { createElement: h } = React;
-
-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 handleCmdSelect(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 }],
-    }));
-  }
-
-  const layout = getLayout();
-
-  if (!layout.isLargeEnough) {
-    return h(Box, { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', backgroundColor: hex.bg },
-      h(Text, { color: hex.textDim },
-        'Terminal size too small. Please expand. (' + layout.cols + 'x' + layout.rows + ' needed: 60x20)')
-    );
-  }
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: '100%', height: '100%' },
-    h(Layout, {
-      state, streamContent, model, provider,
-      showCommands, showModels,
-      onCommandSelect: handleCmdSelect,
-      onModelSelect: handleModelSelect,
-      onCloseCommands: () => setShowCommands(false),
-      onCloseModels: () => setShowModels(false),
-      onSlash: () => setShowCommands(true),
-      onSubmit,
-    })
-  );
-}

package/src/components/CodeBlock.js

@@ -1,44 +0,0 @@
-import React, { useMemo } from 'react';
-import { Box, Text } from 'ink';
-import { hex } 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',
-};
-
-export function CodeBlock({ code, language }) {
-  const lang = language || 'code';
-  const lines = useMemo(() => String(code).split('\n'), [code]);
-  const langColor = LANG_COLORS[lang] || '#555';
-  const { cols } = getLayout();
-  const maxLines = 15;
-  const visible = lines.slice(0, maxLines);
-  const codeWidth = cols - 10;
-  const lnW = String(lines.length).length;
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.codeBg },
-    h(Box, { height: 1, backgroundColor: hex.codeBg },
-      h(Text, { color: langColor, bold: true, backgroundColor: hex.codeBg }, '  ' + lang),
-      h(Text, { color: hex.textMuted, backgroundColor: hex.codeBg }, ' ' + String(lines.length) + ' lines'),
-    ),
-    h(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 }, '    \u2026 ' + (lines.length - maxLines) + ' more lines')
-          )
-        : null
-    )
-  );
-}

package/src/components/CommandPicker.js

@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { hex } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-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({ 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) 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.bg, width: w },
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u250C' + '\u2500'.repeat(w - 2) + '\u2510')
-    ),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u2502 Commands' + ' '.repeat(Math.max(0, w - 12)) + '\u2502')
-    ),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u2502 ' + (search || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + '\u2502')
-    ),
-    filtered.map((cmd, i) =>
-      h(Box, {
-        key: cmd.name, height: 1,
-        backgroundColor: i === idx ? hex.selectionBg : hex.bg,
-      },
-        h(Text, {
-          color: i === idx ? hex.selectionText : hex.text,
-          bold: i === idx,
-          backgroundColor: i === idx ? hex.selectionBg : hex.bg,
-        }, (i === idx ? '\u276F ' : '  ') + cmd.name + ' ' + cmd.desc)
-      )
-    ),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u2514' + '\u2500'.repeat(w - 2) + '\u2518')
-    ),
-    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/HeaderBar.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { hex, appGradient } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-export function HeaderBar({ model, provider, agentMode, thinking }) {
-  const { cols } = getLayout();
-  const m = model.replace(/^[^/]+\//, '').slice(0, Math.floor((cols - 20) / 2));
-  const status = thinking ? ' \u25CF' : ' \u25CB';
-  const mode = agentMode ? '\u25C8 AGENT' : '\u25CB USER';
-  const label = '[' + provider + '] ' + m + ' ' + status + ' ' + mode;
-  const labelLen = label.length + 14;
-  const gap = Math.max(1, cols - labelLen);
-
-  return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-    h(Text, { backgroundColor: hex.surfaceAlt }, appGradient(' CLARITY AI ')),
-    h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, ' '.repeat(gap) + label + ' ')
-  );
-}

package/src/components/InputBar.js

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { hex } from '../config/theme.js';
-import { getLayout } from '../config/layout.js';
-const { createElement: h } = React;
-
-export function InputBar({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
-  const [input, setInput] = useState('');
-  const [cursor, setCursor] = useState(0);
-  const { cols } = getLayout();
-  const w = Math.max(10, cols - 6);
-  const mShort = model.replace(/^[^/]+\//, '').slice(0, 16);
-
-  useInput((ch, key) => {
-    if (key.ctrl && key.p) { onSlash(); return; }
-    if (key.escape) { onSubmit('/exit'); return; }
-    if (key.return && !key.shift) {
-      if (input.trim()) { const t = input; setInput(''); setCursor(0); onSubmit(t); }
-      return;
-    }
-    if (key.return && key.shift) {
-      setInput(p => p.slice(0, cursor) + '\n' + p.slice(cursor));
-      setCursor(c => c + 1);
-      return;
-    }
-    if (key.backspace || key.delete) {
-      if (cursor > 0) { setInput(p => p.slice(0, cursor - 1) + p.slice(cursor)); setCursor(c => c - 1); }
-      return;
-    }
-    if (key.leftArrow && cursor > 0) { setCursor(c => c - 1); return; }
-    if (key.rightArrow && cursor < input.length) { setCursor(c => c + 1); return; }
-    if (key.home) { setCursor(0); return; }
-    if (key.end) { setCursor(input.length); return; }
-    if (ch && ch.length === 1 && ch.charCodeAt(0) >= 32) {
-      setInput(p => p.slice(0, cursor) + ch + p.slice(cursor));
-      setCursor(c => c + 1);
-    }
-  });
-
-  const isPlaceholder = !input && !thinking;
-
-  return h(Box, { flexDirection: 'column' },
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '  \u250C' + '\u2500'.repeat(Math.max(0, cols - 6)) + '\u2510')
-    ),
-    h(Box, { height: 1, backgroundColor: hex.bg },
-      h(Text, {
-        color: isPlaceholder ? hex.textMuted : hex.text,
-        backgroundColor: hex.bg,
-        wrap: 'truncate-end',
-      }, '  \u2502 ' + (input || (thinking ? '\u25CF processing...' : 'type a message...')) + ' ')
-    ),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '  \u2514' + '\u2500' + ' ' + provider + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '') + '  \u00B7  Ctrl+P')
-    )
-  );
-}

package/src/components/Layout.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Box } from 'ink';
-import { hex } from '../config/theme.js';
-import { HeaderBar } from './HeaderBar.js';
-import { MessageList } from './MessageList.js';
-import { InputBar } from './InputBar.js';
-import { CommandPicker } from './CommandPicker.js';
-import { ModelPicker } from './ModelPicker.js';
-const { createElement: h } = React;
-
-export function Layout({ state, streamContent, model, provider, showCommands, showModels, onCommandSelect, onModelSelect, onCloseCommands, onCloseModels, onSlash, onSubmit }) {
-  const picker = showCommands || showModels
-    ? h(Box, { position: 'absolute', top: 1, left: 2, backgroundColor: hex.bg, flexDirection: 'column' },
-        showCommands ? h(CommandPicker, { onSelect: onCommandSelect, onClose: onCloseCommands }) : null,
-        showModels ? h(ModelPicker, { onSelect: onModelSelect, onClose: onCloseModels }) : null
-      )
-    : null;
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, width: '100%', height: '100%' },
-    h(HeaderBar, { model, provider, agentMode: state.agentMode, thinking: state.thinking }),
-    h(Box, { flexGrow: 1, flexDirection: 'column', position: 'relative' },
-      h(MessageList, {
-        messages: state.messages, thinking: state.thinking,
-        streamContent, agentStatus: state.agentStatus,
-      }),
-      picker
-    ),
-    h(InputBar, { 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 } 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 }, '    \u25CF'),
-    h(Text, { color: hex.textDim, backgroundColor: hex.surface }, ' ' + (label || 'processing'))
-  );
-}

package/src/components/MessageList.js

@@ -1,92 +0,0 @@
-import React, { useMemo } from 'react';
-import { Box, Text } from 'ink';
-import { hex } 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 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 }, '    \u25C9 ' + (text || ''))
-      );
-    case 'sys_line':
-      return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-        h(Text, { color: hex.green, backgroundColor: hex.surfaceAlt }, '    \u25C9 ' + (text || ''))
-      );
-    case 'err_line':
-      return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-        h(Text, { color: hex.red, backgroundColor: hex.surfaceAlt }, '    \u2716 ' + (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 }) {
-  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 { slice, clipIndex, clipLines } = useMemo(
-    () => sliceToViewport(entries, viewport, contentWidth),
-    [entries, viewport, contentWidth]
-  );
-
-  const rawLines = useMemo(
-    () => buildLineArray(slice, clipIndex, clipLines, contentWidth),
-    [slice, clipIndex, clipLines, contentWidth]
-  );
-
-  const fillCount = Math.max(0, viewport - rawLines.length);
-  const padded = [];
-  for (let i = 0; i < fillCount; i++) padded.push({ type: 'empty' });
-  for (const ln of rawLines) padded.push(ln);
-
-  return h(Box, { height: viewport, flexDirection: 'column', overflow: 'hidden' },
-    padded.map((ln, i) => {
-      if (ln.type === 'empty') return h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg });
-      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,83 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Box, Text, useInput } from 'ink';
-import { ALL_MODELS } from '../config/models.js';
-import { hex } 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) 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.bg, width: w },
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u250C' + '\u2500'.repeat(w - 2) + '\u2510')
-    ),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u2502 Models  ' + flat.filter(m => !m._header).length + ' available' + ' '.repeat(Math.max(0, w - 18)) + '\u2502')
-    ),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u2502 ' + (search || '\u2026') + ' '.repeat(Math.max(0, w - 6)) + '\u2502')
-    ),
-    flat.map((m, i) => {
-      if (m._header) {
-        return h(Box, { key: 'h-' + m._provider, height: 1, backgroundColor: hex.surfaceAlt },
-          h(Text, { color: hex.blue, bold: true, backgroundColor: hex.surfaceAlt },
-            '\u2502 ' + m._provider.toUpperCase() + ' '.repeat(Math.max(0, w - m._provider.length - 5)) + '\u2502')
-        );
-      }
-      const isSel = i === idx;
-      return h(Box, {
-        key: m.id, height: 1,
-        backgroundColor: isSel ? hex.selectionBg : hex.bg,
-      },
-        h(Text, {
-          color: isSel ? hex.selectionText : hex.text,
-          bold: isSel,
-          backgroundColor: isSel ? hex.selectionBg : hex.bg,
-        }, (isSel ? '\u276F ' : '  ') + m.label + (m.badge ? ' [' + m.badge + ']' : ''))
-      );
-    }),
-    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-        '\u2514' + '\u2500'.repeat(w - 2) + '\u2518')
-    ),
-    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,27 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text } from 'ink';
-import { hex } from '../config/theme.js';
-const { createElement: h } = React;
-
-export function ThinkingBlock({ toolResults, duration, collapsed: initialCollapsed }) {
-  const [collapsed, setCollapsed] = useState(initialCollapsed !== undefined ? initialCollapsed : true);
-  const items = toolResults || [];
-  const durStr = duration
-    ? (duration < 1000 ? duration + 'ms' : (duration / 1000).toFixed(1) + 's')
-    : '';
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt },
-        '    ' + (collapsed ? '\u25B8' : '\u25BE') + ' Thought' + (durStr ? ' (' + durStr + ')' : ''))
-    ),
-    collapsed ? null : h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-      items.map((tr, i) =>
-        h(Box, { key: tr.execId || i, height: 1 },
-          h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-            '      ' + (i === items.length - 1 ? '\u2570\u2500' : '\u256D\u2500') + ' ' + (tr.status === 'failed' ? '\u2716' : '\u25C9') + ' ' + tr.name + (tr.duration ? ' ' + tr.duration + 'ms' : ''))
-        )
-      )
-    )
-  );
-}

package/src/components/ToolCard.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { hex } from '../config/theme.js';
-import { truncate } from '../config/layout.js';
-const { createElement: h } = React;
-
-export function ToolCard({ exec, isActive }) {
-  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;
-    return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: c, backgroundColor: hex.surfaceAlt }, '    ' + (status === 'failed' ? '\u2716' : '\u25C9') + ' ' + name + (dur ? '  ' + dur : ''))
-    );
-  }
-
-  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '    \u25C9 ' + name + (dur ? '  ' + dur : ''))
-    ),
-    args.length < 80
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, '      \u25B8 ' + truncate(args, 56))
-        )
-      : null,
-    status === 'running'
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.blue, backgroundColor: hex.surfaceAlt }, '      \u25CF running')
-        )
-      : null,
-  );
-}