@ruvnet/open-claude-code 2.0.1 → 2.1.0

package/src/ui/app.mjs

@@ -0,0 +1,286 @@
+/**
+ * Main Ink App — full React terminal UI matching Claude Code's interface.
+ *
+ * Uses React.createElement (no JSX transpiler needed).
+ *
+ * Features:
+ * - Scrolling messages area with assistant, user, tool, thinking messages
+ * - Persistent status bar (model, context%, cost, time, permission mode)
+ * - Text input with prompt indicator
+ * - Loading spinner during API calls
+ * - Tool execution display with spinners
+ * - Keyboard shortcuts (Escape, Ctrl+C, Ctrl+L)
+ * - Slash command support (39 commands)
+ * - Skill invocation via /skill-name
+ */
+
+import React, { useState, useCallback, useRef } from 'react';
+import { render, Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import {
+    StatusBar,
+    Message,
+    LoadingIndicator,
+    WelcomeBanner,
+} from './components.mjs';
+import { executeCommand, COMMANDS } from './commands.mjs';
+
+const h = React.createElement;
+
+/**
+ * Main application component.
+ */
+export function App({ agentLoop, settings }) {
+    const [input, setInput] = useState('');
+    const [messages, setMessages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [model, setModel] = useState(agentLoop.state.model || 'claude-sonnet-4-6');
+    const [tokenCount, setTokenCount] = useState({ input: 0, output: 0 });
+    const [cost, setCost] = useState(0);
+    const [mode] = useState(settings.permissions?.defaultMode || 'default');
+    const [toolStatus, setToolStatus] = useState(null);
+    const [startTime] = useState(Date.now());
+    const loadingRef = useRef(false);
+    const { exit } = useApp();
+
+    // Calculate cost from token counts
+    const updateCost = useCallback((tokens) => {
+        const m = agentLoop.state.model || '';
+        let priceIn = 3, priceOut = 15;
+        if (m.includes('haiku')) { priceIn = 0.25; priceOut = 1.25; }
+        if (m.includes('opus')) { priceIn = 15; priceOut = 75; }
+        const costIn = (tokens.input / 1_000_000) * priceIn;
+        const costOut = (tokens.output / 1_000_000) * priceOut;
+        setCost(costIn + costOut);
+    }, [agentLoop.state.model]);
+
+    // Add a message to the display
+    const addMessage = useCallback((msg) => {
+        setMessages(prev => {
+            const next = [...prev, msg];
+            return next.length > 200 ? next.slice(-150) : next;
+        });
+    }, []);
+
+    // Handle slash commands
+    const handleCommand = useCallback((text) => {
+        const cmdName = text.split(/\s+/)[0].toLowerCase();
+
+        // Check for skill invocation
+        if (!COMMANDS[cmdName] && agentLoop.state._skillsLoader) {
+            const skill = agentLoop.state._skillsLoader.get(cmdName.slice(1));
+            if (skill) {
+                const args = text.slice(cmdName.length).trim();
+                addMessage({ role: 'user', content: text });
+                runPrompt(
+                    `[Skill: ${skill.name}]\n${skill.prompt}${args ? `\nArguments: ${args}` : ''}`
+                );
+                return;
+            }
+        }
+
+        const { response, exit: shouldExit } = executeCommand(text, agentLoop.state);
+        if (shouldExit) {
+            exit();
+            return;
+        }
+        addMessage({ role: 'system', content: response });
+
+        // Sync model if it changed
+        if (agentLoop.state.model !== model) {
+            setModel(agentLoop.state.model);
+        }
+    }, [agentLoop, model, addMessage, exit]);
+
+    // Run a prompt through the agent loop
+    const runPrompt = useCallback(async (text) => {
+        setIsLoading(true);
+        loadingRef.current = true;
+        setToolStatus(null);
+
+        try {
+            for await (const event of agentLoop.run(text)) {
+                switch (event.type) {
+                    case 'stream_event':
+                        setMessages(prev => {
+                            const last = prev[prev.length - 1];
+                            if (last && last.role === 'assistant' && last._streaming) {
+                                return [
+                                    ...prev.slice(0, -1),
+                                    { ...last, content: (last.content || '') + (event.text || '') },
+                                ];
+                            }
+                            return [
+                                ...prev,
+                                { role: 'assistant', content: event.text || '', _streaming: true },
+                            ];
+                        });
+                        break;
+
+                    case 'assistant':
+                        setMessages(prev => {
+                            const last = prev[prev.length - 1];
+                            if (last && last.role === 'assistant' && last._streaming) {
+                                return [
+                                    ...prev.slice(0, -1),
+                                    { ...last, _streaming: false },
+                                ];
+                            }
+                            if (event.content) {
+                                return [...prev, { role: 'assistant', content: event.content }];
+                            }
+                            return prev;
+                        });
+                        break;
+
+                    case 'thinking':
+                        addMessage({ role: 'thinking', thinking: event.text });
+                        break;
+
+                    case 'tool_progress':
+                        setToolStatus(event.tool);
+                        addMessage({
+                            role: 'tool',
+                            toolName: event.tool,
+                            toolStatus: 'running',
+                        });
+                        break;
+
+                    case 'result':
+                        setToolStatus(null);
+                        setMessages(prev => {
+                            const idx = prev.findLastIndex(
+                                m => m.role === 'tool' &&
+                                     m.toolName === event.tool &&
+                                     m.toolStatus === 'running'
+                            );
+                            if (idx >= 0) {
+                                const updated = [...prev];
+                                updated[idx] = {
+                                    ...updated[idx],
+                                    toolResult: typeof event.result === 'string'
+                                        ? event.result
+                                        : JSON.stringify(event.result),
+                                    toolStatus: 'done',
+                                };
+                                return updated;
+                            }
+                            return prev;
+                        });
+                        break;
+
+                    case 'compaction':
+                        addMessage({ role: 'system', content: `[compaction #${event.count}]` });
+                        break;
+
+                    case 'hookPermissionResult':
+                        if (!event.allowed) {
+                            addMessage({ role: 'system', content: `[blocked: ${event.tool}]` });
+                        }
+                        break;
+
+                    case 'error':
+                        addMessage({ role: 'error', content: event.message });
+                        break;
+
+                    case 'stop':
+                        break;
+                }
+
+                // Update token counts
+                const usage = agentLoop.state.tokenUsage;
+                setTokenCount({ input: usage.input, output: usage.output });
+                updateCost(usage);
+            }
+        } catch (err) {
+            addMessage({ role: 'error', content: err.message });
+        } finally {
+            setIsLoading(false);
+            loadingRef.current = false;
+            setToolStatus(null);
+        }
+    }, [agentLoop, addMessage, updateCost]);
+
+    // Handle submit
+    const handleSubmit = useCallback((value) => {
+        const trimmed = value.trim();
+        if (!trimmed) return;
+
+        setInput('');
+
+        if (trimmed.startsWith('/')) {
+            handleCommand(trimmed);
+            return;
+        }
+
+        addMessage({ role: 'user', content: trimmed });
+        runPrompt(trimmed);
+    }, [handleCommand, addMessage, runPrompt]);
+
+    // Keyboard shortcuts
+    useInput((ch, key) => {
+        if (key.escape && loadingRef.current) {
+            setIsLoading(false);
+            setToolStatus(null);
+            addMessage({ role: 'system', content: '[cancelled]' });
+        }
+        if (key.ctrl && ch === 'c') {
+            exit();
+        }
+        if (key.ctrl && ch === 'l') {
+            setMessages([]);
+        }
+    });
+
+    const toolCount = agentLoop.state.tools?.list?.()?.length || 0;
+
+    // Build the message list
+    const messageElements = messages.map((msg, i) =>
+        h(Message, { key: i, ...msg })
+    );
+
+    return h(Box, { flexDirection: 'column' },
+        // Welcome banner
+        h(WelcomeBanner, { model, toolCount }),
+
+        // Messages area
+        h(Box, { flexDirection: 'column', flexGrow: 1 },
+            ...messageElements,
+            isLoading ? h(LoadingIndicator, { tool: toolStatus }) : null,
+        ),
+
+        // Input area
+        h(Box, { borderStyle: 'round', borderColor: 'cyan', paddingX: 1, marginTop: 1 },
+            h(Text, { color: 'cyan' }, '> '),
+            h(TextInput, {
+                value: input,
+                onChange: setInput,
+                onSubmit: handleSubmit,
+                placeholder: 'Type a message...',
+            }),
+        ),
+
+        // Status bar
+        h(StatusBar, {
+            model,
+            tokens: tokenCount,
+            cost,
+            mode,
+            startTime,
+            contextMax: settings.maxContextTokens || 200000,
+        }),
+    );
+}
+
+/**
+ * Start the Ink application.
+ * @param {object} agentLoop - agent loop instance
+ * @param {object} settings - loaded settings
+ * @returns {object} Ink instance
+ */
+export function startInkApp(agentLoop, settings) {
+    const instance = render(
+        h(App, { agentLoop, settings })
+    );
+    return instance;
+}

package/src/ui/commands.mjs

@@ -1,22 +1,28 @@
-/** Slash Commands — all 39+ commands. Fully functional (no stubs). */
-import fs from 'fs';
-import path from 'path';
-import { execSync } from 'child_process';
+/**
+ * Slash Commands — all 39 commands from Claude Code.
+ *
+ * Each command is a function(args, state) that returns a string response.
+ * Commands are invoked via /command-name in the REPL.
+ */
+
 import { SessionManager } from '../core/session.mjs';
 import { CheckpointManager } from '../core/checkpoints.mjs';
 import { PromptCache } from '../core/cache.mjs';
 import { readEnv, listEnvVars } from '../config/env.mjs';
-import { cronStore as _cronStore } from '../tools/cron-create.mjs';
 import * as telemetry from '../telemetry/index.mjs';
 
 const checkpoints = new CheckpointManager();
 const promptCache = new PromptCache();
 let sessionManager = null;
+
 function getSession() {
     if (!sessionManager) sessionManager = new SessionManager();
     return sessionManager;
 }
 
+/**
+ * All slash commands.
+ */
 export const COMMANDS = {
     '/help': {
         description: 'Show available commands',
@@ -25,6 +31,7 @@ export const COMMANDS = {
             for (const [name, cmd] of Object.entries(COMMANDS)) {
                 lines.push(`  ${name.padEnd(20)} ${cmd.description}`);
             }
+            lines.push('');
             return lines.join('\n');
         },
     },
@@ -67,13 +74,11 @@ export const COMMANDS = {
         description: 'Show token usage and estimated cost',
         handler(args, state) {
             const { input, output } = state.tokenUsage;
+            // Use model-appropriate pricing
             const model = state.model || '';
             let priceIn = 3, priceOut = 15; // Sonnet default
             if (model.includes('haiku')) { priceIn = 0.25; priceOut = 1.25; }
             if (model.includes('opus')) { priceIn = 15; priceOut = 75; }
-            if (model.includes('gpt-4o-mini')) { priceIn = 0.15; priceOut = 0.6; }
-            else if (model.includes('gpt-4o')) { priceIn = 2.5; priceOut = 10; }
-            if (model.includes('gemini')) { priceIn = 0.075; priceOut = 0.3; }
 
             const costIn = (input / 1_000_000) * priceIn;
             const costOut = (output / 1_000_000) * priceOut;
@@ -93,28 +98,22 @@ export const COMMANDS = {
             const checks = [];
             checks.push(`Node.js: ${process.version}`);
             checks.push(`ANTHROPIC_API_KEY: ${process.env.ANTHROPIC_API_KEY ? 'set' : 'NOT SET'}`);
-            checks.push(`OPENAI_API_KEY: ${process.env.OPENAI_API_KEY ? 'set' : 'NOT SET'}`);
-            checks.push(`GOOGLE_API_KEY: ${process.env.GOOGLE_API_KEY || process.env.GEMINI_API_KEY ? 'set' : 'NOT SET'}`);
             checks.push(`Model: ${state.model || 'default'}`);
             checks.push(`Tools: ${state.tools?.list?.()?.length || 0}`);
             checks.push(`Messages: ${state.messages.length}`);
             checks.push(`CWD: ${process.cwd()}`);
             checks.push(`Platform: ${process.platform}`);
 
-            // API connectivity check (synchronous status)
-            let apiStatus = 'no key';
-            if (process.env.ANTHROPIC_API_KEY) apiStatus = 'key present';
-            if (process.env.OPENAI_API_KEY) checks.push(`OpenAI API: key present`);
-            if (process.env.GOOGLE_API_KEY || process.env.GEMINI_API_KEY) checks.push(`Google API: key present`);
+            // Check API connectivity
+            let apiStatus = 'unchecked';
+            if (process.env.ANTHROPIC_API_KEY) {
+                apiStatus = 'key present';
+            }
             checks.push(`API: ${apiStatus}`);
 
             // Check MCP servers
-            const mcpClients = state._mcpClients || [];
-            checks.push(`MCP servers: ${mcpClients.length}`);
-            for (const client of mcpClients) {
-                const status = client.connected ? 'connected' : 'disconnected';
-                checks.push(`  - ${client.config?.command || 'unknown'}: ${status}`);
-            }
+            const mcpCount = state._mcpClients?.length || 0;
+            checks.push(`MCP servers: ${mcpCount}`);
 
             return `System check:\n${checks.map(c => `  ${c}`).join('\n')}`;
         },
@@ -136,9 +135,8 @@ export const COMMANDS = {
         description: 'Show or switch model',
         handler(args, state) {
             if (args) {
-                const old = state.model;
                 state.model = args;
-                return `Model switched: ${old} -> ${args}`;
+                return `Model switched to: ${args}`;
             }
             return `Current model: ${state.model || 'default'}`;
         },
@@ -168,14 +166,28 @@ export const COMMANDS = {
         },
     },
 
-    '/quit': { description: 'Exit the REPL', handler() { return 'EXIT'; } },
-    '/exit': { description: 'Exit the REPL', handler() { return 'EXIT'; } },
-    '/bug': { description: 'Report a bug', handler() { return 'Report bugs at: https://github.com/ruvnet/open-claude-code/issues'; } },
+    '/quit': {
+        description: 'Exit the REPL',
+        handler() { return 'EXIT'; },
+    },
+
+    '/exit': {
+        description: 'Exit the REPL',
+        handler() { return 'EXIT'; },
+    },
+
+    '/bug': {
+        description: 'Report a bug',
+        handler() {
+            return 'Report bugs at: https://github.com/ruvnet/open-claude-code/issues';
+        },
+    },
 
     '/review': {
         description: 'Review recent changes',
         handler(args, state) {
             try {
+                const { execSync } = require('child_process');
                 const diff = execSync('git diff --stat HEAD~1 2>/dev/null || echo "No git history"', { encoding: 'utf-8' });
                 return `Recent changes:\n${diff}`;
             } catch {
@@ -187,6 +199,8 @@ export const COMMANDS = {
     '/init': {
         description: 'Initialize Claude Code in current directory',
         handler() {
+            const fs = require('fs');
+            const path = require('path');
             const claudeDir = path.join(process.cwd(), '.claude');
             fs.mkdirSync(claudeDir, { recursive: true });
             const settingsFile = path.join(claudeDir, 'settings.json');
@@ -197,11 +211,24 @@ export const COMMANDS = {
         },
     },
 
-    '/login': { description: 'Set API key', handler(args) {
-        if (args) { process.env.ANTHROPIC_API_KEY = args; return 'API key set.'; }
-        return 'Usage: /login <api-key>';
-    }},
-    '/logout': { description: 'Clear API key', handler() { delete process.env.ANTHROPIC_API_KEY; return 'API key cleared.'; } },
+    '/login': {
+        description: 'Set API key',
+        handler(args) {
+            if (args) {
+                process.env.ANTHROPIC_API_KEY = args;
+                return 'API key set.';
+            }
+            return 'Usage: /login <api-key>';
+        },
+    },
+
+    '/logout': {
+        description: 'Clear API key',
+        handler() {
+            delete process.env.ANTHROPIC_API_KEY;
+            return 'API key cleared.';
+        },
+    },
 
     '/status': {
         description: 'Show session status',
@@ -359,9 +386,10 @@ export const COMMANDS = {
     '/schedule': {
         description: 'List scheduled tasks',
         handler() {
-            if (!_cronStore || _cronStore.size === 0) return 'No scheduled tasks.';
+            const { cronStore } = require('../tools/cron-create.mjs');
+            if (!cronStore || cronStore.size === 0) return 'No scheduled tasks.';
             const lines = [];
-            for (const [, job] of _cronStore) {
+            for (const [, job] of cronStore) {
                 lines.push(`  ${job.id}: ${job.name} (${job.schedule})`);
             }
             return `Scheduled:\n${lines.join('\n')}`;
@@ -395,9 +423,8 @@ export const COMMANDS = {
         description: 'Show git diff',
         handler() {
             try {
-                // execSync imported at top
-                const d = execSync('git diff --stat 2>/dev/null || echo "Not in a git repo"', { encoding: 'utf-8' });
-                return d.trim() || 'No changes.';
+                const { execSync } = require('child_process');
+                return execSync('git diff --stat 2>/dev/null || echo "Not in a git repo"', { encoding: 'utf-8' });
             } catch {
                 return 'Unable to show diff.';
             }
@@ -416,7 +443,7 @@ export const COMMANDS = {
         description: 'Create a git commit with AI message',
         handler(args) {
             try {
-                // execSync imported at top
+                const { execSync } = require('child_process');
                 const msg = args || 'Update from open-claude-code';
                 execSync('git add -A', { encoding: 'utf-8' });
                 execSync(`git commit -m "${msg}"`, { encoding: 'utf-8' });
@@ -427,45 +454,27 @@ export const COMMANDS = {
         },
     },
 
-    '/pr': { description: 'Create a pull request', handler() { return 'PR creation requires gh CLI. Run: gh pr create --fill'; } },
-    '/release': { description: 'Create a release', handler() { return 'Release creation requires gh CLI. Run: gh release create <tag>'; } },
-
-    '/resume': {
-        description: 'Resume a saved session',
-        handler(args, state) {
-            const session = getSession();
-            if (args) {
-                // Resume specific session by ID
-                const ok = session.resume(state, args.trim());
-                if (ok) {
-                    return `Resumed session: ${session.sessionId} (${state.messages.length} messages, ${state.turnCount} turns)`;
-                }
-                return `Could not find session: ${args.trim()}`;
-            }
-            // Resume most recent
-            const ok = session.resume(state);
-            if (ok) {
-                return `Resumed session: ${session.sessionId} (${state.messages.length} messages, ${state.turnCount} turns)`;
-            }
-            return 'No resumable session found.';
+    '/pr': {
+        description: 'Create a pull request (stub)',
+        handler() {
+            return 'PR creation requires gh CLI. Run: gh pr create --fill';
         },
     },
 
-    '/sessions': {
-        description: 'List recent sessions',
-        handler(args, state) {
-            const session = getSession();
-            const list = session.listSessions(10);
-            if (list.length === 0) return 'No saved sessions.';
-            const lines = list.map(s =>
-                `  ${s.id} | ${s.savedAt || '?'} | ${s.turnCount || 0} turns | ${s.messageCount || 0} msgs`
-            );
-            return `Recent sessions:\n${lines.join('\n')}`;
+    '/release': {
+        description: 'Create a release (stub)',
+        handler() {
+            return 'Release creation requires gh CLI. Run: gh release create <tag>';
         },
     },
 };
 
-/** Execute a slash command. */
+/**
+ * Execute a slash command.
+ * @param {string} input - full command string (e.g., "/model claude-sonnet-4-6")
+ * @param {object} state - agent loop state
+ * @returns {{ response: string, exit: boolean }}
+ */
 export function executeCommand(input, state) {
     const parts = input.split(/\s+/);
     const cmd = parts[0].toLowerCase();
@@ -480,7 +489,11 @@ export function executeCommand(input, state) {
     return { response, exit: response === 'EXIT' };
 }
 
-/** Get command completions for tab-complete. */
+/**
+ * Get command completions for tab-complete.
+ * @param {string} partial
+ * @returns {string[]}
+ */
 export function getCompletions(partial) {
     return Object.keys(COMMANDS).filter(c => c.startsWith(partial));
 }