@anmol-srv/sigil 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anmol-srv/sigil",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "Local-first memory infrastructure for AI coding agents. One brain shared across Claude Code, Codex CLI, Cursor, Kiro, Continue, Cline, Windsurf, or any MCP client. Organized in pluggable pods, stored in your own Postgres. No cloud, no telemetry. Auto-captured from Claude Code via hooks; surfaced everywhere else as a 9-tool MCP server.",
   "bin": {

package/src/gui/web/api.js

@@ -0,0 +1,37 @@
+/**
+ * Central RPC client — the one door from the GUI to the daemon. Mirrors the
+ * cohort-live-web axios-wrapper convention: a single place that adds context
+ * and turns a structured daemon error ({code,message,hint}) into a toast.
+ *
+ * Pass { quiet: true } to suppress the auto-toast (e.g. when a caller renders
+ * the error inline). The thrown Error carries .code/.hint for callers.
+ */
+import { toast } from './toast.js';
+
+export async function rpc(method, params = {}, { quiet = false } = {}) {
+  let body;
+  try {
+    const res = await fetch('/api/v1/rpc', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin',
+      body: JSON.stringify({ method, params }),
+    });
+    body = await res.json();
+  } catch {
+    const e = {
+      code: 'NETWORK',
+      message: 'Could not reach the Sigil daemon.',
+      hint: 'Is it running? Try `sigil daemon status`.',
+    };
+    if (!quiet) toast({ variant: 'error', message: e.message, hint: e.hint, code: e.code });
+    throw Object.assign(new Error(e.message), e);
+  }
+
+  if (!body || body.ok !== true) {
+    const e = body?.error || { code: 'UNKNOWN', message: 'request failed' };
+    if (!quiet) toast({ variant: 'error', message: e.message, hint: e.hint, code: e.code });
+    throw Object.assign(new Error(e.message || 'request failed'), e);
+  }
+  return body.data;
+}

package/src/gui/web/app.css

@@ -5,45 +5,45 @@
    ════════════════════════════════════════════════════════════════════════ */
 
 :root {
-  /* ── Color tokens (OKLCH-style flat dark) ──────────────────────────── */
-  --bg-canvas:      #07080a;          /* page background */
-  --bg-surface:     #0f1115;          /* card / panel */
-  --bg-surface-2:   #161920;          /* nested panel / hover */
-  --bg-surface-3:   #1d2129;          /* tertiary */
-  --bg-overlay:     rgba(7,8,10,0.78);
-
-  --fg:             #e8eaee;
-  --fg-2:           #b6bcc7;
-  --fg-3:           #828893;
-  --fg-4:           #565b66;
-
-  --border:         #1f2229;
-  --border-2:       #2c3038;
-  --border-strong:  #3a3f49;
-
-  --accent:         #5e8cff;
-  --accent-2:       #466ce0;
-  --accent-fg:      #ffffff;
-
-  --ok:             #4ec46c;
-  --ok-bg:          rgba(78,196,108,0.10);
-  --warn:           #e8a94a;
-  --warn-bg:        rgba(232,169,74,0.10);
-  --err:            #e26464;
-  --err-bg:         rgba(226,100,100,0.10);
-  --info-bg:        rgba(94,140,255,0.10);
-
-  /* ── Spacing scale (multiples of 4px) ──────────────────────────────── */
-  --s-1: 4px;
-  --s-2: 8px;
-  --s-3: 12px;
-  --s-4: 16px;
-  --s-5: 24px;
-  --s-6: 32px;
-  --s-7: 48px;
-  --s-8: 64px;
-
-  /* ── Type scale ────────────────────────────────────────────────────── */
+  /* ── Re-skinned onto the Sigil design system ───────────────────────────
+     design/colors_and_type.css (linked BEFORE this file) owns the brand:
+     palette, Geist/Geist Mono type, 4px spacing, sharp geometry. Here we
+     re-point this dashboard's local token names at those design tokens, so
+     every existing rule adopts the brand with no markup churn.
+
+     Names that ALSO exist in the design tokens (--fg-2/3/4, --border-2,
+     --border-strong, --ok, --warn, --font-mono, --focus-ring) are deliberately
+     NOT redefined here — the design values flow through unchanged. */
+
+  /* surfaces (app-local aliases → design surfaces) */
+  --bg-canvas:    var(--bg-1);
+  --bg-surface:   var(--surface-1);
+  --bg-surface-2: var(--surface-2);
+  --bg-surface-3: var(--surface-3);
+  --bg-overlay:   rgba(8, 9, 11, 0.78);
+
+  /* text + borders */
+  --fg:           var(--fg-1);
+  --border:       var(--border-1);
+
+  /* brand / accent — the only chromatic UI color is brand blue */
+  --accent:       var(--brand);
+  --accent-2:     var(--brand-deep);
+  --accent-fg:    #ffffff;
+
+  /* status: foreground --ok/--warn come from design tokens; backgrounds map
+     to the design's restrained tints (used only as small dot/row washes) */
+  --ok-bg:        var(--ok-tint);
+  --warn-bg:      var(--warn-tint);
+  --err:          var(--danger);
+  --err-bg:       var(--danger-tint);
+  --info-bg:      var(--brand-tint);
+
+  /* spacing → design 4px grid */
+  --s-1: var(--sp-1); --s-2: var(--sp-2); --s-3: var(--sp-3); --s-4: var(--sp-4);
+  --s-5: var(--sp-5); --s-6: var(--sp-6); --s-7: var(--sp-7); --s-8: var(--sp-8);
+
+  /* type scale (px; hierarchy preserved) */
   --t-xs:   11px;
   --t-sm:   12px;
   --t-base: 13px;
@@ -55,21 +55,19 @@
   --lh:     1.5;
   --lh-tight: 1.25;
 
-  /* ── Fonts ─────────────────────────────────────────────────────────── */
-  --font-ui:   ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
-               system-ui, "Segoe UI", Roboto, sans-serif;
-  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
+  /* fonts → Geist (UI) / Geist Mono (data). --font-mono flows from design. */
+  --font-ui: var(--font-sans);
 
-  /* ── Layout ────────────────────────────────────────────────────────── */
-  --container:   1200px;
-  --sidebar:     232px;
-  --header-h:    52px;
-
-  /* ── Misc ──────────────────────────────────────────────────────────── */
-  --focus-ring: 0 0 0 2px var(--accent);
+  /* layout — header height matches the design's 64px top bar */
+  --container: 1200px;
+  --sidebar:   232px;
+  --header-h:  var(--nav-h);
 }
 
 * { box-sizing: border-box; }
+/* `hidden` must win over component display rules (e.g. .provider-card flex),
+   so JS-toggled cards/panes (Docker mode when unavailable) actually hide. */
+[hidden] { display: none !important; }
 html, body { margin: 0; height: 100%; }
 body {
   background: var(--bg-canvas);
@@ -881,3 +879,69 @@ footer .footer-inner {
 .flex-row { display: flex; align-items: center; gap: var(--s-3); }
 .text-sm { font-size: var(--t-sm); }
 .text-xs { font-size: var(--t-xs); }
+
+/* ════════════════════════════════════════════════════════════════════════
+   Design-system components (Phase 7/8) — toasts, connector cards, DB flow.
+   All sharp-edged, hairline-bordered, status as a 7px square + word.
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* ── Toasts ─────────────────────────────────────────────────────────────── */
+.toast-stack {
+  position: fixed; top: var(--s-4); right: var(--s-4); z-index: 100;
+  display: flex; flex-direction: column; gap: var(--s-2); max-width: 400px;
+}
+.toast {
+  display: flex; gap: var(--s-3); align-items: flex-start;
+  background: var(--surface-1); border: 1px solid var(--border-2);
+  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-pop);
+}
+.toast-sq { width: 7px; height: 7px; margin-top: 6px; flex: none; background: var(--fg-3); }
+.toast-error .toast-sq { background: var(--danger); }
+.toast-success .toast-sq { background: var(--ok); }
+.toast-info .toast-sq { background: var(--brand); }
+.toast-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
+.toast-msg { font-size: var(--t-base); color: var(--fg-1); line-height: 1.4; }
+.toast-hint { font-size: var(--t-sm); color: var(--fg-3); line-height: 1.4; }
+.toast-code {
+  align-self: flex-start; margin-top: 2px; font-family: var(--font-mono);
+  font-size: var(--t-xs); color: var(--fg-4); border: 1px solid var(--border-2);
+  padding: 1px 6px; border-radius: var(--radius-1);
+}
+.toast-x { background: none; border: none; color: var(--fg-4); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
+.toast-x:hover { color: var(--fg-2); }
+
+/* ── Connector cards (click-to-connect) ─────────────────────────────────── */
+.connector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
+.connector-card {
+  display: flex; flex-direction: column; gap: var(--s-2);
+  border: 1px solid var(--border-2); background: var(--surface-1);
+  padding: var(--s-4); border-radius: var(--radius-0);
+}
+.connector-card .cc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
+.connector-card .cc-name { font-size: var(--t-md); font-weight: var(--w-semibold); color: var(--fg-1); }
+.connector-card .cc-hint { font-size: var(--t-sm); color: var(--fg-3); line-height: 1.45; }
+.connector-card.unavailable { opacity: 0.55; }
+.connector-card .cc-actions { margin-top: var(--s-2); }
+
+/* status square + word (shared) */
+.status-dot { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); font-weight: 500; }
+.status-dot .sq { width: 7px; height: 7px; flex: none; background: var(--fg-3); }
+.status-dot.ok { color: var(--ok); } .status-dot.ok .sq { background: var(--ok); }
+.status-dot.warn { color: var(--warn); } .status-dot.warn .sq { background: var(--warn); }
+.status-dot.danger { color: var(--danger); } .status-dot.danger .sq { background: var(--danger); }
+.status-dot.muted { color: var(--fg-3); } .status-dot.muted .sq { background: var(--fg-4); }
+
+/* ── DB guided flow (linear status rows, replaces button-toggling) ──────── */
+.db-flow { border: 1px solid var(--border-2); background: var(--surface-1); margin-top: var(--s-4); }
+.db-flow-row {
+  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: var(--s-3);
+  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-1);
+}
+.db-flow-row:last-child { border-bottom: none; }
+.db-flow-row .step-sq { width: 8px; height: 8px; background: var(--fg-4); justify-self: center; }
+.db-flow-row.active .step-sq { background: var(--brand); }
+.db-flow-row.done .step-sq { background: var(--ok); }
+.db-flow-row.error .step-sq { background: var(--danger); }
+.db-flow-row .step-label { font-size: var(--t-base); color: var(--fg-2); }
+.db-flow-row.done .step-label, .db-flow-row.active .step-label { color: var(--fg-1); }
+.db-flow-row .step-detail { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-3); }

package/src/gui/web/app.js

@@ -1,7 +1,17 @@
 // Sigil GUI — vanilla JS. Onboarding wizard + dashboard.
+import { toast } from './toast.js';
+import { connectorCard, dbFlowRow, setFlowRow } from './components.js';
+
 const $  = (sel, root = document) => root.querySelector(sel);
 const $$ = (sel, root = document) => root.querySelectorAll(sel);
 
+// Onboarding machine step (SCREAMING_SNAKE) → wizard section id.
+const MACHINE_TO_STEP = { CONNECTORS: 'connectors', PROVIDER: 'llm', EMBEDDING: 'embedding', DATABASE: 'database', FINISH: 'finish' };
+async function persistStep(step, status, data = {}) {
+  try { await rpc('onboardingAdvance', { step, status, data }); }
+  catch (err) { /* non-fatal: state persistence is best-effort */ void err; }
+}
+
 // ── RPC ──────────────────────────────────────────────────────────────
 async function rpc(method, params = {}) {
   const res = await fetch('/api/v1/rpc', {
@@ -12,7 +22,10 @@ async function rpc(method, params = {}) {
   });
   if (!res.ok) throw new Error(`HTTP ${res.status}`);
   const body = await res.json();
-  if (!body.ok) throw new Error(body.error?.message || 'rpc error');
+  if (!body.ok) {
+    const e = body.error || {};
+    throw Object.assign(new Error(e.message || 'rpc error'), { code: e.code, hint: e.hint });
+  }
   return body.data;
 }
 
@@ -45,27 +58,27 @@ async function copyToClipboard(text) {
 // ════════════════════════════════════════════════════════════════════
 // ONBOARDING WIZARD
 // ════════════════════════════════════════════════════════════════════
-const wizardState = { step: 'welcome', llmProvider: null, embProvider: null, llmProviders: [], embProviders: [] };
+const wizardState = { step: 'connectors', llmProvider: null, embProvider: null, llmProviders: [], embProviders: [], connectorsLoaded: false, dbInit: false, connectedCount: 0 };
+
+const STEP_ORDER = ['connectors', 'llm', 'embedding', 'database', 'finish'];
 
 function setOnbStep(stepId) {
   wizardState.step = stepId;
-  // Update step list state — done/active/future
-  const order = ['welcome', 'database', 'llm', 'embedding', 'finish'];
-  const idx = order.indexOf(stepId);
+  const idx = STEP_ORDER.indexOf(stepId);
   $$('.onboarding-step').forEach((el) => {
-    const i = order.indexOf(el.dataset.obStep);
+    const i = STEP_ORDER.indexOf(el.dataset.obStep);
     el.classList.remove('active', 'done', 'future');
     if (i < idx) el.classList.add('done');
     else if (i === idx) el.classList.add('active');
     else el.classList.add('future');
   });
-  // Show only the active step
   $$('.wizard-step').forEach((el) => el.classList.toggle('active', el.dataset.step === stepId));
-  // Lazy-fetch provider lists when entering those steps
+  // Lazy-fetch per-step data when first entering a step.
+  if (stepId === 'connectors' && !wizardState.connectorsLoaded) loadConnectors();
   if (stepId === 'llm' && !wizardState.llmProviders.length) loadLlmProviders();
   if (stepId === 'embedding' && !wizardState.embProviders.length) loadEmbeddingProviders();
+  if (stepId === 'database' && !wizardState.dbInit) initDbStep();
   if (stepId === 'finish') renderFinish();
-  // Scroll content to top
   document.querySelector('.onboarding-content')?.scrollTo(0, 0);
 }
 
@@ -77,37 +90,96 @@ async function loadOnboardingState() {
       return;
     }
     $('#onboarding').hidden = false;
-    // Pre-fill DB step's "next" enabled if already done
-    if (state.steps.database.done) {
-      $('#ob-db-next').disabled = false;
-    }
-    if (state.steps.llm.done) {
-      $('#ob-llm-next').disabled = false;
-    }
-    if (state.steps.embedding.done) {
-      $('#ob-emb-next').disabled = false;
-    }
-  } catch (err) {
-    // Could not reach daemon — show welcome anyway
+    if (state.steps.database.done) $('#ob-db-next').disabled = false;
+    if (state.steps.llm.done) $('#ob-llm-next').disabled = false;
+    if (state.steps.embedding.done) $('#ob-emb-next').disabled = false;
+    // Resume at the machine's current step (refresh mid-wizard → same place).
+    const resume = MACHINE_TO_STEP[state.machine?.currentStep];
+    if (resume && resume !== 'connectors') setOnbStep(resume);
+    else setOnbStep('connectors');
+  } catch {
+    // Could not reach daemon — show the first step anyway.
     $('#onboarding').hidden = false;
   }
 }
 
-// ── DB step ──────────────────────────────────────────────────────────
+// ── Connectors step ──────────────────────────────────────────────────
+async function loadConnectors() {
+  wizardState.connectorsLoaded = true;
+  const host = $('#ob-connectors');
+  try {
+    const { connectors } = await rpc('listConnectors');
+    wizardState.connectedCount = connectors.filter((c) => c.status === 'connected').length;
+    renderConnectors(connectors);
+  } catch (err) {
+    host.innerHTML = `<div class="muted">could not load connectors: ${escape(err.message)}</div>`;
+  }
+}
+
+function renderConnectors(connectors) {
+  const host = $('#ob-connectors');
+  host.innerHTML = '';
+  connectors.forEach((c) => host.appendChild(connectorCard(c, onConnectorAction)));
+}
+
+async function onConnectorAction(id, action) {
+  const host = $('#ob-connectors');
+  const card = host.querySelector(`[data-id="${id}"]`);
+  if (action === 'disconnect') {
+    try {
+      await rpc('disconnectConnector', { id });
+      toast({ variant: 'success', message: `${id} disconnected` });
+    } catch (err) { toast({ variant: 'error', message: err.message, hint: err.hint, code: err.code }); }
+    return loadConnectors();
+  }
+  // connect / retry → optimistic "connecting" card, then refresh.
+  if (card) card.replaceWith(connectorCard({ id, label: id, hint: '', uiState: 'connecting' }, onConnectorAction));
+  try {
+    await rpc('connectConnector', { id });
+    toast({ variant: 'success', message: `${id} connected` });
+  } catch (err) {
+    toast({ variant: 'error', message: err.message || `could not connect ${id}`, hint: err.hint, code: err.code });
+  }
+  return loadConnectors();
+}
+
+// ── DB step (linear guided flow) ─────────────────────────────────────
+function dbMode() {
+  return $('input[name="db-mode"]:checked')?.value || 'url';
+}
+
 $('#db-mode-cards')?.addEventListener('click', (e) => {
   const card = e.target.closest('[data-db-mode]');
-  if (!card) return;
+  if (!card || card.hidden) return;
   $$('#db-mode-cards .provider-card').forEach((c) => c.classList.remove('selected'));
   card.classList.add('selected');
   card.querySelector('input').checked = true;
-  $('#ob-db-url').style.display    = card.dataset.dbMode === 'url'    ? '' : 'none';
-  $('#ob-db-fields').style.display = card.dataset.dbMode === 'fields' ? '' : 'none';
+  const mode = card.dataset.dbMode;
+  $('#ob-db-url').style.display    = mode === 'url'    ? '' : 'none';
+  $('#ob-db-fields').style.display = mode === 'fields' ? '' : 'none';
+  $('#ob-db-setup').textContent = mode === 'docker' ? 'Create local database' : 'Set up database';
 });
-$('#db-mode-cards .provider-card')?.classList.add('selected');
+
+// Probe Docker once; if present, surface the recommended "Local (automatic)"
+// mode and select it by default. Otherwise leave URL selected.
+async function initDbStep() {
+  wizardState.dbInit = true;
+  try {
+    const d = await rpc('dbDockerAvailable');
+    const note = $('#ob-db-docker-note');
+    if (d.available) {
+      const dockerCard = $('#ob-db-mode-docker');
+      dockerCard.hidden = false;
+      dockerCard.click();
+    } else if (note) {
+      note.hidden = false;
+      note.textContent = `Docker not detected (${d.reason || 'unavailable'}) — use a connection URL or local Postgres.`;
+    }
+  } catch { /* leave URL mode as the default */ }
+}
 
 function obDbParams() {
-  const isUrl = $('input[name="db-mode"]:checked').value === 'url';
-  if (isUrl) return { url: $('#ob-db-url-input').value.trim() };
+  if (dbMode() === 'url') return { url: $('#ob-db-url-input').value.trim() };
   return {
     host: $('#ob-db-host').value.trim(),
     port: Number($('#ob-db-port').value),
@@ -117,78 +189,97 @@ function obDbParams() {
   };
 }
 
-$('#ob-db-test')?.addEventListener('click', async () => {
-  const out = $('#ob-db-result');
-  out.hidden = false;
-  out.className = 'result';
-  out.textContent = 'testing…';
+function dbFlowInit(rows) {
+  const flow = $('#ob-db-flow');
+  flow.hidden = false;
+  flow.innerHTML = '';
+  rows.forEach(([id, label]) => flow.appendChild(dbFlowRow(id, label)));
+  return flow;
+}
+
+$('#ob-db-setup')?.addEventListener('click', async () => {
+  const btn = $('#ob-db-setup');
+  btn.disabled = true;
+  $('#ob-db-next').disabled = true;
+  const mode = dbMode();
   try {
-    const data = await rpc('testDbConnection', obDbParams());
-    out.textContent = JSON.stringify(data, null, 2);
-    out.classList.add(data.ok ? 'ok' : 'err');
-    if (data.ok && !data.pgvector) {
-      $('#ob-db-install-pgv').hidden = false;
-      $('#ob-db-migrate').hidden = true;
-      $('#ob-db-next').disabled = true;
-      out.textContent += '\n\npgvector is not installed yet. Click "Install pgvector".';
-    } else if (data.ok) {
-      $('#ob-db-install-pgv').hidden = true;
-      $('#ob-db-migrate').hidden = false;
-      out.textContent += '\n\npgvector is installed. Click "Run migrations" to finish.';
+    if (mode === 'docker') {
+      await runDockerFlow();
     } else {
-      $('#ob-db-install-pgv').hidden = true;
-      $('#ob-db-migrate').hidden = true;
-      $('#ob-db-next').disabled = true;
+      await runUrlFlow();
     }
-  } catch (err) {
-    out.textContent = `ERROR: ${err.message}`;
-    out.classList.add('err');
+  } finally {
+    btn.disabled = false;
   }
 });
 
-$('#ob-db-install-pgv')?.addEventListener('click', async () => {
-  const out = $('#ob-db-result');
-  out.textContent += '\n\nInstalling pgvector…';
+async function runDockerFlow() {
+  const flow = dbFlowInit([['provision', 'Create pgvector container'], ['migrate', 'Run migrations']]);
+  setFlowRow(flow, 'provision', { phase: 'active', detail: 'pulling image + starting…' });
   try {
-    const data = await rpc('ensurePgvector', obDbParams());
-    if (data.ok && data.installed) {
-      out.textContent += `\n✓ pgvector ${data.version} installed`;
-      $('#ob-db-install-pgv').hidden = true;
-      $('#ob-db-migrate').hidden = false;
-    } else {
-      out.textContent += `\n✗ ${data.error || 'unknown'} (${data.stage})`;
-    }
-  } catch (err) { out.textContent += `\nERROR: ${err.message}`; }
-});
+    const r = await rpc('dbProvisionDocker');
+    setFlowRow(flow, 'provision', { phase: 'done', detail: `${r.container} :${r.port}${r.reused ? ' (reused)' : ''}` });
+    setFlowRow(flow, 'migrate', { phase: 'done', detail: `${r.migrationsRan} migrations · pgvector ✓` });
+    await onDbReady({ pgvector: true, migrationsRan: r.migrationsRan, mode: 'docker' });
+  } catch (err) {
+    setFlowRow(flow, 'provision', { phase: 'error', detail: err.code || 'failed' });
+    toast({ variant: 'error', message: err.message, hint: err.hint, code: err.code });
+  }
+}
 
-$('#ob-db-migrate')?.addEventListener('click', async () => {
-  const out = $('#ob-db-result');
-  out.textContent += '\n\nPersisting connection to ~/.sigil/.env…';
+async function runUrlFlow() {
+  const params = obDbParams();
+  const flow = dbFlowInit([['test', 'Test connection'], ['pgvector', 'Enable pgvector'], ['migrate', 'Run migrations']]);
+  // 1. test
+  setFlowRow(flow, 'test', { phase: 'active', detail: 'connecting…' });
+  let test;
+  try {
+    test = await rpc('testDbConnection', params);
+  } catch (err) {
+    setFlowRow(flow, 'test', { phase: 'error', detail: err.code || 'failed' });
+    return toast({ variant: 'error', message: err.message, hint: err.hint, code: err.code });
+  }
+  if (!test.ok) {
+    setFlowRow(flow, 'test', { phase: 'error', detail: test.code || test.stage || 'failed' });
+    return toast({ variant: 'error', message: test.error || 'connection failed', hint: test.fixHint, code: test.kind });
+  }
+  setFlowRow(flow, 'test', { phase: 'done', detail: `${test.provider} · ${test.connectMs}ms` });
+  // 2. pgvector
+  if (!test.pgvector) {
+    setFlowRow(flow, 'pgvector', { phase: 'active', detail: 'installing…' });
+    try {
+      const pg = await rpc('ensurePgvector', params);
+      if (!pg.ok || !pg.installed) throw Object.assign(new Error(pg.error || 'could not enable pgvector'), { hint: pg.fixHint });
+      setFlowRow(flow, 'pgvector', { phase: 'done', detail: pg.version ? `v${pg.version}` : 'enabled' });
+    } catch (err) {
+      setFlowRow(flow, 'pgvector', { phase: 'error', detail: err.code || 'failed' });
+      return toast({ variant: 'error', message: err.message, hint: err.hint, code: err.code });
+    }
+  } else {
+    setFlowRow(flow, 'pgvector', { phase: 'done', detail: 'already enabled' });
+  }
+  // 3. persist + migrate
+  setFlowRow(flow, 'migrate', { phase: 'active', detail: 'writing env + migrating…' });
   try {
-    const params = obDbParams();
     if (params.url) {
-      await rpc('writeEnv', { patch: {
-        SIGIL_DATABASE_URL: params.url,
-        SIGIL_DB_HOST: null, SIGIL_DB_PORT: null, SIGIL_DB_NAME: null, SIGIL_DB_USER: null, SIGIL_DB_PASSWORD: null,
-      } });
+      await rpc('writeEnv', { patch: { SIGIL_DATABASE_URL: params.url, SIGIL_DB_HOST: null, SIGIL_DB_PORT: null, SIGIL_DB_NAME: null, SIGIL_DB_USER: null, SIGIL_DB_PASSWORD: null } });
     } else {
-      await rpc('writeEnv', { patch: {
-        SIGIL_DB_HOST: params.host, SIGIL_DB_PORT: String(params.port),
-        SIGIL_DB_NAME: params.database, SIGIL_DB_USER: params.user, SIGIL_DB_PASSWORD: params.password,
-        SIGIL_DATABASE_URL: null,
-      } });
+      await rpc('writeEnv', { patch: { SIGIL_DB_HOST: params.host, SIGIL_DB_PORT: String(params.port), SIGIL_DB_NAME: params.database, SIGIL_DB_USER: params.user, SIGIL_DB_PASSWORD: params.password, SIGIL_DATABASE_URL: null } });
     }
-    out.textContent += '\n✓ env written. Running migrations…';
-    // Pass connection params so runMigrations uses a one-shot pool against
-    // the new URL — the daemon's existing pool is still bound to the
-    // pre-onboarding env (localhost:5432 by default).
-    const data = await rpc('runMigrations', params);
-    out.textContent += `\n✓ batch ${data.batchNo}: ${data.ran.length} migrations applied (${data.against})`;
-    $('#ob-db-next').disabled = false;
+    const m = await rpc('runMigrations', params);
+    setFlowRow(flow, 'migrate', { phase: 'done', detail: `batch ${m.batchNo} · ${m.ran.length} applied` });
+    await onDbReady({ pgvector: true, migrationsRan: m.ran.length, mode: dbMode() });
   } catch (err) {
-    out.textContent += `\n✗ ${err.message}`;
+    setFlowRow(flow, 'migrate', { phase: 'error', detail: err.code || 'failed' });
+    toast({ variant: 'error', message: err.message, hint: err.hint, code: err.code });
   }
-});
+}
+
+async function onDbReady(data) {
+  $('#ob-db-next').disabled = false;
+  toast({ variant: 'success', message: 'Database ready.' });
+  await persistStep('DATABASE', 'DONE', data);
+}
 
 // ── LLM provider step ───────────────────────────────────────────────
 async function loadLlmProviders() {
@@ -243,9 +334,11 @@ $('#ob-llm-save')?.addEventListener('click', async () => {
       out.classList.add('ok');
       out.textContent += `\n✓ provider responded: "${test.response}"`;
       $('#ob-llm-next').disabled = false;
+      await persistStep('PROVIDER', 'DONE', { llmProvider: wizardState.llmProvider });
     } else {
       out.classList.add('err');
       out.textContent += `\n✗ test failed: ${test.error}`;
+      toast({ variant: 'error', message: test.error || 'LLM test failed', hint: test.fixHint, code: test.kind });
     }
   } catch (err) {
     out.classList.add('err');
@@ -396,7 +489,10 @@ $('#ob-emb-save')?.addEventListener('click', async () => {
     fields,
     out: $('#ob-emb-result'),
     conflictHost: $('#ob-emb-fields')?.parentElement,
-    onSuccess: () => { $('#ob-emb-next').disabled = false; },
+    onSuccess: () => {
+      $('#ob-emb-next').disabled = false;
+      persistStep('EMBEDDING', 'DONE', { provider: wizardState.embProvider });
+    },
   });
   if (!ok) $('#ob-emb-next').disabled = true;
 });
@@ -416,16 +512,32 @@ async function renderFinish() {
   } catch { /* ignore */ }
 }
 $('#ob-complete')?.addEventListener('click', async () => {
-  try { await rpc('markOnboardingComplete'); }
-  catch { /* ignore */ }
+  const installService = $('#ob-always-up')?.checked === true;
+  try {
+    const r = await rpc('markOnboardingComplete', { installService });
+    if (installService && r && r.serviceInstalled === false) {
+      toast({ variant: 'info', message: 'Could not install the always-up service on this platform.', hint: 'Sigil still auto-starts on first use; retry with `sigil service install`.' });
+    }
+  } catch { /* daemon restarts on complete — expected to drop */ }
   $('#onboarding').hidden = true;
-  refreshHealth();
+  // Daemon is handing off (restart / service). Give it a moment, then refresh.
+  setTimeout(() => refreshHealth(), 1500);
 });
 
 // ── Navigation between wizard steps ──────────────────────────────────
 document.addEventListener('click', (e) => {
   const n = e.target.closest('[data-ob-next]');
-  if (n) { e.preventDefault(); setOnbStep(n.dataset.obNext); return; }
+  if (n) {
+    e.preventDefault();
+    // Persist the step we're leaving (connectors is skippable — DONE if any
+    // tool connected, else SKIPPED). Provider/Embedding/Database persist on
+    // their own success handlers.
+    if (wizardState.step === 'connectors') {
+      persistStep('CONNECTORS', wizardState.connectedCount > 0 ? 'DONE' : 'SKIPPED', {});
+    }
+    setOnbStep(n.dataset.obNext);
+    return;
+  }
   const b = e.target.closest('[data-ob-back]');
   if (b) { e.preventDefault(); setOnbStep(b.dataset.obBack); return; }
 });