clarity-ai 4.3.1 → 5.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "4.3.1",
-  "description": "Premium terminal AI agent for Termux — OpenCode-style UI, streaming, markdown, tools, agent mode",
+  "version": "5.1.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

@@ -2,22 +2,21 @@ import React, { useState, useCallback } 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 onSubmit = useCallback(async (input) => {
     if (input.startsWith('/')) {
@@ -27,12 +26,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 +51,33 @@ export function App({ config }) {
       h(MessageList, {
         messages: state.messages,
         thinking: state.thinking,
-        scrollOffset,
-        termHeight,
+        streamContent,
+        agentStatus: state.agentStatus,
+        toolExecutions: state.toolExecutions,
       })
     ),
-    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' },
+          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' },
+          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,31 +1,41 @@
 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,
-    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) {
+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: '',
+    agentStatus: 'Processing...',
+    toolExecutions: [],
+    thoughtTimer: Date.now(),
+  }));
+  onStreamContent('');
 
   try {
     const history = [...state.messages, userMsg].map(m => {
@@ -33,35 +43,36 @@ export async function handleSend(state, setState, input, model, provider) {
         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',
+          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,
-        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, depth = 0) {
-  if (depth > 10) {
-    setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
+async function processStream(provider, model, history, agentMode, setState, onStreamContent, depth = 0) {
+  if (depth > 8) {
+    setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
+    onStreamContent('');
     return;
   }
 
@@ -69,102 +80,169 @@ async function processStream(provider, model, history, agentMode, setState, dept
   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, depth);
-    }
+    if (err.type === 'rate_limit') { await sleep(2000); return processStream(provider, model, history, agentMode, setState, onStreamContent, depth); }
     throw err;
   }
 
   let buffer = '';
-  let toolCalls = null;
+  let toolCallsData = null;
+  let thoughtTime = Date.now();
 
   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') {
+        toolCallsData = event.calls;
+      } else if (event.type === 'done') {
+      } else if (event.type === 'timeout') {
         setState(s => ({
-          ...s,
-          streamBuffer: buffer,
-          messages: updateLastAssistant(s.messages, buffer),
+          ...s, agentStatus: 'Stream stalled, completing...',
+          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Stream timeout — response may be incomplete' }],
         }));
-      } else if (event.type === 'tool_calls') {
-        toolCalls = event.calls;
       } 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, depth);
+      setState(s => ({ ...s, agentStatus: 'Retrying after rate limit...' }));
+      return processStream(provider, model, history, agentMode, setState, onStreamContent, depth);
     }
     throw err;
   }
 
-  if (toolCalls && toolCalls.length > 0 && agentMode) {
+  const elapsed = Date.now() - thoughtTime;
+
+  if (buffer) {
+    setState(s => ({
+      ...s,
+      messages: [...s.messages, { id: nextId(), role: 'assistant', content: buffer, duration: elapsed }],
+      streamContent: '',
+      agentStatus: '',
+    }));
+    onStreamContent('');
+  } else {
+    setState(s => ({ ...s, streamContent: '', agentStatus: '' }));
+    onStreamContent('');
+  }
+
+  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
+        ),
+      }));
     }
 
-    const newAssistantMsg = { id: nextId(), role: 'assistant', content: buffer || '', toolCalls };
-    const toolMsgs = toolResults.map(tr => ({
-      id: nextId(), role: 'tool', content: tr.content,
-      tool_call_id: tr.tool_call_id, toolName: tr.name,
+    setState(s => ({
+      ...s,
+      agentStatus: 'Processing results...',
     }));
 
-    setState(s => ({ ...s, messages: [...s.messages, newAssistantMsg, ...toolMsgs] }));
+    const totalThoughtTime = Date.now() - thoughtTime;
+
+    setState(s => ({
+      ...s,
+      messages: [
+        ...s.messages,
+        {
+          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 => ({
-        id: tc.id,
-        type: 'function',
+      { role: 'assistant', content: buffer || null, tool_calls: toolCallsData.map(tc => ({
+        id: tc.id, type: 'function',
         function: { name: tc.function.name, arguments: tc.function.arguments },
       }))},
       ...toolResults,
     ];
 
-    await processStream(provider, model, newHistory, agentMode, setState, depth + 1);
+    await processStream(provider, model, newHistory, agentMode, setState, onStreamContent, depth + 1);
   } else {
-    setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
-  }
-}
-
-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 }],
+      ...s,
+      thinking: false,
+      agentStatus: '',
+      toolExecutions: [],
+      thoughtTimer: null,
     }));
-  } 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;
 }
 
 export async function handleCommand(input, state, setState, modelSetter, providerSetter, model, provider) {
@@ -194,22 +272,16 @@ export async function handleCommand(input, state, setState, modelSetter, provide
       }));
       break;
     case '/clear':
-      setState(s => ({ ...s, messages: [], streamBuffer: '' }));
-      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');
       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;
     }
@@ -220,7 +292,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/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')
   );
 }