clementine-agent 1.18.80 → 1.18.82

package/dist/agent/assistant.d.ts

@@ -100,6 +100,21 @@ export declare class PersonalAssistant {
         }>;
         updatedAt: string;
     };
+    /**
+     * PRD Phase 2.1: clear the cached status for one server so the next query
+     * repopulates it from a fresh handshake. The SDK manages connections
+     * internally; we don't have a direct "reconnect now" hook, but invalidating
+     * the cached entry tells the dashboard to render 'pending' and resets any
+     * stale error/auth state. Returns the post-clear cached snapshot.
+     */
+    invalidateMcpStatus(serverName: string): {
+        servers: Array<{
+            name: string;
+            status: string;
+        }>;
+        updatedAt: string;
+        cleared: boolean;
+    };
     /** Inject a background work result into the session as silent follow-up context. */
     injectPendingContext(sessionKey: string, userPrompt: string, result: string): void;
     private initMemoryStore;

package/dist/agent/assistant.js

@@ -810,6 +810,21 @@ export class PersonalAssistant {
     getMcpStatus() {
         return { servers: this._lastMcpStatus, updatedAt: this._lastMcpStatusTime };
     }
+    /**
+     * PRD Phase 2.1: clear the cached status for one server so the next query
+     * repopulates it from a fresh handshake. The SDK manages connections
+     * internally; we don't have a direct "reconnect now" hook, but invalidating
+     * the cached entry tells the dashboard to render 'pending' and resets any
+     * stale error/auth state. Returns the post-clear cached snapshot.
+     */
+    invalidateMcpStatus(serverName) {
+        const beforeLen = this._lastMcpStatus.length;
+        this._lastMcpStatus = this._lastMcpStatus.filter((s) => s.name !== serverName);
+        const cleared = this._lastMcpStatus.length < beforeLen;
+        if (cleared)
+            this._lastMcpStatusTime = new Date().toISOString();
+        return { servers: this._lastMcpStatus, updatedAt: this._lastMcpStatusTime, cleared };
+    }
     /** Inject a background work result into the session as silent follow-up context. */
     injectPendingContext(sessionKey, userPrompt, result) {
         const pending = this.pendingContext.get(sessionKey) ?? [];

package/dist/cli/dashboard.js

@@ -9266,6 +9266,31 @@ If the tool returns nothing or errors, return an empty array \`[]\`.`,
     app.get('/api/mcp-status', gwHandler(async (gw, _req, res) => {
         res.json(gw.getMcpStatus());
     }));
+    // PRD Phase 2.1: Reconnect a single MCP server. Clears the cached status so
+    // the next query handshake repopulates it. The SDK doesn't expose a direct
+    // reconnect call, so this is the closest equivalent: kick the cache.
+    app.post('/api/mcp-servers/:name/reconnect', gwHandler(async (gw, req, res) => {
+        const rawName = req.params.name;
+        const name = Array.isArray(rawName) ? rawName[0] : rawName;
+        if (!name) {
+            res.status(400).json({ ok: false, error: 'name required' });
+            return;
+        }
+        try {
+            const result = gw.invalidateMcpStatus(String(name));
+            res.json({
+                ok: true,
+                cleared: result.cleared,
+                message: result.cleared
+                    ? `Reconnect queued for "${name}" — status will refresh on the next query.`
+                    : `"${name}" had no cached status to clear; next query will populate it.`,
+                status: result,
+            });
+        }
+        catch (err) {
+            res.status(500).json({ ok: false, error: String(err) });
+        }
+    }));
     // ── Self-Improvement API ─────────────────────────────────────────
     // ── MCP Server Management API ───────────────────────────────────────
     app.get('/api/mcp-servers', (_req, res) => {
@@ -16356,14 +16381,18 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
 
     <!-- ═══ Tasks Page — single unified surface ═══ -->
     <div class="page" id="page-build">
-      <!-- Sub-tabs hidden by default. Cron is the single surface; multi-step
-           workflows (formerly "Tricks") are still accessible via deep-link
-           ?tab=workflows or by toggling .show-workflows-tabs on the page. -->
-      <div id="build-tabs" style="display:none;gap:4px;padding:8px 18px 0;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0">
+      <!-- PRD Phase 2: top-level tab strip within the Tasks domain.
+           Tasks (default) + Tools & MCP catalog. Workflows still reachable
+           via deep-link ?tab=workflows for power users with existing
+           multi-step workflows. -->
+      <div id="build-tabs" style="display:flex;gap:4px;padding:8px 18px 0;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0">
         <button class="build-tab-btn active" data-build-tab="crons" onclick="switchBuildTab('crons')" style="padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
           <span style="margin-right:6px">📅</span>Tasks <span id="build-tab-cron-count" style="display:none;margin-left:4px;font-size:10px;background:var(--bg-tertiary);padding:1px 6px;border-radius:999px;color:var(--text-muted)">0</span>
         </button>
-        <button class="build-tab-btn" data-build-tab="workflows" onclick="switchBuildTab('workflows')" style="padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
+        <button class="build-tab-btn" data-build-tab="toolsmcp" onclick="switchBuildTab('toolsmcp')" style="padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
+          <span style="margin-right:6px">🧰</span>Tools &amp; MCP <span id="build-tab-toolsmcp-count" style="display:none;margin-left:4px;font-size:10px;background:var(--bg-tertiary);padding:1px 6px;border-radius:999px;color:var(--text-muted)">0</span>
+        </button>
+        <button class="build-tab-btn" data-build-tab="workflows" onclick="switchBuildTab('workflows')" style="display:none;padding:8px 14px;border-radius:6px 6px 0 0;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent">
           <span style="margin-right:6px">🔧</span>Workflows <span id="build-tab-workflows-count" style="display:none;margin-left:4px;font-size:10px;background:var(--bg-tertiary);padding:1px 6px;border-radius:999px;color:var(--text-muted)">0</span>
         </button>
       </div>
@@ -16375,6 +16404,12 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
       <div id="build-tab-crons" style="display:none;flex:1;min-height:0;overflow-y:auto;padding:18px;background:var(--bg-primary)">
         <div id="panel-cron"><div class="empty-state" style="padding:24px;color:var(--text-muted)">Loading scheduled tasks…</div></div>
       </div>
+      <!-- ── PRD Phase 2: Tools & MCP catalog ────────────────────────────────
+           Read-only foundation in 1.18.81. Future slices: per-tool bindings,
+           Reconnect/Toggle/Edit actions, Approval Mode + Max-auto-runs config. -->
+      <div id="build-tab-toolsmcp" style="display:none;flex:1;min-height:0;overflow-y:auto;padding:18px;background:var(--bg-primary)">
+        <div id="panel-toolsmcp"><div class="empty-state" style="padding:24px;color:var(--text-muted)">Loading Tools &amp; MCP catalog…</div></div>
+      </div>
       <!-- Tricks (workflows) tab — existing RoutinesUI surface ─────────────────── -->
       <div id="build-tab-workflows" style="display:none;flex:1;min-height:0;display:flex;flex-direction:column">
       <!-- Toolbar -->
@@ -20309,6 +20344,77 @@ if('serviceWorker' in navigator){navigator.serviceWorker.getRegistrations().then
 
 <!-- (legacy standalone Preview modal removed in 1.18.70 — preview now lives as a tab inside the cron modal) -->
 
+<!-- ═══ MCP Server Edit Modal — PRD Phase 2.1 ═══ -->
+<div class="modal-overlay" id="mcp-edit-modal">
+  <div class="modal" style="max-width:640px;width:96vw">
+    <div class="modal-header">
+      <h3 id="mcp-edit-title">Edit MCP Server</h3>
+      <button class="btn-ghost btn-sm" onclick="closeMcpServerEditModal()">&times;</button>
+    </div>
+    <div class="modal-body" style="padding:18px">
+      <div id="mcp-edit-readonly-note" style="display:none;margin-bottom:14px;padding:10px 12px;border-radius:6px;background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.30);color:var(--yellow);font-size:12px">
+        ⚠ Auto-detected server. Edits to this config aren't persisted by Clementine — change it in the source file (Claude Desktop config, Claude Code settings, or extensions). Use the toggle on the catalog card to enable/disable.
+      </div>
+      <div class="form-group">
+        <label class="form-label">Name</label>
+        <input type="text" id="mcp-edit-name">
+        <div class="form-hint">Identifier — cannot be renamed via this dialog.</div>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">Transport</label>
+          <select id="mcp-edit-type" onchange="syncMcpEditTransportRows()">
+            <option value="stdio">stdio (local process)</option>
+            <option value="http">http</option>
+            <option value="sse">sse</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label" style="display:flex;align-items:center;gap:8px">
+            <input type="checkbox" id="mcp-edit-enabled"> Enabled
+          </label>
+          <div class="form-hint">Disable to remove this server from every task without deleting it.</div>
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="form-label">Description</label>
+        <input type="text" id="mcp-edit-description" placeholder="What this server does">
+      </div>
+      <!-- stdio-only fields -->
+      <div id="mcp-edit-stdio-rows">
+        <div class="form-group">
+          <label class="form-label">Command</label>
+          <input type="text" id="mcp-edit-command" placeholder="e.g. npx, python, ./bin/server">
+        </div>
+        <div class="form-group">
+          <label class="form-label">Args <span style="color:var(--text-muted);font-weight:normal">(one per line)</span></label>
+          <textarea id="mcp-edit-args" rows="3" placeholder="--port&#10;3001" style="font-family:'JetBrains Mono',monospace;font-size:11px"></textarea>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Env <span style="color:var(--text-muted);font-weight:normal">(JSON object, optional)</span></label>
+          <textarea id="mcp-edit-env" rows="3" placeholder='{ "API_KEY": "..." }' style="font-family:'JetBrains Mono',monospace;font-size:11px"></textarea>
+        </div>
+      </div>
+      <!-- http/sse fields -->
+      <div id="mcp-edit-http-rows" style="display:none">
+        <div class="form-group">
+          <label class="form-label">URL</label>
+          <input type="text" id="mcp-edit-url" placeholder="https://example.com/mcp">
+        </div>
+        <div class="form-group">
+          <label class="form-label">Headers <span style="color:var(--text-muted);font-weight:normal">(JSON object, optional)</span></label>
+          <textarea id="mcp-edit-headers" rows="3" placeholder='{ "Authorization": "Bearer ..." }' style="font-family:'JetBrains Mono',monospace;font-size:11px"></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <span style="flex:1"></span>
+      <button onclick="closeMcpServerEditModal()">Close</button>
+      <button class="btn-primary" id="mcp-edit-save" onclick="saveMcpServerEdit()">Save</button>
+    </div>
+  </div>
+</div>
+
 <!-- ═══ Goal Modal ═══ -->
 <div class="modal-overlay" id="goal-modal">
   <div class="modal" style="width:520px">
@@ -21148,12 +21254,27 @@ function switchBuildTab(tab) {
   var workPane = document.getElementById('build-tab-workflows');
   var cronPane = document.getElementById('build-tab-crons');
   var tplPane = document.getElementById('build-tab-templates');
+  var toolsmcpPane = document.getElementById('build-tab-toolsmcp');
   var headerStrip = document.getElementById('build-header-strip');
   var usagePanel = document.getElementById('build-usage-panel');
   var newBtn = document.getElementById('builder-new-btn');
   // Always close any open workflow when changing tabs — switching context
   // is a clean slate, not a stale node hanging on the canvas.
   if (typeof closeBuilderCanvas === 'function') closeBuilderCanvas();
+  // Default: hide the Tools & MCP pane unless we're explicitly on it.
+  if (toolsmcpPane && tab !== 'toolsmcp') toolsmcpPane.style.display = 'none';
+  if (tab === 'toolsmcp') {
+    // PRD Phase 2: Tools & MCP catalog. Read-only foundation in 1.18.81.
+    if (workPane) workPane.style.display = 'none';
+    if (cronPane) cronPane.style.display = 'none';
+    if (tplPane) tplPane.style.display = 'none';
+    if (toolsmcpPane) toolsmcpPane.style.display = 'block';
+    if (headerStrip) headerStrip.style.display = 'none';
+    if (usagePanel) usagePanel.style.display = 'none';
+    if (newBtn) newBtn.style.display = 'none';
+    if (typeof refreshToolsMcpCatalog === 'function') refreshToolsMcpCatalog();
+    return;
+  }
   if (tab === 'templates') {
     if (workPane) workPane.style.display = 'none';
     if (cronPane) cronPane.style.display = 'none';
@@ -23532,6 +23653,301 @@ function renderRunningCard(item) {
     + '</div></div>';
 }
 
+// ── PRD Phase 2: Tools & MCP catalog ──────────────────────────────────
+// Read-only foundation in 1.18.81. Renders the four-card taxonomy:
+//   • Built-in       — Claude SDK native tools (Read/Write/Bash/etc.)
+//   • Custom MCP     — in-process SDK MCP servers
+//   • Shell command  — CLI wrappers
+//   • External MCP   — stdio / sse / http MCP servers
+// Pulls from /api/mcp-status (live status) + /api/mcp-servers (config).
+// Future slices wire Reconnect/Toggle/Edit + the McpToolBinding modal.
+async function refreshToolsMcpCatalog() {
+  var panel = document.getElementById('panel-toolsmcp');
+  if (!panel) return;
+  panel.innerHTML = '<div class="empty-state" style="padding:24px;color:var(--text-muted)">Loading Tools &amp; MCP catalog…</div>';
+  var statusMap = {};
+  var servers = [];
+  try {
+    var sR = await apiFetch('/api/mcp-status');
+    var statusJson = await sR.json();
+    statusMap = statusJson || {};
+  } catch (e) { /* status is optional — servers still render without it */ }
+  try {
+    var lR = await apiFetch('/api/mcp-servers');
+    var lJson = await lR.json();
+    servers = (lJson && lJson.servers) || [];
+  } catch (e) {
+    panel.innerHTML = '<div class="empty-state" style="padding:24px;color:var(--red)">Failed to load MCP servers: ' + esc(String(e)) + '</div>';
+    return;
+  }
+  var tabCount = document.getElementById('build-tab-toolsmcp-count');
+  if (tabCount) {
+    tabCount.textContent = servers.length;
+    tabCount.style.display = servers.length > 0 ? '' : 'none';
+  }
+  // Bucket servers into the four PRD categories. The existing
+  // ManagedMcpServer type doesn't have an explicit "kind" field, so we
+  // infer: stdio with a known shell binary → 'shell', stdio bundled with
+  // clementine → 'builtin', stdio external command → 'external_stdio',
+  // http/sse → 'external_remote'. The bucket keys map to the PRD's four
+  // taxonomy cards.
+  var buckets = { builtin: [], custom: [], shell: [], external: [] };
+  for (var i = 0; i < servers.length; i++) {
+    var s = servers[i];
+    var name = s.name || '';
+    var type = s.type || 'stdio';
+    var cmd = s.command || '';
+    var kind;
+    // The clementine-tools server is an in-process bundle
+    if (name === 'clementine-tools' || name === 'kernel') kind = 'builtin';
+    else if (type === 'http' || type === 'sse') kind = 'external';
+    else if (/^(sf|gh|gcloud|kubectl|docker|aws|az|terraform)$/.test(cmd) || /\\b(sf|gh|gcloud|kubectl)$/.test(cmd)) kind = 'shell';
+    else kind = 'external';  // default for stdio external MCP
+    buckets[kind].push(s);
+  }
+  var html = '';
+  // Header strip
+  html += '<div style="margin-bottom:18px"><h2 style="margin:0 0 4px;font-size:18px;font-weight:600;color:var(--text-primary)">Tools &amp; MCP catalog</h2>'
+    +    '<div style="font-size:12px;color:var(--text-muted)">'+ esc(servers.length) +' MCP server' + (servers.length === 1 ? '' : 's') + ' configured. Click any task in the Tasks tab to bind specific tools to that task.</div></div>';
+  // Four-card taxonomy. Each section is a labeled bucket of cards.
+  var sections = [
+    { key: 'builtin',  label: 'Built-in',                desc: 'Claude SDK native tools — always available to every task at the agent profile\\x27s permission tier.' },
+    { key: 'custom',   label: 'Custom in-process MCP',   desc: 'MCP servers defined in clementine\\x27s code, loaded inside the daemon process.' },
+    { key: 'shell',    label: 'Shell commands',          desc: 'Local CLI binaries (sf, gh, gcloud…) wrapped as MCP servers.' },
+    { key: 'external', label: 'External MCP servers',    desc: 'Third-party MCP servers reached over stdio, SSE, or HTTP.' },
+  ];
+  for (var k = 0; k < sections.length; k++) {
+    var sec = sections[k];
+    var bucket = buckets[sec.key] || [];
+    html += '<div style="margin-bottom:24px">';
+    html += '<div style="display:flex;align-items:baseline;gap:10px;margin-bottom:10px">'
+      +      '<h3 style="margin:0;font-size:14px;font-weight:600;color:var(--text-primary)">' + esc(sec.label) + '</h3>'
+      +      '<span style="font-size:11px;color:var(--text-muted);font-weight:500">' + bucket.length + '</span>'
+      +    '</div>';
+    html += '<div style="font-size:11px;color:var(--text-muted);margin-bottom:12px">' + esc(sec.desc) + '</div>';
+    if (bucket.length === 0) {
+      html += '<div class="empty-state" style="padding:14px;color:var(--text-muted);font-size:12px;background:var(--bg-secondary);border:1px dashed var(--border);border-radius:6px">No servers in this bucket.</div>';
+    } else {
+      html += '<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px">';
+      for (var b = 0; b < bucket.length; b++) html += renderMcpCatalogCard(bucket[b], statusMap);
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+  panel.innerHTML = html;
+}
+
+// Render one MCP server card. Status pill colors mirror the PRD's five
+// states (connected / failed / needs-auth / pending / disabled). The
+// statusMap shape comes from gw.getMcpStatus() — varies a bit between
+// SDK versions; we defensively probe for connected/healthy fields.
+function renderMcpCatalogCard(server, statusMap) {
+  var name = server.name || '(unnamed)';
+  var transport = server.type || 'stdio';
+  var enabled = server.enabled !== false;
+  var status = statusMap && statusMap[name];
+  var statusKind, statusLabel, statusColor;
+  if (!enabled) { statusKind = 'disabled'; statusLabel = 'disabled'; statusColor = 'var(--text-muted)'; }
+  else if (status && (status.connected === true || status.status === 'connected' || status.healthy === true)) { statusKind = 'connected'; statusLabel = 'connected'; statusColor = 'var(--green)'; }
+  else if (status && (status.needsAuth === true || status.status === 'needs-auth')) { statusKind = 'needsauth'; statusLabel = 'needs auth'; statusColor = 'var(--yellow)'; }
+  else if (status && (status.connected === false || status.status === 'failed' || status.error)) { statusKind = 'failed'; statusLabel = 'failed'; statusColor = 'var(--red)'; }
+  else { statusKind = 'pending'; statusLabel = 'pending'; statusColor = 'var(--text-muted)'; }
+  var toolCount = (status && (status.toolCount != null ? status.toolCount : (Array.isArray(status.tools) ? status.tools.length : null))) || (Array.isArray(server.exposedTools) ? server.exposedTools.length : null);
+  var lastChecked = status && (status.lastCheckedAt || status.checkedAt || status.updatedAt);
+  var src = server.source === 'auto-detected' ? 'auto-detected' : 'user-configured';
+  var lastError = status && status.error;
+  var html = ''
+    + '<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:8px">'
+    +   '<div style="display:flex;align-items:center;gap:8px">'
+    +     '<div style="font-size:13px;font-weight:600;color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + esc(name) + '">' + esc(name) + '</div>'
+    +     '<span style="display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:500;color:' + statusColor + ';background:' + statusColor + '20;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:0.04em">'
+    +       '<span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:' + statusColor + '"></span>' + esc(statusLabel)
+    +     '</span>'
+    +   '</div>'
+    +   '<div style="display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-muted)">'
+    +     '<span style="text-transform:uppercase;letter-spacing:0.04em">' + esc(transport) + '</span>'
+    +     '<span>·</span>'
+    +     '<span>' + esc(src) + '</span>'
+    +     (toolCount != null ? '<span>·</span><span>' + esc(toolCount) + ' tool' + (toolCount === 1 ? '' : 's') + '</span>' : '')
+    +   '</div>'
+    + (server.description ? '<div style="font-size:12px;color:var(--text-secondary);line-height:1.45">' + esc(String(server.description).slice(0, 240)) + '</div>' : '')
+    + (lastError ? '<div style="font-size:11px;color:var(--red);background:rgba(239,68,68,0.06);padding:6px 8px;border-radius:4px;word-break:break-word">' + esc(String(lastError).slice(0, 200)) + '</div>' : '')
+    + (lastChecked ? '<div style="font-size:11px;color:var(--text-muted)">Checked ' + esc(timeAgo(lastChecked)) + '</div>' : '')
+    +   '<div style="display:flex;gap:6px;margin-top:4px;flex-wrap:wrap">'
+    +     '<button class="btn-sm" onclick="toggleMcpServerEnabled(\\x27' + jsStr(name) + '\\x27,' + (enabled ? 'false' : 'true') + ')" title="' + (enabled ? 'Disable this MCP server for all tasks' : 'Enable this MCP server') + '">' + (enabled ? 'Disable' : 'Enable') + '</button>'
+    +     '<button class="btn-sm" onclick="reconnectMcpServer(\\x27' + jsStr(name) + '\\x27)" title="Clear cached status — next query will reconnect">Reconnect</button>'
+    +     '<button class="btn-sm" onclick="openMcpServerEditModal(\\x27' + jsStr(name) + '\\x27)" title="View or edit this server\\x27s config">Edit</button>'
+    +   '</div>'
+    + '</div>';
+  return html;
+}
+
+// PRD Phase 2.1: Reconnect — invalidate cached status server-side, refresh
+// the catalog so the user sees the pending pill until the next query
+// handshake repopulates it.
+async function reconnectMcpServer(name) {
+  try {
+    var r = await apiFetch('/api/mcp-servers/' + encodeURIComponent(name) + '/reconnect', { method: 'POST' });
+    var d = await r.json();
+    if (!r.ok || d.ok === false) {
+      toast('Reconnect failed: ' + (d.error || 'unknown'), 'error');
+      return;
+    }
+    toast(d.message || 'Reconnect queued.', 'info');
+    refreshToolsMcpCatalog();
+  } catch (e) {
+    toast('Reconnect failed: ' + String(e), 'error');
+  }
+}
+
+// PRD Phase 2.1: Edit modal. User-managed servers get an editable config
+// form; auto-detected servers render the same fields read-only with a note
+// pointing the user at the underlying config file.
+async function openMcpServerEditModal(name) {
+  // Pull the latest server config — don't trust whatever was on the rendered card.
+  var server;
+  try {
+    var r = await apiFetch('/api/mcp-servers');
+    var d = await r.json();
+    server = (d && d.servers || []).find(function(s) { return s.name === name; });
+  } catch (e) {
+    toast('Failed to load server: ' + String(e), 'error');
+    return;
+  }
+  if (!server) { toast('Server "' + name + '" not found', 'error'); return; }
+  var modal = document.getElementById('mcp-edit-modal');
+  if (!modal) { toast('Edit modal missing from DOM', 'error'); return; }
+  document.getElementById('mcp-edit-title').textContent = 'Edit: ' + name;
+  var roNote = document.getElementById('mcp-edit-readonly-note');
+  var isReadOnly = server.source === 'auto-detected';
+  if (roNote) roNote.style.display = isReadOnly ? '' : 'none';
+  // Set fields
+  document.getElementById('mcp-edit-name').value = server.name || '';
+  document.getElementById('mcp-edit-name').disabled = true;  // never rename via this path
+  document.getElementById('mcp-edit-type').value = server.type || 'stdio';
+  document.getElementById('mcp-edit-type').disabled = isReadOnly;
+  document.getElementById('mcp-edit-description').value = server.description || '';
+  document.getElementById('mcp-edit-description').disabled = isReadOnly;
+  document.getElementById('mcp-edit-enabled').checked = server.enabled !== false;
+  document.getElementById('mcp-edit-enabled').disabled = isReadOnly;
+  document.getElementById('mcp-edit-command').value = server.command || '';
+  document.getElementById('mcp-edit-command').disabled = isReadOnly;
+  document.getElementById('mcp-edit-args').value = Array.isArray(server.args) ? server.args.join('\\n') : '';
+  document.getElementById('mcp-edit-args').disabled = isReadOnly;
+  document.getElementById('mcp-edit-url').value = server.url || '';
+  document.getElementById('mcp-edit-url').disabled = isReadOnly;
+  document.getElementById('mcp-edit-headers').value = server.headers && Object.keys(server.headers).length ? JSON.stringify(server.headers, null, 2) : '';
+  document.getElementById('mcp-edit-headers').disabled = isReadOnly;
+  document.getElementById('mcp-edit-env').value = server.env && Object.keys(server.env).length ? JSON.stringify(server.env, null, 2) : '';
+  document.getElementById('mcp-edit-env').disabled = isReadOnly;
+  // Show the right transport fields
+  syncMcpEditTransportRows();
+  // Save button hidden for read-only auto-detected servers.
+  var saveBtn = document.getElementById('mcp-edit-save');
+  if (saveBtn) saveBtn.style.display = isReadOnly ? 'none' : '';
+  modal.classList.add('show');
+}
+
+function closeMcpServerEditModal() {
+  var modal = document.getElementById('mcp-edit-modal');
+  if (modal) modal.classList.remove('show');
+}
+
+// Show only the row matching the selected transport (stdio vs http/sse).
+function syncMcpEditTransportRows() {
+  var t = (document.getElementById('mcp-edit-type') || {}).value || 'stdio';
+  var stdioRow = document.getElementById('mcp-edit-stdio-rows');
+  var httpRow = document.getElementById('mcp-edit-http-rows');
+  if (stdioRow) stdioRow.style.display = (t === 'stdio') ? '' : 'none';
+  if (httpRow) httpRow.style.display = (t === 'http' || t === 'sse') ? '' : 'none';
+}
+
+async function saveMcpServerEdit() {
+  var name = (document.getElementById('mcp-edit-name') || {}).value;
+  if (!name) return;
+  var type = document.getElementById('mcp-edit-type').value;
+  var description = document.getElementById('mcp-edit-description').value.trim();
+  var enabled = !!document.getElementById('mcp-edit-enabled').checked;
+  var commandRaw = document.getElementById('mcp-edit-command').value.trim();
+  var argsRaw = document.getElementById('mcp-edit-args').value;
+  var url = document.getElementById('mcp-edit-url').value.trim();
+  var headersRaw = document.getElementById('mcp-edit-headers').value.trim();
+  var envRaw = document.getElementById('mcp-edit-env').value.trim();
+
+  var headers, env;
+  if (headersRaw) {
+    try {
+      headers = JSON.parse(headersRaw);
+      if (!headers || typeof headers !== 'object' || Array.isArray(headers)) throw new Error('Headers must be a JSON object');
+    } catch (e) {
+      toast('Headers JSON invalid: ' + (e.message || String(e)), 'error');
+      document.getElementById('mcp-edit-headers').focus();
+      return;
+    }
+  }
+  if (envRaw) {
+    try {
+      env = JSON.parse(envRaw);
+      if (!env || typeof env !== 'object' || Array.isArray(env)) throw new Error('Env must be a JSON object');
+    } catch (e) {
+      toast('Env JSON invalid: ' + (e.message || String(e)), 'error');
+      document.getElementById('mcp-edit-env').focus();
+      return;
+    }
+  }
+  var args = argsRaw.split(/\\r?\\n/).map(function(s){ return s.trim(); }).filter(Boolean);
+  var body = { type: type, description: description, enabled: enabled };
+  if (type === 'stdio') {
+    if (!commandRaw) { toast('Command is required for stdio transport', 'error'); document.getElementById('mcp-edit-command').focus(); return; }
+    body.command = commandRaw;
+    body.args = args;
+    if (env) body.env = env;
+  } else {
+    if (!url) { toast('URL is required for ' + type + ' transport', 'error'); document.getElementById('mcp-edit-url').focus(); return; }
+    body.url = url;
+    if (headers) body.headers = headers;
+  }
+  try {
+    var r = await apiFetch('/api/mcp-servers/' + encodeURIComponent(name), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    var d = await r.json();
+    if (!r.ok || d.error) {
+      toast('Save failed: ' + (d.error || 'unknown'), 'error');
+      return;
+    }
+    toast('Saved.', 'success');
+    closeMcpServerEditModal();
+    refreshToolsMcpCatalog();
+  } catch (e) {
+    toast('Save failed: ' + String(e), 'error');
+  }
+}
+
+// PUT helper for the Toggle button. Lazy: re-fetches the catalog after
+// the round-trip so the new state is reflected. Future slice will swap
+// to optimistic update + rollback on error.
+async function toggleMcpServerEnabled(name, nextEnabled) {
+  try {
+    var r = await apiFetch('/api/mcp-servers/' + encodeURIComponent(name), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: nextEnabled }),
+    });
+    var d = await r.json();
+    if (!r.ok || d.error) {
+      toast('Toggle failed: ' + (d.error || 'unknown'), 'error');
+      return;
+    }
+    toast(name + ' is now ' + (nextEnabled ? 'enabled' : 'disabled'), 'success');
+    refreshToolsMcpCatalog();
+  } catch (e) {
+    toast('Toggle failed: ' + String(e), 'error');
+  }
+}
+
 async function refreshCron() {
   try {
     // Fetch operations + cross-job recent runs in parallel for the three-zone

package/dist/gateway/router.d.ts

@@ -255,6 +255,15 @@ export declare class Gateway {
         }>;
         updatedAt: string;
     };
+    /** PRD Phase 2.1: thin pass-through for the dashboard's Reconnect button. */
+    invalidateMcpStatus(serverName: string): {
+        servers: Array<{
+            name: string;
+            status: string;
+        }>;
+        updatedAt: string;
+        cleared: boolean;
+    };
     getPresenceInfo(sessionKey: string): {
         model: string;
         project: string | null;

package/dist/gateway/router.js

@@ -2241,6 +2241,10 @@ export class Gateway {
     getMcpStatus() {
         return this.assistant.getMcpStatus();
     }
+    /** PRD Phase 2.1: thin pass-through for the dashboard's Reconnect button. */
+    invalidateMcpStatus(serverName) {
+        return this.assistant.invalidateMcpStatus(serverName);
+    }
     getPresenceInfo(sessionKey) {
         const sess = this.sessions.get(sessionKey);
         const modelName = sess?.model

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clementine-agent",
-  "version": "1.18.80",
+  "version": "1.18.82",
   "description": "Clementine — Personal AI Assistant (TypeScript)",
   "type": "module",
   "main": "dist/index.js",