@ruvnet/open-claude-code 2.0.1 → 2.1.0

package/src/ui/components.mjs

@@ -0,0 +1,219 @@
+/**
+ * Ink UI Components — React components for the terminal interface.
+ *
+ * Uses React.createElement (no JSX transpiler needed).
+ *
+ * Components:
+ * - StatusBar: persistent bottom bar (model, context%, cost, time, mode)
+ * - Message: renders different message types
+ * - AssistantMessage: markdown-formatted assistant output
+ * - UserMessage: user input display
+ * - ToolMessage: tool execution with spinner
+ * - ThinkingMessage: dim italic thinking blocks
+ * - CodeBlock: bordered code display
+ * - PermissionPrompt: interactive y/n/a prompt
+ * - LoadingIndicator: spinner during API calls
+ * - WelcomeBanner: startup banner
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { renderMarkdown } from './markdown.mjs';
+
+const h = React.createElement;
+
+/**
+ * Format duration in seconds to human-readable string.
+ */
+function formatDuration(seconds) {
+    if (seconds < 60) return `${Math.floor(seconds)}s`;
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}m${secs}s`;
+}
+
+/**
+ * Truncate text to a maximum length.
+ */
+function truncate(text, max) {
+    if (!text) return '';
+    if (text.length <= max) return text;
+    return text.slice(0, max) + '...';
+}
+
+/**
+ * Format cost to display string.
+ */
+function formatCost(cost) {
+    if (cost < 0.01) return `$${cost.toFixed(4)}`;
+    return `$${cost.toFixed(2)}`;
+}
+
+// ---- Status Bar ----
+
+export function StatusBar({ model, tokens, cost, mode, startTime, contextMax }) {
+    const [elapsed, setElapsed] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setElapsed(Math.floor((Date.now() - (startTime || Date.now())) / 1000));
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [startTime]);
+
+    const totalTokens = (tokens?.input || 0) + (tokens?.output || 0);
+    const maxCtx = contextMax || 200000;
+    const contextPct = Math.min(100, Math.round((totalTokens / maxCtx) * 100));
+    const ctxColor = contextPct > 80 ? 'red' : contextPct > 50 ? 'yellow' : 'green';
+
+    return h(Box, null,
+        h(Text, { color: 'cyan', bold: true }, '\u258A '),
+        h(Text, { color: 'white' }, 'open-claude-code'),
+        h(Text, { color: 'gray' }, ' \u2502 '),
+        h(Text, { color: 'green' }, model || 'default'),
+        h(Text, { color: 'gray' }, ' \u2502 '),
+        h(Text, { color: 'yellow' }, '\u23F1 ', formatDuration(elapsed)),
+        h(Text, { color: 'gray' }, ' \u2502 '),
+        h(Text, { color: ctxColor }, '\u25CF ', contextPct, '% ctx'),
+        h(Text, { color: 'gray' }, ' \u2502 '),
+        h(Text, { color: 'white' }, formatCost(cost || 0)),
+        h(Text, { color: 'gray' }, ' \u2502 '),
+        h(Text, { color: 'magenta' }, mode || 'default'),
+    );
+}
+
+// ---- Message Components ----
+
+export function Message({ role, content, toolName, toolResult, toolStatus, thinking }) {
+    if (role === 'assistant') return h(AssistantMessage, { content });
+    if (role === 'tool') return h(ToolMessage, { name: toolName, result: toolResult, status: toolStatus });
+    if (role === 'thinking') return h(ThinkingMessage, { content: thinking });
+    if (role === 'user') return h(UserMessage, { content });
+    if (role === 'error') return h(ErrorMessage, { content });
+    if (role === 'system') return h(SystemMessage, { content });
+    return null;
+}
+
+export function AssistantMessage({ content }) {
+    if (!content) return null;
+    const rendered = renderMarkdown(content);
+    return h(Box, { marginLeft: 0, marginBottom: 0 },
+        h(Text, null, rendered),
+    );
+}
+
+export function UserMessage({ content }) {
+    if (!content) return null;
+    return h(Box, { marginBottom: 0 },
+        h(Text, { color: 'blue', bold: true }, 'You: '),
+        h(Text, null, content),
+    );
+}
+
+export function ToolMessage({ name, result, status }) {
+    const children = [
+        h(Text, { color: 'yellow', key: 'label' }, '[', name, '] '),
+    ];
+
+    if (status === 'running') {
+        children.push(
+            h(Text, { color: 'cyan', key: 'spinner' },
+                h(Spinner, { type: 'dots' }),
+                ' running...',
+            ),
+        );
+    }
+    if (status === 'done' && result) {
+        children.push(
+            h(Text, { color: 'gray', key: 'result' }, ' ', truncate(String(result), 200)),
+        );
+    }
+    if (status === 'error' && result) {
+        children.push(
+            h(Text, { color: 'red', key: 'error' }, ' ', truncate(String(result), 200)),
+        );
+    }
+
+    return h(Box, null, ...children);
+}
+
+export function ThinkingMessage({ content }) {
+    if (!content) return null;
+    return h(Box, null,
+        h(Text, { dimColor: true, italic: true }, '\uD83D\uDCAD ', truncate(content, 500)),
+    );
+}
+
+export function ErrorMessage({ content }) {
+    return h(Box, null,
+        h(Text, { color: 'red', bold: true }, 'Error: '),
+        h(Text, { color: 'red' }, content),
+    );
+}
+
+export function SystemMessage({ content }) {
+    return h(Box, null,
+        h(Text, { dimColor: true }, content),
+    );
+}
+
+// ---- Code Block ----
+
+export function CodeBlock({ code, language }) {
+    if (!code) return null;
+    const children = [];
+    if (language) {
+        children.push(h(Text, { dimColor: true, key: 'lang' }, language));
+    }
+    children.push(h(Text, { key: 'code' }, code));
+
+    return h(Box, {
+        borderStyle: 'single',
+        borderColor: 'gray',
+        paddingX: 1,
+        marginLeft: 2,
+    }, ...children);
+}
+
+// ---- Permission Prompt ----
+
+export function PermissionPrompt({ toolName, command }) {
+    const children = [
+        h(Text, { color: 'yellow', key: 'allow' }, 'Allow '),
+        h(Text, { bold: true, key: 'tool' }, toolName),
+    ];
+    if (command) {
+        children.push(
+            h(Text, { color: 'gray', key: 'cmd' }, ': ', truncate(command, 60)),
+        );
+    }
+    children.push(h(Text, { key: 'prompt' }, ' [y/n/a] '));
+
+    return h(Box, {
+        borderStyle: 'round',
+        borderColor: 'yellow',
+        paddingX: 1,
+    }, ...children);
+}
+
+// ---- Loading Indicator ----
+
+export function LoadingIndicator({ tool }) {
+    return h(Box, null,
+        h(Text, { color: 'cyan' },
+            h(Spinner, { type: 'dots' }),
+        ),
+        h(Text, { dimColor: true }, ' ', tool ? `Running ${tool}...` : 'Thinking...'),
+    );
+}
+
+// ---- Welcome Banner ----
+
+export function WelcomeBanner({ model, toolCount }) {
+    return h(Box, { flexDirection: 'column', marginBottom: 1 },
+        h(Text, { bold: true }, 'open-claude-code v2'),
+        h(Text, { dimColor: true }, 'Model: ', model || 'default', ' | Tools: ', toolCount || 0),
+        h(Text, { dimColor: true }, 'Type your prompt or /help. Press Ctrl+C to exit.'),
+    );
+}

package/src/ui/ink-app.mjs

@@ -8,7 +8,6 @@
  * - Markdown bold, italic, inline code rendering
  * - Status line showing model, tokens used, cost estimate
  * - Progress for tool execution (show tool name + "running...")
- * - Cost display after each turn: (tokens: X in / Y out | $Z)
  */
 
 // ANSI color codes
@@ -30,7 +29,6 @@ const COLORS = {
     bgGreen: '\x1b[42m',
     bgYellow: '\x1b[43m',
     bgBlue: '\x1b[44m',
-    bgGray: '\x1b[48;5;236m',
 };
 
 const noColor = process.env.NO_COLOR === '1';
@@ -80,7 +78,6 @@ export class Spinner {
 
 /**
  * Highlight code blocks in markdown text.
- * Detects ``` blocks and adds subtle background/syntax coloring.
  * @param {string} text
  * @returns {string}
  */
@@ -91,7 +88,7 @@ export function highlightCode(text) {
         const header = lang ? c('dim', `  ${lang}`) : '';
         const highlighted = code
             .split('\n')
-            .map(line => `${COLORS.bgGray}  ${highlightLine(line, lang)}  ${COLORS.reset}`)
+            .map(line => `  ${highlightLine(line, lang)}`)
             .join('\n');
         return `${c('dim', '```')}${header}\n${highlighted}\n${c('dim', '```')}`;
     });
@@ -141,18 +138,16 @@ export function renderMarkdown(text) {
 
 /**
  * Render a tool progress indicator.
- * Shows [ToolName] running... in yellow.
  * @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)}`;
+    return `${icon} ${c('yellow', toolName)} ${c('dim', status)}`;
 }
 
 /**
  * Render a status bar with token counts and cost estimate.
- * Shown after each turn: (tokens: X in / Y out | $Z)
  * @param {object} state
  */
 export function renderStatusBar(state) {
@@ -161,59 +156,25 @@ export function renderStatusBar(state) {
     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 based on 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 = (inp / 1_000_000) * priceIn;
-    const costOut = (out / 1_000_000) * priceOut;
+    // 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 turns = `turn:${state.turnCount || 0}`;
 
-    const costDisplay = `(tokens: ${formatNum(inp)} in / ${formatNum(out)} out | ${cost})`;
-    const right = `${model} | ${costDisplay} | ${turns}`;
+    const right = `${model} | ${tokens} | ${cost} | ${turns}`;
     const padding = Math.max(0, cols - right.length - 1);
     return c('dim', `${' '.repeat(padding)}${right}`);
 }
 
 /**
- * Format a cost display for inline use.
- * @param {object} state
- * @returns {string}
- */
-export function renderCostInline(state) {
-    const inp = state.tokenUsage?.input || 0;
-    const out = state.tokenUsage?.output || 0;
-    const model = state.model || '';
-    let priceIn = 3, priceOut = 15;
-    if (model.includes('haiku')) { priceIn = 0.25; priceOut = 1.25; }
-    if (model.includes('opus')) { priceIn = 15; priceOut = 75; }
-    const cost = ((inp / 1_000_000) * priceIn) + ((out / 1_000_000) * priceOut);
-    return c('dim', `(tokens: ${formatNum(inp)} in / ${formatNum(out)} out | $${cost.toFixed(4)})`);
-}
-
-function formatNum(n) {
-    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
-    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
-    return String(n);
-}
-
-/**
- * Render an error message with context.
+ * Render an error message.
  * @param {string} message
- * @param {string} [context]
  */
-export function renderError(message, context) {
-    let result = `${c('red', 'Error:')} ${message}`;
-    if (context) {
-        result += `\n${c('dim', `  Context: ${context}`)}`;
-    }
-    return result;
+export function renderError(message) {
+    return `${c('red', 'Error:')} ${message}`;
 }
 
 /**
@@ -233,11 +194,11 @@ export function renderSuccess(message) {
 }
 
 /**
- * Render thinking output (dim/gray).
+ * Render thinking output (dim).
  * @param {string} text
  */
 export function renderThinking(text) {
-    return c('gray', text);
+    return c('dim', text);
 }
 
 /**

package/src/ui/markdown.mjs

@@ -0,0 +1,278 @@
+/**
+ * Terminal Markdown Renderer — parse markdown to ANSI-styled text.
+ *
+ * Supports:
+ * - **bold** -> bold text
+ * - *italic* -> italic text
+ * - `code` -> inverse/cyan
+ * - ```code block``` -> bordered box
+ * - - list item -> bullet
+ * - # heading -> bold + underline
+ * - [link](url) -> blue underline
+ * - | table | -> formatted table
+ */
+
+const ANSI = {
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    italic: '\x1b[3m',
+    underline: '\x1b[4m',
+    inverse: '\x1b[7m',
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    blue: '\x1b[34m',
+    magenta: '\x1b[35m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m',
+    gray: '\x1b[90m',
+};
+
+const noColor = process.env.NO_COLOR === '1';
+
+function a(codes, text) {
+    if (noColor) return text;
+    const prefix = Array.isArray(codes) ? codes.join('') : codes;
+    return `${prefix}${text}${ANSI.reset}`;
+}
+
+/**
+ * Render inline markdown formatting within a single line.
+ * @param {string} line
+ * @returns {string}
+ */
+export function renderInline(line) {
+    if (noColor) return line;
+    let result = line;
+
+    // Bold: **text**
+    result = result.replace(/\*\*(.+?)\*\*/g, (_, t) => a(ANSI.bold, t));
+
+    // Italic: *text* (not preceded/followed by *)
+    result = result.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, (_, t) => a(ANSI.italic, t));
+
+    // Inline code: `text`
+    result = result.replace(/`([^`]+)`/g, (_, t) => a(ANSI.cyan, t));
+
+    // Links: [text](url)
+    result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, text, url) => {
+        return `${a([ANSI.blue, ANSI.underline], text)} ${a(ANSI.dim, `(${url})`)}`;
+    });
+
+    return result;
+}
+
+/**
+ * Highlight syntax within a code line (basic keyword/string/number/comment coloring).
+ * @param {string} line
+ * @param {string} lang
+ * @returns {string}
+ */
+export function highlightSyntax(line, lang) {
+    if (noColor) return line;
+    let result = line;
+
+    // Strings
+    result = result.replace(/(["'`])(.*?)\1/g, (m, q, s) => a(ANSI.green, `${q}${s}${q}`));
+
+    // Keywords
+    const kw = /\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|struct|enum|impl|match|type|interface)\b/g;
+    result = result.replace(kw, (m) => a(ANSI.magenta, m));
+
+    // Numbers
+    result = result.replace(/\b(\d+\.?\d*)\b/g, (m) => a(ANSI.yellow, m));
+
+    // Comments
+    result = result.replace(/(\/\/.*|#.*)$/, (m) => a(ANSI.gray, m));
+
+    return result;
+}
+
+/**
+ * Render a full markdown string to ANSI terminal output.
+ * Handles block-level elements (headings, code blocks, lists, tables)
+ * and inline formatting.
+ *
+ * @param {string} text - raw markdown
+ * @returns {string} - ANSI-formatted string
+ */
+export function renderMarkdown(text) {
+    if (!text) return '';
+    const lines = text.split('\n');
+    const output = [];
+    let inCodeBlock = false;
+    let codeLang = '';
+    let codeLines = [];
+    let inTable = false;
+    let tableRows = [];
+
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+
+        // Code block start/end
+        if (line.trimStart().startsWith('```')) {
+            if (inCodeBlock) {
+                // End code block - render it
+                output.push(formatCodeBlock(codeLines, codeLang));
+                inCodeBlock = false;
+                codeLines = [];
+                codeLang = '';
+                continue;
+            }
+            // Start code block
+            inCodeBlock = true;
+            codeLang = line.trimStart().slice(3).trim();
+            continue;
+        }
+
+        if (inCodeBlock) {
+            codeLines.push(line);
+            continue;
+        }
+
+        // Table detection
+        if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
+            // Check if separator row
+            if (/^\|[\s\-:|]+\|$/.test(line.trim())) {
+                // Table separator, skip
+                continue;
+            }
+            tableRows.push(line);
+            // Check if next line is NOT a table row
+            const nextLine = lines[i + 1];
+            if (!nextLine || (!nextLine.trim().startsWith('|') || !nextLine.trim().endsWith('|'))) {
+                // Flush table
+                if (tableRows.length > 0) {
+                    output.push(formatTable(tableRows));
+                    tableRows = [];
+                }
+            }
+            continue;
+        }
+
+        // Flush any pending table rows
+        if (tableRows.length > 0) {
+            output.push(formatTable(tableRows));
+            tableRows = [];
+        }
+
+        // Headings
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)/);
+        if (headingMatch) {
+            const level = headingMatch[1].length;
+            const text = headingMatch[2];
+            if (level === 1) {
+                output.push(a([ANSI.bold, ANSI.underline], text));
+            } else if (level === 2) {
+                output.push(a(ANSI.bold, text));
+            } else {
+                output.push(a(ANSI.bold, text));
+            }
+            continue;
+        }
+
+        // Unordered list
+        const listMatch = line.match(/^(\s*)([-*+])\s+(.*)/);
+        if (listMatch) {
+            const indent = listMatch[1];
+            const content = renderInline(listMatch[3]);
+            output.push(`${indent}  * ${content}`);
+            continue;
+        }
+
+        // Ordered list
+        const olMatch = line.match(/^(\s*)(\d+)\.\s+(.*)/);
+        if (olMatch) {
+            const indent = olMatch[1];
+            const num = olMatch[2];
+            const content = renderInline(olMatch[3]);
+            output.push(`${indent}  ${num}. ${content}`);
+            continue;
+        }
+
+        // Horizontal rule
+        if (/^[-*_]{3,}\s*$/.test(line)) {
+            const cols = process.stdout.columns || 80;
+            output.push(a(ANSI.dim, '\u2500'.repeat(Math.min(cols, 60))));
+            continue;
+        }
+
+        // Blockquote
+        const bqMatch = line.match(/^>\s?(.*)/);
+        if (bqMatch) {
+            output.push(a(ANSI.dim, `  | ${renderInline(bqMatch[1])}`));
+            continue;
+        }
+
+        // Normal line with inline formatting
+        output.push(renderInline(line));
+    }
+
+    // Flush remaining
+    if (inCodeBlock && codeLines.length > 0) {
+        output.push(formatCodeBlock(codeLines, codeLang));
+    }
+    if (tableRows.length > 0) {
+        output.push(formatTable(tableRows));
+    }
+
+    return output.join('\n');
+}
+
+/**
+ * Format a code block with a border.
+ * @param {string[]} lines
+ * @param {string} lang
+ * @returns {string}
+ */
+function formatCodeBlock(lines, lang) {
+    if (noColor) {
+        return lines.map(l => `  ${l}`).join('\n');
+    }
+
+    const maxLen = Math.max(...lines.map(l => l.length), 20);
+    const width = Math.min(maxLen + 4, (process.stdout.columns || 80) - 4);
+    const top = a(ANSI.gray, `  \u250C${'─'.repeat(width)}\u2510${lang ? ` ${lang}` : ''}`);
+    const bot = a(ANSI.gray, `  \u2514${'─'.repeat(width)}\u2518`);
+    const body = lines.map(l => {
+        const highlighted = highlightSyntax(l, lang);
+        return `  ${a(ANSI.gray, '\u2502')} ${highlighted}`;
+    });
+
+    return [top, ...body, bot].join('\n');
+}
+
+/**
+ * Format a markdown table.
+ * @param {string[]} rows
+ * @returns {string}
+ */
+function formatTable(rows) {
+    const parsed = rows.map(r =>
+        r.split('|').slice(1, -1).map(c => c.trim())
+    );
+
+    if (parsed.length === 0) return '';
+
+    // Calculate column widths
+    const colCount = parsed[0].length;
+    const widths = [];
+    for (let c = 0; c < colCount; c++) {
+        widths.push(Math.max(...parsed.map(r => (r[c] || '').length)));
+    }
+
+    const formatted = parsed.map((row, ri) => {
+        const cells = row.map((cell, ci) => cell.padEnd(widths[ci] || 0));
+        const line = `  ${cells.join('  ')}`;
+        return ri === 0 ? a(ANSI.bold, line) : line;
+    });
+
+    // Add separator after header
+    if (formatted.length > 1) {
+        const sep = widths.map(w => '─'.repeat(w)).join('──');
+        formatted.splice(1, 0, a(ANSI.dim, `  ${sep}`));
+    }
+
+    return formatted.join('\n');
+}