clarity-ai 4.2.0 → 4.3.0

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.0",
+  "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

@@ -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/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);
   }
 }