centaurus-cli 3.1.2 → 3.1.4

package/dist/ui/components/App.js

@@ -3,6 +3,7 @@ import { Box, Text, useApp, useInput, Static } from "ink";
 import SelectInput from "ink-select-input";
 import { CircularSelectInput } from "./CircularSelectInput.js";
 import stripAnsi from "strip-ansi";
+import { ThemeContext, deriveThemeColors, setGlobalAccentColor, DEFAULT_ACCENT_COLOR } from "../theme.js";
 import TextInput from "ink-text-input";
 import * as path from "path";
 import { quickLog } from "../../utils/conversation-logger.js";
@@ -11,6 +12,7 @@ import { InputBox } from "./InputBox.js";
 import { MessageDisplay, countFilesInMessage } from "./MessageDisplay.js";
 import { StreamingMessageDisplay } from "./StreamingMessageDisplay.js";
 import { LoadingIndicator } from "./LoadingIndicator.js";
+import { ModelPicker } from "./ModelPicker.js";
 import { AgentTimer } from "./AgentTimer.js";
 import { SelectPrompt } from "./SelectPrompt.js";
 import { ConfirmPrompt } from "./ConfirmPrompt.js";
@@ -20,16 +22,24 @@ import { DiffViewer } from "./DiffViewer.js";
 import { PasswordPrompt } from "./PasswordPrompt.js";
 import { VersionUpdatePrompt } from "./VersionUpdatePrompt.js";
 import { InteractiveShell } from "./InteractiveShell.js";
+import { CompactShellPreview } from "./CompactShellPreview.js";
 import { checkForUpdates } from "../../utils/version-checker.js";
 import { runInteractiveEditor, runWSLEditor, runDockerEditor, runSSHEditor, runNestedDockerSSHEditor } from "../../utils/editor-utils.js";
 import { DetailedPlanReviewScreen } from "./DetailedPlanReviewScreen.js";
 import { TaskCompletedMessage } from "./TaskCompletedMessage.js";
+import { TodoListMessage } from "./TodoListMessage.js";
 import { PlanAcceptedMessage } from "./PlanAcceptedMessage.js";
+import { PlanQuestionScreen } from "./PlanQuestionScreen.js";
+import { PlanQuestionMessage } from "./PlanQuestionMessage.js";
 import { MCPAddScreen } from "./MCPAddScreen.js";
 import { MCPServerListScreen } from "./MCPServerListScreen.js";
 import { MCPListScreen } from "./MCPListScreen.js";
 import { WorkflowCreatorScreen } from "./WorkflowCreatorScreen.js";
 import { RulesEditorScreen } from "./RulesEditorScreen.js";
+import { SkillCreatorScreen } from "./SkillCreatorScreen.js";
+import { SubAgentListScreen } from "./SubAgentListScreen.js";
+import { SubAgentViewScreen } from "./SubAgentViewScreen.js";
+import { SubAgentManager } from "../../services/sub-agent-manager.js";
 import { processTerminalOutput } from "../../utils/terminal-output.js";
 import { BackgroundTaskManager } from "../../services/background-task-manager.js";
 import { MonitorModeAIPanel } from "./MonitorModeAIPanel.js";
@@ -44,6 +54,9 @@ import { logDebug, logError } from "../../utils/logger.js";
 import { getTerminalDimensions } from "../../hooks/useTerminalDimensions.js";
 import { ConfigManager } from "../../config/manager.js";
 import { getGitDiffStats, getRemoteGitDiffStats } from "../../utils/git-stats.js";
+import { limitChatHistoryForDisplay } from "../utils/chat-history-limit.js";
+import { TunnelCommandsManager } from "../../utils/tunnel-commands-manager.js";
+import { detectIntent } from "../../utils/input-classifier.js";
 function isOutsideCwd(filePath, cwd) {
   if (!filePath || !cwd) return false;
   try {
@@ -54,6 +67,11 @@ function isOutsideCwd(filePath, cwd) {
     return false;
   }
 }
+const ScreenContainer = ({ children }) => {
+  const rows = process.stdout.rows || 24;
+  const maxContentHeight = Math.max(3, rows - 2);
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", height: maxContentHeight, overflow: "hidden" }, children), /* @__PURE__ */ React.createElement(Box, { justifyContent: "flex-end" }, /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[truncated]")));
+};
 const BANNER_ITEM = { id: "__banner__", role: "__banner__", content: "", timestamp: /* @__PURE__ */ new Date(0) };
 const MessageList = React.memo(({ history, current, showBanner }) => {
   const staticItems = React.useMemo(() => {
@@ -83,10 +101,23 @@ const MessageList = React.memo(({ history, current, showBanner }) => {
         TaskCompletedMessage,
         {
           key: item.id,
-          taskNumber: msg.taskCompletion.taskNumber,
-          totalTasks: msg.taskCompletion.totalTasks,
-          taskDescription: msg.taskCompletion.taskDescription,
-          completionNote: msg.taskCompletion.completionNote
+          completedStepNumber: msg.taskCompletion.completedStepNumber,
+          completedStepDescription: msg.taskCompletion.completedStepDescription,
+          completedCount: msg.taskCompletion.completedCount,
+          totalCount: msg.taskCompletion.totalCount,
+          completionNote: msg.taskCompletion.completionNote,
+          allSteps: msg.taskCompletion.allSteps
+        }
+      );
+    }
+    if (msg.todoList) {
+      return /* @__PURE__ */ React.createElement(
+        TodoListMessage,
+        {
+          key: item.id,
+          todos: msg.todoList.todos,
+          completedCount: msg.todoList.completedCount,
+          totalCount: msg.todoList.totalCount
         }
       );
     }
@@ -96,22 +127,35 @@ const MessageList = React.memo(({ history, current, showBanner }) => {
         {
           key: item.id,
           planTitle: msg.planAccepted.planTitle,
-          totalTasks: msg.planAccepted.totalTasks,
-          tasks: msg.planAccepted.tasks
+          totalSteps: msg.planAccepted.totalSteps,
+          steps: msg.planAccepted.steps
+        }
+      );
+    }
+    if (msg.planQuestion) {
+      return /* @__PURE__ */ React.createElement(
+        PlanQuestionMessage,
+        {
+          key: item.id,
+          question: msg.planQuestion.question,
+          options: msg.planQuestion.options,
+          userAnswer: msg.planQuestion.userAnswer,
+          wasSkipped: msg.planQuestion.wasSkipped
         }
       );
     }
     return /* @__PURE__ */ React.createElement(MessageDisplay, { key: item.id, message: item, fileCountBefore });
   }), current && !history.some((msg) => msg.id === current.id) && (() => {
     const dimensions = getTerminalDimensions();
-    const canStream = current.role === "assistant" && current.shouldStream !== false && dimensions.shouldEnableStreaming;
+    const hasActiveThoughts = current.thoughts && current.thoughts.length > 0 && current.thinkingDuration === void 0;
+    const canStream = current.role === "assistant" && current.shouldStream !== false && (dimensions.shouldEnableStreaming || hasActiveThoughts);
     if (canStream) {
       return /* @__PURE__ */ React.createElement(
         StreamingMessageDisplay,
         {
           key: current.id,
           message: current,
-          maxLines: dimensions.maxStreamingLines
+          maxLines: dimensions.shouldEnableStreaming ? dimensions.maxStreamingLines : 1
         }
       );
     } else {
@@ -155,12 +199,13 @@ const ApprovalSection = React.memo(({ approvalRequest, onApprove }) => {
 });
 const RenameInputScreen = ({ currentTitle, onRename, onCancel }) => {
   const [value, setValue] = React.useState(currentTitle);
+  const _theme = React.useContext(ThemeContext);
   useInput((input, key) => {
     if (key.escape) {
       onCancel();
     }
   });
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "\u270F\uFE0F Rename Chat"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, "Current name: ", /* @__PURE__ */ React.createElement(Text, { color: "#00cc66" }, currentTitle))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, "New name: "), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: _theme.accent, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: _theme.accent, bold: true }, "\u270F\uFE0F Rename Chat"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, "Current name: ", /* @__PURE__ */ React.createElement(Text, { color: "#00cc66" }, currentTitle))), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, null, "New name: "), /* @__PURE__ */ React.createElement(
     TextInput,
     {
       value,
@@ -200,10 +245,13 @@ const App = ({
   onPlanModeChange,
   onPlanApprovalRequest,
   onPlanCreated,
+  onPlanQuestionRequest,
   onTaskCompleted,
+  onTodoListUpdate,
   onFileChangeSummary,
   onCommandModeChange,
   onToggleCommandMode,
+  onTogglePlanMode,
   onBackgroundModeChange,
   onToggleBackgroundMode,
   onBackgroundTaskCountChange,
@@ -248,7 +296,16 @@ const App = ({
   onPromptAnswered,
   getMainConversation,
   onWarpifySession,
+  onCustomTunnelStateChange,
   onAiAutoSuggestChange,
+  onLimitChatHistoryChange,
+  onThemeColorChange,
+  onSubAgentListScreenSetup,
+  onSubAgentViewScreenSetup,
+  onSubAgentTerminateScreenSetup,
+  onSkillEditorScreenSetup,
+  onSkillSave,
+  onSkillExecute,
   onWorkflowCreatorSetup,
   onWorkflowSave,
   onRulesEditorSetup,
@@ -283,6 +340,10 @@ const App = ({
       return getModelContextWindowSync(model);
     } catch (error) {
       if (model.toLowerCase().includes("kimi")) return 128e3;
+      if (model.toLowerCase().includes("qwen")) return 131072;
+      if (model.toLowerCase().includes("gpt-oss")) return 128e3;
+      if (model.toLowerCase().includes("nemotron")) return 131072;
+      if (model.toLowerCase().includes("deepseek")) return 131072;
       if (model.toLowerCase().includes("gemini")) return 1e6;
       return 1e6;
     }
@@ -320,6 +381,7 @@ const App = ({
     maxTokens: getMaxTokensForModel(initialModel || "gemini-2.5-flash"),
     contextLimitReached: false,
     shellState: void 0,
+    customTunnel: void 0,
     isInteractiveEditorMode: false,
     pickerOptions: void 0,
     approvalRequest: void 0,
@@ -331,6 +393,8 @@ const App = ({
     sessionQuotaExhausted: false,
     sessionQuotaTimeRemaining: "",
     aiAutoSuggest: false,
+    limitChatHistory: true,
+    themeColor: "#00ccff",
     rulesEditorRequest: void 0,
     interruptQueue: [],
     commandQueue: [],
@@ -340,22 +404,44 @@ const App = ({
     lastFileChangeSummary: null
   });
   const lastTerminalWidthRef = React.useRef(process.stdout.columns || 80);
+  const lastTerminalHeightRef = React.useRef(process.stdout.rows || 24);
+  const shellFocusedRef = React.useRef(false);
   const isCleaningRef = React.useRef(false);
   const savedHistoryRef = React.useRef([]);
   const savedCurrentRef = React.useRef(null);
+  const previousHiddenMessageCountRef = React.useRef(null);
   const resizeDebounceRef = React.useRef(null);
   const restoreMessagesTimeoutRef = React.useRef(null);
   const preservedInputTextRef = React.useRef("");
+  React.useEffect(() => {
+    shellFocusedRef.current = !!state.shellState?.isFocused;
+  }, [state.shellState?.isFocused]);
   React.useEffect(() => {
     const DEBOUNCE_MS = 300;
     const handleResize = () => {
       const newWidth = process.stdout.columns || 80;
+      const newHeight = process.stdout.rows || 24;
       if (resizeDebounceRef.current) {
         clearTimeout(resizeDebounceRef.current);
       }
       resizeDebounceRef.current = setTimeout(() => {
         const oldWidth = lastTerminalWidthRef.current;
-        if (newWidth !== oldWidth && !isCleaningRef.current) {
+        const oldHeight = lastTerminalHeightRef.current;
+        const heightChanged = newHeight !== oldHeight;
+        const widthChanged = newWidth !== oldWidth;
+        lastTerminalHeightRef.current = newHeight;
+        if (shellFocusedRef.current && (heightChanged || widthChanged)) {
+          lastTerminalWidthRef.current = newWidth;
+          clearScreen();
+          return;
+        }
+        if (altScreenActiveRef.current && (heightChanged || widthChanged)) {
+          lastTerminalWidthRef.current = newWidth;
+          process.stdout.write("\x1B[2J\x1B[H");
+          setState((prev) => ({ ...prev, messageListKey: (prev.messageListKey ?? 0) + 1 }));
+          return;
+        }
+        if (widthChanged && !isCleaningRef.current) {
           lastTerminalWidthRef.current = newWidth;
           isCleaningRef.current = true;
           clearScreen();
@@ -425,8 +511,13 @@ const App = ({
         const generalConfig = configManager.load();
         setState((prev) => ({
           ...prev,
-          aiAutoSuggest: generalConfig.aiAutoSuggest === true
+          aiAutoSuggest: generalConfig.aiAutoSuggest === true,
+          limitChatHistory: generalConfig.limitChatHistory !== false,
+          themeColor: generalConfig.themeColor || DEFAULT_ACCENT_COLOR
         }));
+        if (generalConfig.themeColor) {
+          setGlobalAccentColor(generalConfig.themeColor);
+        }
         const { quickLog: quickLog2 } = await import("../../utils/conversation-logger.js");
         quickLog2(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] loadModelsConfig effect starting, currentModel: ${initialModel}
 `);
@@ -567,6 +658,11 @@ const App = ({
   const ignoreIncomingAIUpdatesRef = React.useRef(false);
   const warpifyInProgressRef = React.useRef(false);
   const warpifyTerminatingCommandRef = React.useRef(null);
+  const tunnelOutputPositionRef = React.useRef(0);
+  const tunnelOutputFlushTimerRef = React.useRef(null);
+  const latestShellOutputRef = React.useRef("");
+  const customTunnelRef = React.useRef(void 0);
+  const shellRunningRef = React.useRef(false);
   const isStreamingRef = React.useRef(false);
   const bufferedContentRef = React.useRef("");
   const bufferedMessageIdRef = React.useRef(null);
@@ -579,7 +675,7 @@ const App = ({
       if (!enableStreaming) {
         bufferedContentRef.current += chunk;
         setState((prev) => {
-          if (prev.currentMessage && prev.currentMessage.role === "assistant" && prev.currentMessage.shouldStream === false) {
+          if (prev.currentMessage && prev.currentMessage.role === "assistant") {
             return {
               ...prev,
               isAiWorking: true
@@ -666,6 +762,8 @@ const App = ({
   React.useEffect(() => {
     onThoughtStream((thought) => {
       if (ignoreIncomingAIUpdatesRef.current) return;
+      const thoughtDimensions = getTerminalDimensions();
+      const maxThoughtLines = thoughtDimensions.shouldEnableStreaming ? 3 : 1;
       try {
         quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Received thought chunk (${thought.length} chars): ${thought.substring(0, 100)}
 `);
@@ -682,7 +780,7 @@ const App = ({
           }
           thoughtAccumulatorRef.current = thought;
           const allLines2 = thoughtAccumulatorRef.current.split("\n").filter((line) => line.trim());
-          const last3Lines2 = allLines2.slice(-3);
+          const lastNLines2 = allLines2.slice(-maxThoughtLines);
           const now = /* @__PURE__ */ new Date();
           const newMessage = {
             id: `assistant-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
@@ -691,7 +789,7 @@ const App = ({
             // Empty content initially, will be filled when text arrives
             timestamp: now,
             shouldStream: true,
-            thoughts: last3Lines2
+            thoughts: lastNLines2
           };
           let newHistory = prev.messageHistory;
           if (prev.currentMessage && prev.currentMessage.role === "assistant" && prev.currentMessage.thinkingDuration !== void 0 && prev.currentMessage.content.trim() !== "") {
@@ -715,9 +813,9 @@ const App = ({
         }
         thoughtAccumulatorRef.current += thought;
         const allLines = thoughtAccumulatorRef.current.split("\n").filter((line) => line.trim());
-        const last3Lines = allLines.slice(-3);
+        const lastNLines = allLines.slice(-maxThoughtLines);
         try {
-          quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Accumulated ${allLines.length} total lines, showing last 3: ${JSON.stringify(last3Lines)}
+          quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Accumulated ${allLines.length} total lines, showing last ${maxThoughtLines}: ${JSON.stringify(lastNLines)}
 `);
         } catch (e) {
         }
@@ -725,7 +823,7 @@ const App = ({
           ...prev,
           currentMessage: {
             ...prev.currentMessage,
-            thoughts: last3Lines,
+            thoughts: lastNLines,
             thinkingDuration: void 0
             // Clear duration while thinking
           }
@@ -801,6 +899,63 @@ const App = ({
       };
     });
   }, [shouldSkipMessage]);
+  const getRegisteredTunnelCommands = useCallback(() => {
+    const tunnelCommandsManager = TunnelCommandsManager.getInstance();
+    tunnelCommandsManager.loadSync();
+    return tunnelCommandsManager.listCommands();
+  }, []);
+  React.useEffect(() => {
+    latestShellOutputRef.current = state.shellState?.output || "";
+  }, [state.shellState?.output]);
+  React.useEffect(() => {
+    customTunnelRef.current = state.customTunnel;
+    shellRunningRef.current = !!state.shellState?.isRunning;
+  }, [state.customTunnel, state.shellState?.isRunning]);
+  const flushTunnelOutput = useCallback(() => {
+    const currentOutput = latestShellOutputRef.current;
+    const lastPos = tunnelOutputPositionRef.current;
+    if (currentOutput.length <= lastPos) return;
+    const delta = currentOutput.substring(lastPos);
+    tunnelOutputPositionRef.current = currentOutput.length;
+    const processedDelta = processTerminalOutput(delta);
+    if (!processedDelta.trim()) return;
+    setState((prev) => {
+      if (!prev.customTunnel) return prev;
+      return {
+        ...prev,
+        messageHistory: [...prev.messageHistory, {
+          id: `tunnel-output-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+          role: "tool",
+          content: "",
+          timestamp: /* @__PURE__ */ new Date(),
+          toolExecution: {
+            toolName: "execute_command",
+            status: "completed",
+            result: processedDelta,
+            arguments: {
+              command: prev.customTunnel.shellCommand,
+              CommandLine: prev.customTunnel.shellCommand,
+              cwd: prev.shellState?.cwd || process.cwd()
+            }
+          }
+        }]
+      };
+    });
+  }, []);
+  React.useEffect(() => {
+    if (!state.customTunnel || !state.shellState?.output) return;
+    if (tunnelOutputFlushTimerRef.current) {
+      clearTimeout(tunnelOutputFlushTimerRef.current);
+    }
+    tunnelOutputFlushTimerRef.current = setTimeout(() => {
+      flushTunnelOutput();
+    }, 600);
+    return () => {
+      if (tunnelOutputFlushTimerRef.current) {
+        clearTimeout(tunnelOutputFlushTimerRef.current);
+      }
+    };
+  }, [state.shellState?.output, state.customTunnel, flushTunnelOutput]);
   React.useEffect(() => {
     onDirectMessage((message) => {
       if (ignoreIncomingAIUpdatesRef.current) return;
@@ -931,7 +1086,7 @@ const App = ({
   const pendingShellRef = React.useRef(null);
   React.useEffect(() => {
     onPickerSetup((options) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "picker",
@@ -942,7 +1097,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onChatPickerSetup((chats, currentChatId) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "chat-picker",
@@ -954,7 +1109,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onChatDeletePickerSetup((chats, currentChatId) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "chat-delete-picker",
@@ -967,7 +1122,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onChatListSetup((chats, currentChatId) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "chat-list-view",
@@ -979,7 +1134,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onChatRenamePickerSetup((chats, currentChatId) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "chat-rename-picker",
@@ -1021,6 +1176,52 @@ const App = ({
       }));
     });
   }, [onAiAutoSuggestChange]);
+  React.useEffect(() => {
+    onLimitChatHistoryChange((enabled) => {
+      setState((prev) => ({
+        ...prev,
+        limitChatHistory: enabled
+      }));
+    });
+  }, [onLimitChatHistoryChange]);
+  React.useEffect(() => {
+    onThemeColorChange((color) => {
+      setGlobalAccentColor(color);
+      setState((prev) => ({ ...prev, themeColor: color }));
+    });
+  }, [onThemeColorChange]);
+  React.useEffect(() => {
+    onSubAgentListScreenSetup((agents) => {
+      enterAltScreen();
+      setState((prev) => ({
+        ...prev,
+        screen: "sub-agent-list",
+        subAgentListData: agents
+      }));
+    });
+  }, [onSubAgentListScreenSetup]);
+  React.useEffect(() => {
+    onSubAgentViewScreenSetup((agentId) => {
+      enterAltScreen();
+      setState((prev) => ({ ...prev, screen: "sub-agent-view", viewingSubAgentId: agentId }));
+    });
+  }, [onSubAgentViewScreenSetup]);
+  React.useEffect(() => {
+    onSubAgentTerminateScreenSetup((agents) => {
+      enterAltScreen();
+      setState((prev) => ({
+        ...prev,
+        screen: "sub-agent-terminate",
+        subAgentListData: agents.map((a) => ({ ...a, turnCount: 0, fileOpsCount: 0 }))
+      }));
+    });
+  }, [onSubAgentTerminateScreenSetup]);
+  React.useEffect(() => {
+    onSkillEditorScreenSetup((request) => {
+      enterAltScreen();
+      setState((prev) => ({ ...prev, screen: "skill-editor", skillEditorRequest: request }));
+    });
+  }, [onSkillEditorScreenSetup]);
   React.useEffect(() => {
     onSetAutoModeSetup((enabled) => {
       if (setAutoModeCallbackRef.current) {
@@ -1112,7 +1313,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onBackgroundTaskListSetup((tasks) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "background-task-list",
@@ -1123,7 +1324,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onBackgroundTaskCancelSetup((tasks) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "background-task-cancel",
@@ -1220,7 +1421,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onMCPAddScreenSetup(() => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "mcp-add",
@@ -1230,7 +1431,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onWorkflowCreatorSetup((initialSteps) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "workflow-creator",
@@ -1241,7 +1442,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onRulesEditorSetup((request) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "rules-editor",
@@ -1252,7 +1453,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onMCPRemoveScreenSetup((servers) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "mcp-remove",
@@ -1263,7 +1464,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onMCPEnableScreenSetup((servers) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "mcp-enable",
@@ -1274,7 +1475,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onMCPDisableScreenSetup((servers) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "mcp-disable",
@@ -1285,7 +1486,7 @@ const App = ({
   }, []);
   React.useEffect(() => {
     onMCPListScreenSetup((servers) => {
-      clearScreen();
+      enterAltScreen();
       setState((prev) => ({
         ...prev,
         screen: "mcp-list",
@@ -1294,6 +1495,27 @@ const App = ({
       }));
     });
   }, []);
+  const ALT_SCREEN_EXCLUDED = ["chat", "version-update", "approval"];
+  const altScreenActiveRef = React.useRef(false);
+  const enterAltScreen = React.useCallback(() => {
+    if (!altScreenActiveRef.current) {
+      process.stdout.write("\x1B[?1049h\x1B[2J\x1B[H");
+      altScreenActiveRef.current = true;
+    }
+  }, []);
+  const exitAltScreen = React.useCallback(() => {
+    if (altScreenActiveRef.current) {
+      process.stdout.write("\x1B[?1049l");
+      altScreenActiveRef.current = false;
+    }
+  }, []);
+  React.useEffect(() => {
+    if (ALT_SCREEN_EXCLUDED.includes(state.screen) && altScreenActiveRef.current) {
+      exitAltScreen();
+      clearScreen();
+      setState((prev) => ({ ...prev, messageListKey: (prev.messageListKey ?? 0) + 1 }));
+    }
+  }, [state.screen, exitAltScreen, clearScreen]);
   React.useEffect(() => {
     onUIMessageHistoryUpdate(state.messageHistory);
   }, [state.messageHistory]);
@@ -1307,25 +1529,92 @@ const App = ({
 `);
         } catch (e) {
         }
-        if (update.status === "executing") {
-          if (update.arguments?.shell_input) {
+        if (update.arguments?._customTunnelExec) {
+          if (update.status === "executing") {
             setState((prev) => ({
               ...prev,
-              // Move current message to history if needed
               messageHistory: prev.currentMessage && !shouldSkipMessage(prev.currentMessage) ? [...prev.messageHistory, prev.currentMessage] : prev.messageHistory,
-              // Update current message to show the tool execution
-              currentMessage: {
-                id: `tool-execute_command-${Date.now()}`,
+              currentMessage: null,
+              isLoading: false,
+              isAiWorking: true
+            }));
+            return;
+          }
+          if (update.status === "completed" || update.status === "error") {
+            const tunnelResult = update.result || "(no output)";
+            const tunnelError = update.error;
+            setState((prev) => ({
+              ...prev,
+              messageHistory: [...prev.messageHistory, {
+                id: `tunnel-exec-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
                 role: "tool",
                 content: "",
                 timestamp: /* @__PURE__ */ new Date(),
-                toolExecution: { ...update }
-              },
-              isLoading: false,
+                toolExecution: {
+                  toolName: "execute_command",
+                  status: update.status,
+                  result: tunnelResult,
+                  error: tunnelError,
+                  arguments: update.arguments
+                }
+              }],
+              currentMessage: null,
               isAiWorking: true
+              // AI loop continues
             }));
             return;
           }
+        }
+        if (update.status === "executing") {
+          if (bufferedContentRef.current.length > 0) {
+            const flushedContent = bufferedContentRef.current;
+            bufferedContentRef.current = "";
+            bufferedMessageIdRef.current = null;
+            setState((prev) => {
+              if (prev.currentMessage && prev.currentMessage.role === "assistant") {
+                const flushedMessage = {
+                  ...prev.currentMessage,
+                  content: prev.currentMessage.content.trim() === "" ? flushedContent : prev.currentMessage.content + flushedContent,
+                  shouldStream: false
+                };
+                return {
+                  ...prev,
+                  messageHistory: shouldSkipMessage(flushedMessage) ? prev.messageHistory : [...prev.messageHistory, flushedMessage],
+                  currentMessage: null
+                };
+              }
+              return prev;
+            });
+          }
+          if (update.arguments?.shell_input) {
+            setState((prev) => {
+              if (prev.customTunnel) {
+                return {
+                  ...prev,
+                  messageHistory: prev.currentMessage && !shouldSkipMessage(prev.currentMessage) ? [...prev.messageHistory, prev.currentMessage] : prev.messageHistory,
+                  currentMessage: null,
+                  isLoading: false,
+                  isAiWorking: true
+                };
+              }
+              return {
+                ...prev,
+                // Move current message to history if needed
+                messageHistory: prev.currentMessage && !shouldSkipMessage(prev.currentMessage) ? [...prev.messageHistory, prev.currentMessage] : prev.messageHistory,
+                // Update current message to show the tool execution
+                currentMessage: {
+                  id: `tool-execute_command-${Date.now()}`,
+                  role: "tool",
+                  content: "",
+                  timestamp: /* @__PURE__ */ new Date(),
+                  toolExecution: { ...update }
+                },
+                isLoading: false,
+                isAiWorking: true
+              };
+            });
+            return;
+          }
           const command = update.arguments?.command || update.arguments?.CommandLine || update.arguments?.commandLine || "";
           const timeoutId = setTimeout(() => {
             if (pendingShellRef.current) {
@@ -1459,17 +1748,27 @@ const App = ({
                 ShellInputAgent.terminateSession(prev.shellState.shellId);
               }
             }
+            const keepShellState = isShellInput && !isDeadShellError;
+            const tunnelClosedMessage = prev.customTunnel && !keepShellState ? {
+              id: `custom-tunnel-closed-${Date.now()}`,
+              role: "assistant",
+              content: `Custom tunnel closed for \`${prev.customTunnel.matchedCommand}\`. Chat input will now go back to the AI.`,
+              timestamp: /* @__PURE__ */ new Date(),
+              shouldStream: false
+            } : null;
+            const skipShellMessage = keepShellState && prev.customTunnel;
             return {
               ...prev,
               // If it's just shell input, preserve the shell state UNLESS it's a dead shell error
-              shellState: isShellInput && !isDeadShellError ? prev.shellState : void 0,
-              messageHistory: [...prev.messageHistory, shellMessage],
+              shellState: keepShellState ? prev.shellState : void 0,
+              customTunnel: keepShellState ? prev.customTunnel : void 0,
+              messageHistory: skipShellMessage ? prev.messageHistory : tunnelClosedMessage ? [...prev.messageHistory, tunnelClosedMessage, shellMessage] : [...prev.messageHistory, shellMessage],
               currentMessage: null,
               // Determine if AI should keep working:
               // - Normal shell input: preserve state (keep thrusting if in chain)
               // - Agent-started shell completed successfully: preserve state (agent loop continues)
               // - Dead shell error or manual shell completed: STOP thrusting (reset to false)
-              isAiWorking: isCommandModeExecution ? false : isShellInput && !isDeadShellError ? prev.isAiWorking : isAgentStarted && !shouldKill ? prev.isAiWorking : false
+              isAiWorking: isCommandModeExecution ? false : keepShellState ? prev.isAiWorking : isAgentStarted && !shouldKill ? prev.isAiWorking : false
             };
           });
           return;
@@ -1545,9 +1844,18 @@ const App = ({
           let newHistory2 = prev.messageHistory;
           let pendingThinkingDuration = void 0;
           if (prev.currentMessage) {
-            const isThoughtOnlyMessage = prev.currentMessage.role === "assistant" && prev.currentMessage.content.trim() === "" && prev.currentMessage.thinkingDuration !== void 0;
+            let messageToCommit = prev.currentMessage;
+            if (bufferedContentRef.current.length > 0 && messageToCommit.role === "assistant" && messageToCommit.content.trim() === "") {
+              messageToCommit = {
+                ...messageToCommit,
+                content: bufferedContentRef.current
+              };
+              bufferedContentRef.current = "";
+              bufferedMessageIdRef.current = null;
+            }
+            const isThoughtOnlyMessage = messageToCommit.role === "assistant" && messageToCommit.content.trim() === "" && messageToCommit.thinkingDuration !== void 0;
             if (isThoughtOnlyMessage) {
-              pendingThinkingDuration = prev.currentMessage.thinkingDuration;
+              pendingThinkingDuration = messageToCommit.thinkingDuration;
               try {
                 quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Skipping thought-only message (no content), saving thinkingDuration ${pendingThinkingDuration}s for tool ${update.toolName}
 `);
@@ -1555,11 +1863,11 @@ const App = ({
               }
             } else {
               try {
-                quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Moving current message (${prev.currentMessage.role}) to history for new tool ${update.toolName}
+                quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Moving current message (${messageToCommit.role}) to history for new tool ${update.toolName}
 `);
               } catch (e) {
               }
-              newHistory2 = [...prev.messageHistory, prev.currentMessage];
+              newHistory2 = [...prev.messageHistory, messageToCommit];
             }
           }
           const toolMessageWithDuration = {
@@ -1581,7 +1889,13 @@ const App = ({
         }
         let newHistory = prev.messageHistory;
         if (prev.currentMessage && !shouldSkipMessage(prev.currentMessage)) {
-          newHistory = [...prev.messageHistory, prev.currentMessage];
+          let msgToCommit = prev.currentMessage;
+          if (bufferedContentRef.current.length > 0 && msgToCommit.role === "assistant" && msgToCommit.content.trim() === "") {
+            msgToCommit = { ...msgToCommit, content: bufferedContentRef.current };
+            bufferedContentRef.current = "";
+            bufferedMessageIdRef.current = null;
+          }
+          newHistory = [...prev.messageHistory, msgToCommit];
         }
         return {
           ...prev,
@@ -1820,7 +2134,7 @@ const App = ({
         return prev;
       });
     });
-  }, [onMessage]);
+  }, [appendStaticInfoMessage, onMessage, onShellInput, onSkillExecute, shouldSkipMessage, state]);
   React.useEffect(() => {
     onPlanModeChange((planMode) => {
       setState((prev) => ({
@@ -1969,29 +2283,52 @@ const App = ({
     onPlanApprovalRequest(async (plan) => {
       return new Promise((resolve) => {
         clearScreen();
-        setState((prev) => ({
-          ...prev,
-          screen: "plan-approval",
-          planApprovalRequest: {
-            plan,
-            resolve
-          },
-          isLoading: false
-        }));
+        setState((prev) => {
+          savedHistoryRef.current = [...prev.messageHistory];
+          savedCurrentRef.current = prev.currentMessage;
+          return {
+            ...prev,
+            screen: "plan-approval",
+            planApprovalRequest: {
+              plan,
+              resolve
+            },
+            isLoading: false,
+            // Clear messages so Ink's Static doesn't re-render chat above the plan screen
+            messageHistory: [],
+            currentMessage: null
+          };
+        });
       });
     });
   }, [clearScreen]);
   React.useEffect(() => {
     onPlanCreated((plan) => {
       try {
-        quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Plan created: ${plan.title} with ${plan.steps.length} tasks
+        quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [App] Plan created: ${plan.title} with ${plan.implementationSteps.length} steps
 `);
       } catch (e) {
       }
     });
   }, [onPlanCreated]);
   React.useEffect(() => {
-    onTaskCompleted((task, taskNumber, totalTasks, completionNote, taskDescription) => {
+    onPlanQuestionRequest(async (question, options) => {
+      return new Promise((resolve) => {
+        setState((prev) => ({
+          ...prev,
+          screen: "plan-question",
+          planQuestionRequest: {
+            question,
+            options,
+            resolve
+          },
+          isLoading: false
+        }));
+      });
+    });
+  }, []);
+  React.useEffect(() => {
+    onTaskCompleted((stepNumber, stepDescription, completedCount, totalCount, completionNote, allSteps) => {
       setState((prev) => {
         const taskCompletedMessage = {
           id: `task-complete-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
@@ -2000,11 +2337,16 @@ const App = ({
           // We'll render this specially
           timestamp: /* @__PURE__ */ new Date(),
           taskCompletion: {
-            taskNumber,
-            totalTasks,
-            // Use the passed taskDescription if available (for subtasks), otherwise fall back to task.description
-            taskDescription: taskDescription || task.description,
-            completionNote
+            completedStepNumber: stepNumber,
+            completedStepDescription: stepDescription,
+            completedCount,
+            totalCount,
+            completionNote,
+            allSteps: allSteps?.map((s) => ({
+              id: s.id,
+              description: s.description,
+              status: s.status
+            }))
           }
         };
         const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage) ? [...prev.messageHistory, prev.currentMessage, taskCompletedMessage] : [...prev.messageHistory, taskCompletedMessage];
@@ -2016,6 +2358,34 @@ const App = ({
       });
     });
   }, [onTaskCompleted]);
+  React.useEffect(() => {
+    onTodoListUpdate((todos, completedCount, totalCount) => {
+      setState((prev) => {
+        const todoListMessage = {
+          id: `todo-list-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          role: "system",
+          content: "",
+          timestamp: /* @__PURE__ */ new Date(),
+          todoList: {
+            todos: todos.map((t) => ({
+              id: t.id,
+              content: t.content,
+              status: t.status
+            })),
+            completedCount,
+            totalCount
+          }
+        };
+        const newHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage) ? [...prev.messageHistory, prev.currentMessage, todoListMessage] : [...prev.messageHistory, todoListMessage];
+        return {
+          ...prev,
+          messageHistory: newHistory,
+          currentMessage: null,
+          isAiWorking: true
+        };
+      });
+    });
+  }, [onTodoListUpdate]);
   React.useEffect(() => {
     onFileChangeSummary((data) => {
       setState((prev) => ({ ...prev, lastFileChangeSummary: data }));
@@ -2122,11 +2492,34 @@ const App = ({
     if (state.shellState?.isFocused) {
       return;
     }
+    const isCtrlE = key.ctrl && input.toLowerCase() === "e" || input === "";
+    if (key.meta && input.toLowerCase() === "e" || isCtrlE) {
+      if (state.customTunnel && state.shellState?.isRunning) {
+        flushTunnelOutput();
+        clearScreen();
+        onCustomTunnelStateChange(null);
+        setState((prev) => ({
+          ...prev,
+          customTunnel: void 0,
+          shellState: prev.shellState ? {
+            ...prev.shellState,
+            isFocused: true
+          } : void 0
+        }));
+        return;
+      }
+    }
     if (key.ctrl && input === "f") {
       if (state.shellState && state.shellState.isRunning) {
+        if (state.customTunnel) {
+          flushTunnelOutput();
+          onCustomTunnelStateChange(null);
+        }
         clearScreen();
         setState((prev) => ({
           ...prev,
+          customTunnel: void 0,
+          // Always clear tunnel when toggling focus
           shellState: prev.shellState ? {
             ...prev.shellState,
             isFocused: !prev.shellState.isFocused
@@ -2155,7 +2548,7 @@ const App = ({
         }));
         return;
       }
-      if (state.screen === "mcp-add" || state.screen === "mcp-remove" || state.screen === "mcp-enable" || state.screen === "mcp-disable" || state.screen === "mcp-list") {
+      if (state.screen === "mcp-remove" || state.screen === "mcp-enable" || state.screen === "mcp-disable" || state.screen === "mcp-list") {
         setState((prev) => ({
           ...prev,
           screen: "chat",
@@ -2163,8 +2556,12 @@ const App = ({
         }));
         return;
       }
+      if (state.screen === "sub-agent-list" || state.screen === "sub-agent-view" || state.screen === "sub-agent-terminate" || state.screen === "skill-editor" || state.screen === "mcp-add" || state.screen === "rules-editor" || state.screen === "plan-question") {
+        return;
+      }
       if (state.isLoading || state.isAiWorking) {
         onCancelRequest();
+        ignoreIncomingAIUpdatesRef.current = true;
         setState((prev) => ({
           ...prev,
           isLoading: false,
@@ -2191,6 +2588,7 @@ const App = ({
       }
       if (state.isLoading || state.isAiWorking) {
         onCancelRequest();
+        ignoreIncomingAIUpdatesRef.current = true;
         setState((prev) => ({
           ...prev,
           isLoading: false,
@@ -2242,6 +2640,62 @@ const App = ({
     const wasAiWorkingBeforeSubmit = isAiWorkingRef.current;
     if (!trimmedValue) return;
     const isSlashCommand = trimmedValue.startsWith("/");
+    if (customTunnelRef.current && shellRunningRef.current && !isSlashCommand) {
+      const intent = detectIntent(trimmedValue);
+      if (intent === "command") {
+        if (clipboardFiles && clipboardFiles.length > 0) {
+          appendStaticInfoMessage("File attachments are not available while custom tunnel mode is active.");
+          return;
+        }
+        flushTunnelOutput();
+        const tunnelInput = trimmedValue.endsWith("\n") || trimmedValue.endsWith("\r") ? trimmedValue : `${trimmedValue}\r`;
+        try {
+          quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [CustomTunnel] Sending chat input to shell: ${JSON.stringify(trimmedValue)}
+`);
+        } catch (e) {
+        }
+        setState((prev) => {
+          const userMessage = {
+            id: `user-${Date.now()}`,
+            role: "user",
+            content: trimmedValue,
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          const messageHistory = prev.currentMessage && !shouldSkipMessage(prev.currentMessage) ? [...prev.messageHistory, prev.currentMessage, userMessage] : [...prev.messageHistory, userMessage];
+          return {
+            ...prev,
+            messageHistory,
+            currentMessage: null,
+            isLoading: false,
+            isAiWorking: false,
+            commandHistory: prev.commandHistory[prev.commandHistory.length - 1] === trimmedValue ? prev.commandHistory : [...prev.commandHistory, trimmedValue]
+          };
+        });
+        onShellInput(tunnelInput);
+        return;
+      }
+    }
+    if (trimmedValue.startsWith("#")) {
+      const parts = trimmedValue.slice(1).split(/\s+/);
+      const skillName = parts[0];
+      const params = parts.slice(1).join(" ");
+      if (skillName) {
+        const userMessage = {
+          id: `user-${Date.now()}`,
+          role: "user",
+          content: trimmedValue,
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setState((prev) => ({
+          ...prev,
+          messageHistory: [...prev.messageHistory, userMessage],
+          isAiWorking: true
+        }));
+        await onSkillExecute(skillName, params);
+        setState((prev) => ({ ...prev, isAiWorking: false }));
+        return;
+      }
+    }
     const lowerValue = trimmedValue.toLowerCase();
     if (lowerValue === "/clear" || lowerValue === "clear" || lowerValue === "/cls" || lowerValue === "cls" || lowerValue === "/reset") {
       const height = process.stdout.rows || 24;
@@ -2505,7 +2959,7 @@ const App = ({
         isAiWorking: wasAiWorkingBeforeSubmit ? prev.isAiWorking : false
       }));
     }
-  }, [onMessage]);
+  }, [appendStaticInfoMessage, flushTunnelOutput, onMessage, onShellInput, onSkillExecute, shouldSkipMessage]);
   const handleToggleAutoAccept = useCallback(() => {
     setState((prev) => ({
       ...prev,
@@ -2515,21 +2969,59 @@ const App = ({
   const handleInputValueChange = useCallback((value) => {
     preservedInputTextRef.current = value;
   }, []);
+  const terminalColumns = process.stdout.columns || 120;
+  const limitedHistory = useMemo(() => limitChatHistoryForDisplay(state.messageHistory, {
+    enabled: state.limitChatHistory,
+    width: terminalColumns
+  }), [state.messageHistory, state.limitChatHistory, terminalColumns]);
+  const displayedMessageHistory = useMemo(() => {
+    if (limitedHistory.hiddenMessageCount === 0) {
+      return limitedHistory.visibleMessages;
+    }
+    const hiddenCount = limitedHistory.hiddenMessageCount;
+    const notice = {
+      id: `__chat-history-limit__-${hiddenCount}`,
+      role: "system",
+      content: `\u2139\uFE0F Showing the most recent chat history only (${hiddenCount} older message${hiddenCount === 1 ? "" : "s"} hidden). Run \`/settings limit-chat-history off\` to show the full chat history in the UI.`,
+      timestamp: /* @__PURE__ */ new Date(0)
+    };
+    return [notice, ...limitedHistory.visibleMessages];
+  }, [limitedHistory]);
+  React.useEffect(() => {
+    const hiddenCount = limitedHistory.hiddenMessageCount;
+    if (previousHiddenMessageCountRef.current === null) {
+      previousHiddenMessageCountRef.current = hiddenCount;
+      return;
+    }
+    if (hiddenCount === previousHiddenMessageCountRef.current) {
+      return;
+    }
+    previousHiddenMessageCountRef.current = hiddenCount;
+    if (state.screen !== "chat" || state.isInteractiveEditorMode || state.shellState?.isFocused) {
+      return;
+    }
+    clearScreen();
+    setState((prev) => ({
+      ...prev,
+      messageListKey: (prev.messageListKey ?? 0) + 1
+    }));
+  }, [limitedHistory.hiddenMessageCount, state.screen, state.isInteractiveEditorMode, state.shellState?.isFocused, clearScreen]);
   const sessionCommands = useMemo(() => {
     return state.messageHistory.filter((m) => m.role === "user").map((m) => m.content);
   }, [state.messageHistory]);
   if (state.isInteractiveEditorMode) {
     return /* @__PURE__ */ React.createElement(Box, null);
   }
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, state.screen === "chat" && /* @__PURE__ */ React.createElement(React.Fragment, null, !state.shellState?.isFocused && /* @__PURE__ */ React.createElement(
+  const themeColors = useMemo(() => deriveThemeColors(state.themeColor || DEFAULT_ACCENT_COLOR), [state.themeColor]);
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: themeColors }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, state.screen === "chat" && /* @__PURE__ */ React.createElement(React.Fragment, null, !state.shellState?.isFocused && /* @__PURE__ */ React.createElement(
     MessageList,
     {
       key: `msglist-${state.messageListKey}`,
-      history: state.messageHistory,
+      history: displayedMessageHistory,
       current: state.currentMessage,
       showBanner: true
     }
-  ), state.shellState && (getTerminalDimensions().shouldEnableStreaming || !state.shellState.isRunning) && /* @__PURE__ */ React.createElement(
+  ), state.shellState && !state.customTunnel && (state.shellState.isFocused || getTerminalDimensions().shouldEnableStreaming || !state.shellState.isRunning) && /* @__PURE__ */ React.createElement(
     InteractiveShell,
     {
       command: state.shellState.command,
@@ -2622,90 +3114,128 @@ const App = ({
 `);
         }
       },
-      onWarpifySession: state.shellState?.isBackgroundTask ? void 0 : async () => {
-        const shellCommand = state.shellState?.command || "";
-        const currentOutput = state.shellState?.output || "";
-        const session = detectWarpifySession(shellCommand, currentOutput);
-        quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [Warpify] Command: "${shellCommand}", Detected: ${JSON.stringify(session)}
+      onWarpifySession: (() => {
+        if (state.shellState?.isBackgroundTask) return void 0;
+        const cmd = state.shellState?.command || "";
+        const out = state.shellState?.output || "";
+        const registered = getRegisteredTunnelCommands();
+        const detected = detectWarpifySession(cmd, out, registered);
+        if (detected.type === "none") return void 0;
+        return async () => {
+          const shellCommand = state.shellState?.command || "";
+          const currentOutput = state.shellState?.output || "";
+          const registeredTunnelCommands = getRegisteredTunnelCommands();
+          const session = detectWarpifySession(shellCommand, currentOutput, registeredTunnelCommands);
+          quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [Warpify] Command: "${shellCommand}", Detected: ${JSON.stringify(session)}
 `);
-        if (session.type === "none") {
-          setState((prev) => ({
-            ...prev,
-            connectionStatus: {
-              type: "ssh",
-              status: "error",
-              error: "No remote session detected. Enter an SSH/WSL/Docker session first."
-            }
-          }));
-          setTimeout(() => {
+          if (session.type === "none") {
             setState((prev) => ({
               ...prev,
-              connectionStatus: void 0
+              connectionStatus: {
+                type: "ssh",
+                status: "error",
+                error: "No tunnelable session detected. Enter an SSH/WSL/Docker session first, or register a command with /settings add-tunnel-command."
+              }
             }));
-          }, 3e3);
-          return;
-        }
-        const description = getSessionDescription(session);
-        quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [Warpify] Warpifying: ${description}
-`);
-        warpifyInProgressRef.current = true;
-        warpifyTerminatingCommandRef.current = shellCommand;
-        try {
-          onShellSignal("SIGTERM");
-          const historyMessages = [];
-          if (shellCommand) {
-            historyMessages.push({
-              id: `warpify-cmd-${Date.now()}`,
-              role: "user",
-              content: shellCommand,
-              timestamp: /* @__PURE__ */ new Date(),
-              isCommandMode: false
-              // Treat as a normal chat message for history
-            });
+            setTimeout(() => {
+              setState((prev) => ({
+                ...prev,
+                connectionStatus: void 0
+              }));
+            }, 3e3);
+            return;
           }
-          if (currentOutput && currentOutput.trim().length > 0) {
-            historyMessages.push({
-              id: `warpify-out-${Date.now()}`,
-              role: "tool",
-              // Use 'tool' role to mimic command execution output
-              content: "",
-              timestamp: /* @__PURE__ */ new Date(),
-              toolExecution: {
-                toolName: "execute_command",
-                status: "completed",
-                result: currentOutput,
-                // This contains the PTY output including ANSI codes
-                arguments: {
-                  command: shellCommand,
-                  isPty: true
-                }
-              }
-            });
+          if (session.type === "custom") {
+            const matchedCommand = session.connectionString || shellCommand;
+            const isAlreadyActive = state.customTunnel?.shellCommand === shellCommand;
+            clearScreen();
+            if (isAlreadyActive) {
+              onCustomTunnelStateChange(null);
+              setState((prev) => ({
+                ...prev,
+                customTunnel: void 0
+              }));
+              appendStaticInfoMessage(`Custom tunnel closed for \`${matchedCommand}\`. Chat input goes back to the AI.`);
+            } else {
+              tunnelOutputPositionRef.current = currentOutput.length;
+              onCustomTunnelStateChange(matchedCommand);
+              setState((prev) => ({
+                ...prev,
+                customTunnel: {
+                  matchedCommand,
+                  shellCommand
+                },
+                shellState: prev.shellState ? {
+                  ...prev.shellState,
+                  isFocused: false
+                } : void 0
+              }));
+              appendStaticInfoMessage(`Custom tunnel active for \`${matchedCommand}\`. Chat messages are now sent to the process. Press ${process.platform === "darwin" ? "Cmd+E" : "Alt+E"} from chat to return to shell focus mode.`);
+            }
+            return;
           }
-          setState((prev) => ({
-            ...prev,
-            messageHistory: [...prev.messageHistory, ...historyMessages],
-            shellState: void 0,
-            currentMessage: null,
-            isAiWorking: false
-          }));
-          clearScreen();
-          const success = await onWarpifySession(
-            shellCommand,
-            session.type,
-            session.connectionString
-          );
-          if (!success) {
-            quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [Warpify] Failed to establish ssh2 connection
+          const description = getSessionDescription(session);
+          quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [Warpify] Warpifying: ${description}
 `);
+          warpifyInProgressRef.current = true;
+          warpifyTerminatingCommandRef.current = shellCommand;
+          try {
+            onShellSignal("SIGTERM");
+            const historyMessages = [];
+            if (shellCommand) {
+              historyMessages.push({
+                id: `warpify-cmd-${Date.now()}`,
+                role: "user",
+                content: shellCommand,
+                timestamp: /* @__PURE__ */ new Date(),
+                isCommandMode: false
+                // Treat as a normal chat message for history
+              });
+            }
+            if (currentOutput && currentOutput.trim().length > 0) {
+              historyMessages.push({
+                id: `warpify-out-${Date.now()}`,
+                role: "tool",
+                // Use 'tool' role to mimic command execution output
+                content: "",
+                timestamp: /* @__PURE__ */ new Date(),
+                toolExecution: {
+                  toolName: "execute_command",
+                  status: "completed",
+                  result: currentOutput,
+                  // This contains the PTY output including ANSI codes
+                  arguments: {
+                    command: shellCommand,
+                    isPty: true
+                  }
+                }
+              });
+            }
+            setState((prev) => ({
+              ...prev,
+              messageHistory: [...prev.messageHistory, ...historyMessages],
+              shellState: void 0,
+              currentMessage: null,
+              isAiWorking: false
+            }));
+            clearScreen();
+            const success = await onWarpifySession(
+              shellCommand,
+              session.type,
+              session.connectionString
+            );
+            if (!success) {
+              quickLog(`[${(/* @__PURE__ */ new Date()).toISOString()}] [Warpify] Failed to establish ssh2 connection
+`);
+            }
+          } finally {
+            setTimeout(() => {
+              warpifyInProgressRef.current = false;
+              warpifyTerminatingCommandRef.current = null;
+            }, 400);
           }
-        } finally {
-          setTimeout(() => {
-            warpifyInProgressRef.current = false;
-            warpifyTerminatingCommandRef.current = null;
-          }, 400);
-        }
-      }
+        };
+      })()
     }
   ), state.shellState?.isAgentControlled && state.shellState?.isFocused && state.shellState?.isRunning && /* @__PURE__ */ React.createElement(
     MonitorModeAIPanel,
@@ -2724,7 +3254,22 @@ const App = ({
       maxHeight: Math.floor((process.stdout.rows || 24) / 2) - 5,
       isActive: true
     }
-  ), (state.isAiWorking && !state.shellState && !state.approvalRequest && !(state.currentMessage?.toolExecution?.status === "executing") || state.lastFileChangeSummary && state.lastFileChangeSummary.filesChanged > 0) && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1, flexDirection: "row", justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1 }, state.isAiWorking && !state.shellState && !state.approvalRequest && !(state.currentMessage?.toolExecution?.status === "executing") && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LoadingIndicator, { key: "loading-indicator" }), /* @__PURE__ */ React.createElement(AgentTimer, { key: "agent-timer" }))), state.lastFileChangeSummary && state.lastFileChangeSummary.filesChanged > 0 && /* @__PURE__ */ React.createElement(Box, { paddingRight: 1, flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, state.lastFileChangeSummary.filesChanged, " file", state.lastFileChangeSummary.filesChanged !== 1 ? "s" : "", " changed "), state.lastFileChangeSummary.insertions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "green" }, "+", state.lastFileChangeSummary.insertions), state.lastFileChangeSummary.insertions > 0 && state.lastFileChangeSummary.deletions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " "), state.lastFileChangeSummary.deletions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "red" }, "-", state.lastFileChangeSummary.deletions))), state.interruptQueue && state.interruptQueue.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, state.interruptQueue.map((msg, i) => /* @__PURE__ */ React.createElement(Text, { key: `interrupt-${i}`, color: "gray", dimColor: true }, "[Queued Interrupt ", i + 1, "/", state.interruptQueue.length, "] ", msg))), state.commandQueue && state.commandQueue.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, state.commandQueue.map((command, i) => /* @__PURE__ */ React.createElement(Text, { key: `queued-command-${i}`, color: "#00cc66" }, "[Queued Command ", i + 1, "/", state.commandQueue.length, "] $ ", command))), !state.shellState?.isFocused && (state.passwordRequest ? /* @__PURE__ */ React.createElement(
+  ), state.shellState && !state.customTunnel && !state.shellState.isFocused && !getTerminalDimensions().shouldEnableStreaming && state.shellState.isRunning && (process.stdout.rows || 24) >= 15 && /* @__PURE__ */ React.createElement(
+    CompactShellPreview,
+    {
+      command: state.shellState.command,
+      output: state.shellState.output,
+      isRunning: state.shellState.isRunning,
+      remoteContext: state.shellState.remoteContext
+    }
+  ), (() => {
+    const dims = getTerminalDimensions();
+    const isCompact = !dims.shouldEnableStreaming;
+    const showLoading = state.isAiWorking && !state.shellState && !state.approvalRequest && !(state.currentMessage?.toolExecution?.status === "executing");
+    const showFileChanges = !isCompact && state.lastFileChangeSummary && state.lastFileChangeSummary.filesChanged > 0;
+    if ((!showLoading || isCompact) && !showFileChanges) return null;
+    return /* @__PURE__ */ React.createElement(Box, { marginBottom: 1, flexDirection: "row", justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, flexDirection: "row" }, showLoading && !isCompact && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(LoadingIndicator, { key: "loading-indicator" }), /* @__PURE__ */ React.createElement(AgentTimer, { key: "agent-timer" }))), showFileChanges && /* @__PURE__ */ React.createElement(Box, { paddingRight: 1, flexDirection: "row", flexShrink: 0 }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, state.lastFileChangeSummary.filesChanged, " file", state.lastFileChangeSummary.filesChanged !== 1 ? "s" : "", " changed "), state.lastFileChangeSummary.insertions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "green" }, "+", state.lastFileChangeSummary.insertions), state.lastFileChangeSummary.insertions > 0 && state.lastFileChangeSummary.deletions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " "), state.lastFileChangeSummary.deletions > 0 && /* @__PURE__ */ React.createElement(Text, { color: "red" }, "-", state.lastFileChangeSummary.deletions)));
+  })(), state.interruptQueue && state.interruptQueue.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, state.interruptQueue.map((msg, i) => /* @__PURE__ */ React.createElement(Text, { key: `interrupt-${i}`, color: "gray", dimColor: true }, "[Queued Interrupt ", i + 1, "/", state.interruptQueue.length, "] ", msg))), state.commandQueue && state.commandQueue.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginBottom: 1 }, state.commandQueue.map((command, i) => /* @__PURE__ */ React.createElement(Text, { key: `queued-command-${i}`, color: "#00cc66" }, "[Queued Command ", i + 1, "/", state.commandQueue.length, "] $ ", command))), !state.shellState?.isFocused && (state.passwordRequest ? /* @__PURE__ */ React.createElement(
     PasswordPrompt,
     {
       message: state.passwordRequest.message,
@@ -2762,6 +3307,7 @@ const App = ({
         preservedInputTextRef.current = "";
         handleSubmit(value, clipboardImages);
       },
+      placeholder: state.customTunnel ? `Send input to ${state.customTunnel.matchedCommand}` : "Ask anything ...",
       autoAcceptMode: state.autoAcceptMode,
       model: state.currentModel,
       planMode: state.planMode,
@@ -2771,6 +3317,7 @@ const App = ({
       commandHistory: state.commandHistory,
       onToggleAutoAccept: handleToggleAutoAccept,
       onToggleCommandMode,
+      onTogglePlanMode,
       onToggleBackgroundMode,
       isActive: true,
       subshellContext: state.subshellContext,
@@ -2779,6 +3326,8 @@ const App = ({
       maxTokens: state.maxTokens,
       contextLimitReached: state.contextLimitReached,
       isShellRunning: state.shellState?.isRunning,
+      allowSubmitWhileShellRunning: !!state.customTunnel,
+      customTunnelCommand: state.customTunnel?.matchedCommand,
       backgroundTaskCount: state.backgroundTaskCount,
       subAgentCount: state.subAgentCount,
       initialValue: preservedInputTextRef.current,
@@ -2788,13 +3337,15 @@ const App = ({
       },
       sessionQuotaExhausted: state.sessionQuotaExhausted,
       sessionQuotaTimeRemaining: state.sessionQuotaTimeRemaining,
-      aiAutoSuggestEnabled: state.aiAutoSuggest,
+      aiAutoSuggestEnabled: state.customTunnel ? false : state.aiAutoSuggest,
       sessionCommands,
       getCheckpoints,
       onSetInputSetup,
-      gitDiffStats: state.gitDiffStats
+      gitDiffStats: state.gitDiffStats,
+      isAiWorking: state.isAiWorking,
+      lastFileChangeSummary: state.lastFileChangeSummary
     }
-  )), state.showExitWarning && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "\u26A0\uFE0F  Press Ctrl+C again to exit")), !isConnected && /* @__PURE__ */ React.createElement(Box, { marginTop: 0, marginLeft: state.showExitWarning ? 2 : 0 }, /* @__PURE__ */ React.createElement(Text, { color: "red", bold: true }, "\u26A0\uFE0F No internet connection"))), state.screen === "approval" && state.approvalRequest && /* @__PURE__ */ React.createElement(
+  )), state.showExitWarning && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#ffaa00", bold: true }, "\u26A0\uFE0F  Press Ctrl+C again to exit")), !isConnected && /* @__PURE__ */ React.createElement(Box, { marginTop: 0, marginLeft: state.showExitWarning ? 2 : 0 }, /* @__PURE__ */ React.createElement(Text, { color: "red", bold: true }, "\u26A0\uFE0F No internet connection"))), state.screen !== "chat" && /* @__PURE__ */ React.createElement(ScreenContainer, null, state.screen === "approval" && state.approvalRequest && /* @__PURE__ */ React.createElement(
     ApprovalSection,
     {
       key: `approval-${state.approvalRequest.message}`,
@@ -2806,7 +3357,43 @@ const App = ({
         }
       }
     }
-  ), state.screen === "help" && /* @__PURE__ */ React.createElement(KeyboardHelp, { onClose: () => setState((prev) => ({ ...prev, screen: "chat" })) }), state.screen === "picker" && state.pickerOptions && /* @__PURE__ */ React.createElement(
+  ), state.screen === "help" && /* @__PURE__ */ React.createElement(KeyboardHelp, { onClose: () => setState((prev) => ({ ...prev, screen: "chat" })) }), state.screen === "picker" && state.pickerOptions && (state.pickerOptions.type === "model" && state.pickerOptions.modelConfigs ? /* @__PURE__ */ React.createElement(
+    ModelPicker,
+    {
+      models: state.pickerOptions.modelConfigs,
+      currentModelName: state.pickerOptions.currentModelName || "",
+      onCancel: () => {
+        setState((prev) => ({ ...prev, screen: "chat", isLoading: false, isAiWorking: false }));
+      },
+      onSelect: async (value) => {
+        setState((prev) => ({ ...prev, screen: "chat", isLoading: true }));
+        try {
+          await onPickerSelection(value, state.pickerOptions.type);
+          setState((prev) => ({
+            ...prev,
+            isLoading: false,
+            isAiWorking: false
+          }));
+        } catch (error) {
+          setState((prev) => {
+            const errorMessage = {
+              id: `system-error-${Date.now()}`,
+              role: "system",
+              content: `Error: ${error.message || "Unknown error occurred"}`,
+              timestamp: /* @__PURE__ */ new Date()
+            };
+            return {
+              ...prev,
+              messageHistory: [...prev.messageHistory, errorMessage],
+              currentMessage: null,
+              isLoading: false,
+              isAiWorking: false
+            };
+          });
+        }
+      }
+    }
+  ) : /* @__PURE__ */ React.createElement(
     SelectPrompt,
     {
       message: state.pickerOptions.message,
@@ -2825,7 +3412,7 @@ const App = ({
             const errorMessage = {
               id: `system-error-${Date.now()}`,
               role: "system",
-              content: `\u274C Error: ${error.message || "Unknown error occurred"}`,
+              content: `Error: ${error.message || "Unknown error occurred"}`,
               timestamp: /* @__PURE__ */ new Date()
             };
             return {
@@ -2839,7 +3426,7 @@ const App = ({
         }
       }
     }
-  ), state.screen === "chat-picker" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "\u{1F4DA} Resume a Previous Chat"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+  )), state.screen === "chat-picker" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: themeColors.accent, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: themeColors.accent, bold: true }, "\u{1F4DA} Resume a Previous Chat"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
     CircularSelectInput,
     {
       limit: listLimit,
@@ -2887,7 +3474,7 @@ const App = ({
         }
       }
     }
-  )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ESC to return to chat"))), state.screen === "chat-delete-picker" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "\u{1F5D1}\uFE0F Select a Chat to Delete"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ESC to return to chat"))), state.screen === "chat-delete-picker" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: themeColors.accent, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: themeColors.accent, bold: true }, "\u{1F5D1}\uFE0F Select a Chat to Delete"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
     CircularSelectInput,
     {
       key: `chat-delete-picker-${state.chatDeletePickerSession}`,
@@ -2933,7 +3520,7 @@ const App = ({
         }
       }
     }
-  )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ESC to return to chat"))), state.screen === "chat-list-view" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "\u{1F4DA} Saved Chats (", state.chatPickerChats.length, ")"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ESC to return to chat"))), state.screen === "chat-list-view" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: themeColors.accent, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: themeColors.accent, bold: true }, "\u{1F4DA} Saved Chats (", state.chatPickerChats.length, ")"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
     CircularSelectInput,
     {
       limit: listLimit,
@@ -2957,7 +3544,7 @@ const App = ({
         setState((prev) => ({ ...prev, screen: "chat" }));
       }
     }
-  )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ESC to return to chat"))), state.screen === "chat-rename-picker" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, "\u270F\uFE0F Select a Chat to Rename"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Press ESC to return to chat"))), state.screen === "chat-rename-picker" && state.chatPickerChats && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: themeColors.accent, paddingX: 1 }, /* @__PURE__ */ React.createElement(Text, { color: themeColors.accent, bold: true }, "\u270F\uFE0F Select a Chat to Rename"), /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(
     CircularSelectInput,
     {
       limit: listLimit,
@@ -3029,18 +3616,23 @@ const App = ({
           timestamp: /* @__PURE__ */ new Date(),
           planAccepted: {
             planTitle: plan?.title,
-            totalTasks: plan?.steps?.length,
-            tasks: plan?.steps?.map((step) => ({
+            totalSteps: plan?.implementationSteps?.length,
+            steps: plan?.implementationSteps?.map((step) => ({
+              id: step.id,
               description: step.description,
-              subtasks: step.subtasks?.map((st) => ({ description: st.description }))
+              status: step.status
             }))
           }
         };
+        const restoredHistory = savedHistoryRef.current || [];
+        clearScreen();
         setState((prev) => ({
           ...prev,
           screen: "chat",
           planApprovalRequest: void 0,
-          messageHistory: [...prev.messageHistory, planAcceptedMessage],
+          messageHistory: [...restoredHistory, planAcceptedMessage],
+          currentMessage: savedCurrentRef.current,
+          messageListKey: prev.messageListKey + 1,
           isLoading: true,
           isAiWorking: true
         }));
@@ -3050,10 +3642,77 @@ const App = ({
         if (resolve) {
           resolve(false);
         }
+        const restoredHistory = savedHistoryRef.current || [];
+        clearScreen();
         setState((prev) => ({
           ...prev,
           screen: "chat",
-          planApprovalRequest: void 0
+          planApprovalRequest: void 0,
+          messageHistory: restoredHistory,
+          currentMessage: savedCurrentRef.current,
+          messageListKey: prev.messageListKey + 1
+        }));
+      }
+    }
+  ), state.screen === "plan-question" && state.planQuestionRequest && /* @__PURE__ */ React.createElement(
+    PlanQuestionScreen,
+    {
+      question: state.planQuestionRequest.question,
+      options: state.planQuestionRequest.options,
+      onAnswer: (answer) => {
+        const resolve = state.planQuestionRequest?.resolve;
+        const question = state.planQuestionRequest?.question || "";
+        const options = state.planQuestionRequest?.options || [];
+        if (resolve) {
+          resolve(answer);
+        }
+        const questionMessage = {
+          id: `plan-question-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          role: "system",
+          content: "",
+          timestamp: /* @__PURE__ */ new Date(),
+          planQuestion: {
+            question,
+            options,
+            userAnswer: answer,
+            wasSkipped: false
+          }
+        };
+        setState((prev) => ({
+          ...prev,
+          screen: "chat",
+          planQuestionRequest: void 0,
+          messageHistory: [...prev.messageHistory, questionMessage],
+          isLoading: true,
+          isAiWorking: true
+        }));
+      },
+      onSkip: () => {
+        const resolve = state.planQuestionRequest?.resolve;
+        const question = state.planQuestionRequest?.question || "";
+        const options = state.planQuestionRequest?.options || [];
+        if (resolve) {
+          resolve("[User skipped this question. Proceed with the most appropriate and optimal approach as you see fit.]");
+        }
+        const questionMessage = {
+          id: `plan-question-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+          role: "system",
+          content: "",
+          timestamp: /* @__PURE__ */ new Date(),
+          planQuestion: {
+            question,
+            options,
+            userAnswer: "",
+            wasSkipped: true
+          }
+        };
+        setState((prev) => ({
+          ...prev,
+          screen: "chat",
+          planQuestionRequest: void 0,
+          messageHistory: [...prev.messageHistory, questionMessage],
+          isLoading: true,
+          isAiWorking: true
         }));
       }
     }
@@ -3334,7 +3993,142 @@ Use it in prompts with: @rules:${savedName}`,
         }));
       }
     }
-  ));
+  ), state.screen === "skill-editor" && state.skillEditorRequest && /* @__PURE__ */ React.createElement(
+    SkillCreatorScreen,
+    {
+      mode: state.skillEditorRequest.mode,
+      initialSkill: state.skillEditorRequest.initialSkill,
+      onSave: (skill, previousName) => {
+        const result = onSkillSave(skill, previousName);
+        if (!result.success) {
+          return result;
+        }
+        const savedName = result.savedName || skill.name;
+        const successMessage = {
+          id: `skill-saved-${Date.now()}`,
+          role: "system",
+          content: `\u2705 Skill "${savedName}" saved successfully.
+
+Invoke it with: #${savedName} <parameters>`,
+          timestamp: /* @__PURE__ */ new Date()
+        };
+        setState((prev) => ({
+          ...prev,
+          screen: "chat",
+          skillEditorRequest: void 0,
+          messageHistory: [...prev.messageHistory, successMessage]
+        }));
+        return result;
+      },
+      onCancel: () => {
+        setState((prev) => ({
+          ...prev,
+          screen: "chat",
+          skillEditorRequest: void 0
+        }));
+      }
+    }
+  ), state.screen === "sub-agent-list" && state.subAgentListData && /* @__PURE__ */ React.createElement(
+    SubAgentListScreen,
+    {
+      agents: state.subAgentListData,
+      onSelect: (agentId) => {
+        clearScreen();
+        setState((prev) => ({ ...prev, screen: "sub-agent-view", viewingSubAgentId: agentId }));
+      },
+      onCancel: () => {
+        clearScreen();
+        setState((prev) => ({
+          ...prev,
+          screen: "chat",
+          subAgentListData: void 0,
+          messageListKey: (prev.messageListKey ?? 0) + 1
+        }));
+      }
+    }
+  ), state.screen === "sub-agent-view" && state.viewingSubAgentId && /* @__PURE__ */ React.createElement(
+    SubAgentViewScreen,
+    {
+      agentId: state.viewingSubAgentId,
+      onBack: () => {
+        clearScreen();
+        const allAgents = SubAgentManager.getAllSubAgents();
+        if (allAgents.length > 0) {
+          const agentList = allAgents.map((a) => ({
+            id: a.id,
+            status: a.status,
+            prompt: a.prompt,
+            model: a.model,
+            startTime: a.startTime,
+            turnCount: a.turnCount,
+            fileOpsCount: a.fileOperations.length
+          }));
+          setState((prev) => ({ ...prev, screen: "sub-agent-list", subAgentListData: agentList, viewingSubAgentId: void 0 }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            screen: "chat",
+            viewingSubAgentId: void 0,
+            subAgentListData: void 0,
+            messageListKey: (prev.messageListKey ?? 0) + 1
+          }));
+        }
+      },
+      onTerminate: (agentId) => {
+        SubAgentManager.terminateSubAgent(agentId);
+      },
+      onAutoReturn: () => {
+        clearScreen();
+        setState((prev) => ({
+          ...prev,
+          screen: "chat",
+          viewingSubAgentId: void 0,
+          subAgentListData: void 0,
+          messageListKey: (prev.messageListKey ?? 0) + 1
+        }));
+      }
+    }
+  ), state.screen === "sub-agent-terminate" && state.subAgentListData && /* @__PURE__ */ React.createElement(
+    SubAgentListScreen,
+    {
+      agents: state.subAgentListData,
+      onSelect: (agentId) => {
+        SubAgentManager.terminateSubAgent(agentId);
+        const runningAgents = SubAgentManager.getRunningSubAgents();
+        if (runningAgents.length === 0) {
+          clearScreen();
+          setState((prev) => ({
+            ...prev,
+            screen: "chat",
+            subAgentListData: void 0,
+            messageListKey: (prev.messageListKey ?? 0) + 1
+          }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            subAgentListData: runningAgents.map((a) => ({
+              id: a.id,
+              status: a.status,
+              prompt: a.prompt,
+              model: a.model,
+              startTime: a.startTime,
+              turnCount: a.turnCount,
+              fileOpsCount: a.fileOperations.length
+            }))
+          }));
+        }
+      },
+      onCancel: () => {
+        clearScreen();
+        setState((prev) => ({
+          ...prev,
+          screen: "chat",
+          subAgentListData: void 0,
+          messageListKey: (prev.messageListKey ?? 0) + 1
+        }));
+      }
+    }
+  ))));
 };
 export {
   App