dartmind 17.0.0

package/dist/ui/TerminalUI.js

@@ -0,0 +1,655 @@
+/**
+ * FlutterAI Super Engine v8 - Terminal UI
+ *
+ * Claude Code-style terminal interface with:
+ * - Chat boxes with colored borders
+ * - Permission prompts
+ * - Progress bars and spinners
+ * - Syntax highlighting
+ * - Diff views
+ * - Tables
+ */
+import * as readline from 'readline';
+// ============================================================================
+// ANSI Color & Style Codes
+// ============================================================================
+export const Colors = {
+    // Reset
+    reset: '\x1b[0m',
+    // Styles
+    bold: '\x1b[1m',
+    dim: '\x1b[2m',
+    italic: '\x1b[3m',
+    underline: '\x1b[4m',
+    // Foreground Colors
+    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',
+    // Bright Foreground
+    brightRed: '\x1b[91m',
+    brightGreen: '\x1b[92m',
+    brightYellow: '\x1b[93m',
+    brightBlue: '\x1b[94m',
+    brightMagenta: '\x1b[95m',
+    brightCyan: '\x1b[96m',
+    // Background Colors
+    bgBlack: '\x1b[40m',
+    bgRed: '\x1b[41m',
+    bgGreen: '\x1b[42m',
+    bgYellow: '\x1b[43m',
+    bgBlue: '\x1b[44m',
+    bgMagenta: '\x1b[45m',
+    bgCyan: '\x1b[46m',
+    bgWhite: '\x1b[47m',
+};
+const C = Colors;
+// ============================================================================
+// Icons
+// ============================================================================
+export const Icons = {
+    // Status
+    check: '✓',
+    cross: '✗',
+    warning: '⚠',
+    info: 'ℹ',
+    question: '?',
+    // UI
+    arrowRight: '→',
+    arrowDown: '↓',
+    bullet: '•',
+    dot: '·',
+    // Emoji
+    flutter: '🦋',
+    ai: '🤖',
+    user: '👤',
+    system: '⚙️',
+    file: '📄',
+    folder: '📁',
+    rocket: '🚀',
+    sparkle: '✨',
+    lock: '🔐',
+    key: '🔑',
+    shield: '🛡️',
+    bug: '🐛',
+    fire: '🔥',
+    think: '💭',
+    clock: '⏱️',
+    gear: '⚙',
+    chart: '📊',
+    execute: '▶',
+    tool: '🔧',
+    terminal: '💻',
+    // Persona
+    security: '🔒',
+    performance: '⚡',
+    architecture: '🏗️',
+    devil: '😈',
+};
+// ============================================================================
+// Box Drawing Characters
+// ============================================================================
+const BoxChars = {
+    topLeft: '╭',
+    topRight: '╮',
+    bottomLeft: '╰',
+    bottomRight: '╯',
+    horizontal: '─',
+    vertical: '│',
+    horizontalDouble: '═',
+    verticalDouble: '║',
+    topLeftDouble: '╔',
+    topRightDouble: '╗',
+    bottomLeftDouble: '╚',
+    bottomRightDouble: '╝',
+};
+// ============================================================================
+// Terminal UI Class
+// ============================================================================
+export class TerminalUI {
+    spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    spinnerIndex = 0;
+    spinnerInterval = null;
+    spinnerText = '';
+    terminalWidth;
+    constructor() {
+        this.terminalWidth = process.stdout.columns || 80;
+    }
+    // ==========================================================================
+    // CHAT BOX - Like Claude Code conversations
+    // ==========================================================================
+    /**
+     * Show chat message in a styled box
+     */
+    showChatMessage(role, message, title) {
+        const config = this.getRoleConfig(role);
+        const boxTitle = title || `${config.icon} ${config.label}`;
+        const box = this.createBox(message, {
+            borderColor: config.color,
+            title: boxTitle,
+            titleColor: config.color,
+            padding: 1,
+            maxWidth: Math.min(this.terminalWidth - 4, 100),
+        });
+        console.log(box);
+    }
+    getRoleConfig(role) {
+        switch (role) {
+            case 'user':
+                return { icon: Icons.user, label: 'YOU', color: C.cyan };
+            case 'assistant':
+                return { icon: Icons.ai, label: 'FLUTTERAI', color: C.green };
+            case 'system':
+                return { icon: Icons.system, label: 'SYSTEM', color: C.yellow };
+            case 'persona':
+                return { icon: Icons.shield, label: 'PERSONA', color: C.magenta };
+            default:
+                return { icon: Icons.info, label: 'INFO', color: C.gray };
+        }
+    }
+    // ==========================================================================
+    // FILE OPERATION BOX
+    // ==========================================================================
+    /**
+     * Show file operation with preview
+     */
+    showFileOperation(operation, filePath, content) {
+        const icons = {
+            create: `${C.green}+ CREATE${C.reset}`,
+            modify: `${C.yellow}~ MODIFY${C.reset}`,
+            delete: `${C.red}- DELETE${C.reset}`,
+        };
+        const colors = {
+            create: C.green,
+            modify: C.yellow,
+            delete: C.red,
+        };
+        let display = `${icons[operation]} ${C.bold}${filePath}${C.reset}`;
+        if (content && operation !== 'delete') {
+            const lines = content.split('\n');
+            const preview = lines.slice(0, 15);
+            const hasMore = lines.length > 15;
+            display += '\n\n' + C.dim + '─'.repeat(50) + C.reset + '\n';
+            display += this.syntaxHighlight(preview.join('\n'), this.getLanguage(filePath));
+            if (hasMore) {
+                display += `\n${C.dim}... and ${lines.length - 15} more lines${C.reset}`;
+            }
+        }
+        const box = this.createBox(display, {
+            borderColor: colors[operation],
+            title: `${Icons.file} File Operation`,
+            padding: 1,
+            maxWidth: Math.min(this.terminalWidth - 4, 120),
+        });
+        console.log(box);
+    }
+    // ==========================================================================
+    // PERMISSION PROMPT
+    // ==========================================================================
+    /**
+     * Show permission prompt and get user response
+     */
+    async showPermissionPrompt(options) {
+        const riskColors = {
+            low: C.green,
+            medium: C.yellow,
+            high: C.red,
+        };
+        const riskIcons = {
+            low: Icons.check,
+            medium: Icons.warning,
+            high: Icons.fire,
+        };
+        const content = `${C.bold}${options.title}${C.reset}
+
+${options.message}
+
+${C.dim}Target:${C.reset} ${C.cyan}${options.target}${C.reset}
+${C.dim}Risk Level:${C.reset} ${riskColors[options.risk]}${riskIcons[options.risk]} ${options.risk.toUpperCase()}${C.reset}`;
+        const box = this.createBox(content, {
+            borderColor: options.risk === 'high' ? C.red : C.yellow,
+            borderStyle: 'double',
+            title: `${Icons.lock} PERMISSION REQUIRED`,
+            titleColor: options.risk === 'high' ? C.red : C.yellow,
+            padding: 1,
+        });
+        console.log('\n' + box);
+        const defaultOptions = [
+            { key: 'y', label: 'Yes, allow this once' },
+            { key: 'a', label: 'Always allow this action' },
+            { key: 'n', label: 'No, deny' },
+            { key: 's', label: 'Always deny (session)' },
+        ];
+        const promptOptions = options.options || defaultOptions;
+        console.log('\n' + C.dim + 'Options:' + C.reset);
+        promptOptions.forEach((opt) => {
+            console.log(`  ${C.cyan}[${opt.key}]${C.reset} ${opt.label}`);
+        });
+        const answer = await this.prompt(`\n${C.bold}Your choice:${C.reset} `);
+        const choice = answer.toLowerCase().trim() || 'n';
+        return { choice };
+    }
+    // ==========================================================================
+    // TABLE DISPLAY
+    // ==========================================================================
+    /**
+     * Show data in a formatted table
+     */
+    showTable(options) {
+        const { title, headers, rows, align = [] } = options;
+        // Calculate column widths
+        const columnWidths = headers.map((h, i) => {
+            const maxContentWidth = Math.max(h.length, ...rows.map((r) => (r[i] || '').length));
+            return Math.min(maxContentWidth, 40);
+        });
+        // Build table
+        const separator = '─'.repeat(columnWidths.reduce((a, b) => a + b + 3, 1));
+        if (title) {
+            console.log(`\n${C.bold}${title}${C.reset}`);
+        }
+        // Header
+        console.log(C.dim + '┌' + separator + '┐' + C.reset);
+        console.log(C.dim + '│ ' + C.reset +
+            headers.map((h, i) => this.padCell(C.bold + C.cyan + h + C.reset, columnWidths[i], align[i])).join(C.dim + ' │ ' + C.reset) +
+            C.dim + ' │' + C.reset);
+        console.log(C.dim + '├' + separator + '┤' + C.reset);
+        // Rows
+        rows.forEach((row) => {
+            console.log(C.dim + '│ ' + C.reset +
+                row.map((cell, i) => this.padCell(cell || '', columnWidths[i], align[i])).join(C.dim + ' │ ' + C.reset) +
+                C.dim + ' │' + C.reset);
+        });
+        console.log(C.dim + '└' + separator + '┘' + C.reset + '\n');
+    }
+    padCell(text, width, align = 'left') {
+        const visibleLength = this.stripAnsi(text).length;
+        const padding = width - visibleLength;
+        if (padding <= 0)
+            return text.substring(0, width);
+        switch (align) {
+            case 'right':
+                return ' '.repeat(padding) + text;
+            case 'center':
+                const left = Math.floor(padding / 2);
+                return ' '.repeat(left) + text + ' '.repeat(padding - left);
+            default:
+                return text + ' '.repeat(padding);
+        }
+    }
+    // ==========================================================================
+    // PERSONA RESULTS DISPLAY
+    // ==========================================================================
+    /**
+     * Show persona analysis results
+     */
+    showPersonaResult(result) {
+        const statusIcon = result.approved ? `${C.green}${Icons.check}${C.reset}` : `${C.red}${Icons.cross}${C.reset}`;
+        const borderColor = result.approved ? C.green : C.red;
+        const personaIcons = {
+            'Security Auditor': Icons.security,
+            'Performance Engineer': Icons.performance,
+            'Architecture Reviewer': Icons.architecture,
+            "Devil's Advocate": Icons.devil,
+        };
+        const icon = personaIcons[result.persona] || Icons.shield;
+        let content = `${statusIcon} ${result.verdict}\n`;
+        if (result.findings.length > 0) {
+            content += `\n${C.bold}Findings:${C.reset}\n`;
+            for (const finding of result.findings) {
+                const severityIcons = {
+                    critical: `${C.red}●${C.reset}`,
+                    warning: `${C.yellow}●${C.reset}`,
+                    info: `${C.blue}●${C.reset}`,
+                };
+                const sevIcon = severityIcons[finding.severity] || '○';
+                content += `\n${sevIcon} ${C.bold}[${finding.severity.toUpperCase()}]${C.reset} ${finding.message}`;
+                if (finding.location) {
+                    content += `\n   ${C.dim}📍 ${finding.location}${C.reset}`;
+                }
+                if (finding.suggestion) {
+                    content += `\n   ${C.cyan}💡 ${finding.suggestion}${C.reset}`;
+                }
+            }
+        }
+        const box = this.createBox(content, {
+            borderColor,
+            title: `${icon} ${result.persona}`,
+            titleColor: borderColor,
+            padding: 1,
+        });
+        console.log(box);
+    }
+    // ==========================================================================
+    // DIFF VIEW
+    // ==========================================================================
+    /**
+     * Show diff between original and modified content
+     */
+    showDiff(original, modified, filePath) {
+        const originalLines = original.split('\n');
+        const modifiedLines = modified.split('\n');
+        let diffContent = '';
+        const maxLines = Math.max(originalLines.length, modifiedLines.length);
+        for (let i = 0; i < maxLines; i++) {
+            const origLine = originalLines[i];
+            const modLine = modifiedLines[i];
+            if (origLine === undefined) {
+                // Added line
+                diffContent += `${C.green}+ ${modLine}${C.reset}\n`;
+            }
+            else if (modLine === undefined) {
+                // Removed line
+                diffContent += `${C.red}- ${origLine}${C.reset}\n`;
+            }
+            else if (origLine !== modLine) {
+                // Changed line
+                diffContent += `${C.red}- ${origLine}${C.reset}\n`;
+                diffContent += `${C.green}+ ${modLine}${C.reset}\n`;
+            }
+            else {
+                // Unchanged
+                diffContent += `${C.dim}  ${origLine}${C.reset}\n`;
+            }
+        }
+        const box = this.createBox(diffContent.trimEnd(), {
+            borderColor: C.magenta,
+            title: `📝 Changes to ${filePath}`,
+            padding: 1,
+            maxWidth: Math.min(this.terminalWidth - 4, 120),
+        });
+        console.log(box);
+    }
+    // ==========================================================================
+    // PROGRESS BAR
+    // ==========================================================================
+    /**
+     * Show a progress bar
+     */
+    showProgress(current, total, label = '') {
+        const width = 40;
+        const percentage = Math.round((current / total) * 100);
+        const filled = Math.round((current / total) * width);
+        const empty = width - filled;
+        const bar = C.cyan + '█'.repeat(filled) + C.dim + '░'.repeat(empty) + C.reset;
+        const status = `${current}/${total}`;
+        process.stdout.write(`\r${bar} ${percentage}% ${status} ${label}   `);
+        if (current >= total) {
+            process.stdout.write('\n');
+        }
+    }
+    // ==========================================================================
+    // SPINNER
+    // ==========================================================================
+    /**
+     * Start a spinner
+     */
+    startSpinner(text = 'Processing') {
+        this.spinnerText = text;
+        this.spinnerIndex = 0;
+        if (this.spinnerInterval) {
+            clearInterval(this.spinnerInterval);
+        }
+        this.spinnerInterval = setInterval(() => {
+            const frame = this.spinnerFrames[this.spinnerIndex];
+            process.stdout.write(`\r${C.cyan}${frame}${C.reset} ${C.dim}${this.spinnerText}...${C.reset}  `);
+            this.spinnerIndex = (this.spinnerIndex + 1) % this.spinnerFrames.length;
+        }, 80);
+    }
+    /**
+     * Update spinner text
+     */
+    updateSpinner(text) {
+        this.spinnerText = text;
+    }
+    /**
+     * Stop spinner with result
+     */
+    stopSpinner(success, text) {
+        if (this.spinnerInterval) {
+            clearInterval(this.spinnerInterval);
+            this.spinnerInterval = null;
+        }
+        const icon = success ? `${C.green}${Icons.check}${C.reset}` : `${C.red}${Icons.cross}${C.reset}`;
+        process.stdout.write(`\r${icon} ${text}${' '.repeat(20)}\n`);
+    }
+    // ==========================================================================
+    // STREAMING OUTPUT
+    // ==========================================================================
+    /**
+     * Stream output character by character
+     */
+    async *streamOutput(generator) {
+        process.stdout.write(`${C.green}${Icons.ai}${C.reset} `);
+        for await (const chunk of generator) {
+            process.stdout.write(chunk);
+            yield chunk;
+        }
+        process.stdout.write('\n');
+    }
+    /**
+     * Type text with delay (typewriter effect)
+     */
+    async typeText(text, delay = 20) {
+        for (const char of text) {
+            process.stdout.write(char);
+            await this.sleep(delay);
+        }
+        process.stdout.write('\n');
+    }
+    // ==========================================================================
+    // INPUT
+    // ==========================================================================
+    /**
+     * Prompt for input
+     */
+    async prompt(question) {
+        return new Promise((resolve) => {
+            const rl = readline.createInterface({
+                input: process.stdin,
+                output: process.stdout,
+            });
+            rl.question(question, (answer) => {
+                rl.close();
+                resolve(answer);
+            });
+        });
+    }
+    /**
+     * Confirm yes/no
+     */
+    async confirm(message, defaultValue = false) {
+        const hint = defaultValue ? '[Y/n]' : '[y/N]';
+        const answer = await this.prompt(`${message} ${C.dim}${hint}${C.reset} `);
+        if (answer.trim() === '') {
+            return defaultValue;
+        }
+        return answer.toLowerCase().startsWith('y');
+    }
+    // ==========================================================================
+    // SIMPLE OUTPUTS
+    // ==========================================================================
+    success(message) {
+        console.log(`${C.green}${Icons.check}${C.reset} ${message}`);
+    }
+    error(message) {
+        console.log(`${C.red}${Icons.cross}${C.reset} ${message}`);
+    }
+    warning(message) {
+        console.log(`${C.yellow}${Icons.warning}${C.reset} ${message}`);
+    }
+    info(message) {
+        console.log(`${C.blue}${Icons.info}${C.reset} ${message}`);
+    }
+    log(message) {
+        console.log(message);
+    }
+    // ==========================================================================
+    // BOX CREATION
+    // ==========================================================================
+    createBox(content, options = {}) {
+        const { borderColor = C.gray, borderStyle = 'single', title, titleColor = borderColor, padding = 0, maxWidth = 80, } = options;
+        const chars = borderStyle === 'double'
+            ? {
+                tl: BoxChars.topLeftDouble,
+                tr: BoxChars.topRightDouble,
+                bl: BoxChars.bottomLeftDouble,
+                br: BoxChars.bottomRightDouble,
+                h: BoxChars.horizontalDouble,
+                v: BoxChars.verticalDouble,
+            }
+            : {
+                tl: BoxChars.topLeft,
+                tr: BoxChars.topRight,
+                bl: BoxChars.bottomLeft,
+                br: BoxChars.bottomRight,
+                h: BoxChars.horizontal,
+                v: BoxChars.vertical,
+            };
+        const lines = content.split('\n');
+        const contentWidth = Math.min(maxWidth - 4 - padding * 2, Math.max(...lines.map((l) => this.stripAnsi(l).length)));
+        const innerWidth = contentWidth + padding * 2;
+        // Wrap lines
+        const wrappedLines = [];
+        for (const line of lines) {
+            const wrapped = this.wrapText(line, contentWidth);
+            wrappedLines.push(...wrapped);
+        }
+        // Build box
+        const result = [];
+        // Top border with title
+        if (title) {
+            const titleText = ` ${title} `;
+            const titleLen = this.stripAnsi(titleText).length;
+            const leftPad = 2;
+            const rightPad = innerWidth - leftPad - titleLen;
+            result.push(borderColor +
+                chars.tl +
+                chars.h.repeat(leftPad) +
+                C.reset +
+                titleColor +
+                titleText +
+                C.reset +
+                borderColor +
+                chars.h.repeat(Math.max(0, rightPad)) +
+                chars.tr +
+                C.reset);
+        }
+        else {
+            result.push(borderColor + chars.tl + chars.h.repeat(innerWidth) + chars.tr + C.reset);
+        }
+        // Padding top
+        for (let i = 0; i < padding; i++) {
+            result.push(borderColor + chars.v + C.reset + ' '.repeat(innerWidth) + borderColor + chars.v + C.reset);
+        }
+        // Content lines
+        for (const line of wrappedLines) {
+            const lineLen = this.stripAnsi(line).length;
+            const rightPad = contentWidth - lineLen;
+            result.push(borderColor +
+                chars.v +
+                C.reset +
+                ' '.repeat(padding) +
+                line +
+                ' '.repeat(Math.max(0, rightPad)) +
+                ' '.repeat(padding) +
+                borderColor +
+                chars.v +
+                C.reset);
+        }
+        // Padding bottom
+        for (let i = 0; i < padding; i++) {
+            result.push(borderColor + chars.v + C.reset + ' '.repeat(innerWidth) + borderColor + chars.v + C.reset);
+        }
+        // Bottom border
+        result.push(borderColor + chars.bl + chars.h.repeat(innerWidth) + chars.br + C.reset);
+        return '\n' + result.join('\n');
+    }
+    // ==========================================================================
+    // SYNTAX HIGHLIGHTING (Basic)
+    // ==========================================================================
+    syntaxHighlight(code, language) {
+        if (language === 'dart') {
+            return code
+                .replace(/\b(class|extends|implements|with|abstract|static|final|const|var|void|bool|int|double|String|List|Map|Set|Future|Stream|async|await|return|if|else|for|while|switch|case|default|break|continue|try|catch|finally|throw|import|export|part|library|typedef|enum|mixin|late|required|get|set)\b/g, `${C.magenta}$1${C.reset}`)
+                .replace(/\b(true|false|null)\b/g, `${C.yellow}$1${C.reset}`)
+                .replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, `${C.green}$&${C.reset}`)
+                .replace(/\/\/.*/g, `${C.dim}$&${C.reset}`)
+                .replace(/\/\*[\s\S]*?\*\//g, `${C.dim}$&${C.reset}`)
+                .replace(/@\w+/g, `${C.cyan}$&${C.reset}`);
+        }
+        return code;
+    }
+    getLanguage(filePath) {
+        const ext = filePath.split('.').pop()?.toLowerCase();
+        const map = {
+            dart: 'dart',
+            ts: 'typescript',
+            js: 'javascript',
+            json: 'json',
+            yaml: 'yaml',
+            yml: 'yaml',
+            md: 'markdown',
+        };
+        return map[ext || ''] || 'plaintext';
+    }
+    // ==========================================================================
+    // UTILITIES
+    // ==========================================================================
+    stripAnsi(text) {
+        return text.replace(/\x1b\[[0-9;]*m/g, '');
+    }
+    wrapText(text, maxWidth) {
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = '';
+        for (const word of words) {
+            const testLine = currentLine ? `${currentLine} ${word}` : word;
+            if (this.stripAnsi(testLine).length <= maxWidth) {
+                currentLine = testLine;
+            }
+            else {
+                if (currentLine)
+                    lines.push(currentLine);
+                currentLine = word;
+            }
+        }
+        if (currentLine)
+            lines.push(currentLine);
+        return lines.length ? lines : [''];
+    }
+    sleep(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    /**
+     * Clear the terminal
+     */
+    clear() {
+        console.clear();
+    }
+    /**
+     * Show banner
+     */
+    showBanner() {
+        console.log(`
+${C.cyan}${C.bold}╔═══════════════════════════════════════════════════════════════╗
+║                                                               ║
+║   ${C.white}███████╗${C.cyan}██╗     ${C.white}██╗   ██╗${C.cyan}████████╗${C.white}████████╗${C.cyan}███████╗${C.white}██████╗${C.cyan}   ║
+║   ${C.white}██╔════╝${C.cyan}██║     ${C.white}██║   ██║${C.cyan}╚══██╔══╝${C.white}╚══██╔══╝${C.cyan}██╔════╝${C.white}██╔══██╗${C.cyan}  ║
+║   ${C.white}█████╗  ${C.cyan}██║     ${C.white}██║   ██║${C.cyan}   ██║   ${C.white}   ██║   ${C.cyan}█████╗  ${C.white}██████╔╝${C.cyan}  ║
+║   ${C.white}██╔══╝  ${C.cyan}██║     ${C.white}██║   ██║${C.cyan}   ██║   ${C.white}   ██║   ${C.cyan}██╔══╝  ${C.white}██╔══██╗${C.cyan}  ║
+║   ${C.white}██║     ${C.cyan}███████╗${C.white}╚██████╔╝${C.cyan}   ██║   ${C.white}   ██║   ${C.cyan}███████╗${C.white}██║  ██║${C.cyan}  ║
+║   ${C.white}╚═╝     ${C.cyan}╚══════╝${C.white} ╚═════╝ ${C.cyan}   ╚═╝   ${C.white}   ╚═╝   ${C.cyan}╚══════╝${C.white}╚═╝  ╚═╝${C.cyan}  ║
+║                                                               ║
+║          ${Icons.flutter} ${C.white}Super Engine v8.0${C.cyan} ${Icons.ai}                          ║
+║                                                               ║
+╚═══════════════════════════════════════════════════════════════╝${C.reset}
+`);
+    }
+}
+export default TerminalUI;
+//# sourceMappingURL=TerminalUI.js.map