genesis-ai-cli 7.4.5

package/dist/src/cli/ui.js

@@ -0,0 +1,632 @@
+"use strict";
+/**
+ * Genesis v7.3 - Modern UI Components
+ *
+ * Reusable CLI components for beautiful terminal output.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_THINKING_SETTINGS = exports.InputHistory = exports.ProgressBar = exports.ThinkingSpinner = exports.Spinner = exports.highlight = exports.muted = exports.info = exports.warning = exports.error = exports.success = exports.COLORS = void 0;
+exports.style = style;
+exports.c = c;
+exports.highlightCode = highlightCode;
+exports.highlightInlineCode = highlightInlineCode;
+exports.formatMarkdown = formatMarkdown;
+exports.box = box;
+exports.table = table;
+exports.stripAnsi = stripAnsi;
+exports.pad = pad;
+exports.truncate = truncate;
+exports.formatDuration = formatDuration;
+exports.formatBytes = formatBytes;
+exports.banner = banner;
+exports.parseThinkingBlocks = parseThinkingBlocks;
+exports.formatThinkingBlock = formatThinkingBlock;
+exports.formatResponseWithThinking = formatResponseWithThinking;
+// ============================================================================
+// Colors & Styles
+// ============================================================================
+exports.COLORS = {
+    reset: '\x1b[0m',
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    italic: '\x1b[3m',
+    underline: '\x1b[4m',
+    inverse: '\x1b[7m',
+    hidden: '\x1b[8m',
+    strikethrough: '\x1b[9m',
+    // Foreground
+    black: '\x1b[30m',
+    red: '\x1b[31m',
+    green: '\x1b[32m',
+    yellow: '\x1b[33m',
+    blue: '\x1b[34m',
+    magenta: '\x1b[35m',
+    cyan: '\x1b[36m',
+    white: '\x1b[37m',
+    gray: '\x1b[90m',
+    // Background
+    bgBlack: '\x1b[40m',
+    bgRed: '\x1b[41m',
+    bgGreen: '\x1b[42m',
+    bgYellow: '\x1b[43m',
+    bgBlue: '\x1b[44m',
+    bgMagenta: '\x1b[45m',
+    bgCyan: '\x1b[46m',
+    bgWhite: '\x1b[47m',
+    bgGray: '\x1b[100m',
+};
+/**
+ * Apply multiple styles to text
+ */
+function style(text, ...styles) {
+    if (styles.length === 0)
+        return text;
+    const codes = styles.map(s => exports.COLORS[s]).join('');
+    return `${codes}${text}${exports.COLORS.reset}`;
+}
+/**
+ * Single color function (backwards compatible)
+ */
+function c(text, color) {
+    return style(text, color);
+}
+// Semantic colors
+const success = (text) => style(text, 'green');
+exports.success = success;
+const error = (text) => style(text, 'red');
+exports.error = error;
+const warning = (text) => style(text, 'yellow');
+exports.warning = warning;
+const info = (text) => style(text, 'cyan');
+exports.info = info;
+const muted = (text) => style(text, 'dim');
+exports.muted = muted;
+const highlight = (text) => style(text, 'bold', 'cyan');
+exports.highlight = highlight;
+// ============================================================================
+// Spinner
+// ============================================================================
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+class Spinner {
+    interval = null;
+    frame = 0;
+    message;
+    running = false;
+    constructor(message = 'Processing') {
+        this.message = message;
+    }
+    start(message) {
+        if (this.running)
+            return;
+        if (message)
+            this.message = message;
+        this.running = true;
+        this.frame = 0;
+        // Initial render
+        process.stdout.write(`${style(SPINNER_FRAMES[0], 'cyan')} ${(0, exports.muted)(this.message + '...')}`);
+        this.interval = setInterval(() => {
+            this.frame = (this.frame + 1) % SPINNER_FRAMES.length;
+            process.stdout.write(`\r${style(SPINNER_FRAMES[this.frame], 'cyan')} ${(0, exports.muted)(this.message + '...')}`);
+        }, 80);
+    }
+    update(message) {
+        this.message = message;
+        if (this.running) {
+            process.stdout.write(`\r${style(SPINNER_FRAMES[this.frame], 'cyan')} ${(0, exports.muted)(this.message + '...')}${' '.repeat(20)}`);
+        }
+    }
+    stop(finalMessage, status = 'success') {
+        if (!this.running)
+            return;
+        this.running = false;
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+        const icons = {
+            success: style('✓', 'green'),
+            error: style('✗', 'red'),
+            warning: style('!', 'yellow'),
+            info: style('i', 'cyan'),
+        };
+        // Clear line and print final message
+        process.stdout.write('\r\x1b[K'); // Clear line
+        if (finalMessage) {
+            console.log(`${icons[status]} ${finalMessage}`);
+        }
+    }
+    isRunning() {
+        return this.running;
+    }
+}
+exports.Spinner = Spinner;
+// ============================================================================
+// Thinking Spinner (v7.3.8) - Shows time, module path, and current action
+// ============================================================================
+const MODULE_ICONS = {
+    memory: '🧠',
+    llm: '💭',
+    grounding: '🔍',
+    tools: '🔧',
+    healing: '🩹',
+    consciousness: '✨',
+    kernel: '⚙️',
+    done: '✓',
+};
+const MODULE_NAMES = {
+    memory: 'Recalling',
+    llm: 'Thinking',
+    grounding: 'Verifying',
+    tools: 'Executing',
+    healing: 'Healing',
+    consciousness: 'Integrating',
+    kernel: 'Coordinating',
+};
+class ThinkingSpinner {
+    interval = null;
+    frame = 0;
+    running = false;
+    startTime = 0;
+    currentModule = '';
+    currentAction = '';
+    modulePath = [];
+    start() {
+        if (this.running)
+            return;
+        this.running = true;
+        this.startTime = Date.now();
+        this.frame = 0;
+        this.modulePath = [];
+        this.currentModule = '';
+        this.currentAction = 'Initializing';
+        this.render();
+        this.interval = setInterval(() => {
+            this.frame = (this.frame + 1) % SPINNER_FRAMES.length;
+            this.render();
+        }, 80);
+    }
+    render() {
+        const elapsed = ((Date.now() - this.startTime) / 1000).toFixed(1);
+        const icon = MODULE_ICONS[this.currentModule] || '○';
+        const moduleName = MODULE_NAMES[this.currentModule] || this.currentModule || 'Processing';
+        // Build module path display (e.g., "memory → llm → tools")
+        const pathStr = this.modulePath.length > 0
+            ? ` ${style(this.modulePath.join(' → '), 'dim')}`
+            : '';
+        // Build action display
+        const actionStr = this.currentAction
+            ? ` ${style('· ' + this.currentAction, 'dim')}`
+            : '';
+        const line = `${style(SPINNER_FRAMES[this.frame], 'cyan')} ${style(`[${elapsed}s]`, 'yellow')} ${icon} ${moduleName}${actionStr}${pathStr}`;
+        process.stdout.write(`\r\x1b[K${line}`);
+    }
+    setModule(module) {
+        if (module && module !== 'done' && module !== this.currentModule) {
+            this.currentModule = module;
+            if (!this.modulePath.includes(module)) {
+                this.modulePath.push(module);
+            }
+        }
+        if (this.running)
+            this.render();
+    }
+    setAction(action) {
+        this.currentAction = action;
+        if (this.running)
+            this.render();
+    }
+    stop() {
+        if (!this.running)
+            return;
+        this.running = false;
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+        const elapsed = ((Date.now() - this.startTime) / 1000).toFixed(1);
+        process.stdout.write(`\r\x1b[K`); // Clear line
+        // Optional: show final summary
+        // console.log(`${style('✓', 'green')} Completed in ${elapsed}s [${this.modulePath.join(' → ')}]`);
+    }
+    isRunning() {
+        return this.running;
+    }
+    getElapsed() {
+        return Date.now() - this.startTime;
+    }
+}
+exports.ThinkingSpinner = ThinkingSpinner;
+class ProgressBar {
+    total;
+    current = 0;
+    width;
+    completeChar;
+    incompleteChar;
+    showPercent;
+    showCount;
+    label;
+    constructor(total, label = '', options = {}) {
+        this.total = total;
+        this.label = label;
+        this.width = options.width ?? 30;
+        this.completeChar = options.complete ?? '█';
+        this.incompleteChar = options.incomplete ?? '░';
+        this.showPercent = options.showPercent ?? true;
+        this.showCount = options.showCount ?? true;
+    }
+    update(current, label) {
+        this.current = Math.min(current, this.total);
+        if (label)
+            this.label = label;
+        this.render();
+    }
+    increment(label) {
+        this.update(this.current + 1, label);
+    }
+    render() {
+        const percent = this.total > 0 ? this.current / this.total : 0;
+        const filled = Math.round(this.width * percent);
+        const empty = this.width - filled;
+        const bar = style(this.completeChar.repeat(filled), 'green') +
+            style(this.incompleteChar.repeat(empty), 'dim');
+        let suffix = '';
+        if (this.showPercent) {
+            suffix += ` ${(percent * 100).toFixed(0)}%`;
+        }
+        if (this.showCount) {
+            suffix += ` (${this.current}/${this.total})`;
+        }
+        const prefix = this.label ? `${this.label} ` : '';
+        process.stdout.write(`\r${prefix}${bar}${(0, exports.muted)(suffix)}${' '.repeat(10)}`);
+    }
+    complete() {
+        this.current = this.total;
+        this.render();
+        console.log(); // New line
+    }
+}
+exports.ProgressBar = ProgressBar;
+// ============================================================================
+// Code Highlighting
+// ============================================================================
+/**
+ * Highlight code blocks in markdown-style text
+ */
+function highlightCode(text) {
+    // Highlight fenced code blocks
+    return text.replace(/```(\w+)?\n([\s\S]*?)```/g, (_, lang, code) => {
+        const langLabel = lang ? style(`[${lang}]`, 'dim') + '\n' : '';
+        return '\n' + langLabel + style(code.trim(), 'cyan') + '\n';
+    });
+}
+/**
+ * Highlight inline code
+ */
+function highlightInlineCode(text) {
+    return text.replace(/`([^`]+)`/g, (_, code) => style(code, 'cyan'));
+}
+/**
+ * Full markdown-style formatting
+ */
+function formatMarkdown(text) {
+    let result = text;
+    // Code blocks first
+    result = highlightCode(result);
+    // Inline code
+    result = highlightInlineCode(result);
+    // Bold
+    result = result.replace(/\*\*([^*]+)\*\*/g, (_, t) => style(t, 'bold'));
+    // Italic
+    result = result.replace(/\*([^*]+)\*/g, (_, t) => style(t, 'italic'));
+    // Headers
+    result = result.replace(/^### (.+)$/gm, (_, t) => style(t, 'bold', 'yellow'));
+    result = result.replace(/^## (.+)$/gm, (_, t) => style(t, 'bold', 'cyan'));
+    result = result.replace(/^# (.+)$/gm, (_, t) => style(t, 'bold', 'green'));
+    // Links (just highlight, can't click in terminal)
+    result = result.replace(/\[([^\]]+)\]\([^)]+\)/g, (_, t) => style(t, 'underline', 'blue'));
+    return result;
+}
+function box(content, options = {}) {
+    const lines = Array.isArray(content) ? content : content.split('\n');
+    const padding = options.padding ?? 1;
+    const borderColor = options.borderColor ?? 'cyan';
+    const titleColor = options.titleColor ?? 'bold';
+    // Calculate width
+    const maxLineLength = Math.max(...lines.map(l => stripAnsi(l).length));
+    const innerWidth = maxLineLength + padding * 2;
+    const horizontal = '═'.repeat(innerWidth);
+    const topBorder = style('╔' + horizontal + '╗', borderColor);
+    const bottomBorder = style('╚' + horizontal + '╝', borderColor);
+    const result = [];
+    // Top border with optional title
+    if (options.title) {
+        const titleStr = ` ${options.title} `;
+        const titleLen = stripAnsi(titleStr).length;
+        const leftPad = Math.floor((innerWidth - titleLen) / 2);
+        const rightPad = innerWidth - titleLen - leftPad;
+        result.push(style('╔' + '═'.repeat(leftPad), borderColor) +
+            style(titleStr, titleColor) +
+            style('═'.repeat(rightPad) + '╗', borderColor));
+    }
+    else {
+        result.push(topBorder);
+    }
+    // Content lines
+    for (const line of lines) {
+        const lineLen = stripAnsi(line).length;
+        const rightPad = innerWidth - lineLen - padding;
+        result.push(style('║', borderColor) +
+            ' '.repeat(padding) +
+            line +
+            ' '.repeat(Math.max(0, rightPad)) +
+            style('║', borderColor));
+    }
+    result.push(bottomBorder);
+    return result.join('\n');
+}
+function table(data, columns) {
+    // Calculate column widths
+    const widths = columns.map(col => {
+        if (col.width)
+            return col.width;
+        const headerLen = col.header.length;
+        const maxDataLen = Math.max(...data.map(row => String(row[col.key] ?? '').length));
+        return Math.max(headerLen, maxDataLen);
+    });
+    const separator = '─'.repeat(widths.reduce((a, b) => a + b + 3, 1));
+    const lines = [];
+    // Header
+    const headerRow = columns.map((col, i) => pad(col.header, widths[i], col.align)).join(' │ ');
+    lines.push(style('┌' + separator + '┐', 'dim'));
+    lines.push(style('│ ', 'dim') + style(headerRow, 'bold') + style(' │', 'dim'));
+    lines.push(style('├' + separator + '┤', 'dim'));
+    // Data rows
+    for (const row of data) {
+        const rowStr = columns.map((col, i) => {
+            const value = String(row[col.key] ?? '');
+            return pad(value, widths[i], col.align);
+        }).join(' │ ');
+        lines.push(style('│ ', 'dim') + rowStr + style(' │', 'dim'));
+    }
+    lines.push(style('└' + separator + '┘', 'dim'));
+    return lines.join('\n');
+}
+// ============================================================================
+// Utilities
+// ============================================================================
+/**
+ * Strip ANSI codes from string
+ */
+function stripAnsi(text) {
+    return text.replace(/\x1b\[[0-9;]*m/g, '');
+}
+/**
+ * Pad string to width
+ */
+function pad(text, width, align = 'left') {
+    const len = stripAnsi(text).length;
+    if (len >= width)
+        return text;
+    const padding = width - len;
+    switch (align) {
+        case 'right':
+            return ' '.repeat(padding) + text;
+        case 'center':
+            const left = Math.floor(padding / 2);
+            const right = padding - left;
+            return ' '.repeat(left) + text + ' '.repeat(right);
+        default:
+            return text + ' '.repeat(padding);
+    }
+}
+/**
+ * Truncate text with ellipsis
+ */
+function truncate(text, maxLength) {
+    if (text.length <= maxLength)
+        return text;
+    return text.slice(0, maxLength - 3) + '...';
+}
+/**
+ * Format duration in human readable format
+ */
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.round((ms % 60000) / 1000);
+    return `${minutes}m ${seconds}s`;
+}
+/**
+ * Format bytes in human readable format
+ */
+function formatBytes(bytes) {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let i = 0;
+    while (bytes >= 1024 && i < units.length - 1) {
+        bytes /= 1024;
+        i++;
+    }
+    return `${bytes.toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+}
+// ============================================================================
+// Input History (for readline enhancement)
+// ============================================================================
+class InputHistory {
+    history = [];
+    maxSize;
+    position = -1;
+    constructor(maxSize = 100) {
+        this.maxSize = maxSize;
+    }
+    add(input) {
+        // Don't add duplicates of the last entry
+        if (input && input !== this.history[0]) {
+            this.history.unshift(input);
+            if (this.history.length > this.maxSize) {
+                this.history.pop();
+            }
+        }
+        this.position = -1;
+    }
+    previous(current) {
+        if (this.position < this.history.length - 1) {
+            this.position++;
+            return this.history[this.position];
+        }
+        return null;
+    }
+    next() {
+        if (this.position > 0) {
+            this.position--;
+            return this.history[this.position];
+        }
+        if (this.position === 0) {
+            this.position = -1;
+            return '';
+        }
+        return null;
+    }
+    reset() {
+        this.position = -1;
+    }
+    getAll() {
+        return [...this.history];
+    }
+    clear() {
+        this.history = [];
+        this.position = -1;
+    }
+}
+exports.InputHistory = InputHistory;
+// ============================================================================
+// Banner
+// ============================================================================
+function banner(title, subtitle, width = 63) {
+    console.log();
+    console.log(style('╔' + '═'.repeat(width) + '╗', 'cyan'));
+    const titlePadding = width - title.length;
+    console.log(style('║', 'cyan') +
+        '  ' + style(title, 'bold') +
+        ' '.repeat(titlePadding - 2) +
+        style('║', 'cyan'));
+    if (subtitle) {
+        const subPadding = width - subtitle.length;
+        console.log(style('║', 'cyan') +
+            '  ' + style(subtitle, 'dim') +
+            ' '.repeat(subPadding - 2) +
+            style('║', 'cyan'));
+    }
+    console.log(style('╚' + '═'.repeat(width) + '╝', 'cyan'));
+    console.log();
+}
+/**
+ * Parse thinking blocks from LLM response
+ * Supports: <think>...</think>, <thinking>...</thinking>, <reasoning>...</reasoning>
+ */
+function parseThinkingBlocks(response) {
+    const thinking = [];
+    let content = response;
+    // Patterns for different thinking block formats
+    const patterns = [
+        { regex: /<think>([\s\S]*?)<\/think>/gi, type: 'think' },
+        { regex: /<thinking>([\s\S]*?)<\/thinking>/gi, type: 'thinking' },
+        { regex: /<reasoning>([\s\S]*?)<\/reasoning>/gi, type: 'reasoning' },
+    ];
+    for (const { regex, type } of patterns) {
+        let match;
+        while ((match = regex.exec(response)) !== null) {
+            thinking.push({
+                content: match[1].trim(),
+                startIndex: match.index,
+                endIndex: match.index + match[0].length,
+                type,
+            });
+        }
+        // Remove thinking blocks from content
+        content = content.replace(regex, '');
+    }
+    // Clean up extra whitespace from removal
+    content = content.replace(/\n{3,}/g, '\n\n').trim();
+    return {
+        thinking,
+        content,
+        hasThinking: thinking.length > 0,
+    };
+}
+/**
+ * Format a thinking block for display
+ * @param block - The thinking block to format
+ * @param collapsed - Whether to show collapsed (summary only) or expanded
+ * @param maxPreviewLength - Max characters for collapsed preview
+ */
+function formatThinkingBlock(block, collapsed = false, maxPreviewLength = 80) {
+    const lines = [];
+    const icon = '💭';
+    const label = block.type === 'reasoning' ? 'Reasoning' : 'Thinking';
+    if (collapsed) {
+        // Collapsed: show one-line preview
+        const preview = block.content
+            .replace(/\n/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim();
+        const truncated = preview.length > maxPreviewLength
+            ? preview.slice(0, maxPreviewLength - 3) + '...'
+            : preview;
+        lines.push(style(`  ${icon} [${label}] ${truncated}`, 'dim'));
+    }
+    else {
+        // Expanded: show full thinking with visual distinction
+        lines.push(style(`  ${icon} ─── ${label} ───`, 'dim'));
+        // Indent and dim each line of thinking content
+        const thinkingLines = block.content.split('\n');
+        for (const line of thinkingLines) {
+            lines.push(style(`  │ ${line}`, 'dim'));
+        }
+        lines.push(style('  └───────────────', 'dim'));
+    }
+    return lines.join('\n');
+}
+/**
+ * Format response with thinking blocks
+ * @param response - Raw LLM response
+ * @param showThinking - Whether to show thinking blocks
+ * @param collapsedThinking - Whether thinking should be collapsed
+ */
+function formatResponseWithThinking(response, showThinking = true, collapsedThinking = false) {
+    const parsed = parseThinkingBlocks(response);
+    if (!parsed.hasThinking) {
+        return {
+            formatted: formatMarkdown(parsed.content),
+            hasThinking: false,
+            thinkingCount: 0,
+        };
+    }
+    const parts = [];
+    // Show thinking blocks first if enabled
+    if (showThinking && parsed.thinking.length > 0) {
+        for (const block of parsed.thinking) {
+            parts.push(formatThinkingBlock(block, collapsedThinking));
+        }
+        parts.push(''); // Empty line between thinking and response
+    }
+    else if (parsed.thinking.length > 0) {
+        // Just show indicator that thinking was hidden
+        parts.push(style(`  💭 [${parsed.thinking.length} thinking block(s) hidden - use /thinking to show]`, 'dim'));
+        parts.push('');
+    }
+    // Add the main response content
+    parts.push(formatMarkdown(parsed.content));
+    return {
+        formatted: parts.join('\n'),
+        hasThinking: true,
+        thinkingCount: parsed.thinking.length,
+    };
+}
+exports.DEFAULT_THINKING_SETTINGS = {
+    enabled: true,
+    collapsed: false,
+    streaming: false,
+};