clarity-ai 5.1.0 → 6.1.0

package/bin/clarity.js

@@ -5,6 +5,9 @@ import { App } from '../src/app.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
 
+// Full terminal reset: clear screen, reset cursor, reset scrollback
+process.stdout.write('\x1Bc\x1b[2J\x1b[0f\x1b[?25h');
+
 async function main() {
   const provider = process.env.CLARITY_PROVIDER || 'groq';
 
@@ -18,13 +21,32 @@ async function main() {
     });
     const { setKey } = await import('../src/config/keys.js');
     setKey(provider, key);
+    // Re-clear after key prompt
+    process.stdout.write('\x1Bc\x1b[2J\x1b[0f');
   }
 
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
-  render(React.createElement(App, { config }), { fullscreen: true });
+
+  const { waitUntilExit } = render(React.createElement(App, { config }), { fullscreen: true });
+
+  // Cleanup handlers
+  function cleanup() {
+    process.stdout.write('\x1Bc\x1b[?25h\x1b[0m');
+    process.exit(0);
+  }
+
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+  process.on('exit', () => {
+    process.stdout.write('\x1Bc\x1b[?25h\x1b[0m');
+  });
+
+  await waitUntilExit;
+  cleanup();
 }
 
 main().catch(err => {
+  process.stdout.write('\x1Bc\x1b[?25h\x1b[0m');
   console.error('\n\x1b[31mFatal error:\x1b[0m', err.message);
   process.exit(1);
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "5.1.0",
-  "description": "Premium OpenCode-style terminal AI agent — streaming, tools, multiline composer, virtual scroll, code blocks",
+  "version": "6.1.0",
+  "description": "Premium OpenCode-style terminal AI agent — 24-bit TrueColor theme, 8s timeout recovery, virtual scroll, inline tool trees, collapsible thought cards",
   "type": "module",
   "bin": {
     "clarity": "bin/clarity.js"
@@ -15,11 +15,17 @@
   "dependencies": {
     "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"
+    "cli-highlight": "^2",
+    "chalk": "^5",
+    "ansi-escapes": "^7",
+    "cli-cursor": "^5",
+    "wrap-ansi": "^9",
+    "strip-ansi": "^7",
+    "string-width": "^7",
+    "picocolors": "^1"
   }
 }

package/src/app.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { Box } from 'ink';
 import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
@@ -6,6 +6,7 @@ import { Composer } from './components/Composer.js';
 import { CommandPicker } from './components/CommandPicker.js';
 import { ModelPicker } from './components/ModelPicker.js';
 import { createChatState, handleSend, handleCommand } from './chat.js';
+import { theme } from './config/theme.js';
 const { createElement: h } = React;
 
 export function App({ config }) {
@@ -18,16 +19,24 @@ export function App({ config }) {
   const [showModels, setShowModels] = useState(false);
   const [showBanner, setShowBanner] = useState(true);
 
+  // Use refs to avoid stale closures in callbacks
+  const stateRef = useRef(state);
+  const modelRef = useRef(model);
+  const providerRef = useRef(provider);
+  stateRef.current = state;
+  modelRef.current = model;
+  providerRef.current = provider;
+
   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);
+      await handleCommand(input, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
       return;
     }
     if (showBanner) setShowBanner(false);
-    await handleSend(state, setState, input, model, provider, setStreamContent);
-  }, [state, model, provider, showBanner]);
+    await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent);
+  }, [showBanner]);
 
   function handleCommandSelect(cmdName) {
     setShowCommands(false);
@@ -45,20 +54,26 @@ export function App({ config }) {
     }));
   }
 
-  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,
-        streamContent,
-        agentStatus: state.agentStatus,
-        toolExecutions: state.toolExecutions,
-      })
+  const termHeight = process.stdout.rows || 30;
+
+  return h(Box, { flexDirection: 'column', backgroundColor: theme.bg },
+    h(Box, { flexGrow: 1, flexShrink: 1, flexDirection: 'column', minHeight: 0 },
+      showBanner
+        ? h(Banner)
+        : null,
+      h(Box, { flexGrow: 1, flexShrink: 1, minHeight: 0 },
+        h(MessageList, {
+          messages: state.messages,
+          thinking: state.thinking,
+          streamContent,
+          agentStatus: state.agentStatus,
+          toolExecutions: state.toolExecutions,
+        })
+      )
     ),
     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(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+          h(Box, { backgroundColor: theme.bg, borderStyle: 'round', borderColor: theme.borderLight, paddingX: 2, paddingY: 1 },
             h(CommandPicker, {
               query: '',
               onSelect: handleCommandSelect,
@@ -68,8 +83,8 @@ export function App({ config }) {
         )
       : 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(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
+          h(Box, { backgroundColor: theme.bg, borderStyle: 'round', borderColor: theme.borderLight, paddingX: 2, paddingY: 1 },
             h(ModelPicker, {
               onSelect: handleModelSelect,
               onClose: () => setShowModels(false),

package/src/chat.js

@@ -87,6 +87,7 @@ async function processStream(provider, model, history, agentMode, setState, onSt
   let buffer = '';
   let toolCallsData = null;
   let thoughtTime = Date.now();
+  let timedOut = false;
 
   try {
     for await (const event of stream) {
@@ -95,12 +96,13 @@ async function processStream(provider, model, history, agentMode, setState, onSt
         onStreamContent(buffer);
         setState(s => ({ ...s, agentStatus: 'Writing response...' }));
       } else if (event.type === 'tool_calls') {
-        toolCallsData = event.calls;
+        if (!timedOut) toolCallsData = event.calls;
       } else if (event.type === 'done') {
       } else if (event.type === 'timeout') {
+        timedOut = true;
         setState(s => ({
-          ...s, agentStatus: 'Stream stalled, completing...',
-          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Stream timeout — response may be incomplete' }],
+          ...s, agentStatus: 'Stalled — recovering...',
+          messages: [...s.messages, { id: nextId(), role: 'system', content: 'Response timed out — showing partial result.' }],
         }));
       } else if (event.type === 'error') {
         setState(s => ({ ...s, thinking: false, streamContent: '', agentStatus: '', toolExecutions: [], thoughtTimer: null }));
@@ -136,6 +138,12 @@ async function processStream(provider, model, history, agentMode, setState, onSt
     onStreamContent('');
   }
 
+  if (timedOut) {
+    setState(s => ({ ...s, thinking: false, toolExecutions: [], thoughtTimer: null }));
+    onStreamContent('');
+    return;
+  }
+
   if (toolCallsData && toolCallsData.length > 0 && agentMode) {
     const execs = toolCallsData.map(tc => ({
       execId: nextExecId(),

package/src/components/Banner.js

@@ -1,13 +1,23 @@
 import React from 'react';
-import { Box } from 'ink';
-import BigText from 'ink-big-text';
+import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
+import BigText from 'ink-big-text';
 const { createElement: h } = React;
 
 export function Banner() {
-  return h(Box, { justifyContent: 'center', marginBottom: 0 },
-    h(Gradient, { name: 'cristal' },
-      h(BigText, { text: 'CLARITY', font: 'block' })
-    )
+  return h(Box, { flexDirection: 'column', alignItems: 'center', marginTop: 1, marginBottom: 1 },
+    h(Gradient, { name: 'summer' },
+      h(BigText, { text: 'CLARITY', font: 'chrome', letterSpacing: 1 })
+    ),
+    h(Box, { flexDirection: 'row', gap: 1 },
+      h(Text, { color: '#FF6B6B' }, '\u25C9'),
+      h(Text, { color: '#555' }, 'premium terminal AI'),
+      h(Text, { color: '#555' }, '\u00B7'),
+      h(Text, { color: '#00FF88' }, 'agent mode'),
+      h(Text, { color: '#555' }, '\u00B7'),
+      h(Text, { color: '#00D4FF' }, 'Ctrl+P commands'),
+      h(Text, { color: '#FF6B6B' }, '\u25C9'),
+    ),
+    h(Text, { color: '#2A2A2A' }, '\u2501'.repeat(Math.min(process.stdout.columns || 80, 60))),
   );
 }

package/src/components/CodeBlock.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
 const LANG_COLORS = {
@@ -11,26 +12,24 @@ const LANG_COLORS = {
   json: '#292929', yaml: '#CB171E', md: '#083FA1', sql: '#E38C00',
 };
 
-export function CodeBlock({ code, language, termWidth }) {
+export function CodeBlock({ code, language }) {
   const lang = language || 'code';
   const lines = useMemo(() => String(code).split('\n'), [code]);
   const langColor = LANG_COLORS[lang] || '#555';
-  const lineNumWidth = String(lines.length).length;
+  const lnW = 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 '),
-      )
+  return h(Box, { flexDirection: 'column', marginY: 1, marginLeft: 0 },
+    h(Box, { flexDirection: 'row', backgroundColor: theme.codeBg },
+      h(Text, { color: langColor, bold: true, backgroundColor: '#1C1C1C' }, ' ' + lang + ' '),
+      h(Text, { color: theme.textMuted, backgroundColor: '#1C1C1C' }, String(lines.length) + ' lines '),
     ),
-    h(Box, { flexDirection: 'column', backgroundColor: '#0D1117', paddingY: 0 },
+    h(Box, { flexDirection: 'column', backgroundColor: theme.codeBg },
       lines.map((line, i) =>
-        h(Box, { key: i, flexDirection: 'row' },
-          h(Text, { color: '#555', backgroundColor: '#0D1117' },
-            ' ' + String(i + 1).padStart(lineNumWidth) + ' '
+        h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.codeBg },
+          h(Text, { color: theme.textMuted, backgroundColor: theme.codeBg },
+            ' ' + String(i + 1).padStart(lnW) + ' '
           ),
-          h(Text, { color: '#C9D1D9', backgroundColor: '#0D1117', wrap: 'truncate-end' },
+          h(Text, { color: '#C9D1D9', backgroundColor: theme.codeBg, wrap: 'truncate-end' },
             line || ' '
           )
         )

package/src/components/CommandPicker.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
 
 const COMMANDS = [
@@ -15,32 +16,50 @@ const COMMANDS = [
 ];
 
 export function CommandPicker({ query, onSelect, onClose }) {
+  const [search, setSearch] = useState('');
+  const [idx, setIdx] = useState(0);
+
   const filtered = COMMANDS.filter(c =>
-    c.name.includes(query) || c.desc.toLowerCase().includes(query.toLowerCase())
+    c.name.includes(search) || c.desc.toLowerCase().includes(search.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].name);
+    if (key.return) onSelect(filtered[idx]?.name || '');
     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: 1, borderStyle: 'round', borderColor: '#333' },
-    h(Text, { color: '#00D4FF', bold: true }, '  Commands'),
-    h(Text, { color: '#333' }, ''),
+  const tw = process.stdout.columns || 80;
+  const boxWidth = Math.min(tw - 4, 50);
+
+  return h(Box, { flexDirection: 'column', width: boxWidth },
+    h(Box, { flexDirection: 'row', marginBottom: 1, gap: 1 },
+      h(Text, { color: theme.textMuted }, '\u2315'),
+      h(Text, { color: search ? theme.text : theme.textMuted }, search || 'type to filter...'),
+    ),
     filtered.map((cmd, i) =>
-      h(Box, { key: cmd.name, flexDirection: 'row', gap: 2 },
+      h(Box, {
+        key: cmd.name,
+        flexDirection: 'row',
+        backgroundColor: i === idx ? theme.selectionBg : undefined,
+        width: boxWidth,
+      },
         h(Text, {
-          color: i === idx ? '#FF6B6B' : '#F0F0F0',
+          color: i === idx ? theme.selectionText : theme.text,
           bold: i === idx,
-          backgroundColor: i === idx ? '#2A2A2A' : undefined,
-        }, '  ' + cmd.name),
-        h(Text, { color: '#555' }, cmd.desc)
+          backgroundColor: i === idx ? theme.selectionBg : undefined,
+          wrap: 'truncate-end',
+        }, '  ' + cmd.name.padEnd(16)),
+        h(Text, {
+          color: i === idx ? theme.selectionText : theme.textDim,
+          backgroundColor: i === idx ? theme.selectionBg : undefined,
+          wrap: 'truncate-end',
+        }, cmd.desc)
       )
     ),
-    h(Text, { color: '#333' }, ''),
-    h(Text, { color: '#555' }, '  \u2191\u2193 navigate  \u23CE select  Esc close')
+    h(Text, { color: theme.textMuted }, ' \u2191\u2193 nav \u23CE select Esc close')
   );
 }

package/src/components/Composer.js

@@ -1,152 +1,93 @@
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
+import { theme } from '../config/theme.js';
 const { createElement: h } = React;
-const w = () => process.stdout.columns || 80;
 
 export function Composer({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
   const [lines, setLines] = useState(['']);
   const [cursorLine, setCursorLine] = useState(0);
   const [cursorCol, setCursorCol] = useState(0);
-  const inputRef = useRef({ lines: [''], line: 0, col: 0 });
+  const buf = useRef({ lines: [''], line: 0, col: 0 });
   const displayName = provider + '/' + model;
 
   useInput((input, key) => {
-    if (thinking) return;
-    const state = inputRef.current;
+    const s = buf.current;
 
-    if (key.return && !key.shift) {
-      const text = state.lines.join('\n');
-      setLines(['']);
-      state.lines = [''];
-      state.line = 0;
-      state.col = 0;
-      setCursorLine(0);
-      setCursorCol(0);
+    if (key.return && !key.shift && !thinking) {
+      const text = s.lines.join('\n');
+      s.lines = ['']; s.line = 0; s.col = 0;
+      setLines(['']); setCursorLine(0); setCursorCol(0);
       if (text.trim()) onSubmit(text);
       return;
     }
 
     if (key.return && key.shift) {
-      state.lines.splice(state.line + 1, 0,
-        state.lines[state.line].slice(state.col)
-      );
-      state.lines[state.line] = state.lines[state.line].slice(0, state.col);
-      state.line++;
-      state.col = 0;
-      setLines([...state.lines]);
-      setCursorLine(state.line);
-      setCursorCol(state.col);
+      const rest = s.lines[s.line].slice(s.col);
+      s.lines[s.line] = s.lines[s.line].slice(0, s.col);
+      s.lines.splice(s.line + 1, 0, rest);
+      s.line++; s.col = 0;
+      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(0);
       return;
     }
 
     if (key.backspace || key.delete) {
-      if (state.col > 0) {
-        state.lines[state.line] =
-          state.lines[state.line].slice(0, state.col - 1) +
-          state.lines[state.line].slice(state.col);
-        state.col--;
-      } else if (state.line > 0) {
-        state.col = state.lines[state.line - 1].length;
-        state.lines[state.line - 1] += state.lines[state.line];
-        state.lines.splice(state.line, 1);
-        state.line--;
+      if (s.col > 0) {
+        s.lines[s.line] = s.lines[s.line].slice(0, s.col - 1) + s.lines[s.line].slice(s.col);
+        s.col--;
+      } else if (s.line > 0) {
+        s.col = s.lines[s.line - 1].length;
+        s.lines[s.line - 1] += s.lines[s.line];
+        s.lines.splice(s.line, 1);
+        s.line--;
       }
-      setLines([...state.lines]);
-      setCursorLine(state.line);
-      setCursorCol(state.col);
+      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(s.col);
       return;
     }
 
-    if (key.upArrow) {
-      if (state.line > 0) {
-        state.line--;
-        state.col = Math.min(state.col, state.lines[state.line].length);
-        setCursorLine(state.line);
-        setCursorCol(state.col);
-      }
-      return;
-    }
-
-    if (key.downArrow) {
-      if (state.line < state.lines.length - 1) {
-        state.line++;
-        state.col = Math.min(state.col, state.lines[state.line].length);
-        setCursorLine(state.line);
-        setCursorCol(state.col);
-      }
-      return;
-    }
-
-    if (key.leftArrow) {
-      if (state.col > 0) {
-        state.col--;
-      } else if (state.line > 0) {
-        state.line--;
-        state.col = state.lines[state.line].length;
-      }
-      setCursorLine(state.line);
-      setCursorCol(state.col);
-      return;
-    }
-
-    if (key.rightArrow) {
-      if (state.col < state.lines[state.line].length) {
-        state.col++;
-      } else if (state.line < state.lines.length - 1) {
-        state.line++;
-        state.col = 0;
-      }
-      setCursorLine(state.line);
-      setCursorCol(state.col);
-      return;
-    }
+    if (key.upArrow && s.line > 0) { s.line--; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorCol(s.col); return; }
+    if (key.downArrow && s.line < s.lines.length - 1) { s.line++; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorCol(s.col); return; }
+    if (key.leftArrow) { if (s.col > 0) s.col--; else if (s.line > 0) { s.line--; s.col = s.lines[s.line].length; } setCursorLine(s.line); setCursorCol(s.col); return; }
+    if (key.rightArrow) { if (s.col < s.lines[s.line].length) s.col++; else if (s.line < s.lines.length - 1) { s.line++; s.col = 0; } setCursorLine(s.line); setCursorCol(s.col); return; }
 
     if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      if (input === '/' && state.lines.length === 1 && state.lines[0] === '') {
-        onSlash?.();
-        return;
-      }
-      state.lines[state.line] =
-        state.lines[state.line].slice(0, state.col) +
-        input +
-        state.lines[state.line].slice(state.col);
-      state.col++;
-      setLines([...state.lines]);
-      setCursorLine(state.line);
-      setCursorCol(state.col);
+      if (input === '/' && s.lines.length === 1 && s.lines[0] === '') { onSlash?.(); return; }
+      s.lines[s.line] = s.lines[s.line].slice(0, s.col) + input + s.lines[s.line].slice(s.col);
+      s.col++;
+      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(s.col);
     }
   });
 
-  const currentText = lines.join('\n');
-  const dispLines = currentText ? currentText.split('\n') : [''];
+  const dispLines = lines.join('\n') ? lines : [''];
   const height = Math.min(dispLines.length, 5);
-  const blankLines = height - dispLines.length;
 
-  return h(Box, { flexDirection: 'column', flexShrink: 0 },
-    h(Box, { flexDirection: 'column', backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#2D2D2D' },
+  return h(Box, { flexDirection: 'column', flexShrink: 0, borderStyle: 'round', borderColor: theme.border },
+    h(Box, { flexDirection: 'column' },
       dispLines.slice(0, height).map((line, i) =>
-        h(Box, { key: i, flexDirection: 'row' },
-          h(Text, { color: '#00D4FF' }, i === cursorLine ? '\u276F' : ' '),
-          h(Text, { color: '#F0F0F0' }, ' ' + (line || ' ')),
+        h(Box, { key: i, flexDirection: 'row', backgroundColor: theme.surface },
+          h(Text, { color: theme.accent, backgroundColor: theme.surface },
+            i === cursorLine ? '\u276F' : ' '
+          ),
+          h(Text, { color: theme.text, backgroundColor: theme.surface, wrap: 'wrap' },
+            ' ' + (line || ' ')
+          ),
           i === cursorLine
-            ? h(Text, { color: '#00D4FF' }, '\u258C')
-            : null
-        )
-      ),
-      Array.from({ length: blankLines }).map((_, i) =>
-        h(Box, { key: 'b' + i, flexDirection: 'row' },
-          h(Text, { color: '#2D2D2D' }, ' '),
-          h(Text, { color: '#555' }, ' ')
+            ? h(Text, { color: theme.info, backgroundColor: theme.surface }, '\u258C')
+            : h(Text, { backgroundColor: theme.surface }, ' ')
         )
-      ),
-      h(Box, { flexDirection: 'row', gap: 1, marginTop: 0 },
-        h(Text, { color: '#555' }, '\u2502'),
-        h(Text, { color: '#888' }, displayName),
-        h(Text, { color: '#333' }, '\u00B7'),
-        h(Text, { color: agentMode ? '#00FF88' : '#555' }, agentMode ? 'agent:ON' : 'agent:OFF'),
-        h(Text, { color: '#333' }, '\u00B7 Ctrl+P commands'),
-        h(Text, { color: '#888' }, thinking ? '\u25CF thinking...' : ''),
       )
+    ),
+    h(Box, { flexDirection: 'row', gap: 1, paddingX: 1, backgroundColor: theme.surfaceAlt },
+      h(Text, { color: theme.textMuted }, '\u2502'),
+      h(Text, { color: theme.info }, '\u25C9 ' + displayName),
+      h(Text, { color: theme.textMuted }, '\u00B7'),
+      h(Text, { color: agentMode ? theme.success : theme.textMuted },
+        agentMode ? '\u25C9 agent' : '\u25CB agent'
+      ),
+      h(Text, { color: theme.textMuted }, '\u00B7'),
+      h(Text, { color: theme.textDim }, 'Ctrl+P'),
+      thinking
+        ? h(Text, { color: theme.warning }, ' \u25CF thinking')
+        : null,
     )
   );
 }

package/src/components/LoadingIndicator.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
+import { theme } from '../config/theme.js';
 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'))
+  return h(Box, { flexDirection: 'row', marginLeft: 0, marginY: 1, backgroundColor: theme.surface },
+    h(Text, { color: theme.info, backgroundColor: theme.surface }, '\u25B6'),
+    h(Text, { color: theme.info, backgroundColor: theme.surface }, ' '),
+    h(Text, { color: theme.info, backgroundColor: theme.surface }, h(Spinner, { type: 'dots' })),
+    h(Text, { color: theme.textDim, backgroundColor: theme.surface }, ' ' + (label || 'Thinking'))
   );
 }