clarity-ai 4.3.0 → 5.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "4.3.0",
-  "description": "Premium terminal AI agent for Termux — OpenCode-style UI, streaming, markdown, tools, agent mode",
+  "version": "5.0.0",
+  "description": "Premium OpenCode-style terminal AI agent — streaming, tools, multiline composer, virtual scroll, code blocks",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"

package/src/app.js

@@ -1,23 +1,23 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { Box } from 'ink';
 import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
-import { PromptBox } from './components/PromptBox.js';
+import { Composer } from './components/Composer.js';
 import { CommandPicker } from './components/CommandPicker.js';
 import { ModelPicker } from './components/ModelPicker.js';
-import { useScroll } from './hooks/useScroll.js';
 import { createChatState, handleSend, handleCommand } from './chat.js';
 const { createElement: h } = React;
 
 export function App({ config }) {
-  const [state, setState] = useState(createChatState);
+  const [state, setState] = useState(() => createChatState());
+  const [streamContent, setStreamContent] = useState('');
   const defaultModel = (config.model || 'groq/llama-3.3-70b-versatile').replace(/^[^/]+\//, '');
   const [model, setModel] = useState(defaultModel);
   const [provider, setProvider] = useState(config.provider || 'groq');
   const [showCommands, setShowCommands] = useState(false);
   const [showModels, setShowModels] = useState(false);
   const [showBanner, setShowBanner] = useState(true);
-  const { scrollOffset, termHeight } = useScroll(state.messages.length);
+  const streamRef = useRef('');
 
   const onSubmit = useCallback(async (input) => {
     if (input.startsWith('/')) {
@@ -27,12 +27,12 @@ export function App({ config }) {
       return;
     }
     if (showBanner) setShowBanner(false);
-    await handleSend(state, setState, input, model, provider);
-  }, [state, state.messages, model, provider, showBanner]);
+    await handleSend(state, setState, input, model, provider, setStreamContent);
+  }, [state, model, provider, showBanner]);
 
-  function handleCommandSelect(cmd) {
+  function handleCommandSelect(cmdName) {
     setShowCommands(false);
-    onSubmit(cmd);
+    onSubmit(cmdName);
   }
 
   function handleModelSelect(modelId) {
@@ -52,20 +52,31 @@ export function App({ config }) {
       h(MessageList, {
         messages: state.messages,
         thinking: state.thinking,
-        scrollOffset,
-        termHeight,
+        streamContent,
       })
     ),
-    showCommands ? h(CommandPicker, {
-      query: '',
-      onSelect: handleCommandSelect,
-      onClose: () => setShowCommands(false),
-    }) : null,
-    showModels ? h(ModelPicker, {
-      onSelect: handleModelSelect,
-      onClose: () => setShowModels(false),
-    }) : null,
-    h(PromptBox, {
+    showCommands
+      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+          h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
+            h(CommandPicker, {
+              query: '',
+              onSelect: handleCommandSelect,
+              onClose: () => setShowCommands(false),
+            })
+          )
+        )
+      : null,
+    showModels
+      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+          h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
+            h(ModelPicker, {
+              onSelect: handleModelSelect,
+              onClose: () => setShowModels(false),
+            })
+          )
+        )
+      : null,
+    h(Composer, {
       provider,
       model,
       agentMode: state.agentMode,

package/src/chat.js

@@ -1,13 +1,13 @@
 import { callAI } from './providers/index.js';
 import { setKey } from './config/keys.js';
 import { TOOLS, executeTool } from './tools.js';
-import { extractCommandFromText } from './intentDetect.js';
+const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 export function createChatState() {
   return {
     messages: [],
     thinking: false,
-    streamBuffer: '',
+    streamContent: '',
     awaitingKey: false,
     blockedProvider: null,
     agentMode: true,
@@ -19,123 +19,143 @@ export function createChatState() {
 let msgId = 0;
 function nextId() { return 'm' + (++msgId); }
 
-export async function handleSend(state, setState, input, model, provider) {
+export async function handleSend(state, setState, input, model, provider, onStreamContent) {
   if (!input.trim() || state.awaitingKey) return;
 
   const userMsg = { id: nextId(), role: 'user', content: input };
-  setState(s => ({ ...s, messages: [...s.messages, userMsg], thinking: true, streamBuffer: '' }));
+  setState(s => ({
+    ...s,
+    messages: [...s.messages, userMsg],
+    thinking: true,
+    streamContent: '',
+  }));
+  onStreamContent('');
 
   try {
-    const history = [...state.messages, userMsg].map(m => ({
-      role: m.role === 'error' ? 'assistant' : m.role,
-      content: m.content,
-    }));
+    const history = [...state.messages, userMsg].map(m => {
+      const base = {
+        role: m.role === 'error' ? 'assistant' : m.role,
+        content: m.content,
+      };
+      if (m.role === 'tool' && m.tool_call_id) {
+        base.tool_call_id = m.tool_call_id;
+      }
+      if (m.role === 'assistant' && m.toolCalls) {
+        base.tool_calls = m.toolCalls.map(tc => ({
+          id: tc.id, type: 'function',
+          function: { name: tc.function.name, arguments: tc.function.arguments },
+        }));
+      }
+      return base;
+    });
 
-    await processStream(provider, model, history, state.agentMode, setState);
+    await processStream(provider, model, history, state.agentMode, setState, onStreamContent);
   } catch (err) {
     if (err.type) {
       handleError(setState, err);
     } else {
       setState(s => ({
-        ...s, thinking: false,
+        ...s, thinking: false, streamContent: '',
         messages: [...s.messages, { id: nextId(), role: 'error', content: err.message || 'Unknown error' }],
       }));
     }
+    onStreamContent('');
   }
 }
 
-async function processStream(provider, model, history, agentMode, setState, depth = 0) {
+async function processStream(provider, model, history, agentMode, setState, onStreamContent, depth = 0) {
   if (depth > 10) {
-    setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
+    setState(s => ({ ...s, thinking: false, streamContent: '' }));
+    onStreamContent('');
     return;
   }
 
-  const stream = callAI(provider, model, history, { tools: agentMode ? TOOLS : undefined });
+  let stream;
+  try {
+    stream = callAI(provider, model, history, { tools: agentMode ? TOOLS : undefined });
+  } catch (err) {
+    if (err.type === 'rate_limit') { await sleep(2000); return processStream(provider, model, history, agentMode, setState, onStreamContent, depth); }
+    throw err;
+  }
+
   let buffer = '';
   let toolCalls = null;
 
-  for await (const event of stream) {
-    if (event.type === 'token') {
-      buffer += event.content;
-      setState(s => ({
-        ...s,
-        streamBuffer: buffer,
-        messages: updateLastAssistant(s.messages, buffer),
-      }));
-    } else if (event.type === 'tool_calls') {
-      toolCalls = event.calls;
-    } else if (event.type === 'error') {
-      handleError(setState, event);
-      return;
+  try {
+    for await (const event of stream) {
+      if (event.type === 'token') {
+        buffer += event.content;
+        onStreamContent(buffer);
+      } else if (event.type === 'tool_calls') {
+        toolCalls = event.calls;
+      } else if (event.type === 'error') {
+        handleError(setState, event);
+        onStreamContent('');
+        return;
+      }
     }
+  } catch (err) {
+    if (err.type === 'rate_limit') { await sleep(2000); return processStream(provider, model, history, agentMode, setState, onStreamContent, depth); }
+    throw err;
+  }
+
+  if (buffer) {
+    setState(s => ({
+      ...s,
+      messages: [...s.messages, { id: nextId(), role: 'assistant', content: buffer, streaming: false }],
+      streamContent: '',
+    }));
+    onStreamContent('');
+  } else {
+    setState(s => ({ ...s, streamContent: '' }));
+    onStreamContent('');
   }
 
   if (toolCalls && toolCalls.length > 0 && agentMode) {
-    const assistantMsg = { id: nextId(), role: 'assistant', content: buffer || '', toolCalls };
     const toolResults = [];
-
     for (const tc of toolCalls) {
       const { name, arguments: argsStr } = tc.function;
       let args;
-      try {
-        args = JSON.parse(argsStr);
-      } catch {
-        args = {};
-      }
-
-      setState(s => ({
-        ...s,
-        messages: [...s.messages, { id: nextId(), role: 'tool', content: '⚙ ' + name + '(' + JSON.stringify(args).slice(0, 100) + ')...', toolName: name }],
-      }));
-
+      try { args = JSON.parse(argsStr); } catch { args = {}; }
       const result = await executeTool(name, args);
-      toolResults.push({ tool_call_id: tc.id, role: 'tool', content: result });
+      toolResults.push({ tool_call_id: tc.id, role: 'tool', content: result, name });
     }
 
+    setState(s => ({
+      ...s,
+      messages: [
+        ...s.messages,
+        { id: nextId(), role: 'assistant', content: buffer || '', toolCalls, streaming: false },
+        ...toolResults.map(tr => ({
+          id: nextId(), role: 'tool', content: tr.content,
+          tool_call_id: tr.tool_call_id, toolName: tr.name,
+        })),
+      ],
+    }));
+
     const newHistory = [
       ...history,
       { role: 'assistant', content: buffer || null, tool_calls: toolCalls.map(tc => ({
-        id: tc.id,
-        type: 'function',
+        id: tc.id, type: 'function',
         function: { name: tc.function.name, arguments: tc.function.arguments },
       }))},
       ...toolResults,
     ];
 
-    await processStream(provider, model, newHistory, agentMode, setState, depth + 1);
-  } else {
-    setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
+    await processStream(provider, model, newHistory, agentMode, setState, onStreamContent, depth + 1);
   }
 }
 
 function handleError(setState, err) {
-  if (err.type === 'auth_error') {
-    setState(s => ({
-      ...s, thinking: false, awaitingKey: true, blockedProvider: err.provider,
-      messages: [...s.messages, { id: nextId(), role: 'error', content: err.hint || err.message }],
-    }));
-  } else if (err.type === 'rate_limit') {
-    setState(s => ({
-      ...s, thinking: false,
-      messages: [...s.messages, { id: nextId(), role: 'error', content: err.message }],
-    }));
-  } else {
-    setState(s => ({
-      ...s, thinking: false,
-      messages: [...s.messages, { id: nextId(), role: 'error', content: err.message }],
-    }));
-  }
-}
-
-function updateLastAssistant(messages, buffer) {
-  const copy = [...messages];
-  const last = copy[copy.length - 1];
-  if (last && last.role === 'assistant') {
-    copy[copy.length - 1] = { ...last, content: buffer, streaming: true };
-  } else {
-    copy.push({ id: nextId(), role: 'assistant', content: buffer, streaming: true });
-  }
-  return copy;
+  setState(s => ({
+    ...s, thinking: false, streamContent: '',
+    messages: [...s.messages, {
+      id: nextId(),
+      role: 'error',
+      content: err.hint || err.message,
+      type: err.type,
+    }],
+  }));
 }
 
 export async function handleCommand(input, state, setState, modelSetter, providerSetter, model, provider) {
@@ -165,7 +185,7 @@ export async function handleCommand(input, state, setState, modelSetter, provide
       }));
       break;
     case '/clear':
-      setState(s => ({ ...s, messages: [], streamBuffer: '' }));
+      setState(s => ({ ...s, messages: [], streamContent: '' }));
       break;
     case '/theme':
       setState(s => ({
@@ -176,11 +196,11 @@ export async function handleCommand(input, state, setState, modelSetter, provide
     case '/export': {
       const text = state.messages.map(m => '[' + m.role + '] ' + m.content).join('\n\n');
       const { writeFileSync } = await import('fs');
-      const path = 'clarity-export-' + Date.now() + '.md';
-      writeFileSync(path, text);
+      const fpath = 'clarity-export-' + Date.now() + '.md';
+      writeFileSync(fpath, text);
       setState(s => ({
         ...s,
-        messages: [...s.messages, { id: nextId(), role: 'system', content: 'Exported to ' + path }],
+        messages: [...s.messages, { id: nextId(), role: 'system', content: 'Exported to ' + fpath }],
       }));
       break;
     }

package/src/components/CodeBlock.js

@@ -1,13 +1,40 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
-import highlight from 'cli-highlight';
 const { createElement: h } = React;
 
-export function CodeBlock({ code, lang }) {
-  const highlighted = lang ? highlight(code, { language: lang, ignoreIllegals: true }) : code;
+const LANG_COLORS = {
+  js: '#F0DB4F', jsx: '#F0DB4F', ts: '#3178C6', tsx: '#3178C6',
+  py: '#3572A5', rb: '#CC342D', go: '#00ADD8', rs: '#DEA584',
+  java: '#B07219', kt: '#7F52FF', swift: '#FFAC45',
+  html: '#E34F26', css: '#1572B6', scss: '#CC6699',
+  sh: '#89E051', bash: '#89E051', dockerfile: '#384D54',
+  json: '#292929', yaml: '#CB171E', md: '#083FA1', sql: '#E38C00',
+};
 
-  return h(Box, { flexDirection: 'column', paddingLeft: 2, marginY: 1 },
-    lang ? h(Text, { color: 'gray', dimColor: true }, lang) : null,
-    h(Text, null, highlighted)
+export function CodeBlock({ code, language, termWidth }) {
+  const lang = language || 'code';
+  const lines = useMemo(() => String(code).split('\n'), [code]);
+  const langColor = LANG_COLORS[lang] || '#555';
+  const lineNumWidth = 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 '),
+      )
+    ),
+    h(Box, { flexDirection: 'column', backgroundColor: '#0D1117', paddingY: 0 },
+      lines.map((line, i) =>
+        h(Box, { key: i, flexDirection: 'row' },
+          h(Text, { color: '#555', backgroundColor: '#0D1117' },
+            ' ' + String(i + 1).padStart(lineNumWidth) + ' '
+          ),
+          h(Text, { color: '#C9D1D9', backgroundColor: '#0D1117', wrap: 'truncate-end' },
+            line || ' '
+          )
+        )
+      )
+    )
   );
 }

package/src/components/CommandPicker.js

@@ -23,21 +23,24 @@ export function CommandPicker({ query, onSelect, onClose }) {
   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]);
+    if (key.return) onSelect(filtered[idx].name);
     if (key.escape) onClose();
   });
 
-  return h(Box, { flexDirection: 'column', paddingX: 1 },
-    h(Text, { color: '#00D4FF', bold: true }, 'Commands'),
-    h(Text, { color: '#333333' }, '\u2500'.repeat(30)),
+  return h(Box, { flexDirection: 'column', paddingX: 1, borderStyle: 'round', borderColor: '#333' },
+    h(Text, { color: '#00D4FF', bold: true }, '  Commands'),
+    h(Text, { color: '#333' }, ''),
     filtered.map((cmd, i) =>
       h(Box, { key: cmd.name, flexDirection: 'row', gap: 2 },
         h(Text, {
           color: i === idx ? '#FF6B6B' : '#F0F0F0',
           bold: i === idx,
-        }, '\u25B6 ' + cmd.name),
-        h(Text, { color: '#555555' }, cmd.desc)
+          backgroundColor: i === idx ? '#2A2A2A' : undefined,
+        }, '  ' + cmd.name),
+        h(Text, { color: '#555' }, cmd.desc)
       )
-    )
+    ),
+    h(Text, { color: '#333' }, ''),
+    h(Text, { color: '#555' }, '  \u2191\u2193 navigate  \u23CE select  Esc close')
   );
 }

package/src/components/Composer.js

@@ -0,0 +1,152 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+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 displayName = provider + '/' + model;
+
+  useInput((input, key) => {
+    if (thinking) return;
+    const state = inputRef.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);
+      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);
+      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--;
+      }
+      setLines([...state.lines]);
+      setCursorLine(state.line);
+      setCursorCol(state.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 (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);
+    }
+  });
+
+  const currentText = lines.join('\n');
+  const dispLines = currentText ? currentText.split('\n') : [''];
+  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' },
+      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 || ' ')),
+          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(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...' : ''),
+      )
+    )
+  );
+}

package/src/components/MessageBubble.js

@@ -1,66 +1,128 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
+import { CodeBlock } from './CodeBlock.js';
+import { ThinkingBlock } from './ThinkingBlock.js';
+import { ToolCard } from './ToolCard.js';
 const { createElement: h } = React;
 const termWidth = () => process.stdout.columns || 80;
 
-export function MessageBubble({ msg }) {
+function parseContent(text) {
+  if (!text) return [{ type: 'text', content: '' }];
+  const parts = [];
+  const codeBlockRegex = /```(\w*)\n?([\s\S]*?)```/g;
+  let lastIdx = 0;
+  let match;
+
+  while ((match = codeBlockRegex.exec(text)) !== null) {
+    if (match.index > lastIdx) {
+      parts.push({ type: 'text', content: text.slice(lastIdx, match.index) });
+    }
+    parts.push({ type: 'code', lang: match[1] || 'text', code: match[2] });
+    lastIdx = match.index + match[0].length;
+  }
+
+  if (lastIdx < text.length) {
+    parts.push({ type: 'text', content: text.slice(lastIdx) });
+  }
+
+  return parts.length > 0 ? parts : [{ type: 'text', content: text }];
+}
+
+function TextContent({ text }) {
+  const lines = text.split('\n');
+  const w = termWidth();
+  return h(Box, { flexDirection: 'column' },
+    lines.map((line, i) =>
+      h(Box, { key: i, flexDirection: 'row' },
+        h(Text, { color: '#7B2FFF', wrap: 'wrap' }, '\u2502'),
+        h(Text, { color: '#E0E0E0', wrap: 'wrap' }, ' ' + (line || ' '))
+      )
+    )
+  );
+}
+
+function UserContent({ text }) {
+  const lines = text.split('\n');
+  const w = termWidth();
+  return 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 || ' '))
+      )
+    )
+  );
+}
+
+export function MessageBubble({ msg, isStreaming }) {
+  const w = termWidth();
+
   if (msg.role === 'user') {
-    const lines = String(msg.content).split('\n');
-    return h(Box, { flexDirection: 'column', marginBottom: 1 },
-      h(Box, null,
-        h(Text, { color: '#9B59FF', bold: true }, '\u276f YOU '),
-        h(Text, { color: '#9B59FF' }, '\u2500'.repeat(Math.max(0, termWidth() - 9)))
+    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))),
       ),
-      lines.map((line, i) =>
-        h(Text, { key: i, color: '#C39BD3', backgroundColor: '#2D1B4E' },
-          '  ' + line
-        )
-      )
+      h(UserContent, { text: String(msg.content) })
     );
   }
 
   if (msg.role === 'assistant') {
-    const lines = String(msg.content).split('\n');
+    const parts = useMemo(() => parseContent(msg.content), [msg.content]);
     return h(Box, { flexDirection: 'column', marginBottom: 1 },
-      h(Box, null,
-        h(Text, { color: '#7B2FFF', bold: true }, '\u25c6 CLARITY '),
-        h(Text, { color: '#555555' }, '\u2500'.repeat(Math.max(0, termWidth() - 13)))
+      h(Box, { flexDirection: 'row' },
+        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))),
+        isStreaming
+          ? h(Text, { color: '#00D4FF' }, ' \u25CF streaming')
+          : null
       ),
-      lines.map((line, i) =>
-        h(Box, { key: i },
-          h(Text, { color: '#7B2FFF' }, '\u2502'),
-          h(Text, { color: '#F0F0F0' }, ' ' + line)
-        )
-      )
+      parts.map((part, i) => {
+        if (part.type === 'code') {
+          return h(CodeBlock, { key: i, code: part.code, language: part.lang, termWidth: w });
+        }
+        return h(TextContent, { key: i, text: part.content });
+      })
     );
   }
 
   if (msg.role === 'tool') {
-    return h(Box, { flexDirection: 'column', marginBottom: 1 },
-      h(Box, null,
-        h(Text, { color: '#FFD700', bold: true }, '\u2699 TOOL '),
-        h(Text, { color: '#555555' }, '\u2500'.repeat(Math.max(0, termWidth() - 11)))
-      ),
-      h(Box, { paddingLeft: 2 },
-        h(Text, { color: '#AAAAAA' }, String(msg.content))
-      )
-    );
+    return h(ToolCard, {
+      name: msg.toolName || 'tool',
+      args: msg.args,
+      status: msg.status || (msg.error ? 'failed' : 'completed'),
+      duration: msg.duration,
+      result: msg.content,
+      error: msg.error,
+    });
   }
 
   if (msg.role === 'error') {
-    let display = String(msg.content).slice(0, 120);
-    return h(Box, { paddingLeft: 2, marginBottom: 1 },
-      h(Text, { color: '#FF4455' }, '\u2716 '),
-      h(Text, { color: '#FF4455' }, display)
+    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)
     );
   }
 
   if (msg.role === 'system') {
-    return h(Box, { paddingLeft: 2, marginBottom: 1 },
-      h(Text, { color: '#00FF88' }, '\u2714 '),
-      h(Text, { color: '#00FF88' }, String(msg.content))
+    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))
     );
   }
 
+  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,16 +1,110 @@
-import React from 'react';
-import { Box } from 'ink';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
 import { MessageBubble } from './MessageBubble.js';
 import { LoadingIndicator } from './LoadingIndicator.js';
 const { createElement: h } = React;
 
-export function MessageList({ messages, thinking, scrollOffset, termHeight }) {
-  const visible = messages.slice(scrollOffset, scrollOffset + termHeight);
+export function MessageList({ messages, thinking, streamContent, onJumpToLatest }) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [userScrolled, setUserScrolled] = useState(false);
+  const termHeight = process.stdout.rows ? process.stdout.rows - 6 : 20;
+  const maxVisible = termHeight - 2;
 
-  return h(Box, { flexDirection: 'column' },
-    visible.map((msg, i) =>
-      h(MessageBubble, { key: msg.id || i, msg })
+  const totalItems = messages.length + (thinking || streamContent ? 1 : 0);
+  const atBottom = scrollOffset >= Math.max(0, totalItems - maxVisible);
+
+  const visibleEnd = Math.min(totalItems, scrollOffset + maxVisible);
+  const visibleStart = Math.max(0, visibleEnd - maxVisible);
+
+  function scrollTo(offset) {
+    const max = Math.max(0, totalItems - maxVisible);
+    const clamped = Math.max(0, Math.min(max, offset));
+    setScrollOffset(clamped);
+    if (clamped < max) setUserScrolled(true);
+    else setUserScrolled(false);
+  }
+
+  function scrollDown() {
+    const max = Math.max(0, totalItems - maxVisible);
+    if (scrollOffset < max) {
+      setScrollOffset(s => Math.min(max, s + 1));
+      setUserScrolled(true);
+    }
+  }
+
+  function scrollUp() {
+    if (scrollOffset > 0) {
+      setScrollOffset(s => Math.max(0, s - 1));
+      setUserScrolled(true);
+    }
+  }
+
+  function pageDown() {
+    const max = Math.max(0, totalItems - maxVisible);
+    setScrollOffset(s => {
+      const next = Math.min(max, s + maxVisible);
+      if (next >= max) setUserScrolled(false);
+      else setUserScrolled(true);
+      return next;
+    });
+  }
+
+  function pageUp() {
+    setScrollOffset(s => {
+      const next = Math.max(0, s - maxVisible);
+      setUserScrolled(true);
+      return next;
+    });
+  }
+
+  function goHome() {
+    setScrollOffset(0);
+    setUserScrolled(true);
+  }
+
+  function goEnd() {
+    const max = Math.max(0, totalItems - maxVisible);
+    setScrollOffset(max);
+    setUserScrolled(false);
+  }
+
+  useInput((input, key) => {
+    if (key.upArrow && !key.ctrl) scrollUp();
+    if (key.downArrow && !key.ctrl) scrollDown();
+    if (key.pageUp || (key.downArrow && key.ctrl && !key.shift)) pageUp();
+    if (key.pageDown || (key.upArrow && key.ctrl && !key.shift)) pageDown();
+    if (key.home) goHome();
+    if (key.end) goEnd();
+  });
+
+  if (atBottom && !userScrolled) {
+    const max = Math.max(0, totalItems - maxVisible);
+    if (scrollOffset !== max) setScrollOffset(max);
+  }
+
+  const visibleMessages = messages.slice(visibleStart, visibleEnd);
+
+  return h(Box, { flexDirection: 'column', flexGrow: 1 },
+    h(Box, { flexDirection: 'column', flexGrow: 1, paddingX: 0 },
+      visibleMessages.map((msg) =>
+        h(MessageBubble, {
+          key: msg.id,
+          msg,
+          isStreaming: false,
+        })
+      ),
+      (thinking || streamContent) && visibleEnd >= totalItems - 1
+        ? streamContent
+          ? h(MessageBubble, { key: 'streaming', msg: { id: 'stream', role: 'assistant', content: streamContent, streaming: true }, isStreaming: true })
+          : h(LoadingIndicator, { key: 'thinking', label: 'Thinking' })
+        : null
     ),
-    thinking ? h(LoadingIndicator, { label: 'Thinking' }) : null
+    userScrolled
+      ? h(Box, { flexDirection: 'row', justifyContent: 'center' },
+          h(Text, { color: '#00D4FF', bold: true, backgroundColor: '#1A1A2E' },
+            ' \u25B2 Jump to latest (End) '
+          )
+        )
+      : null
   );
 }

package/src/components/ModelPicker.js

@@ -7,61 +7,52 @@ export function ModelPicker({ onSelect, onClose }) {
   const [search, setSearch] = useState('');
   const [idx, setIdx] = useState(0);
 
-  const grouped = useMemo(() => {
+  const flat = useMemo(() => {
+    const q = search.toLowerCase();
     const filtered = ALL_MODELS.filter(m =>
-      m.id.toLowerCase().includes(search.toLowerCase()) ||
-      m.label.toLowerCase().includes(search.toLowerCase())
+      m.id.toLowerCase().includes(q) || m.label.toLowerCase().includes(q)
     );
     const groups = {};
     for (const m of filtered) {
       if (!groups[m.provider]) groups[m.provider] = [];
       groups[m.provider].push(m);
     }
-    return groups;
-  }, [search]);
-
-  const flatList = useMemo(() => {
     const list = [];
-    for (const [provider, models] of Object.entries(grouped)) {
-      for (const m of models) {
-        list.push({ ...m, providerHeader: list.length === 0 || list[list.length - 1]?.provider !== provider });
-      }
+    for (const [provider, models] of Object.entries(groups)) {
+      models.forEach((m, i) => {
+        if (i === 0) list.push({ ...m, _header: provider });
+        else list.push(m);
+      });
     }
     return list;
-  }, [grouped]);
+  }, [search]);
 
   useInput((input, key) => {
     if (key.upArrow) setIdx(i => Math.max(0, i - 1));
-    if (key.downArrow) setIdx(i => Math.min(flatList.length - 1, i + 1));
-    if (key.return) { onSelect(flatList[idx]?.id); return; }
+    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.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 },
-    h(Text, { color: '#00D4FF', bold: true }, 'Select model'),
-    h(Text, { color: '#333333' }, '\u2500'.repeat(30)),
-    h(Box, { flexDirection: 'row', gap: 1 },
-      h(Text, { color: '#555555' }, 'Search:'),
-      h(Text, { color: search ? '#F0F0F0' : '#333333' }, search || '_')
+  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...'),
     ),
-    h(Text, { color: '#333333' }, ''),
-    flatList.map((m, i) => {
-      const items = [];
-      if (m.providerHeader) {
-        items.push(h(Text, { key: 'h-' + m.provider, color: '#00D4FF', bold: true }, '\u25BC ' + m.provider.toUpperCase()));
+    flat.map((m, i) => {
+      if (m._header) {
+        return h(Text, { key: 'h-' + m._header, color: '#00D4FF', bold: true }, '\u25BC ' + m._header.toUpperCase());
       }
-      items.push(
-        h(Box, { key: m.id, flexDirection: 'row', gap: 2 },
-          h(Text, {
-            color: i === idx ? '#FF6B6B' : '#F0F0F0',
-            bold: i === idx,
-          }, i === idx ? '\u25B6 ' : '  ' + m.label),
-          m.badge ? h(Text, { color: '#555555' }, '[' + m.badge + ']') : null
-        )
+      return h(Box, { key: m.id, flexDirection: 'row', gap: 2 },
+        h(Text, {
+          color: i === idx ? '#FF6B6B' : '#F0F0F0',
+          bold: i === idx,
+          backgroundColor: i === idx ? '#1A1A2E' : undefined,
+        }, '  ' + m.label),
+        m.badge ? h(Text, { color: '#555' }, '[' + m.badge + ']') : null
       );
-      return items;
     })
   );
 }

package/src/components/ThinkingBlock.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+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;
+
+  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),
+    ),
+    expanded
+      ? h(Box, { flexDirection: 'column', paddingLeft: 2,
+            borderStyle: 'single', borderColor: '#2D2D2D' },
+          lines.map((line, i) =>
+            h(Text, { key: i, color: '#A78BFA' }, '  ' + line)
+          )
+        )
+      : null
+  );
+}

package/src/components/ToolCard.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+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 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,
+    ),
+    status === 'completed' && result
+      ? h(Box, { paddingLeft: 2 },
+          h(Text, { color: '#AAA' }, String(result).slice(0, 200))
+        )
+      : null,
+    status === 'failed' && error
+      ? h(Box, { paddingLeft: 2 },
+          h(Text, { color: '#FF4455' }, String(error).slice(0, 200))
+        )
+      : null,
+  );
+}

package/src/components/InputArea.js

@@ -1,33 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
-const { createElement: h } = React;
-
-export function InputArea({ onSubmit, onSlash, thinking, inputHistory, historyGoBack, historyGoForward }) {
-  const [value, setValue] = useState('');
-
-  function handleChange(val) {
-    setValue(val);
-    if (val === '/') {
-      setValue('');
-      onSlash?.();
-    }
-  }
-
-  function handleSubmit(val) {
-    setValue('');
-    onSubmit(val);
-  }
-
-  return h(Box, { flexDirection: 'column', paddingX: 1 },
-    h(Box, null,
-      h(Text, { color: '#00FFD1' }, '> '),
-      h(TextInput, {
-        value,
-        onChange: handleChange,
-        onSubmit: handleSubmit,
-        placeholder: thinking ? 'Thinking...' : 'Ask anything or type / for commands',
-      })
-    )
-  );
-}

package/src/components/PromptBox.js

@@ -1,43 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
-const { createElement: h } = React;
-
-export function PromptBox({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
-  const [value, setValue] = useState('');
-  const displayName = provider + '/' + model;
-
-  function handleChange(val) {
-    setValue(val);
-    if (val === '/') { setValue(''); onSlash?.(); }
-  }
-
-  function handleSubmit(val) {
-    setValue('');
-    onSubmit(val);
-  }
-
-  return h(Box, { flexDirection: 'column', flexShrink: 0 },
-    h(Box, { flexDirection: 'row', gap: 1 },
-      h(Text, { color: '#00D4FF' }, '\u2502'),
-      h(Box, { flexDirection: 'column', flexGrow: 1 },
-        h(Box, { flexDirection: 'row', gap: 1 },
-          h(Text, { color: '#555555' }, displayName),
-          h(Text, { color: '#333333' }, ' \u00B7 '),
-          h(Text, { color: agentMode ? '#00FF88' : '#555555' }, agentMode ? 'agent:ON' : 'agent:OFF'),
-          h(Text, { color: '#333333' }, ' \u00B7 '),
-          h(Text, { color: '#555555' }, 'ctrl+p commands')
-        ),
-        h(Box, { flexDirection: 'row', gap: 1 },
-          h(Text, { color: '#00D4FF' }, thinking ? '  \u25CF ' : '  \u276F '),
-          h(TextInput, {
-            value,
-            onChange: handleChange,
-            onSubmit: handleSubmit,
-            placeholder: thinking ? 'Thinking...' : 'Ask anything or type / for commands',
-          })
-        )
-      )
-    )
-  );
-}

package/src/components/StatusBar.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-const { createElement: h } = React;
-const SEP = ' \u00b7 ';
-
-export function StatusBar({ provider, model, agentMode, tokenCount }) {
-  return h(Box, { paddingX: 1, paddingTop: 1 },
-    h(Text, { color: '#00FFD1' }, provider),
-    h(Text, { color: '#555555' }, SEP),
-    h(Text, { color: '#F0F0F0' }, model),
-    h(Text, { color: '#555555' }, SEP),
-    h(Text, { color: agentMode ? '#00FF88' : '#555555' }, 'agent:' + (agentMode ? 'ON' : 'OFF')),
-    tokenCount ? h(Text, { color: '#555555' }, SEP + 'ctx:' + formatToken(tokenCount)) : null,
-    h(Text, { color: '#555555' }, '  ctrl+p commands'),
-  );
-}
-
-function formatToken(n) {
-  if (!n) return '0';
-  if (n < 1000) return String(n);
-  return (n / 1000).toFixed(1) + 'k';
-}