pi-archimedes 2.1.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-archimedes",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "type": "module",
   "keywords": [
     "pi-package"
@@ -11,21 +11,24 @@
   ],
   "main": "./src/index.ts",
   "dependencies": {
-    "@pi-archimedes/core": "2.1.0",
-    "@pi-archimedes/diff": "2.1.0",
-    "@pi-archimedes/ask": "2.1.0",
-    "@pi-archimedes/subagent": "2.1.0",
-    "@pi-archimedes/footer": "2.1.0",
-    "@pi-archimedes/todo": "2.1.0",
-    "@pi-archimedes/notify": "2.1.0",
-    "@pi-archimedes/image-paste": "2.1.0",
-    "@pi-archimedes/session-name": "2.1.0"
+    "@pi-archimedes/core": "2.3.0",
+    "@pi-archimedes/diff": "2.3.0",
+    "@pi-archimedes/footer": "2.3.0",
+    "@pi-archimedes/image-paste": "2.3.0",
+    "@pi-archimedes/notify": "2.3.0",
+    "@pi-archimedes/subagent": "2.3.0",
+    "@pi-archimedes/todo": "2.3.0",
+    "@pi-archimedes/ask": "2.3.0",
+    "@pi-archimedes/session-name": "2.3.0",
+    "@pi-archimedes/mcp": "2.3.0"
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": ">=0.1.0",
     "@earendil-works/pi-tui": ">=0.1.0"
   },
   "devDependencies": {
+    "@earendil-works/pi-coding-agent": "^0.84.2",
+    "@earendil-works/pi-tui": "^0.84.2",
     "typescript": "^6.0.0"
   },
   "pi": {

package/src/index.ts

@@ -66,12 +66,13 @@ export default function (pi: ExtensionAPI): void {
     currentCtx = ctx;
 
     // ── Parallel lazy-load all three packages (saves ~100ms vs sequential) ──
-    const [diffMod, ipMod, saMod] = await Promise.all([
+    const [diffMod, ipMod, saMod, mcpMod] = await Promise.all([
       import("@pi-archimedes/diff").catch((e) => { console.error("[archimedes] diff load failed:", e); return null; }),
       import("@pi-archimedes/image-paste").catch((e) => { console.error("[archimedes] image-paste load failed:", e); return null; }),
       import("@pi-archimedes/subagent").catch((e) => { console.error("[archimedes] subagent load failed:", e); return null; }),
+      import("@pi-archimedes/mcp").catch((e) => { console.error("[archimedes] mcp load failed:", e); return null; }),
     ]);
-    archTime("3 packages loaded in parallel");
+    archTime("4 packages loaded in parallel");
 
     // Each session_start fires on a fresh Extension (pi creates a new
     // ExtensionRunner per session). Registration is safe to — and must —
@@ -96,6 +97,9 @@ export default function (pi: ExtensionAPI): void {
       saMod.registerSubagent(pi);
       saMod.registerAgentsCommand(pi);
     }
+    if (mcpMod) {
+      mcpMod.registerMcp(pi);
+    }
   });
 
   // Register /archimedes command

package/src/settings-manager.ts

@@ -0,0 +1,364 @@
+/**
+ * Settings Manager TUI component.
+ * Center-screen overlay with 2 modes: List and Prompt (free-input field edit).
+ * Mirrors the chrome of the /agents manager (see agent-manager.ts).
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { SettingItem } from "@earendil-works/pi-tui";
+import { matchesKey, Key, CURSOR_MARKER, truncateToWidth } from "@earendil-works/pi-tui";
+import {
+  visibleWidth,
+  padEnd,
+  wrapText,
+  renderHeader,
+  renderFooter,
+  wrapWithBorder,
+  borderContentWidth,
+} from "@pi-archimedes/core/overlay";
+
+// ── Public types ────────────────────────────────────────────────────────────
+
+export interface PromptDescriptor {
+  kind: "text" | "number";
+  label: string;
+  min?: number;
+}
+
+export interface SettingsManagerOptions {
+  items: SettingItem[];
+  /** Free-input fields keyed by item.id — Enter on these opens prompt mode. */
+  prompts: Record<string, PromptDescriptor>;
+  theme: Theme;
+  onChange: (id: string, newValue: string) => void;
+  onSave: () => void;
+  onClose: () => void;
+}
+
+// ── Constants ───────────────────────────────────────────────────────────────
+
+const VISIBLE_ROWS = 20;
+
+// ── State ───────────────────────────────────────────────────────────────────
+
+interface SettingsManagerState {
+  mode: "list" | "prompt";
+  /** Index into filteredItems. */
+  selectedIndex: number;
+  /** "" = no search. */
+  searchQuery: string;
+  /** Search input armed (toggled by /, cleared by esc). */
+  filterActive: boolean;
+  /** Recomputed when searchQuery changes. */
+  filteredItems: SettingItem[];
+  /** item.id while in prompt mode. */
+  promptField: string | null;
+  /** Seeded from item.currentValue on prompt entry. */
+  promptValue: string;
+  promptError: string | null;
+}
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function filterItemsByLabel(items: SettingItem[], query: string): SettingItem[] {
+  if (!query) return items;
+  const q = query.toLowerCase();
+  return items.filter((item) => item.label.toLowerCase().includes(q));
+}
+
+/** ASCII printable — list-mode SEARCH input (matches the /agents agent-manager pattern). */
+function isPrintableChar(data: string): boolean {
+  return data.length === 1 && data >= " " && data <= "~";
+}
+
+/** Single non-control code unit — free-text PROMPT fields accept accented/Cyrillic/CJK chars. */
+function isPromptTextChar(data: string): boolean {
+  if (data.length !== 1) return false;
+  const cp = data.codePointAt(0);
+  if (cp === undefined) return false;
+  // Accept single code points >= 0x20, excluding DEL (0x7f) and the C1 range (0x80..0x9f).
+  if (cp < 0x20 || cp === 0x7f) return false;
+  if (cp >= 0x80 && cp <= 0x9f) return false;
+  return true;
+}
+
+// ── Component ───────────────────────────────────────────────────────────────
+
+export function createSettingsManager(opts: SettingsManagerOptions): {
+  render(width: number): string[];
+  handleInput(data: string): void;
+  invalidate(): void;
+  dispose(): void;
+} {
+  const state: SettingsManagerState = {
+    mode: "list",
+    selectedIndex: 0,
+    searchQuery: "",
+    filterActive: false,
+    filteredItems: opts.items,
+    promptField: null,
+    promptValue: "",
+    promptError: null,
+  };
+
+  const theme = opts.theme;
+
+  // ── Render (list mode) ──────────────────────────────────────────────────
+
+  function renderList(contentWidth: number): string[] {
+    const lines: string[] = [];
+
+    lines.push(renderHeader(" Settings ", contentWidth, theme));
+    lines.push(padEnd("", contentWidth));
+
+    if (state.filterActive) {
+      lines.push(padEnd(`Search: ${state.searchQuery}${CURSOR_MARKER}`, contentWidth));
+    }
+
+    lines.push(padEnd("", contentWidth));
+
+    // Label column width: widest label across all items, capped at 30.
+    const maxLabelWidth = Math.min(
+      30,
+      opts.items.reduce((max, item) => Math.max(max, visibleWidth(item.label)), 0),
+    );
+
+    const start = Math.max(
+      0,
+      Math.min(state.selectedIndex - 10, state.filteredItems.length - VISIBLE_ROWS),
+    );
+    const end = Math.min(start + VISIBLE_ROWS, state.filteredItems.length);
+
+    for (let i = start; i < end; i++) {
+      const item = state.filteredItems[i];
+      if (!item) continue;
+      const isCursor = i === state.selectedIndex;
+      const prefix = isCursor ? "> " : "  ";
+
+      // Truncate before padding so an over-long label can never overflow the row.
+      const label = truncateToWidth(item.label, maxLabelWidth, "");
+      const labelCol = isCursor
+        ? theme.fg("accent", padEnd(label, maxLabelWidth))
+        : padEnd(label, maxLabelWidth);
+
+      // Compose the full value string (with edit marker) BEFORE truncation so
+      // the marker is never clipped.
+      const descriptor = opts.prompts[item.id];
+      const valueString = descriptor
+        ? `${item.currentValue}  ${theme.fg("dim", "edit…")}`
+        : item.currentValue;
+      const remainingWidth = Math.max(1, contentWidth - 2 - maxLabelWidth - 2);
+      const valueCol = isCursor
+        ? truncateToWidth(valueString, remainingWidth, "")
+        : theme.fg("dim", truncateToWidth(valueString, remainingWidth, ""));
+
+      lines.push(padEnd(`${prefix}${labelCol}  ${valueCol}`, contentWidth));
+    }
+
+    // Feedback when search filters to zero items.
+    if (state.filteredItems.length === 0) {
+      lines.push(padEnd(theme.fg("dim", "No matching settings"), contentWidth));
+    }
+
+    // Scroll indicator
+    if (state.filteredItems.length > VISIBLE_ROWS) {
+      lines.push(theme.fg("dim", `  (${state.selectedIndex + 1}/${state.filteredItems.length})`));
+    }
+
+    // Description of the selected item
+    const selected = state.filteredItems[state.selectedIndex];
+    if (selected && selected.description) {
+      lines.push(padEnd("", contentWidth));
+      for (const line of wrapText(selected.description, contentWidth - 2)) {
+        lines.push(theme.fg("dim", `  ${line}`));
+      }
+    }
+
+    lines.push(padEnd("", contentWidth));
+    lines.push(
+      renderFooter(
+        " [↑↓] move  [←→] value  [enter] edit  [/] search  [s] save  [esc] close ",
+        contentWidth,
+        theme,
+      ),
+    );
+
+    return lines;
+  }
+
+  // ── Render (prompt mode) ────────────────────────────────────────────────
+
+  function renderPrompt(width: number): string[] {
+    const contentWidth = borderContentWidth(width);
+    const descriptor = state.promptField ? opts.prompts[state.promptField] : undefined;
+    // Guard the impossible state — render must be total and the overlay frame
+    // must never collapse, even without a descriptor.
+    if (!descriptor) return wrapWithBorder([], width, theme);
+
+    const lines: string[] = [];
+
+    lines.push(renderHeader(" Settings ", contentWidth, theme));
+    lines.push(padEnd("", contentWidth));
+    lines.push(padEnd("", contentWidth));
+    lines.push(theme.fg("dim", `  ${descriptor.label}`));
+    lines.push(padEnd(`  ${state.promptValue}${CURSOR_MARKER}`, contentWidth));
+    lines.push(padEnd("", contentWidth));
+    if (state.promptError) {
+      lines.push(theme.fg("error", `  ${state.promptError}`));
+    }
+    lines.push(padEnd("", contentWidth));
+    lines.push(renderFooter(" [enter] confirm  [esc] cancel ", contentWidth, theme));
+
+    return wrapWithBorder(lines, width, theme);
+  }
+
+  function render(width: number): string[] {
+    if (state.mode === "prompt") return renderPrompt(width);
+    return wrapWithBorder(renderList(borderContentWidth(width)), width, theme);
+  }
+
+  // ── Input (list mode) ───────────────────────────────────────────────────
+
+  function handleListInput(data: string): void {
+    if (matchesKey(data, Key.up)) {
+      if (state.filteredItems.length === 0) return;
+      state.selectedIndex =
+        (state.selectedIndex - 1 + state.filteredItems.length) % state.filteredItems.length;
+    } else if (matchesKey(data, Key.down)) {
+      if (state.filteredItems.length === 0) return;
+      state.selectedIndex = (state.selectedIndex + 1) % state.filteredItems.length;
+    } else if (matchesKey(data, Key.left) || matchesKey(data, Key.right)) {
+      const item = state.filteredItems[state.selectedIndex];
+      if (!item || !item.values || item.values.length <= 1) return;
+      const values = item.values;
+      const currentIdx = Math.max(0, values.indexOf(item.currentValue));
+      const nextIndex = matchesKey(data, Key.left)
+        ? (currentIdx - 1 + values.length) % values.length
+        : (currentIdx + 1) % values.length;
+      const next = values[nextIndex];
+      if (next === undefined) return;
+      item.currentValue = next;
+      opts.onChange(item.id, next);
+    } else if (matchesKey(data, Key.enter)) {
+      const item = state.filteredItems[state.selectedIndex];
+      if (!item) return;
+      if (opts.prompts[item.id]) {
+        state.mode = "prompt";
+        state.promptField = item.id;
+        state.promptValue = item.currentValue;
+        state.promptError = null;
+      }
+    } else if (matchesKey(data, "/")) {
+      // Re-pressing while active is a no-op.
+      state.filterActive = true;
+    } else if (matchesKey(data, Key.backspace)) {
+      if (state.filterActive && state.searchQuery.length > 0) {
+        state.searchQuery = state.searchQuery.slice(0, -1);
+        state.filteredItems = filterItemsByLabel(opts.items, state.searchQuery);
+        state.selectedIndex = 0;
+      }
+    } else if (matchesKey(data, Key.escape)) {
+      if (state.filterActive) {
+        state.searchQuery = "";
+        state.filterActive = false;
+        state.filteredItems = opts.items;
+        state.selectedIndex = 0;
+      } else {
+        opts.onClose();
+      }
+    } else if (isPrintableChar(data) && state.filterActive) {
+      // Must come before the "s" branch so typing "s" in search doesn't save.
+      state.searchQuery += data;
+      state.filteredItems = filterItemsByLabel(opts.items, state.searchQuery);
+      state.selectedIndex = 0;
+    } else if (matchesKey(data, "s")) {
+      if (!state.filterActive) {
+        opts.onSave();
+      }
+    }
+  }
+
+  // ── Input (prompt mode) ─────────────────────────────────────────────────
+
+  function handlePromptInput(data: string): void {
+    if (matchesKey(data, Key.escape)) {
+      // Discard typed value — item.currentValue untouched.
+      state.mode = "list";
+      state.promptField = null;
+      state.promptError = null;
+    } else if (matchesKey(data, Key.enter)) {
+      const field = state.promptField;
+      const descriptor = field ? opts.prompts[field] : undefined;
+      if (!field || !descriptor) {
+        state.mode = "list";
+        state.promptField = null;
+        state.promptError = null;
+        return;
+      }
+
+      // Resolve the item FIRST — never mutate config if the target is gone.
+      const item = opts.items.find((i) => i.id === field);
+      if (!item) {
+        state.mode = "list";
+        state.promptField = null;
+        state.promptError = null;
+        return;
+      }
+
+      let normalized: string;
+      if (descriptor.kind === "number") {
+        const n = parseInt(state.promptValue, 10);
+        if (!Number.isFinite(n) || n < (descriptor.min ?? 0)) {
+          state.promptError = "must be >= " + (descriptor.min ?? 0);
+          return;
+        }
+        normalized = String(n);
+      } else {
+        normalized = state.promptValue;
+      }
+
+      opts.onChange(field, normalized);
+      item.currentValue = normalized;
+      state.mode = "list";
+      state.promptField = null;
+      state.promptError = null;
+      // selectedIndex stays on the field.
+    } else if (matchesKey(data, Key.backspace)) {
+      if (state.promptValue.length > 0) {
+        state.promptValue = state.promptValue.slice(0, -1);
+        state.promptError = null;
+      }
+    } else if (isPromptTextChar(data)) {
+      const field = state.promptField;
+      const descriptor = field ? opts.prompts[field] : undefined;
+      if (!descriptor) return;
+      // Number fields accept digits only (matches the old submenu behavior).
+      if (descriptor.kind === "number" && !/^\d$/.test(data)) return;
+      state.promptValue += data;
+      state.promptError = null;
+    }
+    // Unmatched control/navigation input is swallowed in prompt mode;
+    // printable chars (including s, /) are appended as text.
+  }
+
+  function handleInput(data: string): void {
+    if (state.mode === "prompt") {
+      handlePromptInput(data);
+    } else {
+      handleListInput(data);
+    }
+  }
+
+  return {
+    render,
+    handleInput,
+
+    invalidate(): void {
+      // No-op — the component owns all of its state.
+    },
+
+    dispose(): void {
+      // No timers or subscriptions to clean up.
+    },
+  };
+}

package/src/settings.ts

@@ -1,9 +1,8 @@
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { getSettingsListTheme } from "@earendil-works/pi-coding-agent";
-import type { Theme } from "@earendil-works/pi-coding-agent";
-import { SettingsList, type SettingItem, TUI } from "@earendil-works/pi-tui";
+import type { SettingItem } from "@earendil-works/pi-tui";
 
 import { getCoreSettingsItems } from "@pi-archimedes/core";
+import { OVERLAY_CHROME } from "@pi-archimedes/core/overlay";
 import { getFooterSettingsItems } from "@pi-archimedes/footer/config";
 // diff (shiki) is lazy-loaded below to keep shiki out of the startup import chain
 import { getNotifySettingsItems } from "@pi-archimedes/notify";
@@ -15,87 +14,24 @@ import {
   saveDiffConfig,
   saveNotifyConfig,
   saveSessionNameConfig,
-  ANIMATION_STYLES,
   type CoreConfig,
-  type FooterConfig,
-  type DiffConfig,
   type NotifyConfig,
-  type SessionNameSettings,
 } from "./config.js";
+import { createSettingsManager, type PromptDescriptor } from "./settings-manager.js";
 
-// ── Factory: text submenu ───────────────────────────────────────────────
+// ── Free-input prompt descriptors (keyed by item.id) ───────────────────────
 
-function createTextSubmenu(opts: {
-  label: string;
-  cancelHint?: string;
-  confirmHint?: string;
-}): (currentValue: string, done: (selectedValue?: string) => void) => import("@earendil-works/pi-tui").Component {
-  return (currentValue: string, done: (selectedValue?: string) => void) => {
-    const state = { value: currentValue };
-    return {
-      invalidate(): void { /* no-op */ },
-      render(): string[] {
-        const hints: string[] = [];
-        if (opts.cancelHint) hints.push(opts.cancelHint);
-        if (opts.confirmHint) hints.push(opts.confirmHint);
-        return [
-          opts.label,
-          "",
-          `  ${state.value}`,
-          "",
-          hints.join(" | "),
-        ];
-      },
-      handleInput(data: string): void {
-        if (data === "\x1b") { done(); return; }
-        if (data === "\r" || data === "\n") { done(state.value); return; }
-        if (data === "\x7f" || data === "\x08") { state.value = state.value.slice(0, -1); }
-        else if (data.length === 1) { state.value += data; }
-      },
-    };
-  };
-}
+const PROMPTS: Record<string, PromptDescriptor> = {
+  labelText: { kind: "text", label: "Label text" },
+  labelColor: { kind: "text", label: "RGB color (e.g. 255,215,0)" },
+  diffTheme: { kind: "text", label: "Shiki theme" },
+  diffSplitMinWidth: { kind: "number", label: "Diff split min width", min: 100 },
+  diffSplitMinCodeWidth: { kind: "number", label: "Diff split min code width", min: 30 },
+  splitThreshold: { kind: "number", label: "Footer split threshold", min: 80 },
+  delayMs: { kind: "number", label: "Notify delay (seconds)", min: 1 },
+};
 
-// ── Factory: number submenu ─────────────────────────────────────────────
-
-function createNumberSubmenu(opts: {
-  label: string;
-  cancelHint?: string;
-  confirmHint?: string;
-  min?: number;
-}): (currentValue: string, done: (selectedValue?: string) => void) => import("@earendil-works/pi-tui").Component {
-  return (currentValue: string, done: (selectedValue?: string) => void) => {
-    const state = { value: currentValue };
-    return {
-      invalidate(): void { /* no-op */ },
-      render(): string[] {
-        const hints: string[] = [];
-        if (opts.cancelHint) hints.push(opts.cancelHint);
-        if (opts.confirmHint) hints.push(opts.confirmHint);
-        return [
-          opts.label,
-          "",
-          `  ${state.value}`,
-          "",
-          hints.join(" | "),
-        ];
-      },
-      handleInput(data: string): void {
-        if (data === "\x1b") { done(); return; }
-        if (data === "\r" || data === "\n") {
-          const n = parseInt(state.value, 10);
-          if (Number.isFinite(n) && (!opts.min || n >= opts.min)) done(String(n));
-          else done();
-          return;
-        }
-        if (data === "\x7f" || data === "\x08") { state.value = state.value.slice(0, -1); }
-        else if (/^\d$/.test(data)) { state.value += data; }
-      },
-    };
-  };
-}
-
-// ── Settings UI ─────────────────────────────────────────────────────────
+// ── Settings UI ─────────────────────────────────────────────────────────────
 
 export async function openSettings(pi: ExtensionAPI, ctx: ExtensionContext): Promise<void> {
   // Lazy-load diff (pulls in shiki) — only needed when /archimedes is opened
@@ -103,10 +39,10 @@ export async function openSettings(pi: ExtensionAPI, ctx: ExtensionContext): Pro
   const allConfig = loadAllConfig();
 
   const coreConfig: CoreConfig = { ...allConfig.core };
-  const footerConfig: FooterConfig = { ...allConfig.footer };
-  const diffConfig: DiffConfig = { ...allConfig.diff };
   const notifyConfig: NotifyConfig = { ...allConfig.notify };
-  const sessionNameConfig: SessionNameSettings = { ...allConfig.sessionName };
+  const footerConfig = { ...allConfig.footer };
+  const diffConfig = { ...allConfig.diff };
+  const sessionNameConfig = { ...allConfig.sessionName };
 
   // Build composed items from sub-packages
   const coreItems = getCoreSettingsItems(coreConfig);
@@ -115,64 +51,13 @@ export async function openSettings(pi: ExtensionAPI, ctx: ExtensionContext): Pro
   const notifyItems = getNotifySettingsItems(notifyConfig);
   const sessionNameItems = getSessionNameSettingsItems(sessionNameConfig);
 
-  // Add submenus for text/number fields
-  const addSubmenus = (items: SettingItem[]) => {
-    for (const item of items) {
-      if (item.id === "labelText") {
-        item.submenu = createTextSubmenu({
-          label: "Enter label text (ESC to cancel):",
-          cancelHint: "ESC: cancel",
-          confirmHint: "ENTER: confirm",
-        });
-      } else if (item.id === "labelColor") {
-        item.submenu = createTextSubmenu({
-          label: "Enter RGB color (ESC to cancel):",
-          cancelHint: "ESC: cancel",
-          confirmHint: "ENTER: confirm",
-        });
-      } else if (item.id === "diffTheme") {
-        item.submenu = createTextSubmenu({
-          label: "Enter Shiki theme (ESC to cancel):",
-          cancelHint: "ESC: cancel",
-          confirmHint: "ENTER: confirm",
-        });
-      } else if (item.id === "diffSplitMinWidth") {
-        item.submenu = createNumberSubmenu({
-          label: "Enter min width (ESC to cancel):",
-          cancelHint: "ESC: cancel",
-          confirmHint: "min 100",
-          min: 100,
-        });
-      } else if (item.id === "diffSplitMinCodeWidth") {
-        item.submenu = createNumberSubmenu({
-          label: "Enter min code width (ESC to cancel):",
-          cancelHint: "ESC: cancel",
-          confirmHint: "min 30",
-          min: 30,
-        });
-      } else if (item.id === "splitThreshold") {
-        item.submenu = createNumberSubmenu({
-          label: "Enter split threshold (ESC to cancel):",
-          cancelHint: "ESC: cancel",
-          confirmHint: "min 80",
-          min: 80,
-        });
-      } else if (item.id === "delayMs") {
-        item.submenu = createNumberSubmenu({
-          label: "Enter delay in seconds (ESC to cancel):",
-          cancelHint: "ESC: cancel",
-          confirmHint: "min 1",
-          min: 1,
-        });
-      }
-    }
-  };
-
-  addSubmenus(coreItems);
-  addSubmenus(diffItems);
-  addSubmenus(footerItems);
-  addSubmenus(notifyItems);
-  addSubmenus(sessionNameItems);
+  // The notify package seeds delayMs as "30s" — strip the suffix so the
+  // number prompt can be edited in place (typed digits would otherwise
+  // append to "30s" and parseInt would discard the edit).
+  const delayItem = notifyItems.find((i) => i.id === "delayMs");
+  if (delayItem) {
+    delayItem.currentValue = String(notifyConfig.delayMs / 1000);
+  }
 
   const items: SettingItem[] = [
     ...coreItems,
@@ -180,75 +65,67 @@ export async function openSettings(pi: ExtensionAPI, ctx: ExtensionContext): Pro
     ...diffItems,
     ...notifyItems,
     ...sessionNameItems,
-    {
-      id: "save",
-      label: "Save",
-      description: "Save changes and exit",
-      currentValue: "",
-      values: ["Save"],
-    },
   ];
 
-  ctx.ui.custom((tui: TUI, theme: Theme, _keybindings, done) => {
-    const settingsList = new SettingsList(items, 10, getSettingsListTheme(), (id: string, newValue: string) => {
-      switch (id) {
-        // ── Core settings ──
-        case "mutedTheme": coreConfig.mutedTheme = newValue === "On"; break;
-        case "codeUnindent": coreConfig.codeUnindent = newValue === "On"; break;
-        case "labelText": coreConfig.labelText = newValue; break;
-        case "labelColor": coreConfig.labelColor = newValue; break;
-        case "animationStyle": coreConfig.animationStyle = newValue as CoreConfig["animationStyle"]; break;
-
-        // ── Footer settings ──
-        case "splitThreshold": {
-          const v = parseInt(newValue, 10);
-          if (Number.isFinite(v)) footerConfig.splitThreshold = v;
-          break;
+  ctx.ui.custom((_tui, theme, _keybindings, done) => {
+    const settingsManager = createSettingsManager({
+      items,
+      prompts: PROMPTS,
+      theme,
+      onChange: (id: string, newValue: string) => {
+        switch (id) {
+          // ── Core settings ──
+          case "mutedTheme": coreConfig.mutedTheme = newValue === "On"; break;
+          case "codeUnindent": coreConfig.codeUnindent = newValue === "On"; break;
+          case "labelText": coreConfig.labelText = newValue; break;
+          case "labelColor": coreConfig.labelColor = newValue; break;
+          case "animationStyle": coreConfig.animationStyle = newValue as CoreConfig["animationStyle"]; break;
+
+          // ── Footer settings ──
+          case "splitThreshold": {
+            const v = parseInt(newValue, 10);
+            if (Number.isFinite(v)) footerConfig.splitThreshold = v;
+            break;
+          }
+
+          // ── Diff settings ──
+          case "diffTheme": diffConfig.diffTheme = newValue; break;
+          case "diffSplitMinWidth": {
+            const v = parseInt(newValue, 10);
+            if (Number.isFinite(v)) diffConfig.diffSplitMinWidth = v;
+            break;
+          }
+          case "diffSplitMinCodeWidth": {
+            const v = parseInt(newValue, 10);
+            if (Number.isFinite(v)) diffConfig.diffSplitMinCodeWidth = v;
+            break;
+          }
+
+          // ── Notify settings ──
+          case "enabled": notifyConfig.enabled = newValue === "On"; break;
+          case "notifyOnAgentEnd": notifyConfig.notifyOnAgentEnd = newValue === "On"; break;
+          case "notifyOnQuestion": notifyConfig.notifyOnQuestion = newValue === "On"; break;
+          case "delayMs": {
+            const v = parseInt(newValue, 10);
+            if (Number.isFinite(v) && v >= 1) notifyConfig.delayMs = v * 1000;
+            break;
+          }
+
+          // ── Session name settings ──
+          case "sessionNameEnabled": sessionNameConfig.enabled = newValue === "On"; break;
+          case "sessionNameModel": sessionNameConfig.model = newValue === "(current model)" ? undefined : newValue; break;
         }
-
-        // ── Diff settings ──
-        case "diffTheme": diffConfig.diffTheme = newValue; break;
-        case "diffSplitMinWidth": {
-          const v = parseInt(newValue, 10);
-          if (Number.isFinite(v)) diffConfig.diffSplitMinWidth = v;
-          break;
-        }
-        case "diffSplitMinCodeWidth": {
-          const v = parseInt(newValue, 10);
-          if (Number.isFinite(v)) diffConfig.diffSplitMinCodeWidth = v;
-          break;
-        }
-
-        // ── Notify settings ──
-        case "enabled": notifyConfig.enabled = newValue === "On"; break;
-        case "notifyOnAgentEnd": notifyConfig.notifyOnAgentEnd = newValue === "On"; break;
-        case "notifyOnQuestion": notifyConfig.notifyOnQuestion = newValue === "On"; break;
-        case "delayMs": {
-          const v = parseInt(newValue, 10);
-          if (Number.isFinite(v) && v >= 1) notifyConfig.delayMs = v * 1000;
-          break;
-        }
-
-        // ── Session name settings ──
-        case "sessionNameEnabled": sessionNameConfig.enabled = newValue === "On"; break;
-        case "sessionNameModel": sessionNameConfig.model = newValue === "(current model)" ? undefined : newValue; break;
-
-        // ── Save ──
-        case "save": {
-          saveCoreConfig(coreConfig);
-          saveFooterConfig(footerConfig);
-          saveDiffConfig(diffConfig);
-          saveNotifyConfig(notifyConfig);
-          saveSessionNameConfig(sessionNameConfig);
-          done(undefined);
-          return;
-        }
-      }
-    }, () => {
-      // ESC cancels without saving
-      done(undefined);
+      },
+      onSave: () => {
+        saveCoreConfig(coreConfig);
+        saveFooterConfig(footerConfig);
+        saveDiffConfig(diffConfig);
+        saveNotifyConfig(notifyConfig);
+        saveSessionNameConfig(sessionNameConfig);
+        done(undefined);
+      },
+      onClose: () => { done(undefined); },
     });
-
-    return settingsList;
-  });
+    return settingsManager;
+  }, { overlay: true, overlayOptions: OVERLAY_CHROME });
 }