clarity-ai 5.1.0 → 6.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "5.1.0",
-  "description": "Premium OpenCode-style terminal AI agent — streaming, tools, multiline composer, virtual scroll, code blocks",
+  "version": "6.0.0",
+  "description": "Premium OpenCode-style terminal AI agent — 24-bit TrueColor theme, 8s timeout recovery, virtual scroll, inline tool trees, collapsible thought cards",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"
@@ -15,11 +15,17 @@
   "dependencies": {
     "ink": "^5",
     "react": "^18",
-    "ink-text-input": "^6.0.0",
     "ink-spinner": "^5",
     "ink-big-text": "^2",
     "ink-gradient": "^3",
     "marked": "^12",
-    "cli-highlight": "^2"
+    "cli-highlight": "^2",
+    "chalk": "^5",
+    "ansi-escapes": "^7",
+    "cli-cursor": "^5",
+    "wrap-ansi": "^9",
+    "strip-ansi": "^7",
+    "string-width": "^7",
+    "picocolors": "^1"
   }
 }

package/src/chat.js

@@ -87,6 +87,7 @@ async function processStream(provider, model, history, agentMode, setState, onSt
   let buffer = '';
   let toolCallsData = null;
   let thoughtTime = Date.now();
+  let timedOut = false;
 
   try {
     for await (const event of stream) {
@@ -95,12 +96,13 @@ async function processStream(provider, model, history, agentMode, setState, onSt
         onStreamContent(buffer);
         setState(s => ({ ...s, agentStatus: 'Writing response...' }));
       } else if (event.type === 'tool_calls') {
-        toolCallsData = event.calls;
+        if (!timedOut) toolCallsData = event.calls;
       } else if (event.type === 'done') {
       } else if (event.type === 'timeout') {
+        timedOut = true;
         setState(s => ({
-          ...s, agentStatus: 'Stream stalled, completing...',
-          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Stream timeout — response may be incomplete' }],
+          ...s, agentStatus: 'Stalled — recovering...',
+          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Response timed out — showing partial result.' }],
         }));
       } else if (event.type === 'error') {
         setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
@@ -136,6 +138,12 @@ async function processStream(provider, model, history, agentMode, setState, onSt
     onStreamContent('');
   }
 
+  if (timedOut) {
+    setState(s => ({ ...s, thinking: false, toolExecutions: [], thoughtTimer: null }));
+    onStreamContent('');
+    return;
+  }
+
   if (toolCallsData && toolCallsData.length > 0 && agentMode) {
     const execs = toolCallsData.map(tc => ({
       execId: nextExecId(),

package/src/components/Banner.js

@@ -1,13 +1,23 @@
 import React from 'react';
-import { Box } from 'ink';
-import BigText from 'ink-big-text';
+import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
+import BigText from 'ink-big-text';
 const { createElement: h } = React;
 
 export function Banner() {
-  return h(Box, { justifyContent: 'center', marginBottom: 0 },
-    h(Gradient, { name: 'cristal' },
-      h(BigText, { text: 'CLARITY', font: 'block' })
-    )
+  return h(Box, { flexDirection: 'column', alignItems: 'center', marginTop: 1, marginBottom: 1 },
+    h(Gradient, { name: 'summer' },
+      h(BigText, { text: 'CLARITY', font: 'chrome', letterSpacing: 1 })
+    ),
+    h(Box, { flexDirection: 'row', gap: 1 },
+      h(Text, { color: '#FF6B6B' }, '\u25C9'),
+      h(Text, { color: '#555' }, 'premium terminal AI'),
+      h(Text, { color: '#555' }, '\u00B7'),
+      h(Text, { color: '#00FF88' }, 'agent mode'),
+      h(Text, { color: '#555' }, '\u00B7'),
+      h(Text, { color: '#00D4FF' }, 'Ctrl+P commands'),
+      h(Text, { color: '#FF6B6B' }, '\u25C9'),
+    ),
+    h(Text, { color: '#2A2A2A' }, '\u2501'.repeat(Math.min(process.stdout.columns || 80, 60))),
   );
 }

package/src/components/CodeBlock.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
 const LANG_COLORS = {
@@ -11,26 +12,24 @@ const LANG_COLORS = {
   json: '#292929', yaml: '#CB171E', md: '#083FA1', sql: '#E38C00',
 };
 
-export function CodeBlock({ code, language, termWidth }) {
+export function CodeBlock({ code, language }) {
   const lang = language || 'code';
   const lines = useMemo(() => String(code).split('\n'), [code]);
   const langColor = LANG_COLORS[lang] || '#555';
-  const lineNumWidth = String(lines.length).length;
+  const lnW = String(lines.length).length;
 
-  return h(Box, { flexDirection: 'column', marginY: 1, marginLeft: 2 },
-    h(Box, { flexDirection: 'row' },
-      h(Box, { backgroundColor: '#1C1C1C', paddingX: 1 },
-        h(Text, { color: langColor, bold: true }, ' ' + lang + ' '),
-        h(Text, { color: '#555' }, String(lines.length).padStart(3) + ' lines '),
-      )
+  return h(Box, { flexDirection: 'column', marginY: 1, marginLeft: 0 },
+    h(Box, { flexDirection: 'row', backgroundColor: theme.codeBg },
+      h(Text, { color: langColor, bold: true, backgroundColor: '#1C1C1C' }, ' ' + lang + ' '),
+      h(Text, { color: theme.textMuted, backgroundColor: '#1C1C1C' }, String(lines.length) + ' lines '),
     ),
-    h(Box, { flexDirection: 'column', backgroundColor: '#0D1117', paddingY: 0 },
+    h(Box, { flexDirection: 'column', backgroundColor: theme.codeBg },
       lines.map((line, i) =>
-        h(Box, { key: i, flexDirection: 'row' },
-          h(Text, { color: '#555', backgroundColor: '#0D1117' },
-            ' ' + String(i + 1).padStart(lineNumWidth) + ' '
+        h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.codeBg },
+          h(Text, { color: theme.textMuted, backgroundColor: theme.codeBg },
+            ' ' + String(i + 1).padStart(lnW) + ' '
           ),
-          h(Text, { color: '#C9D1D9', backgroundColor: '#0D1117', wrap: 'truncate-end' },
+          h(Text, { color: '#C9D1D9', backgroundColor: theme.codeBg, wrap: 'truncate-end' },
             line || ' '
           )
         )

package/src/components/CommandPicker.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
 const COMMANDS = [
@@ -15,32 +16,50 @@ const COMMANDS = [
 ];
 
 export function CommandPicker({ query, onSelect, onClose }) {
+  const [search, setSearch] = useState('');
+  const [idx, setIdx] = useState(0);
+
   const filtered = COMMANDS.filter(c =>
-    c.name.includes(query) || c.desc.toLowerCase().includes(query.toLowerCase())
+    c.name.includes(search) || c.desc.toLowerCase().includes(search.toLowerCase())
   );
-  const [idx, setIdx] = useState(0);
 
   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) onSelect(filtered[idx].name);
+    if (key.return) 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);
   });
 
-  return h(Box, { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: '#333' },
-    h(Text, { color: '#00D4FF', bold: true }, '  Commands'),
-    h(Text, { color: '#333' }, ''),
+  const tw = process.stdout.columns || 80;
+  const boxWidth = Math.min(tw - 4, 50);
+
+  return h(Box, { flexDirection: 'column', width: boxWidth },
+    h(Box, { flexDirection: 'row', marginBottom: 1, gap: 1 },
+      h(Text, { color: theme.textMuted }, '\u2315'),
+      h(Text, { color: search ? theme.text : theme.textMuted }, search || 'type to filter...'),
+    ),
     filtered.map((cmd, i) =>
-      h(Box, { key: cmd.name, flexDirection: 'row', gap: 2 },
+      h(Box, {
+        key: cmd.name,
+        flexDirection: 'row',
+        backgroundColor: i === idx ? theme.selectionBg : undefined,
+        width: boxWidth,
+      },
         h(Text, {
-          color: i === idx ? '#FF6B6B' : '#F0F0F0',
+          color: i === idx ? theme.selectionText : theme.text,
           bold: i === idx,
-          backgroundColor: i === idx ? '#2A2A2A' : undefined,
-        }, '  ' + cmd.name),
-        h(Text, { color: '#555' }, cmd.desc)
+          backgroundColor: i === idx ? theme.selectionBg : undefined,
+          wrap: 'truncate-end',
+        }, '  ' + cmd.name.padEnd(16)),
+        h(Text, {
+          color: i === idx ? theme.selectionText : theme.textDim,
+          backgroundColor: i === idx ? theme.selectionBg : undefined,
+          wrap: 'truncate-end',
+        }, cmd.desc)
       )
     ),
-    h(Text, { color: '#333' }, ''),
-    h(Text, { color: '#555' }, '  \u2191\u2193 navigate  \u23CE select  Esc close')
+    h(Text, { color: theme.textMuted }, ' \u2191\u2193 nav \u23CE select Esc close')
   );
 }

package/src/components/Composer.js

@@ -1,152 +1,94 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 const w = () => process.stdout.columns || 80;
 
 export function Composer({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
   const [lines, setLines] = useState(['']);
   const [cursorLine, setCursorLine] = useState(0);
-  const [cursorCol, setCursorCol] = useState(0);
-  const inputRef = useRef({ lines: [''], line: 0, col: 0 });
+  const buf = useRef({ lines: [''], line: 0, col: 0 });
   const displayName = provider + '/' + model;
 
   useInput((input, key) => {
     if (thinking) return;
-    const state = inputRef.current;
+    const s = buf.current;
 
     if (key.return && !key.shift) {
-      const text = state.lines.join('\n');
-      setLines(['']);
-      state.lines = [''];
-      state.line = 0;
-      state.col = 0;
-      setCursorLine(0);
-      setCursorCol(0);
+      const text = s.lines.join('\n');
+      s.lines = ['']; s.line = 0; s.col = 0;
+      setLines(['']); setCursorLine(0);
       if (text.trim()) onSubmit(text);
       return;
     }
 
     if (key.return && key.shift) {
-      state.lines.splice(state.line + 1, 0,
-        state.lines[state.line].slice(state.col)
-      );
-      state.lines[state.line] = state.lines[state.line].slice(0, state.col);
-      state.line++;
-      state.col = 0;
-      setLines([...state.lines]);
-      setCursorLine(state.line);
-      setCursorCol(state.col);
+      const rest = s.lines[s.line].slice(s.col);
+      s.lines[s.line] = s.lines[s.line].slice(0, s.col);
+      s.lines.splice(s.line + 1, 0, rest);
+      s.line++; s.col = 0;
+      setLines([...s.lines]); setCursorLine(s.line);
       return;
     }
 
     if (key.backspace || key.delete) {
-      if (state.col > 0) {
-        state.lines[state.line] =
-          state.lines[state.line].slice(0, state.col - 1) +
-          state.lines[state.line].slice(state.col);
-        state.col--;
-      } else if (state.line > 0) {
-        state.col = state.lines[state.line - 1].length;
-        state.lines[state.line - 1] += state.lines[state.line];
-        state.lines.splice(state.line, 1);
-        state.line--;
+      if (s.col > 0) {
+        s.lines[s.line] = s.lines[s.line].slice(0, s.col - 1) + s.lines[s.line].slice(s.col);
+        s.col--;
+      } else if (s.line > 0) {
+        s.col = s.lines[s.line - 1].length;
+        s.lines[s.line - 1] += s.lines[s.line];
+        s.lines.splice(s.line, 1);
+        s.line--;
       }
-      setLines([...state.lines]);
-      setCursorLine(state.line);
-      setCursorCol(state.col);
+      setLines([...s.lines]); setCursorLine(s.line); setCursorLine(s.col);
       return;
     }
 
-    if (key.upArrow) {
-      if (state.line > 0) {
-        state.line--;
-        state.col = Math.min(state.col, state.lines[state.line].length);
-        setCursorLine(state.line);
-        setCursorCol(state.col);
-      }
-      return;
-    }
-
-    if (key.downArrow) {
-      if (state.line < state.lines.length - 1) {
-        state.line++;
-        state.col = Math.min(state.col, state.lines[state.line].length);
-        setCursorLine(state.line);
-        setCursorCol(state.col);
-      }
-      return;
-    }
-
-    if (key.leftArrow) {
-      if (state.col > 0) {
-        state.col--;
-      } else if (state.line > 0) {
-        state.line--;
-        state.col = state.lines[state.line].length;
-      }
-      setCursorLine(state.line);
-      setCursorCol(state.col);
-      return;
-    }
-
-    if (key.rightArrow) {
-      if (state.col < state.lines[state.line].length) {
-        state.col++;
-      } else if (state.line < state.lines.length - 1) {
-        state.line++;
-        state.col = 0;
-      }
-      setCursorLine(state.line);
-      setCursorCol(state.col);
-      return;
-    }
+    if (key.upArrow && s.line > 0) { s.line--; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorLine(s.col); return; }
+    if (key.downArrow && s.line < s.lines.length - 1) { s.line++; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorLine(s.col); return; }
+    if (key.leftArrow) { if (s.col > 0) s.col--; else if (s.line > 0) { s.line--; s.col = s.lines[s.line].length; } setCursorLine(s.line); setCursorLine(s.col); return; }
+    if (key.rightArrow) { if (s.col < s.lines[s.line].length) s.col++; else if (s.line < s.lines.length - 1) { s.line++; s.col = 0; } setCursorLine(s.line); setCursorLine(s.col); return; }
 
     if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      if (input === '/' && state.lines.length === 1 && state.lines[0] === '') {
-        onSlash?.();
-        return;
-      }
-      state.lines[state.line] =
-        state.lines[state.line].slice(0, state.col) +
-        input +
-        state.lines[state.line].slice(state.col);
-      state.col++;
-      setLines([...state.lines]);
-      setCursorLine(state.line);
-      setCursorCol(state.col);
+      if (input === '/' && s.lines.length === 1 && s.lines[0] === '') { onSlash?.(); return; }
+      s.lines[s.line] = s.lines[s.line].slice(0, s.col) + input + s.lines[s.line].slice(s.col);
+      s.col++;
+      setLines([...s.lines]); setCursorLine(s.line); setCursorLine(s.col);
     }
   });
 
-  const currentText = lines.join('\n');
-  const dispLines = currentText ? currentText.split('\n') : [''];
+  const dispLines = lines.join('\n') ? lines : [''];
   const height = Math.min(dispLines.length, 5);
-  const blankLines = height - dispLines.length;
 
-  return h(Box, { flexDirection: 'column', flexShrink: 0 },
-    h(Box, { flexDirection: 'column', backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#2D2D2D' },
+  return h(Box, { flexDirection: 'column', flexShrink: 0, borderStyle: 'round', borderColor: theme.border },
+    h(Box, { flexDirection: 'column' },
       dispLines.slice(0, height).map((line, i) =>
-        h(Box, { key: i, flexDirection: 'row' },
-          h(Text, { color: '#00D4FF' }, i === cursorLine ? '\u276F' : ' '),
-          h(Text, { color: '#F0F0F0' }, ' ' + (line || ' ')),
+        h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.surface },
+          h(Text, { color: theme.accent, backgroundColor: theme.surface },
+            i === cursorLine ? '\u276F' : ' '
+          ),
+          h(Text, { color: theme.text, backgroundColor: theme.surface, wrap: 'wrap' },
+            ' ' + (line || ' ')
+          ),
           i === cursorLine
-            ? h(Text, { color: '#00D4FF' }, '\u258C')
-            : null
-        )
-      ),
-      Array.from({ length: blankLines }).map((_, i) =>
-        h(Box, { key: 'b' + i, flexDirection: 'row' },
-          h(Text, { color: '#2D2D2D' }, ' '),
-          h(Text, { color: '#555' }, ' ')
+            ? h(Text, { color: theme.info, backgroundColor: theme.surface }, '\u258C')
+            : h(Text, { backgroundColor: theme.surface }, ' ')
         )
-      ),
-      h(Box, { flexDirection: 'row', gap: 1, marginTop: 0 },
-        h(Text, { color: '#555' }, '\u2502'),
-        h(Text, { color: '#888' }, displayName),
-        h(Text, { color: '#333' }, '\u00B7'),
-        h(Text, { color: agentMode ? '#00FF88' : '#555' }, agentMode ? 'agent:ON' : 'agent:OFF'),
-        h(Text, { color: '#333' }, '\u00B7 Ctrl+P commands'),
-        h(Text, { color: '#888' }, thinking ? '\u25CF thinking...' : ''),
       )
+    ),
+    h(Box, { flexDirection: 'row', gap: 1, paddingX: 1, backgroundColor: theme.surfaceAlt },
+      h(Text, { color: theme.textMuted }, '\u2502'),
+      h(Text, { color: theme.info }, '\u25C9 ' + displayName),
+      h(Text, { color: theme.textMuted }, '\u00B7'),
+      h(Text, { color: agentMode ? theme.success : theme.textMuted },
+        agentMode ? '\u25C9 agent' : '\u25CB agent'
+      ),
+      h(Text, { color: theme.textMuted }, '\u00B7'),
+      h(Text, { color: theme.textDim }, 'Ctrl+P'),
+      thinking
+        ? h(Text, { color: theme.warning }, ' \u25CF thinking')
+        : null,
     )
   );
 }

package/src/components/LoadingIndicator.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
 export function LoadingIndicator({ label }) {
-  return h(Box, { paddingLeft: 2, marginBottom: 1 },
-    h(Text, { color: 'cyan' }, h(Spinner, { type: 'dots' })),
-    h(Text, { color: 'gray' }, '  ' + (label || 'Thinking'))
+  return h(Box, { flexDirection: 'row', marginLeft: 0, marginY: 1, backgroundColor: theme.surface },
+    h(Text, { color: theme.info, backgroundColor: theme.surface }, '\u25B6'),
+    h(Text, { color: theme.info, backgroundColor: theme.surface }, ' '),
+    h(Text, { color: theme.info, backgroundColor: theme.surface }, h(Spinner, { type: 'dots' })),
+    h(Text, { color: theme.textDim, backgroundColor: theme.surface }, ' ' + (label || 'Thinking'))
   );
 }

package/src/components/MessageBubble.js

@@ -1,8 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { Box, Text } from 'ink';
 import { CodeBlock } from './CodeBlock.js';
-import { ThinkingBlock } from './ThinkingBlock.js';
-import { ToolCard } from './ToolCard.js';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 const tw = () => process.stdout.columns || 80;
 
@@ -20,13 +19,35 @@ function parseContent(text) {
   return parts.length ? parts : [{ type: 'text', content: text }];
 }
 
-function TextContent({ text, color }) {
+function TextSegment({ text, textColor, bgColor, borderColor }) {
   const lines = text.split('\n');
-  return h(Box, { flexDirection: 'column' },
+  const bc = borderColor || theme.purple;
+  const bg = bgColor || theme.surface;
+  return h(Box, { flexDirection: 'column', backgroundColor: bg },
     lines.map((line, i) =>
-      h(Box, { key: i, flexDirection: 'row' },
-        h(Text, { color: color || '#7B2FFF' }, '\u2502'),
-        h(Text, { color: '#E0E0E0', wrap: 'wrap' }, ' ' + (line || ' '))
+      h(Box, { key: i, flexDirection: 'row', backgroundColor: bg },
+        h(Text, { color: bc, backgroundColor: bg }, '\u25B6'),
+        h(Text, { color: textColor || theme.text, backgroundColor: bg, wrap: 'wrap' }, ' ' + (line || ' '))
+      )
+    )
+  );
+}
+
+function UserCard({ text }) {
+  const lines = text.split('\n');
+  return h(Box, { flexDirection: 'column', marginBottom: 1, marginTop: 1, backgroundColor: theme.userBg },
+    h(Box, { flexDirection: 'row', backgroundColor: theme.userBg },
+      h(Text, { color: theme.accent, bold: true, backgroundColor: theme.userBg }, '\u276F YOU'),
+      h(Text, { color: theme.border, backgroundColor: theme.userBg },
+        ' ' + '\u2501'.repeat(Math.max(0, tw() - 12))
+      ),
+    ),
+    h(Box, { flexDirection: 'column', backgroundColor: theme.userBg },
+      lines.map((line, i) =>
+        h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.userBg },
+          h(Text, { color: theme.userBorder, backgroundColor: theme.userBg }, '\u25B6'),
+          h(Text, { color: theme.text, backgroundColor: theme.userBg, wrap: 'wrap' }, ' ' + (line || ' '))
+        )
       )
     )
   );
@@ -35,34 +56,39 @@ function TextContent({ text, color }) {
 function ThoughtBlock({ toolResults, duration }) {
   const [collapsed, setCollapsed] = useState(true);
   const items = toolResults || [];
-  const timeStr = duration ? (duration < 1000 ? duration + 'ms' : (duration / 1000).toFixed(1) + 's') : '';
+  const timeStr = duration
+    ? (duration < 1000 ? duration + 'ms' : (duration / 1000).toFixed(1) + 's')
+    : '';
 
   return h(Box, { flexDirection: 'column', marginY: 0 },
-    h(Box, { flexDirection: 'row' },
-      h(Text, { color: '#7B2FFF' }, '\u2502'),
+    h(Box, { flexDirection: 'row', backgroundColor: theme.surfaceAlt },
+      h(Text, { color: theme.purple, backgroundColor: theme.surfaceAlt }, '\u25B6'),
       h(Text, {
-        color: '#555',
-        bold: false,
-        wrap: 'truncate-end',
+        color: theme.textDim,
+        backgroundColor: theme.surfaceAlt,
       }, ' ' + (collapsed ? '\u25B6' : '\u25BC') + ' Thought' + (timeStr ? ' (' + timeStr + ')' : '')),
     ),
     collapsed
       ? null
-      : h(Box, { flexDirection: 'column', paddingLeft: 2 },
+      : h(Box, { flexDirection: 'column', paddingLeft: 1, backgroundColor: theme.thinkingBg },
           items.map((tr, i) => {
             const isLast = i === items.length - 1;
-            const prefix = isLast ? '\u2514\u2500' : '\u251C\u2500';
+            const prefix = isLast ? '\u2570' : '\u256D';
+            const conn = isLast ? ' ' : '\u2502';
             const icon = tr.status === 'failed' ? '\u2716' : '\u2714';
-            const col = tr.status === 'failed' ? '#FF4455' : '#00FF88';
+            const col = tr.status === 'failed' ? theme.toolFailed : theme.toolSuccess;
             const td = tr.duration ? ' ' + tr.duration + 'ms' : '';
-            return h(Box, { key: tr.execId || i, flexDirection: 'column' },
-              h(Box, { flexDirection: 'row' },
-                h(Text, { color: '#555' }, '  ' + prefix + ' '),
-                h(Text, { color: col }, icon + ' ' + tr.name + td),
+            return h(Box, { key: tr.execId || i, flexDirection: 'column', backgroundColor: theme.thinkingBg },
+              h(Box, { flexDirection: 'row', backgroundColor: theme.thinkingBg },
+                h(Text, { color: theme.textMuted, backgroundColor: theme.thinkingBg }, ' ' + prefix + '\u2500 '),
+                h(Text, { color: col, backgroundColor: theme.thinkingBg }, icon + ' ' + tr.name + td),
               ),
               tr.content && tr.content.length < 200
-                ? h(Box, { paddingLeft: 4 },
-                    h(Text, { color: '#AAA', wrap: 'wrap' }, String(tr.content).slice(0, tw() - 10))
+                ? h(Box, { flexDirection: 'row', backgroundColor: theme.thinkingBg },
+                    h(Text, { color: theme.textMuted, backgroundColor: theme.thinkingBg }, ' ' + conn + ' '),
+                    h(Text, { color: theme.textDim, backgroundColor: theme.thinkingBg, wrap: 'wrap' },
+                      String(tr.content).slice(0, tw() - 10)
+                    )
                   )
                 : null
             );
@@ -75,37 +101,24 @@ export function MessageBubble({ msg, isStreaming }) {
   const w = tw();
 
   if (msg.role === 'user') {
-    const lines = String(msg.content).split('\n');
-    return h(Box, { flexDirection: 'column', marginBottom: 1, marginTop: 1 },
-      h(Box, { flexDirection: 'row' },
-        h(Text, { color: '#FF6B6B', bold: true }, '\u276F'),
-        h(Text, { color: '#FF6B6B', bold: true }, ' YOU '),
-        h(Text, { color: '#9B59FF' }, '\u2500'.repeat(Math.max(0, w - 14))),
-      ),
-      h(Box, { flexDirection: 'column', backgroundColor: '#1A0A2E' },
-        lines.map((line, i) =>
-          h(Box, { key: i, flexDirection: 'row', backgroundColor: '#1A0A2E' },
-            h(Text, { color: '#9B59FF', backgroundColor: '#1A0A2E' }, '\u2502'),
-            h(Text, { color: '#C39BD3', backgroundColor: '#1A0A2E', wrap: 'wrap' }, ' ' + (line || ' '))
-          )
-        )
-      )
-    );
+    return h(UserCard, { text: msg.content });
   }
 
   if (msg.role === 'assistant') {
     const parts = useMemo(() => parseContent(msg.content), [msg.content]);
     const hasToolResults = msg.toolResults && msg.toolResults.length > 0;
 
-    return h(Box, { flexDirection: 'column', marginBottom: 1 },
-      h(Box, { flexDirection: 'row' },
+    return h(Box, { flexDirection: 'column', marginBottom: 1, backgroundColor: theme.surface },
+      h(Box, { flexDirection: 'row', backgroundColor: theme.surface },
         msg.streaming
-          ? h(Text, { color: '#7B2FFF' }, '\u25CF')
-          : h(Text, { color: '#7B2FFF', bold: true }, '\u25C6'),
-        h(Text, { color: '#7B2FFF', bold: true }, ' CLARITY '),
-        h(Text, { color: '#555' }, '\u2500'.repeat(Math.max(0, w - 17))),
+          ? h(Text, { color: theme.info, backgroundColor: theme.surface }, '\u25CF')
+          : h(Text, { color: theme.purple, bold: true, backgroundColor: theme.surface }, '\u25C9'),
+        h(Text, { color: theme.purple, bold: true, backgroundColor: theme.surface }, ' CLARITY '),
+        h(Text, { color: theme.border, backgroundColor: theme.surface },
+          '\u2501'.repeat(Math.max(0, w - 20))
+        ),
         isStreaming
-          ? h(Text, { color: '#00D4FF' }, ' \u25CF streaming')
+          ? h(Text, { color: theme.info, backgroundColor: theme.surface }, ' \u25CF')
           : null
       ),
       hasToolResults
@@ -114,51 +127,49 @@ export function MessageBubble({ msg, isStreaming }) {
       parts.length > 0 && parts[0].content
         ? parts.map((part, i) =>
             part.type === 'code'
-              ? h(CodeBlock, { key: i, code: part.code, language: part.lang, termWidth: w })
-              : h(TextContent, { key: i, text: part.content })
+              ? h(CodeBlock, { key: i, code: part.code, language: part.lang })
+              : h(TextSegment, { key: i, text: part.content, borderColor: theme.purple, bgColor: theme.surface })
           )
         : null,
       msg.duration && !hasToolResults
-        ? h(Box, { flexDirection: 'row' },
-            h(Text, { color: '#7B2FFF' }, '\u2502'),
-            h(Text, { color: '#555' }, ' + Response: ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
+        ? h(Box, { flexDirection: 'row', backgroundColor: theme.surface },
+            h(Text, { color: theme.purple, backgroundColor: theme.surface }, '\u25B6'),
+            h(Text, { color: theme.textDim, backgroundColor: theme.surface },
+              ' + Response: ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's')
+            )
           )
         : null
     );
   }
 
   if (msg.role === 'tool') {
-    return h(ToolCard, {
-      name: msg.toolName || 'tool',
-      status: msg.error ? 'failed' : 'completed',
-      duration: msg.duration,
-      result: msg.content,
-      error: msg.error,
-    });
+    return h(Box, { flexDirection: 'column', marginY: 1, backgroundColor: theme.surfaceAlt, borderStyle: 'round', borderColor: msg.error ? theme.error : theme.success },
+      h(Box, { flexDirection: 'row', gap: 1, paddingX: 1 },
+        h(Text, { color: msg.error ? theme.toolFailed : theme.toolSuccess },
+          msg.error ? '\u2716 ' + (msg.toolName || 'tool') : '\u2714 ' + (msg.toolName || 'tool')
+        ),
+        msg.duration ? h(Text, { color: theme.textMuted }, msg.duration + 'ms') : null,
+      ),
+      msg.content
+        ? h(Box, { paddingX: 1 },
+            h(Text, { color: theme.textDim, wrap: 'wrap' }, String(msg.content).slice(0, w - 6))
+          )
+        : null
+    );
   }
 
   if (msg.role === 'error') {
-    const display = String(msg.content).slice(0, w - 6);
-    return h(Box, { flexDirection: 'row', gap: 1, marginY: 1, paddingLeft: 2 },
-      h(Text, { color: '#FF4455' }, '\u2716'),
-      h(Text, { color: '#FF4455', wrap: 'wrap' }, display)
+    return h(Box, { flexDirection: 'column', marginY: 1, backgroundColor: theme.surfaceAlt, borderStyle: 'round', borderColor: theme.error, paddingX: 1 },
+      h(Text, { color: theme.error }, '\u2716 ' + String(msg.content).slice(0, w - 6))
     );
   }
 
   if (msg.role === 'system') {
     return h(Box, { flexDirection: 'row', gap: 1, marginY: 1, paddingLeft: 2 },
-      h(Text, { color: '#00FF88' }, '\u2714'),
-      h(Text, { color: '#00FF88', wrap: 'wrap' }, String(msg.content))
+      h(Text, { color: theme.success }, '\u25C9'),
+      h(Text, { color: theme.success, wrap: 'wrap' }, String(msg.content))
     );
   }
 
-  if (msg.role === 'thinking') {
-    return h(ThinkingBlock, {
-      content: msg.content,
-      duration: msg.duration,
-      depth: msg.depth || 0,
-    });
-  }
-
   return null;
 }

package/src/components/MessageList.js

@@ -1,65 +1,68 @@
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { MessageBubble } from './MessageBubble.js';
-import { ToolCard } from './ToolCard.js';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
-function ToolExecutionTree({ executions }) {
-  if (!executions || executions.length === 0) return null;
-  return h(Box, { flexDirection: 'column', marginLeft: 2, marginY: 1 },
-    executions.map((exec, i) => {
-      const isLast = i === executions.length - 1;
-      const prefix = isLast ? '\u2514\u2500' : '\u251C\u2500';
-      const icon = exec.status === 'completed' ? '\u2714' :
-                   exec.status === 'failed' ? '\u2716' : '\u25CF';
-      const color = exec.status === 'completed' ? '#00FF88' :
-                    exec.status === 'failed' ? '#FF4455' : '#00D4FF';
-      const timeStr = exec.duration ? ' ' + exec.duration + 'ms' : '';
-      return h(Box, { key: exec.execId, flexDirection: 'column' },
-        h(Box, { flexDirection: 'row' },
-          h(Text, { color: '#555' }, '  ' + prefix + ' '),
-          h(Text, { color }, ' ' + icon + ' ' + exec.name + timeStr),
-        ),
-        exec.status === 'completed' && exec.result
-          ? h(Box, { paddingLeft: 6 },
-              h(Text, { color: '#AAA', wrap: 'wrap' },
-                String(exec.result).slice(0, termTrunc())
-              )
-            )
-          : null,
-        exec.status === 'running'
-          ? h(Box, { paddingLeft: 6 },
-              h(Text, { color: '#555' }, 'running...')
-            )
-          : null,
-      );
-    })
-  );
-}
+function AgentProgress({ agentStatus, toolExecutions }) {
+  if (!agentStatus && (!toolExecutions || toolExecutions.length === 0)) return null;
 
-const termTrunc = () => Math.min(process.stdout.columns || 80, 120);
-
-function AgentStatusLine({ agentStatus, executions }) {
-  if (!agentStatus && (!executions || executions.length === 0)) return null;
-  return h(Box, { flexDirection: 'column', marginLeft: 2, marginBottom: 1 },
+  return h(Box, { flexDirection: 'column', marginLeft: 0, marginY: 1, backgroundColor: theme.surfaceAlt },
     agentStatus
-      ? h(Box, { flexDirection: 'row' },
-          h(Text, { color: '#7B2FFF' }, '\u2502'),
-          h(Text, { color: '#00D4FF' }, ' \u25CF ' + agentStatus)
+      ? h(Box, { flexDirection: 'row', backgroundColor: theme.surfaceAlt },
+          h(Text, { color: theme.info, backgroundColor: theme.surfaceAlt }, '\u25B6'),
+          h(Text, { color: theme.info, backgroundColor: theme.surfaceAlt }, ' \u25CF ' + agentStatus)
         )
       : null,
-    executions && executions.length > 0
-      ? h(ToolExecutionTree, { executions })
-      : null,
+    toolExecutions && toolExecutions.length > 0
+      ? h(Box, { flexDirection: 'column', backgroundColor: theme.surfaceAlt },
+          toolExecutions.map((exec, i) => {
+            const isLast = i === toolExecutions.length - 1;
+            const pre = isLast ? '\u2570' : '\u256D';
+            const icon = exec.status === 'running' ? '\u25CF' :
+                         exec.status === 'failed' ? '\u2716' : '\u2714';
+            const col = exec.status === 'running' ? theme.toolRunning :
+                        exec.status === 'failed' ? theme.toolFailed : theme.toolSuccess;
+            const ts = exec.duration ? ' ' + exec.duration + 'ms' : '';
+            return h(Box, { key: exec.execId, flexDirection: 'column', backgroundColor: theme.surfaceAlt },
+              h(Box, { flexDirection: 'row', backgroundColor: theme.surfaceAlt },
+                h(Text, { color: theme.textMuted, backgroundColor: theme.surfaceAlt }, ' ' + pre + '\u2500 '),
+                h(Text, { color: col, backgroundColor: theme.surfaceAlt }, icon + ' ' + exec.name + ts),
+              ),
+              exec.status === 'running'
+                ? h(Box, { flexDirection: 'row', backgroundColor: theme.surfaceAlt },
+                    h(Text, { color: theme.textMuted, backgroundColor: theme.surfaceAlt }, '   running...')
+                  )
+                : null,
+              exec.status === 'completed' && exec.result && String(exec.result).length < 150
+                ? h(Box, { flexDirection: 'row', backgroundColor: theme.surfaceAlt },
+                    h(Text, { color: theme.textMuted, backgroundColor: theme.surfaceAlt }, '  '),
+                    h(Text, { color: theme.textDim, backgroundColor: theme.surfaceAlt, wrap: 'wrap' },
+                      String(exec.result).slice(0, process.stdout.columns - 10)
+                    )
+                  )
+                : null
+            );
+          })
+        )
+      : null
   );
 }
 
 export function MessageList({ messages, thinking, streamContent, agentStatus, toolExecutions }) {
   const [scrollOffset, setScrollOffset] = useState(0);
   const [userScrolled, setUserScrolled] = useState(false);
-  const termHeight = process.stdout.rows ? process.stdout.rows - 6 : 20;
-  const maxVisible = Math.max(termHeight - 3, 5);
+  const [termHeight, setTermHeight] = useState((process.stdout.rows || 30) - 8);
 
+  useEffect(() => {
+    function onResize() {
+      setTermHeight(Math.max(10, (process.stdout.rows || 30) - 8));
+    }
+    process.stdout.on('resize', onResize);
+    return () => { process.stdout.off('resize', onResize); };
+  }, []);
+
+  const maxVisible = Math.max(termHeight - 2, 5);
   const extraEntries = (thinking || streamContent) ? 1 : 0;
   const totalItems = messages.length + extraEntries;
   const maxOffset = Math.max(0, totalItems - maxVisible);
@@ -89,25 +92,27 @@ export function MessageList({ messages, thinking, streamContent, agentStatus, to
       ),
       showStreaming
         ? h(Box, { flexDirection: 'column' },
-            h(AgentStatusLine, { agentStatus, executions: toolExecutions }),
+            h(AgentProgress, { agentStatus, toolExecutions }),
             streamContent
               ? h(MessageBubble, {
-                  key: 'streaming',
+                  key: 'stream',
                   msg: { id: 'stream', role: 'assistant', content: streamContent, streaming: true },
-                  isStreaming: true
+                  isStreaming: true,
                 })
-              : h(Box, { marginLeft: 2, flexDirection: 'row' },
-                  h(Text, { color: '#7B2FFF' }, '\u2502'),
-                  h(Text, { color: '#00D4FF' }, ' \u25CF thinking...')
+              : h(Box, { flexDirection: 'row', backgroundColor: theme.surface },
+                  h(Text, { color: theme.purple, backgroundColor: theme.surface }, '\u25B6'),
+                  h(Text, { color: theme.info, backgroundColor: theme.surface }, ' \u25CF thinking...')
                 )
           )
         : null
     ),
     userScrolled
       ? h(Box, { flexDirection: 'row', justifyContent: 'center' },
-          h(Text, { color: '#00D4FF', bold: true, backgroundColor: '#1A1A2E', wrap: 'truncate-end' },
-            ' \u25B2 Jump to latest (End) '
-          )
+          h(Text, {
+            color: theme.selectionText,
+            bold: true,
+            backgroundColor: theme.selectionBg,
+          }, ' \u25B2 Jump to latest (End) ')
         )
       : null
   );

package/src/components/ModelPicker.js

@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { ALL_MODELS } from '../config/models.js';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
 export function ModelPicker({ onSelect, onClose }) {
@@ -19,10 +20,8 @@ export function ModelPicker({ onSelect, onClose }) {
     }
     const list = [];
     for (const [provider, models] of Object.entries(groups)) {
-      models.forEach((m, i) => {
-        if (i === 0) list.push({ ...m, _header: provider });
-        else list.push(m);
-      });
+      list.push({ _header: provider, _provider: provider });
+      for (const m of models) list.push(m);
     }
     return list;
   }, [search]);
@@ -30,28 +29,49 @@ export function ModelPicker({ onSelect, onClose }) {
   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) { if (flat[idx] && !flat[idx]._header) onSelect(flat[idx].id); return; }
+    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);
   });
 
-  return h(Box, { flexDirection: 'column' },
-    h(Box, { flexDirection: 'row', gap: 1, marginBottom: 1 },
-      h(Text, { color: '#555' }, 'Search:'),
-      h(Text, { color: search ? '#F0F0F0' : '#333' }, search || 'type to filter...'),
+  const tw = process.stdout.columns || 80;
+  const boxWidth = Math.min(tw - 4, 54);
+
+  return h(Box, { flexDirection: 'column', width: boxWidth },
+    h(Box, { flexDirection: 'row', marginBottom: 1, gap: 1 },
+      h(Text, { color: theme.textMuted }, '\u2315'),
+      h(Text, { color: search ? theme.text : theme.textMuted }, search || 'search models...'),
     ),
     flat.map((m, i) => {
       if (m._header) {
-        return h(Text, { key: 'h-' + m._header, color: '#00D4FF', bold: true }, '\u25BC ' + m._header.toUpperCase());
+        return h(Text, {
+          key: 'h-' + m._provider,
+          color: theme.info,
+          bold: true,
+          backgroundColor: theme.surfaceAlt,
+          wrap: 'truncate-end',
+        }, '  \u25BC ' + m._provider.toUpperCase());
       }
-      return h(Box, { key: m.id, flexDirection: 'row', gap: 2 },
+      const isSel = i === idx;
+      return h(Box, {
+        key: m.id,
+        flexDirection: 'row',
+        backgroundColor: isSel ? theme.selectionBg : undefined,
+        width: boxWidth,
+      },
         h(Text, {
-          color: i === idx ? '#FF6B6B' : '#F0F0F0',
-          bold: i === idx,
-          backgroundColor: i === idx ? '#1A1A2E' : undefined,
+          color: isSel ? theme.selectionText : theme.text,
+          bold: isSel,
+          backgroundColor: isSel ? theme.selectionBg : undefined,
+          wrap: 'truncate-end',
         }, '  ' + m.label),
-        m.badge ? h(Text, { color: '#555' }, '[' + m.badge + ']') : null
+        m.badge
+          ? h(Text, {
+              color: isSel ? theme.selectionText : theme.textMuted,
+              backgroundColor: isSel ? theme.selectionBg : undefined,
+            }, ' [' + m.badge + ']')
+          : null
       );
     })
   );

package/src/components/ThinkingBlock.js

@@ -1,28 +1,27 @@
 import React, { useState } from 'react';
 import { Box, Text } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
 export function ThinkingBlock({ content, duration, depth = 0 }) {
   const [expanded, setExpanded] = useState(false);
   const lines = String(content || '').split('\n');
   const indent = depth * 2;
+  const timeStr = duration ? ' (' + duration + 'ms)' : '';
 
-  function toggle() {
-    setExpanded(e => !e);
-  }
-
-  const label = expanded ? '\u25BC' : '\u25B6';
-  const timeStr = duration ? '(' + duration + 'ms)' : '';
-
-  return h(Box, { flexDirection: 'column', marginLeft: indent, marginY: 1 },
-    h(Box, { flexDirection: 'row', gap: 1 },
-      h(Text, { color: '#8B5CF6', bold: true }, label + ' Thinking ' + timeStr),
+  return h(Box, { flexDirection: 'column', marginLeft: indent, marginY: 1, backgroundColor: theme.thinkingBg },
+    h(Box, { flexDirection: 'row', backgroundColor: theme.thinkingBg },
+      h(Text, { color: theme.purple, bold: true, backgroundColor: theme.thinkingBg },
+        (expanded ? '\u25BC' : '\u25B6') + ' Thinking' + timeStr
+      ),
     ),
     expanded
-      ? h(Box, { flexDirection: 'column', paddingLeft: 2,
-            borderStyle: 'single', borderColor: '#2D2D2D' },
+      ? h(Box, { flexDirection: 'column', paddingLeft: 1, backgroundColor: theme.thinkingBg },
           lines.map((line, i) =>
-            h(Text, { key: i, color: '#A78BFA' }, '  ' + line)
+            h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.thinkingBg },
+              h(Text, { color: theme.textMuted, backgroundColor: theme.thinkingBg }, '\u2502'),
+              h(Text, { color: theme.purpleDim, backgroundColor: theme.thinkingBg, wrap: 'wrap' }, ' ' + line)
+            )
           )
         )
       : null

package/src/components/ToolCard.js

@@ -1,41 +1,30 @@
 import React from 'react';
 import { Box, Text } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
-const STATUS_COLORS = {
-  running: '#00D4FF',
-  completed: '#00FF88',
-  failed: '#FF4455',
-  cancelled: '#555555',
-};
-
-const STATUS_ICONS = {
-  running: '\u25CF',
-  completed: '\u2714',
-  failed: '\u2716',
-  cancelled: '\u2716',
-};
-
 export function ToolCard({ name, args, status, duration, result, error }) {
-  const color = STATUS_COLORS[status] || '#AAAAAA';
-  const icon = STATUS_ICONS[status] || '?';
-  const argsStr = args ? JSON.stringify(args).slice(0, 80) : '';
+  const col = status === 'running' ? theme.toolRunning :
+              status === 'failed' ? theme.toolFailed : theme.toolSuccess;
+  const icon = status === 'running' ? '\u25CF' :
+               status === 'failed' ? '\u2716' : '\u2714';
+  const argsStr = args ? JSON.stringify(args).slice(0, 60) : '';
   const timeStr = duration ? ' ' + duration + 'ms' : '';
 
-  return h(Box, { flexDirection: 'column', marginY: 1, marginLeft: 2 },
-    h(Box, { flexDirection: 'row', gap: 1 },
-      h(Text, { color }, icon + ' ' + name),
-      argsStr ? h(Text, { color: '#555' }, argsStr) : null,
-      timeStr ? h(Text, { color: '#555' }, timeStr) : null,
+  return h(Box, { flexDirection: 'column', marginY: 1, backgroundColor: theme.surfaceAlt, borderStyle: 'round', borderColor: col },
+    h(Box, { flexDirection: 'row', gap: 1, paddingX: 1 },
+      h(Text, { color: col }, icon + ' ' + name),
+      argsStr ? h(Text, { color: theme.textMuted }, argsStr) : null,
+      timeStr ? h(Text, { color: theme.textMuted }, timeStr) : null,
     ),
     status === 'completed' && result
-      ? h(Box, { paddingLeft: 2 },
-          h(Text, { color: '#AAA' }, String(result).slice(0, 200))
+      ? h(Box, { paddingX: 1 },
+          h(Text, { color: theme.textDim, wrap: 'wrap' }, String(result).slice(0, 200))
         )
       : null,
     status === 'failed' && error
-      ? h(Box, { paddingLeft: 2 },
-          h(Text, { color: '#FF4455' }, String(error).slice(0, 200))
+      ? h(Box, { paddingX: 1 },
+          h(Text, { color: theme.error, wrap: 'wrap' }, String(error).slice(0, 200))
         )
       : null,
   );

package/src/config/theme.js

@@ -0,0 +1,57 @@
+export const theme = {
+  bg: '#0A0A0A',
+  surface: '#111111',
+  surfaceAlt: '#1A1A1A',
+  border: '#2A2A2A',
+  borderLight: '#333333',
+
+  accent: '#FF6B6B',
+  accentDim: '#CC4444',
+  orange: '#FF7A00',
+  orangeDim: '#AA5500',
+
+  success: '#00FF88',
+  successDim: '#00AA55',
+  warning: '#FFD700',
+  warningDim: '#AA8800',
+  error: '#FF4455',
+  errorDim: '#AA2233',
+
+  info: '#00D4FF',
+  infoDim: '#0088AA',
+  purple: '#7B2FFF',
+  purpleDim: '#4A1AAA',
+
+  text: '#E8E8E8',
+  textDim: '#888888',
+  textMuted: '#555555',
+
+  userBg: '#1A0A2E',
+  userBorder: '#4A1AAA',
+  assistantBg: '#0D1117',
+  codeBg: '#0D1117',
+
+  selectionBg: '#FF6B6B',
+  selectionText: '#0A0A0A',
+  hoverBg: '#1A1A2E',
+
+  thinkingBg: '#0D0D1A',
+  thinkingBorder: '#4A1AAA',
+
+  toolRunning: '#00D4FF',
+  toolSuccess: '#00FF88',
+  toolFailed: '#FF4455',
+
+  gradientStart: '#FF6B6B',
+  gradientEnd: '#7B2FFF',
+};
+
+export function hexToRgb(hex) {
+  const val = parseInt(hex.slice(1), 16);
+  return { r: (val >> 16) & 255, g: (val >> 8) & 255, b: val & 255 };
+}
+
+export function dimColor(hex, amount = 0.5) {
+  const { r, g, b } = hexToRgb(hex);
+  return `#${[r,g,b].map(c => Math.round(c * amount).toString(16).padStart(2,'0')).join('')}`;
+}

package/src/providers/streaming.js

@@ -1,15 +1,17 @@
+const READ_TIMEOUT = 8000;
+
 function readWithTimeout(reader, timeoutMs) {
   return Promise.race([
     reader.read(),
     new Promise((_, reject) =>
-      setTimeout(() => reject(new Error('timeout')), timeoutMs)
+      setTimeout(() => reject(new Error('stream_timeout')), timeoutMs)
     ),
   ]);
 }
 
 export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {}) {
   const controller = new AbortController();
-  const fetchTimeoutId = setTimeout(() => controller.abort(), 15000);
+  const fetchTimeout = setTimeout(() => controller.abort(), READ_TIMEOUT);
 
   try {
     const res = await fetch(endpoint, {
@@ -23,7 +25,7 @@ export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {})
       signal: controller.signal,
     });
 
-    clearTimeout(fetchTimeoutId);
+    clearTimeout(fetchTimeout);
 
     if (!res.ok) {
       const text = await res.text();
@@ -36,21 +38,16 @@ export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {})
     let buffer = '';
     const toolCallsMap = new Map();
     let hasContent = false;
-    let idleTimeout = 15000;
 
     while (true) {
       let result;
       try {
-        result = await readWithTimeout(reader, idleTimeout);
+        result = await readWithTimeout(reader, READ_TIMEOUT);
       } catch (err) {
-        if (err.message === 'timeout') {
-          if (hasContent) {
-            yield { type: 'timeout', message: 'Stream idle for ' + idleTimeout + 'ms' };
-          }
-          const toolCalls = Array.from(toolCallsMap.values());
-          if (toolCalls.length > 0) {
-            yield { type: 'tool_calls', calls: toolCalls };
-          }
+        if (err.message === 'stream_timeout') {
+          yield { type: 'timeout' };
+          const calls = Array.from(toolCallsMap.values());
+          if (calls.length) yield { type: 'tool_calls', calls };
           return;
         }
         throw err;
@@ -64,63 +61,56 @@ export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {})
       buffer = lines.pop() || '';
 
       for (const line of lines) {
-        if (line.startsWith('data: ')) {
-          const data = line.slice(6).trim();
-          if (data === '[DONE]') {
-            const toolCalls = Array.from(toolCallsMap.values());
-            if (toolCalls.length > 0) {
-              yield { type: 'tool_calls', calls: toolCalls };
-            }
-            return;
-          }
-          try {
-            const json = JSON.parse(data);
-            const choice = json.choices?.[0];
-            if (!choice) continue;
-
-            const delta = choice.delta;
+        if (!line.startsWith('data: ')) continue;
+        const data = line.slice(6).trim();
+        if (data === '[DONE]') {
+          const calls = Array.from(toolCallsMap.values());
+          if (calls.length) yield { type: 'tool_calls', calls };
+          return;
+        }
+        try {
+          const json = JSON.parse(data);
+          const choice = json.choices?.[0];
+          if (!choice) continue;
+          const delta = choice.delta;
 
-            if (delta?.content) {
-              hasContent = true;
-              idleTimeout = 15000;
-              yield { type: 'token', content: delta.content };
-            }
+          if (delta?.content) {
+            hasContent = true;
+            yield { type: 'token', content: delta.content };
+          }
 
-            if (delta?.tool_calls) {
-              for (const tc of delta.tool_calls) {
-                const idx = tc.index ?? 0;
-                if (!toolCallsMap.has(idx)) {
-                  toolCallsMap.set(idx, {
-                    id: tc.id || 'call_' + Date.now() + '_' + idx,
-                    type: 'function',
-                    function: { name: '', arguments: '' },
-                  });
-                }
-                const existing = toolCallsMap.get(idx);
-                if (tc.id) existing.id = tc.id;
-                if (tc.function?.name) existing.function.name += tc.function.name;
-                if (tc.function?.arguments) existing.function.arguments += tc.function.arguments;
+          if (delta?.tool_calls) {
+            for (const tc of delta.tool_calls) {
+              const idx = tc.index ?? 0;
+              if (!toolCallsMap.has(idx)) {
+                toolCallsMap.set(idx, {
+                  id: tc.id || 'call_' + Date.now() + '_' + idx,
+                  type: 'function',
+                  function: { name: '', arguments: '' },
+                });
               }
+              const existing = toolCallsMap.get(idx);
+              if (tc.id) existing.id = tc.id;
+              if (tc.function?.name) existing.function.name += tc.function.name;
+              if (tc.function?.arguments) existing.function.arguments += tc.function.arguments;
             }
+          }
 
-            if (choice.finish_reason) {
-              const toolCalls = Array.from(toolCallsMap.values());
-              if (toolCalls.length > 0 && choice.finish_reason === 'tool_calls') {
-                yield { type: 'tool_calls', calls: toolCalls };
-              }
-              yield { type: 'done', reason: choice.finish_reason };
+          if (choice.finish_reason) {
+            const calls = Array.from(toolCallsMap.values());
+            if (calls.length && choice.finish_reason === 'tool_calls') {
+              yield { type: 'tool_calls', calls };
             }
-          } catch {}
-        }
+            yield { type: 'done', reason: choice.finish_reason };
+          }
+        } catch {}
       }
     }
 
-    const toolCalls = Array.from(toolCallsMap.values());
-    if (toolCalls.length > 0) {
-      yield { type: 'tool_calls', calls: toolCalls };
-    }
+    const calls = Array.from(toolCallsMap.values());
+    if (calls.length) yield { type: 'tool_calls', calls };
   } finally {
-    clearTimeout(fetchTimeoutId);
+    clearTimeout(fetchTimeout);
     try { controller.abort(); } catch {}
   }
 }