whale-code 6.5.6 → 6.5.8

package/dist/cli/chat/ChatApp.js

@@ -1,57 +1,48 @@
 /**
- * ChatApp — whale code CLI
+ * ChatApp — whale code CLI (thin orchestrator)
  *
- * Uses Ink's <Static> for ALL completed messages — written to stdout once,
- * never re-rendered. Only the active area (running tools, streaming text,
- * thinking spinner, input) is in Ink's render loop.
- * This prevents screen overwriting and allows scrolling during generation.
+ * Initializes the Zustand store, wires events, delegates rendering to:
+ *   StaticMessages  — <Static> area with header + committed messages
+ *   LiveArea         — streaming indicator, active tools, subagents
+ *   OverlayRouter    — overlay dispatch with crash isolation
+ *
+ * All state lives in the store — zero prop drilling.
  */
 
-import { useState, useEffect, useRef } from "react";
-import { Box, Text, Static, useApp, useInput } from "ink";
-import { SpinnerSlot } from "../shared/SpinnerSlot.js";
-import { canUseAgent, getServerToolCount, getModelShortName, setModel, getPermissionMode, mcpClientManager } from "../services/agent-loop.js";
-import { CompletedMessage } from "./MessageList.js";
-import { ToolIndicator } from "./ToolIndicator.js";
-import { SubagentPanel } from "./SubagentPanel.js";
-import { TeamPanel } from "./TeamPanel.js";
-import { StreamingText } from "./StreamingText.js";
-import { MarkdownText } from "./MarkdownText.js";
-import { ChatInput } from "./ChatInput.js";
-import { StatusBar } from "./StatusBar.js";
-import { StoreSelector } from "./StoreSelector.js";
-import { NodeSelector } from "./NodeSelector.js";
-import { SessionManager } from "./SessionManager.js";
-import { MemoryManager } from "./MemoryManager.js";
-import { NodeManager } from "./NodeManager.js";
-import { ModelSelector } from "./ModelSelector.js";
-import { ThemeSelector } from "./ThemeSelector.js";
-import { RewindViewer, RewindOutcome } from "./RewindViewer.js";
-import { PlanApproval } from "./PlanApproval.js";
-import { RewindManager } from "../services/rewind.js";
+import { useEffect, useRef } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { canUseAgent, getServerToolCount, getModelShortName, getPermissionMode, mcpClientManager } from "../services/agent-loop.js";
 import { interactiveEvents, resolvePlanApproval } from "../services/interactive-tools.js";
 import { colors, symbols } from "../shared/Theme.js";
-import { initTheme, switchTheme } from "../shared/theme-manager.js";
+import { initTheme } from "../shared/theme-manager.js";
 import { WhaleBanner } from "../shared/WhaleBanner.js";
-import { loadKeybindings, matchesBinding, bindingToLabel } from "../services/keybinding-manager.js";
+import { loadKeybindings, matchesBinding } from "../services/keybinding-manager.js";
 import { loadConfig, updateConfig } from "../services/config-store.js";
+import { RewindManager } from "../services/rewind.js";
+import { ChatInput } from "./ChatInput.js";
+import { StatusBar } from "./StatusBar.js";
 import { createRequire } from "module";
 import { fileURLToPath } from "url";
 import { dirname, join } from "path";
 
-// Extracted hooks
+// Zustand store
+import { initChatStore, useChatStore } from "./store.js";
+
+// Hooks and components
 import { useSlashCommands } from "./hooks/useSlashCommands.js";
 import { useAgentLoop } from "./hooks/useAgentLoop.js";
-import { isNonInteractive } from "../services/env-detect.js";
+import { buildOverlayHandlers } from "./hooks/useOverlayHandlers.js";
+import { StaticMessages } from "./components/StaticMessages.js";
+import { LiveArea } from "./components/LiveArea.js";
+import { OverlayRouter } from "./components/OverlayRouter.js";
+import { subscribeElapsed } from "./hooks/useElapsedClock.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const PKG_NAME = "whale-code";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const PKG_VERSION = createRequire(import.meta.url)(join(__dirname, "..", "..", "..", "package.json")).version;
 
-// ── Overlay state — discriminated union replaces 14 booleans + data pairs ──
-
-// ── Types for Static rendering ──
+// Re-export for any remaining consumers
 
 // ── Component ──
 
@@ -60,95 +51,56 @@ export function ChatApp() {
     exit
   } = useApp();
 
-  // Core state
-  const [ready, setReady] = useState(false);
-  const [error, setError] = useState("");
-  const [messages, setMessages] = useState([]);
-  const [streamingText, setStreamingText] = useState("");
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [activeTools, setActiveTools] = useState([]);
-  const [subagentActivity, setSubagentActivity] = useState(new Map());
-  const [completedSubagents, setCompletedSubagents] = useState([]);
-  const [teamState, setTeamState] = useState(null);
+  // Initialize store once
+  const storeRef = useRef(initChatStore(getModelShortName()));
+  const store = storeRef.current;
 
-  // UI state
-  const [userLabel, setUserLabel] = useState("");
-  const [toolsExpanded, setToolsExpanded] = useState(false);
-  const [serverToolsAvailable, setServerToolsAvailable] = useState(0);
-  const [overlay, setOverlay] = useState({
-    type: "none"
-  });
-  const [currentModel, setCurrentModel] = useState(getModelShortName());
-  const [sessionId, setSessionId] = useState(null);
-  const [thinkingEnabled, setThinkingEnabled] = useState(() => {
-    try {
-      return loadConfig().thinking_enabled ?? true;
-    } catch {
-      return true;
-    }
-  });
-  const lastContentUpdateRef = useRef(Date.now());
+  // State selectors
+  const isStreaming = useChatStore(s => s.isStreaming);
+  const overlay = useChatStore(s_0 => s_0.overlay);
+  const messages = useChatStore(s_1 => s_1.messages);
+  const ready = useChatStore(s_2 => s_2.ready);
+  const error = useChatStore(s_3 => s_3.error);
+  const currentModel = useChatStore(s_4 => s_4.currentModel);
+  const thinkingEnabled = useChatStore(s_5 => s_5.thinkingEnabled);
+  const serverToolsAvailable = useChatStore(s_6 => s_6.serverToolsAvailable);
+  const toolsExpanded = useChatStore(s_7 => s_7.toolsExpanded);
 
-  // Streaming activity — verb cycling + elapsed timer
-  const FUN_VERBS = ["thinking", "pondering", "brewing", "cooking", "rowing", "juggling", "weaving", "crafting", "forging", "sketching", "conjuring", "assembling", "sculpting", "composing", "mixing", "polishing", "building", "wiring", "spinning", "mapping", "plotting", "dreaming", "hurdling", "launching", "surfing", "flying", "grabbing", "lifting", "twisting", "rolling"];
-  const [streamElapsed, setStreamElapsed] = useState(0);
-  const streamStartRef = useRef(null);
-  useEffect(() => {
-    if (isStreaming) {
-      if (!streamStartRef.current) streamStartRef.current = Date.now();
-      setStreamElapsed(0);
-      const elapsedInterval = setInterval(() => {
-        if (streamStartRef.current) {
-          setStreamElapsed(Math.floor((Date.now() - streamStartRef.current) / 1000));
-        }
-      }, 1000);
-      return () => {
-        clearInterval(elapsedInterval);
-      };
-    } else {
-      streamStartRef.current = null;
-      setStreamElapsed(0);
-    }
-  }, [isStreaming]);
-
-  // Derive verb index from elapsed time — no separate timer needed
-  const verbIndex = Math.floor(streamElapsed / 4) % FUN_VERBS.length;
+  // Refs
+  const lastContentUpdateRef = useRef(Date.now());
   const rewindManagerRef = useRef(new RewindManager());
   const turnIndexRef = useRef(0);
-
-  // Refs
   const conversationRef = useRef([]);
   const abortRef = useRef(null);
   const accTextRef = useRef("");
   const thinkingChunksRef = useRef(0);
   const thinkingDoneRef = useRef(false);
 
-  // No timer cleanup needed — unified flush timer is managed inside useAgentLoop,
-  // stale polling interval is cleaned up by its own effect.
-
   // ── Init ──
   useEffect(() => {
     initTheme();
+    const s_8 = store.getState();
+    try {
+      const thinkingPref = loadConfig().thinking_enabled;
+      if (thinkingPref != null) s_8.setThinkingEnabled(thinkingPref);
+    } catch {/* use default */}
     const check = canUseAgent();
     if (!check.ready) {
-      setError(check.reason || "Run 'whale login' to authenticate.");
+      s_8.setError(check.reason || "Run 'whale login' to authenticate.");
     } else {
       const config = loadConfig();
-      if (config.email) setUserLabel(config.store_name || config.email);
-      setReady(true);
-      getServerToolCount().then(count => setServerToolsAvailable(count));
+      if (config.email) s_8.setUserLabel(config.store_name || config.email);
+      s_8.setReady(true);
+      getServerToolCount().then(count => store.getState().setServerToolsAvailable(count));
       mcpClientManager.connectAll().catch(() => {});
     }
-
-    // Listen for plan approval requests — push plan content to Static for natural scrolling
     const handlePlanExited = data => {
-      // Push plan content into messages so it renders in the <Static> area
       const content = data.planContent || "(empty plan)";
-      setMessages(prev => [...prev, {
+      store.getState().addMessage({
         role: "assistant",
         text: `  ${symbols.arrowRight} Plan Review — ${data.planFile}\n\n${content}`
-      }]);
-      setOverlay({
+      });
+      store.getState().setOverlay({
         type: "planApproval",
         planContent: data.planContent || "",
         planFile: data.planFile
@@ -161,40 +113,61 @@ export function ChatApp() {
     };
   }, []);
 
-  // ── Keys (configurable via ~/.whale/keybindings.json) ──
+  // Streaming elapsed timer
+  useEffect(() => {
+    if (isStreaming) {
+      const startTime = Date.now();
+      store.getState().setStreamElapsed(0);
+      return subscribeElapsed(() => {
+        store.getState().setStreamElapsed(Math.floor((Date.now() - startTime) / 1000));
+      });
+    } else {
+      store.getState().setStreamElapsed(0);
+    }
+  }, [isStreaming]);
+
+  // Dismiss plan overlay if stream ends
+  useEffect(() => {
+    if (!isStreaming && overlay.type === "planApproval") {
+      store.getState().dismissOverlay();
+      resolvePlanApproval({
+        action: "cancel"
+      });
+    }
+  }, [isStreaming, overlay]);
+
+  // ── Keys ──
   const kb = loadKeybindings();
   useInput((input, key) => {
     if (matchesBinding(kb.exit, input, key)) {
       if (abortRef.current) abortRef.current.abort();
       exit();
     }
-    if (matchesBinding(kb.cancel_stream, input, key) && isStreaming && abortRef.current) {
+    if (matchesBinding(kb.cancel_stream, input, key) && isStreaming && abortRef.current && overlay.type !== "planApproval") {
       abortRef.current.abort();
     }
     if (matchesBinding(kb.toggle_expand, input, key)) {
-      setToolsExpanded(prev_0 => !prev_0);
+      const s_9 = store.getState();
+      s_9.setToolsExpanded(!s_9.toolsExpanded);
     }
     if (matchesBinding(kb.toggle_thinking, input, key)) {
-      setThinkingEnabled(prev_1 => {
-        const next = !prev_1;
-        try {
-          updateConfig({
-            thinking_enabled: next
-          });
-        } catch {/* best effort */}
-        setMessages(msgs => [...msgs, {
-          role: "assistant",
-          text: `  Thinking: ${next ? "on" : "off"}`
-        }]);
-        return next;
+      const s_10 = store.getState();
+      const next = !s_10.thinkingEnabled;
+      s_10.setThinkingEnabled(next);
+      try {
+        updateConfig({
+          thinking_enabled: next
+        });
+      } catch {/* best effort */}
+      s_10.addMessage({
+        role: "assistant",
+        text: `  Thinking: ${next ? "on" : "off"}`
       });
     }
   });
 
-  // ESC abort is now handled by ChatInput's onInterrupt prop — stdin stays active
-  // even when disabled, so ESC always reaches the handler.
-
-  // ── Extracted hooks ──
+  // ── Hooks ──
+  const sendRef = useRef(() => {});
   const {
     handleCommand,
     handleStoreSelect,
@@ -202,36 +175,18 @@ export function ChatApp() {
     handleNodeSelect,
     handleNodeCancel,
     handleSessionSelect,
-    handleMemoryDelete,
-    handleNodeToggle,
-    handleNodeRegister,
-    handleNodeClose
+    handleMemoryDelete
   } = useSlashCommands({
     exit,
-    toolsExpanded,
-    serverToolsAvailable,
-    sessionId,
-    thinkingEnabled,
     conversationRef,
-    setMessages,
-    setStreamingText,
-    setActiveTools,
-    setTeamState,
-    setOverlay,
-    setCurrentModel,
-    setSessionId,
-    setThinkingEnabled,
-    setUserLabel,
-    setServerToolsAvailable,
     rewindCheckpointCount: rewindManagerRef.current.getCheckpointCount(),
     PKG_NAME,
-    PKG_VERSION
+    PKG_VERSION,
+    sendMessage: text => sendRef.current(text)
   });
   const {
     handleSend
   } = useAgentLoop({
-    isStreaming,
-    thinkingEnabled,
     conversationRef,
     abortRef,
     accTextRef,
@@ -239,108 +194,30 @@ export function ChatApp() {
     thinkingChunksRef,
     thinkingDoneRef,
     rewindManagerRef,
-    turnIndexRef,
-    setMessages,
-    setStreamingText,
-    setIsStreaming,
-    setActiveTools,
-    setSubagentActivity,
-    setCompletedSubagents,
-    setTeamState
+    turnIndexRef
   });
+  sendRef.current = handleSend;
 
-  // ── Plan approval handler ──
-  const handlePlanDecision = decision => {
-    setOverlay({
-      type: "none"
-    });
-    resolvePlanApproval(decision);
-  };
-
-  // ── Rewind handler ──
-  const handleRewind = (checkpointIndex, outcome) => {
-    const rm = rewindManagerRef.current;
-    if (outcome === RewindOutcome.Cancel) {
-      setOverlay({
-        type: "none"
-      });
-      return;
-    }
-    if (outcome === RewindOutcome.RevertOnly) {
-      // Revert files only, keep conversation
-      const result = rm.revertFilesFrom(checkpointIndex);
-      setOverlay({
-        type: "none"
-      });
-      const total = result.filesReverted.length + result.filesDeleted.length;
-      const parts = [];
-      if (result.filesReverted.length > 0) parts.push(`${result.filesReverted.length} reverted`);
-      if (result.filesDeleted.length > 0) parts.push(`${result.filesDeleted.length} deleted`);
-      if (result.errors.length > 0) parts.push(`${result.errors.length} errors`);
-      setMessages(prev_2 => [...prev_2, {
-        role: "assistant",
-        text: total > 0 ? `  ${symbols.check} File changes reverted (${parts.join(", ")})` : `  ${symbols.check} No file changes to revert.`
-      }]);
-      return;
-    }
-
-    // RewindOnly or RewindAndRevert
-    const shouldRevertFiles = outcome === RewindOutcome.RewindAndRevert;
-    const result_0 = rm.rewindTo(checkpointIndex);
-
-    // Truncate messages
-    setMessages(prev_3 => prev_3.slice(0, result_0.messageCount));
-
-    // Truncate conversation history to match
-    // We need to figure out how many Anthropic messages correspond to the checkpoint.
-    // The checkpoint stores messageCount which is the UI messages count at that point.
-    // Rebuild conversation from remaining messages by keeping only the conversation
-    // entries up to the corresponding turn.
-    const targetTurnIndex = rm.getCheckpoints()[checkpointIndex]?.turnIndex ?? 0;
-    // Each user/assistant exchange is roughly 2 conversation entries (user + assistant).
-    // But the actual conversation is maintained independently.
-    // We slice it to 2*(turnIndex+1) entries (user+assistant pairs)
-    const conversationSlicePoint = Math.min((targetTurnIndex + 1) * 2, conversationRef.current.length);
-    conversationRef.current = conversationRef.current.slice(0, conversationSlicePoint);
-
-    // Reset turn index to match
-    turnIndexRef.current = targetTurnIndex + 1;
-    setOverlay({
-      type: "none"
-    });
-    const parts_0 = [];
-    if (shouldRevertFiles) {
-      if (result_0.filesReverted.length > 0) parts_0.push(`${result_0.filesReverted.length} files reverted`);
-      if (result_0.filesDeleted.length > 0) parts_0.push(`${result_0.filesDeleted.length} files deleted`);
+  // Sync checkpoints to store
+  useEffect(() => {
+    store.getState().setCheckpoints(rewindManagerRef.current.getCheckpoints());
+  }, [messages]);
+  const overlayHandlers = buildOverlayHandlers({
+    rewindManagerRef,
+    conversationRef,
+    turnIndexRef,
+    slashHandlers: {
+      handleStoreSelect,
+      handleStoreCancel,
+      handleNodeSelect,
+      handleNodeCancel,
+      handleSessionSelect,
+      handleMemoryDelete
     }
-    if (result_0.errors.length > 0) parts_0.push(`${result_0.errors.length} revert errors`);
-    const detail = parts_0.length > 0 ? ` (${parts_0.join(", ")})` : "";
-    setMessages(prev_4 => [...prev_4, {
-      role: "assistant",
-      text: `  ${symbols.check} Rewound to turn ${targetTurnIndex + 1}${detail}`
-    }]);
-  };
+  });
 
   // ── Render ──
 
-  // ALL completed messages go to Static — written to stdout once, never re-rendered.
-  // This keeps the dynamic area small (only active tools + streaming + input),
-  // preventing the constant screen overwriting that blocks scrolling.
-  const staticItems = (() => {
-    const items = [{
-      id: "header",
-      type: "header"
-    }];
-    for (let i = 0; i < messages.length; i++) {
-      items.push({
-        id: `msg-${i}`,
-        type: "message",
-        msg: messages[i],
-        index: i
-      });
-    }
-    return items;
-  })();
   if (error) {
     return /*#__PURE__*/_jsxs(Box, {
       flexDirection: "column",
@@ -365,225 +242,33 @@ export function ChatApp() {
       })
     });
   }
-
-  // Plan approval no longer full-screen — plan content is pushed to Static (scrollable),
-  // PlanApproval renders as an overlay above the persistent input.
-
+  const hasOverlay = overlay.type !== "none";
   return /*#__PURE__*/_jsxs(Box, {
     flexDirection: "column",
     paddingLeft: 1,
     paddingRight: 1,
-    children: [/*#__PURE__*/_jsx(Static, {
-      items: staticItems,
-      children: item => {
-        if (item.type === "header") {
-          const quiet = isNonInteractive || !!process.env.WHALE_QUIET;
-          return /*#__PURE__*/_jsxs(Box, {
-            flexDirection: "column",
-            children: [!quiet && /*#__PURE__*/_jsx(WhaleBanner, {}), /*#__PURE__*/_jsx(Text, {
-              children: " "
-            }), /*#__PURE__*/_jsxs(Text, {
-              children: ["  ", userLabel ? /*#__PURE__*/_jsxs(Text, {
-                color: colors.dim,
-                children: [userLabel, "  "]
-              }) : null, /*#__PURE__*/_jsx(Text, {
-                color: colors.dim,
-                children: currentModel
-              }), thinkingEnabled ? /*#__PURE__*/_jsx(Text, {
-                color: colors.warning,
-                children: "  thinking"
-              }) : null, getPermissionMode() !== "default" && /*#__PURE__*/_jsxs(Text, {
-                color: getPermissionMode() === "yolo" ? colors.error : colors.info,
-                children: ["  ", getPermissionMode()]
-              }), serverToolsAvailable > 0 ? /*#__PURE__*/_jsxs(Text, {
-                color: colors.tertiary,
-                children: ["  ", symbols.dot, " ", serverToolsAvailable, " tools"]
-              }) : null]
-            }), /*#__PURE__*/_jsx(Text, {
-              children: " "
-            })]
-          }, item.id);
-        }
-        return /*#__PURE__*/_jsx(CompletedMessage, {
-          msg: item.msg,
-          index: item.index,
-          toolsExpanded: toolsExpanded
-        }, item.id);
-      }
-    }), teamState ? /*#__PURE__*/_jsx(TeamPanel, {
-      team: teamState
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [isStreaming && /*#__PURE__*/_jsxs(Box, {
-        marginLeft: 2,
-        marginTop: 1,
-        marginBottom: 1,
-        children: [isNonInteractive ? /*#__PURE__*/_jsx(Text, {
-          color: colors.dim,
-          children: "  ..."
-        }) : /*#__PURE__*/_jsx(Text, {
-          color: colors.brand,
-          children: /*#__PURE__*/_jsx(SpinnerSlot, {})
-        }), /*#__PURE__*/_jsxs(Text, {
-          color: colors.dim,
-          children: ["  ", (() => {
-            // Context-aware spinner text
-            if (activeTools.length > 0) {
-              const firstName = activeTools[0].name;
-              return activeTools.length > 1 ? `running ${firstName} (+${activeTools.length - 1} more)` : `running ${firstName}`;
-            }
-            if (subagentActivity.size > 0) {
-              return `${subagentActivity.size} agent${subagentActivity.size > 1 ? "s" : ""} working`;
-            }
-            // Team mode shows TeamPanel instead of spinner — no team check needed here
-            return FUN_VERBS[verbIndex];
-          })()]
-        }), streamElapsed >= 3 && /*#__PURE__*/_jsxs(Text, {
-          color: colors.quaternary,
-          children: ["  ", streamElapsed < 60 ? `${streamElapsed}s` : `${Math.floor(streamElapsed / 60)}:${(streamElapsed % 60).toString().padStart(2, "0")}`]
-        })]
-      }), activeTools.length > 0 && /*#__PURE__*/_jsxs(Box, {
-        flexDirection: "column",
-        marginLeft: 2,
-        children: [activeTools.slice(0, 5).map((tc, i_0) => /*#__PURE__*/_jsxs(Box, {
-          flexDirection: "column",
-          children: [/*#__PURE__*/_jsx(ToolIndicator, {
-            id: `live-${tc.name}-${i_0}`,
-            name: tc.name,
-            status: tc.status,
-            result: tc.result,
-            input: tc.input,
-            expanded: toolsExpanded,
-            progress: tc.progress
-          }), tc.name === "task" && tc.status === "running" && (subagentActivity.size > 0 || completedSubagents.length > 0) && /*#__PURE__*/_jsx(SubagentPanel, {
-            running: subagentActivity,
-            completed: completedSubagents
-          })]
-        }, `live-${tc.name}-${i_0}`)), activeTools.length > 5 && /*#__PURE__*/_jsxs(Text, {
-          color: colors.dim,
-          children: ["  ... and ", activeTools.length - 5, " more"]
-        })]
-      }), activeTools.length === 0 && (subagentActivity.size > 0 || completedSubagents.length > 0) && /*#__PURE__*/_jsx(Box, {
-        flexDirection: "column",
-        marginLeft: 2,
-        children: /*#__PURE__*/_jsx(SubagentPanel, {
-          running: subagentActivity,
-          completed: completedSubagents
-        })
-      }), toolsExpanded && !isStreaming && (() => {
-        // Find collapsed tool results from the last assistant turn
-        const lastAssistant = [...messages].reverse().find(m => m.role === "assistant" && m.toolCalls && m.toolCalls.length > 0);
-        if (!lastAssistant?.toolCalls) return null;
-        const collapsed = lastAssistant.toolCalls.filter(tc_0 => tc_0.result && tc_0.status === "success" && tc_0.result.split("\n").length > 12);
-        if (collapsed.length === 0) return null;
-        return /*#__PURE__*/_jsxs(Box, {
-          flexDirection: "column",
-          marginLeft: 2,
-          marginBottom: 1,
-          children: [/*#__PURE__*/_jsxs(Text, {
-            color: colors.tertiary,
-            children: ["─".repeat(Math.min(60, (process.stdout.columns || 80) - 6)), " ", bindingToLabel(kb.toggle_expand), " close"]
-          }), collapsed.map((tc_1, i_1) => /*#__PURE__*/_jsxs(Box, {
-            flexDirection: "column",
-            marginBottom: 1,
-            children: [/*#__PURE__*/_jsx(Text, {
-              color: colors.info,
-              bold: true,
-              children: tc_1.name
-            }), /*#__PURE__*/_jsx(MarkdownText, {
-              text: tc_1.result
-            })]
-          }, i_1)), /*#__PURE__*/_jsx(Text, {
-            color: colors.tertiary,
-            children: "─".repeat(Math.min(60, (process.stdout.columns || 80) - 6))
-          })]
-        });
-      })(), streamingText && /*#__PURE__*/_jsx(Box, {
-        marginLeft: 2,
-        flexDirection: "column",
-        children: /*#__PURE__*/_jsx(StreamingText, {
-          text: streamingText
-        })
-      })]
-    }), overlay.type === "rewind" && /*#__PURE__*/_jsx(RewindViewer, {
-      checkpoints: rewindManagerRef.current.getCheckpoints(),
-      onRewind: handleRewind,
-      onCancel: () => setOverlay({
-        type: "none"
-      })
-    }), overlay.type === "sessionManager" && /*#__PURE__*/_jsx(SessionManager, {
-      sessions: overlay.sessions,
-      onSelect: handleSessionSelect,
-      onCancel: () => setOverlay({
-        type: "none"
-      })
-    }), overlay.type === "memoryManager" && /*#__PURE__*/_jsx(MemoryManager, {
-      memories: overlay.memories,
-      onDelete: handleMemoryDelete,
-      onCancel: () => setOverlay({
-        type: "none"
-      })
-    }), overlay.type === "nodeManager" && /*#__PURE__*/_jsx(NodeManager, {
-      initialStatus: overlay.status,
-      onToggle: handleNodeToggle,
-      onRegister: handleNodeRegister,
-      onClose: handleNodeClose
-    }), overlay.type === "storeSelect" && /*#__PURE__*/_jsx(StoreSelector, {
-      stores: overlay.stores,
-      currentStoreId: loadConfig().store_id || "",
-      onSelect: handleStoreSelect,
-      onCancel: handleStoreCancel
-    }), overlay.type === "nodeSelect" && /*#__PURE__*/_jsx(NodeSelector, {
-      nodes: overlay.nodes,
-      onSelect: handleNodeSelect,
-      onCancel: handleNodeCancel
-    }), overlay.type === "modelSelect" && /*#__PURE__*/_jsx(ModelSelector, {
-      currentModel: currentModel,
-      onSelect: model => {
-        setOverlay({
-          type: "none"
-        });
-        setModel(model.value);
-        setCurrentModel(model.value);
-        setMessages(prev_5 => [...prev_5, {
-          role: "assistant",
-          text: `  ${symbols.check} Model: ${model.label}  (${model.modelId})`
-        }]);
-      },
-      onCancel: () => setOverlay({
-        type: "none"
-      })
-    }), overlay.type === "themeSelect" && /*#__PURE__*/_jsx(ThemeSelector, {
-      onSelect: preset => {
-        setOverlay({
-          type: "none"
-        });
-        switchTheme(preset.id);
-        setMessages(prev_6 => [...prev_6, {
-          role: "assistant",
-          text: `  ${symbols.check} Theme: ${preset.label}`
-        }]);
-      },
-      onCancel: () => setOverlay({
-        type: "none"
-      })
-    }), overlay.type === "planApproval" && /*#__PURE__*/_jsx(PlanApproval, {
-      planFile: overlay.planFile,
-      onDecision: handlePlanDecision
-    }), !isStreaming && messages.length > 0 && /*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsx(StaticMessages, {}), !hasOverlay && /*#__PURE__*/_jsx(LiveArea, {
+      expandBinding: kb.toggle_expand
+    }), /*#__PURE__*/_jsx(OverlayRouter, {
+      handlers: overlayHandlers
+    }), messages.length > 0 && !isStreaming && !hasOverlay && /*#__PURE__*/_jsx(Text, {
       children: " "
-    }), /*#__PURE__*/_jsx(ChatInput, {
-      onSubmit: handleSend,
-      onCommand: handleCommand,
-      disabled: isStreaming || overlay.type === "planApproval",
-      agentName: "whale code",
-      onInterrupt: () => abortRef.current?.abort()
-    }), /*#__PURE__*/_jsx(StatusBar, {
-      permissionMode: getPermissionMode(),
-      model: currentModel,
-      thinkingEnabled: thinkingEnabled,
-      serverTools: serverToolsAvailable,
-      isStreaming: isStreaming,
-      toolsExpanded: toolsExpanded
+    }), !hasOverlay && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ChatInput, {
+        onSubmit: handleSend,
+        onCommand: handleCommand,
+        disabled: isStreaming,
+        overlayActive: false,
+        agentName: "whale code",
+        onInterrupt: () => abortRef.current?.abort()
+      }), /*#__PURE__*/_jsx(StatusBar, {
+        permissionMode: getPermissionMode(),
+        model: currentModel,
+        thinkingEnabled: thinkingEnabled,
+        serverTools: serverToolsAvailable,
+        isStreaming: isStreaming,
+        toolsExpanded: toolsExpanded
+      })]
     })]
   });
 }