clarity-ai 6.1.1 → 6.2.1

package/bin/clarity.js

@@ -5,15 +5,19 @@ import { App } from '../src/app.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
 
-// EXACTLY ONE screen clear — before any async, before Ink mount.
-// Use safe clear (2J = clear visible screen, 0f = home cursor).
-// Do NOT use \x1Bc (RIS) — it resets the entire terminal aggressively.
 process.stdout.write('\x1b[2J\x1b[0f');
 
+// Force stdin into flowing mode BEFORE any I/O that might pause it.
+// Without this, Ink's useInput never activates, the event loop
+// has no handles, and the process exits immediately.
+process.stdin.resume();
+process.stdin.setEncoding('utf8');
+
 async function main() {
   const provider = process.env.CLARITY_PROVIDER || 'groq';
 
   if (!hasKey(provider)) {
+    // Save raw state before readline hijacks stdin
     const rl = createInterface({ input: process.stdin, output: process.stdout });
     const key = await new Promise(resolve => {
       rl.question('\n\x1b[33m No ' + provider + ' API key found.\x1b[0m\n Enter your ' + provider + ' key: ', (answer) => {
@@ -23,17 +27,28 @@ async function main() {
     });
     const { setKey } = await import('../src/config/keys.js');
     setKey(provider, key);
-    // Clear the key-prompt residue. Still \x1b[2J, not \x1Bc.
     process.stdout.write('\x1b[2J\x1b[0f');
+    // Re-resume stdin — readline.close() can leave it paused
+    process.stdin.resume();
   }
 
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
 
-  // Let Ink manage all rendering from here.
-  const { waitUntilExit } = render(React.createElement(App, { config }), { fullscreen: true });
+  // Mount Ink. fullscreen:true tells Ink to own stdin/output.
+  // Keep the render ref so we can wait for graceful exit.
+  const { waitUntilExit, clear } = render(React.createElement(App, { config }), {
+    fullscreen: true,
+    patchConsole: false,
+  });
+
+  // Keep the event loop alive even if Ink's reconciler settles.
+  // On some Termux/Node combos, waitUntilExit can fire early when
+  // no async updates are pending — this interval prevents that.
+  const keepAlive = setInterval(() => {}, 2 ** 31 - 1);
 
-  // Cleanup: restore cursor, reset text — no screen clearing, no RIS.
   function cleanup() {
+    clearInterval(keepAlive);
+    clear();
     process.stdout.write('\x1b[?25h\x1b[0m');
     process.exit(0);
   }
@@ -46,7 +61,6 @@ async function main() {
 }
 
 main().catch(err => {
-  // Restore terminal state without clearing the screen.
   process.stdout.write('\x1b[?25h\x1b[0m');
   console.error('\n\x1b[31mFatal error:\x1b[0m', err.message);
   process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "6.1.1",
+  "version": "6.2.1",
   "description": "Premium OpenCode-style terminal AI agent — 24-bit TrueColor theme, 8s timeout recovery, virtual scroll, inline tool trees, collapsible thought cards",
   "type": "module",
   "bin": {

package/src/app.js

@@ -1,6 +1,5 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { Box } from 'ink';
-import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
 import { Composer } from './components/Composer.js';
 import { CommandPicker } from './components/CommandPicker.js';
@@ -17,9 +16,7 @@ export function App({ config }) {
   const [provider, setProvider] = useState(config.provider || 'groq');
   const [showCommands, setShowCommands] = useState(false);
   const [showModels, setShowModels] = useState(false);
-  const [showBanner, setShowBanner] = useState(true);
 
-  // Use refs to avoid stale closures in callbacks
   const stateRef = useRef(state);
   const modelRef = useRef(model);
   const providerRef = useRef(provider);
@@ -34,9 +31,8 @@ export function App({ config }) {
       await handleCommand(input, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
       return;
     }
-    if (showBanner) setShowBanner(false);
     await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent);
-  }, [showBanner]);
+  }, []);
 
   function handleCommandSelect(cmdName) {
     setShowCommands(false);
@@ -44,8 +40,7 @@ export function App({ config }) {
   }
 
   function handleModelSelect(modelId) {
-    const p = modelId.split('/')[0];
-    setProvider(p);
+    setProvider(modelId.split('/')[0]);
     setModel(modelId.replace(/^[^/]+\//, ''));
     setShowModels(false);
     setState(s => ({
@@ -54,42 +49,31 @@ export function App({ config }) {
     }));
   }
 
-  const termHeight = process.stdout.rows || 30;
-
-  return h(Box, { flexDirection: 'column', backgroundColor: theme.bg },
-    h(Box, { flexGrow: 1, flexShrink: 1, flexDirection: 'column', minHeight: 0 },
-      showBanner
-        ? h(Banner)
-        : null,
-      h(Box, { flexGrow: 1, flexShrink: 1, minHeight: 0 },
-        h(MessageList, {
-          messages: state.messages,
-          thinking: state.thinking,
-          streamContent,
-          agentStatus: state.agentStatus,
-          toolExecutions: state.toolExecutions,
-        })
-      )
+  return h(Box, { flexDirection: 'column', backgroundColor: theme.bg, minHeight: '100%' },
+    h(Box, { flexGrow: 1, flexDirection: 'column', minHeight: 0 },
+      h(MessageList, {
+        messages: state.messages,
+        thinking: state.thinking,
+        streamContent,
+        agentStatus: state.agentStatus,
+        toolExecutions: state.toolExecutions,
+      })
     ),
-    showCommands
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
-          h(Box, { backgroundColor: theme.bg, borderStyle: 'round', borderColor: theme.borderLight, paddingX: 2, paddingY: 1 },
-            h(CommandPicker, {
-              query: '',
-              onSelect: handleCommandSelect,
-              onClose: () => setShowCommands(false),
-            })
-          )
-        )
-      : null,
-    showModels
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center' },
-          h(Box, { backgroundColor: theme.bg, borderStyle: 'round', borderColor: theme.borderLight, paddingX: 2, paddingY: 1 },
-            h(ModelPicker, {
-              onSelect: handleModelSelect,
-              onClose: () => setShowModels(false),
-            })
-          )
+    showCommands || showModels
+      ? h(Box, { flexDirection: 'column', marginBottom: 1, backgroundColor: theme.surfaceAlt, borderStyle: 'round', borderColor: theme.borderLight },
+          showCommands
+            ? h(CommandPicker, {
+                query: '',
+                onSelect: handleCommandSelect,
+                onClose: () => setShowCommands(false),
+              })
+            : null,
+          showModels
+            ? h(ModelPicker, {
+                onSelect: handleModelSelect,
+                onClose: () => setShowModels(false),
+              })
+            : null
         )
       : null,
     h(Composer, {

package/src/chat.js

@@ -5,7 +5,11 @@ const sleep = ms => new Promise(r => setTimeout(r, ms));
 
 export function createChatState() {
   return {
-    messages: [],
+    messages: [{
+      id: 'welcome',
+      role: 'system',
+      content: 'CLARITY AI ready  \u00B7  Ctrl+P commands  \u00B7  /help',
+    }],
     thinking: false,
     streamContent: '',
     awaitingKey: false,

package/src/components/ToolCard.js

@@ -9,22 +9,27 @@ export function ToolCard({ name, args, status, duration, result, error }) {
   const icon = status === 'running' ? '\u25CF' :
                status === 'failed' ? '\u2716' : '\u2714';
   const argsStr = args ? JSON.stringify(args).slice(0, 60) : '';
-  const timeStr = duration ? ' ' + duration + 'ms' : '';
+  const timeStr = duration != null ? ' ' + duration + 'ms' : (status === 'running' ? ' 0ms' : '');
+  const w = process.stdout.columns || 80;
 
-  return h(Box, { flexDirection: 'column', marginY: 1, backgroundColor: theme.surfaceAlt, borderStyle: 'round', borderColor: col },
+  return h(Box, { flexDirection: 'column', marginY: 1, marginLeft: 0,
+    borderStyle: 'round', borderColor: col, backgroundColor: theme.surfaceAlt },
     h(Box, { flexDirection: 'row', gap: 1, paddingX: 1 },
-      h(Text, { color: col }, icon + ' ' + name),
-      argsStr ? h(Text, { color: theme.textMuted }, argsStr) : null,
-      timeStr ? h(Text, { color: theme.textMuted }, timeStr) : null,
+      h(Text, { color: col, bold: true }, icon + ' ' + name),
+      argsStr ? h(Text, { color: theme.textMuted, wrap: 'truncate-end' }, argsStr) : null,
     ),
-    status === 'completed' && result
-      ? h(Box, { paddingX: 1 },
-          h(Text, { color: theme.textDim, wrap: 'wrap' }, String(result).slice(0, 200))
+    h(Box, { flexDirection: 'row', paddingX: 1, gap: 2 },
+      h(Text, { color: theme.textMuted }, '\u29D6 ' + (status === 'running' ? 'running' : status)),
+      timeStr ? h(Text, { color: theme.textMuted }, '\u29D7 ' + timeStr.trim()) : null,
+    ),
+    (status === 'completed' && result)
+      ? h(Box, { paddingX: 1, paddingTop: 1, borderStyle: 'single', borderColor: theme.border },
+          h(Text, { color: theme.textDim, wrap: 'wrap' }, String(result).slice(0, Math.min(w - 8, 300)))
         )
       : null,
-    status === 'failed' && error
-      ? h(Box, { paddingX: 1 },
-          h(Text, { color: theme.error, wrap: 'wrap' }, String(error).slice(0, 200))
+    (status === 'failed' && error)
+      ? h(Box, { paddingX: 1, paddingTop: 1 },
+          h(Text, { color: theme.error, wrap: 'wrap' }, String(error).slice(0, w - 6))
         )
       : null,
   );