@codemieai/code 0.0.3 → 0.0.4

package/dist/agents/codemie-code/ui.js

@@ -3,14 +3,32 @@ import chalk from 'chalk';
 import { formatToolMetadata } from './toolMetadata.js';
 import { formatCost, formatTokens, formatTokenUsageSummary } from './tokenUtils.js';
 import { hasClipboardImage, getClipboardImage } from '../../utils/clipboard.js';
+import { TodoPanel } from './ui/todoPanel.js';
+import { getProgressTracker } from './ui/progressTracker.js';
+import { TodoStateManager } from './tools/planning.js';
 /**
  * Terminal UI interface for CodeMie Agent using Clack
  */
 export class CodeMieTerminalUI {
     agent;
     currentSpinner;
+    todoPanel;
+    progressTracker;
+    planMode = false;
+    activePlanningPhase = null;
     constructor(agent) {
         this.agent = agent;
+        this.todoPanel = new TodoPanel({
+            showProgress: true,
+            compact: false
+        });
+        this.progressTracker = getProgressTracker({
+            realTimeUpdates: true,
+            showCelebrations: true,
+            compact: true
+        });
+        // Register for todo update events
+        TodoStateManager.addEventCallback(this.handleTodoUpdate.bind(this));
     }
     /**
      * Start interactive terminal session
@@ -20,13 +38,19 @@ export class CodeMieTerminalUI {
         intro(chalk.cyan('🤖 CodeMie Native Agent'));
         const config = this.agent.getConfig();
         if (config) {
-            note(`Provider: ${chalk.yellow(config.provider)}\n` +
-                `Model: ${chalk.cyan(config.model)}\n` +
-                `Working Directory: ${chalk.dim(config.workingDirectory)}`, 'Configuration');
+            // Use displayProvider for user-facing output, or fall back to normalized provider
+            const displayProvider = config.displayProvider || config.provider;
+            console.log(chalk.cyan('◇  Configuration'));
+            console.log(`   Provider: ${chalk.yellow(displayProvider)}`);
+            console.log(`   Model: ${chalk.cyan(config.model)}`);
+            console.log(`   Working Directory: ${chalk.dim(config.workingDirectory)}`);
+            console.log(`   Mode: ${this.planMode ? chalk.green('Plan Mode') : chalk.yellow('Direct Mode')}`);
+            console.log('');
         }
         console.log(chalk.dim('Type /help for commands, /exit to quit'));
         console.log(chalk.dim('Enter = send, Shift+Enter = new line, Cmd+V = paste text'));
-        console.log(chalk.dim('📸 Tab = insert clipboard image • Multiple images supported\n'));
+        console.log(chalk.dim('📸 Tab = insert clipboard image • Multiple images supported'));
+        console.log(chalk.dim('💡 Press Ctrl+H for hotkeys, Ctrl+P to toggle plan mode\n'));
         // Main interaction loop
         while (true) {
             const input = await this.getMultilineInput();
@@ -44,8 +68,8 @@ export class CodeMieTerminalUI {
             }
             if (trimmed === '')
                 continue;
-            // Execute the task with streaming UI
-            await this.executeTaskWithUI(trimmed, input.images);
+            // Execute the task with streaming UI (respecting current mode)
+            await this.executeTaskWithCurrentMode(trimmed, input.images);
         }
     }
     /**
@@ -55,127 +79,220 @@ export class CodeMieTerminalUI {
         return new Promise((resolve) => {
             if (!process.stdin.setRawMode) {
                 // Fallback for environments without raw mode
-                resolve(this.getFallbackInput());
+                this.getFallbackInput().then(resolve).catch(() => resolve(null));
                 return;
             }
-            process.stdin.setRawMode(true);
-            process.stdin.resume();
-            process.stdin.setEncoding('utf8');
-            let lines = [];
-            let currentLine = '';
-            let isFirstLine = true;
-            let escapeSequence = '';
-            let images = [];
-            let imageCounter = 0;
-            const writePrompt = () => {
-                const prompt = isFirstLine ? '> ' : '... ';
-                process.stdout.write(prompt);
-            };
-            const cleanup = () => {
-                process.stdin.setRawMode(false);
-                process.stdin.pause();
-                process.stdin.removeAllListeners('data');
-            };
-            writePrompt();
-            process.stdin.on('data', (key) => {
-                const data = key.toString('utf8');
-                // Handle escape sequences
-                if (data.startsWith('\x1b')) {
-                    escapeSequence += data;
-                    // Wait for complete escape sequence (timeout after short delay)
-                    setTimeout(() => {
-                        escapeSequence = '';
-                    }, 10);
+            let cleanupDone = false;
+            const performCleanup = () => {
+                if (cleanupDone)
                     return;
+                cleanupDone = true;
+                try {
+                    if (process.stdin.setRawMode) {
+                        process.stdin.setRawMode(false);
+                    }
+                    process.stdin.pause();
+                    process.stdin.removeAllListeners('data');
+                    process.stdin.removeAllListeners('error');
                 }
-                // Check for Shift+Enter patterns on macOS
-                // Shift+Enter in macOS Terminal typically sends: \r\n or \n\r
-                if (data === '\r\n' || data === '\n\r' || (escapeSequence && data === '\r')) {
-                    // This is Shift+Enter - add line and continue
-                    lines.push(currentLine);
-                    currentLine = '';
-                    isFirstLine = false;
-                    process.stdout.write('\n');
-                    writePrompt();
-                    escapeSequence = '';
-                    return;
+                catch {
+                    // Ignore cleanup errors
                 }
-                // Regular Enter - send message
-                if (data === '\r' || data === '\n') {
-                    if (currentLine.trim() === '' && lines.length === 0) {
-                        // Empty input, continue asking
-                        writePrompt();
-                        return;
+            };
+            // Set up error handling first
+            process.stdin.once('error', (error) => {
+                performCleanup();
+                const config = this.agent.getConfig();
+                if (config?.debug) {
+                    console.error('[DEBUG] Stdin error:', error);
+                }
+                resolve(null);
+            });
+            try {
+                process.stdin.setRawMode(true);
+                process.stdin.resume();
+                process.stdin.setEncoding('utf8');
+                let lines = [];
+                let currentLine = '';
+                let isFirstLine = true;
+                let escapeSequence = '';
+                let images = [];
+                let imageCounter = 0;
+                const writePrompt = () => {
+                    try {
+                        const prompt = isFirstLine ? '> ' : '... ';
+                        process.stdout.write(prompt);
                     }
-                    // Send the message
-                    if (currentLine.trim() !== '') {
-                        lines.push(currentLine);
+                    catch {
+                        // Ignore prompt write errors
                     }
-                    process.stdout.write('\n');
-                    cleanup();
-                    resolve({
-                        text: lines.join('\n'),
-                        images: images
-                    });
-                    return;
-                }
-                // Ctrl+C
-                if (data === '\u0003') {
-                    cleanup();
+                };
+                // Add timeout to prevent hanging indefinitely
+                const inputTimeout = setTimeout(() => {
+                    performCleanup();
                     resolve(null);
-                    return;
-                }
-                // Ctrl+I - Insert image from clipboard
-                if (data === '\u0009') {
-                    // Check if there's an image in clipboard
-                    hasClipboardImage().then(hasImage => {
-                        if (hasImage) {
-                            getClipboardImage().then(clipboardImage => {
-                                if (clipboardImage) {
-                                    imageCounter++;
-                                    images.push(clipboardImage);
-                                    // Insert visual indicator in current line
-                                    const imageIndicator = chalk.blue(`[Image #${imageCounter}]`);
-                                    currentLine += imageIndicator;
-                                    process.stdout.write(imageIndicator);
-                                    console.log(chalk.green(`\n📸 Image #${imageCounter} added from clipboard (${clipboardImage.mimeType})`));
+                }, 30000); // 30 second timeout
+                writePrompt();
+                process.stdin.on('data', (key) => {
+                    if (cleanupDone)
+                        return; // Prevent processing after cleanup
+                    try {
+                        const data = key.toString('utf8');
+                        // Handle escape sequences
+                        if (data.startsWith('\x1b')) {
+                            escapeSequence += data;
+                            // Wait for complete escape sequence (timeout after short delay)
+                            setTimeout(() => {
+                                escapeSequence = '';
+                            }, 10);
+                            return;
+                        }
+                        // Check for Shift+Enter patterns on macOS
+                        // Shift+Enter in macOS Terminal typically sends: \r\n or \n\r
+                        if (data === '\r\n' || data === '\n\r' || (escapeSequence && data === '\r')) {
+                            // This is Shift+Enter - add line and continue
+                            lines.push(currentLine);
+                            currentLine = '';
+                            isFirstLine = false;
+                            process.stdout.write('\n');
+                            writePrompt();
+                            escapeSequence = '';
+                            return;
+                        }
+                        // Regular Enter - send message
+                        if (data === '\r' || data === '\n') {
+                            if (currentLine.trim() === '' && lines.length === 0) {
+                                // Empty input, continue asking
+                                writePrompt();
+                                return;
+                            }
+                            // Send the message
+                            if (currentLine.trim() !== '') {
+                                lines.push(currentLine);
+                            }
+                            process.stdout.write('\n');
+                            clearTimeout(inputTimeout);
+                            performCleanup();
+                            resolve({
+                                text: lines.join('\n'),
+                                images: images
+                            });
+                            return;
+                        }
+                        // Ctrl+C
+                        if (data === '\u0003') {
+                            clearTimeout(inputTimeout);
+                            performCleanup();
+                            resolve(null);
+                            return;
+                        }
+                        // Hotkeys for mode switching
+                        // Ctrl+P - Toggle plan mode
+                        if (data === '\u0010') {
+                            this.handleHotkey('toggle-plan-mode');
+                            // Mode change notification is handled in showModeChangeNotification()
+                            writePrompt();
+                            process.stdout.write(currentLine);
+                            return;
+                        }
+                        // Ctrl+H - Show hotkey help
+                        if (data === '\u0008') {
+                            this.showHotkeyHelp();
+                            writePrompt();
+                            process.stdout.write(currentLine);
+                            return;
+                        }
+                        // Ctrl+T - Show current todos
+                        if (data === '\u0014') {
+                            this.handleHotkey('show-todos');
+                            writePrompt();
+                            process.stdout.write(currentLine);
+                            return;
+                        }
+                        // Ctrl+S - Show current mode status (changed from Ctrl+M to avoid Enter conflict)
+                        if (data === '\u0013') {
+                            this.showModeStatus();
+                            writePrompt();
+                            process.stdout.write(currentLine);
+                            return;
+                        }
+                        // Alt+M - Show mode status (Alt key sequences start with \x1b)
+                        if (data === 'm' && escapeSequence.includes('\x1b')) {
+                            this.showModeStatus();
+                            writePrompt();
+                            process.stdout.write(currentLine);
+                            escapeSequence = '';
+                            return;
+                        }
+                        // Ctrl+I - Insert image from clipboard (Tab key)
+                        if (data === '\u0009') {
+                            // Check if there's an image in clipboard
+                            hasClipboardImage().then(hasImage => {
+                                if (hasImage) {
+                                    getClipboardImage().then(clipboardImage => {
+                                        if (clipboardImage) {
+                                            imageCounter++;
+                                            images.push(clipboardImage);
+                                            // Insert visual indicator in current line
+                                            const imageIndicator = chalk.blueBright(`[Image #${imageCounter}]`);
+                                            currentLine += imageIndicator;
+                                            process.stdout.write(imageIndicator);
+                                            console.log(chalk.green(`\n📸 Image #${imageCounter} added from clipboard (${clipboardImage.mimeType})`));
+                                            writePrompt();
+                                            process.stdout.write(currentLine);
+                                        }
+                                    });
+                                }
+                                else {
+                                    console.log(chalk.yellow('\n⚠️  No image found in clipboard'));
                                     writePrompt();
                                     process.stdout.write(currentLine);
                                 }
+                            }).catch(() => {
+                                console.log(chalk.rgb(255, 120, 120)('\n❌ Error accessing clipboard'));
+                                writePrompt();
+                                process.stdout.write(currentLine);
                             });
+                            return;
                         }
-                        else {
-                            console.log(chalk.yellow('\n⚠️  No image found in clipboard'));
-                            writePrompt();
-                            process.stdout.write(currentLine);
+                        // Backspace
+                        if (data === '\u007F' || data === '\b') {
+                            if (currentLine.length > 0) {
+                                currentLine = currentLine.slice(0, -1);
+                                process.stdout.write('\b \b');
+                            }
+                            return;
                         }
-                    }).catch(() => {
-                        console.log(chalk.red('\n❌ Error accessing clipboard'));
-                        writePrompt();
-                        process.stdout.write(currentLine);
-                    });
-                    return;
-                }
-                // Backspace
-                if (data === '\u007F' || data === '\b') {
-                    if (currentLine.length > 0) {
-                        currentLine = currentLine.slice(0, -1);
-                        process.stdout.write('\b \b');
+                        // Handle clipboard paste (Cmd+V on macOS, Ctrl+V on Windows/Linux)
+                        // Pasted content can be multiple characters, so handle any printable text
+                        if (data.length > 1 || (data.length === 1 && (data.charCodeAt(0) >= 32 || data === '\t'))) {
+                            // Filter out non-printable characters except tabs
+                            const printableData = data.split('').filter(char => char.charCodeAt(0) >= 32 || char === '\t').join('');
+                            if (printableData.length > 0) {
+                                currentLine += printableData;
+                                process.stdout.write(printableData);
+                            }
+                        }
+                        escapeSequence = '';
                     }
-                    return;
-                }
-                // Handle clipboard paste (Cmd+V on macOS, Ctrl+V on Windows/Linux)
-                // Pasted content can be multiple characters, so handle any printable text
-                if (data.length > 1 || (data.length === 1 && (data.charCodeAt(0) >= 32 || data === '\t'))) {
-                    // Filter out non-printable characters except tabs
-                    const printableData = data.split('').filter(char => char.charCodeAt(0) >= 32 || char === '\t').join('');
-                    if (printableData.length > 0) {
-                        currentLine += printableData;
-                        process.stdout.write(printableData);
+                    catch (error) {
+                        // Handle data processing errors gracefully
+                        const config = this.agent.getConfig();
+                        if (config?.debug) {
+                            console.error('[DEBUG] Input processing error:', error);
+                        }
+                        // Continue processing - don't crash on single key errors
                     }
+                });
+            }
+            catch (error) {
+                performCleanup();
+                const config = this.agent.getConfig();
+                if (config?.debug) {
+                    console.error('[DEBUG] Input setup error:', error);
                 }
-                escapeSequence = '';
-            });
+                resolve(null);
+            }
         });
     }
     /**
@@ -207,9 +324,15 @@ export class CodeMieTerminalUI {
                 note(`${chalk.cyan('/help')} - Show this help message\n` +
                     `${chalk.cyan('/clear')} - Clear conversation history\n` +
                     `${chalk.cyan('/stats')} - Show agent statistics\n` +
+                    `${chalk.cyan('/todos')} - Show current todo list and progress\n` +
                     `${chalk.cyan('/config')} - Show configuration\n` +
                     `${chalk.cyan('/health')} - Run health check\n` +
                     `${chalk.cyan('/exit')} - Exit the agent\n\n` +
+                    `${chalk.yellow('Hotkeys:')}\n` +
+                    `- ${chalk.cyan('Ctrl+P')} - Toggle plan mode on/off\n` +
+                    `- ${chalk.cyan('Ctrl+H')} - Show detailed hotkey help\n` +
+                    `- ${chalk.cyan('Ctrl+T')} - Show current todo list\n` +
+                    `- ${chalk.cyan('Ctrl+S')} - Show current mode status\n\n` +
                     `${chalk.yellow('Input Controls:')}\n` +
                     `- ${chalk.cyan('Enter')} - Send message\n` +
                     `- ${chalk.cyan('Shift+Enter')} - New line (multiline input)\n` +
@@ -218,7 +341,7 @@ export class CodeMieTerminalUI {
                     `- ${chalk.cyan('Ctrl+C')} - Cancel current input\n\n` +
                     `${chalk.yellow('Image Support:')}\n` +
                     `- Copy image/screenshot to clipboard\n` +
-                    `- Press ${chalk.cyan('Tab')} to insert as ${chalk.blue('[Image #N]')}\n` +
+                    `- Press ${chalk.cyan('Tab')} to insert as ${chalk.blueBright('[Image #N]')}\n` +
                     `- Multiple images supported per message\n` +
                     `- AI analyzes both text and all images`, 'Available Commands');
                 break;
@@ -229,6 +352,9 @@ export class CodeMieTerminalUI {
             case 'stats':
                 await this.showStats();
                 break;
+            case 'todos':
+                await this.showTodos();
+                break;
             case 'config':
                 await this.showConfig();
                 break;
@@ -239,7 +365,7 @@ export class CodeMieTerminalUI {
                 outro(chalk.dim('Goodbye! 👋'));
                 return 'exit';
             default:
-                note(chalk.red(`Unknown command: ${command}\nType /help for available commands`), 'Error');
+                note(chalk.rgb(255, 120, 120)(`Unknown command: ${command}\nType /help for available commands`), 'Error');
                 break;
         }
     }
@@ -284,6 +410,17 @@ export class CodeMieTerminalUI {
                         }
                         this.currentSpinner.start(chalk.yellow(`Using ${event.toolName}...`));
                         break;
+                    case 'tool_call_progress':
+                        if (this.currentSpinner && event.toolProgress) {
+                            const { percentage, operation, details } = event.toolProgress;
+                            const progressBar = this.createToolProgressBar(percentage);
+                            let message = `${operation} ${Math.round(percentage)}% ${progressBar}`;
+                            if (details) {
+                                message += ` (${details})`;
+                            }
+                            this.currentSpinner.message(chalk.cyan(message));
+                        }
+                        break;
                     case 'tool_call_result':
                         if (this.currentSpinner) {
                             // Use enhanced metadata if available, otherwise fall back to basic message
@@ -368,8 +505,10 @@ export class CodeMieTerminalUI {
             note('No configuration available', 'Config');
             return;
         }
+        // Use displayProvider for user-facing output, or fall back to normalized provider
+        const displayProvider = config.displayProvider || config.provider;
         const configText = [
-            `Provider: ${chalk.yellow(config.provider)}`,
+            `Provider: ${chalk.yellow(displayProvider)}`,
             `Model: ${chalk.cyan(config.model)}`,
             `Base URL: ${chalk.dim(config.baseUrl)}`,
             `Working Directory: ${chalk.dim(config.workingDirectory)}`,
@@ -450,6 +589,17 @@ export class CodeMieTerminalUI {
                         toolCallCount++;
                         taskSpinner.message(chalk.yellow(`Using ${event.toolName}...`));
                         break;
+                    case 'tool_call_progress':
+                        if (event.toolProgress) {
+                            const { percentage, operation, details } = event.toolProgress;
+                            const progressBar = this.createToolProgressBar(percentage);
+                            let message = `${operation} ${Math.round(percentage)}% ${progressBar}`;
+                            if (details) {
+                                message += ` (${details})`;
+                            }
+                            taskSpinner.message(chalk.cyan(message));
+                        }
+                        break;
                     case 'tool_call_result':
                         // Show enhanced tool info in single task mode too
                         if (event.toolMetadata) {
@@ -491,23 +641,98 @@ export class CodeMieTerminalUI {
         }
     }
     /**
-     * Show a welcome message for single task execution
-     */
-    showTaskWelcome(task) {
-        intro(chalk.cyan('🤖 CodeMie Native Agent'));
-        note(chalk.dim(`Task: ${task}`), 'Executing');
-    }
-    /**
-     * Show task completion message
+     * Execute a task with planning mode and UI streaming (for plan mode)
      */
-    showTaskComplete() {
-        outro(chalk.green('Task completed successfully'));
-    }
-    /**
-     * Show error message
-     */
-    showError(error) {
-        outro(chalk.red(`Error: ${error}`));
+    async executePlanningTask(task, _images = [], planOnly = false) {
+        const planSpinner = spinner();
+        this.currentSpinner = planSpinner; // Store reference to stop when progress starts
+        planSpinner.start(chalk.blueBright('📋 Starting planning phase...'));
+        try {
+            // Import PlanMode
+            const { PlanMode } = await import('./modes/planMode.js');
+            const planMode = new PlanMode(this.agent, {
+                requirePlanning: true,
+                enforceSequential: true,
+                showPlanningFeedback: true
+            });
+            // Create a UI-connected event callback that handles both planning and streaming events
+            const uiEventCallback = (event) => {
+                // Handle planning-specific events
+                this.handleStreamingEvent(event);
+                // Handle regular streaming events too
+                switch (event.type) {
+                    case 'thinking_start':
+                        planSpinner.message(chalk.dim('Thinking...'));
+                        break;
+                    case 'content_chunk':
+                        // For planning phase, we might not want to show content chunks immediately
+                        break;
+                    case 'tool_call_start':
+                        planSpinner.message(chalk.yellow(`Using ${event.toolName}...`));
+                        break;
+                    case 'tool_call_progress':
+                        if (event.toolProgress) {
+                            const { percentage, operation, details } = event.toolProgress;
+                            const progressBar = this.createToolProgressBar(percentage);
+                            let message = `${operation} ${Math.round(percentage)}% ${progressBar}`;
+                            if (details) {
+                                message += ` (${details})`;
+                            }
+                            planSpinner.message(chalk.cyan(message));
+                        }
+                        break;
+                    case 'tool_call_result':
+                        if (event.toolMetadata) {
+                            const message = formatToolMetadata(event.toolName || 'tool', event.toolMetadata);
+                            planSpinner.message(chalk.green(message));
+                        }
+                        else {
+                            planSpinner.message(chalk.dim('Processing...'));
+                        }
+                        break;
+                    case 'complete':
+                        planSpinner.stop();
+                        break;
+                    case 'error':
+                        planSpinner.stop(chalk.red(`Error: ${event.error}`));
+                        break;
+                }
+            };
+            if (planOnly) {
+                // Only generate plan, don't execute
+                const planningResult = await planMode.planningPhase(task, uiEventCallback);
+                planSpinner.stop();
+                if (!planningResult.success) {
+                    throw new Error(`Planning failed: ${planningResult.error}`);
+                }
+                return `📋 Plan generated successfully with ${planningResult.todos.length} steps:\n\n` +
+                    planningResult.todos.map((todo, i) => `${i + 1}. ${todo.content}`).join('\n') +
+                    `\n\nQuality Score: ${planningResult.qualityScore}/100\n` +
+                    (planningResult.suggestions.length > 0 ?
+                        `\nSuggestions:\n${planningResult.suggestions.map((s) => `• ${s}`).join('\n')}` : '') +
+                    `\n\n🎯 **Plan-only mode**: Plan created. Use --plan flag (without --plan-only) to execute this plan.`;
+            }
+            // Full planning + execution
+            const result = await planMode.executePlannedTask(task, uiEventCallback);
+            planSpinner.stop();
+            // Show success message with token usage
+            const stats = this.agent.getStats();
+            const summaryParts = [];
+            if (stats.totalTokens > 0) {
+                summaryParts.push(`${formatTokens(stats.totalTokens)} tokens`);
+            }
+            if (stats.estimatedTotalCost > 0) {
+                summaryParts.push(`${formatCost(stats.estimatedTotalCost)}`);
+            }
+            if (summaryParts.length > 0) {
+                console.log(chalk.dim(`${summaryParts.join(' • ')}\n`));
+            }
+            return result;
+        }
+        catch (error) {
+            planSpinner.stop(chalk.red('Planning failed'));
+            throw error;
+        }
     }
     /**
      * Check if we should show detailed information for a tool
@@ -611,6 +836,562 @@ export class CodeMieTerminalUI {
         }
         note(stepLines.join('\n'), 'Step Details');
     }
+    /**
+     * Handle todo update events
+     */
+    handleTodoUpdate(event) {
+        // Update internal state
+        this.todoPanel.update(event.todos);
+        // Only show progress tracker updates when NOT in active planning phase
+        // This prevents duplicate progress displays during context-aware planning
+        if (!this.activePlanningPhase) {
+            this.progressTracker.updateTodos(event.todos, event);
+            // Show visual feedback based on change type
+            if (event.changeType === 'create' && event.todos.length > 0) {
+                this.progressTracker.showPlanningComplete(event.todos.length);
+            }
+        }
+        else {
+            // During planning phase, update internal state but suppress visual feedback
+            this.progressTracker.updateTodos(event.todos, event, true);
+        }
+    }
+    /**
+     * Enable plan mode for structured planning
+     */
+    enablePlanMode() {
+        this.planMode = true;
+        // Remove redundant messages - UI will show plan mode status in the configuration display
+    }
+    /**
+     * Disable plan mode
+     */
+    disablePlanMode() {
+        this.planMode = false;
+        this.progressTracker.stop();
+    }
+    /**
+     * Show current todo status
+     */
+    async showTodos() {
+        const _todos = this.todoPanel.getTodos();
+        if (_todos.length === 0) {
+            note('No todos found. Use a planning task to create todos automatically.', '📋 Todo Status');
+            return;
+        }
+        const todoDisplay = this.todoPanel.render();
+        note(todoDisplay, '📋 Current Todo List');
+    }
+    /**
+     * Show planning phase welcome
+     */
+    showPlanningWelcome() {
+        if (this.planMode) {
+            console.log(chalk.cyan('💡 Plan mode features: structured planning, progress tracking, sequential execution'));
+            console.log('');
+        }
+    }
+    /**
+     * Show task welcome with planning context
+     */
+    showTaskWelcome(task) {
+        intro(chalk.cyan('🤖 CodeMie Native Agent'));
+        if (this.planMode) {
+            console.log(chalk.cyan('◇  Task Execution'));
+            console.log(`   Task: ${chalk.yellow(task)}`);
+            console.log(`   Mode: ${chalk.cyan('Plan Mode')} - Structured planning enabled`);
+            console.log('');
+            this.showPlanningWelcome();
+        }
+        else {
+            console.log(chalk.cyan('◇  Task Execution'));
+            console.log(`   Task: ${chalk.yellow(task)}`);
+            console.log('');
+        }
+    }
+    /**
+     * Show task completion with todo summary
+     */
+    showTaskComplete() {
+        const _todos = this.todoPanel.getTodos();
+        const progressInfo = this.todoPanel.getProgressInfo();
+        if (progressInfo && progressInfo.total > 0) {
+            const stats = {
+                tasksCompleted: progressInfo.completed,
+                totalTime: undefined // Could track this if needed
+            };
+            this.progressTracker.showOverallCompletion(stats);
+            // Show final todo status if relevant
+            if (progressInfo.completed === progressInfo.total) {
+                note('All planned tasks completed successfully! 🎉', '✅ Task Complete');
+            }
+            else if (progressInfo.completed > 0) {
+                note(`Completed ${progressInfo.completed}/${progressInfo.total} planned tasks`, '📊 Progress Summary');
+            }
+        }
+        else {
+            outro(chalk.green('✅ Task completed!'));
+        }
+    }
+    /**
+     * Show error with todo context
+     */
+    showError(error) {
+        const _todos = this.todoPanel.getTodos();
+        const progressInfo = this.todoPanel.getProgressInfo();
+        let contextInfo = '';
+        if (progressInfo?.currentTodo) {
+            contextInfo = `\n📍 Error occurred while working on: ${progressInfo.currentTodo.content}`;
+        }
+        note(chalk.rgb(255, 120, 120)(`❌ ${error}${contextInfo}`), 'Error');
+    }
+    /**
+     * Execute task respecting current mode settings
+     */
+    async executeTaskWithCurrentMode(task, images = []) {
+        if (this.planMode) {
+            // Use plan mode execution with confirmation
+            try {
+                const { PlanMode } = await import('./modes/planMode.js');
+                const planMode = new PlanMode(this.agent, {
+                    requirePlanning: true,
+                    enforceSequential: true,
+                    showPlanningFeedback: true
+                });
+                // First, create the plan only - using UI-integrated planning
+                const planningResult = await planMode.planningPhase(task, (event) => {
+                    // Handle planning-specific events with UI integration
+                    this.handleStreamingEvent(event);
+                    // Handle regular streaming events for spinner updates
+                    switch (event.type) {
+                        case 'thinking_start':
+                            // Already handled in handleStreamingEvent
+                            break;
+                        case 'tool_call_start':
+                            // Already handled in handleStreamingEvent
+                            break;
+                        case 'tool_call_result':
+                            // Already handled in handleStreamingEvent
+                            break;
+                    }
+                });
+                if (!planningResult.success) {
+                    this.showError(`Planning failed: ${planningResult.error}`);
+                    return;
+                }
+                // Show the plan to the user with proper formatting
+                const formattedPlan = this.formatPlanForDisplay(planningResult.todos, planningResult.qualityScore);
+                note(formattedPlan, 'Planning Complete');
+                // Ask for confirmation
+                const shouldExecute = await text({
+                    message: 'Execute this plan?',
+                    placeholder: 'Type "yes" to execute, or "no" to cancel',
+                    validate: (value) => {
+                        const normalized = value.toLowerCase().trim();
+                        if (!['yes', 'y', 'no', 'n'].includes(normalized)) {
+                            return 'Please type "yes" or "no"';
+                        }
+                    }
+                });
+                if (isCancel(shouldExecute)) {
+                    note('Plan execution cancelled by user', 'Cancelled');
+                    return;
+                }
+                const response = shouldExecute.toLowerCase().trim();
+                if (['yes', 'y'].includes(response)) {
+                    // Execute the plan
+                    await planMode.executePlannedTask(task, (event) => {
+                        this.handleStreamingEvent(event);
+                    });
+                }
+                else {
+                    note('Plan execution cancelled by user', 'Cancelled');
+                }
+            }
+            catch (error) {
+                this.showError(error instanceof Error ? error.message : String(error));
+            }
+        }
+        else {
+            // Use direct execution
+            await this.executeTaskWithUI(task, images);
+        }
+    }
+    /**
+     * Handle streaming events from plan mode execution
+     */
+    handleStreamingEvent(event) {
+        switch (event.type) {
+            case 'planning_start':
+                this.activePlanningPhase = event.planningInfo?.phase || 'planning';
+                // Don't duplicate the planning start message - handled by spinner
+                break;
+            case 'planning_complete':
+                this.activePlanningPhase = null;
+                console.log(chalk.green(`📋 Plan created with ${event.planningInfo?.totalSteps || 0} steps`));
+                break;
+            case 'planning_progress':
+                this.handlePlanningProgress(event.planningProgress);
+                break;
+            case 'planning_tool_call':
+                this.handlePlanningToolCall(event.planningToolCall);
+                break;
+            case 'content_chunk':
+                if (event.content) {
+                    process.stdout.write(event.content);
+                }
+                break;
+            case 'todo_update':
+                // Todo updates are handled automatically by the TodoStateManager
+                // During planning phase, we suppress duplicate visual feedback
+                break;
+            case 'error':
+                this.activePlanningPhase = null;
+                this.showError(event.error || 'Unknown error');
+                break;
+            default:
+                // Handle other event types silently
+                break;
+        }
+    }
+    /**
+     * Handle planning progress streaming events
+     */
+    currentPhase = '';
+    currentTool = '';
+    currentToolCall = '';
+    handlePlanningProgress(progressInfo) {
+        if (!progressInfo)
+            return;
+        // Keep the spinner running and use it to display progress updates
+        const phaseNames = {
+            'context_gathering': 'Discovery',
+            'task_analysis': 'Analysis',
+            'plan_generation': 'Planning',
+            'plan_validation': 'Validation'
+        };
+        this.currentPhase = phaseNames[progressInfo.phase] || 'Planning';
+        this.updateGlobalProgress(progressInfo.overallProgress || 0);
+    }
+    /**
+     * Handle planning tool call events
+     */
+    handlePlanningToolCall(toolInfo) {
+        if (!toolInfo)
+            return;
+        const toolNames = {
+            'list_directory': 'Exploring',
+            'read_file': 'Reading',
+            'execute_command': 'Executing',
+            'llm_analysis': 'Analyzing',
+            'llm_plan_generation': 'Generating Plan',
+            'plan_validation': 'Validating',
+            'analyze_dependencies': 'Dependencies'
+        };
+        this.currentTool = toolNames[toolInfo.toolName] || 'Tool';
+        // Format tool call details with arguments
+        this.currentToolCall = this.formatToolCall(toolInfo.toolName, toolInfo.args);
+        // Update progress with current tool info
+        this.updateGlobalProgress();
+    }
+    /**
+     * Format tool call with arguments for display
+     */
+    formatToolCall(toolName, args) {
+        if (!args || Object.keys(args).length === 0) {
+            return toolName;
+        }
+        // Extract key arguments for concise display
+        const formatArg = (key, value) => {
+            if (typeof value === 'string') {
+                // Truncate long strings and show just the relevant part
+                if (key === 'path' || key === 'directory') {
+                    // Show just the last part of paths
+                    const parts = value.split('/');
+                    return parts[parts.length - 1] || value;
+                }
+                if (key === 'command') {
+                    // Show first word of commands
+                    return value.split(' ')[0];
+                }
+                if (value.length > 20) {
+                    return value.substring(0, 17) + '...';
+                }
+                return value;
+            }
+            if (Array.isArray(value)) {
+                return `[${value.length} items]`;
+            }
+            if (typeof value === 'object') {
+                return '{...}';
+            }
+            return String(value);
+        };
+        // Pick the most relevant arguments to show
+        const relevantKeys = ['path', 'directory', 'file', 'command', 'query', 'pattern'];
+        const argsToShow = [];
+        for (const key of relevantKeys) {
+            if (key in args) {
+                argsToShow.push(formatArg(key, args[key]));
+                if (argsToShow.length >= 2)
+                    break; // Show max 2 args
+            }
+        }
+        // If no relevant keys found, show first few keys
+        if (argsToShow.length === 0) {
+            const keys = Object.keys(args).slice(0, 2);
+            for (const key of keys) {
+                argsToShow.push(formatArg(key, args[key]));
+            }
+        }
+        return argsToShow.length > 0 ? `${toolName} (${argsToShow.join(', ')})` : toolName;
+    }
+    /**
+     * Update global progress display
+     */
+    currentProgress = 0;
+    updateGlobalProgress(progress) {
+        if (progress !== undefined) {
+            this.currentProgress = progress;
+        }
+        const progressBar = this.createProgressBar(this.currentProgress);
+        let displayText = `Progress ${Math.round(this.currentProgress)}% ${progressBar}`;
+        // Show tool call details if available, otherwise fall back to tool name or phase
+        // This provides detailed info like "(Discovery, calling list_dir (src))"
+        if (this.currentToolCall) {
+            displayText += ` (${this.currentPhase}, calling ${this.currentToolCall})`;
+        }
+        else if (this.currentTool) {
+            displayText += ` (${this.currentTool})`;
+        }
+        else if (this.currentPhase) {
+            displayText += ` (${this.currentPhase})`;
+        }
+        // Use clack-style spinner update for reliable real-time display
+        if (this.currentSpinner) {
+            this.currentSpinner.message(displayText);
+        }
+        else {
+            // Fallback to direct output if no spinner
+            process.stdout.write('\r' + displayText);
+        }
+        // Only add newline when planning is completely finished (100%)
+        if (this.currentProgress >= 100) {
+            if (this.currentSpinner) {
+                this.currentSpinner.stop(displayText);
+                this.currentSpinner = undefined;
+            }
+            else {
+                process.stdout.write('\n');
+            }
+            this.currentPhase = '';
+            this.currentTool = '';
+            this.currentToolCall = '';
+        }
+    }
+    /**
+     * Create a simple progress bar
+     */
+    createProgressBar(percentage, width = 20) {
+        const filled = Math.round((percentage / 100) * width);
+        const empty = width - filled;
+        const filledBar = chalk.cyan('█'.repeat(filled));
+        const emptyBar = chalk.dim('░'.repeat(empty));
+        return `[${filledBar}${emptyBar}]`;
+    }
+    /**
+     * Create a tool progress bar (smaller for inline use)
+     */
+    createToolProgressBar(percentage, width = 12) {
+        const filled = Math.round((percentage / 100) * width);
+        const empty = width - filled;
+        const filledBar = chalk.green('█'.repeat(filled));
+        const emptyBar = chalk.dim('░'.repeat(empty));
+        return `[${filledBar}${emptyBar}]`;
+    }
+    /**
+     * Handle hotkey actions
+     */
+    handleHotkey(action) {
+        switch (action) {
+            case 'toggle-plan-mode':
+                this.togglePlanMode();
+                break;
+            case 'show-todos':
+                this.showTodosHotkey();
+                break;
+            case 'show-help':
+                this.showHotkeyHelp();
+                break;
+            case 'show-status':
+                this.showModeStatus();
+                break;
+            default:
+                console.log(chalk.red(`\n❌ Unknown hotkey action: ${action}`));
+                break;
+        }
+    }
+    /**
+     * Toggle plan mode on/off
+     */
+    togglePlanMode() {
+        const wasEnabled = this.planMode;
+        if (this.planMode) {
+            this.disablePlanMode();
+        }
+        else {
+            this.enablePlanMode();
+        }
+        // Show enhanced visual feedback
+        this.showModeChangeNotification(wasEnabled, this.planMode);
+    }
+    /**
+     * Show enhanced visual feedback for mode changes
+     */
+    showModeChangeNotification(wasEnabled, nowEnabled) {
+        const modeIcon = nowEnabled ? '📋' : '⚡';
+        const statusText = nowEnabled ? 'enabled' : 'disabled';
+        // Simple, concise mode change message
+        console.log(chalk.blueBright(`\n${modeIcon} Plan mode ${statusText}`));
+        // Start progress tracking when plan mode is enabled (but don't show 0/0 progress yet)
+        if (nowEnabled) {
+            this.progressTracker.start();
+        }
+    }
+    /**
+     * Show todos via hotkey (non-blocking)
+     */
+    showTodosHotkey() {
+        const _todos = this.todoPanel.getTodos();
+        if (_todos.length === 0) {
+            console.log(chalk.dim('\n📋 No todos found'));
+        }
+        else {
+            const todoDisplay = this.todoPanel.render();
+            console.log(`\n${todoDisplay}`);
+        }
+    }
+    /**
+     * Show hotkey help
+     */
+    showHotkeyHelp() {
+        const helpText = `
+${chalk.bold.cyan('🔥 Interactive Mode Hotkeys')}
+
+Mode Control:
+  ${chalk.yellow('Ctrl+P')}   Toggle plan mode on/off
+  ${chalk.yellow('Ctrl+S')}   Show current mode status
+
+Todo Management:
+  ${chalk.yellow('Ctrl+T')}   Show current todo list and progress
+
+General:
+  ${chalk.yellow('Ctrl+H')}   Show this help
+  ${chalk.yellow('Tab')}      Insert image from clipboard
+  ${chalk.yellow('Ctrl+C')}   Cancel input / Exit
+
+Input Controls:
+  ${chalk.yellow('Enter')}         Send message
+  ${chalk.yellow('Shift+Enter')}   New line (multiline input)
+
+Chat Commands:
+  ${chalk.yellow('/help')}     Show chat commands
+  ${chalk.yellow('/todos')}    Show detailed todo information
+  ${chalk.yellow('/stats')}    Show agent statistics
+  ${chalk.yellow('/exit')}     Exit the session
+`;
+        console.log(helpText);
+    }
+    /**
+     * Show current mode status
+     */
+    showModeStatus() {
+        const _todos = this.todoPanel.getTodos();
+        const progressInfo = this.todoPanel.getProgressInfo();
+        let statusText = chalk.bold.blueBright('\n📊 Current Status\n');
+        // Mode information
+        statusText += `Mode: ${this.planMode ?
+            chalk.green('Plan Mode (structured todos)') :
+            chalk.yellow('Direct Mode (immediate execution)')}\n`;
+        // Todo information
+        if (progressInfo && progressInfo.total > 0) {
+            statusText += `Todos: ${progressInfo.completed}/${progressInfo.total} completed (${progressInfo.percentage}%)\n`;
+            if (progressInfo.currentTodo) {
+                statusText += `Current: ${chalk.cyan(progressInfo.currentTodo.content)}\n`;
+            }
+        }
+        else {
+            statusText += 'Todos: None active\n';
+        }
+        // Agent status
+        const agentStats = this.agent.getStats();
+        if (agentStats) {
+            statusText += `Session: ${agentStats.toolCalls} tool calls, ${agentStats.llmCalls} LLM calls\n`;
+        }
+        console.log(statusText);
+    }
+    /**
+     * Format plan for display with proper text wrapping
+     */
+    formatPlanForDisplay(todos, qualityScore) {
+        const maxWidth = Math.min(process.stdout.columns - 10, 100); // Leave some margin
+        let formatted = `📋 **Plan Created** (${todos.length} steps):\n\n`;
+        todos.forEach((todo, index) => {
+            const stepNumber = `${index + 1}. `;
+            const content = todo.content;
+            // Wrap long lines properly
+            const wrappedContent = this.wrapText(content, maxWidth - stepNumber.length);
+            const lines = wrappedContent.split('\n');
+            // First line with step number
+            formatted += stepNumber + lines[0] + '\n';
+            // Subsequent lines indented to align with content
+            for (let i = 1; i < lines.length; i++) {
+                formatted += ' '.repeat(stepNumber.length) + lines[i] + '\n';
+            }
+            // Add spacing between steps
+            if (index < todos.length - 1) {
+                formatted += '\n';
+            }
+        });
+        formatted += `\n\nQuality Score: ${qualityScore}/100`;
+        return formatted;
+    }
+    /**
+     * Wrap text to specified width
+     */
+    wrapText(text, maxWidth) {
+        if (text.length <= maxWidth) {
+            return text;
+        }
+        const words = text.split(' ');
+        const lines = [];
+        let currentLine = '';
+        for (const word of words) {
+            // If adding this word would exceed the width
+            if (currentLine.length + word.length + 1 > maxWidth) {
+                if (currentLine) {
+                    lines.push(currentLine.trim());
+                    currentLine = word;
+                }
+                else {
+                    // Single word is longer than maxWidth, force break
+                    lines.push(word);
+                }
+            }
+            else {
+                if (currentLine) {
+                    currentLine += ' ' + word;
+                }
+                else {
+                    currentLine = word;
+                }
+            }
+        }
+        if (currentLine) {
+            lines.push(currentLine.trim());
+        }
+        return lines.join('\n');
+    }
     /**
      * Cleanup resources
      */
@@ -619,6 +1400,9 @@ export class CodeMieTerminalUI {
             this.currentSpinner.stop();
             this.currentSpinner = undefined;
         }
+        // Clean up todo tracking
+        this.progressTracker.stop();
+        TodoStateManager.removeEventCallback(this.handleTodoUpdate.bind(this));
     }
 }
 //# sourceMappingURL=ui.js.map