clarity-ai 4.1.0 → 4.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "clarity-ai",
-  "version": "4.1.0",
-  "description": "Premium terminal AI chat for Termux — Ink+React TUI with streaming, markdown, agent mode",
+  "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"
@@ -15,17 +15,11 @@
   "dependencies": {
     "ink": "^5",
     "react": "^18",
-    "ink-text-input": "^5",
-    "ink-select-input": "^5",
+    "ink-text-input": "^6.0.0",
     "ink-spinner": "^5",
     "ink-big-text": "^2",
     "ink-gradient": "^3",
     "marked": "^12",
-    "cli-highlight": "^2",
-    "wrap-ansi": "^9",
-    "string-width": "^7",
-    "strip-ansi": "^7",
-    "ansi-escapes": "^6",
-    "groq-sdk": "^2"
+    "cli-highlight": "^2"
   }
 }

package/src/app.js

@@ -1,13 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { Box, useApp } from 'ink';
+import { Box } from 'ink';
 import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
-import { InputArea } from './components/InputArea.js';
-import { StatusBar } from './components/StatusBar.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 { useHistory } from './hooks/useHistory.js';
 import { createChatState, handleSend, handleCommand } from './chat.js';
 const { createElement: h } = React;
 
@@ -19,7 +17,6 @@ export function App({ config }) {
   const [showModels, setShowModels] = useState(false);
   const [showBanner, setShowBanner] = useState(true);
   const { scrollOffset, termHeight } = useScroll(state.messages.length);
-  const { goBack, goForward } = useHistory();
 
   const onSubmit = useCallback(async (input) => {
     if (input.startsWith('/')) {
@@ -48,12 +45,15 @@ export function App({ config }) {
     }));
   }
 
-  const messages = state.messages;
-
   return h(Box, { flexDirection: 'column', height: '100%' },
-    h(Box, { flexGrow: 1, flexDirection: 'column', overflowY: 'hidden' },
+    h(Box, { flexGrow: 1, flexDirection: 'column' },
       showBanner ? h(Banner) : null,
-      h(MessageList, { messages, thinking: state.thinking, scrollOffset, termHeight })
+      h(MessageList, {
+        messages: state.messages,
+        thinking: state.thinking,
+        scrollOffset,
+        termHeight,
+      })
     ),
     showCommands ? h(CommandPicker, {
       query: '',
@@ -64,7 +64,13 @@ export function App({ config }) {
       onSelect: handleModelSelect,
       onClose: () => setShowModels(false),
     }) : null,
-    h(InputArea, { onSubmit, onSlash: () => setShowCommands(true), thinking: state.thinking }),
-    h(StatusBar, { provider, model, agentMode: state.agentMode })
+    h(PromptBox, {
+      provider,
+      model,
+      agentMode: state.agentMode,
+      thinking: state.thinking,
+      onSlash: () => setShowCommands(true),
+      onSubmit,
+    })
   );
 }

package/src/components/MessageBubble.js

@@ -1,82 +1,66 @@
 import React from 'react';
 import { Box, Text } from 'ink';
-import { marked } from 'marked';
-import { renderMarkdown } from '../renderer/markdown.js';
-import { renderTable } from '../renderer/table.js';
-import { renderDiff } from '../renderer/diff.js';
-import { ErrorMessage } from './ErrorMessage.js';
 const { createElement: h } = React;
-
 const termWidth = () => process.stdout.columns || 80;
 
-function YouMessage({ text }) {
-  return h(Box, { flexDirection: 'column', marginBottom: 1 },
-    h(Box, null,
-      h(Text, { color: '#00FFD1', bold: true }, 'YOU '),
-      h(Text, { color: '#FF2EF7' }, '\u2500'.repeat(Math.max(0, termWidth() - 7)))
-    ),
-    h(Box, { paddingLeft: 2 },
-      h(Text, { wrap: 'wrap' }, text)
-    )
-  );
-}
-
-function AssistantMessage({ text, streaming }) {
-  let content;
-  if (streaming) {
-    content = h(Text, { wrap: 'wrap' }, text);
-  } else {
-    try {
-      const tokens = marked.lexer(text);
-      const rendered = renderMarkdown(tokens);
-      content = h(Box, { flexDirection: 'column' }, ...rendered);
-    } catch {
-      content = h(Text, { wrap: 'wrap' }, text);
-    }
+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
+        )
+      )
+    );
   }
 
-  return h(Box, { flexDirection: 'column', marginBottom: 1 },
-    h(Box, null,
-      h(Text, { color: '#F0F0F0', bold: true }, 'CLARITY '),
-      h(Text, { color: '#555555' }, '\u2500'.repeat(Math.max(0, termWidth() - 11)))
-    ),
-    h(Box, { paddingLeft: 2 }, content)
-  );
-}
-
-function ToolMessage({ text }) {
-  const lines = text.split('\n');
-  const header = lines[0];
-  const body = lines.slice(1).join('\n');
-
-  return h(Box, { flexDirection: 'column', marginBottom: 1 },
-    h(Box, null,
-      h(Text, { color: '#FFD700', bold: true }, 'TOOL '),
-      h(Text, { color: '#555555' }, '\u2500'.repeat(Math.max(0, termWidth() - 8)))
-    ),
-    h(Box, { paddingLeft: 2 },
-      h(Text, { color: '#FFD700', dimColor: true }, header)
-    ),
-    body ? h(Box, { paddingLeft: 2 },
-      h(Text, { color: '#F0F0F0' }, body)
-    ) : null
-  );
-}
+  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)
+        )
+      )
+    );
+  }
 
-function SystemMessage({ text }) {
-  return h(Box, { paddingLeft: 2, marginBottom: 1 },
-    h(Text, { color: '#00FF88' }, '\u2714 '),
-    h(Text, { color: '#00FF88' }, text)
-  );
-}
+  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))
+      )
+    );
+  }
 
-export function MessageBubble({ msg }) {
-  if (msg.role === 'user') return h(YouMessage, { text: msg.content });
-  if (msg.role === 'assistant') return h(AssistantMessage, { text: msg.content, streaming: msg.streaming });
-  if (msg.role === 'tool') return h(ToolMessage, { text: msg.content });
   if (msg.role === 'error') {
-    return h(ErrorMessage, { raw: msg.content });
+    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(SystemMessage, { text: msg.content });
+
+  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/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',
+      })
+    )
+  );
+}