clarity-ai 7.2.0 → 7.2.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ---
 
+## 7.2.1 (2026-06-06)
+
+### Critical hotfix: mouse bleed elimination, CLARITY branding, TrueColor textures
+- **FIXED input corruption**: Removed XTerm mouse tracking (`\x1b[?1000h`) entirely. Raw `\x1b[<0;54;41M` sequences no longer leak into the chat text buffer. Termux soft keyboard now works reliably without raw-mode conflicts.
+- **FIXED ASCII logo**: Replaced the figlet banner that rendered as "GLARITY" with a clean 5-line solid block matrix (`██████`) that unambiguously spells CLARITY. Three-tier sizing (5-line / 3-line compact / 1-line gradient).
+- **TrueColor panel textures**: Every message block, streaming pane, and popup container now uses explicit `#1C1C1C` graphite backgrounds. No naked terminal defaults. Orange `#FF9F43` full-width selection bar with `#000000` black text on all active popup rows.
+- **Stderr isolation maintained**: `console.log/error/warn` continue routing to `clarity-debug.log` to prevent stray backend traces from corrupting the UI layer.
+
 ## 7.2.0 (2026-06-06)
 
 ### Sticky floating overlay engine — touch selection, phase-driven layout, virtualized log

package/bin/clarity.js

@@ -57,14 +57,14 @@ async function main() {
     logFile.write('[CLEANUP] CLARITY exiting\n');
     logFile.end();
     try { clear(); } catch {}
-    process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+    process.stdout.write('\x1b[?25h\x1b[0m');
     process.exit(0);
   }
 
   process.on('SIGINT', () => cleanup());
   process.on('SIGTERM', () => cleanup());
   process.on('exit', () => {
-    process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+    process.stdout.write('\x1b[?25h\x1b[0m');
   });
 
   await new Promise(() => {});
@@ -76,7 +76,7 @@ main().catch(err => {
   console.warn = originalWarn;
   logFile.write('[FATAL] ' + (err?.message || String(err)) + '\n');
   logFile.end();
-  process.stdout.write('\x1b[?1000l\x1b[?1006l\x1b[?25h\x1b[0m');
+  process.stdout.write('\x1b[?25h\x1b[0m');
   console.error('\n\x1b[31mFatal error:\x1b[0m', err?.message || err);
   process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "description": "CLARITY — terminal AI agent with local GGUF inference on HF Spaces",
   "type": "module",
   "bin": {

package/src/app.js

@@ -8,7 +8,6 @@ import { StreamView } from './components/StreamView.js';
 import { InputDock } from './components/InputDock.js';
 import { SlashPopup } from './components/SlashPopup.js';
 import { Footer } from './components/Footer.js';
-import { useMouse } from './hooks/useMouse.js';
 const { createElement: h } = React;
 
 let abortController = null;
@@ -24,6 +23,12 @@ const FOOTER_H = 2;
 const STATUS_H = 1;
 const POPUP_W = 44;
 
+const COMMAND_ITEMS = [
+  { name: '/keys' }, { name: '/model' }, { name: '/provider' },
+  { name: '/agent' }, { name: '/stop' }, { name: '/clear' },
+  { name: '/export' }, { name: '/help' }, { name: '/exit' },
+];
+
 function deriveStatus(state, sc) {
   if (!state.thinking) return 'idle';
   return sc ? 'streaming' : 'thinking';
@@ -33,6 +38,12 @@ function hasRealMessages(msgs) {
   return msgs.some(m => m.role === 'user' || m.role === 'assistant');
 }
 
+function getFiltered(input) {
+  const q = input.replace(/^\//, '').toLowerCase();
+  if (!q) return COMMAND_ITEMS;
+  return COMMAND_ITEMS.filter(c => c.name.includes(q));
+}
+
 export function App({ config }) {
   const { stdout } = useStdout();
   const [dims, setDims] = useState({ rows: stdout.rows || 30, cols: stdout.columns || 80 });
@@ -54,7 +65,7 @@ export function App({ config }) {
 
   const rows = dims.rows;
   const cols = dims.cols;
-  const bannerH = cols < 50 ? 2 : 6;
+  const bannerH = cols < 50 ? 2 : (cols < 60 ? 3 : 5);
   const status = deriveStatus(state, streamContent);
   const isChat = hasRealMessages(state.messages);
   const cardW = Math.min(cols - 4, 56);
@@ -62,7 +73,7 @@ export function App({ config }) {
   const availLines = Math.max(2, rows - bannerH - STATUS_H - DOCK_H - FOOTER_H - 2);
 
   useEffect(() => {
-    function onResize() { setDims({ r: process.stdout.rows || 30, c: process.stdout.columns || 80 }); }
+    function onResize() { setDims({ rows: process.stdout.rows || 30, cols: process.stdout.columns || 80 }); }
     process.stdout.on('resize', onResize);
     return () => process.stdout.removeListener('resize', onResize);
   }, []);
@@ -85,8 +96,8 @@ export function App({ config }) {
   }, []);
 
   const onCommand = useCallback(async (val) => {
-    if (val.startsWith('/stop')) { cancelStream(); return; }
-    if (val.startsWith('/exit')) { process.exit(0); return; }
+    if (val === '/stop') { cancelStream(); return; }
+    if (val === '/exit') { process.exit(0); return; }
     await handleCommand(val, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
   }, []);
 
@@ -108,7 +119,6 @@ export function App({ config }) {
     setInput('');
     setPopupIdx(0);
     if (cmd === '/exit') process.exit(0);
-    if (cmd === '/stop') { cancelStream(); return; }
     onCommand(cmd);
   }
 
@@ -118,41 +128,21 @@ export function App({ config }) {
     if (!showPopup) return;
     if (key.escape) { closePopup(); return; }
     if (key.return) {
-      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
-      const q = input.replace(/^\//, '').toLowerCase();
-      const filtered = q ? COMMANDS.filter(c => c.name.includes(q)) : COMMANDS;
+      const filtered = getFiltered(input);
       if (filtered[popupIdx]) handlePopupSelect(filtered[popupIdx].name);
       return;
     }
     if (key.upArrow) { setPopupIdx(i => Math.max(0, i - 1)); return; }
     if (key.downArrow) {
-      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
-      const q = input.replace(/^\//, '').toLowerCase();
-      const filtered = q ? COMMANDS.filter(c => c.name.includes(q)) : COMMANDS;
+      const filtered = getFiltered(input);
       setPopupIdx(i => Math.min(filtered.length - 1, i + 1));
     }
   });
 
-  const handleClick = useCallback(({ col, row }) => {
-    if (!showPopup) return;
-    const popupLeft = Math.floor((cols - POPUP_W) / 2) + 1;
-    const popupH = 1 + 9 + 1;
-    const popupTop = rows - DOCK_H - FOOTER_H - popupH;
-    if (col >= popupLeft && col < popupLeft + POPUP_W && row >= popupTop && row < popupTop + popupH) {
-      const itemRow = row - popupTop - 1;
-      const COMMANDS = [{ name: '/keys' }, { name: '/model' }, { name: '/provider' }, { name: '/agent' }, { name: '/stop' }, { name: '/clear' }, { name: '/export' }, { name: '/help' }, { name: '/exit' }];
-      if (itemRow >= 0 && itemRow < COMMANDS.length) {
-        handlePopupSelect(COMMANDS[itemRow].name);
-      }
-    }
-  }, [showPopup, cols, rows]);
-
-  useMouse(handleClick);
-
   const bottomArea = h(Box, { flexDirection: 'column', alignItems: 'center', width: '100%' },
     showPopup
       ? h(Box, { position: 'absolute', bottom: DOCK_H + FOOTER_H, alignItems: 'center', width: '100%' },
-          h(SlashPopup, { search: input, selectedIdx: popupIdx, onHover: setPopupIdx, width: POPUP_W })
+          h(SlashPopup, { search: input, selectedIdx: popupIdx, width: POPUP_W })
         )
       : null,
     h(InputDock, {

package/src/components/Banner.js

@@ -3,22 +3,18 @@ import { Box, Text } from 'ink';
 import { appGradient } from '../config/theme.js';
 const { createElement: h } = React;
 
-const BANNER_FULL = [
-  ' ██████╗██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
-  '██╔════╝██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
-  '██║  ███╗██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
-  '██║   ██║██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
-  '╚██████╔╝███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
-  ' ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+const BANNER = [
+  '██████  ██       █████  ██████  ██ ████████ ██    ██',
+  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
+  '██       ██      ███████ ██████  ██    ██      ████',
+  '██       ██      ██   ██ ██   ██ ██    ██       ██',
+  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
 ];
 
-const BANNER_MED = [
-  '██████╗ ██╗      █████╗ ██████╗ ██╗████████╗██╗   ██╗',
-  '██╔════╝ ██║     ██╔══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝',
-  '███████╗ ██║     ███████║██████╔╝██║   ██║    ╚████╔╝ ',
-  '╚════██║ ██║     ██╔══██║██╔══██╗██║   ██║     ╚██╔╝  ',
-  '██████╔╝ ███████╗██║  ██║██║  ██║██║   ██║      ██║   ',
-  '╚═════╝  ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   ',
+const BANNER_COMPACT = [
+  '██████  ██       █████  ██████  ██ ████████ ██    ██',
+  '██       ██      ██   ██ ██   ██ ██    ██     ██  ██',
+  '██████  ███████ ██   ██ ██   ██ ██    ██       ██',
 ];
 
 export function Banner({ cols }) {
@@ -28,10 +24,9 @@ export function Banner({ cols }) {
     );
   }
 
-  const lines = cols < 60 ? BANNER_MED : BANNER_FULL;
-  const bannerHeight = lines.length;
+  const lines = cols < 60 ? BANNER_COMPACT : BANNER;
 
-  return h(Box, { height: bannerHeight, width: '100%', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' },
+  return h(Box, { height: lines.length, 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/SlashPopup.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { hex } from '../config/theme.js';
 const { createElement: h } = React;
@@ -15,7 +15,7 @@ const COMMANDS = [
   { name: '/exit',     desc: 'Exit CLARITY' },
 ];
 
-export function SlashPopup({ search, selectedIdx, onHover, width }) {
+export function SlashPopup({ search, selectedIdx, width }) {
   const filtered = useMemo(() => {
     const q = search.replace(/^\//, '').toLowerCase();
     if (!q) return COMMANDS;
@@ -25,31 +25,33 @@ export function SlashPopup({ search, selectedIdx, onHover, width }) {
   }, [search]);
 
   const innerW = Math.max(10, width - 4);
-  const itemLabel = (cmd, i) => {
+  const label = (cmd, i) => {
     const sel = i === selectedIdx;
-    const label = '  ' + cmd.name + '  ' + cmd.desc;
-    return label.length > innerW ? label.slice(0, innerW - 2) + '\u2026' : label;
+    const text = '  ' + cmd.name + '  ' + cmd.desc;
+    return text.length > innerW ? text.slice(0, innerW - 2) + '\u2026' : text;
   };
 
-  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.surface },
+  return h(Box, { flexDirection: 'column', width, backgroundColor: hex.cardBg },
     h(Box, { height: 1, backgroundColor: hex.surfaceAlt },
-      h(Text, { color: hex.textMuted }, '  ' + (search || '/') + ' '.repeat(Math.max(0, innerW - (search || '/').length)))
+      h(Text, { color: hex.textMuted, backgroundColor: hex.surfaceAlt },
+        '  ' + (search || '/') + ' '.repeat(Math.max(0, innerW - (search || '/').length)))
     ),
     filtered.map((cmd, i) =>
       h(Box, {
         key: cmd.name,
         height: 1,
-        backgroundColor: i === selectedIdx ? hex.orange : 'transparent',
+        backgroundColor: i === selectedIdx ? hex.orange : hex.cardBg,
       },
         h(Text, {
           color: i === selectedIdx ? '#000000' : hex.text,
           bold: i === selectedIdx,
-        }, itemLabel(cmd, i))
+          backgroundColor: i === selectedIdx ? hex.orange : hex.cardBg,
+        }, label(cmd, i))
       )
     ),
     filtered.length === 0
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textMuted }, '  No matching commands'))
+      ? h(Box, { height: 1, backgroundColor: hex.cardBg },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, '  No matching commands'))
       : null,
   );
 }

package/src/components/StreamView.js

@@ -23,7 +23,7 @@ function wrap(text, width) {
   return wrapAnsi(String(text), Math.max(4, width), { trim: false, hard: true }).split('\n');
 }
 
-function MsgRole({ role }) {
+function RoleIcon({ role }) {
   switch (role) {
     case 'user': return h(Text, { color: hex.orange, bold: true }, '\u276F ');
     case 'assistant': return h(Text, { color: hex.purple, bold: true }, '\u25C6 ');
@@ -36,20 +36,21 @@ function MsgRole({ role }) {
 
 function MsgBlock({ msg, width }) {
   const lines = useMemo(() => wrap(msg.content, width), [msg.content, width]);
+  const bg = msg.role === 'user' ? hex.surface : hex.cardBg;
 
-  return h(Box, { flexDirection: 'column' },
-    h(Box, { height: 1 },
-      h(MsgRole, { role: msg.role }),
-      h(Text, { color: hex.text }, lines[0] || '')
+  return h(Box, { flexDirection: 'column', backgroundColor: bg },
+    h(Box, { height: 1, backgroundColor: bg },
+      h(RoleIcon, { role: msg.role }),
+      h(Text, { color: hex.text, backgroundColor: bg }, lines[0] || '')
     ),
     lines.slice(1).map((l, i) =>
-      h(Box, { key: i, height: 1 },
-        h(Text, { color: hex.text }, '    ' + l)
+      h(Box, { key: i, height: 1, backgroundColor: bg },
+        h(Text, { color: hex.text, backgroundColor: bg }, '    ' + l)
       )
     ),
     msg.role === 'assistant' && msg.duration
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textMuted },
+      ? h(Box, { height: 1, backgroundColor: bg },
+          h(Text, { color: hex.textMuted, backgroundColor: bg },
             '    ' + (msg.duration < 1000 ? msg.duration + 'ms' : (msg.duration / 1000).toFixed(1) + 's'))
         )
       : null
@@ -58,14 +59,14 @@ function MsgBlock({ msg, width }) {
 
 function StreamingBlock({ content, width }) {
   const lines = useMemo(() => wrap(content, width), [content, width]);
-  return h(Box, { flexDirection: 'column' },
-    h(Box, { height: 1 },
-      h(Text, { color: hex.blue, bold: true }, '\u25CF '),
-      h(Text, { color: hex.text }, lines[0] || '')
+  return h(Box, { flexDirection: 'column', backgroundColor: hex.cardBg },
+    h(Box, { height: 1, backgroundColor: hex.cardBg },
+      h(Text, { color: hex.blue, bold: true, backgroundColor: hex.cardBg }, '\u25CF '),
+      h(Text, { color: hex.text, backgroundColor: hex.cardBg }, lines[0] || '')
     ),
     lines.slice(1).map((l, i) =>
-      h(Box, { key: i, height: 1 },
-        h(Text, { color: hex.text }, '    ' + l)
+      h(Box, { key: i, height: 1, backgroundColor: hex.cardBg },
+        h(Text, { color: hex.text, backgroundColor: hex.cardBg }, '    ' + l)
       )
     )
   );
@@ -110,8 +111,8 @@ export function StreamView({ messages, streamContent, status, maxLines, width })
       ? h(StreamingBlock, { content: streamContent, width: cw })
       : null,
     status === 'thinking' && !streamContent
-      ? h(Box, { height: 1 },
-          h(Text, { color: hex.textMuted }, '  \u25CF processing...')
+      ? h(Box, { height: 1, backgroundColor: hex.cardBg },
+          h(Text, { color: hex.textMuted, backgroundColor: hex.cardBg }, '  \u25CF processing...')
         )
       : null,
   );

package/src/hooks/useMouse.js

@@ -1,45 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useStdin } from 'ink';
-
-export function useMouse(handler) {
-  const { stdin } = useStdin();
-  const handlerRef = useRef(handler);
-  handlerRef.current = handler;
-
-  useEffect(() => {
-    process.stdout.write('\x1b[?1000h\x1b[?1006h');
-
-    function onData(chunk) {
-      const str = typeof chunk === 'string' ? chunk : Buffer.from(chunk).toString('utf8');
-
-      const sgr = str.match(/\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
-      if (sgr) {
-        const code = parseInt(sgr[1]);
-        const col = parseInt(sgr[2]);
-        const row = parseInt(sgr[3]);
-        const press = sgr[4] === 'M';
-        if (press && handlerRef.current) {
-          handlerRef.current({ col, row, button: code & 3 });
-        }
-        return;
-      }
-
-      const legacy = str.match(/\x1b\[M(.{3})/);
-      if (legacy) {
-        const chars = legacy[1];
-        const cb = chars.charCodeAt(0) - 32;
-        const col = chars.charCodeAt(1) - 32;
-        const row = chars.charCodeAt(2) - 32;
-        if (handlerRef.current) {
-          handlerRef.current({ col, row, button: cb & 3 });
-        }
-      }
-    }
-
-    stdin.on('data', onData);
-    return () => {
-      stdin.removeListener('data', onData);
-      process.stdout.write('\x1b[?1000l\x1b[?1006l');
-    };
-  }, [stdin]);
-}