@litmers/cursorflow-orchestrator 0.1.39 → 0.2.2

package/src/cli/monitor.ts

@@ -1,12 +1,12 @@
 /**
- * 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
  */
 
 import * as fs from 'fs';
@@ -18,8 +18,7 @@ import { loadConfig, getLogsDir } from '../utils/config';
 import { safeJoin } from '../utils/path';
 import { getLaneProcessStatus, getFlowSummary, LaneProcessStatus } from '../services/process';
 import { LogBufferService, BufferedLogEntry } from '../services/logging/buffer';
-import { formatReadableEntry, formatMessageForConsole, stripAnsi } from '../services/logging/formatter';
-import { MessageType } from '../types/logging';
+import { formatReadableEntry, stripAnsi } from '../services/logging/formatter';
 
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // UI Constants
@@ -38,100 +37,168 @@ 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: '┼',
   },
 };
 
-interface LaneWithDeps {
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Types
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+interface LaneInfo {
   name: string;
   path: string;
 }
 
-interface MonitorOptions {
-  runDir?: string;
-  interval: number;
-  help: boolean;
-  list: boolean;
+interface FlowInfo {
+  runDir: string;
+  runId: string;
+  isAlive: boolean;
+  summary: ReturnType<typeof getFlowSummary>;
+}
+
+interface ActionItem {
+  id: string;
+  label: string;
+  icon: string;
+  action: () => void;
+  disabled?: boolean;
+  disabledReason?: string;
+}
+
+enum Tab {
+  CURRENT_FLOW = 0,
+  ALL_FLOWS = 1,
+  UNIFIED_LOG = 2,
+}
+
+enum Level {
+  DASHBOARD = 1,
+  DETAIL = 2,
+  ACTION_MENU = 3,
+}
+
+enum Panel {
+  LEFT = 0,
+  RIGHT = 1,
+}
+
+interface MonitorState {
+  // Navigation
+  level: Level;
+  currentTab: Tab;
+  
+  // Selection indexes
+  selectedLaneIndex: number;
+  selectedFlowIndex: number;
+  selectedLogIndex: number;
+  selectedActionIndex: number;
+  selectedMessageIndex: number;
+  
+  // Detail view state
+  selectedLaneName: string | null;
+  currentPanel: Panel;
+  terminalScrollOffset: number;
+  messageScrollOffset: number;
+  followMode: boolean;
+  readableFormat: boolean; // Toggle between readable and raw log format
+  
+  // Log view state
+  unifiedLogScrollOffset: number;
+  unifiedLogFollowMode: boolean;
+  laneFilter: string | null;
+  readableLogFormat: boolean; // For unified log view
+  
+  // Action menu
+  actionMenuVisible: boolean;
+  actionItems: ActionItem[];
+  
+  // Input mode
+  inputMode: 'none' | 'message' | 'timeout';
+  inputBuffer: string;
+  inputTarget: string | null;
+  
+  // Help overlay
+  showHelp: boolean;
+  
+  // Notification
+  notification: { message: string; type: 'info' | 'error' | 'success'; time: number } | null;
 }
 
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Helper functions
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
 function printHelp(): void {
   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
   `);
 }
 
-enum View {
-  LIST,
-  LANE_DETAIL,
-  MESSAGE_DETAIL,
-  FLOW,
-  TERMINAL,
-  INTERVENE,
-  TIMEOUT,
-  UNIFIED_LOG,
-  FLOWS_DASHBOARD
-}
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// Interactive Monitor Class
+// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 class InteractiveMonitor {
   private runDir: string;
   private interval: number;
-  private view: View = View.LIST;
-  private selectedLaneIndex: number = 0;
-  private selectedMessageIndex: number = 0;
-  private selectedLaneName: string | null = null;
-  private lanes: LaneWithDeps[] = [];
-  private currentLogs: ConversationEntry[] = [];
+  private logsDir: string;
   private timer: NodeJS.Timeout | null = null;
-  private scrollOffset: number = 0;
-  private terminalScrollOffset: number = 0;
-  private followMode: boolean = true;
-  private unseenLineCount: number = 0;
-  private lastTerminalTotalLines: number = 0;
-  private interventionInput: string = '';
-  private timeoutInput: string = '';
-  private notification: { message: string; type: 'info' | 'error' | 'success'; time: number } | null = null;
-  
-  // Process status tracking
-  private laneProcessStatuses: Map<string, LaneProcessStatus> = new Map();
   
-  // Unified log buffer for all lanes
+  // Data
+  private lanes: LaneInfo[] = [];
+  private allFlows: FlowInfo[] = [];
+  private currentLogs: ConversationEntry[] = [];
+  private laneProcessStatuses: Map<string, LaneProcessStatus> = new Map();
   private unifiedLogBuffer: LogBufferService | null = null;
-  private unifiedLogScrollOffset: number = 0;
-  private unifiedLogFollowMode: boolean = true;
   
-  // Multiple flows support
-  private allFlows: { runDir: string; runId: string; isAlive: boolean; summary: ReturnType<typeof getFlowSummary> }[] = [];
-  private selectedFlowIndex: number = 0;
-  private logsDir: string = '';
-  
-  // NEW: UX improvements
-  private readableFormat: boolean = true; // Toggle readable log format
-  private laneFilter: string | null = null; // Filter by lane name
-  private confirmAction: { type: 'delete-flow' | 'kill-lane'; target: string; time: number } | null = null;
+  // State
+  private state: MonitorState;
   
   // Screen dimensions
   private get screenWidth(): number {
@@ -141,24 +208,44 @@ class InteractiveMonitor {
     return process.stdout.rows || 24;
   }
 
-  constructor(runDir: string, interval: number, logsDir?: string, initialView: View = View.LIST) {
+  constructor(runDir: string, interval: number, initialTab: Tab = Tab.CURRENT_FLOW) {
     const config = 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 = safeJoin(getLogsDir(config), 'runs');
-    }
+    this.logsDir = safeJoin(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 LogBufferService(runDir);
@@ -169,14 +256,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 = getFlowSummary(this.runDir);
-        console.log(`Status: ${flowSummary.running} running, ${flowSummary.completed} completed, ${flowSummary.failed} failed`);
-      }
+      const flowSummary = getFlowSummary(this.runDir);
+      console.log(`\nMonitoring run: ${path.basename(this.runDir)}`);
+      console.log(`Status: ${flowSummary.running} running, ${flowSummary.completed} completed, ${flowSummary.failed} failed`);
       return;
     }
 
@@ -186,44 +268,29 @@ 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
-   */
   private discoverFlows(): void {
     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 = safeJoin(this.logsDir, d);
           const summary = 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,510 +301,513 @@ 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
   }
 
   private stop() {
     if (this.timer) clearInterval(this.timer);
-    
-    // Stop unified log streaming
-    if (this.unifiedLogBuffer) {
-      this.unifiedLogBuffer.stopStreaming();
-    }
-    
-    // Show cursor and clear screen
-    process.stdout.write('\x1B[?25h');
-    process.stdout.write('\x1Bc');
+    if (this.unifiedLogBuffer) this.unifiedLogBuffer.stopStreaming();
+    process.stdout.write('\x1B[?25h'); // Show cursor
+    process.stdout.write('\x1Bc'); // Clear screen
     console.log('\n👋 Monitoring stopped\n');
     process.exit(0);
   }
 
-  private handleListKey(key: string) {
-    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
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  
+  private handleKeypress(str: string, key: any) {
+    // 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);
+    }
+  }
+  
+  private handleDashboardKey(keyName: string) {
+    switch (keyName) {
+      // Tab navigation (Left/Right at dashboard level)
+      case 'left':
+        this.state.currentTab = Math.max(0, this.state.currentTab - 1) as Tab;
+        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) as Tab;
+          this.resetSelectionForTab();
         }
+        this.render();
         break;
-      case 'left':
-      case 'f':
-        this.view = View.FLOW;
+      case 'tab':
+        this.state.currentTab = ((this.state.currentTab + 1) % 3) as Tab;
+        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;
     }
   }
-
-  private handleDetailKey(key: string) {
-    switch (key) {
-      case 'up':
-        this.selectedMessageIndex = Math.max(0, this.selectedMessageIndex - 1);
+  
+  private handleDetailKey(keyName: string) {
+    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;
-    }
-  }
-
-  private handleMessageDetailKey(key: string) {
-    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;
     }
   }
-
-  private handleTerminalKey(key: string) {
-    switch (key) {
+  
+  private handleActionMenuKey(keyName: string) {
+    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.render();
-        break;
-      case 'f':
-        this.followMode = true;
-        this.terminalScrollOffset = 0;
-        this.unseenLineCount = 0;
+        this.state.selectedActionIndex = Math.min(
+          this.state.actionItems.length - 1,
+          this.state.selectedActionIndex + 1
+        );
         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;
     }
   }
-
-  private handleInterveneKey(str: string, key: any) {
+  
+  private handleInputKey(str: string, key: any) {
     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.render();
-      return;
-    }
-
-    if (str && str.length === 1 && !key.ctrl && !key.meta) {
-      this.interventionInput += str;
-      this.render();
-    }
-  }
-
-  private handleTimeoutKey(str: string, key: any) {
-    if (key && key.name === 'escape') {
-      this.view = View.LANE_DETAIL;
+      this.state.inputBuffer = this.state.inputBuffer.slice(0, -1);
       this.render();
       return;
     }
-
-    if (key && (key.name === 'return' || key.name === 'enter')) {
-      if (this.timeoutInput.trim()) {
-        this.sendTimeoutUpdate(this.timeoutInput.trim());
+    
+    if (str && str.length === 1 && !key?.ctrl && !key?.meta) {
+      // For timeout, only allow numbers
+      if (this.state.inputMode === 'timeout' && !/^\d$/.test(str)) {
+        return;
       }
-      this.view = View.LANE_DETAIL;
+      this.state.inputBuffer += str;
       this.render();
-      return;
     }
+  }
 
-    if (key && key.name === 'backspace') {
-      this.timeoutInput = this.timeoutInput.slice(0, -1);
-      this.render();
-      return;
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // Navigation Helpers
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  
+  private resetSelectionForTab() {
+    this.state.selectedLaneIndex = 0;
+    this.state.selectedFlowIndex = 0;
+    this.state.selectedLogIndex = 0;
+    this.state.unifiedLogScrollOffset = 0;
+  }
+  
+  private canEnterDetail(): boolean {
+    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
     }
-
-    // Only allow numbers
-    if (str && /^\d$/.test(str)) {
-      this.timeoutInput += str;
-      this.render();
+  }
+  
+  private 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();
+    } 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);
     }
   }
-
-  private handleFlowKey(key: string) {
-    switch (key) {
-      case 'f':
-      case 'escape':
-      case 'backspace':
-      case 'right':
-      case 'return':
-      case 'enter':
-      case 'left':
-        this.view = View.LIST;
-        this.render();
+  
+  private 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;
     }
   }
-
-  private handleUnifiedLogKey(key: string) {
-    const pageSize = Math.max(10, this.screenHeight - 12);
-    
-    switch (key) {
-      case 'up':
-        this.unifiedLogFollowMode = false;
-        this.unifiedLogScrollOffset++;
-        this.render();
-        break;
-      case 'down':
-        this.unifiedLogScrollOffset = Math.max(0, this.unifiedLogScrollOffset - 1);
-        if (this.unifiedLogScrollOffset === 0) {
-          this.unifiedLogFollowMode = true;
-        }
-        this.render();
+  
+  private moveSelectionDown() {
+    switch (this.state.currentTab) {
+      case Tab.CURRENT_FLOW:
+        this.state.selectedLaneIndex = Math.min(this.lanes.length - 1, this.state.selectedLaneIndex + 1);
         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;
     }
   }
+
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // Action Menu
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
-  /**
-   * Cycle through available lanes for filtering
-   */
-  private cycleLaneFilter(): void {
-    const lanes = this.unifiedLogBuffer?.getLanes() || [];
-    if (lanes.length === 0) {
-      this.laneFilter = null;
-      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;
-      } else {
-        // Next lane
-        this.laneFilter = lanes[currentIndex + 1]!;
-      }
-    }
+  private openActionMenu() {
+    this.state.actionItems = this.getContextActions();
+    if (this.state.actionItems.length === 0) return;
+    this.state.selectedActionIndex = 0;
+    this.state.actionMenuVisible = true;
   }
-
-  private handleFlowsDashboardKey(key: string) {
-    // 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;
+  
+  private getContextActions(): ActionItem[] {
+    // 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 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();
       }
-      // Other keys cancel confirmation
-      this.confirmAction = null;
-      this.render();
-      return;
-    }
-    
-    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 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 (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 [];
   }
   
-  /**
-   * Execute a confirmed action (delete flow, kill process, etc.)
-   */
-  private executeConfirmedAction(): void {
-    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');
-        }
-      }
+  private getLaneActions(lane: LaneInfo): ActionItem[] {
+    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();
+        },
+      },
+    ];
+  }
+  
+  private getFlowActions(flow: FlowInfo): ActionItem[] {
+    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',
+      },
+    ];
+  }
+  
+  private getLogActions(): ActionItem[] {
+    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();
+        },
+      },
+    ];
+  }
+  
+  private executeAction() {
+    const action = this.state.actionItems[this.state.selectedActionIndex];
+    if (action && !action.disabled) {
+      this.state.actionMenuVisible = false;
+      action.action();
+    } else if (action?.disabled) {
+      this.showNotification(action.disabledReason || 'Action not available', 'error');
     }
-    
-    this.render();
   }
 
-  private sendIntervention(message: string) {
-    if (!this.selectedLaneName) return;
-    const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-    if (!lane) return;
-
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // Actions Implementation
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  
+  private startMessageInput(laneName: string) {
+    this.state.inputMode = 'message';
+    this.state.inputBuffer = '';
+    this.state.inputTarget = laneName;
+    this.state.actionMenuVisible = false;
+    this.render();
+  }
+  
+  private startTimeoutInput(laneName: string) {
+    this.state.inputMode = 'timeout';
+    this.state.inputBuffer = '';
+    this.state.inputTarget = laneName;
+    this.state.actionMenuVisible = false;
+    this.render();
+  }
+  
+  private 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();
+  }
+  
+  private sendMessage(laneName: string, message: string) {
+    const lane = this.lanes.find(l => l.name === laneName);
+    if (!lane || !message.trim()) return;
+    
     try {
       const interventionPath = safeJoin(lane.path, 'intervention.txt');
       fs.writeFileSync(interventionPath, message, 'utf8');
-
-      // Also log it to the conversation
+      
       const convoPath = safeJoin(lane.path, 'conversation.jsonl');
       const entry = {
         timestamp: new Date().toISOString(),
@@ -749,984 +819,726 @@ class InteractiveMonitor {
       };
       fs.appendFileSync(convoPath, JSON.stringify(entry) + '\n', 'utf8');
       
-      this.showNotification('Intervention message sent', 'success');
-    } catch (e) {
-      this.showNotification('Failed to send intervention', 'error');
+      this.showNotification('Message sent', 'success');
+    } catch {
+      this.showNotification('Failed to send message', 'error');
     }
   }
-
-  private sendTimeoutUpdate(timeoutStr: string) {
-    if (!this.selectedLaneName) return;
-    const lane = this.lanes.find(l => l.name === this.selectedLaneName);
+  
+  private setLaneTimeout(laneName: string, timeoutStr: string) {
+    const lane = this.lanes.find(l => l.name === laneName);
     if (!lane) return;
-
+    
     try {
       const timeoutMs = parseInt(timeoutStr);
       if (isNaN(timeoutMs) || timeoutMs <= 0) {
         this.showNotification('Invalid timeout value', 'error');
         return;
       }
-
+      
       const timeoutPath = 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');
+    } catch {
+      this.showNotification('Failed to set timeout', 'error');
     }
   }
-
-  private refreshLogs() {
-    if (!this.selectedLaneName) return;
-    const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-    if (!lane) return;
-    const convoPath = safeJoin(lane.path, 'conversation.jsonl');
-    this.currentLogs = readLog<ConversationEntry>(convoPath);
-    // Keep selection in bounds after refresh
-    if (this.selectedMessageIndex >= this.currentLogs.length) {
-      this.selectedMessageIndex = Math.max(0, this.currentLogs.length - 1);
+  
+  private killLane(lane: LaneInfo) {
+    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 {
+        this.showNotification(`Failed to kill PID ${status.pid}`, 'error');
+      }
     }
+    this.state.actionMenuVisible = false;
+    this.render();
   }
-
-  private refresh() {
-    this.lanes = this.listLanesWithDeps(this.runDir);
-    
-    // Update process statuses for accurate display
-    this.updateProcessStatuses();
+  
+  private switchToFlow(flow: FlowInfo) {
+    this.runDir = flow.runDir;
     
-    if (this.view !== View.LIST && this.view !== View.UNIFIED_LOG && this.view !== View.FLOWS_DASHBOARD) {
-      this.refreshLogs();
+    if (this.unifiedLogBuffer) {
+      this.unifiedLogBuffer.stopStreaming();
     }
+    this.unifiedLogBuffer = new LogBufferService(this.runDir);
+    this.unifiedLogBuffer.startStreaming();
     
-    // Refresh flows list periodically
-    if (this.view === View.FLOWS_DASHBOARD) {
-      this.discoverFlows();
-    }
+    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.render();
+    this.showNotification(`Switched to: ${flow.runId}`, 'info');
+    this.refresh();
   }
   
-  /**
-   * Update process statuses for all lanes
-   */
-  private updateProcessStatuses(): void {
-    const lanesDir = safeJoin(this.runDir, 'lanes');
-    if (!fs.existsSync(lanesDir)) return;
-    
-    for (const lane of this.lanes) {
-      const status = getLaneProcessStatus(lane.path, lane.name);
-      this.laneProcessStatuses.set(lane.name, status);
+  private deleteFlow(flow: FlowInfo) {
+    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();
   }
-
-  private killLane() {
-    if (!this.selectedLaneName) return;
-    const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-    if (!lane) return;
-
-    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) {
-        this.showNotification(`Failed to kill PID ${status.pid}`, 'error');
-      }
+  
+  private cycleLaneFilter(lanes: string[]) {
+    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();
   }
-
+  
+  private showHelp() {
+    this.showNotification('←/→: Navigate | ↑/↓: Select | Enter: Action | Esc: Back | Q: Quit', 'info');
+    this.render();
+  }
+  
   private showNotification(message: string, type: 'info' | 'error' | 'success') {
-    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
-  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  // Data Refresh
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
-  private renderHeader(title: string, breadcrumb: string[] = []): void {
-    const width = Math.min(this.screenWidth, 120);
-    const line = UI.CHARS.hLine.repeat(width);
-    
-    // Flow status
-    const flowSummary = getFlowSummary(this.runDir);
-    const flowStatusIcon = flowSummary.isAlive ? '🟢' : (flowSummary.completed === flowSummary.total && flowSummary.total > 0 ? '✅' : '🔴');
+  private refresh() {
+    this.lanes = this.listLanes();
+    this.updateProcessStatuses();
     
-    // Breadcrumb
-    const crumbs = ['CursorFlow', ...breadcrumb].join(` ${UI.COLORS.gray}›${UI.COLORS.reset} `);
+    if (this.state.level === Level.DETAIL && this.state.selectedLaneName) {
+      this.refreshLogs();
+    }
     
-    // Time
-    const timeStr = new Date().toLocaleTimeString('en-US', { hour12: false });
+    if (this.state.currentTab === Tab.ALL_FLOWS) {
+      this.discoverFlows();
+    }
     
-    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`);
+    this.render();
   }
   
-  private renderFooter(actions: string[]): void {
-    const width = Math.min(this.screenWidth, 120);
-    const line = UI.CHARS.hLine.repeat(width);
+  private refreshLogs() {
+    if (!this.state.selectedLaneName) return;
+    const lane = this.lanes.find(l => l.name === this.state.selectedLaneName);
+    if (!lane) return;
     
-    // 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`);
-    }
+    const convoPath = safeJoin(lane.path, 'conversation.jsonl');
+    this.currentLogs = readLog<ConversationEntry>(convoPath);
     
-    // 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`);
+    if (this.state.messageScrollOffset >= this.currentLogs.length) {
+      this.state.messageScrollOffset = Math.max(0, this.currentLogs.length - 1);
+    }
+  }
+  
+  private updateProcessStatuses() {
+    for (const lane of this.lanes) {
+      const status = getLaneProcessStatus(lane.path, lane.name);
+      this.laneProcessStatuses.set(lane.name, status);
     }
+  }
+  
+  private listLanes(): LaneInfo[] {
+    const lanesDir = safeJoin(this.runDir, 'lanes');
+    if (!fs.existsSync(lanesDir)) return [];
     
-    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`);
+    return fs.readdirSync(lanesDir)
+      .filter(d => fs.statSync(safeJoin(lanesDir, d)).isDirectory())
+      .map(name => ({ name, path: safeJoin(lanesDir, name) }));
   }
   
-  private renderSectionTitle(title: string, extra?: string): void {
-    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`);
+  private getLaneStatus(lanePath: string, _laneName: string) {
+    const statePath = safeJoin(lanePath, 'state.json');
+    const state = loadState<LaneState & { chatId?: string }>(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
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   
   private render() {
-    // Clear screen
-    process.stdout.write('\x1Bc');
+    process.stdout.write('\x1Bc'); // Clear screen
     
-    // Clear old notifications
-    if (this.notification && Date.now() - this.notification.time > 3000) {
-      this.notification = null;
+    // Clear old notification
+    if (this.state.notification && Date.now() - this.state.notification.time > 3000) {
+      this.state.notification = null;
     }
     
-    // Clear old confirmation
-    if (this.confirmAction && Date.now() - this.confirmAction.time > 10000) {
-      this.confirmAction = null;
+    if (this.state.level === Level.DASHBOARD) {
+      this.renderDashboard();
+    } else {
+      this.renderDetail();
     }
     
-    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;
+    // 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();
     }
   }
-
-  private renderList() {
+  
+  private renderDashboard() {
+    const w = this.screenWidth;
+    const h = this.screenHeight;
+    const { cyan, reset, bold, dim, gray, green, yellow, red } = UI.COLORS;
+    
+    // Header
     const flowSummary = 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]);
+    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`);
     
-    // 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}`,
+    // 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`);
+  }
+  
+  private renderLaneList(maxLines: number) {
+    const { cyan, reset, dim, gray, green, yellow, red, bgGray } = UI.COLORS;
+    
+    // Summary
+    const flowSummary = 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: Record<string, any> = {};
-    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);
+      let statusColor = gray;
       
-      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;
-        }
+      if (processStatus?.isStale) {
+        displayStatus = 'STALE';
+        statusIcon = UI.ICONS.stale;
+        statusColor = yellow;
+      } else if (processStatus?.actualStatus === 'running') {
+        statusColor = cyan;
+      } else if (status.status === 'completed') {
+        statusColor = green;
+      } else if (status.status === 'failed') {
+        statusColor = red;
       }
       
-      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
-      }
+      // Progress
+      const progressText = `${status.currentTask}/${status.totalTasks}`;
       
       // 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);
-      }
+      const duration = this.formatDuration(processStatus?.duration || status.duration);
       
       // Next action
       let nextAction = '-';
-      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') {
-        nextAction = '🚀 working...';
-      } else if (processStatus?.isStale) {
-        nextAction = '⚠️ died unexpectedly';
-      }
+      if (status.status === 'completed') nextAction = '✓ Done';
+      else if (status.status === 'waiting') nextAction = `⏳ ${status.waitingFor?.join(', ') || 'waiting'}`;
+      else if (processStatus?.actualStatus === 'running') nextAction = '🚀 working...';
+      else if (processStatus?.isStale) nextAction = '⚠️ died';
       
-      // 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 : '';
+      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(`${rowBg}${prefix}${lane.name.padEnd(maxNameLen)}  ${statusColor}${statusText}${UI.COLORS.reset}  ${pidText}  ${timeText}  ${tasksText}  ${nextAction}${rowEnd}\n`);
+      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`);
+    }
   }
-
-  private renderLaneDetail() {
-    const lane = this.lanes.find(l => l.name === this.selectedLaneName);
-    if (!lane) {
-      this.view = View.LIST;
-      this.render();
+  
+  private renderFlowList(maxLines: number) {
+    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 = 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);
+    // 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;
       
-      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`);
-      });
+      // 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)}%`;
       
-      if (this.currentLogs.length > maxVisible) {
-        process.stdout.write(` ${UI.COLORS.dim}(${this.currentLogs.length - maxVisible} more messages)${UI.COLORS.reset}\n`);
-      }
-    }
-
-    this.renderFooter([
-      '[↑↓] Scroll', '[→/Enter] Full Msg', '[T] Terminal', '[I] Intervene', '[K] Kill', '[←/Esc] Back'
-    ]);
-  }
-  
-  private getRoleColor(role: string): string {
-    const colors: Record<string, string> = {
-      user: UI.COLORS.yellow,
-      assistant: UI.COLORS.green,
-      intervention: UI.COLORS.red,
-      system: UI.COLORS.cyan,
-    };
-    return colors[role] || UI.COLORS.gray;
-  }
-
-  private renderMessageDetail() {
-    const log = this.currentLogs[this.selectedMessageIndex];
-    if (!log) {
-      this.view = View.LANE_DETAIL;
-      this.render();
-      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;
-      }
+      // 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);
       
-      // 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++;
-      }
+      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(['[←/Esc] Back']);
   }
   
-  /**
-   * Wrap text to specified width
-   */
-  private wrapText(text: string, maxWidth: number): string[] {
-    const words = text.split(' ');
-    const lines: string[] = [];
-    let currentLine = '';
+  private renderUnifiedLog(maxLines: number) {
+    const { cyan, reset, dim, gray, green, yellow } = UI.COLORS;
     
-    for (const word of words) {
-      if (currentLine.length + word.length + 1 <= maxWidth) {
-        currentLine += (currentLine ? ' ' : '') + word;
-      } else {
-        if (currentLine) lines.push(currentLine);
-        currentLine = word;
-      }
+    // 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;
     }
-    if (currentLine) lines.push(currentLine);
     
-    return lines;
-  }
-
-  private renderFlow() {
-    this.renderHeader('Dependency Flow', [path.basename(this.runDir), 'Flow']);
-
-    const laneMap = new Map<string, any>();
-    this.lanes.forEach(lane => {
-      laneMap.set(lane.name, this.getLaneStatus(lane.path, lane.name));
+    const entries = this.unifiedLogBuffer.getEntries({
+      offset: this.state.unifiedLogScrollOffset,
+      limit: maxLines - 2,
+      filter: this.state.laneFilter ? { lane: this.state.laneFilter } : undefined,
+      fromEnd: true,
     });
-
-    process.stdout.write('\n');
     
-    // Group lanes by dependency level
-    const levels = this.calculateDependencyLevels();
-    const maxLevelWidth = Math.max(...levels.map(l => l.length));
+    if (entries.length === 0) {
+      process.stdout.write(`  ${dim}No log entries${reset}\n`);
+      return;
+    }
     
-    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');
-      }
+    for (const entry of entries) {
+      const ts = entry.timestamp.toLocaleTimeString('en-US', { hour12: false });
+      const typeInfo = this.getLogTypeInfo(entry.type || 'info');
       
-      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`);
+      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 {
+        // 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`);
       }
     }
-
-    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)
-   */
-  private calculateDependencyLevels(): string[][] {
-    // 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)];
-  }
-
-  private renderTerminal() {
-    const lane = this.lanes.find(l => l.name === this.selectedLaneName);
+  private 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: string[] = [];
-    let totalLines = 0;
-    
-    if (this.readableFormat) {
-      // Use JSONL for readable format
-      const jsonlPath = safeJoin(lane.path, 'terminal.jsonl');
-      logLines = this.getReadableLogLines(jsonlPath, lane.name);
-      totalLines = logLines.length;
-    } else {
-      // Use readable log
-      const logPath = 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;
-    } else {
-      if (this.lastTerminalTotalLines > 0 && totalLines > this.lastTerminalTotalLines) {
-        this.unseenLineCount += (totalLines - this.lastTerminalTotalLines);
-        this.terminalScrollOffset += (totalLines - this.lastTerminalTotalLines);
-      }
-    }
-    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`);
+    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`);
     }
     
-    if (visibleLines.length === 0) {
-      process.stdout.write(` ${UI.COLORS.dim}(No output yet)${UI.COLORS.reset}\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 {
+      process.stdout.write('\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
-   */
-  private formatTerminalLine(line: string): string {
-    // 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}`;
-    }
-    if (line.includes('=== Task:') || line.includes('Starting task:')) {
-      return `${UI.COLORS.green}${UI.COLORS.bold}${line}${UI.COLORS.reset}`;
+  private getTerminalLines(lanePath: string, maxLines: number): string[] {
+    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 = safeJoin(lanePath, 'terminal.jsonl');
+      if (fs.existsSync(jsonlPath)) {
+        return this.getJsonlLogLines(jsonlPath, maxLines);
+      }
     }
-    if (line.toLowerCase().includes('error') || line.toLowerCase().includes('failed')) {
-      return `${UI.COLORS.red}${line}${UI.COLORS.reset}`;
+    
+    // Fallback to raw terminal log
+    const logPath = safeJoin(lanePath, 'terminal-readable.log');
+    if (!fs.existsSync(logPath)) {
+      return [`${dim}(No output yet)${reset}`];
     }
-    if (line.toLowerCase().includes('success') || line.toLowerCase().includes('completed')) {
-      return `${UI.COLORS.green}${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;
+      });
+    } catch {
+      return [`${dim}(Error reading log)${reset}`];
     }
-    return line;
   }
   
   /**
-   * Get readable log lines from JSONL file
+   * Get structured log lines from JSONL file
    */
-  private getReadableLogLines(jsonlPath: string, laneName: string): string[] {
-    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 [];
-    }
+  private getJsonlLogLines(jsonlPath: string, maxLines: number): string[] {
+    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());
+      const allLines = content.split('\n').filter(l => l.trim());
+      const totalLines = allLines.length;
       
-      return lines.map(line => {
+      // 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 || '';
+          const content = (entry.content || entry.message || '').replace(/\n/g, ' ');
           
-          // Format based on type
           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 [];
+      return [`${dim}(Error reading log)${reset}`];
     }
   }
   
-  /**
-   * Get log type display info
-   */
-  private getLogTypeInfo(type: string): { label: string; color: string } {
-    const typeMap: Record<string, { label: string; color: string }> = {
-      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 };
-  }
-
-  private 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`);
-    }
+  private getMessageLines(maxLines: number): string[] {
+    const { dim, reset, cyan, green, yellow, gray } = UI.COLORS;
     
-    process.stdout.write(` ${UI.COLORS.cyan}└${'─'.repeat(width)}┘${UI.COLORS.reset}\n`);
-
-    this.renderFooter(['[Enter] Send', '[Esc] Cancel']);
-  }
-
-  private 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`);
-      }
+    if (this.currentLogs.length === 0) {
+      return [`${dim}(No messages yet)${reset}`];
     }
-
-    this.renderFooter(['[Enter] Apply', '[Esc] Cancel']);
-  }
-
-  /**
-   * Render unified log view - all lanes combined
-   */
-  private 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 || [];
+    const lines: string[] = [];
+    const start = this.state.messageScrollOffset;
+    const visibleLogs = this.currentLogs.slice(start, start + Math.floor(maxLines / 3));
     
-    // 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;
+    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('');
     }
-
-    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`);
-      }
+    if (this.currentLogs.length > visibleLogs.length + start) {
+      lines.push(`${dim}... ${this.currentLogs.length - visibleLogs.length - start} more${reset}`);
     }
-
-    this.renderFooter([
-      '[↑↓/PgUp/PgDn] Scroll', '[F] Follow', '[R] Readable', '[L] Filter Lane', '[U/Esc] Back'
-    ]);
+    
+    return lines;
   }
   
-  /**
-   * Format a unified log entry
-   */
-  private formatUnifiedLogEntry(entry: BufferedLogEntry): string {
-    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}`;
-    }
-  }
-
-  /**
-   * Render multiple flows dashboard
-   */
-  private renderFlowsDashboard() {
-    this.renderHeader('All Flows', ['Flows Dashboard']);
+  private 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}`);
+    });
     
-    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;
-    }
-
-    // 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);
+    // Bottom border
+    process.stdout.write(`\x1b[${startY + 3 + this.state.actionItems.length};${startX}H`);
+    process.stdout.write(`${cyan}├${'─'.repeat(menuWidth - 2)}┤${reset}`);
     
-    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`);
-    }
+    // 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}`);
     
-    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'
-    ]);
+    process.stdout.write(`\x1b[${startY + 5 + this.state.actionItems.length};${startX}H`);
+    process.stdout.write(`${cyan}└${'─'.repeat(menuWidth - 2)}┘${reset}`);
   }
-
-  private listLanesWithDeps(runDir: string): LaneWithDeps[] {
-    const lanesDir = safeJoin(runDir, 'lanes');
-    if (!fs.existsSync(lanesDir)) return [];
+  
+  private renderInputOverlay() {
+    const { cyan, reset, bold, dim, yellow } = UI.COLORS;
     
-    const config = loadConfig();
-    const tasksDir = safeJoin(config.projectRoot, config.tasksDir);
+    const boxWidth = Math.min(70, this.screenWidth - 10);
+    const startX = Math.floor((this.screenWidth - boxWidth) / 2);
+    const startY = this.screenHeight - 6;
     
-    const laneConfigs = this.listLaneFilesFromDir(tasksDir);
+    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';
     
-    return fs.readdirSync(lanesDir)
-      .filter(d => fs.statSync(safeJoin(lanesDir, d)).isDirectory())
-      .map(name => {
-        return {
-          name,
-          path: safeJoin(lanesDir, name),
-        };
-      });
-  }
-
-  private listLaneFilesFromDir(tasksDir: string): { name: string }[] {
-    if (!fs.existsSync(tasksDir)) return [];
-    return fs.readdirSync(tasksDir)
-      .filter(f => f.endsWith('.json'))
-      .map(f => {
-        const filePath = safeJoin(tasksDir, f);
-        try {
-          return { name: path.basename(f, '.json') };
-        } catch {
-          return { name: path.basename(f, '.json') };
-        }
-      });
-  }
-
-  private getLaneStatus(lanePath: string, _laneName: string) {
-    const statePath = safeJoin(lanePath, 'state.json');
-    const state = loadState<LaneState & { chatId?: string }>(statePath);
+    // Background box
+    process.stdout.write(`\x1b[${startY};${startX}H`);
+    process.stdout.write(`${cyan}┌${'─'.repeat(boxWidth - 2)}┐${reset}`);
     
-    if (!state) {
-      return { status: 'pending', currentTask: 0, totalTasks: '?', progress: '0%', duration: 0, pipelineBranch: '-', chatId: '-' };
-    }
+    process.stdout.write(`\x1b[${startY + 1};${startX}H`);
+    process.stdout.write(`${cyan}│${reset} ${bold}${title.padEnd(boxWidth - 4)}${reset} ${cyan}│${reset}`);
     
-    const progress = state.totalTasks > 0 ? Math.round((state.currentTaskIndex / state.totalTasks) * 100) : 0;
+    process.stdout.write(`\x1b[${startY + 2};${startX}H`);
+    process.stdout.write(`${cyan}│${reset} ${dim}${hint.padEnd(boxWidth - 4)}${reset} ${cyan}│${reset}`);
     
-    const duration = state.startTime ? (state.endTime 
-      ? state.endTime - state.startTime 
-      : (state.status === 'running' || state.status === 'reviewing' ? Date.now() - state.startTime : 0)) : 0;
+    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}`);
     
-    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 || [],
-    };
-}
+    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
+  // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  
   private formatDuration(ms: number): string {
     if (ms <= 0) return '-';
     const seconds = Math.floor((ms / 1000) % 60);
@@ -1737,7 +1549,7 @@ class InteractiveMonitor {
     if (minutes > 0) return `${minutes}m ${seconds}s`;
     return `${seconds}s`;
   }
-
+  
   private getStatusIcon(status: string): string {
     const icons: Record<string, string> = {
       'running': '🔄',
@@ -1746,28 +1558,132 @@ class InteractiveMonitor {
       'failed': '❌',
       'blocked_dependency': '🚫',
       'pending': '⚪',
-      'reviewing': '👀',
     };
     return icons[status] || '❓';
   }
+  
+  private getLogTypeInfo(type: string): { label: string; color: string } {
+    const { cyan, green, yellow, gray, red, white, dim, magenta, reset } = UI.COLORS;
+    const typeMap: Record<string, { label: string; color: string }> = {
+      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 };
+  }
+  
+  private padWithAnsi(str: string, width: number): string {
+    const visibleLength = stripAnsi(str).length;
+    const padding = Math.max(0, width - visibleLength);
+    return str + ' '.repeat(padding);
+  }
+  
+  /**
+   * Safe string truncation that handles ANSI codes
+   */
+  private safeSubstring(str: string, maxLen: number): string {
+    const stripped = 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
+   */
+  private 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: string): string | null {
   const runsDir = safeJoin(logsDir, 'runs');
   if (!fs.existsSync(runsDir)) return null;
+  
   const runs = fs.readdirSync(runsDir)
     .filter(d => d.startsWith('run-'))
     .map(d => ({ name: d, path: safeJoin(runsDir, d), mtime: fs.statSync(safeJoin(runsDir, d)).mtime.getTime() }))
     .sort((a, b) => b.mtime - a.mtime);
+  
   return runs.length > 0 ? runs[0]!.path : null;
 }
 
-/**
- * Monitor lanes
- */
 async function monitor(args: string[]): Promise<void> {
   const help = args.includes('--help') || args.includes('-h');
   const list = args.includes('--list') || args.includes('-l');
@@ -1793,7 +1709,6 @@ async function monitor(args: string[]): Promise<void> {
     runDir = findLatestRunDir(getLogsDir(config)) || undefined;
     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(getLogsDir(config), 'runs', 'empty');
     }
   }
@@ -1802,9 +1717,9 @@ async function monitor(args: string[]): Promise<void> {
     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();
 }
 
 export = monitor;
-