synabun 2026.4.20-beta.0 → 2026.4.20-beta.10

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/mcp-server/src/http.ts

@@ -6,7 +6,7 @@
  * Mount on any Express app or run standalone.
  */
 
-import express from 'express';
+import express, { type Router } from 'express';
 import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
 import { ensureDatabase } from './services/sqlite.js';
 import { initCategoryCache } from './services/categories.js';
@@ -39,7 +39,7 @@ export async function ensureInit() {
  * Auth is handled externally (URL-embedded key in server.js).
  * Can be mounted on an existing Express app: app.use('/mcp', createMcpRoutes());
  */
-export function createMcpRoutes() {
+export function createMcpRoutes(): Router {
   const router = express.Router();
   router.use(express.json());
 

package/neural-interface/package.json

@@ -13,7 +13,6 @@
     "postinstall": "node scripts/rebuild-pty.js"
   },
   "dependencies": {
-    "@anthropic-ai/claude-code": "^2.1.71",
     "@huggingface/transformers": "^3.0.0",
     "@openai/codex-sdk": "^0.121.0",
     "adm-zip": "^0.5.16",

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/public/shared/ocp/ocp-tabs.js

@@ -99,6 +99,7 @@ let _primaryAgents = new Set();
 let _sessions = [];
 const _userMsgIds = new Set(); // track user messageIDs to filter echoed SSE events
 const _partTypes = new Map(); // track partID → type (reasoning/text) from part.updated events
+const _renderedAssistantMsgIds = new Set(); // prevents double-render when message.updated re-fires after finalize (Windows timing)
 let _activeSendRequestId = null; // WS request id of the in-flight message:send (for abort cancellation)
 let _renderSeq = 0; // guard against stale async renders overwriting fresh ones
 let _activeQuestionToolId = null; // toolId of the currently active (unanswered) question card
@@ -760,6 +761,10 @@ export async function sendMessage(content, options = {}) {
         removeThinking(container);
         finalizeStreamingMessage(container);
       }
+      // Mark this assistant message as rendered so late terminal SSE
+      // message.updated events (which arrive after POST resolves on some
+      // Windows/model combos) don't re-stream the full payload into a new bubble.
+      if (info.id) _renderedAssistantMsgIds.add(info.id);
       tab.running = false;
       tab.turnStartedAt = 0;
       if (info.tokens || info.usage) {
@@ -1163,6 +1168,15 @@ export function handleSSEEvent(eventType, event) {
         if (mid) _userMsgIds.add(mid);
         break;
       }
+      // Guard: once we've rendered this assistant message's final payload, ignore
+      // re-emitted message.updated events (OpenCode on Windows sometimes fires a
+      // late duplicate after finalize, which would otherwise re-stream the whole
+      // response into a brand-new assistant bubble).
+      const assistantMid = info.id || event.messageID;
+      if (assistantMid && _renderedAssistantMsgIds.has(assistantMid)) {
+        update();
+        break;
+      }
       // If no streaming element was built by prior deltas, render the
       // assistant's content directly from the event (non-streaming path)
       const hasStreaming = container.querySelector('.ocp-msg-assistant.streaming');
@@ -1176,6 +1190,13 @@ export function handleSSEEvent(eventType, event) {
         removeThinking(container);
         finalizeStreamingMessage(container);
         _partTypes.clear();
+        // Only mark the ID as rendered at the terminal signal (tokens/usage
+        // arrived or status is explicitly terminal). Mid-turn message.updated
+        // events may fire before streaming starts and shouldn't lock out later
+        // part.delta / part.updated events.
+        if (assistantMid && (explicitTerminal || info.tokens || info.usage)) {
+          _renderedAssistantMsgIds.add(assistantMid);
+        }
         if (info.tokens || info.usage) {
           const raw = info.tokens || info.usage || {};
           tab.threadTokenUsage = normalizeThreadTokenUsage(raw);
@@ -1202,6 +1223,8 @@ export function handleSSEEvent(eventType, event) {
     // Streaming text delta — the primary streaming event from OpenCode
     case 'message.part.delta': {
       if (_userMsgIds.has(event.messageID)) break; // skip user message echoes
+      // Skip deltas for assistant messages already finalized (late echoes).
+      if (event.messageID && _renderedAssistantMsgIds.has(event.messageID)) break;
       if (event.delta) {
         const partType = String(event.part?.type || event.partType || _partTypes.get(event.partID) || '').trim().toLowerCase();
         const isReasoning = partType === 'reasoning' || partType === 'thinking' || partType === 'thought';
@@ -1236,7 +1259,11 @@ export function handleSSEEvent(eventType, event) {
         update();
       } else if (updatedType === 'text') {
         const hasStreaming = container.querySelector('.ocp-msg-assistant.streaming');
-        if (!hasStreaming) {
+        // Skip the fallback render if this assistant message has already been
+        // finalized by POST response or a prior message.updated — otherwise we
+        // create a duplicate bubble when late text part.updated events arrive.
+        const partMsgId = part.messageID || part.messageId;
+        if (!hasStreaming && !(partMsgId && _renderedAssistantMsgIds.has(partMsgId))) {
           renderAssistantPayload(container, part, { textMode: 'stream' });
         }
         setTurnStatus(tab, 'Writing response…', tabStatusDetail(tab));
@@ -1287,6 +1314,14 @@ export function handleSSEEvent(eventType, event) {
     }
     case 'message.completed': {
       removeThinking(container);
+      const completedMid = event.messageID || event.id;
+      if (completedMid && _renderedAssistantMsgIds.has(completedMid)) {
+        tab.running = false;
+        tab.turnStartedAt = 0;
+        setTurnStatus(tab);
+        update();
+        break;
+      }
       // Fallback: render content if no streaming element was built
       const hasStreamingLegacy = container.querySelector('.ocp-msg-assistant.streaming');
       renderAssistantPayload(container, event.content ?? event.parts ?? event.text ?? '', {
@@ -1294,6 +1329,7 @@ export function handleSSEEvent(eventType, event) {
       });
       finalizeStreamingMessage(container);
       _partTypes.clear();
+      if (completedMid) _renderedAssistantMsgIds.add(completedMid);
       tab.running = false;
       tab.turnStartedAt = 0;
       setTurnStatus(tab);

package/neural-interface/public/shared/ui-settings.js

@@ -1080,6 +1080,7 @@ function buildSetupTab(setupStatus) {
   const claudeConnected = setupStatus.claude?.connected || false;
   const geminiConnected = setupStatus.gemini?.connected || false;
   const codexConnected = setupStatus.codex?.connected || false;
+  const opencodeConnected = setupStatus.opencode?.connected || false;
 
   const statusBadge = (on) => `<span class="setup-status-badge ${on ? 'active' : 'inactive'}">${on ? 'Connected' : 'Off'}</span>`;
 
@@ -1184,6 +1185,40 @@ function buildSetupTab(setupStatus) {
           </div>
         </div>
 
+        <!-- OPENCODE -->
+        <div class="iface-section collapsed" data-collapsible id="setup-opencode">
+          <div class="gfx-group-title">
+            <span style="display:flex;align-items:center;gap:8px">
+              ${CHEVRON_ICON}
+              ${OPENCODE_ICON}
+              <span>OpenCode</span>
+              ${statusBadge(opencodeConnected)}
+            </span>
+          </div>
+          <div class="cc-section-body">
+            <div class="cc-integration-item${opencodeConnected ? ' enabled' : ''}" id="setup-opencode-mcp-row">
+              <div class="cc-integration-info">
+                <div class="cc-integration-label">SynaBun MCP</div>
+                <div class="cc-integration-path" id="setup-opencode-mcp-status">${opencodeConnected ? 'Registered in ~/.config/opencode/config.json' : 'Not connected'}</div>
+              </div>
+              <button class="cc-toggle${opencodeConnected ? ' on' : ''}" id="setup-opencode-mcp-toggle"></button>
+            </div>
+
+            <div style="margin-top:12px">
+              <div class="cc-greeting-label" style="margin-bottom:4px">Manual Config <span style="color:var(--t-faint)">(~/.config/opencode/config.json)</span></div>
+              <div class="cc-ruleset-preview" id="setup-opencode-config-preview" style="max-height:120px">Loading...</div>
+              <button class="cc-copy-btn" id="setup-opencode-config-copy" style="margin-top:4px">${COPY_ICON} Copy JSON Config</button>
+            </div>
+
+            <div style="margin-top:12px">
+              <div class="cc-greeting-label" style="margin-bottom:4px">AGENTS.md Ruleset</div>
+              <div class="cc-ruleset-preview" id="setup-opencode-ruleset-preview">Loading...</div>
+              <button class="cc-copy-btn" id="setup-opencode-ruleset-copy" style="margin-top:4px">${COPY_ICON} Copy Ruleset</button>
+              <div class="setup-hint">Paste into your project's <code>AGENTS.md</code></div>
+            </div>
+          </div>
+        </div>
+
         <!-- COEXISTENCE RULES -->
         <div class="iface-section collapsed" data-collapsible id="setup-coexistence">
           <div class="gfx-group-title">
@@ -2855,7 +2890,7 @@ export async function openSettingsModal() {
   let greetingConfig = { defaults: {}, projects: {}, global: {} };
   let codexGreetingConfig = { enabled: true, defaults: {}, projects: {}, global: {} };
   let opencodeGreetingConfig = { enabled: false, defaults: {}, projects: {}, global: {} };
-  let setupStatus = { claude: {}, gemini: {}, codex: {}, paths: {} };
+  let setupStatus = { claude: {}, gemini: {}, codex: {}, opencode: {}, paths: {} };
   let cliConfig = {};
   let toolPermissions = {};
   let toolCategories = [];
@@ -2944,7 +2979,7 @@ export async function openSettingsModal() {
       <nav class="settings-nav">
         ${buildNavHTML(variantTabs, {
           server: settings.storage === 'sqlite' ? 'connected' : 'disconnected',
-          setup: (setupStatus.claude?.connected || setupStatus.gemini?.connected || setupStatus.codex?.connected) ? 'connected' : 'disconnected',
+          setup: (setupStatus.claude?.connected || setupStatus.gemini?.connected || setupStatus.codex?.connected || setupStatus.opencode?.connected) ? 'connected' : 'disconnected',
           discord: discordConfig.botToken ? 'connected' : 'disconnected',
         })}
       </nav>
@@ -4989,6 +5024,38 @@ export async function openSettingsModal() {
     }
     wireRulesetPreview('codex', 'codex');
 
+    // ── OpenCode ──
+    wireSetupMcpToggle('opencode', '/api/opencode/mcp', '~/.config/opencode/config.json');
+    // Config preview — OpenCode stores MCP servers under the "mcp" key of config.json
+    {
+      const preview = overlay.querySelector('#setup-opencode-config-preview');
+      let cachedConfig = '';
+      if (preview) {
+        const mp = setupStatus.paths?.mcpIndexPath || '<path-to>/mcp-server/run.mjs';
+        const ep = setupStatus.paths?.envPath || '<path-to>/synabun/.env';
+        fetch('/api/opencode/mcp').then(r => r.json()).then(data => {
+          if (data.ok && data.data && Object.keys(data.data).length) {
+            cachedConfig = JSON.stringify({ mcp: data.data }, null, 2);
+            preview.textContent = cachedConfig;
+          } else if (data.ok) {
+            cachedConfig = JSON.stringify({
+              mcp: {
+                SynaBun: {
+                  type: 'stdio',
+                  command: 'node',
+                  args: [mp],
+                  env: { DOTENV_PATH: ep },
+                },
+              },
+            }, null, 2);
+            preview.textContent = cachedConfig;
+          } else { preview.textContent = 'Could not load config.'; }
+        }).catch(() => { preview.textContent = 'Failed to load.'; });
+      }
+      wireCopyBtn('setup-opencode-config-copy', () => cachedConfig, 'Copy JSON Config');
+    }
+    wireRulesetPreview('opencode', 'generic');
+
     // ── Coexistence rules ──
     wireRulesetPreview('coexistence', 'coexistence');
   }