synabun 1.3.0 → 2.0.0-beta

package/neural-interface/public/onboarding.html

@@ -91,6 +91,10 @@
   .steps-viewport {
     position: relative;
     overflow: hidden;
+    /* Progressive fallback: absolute-positioned steps do not size their parent.
+       JavaScript replaces this with the active step's measured height, but the
+       welcome screen must remain visible while initialization is pending. */
+    height: min(533px, calc(90vh - 56px));
     transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
@@ -443,6 +447,141 @@
     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; }
+
+  /* ── Rules (Step 5 option, Step 6 list): one row per connected tool ── */
+  .rules-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 14px;
+    font-size: 12px;
+    color: var(--t-secondary);
+    cursor: pointer;
+    user-select: none;
+  }
+  .rules-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+  .rules-list .mtr-state {
+    margin-left: 6px;
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--t-muted);
+  }
+  .rules-list .mtr-state.ok { color: var(--green); }
+  .rules-actions { display: flex; gap: 6px; flex-shrink: 0; }
+  .rules-actions button {
+    padding: 5px 10px;
+    border-radius: 8px;
+    border: 1px solid var(--b-light);
+    background: var(--s-light);
+    color: var(--t-primary);
+    font-size: 11px;
+    font-family: inherit;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all var(--ease);
+  }
+  .rules-actions button:hover { background: var(--s-medium); color: var(--t-bright); border-color: var(--b-hover); }
+  .rules-actions button:disabled { opacity: 0.4; cursor: default; }
+  .rules-note { font-size: 11px; color: var(--t-muted); margin-bottom: 12px; line-height: 1.5; }
+  .rules-extra { margin-top: 8px; }
+  #rulesViewCode, #rulesCursorCode, #rulesCoexistCode { max-height: 160px; }
+
   /* ── Dependency List ── */
   .dep-list {
     list-style: none;
@@ -603,10 +742,11 @@
     color: var(--t-secondary);
     text-align: center;
     margin-top: 16px;
-    opacity: 0;
+    opacity: 1;
     transition: opacity 0.6s ease;
     line-height: 1.8;
   }
+  .onboarding-animated .welcome-desc:not(.visible) { opacity: 0; }
   .welcome-desc.visible { opacity: 1; }
 
   /* ── Welcome Choice Cards ── */
@@ -614,11 +754,12 @@
     display: flex;
     gap: 14px;
     margin-top: 28px;
-    opacity: 0;
+    opacity: 1;
     transition: opacity 0.5s ease;
     width: 100%;
     max-width: 440px;
   }
+  .onboarding-animated .welcome-choices:not(.visible) { opacity: 0; }
   .welcome-choices.visible { opacity: 1; }
   .welcome-choice {
     flex: 1;
@@ -906,9 +1047,16 @@
 
     <!-- Step 0: Welcome -->
     <div class="step active" data-step="0" style="align-items:center;">
-      <div id="synabun-bg"></div>
+      <div id="synabun-bg" aria-hidden="true">
+        <!-- Static first-paint fallback. The animation replaces this SVG. -->
+        <svg viewBox="0 0 280 140" width="380" height="190" style="overflow:visible">
+          <g class="syna-eye"><g class="syna-lid"><rect x="80" y="24" width="38" height="72" rx="19" fill="#ffffff"/></g></g>
+          <g class="syna-eye"><g class="syna-lid"><rect x="162" y="24" width="38" height="72" rx="19" fill="#ffffff"/></g></g>
+          <path class="syna-mouth" d="M118,116 Q140,130 162,116" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="2.5" stroke-linecap="round"/>
+        </svg>
+      </div>
       <div style="display:flex;flex-direction:column;align-items:center;">
-        <div class="typewriter-line" id="typewriter"></div>
+        <div class="typewriter-line" id="typewriter">Hi! I'm SynaBun!</div>
         <div class="welcome-desc" id="welcomeDesc">
           Persistent vector memory for your AI coding tools.<br>
           How would you like to get started?
@@ -1040,29 +1188,69 @@
         <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>
+      <label class="rules-option" for="rulesInstallOpt">
+        <span class="key-backup-checkbox-wrap">
+          <input type="checkbox" id="rulesInstallOpt" checked>
+          <span class="key-backup-checkmark"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span>
+        </span>
+        <span>Install SynaBun's rules for this tool</span>
+      </label>
+      <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>
 
-    <!-- Step 6: Ruleset -->
+    <!-- Step 6: SynaBun rules -->
     <div class="step right" data-step="6">
       <div style="position:relative;display:flex;justify-content:center;align-items:center;">
         <div class="step-eyes"></div>
+        <span class="mascot-toast" id="rulesToast"></span>
+      </div>
+      <h2>SynaBun Rules</h2>
+      <p class="subtitle">SynaBun puts its rules where each tool loads them for every project, and keeps them up to date. There is nothing to paste.</p>
+      <div class="rules-note" id="rulesNote" style="display:none;"></div>
+      <div class="rules-list" id="rulesList"></div>
+      <div class="code-copy-wrap" id="rulesViewWrap" style="display:none;margin-bottom:12px;">
+        <div class="instructions-preview" id="rulesViewCode"></div>
+        <span class="code-copy-label">copy</span>
+      </div>
+      <div class="mcp-other-section" id="rulesCursorSection">
+        <div class="mcp-other-header" id="rulesCursorHeader">
+          <span>Cursor (copy and paste)</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="rulesCursorBody" style="display:none;">
+          <div style="font-size:12px;color:var(--t-secondary);margin-bottom:6px;">Cursor keeps User Rules inside the app. Paste this into Cursor Settings &rarr; Rules:</div>
+          <div class="code-copy-wrap" id="rulesCursorWrap">
+            <div class="instructions-preview" id="rulesCursorCode"></div>
+            <span class="code-copy-label">copy</span>
+          </div>
+        </div>
       </div>
-      <h2>Memory Ruleset</h2>
-      <p class="subtitle">Copy this into your project's <code id="rulesetFileName" style="color:var(--t-bright);">CLAUDE.md</code> so your AI tool knows how to use SynaBun.</p>
-      <div id="rulesetPanel">
-        <div class="code-copy-wrap" id="rulesetCodeWrap">
-          <div class="instructions-preview" id="rulesetCode" style="max-height:220px;">Loading...</div>
-          <span class="code-copy-label">copy</span>
+      <div class="mcp-other-section rules-extra" id="rulesCoexistSection">
+        <div class="mcp-other-header" id="rulesCoexistHeader">
+          <span>Using another memory tool too? (optional snippet)</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="rulesCoexistBody" style="display:none;">
+          <div style="font-size:12px;color:var(--t-secondary);margin-bottom:6px;">Copy this, name the other tool in it, and paste it into your instructions file. SynaBun never installs it.</div>
+          <div class="code-copy-wrap" id="rulesCoexistWrap">
+            <div class="instructions-preview" id="rulesCoexistCode"></div>
+            <span class="code-copy-label">copy</span>
+          </div>
         </div>
       </div>
     </div>
@@ -1195,18 +1383,22 @@ const wizardState = {
   collectionDisplayName: 'Claude Memory',
   dbLocationPath: null,
   selectedTool: null,
-  projectRoot: '',
+  enabledTools: [],    // tool ids toggled on via Step 5 install toggles
+  dataHome: '',
+  packageRoot: '',
   buildReady: false,
   mcpWritten: false,
   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.
+// `id` is also the host name of the rules API (/api/setup/rules/:host).
 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', api: '/api/claude-code/mcp', configPath: '~/.claude.json' },
+  { id: 'gemini',   name: 'Gemini CLI',  api: '/api/setup/gemini/mcp', configPath: '~/.gemini/settings.json' },
+  { id: 'codex',    name: 'Codex CLI',   api: '/api/setup/codex/mcp',  configPath: '~/.codex/config.toml' },
+  { id: 'opencode', name: 'OpenCode',    api: '/api/opencode/mcp',     configPath: '~/.config/opencode/config.json' },
 ];
 
 // ═══════════════════════════════════════════
@@ -1286,10 +1478,10 @@ function goToStep(n) {
 function updateNav() {
   $prevBtn.disabled = currentStep === 0;
 
-  const labels = ['', 'Next', 'Next', 'Next', 'Next', 'Next', 'Next', 'Finish'];
+  const labels = ['Begin', 'Next', 'Next', 'Next', 'Next', 'Next', 'Next', 'Finish'];
   $nextBtn.textContent = (labels[currentStep] || 'Next') + ' \u2192';
 
-  if (currentStep === 0 || currentStep === TOTAL_STEPS - 1) {
+  if (currentStep === TOTAL_STEPS - 1) {
     $nextBtn.style.display = 'none';
   } else {
     $nextBtn.style.display = '';
@@ -1329,7 +1521,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 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:
@@ -1357,6 +1555,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
@@ -1626,13 +1825,13 @@ function renderHappyBun() {}
     resizeViewport(0);
 
     try {
-      const buffer = await file.arrayBuffer();
-
+      // Post the File itself so the browser streams it from disk instead of
+      // holding a multi-GB backup in memory.
       $statusText.textContent = 'Validating backup...';
       const previewRes = await fetch('/api/system/restore/preview', {
         method: 'POST',
         headers: { 'Content-Type': 'application/zip' },
-        body: buffer,
+        body: file,
       });
       if (!previewRes.ok) {
         let errMsg = 'Invalid backup file';
@@ -1643,7 +1842,7 @@ function renderHappyBun() {}
 
       // Show confirmation
       $statusEl.style.display = 'none';
-      showRestoreConfirm(m, buffer);
+      showRestoreConfirm(m, file);
 
     } catch (err) {
       $statusDot.className = 'wiz-status-dot red';
@@ -1652,7 +1851,7 @@ function renderHappyBun() {}
     }
   }
 
-  function showRestoreConfirm(m, buffer) {
+  function showRestoreConfirm(m, file) {
     const fileCount = (m.files || []).length;
     const hasDb = !!(m.database);
 
@@ -1706,7 +1905,7 @@ function renderHappyBun() {}
         const restoreRes = await fetch('/api/system/restore', {
           method: 'POST',
           headers: { 'Content-Type': 'application/zip' },
-          body: buffer,
+          body: file,
         });
         if (!restoreRes.ok) {
           let errMsg = 'Restore failed';
@@ -1801,31 +2000,71 @@ function renderHappyBun() {}
 
 async function onDepsStep() {
   const $list = document.getElementById('depList');
-  $list.innerHTML = '';
+
+  function createDepItem(name) {
+    const li = document.createElement('li');
+    li.className = 'dep-item checking visible';
+
+    const icon = document.createElement('div');
+    icon.className = 'dep-icon';
+
+    const info = document.createElement('div');
+    info.className = 'dep-info';
+
+    const title = document.createElement('div');
+    title.className = 'dep-name';
+    title.textContent = name;
+
+    const detail = document.createElement('div');
+    detail.className = 'dep-detail';
+    detail.textContent = 'Checking\u2026';
+
+    info.append(title, detail);
+    li.append(icon, info);
+    return li;
+  }
+
+  function showCheckError(message) {
+    const li = createDepItem('Environment check unavailable');
+    li.classList.remove('checking');
+    li.classList.add('fail');
+    li.querySelector('.dep-icon').textContent = '!';
+    li.querySelector('.dep-detail').textContent = message;
+    $list.replaceChildren(li);
+    resizeViewport(1);
+  }
+
+  // Never leave this step blank while the server is still warming up.
+  $list.replaceChildren(createDepItem('Node.js'), createDepItem('npm'));
+  resizeViewport(1);
 
   let deps;
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 8000);
   try {
-    const res = await fetch('/api/setup/check-deps');
+    const res = await fetch('/api/setup/check-deps', { signal: controller.signal });
+    if (!res.ok) throw new Error(`Server returned ${res.status}`);
     const data = await res.json();
+    if (!Array.isArray(data.deps) || data.deps.length === 0) {
+      throw new Error('Server returned no dependency results');
+    }
     deps = data.deps;
-  } catch {
-    $list.innerHTML = '<li style="color:var(--t-muted);font-size:13px;">Could not reach server.</li>';
+  } catch (err) {
+    showCheckError(err.name === 'AbortError'
+      ? 'The server took too long to respond. Go back and try again.'
+      : 'Could not complete the check. Make sure the SynaBun server is running.');
     return;
+  } finally {
+    clearTimeout(timeout);
   }
 
-  // Build all items hidden first
+  // Replace the placeholders with the actual results. Keep them visible so a
+  // slow response can never produce another empty panel.
   const items = deps.map(dep => {
-    const li = document.createElement('li');
-    li.className = 'dep-item checking';
-    li.innerHTML = `
-      <div class="dep-icon"></div>
-      <div class="dep-info">
-        <div class="dep-name">${dep.name}</div>
-        <div class="dep-detail">Checking\u2026</div>
-      </div>`;
-    $list.appendChild(li);
+    const li = createDepItem(dep.name || 'Dependency');
     return { li, dep };
   });
+  $list.replaceChildren(...items.map(({ li }) => li));
 
   // Pre-size viewport to account for all items before animation
   resizeViewport(1);
@@ -1834,12 +2073,8 @@ async function onDepsStep() {
   for (let i = 0; i < items.length; i++) {
     const { li, dep } = items[i];
 
-    // Reveal with stagger
-    await wait(250);
-    li.classList.add('visible');
-
     // Simulate a brief check delay, then resolve
-    await wait(400 + Math.random() * 200);
+    await wait(180 + Math.random() * 100);
 
     li.classList.remove('checking');
     const icon = li.querySelector('.dep-icon');
@@ -2046,15 +2281,58 @@ document.getElementById('buildBtn').addEventListener('click', async () => {
       wizardState.projects.forEach((p, i) => {
         const card = document.createElement('div');
         card.className = 'onboard-project-card';
-        card.style.cssText = 'display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(109,213,140,0.06);border:1px solid rgba(109,213,140,0.2);border-radius:8px;font-size:12px';
+        card.style.cssText = 'display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:rgba(109,213,140,0.06);border:1px solid rgba(109,213,140,0.2);border-radius:8px;font-size:12px';
+        const safePath = p.path.replace(/\\/g, '/');
         card.innerHTML = `
-          <svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:rgba(109,213,140,0.8);stroke-width:2;flex-shrink:0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
-          <div style="flex:1;min-width:0">
-            <div style="color:var(--t-bright);font-weight:500">${p.label}</div>
-            <div style="color:var(--t-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${p.path.replace(/\\/g, '/')}">${p.path.replace(/\\/g, '/')}</div>
+          <div style="display:flex;align-items:center;gap:10px">
+            <svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:rgba(109,213,140,0.8);stroke-width:2;flex-shrink:0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+            <div style="flex:1;min-width:0">
+              <div style="color:var(--t-bright);font-weight:500">${p.label}</div>
+              <div style="color:var(--t-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${safePath}">${safePath}</div>
+            </div>
+            <button class="onboard-project-remove" style="background:none;border:none;color:var(--t-muted);cursor:pointer;font-size:16px;padding:2px 6px;line-height:1;opacity:0.5" title="Remove">&times;</button>
           </div>
-          <button class="onboard-project-remove" style="background:none;border:none;color:var(--t-muted);cursor:pointer;font-size:16px;padding:2px 6px;line-height:1;opacity:0.5" title="Remove">&times;</button>
         `;
+        if (p.dubiousOwnership && !p.trusted) {
+          const trustRow = document.createElement('div');
+          trustRow.className = 'onboard-trust-row';
+          trustRow.style.cssText = 'display:flex;align-items:center;gap:8px;padding:6px 8px;background:rgba(255,183,77,0.08);border:1px solid rgba(255,183,77,0.25);border-radius:6px;font-size:11px;color:rgba(255,204,128,0.9)';
+          trustRow.innerHTML = `
+            <span>&#9888; Git ownership mismatch &mdash; workspace needs to be trusted</span>
+            <button class="onboard-trust-btn" style="margin-left:auto;background:rgba(255,183,77,0.2);border:1px solid rgba(255,183,77,0.35);color:#ffe0b2;padding:4px 10px;border-radius:5px;font-size:11px;cursor:pointer">Trust workspace</button>
+          `;
+          const $btn = trustRow.querySelector('.onboard-trust-btn');
+          $btn.addEventListener('click', async () => {
+            $btn.disabled = true;
+            $btn.textContent = 'Trusting...';
+            try {
+              const r = await fetch('/api/terminal/trust-workspace', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ path: p.trustPath || safePath }),
+              });
+              const d = await r.json();
+              if (d.ok) {
+                p.trusted = true;
+                renderProjectList();
+              } else {
+                $btn.disabled = false;
+                $btn.textContent = 'Trust workspace';
+                $error.textContent = d.error || 'Trust failed';
+              }
+            } catch {
+              $btn.disabled = false;
+              $btn.textContent = 'Trust workspace';
+              $error.textContent = 'Trust failed';
+            }
+          });
+          card.appendChild(trustRow);
+        } else if (p.trusted) {
+          const okRow = document.createElement('div');
+          okRow.style.cssText = 'font-size:11px;color:rgba(109,213,140,0.8)';
+          okRow.textContent = '✓ Workspace trusted';
+          card.appendChild(okRow);
+        }
         card.querySelector('.onboard-project-remove').addEventListener('click', () => {
           wizardState.projects.splice(i, 1);
           renderProjectList();
@@ -2104,15 +2382,16 @@ document.getElementById('buildBtn').addEventListener('click', async () => {
 
     // Register via API
     $addBtn.innerHTML = '<div class="spinner" style="width:14px;height:14px"></div> Registering...';
+    let integData = null;
     try {
       const res = await fetch('/api/claude-code/integrations', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ target: 'project', projectPath: folderPath, label }),
       });
-      const data = await res.json();
-      if (!data.ok) {
-        $error.textContent = data.error || 'Failed to register project.';
+      integData = await res.json();
+      if (!integData.ok) {
+        $error.textContent = integData.error || 'Failed to register project.';
         $addBtn.disabled = false;
         $addBtn.innerHTML = origHTML;
         return;
@@ -2124,7 +2403,12 @@ document.getElementById('buildBtn').addEventListener('click', async () => {
       return;
     }
 
-    wizardState.projects.push({ path: folderPath, label });
+    const projectEntry = { path: folderPath, label };
+    if (integData && integData.dubiousOwnership && integData.trustPath) {
+      projectEntry.dubiousOwnership = true;
+      projectEntry.trustPath = integData.trustPath;
+    }
+    wizardState.projects.push(projectEntry);
     $addBtn.disabled = false;
     $addBtn.innerHTML = origHTML;
     renderProjectList();
@@ -2132,71 +2416,145 @@ 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 class="mtr-path" data-role="rules" style="display:none"></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) {
-  const root = (wizardState.projectRoot || '').replace(/\\/g, '/');
-  const mcpPath = root + '/mcp-server/run.mjs';
-  const envPath = root + '/.env';
-
-  if (id === 'claude') {
-    return {
-      label: 'Run this in your terminal to register SynaBun globally:',
-      code: `claude mcp add SynaBun -s user -e DOTENV_PATH="${envPath}" -- node "${mcpPath}"`,
-      hint: 'Registers SynaBun globally. Restart Claude Code after running.',
-    };
-  }
-  if (id === 'cursor') {
-    const json = JSON.stringify({ mcpServers: { SynaBun: { command: 'node', args: [mcpPath], env: { DOTENV_PATH: envPath } } } }, 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: { DOTENV_PATH: envPath } } } }, 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: { DOTENV_PATH: envPath } } } }, null, 2);
-  return {
-    label: 'Add to your project\'s .mcp.json:',
-    code: json,
-    hint: 'Save as .mcp.json in your project root.',
-  };
+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 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 = '';
+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;
+  }
+}
 
+// What the MCP toggle's response says about the tool's rules (its `rules`
+// object), as one line under the row: where they went, or why they did not.
+function showToggleRules(id, rules, { connected, wanted }) {
+  const row = $toggleList.querySelector(`[data-id="${id}"]`);
+  const line = row?.querySelector('[data-role="rules"]');
+  if (!line) return;
+  let text = '';
+  if (connected) {
+    if (!rules) text = wanted ? `Rules not installed yet. ${RESTART_HINT}` : '';
+    else if (rules.skipped) text = 'Rules not installed (you can install them in the next step)';
+    else if (rules.ok === false) text = `Rules not installed: ${rules.error || rules.state || 'refused'}`;
+    else if (rules.path) text = `Rules installed: ${rules.path}`;
+  } else if (rules && rules.ok !== false && rules.kept && rules.kept.length) {
+    // Disconnected. A copy the user edited is theirs: SynaBun left it where it is (and for OpenCode, so is a copy
+    // their own line in config.json points at).
+    text = `Your ${rules.kept[0].reason === 'listed-in-config' ? '' : 'edited '}rules were left in place: ${rules.kept[0].path}`;
+  } else if (rules && rules.ok === false && rules.error) {
+    // Disconnected, but rules could not be taken out (damaged markers, a symlink): say which and why.
+    text = `Rules not removed: ${rules.error}`;
+  }
+  line.textContent = text;
+  line.title = text;
+  line.style.display = text ? '' : 'none';
   requestAnimationFrame(() => resizeViewport(currentStep));
 }
 
+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');
+  // Connecting a tool installs its rules too, unless the box is unchecked.
+  const wantRules = document.getElementById('rulesInstallOpt')?.checked !== false;
+  updateToggleRow(id, { busy: true });
+  try {
+    const res = await fetch(tool.api, wasOn ? { method: 'DELETE' } : {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(wantRules ? {} : { rules: false }),
+    });
+    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 });
+    showToggleRules(id, data.rules, { connected: nowOn, wanted: wantRules });
+    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.dataHome || '').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' };
+  return JSON.stringify({ mcpServers: { SynaBun: { command: 'node', args: [mcpPath], env } } }, null, 2);
+}
+
+// "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');
   if (!toast) return;
@@ -2207,6 +2565,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');
@@ -2217,48 +2576,210 @@ document.getElementById('mcpCodeWrap').addEventListener('click', () => {
 });
 
 // ═══════════════════════════════════════════
-// STEP 6: Ruleset
+// STEP 6: SynaBun rules
 // ═══════════════════════════════════════════
+// One row per connected tool with where its rules are and what state they are
+// in (GET /api/setup/rules), plus copy boxes for Cursor and the coexistence
+// snippet. Nothing here has to be clicked to continue.
+
+const RESTART_HINT = 'Restart SynaBun to finish this update.';
+const RULES_STATE_TEXT = {
+  installed: 'Installed', newer: 'Installed by a newer SynaBun', outdated: 'Update available', modified: 'Edited', conflict: 'Conflict',
+  error: 'Error', shadowed: 'Shadowed', 'not-installed': 'Not installed',
+};
+const RULES_PRIMARY = { 'not-installed': 'Install', outdated: 'Update', modified: 'Replace' };
+let rulesStatus = null;       // null: the route is missing or failed
+const rulesTextCache = {};
 
-async function onRulesetStep() {
-  const tool = TOOLS.find(t => t.id === wizardState.selectedTool) || TOOLS[0];
-  document.getElementById('rulesetFileName').textContent = tool.instrFile;
+async function loadRulesStatus() {
+  try {
+    const res = await fetch('/api/setup/rules');
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data && data.ok ? data : null;
+  } catch { return null; }
+}
 
-  // Map tool to API format
-  const formatMap = { claude: 'claude', cursor: 'cursor', windsurf: 'generic', codex: 'codex', other: 'generic' };
-  const format = formatMap[tool.id] || 'generic';
+// The rendered text for a host, from the rules route or the older read-only endpoint.
+async function loadRulesText(host) {
+  if (rulesTextCache[host]) return rulesTextCache[host];
+  let text = '';
+  try {
+    const res = await fetch(`/api/setup/rules/${host}/text`);
+    if (res.ok) text = (await res.json()).text || '';
+  } catch { /* try the older endpoint */ }
+  if (!text) {
+    const format = host === 'opencode' ? 'generic' : host;
+    const res = await fetch(`/api/claude-code/ruleset?format=${format}`);
+    const data = res.ok ? await res.json() : {};
+    text = data.ruleset || '';
+  }
+  if (!text) throw new Error('Rules text not available');
+  rulesTextCache[host] = text;
+  return text;
+}
 
-  const $code = document.getElementById('rulesetCode');
-  if ($code.dataset.loadedFormat === format) return; // already loaded
+function showRulesToast(msg, duration = 2600) {
+  const toast = document.getElementById('rulesToast');
+  if (!toast) return;
+  toast.textContent = msg;
+  toast.classList.add('show');
+  clearTimeout(toast._timer);
+  toast._timer = setTimeout(() => toast.classList.remove('show'), duration);
+}
+
+function enabledRuleTools() {
+  return wizardState.enabledTools.map(id => TOOLS.find(t => t.id === id)).filter(Boolean);
+}
+
+function renderRulesList() {
+  const $list = document.getElementById('rulesList');
+  const $note = document.getElementById('rulesNote');
+  const tools = enabledRuleTools();
+  $list.innerHTML = '';
 
-  $code.textContent = 'Loading...';
+  const notes = [];
+  if (!rulesStatus) notes.push(`${RESTART_HINT} Until then the rules can be viewed and copied here.`);
+  if (!tools.length) notes.push('No tool was connected in the previous step. Connect one there, or copy the rules below.');
+  $note.textContent = notes.join(' ');
+  $note.style.display = notes.length ? '' : 'none';
+
+  for (const tool of tools) {
+    const info = rulesStatus && rulesStatus.hosts ? rulesStatus.hosts[tool.id] : null;
+    const state = info ? info.state : '';
+    const good = state === 'installed' || state === 'newer';
+    // A file without SynaBun's markers is the user's own: the server refuses to replace it, so no button.
+    const primary = info && info.detected !== false && info.replaceable !== false ? (RULES_PRIMARY[state] || '') : '';
+    const detail = !info ? RESTART_HINT
+      : info.detected === false ? `${tool.name} was not found on this machine`
+      : ((['conflict', 'error', 'shadowed'].includes(state) || info.replaceable === false) && (info.error || info.detail)) || info.path || '';
+
+    const row = document.createElement('div');
+    row.className = 'mcp-toggle-row' + (good ? ' connected' : '');
+    row.dataset.host = tool.id;
+    row.innerHTML = `
+      <div class="mtr-body">
+        <div class="mtr-name">${tool.name}<span class="mtr-state${good ? ' ok' : ''}" data-role="state"></span></div>
+        <div class="mtr-path" data-role="path"></div>
+      </div>
+      <div class="rules-actions">
+        ${primary ? `<button type="button" data-role="primary">${primary}</button>` : ''}
+        <button type="button" data-role="view">View</button>
+        <button type="button" data-role="copy">Copy</button>
+      </div>
+    `;
+    row.querySelector('[data-role="state"]').textContent = info ? (RULES_STATE_TEXT[state] || state) : 'Unavailable';
+    const $path = row.querySelector('[data-role="path"]');
+    $path.textContent = detail;
+    $path.title = detail;
+    row.querySelector('[data-role="primary"]')?.addEventListener('click', (e) => installToolRules(tool, state, e.currentTarget));
+    row.querySelector('[data-role="view"]').addEventListener('click', () => viewRules(tool.id, tool.name));
+    row.querySelector('[data-role="copy"]').addEventListener('click', () => copyRules(tool.id, tool.name));
+    $list.appendChild(row);
+  }
+  requestAnimationFrame(() => resizeViewport(currentStep));
+}
+
+async function installToolRules(tool, state, btn) {
+  const force = state === 'modified';
+  if (force && !confirm(`Replace your edited ${tool.name} rules with SynaBun's current version?\n\nYour edited copy is backed up first.`)) return;
+  btn.disabled = true;
   try {
-    const res = await fetch(`/api/claude-code/ruleset?format=${format}`);
-    const data = await res.json();
-    if (data.ok && data.ruleset) {
-      $code.textContent = data.ruleset;
-      $code.dataset.loadedFormat = format;
-      wizardState.rulesetCopied = false;
-    } else {
-      $code.textContent = 'Could not load ruleset.';
-    }
+    const res = await fetch(`/api/setup/rules/${tool.id}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ force }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok || data.ok === false) showRulesToast(data.error || (res.status === 404 ? RESTART_HINT : `${tool.name} rules were not installed`), 5000);
+    else showRulesToast(`${tool.name} rules installed`);
+  } catch (err) {
+    showRulesToast(`Failed: ${err.message}`, 5000);
+  }
+  rulesStatus = await loadRulesStatus();
+  renderRulesList();
+}
+
+async function viewRules(host, name) {
+  const $wrap = document.getElementById('rulesViewWrap');
+  const $code = document.getElementById('rulesViewCode');
+  if ($wrap.style.display !== 'none' && $wrap.dataset.host === host) {
+    $wrap.style.display = 'none';
+  } else {
+    try { $code.textContent = await loadRulesText(host); }
+    catch { $code.textContent = `The ${name} rules could not be loaded. ${RESTART_HINT}`; }
+    $wrap.dataset.host = host;
+    $wrap.style.display = '';
+  }
+  requestAnimationFrame(() => resizeViewport(currentStep));
+}
+
+async function copyRules(host, name) {
+  let text;
+  try { text = await loadRulesText(host); }
+  catch { showRulesToast(`Could not load the ${name} rules. ${RESTART_HINT}`, 5000); return; }
+  try {
+    await navigator.clipboard.writeText(text);
+    showRulesToast(`${name} rules copied`);
   } catch {
-    $code.textContent = 'Failed to load ruleset.';
+    // A refused clipboard is the browser's doing; restarting SynaBun would not help.
+    showRulesToast('Could not copy: the browser refused access to the clipboard.', 5000);
   }
-  if (currentStep === 6) resizeViewport(6);
 }
 
-document.getElementById('rulesetCodeWrap').addEventListener('click', () => {
-  const code = document.getElementById('rulesetCode').textContent;
-  if (code === 'Loading...' || code.startsWith('Could not') || code.startsWith('Failed')) return;
-  navigator.clipboard.writeText(code);
-  wizardState.rulesetCopied = true;
-  const label = document.querySelector('#rulesetCodeWrap .code-copy-label');
-  label.textContent = 'copied!';
-  label.style.opacity = '1';
-  setTimeout(() => { label.textContent = 'copy'; label.style.opacity = ''; }, 2000);
+// A click-to-copy code box (the pattern of the MCP JSON box in Step 5). The
+// label says "copied!" only once the clipboard took the text; a browser that
+// refuses (no permission, no focus, no secure context) gets "copy failed".
+function wireRulesCopyBox(wrapId, codeId) {
+  document.getElementById(wrapId).addEventListener('click', async () => {
+    const $code = document.getElementById(codeId);
+    if (!$code.dataset.loaded) return;
+    const label = document.querySelector(`#${wrapId} .code-copy-label`);
+    let copied = false;
+    try {
+      await navigator.clipboard.writeText($code.textContent);
+      copied = true;
+    } catch { /* reported on the label below */ }
+    label.textContent = copied ? 'copied!' : 'copy failed';
+    label.style.opacity = '1';
+    clearTimeout(label._timer);
+    label._timer = setTimeout(() => { label.textContent = 'copy'; label.style.opacity = ''; }, copied ? 2000 : 4000);
+  });
+}
+
+// A collapsible copy-only section: loads its text the first time it opens.
+function wireRulesExtra(sectionId, headerId, bodyId, wrapId, codeId, host, name) {
+  const $section = document.getElementById(sectionId);
+  const $body = document.getElementById(bodyId);
+  const $code = document.getElementById(codeId);
+  document.getElementById(headerId).addEventListener('click', async () => {
+    const isOpen = $section.classList.toggle('open');
+    $body.style.display = isOpen ? '' : 'none';
+    if (isOpen && !$code.dataset.loaded) {
+      $code.textContent = 'Loading...';
+      try { $code.textContent = await loadRulesText(host); $code.dataset.loaded = '1'; }
+      catch { $code.textContent = `The ${name} could not be loaded. ${RESTART_HINT}`; }
+    }
+    requestAnimationFrame(() => resizeViewport(currentStep));
+  });
+  wireRulesCopyBox(wrapId, codeId);
+}
+
+wireRulesExtra('rulesCursorSection', 'rulesCursorHeader', 'rulesCursorBody', 'rulesCursorWrap', 'rulesCursorCode', 'cursor', 'Cursor rules');
+wireRulesExtra('rulesCoexistSection', 'rulesCoexistHeader', 'rulesCoexistBody', 'rulesCoexistWrap', 'rulesCoexistCode', 'coexistence', 'coexistence snippet');
+
+document.getElementById('rulesViewWrap').addEventListener('click', () => {
+  const $wrap = document.getElementById('rulesViewWrap');
+  const tool = TOOLS.find(t => t.id === $wrap.dataset.host);
+  if (tool) copyRules(tool.id, tool.name);
 });
 
+async function onRulesetStep() {
+  rulesStatus = await loadRulesStatus();
+  renderRulesList();
+  if (currentStep === 6) resizeViewport(6);
+}
+
 // ═══════════════════════════════════════════
 // STEP 7: Complete
 // ═══════════════════════════════════════════
@@ -2266,11 +2787,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 selected 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',
@@ -2281,12 +2805,18 @@ async function onCompleteStep() {
     } catch { /* non-critical — user can enable via Settings later */ }
   }
 
+  // Rules count as installed when every connected tool has its copy in place.
+  rulesStatus = await loadRulesStatus();
+  const ruleTools = enabledRuleTools();
+  const rulesInstalled = ruleTools.length > 0 && !!rulesStatus
+    && ruleTools.every(t => ['installed', 'newer', 'shadowed'].includes(rulesStatus.hosts?.[t.id]?.state));
+
   const items = [
     { 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: 'Ruleset copied', done: !!wizardState.rulesetCopied },
+    { label: 'AI tool integration enabled', done: wizardState.enabledTools.length > 0 || wizardState.mcpWritten },
+    { label: 'Rules installed', done: rulesInstalled },
   ];
 
   const $list = document.getElementById('checklist');
@@ -2317,11 +2847,18 @@ async function init() {
       window.location.href = '/';
       return;
     }
-    if (data.projectDir) {
-      wizardState.projectRoot = data.projectDir;
+    if (data.dataHome) {
+      wizardState.dataHome = data.dataHome;
+    }
+    if (data.packageRoot) {
+      wizardState.packageRoot = data.packageRoot;
     }
   } catch {}
 
+  // Enable the entrance animation only after every top-level initializer has
+  // run successfully. Until this point the static welcome remains usable and
+  // visible instead of collapsing to a navigation-only shell.
+  document.documentElement.classList.add('onboarding-animated');
   updateNav();
   startMascot();
   // Resize after mascot SVG is injected so scrollHeight includes it