diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,1398 +1,1266 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>RAG Pipeline Visualizer</title>
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
-<style>
-/* ═══════════════════════════════════════════════════════════ */
-/*  TOKENS                                                     */
-/* ═══════════════════════════════════════════════════════════ */
-:root {
-  --bg:       #040912;
-  --bg2:      #07111f;
-  --surface:  #0b1a2e;
-  --surface2: #102038;
-  --surface3: #162845;
-  --border:   #1d3254;
-  --border2:  #26405e;
-
-  --cyan:     #00e5ff;
-  --cyan-dim: rgba(0,229,255,.12);
-  --purple:   #a855f7;
-  --purple-dim:rgba(168,85,247,.12);
-  --green:    #00ff88;
-  --green-dim:rgba(0,255,136,.10);
-  --amber:    #ffaa00;
-  --amber-dim:rgba(255,170,0,.12);
-  --red:      #ff4455;
-  --pink:     #f472b6;
-
-  --text:     #c8dff5;
-  --text2:    #7a9ab8;
-  --text3:    #3d5a7a;
-
-  --mono: 'JetBrains Mono', monospace;
-  --sans: 'DM Sans', system-ui, sans-serif;
-}
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  RESET & BASE                                               */
-/* ═══════════════════════════════════════════════════════════ */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; overflow: hidden; }
-body {
-  font-family: var(--sans);
-  background: var(--bg);
-  color: var(--text);
-  display: grid;
-  grid-template-rows: 44px 200px 1fr;
-  height: 100vh;
-}
-
-/* scrollbar */
-::-webkit-scrollbar { width: 4px; height: 4px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  HEADER                                                     */
-/* ═══════════════════════════════════════════════════════════ */
-#header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 0 16px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  position: relative; z-index: 50;
-}
-#header::after {
-  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
-  height: 1px;
-  background: linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent);
-  opacity: .4;
-}
-.header-title {
-  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .06em;
-  background: linear-gradient(90deg, var(--cyan), var(--purple));
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-}
-.header-title span { -webkit-text-fill-color: var(--text3); font-weight: 300; }
-.model-badges { display: flex; gap: 8px; }
-.badge {
-  display: flex; align-items: center; gap: 5px;
-  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border2);
-  font-family: var(--mono); font-size: 10px; color: var(--text3);
-  transition: all .3s;
-}
-.badge.loading { border-color: var(--amber); color: var(--amber); }
-.badge.ready   { border-color: var(--green); color: var(--green); }
-.badge.error   { border-color: var(--red);   color: var(--red); }
-.badge-dot {
-  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
-}
-.badge.loading .badge-dot { animation: blink 1s infinite; }
-@keyframes blink { 0%,100%{opacity:1}50%{opacity:.2} }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  NODE FLOW EDITOR                                           */
-/* ═══════════════════════════════════════════════════════════ */
-#node-editor {
-  position: relative;
-  background: var(--bg2);
-  border-bottom: 1px solid var(--border);
-  overflow: hidden;
-}
-#flow-canvas { display: block; }
-
-/* Settings panel */
-#node-settings {
-  position: absolute; right: 0; top: 0; bottom: 0; width: 240px;
-  background: var(--surface);
-  border-left: 1px solid var(--border);
-  padding: 14px;
-  overflow-y: auto;
-  transform: translateX(100%);
-  transition: transform .25s;
-  z-index: 10;
-}
-#node-settings.open { transform: translateX(0); }
-.ns-title {
-  font-family: var(--mono); font-size: 12px; font-weight: 600;
-  margin-bottom: 14px; letter-spacing: .04em;
-}
-.ns-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
-.ns-label {
-  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
-  letter-spacing: .08em; color: var(--text3);
-}
-.ns-input {
-  background: var(--surface3); border: 1px solid var(--border);
-  color: var(--text); padding: 5px 8px; border-radius: 4px;
-  font-family: var(--mono); font-size: 11px; width: 100%;
-  outline: none; transition: border-color .2s;
-}
-.ns-input:focus { border-color: var(--cyan); }
-.ns-close {
-  float: right; background: none; border: none; color: var(--text2);
-  cursor: pointer; font-size: 16px; line-height: 1;
-}
-.ns-close:hover { color: var(--text); }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  MAIN PANELS                                                */
-/* ═══════════════════════════════════════════════════════════ */
-#main {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  overflow: hidden;
-  min-height: 0;
-}
-.panel {
-  display: flex; flex-direction: column; overflow: hidden;
-  border-right: 1px solid var(--border);
-  min-height: 0;
-}
-.panel:last-child { border-right: none; }
-.panel-hdr {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 7px 12px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.panel-hdr-title {
-  font-family: var(--mono); font-size: 10px; font-weight: 600;
-  text-transform: uppercase; letter-spacing: .1em; color: var(--text2);
-}
-.panel-hdr-badge {
-  font-family: var(--mono); font-size: 9px; color: var(--text3);
-  padding: 2px 6px; border-radius: 4px; background: var(--surface2);
-}
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  CHAT PANEL                                                 */
-/* ═══════════════════════════════════════════════════════════ */
-#chat-messages {
-  flex: 1; overflow-y: auto; padding: 10px;
-  display: flex; flex-direction: column; gap: 8px;
-  min-height: 0;
-}
-.msg { display: flex; flex-direction: column; gap: 3px; }
-.msg.user { align-items: flex-end; }
-.msg.assistant { align-items: flex-start; }
-.msg-bubble {
-  max-width: 88%; padding: 8px 11px; border-radius: 8px;
-  font-size: 12px; line-height: 1.55; white-space: pre-wrap;
-}
-.msg.user .msg-bubble {
-  background: linear-gradient(135deg, var(--purple), #7c3aed);
-  color: #fff; border-radius: 8px 8px 2px 8px;
-}
-.msg.assistant .msg-bubble {
-  background: var(--surface2); border: 1px solid var(--border);
-  color: var(--text); border-radius: 8px 8px 8px 2px;
-}
-.msg-time {
-  font-family: var(--mono); font-size: 9px; color: var(--text3);
-  padding: 0 4px;
-}
-.ctx-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
-.ctx-chip {
-  font-family: var(--mono); font-size: 9px;
-  padding: 1px 6px; border-radius: 10px;
-  background: var(--cyan-dim); border: 1px solid var(--cyan);
-  color: var(--cyan);
-}
-/* typing dots */
-.typing { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
-.typing i {
-  width: 5px; height: 5px; border-radius: 50%;
-  background: var(--purple); display: block;
-  animation: tdot 1s infinite;
-}
-.typing i:nth-child(2){animation-delay:.15s}
-.typing i:nth-child(3){animation-delay:.3s}
-@keyframes tdot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
-
-/* chat input */
-#chat-input-wrap {
-  flex-shrink: 0; display: flex; gap: 6px; padding: 9px 10px;
-  border-top: 1px solid var(--border); background: var(--surface);
-}
-#chat-input {
-  flex: 1; background: var(--surface3); border: 1px solid var(--border);
-  color: var(--text); padding: 7px 11px; border-radius: 6px;
-  font-family: var(--sans); font-size: 12px; outline: none;
-  transition: border-color .2s;
-}
-#chat-input:focus { border-color: var(--purple); }
-#chat-input::placeholder { color: var(--text3); }
-#chat-input:disabled { opacity: .4; cursor: not-allowed; }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  BUTTONS                                                    */
-/* ═══════════════════════════════════════��═══════════════════ */
-.btn {
-  padding: 7px 13px; border-radius: 6px; border: none; cursor: pointer;
-  font-family: var(--mono); font-size: 11px; font-weight: 600;
-  transition: all .18s; letter-spacing: .03em;
-}
-.btn-cyan {
-  background: var(--cyan); color: var(--bg);
-}
-.btn-cyan:hover { filter: brightness(1.15); transform: translateY(-1px); }
-.btn-cyan:active { transform: translateY(0); }
-.btn-cyan:disabled { opacity: .35; cursor: not-allowed; transform: none; filter: none; }
-.btn-ghost {
-  background: var(--surface3); color: var(--text2);
-  border: 1px solid var(--border);
-}
-.btn-ghost:hover { border-color: var(--border2); color: var(--text); }
-.btn-ghost:disabled { opacity: .35; cursor: not-allowed; }
-.btn-green {
-  background: var(--green); color: var(--bg);
-}
-.btn-green:hover { filter: brightness(1.1); }
-.btn-green:disabled { opacity: .35; cursor: not-allowed; filter: none; }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  RETRIEVAL PANEL                                            */
-/* ═══════════════════════════════════════════════════════════ */
-#retrieval-panel { display: flex; flex-direction: column; min-height: 0; }
-.ret-section { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
-.ret-section + .ret-section { border-top: 1px solid var(--border); }
-.ret-section-hdr {
-  flex-shrink: 0; padding: 5px 10px;
-  font-family: var(--mono); font-size: 9px; font-weight: 600;
-  text-transform: uppercase; letter-spacing: .1em;
-  color: var(--text3); background: var(--surface2);
-  border-bottom: 1px solid var(--border);
-  display: flex; justify-content: space-between; align-items: center;
-}
-.ret-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
-.ret-item {
-  padding: 8px 10px; background: var(--surface2);
-  border: 1px solid var(--border); border-radius: 5px;
-  font-size: 11px; transition: all .35s; position: relative;
-  cursor: default;
-}
-.ret-item.lit {
-  border-color: var(--cyan);
-  box-shadow: 0 0 0 1px var(--cyan-dim), inset 0 0 20px var(--cyan-dim);
-  background: rgba(0,229,255,.05);
-  animation: ret-pop .35s ease;
-}
-.ret-item.selected {
-  border-color: var(--green);
-  box-shadow: 0 0 0 1px var(--green-dim), inset 0 0 20px var(--green-dim);
-  background: rgba(0,255,136,.04);
-  animation: ret-pop .35s ease;
-}
-@keyframes ret-pop{0%{transform:scale(.96);opacity:.5}100%{transform:scale(1);opacity:1}}
-.ret-rank {
-  position: absolute; top: -8px; left: 8px;
-  font-family: var(--mono); font-size: 9px; font-weight: 700;
-  padding: 1px 5px; border-radius: 4px;
-  background: var(--amber); color: var(--bg);
-}
-.ret-item.selected .ret-rank { background: var(--green); }
-.ret-text {
-  color: var(--text); font-size: 11px; line-height: 1.45;
-  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
-  margin-bottom: 5px;
-}
-.ret-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
-.ret-meta { font-family: var(--mono); font-size: 9px; color: var(--text3); }
-.score-bar { flex: 1; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
-.score-fill {
-  height: 100%; border-radius: 1px;
-  transition: width .6s ease;
-  background: linear-gradient(90deg, var(--purple), var(--cyan));
-}
-.ret-item.selected .score-fill {
-  background: linear-gradient(90deg, var(--green), var(--cyan));
-}
-.score-pct { font-family: var(--mono); font-size: 9px; color: var(--text2); white-space: nowrap; }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  VECTOR DB PANEL                                            */
-/* ═══════════════════════════════════════════════════════════ */
-#add-form {
-  flex-shrink: 0; padding: 9px; background: var(--surface2);
-  border-bottom: 1px solid var(--border);
-  display: flex; flex-direction: column; gap: 6px;
-}
-#add-form textarea {
-  background: var(--surface3); border: 1px solid var(--border);
-  color: var(--text); padding: 7px 9px; border-radius: 5px;
-  font-family: var(--sans); font-size: 11px; resize: none; height: 54px;
-  outline: none; width: 100%; line-height: 1.45; transition: border-color .2s;
-}
-#add-form textarea:focus { border-color: var(--green); }
-#add-form textarea::placeholder { color: var(--text3); }
-.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
-.form-row input {
-  background: var(--surface3); border: 1px solid var(--border);
-  color: var(--text); padding: 5px 8px; border-radius: 4px;
-  font-family: var(--mono); font-size: 10px; outline: none; width: 100%;
-  transition: border-color .2s;
-}
-.form-row input:focus { border-color: var(--green); }
-.form-row input::placeholder { color: var(--text3); }
-.embed-progress { display: none; }
-.embed-progress.show { display: block; }
-.embed-progress-bar {
-  height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; margin-top: 2px;
-}
-.embed-progress-fill {
-  height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan));
-  border-radius: 1px; width: 0; transition: width .3s;
-}
-.embed-progress-txt {
-  font-family: var(--mono); font-size: 9px; color: var(--green);
-}
-
-/* table */
-#vdb-table-wrap { flex: 1; overflow: auto; min-height: 0; }
-#vdb-table {
-  width: 100%; border-collapse: collapse;
-  font-family: var(--mono); font-size: 10px;
-}
-#vdb-table th {
-  padding: 5px 8px; background: var(--surface3);
-  border-bottom: 1px solid var(--border);
-  text-align: left; font-weight: 600; color: var(--text3);
-  text-transform: uppercase; letter-spacing: .06em;
-  position: sticky; top: 0; z-index: 1;
-}
-#vdb-table td {
-  padding: 5px 8px; border-bottom: 1px solid rgba(29,50,84,.4);
-  color: var(--text); vertical-align: top;
-}
-#vdb-table tr { transition: background .3s; }
-#vdb-table tr:hover td { background: var(--surface2); }
-#vdb-table tr.lit td { background: rgba(0,229,255,.05); }
-#vdb-table tr.lit { outline: 1px solid var(--cyan); }
-.vec-chip {
-  display: inline-block;
-  font-size: 9px; color: var(--cyan); white-space: nowrap;
-  overflow: hidden; text-overflow: ellipsis; max-width: 80px;
-}
-.tag {
-  display: inline-block; padding: 1px 5px; border-radius: 3px;
-  font-size: 9px; font-weight: 600;
-  background: var(--surface3); border: 1px solid var(--border); color: var(--text3);
-}
-.tag.new-tag { border-color: var(--green); color: var(--green); animation: tag-glow 2s ease; }
-@keyframes tag-glow{0%{box-shadow:0 0 10px var(--green)}100%{box-shadow:none}}
-.tag.selected-tag { border-color: var(--cyan); color: var(--cyan); }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  EMPTY STATE                                                */
-/* ═══════════════════════════════════════════════════════════ */
-.empty {
-  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
-  color: var(--text3); font-size: 11px; gap: 7px; padding: 20px; text-align: center;
-}
-.empty-icon { font-size: 28px; opacity: .5; }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  TOAST                                                      */
-/* ═══════════════════════════════════════════════════════════ */
-#toast {
-  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(60px);
-  padding: 8px 16px; background: var(--surface3); border: 1px solid var(--border2);
-  border-radius: 8px; font-family: var(--mono); font-size: 11px; color: var(--text);
-  transition: transform .3s; z-index: 999; pointer-events: none; white-space: nowrap;
-}
-#toast.show { transform: translateX(-50%) translateY(0); }
-
-/* ═══════════════════════════════════════════════════════════ */
-/*  LOADING OVERLAY                                            */
-/* ═══════════════════════════════════════════════════════════ */
-#loading-overlay {
-  position: fixed; inset: 0; background: var(--bg);
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 20px; z-index: 200; transition: opacity .5s;
-}
-#loading-overlay.fade { opacity: 0; pointer-events: none; }
-.lo-title {
-  font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: .08em;
-  background: linear-gradient(90deg, var(--cyan), var(--purple));
-  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-}
-.lo-sub {
-  font-family: var(--sans); font-size: 12px; color: var(--text2); text-align: center;
-  max-width: 340px; line-height: 1.6;
-}
-.lo-steps { display: flex; flex-direction: column; gap: 8px; width: 320px; }
-.lo-step {
-  display: flex; align-items: center; gap: 10px;
-  font-family: var(--mono); font-size: 11px; color: var(--text3);
-  transition: color .3s;
-}
-.lo-step.active { color: var(--cyan); }
-.lo-step.done { color: var(--green); }
-.lo-step-icon { font-size: 14px; width: 20px; text-align: center; }
-.lo-bar-wrap { width: 320px; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
-.lo-bar-fill {
-  height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple));
-  border-radius: 1px; width: 0%; transition: width .5s;
-}
-</style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Browser RAG Visualizer</title>
+  <style>
+    :root {
+      --bg: #0b1020;
+      --panel: rgba(16, 22, 42, 0.86);
+      --panel-2: rgba(12, 16, 31, 0.96);
+      --line: rgba(148, 163, 184, 0.16);
+      --text: #e5eefc;
+      --muted: #8fa3c7;
+      --accent: #74c0fc;
+      --accent-2: #a78bfa;
+      --good: #38d39f;
+      --warn: #fbbf24;
+      --bad: #fb7185;
+      --chip: rgba(116, 192, 252, 0.12);
+      --shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
+      --radius: 18px;
+    }
+    * { box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      margin: 0;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--text);
+      background:
+        radial-gradient(circle at top left, rgba(116,192,252,.20), transparent 24%),
+        radial-gradient(circle at 75% 15%, rgba(167,139,250,.16), transparent 22%),
+        linear-gradient(180deg, #08101f 0%, #0b1020 100%);
+      overflow: hidden;
+    }
+    button, input, textarea, select {
+      font: inherit;
+      color: inherit;
+    }
+    button {
+      border: 0;
+      cursor: pointer;
+      background: linear-gradient(135deg, rgba(116,192,252,.95), rgba(167,139,250,.92));
+      color: #04101d;
+      font-weight: 700;
+      padding: 10px 14px;
+      border-radius: 14px;
+      box-shadow: 0 10px 26px rgba(116, 192, 252, 0.15);
+    }
+    button.secondary {
+      background: rgba(148, 163, 184, 0.12);
+      color: var(--text);
+      box-shadow: none;
+      border: 1px solid var(--line);
+    }
+    button.ghost {
+      background: transparent;
+      color: var(--muted);
+      border: 1px solid var(--line);
+      box-shadow: none;
+    }
+    .app {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      height: 100vh;
+    }
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--line);
+      background: rgba(6, 10, 22, 0.72);
+      backdrop-filter: blur(14px);
+    }
+    .titlebox h1 {
+      font-size: 16px;
+      margin: 0 0 4px;
+      letter-spacing: 0.3px;
+    }
+    .titlebox p {
+      margin: 0;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .statusbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .chip {
+      padding: 7px 10px;
+      border-radius: 999px;
+      border: 1px solid var(--line);
+      background: var(--chip);
+      color: #dbeafe;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .chip.good { background: rgba(56,211,159,.12); }
+    .chip.warn { background: rgba(251,191,36,.12); }
+    .chip.bad { background: rgba(251,113,133,.12); }
+    .workspace {
+      display: grid;
+      grid-template-columns: minmax(290px, 0.95fr) minmax(520px, 2.1fr);
+      gap: 14px;
+      padding: 14px;
+      overflow: hidden;
+      min-height: 0;
+    }
+    .panel {
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(14px);
+      overflow: hidden;
+      min-height: 0;
+    }
+    .panel-header {
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--line);
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+      align-items: center;
+      background: rgba(255,255,255,0.02);
+    }
+    .panel-header h2 {
+      font-size: 13px;
+      margin: 0;
+      letter-spacing: 0.25px;
+      text-transform: uppercase;
+      color: #dbeafe;
+    }
+    .panel-header small { color: var(--muted); }
+    .scroll { overflow: auto; min-height: 0; }
+    .chat-panel {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      min-height: 0;
+    }
+    .chat-log {
+      padding: 14px;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      min-height: 0;
+    }
+    .msg {
+      max-width: 95%;
+      padding: 12px 13px;
+      border-radius: 16px;
+      border: 1px solid var(--line);
+      line-height: 1.45;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .msg.user {
+      align-self: flex-end;
+      background: rgba(116,192,252,.10);
+      border-top-right-radius: 6px;
+    }
+    .msg.assistant {
+      align-self: flex-start;
+      background: rgba(148,163,184,.08);
+      border-top-left-radius: 6px;
+    }
+    .msg.system {
+      align-self: stretch;
+      color: var(--muted);
+      background: rgba(15, 23, 42, 0.55);
+      font-size: 12px;
+    }
+    .chat-context {
+      padding: 0 14px 12px;
+      border-top: 1px solid var(--line);
+    }
+    .context-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .context-pill {
+      font-size: 11px;
+      padding: 7px 9px;
+      border-radius: 999px;
+      background: rgba(167,139,250,.12);
+      border: 1px solid rgba(167,139,250,.22);
+      color: #f3e8ff;
+    }
+    .chat-input-wrap {
+      padding: 12px 14px 14px;
+      border-top: 1px solid var(--line);
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 10px;
+      background: rgba(255,255,255,0.02);
+    }
+    .chat-input-wrap textarea,
+    .form-row input,
+    .form-row textarea,
+    .form-row select,
+    .node-settings input,
+    .node-settings select {
+      width: 100%;
+      background: rgba(6, 10, 22, 0.72);
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      color: var(--text);
+      padding: 10px 12px;
+      outline: none;
+    }
+    .chat-input-wrap textarea { min-height: 74px; resize: vertical; }
+    .right-grid {
+      display: grid;
+      grid-template-rows: minmax(260px, auto) minmax(240px, auto) minmax(240px, 1fr);
+      gap: 14px;
+      min-height: 0;
+    }
+    .subgrid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 14px;
+      min-height: 0;
+    }
+    .content {
+      padding: 14px;
+      min-height: 0;
+    }
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1.5fr .8fr .8fr .8fr auto;
+      gap: 10px;
+      align-items: end;
+    }
+    .form-row label,
+    .node-settings label,
+    .mini-label {
+      display: block;
+      font-size: 11px;
+      color: var(--muted);
+      margin-bottom: 6px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .table-wrap {
+      overflow: auto;
+      border: 1px solid var(--line);
+      border-radius: 16px;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+      min-width: 980px;
+    }
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background: rgba(9, 14, 28, 0.96);
+      text-align: left;
+      padding: 11px 10px;
+      border-bottom: 1px solid var(--line);
+      color: #dbeafe;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    tbody td {
+      padding: 10px 10px;
+      border-bottom: 1px solid rgba(148,163,184,.10);
+      vertical-align: top;
+      color: #e2e8f0;
+    }
+    tbody tr:hover { background: rgba(116,192,252,.06); }
+    tbody tr.selected {
+      background: linear-gradient(90deg, rgba(56,211,159,.10), rgba(116,192,252,.08));
+      animation: pulse 1.2s ease-in-out infinite alternate;
+    }
+    @keyframes pulse {
+      from { box-shadow: inset 0 0 0 0 rgba(56,211,159,.0); }
+      to { box-shadow: inset 0 0 0 999px rgba(56,211,159,.03); }
+    }
+    .tag {
+      display: inline-block;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: rgba(148,163,184,.12);
+      margin: 0 4px 4px 0;
+      color: #dbeafe;
+      font-size: 11px;
+    }
+    .tiny { color: var(--muted); font-size: 11px; }
+    .vectors {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 11px;
+      color: #cbd5e1;
+      max-width: 320px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .sections {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 14px;
+      min-height: 0;
+    }
+    .section-card {
+      background: var(--panel-2);
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      overflow: hidden;
+      min-height: 0;
+    }
+    .section-card .section-head {
+      padding: 11px 14px;
+      border-bottom: 1px solid var(--line);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+    }
+    .section-head strong { font-size: 12px; }
+    .section-body { padding: 14px; min-height: 0; }
+    .selected-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      min-height: 42px;
+    }
+    .selected-card {
+      width: min(100%, 320px);
+      border: 1px solid rgba(56,211,159,.25);
+      background: rgba(56,211,159,.08);
+      border-radius: 16px;
+      padding: 10px 12px;
+      box-shadow: inset 0 0 0 1px rgba(56,211,159,.06);
+    }
+    .selected-card b { font-size: 12px; display: block; margin-bottom: 5px; }
+    .selected-card .score { color: #86efac; font-size: 11px; }
+    .flow-area {
+      position: relative;
+      min-height: 280px;
+      height: 100%;
+      border-radius: 18px;
+      border: 1px solid var(--line);
+      background:
+        radial-gradient(circle at 20% 20%, rgba(116,192,252,.08), transparent 24%),
+        radial-gradient(circle at 80% 25%, rgba(167,139,250,.08), transparent 24%),
+        rgba(6,10,22,.55);
+      overflow: hidden;
+      touch-action: none;
+    }
+    .flow-lines {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    .node {
+      position: absolute;
+      width: 180px;
+      min-height: 100px;
+      border-radius: 18px;
+      border: 1px solid rgba(148,163,184,.20);
+      background: rgba(12, 16, 31, 0.96);
+      box-shadow: 0 14px 26px rgba(0,0,0,.25);
+      overflow: hidden;
+    }
+    .node.active {
+      border-color: rgba(56,211,159,.6);
+      box-shadow: 0 0 0 1px rgba(56,211,159,.18), 0 18px 32px rgba(0,0,0,.30);
+    }
+    .node-header {
+      padding: 9px 11px;
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+      align-items: center;
+      border-bottom: 1px solid rgba(148,163,184,.12);
+      cursor: grab;
+      user-select: none;
+      background: rgba(255,255,255,.02);
+    }
+    .node-header strong { font-size: 12px; }
+    .node-body { padding: 10px 11px 11px; }
+    .node-pill {
+      font-size: 10px;
+      padding: 4px 7px;
+      border-radius: 999px;
+      background: rgba(116,192,252,.12);
+      color: #cfe8ff;
+    }
+    .node-settings {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-top: 10px;
+    }
+    .node-settings .full { grid-column: 1 / -1; }
+    .runlog {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-height: 180px;
+      overflow: auto;
+      font-size: 12px;
+    }
+    .logline {
+      border-left: 2px solid rgba(116,192,252,.35);
+      padding: 6px 10px;
+      background: rgba(116,192,252,.06);
+      border-radius: 10px;
+      color: #dbeafe;
+    }
+    .footerline {
+      color: var(--muted);
+      font-size: 11px;
+      padding-top: 10px;
+      border-top: 1px solid var(--line);
+      margin-top: 12px;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-radius: 999px;
+      padding: 6px 10px;
+      font-size: 11px;
+      border: 1px solid var(--line);
+      background: rgba(255,255,255,.03);
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--warn);
+      box-shadow: 0 0 0 4px rgba(251,191,36,.12);
+    }
+    .dot.good { background: var(--good); box-shadow: 0 0 0 4px rgba(56,211,159,.12); }
+    .dot.bad { background: var(--bad); box-shadow: 0 0 0 4px rgba(251,113,133,.12); }
+    .canvas-wrap {
+      position: relative;
+      min-height: 100%;
+      height: 100%;
+    }
+    .hint {
+      font-size: 11px;
+      color: var(--muted);
+    }
+    @media (max-width: 1100px) {
+      body { overflow: auto; }
+      .app { height: auto; min-height: 100vh; }
+      .workspace { grid-template-columns: 1fr; }
+      .right-grid { grid-template-rows: auto auto auto; }
+      .subgrid { grid-template-columns: 1fr; }
+      .chat-panel { min-height: 540px; }
+    }
+  </style>
 </head>
 <body>
-
-<!-- LOADING OVERLAY -->
-<div id="loading-overlay">
-  <div class="lo-title">⬡ RAG PIPELINE VISUALIZER</div>
-  <div class="lo-sub">Loading AI models into your browser. Models are cached after first download.</div>
-  <div class="lo-steps">
-    <div class="lo-step" id="lo-embed">
-      <span class="lo-step-icon">🔢</span>
-      <span>Embedding model — all-MiniLM-L6-v2 (22 MB)</span>
-    </div>
-    <div class="lo-step" id="lo-rerank">
-      <span class="lo-step-icon">🔄</span>
-      <span>Reranker — ms-marco-MiniLM-L-6 (~80 MB)</span>
-    </div>
-    <div class="lo-step" id="lo-llm">
-      <span class="lo-step-icon">🤖</span>
-      <span>LLM — LaMini-Flan-T5-248M (~900 MB)</span>
-    </div>
-  </div>
-  <div class="lo-bar-wrap"><div class="lo-bar-fill" id="lo-bar"></div></div>
-  <div class="lo-sub" id="lo-status">Initializing…</div>
-</div>
-
-<!-- HEADER -->
-<div id="header">
-  <div class="header-title">⬡ RAG<span>/</span>VISUALIZER <span>· in-browser · powered by transformers.js</span></div>
-  <div class="model-badges">
-    <div class="badge" id="bd-embed"><div class="badge-dot"></div> Embed</div>
-    <div class="badge" id="bd-rerank"><div class="badge-dot"></div> Rerank</div>
-    <div class="badge" id="bd-llm"><div class="badge-dot"></div> LLM</div>
-  </div>
-</div>
-
-<!-- NODE FLOW EDITOR -->
-<div id="node-editor">
-  <canvas id="flow-canvas"></canvas>
-  <div id="node-settings">
-    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
-      <div class="ns-title" id="ns-title">Node Settings</div>
-      <button class="ns-close" onclick="closeSettings()">✕</button>
-    </div>
-    <div id="ns-body"></div>
-  </div>
-</div>
-
-<!-- MAIN PANELS -->
-<div id="main">
-  <!-- CHAT -->
-  <div class="panel" id="chat-panel">
-    <div class="panel-hdr">
-      <span class="panel-hdr-title">💬 Chat</span>
-      <span class="panel-hdr-badge" id="chat-status">idle</span>
-    </div>
-    <div id="chat-messages">
-      <div class="empty" id="chat-empty">
-        <div class="empty-icon">🤖</div>
-        <span>Ask anything. Every step of the<br>RAG pipeline will be visualized live.</span>
+  <div class="app">
+    <div class="topbar">
+      <div class="titlebox">
+        <h1>Browser RAG Visualizer</h1>
+        <p>All retrieval, reranking, and generation steps run locally in the browser. Models are cached after the first load.</p>
+      </div>
+      <div class="statusbar">
+        <span class="chip" id="modelChip">Models: idle</span>
+        <span class="chip" id="dbChip">Vector DB: local</span>
+        <span class="chip good" id="cacheChip">Cache: on</span>
+        <span class="chip warn" id="gpuChip">Backend: checking</span>
       </div>
     </div>
-    <div id="chat-input-wrap">
-      <input id="chat-input" placeholder="Ask a question…" disabled />
-      <button class="btn btn-cyan" id="send-btn" disabled>Send</button>
-    </div>
-  </div>
 
-  <!-- RETRIEVAL + RERANKING -->
-  <div class="panel" id="retrieval-panel">
-    <div class="panel-hdr">
-      <span class="panel-hdr-title">🔍 Retrieval &amp; Reranking</span>
-      <span class="panel-hdr-badge" id="ret-status">idle</span>
-    </div>
-    <div class="ret-section">
-      <div class="ret-section-hdr">
-        <span>Retrieved (Top-K)</span>
-        <span id="ret-k-badge" style="color:var(--cyan);font-size:9px"></span>
-      </div>
-      <div class="ret-list" id="ret-list">
-        <div class="empty" id="ret-empty">
-          <div class="empty-icon">📚</div>
-          <span>Retrieved chunks appear here</span>
+    <div class="workspace">
+      <section class="panel chat-panel">
+        <div class="panel-header">
+          <h2>Chat</h2>
+          <small>Qwen3.5-0.8B + retrieved context</small>
         </div>
-      </div>
-    </div>
-    <div class="ret-section">
-      <div class="ret-section-hdr">
-        <span>After Reranking</span>
-        <span id="rerank-k-badge" style="color:var(--green);font-size:9px"></span>
-      </div>
-      <div class="ret-list" id="rerank-list">
-        <div class="empty" id="rerank-empty">
-          <div class="empty-icon">🔄</div>
-          <span>Reranked context appears here</span>
+
+        <div id="chatLog" class="chat-log"></div>
+
+        <div class="chat-context">
+          <div class="mini-label">Selected context snippets</div>
+          <div id="contextPills" class="context-row"></div>
         </div>
-      </div>
-    </div>
-  </div>
 
-  <!-- VECTOR DB -->
-  <div class="panel" id="vectordb-panel">
-    <div class="panel-hdr">
-      <span class="panel-hdr-title">🗄️ Vector DB (LanceDB-style)</span>
-      <span class="panel-hdr-badge" id="db-count">0 vectors</span>
-    </div>
-    <div id="add-form">
-      <textarea id="add-text" placeholder="Type or paste text to embed and store in the vector DB…"></textarea>
-      <div class="form-row">
-        <input id="add-source" placeholder="Source (e.g. doc1.pdf)" />
-        <input id="add-category" placeholder="Category (e.g. science)" />
-      </div>
-      <div class="embed-progress" id="embed-prog">
-        <div class="embed-progress-txt" id="embed-prog-txt">Embedding…</div>
-        <div class="embed-progress-bar"><div class="embed-progress-fill" id="embed-prog-fill"></div></div>
-      </div>
-      <button class="btn btn-green" id="add-btn" style="width:100%" disabled>＋ Embed &amp; Add to Vector DB</button>
-    </div>
-    <div id="vdb-table-wrap">
-      <table id="vdb-table">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th style="min-width:110px">Text Preview</th>
-            <th>Vector Preview</th>
-            <th>Source</th>
-            <th>Category</th>
-            <th>Date Added</th>
-          </tr>
-        </thead>
-        <tbody id="vdb-tbody"></tbody>
-      </table>
+        <div class="chat-input-wrap">
+          <textarea id="chatInput" placeholder="Ask a question that should be answered from the vector database..."></textarea>
+          <div style="display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width: 130px;">
+            <button id="askBtn">Ask</button>
+            <button id="seedBtn" class="secondary">Seed demo docs</button>
+          </div>
+        </div>
+      </section>
+
+      <section class="right-grid">
+        <div class="panel">
+          <div class="panel-header">
+            <h2>Ingest + Vector Table</h2>
+            <small>Insert, embed, and visualize rows</small>
+          </div>
+          <div class="content scroll">
+            <div class="form-grid">
+              <div class="form-row">
+                <label for="docText">Document / note</label>
+                <textarea id="docText" placeholder="Paste a document chunk, note, FAQ answer, code doc, or any text you want in the vector DB."></textarea>
+              </div>
+              <div class="form-row">
+                <label for="docSource">Source</label>
+                <input id="docSource" placeholder="notes, docs, faq" />
+              </div>
+              <div class="form-row">
+                <label for="docDate">Date</label>
+                <input id="docDate" type="date" />
+              </div>
+              <div class="form-row">
+                <label for="docTags">Tags</label>
+                <input id="docTags" placeholder="rag, demo, ai" />
+              </div>
+              <button id="addDocBtn">Add to DB</button>
+            </div>
+
+            <div style="display:flex; gap:10px; align-items:center; margin: 14px 0 10px; flex-wrap: wrap;">
+              <span class="badge"><span class="dot" id="pipelineDot"></span><span id="pipelineText">Pipeline idle</span></span>
+              <span class="badge">Top K <input id="topK" type="number" min="1" value="5" style="width:62px; margin-left:8px; background:transparent; border:0; color:inherit; outline:none;"></span>
+              <span class="badge">Rerank K <input id="rerankK" type="number" min="1" value="8" style="width:62px; margin-left:8px; background:transparent; border:0; color:inherit; outline:none;"></span>
+              <span class="badge">Chunk size <input id="chunkSize" type="number" min="32" value="256" style="width:72px; margin-left:8px; background:transparent; border:0; color:inherit; outline:none;"></span>
+            </div>
+
+            <div class="table-wrap">
+              <table>
+                <thead>
+                  <tr>
+                    <th>id</th>
+                    <th>text</th>
+                    <th>vector</th>
+                    <th>metadata</th>
+                    <th>date</th>
+                    <th>sim</th>
+                    <th>rerank</th>
+                  </tr>
+                </thead>
+                <tbody id="dbTable"></tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <div class="subgrid">
+          <div class="section-card">
+            <div class="section-head">
+              <strong>Top-k and reranked picks</strong>
+              <span class="hint">Animated rows move here</span>
+            </div>
+            <div class="section-body">
+              <div id="selectedList" class="selected-list"></div>
+            </div>
+          </div>
+          <div class="section-card">
+            <div class="section-head">
+              <strong>Run log</strong>
+              <span class="hint">Retrieval → rerank → answer</span>
+            </div>
+            <div class="section-body">
+              <div id="runLog" class="runlog"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-header">
+            <h2>Node Flow Editor</h2>
+            <small>Drag nodes, tweak settings per stage</small>
+          </div>
+          <div class="content canvas-wrap">
+            <div id="flowArea" class="flow-area">
+              <svg id="flowLines" class="flow-lines"></svg>
+            </div>
+            <div class="footerline">Tip: this is a single-page static build. In HF Spaces, just serve this HTML file.</div>
+          </div>
+        </div>
+      </section>
     </div>
   </div>
-</div>
-
-<!-- TOAST -->
-<div id="toast"></div>
-
-<!-- ═══════════════════════════════════════════════════════════
-     SCRIPT
-     ═══════════════════════════════════════════════════════════ -->
-<script type="module">
-import { pipeline, env }
-  from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
-
-env.allowLocalModels = false;
-env.useBrowserCache  = true;  // cache models in browser
-
-/* ─────────────────────────────────────────────────────────── */
-/*  CONFIG                                                      */
-/* ─────────────────────────────────────────────────────────── */
-const CFG = {
-  embedModel:  'Xenova/all-MiniLM-L6-v2',
-  rerankModel: 'Xenova/ms-marco-MiniLM-L-6-v2',
-  llmModel:    'Xenova/LaMini-Flan-T5-248M',
-  topK:        5,
-  topKRerank:  3,
-  maxTokens:   180,
-};
-
-/* ─────────────────────────────────────────────────────────── */
-/*  STATE                                                       */
-/* ─────────────────────────────────────────────────────────── */
-const ST = {
-  embedder: null, reranker: null, generator: null,
-  db: [],            // {id,text,vec,source,category,date}
-  busy: false,
-};
-
-/* ─────────────────────────────────────────────────────────── */
-/*  IndexedDB persistence (LanceDB-style in-browser)           */
-/* ─────────────────────────────────────────────────────────── */
-let idb = null;
-async function openIDB() {
-  return new Promise((res, rej) => {
-    const req = indexedDB.open('rag-viz-db', 1);
-    req.onupgradeneeded = e => {
-      e.target.result.createObjectStore('vectors', { keyPath: 'id' });
+
+  <script type="module">
+    import { env, pipeline } from 'https://esm.sh/@huggingface/transformers';
+
+    // Local-first browser settings.
+    env.allowRemoteModels = true;
+    env.allowLocalModels = true;
+
+    const EMBED_MODEL = 'Xenova/bge-small-en-v1.5';
+    const RERANK_MODEL = 'jinaai/jina-reranker-v1-tiny-en';
+    const CHAT_MODEL = 'onnx-community/Qwen3.5-0.8B-Text-ONNX';
+
+    const state = {
+      docs: [],
+      messages: [],
+      selected: [],
+      activeNode: null,
+      embeddingPipe: null,
+      rerankPipe: null,
+      chatPipe: null,
+      backendReady: false,
+      nodes: [
+        { id: 'ingest', label: 'Ingest', x: 38, y: 46, color: 'var(--accent)', kind: 'source', settings: { split: 256, overlap: 32 } },
+        { id: 'embed', label: 'Embed', x: 250, y: 28, color: 'var(--accent-2)', kind: 'model', settings: { model: EMBED_MODEL, normalize: true } },
+        { id: 'store', label: 'Vector DB', x: 474, y: 58, color: 'var(--good)', kind: 'storage', settings: { backend: 'IndexedDB', schema: 'id,text,vector,metadata,date' } },
+        { id: 'search', label: 'Top-k Search', x: 698, y: 28, color: 'var(--warn)', kind: 'retrieval', settings: { topK: 5, metric: 'cosine' } },
+        { id: 'rerank', label: 'Reranker', x: 914, y: 52, color: 'var(--accent-2)', kind: 'model', settings: { model: RERANK_MODEL, rerankK: 8 } },
+        { id: 'answer', label: 'Qwen Chat', x: 1120, y: 30, color: 'var(--accent)', kind: 'model', settings: { model: CHAT_MODEL, temperature: 0.25 } },
+      ],
+      drag: null,
     };
-    req.onsuccess = e => { idb = e.target.result; res(); };
-    req.onerror   = e => rej(e);
-  });
-}
-async function idbGetAll() {
-  return new Promise((res, rej) => {
-    const tx = idb.transaction('vectors','readonly');
-    const req = tx.objectStore('vectors').getAll();
-    req.onsuccess = e => res(e.target.result || []);
-    req.onerror   = e => rej(e);
-  });
-}
-async function idbPut(entry) {
-  return new Promise((res, rej) => {
-    const tx = idb.transaction('vectors','readwrite');
-    tx.objectStore('vectors').put(entry);
-    tx.oncomplete = res; tx.onerror = rej;
-  });
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  VECTOR MATH                                                 */
-/* ─────────────────────────────────────────────────────────── */
-function cosine(a, b) {
-  let dot = 0, na = 0, nb = 0;
-  for (let i = 0; i < a.length; i++) {
-    dot += a[i]*b[i]; na += a[i]*a[i]; nb += b[i]*b[i];
-  }
-  return dot / (Math.sqrt(na)*Math.sqrt(nb) + 1e-9);
-}
-
-function vecSearch(queryVec, topK) {
-  const scored = ST.db.map(e => ({
-    ...e, score: cosine(queryVec, e.vec)
-  }));
-  scored.sort((a,b) => b.score - a.score);
-  return scored.slice(0, topK);
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  TOAST                                                       */
-/* ─────────────────────────────────────────────────────────── */
-let toastTimer;
-function toast(msg, dur = 3200) {
-  const el = document.getElementById('toast');
-  el.textContent = msg;
-  el.classList.add('show');
-  clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => el.classList.remove('show'), dur);
-}
-
-const sleep = ms => new Promise(r => setTimeout(r, ms));
-const $ = id => document.getElementById(id);
-
-/* ─────────────────────────────────────────────────────────── */
-/*  BADGE helpers                                               */
-/* ─────────────────────────────────────────────────────────── */
-function badge(id, state) {
-  const el = $(`bd-${id}`);
-  el.className = `badge ${state}`;
-}
-function loStep(id, state) {
-  const el = $(`lo-${id}`);
-  if (state === 'active') { el.className = 'lo-step active'; el.querySelector('.lo-step-icon').textContent = '⏳'; }
-  if (state === 'done')   { el.className = 'lo-step done';   el.querySelector('.lo-step-icon').textContent = '✅'; }
-  if (state === 'error')  { el.className = 'lo-step';        el.querySelector('.lo-step-icon').textContent = '⚠️'; }
-}
-function loBar(pct) { $('lo-bar').style.width = pct + '%'; }
-
-/* ─────────────────────────────────────────────────────────── */
-/*  MODEL LOADING                                               */
-/* ─────────────────────────────────────────────────────────── */
-async function loadModels() {
-  $('lo-status').textContent = 'Loading embedding model…';
-  loStep('embed','active'); loBar(5); badge('embed','loading');
-
-  try {
-    ST.embedder = await pipeline('feature-extraction', CFG.embedModel, {
-      progress_callback: p => {
-        if (p.status === 'progress') {
-          const pct = 5 + (p.progress || 0) * .2;
-          loBar(Math.min(25, pct));
+
+    const els = {
+      modelChip: document.getElementById('modelChip'),
+      dbChip: document.getElementById('dbChip'),
+      cacheChip: document.getElementById('cacheChip'),
+      gpuChip: document.getElementById('gpuChip'),
+      chatLog: document.getElementById('chatLog'),
+      chatInput: document.getElementById('chatInput'),
+      askBtn: document.getElementById('askBtn'),
+      seedBtn: document.getElementById('seedBtn'),
+      docText: document.getElementById('docText'),
+      docSource: document.getElementById('docSource'),
+      docDate: document.getElementById('docDate'),
+      docTags: document.getElementById('docTags'),
+      addDocBtn: document.getElementById('addDocBtn'),
+      dbTable: document.getElementById('dbTable'),
+      selectedList: document.getElementById('selectedList'),
+      contextPills: document.getElementById('contextPills'),
+      runLog: document.getElementById('runLog'),
+      flowArea: document.getElementById('flowArea'),
+      flowLines: document.getElementById('flowLines'),
+      pipelineText: document.getElementById('pipelineText'),
+      pipelineDot: document.getElementById('pipelineDot'),
+      topK: document.getElementById('topK'),
+      rerankK: document.getElementById('rerankK'),
+      chunkSize: document.getElementById('chunkSize'),
+    };
+
+    const DB_NAME = 'rag-visualizer-db';
+    const STORE_NAME = 'docs';
+    const META_KEY = 'rag-visualizer-meta';
+
+    function uid() {
+      return crypto.randomUUID ? crypto.randomUUID() : `id-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+    }
+
+    function logLine(text) {
+      const div = document.createElement('div');
+      div.className = 'logline';
+      div.textContent = `${new Date().toLocaleTimeString()} — ${text}`;
+      els.runLog.prepend(div);
+    }
+
+    function setPipeline(text, activeId = null, good = false) {
+      els.pipelineText.textContent = text;
+      els.pipelineDot.className = 'dot' + (good ? ' good' : '');
+      state.activeNode = activeId;
+      renderFlow();
+    }
+
+    function appendMessage(role, content) {
+      state.messages.push({ role, content });
+      renderChat();
+    }
+
+    function renderChat() {
+      els.chatLog.innerHTML = '';
+      for (const msg of state.messages) {
+        const el = document.createElement('div');
+        el.className = `msg ${msg.role}`;
+        el.textContent = msg.content;
+        els.chatLog.appendChild(el);
+      }
+      els.chatLog.scrollTop = els.chatLog.scrollHeight;
+    }
+
+    function renderSelected() {
+      els.selectedList.innerHTML = '';
+      for (const doc of state.selected) {
+        const card = document.createElement('div');
+        card.className = 'selected-card';
+        card.innerHTML = `<b>${escapeHtml(snippet(doc.text, 82))}</b><div class="score">score ${fmt(doc.score)} · rerank ${fmt(doc.rerankScore)}</div><div class="tiny">${escapeHtml((doc.metadata?.source || 'source') + ' · ' + (doc.date || ''))}</div>`;
+        els.selectedList.appendChild(card);
+      }
+      if (!state.selected.length) {
+        const empty = document.createElement('div');
+        empty.className = 'tiny';
+        empty.textContent = 'Top-k selections will appear here after search.';
+        els.selectedList.appendChild(empty);
+      }
+    }
+
+    function renderContextPills() {
+      els.contextPills.innerHTML = '';
+      for (const doc of state.selected) {
+        const p = document.createElement('span');
+        p.className = 'context-pill';
+        p.textContent = snippet(doc.text, 54);
+        els.contextPills.appendChild(p);
+      }
+      if (!state.selected.length) {
+        const p = document.createElement('span');
+        p.className = 'context-pill';
+        p.textContent = 'No context selected yet';
+        els.contextPills.appendChild(p);
+      }
+    }
+
+    function renderTable() {
+      els.dbTable.innerHTML = '';
+      for (const doc of state.docs) {
+        const tr = document.createElement('tr');
+        if (doc.selected) tr.classList.add('selected');
+        tr.innerHTML = `
+          <td>${escapeHtml(doc.id.slice(0, 8))}</td>
+          <td>
+            <div>${escapeHtml(snippet(doc.text, 120))}</div>
+            <div class="tiny">${escapeHtml(doc.preview || '')}</div>
+          </td>
+          <td><div class="vectors">${escapeHtml(doc.vectorPreview)}</div></td>
+          <td>${renderTags(doc.metadata)}</td>
+          <td>${escapeHtml(doc.date || '')}</td>
+          <td>${doc.score == null ? '<span class="tiny">—</span>' : fmt(doc.score)}</td>
+          <td>${doc.rerankScore == null ? '<span class="tiny">—</span>' : fmt(doc.rerankScore)}</td>
+        `;
+        els.dbTable.appendChild(tr);
+      }
+    }
+
+    function renderTags(meta = {}) {
+      const tags = [];
+      if (meta.source) tags.push(`<span class="tag">${escapeHtml(meta.source)}</span>`);
+      for (const t of (meta.tags || [])) tags.push(`<span class="tag">${escapeHtml(t)}</span>`);
+      return tags.join('') || '<span class="tiny">—</span>';
+    }
+
+    function fmt(n) {
+      return Number.isFinite(n) ? Number(n).toFixed(4) : '—';
+    }
+
+    function snippet(text, n = 80) {
+      const s = String(text || '').replace(/\s+/g, ' ').trim();
+      return s.length > n ? s.slice(0, n - 1) + '…' : s;
+    }
+
+    function escapeHtml(s) {
+      return String(s)
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;');
+    }
+
+    function cosine(a, b) {
+      let dot = 0, na = 0, nb = 0;
+      const len = Math.min(a.length, b.length);
+      for (let i = 0; i < len; i++) {
+        const x = a[i], y = b[i];
+        dot += x * y;
+        na += x * x;
+        nb += y * y;
+      }
+      return dot / (Math.sqrt(na) * Math.sqrt(nb) + 1e-9);
+    }
+
+    function meanPoolTensor(tensor) {
+      if (!tensor) return [];
+      if (Array.isArray(tensor)) return tensor;
+      if (tensor.data && tensor.dims && tensor.dims.length === 2) {
+        const [rows, cols] = tensor.dims;
+        if (rows === 1) return Array.from(tensor.data.slice(0, cols));
+        const out = new Float32Array(cols);
+        for (let r = 0; r < rows; r++) {
+          for (let c = 0; c < cols; c++) out[c] += tensor.data[r * cols + c];
         }
+        for (let c = 0; c < cols; c++) out[c] /= rows;
+        return Array.from(out);
       }
-    });
-    badge('embed','ready'); loStep('embed','done');
-    toast('✅ Embedding model ready');
-  } catch(e) {
-    badge('embed','error'); loStep('embed','error');
-    console.error(e); toast('⚠️ Embedding model failed: '+e.message, 5000);
-  }
-
-  loBar(25); $('lo-status').textContent = 'Loading reranking model…';
-  loStep('rerank','active'); badge('rerank','loading');
-
-  try {
-    ST.reranker = await pipeline('text-classification', CFG.rerankModel, {
-      progress_callback: p => {
-        if (p.status === 'progress') loBar(25 + (p.progress||0)*.2);
+      if (tensor.data) return Array.from(tensor.data);
+      return Array.isArray(tensor?.tolist?.()) ? tensor.tolist() : [];
+    }
+
+    function normalize(vec) {
+      let s = 0;
+      for (const v of vec) s += v * v;
+      const inv = 1 / (Math.sqrt(s) + 1e-9);
+      return vec.map(v => v * inv);
+    }
+
+    function previewVector(vec, k = 8) {
+      return '[' + vec.slice(0, k).map(v => Number(v).toFixed(3)).join(', ') + (vec.length > k ? ', …' : '') + `] (${vec.length})`;
+    }
+
+    async function ensureEmbeddings() {
+      if (!state.embeddingPipe) {
+        setPipeline('Loading embedding model…', 'embed');
+        state.embeddingPipe = await pipeline('feature-extraction', EMBED_MODEL, { progress_callback: p => modelProgress('Embedding', p) });
       }
-    });
-    badge('rerank','ready'); loStep('rerank','done');
-    toast('✅ Reranking model ready');
-  } catch(e) {
-    badge('rerank','error'); loStep('rerank','error');
-    ST.reranker = null;
-    console.warn('Reranker unavailable, fallback to cosine:', e.message);
-    toast('⚠️ Reranker unavailable — cosine fallback active', 5000);
-  }
-
-  loBar(45); $('lo-status').textContent = 'Loading LLM (large — may take a minute)…';
-  loStep('llm','active'); badge('llm','loading');
-
-  try {
-    ST.generator = await pipeline('text2text-generation', CFG.llmModel, {
-      progress_callback: p => {
-        if (p.status === 'progress') loBar(45 + (p.progress||0)*.5);
+      return state.embeddingPipe;
+    }
+
+    async function ensureReranker() {
+      if (!state.rerankPipe) {
+        setPipeline('Loading reranker…', 'rerank');
+        state.rerankPipe = await pipeline('text-classification', RERANK_MODEL, { progress_callback: p => modelProgress('Reranker', p) });
       }
-    });
-    badge('llm','ready'); loStep('llm','done');
-    toast('✅ LLM ready!');
-  } catch(e) {
-    badge('llm','error'); loStep('llm','error');
-    ST.generator = null;
-    console.warn('LLM unavailable:', e.message);
-    toast('⚠️ LLM not loaded — answers will be template-based', 5000);
-  }
-
-  loBar(100);
-  $('lo-status').textContent = ST.embedder ? 'Ready! All models loaded.' : '⚠️ Some models failed.';
-  await sleep(800);
-  $('loading-overlay').classList.add('fade');
-  setTimeout(() => { $('loading-overlay').style.display='none'; }, 500);
-
-  if (ST.embedder) {
-    $('chat-input').disabled  = false;
-    $('send-btn').disabled    = false;
-    $('add-btn').disabled     = false;
-    // Load sample data if DB empty
-    if (ST.db.length === 0) await insertSamples();
-  }
-  FE.setAllIdle();
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  EMBEDDING & RERANKING & GENERATION                         */
-/* ─────────────────────────────────────────────────────────── */
-async function embed(text) {
-  const out = await ST.embedder(text, { pooling: 'mean', normalize: true });
-  return Array.from(out.data);
-}
-
-async function rerank(query, results) {
-  const topK = CFG.topKRerank;
-  if (!ST.reranker) {
-    return [...results].sort((a,b)=>b.score-a.score).slice(0,topK)
-                       .map(r=>({...r, rerankScore: r.score}));
-  }
-  try {
-    const pairs = results.map(r => [query, r.text]);
-    const scores = await ST.reranker(pairs, { topk: 1 });
-    const withScores = results.map((r, i) => ({
-      ...r,
-      rerankScore: Array.isArray(scores[i]) ? scores[i][0].score : (scores[i]?.score ?? r.score)
-    }));
-    withScores.sort((a,b) => b.rerankScore - a.rerankScore);
-    return withScores.slice(0, topK);
-  } catch(e) {
-    console.warn('Rerank error, cosine fallback:', e.message);
-    return [...results].sort((a,b)=>b.score-a.score).slice(0,topK)
-                       .map(r=>({...r, rerankScore: r.score}));
-  }
-}
-
-async function generate(query, context) {
-  const ctxTxt = context.map((c,i) => `[${i+1}] ${c.text}`).join('\n');
-  const prompt = `Answer the question using the context.\n\nContext:\n${ctxTxt}\n\nQuestion: ${query}\nAnswer:`;
-  if (!ST.generator) {
-    return `Context summary:\n${context.slice(0,2).map(c=>'• '+c.text.slice(0,100)).join('\n')}`;
-  }
-  try {
-    const out = await ST.generator(prompt, { max_new_tokens: CFG.maxTokens, do_sample: false });
-    return (out[0]?.generated_text || '').trim() || 'No answer generated.';
-  } catch(e) {
-    console.error('Generate error:', e);
-    return context[0]?.text || 'No context found.';
-  }
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  VECTOR DB UI                                               */
-/* ─────────────────────────────────────────────────────────── */
-function fmtDate(iso) {
-  const d = new Date(iso);
-  return `${d.getMonth()+1}/${d.getDate()} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
-}
-function vecPreview(v) {
-  return `[${v.slice(0,3).map(x=>x.toFixed(2)).join(', ')},…]`;
-}
-function addTableRow(entry, isNew=false) {
-  const tbody = $('vdb-tbody');
-  const rowNum = tbody.children.length + 1;
-  const tr = document.createElement('tr');
-  tr.dataset.id = entry.id;
-  const textPrev = entry.text.length > 40 ? entry.text.slice(0,40)+'…' : entry.text;
-  tr.innerHTML = `
-    <td style="color:var(--text3)">${rowNum}</td>
-    <td title="${entry.text}" style="font-family:var(--sans);font-size:11px">${textPrev}</td>
-    <td><span class="vec-chip">${vecPreview(entry.vec)}</span></td>
-    <td><span class="tag ${isNew?'new-tag':''}">${entry.source||'—'}</span></td>
-    <td style="color:var(--text2)">${entry.category||'—'}</td>
-    <td style="color:var(--text3)">${fmtDate(entry.date)}</td>
-  `;
-  tbody.appendChild(tr);
-  if (isNew) tr.scrollIntoView({behavior:'smooth',block:'nearest'});
-  $('db-count').textContent = `${tbody.children.length} vectors`;
-}
-function rebuildTable() {
-  $('vdb-tbody').innerHTML = '';
-  ST.db.forEach(e => addTableRow(e, false));
-  $('db-count').textContent = `${ST.db.length} vectors`;
-}
-function highlightRows(ids) {
-  document.querySelectorAll('#vdb-tbody tr').forEach(tr => {
-    tr.classList.toggle('lit', ids.includes(tr.dataset.id));
-  });
-}
-function clearHighlightRows() {
-  document.querySelectorAll('#vdb-tbody tr').forEach(tr => tr.classList.remove('lit'));
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  ADD ENTRY                                                   */
-/* ─────────────────────────────────────────────────────────── */
-async function addEntry() {
-  const text = $('add-text').value.trim();
-  if (!text) { toast('Enter some text first'); return; }
-  if (!ST.embedder) { toast('Embedding model not ready'); return; }
-
-  $('add-btn').disabled = true;
-  $('add-btn').textContent = 'Embedding…';
-  $('embed-prog').classList.add('show');
-  $('embed-prog-txt').textContent = 'Computing embedding…';
-
-  // Animate embed node active
-  FE.setStatus('embed', 'active');
-
-  // Fake progress
-  let pct = 0;
-  const progTimer = setInterval(() => {
-    pct = Math.min(pct + 8, 90);
-    $('embed-prog-fill').style.width = pct + '%';
-  }, 120);
-
-  try {
-    const vec = await embed(text);
-    clearInterval(progTimer);
-    $('embed-prog-fill').style.width = '100%';
-
-    FE.setStatus('embed', 'done');
-    FE.setStatus('search', 'active');
-
-    const entry = {
-      id: Date.now().toString(36) + Math.random().toString(36).slice(2,6),
-      text, vec,
-      source:   $('add-source').value.trim()   || 'manual',
-      category: $('add-category').value.trim() || 'general',
-      date:     new Date().toISOString(),
-    };
-    ST.db.push(entry);
-    await idbPut(entry);
-    addTableRow(entry, true);
-
-    // Animate edge
-    await FE.animEdgePromise('embed','search');
-    FE.setStatus('search','done');
-    setTimeout(() => FE.setAllIdle(), 800);
-
-    toast(`✅ Stored "${text.slice(0,35)}…" in vector DB`);
-    $('add-text').value = '';
-
-  } catch(e) {
-    clearInterval(progTimer);
-    toast('❌ Error: '+e.message, 5000);
-    console.error(e);
-    FE.setAllIdle();
-  }
-
-  $('embed-prog').classList.remove('show');
-  $('embed-prog-fill').style.width = '0';
-  $('add-btn').disabled = false;
-  $('add-btn').textContent = '＋ Embed & Add to Vector DB';
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  RETRIEVAL UI                                               */
-/* ─────────────────────────────────────────────────────────── */
-function renderRetList(items, listId, isReranked=false) {
-  const el = $(listId);
-  el.innerHTML = '';
-  if (!items || items.length === 0) {
-    el.innerHTML = `<div class="empty"><div class="empty-icon">${isReranked?'🔄':'📚'}</div><span>No results</span></div>`;
-    return;
-  }
-  items.forEach((item, i) => {
-    const div = document.createElement('div');
-    div.className = `ret-item${isReranked?' selected':''}`;
-    div.dataset.id = item.id;
-    const score = isReranked ? (item.rerankScore ?? item.score) : item.score;
-    const scorePct = Math.min(100, Math.abs(score) * 100);
-    div.innerHTML = `
-      <div class="ret-rank">#${i+1}</div>
-      <div class="ret-text">${item.text}</div>
-      <div class="ret-foot">
-        <span class="ret-meta">${item.source||'?'} · ${item.category||'?'}</span>
-        <div class="score-bar"><div class="score-fill" style="width:0%"></div></div>
-        <span class="score-pct">${(score*100).toFixed(1)}%</span>
-      </div>
-    `;
-    setTimeout(() => {
-      div.classList.add(isReranked ? 'selected' : 'lit');
-      div.querySelector('.score-fill').style.width = scorePct + '%';
-    }, i * 90);
-    el.appendChild(div);
-  });
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  CHAT UI                                                     */
-/* ─────────────────────────────────────────────────────────── */
-function chatMsg(role, text, ctxItems=[]) {
-  const c = $('chat-messages');
-  $('chat-empty')?.remove();
-
-  const div = document.createElement('div');
-  div.className = `msg ${role}`;
-
-  let chips = '';
-  if (ctxItems.length > 0) {
-    chips = `<div class="ctx-chips">${ctxItems.map(c=>`<span class="ctx-chip">📄 ${c.source||'chunk'}</span>`).join('')}</div>`;
-  }
-
-  div.innerHTML = `
-    <div class="msg-bubble">${text.replace(/</g,'&lt;').replace(/\n/g,'<br>')}</div>
-    ${chips}
-    <div class="msg-time">${new Date().toLocaleTimeString()}</div>
-  `;
-  c.appendChild(div);
-  c.scrollTop = c.scrollHeight;
-  return div;
-}
-
-let typingEl = null;
-function showTyping() {
-  const c = $('chat-messages');
-  typingEl = document.createElement('div');
-  typingEl.className = 'msg assistant';
-  typingEl.id = '__typing';
-  typingEl.innerHTML = `<div class="msg-bubble"><div class="typing"><i></i><i></i><i></i></div></div>`;
-  c.appendChild(typingEl);
-  c.scrollTop = c.scrollHeight;
-}
-function removeTyping() { $('__typing')?.remove(); typingEl = null; }
-
-/* ──────────────────────────────────────────────���──────────── */
-/*  RAG PIPELINE                                               */
-/* ─────────────────────────────────────────────────────────── */
-async function runRAG(query) {
-  if (ST.busy) return;
-  if (!ST.embedder) { toast('Embedding model not loaded yet'); return; }
-  ST.busy = true;
-
-  $('send-btn').disabled = true;
-  $('chat-status').textContent = 'processing…';
-  $('ret-status').textContent  = 'searching…';
-
-  chatMsg('user', query);
-  showTyping();
-
-  // Clear retrieval panels
-  $('ret-list').innerHTML    = `<div class="empty"><div class="empty-icon">⏳</div><span>Searching…</span></div>`;
-  $('rerank-list').innerHTML = `<div class="empty"><div class="empty-icon">⏳</div><span>Waiting…</span></div>`;
-  clearHighlightRows();
-
-  FE.setAllIdle();
-
-  try {
-    /* ── 1. Query node ── */
-    FE.setStatus('query','active');
-    await sleep(200);
-    FE.setStatus('query','done');
-    await FE.animEdgePromise('query','embed');
-
-    /* ── 2. Embed query ── */
-    FE.setStatus('embed','active');
-    $('chat-status').textContent = 'embedding query…';
-    const qVec = await embed(query);
-    FE.setStatus('embed','done');
-    await FE.animEdgePromise('embed','search');
-
-    /* ── 3. Vector search ── */
-    FE.setStatus('search','active');
-    $('chat-status').textContent = 'vector search…';
-    await sleep(150);
-    const retrieved = vecSearch(qVec, CFG.topK);
-    FE.setStatus('search','done');
-    await FE.animEdgePromise('search','topk');
-
-    /* ── 4. Top-K ── */
-    FE.setStatus('topk','active');
-    $('ret-k-badge').textContent = `k=${retrieved.length}`;
-    renderRetList(retrieved,'ret-list',false);
-    highlightRows(retrieved.map(r=>r.id));
-    await sleep(400);
-    FE.setStatus('topk','done');
-    await FE.animEdgePromise('topk','rerank');
-
-    /* ── 5. Rerank ── */
-    FE.setStatus('rerank','active');
-    $('ret-status').textContent = 'reranking…';
-    $('chat-status').textContent = 'reranking…';
-    const reranked = await rerank(query, retrieved);
-    $('rerank-k-badge').textContent = `k=${reranked.length}`;
-    renderRetList(reranked,'rerank-list',true);
-    FE.setStatus('rerank','done');
-    await FE.animEdgePromise('rerank','llm');
-
-    /* ── 6. LLM ── */
-    FE.setStatus('llm','active');
-    $('chat-status').textContent = 'generating…';
-    const context = reranked.length > 0 ? reranked : retrieved.slice(0, CFG.topKRerank);
-    const answer  = await generate(query, context);
-    FE.setStatus('llm','done');
-    await FE.animEdgePromise('llm','answer');
-
-    /* ── 7. Answer ── */
-    FE.setStatus('answer','active');
-    removeTyping();
-    chatMsg('assistant', answer, context);
-    FE.setStatus('answer','done');
-
-  } catch(e) {
-    removeTyping();
-    chatMsg('assistant', '❌ Pipeline error: '+e.message);
-    console.error(e);
-    FE.setAllIdle();
-  }
-
-  $('send-btn').disabled = false;
-  $('chat-status').textContent = 'idle';
-  $('ret-status').textContent  = 'idle';
-  ST.busy = false;
-  clearHighlightRows();
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  SAMPLE DATA                                               */
-/* ─────────────────────────────────────────────────────────── */
-async function insertSamples() {
-  toast('Adding sample documents…', 5000);
-  const samples = [
-    { text:'The Eiffel Tower in Paris was built in 1889 by Gustave Eiffel for the World Fair. It stands 330 metres tall.', source:'wiki.txt', category:'history' },
-    { text:'Machine learning is a branch of AI that enables systems to learn from data without being explicitly programmed.', source:'ml-intro.md', category:'tech' },
-    { text:'The Amazon River carries more water than any other river on Earth and drains into the Atlantic Ocean.', source:'geo.txt', category:'geography' },
-    { text:'Python is a high-level interpreted language prized for readability, used widely in data science and web development.', source:'prog.md', category:'tech' },
-    { text:'The speed of light in a vacuum is exactly 299,792,458 metres per second, a fundamental constant of nature.', source:'physics.txt', category:'science' },
-    { text:'Transformers are a neural network architecture introduced in "Attention is All You Need" (2017). Self-attention is core.', source:'dl-paper.txt', category:'AI' },
-    { text:'Retrieval-Augmented Generation (RAG) combines a retriever to find relevant passages with a language model to generate answers.', source:'rag-overview.md', category:'AI' },
-  ];
-  for (const s of samples) {
-    FE.setStatus('embed','active');
-    const vec = await embed(s.text);
-    FE.setStatus('embed','done');
-    const entry = {
-      id: Date.now().toString(36)+Math.random().toString(36).slice(2,5),
-      text: s.text, vec, source: s.source, category: s.category,
-      date: new Date().toISOString()
-    };
-    ST.db.push(entry);
-    await idbPut(entry);
-    addTableRow(entry, true);
-    await sleep(80);
-  }
-  FE.setAllIdle();
-  toast('✅ Sample documents loaded. Try asking a question!', 4000);
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  NODE FLOW EDITOR                                           */
-/* ─────────────────────────────────────────────────────────── */
-class FlowEditor {
-  constructor() {
-    this.canvas = $('flow-canvas');
-    this.ctx    = this.canvas.getContext('2d');
-    this.dpr    = Math.min(window.devicePixelRatio || 1, 2);
-    this.W = 0; this.H = 0;
-    this.selectedId = null;
-    this.particles  = [];
-
-    this.nodes = [
-      { id:'query',  label:'Query',         icon:'📝', color:'#a855f7',
-        settings:{ Type:'User Input', Description:'Raw text question from user' }},
-      { id:'embed',  label:'Embed Query',   icon:'🔢', color:'#00e5ff',
-        settings:{ Model:CFG.embedModel, Dims:384, Pooling:'mean', Normalize:true }},
-      { id:'search', label:'Vector Search', icon:'🗄️', color:'#ffaa00',
-        settings:{ Metric:'Cosine', 'Top-K':CFG.topK, Index:'Flat (in-memory)' }},
-      { id:'topk',   label:'Top-K Select',  icon:'📊', color:'#f472b6',
-        settings:{ K:CFG.topK, Threshold:'0.0', Dedup:'false' }},
-      { id:'rerank', label:'Rerank',        icon:'🔄', color:'#00ff88',
-        settings:{ Model:CFG.rerankModel, Type:'Cross-Encoder', 'Keep':CFG.topKRerank }},
-      { id:'llm',    label:'LLM',           icon:'🤖', color:'#fb923c',
-        settings:{ Model:CFG.llmModel, MaxTokens:CFG.maxTokens, Sample:false }},
-      { id:'answer', label:'Answer',        icon:'💬', color:'#34d399',
-        settings:{ Format:'Text', Grounded:true, Sources:'Top reranked chunks' }},
-    ];
-    this.edges = [
-      ['query','embed'],['embed','search'],['search','topk'],
-      ['topk','rerank'],['rerank','llm'],['llm','answer']
-    ];
-    this.statuses = {};
-    this.nodes.forEach(n => this.statuses[n.id] = 'idle');
-
-    this.resize();
-    window.addEventListener('resize', () => this.resize());
-    this.canvas.addEventListener('click', e => this.onClick(e));
-    this.raf();
-  }
-
-  resize() {
-    const wrap = this.canvas.parentElement;
-    const rect  = wrap.getBoundingClientRect();
-    this.W = rect.width; this.H = rect.height;
-    this.canvas.width  = this.W * this.dpr;
-    this.canvas.height = this.H * this.dpr;
-    this.canvas.style.cssText = `width:${this.W}px;height:${this.H}px;`;
-    this.ctx.scale(this.dpr, this.dpr);
-    this.layout();
-  }
-
-  layout() {
-    const n = this.nodes.length;
-    const nW = 110, nH = 68;
-    const pad = 28;
-    const gap = (this.W - pad*2 - n*nW) / (n - 1);
-    this.nodes.forEach((node, i) => {
-      node.x = pad + i*(nW+gap);
-      node.y = (this.H - nH) / 2;
-      node.w = nW; node.h = nH;
-    });
-  }
-
-  draw() {
-    const { ctx, W, H } = this;
-    ctx.clearRect(0, 0, W, H);
-
-    // Grid
-    ctx.save();
-    ctx.strokeStyle = 'rgba(29,50,84,0.35)';
-    ctx.lineWidth = 1;
-    for (let x = 0; x < W; x += 28) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke(); }
-    for (let y = 0; y < H; y += 28) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke(); }
-    ctx.restore();
-
-    // Edges
-    this.edges.forEach(([fId,tId]) => {
-      const fn = this.nodeById(fId), tn = this.nodeById(tId);
-      const fx = fn.x+fn.w, fy = fn.y+fn.h/2;
-      const tx = tn.x,      ty = tn.y+tn.h/2;
-      const cx = (fx+tx)/2;
-      ctx.beginPath();
-      ctx.moveTo(fx,fy);
-      ctx.bezierCurveTo(cx,fy,cx,ty,tx,ty);
-      ctx.strokeStyle = 'rgba(29,50,84,0.9)';
-      ctx.lineWidth = 2;
-      ctx.stroke();
-    });
+      return state.rerankPipe;
+    }
 
-    // Particles
-    this.particles.forEach(p => {
-      const fn = this.nodeById(p.from), tn = this.nodeById(p.to);
-      const fx = fn.x+fn.w, fy = fn.y+fn.h/2;
-      const tx = tn.x,      ty = tn.y+tn.h/2;
-      const cx = (fx+tx)/2;
-      const pt = this.bezPt(fx,fy,cx,fy,cx,ty,tx,ty,p.t);
-      const grd = ctx.createRadialGradient(pt.x,pt.y,0,pt.x,pt.y,10);
-      grd.addColorStop(0, fn.color+'cc');
-      grd.addColorStop(1, 'transparent');
-      ctx.beginPath(); ctx.arc(pt.x,pt.y,10,0,Math.PI*2);
-      ctx.fillStyle = grd; ctx.fill();
-      ctx.beginPath(); ctx.arc(pt.x,pt.y,3,0,Math.PI*2);
-      ctx.fillStyle = fn.color; ctx.fill();
-    });
+    async function ensureChatModel() {
+      if (!state.chatPipe) {
+        setPipeline('Loading Qwen chat model…', 'answer');
+        state.chatPipe = await pipeline('text-generation', CHAT_MODEL, { progress_callback: p => modelProgress('Qwen', p) });
+      }
+      return state.chatPipe;
+    }
 
-    // Nodes
-    this.nodes.forEach(n => this.drawNode(n));
-  }
-
-  drawNode(n) {
-    const { ctx } = this;
-    const { x, y, w, h, color } = n;
-    const st = this.statuses[n.id];
-    const sel = this.selectedId === n.id;
-
-    // Glow
-    if (st === 'active') { ctx.shadowColor = color; ctx.shadowBlur = 18; }
-    else if (sel)         { ctx.shadowColor = color; ctx.shadowBlur = 10; }
-
-    // BG
-    ctx.beginPath();
-    ctx.roundRect(x, y, w, h, 7);
-    ctx.fillStyle = st==='active' ? color+'1a' : st==='done' ? '#001f14' : '#0b1a2e';
-    ctx.fill();
-    ctx.shadowBlur = 0;
-
-    // Border
-    ctx.beginPath();
-    ctx.roundRect(x, y, w, h, 7);
-    ctx.strokeStyle = st==='idle'  ? '#1d3254' :
-                      st==='active'? color :
-                      st==='done'  ? '#00ff88' : color;
-    ctx.lineWidth = sel ? 2.5 : (st==='active' ? 2 : 1.5);
-    ctx.stroke();
-
-    // Status dot
-    const dotColor = { idle:'#1d3254', loading:CFG.amber, active:color, done:'#00ff88' }[st] || '#1d3254';
-    ctx.beginPath(); ctx.arc(x+w-9, y+9, 4, 0, Math.PI*2);
-    ctx.fillStyle = dotColor; ctx.fill();
-    if (st==='active') {
-      ctx.beginPath(); ctx.arc(x+w-9, y+9, 7, 0, Math.PI*2);
-      ctx.strokeStyle = dotColor+'55'; ctx.lineWidth=2; ctx.stroke();
-    }
-
-    // Icon
-    ctx.font = '18px serif';
-    ctx.textAlign = 'center';
-    ctx.fillText(n.icon, x+w/2, y+h/2-3);
-
-    // Label
-    ctx.font = `500 10px 'JetBrains Mono', monospace`;
-    ctx.fillStyle = st==='active' ? color : '#3d5a7a';
-    ctx.fillText(n.label, x+w/2, y+h-11);
-
-    // Mini status
-    if (st !== 'idle') {
-      const lbl = { loading:'loading…', active:'processing', done:'done ✓' }[st] || '';
-      ctx.font = `8px 'JetBrains Mono', monospace`;
-      ctx.fillStyle = dotColor;
-      ctx.fillText(lbl, x+w/2, y+h-2);
-    }
-  }
-
-  bezPt(x0,y0,cx1,cy1,cx2,cy2,x1,y1,t) {
-    const m=1-t;
-    return {
-      x: m*m*m*x0+3*m*m*t*cx1+3*m*t*t*cx2+t*t*t*x1,
-      y: m*m*m*y0+3*m*m*t*cy1+3*m*t*t*cy2+t*t*t*y1
-    };
-  }
-
-  onClick(e) {
-    const r   = this.canvas.getBoundingClientRect();
-    const mx  = e.clientX-r.left, my = e.clientY-r.top;
-    const hit = this.nodes.find(n => mx>=n.x&&mx<=n.x+n.w&&my>=n.y&&my<=n.y+n.h);
-    if (hit) {
-      this.selectedId = hit.id;
-      this.openSettings(hit);
-    } else {
-      this.selectedId = null;
-      $('node-settings').classList.remove('open');
-    }
-  }
-
-  openSettings(node) {
-    const panel = $('node-settings');
-    $('ns-title').textContent = `${node.icon} ${node.label}`;
-    $('ns-title').style.color = node.color;
-    $('ns-body').innerHTML = Object.entries(node.settings).map(([k,v]) => `
-      <div class="ns-row">
-        <div class="ns-label">${k}</div>
-        <input class="ns-input" value="${v}" data-node="${node.id}" data-key="${k}"
-               onchange="window.FE.onSettingChange(this)">
-      </div>
-    `).join('');
-    panel.classList.add('open');
-  }
-
-  onSettingChange(input) {
-    const nodeId = input.dataset.node, key = input.dataset.key, val = input.value;
-    const node = this.nodeById(nodeId);
-    if (node) node.settings[key] = val;
-    // Apply live
-    if (nodeId==='search' && key==='Top-K')  CFG.topK = parseInt(val)||5;
-    if (nodeId==='rerank' && key==='Keep')    CFG.topKRerank = parseInt(val)||3;
-    if (nodeId==='llm'    && key==='MaxTokens') CFG.maxTokens = parseInt(val)||180;
-  }
-
-  setStatus(id, st) { this.statuses[id] = st; }
-
-  setAllIdle() {
-    this.nodes.forEach(n => this.statuses[n.id] = 'idle');
-    this.particles = [];
-  }
-
-  animEdgePromise(from, to) {
-    return new Promise(resolve => {
-      const p = { from, to, t: 0, speed: 0.03, done: resolve };
-      this.particles.push(p);
-    });
-  }
+    function modelProgress(name, p) {
+      if (!p) return;
+      const pct = p.progress != null ? Math.round(p.progress * 100) : null;
+      els.modelChip.textContent = pct == null ? `${name}: loading` : `${name}: ${pct}%`;
+    }
 
-  nodeById(id) { return this.nodes.find(n=>n.id===id); }
+    async function embed(text) {
+      const pipe = await ensureEmbeddings();
+      const output = await pipe(text, { pooling: 'mean', normalize: true });
+      return normalize(meanPoolTensor(output));
+    }
+
+    async function rerank(query, docs) {
+      const rr = await ensureReranker();
+      const pairs = docs.map(doc => `${query} [SEP] ${doc.text}`);
+      const scores = [];
+      for (let i = 0; i < pairs.length; i++) {
+        try {
+          const out = await rr(pairs[i]);
+          const s = Array.isArray(out) ? (out[0]?.score ?? out[0]?.label_score ?? 0) : (out?.score ?? 0);
+          scores.push(s);
+        } catch {
+          scores.push(docs[i].score ?? 0);
+        }
+      }
+      return scores;
+    }
+
+    async function generateAnswer(query, contextDocs) {
+      const context = contextDocs.map((d, i) => `[#${i + 1} | ${d.metadata?.source || 'src'} | ${d.date || 'no-date'} | sim ${fmt(d.score)} | rerank ${fmt(d.rerankScore)}]\n${d.text}`).join('\n\n');
+      const prompt = `You are a compact retrieval-augmented assistant. Use only the provided context when possible. If the answer is not in context, say what is missing.\n\nQuestion: ${query}\n\nContext:\n${context}\n\nAnswer:`;
+
+      try {
+        const llm = await ensureChatModel();
+        const out = await llm(prompt, {
+          max_new_tokens: 180,
+          temperature: Number(state.nodes.find(n => n.id === 'answer').settings.temperature) || 0.25,
+          do_sample: false,
+          return_full_text: false,
+        });
+        const txt = Array.isArray(out) ? (out[0]?.generated_text || out[0]?.text || '') : (out?.generated_text || out?.text || '');
+        return String(txt).trim() || fallbackAnswer(query, contextDocs);
+      } catch (err) {
+        console.warn('LLM fallback:', err);
+        return fallbackAnswer(query, contextDocs);
+      }
+    }
+
+    function fallbackAnswer(query, contextDocs) {
+      if (!contextDocs.length) return `I could not find supporting entries for: ${query}`;
+      return `I found ${contextDocs.length} relevant entries.\n\n${contextDocs.map((d, i) => `${i + 1}. ${snippet(d.text, 180)}`).join('\n\n')}\n\nThis answer is generated from the selected local context.`;
+    }
+
+    function markSelected(ids) {
+      for (const doc of state.docs) doc.selected = ids.includes(doc.id);
+    }
+
+    async function saveDocs() {
+      await idbPut('meta', { key: META_KEY, value: { updatedAt: Date.now() } });
+      for (const doc of state.docs) {
+        await idbPut(STORE_NAME, doc);
+      }
+    }
+
+    function dbOpen() {
+      return new Promise((resolve, reject) => {
+        const req = indexedDB.open(DB_NAME, 1);
+        req.onupgradeneeded = () => {
+          const db = req.result;
+          if (!db.objectStoreNames.contains(STORE_NAME)) {
+            db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+          }
+          if (!db.objectStoreNames.contains('meta')) {
+            db.createObjectStore('meta', { keyPath: 'key' });
+          }
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+      });
+    }
+
+    let _db;
+    async function getDB() {
+      if (_db) return _db;
+      _db = await dbOpen();
+      return _db;
+    }
+
+    async function idbGetAll(storeName) {
+      const db = await getDB();
+      return new Promise((resolve, reject) => {
+        const tx = db.transaction(storeName, 'readonly');
+        const store = tx.objectStore(storeName);
+        const req = store.getAll();
+        req.onsuccess = () => resolve(req.result || []);
+        req.onerror = () => reject(req.error);
+      });
+    }
+
+    async function idbPut(storeName, value) {
+      const db = await getDB();
+      return new Promise((resolve, reject) => {
+        const tx = db.transaction(storeName, 'readwrite');
+        const store = tx.objectStore(storeName);
+        const req = store.put(value);
+        req.onsuccess = () => resolve(true);
+        req.onerror = () => reject(req.error);
+      });
+    }
+
+    function hydrateDoc(raw) {
+      return {
+        ...raw,
+        vector: Array.isArray(raw.vector) ? raw.vector : Array.from(raw.vector || []),
+        metadata: raw.metadata || {},
+        score: raw.score ?? null,
+        rerankScore: raw.rerankScore ?? null,
+        selected: !!raw.selected,
+        vectorPreview: raw.vectorPreview || previewVector(Array.isArray(raw.vector) ? raw.vector : Array.from(raw.vector || [])),
+        preview: raw.preview || snippet(raw.text, 110),
+      };
+    }
+
+    async function loadDocs() {
+      const all = await idbGetAll(STORE_NAME);
+      state.docs = all.map(hydrateDoc);
+      if (!state.docs.length) {
+        await seedDemoDocs(true);
+      }
+      renderAll();
+      logLine(`Loaded ${state.docs.length} local rows from browser storage.`);
+    }
+
+    function renderAll() {
+      renderTable();
+      renderSelected();
+      renderContextPills();
+      renderFlow();
+      els.modelChip.textContent = `Models: ${state.embeddingPipe ? 'ready' : 'idle'}`;
+      els.dbChip.textContent = `Vector DB: ${state.docs.length} rows`;
+    }
+
+    function addChatSystem(text) {
+      appendMessage('system', text);
+    }
+
+    async function seedDemoDocs(silent = false) {
+      const samples = [
+        {
+          text: 'Transformers.js runs machine learning models directly in the browser and supports local caching so models can be reused after the first download.',
+          source: 'docs',
+          tags: ['transformers.js', 'browser', 'cache'],
+          date: '2026-05-01'
+        },
+        {
+          text: 'A local-first vector table can store the text, metadata, vectors, and dates together, which makes RAG inspection much easier than a black-box API.',
+          source: 'design-notes',
+          tags: ['rag', 'ux', 'local-first'],
+          date: '2026-05-02'
+        },
+        {
+          text: 'For lightweight retrieval in browser demos, a compact embedding model and a tiny reranker usually give the best latency-to-quality tradeoff.',
+          source: 'guide',
+          tags: ['embedding', 'reranker', 'latency'],
+          date: '2026-05-03'
+        },
+      ];
+      for (const s of samples) {
+        const exists = state.docs.some(d => d.text === s.text);
+        if (exists) continue;
+        const vector = await embed(s.text);
+        const doc = {
+          id: uid(),
+          text: s.text,
+          vector,
+          vectorPreview: previewVector(vector),
+          metadata: { source: s.source, tags: s.tags },
+          date: s.date,
+          preview: snippet(s.text, 110),
+          score: null,
+          rerankScore: null,
+          createdAt: Date.now(),
+          selected: false,
+        };
+        state.docs.unshift(doc);
+        await idbPut(STORE_NAME, doc);
+      }
+      renderAll();
+      if (!silent) logLine('Seeded demo documents into local storage.');
+    }
+
+    async function addDoc() {
+      const text = els.docText.value.trim();
+      if (!text) return;
+      setPipeline('Embedding new document…', 'embed');
+      const source = els.docSource.value.trim() || 'manual';
+      const date = els.docDate.value || new Date().toISOString().slice(0, 10);
+      const tags = els.docTags.value.split(',').map(s => s.trim()).filter(Boolean);
+      const vector = await embed(text);
+      const doc = {
+        id: uid(),
+        text,
+        vector,
+        vectorPreview: previewVector(vector),
+        metadata: { source, tags },
+        date,
+        preview: snippet(text, 110),
+        score: null,
+        rerankScore: null,
+        createdAt: Date.now(),
+        selected: false,
+      };
+      state.docs.unshift(doc);
+      await idbPut(STORE_NAME, doc);
+      renderAll();
+      logLine(`Inserted row into vector table (${source}, ${date}).`);
+      addChatSystem(`Inserted one new entry into the local vector DB and embedded it in the browser.`);
+      els.docText.value = '';
+      els.docTags.value = '';
+      setPipeline('Pipeline idle', null, true);
+    }
+
+    async function ask() {
+      const query = els.chatInput.value.trim();
+      if (!query) return;
+      appendMessage('user', query);
+      els.chatInput.value = '';
+      state.selected = [];
+      markSelected([]);
+      renderAll();
+
+      try {
+        setPipeline('Embedding the query…', 'embed');
+        logLine('Query embedding started.');
+        const qvec = await embed(query);
+
+        setPipeline('Searching vector DB…', 'search');
+        const topK = Math.max(1, Number(els.topK.value) || 5);
+        const rerankK = Math.max(topK, Number(els.rerankK.value) || 8);
+        state.nodes.find(n => n.id === 'search').settings.topK = topK;
+        state.nodes.find(n => n.id === 'rerank').settings.rerankK = rerankK;
+
+        const ranked = state.docs.map(doc => ({
+          ...doc,
+          score: cosine(qvec, doc.vector),
+          rerankScore: null,
+        })).sort((a, b) => b.score - a.score);
+
+        const picked = ranked.slice(0, rerankK);
+        picked.forEach(d => d.selected = true);
+        logLine(`Top-${topK} search selected ${Math.min(topK, picked.length)} rows for reranking.`);
+        renderTable();
+
+        setPipeline('Reranking candidates…', 'rerank');
+        let rerankScores = [];
+        try {
+          rerankScores = await rerank(query, picked);
+        } catch (e) {
+          console.warn(e);
+          rerankScores = picked.map(d => d.score);
+        }
+        const reranked = picked.map((doc, i) => ({ ...doc, rerankScore: rerankScores[i] ?? doc.score }))
+          .sort((a, b) => (b.rerankScore ?? 0) - (a.rerankScore ?? 0));
+
+        const finalTop = reranked.slice(0, topK);
+        state.selected = finalTop;
+        markSelected(finalTop.map(d => d.id));
+        renderAll();
+        logLine(`Reranker chose ${finalTop.length} context rows.`);
+
+        setPipeline('Generating answer with Qwen3.5…', 'answer');
+        const answer = await generateAnswer(query, finalTop);
+        appendMessage('assistant', answer);
+        renderContextPills();
+        setPipeline('Pipeline idle', null, true);
+      } catch (err) {
+        console.error(err);
+        setPipeline('Pipeline failed', null, false);
+        appendMessage('assistant', `Something failed while running the browser RAG pipeline.\n\n${err?.message || err}`);
+        logLine('Pipeline error encountered.');
+      }
+    }
+
+    function renderFlow() {
+      const area = els.flowArea;
+      area.querySelectorAll('.node').forEach(n => n.remove());
+      els.flowLines.innerHTML = '';
+      const rect = area.getBoundingClientRect();
+      els.flowLines.setAttribute('viewBox', `0 0 ${Math.max(rect.width, 1600)} ${Math.max(rect.height, 320)}`);
+      const nodes = state.nodes;
+
+      for (const node of nodes) {
+        const div = document.createElement('div');
+        div.className = 'node' + (state.activeNode === node.id ? ' active' : '');
+        div.dataset.id = node.id;
+        div.style.left = `${node.x}px`;
+        div.style.top = `${node.y}px`;
+        div.innerHTML = `
+          <div class="node-header" data-drag-handle="1">
+            <strong>${escapeHtml(node.label)}</strong>
+            <span class="node-pill">${escapeHtml(node.kind)}</span>
+          </div>
+          <div class="node-body">
+            <div class="tiny">${escapeHtml(node.settings.model || node.settings.backend || node.settings.metric || '')}</div>
+            <div class="node-settings">
+              ${renderNodeSettings(node)}
+            </div>
+          </div>
+        `;
+        area.appendChild(div);
+
+        const handle = div.querySelector('.node-header');
+        handle.addEventListener('pointerdown', e => beginDrag(e, node));
+        bindNodeInputs(div, node);
+      }
+
+      const centers = nodes.map(node => ({
+        x: node.x + 180,
+        y: node.y + 50,
+      }));
+
+      for (let i = 0; i < centers.length - 1; i++) {
+        const a = centers[i];
+        const b = centers[i + 1];
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        const mid = (a.x + b.x) / 2;
+        const d = `M ${a.x} ${a.y} C ${mid} ${a.y}, ${mid} ${b.y}, ${b.x} ${b.y}`;
+        path.setAttribute('d', d);
+        path.setAttribute('fill', 'none');
+        path.setAttribute('stroke', i === activeIndex() ? 'rgba(56,211,159,.85)' : 'rgba(148,163,184,.35)');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('stroke-dasharray', '4 4');
+        els.flowLines.appendChild(path);
+      }
+    }
+
+    function activeIndex() {
+      return state.nodes.findIndex(n => n.id === state.activeNode);
+    }
+
+    function renderNodeSettings(node) {
+      const settings = node.settings;
+      if (node.id === 'ingest') {
+        return `<div class="full"><label>Chunk size</label><input type="number" data-node="ingest" data-key="split" value="${settings.split}"></div><div class="full"><label>Overlap</label><input type="number" data-node="ingest" data-key="overlap" value="${settings.overlap}"></div>`;
+      }
+      if (node.id === 'embed') {
+        return `<div class="full"><label>Model</label><select data-node="embed" data-key="model"><option ${settings.model===EMBED_MODEL?'selected':''}>${EMBED_MODEL}</option></select></div><div><label>Normalize</label><select data-node="embed" data-key="normalize"><option value="true" ${settings.normalize ? 'selected' : ''}>true</option><option value="false" ${!settings.normalize ? 'selected' : ''}>false</option></select></div>`;
+      }
+      if (node.id === 'store') {
+        return `<div class="full"><label>Backend</label><input disabled value="${settings.backend}"></div><div class="full"><label>Schema</label><input disabled value="${settings.schema}"></div>`;
+      }
+      if (node.id === 'search') {
+        return `<div><label>Top K</label><input type="number" data-node="search" data-key="topK" value="${settings.topK}"></div><div><label>Metric</label><input disabled value="${settings.metric}"></div>`;
+      }
+      if (node.id === 'rerank') {
+        return `<div class="full"><label>Model</label><input disabled value="${settings.model}"></div><div><label>Rerank K</label><input type="number" data-node="rerank" data-key="rerankK" value="${settings.rerankK}"></div>`;
+      }
+      if (node.id === 'answer') {
+        return `<div class="full"><label>Model</label><input disabled value="${settings.model}"></div><div><label>Temp</label><input type="number" step="0.05" data-node="answer" data-key="temperature" value="${settings.temperature}"></div>`;
+      }
+      return '';
+    }
+
+    function bindNodeInputs(nodeEl, node) {
+      nodeEl.querySelectorAll('[data-node]').forEach(inp => {
+        inp.addEventListener('input', () => {
+          const key = inp.dataset.key;
+          const val = inp.value;
+          node.settings[key] = inp.tagName === 'SELECT' ? (val === 'true' ? true : val === 'false' ? false : val) : (inp.type === 'number' ? Number(val) : val);
+          if (node.id === 'search' && key === 'topK') els.topK.value = node.settings.topK;
+          if (node.id === 'rerank' && key === 'rerankK') els.rerankK.value = node.settings.rerankK;
+          if (node.id === 'answer' && key === 'temperature') {}
+          renderFlow();
+        });
+      });
+    }
+
+    function beginDrag(e, node) {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const ox = node.x;
+      const oy = node.y;
+      state.drag = { node, startX, startY, ox, oy };
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      const onMove = ev => {
+        if (!state.drag) return;
+        node.x = Math.max(0, ox + (ev.clientX - startX));
+        node.y = Math.max(0, oy + (ev.clientY - startY));
+        renderFlow();
+      };
+      const onUp = () => {
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        state.drag = null;
+      };
+      window.addEventListener('pointermove', onMove);
+      window.addEventListener('pointerup', onUp, { once: true });
+    }
+
+    function attachEvents() {
+      els.addDocBtn.addEventListener('click', addDoc);
+      els.askBtn.addEventListener('click', ask);
+      els.seedBtn.addEventListener('click', () => seedDemoDocs(false));
+      els.chatInput.addEventListener('keydown', e => {
+        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) ask();
+      });
+      window.addEventListener('resize', () => renderFlow());
+    }
+
+    async function boot() {
+      els.docDate.value = new Date().toISOString().slice(0, 10);
+      els.gpuChip.textContent = `Backend: ${navigator.gpu ? 'WebGPU' : 'WebAssembly/CPU'}`;
+      els.gpuChip.className = 'chip ' + (navigator.gpu ? 'good' : 'warn');
+      attachEvents();
+      appendMessage('system', 'Welcome. Add a few documents, then ask a question. The app will embed, search, rerank, and answer using the selected local context.');
+      await loadDocs();
+      renderFlow();
+      logLine('App ready. Models will download on first use and then stay cached in the browser.');
+      setPipeline('Pipeline idle', null, true);
+    }
 
-  raf() {
-    // Advance particles
-    this.particles = this.particles.filter(p => {
-      p.t += p.speed;
-      if (p.t >= 1) { p.done?.(); return false; }
-      return true;
+    boot().catch(err => {
+      console.error(err);
+      appendMessage('assistant', `Failed to initialize the app: ${err?.message || err}`);
+      els.modelChip.textContent = 'Models: initialization failed';
+      els.modelChip.className = 'chip bad';
+      setPipeline('Initialization failed', null, false);
     });
-    this.draw();
-    requestAnimationFrame(() => this.raf());
-  }
-}
-
-/* ─────────────────────────────────────────────────────────── */
-/*  EXPOSE & WIRE UP                                           */
-/* ─────────────────────────────────────────────────────────── */
-window.FE = null;
-
-function closeSettings() {
-  $('node-settings').classList.remove('open');
-  if (window.FE) window.FE.selectedId = null;
-}
-window.closeSettings = closeSettings;
-
-/* ─────────────────────────────────────────────────────────── */
-/*  MAIN INIT                                                  */
-/* ─────────────────────────────────────────────────────────── */
-async function main() {
-  // Node editor
-  window.FE = new FlowEditor();
-
-  // IndexedDB
-  try {
-    await openIDB();
-    const saved = await idbGetAll();
-    ST.db = saved;
-    rebuildTable();
-  } catch(e) {
-    console.warn('IndexedDB unavailable:', e.message);
-  }
-
-  // Send button
-  $('send-btn').addEventListener('click', () => {
-    const q = $('chat-input').value.trim();
-    if (q) { $('chat-input').value=''; runRAG(q); }
-  });
-  $('chat-input').addEventListener('keydown', e => {
-    if (e.key==='Enter' && !e.shiftKey && !ST.busy) {
-      const q = $('chat-input').value.trim();
-      if (q) { $('chat-input').value=''; runRAG(q); }
-    }
-  });
-
-  // Add entry
-  $('add-btn').addEventListener('click', addEntry);
-
-  // Load models
-  await loadModels();
-}
-
-main();
-</script>
+  </script>
 </body>
 </html>
\ No newline at end of file
