synabun 2026.4.20-beta.2 → 2026.4.20-beta.3

package/CHANGELOG.md

@@ -4,6 +4,23 @@ Raw internal changelogs are archived in [changelog/](changelog/).
 
 ## 2026-04-20
 
+### Added — Install Toggles For Claude / Gemini / Codex / OpenCode In Onboarding Step 5
+- **Step 5 rewritten as live install toggles, not copy-paste CLI cards** — In `neural-interface/public/onboarding.html`, replaced the `.tool-grid` tool-card selector + `#mcpSetupPanel` copy-snippet block with a `.mcp-toggle-list` 2×2 grid containing one `.mcp-toggle-row` per installable CLI (Claude Code → `~/.claude.json`, Gemini CLI → `~/.gemini/settings.json`, Codex CLI → `~/.codex/config.toml`, OpenCode → `~/.config/opencode/config.json`). Each row shows the target config path and a pill `.mtr-toggle` that, on click, fires `POST` (install) or `DELETE` (uninstall) against the provider's `api` field in the new `TOOLS` constant (`/api/claude-code/mcp`, `/api/setup/gemini/mcp`, `/api/setup/codex/mcp`, `/api/opencode/mcp`). New `onToolIntegrationStep()` hook fetches each provider's install state on step enter and hydrates toggles so pre-connected providers already show as "on". `toggleTool(id)` flips a `.busy` state during the in-flight fetch and surfaces outcomes via the existing `showMascotToast()` overlay.
+  - New `wizardState.enabledTools` array tracks which providers were toggled on during this onboarding pass. `validateStep(5)` now advances once any tool is enabled OR the user copied the generic JSON. `wizardState.selectedTool` auto-defaults to the first enabled tool (falls back to `claude`) so Step 6's ruleset preview still resolves the correct instruction-file format.
+  - `onCompleteStep()` rewrites `#restartToolName` to a comma-separated list of every enabled tool and auto-registers Claude Code hooks globally only when Claude was one of the enabled tools (previously tied to a single `selectedTool`). Renamed the Step 7 checklist item from "MCP config copied" to "AI tool integration enabled".
+  - Collapsed `TOOLS` from 5 entries (`claude/cursor/windsurf/codex/other`) to 4 installable entries with `{ id, name, instrFile, format, api, configPath }` metadata that drives both the toggle UI and `onRulesetStep()` — the old hardcoded `formatMap` in `onRulesetStep` was dropped in favour of `tool.format`.
+- **"Other providers" collapsible for Cursor / Windsurf / etc.** — Below the toggle grid, new `.mcp-other-section` collapsible block (`#mcpOtherHeader` click toggles `.open` class + `#mcpOtherBody` display, with a rotating chevron) keeps the generic `mcpServers.SynaBun` JSON preview + copy button for tools without a server integration. `getGenericMcpJson()` builds the JSON from `wizardState.projectRoot` / `wizardState.packageRoot`. The existing `#mcpCodeWrap` copy handler still flips `wizardState.mcpWritten = true`, preserving advance-on-copy semantics for paste-only setups.
+
+### Added — `DELETE /api/opencode/mcp` Endpoint To Uninstall SynaBun From OpenCode Config
+- **File-rewrite delete** — In `neural-interface/server.js`, added `app.delete('/api/opencode/mcp', ...)` that reads `~/.config/opencode/config.json`, deletes `cfg.mcp.SynaBun`, drops the parent `mcp` key when it becomes empty, and writes the file back. Name defaults to `SynaBun` but accepts `req.body.name` / `req.query.name` for symmetry with the `POST` signature. OpenCode was previously the only provider in the Setup / onboarding surface without an uninstall path — the new Step 5 toggles need `DELETE` to flip the pill off, so the runtime-only `ocpProxy('DELETE', ...)` call was deliberately omitted (config.json is the source of truth; OpenCode re-reads it on next launch).
+
+### Changed — OpenCode MCP Endpoints Persist-First, No Longer Require `_ocpReady`
+- **`GET /api/opencode/mcp` now reads `config.json` directly** — Was `if (!_ocpReady) return { ok: false }` + `ocpProxy('GET', '/mcp')`, which made the toggle state unknown whenever OpenCode wasn't running. Rewritten to read `~/.config/opencode/config.json` and report `connected = !!(cfg?.mcp && cfg.mcp.SynaBun)`, returning `{ ok: true, connected, runtimeReady: !!_ocpReady, data }` so the onboarding toggle reflects the persisted install state regardless of whether the OpenCode embedded server happens to be up.
+- **`POST /api/opencode/mcp` persists to file first, runtime register is best-effort** — Was `if (!_ocpReady) return 503` before any file write, so an onboarding install couldn't succeed until the user had first launched OpenCode. Now: when no body is supplied, defaults `name = 'SynaBun'` with canonical `{ command: 'node', args: [mcpIndexPath], env: { DOTENV_PATH, SYNABUN_DATA_HOME, MEMORY_DATA_DIR } }` — parity with the Gemini/Codex endpoints that take no body. `persistMcpToOpencodeConfig(name, mcpConfig)` runs unconditionally and returns a 500 only if the filesystem write itself fails. `ocpProxy('POST', '/mcp', ...)` only runs when `_ocpReady` is truthy and is wrapped in try/catch — a runtime-register failure is logged but doesn't fail the request since the config was already persisted.
+
+### Fixed — Onboarding Step 5 Toggle Grid Clipped Second Column Off-Screen
+- **`min-width: auto` on grid items overrode `1fr` allocation** — After switching `.mcp-toggle-list` from `display: flex; flex-direction: column` to `display: grid; grid-template-columns: 1fr 1fr` for the 2×2 layout, the second column (Gemini CLI, OpenCode) rendered past the visible viewport — toggle buttons and half the config-path strings were clipped. CSS Grid items default to `min-width: auto` (resolved to min-content), and `.mtr-path` has `white-space: nowrap`, so each cell's min-content width was the full config-path string (`~/.config/opencode/config.json`) — that forced each cell wider than `1fr`, pushing the grid's total width past its container. Added `min-width: 0` to `.mcp-toggle-row` so the grid cell can shrink below its intrinsic content width, and changed `.mcp-toggle-row .mtr-body` from `flex: 1` to `flex: 1 1 0` + `overflow: hidden` so the nowrap path ellipsizes cleanly inside the flex child instead of blowing out the row.
+
 ### Fixed — OpenCode CLI Update Command Fails With EACCES On macOS Root-Owned Global `node_modules`
 - **`npm install -g opencode-ai@latest` blocked by filesystem permissions** — The prior "Unified CLI Update Commands via npm" unification set `UPDATE_COMMANDS['opencode']` in `neural-interface/public/shared/ui-tool-updates.js` to `npm install -g opencode-ai@latest`. On macOS installations where `/usr/local/lib/node_modules` is root:wheel-owned (the default when Node was installed via the official pkg installer), the unprivileged `npm install -g` cannot `rename` the staging directory into place and errors with `npm error code EACCES` / `permission denied, rename '.../node_modules/opencode-ai' -> '.../node_modules/.opencode-ai-<hash>'`, so the click-through update path from the badge silently failed when the user clicked it. Switched `UPDATE_COMMANDS['opencode']` to `'opencode upgrade'` — OpenCode's built-in self-update subcommand (visible in `opencode --help` as `opencode upgrade [target]  upgrade opencode to the latest or a specific version`). It detects the install method automatically (curl-install, brew, npm -g) and updates in place without requiring sudo or a user-owned node prefix (nvm/fnm/volta/asdf), so the badge's click-intercept now runs a self-contained update in the terminal shell tab that succeeds regardless of how OpenCode was originally installed.
 

package/neural-interface/public/onboarding.html

@@ -443,6 +443,98 @@
     white-space: nowrap;
   }
 
+  /* ── MCP Toggle List (Step 5) — 2×2 grid ── */
+  .mcp-toggle-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-bottom: 14px;
+  }
+  .mcp-toggle-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    border: 1px solid var(--b-light);
+    border-radius: var(--r-card);
+    background: var(--s-subtle);
+    transition: border-color 0.25s ease, background 0.25s ease;
+    min-width: 0; /* allow grid cell to shrink below intrinsic width */
+  }
+  .mcp-toggle-row.connected {
+    border-color: var(--accent-border);
+    background: var(--accent-bg);
+  }
+  .mcp-toggle-row .mtr-body { flex: 1 1 0; min-width: 0; overflow: hidden; }
+  .mcp-toggle-row .mtr-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--t-bright);
+    margin-bottom: 2px;
+  }
+  .mcp-toggle-row .mtr-path {
+    font-size: 11px;
+    color: var(--t-muted);
+    font-family: var(--mono, monospace);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .mcp-toggle-row .mtr-toggle {
+    flex-shrink: 0;
+    width: 36px; height: 20px;
+    border-radius: 10px;
+    background: var(--s-hover);
+    border: 1px solid var(--b-light);
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s ease, border-color 0.2s ease;
+    padding: 0;
+  }
+  .mcp-toggle-row .mtr-toggle::after {
+    content: '';
+    position: absolute;
+    top: 2px; left: 2px;
+    width: 14px; height: 14px;
+    border-radius: 50%;
+    background: var(--t-secondary);
+    transition: left 0.2s ease, background 0.2s ease;
+  }
+  .mcp-toggle-row .mtr-toggle.on {
+    background: var(--accent-border);
+    border-color: var(--accent-border);
+  }
+  .mcp-toggle-row .mtr-toggle.on::after {
+    left: 18px;
+    background: var(--t-bright);
+  }
+  .mcp-toggle-row .mtr-toggle:disabled,
+  .mcp-toggle-row .mtr-toggle.busy {
+    opacity: 0.4;
+    cursor: wait;
+  }
+  .mcp-other-section {
+    border: 1px solid var(--b-light);
+    border-radius: var(--r-card);
+    background: var(--s-subtle);
+    overflow: hidden;
+  }
+  .mcp-other-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--t-secondary);
+    user-select: none;
+    transition: background 0.2s ease;
+  }
+  .mcp-other-header:hover { background: var(--s-hover); }
+  .mcp-other-chevron { transition: transform 0.2s ease; }
+  .mcp-other-section.open .mcp-other-chevron { transform: rotate(180deg); }
+  .mcp-other-body { padding: 0 14px 12px; }
+
   /* ── Dependency List ── */
   .dep-list {
     list-style: none;
@@ -1040,15 +1132,21 @@
         <span class="mascot-toast" id="mascotToast"></span>
       </div>
       <h2>AI Tool Integration</h2>
-      <p class="subtitle">Select your AI coding tool to get setup instructions.</p>
-      <div class="tool-grid" id="toolGrid"></div>
-      <div id="mcpSetupPanel" style="display:none;">
-        <div id="mcpSetupLabel" style="font-size:12px;color:var(--t-secondary);margin-bottom:6px;"></div>
-        <div class="code-copy-wrap" id="mcpCodeWrap">
-          <div class="instructions-preview" id="mcpSetupCode"></div>
-          <span class="code-copy-label">copy</span>
+      <p class="subtitle">Toggle on the AI coding tools you use. SynaBun registers itself with each one automatically.</p>
+      <div class="mcp-toggle-list" id="mcpToggleList"></div>
+      <div class="mcp-other-section" id="mcpOtherSection">
+        <div class="mcp-other-header" id="mcpOtherHeader">
+          <span>Other providers (Cursor, Windsurf, etc.)</span>
+          <svg class="mcp-other-chevron" viewBox="0 0 24 24" width="14" height="14"><polyline points="6 9 12 15 18 9" fill="none" stroke="currentColor" stroke-width="2"/></svg>
+        </div>
+        <div class="mcp-other-body" id="mcpOtherBody" style="display:none;">
+          <div style="font-size:12px;color:var(--t-secondary);margin-bottom:6px;">Add this MCP server JSON to your tool's config file:</div>
+          <div class="code-copy-wrap" id="mcpCodeWrap">
+            <div class="instructions-preview" id="mcpSetupCode"></div>
+            <span class="code-copy-label">copy</span>
+          </div>
+          <div style="margin-top:6px;font-size:11px;color:var(--t-muted);">Cursor: Settings &rarr; MCP Servers, or <code>.cursor/mcp.json</code>. Windsurf: <code>~/.codeium/windsurf/mcp_config.json</code>.</div>
         </div>
-        <div id="mcpSetupHint" style="margin-top:6px;font-size:11px;color:var(--t-muted);"></div>
       </div>
     </div>
 
@@ -1195,6 +1293,7 @@ const wizardState = {
   collectionDisplayName: 'Claude Memory',
   dbLocationPath: null,
   selectedTool: null,
+  enabledTools: [],    // tool ids toggled on via Step 5 install toggles
   projectRoot: '',
   packageRoot: '',
   buildReady: false,
@@ -1202,12 +1301,13 @@ const wizardState = {
   projects: [],
 };
 
+// Tools with server-side MCP install/uninstall endpoints. Each row maps a
+// toggle to the POST/DELETE endpoint that writes the provider's config file.
 const TOOLS = [
-  { id: 'claude',   name: 'Claude Code',  instrFile: 'CLAUDE.md' },
-  { id: 'cursor',   name: 'Cursor',       instrFile: '.cursorrules' },
-  { id: 'windsurf', name: 'Windsurf',     instrFile: '.windsurfrules' },
-  { id: 'codex',    name: 'Codex',        instrFile: 'AGENTS.md' },
-  { id: 'other',    name: 'Other',        instrFile: 'AGENTS.md' },
+  { id: 'claude',   name: 'Claude Code', instrFile: 'CLAUDE.md', format: 'claude',  api: '/api/claude-code/mcp', configPath: '~/.claude.json' },
+  { id: 'gemini',   name: 'Gemini CLI',  instrFile: 'GEMINI.md', format: 'gemini',  api: '/api/setup/gemini/mcp', configPath: '~/.gemini/settings.json' },
+  { id: 'codex',    name: 'Codex CLI',   instrFile: 'AGENTS.md', format: 'codex',   api: '/api/setup/codex/mcp',  configPath: '~/.codex/config.toml' },
+  { id: 'opencode', name: 'OpenCode',    instrFile: 'AGENTS.md', format: 'generic', api: '/api/opencode/mcp',     configPath: '~/.config/opencode/config.json' },
 ];
 
 // ═══════════════════════════════════════════
@@ -1330,7 +1430,13 @@ function validateStep(n) {
       return true;
     }
     case 5: {
-      if (!wizardState.selectedTool) return false;
+      // Allow advancing once any tool is toggled on OR the user copied the generic JSON.
+      if (wizardState.enabledTools.length === 0 && !wizardState.mcpWritten) return false;
+      // Default the ruleset preview (Step 6) + restart hint (Step 7) to the first
+      // toggled-on tool; fall back to Claude if only the generic JSON was copied.
+      if (!wizardState.selectedTool) {
+        wizardState.selectedTool = wizardState.enabledTools[0] || 'claude';
+      }
       return true;
     }
     default:
@@ -1358,6 +1464,7 @@ async function onStepEnter(n) {
     }
   }
   if (n === 3) await onBuildStep();
+  if (n === 5) await onToolIntegrationStep();
   if (n === 6) await onRulesetStep();
   if (n === 7) await onCompleteStep();
   // Re-measure after async content loads — but only if user is still on this step
@@ -2133,73 +2240,110 @@ document.getElementById('buildBtn').addEventListener('click', async () => {
 }
 
 // ═══════════════════════════════════════════
-// STEP 5: Tool Selection
+// STEP 5: Tool Integration (install toggles + generic JSON fallback)
 // ═══════════════════════════════════════════
 
-const $toolGrid = document.getElementById('toolGrid');
+const $toggleList = document.getElementById('mcpToggleList');
+
+// Render one toggle row per installable tool. Statuses populate on enter.
 TOOLS.forEach(t => {
-  const card = document.createElement('div');
-  card.className = 'tool-card';
-  card.dataset.id = t.id;
-  card.innerHTML = `<div class="tname">${t.name}</div>`;
-  card.addEventListener('click', () => selectTool(t.id));
-  $toolGrid.appendChild(card);
+  const row = document.createElement('div');
+  row.className = 'mcp-toggle-row';
+  row.dataset.id = t.id;
+  row.innerHTML = `
+    <div class="mtr-body">
+      <div class="mtr-name">${t.name}</div>
+      <div class="mtr-path" data-role="path">${t.configPath}</div>
+    </div>
+    <button class="mtr-toggle" data-role="toggle" aria-label="Toggle ${t.name}"></button>
+  `;
+  row.querySelector('[data-role="toggle"]').addEventListener('click', () => toggleTool(t.id));
+  $toggleList.appendChild(row);
 });
 
-function getMcpSetup(id) {
+async function onToolIntegrationStep() {
+  // Fetch each provider's install state so toggles reflect reality.
+  await Promise.all(TOOLS.map(async (t) => {
+    try {
+      const res = await fetch(t.api);
+      const data = await res.json();
+      const connected = !!data.connected;
+      updateToggleRow(t.id, { connected });
+      if (connected && !wizardState.enabledTools.includes(t.id)) {
+        wizardState.enabledTools.push(t.id);
+      }
+    } catch { updateToggleRow(t.id, { connected: false }); }
+  }));
+}
+
+function updateToggleRow(id, { connected, busy }) {
+  const row = $toggleList.querySelector(`[data-id="${id}"]`);
+  if (!row) return;
+  const toggle = row.querySelector('[data-role="toggle"]');
+  const path = row.querySelector('[data-role="path"]');
+  const tool = TOOLS.find(t => t.id === id);
+  if (typeof connected === 'boolean') {
+    row.classList.toggle('connected', connected);
+    toggle.classList.toggle('on', connected);
+    path.textContent = connected ? `Registered in ${tool.configPath}` : tool.configPath;
+  }
+  if (typeof busy === 'boolean') {
+    toggle.classList.toggle('busy', busy);
+    toggle.disabled = busy;
+  }
+}
+
+async function toggleTool(id) {
+  const tool = TOOLS.find(t => t.id === id);
+  if (!tool) return;
+  const row = $toggleList.querySelector(`[data-id="${id}"]`);
+  const toggle = row.querySelector('[data-role="toggle"]');
+  const wasOn = toggle.classList.contains('on');
+  updateToggleRow(id, { busy: true });
+  try {
+    const res = await fetch(tool.api, { method: wasOn ? 'DELETE' : 'POST' });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok || data.ok === false) {
+      showMascotToast(data.error || `${tool.name} ${wasOn ? 'uninstall' : 'install'} failed`);
+      updateToggleRow(id, { busy: false });
+      return;
+    }
+    const nowOn = !wasOn;
+    updateToggleRow(id, { connected: nowOn, busy: false });
+    if (nowOn) {
+      if (!wizardState.enabledTools.includes(id)) wizardState.enabledTools.push(id);
+      wizardState.mcpWritten = true;
+      showMascotToast(`${tool.name} connected`);
+    } else {
+      wizardState.enabledTools = wizardState.enabledTools.filter(x => x !== id);
+      showMascotToast(`${tool.name} disconnected`);
+    }
+  } catch (err) {
+    showMascotToast(`Failed: ${err.message}`);
+    updateToggleRow(id, { busy: false });
+  }
+}
+
+// Generic MCP JSON for tools without a server integration (Cursor, Windsurf, other).
+function getGenericMcpJson() {
   const dataHome = (wizardState.projectRoot || '').replace(/\\/g, '/');
   const pkgRoot = (wizardState.packageRoot || dataHome).replace(/\\/g, '/');
   const mcpPath = pkgRoot + '/mcp-server/run.mjs';
   const envPath = dataHome + '/.env';
   const env = { DOTENV_PATH: envPath, SYNABUN_DATA_HOME: dataHome, MEMORY_DATA_DIR: dataHome + '/mcp-data' };
-
-  if (id === 'claude') {
-    const envFlags = Object.entries(env).map(([k, v]) => `-e "${k}=${v}"`).join(' ');
-    return {
-      label: 'Run this in your terminal to register SynaBun globally:',
-      code: `claude mcp add SynaBun node "${mcpPath}" -s user ${envFlags}`,
-      hint: 'Registers SynaBun globally. Restart Claude Code after running.',
-    };
-  }
-  if (id === 'cursor') {
-    const json = JSON.stringify({ mcpServers: { SynaBun: { command: 'node', args: [mcpPath], env } } }, null, 2);
-    return {
-      label: 'Add to Cursor Settings > MCP Servers, or paste into .cursor/mcp.json:',
-      code: json,
-      hint: 'Settings > MCP > Add Server, or save as .cursor/mcp.json',
-    };
-  }
-  if (id === 'windsurf') {
-    const json = JSON.stringify({ mcpServers: { SynaBun: { command: 'node', args: [mcpPath], env } } }, null, 2);
-    return {
-      label: 'Add to ~/.codeium/windsurf/mcp_config.json:',
-      code: json,
-      hint: 'Cascade sidebar > hammer icon > Configure',
-    };
-  }
-  // codex, other
-  const json = JSON.stringify({ mcpServers: { SynaBun: { command: 'node', args: [mcpPath], env } } }, null, 2);
-  return {
-    label: 'Add to your project\'s .mcp.json:',
-    code: json,
-    hint: 'Save as .mcp.json in your project root.',
-  };
+  return JSON.stringify({ mcpServers: { SynaBun: { command: 'node', args: [mcpPath], env } } }, null, 2);
 }
 
-function selectTool(id) {
-  wizardState.selectedTool = id;
-  $toolGrid.querySelectorAll('.tool-card').forEach(c => {
-    c.classList.toggle('selected', c.dataset.id === id);
-  });
-
-  const setup = getMcpSetup(id);
-  document.getElementById('mcpSetupLabel').textContent = setup.label;
-  document.getElementById('mcpSetupCode').textContent = setup.code;
-  document.getElementById('mcpSetupHint').textContent = setup.hint;
-  document.getElementById('mcpSetupPanel').style.display = '';
-
+// "Other providers" collapsible — shows the generic MCP JSON for paste-based setups.
+const $otherHeader = document.getElementById('mcpOtherHeader');
+const $otherBody = document.getElementById('mcpOtherBody');
+const $otherSection = document.getElementById('mcpOtherSection');
+$otherHeader.addEventListener('click', () => {
+  const isOpen = $otherSection.classList.toggle('open');
+  $otherBody.style.display = isOpen ? '' : 'none';
+  if (isOpen) document.getElementById('mcpSetupCode').textContent = getGenericMcpJson();
   requestAnimationFrame(() => resizeViewport(currentStep));
-}
+});
 
 function showMascotToast(msg, duration = 2000) {
   const toast = document.getElementById('mascotToast');
@@ -2211,6 +2355,7 @@ function showMascotToast(msg, duration = 2000) {
 
 document.getElementById('mcpCodeWrap').addEventListener('click', () => {
   const code = document.getElementById('mcpSetupCode').textContent;
+  if (!code) return;
   navigator.clipboard.writeText(code);
   wizardState.mcpWritten = true;
   const label = document.querySelector('#mcpCodeWrap .code-copy-label');
@@ -2227,10 +2372,7 @@ document.getElementById('mcpCodeWrap').addEventListener('click', () => {
 async function onRulesetStep() {
   const tool = TOOLS.find(t => t.id === wizardState.selectedTool) || TOOLS[0];
   document.getElementById('rulesetFileName').textContent = tool.instrFile;
-
-  // Map tool to API format
-  const formatMap = { claude: 'claude', cursor: 'cursor', windsurf: 'generic', codex: 'codex', other: 'generic' };
-  const format = formatMap[tool.id] || 'generic';
+  const format = tool.format || 'generic';
 
   const $code = document.getElementById('rulesetCode');
   if ($code.dataset.loadedFormat === format) return; // already loaded
@@ -2270,11 +2412,14 @@ document.getElementById('rulesetCodeWrap').addEventListener('click', () => {
 async function onCompleteStep() {
   renderHappyBun();
 
-  const tool = TOOLS.find(t => t.id === wizardState.selectedTool) || TOOLS[0];
-  document.getElementById('restartToolName').textContent = tool.name;
+  // List every tool the user toggled on; fall back to the ruleset tool if none.
+  const enabled = wizardState.enabledTools.length
+    ? wizardState.enabledTools.map(id => TOOLS.find(t => t.id === id)).filter(Boolean)
+    : [TOOLS.find(t => t.id === wizardState.selectedTool) || TOOLS[0]];
+  document.getElementById('restartToolName').textContent = enabled.map(t => t.name).join(', ');
 
-  // Auto-register hooks globally for Claude Code users
-  if (tool.id === 'claude') {
+  // Auto-register hooks globally when Claude Code was toggled on
+  if (enabled.some(t => t.id === 'claude')) {
     try {
       await fetch('/api/claude-code/integrations', {
         method: 'POST',
@@ -2289,7 +2434,7 @@ async function onCompleteStep() {
     { label: 'Memory name set', done: !!wizardState.collectionName },
     { label: 'Dependencies installed & MCP built', done: wizardState.buildReady },
     { label: 'Projects registered', done: (wizardState.projects || []).length > 0 },
-    { label: 'MCP config copied', done: wizardState.mcpWritten },
+    { label: 'AI tool integration enabled', done: wizardState.enabledTools.length > 0 || wizardState.mcpWritten },
     { label: 'Ruleset copied', done: !!wizardState.rulesetCopied },
   ];
 

package/neural-interface/server.js

@@ -5226,30 +5226,74 @@ app.get('/api/opencode/config/providers', async (req, res) => {
   }
 });
 
-// List MCP server statuses
+// GET /api/opencode/mcp — config.json is the source of truth. OpenCode doesn't
+// need to be running for the toggle to reflect a persisted install.
 app.get('/api/opencode/mcp', async (req, res) => {
   try {
-    if (!_ocpReady) return res.json({ ok: false, error: 'OpenCode server not running', data: {} });
-    const r = await ocpProxy('GET', '/mcp');
-    res.status(r.status).json({ ok: r.status === 200, data: r.data });
+    const configPath = getOpencodeConfigPath();
+    let connected = false;
+    let data = {};
+    try {
+      if (existsSync(configPath)) {
+        const cfg = JSON.parse(readFileSync(configPath, 'utf8'));
+        connected = !!(cfg?.mcp && cfg.mcp.SynaBun);
+        data = cfg?.mcp || {};
+      }
+    } catch {}
+    res.json({ ok: true, connected, runtimeReady: !!_ocpReady, data });
   } catch (err) {
     res.status(500).json({ ok: false, error: err.message });
   }
 });
 
-// Add MCP server dynamically and persist to config so it survives restarts
+// POST /api/opencode/mcp — persist to config.json always; register with the
+// running server too if it happens to be up. No body → installs SynaBun with
+// canonical config (parity with the other provider endpoints).
 app.post('/api/opencode/mcp', async (req, res) => {
   try {
-    if (!_ocpReady) return res.status(503).json({ ok: false, error: 'OpenCode server not running' });
-    const { name, config: mcpConfig } = req.body || {};
-    // Persist to ~/.config/opencode/config.json before registering with the running server
-    if (name && mcpConfig) {
-      try { persistMcpToOpencodeConfig(name, mcpConfig); } catch (e) {
-        console.warn(`[opencode] Failed to persist MCP config: ${e.message}`);
+    let { name, config: mcpConfig } = req.body || {};
+    if (!name) {
+      name = 'SynaBun';
+      const { mcpIndexPath, envPath } = getMcpPaths();
+      mcpConfig = {
+        command: 'node',
+        args: [mcpIndexPath],
+        env: { DOTENV_PATH: envPath, SYNABUN_DATA_HOME: DATA_HOME, MEMORY_DATA_DIR: resolve(DATA_HOME, 'mcp-data') },
+      };
+    }
+    try { persistMcpToOpencodeConfig(name, mcpConfig); } catch (e) {
+      return res.status(500).json({ ok: false, error: `Persist failed: ${e.message}` });
+    }
+    if (_ocpReady) {
+      try { await ocpProxy('POST', '/mcp', { name, config: { type: 'stdio', ...mcpConfig } }); } catch (e) {
+        console.warn(`[opencode] Runtime register failed (config persisted): ${e.message}`);
       }
     }
-    const r = await ocpProxy('POST', '/mcp', req.body);
-    res.status(r.status).json({ ok: r.status === 200, data: r.data });
+    res.json({ ok: true, message: 'SynaBun MCP registered. Restart OpenCode to connect.' });
+  } catch (err) {
+    res.status(500).json({ ok: false, error: err.message });
+  }
+});
+
+// DELETE /api/opencode/mcp — remove SynaBun entry from config.json.
+app.delete('/api/opencode/mcp', async (req, res) => {
+  try {
+    const name = (req.body && req.body.name) || req.query?.name || 'SynaBun';
+    const configPath = getOpencodeConfigPath();
+    if (existsSync(configPath)) {
+      try {
+        const cfg = JSON.parse(readFileSync(configPath, 'utf8'));
+        if (cfg?.mcp && cfg.mcp[name]) {
+          delete cfg.mcp[name];
+          if (Object.keys(cfg.mcp).length === 0) delete cfg.mcp;
+          writeFileSync(configPath, JSON.stringify(cfg, null, 2) + '\n', 'utf8');
+          console.log(`[opencode] Removed MCP server "${name}" from ${configPath}`);
+        }
+      } catch (e) {
+        return res.status(500).json({ ok: false, error: `Config rewrite failed: ${e.message}` });
+      }
+    }
+    res.json({ ok: true, message: 'SynaBun MCP removed from OpenCode config.json.' });
   } catch (err) {
     res.status(500).json({ ok: false, error: err.message });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synabun",
-  "version": "2026.4.20-beta.2",
+  "version": "2026.4.20-beta.3",
   "description": "Persistent vector memory for AI assistants",
   "license": "Apache-2.0",
   "author": "The SynaBun Authors",