clarity-ai 4.1.0 → 4.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "4.1.0",
-  "description": "Premium terminal AI chat for Termux — Ink+React TUI with streaming, markdown, agent mode",
+  "version": "4.3.0",
+  "description": "Premium terminal AI agent for Termux — OpenCode-style UI, streaming, markdown, tools, agent mode",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"
@@ -15,17 +15,11 @@
   "dependencies": {
     "ink": "^5",
     "react": "^18",
-    "ink-text-input": "^5",
-    "ink-select-input": "^5",
+    "ink-text-input": "^6.0.0",
     "ink-spinner": "^5",
     "ink-big-text": "^2",
     "ink-gradient": "^3",
     "marked": "^12",
-    "cli-highlight": "^2",
-    "wrap-ansi": "^9",
-    "string-width": "^7",
-    "strip-ansi": "^7",
-    "ansi-escapes": "^6",
-    "groq-sdk": "^2"
+    "cli-highlight": "^2"
   }
 }

package/src/app.js

@@ -1,25 +1,23 @@
 import React, { useState, useCallback } from 'react';
-import { Box, useApp } from 'ink';
+import { Box } from 'ink';
 import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
-import { InputArea } from './components/InputArea.js';
-import { StatusBar } from './components/StatusBar.js';
+import { PromptBox } from './components/PromptBox.js';
 import { CommandPicker } from './components/CommandPicker.js';
 import { ModelPicker } from './components/ModelPicker.js';
 import { useScroll } from './hooks/useScroll.js';
-import { useHistory } from './hooks/useHistory.js';
 import { createChatState, handleSend, handleCommand } from './chat.js';
 const { createElement: h } = React;
 
 export function App({ config }) {
   const [state, setState] = useState(createChatState);
-  const [model, setModel] = useState(config.model || 'groq/llama-3.3-70b-versatile');
+  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 { goBack, goForward } = useHistory();
 
   const onSubmit = useCallback(async (input) => {
     if (input.startsWith('/')) {
@@ -40,7 +38,7 @@ export function App({ config }) {
   function handleModelSelect(modelId) {
     const p = modelId.split('/')[0];
     setProvider(p);
-    setModel(modelId);
+    setModel(modelId.replace(/^[^/]+\//, ''));
     setShowModels(false);
     setState(s => ({
       ...s,
@@ -48,12 +46,15 @@ export function App({ config }) {
     }));
   }
 
-  const messages = state.messages;
-
   return h(Box, { flexDirection: 'column', height: '100%' },
-    h(Box, { flexGrow: 1, flexDirection: 'column', overflowY: 'hidden' },
+    h(Box, { flexGrow: 1, flexDirection: 'column' },
       showBanner ? h(Banner) : null,
-      h(MessageList, { messages, thinking: state.thinking, scrollOffset, termHeight })
+      h(MessageList, {
+        messages: state.messages,
+        thinking: state.thinking,
+        scrollOffset,
+        termHeight,
+      })
     ),
     showCommands ? h(CommandPicker, {
       query: '',
@@ -64,7 +65,13 @@ export function App({ config }) {
       onSelect: handleModelSelect,
       onClose: () => setShowModels(false),
     }) : null,
-    h(InputArea, { onSubmit, onSlash: () => setShowCommands(true), thinking: state.thinking }),
-    h(StatusBar, { provider, model, agentMode: state.agentMode })
+    h(PromptBox, {
+      provider,
+      model,
+      agentMode: state.agentMode,
+      thinking: state.thinking,
+      onSlash: () => setShowCommands(true),
+      onSubmit,
+    })
   );
 }

package/src/chat.js

@@ -31,27 +31,7 @@ export async function handleSend(state, setState, input, model, provider) {
       content: m.content,
     }));
 
-    const stream = callAI(provider, model, history, { tools: state.agentMode ? TOOLS : undefined });
-    let buffer = '';
-
-    for await (const event of stream) {
-      if (event.type === 'token') {
-        buffer += event.content;
-        setState(s => ({
-          ...s,
-          streamBuffer: buffer,
-          messages: updateLastAssistant(s.messages, buffer),
-        }));
-      }
-      if (event.type === 'error') {
-        handleError(setState, event);
-        break;
-      }
-    }
-
-    if (buffer) {
-      setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
-    }
+    await processStream(provider, model, history, state.agentMode, setState);
   } catch (err) {
     if (err.type) {
       handleError(setState, err);
@@ -64,6 +44,70 @@ export async function handleSend(state, setState, input, model, provider) {
   }
 }
 
+async function processStream(provider, model, history, agentMode, setState, depth = 0) {
+  if (depth > 10) {
+    setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
+    return;
+  }
+
+  const stream = callAI(provider, model, history, { tools: agentMode ? TOOLS : undefined });
+  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;
+    }
+  }
+
+  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 }],
+      }));
+
+      const result = await executeTool(name, args);
+      toolResults.push({ tool_call_id: tc.id, role: 'tool', content: result });
+    }
+
+    const newHistory = [
+      ...history,
+      { role: 'assistant', content: buffer || null, tool_calls: toolCalls.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);
+  } else {
+    setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
+  }
+}
+
 function handleError(setState, err) {
   if (err.type === 'auth_error') {
     setState(s => ({

package/src/components/CommandPicker.js

@@ -27,14 +27,15 @@ export function CommandPicker({ query, onSelect, onClose }) {
     if (key.escape) onClose();
   });
 
-  return h(Box, { flexDirection: 'column', paddingX: 2, paddingY: 1 },
+  return h(Box, { flexDirection: 'column', paddingX: 1 },
+    h(Text, { color: '#00D4FF', bold: true }, 'Commands'),
+    h(Text, { color: '#333333' }, '\u2500'.repeat(30)),
     filtered.map((cmd, i) =>
-      h(Box, { key: cmd.name },
+      h(Box, { key: cmd.name, flexDirection: 'row', gap: 2 },
         h(Text, {
-          color: i === idx ? '#00FFD1' : '#F0F0F0',
+          color: i === idx ? '#FF6B6B' : '#F0F0F0',
           bold: i === idx,
-        },
-          '  ' + cmd.name.padEnd(18)),
+        }, '\u25B6 ' + cmd.name),
         h(Text, { color: '#555555' }, cmd.desc)
       )
     )

package/src/components/MessageBubble.js

@@ -1,82 +1,66 @@
 import React from 'react';
 import { Box, Text } from 'ink';
-import { marked } from 'marked';
-import { renderMarkdown } from '../renderer/markdown.js';
-import { renderTable } from '../renderer/table.js';
-import { renderDiff } from '../renderer/diff.js';
-import { ErrorMessage } from './ErrorMessage.js';
 const { createElement: h } = React;
-
 const termWidth = () => process.stdout.columns || 80;
 
-function YouMessage({ text }) {
-  return h(Box, { flexDirection: 'column', marginBottom: 1 },
-    h(Box, null,
-      h(Text, { color: '#00FFD1', bold: true }, 'YOU '),
-      h(Text, { color: '#FF2EF7' }, '\u2500'.repeat(Math.max(0, termWidth() - 7)))
-    ),
-    h(Box, { paddingLeft: 2 },
-      h(Text, { wrap: 'wrap' }, text)
-    )
-  );
-}
-
-function AssistantMessage({ text, streaming }) {
-  let content;
-  if (streaming) {
-    content = h(Text, { wrap: 'wrap' }, text);
-  } else {
-    try {
-      const tokens = marked.lexer(text);
-      const rendered = renderMarkdown(tokens);
-      content = h(Box, { flexDirection: 'column' }, ...rendered);
-    } catch {
-      content = h(Text, { wrap: 'wrap' }, text);
-    }
+export function MessageBubble({ msg }) {
+  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)))
+      ),
+      lines.map((line, i) =>
+        h(Text, { key: i, color: '#C39BD3', backgroundColor: '#2D1B4E' },
+          '  ' + line
+        )
+      )
+    );
   }
 
-  return h(Box, { flexDirection: 'column', marginBottom: 1 },
-    h(Box, null,
-      h(Text, { color: '#F0F0F0', bold: true }, 'CLARITY '),
-      h(Text, { color: '#555555' }, '\u2500'.repeat(Math.max(0, termWidth() - 11)))
-    ),
-    h(Box, { paddingLeft: 2 }, content)
-  );
-}
-
-function ToolMessage({ text }) {
-  const lines = text.split('\n');
-  const header = lines[0];
-  const body = lines.slice(1).join('\n');
-
-  return h(Box, { flexDirection: 'column', marginBottom: 1 },
-    h(Box, null,
-      h(Text, { color: '#FFD700', bold: true }, 'TOOL '),
-      h(Text, { color: '#555555' }, '\u2500'.repeat(Math.max(0, termWidth() - 8)))
-    ),
-    h(Box, { paddingLeft: 2 },
-      h(Text, { color: '#FFD700', dimColor: true }, header)
-    ),
-    body ? h(Box, { paddingLeft: 2 },
-      h(Text, { color: '#F0F0F0' }, body)
-    ) : null
-  );
-}
+  if (msg.role === 'assistant') {
+    const lines = String(msg.content).split('\n');
+    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)))
+      ),
+      lines.map((line, i) =>
+        h(Box, { key: i },
+          h(Text, { color: '#7B2FFF' }, '\u2502'),
+          h(Text, { color: '#F0F0F0' }, ' ' + line)
+        )
+      )
+    );
+  }
 
-function SystemMessage({ text }) {
-  return h(Box, { paddingLeft: 2, marginBottom: 1 },
-    h(Text, { color: '#00FF88' }, '\u2714 '),
-    h(Text, { color: '#00FF88' }, text)
-  );
-}
+  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))
+      )
+    );
+  }
 
-export function MessageBubble({ msg }) {
-  if (msg.role === 'user') return h(YouMessage, { text: msg.content });
-  if (msg.role === 'assistant') return h(AssistantMessage, { text: msg.content, streaming: msg.streaming });
-  if (msg.role === 'tool') return h(ToolMessage, { text: msg.content });
   if (msg.role === 'error') {
-    return h(ErrorMessage, { raw: msg.content });
+    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)
+    );
   }
-  if (msg.role === 'system') return h(SystemMessage, { text: msg.content });
+
+  if (msg.role === 'system') {
+    return h(Box, { paddingLeft: 2, marginBottom: 1 },
+      h(Text, { color: '#00FF88' }, '\u2714 '),
+      h(Text, { color: '#00FF88' }, String(msg.content))
+    );
+  }
+
   return null;
 }

package/src/components/ModelPicker.js

@@ -5,31 +5,63 @@ const { createElement: h } = React;
 
 export function ModelPicker({ onSelect, onClose }) {
   const [search, setSearch] = useState('');
-  const filtered = useMemo(() =>
-    ALL_MODELS.filter(m => m.id.toLowerCase().includes(search.toLowerCase())),
-    [search]
-  );
   const [idx, setIdx] = useState(0);
 
+  const grouped = useMemo(() => {
+    const filtered = ALL_MODELS.filter(m =>
+      m.id.toLowerCase().includes(search.toLowerCase()) ||
+      m.label.toLowerCase().includes(search.toLowerCase())
+    );
+    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 });
+      }
+    }
+    return list;
+  }, [grouped]);
+
   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]?.id); return; }
+    if (key.downArrow) setIdx(i => Math.min(flatList.length - 1, i + 1));
+    if (key.return) { onSelect(flatList[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: 2, paddingY: 1 },
-    h(Text, { color: search ? '#F0F0F0' : '#555555' }, 'Search: ' + (search || '')),
-    filtered.map((m, i) =>
-      h(Box, { key: m.id, justifyContent: 'space-between' },
-        h(Text, {
-          color: i === idx ? '#00FFD1' : '#F0F0F0',
-          bold: i === idx,
-        }, '  ' + m.id),
-        m.badge ? h(Text, { color: '#555555' }, '[' + m.badge + ']') : null
-      )
-    )
+  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 || '_')
+    ),
+    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()));
+      }
+      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 items;
+    })
   );
 }

package/src/components/PromptBox.js

@@ -0,0 +1,43 @@
+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/providers/streaming.js

@@ -1,41 +1,93 @@
 export async function* streamResponse(endpoint, body, apiKey, extraHeaders = {}) {
-  const res = await fetch(endpoint, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': 'Bearer ' + apiKey,
-      ...extraHeaders,
-    },
-    body: JSON.stringify({ ...body, stream: true }),
-  });
-
-  if (!res.ok) {
-    const text = await res.text();
-    const { parseErrorResponse } = await import('./errors.js');
-    throw parseErrorResponse(res, text);
-  }
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), 30000);
+
+  try {
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + apiKey,
+        ...extraHeaders,
+      },
+      body: JSON.stringify({ ...body, stream: true }),
+      signal: controller.signal,
+    });
+
+    clearTimeout(timeoutId);
+
+    if (!res.ok) {
+      const text = await res.text();
+      const { parseErrorResponse } = await import('./errors.js');
+      throw parseErrorResponse(res, text);
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    const toolCallsMap = new Map();
 
-  const reader = res.body.getReader();
-  const decoder = new TextDecoder();
-  let buffer = '';
-
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    buffer += decoder.decode(value, { stream: true });
-    const lines = buffer.split('\n');
-    buffer = lines.pop() || '';
-    for (const line of lines) {
-      if (line.startsWith('data: ')) {
-        const data = line.slice(6).trim();
-        if (data === '[DONE]') return;
-        try {
-          const json = JSON.parse(data);
-          const delta = json.choices?.[0]?.delta?.content;
-          if (delta) yield { type: 'token', content: delta };
-          if (json.choices?.[0]?.finish_reason) yield { type: 'done', reason: json.choices[0].finish_reason };
-        } catch {}
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      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 (delta?.content) {
+              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 (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 };
+            }
+          } catch {}
+        }
       }
     }
+
+    const toolCalls = Array.from(toolCallsMap.values());
+    if (toolCalls.length > 0) {
+      yield { type: 'tool_calls', calls: toolCalls };
+    }
+  } finally {
+    clearTimeout(timeoutId);
   }
 }