clarity-ai 4.2.0 → 4.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "4.2.0",
-  "description": "Premium terminal AI chat for Termux — OpenCode-style UI with prompt box, bg colors, side lines",
+  "version": "4.3.1",
+  "description": "Premium terminal AI agent for Termux — OpenCode-style UI, streaming, markdown, tools, agent mode",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"

package/src/app.js

@@ -11,7 +11,8 @@ 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);
@@ -37,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,

package/src/chat.js

@@ -3,6 +3,8 @@ 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: [],
@@ -26,14 +28,58 @@ export async function handleSend(state, setState, input, model, provider) {
   setState(s => ({ ...s, messages: [...s.messages, userMsg], thinking: true, streamBuffer: '' }));
 
   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);
+  } 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' }],
+      }));
+    }
+  }
+}
+
+async function processStream(provider, model, history, agentMode, setState, depth = 0) {
+  if (depth > 10) {
+    setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
+    return;
+  }
+
+  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, depth);
+    }
+    throw err;
+  }
 
-    const stream = callAI(provider, model, history, { tools: state.agentMode ? TOOLS : undefined });
-    let buffer = '';
+  let buffer = '';
+  let toolCalls = null;
 
+  try {
     for await (const event of stream) {
       if (event.type === 'token') {
         buffer += event.content;
@@ -42,25 +88,52 @@ export async function handleSend(state, setState, input, model, provider) {
           streamBuffer: buffer,
           messages: updateLastAssistant(s.messages, buffer),
         }));
-      }
-      if (event.type === 'error') {
+      } else if (event.type === 'tool_calls') {
+        toolCalls = event.calls;
+      } else if (event.type === 'error') {
         handleError(setState, event);
-        break;
+        return;
       }
     }
-
-    if (buffer) {
-      setState(s => ({ ...s, thinking: false, streamBuffer: '' }));
-    }
   } 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' }],
-      }));
+    if (err.type === 'rate_limit') {
+      await sleep(2000);
+      return processStream(provider, model, history, agentMode, setState, depth);
+    }
+    throw err;
+  }
+
+  if (toolCalls && toolCalls.length > 0 && agentMode) {
+    const toolResults = [];
+    for (const tc of toolCalls) {
+      const { name, arguments: argsStr } = tc.function;
+      let args;
+      try { args = JSON.parse(argsStr); } catch { args = {}; }
+      const result = await executeTool(name, args);
+      toolResults.push({ tool_call_id: tc.id, role: 'tool', content: result, name });
     }
+
+    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, messages: [...s.messages, newAssistantMsg, ...toolMsgs] }));
+
+    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: '' }));
   }
 }
 

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/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

@@ -5,7 +5,7 @@ const { createElement: h } = React;
 
 export function PromptBox({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
   const [value, setValue] = useState('');
-  const w = process.stdout.columns || 80;
+  const displayName = provider + '/' + model;
 
   function handleChange(val) {
     setValue(val);
@@ -18,24 +18,26 @@ export function PromptBox({ provider, model, agentMode, thinking, onSlash, onSub
   }
 
   return h(Box, { flexDirection: 'column', flexShrink: 0 },
-    h(Text, null,
-      h(Text, { color: '#333333' }, '\u2502 '),
-      h(Text, { color: '#00FFFF' }, '\u276f '),
-      h(Text, { color: '#555555' }, provider + '/' + model + '  '),
-      h(Text, { color: agentMode ? '#00FF9F' : '#555555' }, agentMode ? '\u2714 agent' : '\u2716 agent'),
-      h(Text, { color: '#333333' }, ' '.repeat(Math.max(1, w - (provider + '/' + model).length - 18)) + '\u2502')
-    ),
-    h(Text, { color: '#333333' },
-      '\u2514' + '\u2500'.repeat(Math.max(0, w - 2)) + '\u2518'
-    ),
-    h(Box, null,
-      h(Text, { color: '#00FFFF' }, '  \u276f '),
-      h(TextInput, {
-        value,
-        onChange: handleChange,
-        onSubmit: handleSubmit,
-        placeholder: thinking ? 'Thinking...' : 'Ask anything or type / for commands',
-      })
+    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);
   }
 }