diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,1918 +3,1181 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>RAG Visualizer - Browser-Based RAG Pipeline</title>
+<title>RAG Visualizer</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
-:root {
-  --bg-primary: #0d1117;
-  --bg-secondary: #161b22;
-  --bg-tertiary: #1c2333;
-  --bg-card: #1e2a3a;
-  --border: #30363d;
-  --border-active: #58a6ff;
-  --text-primary: #e6edf3;
-  --text-secondary: #8b949e;
-  --text-muted: #6e7681;
-  --accent-blue: #58a6ff;
-  --accent-purple: #bc8cff;
-  --accent-green: #3fb950;
-  --accent-orange: #f0883e;
-  --accent-red: #f85149;
-  --accent-yellow: #d29922;
-  --glow-blue: rgba(88, 166, 255, 0.3);
-  --glow-purple: rgba(188, 140, 255, 0.3);
-  --glow-green: rgba(63, 185, 80, 0.3);
-  --glow-orange: rgba(240, 136, 62, 0.3);
-}
-
-* { margin: 0; padding: 0; box-sizing: border-box; }
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  height: 100vh;
-  overflow: hidden;
-}
-
-.app-container {
-  display: grid;
-  grid-template-columns: 380px 1fr;
-  grid-template-rows: 50px 1fr;
-  height: 100vh;
-  gap: 1px;
-  background: var(--border);
-}
-
-.header {
-  grid-column: 1 / -1;
-  background: var(--bg-secondary);
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  gap: 16px;
-  border-bottom: 1px solid var(--border);
-  z-index: 10;
-}
-
-.header-logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 700;
-  font-size: 16px;
-  color: var(--accent-blue);
-}
-
-.header-logo svg { width: 24px; height: 24px; }
-
-.header-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--accent-red);
-  animation: none;
-}
-
-.status-dot.ready { background: var(--accent-green); animation: pulse 2s infinite; }
-.status-dot.loading { background: var(--accent-yellow); animation: pulse 1s infinite; }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.header-actions {
-  margin-left: auto;
-  display: flex;
-  gap: 8px;
-}
-
-.btn {
-  padding: 6px 14px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.btn:hover { border-color: var(--accent-blue); background: rgba(88,166,255,0.1); }
-.btn-primary { background: var(--accent-blue); color: #000; border-color: var(--accent-blue); }
-.btn-primary:hover { background: #79b8ff; }
-.btn-danger { border-color: var(--accent-red); color: var(--accent-red); }
-.btn-danger:hover { background: rgba(248,81,73,0.1); }
-.btn-sm { padding: 4px 10px; font-size: 11px; }
-.btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.chat-panel {
-  background: var(--bg-secondary);
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border);
-  overflow: hidden;
-}
-
-.chat-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-tertiary);
-}
-
-.chat-tab {
-  padding: 10px 16px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
-}
-
-.chat-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
-.chat-tab:hover { color: var(--text-primary); }
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.chat-messages::-webkit-scrollbar { width: 6px; }
-.chat-messages::-webkit-scrollbar-track { background: transparent; }
-.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-
-.message {
-  max-width: 90%;
-  padding: 10px 14px;
-  border-radius: 12px;
-  font-size: 13px;
-  line-height: 1.5;
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.message-user {
-  align-self: flex-end;
-  background: var(--accent-blue);
-  color: #000;
-  border-bottom-right-radius: 4px;
-}
-
-.message-ai {
-  align-self: flex-start;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-bottom-left-radius: 4px;
-}
-
-.message-context {
-  align-self: flex-start;
-  background: rgba(88,166,255,0.08);
-  border: 1px solid rgba(88,166,255,0.2);
-  border-bottom-left-radius: 4px;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.message-context .ctx-label {
-  font-weight: 600;
-  color: var(--accent-blue);
-  margin-bottom: 4px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.message-system {
-  align-self: center;
-  background: rgba(63,185,80,0.1);
-  border: 1px solid rgba(63,185,80,0.2);
-  color: var(--accent-green);
-  font-size: 11px;
-  text-align: center;
-  padding: 6px 12px;
-}
-
-.chat-input-area {
-  padding: 12px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-tertiary);
-}
-
-.chat-input-wrapper {
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-.chat-input {
-  flex: 1;
-  padding: 10px 14px;
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 13px;
-  resize: none;
-  outline: none;
-  font-family: inherit;
-  min-height: 40px;
-  max-height: 120px;
-}
-
-.chat-input:focus { border-color: var(--accent-blue); }
-
-.send-btn {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  border: none;
-  background: var(--accent-blue);
-  color: #000;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-  flex-shrink: 0;
-}
-
-.send-btn:hover { background: #79b8ff; transform: scale(1.05); }
-.send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
-
-.right-panel {
-  background: var(--bg-primary);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.right-tabs {
-  display: flex;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-secondary);
-  padding: 0 12px;
-  flex-shrink: 0;
-}
-
-.right-tab {
-  padding: 10px 18px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  border-bottom: 2px solid transparent;
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-
-.right-tab.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); }
-.right-tab:hover { color: var(--text-primary); }
-
-.right-content {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.tab-panel {
-  display: none;
-  height: 100%;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.tab-panel.active { display: block; }
-
-.tab-panel::-webkit-scrollbar { width: 6px; }
-.tab-panel::-webkit-scrollbar-track { background: transparent; }
-.tab-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-
-.section-title {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 12px;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.section-title svg { width: 18px; height: 18px; }
-
-/* Vector DB Table */
-.vector-table-container {
-  overflow-x: auto;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-}
-
-.vector-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.vector-table th {
-  padding: 10px 12px;
-  text-align: left;
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  font-weight: 600;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-
-.vector-table td {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-primary);
-  transition: all 0.3s;
-}
-
-.vector-table tr:hover td { background: rgba(88,166,255,0.05); }
-
-.vector-table tr.highlighted td {
-  background: rgba(88,166,255,0.15) !important;
-  animation: highlightPulse 1.5s ease;
-}
-
-@keyframes highlightPulse {
-  0% { background: rgba(88,166,255,0.3); }
-  100% { background: rgba(88,166,255,0.15); }
-}
-
-.vector-table tr.selected td {
-  background: rgba(63,185,80,0.15) !important;
-  border-left: 3px solid var(--accent-green);
-}
-
-.vector-preview {
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-muted);
-  font-family: monospace;
-  font-size: 11px;
-}
-
-.score-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 600;
-  background: rgba(88,166,255,0.15);
-  color: var(--accent-blue);
-}
-
-.rank-badge {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  text-align: center;
-  line-height: 24px;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.rank-1 { background: rgba(240,136,62,0.2); color: var(--accent-orange); }
-.rank-2 { background: rgba(88,166,255,0.2); color: var(--accent-blue); }
-.rank-3 { background: rgba(188,140,255,0.2); color: var(--accent-purple); }
-.rank-other { background: rgba(139,148,158,0.15); color: var(--text-muted); }
-
+:root{--bg:#09090b;--bg2:#18181b;--bg3:#27272a;--fg:#fafaf9;--muted:#a1a1aa;--accent:#f59e0b;--accent2:#d97706;--border:#3f3f46;--card:#1c1c1f;--success:#22c55e;--error:#ef4444;--info:#06b6d4;--node-input:#06b6d4;--node-embed:#f59e0b;--node-search:#22c55e;--node-rerank:#f97316;--node-llm:#ef4444;--node-output:#14b8a6}
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--fg);height:100vh;overflow:hidden;display:flex;flex-direction:column}
+.mono{font-family:'IBM Plex Mono',monospace}
+header{height:54px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;z-index:50}
+header h1{font-size:16px;font-weight:700;letter-spacing:-.5px;white-space:nowrap}
+header h1 span{color:var(--accent)}
+.hdr-btn{height:32px;padding:0 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--fg);font-size:12px;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
+.hdr-btn:hover{border-color:var(--accent);color:var(--accent)}
+.hdr-btn.primary{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}
+.hdr-btn.primary:hover{background:var(--accent2)}
+.hdr-btn.danger{border-color:var(--error);color:var(--error)}
+.hdr-btn.danger:hover{background:var(--error);color:#fff}
+.spacer{flex:1}
+main{flex:1;display:flex;overflow:hidden}
+/* Node Panel */
+#nodePanel{width:260px;min-width:260px;background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:0;position:relative}
+.node-col{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}
+.node-box{width:220px;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .3s;position:relative}
+.node-box:hover{transform:translateY(-1px);border-color:var(--muted)}
+.node-box.active{border-color:var(--accent);box-shadow:0 0 20px rgba(245,158,11,.15)}
+.node-box.processing{animation:nodePulse 1s ease-in-out infinite}
+.node-box.done{border-color:var(--success)}
+.node-header{height:32px;display:flex;align-items:center;padding:0 10px;gap:8px;font-size:12px;font-weight:600}
+.node-header i{font-size:11px}
+.node-body{padding:8px 10px;font-size:10px;color:var(--muted);min-height:28px;display:flex;align-items:center;justify-content:space-between}
+.node-status{width:8px;height:8px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);flex-shrink:0}
+.node-status.idle{background:var(--bg3)}
+.node-status.loading{background:var(--accent);animation:blink 1s infinite}
+.node-status.active{background:var(--success);box-shadow:0 0 8px var(--success)}
+.node-status.error{background:var(--error)}
+.node-connector{width:2px;height:28px;background:var(--border);position:relative}
+.node-connector::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--border)}
+.node-connector.active{background:var(--accent)}
+.node-connector.active::after{background:var(--accent);box-shadow:0 0 6px var(--accent)}
+@keyframes nodePulse{0%,100%{box-shadow:0 0 10px rgba(245,158,11,.1)}50%{box-shadow:0 0 25px rgba(245,158,11,.3)}}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
+/* Center Panel */
+#centerPanel{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
+#contextViz{max-height:180px;border-bottom:1px solid var(--border);overflow-y:auto;padding:12px 16px;background:var(--bg2);display:none}
+#contextViz.show{display:block}
+.ctx-title{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
+.ctx-item{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin-bottom:6px;font-size:12px;position:relative;overflow:hidden;transition:all .3s}
+.ctx-item .score{position:absolute;top:8px;right:8px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px}
+.ctx-item .score.high{background:rgba(34,197,94,.15);color:var(--success)}
+.ctx-item .score.med{background:rgba(245,158,11,.15);color:var(--accent)}
+.ctx-item .score.low{background:rgba(239,68,68,.15);color:var(--error)}
+.ctx-item .text{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:60px}
+.ctx-rerank{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10px;color:var(--muted)}
+.ctx-rerank .arrow{color:var(--node-rerank)}
+.ctx-rerank .new-score{color:var(--node-rerank);font-weight:600}
+/* Chat */
+#chatArea{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
+.chat-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6;word-break:break-word}
+.chat-msg.user{align-self:flex-end;background:var(--accent);color:#000;border-bottom-right-radius:4px;font-weight:500}
+.chat-msg.assistant{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}
+.chat-msg.system{align-self:center;background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.2);color:var(--info);font-size:11px;text-align:center;max-width:100%}
+.chat-msg pre{background:var(--bg);padding:8px;border-radius:6px;margin:6px 0;overflow-x:auto;font-size:11px}
+#chatInput{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--bg2)}
+#chatInput textarea{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--fg);font-family:inherit;font-size:13px;resize:none;height:42px;max-height:120px;outline:none;transition:border-color .2s}
+#chatInput textarea:focus{border-color:var(--accent)}
+#chatInput button{width:42px;height:42px;border-radius:8px;border:none;background:var(--accent);color:#000;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}
+#chatInput button:hover{background:var(--accent2)}
+#chatInput button:disabled{opacity:.4;cursor:not-allowed}
+/* Right Panel - Vector DB */
+#vectorPanel{width:420px;min-width:360px;display:flex;flex-direction:column;overflow:hidden;background:var(--bg2)}
+.vp-toolbar{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+.vp-search{flex:1;min-width:120px;height:30px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:0 10px;color:var(--fg);font-family:inherit;font-size:12px;outline:none;transition:border-color .2s}
+.vp-search:focus{border-color:var(--accent)}
+.vp-btn{height:30px;padding:0 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--fg);font-size:11px;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;white-space:nowrap}
+.vp-btn:hover{border-color:var(--accent);color:var(--accent)}
+.vp-btn.on{background:rgba(34,197,94,.15);border-color:var(--success);color:var(--success)}
+.vp-btn.off{background:rgba(239,68,68,.1);border-color:var(--error);color:var(--error)}
+.vp-btn.accent{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}
+.vp-btn.accent:hover{background:var(--accent2)}
 /* Add Entry Form */
-.add-entry-form {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 16px;
-  margin-bottom: 16px;
-}
-
-.form-group {
-  margin-bottom: 12px;
-}
-
-.form-label {
-  display: block;
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-  font-weight: 500;
-}
-
-.form-input, .form-textarea, .form-select {
-  width: 100%;
-  padding: 8px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.form-input:focus, .form-textarea:focus, .form-select:focus {
-  border-color: var(--accent-blue);
-}
-
-.form-textarea { resize: vertical; min-height: 80px; }
-
-.form-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-/* Reranking Section */
-.rerank-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 14px;
-  margin-bottom: 10px;
-  transition: all 0.3s;
-  position: relative;
-  overflow: hidden;
-}
-
-.rerank-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 4px;
-  height: 100%;
-  background: var(--border);
-}
-
-.rerank-card.rerank-1::before { background: var(--accent-orange); }
-.rerank-card.rerank-2::before { background: var(--accent-blue); }
-.rerank-card.rerank-3::before { background: var(--accent-purple); }
-
-.rerank-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.rerank-score {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.rerank-content {
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--text-primary);
-}
-
-.rerank-meta {
-  display: flex;
-  gap: 12px;
-  margin-top: 8px;
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-/* Node Editor */
-.node-editor-container {
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  background: var(--bg-primary);
-}
-
-.node-canvas {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.node-canvas svg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.node {
-  position: absolute;
-  width: 220px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  overflow: hidden;
-  cursor: grab;
-  transition: box-shadow 0.3s, border-color 0.3s;
-  z-index: 5;
-}
-
-.node:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
-.node.active { border-color: var(--accent-blue); box-shadow: 0 0 20px var(--glow-blue); }
-.node.processing { border-color: var(--accent-green); box-shadow: 0 0 20px var(--glow-green); animation: nodePulse 1.5s infinite; }
-
-@keyframes nodePulse {
-  0%, 100% { box-shadow: 0 0 20px var(--glow-green); }
-  50% { box-shadow: 0 0 30px var(--glow-green); }
-}
-
-.node-header {
-  padding: 10px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid var(--border);
-}
-
-.node-header .node-icon {
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-}
-
-.node-icon-chat { background: rgba(88,166,255,0.2); color: var(--accent-blue); }
-.node-icon-embed { background: rgba(188,140,255,0.2); color: var(--accent-purple); }
-.node-icon-vectordb { background: rgba(63,185,80,0.2); color: var(--accent-green); }
-.node-icon-rerank { background: rgba(240,136,62,0.2); color: var(--accent-orange); }
-.node-icon-llm { background: rgba(248,81,73,0.2); color: var(--accent-red); }
-.node-icon-output { background: rgba(210,153,34,0.2); color: var(--accent-yellow); }
-
-.node-body {
-  padding: 10px 12px;
-  font-size: 11px;
-  color: var(--text-secondary);
-  min-height: 60px;
-}
-
-.node-ports {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 8px;
-  margin-top: 4px;
-}
-
-.port {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid var(--border);
-  background: var(--bg-primary);
-  cursor: crosshair;
-  transition: all 0.2s;
-}
-
-.port:hover { border-color: var(--accent-blue); background: var(--accent-blue); }
-.port.input { margin-top: -6px; }
-.port.output { margin-top: -6px; }
-
-.node-settings {
-  padding: 8px 12px;
-  border-top: 1px solid var(--border);
-  background: rgba(0,0,0,0.2);
-}
-
-.node-setting {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.node-setting label {
-  font-size: 10px;
-  color: var(--text-muted);
-}
-
-.node-setting input, .node-setting select {
-  width: 80px;
-  padding: 2px 6px;
-  border-radius: 3px;
-  border: 1px solid var(--border);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 10px;
-  outline: none;
-}
-
-/* Connection lines */
-.connection {
-  stroke: var(--border);
-  stroke-width: 2;
-  fill: none;
-  transition: stroke 0.3s;
-}
-
-.connection.active {
-  stroke: var(--accent-green);
-  stroke-width: 3;
-  filter: drop-shadow(0 0 4px var(--glow-green));
-}
-
-.connection.processing {
-  stroke: var(--accent-blue);
-  stroke-width: 3;
-  filter: drop-shadow(0 0 4px var(--glow-blue));
-  animation: flowLine 1s linear infinite;
-  stroke-dasharray: 8 4;
-}
-
-@keyframes flowLine {
-  to { stroke-dashoffset: -12; }
-}
-
-/* Stats bar */
-.stats-bar {
-  display: flex;
-  gap: 16px;
-  padding: 12px 16px;
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-}
-
-.stat-value {
-  font-weight: 700;
-  color: var(--accent-blue);
-}
-
-.stat-label {
-  color: var(--text-muted);
-  font-size: 11px;
-}
-
-/* Progress bar */
-.progress-bar {
-  width: 100%;
-  height: 4px;
-  background: var(--bg-primary);
-  border-radius: 2px;
-  overflow: hidden;
-  margin-top: 8px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: var(--accent-blue);
-  border-radius: 2px;
-  transition: width 0.5s ease;
-  animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
-  0% { opacity: 1; }
-  50% { opacity: 0.7; }
-  100% { opacity: 1; }
-}
-
-/* Model loading overlay */
-.model-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(13,17,23,0.9);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  gap: 20px;
-}
-
-.model-overlay.hidden { display: none; }
-
-.model-spinner {
-  width: 48px;
-  height: 48px;
-  border: 3px solid var(--border);
-  border-top-color: var(--accent-blue);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.model-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.model-status {
-  font-size: 13px;
-  color: var(--text-secondary);
-  text-align: center;
-}
-
-.model-progress {
-  width: 300px;
-  height: 6px;
-  background: var(--bg-tertiary);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.model-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
-  border-radius: 3px;
-  transition: width 0.3s;
-}
-
-/* Vector visualization */
-.vector-viz {
-  display: flex;
-  gap: 2px;
-  align-items: end;
-  height: 40px;
-  padding: 4px 0;
-}
-
-.vector-bar {
-  width: 4px;
-  background: var(--accent-blue);
-  border-radius: 1px;
-  transition: height 0.3s;
-  opacity: 0.7;
-}
-
-.vector-bar:nth-child(odd) { background: var(--accent-purple); }
-
-/* Tooltip */
-.tooltip {
-  position: absolute;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px 12px;
-  font-size: 11px;
-  color: var(--text-primary);
-  z-index: 100;
-  pointer-events: none;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-  max-width: 200px;
-}
-
+#addForm{padding:12px;border-bottom:1px solid var(--border);display:none;background:var(--card)}
+#addForm.show{display:block}
+#addForm textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--fg);font-family:inherit;font-size:12px;resize:vertical;outline:none;margin-bottom:8px}
+#addForm textarea:focus{border-color:var(--accent)}
+#addForm label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px}
+/* Table */
+#tableWrap{flex:1;overflow:auto;padding:0}
+#vectorTable{width:100%;border-collapse:collapse;font-size:11px}
+#vectorTable thead{position:sticky;top:0;z-index:5}
+#vectorTable th{background:var(--bg3);padding:8px 10px;text-align:left;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);cursor:pointer;user-select:none;white-space:nowrap;border-bottom:1px solid var(--border);transition:color .2s}
+#vectorTable th:hover{color:var(--accent)}
+#vectorTable th .sort-icon{margin-left:4px;font-size:9px;opacity:.5}
+#vectorTable th.sorted .sort-icon{opacity:1;color:var(--accent)}
+#vectorTable td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:top;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#vectorTable tr{cursor:pointer;transition:background .15s}
+#vectorTable tbody tr:hover{background:rgba(245,158,11,.05)}
+#vectorTable tbody tr.highlight{animation:rowHighlight 1.5s ease-out}
+#vectorTable tbody tr.rerank-up{animation:rowUp .5s ease-out}
+#vectorTable tbody tr.rerank-down{animation:rowDown .5s ease-out}
+@keyframes rowHighlight{0%{background:rgba(245,158,11,.3)}100%{background:transparent}}
+@keyframes rowUp{0%{background:rgba(34,197,94,.3);transform:translateX(-4px)}100%{background:transparent;transform:translateX(0)}}
+@keyframes rowDown{0%{background:rgba(239,68,68,.2);transform:translateX(4px)}100%{background:transparent;transform:translateX(0)}}
+.vec-preview{color:var(--muted);font-size:10px}
+.meta-preview{color:var(--info);font-size:10px}
+.del-btn{background:none;border:none;color:var(--error);cursor:pointer;font-size:12px;opacity:.6;transition:opacity .2s;padding:2px 4px}
+.del-btn:hover{opacity:1}
+/* Settings Sidebar */
+#settingsSidebar{position:fixed;top:0;right:0;width:320px;height:100vh;background:var(--bg2);border-left:1px solid var(--border);z-index:100;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow:hidden}
+#settingsSidebar.open{transform:translateX(0)}
+#settingsOverlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;opacity:0;pointer-events:none;transition:opacity .3s}
+#settingsOverlay.open{opacity:1;pointer-events:all}
+.ss-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
+.ss-header h3{font-size:14px;font-weight:600}
+.ss-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;transition:color .2s}
+.ss-close:hover{color:var(--fg)}
+.ss-body{flex:1;overflow-y:auto;padding:16px}
+.ss-field{margin-bottom:16px}
+.ss-field label{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:600}
+.ss-field input,.ss-field textarea,.ss-field select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--fg);font-family:'IBM Plex Mono',monospace;font-size:12px;outline:none;transition:border-color .2s}
+.ss-field input:focus,.ss-field textarea:focus{border-color:var(--accent)}
+.ss-field .hint{font-size:10px;color:var(--muted);margin-top:4px}
+.ss-load-btn{width:100%;height:36px;border-radius:6px;border:none;background:var(--accent);color:#000;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
+.ss-load-btn:hover{background:var(--accent2)}
+.ss-load-btn:disabled{opacity:.5;cursor:not-allowed}
+/* Modal */
+.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
+.modal-overlay.show{display:flex}
+.modal{background:var(--bg2);border:1px solid var(--border);border-radius:14px;width:600px;max-width:90vw;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}
+.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
+.modal-head h3{font-size:15px;font-weight:600}
+.modal-body{flex:1;overflow-y:auto;padding:20px}
+.modal-body .field{margin-bottom:14px}
+.modal-body .field label{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:600}
+.modal-body .field textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--fg);font-family:inherit;font-size:12px;resize:vertical;outline:none;min-height:60px}
+.modal-body .field textarea:focus{border-color:var(--accent)}
+.modal-body .field .vec-display{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);max-height:120px;overflow:auto;word-break:break-all;line-height:1.6}
+.modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
+/* Download Button */
+#dlBtn{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);background:var(--bg3);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;transition:all .3s}
+#dlBtn:hover{border-color:var(--accent)}
+#dlBtn svg{width:20px;height:20px;transform:rotate(-90deg)}
+#dlBtn .track{fill:none;stroke:var(--border);stroke-width:2.5}
+#dlBtn .progress{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:56.5;stroke-dashoffset:56.5;transition:stroke-dashoffset .3s}
+#dlBtn .icon{position:absolute;font-size:12px;color:var(--muted);transition:color .3s}
+#dlBtn.downloading .icon{color:var(--accent);animation:spin 2s linear infinite}
+#dlPopup{position:absolute;top:46px;right:0;width:280px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px;font-size:11px;z-index:60;display:none;box-shadow:0 8px 30px rgba(0,0,0,.4)}
+#dlPopup.show{display:block}
+#dlPopup .dl-title{font-weight:600;margin-bottom:8px;color:var(--accent)}
+#dlPopup .dl-file{padding:4px 0;color:var(--muted);display:flex;justify-content:space-between}
+#dlPopup .dl-file .pct{color:var(--fg)}
+#dlPopup .dl-bar{height:3px;background:var(--bg);border-radius:2px;margin-top:2px;margin-bottom:6px;overflow:hidden}
+#dlPopup .dl-bar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;width:0}
+@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
+/* Toast */
+#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 20px;font-size:12px;z-index:300;transition:transform .4s ease;box-shadow:0 8px 30px rgba(0,0,0,.4);display:flex;align-items:center;gap:8px}
+#toast.show{transform:translateX(-50%) translateY(0)}
+#toast.success{border-color:var(--success)}
+#toast.error{border-color:var(--error)}
+#toast.info{border-color:var(--info)}
 /* Empty state */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  color: var(--text-muted);
-  text-align: center;
-  gap: 12px;
-}
-
-.empty-state svg { width: 48px; height: 48px; opacity: 0.3; }
-.empty-state p { font-size: 13px; }
-
-/* Context panel in chat */
-.context-panel {
-  background: rgba(88,166,255,0.05);
-  border: 1px solid rgba(88,166,255,0.15);
-  border-radius: 8px;
-  padding: 10px;
-  margin: 8px 0;
-  font-size: 12px;
-}
-
-.context-panel h4 {
-  font-size: 11px;
-  color: var(--accent-blue);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.context-item {
-  padding: 6px 8px;
-  background: rgba(0,0,0,0.2);
-  border-radius: 4px;
-  margin-bottom: 4px;
-  font-size: 11px;
-  color: var(--text-secondary);
-  border-left: 2px solid var(--accent-blue);
-}
-
-.context-item:last-child { margin-bottom: 0; }
-
-/* Loading animation in chat */
-.typing-indicator {
-  display: flex;
-  gap: 4px;
-  padding: 12px 16px;
-}
-
-.typing-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--text-muted);
-  animation: typingBounce 1.4s infinite;
-}
-
-.typing-dot:nth-child(2) { animation-delay: 0.2s; }
-.typing-dot:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes typingBounce {
-  0%, 60%, 100% { transform: translateY(0); }
-  30% { transform: translateY(-6px); }
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .app-container {
-    grid-template-columns: 1fr;
-    grid-template-rows: 50px 1fr;
-  }
-  .chat-panel { display: none; }
-}
-
-/* Scrollbar global */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
-
-/* Dimension visualization */
-.dim-viz {
-  display: grid;
-  grid-template-columns: repeat(32, 1fr);
-  gap: 1px;
-  max-width: 256px;
-}
-
-.dim-cell {
-  height: 8px;
-  border-radius: 1px;
-  transition: background 0.3s;
-}
-
-/* Node editor controls */
-.editor-controls {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  display: flex;
-  gap: 8px;
-  z-index: 10;
-}
-
-.editor-controls .btn {
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-}
-
-/* Settings panel */
-.settings-panel {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 12px;
-  z-index: 10;
-  min-width: 200px;
-}
-
-.settings-panel h4 {
-  font-size: 12px;
-  margin-bottom: 8px;
-  color: var(--accent-purple);
-}
-
-/* Entry added animation */
-@keyframes entryAdded {
-  0% { background: rgba(63,185,80,0.3); }
-  100% { background: transparent; }
-}
-
-.entry-new {
-  animation: entryAdded 2s ease;
-}
+.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px;gap:8px}
+.empty-state i{font-size:32px;opacity:.3}
+/* Scrollbar */
+::-webkit-scrollbar{width:6px;height:6px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:var(--border)}
+/* Background ambiance */
+body::before{content:'';position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 20% 50%,rgba(245,158,11,.03) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(6,182,212,.02) 0%,transparent 50%);pointer-events:none;z-index:0}
+body>*{position:relative;z-index:1}
 </style>
 </head>
 <body>
-
-<div class="model-overlay" id="modelOverlay">
-  <div class="model-spinner"></div>
-  <div class="model-title">Loading RAG Pipeline Models</div>
-  <div class="model-status" id="modelStatus">Initializing...</div>
-  <div class="model-progress">
-    <div class="model-progress-fill" id="modelProgressFill" style="width: 0%"></div>
-  </div>
-  <div style="font-size:11px;color:var(--text-muted)">Models are cached after first download</div>
-</div>
-
-<div class="app-container">
-  <div class="header">
-    <div class="header-logo">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
-      </svg>
-      RAG Visualizer
-    </div>
-    <div class="header-status">
-      <div class="status-dot" id="statusDot"></div>
-      <span id="statusText">Loading models...</span>
-    </div>
-    <div class="header-actions">
-      <button class="btn btn-sm" onclick="exportDB()">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-        Export
-      </button>
-      <button class="btn btn-sm" onclick="clearAll()">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-        Clear
-      </button>
+<!-- Header -->
+<header>
+  <h1><span>RAG</span> Visualizer</h1>
+  <button class="hdr-btn danger" id="clearCacheBtn"><i class="fas fa-trash-can"></i> Clear Cache</button>
+  <button class="hdr-btn primary" id="loadAllBtn"><i class="fas fa-download"></i> Load Models</button>
+  <div style="position:relative">
+    <button id="dlBtn" title="Download progress">
+      <svg viewBox="0 0 24 24"><circle class="track" cx="12" cy="12" r="9"/><circle class="progress" id="dlProgress" cx="12" cy="12" r="9"/></svg>
+      <span class="icon"><i class="fas fa-arrow-down"></i></span>
+    </button>
+    <div id="dlPopup">
+      <div class="dl-title">Download Progress</div>
+      <div id="dlFiles"><div class="empty-state" style="height:auto;padding:8px;font-size:11px"><i class="fas fa-check"></i> No active downloads</div></div>
     </div>
   </div>
-
-  <div class="chat-panel">
-    <div class="chat-tabs">
-      <div class="chat-tab active" data-tab="chat">💬 Chat</div>
-      <div class="chat-tab" data-tab="context">📋 Context</div>
-      <div class="chat-tab" data-tab="history">📜 History</div>
+  <div class="spacer"></div>
+  <a href="https://quickgrid.github.io/" target="_blank" style="font-size:11px;color:var(--muted);text-decoration:none;transition:color .2s" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--muted)'">Made by Asif Ahmed</a>
+</header>
+
+<!-- Main Layout -->
+<main>
+  <!-- Left: Node Flow Editor -->
+  <aside id="nodePanel">
+    <div style="font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:14px;width:100%;text-align:center">Pipeline Flow</div>
+    <div class="node-col" id="nodeFlow"></div>
+  </aside>
+
+  <!-- Center: Chat + Context -->
+  <section id="centerPanel">
+    <div id="contextViz"></div>
+    <div id="chatArea"><div class="empty-state"><i class="fas fa-comments"></i>Load models and start chatting</div></div>
+    <div id="chatInput">
+      <textarea id="chatText" placeholder="Ask a question..." rows="1"></textarea>
+      <button id="sendBtn" disabled><i class="fas fa-paper-plane"></i></button>
     </div>
-    <div class="chat-messages" id="chatMessages">
-      <div class="message message-system">
-        🤖 RAG Visualizer loaded. Models: all-MiniLM-L6-v2 (embed), ms-marco-MiniLM-L-6-v2 (rerank), Qwen2.5-0.5B (generate)
-      </div>
+  </section>
+
+  <!-- Right: Vector DB -->
+  <section id="vectorPanel">
+    <div class="vp-toolbar">
+      <input type="text" class="vp-search" id="tableSearch" placeholder="Search entries...">
+      <button class="vp-btn accent" id="addEntryBtn"><i class="fas fa-plus"></i> Add Entry</button>
+      <button class="vp-btn on" id="toggleVdbBtn"><i class="fas fa-database"></i> VDB: ON</button>
     </div>
-    <div class="chat-input-area">
-      <div class="chat-input-wrapper">
-        <textarea class="chat-input" id="chatInput" placeholder="Ask a question..." rows="1" onkeydown="handleChatKey(event)"></textarea>
-        <button class="send-btn" id="sendBtn" onclick="sendMessage()">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
-        </button>
+    <div id="addForm">
+      <label>Text Content</label>
+      <textarea id="newText" rows="3" placeholder="Enter text to embed and store..."></textarea>
+      <label>Metadata (JSON)</label>
+      <textarea id="newMeta" rows="2" placeholder='{"source": "doc1", "page": 1}'></textarea>
+      <div style="display:flex;gap:8px;margin-top:8px">
+        <button class="vp-btn accent" id="submitEntryBtn" style="flex:1;justify-content:center;height:34px"><i class="fas fa-check"></i> Store Entry</button>
+        <button class="vp-btn" id="cancelEntryBtn" style="height:34px"><i class="fas fa-times"></i></button>
       </div>
     </div>
-  </div>
-
-  <div class="right-panel">
-    <div class="stats-bar" id="statsBar">
-      <div class="stat-item">
-        <span class="stat-value" id="statEntries">0</span>
-        <span class="stat-label">Entries</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-value" id="statTopK">3</span>
-        <span class="stat-label">Top-K</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-value" id="statEmbedDim">384</span>
-        <span class="stat-label">Embed Dims</span>
-      </div>
-      <div class="stat-item">
-        <span class="stat-value" id="statLatency">0ms</span>
-        <span class="stat-label">Latency</span>
-      </div>
-    </div>
-
-    <div class="right-tabs">
-      <div class="right-tab active" data-tab="vectors">🗄️ Vector DB</div>
-      <div class="right-tab" data-tab="add">➕ Add Entry</div>
-      <div class="right-tab" data-tab="rerank">🔄 Reranking</div>
-      <div class="right-tab" data-tab="nodes">🔗 Node Editor</div>
-    </div>
-
-    <div class="right-content">
-      <!-- Vector DB Tab -->
-      <div class="tab-panel active" id="panel-vectors">
-        <div class="section-title">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
-          Vector Database (LanceDB-style)
-        </div>
-        <div class="vector-table-container">
-          <table class="vector-table" id="vectorTable">
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>ID</th>
-                <th>Content</th>
-                <th>Vector Preview</th>
-                <th>Score</th>
-                <th>Date</th>
-                <th>Metadata</th>
-              </tr>
-            </thead>
-            <tbody id="vectorTableBody">
-            </tbody>
-          </table>
-        </div>
-        <div class="empty-state" id="emptyVectors">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
-          <p>No entries yet. Add entries to get started!</p>
-        </div>
-      </div>
-
-      <!-- Add Entry Tab -->
-      <div class="tab-panel" id="panel-add">
-        <div class="section-title">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-          Add Entry to Vector DB
-        </div>
-        <div class="add-entry-form">
-          <div class="form-group">
-            <label class="form-label">Content / Text</label>
-            <textarea class="form-textarea" id="addContent" placeholder="Enter the text content to embed and store..."></textarea>
-          </div>
-          <div class="form-row">
-            <div class="form-group">
-              <label class="form-label">Source</label>
-              <input class="form-input" id="addSource" placeholder="e.g., document.pdf, article.md">
-            </div>
-            <div class="form-group">
-              <label class="form-label">Category</label>
-              <select class="form-select" id="addCategory">
-                <option value="general">General</option>
-                <option value="technical">Technical</option>
-                <option value="faq">FAQ</option>
-                <option value="documentation">Documentation</option>
-              </select>
-            </div>
-          </div>
-          <div class="form-group">
-            <label class="form-label">Custom Metadata (JSON, optional)</label>
-            <textarea class="form-textarea" id="addMetadata" placeholder='{"author": "John", "version": "1.0"}' style="min-height:50px"></textarea>
-          </div>
-          <button class="btn btn-primary" onclick="addEntry()" id="addEntryBtn">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-            Embed & Store in Vector DB
-          </button>
-          <div class="progress-bar" id="addProgress" style="display:none">
-            <div class="progress-fill" id="addProgressFill" style="width:0%"></div>
-          </div>
-        </div>
-
-        <div class="section-title" style="margin-top:20px">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-          Quick Add Samples
-        </div>
-        <div style="display:flex;flex-wrap:wrap;gap:8px">
-          <button class="btn btn-sm" onclick="addSample(0)">🤖 AI/ML</button>
-          <button class="btn btn-sm" onclick="addSample(1)">🔧 RAG Pipeline</button>
-          <button class="btn btn-sm" onclick="addSample(2)">📊 Vector Search</button>
-          <button class="btn btn-sm" onclick="addSample(3)">🧠 Neural Networks</button>
-          <button class="btn btn-sm" onclick="addSample(4)">💻 Web Development</button>
-          <button class="btn btn-sm" onclick="addSample(5)"> Security</button>
-        </div>
-      </div>
-
-      <!-- Reranking Tab -->
-      <div class="tab-panel" id="panel-rerank">
-        <div class="section-title">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
-          Reranking Results (Cross-Encoder)
-          <span style="font-size:11px;color:var(--text-muted);font-weight:400">Model: ms-marco-MiniLM-L-6-v2</span>
-        </div>
-        <div id="rerankResults">
-          <div class="empty-state">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
-            <p>Send a query to see reranking results</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- Node Editor Tab -->
-      <div class="tab-panel" id="panel-nodes">
-        <div class="node-editor-container" id="nodeEditor">
-          <div class="node-canvas" id="nodeCanvas">
-            <svg id="connectionSvg"></svg>
-          </div>
-          <div class="editor-controls">
-            <button class="btn" onclick="resetNodePositions()" title="Reset Layout">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
-            </button>
-            <button class="btn" onclick="runPipeline()" title="Run Pipeline">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
-            </button>
-          </div>
-        </div>
-      </div>
+    <div id="tableWrap">
+      <table id="vectorTable">
+        <thead><tr>
+          <th data-col="id">ID <span class="sort-icon"><i class="fas fa-sort"></i></span></th>
+          <th data-col="text">Text <span class="sort-icon"><i class="fas fa-sort"></i></span></th>
+          <th data-col="metadata">Metadata <span class="sort-icon"><i class="fas fa-sort"></i></span></th>
+          <th data-col="vector">Vector <span class="sort-icon"><i class="fas fa-sort"></i></span></th>
+          <th data-col="date">Date <span class="sort-icon"><i class="fas fa-sort"></i></span></th>
+          <th style="width:30px"></th>
+        </tr></thead>
+        <tbody id="tableBody"></tbody>
+      </table>
     </div>
+  </section>
+</main>
+
+<!-- Settings Sidebar -->
+<div id="settingsOverlay"></div>
+<aside id="settingsSidebar">
+  <div class="ss-header">
+    <h3 id="ssTitle">Node Settings</h3>
+    <button class="ss-close" id="ssClose"><i class="fas fa-times"></i></button>
+  </div>
+  <div class="ss-body" id="ssBody"></div>
+</aside>
+
+<!-- Entry Detail Modal -->
+<div class="modal-overlay" id="entryModal">
+  <div class="modal">
+    <div class="modal-head"><h3 id="modalTitle">Entry Detail</h3><button class="ss-close" id="modalClose"><i class="fas fa-times"></i></button></div>
+    <div class="modal-body" id="modalBody"></div>
+    <div class="modal-foot" id="modalFoot"></div>
   </div>
 </div>
 
-<script type="module">
-import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0/dist/transformers.js';
-
-// Add these lines to prevent the "fs" error in the browser
-env.allowLocalModels = false;
-env.useBrowserCache = true;
-
-// ==================== GLOBAL STATE ====================
-window.ragState = {
-  embeddingModel: null,
-  rerankerModel: null,
-  generationModel: null,
-  vectorDB: [],
-  chatHistory: [],
-  topK: 3,
-  isReady: false,
-  isProcessing: false,
-  nodePositions: {},
-  currentContext: []
-};
+<!-- Toast -->
+<div id="toast"></div>
 
-// ==================== CONFIG ====================
-const CONFIG = {
-  embedModel: 'Xenova/all-MiniLM-L6-v2',
-  rerankModel: 'Xenova/ms-marco-MiniLM-L-6-v2',
-  genModel: 'onnx-community/Qwen2.5-0.5B-Instruct',
-  embedDim: 384,
-  topK: 3,
-  similarityThreshold: 0.1
+<script type="module">
+// =============================================
+// State
+// =============================================
+const STATE = {
+  models: { llm: null, embedder: null, reranker: null },
+  modelIds: {
+    llm: 'onnx-community/Qwen2.5-0.5B-Instruct-q4',
+    embedder: 'Xenova/all-MiniLM-L6-v2',
+    reranker: 'Xenova/bge-reranker-base'
+  },
+  modelLoading: { llm: false, embedder: false, reranker: false },
+  entries: [],
+  nextId: 1,
+  chatMessages: [],
+  topKResults: [],
+  rerankedResults: [],
+  activeNode: null,
+  isVDBEnabled: true,
+  sortCol: 'id',
+  sortDir: 'desc',
+  searchQuery: '',
+  settings: { topK: 5, similarityThreshold: 0.3, maxTokens: 256, temperature: 0.6, rerankTopK: 3 },
+  downloadProgress: { files: [], totalProgress: 0, active: false },
+  isProcessing: false
 };
 
-// ==================== SAMPLE DATA ====================
-const SAMPLES = [
-  { content: "Retrieval-Augmented Generation (RAG) is an AI framework that combines retrieval of relevant documents with generative language models. It allows LLMs to access external knowledge bases to produce more accurate, up-to-date, and factually grounded responses. RAG reduces hallucination by grounding responses in retrieved context.", source: "rag_guide.md", category: "technical", metadata: { topic: "RAG", author: "AI Team" }},
-  { content: "Vector databases store data as high-dimensional vectors (embeddings) that capture semantic meaning. Popular vector DBs include LanceDB, ChromaDB, Qdrant, Milvus, and Pinecone. They enable efficient similarity search using algorithms like HNSW, IVF, or brute-force cosine similarity for nearest neighbor retrieval.", source: "vector_db_comparison.md", category: "documentation", metadata: { topic: "VectorDB", author: "Data Team" }},
-  { content: "Cross-encoder reranking improves retrieval accuracy by scoring query-document pairs directly. Unlike bi-encoders that compute query and document embeddings independently, cross-encoders process both together through a transformer, capturing fine-grained interactions. The ms-marco-MiniLM-L-6-v2 model is a lightweight yet effective reranker.", source: "reranking_guide.md", category: "technical", metadata: { topic: "Reranking", author: "ML Team" }},
-  { content: "Neural networks are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) organized in layers: input, hidden, and output. Deep learning uses networks with many hidden layers to learn hierarchical representations of data, enabling breakthroughs in image recognition, NLP, and game playing.", source: "neural_networks.md", category: "technical", metadata: { topic: "Deep Learning", author: "Research Team" }},
-  { content: "Modern web development involves frameworks like React, Vue, Angular, and Svelte for frontend, and Node.js, Python, Go, or Rust for backend. Static site generators (SSG) like Next.js, Astro, and Hugo enable fast, SEO-friendly websites. WebAssembly (WASM) allows running compiled languages in the browser for near-native performance.", source: "webdev_overview.md", category: "documentation", metadata: { topic: "WebDev", author: "Frontend Team" }},
-  { content: "Cybersecurity best practices include: implementing zero-trust architecture, using multi-factor authentication, regular security audits, encrypting data at rest and in transit, keeping software updated, conducting penetration testing, and following the principle of least privilege. OWASP Top 10 provides guidance on common web vulnerabilities.", source: "security_guide.md", category: "faq", metadata: { topic: "Security", author: "SecOps Team" }}
+// =============================================
+// Node definitions
+// =============================================
+const NODES = [
+  { id: 'input', label: 'Query Input', icon: 'fa-keyboard', color: 'var(--node-input)', desc: 'User question is received and prepared for embedding.' },
+  { id: 'embedding', label: 'Embedding', icon: 'fa-vector-square', color: 'var(--node-embed)', desc: 'Converts text into a high-dimensional vector using a transformer model.' },
+  { id: 'search', label: 'Vector Search', icon: 'fa-magnifying-glass', color: 'var(--node-search)', desc: 'Searches the vector database for the most similar entries using cosine similarity.' },
+  { id: 'rerank', label: 'Reranking', icon: 'fa-arrow-up-wide-short', color: 'var(--node-rerank)', desc: 'Re-scores and re-orders the top-k results using a cross-encoder or heuristic for better relevance.' },
+  { id: 'llm', label: 'LLM Generation', icon: 'fa-brain', color: 'var(--node-llm)', desc: 'Generates a response using the language model with retrieved context.' },
+  { id: 'output', label: 'Response', icon: 'fa-comment-dots', color: 'var(--node-output)', desc: 'Final answer is displayed in the chat window.' }
 ];
 
-// ==================== INITIALIZATION ====================
-async function init() {
-  updateStatus('loading', 'Loading embedding model...');
-  updateProgress(10);
-
-  try {
-    window.ragState.embeddingModel = await pipeline('feature-extraction', CONFIG.embedModel, {
-      dtype: 'fp32',
-      progress_callback: (p) => updateModelProgress(p, 'Embedding')
-    });
-    updateStatus('loading', 'Loading reranker model...');
-    updateProgress(40);
-
-    window.ragState.rerankerModel = await pipeline('text-classification', CONFIG.rerankModel, {
-      dtype: 'fp32',
-      progress_callback: (p) => updateModelProgress(p, 'Reranker')
-    });
-    updateStatus('loading', 'Loading Qwen2.5-0.5B generator...');
-    updateProgress(70);
-
-    window.ragState.generationModel = await pipeline('text-generation', CONFIG.genModel, {
-      dtype: 'q8',
-      progress_callback: (p) => updateModelProgress(p, 'Qwen2.5')
-    });
-    updateProgress(100);
-
-    window.ragState.isReady = true;
-    updateStatus('ready', 'All models loaded');
-    hideOverlay();
-    initNodeEditor();
-    loadFromStorage();
-    renderVectorTable();
-    addSystemMessage('✅ All models loaded successfully. Ready to chat!');
-  } catch (err) {
-    console.error('Model loading error:', err);
-    updateStatus('loading', 'Error: ' + err.message);
-    addSystemMessage(' Model loading failed: ' + err.message);
-    hideOverlay();
+// =============================================
+// Lightweight LanceDB-compatible Vector Store
+// =============================================
+class LanceDBTable {
+  constructor(name) { this.name = name; this.data = []; }
+  add(items) { this.data.push(...items); }
+  search(vector) {
+    return {
+      limit: (k) => ({
+        where: (fn) => {
+          let filtered = this.data.filter(fn);
+          return { toArray: () => this._rank(filtered, vector, k) };
+        },
+        toArray: () => this._rank(this.data, vector, k)
+      })
+    };
+  }
+  _rank(data, vector, k) {
+    const scored = data.map(item => ({
+      ...item,
+      _score: cosineSim(vector, item.vector)
+    }));
+    scored.sort((a, b) => b._score - a._score);
+    return scored.slice(0, k);
+  }
+  update(id, updates) {
+    const idx = this.data.findIndex(d => d.id === id);
+    if (idx >= 0) Object.assign(this.data[idx], updates, { date: new Date().toISOString() });
+  }
+  delete(id) { this.data = this.data.filter(d => d.id !== id); }
+  toList() { return [...this.data]; }
+  count() { return this.data.length; }
+}
+
+class LanceDB {
+  constructor() { this.tables = {}; }
+  async connect() { return this; }
+  async createTable(name, data) {
+    this.tables[name] = new LanceDBTable(name);
+    if (data && data.length) this.tables[name].add(data);
+    return this.tables[name];
+  }
+  async openTable(name) {
+    if (!this.tables[name]) this.tables[name] = new LanceDBTable(name);
+    return this.tables[name];
   }
 }
 
-// ==================== UI HELPERS ====================
-function updateStatus(state, text) {
-  const dot = document.getElementById('statusDot');
-  const txt = document.getElementById('statusText');
-  dot.className = 'status-dot ' + state;
-  txt.textContent = text;
-}
+const db = new LanceDB();
+let vTable = null;
 
-function updateProgress(pct) {
-  document.getElementById('modelProgressFill').style.width = pct + '%';
+function cosineSim(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]; }
+  const denom = Math.sqrt(na) * Math.sqrt(nb);
+  return denom === 0 ? 0 : dot / denom;
 }
 
-function updateModelProgress(progress, modelName) {
-  const status = document.getElementById('modelStatus');
-  const statusText = document.getElementById('statusText');
-  if (progress.status === 'progress') {
-    const pct = Math.round(progress.progress * 100);
-    status.textContent = `Loading ${modelName}: ${pct}%`;
-    statusText.textContent = `Loading ${modelName}... ${pct}%`;
+// =============================================
+// Transformers.js import (lazy)
+// =============================================
+let T = null;
+async function getTransformers() {
+  if (T) return T;
+  try {
+    T = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.4.0');
+  } catch {
+    T = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2');
+  }
+  T.env.allowLocalModels = false;
+  return T;
+}
+
+// =============================================
+// Download Progress Tracking
+// =============================================
+function handleProgress(progress) {
+  const dp = STATE.downloadProgress;
+  if (progress.status === 'initiate') {
+    dp.files.push({ file: progress.file, progress: 0, loaded: 0, total: 0, status: 'downloading' });
+    dp.active = true;
+    updateDlBtn();
+  } else if (progress.status === 'progress') {
+    const f = dp.files.find(f => f.file === progress.file);
+    if (f) { f.loaded = progress.loaded; f.total = progress.total; f.progress = progress.total ? (progress.loaded / progress.total) : 0; }
+    const totalP = dp.files.reduce((s, f) => s + f.progress, 0) / Math.max(dp.files.length, 1);
+    dp.totalProgress = totalP;
+    updateDlBtn();
+    updateDlPopup();
+  } else if (progress.status === 'done') {
+    const f = dp.files.find(f => f.file === progress.file);
+    if (f) { f.progress = 1; f.status = 'done'; }
+    const allDone = dp.files.every(f => f.status === 'done');
+    if (allDone) { dp.active = false; setTimeout(() => { dp.files = []; updateDlPopup(); }, 2000); }
+    updateDlBtn();
+    updateDlPopup();
   }
 }
 
-function hideOverlay() {
-  document.getElementById('modelOverlay').classList.add('hidden');
+function updateDlBtn() {
+  const btn = document.getElementById('dlBtn');
+  const circle = document.getElementById('dlProgress');
+  const p = STATE.downloadProgress.totalProgress;
+  const offset = 56.5 * (1 - p);
+  circle.style.strokeDashoffset = offset;
+  if (STATE.downloadProgress.active) btn.classList.add('downloading');
+  else btn.classList.remove('downloading');
 }
 
-function addSystemMessage(text) {
-  const container = document.getElementById('chatMessages');
-  const div = document.createElement('div');
-  div.className = 'message message-system';
-  div.textContent = text;
-  container.appendChild(div);
-  container.scrollTop = container.scrollHeight;
+function updateDlPopup() {
+  const container = document.getElementById('dlFiles');
+  const dp = STATE.downloadProgress;
+  if (!dp.files.length) {
+    container.innerHTML = '<div style="padding:8px;font-size:11px;color:var(--muted);text-align:center"><i class="fas fa-check" style="margin-right:4px"></i>No active downloads</div>';
+    return;
+  }
+  container.innerHTML = dp.files.map(f => {
+    const pct = Math.round(f.progress * 100);
+    const shortName = f.file.split('/').pop();
+    return `<div class="dl-file"><span>${shortName}</span><span class="pct">${pct}%</span></div><div class="dl-bar"><div class="dl-bar-fill" style="width:${pct}%"></div></div>`;
+  }).join('');
 }
 
-function addUserMessage(text) {
-  const container = document.getElementById('chatMessages');
-  const div = document.createElement('div');
-  div.className = 'message message-user';
-  div.textContent = text;
-  container.appendChild(div);
-  container.scrollTop = container.scrollHeight;
+// =============================================
+// Model Loading
+// =============================================
+async function loadModel(type, modelId) {
+  if (STATE.modelLoading[type]) return;
+  STATE.modelLoading[type] = true;
+  setNodeStatus(type === 'llm' ? 'llm' : type === 'embedder' ? 'embedding' : 'rerank', 'loading');
+  try {
+    const tf = await getTransformers();
+    if (type === 'llm') {
+      STATE.models.llm = await tf.pipeline('text-generation', modelId, { progress_callback: handleProgress, dtype: 'q4' });
+    } else if (type === 'embedder') {
+      STATE.models.embedder = await tf.pipeline('feature-extraction', modelId, { progress_callback: handleProgress });
+    } else if (type === 'reranker') {
+      try {
+        STATE.models.reranker = await tf.pipeline('text-classification', modelId, { progress_callback: handleProgress });
+      } catch {
+        STATE.models.reranker = 'heuristic';
+        toast('Reranker model unavailable, using heuristic fallback', 'info');
+      }
+    }
+    STATE.modelIds[type] = modelId;
+    setNodeStatus(type === 'llm' ? 'llm' : type === 'embedder' ? 'embedding' : 'rerank', 'active');
+    toast(`${type.charAt(0).toUpperCase() + type.slice(1)} model loaded: ${modelId}`, 'success');
+    updateSendBtn();
+  } catch (e) {
+    console.error(e);
+    setNodeStatus(type === 'llm' ? 'llm' : type === 'embedder' ? 'embedding' : 'rerank', 'error');
+    toast(`Failed to load ${type} model: ${e.message}`, 'error');
+  }
+  STATE.modelLoading[type] = false;
 }
 
-function addAIMessage(text) {
-  const container = document.getElementById('chatMessages');
-  const div = document.createElement('div');
-  div.className = 'message message-ai';
-  div.textContent = text;
-  container.appendChild(div);
-  container.scrollTop = container.scrollHeight;
+async function loadAllModels() {
+  await loadModel('embedder', STATE.modelIds.embedder);
+  await loadModel('llm', STATE.modelIds.llm);
+  await loadModel('reranker', STATE.modelIds.reranker);
+  document.getElementById('sendBtn').disabled = !STATE.models.llm;
 }
 
-function addContextMessage(contexts) {
-  const container = document.getElementById('chatMessages');
-  const div = document.createElement('div');
-  div.className = 'message message-context';
-  let html = '<div class="ctx-label">📋 Retrieved Context (Top-' + window.ragState.topK + ')</div>';
-  contexts.forEach((ctx, i) => {
-    html += `<div class="context-item"><strong>Source ${i+1}</strong> (score: ${ctx.score.toFixed(4)}): ${ctx.content.substring(0, 200)}...</div>`;
-  });
-  div.innerHTML = html;
-  container.appendChild(div);
-  container.scrollTop = container.scrollHeight;
+async function clearCache() {
+  try {
+    if (window.caches) { const keys = await caches.keys(); for (const k of keys) await caches.delete(k); }
+    const dbs = await indexedDB.databases ? await indexedDB.databases() : [];
+    for (const d of dbs) { if (d.name && (d.name.includes('transformers') || d.name.includes('huggingface'))) indexedDB.deleteDatabase(d.name); }
+    toast('Model cache cleared', 'success');
+  } catch { toast('Cache clear attempted', 'info'); }
 }
 
-function showTyping() {
-  const container = document.getElementById('chatMessages');
-  const div = document.createElement('div');
-  div.className = 'message message-ai typing-indicator';
-  div.id = 'typingIndicator';
-  div.innerHTML = '<div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div>';
-  container.appendChild(div);
-  container.scrollTop = container.scrollHeight;
+// =============================================
+// Embedding & Search
+// =============================================
+async function embedText(text) {
+  if (!STATE.models.embedder) throw new Error('Embedding model not loaded');
+  const output = await STATE.models.embedder(text, { pooling: 'mean', normalize: true });
+  return Array.from(output[0].data || output.data);
 }
 
-function hideTyping() {
-  const el = document.getElementById('typingIndicator');
-  if (el) el.remove();
+async function searchVectors(query, topK) {
+  const queryVec = await embedText(query);
+  if (!vTable) return [];
+  const results = await vTable.search(queryVec).limit(topK).toArray();
+  return results.map(r => ({ ...r, _score: r._score || 0 }));
 }
 
-// ==================== VECTOR OPERATIONS ====================
-function cosineSimilarity(a, b) {
-  let dot = 0, normA = 0, normB = 0;
-  for (let i = 0; i < a.length; i++) {
-    dot += a[i] * b[i];
-    normA += a[i] * a[i];
-    normB += b[i] * b[i];
+// =============================================
+// Reranking
+// =============================================
+async function rerankResults(query, results) {
+  if (!results.length) return [];
+  if (STATE.models.reranker === 'heuristic') {
+    return heuristicRerank(query, results);
   }
-  return dot / (Math.sqrt(normA) * Math.sqrt(normB) + 1e-10);
-}
-
-async function embedText(text) {
-  if (!window.ragState.embeddingModel) throw new Error('Embedding model not loaded');
-  const output = await window.ragState.embeddingModel(text, { pooling: 'mean', normalize: true });
-  return Array.from(output.data);
-}
-
-async function rerank(query, documents) {
-  if (!window.ragState.rerankerModel) throw new Error('Reranker not loaded');
-  const pairs = documents.map(doc => [query, doc.content]);
-  const results = await window.ragState.rerankerModel(pairs, { topk: 1 });
-
-  let scored = documents.map((doc, i) => {
-    const res = results[i];
-    const label = res.label || 'LABEL_1';
-    const score = label === 'LABEL_1' ? res.score : 1 - res.score;
-    return { ...doc, rerankScore: score };
+  if (STATE.models.reranker && typeof STATE.models.reranker === 'function') {
+    try {
+      const scored = [];
+      for (const r of results) {
+        const out = await STATE.models.reranker(`${query} [SEP] ${r.text}`, { top_k: 1 });
+        scored.push({ ...r, _rerankScore: out[0]?.score || 0 });
+      }
+      scored.sort((a, b) => b._rerankScore - a._rerankScore);
+      return scored;
+    } catch { return heuristicRerank(query, results); }
+  }
+  return heuristicRerank(query, results);
+}
+
+function heuristicRerank(query, results) {
+  const qTerms = query.toLowerCase().split(/\s+/).filter(t => t.length > 2);
+  const scored = results.map(r => {
+    const rTerms = r.text.toLowerCase().split(/\s+/);
+    let overlap = 0;
+    for (const qt of qTerms) { if (rTerms.some(rt => rt.includes(qt) || qt.includes(rt))) overlap++; }
+    const termScore = qTerms.length > 0 ? overlap / qTerms.length : 0;
+    const combinedScore = 0.6 * r._score + 0.4 * termScore;
+    return { ...r, _rerankScore: combinedScore };
   });
-
-  scored.sort((a, b) => b.rerankScore - a.rerankScore);
+  scored.sort((a, b) => b._rerankScore - a._rerankScore);
   return scored;
 }
 
-function vectorSearch(queryEmbedding, topK = 3) {
-  const db = window.ragState.vectorDB;
-  if (db.length === 0) return [];
-
-  const scored = db.map(entry => ({
-    ...entry,
-    score: cosineSimilarity(queryEmbedding, entry.vector)
-  }));
-
-  scored.sort((a, b) => b.score - a.score);
-  return scored.slice(0, topK);
-}
-
-// ==================== CHAT ====================
-async function sendMessage() {
-  const input = document.getElementById('chatInput');
-  const query = input.value.trim();
-  if (!query || window.ragState.isProcessing) return;
-
-  input.value = '';
-  addUserMessage(query);
-  window.ragState.isProcessing = true;
-
-  const startTime = performance.now();
-
+// =============================================
+// LLM Generation
+// =============================================
+function formatQwenPrompt(messages) {
+  let p = '';
+  for (const m of messages) {
+    p += `<|im_start|>${m.role}\n${m.content}<|im_end|>\n`;
+  }
+  p += '<|im_start|>assistant\n';
+  return p;
+}
+
+async function generateResponse(userMsg, context) {
+  if (!STATE.models.llm) throw new Error('LLM not loaded');
+  const sysMsg = context
+    ? `You are a helpful assistant. Answer the user's question using ONLY the following context. If the context doesn't contain the answer, say so clearly.\n\nContext:\n${context}`
+    : 'You are a helpful assistant. Answer the user\'s question using your own knowledge.';
+  const messages = [
+    { role: 'system', content: sysMsg },
+    { role: 'user', content: userMsg }
+  ];
+  // Try chat format first (v3), fall back to string prompt (v2)
   try {
-    // Step 1: Embed query
-    animateNode('input');
-    animateNode('embed');
-    const queryEmbedding = await embedText(query);
-
-    // Step 2: Vector search
-    animateNode('vectordb');
-    const topKResults = vectorSearch(queryEmbedding, window.ragState.topK);
-
-    // Highlight in table
-    highlightTableRows(topKResults.map(r => r.id));
-
-    // Step 3: Rerank
-    animateNode('rerank');
-    const rerankedResults = await rerank(query, topKResults);
-
-    // Update reranking panel
-    renderRerankResults(query, rerankedResults);
-
-    // Step 4: Build context
-    animateNode('context');
-    const contextTexts = rerankedResults.slice(0, window.ragState.topK).map(r => r.content);
-    const context = contextTexts.join('\n\n---\n\n');
-
-    window.ragState.currentContext = rerankedResults.slice(0, window.ragState.topK).map(r => ({
-      content: r.content,
-      score: r.score,
-      source: r.source
-    }));
-
-    addContextMessage(window.ragState.currentContext);
-
-    // Step 5: Generate response
-    animateNode('llm');
-    showTyping();
-
-    const systemPrompt = `You are a helpful AI assistant using RAG (Retrieval-Augmented Generation). Answer based on the provided context. If the context doesn't contain relevant information, say so. Be concise and accurate.\n\nContext:\n${context}`;
-
-    const response = await window.ragState.generationModel(query, {
-      max_new_tokens: 512,
-      temperature: 0.7,
-      do_sample: true,
-      top_p: 0.9,
-      chat_template: true
+    const result = await STATE.models.llm(messages, {
+      max_new_tokens: STATE.settings.maxTokens,
+      temperature: STATE.settings.temperature,
+      do_sample: false,
+      return_full_text: false
     });
-
-    hideTyping();
-    animateNode('output');
-
-    const answerText = response[0].generated_text;
-    // Clean up the response
-    const cleanAnswer = answerText.replace(/^.*?(?=Answer|Based|According|The|This|Here|I)/s, '').trim();
-    addAIMessage(cleanAnswer || answerText);
-
-    // Update latency
-    const latency = Math.round(performance.now() - startTime);
-    document.getElementById('statLatency').textContent = latency + 'ms';
-
-    // Deactivate nodes
-    setTimeout(() => {
-      clearNodeAnimations();
-    }, 1000);
-
-  } catch (err) {
-    console.error('Chat error:', err);
-    hideTyping();
-    addSystemMessage('❌ Error: ' + err.message);
+    const text = result[0]?.generated_text || '';
+    return text.replace(/<\|im_end\|>/g, '').trim();
+  } catch {
+    const prompt = formatQwenPrompt(messages);
+    const result = await STATE.models.llm(prompt, {
+      max_new_tokens: STATE.settings.maxTokens,
+      temperature: STATE.settings.temperature,
+      do_sample: false,
+      return_full_text: false
+    });
+    const text = result[0]?.generated_text || '';
+    return text.replace(/<\|im_end\|>/g, '').trim();
   }
-
-  window.ragState.isProcessing = false;
-  document.getElementById('sendBtn').disabled = false;
 }
 
-function handleChatKey(e) {
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault();
-    sendMessage();
-  }
-}
+// =============================================
+// RAG Pipeline
+// =============================================
+async function runRAG(query) {
+  if (STATE.isProcessing) return;
+  STATE.isProcessing = true;
+  document.getElementById('sendBtn').disabled = true;
 
-// ==================== ADD ENTRY ====================
-async function addEntry() {
-  const content = document.getElementById('addContent').value.trim();
-  const source = document.getElementById('addSource').value.trim() || 'manual';
-  const category = document.getElementById('addCategory').value;
-  const metadataStr = document.getElementById('addMetadata').value.trim();
-
-  if (!content) {
-    alert('Please enter content');
-    return;
-  }
-
-  const btn = document.getElementById('addEntryBtn');
-  btn.disabled = true;
-  const progressBar = document.getElementById('addProgress');
-  const progressFill = document.getElementById('addProgressFill');
-  progressBar.style.display = 'block';
-  progressFill.style.width = '20%';
+  // Add user message
+  addChatMsg('user', query);
 
   try {
-    progressFill.style.width = '40%';
-    const vector = await embedText(content);
-    progressFill.style.width = '70%';
-
-    let metadata = {};
-    if (metadataStr) {
-      try { metadata = JSON.parse(metadataStr); } catch(e) { metadata = { raw: metadataStr }; }
+    // Step 1: Input
+    setNodeActive('input');
+    await delay(300);
+    setNodeDone('input');
+
+    // Step 2: Embedding
+    setNodeActive('embedding');
+    const queryVec = await embedText(query);
+    setNodeDone('embedding');
+
+    // Step 3: Vector Search (if VDB enabled and has data)
+    let searchResults = [];
+    if (STATE.isVDBEnabled && vTable && vTable.count() > 0) {
+      setNodeActive('search');
+      searchResults = await vTable.search(queryVec).limit(STATE.settings.topK).toArray();
+      searchResults = searchResults.filter(r => r._score >= STATE.settings.similarityThreshold);
+      setNodeDone('search');
+      highlightTableRows(searchResults.map(r => r.id));
+    } else {
+      setNodeStatus('search', STATE.isVDBEnabled ? 'idle' : 'idle');
     }
 
-    const entry = {
-      id: 'entry_' + Date.now() + '_' + Math.random().toString(36).substr(2, 5),
-      content: content,
-      vector: vector,
-      score: null,
-      rerankScore: null,
-      date: new Date().toISOString(),
-      source: source,
-      category: category,
-      meta: metadata
-    };
-
-    window.ragState.vectorDB.push(entry);
-    progressFill.style.width = '100%';
-
-    setTimeout(() => {
-      progressBar.style.display = 'none';
-      progressFill.style.width = '0%';
-    }, 500);
-
-    renderVectorTable();
-    saveToStorage();
-    updateStats();
+    STATE.topKResults = searchResults;
+    renderContextViz(searchResults, null);
+
+    // Step 4: Reranking
+    let reranked = [];
+    if (searchResults.length > 0) {
+      setNodeActive('rerank');
+      reranked = await rerankResults(query, searchResults);
+      setNodeDone('rerank');
+      STATE.rerankedResults = reranked;
+      renderContextViz(searchResults, reranked);
+      showRerankAnimation(searchResults, reranked);
+    } else {
+      setNodeStatus('rerank', 'idle');
+      STATE.rerankedResults = [];
+    }
 
-    // Clear form
-    document.getElementById('addContent').value = '';
-    document.getElementById('addSource').value = '';
-    document.getElementById('addMetadata').value = '';
+    // Step 5: LLM
+    setNodeActive('llm');
+    const contextText = reranked.length > 0
+      ? reranked.map((r, i) => `[${i + 1}] ${r.text}`).join('\n\n')
+      : null;
+    const response = await generateResponse(query, contextText);
+    setNodeDone('llm');
+
+    // Step 6: Output
+    setNodeActive('output');
+    addChatMsg('assistant', response);
+    await delay(200);
+    setNodeDone('output');
+
+    if (!STATE.isVDBEnabled || searchResults.length === 0) {
+      addChatMsg('system', STATE.isVDBEnabled ? 'No relevant context found in vector DB — answered from model knowledge' : 'Vector DB is OFF — answered from model knowledge');
+    }
 
-    addSystemMessage('✅ Entry added to Vector DB: ' + content.substring(0, 50) + '...');
-  } catch (err) {
-    console.error('Add entry error:', err);
-    addSystemMessage(' Failed to add entry: ' + err.message);
-    progressBar.style.display = 'none';
+  } catch (e) {
+    console.error(e);
+    addChatMsg('system', `Error: ${e.message}`);
+    NODES.forEach(n => setNodeStatus(n.id, 'error'));
   }
 
-  btn.disabled = false;
+  STATE.isProcessing = false;
+  updateSendBtn();
+  // Reset nodes after a delay
+  setTimeout(() => NODES.forEach(n => {
+    if (n.id !== 'embedding' && n.id !== 'llm') setNodeStatus(n.id, STATE.models[n.id === 'embedding' ? 'embedder' : n.id === 'llm' ? 'llm' : 'reranker'] ? 'active' : 'idle');
+    else setNodeStatus(n.id, STATE.models[n.id === 'embedding' ? 'embedder' : 'llm'] ? 'active' : 'idle');
+  }), 2000);
 }
 
-function addSample(idx) {
-  const sample = SAMPLES[idx];
-  document.getElementById('addContent').value = sample.content;
-  document.getElementById('addSource').value = sample.source;
-  document.getElementById('addCategory').value = sample.category;
-  document.getElementById('addMetadata').value = JSON.stringify(sample.metadata);
+function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
 
-  // Auto-add
-  setTimeout(() => addEntry(), 100);
+// =============================================
+// Chat UI
+// =============================================
+function addChatMsg(role, text) {
+  STATE.chatMessages.push({ role, text, time: new Date() });
+  renderChat();
 }
 
-// ==================== RENDERING ====================
-function renderVectorTable() {
-  const tbody = document.getElementById('vectorTableBody');
-  const emptyState = document.getElementById('emptyVectors');
-  const db = window.ragState.vectorDB;
+function renderChat() {
+  const area = document.getElementById('chatArea');
+  if (!STATE.chatMessages.length) {
+    area.innerHTML = '<div class="empty-state"><i class="fas fa-comments"></i>Load models and start chatting</div>';
+    return;
+  }
+  area.innerHTML = STATE.chatMessages.map(m => {
+    if (m.role === 'system') return `<div class="chat-msg system">${escHtml(m.text)}</div>`;
+    const content = formatMsgText(m.text);
+    return `<div class="chat-msg ${m.role}">${content}</div>`;
+  }).join('');
+  area.scrollTop = area.scrollHeight;
+}
+
+function formatMsgText(text) {
+  return escHtml(text).replace(/\n/g, '<br>').replace(/`([^`]+)`/g, '<code style="background:var(--bg);padding:1px 5px;border-radius:3px;font-size:11px">$1</code>');
+}
+
+function escHtml(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+// =============================================
+// Context Visualization
+// =============================================
+function renderContextViz(searchResults, reranked) {
+  const el = document.getElementById('contextViz');
+  if (!searchResults || !searchResults.length) { el.classList.remove('show'); return; }
+  el.classList.add('show');
+  let html = '<div class="ctx-title"><i class="fas fa-layer-group" style="margin-right:6px"></i>Retrieved Context</div>';
+  const items = reranked || searchResults;
+  items.forEach((r, i) => {
+    const score = r._rerankScore !== undefined ? r._rerankScore : r._score;
+    const origScore = r._score;
+    const cls = score > 0.7 ? 'high' : score > 0.4 ? 'med' : 'low';
+    let rerankInfo = '';
+    if (reranked && r._rerankScore !== undefined) {
+      const diff = r._rerankScore - r._score;
+      const arrow = diff >= 0 ? '<i class="fas fa-arrow-up arrow"></i>' : '<i class="fas fa-arrow-down arrow"></i>';
+      rerankInfo = `<div class="ctx-rerank">${arrow} <span class="mono">${origScore.toFixed(3)}</span> → <span class="new-score mono">${r._rerankScore.toFixed(3)}</span></div>`;
+    }
+    html += `<div class="ctx-item"><span class="score ${cls} mono">${score.toFixed(3)}</span><div class="text">${escHtml(r.text)}</div>${rerankInfo}</div>`;
+  });
+  el.innerHTML = html;
+}
+
+// =============================================
+// Table
+// =============================================
+function renderTable() {
+  const tbody = document.getElementById('tableBody');
+  let data = [...STATE.entries];
+
+  // Filter
+  if (STATE.searchQuery) {
+    const q = STATE.searchQuery.toLowerCase();
+    data = data.filter(e =>
+      e.text.toLowerCase().includes(q) ||
+      JSON.stringify(e.metadata).toLowerCase().includes(q) ||
+      String(e.id).includes(q) ||
+      e.date.includes(q)
+    );
+  }
+
+  // Sort
+  data.sort((a, b) => {
+    let va = a[STATE.sortCol], vb = b[STATE.sortCol];
+    if (STATE.sortCol === 'id') { va = Number(va); vb = Number(vb); }
+    if (typeof va === 'string') va = va.toLowerCase();
+    if (typeof vb === 'string') vb = vb.toLowerCase();
+    if (va < vb) return STATE.sortDir === 'asc' ? -1 : 1;
+    if (va > vb) return STATE.sortDir === 'asc' ? 1 : -1;
+    return 0;
+  });
 
-  if (db.length === 0) {
-    tbody.innerHTML = '';
-    emptyState.style.display = 'flex';
-    document.querySelector('.vector-table-container').style.display = 'none';
+  if (!data.length) {
+    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center;padding:40px;color:var(--muted)"><i class="fas fa-database" style="font-size:24px;display:block;margin-bottom:8px;opacity:.3"></i>No entries yet. Click "Add Entry" to start.</td></tr>`;
     return;
   }
 
-  emptyState.style.display = 'none';
-  document.querySelector('.vector-table-container').style.display = 'block';
-
-  tbody.innerHTML = db.map((entry, i) => {
-    const vecPreview = entry.vector ? entry.vector.slice(0, 8).map(v => v.toFixed(3)).join(', ') + '...' : '-';
-    const date = new Date(entry.date).toLocaleString();
-    const meta = entry.metadata ? Object.keys(entry.metadata).slice(0, 2).map(k => k + ':' + entry.metadata[k]).join(', ') : '-';
-
-    return `<tr id="row_${entry.id}" data-id="${entry.id}">
-      <td style="color:var(--text-muted)">${i + 1}</td>
-      <td style="font-family:monospace;font-size:11px;color:var(--accent-blue)">${entry.id.substring(0, 16)}...</td>
-      <td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${entry.content.substring(0, 80)}...</td>
-      <td class="vector-preview">[${vecPreview}]</td>
-      <td>${entry.score !== null ? '<span class="score-badge">' + entry.score.toFixed(4) + '</span>' : '-'}</td>
-      <td style="font-size:11px;color:var(--text-muted)">${date}</td>
-      <td style="font-size:11px;color:var(--text-muted)">${meta}</td>
+  tbody.innerHTML = data.map(e => {
+    const vecStr = e.vector ? `[${e.vector.slice(0, 3).map(v => v.toFixed(2)).join(', ')}, ...]` : 'N/A';
+    const metaStr = e.metadata ? JSON.stringify(e.metadata).slice(0, 30) + '...' : '{}';
+    const dateStr = e.date ? new Date(e.date).toLocaleString() : '';
+    return `<tr data-id="${e.id}">
+      <td class="mono" style="color:var(--muted);width:40px">${e.id}</td>
+      <td title="${escHtml(e.text)}">${escHtml(e.text.slice(0, 60))}${e.text.length > 60 ? '...' : ''}</td>
+      <td class="meta-preview" title="${escHtml(JSON.stringify(e.metadata))}">${escHtml(metaStr)}</td>
+      <td class="vec-preview mono">${vecStr}</td>
+      <td style="color:var(--muted);font-size:10px;white-space:nowrap">${dateStr}</td>
+      <td><button class="del-btn" data-del="${e.id}" title="Delete"><i class="fas fa-trash"></i></button></td>
     </tr>`;
   }).join('');
+
+  // Update sort indicators
+  document.querySelectorAll('#vectorTable th').forEach(th => {
+    th.classList.remove('sorted');
+    const icon = th.querySelector('.sort-icon i');
+    if (icon) icon.className = 'fas fa-sort';
+    if (th.dataset.col === STATE.sortCol) {
+      th.classList.add('sorted');
+      if (icon) icon.className = STATE.sortDir === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down';
+    }
+  });
 }
 
 function highlightTableRows(ids) {
-  // Remove previous highlights
-  document.querySelectorAll('.vector-table tr').forEach(tr => {
-    tr.classList.remove('highlighted', 'selected');
+  document.querySelectorAll('#vectorTable tbody tr').forEach(tr => {
+    tr.classList.remove('highlight', 'rerank-up', 'rerank-down');
+    const id = Number(tr.dataset.id);
+    if (ids.includes(id)) {
+      tr.classList.add('highlight');
+      tr.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
   });
+}
 
-  ids.forEach((id, i) => {
-    const row = document.getElementById('row_' + id);
-    if (row) {
-      setTimeout(() => {
-        row.classList.add('highlighted');
-        setTimeout(() => {
-          row.classList.add('selected');
-        }, 500);
-      }, i * 200);
+function showRerankAnimation(original, reranked) {
+  const origOrder = original.map(r => r.id);
+  const newOrder = reranked.map(r => r.id);
+  document.querySelectorAll('#vectorTable tbody tr').forEach(tr => {
+    const id = Number(tr.dataset.id);
+    const origIdx = origOrder.indexOf(id);
+    const newIdx = newOrder.indexOf(id);
+    if (origIdx >= 0 && newIdx >= 0 && origIdx !== newIdx) {
+      tr.classList.remove('highlight');
+      tr.classList.add(newIdx < origIdx ? 'rerank-up' : 'rerank-down');
     }
   });
 }
 
-function renderRerankResults(query, results) {
-  const container = document.getElementById('rerankResults');
-
-  if (results.length === 0) {
-    container.innerHTML = '<div class="empty-state"><p>No results to rerank</p></div>';
-    return;
+// =============================================
+// Entry CRUD
+// =============================================
+async function addEntry(text, metadata) {
+  if (!STATE.models.embedder) { toast('Load embedding model first', 'error'); return; }
+  const vector = await embedText(text);
+  const entry = { id: STATE.nextId++, text, metadata: metadata || {}, vector, date: new Date().toISOString() };
+  STATE.entries.push(entry);
+  if (vTable) vTable.add([{ ...entry }]);
+  renderTable();
+  toast(`Entry #${entry.id} stored (${vector.length}d vector)`, 'success');
+  // Highlight new row
+  setTimeout(() => {
+    const tr = document.querySelector(`#vectorTable tr[data-id="${entry.id}"]`);
+    if (tr) { tr.classList.add('highlight'); tr.scrollIntoView({ behavior: 'smooth' }); }
+  }, 100);
+}
+
+async function updateEntry(id, newText, newMeta) {
+  const entry = STATE.entries.find(e => e.id === id);
+  if (!entry) return;
+  entry.text = newText;
+  entry.metadata = newMeta;
+  entry.date = new Date().toISOString();
+  if (STATE.models.embedder) {
+    entry.vector = await embedText(newText);
+    toast(`Entry #${id} updated with new vector`, 'success');
+  } else {
+    toast(`Entry #${id} updated (vector unchanged - embedder not loaded)`, 'info');
   }
+  // Update in vTable
+  if (vTable) { vTable.delete(id); vTable.add([{ ...entry }]); }
+  renderTable();
+}
+
+function deleteEntry(id) {
+  STATE.entries = STATE.entries.filter(e => e.id !== id);
+  if (vTable) vTable.delete(id);
+  renderTable();
+  toast(`Entry #${id} deleted`, 'info');
+}
+
+// =============================================
+// Entry Modal
+// =============================================
+function openEntryModal(id) {
+  const entry = STATE.entries.find(e => e.id === id);
+  if (!entry) return;
+  const modal = document.getElementById('entryModal');
+  document.getElementById('modalTitle').textContent = `Entry #${entry.id}`;
+  document.getElementById('modalBody').innerHTML = `
+    <div class="field">
+      <label>Text Content</label>
+      <textarea id="modalText" rows="5">${escHtml(entry.text)}</textarea>
+    </div>
+    <div class="field">
+      <label>Metadata (JSON)</label>
+      <textarea id="modalMeta" rows="3">${escHtml(JSON.stringify(entry.metadata, null, 2))}</textarea>
+    </div>
+    <div class="field">
+      <label>Vector Embedding (${entry.vector ? entry.vector.length : 0} dimensions)</label>
+      <div class="vec-display mono" id="modalVec">${entry.vector ? entry.vector.map(v => v.toFixed(6)).join(', ') : 'N/A'}</div>
+    </div>
+    <div class="field">
+      <label>Created / Updated</label>
+      <div style="font-size:12px;color:var(--muted)">${entry.date ? new Date(entry.date).toLocaleString() : 'N/A'}</div>
+    </div>
+  `;
+  document.getElementById('modalFoot').innerHTML = `
+    <button class="vp-btn" id="modalCopyVec"><i class="fas fa-copy"></i> Copy Vector</button>
+    <button class="vp-btn danger" id="modalDelete" style="border-color:var(--error);color:var(--error)"><i class="fas fa-trash"></i> Delete</button>
+    <button class="vp-btn" id="modalCancel">Cancel</button>
+    <button class="vp-btn accent" id="modalSave"><i class="fas fa-check"></i> Save Changes</button>
+  `;
+  modal.classList.add('show');
+
+  document.getElementById('modalCopyVec').onclick = () => {
+    if (entry.vector) {
+      navigator.clipboard.writeText(JSON.stringify(entry.vector));
+      toast('Vector copied to clipboard', 'success');
+    }
+  };
+  document.getElementById('modalDelete').onclick = () => {
+    deleteEntry(id);
+    modal.classList.remove('show');
+  };
+  document.getElementById('modalCancel').onclick = () => modal.classList.remove('show');
+  document.getElementById('modalSave').onclick = async () => {
+    const newText = document.getElementById('modalText').value.trim();
+    let newMeta = {};
+    try { newMeta = JSON.parse(document.getElementById('modalMeta').value); }
+    catch { toast('Invalid JSON in metadata', 'error'); return; }
+    if (!newText) { toast('Text cannot be empty', 'error'); return; }
+    await updateEntry(id, newText, newMeta);
+    modal.classList.remove('show');
+  };
+}
+
+// =============================================
+// Node Flow Editor
+// =============================================
+function renderNodeFlow() {
+  const container = document.getElementById('nodeFlow');
+  let html = '';
+  NODES.forEach((node, i) => {
+    const status = 'idle';
+    html += `<div class="node-box" data-node="${node.id}" id="node-${node.id}">
+      <div class="node-header" style="background:${node.color}22;color:${node.color}">
+        <i class="fas ${node.icon}"></i> ${node.label}
+      </div>
+      <div class="node-body">
+        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1">${node.desc.slice(0, 50)}...</span>
+        <div class="node-status idle" id="status-${node.id}"></div>
+      </div>
+    </div>`;
+    if (i < NODES.length - 1) {
+      html += `<div class="node-connector" id="conn-${node.id}"></div>`;
+    }
+  });
+  container.innerHTML = html;
 
-  container.innerHTML = '<div style="margin-bottom:12px;font-size:12px;color:var(--text-muted)">Query: <strong style="color:var(--text-primary)">' + query + '</strong></div>' +
-    results.map((r, i) => {
-      const rankClass = i === 0 ? 'rerank-1' : i === 1 ? 'rerank-2' : i === 2 ? 'rerank-3' : '';
-      const rankNum = i + 1;
-      return `<div class="rerank-card ${rankClass}">
-        <div class="rerank-card-header">
-          <span><span class="rank-badge rank-${rankNum <= 3 ? rankNum : 'other'}">${rankNum}</span> <span style="font-size:12px;color:var(--text-secondary)">Score: ${r.rerankScore !== undefined ? r.rerankScore.toFixed(4) : '-'}</span></span>
-          <span style="font-size:11px;color:var(--text-muted)">Original: ${(r.score || 0).toFixed(4)}</span>
-        </div>
-        <div class="rerank-content">${r.content}</div>
-        <div class="rerank-meta">
-          <span>📄 ${r.source || 'unknown'}</span>
-          <span>️ ${r.category || 'general'}</span>
-          <span>📅 ${new Date(r.date).toLocaleDateString()}</span>
-        </div>
-      </div>`;
-    }).join('');
+  // Click handlers
+  container.querySelectorAll('.node-box').forEach(el => {
+    el.addEventListener('click', () => openSettings(el.dataset.node));
+  });
 }
 
-function updateStats() {
-  document.getElementById('statEntries').textContent = window.ragState.vectorDB.length;
-  document.getElementById('statTopK').textContent = window.ragState.topK;
+function setNodeStatus(nodeId, status) {
+  const el = document.getElementById(`status-${nodeId}`);
+  if (!el) return;
+  el.className = `node-status ${status}`;
+  const box = document.getElementById(`node-${nodeId}`);
+  if (box) { box.classList.remove('active', 'processing', 'done'); if (status === 'active') box.classList.add('active'); }
 }
 
-// ==================== NODE EDITOR ====================
-const NODES = [
-  { id: 'input', label: 'Chat Input', icon: '', iconClass: 'node-icon-chat', x: 30, y: 150, desc: 'User query input', settings: { maxTokens: 512 }},
-  { id: 'embed', label: 'Embedding', icon: '🔮', iconClass: 'node-icon-embed', x: 280, y: 150, desc: 'all-MiniLM-L6-v2 (384d)', settings: { model: 'all-MiniLM-L6-v2', dims: 384, normalize: true }},
-  { id: 'vectordb', label: 'Vector DB', icon: '🗄️', iconClass: 'node-icon-vectordb', x: 530, y: 150, desc: 'LanceDB - Cosine Search', settings: { metric: 'cosine', topK: 3, index: 'flat' }},
-  { id: 'rerank', label: 'Reranker', icon: '🔄', iconClass: 'node-icon-rerank', x: 780, y: 150, desc: 'ms-marco-MiniLM-L-6-v2', settings: { model: 'ms-marco-MiniLM', topK: 3 }},
-  { id: 'llm', label: 'Qwen2.5-0.5B', icon: '🧠', iconClass: 'node-icon-llm', x: 1030, y: 150, desc: 'Text Generation', settings: { model: 'Qwen2.5-0.5B', maxTokens: 512, temp: 0.7, topP: 0.9 }},
-  { id: 'output', label: 'Response', icon: '✨', iconClass: 'node-icon-output', x: 1280, y: 150, desc: 'Generated answer with context', settings: { format: 'text' }}
-];
+function setNodeActive(nodeId) {
+  const box = document.getElementById(`node-${nodeId}`);
+  if (box) { box.classList.remove('done', 'active'); box.classList.add('processing'); }
+  const conn = document.getElementById(`conn-${nodeId}`);
+  if (conn) conn.classList.add('active');
+  setNodeStatus(nodeId, 'loading');
+}
 
-const CONNECTIONS = [
-  { from: 'input', to: 'embed' },
-  { from: 'embed', to: 'vectordb' },
-  { from: 'vectordb', to: 'rerank' },
-  { from: 'rerank', to: 'llm' },
-  { from: 'llm', to: 'output' }
-];
+function setNodeDone(nodeId) {
+  const box = document.getElementById(`node-${nodeId}`);
+  if (box) { box.classList.remove('processing'); box.classList.add('done'); }
+  setNodeStatus(nodeId, 'active');
+  setTimeout(() => { if (box) box.classList.remove('done'); }, 1500);
+}
 
-function initNodeEditor() {
-  const canvas = document.getElementById('nodeCanvas');
-
-  NODES.forEach(node => {
-    const el = document.createElement('div');
-    el.className = 'node';
-    el.id = 'node_' + node.id;
-    el.style.left = node.x + 'px';
-    el.style.top = node.y + 'px';
-    el.innerHTML = `
-      <div class="node-header">
-        <span class="node-icon ${node.iconClass}">${node.icon}</span>
-        <span>${node.label}</span>
-      </div>
-      <div class="node-body">${node.desc}</div>
-      <div class="node-settings">
-        ${renderNodeSettings(node)}
-      </div>
-      <div class="node-ports">
-        <div class="port input" data-node="${node.id}" data-type="input"></div>
-        <div class="port output" data-node="${node.id}" data-type="output"></div>
-      </div>
-    `;
-    canvas.appendChild(el);
+// =============================================
+// Settings Sidebar
+// =============================================
+function openSettings(nodeId) {
+  STATE.activeNode = nodeId;
+  const node = NODES.find(n => n.id === nodeId);
+  if (!node) return;
 
-    // Drag
-    makeDraggable(el, node);
-  });
+  document.getElementById('ssTitle').textContent = node.label + ' Settings';
+  const body = document.getElementById('ssBody');
+  let html = `<p style="font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.5">${node.desc}</p>`;
 
-  drawConnections();
-}
+  const modelType = nodeId === 'embedding' ? 'embedder' : nodeId === 'llm' ? 'llm' : nodeId === 'rerank' ? 'reranker' : null;
 
-function renderNodeSettings(node) {
-  let html = '';
-  for (const [key, val] of Object.entries(node.settings)) {
-    html += `<div class="node-setting">
-      <label>${key}</label>
-      <input value="${val}" data-node="${node.id}" data-key="${key}" onchange="updateNodeSetting('${node.id}','${key}',this.value)">
+  if (modelType) {
+    const currentId = STATE.modelIds[modelType];
+    const isLoaded = STATE.models[modelType] != null;
+    html += `<div class="ss-field">
+      <label>Model ID</label>
+      <input type="text" id="ssModelId" value="${currentId}" placeholder="e.g. Xenova/all-MiniLM-L6-v2">
+      <div class="hint">Enter a HuggingFace model ID compatible with transformers.js</div>
+    </div>
+    <button class="ss-load-btn" id="ssLoadBtn" ${STATE.modelLoading[modelType] ? 'disabled' : ''}>
+      <i class="fas ${STATE.modelLoading[modelType] ? 'fa-spinner fa-spin' : 'fa-download'}"></i>
+      ${isLoaded ? 'Reload Model' : 'Load Model'}
+    </button>
+    <div style="margin-top:8px;font-size:11px;color:${isLoaded ? 'var(--success)' : 'var(--muted)'}">
+      <i class="fas ${isLoaded ? 'fa-check-circle' : 'fa-circle-xmark'}"></i>
+      ${isLoaded ? 'Model loaded' : 'Model not loaded'}
     </div>`;
   }
-  return html;
-}
 
-function updateNodeSetting(nodeId, key, value) {
-  const node = NODES.find(n => n.id === nodeId);
-  if (node) {
-    node.settings[key] = isNaN(value) ? value : Number(value);
-    if (key === 'topK') {
-      window.ragState.topK = Number(value);
-      document.getElementById('statTopK').textContent = value;
-    }
+  // Node-specific settings
+  if (nodeId === 'search') {
+    html += `<div class="ss-field" style="margin-top:16px"><label>Top K Results</label><input type="number" id="ssTopK" value="${STATE.settings.topK}" min="1" max="50"></div>
+    <div class="ss-field"><label>Similarity Threshold</label><input type="number" id="ssThreshold" value="${STATE.settings.similarityThreshold}" min="0" max="1" step="0.05"></div>`;
+  }
+  if (nodeId === 'rerank') {
+    html += `<div class="ss-field" style="margin-top:16px"><label>Top K After Rerank</label><input type="number" id="ssRerankK" value="${STATE.settings.rerankTopK}" min="1" max="20"></div>`;
+  }
+  if (nodeId === 'llm') {
+    html += `<div class="ss-field" style="margin-top:16px"><label>Max Tokens</label><input type="number" id="ssMaxTokens" value="${STATE.settings.maxTokens}" min="16" max="2048"></div>
+    <div class="ss-field"><label>Temperature</label><input type="number" id="ssTemp" value="${STATE.settings.temperature}" min="0" max="2" step="0.1"></div>`;
+  }
+
+  body.innerHTML = html;
+  document.getElementById('settingsSidebar').classList.add('open');
+  document.getElementById('settingsOverlay').classList.add('open');
+
+  // Bind events
+  if (modelType) {
+    document.getElementById('ssLoadBtn').addEventListener('click', async () => {
+      const newId = document.getElementById('ssModelId').value.trim();
+      if (!newId) return;
+      await loadModel(modelType, newId);
+      openSettings(nodeId); // Refresh
+    });
+  }
+  if (nodeId === 'search') {
+    document.getElementById('ssTopK')?.addEventListener('change', e => { STATE.settings.topK = parseInt(e.target.value) || 5; });
+    document.getElementById('ssThreshold')?.addEventListener('change', e => { STATE.settings.similarityThreshold = parseFloat(e.target.value) || 0.3; });
+  }
+  if (nodeId === 'rerank') {
+    document.getElementById('ssRerankK')?.addEventListener('change', e => { STATE.settings.rerankTopK = parseInt(e.target.value) || 3; });
+  }
+  if (nodeId === 'llm') {
+    document.getElementById('ssMaxTokens')?.addEventListener('change', e => { STATE.settings.maxTokens = parseInt(e.target.value) || 256; });
+    document.getElementById('ssTemp')?.addEventListener('change', e => { STATE.settings.temperature = parseFloat(e.target.value) || 0.6; });
   }
 }
 
-function drawConnections() {
-  const svg = document.getElementById('connectionSvg');
-  svg.innerHTML = '';
+function closeSettings() {
+  document.getElementById('settingsSidebar').classList.remove('open');
+  document.getElementById('settingsOverlay').classList.remove('open');
+  STATE.activeNode = null;
+}
 
-  CONNECTIONS.forEach(conn => {
-    const fromEl = document.getElementById('node_' + conn.from);
-    const toEl = document.getElementById('node_' + conn.to);
-    if (!fromEl || !toEl) return;
+// =============================================
+// Toast
+// =============================================
+function toast(msg, type = 'info') {
+  const el = document.getElementById('toast');
+  el.className = `show ${type}`;
+  const icon = type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle';
+  const color = type === 'success' ? 'var(--success)' : type === 'error' ? 'var(--error)' : 'var(--info)';
+  el.innerHTML = `<i class="fas ${icon}" style="color:${color}"></i> ${msg}`;
+  clearTimeout(el._t);
+  el._t = setTimeout(() => el.classList.remove('show'), 3500);
+}
 
-    const fromRect = fromEl.getBoundingClientRect();
-    const toRect = toEl.getBoundingClientRect();
-    const canvasRect = document.getElementById('nodeCanvas').getBoundingClientRect();
+// =============================================
+// Utilities
+// =============================================
+function updateSendBtn() {
+  document.getElementById('sendBtn').disabled = !STATE.models.llm || STATE.isProcessing;
+}
 
-    const x1 = fromRect.right - canvasRect.left;
-    const y1 = fromRect.top + fromRect.height / 2 - canvasRect.top;
-    const x2 = toRect.left - canvasRect.left;
-    const y2 = toRect.top + toRect.height / 2 - canvasRect.top;
+// =============================================
+// Event Listeners
+// =============================================
+function initEvents() {
+  // Load all models
+  document.getElementById('loadAllBtn').addEventListener('click', loadAllModels);
 
-    const midX = (x1 + x2) / 2;
+  // Clear cache
+  document.getElementById('clearCacheBtn').addEventListener('click', clearCache);
 
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttribute('d', `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`);
-    path.setAttribute('class', 'connection');
-    path.setAttribute('id', 'conn_' + conn.from + '_' + conn.to);
-    svg.appendChild(path);
+  // Download button popup
+  document.getElementById('dlBtn').addEventListener('click', (e) => {
+    e.stopPropagation();
+    document.getElementById('dlPopup').classList.toggle('show');
+  });
+  document.addEventListener('click', () => document.getElementById('dlPopup').classList.remove('show'));
+
+  // Send message
+  document.getElementById('sendBtn').addEventListener('click', () => {
+    const text = document.getElementById('chatText').value.trim();
+    if (!text) return;
+    document.getElementById('chatText').value = '';
+    document.getElementById('chatText').style.height = '42px';
+    runRAG(text);
   });
-}
 
-function makeDraggable(el, node) {
-  let isDragging = false;
-  let startX, startY, startLeft, startTop;
-
-  el.addEventListener('mousedown', (e) => {
-    if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
-    isDragging = true;
-    startX = e.clientX;
-    startY = e.clientY;
-    startLeft = el.offsetLeft;
-    startTop = el.offsetTop;
-    el.style.zIndex = 10;
-    el.style.cursor = 'grabbing';
-    e.preventDefault();
+  // Enter to send
+  document.getElementById('chatText').addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); document.getElementById('sendBtn').click(); }
   });
 
-  document.addEventListener('mousemove', (e) => {
-    if (!isDragging) return;
-    const dx = e.clientX - startX;
-    const dy = e.clientY - startY;
-    el.style.left = (startLeft + dx) + 'px';
-    el.style.top = (startTop + dy) + 'px';
-    node.x = startLeft + dx;
-    node.y = startTop + dy;
-    drawConnections();
+  // Auto-resize textarea
+  document.getElementById('chatText').addEventListener('input', function() {
+    this.style.height = '42px';
+    this.style.height = Math.min(this.scrollHeight, 120) + 'px';
   });
 
-  document.addEventListener('mouseup', () => {
-    if (isDragging) {
-      isDragging = false;
-      el.style.cursor = 'grab';
-      el.style.zIndex = 5;
-    }
+  // Table search
+  document.getElementById('tableSearch').addEventListener('input', e => {
+    STATE.searchQuery = e.target.value;
+    renderTable();
   });
-}
 
-function animateNode(nodeId) {
-  const el = document.getElementById('node_' + nodeId);
-  if (el) {
-    el.classList.add('processing');
-    // Activate connections
-    CONNECTIONS.forEach(conn => {
-      if (conn.from === nodeId) {
-        const path = document.getElementById('conn_' + conn.from + '_' + conn.to);
-        if (path) path.classList.add('processing');
-      }
-      if (conn.to === nodeId) {
-        const path = document.getElementById('conn_' + conn.from + '_' + conn.to);
-        if (path) path.classList.add('processing');
-      }
+  // Table sort
+  document.querySelectorAll('#vectorTable th[data-col]').forEach(th => {
+    th.addEventListener('click', () => {
+      const col = th.dataset.col;
+      if (STATE.sortCol === col) STATE.sortDir = STATE.sortDir === 'asc' ? 'desc' : 'asc';
+      else { STATE.sortCol = col; STATE.sortDir = 'asc'; }
+      renderTable();
     });
-  }
-}
-
-function clearNodeAnimations() {
-  document.querySelectorAll('.node').forEach(n => {
-    n.classList.remove('processing', 'active');
-  });
-  document.querySelectorAll('.connection').forEach(c => {
-    c.classList.remove('processing', 'active');
   });
-}
 
-function resetNodePositions() {
-  const defaultPositions = [
-    { id: 'input', x: 30, y: 150 },
-    { id: 'embed', x: 280, y: 150 },
-    { id: 'vectordb', x: 530, y: 150 },
-    { id: 'rerank', x: 780, y: 150 },
-    { id: 'llm', x: 1030, y: 150 },
-    { id: 'output', x: 1280, y: 150 }
-  ];
-
-  defaultPositions.forEach(pos => {
-    const node = NODES.find(n => n.id === pos.id);
-    if (node) {
-      node.x = pos.x;
-      node.y = pos.y;
-      const el = document.getElementById('node_' + pos.id);
-      if (el) {
-        el.style.left = pos.x + 'px';
-        el.style.top = pos.y + 'px';
-      }
+  // Table row click (open modal)
+  document.getElementById('tableBody').addEventListener('click', e => {
+    const delBtn = e.target.closest('[data-del]');
+    if (delBtn) {
+      e.stopPropagation();
+      deleteEntry(Number(delBtn.dataset.del));
+      return;
     }
+    const tr = e.target.closest('tr[data-id]');
+    if (tr) openEntryModal(Number(tr.dataset.id));
   });
-  drawConnections();
-}
 
-function runPipeline() {
-  const input = document.getElementById('chatInput').value.trim();
-  if (!input) {
-    addSystemMessage('⚠️ Enter a query in the chat to run the pipeline');
-    return;
-  }
-  sendMessage();
-}
-
-// ==================== STORAGE ====================
-function saveToStorage() {
-  try {
-    const data = {
-      vectorDB: window.ragState.vectorDB.map(e => ({
-        ...e,
-        vector: e.vector ? Array.from(e.vector) : null
-      })),
-      chatHistory: window.ragState.chatHistory,
-      topK: window.ragState.topK
-    };
-    localStorage.setItem('rag_visualizer_db', JSON.stringify(data));
-  } catch (e) {
-    console.warn('Storage save failed:', e);
-  }
-}
-
-function loadFromStorage() {
-  try {
-    const data = localStorage.getItem('rag_visualizer_db');
-    if (data) {
-      const parsed = JSON.parse(data);
-      window.ragState.vectorDB = parsed.vectorDB || [];
-      window.ragState.chatHistory = parsed.chatHistory || [];
-      window.ragState.topK = parsed.topK || 3;
-      renderVectorTable();
-      updateStats();
+  // Add entry form
+  document.getElementById('addEntryBtn').addEventListener('click', () => {
+    const form = document.getElementById('addForm');
+    form.classList.toggle('show');
+    if (form.classList.contains('show')) document.getElementById('newText').focus();
+  });
+  document.getElementById('cancelEntryBtn').addEventListener('click', () => {
+    document.getElementById('addForm').classList.remove('show');
+    document.getElementById('newText').value = '';
+    document.getElementById('newMeta').value = '';
+  });
+  document.getElementById('submitEntryBtn').addEventListener('click', async () => {
+    const text = document.getElementById('newText').value.trim();
+    if (!text) { toast('Please enter text content', 'error'); return; }
+    let meta = {};
+    const metaStr = document.getElementById('newMeta').value.trim();
+    if (metaStr) {
+      try { meta = JSON.parse(metaStr); }
+      catch { toast('Invalid JSON in metadata field', 'error'); return; }
     }
-  } catch (e) {
-    console.warn('Storage load failed:', e);
-  }
-}
+    await addEntry(text, meta);
+    document.getElementById('newText').value = '';
+    document.getElementById('newMeta').value = '';
+    document.getElementById('addForm').classList.remove('show');
+  });
 
-function exportDB() {
-  const data = {
-    vectorDB: window.ragState.vectorDB.map(e => ({
-      ...e,
-      vector: e.vector ? Array.from(e.vector) : null
-    })),
-    chatHistory: window.ragState.chatHistory,
-    exportDate: new Date().toISOString()
-  };
-  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = 'rag_visualizer_export_' + Date.now() + '.json';
-  a.click();
-  URL.revokeObjectURL(url);
-  addSystemMessage('📦 Database exported');
-}
+  // VDB toggle
+  document.getElementById('toggleVdbBtn').addEventListener('click', () => {
+    STATE.isVDBEnabled = !STATE.isVDBEnabled;
+    const btn = document.getElementById('toggleVdbBtn');
+    btn.className = STATE.isVDBEnabled ? 'vp-btn on' : 'vp-btn off';
+    btn.innerHTML = `<i class="fas fa-database"></i> VDB: ${STATE.isVDBEnabled ? 'ON' : 'OFF'}`;
+    toast(`Vector DB ${STATE.isVDBEnabled ? 'enabled' : 'disabled'} — ${STATE.isVDBEnabled ? 'chat will use retrieved context' : 'chat will use model knowledge only'}`, 'info');
+  });
 
-function clearAll() {
-  if (confirm('Clear all data including vector DB and chat history?')) {
-    window.ragState.vectorDB = [];
-    window.ragState.chatHistory = [];
-    localStorage.removeItem('rag_visualizer_db');
-    renderVectorTable();
-    updateStats();
-    document.getElementById('chatMessages').innerHTML = '<div class="message message-system">🤖 RAG Visualizer reset. Models still loaded.</div>';
-    addSystemMessage('️ All data cleared');
-  }
-}
+  // Settings sidebar close
+  document.getElementById('ssClose').addEventListener('click', closeSettings);
+  document.getElementById('settingsOverlay').addEventListener('click', closeSettings);
 
-// ==================== TABS ====================
-document.querySelectorAll('.chat-tab').forEach(tab => {
-  tab.addEventListener('click', () => {
-    document.querySelectorAll('.chat-tab').forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
+  // Modal close
+  document.getElementById('modalClose').addEventListener('click', () => document.getElementById('entryModal').classList.remove('show'));
+  document.getElementById('entryModal').addEventListener('click', e => {
+    if (e.target === document.getElementById('entryModal')) document.getElementById('entryModal').classList.remove('show');
   });
-});
-
-document.querySelectorAll('.right-tab').forEach(tab => {
-  tab.addEventListener('click', () => {
-    document.querySelectorAll('.right-tab').forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
-    const panelId = 'panel-' + tab.dataset.tab;
-    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
-    document.getElementById(panelId).classList.add('active');
-
-    if (tab.dataset.tab === 'nodes') {
-      setTimeout(drawConnections, 100);
+
+  // Keyboard shortcuts
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') {
+      closeSettings();
+      document.getElementById('entryModal').classList.remove('show');
     }
   });
-});
-
-// ==================== RESIZE HANDLER ====================
-window.addEventListener('resize', () => {
-  drawConnections();
-});
+}
 
-// ==================== AUTO-RESIZE TEXTAREA ====================
-document.getElementById('chatInput').addEventListener('input', function() {
-  this.style.height = 'auto';
-  this.style.height = Math.min(this.scrollHeight, 120) + 'px';
-});
+// =============================================
+// Init
+// =============================================
+async function init() {
+  renderNodeFlow();
+  renderTable();
+  renderChat();
+  initEvents();
+  vTable = await db.openTable('rag_vectors');
+  updateSendBtn();
+}
 
-// ==================== START ====================
 init();
 </script>
 </body>
-</html>
-
+</html>
\ No newline at end of file
