ultimate-jekyll-manager 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -14,6 +14,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - `Fixed` for any bug fixes.
 - `Security` in case of vulnerabilities.
 
+---
+## [1.9.2] - 2026-06-17
+
+### Added
+- **Account page: API & MCP section.** Renamed "API keys" to "API & MCP". New MCP integration card with server URL (copy-to-clipboard) and tabbed setup instructions for 9 providers: Claude, Cursor, VS Code, Codex, Gemini CLI, OpenCode, Windsurf, Zed, and Other. MCP URL built dynamically from `webManager.getApiUrl()`.
+
+---
+## [1.9.1] - 2026-06-17
+
+### Changed
+
+- **FormManager: snapshot-and-restore disabled-state model (replaces `data-fm-keep-disabled`).** `_init()` now snapshots every element that has `disabled` in HTML markup (excluding submit buttons — those are loading guards FM takes over). Snapshotted elements stay disabled through every state transition automatically — no data attributes needed. Recommended form pattern: `<form data-form-state="initializing" onsubmit="return false">` with CSS `form[data-form-state]:not([data-form-state="ready"]) { pointer-events: none; }`. Documented in `docs/javascript-libraries.md`.
+
+### Added
+
+- **Comprehensive FormManager test suite (30 page-layer tests).** Disabled-state snapshot (5 tests), getData/setData/input groups (12 tests), validation/honeypot/file-accept (13 tests). Previously FormManager had zero automated tests.
+- **Visual Test 7 on the FM test page** (`/test/libraries/form-manager`) — permanently disabled elements, submit cycle demo, rapid-cycle button for manual verification.
+
 ---
 ## [1.9.0] - 2026-06-17
 

package/PROGRESS.md

@@ -0,0 +1,24 @@
+# Project Progress Tracker
+> Agents and maintainers should update this file regularly to reflect the current state of the project.
+
+## Current Focus
+* **Goal:** FormManager disabled-state refactor (snapshot-and-restore)
+* **Current Phase:** Phase 1 — implementation + tests complete, docs pending
+* **Priority:** Medium
+* **Last Updated:** 2026-06-17 6:05 PM PDT
+* **Notes:** FM disabled-state refactor done + comprehensive FM test suite added (110 tests total, up from 80). Covers getData/setData/input groups/validation/honeypot/file-accept/disabled snapshot. Docs (javascript-libraries.md, CHANGELOG) still need updating before shipping.
+
+## Active Task List
+* [ ] Phase 1: FormManager disabled-state snapshot-and-restore
+  * [x] Task 1.1: Refactor `_setDisabled` to use snapshot instead of `data-fm-keep-disabled`
+  * [x] Task 1.2: Add `_permanentlyDisabled` Set, populated in `_init()` before first disable
+  * [x] Task 1.3: Write page-layer tests (5 tests: snapshot capture, full disable, selective re-enable, cycle durability, onsubmit HTML guard)
+  * [x] Task 1.4: All 85 tests passing
+  * [x] Task 1.5: Add visual Test 7 to FM test page (form-manager.html + JS) with permanently disabled fields + rapid-cycle demo
+  * [x] Task 1.6: Write comprehensive FM page-layer tests — getData/setData (12 tests), validation/honeypot/file-accept (13 tests). 110 total.
+  * [ ] Task 1.7: Update `docs/javascript-libraries.md` — replace `data-fm-keep-disabled` docs with new snapshot pattern + `onsubmit="return false"` + `data-form-state="initializing"` CSS guard
+  * [ ] Task 1.8: Update CHANGELOG with the change
+  * [ ] Task 1.9: Ship (commit, push, publish)
+
+## Completed Task List
+* [x] Phase 0: v1.9.0 release — MCP OAuth flow + CDP debugging docs + dev-URL updates

package/dist/assets/js/libs/form-manager.js

@@ -59,6 +59,7 @@ export class FormManager {
     // State
     this.state = 'initializing';
     this._isDirty = false;
+    this._permanentlyDisabled = new Set();
 
     // Event listeners
     this._listeners = {
@@ -92,6 +93,17 @@ export class FormManager {
    * Initialize the form manager
    */
   _init() {
+    // Snapshot elements that are disabled in HTML markup BEFORE the first
+    // blanket disable. These are business-logic disabled (e.g. "coming soon"
+    // options) and must stay disabled through every state transition.
+    // Submit buttons are excluded — disabled submit buttons in HTML are
+    // loading guards that FM takes over.
+    this.$form.querySelectorAll('button, input, select, textarea').forEach(($el) => {
+      if ($el.disabled && $el.type !== 'submit') {
+        this._permanentlyDisabled.add($el);
+      }
+    });
+
     // Disable form during initialization
     this._setDisabled(true);
 
@@ -782,9 +794,8 @@ export class FormManager {
   }
 
   /**
-   * Enable/disable form controls. Fields marked data-fm-keep-disabled stay
-   * disabled permanently (e.g. "coming soon" options rendered inside a
-   * managed form) — the toggle never re-enables them.
+   * Enable/disable form controls. Elements snapshotted as permanently
+   * disabled during _init() are never re-enabled.
    */
   _setDisabled(disabled) {
     /* @dev-only:start */
@@ -794,7 +805,7 @@ export class FormManager {
     /* @dev-only:end */
 
     this.$form.querySelectorAll('button, input, select, textarea').forEach(($el) => {
-      if ($el.dataset.fmKeepDisabled !== undefined) {
+      if (this._permanentlyDisabled.has($el)) {
         $el.disabled = true;
         return;
       }

package/dist/assets/js/pages/account/sections/api-keys.js

@@ -1,5 +1,5 @@
 /**
- * API Keys Section JavaScript
+ * API & MCP Section JavaScript
  */
 
 // Libraries
@@ -7,19 +7,19 @@ import { FormManager } from '__main_assets__/js/libs/form-manager.js';
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 import webManager from 'web-manager';
 
-// Initialize API Keys section
+// Initialize section
 export function init() {
   setupButtons();
   setupResetApiKeyForm();
+  setupMcp();
 }
 
-// Load API Keys data
+// Load data
 export function loadData(account) {
   if (!account) {
     return;
   }
 
-  // Update API key display
   updateApiKey(account.api?.privateKey);
 }
 
@@ -28,21 +28,126 @@ function updateApiKey(apiKey) {
   const $apiKeyInput = document.getElementById('api-key-input');
 
   if ($apiKeyInput) {
-    if (apiKey) {
-      $apiKeyInput.value = apiKey;
-    } else {
-      $apiKeyInput.value = 'No API key generated';
-    }
+    $apiKeyInput.value = apiKey || 'No API key generated';
   }
 }
 
 // Setup button handlers
 function setupButtons() {
-  // Copy API key button
   const $copyBtn = document.getElementById('copy-api-key-btn');
   if ($copyBtn) {
     $copyBtn.addEventListener('click', handleCopyApiKey);
   }
+
+  const $copyMcpBtn = document.getElementById('copy-mcp-url-btn');
+  if ($copyMcpBtn) {
+    $copyMcpBtn.addEventListener('click', () => handleCopyInput('mcp-url-input', $copyMcpBtn));
+  }
+
+  document.querySelectorAll('[data-copy-target]').forEach(($btn) => {
+    $btn.addEventListener('click', () => {
+      const targetId = $btn.getAttribute('data-copy-target');
+      const $target = document.getElementById(targetId);
+
+      if (!$target) {
+        return;
+      }
+
+      const text = $target.tagName === 'PRE' ? $target.textContent : $target.value;
+
+      navigator.clipboard.writeText(text).then(() => {
+        webManager.utilities().showNotification('Copied!', 'success');
+      }).catch(() => {
+        webManager.utilities().showNotification('Failed to copy', 'danger');
+      });
+    });
+  });
+}
+
+// Setup MCP integration URLs
+function setupMcp() {
+  const apiUrl = webManager.getApiUrl();
+  const mcpUrl = `${apiUrl}/mcp`;
+  const $mcpCard = document.getElementById('mcp-card');
+  const brandName = ($mcpCard?.dataset?.brandId || 'backend').toLowerCase().replace(/\s+/g, '-');
+
+  const $mcpUrlInput = document.getElementById('mcp-url-input');
+  if ($mcpUrlInput) {
+    $mcpUrlInput.value = mcpUrl;
+  }
+
+  const cmds = {
+    'mcp-cmd-claude': `claude mcp add ${brandName} --transport http ${mcpUrl}`,
+    'mcp-cmd-codex': `codex mcp add ${brandName} -- npx -y mcp-remote@latest ${mcpUrl}`,
+    'mcp-cmd-gemini-auth': `/mcp auth ${brandName}`,
+    'mcp-cmd-opencode-auth': `opencode mcp auth ${brandName}`,
+  };
+
+  const snippets = {
+    'mcp-cmd-cursor': {
+      mcpServers: {
+        [brandName]: { url: mcpUrl },
+      },
+    },
+    'mcp-cmd-vscode': {
+      mcp: {
+        servers: {
+          [brandName]: { url: mcpUrl },
+        },
+      },
+    },
+    'mcp-cmd-gemini': {
+      mcpServers: {
+        [brandName]: { url: mcpUrl },
+      },
+    },
+    'mcp-cmd-opencode': {
+      $schema: 'https://opencode.ai/config.json',
+      mcp: {
+        [brandName]: {
+          type: 'remote',
+          url: mcpUrl,
+          oauth: {},
+        },
+      },
+    },
+    'mcp-cmd-windsurf': {
+      mcpServers: {
+        [brandName]: {
+          command: 'npx',
+          args: ['-y', 'mcp-remote@latest', mcpUrl],
+        },
+      },
+    },
+    'mcp-cmd-zed': {
+      context_servers: {
+        [brandName]: {
+          command: 'npx',
+          args: ['-y', 'mcp-remote@latest', mcpUrl],
+          settings: {},
+        },
+      },
+    },
+  };
+
+  for (const [id, value] of Object.entries(cmds)) {
+    const $el = document.getElementById(id);
+    if ($el) {
+      $el.value = value;
+    }
+  }
+
+  for (const [id, config] of Object.entries(snippets)) {
+    const $el = document.getElementById(id);
+    if ($el) {
+      $el.textContent = JSON.stringify(config, null, 2);
+    }
+  }
+
+  const $detailUrl = document.getElementById('mcp-detail-url');
+  if ($detailUrl) {
+    $detailUrl.textContent = mcpUrl;
+  }
 }
 
 // Setup reset API key form
@@ -54,18 +159,14 @@ function setupResetApiKeyForm() {
   });
 
   formManager.on('submit', async () => {
-    // 1ms wait for dialog to appear properly
     await new Promise(resolve => setTimeout(resolve, 1));
 
-    // Show confirmation dialog
     if (!confirm('Are you sure you want to reset your API key? This will invalidate your current key and any applications using it will stop working.')) {
       throw new Error('API key reset cancelled.');
     }
 
-    // Get server API URL
     const serverApiURL = `${webManager.getApiUrl()}/backend-manager/user/api-keys`;
 
-    // Make API call to reset API key
     const response = await authorizedFetch(serverApiURL, {
       method: 'POST',
       timeout: 30000,
@@ -77,10 +178,7 @@ function setupResetApiKeyForm() {
       throw new Error(response.message || 'Failed to reset API key');
     }
 
-    // Update the displayed API key
     updateApiKey(response.privateKey);
-
-    // Show success message
     formManager.showSuccess('API key has been reset successfully!');
   });
 }
@@ -90,31 +188,38 @@ async function handleCopyApiKey() {
   const $apiKeyInput = document.getElementById('api-key-input');
   const $copyBtn = document.getElementById('copy-api-key-btn');
 
-  if (!$apiKeyInput || !$apiKeyInput.value || $apiKeyInput.value === 'No API key generated') {
-    webManager.utilities().showNotification('No API key to copy', 'warning');
+  handleCopyInput('api-key-input', $copyBtn);
+}
+
+// Generic copy handler for input elements
+async function handleCopyInput(inputId, $btn) {
+  const $input = document.getElementById(inputId);
+
+  if (!$input || !$input.value || $input.value === 'Loading...') {
+    webManager.utilities().showNotification('Nothing to copy', 'warning');
     return;
   }
 
   try {
-    // Use webManager's clipboard utility
-    await webManager.utilities().clipboardCopy($apiKeyInput);
-
-    // Update button text temporarily
-    const $text = $copyBtn.querySelector('.button-text');
-    const originalText = $text.textContent;
-
-    $text.textContent = 'Copied!';
-    $copyBtn.classList.remove('btn-outline-adaptive');
-    $copyBtn.classList.add('btn-success');
-
-    // Reset after 2 seconds
-    setTimeout(() => {
-      $text.textContent = originalText;
-      $copyBtn.classList.remove('btn-success');
-      $copyBtn.classList.add('btn-outline-adaptive');
-    }, 2000);
+    await webManager.utilities().clipboardCopy($input);
+
+    const $text = $btn.querySelector('.button-text');
+    if ($text) {
+      const originalText = $text.textContent;
+      $text.textContent = 'Copied!';
+      $btn.classList.remove('btn-outline-adaptive');
+      $btn.classList.add('btn-success');
+
+      setTimeout(() => {
+        $text.textContent = originalText;
+        $btn.classList.remove('btn-success');
+        $btn.classList.add('btn-outline-adaptive');
+      }, 2000);
+    } else {
+      webManager.utilities().showNotification('Copied!', 'success');
+    }
   } catch (err) {
-    console.error('Failed to copy API key:', err);
-    webManager.utilities().showNotification('Failed to copy API key', 'danger');
+    console.error('Failed to copy:', err);
+    webManager.utilities().showNotification('Failed to copy', 'danger');
   }
 }

package/dist/assets/js/pages/test/libraries/form-manager/index.js

@@ -19,6 +19,7 @@ export default () => {
     initTestFormManual();
     initTestFormGroups();
     initTestFormFileDrop();
+    initTestFormSnapshot();
 
     // Resolve after initialization
     return resolve();
@@ -245,6 +246,58 @@ function initTestFormGroups() {
   });
 }
 
+// Test 7: Disabled-State Snapshot
+function initTestFormSnapshot() {
+  const formManager = new FormManager('#test-form-snapshot');
+  const $status = document.getElementById('snapshot-status');
+  const $cycleCount = document.getElementById('snapshot-cycle-count');
+  const $output = document.getElementById('snapshot-output');
+  const $cycleBtn = document.getElementById('snapshot-cycle');
+
+  let cycles = 0;
+
+  function logStates() {
+    const form = document.getElementById('test-form-snapshot');
+    const lines = [];
+    form.querySelectorAll('input, select, textarea, button').forEach(($el) => {
+      const label = $el.name || $el.type || $el.tagName.toLowerCase();
+      lines.push(`${label}: disabled=${$el.disabled}`);
+    });
+    $output.textContent = lines.join('\n');
+  }
+
+  formManager.on('statechange', ({ state }) => {
+    $status.textContent = `Status: ${state}`;
+    logStates();
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    console.log('[Test 7] Submitting:', data);
+    logStates();
+    await simulateApi(2000);
+    cycles++;
+    $cycleCount.textContent = `Cycles: ${cycles}`;
+    formManager.showSuccess('Done! Permanently disabled fields should still be disabled.');
+  });
+
+  // Rapid cycle button — triggers 5 fast disable/enable cycles
+  $cycleBtn.addEventListener('click', async () => {
+    $cycleBtn.disabled = true;
+    for (let i = 0; i < 5; i++) {
+      formManager._setDisabled(true);
+      logStates();
+      await simulateApi(300);
+      formManager._setDisabled(false);
+      logStates();
+      await simulateApi(300);
+      cycles++;
+    }
+    $cycleCount.textContent = `Cycles: ${cycles}`;
+    $cycleBtn.disabled = false;
+    formManager.showSuccess('5 rapid cycles complete. Check that Enterprise/Region/Notes stayed disabled.');
+  });
+}
+
 // Test 6: File Drop
 function initTestFormFileDrop() {
   const formManager = new FormManager('#test-form-file-drop');

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/account/index.html

@@ -55,7 +55,7 @@ sections:
     name: "Notifications"
     icon: "bell"
   - id: "api-keys"
-    name: "API keys"
+    name: "API & MCP"
     icon: "key"
   - id: "data-request"
     name: "Data request"
@@ -1311,9 +1311,10 @@ badges:
 
       <!-- API Keys Section -->
       <section id="api-keys-section" class="account-section d-none">
-        <h2 class="h3 mb-4" >API keys</h2>
+        <h2 class="h3 mb-4">API & MCP</h2>
 
-        <div class="card">
+        <!-- API Key Card -->
+        <div class="card mb-4">
           <div class="card-body">
             <div class="d-flex justify-content-between align-items-center mb-3">
               <h5 class="card-title mb-0">Your API key</h5>
@@ -1351,6 +1352,212 @@ badges:
             </div>
           </div>
         </div>
+
+        <!-- MCP Integration Card -->
+        <div class="card" data-brand-id="{{ site.brand.id }}" id="mcp-card">
+          <div class="card-body">
+            <h5 class="card-title mb-2">MCP integration</h5>
+            <p class="card-text text-muted mb-3">Connect AI assistants to your account using the Model Context Protocol. Paste the URL below into your preferred AI tool.</p>
+
+            <!-- MCP URL display -->
+            <div class="mb-4">
+              <label for="mcp-url-input" class="form-label small text-muted">MCP server URL</label>
+              <div class="input-group">
+                <input type="text" class="form-control font-monospace" id="mcp-url-input" readonly data-mcp-url value="Loading...">
+                <button type="button" class="btn btn-outline-adaptive" id="copy-mcp-url-btn">
+                  {% uj_icon "copy", "me-2" %}
+                  <span class="button-text d-none d-sm-inline">Copy</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Provider Tabs -->
+            <div class="border rounded">
+              <ul class="nav nav-tabs px-3 pt-2 flex-nowrap overflow-auto" id="mcp-provider-tabs" role="tablist">
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link active small text-nowrap" id="mcp-claude-tab" data-bs-toggle="tab" data-bs-target="#mcp-claude" type="button" role="tab">Claude</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-cursor-tab" data-bs-toggle="tab" data-bs-target="#mcp-cursor" type="button" role="tab">Cursor</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-vscode-tab" data-bs-toggle="tab" data-bs-target="#mcp-vscode" type="button" role="tab">VS Code</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-codex-tab" data-bs-toggle="tab" data-bs-target="#mcp-codex" type="button" role="tab">Codex</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-gemini-tab" data-bs-toggle="tab" data-bs-target="#mcp-gemini" type="button" role="tab">Gemini CLI</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-opencode-tab" data-bs-toggle="tab" data-bs-target="#mcp-opencode" type="button" role="tab">OpenCode</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-windsurf-tab" data-bs-toggle="tab" data-bs-target="#mcp-windsurf" type="button" role="tab">Windsurf</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-zed-tab" data-bs-toggle="tab" data-bs-target="#mcp-zed" type="button" role="tab">Zed</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <button class="nav-link small text-nowrap" id="mcp-other-tab" data-bs-toggle="tab" data-bs-target="#mcp-other" type="button" role="tab">Other</button>
+                </li>
+              </ul>
+              <div class="tab-content p-3">
+                <!-- Claude -->
+                <div class="tab-pane fade show active" id="mcp-claude" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Open your terminal and run:
+                      <div class="input-group mt-1 mb-1">
+                        <input type="text" class="form-control form-control-sm font-monospace bg-dark text-light" id="mcp-cmd-claude" readonly data-mcp-cmd="claude" value="Loading...">
+                        <button type="button" class="btn btn-outline-adaptive btn-sm" data-copy-target="mcp-cmd-claude">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li class="mb-2">This will trigger an OAuth flow to connect Claude to your account.</li>
+                  </ol>
+                  <div class="position-relative my-3">
+                    <hr class="text-muted">
+                    <span class="position-absolute top-50 start-50 translate-middle px-3 text-muted small bg-body-secondary">OR</span>
+                  </div>
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Go to <strong>Claude Desktop &rarr; Settings &rarr; Integrations &rarr; Add</strong>.</li>
+                    <li>Paste the MCP URL above and connect.</li>
+                  </ol>
+                </div>
+                <!-- Cursor -->
+                <div class="tab-pane fade" id="mcp-cursor" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Open Cursor Settings: <kbd>&#8984;</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></li>
+                    <li class="mb-2">Select <strong>Skills and Integrations</strong>.</li>
+                    <li class="mb-2">Select <strong>New MCP Server</strong> and paste:
+                      <div class="position-relative mt-1">
+                        <pre class="bg-dark text-light rounded p-3 small mb-0" id="mcp-cmd-cursor" data-mcp-cmd="cursor"><code>Loading...</code></pre>
+                        <button type="button" class="btn btn-outline-light btn-sm position-absolute top-0 end-0 m-2" data-copy-target="mcp-cmd-cursor">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                  </ol>
+                </div>
+                <!-- VS Code -->
+                <div class="tab-pane fade" id="mcp-vscode" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2"><kbd>&#8984;</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> and search for <strong>MCP: Add Server</strong>.</li>
+                    <li class="mb-2">Select <strong>HTTP (HTTP or Server-Sent Events)</strong>.</li>
+                    <li class="mb-2">Enter the MCP URL and hit enter.</li>
+                  </ol>
+                  <div class="position-relative my-3">
+                    <hr class="text-muted">
+                    <span class="position-absolute top-50 start-50 translate-middle px-3 text-muted small bg-body-secondary">OR</span>
+                  </div>
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Add to your <code>settings.json</code>:
+                      <div class="position-relative mt-1">
+                        <pre class="bg-dark text-light rounded p-3 small mb-0" id="mcp-cmd-vscode" data-mcp-cmd="vscode"><code>Loading...</code></pre>
+                        <button type="button" class="btn btn-outline-light btn-sm position-absolute top-0 end-0 m-2" data-copy-target="mcp-cmd-vscode">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li>Save the file and restart VS Code.</li>
+                  </ol>
+                </div>
+                <!-- Codex -->
+                <div class="tab-pane fade" id="mcp-codex" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Open your terminal and run:
+                      <div class="input-group mt-1 mb-1">
+                        <input type="text" class="form-control form-control-sm font-monospace bg-dark text-light" id="mcp-cmd-codex" readonly data-mcp-cmd="codex" value="Loading...">
+                        <button type="button" class="btn btn-outline-adaptive btn-sm" data-copy-target="mcp-cmd-codex">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li>The MCP server will be available next time you run <code>codex</code>.</li>
+                  </ol>
+                </div>
+                <!-- Gemini CLI -->
+                <div class="tab-pane fade" id="mcp-gemini" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Edit <code>~/.gemini/settings.json</code> and add the HTTP MCP server configuration:
+                      <div class="position-relative mt-1">
+                        <pre class="bg-dark text-light rounded p-3 small mb-0" id="mcp-cmd-gemini" data-mcp-cmd="gemini"><code>Loading...</code></pre>
+                        <button type="button" class="btn btn-outline-light btn-sm position-absolute top-0 end-0 m-2" data-copy-target="mcp-cmd-gemini">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li class="mb-2">Save the file and restart Gemini CLI.</li>
+                    <li class="mb-2">Authenticate by running:
+                      <div class="input-group mt-1 mb-1">
+                        <input type="text" class="form-control form-control-sm font-monospace bg-dark text-light" id="mcp-cmd-gemini-auth" readonly data-mcp-cmd="gemini-auth" value="Loading...">
+                        <button type="button" class="btn btn-outline-adaptive btn-sm" data-copy-target="mcp-cmd-gemini-auth">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li>This will open a browser window to complete the OAuth flow.</li>
+                  </ol>
+                </div>
+                <!-- OpenCode -->
+                <div class="tab-pane fade" id="mcp-opencode" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Edit <code>~/.config/opencode/opencode.json</code> and add the remote MCP server configuration:
+                      <div class="position-relative mt-1">
+                        <pre class="bg-dark text-light rounded p-3 small mb-0" id="mcp-cmd-opencode" data-mcp-cmd="opencode"><code>Loading...</code></pre>
+                        <button type="button" class="btn btn-outline-light btn-sm position-absolute top-0 end-0 m-2" data-copy-target="mcp-cmd-opencode">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li class="mb-2">Save the file and restart OpenCode.</li>
+                    <li class="mb-2">Authenticate by running:
+                      <div class="input-group mt-1 mb-1">
+                        <input type="text" class="form-control form-control-sm font-monospace bg-dark text-light" id="mcp-cmd-opencode-auth" readonly data-mcp-cmd="opencode-auth" value="Loading...">
+                        <button type="button" class="btn btn-outline-adaptive btn-sm" data-copy-target="mcp-cmd-opencode-auth">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li>This will open a browser window to complete the OAuth flow.</li>
+                  </ol>
+                </div>
+                <!-- Windsurf -->
+                <div class="tab-pane fade" id="mcp-windsurf" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2">Open Windsurf Settings.</li>
+                    <li class="mb-2">Under <strong>Cascade</strong>, find <strong>Model Context Protocol Servers</strong>.</li>
+                    <li class="mb-2">Select <strong>Add Server</strong> and paste:
+                      <div class="position-relative mt-1">
+                        <pre class="bg-dark text-light rounded p-3 small mb-0" id="mcp-cmd-windsurf" data-mcp-cmd="windsurf"><code>Loading...</code></pre>
+                        <button type="button" class="btn btn-outline-light btn-sm position-absolute top-0 end-0 m-2" data-copy-target="mcp-cmd-windsurf">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                  </ol>
+                </div>
+                <!-- Zed -->
+                <div class="tab-pane fade" id="mcp-zed" role="tabpanel">
+                  <ol class="small text-muted mb-0">
+                    <li class="mb-2"><kbd>&#8984;</kbd> + <kbd>,</kbd> to open Zed settings.</li>
+                    <li class="mb-2">Add the MCP server configuration:
+                      <div class="position-relative mt-1">
+                        <pre class="bg-dark text-light rounded p-3 small mb-0" id="mcp-cmd-zed" data-mcp-cmd="zed"><code>Loading...</code></pre>
+                        <button type="button" class="btn btn-outline-light btn-sm position-absolute top-0 end-0 m-2" data-copy-target="mcp-cmd-zed">{% uj_icon "copy" %}</button>
+                      </div>
+                    </li>
+                    <li>Restart Zed to activate the server.</li>
+                  </ol>
+                </div>
+                <!-- Other -->
+                <div class="tab-pane fade" id="mcp-other" role="tabpanel">
+                  <p class="small text-muted mb-2">Use these details to configure any MCP-compatible client:</p>
+                  <table class="table table-sm small mb-0">
+                    <tbody>
+                      <tr>
+                        <td class="text-muted fw-medium w-25">Server URL</td>
+                        <td class="font-monospace" id="mcp-detail-url" data-mcp-detail="url">Loading...</td>
+                      </tr>
+                      <tr>
+                        <td class="text-muted fw-medium">Transport</td>
+                        <td class="font-monospace">Streamable HTTP</td>
+                      </tr>
+                      <tr>
+                        <td class="text-muted fw-medium">Authentication</td>
+                        <td>OAuth 2.1 (automatic)</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
       </section>
 
       <!-- Data Request Section (Hidden by default) -->