clarity-ai 6.2.0 → 6.2.2

package/bin/clarity.js

@@ -5,19 +5,20 @@ import { App } from '../src/app.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
 
-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.
+// Keep stdin flowing so Ink's useInput hooks can register.
+// This must happen before any async I/O that might pause stdin.
 process.stdin.resume();
 process.stdin.setEncoding('utf8');
 
+// Do NOT clear the screen here. Ink's { fullscreen: true } switch to
+// the alternate screen buffer on mount, which implicitly clears the
+// visible area. A manual \x1b[2J before render() would clear the
+// main buffer — that's destructive and shows as a flash on Termux.
+
 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) => {
@@ -27,29 +28,28 @@ async function main() {
     });
     const { setKey } = await import('../src/config/keys.js');
     setKey(provider, key);
-    process.stdout.write('\x1b[2J\x1b[0f');
-    // Re-resume stdin — readline.close() can leave it paused
+    // readline.close() can leave stdin paused — restore it for Ink
     process.stdin.resume();
   }
 
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
 
-  // Mount Ink. fullscreen:true tells Ink to own stdin/output.
-  // Keep the render ref so we can wait for graceful exit.
+  // Let Ink own the screen. fullscreen:true switches to alt buffer,
+  // clears it, and renders the React tree incrementally from there.
   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.
+  // On some Termux/Node versions Ink's reconciler can settle early
+  // when no async updates are queued. This interval keeps the event
+  // loop alive so the process doesn't exit.
   const keepAlive = setInterval(() => {}, 2 ** 31 - 1);
 
   function cleanup() {
     clearInterval(keepAlive);
-    clear();
-    process.stdout.write('\x1b[?25h\x1b[0m');
+    clear();                      // Ink unmount — exits alt buffer
+    process.stdout.write('\x1b[?25h\x1b[0m');  // show cursor, reset attrs
     process.exit(0);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-ai",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "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": {
@@ -16,8 +16,6 @@
     "ink": "^5",
     "react": "^18",
     "ink-spinner": "^5",
-    "ink-big-text": "^2",
-    "ink-gradient": "^3",
     "marked": "^12",
     "cli-highlight": "^2",
     "chalk": "^5",

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/Banner.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Box, Text } from 'ink';
-import Gradient from 'ink-gradient';
-import BigText from 'ink-big-text';
-const { createElement: h } = React;
-
-export function Banner() {
-  return h(Box, { flexDirection: 'column', alignItems: 'center', marginTop: 1, marginBottom: 1 },
-    h(Gradient, { name: 'summer' },
-      h(BigText, { text: 'CLARITY', font: 'chrome', letterSpacing: 1 })
-    ),
-    h(Box, { flexDirection: 'row', gap: 1 },
-      h(Text, { color: '#FF6B6B' }, '\u25C9'),
-      h(Text, { color: '#555' }, 'premium terminal AI'),
-      h(Text, { color: '#555' }, '\u00B7'),
-      h(Text, { color: '#00FF88' }, 'agent mode'),
-      h(Text, { color: '#555' }, '\u00B7'),
-      h(Text, { color: '#00D4FF' }, 'Ctrl+P commands'),
-      h(Text, { color: '#FF6B6B' }, '\u25C9'),
-    ),
-    h(Text, { color: '#2A2A2A' }, '\u2501'.repeat(Math.min(process.stdout.columns || 80, 60))),
-  );
-}