@meowlynxsea/koi 0.1.5 → 0.1.7

package/dist/main.js

@@ -342737,7 +342737,7 @@ function DialogProvider(props) {
 }
 
 // src/tui/app.tsx
-var import_react48 = __toESM(require_react(), 1);
+var import_react53 = __toESM(require_react(), 1);
 
 // src/tui/components/chat-panel.tsx
 var import_react19 = __toESM(require_react(), 1);
@@ -415433,23 +415433,40 @@ var InputBox = import_react20.forwardRef(function InputBox2({
   onSlashEmpty,
   focused = true,
   disabled = false,
+  disabledHint,
   width,
   mode = "build",
   isBusy = false,
-  onModeSwitch
+  onModeSwitch,
+  externalEditorResult,
+  onExternalEditorResultUsed
 }, ref) {
   const textareaRef = import_react20.useRef(null);
   const [historyIndex, setHistoryIndex] = import_react20.useState(-1);
   const [savedInput, setSavedInput] = import_react20.useState("");
   const getText = () => textareaRef.current?.editBuffer.getText() ?? "";
+  import_react20.useEffect(() => {
+    if (externalEditorResult !== undefined && externalEditorResult !== null) {
+      textareaRef.current?.editBuffer.replaceText(externalEditorResult);
+      setHistoryIndex(-1);
+      setSavedInput("");
+      onExternalEditorResultUsed?.();
+    }
+  }, [externalEditorResult, onExternalEditorResultUsed]);
   import_react20.useImperativeHandle(ref, () => ({
     clearInput: () => {
       textareaRef.current?.editBuffer.replaceText("");
       setHistoryIndex(-1);
       setSavedInput("");
     },
-    isInputEmpty: () => getText().trim() === ""
-  }), []);
+    isInputEmpty: () => getText().trim() === "",
+    getText,
+    setText: (text) => {
+      textareaRef.current?.editBuffer.replaceText(text);
+      setHistoryIndex(-1);
+      setSavedInput("");
+    }
+  }), [getText]);
   const navigateToPreviousHistory = import_react20.useCallback(() => {
     const history = getUserHistory();
     if (history.length === 0)
@@ -415526,7 +415543,7 @@ var InputBox = import_react20.forwardRef(function InputBox2({
         }
       }
     }
-    if (event.name === "tab" && event.shift && onModeSwitch) {
+    if (event.name === "tab" && event.shift && onModeSwitch && !isBusy) {
       event.preventDefault();
       event.stopPropagation();
       onModeSwitch();
@@ -415556,6 +415573,7 @@ var InputBox = import_react20.forwardRef(function InputBox2({
     { name: "return", shift: true, action: "newline" }
   ], []);
   const [wavePhase, setWavePhase] = import_react20.useState(0);
+  const [shimmerIndex, setShimmerIndex] = import_react20.useState(-1);
   import_react20.useEffect(() => {
     if (!isBusy)
       return;
@@ -415564,6 +415582,24 @@ var InputBox = import_react20.forwardRef(function InputBox2({
     }, 150);
     return () => clearInterval(interval);
   }, [isBusy]);
+  import_react20.useEffect(() => {
+    if (!isBusy) {
+      setShimmerIndex(-1);
+      return;
+    }
+    const modeText = MODE_PREFIX[mode];
+    const textLength = modeText.length;
+    let currentIdx = -1;
+    const interval = setInterval(() => {
+      currentIdx = (currentIdx + 1) % (textLength + 4);
+      if (currentIdx >= textLength) {
+        setShimmerIndex(-1);
+      } else {
+        setShimmerIndex(currentIdx);
+      }
+    }, 80);
+    return () => clearInterval(interval);
+  }, [isBusy, mode]);
   const getInkWaveChars = import_react20.useCallback(() => {
     const totalWidth = width ?? 80;
     const phaseData = INK_WAVE_PHASES[wavePhase];
@@ -415637,18 +415673,46 @@ var InputBox = import_react20.forwardRef(function InputBox2({
         height: 3,
         children: [
           /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+            flexDirection: "row",
             marginRight: 1,
             flexShrink: 0,
-            children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-              fg: MODE_COLOR[mode],
-              attributes: createTextAttributes({ bold: true }),
-              children: MODE_PREFIX[mode]
-            }, undefined, false, undefined, this)
+            children: (() => {
+              const modeText = MODE_PREFIX[mode];
+              const highlightColor = mode === "build" ? "#86efac" : mode === "ask" ? "#fde68a" : "#93c5fd";
+              const nearColor = mode === "build" ? "#bbf7d0" : mode === "ask" ? "#fef08a" : "#bfdbfe";
+              return modeText.split("").map((char, i) => {
+                const isHighlighted = isBusy && shimmerIndex === i;
+                const isNearHighlight = isBusy && shimmerIndex !== -1 && (shimmerIndex === i - 1 || shimmerIndex === i + 1);
+                if (isHighlighted) {
+                  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                    fg: highlightColor,
+                    attributes: createTextAttributes({ bold: true }),
+                    children: char
+                  }, i, false, undefined, this);
+                }
+                if (isNearHighlight) {
+                  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                    fg: nearColor,
+                    attributes: createTextAttributes({ bold: true }),
+                    children: char
+                  }, i, false, undefined, this);
+                }
+                return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                  fg: MODE_COLOR[mode],
+                  attributes: createTextAttributes({ bold: true }),
+                  children: char
+                }, i, false, undefined, this);
+              });
+            })()
           }, undefined, false, undefined, this),
           /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
             flexGrow: 1,
             height: 3,
-            children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("textarea", {
+            children: disabled && disabledHint ? /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              fg: "#6c6c7c",
+              attributes: createTextAttributes({ dim: true }),
+              children: disabledHint
+            }, undefined, false, undefined, this) : /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("textarea", {
               ref: textareaRef,
               focused,
               showCursor: true,
@@ -473776,6 +473840,7 @@ var sessionTitle = "New Session";
 var providerConfigs = new Map;
 var currentModel = null;
 var auxiliaryModel = null;
+var externalEditor = null;
 var piAuthStorage = null;
 var piModelRegistry = null;
 var piSettingsManager = null;
@@ -473836,7 +473901,8 @@ function saveSettings() {
       sessionTitle,
       providers: Object.fromEntries(providerConfigs),
       currentModel,
-      auxiliaryModel
+      auxiliaryModel,
+      externalEditor: externalEditor ?? undefined
     };
     const json3 = JSON.stringify(data, null, 2);
     fs15.writeFileSync(SETTINGS_PATH, json3 + `
@@ -473864,6 +473930,9 @@ function loadSettings() {
     if (data.auxiliaryModel) {
       auxiliaryModel = data.auxiliaryModel;
     }
+    if (data.externalEditor) {
+      externalEditor = data.externalEditor;
+    }
     syncCredentialsToPi();
   } catch {}
 }
@@ -473917,6 +473986,13 @@ function setAuxiliaryModel(ref6) {
   auxiliaryModel = ref6;
   saveSettings();
 }
+function getExternalEditor() {
+  return externalEditor;
+}
+function setExternalEditor(path7) {
+  externalEditor = path7;
+  saveSettings();
+}
 function getAllProviders() {
   return getProviders();
 }
@@ -474888,7 +474964,6 @@ class BunPty extends EventEmitter13 {
     const args = process.platform === "win32" ? [] : ["--login"];
     const command = options4.command ?? shell;
     const commandArgs = options4.args ?? args;
-    const self2 = this;
     this.proc = Bun.spawn([command, ...commandArgs], {
       cwd: options4.cwd ?? process.cwd(),
       env: {
@@ -474901,12 +474976,12 @@ class BunPty extends EventEmitter13 {
         name: options4.name ?? "xterm-256color",
         cols: options4.cols ?? DEFAULT_COLS,
         rows: options4.rows ?? DEFAULT_ROWS,
-        data(_terminal, data) {
-          self2.emit("data", self2.textDecoder.decode(data));
+        data: (_terminal, data) => {
+          this.emit("data", this.textDecoder.decode(data));
         }
       },
-      onExit(_subprocess, exitCode, signalCode) {
-        self2.emit("exit", { exitCode: exitCode ?? 0, signal: signalCode ?? "" });
+      onExit: (_subprocess, exitCode, signalCode) => {
+        this.emit("exit", { exitCode: exitCode ?? 0, signal: signalCode !== null ? String(signalCode) : "" });
       }
     });
     this.pid = this.proc.pid;
@@ -474980,7 +475055,7 @@ class PtySession extends EventEmitter13 {
   resize(cols, rows) {
     try {
       this.pty.resize(cols, rows);
-    } catch (e) {}
+    } catch {}
   }
   get isRunning() {
     return this._isRunning;
@@ -475246,7 +475321,6 @@ async function execBashWithPty(command, timeoutSec = 60, onData, signal, onTimeo
   let output = "";
   let timeoutHandle;
   let timedOut = false;
-  let ptySession;
   let resolvePromise;
   const ptyProcess = spawnPty({
     command: "bash",
@@ -475256,7 +475330,7 @@ async function execBashWithPty(command, timeoutSec = 60, onData, signal, onTimeo
     output += data;
     onData?.(data);
   });
-  ptySession = new PtySession(ptyId, ptyProcess, command);
+  const ptySession = new PtySession(ptyId, ptyProcess, command);
   if (timeoutSec > 0) {
     timeoutHandle = setTimeout(() => {
       timedOut = true;
@@ -482606,7 +482680,7 @@ function generateLoremIpsum(targetTokens) {
     const sentenceLength = 10 + Math.floor(Math.random() * 11);
     let wordsInSentence = 0;
     for (let i = 0;i < sentenceLength && tokens < targetTokens; i++) {
-      const word = ONE_TOKEN_WORDS[Math.floor(Math.random() * ONE_TOKEN_WORDS.length)];
+      const word = ONE_TOKEN_WORDS[Math.floor(Math.random() * ONE_TOKEN_WORDS.length)] ?? "";
       result += word;
       tokens++;
       wordsInSentence++;
@@ -483561,19 +483635,19 @@ var SOURCE_LABELS = {
   bundled: "Built-in Skills",
   mcp: "MCP Skills"
 };
-function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
+function SkillsMenu({ isActive, onClose, skills, onInvokeSkill: _onInvokeSkill }) {
   const { width, height } = useTerminalDimensions();
   const inputRef = import_react21.useRef(null);
   const [filterText, setFilterText] = import_react21.useState("");
   const [selectedIndex, setSelectedIndex] = import_react21.useState(0);
   const [showDetails, setShowDetails] = import_react21.useState(false);
   const scrollOffsetRef = import_react21.useRef(0);
-  const panelWidth = Math.min(80, Math.max(50, Math.floor(width * 0.8)));
-  const panelHeight = Math.min(height - 4, 25);
-  const inputHeight = 1;
-  const separatorHeight = 1;
-  const detailsHeight = showDetails ? 8 : 0;
-  const listHeight = panelHeight - inputHeight - separatorHeight - detailsHeight - 2;
+  const layout = import_react21.useMemo(() => {
+    const panelWidth = Math.min(80, Math.max(50, Math.floor(width * 0.8)));
+    const listHeight = Math.min(20, Math.max(3, Math.floor(height * 0.4)));
+    const detailsHeight = showDetails ? 3 : 0;
+    return { panelWidth, listHeight, detailsHeight };
+  }, [width, height, showDetails]);
   const skillGroups = import_react21.useMemo(() => {
     const groups = new Map;
     for (const skill of skills) {
@@ -483648,23 +483722,8 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
       if (newFlatIndex !== -1) {
         if (newFlatIndex < currentScroll) {
           scrollOffsetRef.current = newFlatIndex;
-        } else if (newFlatIndex > currentScroll + listHeight - 1) {
-          scrollOffsetRef.current = newFlatIndex - listHeight + 1;
-        }
-      }
-      return;
-    }
-    if (key.name === "return" || key.name === "enter") {
-      key.preventDefault();
-      key.stopPropagation();
-      if (selectedSkill) {
-        if (onInvokeSkill && selectedSkill.argumentHint) {
-          setShowDetails(true);
-        } else if (onInvokeSkill) {
-          onInvokeSkill(selectedSkill, "");
-          onClose();
-        } else {
-          onClose();
+        } else if (newFlatIndex > currentScroll + layout.listHeight - 1) {
+          scrollOffsetRef.current = newFlatIndex - layout.listHeight + 1;
         }
       }
       return;
@@ -483693,7 +483752,7 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
   if (!isActive)
     return null;
   const effectiveScrollOffset = scrollOffsetRef.current;
-  const visibleItems = flatItems.slice(effectiveScrollOffset, effectiveScrollOffset + listHeight);
+  const visibleItems = flatItems.slice(effectiveScrollOffset, effectiveScrollOffset + layout.listHeight);
   const renderDetails = () => {
     if (!showDetails || !selectedSkill)
       return null;
@@ -483705,18 +483764,17 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
       selectedSkill.context && `Context: ${selectedSkill.context}`
     ].filter(Boolean);
     return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-      height: detailsHeight,
+      height: layout.detailsHeight,
       flexDirection: "column",
-      marginTop: 1,
       children: [
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
           height: 1,
           children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
             fg: "#6272a4",
-            children: "\u2500".repeat(panelWidth - 4)
+            children: "\u2500".repeat(layout.panelWidth - 4)
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        details.map((line, idx) => /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+        details.slice(0, 2).map((line, idx) => /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
           height: 1,
           children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
             fg: "#8be9fd",
@@ -483737,8 +483795,7 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
     alignItems: "center",
     justifyContent: "center",
     children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-      width: panelWidth,
-      height: panelHeight,
+      width: layout.panelWidth,
       flexDirection: "column",
       borderStyle: "rounded",
       borderColor: "#6272a4",
@@ -483762,12 +483819,12 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
             }, undefined, true, undefined, this),
             /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
               fg: "#6272a4",
-              children: "\u2191\u2193 navigate \xB7 Enter select \xB7 Tab details \xB7 Esc close"
+              children: "\u2191\u2193 navigate \xB7 Tab details \xB7 Esc close"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-          height: inputHeight,
+          height: 1,
           marginTop: 1,
           children: [
             /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
@@ -483781,7 +483838,7 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
               showCursor: true,
               height: 1,
               wrapMode: "none",
-              width: panelWidth - 10,
+              width: layout.panelWidth - 10,
               textColor: "#f8f8f2",
               backgroundColor: "#44475a",
               onContentChange: handleContentChange
@@ -483789,15 +483846,15 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
           ]
         }, undefined, true, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-          height: separatorHeight,
+          height: 1,
           marginTop: 1,
           children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
             fg: "#6272a4",
-            children: "\u2500".repeat(panelWidth - 2)
+            children: "\u2500".repeat(layout.panelWidth - 2)
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-          height: listHeight,
+          height: layout.listHeight,
           flexDirection: "column",
           overflow: "hidden",
           children: [
@@ -483824,11 +483881,8 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
                   children: [
                     /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
                       fg: "#ffb86c",
-                      children: [
-                        "/",
-                        item.skill.name
-                      ]
-                    }, undefined, true, undefined, this),
+                      children: item.skill.name
+                    }, undefined, false, undefined, this),
                     /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
                       fg: "#6272a4",
                       children: [
@@ -483843,7 +483897,7 @@ function SkillsMenu({ isActive, onClose, skills, onInvokeSkill }) {
               return null;
             }),
             flatItems.length === 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-              height: listHeight,
+              height: layout.listHeight,
               alignItems: "center",
               justifyContent: "center",
               children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
@@ -484172,6 +484226,124 @@ var forkManager = new ForkManager;
 // src/agent/session-store.ts
 init_mcp();
 init_mode();
+
+// src/agent/tool-output-guard.ts
+var TOOL_LIMITS = {
+  bash: { maxLines: 3000, maxBytes: 100 * 1024, truncateFrom: "tail" },
+  read: { maxLines: 2000, maxBytes: 100 * 1024, truncateFrom: "head" },
+  grep: { maxLines: 500, maxBytes: 50 * 1024, truncateFrom: "tail" },
+  glob: { maxLines: 500, maxBytes: 20 * 1024, truncateFrom: "tail" },
+  ls: { maxLines: 500, maxBytes: 20 * 1024, truncateFrom: "tail" },
+  write: { maxLines: 0, maxBytes: 0, truncateFrom: "tail" },
+  mcp: { maxLines: 1000, maxBytes: 100 * 1024, truncateFrom: "tail" }
+};
+var DEFAULT_LIMITS = {
+  maxLines: DEFAULT_MAX_LINES,
+  maxBytes: DEFAULT_MAX_BYTES,
+  truncateFrom: "tail"
+};
+function extractToolName(toolName) {
+  if (toolName.startsWith("mcp__")) {
+    const parts = toolName.split("__");
+    if (parts.length >= 3) {
+      return "mcp";
+    }
+  }
+  return toolName.split(":").pop() ?? toolName;
+}
+function truncateTextBlock(text, limits) {
+  if (limits.maxLines === 0 && limits.maxBytes === 0) {
+    return { text, wasTruncated: false, truncatedBy: null };
+  }
+  const options4 = {
+    maxLines: limits.maxLines || DEFAULT_MAX_LINES,
+    maxBytes: limits.maxBytes || DEFAULT_MAX_BYTES
+  };
+  const result = limits.truncateFrom === "head" ? truncateHead(text, options4) : truncateTail(text, options4);
+  return {
+    text: result.content,
+    wasTruncated: result.truncated,
+    truncatedBy: result.truncatedBy
+  };
+}
+function truncateToolContent(content, limits) {
+  const textBlocks = [];
+  let hasTruncation = false;
+  let lastTruncatedBy = null;
+  for (const item of content) {
+    if (item.type === "text") {
+      const result = truncateTextBlock(item.text ?? "", limits);
+      textBlocks.push(result);
+      if (result.wasTruncated) {
+        hasTruncation = true;
+        lastTruncatedBy = result.truncatedBy;
+      }
+    } else if (item.type === "image") {
+      textBlocks.push({ text: `[Image: ${item.data?.length ?? 0} bytes]`, wasTruncated: false, truncatedBy: null });
+    }
+  }
+  if (!hasTruncation) {
+    return { content, wasTruncated: false };
+  }
+  const truncatedContent = [];
+  for (const block2 of textBlocks) {
+    if (block2.text) {
+      truncatedContent.push({ type: "text", text: block2.text });
+    }
+  }
+  return {
+    content: truncatedContent,
+    wasTruncated: true,
+    truncationInfo: {
+      truncatedBy: lastTruncatedBy ?? "unknown",
+      totalLines: 0,
+      outputLines: 0,
+      totalBytes: 0,
+      outputBytes: 0
+    }
+  };
+}
+function createToolOutputGuard(customLimits) {
+  const limits = { ...TOOL_LIMITS, ...customLimits };
+  return async (context) => {
+    const { result, toolCall } = context;
+    const toolName = extractToolName(toolCall.name);
+    const toolLimits = limits[toolName] ?? DEFAULT_LIMITS;
+    if (!toolLimits || toolLimits.maxLines === 0 && toolLimits.maxBytes === 0) {
+      return;
+    }
+    const { content, wasTruncated } = truncateToolContent(result.content, toolLimits);
+    if (!wasTruncated) {
+      return;
+    }
+    const truncateNote = buildTruncationNote(toolName);
+    const finalContent = [...content];
+    const lastTextBlock = [...finalContent].reverse().find((c2) => c2.type === "text");
+    if (lastTextBlock) {
+      const idx = finalContent.findIndex((c2) => c2.type === "text" && c2.text === lastTextBlock.text);
+      if (idx >= 0) {
+        finalContent[idx] = {
+          type: "text",
+          text: `${lastTextBlock.text.trimEnd()}
+
+${truncateNote}`
+        };
+      }
+    } else {
+      finalContent.push({ type: "text", text: truncateNote });
+    }
+    return {
+      content: finalContent
+    };
+  };
+}
+function buildTruncationNote(toolName) {
+  const toolLabel = toolName === "mcp" ? "MCP tool" : `"${toolName}"`;
+  return `[Output truncated to prevent context overflow. Set a higher limit or use filters to see more of the ${toolLabel} output.]`;
+}
+var MCP_TOOL_LIMITS = TOOL_LIMITS["mcp"];
+
+// src/agent/session-store.ts
 var CONFIG_DIR3 = path25.join(os16.homedir(), ".config", "koi");
 var KOI_SESSIONS_DIR2 = path25.join(CONFIG_DIR3, "sessions");
 var PI_AGENT_DIR2 = path25.join(CONFIG_DIR3, "pi");
@@ -484420,7 +484592,7 @@ async function createAgentSessionWithConfig(sessionManager, config4) {
   try {
     fs18.appendFileSync(logPath, logLine);
   } catch {}
-  return createAgentSession({
+  const result = await createAgentSession({
     cwd: process.cwd(),
     agentDir: PI_AGENT_DIR2,
     authStorage: config4.authStorage,
@@ -484432,6 +484604,9 @@ async function createAgentSessionWithConfig(sessionManager, config4) {
     sessionManager,
     resourceLoader
   });
+  const afterToolCall = createToolOutputGuard();
+  result.session.agent.afterToolCall = afterToolCall;
+  return result;
 }
 async function listSessions() {
   try {
@@ -485995,8 +486170,9 @@ function EditPendingModal({
   type: type3,
   onConfirm,
   onCancel,
-  width = 70
+  width: widthProp
 }) {
+  const { width } = useTerminalDimensions();
   const textareaRef = import_react24.useRef(null);
   import_react24.useEffect(() => {
     if (isActive && textareaRef.current) {
@@ -486013,6 +486189,7 @@ function EditPendingModal({
   if (!isActive)
     return null;
   const label = type3 === "sheer" ? "Edit Sheer" : "Edit Queued";
+  const modalWidth = Math.min(widthProp ?? 70, Math.max(40, Math.floor(width * 0.85)));
   const handleConfirm = () => {
     const text = textareaRef.current?.editBuffer.getText() ?? "";
     if (text.trim()) {
@@ -486036,7 +486213,7 @@ function EditPendingModal({
       backgroundColor: "#1a1a2e",
       paddingX: 2,
       paddingY: 1,
-      width,
+      width: modalWidth,
       children: [
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
           alignSelf: "center",
@@ -486051,7 +486228,7 @@ function EditPendingModal({
             onSubmit: handleConfirm,
             focused: true,
             disabled: false,
-            width: width - 4
+            width: modalWidth - 4
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
@@ -486278,6 +486455,7 @@ function Divider({
 }
 function SideBar({
   width = 28,
+  height = 50,
   workingDir = "/",
   sessionTitle: sessionTitle2 = "New Session",
   modelName = "Not configured",
@@ -486296,95 +486474,137 @@ function SideBar({
   const hasMoreSubagents = subagents.length > visibleSubagents.length;
   const visibleMonitors = monitors.slice(0, 8);
   const hasMoreMonitors = monitors.length > visibleMonitors.length;
-  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("scrollbox", {
+    scrollY: true,
+    scrollX: false,
     width,
-    flexDirection: "column",
-    paddingLeft: 1,
-    children: [
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        children: " "
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-        width: usableWidth,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        children: [
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            attributes: createTextAttributes({ bold: true }),
-            fg: "#5a6a7a",
-            children: "Meowdream"
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            fg: "#7a8a9a",
-            children: VERSION6
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        children: " "
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
-        width: usableWidth
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
-        width: usableWidth,
-        char: "\xB7",
-        fg: "#c5cdd5"
-      }, undefined, false, undefined, this),
-      KOI_LOGO.map((line, i) => {
-        const color = GRADIENT_STOPS[Math.min(i, GRADIENT_STOPS.length - 1)];
-        return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-          fg: color,
-          wrapMode: "none",
-          truncate: true,
-          children: line.slice(0, usableWidth)
-        }, i, false, undefined, this);
-      }),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
-        width: usableWidth,
-        char: "\xB7",
-        fg: "#c5cdd5"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
-        width: usableWidth
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        children: " "
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        attributes: createTextAttributes({ bold: true }),
-        fg: "#5a6a7a",
-        children: sessionTitle2
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        children: " "
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        fg: "#8a9aaa",
-        children: abbreviatePath(workingDir, usableWidth)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        children: " "
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        attributes: createTextAttributes({ bold: true }),
-        fg: "#5a6a7a",
-        children: modelName
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        fg: "#8a9aaa",
-        children: provider
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-        fg: "#8a9aaa",
-        children: `${contextUsage} ${tokenCount} ${cost}`
-      }, undefined, false, undefined, this),
-      (() => {
-        const mcpSummary = getMcpStatusSummary();
-        const mcpConnections = getMcpConnections();
-        if (mcpSummary.total === 0)
-          return null;
-        return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
+    height,
+    children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+      width,
+      flexDirection: "column",
+      paddingLeft: 1,
+      children: [
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          children: " "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          width: usableWidth,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          children: [
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              attributes: createTextAttributes({ bold: true }),
+              fg: "#5a6a7a",
+              children: "Meowdream"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              fg: "#7a8a9a",
+              children: VERSION6
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          children: " "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
+          width: usableWidth
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
+          width: usableWidth,
+          char: "\xB7",
+          fg: "#c5cdd5"
+        }, undefined, false, undefined, this),
+        KOI_LOGO.map((line, i) => {
+          const color = GRADIENT_STOPS[Math.min(i, GRADIENT_STOPS.length - 1)];
+          return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: color,
+            wrapMode: "none",
+            truncate: true,
+            children: line.slice(0, usableWidth)
+          }, i, false, undefined, this);
+        }),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
+          width: usableWidth,
+          char: "\xB7",
+          fg: "#c5cdd5"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Divider, {
+          width: usableWidth
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          children: " "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          attributes: createTextAttributes({ bold: true }),
+          fg: "#5a6a7a",
+          children: sessionTitle2
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          children: " "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          fg: "#8a9aaa",
+          children: abbreviatePath(workingDir, usableWidth)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          children: " "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          attributes: createTextAttributes({ bold: true }),
+          fg: "#5a6a7a",
+          children: modelName
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          fg: "#8a9aaa",
+          children: provider
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          fg: "#8a9aaa",
+          children: `${contextUsage} ${tokenCount} ${cost}`
+        }, undefined, false, undefined, this),
+        (() => {
+          const mcpSummary = getMcpStatusSummary();
+          const mcpConnections = getMcpConnections();
+          if (mcpSummary.total === 0)
+            return null;
+          return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
+            children: [
+              /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                children: " "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                attributes: createTextAttributes({ bold: true }),
+                fg: "#5a6a7a",
+                children: [
+                  "MCP (",
+                  mcpSummary.connected,
+                  "/",
+                  mcpSummary.total,
+                  ")"
+                ]
+              }, undefined, true, undefined, this),
+              Array.from(mcpConnections.entries()).map(([name, connection]) => {
+                const color = MCP_STATUS_COLORS[connection.status] ?? "#6c6c7c";
+                return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+                  flexDirection: "row",
+                  gap: 1,
+                  children: [
+                    /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                      fg: color,
+                      children: "\u25CF"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(FixedWidthText, {
+                      text: name,
+                      width: Math.max(1, usableWidth - 4),
+                      fg: "#8a9aaa"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, name, true, undefined, this);
+              })
+            ]
+          }, undefined, true, undefined, this);
+        })(),
+        visibleSubagents.length > 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
           children: [
             /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
               children: " "
@@ -486393,15 +486613,13 @@ function SideBar({
               attributes: createTextAttributes({ bold: true }),
               fg: "#5a6a7a",
               children: [
-                "MCP (",
-                mcpSummary.connected,
-                "/",
-                mcpSummary.total,
+                "Subagents (",
+                subagents.length,
                 ")"
               ]
             }, undefined, true, undefined, this),
-            Array.from(mcpConnections.entries()).map(([name, connection]) => {
-              const color = MCP_STATUS_COLORS[connection.status] ?? "#6c6c7c";
+            visibleSubagents.map((sa) => {
+              const color = SUBAGENT_STATUS_COLORS[sa.status] ?? "#fbbf24";
               return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
                 flexDirection: "row",
                 gap: 1,
@@ -486411,133 +486629,99 @@ function SideBar({
                     children: "\u25CF"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(FixedWidthText, {
-                    text: name,
+                    text: sa.description,
                     width: Math.max(1, usableWidth - 4),
                     fg: "#8a9aaa"
                   }, undefined, false, undefined, this)
                 ]
-              }, name, true, undefined, this);
-            })
+              }, sa.id, true, undefined, this);
+            }),
+            hasMoreSubagents && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              fg: "#9aa5b0",
+              children: `\u2026 and ${subagents.length - visibleSubagents.length} more`
+            }, undefined, false, undefined, this)
           ]
-        }, undefined, true, undefined, this);
-      })(),
-      visibleSubagents.length > 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
-        children: [
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            children: " "
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            attributes: createTextAttributes({ bold: true }),
-            fg: "#5a6a7a",
-            children: [
-              "Subagents (",
-              subagents.length,
-              ")"
-            ]
-          }, undefined, true, undefined, this),
-          visibleSubagents.map((sa) => {
-            const color = SUBAGENT_STATUS_COLORS[sa.status] ?? "#fbbf24";
-            return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-              flexDirection: "row",
-              gap: 1,
-              children: [
-                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-                  fg: color,
-                  children: "\u25CF"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(FixedWidthText, {
-                  text: sa.description,
-                  width: Math.max(1, usableWidth - 4),
-                  fg: "#8a9aaa"
-                }, undefined, false, undefined, this)
-              ]
-            }, sa.id, true, undefined, this);
-          }),
-          hasMoreSubagents && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            fg: "#9aa5b0",
-            children: `\u2026 and ${subagents.length - visibleSubagents.length} more`
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      visibleTasks.length > 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
-        children: [
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            children: " "
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            attributes: createTextAttributes({ bold: true }),
-            fg: "#5a6a7a",
-            children: [
-              "Tasks (",
-              tasks.length,
-              ")"
-            ]
-          }, undefined, true, undefined, this),
-          visibleTasks.map((task) => {
-            const color = TASK_STATUS_COLORS[task.status] ?? "#fbbf24";
-            return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-              flexDirection: "row",
-              gap: 1,
+        }, undefined, true, undefined, this),
+        visibleTasks.length > 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
+          children: [
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              children: " "
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              attributes: createTextAttributes({ bold: true }),
+              fg: "#5a6a7a",
               children: [
-                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-                  fg: color,
-                  children: "\u25CF"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(FixedWidthText, {
-                  text: task.content,
-                  width: Math.max(1, usableWidth - 4),
-                  fg: "#8a9aaa"
-                }, undefined, false, undefined, this)
+                "Tasks (",
+                tasks.length,
+                ")"
               ]
-            }, task.id, true, undefined, this);
-          }),
-          hasMoreTasks && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            fg: "#9aa5b0",
-            children: `\u2026 and ${tasks.length - visibleTasks.length} more`
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this),
-      visibleMonitors.length > 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
-        children: [
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            children: " "
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            attributes: createTextAttributes({ bold: true }),
-            fg: "#5a6a7a",
-            children: [
-              "Monitors (",
-              monitors.length,
-              ")"
-            ]
-          }, undefined, true, undefined, this),
-          visibleMonitors.map((mon) => {
-            const color = MONITOR_STATUS_COLORS[mon.status] ?? "#fbbf24";
-            const displayText = mon.lastOutput ? `${mon.description}: ${mon.lastOutput.slice(0, 20)}` : mon.description;
-            return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-              flexDirection: "row",
-              gap: 1,
+            }, undefined, true, undefined, this),
+            visibleTasks.map((task) => {
+              const color = TASK_STATUS_COLORS[task.status] ?? "#fbbf24";
+              return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+                flexDirection: "row",
+                gap: 1,
+                children: [
+                  /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                    fg: color,
+                    children: "\u25CF"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(FixedWidthText, {
+                    text: task.content,
+                    width: Math.max(1, usableWidth - 4),
+                    fg: "#8a9aaa"
+                  }, undefined, false, undefined, this)
+                ]
+              }, task.id, true, undefined, this);
+            }),
+            hasMoreTasks && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              fg: "#9aa5b0",
+              children: `\u2026 and ${tasks.length - visibleTasks.length} more`
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        visibleMonitors.length > 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(import_jsx_dev_runtime2.Fragment, {
+          children: [
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              children: " "
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              attributes: createTextAttributes({ bold: true }),
+              fg: "#5a6a7a",
               children: [
-                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-                  fg: color,
-                  children: "\u25CF"
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(FixedWidthText, {
-                  text: displayText,
-                  width: Math.max(1, usableWidth - 4),
-                  fg: "#8a9aaa"
-                }, undefined, false, undefined, this)
+                "Monitors (",
+                monitors.length,
+                ")"
               ]
-            }, mon.id, true, undefined, this);
-          }),
-          hasMoreMonitors && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-            fg: "#9aa5b0",
-            children: `\u2026 and ${monitors.length - visibleMonitors.length} more`
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+            }, undefined, true, undefined, this),
+            visibleMonitors.map((mon) => {
+              const color = MONITOR_STATUS_COLORS[mon.status] ?? "#fbbf24";
+              const displayText = mon.lastOutput ? `${mon.description}: ${mon.lastOutput.slice(0, 20)}` : mon.description;
+              return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+                flexDirection: "row",
+                gap: 1,
+                children: [
+                  /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                    fg: color,
+                    children: "\u25CF"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(FixedWidthText, {
+                    text: displayText,
+                    width: Math.max(1, usableWidth - 4),
+                    fg: "#8a9aaa"
+                  }, undefined, false, undefined, this)
+                ]
+              }, mon.id, true, undefined, this);
+            }),
+            hasMoreMonitors && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+              fg: "#9aa5b0",
+              children: `\u2026 and ${monitors.length - visibleMonitors.length} more`
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
 
 // src/tui/components/exit-modal.tsx
@@ -486580,6 +486764,7 @@ function Button({
   }, undefined, false, undefined, this);
 }
 function ExitModal({ isActive, onConfirm, onCancel }) {
+  const { width } = useTerminalDimensions();
   useKeyboard((key) => {
     if (!isActive)
       return;
@@ -486591,6 +486776,7 @@ function ExitModal({ isActive, onConfirm, onCancel }) {
   });
   if (!isActive)
     return null;
+  const modalWidth = Math.min(35, Math.max(20, Math.floor(width * 0.4)));
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
@@ -486608,6 +486794,7 @@ function ExitModal({ isActive, onConfirm, onCancel }) {
       paddingY: 1,
       flexDirection: "column",
       alignItems: "center",
+      width: modalWidth,
       children: [
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
           attributes: createTextAttributes({ bold: true }),
@@ -486678,7 +486865,7 @@ function CommandPanel({ isActive, onClose, commands }) {
     }
   }, [isActive]);
   const query2 = filterText;
-  const { flatItems, cmdCount } = import_react29.useMemo(() => {
+  const { flatItems } = import_react29.useMemo(() => {
     let filtered = commands;
     if (query2) {
       const q3 = query2.toLowerCase();
@@ -486705,7 +486892,7 @@ function CommandPanel({ isActive, onClose, commands }) {
         cmdIdx++;
       }
     }
-    return { flatItems: items3, cmdCount: cmdIdx };
+    return { flatItems: items3 };
   }, [commands, query2]);
   const effectiveScrollOffset = scrollOffsetRef.current;
   useKeyboard((key) => {
@@ -486726,8 +486913,25 @@ function CommandPanel({ isActive, onClose, commands }) {
     if (key.name === "up" || key.name === "down") {
       key.preventDefault();
       key.stopPropagation();
-      const newIndex = key.name === "up" ? Math.max(0, selectedCmdIndex - 1) : Math.min(cmdCount - 1, selectedCmdIndex + 1);
-      const newFlatIndex = flatItems.findIndex((i) => i.type === "command" && i.cmdIndex === newIndex);
+      const enabledIndices = flatItems.filter((i) => i.type === "command" && !i.cmd?.disabled && i.cmdIndex !== undefined).map((i) => i.cmdIndex);
+      if (enabledIndices.length === 0)
+        return;
+      const currentIdx = enabledIndices.indexOf(selectedCmdIndex);
+      let targetIndex;
+      if (key.name === "up") {
+        if (currentIdx <= 0) {
+          targetIndex = enabledIndices[enabledIndices.length - 1];
+        } else {
+          targetIndex = enabledIndices[currentIdx - 1];
+        }
+      } else {
+        if (currentIdx < 0 || currentIdx >= enabledIndices.length - 1) {
+          targetIndex = enabledIndices[0];
+        } else {
+          targetIndex = enabledIndices[currentIdx + 1];
+        }
+      }
+      const newFlatIndex = flatItems.findIndex((i) => i.type === "command" && i.cmdIndex === targetIndex);
       const currentScroll = scrollOffsetRef.current;
       let newScrollOffset = currentScroll;
       if (newFlatIndex !== -1) {
@@ -486737,16 +486941,8 @@ function CommandPanel({ isActive, onClose, commands }) {
           newScrollOffset = newFlatIndex - listHeight + 1;
         }
       }
-      console.log("[CommandPanel] Key press:", {
-        key: key.name,
-        newIndex,
-        newFlatIndex,
-        currentScroll,
-        listHeight,
-        newScrollOffset
-      });
       scrollOffsetRef.current = newScrollOffset;
-      setSelectedCmdIndex(newIndex);
+      setSelectedCmdIndex(targetIndex);
       return;
     }
   });
@@ -486758,7 +486954,7 @@ function CommandPanel({ isActive, onClose, commands }) {
   };
   const handleSubmit = () => {
     const selectedItem = flatItems.find((i) => i.type === "command" && i.cmdIndex === selectedCmdIndex);
-    if (selectedItem?.cmd) {
+    if (selectedItem?.cmd && !selectedItem.cmd.disabled) {
       onClose();
       selectedItem.cmd.action();
     }
@@ -486824,14 +487020,15 @@ function CommandPanel({ isActive, onClose, commands }) {
                   }, undefined, false, undefined, this)
                 }, `h-${item.section}-${flatIndex}`, false, undefined, this);
               }
-              const isSelected = item.cmdIndex === selectedCmdIndex;
+              const isDisabled = item.cmd?.disabled;
+              const isSelected = !isDisabled && item.cmdIndex === selectedCmdIndex;
               return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
                 height: 1,
                 backgroundColor: isSelected ? "#44475a" : undefined,
                 paddingLeft: 2,
                 children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-                  fg: isSelected ? "#ff79c6" : "#f8f8f2",
-                  children: `${item.cmd.id}  ${item.cmd.label}`
+                  fg: isDisabled ? "#666666" : isSelected ? "#ff79c6" : "#f8f8f2",
+                  children: `${item.cmd.id}  ${isDisabled ? item.cmd.label + " (busy)" : item.cmd.label}`
                 }, undefined, false, undefined, this)
               }, `c-${item.cmd.id}-${flatIndex}`, false, undefined, this);
             }),
@@ -486852,6 +487049,7 @@ function CommandPanel({ isActive, onClose, commands }) {
 // src/tui/components/rename-modal.tsx
 var import_react31 = __toESM(require_react(), 1);
 function RenameModal({ isActive, currentTitle, onConfirm, onCancel }) {
+  const { width } = useTerminalDimensions();
   const inputRef = import_react31.useRef(null);
   const [value2, setValue] = import_react31.useState(currentTitle);
   import_react31.useEffect(() => {
@@ -486886,6 +487084,7 @@ function RenameModal({ isActive, currentTitle, onConfirm, onCancel }) {
   };
   if (!isActive)
     return null;
+  const modalWidth = Math.min(50, Math.max(30, Math.floor(width * 0.6)));
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
@@ -486896,7 +487095,7 @@ function RenameModal({ isActive, currentTitle, onConfirm, onCancel }) {
     alignItems: "center",
     justifyContent: "center",
     children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-      width: 50,
+      width: modalWidth,
       flexDirection: "column",
       borderStyle: "rounded",
       borderColor: "#4a4a5a",
@@ -486976,8 +487175,25 @@ function ConnectModal({ isActive, onClose }) {
   const [verifyResult, setVerifyResult] = import_react33.useState(null);
   const [spinnerFrame, setSpinnerFrame] = import_react33.useState(0);
   const [scrollOffset, setScrollOffset] = import_react33.useState(0);
+  const [filterText, setFilterText] = import_react33.useState("");
   const inputRef = import_react33.useRef(null);
-  const listHeight = Math.min(10, Math.floor(height * 0.35));
+  const searchRef = import_react33.useRef(null);
+  const layout = import_react33.useMemo(() => ({
+    listHeight: Math.min(10, Math.max(3, Math.floor(height * 0.35)))
+  }), [height]);
+  const query2 = filterText;
+  const filteredProviders = import_react33.useMemo(() => {
+    if (!query2)
+      return providers;
+    const q3 = query2.toLowerCase();
+    return providers.filter((p) => p.toLowerCase().includes(q3));
+  }, [providers, query2]);
+  const handleSearchChange = () => {
+    const text = searchRef.current?.editBuffer.getText() ?? "";
+    setFilterText(text);
+    setSelectedProviderIndex(0);
+    setScrollOffset(0);
+  };
   import_react33.useEffect(() => {
     if (isActive) {
       setStep("provider");
@@ -486987,6 +487203,12 @@ function ConnectModal({ isActive, onClose }) {
       setVerifyResult(null);
       setSpinnerFrame(0);
       setScrollOffset(0);
+      setFilterText("");
+      const ta = searchRef.current;
+      if (ta) {
+        ta.editBuffer.replaceText("");
+        ta.focus();
+      }
     }
   }, [isActive]);
   import_react33.useEffect(() => {
@@ -487049,10 +487271,15 @@ function ConnectModal({ isActive, onClose }) {
   import_react33.useEffect(() => {
     if (selectedProviderIndex < scrollOffset) {
       setScrollOffset(selectedProviderIndex);
-    } else if (selectedProviderIndex >= scrollOffset + listHeight) {
-      setScrollOffset(selectedProviderIndex - listHeight + 1);
+    } else if (selectedProviderIndex >= scrollOffset + layout.listHeight) {
+      setScrollOffset(selectedProviderIndex - layout.listHeight + 1);
+    }
+  }, [selectedProviderIndex, layout.listHeight, scrollOffset]);
+  import_react33.useEffect(() => {
+    if (selectedProviderIndex >= filteredProviders.length && filteredProviders.length > 0) {
+      setSelectedProviderIndex(filteredProviders.length - 1);
     }
-  }, [selectedProviderIndex, listHeight, scrollOffset]);
+  }, [filteredProviders.length, selectedProviderIndex]);
   const handleSelectProvider = (provider) => {
     setSelectedProvider(provider);
     if (isProviderConfigured(provider)) {
@@ -487094,11 +487321,11 @@ function ConnectModal({ isActive, onClose }) {
         return;
       }
       if (key.name === "down") {
-        setSelectedProviderIndex((prev) => Math.max(0, Math.min(providers.length - 1, prev + 1)));
+        setSelectedProviderIndex((prev) => Math.max(0, Math.min(filteredProviders.length - 1, prev + 1)));
         return;
       }
       if (key.name === "return") {
-        const provider = providers[selectedProviderIndex];
+        const provider = filteredProviders[selectedProviderIndex];
         if (provider) {
           handleSelectProvider(provider);
         }
@@ -487143,7 +487370,7 @@ function ConnectModal({ isActive, onClose }) {
   const existingConfig = selectedProvider ? getProviderConfig(selectedProvider) : undefined;
   if (!isActive)
     return null;
-  const visibleProviders = providers.slice(scrollOffset, scrollOffset + listHeight);
+  const visibleProviders = filteredProviders.slice(scrollOffset, scrollOffset + layout.listHeight);
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
@@ -487170,45 +487397,83 @@ function ConnectModal({ isActive, onClose }) {
               children: "Select Provider"
             }, undefined, false, undefined, this),
             /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-              height: listHeight,
+              height: 1,
+              marginTop: 1,
+              backgroundColor: "#16213e",
+              paddingX: 1,
+              children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("textarea", {
+                ref: searchRef,
+                initialValue: "",
+                focused: isActive,
+                showCursor: true,
+                height: 1,
+                wrapMode: "none",
+                textColor: "#f8f8f2",
+                backgroundColor: "#16213e",
+                onContentChange: handleSearchChange
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+              height: 1,
+              marginTop: 1,
+              children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                fg: "#4a4a5a",
+                children: "\u2500".repeat(56)
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+              height: layout.listHeight,
               flexDirection: "column",
               overflow: "hidden",
               marginTop: 1,
-              children: visibleProviders.map((p, i) => {
-                const actualIndex = scrollOffset + i;
-                const configured = isProviderConfigured(p);
-                return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+              children: [
+                filteredProviders.length === 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
                   height: 1,
-                  backgroundColor: actualIndex === selectedProviderIndex ? "#44475a" : undefined,
-                  paddingLeft: 1,
-                  flexDirection: "row",
-                  onMouseUp: (e) => {
-                    e.stopPropagation();
-                    handleSelectProvider(p);
-                  },
-                  children: [
-                    /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-                      fg: actualIndex === selectedProviderIndex ? "#ff79c6" : "#f8f8f2",
-                      children: [
-                        configured ? "\u25CF " : "  ",
-                        p
-                      ]
-                    }, undefined, true, undefined, this),
-                    configured && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
-                      fg: "#00ff99",
-                      marginLeft: 1,
-                      children: "configured"
-                    }, undefined, false, undefined, this)
-                  ]
-                }, p, true, undefined, this);
-              })
-            }, undefined, false, undefined, this),
+                  children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                    fg: "#6c6c7c",
+                    children: [
+                      'No providers match "',
+                      filterText,
+                      '"'
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                visibleProviders.map((p, i) => {
+                  const actualIndex = scrollOffset + i;
+                  const configured = isProviderConfigured(p);
+                  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+                    height: 1,
+                    backgroundColor: actualIndex === selectedProviderIndex ? "#44475a" : undefined,
+                    paddingLeft: 1,
+                    flexDirection: "row",
+                    onMouseUp: (e) => {
+                      e.stopPropagation();
+                      handleSelectProvider(p);
+                    },
+                    children: [
+                      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                        fg: actualIndex === selectedProviderIndex ? "#ff79c6" : "#f8f8f2",
+                        children: [
+                          configured ? "\u25CF " : "  ",
+                          p
+                        ]
+                      }, undefined, true, undefined, this),
+                      configured && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                        fg: "#00ff99",
+                        marginLeft: 1,
+                        children: "configured"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, p, true, undefined, this);
+                })
+              ]
+            }, undefined, true, undefined, this),
             /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
               marginTop: 1,
               children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
                 fg: "#6c6c7c",
                 attributes: createTextAttributes({ dim: true }),
-                children: "\u2191\u2193 Navigate  Enter Select  Esc Cancel"
+                children: "\u2191\u2193 Navigate  Enter Select  Esc Cancel  Type to search"
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this)
           ]
@@ -487411,41 +487676,85 @@ function ModelModal({
   const configuredProviders = getConfiguredProviders();
   const [selectedModelIndex, setSelectedModelIndex] = import_react35.useState(0);
   const [activeTab, setActiveTab] = import_react35.useState("primary");
+  const [filterText, setFilterText] = import_react35.useState("");
   const scrollOffsetRef = import_react35.useRef(0);
-  const listHeight = Math.min(12, Math.floor(height * 0.4));
+  const inputRef = import_react35.useRef(null);
+  const layout = import_react35.useMemo(() => ({
+    listHeight: Math.min(12, Math.max(3, Math.floor(height * 0.4)))
+  }), [height]);
   const primaryModel = getCurrentModel();
   const auxiliaryModel2 = getAuxiliaryModel();
   import_react35.useLayoutEffect(() => {
     if (isActive) {
       setSelectedModelIndex(0);
       setActiveTab("primary");
+      setFilterText("");
       scrollOffsetRef.current = 0;
+      const ta = inputRef.current;
+      if (ta) {
+        ta.editBuffer.replaceText("");
+        ta.focus();
+      }
     }
   }, [isActive]);
+  const query2 = filterText;
   const { flatItems, modelCount } = import_react35.useMemo(() => {
-    const items3 = [];
-    let mIdx = 0;
+    const allModels = [];
     for (const provider of configuredProviders) {
-      items3.push({ type: "header", provider });
       const models2 = getProviderModels(provider);
       for (const model of models2) {
-        items3.push({
-          type: "model",
+        allModels.push({
           provider,
           modelId: model.id,
-          modelName: model.name || model.id,
+          modelName: model.name || model.id
+        });
+      }
+    }
+    let filteredModels = allModels;
+    if (query2) {
+      const q3 = query2.toLowerCase();
+      filteredModels = allModels.map((m2) => {
+        const providerMatch = m2.provider.toLowerCase().includes(q3);
+        const modelIdMatch = m2.modelId.toLowerCase().includes(q3);
+        const modelNameMatch = m2.modelName.toLowerCase().includes(q3);
+        const priority = !providerMatch && !modelIdMatch && !modelNameMatch ? 3 : providerMatch ? 0 : modelIdMatch ? 1 : 2;
+        return { model: m2, priority };
+      }).filter((item) => item.priority < 3).sort((a, b2) => a.priority - b2.priority).map((item) => item.model);
+    }
+    const grouped = new Map;
+    for (const m2 of filteredModels) {
+      if (!grouped.has(m2.provider))
+        grouped.set(m2.provider, []);
+      grouped.get(m2.provider).push(m2);
+    }
+    const items3 = [];
+    let mIdx = 0;
+    for (const [provider, models2] of grouped) {
+      items3.push({ type: "header", provider });
+      for (const m2 of models2) {
+        items3.push({
+          type: "model",
+          provider: m2.provider,
+          modelId: m2.modelId,
+          modelName: m2.modelName,
           modelIndex: mIdx
         });
         mIdx++;
       }
     }
     return { flatItems: items3, modelCount: mIdx };
-  }, [configuredProviders]);
+  }, [configuredProviders, query2]);
   import_react35.useEffect(() => {
     if (selectedModelIndex >= modelCount && modelCount > 0) {
       setSelectedModelIndex(modelCount - 1);
     }
   }, [modelCount, selectedModelIndex]);
+  const handleContentChange = () => {
+    const text = inputRef.current?.editBuffer.getText() ?? "";
+    setFilterText(text);
+    setSelectedModelIndex(0);
+    scrollOffsetRef.current = 0;
+  };
   const effectiveScrollOffset = scrollOffsetRef.current;
   useKeyboard((key) => {
     if (!isActive)
@@ -487465,8 +487774,8 @@ function ModelModal({
       if (newFlatIndex !== -1) {
         if (newFlatIndex < scrollOffsetRef.current) {
           newScrollOffset = newFlatIndex;
-        } else if (newFlatIndex > scrollOffsetRef.current + listHeight - 1) {
-          newScrollOffset = newFlatIndex - listHeight + 1;
+        } else if (newFlatIndex > scrollOffsetRef.current + layout.listHeight - 1) {
+          newScrollOffset = newFlatIndex - layout.listHeight + 1;
         }
       }
       scrollOffsetRef.current = newScrollOffset;
@@ -487494,7 +487803,7 @@ function ModelModal({
   });
   if (!isActive)
     return null;
-  const visibleItems = flatItems.slice(effectiveScrollOffset, effectiveScrollOffset + listHeight);
+  const visibleItems = flatItems.slice(effectiveScrollOffset, effectiveScrollOffset + layout.listHeight);
   const isCurrent = (provider, modelId) => {
     const target2 = activeTab === "primary" ? primaryModel : auxiliaryModel2;
     return target2?.provider === provider && target2?.modelId === modelId;
@@ -487575,7 +487884,32 @@ function ModelModal({
           ]
         }, undefined, true, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-          height: listHeight,
+          height: 1,
+          marginTop: 1,
+          backgroundColor: "#16213e",
+          paddingX: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("textarea", {
+            ref: inputRef,
+            initialValue: "",
+            focused: isActive,
+            showCursor: true,
+            height: 1,
+            wrapMode: "none",
+            textColor: "#f8f8f2",
+            backgroundColor: "#16213e",
+            onContentChange: handleContentChange
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          height: 1,
+          marginTop: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#4a4a5a",
+            children: "\u2500".repeat(56)
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          height: layout.listHeight,
           flexDirection: "column",
           overflow: "hidden",
           marginTop: 1,
@@ -487587,6 +487921,17 @@ function ModelModal({
                 children: "No providers configured. Use /connect to add one."
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
+            configuredProviders.length > 0 && modelCount === 0 && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+              height: 1,
+              children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                fg: "#6c6c7c",
+                children: [
+                  'No models match "',
+                  filterText,
+                  '"'
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this),
             visibleItems.map((item, idx) => {
               const flatIndex = effectiveScrollOffset + idx;
               if (item.type === "header") {
@@ -487632,7 +487977,7 @@ function ModelModal({
             /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
               fg: "#6c6c7c",
               attributes: createTextAttributes({ dim: true }),
-              children: "Tab Switch"
+              children: "Type to search  Tab Switch"
             }, undefined, false, undefined, this)
           ]
         }, undefined, true, undefined, this)
@@ -487675,8 +488020,10 @@ function SessionModal({
   const { width, height } = useTerminalDimensions();
   const [selectedIndex, setSelectedIndex] = import_react37.useState(0);
   const [scrollOffset, setScrollOffset] = import_react37.useState(0);
-  const panelWidth = Math.min(70, Math.max(50, Math.floor(width * 0.7)));
-  const listHeight = Math.min(14, Math.floor(height * 0.5));
+  const layout = import_react37.useMemo(() => ({
+    panelWidth: Math.min(70, Math.max(50, Math.floor(width * 0.7))),
+    listHeight: Math.min(14, Math.max(3, Math.floor(height * 0.5)))
+  }), [width, height]);
   import_react37.useEffect(() => {
     if (isActive) {
       setSelectedIndex(0);
@@ -487700,10 +488047,10 @@ function SessionModal({
       return;
     if (safeIndex < scrollOffset) {
       setScrollOffset(safeIndex);
-    } else if (safeIndex >= scrollOffset + listHeight) {
-      setScrollOffset(safeIndex - listHeight + 1);
+    } else if (safeIndex >= scrollOffset + layout.listHeight) {
+      setScrollOffset(safeIndex - layout.listHeight + 1);
     }
-  }, [safeIndex, listHeight, scrollOffset]);
+  }, [safeIndex, layout.listHeight, scrollOffset]);
   useKeyboard((key) => {
     if (!isActive || keyboardDisabled)
       return;
@@ -487740,7 +488087,7 @@ function SessionModal({
   });
   if (!isActive)
     return null;
-  const visibleSessions = sessions.slice(scrollOffset, scrollOffset + listHeight);
+  const visibleSessions = sessions.slice(scrollOffset, scrollOffset + layout.listHeight);
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
@@ -487751,7 +488098,7 @@ function SessionModal({
     alignItems: "center",
     justifyContent: "center",
     children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-      width: panelWidth,
+      width: layout.panelWidth,
       flexDirection: "column",
       borderStyle: "rounded",
       borderColor: "#4a4a5a",
@@ -487776,7 +488123,7 @@ function SessionModal({
           ]
         }, undefined, true, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-          height: listHeight,
+          height: layout.listHeight,
           flexDirection: "column",
           overflow: "hidden",
           marginTop: 1,
@@ -487792,8 +488139,9 @@ function SessionModal({
               const flatIndex = scrollOffset + idx;
               const isSelected = flatIndex === safeIndex;
               const isCurrent = s.id === currentSessionId;
-              const safeTitle = String(s.title ?? "Untitled Session");
+              const safeTitle = s.title ?? "Untitled Session";
               const safeMessageCount = typeof s.messageCount === "number" ? s.messageCount : 0;
+              const messageCountDisplay = safeMessageCount > 0 ? safeMessageCount.toString() : "0";
               const safeUpdatedAt = s.updatedAt instanceof Date && !isNaN(s.updatedAt.getTime()) ? s.updatedAt : new Date;
               return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
                 height: 1,
@@ -487807,7 +488155,7 @@ function SessionModal({
                   /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
                     fg: isSelected ? "#ff79c6" : isCurrent ? "#00f5ff" : "#f8f8f2",
                     attributes: createTextAttributes({ bold: isCurrent }),
-                    width: Math.max(1, panelWidth - 24),
+                    width: Math.max(1, layout.panelWidth - 24),
                     truncate: true,
                     children: [
                       isCurrent ? "\u25CF " : "  ",
@@ -487822,7 +488170,7 @@ function SessionModal({
                         fg: "#6c6c7c",
                         attributes: createTextAttributes({ dim: true }),
                         children: [
-                          String(safeMessageCount),
+                          messageCountDisplay,
                           "msg"
                         ]
                       }, undefined, true, undefined, this),
@@ -487909,6 +488257,7 @@ function ConfirmModal({
   onConfirm,
   onCancel
 }) {
+  const { width } = useTerminalDimensions();
   useKeyboard((key) => {
     if (!isActive)
       return;
@@ -487920,13 +488269,14 @@ function ConfirmModal({
   });
   if (!isActive)
     return null;
+  const modalWidth = Math.min(40, Math.max(25, Math.floor(width * 0.5)));
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
     left: 0,
     width: "100%",
     height: "100%",
-    backgroundColor: "#00000080",
+    backgroundColor: "#00000090",
     alignItems: "center",
     justifyContent: "center",
     children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
@@ -487937,6 +488287,7 @@ function ConfirmModal({
       paddingY: 1,
       flexDirection: "column",
       alignItems: "center",
+      width: modalWidth,
       children: [
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
           attributes: createTextAttributes({ bold: true }),
@@ -488050,6 +488401,7 @@ function ProgressBar({ completed, total }) {
 function ConnectingModal({ isActive, progress }) {
   if (!isActive)
     return null;
+  const { width, height } = useTerminalDimensions();
   const defaultProgress = progress ?? {
     total: 0,
     completed: 0,
@@ -488059,6 +488411,8 @@ function ConnectingModal({ isActive, progress }) {
   const { total, completed, currentServer, status, error: error55 } = defaultProgress;
   const isComplete = completed >= total && total > 0;
   const percentage = total > 0 ? Math.round(completed / total * 100) : 0;
+  const modalWidth = Math.min(60, Math.max(40, Math.floor(width * 0.7)));
+  const modalHeight = Math.min(height - 4, 12);
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
@@ -488075,8 +488429,8 @@ function ConnectingModal({ isActive, progress }) {
       paddingX: 3,
       paddingY: 2,
       flexDirection: "column",
-      minWidth: 50,
-      maxWidth: 60,
+      width: modalWidth,
+      height: modalHeight,
       children: [
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
           flexDirection: "row",
@@ -488175,7 +488529,7 @@ function ConnectingModal({ isActive, progress }) {
 }
 
 // src/tui/components/fork-modal.tsx
-var import_react42 = __toESM(require_react(), 1);
+var import_react43 = __toESM(require_react(), 1);
 function isMessageEntry(entry) {
   return typeof entry === "object" && entry !== null && "type" in entry && entry["type"] === "message" && "message" in entry && typeof entry["message"] === "object" && entry["message"] !== null;
 }
@@ -488278,13 +488632,15 @@ function ForkModal({
   onFork
 }) {
   const { width, height } = useTerminalDimensions();
-  const [selectedIndex, setSelectedIndex] = import_react42.useState(0);
-  const [scrollOffset, setScrollOffset] = import_react42.useState(0);
-  const [rows, setRows] = import_react42.useState([]);
-  const panelWidth = Math.min(80, Math.max(52, Math.floor(width * 0.8)));
-  const listHeight = Math.min(16, Math.floor(height * 0.5));
-  const contentWidth = Math.max(1, panelWidth - 4);
-  import_react42.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = import_react43.useState(0);
+  const [scrollOffset, setScrollOffset] = import_react43.useState(0);
+  const [rows, setRows] = import_react43.useState([]);
+  const layout = import_react43.useMemo(() => ({
+    panelWidth: Math.min(80, Math.max(52, Math.floor(width * 0.8))),
+    listHeight: Math.min(16, Math.max(3, Math.floor(height * 0.5))),
+    contentWidth: Math.max(1, Math.min(80, Math.max(52, Math.floor(width * 0.8))) - 4)
+  }), [width, height]);
+  import_react43.useEffect(() => {
     if (!isActive || !session) {
       setRows([]);
       return;
@@ -488299,22 +488655,22 @@ function ForkModal({
       setSelectedIndex(0);
     }
   }, [isActive, session]);
-  const selectableRows = import_react42.useMemo(() => rows.filter((r) => r.isUserMessage), [rows]);
-  const safeIndex = import_react42.useMemo(() => {
+  const selectableRows = import_react43.useMemo(() => rows.filter((r) => r.isUserMessage), [rows]);
+  const safeIndex = import_react43.useMemo(() => {
     if (selectableRows.length === 0)
       return -1;
     return Math.max(0, Math.min(selectedIndex, selectableRows.length - 1));
   }, [selectedIndex, selectableRows.length]);
   const selectedRow = safeIndex >= 0 ? selectableRows[safeIndex] : null;
-  import_react42.useEffect(() => {
+  import_react43.useEffect(() => {
     if (!selectedRow) {
       setScrollOffset(0);
       return;
     }
     const flatIndex = selectedRow.index;
-    const maxOffset = Math.max(0, rows.length - listHeight);
+    const maxOffset = Math.max(0, rows.length - layout.listHeight);
     setScrollOffset(Math.max(0, Math.min(flatIndex - 4, maxOffset)));
-  }, [selectedRow, listHeight, rows.length]);
+  }, [selectedRow, layout.listHeight, rows.length]);
   useKeyboard((key) => {
     if (!isActive)
       return;
@@ -488339,7 +488695,7 @@ function ForkModal({
   });
   if (!isActive)
     return null;
-  const visibleRows = rows.slice(scrollOffset, scrollOffset + listHeight);
+  const visibleRows = rows.slice(scrollOffset, scrollOffset + layout.listHeight);
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
@@ -488351,7 +488707,7 @@ function ForkModal({
     justifyContent: "center",
     children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
       alignSelf: "center",
-      width: panelWidth,
+      width: layout.panelWidth,
       flexDirection: "column",
       borderStyle: "rounded",
       borderColor: "#4a4a5a",
@@ -488371,7 +488727,7 @@ function ForkModal({
           children: "Select a user message to branch from:"
         }, undefined, false, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-          height: listHeight,
+          height: layout.listHeight,
           flexDirection: "column",
           overflow: "hidden",
           marginTop: 1,
@@ -488385,8 +488741,8 @@ function ForkModal({
             }, undefined, false, undefined, this),
             visibleRows.map((row) => {
               const isSelected = selectedRow?.index === row.index;
-              const prefix = getVisiblePrefix(row, contentWidth);
-              const availableWidth = Math.max(1, contentWidth - prefix.length);
+              const prefix = getVisiblePrefix(row, layout.contentWidth);
+              const availableWidth = Math.max(1, layout.contentWidth - prefix.length);
               const displayText = row.displayText.length > availableWidth ? row.displayText.slice(0, availableWidth - 1) + "\u2026" : row.displayText;
               const fgColor = row.isUserMessage ? isSelected ? "#ff79c6" : "#f8f8f2" : "#6c6c7c";
               return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
@@ -488433,7 +488789,7 @@ function ForkModal({
 }
 
 // src/tui/components/image-preview-modal.tsx
-var import_react44 = __toESM(require_react(), 1);
+var import_react45 = __toESM(require_react(), 1);
 function ImagePreviewContent({ rows }) {
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     flexDirection: "column",
@@ -488453,8 +488809,8 @@ function ImagePreviewModal({
   terminalWidth,
   terminalHeight
 }) {
-  const [rows, setRows] = import_react44.useState(null);
-  const [loading, setLoading] = import_react44.useState(false);
+  const [rows, setRows] = import_react45.useState(null);
+  const [loading, setLoading] = import_react45.useState(false);
   useKeyboard((key) => {
     if (!isActive)
       return;
@@ -488466,7 +488822,7 @@ function ImagePreviewModal({
   const modalH = Math.max(10, Math.floor(terminalHeight * 0.8));
   const imgMaxW = Math.max(10, modalW - 4);
   const imgMaxH = Math.max(4, modalH - 4);
-  import_react44.useEffect(() => {
+  import_react45.useEffect(() => {
     if (!isActive) {
       setRows(null);
       setLoading(false);
@@ -488562,35 +488918,394 @@ function ImagePreviewModal({
   }, undefined, false, undefined, this);
 }
 
+// src/tui/components/external-editor-modal.tsx
+var import_react47 = __toESM(require_react(), 1);
+function ExternalEditorModal({
+  isActive,
+  onClose,
+  currentPath,
+  onSave
+}) {
+  const { width, height } = useTerminalDimensions();
+  const inputRef = import_react47.useRef(null);
+  const [editorPath, setEditorPath] = import_react47.useState(currentPath ?? "");
+  const layout = import_react47.useMemo(() => ({
+    panelWidth: Math.min(60, Math.max(40, Math.floor(width * 0.7))),
+    maxSuggestions: Math.max(2, Math.floor(height * 0.25))
+  }), [width, height]);
+  import_react47.useEffect(() => {
+    if (isActive) {
+      setEditorPath(currentPath ?? "");
+      setTimeout(() => {
+        const ta = inputRef.current;
+        if (ta) {
+          ta.editBuffer.replaceText(currentPath ?? "");
+          ta.focus();
+        }
+      }, 10);
+    }
+  }, [isActive, currentPath]);
+  useKeyboard((key) => {
+    if (!isActive)
+      return;
+    if (key.name === "escape") {
+      key.preventDefault();
+      key.stopPropagation();
+      onClose();
+      return;
+    }
+    if (key.name === "return") {
+      key.preventDefault();
+      key.stopPropagation();
+      const path7 = editorPath.trim();
+      if (path7) {
+        onSave(path7);
+      }
+      return;
+    }
+  });
+  const handleContentChange = () => {
+    const text = inputRef.current?.editBuffer.getText() ?? "";
+    setEditorPath(text);
+  };
+  if (!isActive)
+    return null;
+  const suggestedEditors = [
+    { cmd: "code --wait", desc: "VS Code" },
+    { cmd: "vim", desc: "Vim" },
+    { cmd: "nano", desc: "Nano" },
+    { cmd: "emacs", desc: "Emacs" },
+    { cmd: "subl -w", desc: "Sublime Text" },
+    { cmd: "hx", desc: "Helix" }
+  ];
+  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#00000080",
+    alignItems: "center",
+    justifyContent: "center",
+    children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+      width: layout.panelWidth,
+      flexDirection: "column",
+      borderStyle: "rounded",
+      borderColor: "#4a4a5a",
+      backgroundColor: "#1a1a2e",
+      paddingX: 2,
+      paddingY: 1,
+      children: [
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          attributes: createTextAttributes({ bold: true }),
+          fg: "#ff79c6",
+          children: "External Editor Configuration"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#6c6c7c",
+            children: "Enter the command to launch your preferred editor."
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#6c6c7c",
+            children: "The editor should wait for the file to be closed before returning."
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#f8f8f2",
+            children: "Editor command:"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          height: 1,
+          marginTop: 1,
+          backgroundColor: "#16213e",
+          paddingX: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("textarea", {
+            ref: inputRef,
+            initialValue: "",
+            focused: isActive,
+            showCursor: true,
+            height: 1,
+            wrapMode: "none",
+            textColor: "#f8f8f2",
+            backgroundColor: "#16213e",
+            onContentChange: handleContentChange
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#6c6c7c",
+            attributes: createTextAttributes({ dim: true }),
+            children: "Suggestions:"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("scrollbox", {
+          height: layout.maxSuggestions,
+          flexDirection: "column",
+          overflow: "hidden",
+          children: suggestedEditors.slice(0, layout.maxSuggestions).map((editor) => /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+            height: 1,
+            flexDirection: "row",
+            children: [
+              /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                fg: "#50fa7b",
+                children: editor.cmd
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+                fg: "#6c6c7c",
+                marginLeft: 2,
+                children: editor.desc
+              }, undefined, false, undefined, this)
+            ]
+          }, editor.cmd, true, undefined, this))
+        }, undefined, false, undefined, this),
+        currentPath && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#f1fa8c",
+            children: [
+              "Current: ",
+              currentPath
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 2,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#6c6c7c",
+            attributes: createTextAttributes({ dim: true }),
+            children: "Enter Confirm  Esc Cancel"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        currentPath && /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 1,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#ff5555",
+            onMouseUp: (e) => {
+              e.stopPropagation();
+              onSave("");
+            },
+            children: "Click here to clear the editor setting"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/tui/components/alert-modal.tsx
+var import_react49 = __toESM(require_react(), 1);
+function Button3({
+  label,
+  bgColor,
+  hoverBgColor,
+  isActive,
+  onClick
+}) {
+  const [hover, setHover] = import_react49.useState(false);
+  const currentBg = hover ? hoverBgColor : bgColor;
+  const handleMouseUp = (e) => {
+    if (isActive) {
+      e.stopPropagation();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+    paddingX: 2,
+    paddingY: 0,
+    backgroundColor: currentBg,
+    onMouseUp: handleMouseUp,
+    onMouseOver: () => isActive && setHover(true),
+    onMouseOut: () => isActive && setHover(false),
+    children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+      fg: "white",
+      attributes: createTextAttributes({ bold: true }),
+      children: label
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function AlertModal({
+  isActive,
+  title,
+  message,
+  onClose
+}) {
+  const { width } = useTerminalDimensions();
+  useKeyboard((key) => {
+    if (!isActive)
+      return;
+    if (key.name === "return" || key.name === "escape" || key.name === "o") {
+      onClose();
+    }
+  });
+  if (!isActive)
+    return null;
+  const messageLines = message.split(`
+`);
+  const maxLineLength = Math.max(...messageLines.map((l) => l.length));
+  const modalWidth = Math.min(70, Math.max(40, Math.min(maxLineLength + 10, Math.floor(width * 0.7))));
+  return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#00000090",
+    alignItems: "center",
+    justifyContent: "center",
+    children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+      borderStyle: "rounded",
+      borderColor: "#4a4a5a",
+      backgroundColor: "#1a1a2e",
+      paddingX: 2,
+      paddingY: 1,
+      flexDirection: "column",
+      alignItems: "center",
+      width: modalWidth,
+      children: [
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          attributes: createTextAttributes({ bold: true }),
+          fg: "#fb7185",
+          children: title
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 1,
+          flexDirection: "column",
+          children: messageLines.map((line, i) => /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+            fg: "#f8f8f2",
+            wrapMode: "none",
+            children: line
+          }, i, false, undefined, this))
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
+          marginTop: 2,
+          children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(Button3, {
+            label: " OK ",
+            bgColor: "#2dd4bf",
+            hoverBgColor: "#5eead4",
+            isActive,
+            onClick: onClose
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
+          marginTop: 1,
+          fg: "#6c6c7c",
+          attributes: createTextAttributes({ dim: true }),
+          children: "Enter/O/ESC to close"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/tui/components/external-editor.ts
+import { spawn as spawn15 } from "child_process";
+import fs22 from "fs";
+import path27 from "path";
+import os18 from "os";
+function openExternalEditor(renderer, editorPath, initialContent, onComplete) {
+  const tmpDir = os18.tmpdir();
+  const tmpFile = path27.join(tmpDir, `koi-prompt-${Date.now()}.txt`);
+  let rendererResumed = false;
+  const resumeRenderer = () => {
+    if (!rendererResumed) {
+      rendererResumed = true;
+      try {
+        renderer.resume();
+      } catch {}
+    }
+  };
+  const cleanupTempFile = () => {
+    try {
+      fs22.unlinkSync(tmpFile);
+    } catch {}
+  };
+  const complete2 = (result, error55) => {
+    resumeRenderer();
+    cleanupTempFile();
+    onComplete(result, error55);
+  };
+  try {
+    fs22.writeFileSync(tmpFile, initialContent, "utf-8");
+    renderer.suspend();
+    const parts = editorPath.trim().split(/\s+/);
+    const cmd = parts[0];
+    const args = parts.slice(1);
+    const child = spawn15(cmd, [...args, tmpFile], {
+      stdio: "inherit",
+      env: { ...process.env }
+    });
+    const timeout = setTimeout(() => {
+      try {
+        child.kill("SIGTERM");
+      } catch {}
+    }, 120000);
+    child.on("close", (code2) => {
+      clearTimeout(timeout);
+      if (code2 === 0) {
+        try {
+          const result = fs22.readFileSync(tmpFile, "utf-8");
+          complete2(result);
+        } catch {
+          complete2(null, { message: "Failed to read edited file" });
+        }
+      } else {
+        complete2(null, {
+          code: code2 ?? undefined,
+          message: `Editor exited with code ${code2}`
+        });
+      }
+    });
+    child.on("error", (err) => {
+      clearTimeout(timeout);
+      complete2(null, {
+        message: `Failed to launch editor: ${err.message}. Make sure "${cmd}" is installed and in your PATH.`
+      });
+    });
+  } catch (err) {
+    complete2(null, {
+      message: `Failed to start external editor: ${err instanceof Error ? err.message : String(err)}`
+    });
+  }
+}
+
 // src/tui/components/mcp/MCPSettings.tsx
-var import_react46 = __toESM(require_react(), 1);
+var import_react51 = __toESM(require_react(), 1);
 init_config2();
 init_connection_manager();
 function MCPSettings({ isActive, onClose, onMcpChange }) {
   const { width } = useTerminalDimensions();
-  const [view, setView] = import_react46.useState("list");
-  const [selectedIndex, setSelectedIndex] = import_react46.useState(0);
-  const [servers, setServers] = import_react46.useState([]);
-  const [message, setMessage] = import_react46.useState(null);
-  const [editName, setEditName] = import_react46.useState("");
-  const [editType, setEditType] = import_react46.useState("stdio");
-  const [editCommand, setEditCommand] = import_react46.useState("");
-  const [editArgs, setEditArgs] = import_react46.useState("");
-  const [editUrl, setEditUrl] = import_react46.useState("");
-  const [editHeaders, setEditHeaders] = import_react46.useState("");
-  const nameRef = import_react46.useRef(null);
-  const commandRef = import_react46.useRef(null);
-  const argsRef = import_react46.useRef(null);
-  const urlRef = import_react46.useRef(null);
-  const headersRef = import_react46.useRef(null);
+  const [view, setView] = import_react51.useState("list");
+  const [selectedIndex, setSelectedIndex] = import_react51.useState(0);
+  const [servers, setServers] = import_react51.useState([]);
+  const [message, setMessage] = import_react51.useState(null);
+  const [editName, setEditName] = import_react51.useState("");
+  const [editType, setEditType] = import_react51.useState("stdio");
+  const [editCommand, setEditCommand] = import_react51.useState("");
+  const [editArgs, setEditArgs] = import_react51.useState("");
+  const [editUrl, setEditUrl] = import_react51.useState("");
+  const [editHeaders, setEditHeaders] = import_react51.useState("");
+  const nameRef = import_react51.useRef(null);
+  const commandRef = import_react51.useRef(null);
+  const argsRef = import_react51.useRef(null);
+  const urlRef = import_react51.useRef(null);
+  const headersRef = import_react51.useRef(null);
   const panelWidth = Math.min(75, Math.max(50, Math.floor(width * 0.8)));
-  const refreshServers = import_react46.useCallback(() => {
+  const refreshServers = import_react51.useCallback(() => {
     loadMcpConfigs();
     const configs = getAllMcpConfigs();
     setServers(Array.from(configs.keys()));
     setSelectedIndex(0);
   }, []);
-  import_react46.useEffect(() => {
+  import_react51.useEffect(() => {
     if (isActive) {
       refreshServers();
       setView("list");
@@ -489144,13 +489859,13 @@ function CustomPromptContent({
   width,
   height
 }) {
-  const taRef = import_react48.useRef(null);
+  const taRef = import_react53.useRef(null);
   const handleSubmit = () => {
     resolve4(taRef.current?.editBuffer.getText() ?? "");
   };
   const contentWidth = Math.min(70, Math.max(20, width - 8));
   const questionLines = wrapText(question, contentWidth - 4, 0);
-  const keyBindings = import_react48.useMemo(() => [{ name: "return", action: "submit" }], []);
+  const keyBindings = import_react53.useMemo(() => [{ name: "return", action: "submit" }], []);
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     flexDirection: "column",
     alignSelf: "center",
@@ -489222,41 +489937,45 @@ function CustomPromptContent({
     ]
   }, undefined, true, undefined, this);
 }
-function App({ onExit }) {
+function App({ renderer, onExit }) {
   const { width, height } = useTerminalDimensions();
-  const [showExitModal, setShowExitModal] = import_react48.useState(false);
-  const [showCommandPanel, setShowCommandPanel] = import_react48.useState(false);
-  const [showRenameModal, setShowRenameModal] = import_react48.useState(false);
-  const [showConnectModal, setShowConnectModal] = import_react48.useState(false);
-  const [showModelModal, setShowModelModal] = import_react48.useState(false);
-  const [showSessionModal, setShowSessionModal] = import_react48.useState(false);
-  const [showForkModal, setShowForkModal] = import_react48.useState(false);
-  const [showDeleteConfirm, setShowDeleteConfirm] = import_react48.useState(false);
-  const [sessionToDelete, setSessionToDelete] = import_react48.useState(null);
-  const [showImageModal, setShowImageModal] = import_react48.useState(false);
-  const [imageModalUrl, setImageModalUrl] = import_react48.useState("");
-  const [showEditPendingModal, setShowEditPendingModal] = import_react48.useState(false);
-  const [editPendingType, setEditPendingType] = import_react48.useState(null);
-  const [editPendingIndex, setEditPendingIndex] = import_react48.useState(-1);
-  const [editPendingText, setEditPendingText] = import_react48.useState("");
-  const [currentModel2, setCurrentModelState] = import_react48.useState(getCurrentModel);
-  const [, setAuxiliaryModelState] = import_react48.useState(getAuxiliaryModel);
-  const [sidebarContextUsage, setSidebarContextUsage] = import_react48.useState("0%");
-  const [sidebarTokenCount, setSidebarTokenCount] = import_react48.useState("(0)");
-  const [sidebarCost, setSidebarCost] = import_react48.useState("$0.00");
-  const [tasks, setTasks] = import_react48.useState([]);
-  const [subagents, setSubagents] = import_react48.useState([]);
-  const [monitors, setMonitors] = import_react48.useState([]);
-  const [yoloMode2, setYoloMode2] = import_react48.useState(false);
-  const [agentMode, setAgentMode2] = import_react48.useState(getAgentMode());
-  const [showMCPSettings, setShowMCPSettings] = import_react48.useState(false);
-  const [showSkillsModal, setShowSkillsModal] = import_react48.useState(false);
-  const [skills, setSkills] = import_react48.useState([]);
-  import_react48.useEffect(() => {
+  const [showExitModal, setShowExitModal] = import_react53.useState(false);
+  const [showCommandPanel, setShowCommandPanel] = import_react53.useState(false);
+  const [showRenameModal, setShowRenameModal] = import_react53.useState(false);
+  const [showConnectModal, setShowConnectModal] = import_react53.useState(false);
+  const [showModelModal, setShowModelModal] = import_react53.useState(false);
+  const [showSessionModal, setShowSessionModal] = import_react53.useState(false);
+  const [showForkModal, setShowForkModal] = import_react53.useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = import_react53.useState(false);
+  const [sessionToDelete, setSessionToDelete] = import_react53.useState(null);
+  const [showImageModal, setShowImageModal] = import_react53.useState(false);
+  const [imageModalUrl, setImageModalUrl] = import_react53.useState("");
+  const [showEditPendingModal, setShowEditPendingModal] = import_react53.useState(false);
+  const [editPendingType, setEditPendingType] = import_react53.useState(null);
+  const [editPendingIndex, setEditPendingIndex] = import_react53.useState(-1);
+  const [editPendingText, setEditPendingText] = import_react53.useState("");
+  const [currentModel2, setCurrentModelState] = import_react53.useState(getCurrentModel);
+  const [, setAuxiliaryModelState] = import_react53.useState(getAuxiliaryModel);
+  const [sidebarContextUsage, setSidebarContextUsage] = import_react53.useState("0%");
+  const [sidebarTokenCount, setSidebarTokenCount] = import_react53.useState("(0)");
+  const [sidebarCost, setSidebarCost] = import_react53.useState("$0.00");
+  const [tasks, setTasks] = import_react53.useState([]);
+  const [subagents, setSubagents] = import_react53.useState([]);
+  const [monitors, setMonitors] = import_react53.useState([]);
+  const [yoloMode2, setYoloMode2] = import_react53.useState(false);
+  const [agentMode, setAgentMode2] = import_react53.useState(getAgentMode());
+  const [showMCPSettings, setShowMCPSettings] = import_react53.useState(false);
+  const [showSkillsModal, setShowSkillsModal] = import_react53.useState(false);
+  const [skills, setSkills] = import_react53.useState([]);
+  const [showExternalEditorModal, setShowExternalEditorModal] = import_react53.useState(false);
+  const [externalEditorBusy, setExternalEditorBusy] = import_react53.useState(false);
+  const [externalEditorResult, setExternalEditorResult] = import_react53.useState(undefined);
+  const [externalEditorError, setExternalEditorError] = import_react53.useState(null);
+  import_react53.useEffect(() => {
     setYoloMode(yoloMode2);
   }, [yoloMode2]);
   const dialog = useDialog();
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     (async () => {
       initBundledSkills();
       await loadAllSkills(process.cwd());
@@ -489296,7 +490015,7 @@ function App({ onExit }) {
     addPlanMessage,
     syncAgentMode
   } = useKoiAgent();
-  const handleInvokeSkill = import_react48.useCallback(async (skill, args) => {
+  const handleInvokeSkill = import_react53.useCallback(async (skill, args) => {
     const content = await invokeSkill(skill, args, session);
     const skillPrompt = extractTextFromContent(content);
     if (skillPrompt) {
@@ -489304,34 +490023,34 @@ function App({ onExit }) {
     }
     setShowSkillsModal(false);
   }, [session, prompt]);
-  const applyAgentMode = import_react48.useCallback((mode) => {
+  const applyAgentMode = import_react53.useCallback((mode) => {
     setAgentMode(mode);
     setAgentMode2(mode);
     syncAgentMode(mode);
   }, [syncAgentMode]);
-  const handleModeSwitch = import_react48.useCallback(() => {
+  const handleModeSwitch = import_react53.useCallback(() => {
     const next2 = cycleAgentMode();
     applyAgentMode(next2);
   }, [applyAgentMode]);
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     return subscribeModeChanges(() => {
       const mode = getAgentMode();
       setAgentMode2(mode);
     });
   }, []);
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     if (!session)
       return;
     session.setActiveToolsByName(getActiveToolNamesForMode(agentMode));
     injectModeIntoSystemPrompt(session, agentMode);
   }, [agentMode, session]);
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     const unsubscribe = subagentRegistry.subscribe(() => {
       setSubagents(subagentRegistry.getAll());
     });
     return unsubscribe;
   }, []);
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     const unsubscribe = monitorRegistry.subscribe(() => {
       if (currentSessionId) {
         setMonitors(monitorRegistry.getBySession(currentSessionId));
@@ -489342,7 +490061,7 @@ function App({ onExit }) {
     }
     return unsubscribe;
   }, [currentSessionId]);
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     const update2 = () => {
       if (!session) {
         setSidebarContextUsage("0%");
@@ -489378,13 +490097,13 @@ function App({ onExit }) {
     const interval = setInterval(update2, 2000);
     return () => clearInterval(interval);
   }, [session, currentSessionId]);
-  const processingPermissionRef = import_react48.useRef(false);
-  const permissionResolveRef = import_react48.useRef(null);
-  const [permissionModalOpen, setPermissionModalOpen] = import_react48.useState(false);
-  const planApprovalResolveRef = import_react48.useRef(null);
-  const questionResolveRef = import_react48.useRef(null);
-  const questionOptionsRef = import_react48.useRef([]);
-  const processPermissionQueue = import_react48.useCallback(async () => {
+  const processingPermissionRef = import_react53.useRef(false);
+  const permissionResolveRef = import_react53.useRef(null);
+  const [permissionModalOpen, setPermissionModalOpen] = import_react53.useState(false);
+  const planApprovalResolveRef = import_react53.useRef(null);
+  const questionResolveRef = import_react53.useRef(null);
+  const questionOptionsRef = import_react53.useRef([]);
+  const processPermissionQueue = import_react53.useCallback(async () => {
     if (processingPermissionRef.current)
       return;
     const queue4 = getPermissionQueue();
@@ -489504,14 +490223,14 @@ function App({ onExit }) {
       processPermissionQueue();
     }, 0);
   }, [dialog, width, height]);
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     const unsubscribe = subscribePermissions(() => {
       processPermissionQueue();
     });
     return unsubscribe;
   }, [processPermissionQueue]);
-  const processingQuestionRef = import_react48.useRef(false);
-  import_react48.useEffect(() => {
+  const processingQuestionRef = import_react53.useRef(false);
+  import_react53.useEffect(() => {
     const unsubscribe = subscribeQuestions(async () => {
       if (processingQuestionRef.current)
         return;
@@ -489624,8 +490343,8 @@ function App({ onExit }) {
     });
     return unsubscribe;
   }, [dialog, width, height]);
-  const processingPlanApprovalRef = import_react48.useRef(false);
-  import_react48.useEffect(() => {
+  const processingPlanApprovalRef = import_react53.useRef(false);
+  import_react53.useEffect(() => {
     const unsubscribe = subscribePlanApprovals(async () => {
       if (processingPlanApprovalRef.current)
         return;
@@ -489773,11 +490492,11 @@ function App({ onExit }) {
   const pendingCount = steeringMessages.length + followUpMessages.length;
   const pendingHeight = pendingCount > 0 ? Math.min(pendingCount, 3) + (pendingCount > 3 ? 1 : 0) : 0;
   const chatPanelHeight = Math.max(1, height - (error55 ? 1 : 0) - 5 - 1 - pendingHeight);
-  const chatPanelRef = import_react48.useRef(null);
-  const inputBoxRef = import_react48.useRef(null);
-  const visibleMessages = import_react48.useMemo(() => messages.filter((m2) => !(m2.type === "user" && isInternalNotification(m2.content))), [messages]);
-  const anyModalOpen = showExitModal || showCommandPanel || showRenameModal || showConnectModal || showModelModal || showSessionModal || showForkModal || permissionModalOpen || showDeleteConfirm || showImageModal || showEditPendingModal || showMCPSettings || showSkillsModal;
-  const handleSubmit = import_react48.useCallback((text) => {
+  const chatPanelRef = import_react53.useRef(null);
+  const inputBoxRef = import_react53.useRef(null);
+  const visibleMessages = import_react53.useMemo(() => messages.filter((m2) => !(m2.type === "user" && isInternalNotification(m2.content))), [messages]);
+  const anyModalOpen = showExitModal || showCommandPanel || showRenameModal || showConnectModal || showModelModal || showSessionModal || showForkModal || permissionModalOpen || showDeleteConfirm || showImageModal || showEditPendingModal || showMCPSettings || showSkillsModal || showExternalEditorModal || externalEditorBusy || externalEditorError !== null;
+  const handleSubmit = import_react53.useCallback((text) => {
     if (!text.trim() || !isReady)
       return;
     if (text.trim() === "/plan") {
@@ -489785,7 +490504,8 @@ function App({ onExit }) {
       return;
     }
     if (text.trim() === "/exit" || text.trim() === "/quit") {
-      setShowExitModal(true);
+      saveCurrentState();
+      onExit();
       return;
     }
     const skillInvocation = detectSkillInvocation(text);
@@ -489805,7 +490525,7 @@ function App({ onExit }) {
       prompt(text);
     }
   }, [isReady, isStreaming, steer, prompt, applyAgentMode, session]);
-  const handleQueueSubmit = import_react48.useCallback((text) => {
+  const handleQueueSubmit = import_react53.useCallback((text) => {
     if (!text.trim() || !isReady)
       return;
     if (isStreaming) {
@@ -489814,51 +490534,51 @@ function App({ onExit }) {
       prompt(text);
     }
   }, [isReady, isStreaming, followUp, prompt]);
-  const handleRename = import_react48.useCallback((newTitle) => {
+  const handleRename = import_react53.useCallback((newTitle) => {
     setSessionTitle2(newTitle);
     setShowRenameModal(false);
   }, [setSessionTitle2]);
-  const modelInfo = import_react48.useMemo(() => {
+  const modelInfo = import_react53.useMemo(() => {
     if (!currentModel2) {
       return { modelName: "Not configured", provider: "Use /model to select" };
     }
     return { modelName: currentModel2.modelId, provider: `via ${currentModel2.provider}` };
   }, [currentModel2]);
-  const handleNewSession = import_react48.useCallback(async () => {
+  const handleNewSession = import_react53.useCallback(async () => {
     await newSession();
     setShowSessionModal(false);
   }, [newSession]);
-  const handleSwitchSession = import_react48.useCallback(async (filePath) => {
+  const handleSwitchSession = import_react53.useCallback(async (filePath) => {
     await switchSession(filePath);
     setShowSessionModal(false);
   }, [switchSession]);
-  const handleFork = import_react48.useCallback(async (entryId) => {
+  const handleFork = import_react53.useCallback(async (entryId) => {
     await forkSession(entryId);
     setShowForkModal(false);
   }, [forkSession]);
-  const handleDeleteRequest = import_react48.useCallback((sessionId) => {
+  const handleDeleteRequest = import_react53.useCallback((sessionId) => {
     const meta4 = sessionList.find((s) => s.id === sessionId);
     if (!meta4)
       return;
     setSessionToDelete(meta4);
     setShowDeleteConfirm(true);
   }, [sessionList]);
-  const handleConfirmDelete = import_react48.useCallback(async () => {
+  const handleConfirmDelete = import_react53.useCallback(async () => {
     if (!sessionToDelete)
       return;
     await deleteSession2(sessionToDelete.id);
     setShowDeleteConfirm(false);
     setSessionToDelete(null);
   }, [sessionToDelete, deleteSession2]);
-  const handleCancelDelete = import_react48.useCallback(() => {
+  const handleCancelDelete = import_react53.useCallback(() => {
     setShowDeleteConfirm(false);
     setSessionToDelete(null);
   }, []);
-  const handleImageClick = import_react48.useCallback((url4) => {
+  const handleImageClick = import_react53.useCallback((url4) => {
     setImageModalUrl(url4);
     setShowImageModal(true);
   }, []);
-  const handleEditPending = import_react48.useCallback((type3, index2) => {
+  const handleEditPending = import_react53.useCallback((type3, index2) => {
     const text = type3 === "sheer" ? steeringMessages[index2] : followUpMessages[index2];
     if (text === undefined)
       return;
@@ -489867,7 +490587,7 @@ function App({ onExit }) {
     setEditPendingText(text);
     setShowEditPendingModal(true);
   }, [steeringMessages, followUpMessages]);
-  const handleConfirmEditPending = import_react48.useCallback((text) => {
+  const handleConfirmEditPending = import_react53.useCallback((text) => {
     if (!editPendingType || editPendingIndex < 0)
       return;
     removePendingMessage(editPendingType, editPendingIndex);
@@ -489878,11 +490598,11 @@ function App({ onExit }) {
     }
     setShowEditPendingModal(false);
   }, [editPendingType, editPendingIndex, removePendingMessage, steer, followUp]);
-  const handleCloseImageModal = import_react48.useCallback(() => {
+  const handleCloseImageModal = import_react53.useCallback(() => {
     setShowImageModal(false);
     setImageModalUrl("");
   }, []);
-  const skillCommands = import_react48.useMemo(() => {
+  const skillCommands = import_react53.useMemo(() => {
     return skills.filter((skill) => skill.userInvocable && !skill.isHidden).map((skill) => ({
       id: `/${skill.name}`,
       label: skill.description || skill.name,
@@ -489896,28 +490616,35 @@ function App({ onExit }) {
       }
     }));
   }, [skills, session, prompt]);
-  const commands = import_react48.useMemo(() => [
-    { id: "/new", label: "Start a new session", section: "Session", action: () => void handleNewSession() },
-    { id: "/fork", label: "Fork current session", section: "Session", action: () => setShowForkModal(true) },
+  const commands = import_react53.useMemo(() => [
+    { id: "/new", label: "Start a new session", section: "Session", action: () => void handleNewSession(), disabled: isStreaming },
+    { id: "/fork", label: "Fork current session", section: "Session", action: () => setShowForkModal(true), disabled: isStreaming },
     { id: "/sessions", label: "Browse sessions", section: "Session", action: async () => {
       await refreshSessionList();
       setShowSessionModal(true);
-    } },
+    }, disabled: isStreaming },
     { id: "/compact", label: "Compact current session", section: "Session", action: () => {
       session?.compact().catch(() => {});
-    } },
+    }, disabled: isStreaming },
     { id: "/rename", label: "Rename session", section: "Session", action: () => setShowRenameModal(true) },
-    { id: "/exit", label: "Exit Koi", section: "Session", action: () => setShowExitModal(true) },
-    { id: "/quit", label: "Exit Koi (alias)", section: "Session", action: () => setShowExitModal(true) },
+    { id: "/exit", label: "Exit Koi", section: "Session", action: () => {
+      saveCurrentState();
+      onExit();
+    } },
+    { id: "/quit", label: "Exit Koi (alias)", section: "Session", action: () => {
+      saveCurrentState();
+      onExit();
+    } },
     { id: "/yolo", label: "Toggle YOLO mode (auto-approve all permissions)", section: "Mode", action: () => setYoloMode2((prev) => !prev) },
     { id: "/mode", label: `Cycle agent mode (${agentMode})`, section: "Mode", action: () => handleModeSwitch() },
-    { id: "/plan", label: "Switch to plan mode (read-only, no file modifications)", section: "Mode", action: () => applyAgentMode("plan") },
+    { id: "/plan", label: "Switch to plan mode (read-only, no file modifications)", section: "Mode", action: () => applyAgentMode("plan"), disabled: isStreaming },
     { id: "/connect", label: "Connect to a provider", section: "Model", action: () => setShowConnectModal(true) },
-    { id: "/model", label: "Select a model", section: "Model", action: () => setShowModelModal(true) },
+    { id: "/model", label: "Select a model", section: "Model", action: () => setShowModelModal(true), disabled: isStreaming },
     { id: "/mcp", label: "Open MCP settings", section: "Extensions", action: () => setShowMCPSettings(true) },
     { id: "/skills", label: "List and manage skills", section: "Extensions", action: () => setShowSkillsModal(true) },
+    { id: "/editor", label: "Set external editor for prompts", section: "Settings", action: () => setShowExternalEditorModal(true) },
     ...skillCommands
-  ], [session, handleNewSession, refreshSessionList, agentMode, handleModeSwitch, applyAgentMode, skillCommands]);
+  ], [isStreaming, session, handleNewSession, refreshSessionList, agentMode, handleModeSwitch, applyAgentMode, skillCommands]);
   useKeyboard((key) => {
     if (anyModalOpen && !permissionModalOpen)
       return;
@@ -489968,18 +490695,24 @@ function App({ onExit }) {
       return;
     }
     if (key.ctrl && key.name === "s") {
-      (async () => {
-        await refreshSessionList();
-        setShowSessionModal(true);
-      })();
+      if (!isStreaming) {
+        (async () => {
+          await refreshSessionList();
+          setShowSessionModal(true);
+        })();
+      }
       return;
     }
     if (key.ctrl && key.name === "f") {
-      setShowForkModal(true);
+      if (!isStreaming) {
+        setShowForkModal(true);
+      }
       return;
     }
     if (key.name === "tab" && key.shift) {
-      handleModeSwitch();
+      if (!isStreaming) {
+        handleModeSwitch();
+      }
       return;
     }
     if (key.ctrl && key.name === "o") {
@@ -489991,6 +490724,26 @@ function App({ onExit }) {
       }
       return;
     }
+    if (key.ctrl && key.name === "g") {
+      if (!isStreaming && !externalEditorBusy) {
+        const editorPath = getExternalEditor();
+        if (editorPath) {
+          const inputText = inputBoxRef.current?.getText?.() ?? "";
+          openExternalEditor(renderer, editorPath, inputText, (result, error56) => {
+            if (result !== null && result.trim()) {
+              setExternalEditorResult(result);
+            } else if (error56) {
+              setExternalEditorError(error56.message);
+            }
+            setExternalEditorBusy(false);
+          });
+          setExternalEditorBusy(true);
+        } else {
+          setShowExternalEditorModal(true);
+        }
+      }
+      return;
+    }
     if (key.name === "pageup") {
       chatPanelRef.current?.scrollUp?.();
       return;
@@ -490000,10 +490753,10 @@ function App({ onExit }) {
       return;
     }
   });
-  const handleSlashEmpty = import_react48.useCallback(() => {
+  const handleSlashEmpty = import_react53.useCallback(() => {
     setShowCommandPanel(true);
   }, []);
-  const handleSelectPrimary = import_react48.useCallback((model) => {
+  const handleSelectPrimary = import_react53.useCallback((model) => {
     setCurrentModelState(model);
     setCurrentModel(model);
     setShowModelModal(false);
@@ -490013,7 +490766,7 @@ function App({ onExit }) {
         session.setModel(piModel).catch(() => {});
     }
   }, [session]);
-  const handleSelectAuxiliary = import_react48.useCallback((model) => {
+  const handleSelectAuxiliary = import_react53.useCallback((model) => {
     setAuxiliaryModelState(model);
     setAuxiliaryModel(model);
     setShowModelModal(false);
@@ -490064,11 +490817,14 @@ function App({ onExit }) {
                 onQueueSubmit: handleQueueSubmit,
                 onSlashEmpty: handleSlashEmpty,
                 focused: !anyModalOpen,
-                disabled: !isReady,
+                disabled: !isReady || externalEditorBusy,
+                disabledHint: externalEditorBusy ? "External editor in use..." : undefined,
                 width: leftWidth,
                 mode: agentMode,
                 isBusy: isStreaming,
-                onModeSwitch: handleModeSwitch
+                onModeSwitch: handleModeSwitch,
+                externalEditorResult,
+                onExternalEditorResultUsed: () => setExternalEditorResult(undefined)
               }, undefined, false, undefined, this),
               /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(InfoBar, {
                 width: leftWidth,
@@ -490094,6 +490850,7 @@ function App({ onExit }) {
               }, undefined, false, undefined, this),
               /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(SideBar, {
                 width: SIDEBAR_WIDTH,
+                height,
                 workingDir: process.cwd(),
                 sessionTitle: sessionTitle2,
                 modelName: modelInfo.modelName,
@@ -490194,6 +490951,21 @@ function App({ onExit }) {
         onClose: () => setShowSkillsModal(false),
         skills,
         onInvokeSkill: handleInvokeSkill
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(ExternalEditorModal, {
+        isActive: showExternalEditorModal,
+        onClose: () => setShowExternalEditorModal(false),
+        currentPath: getExternalEditor(),
+        onSave: (path7) => {
+          setExternalEditor(path7 || null);
+          setShowExternalEditorModal(false);
+        }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(AlertModal, {
+        isActive: externalEditorError !== null,
+        title: "External Editor Error",
+        message: externalEditorError ?? "",
+        onClose: () => setExternalEditorError(null)
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
@@ -490205,6 +490977,7 @@ async function main3() {
   const renderer = await createCliRenderer({ exitOnCtrlC: false });
   createRoot(renderer).render(/* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(DialogProvider, {
     children: /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV(App, {
+      renderer,
       onExit: () => {
         renderer.destroy();
         process.exit(0);