clarity-ai 6.0.0 → 6.1.0

package/bin/clarity.js

@@ -5,6 +5,9 @@ import { App } from '../src/app.js';
 import { hasKey } from '../src/config/keys.js';
 import { createInterface } from 'readline';
 
+// Full terminal reset: clear screen, reset cursor, reset scrollback
+process.stdout.write('\x1Bc\x1b[2J\x1b[0f\x1b[?25h');
+
 async function main() {
   const provider = process.env.CLARITY_PROVIDER || 'groq';
 
@@ -18,13 +21,32 @@ async function main() {
     });
     const { setKey } = await import('../src/config/keys.js');
     setKey(provider, key);
+    // Re-clear after key prompt
+    process.stdout.write('\x1Bc\x1b[2J\x1b[0f');
   }
 
   const config = { provider, model: process.env.CLARITY_MODEL || 'groq/llama-3.3-70b-versatile' };
-  render(React.createElement(App, { config }), { fullscreen: true });
+
+  const { waitUntilExit } = render(React.createElement(App, { config }), { fullscreen: true });
+
+  // Cleanup handlers
+  function cleanup() {
+    process.stdout.write('\x1Bc\x1b[?25h\x1b[0m');
+    process.exit(0);
+  }
+
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+  process.on('exit', () => {
+    process.stdout.write('\x1Bc\x1b[?25h\x1b[0m');
+  });
+
+  await waitUntilExit;
+  cleanup();
 }
 
 main().catch(err => {
+  process.stdout.write('\x1Bc\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.0.0",
+  "version": "6.1.0",
   "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,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { Box } from 'ink';
 import { Banner } from './components/Banner.js';
 import { MessageList } from './components/MessageList.js';
@@ -6,6 +6,7 @@ import { Composer } from './components/Composer.js';
 import { CommandPicker } from './components/CommandPicker.js';
 import { ModelPicker } from './components/ModelPicker.js';
 import { createChatState, handleSend, handleCommand } from './chat.js';
+import { theme } from './config/theme.js';
 const { createElement: h } = React;
 
 export function App({ config }) {
@@ -18,16 +19,24 @@ export function App({ config }) {
   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);
+  stateRef.current = state;
+  modelRef.current = model;
+  providerRef.current = provider;
+
   const onSubmit = useCallback(async (input) => {
     if (input.startsWith('/')) {
       if (input === '/model' || input === '/models') { setShowModels(true); return; }
       if (input === '/help') { setShowCommands(true); return; }
-      await handleCommand(input, state, setState, setModel, setProvider, model, provider);
+      await handleCommand(input, stateRef.current, setState, setModel, setProvider, modelRef.current, providerRef.current);
       return;
     }
     if (showBanner) setShowBanner(false);
-    await handleSend(state, setState, input, model, provider, setStreamContent);
-  }, [state, model, provider, showBanner]);
+    await handleSend(stateRef.current, setState, input, modelRef.current, providerRef.current, setStreamContent);
+  }, [showBanner]);
 
   function handleCommandSelect(cmdName) {
     setShowCommands(false);
@@ -45,20 +54,26 @@ export function App({ config }) {
     }));
   }
 
-  return h(Box, { flexDirection: 'column', height: '100%' },
-    h(Box, { flexGrow: 1, flexDirection: 'column' },
-      showBanner ? h(Banner) : null,
-      h(MessageList, {
-        messages: state.messages,
-        thinking: state.thinking,
-        streamContent,
-        agentStatus: state.agentStatus,
-        toolExecutions: state.toolExecutions,
-      })
+  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,
+        })
+      )
     ),
     showCommands
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center' },
-          h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
+      ? 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,
@@ -68,8 +83,8 @@ export function App({ config }) {
         )
       : null,
     showModels
-      ? h(Box, { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center' },
-          h(Box, { backgroundColor: '#0A0A0A', borderStyle: 'round', borderColor: '#333', paddingX: 2, paddingY: 1 },
+      ? 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),

package/src/components/Composer.js

@@ -2,22 +2,21 @@ import React, { useState, useRef } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { theme } from '../config/theme.js';
 const { createElement: h } = React;
-const w = () => process.stdout.columns || 80;
 
 export function Composer({ provider, model, agentMode, thinking, onSlash, onSubmit }) {
   const [lines, setLines] = useState(['']);
   const [cursorLine, setCursorLine] = useState(0);
+  const [cursorCol, setCursorCol] = useState(0);
   const buf = useRef({ lines: [''], line: 0, col: 0 });
   const displayName = provider + '/' + model;
 
   useInput((input, key) => {
-    if (thinking) return;
     const s = buf.current;
 
-    if (key.return && !key.shift) {
+    if (key.return && !key.shift && !thinking) {
       const text = s.lines.join('\n');
       s.lines = ['']; s.line = 0; s.col = 0;
-      setLines(['']); setCursorLine(0);
+      setLines(['']); setCursorLine(0); setCursorCol(0);
       if (text.trim()) onSubmit(text);
       return;
     }
@@ -27,7 +26,7 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
       s.lines[s.line] = s.lines[s.line].slice(0, s.col);
       s.lines.splice(s.line + 1, 0, rest);
       s.line++; s.col = 0;
-      setLines([...s.lines]); setCursorLine(s.line);
+      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(0);
       return;
     }
 
@@ -41,20 +40,20 @@ export function Composer({ provider, model, agentMode, thinking, onSlash, onSubm
         s.lines.splice(s.line, 1);
         s.line--;
       }
-      setLines([...s.lines]); setCursorLine(s.line); setCursorLine(s.col);
+      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(s.col);
       return;
     }
 
-    if (key.upArrow && s.line > 0) { s.line--; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorLine(s.col); return; }
-    if (key.downArrow && s.line < s.lines.length - 1) { s.line++; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorLine(s.col); return; }
-    if (key.leftArrow) { if (s.col > 0) s.col--; else if (s.line > 0) { s.line--; s.col = s.lines[s.line].length; } setCursorLine(s.line); setCursorLine(s.col); return; }
-    if (key.rightArrow) { if (s.col < s.lines[s.line].length) s.col++; else if (s.line < s.lines.length - 1) { s.line++; s.col = 0; } setCursorLine(s.line); setCursorLine(s.col); return; }
+    if (key.upArrow && s.line > 0) { s.line--; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorCol(s.col); return; }
+    if (key.downArrow && s.line < s.lines.length - 1) { s.line++; s.col = Math.min(s.col, s.lines[s.line].length); setCursorLine(s.line); setCursorCol(s.col); return; }
+    if (key.leftArrow) { if (s.col > 0) s.col--; else if (s.line > 0) { s.line--; s.col = s.lines[s.line].length; } setCursorLine(s.line); setCursorCol(s.col); return; }
+    if (key.rightArrow) { if (s.col < s.lines[s.line].length) s.col++; else if (s.line < s.lines.length - 1) { s.line++; s.col = 0; } setCursorLine(s.line); setCursorCol(s.col); return; }
 
     if (input && input.length === 1 && !key.ctrl && !key.meta) {
       if (input === '/' && s.lines.length === 1 && s.lines[0] === '') { onSlash?.(); return; }
       s.lines[s.line] = s.lines[s.line].slice(0, s.col) + input + s.lines[s.line].slice(s.col);
       s.col++;
-      setLines([...s.lines]); setCursorLine(s.line); setCursorLine(s.col);
+      setLines([...s.lines]); setCursorLine(s.line); setCursorCol(s.col);
     }
   });