@ruvnet/open-claude-code 2.0.0

package/src/ui/ink-app.mjs

@@ -0,0 +1,231 @@
+/**
+ * Ink-like Terminal UI — rich terminal output without heavy dependencies.
+ *
+ * Features:
+ * - Spinner during API calls
+ * - Color tool names in yellow, errors in red, thinking in dim
+ * - Code blocks with ``` detection and basic syntax coloring
+ * - Markdown bold, italic, inline code rendering
+ * - Status line showing model, tokens used, cost estimate
+ * - Progress for tool execution (show tool name + "running...")
+ */
+
+// ANSI color codes
+const COLORS = {
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    italic: '\x1b[3m',
+    underline: '\x1b[4m',
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    blue: '\x1b[34m',
+    magenta: '\x1b[35m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m',
+    gray: '\x1b[90m',
+    bgRed: '\x1b[41m',
+    bgGreen: '\x1b[42m',
+    bgYellow: '\x1b[43m',
+    bgBlue: '\x1b[44m',
+};
+
+const noColor = process.env.NO_COLOR === '1';
+
+function c(color, text) {
+    if (noColor) return text;
+    return `${COLORS[color] || ''}${text}${COLORS.reset}`;
+}
+
+/**
+ * Spinner for async operations.
+ */
+export class Spinner {
+    constructor(message = 'Working...') {
+        this.message = message;
+        this.frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+        this.frameIdx = 0;
+        this.timer = null;
+        this.active = false;
+    }
+
+    start() {
+        if (noColor || !process.stderr.isTTY) return;
+        this.active = true;
+        this.timer = setInterval(() => {
+            const frame = this.frames[this.frameIdx % this.frames.length];
+            process.stderr.write(`\r${c('cyan', frame)} ${c('dim', this.message)}`);
+            this.frameIdx++;
+        }, 80);
+    }
+
+    update(message) {
+        this.message = message;
+    }
+
+    stop() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+        if (this.active) {
+            process.stderr.write('\r\x1b[K'); // Clear line
+            this.active = false;
+        }
+    }
+}
+
+/**
+ * Highlight code blocks in markdown text.
+ * @param {string} text
+ * @returns {string}
+ */
+export function highlightCode(text) {
+    if (noColor) return text;
+
+    return text.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) => {
+        const header = lang ? c('dim', `  ${lang}`) : '';
+        const highlighted = code
+            .split('\n')
+            .map(line => `  ${highlightLine(line, lang)}`)
+            .join('\n');
+        return `${c('dim', '```')}${header}\n${highlighted}\n${c('dim', '```')}`;
+    });
+}
+
+function highlightLine(line, lang) {
+    if (noColor) return line;
+
+    let result = line;
+
+    // Strings
+    result = result.replace(/(["'`])(.*?)\1/g, `${COLORS.green}$1$2$1${COLORS.reset}`);
+
+    // Keywords (common across languages)
+    const keywords = /\b(const|let|var|function|return|if|else|for|while|class|import|export|from|async|await|try|catch|throw|new|this|def|fn|pub|use|mod)\b/g;
+    result = result.replace(keywords, `${COLORS.magenta}$1${COLORS.reset}`);
+
+    // Numbers
+    result = result.replace(/\b(\d+\.?\d*)\b/g, `${COLORS.yellow}$1${COLORS.reset}`);
+
+    // Comments
+    result = result.replace(/(\/\/.*|#.*)$/, `${COLORS.gray}$1${COLORS.reset}`);
+
+    return result;
+}
+
+/**
+ * Render markdown formatting: bold, italic, inline code.
+ * @param {string} text
+ * @returns {string}
+ */
+export function renderMarkdown(text) {
+    if (noColor) return text;
+    let result = text;
+
+    // Bold: **text**
+    result = result.replace(/\*\*(.+?)\*\*/g, `${COLORS.bold}$1${COLORS.reset}`);
+
+    // Italic: *text*
+    result = result.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, `${COLORS.italic}$1${COLORS.reset}`);
+
+    // Inline code: `text`
+    result = result.replace(/`([^`]+)`/g, `${COLORS.cyan}$1${COLORS.reset}`);
+
+    return result;
+}
+
+/**
+ * Render a tool progress indicator.
+ * @param {string} toolName
+ * @param {string} status
+ */
+export function renderToolProgress(toolName, status) {
+    const icon = status === 'running' ? c('yellow', '>>') : c('green', '>>');
+    return `${icon} ${c('yellow', toolName)} ${c('dim', status)}`;
+}
+
+/**
+ * Render a status bar with token counts and cost estimate.
+ * @param {object} state
+ */
+export function renderStatusBar(state) {
+    if (noColor || !process.stderr.isTTY) return '';
+    const cols = process.stdout.columns || 80;
+    const model = state.model || 'default';
+    const inp = state.tokenUsage?.input || 0;
+    const out = state.tokenUsage?.output || 0;
+    const tokens = `in:${inp} out:${out}`;
+    const turns = `turn:${state.turnCount || 0}`;
+
+    // Cost estimate (Sonnet pricing by default)
+    const costIn = (inp / 1_000_000) * 3;
+    const costOut = (out / 1_000_000) * 15;
+    const cost = `$${(costIn + costOut).toFixed(4)}`;
+
+    const right = `${model} | ${tokens} | ${cost} | ${turns}`;
+    const padding = Math.max(0, cols - right.length - 1);
+    return c('dim', `${' '.repeat(padding)}${right}`);
+}
+
+/**
+ * Render an error message.
+ * @param {string} message
+ */
+export function renderError(message) {
+    return `${c('red', 'Error:')} ${message}`;
+}
+
+/**
+ * Render a warning message.
+ * @param {string} message
+ */
+export function renderWarning(message) {
+    return `${c('yellow', 'Warning:')} ${message}`;
+}
+
+/**
+ * Render a success message.
+ * @param {string} message
+ */
+export function renderSuccess(message) {
+    return `${c('green', 'OK:')} ${message}`;
+}
+
+/**
+ * Render thinking output (dim).
+ * @param {string} text
+ */
+export function renderThinking(text) {
+    return c('dim', text);
+}
+
+/**
+ * Format a tool result for display.
+ * @param {string} toolName
+ * @param {string} result
+ * @param {boolean} [truncate=true]
+ */
+export function formatToolResult(toolName, result, truncate = true) {
+    const max = 500;
+    const display = truncate && result.length > max
+        ? result.slice(0, max) + c('dim', `\n...[${result.length - max} more chars]`)
+        : result;
+    return `${c('cyan', `[${toolName}]`)} ${display}`;
+}
+
+/**
+ * Clear the screen.
+ */
+export function clearScreen() {
+    process.stdout.write('\x1b[2J\x1b[H');
+}
+
+/**
+ * Print a horizontal rule.
+ */
+export function hr() {
+    const cols = process.stdout.columns || 80;
+    return c('dim', '-'.repeat(cols));
+}

package/src/ui/repl.mjs

@@ -0,0 +1,144 @@
+/**
+ * REPL — interactive read-eval-print loop for open-claude-code.
+ *
+ * Supports all 39 slash commands, skill invocation, enhanced UI,
+ * and streaming output with spinner and token display.
+ */
+
+import readline from 'readline';
+import { executeCommand, getCompletions, COMMANDS } from './commands.mjs';
+import { Spinner, highlightCode, renderStatusBar, renderToolProgress } from './ink-app.mjs';
+
+/**
+ * Start the interactive REPL.
+ * @param {object} loop - agent loop instance (from createAgentLoop)
+ * @param {object} settings - loaded settings
+ */
+export async function startRepl(loop, settings) {
+    const rl = readline.createInterface({
+        input: process.stdin,
+        output: process.stdout,
+        terminal: true,
+        completer: (line) => {
+            if (line.startsWith('/')) {
+                const completions = getCompletions(line);
+                return [completions, line];
+            }
+            return [[], line];
+        },
+    });
+
+    console.log('\x1b[1mopen-claude-code v2\x1b[0m — type your prompt or /help');
+    console.log('\x1b[2mModel: %s | Tools: %d\x1b[0m', loop.state.model || 'default', loop.state.tools?.list?.()?.length || 0);
+    console.log('');
+
+    const askPrompt = () => {
+        rl.question('\x1b[36m>\x1b[0m ', async (input) => {
+            const trimmed = input.trim();
+            if (!trimmed) { askPrompt(); return; }
+
+            // Handle slash commands
+            if (trimmed.startsWith('/')) {
+                // Check if it is a skill invocation
+                const cmdName = trimmed.split(/\s+/)[0].toLowerCase();
+                if (!COMMANDS[cmdName] && loop.state._skillsLoader) {
+                    const skill = loop.state._skillsLoader.get(cmdName.slice(1));
+                    if (skill) {
+                        const args = trimmed.slice(cmdName.length).trim();
+                        try {
+                            for await (const event of loop.run(`[Skill: ${skill.name}]\n${skill.prompt}${args ? `\nArguments: ${args}` : ''}`)) {
+                                renderEvent(event);
+                            }
+                            console.log('');
+                        } catch (err) {
+                            console.error(`\x1b[31mSkill error: ${err.message}\x1b[0m`);
+                        }
+                        askPrompt();
+                        return;
+                    }
+                }
+
+                const { response, exit } = executeCommand(trimmed, loop.state);
+                if (exit) { rl.close(); return; }
+                console.log(response);
+                askPrompt();
+                return;
+            }
+
+            // Run through agent loop
+            const spinner = new Spinner('Thinking...');
+            spinner.start();
+
+            try {
+                let firstEvent = true;
+                for await (const event of loop.run(trimmed)) {
+                    if (firstEvent) {
+                        spinner.stop();
+                        firstEvent = false;
+                    }
+                    renderEvent(event);
+                }
+                console.log('');
+
+                // Show status bar if enabled
+                if (settings.showTokenUsage !== false) {
+                    process.stderr.write(renderStatusBar(loop.state) + '\n');
+                }
+            } catch (err) {
+                spinner.stop();
+                console.error(`\x1b[31mError: ${err.message}\x1b[0m`);
+            }
+
+            askPrompt();
+        });
+    };
+
+    askPrompt();
+
+    return new Promise((resolve) => {
+        rl.on('close', resolve);
+    });
+}
+
+/**
+ * Render a single agent loop event to the terminal.
+ */
+function renderEvent(event) {
+    switch (event.type) {
+        case 'stream_event':
+            process.stdout.write(event.text || '');
+            break;
+        case 'thinking':
+            if (process.env.SHOW_THINKING) {
+                process.stdout.write(`\x1b[2m${event.text}\x1b[0m`);
+            }
+            break;
+        case 'tool_progress':
+            process.stderr.write(`${renderToolProgress(event.tool, event.status || 'running')}\n`);
+            break;
+        case 'result':
+            if (process.env.SHOW_TOOL_RESULTS) {
+                const display = String(event.result).slice(0, 300);
+                console.log(`\x1b[36m[${event.tool}]\x1b[0m ${display}`);
+            }
+            break;
+        case 'assistant':
+            if (event.content) {
+                process.stdout.write(highlightCode(event.content));
+            }
+            break;
+        case 'compaction':
+            process.stderr.write(`\x1b[2m[compaction #${event.count}]\x1b[0m\n`);
+            break;
+        case 'hookPermissionResult':
+            if (!event.allowed) {
+                process.stderr.write(`\x1b[31m[blocked: ${event.tool}]\x1b[0m\n`);
+            }
+            break;
+        case 'stop':
+            break;
+        case 'error':
+            console.error(`\x1b[31mError: ${event.message}\x1b[0m`);
+            break;
+    }
+}