@pi-unipi/mcp 0.1.0 → 0.1.7

package/src/tui/settings-overlay.ts

@@ -199,8 +199,8 @@ export function renderMcpSettingsOverlay(params?: {
         return;
       }
 
-      // Navigation
-      if (matchesKey(data, Key.up)) {
+      // Navigation (arrows + vim j/k)
+      if (matchesKey(data, Key.up) || data === "k") {
         if (state.selectedIndex > 0) {
           state.selectedIndex--;
           refresh();
@@ -208,7 +208,7 @@ export function renderMcpSettingsOverlay(params?: {
         return;
       }
 
-      if (matchesKey(data, Key.down)) {
+      if (matchesKey(data, Key.down) || data === "j") {
         if (state.selectedIndex < state.servers.length - 1) {
           state.selectedIndex++;
           refresh();
@@ -267,35 +267,38 @@ export function renderMcpSettingsOverlay(params?: {
       }
     }
 
+    /** Pad content to exact visible width, accounting for ANSI codes and emoji */
+    function padVisible(content: string, targetWidth: number): string {
+      const vw = visibleWidth(content);
+      const pad = Math.max(0, targetWidth - vw);
+      return content + " ".repeat(pad);
+    }
+
     function render(width: number): string[] {
       if (cachedLines) return cachedLines;
 
       const lines: string[] = [];
+      const innerWidth = Math.max(22, width - 2);
 
-      // Header
+      // ── Header ──────────────────────────────────────────────────────
       const header = " MCP Settings ";
       const scopeLabel = state.viewScope === "global" ? "● Global" : "● Project";
+      const headerPad = Math.max(0, innerWidth - visibleWidth(header) - visibleWidth(scopeLabel));
+      lines.push(theme.fg("accent", `╭${"─".repeat(innerWidth)}╮`));
       lines.push(
-        theme.accent(`╭${"─".repeat(Math.max(0, width - 2))}╮`),
-      );
-      lines.push(
-        theme.accent("│") +
-          theme.bold(header) +
-          theme.accent(
-            scopeLabel.padStart(width - visibleWidth(header) - visibleWidth(scopeLabel) - 1),
-          ) +
-          theme.accent("│"),
-      );
-      lines.push(
-        theme.accent(`├${"─".repeat(Math.max(0, width - 2))}┤`),
+        theme.fg("accent", "│") +
+        theme.bold(header) +
+        theme.fg("accent", " ".repeat(headerPad) + scopeLabel) +
+        theme.fg("accent", "│"),
       );
+      lines.push(theme.fg("accent", `├${"─".repeat(innerWidth)}┤`));
 
-      // Server list
+      // ── Server list ─────────────────────────────────────────────────
       if (state.servers.length === 0) {
         lines.push(
-          theme.accent("│") +
-            theme.muted(" No servers configured".padEnd(width - 2)) +
-            theme.accent("│"),
+          theme.fg("accent", "│") +
+          padVisible(theme.fg("muted", " No servers configured"), innerWidth) +
+          theme.fg("accent", "│"),
         );
       } else {
         for (let i = 0; i < state.servers.length; i++) {
@@ -304,61 +307,53 @@ export function renderMcpSettingsOverlay(params?: {
 
           const statusIcon =
             server.status === "running"
-              ? theme.success("●")
+              ? theme.fg("success", "●")
               : server.status === "error"
-                ? theme.error("✗")
+                ? theme.fg("error", "✗")
                 : server.enabled
-                  ? theme.muted("○")
-                  : theme.dim("○");
+                  ? theme.fg("muted", "○")
+                  : theme.fg("dim", "○");
 
-          const name = selected ? theme.bold(server.name) : theme.fg("default", server.name);
-          const cmd = theme.muted(truncateToWidth(server.command, 24));
+          const name = selected ? theme.bold(server.name) : theme.fg("text", server.name);
+          const cmd = theme.fg("muted", truncateToWidth(server.command, 24));
           const tools =
             server.status === "running" && server.toolCount > 0
-              ? theme.accent(`${server.toolCount} tools`)
+              ? theme.fg("accent", `${server.toolCount} tools`)
               : server.status === "error" && server.error
-                ? theme.error(truncateToWidth(server.error, 20))
-                : theme.dim("stopped");
+                ? theme.fg("error", truncateToWidth(server.error, 20))
+                : theme.fg("dim", "stopped");
 
-          const source = theme.muted(`[${server.source}]`);
-          const prefix = selected ? theme.accent("▸ ") : "  ";
+          const source = theme.fg("muted", `[${server.source}]`);
+          const prefix = selected ? theme.fg("accent", "▸ ") : "  ";
 
           const line = ` ${prefix}${statusIcon} ${name}  ${cmd}  ${tools}  ${source}`;
           lines.push(
-            theme.accent("│") +
-              truncateToWidth(line, width - 2).padEnd(width - 2) +
-              theme.accent("│"),
+            theme.fg("accent", "│") +
+            padVisible(truncateToWidth(line, innerWidth), innerWidth) +
+            theme.fg("accent", "│"),
           );
         }
       }
 
-      // Confirm delete overlay
+      // ── Confirm delete ─────────────────────────────────────────────
       if (state.confirmDelete) {
+        lines.push(theme.fg("accent", `├${"─".repeat(innerWidth)}┤`));
         lines.push(
-          theme.accent(`├${"─".repeat(Math.max(0, width - 2))}┤`),
-        );
-        lines.push(
-          theme.accent("│") +
-            theme.warning(
-              ` Delete '${state.confirmDelete}'? (y/n)`.padEnd(width - 2),
-            ) +
-            theme.accent("│"),
+          theme.fg("accent", "│") +
+          padVisible(theme.fg("warning", ` Delete '${state.confirmDelete}'? (y/n)`), innerWidth) +
+          theme.fg("accent", "│"),
         );
       }
 
-      // Keybinds
-      lines.push(
-        theme.accent(`├${"─".repeat(Math.max(0, width - 2))}┤`),
-      );
+      // ── Keybinds ───────────────────────────────────────────────────
+      lines.push(theme.fg("accent", `├${"─".repeat(innerWidth)}┤`));
       const binds = " ↑↓ select  Space toggle  a add  s sync  g global  p project  d delete  q/Esc close";
       lines.push(
-        theme.accent("│") +
-          theme.muted(truncateToWidth(binds, width - 2).padEnd(width - 2)) +
-          theme.accent("│"),
-      );
-      lines.push(
-        theme.accent(`╰${"─".repeat(Math.max(0, width - 2))}╯`),
+        theme.fg("accent", "│") +
+        padVisible(theme.fg("muted", truncateToWidth(binds, innerWidth)), innerWidth) +
+        theme.fg("accent", "│"),
       );
+      lines.push(theme.fg("accent", `╰${"─".repeat(innerWidth)}╯`));
 
       cachedLines = lines;
       return lines;