synabun 1.3.0 → 2.0.0

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,172 @@
     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 installer) ── */
+  .rules-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 14px;
+    font-size: 12px;
+    color: var(--t-secondary);
+    cursor: pointer;
+    user-select: none;
+  }
+  /* A step whose height follows what the installer reports: on a short window it scrolls (its parts keep their
+     height instead of being squeezed) rather than being cut off. */
+  .step[data-step="6"] { max-height: calc(90vh - 58px); }
+  .step[data-step="6"] > * { flex-shrink: 0; }
+  .step[data-step="6"] .subtitle { margin-bottom: 16px; }
+  /* The step's one primary action: what it does, then the button. */
+  .rules-install-all {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 14px;
+    margin-bottom: 12px;
+    border: 1px solid var(--accent-border);
+    border-radius: var(--r-card);
+    background: var(--accent-bg);
+  }
+  .rules-install-all .ria-text { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--t-primary); line-height: 1.5; }
+  .rules-install-all .action-btn { flex-shrink: 0; padding: 9px 18px; font-size: 12px; white-space: nowrap; }
+  /* What the installer answered, and where the rules live. */
+  .rules-result { margin-bottom: 12px; font-size: 12px; color: var(--t-primary); line-height: 1.5; overflow-wrap: anywhere; }
+  .rules-result.ok .rr-message::before { content: '\2713'; margin-right: 8px; color: var(--green); }
+  .rules-result.fail .rr-message { color: var(--red); }
+  .rules-result .rr-where { margin-top: 4px; font-size: 11px; color: var(--t-muted); }
+  .rules-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+  .rules-list:empty { display: none; }
+  .rules-list .mcp-toggle-row.has-note { align-items: flex-start; }
+  .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-list .mtr-note { margin-top: 4px; font-size: 11px; color: var(--t-secondary); line-height: 1.45; overflow-wrap: anywhere; }
+  .rules-actions { display: flex; gap: 6px; flex-shrink: 0; }
+  .rules-actions button, .rules-note 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, .rules-note button:hover { background: var(--s-medium); color: var(--t-bright); border-color: var(--b-hover); }
+  .rules-actions button.primary { border-color: var(--accent-border); background: var(--s-active); color: var(--t-bright); font-weight: 600; }
+  .rules-actions button:disabled, .rules-note button:disabled { opacity: 0.4; cursor: default; }
+  .rules-note { font-size: 11px; color: var(--t-muted); margin-bottom: 12px; line-height: 1.5; }
+  .rules-note button { margin-left: 8px; }
+  /* Under the installer: the text SynaBun cannot install, to paste by hand. */
+  .rules-manual-label { margin: 4px 0 8px; font-size: 10px; color: var(--t-muted); text-transform: uppercase; letter-spacing: 0.5px; }
+  .rules-extra { margin-top: 8px; }
+  #rulesViewCode, #rulesCursorCode, #rulesCoexistCode { max-height: 160px; }
+  #rulesViewCode { margin-bottom: 12px; }
+
   /* ── Dependency List ── */
   .dep-list {
     list-style: none;
@@ -603,10 +773,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 +785,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 +1078,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 +1219,73 @@
         <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 and installs its rules 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 with each tool I connect</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: Install SynaBun rules. The installer leads; the copy boxes at the bottom are only for what it cannot write. -->
     <div class="step right" data-step="6">
-      <div style="position:relative;display:flex;justify-content:center;align-items:center;">
-        <div class="step-eyes"></div>
+      <div class="step-eyes"></div>
+      <h2>Install SynaBun Rules</h2>
+      <p class="subtitle">SynaBun installs its rules where each connected tool loads them for every project, and keeps them up to date. There is nothing to paste.</p>
+      <div class="rules-note" id="rulesNote" role="status" style="display:none;"></div>
+      <div class="rules-install-all" id="rulesInstallAll" style="display:none;">
+        <div class="ria-text" id="rulesInstallAllHelp"></div>
+        <button type="button" class="action-btn" id="rulesInstallAllBtn" aria-describedby="rulesInstallAllHelp"></button>
+      </div>
+      <div class="rules-result" id="rulesResult" role="status" style="display:none;">
+        <div class="rr-message" id="rulesResultMessage"></div>
+        <div class="rr-where" id="rulesResultWhere"></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="rules-list" id="rulesList"></div>
+      <div class="instructions-preview" id="rulesViewCode" role="region" tabindex="0" style="display:none;"></div>
+      <div class="rules-note" id="rulesIdle" style="display:none;"></div>
+      <div class="rules-manual-label">Manual setup</div>
+      <div class="mcp-other-section" id="rulesCursorSection">
+        <div class="mcp-other-header" id="rulesCursorHeader">
+          <span>Cursor (its rules are pasted by hand)</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 id="rulesCursorHelp" style="font-size:12px;color:var(--t-secondary);margin-bottom:6px;">Cursor keeps its User Rules inside the app, so SynaBun cannot install them. Copy the rules and paste them 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>
+      <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 id="rulesCoexistHelp" 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>
@@ -1073,7 +1296,7 @@
       <h2 style="text-align:center;margin-bottom:12px;">Setup Complete!</h2>
       <ul class="checklist" id="checklist"></ul>
       <div id="restartNotice" style="margin:16px 0 0;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-card);font-size:12px;color:var(--t-primary);line-height:1.5;">
-        <span style="color:var(--t-bright);font-weight:600;">Restart required</span> — Relaunch <span id="restartToolName" style="color:var(--t-bright);font-weight:500;"></span> for the MCP changes to be picked up.
+        <span style="color:var(--t-bright);font-weight:600;">Restart required</span> — Relaunch <span id="restartToolName" style="color:var(--t-bright);font-weight:500;"></span> for the MCP changes and SynaBun's rules to be picked up.
       </div>
       <div style="text-align:center;margin-top:16px;">
         <button class="action-btn" id="launchBtn" style="font-size:15px;padding:12px 32px;">Launch Neural Interface</button>
@@ -1183,30 +1406,45 @@
 
 <script type="module">
 
+// The rules step is the installer of Settings → AI connections: the same client calls and the same reading
+// of the status (see STEP 6). Both modules are import-free, so the wizard still loads nothing of the app.
+import { fetchRulesStatus, fetchRulesTextWithFallback, installRules, installAllRules } from './shared/api.js';
+import {
+  describeRulesHost, describeRulesInstall, describeRulesInstallAll, describeRulesInPlace, rulesInstallPlan, catalogueTranslator,
+} from './shared/settings/settings-rules.js';
+
 // ═══════════════════════════════════════════
 // STATE
 // ═══════════════════════════════════════════
 
 const TOTAL_STEPS = 8;
 let currentStep = 0;
+// Step 6: a connected tool still has no rules. Leaving the step then is a skip, and the Next button says so.
+let rulesPending = false;
 
 const wizardState = {
   collectionName: 'claude_memory',
   collectionDisplayName: 'Claude Memory',
   dbLocationPath: null,
   selectedTool: null,
-  projectRoot: '',
+  enabledTools: [],    // tool ids toggled on via Step 5 install toggles
+  dataHome: '',
+  packageRoot: '',
+  mcpCommand: '',
+  mcpArgs: [],
   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 +1524,11 @@ function goToStep(n) {
 function updateNav() {
   $prevBtn.disabled = currentStep === 0;
 
-  const labels = ['', 'Next', 'Next', 'Next', 'Next', 'Next', 'Next', 'Finish'];
-  $nextBtn.textContent = (labels[currentStep] || 'Next') + ' \u2192';
+  const labels = ['Begin', 'Next', 'Next', 'Next', 'Next', 'Next', 'Next', 'Finish'];
+  const label = currentStep === 6 && rulesPending ? 'Skip' : (labels[currentStep] || 'Next');
+  $nextBtn.textContent = label + ' \u2192';
 
-  if (currentStep === 0 || currentStep === TOTAL_STEPS - 1) {
+  if (currentStep === TOTAL_STEPS - 1) {
     $nextBtn.style.display = 'none';
   } else {
     $nextBtn.style.display = '';
@@ -1329,7 +1568,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 +1602,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 +1872,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 +1889,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 +1898,7 @@ function renderHappyBun() {}
     }
   }
 
-  function showRestoreConfirm(m, buffer) {
+  function showRestoreConfirm(m, file) {
     const fileCount = (m.files || []).length;
     const hasDb = !!(m.database);
 
@@ -1706,7 +1952,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 +2047,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 +2120,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 +2328,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 +2429,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 +2450,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 +2463,149 @@ 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' };
+  // A packaged application is started through its own executable; the server says which.
+  const packaged = wizardState.mcpCommand && wizardState.mcpCommand !== 'node';
+  const command = packaged ? wizardState.mcpCommand : 'node';
+  const args = packaged ? wizardState.mcpArgs : [mcpPath];
+  return JSON.stringify({ mcpServers: { SynaBun: { command, args, 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 +2616,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,47 +2627,255 @@ document.getElementById('mcpCodeWrap').addEventListener('click', () => {
 });
 
 // ═══════════════════════════════════════════
-// STEP 6: Ruleset
+// STEP 6: Install SynaBun rules
 // ═══════════════════════════════════════════
+// The installer, as Settings → AI connections → SynaBun rules shows it: one
+// button that installs the rules for every connected tool, then one row per
+// tool with where its rules live, what state they are in (GET /api/setup/rules)
+// and the action that state calls for, and under them what the installer
+// answered. The calls are the shared client's (shared/api.js). What a state is
+// called, which action it gets and every sentence about it come from
+// shared/settings/settings-rules.js and the Settings strings (i18n/en.json), so
+// the two surfaces cannot drift apart. Nothing is pasted in this step: the two
+// boxes under "Manual setup" hold what SynaBun cannot install (Cursor's User
+// Rules, the coexistence snippet). Nothing here has to be clicked to continue.
+
+const RESTART_HINT = 'Restart SynaBun to finish this update.';
+const RULES_SETTINGS_PATH = 'Settings → AI connections → SynaBun rules';
+let rulesStatus = null;       // null: the route is missing or failed
+let rulesTx = null;           // the Settings strings; null until they are loaded
+let rulesReport = null;       // what the last install answered: { message, note, ok }
+let rulesBusy = false;        // an install is on its way: every button of the step waits
+let rulesViewHost = '';       // the tool whose rules text is open under the list
+const rulesTextCache = {};
+
+// The wizard's names for the tools (the ones Step 5 shows), for every sentence that names one.
+const RULES_TOOL_NAMES = Object.fromEntries(TOOLS.map(t => [t.id, t.name]));
+const ruleToolNames = (hosts) => hosts.map(host => RULES_TOOL_NAMES[host] || host).join(', ');
+
+// The words of this step are the Settings ones. One request; a failed one is tried again on the next visit.
+async function loadRulesStrings() {
+  if (rulesTx) return rulesTx;
+  try {
+    const res = await fetch('/i18n/en.json');
+    if (res.ok) rulesTx = catalogueTranslator(await res.json());
+  } catch { /* the step says so and offers to try again */ }
+  return rulesTx;
+}
 
-async function onRulesetStep() {
-  const tool = TOOLS.find(t => t.id === wizardState.selectedTool) || TOOLS[0];
-  document.getElementById('rulesetFileName').textContent = tool.instrFile;
+// The rendered text for a host, from the rules route or the older read-only endpoint.
+async function loadRulesText(host) {
+  if (!rulesTextCache[host]) rulesTextCache[host] = await fetchRulesTextWithFallback(host);
+  return rulesTextCache[host];
+}
 
-  // Map tool to API format
-  const formatMap = { claude: 'claude', cursor: 'cursor', windsurf: 'generic', codex: 'codex', other: 'generic' };
-  const format = formatMap[tool.id] || 'generic';
+function enabledRuleTools() {
+  return wizardState.enabledTools.map(id => TOOLS.find(t => t.id === id)).filter(Boolean);
+}
 
-  const $code = document.getElementById('rulesetCode');
-  if ($code.dataset.loadedFormat === format) return; // already loaded
+function renderRulesStep() {
+  const el = (id) => document.getElementById(id);
+  const tx = rulesTx;
+  const plan = rulesInstallPlan(rulesStatus);
+  const ready = !!tx && !!rulesStatus;
+
+  // What stands in the way, if anything: the step's own text, the installer, or no connected tool.
+  const note = !tx ? 'This step could not load its text. Check that SynaBun is running, then try again.'
+    : !rulesStatus ? `The rules installer did not answer. ${RESTART_HINT} The rules can also be installed later in ${RULES_SETTINGS_PATH}.`
+    : !plan.connected.length ? 'No tool is connected yet. Connect one in the previous step and its rules are installed with it.'
+    : '';
+  const $note = el('rulesNote');
+  $note.textContent = note;
+  if (note && !ready) {
+    const retry = document.createElement('button');
+    retry.type = 'button';
+    retry.textContent = 'Try again';
+    retry.disabled = rulesBusy;
+    retry.addEventListener('click', () => onRulesetStep());
+    $note.appendChild(retry);
+  }
+  $note.style.display = note ? '' : 'none';
+
+  // The primary action, while a connected tool still has rules to install or update.
+  rulesPending = ready && plan.pending.length > 0;
+  el('rulesInstallAll').style.display = rulesPending ? '' : 'none';
+  if (tx) {
+    el('rulesInstallAllHelp').textContent = tx('settings.redesign.control.set002.help');
+    el('rulesInstallAllBtn').textContent = tx('settings.redesign.control.set002.label');
+    el('rulesCursorHelp').textContent = tx('settings.redesign.setup.cursorHelp');
+    el('rulesCoexistHelp').textContent = tx('settings.redesign.setup.coexistHelp');
+  }
+  el('rulesInstallAllBtn').disabled = rulesBusy;
+
+  // The result: what the last install answered, or, with nothing left to install, the rules that are in place
+  // (the toggles of Step 5 installed them) and the file each tool reads.
+  const report = rulesReport || (ready && !rulesPending ? describeRulesInPlace(rulesStatus, { tx, labels: RULES_TOOL_NAMES }) : null);
+  const $result = el('rulesResult');
+  $result.style.display = report ? '' : 'none';
+  if (report) {
+    $result.className = 'rules-result ' + (report.ok === false ? 'fail' : 'ok');
+    el('rulesResultMessage').textContent = report.message;
+    el('rulesResultWhere').textContent = report.note || '';
+    el('rulesResultWhere').style.display = report.note ? '' : 'none';
+  }
+
+  // One row per tool that has rules or is connected. Without a status only the tools connected in Step 5 are known.
+  const $list = el('rulesList');
+  $list.innerHTML = '';
+  const idle = [];
+  for (const tool of (tx ? (rulesStatus ? TOOLS : enabledRuleTools()) : [])) {
+    const info = rulesStatus?.hosts?.[tool.id];
+    const view = describeRulesHost(info, { label: tool.name, version: rulesStatus?.version, tx });
+    // Rules are for a tool that talks to SynaBun. One that is not connected and has none is only named, under
+    // the list: connecting it in Step 5 installs them.
+    if (view.known && view.state === 'not-installed' && !plan.connected.includes(tool.id)) { idle.push(tool.name); continue; }
+    const row = document.createElement('div');
+    row.className = 'mcp-toggle-row' + (view.good ? ' connected' : '') + (view.note ? ' has-note' : '');
+    row.dataset.host = tool.id;
+    row.innerHTML = `
+      <div class="mtr-body">
+        <div class="mtr-name">${tool.name}<span class="mtr-state${view.good ? ' ok' : ''}" data-role="state"></span></div>
+        <div class="mtr-path" data-role="path"></div>
+        <div class="mtr-note" data-role="note" style="display:none"></div>
+      </div>
+      <div class="rules-actions">
+        ${view.action ? '<button type="button" class="primary" data-role="primary"></button>' : ''}
+        ${view.known ? '<button type="button" data-role="view"></button>' : ''}
+      </div>
+    `;
+    row.querySelector('[data-role="state"]').textContent = view.badge;
+    const $path = row.querySelector('[data-role="path"]');
+    $path.textContent = view.pathText;
+    $path.title = view.path;
+    const $rowNote = row.querySelector('[data-role="note"]');
+    $rowNote.textContent = view.note;
+    $rowNote.style.display = view.note ? '' : 'none';
+    const $primary = row.querySelector('[data-role="primary"]');
+    if ($primary) {
+      $primary.textContent = view.actionLabel;
+      $primary.disabled = rulesBusy;
+      $primary.addEventListener('click', () => installToolRules(tool));
+    }
+    const $view = row.querySelector('[data-role="view"]');
+    if ($view) {
+      $view.textContent = tx(rulesViewHost === tool.id ? 'settings.redesign.setup.hide' : 'settings.redesign.setup.view');
+      $view.setAttribute('aria-expanded', String(rulesViewHost === tool.id));
+      $view.setAttribute('aria-controls', 'rulesViewCode');
+      $view.addEventListener('click', () => viewRules(tool));
+    }
+    $list.appendChild(row);
+  }
+  el('rulesViewCode').style.display = rulesViewHost && $list.querySelector(`[data-host="${rulesViewHost}"] [data-role="view"]`) ? '' : 'none';
+  // The other tools, in one line. With no tool connected at all, the note at the top already says it.
+  const $idle = el('rulesIdle');
+  $idle.textContent = idle.length && plan.connected.length ? `${tx('settings.redesign.setup.notConnected')}: ${idle.join(', ')}. Connecting a tool in the previous step installs its rules.` : '';
+  $idle.style.display = $idle.textContent ? '' : 'none';
 
-  $code.textContent = 'Loading...';
+  updateNav();
+  requestAnimationFrame(() => resizeViewport(currentStep));
+}
+
+// Run one install, keep what it answered for the result line, then read the status again.
+async function runRulesInstall(work) {
+  if (rulesBusy) return;
+  rulesBusy = true;
+  renderRulesStep();
   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.';
-    }
-  } catch {
-    $code.textContent = 'Failed to load ruleset.';
+    rulesReport = await work();
+  } catch (err) {
+    // The server's own sentence (an edited copy, damaged markers, another SynaBun at work). A route that is not
+    // there is the server that was not restarted.
+    const message = err?.message === 'HTTP 404' ? RESTART_HINT : (err?.message || rulesTx('settings.redesign.setup.rulesActionFailed'));
+    rulesReport = { message, note: '', ok: false };
+  }
+  rulesStatus = await fetchRulesStatus();
+  rulesBusy = false;
+  renderRulesStep();
+}
+
+// "Install for all": every connected tool, by the installer's own rule. Same call as the button in Settings.
+function installAllToolRules() {
+  runRulesInstall(async () => {
+    const report = describeRulesInstallAll(await installAllRules(), { tx: rulesTx, labels: RULES_TOOL_NAMES });
+    return { message: report.message, note: report.note, ok: report.failed.length === 0 };
+  });
+}
+
+// One tool's Install, Update or Replace. Replace is behind the confirm that says the edited copy is backed up.
+function installToolRules(tool) {
+  const view = describeRulesHost(rulesStatus?.hosts?.[tool.id], { label: tool.name, version: rulesStatus?.version, tx: rulesTx });
+  if (!view.action) return;
+  if (view.force && !confirm(rulesTx('settings.redesign.setup.replaceYourEditedRulesWithSynabun', { label: tool.name }))) return;
+  delete rulesTextCache[tool.id];
+  runRulesInstall(async () => {
+    const result = await installRules(tool.id, { force: view.force });
+    return { message: describeRulesInstall(result, view.state, { label: tool.name, tx: rulesTx }), note: '', ok: true };
+  });
+}
+
+// View shows the exact text a tool receives, under the list; a second press hides it.
+async function viewRules(tool) {
+  const $code = document.getElementById('rulesViewCode');
+  if (rulesViewHost === tool.id) {
+    rulesViewHost = '';
+  } else {
+    try { $code.textContent = await loadRulesText(tool.id); }
+    catch { $code.textContent = rulesTx('settings.redesign.setup.couldNotLoadTheRules', { label: tool.name, RESTART_HINT }); }
+    $code.setAttribute('aria-label', rulesTx('settings.redesign.setup.previewRules', { name: tool.name }));
+    rulesViewHost = tool.id;
   }
-  if (currentStep === 6) resizeViewport(6);
+  renderRulesStep();
 }
 
-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);
-});
+document.getElementById('rulesInstallAllBtn').addEventListener('click', () => installAllToolRules());
+
+// 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, for text SynaBun cannot install: loads it 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');
+
+async function onRulesetStep() {
+  rulesReport = null;
+  [rulesStatus] = await Promise.all([fetchRulesStatus(), loadRulesStrings()]);
+  renderRulesStep();
+  if (currentStep === 6) resizeViewport(6);
+}
 
 // ═══════════════════════════════════════════
 // STEP 7: Complete
@@ -2266,11 +2884,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 +2902,23 @@ 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. When they are not, the item says
+  // for which tools and where the installer is from now on.
+  rulesStatus = await fetchRulesStatus();
+  const rulesPlan = rulesInstallPlan(rulesStatus);
+  const rulesMissing = rulesPlan.connected.filter(host => !rulesPlan.inPlace.includes(host));
+  const rulesInstalled = rulesPlan.connected.length > 0 && rulesMissing.length === 0;
+  const rulesLabel = rulesInstalled ? 'Rules installed'
+    : !rulesStatus ? `Rules not installed: the installer did not answer (${RULES_SETTINGS_PATH})`
+    : !rulesPlan.connected.length ? 'Rules not installed: no tool is connected'
+    : `Rules not installed for ${ruleToolNames(rulesMissing)} (${RULES_SETTINGS_PATH})`;
+
   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: rulesLabel, done: rulesInstalled },
   ];
 
   const $list = document.getElementById('checklist');
@@ -2317,11 +2949,22 @@ 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;
+    }
+    if (data.mcpCommand && Array.isArray(data.mcpArgs)) {
+      wizardState.mcpCommand = data.mcpCommand;
+      wizardState.mcpArgs = data.mcpArgs;
     }
   } 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