clarity-ai 6.3.0 → 6.3.1

package/package.json

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

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

@@ -2,7 +2,6 @@ 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';
 
 function LineRenderer({ type, text, data }) {
   const { cols } = getLayout();

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