loom-agent 1.2.0

package/src/tui/components/Modals.tsx

@@ -0,0 +1,851 @@
+// Modals -- provider picker, model picker, key input, base URL, settings, palette.
+import { createSignal, onMount } from "solid-js";
+import { useKeyboard, usePaste } from "@opentui/solid";
+import { palette } from "../theme.ts";
+import * as kbs from "../keybinds.ts";
+import {
+  openModal, closeModal, modal, PROVIDERS, PROVIDER_ORDER, PROVIDER_LABELS,
+  refreshProviderState, appendMessage, showToast, getSession, allModelOptions,
+  SLASH_LIST, windowFor,
+  sidebarVisible, setSidebarVisible, showToolDetails, setShowToolDetails,
+  showThinking, setShowThinking, persistUi,
+} from "../store.ts";
+import { loadConfig, saveConfig, getBaseUrl, setBaseUrl } from "../../config/settings.js";
+import { MCP_PRESETS, CONNECTOR_PRESETS } from "../mcp-presets.ts";
+const plugin = require("../../core/plugin-cmd.js");
+
+const ui = palette("loom");
+
+// Dialog nav labels from the resolved keybinds (shown in modal footers).
+function kbNav() {
+  return {
+    prev: kbs.label("dialog_select_prev").toUpperCase(),
+    next: kbs.label("dialog_select_next").toUpperCase(),
+    submit: kbs.label("dialog_select_submit").toUpperCase(),
+    cancel: kbs.label("modal_cancel").toUpperCase(),
+  };
+}
+
+function wheelStep(e: any, delta: number) {
+  const dir = e?.scroll?.direction;
+  return dir === "up" ? -delta : delta;
+}
+
+export function ModalFrame(props: { title: string; subtitle?: string; children: any; footer?: string }) {
+  // Floating panel: centered over the terminal but NOT a full-screen takeover —
+  // no backdrop fill, so the chat and any running agent stay visible behind it
+  // ("same window, hovering"). Keys still belong to the modal while open.
+  return (
+    <box position="absolute" top={0} left={0} right={0} bottom={0}
+      alignItems="center" justifyContent="center" flexDirection="column">
+      <box border borderStyle="rounded" borderColor={ui.primary} backgroundColor={ui.bgPanel}
+        paddingX={3} paddingY={2} flexDirection="column" minWidth={52} maxWidth={72}>
+        <text fg={ui.primary}>{props.title}</text>
+        {props.subtitle ? <text fg={ui.fgMuted} marginTop={0}>{props.subtitle}</text> : null}
+        <box flexDirection="column" marginTop={1}>{props.children}</box>
+        {props.footer ? <text fg={ui.fgMuted} marginTop={1}>{props.footer}</text> : null}
+      </box>
+    </box>
+  );
+}
+
+export function ProviderPicker() {
+  // opencode-scale provider list: make sure the models.dev registry is cached
+  // (fetched once, ~/.loom/models-dev.json). When a fetch lands mid-session
+  // the picker re-opens with the full provider list. When the cache is already
+  // fresh the picker must NOT re-open itself — that would loop forever and
+  // clobber every other modal.
+  onMount(() => {
+    const { ensureRegistry } = require("../../providers/index.js");
+    const hadCache = require("../../providers/registry.js").isRegistryFresh();
+    ensureRegistry().then((count) => {
+      if (modal()?.type !== "provider") return;
+      if (hadCache || !count) return;
+      closeModal();
+      setTimeout(() => openModal({ type: "provider" }), 50);
+    });
+  });
+
+  const opts = PROVIDER_ORDER.map(p => ({
+    label: PROVIDER_LABELS[p] || p,
+    value: p,
+    sub: PROVIDERS[p]?.models?.length ? String(PROVIDERS[p].models.length) + " models" : undefined,
+  }));
+  const pick = (val: any) => {
+    const p = String(val);
+    const sess = getSession();
+    const cfg = loadConfig();
+    const modelId = cfg.model?.[p] || (PROVIDERS[p]?.models?.[0]?.id);
+    if (modelId) sess.setModel(p, modelId);
+    else { cfg.provider = p; saveConfig(cfg); }
+    closeModal(); refreshProviderState();
+    showToast("Provider: " + (PROVIDER_LABELS[p] || p), "ok");
+    setTimeout(() => openKeyModal(p), 100);
+  };
+  return (
+    <SelectModal
+      title="Connect Provider"
+      options={opts}
+      searchable={true}
+      onPick={pick}
+    />
+  );
+}
+
+// ── Model picker ──
+export function openModelPicker() {
+  const opts = allModelOptions().filter(function(o) { return o.value !== "__custom__"; });
+  openModal({
+    type: "select", title: "Select Model", options: opts, searchable: true,
+    onPick(val, opt) {
+      if (val === "__custom__") return;
+      const provider = opt?.provider || loadConfig().provider;
+      const sess = getSession();
+      sess.setModel(provider, val);
+      refreshProviderState(); closeModal();
+      showToast("Model: " + provider + " -> " + val, "ok");
+    },
+  });
+}
+
+export function openKeyModal(provider: string) {
+  const cur = (loadConfig().apiKeys || {})[provider] || "";
+  openModal({
+    type: "input", title: "API key for " + (PROVIDER_LABELS[provider] || provider),
+    placeholder: cur ? "(already set -- leave blank to keep)" : "Paste your key",
+    isKey: true,
+    onPick(val) {
+      const c = loadConfig(); c.apiKeys = c.apiKeys || {};
+      if (val.trim()) { c.apiKeys[provider] = val.trim(); saveConfig(c); showToast("Key saved for " + provider, "ok"); }
+      else showToast("Using env var " + provider.toUpperCase() + "_API_KEY");
+      refreshProviderState(); closeModal();
+    },
+  });
+}
+
+export function openBaseUrlEditor(provider: string) {
+  const cur = getBaseUrl(provider) || "(default)";
+  openModal({
+    type: "input", title: "Base URL for " + (PROVIDER_LABELS[provider] || provider),
+    placeholder: "Current: " + cur,
+    onPick(val) {
+      if (!val.trim()) { closeModal(); return; }
+      setBaseUrl(provider, val.trim()); closeModal();
+      showToast("Base URL: " + val.trim());
+    },
+  });
+}
+
+export function SelectModal(props: {
+  title: string;
+  options: { label: string; value: any; sub?: string; provider?: string; header?: string; isHeader?: boolean; tags?: string[]; recent?: boolean }[];
+  onPick: (value: any, option: any) => void;
+  searchable?: boolean;
+  onCancel?: () => void;
+  // Live-preview: fire on selection change so theme pickers can repaint the
+  // app while the user scrolls without closing the modal.
+  onPreview?: (value: any) => void;
+}) {
+  // Long labels/subs must never wrap: the modal is maxWidth 72 (62 usable cells
+  // after padding), so truncate each piece to its budget before rendering.
+  const LABEL_MAX = 26, SUB_MAX = 18;
+  const fit = (s: string, n: number) => (s.length <= n ? s : s.slice(0, Math.max(1, n - 1)) + "\u2026");
+  const [index, setIndex] = createSignal(0);
+  const [q, setQ] = createSignal("");
+
+  const filtered = () => {
+    const query = q().trim().toLowerCase();
+    if (!query) return props.options;
+    return props.options.filter(o => {
+      if (o.isHeader) return false;
+      const hay = (o.label + " " + (o.sub || "") + " " + (o.provider || "") + " " + String(o.tags || []).toLowerCase() + " " + String(o.value)).toLowerCase();
+      return query.split(/\s+/).every(part => hay.includes(part));
+    });
+  };
+
+  // Live-hook: fire onPreview AFTER the index has settled (Solid may batch
+  // the signal write — schedule.fire settles next microtask).
+  function firePreview() {
+    if (!props.onPreview) return;
+    setTimeout(() => {
+      try { props.onPreview!(filtered()[index()]?.value); } catch {}
+    }, 0);
+  }
+
+  // The selection must never land on a section header: it would render with
+  // no highlight and Enter would do nothing. Always skip to the next row.
+  const firstSelectable = () => {
+    const list = filtered();
+    const i = list.findIndex(o => o && !o.isHeader);
+    return i < 0 ? 0 : i;
+  };
+  const stepSelectable = (i: number, dir: number) => {
+    const list = filtered();
+    let j = i + dir;
+    while (j >= 0 && j < list.length && list[j] && list[j].isHeader) j += dir;
+    if (j < 0 || j >= list.length) return i;
+    return j;
+  };
+  // Page jumps step over a full window (12 rows), skipping section headers.
+  const pageJump = (i: number, dir: number) => {
+    const list = filtered();
+    if (!list.length) return i;
+    let j = i;
+    for (let n = 0; n < 12; n++) {
+      const next = stepSelectable(j, dir);
+      if (next === j) return j;
+      j = next;
+    }
+    return j;
+  };
+  const lastSelectable = () => {
+    const list = filtered();
+    for (let j = list.length - 1; j >= 0; j--) if (list[j] && !list[j].isHeader) return j;
+    return 0;
+  };
+  // Start on the first real row (not a header).
+  setIndex(firstSelectable());
+
+  const nav = kbNav();
+
+  useKeyboard(key => {
+    const ks = kbs.keyString(key);
+    if (kbs.is("modal_cancel", ks)) { closeModal(); if (props.onCancel) props.onCancel(); return; }
+    if (kbs.dialogIs("dialog_select_prev", ks)) { setIndex(i => stepSelectable(i, -1)); firePreview(); return; }
+    if (kbs.dialogIs("dialog_select_next", ks)) { setIndex(i => stepSelectable(i, 1)); firePreview(); return; }
+    if (kbs.dialogIs("dialog_select_page_up", ks)) { setIndex(i => pageJump(i, -1)); firePreview(); return; }
+    if (kbs.dialogIs("dialog_select_page_down", ks)) { setIndex(i => pageJump(i, 1)); firePreview(); return; }
+    if (kbs.dialogIs("dialog_select_home", ks)) { setIndex(firstSelectable()); firePreview(); return; }
+    if (kbs.dialogIs("dialog_select_end", ks)) { setIndex(lastSelectable()); firePreview(); return; }
+    if (kbs.dialogIs("dialog_select_submit", ks)) {
+      const opt = filtered()[index()];
+      if (!opt || opt.isHeader) return;
+      props.onPick(opt.value, opt);
+      return;
+    }
+    if (props.searchable) {
+      // Reset to 0, not firstSelectable(): setQ is batched, so firstSelectable()
+      // would read the STALE list and land past its end (dead arrows/blank row).
+      if (key.name === "backspace") { setQ(v => v.slice(0, -1)); setIndex(0); firePreview(); return; }
+      const s = key.sequence;
+      if (!key.ctrl && !key.meta && s && s.length <= 10 && s !== "\r" && s !== "\n") {
+        setQ(v => v + s);
+        setIndex(0);
+        firePreview();
+        return;
+      }
+    }
+  });
+
+  const scrollBy = (e: any) => {
+    const step = wheelStep(e, 1);
+    const dir = step < 0 ? -1 : 1;
+    let i = index();
+    for (let n = 0; n < Math.abs(step); n++) {
+      const j = stepSelectable(i, dir);
+      if (j === i) break;
+      i = j;
+    }
+    setIndex(i);
+  };
+  const clickRow = (i: number) => {
+    if (i !== index()) {
+      setIndex(i);
+      firePreview();
+    }
+    const o = filtered()[i];
+    if (o?.isHeader) return;
+    props.onPick(o?.value, o);
+  };
+  let winStart = 0;
+  const win = () => {
+    const total = filtered().length;
+    winStart = windowFor(index(), total, 12, winStart);
+    return { total, start: winStart, items: filtered().slice(winStart, winStart + 12) };
+  };
+  const rangeSub = () => {
+    const w = win();
+    if (w.total <= 12) return "";
+    return "  showing " + (w.start + 1) + "-" + Math.min(w.start + 12, w.total) + " of " + w.total;
+  };
+
+  return (
+    <ModalFrame title={props.title} subtitle={(props.searchable ? "search: " + (q() || "_") + rangeSub() : rangeSub())} footer={nav.prev + "/" + nav.next + " navigate  |  " + nav.submit + " select  |  wheel scroll  |  " + nav.cancel + " cancel" + (props.searchable ? "  |  type to search" : "")}>
+      <box onMouseScroll={scrollBy}>
+        {win().items.map((opt, i) => {
+          const abs = win().start + i;
+          if (opt.isHeader) return (
+            <text fg={ui.secondary} marginTop={i === 0 ? 0 : 1}>
+              {opt.header + ":"}
+            </text>
+          );
+          const active = abs === index();
+          return (
+            <box
+ flexDirection="row" paddingLeft={2}
+              // Hover moves the selection (live theme preview via onPreview);
+              // a click on the hovered row still selects+submits.
+              onMouseOver={() => { if (abs !== index()) { setIndex(abs); firePreview(); } }}
+              onMouseDown={() => setIndex(abs)}
+              onMouseUp={() => clickRow(abs)}
+            >
+              <text fg={active ? ui.primary : ui.fgDim}>
+                {(active ? " > " : "   ") + fit(opt.label, LABEL_MAX)}
+              </text>
+              {opt.recent ? <text fg={ui.fgMuted}> {" \u2713 recent"}</text> : null}
+              {opt.sub ? <text fg={ui.fgDim}>  {"(" + fit(opt.sub, SUB_MAX) + ")"}</text> : null}
+            </box>
+          );
+        })}
+      </box>
+    </ModalFrame>
+  );
+}
+
+export function InputModal(props: {
+  title: string;
+  placeholder: string;
+  onPick: (value: string) => void;
+  isKey?: boolean;
+  value?: string;
+  caretStart?: number;
+  onCancel?: () => void;
+}) {
+  const [val, setVal] = createSignal(props.value || "");
+  const [caret, setCaret] = createSignal(
+    typeof props.caretStart === "number" ? props.caretStart : (props.value || "").length
+  );
+  const masked = () => props.isKey ? "x".repeat(Math.max(0, val().length)) : val();
+  // Caret insertion: shown = left part + block cursor + right part.
+  const shown = () => {
+    const d = masked();
+    const c = Math.min(caret(), d.length);
+    return d.slice(0, c) + "\u258c" + d.slice(c);
+  };
+
+  useKeyboard(key => {
+    const ks = kbs.keyString(key);
+    if (kbs.is("modal_cancel", ks)) { closeModal(); if (props.onCancel) props.onCancel(); return; }
+    if (kbs.dialogIs("dialog_select_submit", ks)) { props.onPick(val()); return; }
+    if (key.name === "backspace") {
+      setVal(v => { const c = Math.min(caret(), v.length); return v.slice(0, Math.max(0, c - 1)) + v.slice(c); });
+      setCaret(c => Math.max(0, c - 1));
+      return;
+    }
+    if (key.name === "left") { setCaret(c => Math.max(0, c - 1)); return; }
+    if (key.name === "right") { setCaret(c => Math.min(val().length, c + 1)); return; }
+    if (key.name === "home") { setCaret(0); return; }
+    if (key.name === "end") { setCaret(val().length); return; }
+    const s = key.sequence;
+    if (!key.ctrl && !key.meta && s && s.length <= 10 && s !== "\r" && s !== "\n") {
+      setVal(v => { const c = Math.min(caret(), v.length); return v.slice(0, c) + s + v.slice(c); });
+      setCaret(c => Math.min(val().length, c) + s.length);
+    }
+  });
+
+  usePaste(event => {
+    const txt = new TextDecoder().decode((event as any).bytes || "").replace(/[\r\n]+/g, "");
+    if (txt) {
+      setVal(v => { const c = Math.min(caret(), v.length); return v.slice(0, c) + txt + v.slice(c); });
+      setCaret(c => Math.min(val().length, c) + txt.length);
+    }
+  });
+
+  return (
+    <ModalFrame title={props.title} subtitle={props.placeholder} footer={kbNav().submit + " confirm  |  \u2190\u2192 move  |  Ctrl+V paste  |  " + kbNav().cancel + " cancel"}>
+      <box border borderStyle="rounded" borderColor={ui.border} paddingX={1} marginTop={1}>
+        <text fg={ui.fg}>{shown()}</text>
+      </box>
+    </ModalFrame>
+  );
+}
+
+export function SettingsModal() {
+  useKeyboard(key => {
+    const ks = kbs.keyString(key);
+    if (kbs.is("modal_cancel", ks)) { closeModal(); }
+    if (key.name === "d" || key.name === "D") { setShowToolDetails(v => !v); persistUi(); }
+    if (key.name === "t" || key.name === "T") { setShowThinking(v => !v); persistUi(); }
+    if (key.name === "b" || key.name === "B") { setSidebarVisible(v => !v); persistUi(); }
+  });
+
+  return (
+    <ModalFrame title="Settings" footer={"d/t/b toggle  |  " + kbNav().cancel + " close"}>
+      <text fg={ui.fg}>{"[d] Tool details:   " + (showToolDetails() ? "on" : "off") + "  show tool output"}</text>
+      <text fg={ui.fg}>{"[t] Thinking:       " + (showThinking() ? "on" : "off") + "  show think time"}</text>
+      <text fg={ui.fg}>{"[b] Sidebar:        " + (sidebarVisible() ? "on" : "off") + "  todos + files"}</text>
+    </ModalFrame>
+  );
+}
+
+export function showHelpText() {
+  const lines = ["Loom Code -- Slash Commands", ""];
+  for (const c of SLASH_LIST) lines.push("  /" + c.cmd.padEnd(14) + "  " + c.desc + (c.args ? " (" + c.args + ")" : ""));
+  lines.push("", "  " + kbs.label("session_interrupt") + "=interrupt  " + kbs.label("app_exit") + "=exit  " + kbs.label("sidebar_toggle") + "=sidebar  " + kbs.label("command_list") + "=palette" +
+    (kbs.leaderKey() ? "  " + kbs.leaderKey() + "=leader" : ""));
+  lines.push("  Customize in ~/.loom/tui.json \u2014 edit that file directly, then relaunch.");
+  appendMessage({ role: "system", content: lines.join("\n") });
+}
+
+export function showProvidersText() {
+  const lines = ["Supported providers:", ""];
+  for (const p of PROVIDER_ORDER) {
+    const mods = PROVIDERS[p]?.models?.length || 0;
+    lines.push("  " + p.padEnd(12) + " " + String(mods).padEnd(3) + " models   " + (PROVIDER_LABELS[p] || p));
+  }
+  lines.push("", "/connect to pick interactively.");
+  appendMessage({ role: "system", content: lines.join("\n") });
+}
+
+// ── Agents (OpenCode-style primaries + subagents) ──
+export function showAgentsText() {
+  const { loadAgents } = require("../../core/agents.js");
+  const agents = loadAgents() as Record<string, any>;
+  const lines = ["AGENTS", ""];
+  for (const a of Object.values(agents)) {
+    const mode = a.mode === "primary" ? "primary" : "subagent";
+    const tools = a.tools && a.tools.length ? "[" + a.tools.join(" ") + "]" : "[*]";
+    const model = a.model ? " model=" + a.model : "";
+    lines.push("  " + a.id.padEnd(10) + " " + mode.padEnd(9) + " " + tools.padEnd(22) + model);
+    lines.push("      " + a.description);
+  }
+  lines.push(
+    "",
+    "  Automatic: the main agent calls the task tool whenever a subtask needs it.",
+    "  Manual: type @<agent> in the input (e.g. @explore find the bug).",
+    "  Config: ~/.loom/config.json \u2192 agents: { name: { mode, description, tools, model, prompt } }"
+  );
+  appendMessage({ role: "system", content: lines.join("\n") });
+}
+
+// ── MCP server / connector browser popup ──
+// Lists every configured server (seeded defaults + user-added) with on/off
+// state; Enter toggles, A opens the add flow, Esc closes.
+// `kind` decides which preset list the "A" flow offers: "mcp" (dev tools) or
+// "connector" (hosting/cloud services). Both share the same underlying
+// mcp-manager — a connector IS an MCP server, just surfaced separately.
+const MCP_FIT = 52;
+function mcpFit(s: string, n = MCP_FIT) {
+  const flat = String(s || "").replace(/\s+/g, " ").trim();
+  return flat.length <= n ? flat : flat.slice(0, Math.max(1, n - 1)) + "\u2026";
+}
+
+// Build a claude/opencode-style one-liner for a preset, with -e KEY=VALUE
+// entries (empty values = placeholders the user fills inline in the one-line
+// editor). $KEY args resolve at add time from the -e env.
+function presetAddLine(p: any, envValues?: Record<string, string>): string {
+  const parts: string[] = [];
+  for (const k of Object.keys(p.env || {})) parts.push("-e", k + "=" + (envValues ? (envValues[k] || "") : ""));
+  parts.push(p.id, "--");
+  if (p.command) parts.push(p.command, ...(p.args || []));
+  else parts.push("npx", "-y", p.package, ...(p.args || []));
+  return parts.join(" ");
+}
+
+// The add flow: pick a preset (or Custom). Presets that need secrets walk a
+// guided key-entry dialog (one masked field per prompt, pasted/typed, then the
+// one-liner is built automatically); everything else opens the one-line
+// editor in claude/opencode syntax — `[-e KEY=V] <name> [--] <command> [args...]`.
+function openPresetPicker(presets: any[], kind: "mcp" | "connector") {
+  const addLabel = kind === "connector" ? "Add connector" : "Add MCP server";
+  const backType = kind === "connector" ? "connectors" : "mcp";
+
+  // Build the server from collected env + optional args and land it; reopen
+  // the browser on success, toast the error otherwise.
+  const submitLine = (line: string, reopenOnError: boolean) => {
+    const msg = plugin.mcpAddLineCmd(line);
+    if (msg.startsWith("Added")) {
+      showToast(msg, "ok");
+      closeModal();
+      setTimeout(function() { openModal({ type: backType as any }); }, 10);
+    } else {
+      showToast(String(msg).slice(0, 80), "error");
+      if (reopenOnError) {
+        closeModal();
+        setTimeout(function() { openModal({ type: backType as any }); }, 10);
+      }
+    }
+  };
+
+  const guidedAdd = (preset: any) => {
+    const prompts: any[] = preset.prompts || [];
+    const env: Record<string, string> = {};
+    const askPrompt = (i: number) => {
+      if (i >= prompts.length) {
+        const oap = preset.optionalArgsPrompt;
+        if (!oap) { submitLine(presetAddLine(preset, env), true); return; }
+        // Optional extra arg (e.g. --project-ref): Enter alone skips it.
+        openModal({
+          type: "input",
+          title: addLabel + " \u00B7 " + preset.label,
+          placeholder: oap.label,
+          onCancel: function() { submitLine(presetAddLine(preset, env), true); },
+          onPick: function(v: string) {
+            const t = String(v || "").trim();
+            const line = presetAddLine(preset, env) + (t ? " " + (oap.flag ? oap.flag + " " : "") + t : "");
+            submitLine(line, true);
+          },
+        });
+        return;
+      }
+      const pr = prompts[i];
+      openModal({
+        type: "input",
+        title: addLabel + " \u00B7 " + preset.label + "  (" + (i + 1) + "/" + prompts.length + ")",
+        placeholder: pr.label,
+        isKey: pr.mask !== false,
+        onCancel: function() { closeModal(); setTimeout(function() { openModal({ type: backType as any }); }, 10); },
+        onPick: function(val: string) {
+          const t = String(val || "").trim();
+          if (!t) { showToast(pr.key + " is required", "error"); askPrompt(i); return; }
+          // A value with whitespace would break the generated `-e KEY=value`
+          // token in the one-liner — reject it and re-prompt (covers every
+          // credential prompt in the loop, including multi-credential presets).
+          if (/\s/.test(t)) { showToast(pr.key + " must not contain spaces", "error"); askPrompt(i); return; }
+          env[pr.key] = t;
+          askPrompt(i + 1);
+        },
+      });
+    };
+
+    closeModal();
+    if (!prompts.length) {
+      openLine(presetAddLine(preset));
+      return;
+    }
+    askPrompt(0);
+  };
+const openLine = function(line: string) {
+    openModal({
+      type: "input",
+      title: addLabel + "  \u00B7  one line",
+      placeholder: "e.g. -e KEY=V " + (kind === "connector" ? "railway" : "stm32") + " -- <command> <args>",
+      value: line,
+      // Caret starts right after the last "=" so a preset's first -e KEY=
+      // placeholder is one keystroke away; otherwise at the end.
+      caretStart: line ? line.lastIndexOf("=") + 1 : 0,
+      onCancel: function() { closeModal(); setTimeout(function() { openModal({ type: backType as any }); }, 10); },
+      onPick: function(line2: string) {
+        const msg = plugin.mcpAddLineCmd(line2);
+        if (msg.startsWith("Added")) {
+          showToast(msg, "ok");
+          closeModal();
+          setTimeout(function() { openModal({ type: backType as any }); }, 10);
+        } else {
+          showToast(String(msg).slice(0, 80), "error");
+          openLine(line2); // keep the text so the user can fix it
+        }
+      },
+    });
+  };
+  const picker = presets.map(p => ({
+    label: p.label,
+    sub: p.prompts.length ? "needs a token" : "no key needed",
+    value: p.id,
+  })).concat([{ label: "Custom…", sub: "name + command + args + env", value: "__custom__" }]);
+  openModal({
+    type: "select", title: addLabel,
+    searchable: false,
+    options: picker,
+    onPick: function(val: any) {
+      const preset = val === "__custom__" ? undefined : presets.find((p: any) => p.id === val);
+      if (!preset) { closeModal(); openLine(""); return; }
+      if ((preset.prompts || []).length) { guidedAdd(preset); return; }
+      closeModal();
+      openLine(presetAddLine(preset));
+    },
+  });
+}
+
+function ServerBrowser(props: { kind: "mcp" | "connector" }) {
+  const kind = props.kind;
+  const title = kind === "connector" ? "Connectors" : "MCP Servers";
+  const presets = kind === "connector" ? CONNECTOR_PRESETS : MCP_PRESETS;
+  const { listServers, toggleServer } = require("../../mcp/mcp-manager.js");
+  const [servers, setServers] = createSignal(listServers());
+  const [sel, setSel] = createSignal(0);
+
+  const refresh = () => setServers(listServers());
+
+  useKeyboard(key => {
+    const ks = kbs.keyString(key);
+    if (kbs.is("modal_cancel", ks)) { closeModal(); return; }
+    if (kbs.dialogIs("dialog_select_prev", ks)) { setSel(i => Math.max(0, i - 1)); return; }
+    if (kbs.dialogIs("dialog_select_next", ks)) { setSel(i => Math.min(servers().length - 1, i + 1)); return; }
+    if (key.name === "a" || key.name === "A") { openPresetPicker(presets, kind); return; }
+    if (kbs.dialogIs("dialog_select_submit", ks)) {
+      const s = servers()[sel()];
+      if (!s) return;
+      const res = toggleServer(s.name);
+      if (res && res.error) { showToast(String(res.error), "error"); return; }
+      showToast("MCP " + s.name + ": " + (s.enabled ? "off" : "on"), "ok");
+      refresh();
+      return;
+    }
+  });
+
+  const scrollBy = (e: any) => { setSel(i => Math.max(0, Math.min(servers().length - 1, i + wheelStep(e, 1)))); };
+  let winStart = 0;
+  const win = () => {
+    const total = servers().length;
+    winStart = windowFor(sel(), total, 12, winStart);
+    return { total, start: winStart, items: servers().slice(winStart, winStart + 12) };
+  };
+  const rangeSub = () => {
+    const w = win();
+    return w.total > 12 ? "  showing " + (w.start + 1) + "-" + Math.min(w.start + 12, w.total) + " of " + w.total : "";
+  };
+  // Name column width = longest name + "  [on] "/"  [off] " prefix (7-8 chars),
+  // capped so the command column keeps ~28 chars. Without an explicit width the
+  // name text yoga-shrinks to zero width when the command is long.
+  const nameW = () => Math.min(30, Math.max(18, ...servers().map(s => String(s.name).length + 9)));
+  // Command column budget: modal inner ~64 chars minus name column minus the
+  // "→  " arrow — any longer and the text pixel-punches past the right border.
+  const cmdW = () => Math.max(24, 62 - nameW());
+
+  return (
+    <ModalFrame title={title} subtitle={"Enter toggles a server on/off" + rangeSub()} footer={kbNav().submit + " toggle  |  A add " + (kind === "connector" ? "connector" : "server") + "  |  wheel scroll  |  " + kbNav().cancel + " close"}>
+      <box onMouseScroll={scrollBy} flexDirection="column" flexShrink={0}>
+        {win().items.map((s, i) => {
+          const abs = win().start + i;
+          return (
+            <box
+ flexDirection="row" paddingY={0} height={1} flexShrink={0}
+              onMouseDown={() => setSel(abs)}
+              onMouseUp={() => { if (abs === sel()) { const r = toggleServer(s.name); if (!r || !r.error) refresh(); } }}
+            >
+              <text fg={abs === sel() ? ui.primary : ui.fgDim} width={nameW()} height={1} flexShrink={0}>
+                {"  " + (s.enabled ? "[on] " : "[off] ") + s.name}
+              </text>
+              <text fg={ui.fgMuted} height={1} flexGrow={1}>{"\u2192  " + mcpFit(s.command + " " + (s.args || []).join(" "), cmdW())}</text>
+            </box>
+          );
+        })}
+      </box>
+    </ModalFrame>
+  );
+}
+
+export function McpModal() {
+  return <ServerBrowser kind="mcp" />;
+}
+
+export function ConnectorsModal() {
+  return <ServerBrowser kind="connector" />;
+}
+
+// Palette modal (ctrl+p) - proper popup window
+export function PaletteModal(props: { onPick: (cmd: string) => void }) {
+  const items = SLASH_LIST.map(c => ({ label: "/" + c.cmd, value: c.cmd, sub: c.desc }));
+  const [sel, setSel] = createSignal(0);
+  const [q, setQ] = createSignal("");
+
+  const filtered = () => {
+    const query = q().toLowerCase();
+    return query ? items.filter(x => x.value.startsWith(query)) : items;
+  };
+
+  useKeyboard(key => {
+    const k = key.name;
+    const ks = kbs.keyString(key);
+    if (kbs.is("modal_cancel", ks)) { closeModal(); return; }
+    if (key.name === "backspace") { setQ(v => v.slice(0, -1)); setSel(0); return; }
+    if (kbs.dialogIs("dialog_select_prev", ks)) { setSel(i => Math.max(0, i - 1)); return; }
+    if (kbs.dialogIs("dialog_select_next", ks)) { setSel(i => Math.min(filtered().length - 1, i + 1)); return; }
+    if (kbs.dialogIs("dialog_select_submit", ks)) {
+      const f = filtered();
+      const i = sel();
+      if (f.length > i) {
+        const cmd = "/" + f[i].value;
+        props.onPick(cmd);
+        closeModal();
+      }
+      return;
+    }
+    if (!key.ctrl && !key.meta && key.sequence && key.sequence.length <= 3 && ["\r","\n"].indexOf(key.sequence) === -1) {
+      setQ(v => v + key.sequence);
+      setSel(0);
+    }
+  });
+
+  const scrollBy = (e: any) => { setSel(i => Math.max(0, Math.min(filtered().length - 1, i + wheelStep(e, 1)))); };
+  const clickRow = (i: number) => {
+    if (i !== sel()) return;
+    const f = filtered();
+    if (f.length > i) {
+      props.onPick("/" + f[i].value);
+      closeModal();
+    }
+  };
+  let winStart = 0;
+  const win = () => {
+    const f = filtered();
+    winStart = windowFor(sel(), f.length, 12, winStart);
+    return { start: winStart, items: f.slice(winStart, winStart + 12) };
+  };
+
+  return (
+    <ModalFrame title="Command Palette" subtitle={"Type to filter (" + filtered().length + " commands)"}>
+      <box onMouseScroll={scrollBy}>
+        {win().items.map((it, i) => {
+          const abs = win().start + i;
+          return (
+            <box
+ flexDirection="row" paddingY={0}
+              onMouseDown={() => setSel(abs)}
+              onMouseUp={() => clickRow(abs)}
+            >
+              <text fg={abs === sel() ? ui.primary : ui.fgDim}>
+                {abs === sel() ? "> " : "   "}{it.label.split("/")[1] || it.label}
+              </text>
+            </box>
+          );
+        })}
+      </box>
+    </ModalFrame>
+  );
+}
+
+export function openCustomModelId() {
+  const pv = loadConfig().provider || "nvidia";
+  openModal({
+    type: "input", title: "Custom model ID for " + (PROVIDER_LABELS[pv] || pv),
+    placeholder: "e.g. deepseek-ai/deepseek-v4-flash",
+    onPick(val) {
+      if (!val.trim()) { closeModal(); return; }
+      const c = loadConfig(); c.provider = pv; c.model = c.model || {}; c.model[pv] = val.trim();
+      saveConfig(c); refreshProviderState(); closeModal();
+      showToast("Model: " + pv + " -> " + val.trim(), "ok");
+    },
+  });
+}
+
+/**
+ * Graph Modal — full-screen view of the memory graph.
+ * The graph data is built synchronously by openGraphModal() (straight from
+ * LOOM.md + .loom/graph/nodes/*.md) and passed in as props — no async
+ * loading inside the modal. Renders the ## / ### hierarchy as an ASCII
+ * tree; select a node (↑/↓) and peek at its body (Enter). ESC closes.
+ * NOTE: glyphs are ASCII-only (|, +-, >) — Windows legacy consoles
+ * (CP437) can't render box-drawing or Unicode arrows.
+ */
+export function GraphModal(props: { graph: any; err: string | null }) {
+  const [sel, setSel] = createSignal(0);
+  const [open, setOpen] = createSignal<number | null>(null);
+
+  // Flatten the node graph into tree-walk order: top-level nodes (no
+  // 'child' parent) followed by their ### children, recursively.
+  const buildFlat = (g: any): any[] => {
+    const nodes = g.nodes || [];
+    const edges = g.edges || [];
+    const byId = new Map<string, any>();
+    for (const n of nodes) byId.set(n.id, n);
+    const childMap = new Map<string, string[]>();
+    const hasParent = new Set<string>();
+    for (const e of edges) {
+      if (e.type !== 'child') continue;
+      if (!childMap.has(e.source)) childMap.set(e.source, []);
+      childMap.get(e.source)!.push(e.target);
+      hasParent.add(e.target);
+    }
+    const flat: any[] = [];
+    const seen = new Set<string>();
+    const walk = (id: string, depth: number) => {
+      if (seen.has(id)) return;
+      seen.add(id);
+      const n = byId.get(id);
+      if (!n) return;
+      flat.push({ node: n, depth });
+      for (const k of childMap.get(id) || []) walk(k, depth + 1);
+    };
+    for (const n of nodes) if (!hasParent.has(n.id)) walk(n.id, 0);
+    for (const n of nodes) if (!seen.has(n.id)) walk(n.id, 0); // orphans
+    return flat;
+  };
+
+  // Build the view; tracks the line of the selected node for viewport follow.
+  let selLine = 0;
+  const content = () => {
+    if (props.err) return 'Error: ' + props.err;
+    const g = props.graph;
+    if (!g) return 'No memory graph found - is there a LOOM.md?';
+    const nodes = g.nodes || [];
+    const edges = g.edges || [];
+    const refs = edges.filter((e: any) => e.type !== 'child');
+    const flat = buildFlat(g);
+    const lines: string[] = [];
+    lines.push('LOOM Memory Graph - ' + nodes.length + ' nodes | ' + edges.length + ' links (from LOOM.md)');
+    lines.push('');
+    let idx = 0;
+    for (const { node, depth } of flat) {
+      const cur = idx === sel();
+      if (cur) selLine = lines.length;
+      const marker = cur ? '>' : ' ';
+      const indent = depth === 0 ? '  ' : '    ' + '  '.repeat(depth - 1) + '+- ';
+      const tag = node.tags && node.tags.length ? '  #' + node.tags.join(' #') : '';
+      lines.push(marker + indent + node.title + tag);
+      if (cur && open() === idx && node.body) {
+        const bl = String(node.body).split('\n').slice(0, 4);
+        for (const l of bl) lines.push('      ' + l);
+      }
+      idx++;
+    }
+    if (refs.length) {
+      lines.push('');
+      lines.push('  Links:');
+      for (const e of refs) lines.push('    ' + e.source + ' -> ' + e.target);
+    }
+    lines.push('');
+    lines.push('  up/down select | Enter toggle body | PgUp/PgDn | ESC close');
+    return lines.join('\n');
+  };
+
+  const count = () => {
+    const g = props.graph;
+    return g && g.nodes ? g.nodes.length : 1;
+  };
+  useKeyboard(key => {
+    const ks = kbs.keyString(key);
+    if (kbs.is("modal_cancel", ks)) { closeModal(); return; }
+    if (kbs.dialogIs("dialog_select_prev", ks)) { setSel(s => Math.max(0, s - 1)); return; }
+    if (kbs.dialogIs("dialog_select_next", ks)) { setSel(s => Math.min(count() - 1, s + 1)); return; }
+    if (kbs.dialogIs("dialog_select_submit", ks)) { setOpen(o => (o === sel() ? null : sel())); return; }
+    if (kbs.dialogIs("dialog_select_page_up", ks)) { setSel(s => Math.max(0, s - 10)); return; }
+    if (kbs.dialogIs("dialog_select_page_down", ks)) { setSel(s => Math.min(count() - 1, s + 10)); return; }
+    if (kbs.dialogIs("dialog_select_home", ks)) { setSel(0); return; }
+    if (kbs.dialogIs("dialog_select_end", ks)) { setSel(count() - 1); return; }
+  });
+
+  // Reactive chain: content() reads sel()/open() and stamps selLine while
+  // computing, so navigation must recompute the view inside accessors (a
+  // one-time const would freeze the tree at creation). lines() is evaluated
+  // before selLine is read so the stamped value is fresh.
+  const lines = () => content().split('\n');
+  const visible = 34;
+  const start = () => Math.max(0, Math.min(lines().length - visible, selLine - 2));
+  const view = () => lines().slice(start(), start() + visible).join('\n');
+
+  return (
+    <ModalFrame title="Memory Graph" subtitle={"up/down select | Enter details | ESC close"} footer={""}>
+      <box flexDirection="column" paddingX={2} paddingY={1}>
+        <text fg={ui.fg}>{view()}</text>
+      </box>
+    </ModalFrame>
+  );
+}
+
+/**
+ * Opens the graph modal. Builds the graph synchronously from LOOM.md so the
+ * modal renders immediately (no async load, no file picking).
+ */
+export function openGraphModal() {
+  let graph: any = null;
+  let err: string | null = null;
+  try {
+    const { buildGraph } = require("../../core/graph.js");
+    graph = buildGraph(process.cwd());
+  } catch (e) {
+    err = String((e as any)?.message || e);
+  }
+  openModal({ type: "graph", graph, graphError: err });
+}