npm - total-recall-brain - Versions diffs - 3.1.0 - Mend

total-recall-brain 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (170) hide show

package/LICENSE +21 -0
package/README.md +173 -0
package/bin/antigravity.mjs +212 -0
package/bin/init.mjs +36 -0
package/bin/oci-sniper.sh +69 -0
package/bin/total-recall.mjs +229 -0
package/docs/ARCHITECTURE.md +251 -0
package/docs/IDE_INTEGRATION.md +112 -0
package/package.json +71 -0
package/scaffold/.agent/skills/total-recall/SKILL.md +195 -0
package/scaffold/.agent/skills/total-recall/evals/evals.json +20 -0
package/scaffold/.agent/skills/total-recall/memory-vault/concepts/cli-help-reference.md +145 -0
package/scaffold/.agent/skills/total-recall/memory-vault/invariants/operating-instructions.md +75 -0
package/scaffold/.agent/skills/total-recall/memory-vault/preferences/always-websearch-gap.md +16 -0
package/scaffold/.agent/skills/total-recall/memory-vault/preferences/topic-research-sop.md +17 -0
package/scaffold/.agent/skills/total-recall/references/api-reference.md +187 -0
package/scaffold/.agent/skills/total-recall/references/architecture-reference.md +81 -0
package/scaffold/.agent/skills/total-recall/references/cli-reference.md +103 -0
package/scaffold/.agent/skills/total-recall/references/ssss-reference.md +88 -0
package/scaffold/.agent/skills/total-recall/references/troubleshooting.md +68 -0
package/scaffold/.agent/skills/total-recall/scripts/sync-repo.mjs +83 -0
package/scaffold/.agent/skills/total-recall/skills/cli-agents/SKILL.md +122 -0
package/scaffold/.agent/skills/total-recall/skills/cli-agents/agents.yml +27 -0
package/scaffold/.agent/skills/total-recall/skills/cli-agents/references/antigravity.txt +20 -0
package/scaffold/.agent/skills/total-recall/skills/cli-agents/references/claude.txt +58 -0
package/scaffold/.agent/skills/total-recall/skills/cli-agents/references/codex.txt +81 -0
package/scaffold/.agent/skills/total-recall/skills/cli-agents/references/gemini.txt +44 -0
package/scaffold/.agent/skills/total-recall/skills/research/SKILL.md +337 -0
package/scaffold/.agent/skills/total-recall/skills/skill/SKILL.md +281 -0
package/scaffold/.agent/skills/total-recall/skills/skill/assets/skill-template/SKILL.md +20 -0
package/scaffold/.agent/skills/total-recall/skills/skill/evals/evals.json +20 -0
package/scaffold/.agent/skills/total-recall/skills/skill/hooks/on-skill-add.sh +14 -0
package/scaffold/.agent/skills/total-recall/skills/skill/hooks/on-skill-delete.sh +14 -0
package/scaffold/.agent/skills/total-recall/skills/skill/learnings/.gitkeep +0 -0
package/scaffold/.agent/skills/total-recall/skills/skill/references/.gitkeep +0 -0
package/scaffold/.agent/skills/total-recall/skills/skill/scripts/.gitkeep +0 -0
package/scaffold/.agent/skills/total-recall/skills/skill/scripts/create-skill.sh +65 -0
package/scaffold/.agent/skills/total-recall/skills/skill/scripts/enforce-skill-optimization.mjs +135 -0
package/scaffold/.agent/skills/total-recall/skills/skill/scripts/find-skills.mjs +124 -0
package/scaffold/.agent/skills/total-recall/skills/skill/scripts/scan-skill.mjs +207 -0
package/scaffold/.agent/skills/total-recall/skills/skill/scripts/skill-watcher.mjs +64 -0
package/scaffold/.agent/skills/total-recall/skills/skill/subagents/audit-all-skills.md +62 -0
package/scaffold/.agent/skills/total-recall/skills/ssss/SKILL.md +27 -0
package/scaffold/.agent/skills/total-recall/skills/ssss/evals/evals.json +17 -0
package/scaffold/.agent/skills/total-recall/skills/ssss/references/ssss-spec.md +117 -0
package/scaffold/.agent/skills/total-recall/skills/ssss/scripts/validate-schema.mjs +54 -0
package/scaffold/.agent/skills/total-recall/skills/ssss/subagents/audit-ssss-node.md +9 -0
package/scaffold/.agent/skills/total-recall/subagents/total-recall-diagnostician.md +13 -0
package/src/cli/agent-dir.mjs +105 -0
package/src/cli/backup.mjs +313 -0
package/src/cli/brain.mjs +224 -0
package/src/cli/chat.mjs +74 -0
package/src/cli/config.mjs +247 -0
package/src/cli/connect.mjs +872 -0
package/src/cli/daemon.mjs +228 -0
package/src/cli/deploy-ui.mjs +1793 -0
package/src/cli/deploy.mjs +1726 -0
package/src/cli/doctor.mjs +254 -0
package/src/cli/dream.mjs +80 -0
package/src/cli/forget.mjs +92 -0
package/src/cli/friction.mjs +21 -0
package/src/cli/generate-pat.mjs +65 -0
package/src/cli/hash-password.mjs +22 -0
package/src/cli/help.mjs +153 -0
package/src/cli/import-rules.mjs +102 -0
package/src/cli/ingest/index.mjs +318 -0
package/src/cli/ingest/parsers/chrome-bookmarks.mjs +238 -0
package/src/cli/ingest/parsers/google-keep.mjs +147 -0
package/src/cli/ingest/parsers/search-history.mjs +142 -0
package/src/cli/ingest/parsers/youtube-history.mjs +181 -0
package/src/cli/ingest/utils/dedup.mjs +69 -0
package/src/cli/ingest/utils/takeout-walker.mjs +101 -0
package/src/cli/ingest.mjs +102 -0
package/src/cli/init.mjs +736 -0
package/src/cli/integration-dispatcher.mjs +128 -0
package/src/cli/lint.mjs +166 -0
package/src/cli/map.mjs +194 -0
package/src/cli/migrate.mjs +87 -0
package/src/cli/rebuild.mjs +88 -0
package/src/cli/recall.mjs +219 -0
package/src/cli/relay.mjs +518 -0
package/src/cli/remember.mjs +306 -0
package/src/cli/research.mjs +381 -0
package/src/cli/reset-password.mjs +75 -0
package/src/cli/restore.mjs +135 -0
package/src/cli/setup.mjs +616 -0
package/src/cli/share.mjs +180 -0
package/src/cli/skill.mjs +313 -0
package/src/cli/snapshot.mjs +108 -0
package/src/cli/start.mjs +63 -0
package/src/cli/status.mjs +296 -0
package/src/cli/sync.mjs +383 -0
package/src/cli/uninstall.mjs +613 -0
package/src/cli/upgrade.mjs +141 -0
package/src/cli/wizard.html +3682 -0
package/src/core/blackboard.mjs +54 -0
package/src/core/clarity-rewriter.mjs +770 -0
package/src/core/conclusion-writer.mjs +259 -0
package/src/core/config.mjs +277 -0
package/src/core/conflict-detector.mjs +536 -0
package/src/core/crypto.mjs +107 -0
package/src/core/daemon-control.mjs +158 -0
package/src/core/daemon-loop.mjs +364 -0
package/src/core/dream.mjs +347 -0
package/src/core/drift-detector.mjs +143 -0
package/src/core/embeddings.mjs +632 -0
package/src/core/emergency-alerts.mjs +137 -0
package/src/core/evolution.mjs +107 -0
package/src/core/fact-seeker.mjs +1602 -0
package/src/core/friction.mjs +95 -0
package/src/core/import-rules.mjs +308 -0
package/src/core/inference-engine.mjs +367 -0
package/src/core/logger.mjs +75 -0
package/src/core/memory-layers.mjs +96 -0
package/src/core/migrate.mjs +116 -0
package/src/core/notifications.mjs +77 -0
package/src/core/operation-validator.mjs +272 -0
package/src/core/optimizer.mjs +330 -0
package/src/core/pattern_detector.mjs +113 -0
package/src/core/post-mortem.mjs +413 -0
package/src/core/protect-instructions.mjs +148 -0
package/src/core/quick-capture.mjs +145 -0
package/src/core/research-queue.mjs +431 -0
package/src/core/research.mjs +461 -0
package/src/core/runtime.mjs +515 -0
package/src/core/sandbox.mjs +163 -0
package/src/core/scheduler.mjs +569 -0
package/src/core/schema.mjs +333 -0
package/src/core/search.mjs +219 -0
package/src/core/semantic-index.mjs +276 -0
package/src/core/session-watcher.mjs +850 -0
package/src/core/snapshot.mjs +133 -0
package/src/core/source-adapters.mjs +1038 -0
package/src/core/steering.mjs +137 -0
package/src/core/surface.mjs +444 -0
package/src/core/task_runner.mjs +125 -0
package/src/core/tts.mjs +142 -0
package/src/core/usage-tracker.mjs +349 -0
package/src/core/vault-cache.mjs +76 -0
package/src/core/vault.mjs +273 -0
package/src/core/watchdog.mjs +236 -0
package/src/server/api.mjs +944 -0
package/src/server/auth.mjs +410 -0
package/src/server/index.mjs +868 -0
package/src/server/keys.mjs +181 -0
package/src/server/rest.mjs +1652 -0
package/src/server/route-manifest.json +77 -0
package/src/server/routes/_shared.mjs +93 -0
package/src/server/routes/keys.mjs +55 -0
package/src/server/routes/memory.mjs +249 -0
package/src/server/routes/sessions.mjs +336 -0
package/src/server/routes/share.mjs +138 -0
package/src/server/tools.mjs +618 -0
package/templates/Caddyfile +37 -0
package/templates/com.totalrecall.backup.plist +42 -0
package/templates/com.totalrecall.daemon.plist +40 -0
package/templates/com.totalrecall.duckdns.plist +23 -0
package/templates/com.totalrecall.server.plist +46 -0
package/templates/default-config/budget.yml +6 -0
package/templates/default-config/runtime.yml +11 -0
package/templates/default-config/security.yml +53 -0
package/templates/default-config/voice.yml +34 -0
package/templates/obsidian-queries/conflicts.md +26 -0
package/templates/obsidian-queries/daily.md +17 -0
package/templates/obsidian-queries/index.md +38 -0
package/templates/obsidian-queries/skills.md +14 -0
package/templates/onboarding-interview.md +72 -0
package/templates/skill_engineering.md +40 -0
package/templates/total-recall-daemon.service +21 -0
package/templates/total-recall-server.service +20 -0

package/src/cli/wizard.html ADDED Viewed

@@ -0,0 +1,3682 @@
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Total Recall — Setup Wizard</title>
+<style>
+  :root {
+    --bg:     #0d1117;
+    --panel:  #161b22;
+    --panel2: #1c2128;
+    --border: #30363d;
+    --green:  #3fb950;
+    --yellow: #d29922;
+    --red:    #f85149;
+    --blue:   #58a6ff;
+    --muted:  #8b949e;
+    --text:   #e6edf3;
+    --accent: #7ee787;
+    --purple: #bc8cff;
+  }
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    height: 100vh;
+    overflow: hidden;
+    scroll-behavior: smooth;
+  }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+  /* ── Security Badges & Tooltips ── */
+  .security-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: rgba(88, 166, 255, 0.1);
+    color: var(--blue);
+    border: 1px solid rgba(88, 166, 255, 0.3);
+    border-radius: 4px;
+    padding: 2px 6px;
+    font-size: 11px;
+    font-weight: 500;
+    margin-left: 8px;
+    vertical-align: middle;
+    cursor: help;
+    position: relative;
+  }
+  .security-badge:hover {
+    background: rgba(88, 166, 255, 0.2);
+    border-color: var(--blue);
+  }
+  /* ── Layout ── */
+  .wizard-shell {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+  }
+  .sidebar {
+    width: 220px;
+    flex-shrink: 0;
+    background: var(--panel);
+    border-right: 1px solid var(--border);
+    padding: 28px 0;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+  }
+  .sidebar-brand {
+    padding: 0 20px 24px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 12px;
+  }
+  .sidebar-brand h2 {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--accent);
+    letter-spacing: -0.3px;
+  }
+  .sidebar-brand p {
+    font-size: 11px;
+    color: var(--muted);
+    margin-top: 3px;
+  }
+  .step-nav { list-style: none; }
+  .step-nav li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 20px;
+    font-size: 13px;
+    color: var(--muted);
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    position: relative;
+  }
+  .step-nav li:hover {
+    color: var(--text);
+    background: rgba(255,255,255,0.05);
+  }
+  .step-nav li.active {
+    color: var(--text);
+    background: rgba(88,166,255,0.1);
+  }
+  .step-nav li.active::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 0; bottom: 0;
+    width: 3px;
+    background: var(--blue);
+    border-radius: 0 2px 2px 0;
+  }
+  .step-nav li.done { color: var(--green); }
+  .step-badge {
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    background: var(--border);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 11px; font-weight: 600;
+    flex-shrink: 0;
+  }
+  .active .step-badge { background: var(--blue); color: #0d1117; }
+  .done .step-badge   { background: var(--green); color: #0d1117; }
+  .main-content {
+    flex: 1;
+    height: 100vh;
+    overflow-y: auto;
+    padding: 40px 48px;
+    max-width: 820px;
+  }
+  .main-content::-webkit-scrollbar {
+    width: 8px;
+  }
+  .main-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .main-content::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+  }
+  .main-content::-webkit-scrollbar-thumb:hover {
+    background: var(--muted);
+  }
+  /* ── Phases ── */
+  .phase { display: none; animation: fadeIn 0.2s ease; }
+  .phase.active { display: block; }
+  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .phase-header { margin-bottom: 28px; }
+  .phase-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
+  .phase-header p  { color: var(--muted); margin-top: 6px; font-size: 14px; }
+  /* ── Cards ── */
+  .card {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 24px;
+    margin-bottom: 20px;
+  }
+  .card h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
+  .card p, .card li { color: var(--muted); font-size: 13px; }
+  .card ul { padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
+  .card li { color: var(--text); }
+  .card li span { color: var(--muted); }
+  /* ── Arch diagram ── */
+  .arch-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 10px 0;
+    font-size: 13px;
+  }
+  .arch-box {
+    background: var(--panel2);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 12px;
+    font-size: 12px;
+    color: var(--blue);
+    white-space: nowrap;
+  }
+  .arch-arrow { color: var(--muted); font-size: 16px; }
+  /* ── Forms ── */
+  .form-group { margin-bottom: 18px; }
+  .form-group label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    margin-bottom: 6px;
+  }
+  .form-group input[type=text], .form-group input[type=password] {
+    width: 100%;
+    background: var(--panel2);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 9px 12px;
+    color: var(--text);
+    font-size: 14px;
+    font-family: inherit;
+    outline: none;
+    transition: border-color 0.15s;
+  }
+  .form-group input:focus { border-color: var(--blue); }
+  .form-group .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
+  .form-group .hint a { color: var(--blue); text-decoration: none; }
+  .radio-group { display: flex; flex-direction: column; gap: 8px; }
+  .radio-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 14px;
+    background: var(--panel2);
+    border: 2px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+  .radio-item:hover { border-color: #444c56; }
+  .radio-item.selected { border-color: var(--blue); background: rgba(88,166,255,0.05); }
+  .radio-item input[type=radio] { margin-top: 2px; accent-color: var(--blue); flex-shrink: 0; }
+  .radio-item .ri-label { font-size: 13px; font-weight: 600; }
+  .radio-item .ri-desc  { font-size: 12px; color: var(--muted); margin-top: 2px; }
+  .checkbox-group { display: flex; flex-direction: column; gap: 8px; }
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 13px;
+    cursor: pointer;
+  }
+  .checkbox-item input[type=checkbox] { accent-color: var(--blue); width: 15px; height: 15px; }
+  .sub-field { margin-top: 12px; padding-left: 4px; }
+  /* ── Buttons ── */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 7px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity 0.15s, transform 0.1s;
+  }
+  .btn:hover { opacity: 0.88; }
+  .btn:active { transform: scale(0.98); }
+  .btn-primary { background: #238636; color: #fff; }
+  .btn-secondary { background: var(--panel2); border: 1px solid var(--border); color: var(--text); }
+  .btn-blue { background: #1f6feb; color: #fff; }
+  .btn-row { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
+  /* ── Progress (Phase 2) ── */
+  #progress-track {
+    height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 12px;
+  }
+  #progress-bar {
+    height: 100%; width: 0%;
+    background: linear-gradient(90deg, #238636, var(--accent));
+    border-radius: 4px;
+    transition: width 0.4s ease;
+  }
+  #progress-label { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
+  #log {
+    max-height: 340px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .log-entry {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 5px 8px;
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+    line-height: 1.4;
+  }
+  .log-entry.step  { color: var(--blue); }
+  .log-entry.ok    { color: var(--green); }
+  .log-entry.warn  { color: var(--yellow); background: rgba(210,153,34,.06); }
+  .log-entry.error { color: var(--red);    background: rgba(248,81,73,.06); }
+  .log-entry .icon { flex-shrink: 0; width: 16px; }
+  /* ── Tabs (Phase 4) ── */
+  .tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
+  .tab-btn {
+    padding: 8px 14px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--muted);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    margin-bottom: -1px;
+    transition: color 0.15s, border-color 0.15s;
+  }
+  .tab-btn.active { color: var(--text); border-bottom-color: var(--blue); }
+  .tab-pane { display: none; }
+  .tab-pane.active { display: block; }
+  /* ── Code blocks ── */
+  .code-block {
+    position: relative;
+    background: #010409;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 14px 16px;
+    margin: 12px 0;
+    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+    font-size: 12px;
+    color: var(--text);
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+  .code-block .copy-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    padding: 4px 8px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    font-size: 11px;
+    color: var(--muted);
+    cursor: pointer;
+    font-family: inherit;
+    transition: all 0.2s ease-in-out;
+  }
+  .code-block .copy-btn:hover { color: var(--text); background: var(--border); }
+  .code-block .copy-btn.copied { color: #34d399; border-color: #34d399; background: rgba(52, 211, 153, 0.1); }
+  /* ── API table ── */
+  .api-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  .api-table th, .api-table td {
+    padding: 8px 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+  }
+  .api-table th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.8px; }
+  .api-table td { color: var(--text); }
+  .api-table td:first-child { font-family: monospace; color: var(--blue); white-space: nowrap; }
+  .method-badge {
+    display: inline-block;
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 700;
+    font-family: monospace;
+  }
+  .method-get  { background: rgba(63,185,80,.15);  color: var(--green); }
+  .method-post { background: rgba(88,166,255,.15); color: var(--blue); }
+  .method-put  { background: rgba(210,153,34,.15); color: var(--yellow); }
+  .method-del  { background: rgba(248,81,73,.15);  color: var(--red); }
+  /* ── Token display ── */
+  .token-box {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    background: #010409;
+    border: 1px solid var(--green);
+    border-radius: 8px;
+    padding: 12px 16px;
+    margin: 12px 0;
+  }
+  .token-box code {
+    flex: 1;
+    font-family: monospace;
+    font-size: 13px;
+    color: var(--accent);
+    word-break: break-all;
+  }
+  /* ── URL cards (Phase 6) ── */
+  .url-grid { display: flex; flex-direction: column; gap: 12px; }
+  .url-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    background: var(--panel2);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px 16px;
+  }
+  .url-item .ui-icon { font-size: 20px; width: 32px; text-align: center; }
+  .url-item .ui-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }
+  .url-item .ui-value { font-size: 14px; color: var(--blue); word-break: break-all; }
+  .url-item a.ui-open {
+    margin-left: auto;
+    padding: 5px 12px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+    color: var(--text);
+    font-size: 12px;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+  .health-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 16px;
+    font-size: 13px;
+  }
+  .health-dot {
+    width: 10px; height: 10px; border-radius: 50%;
+    background: var(--yellow);
+    flex-shrink: 0;
+  }
+  .health-dot.ok  { background: var(--green); }
+  .health-dot.err { background: var(--red); }
+  /* ── Notice ── */
+  .notice {
+    display: flex;
+    gap: 10px;
+    padding: 12px 14px;
+    border-radius: 7px;
+    font-size: 13px;
+    margin-bottom: 16px;
+  }
+  .notice.info { background: rgba(88,166,255,.07); border: 1px solid rgba(88,166,255,.2); }
+  .notice.warn { background: rgba(210,153,34,.07); border: 1px solid rgba(210,153,34,.2); }
+  .notice.success { background: rgba(63,185,80,.07); border: 1px solid rgba(63,185,80,.2); }
+  /* ── IDE picker ── */
+  .ide-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: border-color .15s, background .15s;
+    position: relative;
+    padding-bottom: 36px;
+  }
+  .ide-card:hover { border-color: var(--blue); background: rgba(88,166,255,.04); }
+  .ide-card input[type=checkbox] { display: none; }
+  .ide-card .ide-icon { font-size: 22px; flex-shrink: 0; }
+  .ide-card .ide-name { font-weight: 600; font-size: 13px; }
+  .ide-card .ide-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
+  .ide-card .ide-check { position: absolute; top: 10px; right: 10px; color: var(--green); font-size: 16px; display: none; }
+  .ide-card.selected { border-color: var(--green); background: rgba(63,185,80,.06); }
+  .ide-card.selected .ide-check { display: block; }
+  .connect-result-line { padding: 2px 0; }
+  .connect-result-line.ok  { color: var(--green); }
+  .connect-result-line.err { color: var(--red); }
+  .connect-result-line.info { color: var(--muted); }
+  /* Collapsible Groups for Rules & Skills */
+  details.group-details summary::-webkit-details-marker { display: none; }
+  details.group-details summary { list-style: none; }
+  details.group-details[open] .details-arrow { transform: rotate(0deg); }
+  details.group-details:not([open]) .details-arrow { transform: rotate(-90deg); }
+  /* Skills specific accent styling */
+  details.group-details.skill-group {
+    border-color: rgba(188, 140, 255, 0.25) !important;
+  }
+  details.group-details.skill-group summary {
+    background: rgba(188, 140, 255, 0.03) !important;
+  }
+  details.group-details.skill-group summary:hover {
+    background: rgba(188, 140, 255, 0.06) !important;
+  }
+  /* ── Floating Persistent Install Status Bar ── */
+  .persistent-install-bar {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 380px;
+    background: rgba(22, 27, 34, 0.85);
+    backdrop-filter: blur(16px) saturate(120%);
+    -webkit-backdrop-filter: blur(16px) saturate(120%);
+    border: 1px solid rgba(48, 54, 61, 0.85);
+    border-radius: 12px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+    padding: 16px;
+    z-index: 10000;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    display: none; /* hidden by default */
+  }
+  .persistent-install-bar.visible {
+    display: block;
+    animation: slideInBar 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  @keyframes slideInBar {
+    from {
+      opacity: 0;
+      transform: translateY(20px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  .pbar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  .pbar-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .pbar-spinner {
+    width: 8px;
+    height: 8px;
+    background-color: var(--blue);
+    border-radius: 50%;
+    animation: pbar-pulse 1.4s infinite ease-in-out;
+  }
+  @keyframes pbar-pulse {
+    0%, 100% { transform: scale(0.6); opacity: 0.4; }
+    50% { transform: scale(1.2); opacity: 1; }
+  }
+  .pbar-details-link {
+    font-size: 11px;
+    color: var(--blue);
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: 500;
+  }
+  .pbar-details-link:hover {
+    text-decoration: underline;
+  }
+  .pbar-track {
+    height: 6px;
+    background: var(--border);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 8px;
+  }
+  .pbar-fill {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, var(--green), var(--accent));
+    border-radius: 3px;
+    transition: width 0.4s ease;
+  }
+  .pbar-status-text {
+    font-size: 11px;
+    color: var(--muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 4px;
+  }
+  .pbar-latest-log {
+    font-size: 10px;
+    font-family: 'SF Mono', monospace;
+    color: var(--blue);
+    background: rgba(88, 166, 255, 0.05);
+    border-radius: 4px;
+    padding: 4px 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* ── GitHub automated backup checklist ── */
+  .progress-step-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 13px;
+    margin-bottom: 8px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--border);
+    transition: all 0.2s ease;
+  }
+  .progress-step-item.pending {
+    color: var(--muted);
+    opacity: 0.6;
+  }
+  .progress-step-item.active {
+    color: var(--blue);
+    background: rgba(88, 166, 255, 0.05);
+    border-color: rgba(88, 166, 255, 0.3);
+  }
+  .progress-step-item.success {
+    color: var(--green);
+    background: rgba(63, 185, 80, 0.05);
+    border-color: rgba(63, 185, 80, 0.3);
+  }
+  .progress-step-item.error {
+    color: var(--red);
+    background: rgba(248, 81, 73, 0.05);
+    border-color: rgba(248, 81, 73, 0.3);
+  }
+  .progress-step-item .step-icon {
+    font-size: 14px;
+    font-weight: bold;
+    width: 18px;
+    display: inline-flex;
+    justify-content: center;
+  }
+  .github-log-console {
+    background: #0d1117;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 12px;
+    max-height: 200px;
+    overflow-y: auto;
+    font-family: 'SF Mono', 'Cascadia Code', monospace;
+    font-size: 12px;
+    color: #c9d1d9;
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin-top: 14px;
+  }
+</style>
+</head>
+<body>
+<div class="wizard-shell">
+  <!-- Sidebar nav -->
+  <aside class="sidebar">
+    <div class="sidebar-brand">
+      <h2>⚡ Total Recall</h2>
+      <p>Sovereign AI Setup</p>
+    </div>
+    <ul class="step-nav" id="step-nav">
+      <li class="active" data-phase="0"><span class="step-badge">1</span>Welcome</li>
+      <li data-phase="1"><span class="step-badge">2</span>Where to Run</li>
+      <li data-phase="2"><span class="step-badge">3</span>Installing</li>
+      <li data-phase="3"><span class="step-badge">4</span>Auth &amp; Keys</li>
+      <li data-phase="4"><span class="step-badge">5</span>Integrations</li>
+      <li data-phase="5"><span class="step-badge">6</span>API Reference</li>
+      <li data-phase="6"><span class="step-badge">7</span>Done</li>
+      <li data-phase="7" style="margin-top:auto;border-top:1px solid var(--border);padding-top:12px"><span class="step-badge">⚙</span>Settings</li>
+    </ul>
+  </aside>
+  <!-- Main area -->
+  <main class="main-content">
+    <!-- ═══════════════════════════════ PHASE 0 — Welcome ═══════════════════════ -->
+    <section class="phase active" id="phase-0">
+      <div class="phase-header">
+        <h1>Welcome to Total Recall</h1>
+        <p>Your own private AI memory that feeds your IDEs and coding agents. Takes about 5 minutes to set up.</p>
+      </div>
+      <div class="card">
+        <h3>What does it do?</h3>
+        <p style="margin-bottom:14px">Total Recall gives your AI coding agents a persistent, sovereign memory. Your AI always knows who you are, what you're working on, and how you like code to be written. No cloud subscriptions. 100% local ownership.</p>
+        <ul>
+          <li>🧠 <strong>Remembers across sessions</strong> <span>— your preferences, projects, and decisions survive every new chat</span></li>
+          <li>🔗 <strong>Works with your AI tools</strong> <span>— Claude Code, Codex, Gemini CLI, and any OpenAI-compatible app</span></li>
+          <li>🔮 <strong>Syncs with Obsidian</strong> <span>— browse and explore your personal VFS memory files visually in a markdown note graph</span></li>
+          <li>🔒 <strong>100% private</strong> <span>— runs entirely on your hardware under your control</span></li>
+        </ul>
+      </div>
+      <div class="card">
+        <h3>How it works</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:14px">Your memory lives in plain text Markdown files on your machine. Your AI agents read them automatically at the start of every conversation.</p>
+        <div class="arch-row">
+          <span class="arch-box">📁 Your memory files</span>
+          <span class="arch-arrow">→</span>
+          <span class="arch-box">🧠 AI reads them</span>
+          <span class="arch-arrow">→</span>
+          <span class="arch-box">💬 Every chat is personalized</span>
+        </div>
+        <div class="arch-row" style="margin-top:10px">
+          <span class="arch-box">Claude Code / Codex / Gemini CLI</span>
+          <span class="arch-arrow">→</span>
+          <span class="arch-box">All connect to the same sovereign VFS brain</span>
+        </div>
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-primary" onclick="goPhase(1)">Let's Set It Up →</button>
+      </div>
+    </section>
+    <!-- ═══════════════════════════════ PHASE 1 — Local Setup & Credentials ══════════════════ -->
+    <section class="phase" id="phase-1">
+      <div class="phase-header">
+        <h1>Configure sovereign VFS Brain Server</h1>
+        <p>Set up your private VFS brain server. You can run the database server locally on this computer, or offload it to an always-on remote server/VM while keeping your local coding integrations active.</p>
+      </div>
+      <!-- Dual-Layer Relationship Explainer -->
+      <div class="notice success" style="margin-bottom:20px;line-height:1.5;font-size:13px;border-left:4px solid var(--green)">
+        <strong>💡 Workstation & Server Relationship:</strong>
+        <p style="color:var(--muted);margin-top:4px;font-size:12px">
+          Regardless of where your brain server is hosted, <strong>the wizard will automatically configure this computer</strong> in Phase 4. This ensures your local IDEs, background log relays, and CLI coding agents (like Claude Code) can securely communicate with your memory files.
+        </p>
+      </div>
+      <!-- Deploy Target Selection -->
+      <div class="card">
+        <h3>📍 Where to Host the Brain Server</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:16px">
+          Choose where to host your core plain-text VFS database and SQLite caches.
+        </p>
+        <div class="radio-group" id="deploy-target" style="margin-bottom:0">
+          <label class="radio-item selected">
+            <input type="radio" name="deploy-target" value="local" checked>
+            <div>
+              <div class="ri-label">This Computer <span style="font-weight:400;color:var(--muted)">(Mac or PC)</span></div>
+              <div class="ri-desc">Run both the VFS brain server and editor integrations on this machine. Ideal for single-workstation setups. <span style="color:var(--yellow);font-weight:600;display:block;margin-top:4px">⚠️ Note: This computer must remain turned on and awake 24/7 to run background memory optimizations (Dream Cycle) and task schedulers.</span></div>
+            </div>
+          </label>
+          <label class="radio-item" style="margin-top:8px">
+            <input type="radio" name="deploy-target" value="localnet">
+            <div>
+              <div class="ri-label">Mac Mini / Home Server via SSH <span style="font-weight:400;color:var(--muted)">(Local Network Server, Mac Mini, PC, or private VPS)</span></div>
+              <div class="ri-desc">Deploy remotely onto a dedicated home server, a local Mac Mini, or a pre-provisioned Linux machine on your private network.</div>
+            </div>
+          </label>
+          <label class="radio-item" style="margin-top:8px">
+            <input type="radio" name="deploy-target" value="agent-cloud">
+            <div>
+              <div class="ri-label">Cloud VM / VPS — Fully Automated <span class="security-badge" title="No CLI/Terminal Needed: Our built-in CLI agent automatically boots the VM on your provider, registers your SSH key, and deploys everything behind the scenes.">🔒 Zero-Terminal</span></div>
+              <div class="ri-desc">No server? No problem! Paste your cloud provider API key, and our built-in agent will automatically spin up a fresh $4–$6 VPS instance, authorize your SSH keys, and deploy Total Recall in one click.</div>
+            </div>
+          </label>
+        </div>
+        <!-- Localnet SSH details (shown only when Localnet is selected) -->
+        <div id="localnet-details" style="display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)">
+          <div class="form-group" style="margin-bottom:12px">
+            <label>Mac Mini or Home Server Host / IP Address <span style="font-weight:400;color:var(--muted)">(e.g. macmini.local or 192.168.1.150)</span></label>
+            <input type="text" id="cfg-localnet-host" placeholder="e.g. macmini.local or 192.168.1.100" autocomplete="off" spellcheck="false">
+          </div>
+          <div class="form-group" style="margin-bottom:0">
+            <label>SSH Username <span style="font-weight:400;color:var(--muted)">(e.g. root, admin, ubuntu)</span></label>
+            <input type="text" id="cfg-localnet-user" placeholder="root" autocomplete="off" spellcheck="false">
+          </div>
+        </div>
+        <!-- Agent-Automated details (shown only when agent-cloud is selected) -->
+        <div id="agent-cloud-details" style="display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)">
+          <div class="notice info" style="margin-bottom:16px;line-height:1.5;font-size:12px;border:1px solid rgba(88,166,255,0.3);background:rgba(88,166,255,0.05)">
+            <div><strong>🤖 Zero-Terminal Automated Cloud Installation:</strong></div>
+            <p style="color:var(--muted);margin-top:4px;font-size:11px">
+              No need to open a terminal, configure Linux, or manage SSH keys! The local CLI agent will automatically generate a secure SSH key pair, provision a lightweight standard VM under your account, and set up your brain securely.
+            </p>
+          </div>
+          <div class="form-group" style="margin-bottom:12px">
+            <label>Cloud Provider (e.g. DigitalOcean, Hetzner, AWS, Linode, Vultr)</label>
+            <input type="text" id="cfg-cloud-provider" placeholder="Enter your cloud provider name" style="width:100%;padding:8px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:inherit">
+          </div>
+          <div class="form-group" style="margin-bottom:12px">
+            <label>Provider API Key / Token <span class="security-badge" title="Local Encryption: This token is encrypted locally on this machine and never exposed. It is used strictly to provision your server instance.">🔒 Secure Local</span></label>
+            <input type="password" id="cfg-cloud-token" placeholder="Paste your cloud provider's API key or token" autocomplete="off" style="font-family:monospace">
+          </div>
+          <div class="form-group" style="margin-bottom:0">
+            <label>Preferred Region / Zone (Optional)</label>
+            <input type="text" id="cfg-cloud-region" placeholder="e.g. nyc3, fra1, us-east-1 (or leave empty for auto)" style="width:100%;padding:8px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:inherit">
+          </div>
+        </div>
+      </div>
+      <!-- Project Brain Selector -->
+      <div class="card" id="project-brain-card">
+        <h3>📂 Install Location — Select Brains to Provision</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:16px">
+          Choose where to install Total Recall memory brains. Select <strong>Global</strong> for universal identity rules and preferences, and/or individual <strong>project folders</strong> for project-specific knowledge.
+        </p>
+        <!-- Global toggle -->
+        <label class="checkbox-item" style="padding:10px 14px;background:var(--panel2);border:2px solid var(--green);border-radius:8px;margin-bottom:12px;gap:12px">
+          <input type="checkbox" id="brain-global" checked style="width:16px;height:16px;accent-color:var(--green)">
+          <div style="flex:1">
+            <div style="font-weight:600;font-size:13px">🌐 Global Brain <span style="font-weight:400;color:var(--green);font-size:11px;margin-left:6px">Recommended</span></div>
+            <div style="font-size:11px;color:var(--muted);margin-top:2px">~/.agent/ — Universal identity, preferences, invariants. Shared across all projects.</div>
+          </div>
+        </label>
+        <!-- Detected projects list -->
+        <div style="border-top:1px solid var(--border);padding-top:14px;margin-top:4px">
+          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">
+            <span style="font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px">Detected Projects</span>
+            <button class="btn btn-secondary" style="padding:4px 12px;font-size:11px" onclick="loadDetectedProjects()">⟳ Refresh</button>
+          </div>
+          <div id="project-list-container" style="max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:6px">
+            <div id="project-list-loading" style="text-align:center;padding:20px;color:var(--muted);font-size:12px">
+              <span class="spinner" style="display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle;margin-right:6px"></span>
+              Scanning for code projects...
+            </div>
+            <div id="project-list" style="display:none"></div>
+            <div id="project-list-empty" style="display:none;text-align:center;padding:16px;color:var(--muted);font-size:12px">
+              No projects detected. Use "Browse" to add project folders manually.
+            </div>
+          </div>
+        </div>
+        <!-- Custom path / Browse -->
+        <div style="border-top:1px solid var(--border);padding-top:14px;margin-top:14px">
+          <div style="display:flex;gap:8px;align-items:flex-end">
+            <div class="form-group" style="flex:1;margin-bottom:0">
+              <label style="margin-bottom:4px">Add Custom Project Path</label>
+              <input type="text" id="custom-project-path" placeholder="/path/to/your/project" autocomplete="off" spellcheck="false">
+            </div>
+            <button class="btn btn-secondary" style="padding:9px 14px;font-size:12px;white-space:nowrap" onclick="addCustomProject()">+ Add</button>
+          </div>
+        </div>
+        <!-- Selection summary -->
+        <div id="brain-selection-summary" style="margin-top:14px;padding:10px 14px;background:rgba(35,134,54,0.08);border:1px solid rgba(35,134,54,0.2);border-radius:6px;font-size:12px;color:var(--green);display:none">
+          <strong>Selected:</strong> <span id="brain-selection-count">0</span> brain(s) will be provisioned.
+        </div>
+      </div>
+      <!-- API Keys card -->
+      <div class="card">
+        <h3>🔑 Embedding API Keys (Semantic Search Only)</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:16px">
+          Total Recall routes all semantic search indexing tasks to lightweight embedding API calls (strictly for vector generation). All reasoning, codegen, and cognitive loops run 100% locally in your developer CLI coding agents (like Claude Code, Codex, or Antigravity) without any third-party routing. At least one key is required.
+        </p>
+        <div class="form-group" style="margin-bottom:14px">
+          <label>Google API Key <span class="security-badge" title="End-to-End Encrypted: Your keys are encrypted locally using AES-256-GCM + scrypt. They never leave this machine.">🔒 Secure Local</span> <span style="font-weight:400;color:var(--muted)">(recommended — text-embedding-004)</span></label>
+          <div style="display:flex;gap:8px;align-items:center">
+            <input type="password" id="cfg-google-key" placeholder="AIzaSy..." autocomplete="off" style="font-family:monospace;flex:1">
+            <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('cfg-google-key')">Show</button>
+          </div>
+          <div class="hint">Get a key from <a href="https://aistudio.google.com" target="_blank" rel="noopener" style="color:var(--blue)">Google AI Studio</a>. Generous free tier.</div>
+        </div>
+        <div class="form-group" style="margin-bottom:0">
+          <label>OpenAI API Key <span class="security-badge" title="End-to-End Encrypted: Your keys are encrypted locally using AES-256-GCM + scrypt. They never leave this machine.">🔒 Secure Local</span> <span style="font-weight:400;color:var(--muted)">(optional fallback — text-embedding-3)</span></label>
+          <div style="display:flex;gap:8px;align-items:center">
+            <input type="password" id="cfg-openai-key" placeholder="sk-proj-..." autocomplete="off" style="font-family:monospace;flex:1">
+            <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('cfg-openai-key')">Show</button>
+          </div>
+          <div class="hint" style="margin-top:4px">Get a key from the <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" style="color:var(--blue)">OpenAI Platform</a>. Paid account/credits required.</div>
+        </div>
+      </div>
+      <!-- Public Access Sharing -->
+      <div class="card" style="margin-top:20px">
+        <h3>🌐 Public Access Sharing (Optional)</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:12px">
+          Configure secure remote access to your brain server.
+        </p>
+        <div class="form-group" style="margin-bottom:0">
+          <label style="display:flex;align-items:center;gap:10px;cursor:pointer">
+            <input type="checkbox" id="cfg-cloudflare-quick" checked style="width:16px;height:16px;accent-color:var(--green)">
+            <span style="font-size:13px;font-weight:600">Share over secure internet (free Cloudflare Quick Tunnel)</span>
+          </label>
+          <div class="hint" style="margin-top:5px;color:var(--muted);font-size:11px">Generates a secure, temporary <code>*.trycloudflare.com</code> HTTPS URL so you can connect coding agents and tools safely over the internet without configuring ports.</div>
+        </div>
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-secondary" onclick="goPhase(0)">← Back</button>
+        <button class="btn btn-primary" onclick="startInstall()"><span id="install-btn-text">Install on this computer</span> →</button>
+      </div>
+    </section>
+    <!-- ═══════════════════════════════ PHASE 2 — Installing ═══════════════════ -->
+    <section class="phase" id="phase-2">
+      <div class="phase-header">
+        <h1>Installing...</h1>
+        <p>Total Recall is being provisioned on your server. This is a lightweight install and usually takes less than 60 seconds.</p>
+      </div>
+      <div class="card">
+        <div id="progress-track"><div id="progress-bar"></div></div>
+        <div id="progress-label">Waiting for install to begin...</div>
+        <div id="log"></div>
+      </div>
+      <!-- shown after error event -->
+      <div id="install-error-notice" style="display:none">
+        <div class="notice warn">
+          ⚠️ &nbsp;Provisioning/Installation failed. Check the error above, go back to edit your options/API key, and try again.
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-secondary" onclick="goPhase(1)">← Go Back &amp; Edit Options</button>
+        </div>
+      </div>
+      <!-- shown after done event -->
+      <div id="install-done-notice" style="display:none">
+        <div class="notice success">
+          ✅ &nbsp;Install complete! Continue to generate your API key.
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-primary" onclick="goPhase(3)">Next: Generate API Key →</button>
+        </div>
+      </div>
+    </section>
+    <!-- ═══════════════════════════════ PHASE 3 — Auth ════════════════════════ -->
+    <section class="phase" id="phase-3">
+      <div class="phase-header">
+        <h1>Auth &amp; API Keys</h1>
+        <p>Generate a Personal Access Token (PAT) to authenticate all your integrations.</p>
+      </div>
+      <div class="card">
+        <h3>What are PATs?</h3>
+        <p>Every request to your brain must include a Bearer token. You can create multiple tokens with different scopes — one for Claude Code, one for Cursor, etc.</p>
+      </div>
+      <div class="card">
+        <h3>Generate your first key</h3>
+        <div class="form-group">
+          <label>Key Name</label>
+          <input type="text" id="key-name" placeholder="my-key" value="default" autocomplete="off">
+        </div>
+        <div class="form-group">
+          <label>Scope</label>
+          <div class="radio-group" id="key-scope">
+            <label class="radio-item selected">
+              <input type="radio" name="key-scope" value="*" checked>
+              <div>
+                <div class="ri-label">Full Access <code style="font-size:11px">/*</code></div>
+                <div class="ri-desc">Read + write memory, run sandbox, manage keys. Recommended for personal use.</div>
+              </div>
+            </label>
+            <label class="radio-item">
+              <input type="radio" name="key-scope" value="/v1/chat/completions">
+              <div>
+                <div class="ri-label">Chat Only <code style="font-size:11px">/v1/chat/completions</code></div>
+                <div class="ri-desc">Only allows chat completions. Good for sharing with apps.</div>
+              </div>
+            </label>
+            <label class="radio-item">
+              <input type="radio" name="key-scope" value="/memory:read">
+              <div>
+                <div class="ri-label">Read Only <code style="font-size:11px">/memory:read</code></div>
+                <div class="ri-desc">Can read memory but not modify it.</div>
+              </div>
+            </label>
+          </div>
+        </div>
+        <div id="key-error" class="notice warn" style="display:none">⚠️ &nbsp;<span id="key-error-text"></span></div>
+        <div class="btn-row">
+          <button class="btn btn-primary" id="gen-key-btn" onclick="generateKey()">Generate Key</button>
+        </div>
+        <div id="key-result" style="display:none; margin-top:20px">
+          <div class="notice success" id="key-success-notice">✅ &nbsp;API key active and saved securely in your local configuration. You can copy it at any time (even when hidden) or find it in the Settings tab later. No need to write it down or worry about losing it!</div>
+          <div class="token-box" style="display:flex; gap:8px; align-items:center">
+            <input type="password" id="pat-key-display" readonly style="font-family:monospace; flex:1; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 10px; font-size:13px" />
+            <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('pat-key-display')">Show</button>
+            <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="copyToken('pat-key-display')">Copy</button>
+          </div>
+        </div>
+      </div>
+      <div style="height:24px"></div>
+      <div class="card">
+        <h3>📦 GitHub Automatic Backup <span style="font-weight:400;font-size:13px;color:var(--muted);margin-left:8px">optional</span></h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:8px">
+          Securely back up your brain's VFS (your personal memory files, rules, and configurations) to a private GitHub repository automatically. We will create a private repository named <strong style="color:var(--text)">total-recall-brain</strong> on your GitHub account, perform the initial push, and schedule a daily automatic update.
+        </p>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:20px">
+          To set this up, create a Personal Access Token (PAT) with <strong style="color:var(--text)">repo</strong> scope.
+        </p>
+        <div class="form-group">
+          <label>GitHub Personal Access Token</label>
+          <input type="password" id="cfg-github-token" placeholder="ghp_..." autocomplete="off">
+          <div style="margin-top:5px;font-size:11px;color:var(--muted)">
+            Generate one at <a href="https://github.com/settings/tokens/new?scopes=repo&description=Total%20Recall%20Backup" target="_blank" style="color:var(--blue)">github.com/settings/tokens</a> with the <code>repo</code> scope.
+          </div>
+        </div>
+        <div id="github-progress" style="display:none; margin-top:20px; gap:8px">
+          <div class="progress-step-item pending" id="gh-step-1">
+            <span class="step-icon">○</span> Authenticate with GitHub
+          </div>
+          <div class="progress-step-item pending" id="gh-step-2">
+            <span class="step-icon">○</span> Provision private repository "total-recall-brain"
+          </div>
+          <div class="progress-step-item pending" id="gh-step-3">
+            <span class="step-icon">○</span> Initialize &amp; configure local git repository
+          </div>
+          <div class="progress-step-item pending" id="gh-step-4">
+            <span class="step-icon">○</span> Perform initial push to GitHub
+          </div>
+          <div class="progress-step-item pending" id="gh-step-5">
+            <span class="step-icon">○</span> Schedule daily automated backup (2:00 AM)
+          </div>
+        </div>
+        <div id="github-log" class="github-log-console" style="display:none"></div>
+        <div id="github-result-notice" class="notice" style="display:none; margin-top:14px"></div>
+        <div class="btn-row" style="margin-top:16px">
+          <button class="btn btn-primary" id="cfg-github-btn" onclick="saveGitHubBackup()">Configure &amp; Back Up</button>
+        </div>
+      </div>
+      <div style="height:24px"></div>
+      <div class="card">
+        <h3>🔍 Web Search for Automatic Research <span style="font-weight:400;font-size:13px;color:var(--muted);margin-left:8px">optional</span></h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:8px">
+          Total Recall runs in the background and automatically looks things up on the web — finding relevant articles, documentation, and facts related to what you're working on, and saving them to your memory.
+        </p>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:20px">
+          <strong style="color:var(--text)">You don't need a key to get started.</strong> Without one, it uses DuckDuckGo and Wikipedia (both free, no sign-up). Adding any one of the providers below gives it full web search results. Pick whichever you prefer — they're all roughly equivalent in quality.
+        </p>
+        <div style="display:grid;gap:14px">
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+              <strong>Tavily</strong>
+              <span style="font-size:11px;background:var(--green);color:#000;padding:2px 7px;border-radius:10px">Best for AI agents</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Designed specifically for AI research — returns clean, readable text from each page instead of just a link and a short description. Saves time. 1,000 free searches/month.</p>
+            <input type="password" id="tavily-key" placeholder="tvly-…" autocomplete="off" style="font-family:monospace;width:100%">
+            <div style="margin-top:5px;font-size:11px;color:var(--muted)">Get a free key at <a href="https://tavily.com" target="_blank" style="color:var(--blue)">tavily.com</a></div>
+          </div>
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+              <strong>Brave Search</strong>
+              <span style="font-size:11px;color:var(--muted)">~1,000 free queries/month</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Independent web search (not Google). Returns a list of URLs and short descriptions for each result. Solid general-purpose choice.</p>
+            <input type="password" id="brave-key" placeholder="BSA…" autocomplete="off" style="font-family:monospace;width:100%">
+            <div style="margin-top:5px;font-size:11px;color:var(--muted)">Get a free key at <a href="https://brave.com/search/api/" target="_blank" style="color:var(--blue)">brave.com/search/api</a></div>
+          </div>
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+              <strong>Exa</strong>
+              <span style="font-size:11px;color:var(--muted)">~1,000 free queries/month</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Finds pages by meaning rather than exact keywords — good at surfacing recent articles and blog posts that are thematically relevant, not just keyword matches.</p>
+            <input type="password" id="exa-key" placeholder="…" autocomplete="off" style="font-family:monospace;width:100%">
+            <div style="margin-top:5px;font-size:11px;color:var(--muted)">Get a free key at <a href="https://exa.ai" target="_blank" style="color:var(--blue)">exa.ai</a></div>
+          </div>
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+              <strong>Serper</strong>
+              <span style="font-size:11px;color:var(--muted)">2,500 free credits (one-time)</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Returns Google Search results. The free credits are a one-time trial rather than a monthly allowance, so it's best used as a last fallback or for occasional use.</p>
+            <input type="password" id="serper-key" placeholder="…" autocomplete="off" style="font-family:monospace;width:100%">
+            <div style="margin-top:5px;font-size:11px;color:var(--muted)">Get a free key at <a href="https://serper.dev" target="_blank" style="color:var(--blue)">serper.dev</a></div>
+          </div>
+        </div>
+        <div style="margin-top:14px;padding:10px 12px;background:rgba(255,255,255,0.04);border-radius:6px;font-size:12px;color:var(--muted)">
+          ⏱ <strong style="color:var(--text)">Daily limit:</strong> To stay within free tiers, the engine makes at most <strong style="color:var(--text)">50 paid searches per day</strong> by default (~1,500/month). When that's used up it switches back to DuckDuckGo for the rest of the day. You can change this limit anytime in <code>~/.agent/config/research.yml</code>.
+        </div>
+        <div id="search-save-result" class="notice" style="display:none;margin-top:14px"></div>
+        <div class="btn-row" style="margin-top:16px">
+          <button class="btn btn-secondary" onclick="saveSearchKeys()">Save Search Keys</button>
+          <span style="font-size:12px;color:var(--muted);align-self:center">Saved to ~/.agent/config/research.yml</span>
+        </div>
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-secondary" onclick="goPhase(2)">← Back</button>
+        <button class="btn btn-primary" onclick="goPhase(4)">Next: Integrations →</button>
+      </div>
+    </section>
+    <!-- ═══════════════════════════════ PHASE 4 — Integrations ════════════════ -->
+    <!-- ═══════════════════════════════ PHASE 4 — Connect Your Tools ═══════════ -->
+    <section class="phase" id="phase-4">
+      <div class="phase-header">
+        <h1>Connect Your Tools</h1>
+        <p>Select every IDE and agent you use. Total Recall will wire them up automatically — no manual config needed.</p>
+      </div>
+      <div class="card">
+        <h3 style="margin-bottom:14px">Which IDEs and coding agents do you use?</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:18px">Select all that apply. Total Recall's relay will watch their session logs and compile your memory automatically.</p>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px" id="ide-grid">
+          <label class="ide-card" id="ide-claude-code">
+            <input type="checkbox" value="claude-code" onchange="toggleIde(this)">
+            <span class="ide-icon">🤖</span>
+            <div>
+              <div class="ide-name">Claude Code</div>
+              <div class="ide-desc">Anthropic's coding agent — CLAUDE.md + auto memory</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-codex">
+            <input type="checkbox" value="codex" onchange="toggleIde(this)">
+            <span class="ide-icon">🟢</span>
+            <div>
+              <div class="ide-name">Codex (OpenAI)</div>
+              <div class="ide-desc">OpenAI's CLI agent — AGENTS.md + memories</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-cursor">
+            <input type="checkbox" value="cursor" onchange="toggleIde(this)">
+            <span class="ide-icon">🖱️</span>
+            <div>
+              <div class="ide-name">Cursor</div>
+              <div class="ide-desc">.cursor/rules/ — modular scoped rules</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-antigravity">
+            <input type="checkbox" value="antigravity" onchange="toggleIde(this)">
+            <span class="ide-icon">⚡</span>
+            <div>
+              <div class="ide-name">Antigravity</div>
+              <div class="ide-desc">Google DeepMind — AGENTS.md + Knowledge Items</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-vscode">
+            <input type="checkbox" value="vscode" onchange="toggleIde(this)">
+            <span class="ide-icon">💙</span>
+            <div>
+              <div class="ide-name">VS Code Copilot</div>
+              <div class="ide-desc">.github/copilot-instructions.md + native memory</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-gemini">
+            <input type="checkbox" value="gemini" onchange="toggleIde(this)">
+            <span class="ide-icon">💎</span>
+            <div>
+              <div class="ide-name">Gemini CLI</div>
+              <div class="ide-desc">GEMINI.md + session context</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-pi">
+            <input type="checkbox" value="pi" onchange="toggleIde(this)">
+            <span class="ide-icon">π</span>
+            <div>
+              <div class="ide-name">Pi Coding Agent</div>
+              <div class="ide-desc">~/.pi/agent/AGENTS.md + JSONL session trees</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-hermes">
+            <input type="checkbox" value="hermes" onchange="toggleIde(this)">
+            <span class="ide-icon">🔱</span>
+            <div>
+              <div class="ide-name">Hermes Agent</div>
+              <div class="ide-desc">Nous Research — MEMORY.md + USER.md injection</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+          <label class="ide-card" id="ide-openclaw">
+            <input type="checkbox" value="openclaw" onchange="toggleIde(this)">
+            <span class="ide-icon">🦀</span>
+            <div>
+              <div class="ide-name">OpenClaw</div>
+              <div class="ide-desc">MEMORY.md + SOUL.md + daily logs + SQLite index</div>
+            </div>
+            <span class="ide-check">✓</span>
+          </label>
+        </div>
+      </div>
+      <div class="card">
+        <h3 style="margin-bottom:10px">🛠️ CLI Agents Setup & Installer</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:14px">Install globally and initialize your selected CLI coding agents on the target computer in one click.</p>
+        <div style="display:grid;gap:12px">
+          <!-- Claude Code -->
+          <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:8px">
+            <div>
+              <strong style="color:var(--text)">Claude Code</strong>
+              <div style="font-size:11px;color:var(--muted);margin-top:2px">Official Anthropic CLI agent package (<code>@anthropic-ai/claude-code</code>)</div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center">
+              <button class="btn btn-secondary" style="font-size:12px;padding:6px 12px" onclick="installCliAgent('claude-code', this)">Install Globally</button>
+              <button class="btn btn-secondary" style="font-size:12px;padding:6px 12px;border-color:rgba(88,166,255,0.4);color:var(--blue)" onclick="runCliAuth('claude')">🔑 Login</button>
+            </div>
+          </div>
+          <!-- Antigravity -->
+          <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:8px">
+            <div>
+              <strong style="color:var(--text)">Antigravity CLI</strong>
+              <div style="font-size:11px;color:var(--muted);margin-top:2px">Sovereign OS agent — links local repository binary globally (<code>npm link</code>)</div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center">
+              <button class="btn btn-secondary" style="font-size:12px;padding:6px 12px" onclick="installCliAgent('antigravity', this)">Link Package</button>
+              <button class="btn btn-secondary" style="font-size:12px;padding:6px 12px;border-color:rgba(88,166,255,0.4);color:var(--blue)" onclick="runCliAuth('antigravity')">🔑 Login</button>
+            </div>
+          </div>
+          <!-- Codex -->
+          <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:8px">
+            <div>
+              <strong style="color:var(--text)">Codex CLI</strong>
+              <div style="font-size:11px;color:var(--muted);margin-top:2px">OpenAI's coding agent executable binary (<code>@openai/codex</code>)</div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center">
+              <button class="btn btn-secondary" style="font-size:12px;padding:6px 12px" onclick="installCliAgent('codex', this)">Install Globally</button>
+              <button class="btn btn-secondary" style="font-size:12px;padding:6px 12px;border-color:rgba(88,166,255,0.4);color:var(--blue)" onclick="runCliAuth('codex')">🔑 Login</button>
+            </div>
+          </div>
+        </div>
+        <div id="cli-install-result" style="display:none;margin-top:14px;padding:10px;background:rgba(0,0,0,0.2);border-radius:6px;font-size:12px;font-family:monospace;white-space:pre-wrap;color:var(--muted)"></div>
+      </div>
+      <div class="card">
+        <h3 style="margin-bottom:10px">🔄 Relay Daemon</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:14px">The relay watches your IDE session files and ships them to your brain every 60 seconds automatically — no manual steps needed.</p>
+        <label style="display:flex;align-items:center;gap:10px;cursor:pointer">
+          <input type="checkbox" id="install-relay" checked style="width:16px;height:16px;accent-color:var(--green)">
+          <span>Install relay as system service (starts on boot, runs forever)</span>
+        </label>
+      </div>
+      <div class="card">
+        <h3 style="margin-bottom:10px">💾 Backup &amp; Sync</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:14px">Browse your memory graph visually or download a full backup of your brain.</p>
+        <label style="display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:12px">
+          <input type="checkbox" id="install-obsidian" checked style="width:16px;height:16px;accent-color:var(--green)">
+          <span>🔮 <strong>Obsidian vault sync</strong> — browse your memory in graph view (connects vault directory)</span>
+        </label>
+        <div style="margin-top:8px">
+          <button class="btn btn-secondary" style="font-size:12px;padding:6px 14px" onclick="downloadBrain()">⬇️ Download Brain (.tar.gz)</button>
+          <span id="brain-dl-status" style="margin-left:10px;font-size:12px;color:var(--muted)"></span>
+        </div>
+      </div>
+      <div class="card">
+        <h3 style="margin-bottom:6px">📥 Import Existing Rules &amp; Skills</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:14px">Already have <code>AGENTS.md</code>, <code>.cursorrules</code>, <code>CLAUDE.md</code>, or modular <strong>Skills</strong> (under <code>.agent/skills</code>)? Scan and import them so Total Recall compiles them into every session.</p>
+        <div style="display:flex;gap:10px;align-items:center;margin-bottom:12px">
+          <input type="text" id="import-dir" placeholder="Directory to scan (default: current project)" style="flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 10px;font-size:13px">
+          <button class="btn btn-secondary" style="font-size:12px;padding:6px 14px;white-space:nowrap" onclick="scanRuleFiles()">🔍 Scan</button>
+        </div>
+        <div id="import-rules-list" style="display:none;margin-bottom:10px"></div>
+        <div id="import-rules-result" style="font-size:12px;font-family:monospace;color:var(--muted)"></div>
+      </div>
+      <div class="card" id="connect-results" style="display:none">
+        <h3 style="margin-bottom:10px">Connection Results</h3>
+        <div id="connect-log" style="font-family:monospace;font-size:12px;line-height:1.8"></div>
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-secondary" onclick="goPhase(3)">← Back</button>
+        <button class="btn btn-primary" id="btn-connect-ides" onclick="connectSelectedIDEs()">Connect Selected Tools →</button>
+      </div>
+    </section>
+    <!-- ═══════════════════════════════ PHASE 5 — API Reference ═══════════════ -->
+    <section class="phase" id="phase-5">
+      <div class="phase-header">
+        <h1>API Reference</h1>
+        <p>Full endpoint list for your brain. All requests require <code>Authorization: Bearer &lt;PAT&gt;</code>.</p>
+      </div>
+      <div class="card">
+        <h3>OpenAI-compatible</h3>
+        <table class="api-table">
+          <tr><th>Method</th><th>Path</th><th>Description</th></tr>
+          <tr><td><span class="method-badge method-post">POST</span></td><td>/v1/chat/completions</td><td>Chat completions (streaming supported)</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/v1/models</td><td>List available models</td></tr>
+        </table>
+      </div>
+      <div class="card">
+        <h3>Memory</h3>
+        <table class="api-table">
+          <tr><th>Method</th><th>Path</th><th>Description</th></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/memory</td><td>List all memory files</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/memory/:path</td><td>Read a memory file</td></tr>
+          <tr><td><span class="method-badge method-post">POST</span></td><td>/memory/:path</td><td>Create / overwrite memory file</td></tr>
+          <tr><td><span class="method-badge method-put">PUT</span></td><td>/memory/:path</td><td>Append to memory file</td></tr>
+          <tr><td><span class="method-badge method-del">DELETE</span></td><td>/memory/:path</td><td>Delete memory file</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/memory/search?q=…</td><td>Search memory</td></tr>
+          <tr><td><span class="method-badge method-post">POST</span></td><td>/vault/compile</td><td>Recompile the vault surface</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/vault/status</td><td>Last compile status</td></tr>
+        </table>
+      </div>
+      <div class="card">
+        <h3>Keys &amp; Sessions</h3>
+        <table class="api-table">
+          <tr><th>Method</th><th>Path</th><th>Description</th></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/api/keys</td><td>List keys</td></tr>
+          <tr><td><span class="method-badge method-post">POST</span></td><td>/api/keys</td><td>Create key</td></tr>
+          <tr><td><span class="method-badge method-del">DELETE</span></td><td>/api/keys/:id</td><td>Revoke key</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/api/sessions</td><td>List sessions</td></tr>
+          <tr><td><span class="method-badge method-del">DELETE</span></td><td>/api/sessions/:id</td><td>Delete session</td></tr>
+        </table>
+      </div>
+      <div class="card">
+        <h3>Sandbox &amp; Discovery</h3>
+        <table class="api-table">
+          <tr><th>Method</th><th>Path</th><th>Description</th></tr>
+          <tr><td><span class="method-badge method-post">POST</span></td><td>/sandbox</td><td>Execute code in sandbox</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/health</td><td>Health check (no auth)</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/api</td><td>Full API reference JSON</td></tr>
+          <tr><td><span class="method-badge method-get">GET</span></td><td>/.well-known/total-recall.json</td><td>Discovery manifest</td></tr>
+        </table>
+      </div>
+      <div class="card">
+        <h3>Example curl request</h3>
+        <div class="code-block" id="example-curl"><button class="copy-btn" onclick="copyCode(this)">Copy</button></div>
+      </div>
+      <div class="btn-row">
+        <button class="btn btn-secondary" onclick="goPhase(4)">← Back</button>
+        <button class="btn btn-primary" onclick="goPhase(6)">Finish →</button>
+      </div>
+    </section>
+    <!-- ═══════════════════════════════ PHASE 6 — Done ════════════════════════ -->
+    <section class="phase" id="phase-6">
+      <div class="phase-header">
+        <h1>🎉 Your Brain is Live</h1>
+        <p>Total Recall is installed and ready. Here are your URLs.</p>
+      </div>
+      <!-- SSH Fallback Warning Card -->
+      <div id="ssh-fallback-warning" class="card" style="display:none; border: 1px solid var(--yellow); background: rgba(210, 153, 34, 0.05);">
+        <h3 style="color:var(--yellow); display:flex; align-items:center; gap:8px; margin-bottom:8px">
+          ⚠️ Secure Tunnel Fallback (SSH Connection)
+        </h3>
+        <p style="color:var(--text); font-size:13px; line-height:1.5; margin-bottom:12px">
+          We detected that your brain URLs are pointing directly to the VM's SSH host (<strong><span id="warning-ssh-host">ssh1.vast.ai</span></strong>).
+          Chrome and other modern browsers <strong>cannot make HTTP requests to an SSH port</strong> (doing so triggers a <code>net::ERR_INVALID_HTTP_RESPONSE</code> error).
+        </p>
+        <p style="color:var(--muted); font-size:12px; line-height:1.5; margin-bottom:12px">
+          This usually happens when the Cloudflare quick tunnel failed to provision on the remote GPU instance in time, or timed out.
+          The background installer is likely still running on your VM, or you can paste your custom Cloudflare tunnel URL below.
+        </p>
+        <div style="border-top:1px solid rgba(210, 153, 34, 0.15); padding-top:10px; display:flex; flex-direction:column; gap:6px">
+          <div style="font-size:12px; color:var(--text)">
+            <strong>What to do next:</strong>
+          </div>
+          <ul style="padding-left:16px; font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px">
+            <li style="color:var(--muted)">1. Keep an eye on the <strong>persistent status bar</strong> at the bottom right — it will update as the background VM installer continues running.</li>
+            <li style="color:var(--muted)">2. Once the installer finishes successfully, it may output your public tunnel URL (e.g. <code>https://xyz.trycloudflare.com</code>).</li>
+            <li style="color:var(--muted)">3. Alternatively, if you set up your own tunnel or want to manually connect, scroll down to the <strong>Manual Endpoint Override</strong> panel below and paste your secure URL.</li>
+          </ul>
+        </div>
+      </div>
+      <!-- Dashboard Password Credentials Card -->
+      <div class="card" style="margin-top: 20px; border-left: 4px solid var(--accent);">
+        <h3 style="display:flex; align-items:center; gap:8px; margin-bottom:8px">
+          🔑 Dashboard Sign In Credentials
+        </h3>
+        <p style="color:var(--text); font-size:13px; margin-bottom:12px">
+          Use the credentials below to log into your settings dashboard (<code>/dashboard</code>). For security, you will be forced to change this temporary password upon your first access.
+        </p>
+        <div style="display:flex; gap:16px; flex-wrap:wrap">
+          <div style="flex:1; min-width:200px">
+            <div style="font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:4px">Username</div>
+            <div style="background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:8px 12px; font-family:monospace; font-size:13px; color:var(--text)">
+              admin
+            </div>
+          </div>
+          <div style="flex:1; min-width:200px">
+            <div style="font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:4px">Temporary Password</div>
+            <div style="display:flex; gap:8px; align-items:center">
+              <input type="password" id="done-dashboard-password" readonly style="background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:8px 12px; font-family:monospace; font-size:13px; color:var(--text); flex:1">
+              <button class="btn btn-secondary" style="padding:7px 12px; font-size:12px" onclick="toggleShow('done-dashboard-password')">Show</button>
+              <button class="btn btn-secondary" style="padding:7px 12px; font-size:12px" onclick="copyToken('done-dashboard-password')">Copy</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="url-grid">
+          <div class="url-item">
+            <span class="ui-icon">🔌</span>
+            <div>
+              <div class="ui-label">API Endpoint</div>
+              <div class="ui-value" id="final-api-url">…</div>
+            </div>
+            <a id="final-api-link" class="ui-open" href="#" target="_blank" rel="noopener">Open</a>
+          </div>
+          <div class="url-item">
+            <span class="ui-icon">🖥</span>
+            <div>
+              <div class="ui-label">Dashboard</div>
+              <div class="ui-value" id="final-dash-url">…</div>
+            </div>
+            <a id="final-dash-link" class="ui-open" href="#" target="_blank" rel="noopener">Open</a>
+          </div>
+          <div class="url-item">
+            <span class="ui-icon">❤️</span>
+            <div>
+              <div class="ui-label">Health Check</div>
+              <div class="ui-value" id="final-health-url">…</div>
+            </div>
+            <a id="final-health-link" class="ui-open" href="#" target="_blank" rel="noopener">Check</a>
+          </div>
+        </div>
+        <div class="health-row">
+          <span class="health-dot" id="health-dot"></span>
+          <span id="health-status">Checking health...</span>
+          <button class="btn btn-secondary" style="padding:5px 12px;font-size:12px;margin-left:auto" onclick="checkHealth()">Re-check</button>
+        </div>
+      </div>
+      <div class="card">
+        <h3>What's next?</h3>
+        <ul>
+          <li>💾 <strong>Start chatting</strong> — open the dashboard or point Claude Code at your brain</li>
+          <li>🧠 <strong>Build your memory</strong> — run <code>npx total-recall ingest</code> to import your chat history</li>
+          <li>🔄 <strong>Keep it synced</strong> — set up <code>npx total-recall sync --watch</code> for continuous ingest</li>
+          <li>📚 <strong>Docs</strong> — <a href="https://github.com/gregiteen/total-recall" target="_blank" rel="noopener" style="color:var(--blue)">github.com/gregiteen/total-recall</a></li>
+        </ul>
+      </div>
+      <!-- Manual Override Card -->
+      <div class="card" style="margin-top:24px">
+        <h3>🔧 Manual Endpoint Override</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:12px">
+          If your secure tunnel URL or host endpoint is stale (e.g. <code>http://ssh1.vast.ai:10120</code>), or you have a custom Cloudflare tunnel URL, you can manually override your brain server endpoints below.
+        </p>
+        <div style="border:1px solid var(--border);border-radius:8px;padding:16px;background:rgba(255,255,255,0.02)">
+          <div class="form-group" style="margin-bottom:12px">
+            <label>Brain Base URL or Host</label>
+            <input type="text" id="override-base-url" placeholder="e.g. https://xyz.trycloudflare.com  or  http://localhost:3000" autocomplete="off" spellcheck="false">
+            <div class="hint">The base domain/URL where your brain server is running.</div>
+          </div>
+          <div class="form-group" style="margin-bottom:14px">
+            <label>Authentication Token (PAT)</label>
+            <input type="password" id="override-pat-key" placeholder="Bearer Token (PAT)" autocomplete="off">
+            <div class="hint">If you generated a PAT in Phase 3, paste it here. Defaults to your generated PAT.</div>
+          </div>
+          <div id="override-save-result" class="notice" style="display:none;margin-bottom:12px"></div>
+          <div style="display:flex;gap:10px">
+            <button class="btn btn-blue" style="font-size:12px;padding:6px 14px" onclick="saveManualOverride()">Save Override &amp; Re-check</button>
+            <button class="btn btn-secondary" style="font-size:12px;padding:6px 14px" onclick="toggleShow('override-pat-key')">Show Token</button>
+          </div>
+        </div>
+      </div>
+      <div class="btn-row" style="margin-top:24px">
+        <button class="btn btn-secondary" onclick="goPhase(5)">← Go Back &amp; Edit Options</button>
+      </div>
+    </section>
+    <!-- ═══════════════════════════ PHASE 7 — Settings ══════════════════════════ -->
+    <section class="phase" id="phase-7">
+      <div class="phase-header">
+        <h1>⚙️ Settings</h1>
+        <p>Manage your search providers, usage limits, and other preferences.</p>
+      </div>
+      <!-- Search Providers -->
+      <div class="card">
+        <h3>🔍 Web Search Providers</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:6px">
+          The background research engine tries these in order — Tavily → Brave → Exa → Serper — and falls back to DuckDuckGo (free) when none are set or the daily limit is reached.
+        </p>
+        <div id="settings-usage-bar" style="background:rgba(255,255,255,0.05);border-radius:6px;padding:10px 12px;font-size:12px;margin-bottom:18px">
+          <span style="color:var(--muted)">Today's paid searches: </span>
+          <strong id="settings-usage-count" style="color:var(--text)">—</strong>
+          <span style="color:var(--muted)"> / </span>
+          <strong id="settings-usage-limit" style="color:var(--text)">—</strong>
+          <span style="color:var(--muted)"> &nbsp;(<span id="settings-usage-remaining">—</span> remaining today)</span>
+        </div>
+        <div style="display:grid;gap:14px;margin-bottom:20px">
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+              <strong>Tavily</strong>
+              <span style="font-size:11px;background:var(--green);color:#000;padding:2px 7px;border-radius:10px">Best for AI agents</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Returns full page text, not just links. 1,000 free searches/month. <a href="https://tavily.com" target="_blank" style="color:var(--blue)">tavily.com</a></p>
+            <div style="display:flex;gap:8px;align-items:center">
+              <input type="password" id="s-tavily-key" placeholder="tvly-… (leave blank to remove)" autocomplete="off" style="font-family:monospace;flex:1">
+              <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('s-tavily-key')">Show</button>
+            </div>
+          </div>
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+              <strong>Brave Search</strong>
+              <span style="font-size:11px;color:var(--muted)">~1,000 free/month</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Independent web index. <a href="https://brave.com/search/api/" target="_blank" style="color:var(--blue)">brave.com/search/api</a></p>
+            <div style="display:flex;gap:8px;align-items:center">
+              <input type="password" id="s-brave-key" placeholder="BSA… (leave blank to remove)" autocomplete="off" style="font-family:monospace;flex:1">
+              <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('s-brave-key')">Show</button>
+            </div>
+          </div>
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+              <strong>Exa</strong>
+              <span style="font-size:11px;color:var(--muted)">~1,000 free/month</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Neural/semantic search — finds by meaning. <a href="https://exa.ai" target="_blank" style="color:var(--blue)">exa.ai</a></p>
+            <div style="display:flex;gap:8px;align-items:center">
+              <input type="password" id="s-exa-key" placeholder="… (leave blank to remove)" autocomplete="off" style="font-family:monospace;flex:1">
+              <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('s-exa-key')">Show</button>
+            </div>
+          </div>
+          <div style="border:1px solid var(--border);border-radius:8px;padding:14px">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
+              <strong>Serper</strong>
+              <span style="font-size:11px;color:var(--muted)">2,500 one-time free credits</span>
+            </div>
+            <p style="font-size:12px;color:var(--muted);margin-bottom:8px">Google Search results. <a href="https://serper.dev" target="_blank" style="color:var(--blue)">serper.dev</a></p>
+            <div style="display:flex;gap:8px;align-items:center">
+              <input type="password" id="s-serper-key" placeholder="… (leave blank to remove)" autocomplete="off" style="font-family:monospace;flex:1">
+              <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('s-serper-key')">Show</button>
+            </div>
+          </div>
+        </div>
+        <div style="margin-bottom:20px">
+          <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px">
+            Daily search limit
+            <span style="font-weight:400;color:var(--muted);margin-left:6px">paid API calls per day — resets at midnight</span>
+          </label>
+          <div style="display:flex;gap:10px;align-items:center">
+            <input type="number" id="s-daily-limit" min="0" max="5000" value="50"
+              style="width:90px;font-size:14px;text-align:center">
+            <span style="font-size:12px;color:var(--muted)">
+              Set to <strong>0</strong> to disable the limit entirely (if you're on a paid plan).
+              Default <strong>50/day ≈ 1,500/month</strong> stays within most free tiers.
+            </span>
+          </div>
+        </div>
+        <div id="settings-save-result" class="notice" style="display:none;margin-bottom:14px"></div>
+        <div class="btn-row">
+          <button class="btn btn-primary" onclick="saveSettings()">Save Settings</button>
+        </div>
+      </div>
+      <!-- Total Recall API Key -->
+      <div class="card" style="margin-top: 24px;">
+        <h3>🔑 Total Recall API Key</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:12px">
+          This is the primary Personal Access Token (PAT) used by extensions and IDEs to securely connect to your memory vault.
+        </p>
+        <div style="border:1px solid var(--border);border-radius:8px;padding:14px;background:rgba(255,255,255,0.02)">
+          <div style="display:flex;gap:8px;align-items:center">
+            <input type="password" id="settings-pat-key" readonly placeholder="No API key active" style="font-family:monospace;flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 10px;font-size:13px">
+            <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="toggleShow('settings-pat-key')">Show</button>
+            <button class="btn btn-secondary" style="padding:5px 10px;font-size:12px" onclick="copyToken('settings-pat-key')">Copy</button>
+          </div>
+          <p style="font-size:11px;color:var(--muted);margin-top:6px;margin-bottom:0">
+            🔒 Saved securely in your local configuration. You can copy it directly at any time (even when hidden) or click <strong>Show</strong> to reveal it. If you need a new key, you can regenerate one at <a href="#" onclick="goPhase(3); return false;" style="color:var(--blue);text-decoration:underline">Phase 3 (API Key)</a>.
+          </p>
+        </div>
+      </div>
+      <!-- Remote Dashboard Password Settings -->
+      <div class="card" style="margin-top: 24px;">
+        <h3>🔑 Remote Dashboard Password</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:16px">
+          Reset or change the administrator password of your active local or remote brain instance.
+        </p>
+        <div id="settings-password-result" class="notice" style="display:none;margin-bottom:14px"></div>
+        <div class="form-group" style="margin-bottom:0">
+          <label>New Admin Password <span style="font-weight:400;color:var(--muted)">(minimum 8 characters)</span></label>
+          <div style="display:flex;gap:8px;align-items:center">
+            <input type="text" id="settings-new-password" placeholder="Enter new dashboard password..." autocomplete="off" style="font-family:monospace;flex:1">
+            <button class="btn btn-primary" onclick="resetRemotePassword()">Update Remote Password</button>
+          </div>
+          <div class="hint">
+            This will update the configuration on your active brain (locally or over SSH on your remote server/VM) and force a password reset on next dashboard login.
+          </div>
+        </div>
+      </div>
+      <!-- Danger Zone -->
+      <div class="card" style="margin-top: 24px; border-color: var(--red); background: rgba(248,81,73,0.02)">
+        <h3 style="color:var(--red)">⚠️ Danger Zone</h3>
+        <p style="color:var(--muted);font-size:13px;margin-bottom:12px">
+          Reset all configurations to start fresh. This will clear the wizard's memory from this browser and the server.
+        </p>
+        <div style="border:1px solid rgba(248,81,73,0.2);border-radius:8px;padding:14px;background:rgba(248,81,73,0.03)">
+          <p style="font-size:12px;color:var(--muted);margin-bottom:12px">
+            This clears both local storage and the server-side configuration file (`~/.agent/config/wizard-config.json`). If you deployed to a Cloud VM/VPS, remember to destroy or stop it directly in your cloud provider's console to avoid ongoing charges.
+          </p>
+          <button class="btn" style="background:var(--red);color:#fff;font-size:12px;padding:8px 16px" onclick="resetWizardSetup()">Reset Wizard Setup</button>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+<script>
+(function () {
+  'use strict';
+  // ── Intercept fetch to rewrite relative paths to absolute wizard server when opened via file:// ──
+  (function() {
+    var originalFetch = window.fetch;
+    window.fetch = function(url, options) {
+      if (typeof url === 'string' && !url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) {
+        var base = '';
+        if (window.location.protocol === 'file:') {
+          base = 'http://localhost:3001';
+        } else {
+          base = window.location.origin;
+        }
+        var cleanPath = url.startsWith('/') ? url : '/' + url;
+        url = base + cleanPath;
+      }
+      return originalFetch(url, options);
+    };
+  })();
+  // ── Safe LocalStorage wrapper with sessionStorage fallback ──
+  var safeStorage = {
+    getItem: function (key) {
+      try {
+        return localStorage.getItem(key) || sessionStorage.getItem(key);
+      } catch (e) {
+        try {
+          return sessionStorage.getItem(key);
+        } catch (e2) {
+          return null;
+        }
+      }
+    },
+    setItem: function (key, value) {
+      try {
+        localStorage.setItem(key, value);
+        sessionStorage.setItem(key, value);
+        return true;
+      } catch (e) {
+        try {
+          sessionStorage.setItem(key, value);
+          return true;
+        } catch (e2) {
+          return false;
+        }
+      }
+    }
+  };
+  window.saveAllToLocalStorage = function () {
+    var textInputs = [
+      'cfg-domain',
+      'cfg-cloudflare-token',
+      'cfg-localnet-host',
+      'cfg-localnet-user',
+      'cfg-vastai-key',
+      'cfg-github-token',
+      'cfg-cloud-token'
+    ];
+    var selectInputs = [
+      'cfg-cloud-provider',
+      'cfg-cloud-region'
+    ];
+    var payload = {};
+    textInputs.forEach(function (id) {
+      var el = document.getElementById(id);
+      if (el) {
+        safeStorage.setItem('tr_wizard_' + id, el.value);
+        payload[id] = el.value;
+      }
+    });
+    selectInputs.forEach(function (id) {
+      var el = document.getElementById(id);
+      if (el) {
+        safeStorage.setItem('tr_wizard_' + id, el.value);
+        payload[id] = el.value;
+      }
+    });
+    var targetRadio = document.querySelector('#deploy-target input[type=radio]:checked');
+    if (targetRadio) {
+      safeStorage.setItem('tr_wizard_deploy_target', targetRadio.value);
+      payload['deployTarget'] = targetRadio.value;
+    }
+    var httpsRadio = document.querySelector('input[name="https-method"]:checked');
+    if (httpsRadio) {
+      safeStorage.setItem('tr_wizard_https_method', httpsRadio.value);
+      payload['httpsMethod'] = httpsRadio.value;
+    }
+    fetch('/api/save-wizard-config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    }).catch(function (e) { console.error('Error saving wizard config on saveAll:', e); });
+  };
+  // ── Wizard state ──
+  var W = {
+    phase: 0,
+    domain: '',
+    pat: '',
+    apiUrl: '',
+    dashUrl: '',
+    healthUrl: '',
+    deployTarget: '',
+  };
+  var activeEs = null;
+  function getBaseUrl() {
+    if (W.dashUrl) {
+      return W.dashUrl.replace(/\/$/, '');
+    }
+    if (W.apiUrl) {
+      return W.apiUrl.replace(/\/v1\/chat\/completions\/?$/, '').replace(/\/$/, '');
+    }
+    return '';
+  }
+  function saveWizardState(updates) {
+    if (!updates) return;
+    for (var k in updates) {
+      if (updates.hasOwnProperty(k)) {
+        W[k] = updates[k];
+        // Save to browser safeStorage
+        safeStorage.setItem('tr_wizard_state_' + k, updates[k]);
+      }
+    }
+    // Also save to server config disk
+    fetch('/api/save-wizard-config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates)
+    }).catch(function (e) {
+      console.error('Error auto-persisting wizard state:', e);
+    });
+  }
+  function syncUIFromWizardState() {
+    if (W.pat) {
+      var patInput = document.getElementById('pat-key-display');
+      if (patInput) patInput.value = W.pat;
+      var settingsPatInput = document.getElementById('settings-pat-key');
+      if (settingsPatInput) settingsPatInput.value = W.pat;
+      var patResEl = document.getElementById('key-result');
+      if (patResEl) patResEl.style.display = '';
+    }
+  }
+  // ── Phase navigation ──
+  window.goPhase = function (n) {
+    document.querySelectorAll('.phase').forEach(function (el) { el.classList.remove('active'); });
+    document.getElementById('phase-' + n).classList.add('active');
+    document.querySelectorAll('#step-nav li').forEach(function (li, i) {
+      li.classList.remove('active');
+      if (i < n)  li.classList.add('done');
+      if (i === n) li.classList.add('active');
+    });
+    W.phase = n;
+    saveWizardState({ phase: n });
+    syncPersistentBarVisibility();
+    if (n === 1) loadDetectedProjects();
+    if (n === 2) {
+      startSSE();
+    }
+    if (n === 4) populateIntegrations();
+    if (n === 5) populateApiRef();
+    if (n === 6) populateDone();
+    if (n === 7) populateSettings();
+    window.scrollTo({ top: 0 });
+  };
+  document.querySelectorAll('#deploy-target input[type=radio]').forEach(function (r) {
+    r.addEventListener('change', function () {
+      document.querySelectorAll('#deploy-target .radio-item').forEach(function (el) { el.classList.remove('selected'); });
+      var parentItem = r.closest('.radio-item');
+      if (parentItem) parentItem.classList.add('selected');
+      var val = r.value;
+      // Show/hide path-specific detail panels
+      var localnetDetails = document.getElementById('localnet-details');
+      if (localnetDetails) {
+        localnetDetails.style.display = val === 'localnet' ? '' : 'none';
+      }
+      var agentCloudDetails = document.getElementById('agent-cloud-details');
+      if (agentCloudDetails) {
+        agentCloudDetails.style.display = val === 'agent-cloud' ? '' : 'none';
+      }
+      var installBtnText = document.getElementById('install-btn-text');
+      if (installBtnText) {
+        if (val === 'localnet') {
+          installBtnText.innerText = 'Install on remote network computer';
+        } else if (val === 'agent-cloud') {
+          installBtnText.innerText = '🚀 Provision & Install via Agent';
+        } else {
+          installBtnText.innerText = 'Install on this computer';
+        }
+      }
+      W.deployTarget = val;
+    });
+  });
+  // ── Phase 1: Project Brain Selector ──
+  var _detectedProjects = [];
+  var _customProjects = [];
+  var _projectsLoaded = false;
+  window.loadDetectedProjects = function () {
+    if (_projectsLoaded) return;
+    var listEl = document.getElementById('project-list');
+    var loadingEl = document.getElementById('project-list-loading');
+    var emptyEl = document.getElementById('project-list-empty');
+    if (loadingEl) loadingEl.style.display = '';
+    if (listEl) listEl.style.display = 'none';
+    if (emptyEl) emptyEl.style.display = 'none';
+    fetch('/api/detect-projects')
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        _detectedProjects = data.projects || [];
+        _projectsLoaded = true;
+        if (loadingEl) loadingEl.style.display = 'none';
+        if (_detectedProjects.length === 0) {
+          if (emptyEl) emptyEl.style.display = '';
+          return;
+        }
+        if (listEl) {
+          listEl.style.display = 'flex';
+          listEl.style.flexDirection = 'column';
+          listEl.style.gap = '6px';
+          listEl.innerHTML = '';
+          _detectedProjects.forEach(function (proj) {
+            listEl.appendChild(createProjectRow(proj));
+          });
+        }
+        updateBrainSummary();
+      })
+      .catch(function () {
+        if (loadingEl) loadingEl.style.display = 'none';
+        if (emptyEl) {
+          emptyEl.textContent = 'Failed to scan projects. Use "Add" to enter paths manually.';
+          emptyEl.style.display = '';
+        }
+      });
+  };
+  function createProjectRow(proj) {
+    var row = document.createElement('label');
+    row.className = 'checkbox-item';
+    row.style.cssText = 'padding:8px 12px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;gap:10px;transition:border-color 0.15s';
+    var cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.style.cssText = 'width:15px;height:15px;accent-color:var(--blue);flex-shrink:0';
+    cb.dataset.projectPath = proj.path;
+    cb.addEventListener('change', function () {
+      row.style.borderColor = cb.checked ? 'var(--blue)' : 'var(--border)';
+      updateBrainSummary();
+    });
+    var info = document.createElement('div');
+    info.style.cssText = 'flex:1;min-width:0';
+    var nameRow = document.createElement('div');
+    nameRow.style.cssText = 'font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px';
+    nameRow.textContent = proj.name;
+    if (proj.hasBrain) {
+      var badge = document.createElement('span');
+      badge.style.cssText = 'font-size:10px;font-weight:500;padding:1px 6px;border-radius:4px;background:rgba(35,134,54,0.15);color:var(--green)';
+      badge.textContent = '✓ Brain installed';
+      nameRow.appendChild(badge);
+    }
+    var pathRow = document.createElement('div');
+    pathRow.style.cssText = 'font-size:11px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap';
+    pathRow.textContent = proj.path;
+    info.appendChild(nameRow);
+    info.appendChild(pathRow);
+    row.appendChild(cb);
+    row.appendChild(info);
+    return row;
+  }
+  window.addCustomProject = function () {
+    var input = document.getElementById('custom-project-path');
+    var val = (input ? input.value : '').trim();
+    if (!val) return;
+    if (!val.startsWith('/')) {
+      alert('Please enter an absolute path (starting with /).');
+      return;
+    }
+    // Check for duplicates
+    var allPaths = _detectedProjects.map(function (p) { return p.path; }).concat(_customProjects.map(function (p) { return p.path; }));
+    if (allPaths.indexOf(val) !== -1) {
+      alert('This project is already in the list.');
+      return;
+    }
+    var proj = { name: val.split('/').pop(), path: val, hasGit: false, hasBrain: false, custom: true };
+    _customProjects.push(proj);
+    var listEl = document.getElementById('project-list');
+    var emptyEl = document.getElementById('project-list-empty');
+    if (emptyEl) emptyEl.style.display = 'none';
+    if (listEl) {
+      listEl.style.display = 'flex';
+      listEl.style.flexDirection = 'column';
+      listEl.style.gap = '6px';
+      var row = createProjectRow(proj);
+      // Auto-check custom additions
+      var cb = row.querySelector('input[type=checkbox]');
+      if (cb) {
+        cb.checked = true;
+        row.style.borderColor = 'var(--blue)';
+      }
+      listEl.appendChild(row);
+    }
+    if (input) input.value = '';
+    updateBrainSummary();
+  };
+  function updateBrainSummary() {
+    var globalChecked = document.getElementById('brain-global') && document.getElementById('brain-global').checked;
+    var projectCheckboxes = document.querySelectorAll('#project-list input[type=checkbox]:checked');
+    var total = (globalChecked ? 1 : 0) + projectCheckboxes.length;
+    var summaryEl = document.getElementById('brain-selection-summary');
+    var countEl = document.getElementById('brain-selection-count');
+    if (summaryEl && countEl) {
+      if (total > 0) {
+        countEl.textContent = total;
+        summaryEl.style.display = '';
+      } else {
+        summaryEl.style.display = 'none';
+      }
+    }
+  }
+  // Wire global checkbox
+  var globalCb = document.getElementById('brain-global');
+  if (globalCb) {
+    globalCb.addEventListener('change', function () {
+      var parentLabel = globalCb.closest('.checkbox-item');
+      if (parentLabel) {
+        parentLabel.style.borderColor = globalCb.checked ? 'var(--green)' : 'var(--border)';
+      }
+      updateBrainSummary();
+    });
+  }
+  // ── Phase 1: Install on another computer on the network ──
+  window.installOnNetwork = function () {
+    var pass = 'totalrecall';
+    window.saveAllToLocalStorage();
+    var host = (document.getElementById('cfg-localnet-host') || {}).value;
+    var user = (document.getElementById('cfg-localnet-user') || {}).value;
+    if (!host || !host.trim()) { alert('Please enter the IP address or hostname of that computer.'); return; }
+    if (!user || !user.trim()) { alert('Please enter the username on that computer.'); return; }
+    W.dashboardPassword = pass;
+    goPhase(2);
+    startSSE();
+    fetch('/api/start-install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        deployTarget: 'localnet',
+        localnetHost: host.trim(),
+        localnetUser: user.trim(),
+        model: 'flash',
+        httpsMethod: 'local',
+        skipSearxng: true,
+        skipCaddy: true,
+        skipCompile: false,
+        skipModels: false,
+        dashboardPassword: pass
+      }),
+    }).catch(function (e) { console.error(e); });
+  };
+  // ── Phase 1: Vast.ai provision (client-side) ──
+  window.provisionVastAI = function (instanceId) {
+    var pass = 'totalrecall';
+    window.saveAllToLocalStorage();
+    var key = (document.getElementById('cfg-vastai-key') || {}).value;
+    if (!key || !key.trim()) {
+      alert('Please paste your Vast.ai API key first (Step 2 above).');
+      return;
+    }
+    W.dashboardPassword = pass;
+    goPhase(2);
+    startSSE();
+    var payload = {
+      vastaiKey: key.trim(),
+      dashboardPassword: pass
+    };
+    if (instanceId) {
+      payload.instanceId = instanceId;
+    }
+    fetch('/api/provision-vastai', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    }).catch(function (err) { console.error('provision-vastai error', err); });
+  };
+  // ── Phase 1: Scan Vast.ai account for existing instances ──
+  window.scanVastAIInstances = function (e) {
+    if (e) e.preventDefault();
+    var key = (document.getElementById('cfg-vastai-key') || {}).value;
+    if (!key || !key.trim()) {
+      alert('Please paste your Vast.ai API key first to scan your account.');
+      return;
+    }
+    var scanBtn = document.getElementById('vastai-scan-btn');
+    var container = document.getElementById('vastai-existing-container');
+    var list = document.getElementById('vastai-existing-list');
+    if (scanBtn) {
+      scanBtn.disabled = true;
+      scanBtn.textContent = 'Scanning...';
+    }
+    fetch('/api/vastai-instances', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ vastaiKey: key.trim() })
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (data) {
+      if (scanBtn) {
+        scanBtn.disabled = false;
+        scanBtn.textContent = '🔍 Scan Account';
+      }
+      if (!data.ok || !data.instances || !data.instances.length) {
+        if (container) container.style.display = 'none';
+        return;
+      }
+      var failedIds = [];
+      if (list) {
+        list.innerHTML = '';
+        data.instances.forEach(function (inst) {
+          var gpu = inst.gpu_name || 'GPU';
+          var price = inst.dph_total ? ('$' + (inst.dph_total * 24 * 30).toFixed(2) + '/mo') : 'unknown price';
+          var status = inst.actual_status || inst.status || 'loading';
+          var isFailed = status === 'broken' || status === 'offline' || status === 'exited' || status === 'stopped';
+          if (isFailed) {
+            failedIds.push(inst.id);
+          }
+          var div = document.createElement('div');
+          div.style.display = 'flex';
+          div.style.alignItems = 'center';
+          div.style.justifyContent = 'space-between';
+          div.style.padding = '8px 12px';
+          div.style.border = '1px solid var(--border)';
+          div.style.borderRadius = '6px';
+          div.style.background = 'var(--panel)';
+          div.style.fontSize = '12px';
+          var createdStr = '';
+          if (inst.start_date) {
+            try {
+              var d = new Date(inst.start_date * 1000);
+              createdStr = ' | Created: ' + d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+            } catch (e) {}
+          }
+          var detailsDiv = document.createElement('div');
+          detailsDiv.innerHTML = '<strong style="color:var(--text)">' + gpu + ' (ID: ' + inst.id + ')</strong><br>' +
+                                 '<span style="color:var(--muted)">Status: ' + status + ' | ' + price + createdStr + '</span>';
+          var actionsDiv = document.createElement('div');
+          actionsDiv.style.display = 'flex';
+          actionsDiv.style.gap = '8px';
+          var adoptBtn = document.createElement('button');
+          adoptBtn.className = 'btn btn-primary';
+          adoptBtn.style.padding = '4px 10px';
+          adoptBtn.style.fontSize = '11px';
+          adoptBtn.textContent = 'Adopt & Connect';
+          adoptBtn.onclick = function (event) {
+            if (event) event.preventDefault();
+            if (confirm('Are you sure you want to adopt instance ' + inst.id + ' (' + gpu + ')? Total Recall will connect and finish installation there.')) {
+              window.provisionVastAI(inst.id);
+            }
+          };
+          var destroyBtn = document.createElement('button');
+          destroyBtn.className = 'btn btn-secondary';
+          destroyBtn.style.padding = '4px 10px';
+          destroyBtn.style.fontSize = '11px';
+          destroyBtn.style.color = 'var(--red)';
+          destroyBtn.style.borderColor = 'var(--red)';
+          destroyBtn.textContent = '🗑️ Destroy';
+          destroyBtn.onclick = function (event) {
+            if (event) event.preventDefault();
+            if (confirm('⚠️ WARNING: This will permanently delete/destroy instance ' + inst.id + ' (' + gpu + '). Any data on it will be lost and billing will stop immediately. Proceed?')) {
+              destroyBtn.disabled = true;
+              destroyBtn.textContent = 'Destroying...';
+              fetch('/api/destroy-vastai-instance', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ vastaiKey: key.trim(), instanceId: inst.id })
+              })
+              .then(function (r) { return r.json(); })
+              .then(function (data) {
+                if (data.ok) {
+                  window.scanVastAIInstances();
+                } else {
+                  destroyBtn.disabled = false;
+                  destroyBtn.textContent = '🗑️ Destroy';
+                  alert('Failed to destroy instance: ' + (data.error || 'Unknown error'));
+                }
+              })
+              .catch(function (err) {
+                destroyBtn.disabled = false;
+                destroyBtn.textContent = '🗑️ Destroy';
+                alert('Error: ' + err.message);
+              });
+            }
+          };
+          actionsDiv.appendChild(adoptBtn);
+          actionsDiv.appendChild(destroyBtn);
+          div.appendChild(detailsDiv);
+          div.appendChild(actionsDiv);
+          list.appendChild(div);
+        });
+      }
+      // Update failed cleanup banner
+      var cleanupBanner = document.getElementById('vastai-cleanup-banner');
+      if (cleanupBanner) {
+        if (failedIds.length > 0) {
+          cleanupBanner.style.display = 'flex';
+          window._onboardingFailedInstanceIds = failedIds;
+        } else {
+          cleanupBanner.style.display = 'none';
+          window._onboardingFailedInstanceIds = [];
+        }
+      }
+      if (container) {
+        container.style.display = 'block';
+      }
+    })
+    .catch(function (err) {
+      if (scanBtn) {
+        scanBtn.disabled = false;
+        scanBtn.textContent = '🔍 Scan Account';
+      }
+      alert('Network error scanning Vast.ai instances: ' + err.message);
+    });
+  };
+  // ── Phase 1: Clean Up Failed Onboarding Instances ──
+  window.cleanupOnboardingFailedInstances = function (e) {
+    if (e) e.preventDefault();
+    var key = (document.getElementById('cfg-vastai-key') || {}).value;
+    var failedIds = window._onboardingFailedInstanceIds || [];
+    if (!failedIds.length) return;
+    if (confirm('⚠️ WARNING: This will permanently delete/destroy ALL ' + failedIds.length + ' failed/broken instances from your Vast.ai account. Billing will stop immediately. Proceed?')) {
+      var cleanupBtn = document.getElementById('vastai-cleanup-btn');
+      if (cleanupBtn) {
+        cleanupBtn.disabled = true;
+        cleanupBtn.textContent = 'Cleaning up...';
+      }
+      var currentIdx = 0;
+      function destroyNext() {
+        if (currentIdx >= failedIds.length) {
+          alert('Successfully cleaned up all failed instances!');
+          window.scanVastAIInstances();
+          return;
+        }
+        var id = failedIds[currentIdx];
+        fetch('/api/destroy-vastai-instance', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ vastaiKey: key.trim(), instanceId: id })
+        })
+        .then(function () {
+          currentIdx++;
+          destroyNext();
+        })
+        .catch(function () {
+          currentIdx++;
+          destroyNext();
+        });
+      }
+      destroyNext();
+    }
+  };
+  // ── Phase 1: Start Install ──
+  window.startInstall = function () {
+    var pass = 'totalrecall';
+    var googleApiKey = ((document.getElementById('cfg-google-key') || {}).value || '').trim();
+    var openaiApiKey = ((document.getElementById('cfg-openai-key') || {}).value || '').trim();
+    if (!googleApiKey && !openaiApiKey) {
+      alert('At least one API Key (Google or OpenAI) is required for semantic VFS indexing & reasoning.');
+      return;
+    }
+    var deployTarget = 'local';
+    var targetRadio = document.querySelector('#deploy-target input[type=radio]:checked');
+    if (targetRadio) {
+      deployTarget = targetRadio.value;
+    }
+    var domain = 'localhost';
+    var httpsMethod = 'local';
+    var localnetHost = null;
+    var localnetUser = null;
+    var cloudProvider = null;
+    var cloudToken = null;
+    var cloudRegion = null;
+    var quickTunnel = document.getElementById('cfg-cloudflare-quick');
+    if (quickTunnel && quickTunnel.checked) {
+      httpsMethod = 'cloudflare-quick';
+    }
+    if (deployTarget === 'localnet') {
+      localnetHost = ((document.getElementById('cfg-localnet-host') || {}).value || '').trim();
+      localnetUser = ((document.getElementById('cfg-localnet-user') || {}).value || '').trim() || 'root';
+      if (!localnetHost) {
+        alert('Please enter the Remote Host or IP Address of the network computer.');
+        return;
+      }
+      httpsMethod = 'cloudflare-quick'; // Always use Quick Tunnel for remote localnet access
+    }
+    if (deployTarget === 'agent-cloud') {
+      cloudProvider = document.getElementById('cfg-cloud-provider').value;
+      cloudToken = ((document.getElementById('cfg-cloud-token') || {}).value || '').trim();
+      cloudRegion = document.getElementById('cfg-cloud-region').value;
+      if (!cloudToken) {
+        alert('Please enter your Cloud Provider API Key / Token.');
+        return;
+      }
+      httpsMethod = 'cloudflare-quick'; // Always Quick Tunnel for fully automated setups
+    }
+    window.saveAllToLocalStorage();
+    W.domain = domain;
+    W.dashboardPassword = pass;
+    W.deployTarget = deployTarget;
+    saveWizardState({ domain: domain, deployTarget: deployTarget });
+    var payload = {
+      domain: domain,
+      httpsMethod: httpsMethod,
+      model: 'flash',
+      duckdnsToken: null,
+      cloudflareToken: null,
+      skipSearxng: true,
+      skipCaddy: (httpsMethod === 'local' || httpsMethod === 'cloudflare-quick'),
+      skipCompile: false,
+      skipModels: false,
+      deployTarget: deployTarget,
+      dashboardPassword: pass,
+      googleApiKey: googleApiKey,
+      openaiApiKey: openaiApiKey,
+      installGlobal: !!(document.getElementById('brain-global') && document.getElementById('brain-global').checked),
+      projectPaths: Array.from(document.querySelectorAll('#project-list input[type=checkbox]:checked')).map(function (cb) { return cb.dataset.projectPath; })
+    };
+    if (deployTarget === 'localnet') {
+      payload.localnetHost = localnetHost;
+      payload.localnetUser = localnetUser;
+    }
+    if (deployTarget === 'agent-cloud') {
+      payload.cloudProvider = cloudProvider;
+      payload.cloudToken = cloudToken;
+      payload.cloudRegion = cloudRegion;
+    }
+    goPhase(2);
+    startSSE();
+    fetch('/api/start-install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    }).catch(function (e) { console.error('start-install error:', e); });
+  };
+  // ── Phase 2: SSE progress stream ──
+  var _stepCount = 0;
+  var TOTAL_STEPS = 12;
+  // ── Persistent Bar Update Helpers ──
+  function syncPersistentBarVisibility() {
+    var pbar = document.getElementById('persistent-install-bar');
+    if (!pbar) return;
+    // Do not show the persistent bar on Phase 0, Phase 1, or Phase 2
+    if (W.phase === 0 || W.phase === 1 || W.phase === 2) {
+      pbar.classList.remove('visible');
+      return;
+    }
+    var isActive = (safeStorage.getItem('tr_wizard_install_active') === 'true') || activeEs;
+    var statusType = safeStorage.getItem('tr_wizard_install_status_type');
+    var isDoneOrError = (statusType === 'done' || statusType === 'error');
+    // On Phase 6 (Done URLs page), only show the persistent bar if the installation is still active or has errored out
+    if (W.phase === 6) {
+      if (isActive || statusType === 'error') {
+        pbar.classList.add('visible');
+      } else {
+        pbar.classList.remove('visible');
+      }
+      return;
+    }
+    if (isActive || isDoneOrError) {
+      pbar.classList.add('visible');
+    } else {
+      pbar.classList.remove('visible');
+    }
+  }
+  function updatePersistentBarState(type, msg, pctOrStep) {
+    var pbar = document.getElementById('persistent-install-bar');
+    if (!pbar) return;
+    var fill = pbar.querySelector('.pbar-fill');
+    var status = pbar.querySelector('.pbar-status-text');
+    var log = pbar.querySelector('.pbar-latest-log');
+    var spinner = pbar.querySelector('.pbar-spinner');
+    var pct = 0;
+    if (type === 'done') {
+      pct = 100;
+    } else if (type === 'step') {
+      pct = pctOrStep;
+    } else {
+      pct = Math.min(Math.round((_stepCount / TOTAL_STEPS) * 100), 95);
+    }
+    if (fill) fill.style.width = pct + '%';
+    if (type === 'done') {
+      if (status) status.innerHTML = '🎉 Install complete!';
+      if (log) {
+        log.textContent = 'All services active. Click to proceed.';
+        log.style.color = 'var(--green)';
+      }
+      if (spinner) {
+        spinner.style.backgroundColor = 'var(--green)';
+        spinner.style.animation = 'none';
+      }
+    } else if (type === 'error') {
+      if (status) status.innerHTML = '❌ Installation failed';
+      if (log) {
+        log.textContent = msg;
+        log.style.color = 'var(--red)';
+      }
+      if (spinner) {
+        spinner.style.backgroundColor = 'var(--red)';
+        spinner.style.animation = 'none';
+      }
+    } else {
+      if (status) status.innerHTML = '⚡ Installing Total Recall (' + pct + '%)';
+      if (log) {
+        log.textContent = msg;
+        log.style.color = type === 'warn' ? 'var(--yellow)' : 'var(--blue)';
+      }
+      if (spinner) {
+        spinner.style.backgroundColor = 'var(--blue)';
+        spinner.style.animation = 'pbar-pulse 1.4s infinite ease-in-out';
+      }
+    }
+    safeStorage.setItem('tr_wizard_install_pct', pct);
+    safeStorage.setItem('tr_wizard_install_status_msg', msg);
+    safeStorage.setItem('tr_wizard_install_status_type', type);
+  }
+  function startSSE() {
+    if (activeEs) {
+      return;
+    }
+    // Record that installation is actively running
+    safeStorage.setItem('tr_wizard_install_active', 'true');
+    var es = new EventSource('/events');
+    activeEs = es;
+    var bar = document.getElementById('progress-bar');
+    var label = document.getElementById('progress-label');
+    var log = document.getElementById('log');
+    // Reset progress, logs and notices
+    _stepCount = 0;
+    if (bar) bar.style.width = '0%';
+    if (label) label.textContent = 'Waiting for install to begin...';
+    if (log) log.innerHTML = '';
+    var errorNotice = document.getElementById('install-error-notice');
+    if (errorNotice) errorNotice.style.display = 'none';
+    var doneNotice = document.getElementById('install-done-notice');
+    if (doneNotice) doneNotice.style.display = 'none';
+    syncPersistentBarVisibility();
+    var icons = { step: '>>', ok: '✓', warn: '!!', error: '✗', info: '--' };
+    function addEntry(type, msg) {
+      if (!log) return;
+      var div = document.createElement('div');
+      div.className = 'log-entry ' + (type || 'info');
+      var icon = document.createElement('span');
+      icon.className = 'icon';
+      icon.textContent = icons[type] || '--';
+      var text = document.createElement('span');
+      text.textContent = msg;
+      div.appendChild(icon);
+      div.appendChild(text);
+      log.appendChild(div);
+      log.scrollTop = log.scrollHeight;
+    }
+    es.onmessage = function (e) {
+      var data = JSON.parse(e.data);
+      if (data.type === 'step') {
+        _stepCount++;
+        var pct = Math.min(Math.round((_stepCount / TOTAL_STEPS) * 100), 95);
+        if (bar) bar.style.width = pct + '%';
+        if (label) label.textContent = data.msg;
+        addEntry('step', data.msg);
+        updatePersistentBarState('step', data.msg, pct);
+      } else if (data.type === 'done') {
+        if (bar) bar.style.width = '100%';
+        if (label) label.textContent = 'Install complete!';
+        addEntry('ok', 'Install complete!');
+        var apiUrl = data.apiUrl || ('https://' + W.domain + '/v1/chat/completions');
+        var dashUrl = data.dashUrl || ('https://' + W.domain + '/');
+        var healthUrl = data.healthUrl || ('https://' + W.domain + '/health');
+        saveWizardState({
+          apiUrl: apiUrl,
+          dashUrl: dashUrl,
+          healthUrl: healthUrl
+        });
+        if (doneNotice) doneNotice.style.display = '';
+        safeStorage.setItem('tr_wizard_install_active', 'false');
+        updatePersistentBarState('done', 'Install complete!', 100);
+        es.close();
+        if (activeEs === es) activeEs = null;
+        syncPersistentBarVisibility();
+      } else if (data.type === 'error') {
+        addEntry('error', data.msg);
+        if (errorNotice) errorNotice.style.display = '';
+        safeStorage.setItem('tr_wizard_install_active', 'false');
+        updatePersistentBarState('error', data.msg, _stepCount);
+        es.close();
+        if (activeEs === es) activeEs = null;
+        syncPersistentBarVisibility();
+      } else if (data.type === 'warn') {
+        addEntry('warn', data.msg);
+        updatePersistentBarState('warn', data.msg, _stepCount);
+      } else {
+        addEntry('info', data.msg);
+        updatePersistentBarState('info', data.msg, _stepCount);
+      }
+    };
+    es.onerror = function () {
+      addEntry('warn', 'Connection closed (install may still be running in the terminal).');
+      updatePersistentBarState('warn', 'Connection closed (install may still be running in the terminal).', _stepCount);
+      es.close();
+      if (activeEs === es) activeEs = null;
+      syncPersistentBarVisibility();
+    };
+  }
+  // ── Phase 3: Generate key ──
+  window.generateKey = function () {
+    var name = document.getElementById('key-name').value.trim() || 'default';
+    var scope = document.querySelector('#key-scope input[type=radio]:checked').value;
+    var btn = document.getElementById('gen-key-btn');
+    var errBox = document.getElementById('key-error');
+    errBox.style.display = 'none';
+    btn.disabled = true;
+    btn.textContent = 'Generating…';
+    fetch('/api/generate-pat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: name, scope: scope }),
+    })
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        if (data.token || data.key || data.pat) {
+          var tok = data.token || data.key || data.pat;
+          saveWizardState({ pat: tok });
+          var patInput = document.getElementById('pat-key-display');
+          if (patInput) {
+            patInput.value = tok;
+            patInput.type = 'text'; // Auto-reveal key on generation so user can see it right away
+            var patToggle = patInput.nextElementSibling;
+            if (patToggle) patToggle.textContent = 'Hide';
+          }
+          var settingsPatInput = document.getElementById('settings-pat-key');
+          if (settingsPatInput) settingsPatInput.value = tok;
+          document.getElementById('key-result').style.display = '';
+          btn.textContent = 'Generate Another';
+          btn.disabled = false;
+        } else {
+          throw new Error(data.error || JSON.stringify(data));
+        }
+      })
+      .catch(function (e) {
+        document.getElementById('key-error-text').textContent = e.message;
+        errBox.style.display = '';
+        btn.textContent = 'Generate Key';
+        btn.disabled = false;
+      });
+  };
+  window.copyToken = function (id) {
+    var el = document.getElementById(id || 'pat-key-display');
+    if (!el) return;
+    var tok = el.tagName === 'INPUT' ? el.value : el.textContent;
+    navigator.clipboard.writeText(tok).catch(function () {
+      var ta = document.createElement('textarea');
+      ta.value = tok;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+    });
+    if (event && event.currentTarget) {
+      var btn = event.currentTarget;
+      var origText = btn.textContent;
+      btn.textContent = 'Copied!';
+      btn.style.borderColor = 'var(--green)';
+      btn.style.color = 'var(--green)';
+      setTimeout(function() {
+        btn.textContent = origText;
+        btn.style.borderColor = '';
+        btn.style.color = '';
+      }, 1500);
+    }
+  };
+  // ── Phase 4: Integrations ──
+  // IDE picker toggle
+  window.toggleIde = function(checkbox) {
+    var label = checkbox.closest('.ide-card');
+    if (checkbox.checked) {
+      label.classList.add('selected');
+    } else {
+      label.classList.remove('selected');
+    }
+  };
+  // Configure and configure GitHub backup
+  window.saveGitHubBackup = function() {
+    var tokenInput = document.getElementById('cfg-github-token');
+    var token = (tokenInput.value || '').trim();
+    var resultEl = document.getElementById('github-result-notice');
+    var progressEl = document.getElementById('github-progress');
+    var logEl = document.getElementById('github-log');
+    var btn = document.getElementById('cfg-github-btn');
+    if (!token) {
+      resultEl.style.display = 'block';
+      resultEl.className = 'notice warn';
+      resultEl.innerHTML = '⚠️ GitHub Personal Access Token is required.';
+      return;
+    }
+    resultEl.style.display = 'none';
+    logEl.style.display = 'block';
+    logEl.textContent = '';
+    progressEl.style.display = 'grid';
+    btn.disabled = true;
+    // Reset progress steps
+    for (var i = 1; i <= 5; i++) {
+      var stepEl = document.getElementById('gh-step-' + i);
+      if (stepEl) {
+        stepEl.className = 'progress-step-item pending';
+        stepEl.querySelector('.step-icon').textContent = '○';
+      }
+    }
+    fetch('/api/github/configure', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token: token })
+    })
+    .then(function(response) {
+      if (!response.ok) {
+        throw new Error('Server returned HTTP ' + response.status);
+      }
+      var reader = response.body.getReader();
+      var decoder = new TextDecoder();
+      var buffer = '';
+      function read() {
+        return reader.read().then(function(result) {
+          if (result.done) {
+            return;
+          }
+          buffer += decoder.decode(result.value, { stream: true });
+          var lines = buffer.split('\n');
+          buffer = lines.pop(); // Keep partial line
+          lines.forEach(function(lineStr) {
+            if (!lineStr.trim()) return;
+            try {
+              var line = JSON.parse(lineStr);
+              if (line.type === 'log') {
+                logEl.textContent += line.msg + '\n';
+                logEl.scrollTop = logEl.scrollHeight;
+              } else if (line.type === 'step') {
+                var stepEl = document.getElementById('gh-step-' + line.stepIndex);
+                if (stepEl) {
+                  stepEl.className = 'progress-step-item ' + line.status;
+                  var icon = '○';
+                  if (line.status === 'active') icon = '🔄';
+                  else if (line.status === 'success') icon = '✅';
+                  else if (line.status === 'error') icon = '❌';
+                  stepEl.innerHTML = '<span class="step-icon">' + icon + '</span> ' + line.msg;
+                }
+              } else if (line.type === 'success') {
+                resultEl.style.display = 'block';
+                resultEl.className = 'notice success';
+                resultEl.innerHTML = '✅ ' + line.msg;
+                btn.disabled = false;
+              } else if (line.type === 'error') {
+                resultEl.style.display = 'block';
+                resultEl.className = 'notice warn';
+                resultEl.innerHTML = '⚠️ ' + line.msg;
+                btn.disabled = false;
+              }
+            } catch(e) {
+              console.error('Failed to parse NDJSON line:', lineStr, e);
+            }
+          });
+          return read();
+        });
+      }
+      return read();
+    })
+    .catch(function(err) {
+      resultEl.style.display = 'block';
+      resultEl.className = 'notice warn';
+      resultEl.innerHTML = '⚠️ Configuration failed: ' + err.message;
+      btn.disabled = false;
+    });
+  };
+  // Save search API keys (Brave / Tavily / Exa / Serper)
+  window.saveSearchKeys = function() {
+    var tavilyKey = (document.getElementById('tavily-key').value || '').trim();
+    var braveKey  = (document.getElementById('brave-key').value  || '').trim();
+    var exaKey    = (document.getElementById('exa-key').value    || '').trim();
+    var serperKey = (document.getElementById('serper-key').value || '').trim();
+    var resultEl  = document.getElementById('search-save-result');
+    if (!braveKey && !tavilyKey && !exaKey && !serperKey) {
+      resultEl.style.display = '';
+      resultEl.className = 'notice warn';
+      resultEl.textContent = 'No keys entered — that\'s fine. The engine will use DuckDuckGo and Wikipedia for free.';
+      return;
+    }
+    resultEl.style.display = '';
+    resultEl.className = 'notice';
+    resultEl.textContent = 'Saving…';
+    fetch('/api/save-search-config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ braveKey, tavilyKey, exaKey, serperKey })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        resultEl.className = 'notice success';
+        resultEl.textContent = '✅ Saved. Primary search source: ' + data.primarySource + '.';
+      } else {
+        resultEl.className = 'notice warn';
+        resultEl.textContent = '⚠️ ' + (data.error || 'Could not save keys.');
+      }
+    })
+    .catch(function() {
+      resultEl.className = 'notice warn';
+      resultEl.textContent = '⚠️ Could not reach the setup server.';
+    });
+  };
+  // Auto-detect installed IDEs on page load
+  function autoDetectIDEs() {
+    fetch('/api/detect-ides')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (!data.detected) return;
+        data.detected.forEach(function(ide) {
+          var cb = document.querySelector('#ide-' + ide + ' input[type=checkbox]');
+          if (cb && !cb.checked) { cb.checked = true; toggleIde(cb); }
+        });
+      })
+      .catch(function() { /* auto-detect optional */ });
+  }
+  function populateIntegrations() {
+    autoDetectIDEs();
+  }
+  // Download full brain as .tar.gz
+  window.downloadBrain = function() {
+    var status = document.getElementById('brain-dl-status');
+    var brainUrl = getBaseUrl();
+    var pat = W.pat || '';
+    if (!brainUrl || !pat) {
+      if (status) status.textContent = '⚠️ Connect your brain first (need URL + PAT)';
+      return;
+    }
+    if (status) status.textContent = 'Preparing download...';
+    // Fetch with auth then trigger blob download
+    fetch(brainUrl + '/api/brain/export', {
+      headers: { 'Authorization': 'Bearer ' + pat }
+    })
+    .then(function(r) {
+      if (!r.ok) throw new Error('Export failed: ' + r.status);
+      return r.blob();
+    })
+    .then(function(blob) {
+      var url = URL.createObjectURL(blob);
+      var a = document.createElement('a');
+      var date = new Date().toISOString().slice(0, 10);
+      a.href = url;
+      a.download = 'total-recall-brain-' + date + '.tar.gz';
+      document.body.appendChild(a);
+      a.click();
+      setTimeout(function() { URL.revokeObjectURL(url); a.remove(); }, 1000);
+      if (status) status.textContent = '✅ Downloaded!';
+    })
+    .catch(function(e) {
+      if (status) status.textContent = '❌ ' + e.message;
+    });
+  };
+  // Scan for existing rule files and skills
+  window.scanRuleFiles = function() {
+    var dir = (document.getElementById('import-dir').value || '').trim();
+    var resultEl = document.getElementById('import-rules-result');
+    var listEl = document.getElementById('import-rules-list');
+    resultEl.textContent = 'Scanning...';
+    listEl.style.display = 'none';
+    var url = '/api/import/rules' + (dir ? '?dir=' + encodeURIComponent(dir) : '');
+    fetch(url)
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      var detected = data.detected || [];
+      if (detected.length === 0) { resultEl.textContent = 'No rule or skill files found in that directory.'; return; }
+      resultEl.textContent = '';
+      listEl.style.display = '';
+      // Group detected files
+      var groups = {};
+      var groupOrder = [];
+      detected.forEach(function(f) {
+        var groupId, groupName, isSkill = false;
+        if (f.filename.startsWith('.agent/skills/')) {
+          // Extract skill name: .agent/skills/<name>/...
+          var parts = f.filename.split('/');
+          var skillName = parts[2] || 'unknown';
+          groupId = 'skill:' + skillName;
+          groupName = '🧠 Skill: ' + skillName;
+          isSkill = true;
+        } else if (f.filename.indexOf('/') !== -1 || f.filename.indexOf('\\') !== -1) {
+          var norm = f.filename.replace(/\\/g, '/');
+          var dirPath = norm.substring(0, norm.lastIndexOf('/'));
+          groupId = 'dir:' + dirPath;
+          groupName = '📂 Rules in ' + dirPath;
+        } else {
+          groupId = 'global';
+          groupName = '🌐 Global IDE Rules';
+        }
+        if (!groups[groupId]) {
+          groups[groupId] = {
+            id: groupId,
+            name: groupName,
+            isSkill: isSkill,
+            files: []
+          };
+          groupOrder.push(groupId);
+        }
+        groups[groupId].files.push(f);
+      });
+      // Sort groups: skills first, then directories, then global
+      groupOrder.sort(function(a, b) {
+        var gA = groups[a];
+        var gB = groups[b];
+        if (gA.isSkill && !gB.isSkill) return -1;
+        if (!gA.isSkill && gB.isSkill) return 1;
+        if (gA.id === 'global') return 1;
+        if (gB.id === 'global') return -1;
+        return gA.name.localeCompare(gB.name);
+      });
+      var html = '<div style="font-size:12px;color:var(--muted);margin-bottom:12px">Select files to import:</div>';
+      groupOrder.forEach(function(groupId) {
+        var group = groups[groupId];
+        var allAlreadyImported = group.files.every(function(f) { return f.alreadyImported; });
+        var groupClass = 'group-details' + (group.isSkill ? ' skill-group' : '');
+        var badgeColor = group.isSkill ? 'var(--purple)' : 'var(--blue)';
+        var badgeText = group.isSkill ? 'Skill Vault' : 'Modular';
+        if (group.id === 'global') {
+          badgeColor = 'var(--green)';
+          badgeText = 'Global';
+        }
+        html += '<details class="' + groupClass + '" open style="background:var(--panel2); border:1px solid var(--border); border-radius:8px; margin-bottom:12px; overflow:hidden">';
+        html += '<summary style="display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); cursor:pointer; list-style:none; user-select:none">';
+        html += '<span class="details-arrow" style="font-size:10px; transition:transform 0.15s; display:inline-block; color:var(--muted)">▼</span>';
+        html += '<input type="checkbox" class="import-rule-group-checkbox" data-group-id="' + group.id + '"' + (allAlreadyImported ? '' : ' checked') + ' onclick="event.stopPropagation(); window.toggleGroupCheck(this, \'' + group.id + '\')" style="width:15px; height:15px; accent-color:var(--green); cursor:pointer">';
+        html += '<span style="font-size:13px; font-weight:600; flex:1; display:flex; align-items:center; gap:8px">' +
+                group.name +
+                ' <span style="font-size:10px; font-weight:normal; background:rgba(255,255,255,0.06); padding:2px 6px; border-radius:10px; color:var(--muted)">' + group.files.length + ' file' + (group.files.length > 1 ? 's' : '') + '</span>' +
+                '</span>';
+        html += '<span style="font-size:11px; font-weight:600; color:' + badgeColor + '; background:rgba(255,255,255,0.04); border:1px solid ' + badgeColor + '33; padding:1px 6px; border-radius:4px">' + badgeText + '</span>';
+        html += '</summary>';
+        html += '<div style="padding:14px; display:flex; flex-direction:column; gap:12px">';
+        group.files.forEach(function(f) {
+          var badge = f.alreadyImported ? ' <span style="color:var(--muted);font-size:11px">(already imported)</span>' : '';
+          var shortFilename = f.filename;
+          // Shorten filename if it is inside the group
+          if (group.isSkill) {
+            var prefix = '.agent/skills/' + group.id.split(':')[1] + '/';
+            if (f.filename.startsWith(prefix)) {
+              shortFilename = f.filename.substring(prefix.length);
+            }
+          } else if (group.id !== 'global' && group.id.startsWith('dir:')) {
+            var prefix = group.id.substring(4) + '/';
+            if (f.filename.startsWith(prefix)) {
+              shortFilename = f.filename.substring(prefix.length);
+            }
+          }
+          html += '<label style="display:flex;align-items:flex-start;gap:10px;cursor:pointer">';
+          html += '<input type="checkbox" class="import-rule-file" data-path="' + f.absolutePath + '" data-group-id="' + group.id + '"' + (f.alreadyImported ? '' : ' checked') + ' onchange="window.updateGroupCheckboxState(\'' + group.id + '\')" style="margin-top:3px; width:14px; height:14px; accent-color:var(--green)">';
+          html += '<div style="flex:1">';
+          html += '<div style="font-size:13px;font-weight:500;color:var(--text)">' + shortFilename + badge + '</div>';
+          html += '<div style="font-size:11px;color:var(--muted)">' + f.label + ' · ' + (f.size / 1024).toFixed(1) + 'KB</div>';
+          html += '<div style="font-size:11px;color:var(--muted);margin-top:4px;padding:6px 10px;background:var(--panel);border:1px solid var(--border);border-radius:4px;font-family:monospace;white-space:pre-wrap;word-break:break-all;max-height:80px;overflow-y:auto">' + f.preview.slice(0, 150).replace(/</g, '&lt;') + '…</div>';
+          html += '</div>';
+          html += '</label>';
+        });
+        html += '</div>';
+        html += '</details>';
+      });
+      html += '<button class="btn btn-primary" style="font-size:12px;padding:6px 14px;margin-top:6px" onclick="importSelectedRules()">📥 Import Selected Rules &amp; Skills</button>';
+      listEl.innerHTML = html;
+      // Initialize indeterminate state of parent checkboxes
+      groupOrder.forEach(function(groupId) {
+        window.updateGroupCheckboxState(groupId);
+      });
+    })
+    .catch(function(e) { resultEl.textContent = '❌ ' + e.message; });
+  };
+  // Toggle group checkboxes helper
+  window.toggleGroupCheck = function(cb, groupId) {
+    var checked = cb.checked;
+    var items = document.querySelectorAll('.import-rule-file[data-group-id="' + groupId + '"]');
+    items.forEach(function(item) {
+      item.checked = checked;
+    });
+  };
+  // Update group parent checkbox state helper (supporting intermediate state)
+  window.updateGroupCheckboxState = function(groupId) {
+    var groupCb = document.querySelector('.import-rule-group-checkbox[data-group-id="' + groupId + '"]');
+    if (!groupCb) return;
+    var items = document.querySelectorAll('.import-rule-file[data-group-id="' + groupId + '"]');
+    var allChecked = true;
+    var noneChecked = true;
+    items.forEach(function(item) {
+      if (item.checked) noneChecked = false;
+      else allChecked = false;
+    });
+    groupCb.checked = allChecked;
+    groupCb.indeterminate = (!allChecked && !noneChecked);
+  };
+  // Import selected rule files into the vault
+  window.importSelectedRules = function() {
+    var resultEl = document.getElementById('import-rules-result');
+    var selected = [];
+    document.querySelectorAll('.import-rule-file:checked').forEach(function(cb) { selected.push(cb.dataset.path); });
+    if (!selected.length) { resultEl.textContent = 'No files selected.'; return; }
+    resultEl.textContent = 'Importing ' + selected.length + ' file(s)...';
+    fetch('/api/import/rules', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ files: selected })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      var lines = [];
+      (data.imported || []).forEach(function(f) { lines.push('✅ Imported: ' + f.title); });
+      (data.skipped  || []).forEach(function(f) { lines.push('⚪ Skipped: ' + (f.filename || f.slug) + ' (' + (f.reason || '') + ')'); });
+      (data.failed   || []).forEach(function(f) { lines.push('❌ Failed: '  + (f.filename || f.slug) + ' — ' + (f.error || '')); });
+      resultEl.innerHTML = lines.join('<br>');
+      if ((data.imported || []).length > 0) {
+        resultEl.innerHTML += '<br><span style="color:var(--muted)">💡 Run <strong>Recompile Surface</strong> or call POST /api/vault/compile to update INSTRUCTIONS.md.</span>';
+      }
+    })
+    .catch(function(e) { resultEl.textContent = '❌ ' + e.message; });
+  };
+  // Connect all selected IDEs
+  window.connectSelectedIDEs = function() {
+    var selected = [];
+    document.querySelectorAll('#ide-grid input[type=checkbox]:checked').forEach(function(cb) {
+      selected.push(cb.value);
+    });
+    var installRelay    = document.getElementById('install-relay').checked;
+    var installObsidian = document.getElementById('install-obsidian') && document.getElementById('install-obsidian').checked;
+    var resultsCard = document.getElementById('connect-results');
+    var logEl = document.getElementById('connect-log');
+    resultsCard.style.display = '';
+    var extras = [];
+    if (installRelay) extras.push('relay');
+    if (installObsidian) extras.push('Obsidian sync');
+    logEl.innerHTML = '<div class="connect-result-line info">Connecting ' + (selected.length || 'no') + ' tools' + (extras.length ? ' + ' + extras.join(' + ') : '') + '...</div>';
+    document.getElementById('btn-connect-ides').disabled = true;
+    document.getElementById('btn-connect-ides').textContent = 'Connecting...';
+    fetch('/api/connect-ides', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ides: selected, installRelay: installRelay, installObsidian: installObsidian, brainUrl: W.apiUrl, token: W.pat })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      logEl.innerHTML = '';
+      (data.results || []).forEach(function(r) {
+        var cls = r.ok ? 'ok' : (r.skipped ? 'info' : 'err');
+        var icon = r.ok ? '✅' : (r.skipped ? '⚪' : '❌');
+        logEl.innerHTML += '<div class="connect-result-line ' + cls + '">' + icon + ' ' + r.label + ': ' + r.message + '</div>';
+      });
+      if (data.obsidianResult) {
+        var oc = data.obsidianResult.ok ? 'ok' : 'err';
+        logEl.innerHTML += '<div class="connect-result-line ' + oc + '">' + (data.obsidianResult.ok ? '✅' : '❌') + ' Obsidian: ' + data.obsidianResult.message + '</div>';
+      }
+      if (data.relayResult) {
+        var rc = data.relayResult.ok ? 'ok' : 'err';
+        logEl.innerHTML += '<div class="connect-result-line ' + rc + '">' + (data.relayResult.ok ? '✅' : '❌') + ' Relay: ' + data.relayResult.message + '</div>';
+      }
+      logEl.innerHTML += '<div class="connect-result-line info" style="margin-top:8px">🔄 Memory will start compiling automatically. Ready!</div>';
+      document.getElementById('btn-connect-ides').textContent = 'Done — Continue →';
+      document.getElementById('btn-connect-ides').disabled = false;
+      document.getElementById('btn-connect-ides').onclick = function() { goPhase(5); };
+    })
+    .catch(function(e) {
+      logEl.innerHTML += '<div class="connect-result-line err">❌ Error: ' + e.message + '</div>';
+      document.getElementById('btn-connect-ides').textContent = 'Retry';
+      document.getElementById('btn-connect-ides').disabled = false;
+    });
+  };
+  // Install CLI agent globally via POST /api/install-cli
+  window.installCliAgent = function(agent, btn) {
+    var originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = 'Installing...';
+    var resultEl = document.getElementById('cli-install-result');
+    resultEl.style.display = 'none';
+    resultEl.textContent = '';
+    fetch('/api/install-cli', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ agent: agent })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      btn.disabled = false;
+      btn.textContent = originalText;
+      resultEl.style.display = '';
+      if (data.ok) {
+        btn.textContent = 'Installed ✓';
+        btn.style.borderColor = 'var(--green)';
+        btn.style.color = 'var(--green)';
+        resultEl.style.color = 'var(--green)';
+        resultEl.textContent = '✅ Success! CLI agent successfully installed on target machine.\n' + (data.output || '');
+      } else {
+        resultEl.style.color = 'var(--red)';
+        resultEl.textContent = '❌ Installation failed: ' + (data.error || 'Unknown error');
+      }
+    })
+    .catch(function(err) {
+      btn.disabled = false;
+      btn.textContent = originalText;
+      resultEl.style.display = '';
+      resultEl.style.color = 'var(--red)';
+      resultEl.textContent = '❌ Request failed: ' + err.message;
+    });
+  };
+  window.runCliAuth = function(agent) {
+    var resultEl = document.getElementById('cli-install-result');
+    resultEl.style.display = '';
+    resultEl.style.color = 'var(--blue)';
+    if (agent === 'claude') {
+      resultEl.textContent = '🔑 Claude Code Authorization:\nTo complete authorization on the Mac Mini, open a terminal on the host machine and run:\n   claude login';
+    } else if (agent === 'antigravity') {
+      resultEl.textContent = '🔑 Google Antigravity Authorization:\nTo authorize Antigravity CLI on the Mac Mini, run:\n   antigravity login';
+    } else if (agent === 'codex') {
+      resultEl.textContent = '🔑 Codex Authorization:\nConfigure your OpenAI credentials by running:\n   codex login';
+    }
+  };
+  // ── Phase 5: API Reference ──
+  function populateApiRef() {
+    var domain = W.domain || 'your-domain.example';
+    var baseUrl = domain === 'localhost' ? 'http://localhost:3000' : ('https://' + domain);
+    var pat = W.pat || '<YOUR-PAT>';
+    setText('example-curl',
+      'curl -s ' + baseUrl + '/v1/chat/completions \\\\\\n' +
+      '  -H "Authorization: Bearer ' + pat + '" \\\\\\n' +
+      '  -H "Content-Type: application/json" \\\\\\n' +
+      '  -d \'{"model":"total-recall","messages":[{"role":"user","content":"hello"}],"stream":false}\'');
+  }
+  // ── Phase 6: Done ──
+  function populateDone() {
+    var domain = W.domain || 'your-domain.example';
+    var baseUrl = domain === 'localhost' ? 'http://localhost:3000' : ('https://' + domain);
+    var apiUrl    = W.apiUrl    || baseUrl + '/v1/chat/completions';
+    var dashUrl   = W.dashUrl   || baseUrl + '/';
+    var healthUrl = W.healthUrl || baseUrl + '/health';
+    document.getElementById('final-api-url').textContent    = apiUrl;
+    document.getElementById('final-dash-url').textContent   = dashUrl;
+    document.getElementById('final-health-url').textContent = healthUrl;
+    document.getElementById('final-api-link').href    = apiUrl;
+    document.getElementById('final-dash-link').href   = dashUrl;
+    document.getElementById('final-health-link').href = healthUrl;
+    // Detect SSH Fallback URL to show warning notice
+    var isSshUrl = apiUrl.includes('vast.ai') || apiUrl.includes(':10120') || (W.vastSshHost && apiUrl.includes(W.vastSshHost));
+    var warningCard = document.getElementById('ssh-fallback-warning');
+    if (warningCard) {
+      if (isSshUrl) {
+        warningCard.style.display = 'block';
+        var hostSpan = document.getElementById('warning-ssh-host');
+        if (hostSpan) {
+          hostSpan.textContent = W.vastSshHost || domain;
+        }
+      } else {
+        warningCard.style.display = 'none';
+      }
+    }
+    // Pre-populate manual override fields with current active values
+    var overrideUrlInput = document.getElementById('override-base-url');
+    var overridePatInput = document.getElementById('override-pat-key');
+    if (overrideUrlInput && !overrideUrlInput.value) {
+      overrideUrlInput.value = getBaseUrl();
+    }
+    if (overridePatInput && !overridePatInput.value) {
+      overridePatInput.value = W.pat;
+    }
+    var donePassInput = document.getElementById('done-dashboard-password');
+    if (donePassInput) {
+      donePassInput.value = W.dashboardPassword || 'totalrecall';
+    }
+    checkHealth();
+  }
+  window.checkHealth = function () {
+    var dot = document.getElementById('health-dot');
+    var status = document.getElementById('health-status');
+    var healthUrl = W.healthUrl || ('https://' + (W.domain || 'localhost') + '/health');
+    dot.className = 'health-dot';
+    status.textContent = 'Checking…';
+    var headers = {};
+    if (W.pat) {
+      headers['Authorization'] = 'Bearer ' + W.pat;
+    }
+    fetch(healthUrl, { headers: headers, signal: AbortSignal.timeout(5000) })
+      .then(function (r) {
+        if (r.ok) {
+          dot.classList.add('ok');
+          status.textContent = 'Brain is healthy ✓';
+        } else {
+          throw new Error('HTTP ' + r.status);
+        }
+      })
+      .catch(function (e) {
+        dot.classList.add('err');
+        status.textContent = 'Health check failed: ' + e.message;
+      });
+  };
+  window.saveManualOverride = function () {
+    var rawUrl = document.getElementById('override-base-url').value.trim();
+    var pat = document.getElementById('override-pat-key').value.trim();
+    var resEl = document.getElementById('override-save-result');
+    if (!resEl) return;
+    if (!rawUrl) {
+      resEl.textContent = '❌ Base URL is required.';
+      resEl.className = 'notice error';
+      resEl.style.display = '';
+      return;
+    }
+    // Ensure absolute protocol
+    var baseUrl = rawUrl;
+    if (!/^https?:\/\//i.test(baseUrl)) {
+      baseUrl = 'http://' + baseUrl;
+    }
+    // Strip trailing slashes
+    baseUrl = baseUrl.replace(/\/+$/, '');
+    var apiUrl = baseUrl + '/v1/chat/completions';
+    var dashUrl = baseUrl + '/';
+    var healthUrl = baseUrl + '/health';
+    saveWizardState({
+      apiUrl: apiUrl,
+      dashUrl: dashUrl,
+      healthUrl: healthUrl,
+      pat: pat
+    });
+    // Re-check Final phase URLs
+    populateDone();
+    resEl.textContent = '⚡ Override saved successfully! Re-checking health...';
+    resEl.className = 'notice info';
+    resEl.style.display = '';
+    // Check health with a callback or timeout to update success/error
+    setTimeout(function() {
+      var headers = {};
+      if (pat) {
+        headers['Authorization'] = 'Bearer ' + pat;
+      }
+      fetch(healthUrl, { headers: headers, signal: AbortSignal.timeout(5000) })
+        .then(function (r) {
+          if (r.ok) {
+            resEl.textContent = '🎉 Connected successfully! Brain is healthy ✓';
+            resEl.className = 'notice ok';
+          } else {
+            resEl.textContent = '⚠️ Saved, but health check returned: HTTP ' + r.status;
+            resEl.className = 'notice warn';
+          }
+        })
+        .catch(function (e) {
+          resEl.textContent = '❌ Saved, but health check failed: ' + e.message;
+          resEl.className = 'notice error';
+        });
+    }, 800);
+  };
+  window.resetWizardSetup = function () {
+    if (!confirm('Are you absolutely sure you want to reset the setup wizard? This will clear all stored wizard configurations and return to Phase 0.')) {
+      return;
+    }
+    fetch('/api/reset-wizard-config', { method: 'POST' })
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        if (data.ok) {
+          // Clear all keys from safeStorage (both localStorage and sessionStorage)
+          try {
+            var keysToClear = [];
+            for (var i = 0; i < localStorage.length; i++) {
+              var key = localStorage.key(i);
+              if (key && key.indexOf('tr_wizard_') === 0) {
+                keysToClear.push(key);
+              }
+            }
+            keysToClear.forEach(function (k) { localStorage.removeItem(k); });
+          } catch(e) {}
+          try {
+            var keysToClearSession = [];
+            for (var i = 0; i < sessionStorage.length; i++) {
+              var key = sessionStorage.key(i);
+              if (key && key.indexOf('tr_wizard_') === 0) {
+                keysToClearSession.push(key);
+              }
+            }
+            keysToClearSession.forEach(function (k) { sessionStorage.removeItem(k); });
+          } catch(e) {}
+          // Reload page to start completely fresh
+          window.location.reload();
+        } else {
+          alert('Error resetting wizard: ' + (data.error || 'Unknown error'));
+        }
+      })
+      .catch(function (e) {
+        alert('Failed to contact server to reset configuration: ' + e.message);
+      });
+  };
+  // ── Phase 7: Settings ──
+  function populateSettings() {
+    // Load current key values (masked) and usage stats
+    fetch('/api/get-search-config')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        // Show placeholder if key exists, empty if not — never show actual key
+        if (data.hasTavily)  document.getElementById('s-tavily-key').placeholder  = 'tvly-\u2026\u2026 (key set — enter new value to change)';
+        if (data.hasBrave)   document.getElementById('s-brave-key').placeholder   = 'BSA\u2026\u2026 (key set — enter new value to change)';
+        if (data.hasExa)     document.getElementById('s-exa-key').placeholder     = '\u2026\u2026 (key set — enter new value to change)';
+        if (data.hasSerper)  document.getElementById('s-serper-key').placeholder  = '\u2026\u2026 (key set — enter new value to change)';
+        document.getElementById('s-daily-limit').value = data.dailyLimit ?? 50;
+      })
+      .catch(function() { /* config not saved yet — defaults stay */ });
+    fetch('/api/get-search-usage')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        document.getElementById('settings-usage-count').textContent     = data.today;
+        document.getElementById('settings-usage-limit').textContent     = data.limit === 'unlimited' ? '\u221e' : data.limit;
+        document.getElementById('settings-usage-remaining').textContent = data.remaining === 'unlimited' ? 'unlimited' : data.remaining;
+      })
+      .catch(function() {});
+  }
+  window.saveSettings = function() {
+    var tavilyKey  = (document.getElementById('s-tavily-key').value  || '').trim();
+    var braveKey   = (document.getElementById('s-brave-key').value   || '').trim();
+    var exaKey     = (document.getElementById('s-exa-key').value     || '').trim();
+    var serperKey  = (document.getElementById('s-serper-key').value  || '').trim();
+    var dailyLimit = parseInt(document.getElementById('s-daily-limit').value, 10) || 0;
+    var resultEl   = document.getElementById('settings-save-result');
+    resultEl.style.display = '';
+    resultEl.className = 'notice';
+    resultEl.textContent = 'Saving\u2026';
+    fetch('/api/save-search-config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tavilyKey: tavilyKey, braveKey: braveKey, exaKey: exaKey, serperKey: serperKey, dailyLimit: dailyLimit, mergeExisting: true })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        resultEl.className = 'notice success';
+        var src = data.primarySource;
+        resultEl.textContent = '\u2705 Saved. ' + (src === 'DuckDuckGo + Wikipedia (free)' ? 'No paid key set \u2014 using DuckDuckGo + Wikipedia.' : 'Primary source: ' + src + '.');
+        // Clear fields and re-load placeholders
+        ['s-tavily-key','s-brave-key','s-exa-key','s-serper-key'].forEach(function(id) {
+          document.getElementById(id).value = '';
+        });
+        populateSettings();
+      } else {
+        resultEl.className = 'notice warn';
+        resultEl.textContent = '\u26a0\ufe0f ' + (data.error || 'Could not save.');
+      }
+    })
+    .catch(function() {
+      resultEl.className = 'notice warn';
+      resultEl.textContent = '\u26a0\ufe0f Could not reach server.';
+    });
+  };
+  window.resetRemotePassword = function() {
+    var newPass = (document.getElementById('settings-new-password').value || '').trim();
+    var resultEl = document.getElementById('settings-password-result');
+    if (!newPass || newPass.length < 8) {
+      alert('Password must be at least 8 characters long.');
+      return;
+    }
+    resultEl.style.display = '';
+    resultEl.className = 'notice';
+    resultEl.textContent = 'Updating remote password…';
+    fetch('/api/reset-remote-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ password: newPass })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        resultEl.className = 'notice success';
+        resultEl.textContent = '✅ Success! Remote dashboard password reset and configured. You will be forced to change it upon your next login.';
+        document.getElementById('settings-new-password').value = '';
+        // Also update local state
+        safeStorage.setItem('tr_wizard_cfg-dashboard-password', newPass);
+        W.dashboardPassword = newPass;
+        // Also update Phase 1 password field
+        var inputEl = document.getElementById('cfg-dashboard-password');
+        if (inputEl) {
+          inputEl.value = newPass;
+        }
+      } else {
+        resultEl.className = 'notice warn';
+        resultEl.textContent = '⚠️ ' + (data.error || 'Could not update password.');
+      }
+    })
+    .catch(function(e) {
+      resultEl.className = 'notice warn';
+      resultEl.textContent = '⚠️ Connection error. Is the setup server running?';
+    });
+  };
+  window.toggleShow = function(id) {
+    var el = document.getElementById(id);
+    var btn = el.nextElementSibling;
+    if (el.type === 'password') {
+      el.type = 'text';
+      btn.textContent = 'Hide';
+    } else {
+      el.type = 'password';
+      btn.textContent = 'Show';
+    }
+  };
+  // ── Tabs ──
+  window.openTab = function (id) {
+    document.querySelectorAll('.tab-pane').forEach(function (p) { p.classList.remove('active'); });
+    document.querySelectorAll('.tab-btn').forEach(function (b) { b.classList.remove('active'); });
+    document.getElementById(id).classList.add('active');
+    event.target.classList.add('active');
+  };
+  // ── Code helpers ──
+  function setText(id, text) {
+    var el = document.getElementById(id);
+    if (!el) return;
+    var btn = el.querySelector('.copy-btn');
+    el.textContent = text;
+    if (btn) el.appendChild(btn);
+  }
+  function setCode(id, text) { setText(id, text); }
+  window.copyCode = function (btn) {
+    var block = btn.closest('.code-block');
+    var text = block.childNodes[0].textContent || block.textContent;
+    navigator.clipboard.writeText(text.trim()).then(function () {
+      var orig = btn.textContent;
+      btn.textContent = '✓ Copied!';
+      btn.classList.add('copied');
+      setTimeout(function () {
+        btn.textContent = orig;
+        btn.classList.remove('copied');
+      }, 1500);
+    }).catch(function () {});
+  };
+  // ── Persist & Restore Inputs ──
+  function initPersistence() {
+    var textInputs = [
+      'cfg-domain',
+      'cfg-cloudflare-token',
+      'cfg-localnet-host',
+      'cfg-localnet-user',
+      'cfg-vastai-key',
+      'cfg-github-token',
+      'cfg-cloud-token',
+      'cfg-cloud-provider',
+      'cfg-cloud-region'
+    ];
+    var selectInputs = [
+    ];
+    // 1. Initial restore from browser safeStorage (extremely fast)
+    var initialKey = null;
+    textInputs.forEach(function (id) {
+      var el = document.getElementById(id);
+      if (!el) return;
+      var saved = safeStorage.getItem('tr_wizard_' + id);
+      if (saved !== null) {
+        el.value = saved;
+        if (id === 'cfg-vastai-key') initialKey = saved;
+        if (id === 'cfg-dashboard-password') W.dashboardPassword = saved;
+      }
+    });
+    selectInputs.forEach(function (id) {
+      var el = document.getElementById(id);
+      if (!el) return;
+      var saved = safeStorage.getItem('tr_wizard_' + id);
+      if (saved !== null) {
+        el.value = saved;
+      }
+    });
+    if (initialKey) {
+      setTimeout(function () {
+        window.scanVastAIInstances();
+      }, 200);
+    }
+    var savedTarget = safeStorage.getItem('tr_wizard_deploy_target');
+    if (savedTarget) {
+      var targetRadio = document.querySelector('#deploy-target input[value="' + savedTarget + '"]');
+      if (targetRadio) {
+        targetRadio.checked = true;
+        targetRadio.dispatchEvent(new Event('change'));
+      }
+    }
+    var savedHttps = safeStorage.getItem('tr_wizard_https_method');
+    if (savedHttps) {
+      var httpsRadio = document.querySelector('input[name="https-method"][value="' + savedHttps + '"]');
+      if (httpsRadio) {
+        httpsRadio.checked = true;
+        httpsRadio.dispatchEvent(new Event('change'));
+      }
+    }
+    // Restore W state from browser storage
+    var stateKeys = ['phase', 'domain', 'pat', 'apiUrl', 'dashUrl', 'healthUrl', 'deployTarget'];
+    stateKeys.forEach(function (k) {
+      var saved = safeStorage.getItem('tr_wizard_state_' + k);
+      if (saved !== null && saved !== undefined) {
+        if (k === 'phase') {
+          W.phase = parseInt(saved, 10) || 0;
+        } else {
+          W[k] = saved;
+        }
+      }
+    });
+    syncUIFromWizardState();
+    if (W.phase > 0) {
+      goPhase(W.phase);
+    }
+    // 2. Fetch persistent configuration from server disk to restore everything securely (e.g. for incognito/private tabs)
+    fetch('/api/get-wizard-config')
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        var serverKey = null;
+        textInputs.forEach(function (id) {
+          var el = document.getElementById(id);
+          if (el && data[id] !== undefined && data[id] !== null) {
+            el.value = data[id];
+            if (id === 'cfg-vastai-key') serverKey = data[id];
+            if (id === 'cfg-dashboard-password') W.dashboardPassword = data[id];
+            // Update browser storage to stay in sync
+            safeStorage.setItem('tr_wizard_' + id, data[id]);
+          }
+        });
+        if (serverKey) {
+          setTimeout(function () {
+            window.scanVastAIInstances();
+          }, 200);
+        }
+        if (data.deployTarget) {
+          var targetRadio = document.querySelector('#deploy-target input[value="' + data.deployTarget + '"]');
+          if (targetRadio) {
+            targetRadio.checked = true;
+            targetRadio.dispatchEvent(new Event('change'));
+            safeStorage.setItem('tr_wizard_deploy_target', data.deployTarget);
+          }
+        }
+        if (data.httpsMethod) {
+          var httpsRadio = document.querySelector('input[name="https-method"][value="' + data.httpsMethod + '"]');
+          if (httpsRadio) {
+            httpsRadio.checked = true;
+            httpsRadio.dispatchEvent(new Event('change'));
+            safeStorage.setItem('tr_wizard_https_method', data.httpsMethod);
+          }
+        }
+        // Restore W values from server config disk and sync/navigate if needed
+        var stateUpdated = false;
+        stateKeys.forEach(function (k) {
+          if (data[k] !== undefined && data[k] !== null) {
+            if (k === 'phase') {
+              var p = parseInt(data[k], 10);
+              if (!isNaN(p) && p !== W.phase) {
+                W.phase = p;
+                stateUpdated = true;
+              }
+            } else if (data[k] !== W[k]) {
+              W[k] = data[k];
+              stateUpdated = true;
+            }
+            safeStorage.setItem('tr_wizard_state_' + k, data[k]);
+          }
+        });
+        if (stateUpdated) {
+          syncUIFromWizardState();
+          if (W.phase > 0) {
+            goPhase(W.phase);
+          }
+        }
+      })
+      .catch(function (e) {
+        console.warn('Could not load wizard config from server, falling back to local storage:', e);
+      });
+    // Helper to send individual key/value updates to the server-side disk config
+    function saveToServer(key, val) {
+      var payload = {};
+      payload[key] = val;
+      fetch('/api/save-wizard-config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      }).catch(function (e) { console.error('Error saving wizard config to server:', e); });
+    }
+    // Set up listeners for text inputs to save both locally and on server
+    textInputs.forEach(function (id) {
+      var el = document.getElementById(id);
+      if (!el) return;
+      ['input', 'change', 'blur', 'keyup', 'paste'].forEach(function (evt) {
+        el.addEventListener(evt, function () {
+          safeStorage.setItem('tr_wizard_' + id, el.value);
+          saveToServer(id, el.value);
+        });
+      });
+    });
+    // Set up listeners for radio buttons to save both locally and on server
+    document.querySelectorAll('#deploy-target input[type=radio]').forEach(function (r) {
+      r.addEventListener('change', function () {
+        if (r.checked) {
+          safeStorage.setItem('tr_wizard_deploy_target', r.value);
+          saveToServer('deployTarget', r.value);
+        }
+      });
+    });
+    document.querySelectorAll('input[name="https-method"]').forEach(function (r) {
+      r.addEventListener('change', function () {
+        if (r.checked) {
+          safeStorage.setItem('tr_wizard_https_method', r.value);
+          saveToServer('httpsMethod', r.value);
+        }
+      });
+    });
+    // Restore persistent bar values and auto-reconnect SSE if installation is in progress
+    setTimeout(function () {
+      var savedPct = safeStorage.getItem('tr_wizard_install_pct');
+      var savedMsg = safeStorage.getItem('tr_wizard_install_status_msg');
+      var savedType = safeStorage.getItem('tr_wizard_install_status_type');
+      if (savedPct !== null && savedMsg !== null && savedType !== null) {
+        updatePersistentBarState(savedType, savedMsg, parseInt(savedPct, 10));
+      }
+      syncPersistentBarVisibility();
+      // Automatically reconnect SSE if phase is between 2 and 5 OR if safeStorage indicates install is active
+      var isInstallActive = safeStorage.getItem('tr_wizard_install_active') === 'true';
+      if ((W.phase >= 2 && W.phase < 6) || isInstallActive) {
+        startSSE();
+      }
+    }, 50);
+  }
+    // 3. Make sidebar navigation items clickable
+    document.querySelectorAll('#step-nav li').forEach(function (li) {
+      var phase = parseInt(li.getAttribute('data-phase'), 10);
+      if (!isNaN(phase)) {
+        li.style.cursor = 'pointer';
+        li.addEventListener('click', function () {
+          goPhase(phase);
+        });
+      }
+    });
+    // Run persistence initialization
+    initPersistence();
+  }());
+</script>
+<!-- Floating Persistent Status Bar -->
+<div id="persistent-install-bar" class="persistent-install-bar">
+  <div class="pbar-header">
+    <div class="pbar-title">
+      <div class="pbar-spinner"></div>
+      <span id="pbar-title-text">Installing...</span>
+    </div>
+    <a class="pbar-details-link" onclick="goPhase(2); return false;">View Details</a>
+  </div>
+  <div class="pbar-track">
+    <div class="pbar-fill"></div>
+  </div>
+  <div class="pbar-status-text">Connecting to VM...</div>
+  <div class="pbar-latest-log">Waiting for logs...</div>
+</div>
+</body>