@litmers/cursorflow-orchestrator 0.1.39 → 0.2.2

package/dist/cli/monitor.js

@@ -1,13 +1,13 @@
 "use strict";
 /**
- * CursorFlow interactive monitor command
+ * CursorFlow Interactive Monitor v2.0
  *
- * Features:
- * - Lane dashboard with accurate process status
- * - Unified log view for all lanes
- * - Readable log format support
- * - Multiple flows dashboard
- * - Consistent layout across all views
+ * Redesigned UX with:
+ * - Tab-based main dashboard
+ * - Arrow-key-first navigation
+ * - Context-aware action menus
+ * - Maximum 3-level depth
+ * - Consistent key mappings across all views
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -50,6 +50,7 @@ const config_1 = require("../utils/config");
 const path_1 = require("../utils/path");
 const process_1 = require("../services/process");
 const buffer_1 = require("../services/logging/buffer");
+const formatter_1 = require("../services/logging/formatter");
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // UI Constants
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
@@ -67,82 +68,95 @@ const UI = {
         white: '\x1b[37m',
         bgGray: '\x1b[48;5;236m',
         bgCyan: '\x1b[46m',
+        bgYellow: '\x1b[43m',
+        bgBlack: '\x1b[40m',
+    },
+    ICONS: {
+        running: '🔄',
+        completed: '✅',
+        done: '✅',
+        failed: '❌',
+        waiting: '⏳',
+        pending: '⚪',
+        stale: '💀',
+        dead: '☠️',
+        live: '🟢',
+        stopped: '🔴',
+        arrow: '▶',
+        arrowLeft: '◀',
+        selected: '●',
+        unselected: '○',
     },
     CHARS: {
         hLine: '━',
+        hLineLight: '─',
         vLine: '│',
-        corner: {
-            tl: '┌', tr: '┐', bl: '└', br: '┘'
-        },
-        arrow: {
-            right: '▶', left: '◀', up: '▲', down: '▼'
-        },
-        bullet: '•',
-        check: '✓',
+        corner: { tl: '┌', tr: '┐', bl: '└', br: '┘' },
+        tee: { left: '├', right: '┤', top: '┬', bottom: '┴' },
+        cross: '┼',
     },
 };
+var Tab;
+(function (Tab) {
+    Tab[Tab["CURRENT_FLOW"] = 0] = "CURRENT_FLOW";
+    Tab[Tab["ALL_FLOWS"] = 1] = "ALL_FLOWS";
+    Tab[Tab["UNIFIED_LOG"] = 2] = "UNIFIED_LOG";
+})(Tab || (Tab = {}));
+var Level;
+(function (Level) {
+    Level[Level["DASHBOARD"] = 1] = "DASHBOARD";
+    Level[Level["DETAIL"] = 2] = "DETAIL";
+    Level[Level["ACTION_MENU"] = 3] = "ACTION_MENU";
+})(Level || (Level = {}));
+var Panel;
+(function (Panel) {
+    Panel[Panel["LEFT"] = 0] = "LEFT";
+    Panel[Panel["RIGHT"] = 1] = "RIGHT";
+})(Panel || (Panel = {}));
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Helper functions
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 function printHelp() {
     console.log(`
 Usage: cursorflow monitor [run-dir] [options]
 
-Interactive lane dashboard to track progress and dependencies.
+Interactive lane dashboard with improved UX.
 
 Options:
   [run-dir]              Run directory to monitor (default: latest)
-  --list, -l             List all runs (multiple flows dashboard)
+  --list, -l             Start with All Flows tab
   --interval <seconds>   Refresh interval (default: 2)
   --help, -h             Show help
 
+Navigation:
+  ←/→       Tab switch (Level 1) or Panel switch (Level 2)
+  ↑/↓       Select item or scroll
+  Enter     Open action menu
+  Esc       Go back / Close menu
+  Q         Quit
+
 Examples:
   cursorflow monitor             # Monitor latest run
-  cursorflow monitor --list      # Show all runs dashboard
+  cursorflow monitor --list      # Show all runs
   cursorflow monitor run-123     # Monitor specific run
   `);
 }
-var View;
-(function (View) {
-    View[View["LIST"] = 0] = "LIST";
-    View[View["LANE_DETAIL"] = 1] = "LANE_DETAIL";
-    View[View["MESSAGE_DETAIL"] = 2] = "MESSAGE_DETAIL";
-    View[View["FLOW"] = 3] = "FLOW";
-    View[View["TERMINAL"] = 4] = "TERMINAL";
-    View[View["INTERVENE"] = 5] = "INTERVENE";
-    View[View["TIMEOUT"] = 6] = "TIMEOUT";
-    View[View["UNIFIED_LOG"] = 7] = "UNIFIED_LOG";
-    View[View["FLOWS_DASHBOARD"] = 8] = "FLOWS_DASHBOARD";
-})(View || (View = {}));
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Interactive Monitor Class
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 class InteractiveMonitor {
     runDir;
     interval;
-    view = View.LIST;
-    selectedLaneIndex = 0;
-    selectedMessageIndex = 0;
-    selectedLaneName = null;
+    logsDir;
+    timer = null;
+    // Data
     lanes = [];
+    allFlows = [];
     currentLogs = [];
-    timer = null;
-    scrollOffset = 0;
-    terminalScrollOffset = 0;
-    followMode = true;
-    unseenLineCount = 0;
-    lastTerminalTotalLines = 0;
-    interventionInput = '';
-    timeoutInput = '';
-    notification = null;
-    // Process status tracking
     laneProcessStatuses = new Map();
-    // Unified log buffer for all lanes
     unifiedLogBuffer = null;
-    unifiedLogScrollOffset = 0;
-    unifiedLogFollowMode = true;
-    // Multiple flows support
-    allFlows = [];
-    selectedFlowIndex = 0;
-    logsDir = '';
-    // NEW: UX improvements
-    readableFormat = true; // Toggle readable log format
-    laneFilter = null; // Filter by lane name
-    confirmAction = null;
+    // State
+    state;
     // Screen dimensions
     get screenWidth() {
         return process.stdout.columns || 120;
@@ -150,22 +164,41 @@ class InteractiveMonitor {
     get screenHeight() {
         return process.stdout.rows || 24;
     }
-    constructor(runDir, interval, logsDir, initialView = View.LIST) {
+    constructor(runDir, interval, initialTab = Tab.CURRENT_FLOW) {
         const config = (0, config_1.loadConfig)();
-        // Change current directory to project root for consistent path handling
         if (config.projectRoot !== process.cwd()) {
             process.chdir(config.projectRoot);
         }
         this.runDir = runDir;
         this.interval = interval;
-        this.view = initialView;
-        // Set logs directory for multiple flows discovery
-        if (logsDir) {
-            this.logsDir = logsDir;
-        }
-        else {
-            this.logsDir = (0, path_1.safeJoin)((0, config_1.getLogsDir)(config), 'runs');
-        }
+        this.logsDir = (0, path_1.safeJoin)((0, config_1.getLogsDir)(config), 'runs');
+        // Initialize state
+        this.state = {
+            level: Level.DASHBOARD,
+            currentTab: initialTab,
+            selectedLaneIndex: 0,
+            selectedFlowIndex: 0,
+            selectedLogIndex: 0,
+            selectedActionIndex: 0,
+            selectedMessageIndex: 0,
+            selectedLaneName: null,
+            currentPanel: Panel.LEFT,
+            terminalScrollOffset: 0,
+            messageScrollOffset: 0,
+            followMode: true,
+            readableFormat: true,
+            unifiedLogScrollOffset: 0,
+            unifiedLogFollowMode: true,
+            laneFilter: null,
+            readableLogFormat: true,
+            actionMenuVisible: false,
+            actionItems: [],
+            inputMode: 'none',
+            inputBuffer: '',
+            inputTarget: null,
+            showHelp: false,
+            notification: null,
+        };
         // Initialize unified log buffer
         this.unifiedLogBuffer = new buffer_1.LogBufferService(runDir);
     }
@@ -174,15 +207,9 @@ class InteractiveMonitor {
         if (!process.stdout.isTTY || !process.stdin.isTTY) {
             this.discoverFlows();
             this.refresh();
-            // Print summary and exit
-            if (this.view === View.FLOWS_DASHBOARD) {
-                console.log(`\nFound ${this.allFlows.length} flows`);
-            }
-            else {
-                console.log(`\nMonitoring run: ${path.basename(this.runDir)}`);
-                const flowSummary = (0, process_1.getFlowSummary)(this.runDir);
-                console.log(`Status: ${flowSummary.running} running, ${flowSummary.completed} completed, ${flowSummary.failed} failed`);
-            }
+            const flowSummary = (0, process_1.getFlowSummary)(this.runDir);
+            console.log(`\nMonitoring run: ${path.basename(this.runDir)}`);
+            console.log(`Status: ${flowSummary.running} running, ${flowSummary.completed} completed, ${flowSummary.failed} failed`);
             return;
         }
         this.setupTerminal();
@@ -190,40 +217,27 @@ class InteractiveMonitor {
         if (this.unifiedLogBuffer) {
             this.unifiedLogBuffer.startStreaming();
             this.unifiedLogBuffer.on('update', () => {
-                if (this.view === View.UNIFIED_LOG && this.unifiedLogFollowMode) {
+                if (this.state.currentTab === Tab.UNIFIED_LOG && this.state.unifiedLogFollowMode) {
                     this.render();
                 }
             });
         }
-        // Discover all flows
         this.discoverFlows();
         this.refresh();
         this.timer = setInterval(() => this.refresh(), this.interval * 1000);
     }
-    /**
-     * Discover all run directories (flows) for multi-flow view
-     */
     discoverFlows() {
         try {
             if (!fs.existsSync(this.logsDir))
                 return;
-            const runs = fs.readdirSync(this.logsDir)
+            this.allFlows = fs.readdirSync(this.logsDir)
                 .filter(d => d.startsWith('run-'))
                 .map(d => {
                 const runDir = (0, path_1.safeJoin)(this.logsDir, d);
                 const summary = (0, process_1.getFlowSummary)(runDir);
-                return {
-                    runDir,
-                    runId: d,
-                    isAlive: summary.isAlive,
-                    summary,
-                };
+                return { runDir, runId: d, isAlive: summary.isAlive, summary };
             })
-                .sort((a, b) => {
-                // Sort by run ID (timestamp-based) descending
-                return b.runId.localeCompare(a.runId);
-            });
-            this.allFlows = runs;
+                .sort((a, b) => b.runId.localeCompare(a.runId));
         }
         catch {
             // Ignore errors
@@ -234,494 +248,477 @@ class InteractiveMonitor {
             process.stdin.setRawMode(true);
         }
         readline.emitKeypressEvents(process.stdin);
-        process.stdin.on('keypress', (str, key) => {
-            // Handle Ctrl+C
-            if (key && key.ctrl && key.name === 'c') {
-                this.stop();
-                return;
-            }
-            // Safeguard against missing key object
-            const keyName = key ? key.name : str;
-            if (this.view === View.LIST) {
-                this.handleListKey(keyName);
-            }
-            else if (this.view === View.LANE_DETAIL) {
-                this.handleDetailKey(keyName);
-            }
-            else if (this.view === View.FLOW) {
-                this.handleFlowKey(keyName);
-            }
-            else if (this.view === View.TERMINAL) {
-                this.handleTerminalKey(keyName);
-            }
-            else if (this.view === View.INTERVENE) {
-                this.handleInterveneKey(str, key);
-            }
-            else if (this.view === View.TIMEOUT) {
-                this.handleTimeoutKey(str, key);
-            }
-            else if (this.view === View.MESSAGE_DETAIL) {
-                this.handleMessageDetailKey(keyName);
-            }
-            else if (this.view === View.UNIFIED_LOG) {
-                this.handleUnifiedLogKey(keyName);
-            }
-            else if (this.view === View.FLOWS_DASHBOARD) {
-                this.handleFlowsDashboardKey(keyName);
-            }
-        });
-        // Hide cursor
-        process.stdout.write('\x1B[?25l');
+        process.stdin.on('keypress', (str, key) => this.handleKeypress(str, key));
+        process.stdout.write('\x1B[?25l'); // Hide cursor
     }
     stop() {
         if (this.timer)
             clearInterval(this.timer);
-        // Stop unified log streaming
-        if (this.unifiedLogBuffer) {
+        if (this.unifiedLogBuffer)
             this.unifiedLogBuffer.stopStreaming();
-        }
-        // Show cursor and clear screen
-        process.stdout.write('\x1B[?25h');
-        process.stdout.write('\x1Bc');
+        process.stdout.write('\x1B[?25h'); // Show cursor
+        process.stdout.write('\x1Bc'); // Clear screen
         console.log('\n👋 Monitoring stopped\n');
         process.exit(0);
     }
-    handleListKey(key) {
-        switch (key) {
-            case 'up':
-                this.selectedLaneIndex = Math.max(0, this.selectedLaneIndex - 1);
-                this.render();
-                break;
-            case 'down':
-                this.selectedLaneIndex = Math.min(this.lanes.length - 1, this.selectedLaneIndex + 1);
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    // Key Handling - Unified handler
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    handleKeypress(str, key) {
+        // Ctrl+C always quits
+        if (key && key.ctrl && key.name === 'c') {
+            this.stop();
+            return;
+        }
+        const keyName = key ? key.name : str;
+        // Handle input mode first
+        if (this.state.inputMode !== 'none') {
+            this.handleInputKey(str, key);
+            return;
+        }
+        // Handle action menu
+        if (this.state.actionMenuVisible) {
+            this.handleActionMenuKey(keyName);
+            return;
+        }
+        // Handle based on level and tab
+        if (this.state.level === Level.DASHBOARD) {
+            this.handleDashboardKey(keyName);
+        }
+        else if (this.state.level === Level.DETAIL) {
+            this.handleDetailKey(keyName);
+        }
+    }
+    handleDashboardKey(keyName) {
+        switch (keyName) {
+            // Tab navigation (Left/Right at dashboard level)
+            case 'left':
+                this.state.currentTab = Math.max(0, this.state.currentTab - 1);
+                this.resetSelectionForTab();
                 this.render();
                 break;
             case 'right':
-            case 'return':
-            case 'enter':
-                if (this.lanes[this.selectedLaneIndex]) {
-                    this.selectedLaneName = this.lanes[this.selectedLaneIndex].name;
-                    this.view = View.LANE_DETAIL;
-                    this.selectedMessageIndex = 0;
-                    this.scrollOffset = 0;
-                    this.refreshLogs();
-                    this.render();
+                // If an item is selected, go to detail
+                if (this.canEnterDetail()) {
+                    this.enterDetail();
+                }
+                else {
+                    // Otherwise switch tab
+                    this.state.currentTab = Math.min(2, this.state.currentTab + 1);
+                    this.resetSelectionForTab();
                 }
+                this.render();
                 break;
-            case 'left':
-            case 'f':
-                this.view = View.FLOW;
+            case 'tab':
+                this.state.currentTab = ((this.state.currentTab + 1) % 3);
+                this.resetSelectionForTab();
+                this.render();
+                break;
+            // Item selection
+            case 'up':
+                this.moveSelectionUp();
                 this.render();
                 break;
-            case 'u':
-                // Unified log view
-                this.view = View.UNIFIED_LOG;
-                this.unifiedLogScrollOffset = 0;
-                this.unifiedLogFollowMode = true;
+            case 'down':
+                this.moveSelectionDown();
                 this.render();
                 break;
-            case 'm':
-                // Multiple flows dashboard
-                this.discoverFlows();
-                this.view = View.FLOWS_DASHBOARD;
+            // Actions
+            case 'return':
+            case 'enter':
+                this.openActionMenu();
                 this.render();
                 break;
+            // Quit
             case 'q':
                 this.stop();
                 break;
+            // Space for follow toggle in log tab
+            case 'space':
+                if (this.state.currentTab === Tab.UNIFIED_LOG) {
+                    this.state.unifiedLogFollowMode = !this.state.unifiedLogFollowMode;
+                    if (this.state.unifiedLogFollowMode) {
+                        this.state.unifiedLogScrollOffset = 0;
+                    }
+                    this.render();
+                }
+                break;
+            // Help
+            case '?':
+                this.state.showHelp = !this.state.showHelp;
+                this.render();
+                break;
+            // Readable format toggle (for log tab)
+            case 'r':
+                if (this.state.currentTab === Tab.UNIFIED_LOG) {
+                    this.state.readableLogFormat = !this.state.readableLogFormat;
+                    this.render();
+                }
+                break;
         }
     }
-    handleDetailKey(key) {
-        switch (key) {
-            case 'up':
-                this.selectedMessageIndex = Math.max(0, this.selectedMessageIndex - 1);
+    handleDetailKey(keyName) {
+        switch (keyName) {
+            // Back to dashboard
+            case 'left':
+                if (this.state.currentPanel === Panel.RIGHT) {
+                    this.state.currentPanel = Panel.LEFT;
+                }
+                else {
+                    this.state.level = Level.DASHBOARD;
+                    this.state.selectedLaneName = null;
+                }
                 this.render();
                 break;
-            case 'down':
-                this.selectedMessageIndex = Math.min(this.currentLogs.length - 1, this.selectedMessageIndex + 1);
+            case 'escape':
+                this.state.level = Level.DASHBOARD;
+                this.state.selectedLaneName = null;
                 this.render();
                 break;
+            // Panel switch
             case 'right':
-            case 'return':
-            case 'enter':
-                if (this.currentLogs[this.selectedMessageIndex]) {
-                    this.view = View.MESSAGE_DETAIL;
-                    this.render();
+                if (this.state.currentPanel === Panel.LEFT) {
+                    this.state.currentPanel = Panel.RIGHT;
                 }
-                break;
-            case 't':
-                this.view = View.TERMINAL;
-                this.terminalScrollOffset = 0;
                 this.render();
                 break;
-            case 'k':
-                this.killLane();
-                break;
-            case 'i':
-                const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-                if (lane) {
-                    const status = this.getLaneStatus(lane.path, lane.name);
-                    if (status.status === 'running') {
-                        this.view = View.INTERVENE;
-                        this.interventionInput = '';
-                        this.render();
-                    }
-                    else {
-                        this.showNotification('Intervention only available for RUNNING lanes', 'error');
-                    }
+            // Scroll in current panel
+            case 'up':
+                if (this.state.currentPanel === Panel.LEFT) {
+                    this.state.followMode = false;
+                    this.state.terminalScrollOffset++;
                 }
+                else {
+                    this.state.messageScrollOffset = Math.max(0, this.state.messageScrollOffset - 1);
+                }
+                this.render();
                 break;
-            case 'o':
-                const timeoutLane = this.lanes.find(l => l.name === this.selectedLaneName);
-                if (timeoutLane) {
-                    const status = this.getLaneStatus(timeoutLane.path, timeoutLane.name);
-                    if (status.status === 'running') {
-                        this.view = View.TIMEOUT;
-                        this.timeoutInput = '';
-                        this.render();
-                    }
-                    else {
-                        this.showNotification('Timeout update only available for RUNNING lanes', 'error');
+            case 'down':
+                if (this.state.currentPanel === Panel.LEFT) {
+                    this.state.terminalScrollOffset = Math.max(0, this.state.terminalScrollOffset - 1);
+                    if (this.state.terminalScrollOffset === 0) {
+                        this.state.followMode = true;
                     }
                 }
+                else {
+                    this.state.messageScrollOffset++;
+                }
+                this.render();
                 break;
-            case 'escape':
-            case 'backspace':
-            case 'left':
-                this.view = View.LIST;
-                this.selectedLaneName = null;
+            // Actions
+            case 'return':
+            case 'enter':
+                this.openActionMenu();
                 this.render();
                 break;
-            case 'q':
-                this.stop();
+            // Follow toggle
+            case 'space':
+                this.state.followMode = !this.state.followMode;
+                if (this.state.followMode) {
+                    this.state.terminalScrollOffset = 0;
+                }
+                this.render();
                 break;
-        }
-    }
-    handleMessageDetailKey(key) {
-        switch (key) {
-            case 'escape':
-            case 'backspace':
-            case 'left':
-                this.view = View.LANE_DETAIL;
+            // Readable format toggle
+            case 'r':
+                this.state.readableFormat = !this.state.readableFormat;
+                this.render();
+                break;
+            // Help
+            case '?':
+                this.state.showHelp = !this.state.showHelp;
                 this.render();
                 break;
+            // Quit
             case 'q':
                 this.stop();
                 break;
         }
     }
-    handleTerminalKey(key) {
-        switch (key) {
+    handleActionMenuKey(keyName) {
+        switch (keyName) {
             case 'up':
-                this.followMode = false;
-                this.terminalScrollOffset++;
+                this.state.selectedActionIndex = Math.max(0, this.state.selectedActionIndex - 1);
                 this.render();
                 break;
             case 'down':
-                this.terminalScrollOffset = Math.max(0, this.terminalScrollOffset - 1);
-                if (this.terminalScrollOffset === 0) {
-                    this.followMode = true;
-                    this.unseenLineCount = 0;
-                }
+                this.state.selectedActionIndex = Math.min(this.state.actionItems.length - 1, this.state.selectedActionIndex + 1);
                 this.render();
                 break;
-            case 'f':
-                this.followMode = true;
-                this.terminalScrollOffset = 0;
-                this.unseenLineCount = 0;
-                this.render();
-                break;
-            case 'r':
-                // Toggle readable log format
-                this.readableFormat = !this.readableFormat;
-                this.terminalScrollOffset = 0;
-                this.lastTerminalTotalLines = 0;
-                this.render();
+            case 'return':
+            case 'enter':
+                this.executeAction();
                 break;
-            case 't':
             case 'escape':
-            case 'backspace':
             case 'left':
-                this.view = View.LANE_DETAIL;
+                this.state.actionMenuVisible = false;
                 this.render();
                 break;
-            case 'i':
-                this.view = View.INTERVENE;
-                this.interventionInput = '';
+            case 'q':
+                this.state.actionMenuVisible = false;
                 this.render();
                 break;
-            case 'q':
-                this.stop();
+            default:
+                // Number keys for quick selection
+                const num = parseInt(keyName);
+                if (!isNaN(num) && num >= 1 && num <= this.state.actionItems.length) {
+                    this.state.selectedActionIndex = num - 1;
+                    this.executeAction();
+                }
                 break;
         }
     }
-    handleInterveneKey(str, key) {
+    handleInputKey(str, key) {
         if (key && key.name === 'escape') {
-            this.view = View.LANE_DETAIL;
+            this.state.inputMode = 'none';
+            this.state.inputBuffer = '';
             this.render();
             return;
         }
         if (key && (key.name === 'return' || key.name === 'enter')) {
-            if (this.interventionInput.trim()) {
-                this.sendIntervention(this.interventionInput.trim());
-            }
-            this.view = View.LANE_DETAIL;
-            this.render();
+            this.submitInput();
             return;
         }
         if (key && key.name === 'backspace') {
-            this.interventionInput = this.interventionInput.slice(0, -1);
+            this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
             this.render();
             return;
         }
-        if (str && str.length === 1 && !key.ctrl && !key.meta) {
-            this.interventionInput += str;
+        if (str && str.length === 1 && !key?.ctrl && !key?.meta) {
+            // For timeout, only allow numbers
+            if (this.state.inputMode === 'timeout' && !/^\d$/.test(str)) {
+                return;
+            }
+            this.state.inputBuffer += str;
             this.render();
         }
     }
-    handleTimeoutKey(str, key) {
-        if (key && key.name === 'escape') {
-            this.view = View.LANE_DETAIL;
-            this.render();
-            return;
-        }
-        if (key && (key.name === 'return' || key.name === 'enter')) {
-            if (this.timeoutInput.trim()) {
-                this.sendTimeoutUpdate(this.timeoutInput.trim());
-            }
-            this.view = View.LANE_DETAIL;
-            this.render();
-            return;
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    // Navigation Helpers
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    resetSelectionForTab() {
+        this.state.selectedLaneIndex = 0;
+        this.state.selectedFlowIndex = 0;
+        this.state.selectedLogIndex = 0;
+        this.state.unifiedLogScrollOffset = 0;
+    }
+    canEnterDetail() {
+        switch (this.state.currentTab) {
+            case Tab.CURRENT_FLOW:
+                return this.lanes.length > 0;
+            case Tab.ALL_FLOWS:
+                return this.allFlows.length > 0;
+            case Tab.UNIFIED_LOG:
+                return false; // Log detail is inline
         }
-        if (key && key.name === 'backspace') {
-            this.timeoutInput = this.timeoutInput.slice(0, -1);
-            this.render();
-            return;
+    }
+    enterDetail() {
+        if (this.state.currentTab === Tab.CURRENT_FLOW && this.lanes[this.state.selectedLaneIndex]) {
+            this.state.selectedLaneName = this.lanes[this.state.selectedLaneIndex].name;
+            this.state.level = Level.DETAIL;
+            this.state.currentPanel = Panel.LEFT;
+            this.state.terminalScrollOffset = 0;
+            this.state.messageScrollOffset = 0;
+            this.state.followMode = true;
+            this.refreshLogs();
         }
-        // Only allow numbers
-        if (str && /^\d$/.test(str)) {
-            this.timeoutInput += str;
-            this.render();
+        else if (this.state.currentTab === Tab.ALL_FLOWS && this.allFlows[this.state.selectedFlowIndex]) {
+            // Switch to selected flow
+            const flow = this.allFlows[this.state.selectedFlowIndex];
+            this.switchToFlow(flow);
         }
     }
-    handleFlowKey(key) {
-        switch (key) {
-            case 'f':
-            case 'escape':
-            case 'backspace':
-            case 'right':
-            case 'return':
-            case 'enter':
-            case 'left':
-                this.view = View.LIST;
-                this.render();
+    moveSelectionUp() {
+        switch (this.state.currentTab) {
+            case Tab.CURRENT_FLOW:
+                this.state.selectedLaneIndex = Math.max(0, this.state.selectedLaneIndex - 1);
                 break;
-            case 'q':
-                this.stop();
+            case Tab.ALL_FLOWS:
+                this.state.selectedFlowIndex = Math.max(0, this.state.selectedFlowIndex - 1);
+                break;
+            case Tab.UNIFIED_LOG:
+                this.state.unifiedLogFollowMode = false;
+                this.state.unifiedLogScrollOffset++;
                 break;
         }
     }
-    handleUnifiedLogKey(key) {
-        const pageSize = Math.max(10, this.screenHeight - 12);
-        switch (key) {
-            case 'up':
-                this.unifiedLogFollowMode = false;
-                this.unifiedLogScrollOffset++;
-                this.render();
+    moveSelectionDown() {
+        switch (this.state.currentTab) {
+            case Tab.CURRENT_FLOW:
+                this.state.selectedLaneIndex = Math.min(this.lanes.length - 1, this.state.selectedLaneIndex + 1);
                 break;
-            case 'down':
-                this.unifiedLogScrollOffset = Math.max(0, this.unifiedLogScrollOffset - 1);
-                if (this.unifiedLogScrollOffset === 0) {
-                    this.unifiedLogFollowMode = true;
-                }
-                this.render();
-                break;
-            case 'pageup':
-                this.unifiedLogFollowMode = false;
-                this.unifiedLogScrollOffset += pageSize;
-                this.render();
+            case Tab.ALL_FLOWS:
+                this.state.selectedFlowIndex = Math.min(this.allFlows.length - 1, this.state.selectedFlowIndex + 1);
                 break;
-            case 'pagedown':
-                this.unifiedLogScrollOffset = Math.max(0, this.unifiedLogScrollOffset - pageSize);
-                if (this.unifiedLogScrollOffset === 0) {
-                    this.unifiedLogFollowMode = true;
+            case Tab.UNIFIED_LOG:
+                this.state.unifiedLogScrollOffset = Math.max(0, this.state.unifiedLogScrollOffset - 1);
+                if (this.state.unifiedLogScrollOffset === 0) {
+                    this.state.unifiedLogFollowMode = true;
                 }
-                this.render();
-                break;
-            case 'f':
-                this.unifiedLogFollowMode = true;
-                this.unifiedLogScrollOffset = 0;
-                this.render();
-                break;
-            case 'r':
-                // Toggle readable format
-                this.readableFormat = !this.readableFormat;
-                this.render();
-                break;
-            case 'l':
-                // Cycle through lane filter
-                this.cycleLaneFilter();
-                this.unifiedLogScrollOffset = 0;
-                this.render();
-                break;
-            case 'escape':
-            case 'backspace':
-            case 'u':
-                this.view = View.LIST;
-                this.render();
-                break;
-            case 'q':
-                this.stop();
                 break;
         }
     }
-    /**
-     * Cycle through available lanes for filtering
-     */
-    cycleLaneFilter() {
-        const lanes = this.unifiedLogBuffer?.getLanes() || [];
-        if (lanes.length === 0) {
-            this.laneFilter = null;
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    // Action Menu
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    openActionMenu() {
+        this.state.actionItems = this.getContextActions();
+        if (this.state.actionItems.length === 0)
             return;
-        }
-        if (this.laneFilter === null) {
-            // Show first lane
-            this.laneFilter = lanes[0];
-        }
-        else {
-            const currentIndex = lanes.indexOf(this.laneFilter);
-            if (currentIndex === -1 || currentIndex === lanes.length - 1) {
-                // Reset to all lanes
-                this.laneFilter = null;
+        this.state.selectedActionIndex = 0;
+        this.state.actionMenuVisible = true;
+    }
+    getContextActions() {
+        // Get actions based on current context
+        if (this.state.level === Level.DASHBOARD) {
+            if (this.state.currentTab === Tab.CURRENT_FLOW && this.lanes[this.state.selectedLaneIndex]) {
+                return this.getLaneActions(this.lanes[this.state.selectedLaneIndex]);
             }
-            else {
-                // Next lane
-                this.laneFilter = lanes[currentIndex + 1];
+            else if (this.state.currentTab === Tab.ALL_FLOWS && this.allFlows[this.state.selectedFlowIndex]) {
+                return this.getFlowActions(this.allFlows[this.state.selectedFlowIndex]);
             }
+            else if (this.state.currentTab === Tab.UNIFIED_LOG) {
+                return this.getLogActions();
+            }
+        }
+        else if (this.state.level === Level.DETAIL && this.state.selectedLaneName) {
+            const lane = this.lanes.find(l => l.name === this.state.selectedLaneName);
+            if (lane)
+                return this.getLaneActions(lane);
         }
+        return [];
     }
-    handleFlowsDashboardKey(key) {
-        // Handle confirmation dialog first
-        if (this.confirmAction) {
-            if (key === 'y') {
-                this.executeConfirmedAction();
-                return;
-            }
-            else if (key === 'n' || key === 'escape') {
-                this.confirmAction = null;
-                this.render();
-                return;
-            }
-            // Other keys cancel confirmation
-            this.confirmAction = null;
-            this.render();
-            return;
+    getLaneActions(lane) {
+        const status = this.getLaneStatus(lane.path, lane.name);
+        const isRunning = status.status === 'running';
+        return [
+            {
+                id: 'message',
+                label: 'Send Message',
+                icon: '💬',
+                action: () => this.startMessageInput(lane.name),
+                disabled: !isRunning,
+                disabledReason: 'Lane not running',
+            },
+            {
+                id: 'timeout',
+                label: 'Set Timeout',
+                icon: '⏱️',
+                action: () => this.startTimeoutInput(lane.name),
+                disabled: !isRunning,
+                disabledReason: 'Lane not running',
+            },
+            {
+                id: 'stop',
+                label: 'Stop Lane',
+                icon: '🔴',
+                action: () => this.killLane(lane),
+                disabled: !isRunning,
+                disabledReason: 'Lane not running',
+            },
+            {
+                id: 'logs',
+                label: 'View Full Logs',
+                icon: '📋',
+                action: () => {
+                    this.state.selectedLaneName = lane.name;
+                    this.state.level = Level.DETAIL;
+                    this.state.currentPanel = Panel.LEFT;
+                    this.refreshLogs();
+                    this.state.actionMenuVisible = false;
+                    this.render();
+                },
+            },
+        ];
+    }
+    getFlowActions(flow) {
+        const isCurrent = flow.runDir === this.runDir;
+        return [
+            {
+                id: 'switch',
+                label: 'Switch to Flow',
+                icon: '🔄',
+                action: () => this.switchToFlow(flow),
+                disabled: isCurrent,
+                disabledReason: 'Already viewing this flow',
+            },
+            {
+                id: 'delete',
+                label: 'Delete Flow',
+                icon: '🗑️',
+                action: () => this.deleteFlow(flow),
+                disabled: flow.isAlive || isCurrent,
+                disabledReason: flow.isAlive ? 'Cannot delete running flow' : 'Cannot delete current flow',
+            },
+        ];
+    }
+    getLogActions() {
+        const lanes = this.unifiedLogBuffer?.getLanes() || [];
+        return [
+            {
+                id: 'filter',
+                label: this.state.laneFilter ? `Filter: ${this.state.laneFilter}` : 'Filter by Lane',
+                icon: '🔍',
+                action: () => this.cycleLaneFilter(lanes),
+            },
+            {
+                id: 'follow',
+                label: this.state.unifiedLogFollowMode ? 'Pause Follow' : 'Resume Follow',
+                icon: this.state.unifiedLogFollowMode ? '⏸️' : '▶️',
+                action: () => {
+                    this.state.unifiedLogFollowMode = !this.state.unifiedLogFollowMode;
+                    this.state.actionMenuVisible = false;
+                    this.render();
+                },
+            },
+        ];
+    }
+    executeAction() {
+        const action = this.state.actionItems[this.state.selectedActionIndex];
+        if (action && !action.disabled) {
+            this.state.actionMenuVisible = false;
+            action.action();
         }
-        switch (key) {
-            case 'up':
-                this.selectedFlowIndex = Math.max(0, this.selectedFlowIndex - 1);
-                this.render();
-                break;
-            case 'down':
-                this.selectedFlowIndex = Math.min(this.allFlows.length - 1, this.selectedFlowIndex + 1);
-                this.render();
-                break;
-            case 'right':
-            case 'return':
-            case 'enter':
-                // Switch to selected flow
-                if (this.allFlows[this.selectedFlowIndex]) {
-                    const flow = this.allFlows[this.selectedFlowIndex];
-                    this.runDir = flow.runDir;
-                    // Restart log buffer for new run
-                    if (this.unifiedLogBuffer) {
-                        this.unifiedLogBuffer.stopStreaming();
-                    }
-                    this.unifiedLogBuffer = new buffer_1.LogBufferService(this.runDir);
-                    this.unifiedLogBuffer.startStreaming();
-                    this.lanes = [];
-                    this.laneProcessStatuses.clear();
-                    this.view = View.LIST;
-                    this.showNotification(`Switched to flow: ${flow.runId}`, 'info');
-                    this.refresh();
-                }
-                break;
-            case 'd':
-                // Delete flow (with confirmation)
-                if (this.allFlows[this.selectedFlowIndex]) {
-                    const flow = this.allFlows[this.selectedFlowIndex];
-                    if (flow.isAlive) {
-                        this.showNotification('Cannot delete a running flow. Stop it first.', 'error');
-                    }
-                    else if (flow.runDir === this.runDir) {
-                        this.showNotification('Cannot delete the currently viewed flow.', 'error');
-                    }
-                    else {
-                        this.confirmAction = {
-                            type: 'delete-flow',
-                            target: flow.runId,
-                            time: Date.now(),
-                        };
-                        this.render();
-                    }
-                }
-                break;
-            case 'r':
-                // Refresh flows
-                this.discoverFlows();
-                this.showNotification('Flows refreshed', 'info');
-                this.render();
-                break;
-            case 'escape':
-            case 'backspace':
-            case 'm':
-                this.view = View.LIST;
-                this.render();
-                break;
-            case 'q':
-                this.stop();
-                break;
+        else if (action?.disabled) {
+            this.showNotification(action.disabledReason || 'Action not available', 'error');
         }
     }
-    /**
-     * Execute a confirmed action (delete flow, kill process, etc.)
-     */
-    executeConfirmedAction() {
-        if (!this.confirmAction)
-            return;
-        const { type, target } = this.confirmAction;
-        this.confirmAction = null;
-        if (type === 'delete-flow') {
-            const flow = this.allFlows.find(f => f.runId === target);
-            if (flow) {
-                try {
-                    // Delete the flow directory
-                    fs.rmSync(flow.runDir, { recursive: true, force: true });
-                    this.showNotification(`Deleted flow: ${target}`, 'success');
-                    // Refresh the list
-                    this.discoverFlows();
-                    // Adjust selection if needed
-                    if (this.selectedFlowIndex >= this.allFlows.length) {
-                        this.selectedFlowIndex = Math.max(0, this.allFlows.length - 1);
-                    }
-                }
-                catch (err) {
-                    this.showNotification(`Failed to delete flow: ${err}`, 'error');
-                }
-            }
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    // Actions Implementation
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    startMessageInput(laneName) {
+        this.state.inputMode = 'message';
+        this.state.inputBuffer = '';
+        this.state.inputTarget = laneName;
+        this.state.actionMenuVisible = false;
+        this.render();
+    }
+    startTimeoutInput(laneName) {
+        this.state.inputMode = 'timeout';
+        this.state.inputBuffer = '';
+        this.state.inputTarget = laneName;
+        this.state.actionMenuVisible = false;
+        this.render();
+    }
+    submitInput() {
+        if (this.state.inputMode === 'message') {
+            this.sendMessage(this.state.inputTarget, this.state.inputBuffer);
         }
+        else if (this.state.inputMode === 'timeout') {
+            this.setLaneTimeout(this.state.inputTarget, this.state.inputBuffer);
+        }
+        this.state.inputMode = 'none';
+        this.state.inputBuffer = '';
+        this.state.inputTarget = null;
         this.render();
     }
-    sendIntervention(message) {
-        if (!this.selectedLaneName)
-            return;
-        const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-        if (!lane)
+    sendMessage(laneName, message) {
+        const lane = this.lanes.find(l => l.name === laneName);
+        if (!lane || !message.trim())
             return;
         try {
             const interventionPath = (0, path_1.safeJoin)(lane.path, 'intervention.txt');
             fs.writeFileSync(interventionPath, message, 'utf8');
-            // Also log it to the conversation
             const convoPath = (0, path_1.safeJoin)(lane.path, 'conversation.jsonl');
             const entry = {
                 timestamp: new Date().toISOString(),
@@ -732,16 +729,14 @@ class InteractiveMonitor {
                 model: 'manual'
             };
             fs.appendFileSync(convoPath, JSON.stringify(entry) + '\n', 'utf8');
-            this.showNotification('Intervention message sent', 'success');
+            this.showNotification('Message sent', 'success');
         }
-        catch (e) {
-            this.showNotification('Failed to send intervention', 'error');
+        catch {
+            this.showNotification('Failed to send message', 'error');
         }
     }
-    sendTimeoutUpdate(timeoutStr) {
-        if (!this.selectedLaneName)
-            return;
-        const lane = this.lanes.find(l => l.name === this.selectedLaneName);
+    setLaneTimeout(laneName, timeoutStr) {
+        const lane = this.lanes.find(l => l.name === laneName);
         if (!lane)
             return;
         try {
@@ -752,846 +747,609 @@ class InteractiveMonitor {
             }
             const timeoutPath = (0, path_1.safeJoin)(lane.path, 'timeout.txt');
             fs.writeFileSync(timeoutPath, String(timeoutMs), 'utf8');
-            this.showNotification(`Timeout updated to ${Math.round(timeoutMs / 1000)}s`, 'success');
-        }
-        catch (e) {
-            this.showNotification('Failed to update timeout', 'error');
+            this.showNotification(`Timeout set to ${Math.round(timeoutMs / 1000)}s`, 'success');
         }
-    }
-    refreshLogs() {
-        if (!this.selectedLaneName)
-            return;
-        const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-        if (!lane)
-            return;
-        const convoPath = (0, path_1.safeJoin)(lane.path, 'conversation.jsonl');
-        this.currentLogs = (0, state_1.readLog)(convoPath);
-        // Keep selection in bounds after refresh
-        if (this.selectedMessageIndex >= this.currentLogs.length) {
-            this.selectedMessageIndex = Math.max(0, this.currentLogs.length - 1);
+        catch {
+            this.showNotification('Failed to set timeout', 'error');
         }
     }
-    refresh() {
-        this.lanes = this.listLanesWithDeps(this.runDir);
-        // Update process statuses for accurate display
-        this.updateProcessStatuses();
-        if (this.view !== View.LIST && this.view !== View.UNIFIED_LOG && this.view !== View.FLOWS_DASHBOARD) {
-            this.refreshLogs();
-        }
-        // Refresh flows list periodically
-        if (this.view === View.FLOWS_DASHBOARD) {
-            this.discoverFlows();
-        }
-        this.render();
-    }
-    /**
-     * Update process statuses for all lanes
-     */
-    updateProcessStatuses() {
-        const lanesDir = (0, path_1.safeJoin)(this.runDir, 'lanes');
-        if (!fs.existsSync(lanesDir))
-            return;
-        for (const lane of this.lanes) {
-            const status = (0, process_1.getLaneProcessStatus)(lane.path, lane.name);
-            this.laneProcessStatuses.set(lane.name, status);
-        }
-    }
-    killLane() {
-        if (!this.selectedLaneName)
-            return;
-        const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-        if (!lane)
-            return;
+    killLane(lane) {
         const status = this.getLaneStatus(lane.path, lane.name);
         if (status.pid && status.status === 'running') {
             try {
                 process.kill(status.pid, 'SIGTERM');
                 this.showNotification(`Sent SIGTERM to PID ${status.pid}`, 'success');
             }
-            catch (e) {
+            catch {
                 this.showNotification(`Failed to kill PID ${status.pid}`, 'error');
             }
         }
+        this.state.actionMenuVisible = false;
+        this.render();
+    }
+    switchToFlow(flow) {
+        this.runDir = flow.runDir;
+        if (this.unifiedLogBuffer) {
+            this.unifiedLogBuffer.stopStreaming();
+        }
+        this.unifiedLogBuffer = new buffer_1.LogBufferService(this.runDir);
+        this.unifiedLogBuffer.startStreaming();
+        this.lanes = [];
+        this.laneProcessStatuses.clear();
+        this.state.currentTab = Tab.CURRENT_FLOW;
+        this.state.level = Level.DASHBOARD;
+        this.state.selectedLaneIndex = 0;
+        this.state.actionMenuVisible = false;
+        this.showNotification(`Switched to: ${flow.runId}`, 'info');
+        this.refresh();
+    }
+    deleteFlow(flow) {
+        try {
+            fs.rmSync(flow.runDir, { recursive: true, force: true });
+            this.showNotification(`Deleted: ${flow.runId}`, 'success');
+            this.discoverFlows();
+            if (this.state.selectedFlowIndex >= this.allFlows.length) {
+                this.state.selectedFlowIndex = Math.max(0, this.allFlows.length - 1);
+            }
+        }
+        catch {
+            this.showNotification('Failed to delete flow', 'error');
+        }
+        this.state.actionMenuVisible = false;
+        this.render();
+    }
+    cycleLaneFilter(lanes) {
+        if (lanes.length === 0) {
+            this.state.laneFilter = null;
+        }
+        else if (this.state.laneFilter === null) {
+            this.state.laneFilter = lanes[0];
+        }
         else {
-            this.showNotification(`No running process found for ${this.selectedLaneName}`, 'info');
+            const idx = lanes.indexOf(this.state.laneFilter);
+            if (idx === -1 || idx === lanes.length - 1) {
+                this.state.laneFilter = null;
+            }
+            else {
+                this.state.laneFilter = lanes[idx + 1];
+            }
         }
+        this.state.unifiedLogScrollOffset = 0;
+        this.state.actionMenuVisible = false;
+        this.render();
+    }
+    showHelp() {
+        this.showNotification('←/→: Navigate | ↑/↓: Select | Enter: Action | Esc: Back | Q: Quit', 'info');
+        this.render();
     }
     showNotification(message, type) {
-        this.notification = { message, type, time: Date.now() };
+        this.state.notification = { message, type, time: Date.now() };
         this.render();
     }
-    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-    // UI Layout Helpers - Consistent header/footer across all views
-    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-    renderHeader(title, breadcrumb = []) {
-        const width = Math.min(this.screenWidth, 120);
-        const line = UI.CHARS.hLine.repeat(width);
-        // Flow status
-        const flowSummary = (0, process_1.getFlowSummary)(this.runDir);
-        const flowStatusIcon = flowSummary.isAlive ? '🟢' : (flowSummary.completed === flowSummary.total && flowSummary.total > 0 ? '✅' : '🔴');
-        // Breadcrumb
-        const crumbs = ['CursorFlow', ...breadcrumb].join(` ${UI.COLORS.gray}›${UI.COLORS.reset} `);
-        // Time
-        const timeStr = new Date().toLocaleTimeString('en-US', { hour12: false });
-        process.stdout.write(`${UI.COLORS.cyan}${line}${UI.COLORS.reset}\n`);
-        process.stdout.write(`${UI.COLORS.bold}${crumbs}${UI.COLORS.reset}  ${flowStatusIcon}  `);
-        process.stdout.write(`${UI.COLORS.dim}${timeStr}${UI.COLORS.reset}\n`);
-        process.stdout.write(`${UI.COLORS.cyan}${line}${UI.COLORS.reset}\n`);
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    // Data Refresh
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    refresh() {
+        this.lanes = this.listLanes();
+        this.updateProcessStatuses();
+        if (this.state.level === Level.DETAIL && this.state.selectedLaneName) {
+            this.refreshLogs();
+        }
+        if (this.state.currentTab === Tab.ALL_FLOWS) {
+            this.discoverFlows();
+        }
+        this.render();
     }
-    renderFooter(actions) {
-        const width = Math.min(this.screenWidth, 120);
-        const line = UI.CHARS.hLine.repeat(width);
-        // Notification area
-        if (this.notification && Date.now() - this.notification.time < 3000) {
-            const nColor = this.notification.type === 'error' ? UI.COLORS.red
-                : this.notification.type === 'success' ? UI.COLORS.green
-                    : UI.COLORS.cyan;
-            process.stdout.write(`\n${nColor}🔔 ${this.notification.message}${UI.COLORS.reset}\n`);
-        }
-        // Confirmation dialog area
-        if (this.confirmAction && Date.now() - this.confirmAction.time < 10000) {
-            const actionName = this.confirmAction.type === 'delete-flow' ? 'DELETE FLOW' : 'KILL PROCESS';
-            process.stdout.write(`\n${UI.COLORS.yellow}⚠️  Confirm ${actionName}: ${this.confirmAction.target}? [Y] Yes / [N] No${UI.COLORS.reset}\n`);
-        }
-        process.stdout.write(`\n${UI.COLORS.cyan}${line}${UI.COLORS.reset}\n`);
-        const formattedActions = actions.map(a => {
-            const parts = a.split('] ');
-            if (parts.length === 2) {
-                // Use regex with global flag to replace all occurrences
-                return `${UI.COLORS.yellow}[${parts[0].replace(/\[/g, '')}]${UI.COLORS.reset} ${parts[1]}`;
-            }
-            return a;
-        });
-        process.stdout.write(` ${formattedActions.join('  ')}\n`);
+    refreshLogs() {
+        if (!this.state.selectedLaneName)
+            return;
+        const lane = this.lanes.find(l => l.name === this.state.selectedLaneName);
+        if (!lane)
+            return;
+        const convoPath = (0, path_1.safeJoin)(lane.path, 'conversation.jsonl');
+        this.currentLogs = (0, state_1.readLog)(convoPath);
+        if (this.state.messageScrollOffset >= this.currentLogs.length) {
+            this.state.messageScrollOffset = Math.max(0, this.currentLogs.length - 1);
+        }
+    }
+    updateProcessStatuses() {
+        for (const lane of this.lanes) {
+            const status = (0, process_1.getLaneProcessStatus)(lane.path, lane.name);
+            this.laneProcessStatuses.set(lane.name, status);
+        }
     }
-    renderSectionTitle(title, extra) {
-        const extraStr = extra ? `  ${UI.COLORS.dim}${extra}${UI.COLORS.reset}` : '';
-        process.stdout.write(`\n${UI.COLORS.bold}${title}${UI.COLORS.reset}${extraStr}\n`);
-        process.stdout.write(`${UI.COLORS.gray}${'─'.repeat(40)}${UI.COLORS.reset}\n`);
+    listLanes() {
+        const lanesDir = (0, path_1.safeJoin)(this.runDir, 'lanes');
+        if (!fs.existsSync(lanesDir))
+            return [];
+        return fs.readdirSync(lanesDir)
+            .filter(d => fs.statSync((0, path_1.safeJoin)(lanesDir, d)).isDirectory())
+            .map(name => ({ name, path: (0, path_1.safeJoin)(lanesDir, name) }));
+    }
+    getLaneStatus(lanePath, _laneName) {
+        const statePath = (0, path_1.safeJoin)(lanePath, 'state.json');
+        const state = (0, state_1.loadState)(statePath);
+        if (!state) {
+            return { status: 'pending', currentTask: 0, totalTasks: '?', progress: '0%', duration: 0, pipelineBranch: '-', chatId: '-' };
+        }
+        const progress = state.totalTasks > 0 ? Math.round((state.currentTaskIndex / state.totalTasks) * 100) : 0;
+        const duration = state.startTime ? (state.endTime
+            ? state.endTime - state.startTime
+            : (state.status === 'running' ? Date.now() - state.startTime : 0)) : 0;
+        return {
+            status: state.status || 'unknown',
+            currentTask: state.currentTaskIndex || 0,
+            totalTasks: state.totalTasks || '?',
+            progress: `${progress}%`,
+            pipelineBranch: state.pipelineBranch || '-',
+            chatId: state.chatId || '-',
+            duration,
+            error: state.error,
+            pid: state.pid,
+            waitingFor: state.waitingFor || [],
+        };
     }
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    // Rendering
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     render() {
-        // Clear screen
-        process.stdout.write('\x1Bc');
-        // Clear old notifications
-        if (this.notification && Date.now() - this.notification.time > 3000) {
-            this.notification = null;
-        }
-        // Clear old confirmation
-        if (this.confirmAction && Date.now() - this.confirmAction.time > 10000) {
-            this.confirmAction = null;
-        }
-        switch (this.view) {
-            case View.LIST:
-                this.renderList();
-                break;
-            case View.LANE_DETAIL:
-                this.renderLaneDetail();
-                break;
-            case View.MESSAGE_DETAIL:
-                this.renderMessageDetail();
-                break;
-            case View.FLOW:
-                this.renderFlow();
-                break;
-            case View.TERMINAL:
-                this.renderTerminal();
-                break;
-            case View.INTERVENE:
-                this.renderIntervene();
-                break;
-            case View.TIMEOUT:
-                this.renderTimeout();
-                break;
-            case View.UNIFIED_LOG:
-                this.renderUnifiedLog();
-                break;
-            case View.FLOWS_DASHBOARD:
-                this.renderFlowsDashboard();
-                break;
+        process.stdout.write('\x1Bc'); // Clear screen
+        // Clear old notification
+        if (this.state.notification && Date.now() - this.state.notification.time > 3000) {
+            this.state.notification = null;
+        }
+        if (this.state.level === Level.DASHBOARD) {
+            this.renderDashboard();
+        }
+        else {
+            this.renderDetail();
+        }
+        // Overlay: Action Menu
+        if (this.state.actionMenuVisible) {
+            this.renderActionMenu();
+        }
+        // Overlay: Input Mode
+        if (this.state.inputMode !== 'none') {
+            this.renderInputOverlay();
+        }
+        // Overlay: Help
+        if (this.state.showHelp) {
+            this.renderHelpOverlay();
         }
     }
-    renderList() {
+    renderDashboard() {
+        const w = this.screenWidth;
+        const h = this.screenHeight;
+        const { cyan, reset, bold, dim, gray, green, yellow, red } = UI.COLORS;
+        // Header
         const flowSummary = (0, process_1.getFlowSummary)(this.runDir);
+        const statusIcon = flowSummary.isAlive ? UI.ICONS.live : UI.ICONS.stopped;
+        const timeStr = new Date().toLocaleTimeString('en-US', { hour12: false });
         const runId = path.basename(this.runDir);
-        this.renderHeader('Lane Dashboard', [runId]);
-        // Summary line
-        const summaryParts = [
-            `${flowSummary.running} ${UI.COLORS.cyan}running${UI.COLORS.reset}`,
-            `${flowSummary.completed} ${UI.COLORS.green}done${UI.COLORS.reset}`,
-            `${flowSummary.failed} ${UI.COLORS.red}failed${UI.COLORS.reset}`,
-            `${flowSummary.dead} ${UI.COLORS.yellow}stale${UI.COLORS.reset}`,
+        const hLine = UI.CHARS.hLine.repeat(w);
+        process.stdout.write(`${cyan}${hLine}${reset}\n`);
+        process.stdout.write(`${bold}  CursorFlow Monitor${reset}  ${gray}${runId}${reset}  ${statusIcon}  ${dim}${timeStr}${reset}\n`);
+        // Tabs
+        const tabs = [
+            { label: '현재 플로우', active: this.state.currentTab === Tab.CURRENT_FLOW },
+            { label: '모든 플로우', active: this.state.currentTab === Tab.ALL_FLOWS },
+            { label: '통합 로그', active: this.state.currentTab === Tab.UNIFIED_LOG },
         ];
-        process.stdout.write(` ${UI.COLORS.dim}Lanes:${UI.COLORS.reset} ${summaryParts.join(' │ ')}\n`);
+        let tabLine = '';
+        tabs.forEach((tab, i) => {
+            if (tab.active) {
+                tabLine += `  ${cyan}[${UI.ICONS.selected} ${tab.label}]${reset}`;
+            }
+            else {
+                tabLine += `  ${dim}[${UI.ICONS.unselected} ${tab.label}]${reset}`;
+            }
+        });
+        process.stdout.write(`${cyan}${hLine}${reset}\n`);
+        process.stdout.write(`${tabLine}\n`);
+        process.stdout.write(`${cyan}${hLine}${reset}\n`);
+        // Content based on tab
+        const contentHeight = h - 10;
+        if (this.state.currentTab === Tab.CURRENT_FLOW) {
+            this.renderLaneList(contentHeight);
+        }
+        else if (this.state.currentTab === Tab.ALL_FLOWS) {
+            this.renderFlowList(contentHeight);
+        }
+        else {
+            this.renderUnifiedLog(contentHeight);
+        }
+        // Notification
+        if (this.state.notification) {
+            const nColor = this.state.notification.type === 'error' ? red
+                : this.state.notification.type === 'success' ? green : cyan;
+            process.stdout.write(`\n${nColor}  🔔 ${this.state.notification.message}${reset}\n`);
+        }
+        else {
+            process.stdout.write('\n');
+        }
+        // Footer
+        process.stdout.write(`${cyan}${hLine}${reset}\n`);
+        const help = this.state.currentTab === Tab.UNIFIED_LOG
+            ? `${yellow}[←/→]${reset} Tab  ${yellow}[↑/↓]${reset} Scroll  ${yellow}[Space]${reset} Follow  ${yellow}[R]${reset} Format  ${yellow}[Enter]${reset} Action  ${yellow}[?]${reset} Help`
+            : `${yellow}[←/→]${reset} Tab/Enter  ${yellow}[↑/↓]${reset} Select  ${yellow}[Enter]${reset} Action  ${yellow}[?]${reset} Help  ${yellow}[Q]${reset} Quit`;
+        process.stdout.write(`  ${help}\n`);
+    }
+    renderLaneList(maxLines) {
+        const { cyan, reset, dim, gray, green, yellow, red, bgGray } = UI.COLORS;
+        // Summary
+        const flowSummary = (0, process_1.getFlowSummary)(this.runDir);
+        const summary = `${cyan}${flowSummary.running}${reset} running │ ${green}${flowSummary.completed}${reset} done │ ${yellow}${flowSummary.pending || 0}${reset} waiting │ ${red}${flowSummary.failed}${reset} failed`;
+        process.stdout.write(`  ${dim}Summary:${reset} ${summary}\n\n`);
         if (this.lanes.length === 0) {
-            process.stdout.write(`\n ${UI.COLORS.dim}No lanes found${UI.COLORS.reset}\n`);
-            this.renderFooter(['[Q] Quit', '[M] All Flows']);
+            process.stdout.write(`  ${dim}No lanes found. Run ${cyan}cursorflow run${reset}${dim} to start.${reset}\n`);
             return;
         }
-        const laneStatuses = {};
-        this.lanes.forEach(l => laneStatuses[l.name] = this.getLaneStatus(l.path, l.name));
-        const maxNameLen = Math.max(...this.lanes.map(l => l.name.length), 12);
-        process.stdout.write(`\n    ${'Lane'.padEnd(maxNameLen)}  ${'Status'.padEnd(12)}  ${'PID'.padEnd(7)}  ${'Time'.padEnd(8)}  ${'Tasks'.padEnd(6)}  Next\n`);
-        process.stdout.write(`    ${'─'.repeat(maxNameLen)}  ${'─'.repeat(12)}  ${'─'.repeat(7)}  ${'─'.repeat(8)}  ${'─'.repeat(6)}  ${'─'.repeat(25)}\n`);
-        this.lanes.forEach((lane, i) => {
-            const isSelected = i === this.selectedLaneIndex;
-            const status = laneStatuses[lane.name];
+        // Header
+        const maxNameLen = Math.max(12, ...this.lanes.map(l => l.name.length));
+        process.stdout.write(`  ${dim}  # │ ${'Lane'.padEnd(maxNameLen)} │ Status      │ Progress │ Duration │ Next${reset}\n`);
+        process.stdout.write(`  ${dim}${'─'.repeat(maxNameLen + 60)}${reset}\n`);
+        // List
+        const visibleLanes = this.lanes.slice(0, maxLines - 4);
+        visibleLanes.forEach((lane, i) => {
+            const isSelected = i === this.state.selectedLaneIndex;
+            const status = this.getLaneStatus(lane.path, lane.name);
             const processStatus = this.laneProcessStatuses.get(lane.name);
-            // Determine the accurate status based on process detection
+            // Status display
             let displayStatus = status.status;
-            let statusColor = UI.COLORS.gray;
             let statusIcon = this.getStatusIcon(status.status);
-            if (processStatus) {
-                if (processStatus.isStale) {
-                    displayStatus = 'STALE';
-                    statusIcon = '💀';
-                    statusColor = UI.COLORS.yellow;
-                }
-                else if (processStatus.actualStatus === 'dead' && status.status === 'running') {
-                    displayStatus = 'DEAD';
-                    statusIcon = '☠️';
-                    statusColor = UI.COLORS.red;
-                }
-                else if (processStatus.actualStatus === 'running') {
-                    statusColor = UI.COLORS.cyan;
-                }
-                else if (status.status === 'completed') {
-                    statusColor = UI.COLORS.green;
-                }
-                else if (status.status === 'failed') {
-                    statusColor = UI.COLORS.red;
-                }
+            let statusColor = gray;
+            if (processStatus?.isStale) {
+                displayStatus = 'STALE';
+                statusIcon = UI.ICONS.stale;
+                statusColor = yellow;
             }
-            const statusText = `${statusIcon} ${displayStatus}`.padEnd(12);
-            // Process indicator
-            let pidText = '-'.padEnd(7);
-            if (processStatus?.pid) {
-                const pidIcon = processStatus.processRunning ? '●' : '○';
-                const pidColor = processStatus.processRunning ? UI.COLORS.green : UI.COLORS.red;
-                pidText = `${pidColor}${pidIcon}${UI.COLORS.reset}${processStatus.pid}`.padEnd(7 + 9); // +9 for color codes
+            else if (processStatus?.actualStatus === 'running') {
+                statusColor = cyan;
             }
-            // Duration
-            const duration = processStatus?.duration || status.duration;
-            const timeText = this.formatDuration(duration).padEnd(8);
-            // Tasks
-            let tasksText = '-'.padEnd(6);
-            if (typeof status.totalTasks === 'number') {
-                tasksText = `${status.currentTask}/${status.totalTasks}`.padEnd(6);
+            else if (status.status === 'completed') {
+                statusColor = green;
+            }
+            else if (status.status === 'failed') {
+                statusColor = red;
             }
+            // Progress
+            const progressText = `${status.currentTask}/${status.totalTasks}`;
+            // Duration
+            const duration = this.formatDuration(processStatus?.duration || status.duration);
             // Next action
             let nextAction = '-';
-            if (status.status === 'completed') {
+            if (status.status === 'completed')
                 nextAction = '✓ Done';
-            }
-            else if (status.status === 'waiting') {
-                if (status.waitingFor?.length > 0) {
-                    nextAction = `⏳ ${status.waitingFor.join(', ')}`;
-                }
-                else {
-                    nextAction = '⏳ waiting';
-                }
-            }
-            else if (processStatus?.actualStatus === 'running') {
+            else if (status.status === 'waiting')
+                nextAction = `⏳ ${status.waitingFor?.join(', ') || 'waiting'}`;
+            else if (processStatus?.actualStatus === 'running')
                 nextAction = '🚀 working...';
-            }
-            else if (processStatus?.isStale) {
-                nextAction = '⚠️ died unexpectedly';
-            }
-            // Truncate next action
-            if (nextAction.length > 25)
-                nextAction = nextAction.substring(0, 22) + '...';
-            const prefix = isSelected ? ` ${UI.COLORS.cyan}▶${UI.COLORS.reset} ` : '   ';
-            const rowBg = isSelected ? UI.COLORS.bgGray : '';
-            const rowEnd = isSelected ? UI.COLORS.reset : '';
-            process.stdout.write(`${rowBg}${prefix}${lane.name.padEnd(maxNameLen)}  ${statusColor}${statusText}${UI.COLORS.reset}  ${pidText}  ${timeText}  ${tasksText}  ${nextAction}${rowEnd}\n`);
+            else if (processStatus?.isStale)
+                nextAction = '⚠️ died';
+            if (nextAction.length > 20)
+                nextAction = nextAction.substring(0, 17) + '...';
+            // Render row
+            const prefix = isSelected ? `${cyan}▶${reset}` : ' ';
+            const bg = isSelected ? bgGray : '';
+            const endBg = isSelected ? reset : '';
+            const num = String(i + 1).padStart(2);
+            process.stdout.write(`${bg}  ${prefix} ${num} │ ${lane.name.padEnd(maxNameLen)} │ ${statusColor}${statusIcon} ${displayStatus.padEnd(9)}${reset} │ ${progressText.padEnd(8)} │ ${duration.padEnd(8)} │ ${nextAction}${endBg}\n`);
         });
-        this.renderFooter([
-            '[↑↓] Select', '[→/Enter] Details', '[F] Flow', '[U] Unified Logs', '[M] All Flows', '[Q] Quit'
-        ]);
+        if (this.lanes.length > visibleLanes.length) {
+            process.stdout.write(`  ${dim}  ... and ${this.lanes.length - visibleLanes.length} more${reset}\n`);
+        }
     }
-    renderLaneDetail() {
-        const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-        if (!lane) {
-            this.view = View.LIST;
-            this.render();
+    renderFlowList(maxLines) {
+        const { cyan, reset, dim, gray, green, yellow, red, bgGray } = UI.COLORS;
+        process.stdout.write(`  ${dim}Total: ${this.allFlows.length} flows${reset}\n\n`);
+        if (this.allFlows.length === 0) {
+            process.stdout.write(`  ${dim}No flows found.${reset}\n`);
             return;
         }
-        const status = this.getLaneStatus(lane.path, lane.name);
-        const processStatus = this.laneProcessStatuses.get(lane.name);
-        this.renderHeader('Lane Detail', [path.basename(this.runDir), lane.name]);
-        // Status grid
-        const statusColor = status.status === 'completed' ? UI.COLORS.green
-            : status.status === 'failed' ? UI.COLORS.red
-                : status.status === 'running' ? UI.COLORS.cyan : UI.COLORS.gray;
-        const actualStatus = processStatus?.actualStatus || status.status;
-        const isStale = processStatus?.isStale || false;
-        process.stdout.write(`\n`);
-        process.stdout.write(` ${UI.COLORS.dim}Status${UI.COLORS.reset}     ${statusColor}${this.getStatusIcon(actualStatus)} ${actualStatus.toUpperCase()}${UI.COLORS.reset}`);
-        if (isStale)
-            process.stdout.write(` ${UI.COLORS.yellow}(stale)${UI.COLORS.reset}`);
-        process.stdout.write(`\n`);
-        const pidDisplay = processStatus?.pid
-            ? `${processStatus.processRunning ? UI.COLORS.green : UI.COLORS.red}${processStatus.pid}${UI.COLORS.reset}`
-            : '-';
-        process.stdout.write(` ${UI.COLORS.dim}PID${UI.COLORS.reset}        ${pidDisplay}\n`);
-        process.stdout.write(` ${UI.COLORS.dim}Progress${UI.COLORS.reset}   ${status.currentTask}/${status.totalTasks} tasks (${status.progress})\n`);
-        process.stdout.write(` ${UI.COLORS.dim}Duration${UI.COLORS.reset}   ${this.formatDuration(processStatus?.duration || status.duration)}\n`);
-        process.stdout.write(` ${UI.COLORS.dim}Branch${UI.COLORS.reset}     ${status.pipelineBranch}\n`);
-        if (status.waitingFor && status.waitingFor.length > 0) {
-            process.stdout.write(` ${UI.COLORS.yellow}Waiting${UI.COLORS.reset}    ${status.waitingFor.join(', ')}\n`);
-        }
-        if (status.error) {
-            process.stdout.write(` ${UI.COLORS.red}Error${UI.COLORS.reset}      ${status.error}\n`);
-        }
-        // Live terminal preview
-        this.renderSectionTitle('Live Terminal', 'last 10 lines');
-        const logPath = (0, path_1.safeJoin)(lane.path, 'terminal-readable.log');
-        if (fs.existsSync(logPath)) {
-            const content = fs.readFileSync(logPath, 'utf8');
-            const lines = content.split('\n').slice(-10);
-            for (const line of lines) {
-                const formatted = this.formatTerminalLine(line);
-                process.stdout.write(` ${UI.COLORS.dim}${formatted.substring(0, this.screenWidth - 4)}${UI.COLORS.reset}\n`);
-            }
-        }
-        else {
-            process.stdout.write(` ${UI.COLORS.dim}(No output yet)${UI.COLORS.reset}\n`);
-        }
-        // Conversation preview
-        this.renderSectionTitle('Conversation', `${this.currentLogs.length} messages`);
-        const maxVisible = 8;
-        if (this.selectedMessageIndex < this.scrollOffset) {
-            this.scrollOffset = this.selectedMessageIndex;
-        }
-        else if (this.selectedMessageIndex >= this.scrollOffset + maxVisible) {
-            this.scrollOffset = this.selectedMessageIndex - maxVisible + 1;
-        }
-        if (this.currentLogs.length === 0) {
-            process.stdout.write(` ${UI.COLORS.dim}(No messages yet)${UI.COLORS.reset}\n`);
-        }
-        else {
-            const visibleLogs = this.currentLogs.slice(this.scrollOffset, this.scrollOffset + maxVisible);
-            visibleLogs.forEach((log, i) => {
-                const actualIndex = i + this.scrollOffset;
-                const isSelected = actualIndex === this.selectedMessageIndex;
-                const roleColor = this.getRoleColor(log.role);
-                const role = log.role.toUpperCase().padEnd(10);
-                const ts = new Date(log.timestamp).toLocaleTimeString('en-US', { hour12: false });
-                const prefix = isSelected ? `${UI.COLORS.cyan}▶${UI.COLORS.reset}` : ' ';
-                const bg = isSelected ? UI.COLORS.bgGray : '';
-                const reset = isSelected ? UI.COLORS.reset : '';
-                const preview = log.fullText.replace(/\n/g, ' ').substring(0, 60);
-                process.stdout.write(`${bg}${prefix} ${roleColor}${role}${UI.COLORS.reset} ${UI.COLORS.dim}${ts}${UI.COLORS.reset} ${preview}...${reset}\n`);
-            });
-            if (this.currentLogs.length > maxVisible) {
-                process.stdout.write(` ${UI.COLORS.dim}(${this.currentLogs.length - maxVisible} more messages)${UI.COLORS.reset}\n`);
-            }
+        // Header
+        process.stdout.write(`  ${dim}  # │ Status │ Run ID                           │ Lanes       │ Progress${reset}\n`);
+        process.stdout.write(`  ${dim}${'─'.repeat(80)}${reset}\n`);
+        // List
+        const visibleFlows = this.allFlows.slice(0, maxLines - 4);
+        visibleFlows.forEach((flow, i) => {
+            const isSelected = i === this.state.selectedFlowIndex;
+            const isCurrent = flow.runDir === this.runDir;
+            // Status
+            let statusIcon = '⚪';
+            if (flow.isAlive)
+                statusIcon = '🟢';
+            else if (flow.summary.completed === flow.summary.total && flow.summary.total > 0)
+                statusIcon = '✅';
+            else if (flow.summary.failed > 0)
+                statusIcon = '🔴';
+            // Lanes
+            const lanesSummary = [
+                flow.summary.running > 0 ? `${cyan}${flow.summary.running}R${reset}` : '',
+                flow.summary.completed > 0 ? `${green}${flow.summary.completed}C${reset}` : '',
+                flow.summary.failed > 0 ? `${red}${flow.summary.failed}F${reset}` : '',
+            ].filter(Boolean).join('/') || '-';
+            // Progress bar
+            const total = flow.summary.total || 1;
+            const ratio = flow.summary.completed / total;
+            const barWidth = 10;
+            const filled = Math.round(ratio * barWidth);
+            const progressBar = `${green}${'█'.repeat(filled)}${reset}${dim}${'░'.repeat(barWidth - filled)}${reset}`;
+            const pct = `${Math.round(ratio * 100)}%`;
+            // Row
+            const prefix = isSelected ? `${cyan}▶${reset}` : ' ';
+            const bg = isSelected ? bgGray : '';
+            const endBg = isSelected ? reset : '';
+            const currentTag = isCurrent ? ` ${cyan}●${reset}` : '';
+            const num = String(i + 1).padStart(2);
+            const runIdDisplay = flow.runId.padEnd(32).substring(0, 32);
+            process.stdout.write(`${bg}  ${prefix} ${num} │ ${statusIcon}      │ ${runIdDisplay} │ ${lanesSummary.padEnd(11 + 18)} │ ${progressBar} ${pct}${currentTag}${endBg}\n`);
+        });
+        if (this.allFlows.length > visibleFlows.length) {
+            process.stdout.write(`  ${dim}  ... and ${this.allFlows.length - visibleFlows.length} more${reset}\n`);
         }
-        this.renderFooter([
-            '[↑↓] Scroll', '[→/Enter] Full Msg', '[T] Terminal', '[I] Intervene', '[K] Kill', '[←/Esc] Back'
-        ]);
     }
-    getRoleColor(role) {
-        const colors = {
-            user: UI.COLORS.yellow,
-            assistant: UI.COLORS.green,
-            intervention: UI.COLORS.red,
-            system: UI.COLORS.cyan,
-        };
-        return colors[role] || UI.COLORS.gray;
-    }
-    renderMessageDetail() {
-        const log = this.currentLogs[this.selectedMessageIndex];
-        if (!log) {
-            this.view = View.LANE_DETAIL;
-            this.render();
+    renderUnifiedLog(maxLines) {
+        const { cyan, reset, dim, gray, green, yellow } = UI.COLORS;
+        // Status bar
+        const filterLabel = this.state.laneFilter || 'All';
+        const followLabel = this.state.unifiedLogFollowMode ? `${green}Follow ON${reset}` : `${yellow}Follow OFF${reset}`;
+        const formatLabel = this.state.readableLogFormat ? `${green}Readable${reset}` : `${dim}Compact${reset}`;
+        const totalEntries = this.unifiedLogBuffer?.getState().totalEntries || 0;
+        process.stdout.write(`  ${dim}Filter:${reset} ${cyan}${filterLabel}${reset}  │  ${followLabel}  │  ${yellow}[R]${reset} ${formatLabel}  │  ${dim}Total: ${totalEntries}${reset}\n\n`);
+        if (!this.unifiedLogBuffer) {
+            process.stdout.write(`  ${dim}No log buffer available${reset}\n`);
             return;
         }
-        this.renderHeader('Message Detail', [path.basename(this.runDir), this.selectedLaneName || '', log.role.toUpperCase()]);
-        const roleColor = this.getRoleColor(log.role);
-        const ts = new Date(log.timestamp).toLocaleString();
-        process.stdout.write(`\n`);
-        process.stdout.write(` ${UI.COLORS.dim}Role${UI.COLORS.reset}      ${roleColor}${log.role.toUpperCase()}${UI.COLORS.reset}\n`);
-        process.stdout.write(` ${UI.COLORS.dim}Time${UI.COLORS.reset}      ${ts}\n`);
-        if (log.model)
-            process.stdout.write(` ${UI.COLORS.dim}Model${UI.COLORS.reset}     ${log.model}\n`);
-        if (log.task)
-            process.stdout.write(` ${UI.COLORS.dim}Task${UI.COLORS.reset}      ${log.task}\n`);
-        this.renderSectionTitle('Content');
-        // Display message content with wrapping
-        const maxWidth = this.screenWidth - 4;
-        const lines = log.fullText.split('\n');
-        const maxLines = this.screenHeight - 16;
-        let lineCount = 0;
-        for (const line of lines) {
-            if (lineCount >= maxLines) {
-                process.stdout.write(` ${UI.COLORS.dim}... (truncated, ${lines.length - lineCount} more lines)${UI.COLORS.reset}\n`);
-                break;
-            }
-            // Word wrap long lines
-            if (line.length > maxWidth) {
-                const wrapped = this.wrapText(line, maxWidth);
-                for (const wl of wrapped) {
-                    if (lineCount >= maxLines)
-                        break;
-                    process.stdout.write(` ${wl}\n`);
-                    lineCount++;
-                }
-            }
-            else {
-                process.stdout.write(` ${line}\n`);
-                lineCount++;
-            }
+        const entries = this.unifiedLogBuffer.getEntries({
+            offset: this.state.unifiedLogScrollOffset,
+            limit: maxLines - 2,
+            filter: this.state.laneFilter ? { lane: this.state.laneFilter } : undefined,
+            fromEnd: true,
+        });
+        if (entries.length === 0) {
+            process.stdout.write(`  ${dim}No log entries${reset}\n`);
+            return;
         }
-        this.renderFooter(['[←/Esc] Back']);
-    }
-    /**
-     * Wrap text to specified width
-     */
-    wrapText(text, maxWidth) {
-        const words = text.split(' ');
-        const lines = [];
-        let currentLine = '';
-        for (const word of words) {
-            if (currentLine.length + word.length + 1 <= maxWidth) {
-                currentLine += (currentLine ? ' ' : '') + word;
+        for (const entry of entries) {
+            const ts = entry.timestamp.toLocaleTimeString('en-US', { hour12: false });
+            const typeInfo = this.getLogTypeInfo(entry.type || 'info');
+            if (this.state.readableLogFormat) {
+                // Readable format: more context, wider lane name
+                const lane = entry.laneName.substring(0, 12).padEnd(12);
+                const preview = entry.message.replace(/\n/g, ' ').substring(0, this.screenWidth - 45);
+                process.stdout.write(`  ${dim}[${ts}]${reset} ${entry.laneColor}[${lane}]${reset} ${typeInfo.color}[${typeInfo.label}]${reset} ${preview}\n`);
             }
             else {
-                if (currentLine)
-                    lines.push(currentLine);
-                currentLine = word;
+                // Compact format: shorter, for quick scanning
+                const lane = entry.laneName.substring(0, 8).padEnd(8);
+                const typeShort = (entry.type || 'info').substring(0, 4).toUpperCase();
+                const preview = entry.message.replace(/\n/g, ' ').substring(0, this.screenWidth - 35);
+                process.stdout.write(`  ${dim}${ts}${reset} ${entry.laneColor}${lane}${reset} ${typeInfo.color}${typeShort}${reset} ${preview}\n`);
             }
         }
-        if (currentLine)
-            lines.push(currentLine);
-        return lines;
     }
-    renderFlow() {
-        this.renderHeader('Dependency Flow', [path.basename(this.runDir), 'Flow']);
-        const laneMap = new Map();
-        this.lanes.forEach(lane => {
-            laneMap.set(lane.name, this.getLaneStatus(lane.path, lane.name));
-        });
-        process.stdout.write('\n');
-        // Group lanes by dependency level
-        const levels = this.calculateDependencyLevels();
-        const maxLevelWidth = Math.max(...levels.map(l => l.length));
-        for (let level = 0; level < levels.length; level++) {
-            const lanesAtLevel = levels[level];
-            // Level header
-            process.stdout.write(` ${UI.COLORS.dim}Level ${level}${UI.COLORS.reset}\n`);
-            for (const laneName of lanesAtLevel) {
-                const status = laneMap.get(laneName);
-                const statusIcon = this.getStatusIcon(status?.status || 'pending');
-                let statusColor = UI.COLORS.gray;
-                if (status?.status === 'completed')
-                    statusColor = UI.COLORS.green;
-                else if (status?.status === 'running')
-                    statusColor = UI.COLORS.cyan;
-                else if (status?.status === 'failed')
-                    statusColor = UI.COLORS.red;
-                // Render the node
-                const nodeText = `${statusIcon} ${laneName}`;
-                process.stdout.write(`   ${statusColor}${nodeText.padEnd(20)}${UI.COLORS.reset}`);
-                // Show task-level dependencies if waiting
-                if (status?.waitingFor?.length > 0) {
-                    process.stdout.write(` ${UI.COLORS.dim}←${UI.COLORS.reset} ${UI.COLORS.yellow}${status.waitingFor.join(', ')}${UI.COLORS.reset}`);
-                }
-                process.stdout.write('\n');
-            }
-            if (level < levels.length - 1) {
-                process.stdout.write(`   ${UI.COLORS.dim}│${UI.COLORS.reset}\n`);
-                process.stdout.write(`   ${UI.COLORS.dim}▼${UI.COLORS.reset}\n`);
-            }
-        }
-        process.stdout.write(`\n ${UI.COLORS.dim}Tasks can wait for other tasks using task-level dependencies${UI.COLORS.reset}\n`);
-        this.renderFooter(['[←/Esc] Back']);
-    }
-    /**
-     * Calculate levels for visualization (all lanes run in parallel now)
-     */
-    calculateDependencyLevels() {
-        // Since lane-level dependencies are removed, all lanes can run in parallel
-        // Group them into a single level
-        if (this.lanes.length === 0) {
-            return [];
-        }
-        return [this.lanes.map(l => l.name)];
-    }
-    renderTerminal() {
-        const lane = this.lanes.find(l => l.name === this.selectedLaneName);
+    renderDetail() {
+        const w = this.screenWidth;
+        const h = this.screenHeight;
+        const { cyan, reset, bold, dim, gray, green, yellow, red } = UI.COLORS;
+        const lane = this.lanes.find(l => l.name === this.state.selectedLaneName);
         if (!lane) {
-            this.view = View.LIST;
+            this.state.level = Level.DASHBOARD;
             this.render();
             return;
         }
-        this.renderHeader('Live Terminal', [path.basename(this.runDir), lane.name, 'Terminal']);
-        // Get logs based on format mode
-        let logLines = [];
-        let totalLines = 0;
-        if (this.readableFormat) {
-            // Use JSONL for readable format
-            const jsonlPath = (0, path_1.safeJoin)(lane.path, 'terminal.jsonl');
-            logLines = this.getReadableLogLines(jsonlPath, lane.name);
-            totalLines = logLines.length;
-        }
-        else {
-            // Use readable log
-            const logPath = (0, path_1.safeJoin)(lane.path, 'terminal-readable.log');
-            if (fs.existsSync(logPath)) {
-                const content = fs.readFileSync(logPath, 'utf8');
-                logLines = content.split('\n');
-                totalLines = logLines.length;
-            }
-        }
-        const maxVisible = this.screenHeight - 10;
-        // Follow mode logic
-        if (this.followMode) {
-            this.terminalScrollOffset = 0;
+        const status = this.getLaneStatus(lane.path, lane.name);
+        const processStatus = this.laneProcessStatuses.get(lane.name);
+        // Header
+        const hLine = UI.CHARS.hLine.repeat(w);
+        const statusColor = status.status === 'running' ? cyan : status.status === 'completed' ? green : status.status === 'failed' ? red : gray;
+        const statusIcon = this.getStatusIcon(status.status);
+        process.stdout.write(`${cyan}${hLine}${reset}\n`);
+        process.stdout.write(`  ${dim}←${reset} back  │  ${bold}🔧 ${lane.name}${reset}  │  ${statusColor}${statusIcon} ${status.status.toUpperCase()}${reset}  │  ${status.currentTask}/${status.totalTasks} tasks  │  ${this.formatDuration(processStatus?.duration || status.duration)}\n`);
+        process.stdout.write(`${cyan}${hLine}${reset}\n`);
+        // Split panel
+        const panelWidth = Math.floor((w - 3) / 2);
+        const contentHeight = h - 8;
+        // Panel headers
+        const leftActive = this.state.currentPanel === Panel.LEFT;
+        const rightActive = this.state.currentPanel === Panel.RIGHT;
+        const leftHeader = leftActive ? `${cyan}${UI.ICONS.arrow} Terminal Log${reset}` : `${dim}  Terminal Log${reset}`;
+        const rightHeader = rightActive ? `${cyan}${UI.ICONS.arrow} Conversation${reset}` : `${dim}  Conversation${reset}`;
+        process.stdout.write(`${leftHeader.padEnd(panelWidth + 10)} │ ${rightHeader}\n`);
+        process.stdout.write(`${UI.CHARS.hLineLight.repeat(panelWidth)} ${UI.CHARS.tee.top} ${UI.CHARS.hLineLight.repeat(panelWidth)}\n`);
+        // Get content
+        const terminalLines = this.getTerminalLines(lane.path, contentHeight);
+        const messageLines = this.getMessageLines(contentHeight);
+        // Render side by side
+        for (let i = 0; i < contentHeight; i++) {
+            const termLine = (terminalLines[i] || '').substring(0, panelWidth - 2);
+            const msgLine = (messageLines[i] || '').substring(0, panelWidth - 2);
+            const termPadded = this.padWithAnsi(termLine, panelWidth - 1);
+            const msgPadded = this.padWithAnsi(msgLine, panelWidth - 1);
+            process.stdout.write(`${termPadded} ${dim}│${reset} ${msgPadded}\n`);
+        }
+        // Notification
+        if (this.state.notification) {
+            const nColor = this.state.notification.type === 'error' ? red
+                : this.state.notification.type === 'success' ? green : cyan;
+            process.stdout.write(`${nColor}  🔔 ${this.state.notification.message}${reset}\n`);
         }
         else {
-            if (this.lastTerminalTotalLines > 0 && totalLines > this.lastTerminalTotalLines) {
-                this.unseenLineCount += (totalLines - this.lastTerminalTotalLines);
-                this.terminalScrollOffset += (totalLines - this.lastTerminalTotalLines);
-            }
+            process.stdout.write('\n');
         }
-        this.lastTerminalTotalLines = totalLines;
-        // Clamp scroll offset
-        const maxScroll = Math.max(0, totalLines - maxVisible);
-        if (this.terminalScrollOffset > maxScroll) {
-            this.terminalScrollOffset = maxScroll;
-        }
-        // Mode and status indicators
-        const formatMode = this.readableFormat
-            ? `${UI.COLORS.green}[R] Readable ✓${UI.COLORS.reset}`
-            : `${UI.COLORS.dim}[R] Raw${UI.COLORS.reset}`;
-        const followStatus = this.followMode
-            ? `${UI.COLORS.green}[F] Follow ✓${UI.COLORS.reset}`
-            : `${UI.COLORS.yellow}[F] Follow OFF${this.unseenLineCount > 0 ? ` (↓${this.unseenLineCount})` : ''}${UI.COLORS.reset}`;
-        process.stdout.write(` ${formatMode}  ${followStatus}  ${UI.COLORS.dim}Lines: ${totalLines}${UI.COLORS.reset}\n\n`);
-        // Slice based on scroll (0 means bottom, >0 means scrolled up)
-        const end = totalLines - this.terminalScrollOffset;
-        const start = Math.max(0, end - maxVisible);
-        const visibleLines = logLines.slice(start, end);
-        for (const line of visibleLines) {
-            const formatted = this.readableFormat ? line : this.formatTerminalLine(line);
-            // Truncate to screen width
-            const displayLine = formatted.length > this.screenWidth - 2
-                ? formatted.substring(0, this.screenWidth - 5) + '...'
-                : formatted;
-            process.stdout.write(` ${displayLine}\n`);
-        }
-        if (visibleLines.length === 0) {
-            process.stdout.write(` ${UI.COLORS.dim}(No output yet)${UI.COLORS.reset}\n`);
-        }
-        this.renderFooter([
-            '[↑↓] Scroll', '[F] Follow', '[R] Toggle Readable', '[I] Intervene', '[←/Esc] Back'
-        ]);
+        // Footer
+        process.stdout.write(`${cyan}${hLine}${reset}\n`);
+        const followStatus = this.state.followMode ? `${green}ON${reset}` : `${yellow}OFF${reset}`;
+        const formatStatus = this.state.readableFormat ? `${green}Readable${reset}` : `${dim}Raw${reset}`;
+        process.stdout.write(`  ${yellow}[←]${reset} Back  ${yellow}[→]${reset} Panel  ${yellow}[↑/↓]${reset} Scroll  ${yellow}[Space]${reset} Follow:${followStatus}  ${yellow}[R]${reset} ${formatStatus}  ${yellow}[Enter]${reset} Action  ${yellow}[?]${reset} Help\n`);
     }
-    /**
-     * Format a raw terminal line with syntax highlighting
-     */
-    formatTerminalLine(line) {
-        // Highlight patterns
-        if (line.includes('[HUMAN INTERVENTION]') || line.includes('Injecting intervention:')) {
-            return `${UI.COLORS.yellow}${UI.COLORS.bold}${line}${UI.COLORS.reset}`;
-        }
-        if (line.includes('Executing cursor-agent')) {
-            return `${UI.COLORS.cyan}${UI.COLORS.bold}${line}${UI.COLORS.reset}`;
+    getTerminalLines(lanePath, maxLines) {
+        const { dim, reset, cyan, green, yellow, red, gray } = UI.COLORS;
+        // Choose log source based on format setting
+        if (this.state.readableFormat) {
+            // Try JSONL first for structured readable format
+            const jsonlPath = (0, path_1.safeJoin)(lanePath, 'terminal.jsonl');
+            if (fs.existsSync(jsonlPath)) {
+                return this.getJsonlLogLines(jsonlPath, maxLines);
+            }
         }
-        if (line.includes('=== Task:') || line.includes('Starting task:')) {
-            return `${UI.COLORS.green}${UI.COLORS.bold}${line}${UI.COLORS.reset}`;
+        // Fallback to raw terminal log
+        const logPath = (0, path_1.safeJoin)(lanePath, 'terminal-readable.log');
+        if (!fs.existsSync(logPath)) {
+            return [`${dim}(No output yet)${reset}`];
         }
-        if (line.toLowerCase().includes('error') || line.toLowerCase().includes('failed')) {
-            return `${UI.COLORS.red}${line}${UI.COLORS.reset}`;
+        try {
+            const content = fs.readFileSync(logPath, 'utf8');
+            const allLines = content.split('\n');
+            const totalLines = allLines.length;
+            // Calculate visible range (from end, accounting for scroll offset)
+            const end = Math.max(0, totalLines - this.state.terminalScrollOffset);
+            const start = Math.max(0, end - maxLines);
+            const visibleLines = allLines.slice(start, end);
+            // Format lines with syntax highlighting
+            return visibleLines.map(line => {
+                if (line.includes('[HUMAN INTERVENTION]') || line.includes('Injecting intervention:')) {
+                    return `${yellow}${line}${reset}`;
+                }
+                if (line.includes('=== Task:') || line.includes('Starting task:')) {
+                    return `${green}${line}${reset}`;
+                }
+                if (line.includes('Executing cursor-agent') || line.includes('cursor-agent-v')) {
+                    return `${cyan}${line}${reset}`;
+                }
+                if (line.toLowerCase().includes('error') || line.toLowerCase().includes('failed')) {
+                    return `${red}${line}${reset}`;
+                }
+                if (line.toLowerCase().includes('success') || line.toLowerCase().includes('completed')) {
+                    return `${green}${line}${reset}`;
+                }
+                return line;
+            });
         }
-        if (line.toLowerCase().includes('success') || line.toLowerCase().includes('completed')) {
-            return `${UI.COLORS.green}${line}${UI.COLORS.reset}`;
+        catch {
+            return [`${dim}(Error reading log)${reset}`];
         }
-        return line;
     }
     /**
-     * Get readable log lines from JSONL file
+     * Get structured log lines from JSONL file
      */
-    getReadableLogLines(jsonlPath, laneName) {
-        if (!fs.existsSync(jsonlPath)) {
-            // Fallback: try to read raw log
-            const rawPath = jsonlPath.replace('.jsonl', '.log');
-            if (fs.existsSync(rawPath)) {
-                return fs.readFileSync(rawPath, 'utf8').split('\n').map(l => this.formatTerminalLine(l));
-            }
-            return [];
-        }
+    getJsonlLogLines(jsonlPath, maxLines) {
+        const { dim, reset, cyan, green, yellow, red, gray } = UI.COLORS;
         try {
             const content = fs.readFileSync(jsonlPath, 'utf8');
-            const lines = content.split('\n').filter(l => l.trim());
-            return lines.map(line => {
+            const allLines = content.split('\n').filter(l => l.trim());
+            const totalLines = allLines.length;
+            // Calculate visible range
+            const end = Math.max(0, totalLines - this.state.terminalScrollOffset);
+            const start = Math.max(0, end - maxLines);
+            const visibleLines = allLines.slice(start, end);
+            return visibleLines.map(line => {
                 try {
                     const entry = JSON.parse(line);
                     const ts = new Date(entry.timestamp || Date.now()).toLocaleTimeString('en-US', { hour12: false });
                     const type = (entry.type || 'info').toLowerCase();
-                    const content = entry.content || entry.message || '';
-                    // Format based on type
+                    const content = (entry.content || entry.message || '').replace(/\n/g, ' ');
                     const typeInfo = this.getLogTypeInfo(type);
-                    const preview = content.replace(/\n/g, ' ').substring(0, 100);
-                    return `${UI.COLORS.dim}[${ts}]${UI.COLORS.reset} ${typeInfo.color}[${typeInfo.label}]${UI.COLORS.reset} ${preview}`;
+                    return `${gray}[${ts}]${reset} ${typeInfo.color}[${typeInfo.label}]${reset} ${content}`;
                 }
                 catch {
-                    return this.formatTerminalLine(line);
+                    return `${gray}${line}${reset}`;
                 }
             });
         }
         catch {
-            return [];
-        }
-    }
-    /**
-     * Get log type display info
-     */
-    getLogTypeInfo(type) {
-        const typeMap = {
-            user: { label: 'USER  ', color: UI.COLORS.cyan },
-            assistant: { label: 'ASST  ', color: UI.COLORS.green },
-            tool: { label: 'TOOL  ', color: UI.COLORS.yellow },
-            tool_result: { label: 'RESULT', color: UI.COLORS.gray },
-            result: { label: 'DONE  ', color: UI.COLORS.green },
-            system: { label: 'SYSTEM', color: UI.COLORS.gray },
-            thinking: { label: 'THINK ', color: UI.COLORS.dim },
-            error: { label: 'ERROR ', color: UI.COLORS.red },
-            stderr: { label: 'STDERR', color: UI.COLORS.red },
-            stdout: { label: 'STDOUT', color: UI.COLORS.white },
-        };
-        return typeMap[type] || { label: type.toUpperCase().padEnd(6).substring(0, 6), color: UI.COLORS.gray };
-    }
-    renderIntervene() {
-        this.renderHeader('Human Intervention', [path.basename(this.runDir), this.selectedLaneName || '', 'Intervene']);
-        process.stdout.write(`\n`);
-        process.stdout.write(` ${UI.COLORS.yellow}Send a message directly to the agent.${UI.COLORS.reset}\n`);
-        process.stdout.write(` ${UI.COLORS.dim}This will interrupt the current flow and inject your instruction.${UI.COLORS.reset}\n\n`);
-        // Input box
-        const width = Math.min(this.screenWidth - 8, 80);
-        process.stdout.write(` ${UI.COLORS.cyan}┌${'─'.repeat(width)}┐${UI.COLORS.reset}\n`);
-        // Wrap input text
-        const inputLines = this.wrapText(this.interventionInput || ' ', width - 4);
-        for (const line of inputLines) {
-            process.stdout.write(` ${UI.COLORS.cyan}│${UI.COLORS.reset} ${line.padEnd(width - 2)} ${UI.COLORS.cyan}│${UI.COLORS.reset}\n`);
-        }
-        if (inputLines.length === 0 || inputLines[inputLines.length - 1] === ' ') {
-            process.stdout.write(` ${UI.COLORS.cyan}│${UI.COLORS.reset} ${UI.COLORS.white}█${UI.COLORS.reset}${' '.repeat(width - 3)} ${UI.COLORS.cyan}│${UI.COLORS.reset}\n`);
-        }
-        process.stdout.write(` ${UI.COLORS.cyan}└${'─'.repeat(width)}┘${UI.COLORS.reset}\n`);
-        this.renderFooter(['[Enter] Send', '[Esc] Cancel']);
-    }
-    renderTimeout() {
-        this.renderHeader('Update Timeout', [path.basename(this.runDir), this.selectedLaneName || '', 'Timeout']);
-        process.stdout.write(`\n`);
-        process.stdout.write(` ${UI.COLORS.yellow}Update the task timeout for this lane.${UI.COLORS.reset}\n`);
-        process.stdout.write(` ${UI.COLORS.dim}Enter timeout in milliseconds (e.g., 600000 = 10 minutes)${UI.COLORS.reset}\n\n`);
-        // Common presets
-        process.stdout.write(` ${UI.COLORS.dim}Presets: 300000 (5m) | 600000 (10m) | 1800000 (30m) | 3600000 (1h)${UI.COLORS.reset}\n\n`);
-        // Input box
-        const width = 40;
-        process.stdout.write(` ${UI.COLORS.cyan}┌${'─'.repeat(width)}┐${UI.COLORS.reset}\n`);
-        process.stdout.write(` ${UI.COLORS.cyan}│${UI.COLORS.reset} ${(this.timeoutInput || '').padEnd(width - 2)}${UI.COLORS.white}█${UI.COLORS.reset} ${UI.COLORS.cyan}│${UI.COLORS.reset}\n`);
-        process.stdout.write(` ${UI.COLORS.cyan}└${'─'.repeat(width)}┘${UI.COLORS.reset}\n`);
-        // Show human-readable interpretation
-        if (this.timeoutInput) {
-            const ms = parseInt(this.timeoutInput);
-            if (!isNaN(ms) && ms > 0) {
-                const formatted = this.formatDuration(ms);
-                process.stdout.write(`\n ${UI.COLORS.green}= ${formatted}${UI.COLORS.reset}\n`);
-            }
+            return [`${dim}(Error reading log)${reset}`];
         }
-        this.renderFooter(['[Enter] Apply', '[Esc] Cancel']);
     }
-    /**
-     * Render unified log view - all lanes combined
-     */
-    renderUnifiedLog() {
-        this.renderHeader('Unified Logs', [path.basename(this.runDir), 'All Lanes']);
-        const bufferState = this.unifiedLogBuffer?.getState();
-        const totalEntries = bufferState?.totalEntries || 0;
-        const availableLanes = bufferState?.lanes || [];
-        // Status bar
-        const formatMode = this.readableFormat
-            ? `${UI.COLORS.green}[R] Readable ✓${UI.COLORS.reset}`
-            : `${UI.COLORS.dim}[R] Compact${UI.COLORS.reset}`;
-        const followStatus = this.unifiedLogFollowMode
-            ? `${UI.COLORS.green}[F] Follow ✓${UI.COLORS.reset}`
-            : `${UI.COLORS.yellow}[F] Follow OFF${UI.COLORS.reset}`;
-        const filterStatus = this.laneFilter
-            ? `${UI.COLORS.cyan}[L] ${this.laneFilter}${UI.COLORS.reset}`
-            : `${UI.COLORS.dim}[L] All Lanes${UI.COLORS.reset}`;
-        process.stdout.write(` ${formatMode}  ${followStatus}  ${filterStatus}  ${UI.COLORS.dim}Total: ${totalEntries}${UI.COLORS.reset}\n`);
-        // Lane list for filtering hint
-        if (availableLanes.length > 1) {
-            process.stdout.write(` ${UI.COLORS.dim}Lanes: ${availableLanes.join(', ')}${UI.COLORS.reset}\n`);
-        }
-        process.stdout.write('\n');
-        if (!this.unifiedLogBuffer) {
-            process.stdout.write(` ${UI.COLORS.dim}(No log buffer available)${UI.COLORS.reset}\n`);
-            this.renderFooter(['[U/Esc] Back', '[Q] Quit']);
-            return;
-        }
-        const pageSize = this.screenHeight - 12;
-        const filter = this.laneFilter ? { lane: this.laneFilter } : undefined;
-        const entries = this.unifiedLogBuffer.getEntries({
-            offset: this.unifiedLogScrollOffset,
-            limit: pageSize,
-            filter,
-            fromEnd: true,
-        });
-        if (entries.length === 0) {
-            process.stdout.write(` ${UI.COLORS.dim}(No log entries yet)${UI.COLORS.reset}\n`);
-        }
-        else {
-            for (const entry of entries) {
-                const formatted = this.formatUnifiedLogEntry(entry);
-                const displayLine = formatted.length > this.screenWidth - 2
-                    ? formatted.substring(0, this.screenWidth - 5) + '...'
-                    : formatted;
-                process.stdout.write(` ${displayLine}\n`);
-            }
-        }
-        this.renderFooter([
-            '[↑↓/PgUp/PgDn] Scroll', '[F] Follow', '[R] Readable', '[L] Filter Lane', '[U/Esc] Back'
-        ]);
-    }
-    /**
-     * Format a unified log entry
-     */
-    formatUnifiedLogEntry(entry) {
-        const ts = entry.timestamp.toLocaleTimeString('en-US', { hour12: false });
-        const lane = entry.laneName.padEnd(12);
-        const typeInfo = this.getLogTypeInfo(entry.type || 'info');
-        if (this.readableFormat) {
-            // Readable format: show more context
-            const content = entry.message.replace(/\n/g, ' ');
-            return `${UI.COLORS.dim}[${ts}]${UI.COLORS.reset} ${entry.laneColor}[${lane}]${UI.COLORS.reset} ${typeInfo.color}[${typeInfo.label}]${UI.COLORS.reset} ${content}`;
-        }
-        else {
-            // Compact format
-            const preview = entry.message.replace(/\n/g, ' ').substring(0, 60);
-            return `${UI.COLORS.dim}${ts}${UI.COLORS.reset} ${entry.laneColor}${entry.laneName.substring(0, 8).padEnd(8)}${UI.COLORS.reset} ${typeInfo.color}${typeInfo.label.trim().substring(0, 4)}${UI.COLORS.reset} ${preview}`;
+    getMessageLines(maxLines) {
+        const { dim, reset, cyan, green, yellow, gray } = UI.COLORS;
+        if (this.currentLogs.length === 0) {
+            return [`${dim}(No messages yet)${reset}`];
         }
-    }
-    /**
-     * Render multiple flows dashboard
-     */
-    renderFlowsDashboard() {
-        this.renderHeader('All Flows', ['Flows Dashboard']);
-        process.stdout.write(` ${UI.COLORS.dim}Total: ${this.allFlows.length} flows${UI.COLORS.reset}\n\n`);
-        if (this.allFlows.length === 0) {
-            process.stdout.write(` ${UI.COLORS.dim}No flow runs found.${UI.COLORS.reset}\n\n`);
-            process.stdout.write(` Run ${UI.COLORS.cyan}cursorflow run${UI.COLORS.reset} to start a new flow.\n`);
-            this.renderFooter(['[M/Esc] Back', '[Q] Quit']);
-            return;
+        const lines = [];
+        const start = this.state.messageScrollOffset;
+        const visibleLogs = this.currentLogs.slice(start, start + Math.floor(maxLines / 3));
+        for (const log of visibleLogs) {
+            const roleColor = log.role === 'user' ? yellow : log.role === 'assistant' ? green : cyan;
+            const ts = new Date(log.timestamp).toLocaleTimeString('en-US', { hour12: false });
+            lines.push(`${roleColor}[${ts}] ${log.role.toUpperCase()}${reset}`);
+            const preview = log.fullText.replace(/\n/g, ' ').substring(0, 60);
+            lines.push(`${dim}${preview}...${reset}`);
+            lines.push('');
+        }
+        if (this.currentLogs.length > visibleLogs.length + start) {
+            lines.push(`${dim}... ${this.currentLogs.length - visibleLogs.length - start} more${reset}`);
         }
-        // Header
-        process.stdout.write(`    ${'Status'.padEnd(8)}  ${'Run ID'.padEnd(32)}  ${'Lanes'.padEnd(12)}  Progress\n`);
-        process.stdout.write(`    ${'─'.repeat(8)}  ${'─'.repeat(32)}  ${'─'.repeat(12)}  ${'─'.repeat(20)}\n`);
-        const maxVisible = this.screenHeight - 14;
-        const startIdx = Math.max(0, this.selectedFlowIndex - Math.floor(maxVisible / 2));
-        const endIdx = Math.min(this.allFlows.length, startIdx + maxVisible);
-        for (let i = startIdx; i < endIdx; i++) {
-            const flow = this.allFlows[i];
-            const isSelected = i === this.selectedFlowIndex;
-            const isCurrent = flow.runDir === this.runDir;
-            // Status icon based on flow state
-            let statusIcon = '⚪';
-            if (flow.isAlive) {
-                statusIcon = '🟢';
-            }
-            else if (flow.summary.completed === flow.summary.total && flow.summary.total > 0) {
-                statusIcon = '✅';
-            }
-            else if (flow.summary.failed > 0 || flow.summary.dead > 0) {
-                statusIcon = '🔴';
-            }
-            // Lanes summary
-            const lanesSummary = [
-                flow.summary.running > 0 ? `${UI.COLORS.cyan}${flow.summary.running}R${UI.COLORS.reset}` : '',
-                flow.summary.completed > 0 ? `${UI.COLORS.green}${flow.summary.completed}C${UI.COLORS.reset}` : '',
-                flow.summary.failed > 0 ? `${UI.COLORS.red}${flow.summary.failed}F${UI.COLORS.reset}` : '',
-                flow.summary.dead > 0 ? `${UI.COLORS.yellow}${flow.summary.dead}D${UI.COLORS.reset}` : '',
-            ].filter(Boolean).join('/') || '0';
-            // Progress bar
-            const total = flow.summary.total || 1;
-            const completed = flow.summary.completed;
-            const ratio = completed / total;
-            const barWidth = 12;
-            const filled = Math.round(ratio * barWidth);
-            const progressBar = `${UI.COLORS.green}${'█'.repeat(filled)}${UI.COLORS.reset}${UI.COLORS.gray}${'░'.repeat(barWidth - filled)}${UI.COLORS.reset}`;
-            const pct = `${Math.round(ratio * 100)}%`;
-            // Display
-            const prefix = isSelected ? ` ${UI.COLORS.cyan}▶${UI.COLORS.reset} ` : '   ';
-            const currentTag = isCurrent ? ` ${UI.COLORS.cyan}●${UI.COLORS.reset}` : '';
-            const bg = isSelected ? UI.COLORS.bgGray : '';
-            const resetBg = isSelected ? UI.COLORS.reset : '';
-            // Truncate run ID if needed
-            const runIdDisplay = flow.runId.length > 30 ? flow.runId.substring(0, 27) + '...' : flow.runId.padEnd(30);
-            process.stdout.write(`${bg}${prefix}${statusIcon}       ${runIdDisplay}  ${lanesSummary.padEnd(12 + 30)}  ${progressBar} ${pct}${currentTag}${resetBg}\n`);
-        }
-        if (this.allFlows.length > maxVisible) {
-            process.stdout.write(`\n ${UI.COLORS.dim}(${this.allFlows.length - maxVisible} more flows, scroll to see)${UI.COLORS.reset}\n`);
-        }
-        this.renderFooter([
-            '[↑↓] Select', '[→/Enter] Switch', '[D] Delete', '[R] Refresh', '[M/Esc] Back', '[Q] Quit'
-        ]);
+        return lines;
     }
-    listLanesWithDeps(runDir) {
-        const lanesDir = (0, path_1.safeJoin)(runDir, 'lanes');
-        if (!fs.existsSync(lanesDir))
-            return [];
-        const config = (0, config_1.loadConfig)();
-        const tasksDir = (0, path_1.safeJoin)(config.projectRoot, config.tasksDir);
-        const laneConfigs = this.listLaneFilesFromDir(tasksDir);
-        return fs.readdirSync(lanesDir)
-            .filter(d => fs.statSync((0, path_1.safeJoin)(lanesDir, d)).isDirectory())
-            .map(name => {
-            return {
-                name,
-                path: (0, path_1.safeJoin)(lanesDir, name),
-            };
+    renderActionMenu() {
+        const { cyan, reset, bold, dim, gray, bgGray, yellow, red } = UI.COLORS;
+        const menuWidth = 36;
+        const menuHeight = this.state.actionItems.length + 4;
+        const startX = Math.floor((this.screenWidth - menuWidth) / 2);
+        const startY = Math.floor((this.screenHeight - menuHeight) / 2);
+        // Move cursor and draw menu
+        const targetName = this.state.selectedLaneName || 'Item';
+        // Top border
+        process.stdout.write(`\x1b[${startY};${startX}H`);
+        process.stdout.write(`${cyan}┌${'─'.repeat(menuWidth - 2)}┐${reset}`);
+        // Title
+        process.stdout.write(`\x1b[${startY + 1};${startX}H`);
+        const title = ` 📋 Actions: ${targetName}`.substring(0, menuWidth - 4);
+        process.stdout.write(`${cyan}│${reset}${bold}${title.padEnd(menuWidth - 2)}${reset}${cyan}│${reset}`);
+        // Separator
+        process.stdout.write(`\x1b[${startY + 2};${startX}H`);
+        process.stdout.write(`${cyan}├${'─'.repeat(menuWidth - 2)}┤${reset}`);
+        // Items
+        this.state.actionItems.forEach((item, i) => {
+            process.stdout.write(`\x1b[${startY + 3 + i};${startX}H`);
+            const isSelected = i === this.state.selectedActionIndex;
+            const prefix = isSelected ? `${cyan}▶${reset}` : ' ';
+            const num = `${i + 1}.`;
+            const bg = isSelected ? bgGray : '';
+            const endBg = isSelected ? reset : '';
+            const itemColor = item.disabled ? dim : reset;
+            const label = `${item.icon} ${item.label}`;
+            process.stdout.write(`${cyan}│${reset}${bg} ${prefix} ${num} ${itemColor}${label.padEnd(menuWidth - 9)}${reset}${endBg}${cyan}│${reset}`);
         });
+        // Bottom border
+        process.stdout.write(`\x1b[${startY + 3 + this.state.actionItems.length};${startX}H`);
+        process.stdout.write(`${cyan}├${'─'.repeat(menuWidth - 2)}┤${reset}`);
+        // Help
+        process.stdout.write(`\x1b[${startY + 4 + this.state.actionItems.length};${startX}H`);
+        process.stdout.write(`${cyan}│${reset}${dim} [↑/↓] Select  [Enter] OK  [Esc] Cancel${reset.padEnd(menuWidth - 41)}${cyan}│${reset}`);
+        process.stdout.write(`\x1b[${startY + 5 + this.state.actionItems.length};${startX}H`);
+        process.stdout.write(`${cyan}└${'─'.repeat(menuWidth - 2)}┘${reset}`);
     }
-    listLaneFilesFromDir(tasksDir) {
-        if (!fs.existsSync(tasksDir))
-            return [];
-        return fs.readdirSync(tasksDir)
-            .filter(f => f.endsWith('.json'))
-            .map(f => {
-            const filePath = (0, path_1.safeJoin)(tasksDir, f);
-            try {
-                return { name: path.basename(f, '.json') };
-            }
-            catch {
-                return { name: path.basename(f, '.json') };
-            }
-        });
-    }
-    getLaneStatus(lanePath, _laneName) {
-        const statePath = (0, path_1.safeJoin)(lanePath, 'state.json');
-        const state = (0, state_1.loadState)(statePath);
-        if (!state) {
-            return { status: 'pending', currentTask: 0, totalTasks: '?', progress: '0%', duration: 0, pipelineBranch: '-', chatId: '-' };
-        }
-        const progress = state.totalTasks > 0 ? Math.round((state.currentTaskIndex / state.totalTasks) * 100) : 0;
-        const duration = state.startTime ? (state.endTime
-            ? state.endTime - state.startTime
-            : (state.status === 'running' || state.status === 'reviewing' ? Date.now() - state.startTime : 0)) : 0;
-        return {
-            status: state.status || 'unknown',
-            currentTask: state.currentTaskIndex || 0,
-            totalTasks: state.totalTasks || '?',
-            progress: `${progress}%`,
-            pipelineBranch: state.pipelineBranch || '-',
-            chatId: state.chatId || '-',
-            duration,
-            error: state.error,
-            pid: state.pid,
-            waitingFor: state.waitingFor || [],
-        };
+    renderInputOverlay() {
+        const { cyan, reset, bold, dim, yellow } = UI.COLORS;
+        const boxWidth = Math.min(70, this.screenWidth - 10);
+        const startX = Math.floor((this.screenWidth - boxWidth) / 2);
+        const startY = this.screenHeight - 6;
+        const title = this.state.inputMode === 'message'
+            ? `💬 Message to ${this.state.inputTarget}:`
+            : `⏱️ Timeout (ms) for ${this.state.inputTarget}:`;
+        const hint = this.state.inputMode === 'timeout'
+            ? 'Presets: 300000 (5m) | 600000 (10m) | 1800000 (30m)'
+            : 'Type your message and press Enter';
+        // Background box
+        process.stdout.write(`\x1b[${startY};${startX}H`);
+        process.stdout.write(`${cyan}┌${'─'.repeat(boxWidth - 2)}┐${reset}`);
+        process.stdout.write(`\x1b[${startY + 1};${startX}H`);
+        process.stdout.write(`${cyan}│${reset} ${bold}${title.padEnd(boxWidth - 4)}${reset} ${cyan}│${reset}`);
+        process.stdout.write(`\x1b[${startY + 2};${startX}H`);
+        process.stdout.write(`${cyan}│${reset} ${dim}${hint.padEnd(boxWidth - 4)}${reset} ${cyan}│${reset}`);
+        process.stdout.write(`\x1b[${startY + 3};${startX}H`);
+        const inputDisplay = this.state.inputBuffer.substring(0, boxWidth - 6) + '█';
+        process.stdout.write(`${cyan}│${reset} ${yellow}${inputDisplay.padEnd(boxWidth - 4)}${reset} ${cyan}│${reset}`);
+        process.stdout.write(`\x1b[${startY + 4};${startX}H`);
+        process.stdout.write(`${cyan}│${reset}${dim} [Enter] Submit  [Esc] Cancel${reset.padEnd(boxWidth - 32)} ${cyan}│${reset}`);
+        process.stdout.write(`\x1b[${startY + 5};${startX}H`);
+        process.stdout.write(`${cyan}└${'─'.repeat(boxWidth - 2)}┘${reset}`);
     }
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    // Utility Methods
+    // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     formatDuration(ms) {
         if (ms <= 0)
             return '-';
@@ -1612,14 +1370,107 @@ class InteractiveMonitor {
             'failed': '❌',
             'blocked_dependency': '🚫',
             'pending': '⚪',
-            'reviewing': '👀',
         };
         return icons[status] || '❓';
     }
+    getLogTypeInfo(type) {
+        const { cyan, green, yellow, gray, red, white, dim, magenta, reset } = UI.COLORS;
+        const typeMap = {
+            user: { label: 'USER  ', color: cyan },
+            assistant: { label: 'ASST  ', color: green },
+            tool: { label: 'TOOL  ', color: yellow },
+            tool_result: { label: 'RESULT', color: gray },
+            result: { label: 'DONE  ', color: green },
+            system: { label: 'SYSTEM', color: gray },
+            thinking: { label: 'THINK ', color: dim },
+            error: { label: 'ERROR ', color: red },
+            stderr: { label: 'STDERR', color: red },
+            stdout: { label: 'STDOUT', color: white },
+        };
+        return typeMap[type] || { label: type.toUpperCase().padEnd(6).substring(0, 6), color: gray };
+    }
+    padWithAnsi(str, width) {
+        const visibleLength = (0, formatter_1.stripAnsi)(str).length;
+        const padding = Math.max(0, width - visibleLength);
+        return str + ' '.repeat(padding);
+    }
+    /**
+     * Safe string truncation that handles ANSI codes
+     */
+    safeSubstring(str, maxLen) {
+        const stripped = (0, formatter_1.stripAnsi)(str);
+        if (stripped.length <= maxLen)
+            return str;
+        // Simple approach: truncate stripped, find corresponding position in original
+        let visibleCount = 0;
+        let i = 0;
+        while (i < str.length && visibleCount < maxLen - 3) {
+            // Skip ANSI sequences
+            if (str[i] === '\x1b') {
+                const match = str.slice(i).match(/^\x1b\[[0-9;]*m/);
+                if (match) {
+                    i += match[0].length;
+                    continue;
+                }
+            }
+            visibleCount++;
+            i++;
+        }
+        return str.slice(0, i) + '...';
+    }
+    /**
+     * Render help overlay
+     */
+    renderHelpOverlay() {
+        const { cyan, reset, bold, dim, yellow, gray } = UI.COLORS;
+        const helpWidth = 60;
+        const helpHeight = 20;
+        const startX = Math.floor((this.screenWidth - helpWidth) / 2);
+        const startY = Math.floor((this.screenHeight - helpHeight) / 2);
+        const helpContent = [
+            `${bold}📖 Keyboard Shortcuts${reset}`,
+            '',
+            `${yellow}Navigation${reset}`,
+            `  ←/→     Tab switch / Enter detail / Panel switch`,
+            `  ↑/↓     Select item / Scroll content`,
+            `  Tab     Quick tab switch`,
+            `  Esc     Go back / Close overlay`,
+            '',
+            `${yellow}Actions${reset}`,
+            `  Enter   Open action menu`,
+            `  Space   Toggle follow mode (in logs)`,
+            `  R       Toggle readable format`,
+            `  ?       Show/hide this help`,
+            `  Q       Quit`,
+            '',
+            `${yellow}Action Menu${reset}`,
+            `  1-9     Quick select action`,
+            `  ↑/↓     Navigate actions`,
+            `  Enter   Execute selected action`,
+        ];
+        // Draw box
+        process.stdout.write(`\x1b[${startY};${startX}H`);
+        process.stdout.write(`${cyan}┌${'─'.repeat(helpWidth - 2)}┐${reset}`);
+        for (let i = 0; i < helpContent.length; i++) {
+            process.stdout.write(`\x1b[${startY + 1 + i};${startX}H`);
+            const line = helpContent[i] || '';
+            const paddedLine = this.padWithAnsi(line, helpWidth - 4);
+            process.stdout.write(`${cyan}│${reset} ${paddedLine} ${cyan}│${reset}`);
+        }
+        // Fill remaining space
+        for (let i = helpContent.length; i < helpHeight - 2; i++) {
+            process.stdout.write(`\x1b[${startY + 1 + i};${startX}H`);
+            process.stdout.write(`${cyan}│${reset}${' '.repeat(helpWidth - 2)}${cyan}│${reset}`);
+        }
+        process.stdout.write(`\x1b[${startY + helpHeight - 1};${startX}H`);
+        process.stdout.write(`${cyan}│${reset}${dim} Press ? or Esc to close${reset}${' '.repeat(helpWidth - 27)}${cyan}│${reset}`);
+        process.stdout.write(`\x1b[${startY + helpHeight};${startX}H`);
+        process.stdout.write(`${cyan}└${'─'.repeat(helpWidth - 2)}┘${reset}`);
+    }
 }
-/**
- * Find the latest run directory
- */
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Main Entry Point
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 function findLatestRunDir(logsDir) {
     const runsDir = (0, path_1.safeJoin)(logsDir, 'runs');
     if (!fs.existsSync(runsDir))
@@ -1630,9 +1481,6 @@ function findLatestRunDir(logsDir) {
         .sort((a, b) => b.mtime - a.mtime);
     return runs.length > 0 ? runs[0].path : null;
 }
-/**
- * Monitor lanes
- */
 async function monitor(args) {
     const help = args.includes('--help') || args.includes('-h');
     const list = args.includes('--list') || args.includes('-l');
@@ -1654,15 +1502,15 @@ async function monitor(args) {
         if (!runDir && !list)
             throw new Error('No run directories found');
         if (!runDir && list) {
-            // Create a dummy runDir if none exists but we want to see the list (dashboard will handle empty list)
             runDir = path.join((0, config_1.getLogsDir)(config), 'runs', 'empty');
         }
     }
     if (runDir && !fs.existsSync(runDir) && !list) {
         throw new Error(`Run directory not found: ${runDir}`);
     }
-    const monitor = new InteractiveMonitor(runDir, interval, undefined, list ? View.FLOWS_DASHBOARD : View.LIST);
-    await monitor.start();
+    const initialTab = list ? Tab.ALL_FLOWS : Tab.CURRENT_FLOW;
+    const mon = new InteractiveMonitor(runDir, interval, initialTab);
+    await mon.start();
 }
 module.exports = monitor;
 //# sourceMappingURL=monitor.js.map