stenotype 0.1.1 → 0.3.0

package/dist/dashboard/public/app.js

@@ -0,0 +1,1301 @@
+// ─── State ───────────────────────────────────────────────────────────────────
+const state = {
+  currentView: 'memories',
+  filters: {
+    category: 'all',
+    temperature: 'all',
+    agent_id: 'all',
+    period: 'all',
+    q: '',
+  },
+  showArchived: false,
+  page: 1,
+  limit: 24,
+  total: 0,
+  memories: [],
+  pinned: [],
+  commitments: [],
+  stats: null,
+  settings: null,
+  agents: [],
+  selectedMemory: null,
+  pendingDeleteId: null,
+  loading: false,
+  searchTimer: null,
+};
+
+// ─── DOM refs ────────────────────────────────────────────────────────────────
+const $ = (sel, ctx = document) => ctx.querySelector(sel);
+const $$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)];
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function formatDate(iso) {
+  if (!iso) return '—';
+  try {
+    const d = new Date(iso);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch { return iso; }
+}
+
+function formatDateTime(iso) {
+  if (!iso) return '—';
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString('en-US', {
+      month: 'short', day: 'numeric', year: 'numeric',
+      hour: '2-digit', minute: '2-digit'
+    });
+  } catch { return iso; }
+}
+
+function parseTags(tagsRaw) {
+  if (!tagsRaw) return [];
+  try {
+    const parsed = JSON.parse(tagsRaw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    if (typeof tagsRaw === 'string' && tagsRaw.trim()) {
+      return tagsRaw.split(',').map(t => t.trim()).filter(Boolean);
+    }
+    return [];
+  }
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function showToast(msg, type = '') {
+  const container = $('#toast-container');
+  const toast = document.createElement('div');
+  toast.className = `toast ${type}`;
+  toast.textContent = msg;
+  container.appendChild(toast);
+  setTimeout(() => {
+    toast.style.opacity = '0';
+    toast.style.transform = 'translateY(10px)';
+    toast.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+    setTimeout(() => toast.remove(), 350);
+  }, 2800);
+}
+
+// ─── Temperature lifecycle ────────────────────────────────────────────────────
+function computeLifecycle(m) {
+  const now = Date.now();
+  const created = new Date(m.created_at + 'Z').getTime();
+  const lastAccessed = m.last_accessed_at ? new Date(m.last_accessed_at + 'Z').getTime() : null;
+
+  const daysSinceCreated = (now - created) / 86400000;
+  const daysSinceAccessed = lastAccessed != null ? (now - lastAccessed) / 86400000 : null;
+
+  const isHot = daysSinceCreated < 3 || (daysSinceAccessed != null && daysSinceAccessed < 7);
+  const isWarm = !isHot && (daysSinceCreated < 14 || (daysSinceAccessed != null && daysSinceAccessed < 30));
+
+  if (isHot) {
+    const daysFromCreation = Math.max(0, 3 - daysSinceCreated);
+    const daysFromAccess = daysSinceAccessed != null ? Math.max(0, 7 - daysSinceAccessed) : 0;
+    const daysUntilWarm = Math.max(daysFromCreation, daysFromAccess);
+    return { current: 'hot', next: 'warm', daysUntilNext: Math.ceil(daysUntilWarm) };
+  }
+
+  if (isWarm) {
+    const daysFromCreation = Math.max(0, 14 - daysSinceCreated);
+    const daysFromAccess = daysSinceAccessed != null ? Math.max(0, 30 - daysSinceAccessed) : 0;
+    const daysUntilCold = Math.max(daysFromCreation, daysFromAccess);
+    return { current: 'warm', next: 'cold', daysUntilNext: Math.ceil(daysUntilCold) };
+  }
+
+  const canBeArchived = (m.access_count === 0 || m.access_count == null) && (m.importance <= 0.5);
+  if (canBeArchived) {
+    const daysUntilArchive = Math.max(0, 60 - daysSinceCreated);
+    return {
+      current: 'cold',
+      next: 'archived',
+      daysUntilNext: Math.ceil(daysUntilArchive),
+      atRisk: daysUntilArchive < 14,
+    };
+  }
+
+  return { current: 'cold', next: null, safe: true };
+}
+
+function renderLifecycle(m) {
+  if (!m.is_active) {
+    return `<div class="lifecycle-safe">
+      <span>📦</span>
+      <span>This memory is archived. Restore it to make it active again.</span>
+    </div>`;
+  }
+
+  const lc = computeLifecycle(m);
+  const stages = ['hot', 'warm', 'cold', 'archived'];
+  const currentIdx = stages.indexOf(lc.current);
+
+  const dotColors = { hot: '#EF4444', warm: '#F59E0B', cold: '#60A5FA', archived: '#9CA3AF' };
+  const labels = { hot: 'Hot', warm: 'Warm', cold: 'Cold', archived: 'Archived' };
+
+  const trackHtml = stages.map((s, i) => {
+    const isCurrent = s === lc.current;
+    const isPast = i < currentIdx;
+    const cls = isCurrent ? 'current' : (isPast ? 'inactive' : 'inactive');
+    const hint = isCurrent && lc.next
+      ? (lc.daysUntilNext === 0 ? 'transition imminent' : `→ ${lc.next} in ${lc.daysUntilNext}d`)
+      : '';
+    return `<div class="lifecycle-stage ${cls}">
+      <div class="lifecycle-stage-dot" style="background:${dotColors[s]}"></div>
+      <div class="lifecycle-stage-label">${labels[s]}</div>
+      ${hint ? `<div class="lifecycle-stage-hint">${hint}</div>` : ''}
+    </div>`;
+  }).join('');
+
+  let alertHtml = '';
+  if (lc.next === 'archived') {
+    if (lc.daysUntilNext === 0) {
+      alertHtml = `<div class="lifecycle-warning lifecycle-danger">⚠️ Eligible for auto-archiving now (next maintenance cycle)</div>`;
+    } else if (lc.atRisk) {
+      alertHtml = `<div class="lifecycle-warning">⚠️ At risk — will be archived in ${lc.daysUntilNext} days if not accessed (importance ≤ 50%, access count = 0)</div>`;
+    }
+  } else if (lc.safe) {
+    alertHtml = `<div class="lifecycle-safe">✓ Protected from auto-archiving (access count > 0 or importance > 50%)</div>`;
+  }
+
+  return `<div class="lifecycle-track">${trackHtml}</div>${alertHtml}`;
+}
+
+async function restoreMemory(id) {
+  try {
+    const res = await fetch(`/api/memories/${encodeURIComponent(id)}/restore`, { method: 'PUT' });
+    if (!res.ok) throw new Error('Restore failed');
+    showToast('Memory restored.', 'success');
+    closeModal();
+    state.memories = state.memories.filter(m => m.id !== id);
+    state.total = Math.max(0, state.total - 1);
+    renderMemories();
+    updateLoadMore();
+    loadStats();
+  } catch {
+    showToast('Failed to restore memory.', 'error');
+  }
+}
+
+// ─── Auth check ──────────────────────────────────────────────────────────────
+async function checkAuth() {
+  try {
+    const res = await fetch('/auth/me');
+    const data = await res.json();
+    if (!data.user) {
+      window.location.href = '/login.html';
+      return false;
+    }
+    const nameEl = $('#user-name');
+    if (nameEl) nameEl.textContent = data.user.username;
+    const avatarEl = $('#user-avatar');
+    if (avatarEl) avatarEl.textContent = (data.user.username || 'U')[0].toUpperCase();
+    return true;
+  } catch {
+    window.location.href = '/login.html';
+    return false;
+  }
+}
+
+// ─── API calls ───────────────────────────────────────────────────────────────
+async function fetchStats() {
+  try {
+    const res = await fetch('/api/stats');
+    if (!res.ok) throw new Error('Stats fetch failed');
+    return await res.json();
+  } catch (e) {
+    console.error('fetchStats:', e);
+    return null;
+  }
+}
+
+async function fetchMemories({ page = 1, append = false } = {}) {
+  if (state.loading) return;
+  state.loading = true;
+
+  const container = $('#memories-container');
+  if (!append) {
+    container.innerHTML = `
+      <div class="loading-state">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">Loading memories…</div>
+      </div>`;
+  }
+
+  const params = new URLSearchParams({
+    page,
+    limit: state.limit,
+  });
+  if (state.filters.category !== 'all') params.set('category', state.filters.category);
+  if (state.filters.temperature !== 'all') params.set('temperature', state.filters.temperature);
+  if (state.filters.agent_id !== 'all') params.set('agent_id', state.filters.agent_id);
+  if (state.filters.q) params.set('q', state.filters.q);
+  if (state.showArchived) params.set('archived', 'true');
+  if (state.filters.period !== 'all') {
+    const now = new Date();
+    const days = { today: 0, '7d': 7, '30d': 30, '90d': 90 }[state.filters.period];
+    const from = new Date(now);
+    if (days === 0) {
+      from.setHours(0, 0, 0, 0);
+    } else {
+      from.setDate(from.getDate() - days);
+      from.setHours(0, 0, 0, 0);
+    }
+    params.set('date_from', from.toISOString().slice(0, 19).replace('T', ' '));
+  }
+
+  try {
+    const res = await fetch(`/api/memories?${params}`);
+    if (!res.ok) throw new Error('Failed to load memories');
+    const data = await res.json();
+
+    state.total = data.total;
+    state.page = page;
+
+    if (append) {
+      state.memories = [...state.memories, ...data.memories];
+    } else {
+      state.memories = data.memories;
+    }
+
+    renderMemories(append);
+    updateLoadMore();
+  } catch (e) {
+    console.error('fetchMemories:', e);
+    container.innerHTML = `
+      <div class="empty-state">
+        <div class="empty-icon">⚠️</div>
+        <div class="empty-title">Could not load memories</div>
+        <div class="empty-subtitle">${escapeHtml(e.message)}</div>
+      </div>`;
+  } finally {
+    state.loading = false;
+  }
+}
+
+async function fetchPinned() {
+  try {
+    const res = await fetch('/api/pinned');
+    if (!res.ok) throw new Error('Failed');
+    const data = await res.json();
+    state.pinned = data.pinned || [];
+    renderPinned();
+    const badge = $('#nav-pinned-count');
+    if (badge) badge.textContent = state.pinned.length;
+  } catch (e) {
+    console.error('fetchPinned:', e);
+    $('#pinned-container').innerHTML = `
+      <div class="empty-state">
+        <div class="empty-icon">📌</div>
+        <div class="empty-title">No pinned memories</div>
+        <div class="empty-subtitle">Pinned memories will appear here.</div>
+      </div>`;
+  }
+}
+
+async function fetchCommitments() {
+  try {
+    const res = await fetch('/api/commitments');
+    if (!res.ok) throw new Error('Failed');
+    const data = await res.json();
+    state.commitments = data.commitments || [];
+    renderCommitments();
+    const badge = $('#nav-commitments-count');
+    if (badge) badge.textContent = state.commitments.length;
+  } catch (e) {
+    console.error('fetchCommitments:', e);
+  }
+}
+
+async function softDelete(id) {
+  try {
+    const res = await fetch(`/api/memories/${encodeURIComponent(id)}`, { method: 'DELETE' });
+    if (!res.ok) throw new Error('Delete failed');
+    showToast('Memory deleted.', 'success');
+    closeModal();
+    state.memories = state.memories.filter(m => m.id !== id);
+    state.total = Math.max(0, state.total - 1);
+    renderMemories();
+    updateLoadMore();
+    loadStats();
+  } catch (e) {
+    showToast('Failed to delete memory.', 'error');
+  }
+}
+
+// ─── Render functions ─────────────────────────────────────────────────────────
+function renderMemories(append = false) {
+  const container = $('#memories-container');
+
+  if (state.memories.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state">
+        <div class="empty-icon">🧠</div>
+        <div class="empty-title">No memories found</div>
+        <div class="empty-subtitle">
+          ${state.filters.q
+            ? `No results for "<strong>${escapeHtml(state.filters.q)}</strong>". Try a different search.`
+            : 'No memories match the current filters.'
+          }
+        </div>
+      </div>`;
+    return;
+  }
+
+  if (!append) {
+    container.innerHTML = '<div class="memories-grid" id="memories-grid"></div>';
+  }
+
+  const grid = $('#memories-grid') || (() => {
+    container.innerHTML = '<div class="memories-grid" id="memories-grid"></div>';
+    return $('#memories-grid');
+  })();
+
+  const startIdx = append ? state.memories.length - (state.limit) : 0;
+  const renderSlice = append ? state.memories.slice(startIdx) : state.memories;
+
+  const fragment = document.createDocumentFragment();
+  renderSlice.forEach(m => {
+    const card = createMemoryCard(m);
+    fragment.appendChild(card);
+  });
+  grid.appendChild(fragment);
+}
+
+function createMemoryCard(m) {
+  const el = document.createElement('div');
+  el.className = m.is_active === 0 ? 'memory-card archived' : 'memory-card';
+  el.dataset.id = m.id;
+
+  const tags = parseTags(m.tags);
+  const visibleTags = tags.slice(0, 3);
+  const tagsHtml = visibleTags.length
+    ? `<div class="tags-row">${visibleTags.map(t => `<span class="tag-pill">${escapeHtml(t)}</span>`).join('')}${tags.length > 3 ? `<span class="tag-pill">+${tags.length - 3}</span>` : ''}</div>`
+    : '';
+
+  const conf = m.confidence != null ? Math.round(m.confidence * 100) : null;
+  const imp = m.importance != null ? Math.round(m.importance * 100) : null;
+
+  const category = m.category || 'other';
+  const temp = m.temperature || '';
+
+  const isArchived = m.is_active === 0;
+  el.innerHTML = `
+    <div class="card-top">
+      <span class="cat-badge ${escapeHtml(category)}">${escapeHtml(category)}</span>
+      ${isArchived
+        ? `<span class="temp-dot archived" title="archived"></span>`
+        : temp ? `<span class="temp-dot ${escapeHtml(temp)}" title="${escapeHtml(temp)}"></span>` : ''}
+    </div>
+    ${m.subject ? `<div class="card-subject">${escapeHtml(m.subject)}</div>` : ''}
+    <div class="card-content">${escapeHtml(m.content || '')}</div>
+    ${(conf != null || imp != null) ? `
+    <div class="card-bars">
+      ${conf != null ? `
+      <div class="bar-wrap">
+        <div class="bar-label">Confidence</div>
+        <div class="bar-track"><div class="bar-fill confidence" style="width:${conf}%"></div></div>
+      </div>` : ''}
+      ${imp != null ? `
+      <div class="bar-wrap">
+        <div class="bar-label">Importance</div>
+        <div class="bar-track"><div class="bar-fill importance" style="width:${imp}%"></div></div>
+      </div>` : ''}
+    </div>` : ''}
+    <div class="card-footer">
+      <span class="card-date">${formatDate(m.created_at)}</span>
+      ${m.agent_id ? `<span class="agent-chip">${escapeHtml(m.agent_id)}</span>` : ''}
+    </div>
+    ${tagsHtml}
+  `;
+
+  el.addEventListener('click', () => openModal(m.id));
+  return el;
+}
+
+function renderPinned() {
+  const container = $('#pinned-container');
+  const countLabel = $('#pinned-count-label');
+  if (countLabel) countLabel.textContent = `${state.pinned.length} pinned`;
+
+  if (state.pinned.length === 0) {
+    container.innerHTML = `
+      <div class="empty-state" style="grid-column:1/-1">
+        <div class="empty-icon">📌</div>
+        <div class="empty-title">Nothing pinned yet</div>
+        <div class="empty-subtitle">Memories you pin will appear here for quick access.</div>
+      </div>`;
+    return;
+  }
+
+  container.innerHTML = '';
+  const fragment = document.createDocumentFragment();
+  state.pinned.forEach(p => {
+    const el = document.createElement('div');
+    el.className = 'pinned-card';
+    el.innerHTML = `
+      <div class="pinned-card-top">
+        <span class="pin-icon">📌</span>
+        <span class="pinned-category">${escapeHtml(p.category || 'pinned')}</span>
+        <span class="pinned-date">${formatDate(p.created_at)}</span>
+      </div>
+      <div class="pinned-content">${escapeHtml(p.content || '')}</div>
+      ${p.agent_id ? `<div class="pinned-agent">${escapeHtml(p.agent_id)}</div>` : ''}
+    `;
+    fragment.appendChild(el);
+  });
+  container.appendChild(fragment);
+}
+
+function renderCommitments() {
+  const tbody = $('#commitments-body');
+  const countLabel = $('#commitments-count-label');
+  if (countLabel) countLabel.textContent = `${state.commitments.length} commitments`;
+
+  if (state.commitments.length === 0) {
+    tbody.innerHTML = `
+      <tr>
+        <td colspan="5" style="text-align:center;padding:48px 16px">
+          <div class="empty-state" style="padding:0">
+            <div class="empty-icon" style="font-size:32px">✅</div>
+            <div class="empty-title" style="font-size:17px">No commitments</div>
+            <div class="empty-subtitle">Tracked commitments will appear here.</div>
+          </div>
+        </td>
+      </tr>`;
+    return;
+  }
+
+  tbody.innerHTML = '';
+  const fragment = document.createDocumentFragment();
+  state.commitments.forEach(c => {
+    const tr = document.createElement('tr');
+    const stateKey = (c.state || 'open').replace(/[^a-z_]/g, '');
+    tr.innerHTML = `
+      <td><div class="commitment-text">${escapeHtml(c.commitment || '')}</div></td>
+      <td><span class="state-badge ${escapeHtml(stateKey)}">${escapeHtml(c.state || 'open')}</span></td>
+      <td class="td-source" title="${escapeHtml(c.source || '')}">${escapeHtml(c.source || '—')}</td>
+      <td><span class="agent-chip">${escapeHtml(c.agent_id || '—')}</span></td>
+      <td class="td-date">${formatDate(c.created_at)}</td>
+    `;
+    fragment.appendChild(tr);
+  });
+  tbody.appendChild(fragment);
+}
+
+function updateLoadMore() {
+  const wrap = $('#load-more-wrap');
+  const btn = $('#load-more-btn');
+  const loaded = state.memories.length;
+  const hasMore = loaded < state.total;
+
+  wrap.style.display = hasMore ? 'flex' : 'none';
+  if (btn) {
+    btn.textContent = `Load more (${state.total - loaded} remaining)`;
+    btn.disabled = state.loading;
+  }
+}
+
+// ─── Stats ────────────────────────────────────────────────────────────────────
+async function loadStats() {
+  const stats = await fetchStats();
+  if (!stats) return;
+  state.stats = stats;
+
+  const activeEl = $('#stats-active-count');
+  if (activeEl) activeEl.textContent = stats.active ?? '—';
+
+  const navCount = $('#nav-memories-count');
+  if (navCount) navCount.textContent = stats.active ?? '—';
+
+  const tempMap = {};
+  (stats.byTemperature || []).forEach(row => {
+    tempMap[row.temperature] = row.count;
+  });
+  const hotEl = $('#stats-hot');
+  const warmEl = $('#stats-warm');
+  const coldEl = $('#stats-cold');
+  if (hotEl) hotEl.textContent = tempMap['hot'] ?? 0;
+  if (warmEl) warmEl.textContent = tempMap['warm'] ?? 0;
+  if (coldEl) coldEl.textContent = tempMap['cold'] ?? 0;
+
+  const archivedPillCount = $('#archived-pill-count');
+  if (archivedPillCount && stats.archived != null) {
+    archivedPillCount.textContent = stats.archived.toLocaleString();
+  }
+
+  const agentSelect = $('#agent-select');
+  if (agentSelect && stats.byAgent && stats.byAgent.length > 0) {
+    while (agentSelect.options.length > 1) agentSelect.remove(1);
+    stats.byAgent.forEach(row => {
+      const opt = document.createElement('option');
+      opt.value = row.agent_id;
+      opt.textContent = `${row.agent_id} (${row.count})`;
+      agentSelect.appendChild(opt);
+    });
+    state.agents = stats.byAgent.map(r => r.agent_id);
+  }
+}
+
+// ─── Modal ────────────────────────────────────────────────────────────────────
+async function openModal(id) {
+  state.selectedMemory = id;
+
+  try {
+    const res = await fetch(`/api/memories/${encodeURIComponent(id)}`);
+    if (!res.ok) throw new Error('Not found');
+    const m = await res.json();
+
+    const category = m.category || 'other';
+    const temp = m.temperature || '';
+
+    $('#modal-cat').innerHTML = `
+      <span class="cat-badge ${escapeHtml(category)}">${escapeHtml(category)}</span>
+      ${temp ? `<span class="temp-dot ${escapeHtml(temp)}" title="${escapeHtml(temp)}" style="display:inline-block;margin-left:8px;vertical-align:middle"></span>` : ''}
+    `;
+    $('#modal-subject').textContent = m.subject || '(no subject)';
+    $('#modal-content').textContent = m.content || '';
+
+    const conf = m.confidence != null ? m.confidence : null;
+    const imp = m.importance != null ? m.importance : null;
+
+    if (conf != null) {
+      $('#modal-confidence-val').textContent = `${Math.round(conf * 100)}%`;
+      $('#modal-confidence-bar').style.width = `${Math.round(conf * 100)}%`;
+    }
+    if (imp != null) {
+      $('#modal-importance-val').textContent = `${Math.round(imp * 100)}%`;
+      $('#modal-importance-bar').style.width = `${Math.round(imp * 100)}%`;
+    }
+
+    const tags = parseTags(m.tags);
+    const tagsContainer = $('#modal-tags');
+    tagsContainer.innerHTML = tags.length
+      ? tags.map(t => `<span class="modal-tag">${escapeHtml(t)}</span>`).join('')
+      : '<span style="font-size:12px;color:var(--muted)">No tags</span>';
+
+    $('#modal-temp').textContent = temp || '—';
+    $('#modal-agent').textContent = m.agent_id || '—';
+    $('#modal-source').textContent = m.source_channel || '—';
+    $('#modal-extracted').textContent = m.extracted_by || '—';
+    $('#modal-created').textContent = formatDateTime(m.created_at);
+    $('#modal-updated').textContent = formatDateTime(m.updated_at);
+    $('#modal-access-count').textContent = m.access_count ?? '—';
+    $('#modal-last-accessed').textContent = formatDateTime(m.last_accessed_at);
+    $('#modal-id').textContent = m.id;
+
+    const lifecycleEl = $('#modal-lifecycle');
+    if (lifecycleEl) lifecycleEl.innerHTML = renderLifecycle(m);
+
+    const restoreBtn = $('#modal-restore-btn');
+    const deleteBtn = $('#modal-delete-btn');
+    if (m.is_active === 0) {
+      if (restoreBtn) restoreBtn.style.display = 'block';
+      if (deleteBtn) deleteBtn.style.display = 'none';
+    } else {
+      if (restoreBtn) restoreBtn.style.display = 'none';
+      if (deleteBtn) deleteBtn.style.display = 'block';
+    }
+
+    if (m.supersedes_id) {
+      $('#modal-supersedes-wrap').style.display = 'block';
+      $('#modal-supersedes').textContent = m.supersedes_id;
+    } else {
+      $('#modal-supersedes-wrap').style.display = 'none';
+    }
+    if (m.superseded_by) {
+      $('#modal-superseded-by-wrap').style.display = 'block';
+      $('#modal-superseded-by').textContent = m.superseded_by;
+    } else {
+      $('#modal-superseded-by-wrap').style.display = 'none';
+    }
+
+    const overlay = $('#modal-overlay');
+    overlay.classList.add('open');
+    document.body.style.overflow = 'hidden';
+
+  } catch (e) {
+    showToast('Could not load memory details.', 'error');
+  }
+}
+
+function closeModal() {
+  const overlay = $('#modal-overlay');
+  overlay.classList.remove('open');
+  document.body.style.overflow = '';
+  state.selectedMemory = null;
+}
+
+// ─── Confirm dialog ───────────────────────────────────────────────────────────
+function openConfirmDelete(id) {
+  state.pendingDeleteId = id;
+  $('#confirm-overlay').classList.add('open');
+}
+
+function closeConfirmDelete() {
+  $('#confirm-overlay').classList.remove('open');
+  state.pendingDeleteId = null;
+}
+
+// ─── View switching ───────────────────────────────────────────────────────────
+function switchView(view) {
+  state.currentView = view;
+
+  $$('.nav-item').forEach(item => {
+    item.classList.toggle('active', item.dataset.view === view);
+  });
+
+  $$('.view').forEach(v => {
+    v.classList.toggle('active', v.id === `view-${view}`);
+  });
+
+  const titles = { memories: 'Memories', pinned: 'Pinned', commitments: 'Commitments', settings: 'Settings' };
+  const pageTitleEl = $('#page-title');
+  if (pageTitleEl) pageTitleEl.textContent = titles[view] || view;
+
+  const filterRow = $('#filter-row');
+  const searchWrap = $('#search-wrap');
+  if (filterRow) filterRow.style.display = view === 'memories' ? 'flex' : 'none';
+  if (searchWrap) searchWrap.style.display = view === 'memories' ? 'block' : 'none';
+
+  if (view === 'pinned') {
+    fetchPinned();
+  } else if (view === 'commitments') {
+    fetchCommitments();
+  } else if (view === 'settings') {
+    loadSettings();
+  }
+}
+
+// ─── Filter handling ──────────────────────────────────────────────────────────
+function resetAndFetch() {
+  state.page = 1;
+  state.memories = [];
+  fetchMemories({ page: 1, append: false });
+}
+
+function setupFilters() {
+  $$('[data-cat]').forEach(pill => {
+    pill.addEventListener('click', () => {
+      $$('[data-cat]').forEach(p => p.classList.remove('active'));
+      pill.classList.add('active');
+      state.filters.category = pill.dataset.cat;
+      resetAndFetch();
+    });
+  });
+
+  $$('[data-period]').forEach(pill => {
+    pill.addEventListener('click', () => {
+      $$('[data-period]').forEach(p => p.classList.remove('active'));
+      pill.classList.add('active');
+      state.filters.period = pill.dataset.period;
+      resetAndFetch();
+    });
+  });
+
+  $$('[data-temp]').forEach(pill => {
+    pill.addEventListener('click', () => {
+      $$('[data-temp]').forEach(p => p.classList.remove('active'));
+      pill.classList.add('active');
+      state.filters.temperature = pill.dataset.temp;
+      resetAndFetch();
+    });
+  });
+
+  const agentSelect = $('#agent-select');
+  if (agentSelect) {
+    agentSelect.addEventListener('change', () => {
+      state.filters.agent_id = agentSelect.value;
+      resetAndFetch();
+    });
+  }
+
+  const searchInput = $('#search-input');
+  if (searchInput) {
+    searchInput.addEventListener('input', () => {
+      clearTimeout(state.searchTimer);
+      state.searchTimer = setTimeout(() => {
+        state.filters.q = searchInput.value.trim();
+        resetAndFetch();
+      }, 300);
+    });
+  }
+}
+
+// ─── Event listeners ──────────────────────────────────────────────────────────
+function setupEventListeners() {
+  $$('.nav-item').forEach(item => {
+    item.addEventListener('click', () => {
+      if (item.dataset.view) switchView(item.dataset.view);
+    });
+  });
+
+  const loadMoreBtn = $('#load-more-btn');
+  if (loadMoreBtn) {
+    loadMoreBtn.addEventListener('click', () => {
+      fetchMemories({ page: state.page + 1, append: true });
+    });
+  }
+
+  const modalClose = $('#modal-close');
+  if (modalClose) modalClose.addEventListener('click', closeModal);
+
+  const modalOverlay = $('#modal-overlay');
+  if (modalOverlay) {
+    modalOverlay.addEventListener('click', (e) => {
+      if (e.target === modalOverlay) closeModal();
+    });
+  }
+
+  const deleteBtn = $('#modal-delete-btn');
+  if (deleteBtn) {
+    deleteBtn.addEventListener('click', () => {
+      if (state.selectedMemory) {
+        openConfirmDelete(state.selectedMemory);
+      }
+    });
+  }
+
+  const confirmCancel = $('#confirm-cancel');
+  if (confirmCancel) confirmCancel.addEventListener('click', closeConfirmDelete);
+
+  const confirmDelete = $('#confirm-delete');
+  if (confirmDelete) {
+    confirmDelete.addEventListener('click', async () => {
+      if (state.pendingDeleteId) {
+        const id = state.pendingDeleteId;
+        closeConfirmDelete();
+        await softDelete(id);
+      }
+    });
+  }
+
+  const confirmOverlay = $('#confirm-overlay');
+  if (confirmOverlay) {
+    confirmOverlay.addEventListener('click', (e) => {
+      if (e.target === confirmOverlay) closeConfirmDelete();
+    });
+  }
+
+  const archivedToggle = $('#archived-toggle');
+  if (archivedToggle) {
+    archivedToggle.addEventListener('click', () => {
+      state.showArchived = !state.showArchived;
+      archivedToggle.dataset.active = String(state.showArchived);
+
+      const tempPills = $$('[data-temp]');
+      if (state.showArchived) {
+        state.filters.temperature = 'all';
+        tempPills.forEach(p => {
+          p.classList.toggle('active', p.dataset.temp === 'all');
+          p.disabled = p.dataset.temp !== 'all';
+          p.style.opacity = p.dataset.temp !== 'all' ? '0.35' : '';
+          p.style.pointerEvents = p.dataset.temp !== 'all' ? 'none' : '';
+        });
+      } else {
+        tempPills.forEach(p => {
+          p.disabled = false;
+          p.style.opacity = '';
+          p.style.pointerEvents = '';
+        });
+      }
+
+      resetAndFetch();
+    });
+  }
+
+  const restoreBtn = $('#modal-restore-btn');
+  if (restoreBtn) {
+    restoreBtn.addEventListener('click', () => {
+      if (state.selectedMemory) restoreMemory(state.selectedMemory);
+    });
+  }
+
+  const logoutBtn = $('#logout-btn');
+  if (logoutBtn) {
+    logoutBtn.addEventListener('click', async () => {
+      try {
+        await fetch('/auth/logout', { method: 'POST' });
+      } catch {}
+      window.location.href = '/login.html';
+    });
+  }
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      if ($('#confirm-overlay').classList.contains('open')) {
+        closeConfirmDelete();
+      } else if ($('#modal-overlay').classList.contains('open')) {
+        closeModal();
+      }
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      const searchInput = $('#search-input');
+      if (searchInput && state.currentView === 'memories') {
+        searchInput.focus();
+        searchInput.select();
+      }
+    }
+  });
+}
+
+// ─── Wizard ───────────────────────────────────────────────────────────────────
+const wizardState = {
+  step: 0,
+  data: {
+    licenseKey: '',
+    geminiApiKey: '',
+    embeddingChoice: 'local',
+    platform: 'ductor',
+  },
+};
+
+const WIZARD_CONFIG_STEPS = 4;
+
+async function checkSetupStatus() {
+  try {
+    const res = await fetch('/api/setup-status');
+    if (!res.ok) return false;
+    const data = await res.json();
+    return data.needsSetup === true;
+  } catch {
+    return false;
+  }
+}
+
+function renderWizardStep() {
+  const step = wizardState.step;
+  const titleEl = $('#wizard-title');
+  const subtitleEl = $('#wizard-subtitle');
+  const bodyEl = $('#wizard-body');
+  const stepsEl = $('#wizard-steps');
+  const backBtn = $('#wizard-back');
+  const nextBtn = $('#wizard-next');
+
+  if (step === 0 || step > WIZARD_CONFIG_STEPS) {
+    stepsEl.innerHTML = Array.from({ length: WIZARD_CONFIG_STEPS }, (_, i) => {
+      const cls = step > WIZARD_CONFIG_STEPS ? 'done' : '';
+      return `<div class="wizard-step-dot ${cls}"></div>`;
+    }).join('');
+  } else {
+    stepsEl.innerHTML = Array.from({ length: WIZARD_CONFIG_STEPS }, (_, i) => {
+      const dotStep = i + 1;
+      const cls = dotStep < step ? 'done' : dotStep === step ? 'active' : '';
+      return `<div class="wizard-step-dot ${cls}"></div>`;
+    }).join('');
+  }
+
+  backBtn.style.display = (step > 0 && step <= WIZARD_CONFIG_STEPS) ? 'block' : 'none';
+
+  switch (step) {
+    case 0:
+      titleEl.textContent = 'Welcome to Stenotype';
+      subtitleEl.textContent = 'Stenotype captures your AI conversations as searchable memories. Setup takes about 2 minutes.';
+      bodyEl.innerHTML = `
+        <div class="wizard-welcome-list">
+          <div class="wizard-welcome-item">
+            <div class="wizard-welcome-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg></div>
+            <div>
+              <div class="wizard-welcome-title">License key</div>
+              <div class="wizard-welcome-desc">Verify your Stenotype license</div>
+            </div>
+          </div>
+          <div class="wizard-welcome-item">
+            <div class="wizard-welcome-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/><circle cx="12" cy="12" r="4"/></svg></div>
+            <div>
+              <div class="wizard-welcome-title">Gemini API key</div>
+              <div class="wizard-welcome-desc">Powers memory extraction — bring your own key, free tier works</div>
+            </div>
+          </div>
+          <div class="wizard-welcome-item">
+            <div class="wizard-welcome-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></div>
+            <div>
+              <div class="wizard-welcome-title">Semantic search</div>
+              <div class="wizard-welcome-desc">Local embeddings for precise recall, fully private</div>
+            </div>
+          </div>
+          <div class="wizard-welcome-item">
+            <div class="wizard-welcome-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="6" height="10" rx="1"/><rect x="16" y="7" width="6" height="10" rx="1"/><path d="M8 12h8"/></svg></div>
+            <div>
+              <div class="wizard-welcome-title">Platform</div>
+              <div class="wizard-welcome-desc">Connect to your AI platform (Ductor, with more coming soon)</div>
+            </div>
+          </div>
+        </div>
+      `;
+      nextBtn.textContent = 'Get started';
+      break;
+
+    case 1:
+      titleEl.textContent = 'License key';
+      subtitleEl.textContent = 'Enter the license key from your Stenotype purchase email.';
+      bodyEl.innerHTML = `
+        <div class="wizard-field">
+          <label for="w-license">License key</label>
+          <input type="text" id="w-license" class="wizard-input" placeholder="steno_…" value="${escapeHtml(wizardState.data.licenseKey)}" autocomplete="off" spellcheck="false" />
+          <div class="wizard-error" id="w-license-error" style="display:none"></div>
+        </div>
+      `;
+      setTimeout(() => $('#w-license')?.focus(), 50);
+      nextBtn.textContent = 'Continue';
+      break;
+
+    case 2:
+      titleEl.textContent = 'Gemini API key';
+      subtitleEl.textContent = 'Stenotype uses Google Gemini Flash Lite to extract memories. Get your key at aistudio.google.com/apikey — the free tier is sufficient.';
+      bodyEl.innerHTML = `
+        <div class="wizard-field">
+          <label for="w-gemini">API key</label>
+          <input type="password" id="w-gemini" class="wizard-input" placeholder="AIza…" value="${escapeHtml(wizardState.data.geminiApiKey)}" autocomplete="off" />
+          <div class="wizard-error" id="w-gemini-error" style="display:none"></div>
+          <div class="wizard-hint">Stored locally on this machine. Never sent to Stenotype servers.</div>
+        </div>
+      `;
+      setTimeout(() => $('#w-gemini')?.focus(), 50);
+      nextBtn.textContent = 'Continue';
+      break;
+
+    case 3:
+      titleEl.textContent = 'Semantic search';
+      subtitleEl.textContent = 'Choose how Stenotype searches your memories.';
+      bodyEl.innerHTML = `
+        <div class="wizard-option-grid">
+          <button class="wizard-option ${wizardState.data.embeddingChoice === 'local' ? 'selected' : ''}" data-choice="local">
+            <div class="wizard-option-radio"><div class="wizard-option-radio-inner"></div></div>
+            <div>
+              <div class="wizard-option-title">Local embeddings (Qwen3-Embedding-0.6B)</div>
+              <div class="wizard-option-desc">Best recall accuracy. Fully private, runs on your CPU. One-time ~500MB download when Stenotype first starts.</div>
+            </div>
+          </button>
+          <button class="wizard-option ${wizardState.data.embeddingChoice === 'none' ? 'selected' : ''}" data-choice="none">
+            <div class="wizard-option-radio"><div class="wizard-option-radio-inner"></div></div>
+            <div>
+              <div class="wizard-option-title">Keyword search only</div>
+              <div class="wizard-option-desc">Faster setup, no download. Searches by exact keywords rather than semantic meaning.</div>
+            </div>
+          </button>
+        </div>
+      `;
+      setTimeout(() => {
+        $$('.wizard-option[data-choice]', bodyEl).forEach(opt => {
+          opt.addEventListener('click', () => {
+            if (opt.disabled) return;
+            wizardState.data.embeddingChoice = opt.dataset.choice;
+            $$('.wizard-option[data-choice]', bodyEl).forEach(o => {
+              o.classList.toggle('selected', o.dataset.choice === opt.dataset.choice);
+            });
+          });
+        });
+      }, 50);
+      nextBtn.textContent = 'Continue';
+      break;
+
+    case 4:
+      titleEl.textContent = 'Platform';
+      subtitleEl.textContent = 'Which AI platform is Stenotype integrating with?';
+      bodyEl.innerHTML = `
+        <div class="wizard-option-grid">
+          <button class="wizard-option selected" data-platform="ductor">
+            <div class="wizard-option-radio"><div class="wizard-option-radio-inner"></div></div>
+            <div>
+              <div class="wizard-option-title">Ductor</div>
+              <div class="wizard-option-desc">Multi-agent AI system with Claude Code integration.</div>
+            </div>
+          </button>
+          <button class="wizard-option" data-platform="openclaw" disabled>
+            <div class="wizard-option-radio"><div class="wizard-option-radio-inner"></div></div>
+            <div>
+              <div class="wizard-option-title">OpenClaw</div>
+              <div class="wizard-option-desc">Support coming soon.</div>
+            </div>
+            <div class="wizard-option-badge">Soon</div>
+          </button>
+          <button class="wizard-option" data-platform="hermes" disabled>
+            <div class="wizard-option-radio"><div class="wizard-option-radio-inner"></div></div>
+            <div>
+              <div class="wizard-option-title">Hermes</div>
+              <div class="wizard-option-desc">Support coming soon.</div>
+            </div>
+            <div class="wizard-option-badge">Soon</div>
+          </button>
+          <button class="wizard-option" data-platform="claudecode" disabled>
+            <div class="wizard-option-radio"><div class="wizard-option-radio-inner"></div></div>
+            <div>
+              <div class="wizard-option-title">Claude Code</div>
+              <div class="wizard-option-desc">Support coming soon.</div>
+            </div>
+            <div class="wizard-option-badge">Soon</div>
+          </button>
+        </div>
+      `;
+      nextBtn.textContent = 'Finish setup';
+      break;
+
+    case 5:
+      stepsEl.innerHTML = Array.from({ length: WIZARD_CONFIG_STEPS }, () =>
+        `<div class="wizard-step-dot done"></div>`
+      ).join('');
+      titleEl.textContent = '';
+      subtitleEl.textContent = '';
+      backBtn.style.display = 'none';
+      bodyEl.innerHTML = `
+        <div class="wizard-success">
+          <div class="wizard-success-icon"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></div>
+          <div class="wizard-success-title">You're all set!</div>
+          <div class="wizard-success-sub">Stenotype is configured and ready. Memory extraction will begin automatically as you work with your AI platform.</div>
+        </div>
+      `;
+      nextBtn.textContent = 'Open dashboard';
+      nextBtn.disabled = false;
+      break;
+  }
+}
+
+function showWizard() {
+  const overlay = $('#wizard-overlay');
+  overlay.classList.add('open');
+  document.body.style.overflow = 'hidden';
+  renderWizardStep();
+}
+
+function hideWizard() {
+  const overlay = $('#wizard-overlay');
+  overlay.classList.remove('open');
+  document.body.style.overflow = '';
+}
+
+async function wizardNext() {
+  const step = wizardState.step;
+  const nextBtn = $('#wizard-next');
+
+  if (step === 1) {
+    const key = ($('#w-license')?.value || '').trim();
+    const errEl = $('#w-license-error');
+    if (!key || key.length < 10) {
+      if (errEl) { errEl.textContent = 'Please enter a valid license key.'; errEl.style.display = 'block'; }
+      $('#w-license')?.classList.add('error');
+      return;
+    }
+    wizardState.data.licenseKey = key;
+    if (errEl) errEl.style.display = 'none';
+    $('#w-license')?.classList.remove('error');
+  }
+
+  if (step === 2) {
+    const key = ($('#w-gemini')?.value || '').trim();
+    const errEl = $('#w-gemini-error');
+    if (!key || key.length < 10) {
+      if (errEl) { errEl.textContent = 'Please enter a valid Gemini API key.'; errEl.style.display = 'block'; }
+      $('#w-gemini')?.classList.add('error');
+      return;
+    }
+    wizardState.data.geminiApiKey = key;
+    if (errEl) errEl.style.display = 'none';
+    $('#w-gemini')?.classList.remove('error');
+  }
+
+  if (step === 4) {
+    nextBtn.disabled = true;
+    nextBtn.textContent = 'Setting up…';
+    try {
+      const res = await fetch('/api/setup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(wizardState.data),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        showToast(err.error || 'Setup failed. Please try again.', 'error');
+        nextBtn.disabled = false;
+        nextBtn.textContent = 'Finish setup';
+        return;
+      }
+    } catch (e) {
+      showToast('Setup failed. Please check your connection.', 'error');
+      nextBtn.disabled = false;
+      nextBtn.textContent = 'Finish setup';
+      return;
+    }
+    wizardState.step = 5;
+    renderWizardStep();
+    return;
+  }
+
+  if (step === 5) {
+    hideWizard();
+    await initDashboard();
+    return;
+  }
+
+  wizardState.step++;
+  renderWizardStep();
+}
+
+function wizardBack() {
+  if (wizardState.step > 0) {
+    wizardState.step--;
+    renderWizardStep();
+  }
+}
+
+function setupWizardListeners() {
+  const nextBtn = $('#wizard-next');
+  const backBtn = $('#wizard-back');
+  if (nextBtn) nextBtn.addEventListener('click', wizardNext);
+  if (backBtn) backBtn.addEventListener('click', wizardBack);
+}
+
+// ─── Settings ─────────────────────────────────────────────────────────────────
+async function loadSettings() {
+  const container = $('#settings-container');
+  if (!container) return;
+  container.innerHTML = `<div class="loading-state"><div class="loading-spinner"></div><div class="loading-text">Loading settings…</div></div>`;
+
+  try {
+    const res = await fetch('/api/settings');
+    if (!res.ok) throw new Error('Failed');
+    const data = await res.json();
+    state.settings = data.settings;
+    renderSettings();
+  } catch (e) {
+    console.error('loadSettings:', e);
+    container.innerHTML = `<div class="empty-state"><div class="empty-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div><div class="empty-title">Settings unavailable</div><div class="empty-subtitle">Could not load configuration.</div></div>`;
+  }
+}
+
+function renderSettings() {
+  const container = $('#settings-container');
+  if (!container) return;
+
+  const s = state.settings;
+  if (!s) {
+    container.innerHTML = `<div class="empty-state"><div class="empty-icon"><svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div><div class="empty-title">No configuration found</div><div class="empty-subtitle">Run the setup wizard to configure Stenotype.</div></div>`;
+    return;
+  }
+
+  container.innerHTML = `
+    <div class="settings-section">
+      <div class="settings-section-title">Extraction</div>
+      <div class="settings-card">
+        <div class="settings-field">
+          <label class="settings-label">Gemini API key</label>
+          <div class="settings-current-key">${escapeHtml(s.geminiApiKeyMasked || '—')}</div>
+          <input type="password" id="settings-new-key" class="wizard-input" placeholder="Enter new key to change…" autocomplete="new-password" />
+          <div class="wizard-hint" style="margin-top:6px">Leave blank to keep existing key.</div>
+        </div>
+        <div class="settings-field">
+          <label class="settings-label">Extraction model</label>
+          <div class="settings-value-text">${escapeHtml(s.extractionModel || 'gemini-2.5-flash-lite')}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <div class="settings-section-title">Platform</div>
+      <div class="settings-card">
+        <div class="settings-field">
+          <label class="settings-label">Agent platform</label>
+          <select id="settings-platform" class="settings-select">
+            <option value="ductor" ${s.systemIntegration === 'ductor' ? 'selected' : ''}>Ductor</option>
+            <option value="openclaw" disabled>OpenClaw (coming soon)</option>
+            <option value="hermes" disabled>Hermes (coming soon)</option>
+            <option value="claudecode" disabled>Claude Code (coming soon)</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <div class="settings-section-title">Embeddings</div>
+      <div class="settings-card">
+        <div class="settings-field">
+          <label class="settings-label">Embedding provider</label>
+          <select id="settings-embedding" class="settings-select">
+            <option value="local" ${s.embeddingProvider === 'local' ? 'selected' : ''}>Local (Qwen3-Embedding-0.6B)</option>
+            <option value="none" ${s.embeddingProvider !== 'local' ? 'selected' : ''}>None (keyword search only)</option>
+          </select>
+          <div class="wizard-hint" style="margin-top:8px">Changing embedding provider takes effect on next Stenotype restart.</div>
+        </div>
+      </div>
+    </div>
+
+    <div style="margin-top:8px">
+      <button class="btn-wizard-next" id="settings-save-btn" style="padding:10px 32px">Save settings</button>
+    </div>
+  `;
+
+  const saveBtn = $('#settings-save-btn');
+  if (saveBtn) saveBtn.addEventListener('click', saveSettings);
+}
+
+async function saveSettings() {
+  const saveBtn = $('#settings-save-btn');
+  const newKey = ($('#settings-new-key')?.value || '').trim();
+  const platform = $('#settings-platform')?.value || 'ductor';
+  const embedding = $('#settings-embedding')?.value || 'none';
+
+  if (saveBtn) { saveBtn.disabled = true; saveBtn.textContent = 'Saving…'; }
+
+  try {
+    const body = { systemIntegration: platform, embeddingProvider: embedding };
+    if (newKey && newKey.length >= 10) body.geminiApiKey = newKey;
+
+    const res = await fetch('/api/settings', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+
+    if (!res.ok) throw new Error('Save failed');
+    showToast('Settings saved.', 'success');
+
+    const keyInput = $('#settings-new-key');
+    if (keyInput) keyInput.value = '';
+
+    await loadSettings();
+  } catch (e) {
+    showToast('Failed to save settings.', 'error');
+  } finally {
+    if (saveBtn) { saveBtn.disabled = false; saveBtn.textContent = 'Save settings'; }
+  }
+}
+
+// ─── Dashboard init (runs after wizard completes or if already set up) ────────
+async function initDashboard() {
+  setupFilters();
+  setupEventListeners();
+
+  await Promise.all([
+    loadStats(),
+    fetchMemories({ page: 1, append: false }),
+  ]);
+
+  fetchPinned();
+  fetchCommitments();
+}
+
+// ─── Init ─────────────────────────────────────────────────────────────────────
+async function init() {
+  const authed = await checkAuth();
+  if (!authed) return;
+
+  setupWizardListeners();
+
+  const setupNeeded = await checkSetupStatus();
+  if (setupNeeded) {
+    showWizard();
+    return;
+  }
+
+  await initDashboard();
+}
+
+init();