clarity-ai 6.3.0 → 6.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "6.3.0",
+  "version": "6.3.2",
   "description": "Premium terminal AI agent — fixed-height viewport, box-drawing UI, TrueColor theme, streaming with abort",
   "type": "module",
   "bin": {

package/src/components/AppRoot.js

@@ -1,8 +1,9 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Box } from 'ink';
 import { createChatState, handleSend, handleCommand } from '../chat.js';
 import { hex } from '../config/theme.js';
 import { Layout } from './Layout.js';
+const { createElement: h } = React;
 
 let abortController = null;
 
@@ -73,8 +74,8 @@ export function App({ config }) {
     }));
   }
 
-  return Box({ flexDirection: 'column', backgroundColor: hex.bg },
-    Layout({
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg },
+    h(Layout, {
       state,
       streamContent,
       model,

package/src/components/Composer.js

@@ -1,7 +1,8 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { hex, usym, u } from '../config/theme.js';
 import { getLayout } from '../config/layout.js';
+const { createElement: h } = React;
 
 const MAX_VISIBLE_ROWS = 3;
 
@@ -57,19 +58,18 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
 
   const rows = [];
   rows.push(
-    Box({ key: 'dock_header', height: 1, backgroundColor: hex.surfaceAlt },
-      Text({ color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' ' + u.h.repeat(Math.max(0, cols - 2)))
+    h(Box, { key: 'dock_header', height: 1, backgroundColor: hex.surfaceAlt },
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, ' ' + u.h.repeat(Math.max(0, cols - 2)))
     )
   );
 
-  const inputRows = [];
-  for (let i = 0; i < visibleLines; i++) {
+  for (let i = 0; i < MAX_VISIBLE_ROWS; i++) {
     const start = i * w;
     const end = start + w;
     const seg = displayText.slice(start, end);
-    inputRows.push(
-      Box({ key: 'in' + i, height: 1, backgroundColor: hex.bg },
-        Text({
+    rows.push(
+      h(Box, { key: 'in' + i, height: 1, backgroundColor: hex.bg },
+        h(Text, {
           color: isPlaceholder ? hex.textMuted : hex.text,
           backgroundColor: hex.bg,
           wrap: 'truncate-end',
@@ -78,27 +78,15 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
     );
   }
 
-  for (let i = visibleLines; i < MAX_VISIBLE_ROWS + 1; i++) {
-    if (i === MAX_VISIBLE_ROWS + 0) break;
-    inputRows.push(
-      Box({ key: 'in_fill' + i, height: 1, backgroundColor: hex.bg },
-        Text({ color: hex.textMuted, backgroundColor: hex.bg }, '  ' + usym.lightV)
+  rows.push(
+    h(Box, { key: 'dock_status', height: 1, backgroundColor: hex.surfaceAlt },
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '  ' + provider + ' ' + usym.midDot + ' ' + modelShort +
+        (agentMode ? ' ' + usym.midDot + ' Agent' : '') +
+        '  ' + usym.midDot + '  Ctrl+P commands'
       )
-    );
-  }
-
-  const statusLine = Box({ key: 'dock_status', height: 1, backgroundColor: hex.surfaceAlt },
-    Text({ color: hex.textMuted, backgroundColor: hex.surfaceAlt },
-      '  ' + provider + ' ' + usym.midDot + ' ' + modelShort +
-      (agentMode ? ' ' + usym.midDot + ' Agent' : '') +
-      '  ' + usym.midDot + '  Ctrl+P commands'
     )
   );
 
-  rows.push(...inputRows);
-  rows.push(statusLine);
-
-  return Box({ flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-    ...rows
-  );
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt }, ...rows);
 }

package/src/components/Layout.js

@@ -6,12 +6,13 @@ import { MessageList } from './MessageList.js';
 import { Composer } from './Composer.js';
 import { CommandPicker } from './CommandPicker.js';
 import { ModelPicker } from './ModelPicker.js';
+const { createElement: h } = React;
 
 export function Layout({ state, streamContent, model, provider, showCommands, showModels, onCommandSelect, onModelSelect, onCloseCommands, onCloseModels, onSlash, onSubmit }) {
-  return Box({ flexDirection: 'column', backgroundColor: hex.bg, minHeight: '100%' },
-    StatusBar({ model, provider, agentMode: state.agentMode, thinking: state.thinking }),
-    Box({ flexGrow: 1, flexDirection: 'column' },
-      MessageList({
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.bg, minHeight: '100%' },
+    h(StatusBar, { model, provider, agentMode: state.agentMode, thinking: state.thinking }),
+    h(Box, { flexGrow: 1, flexDirection: 'column' },
+      h(MessageList, {
         messages: state.messages,
         thinking: state.thinking,
         streamContent,
@@ -20,25 +21,13 @@ export function Layout({ state, streamContent, model, provider, showCommands, sh
       })
     ),
     showCommands || showModels
-      ? Box({ flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-          showCommands
-            ? CommandPicker({
-                query: '',
-                onSelect: onCommandSelect,
-                onClose: onCloseCommands,
-              })
-            : null,
-          showModels
-            ? ModelPicker({
-                onSelect: onModelSelect,
-                onClose: onCloseModels,
-              })
-            : null
+      ? h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
+          showCommands ? h(CommandPicker, { query: '', onSelect: onCommandSelect, onClose: onCloseCommands }) : null,
+          showModels ? h(ModelPicker, { onSelect: onModelSelect, onClose: onCloseModels }) : null
         )
       : null,
-    Composer({
-      provider,
-      model,
+    h(Composer, {
+      provider, model,
       agentMode: state.agentMode,
       thinking: state.thinking,
       onSlash,

package/src/components/MessageList.js

@@ -1,70 +1,70 @@
 import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { hex, usym, u } from '../config/theme.js';
-import { getLayout, wrapText, sliceToViewport, buildLineArray } from '../config/layout.js';
-import { MessageBubble } from './MessageBubble.js';
+import { getLayout, sliceToViewport, buildLineArray } from '../config/layout.js';
+const { createElement: h } = React;
 
 function LineRenderer({ type, text, data }) {
   const { cols } = getLayout();
   switch (type) {
     case 'user_head':
-      return Box({ height: 1, backgroundColor: hex.userBg },
-        Text({ color: hex.accent, bold: true, backgroundColor: hex.userBg }, '  ' + usym.circle + ' YOU'),
-        Text({ color: hex.textMuted, backgroundColor: hex.userBg }, ' ' + u.h.repeat(Math.max(0, cols - 10)))
+      return h(Box, { height: 1, backgroundColor: hex.userBg },
+        h(Text, { color: hex.accent, bold: true, backgroundColor: hex.userBg }, '  ' + usym.circle + ' YOU'),
+        h(Text, { color: hex.textMuted, backgroundColor: hex.userBg }, ' ' + u.h.repeat(Math.max(0, cols - 10)))
       );
     case 'user_line':
-      return Box({ height: 1, backgroundColor: hex.userBg },
-        Text({ color: hex.text, backgroundColor: hex.userBg, wrap: 'wrap' }, '  ' + (text || ' '))
+      return h(Box, { height: 1, backgroundColor: hex.userBg },
+        h(Text, { color: hex.text, backgroundColor: hex.userBg, wrap: 'wrap' }, '  ' + (text || ' '))
       );
     case 'asst_head':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.purple, bold: true, backgroundColor: hex.surface }, '  ' + usym.circle + ' CLARITY'),
-        Text({ color: hex.textMuted, backgroundColor: hex.surface }, ' ' + u.h.repeat(Math.max(0, cols - 14)))
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.purple, bold: true, backgroundColor: hex.surface }, '  ' + usym.circle + ' CLARITY'),
+        h(Text, { color: hex.textMuted, backgroundColor: hex.surface }, ' ' + u.h.repeat(Math.max(0, cols - 14)))
       );
     case 'asst_bar':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.textMuted, backgroundColor: hex.surface }, ' ' + usym.lightV)
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.textMuted, backgroundColor: hex.surface }, ' ' + usym.lightV)
       );
     case 'asst_line':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + (text || ' '))
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + (text || ' '))
       );
     case 'asst_foot':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.textDim, backgroundColor: hex.surface }, '  ' + usym.triR2 + ' ' + (parseInt(text) < 1000 ? text + 'ms' : (parseInt(text) / 1000).toFixed(1) + 's'))
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.textDim, backgroundColor: hex.surface }, '  ' + usym.triR2 + ' ' + (parseInt(text) < 1000 ? text + 'ms' : (parseInt(text) / 1000).toFixed(1) + 's'))
       );
     case 'tool_head':
-      return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-        Text({ color: hex.purple, backgroundColor: hex.surfaceAlt }, '  ' + usym.circle + ' ' + text)
+      return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+        h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '  ' + usym.circle + ' ' + text)
       );
     case 'tool_line':
-      return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-        Text({ color: hex.textDim, backgroundColor: hex.surfaceAlt }, '  ' + (text || ' '))
+      return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+        h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, '  ' + (text || ' '))
       );
     case 'sys_line':
-      return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-        Text({ color: hex.green, backgroundColor: hex.surfaceAlt }, '  ' + usym.circle + ' ' + (text || ''))
+      return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+        h(Text, { color: hex.green, backgroundColor: hex.surfaceAlt }, '  ' + usym.circle + ' ' + (text || ''))
       );
     case 'err_line':
-      return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-        Text({ color: hex.red, backgroundColor: hex.surfaceAlt }, '  ' + usym.cross + ' ' + (text || ''))
+      return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+        h(Text, { color: hex.red, backgroundColor: hex.surfaceAlt }, '  ' + usym.cross + ' ' + (text || ''))
       );
     case 'stream_head':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.purple, bold: true, backgroundColor: hex.surface }, '  ' + usym.circle + ' CLARITY'),
-        Text({ color: hex.textMuted, backgroundColor: hex.surface }, ' ' + u.h.repeat(Math.max(0, cols - 14)))
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.purple, bold: true, backgroundColor: hex.surface }, '  ' + usym.circle + ' CLARITY'),
+        h(Text, { color: hex.textMuted, backgroundColor: hex.surface }, ' ' + u.h.repeat(Math.max(0, cols - 14)))
       );
     case 'stream_bar':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.textMuted, backgroundColor: hex.surface }, ' ' + usym.lightV)
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.textMuted, backgroundColor: hex.surface }, ' ' + usym.lightV)
       );
     case 'stream_status':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.blue, backgroundColor: hex.surface }, '  ' + usym.dot + ' ' + (text || ''))
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.blue, backgroundColor: hex.surface }, '  ' + usym.dot + ' ' + (text || ''))
       );
     case 'stream_line':
-      return Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + (text || ' '))
+      return h(Box, { height: 1, backgroundColor: hex.surface },
+        h(Text, { color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + (text || ' '))
       );
     default:
       return null;
@@ -111,13 +111,13 @@ export function MessageList({ messages, thinking, streamContent, agentStatus, to
   const paddedLines = lines;
   for (let i = 0; i < padCount; i++) paddedLines.unshift({ type: 'empty' });
 
-  return Box({ height: viewport, flexDirection: 'column', overflow: 'hidden' },
+  return h(Box, { height: viewport, flexDirection: 'column', overflow: 'hidden' },
     paddedLines.map((ln, i) =>
       ln.type === 'empty'
-        ? Box({ key: 'e' + i, height: 1, backgroundColor: hex.bg },
-            Text({ color: hex.textMuted, backgroundColor: hex.bg }, ' '))
-        : Box({ key: (ln.data?.id || 'l') + '-' + i, height: 1 },
-            LineRenderer({ type: ln.type, text: ln.text, data: ln.data })
+        ? h(Box, { key: 'e' + i, height: 1, backgroundColor: hex.bg },
+            h(Text, { color: hex.textMuted, backgroundColor: hex.bg }, ' '))
+        : h(Box, { key: (ln.data?.id || 'l') + '-' + i, height: 1 },
+            h(LineRenderer, { type: ln.type, text: ln.text, data: ln.data })
           )
     )
   );

package/src/components/StatusBar.js

@@ -2,15 +2,16 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import { getLayout } from '../config/layout.js';
 import { hex, usym } from '../config/theme.js';
+const { createElement: h } = React;
 
 export function StatusBar({ model, provider, agentMode, thinking }) {
-  const { cols, contentWidth } = getLayout();
+  const { cols } = getLayout();
   const modelShort = model.replace(/^[^/]+\//, '').slice(0, 20);
   const left = '\u25C9  CLARITY  ' + usym.midDot + '  ' + modelShort + '  ' + usym.midDot + '  ' + provider;
   const right = (agentMode ? 'Agent:ON' : 'Agent:OFF') + (thinking ? '  \u25CF' : '');
   const gap = Math.max(1, cols - left.length - right.length - 2);
   const line = left + ' '.repeat(gap) + right;
-  return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-    Text({ color: hex.textDim, bold: false, backgroundColor: hex.surfaceAlt }, ' ' + line)
+  return h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
+    h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, ' ' + line)
   );
 }

package/src/components/ThinkingBlock.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Box, Text } from 'ink';
 import { hex, usym, u } from '../config/theme.js';
 import { getLayout } from '../config/layout.js';
+const { createElement: h } = React;
 
 export function ThinkingBlock({ toolResults, duration }) {
   const [collapsed, setCollapsed] = useState(true);
@@ -16,13 +17,13 @@ export function ThinkingBlock({ toolResults, duration }) {
   const rows = 1;
   const totalRows = collapsed ? 1 : 1 + items.length;
 
-  return Box({ flexDirection: 'column', backgroundColor: hex.surfaceAlt },
-    Box({ height: 1 },
-      Text({ color: hex.purple, backgroundColor: hex.surfaceAlt }, '  ' + headerText)
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
+    h(Box, { height: 1 },
+      h(Text, { color: hex.purple, backgroundColor: hex.surfaceAlt }, '  ' + headerText)
     ),
     collapsed
       ? null
-      : Box({ flexDirection: 'column', backgroundColor: hex.surfaceAlt },
+      : h(Box, { flexDirection: 'column', backgroundColor: hex.surfaceAlt },
           items.map((tr, i) => {
             const isLast = i === items.length - 1;
             const prefix = isLast ? usym.treeTip + u.h : usym.treeFork + u.h;
@@ -34,13 +35,13 @@ export function ThinkingBlock({ toolResults, duration }) {
             const contentLine = tr.content && tr.content.length < 200
               ? '  ' + conn + ' ' + String(tr.content).slice(0, cols - 10)
               : null;
-            return Box({ key: tr.execId || i, flexDirection: 'column' },
-              Box({ height: 1 },
-                Text({ color: hex.textMuted, backgroundColor: hex.surfaceAlt }, line)
+            return h(Box, { key: tr.execId || i, flexDirection: 'column' },
+              h(Box, { height: 1 },
+                h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt }, line)
               ),
               contentLine
-                ? Box({ height: 1 },
-                    Text({ color: hex.textDim, backgroundColor: hex.surfaceAlt }, contentLine)
+                ? h(Box, { height: 1 },
+                    h(Text, { color: hex.textDim, backgroundColor: hex.surfaceAlt }, contentLine)
                   )
                 : null
             );

package/src/components/ToolCard.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Box, Text } from 'ink';
 import { hex, usym } from '../config/theme.js';
-import { getLayout, wrapText } from '../config/layout.js';
+import { getLayout } from '../config/layout.js';
+const { createElement: h } = React;
 
 export function ToolCard({ exec, isActive }) {
   const { cols } = getLayout();
@@ -19,8 +20,8 @@ export function ToolCard({ exec, isActive }) {
     const col = status === 'failed' ? hex.red : hex.green;
     const icon = status === 'failed' ? usym.cross : usym.circle;
     const label = icon + ' Tool: ' + name + ' ' + (status === 'failed' ? 'Failed' : 'Successful') + (duration ? ' (' + duration + ')' : '');
-    return Box({ height: minRender },
-      Text({ color: col, backgroundColor: hex.surfaceAlt }, '  ' + label)
+    return h(Box, { height: minRender },
+      h(Text, { color: col, backgroundColor: hex.surfaceAlt }, '  ' + label)
     );
   }
 
@@ -37,10 +38,10 @@ export function ToolCard({ exec, isActive }) {
   if (status === 'running') lines.push('  running...');
 
   const totalLines = Math.min(lines.length, 4);
-  return Box({ height: totalLines, flexDirection: 'column', backgroundColor: hex.surfaceAlt },
+  return h(Box, { height: totalLines, flexDirection: 'column', backgroundColor: hex.surfaceAlt },
     lines.slice(0, 4).map((line, i) =>
-      Box({ key: i, height: 1 },
-        Text({ color: i === 0 ? hex.purple : hex.textDim, backgroundColor: hex.surfaceAlt }, '  ' + line)
+      h(Box, { key: i, height: 1 },
+        h(Text, { color: i === 0 ? hex.purple : hex.textDim, backgroundColor: hex.surfaceAlt }, '  ' + line)
       )
     )
   );

package/src/components/MessageBubble.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { hex, usym, u, boxTitle } from '../config/theme.js';
-import { getLayout, wrapText } from '../config/layout.js';
-import { ToolCard } from './ToolCard.js';
-import { CodeBlock } from './CodeBlock.js';
-
-function splitCodeBlocks(text) {
-  if (!text) return [{ type: 'text', content: '' }];
-  const parts = [];
-  const cb = /```(\w*)\n?([\s\S]*?)```/g;
-  let last = 0, m;
-  while ((m = cb.exec(text)) !== null) {
-    if (m.index > last) parts.push({ type: 'text', content: text.slice(last, m.index) });
-    parts.push({ type: 'code', lang: m[1] || 'text', code: m[2] });
-    last = m.index + m[0].length;
-  }
-  if (last < text.length) parts.push({ type: 'text', content: text.slice(last) });
-  return parts.length ? parts : [{ type: 'text', content: text }];
-}
-
-export function MessageBubble({ msg }) {
-  const { cols, contentWidth } = getLayout();
-  const w = contentWidth;
-
-  if (msg.role === 'user') {
-    const lines = wrapText(msg.content, w).split('\n');
-    return Box({ flexDirection: 'column', marginBottom: 0, backgroundColor: hex.userBg },
-      Box({ height: 1, backgroundColor: hex.userBg },
-        Text({ color: hex.accent, bold: true, backgroundColor: hex.userBg }, '  ' + usym.circle + ' YOU'),
-        Text({ color: hex.textMuted, backgroundColor: hex.userBg }, ' ' + u.h.repeat(Math.max(0, cols - 10)))
-      ),
-      Box({ flexDirection: 'column', backgroundColor: hex.userBg },
-        lines.map((line, i) =>
-          Box({ key: i, height: 1, backgroundColor: hex.userBg },
-            Text({ color: hex.text, backgroundColor: hex.userBg, wrap: 'wrap' }, '  ' + (line || ' '))
-          )
-        )
-      )
-    );
-  }
-
-  if (msg.role === 'assistant') {
-    const parts = splitCodeBlocks(msg.content);
-    const hasToolResults = msg.toolResults && msg.toolResults.length > 0;
-
-    return Box({ flexDirection: 'column', backgroundColor: hex.surface },
-      Box({ height: 1, backgroundColor: hex.surface },
-        Text({ color: hex.purple, bold: true, backgroundColor: hex.surface }, '  ' + usym.circle + ' CLARITY'),
-        Text({ color: hex.textMuted, backgroundColor: hex.surface }, ' ' + u.h.repeat(Math.max(0, cols - 14)))
-      ),
-      hasToolResults
-        ? ToolCard({ exec: msg.toolResults[0], isActive: false })
-        : null,
-      Box({ flexDirection: 'column', backgroundColor: hex.surface },
-        parts.map((part, i) =>
-          part.type === 'code'
-            ? CodeBlock({ key: i, code: part.code, language: part.lang, width: w })
-            : Box({ key: i, flexDirection: 'column', backgroundColor: hex.surface },
-                wrapText(part.content, w).split('\n').map((line, j) =>
-                  Box({ key: j, height: 1 },
-                    Text({ color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + (line || ' '))
-                  )
-                )
-              )
-        )
-      ),
-      msg.duration && !hasToolResults
-        ? Box({ height: 1, backgroundColor: hex.surface },
-            Text({ color: hex.textDim, backgroundColor: hex.surface }, '  ' + usym.triR2 + ' ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
-          )
-        : null
-    );
-  }
-
-  if (msg.role === 'tool') {
-    const icon = msg.error ? usym.cross : usym.circle;
-    const col = msg.error ? hex.red : hex.green;
-    const name = msg.toolName || 'tool';
-    return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-      Text({ color: col, backgroundColor: hex.surfaceAlt }, '  ' + icon + ' ' + name + (msg.duration ? ' ' + msg.duration + 'ms' : ''))
-    );
-  }
-
-  if (msg.role === 'error') {
-    return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-      Text({ color: hex.red, backgroundColor: hex.surfaceAlt }, '  ' + usym.cross + ' ' + String(msg.content).slice(0, cols - 6))
-    );
-  }
-
-  if (msg.role === 'system') {
-    return Box({ height: 1, backgroundColor: hex.surfaceAlt },
-      Text({ color: hex.green, backgroundColor: hex.surfaceAlt }, '  ' + usym.circle + ' ' + String(msg.content).slice(0, cols - 6))
-    );
-  }
-
-  return null;
-}

package/src/components/ResponseCard.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { hex, usym, u } from '../config/theme.js';
-import { getLayout, wrapText } from '../config/layout.js';
-
-export function ResponseCard({ content, status, isStreaming }) {
-  const { cols, contentWidth } = getLayout();
-  const w = contentWidth;
-  const header = Box({ height: 1 },
-    Text({ color: hex.purple, backgroundColor: hex.surface }, '  ' + usym.circle + ' CLARITY'),
-    Text({ color: hex.textMuted, backgroundColor: hex.surface }, ' ' + u.h.repeat(Math.max(0, cols - 14)))
-  );
-
-  const bar = Box({ height: 1 },
-    Text({ color: hex.textMuted, backgroundColor: hex.surface }, ' ' + usym.lightV)
-  );
-
-  const statusLine = status
-    ? Box({ height: 1 },
-        Text({ color: hex.blue, backgroundColor: hex.surface }, '  ' + usym.dot + ' ' + status)
-      )
-    : null;
-
-  const wrapped = wrapText(content || '', w);
-  const contentLines = wrapped ? wrapped.split('\n') : [];
-
-  const maxLines = 40;
-  const visibleContentLines = contentLines.slice(0, maxLines);
-  const hasMore = contentLines.length > maxLines;
-
-  const contentBlocks = visibleContentLines.map((line, i) =>
-    Box({ key: i, height: 1 },
-      Text({ color: hex.text, backgroundColor: hex.surface, wrap: 'wrap' }, '  ' + line)
-    )
-  );
-
-  const moreLine = hasMore
-    ? Box({ height: 1 },
-        Text({ color: hex.textMuted, backgroundColor: hex.surface }, '  ' + usym.ellipsis + ' ' + (contentLines.length - maxLines) + ' more lines')
-      )
-    : null;
-
-  const footer = isStreaming
-    ? Box({ height: 1 },
-        Text({ color: hex.blue, backgroundColor: hex.surface }, '  ' + usym.dot + ' streaming...')
-      )
-    : null;
-
-  const rows = [header, bar, statusLine, ...contentBlocks, moreLine, footer].filter(Boolean);
-  return Box({ flexDirection: 'column', backgroundColor: hex.surface },
-    ...rows
-  );
-}