@meowlynxsea/koi 0.1.6 → 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)
@@ -415691,7 +415708,11 @@ var InputBox = import_react20.forwardRef(function InputBox2({
           /* @__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,
@@ -473819,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;
@@ -473879,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 + `
@@ -473907,6 +473930,9 @@ function loadSettings() {
     if (data.auxiliaryModel) {
       auxiliaryModel = data.auxiliaryModel;
     }
+    if (data.externalEditor) {
+      externalEditor = data.externalEditor;
+    }
     syncCredentialsToPi();
   } catch {}
 }
@@ -473960,6 +473986,13 @@ function setAuxiliaryModel(ref6) {
   auxiliaryModel = ref6;
   saveSettings();
 }
+function getExternalEditor() {
+  return externalEditor;
+}
+function setExternalEditor(path7) {
+  externalEditor = path7;
+  saveSettings();
+}
 function getAllProviders() {
   return getProviders();
 }
@@ -474931,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: {
@@ -474944,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;
@@ -475023,7 +475055,7 @@ class PtySession extends EventEmitter13 {
   resize(cols, rows) {
     try {
       this.pty.resize(cols, rows);
-    } catch (e) {}
+    } catch {}
   }
   get isRunning() {
     return this._isRunning;
@@ -475289,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",
@@ -475299,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;
@@ -482649,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++;
@@ -483604,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) {
@@ -483691,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;
@@ -483736,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;
@@ -483748,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",
@@ -483780,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",
@@ -483805,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", {
@@ -483824,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
@@ -483832,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: [
@@ -483867,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: [
@@ -483886,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", {
@@ -486159,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) {
@@ -486177,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()) {
@@ -486200,7 +486213,7 @@ function EditPendingModal({
       backgroundColor: "#1a1a2e",
       paddingX: 2,
       paddingY: 1,
-      width,
+      width: modalWidth,
       children: [
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("text", {
           alignSelf: "center",
@@ -486215,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", {
@@ -486442,6 +486455,7 @@ function Divider({
 }
 function SideBar({
   width = 28,
+  height = 50,
   workingDir = "/",
   sessionTitle: sessionTitle2 = "New Session",
   modelName = "Not configured",
@@ -486460,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: " "
@@ -486557,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,
@@ -486575,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
@@ -486744,6 +486764,7 @@ function Button({
   }, undefined, false, undefined, this);
 }
 function ExitModal({ isActive, onConfirm, onCancel }) {
+  const { width } = useTerminalDimensions();
   useKeyboard((key) => {
     if (!isActive)
       return;
@@ -486755,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,
@@ -486772,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 }),
@@ -487026,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(() => {
@@ -487060,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,
@@ -487070,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",
@@ -487153,7 +487178,9 @@ function ConnectModal({ isActive, onClose }) {
   const [filterText, setFilterText] = import_react33.useState("");
   const inputRef = import_react33.useRef(null);
   const searchRef = import_react33.useRef(null);
-  const listHeight = Math.min(10, Math.floor(height * 0.35));
+  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)
@@ -487244,10 +487271,10 @@ 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, listHeight, scrollOffset]);
+  }, [selectedProviderIndex, layout.listHeight, scrollOffset]);
   import_react33.useEffect(() => {
     if (selectedProviderIndex >= filteredProviders.length && filteredProviders.length > 0) {
       setSelectedProviderIndex(filteredProviders.length - 1);
@@ -487343,7 +487370,7 @@ function ConnectModal({ isActive, onClose }) {
   const existingConfig = selectedProvider ? getProviderConfig(selectedProvider) : undefined;
   if (!isActive)
     return null;
-  const visibleProviders = filteredProviders.slice(scrollOffset, scrollOffset + listHeight);
+  const visibleProviders = filteredProviders.slice(scrollOffset, scrollOffset + layout.listHeight);
   return /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
     position: "absolute",
     top: 0,
@@ -487395,7 +487422,7 @@ function ConnectModal({ isActive, onClose }) {
               }, undefined, false, undefined, this)
             }, undefined, false, undefined, this),
             /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-              height: listHeight,
+              height: layout.listHeight,
               flexDirection: "column",
               overflow: "hidden",
               marginTop: 1,
@@ -487652,7 +487679,9 @@ function ModelModal({
   const [filterText, setFilterText] = import_react35.useState("");
   const scrollOffsetRef = import_react35.useRef(0);
   const inputRef = import_react35.useRef(null);
-  const listHeight = Math.min(12, Math.floor(height * 0.4));
+  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(() => {
@@ -487745,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;
@@ -487774,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;
@@ -487880,7 +487909,7 @@ function ModelModal({
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ import_jsx_dev_runtime2.jsxDEV("box", {
-          height: listHeight,
+          height: layout.listHeight,
           flexDirection: "column",
           overflow: "hidden",
           marginTop: 1,
@@ -487991,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);
@@ -488016,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;
@@ -488056,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,
@@ -488067,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",
@@ -488092,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,
@@ -488108,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,
@@ -488123,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 " : "  ",
@@ -488138,7 +488170,7 @@ function SessionModal({
                         fg: "#6c6c7c",
                         attributes: createTextAttributes({ dim: true }),
                         children: [
-                          String(safeMessageCount),
+                          messageCountDisplay,
                           "msg"
                         ]
                       }, undefined, true, undefined, this),
@@ -488225,6 +488257,7 @@ function ConfirmModal({
   onConfirm,
   onCancel
 }) {
+  const { width } = useTerminalDimensions();
   useKeyboard((key) => {
     if (!isActive)
       return;
@@ -488236,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", {
@@ -488253,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 }),
@@ -488366,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,
@@ -488375,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,
@@ -488391,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",
@@ -488491,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;
 }
@@ -488594,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;
@@ -488615,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;
@@ -488655,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,
@@ -488667,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",
@@ -488687,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,
@@ -488701,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", {
@@ -488749,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",
@@ -488769,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;
@@ -488782,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);
@@ -488878,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");
@@ -489460,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",
@@ -489538,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());
@@ -489612,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) {
@@ -489620,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));
@@ -489658,7 +490061,7 @@ function App({ onExit }) {
     }
     return unsubscribe;
   }, [currentSessionId]);
-  import_react48.useEffect(() => {
+  import_react53.useEffect(() => {
     const update2 = () => {
       if (!session) {
         setSidebarContextUsage("0%");
@@ -489694,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();
@@ -489820,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;
@@ -489940,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;
@@ -490089,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") {
@@ -490122,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) {
@@ -490131,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;
@@ -490184,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);
@@ -490195,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,
@@ -490213,7 +490616,7 @@ function App({ onExit }) {
       }
     }));
   }, [skills, session, prompt]);
-  const commands = import_react48.useMemo(() => [
+  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 () => {
@@ -490239,6 +490642,7 @@ function App({ onExit }) {
     { 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
   ], [isStreaming, session, handleNewSession, refreshSessionList, agentMode, handleModeSwitch, applyAgentMode, skillCommands]);
   useKeyboard((key) => {
@@ -490320,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;
@@ -490329,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);
@@ -490342,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);
@@ -490393,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,
@@ -490423,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,
@@ -490523,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);
@@ -490534,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);