clarity-ai 7.0.0 → 7.2.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ---
 
+## 7.2.0 (2026-06-06)
+
+### Sticky floating overlay engine — touch selection, phase-driven layout, virtualized log
+- **XTerm SGR mouse tracking**: `\x1b[?1000h\x1b[?1006h` on boot, full cleanup on exit. Parses `\x1b[<code;col;rowM` sequences to map terminal grid clicks to popup items.
+- **Phase-driven layout transition**: `initial` (centered logo + input, `justifyContent: center`) → `chat` (banner at top, messages flex-grow, dock hard-locked to bottom). Triggers instantly on first user/assistant message.
+- **Solid sticky bottom dock**: hard-locked 4-row InputDock at `rows - 4`. Graphite `#1C1C1C` fill with orange `#FF9F43` accent bar. Never slides or bounces during streaming.
+- **Virtualized viewport**: `StreamView` measures each message's line count via `wrap-ansi` against current width. Slices message array to `rows - bannerH - statusH - dockH - footerH`. Pushes old lines off render block when overflowed.
+- **Slash-command floating popup**: Absolute-positioned overlay above input dock. Auto-opens when input starts with `/`. Orange `#FF9F43` full-width selection bar with black text. Arrow-key navigation + mouse click selection.
+- **Stderr log routing**: All `console.log/error/warn` redirected to `clarity-debug.log` file to prevent stray async output from corrupting the UI layer.
+- **Concurrency lock**: Input disabled during `THINKING`/`STREAMING` states; keyboard fully captured until idle.
+
+## 7.1.0 (2026-06-06)
+
+### Premium UI/UX overhaul — high-texture capsule design with live streaming
+- **Massive ASCII art banner**: 6-line figlet-style "CLARITY" in orange→purple→blue gradient (auto-falls back for narrow terminals)
+- **Solid Ink capsule cards**: zero wire borders (`|`, `[`, `]`, `-` banned). All containers use `backgroundColor` blocks with graphite (#1C1C1C) surfaces
+- **Orange accent selection**: `#FF9F43` full-width highlight bars with black text for all active/focus elements
+- **State machine**: `IDLE` → `THINKING` (live elapsed counter in ms) → `STREAMING` — each with distinct badge coloring
+- **Live token streaming**: every chunk runs through `wrap-ansi` + `string-width` against current terminal width; no pre-packaged truncation
+- **Dynamic viewport hardening**: `process.stdout.on('resize')` tracks live dimensions; auto-scrolls old content up while keeping input anchored
+
 ## 7.0.0 (2026-06-06)
 
 ### Ground-up architectural rebuild — centered minimalist terminal platform

package/bin/clarity.js

@@ -4,10 +4,12 @@ import { render } from 'ink';
 import { App } from '../src/app.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
+import { createWriteStream } from 'fs';
 
 process.stdin.resume();
 process.stdin.setEncoding('utf8');
 
+const logFile = createWriteStream('clarity-debug.log', { flags: 'a' });
 const originalLog = console.log;
 const originalError = console.error;
 const originalWarn = console.warn;
@@ -28,15 +30,18 @@ async function main() {
     process.stdin.resume();
   }
 
-  console.log = function sandboxedLog() {};
-  console.error = function sandboxedError() {};
-  console.warn = function sandboxedWarn() {};
+  console.log = (...args) => logFile.write('[LOG] ' + args.map(String).join(' ') + '\n');
+  console.error = (...args) => logFile.write('[ERR] ' + args.map(String).join(' ') + '\n');
+  console.warn = (...args) => logFile.write('[WARN] ' + args.map(String).join(' ') + '\n');
 
   let keepAlive;
 
-  const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
+  const config = {
+    provider,
+    model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile',
+  };
 
-  const { clear, waitUntilExit } = render(React.createElement(App, { config }), {
+  const { clear } = render(React.createElement(App, { config }), {
     fullscreen: true,
     patchConsole: false,
     exitOnCtrlC: false,
@@ -49,14 +54,18 @@ async function main() {
     console.log = originalLog;
     console.error = originalError;
     console.warn = originalWarn;
+    logFile.write('[CLEANUP] CLARITY exiting\n');
+    logFile.end();
     try { clear(); } catch {}
-    process.stdout.write('\x1b[?25h\x1b[0m');
+    process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
     process.exit(0);
   }
 
   process.on('SIGINT', () => cleanup());
   process.on('SIGTERM', () => cleanup());
-  process.on('exit', () => { process.stdout.write('\x1b[?25h\x1b[0m'); });
+  process.on('exit', () => {
+    process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+  });
 
   await new Promise(() => {});
 }
@@ -65,7 +74,9 @@ main().catch(err => {
   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);
+  logFile.write('[FATAL] ' + (err?.message || String(err)) + '\n');
+  logFile.end();
+  process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+  console.error('\n\x1b[31mFatal error:\x1b[0m', err?.message || err);
   process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {
@@ -28,7 +28,6 @@
     "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

@@ -1,29 +1,36 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Box, Text, useStdout } from 'ink';
+import { Box, useStdout, useInput } 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 { Banner } from './components/Banner.js';
+import { StatusBar } from './components/StatusBar.js';
 import { StreamView } from './components/StreamView.js';
-import { PromptCard } from './components/PromptCard.js';
+import { InputDock } from './components/InputDock.js';
+import { SlashPopup } from './components/SlashPopup.js';
 import { Footer } from './components/Footer.js';
+import { useMouse } from './hooks/useMouse.js';
 const { createElement: h } = React;
 
 let abortController = null;
 
-export function getAbortController() {
-  return abortController;
+export function getAbortController() { return abortController; }
+export function setAbortController(ac) { abortController = ac; }
+export function cancelStream() {
+  if (abortController) { try { abortController.abort(); } catch {} abortController = null; }
 }
 
-export function setAbortController(ac) {
-  abortController = ac;
+const DOCK_H = 4;
+const FOOTER_H = 2;
+const STATUS_H = 1;
+const POPUP_W = 44;
+
+function deriveStatus(state, sc) {
+  if (!state.thinking) return 'idle';
+  return sc ? 'streaming' : 'thinking';
 }
 
-export function cancelStream() {
-  if (abortController) {
-    try { abortController.abort(); } catch {}
-    abortController = null;
-  }
+function hasRealMessages(msgs) {
+  return msgs.some(m => m.role === 'user' || m.role === 'assistant');
 }
 
 export function App({ config }) {
@@ -31,7 +38,10 @@ export function App({ config }) {
   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 [thinkingStart, setThinkingStart] = useState(null);
+  const [input, setInput] = useState('');
+  const [popupIdx, setPopupIdx] = useState(0);
+  const defaultModel = (config.model || '').replace(/^[^/]+\//, '') || 'llama-3.3-70b-versatile';
   const [model, setModel] = useState(defaultModel);
   const [provider, setProvider] = useState(config.provider || 'groq');
 
@@ -42,22 +52,28 @@ export function App({ config }) {
   modelRef.current = model;
   providerRef.current = provider;
 
+  const rows = dims.rows;
+  const cols = dims.cols;
+  const bannerH = cols < 50 ? 2 : 6;
+  const status = deriveStatus(state, streamContent);
+  const isChat = hasRealMessages(state.messages);
+  const cardW = Math.min(cols - 4, 56);
+  const showPopup = input.startsWith('/') && status === 'idle';
+  const availLines = Math.max(2, rows - bannerH - STATUS_H - DOCK_H - FOOTER_H - 2);
+
   useEffect(() => {
-    function onResize() {
-      setDims({ rows: process.stdout.rows || 30, cols: process.stdout.columns || 80 });
-    }
+    function onResize() { setDims({ r: process.stdout.rows || 30, c: 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;
+  useEffect(() => {
+    if (state.thinking && !thinkingStart) setThinkingStart(Date.now());
+    else if (!state.thinking) setThinkingStart(null);
+  }, [state.thinking]);
 
-  const onSubmit = useCallback(async (input) => {
-    if (input === '/exit') { process.exit(0); return; }
+  const onSubmit = useCallback(async (val) => {
+    if (val === '/exit') { process.exit(0); return; }
     cancelStream();
     const ac = new AbortController();
     setAbortController(ac);
@@ -65,41 +81,104 @@ export function App({ config }) {
       setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
       setStreamContent('');
     });
-    await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent, ac.signal);
+    await handleSend(stateRef.current, setState, val, 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);
+  const onCommand = useCallback(async (val) => {
+    if (val.startsWith('/stop')) { cancelStream(); return; }
+    if (val.startsWith('/exit')) { process.exit(0); return; }
+    await handleCommand(val, 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);
-    }
+  function handleSubmit(val) {
+    const t = val.trim();
+    if (!t) return;
+    setInput('');
+    setPopupIdx(0);
+    if (t.startsWith('/')) onCommand(t);
+    else onSubmit(t);
   }
 
-  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,
+  function handleInputChange(val) {
+    setInput(val);
+    if (val.startsWith('/')) setPopupIdx(0);
+  }
+
+  function handlePopupSelect(cmd) {
+    setInput('');
+    setPopupIdx(0);
+    if (cmd === '/exit') process.exit(0);
+    if (cmd === '/stop') { cancelStream(); return; }
+    onCommand(cmd);
+  }
+
+  function closePopup() { setInput(''); setPopupIdx(0); }
+
+  useInput((ch, key) => {
+    if (!showPopup) return;
+    if (key.escape) { closePopup(); return; }
+    if (key.return) {
+      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
+      const q = input.replace(/^\//, '').toLowerCase();
+      const filtered = q ? COMMANDS.filter(c => c.name.includes(q)) : COMMANDS;
+      if (filtered[popupIdx]) handlePopupSelect(filtered[popupIdx].name);
+      return;
+    }
+    if (key.upArrow) { setPopupIdx(i => Math.max(0, i - 1)); return; }
+    if (key.downArrow) {
+      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
+      const q = input.replace(/^\//, '').toLowerCase();
+      const filtered = q ? COMMANDS.filter(c => c.name.includes(q)) : COMMANDS;
+      setPopupIdx(i => Math.min(filtered.length - 1, i + 1));
+    }
+  });
+
+  const handleClick = useCallback(({ col, row }) => {
+    if (!showPopup) return;
+    const popupLeft = Math.floor((cols - POPUP_W) / 2) + 1;
+    const popupH = 1 + 9 + 1;
+    const popupTop = rows - DOCK_H - FOOTER_H - popupH;
+    if (col >= popupLeft && col < popupLeft + POPUP_W && row >= popupTop && row < popupTop + popupH) {
+      const itemRow = row - popupTop - 1;
+      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
+      if (itemRow >= 0 && itemRow < COMMANDS.length) {
+        handlePopupSelect(COMMANDS[itemRow].name);
+      }
+    }
+  }, [showPopup, cols, rows]);
+
+  useMouse(handleClick);
+
+  const bottomArea = h(Box, { flexDirection: 'column', alignItems: 'center', width: '100%' },
+    showPopup
+      ? h(Box, { position: 'absolute', bottom: DOCK_H + FOOTER_H, alignItems: 'center', width: '100%' },
+          h(SlashPopup, { search: input, selectedIdx: popupIdx, onHover: setPopupIdx, width: POPUP_W })
+        )
+      : null,
+    h(InputDock, {
+      width: cardW, provider, model, agentMode: state.agentMode, status,
+      input, onInputChange: handleInputChange, onSubmit: handleSubmit,
     }),
-    h(Box, { flexGrow: 1, minHeight: 1 }),
     h(Footer, { cols })
   );
+
+  if (!isChat) {
+    return h(Box, { width: '100%', height: rows, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: hex.bg },
+      h(Box, { flexDirection: 'column', alignItems: 'center', width: cardW },
+        h(Banner, { cols }),
+        h(StatusBar, { status, thinkingStart }),
+        h(Box, { height: 1 }),
+        bottomArea
+      )
+    );
+  }
+
+  return h(Box, { width: '100%', height: rows, flexDirection: 'column', alignItems: 'center', backgroundColor: hex.bg },
+    h(Banner, { cols }),
+    h(StatusBar, { status, thinkingStart }),
+    h(Box, { flexGrow: 1, width: cardW, flexDirection: 'column', overflow: 'hidden' },
+      h(StreamView, { messages: state.messages, streamContent, status, maxLines: availLines, width: cardW })
+    ),
+    bottomArea
+  );
 }

package/src/components/Banner.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { appGradient } from '../config/theme.js';
+const { createElement: h } = React;
+
+const BANNER_FULL = [
+  ' ██████╗██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
+  '██╔════╝██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
+  '██║  ███╗██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
+  '██║   ██║██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
+  '╚██████╔╝███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
+  ' ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+];
+
+const BANNER_MED = [
+  '██████╗ ██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
+  '██╔════╝ ██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
+  '███████╗ ██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
+  '╚════██║ ██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
+  '██████╔╝ ███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
+  '╚═════╝  ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+];
+
+export function Banner({ cols }) {
+  if (cols < 50) {
+    return h(Box, { height: 2, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Text, { bold: true }, appGradient('CLARITY'))
+    );
+  }
+
+  const lines = cols < 60 ? BANNER_MED : BANNER_FULL;
+  const bannerHeight = lines.length;
+
+  return h(Box, { height: bannerHeight, width: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' },
+    lines.map((line, i) =>
+      h(Box, { key: i, height: 1 },
+        h(Text, { bold: true }, appGradient.multiline(line))
+      )
+    )
+  );
+}

package/src/components/Footer.js

@@ -4,19 +4,20 @@ import { hex } from '../config/theme.js';
 const { createElement: h } = React;
 
 export function Footer({ cols }) {
-  const showFull = cols >= 60;
+  const showFull = cols >= 58;
   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(Box, { height: 1, justifyContent: 'flex-end', paddingRight: 2, backgroundColor: hex.bg },
       h(Text, { color: hex.textMuted }, keybindText)
     ),
-    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2 },
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.bg },
       h(Text, { color: hex.textDim },
         '\u2580 ',
-        h(Text, { color: hex.blue }, 'Tip'),
-        h(Text, { color: hex.textDim }, ': ' + (showFull ? tipText : 'Use /help for commands'))
+        h(Text, { color: hex.orange }, 'Tip'),
+        h(Text, { color: hex.textDim }, ': ' + (showFull
+          ? 'Use /help to view system commands and switch active models'
+          : 'Use /help for commands'))
       )
     )
   );

package/src/components/InputDock.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+export function InputDock({ width, provider, model, agentMode, status, input, onInputChange, onSubmit }) {
+  const isLocked = status !== 'idle';
+  const mShort = model.replace(/^[^/]+\//, '').slice(0, 18);
+
+  return h(Box, { width, flexDirection: 'column', backgroundColor: hex.cardBg },
+    h(Box, { height: 1, backgroundColor: hex.orange }),
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
+      h(TextInput, {
+        value: input,
+        onChange: onInputChange,
+        onSubmit,
+        placeholder: 'Ask anything...',
+        focus: !isLocked,
+      })
+    ),
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
+      h(Text, { color: hex.textMuted },
+        (provider || 'groq') + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '')
+      )
+    ),
+    h(Box, { height: 1, backgroundColor: hex.cardBg }),
+  );
+}

package/src/components/SlashPopup.js

@@ -0,0 +1,55 @@
+import React, { useState, useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.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 SlashPopup({ search, selectedIdx, onHover, width }) {
+  const filtered = useMemo(() => {
+    const q = search.replace(/^\//, '').toLowerCase();
+    if (!q) return COMMANDS;
+    return COMMANDS.filter(c =>
+      c.name.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
+    );
+  }, [search]);
+
+  const innerW = Math.max(10, width - 4);
+  const itemLabel = (cmd, i) => {
+    const sel = i === selectedIdx;
+    const label = '  ' + cmd.name + '  ' + cmd.desc;
+    return label.length > innerW ? label.slice(0, innerW - 2) + '\u2026' : label;
+  };
+
+  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.surface },
+    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+      h(Text, { color: hex.textMuted }, '  ' + (search || '/') + ' '.repeat(Math.max(0, innerW - (search || '/').length)))
+    ),
+    filtered.map((cmd, i) =>
+      h(Box, {
+        key: cmd.name,
+        height: 1,
+        backgroundColor: i === selectedIdx ? hex.orange : 'transparent',
+      },
+        h(Text, {
+          color: i === selectedIdx ? '#000000' : hex.text,
+          bold: i === selectedIdx,
+        }, itemLabel(cmd, i))
+      )
+    ),
+    filtered.length === 0
+      ? h(Box, { height: 1 },
+          h(Text, { color: hex.textMuted }, '  No matching commands'))
+      : null,
+  );
+}

package/src/components/StatusBar.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+export function StatusBar({ status, thinkingStart }) {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (status === 'idle') { setElapsed(0); return; }
+    const id = setInterval(() => {
+      setElapsed(thinkingStart ? Date.now() - thinkingStart : 0);
+    }, 100);
+    return () => clearInterval(id);
+  }, [status, thinkingStart]);
+
+  const isThinking = status === 'thinking';
+  const isStreaming = status === 'streaming';
+
+  if (status === 'idle') {
+    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+        h(Text, { color: hex.textMuted }, '  IDLE  ')
+      )
+    );
+  }
+
+  if (isThinking) {
+    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+        h(Text, { color: hex.orange }, '  \u25CF THINKING ' + elapsed + 'ms  ')
+      )
+    );
+  }
+
+  if (isStreaming) {
+    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+        h(Text, { color: hex.blue }, '  \u25CF STREAMING ' + elapsed + 'ms  ')
+      )
+    );
+  }
+
+  return null;
+}

package/src/components/StreamView.js

@@ -2,76 +2,116 @@ 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 lineCount(text, width) {
+  if (!text) return 1;
+  return wrapAnsi(String(text), Math.max(4, width), { trim: false, hard: true }).split('\n').length;
 }
 
-function trunc(text, width) {
-  return cliTruncate(text || '', Math.max(1, width), { position: 'end' });
+function measure(msg, width) {
+  const cw = Math.max(4, width);
+  if (msg.role === 'user') return 1 + lineCount(msg.content, cw);
+  if (msg.role === 'assistant') return 1 + lineCount(msg.content, cw) + (msg.duration ? 1 : 0);
+  if (msg.role === 'tool') return 1;
+  if (msg.role === 'system' || msg.role === 'error') return 1;
+  return 1;
 }
 
-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 wrap(text, width) {
+  if (!text) return [];
+  return wrapAnsi(String(text), Math.max(4, width), { trim: false, hard: true }).split('\n');
+}
+
+function MsgRole({ role }) {
+  switch (role) {
+    case 'user': return h(Text, { color: hex.orange, bold: true }, '\u276F ');
+    case 'assistant': return h(Text, { color: hex.purple, bold: true }, '\u25C6 ');
+    case 'system': return h(Text, { color: hex.blue }, '\u25C9 ');
+    case 'error': return h(Text, { color: hex.red }, '\u2716 ');
+    case 'tool': return h(Text, { color: hex.green }, '\u25C9 ');
+    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))
+function MsgBlock({ msg, width }) {
+  const lines = useMemo(() => wrap(msg.content, width), [msg.content, width]);
+
+  return h(Box, { flexDirection: 'column' },
+    h(Box, { height: 1 },
+      h(MsgRole, { role: msg.role }),
+      h(Text, { color: hex.text }, lines[0] || '')
+    ),
+    lines.slice(1).map((l, i) =>
+      h(Box, { key: i, height: 1 },
+        h(Text, { color: hex.text }, '    ' + l)
+      )
+    ),
+    msg.role === 'assistant' && msg.duration
+      ? h(Box, { height: 1 },
+          h(Text, { color: hex.textMuted },
+            '    ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
+        )
+      : null
   );
 }
 
-export function StreamView({ messages, streamContent, thinking, width }) {
-  const contentW = Math.max(1, width - 2);
+function StreamingBlock({ content, width }) {
+  const lines = useMemo(() => wrap(content, width), [content, width]);
+  return h(Box, { flexDirection: 'column' },
+    h(Box, { height: 1 },
+      h(Text, { color: hex.blue, bold: true }, '\u25CF '),
+      h(Text, { color: hex.text }, lines[0] || '')
+    ),
+    lines.slice(1).map((l, i) =>
+      h(Box, { key: i, height: 1 },
+        h(Text, { color: hex.text }, '    ' + l)
+      )
+    )
+  );
+}
+
+export function StreamView({ messages, streamContent, status, maxLines, width }) {
+  const cw = Math.max(4, width - 2);
 
-  const visibleMessages = useMemo(() => {
+  const visible = useMemo(() => {
     if (messages.length === 0) {
-      return [{ id: 'empty', role: 'system', content: 'CLARITY AI ready  \u00B7  Ctrl+P commands  \u00B7  /help' }];
+      return [{ id: 'welcome', role: 'system', content: 'CLARITY AI ready  \u00B7  /help for commands' }];
+    }
+
+    let avail = maxLines;
+    const result = [];
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const needed = measure(messages[i], cw);
+      if (needed > avail) {
+        if (result.length === 0 && needed > avail) {
+          result.unshift(messages[i]);
+        }
+        break;
+      }
+      avail -= needed;
+      result.unshift(messages[i]);
     }
-    return messages.slice(-20);
-  }, [messages]);
+
+    if (streamContent && (status === 'streaming' || status === 'thinking')) {
+      const streamNeeded = 1 + lineCount(streamContent, cw);
+      while (streamNeeded > avail && result.length > 0) {
+        avail += measure(result[0], cw);
+        result.shift();
+      }
+    }
+
+    return result;
+  }, [messages, streamContent, status, maxLines, cw]);
 
   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 })
+    visible.map(m => h(MsgBlock, { key: m.id, msg: m, width: cw })),
+    (status === 'streaming' || status === 'thinking') && streamContent
+      ? h(StreamingBlock, { content: streamContent, width: cw })
       : null,
-    thinking && !streamContent
+    status === 'thinking' && !streamContent
       ? h(Box, { height: 1 },
-          h(Text, { color: hex.blue }, '  \u25CF processing...')
+          h(Text, { color: hex.textMuted }, '  \u25CF processing...')
         )
       : null,
   );

package/src/config/theme.js

@@ -2,33 +2,37 @@ import chalk from 'chalk';
 import gradient from 'gradient-string';
 
 export const hex = {
-  bg: '#0A0A14',
-  surface: '#111125',
-  surfaceAlt: '#161630',
-  userBg: '#140A28',
-  codeBg: '#0D0D18',
-  selectionBg: '#FF6B35',
-  selectionText: '#FFFFFF',
-  accent: '#FF6B35',
+  bg: '#0D0D14',
+  surface: '#111118',
+  surfaceAlt: '#16161E',
+  cardBg: '#1C1C1C',
+  inputBg: '#1A1A22',
+  codeBg: '#0D0D14',
+  selectionBg: '#FF9F43',
+  selectionText: '#000000',
+  accent: '#FF9F43',
+  orange: '#FF9F43',
   purple: '#A855F7',
   green: '#22C55E',
   red: '#EF4444',
   gold: '#F59E0B',
   blue: '#3B82F6',
   cyan: '#22D3EE',
-  text: '#EAEAEE',
-  textDim: '#8888AA',
-  textMuted: '#555577',
+  text: '#EEEEF0',
+  textDim: '#9999AA',
+  textMuted: '#555566',
 };
 
 export const color = {
   bg: chalk.hex(hex.bg),
   surface: chalk.hex(hex.surface),
   surfaceAlt: chalk.hex(hex.surfaceAlt),
-  userBg: chalk.hex(hex.userBg),
+  cardBg: chalk.hex(hex.cardBg),
+  inputBg: chalk.hex(hex.inputBg),
   selectionBg: chalk.hex(hex.selectionBg),
   selectionText: chalk.hex(hex.selectionText),
   accent: chalk.hex(hex.accent),
+  orange: chalk.hex(hex.orange),
   purple: chalk.hex(hex.purple),
   green: chalk.hex(hex.green),
   red: chalk.hex(hex.red),
@@ -40,4 +44,4 @@ export const color = {
   textMuted: chalk.hex(hex.textMuted),
 };
 
-export const appGradient = gradient(['#FF6B35', '#3B82F6']);
+export const appGradient = gradient(['#FF9F43', '#A855F7', '#3B82F6']);

package/src/hooks/useMouse.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import { useStdin } from 'ink';
+
+export function useMouse(handler) {
+  const { stdin } = useStdin();
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => {
+    process.stdout.write('\x1b[?1000h\x1b[?1006h');
+
+    function onData(chunk) {
+      const str = typeof chunk === 'string' ? chunk : Buffer.from(chunk).toString('utf8');
+
+      const sgr = str.match(/\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
+      if (sgr) {
+        const code = parseInt(sgr[1]);
+        const col = parseInt(sgr[2]);
+        const row = parseInt(sgr[3]);
+        const press = sgr[4] === 'M';
+        if (press && handlerRef.current) {
+          handlerRef.current({ col, row, button: code & 3 });
+        }
+        return;
+      }
+
+      const legacy = str.match(/\x1b\[M(.{3})/);
+      if (legacy) {
+        const chars = legacy[1];
+        const cb = chars.charCodeAt(0) - 32;
+        const col = chars.charCodeAt(1) - 32;
+        const row = chars.charCodeAt(2) - 32;
+        if (handlerRef.current) {
+          handlerRef.current({ col, row, button: cb & 3 });
+        }
+      }
+    }
+
+    stdin.on('data', onData);
+    return () => {
+      stdin.removeListener('data', onData);
+      process.stdout.write('\x1b[?1000l\x1b[?1006l');
+    };
+  }, [stdin]);
+}

package/src/components/Header.js

@@ -1,11 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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')
-    ),
-  );
-}