@corenel/term 0.2.9 → 0.4.0

package/dist/ink/index.js

@@ -1,12 +1,16 @@
 import {
   TermSession,
+  ageWord,
+  formatContext,
+  mcpStatusWord,
   parseMarkdown
-} from "../chunk-QZJTOVZL.js";
-import "../chunk-L4KCEKIT.js";
+} from "../chunk-HUVRQX53.js";
+import "../chunk-2MGDL3I4.js";
 import {
+  TERM_COMMANDS,
   filterCommands,
   parseCommand
-} from "../chunk-VTJEWHM3.js";
+} from "../chunk-5RPHYXND.js";
 import "../chunk-M44CET5L.js";
 import {
   formatEndingChange
@@ -28,7 +32,7 @@ import { STANDARD_POLICY } from "@corenel/harness/guardrail/builtins";
 // src/ink/App.tsx
 import { useEffect, useState } from "react";
 import { homedir } from "node:os";
-import { Box as Box5, Static, Text as Text5, useStdout } from "ink";
+import { Box as Box8, Static, Text as Text8, useStdout } from "ink";
 import TextInput from "ink-text-input";
 
 // src/ink/items.tsx
@@ -169,29 +173,226 @@ function LiveToolRow({ tool }) {
   ] });
 }
 
-// src/ink/Modal.tsx
+// src/ink/McpOverlay.tsx
 import { Box as Box2, Text as Text2 } from "ink";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function DiffPreview({ diff }) {
-  const contentUnchanged = diff.added === 0 && diff.removed === 0;
-  const endingRow = diff.endingChange && /* @__PURE__ */ jsx2(Text2, { color: palette.amber, bold: true, children: formatEndingChange(diff.endingChange, contentUnchanged) });
-  const unexplainedRow = diff.unexplainedChange && /* @__PURE__ */ jsx2(Text2, { color: palette.amber, bold: true, children: "the file changes in a way not shown above (e.g. trailing whitespace or encoding)" });
+
+// src/ink/overlayBudget.ts
+var RESERVED_CHROME_ROWS = 6;
+function overlayBoxBudget(rows) {
+  if (rows === void 0) return Number.MAX_SAFE_INTEGER;
+  return Math.max(rows - RESERVED_CHROME_ROWS, 3);
+}
+function capList(items, cap, overflowLabel) {
+  const rowCap = Math.max(cap, 0);
+  if (items.length <= rowCap) return { shown: items, overflow: null };
+  if (rowCap <= 0) return { shown: [], overflow: null };
+  const shown = Math.max(rowCap - 1, 0);
+  const hidden = items.length - shown;
+  return { shown: items.slice(0, shown), overflow: overflowLabel(hidden) };
+}
+
+// src/ink/McpOverlay.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function statusColor(word) {
+  if (word === "connected") return palette.good;
+  if (word === "unreachable") return palette.bad;
+  return palette.warn;
+}
+var BORDER_ROWS = 2;
+function McpOverlay({ modal, rows }) {
+  let content = Math.max(overlayBoxBudget(rows) - BORDER_ROWS, 0);
+  const take = (n) => {
+    if (content < n) return false;
+    content -= n;
+    return true;
+  };
+  if (modal.login) {
+    const haveCore = take(1);
+    const showEsc = haveCore && modal.login.url !== null && take(1);
+    const showMessage = haveCore && modal.login.url !== null && take(1);
+    const showHeader2 = take(1);
+    const showFooter2 = take(1);
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", borderStyle: "round", borderColor: palette.tool, paddingX: 1, children: [
+      showHeader2 ? /* @__PURE__ */ jsx2(Text2, { color: palette.tool, bold: true, children: "MCP servers" }) : null,
+      haveCore && modal.login.url ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        showMessage ? /* @__PURE__ */ jsxs2(Text2, { color: palette.amber, children: [
+          "signing in to ",
+          modal.login.server,
+          " -- open this URL:"
+        ] }) : null,
+        /* @__PURE__ */ jsx2(Text2, { wrap: "truncate-end", children: modal.login.url }),
+        showEsc ? /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: "esc cancels" }) : null
+      ] }) : haveCore ? /* @__PURE__ */ jsxs2(Text2, { color: palette.amber, wrap: "truncate-end", children: [
+        "signing in to ",
+        modal.login.server,
+        " -- waiting for a login URL..."
+      ] }) : null,
+      showFooter2 ? /* @__PURE__ */ jsxs2(Text2, { color: palette.dim, children: [
+        glyph.active,
+        " select ",
+        glyph.sep,
+        " a add ",
+        glyph.sep,
+        " x remove ",
+        glyph.sep,
+        " l login ",
+        glyph.sep,
+        " r refresh ",
+        glyph.sep,
+        " esc close"
+      ] }) : null
+    ] });
+  }
+  const showHeader = take(1);
+  const emptyRows = modal.servers.length === 0 && take(1);
+  const showFooter = take(1);
+  const { shown, overflow } = capList(modal.servers, content, (n) => `\u2026 ${n} more server${n === 1 ? "" : "s"}`);
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", borderStyle: "round", borderColor: palette.tool, paddingX: 1, children: [
+    showHeader ? /* @__PURE__ */ jsx2(Text2, { color: palette.tool, bold: true, children: "MCP servers" }) : null,
+    emptyRows ? /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: "none configured -- press a to add one" }) : /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+      shown.map((s) => {
+        const i = modal.servers.indexOf(s);
+        const word = mcpStatusWord(s);
+        const isSelected = i === modal.selected;
+        return /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: palette.ember, children: isSelected ? `${glyph.active} ` : "  " }),
+          /* @__PURE__ */ jsx2(Text2, { bold: isSelected, wrap: "truncate-end", children: s.name }),
+          /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: "  " }),
+          /* @__PURE__ */ jsx2(Text2, { color: statusColor(word), children: word }),
+          /* @__PURE__ */ jsxs2(Text2, { color: palette.dim, wrap: "truncate-end", children: [
+            "  ",
+            s.toolCount,
+            " tool",
+            s.toolCount === 1 ? "" : "s",
+            ", ",
+            ageWord(s.fetchedAt, Date.now())
+          ] })
+        ] }, s.name);
+      }),
+      overflow ? /* @__PURE__ */ jsxs2(Text2, { color: palette.dim, children: [
+        "  ",
+        overflow
+      ] }) : null
+    ] }),
+    showFooter ? /* @__PURE__ */ jsxs2(Text2, { color: palette.dim, children: [
+      glyph.active,
+      " select ",
+      glyph.sep,
+      " a add ",
+      glyph.sep,
+      " x remove ",
+      glyph.sep,
+      " l login ",
+      glyph.sep,
+      " r refresh ",
+      glyph.sep,
+      " esc close"
+    ] }) : null
+  ] });
+}
+
+// src/ink/HelpOverlay.tsx
+import { Box as Box3, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FIXED_CHROME_ROWS = 4;
+function HelpOverlay({ rows }) {
+  const width = Math.max(...TERM_COMMANDS.map((c) => `${c.name} ${c.args ?? ""}`.trim().length));
+  const bodyBudget = Math.max(overlayBoxBudget(rows) - FIXED_CHROME_ROWS, 0);
+  const { shown, overflow } = capList(TERM_COMMANDS, bodyBudget, (n) => `\u2026 ${n} more command${n === 1 ? "" : "s"}`);
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", borderStyle: "round", borderColor: palette.tool, paddingX: 1, children: [
+    /* @__PURE__ */ jsx3(Text3, { color: palette.tool, bold: true, children: "Commands" }),
+    /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+      shown.map((c) => {
+        const usage = `${c.name} ${c.args ?? ""}`.trim();
+        return /* @__PURE__ */ jsxs3(Box3, { children: [
+          /* @__PURE__ */ jsxs3(Text3, { color: palette.ember, wrap: "truncate-end", children: [
+            "/",
+            usage.padEnd(width)
+          ] }),
+          /* @__PURE__ */ jsxs3(Text3, { color: palette.dim, wrap: "truncate-end", children: [
+            "  ",
+            c.summary
+          ] })
+        ] }, c.name);
+      }),
+      overflow ? /* @__PURE__ */ jsxs3(Text3, { color: palette.dim, children: [
+        "  ",
+        overflow
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(Text3, { color: palette.dim, children: "esc close" })
+  ] });
+}
+
+// src/ink/ContextOverlay.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var FIXED_CHROME_ROWS2 = 4;
+function ContextOverlay({ snapshot, rows }) {
+  const lines = formatContext(snapshot).split("\n");
+  const bodyBudget = Math.max(overlayBoxBudget(rows) - FIXED_CHROME_ROWS2, 0);
+  const { shown, overflow } = capList(lines, bodyBudget, (n) => `\u2026 ${n} more line${n === 1 ? "" : "s"}`);
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", borderStyle: "round", borderColor: palette.tool, paddingX: 1, children: [
+    /* @__PURE__ */ jsx4(Text4, { color: palette.tool, bold: true, children: "Context window" }),
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+      shown.map((line, i) => /* @__PURE__ */ jsx4(Text4, { wrap: "truncate-end", children: line === "" ? " " : line }, i)),
+      overflow ? /* @__PURE__ */ jsx4(Text4, { color: palette.dim, children: overflow }) : null
+    ] }),
+    /* @__PURE__ */ jsx4(Text4, { color: palette.dim, children: "esc close" })
+  ] });
+}
+function contextSnapshotFromState(state, contextWindow, toolCount) {
+  return {
+    sentTokens: state.sentTokens,
+    contextWindow,
+    offloaded: state.offloaded,
+    checkpoints: state.checkpoints,
+    toolCount,
+    loadedToolNames: state.toolNames
+  };
+}
+
+// src/ink/Modal.tsx
+import { Box as Box5, Text as Text5 } from "ink";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function capDiffRows(rows, max) {
+  if (rows.length <= max || max <= 0) return max <= 0 ? [] : rows;
+  const kept = rows.slice(0, Math.max(max - 1, 0));
+  const dropped = rows.slice(kept.length);
+  const hidden = dropped.reduce((n, r) => n + (r.kind === "skip" ? r.count : 1), 0);
+  return [...kept, { kind: "skip", count: hidden, reason: "context" }];
+}
+function DiffPreview({ diff, budget }) {
+  if (budget !== void 0 && budget <= 0) return null;
   if (diff.noop) {
-    return /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: "(no change -- new content is identical to what's on disk)" });
+    return /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: "(no change -- new content is identical to what's on disk)" });
   }
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+  const contentUnchanged = diff.added === 0 && diff.removed === 0;
+  let remaining = budget !== void 0 ? budget - 1 : void 0;
+  const fits = () => {
+    if (remaining === void 0) return true;
+    if (remaining < 1) return false;
+    remaining -= 1;
+    return true;
+  };
+  const endingRow = diff.endingChange && fits() && /* @__PURE__ */ jsx5(Text5, { color: palette.amber, bold: true, children: formatEndingChange(diff.endingChange, contentUnchanged) });
+  const unexplainedRow = diff.unexplainedChange && fits() && /* @__PURE__ */ jsx5(Text5, { color: palette.amber, bold: true, children: "the file changes in a way not shown above (e.g. trailing whitespace or encoding)" });
+  const newFileRow = diff.isNewFile && fits() && /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: "(new file)" });
+  const rows = remaining !== void 0 ? capDiffRows(diff.rows, remaining) : diff.rows;
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
     endingRow,
     unexplainedRow,
-    diff.isNewFile && /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: "(new file)" }),
-    diff.rows.map((r, i) => {
+    newFileRow,
+    rows.map((r, i) => {
       if (r.kind === "skip") {
         const label = r.reason === "changes" ? `\u2026 ${r.count} more changed line${r.count === 1 ? "" : "s"}` : `\u2026 ${r.count} unchanged line${r.count === 1 ? "" : "s"}`;
-        return /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: label }, i);
+        return /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: label }, i);
       }
-      return /* @__PURE__ */ jsxs2(
-        Text2,
+      return /* @__PURE__ */ jsxs5(
+        Text5,
         {
           color: r.kind === "add" ? palette.good : r.kind === "del" ? palette.bad : palette.dim,
+          wrap: "truncate-end",
           children: [
             r.kind === "add" ? "+ " : r.kind === "del" ? "- " : "  ",
             r.text
@@ -200,7 +401,7 @@ function DiffPreview({ diff }) {
         i
       );
     }),
-    /* @__PURE__ */ jsxs2(Text2, { color: palette.dim, children: [
+    /* @__PURE__ */ jsxs5(Text5, { color: palette.dim, children: [
       "+",
       diff.added,
       " \u2212",
@@ -208,69 +409,90 @@ function DiffPreview({ diff }) {
     ] })
   ] });
 }
-function ModalView({ modal }) {
+var PERMISSION_BORDER_ROWS = 2;
+var QUESTION_FIXED_ROWS = 5;
+function ModalView({ modal, rows }) {
   if (modal.kind === "permission") {
-    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", borderStyle: "round", borderColor: palette.warn, paddingX: 1, children: [
-      /* @__PURE__ */ jsxs2(Text2, { color: palette.warn, children: [
+    let content = Math.max(overlayBoxBudget(rows) - PERMISSION_BORDER_ROWS, 0);
+    const take = (n) => {
+      if (content < n) return false;
+      content -= n;
+      return true;
+    };
+    const showButtons = take(1);
+    const showTool = take(1);
+    const showDetail = take(1);
+    const diffBudget = modal.diff ? content : void 0;
+    return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", borderStyle: "round", borderColor: palette.warn, paddingX: 1, children: [
+      showTool ? /* @__PURE__ */ jsxs5(Text5, { color: palette.warn, children: [
         modal.tool,
         " wants to run"
-      ] }),
-      /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { bold: true, children: modal.detail }) }),
-      modal.diff && /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(DiffPreview, { diff: modal.diff }) }),
-      /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, children: [
-        /* @__PURE__ */ jsx2(Text2, { color: palette.good, children: "[y]" }),
-        /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: " run it   " }),
-        /* @__PURE__ */ jsx2(Text2, { color: palette.bad, children: "[n]" }),
-        /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: " deny   esc denies" })
-      ] })
+      ] }) : null,
+      showDetail ? /* @__PURE__ */ jsx5(Text5, { bold: true, wrap: "truncate-end", children: modal.detail }) : null,
+      modal.diff && /* @__PURE__ */ jsx5(DiffPreview, { diff: modal.diff, budget: diffBudget }),
+      showButtons ? /* @__PURE__ */ jsxs5(Box5, { children: [
+        /* @__PURE__ */ jsx5(Text5, { color: palette.good, children: "[y]" }),
+        /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: " run it   " }),
+        /* @__PURE__ */ jsx5(Text5, { color: palette.bad, children: "[n]" }),
+        /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: " deny   esc denies" })
+      ] }) : null
     ] });
   }
   const q = modal.questions[0];
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", borderStyle: "round", borderColor: palette.ember, paddingX: 1, children: [
-    /* @__PURE__ */ jsx2(Text2, { color: palette.dim, children: q?.header }),
-    /* @__PURE__ */ jsx2(Text2, { bold: true, children: q?.question }),
-    /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", marginTop: 1, children: (q?.options ?? []).map((o, i) => /* @__PURE__ */ jsxs2(Box2, { children: [
-      /* @__PURE__ */ jsxs2(Text2, { color: palette.amber, children: [
-        i + 1,
-        "  "
-      ] }),
-      /* @__PURE__ */ jsx2(Text2, { children: o.label }),
-      o.description ? /* @__PURE__ */ jsxs2(Text2, { color: palette.dim, children: [
-        "   ",
-        o.description
-      ] }) : null
-    ] }, o.label)) }),
-    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsxs2(Text2, { color: palette.dim, children: [
+  const options = q?.options ?? [];
+  const optionsBudget = Math.max(overlayBoxBudget(rows) - QUESTION_FIXED_ROWS, 0);
+  const { shown, overflow } = capList(options, optionsBudget, (n) => `\u2026 ${n} more option${n === 1 ? "" : "s"}`);
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", borderStyle: "round", borderColor: palette.ember, paddingX: 1, children: [
+    /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: q?.header }),
+    /* @__PURE__ */ jsx5(Text5, { bold: true, wrap: "truncate-end", children: q?.question }),
+    /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+      shown.map((o) => {
+        const i = options.indexOf(o);
+        return /* @__PURE__ */ jsxs5(Box5, { children: [
+          /* @__PURE__ */ jsxs5(Text5, { color: palette.amber, children: [
+            i + 1,
+            "  "
+          ] }),
+          /* @__PURE__ */ jsx5(Text5, { wrap: "truncate-end", children: o.label }),
+          o.description ? /* @__PURE__ */ jsxs5(Text5, { color: palette.dim, wrap: "truncate-end", children: [
+            "   ",
+            o.description
+          ] }) : null
+        ] }, o.label);
+      }),
+      overflow ? /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: overflow }) : null
+    ] }),
+    /* @__PURE__ */ jsxs5(Text5, { color: palette.dim, children: [
       "1-",
-      (q?.options ?? []).length,
+      options.length,
       " choose \xB7 \u21B5 confirm \xB7 or type your own answer \xB7 esc dismisses"
-    ] }) })
+    ] })
   ] });
 }
 
 // src/ink/Palette.tsx
-import { Box as Box3, Text as Text3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box6, Text as Text6 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function PaletteView({ items, selected }) {
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-    items.map((c, i) => /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsxs3(Text3, { color: i === selected ? palette.ember : palette.dim, children: [
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    items.map((c, i) => /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { color: i === selected ? palette.ember : palette.dim, children: [
         i === selected ? "\u203A " : "  ",
         "/",
         c.name,
         c.args ? ` ${c.args}` : ""
       ] }),
-      /* @__PURE__ */ jsxs3(Text3, { color: palette.dim, children: [
+      /* @__PURE__ */ jsxs6(Text6, { color: palette.dim, children: [
         "   ",
         c.summary
       ] })
     ] }, c.name)),
-    /* @__PURE__ */ jsx3(Text3, { color: palette.dim, children: "  \u2191\u2193 choose \xB7 tab completes \xB7 esc closes" })
+    /* @__PURE__ */ jsx6(Text6, { color: palette.dim, children: "  \u2191\u2193 choose \xB7 tab completes \xB7 esc closes" })
   ] });
 }
 
 // src/ink/TodoBlock.tsx
-import { Box as Box4, Text as Text4 } from "ink";
+import { Box as Box7, Text as Text7 } from "ink";
 
 // src/ink/todos.ts
 var DEFAULT_TODO_ROW_CAP = 4;
@@ -300,7 +522,7 @@ function toRows(items) {
 }
 
 // src/ink/TodoBlock.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function marker(status) {
   switch (status) {
     case "in_progress":
@@ -316,21 +538,21 @@ function marker(status) {
 }
 function TodoRowView({ row }) {
   const { char, color } = marker(row.status);
-  return /* @__PURE__ */ jsxs4(Box4, { children: [
-    /* @__PURE__ */ jsxs4(Text4, { color, children: [
+  return /* @__PURE__ */ jsxs7(Box7, { children: [
+    /* @__PURE__ */ jsxs7(Text7, { color, children: [
       char,
       " "
     ] }),
-    /* @__PURE__ */ jsx4(Text4, { color: row.status === "in_progress" ? palette.ink : palette.soft, children: row.title })
+    /* @__PURE__ */ jsx7(Text7, { color: row.status === "in_progress" ? palette.ink : palette.soft, children: row.title })
   ] });
 }
 function TodoBlock({ todos }) {
   const view = visibleTodos(todos);
   if (!view) return null;
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: 1, children: [
-    /* @__PURE__ */ jsx4(Text4, { color: palette.dim, children: view.header }),
-    view.rows.map((row) => /* @__PURE__ */ jsx4(TodoRowView, { row }, row.id)),
-    view.overflow ? /* @__PURE__ */ jsxs4(Text4, { color: palette.dim, children: [
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsx7(Text7, { color: palette.dim, children: view.header }),
+    view.rows.map((row) => /* @__PURE__ */ jsx7(TodoRowView, { row }, row.id)),
+    view.overflow ? /* @__PURE__ */ jsxs7(Text7, { color: palette.dim, children: [
       "  ",
       view.overflow
     ] }) : null
@@ -380,7 +602,7 @@ function fitStatus(left, identity, columns) {
 }
 
 // src/ink/App.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function useColumns() {
   const { stdout } = useStdout();
   const [columns, setColumns] = useState(stdout?.columns ?? DEFAULT_COLUMNS);
@@ -395,6 +617,23 @@ function useColumns() {
   }, [stdout]);
   return columns;
 }
+function usableRows(rows) {
+  return rows !== void 0 && Number.isFinite(rows) && rows > 0 ? rows : void 0;
+}
+function useRows() {
+  const { stdout } = useStdout();
+  const [rows, setRows] = useState(usableRows(stdout?.rows));
+  useEffect(() => {
+    if (!stdout) return;
+    const onResize = () => setRows(usableRows(stdout.rows));
+    onResize();
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  return rows;
+}
 function usd(v) {
   return v < 0.01 ? `$${v.toFixed(4)}` : `$${v.toFixed(2)}`;
 }
@@ -404,6 +643,8 @@ function App(props) {
   const paletteSelected = Math.min(props.paletteSelected, Math.max(paletteItems.length - 1, 0));
   const busy = state.status !== "idle";
   const columns = useColumns();
+  const rows = useRows();
+  const modalOpen = state.modal != null;
   const statusWord = busy ? "running" : "idle";
   const roundSeg = state.live ? ` ${glyph.sep} turn ${state.live.turn}` : ` ${glyph.sep} ${props.toolCount} tools`;
   const turnTokens = tokens(state.turnUsage.promptTokens + state.turnUsage.completionTokens);
@@ -412,31 +653,31 @@ function App(props) {
   const costSeg = state.costUsd > 0 ? ` ${glyph.sep} ${usd(state.costUsd)}` : "";
   const escSeg = busy ? ` ${glyph.sep} esc stops` : "";
   const queuedSeg = state.queued.length ? ` ${glyph.sep} ${state.queued.length} queued` : "";
-  const shellSeg = !busy ? ` ${glyph.sep} shell ${props.approveAll ? "auto-approved" : "asks first"}` : "";
+  const shellSeg = ` ${glyph.sep} shell ${props.approveAll ? "auto-approved" : "asks first"}`;
   const statusLeft = `  ${statusWord}${roundSeg}${tokenSeg}${costSeg}${escSeg}${queuedSeg}${shellSeg}`;
-  const { right: statusRight } = fitStatus(statusLeft, { model: props.model, cwd: props.cwd, home: homedir() }, columns);
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx5(Static, { items: state.committed, children: (item) => /* @__PURE__ */ jsx5(CommittedRow, { item }, item.id) }, `transcript-${state.transcriptGen}`),
-    state.live?.tools.map((t) => /* @__PURE__ */ jsx5(LiveToolRow, { tool: t }, t.callId)),
-    state.live?.streaming ? /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { color: palette.soft, children: state.live.streaming }) }) : null,
-    /* @__PURE__ */ jsx5(TodoBlock, { todos: state.todos }),
-    state.modal ? /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(ModalView, { modal: state.modal }) }) : null,
-    paletteItems.length && !state.modal ? /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(PaletteView, { items: paletteItems, selected: paletteSelected }) }) : null,
-    state.pendingSkill ? /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
-      /* @__PURE__ */ jsxs5(Text5, { color: palette.ember, children: [
+  const { right: statusRight } = fitStatus(statusLeft, { model: state.model, cwd: props.cwd, home: homedir() }, columns);
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx8(Static, { items: state.committed, children: (item) => /* @__PURE__ */ jsx8(CommittedRow, { item }, item.id) }, `transcript-${state.transcriptGen}`),
+    !modalOpen && state.live?.tools.map((t) => /* @__PURE__ */ jsx8(LiveToolRow, { tool: t }, t.callId)),
+    !modalOpen && state.live?.streaming ? /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text8, { color: palette.soft, children: state.live.streaming }) }) : null,
+    !modalOpen ? /* @__PURE__ */ jsx8(TodoBlock, { todos: state.todos }) : null,
+    state.modal ? /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: state.modal.kind === "mcp" ? /* @__PURE__ */ jsx8(McpOverlay, { modal: state.modal, rows }) : state.modal.kind === "help" ? /* @__PURE__ */ jsx8(HelpOverlay, { rows }) : state.modal.kind === "context" ? /* @__PURE__ */ jsx8(ContextOverlay, { snapshot: contextSnapshotFromState(state, props.contextWindow ?? null, props.toolCount), rows }) : state.modal.kind === "permission" || state.modal.kind === "user" ? /* @__PURE__ */ jsx8(ModalView, { modal: state.modal, rows }) : null }) : null,
+    paletteItems.length && !modalOpen ? /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx8(PaletteView, { items: paletteItems, selected: paletteSelected }) }) : null,
+    state.pendingSkill && !modalOpen ? /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, children: [
+      /* @__PURE__ */ jsxs8(Text8, { color: palette.ember, children: [
         glyph.sep,
         " skill armed: ",
         state.pendingSkill,
         " "
       ] }),
-      /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: "-- applies to your next message, then clears" })
+      /* @__PURE__ */ jsx8(Text8, { color: palette.dim, children: "-- applies to your next message, then clears" })
     ] }) : null,
-    /* @__PURE__ */ jsxs5(Box5, { borderStyle: "round", borderColor: palette.dim, paddingX: 1, marginTop: 1, children: [
-      /* @__PURE__ */ jsxs5(Text5, { color: palette.ember, children: [
+    /* @__PURE__ */ jsxs8(Box8, { borderStyle: "round", borderColor: palette.dim, paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsxs8(Text8, { color: palette.ember, children: [
         glyph.prompt,
         " "
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx8(
         TextInput,
         {
           value: props.value,
@@ -448,9 +689,9 @@ function App(props) {
         props.inputKey
       )
     ] }),
-    state.committed.length === 0 ? /* @__PURE__ */ jsx5(Box5, { marginBottom: 1, children: /* @__PURE__ */ jsxs5(Text5, { color: palette.soft, children: [
+    state.committed.length === 0 && !modalOpen ? /* @__PURE__ */ jsx8(Box8, { marginBottom: 1, children: /* @__PURE__ */ jsxs8(Text8, { color: palette.soft, children: [
       "Type a request. ",
-      /* @__PURE__ */ jsxs5(Text5, { color: palette.dim, children: [
+      /* @__PURE__ */ jsxs8(Text8, { color: palette.dim, children: [
         "/help for commands ",
         glyph.sep,
         " Ctrl-C stops a turn ",
@@ -458,22 +699,22 @@ function App(props) {
         " Ctrl-D leaves"
       ] })
     ] }) }) : null,
-    /* @__PURE__ */ jsxs5(Box5, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs5(Box5, { children: [
-        /* @__PURE__ */ jsxs5(Text5, { color: busy ? palette.amber : palette.dim, children: [
+    /* @__PURE__ */ jsxs8(Box8, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs8(Box8, { children: [
+        /* @__PURE__ */ jsxs8(Text8, { color: busy ? palette.amber : palette.dim, children: [
           "  ",
           statusWord
         ] }),
-        /* @__PURE__ */ jsxs5(Text5, { color: palette.dim, children: [
+        /* @__PURE__ */ jsxs8(Text8, { color: palette.dim, children: [
           roundSeg,
           tokenSeg,
           costSeg,
           escSeg,
           queuedSeg
         ] }),
-        !busy ? /* @__PURE__ */ jsx5(Text5, { color: props.approveAll ? palette.ember : palette.warn, children: shellSeg }) : null
+        /* @__PURE__ */ jsx8(Text8, { color: props.approveAll ? palette.ember : palette.warn, children: shellSeg })
       ] }),
-      statusRight ? /* @__PURE__ */ jsx5(Text5, { color: palette.dim, children: statusRight }) : null
+      statusRight ? /* @__PURE__ */ jsx8(Text8, { color: palette.dim, children: statusRight }) : null
     ] })
   ] });
 }
@@ -561,7 +802,7 @@ function writeBanner(out, opts) {
 }
 
 // src/ink/index.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Root({ session, deps }) {
   const state = useSyncExternalStore(
     useCallback((fn) => session.subscribe(fn), [session]),
@@ -592,6 +833,53 @@ function Root({ session, deps }) {
   };
   useInput((input, key) => {
     if (state.modal) {
+      if (state.modal.kind === "mcp") {
+        if (key.escape) {
+          session.closeMcpManager();
+          return;
+        }
+        if (key.upArrow) {
+          session.moveMcpSelection(-1);
+          return;
+        }
+        if (key.downArrow) {
+          session.moveMcpSelection(1);
+          return;
+        }
+        const lower = input.toLowerCase();
+        if (lower === "x") {
+          void session.removeMcpSelection();
+          return;
+        }
+        if (lower === "l") {
+          void session.loginMcpSelection();
+          return;
+        }
+        if (lower === "r") {
+          void session.refreshMcpSelection();
+          return;
+        }
+        if (lower === "a") {
+          session.closeMcpManager();
+          completeTo("/mcp add ");
+          return;
+        }
+        return;
+      }
+      if (state.modal.kind === "help") {
+        if (key.escape) {
+          session.closeHelp();
+          return;
+        }
+        return;
+      }
+      if (state.modal.kind === "context") {
+        if (key.escape) {
+          session.closeContext();
+          return;
+        }
+        return;
+      }
       if (key.escape) {
         session.answer(state.modal.kind === "permission" ? "deny" : null);
         return;
@@ -649,7 +937,7 @@ function Root({ session, deps }) {
     }
     if (sawSigint) setSawSigint(false);
   });
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9(
     App,
     {
       state,
@@ -657,10 +945,26 @@ function Root({ session, deps }) {
       cwd: deps.cwd,
       version: deps.version,
       toolCount: deps.tools.length,
+      contextWindow: deps.contextWindow?.() ?? null,
       approveAll: deps.approveAll === true,
       value,
       onChange: handleChange,
       onSubmit: (v) => {
+        if (v.trim() === "/help") {
+          setValue("");
+          session.openHelp();
+          return;
+        }
+        if (v.trim() === "/mcp") {
+          setValue("");
+          void session.openMcpManager();
+          return;
+        }
+        if (v.trim() === "/context") {
+          setValue("");
+          session.openContext();
+          return;
+        }
         const items = v.startsWith("/") ? filterCommands(v) : [];
         if (items.length > 0 && !parseCommand(v)) {
           const chosen = items[Math.min(paletteIndex, items.length - 1)];
@@ -677,6 +981,10 @@ function Root({ session, deps }) {
             return;
           }
         }
+        if (session.willReject(v)) {
+          void session.submit(v);
+          return;
+        }
         setValue("");
         void session.submit(v).then(() => {
           if (session.wantsExit) exit();
@@ -687,9 +995,9 @@ function Root({ session, deps }) {
         const modal = session.getSnapshot().modal;
         if (!modal) return;
         if (modal.kind === "permission") session.answer(/^y(es)?$/i.test(v.trim()) ? "allow" : "deny");
-        else session.answer(v.trim() ? { [modal.questions[0].header]: [v.trim()] } : null);
+        else if (modal.kind === "user") session.answer(v.trim() ? { [modal.questions[0].header]: [v.trim()] } : null);
       },
-      focus: state.modal?.kind !== "permission",
+      focus: state.modal == null || state.modal.kind === "user",
       paletteSelected: paletteIndex,
       inputKey: fieldGen
     }
@@ -714,7 +1022,7 @@ async function runTui(deps) {
     reserve: bannerHeight(process.stdout, bannerOpts)
   });
   writeBanner(process.stdout, bannerOpts);
-  const app = render(/* @__PURE__ */ jsx6(Root, { session, deps }), {
+  const app = render(/* @__PURE__ */ jsx9(Root, { session, deps }), {
     /* LOAD-BEARING — do not "clean up" or default this away. Ink's own App
      * component (build/components/App.js, handleInput) intercepts the raw
      * \x03 byte and calls handleExit() BEFORE it ever emits the 'input'