clarity-ai 4.0.0 → 4.2.0

package/bin/clarity.js

@@ -1,13 +1,26 @@
 #!/usr/bin/env node
 import React from 'react';
 import { render } from 'ink';
-import { App } from '../ui/App.js';
-import { loadConfig } from '../core/config.js';
-import { ensureApiKey } from '../core/keyCheck.js';
+import { App } from '../src/app.js';
+import { hasKey } from '../src/config/keys.js';
+import { createInterface } from 'readline';
 
 async function main() {
-  const config = loadConfig();
-  await ensureApiKey(config.provider || 'groq');
+  const provider = process.env.CLARITY_PROVIDER || 'groq';
+
+  if (!hasKey(provider)) {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    const key = await new Promise(resolve => {
+      rl.question('\n\x1b[33m No ' + provider + ' API key found.\x1b[0m\n Enter your ' + provider + ' key: ', (answer) => {
+        rl.close();
+        resolve(answer.trim());
+      });
+    });
+    const { setKey } = await import('../src/config/keys.js');
+    setKey(provider, key);
+  }
+
+  const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
   render(React.createElement(App, { config }), { fullscreen: true });
 }
 

package/package.json

@@ -1,28 +1,25 @@
 {
   "name": "clarity-ai",
-  "version": "4.0.0",
-  "description": "Ink+React TUI Autonomous AI Agent CLI for Termux",
+  "version": "4.2.0",
+  "description": "Premium terminal AI chat for Termux — OpenCode-style UI with prompt box, bg colors, side lines",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"
   },
   "scripts": {
-    "start": "node bin/clarity.js",
-    "dev": "node --watch bin/clarity.js"
+    "start": "node bin/clarity.js"
   },
   "engines": {
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@google/generative-ai": "^0.24.1",
-    "@inkjs/ui": "^2.0.0",
-    "@langchain/langgraph": "^1.3.5",
-    "groq-sdk": "^1.2.1",
-    "ink": "^7.0.5",
-    "ink-big-text": "^2.0.0",
-    "ink-gradient": "^4.0.1",
-    "ink-select-input": "^6.2.0",
-    "ink-spinner": "^5.0.0",
-    "ink-text-input": "^6.0.0"
+    "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"
   }
 }

package/src/app.js

@@ -0,0 +1,76 @@
+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 { 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 [model, setModel] = useState(config.model || 'groq/llama-3.3-70b-versatile');
+  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('/')) {
+      if (input === '/model' || input === '/models') { setShowModels(true); return; }
+      if (input === '/help') { setShowCommands(true); return; }
+      await handleCommand(input, state, setState, setModel, setProvider, model, provider);
+      return;
+    }
+    if (showBanner) setShowBanner(false);
+    await handleSend(state, setState, input, model, provider);
+  }, [state, state.messages, model, provider, showBanner]);
+
+  function handleCommandSelect(cmd) {
+    setShowCommands(false);
+    onSubmit(cmd);
+  }
+
+  function handleModelSelect(modelId) {
+    const p = modelId.split('/')[0];
+    setProvider(p);
+    setModel(modelId);
+    setShowModels(false);
+    setState(s => ({
+      ...s,
+      messages: [...s.messages, { id: 'sys-' + Date.now(), role: 'system', content: 'Switched to ' + modelId }],
+    }));
+  }
+
+  return h(Box, { flexDirection: 'column', height: '100%' },
+    h(Box, { flexGrow: 1, flexDirection: 'column' },
+      showBanner ? h(Banner) : null,
+      h(MessageList, {
+        messages: state.messages,
+        thinking: state.thinking,
+        scrollOffset,
+        termHeight,
+      })
+    ),
+    showCommands ? h(CommandPicker, {
+      query: '',
+      onSelect: handleCommandSelect,
+      onClose: () => setShowCommands(false),
+    }) : null,
+    showModels ? h(ModelPicker, {
+      onSelect: handleModelSelect,
+      onClose: () => setShowModels(false),
+    }) : null,
+    h(PromptBox, {
+      provider,
+      model,
+      agentMode: state.agentMode,
+      thinking: state.thinking,
+      onSlash: () => setShowCommands(true),
+      onSubmit,
+    })
+  );
+}

package/src/chat.js

@@ -0,0 +1,172 @@
+import { callAI } from './providers/index.js';
+import { setKey } from './config/keys.js';
+import { TOOLS, executeTool } from './tools.js';
+import { extractCommandFromText } from './intentDetect.js';
+
+export function createChatState() {
+  return {
+    messages: [],
+    thinking: false,
+    streamBuffer: '',
+    awaitingKey: false,
+    blockedProvider: null,
+    agentMode: true,
+    tokenCount: 0,
+    idCounter: 0,
+  };
+}
+
+let msgId = 0;
+function nextId() { return 'm' + (++msgId); }
+
+export async function handleSend(state, setState, input, model, provider) {
+  if (!input.trim() || state.awaitingKey) return;
+
+  const userMsg = { id: nextId(), role: 'user', content: input };
+  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 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: '' }));
+    }
+  } 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' }],
+      }));
+    }
+  }
+}
+
+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 }],
+    }));
+  } 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) {
+  const parts = input.trim().split(/\s+/);
+  const cmd = parts[0];
+  const args = parts.slice(1);
+
+  switch (cmd) {
+    case '/keys':
+      if (args.length >= 2) {
+        setKey(args[0], args[1]);
+        setState(s => ({
+          ...s, awaitingKey: false, blockedProvider: null,
+          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Key saved for ' + args[0] }],
+        }));
+      } else {
+        setState(s => ({
+          ...s,
+          messages: [...s.messages, { id: nextId(), role: 'error', content: 'Usage: /keys <provider> <key>' }],
+        }));
+      }
+      break;
+    case '/agent':
+      setState(s => ({
+        ...s, agentMode: !s.agentMode,
+        messages: [...s.messages, { id: nextId(), role: 'system', content: 'Agent mode ' + (!s.agentMode ? 'ON' : 'OFF') }],
+      }));
+      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)' }],
+      }));
+      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);
+      setState(s => ({
+        ...s,
+        messages: [...s.messages, { id: nextId(), role: 'system', content: 'Exported to ' + path }],
+      }));
+      break;
+    }
+    case '/help': {
+      const cmds = [
+        '/keys <provider> <key>  Set API key',
+        '/model                  Switch model',
+        '/provider               Switch provider',
+        '/agent                  Toggle agent mode',
+        '/clear                  Clear conversation',
+        '/theme                  Change color theme',
+        '/export                 Export conversation',
+        '/help                   Show this help',
+        '/exit                   Exit CLARITY',
+      ];
+      for (const line of cmds) {
+        setState(s => ({
+          ...s,
+          messages: [...s.messages, { id: nextId(), role: 'system', content: line }],
+        }));
+      }
+      break;
+    }
+    case '/exit':
+      process.exit(0);
+      break;
+    default:
+      setState(s => ({
+        ...s,
+        messages: [...s.messages, { id: nextId(), role: 'error', content: 'Unknown command: ' + cmd + '. Type /help for commands.' }],
+      }));
+  }
+}

package/{ui → src/components}/Banner.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text } from 'ink';
+import { Box } from 'ink';
 import BigText from 'ink-big-text';
 import Gradient from 'ink-gradient';
 const { createElement: h } = React;

package/src/components/CodeBlock.js

@@ -0,0 +1,13 @@
+import React 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;
+
+  return h(Box, { flexDirection: 'column', paddingLeft: 2, marginY: 1 },
+    lang ? h(Text, { color: 'gray', dimColor: true }, lang) : null,
+    h(Text, null, highlighted)
+  );
+}

package/src/components/CommandPicker.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+const { createElement: h } = React;
+
+const COMMANDS = [
+  { name: '/keys',     desc: 'Set API key for a provider' },
+  { name: '/model',    desc: 'Switch model' },
+  { name: '/provider', desc: 'Switch provider' },
+  { name: '/agent',    desc: 'Toggle agent mode' },
+  { name: '/clear',    desc: 'Clear conversation' },
+  { name: '/theme',    desc: 'Change color theme' },
+  { name: '/export',   desc: 'Export conversation' },
+  { name: '/help',     desc: 'Show all commands' },
+  { name: '/exit',     desc: 'Exit CLARITY' },
+];
+
+export function CommandPicker({ query, onSelect, onClose }) {
+  const filtered = COMMANDS.filter(c =>
+    c.name.includes(query) || c.desc.toLowerCase().includes(query.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]);
+    if (key.escape) onClose();
+  });
+
+  return h(Box, { flexDirection: 'column', paddingX: 2, paddingY: 1 },
+    filtered.map((cmd, i) =>
+      h(Box, { key: cmd.name },
+        h(Text, {
+          color: i === idx ? '#00FFD1' : '#F0F0F0',
+          bold: i === idx,
+        },
+          '  ' + cmd.name.padEnd(18)),
+        h(Text, { color: '#555555' }, cmd.desc)
+      )
+    )
+  );
+}

package/src/components/ErrorMessage.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+const { createElement: h } = React;
+
+export function ErrorMessage({ raw }) {
+  let msg = raw;
+  try {
+    const parsed = typeof raw === 'string' ? JSON.parse(raw.replace(/^[^{]+/, '')) : raw;
+    const code = parsed?.error?.code || parsed?.error?.type || '';
+    const message = parsed?.error?.message || raw;
+    if (code === 'invalid_api_key' || code === 'authentication_error' || raw.includes('auth_error') || raw.includes('401')) {
+      msg = 'Auth failed — invalid API key';
+    } else if (message.includes('rate limit') || raw.includes('429')) {
+      msg = 'Rate limited — try again in a moment';
+    } else if (message.includes('model')) {
+      msg = 'Model error — ' + message;
+    } else {
+      msg = String(message).slice(0, 120);
+    }
+  } catch {}
+
+  return h(Box, { paddingLeft: 2, marginBottom: 1 },
+    h(Text, { color: 'red' }, '\u2717  '),
+    h(Text, { color: 'red' }, msg)
+  );
+}

package/src/components/InputArea.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+const { createElement: h } = React;
+
+export function InputArea({ onSubmit, onSlash, thinking, inputHistory, historyGoBack, historyGoForward }) {
+  const [value, setValue] = useState('');
+
+  function handleChange(val) {
+    setValue(val);
+    if (val === '/') {
+      setValue('');
+      onSlash?.();
+    }
+  }
+
+  function handleSubmit(val) {
+    setValue('');
+    onSubmit(val);
+  }
+
+  return h(Box, { flexDirection: 'column', paddingX: 1 },
+    h(Box, null,
+      h(Text, { color: '#00FFD1' }, '> '),
+      h(TextInput, {
+        value,
+        onChange: handleChange,
+        onSubmit: handleSubmit,
+        placeholder: thinking ? 'Thinking...' : 'Ask anything or type / for commands',
+      })
+    )
+  );
+}

package/src/components/LoadingIndicator.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+const { createElement: h } = React;
+
+export function LoadingIndicator({ label }) {
+  return h(Box, { paddingLeft: 2, marginBottom: 1 },
+    h(Text, { color: 'cyan' }, h(Spinner, { type: 'dots' })),
+    h(Text, { color: 'gray' }, '  ' + (label || 'Thinking'))
+  );
+}

package/src/components/MessageBubble.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+const { createElement: h } = React;
+const termWidth = () => process.stdout.columns || 80;
+
+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
+        )
+      )
+    );
+  }
+
+  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)
+        )
+      )
+    );
+  }
+
+  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))
+      )
+    );
+  }
+
+  if (msg.role === 'error') {
+    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(Box, { paddingLeft: 2, marginBottom: 1 },
+      h(Text, { color: '#00FF88' }, '\u2714 '),
+      h(Text, { color: '#00FF88' }, String(msg.content))
+    );
+  }
+
+  return null;
+}

package/src/components/MessageList.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from 'ink';
+import { MessageBubble } from './MessageBubble.js';
+import { LoadingIndicator } from './LoadingIndicator.js';
+const { createElement: h } = React;
+
+export function MessageList({ messages, thinking, scrollOffset, termHeight }) {
+  const visible = messages.slice(scrollOffset, scrollOffset + termHeight);
+
+  return h(Box, { flexDirection: 'column' },
+    visible.map((msg, i) =>
+      h(MessageBubble, { key: msg.id || i, msg })
+    ),
+    thinking ? h(LoadingIndicator, { label: 'Thinking' }) : null
+  );
+}

package/src/components/ModelPicker.js

@@ -0,0 +1,35 @@
+import React, { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { ALL_MODELS } from '../config/models.js';
+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);
+
+  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.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
+      )
+    )
+  );
+}

package/src/components/PromptBox.js

@@ -0,0 +1,41 @@
+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 w = process.stdout.columns || 80;
+
+  function handleChange(val) {
+    setValue(val);
+    if (val === '/') { setValue(''); onSlash?.(); }
+  }
+
+  function handleSubmit(val) {
+    setValue('');
+    onSubmit(val);
+  }
+
+  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',
+      })
+    )
+  );
+}

package/src/components/StatusBar.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+const { createElement: h } = React;
+const SEP = ' \u00b7 ';
+
+export function StatusBar({ provider, model, agentMode, tokenCount }) {
+  return h(Box, { paddingX: 1, paddingTop: 1 },
+    h(Text, { color: '#00FFD1' }, provider),
+    h(Text, { color: '#555555' }, SEP),
+    h(Text, { color: '#F0F0F0' }, model),
+    h(Text, { color: '#555555' }, SEP),
+    h(Text, { color: agentMode ? '#00FF88' : '#555555' }, 'agent:' + (agentMode ? 'ON' : 'OFF')),
+    tokenCount ? h(Text, { color: '#555555' }, SEP + 'ctx:' + formatToken(tokenCount)) : null,
+    h(Text, { color: '#555555' }, '  ctrl+p commands'),
+  );
+}
+
+function formatToken(n) {
+  if (!n) return '0';
+  if (n < 1000) return String(n);
+  return (n / 1000).toFixed(1) + 'k';
+}

package/src/components/ThoughtBlock.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+const { createElement: h } = React;
+
+export function ThoughtBlock({ text, collapsed = true }) {
+  const [open, setOpen] = useState(!collapsed);
+
+  useInput((input) => {
+    if (input === 't') setOpen(o => !o);
+  });
+
+  return h(Box, { flexDirection: 'column', paddingLeft: 2, marginBottom: 1 },
+    h(Text, { color: 'gray', dimColor: true },
+      (open ? '\u21b3 ' : '\u27f3 ') + (open ? text : 'Thinking... (t to expand)')
+    )
+  );
+}