@pi-unipi/mcp 0.1.0 → 0.1.7

package/src/tui/add-overlay.ts

@@ -1,9 +1,13 @@
 /**
  * @pi-unipi/mcp — Add server overlay TUI
  *
- * Split-pane overlay for adding MCP servers:
- * Left: browsable/searchable catalog list
- * Right: JSON config editor for selected server
+ * Vim-modal browser for the MCP catalog with split-pane editor.
+ *
+ * Modes:
+ *   normal  — j/k navigate, Enter select, l/Tab → editor, / search, gg/G top/bottom,
+ *             Ctrl+d/u half-page, Esc/q close
+ *   search  — typing edits query, Enter accept, Esc cancel
+ *   editor  — JSON editor active, Ctrl+S save, Esc/h back to browse
  */
 
 import {
@@ -22,57 +26,81 @@ import {
   loadMetadata,
   saveMetadata,
   getGlobalConfigDir,
+  getProjectConfigDir,
 } from "../config/manager.js";
-import { validateMcpConfig, createServerTemplate, DEFAULT_MCP_CONFIG, DEFAULT_METADATA } from "../config/schema.js";
+import { validateMcpConfig, DEFAULT_MCP_CONFIG, DEFAULT_METADATA } from "../config/schema.js";
+
+type Mode = "normal" | "search" | "editor";
+type StatusKind = "info" | "success" | "warn" | "error";
 
-/** State for the add overlay */
 interface AddOverlayState {
-  mode: "browse" | "custom";
+  mode: Mode;
   searchQuery: string;
+  pendingSearch: string;
   filteredServers: CatalogEntry[];
   allServers: CatalogEntry[];
   selectedIndex: number;
+  scrollOffset: number;
   editorContent: string;
-  focusPane: "browse" | "editor";
+  /** ID of the catalog server whose template is currently in the editor. */
+  loadedServerId: string | null;
   validationError: string | null;
   scope: "global" | "project";
   saved: boolean;
+  pendingG: boolean;
+  status: string;
+  statusKind: StatusKind;
 }
 
-/**
- * Generate a pre-filled JSON config template from a catalog entry.
- */
 function generateConfigTemplate(server: CatalogEntry): string {
-  const name = server.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
-
+  const slug = server.name.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
   const config: Record<string, unknown> = {
     mcpServers: {
-      [name]: {
+      [slug]: {
         command: server.install?.command ?? "npx",
-        args: server.install?.args ?? ["-y", `@modelcontextprotocol/server-${name}`],
+        args: server.install?.args ?? ["-y", `@modelcontextprotocol/server-${slug}`],
         env: {},
       },
     },
   };
-
-  // Pre-fill env vars with placeholders
   if (server.install?.envVars) {
     const env: Record<string, string> = {};
-    for (const v of server.install.envVars) {
-      env[v] = "";
-    }
-    (config.mcpServers as any)[name].env = env;
+    for (const v of server.install.envVars) env[v] = "";
+    (config.mcpServers as any)[slug].env = env;
   }
-
   return JSON.stringify(config, null, 2);
 }
 
+function padVisible(content: string, targetWidth: number): string {
+  const pad = Math.max(0, targetWidth - visibleWidth(content));
+  return content + " ".repeat(pad);
+}
+
 /**
- * Render the MCP add overlay.
- *
- * Returns a callback compatible with ctx.ui.custom():
- * (tui, theme, kb, done) => { render, invalidate, handleInput }
+ * Strip characters that pi-tui's visibleWidth and the user's terminal may
+ * disagree on (RGI emoji, variation selectors, ZWJ, regional indicators).
+ * Keeps printable ASCII and standard Latin/box-drawing chars; replaces
+ * problem chars with a single * so widths stay deterministic.
+ */
+function widthSafe(s: string): string {
+  return s
+    .replace(/[\u200D\uFE00-\uFE0F\uFEFF]/g, "")
+    .replace(/[\u2600-\u27BF]/g, "*")
+    .replace(/[\u{1F000}-\u{1FFFF}]/gu, "*")
+    .replace(/[\u{1F1E6}-\u{1F1FF}]/gu, "*");
+}
+
+/**
+ * Wrap text in an OSC 8 hyperlink escape. Modern terminals (iTerm2,
+ * kitty, WezTerm, Windows Terminal, GNOME Terminal, Alacritty-with-osc8)
+ * make the text Ctrl/Cmd-clickable; other terminals ignore the escapes.
+ * The ST used here is BEL (\x07) since it has wider support than ESC\.
  */
+function hyperlink(url: string, text: string): string {
+  if (!url) return text;
+  return `\x1b]8;;${url}\x07${text}\x1b]8;;\x07`;
+}
+
 export function renderMcpAddOverlay(params?: {
   scope?: "global" | "project";
   onComplete?: () => void;
@@ -85,21 +113,24 @@ export function renderMcpAddOverlay(params?: {
   ) => {
     const scope = params?.scope ?? "global";
 
-    // State
     const state: AddOverlayState = {
-      mode: "browse",
+      mode: "normal",
       searchQuery: "",
+      pendingSearch: "",
       filteredServers: [],
       allServers: [],
       selectedIndex: 0,
+      scrollOffset: 0,
       editorContent: "{}",
-      focusPane: "browse",
+      loadedServerId: null,
       validationError: null,
       scope,
       saved: false,
+      pendingG: false,
+      status: "",
+      statusKind: "info",
     };
 
-    // Load catalog
     let catalog: CatalogData;
     try {
       catalog = loadCatalog();
@@ -107,11 +138,8 @@ export function renderMcpAddOverlay(params?: {
       state.filteredServers = catalog.servers;
     } catch {
       catalog = { lastUpdated: "", source: "", totalServers: 0, servers: [] };
-      state.allServers = [];
-      state.filteredServers = [];
     }
 
-    // Editor theme
     const editorTheme: EditorTheme = {
       borderColor: (s: any) => theme.fg("accent", s),
       selectList: {
@@ -124,15 +152,43 @@ export function renderMcpAddOverlay(params?: {
     };
     const editor = new Editor(tui, editorTheme);
     editor.setText(state.editorContent);
+    // Enter must insert a newline, not submit (which clears the editor).
+    // Ctrl+S handles saving; no submit path needed.
+    (editor as any).disableSubmit = true;
 
     let cachedLines: string[] | undefined;
+    let lastListHeight = 12;
 
     function refresh() {
       cachedLines = undefined;
       tui.requestRender();
     }
 
-    function searchServers(query: string) {
+    function setStatus(msg: string, kind: StatusKind = "info", ttlMs = 2000) {
+      state.status = msg;
+      state.statusKind = kind;
+      setTimeout(() => {
+        if (state.status === msg) {
+          state.status = "";
+          refresh();
+        }
+      }, ttlMs);
+    }
+
+    function ensureVisible() {
+      const h = lastListHeight;
+      if (state.selectedIndex < state.scrollOffset) {
+        state.scrollOffset = state.selectedIndex;
+      } else if (state.selectedIndex >= state.scrollOffset + h) {
+        state.scrollOffset = state.selectedIndex - h + 1;
+      }
+      const max = Math.max(0, state.filteredServers.length - h);
+      if (state.scrollOffset > max) state.scrollOffset = max;
+      if (state.scrollOffset < 0) state.scrollOffset = 0;
+    }
+
+    function applySearch(query: string) {
+      state.searchQuery = query;
       if (!query.trim()) {
         state.filteredServers = state.allServers;
       } else {
@@ -145,17 +201,49 @@ export function renderMcpAddOverlay(params?: {
         );
       }
       state.selectedIndex = 0;
+      state.scrollOffset = 0;
     }
 
-    function selectServer(index: number) {
-      if (index < 0 || index >= state.filteredServers.length) return;
-      state.selectedIndex = index;
-      const server = state.filteredServers[index];
+    /**
+     * Load the catalog template for the currently selected server.
+     * Skipped when the same server's template is already loaded so the
+     * user's in-progress edits are never silently wiped.
+     */
+    function loadSelectedIntoEditor(opts: { force?: boolean } = {}) {
+      if (state.selectedIndex < 0 || state.selectedIndex >= state.filteredServers.length) return;
+      const server = state.filteredServers[state.selectedIndex];
+      if (!opts.force && state.loadedServerId === server.id) return;
       state.editorContent = generateConfigTemplate(server);
       editor.setText(state.editorContent);
+      state.loadedServerId = server.id;
       state.validationError = null;
-      state.focusPane = "editor";
-      state.mode = "browse";
+      setStatus(`Loaded template for ${widthSafe(server.name)}`, "info", 1500);
+    }
+
+    function prettifyEditor() {
+      try {
+        const parsed = JSON.parse(state.editorContent);
+        const pretty = JSON.stringify(parsed, null, 2);
+        if (pretty !== state.editorContent) {
+          state.editorContent = pretty;
+          editor.setText(pretty);
+          setStatus("✓ Formatted", "success", 1500);
+        } else {
+          setStatus("Already formatted", "info", 1200);
+        }
+      } catch (err) {
+        setStatus(
+          `Cannot prettify: ${err instanceof Error ? err.message : "invalid JSON"}`,
+          "error",
+          2500,
+        );
+      }
+    }
+
+    function getConfigDir(): string {
+      return state.scope === "project"
+        ? getProjectConfigDir(process.cwd())
+        : getGlobalConfigDir();
     }
 
     function validateAndSave(): boolean {
@@ -166,28 +254,19 @@ export function renderMcpAddOverlay(params?: {
           state.validationError = validation.errors[0];
           return false;
         }
-
-        // Determine target directory
-        const configDir = getGlobalConfigDir();
-
-        // Load existing config and merge — handle corrupt existing config
+        const configDir = getConfigDir();
         let existing: McpConfig;
         try {
           existing = loadMcpConfig(configDir);
         } catch {
-          // Existing config is corrupt — start fresh
           existing = { ...DEFAULT_MCP_CONFIG };
         }
-
         const newServers = parsed.mcpServers ?? {};
-
         for (const [name, def] of Object.entries(newServers)) {
           existing.mcpServers[name] = def as any;
         }
-
         saveMcpConfig(configDir, existing);
 
-        // Update metadata
         let meta: McpMetadata;
         try {
           meta = loadMetadata(configDir);
@@ -195,10 +274,7 @@ export function renderMcpAddOverlay(params?: {
           meta = { ...DEFAULT_METADATA, servers: {}, sync: { ...DEFAULT_METADATA.sync } };
         }
         for (const name of Object.keys(newServers)) {
-          meta.servers[name] = {
-            enabled: true,
-            addedAt: new Date().toISOString(),
-          };
+          meta.servers[name] = { enabled: true, addedAt: new Date().toISOString() };
         }
         saveMetadata(configDir, meta);
 
@@ -206,82 +282,229 @@ export function renderMcpAddOverlay(params?: {
         state.validationError = null;
         return true;
       } catch (err) {
-        state.validationError =
-          err instanceof Error ? err.message : "Invalid JSON";
+        state.validationError = err instanceof Error ? err.message : "Invalid JSON";
         return false;
       }
     }
 
-    function handleInput(data: string) {
-      // Editor pane focused: delegate to editor
-      if (state.focusPane === "editor") {
-        if (matchesKey(data, Key.escape)) {
-          // Cancel editing, go back to browse
-          state.focusPane = "browse";
-          state.validationError = null;
+    // ─── Input handling ───────────────────────────────────────────────
+
+    function handleEditorMode(data: string) {
+      if (matchesKey(data, Key.escape)) {
+        state.mode = "normal";
+        state.validationError = null;
+        refresh();
+        return;
+      }
+      // Ctrl+S — save config to disk
+      if (data === "\x13") {
+        if (validateAndSave()) {
+          const names = (() => {
+            try {
+              return Object.keys(JSON.parse(state.editorContent).mcpServers ?? {});
+            } catch {
+              return [];
+            }
+          })();
+          const label = names[0] ?? "server";
+          setStatus(`✓ Saved "${label}"! Closing…`, "success", 4000);
+          params?.onComplete?.();
+          state.mode = "normal";
+          refresh();
+          setTimeout(() => done({ saved: true }), 1600);
+        } else {
+          setStatus(state.validationError ?? "Invalid config", "error", 3000);
           refresh();
-          return;
         }
+        return;
+      }
+      // Ctrl+P — prettify JSON
+      if (data === "\x10") {
+        prettifyEditor();
+        refresh();
+        return;
+      }
+      // Delegate everything else to the editor
+      editor.handleInput(data);
+      state.editorContent = editor.getText();
+      refresh();
+    }
 
-        // Ctrl+S or Enter in editor: validate and save
-        if (
-          (data === "\x13" || data === "\r") &&
-          state.editorContent.trim() !== "{}"
-        ) {
-          if (validateAndSave()) {
-            done({ saved: true });
-            params?.onComplete?.();
-          } else {
-            refresh();
-          }
-          return;
+    function handleSearchMode(data: string) {
+      if (matchesKey(data, Key.escape)) {
+        // Cancel search — restore previous query
+        applySearch(state.searchQuery);
+        state.pendingSearch = state.searchQuery;
+        state.mode = "normal";
+        refresh();
+        return;
+      }
+      if (data === "\r" || data === "\n") {
+        // Accept search, load selected server into editor
+        applySearch(state.pendingSearch);
+        state.mode = "normal";
+        loadSelectedIntoEditor();
+        state.mode = "editor";
+        refresh();
+        return;
+      }
+      // Arrow keys + j/k navigate list while searching
+      if (matchesKey(data, Key.down) || data === "\x1b[B" || data === "j") {
+        if (state.selectedIndex < state.filteredServers.length - 1) {
+          state.selectedIndex++;
+          ensureVisible();
+          refresh();
         }
-
-        // Delegate to editor
-        editor.handleInput(data);
-        state.editorContent = editor.getText();
+        return;
+      }
+      if (matchesKey(data, Key.up) || data === "\x1b[A" || data === "k") {
+        if (state.selectedIndex > 0) {
+          state.selectedIndex--;
+          ensureVisible();
+          refresh();
+        }
+        return;
+      }
+      // PgUp/PgDn also work in search
+      if (data === "\x1b[6~") {
+        state.selectedIndex = Math.min(state.filteredServers.length - 1, state.selectedIndex + lastListHeight);
+        ensureVisible();
+        refresh();
+        return;
+      }
+      if (data === "\x1b[5~") {
+        state.selectedIndex = Math.max(0, state.selectedIndex - lastListHeight);
+        ensureVisible();
+        refresh();
+        return;
+      }
+      if (data === "\x7f" || data === "\b") {
+        if (state.pendingSearch.length > 0) {
+          state.pendingSearch = state.pendingSearch.slice(0, -1);
+          applySearch(state.pendingSearch);
+          refresh();
+        }
+        return;
+      }
+      // Regular printable input
+      if (data.length === 1 && data >= " ") {
+        state.pendingSearch += data;
+        applySearch(state.pendingSearch);
         refresh();
         return;
       }
+    }
 
-      // Browse pane focused
-      if (matchesKey(data, Key.escape)) {
+    function handleNormalMode(data: string) {
+      // Close
+      if (matchesKey(data, Key.escape) || data === "q") {
         done(null);
         return;
       }
 
-      // Navigation
-      if (matchesKey(data, Key.up)) {
+      const listLen = state.filteredServers.length;
+      const half = Math.max(1, Math.floor(lastListHeight / 2));
+
+      // Movement
+      if (matchesKey(data, Key.down) || data === "j") {
+        if (state.selectedIndex < listLen - 1) {
+          state.selectedIndex++;
+          ensureVisible();
+          refresh();
+        }
+        state.pendingG = false;
+        return;
+      }
+      if (matchesKey(data, Key.up) || data === "k") {
         if (state.selectedIndex > 0) {
           state.selectedIndex--;
+          ensureVisible();
           refresh();
         }
+        state.pendingG = false;
         return;
       }
-
-      if (matchesKey(data, Key.down)) {
-        if (state.selectedIndex < state.filteredServers.length - 1) {
-          state.selectedIndex++;
+      // gg → top, G → bottom
+      if (data === "g") {
+        if (state.pendingG) {
+          state.selectedIndex = 0;
+          state.scrollOffset = 0;
+          state.pendingG = false;
           refresh();
+        } else {
+          state.pendingG = true;
         }
         return;
       }
+      if (data === "G") {
+        state.selectedIndex = Math.max(0, listLen - 1);
+        ensureVisible();
+        state.pendingG = false;
+        refresh();
+        return;
+      }
+      // Ctrl+d / Ctrl+u — half-page
+      if (data === "\x04") {
+        state.selectedIndex = Math.min(listLen - 1, state.selectedIndex + half);
+        ensureVisible();
+        state.pendingG = false;
+        refresh();
+        return;
+      }
+      if (data === "\x15") {
+        state.selectedIndex = Math.max(0, state.selectedIndex - half);
+        ensureVisible();
+        state.pendingG = false;
+        refresh();
+        return;
+      }
+      // PageDown / PageUp
+      if (data === "\x1b[6~") {
+        state.selectedIndex = Math.min(listLen - 1, state.selectedIndex + lastListHeight);
+        ensureVisible();
+        refresh();
+        return;
+      }
+      if (data === "\x1b[5~") {
+        state.selectedIndex = Math.max(0, state.selectedIndex - lastListHeight);
+        ensureVisible();
+        refresh();
+        return;
+      }
 
-      // Enter: select server and move to editor
-      if (data === "\r" || data === "\n") {
-        selectServer(state.selectedIndex);
+      state.pendingG = false;
+
+      // Search
+      if (data === "/") {
+        state.mode = "search";
+        state.pendingSearch = state.searchQuery;
         refresh();
         return;
       }
 
-      // Tab: toggle focus between panes
-      if (data === "\t") {
-        state.focusPane = state.focusPane === "browse" ? "editor" : "browse";
+      // Enter → load template (if new server) + switch to editor.
+      // Will NOT wipe existing edits when re-entering editor on the same server.
+      if (data === "\r" || data === "\n") {
+        loadSelectedIntoEditor();
+        state.mode = "editor";
+        refresh();
+        return;
+      }
+      // l / Tab → switch focus to editor, never overwrite content.
+      if (data === "l" || data === "\t") {
+        if (state.editorContent.trim() === "{}") loadSelectedIntoEditor();
+        state.mode = "editor";
+        refresh();
+        return;
+      }
+      // r → force reload template for the currently selected server.
+      if (data === "r") {
+        loadSelectedIntoEditor({ force: true });
         refresh();
         return;
       }
 
-      // 'c': switch to custom mode (empty editor)
+      // c → custom JSON skeleton
       if (data === "c") {
         state.editorContent = JSON.stringify(
           { mcpServers: { "": { command: "", args: [], env: {} } } },
@@ -289,143 +512,267 @@ export function renderMcpAddOverlay(params?: {
           2,
         );
         editor.setText(state.editorContent);
-        state.focusPane = "editor";
-        state.mode = "custom";
+        state.loadedServerId = null;
+        state.mode = "editor";
+        setStatus("Custom JSON skeleton", "info", 1200);
         refresh();
         return;
       }
 
-      // '/' or typing: start search
-      if (data === "/" || (data.length === 1 && data >= " ")) {
-        if (data === "/") {
-          state.searchQuery = "";
-        } else {
-          state.searchQuery += data;
-        }
-        searchServers(state.searchQuery);
+      // ? → show help (status flash)
+      if (data === "?") {
+        setStatus("j/k=move · gg/G=top/bot · Ctrl+d/u=half-page · /=search · Enter=edit · q=quit");
         refresh();
         return;
       }
+    }
 
-      // Backspace: delete from search
-      if (data === "\x7f" || data === "\b") {
-        if (state.searchQuery.length > 0) {
-          state.searchQuery = state.searchQuery.slice(0, -1);
-          searchServers(state.searchQuery);
-          refresh();
-        }
-        return;
-      }
+    function handleInput(data: string) {
+      if (state.mode === "editor") return handleEditorMode(data);
+      if (state.mode === "search") return handleSearchMode(data);
+      return handleNormalMode(data);
     }
 
+    // ─── Rendering ────────────────────────────────────────────────────
+
     function render(width: number): string[] {
       if (cachedLines) return cachedLines;
 
       const lines: string[] = [];
-      const halfW = Math.floor(width / 2) - 1;
+      const innerWidth = Math.max(40, width - 2);
+
+      // Pane widths: account for left │, middle │, right │ borders
+      const leftW = Math.floor((innerWidth - 1) / 2);
+      const rightW = innerWidth - 1 - leftW;
+
+      const browseFocused = state.mode !== "editor";
+      const editorFocused = state.mode === "editor";
+
+      // Border + active-pane accent helpers
+      const border = (s: string) => theme.fg("accent", s);
+      const dimBorder = (s: string) => theme.fg("muted", s);
+
+      // ── Top header ──────────────────────────────────────────────────
+      const scopeTag = state.scope === "global" ? "[GLOBAL]" : "[PROJECT]";
+      const configPath = state.scope === "global"
+        ? getGlobalConfigDir() + "/mcp-config.json"
+        : ".unipi/config/mcp/mcp-config.json";
+      const title = ` Add MCP Server ${theme.fg("accent", scopeTag)} `;
+      const modeTag =
+        state.mode === "search"
+          ? "[SEARCH]"
+          : state.mode === "editor"
+            ? "[EDITOR]"
+            : "[NORMAL]";
+      const headerPad = Math.max(0, innerWidth - visibleWidth(title) - visibleWidth(modeTag));
+      lines.push(border(`╭${"─".repeat(innerWidth)}╮`));
+      lines.push(
+        border("│") +
+          theme.bold(title) +
+          " ".repeat(headerPad) +
+          theme.fg("accent", modeTag) +
+          border("│"),
+      );
+      // Config path row (OSC 8 hyperlink to file for Ctrl+click in supported terminals)
+      const configPathAbs = state.scope === "global"
+        ? getGlobalConfigDir() + "/mcp-config.json"
+        : process.cwd() + "/.unipi/config/mcp/mcp-config.json";
+      const pathLink = hyperlink(
+        "file://" + configPathAbs,
+        theme.fg("muted", configPath),
+      );
+      const pathLabel = ` Config: ${pathLink} ${theme.fg("dim", "(Ctrl+click)")} `;
+      lines.push(border("│") + padVisible(pathLabel, innerWidth) + border("│"));
 
-      // Header
-      const header = " Add MCP Server ";
-      const modeLabel = state.mode === "browse" ? "[Browse]" : "[Custom]";
+      // Pane headers row: ├──── search bar ────┬──── Config Editor ────┤
       lines.push(
-        theme.accent(`╭${"─".repeat(Math.max(0, width - 2))}╮`),
+        border("├") +
+          border("─".repeat(leftW)) +
+          border("┬") +
+          border("─".repeat(rightW)) +
+          border("┤"),
       );
+
+      // Search bar / list header on left, editor title on right
+      const searchBar = (() => {
+        if (state.mode === "search") {
+          const cursor = state.pendingSearch.length > 0 ? "" : "█";
+          return ` ${theme.fg("accent", "/")}${theme.fg("text", state.pendingSearch)}${theme.fg("accent", cursor)}`;
+        }
+        if (state.searchQuery) return ` ${theme.fg("muted", "/")}${theme.fg("text", state.searchQuery)}`;
+        return ` ${theme.fg("muted", "/ press / to search")}`;
+      })();
+
+      const editingLabel = (() => {
+        const sel = state.filteredServers[state.selectedIndex];
+        if (state.loadedServerId && sel && sel.id === state.loadedServerId) {
+          return ` Editing: ${widthSafe(sel.name)} `;
+        }
+        if (state.loadedServerId) return ` Editing: ${widthSafe(state.loadedServerId)} `;
+        return " Config Editor ";
+      })();
+      const editorHeader = editorFocused
+        ? theme.bold(theme.fg("accent", editingLabel))
+        : theme.fg("muted", editingLabel);
+
+      const total = state.allServers.length;
+      const shown = state.filteredServers.length;
+      const counter =
+        shown < total
+          ? theme.fg("dim", `${shown}/${total} `)
+          : theme.fg("dim", `${total} `);
+      const leftHeaderRight = padVisible(searchBar, leftW - visibleWidth(counter)) + counter;
+
       lines.push(
-        theme.accent("│") +
-          theme.bold(header) +
-          theme.muted(modeLabel.padStart(width - visibleWidth(header) - visibleWidth(modeLabel) - 1)) +
-          theme.accent("│"),
+        border("│") +
+          padVisible(leftHeaderRight, leftW) +
+          (browseFocused ? border("│") : dimBorder("│")) +
+          padVisible(editorHeader, rightW) +
+          border("│"),
       );
+
       lines.push(
-        theme.accent(`├${"─".repeat(Math.max(0, width - 2))}┤`),
+        border("├") +
+          border("─".repeat(leftW)) +
+          border("┼") +
+          border("─".repeat(rightW)) +
+          border("┤"),
       );
 
-      // Content area — split pane
-      const browseServers = state.filteredServers;
-      const maxRows = 16;
+      // ── List + editor body ─────────────────────────────────────────
+      const LIST_HEIGHT = 14;
+      lastListHeight = LIST_HEIGHT;
+      ensureVisible();
 
-      for (let row = 0; row < maxRows; row++) {
+      // Drive the real Editor: focus reflects mode, render gives lines that
+      // already contain the reverse-video cursor when focused. We strip the
+      // editor's top/bottom horizontal borders since our pane has its own.
+      editor.focused = editorFocused;
+      const editorRendered: string[] = (() => {
+        try {
+          return editor.render(rightW);
+        } catch {
+          return [];
+        }
+      })();
+      const editorBody =
+        editorRendered.length >= 2
+          ? editorRendered.slice(1, -1)
+          : editorRendered;
+
+      for (let row = 0; row < LIST_HEIGHT; row++) {
+        // Left: server list
         let left = "";
-        let right = "";
-
-        // Left pane: browse
-        if (row === 0) {
-          const searchDisplay = state.searchQuery || "search...";
-          left = theme.muted(` 🔍 ${searchDisplay}`);
-        } else if (row >= 2 && row - 2 < browseServers.length) {
-          const idx = row - 2;
-          const server = browseServers[idx];
-          const selected = idx === state.selectedIndex;
-          const scopeIcon = server.scope === "cloud" ? "☁️" : "🏠";
-          const prefix = selected ? theme.accent("▸ ") : "  ";
+        const serverIdx = state.scrollOffset + row;
+        if (serverIdx < state.filteredServers.length) {
+          const server = state.filteredServers[serverIdx];
+          const selected = serverIdx === state.selectedIndex;
+          const scopeTag = server.scope === "cloud" ? "[c]" : "[l]";
+          const officialMark = server.official ? theme.fg("success", "*") : " ";
+          const prefix = selected
+            ? (browseFocused ? theme.fg("accent", "> ") : theme.fg("muted", "> "))
+            : "  ";
+          // Reserved cells: " " + prefix(2) + officialMark(1) + " " + scopeTag(3) + " " = 8
+          const nameRaw = widthSafe(truncateToWidth(server.name, leftW - 8));
+          const scope = server.scope === "cloud"
+            ? theme.fg("accent", scopeTag)
+            : theme.fg("warning", scopeTag);
           const name = selected
-            ? theme.bold(server.name)
-            : theme.fg("default", server.name);
-          left = ` ${prefix}${scopeIcon} ${name}`;
-          if (selected) {
-            // Show description on next line if available
-            const desc = truncateToWidth(
-              server.description,
-              halfW - 4,
-            );
-            left = ` ${prefix}${scopeIcon} ${name}\n   ${theme.muted(desc)}`;
-          }
+            ? (browseFocused ? theme.bold(theme.fg("accent", nameRaw)) : theme.bold(nameRaw))
+            : theme.fg("text", nameRaw);
+          left = ` ${prefix}${officialMark} ${scope} ${name}`;
+        } else if (state.filteredServers.length === 0 && row === 1) {
+          left = ` ${theme.fg("warning", "no matches")}`;
         }
 
-        // Right pane: editor
-        if (row === 0) {
-          right = theme.muted(" Config Editor ");
-        } else if (row >= 2) {
-          // Show editor lines
-          const editorLines = state.editorContent.split("\n");
-          const editorIdx = row - 2;
-          if (editorIdx < editorLines.length) {
-            right = theme.fg("default", truncateToWidth(editorLines[editorIdx], halfW - 3));
-          }
+        // Right: editor content (lines already contain cursor + ANSI)
+        let right = "";
+        if (row < editorBody.length) {
+          right = editorBody[row];
         }
 
-        // Pad and combine
-        const leftPadded = left.padEnd(halfW);
-        const rightPadded = right.padEnd(halfW);
+        const midBorder = browseFocused && !editorFocused ? border("│") : dimBorder("│");
         lines.push(
-          theme.accent("│") +
-            leftPadded +
-            theme.accent("│") +
-            rightPadded +
-            theme.accent("│"),
+          (browseFocused ? border("│") : dimBorder("│")) +
+            padVisible(left, leftW) +
+            midBorder +
+            padVisible(right, rightW) +
+            (editorFocused ? border("│") : dimBorder("│")),
         );
       }
 
-      // Validation error
+      // ── Description / status row ──────────────────────────────────
+      lines.push(
+        border("├") +
+          border("─".repeat(leftW)) +
+          border("┴") +
+          border("─".repeat(rightW)) +
+          border("┤"),
+      );
+
+      const sel = state.filteredServers[state.selectedIndex];
+      let descContent: string;
+      if (sel) {
+        const idSafe = widthSafe(sel.id);
+        const idVis = visibleWidth(idSafe);
+        const descBudget = Math.max(0, innerWidth - idVis - 4);
+        const descSafe = widthSafe(sel.description);
+        const desc = truncateToWidth(descSafe, descBudget);
+        const idLink = sel.github
+          ? hyperlink(sel.github, theme.fg("accent", idSafe))
+          : theme.fg("accent", idSafe);
+        const hint = sel.github ? theme.fg("dim", " (Ctrl+click)") : "";
+        descContent = ` ${idLink}${hint}  ${theme.fg("muted", desc)}`;
+      } else {
+        descContent = ` ${theme.fg("dim", "no server selected")}`;
+      }
+      lines.push(border("│") + padVisible(descContent, innerWidth) + border("│"));
+
+      // ── Validation error ───────────────────────────────────────────
       if (state.validationError) {
-        lines.push(
-          theme.accent("│") +
-            theme.error(` ⚠ ${truncateToWidth(state.validationError, width - 6)}`.padEnd(width - 2)) +
-            theme.accent("│"),
-        );
+        const errText = ` ⚠ ${truncateToWidth(state.validationError, innerWidth - 4)}`;
+        lines.push(border("│") + padVisible(theme.fg("error", errText), innerWidth) + border("│"));
       }
 
-      // Scope indicator
-      const scopeLabel = state.scope === "global" ? "Global" : "Project";
-      lines.push(
-        theme.accent(`├${"─".repeat(Math.max(0, width - 2))}┤`),
-      );
-      lines.push(
-        theme.accent("│") +
-          theme.muted(` ${scopeLabel}`.padEnd(width - 2)) +
-          theme.accent("│"),
-      );
+      // ── Status line ────────────────────────────────────────────────
+      if (state.status) {
+        const colour =
+          state.statusKind === "success"
+            ? "success"
+            : state.statusKind === "error"
+              ? "error"
+              : state.statusKind === "warn"
+                ? "warning"
+                : "accent";
+        const text = ` ${state.status}`;
+        const styled =
+          state.statusKind === "success"
+            ? theme.bold(theme.fg(colour as any, text))
+            : theme.fg(colour as any, text);
+        lines.push(border("│") + padVisible(styled, innerWidth) + border("│"));
+      }
 
-      // Keybinds
-      const binds = " ↑↓ navigate  Enter select  Tab pane  c custom  q/Esc close";
+      // ── Footer ─────────────────────────────────────────────────────
+      lines.push(border(`├${"─".repeat(innerWidth)}┤`));
+      const scopeLabel = state.scope === "global" ? "● Global" : "● Project";
       lines.push(
-        theme.accent("│") +
-          theme.muted(truncateToWidth(binds, width - 2).padEnd(width - 2)) +
-          theme.accent("│"),
+        border("│") +
+          padVisible(theme.fg("muted", ` ${scopeLabel}`), innerWidth) +
+          border("│"),
       );
+
+      const binds =
+        state.mode === "editor"
+          ? " Ctrl+S=save · Ctrl+P=prettify · Enter=newline · Esc=back to list "
+          : state.mode === "search"
+            ? " Type to filter · ↑↓ navigate · Enter load+edit · Esc cancel "
+            : " j/k move · / search · Enter edit · r reload tmpl · c custom · Tab pane · q close ";
       lines.push(
-        theme.accent(`╰${"─".repeat(Math.max(0, width - 2))}╯`),
+        border("│") +
+          padVisible(theme.fg("muted", truncateToWidth(binds, innerWidth)), innerWidth) +
+          border("│"),
       );
+      lines.push(border(`╰${"─".repeat(innerWidth)}╯`));
 
       cachedLines = lines;
       return lines;