clarity-ai 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ---
 
+## 7.1.0 (2026-06-06)
+
+### Premium UI/UX overhaul — high-texture capsule design with live streaming
+- **Massive ASCII art banner**: 6-line figlet-style "CLARITY" in orange→purple→blue gradient (auto-falls back for narrow terminals)
+- **Solid Ink capsule cards**: zero wire borders (`|`, `[`, `]`, `-` banned). All containers use `backgroundColor` blocks with graphite (#1C1C1C) surfaces
+- **Orange accent selection**: `#FF9F43` full-width highlight bars with black text for all active/focus elements
+- **State machine**: `IDLE` → `THINKING` (live elapsed counter in ms) → `STREAMING` — each with distinct badge coloring
+- **Live token streaming**: every chunk runs through `wrap-ansi` + `string-width` against current terminal width; no pre-packaged truncation
+- **Dynamic viewport hardening**: `process.stdout.on('resize')` tracks live dimensions; auto-scrolls old content up while keeping input anchored
+
 ## 7.0.0 (2026-06-06)
 
 ### Ground-up architectural rebuild — centered minimalist terminal platform

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {
@@ -28,7 +28,6 @@
     "gradient-string": "^3",
     "ink": "^5",
     "ink-spinner": "^5",
-    "ink-text-input": "^6.0.0",
     "react": "^18",
     "string-width": "^7",
     "wrap-ansi": "^9"

package/src/app.js

@@ -3,9 +3,10 @@ import { Box, Text, useStdout } from 'ink';
 import { createChatState, handleSend, handleCommand } from './chat.js';
 import { hex } from './config/theme.js';
 import { getLayout } from './config/layout.js';
-import { Header } from './components/Header.js';
+import { Banner } from './components/Banner.js';
+import { StatusBar } from './components/StatusBar.js';
 import { StreamView } from './components/StreamView.js';
-import { PromptCard } from './components/PromptCard.js';
+import { InputPanel } from './components/InputPanel.js';
 import { Footer } from './components/Footer.js';
 const { createElement: h } = React;
 
@@ -26,11 +27,18 @@ export function cancelStream() {
   }
 }
 
+function deriveStatus(state, streamContent) {
+  if (!state.thinking) return 'idle';
+  if (state.thinking && streamContent) return 'streaming';
+  return 'thinking';
+}
+
 export function App({ config }) {
   const { stdout } = useStdout();
   const [dims, setDims] = useState({ rows: stdout.rows || 30, cols: stdout.columns || 80 });
   const [state, setState] = useState(() => createChatState());
   const [streamContent, setStreamContent] = useState('');
+  const [thinkingStart, setThinkingStart] = useState(null);
   const defaultModel = (config.model || 'groq/llama-3.3-70b-versatile').replace(/^[^/]+\//, '');
   const [model, setModel] = useState(defaultModel);
   const [provider, setProvider] = useState(config.provider || 'groq');
@@ -50,11 +58,18 @@ export function App({ config }) {
     return () => process.stdout.removeListener('resize', onResize);
   }, []);
 
+  useEffect(() => {
+    if (state.thinking && !thinkingStart) {
+      setThinkingStart(Date.now());
+    } else if (!state.thinking) {
+      setThinkingStart(null);
+    }
+  }, [state.thinking]);
+
   const cols = dims.cols;
   const rows = dims.rows;
-  const isCompact = cols < 50;
-  const cardWidth = Math.min(cols - 4, 55);
-  const contentPad = isCompact ? 1 : 2;
+  const status = deriveStatus(state, streamContent);
+  const cardWidth = Math.min(cols - 4, 56);
 
   const onSubmit = useCallback(async (input) => {
     if (input === '/exit') { process.exit(0); return; }
@@ -86,17 +101,18 @@ export function App({ config }) {
 
   return h(Box, { width: '100%', height: '100%', flexDirection: 'column', alignItems: 'center', backgroundColor: hex.bg },
     h(Box, { flexGrow: 1, minHeight: 1 }),
-    h(Header, { cols }),
-    h(Box, { flexGrow: 2, width: cardWidth, minHeight: 2 },
-      h(StreamView, { messages: state.messages, streamContent, thinking: state.thinking, width: cardWidth - 2 })
+    h(Banner, { cols }),
+    h(StatusBar, { status, thinkingStart }),
+    h(Box, { flexGrow: 2, width: cardWidth, minHeight: 2, flexDirection: 'column' },
+      h(StreamView, { messages: state.messages, streamContent, status, width: cardWidth })
     ),
-    h(PromptCard, {
+    h(Box, { height: 1 }),
+    h(InputPanel, {
       width: cardWidth,
-      compact: isCompact,
       provider,
       model,
       agentMode: state.agentMode,
-      thinking: state.thinking,
+      status,
       onSubmit: handleInputSubmit,
     }),
     h(Box, { flexGrow: 1, minHeight: 1 }),

package/src/components/Banner.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { appGradient } from '../config/theme.js';
+const { createElement: h } = React;
+
+const BANNER_FULL = [
+  ' ██████╗██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
+  '██╔════╝██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
+  '██║  ███╗██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
+  '██║   ██║██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
+  '╚██████╔╝███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
+  ' ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+];
+
+const BANNER_MED = [
+  '██████╗ ██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
+  '██╔════╝ ██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
+  '███████╗ ██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
+  '╚════██║ ██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
+  '██████╔╝ ███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
+  '╚═════╝  ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+];
+
+export function Banner({ cols }) {
+  if (cols < 50) {
+    return h(Box, { height: 2, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Text, { bold: true }, appGradient('CLARITY'))
+    );
+  }
+
+  const lines = cols < 60 ? BANNER_MED : BANNER_FULL;
+  const bannerHeight = lines.length;
+
+  return h(Box, { height: bannerHeight, width: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' },
+    lines.map((line, i) =>
+      h(Box, { key: i, height: 1 },
+        h(Text, { bold: true }, appGradient.multiline(line))
+      )
+    )
+  );
+}

package/src/components/Footer.js

@@ -4,19 +4,20 @@ import { hex } from '../config/theme.js';
 const { createElement: h } = React;
 
 export function Footer({ cols }) {
-  const showFull = cols >= 60;
+  const showFull = cols >= 58;
   const keybindText = 'tab agents    ctrl+p commands';
-  const tipText = 'Tip: Use /help to view system commands and switch active models';
 
   return h(Box, { width: '100%', flexDirection: 'column', backgroundColor: hex.bg },
-    h(Box, { height: 1, justifyContent: 'flex-end', paddingRight: 2 },
+    h(Box, { height: 1, justifyContent: 'flex-end', paddingRight: 2, backgroundColor: hex.bg },
       h(Text, { color: hex.textMuted }, keybindText)
     ),
-    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2 },
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.bg },
       h(Text, { color: hex.textDim },
         '\u2580 ',
-        h(Text, { color: hex.blue }, 'Tip'),
-        h(Text, { color: hex.textDim }, ': ' + (showFull ? tipText : 'Use /help for commands'))
+        h(Text, { color: hex.orange }, 'Tip'),
+        h(Text, { color: hex.textDim }, ': ' + (showFull
+          ? 'Use /help to view system commands and switch active models'
+          : 'Use /help for commands'))
       )
     )
   );

package/src/components/InputPanel.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+export function InputPanel({ width, provider, model, agentMode, status, onSubmit }) {
+  const [input, setInput] = useState('');
+  const isLocked = status !== 'idle';
+  const mShort = model.replace(/^[^/]+\//, '').slice(0, 18);
+  const innerW = Math.max(4, width - 4);
+
+  function handleSubmit(value) {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+    setInput('');
+  }
+
+  return h(Box, { width, flexDirection: 'column', backgroundColor: hex.cardBg },
+    h(Box, { height: 1, backgroundColor: hex.orange }),
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
+      h(TextInput, {
+        value: input,
+        onChange: setInput,
+        onSubmit: handleSubmit,
+        placeholder: 'Ask anything...',
+        focus: !isLocked,
+      })
+    ),
+    h(Box, { height: 1, paddingLeft: 2, paddingRight: 2, backgroundColor: hex.cardBg },
+      h(Text, { color: hex.textMuted },
+        provider + ' \u00B7 ' + mShort + (agentMode ? ' \u00B7 AGENT' : '') +
+        ' '.repeat(Math.max(0, innerW - provider.length - mShort.length - (agentMode ? 10 : 4))) +
+        (isLocked ? '' : ''))
+    ),
+    h(Box, { height: 1, backgroundColor: hex.cardBg }),
+  );
+}

package/src/components/StatusBar.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { hex } from '../config/theme.js';
+const { createElement: h } = React;
+
+export function StatusBar({ status, thinkingStart }) {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (status === 'idle') { setElapsed(0); return; }
+    const id = setInterval(() => {
+      setElapsed(thinkingStart ? Date.now() - thinkingStart : 0);
+    }, 100);
+    return () => clearInterval(id);
+  }, [status, thinkingStart]);
+
+  const isThinking = status === 'thinking';
+  const isStreaming = status === 'streaming';
+
+  if (status === 'idle') {
+    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+        h(Text, { color: hex.textMuted }, '  IDLE  ')
+      )
+    );
+  }
+
+  if (isThinking) {
+    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+        h(Text, { color: hex.orange }, '  \u25CF THINKING ' + elapsed + 'ms  ')
+      )
+    );
+  }
+
+  if (isStreaming) {
+    return h(Box, { height: 1, width: '100%', alignItems: 'center', justifyContent: 'center' },
+      h(Box, { backgroundColor: hex.surfaceAlt, paddingX: 1 },
+        h(Text, { color: hex.blue }, '  \u25CF STREAMING ' + elapsed + 'ms  ')
+      )
+    );
+  }
+
+  return null;
+}

package/src/components/StreamView.js

@@ -1,77 +1,103 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useEffect } from 'react';
 import { Box, Text } from 'ink';
 import { hex } from '../config/theme.js';
 import wrapAnsi from 'wrap-ansi';
-import cliTruncate from 'cli-truncate';
+import stringWidth from 'string-width';
 const { createElement: h } = React;
 
-function wrap(text, width) {
-  if (!text) return '';
-  return wrapAnsi(String(text), Math.max(1, width), { trim: false, hard: true });
+function wrapText(text, width) {
+  if (!text) return [];
+  return wrapAnsi(String(text), Math.max(4, width), { trim: false, hard: true }).split('\n');
 }
 
-function trunc(text, width) {
-  return cliTruncate(text || '', Math.max(1, width), { position: 'end' });
-}
+function MessageBlock({ msg, width }) {
+  const lines = useMemo(() => wrapText(msg.content, width), [msg.content, width]);
 
-function MessageLine({ line, width }) {
-  switch (line.role) {
-    case 'system':
-      return h(Box, { height: 1 },
-        h(Text, { color: hex.blue }, '  \u25C9 ' + trunc(line.content, width - 4))
-      );
+  switch (msg.role) {
     case 'user':
-      return h(Box, { height: 1 },
-        h(Text, { color: hex.accent, bold: true }, '  \u276F '),
-        h(Text, { color: hex.text }, trunc(line.content, width - 4))
+      return h(Box, { flexDirection: 'column', marginBottom: 0 },
+        h(Box, { height: 1 },
+          h(Text, { color: hex.orange, bold: true }, '  \u276F '),
+          h(Text, { color: hex.text }, lines[0] || '')
+        ),
+        lines.slice(1).map((l, i) =>
+          h(Box, { key: i, height: 1 },
+            h(Text, { color: hex.text }, '    ' + l)
+          )
+        )
       );
     case 'assistant':
+      return h(Box, { flexDirection: 'column', marginBottom: 1 },
+        h(Box, { height: 1 },
+          h(Text, { color: hex.purple, bold: true }, '  \u25C6 '),
+          h(Text, { color: hex.text }, lines[0] || '')
+        ),
+        lines.slice(1).map((l, i) =>
+          h(Box, { key: i, height: 1 },
+            h(Text, { color: hex.text }, '    ' + l)
+          )
+        ),
+        msg.duration
+          ? h(Box, { height: 1 },
+              h(Text, { color: hex.textMuted }, '    ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
+            )
+          : null
+      );
+    case 'system':
       return h(Box, { height: 1 },
-        h(Text, { color: hex.purple, bold: true }, '  \u25C6 '),
-        h(Text, { color: hex.text }, trunc(line.content, width - 4))
+        h(Text, { color: hex.blue }, '  \u25C9 ' + lines[0] || '')
       );
     case 'tool':
       return h(Box, { height: 1 },
-        h(Text, { color: hex.green }, '    \u25C9 ' + trunc((line.toolName || 'tool') + (line.duration ? ' ' + line.duration + 'ms' : ''), width - 6))
+        h(Text, { color: hex.green }, '    \u25C9 ' + (msg.toolName || 'tool') + (msg.duration ? ' ' + msg.duration + 'ms' : ''))
       );
     case 'error':
       return h(Box, { height: 1 },
-        h(Text, { color: hex.red }, '  \u2716 ' + trunc(line.content, width - 4))
+        h(Text, { color: hex.red }, '  \u2716 ' + lines[0] || msg.content)
       );
     default:
       return null;
   }
 }
 
-function StreamingLine({ content, width }) {
-  const wrapped = wrap(content || '', width - 4);
-  const first = wrapped.split('\n')[0] || '';
-  return h(Box, { height: 1 },
-    h(Text, { color: hex.purple }, '  \u25CF '),
-    h(Text, { color: hex.text }, trunc(first, width - 4))
+function StreamingBlock({ content, width }) {
+  const lines = useMemo(() => wrapText(content, width), [content, width]);
+  const visible = lines.slice(-100);
+  const first = visible[0] || '';
+
+  return h(Box, { flexDirection: 'column' },
+    h(Box, { height: 1 },
+      h(Text, { color: hex.blue, bold: true }, '  \u25CF '),
+      h(Text, { color: hex.text }, first)
+    ),
+    visible.slice(1).map((l, i) =>
+      h(Box, { key: i, height: 1 },
+        h(Text, { color: hex.text }, '    ' + l)
+      )
+    )
   );
 }
 
-export function StreamView({ messages, streamContent, thinking, width }) {
-  const contentW = Math.max(1, width - 2);
+export function StreamView({ messages, streamContent, status, width }) {
+  const contentW = Math.max(4, width - 2);
 
-  const visibleMessages = useMemo(() => {
+  const displayMessages = useMemo(() => {
     if (messages.length === 0) {
-      return [{ id: 'empty', role: 'system', content: 'CLARITY AI ready  \u00B7  Ctrl+P commands  \u00B7  /help' }];
+      return [{ id: 'welcome', role: 'system', content: 'CLARITY AI ready  \u00B7  /help for commands' }];
     }
-    return messages.slice(-20);
+    return messages;
   }, [messages]);
 
   return h(Box, { flexDirection: 'column', width: '100%', paddingLeft: 1, paddingRight: 1 },
-    visibleMessages.map(m =>
-      h(MessageLine, { key: m.id, line: m, width: contentW })
+    displayMessages.map(m =>
+      h(MessageBlock, { key: m.id, msg: m, width: contentW })
     ),
-    thinking && streamContent
-      ? h(StreamingLine, { content: streamContent, width: contentW })
+    (status === 'streaming' || status === 'thinking') && streamContent
+      ? h(StreamingBlock, { content: streamContent, width: contentW })
       : null,
-    thinking && !streamContent
+    status === 'thinking' && !streamContent
       ? h(Box, { height: 1 },
-          h(Text, { color: hex.blue }, '  \u25CF processing...')
+          h(Text, { color: hex.textMuted }, '  \u25CF processing...')
         )
       : null,
   );

package/src/config/theme.js

@@ -2,33 +2,37 @@ import chalk from 'chalk';
 import gradient from 'gradient-string';
 
 export const hex = {
-  bg: '#0A0A14',
-  surface: '#111125',
-  surfaceAlt: '#161630',
-  userBg: '#140A28',
-  codeBg: '#0D0D18',
-  selectionBg: '#FF6B35',
-  selectionText: '#FFFFFF',
-  accent: '#FF6B35',
+  bg: '#0D0D14',
+  surface: '#111118',
+  surfaceAlt: '#16161E',
+  cardBg: '#1C1C1C',
+  inputBg: '#1A1A22',
+  codeBg: '#0D0D14',
+  selectionBg: '#FF9F43',
+  selectionText: '#000000',
+  accent: '#FF9F43',
+  orange: '#FF9F43',
   purple: '#A855F7',
   green: '#22C55E',
   red: '#EF4444',
   gold: '#F59E0B',
   blue: '#3B82F6',
   cyan: '#22D3EE',
-  text: '#EAEAEE',
-  textDim: '#8888AA',
-  textMuted: '#555577',
+  text: '#EEEEF0',
+  textDim: '#9999AA',
+  textMuted: '#555566',
 };
 
 export const color = {
   bg: chalk.hex(hex.bg),
   surface: chalk.hex(hex.surface),
   surfaceAlt: chalk.hex(hex.surfaceAlt),
-  userBg: chalk.hex(hex.userBg),
+  cardBg: chalk.hex(hex.cardBg),
+  inputBg: chalk.hex(hex.inputBg),
   selectionBg: chalk.hex(hex.selectionBg),
   selectionText: chalk.hex(hex.selectionText),
   accent: chalk.hex(hex.accent),
+  orange: chalk.hex(hex.orange),
   purple: chalk.hex(hex.purple),
   green: chalk.hex(hex.green),
   red: chalk.hex(hex.red),
@@ -40,4 +44,4 @@ export const color = {
   textMuted: chalk.hex(hex.textMuted),
 };
 
-export const appGradient = gradient(['#FF6B35', '#3B82F6']);
+export const appGradient = gradient(['#FF9F43', '#A855F7', '#3B82F6']);

package/src/components/Header.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import { appGradient } from '../config/theme.js';
-const { createElement: h } = React;
-
-export function Header({ cols }) {
-  const label = appGradient('CLARITY');
-  return h(Box, { height: 3, width: '100%', alignItems: 'center', justifyContent: 'center' },
-    h(Text, { bold: true }, label)
-  );
-}

package/src/components/PromptCard.js

@@ -1,50 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
-import { hex } from '../config/theme.js';
-const { createElement: h } = React;
-
-const DIVIDER = '\u2500';
-
-export function PromptCard({ width, compact, provider, model, agentMode, thinking, onSubmit }) {
-  const [input, setInput] = useState('');
-  const mShort = model.replace(/^[^/]+\//, '').slice(0, compact ? 10 : 20);
-  const pShort = provider.slice(0, compact ? 6 : 10);
-  const statusLine = '[ ' + pShort + '  \u00B7  ' + mShort + (agentMode ? '  \u00B7  AGENT' : '') + ' ]';
-  const innerW = width - 2;
-
-  function handleSubmit(value) {
-    onSubmit(value);
-    setInput('');
-  }
-
-  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.surface },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.textMuted },
-        '\u250C' + '\u2500'.repeat(Math.max(0, innerW)) + '\u2510')
-    ),
-    h(Box, { height: 1, paddingLeft: 1, paddingRight: 1 },
-      h(TextInput, {
-        value: input,
-        onChange: setInput,
-        onSubmit: handleSubmit,
-        placeholder: 'Ask anything...',
-        focus: !thinking,
-      })
-    ),
-    h(Box, { height: 1 },
-      h(Text, { color: hex.textMuted },
-        '\u2502' + '\u2500'.repeat(Math.max(0, innerW)) + '\u2502')
-    ),
-    h(Box, { height: 1, paddingLeft: 1, paddingRight: 1, alignItems: 'center' },
-      h(Text, { color: hex.textDim },
-        statusLine + ' '.repeat(Math.max(0, innerW - statusLine.length - 1))
-      ),
-      h(Text, { color: hex.textMuted }, '\u2502')
-    ),
-    h(Box, { height: 1 },
-      h(Text, { color: hex.textMuted },
-        '\u2514' + '\u2500'.repeat(Math.max(0, innerW)) + '\u2518')
-    ),
-  );
-}