clarity-ai 7.1.0 → 7.2.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ---
 
+## 7.2.1 (2026-06-06)
+
+### Critical hotfix: mouse bleed elimination, CLARITY branding, TrueColor textures
+- **FIXED input corruption**: Removed XTerm mouse tracking (`\x1b[?1000h`) entirely. Raw `\x1b[<0;54;41M` sequences no longer leak into the chat text buffer. Termux soft keyboard now works reliably without raw-mode conflicts.
+- **FIXED ASCII logo**: Replaced the figlet banner that rendered as "GLARITY" with a clean 5-line solid block matrix (`██████`) that unambiguously spells CLARITY. Three-tier sizing (5-line / 3-line compact / 1-line gradient).
+- **TrueColor panel textures**: Every message block, streaming pane, and popup container now uses explicit `#1C1C1C` graphite backgrounds. No naked terminal defaults. Orange `#FF9F43` full-width selection bar with `#000000` black text on all active popup rows.
+- **Stderr isolation maintained**: `console.log/error/warn` continue routing to `clarity-debug.log` to prevent stray backend traces from corrupting the UI layer.
+
+## 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

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,6 +54,8 @@ 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.exit(0);
@@ -56,7 +63,9 @@ async function main() {
 
   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[?25h\x1b[0m');
+  });
 
   await new Promise(() => {});
 }
@@ -65,7 +74,9 @@ main().catch(err => {
   console.log = originalLog;
   console.error = originalError;
   console.warn = originalWarn;
+  logFile.write('[FATAL] ' + (err?.message || String(err)) + '\n');
+  logFile.end();
   process.stdout.write('\x1b[?25h\x1b[0m');
-  console.error('\n\x1b[31mFatal error:\x1b[0m', err.message);
+  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.1.0",
+  "version": "7.2.1",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {

package/src/app.js

@@ -1,36 +1,47 @@
 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 { Banner } from './components/Banner.js';
 import { StatusBar } from './components/StatusBar.js';
 import { StreamView } from './components/StreamView.js';
-import { InputPanel } from './components/InputPanel.js';
+import { InputDock } from './components/InputDock.js';
+import { SlashPopup } from './components/SlashPopup.js';
 import { Footer } from './components/Footer.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;
+
+const COMMAND_ITEMS = [
+  { name: '/keys' }, { name: '/model' }, { name: '/provider' },
+  { name: '/agent' }, { name: '/stop' }, { name: '/clear' },
+  { name: '/export' }, { name: '/help' }, { name: '/exit' },
+];
+
+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');
 }
 
-function deriveStatus(state, streamContent) {
-  if (!state.thinking) return 'idle';
-  if (state.thinking && streamContent) return 'streaming';
-  return 'thinking';
+function getFiltered(input) {
+  const q = input.replace(/^\//, '').toLowerCase();
+  if (!q) return COMMAND_ITEMS;
+  return COMMAND_ITEMS.filter(c => c.name.includes(q));
 }
 
 export function App({ config }) {
@@ -39,7 +50,9 @@ export function App({ config }) {
   const [state, setState] = useState(() => createChatState());
   const [streamContent, setStreamContent] = useState('');
   const [thinkingStart, setThinkingStart] = useState(null);
-  const defaultModel = (config.model || 'groq/llama-3.3-70b-versatile').replace(/^[^/]+\//, '');
+  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');
 
@@ -50,29 +63,28 @@ export function App({ config }) {
   modelRef.current = model;
   providerRef.current = provider;
 
+  const rows = dims.rows;
+  const cols = dims.cols;
+  const bannerH = cols < 50 ? 2 : (cols < 60 ? 3 : 5);
+  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({ rows: process.stdout.rows || 30, cols: process.stdout.columns || 80 }); }
     process.stdout.on('resize', onResize);
     return () => process.stdout.removeListener('resize', onResize);
   }, []);
 
   useEffect(() => {
-    if (state.thinking && !thinkingStart) {
-      setThinkingStart(Date.now());
-    } else if (!state.thinking) {
-      setThinkingStart(null);
-    }
+    if (state.thinking && !thinkingStart) setThinkingStart(Date.now());
+    else if (!state.thinking) setThinkingStart(null);
   }, [state.thinking]);
 
-  const cols = dims.cols;
-  const rows = dims.rows;
-  const status = deriveStatus(state, streamContent);
-  const cardWidth = Math.min(cols - 4, 56);
-
-  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);
@@ -80,42 +92,83 @@ 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 === '/stop') { cancelStream(); return; }
+    if (val === '/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);
+  }
+
+  function handleInputChange(val) {
+    setInput(val);
+    if (val.startsWith('/')) setPopupIdx(0);
+  }
+
+  function handlePopupSelect(cmd) {
+    setInput('');
+    setPopupIdx(0);
+    if (cmd === '/exit') process.exit(0);
+    onCommand(cmd);
+  }
+
+  function closePopup() { setInput(''); setPopupIdx(0); }
+
+  useInput((ch, key) => {
+    if (!showPopup) return;
+    if (key.escape) { closePopup(); return; }
+    if (key.return) {
+      const filtered = getFiltered(input);
+      if (filtered[popupIdx]) handlePopupSelect(filtered[popupIdx].name);
+      return;
     }
+    if (key.upArrow) { setPopupIdx(i => Math.max(0, i - 1)); return; }
+    if (key.downArrow) {
+      const filtered = getFiltered(input);
+      setPopupIdx(i => Math.min(filtered.length - 1, i + 1));
+    }
+  });
+
+  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, width: POPUP_W })
+        )
+      : null,
+    h(InputDock, {
+      width: cardW, provider, model, agentMode: state.agentMode, status,
+      input, onInputChange: handleInputChange, onSubmit: handleSubmit,
+    }),
+    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: '100%', flexDirection: 'column', alignItems: 'center', backgroundColor: hex.bg },
-    h(Box, { flexGrow: 1, minHeight: 1 }),
+  return h(Box, { width: '100%', height: rows, flexDirection: 'column', alignItems: 'center', backgroundColor: hex.bg },
     h(Banner, { cols }),
     h(StatusBar, { status, thinkingStart }),
-    h(Box, { flexGrow: 2, width: cardWidth, minHeight: 2, flexDirection: 'column' },
-      h(StreamView, { messages: state.messages, streamContent, status, width: cardWidth })
+    h(Box, { flexGrow: 1, width: cardW, flexDirection: 'column', overflow: 'hidden' },
+      h(StreamView, { messages: state.messages, streamContent, status, maxLines: availLines, width: cardW })
     ),
-    h(Box, { height: 1 }),
-    h(InputPanel, {
-      width: cardWidth,
-      provider,
-      model,
-      agentMode: state.agentMode,
-      status,
-      onSubmit: handleInputSubmit,
-    }),
-    h(Box, { flexGrow: 1, minHeight: 1 }),
-    h(Footer, { cols })
+    bottomArea
   );
 }

package/src/components/Banner.js

@@ -3,22 +3,18 @@ import { Box, Text } from 'ink';
 import { appGradient } from '../config/theme.js';
 const { createElement: h } = React;
 
-const BANNER_FULL = [
-  ' ██████╗██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
-  '██╔════╝██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
-  '██║  ███╗██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
-  '██║   ██║██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
-  '╚██████╔╝███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
-  ' ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+const BANNER = [
+  '██████  ██       █████  ██████  ██ ████████ ██    ██',
+  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
+  '██       ██      ███████ ██████  ██    ██      ████',
+  '██       ██      ██   ██ ██   ██ ██    ██       ██',
+  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
 ];
 
-const BANNER_MED = [
-  '██████╗ ██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
-  '██╔════╝ ██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
-  '███████╗ ██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
-  '╚════██║ ██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
-  '██████╔╝ ███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
-  '╚═════╝  ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+const BANNER_COMPACT = [
+  '██████  ██       █████  ██████  ██ ████████ ██    ██',
+  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
+  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
 ];
 
 export function Banner({ cols }) {
@@ -28,10 +24,9 @@ export function Banner({ cols }) {
     );
   }
 
-  const lines = cols < 60 ? BANNER_MED : BANNER_FULL;
-  const bannerHeight = lines.length;
+  const lines = cols < 60 ? BANNER_COMPACT : BANNER;
 
-  return h(Box, { height: bannerHeight, width: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' },
+  return h(Box, { height: lines.length, 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/{InputPanel.js → InputDock.js}

@@ -1,38 +1,28 @@
-import React, { useState } from 'react';
+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 InputPanel({ width, provider, model, agentMode, status, onSubmit }) {
-  const [input, setInput] = useState('');
+export function InputDock({ width, provider, model, agentMode, status, input, onInputChange, onSubmit }) {
   const isLocked = status !== 'idle';
   const mShort = model.replace(/^[^/]+\//, '').slice(0, 18);
-  const innerW = Math.max(4, width - 4);
-
-  function handleSubmit(value) {
-    const trimmed = value.trim();
-    if (!trimmed) return;
-    onSubmit(trimmed);
-    setInput('');
-  }
 
   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: setInput,
-        onSubmit: handleSubmit,
+        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 + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '') +
-        ' '.repeat(Math.max(0, innerW - provider.length - mShort.length - (agentMode ? 10 : 4))) +
-        (isLocked ? '' : ''))
+        (provider || 'groq') + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '')
+      )
     ),
     h(Box, { height: 1, backgroundColor: hex.cardBg }),
   );

package/src/components/SlashPopup.js

@@ -0,0 +1,57 @@
+import React, { 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, 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 label = (cmd, i) => {
+    const sel = i === selectedIdx;
+    const text = '  ' + cmd.name + '  ' + cmd.desc;
+    return text.length > innerW ? text.slice(0, innerW - 2) + '\u2026' : text;
+  };
+
+  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.cardBg },
+    h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '  ' + (search || '/') + ' '.repeat(Math.max(0, innerW - (search || '/').length)))
+    ),
+    filtered.map((cmd, i) =>
+      h(Box, {
+        key: cmd.name,
+        height: 1,
+        backgroundColor: i === selectedIdx ? hex.orange : hex.cardBg,
+      },
+        h(Text, {
+          color: i === selectedIdx ? '#000000' : hex.text,
+          bold: i === selectedIdx,
+          backgroundColor: i === selectedIdx ? hex.orange : hex.cardBg,
+        }, label(cmd, i))
+      )
+    ),
+    filtered.length === 0
+      ? h(Box, { height: 1, backgroundColor: hex.cardBg },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, '  No matching commands'))
+      : null,
+  );
+}

package/src/components/StreamView.js

@@ -1,103 +1,118 @@
-import React, { useMemo, useRef, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { hex } from '../config/theme.js';
 import wrapAnsi from 'wrap-ansi';
-import stringWidth from 'string-width';
 const { createElement: h } = React;
 
-function wrapText(text, width) {
+function lineCount(text, width) {
+  if (!text) return 1;
+  return wrapAnsi(String(text), Math.max(4, width), { trim: false, hard: true }).split('\n').length;
+}
+
+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 wrap(text, width) {
   if (!text) return [];
   return wrapAnsi(String(text), Math.max(4, width), { trim: false, hard: true }).split('\n');
 }
 
-function MessageBlock({ msg, width }) {
-  const lines = useMemo(() => wrapText(msg.content, width), [msg.content, width]);
+function RoleIcon({ 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 MsgBlock({ msg, width }) {
+  const lines = useMemo(() => wrap(msg.content, width), [msg.content, width]);
+  const bg = msg.role === 'user' ? hex.surface : hex.cardBg;
 
-  switch (msg.role) {
-    case 'user':
-      return h(Box, { flexDirection: 'column', marginBottom: 0 },
-        h(Box, { height: 1 },
-          h(Text, { color: hex.orange, bold: true }, '  \u276F '),
-          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)
-          )
+  return h(Box, { flexDirection: 'column', backgroundColor: bg },
+    h(Box, { height: 1, backgroundColor: bg },
+      h(RoleIcon, { role: msg.role }),
+      h(Text, { color: hex.text, backgroundColor: bg }, lines[0] || '')
+    ),
+    lines.slice(1).map((l, i) =>
+      h(Box, { key: i, height: 1, backgroundColor: bg },
+        h(Text, { color: hex.text, backgroundColor: bg }, '    ' + l)
+      )
+    ),
+    msg.role === 'assistant' && msg.duration
+      ? h(Box, { height: 1, backgroundColor: bg },
+          h(Text, { color: hex.textMuted, backgroundColor: bg },
+            '    ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
         )
-      );
-    case 'assistant':
-      return h(Box, { flexDirection: 'column', marginBottom: 1 },
-        h(Box, { height: 1 },
-          h(Text, { color: hex.purple, bold: true }, '  \u25C6 '),
-          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.duration
-          ? h(Box, { height: 1 },
-              h(Text, { color: hex.textMuted }, '    ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
-            )
-          : null
-      );
-    case 'system':
-      return h(Box, { height: 1 },
-        h(Text, { color: hex.blue }, '  \u25C9 ' + lines[0] || '')
-      );
-    case 'tool':
-      return h(Box, { height: 1 },
-        h(Text, { color: hex.green }, '    \u25C9 ' + (msg.toolName || 'tool') + (msg.duration ? ' ' + msg.duration + 'ms' : ''))
-      );
-    case 'error':
-      return h(Box, { height: 1 },
-        h(Text, { color: hex.red }, '  \u2716 ' + lines[0] || msg.content)
-      );
-    default:
-      return null;
-  }
+      : null
+  );
 }
 
 function StreamingBlock({ content, width }) {
-  const lines = useMemo(() => wrapText(content, width), [content, width]);
-  const visible = lines.slice(-100);
-  const first = visible[0] || '';
-
-  return h(Box, { flexDirection: 'column' },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.blue, bold: true }, '  \u25CF '),
-      h(Text, { color: hex.text }, first)
+  const lines = useMemo(() => wrap(content, width), [content, width]);
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.cardBg },
+    h(Box, { height: 1, backgroundColor: hex.cardBg },
+      h(Text, { color: hex.blue, bold: true, backgroundColor: hex.cardBg }, '\u25CF '),
+      h(Text, { color: hex.text, backgroundColor: hex.cardBg }, lines[0] || '')
     ),
-    visible.slice(1).map((l, i) =>
-      h(Box, { key: i, height: 1 },
-        h(Text, { color: hex.text }, '    ' + l)
+    lines.slice(1).map((l, i) =>
+      h(Box, { key: i, height: 1, backgroundColor: hex.cardBg },
+        h(Text, { color: hex.text, backgroundColor: hex.cardBg }, '    ' + l)
       )
     )
   );
 }
 
-export function StreamView({ messages, streamContent, status, width }) {
-  const contentW = Math.max(4, width - 2);
+export function StreamView({ messages, streamContent, status, maxLines, width }) {
+  const cw = Math.max(4, width - 2);
 
-  const displayMessages = useMemo(() => {
+  const visible = useMemo(() => {
     if (messages.length === 0) {
       return [{ id: 'welcome', role: 'system', content: 'CLARITY AI ready  \u00B7  /help for commands' }];
     }
-    return messages;
-  }, [messages]);
+
+    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]);
+    }
+
+    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 },
-    displayMessages.map(m =>
-      h(MessageBlock, { key: m.id, msg: m, width: contentW })
-    ),
+    visible.map(m => h(MsgBlock, { key: m.id, msg: m, width: cw })),
     (status === 'streaming' || status === 'thinking') && streamContent
-      ? h(StreamingBlock, { content: streamContent, width: contentW })
+      ? h(StreamingBlock, { content: streamContent, width: cw })
       : null,
     status === 'thinking' && !streamContent
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textMuted }, '  \u25CF processing...')
+      ? h(Box, { height: 1, backgroundColor: hex.cardBg },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, '  \u25CF processing...')
         )
       : null,
   );