Spaces:

quickgrid
/

RAG-Visualizer

Running

App Files Files Community

quickgrid commited on 4 days ago

Commit

d190577

verified ·

1 Parent(s): a918b10

Update index.html

Browse files

Files changed (1) hide show

index.html +1364 -415

index.html CHANGED Viewed

@@ -1,449 +1,1398 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Browser RAG Visualizer | Qwen 3.5 WebGPU</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script type="text/javascript" src="https://tampermonkey.github.io/litegraph.js/litegraph.js"></script>
-    <link rel="stylesheet" type="text/css" href="https://tampermonkey.github.io/litegraph.js/css/litegraph.css">
-    <style>
-        body { background-color: #0f172a; color: #e2e8f0; font-family: ui-sans-serif, system-ui, sans-serif; overflow: hidden; }
-        .grid-layout { display: grid; grid-template-columns: 25% 45% 30%; height: 100vh; gap: 2px; background: #1e293b; }
-        .panel { background-color: #0f172a; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; }
-        .glass-header { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px); position: sticky; top: 0; z-index: 10; padding-bottom: 0.5rem;}
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-track { background: #1e293b; }
-        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
-        /* Animations */
-        @keyframes pulse-row {
-            0% { background-color: #0f172a; }
-            50% { background-color: #1e40af; transform: scale(1.02); }
-            100% { background-color: #1e293b; transform: scale(1); }
-        }
-        .highlight-top-k { animation: pulse-row 1.5s ease-in-out; border-left: 4px solid #3b82f6; background-color: #1e293b; }
-        @keyframes slide-up {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .animate-entry { animation: slide-up 0.3s ease-out forwards; }
-        .vector-text { font-family: monospace; font-size: 0.7rem; color: #64748b; word-break: break-all; }
-        /* LiteGraph Customizations */
-        .lgraphcanvas { background-color: #0f172a !important; }
-    </style>
 </head>
 <body>
-<div class="grid-layout">
-    <!-- LEFT PANEL: Chat & Data Entry -->
-    <div class="panel border-r border-slate-700">
-        <div class="glass-header border-b border-slate-700 mb-4">
-            <h2 class="text-xl font-bold text-blue-400">1. Interaction</h2>
-        </div>
-        <!-- Add to Vector DB -->
-        <div class="mb-6 bg-slate-800 p-3 rounded-lg">
-            <h3 class="text-sm font-semibold mb-2 text-slate-300">Add Knowledge</h3>
-            <textarea id="db-input" rows="2" class="w-full bg-slate-900 border border-slate-700 rounded p-2 text-sm focus:outline-none focus:border-blue-500" placeholder="Enter text to embed..."></textarea>
-            <button id="btn-add-db" class="mt-2 w-full bg-slate-700 hover:bg-blue-600 text-white text-sm py-1.5 rounded transition">Embed & Add to DB</button>
-        </div>
-        <!-- Chat Interface -->
-        <div class="flex-grow flex flex-col min-h-0">
-            <h3 class="text-sm font-semibold mb-2 text-slate-300">Qwen 3.5 Chat</h3>
-            <div id="chat-window" class="flex-grow bg-slate-900 border border-slate-700 rounded-lg p-3 mb-3 overflow-y-auto flex flex-col gap-2">
-                <div class="text-xs text-slate-500 text-center">Models are downloading. Watch the Node Editor...</div>
-            </div>
-            <div class="flex gap-2">
-                <input type="text" id="chat-input" class="flex-grow bg-slate-900 border border-slate-700 rounded p-2 text-sm focus:outline-none focus:border-blue-500" placeholder="Ask a question..." disabled>
-                <button id="btn-chat" class="bg-blue-600 hover:bg-blue-500 text-white px-4 rounded text-sm disabled:opacity-50 transition" disabled>Send</button>
-            </div>
-        </div>
     </div>
-    <!-- MIDDLE PANEL: Visual Node Flow -->
-    <div class="panel p-0 relative">
-        <div class="absolute top-4 left-4 z-10 glass-header rounded px-3 py-1 border border-slate-700">
-            <h2 class="text-xl font-bold text-emerald-400">2. Pipeline Process</h2>
-        </div>
-        <canvas id="litegraph-canvas" class="w-full h-full"></canvas>
     </div>
-    <!-- RIGHT PANEL: Vector DB & Reranking -->
-    <div class="panel border-l border-slate-700">
-        <div class="glass-header border-b border-slate-700 mb-4">
-            <h2 class="text-xl font-bold text-purple-400">3. Memory & Retrieval</h2>
         </div>
-        <!-- Reranker Visualization -->
-        <div class="mb-4 bg-slate-800 rounded-lg border border-slate-700 overflow-hidden flex flex-col" style="height: 30%;">
-            <div class="bg-slate-700 px-3 py-1 text-xs font-bold text-slate-300 flex justify-between">
-                <span>Reranker (Top-K Sort)</span>
-                <span id="rerank-status" class="text-purple-400">Idle</span>
-            </div>
-            <div id="reranker-list" class="p-2 overflow-y-auto flex-grow flex flex-col gap-1">
-                <!-- Reranked items appear here -->
-            </div>
         </div>
-        <!-- Vector DB Table -->
-        <div class="flex-grow bg-slate-800 rounded-lg border border-slate-700 overflow-hidden flex flex-col">
-            <div class="bg-slate-700 px-3 py-1 text-xs font-bold text-slate-300 flex justify-between">
-                <span>Vector Table (Mock LanceDB)</span>
-                <span id="db-count" class="text-blue-400">0 Rows</span>
-            </div>
-            <div class="overflow-y-auto p-2">
-                <table class="w-full text-left text-xs">
-                    <thead>
-                        <tr class="text-slate-400 border-b border-slate-600">
-                            <th class="pb-1 w-12">ID</th>
-                            <th class="pb-1 w-1/3">Metadata (Text)</th>
-                            <th class="pb-1">Vector (Truncated)</th>
-                        </tr>
-                    </thead>
-                    <tbody id="db-tbody">
-                        <!-- DB Rows -->
-                    </tbody>
-                </table>
-            </div>
-        </div>
     </div>
 </div>
 <script type="module">
-    // -------------------------------------------------------------------
-    // 1. IMPORTS & PIPELINE SETUP
-    // -------------------------------------------------------------------
-    import { pipeline, env, cos_sim } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0/dist/transformers.min.js';
-    // Optimize for browser
-    env.allowLocalModels = false;
-    env.backends.onnx.wasm.numThreads = 1;
-    let embedder, generator, reranker;
-    const vectorDB = []; // In-memory fallback acting as LanceDB
-    let dbIdCounter = 1;
-    // -------------------------------------------------------------------
-    // 2. LITEGRAPH (NODE EDITOR) SETUP
-    // -------------------------------------------------------------------
-    const graph = new LGraph();
-    const canvas = new LGraphCanvas("#litegraph-canvas", graph);
-    // Resize handling
-    window.addEventListener("resize", () => {
-        canvas.resize();
     });
-    // Custom Nodes
-    function InputNode() {
-        this.addOutput("Query", "string");
-        this.title = "User Input";
-        this.color = "#1e3a8a";
-    }
-    LGraphCanvas.registerNode("RAG/Input", InputNode);
-    function EmbedderNode() {
-        this.addInput("Text", "string");
-        this.addOutput("Vector", "array");
-        this.title = "MiniLM Embedder";
-        this.color = "#064e3b";
-        this.properties = { model: "all-MiniLM-L6-v2" };
-        this.addWidget("text", "Model", this.properties.model);
-    }
-    LGraphCanvas.registerNode("RAG/Embedder", EmbedderNode);
-    function DBNode() {
-        this.addInput("Query Vector", "array");
-        this.addOutput("Top-K Rows", "array");
-        this.title = "Vector DB (Search)";
-        this.color = "#4c1d95";
-        this.properties = { top_k: 3, metric: "Cosine" };
-        this.addWidget("number", "Top K", this.properties.top_k, (v) => this.properties.top_k = v, {min:1, max:10, step:10});
-    }
-    LGraphCanvas.registerNode("RAG/VectorDB", DBNode);
-    function RerankerNode() {
-        this.addInput("Top-K Rows", "array");
-        this.addOutput("Context", "string");
-        this.title = "BGE Reranker";
-        this.color = "#831843";
-    }
-    LGraphCanvas.registerNode("RAG/Reranker", RerankerNode);
-    function LLMNode() {
-        this.addInput("Context", "string");
-        this.addInput("Query", "string");
-        this.title = "Qwen 3.5 0.8B (WebGPU)";
-        this.color = "#701a75";
     }
-    LGraphCanvas.registerNode("RAG/Generator", LLMNode);
-    // Build Graph
-    const nodeInput = LiteGraph.createNode("RAG/Input");
-    nodeInput.pos = [50, 150];
-    graph.add(nodeInput);
-    const nodeEmbedder = LiteGraph.createNode("RAG/Embedder");
-    nodeEmbedder.pos = [250, 150];
-    graph.add(nodeEmbedder);
-    const nodeDB = LiteGraph.createNode("RAG/VectorDB");
-    nodeDB.pos = [500, 150];
-    graph.add(nodeDB);
-    const nodeReranker = LiteGraph.createNode("RAG/Reranker");
-    nodeReranker.pos = [750, 150];
-    graph.add(nodeReranker);
-    const nodeLLM = LiteGraph.createNode("RAG/Generator");
-    nodeLLM.pos = [500, 350];
-    graph.add(nodeLLM);
-    // Connect them
-    nodeInput.connect(0, nodeEmbedder, 0);
-    nodeInput.connect(0, nodeLLM, 1);
-    nodeEmbedder.connect(0, nodeDB, 0);
-    nodeDB.connect(0, nodeReranker, 0);
-    nodeReranker.connect(0, nodeLLM, 0);
-    graph.start();
-    // Helper to pulse nodes
-    function highlightNode(node) {
-        const originalColor = node.color;
-        node.color = "#eab308"; // yellow
-        canvas.setDirty(true, true);
-        setTimeout(() => { node.color = originalColor; canvas.setDirty(true, true); }, 1000);
     }
-    // -------------------------------------------------------------------
-    // 3. MODEL INITIALIZATION
-    // -------------------------------------------------------------------
-    async function initModels() {
-        const chatWindow = document.getElementById("chat-window");
-        try {
-            chatWindow.innerHTML += `<div class="text-xs text-blue-400">Loading Embedder (MiniLM)...</div>`;
-            embedder = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', { dtype: 'fp32' });
-            chatWindow.innerHTML += `<div class="text-xs text-purple-400">Loading Reranker (BGE)...</div>`;
-            reranker = await pipeline('text-classification', 'Xenova/bge-reranker-base');
-            chatWindow.innerHTML += `<div class="text-xs text-emerald-400">Loading LLM (Qwen 1.5/3.5 0.5B WebGPU)...</div>`;
-            // Using a slightly smaller Qwen variant for guaranteed WebGPU browser stability in this demo
-            generator = await pipeline('text-generation', 'Xenova/Qwen1.5-0.5B-Chat', { device: 'webgpu', dtype: 'q4' });
-            chatWindow.innerHTML += `<div class="text-sm text-green-400 mt-2">All models ready. System online.</div>`;
-            document.getElementById("chat-input").disabled = false;
-            document.getElementById("btn-chat").disabled = false;
-        } catch (e) {
-            console.error(e);
-            chatWindow.innerHTML += `<div class="text-xs text-red-400">Error loading models. Check console or WebGPU support.</div>`;
-        }
     }
-    // -------------------------------------------------------------------
-    // 4. UI INTERACTION & LOGIC
-    // -------------------------------------------------------------------
-    // Add to DB
-    document.getElementById("btn-add-db").addEventListener("click", async () => {
-        const text = document.getElementById("db-input").value.trim();
-        if(!text || !embedder) return;
-        highlightNode(nodeEmbedder);
-        // 1. Generate Embedding
-        const output = await embedder(text, { pooling: 'mean', normalize: true });
-        const vector = Array.from(output.data);
-        // 2. Save to "LanceDB" Table
-        const entry = {
-            id: dbIdCounter++,
-            date: new Date().toISOString().split('T')[0],
-            text: text,
-            vector: vector
-        };
-        vectorDB.push(entry);
-        // 3. Visualize
-        document.getElementById("db-count").innerText = `${vectorDB.length} Rows`;
-        const tr = document.createElement("tr");
-        tr.className = "border-b border-slate-700 animate-entry";
-        tr.id = `db-row-${entry.id}`;
-        tr.innerHTML = `
-            <td class="py-2 text-slate-300">#${entry.id}</td>
-            <td class="py-2 text-slate-300 truncate max-w-[100px]" title="${text}">${text}</td>
-            <td class="py-2 vector-text">[${vector.slice(0, 5).map(n => n.toFixed(3)).join(', ')}...]</td>
-        `;
-        document.getElementById("db-tbody").prepend(tr);
-        document.getElementById("db-input").value = "";
     });
-    // Chat / Retrieval
-    document.getElementById("btn-chat").addEventListener("click", async () => {
-        const query = document.getElementById("chat-input").value.trim();
-        if(!query || !generator) return;
-        const chatWindow = document.getElementById("chat-window");
-        chatWindow.innerHTML += `<div class="bg-slate-800 p-2 rounded text-sm self-end max-w-[80%]">${query}</div>`;
-        document.getElementById("chat-input").value = "";
-        // Visualize Node Flow
-        highlightNode(nodeInput);
-        // 1. Embed Query
-        highlightNode(nodeEmbedder);
-        const queryOut = await embedder(query, { pooling: 'mean', normalize: true });
-        const queryVector = Array.from(queryOut.data);
-        // 2. Vector DB Search (Cosine Similarity)
-        highlightNode(nodeDB);
-        let results = vectorDB.map(row => {
-            return { ...row, score: cos_sim(queryVector, row.vector) };
-        });
-        // Sort by initial similarity and take Top K
-        const topK = nodeDB.properties.top_k;
-        results.sort((a, b) => b.score - a.score);
-        let topResults = results.slice(0, topK);
-        // Highlight rows in table
-        document.querySelectorAll("tr").forEach(tr => tr.classList.remove("highlight-top-k"));
-        topResults.forEach(res => {
-            const rowEl = document.getElementById(`db-row-${res.id}`);
-            if(rowEl) {
-                rowEl.classList.add("highlight-top-k");
-                // Scroll row into view
-                rowEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-            }
-        });
-        // 3. Reranking
-        if(topResults.length > 0 && reranker) {
-            highlightNode(nodeReranker);
-            document.getElementById("rerank-status").innerText = "Processing...";
-            const rerankContainer = document.getElementById("reranker-list");
-            rerankContainer.innerHTML = "";
-            // Populate initial rerank UI
-            for(let res of topResults) {
-                rerankContainer.innerHTML += `
-                    <div id="rr-${res.id}" class="bg-slate-800 border border-slate-600 p-1 rounded text-xs animate-entry">
-                        <span class="text-slate-400">ID: ${res.id}</span> | Initial Score: ${(res.score).toFixed(3)}
-                        <div class="truncate text-slate-300 mt-1">${res.text}</div>
-                    </div>`;
-            }
-            // Run Cross-Encoder
-            const rerankPromises = topResults.map(async (res) => {
-                // bge-reranker outputs logits, higher is betterHere is the complete code for your serverless, static Hugging Face Spaces app.
-This single `index.html` file combines the HTML structure, CSS Grid layout, and JavaScript logic using **Transformers.js (v3)**, **LiteGraph.js** for the node editor, and a browser-native vector database implementation.
-To deploy this, simply create a new Space on Hugging Face, select **Static**, and paste this code into the `index.html` file.
-### `index.html`
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Visual RAG Pipeline</title>
-    <!-- LiteGraph CSS -->
-    <link rel="stylesheet" type="text/css" href="[https://tamats.com/projects/litegraph/css/litegraph.css](https://tamats.com/projects/litegraph/css/litegraph.css)">
-    <style>
-        :root {
-            --bg-color: #1e1e2e;
-            --panel-bg: #282a36;
-            --text-color: #f8f8f2;
-            --accent: #bd93f9;
-            --accent-hover: #ff79c6;
-            --border: #44475a;
-        }
-        body {
-            margin: 0;
-            padding: 0;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            display: grid;
-            grid-template-columns: 300px 1fr 350px;
-            grid-template-rows: 60vh 40vh;
-            height: 100vh;
-            overflow: hidden;
-        }
-        .panel {
-            background: var(--panel-bg);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            margin: 8px;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        .panel-header {
-            background: var(--border);
-            padding: 10px;
-            font-weight: bold;
-            text-align: center;
-        }
-        /* Chat Section (Left) */
-        #chat-panel { grid-column: 1; grid-row: 1 / 3; }
-        #chat-history { flex: 1; overflow-y: auto; padding: 10px; }
-        .message { margin-bottom: 10px; padding: 8px; border-radius: 5px; }
-        .user-msg { background: var(--accent); color: #000; align-self: flex-end; }
-        .bot-msg { background: var(--border); }
-        #chat-input-container { display: flex; padding: 10px; border-top: 1px solid var(--border); }
-        input[type="text"] { flex: 1; padding: 8px; border-radius: 4px; border: none; background: #333; color: white; }
-        button { background: var(--accent); color: black; border: none; padding: 8px 12px; margin-left: 5px; border-radius: 4px; cursor: pointer; font-weight: bold; }
-        button:hover { background: var(--accent-hover); }
-        /* Node Editor (Center Bottom) */
-        #node-panel { grid-column: 2; grid-row: 2; }
-        #litegraph-canvas { width: 100%; height: 100%; }
-        /* DB Input & Reranker (Center Top) */
-        #process-panel { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; padding: 10px; }
-        .status-box { padding: 15px; background: #333; border-radius: 5px; margin-bottom: 10px; flex: 1; overflow-y: auto;}
-        /* Vector DB Table (Right) */
-        #db-panel { grid-column: 3; grid-row: 1 / 3; }
-        #db-table-container { flex: 1; overflow-y: auto; padding: 5px; }
-        table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
-        th, td { border: 1px solid var(--border); padding: 5px; text-align: left; }
-        .vector-cell { font-family: monospace; color: #8be9fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
-        /* Animations */
-        @keyframes highlightPulse {
-            0% { background-color: transparent; }
-            50% { background-color: rgba(189, 147, 249, 0.5); }
-            100% { background-color: rgba(189, 147, 249, 0.2); }
-        }
-        .highlight { animation: highlightPulse 1.5s ease-out forwards; border: 2px solid var(--accent); }
-        #loading-overlay {
-            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.8); z-index: 100;
-            display: flex; flex-direction: column; justify-content: center; align-items: center;
-        }
-    </style>
-</head>
-<body>
-    <!-- Loading Overlay -->
-    <div id="loading-overlay">
-        <h2>Downloading Quantized WebGPU Models...</h2>
-        <p>Qwen3.5-0.8B, MiniLM, and BGE-Reran

 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>RAG Pipeline Visualizer</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ═══════════════════════════════════════════════════════════ */
+/*  TOKENS                                                     */
+/* ═══════════════════════════════════════════════════════════ */
+:root {
+  --bg:       #040912;
+  --bg2:      #07111f;
+  --surface:  #0b1a2e;
+  --surface2: #102038;
+  --surface3: #162845;
+  --border:   #1d3254;
+  --border2:  #26405e;
+  --cyan:     #00e5ff;
+  --cyan-dim: rgba(0,229,255,.12);
+  --purple:   #a855f7;
+  --purple-dim:rgba(168,85,247,.12);
+  --green:    #00ff88;
+  --green-dim:rgba(0,255,136,.10);
+  --amber:    #ffaa00;
+  --amber-dim:rgba(255,170,0,.12);
+  --red:      #ff4455;
+  --pink:     #f472b6;
+  --text:     #c8dff5;
+  --text2:    #7a9ab8;
+  --text3:    #3d5a7a;
+  --mono: 'JetBrains Mono', monospace;
+  --sans: 'DM Sans', system-ui, sans-serif;
+}
+/* ═══════════════════════════════════════════════════════════ */
+/*  RESET & BASE                                               */
+/* ═══════════════════════════════════════════════════════════ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; overflow: hidden; }
+body {
+  font-family: var(--sans);
+  background: var(--bg);
+  color: var(--text);
+  display: grid;
+  grid-template-rows: 44px 200px 1fr;
+  height: 100vh;
+}
+/* scrollbar */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
+/* ═══════════════════════════════════════════════════════════ */
+/*  HEADER                                                     */
+/* ═══════════════════════════════════════════════════════════ */
+#header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: relative; z-index: 50;
+}
+#header::after {
+  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
+  height: 1px;
+  background: linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent);
+  opacity: .4;
+}
+.header-title {
+  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .06em;
+  background: linear-gradient(90deg, var(--cyan), var(--purple));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+}
+.header-title span { -webkit-text-fill-color: var(--text3); font-weight: 300; }
+.model-badges { display: flex; gap: 8px; }
+.badge {
+  display: flex; align-items: center; gap: 5px;
+  padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border2);
+  font-family: var(--mono); font-size: 10px; color: var(--text3);
+  transition: all .3s;
+}
+.badge.loading { border-color: var(--amber); color: var(--amber); }
+.badge.ready   { border-color: var(--green); color: var(--green); }
+.badge.error   { border-color: var(--red);   color: var(--red); }
+.badge-dot {
+  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
+}
+.badge.loading .badge-dot { animation: blink 1s infinite; }
+@keyframes blink { 0%,100%{opacity:1}50%{opacity:.2} }
+/* ═══════════════════════════════════════════════════════════ */
+/*  NODE FLOW EDITOR                                           */
+/* ═══════════════════════════════════════════════════════════ */
+#node-editor {
+  position: relative;
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  overflow: hidden;
+}
+#flow-canvas { display: block; }
+/* Settings panel */
+#node-settings {
+  position: absolute; right: 0; top: 0; bottom: 0; width: 240px;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  padding: 14px;
+  overflow-y: auto;
+  transform: translateX(100%);
+  transition: transform .25s;
+  z-index: 10;
+}
+#node-settings.open { transform: translateX(0); }
+.ns-title {
+  font-family: var(--mono); font-size: 12px; font-weight: 600;
+  margin-bottom: 14px; letter-spacing: .04em;
+}
+.ns-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
+.ns-label {
+  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
+  letter-spacing: .08em; color: var(--text3);
+}
+.ns-input {
+  background: var(--surface3); border: 1px solid var(--border);
+  color: var(--text); padding: 5px 8px; border-radius: 4px;
+  font-family: var(--mono); font-size: 11px; width: 100%;
+  outline: none; transition: border-color .2s;
+}
+.ns-input:focus { border-color: var(--cyan); }
+.ns-close {
+  float: right; background: none; border: none; color: var(--text2);
+  cursor: pointer; font-size: 16px; line-height: 1;
+}
+.ns-close:hover { color: var(--text); }
+/* ═══════════════════════════════════════════════════════════ */
+/*  MAIN PANELS                                                */
+/* ═══════════════════════════════════════════════════════════ */
+#main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  overflow: hidden;
+  min-height: 0;
+}
+.panel {
+  display: flex; flex-direction: column; overflow: hidden;
+  border-right: 1px solid var(--border);
+  min-height: 0;
+}
+.panel:last-child { border-right: none; }
+.panel-hdr {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 7px 12px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.panel-hdr-title {
+  font-family: var(--mono); font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: .1em; color: var(--text2);
+}
+.panel-hdr-badge {
+  font-family: var(--mono); font-size: 9px; color: var(--text3);
+  padding: 2px 6px; border-radius: 4px; background: var(--surface2);
+}
+/* ═══════════════════════════════════════════════════════════ */
+/*  CHAT PANEL                                                 */
+/* ═══════════════════════════════════════════════════════════ */
+#chat-messages {
+  flex: 1; overflow-y: auto; padding: 10px;
+  display: flex; flex-direction: column; gap: 8px;
+  min-height: 0;
+}
+.msg { display: flex; flex-direction: column; gap: 3px; }
+.msg.user { align-items: flex-end; }
+.msg.assistant { align-items: flex-start; }
+.msg-bubble {
+  max-width: 88%; padding: 8px 11px; border-radius: 8px;
+  font-size: 12px; line-height: 1.55; white-space: pre-wrap;
+}
+.msg.user .msg-bubble {
+  background: linear-gradient(135deg, var(--purple), #7c3aed);
+  color: #fff; border-radius: 8px 8px 2px 8px;
+}
+.msg.assistant .msg-bubble {
+  background: var(--surface2); border: 1px solid var(--border);
+  color: var(--text); border-radius: 8px 8px 8px 2px;
+}
+.msg-time {
+  font-family: var(--mono); font-size: 9px; color: var(--text3);
+  padding: 0 4px;
+}
+.ctx-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
+.ctx-chip {
+  font-family: var(--mono); font-size: 9px;
+  padding: 1px 6px; border-radius: 10px;
+  background: var(--cyan-dim); border: 1px solid var(--cyan);
+  color: var(--cyan);
+}
+/* typing dots */
+.typing { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
+.typing i {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--purple); display: block;
+  animation: tdot 1s infinite;
+}
+.typing i:nth-child(2){animation-delay:.15s}
+.typing i:nth-child(3){animation-delay:.3s}
+@keyframes tdot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
+/* chat input */
+#chat-input-wrap {
+  flex-shrink: 0; display: flex; gap: 6px; padding: 9px 10px;
+  border-top: 1px solid var(--border); background: var(--surface);
+}
+#chat-input {
+  flex: 1; background: var(--surface3); border: 1px solid var(--border);
+  color: var(--text); padding: 7px 11px; border-radius: 6px;
+  font-family: var(--sans); font-size: 12px; outline: none;
+  transition: border-color .2s;
+}
+#chat-input:focus { border-color: var(--purple); }
+#chat-input::placeholder { color: var(--text3); }
+#chat-input:disabled { opacity: .4; cursor: not-allowed; }
+/* ═══════════════════════════════════════════════════════════ */
+/*  BUTTONS                                                    */
+/* ═══════════════════════════════════════════════════════════ */
+.btn {
+  padding: 7px 13px; border-radius: 6px; border: none; cursor: pointer;
+  font-family: var(--mono); font-size: 11px; font-weight: 600;
+  transition: all .18s; letter-spacing: .03em;
+}
+.btn-cyan {
+  background: var(--cyan); color: var(--bg);
+}
+.btn-cyan:hover { filter: brightness(1.15); transform: translateY(-1px); }
+.btn-cyan:active { transform: translateY(0); }
+.btn-cyan:disabled { opacity: .35; cursor: not-allowed; transform: none; filter: none; }
+.btn-ghost {
+  background: var(--surface3); color: var(--text2);
+  border: 1px solid var(--border);
+}
+.btn-ghost:hover { border-color: var(--border2); color: var(--text); }
+.btn-ghost:disabled { opacity: .35; cursor: not-allowed; }
+.btn-green {
+  background: var(--green); color: var(--bg);
+}
+.btn-green:hover { filter: brightness(1.1); }
+.btn-green:disabled { opacity: .35; cursor: not-allowed; filter: none; }
+/* ═══════════════════════════════════════════════════════════ */
+/*  RETRIEVAL PANEL                                            */
+/* ═══════════════════════════════════════════════════════════ */
+#retrieval-panel { display: flex; flex-direction: column; min-height: 0; }
+.ret-section { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
+.ret-section + .ret-section { border-top: 1px solid var(--border); }
+.ret-section-hdr {
+  flex-shrink: 0; padding: 5px 10px;
+  font-family: var(--mono); font-size: 9px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: .1em;
+  color: var(--text3); background: var(--surface2);
+  border-bottom: 1px solid var(--border);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.ret-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
+.ret-item {
+  padding: 8px 10px; background: var(--surface2);
+  border: 1px solid var(--border); border-radius: 5px;
+  font-size: 11px; transition: all .35s; position: relative;
+  cursor: default;
+}
+.ret-item.lit {
+  border-color: var(--cyan);
+  box-shadow: 0 0 0 1px var(--cyan-dim), inset 0 0 20px var(--cyan-dim);
+  background: rgba(0,229,255,.05);
+  animation: ret-pop .35s ease;
+}
+.ret-item.selected {
+  border-color: var(--green);
+  box-shadow: 0 0 0 1px var(--green-dim), inset 0 0 20px var(--green-dim);
+  background: rgba(0,255,136,.04);
+  animation: ret-pop .35s ease;
+}
+@keyframes ret-pop{0%{transform:scale(.96);opacity:.5}100%{transform:scale(1);opacity:1}}
+.ret-rank {
+  position: absolute; top: -8px; left: 8px;
+  font-family: var(--mono); font-size: 9px; font-weight: 700;
+  padding: 1px 5px; border-radius: 4px;
+  background: var(--amber); color: var(--bg);
+}
+.ret-item.selected .ret-rank { background: var(--green); }
+.ret-text {
+  color: var(--text); font-size: 11px; line-height: 1.45;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  margin-bottom: 5px;
+}
+.ret-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
+.ret-meta { font-family: var(--mono); font-size: 9px; color: var(--text3); }
+.score-bar { flex: 1; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
+.score-fill {
+  height: 100%; border-radius: 1px;
+  transition: width .6s ease;
+  background: linear-gradient(90deg, var(--purple), var(--cyan));
+}
+.ret-item.selected .score-fill {
+  background: linear-gradient(90deg, var(--green), var(--cyan));
+}
+.score-pct { font-family: var(--mono); font-size: 9px; color: var(--text2); white-space: nowrap; }
+/* ═══════════════════════════════════════════════════════════ */
+/*  VECTOR DB PANEL                                            */
+/* ═══════════════════════════════════════════════════════════ */
+#add-form {
+  flex-shrink: 0; padding: 9px; background: var(--surface2);
+  border-bottom: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 6px;
+}
+#add-form textarea {
+  background: var(--surface3); border: 1px solid var(--border);
+  color: var(--text); padding: 7px 9px; border-radius: 5px;
+  font-family: var(--sans); font-size: 11px; resize: none; height: 54px;
+  outline: none; width: 100%; line-height: 1.45; transition: border-color .2s;
+}
+#add-form textarea:focus { border-color: var(--green); }
+#add-form textarea::placeholder { color: var(--text3); }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
+.form-row input {
+  background: var(--surface3); border: 1px solid var(--border);
+  color: var(--text); padding: 5px 8px; border-radius: 4px;
+  font-family: var(--mono); font-size: 10px; outline: none; width: 100%;
+  transition: border-color .2s;
+}
+.form-row input:focus { border-color: var(--green); }
+.form-row input::placeholder { color: var(--text3); }
+.embed-progress { display: none; }
+.embed-progress.show { display: block; }
+.embed-progress-bar {
+  height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; margin-top: 2px;
+}
+.embed-progress-fill {
+  height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan));
+  border-radius: 1px; width: 0; transition: width .3s;
+}
+.embed-progress-txt {
+  font-family: var(--mono); font-size: 9px; color: var(--green);
+}
+/* table */
+#vdb-table-wrap { flex: 1; overflow: auto; min-height: 0; }
+#vdb-table {
+  width: 100%; border-collapse: collapse;
+  font-family: var(--mono); font-size: 10px;
+}
+#vdb-table th {
+  padding: 5px 8px; background: var(--surface3);
+  border-bottom: 1px solid var(--border);
+  text-align: left; font-weight: 600; color: var(--text3);
+  text-transform: uppercase; letter-spacing: .06em;
+  position: sticky; top: 0; z-index: 1;
+}
+#vdb-table td {
+  padding: 5px 8px; border-bottom: 1px solid rgba(29,50,84,.4);
+  color: var(--text); vertical-align: top;
+}
+#vdb-table tr { transition: background .3s; }
+#vdb-table tr:hover td { background: var(--surface2); }
+#vdb-table tr.lit td { background: rgba(0,229,255,.05); }
+#vdb-table tr.lit { outline: 1px solid var(--cyan); }
+.vec-chip {
+  display: inline-block;
+  font-size: 9px; color: var(--cyan); white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis; max-width: 80px;
+}
+.tag {
+  display: inline-block; padding: 1px 5px; border-radius: 3px;
+  font-size: 9px; font-weight: 600;
+  background: var(--surface3); border: 1px solid var(--border); color: var(--text3);
+}
+.tag.new-tag { border-color: var(--green); color: var(--green); animation: tag-glow 2s ease; }
+@keyframes tag-glow{0%{box-shadow:0 0 10px var(--green)}100%{box-shadow:none}}
+.tag.selected-tag { border-color: var(--cyan); color: var(--cyan); }
+/* ═══════════════════════════════════════════════════════════ */
+/*  EMPTY STATE                                                */
+/* ═══════════════════════════════════════════════════════════ */
+.empty {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  color: var(--text3); font-size: 11px; gap: 7px; padding: 20px; text-align: center;
+}
+.empty-icon { font-size: 28px; opacity: .5; }
+/* ═══════════════════════════════════════════════════════════ */
+/*  TOAST                                                      */
+/* ═══════════════════════════════════════════════════════════ */
+#toast {
+  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(60px);
+  padding: 8px 16px; background: var(--surface3); border: 1px solid var(--border2);
+  border-radius: 8px; font-family: var(--mono); font-size: 11px; color: var(--text);
+  transition: transform .3s; z-index: 999; pointer-events: none; white-space: nowrap;
+}
+#toast.show { transform: translateX(-50%) translateY(0); }
+/* ═══════════════════════════════════════════════════════════ */
+/*  LOADING OVERLAY                                            */
+/* ═══════════════════════════════════════════════════════════ */
+#loading-overlay {
+  position: fixed; inset: 0; background: var(--bg);
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 20px; z-index: 200; transition: opacity .5s;
+}
+#loading-overlay.fade { opacity: 0; pointer-events: none; }
+.lo-title {
+  font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: .08em;
+  background: linear-gradient(90deg, var(--cyan), var(--purple));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+}
+.lo-sub {
+  font-family: var(--sans); font-size: 12px; color: var(--text2); text-align: center;
+  max-width: 340px; line-height: 1.6;
+}
+.lo-steps { display: flex; flex-direction: column; gap: 8px; width: 320px; }
+.lo-step {
+  display: flex; align-items: center; gap: 10px;
+  font-family: var(--mono); font-size: 11px; color: var(--text3);
+  transition: color .3s;
+}
+.lo-step.active { color: var(--cyan); }
+.lo-step.done { color: var(--green); }
+.lo-step-icon { font-size: 14px; width: 20px; text-align: center; }
+.lo-bar-wrap { width: 320px; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
+.lo-bar-fill {
+  height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple));
+  border-radius: 1px; width: 0%; transition: width .5s;
+}
+</style>
 </head>
 <body>
+<!-- LOADING OVERLAY -->
+<div id="loading-overlay">
+  <div class="lo-title">⬡ RAG PIPELINE VISUALIZER</div>
+  <div class="lo-sub">Loading AI models into your browser. Models are cached after first download.</div>
+  <div class="lo-steps">
+    <div class="lo-step" id="lo-embed">
+      <span class="lo-step-icon">🔢</span>
+      <span>Embedding model — all-MiniLM-L6-v2 (22 MB)</span>
+    </div>
+    <div class="lo-step" id="lo-rerank">
+      <span class="lo-step-icon">🔄</span>
+      <span>Reranker — ms-marco-MiniLM-L-6 (~80 MB)</span>
+    </div>
+    <div class="lo-step" id="lo-llm">
+      <span class="lo-step-icon">🤖</span>
+      <span>LLM — LaMini-Flan-T5-248M (~900 MB)</span>
+    </div>
+  </div>
+  <div class="lo-bar-wrap"><div class="lo-bar-fill" id="lo-bar"></div></div>
+  <div class="lo-sub" id="lo-status">Initializing…</div>
+</div>
+<!-- HEADER -->
+<div id="header">
+  <div class="header-title">⬡ RAG<span>/</span>VISUALIZER <span>· in-browser · powered by transformers.js</span></div>
+  <div class="model-badges">
+    <div class="badge" id="bd-embed"><div class="badge-dot"></div> Embed</div>
+    <div class="badge" id="bd-rerank"><div class="badge-dot"></div> Rerank</div>
+    <div class="badge" id="bd-llm"><div class="badge-dot"></div> LLM</div>
+  </div>
+</div>
+<!-- NODE FLOW EDITOR -->
+<div id="node-editor">
+  <canvas id="flow-canvas"></canvas>
+  <div id="node-settings">
+    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+      <div class="ns-title" id="ns-title">Node Settings</div>
+      <button class="ns-close" onclick="closeSettings()">✕</button>
     </div>
+    <div id="ns-body"></div>
+  </div>
+</div>
+<!-- MAIN PANELS -->
+<div id="main">
+  <!-- CHAT -->
+  <div class="panel" id="chat-panel">
+    <div class="panel-hdr">
+      <span class="panel-hdr-title">💬 Chat</span>
+      <span class="panel-hdr-badge" id="chat-status">idle</span>
+    </div>
+    <div id="chat-messages">
+      <div class="empty" id="chat-empty">
+        <div class="empty-icon">🤖</div>
+        <span>Ask anything. Every step of the<br>RAG pipeline will be visualized live.</span>
+      </div>
     </div>
+    <div id="chat-input-wrap">
+      <input id="chat-input" placeholder="Ask a question…" disabled />
+      <button class="btn btn-cyan" id="send-btn" disabled>Send</button>
+    </div>
+  </div>
+  <!-- RETRIEVAL + RERANKING -->
+  <div class="panel" id="retrieval-panel">
+    <div class="panel-hdr">
+      <span class="panel-hdr-title">🔍 Retrieval &amp; Reranking</span>
+      <span class="panel-hdr-badge" id="ret-status">idle</span>
+    </div>
+    <div class="ret-section">
+      <div class="ret-section-hdr">
+        <span>Retrieved (Top-K)</span>
+        <span id="ret-k-badge" style="color:var(--cyan);font-size:9px"></span>
+      </div>
+      <div class="ret-list" id="ret-list">
+        <div class="empty" id="ret-empty">
+          <div class="empty-icon">📚</div>
+          <span>Retrieved chunks appear here</span>
         </div>
+      </div>
+    </div>
+    <div class="ret-section">
+      <div class="ret-section-hdr">
+        <span>After Reranking</span>
+        <span id="rerank-k-badge" style="color:var(--green);font-size:9px"></span>
+      </div>
+      <div class="ret-list" id="rerank-list">
+        <div class="empty" id="rerank-empty">
+          <div class="empty-icon">🔄</div>
+          <span>Reranked context appears here</span>
         </div>
+      </div>
+    </div>
+  </div>
+  <!-- VECTOR DB -->
+  <div class="panel" id="vectordb-panel">
+    <div class="panel-hdr">
+      <span class="panel-hdr-title">🗄️ Vector DB (LanceDB-style)</span>
+      <span class="panel-hdr-badge" id="db-count">0 vectors</span>
+    </div>
+    <div id="add-form">
+      <textarea id="add-text" placeholder="Type or paste text to embed and store in the vector DB…"></textarea>
+      <div class="form-row">
+        <input id="add-source" placeholder="Source (e.g. doc1.pdf)" />
+        <input id="add-category" placeholder="Category (e.g. science)" />
+      </div>
+      <div class="embed-progress" id="embed-prog">
+        <div class="embed-progress-txt" id="embed-prog-txt">Embedding…</div>
+        <div class="embed-progress-bar"><div class="embed-progress-fill" id="embed-prog-fill"></div></div>
+      </div>
+      <button class="btn btn-green" id="add-btn" style="width:100%" disabled>＋ Embed &amp; Add to Vector DB</button>
     </div>
+    <div id="vdb-table-wrap">
+      <table id="vdb-table">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th style="min-width:110px">Text Preview</th>
+            <th>Vector Preview</th>
+            <th>Source</th>
+            <th>Category</th>
+            <th>Date Added</th>
+          </tr>
+        </thead>
+        <tbody id="vdb-tbody"></tbody>
+      </table>
+    </div>
+  </div>
 </div>
+<!-- TOAST -->
+<div id="toast"></div>
+<!-- ═══════════════════════════════════════════════════════════
+     SCRIPT
+     ═══════════════════════════════════════════════════════════ -->
 <script type="module">
+import { pipeline, env }
+  from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+env.allowLocalModels = false;
+env.useBrowserCache  = true;  // cache models in browser
+/* ─────────────────────────────────────────────────────────── */
+/*  CONFIG                                                      */
+/* ─────────────────────────────────────────────────────────── */
+const CFG = {
+  embedModel:  'Xenova/all-MiniLM-L6-v2',
+  rerankModel: 'Xenova/ms-marco-MiniLM-L-6-v2',
+  llmModel:    'Xenova/LaMini-Flan-T5-248M',
+  topK:        5,
+  topKRerank:  3,
+  maxTokens:   180,
+};
+/* ─────────────────────────────────────────────────────────── */
+/*  STATE                                                       */
+/* ─────────────────────────────────────────────────────────── */
+const ST = {
+  embedder: null, reranker: null, generator: null,
+  db: [],            // {id,text,vec,source,category,date}
+  busy: false,
+};
+/* ─────────────────────────────────────────────────────────── */
+/*  IndexedDB persistence (LanceDB-style in-browser)           */
+/* ─────────────────────────────────────────────────────────── */
+let idb = null;
+async function openIDB() {
+  return new Promise((res, rej) => {
+    const req = indexedDB.open('rag-viz-db', 1);
+    req.onupgradeneeded = e => {
+      e.target.result.createObjectStore('vectors', { keyPath: 'id' });
+    };
+    req.onsuccess = e => { idb = e.target.result; res(); };
+    req.onerror   = e => rej(e);
+  });
+}
+async function idbGetAll() {
+  return new Promise((res, rej) => {
+    const tx = idb.transaction('vectors','readonly');
+    const req = tx.objectStore('vectors').getAll();
+    req.onsuccess = e => res(e.target.result || []);
+    req.onerror   = e => rej(e);
+  });
+}
+async function idbPut(entry) {
+  return new Promise((res, rej) => {
+    const tx = idb.transaction('vectors','readwrite');
+    tx.objectStore('vectors').put(entry);
+    tx.oncomplete = res; tx.onerror = rej;
+  });
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  VECTOR MATH                                                 */
+/* ─────────────────────────────────────────────────────────── */
+function cosine(a, b) {
+  let dot = 0, na = 0, nb = 0;
+  for (let i = 0; i < a.length; i++) {
+    dot += a[i]*b[i]; na += a[i]*a[i]; nb += b[i]*b[i];
+  }
+  return dot / (Math.sqrt(na)*Math.sqrt(nb) + 1e-9);
+}
+function vecSearch(queryVec, topK) {
+  const scored = ST.db.map(e => ({
+    ...e, score: cosine(queryVec, e.vec)
+  }));
+  scored.sort((a,b) => b.score - a.score);
+  return scored.slice(0, topK);
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  TOAST                                                       */
+/* ─────────────────────────────────────────────────────────── */
+let toastTimer;
+function toast(msg, dur = 3200) {
+  const el = document.getElementById('toast');
+  el.textContent = msg;
+  el.classList.add('show');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => el.classList.remove('show'), dur);
+}
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+const $ = id => document.getElementById(id);
+/* ─────────────────────────────────────────────────────────── */
+/*  BADGE helpers                                               */
+/* ─────────────────────────────────────────────────────────── */
+function badge(id, state) {
+  const el = $(`bd-${id}`);
+  el.className = `badge ${state}`;
+}
+function loStep(id, state) {
+  const el = $(`lo-${id}`);
+  if (state === 'active') { el.className = 'lo-step active'; el.querySelector('.lo-step-icon').textContent = '⏳'; }
+  if (state === 'done')   { el.className = 'lo-step done';   el.querySelector('.lo-step-icon').textContent = '✅'; }
+  if (state === 'error')  { el.className = 'lo-step';        el.querySelector('.lo-step-icon').textContent = '⚠️'; }
+}
+function loBar(pct) { $('lo-bar').style.width = pct + '%'; }
+/* ─────────────────────────────────────────────────────────── */
+/*  MODEL LOADING                                               */
+/* ─────────────────────────────────────────────────────────── */
+async function loadModels() {
+  $('lo-status').textContent = 'Loading embedding model…';
+  loStep('embed','active'); loBar(5); badge('embed','loading');
+  try {
+    ST.embedder = await pipeline('feature-extraction', CFG.embedModel, {
+      progress_callback: p => {
+        if (p.status === 'progress') {
+          const pct = 5 + (p.progress || 0) * .2;
+          loBar(Math.min(25, pct));
+        }
+      }
     });
+    badge('embed','ready'); loStep('embed','done');
+    toast('✅ Embedding model ready');
+  } catch(e) {
+    badge('embed','error'); loStep('embed','error');
+    console.error(e); toast('⚠️ Embedding model failed: '+e.message, 5000);
+  }
+  loBar(25); $('lo-status').textContent = 'Loading reranking model…';
+  loStep('rerank','active'); badge('rerank','loading');
+  try {
+    ST.reranker = await pipeline('text-classification', CFG.rerankModel, {
+      progress_callback: p => {
+        if (p.status === 'progress') loBar(25 + (p.progress||0)*.2);
+      }
+    });
+    badge('rerank','ready'); loStep('rerank','done');
+    toast('✅ Reranking model ready');
+  } catch(e) {
+    badge('rerank','error'); loStep('rerank','error');
+    ST.reranker = null;
+    console.warn('Reranker unavailable, fallback to cosine:', e.message);
+    toast('⚠️ Reranker unavailable — cosine fallback active', 5000);
+  }
+  loBar(45); $('lo-status').textContent = 'Loading LLM (large — may take a minute)…';
+  loStep('llm','active'); badge('llm','loading');
+  try {
+    ST.generator = await pipeline('text2text-generation', CFG.llmModel, {
+      progress_callback: p => {
+        if (p.status === 'progress') loBar(45 + (p.progress||0)*.5);
+      }
+    });
+    badge('llm','ready'); loStep('llm','done');
+    toast('✅ LLM ready!');
+  } catch(e) {
+    badge('llm','error'); loStep('llm','error');
+    ST.generator = null;
+    console.warn('LLM unavailable:', e.message);
+    toast('⚠️ LLM not loaded — answers will be template-based', 5000);
+  }
+  loBar(100);
+  $('lo-status').textContent = ST.embedder ? 'Ready! All models loaded.' : '⚠️ Some models failed.';
+  await sleep(800);
+  $('loading-overlay').classList.add('fade');
+  setTimeout(() => { $('loading-overlay').style.display='none'; }, 500);
+  if (ST.embedder) {
+    $('chat-input').disabled  = false;
+    $('send-btn').disabled    = false;
+    $('add-btn').disabled     = false;
+    // Load sample data if DB empty
+    if (ST.db.length === 0) await insertSamples();
+  }
+  FE.setAllIdle();
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  EMBEDDING & RERANKING & GENERATION                         */
+/* ─────────────────────────────────────────────────────────── */
+async function embed(text) {
+  const out = await ST.embedder(text, { pooling: 'mean', normalize: true });
+  return Array.from(out.data);
+}
+async function rerank(query, results) {
+  const topK = CFG.topKRerank;
+  if (!ST.reranker) {
+    return [...results].sort((a,b)=>b.score-a.score).slice(0,topK)
+                       .map(r=>({...r, rerankScore: r.score}));
+  }
+  try {
+    const pairs = results.map(r => [query, r.text]);
+    const scores = await ST.reranker(pairs, { topk: 1 });
+    const withScores = results.map((r, i) => ({
+      ...r,
+      rerankScore: Array.isArray(scores[i]) ? scores[i][0].score : (scores[i]?.score ?? r.score)
+    }));
+    withScores.sort((a,b) => b.rerankScore - a.rerankScore);
+    return withScores.slice(0, topK);
+  } catch(e) {
+    console.warn('Rerank error, cosine fallback:', e.message);
+    return [...results].sort((a,b)=>b.score-a.score).slice(0,topK)
+                       .map(r=>({...r, rerankScore: r.score}));
+  }
+}
+async function generate(query, context) {
+  const ctxTxt = context.map((c,i) => `[${i+1}] ${c.text}`).join('\n');
+  const prompt = `Answer the question using the context.\n\nContext:\n${ctxTxt}\n\nQuestion: ${query}\nAnswer:`;
+  if (!ST.generator) {
+    return `Context summary:\n${context.slice(0,2).map(c=>'• '+c.text.slice(0,100)).join('\n')}`;
+  }
+  try {
+    const out = await ST.generator(prompt, { max_new_tokens: CFG.maxTokens, do_sample: false });
+    return (out[0]?.generated_text || '').trim() || 'No answer generated.';
+  } catch(e) {
+    console.error('Generate error:', e);
+    return context[0]?.text || 'No context found.';
+  }
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  VECTOR DB UI                                               */
+/* ─────────────────────────────────────────────────────────── */
+function fmtDate(iso) {
+  const d = new Date(iso);
+  return `${d.getMonth()+1}/${d.getDate()} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
+}
+function vecPreview(v) {
+  return `[${v.slice(0,3).map(x=>x.toFixed(2)).join(', ')},…]`;
+}
+function addTableRow(entry, isNew=false) {
+  const tbody = $('vdb-tbody');
+  const rowNum = tbody.children.length + 1;
+  const tr = document.createElement('tr');
+  tr.dataset.id = entry.id;
+  const textPrev = entry.text.length > 40 ? entry.text.slice(0,40)+'…' : entry.text;
+  tr.innerHTML = `
+    <td style="color:var(--text3)">${rowNum}</td>
+    <td title="${entry.text}" style="font-family:var(--sans);font-size:11px">${textPrev}</td>
+    <td><span class="vec-chip">${vecPreview(entry.vec)}</span></td>
+    <td><span class="tag ${isNew?'new-tag':''}">${entry.source||'—'}</span></td>
+    <td style="color:var(--text2)">${entry.category||'—'}</td>
+    <td style="color:var(--text3)">${fmtDate(entry.date)}</td>
+  `;
+  tbody.appendChild(tr);
+  if (isNew) tr.scrollIntoView({behavior:'smooth',block:'nearest'});
+  $('db-count').textContent = `${tbody.children.length} vectors`;
+}
+function rebuildTable() {
+  $('vdb-tbody').innerHTML = '';
+  ST.db.forEach(e => addTableRow(e, false));
+  $('db-count').textContent = `${ST.db.length} vectors`;
+}
+function highlightRows(ids) {
+  document.querySelectorAll('#vdb-tbody tr').forEach(tr => {
+    tr.classList.toggle('lit', ids.includes(tr.dataset.id));
+  });
+}
+function clearHighlightRows() {
+  document.querySelectorAll('#vdb-tbody tr').forEach(tr => tr.classList.remove('lit'));
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  ADD ENTRY                                                   */
+/* ─────────────────────────────────────────────────────────── */
+async function addEntry() {
+  const text = $('add-text').value.trim();
+  if (!text) { toast('Enter some text first'); return; }
+  if (!ST.embedder) { toast('Embedding model not ready'); return; }
+  $('add-btn').disabled = true;
+  $('add-btn').textContent = 'Embedding…';
+  $('embed-prog').classList.add('show');
+  $('embed-prog-txt').textContent = 'Computing embedding…';
+  // Animate embed node active
+  FE.setStatus('embed', 'active');
+  // Fake progress
+  let pct = 0;
+  const progTimer = setInterval(() => {
+    pct = Math.min(pct + 8, 90);
+    $('embed-prog-fill').style.width = pct + '%';
+  }, 120);
+  try {
+    const vec = await embed(text);
+    clearInterval(progTimer);
+    $('embed-prog-fill').style.width = '100%';
+    FE.setStatus('embed', 'done');
+    FE.setStatus('search', 'active');
+    const entry = {
+      id: Date.now().toString(36) + Math.random().toString(36).slice(2,6),
+      text, vec,
+      source:   $('add-source').value.trim()   || 'manual',
+      category: $('add-category').value.trim() || 'general',
+      date:     new Date().toISOString(),
+    };
+    ST.db.push(entry);
+    await idbPut(entry);
+    addTableRow(entry, true);
+    // Animate edge
+    await FE.animEdgePromise('embed','search');
+    FE.setStatus('search','done');
+    setTimeout(() => FE.setAllIdle(), 800);
+    toast(`✅ Stored "${text.slice(0,35)}…" in vector DB`);
+    $('add-text').value = '';
+  } catch(e) {
+    clearInterval(progTimer);
+    toast('❌ Error: '+e.message, 5000);
+    console.error(e);
+    FE.setAllIdle();
+  }
+  $('embed-prog').classList.remove('show');
+  $('embed-prog-fill').style.width = '0';
+  $('add-btn').disabled = false;
+  $('add-btn').textContent = '＋ Embed & Add to Vector DB';
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  RETRIEVAL UI                                               */
+/* ─────────────────────────────────────────────────────────── */
+function renderRetList(items, listId, isReranked=false) {
+  const el = $(listId);
+  el.innerHTML = '';
+  if (!items || items.length === 0) {
+    el.innerHTML = `<div class="empty"><div class="empty-icon">${isReranked?'🔄':'📚'}</div><span>No results</span></div>`;
+    return;
+  }
+  items.forEach((item, i) => {
+    const div = document.createElement('div');
+    div.className = `ret-item${isReranked?' selected':''}`;
+    div.dataset.id = item.id;
+    const score = isReranked ? (item.rerankScore ?? item.score) : item.score;
+    const scorePct = Math.min(100, Math.abs(score) * 100);
+    div.innerHTML = `
+      <div class="ret-rank">#${i+1}</div>
+      <div class="ret-text">${item.text}</div>
+      <div class="ret-foot">
+        <span class="ret-meta">${item.source||'?'} · ${item.category||'?'}</span>
+        <div class="score-bar"><div class="score-fill" style="width:0%"></div></div>
+        <span class="score-pct">${(score*100).toFixed(1)}%</span>
+      </div>
+    `;
+    setTimeout(() => {
+      div.classList.add(isReranked ? 'selected' : 'lit');
+      div.querySelector('.score-fill').style.width = scorePct + '%';
+    }, i * 90);
+    el.appendChild(div);
+  });
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  CHAT UI                                                     */
+/* ─────────────────────────────────────────────────────────── */
+function chatMsg(role, text, ctxItems=[]) {
+  const c = $('chat-messages');
+  $('chat-empty')?.remove();
+  const div = document.createElement('div');
+  div.className = `msg ${role}`;
+  let chips = '';
+  if (ctxItems.length > 0) {
+    chips = `<div class="ctx-chips">${ctxItems.map(c=>`<span class="ctx-chip">📄 ${c.source||'chunk'}</span>`).join('')}</div>`;
+  }
+  div.innerHTML = `
+    <div class="msg-bubble">${text.replace(/</g,'&lt;').replace(/\n/g,'<br>')}</div>
+    ${chips}
+    <div class="msg-time">${new Date().toLocaleTimeString()}</div>
+  `;
+  c.appendChild(div);
+  c.scrollTop = c.scrollHeight;
+  return div;
+}
+let typingEl = null;
+function showTyping() {
+  const c = $('chat-messages');
+  typingEl = document.createElement('div');
+  typingEl.className = 'msg assistant';
+  typingEl.id = '__typing';
+  typingEl.innerHTML = `<div class="msg-bubble"><div class="typing"><i></i><i></i><i></i></div></div>`;
+  c.appendChild(typingEl);
+  c.scrollTop = c.scrollHeight;
+}
+function removeTyping() { $('__typing')?.remove(); typingEl = null; }
+/* ─────────────────────────────────────────────────────────── */
+/*  RAG PIPELINE                                               */
+/* ─────────────────────────────────────────────────────────── */
+async function runRAG(query) {
+  if (ST.busy) return;
+  if (!ST.embedder) { toast('Embedding model not loaded yet'); return; }
+  ST.busy = true;
+  $('send-btn').disabled = true;
+  $('chat-status').textContent = 'processing…';
+  $('ret-status').textContent  = 'searching…';
+  chatMsg('user', query);
+  showTyping();
+  // Clear retrieval panels
+  $('ret-list').innerHTML    = `<div class="empty"><div class="empty-icon">⏳</div><span>Searching…</span></div>`;
+  $('rerank-list').innerHTML = `<div class="empty"><div class="empty-icon">⏳</div><span>Waiting…</span></div>`;
+  clearHighlightRows();
+  FE.setAllIdle();
+  try {
+    /* ── 1. Query node ── */
+    FE.setStatus('query','active');
+    await sleep(200);
+    FE.setStatus('query','done');
+    await FE.animEdgePromise('query','embed');
+    /* ── 2. Embed query ── */
+    FE.setStatus('embed','active');
+    $('chat-status').textContent = 'embedding query…';
+    const qVec = await embed(query);
+    FE.setStatus('embed','done');
+    await FE.animEdgePromise('embed','search');
+    /* ── 3. Vector search ── */
+    FE.setStatus('search','active');
+    $('chat-status').textContent = 'vector search…';
+    await sleep(150);
+    const retrieved = vecSearch(qVec, CFG.topK);
+    FE.setStatus('search','done');
+    await FE.animEdgePromise('search','topk');
+    /* ── 4. Top-K ── */
+    FE.setStatus('topk','active');
+    $('ret-k-badge').textContent = `k=${retrieved.length}`;
+    renderRetList(retrieved,'ret-list',false);
+    highlightRows(retrieved.map(r=>r.id));
+    await sleep(400);
+    FE.setStatus('topk','done');
+    await FE.animEdgePromise('topk','rerank');
+    /* ── 5. Rerank ── */
+    FE.setStatus('rerank','active');
+    $('ret-status').textContent = 'reranking…';
+    $('chat-status').textContent = 'reranking…';
+    const reranked = await rerank(query, retrieved);
+    $('rerank-k-badge').textContent = `k=${reranked.length}`;
+    renderRetList(reranked,'rerank-list',true);
+    FE.setStatus('rerank','done');
+    await FE.animEdgePromise('rerank','llm');
+    /* ── 6. LLM ── */
+    FE.setStatus('llm','active');
+    $('chat-status').textContent = 'generating…';
+    const context = reranked.length > 0 ? reranked : retrieved.slice(0, CFG.topKRerank);
+    const answer  = await generate(query, context);
+    FE.setStatus('llm','done');
+    await FE.animEdgePromise('llm','answer');
+    /* ── 7. Answer ── */
+    FE.setStatus('answer','active');
+    removeTyping();
+    chatMsg('assistant', answer, context);
+    FE.setStatus('answer','done');
+  } catch(e) {
+    removeTyping();
+    chatMsg('assistant', '❌ Pipeline error: '+e.message);
+    console.error(e);
+    FE.setAllIdle();
+  }
+  $('send-btn').disabled = false;
+  $('chat-status').textContent = 'idle';
+  $('ret-status').textContent  = 'idle';
+  ST.busy = false;
+  clearHighlightRows();
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  SAMPLE DATA                                               */
+/* ─────────────────────────────────────────────────────────── */
+async function insertSamples() {
+  toast('Adding sample documents…', 5000);
+  const samples = [
+    { text:'The Eiffel Tower in Paris was built in 1889 by Gustave Eiffel for the World Fair. It stands 330 metres tall.', source:'wiki.txt', category:'history' },
+    { text:'Machine learning is a branch of AI that enables systems to learn from data without being explicitly programmed.', source:'ml-intro.md', category:'tech' },
+    { text:'The Amazon River carries more water than any other river on Earth and drains into the Atlantic Ocean.', source:'geo.txt', category:'geography' },
+    { text:'Python is a high-level interpreted language prized for readability, used widely in data science and web development.', source:'prog.md', category:'tech' },
+    { text:'The speed of light in a vacuum is exactly 299,792,458 metres per second, a fundamental constant of nature.', source:'physics.txt', category:'science' },
+    { text:'Transformers are a neural network architecture introduced in "Attention is All You Need" (2017). Self-attention is core.', source:'dl-paper.txt', category:'AI' },
+    { text:'Retrieval-Augmented Generation (RAG) combines a retriever to find relevant passages with a language model to generate answers.', source:'rag-overview.md', category:'AI' },
+  ];
+  for (const s of samples) {
+    FE.setStatus('embed','active');
+    const vec = await embed(s.text);
+    FE.setStatus('embed','done');
+    const entry = {
+      id: Date.now().toString(36)+Math.random().toString(36).slice(2,5),
+      text: s.text, vec, source: s.source, category: s.category,
+      date: new Date().toISOString()
+    };
+    ST.db.push(entry);
+    await idbPut(entry);
+    addTableRow(entry, true);
+    await sleep(80);
+  }
+  FE.setAllIdle();
+  toast('✅ Sample documents loaded. Try asking a question!', 4000);
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  NODE FLOW EDITOR                                           */
+/* ─────────────────────────────────────────────────────────── */
+class FlowEditor {
+  constructor() {
+    this.canvas = $('flow-canvas');
+    this.ctx    = this.canvas.getContext('2d');
+    this.dpr    = Math.min(window.devicePixelRatio || 1, 2);
+    this.W = 0; this.H = 0;
+    this.selectedId = null;
+    this.particles  = [];
+    this.nodes = [
+      { id:'query',  label:'Query',         icon:'📝', color:'#a855f7',
+        settings:{ Type:'User Input', Description:'Raw text question from user' }},
+      { id:'embed',  label:'Embed Query',   icon:'🔢', color:'#00e5ff',
+        settings:{ Model:CFG.embedModel, Dims:384, Pooling:'mean', Normalize:true }},
+      { id:'search', label:'Vector Search', icon:'🗄️', color:'#ffaa00',
+        settings:{ Metric:'Cosine', 'Top-K':CFG.topK, Index:'Flat (in-memory)' }},
+      { id:'topk',   label:'Top-K Select',  icon:'📊', color:'#f472b6',
+        settings:{ K:CFG.topK, Threshold:'0.0', Dedup:'false' }},
+      { id:'rerank', label:'Rerank',        icon:'🔄', color:'#00ff88',
+        settings:{ Model:CFG.rerankModel, Type:'Cross-Encoder', 'Keep':CFG.topKRerank }},
+      { id:'llm',    label:'LLM',           icon:'🤖', color:'#fb923c',
+        settings:{ Model:CFG.llmModel, MaxTokens:CFG.maxTokens, Sample:false }},
+      { id:'answer', label:'Answer',        icon:'💬', color:'#34d399',
+        settings:{ Format:'Text', Grounded:true, Sources:'Top reranked chunks' }},
+    ];
+    this.edges = [
+      ['query','embed'],['embed','search'],['search','topk'],
+      ['topk','rerank'],['rerank','llm'],['llm','answer']
+    ];
+    this.statuses = {};
+    this.nodes.forEach(n => this.statuses[n.id] = 'idle');
+    this.resize();
+    window.addEventListener('resize', () => this.resize());
+    this.canvas.addEventListener('click', e => this.onClick(e));
+    this.raf();
+  }
+  resize() {
+    const wrap = this.canvas.parentElement;
+    const rect  = wrap.getBoundingClientRect();
+    this.W = rect.width; this.H = rect.height;
+    this.canvas.width  = this.W * this.dpr;
+    this.canvas.height = this.H * this.dpr;
+    this.canvas.style.cssText = `width:${this.W}px;height:${this.H}px;`;
+    this.ctx.scale(this.dpr, this.dpr);
+    this.layout();
+  }
+  layout() {
+    const n = this.nodes.length;
+    const nW = 110, nH = 68;
+    const pad = 28;
+    const gap = (this.W - pad*2 - n*nW) / (n - 1);
+    this.nodes.forEach((node, i) => {
+      node.x = pad + i*(nW+gap);
+      node.y = (this.H - nH) / 2;
+      node.w = nW; node.h = nH;
+    });
+  }
+  draw() {
+    const { ctx, W, H } = this;
+    ctx.clearRect(0, 0, W, H);
+    // Grid
+    ctx.save();
+    ctx.strokeStyle = 'rgba(29,50,84,0.35)';
+    ctx.lineWidth = 1;
+    for (let x = 0; x < W; x += 28) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke(); }
+    for (let y = 0; y < H; y += 28) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(W,y); ctx.stroke(); }
+    ctx.restore();
+    // Edges
+    this.edges.forEach(([fId,tId]) => {
+      const fn = this.nodeById(fId), tn = this.nodeById(tId);
+      const fx = fn.x+fn.w, fy = fn.y+fn.h/2;
+      const tx = tn.x,      ty = tn.y+tn.h/2;
+      const cx = (fx+tx)/2;
+      ctx.beginPath();
+      ctx.moveTo(fx,fy);
+      ctx.bezierCurveTo(cx,fy,cx,ty,tx,ty);
+      ctx.strokeStyle = 'rgba(29,50,84,0.9)';
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    });
+    // Particles
+    this.particles.forEach(p => {
+      const fn = this.nodeById(p.from), tn = this.nodeById(p.to);
+      const fx = fn.x+fn.w, fy = fn.y+fn.h/2;
+      const tx = tn.x,      ty = tn.y+tn.h/2;
+      const cx = (fx+tx)/2;
+      const pt = this.bezPt(fx,fy,cx,fy,cx,ty,tx,ty,p.t);
+      const grd = ctx.createRadialGradient(pt.x,pt.y,0,pt.x,pt.y,10);
+      grd.addColorStop(0, fn.color+'cc');
+      grd.addColorStop(1, 'transparent');
+      ctx.beginPath(); ctx.arc(pt.x,pt.y,10,0,Math.PI*2);
+      ctx.fillStyle = grd; ctx.fill();
+      ctx.beginPath(); ctx.arc(pt.x,pt.y,3,0,Math.PI*2);
+      ctx.fillStyle = fn.color; ctx.fill();
+    });
+    // Nodes
+    this.nodes.forEach(n => this.drawNode(n));
+  }
+  drawNode(n) {
+    const { ctx } = this;
+    const { x, y, w, h, color } = n;
+    const st = this.statuses[n.id];
+    const sel = this.selectedId === n.id;
+    // Glow
+    if (st === 'active') { ctx.shadowColor = color; ctx.shadowBlur = 18; }
+    else if (sel)         { ctx.shadowColor = color; ctx.shadowBlur = 10; }
+    // BG
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, h, 7);
+    ctx.fillStyle = st==='active' ? color+'1a' : st==='done' ? '#001f14' : '#0b1a2e';
+    ctx.fill();
+    ctx.shadowBlur = 0;
+    // Border
+    ctx.beginPath();
+    ctx.roundRect(x, y, w, h, 7);
+    ctx.strokeStyle = st==='idle'  ? '#1d3254' :
+                      st==='active'? color :
+                      st==='done'  ? '#00ff88' : color;
+    ctx.lineWidth = sel ? 2.5 : (st==='active' ? 2 : 1.5);
+    ctx.stroke();
+    // Status dot
+    const dotColor = { idle:'#1d3254', loading:CFG.amber, active:color, done:'#00ff88' }[st] || '#1d3254';
+    ctx.beginPath(); ctx.arc(x+w-9, y+9, 4, 0, Math.PI*2);
+    ctx.fillStyle = dotColor; ctx.fill();
+    if (st==='active') {
+      ctx.beginPath(); ctx.arc(x+w-9, y+9, 7, 0, Math.PI*2);
+      ctx.strokeStyle = dotColor+'55'; ctx.lineWidth=2; ctx.stroke();
     }
+    // Icon
+    ctx.font = '18px serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(n.icon, x+w/2, y+h/2-3);
+    // Label
+    ctx.font = `500 10px 'JetBrains Mono', monospace`;
+    ctx.fillStyle = st==='active' ? color : '#3d5a7a';
+    ctx.fillText(n.label, x+w/2, y+h-11);
+    // Mini status
+    if (st !== 'idle') {
+      const lbl = { loading:'loading…', active:'processing', done:'done ✓' }[st] || '';
+      ctx.font = `8px 'JetBrains Mono', monospace`;
+      ctx.fillStyle = dotColor;
+      ctx.fillText(lbl, x+w/2, y+h-2);
     }
+  }
+  bezPt(x0,y0,cx1,cy1,cx2,cy2,x1,y1,t) {
+    const m=1-t;
+    return {
+      x: m*m*m*x0+3*m*m*t*cx1+3*m*t*t*cx2+t*t*t*x1,
+      y: m*m*m*y0+3*m*m*t*cy1+3*m*t*t*cy2+t*t*t*y1
+    };
+  }
+  onClick(e) {
+    const r   = this.canvas.getBoundingClientRect();
+    const mx  = e.clientX-r.left, my = e.clientY-r.top;
+    const hit = this.nodes.find(n => mx>=n.x&&mx<=n.x+n.w&&my>=n.y&&my<=n.y+n.h);
+    if (hit) {
+      this.selectedId = hit.id;
+      this.openSettings(hit);
+    } else {
+      this.selectedId = null;
+      $('node-settings').classList.remove('open');
     }
+  }
+  openSettings(node) {
+    const panel = $('node-settings');
+    $('ns-title').textContent = `${node.icon} ${node.label}`;
+    $('ns-title').style.color = node.color;
+    $('ns-body').innerHTML = Object.entries(node.settings).map(([k,v]) => `
+      <div class="ns-row">
+        <div class="ns-label">${k}</div>
+        <input class="ns-input" value="${v}" data-node="${node.id}" data-key="${k}"
+               onchange="window.FE.onSettingChange(this)">
+      </div>
+    `).join('');
+    panel.classList.add('open');
+  }
+  onSettingChange(input) {
+    const nodeId = input.dataset.node, key = input.dataset.key, val = input.value;
+    const node = this.nodeById(nodeId);
+    if (node) node.settings[key] = val;
+    // Apply live
+    if (nodeId==='search' && key==='Top-K')  CFG.topK = parseInt(val)||5;
+    if (nodeId==='rerank' && key==='Keep')    CFG.topKRerank = parseInt(val)||3;
+    if (nodeId==='llm'    && key==='MaxTokens') CFG.maxTokens = parseInt(val)||180;
+  }
+  setStatus(id, st) { this.statuses[id] = st; }
+  setAllIdle() {
+    this.nodes.forEach(n => this.statuses[n.id] = 'idle');
+    this.particles = [];
+  }
+  animEdgePromise(from, to) {
+    return new Promise(resolve => {
+      const p = { from, to, t: 0, speed: 0.03, done: resolve };
+      this.particles.push(p);
     });
+  }
+  nodeById(id) { return this.nodes.find(n=>n.id===id); }
+  raf() {
+    // Advance particles
+    this.particles = this.particles.filter(p => {
+      p.t += p.speed;
+      if (p.t >= 1) { p.done?.(); return false; }
+      return true;
+    });
+    this.draw();
+    requestAnimationFrame(() => this.raf());
+  }
+}
+/* ─────────────────────────────────────────────────────────── */
+/*  EXPOSE & WIRE UP                                           */
+/* ─────────────────────────────────────────────────────────── */
+window.FE = null;
+function closeSettings() {
+  $('node-settings').classList.remove('open');
+  if (window.FE) window.FE.selectedId = null;
+}
+window.closeSettings = closeSettings;
+/* ─────────────────────────────────────────────────────────── */
+/*  MAIN INIT                                                  */
+/* ─────────────────────────────────────────────────────────── */
+async function main() {
+  // Node editor
+  window.FE = new FlowEditor();
+  // IndexedDB
+  try {
+    await openIDB();
+    const saved = await idbGetAll();
+    ST.db = saved;
+    rebuildTable();
+  } catch(e) {
+    console.warn('IndexedDB unavailable:', e.message);
+  }
+  // Send button
+  $('send-btn').addEventListener('click', () => {
+    const q = $('chat-input').value.trim();
+    if (q) { $('chat-input').value=''; runRAG(q); }
+  });
+  $('chat-input').addEventListener('keydown', e => {
+    if (e.key==='Enter' && !e.shiftKey && !ST.busy) {
+      const q = $('chat-input').value.trim();
+      if (q) { $('chat-input').value=''; runRAG(q); }
+    }
+  });
+  // Add entry
+  $('add-btn').addEventListener('click', addEntry);
+  // Load models
+  await loadModels();
+}
+main();
+</script>
+</body>
+</html>