clarity-ai 5.0.0 → 6.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "5.0.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/app.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Box } from 'ink';
 import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
@@ -17,7 +17,6 @@ export function App({ config }) {
   const [showCommands, setShowCommands] = useState(false);
   const [showModels, setShowModels] = useState(false);
   const [showBanner, setShowBanner] = useState(true);
-  const streamRef = useRef('');
 
   const onSubmit = useCallback(async (input) => {
     if (input.startsWith('/')) {
@@ -53,10 +52,12 @@ export function App({ config }) {
         messages: state.messages,
         thinking: state.thinking,
         streamContent,
+        agentStatus: state.agentStatus,
+        toolExecutions: state.toolExecutions,
       })
     ),
     showCommands
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center' },
           h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
             h(CommandPicker, {
               query: '',
@@ -67,7 +68,7 @@ export function App({ config }) {
         )
       : null,
     showModels
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center' },
           h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
             h(ModelPicker, {
               onSelect: handleModelSelect,

package/src/chat.js

@@ -11,13 +11,16 @@ export function createChatState() {
     awaitingKey: false,
     blockedProvider: null,
     agentMode: true,
-    tokenCount: 0,
-    idCounter: 0,
+    agentStatus: '',
+    toolExecutions: [],
+    thoughtTimer: null,
   };
 }
 
 let msgId = 0;
+let execId = 0;
 function nextId() { return 'm' + (++msgId); }
+function nextExecId() { return 'x' + (++execId); }
 
 export async function handleSend(state, setState, input, model, provider, onStreamContent) {
   if (!input.trim() || state.awaitingKey) return;
@@ -28,6 +31,9 @@ export async function handleSend(state, setState, input, model, provider, onStre
     messages: [...s.messages, userMsg],
     thinking: true,
     streamContent: '',
+    agentStatus: 'Processing...',
+    toolExecutions: [],
+    thoughtTimer: Date.now(),
   }));
   onStreamContent('');
 
@@ -37,9 +43,7 @@ export async function handleSend(state, setState, input, model, provider, onStre
         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 === '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',
@@ -51,21 +55,23 @@ export async function handleSend(state, setState, input, model, provider, onStre
 
     await processStream(provider, model, history, state.agentMode, setState, onStreamContent);
   } catch (err) {
-    if (err.type) {
-      handleError(setState, err);
-    } else {
-      setState(s => ({
-        ...s, thinking: false, streamContent: '',
-        messages: [...s.messages, { id: nextId(), role: 'error', content: err.message || 'Unknown error' }],
-      }));
-    }
+    const thoughtTime = state.thoughtTimer ? Date.now() - state.thoughtTimer : 0;
+    setState(s => ({
+      ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null,
+      messages: [...s.messages, {
+        id: nextId(), role: 'error',
+        content: err.hint || err.message || 'Request failed',
+        type: err.type,
+        duration: thoughtTime,
+      }],
+    }));
     onStreamContent('');
   }
 }
 
 async function processStream(provider, model, history, agentMode, setState, onStreamContent, depth = 0) {
-  if (depth > 10) {
-    setState(s => ({ ...s, thinking: false, streamContent: '' }));
+  if (depth > 8) {
+    setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
     onStreamContent('');
     return;
   }
@@ -79,63 +85,156 @@ async function processStream(provider, model, history, agentMode, setState, onSt
   }
 
   let buffer = '';
-  let toolCalls = null;
+  let toolCallsData = null;
+  let thoughtTime = Date.now();
+  let timedOut = false;
 
   try {
     for await (const event of stream) {
       if (event.type === 'token') {
         buffer += event.content;
         onStreamContent(buffer);
+        setState(s => ({ ...s, agentStatus: 'Writing response...' }));
       } else if (event.type === 'tool_calls') {
-        toolCalls = event.calls;
+        if (!timedOut) toolCallsData = event.calls;
+      } else if (event.type === 'done') {
+      } else if (event.type === 'timeout') {
+        timedOut = true;
+        setState(s => ({
+          ...s, agentStatus: 'Stalled — recovering...',
+          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Response timed out — showing partial result.' }],
+        }));
       } else if (event.type === 'error') {
-        handleError(setState, event);
+        setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
+        setState(s => ({
+          ...s,
+          messages: [...s.messages, { id: nextId(), role: 'error', content: event.hint || event.message }],
+        }));
         onStreamContent('');
         return;
       }
     }
   } catch (err) {
-    if (err.type === 'rate_limit') { await sleep(2000); return processStream(provider, model, history, agentMode, setState, onStreamContent, depth); }
+    if (err.type === 'rate_limit') {
+      await sleep(2000);
+      setState(s => ({ ...s, agentStatus: 'Retrying after rate limit...' }));
+      return processStream(provider, model, history, agentMode, setState, onStreamContent, depth);
+    }
     throw err;
   }
 
+  const elapsed = Date.now() - thoughtTime;
+
   if (buffer) {
     setState(s => ({
       ...s,
-      messages: [...s.messages, { id: nextId(), role: 'assistant', content: buffer, streaming: false }],
+      messages: [...s.messages, { id: nextId(), role: 'assistant', content: buffer, duration: elapsed }],
       streamContent: '',
+      agentStatus: '',
     }));
     onStreamContent('');
   } else {
-    setState(s => ({ ...s, streamContent: '' }));
+    setState(s => ({ ...s, streamContent: '', agentStatus: '' }));
     onStreamContent('');
   }
 
-  if (toolCalls && toolCalls.length > 0 && agentMode) {
+  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(),
+      tcId: tc.id,
+      name: tc.function.name,
+      args: tc.function.arguments,
+      status: 'running',
+      startTime: Date.now(),
+      duration: 0,
+      result: '',
+    }));
+
+    setState(s => ({
+      ...s,
+      toolExecutions: execs,
+      agentStatus: 'Running tools...',
+    }));
+
     const toolResults = [];
-    for (const tc of toolCalls) {
+    for (let i = 0; i < toolCallsData.length; i++) {
+      const tc = toolCallsData[i];
       const { name, arguments: argsStr } = tc.function;
       let args;
       try { args = JSON.parse(argsStr); } catch { args = {}; }
-      const result = await executeTool(name, args);
+
+      setState(s => ({
+        ...s,
+        agentStatus: '' + name + '(' + JSON.stringify(args).slice(0, 60) + ')',
+        toolExecutions: s.toolExecutions.map(x =>
+          x.execId === execs[i].execId ? { ...x, status: 'running' } : x
+        ),
+      }));
+
+      let result, error;
+      const toolStart = Date.now();
+      try {
+        result = await executeTool(name, args);
+      } catch (e) {
+        error = e.message;
+        result = 'Error: ' + e.message;
+      }
+      const toolDuration = Date.now() - toolStart;
+
       toolResults.push({ tool_call_id: tc.id, role: 'tool', content: result, name });
+
+      setState(s => ({
+        ...s,
+        toolExecutions: s.toolExecutions.map(x =>
+          x.execId === execs[i].execId
+            ? { ...x, status: error ? 'failed' : 'completed', duration: toolDuration, result, error }
+            : x
+        ),
+      }));
     }
 
+    setState(s => ({
+      ...s,
+      agentStatus: 'Processing results...',
+    }));
+
+    const totalThoughtTime = Date.now() - thoughtTime;
+
     setState(s => ({
       ...s,
       messages: [
         ...s.messages,
-        { id: nextId(), role: 'assistant', content: buffer || '', toolCalls, streaming: false },
+        {
+          id: nextId(),
+          role: 'assistant',
+          content: buffer || '',
+          toolCalls: toolCallsData,
+          toolResults: toolResults.map((tr, i) => ({
+            ...tr,
+            execId: execs[i]?.execId,
+            duration: execs[i]?.duration,
+            status: execs[i]?.status,
+          })),
+          duration: totalThoughtTime,
+        },
         ...toolResults.map(tr => ({
           id: nextId(), role: 'tool', content: tr.content,
           tool_call_id: tr.tool_call_id, toolName: tr.name,
         })),
       ],
+      toolExecutions: [],
+      agentStatus: '',
     }));
 
     const newHistory = [
       ...history,
-      { role: 'assistant', content: buffer || null, tool_calls: toolCalls.map(tc => ({
+      { role: 'assistant', content: buffer || null, tool_calls: toolCallsData.map(tc => ({
         id: tc.id, type: 'function',
         function: { name: tc.function.name, arguments: tc.function.arguments },
       }))},
@@ -143,21 +242,17 @@ async function processStream(provider, model, history, agentMode, setState, onSt
     ];
 
     await processStream(provider, model, newHistory, agentMode, setState, onStreamContent, depth + 1);
+  } else {
+    setState(s => ({
+      ...s,
+      thinking: false,
+      agentStatus: '',
+      toolExecutions: [],
+      thoughtTimer: null,
+    }));
   }
 }
 
-function handleError(setState, err) {
-  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) {
   const parts = input.trim().split(/\s+/);
   const cmd = parts[0];
@@ -185,13 +280,7 @@ export async function handleCommand(input, state, setState, modelSetter, provide
       }));
       break;
     case '/clear':
-      setState(s => ({ ...s, messages: [], streamContent: '' }));
-      break;
-    case '/theme':
-      setState(s => ({
-        ...s,
-        messages: [...s.messages, { id: nextId(), role: 'system', content: 'Themes: dark (only theme available)' }],
-      }));
+      setState(s => ({ ...s, messages: [], streamContent: '', toolExecutions: [], agentStatus: '' }));
       break;
     case '/export': {
       const text = state.messages.map(m => '[' + m.role + '] ' + m.content).join('\n\n');
@@ -211,7 +300,6 @@ export async function handleCommand(input, state, setState, modelSetter, provide
         '/provider               Switch provider',
         '/agent                  Toggle agent mode',
         '/clear                  Clear conversation',
-        '/theme                  Change color theme',
         '/export                 Export conversation',
         '/help                   Show this help',
         '/exit                   Exit CLARITY',

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')
   );
 }