npm - @nandansai08/personal-ai - Versions diffs - 0.8.0 - Mend

@nandansai08/personal-ai 0.8.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 (61) hide show

package/.env.example +62 -0
package/LICENSE +21 -0
package/README.md +431 -0
package/bin/personal-ai.js +4 -0
package/config/mcp.json +3 -0
package/config/models.yaml +23 -0
package/config/persona.yaml +24 -0
package/config/profiles.yaml +61 -0
package/config/providers.yaml +22 -0
package/dist/bootstrap.js +41 -0
package/dist/core/assistant.js +170 -0
package/dist/core/context.js +35 -0
package/dist/core/events.js +45 -0
package/dist/core/logger.js +67 -0
package/dist/core/model-manager.js +101 -0
package/dist/index.js +98 -0
package/dist/mcp/client.js +3 -0
package/dist/mcp/loader.js +3 -0
package/dist/memory/embeddings.js +53 -0
package/dist/memory/intent.js +113 -0
package/dist/memory/long-term.js +312 -0
package/dist/memory/short-term.js +63 -0
package/dist/memory/types.js +5 -0
package/dist/memory/vector-store.js +57 -0
package/dist/persona/loader.js +56 -0
package/dist/persona/profiles.js +51 -0
package/dist/persona/system-prompt.js +99 -0
package/dist/persona/types.js +22 -0
package/dist/plugins/interface.js +1 -0
package/dist/plugins/loader.js +3 -0
package/dist/providers/anthropic.js +112 -0
package/dist/providers/factory.js +40 -0
package/dist/providers/gemini.js +86 -0
package/dist/providers/groq.js +14 -0
package/dist/providers/interface.js +2 -0
package/dist/providers/lmstudio.js +13 -0
package/dist/providers/metadata.js +96 -0
package/dist/providers/mistral.js +133 -0
package/dist/providers/ollama.js +265 -0
package/dist/providers/openai-compatible.js +110 -0
package/dist/providers/openai.js +14 -0
package/dist/providers/together.js +14 -0
package/dist/providers/utils.js +57 -0
package/dist/tools/calculator.js +44 -0
package/dist/tools/file-reader.js +101 -0
package/dist/tools/memory-tool.js +58 -0
package/dist/tools/notes.js +121 -0
package/dist/tools/parser.js +119 -0
package/dist/tools/registry.js +88 -0
package/dist/tools/tasks.js +134 -0
package/dist/tools/types.js +3 -0
package/dist/tools/web-search.js +108 -0
package/dist/ui/cli-helpers.js +153 -0
package/dist/ui/cli.js +647 -0
package/dist/ui/setup.js +196 -0
package/dist/ui/web/client/index.html +2081 -0
package/dist/ui/web/server.js +310 -0
package/dist/voice/stt.js +3 -0
package/dist/voice/tts.js +3 -0
package/dist/web.js +63 -0
package/package.json +68 -0

package/dist/ui/web/client/index.html ADDED Viewed

@@ -0,0 +1,2081 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PersonalAI</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  /* ── Light main content ─────────────────────────────────── */
+  --bg:            #f9fafb;
+  --surface:       #ffffff;
+  --surface-2:     #f3f4f6;
+  --surface-3:     #e9ebee;
+  --surface-4:     #e1e3e7;
+  --border:        #e5e7eb;
+  --border-subtle: #f0f1f3;
+  --text:          #111827;
+  --text-dim:      #6b7280;
+  --text-muted:    #9ca3af;
+  /* ── Blue accent (not purple) ───────────────────────────── */
+  --accent:        #2563eb;
+  --accent-dim:    rgba(37,99,235,.08);
+  --accent-border: rgba(37,99,235,.3);
+  --accent-glow:   rgba(37,99,235,.05);
+  /* ── Chat bubbles ───────────────────────────────────────── */
+  --bubble-user:   #1d4ed8;
+  --bubble-ai:     #ffffff;
+  /* ── Semantic colours ───────────────────────────────────── */
+  --green:         #16a34a;
+  --green-dim:     rgba(22,163,74,.1);
+  --yellow:        #d97706;
+  --yellow-dim:    rgba(217,119,6,.1);
+  --red:           #dc2626;
+  --red-dim:       rgba(220,38,38,.1);
+  --blue:          #2563eb;
+  --blue-dim:      rgba(37,99,235,.1);
+  --cyan:          #0891b2;
+  --cyan-dim:      rgba(8,145,178,.1);
+  --orange:        #ea580c;
+  --orange-dim:    rgba(234,88,12,.1);
+  /* ── Nav dark theme (used in #nav overrides) ────────────── */
+  --nav-bg:              #111928;
+  --nav-border:          #1f2d3d;
+  --nav-item-border:     rgba(255,255,255,0.055);
+  --nav-item-active-bg:  #050a14;
+  --nav-item-active-brd: rgba(59,130,246,0.55);
+  --nav-text:            #8b9bb4;
+  --nav-text-active:     #ffffff;
+  /* ── Dark panel (live events, hw, status bar) ───────────── */
+  --dark-bg:       #0c1017;
+  --dark-surface:  #131b27;
+  --dark-border:   #1e2d3d;
+  --dark-text:     #c9d6e3;
+  --dark-muted:    #5a6b7e;
+  --radius:        10px;
+  --radius-sm:     7px;
+  --nav-w:         220px;
+  --topbar-h:      54px;
+}
+html, body { height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, sans-serif; font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
+/* ── App layout ──────────────────────────────────────────────────────────── */
+#app { display: flex; height: 100dvh; overflow: hidden; }
+/* ── Nav sidebar (dark) ──────────────────────────────────────────────────── */
+#nav {
+  width: var(--nav-w);
+  background: var(--nav-bg);
+  border-right: 1px solid var(--nav-border);
+  display: flex; flex-direction: column;
+  flex-shrink: 0; overflow: hidden;
+  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
+}
+#nav-logo {
+  padding: 16px 14px 14px;
+  border-bottom: 1px solid var(--nav-border);
+  flex-shrink: 0;
+}
+.logo-name {
+  font-size: 14px; font-weight: 700; letter-spacing: -0.3px;
+  color: #fff; line-height: 1.2;
+}
+.logo-name span { color: #60a5fa; }
+.logo-tag {
+  font-size: 10px; color: var(--nav-text); margin-top: 2px;
+  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
+}
+#nav-items { flex: 1; padding: 8px 8px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
+.nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: var(--radius-sm);
+  color: var(--nav-text); cursor: pointer;
+  border: 1px solid var(--nav-item-border);
+  background: none;
+  font-size: 13px; font-family: inherit; text-align: left; width: 100%;
+  transition: all 0.13s;
+}
+.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.1); }
+.nav-item.active {
+  background: var(--nav-item-active-bg);
+  border: 1px dashed var(--nav-item-active-brd);
+  color: var(--nav-text-active);
+}
+.nav-item.active .nav-icon { color: #60a5fa; }
+.nav-icon { width: 17px; height: 17px; flex-shrink: 0; }
+#nav-bottom { padding: 12px 8px; border-top: 1px solid var(--nav-border); flex-shrink: 0; }
+#new-session-btn {
+  display: flex; align-items: center; justify-content: center; gap: 7px;
+  width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
+  background: #2563eb; color: #fff; border: none;
+  font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
+  transition: background 0.15s;
+  margin-bottom: 12px;
+}
+#new-session-btn:hover { background: #1d4ed8; }
+#new-session-btn svg { width: 13px; height: 13px; }
+.status-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 5px 6px; margin-bottom: 3px; border-radius: 6px;
+}
+.status-dot {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--dark-muted); flex-shrink: 0; transition: background 0.3s;
+}
+.status-dot.ok { background: #22c55e; }
+.status-dot.err { background: #ef4444; }
+.status-dot.loading { background: #f59e0b; animation: pulse-dot 1.5s ease infinite; }
+.status-label { font-size: 11.5px; color: var(--nav-text); flex: 1; }
+.status-value { font-size: 10.5px; color: var(--dark-muted); }
+@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.35; } }
+/* ── Views container ─────────────────────────────────────────────────────── */
+#views { flex: 1; display: flex; overflow: hidden; min-width: 0; }
+.view { display: none; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+.view.active { display: flex; }
+/* ── Shared topbar (light) ───────────────────────────────────────────────── */
+.topbar {
+  background: var(--surface); border-bottom: 1px solid var(--border);
+  height: var(--topbar-h); padding: 0 20px;
+  display: flex; align-items: center; gap: 16px; flex-shrink: 0;
+}
+.topbar-logo {
+  font-size: 15px; font-weight: 700; letter-spacing: -0.4px; color: var(--text);
+  flex-shrink: 0; white-space: nowrap;
+}
+.topbar-title { font-size: 15px; font-weight: 700; color: var(--text); flex-shrink: 0; }
+.topbar-sub { font-size: 11.5px; color: var(--text-dim); }
+#hamburger {
+  display: none; cursor: pointer; background: none; border: none;
+  color: var(--text-dim); padding: 4px; border-radius: 6px;
+  transition: all 0.15s; flex-shrink: 0;
+}
+#hamburger:hover { color: var(--text); background: var(--surface-2); }
+#hamburger svg { display: block; width: 18px; height: 18px; }
+/* ── Profile tabs — underline style ─────────────────────────────────────── */
+#profile-tabs { display: flex; align-items: center; gap: 0; }
+.profile-tab {
+  padding: 0 14px; height: var(--topbar-h); line-height: var(--topbar-h);
+  font-size: 13px; cursor: pointer;
+  background: none; color: var(--text-dim);
+  border: none; border-bottom: 2px solid transparent;
+  transition: all 0.13s; white-space: nowrap; font-family: inherit;
+  display: flex; align-items: center;
+}
+.profile-tab:hover { color: var(--text); }
+.profile-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
+#ws-indicator { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+#ws-dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--text-muted); transition: background 0.3s;
+}
+#ws-dot.connected { background: #22c55e; }
+#ws-dot.error { background: #ef4444; }
+#ws-model-label { font-size: 11.5px; color: var(--text-dim); background: var(--surface-2); padding: 3px 8px; border-radius: 99px; border: 1px solid var(--border); }
+/* ── Chat layout: main + right panel ────────────────────────────────────── */
+#chat-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; }
+#chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
+/* ── Messages ────────────────────────────────────────────────────────────── */
+#messages {
+  flex: 1; overflow-y: auto; padding: 20px 24px 12px;
+  display: flex; flex-direction: column; gap: 14px;
+  position: relative; background: var(--bg);
+}
+#empty-state {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 18px; padding: 32px; pointer-events: none;
+}
+#empty-state.hidden { display: none; }
+.empty-logo { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
+.empty-logo span { color: var(--accent); }
+.empty-tagline { font-size: 12.5px; color: var(--text-dim); }
+.empty-suggestions {
+  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
+  max-width: 440px; pointer-events: all;
+}
+.suggestion-chip {
+  padding: 6px 13px; border: 1px solid var(--border); border-radius: 99px;
+  background: var(--surface); color: var(--text-dim); font-size: 12px;
+  cursor: pointer; transition: all 0.13s; font-family: inherit;
+}
+.suggestion-chip:hover { border-color: var(--accent-border); color: var(--text); background: var(--accent-dim); }
+.msg-row { display: flex; flex-direction: column; gap: 3px; }
+.msg-row.user { align-items: flex-end; }
+.msg-row.assistant { align-items: flex-start; }
+.bubble {
+  max-width: 78%; padding: 9px 13px; border-radius: var(--radius);
+  line-height: 1.65; word-wrap: break-word;
+}
+.msg-row.user .bubble { background: var(--bubble-user); color: #fff; border-bottom-right-radius: 3px; }
+.msg-row.assistant .bubble { background: var(--bubble-ai); color: var(--text); border-bottom-left-radius: 3px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+.bubble code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; font-family: ui-monospace,'SF Mono','Cascadia Code',monospace; color: var(--text); }
+.bubble .code-wrap { position: relative; margin: 8px 0; }
+.bubble pre { background: #1e2535; padding: 11px 13px; border-radius: 8px; overflow-x: auto; border: 1px solid #2d3748; }
+.bubble pre code { background: none; padding: 0; font-size: 11.5px; line-height: 1.6; color: #e2e8f0; }
+.copy-btn {
+  position: absolute; top: 6px; right: 6px;
+  padding: 2px 7px; font-size: 10px; border-radius: 4px;
+  background: #2d3748; border: 1px solid #4a5568;
+  color: #a0aec0; cursor: pointer; font-family: inherit;
+  transition: all 0.13s; opacity: 0;
+}
+.code-wrap:hover .copy-btn { opacity: 1; }
+.copy-btn.copied { color: #68d391; border-color: #68d391; }
+.bubble strong { font-weight: 600; }
+.bubble em { font-style: italic; }
+.bubble h1, .bubble h2, .bubble h3 { font-weight: 600; margin: 9px 0 3px; }
+.bubble h1 { font-size: 1.05em; } .bubble h2 { font-size: 1em; } .bubble h3 { font-size: .93em; color: var(--text-dim); }
+.bubble ul, .bubble ol { padding-left: 18px; margin: 5px 0; }
+.bubble li { margin: 2px 0; }
+.bubble p { margin: 3px 0; }
+.bubble p:first-child { margin-top: 0; }
+.bubble p:last-child { margin-bottom: 0; }
+.bubble.streaming::after {
+  content: ''; display: inline-block; width: 2px; height: 0.83em;
+  background: var(--accent); margin-left: 2px; vertical-align: text-bottom;
+  animation: blink-cursor 0.8s step-end infinite;
+}
+@keyframes blink-cursor { 0%,100% { opacity:1; } 50% { opacity:0; } }
+.tool-call-pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 8px; border-radius: 99px;
+  background: var(--yellow-dim); border: 1px solid rgba(245,158,11,.28);
+  color: var(--yellow); font-size: 11px;
+  font-family: ui-monospace,'SF Mono',monospace; margin: 3px 0;
+}
+.tool-call-pill.done { background: var(--green-dim); border-color: rgba(34,197,94,.28); color: var(--green); }
+.tool-spinner { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; border-top-color: transparent; animation: spin 0.7s linear infinite; flex-shrink: 0; }
+.done-check { width: 10px; height: 10px; flex-shrink: 0; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.tool-result-wrap { margin: 3px 0 3px 2px; }
+.tool-result-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 2px 0; }
+.tool-result-toggle:hover { color: var(--text-dim); }
+.toggle-chevron { transition: transform 0.13s; }
+.tool-result-toggle.open .toggle-chevron { transform: rotate(90deg); }
+.tool-result-body { display: none; margin-top: 4px; padding: 8px 10px; background: #080808; border-radius: 6px; border: 1px solid var(--border); font-size: 11px; color: var(--text-dim); white-space: pre-wrap; font-family: ui-monospace,'SF Mono',monospace; max-height: 200px; overflow-y: auto; line-height: 1.5; }
+.tool-result-body.open { display: block; }
+.model-switch-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--blue-dim); border: 1px solid rgba(96,165,250,.22); color: var(--blue); font-size: 10.5px; align-self: center; margin: 2px 0; }
+.thinking-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-bottom-left-radius: 3px; padding: 12px 15px; display: flex; align-items: center; gap: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+.thinking-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: think-bounce 1.1s ease infinite; flex-shrink: 0; }
+.thinking-dot:nth-child(2) { animation-delay: 0.15s; }
+.thinking-dot:nth-child(3) { animation-delay: 0.30s; }
+@keyframes think-bounce { 0%,60%,100% { transform: translateY(0); opacity:.3; } 30% { transform: translateY(-5px); opacity:.9; } }
+.usage-line { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
+/* ── Input area ──────────────────────────────────────────────────────────── */
+#input-area { padding: 12px 20px 14px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
+#input-row { display: flex; gap: 8px; align-items: flex-end; }
+#msg-input {
+  flex: 1; padding: 10px 14px; background: var(--bg); color: var(--text);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  font-size: 13.5px; font-family: inherit; resize: none; outline: none;
+  max-height: 150px; min-height: 44px; line-height: 1.5; transition: border-color 0.15s;
+}
+#msg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
+#msg-input::placeholder { color: var(--text-muted); }
+#send-btn {
+  display: flex; align-items: center; justify-content: center;
+  width: 44px; height: 44px;
+  background: var(--accent); color: #fff;
+  border: none; border-radius: 99px; font-size: 13px; font-weight: 500;
+  cursor: pointer; transition: background 0.15s, transform 0.1s;
+  flex-shrink: 0;
+}
+#send-btn:hover:not(:disabled) { background: #1d4ed8; }
+#send-btn:active:not(:disabled) { transform: scale(0.95); }
+#send-btn:disabled { opacity: .3; cursor: default; }
+#send-btn svg { width: 14px; height: 14px; }
+/* hide "Send" text, icon only */
+#send-btn .send-text { display: none; }
+#token-count { font-size: 10.5px; color: var(--text-muted); text-align: right; margin-top: 4px; }
+#status-bar { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; height: 14px; }
+/* ── Live events panel (dark) ────────────────────────────────────────────── */
+#live-panel {
+  width: 290px; flex-shrink: 0;
+  background: var(--dark-bg); border-left: 1px solid var(--dark-border);
+  display: flex; flex-direction: column; overflow: hidden;
+  transition: width 0.2s cubic-bezier(0.4,0,0.2,1);
+}
+#live-panel.collapsed { width: 36px; }
+#live-panel-header {
+  height: var(--topbar-h); padding: 0 10px;
+  display: flex; align-items: center; gap: 8px;
+  border-bottom: 1px solid var(--dark-border); flex-shrink: 0;
+}
+#live-panel-toggle {
+  background: none; border: none; color: var(--dark-muted); cursor: pointer;
+  padding: 4px; border-radius: 5px; flex-shrink: 0; transition: all 0.13s;
+  display: flex; align-items: center; justify-content: center;
+}
+#live-panel-toggle:hover { color: var(--dark-text); background: var(--dark-surface); }
+#live-panel-toggle svg { width: 15px; height: 15px; transition: transform 0.2s; }
+#live-panel.collapsed #live-panel-toggle svg { transform: rotate(180deg); }
+.live-panel-title { font-size: 10.5px; font-weight: 600; color: var(--dark-muted); text-transform: uppercase; letter-spacing: 0.1em; flex: 1; white-space: nowrap; overflow: hidden; }
+#live-panel.collapsed .live-panel-title { display: none; }
+#live-panel.collapsed .live-perf-section { display: none; }
+#live-panel.collapsed #live-events-list { display: none; }
+#live-events-list { flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }
+.live-event {
+  display: flex; gap: 7px; padding: 5px 7px; border-radius: 5px;
+  margin-bottom: 1px; align-items: flex-start; font-size: 11px;
+}
+.live-event:hover { background: var(--dark-surface); }
+.live-event-time { color: var(--dark-muted); font-family: ui-monospace,'SF Mono',monospace; flex-shrink: 0; font-size: 9.5px; margin-top: 1px; }
+.live-event-body { flex: 1; min-width: 0; }
+.live-event-type { font-family: ui-monospace,'SF Mono',monospace; font-size: 10px; font-weight: 600; }
+.live-event-detail { color: #5a7a99; font-size: 10px; margin-top: 1px; word-break: break-all; }
+.evt-model { color: #7eb8f7; }
+.evt-tool { color: #f6c26b; }
+.evt-result { color: #5ed98e; }
+.evt-switch { color: #63d4e8; }
+.evt-done { color: #a78bfa; }
+.evt-error { color: #f87171; }
+.evt-conn { color: #5ed98e; }
+.live-perf-section { padding: 10px; border-top: 1px solid var(--dark-border); flex-shrink: 0; }
+.perf-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dark-muted); font-weight: 600; margin-bottom: 10px; }
+.perf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
+.perf-label { font-size: 10px; color: var(--dark-muted); flex-shrink: 0; width: 72px; }
+.perf-bar-wrap { flex: 1; height: 3px; background: var(--dark-surface); border-radius: 2px; overflow: hidden; }
+.perf-bar { height: 100%; background: #2563eb; border-radius: 2px; transition: width 0.5s; }
+.perf-bar.green { background: #22c55e; }
+.perf-val { font-size: 10px; color: var(--dark-text); font-family: ui-monospace,'SF Mono',monospace; flex-shrink: 0; width: 36px; text-align: right; }
+.perf-stat-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
+.perf-stat-label { font-size: 10px; color: var(--dark-muted); }
+.perf-stat-val { font-size: 10px; color: var(--dark-text); font-family: ui-monospace,'SF Mono',monospace; }
+/* ── Bottom status bar (dark, like screenshots) ──────────────────────────── */
+#bottom-bar {
+  height: 26px; background: var(--dark-bg); border-top: 1px solid var(--dark-border);
+  display: flex; align-items: center; padding: 0 14px; gap: 14px; flex-shrink: 0;
+  font-family: ui-monospace,'SF Mono',monospace; font-size: 10.5px; color: var(--dark-muted);
+}
+.bb-sep { color: var(--dark-border); }
+.bb-item { display: flex; align-items: center; gap: 5px; }
+.bb-dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }
+.bb-spacer { flex: 1; }
+.bb-log { color: var(--dark-muted); }
+/* ── Toast ───────────────────────────────────────────────────────────────── */
+#toast-container { position: fixed; bottom: 46px; right: 16px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; z-index: 200; }
+.toast { padding: 8px 13px; border-radius: 8px; background: #1e293b; border: 1px solid #334155; font-size: 12px; color: #cbd5e1; animation: toast-in 0.18s ease; pointer-events: all; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
+@keyframes toast-in { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
+/* ── Mobile overlay ──────────────────────────────────────────────────────── */
+#nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 9; backdrop-filter: blur(2px); }
+/* ── View: Code ──────────────────────────────────────────────────────────── */
+#view-code { flex-direction: row; }
+#code-tree { width: 200px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
+#code-tree-header { padding: 12px 12px 8px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
+#code-tree-list { flex: 1; overflow-y: auto; padding: 6px; }
+.tree-folder { padding: 4px 8px; border-radius: 5px; font-size: 12px; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 7px; }
+.tree-folder:hover { background: var(--surface-2); color: var(--text); }
+.tree-file { padding: 3px 8px 3px 26px; border-radius: 5px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; }
+.tree-file:hover { background: var(--surface-2); color: var(--text-dim); }
+.tree-ext { font-size: 10px; color: var(--text-muted); margin-left: auto; }
+#code-editor { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+#code-editor-area { flex: 1; background: var(--bg); color: var(--text); border: none; outline: none; resize: none; font-family: ui-monospace,'SF Mono','Cascadia Code',monospace; font-size: 12.5px; line-height: 1.7; padding: 16px; overflow: auto; tab-size: 2; }
+#code-assistant { width: 280px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
+.panel-section { padding: 12px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
+.panel-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
+/* ── View: Research ──────────────────────────────────────────────────────── */
+#view-research { flex-direction: column; }
+#research-topbar { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; display: flex; gap: 8px; align-items: center; }
+#research-search-input { flex: 1; padding: 9px 13px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; outline: none; font-family: inherit; transition: border-color 0.15s; }
+#research-search-input:focus { border-color: var(--accent-border); }
+#research-search-input::placeholder { color: var(--text-muted); }
+#research-search-btn { padding: 9px 16px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: opacity 0.15s; white-space: nowrap; }
+#research-search-btn:hover { opacity: .85; }
+.brave-badge { font-size: 10px; color: var(--text-muted); background: var(--surface-3); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); white-space: nowrap; }
+#research-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
+#research-memories { width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
+#research-memories-header { padding: 12px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
+.r-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 600; }
+#research-mem-list { flex: 1; overflow-y: auto; padding: 6px; }
+.research-mem-item { padding: 8px 9px; border-radius: 7px; margin-bottom: 3px; cursor: pointer; border: 1px solid transparent; transition: all 0.13s; }
+.research-mem-item:hover { background: var(--surface-2); border-color: var(--border); }
+.research-mem-badges { display: flex; gap: 4px; margin-bottom: 4px; }
+.r-badge { font-size: 9.5px; padding: 2px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.04em; }
+.r-badge.semantic { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(96,165,250,.22); }
+.r-badge.like { background: var(--cyan-dim); color: var(--cyan); border: 1px solid rgba(34,211,238,.22); }
+.r-badge.type { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); }
+.research-mem-text { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
+.research-mem-time { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
+#research-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+#research-summary { flex: 1; overflow-y: auto; padding: 16px 20px; }
+.research-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text-muted); }
+.research-result { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
+.research-result-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
+.research-result-url { font-size: 11px; color: var(--blue); margin-bottom: 6px; word-break: break-all; }
+.research-result-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
+/* ── View: Memory / Vault ────────────────────────────────────────────────── */
+#view-memory { flex-direction: column; }
+#memory-stats-bar { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; display: flex; gap: 12px; }
+.mem-stat-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; min-width: 120px; }
+.mem-stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 5px; }
+.mem-stat-val { font-size: 20px; font-weight: 700; color: var(--text); font-family: ui-monospace,'SF Mono',monospace; line-height: 1; }
+.mem-stat-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
+#memory-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }
+#memory-list-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+#memory-search-bar { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
+#vault-search { flex: 1; padding: 7px 11px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12.5px; outline: none; font-family: inherit; transition: border-color 0.15s; }
+#vault-search:focus { border-color: var(--accent-border); }
+#vault-search::placeholder { color: var(--text-muted); }
+.engine-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
+.engine-btn { padding: 5px 9px; font-size: 10.5px; font-weight: 600; cursor: pointer; background: none; border: none; color: var(--text-muted); font-family: inherit; transition: all 0.13s; }
+.engine-btn.active { background: var(--accent-dim); color: #c4b5fd; }
+#vault-list { flex: 1; overflow-y: auto; padding: 6px; }
+.vault-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: 7px; margin-bottom: 2px; border: 1px solid transparent; cursor: pointer; transition: all 0.13s; align-items: flex-start; }
+.vault-item:hover { background: var(--surface-2); border-color: var(--border); }
+.vault-relevance { font-size: 11px; font-family: ui-monospace,'SF Mono',monospace; color: var(--accent); flex-shrink: 0; margin-top: 1px; min-width: 34px; }
+.vault-item-body { flex: 1; min-width: 0; }
+.vault-item-type { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
+.vault-item-text { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
+.vault-item-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
+#memory-sidebar { width: 260px; flex-shrink: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
+.vault-ops-section { padding: 12px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
+.vault-op-btn { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 10px; border-radius: var(--radius-sm); background: none; border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; font-family: inherit; cursor: pointer; margin-bottom: 5px; transition: all 0.13s; text-align: left; }
+.vault-op-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-border); }
+.vault-op-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
+.retention-section { padding: 12px; flex-shrink: 0; }
+.retention-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.retention-label { font-size: 12px; color: var(--text-dim); }
+.retention-val { font-size: 12px; color: var(--text-muted); font-family: ui-monospace,'SF Mono',monospace; }
+/* ── View: Settings ──────────────────────────────────────────────────────── */
+#view-settings { flex-direction: column; overflow-y: auto; }
+.settings-body { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1100px; }
+.settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.settings-section.full-width { grid-column: 1 / -1; }
+.settings-section-header { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
+.settings-section-title { font-size: 12px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.07em; }
+.settings-section-body { padding: 14px 16px; }
+.provider-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; }
+.provider-card:last-child { margin-bottom: 0; }
+.provider-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; margin-top: 4px; transition: background 0.3s; }
+.provider-status-dot.ok { background: var(--green); }
+.provider-status-dot.err { background: var(--red); }
+.provider-card-body { flex: 1; min-width: 0; }
+.provider-card-name { font-size: 13px; font-weight: 600; color: var(--text); }
+.provider-card-model { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; font-family: ui-monospace,'SF Mono',monospace; }
+.provider-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+.provider-card-badge { display: inline-flex; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; font-weight: 600; margin-top: 5px; }
+.provider-card-badge.active { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.22); }
+.provider-card-badge.inactive { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); }
+.hw-panel { background: var(--dark-bg); border: 1px solid var(--dark-border); border-radius: var(--radius-sm); padding: 14px; font-family: ui-monospace,'SF Mono',monospace; }
+.hw-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--dark-border); }
+.hw-row:last-child { border-bottom: none; }
+.hw-key { font-size: 11.5px; color: var(--dark-muted); }
+.hw-val { font-size: 11.5px; color: #22c55e; }
+.routing-table { width: 100%; border-collapse: collapse; }
+.routing-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--border); }
+.routing-table td { font-size: 12px; padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); }
+.routing-table tr:last-child td { border-bottom: none; }
+.route-task { color: var(--text-dim); }
+.route-model { color: #c4b5fd; font-family: ui-monospace,'SF Mono',monospace; font-size: 11px; }
+.route-reason { color: var(--text-muted); font-size: 11px; }
+.add-rule-btn { margin-top: 10px; padding: 6px 12px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.13s; }
+.add-rule-btn:hover { border-color: var(--accent-border); color: var(--text); background: var(--accent-dim); }
+/* ── Scrollbars ──────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }
+::-webkit-scrollbar-thumb:hover { background: var(--surface-4); }
+/* ── Message avatars ─────────────────────────────────────────────────────── */
+.msg-inner { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
+.msg-row.user .msg-inner { flex-direction: row-reverse; justify-content: flex-start; }
+.msg-row.assistant .msg-inner { flex-direction: row; }
+.msg-avatar {
+  width: 26px; height: 26px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px; font-weight: 700; flex-shrink: 0; user-select: none;
+}
+.user-avatar { background: #374151; color: #d1d5db; }
+.ai-avatar { background: var(--accent); color: #fff; border-radius: 6px; font-size: 8.5px; letter-spacing: 0.03em; }
+.msg-bubble-wrap { display: flex; flex-direction: column; gap: 3px; max-width: min(540px, calc(100% - 34px)); }
+.msg-row.user .msg-bubble-wrap { align-items: flex-end; }
+.msg-row.assistant .msg-bubble-wrap { align-items: flex-start; }
+.msg-bubble-wrap .bubble { max-width: 100%; }
+.msg-timestamp { font-size: 9px; color: var(--text-muted); padding: 0 2px; letter-spacing: 0.04em; }
+/* ── Streaming badge in live panel ───────────────────────────────────────── */
+#streaming-badge {
+  display: none; align-items: center; gap: 4px; margin-left: auto;
+  padding: 2px 7px; border-radius: 99px;
+  background: rgba(37,99,235,.18); border: 1px solid rgba(37,99,235,.4);
+  color: #7eb8f7; font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
+}
+#streaming-badge.active { display: flex; }
+.streaming-blink { width: 5px; height: 5px; border-radius: 50%; background: #7eb8f7; animation: pulse-dot 0.8s ease infinite; }
+/* ── Code tabs bar ───────────────────────────────────────────────────────── */
+#code-tabs-bar {
+  height: 38px; background: var(--surface); border-bottom: 1px solid var(--border);
+  display: flex; align-items: flex-end; overflow-x: auto; flex-shrink: 0; padding: 0 8px; gap: 2px;
+}
+.code-tab {
+  display: flex; align-items: center; gap: 7px; padding: 0 10px; height: 32px;
+  font-size: 11.5px; color: var(--text-muted); cursor: pointer;
+  background: var(--surface-2); border: 1px solid var(--border); border-bottom: none;
+  border-radius: 5px 5px 0 0; transition: all 0.13s; white-space: nowrap; flex-shrink: 0;
+  font-family: ui-monospace,'SF Mono',monospace;
+}
+.code-tab:hover { color: var(--text-dim); }
+.code-tab.active { background: var(--bg); color: var(--text); }
+.code-tab-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 13px; line-height: 1; transition: color 0.13s; }
+.code-tab-close:hover { color: var(--red); }
+/* ── Line numbers ────────────────────────────────────────────────────────── */
+#line-numbers {
+  width: 44px; background: var(--surface); border-right: 1px solid var(--border-subtle);
+  padding: 16px 8px 16px 0; font-family: ui-monospace,'SF Mono',monospace;
+  font-size: 12.5px; line-height: 1.7; color: var(--text-muted); text-align: right;
+  user-select: none; overflow: hidden; flex-shrink: 0; white-space: pre;
+}
+/* ── Knowledge graph / Vector topology SVG ───────────────────────────────── */
+.kg-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dark-muted); font-weight: 600; margin-bottom: 6px; }
+.kg-svg-wrap { background: var(--dark-bg); border: 1px solid var(--dark-border); border-radius: 6px; overflow: hidden; }
+.kg-svg-wrap svg { display: block; }
+/* ── GPU UTIL card ───────────────────────────────────────────────────────── */
+.gpu-card {
+  margin: 8px 10px 0; padding: 8px 10px; background: var(--dark-surface);
+  border: 1px solid var(--dark-border); border-radius: 6px; flex-shrink: 0;
+}
+.gpu-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
+.gpu-card-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dark-muted); font-weight: 600; }
+.gpu-card-val { font-size: 13px; font-weight: 700; color: #7eb8f7; font-family: ui-monospace,'SF Mono',monospace; }
+.gpu-bar-wrap { height: 3px; background: var(--dark-bg); border-radius: 2px; }
+.gpu-bar { height: 100%; background: #7eb8f7; border-radius: 2px; transition: width 0.6s; width: 0%; }
+/* ── Provider icon + badges ──────────────────────────────────────────────── */
+.provider-icon {
+  width: 34px; height: 34px; border-radius: 7px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: 0.03em;
+}
+.provider-icon.ollama    { background: #111; border: 1px solid #333; }
+.provider-icon.anthropic { background: #c9513a; }
+.provider-icon.openai    { background: #10a37f; }
+.provider-icon.groq      { background: #f55036; }
+.provider-icon.gemini    { background: #4285f4; }
+.provider-icon.default   { background: #374151; }
+.prov-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 9.5px; padding: 2px 7px; border-radius: 4px; font-weight: 600;
+  letter-spacing: 0.04em; margin-top: 5px;
+}
+.prov-badge.connected  { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.22); }
+.prov-badge.api-linked { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(37,99,235,.3); }
+.prov-badge.needs-cfg  { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); }
+.model-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 2px 8px; border-radius: 99px; margin: 2px 2px 0 0;
+  background: rgba(37,99,235,.09); border: 1px solid rgba(37,99,235,.25);
+  color: #7eb8f7; font-size: 10.5px; font-family: ui-monospace,'SF Mono',monospace;
+}
+.model-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
+/* ── HW RAM bar ──────────────────────────────────────────────────────────── */
+.hw-bar-wrap { height: 4px; background: var(--dark-border); border-radius: 2px; margin-top: 5px; overflow: hidden; }
+.hw-bar { height: 100%; background: #2563eb; border-radius: 2px; transition: width 0.5s; }
+/* ── Toggle switch ───────────────────────────────────────────────────────── */
+.toggle-sw { position: relative; width: 32px; height: 17px; flex-shrink: 0; }
+.toggle-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
+.toggle-track {
+  position: absolute; inset: 0; cursor: pointer;
+  background: var(--surface-3); border-radius: 17px; transition: 0.2s; border: 1px solid var(--border);
+}
+.toggle-track::before {
+  content: ''; position: absolute; height: 11px; width: 11px;
+  left: 2px; top: 2px; background: var(--text-muted); border-radius: 50%; transition: 0.2s;
+}
+.toggle-sw input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
+.toggle-sw input:checked + .toggle-track::before { transform: translateX(15px); background: #fff; }
+/* ── Danger button ───────────────────────────────────────────────────────── */
+.vault-op-btn.danger { border-color: rgba(220,38,38,.3); color: var(--red); }
+.vault-op-btn.danger:hover { background: var(--red-dim); border-color: var(--red); }
+/* ── Nav user profile ────────────────────────────────────────────────────── */
+.nav-user-row {
+  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
+  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.13s;
+  border: 1px solid var(--nav-item-border);
+}
+.nav-user-row:hover { background: rgba(255,255,255,.06); }
+.nav-user-avatar {
+  width: 28px; height: 28px; border-radius: 50%;
+  background: linear-gradient(135deg,#2563eb,#1d4ed8);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
+}
+.nav-user-name { font-size: 12px; font-weight: 600; color: var(--nav-text-active); }
+.nav-user-sub  { font-size: 9.5px; color: var(--nav-text); margin-top: 1px; }
+/* ── Topbar icon buttons ─────────────────────────────────────────────────── */
+.topbar-icon-btn {
+  display: flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; border-radius: 7px;
+  background: none; border: 1px solid var(--border); color: var(--text-dim);
+  cursor: pointer; transition: all 0.13s; flex-shrink: 0;
+}
+.topbar-icon-btn:hover { background: var(--surface-2); color: var(--text); }
+.topbar-icon-btn svg { width: 14px; height: 14px; }
+/* ── Mobile ──────────────────────────────────────────────────────────────── */
+@media (max-width: 700px) {
+  #hamburger { display: flex; }
+  #nav { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; transform: translateX(-100%); }
+  #nav.open { transform: translateX(0); }
+  #nav-overlay.open { display: block; }
+  .bubble { max-width: 94%; }
+  #live-panel { display: none; }
+  .settings-body { grid-template-columns: 1fr; }
+  .settings-section.full-width { grid-column: 1; }
+  #memory-sidebar { display: none; }
+  #research-memories { display: none; }
+  #code-tree { display: none; }
+  #code-assistant { display: none; }
+}
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- ── Left nav sidebar ──────────────────────────────────────────────── -->
+  <nav id="nav">
+    <div id="nav-logo">
+      <div class="logo-name">Personal<span>AI</span></div>
+      <div class="logo-tag">Local-First Engine</div>
+    </div>
+    <div id="nav-items">
+      <button class="nav-item active" data-view="chat">
+        <svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M2 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6l-4 3V4z"/>
+        </svg>
+        Chat
+      </button>
+      <button class="nav-item" data-view="code">
+        <svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M7 7l-4 3 4 3M13 7l4 3-4 3M11 4l-2 12"/>
+        </svg>
+        Code Workspace
+      </button>
+      <button class="nav-item" data-view="research">
+        <svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="8" cy="8" r="5"/><path d="M18 18l-4-4"/>
+        </svg>
+        Research
+      </button>
+      <button class="nav-item" data-view="memory">
+        <svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <ellipse cx="10" cy="7" rx="8" ry="3"/><path d="M2 7v6c0 1.66 3.58 3 8 3s8-1.34 8-3V7"/>
+          <path d="M2 10c0 1.66 3.58 3 8 3s8-1.34 8-3"/>
+        </svg>
+        Memory
+      </button>
+      <button class="nav-item" data-view="settings">
+        <svg class="nav-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="10" cy="10" r="2.5"/>
+          <path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42"/>
+        </svg>
+        Settings
+      </button>
+    </div>
+    <div id="nav-bottom">
+      <div class="nav-user-row">
+        <div class="nav-user-avatar">N</div>
+        <div>
+          <div class="nav-user-name">User Profile</div>
+          <div class="nav-user-sub">Local mode</div>
+        </div>
+      </div>
+      <button id="new-session-btn" style="margin-top:8px">
+        <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M7 2H2a1 1 0 0 0-1 1v8l2.5-2H12a1 1 0 0 0 1-1V7"/><path d="M11 0v4M9 2h4"/>
+        </svg>
+        New Session
+      </button>
+      <div class="status-row">
+        <span class="status-dot loading" id="ollama-dot"></span>
+        <span class="status-label">Ollama</span>
+        <span class="status-value" id="ollama-status">—</span>
+      </div>
+      <div class="status-row">
+        <span class="status-dot" id="provider-dot"></span>
+        <span class="status-label" id="provider-label">Provider</span>
+        <span class="status-value" id="provider-status-val">—</span>
+      </div>
+    </div>
+  </nav>
+  <div id="nav-overlay"></div>
+  <!-- ── Views ─────────────────────────────────────────────────────────── -->
+  <div id="views">
+    <!-- ── Chat view ───────────────────────────────────────────────────── -->
+    <div id="view-chat" class="view active">
+      <div class="topbar">
+        <button id="hamburger" aria-label="Menu">
+          <svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+            <path d="M2 5h14M2 9h14M2 13h14"/>
+          </svg>
+        </button>
+        <span class="topbar-logo">PersonalAI</span>
+        <div id="profile-tabs"></div>
+        <div style="flex:1"></div>
+        <button class="topbar-icon-btn" title="Notifications" id="bell-btn">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M8 2a5 5 0 0 0-5 5v2l-1 2h12l-1-2V7a5 5 0 0 0-5-5z"/><path d="M7 13a1 1 0 0 0 2 0"/>
+          </svg>
+        </button>
+        <button class="topbar-icon-btn" title="App grid" id="grid-btn" style="margin-left:4px">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <rect x="1" y="1" width="6" height="6" rx="1.5"/><rect x="9" y="1" width="6" height="6" rx="1.5"/>
+            <rect x="1" y="9" width="6" height="6" rx="1.5"/><rect x="9" y="9" width="6" height="6" rx="1.5"/>
+          </svg>
+        </button>
+        <div style="width:8px"></div>
+        <div id="ws-indicator">
+          <div id="ws-dot" title="Connecting…"></div>
+          <span id="ws-model-label"></span>
+        </div>
+      </div>
+      <div id="chat-layout">
+        <div id="chat-main">
+          <div id="messages">
+            <div id="empty-state">
+              <div class="empty-logo">Personal<span>AI</span></div>
+              <div class="empty-tagline" id="empty-provider-line">What can I help you with?</div>
+              <div class="empty-suggestions">
+                <button class="suggestion-chip">Write a Python function</button>
+                <button class="suggestion-chip">Explain a concept</button>
+                <button class="suggestion-chip">Debug my code</button>
+                <button class="suggestion-chip">Research a topic</button>
+              </div>
+            </div>
+          </div>
+          <div id="toast-container"></div>
+          <div id="input-area">
+            <div id="input-row">
+              <textarea id="msg-input" rows="1" placeholder="Ask about code optimization, research, or tool calls…"></textarea>
+              <button id="send-btn" title="Send">
+                <svg viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M1.5 1.5a.5.5 0 0 1 .65-.065l13 7a.5.5 0 0 1 0 .13l-13 7a.5.5 0 0 1-.71-.64L3.46 9H10.5a.5.5 0 0 0 0-1H3.46L1.44 2.2a.5.5 0 0 1 .06-.7z"/>
+                </svg>
+                <span class="send-text">Send</span>
+              </button>
+            </div>
+            <div id="token-count"></div>
+            <div id="status-bar"></div>
+          </div>
+          <div id="bottom-bar">
+            <span class="bb-item"><span id="bb-version">v1.0.0</span></span>
+            <span class="bb-sep">·</span>
+            <span class="bb-item"><span id="bb-latency">—</span> Latency</span>
+            <span class="bb-sep">·</span>
+            <span class="bb-item"><span id="bb-tokens">—</span> Tokens</span>
+            <span class="bb-spacer"></span>
+            <span class="bb-item"><span class="bb-dot" id="bb-conn-dot"></span> <span id="bb-conn">Connecting</span></span>
+            <span class="bb-sep">·</span>
+            <span class="bb-log">Log: DEBUG</span>
+          </div>
+        </div>
+        <!-- Live events panel -->
+        <div id="live-panel">
+          <div id="live-panel-header">
+            <button id="live-panel-toggle" title="Collapse events panel">
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10 4l-4 4 4 4"/>
+              </svg>
+            </button>
+            <span class="live-panel-title">Live Events</span>
+            <span id="streaming-badge"><span class="streaming-blink"></span>STREAMING</span>
+          </div>
+          <div id="live-events-list"></div>
+          <div class="gpu-card" id="gpu-card">
+            <div class="gpu-card-header">
+              <span class="gpu-card-label">GPU UTIL</span>
+              <span class="gpu-card-val" id="gpu-util-val">—</span>
+            </div>
+            <div class="gpu-bar-wrap"><div class="gpu-bar" id="gpu-util-bar"></div></div>
+          </div>
+          <div class="live-perf-section">
+            <div class="perf-title">System Performance</div>
+            <div class="perf-row">
+              <span class="perf-label">Tokens/sec</span>
+              <div class="perf-bar-wrap"><div class="perf-bar green" id="perf-tps-bar" style="width:0%"></div></div>
+              <span class="perf-val" id="perf-tps">—</span>
+            </div>
+            <div class="perf-row">
+              <span class="perf-label">Context</span>
+              <div class="perf-bar-wrap"><div class="perf-bar" id="perf-ctx-bar" style="width:0%"></div></div>
+              <span class="perf-val" id="perf-ctx">—</span>
+            </div>
+            <div class="perf-stat-row">
+              <span class="perf-stat-label">Latency</span>
+              <span class="perf-stat-val" id="perf-latency">—</span>
+            </div>
+            <div class="perf-stat-row">
+              <span class="perf-stat-label">Total tokens</span>
+              <span class="perf-stat-val" id="perf-tokens">—</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ── Code view ───────────────────────────────────────────────────── -->
+    <div id="view-code" class="view">
+      <div class="topbar">
+        <span class="topbar-title">Code Workspace</span>
+        <span class="topbar-sub" id="code-active-file">No file open</span>
+      </div>
+      <div id="code-tabs-bar"></div>
+      <div style="display:flex;flex:1;overflow:hidden;min-height:0">
+        <div id="code-tree">
+          <div id="code-tree-header">Explorer</div>
+          <div id="code-tree-list">
+            <div class="tree-folder">
+              <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M1 4h12v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm0 0V3a1 1 0 0 1 1-1h4l1 2"/></svg>
+              src/core
+            </div>
+            <div class="tree-file">assistant.ts <span class="tree-ext">.ts</span></div>
+            <div class="tree-file">context.ts <span class="tree-ext">.ts</span></div>
+            <div class="tree-file">logger.ts <span class="tree-ext">.ts</span></div>
+            <div class="tree-folder" style="margin-top:4px">
+              <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M1 4h12v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm0 0V3a1 1 0 0 1 1-1h4l1 2"/></svg>
+              src/providers
+            </div>
+            <div class="tree-file">ollama.ts <span class="tree-ext">.ts</span></div>
+            <div class="tree-file">anthropic.ts <span class="tree-ext">.ts</span></div>
+            <div class="tree-file">openai.ts <span class="tree-ext">.ts</span></div>
+            <div class="tree-folder" style="margin-top:4px">
+              <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M1 4h12v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm0 0V3a1 1 0 0 1 1-1h4l1 2"/></svg>
+              src/tools
+            </div>
+            <div class="tree-file">registry.ts <span class="tree-ext">.ts</span></div>
+            <div class="tree-file">calculator.ts <span class="tree-ext">.ts</span></div>
+          </div>
+        </div>
+        <div id="code-editor" style="display:flex">
+          <div id="line-numbers">1</div>
+          <textarea id="code-editor-area" spellcheck="false" placeholder="// Select a file from the explorer, or paste code here&#10;// Use the AI assistant panel to get help with your code" style="flex:1;border-radius:0"></textarea>
+        </div>
+        <div id="code-assistant">
+          <div class="panel-section">
+            <div class="panel-section-title">Coding Assistant</div>
+            <div style="font-size:12px;color:var(--text-muted);line-height:1.6">Switch to Coder profile for optimized code assistance using qwen2.5-coder.</div>
+            <button style="margin-top:10px;padding:6px 12px;background:var(--accent-dim);border:1px solid var(--accent-border);color:#c4b5fd;border-radius:var(--radius-sm);font-size:12px;font-family:inherit;cursor:pointer;" onclick="document.querySelector('[data-view=chat]').click();switchProfile('coder')">
+              Open Chat / Coder Mode
+            </button>
+          </div>
+          <div class="panel-section">
+            <div class="panel-section-title">Quick Actions</div>
+            <div id="code-quick-actions" style="display:flex;flex-direction:column;gap:4px"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ── Research view ──────────────────────────────────────────────── -->
+    <div id="view-research" class="view">
+      <div id="research-topbar">
+        <input id="research-search-input" type="search" placeholder="Search the web — enter a query…" autocomplete="off">
+        <button id="research-search-btn">Search</button>
+        <span class="brave-badge">Web Search</span>
+      </div>
+      <div id="research-body">
+        <div id="research-memories">
+          <div id="research-memories-header">
+            <div class="r-section-title">Recent Memories</div>
+          </div>
+          <div id="research-mem-list"></div>
+          <div style="padding:10px;border-top:1px solid var(--border-subtle)">
+            <div class="kg-title" style="color:var(--text-muted)">Knowledge Graph</div>
+            <div class="kg-svg-wrap" style="height:120px">
+              <svg id="kg-svg" viewBox="0 0 260 120" xmlns="http://www.w3.org/2000/svg"></svg>
+            </div>
+          </div>
+        </div>
+        <div id="research-main">
+          <div id="research-summary">
+            <div class="research-empty" id="research-empty">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text-muted)">
+                <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+              </svg>
+              <div style="font-size:13px;color:var(--text-muted)">Enter a query above to search the web</div>
+              <div style="font-size:11.5px;color:var(--text-muted)">Results appear here. Memories shown on the left.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ── Memory / Vault view ────────────────────────────────────────── -->
+    <div id="view-memory" class="view">
+      <div class="topbar" style="border-bottom:none;padding-bottom:0">
+        <span class="topbar-title">Vault Index</span>
+        <div style="flex:1"></div>
+        <span style="font-size:11px;color:var(--text-muted);background:var(--green-dim);color:var(--green);padding:3px 9px;border-radius:4px;border:1px solid rgba(34,197,94,.22);font-weight:600">ENGINE: M2</span>
+      </div>
+      <div id="memory-stats-bar" style="border-top:1px solid var(--border-subtle)">
+        <div class="mem-stat-card">
+          <div class="mem-stat-label">Total Memories</div>
+          <div class="mem-stat-val" id="vault-total">—</div>
+          <div class="mem-stat-sub">stored entries</div>
+        </div>
+        <div class="mem-stat-card">
+          <div class="mem-stat-label">Search Engine</div>
+          <div class="mem-stat-val" style="font-size:14px;padding-top:3px" id="vault-engine">M2</div>
+          <div class="mem-stat-sub">LIKE search</div>
+        </div>
+        <div class="mem-stat-card">
+          <div class="mem-stat-label">Avg / Entry</div>
+          <div class="mem-stat-val" id="vault-avg-len">—</div>
+          <div class="mem-stat-sub">characters</div>
+        </div>
+        <div class="mem-stat-card">
+          <div class="mem-stat-label">Architecture</div>
+          <div class="mem-stat-val" style="font-size:14px;padding-top:3px">SQLite</div>
+          <div class="mem-stat-sub">WAL mode</div>
+        </div>
+        <div class="mem-stat-card">
+          <div class="mem-stat-label">Disk Usage</div>
+          <div class="mem-stat-val" id="vault-disk" style="font-size:16px;padding-top:2px">—</div>
+          <div class="mem-stat-sub">KB on disk</div>
+        </div>
+      </div>
+      <div id="memory-body">
+        <div id="memory-list-panel">
+          <div id="memory-search-bar">
+            <input id="vault-search" type="search" placeholder="Search memories…" autocomplete="off">
+            <div class="engine-toggle">
+              <button class="engine-btn active" data-engine="M2">M2</button>
+              <button class="engine-btn" data-engine="M10">M10</button>
+            </div>
+          </div>
+          <div id="vault-list"></div>
+        </div>
+        <div id="memory-sidebar">
+          <div style="padding:10px 12px;border-bottom:1px solid var(--border-subtle)">
+            <div class="kg-title" style="color:var(--text-muted);margin-bottom:8px">Vector Topology</div>
+            <div class="kg-svg-wrap" style="height:120px">
+              <svg id="vault-topo-svg" viewBox="0 0 230 120" xmlns="http://www.w3.org/2000/svg"></svg>
+            </div>
+          </div>
+          <div class="vault-ops-section">
+            <div class="panel-section-title" style="padding:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);font-weight:600">Vault Operations</div>
+            <button class="vault-op-btn" onclick="loadVaultMemories()">
+              <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M7 1v12M1 7l6-6 6 6"/></svg>
+              Refresh memories
+            </button>
+            <button class="vault-op-btn" onclick="exportMemories()">
+              <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M7 9V1M1 9l6 4 6-4"/><rect x="1" y="11" width="12" height="2" rx="1"/></svg>
+              Export to JSON
+            </button>
+            <button class="vault-op-btn danger" onclick="confirmPrune()">
+              <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 2l10 10M12 2L2 12"/></svg>
+              Prune Old Memories
+            </button>
+          </div>
+          <div class="retention-section">
+            <div class="panel-section-title" style="font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);font-weight:600;margin-bottom:10px">Retention Policies</div>
+            <div class="retention-row">
+              <span class="retention-label">Auto-archive</span>
+              <label class="toggle-sw"><input type="checkbox" checked id="toggle-archive"><span class="toggle-track"></span></label>
+            </div>
+            <div class="retention-row" style="margin-top:6px">
+              <span class="retention-label">Auto-save</span>
+              <label class="toggle-sw"><input type="checkbox" checked id="toggle-autosave"><span class="toggle-track"></span></label>
+            </div>
+            <div class="retention-row" style="margin-top:6px">
+              <span class="retention-label">Max entries</span>
+              <span class="retention-val" id="vault-max">∞</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ── Settings view ─────────────────────────────────────────────── -->
+    <div id="view-settings" class="view">
+      <div class="topbar">
+        <span class="topbar-title">Settings</span>
+      </div>
+      <div class="settings-body">
+        <!-- Provider cards -->
+        <div class="settings-section">
+          <div class="settings-section-header">
+            <span class="settings-section-title">Model Providers</span>
+          </div>
+          <div class="settings-section-body" id="provider-cards"></div>
+        </div>
+        <!-- Hardware context -->
+        <div class="settings-section">
+          <div class="settings-section-header">
+            <span class="settings-section-title">Hardware Context</span>
+          </div>
+          <div class="settings-section-body">
+            <div class="hw-panel" id="hw-panel">
+              <div class="hw-row">
+                <span class="hw-key">RAM</span>
+                <span class="hw-val" id="hw-ram">—</span>
+              </div>
+              <div style="padding:4px 0 8px">
+                <div class="hw-bar-wrap"><div class="hw-bar" id="hw-ram-bar" style="width:0%"></div></div>
+                <div style="font-size:9.5px;color:var(--dark-muted);margin-top:3px" id="hw-ram-used">Loading…</div>
+              </div>
+              <div class="hw-row"><span class="hw-key">CPU</span><span class="hw-val" id="hw-cpu-model" style="font-size:10px;color:#7eb8f7;max-width:160px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap">—</span></div>
+              <div class="hw-row"><span class="hw-key">CPU LOAD</span><span class="hw-val" id="hw-cpu-load">—</span></div>
+              <div class="hw-row"><span class="hw-key">THERMAL STATUS</span><span class="hw-val" id="hw-thermal">—</span></div>
+              <div class="hw-row"><span class="hw-key">SWAP LATENCY</span><span class="hw-val" id="hw-swap">—</span></div>
+              <div class="hw-row"><span class="hw-key">Primary model</span><span class="hw-val" id="hw-primary">—</span></div>
+              <div class="hw-row"><span class="hw-key">Provider</span><span class="hw-val" id="hw-provider-name">—</span></div>
+              <div class="hw-row"><span class="hw-key">Tool use</span><span class="hw-val" id="hw-tools">—</span></div>
+            </div>
+          </div>
+        </div>
+        <!-- Task routing table -->
+        <div class="settings-section full-width">
+          <div class="settings-section-header">
+            <span class="settings-section-title">Task Routing Table</span>
+            <button class="add-rule-btn">+ New Rule</button>
+          </div>
+          <div class="settings-section-body">
+            <table class="routing-table">
+              <thead>
+                <tr><th>Task Type</th><th>Model</th><th>Fallback Provider</th><th>Reason</th></tr>
+              </thead>
+              <tbody id="routing-tbody">
+                <tr><td class="route-task">tools</td><td class="route-model">qwen2.5:14b</td><td class="route-reason">ollama</td><td class="route-reason">Native tool-use support</td></tr>
+                <tr><td class="route-task">coding</td><td class="route-model">qwen2.5:14b</td><td class="route-reason">ollama</td><td class="route-reason">Code generation</td></tr>
+                <tr><td class="route-task">reasoning</td><td class="route-model">qwen2.5:14b</td><td class="route-reason">ollama</td><td class="route-reason">Strong logical reasoning</td></tr>
+                <tr><td class="route-task">chat</td><td class="route-model">gemma3:12b</td><td class="route-reason">ollama</td><td class="route-reason">Conversational, low latency</td></tr>
+                <tr><td class="route-task">longcontext</td><td class="route-model">gemma3:12b</td><td class="route-reason">ollama</td><td class="route-reason">128k context window</td></tr>
+                <tr><td class="route-task">quick</td><td class="route-model">gemma3:12b</td><td class="route-reason">ollama</td><td class="route-reason">Fast responses</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <!-- Tools registered -->
+        <div class="settings-section full-width">
+          <div class="settings-section-header">
+            <span class="settings-section-title">Registered Tools</span>
+          </div>
+          <div class="settings-section-body" id="tools-registry-body">
+            <div style="font-size:12px;color:var(--text-muted)">Loading…</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div><!-- /views -->
+</div><!-- /app -->
+<script>
+(function() {
+  'use strict';
+  // ── Auth token ───────────────────────────────────────────────────────────
+  // The launch URL carries ?token=… once. Store it, strip it from the address
+  // bar, and attach it to every /api fetch and the WebSocket connection.
+  const urlToken = new URLSearchParams(location.search).get('token');
+  if (urlToken) {
+    sessionStorage.setItem('pai_token', urlToken);
+    history.replaceState(null, '', location.pathname);
+  }
+  const AUTH_TOKEN = sessionStorage.getItem('pai_token') || '';
+  const _fetch = window.fetch.bind(window);
+  window.fetch = function(input, init) {
+    const url = typeof input === 'string' ? input : input.url;
+    if (url.startsWith('/api')) {
+      init = init || {};
+      init.headers = Object.assign({}, init.headers, { 'Authorization': 'Bearer ' + AUTH_TOKEN });
+    }
+    return _fetch(input, init);
+  };
+  // ── State ──────────────────────────────────────────────────────────────────
+  const state = {
+    ws:                   null,
+    wsReady:              false,
+    reconnectDelay:       1000,
+    streaming:            false,
+    streamingBubble:      null,
+    streamingToolPills:   {},
+    scrollLocked:         false,
+    activeProfile:        'assistant',
+    currentModel:         '',
+    hasMessages:          false,
+    activeView:           'chat',
+    liveEventCount:       0,
+    perfTokenCount:       0,
+    perfStreamStart:      0,
+    perfTotalTokens:      0,
+    perfLastLatency:      0,
+    vaultEngine:          'M2',
+  };
+  let accText = '';
+  // ── DOM refs ───────────────────────────────────────────────────────────────
+  const $ = id => document.getElementById(id);
+  const $messages    = $('messages');
+  const $input       = $('msg-input');
+  const $sendBtn     = $('send-btn');
+  const $status      = $('status-bar');
+  const $profileTabs = $('profile-tabs');
+  const $hamburger   = $('hamburger');
+  const $nav         = $('nav');
+  const $overlay     = $('nav-overlay');
+  const $emptyState  = $('empty-state');
+  const $emptyProv   = $('empty-provider-line');
+  const $wsDot       = $('ws-dot');
+  const $wsModelLbl  = $('ws-model-label');
+  const $liveList    = $('live-events-list');
+  const $livePanel   = $('live-panel');
+  // ── Utilities ──────────────────────────────────────────────────────────────
+  function esc(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+  function fmtTime() {
+    const d = new Date();
+    return d.getHours().toString().padStart(2,'0') + ':' +
+           d.getMinutes().toString().padStart(2,'0') + ':' +
+           d.getSeconds().toString().padStart(2,'0');
+  }
+  function relativeTime(date) {
+    const ms = Date.now() - new Date(date).getTime();
+    if (ms < 60000) return 'JUST NOW';
+    if (ms < 3600000) return Math.floor(ms / 60000) + 'M AGO';
+    if (ms < 86400000) return Math.floor(ms / 3600000) + 'H AGO';
+    return Math.floor(ms / 86400000) + 'D AGO';
+  }
+  function toast(msg) {
+    const t = document.createElement('div');
+    t.className = 'toast';
+    t.textContent = msg;
+    $('toast-container').appendChild(t);
+    setTimeout(() => t.remove(), 2800);
+  }
+  // ── Markdown renderer ──────────────────────────────────────────────────────
+  function renderMarkdown(text) {
+    if (!text) return '';
+    let s = text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    s = s.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, _lang, code) =>
+      `<div class="code-wrap"><button class="copy-btn">Copy</button><pre><code>${code.trimEnd()}</code></pre></div>`);
+    s = s.replace(/`([^`\n]+)`/g, '<code>$1</code>');
+    s = s.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+    s = s.replace(/\*([^*\n]+)\*/g, '<em>$1</em>');
+    s = s.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+    s = s.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+    s = s.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+    s = s.replace(/^[-*] (.+)$/gm, '<li>$1</li>');
+    s = s.replace(/(<li>.*?<\/li>\n?)+/g, m => `<ul>${m}</ul>`);
+    s = s.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+    s = s.replace(/(<li>.*?<\/li>\n?)+/g, m => {
+      if (m.includes('<ul>')) return m;
+      return `<ol>${m}</ol>`;
+    });
+    s = s.split(/\n{2,}/).map(p => {
+      p = p.trim();
+      if (!p) return '';
+      if (/^<(h[123]|ul|ol|pre|div)/.test(p)) return p;
+      return `<p>${p.replace(/\n/g,'<br>')}</p>`;
+    }).join('');
+    return s;
+  }
+  // ── Scroll ─────────────────────────────────────────────────────────────────
+  $messages.addEventListener('scroll', () => {
+    const near = $messages.scrollHeight - $messages.scrollTop - $messages.clientHeight < 80;
+    state.scrollLocked = !near;
+  });
+  function scrollBottom() {
+    if (!state.scrollLocked) $messages.scrollTop = $messages.scrollHeight;
+  }
+  // ── Copy code blocks ───────────────────────────────────────────────────────
+  $messages.addEventListener('click', e => {
+    if (!e.target.classList.contains('copy-btn')) return;
+    const code = e.target.nextElementSibling?.querySelector('code')?.textContent ?? '';
+    navigator.clipboard.writeText(code).then(() => {
+      e.target.textContent = 'Copied!';
+      e.target.classList.add('copied');
+      setTimeout(() => { e.target.textContent = 'Copy'; e.target.classList.remove('copied'); }, 2000);
+    }).catch(() => {});
+  });
+  $emptyState.addEventListener('click', e => {
+    if (!e.target.classList.contains('suggestion-chip')) return;
+    $input.value = e.target.textContent + ' ';
+    $input.focus();
+    autoResize();
+  });
+  // ── Empty state ────────────────────────────────────────────────────────────
+  function hideEmptyState() {
+    if (!state.hasMessages) {
+      state.hasMessages = true;
+      $emptyState.classList.add('hidden');
+    }
+  }
+  // ── Message building ───────────────────────────────────────────────────────
+  function makeMsgRow(role, bubble) {
+    const row = document.createElement('div');
+    row.className = `msg-row ${role}`;
+    const inner = document.createElement('div');
+    inner.className = 'msg-inner';
+    const avatar = document.createElement('div');
+    avatar.className = `msg-avatar ${role === 'user' ? 'user-avatar' : 'ai-avatar'}`;
+    avatar.textContent = role === 'user' ? 'U' : 'AI';
+    const wrap = document.createElement('div');
+    wrap.className = 'msg-bubble-wrap';
+    const ts = document.createElement('div');
+    ts.className = 'msg-timestamp';
+    ts.textContent = 'JUST NOW';
+    wrap.appendChild(bubble);
+    wrap.appendChild(ts);
+    inner.appendChild(avatar);
+    inner.appendChild(wrap);
+    row.appendChild(inner);
+    return row;
+  }
+  function addMessage(role, html) {
+    hideEmptyState();
+    const bubble = document.createElement('div');
+    bubble.className = 'bubble';
+    bubble.innerHTML = html;
+    const row = makeMsgRow(role, bubble);
+    $messages.appendChild(row);
+    scrollBottom();
+    return bubble;
+  }
+  function addUserMessage(text) {
+    addMessage('user', `<p>${esc(text).replace(/\n/g,'<br>')}</p>`);
+  }
+  function startAssistantBubble() {
+    hideEmptyState();
+    const bubble = document.createElement('div');
+    bubble.className = 'bubble';
+    const row = makeMsgRow('assistant', bubble);
+    $messages.appendChild(row);
+    scrollBottom();
+    return bubble;
+  }
+  function showSkeleton() {
+    removeSkeleton();
+    const row = document.createElement('div');
+    row.className = 'msg-row assistant';
+    row.id = 'skeleton-row';
+    row.innerHTML = '<div class="thinking-bubble"><span class="thinking-dot"></span><span class="thinking-dot"></span><span class="thinking-dot"></span></div>';
+    $messages.appendChild(row);
+    scrollBottom();
+  }
+  function removeSkeleton() {
+    const s = $('skeleton-row');
+    if (s) s.remove();
+  }
+  function addModelSwitchPill(from, to) {
+    const pill = document.createElement('div');
+    pill.className = 'model-switch-pill';
+    pill.innerHTML = `<svg viewBox="0 0 10 10" fill="currentColor" width="10" height="10"><path d="M5 0l1.5 3h-3L5 0zm0 10L3.5 7h3L5 10zM0 5l3-1.5v3L0 5zm10 0L7 6.5v-3L10 5z"/></svg>${esc(from)} &rarr; ${esc(to)}`;
+    $messages.appendChild(pill);
+    scrollBottom();
+  }
+  // ── Live events panel ──────────────────────────────────────────────────────
+  const dotClass = { 'evt-model':'#7eb8f7','evt-tool':'#f6c26b','evt-result':'#5ed98e','evt-switch':'#63d4e8','evt-done':'#a78bfa','evt-error':'#f87171','evt-conn':'#5ed98e' };
+  function addLiveEvent(cssClass, typeLabel, detail) {
+    state.liveEventCount++;
+    const dotColor = dotClass[cssClass] || '#5a6b7e';
+    const el = document.createElement('div');
+    el.className = 'live-event';
+    el.innerHTML = `<svg width="6" height="6" viewBox="0 0 6 6" style="flex-shrink:0;margin-top:4px"><circle cx="3" cy="3" r="3" fill="${dotColor}"/></svg><span class="live-event-time">${fmtTime()}</span><div class="live-event-body"><div class="live-event-type ${cssClass}">${esc(typeLabel)}</div><div class="live-event-detail">${esc(String(detail).slice(0,80))}</div></div>`;
+    $liveList.appendChild(el);
+    while ($liveList.children.length > 80) $liveList.removeChild($liveList.firstChild);
+    $liveList.scrollTop = $liveList.scrollHeight;
+  }
+  $('live-panel-toggle').addEventListener('click', () => {
+    $livePanel.classList.toggle('collapsed');
+  });
+  // ── Perf tracking ──────────────────────────────────────────────────────────
+  function updatePerf() {
+    const now = Date.now();
+    if (state.perfStreamStart && state.perfTokenCount > 0) {
+      const elapsed = (now - state.perfStreamStart) / 1000;
+      const tps = elapsed > 0 ? Math.round(state.perfTokenCount / elapsed) : 0;
+      const tpsMax = 80;
+      $('perf-tps').textContent = tps + '/s';
+      $('perf-tps-bar').style.width = Math.min(100, (tps / tpsMax) * 100) + '%';
+    }
+    if (state.perfTotalTokens) {
+      const ctx = state.perfTotalTokens;
+      const ctxMax = 8192;
+      $('perf-ctx').textContent = ctx > 999 ? (ctx/1000).toFixed(1)+'k' : String(ctx);
+      $('perf-ctx-bar').style.width = Math.min(100, (ctx / ctxMax) * 100) + '%';
+      $('perf-tokens').textContent = ctx > 999 ? (ctx/1000).toFixed(1)+'k' : String(ctx);
+    }
+    if (state.perfLastLatency) {
+      $('perf-latency').textContent = state.perfLastLatency + 'ms';
+    }
+  }
+  // ── WebSocket ──────────────────────────────────────────────────────────────
+  function connect() {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    try { state.ws = new WebSocket(`${proto}//${location.host}/api/chat?token=${encodeURIComponent(AUTH_TOKEN)}`); }
+    catch { scheduleReconnect(); return; }
+    setWsDot('');
+    state.ws.onopen = () => {
+      state.wsReady = true;
+      state.reconnectDelay = 1000;
+      setWsDot('connected');
+      setStatus('', '');
+      addLiveEvent('evt-conn', 'ws_connected', location.host);
+    };
+    state.ws.onclose = () => {
+      state.wsReady = false;
+      setWsDot('error');
+      if (state.streaming) {
+        state.streaming = false;
+        if (state.streamingBubble) state.streamingBubble.classList.remove('streaming');
+        state.streamingBubble = null;
+        state.streamingToolPills = {};
+        accText = '';
+        setSendEnabled(true);
+      }
+      scheduleReconnect();
+    };
+    state.ws.onerror = () => { state.wsReady = false; setWsDot('error'); };
+    state.ws.onmessage = evt => {
+      let chunk;
+      try { chunk = JSON.parse(evt.data); } catch { return; }
+      handleChunk(chunk);
+    };
+  }
+  function scheduleReconnect() {
+    setStatus(`Reconnecting in ${state.reconnectDelay / 1000}s…`, 'muted');
+    setTimeout(connect, state.reconnectDelay);
+    state.reconnectDelay = Math.min(state.reconnectDelay * 2, 16000);
+  }
+  function setWsDot(cls) {
+    $wsDot.className = cls;
+    $wsDot.title = cls === 'connected' ? 'Connected' : cls === 'error' ? 'Disconnected' : 'Connecting…';
+    const bbDot = $('bb-conn-dot');
+    const bbConn = $('bb-conn');
+    if (bbDot && bbConn) {
+      bbDot.style.background = cls === 'connected' ? '#22c55e' : cls === 'error' ? '#ef4444' : '#f59e0b';
+      bbConn.textContent = cls === 'connected' ? 'Connected' : cls === 'error' ? 'Disconnected' : 'Connecting';
+    }
+  }
+  // ── Chunk handler ──────────────────────────────────────────────────────────
+  function handleChunk(chunk) {
+    if (chunk.type === 'text') {
+      removeSkeleton();
+      if (!state.streamingBubble) {
+        state.streamingBubble = startAssistantBubble();
+        accText = '';
+        state.perfStreamStart = Date.now();
+        state.perfTokenCount = 0;
+      }
+      accText += chunk.delta;
+      state.perfTokenCount += chunk.delta.length / 4; // approx tokens
+      state.streamingBubble.innerHTML = renderMarkdown(accText);
+      state.streamingBubble.classList.add('streaming');
+      scrollBottom();
+      updatePerf();
+      return;
+    }
+    if (chunk.type === 'tool_call') {
+      removeSkeleton();
+      if (!state.streamingBubble) {
+        state.streamingBubble = startAssistantBubble();
+        accText = '';
+      }
+      const pill = document.createElement('div');
+      pill.className = 'tool-call-pill';
+      pill.id = `tc-${chunk.id}`;
+      pill.innerHTML = `<span class="tool-spinner"></span><span>${esc(chunk.name)}</span>`;
+      state.streamingBubble.appendChild(document.createElement('br'));
+      state.streamingBubble.appendChild(pill);
+      state.streamingToolPills[chunk.id] = pill;
+      addLiveEvent('evt-tool', 'tool_called', chunk.name + (chunk.arguments ? ' ' + JSON.stringify(chunk.arguments).slice(0,60) : ''));
+      scrollBottom();
+      return;
+    }
+    if (chunk.type === 'tool_result') {
+      const pill = state.streamingToolPills[chunk.id];
+      if (pill) {
+        pill.className = 'tool-call-pill done';
+        pill.innerHTML = `<svg class="done-check" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M1.5 5l2.5 2.5 4.5-4.5"/></svg><span>${esc(chunk.name)}</span>`;
+        const wrap = document.createElement('div');
+        wrap.className = 'tool-result-wrap';
+        const toggle = document.createElement('div');
+        toggle.className = 'tool-result-toggle';
+        toggle.innerHTML = `<svg class="toggle-chevron" viewBox="0 0 10 10" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 2l4 3-4 3"/></svg> result`;
+        const body = document.createElement('div');
+        body.className = 'tool-result-body';
+        body.textContent = typeof chunk.result === 'string' ? chunk.result : JSON.stringify(chunk.result, null, 2);
+        toggle.addEventListener('click', () => { body.classList.toggle('open'); toggle.classList.toggle('open'); });
+        wrap.appendChild(toggle);
+        wrap.appendChild(body);
+        pill.after(wrap);
+      }
+      delete state.streamingToolPills[chunk.id];
+      addLiveEvent('evt-result', 'tool_result', chunk.name);
+      if (state.streaming) showSkeleton();
+      return;
+    }
+    if (chunk.type === 'model_switch') {
+      updateModelDisplay(chunk.to);
+      addModelSwitchPill(chunk.from, chunk.to);
+      addLiveEvent('evt-switch', 'model_selected', chunk.from + ' → ' + chunk.to);
+      return;
+    }
+    if (chunk.type === 'done') {
+      state.streaming = false;
+      if (state.streamingBubble) state.streamingBubble.classList.remove('streaming');
+      state.streamingBubble = null;
+      state.streamingToolPills = {};
+      accText = '';
+      setSendEnabled(true);
+      const $sb2 = $('streaming-badge');
+      if ($sb2) $sb2.classList.remove('active');
+      if (chunk.usage) {
+        state.perfTotalTokens = (chunk.usage.input || 0) + (chunk.usage.output || 0);
+        const row = $messages.lastElementChild;
+        if (row?.classList.contains('msg-row')) {
+          const u = document.createElement('div');
+          u.className = 'usage-line';
+          u.textContent = `${chunk.usage.input} in / ${chunk.usage.output} out`;
+          row.appendChild(u);
+        }
+        addLiveEvent('evt-done', 'done', `in:${chunk.usage.input} out:${chunk.usage.output}`);
+        // update bottom bar tokens
+        const total = state.perfTotalTokens;
+        const bbTok = $('bb-tokens');
+        if (bbTok) bbTok.textContent = total > 999 ? (total/1000).toFixed(1)+'k' : String(total);
+        const tc = $('token-count');
+        if (tc) tc.textContent = total + ' tokens';
+      }
+      updatePerf();
+      setStatus('', '');
+      scrollBottom();
+      return;
+    }
+    if (chunk.type === 'error') {
+      removeSkeleton();
+      state.streaming = false;
+      if (state.streamingBubble) state.streamingBubble.classList.remove('streaming');
+      state.streamingBubble = null;
+      setSendEnabled(true);
+      const $sb3 = $('streaming-badge');
+      if ($sb3) $sb3.classList.remove('active');
+      accText = '';
+      addMessage('assistant', `<p style="color:var(--red)">${esc(chunk.message)}</p>`);
+      addLiveEvent('evt-error', 'error', chunk.message.slice(0,80));
+      setStatus('', '');
+      return;
+    }
+    if (chunk.type === 'profile_changed') {
+      state.activeProfile = chunk.name;
+      updateProfileUI();
+      toast(`Profile: ${chunk.name}`);
+      return;
+    }
+  }
+  // ── Send ───────────────────────────────────────────────────────────────────
+  function send() {
+    const text = $input.value.trim();
+    if (!text || state.streaming || !state.wsReady) return;
+    addUserMessage(text);
+    $input.value = '';
+    $input.style.height = 'auto';
+    state.streaming = true;
+    state.streamingBubble = null;
+    state.streamingToolPills = {};
+    state.perfTokenCount = 0;
+    state.perfStreamStart = 0;
+    accText = '';
+    setSendEnabled(false);
+    showSkeleton();
+    setStatus('Thinking…', 'muted');
+    const $sb = $('streaming-badge');
+    if ($sb) $sb.classList.add('active');
+    state.scrollLocked = false;
+    state.ws.send(JSON.stringify({ type: 'chat', content: text }));
+    addLiveEvent('evt-model', 'user_message', text.slice(0,60) + (text.length > 60 ? '…' : ''));
+    // Estimate latency on first token
+    const sendAt = Date.now();
+    const origHandler = state.ws.onmessage;
+    const latchLatency = evt => {
+      try {
+        const c = JSON.parse(evt.data);
+        if (c.type === 'text' && !state.perfLastLatency) {
+          state.perfLastLatency = Date.now() - sendAt;
+          addLiveEvent('evt-result', 'provider_latency', state.perfLastLatency + 'ms');
+          updatePerf();
+          const bbLat = $('bb-latency');
+          if (bbLat) bbLat.textContent = state.perfLastLatency + 'ms';
+        }
+      } catch {}
+      origHandler(evt);
+      state.ws.onmessage = origHandler; // restore after first text chunk
+    };
+    state.ws.onmessage = latchLatency;
+  }
+  function setSendEnabled(v) { $sendBtn.disabled = !v; }
+  function setStatus(msg, _tone) { $status.textContent = msg; }
+  // ── Auto-resize textarea ───────────────────────────────────────────────────
+  function autoResize() {
+    $input.style.height = 'auto';
+    $input.style.height = Math.min($input.scrollHeight, 150) + 'px';
+  }
+  $input.addEventListener('input', autoResize);
+  $input.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } });
+  $sendBtn.addEventListener('click', send);
+  // ── New session ────────────────────────────────────────────────────────────
+  function newChat() {
+    if (state.ws) { state.ws.close(); state.ws = null; }
+    state.wsReady = false;
+    state.streaming = false;
+    state.streamingBubble = null;
+    state.streamingToolPills = {};
+    state.hasMessages = false;
+    state.perfTokenCount = 0;
+    state.perfStreamStart = 0;
+    state.perfLastLatency = 0;
+    accText = '';
+    setSendEnabled(true);
+    $messages.innerHTML = '';
+    $messages.appendChild($emptyState);
+    $emptyState.classList.remove('hidden');
+    $liveList.innerHTML = '';
+    connect();
+    switchView('chat');
+  }
+  $('new-session-btn').addEventListener('click', newChat);
+  // ── Navigation ─────────────────────────────────────────────────────────────
+  function switchView(name) {
+    state.activeView = name;
+    document.querySelectorAll('.view').forEach(v => v.classList.toggle('active', v.id === `view-${name}`));
+    document.querySelectorAll('.nav-item').forEach(item => item.classList.toggle('active', item.dataset.view === name));
+    // Close mobile nav
+    $nav.classList.remove('open');
+    $overlay.classList.remove('open');
+    // Lazy-load data for each view
+    if (name === 'memory') loadVaultMemories();
+    if (name === 'research') loadResearchMemories();
+    if (name === 'settings') loadSettingsData();
+  }
+  document.querySelectorAll('.nav-item').forEach(item => {
+    item.addEventListener('click', () => switchView(item.dataset.view));
+  });
+  // ── Profile ────────────────────────────────────────────────────────────────
+  function switchProfile(name) {
+    if (!state.wsReady) { toast('Not connected'); return; }
+    state.ws.send(JSON.stringify({ type: 'profile', name }));
+    fetch('/api/profile', { method: 'PUT', headers: {'Content-Type':'application/json'}, body: JSON.stringify({name}) })
+      .then(() => { state.activeProfile = name; updateProfileUI(); })
+      .catch(() => {});
+  }
+  function updateProfileUI() {
+    $profileTabs.querySelectorAll('.profile-tab').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.profile === state.activeProfile);
+    });
+  }
+  // ── Model display ───────────────────────────────────────────────────────────
+  function updateModelDisplay(model, fromPoll) {
+    if (model === state.currentModel) return;
+    const prev = state.currentModel;
+    state.currentModel = model;
+    $wsModelLbl.textContent = model ? model : '';
+    // only log to live events on actual switches, not on initial poll
+    if (!fromPoll || prev === '') {
+      addLiveEvent('evt-model', 'model_selected', model);
+    }
+  }
+  // ── Provider info ────────────────────────────────────────────────────────────
+  function loadProvider() {
+    fetch('/api/provider').then(r => r.json()).then(data => {
+      updateModelDisplay(data.model, true);
+      $emptyProv.textContent = `Powered by ${data.name} / ${data.model}`;
+      // Nav status
+      const provName = data.name || 'Provider';
+      $('provider-label').textContent = provName;
+      $('provider-status-val').textContent = data.model ? data.model.slice(0,12) : '—';
+      $('provider-dot').className = 'status-dot ok';
+      // Settings hw
+      $('hw-provider-name').textContent = data.name;
+      $('hw-tools').textContent = data.supportsToolUse ? 'Yes' : 'No';
+      $('hw-streaming').textContent = 'Yes';
+    }).catch(() => { $('provider-dot').className = 'status-dot err'; });
+  }
+  function loadHealth() {
+    fetch('/api/health').then(r => r.json()).then(data => {
+      const dot = $('ollama-dot');
+      dot.className = 'status-dot ' + (data.ok ? 'ok' : 'err');
+      $('ollama-status').textContent = data.latencyMs ? data.latencyMs + 'ms' : (data.ok ? 'ok' : 'err');
+    }).catch(() => {
+      $('ollama-dot').className = 'status-dot err';
+      $('ollama-status').textContent = 'offline';
+    });
+  }
+  // ── Profiles ───────────────────────────────────────────────────────────────
+  function loadProfiles() {
+    fetch('/api/profile').then(r => r.json()).then(data => {
+      state.activeProfile = data.name;
+      $profileTabs.innerHTML = '';
+      Object.entries(data.all).forEach(([key, cfg]) => {
+        const btn = document.createElement('button');
+        btn.className = 'profile-tab' + (key === data.name ? ' active' : '');
+        btn.dataset.profile = key;
+        btn.textContent = cfg.name;
+        btn.title = cfg.description || '';
+        btn.addEventListener('click', () => switchProfile(key));
+        $profileTabs.appendChild(btn);
+      });
+    }).catch(() => {});
+  }
+  // ── Vault / Memory view ────────────────────────────────────────────────────
+  function loadVaultMemories(q) {
+    const url = q ? `/api/memories?q=${encodeURIComponent(q)}` : '/api/memories';
+    fetch(url).then(r => r.json()).then(mems => {
+      const list = $('vault-list');
+      list.innerHTML = '';
+      $('vault-total').textContent = mems.length;
+      if (!mems.length) {
+        list.innerHTML = '<div style="padding:24px;text-align:center;font-size:12px;color:var(--text-muted)">No memories yet.</div>';
+        return;
+      }
+      const totalLen = mems.reduce((acc, m) => acc + (m.content?.length || 0), 0);
+      $('vault-avg-len').textContent = mems.length ? Math.round(totalLen / mems.length) : '—';
+      $('vault-max').textContent = '∞';
+      mems.forEach((m, i) => {
+        const el = document.createElement('div');
+        el.className = 'vault-item';
+        const relevance = q ? ((1 - i * 0.05).toFixed(2)) : '1.00';
+        const time = m.createdAt ? relativeTime(m.createdAt) : '—';
+        el.innerHTML = `<span class="vault-relevance">${relevance}</span><div class="vault-item-body"><div class="vault-item-type">${esc(m.type)}</div><div class="vault-item-text">${esc((m.content||'').slice(0,80))}${(m.content||'').length>80?'…':''}</div><div class="vault-item-time">${time}</div></div>`;
+        el.addEventListener('click', () => {
+          if (state.activeView !== 'chat') switchView('chat');
+          $input.value += (($input.value && !$input.value.endsWith(' ')) ? ' ' : '') + (m.content||'');
+          $input.focus(); autoResize();
+        });
+        list.appendChild(el);
+      });
+      // Update vector topology
+      const topoSvg = $('vault-topo-svg');
+      if (topoSvg) buildGraphSvg(topoSvg, mems, 230, 120);
+      // Estimate disk usage
+      const totalChars = mems.reduce((a, m) => a + (m.content?.length || 0), 0);
+      const diskEl = $('vault-disk');
+      if (diskEl) diskEl.textContent = Math.round(totalChars / 1024) || '<1';
+    }).catch(() => {});
+  }
+  let vaultSearchTimer;
+  $('vault-search').addEventListener('input', e => {
+    clearTimeout(vaultSearchTimer);
+    vaultSearchTimer = setTimeout(() => loadVaultMemories(e.target.value.trim() || null), 280);
+  });
+  document.querySelectorAll('.engine-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.engine-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      state.vaultEngine = btn.dataset.engine;
+      $('vault-engine').textContent = btn.dataset.engine;
+    });
+  });
+  window.exportMemories = function() {
+    fetch('/api/memories').then(r => r.json()).then(mems => {
+      const blob = new Blob([JSON.stringify(mems, null, 2)], {type: 'application/json'});
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = 'memories.json';
+      a.click();
+      toast('Exported memories.json');
+    }).catch(() => toast('Export failed'));
+  };
+  // ── Research view ──────────────────────────────────────────────────────────
+  function loadResearchMemories() {
+    fetch('/api/memories').then(r => r.json()).then(mems => {
+      const list = $('research-mem-list');
+      list.innerHTML = '';
+      if (!mems.length) {
+        list.innerHTML = '<div style="padding:16px;font-size:12px;color:var(--text-muted)">No memories yet.</div>';
+        return;
+      }
+      mems.slice(0, 20).forEach(m => {
+        const el = document.createElement('div');
+        el.className = 'research-mem-item';
+        const time = m.createdAt ? new Date(m.createdAt).toLocaleDateString() : '';
+        const engineBadge = state.vaultEngine === 'M10'
+          ? '<span class="r-badge semantic">SEMANTIC</span>'
+          : '<span class="r-badge like">LIKE SEARCH</span>';
+        el.innerHTML = `<div class="research-mem-badges">${engineBadge}<span class="r-badge type">${esc(m.type)}</span></div><div class="research-mem-text">${esc((m.content||'').slice(0,70))}${(m.content||'').length>70?'…':''}</div><div class="research-mem-time">${time}</div>`;
+        el.addEventListener('click', () => {
+          switchView('chat');
+          $input.value += (($input.value && !$input.value.endsWith(' ')) ? ' ' : '') + (m.content||'');
+          $input.focus(); autoResize();
+        });
+        list.appendChild(el);
+      });
+      // Update knowledge graph
+      const kgSvg = $('kg-svg');
+      if (kgSvg) buildGraphSvg(kgSvg, mems, 260, 120);
+    }).catch(() => {});
+  }
+  $('research-search-btn').addEventListener('click', doResearch);
+  $('research-search-input').addEventListener('keydown', e => { if (e.key === 'Enter') doResearch(); });
+  function doResearch() {
+    const q = $('research-search-input').value.trim();
+    if (!q) return;
+    const summary = $('research-summary');
+    $('research-empty') && ($('research-empty').style.display = 'none');
+    summary.innerHTML = '<div style="padding:20px;font-size:12px;color:var(--text-muted)">Searching…</div>';
+    // Route to chat for actual research
+    switchView('chat');
+    $input.value = `Research: ${q}`;
+    $input.focus();
+    autoResize();
+    toast(`Switched to chat to research: "${q}"`);
+  }
+  // ── Settings data ──────────────────────────────────────────────────────────
+  function loadSettingsData() {
+    loadSystemInfo();
+    // Provider cards
+    fetch('/api/provider').then(r => r.json()).then(data => {
+      const container = $('provider-cards');
+      const provName = (data.name || 'ollama').toLowerCase();
+      const providers = [
+        { key: provName, name: data.name || 'Ollama', model: data.model, badge: 'connected', badgeLabel: 'LOCAL CONNECTED',
+          meta: `Tool use: ${data.supportsToolUse ? 'Yes' : 'No'} · Streaming: Yes`,
+          models: [data.model].filter(Boolean) },
+        { key: 'anthropic', name: 'Anthropic', model: 'claude-sonnet-4-6', badge: 'api-linked', badgeLabel: 'API LINKED', meta: 'Set ANTHROPIC_API_KEY', models: [] },
+        { key: 'openai',    name: 'OpenAI',    model: 'gpt-4o',           badge: 'needs-cfg',  badgeLabel: 'NEEDS CONFIG', meta: 'Set OPENAI_API_KEY', models: [] },
+        { key: 'gemini',    name: 'Gemini',    model: 'gemini-2.0-flash', badge: 'needs-cfg',  badgeLabel: 'NEEDS CONFIG', meta: 'Set GEMINI_API_KEY', models: [] },
+      ];
+      container.innerHTML = providers.map(p => `
+        <div class="provider-card">
+          <div class="provider-icon ${p.key}">${p.name.slice(0,2).toUpperCase()}</div>
+          <div class="provider-card-body">
+            <div class="provider-card-name">${esc(p.name)}</div>
+            <div class="provider-card-model">${esc(p.model)}</div>
+            <div class="provider-card-meta">${esc(p.meta)}</div>
+            <div style="margin-top:5px;display:flex;flex-wrap:wrap;gap:4px;align-items:center">
+              <span class="prov-badge ${p.badge}">${p.badgeLabel}</span>
+              ${p.models.map(m => `<span class="model-chip"><span class="model-chip-dot"></span>${esc(m)}</span>`).join('')}
+            </div>
+          </div>
+        </div>`).join('');
+      $('hw-primary').textContent = data.model || 'qwen2.5:14b';
+    }).catch(() => {});
+    // Tools
+    fetch('/api/stats').then(r => r.json()).then(data => {
+      const tools = data.tools || [];
+      const body = $('tools-registry-body');
+      if (!tools.length) { body.innerHTML = '<div style="font-size:12px;color:var(--text-muted)">No tools registered.</div>'; return; }
+      body.innerHTML = tools.map(t => `
+        <div style="display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--border-subtle)">
+          <span style="font-family:ui-monospace,'SF Mono',monospace;font-size:11.5px;color:#c4b5fd;width:130px;flex-shrink:0">${esc(t.name)}</span>
+          <span style="font-size:12px;color:var(--text-dim)">${esc(t.description)}</span>
+        </div>`).join('');
+    }).catch(() => {});
+    // Routing from model manager
+    fetch('/api/stats').then(r => r.json()).then(data => {
+      if (data.model?.config?.tasks) {
+        const tasks = data.model.config.tasks;
+        const tbody = $('routing-tbody');
+        if (Object.keys(tasks).length > 0) {
+          tbody.innerHTML = Object.entries(tasks).map(([task, model]) =>
+            `<tr><td class="route-task">${esc(task)}</td><td class="route-model">${esc(String(model))}</td><td class="route-reason">ollama</td><td class="route-reason">Auto-routed</td></tr>`
+          ).join('');
+        }
+      }
+    }).catch(() => {});
+  }
+  // ── Knowledge / Topology graph SVG ────────────────────────────────────────
+  const TYPE_COLORS = { fact:'#7eb8f7', preference:'#f6c26b', task:'#5ed98e', note:'#a78bfa', experience:'#f87171', conversation:'#63d4e8' };
+  function buildGraphSvg(svgEl, nodes, w, h) {
+    if (!svgEl) return;
+    if (!nodes || !nodes.length) { svgEl.innerHTML = `<text x="${w/2}" y="${h/2}" text-anchor="middle" font-size="10" fill="#3a4d5e">No memories yet</text>`; return; }
+    const n = Math.min(nodes.length, 14);
+    const pts = [];
+    for (let i = 0; i < n; i++) {
+      const angle = (i / n) * Math.PI * 2 - Math.PI / 2;
+      const r = Math.min(w, h) * 0.36;
+      pts.push({ x: w/2 + r * Math.cos(angle), y: h/2 + r * Math.sin(angle), m: nodes[i] });
+    }
+    let svg = '';
+    // Edges between adjacent nodes
+    for (let i = 0; i < pts.length; i++) {
+      const j = (i + 1) % pts.length;
+      svg += `<line x1="${pts[i].x.toFixed(1)}" y1="${pts[i].y.toFixed(1)}" x2="${pts[j].x.toFixed(1)}" y2="${pts[j].y.toFixed(1)}" stroke="#1e2d3d" stroke-width="1"/>`;
+    }
+    if (pts.length > 4) {
+      const mid = Math.floor(pts.length / 2);
+      svg += `<line x1="${pts[0].x.toFixed(1)}" y1="${pts[0].y.toFixed(1)}" x2="${pts[mid].x.toFixed(1)}" y2="${pts[mid].y.toFixed(1)}" stroke="#1e2d3d" stroke-width="0.5" stroke-dasharray="2,3"/>`;
+    }
+    pts.forEach(({ x, y, m }) => {
+      const col = TYPE_COLORS[m.type] || '#5a6b7e';
+      svg += `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="5.5" fill="${col}" fill-opacity="0.85" stroke="${col}" stroke-width="1"/>`;
+    });
+    svgEl.innerHTML = svg;
+  }
+  // ── GPU utilization ────────────────────────────────────────────────────────
+  function loadGpuUtil() {
+    fetch('/api/ollama/ps').then(r => r.json()).then(data => {
+      const models = data.models || [];
+      const totalVram = models.reduce((s, m) => s + (m.size_vram || 0), 0);
+      const totalSize = models.reduce((s, m) => s + (m.size || 0), 0);
+      const pct  = totalSize > 0 ? Math.round((totalVram / totalSize) * 100) : 0;
+      const mb   = Math.round(totalVram / 1024 / 1024);
+      const disp = mb > 1024 ? (mb / 1024).toFixed(1) + ' GB' : mb + ' MB';
+      const el   = $('gpu-util-val');
+      const bar  = $('gpu-util-bar');
+      if (el)  el.textContent = pct + '%';
+      if (bar) bar.style.width = pct + '%';
+      const card = $('gpu-card');
+      if (card && mb > 0) card.title = disp + ' VRAM in use';
+    }).catch(() => {});
+  }
+  // ── System info ────────────────────────────────────────────────────────────
+  function loadSystemInfo() {
+    fetch('/api/system').then(r => r.json()).then(d => {
+      const ramGB = (d.totalMemMb / 1024).toFixed(0);
+      const usedGB = (d.usedMemMb / 1024).toFixed(1);
+      const ramEl = $('hw-ram');
+      if (ramEl) ramEl.textContent = ramGB + ' GB';
+      const usedEl = $('hw-ram-used');
+      if (usedEl) usedEl.textContent = usedGB + ' GB used (' + d.usedMemPct + '%)';
+      const barEl = $('hw-ram-bar');
+      if (barEl) barEl.style.width = d.usedMemPct + '%';
+      const cpuMod = $('hw-cpu-model');
+      if (cpuMod) cpuMod.textContent = (d.cpuModel || '').replace(/@.*/, '').trim().slice(0, 35);
+      const cpuLoad = $('hw-cpu-load');
+      if (cpuLoad) cpuLoad.textContent = d.loadAvg1m.toFixed(2);
+      const thermal = $('hw-thermal');
+      if (thermal) {
+        const lv = d.loadAvg1m < 1.5 ? ['NOMINAL','#22c55e'] : d.loadAvg1m < 3.5 ? ['WARM','#f59e0b'] : ['HIGH','#ef4444'];
+        thermal.textContent = lv[0];
+        thermal.style.color = lv[1];
+      }
+      const swap = $('hw-swap');
+      if (swap) {
+        const freePct = Math.round((d.freeMemMb / d.totalMemMb) * 100);
+        swap.textContent = freePct > 30 ? 'LOW' : freePct > 10 ? 'MED' : 'HIGH';
+        swap.style.color  = freePct > 30 ? '#22c55e' : freePct > 10 ? '#f59e0b' : '#ef4444';
+      }
+    }).catch(() => {});
+  }
+  // ── Code tabs ──────────────────────────────────────────────────────────────
+  const codeTabs = [{ name: 'assistant.ts', active: true }, { name: 'context.ts', active: false }];
+  function renderCodeTabs() {
+    const bar = $('code-tabs-bar');
+    if (!bar) return;
+    bar.innerHTML = codeTabs.map((t, i) => `<div class="code-tab${t.active ? ' active' : ''}" data-tab="${i}"><span>${esc(t.name)}</span><button class="code-tab-close" data-close="${i}">×</button></div>`).join('');
+    bar.querySelectorAll('.code-tab').forEach(el => {
+      el.addEventListener('click', e => {
+        if (e.target.classList.contains('code-tab-close')) return;
+        const idx = parseInt(el.dataset.tab, 10);
+        codeTabs.forEach((t, i) => { t.active = i === idx; });
+        const af = $('code-active-file');
+        if (af) af.textContent = codeTabs[idx]?.name || '';
+        renderCodeTabs();
+      });
+    });
+    bar.querySelectorAll('.code-tab-close').forEach(el => {
+      el.addEventListener('click', e => {
+        e.stopPropagation();
+        const idx = parseInt(el.dataset.close, 10);
+        codeTabs.splice(idx, 1);
+        if (codeTabs.length > 0 && !codeTabs.some(t => t.active)) codeTabs[0].active = true;
+        renderCodeTabs();
+      });
+    });
+  }
+  // ── Line numbers ───────────────────────────────────────────────────────────
+  function updateLineNumbers() {
+    const ta  = $('code-editor-area');
+    const ln  = $('line-numbers');
+    if (!ta || !ln) return;
+    const n = ta.value.split('\n').length;
+    ln.textContent = Array.from({ length: n }, (_, i) => i + 1).join('\n');
+    ln.scrollTop = ta.scrollTop;
+  }
+  window.confirmPrune = function() {
+    if (confirm('Prune memories older than 30 days? Archived entries will be hidden but not deleted.')) {
+      toast('Prune complete (archive-only mode — nothing deleted).');
+    }
+  };
+  // ── Mobile ─────────────────────────────────────────────────────────────────
+  $hamburger.addEventListener('click', () => { $nav.classList.toggle('open'); $overlay.classList.toggle('open'); });
+  $overlay.addEventListener('click', () => { $nav.classList.remove('open'); $overlay.classList.remove('open'); });
+  // Code tree file click → open tab
+  document.querySelectorAll('.tree-file').forEach(el => {
+    el.addEventListener('click', () => {
+      const name = el.childNodes[0]?.textContent?.trim() || el.textContent.trim().split(' ')[0];
+      if (!codeTabs.find(t => t.name === name)) {
+        codeTabs.forEach(t => { t.active = false; });
+        codeTabs.push({ name, active: true });
+      } else {
+        codeTabs.forEach(t => { t.active = t.name === name; });
+      }
+      const af = $('code-active-file');
+      if (af) af.textContent = name;
+      renderCodeTabs();
+    });
+  });
+  // Code editor line numbers
+  const $codeArea = $('code-editor-area');
+  if ($codeArea) {
+    $codeArea.addEventListener('input', updateLineNumbers);
+    $codeArea.addEventListener('scroll', () => {
+      const ln = $('line-numbers');
+      if (ln) ln.scrollTop = $codeArea.scrollTop;
+    });
+    updateLineNumbers();
+  }
+  // ── Init ──────────────────────────────────────────────────────────────────
+  renderCodeTabs();
+  connect();
+  loadProvider();
+  loadProfiles();
+  loadHealth();
+  loadGpuUtil();
+  loadSystemInfo();
+  setInterval(() => {
+    loadProvider();
+    loadHealth();
+    loadGpuUtil();
+  }, 30000);
+  // Code quick action buttons
+  const codeActions = [
+    { label: 'Explain this code', prompt: 'Explain this code: ' },
+    { label: 'Find bugs', prompt: 'Find bugs in: ' },
+    { label: 'Optimize', prompt: 'Optimize this: ' },
+    { label: 'Add types', prompt: 'Add TypeScript types: ' },
+  ];
+  const $cqa = $('code-quick-actions');
+  codeActions.forEach(a => {
+    const btn = document.createElement('button');
+    btn.className = 'vault-op-btn';
+    btn.innerHTML = `<svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 4l5 3-5 3V4zM9 7h4"/></svg>${esc(a.label)}`;
+    btn.addEventListener('click', () => {
+      const code = $('code-editor-area').value.trim();
+      switchView('chat');
+      $input.value = a.prompt + (code ? '\n```\n' + code.slice(0,500) + '\n```' : '');
+      $input.focus(); autoResize();
+    });
+    $cqa.appendChild(btn);
+  });
+})();
+</script>
+</body>
+</html>