npm - llm-kb - Versions diffs - 0.4.2 → 0.6.0 - Mend

llm-kb 0.4.2 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md +11 -6
package/bin/{chunk-DHOXVEIR.js → chunk-3WBSKCCH.js} +96 -119
package/bin/chunk-EZ7LPPEP.js +218 -0
package/bin/chunk-Y2764FFH.js +1356 -0
package/bin/cli.js +385 -874
package/bin/{indexer-KSYRIVVN.js → indexer-K37QM2HP.js} +2 -1
package/bin/public/index.html +949 -0
package/bin/server-QC5SN6T4.js +1069 -0
package/package.json +4 -3

package/bin/public/index.html ADDED Viewed

@@ -0,0 +1,949 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>llm-kb</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; overflow: hidden; }
+    body { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: #4a4340; background: #f8f6f3; -webkit-font-smoothing: antialiased; }
+    :root { --paper:#f8f6f3; --paper-warm:#f2efe9; --paper-dim:#e8e4dd; --ink:#1a1520; --ink-soft:#4a4340; --ink-faint:#7a7470; --mid:#9b9590; --mid-light:#c4bfb8; --purple:#4F2D7F; --purple-soft:#6B4C9A; --purple-bg:#2A1845; --teal:#0d7d85; --good:#2d8a4e; --warn:#b87a00; --urgent:#c41d2e; }
+    .font-serif { font-family: 'Fraunces', Georgia, serif; }
+    .font-mono { font-family: 'JetBrains Mono', monospace; }
+    /* ── Layout ─── */
+    #app { display: flex; height: 100vh; }
+    #sidebar { width: 220px; min-width: 220px; background: var(--purple-bg); color: rgba(255,255,255,0.7); display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.08); }
+    #sidebar-brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+    #sidebar-brand h1 { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 700; color: white; }
+    #sidebar-brand .subtitle { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 4px; }
+    .nav-section-label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.25); padding: 8px 8px 4px; }
+    .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 450; color: rgba(255,255,255,0.55); cursor: pointer; transition: all 0.15s; text-decoration: none; border: none; background: none; width: 100%; text-align: left; }
+    .nav-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
+    .nav-item.active { background: rgba(255,255,255,0.1); color: white; font-weight: 550; }
+    #sidebar-nav { padding: 8px 12px; }
+    #sessions-list { flex: 1; overflow-y: auto; padding: 4px 12px; }
+    .session-item { display: block; width: 100%; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: rgba(255,255,255,0.55); cursor: pointer; transition: all 0.15s; text-align: left; border: none; background: none; }
+    .session-item:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
+    .session-item .title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .session-item .meta { font-size: 10.5px; color: rgba(255,255,255,0.25); margin-top: 2px; }
+    #sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
+    #new-chat-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px; border-radius: 6px; font-size: 13px; font-weight: 550; color: white; background: rgba(255,255,255,0.1); border: none; cursor: pointer; transition: all 0.15s; }
+    #new-chat-btn:hover { background: rgba(255,255,255,0.15); }
+    /* ── Main ─── */
+    #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+    #header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-bottom: 1px solid var(--paper-dim); }
+    .tab { padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-faint); cursor: pointer; border: none; background: none; transition: all 0.15s; }
+    .tab:hover { background: var(--paper-warm); color: var(--ink-soft); }
+    .tab.active { background: var(--paper-warm); color: var(--ink); font-weight: 600; }
+    #chat-container { flex: 1; overflow-y: auto; padding: 24px; }
+    #chat-messages { max-width: 720px; margin: 0 auto; }
+    #welcome { text-align: center; padding: 80px 20px; }
+    #welcome h2 { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 600; color: var(--ink); }
+    #welcome p { margin-top: 8px; font-size: 14px; color: var(--ink-faint); max-width: 400px; margin-left: auto; margin-right: auto; }
+    #input-area { padding: 4px 24px 16px; }
+    #input-bar { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--paper-dim); background: white; border-radius: 999px; padding: 8px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.15s; }
+    #input-bar:focus-within { border-color: var(--mid-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+    #input-bar input { flex: 1; border: none; outline: none; font-size: 14px; color: var(--ink); background: transparent; }
+    #input-bar input::placeholder { color: var(--mid); }
+    #send-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--paper-dim); color: var(--mid-light); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; font-size: 14px; }
+    #send-btn.ready { background: var(--purple); color: white; }
+    #send-btn.ready:hover { background: var(--purple-soft); }
+    #status-bar { padding: 8px 24px; border-top: 1px solid var(--paper-dim); font-size: 11px; color: var(--mid); text-align: center; }
+    #status-bar .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--good); margin-right: 4px; vertical-align: middle; }
+    /* ── Messages ─── */
+    .msg-user { display: flex; justify-content: flex-end; margin-bottom: 16px; }
+    .msg-user .bubble { max-width: 75%; background: var(--purple); color: white; padding: 10px 16px; border-radius: 16px 16px 4px 16px; font-size: 14px; line-height: 1.5; }
+    .msg-assistant { margin-bottom: 16px; max-width: 85%; }
+    .msg-model { font-size: 12px; color: var(--mid); margin-bottom: 6px; }
+    .msg-thinking { margin-bottom: 8px; font-size: 13px; color: var(--ink-faint); border-left: 2px solid var(--border); padding-left: 10px; cursor: default; }
+    .msg-thinking .thinking-header { display: flex; align-items: center; gap: 8px; }
+    .msg-thinking .thinking-content { margin-top: 4px; white-space: pre-wrap; max-height: 200px; overflow-y: auto; font-size: 12px; opacity: 0.7; }
+    .msg-thinking.collapsed .thinking-content { max-height: 1.4em; overflow: hidden; cursor: pointer; }
+    .msg-thinking.collapsed .msg-thinking-text::after { content: ' (click to expand)'; font-size: 11px; opacity: 0.5; }
+    .msg-thinking.empty .thinking-content { display: none; }
+    .msg-thinking.empty .msg-thinking-text::after { content: ''; }
+    .thinking-dots { display: flex; gap: 3px; }
+    .thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: bounce 1.4s ease-in-out infinite; }
+    .thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
+    .thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
+    @keyframes bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
+    .msg-tool { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 4px; border: 1px solid var(--paper-dim); background: white; border-radius: 8px; font-size: 13px; color: var(--ink-soft); }
+    .tool-elapsed { margin-left: auto; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+    .tool-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+    .tool-dot.running { background: var(--teal); animation: pulse 1.5s ease-in-out infinite; }
+    .tool-dot.done { background: var(--good); }
+    .tool-dot.error { background: var(--urgent); }
+    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
+    .msg-answer { background: var(--paper-warm); padding: 12px 16px; border-radius: 16px 16px 16px 4px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
+    .msg-answer h1,.msg-answer h2,.msg-answer h3 { font-family:'Fraunces',Georgia,serif; color:var(--ink); margin-top:12px; margin-bottom:6px; }
+    .msg-answer h1 { font-size:20px; } .msg-answer h2 { font-size:17px; } .msg-answer h3 { font-size:15px; }
+    .msg-answer p { margin: 6px 0; } .msg-answer strong { font-weight:600; color:var(--ink); }
+    .msg-answer ul,.msg-answer ol { padding-left:20px; margin:4px 0 8px; } .msg-answer li { margin:2px 0; }
+    .msg-answer code { font-family:'JetBrains Mono',monospace; font-size:12px; background:var(--paper); padding:1px 4px; border-radius:3px; }
+    .msg-answer blockquote { border-left:3px solid var(--purple); padding-left:12px; margin:8px 0; color:var(--ink-faint); font-style:italic; }
+    .msg-answer hr { border:none; border-top:1px solid var(--paper-dim); margin:12px 0; }
+    .msg-answer table { width:100%; border-collapse:collapse; margin:8px 0; font-size:13px; }
+    .msg-answer th { text-align:left; font-weight:600; padding:8px 12px; border-bottom:2px solid var(--paper-dim); background:var(--paper); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }
+    .msg-answer td { padding:6px 12px; border-bottom:1px solid var(--paper-dim); }
+    .msg-done { font-size: 11px; color: var(--mid); margin-top: 6px; }
+    .citations-block { margin-top: 12px; border-top: 1px solid var(--paper-dim); padding-top: 10px; }
+    .citation-chip { display: flex; flex-direction: column; padding: 6px 10px; margin-bottom: 4px; border-radius: 8px; cursor: pointer; transition: background 0.15s; font-size: 13px; }
+    .citation-chip:hover { background: var(--paper-warm); }
+    .citation-num { font-weight: 700; color: var(--purple); }
+    .citation-file { color: var(--teal); }
+    .citation-quote { color: var(--ink-faint); font-size: 12px; margin-top: 2px; }
+    .citation-status { font-size: 11px; margin-top: 2px; }
+    .citation-chip.active { background: white; box-shadow: inset 0 0 0 1px var(--paper-dim); }
+    .citation-link { color: var(--purple); text-decoration: none; font-weight: 600; cursor: pointer; border-bottom: 1px dotted var(--purple); }
+    .citation-link:hover { background: rgba(79, 45, 127, 0.08); border-radius: 2px; }
+    /* ── Source Viewer ─── */
+    #source-viewer { width: 0; min-width: 0; opacity: 0; pointer-events: none; overflow: hidden; display: flex; flex-direction: column; background: white; border-left: 1px solid var(--paper-dim); transition: width 0.2s ease, opacity 0.2s ease; }
+    #source-viewer.open { width: min(44vw, 560px); min-width: 380px; opacity: 1; pointer-events: auto; }
+    #source-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--paper-dim); }
+    #source-viewer-title-wrap { min-width: 0; }
+    #source-viewer-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    #source-viewer-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
+    #source-viewer-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--paper-warm); color: var(--ink-soft); cursor: pointer; font-size: 18px; line-height: 1; }
+    #source-viewer-close:hover { background: var(--paper-dim); }
+    #source-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--paper-dim); background: #fcfbf8; }
+    .viewer-nav { display: flex; gap: 8px; }
+    .viewer-btn { border: 1px solid var(--paper-dim); background: white; color: var(--ink-soft); border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
+    .viewer-btn:hover:not(:disabled) { background: var(--paper-warm); }
+    .viewer-btn:disabled { opacity: 0.45; cursor: default; }
+    #source-viewer-page-indicator { font-size: 12px; color: var(--ink-faint); }
+    #source-viewer-body { flex: 1; overflow: auto; padding: 16px; background: #fbfaf8; }
+    #source-viewer-empty, #source-viewer-loading, #source-viewer-error { display: flex; align-items: center; justify-content: center; min-height: 180px; text-align: center; font-size: 13px; color: var(--ink-faint); }
+    #source-viewer-error { color: var(--urgent); }
+    #source-viewer-canvas-wrap { display: flex; justify-content: center; align-items: flex-start; }
+    #source-viewer-page-wrap { position: relative; display: inline-block; }
+    #source-viewer-canvas { display: block; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(26, 21, 32, 0.08); }
+    #source-viewer-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
+    .source-highlight { fill: rgba(255, 200, 0, 0.5); stroke: rgba(220, 160, 0, 1); stroke-width: 2; rx: 2; animation: sourcePulse 1.8s ease-in-out infinite; }
+    @keyframes sourcePulse { 0%,100% { fill-opacity: 0.5; } 50% { fill-opacity: 0.7; } }
+    #source-viewer-empty[hidden],
+    #source-viewer-loading[hidden],
+    #source-viewer-error[hidden],
+    #source-viewer-canvas-wrap[hidden] { display: none !important; }
+    @media (max-width: 1100px) {
+      #source-viewer.open { width: 50vw; min-width: 320px; }
+    }
+    @media (max-width: 900px) {
+      #app { position: relative; }
+      #source-viewer { position: absolute; top: 0; right: 0; height: 100%; z-index: 20; box-shadow: -16px 0 40px rgba(26, 21, 32, 0.12); }
+      #source-viewer.open { width: 100%; min-width: 0; }
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <aside id="sidebar">
+      <div id="sidebar-brand"><h1 class="font-serif">llm-kb</h1><div class="subtitle">Knowledge Base</div></div>
+      <nav id="sidebar-nav">
+        <div class="nav-section-label">Navigate</div>
+        <button class="nav-item active" data-tab="chat">💬 Chat</button>
+        <button class="nav-item" data-tab="wiki">📚 Wiki</button>
+      </nav>
+      <div class="nav-section-label" style="padding:8px 20px 4px;">Sessions</div>
+      <div id="sessions-list"><div style="padding:12px 10px;font-size:12px;color:rgba(255,255,255,0.25);">Loading...</div></div>
+      <div id="sidebar-footer"><button id="new-chat-btn">+ New Chat</button></div>
+    </aside>
+    <div id="main">
+      <header id="header">
+        <div class="font-serif" style="font-size:15px;font-weight:600;color:var(--ink);">Chat</div>
+        <div id="header-tabs">
+          <button class="tab active" data-tab="chat">Chat</button>
+          <button class="tab" data-tab="wiki">Wiki</button>
+        </div>
+      </header>
+      <div id="chat-container">
+        <div id="chat-messages">
+          <div id="welcome">
+            <h2 class="font-serif">What would you like to investigate?</h2>
+            <p>Ask about any document in the knowledge base. Answers include verified citations with bounding boxes.</p>
+          </div>
+        </div>
+      </div>
+      <div id="input-area">
+        <div id="input-bar">
+          <input type="text" id="chat-input" placeholder="Ask anything..." autocomplete="off" />
+          <button id="send-btn" aria-label="Send">↑</button>
+        </div>
+      </div>
+      <div id="status-bar"><span class="dot"></span><span id="status-text">Connecting...</span></div>
+    </div>
+    <aside id="source-viewer" aria-hidden="true">
+      <div id="source-viewer-header">
+        <div id="source-viewer-title-wrap">
+          <div id="source-viewer-title">Source Viewer</div>
+          <div id="source-viewer-meta">Click a citation to inspect the original page.</div>
+        </div>
+        <button id="source-viewer-close" aria-label="Close source viewer">×</button>
+      </div>
+      <div id="source-viewer-toolbar">
+        <div class="viewer-nav">
+          <button class="viewer-btn" id="source-viewer-prev">← Prev</button>
+          <button class="viewer-btn" id="source-viewer-next">Next →</button>
+        </div>
+        <div id="source-viewer-page-indicator">Page —</div>
+      </div>
+      <div id="source-viewer-body">
+        <div id="source-viewer-empty">Click any citation chip to open the cited PDF page here.</div>
+        <div id="source-viewer-loading" hidden>Loading PDF…</div>
+        <div id="source-viewer-error" hidden></div>
+        <div id="source-viewer-canvas-wrap" hidden>
+          <div id="source-viewer-page-wrap">
+            <canvas id="source-viewer-canvas"></canvas>
+            <svg id="source-viewer-overlay" aria-hidden="true"></svg>
+          </div>
+        </div>
+      </div>
+    </aside>
+  </div>
+<script>
+// ── State ────────────────────────────────────────────────────
+let ws = null;
+let ready = false;
+let streaming = false;
+let currentAssistant = null; // DOM container for current assistant response
+let answerEl = null;         // current answer bubble element
+let answerText = '';         // raw accumulated markdown
+let viewerPdf = null;        // active PDF document in Source Viewer
+let viewerFile = '';         // current PDF filename
+let viewerPage = 1;          // current page number in Source Viewer
+let viewerCitation = null;   // current citation shown in Source Viewer
+let activeCitationChip = null;
+let resizeTimer = null;
+const messagesEl = document.getElementById('chat-messages');
+const chatContainer = document.getElementById('chat-container');
+const input = document.getElementById('chat-input');
+const sendBtn = document.getElementById('send-btn');
+const statusText = document.getElementById('status-text');
+const welcomeEl = document.getElementById('welcome');
+const sourceViewerEl = document.getElementById('source-viewer');
+const sourceViewerTitle = document.getElementById('source-viewer-title');
+const sourceViewerMeta = document.getElementById('source-viewer-meta');
+const sourceViewerPageIndicator = document.getElementById('source-viewer-page-indicator');
+const sourceViewerBody = document.getElementById('source-viewer-body');
+const sourceViewerEmpty = document.getElementById('source-viewer-empty');
+const sourceViewerLoading = document.getElementById('source-viewer-loading');
+const sourceViewerError = document.getElementById('source-viewer-error');
+const sourceViewerCanvasWrap = document.getElementById('source-viewer-canvas-wrap');
+const sourceViewerCanvas = document.getElementById('source-viewer-canvas');
+const sourceViewerOverlay = document.getElementById('source-viewer-overlay');
+const sourceViewerPageWrap = document.getElementById('source-viewer-page-wrap');
+const sourceViewerPrevBtn = document.getElementById('source-viewer-prev');
+const sourceViewerNextBtn = document.getElementById('source-viewer-next');
+const sourceViewerCloseBtn = document.getElementById('source-viewer-close');
+if (window.pdfjsLib) {
+  window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+}
+// ── WebSocket ────────────────────────────────────────────────
+function connectWS() {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  ws = new WebSocket(`${protocol}//${location.host}/ws/chat`);
+  ws.onopen = () => { statusText.textContent = 'Connecting to agent...'; };
+  ws.onmessage = (evt) => {
+    const data = JSON.parse(evt.data);
+    handleEvent(data);
+  };
+  ws.onclose = () => {
+    ready = false;
+    statusText.textContent = 'Disconnected — reconnecting...';
+    document.querySelector('#status-bar .dot').style.background = 'var(--urgent)';
+    setTimeout(connectWS, 2000);
+  };
+}
+function handleEvent(data) {
+  switch (data.type) {
+    case 'connected':
+      statusText.textContent = 'Initializing session...';
+      break;
+    case 'ready':
+      ready = true;
+      streaming = false;
+      document.querySelector('#status-bar .dot').style.background = 'var(--good)';
+      loadStatus();
+      break;
+    case 'error':
+      addSystemMessage('Error: ' + data.message);
+      streaming = false;
+      input.disabled = false;
+      break;
+    // ── Agent streaming events ───
+    case 'status':
+      ensureAssistant();
+      currentAssistant.querySelector('.msg-model').textContent = '⟡ ' + data.model;
+      break;
+    case 'thinking_start':
+      ensureAssistant();
+      if (answerEl) answerEl = null; // new phase — allow new answer bubble
+      showThinking(true);
+      break;
+    case 'thinking_delta':
+      appendThinkingText(data.text);
+      break;
+    case 'thinking_end':
+      collapseThinking();
+      break;
+    case 'tool_start':
+      ensureAssistant();
+      if (answerEl) answerEl = null; // new phase — allow new answer bubble after tools
+      addToolCard(data.id, data.label, data.name);
+      break;
+    case 'tool_end':
+      updateToolCard(data.id, data.isError);
+      break;
+    case 'text_start':
+      ensureAssistant();
+      ensureAnswerBubble();
+      break;
+    case 'text_delta':
+      ensureAnswerBubble();
+      answerText += data.text;
+      renderAnswer();
+      scrollToBottom();
+      break;
+    case 'text_end':
+      renderAnswer();
+      break;
+    case 'citations':
+      renderCitations(data.data);
+      preloadCitationPdfs(data.data);
+      break;
+    case 'done':
+      finishResponse(data);
+      streaming = false;
+      input.disabled = false;
+      input.focus();
+      break;
+  }
+}
+// ── Send ─────────────────────────────────────────────────────
+function sendMessage(text) {
+  if (!ready) { addSystemMessage('Session still initializing, please wait...'); return; }
+  if (streaming || !text.trim()) return;
+  if (welcomeEl) { welcomeEl.remove(); }
+  streaming = true;
+  input.disabled = true;
+  // Add user bubble
+  const div = document.createElement('div');
+  div.className = 'msg-user';
+  div.innerHTML = `<div class="bubble">${escapeHtml(text)}</div>`;
+  messagesEl.appendChild(div);
+  scrollToBottom();
+  // Reset assistant state
+  currentAssistant = null;
+  answerEl = null;
+  answerText = '';
+  answerSegments = [];
+  activeThinkingEl = null;
+  ws.send(JSON.stringify({ type: 'message', text }));
+}
+input.addEventListener('input', () => {
+  sendBtn.classList.toggle('ready', input.value.trim().length > 0);
+});
+input.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && input.value.trim()) {
+    sendMessage(input.value.trim());
+    input.value = '';
+    sendBtn.classList.remove('ready');
+  }
+});
+sendBtn.addEventListener('click', () => {
+  if (input.value.trim()) {
+    sendMessage(input.value.trim());
+    input.value = '';
+    sendBtn.classList.remove('ready');
+  }
+});
+// ── DOM builders ─────────────────────────────────────────────
+function ensureAssistant() {
+  if (currentAssistant) return;
+  currentAssistant = document.createElement('div');
+  currentAssistant.className = 'msg-assistant';
+  currentAssistant.innerHTML = `<div class="msg-model font-mono">⟡</div>`;
+  messagesEl.appendChild(currentAssistant);
+}
+let activeThinkingEl = null;
+function showThinking(show) {
+  if (!currentAssistant) return;
+  if (show) {
+    const el = document.createElement('div');
+    el.className = 'msg-thinking';
+    el.innerHTML = `<div class="thinking-header"><div class="thinking-dots"><span></span><span></span><span></span></div><span class="msg-thinking-text">Thinking</span></div><div class="thinking-content"></div>`;
+    currentAssistant.appendChild(el);
+    activeThinkingEl = el;
+    scrollToBottom();
+  }
+}
+function appendThinkingText(text) {
+  if (!activeThinkingEl) return;
+  const content = activeThinkingEl.querySelector('.thinking-content');
+  if (content) {
+    content.textContent += text;
+    scrollToBottom();
+  }
+}
+function collapseThinking() {
+  if (!activeThinkingEl) return;
+  const dots = activeThinkingEl.querySelector('.thinking-dots');
+  if (dots) dots.remove();
+  const content = activeThinkingEl.querySelector('.thinking-content');
+  if (content && content.textContent.trim().length > 0) {
+    // Collapse to show first line with toggle
+    activeThinkingEl.classList.add('collapsed');
+    activeThinkingEl.onclick = () => activeThinkingEl.classList.toggle('collapsed');
+  } else {
+    // No thinking text — just show "Thought" label
+    activeThinkingEl.classList.add('collapsed');
+    activeThinkingEl.classList.add('empty');
+  }
+  activeThinkingEl = null;
+}
+const toolTimers = {};
+function addToolCard(id, label, name) {
+  if (!currentAssistant) return;
+  const el = document.createElement('div');
+  el.className = 'msg-tool';
+  el.dataset.toolId = id;
+  el.innerHTML = `<span class="tool-dot running"></span><span>${escapeHtml(label)}</span><span class="tool-elapsed"></span>`;
+  currentAssistant.appendChild(el);
+  scrollToBottom();
+  // Start elapsed timer
+  const start = Date.now();
+  const timerEl = el.querySelector('.tool-elapsed');
+  toolTimers[id] = setInterval(() => {
+    const secs = ((Date.now() - start) / 1000).toFixed(0);
+    timerEl.textContent = `${secs}s`;
+  }, 1000);
+}
+function updateToolCard(id, isError) {
+  if (!currentAssistant) return;
+  // Stop timer
+  if (toolTimers[id]) { clearInterval(toolTimers[id]); delete toolTimers[id]; }
+  const el = currentAssistant.querySelector(`.msg-tool[data-tool-id="${id}"]`);
+  if (!el) return;
+  const dot = el.querySelector('.tool-dot');
+  if (dot) { dot.classList.remove('running'); dot.classList.add(isError ? 'error' : 'done'); }
+  const timer = el.querySelector('.tool-elapsed');
+  if (timer) timer.textContent = '';
+}
+/** All answer segments — each gets its own div for interleaving with tools/thinking */
+let answerSegments = [];
+function ensureAnswerBubble() {
+  if (answerEl) return;
+  if (!currentAssistant) ensureAssistant();
+  answerEl = document.createElement('div');
+  answerEl.className = 'msg-answer';
+  answerEl._segmentStart = answerText.length;
+  currentAssistant.appendChild(answerEl);
+  answerSegments.push(answerEl);
+}
+function renderAnswer() {
+  if (!answerEl) return;
+  // Get text for this segment only
+  const segStart = answerEl._segmentStart || 0;
+  let display = answerText.slice(segStart);
+  // Strip CITATIONS block from display
+  const citIdx = display.search(/^CITATIONS:\s*$/im);
+  if (citIdx >= 0) display = display.slice(0, citIdx).trimEnd();
+  try {
+    answerEl.innerHTML = marked.parse(display);
+  } catch {
+    answerEl.textContent = display;
+  }
+}
+/** Final render — re-render all segments to strip CITATIONS from whichever has it */
+function renderAllAnswers() {
+  for (const seg of answerSegments) {
+    const segStart = seg._segmentStart || 0;
+    // Find end: next segment's start, or end of answerText
+    const segIdx = answerSegments.indexOf(seg);
+    const segEnd = segIdx < answerSegments.length - 1 ? answerSegments[segIdx + 1]._segmentStart : answerText.length;
+    let display = answerText.slice(segStart, segEnd);
+    const citIdx = display.search(/^CITATIONS:\s*$/im);
+    if (citIdx >= 0) display = display.slice(0, citIdx).trimEnd();
+    if (!display.trim()) { seg.style.display = 'none'; continue; }
+    try {
+      seg.innerHTML = marked.parse(display);
+    } catch {
+      seg.textContent = display;
+    }
+  }
+}
+/** Store citations for inline linking */
+let lastCitations = [];
+function linkInlineCitations(citations) {
+  if (!currentAssistant) return;
+  // Find all [N] references in answer segments and make them clickable
+  const answerEls = currentAssistant.querySelectorAll('.msg-answer');
+  for (const el of answerEls) {
+    el.innerHTML = el.innerHTML.replace(/\[(\d+)\]/g, (match, num) => {
+      const idx = parseInt(num, 10) - 1;
+      if (idx >= 0 && idx < citations.length) {
+        return `<a class="citation-link" href="#" data-citation-idx="${idx}" title="${escapeHtml(citations[idx].file)}, p.${citations[idx].page}">[${num}]</a>`;
+      }
+      return match;
+    });
+  }
+  // Add click handlers
+  currentAssistant.querySelectorAll('.citation-link').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const idx = parseInt(link.dataset.citationIdx, 10);
+      const chip = currentAssistant.querySelectorAll('.citation-chip')[idx];
+      openSourceViewer(citations[idx], chip);
+    });
+  });
+}
+function renderCitations(citations) {
+  if (!currentAssistant || !citations.length) return;
+  lastCitations = citations;
+  const block = document.createElement('div');
+  block.className = 'citations-block';
+  for (let i = 0; i < citations.length; i++) {
+    const c = citations[i];
+    const pageStr = c.pages ? `p.${c.pages.map(p => p.page).join('-')}` : `p.${c.page}`;
+    const hasBbox = c.bbox || (c.pages && c.pages.length > 0);
+    const statusIcon = hasBbox ? '✅' : '⚠️';
+    const quote = c.quote.length > 70 ? c.quote.slice(0, 67) + '...' : c.quote;
+    const chip = document.createElement('div');
+    chip.className = 'citation-chip';
+    chip.innerHTML = `
+      <div><span class="citation-num">[${i+1}]</span> 📄 <span class="citation-file">${escapeHtml(c.file)}</span>, ${pageStr}</div>
+      <span class="citation-quote">"${escapeHtml(quote)}"</span>
+      <span class="citation-status">${statusIcon} ${hasBbox ? 'bbox verified' : 'no bbox'}</span>
+    `;
+    chip.onclick = () => {
+      openSourceViewer(c, chip);
+    };
+    block.appendChild(chip);
+  }
+  currentAssistant.appendChild(block);
+  scrollToBottom();
+}
+function citationStartPage(citation) {
+  if (Array.isArray(citation.pages) && citation.pages.length > 0) {
+    return citation.pages[0].page || citation.page || 1;
+  }
+  return citation.page || 1;
+}
+function setActiveCitationChip(chip) {
+  if (activeCitationChip) activeCitationChip.classList.remove('active');
+  activeCitationChip = chip || null;
+  if (activeCitationChip) activeCitationChip.classList.add('active');
+}
+function showSourceViewerState(state, message = '') {
+  sourceViewerEmpty.hidden = state !== 'empty';
+  sourceViewerLoading.hidden = state !== 'loading';
+  sourceViewerError.hidden = state !== 'error';
+  sourceViewerCanvasWrap.hidden = state !== 'canvas';
+  if (state === 'loading') sourceViewerLoading.textContent = message || 'Loading PDF…';
+  if (state === 'error') sourceViewerError.textContent = message || 'Failed to load source page.';
+  if (state === 'empty') sourceViewerEmpty.textContent = message || 'Click any citation chip to open the cited PDF page here.';
+}
+function currentCitationBoxes(pageNum) {
+  if (!viewerCitation) return [];
+  if (Array.isArray(viewerCitation.pages) && viewerCitation.pages.length > 0) {
+    return viewerCitation.pages.filter(p => p.page === pageNum);
+  }
+  if (viewerCitation.bbox && (viewerCitation.page || 1) === pageNum) {
+    return [viewerCitation.bbox];
+  }
+  return [];
+}
+function renderSourceHighlights(pageNum, pageWidth, pageHeight) {
+  const boxes = currentCitationBoxes(pageNum);
+  sourceViewerOverlay.setAttribute('viewBox', `0 0 ${pageWidth} ${pageHeight}`);
+  sourceViewerOverlay.innerHTML = boxes.map((box) =>
+    `<rect class="source-highlight" x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" ry="4"></rect>`
+  ).join('');
+}
+function updateSourceViewerNav() {
+  const total = viewerPdf?.numPages || 0;
+  sourceViewerPrevBtn.disabled = !viewerPdf || viewerPage <= 1;
+  sourceViewerNextBtn.disabled = !viewerPdf || viewerPage >= total;
+  sourceViewerPageIndicator.textContent = total > 0 ? `Page ${viewerPage} of ${total}` : 'Page —';
+}
+/** Preload PDFs in background when citations arrive so clicks are instant */
+const preloadedPdfs = {};
+function preloadCitationPdfs(citations) {
+  if (!window.pdfjsLib) return;
+  const files = [...new Set(citations.map(c => c.file))];
+  for (const file of files) {
+    if (preloadedPdfs[file]) continue;
+    const url = `/api/pdf/${encodeURIComponent(file)}`;
+    preloadedPdfs[file] = window.pdfjsLib.getDocument({ url }).promise.catch(() => null);
+  }
+}
+/** Cache bbox page data: bboxPageCache["file.pdf:3"] = pageData */
+const bboxPageCache = {};
+/** Client-side quote matching against bbox JSON to get accurate highlight */
+async function verifyCitationBbox(citation) {
+  try {
+    const pageNum = citation.page || 1;
+    const cacheKey = `${citation.file}:${pageNum}`;
+    let bboxData = bboxPageCache[cacheKey];
+    if (!bboxData) {
+      const res = await fetch(`/api/bbox/${encodeURIComponent(citation.file)}?page=${pageNum}`);
+      if (!res.ok) return;
+      bboxData = await res.json();
+      if (!bboxData.error) bboxPageCache[cacheKey] = bboxData;
+    }
+    if (bboxData.error) return;
+    const page = bboxData.pages?.find(p => p.page === citation.page);
+    if (!page || !page.textItems?.length) return;
+    // Build text run from textItems (same logic as server-side)
+    const Y_TOL = 3, X_GAP = 15;
+    const items = page.textItems.filter(t => t.text.trim().length > 0);
+    if (!items.length) return;
+    const sorted = [...items].sort((a, b) => {
+      const dy = a.y - b.y;
+      return Math.abs(dy) > Y_TOL ? dy : a.x - b.x;
+    });
+    // Group into lines
+    const lines = [];
+    let curLine = [sorted[0]], curY = sorted[0].y;
+    for (let i = 1; i < sorted.length; i++) {
+      if (Math.abs(sorted[i].y - curY) <= Y_TOL) {
+        curLine.push(sorted[i]);
+      } else {
+        lines.push(curLine);
+        curLine = [sorted[i]];
+        curY = sorted[i].y;
+      }
+    }
+    lines.push(curLine);
+    for (const line of lines) line.sort((a, b) => a.x - b.x);
+    // Concatenate with segments
+    let text = '';
+    const segments = [];
+    for (let li = 0; li < lines.length; li++) {
+      const line = lines[li];
+      for (let ii = 0; ii < line.length; ii++) {
+        const item = line[ii];
+        if (ii > 0) {
+          const prev = line[ii - 1];
+          const gap = item.x - (prev.x + prev.width);
+          text += gap > X_GAP ? '  ' : gap >= 0 ? ' ' : '';
+        }
+        const start = text.length;
+        text += item.text;
+        segments.push({ start, end: text.length, bbox: { x: item.x, y: item.y, width: item.width, height: item.height } });
+      }
+      if (li < lines.length - 1) text += '\n';
+    }
+    // Try exact match, then normalized
+    const quote = citation.quote;
+    let matchStart = -1, matchEnd = -1;
+    // Exact
+    const idx = text.indexOf(quote);
+    if (idx >= 0) { matchStart = idx; matchEnd = idx + quote.length; }
+    // Normalized
+    if (matchStart < 0) {
+      const norm = s => s.toLowerCase().replace(/[^\w\s]/g, '').replace(/\s+/g, ' ').trim();
+      const nHay = norm(text), nNeedle = norm(quote);
+      const nIdx = nHay.indexOf(nNeedle);
+      if (nIdx >= 0) {
+        // Map back to original positions
+        let nPos = 0, oStart = -1, oEnd = -1;
+        for (let i = 0; i < text.length && oEnd < 0; i++) {
+          const ch = text[i];
+          if (/\s/.test(ch)) {
+            let j = i;
+            while (j < text.length && /\s/.test(text[j])) j++;
+            if (nPos === nIdx) oStart = i;
+            nPos++;
+            if (nPos >= nIdx + nNeedle.length && oEnd < 0) oEnd = j;
+            i = j - 1;
+            continue;
+          }
+          if (/[^\w]/.test(ch)) continue;
+          if (nPos === nIdx) oStart = i;
+          nPos++;
+          if (nPos >= nIdx + nNeedle.length && oEnd < 0) oEnd = i + 1;
+        }
+        if (oStart >= 0 && oEnd > oStart) { matchStart = oStart; matchEnd = oEnd; }
+      }
+    }
+    if (matchStart < 0) return;
+    // Merge bboxes of matching segments
+    const boxes = segments.filter(s => s.end > matchStart && s.start < matchEnd).map(s => s.bbox);
+    if (!boxes.length) return;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const b of boxes) {
+      if (b.x < minX) minX = b.x;
+      if (b.y < minY) minY = b.y;
+      if (b.x + b.width > maxX) maxX = b.x + b.width;
+      if (b.y + b.height > maxY) maxY = b.y + b.height;
+    }
+    citation.bbox = {
+      x: Math.round(minX * 100) / 100,
+      y: Math.round(minY * 100) / 100,
+      width: Math.round((maxX - minX) * 100) / 100,
+      height: Math.round((maxY - minY) * 100) / 100,
+    };
+  } catch (err) {
+    console.warn('[viewer] Citation bbox verification failed:', err);
+  }
+}
+async function openSourceViewer(citation, chip) {
+  setActiveCitationChip(chip);
+  viewerCitation = citation;
+  sourceViewerEl.classList.add('open');
+  sourceViewerEl.setAttribute('aria-hidden', 'false');
+  sourceViewerTitle.textContent = citation.file || 'Source Viewer';
+  sourceViewerMeta.textContent = `Loading page ${citationStartPage(citation)}…`;
+  showSourceViewerState('loading', 'Loading PDF…');
+  try {
+    if (!window.pdfjsLib) {
+      throw new Error('pdf.js did not load. Refresh and try again.');
+    }
+    // Verify bbox in parallel with PDF loading
+    const verifyPromise = verifyCitationBbox(citation);
+    if (!viewerPdf || viewerFile !== citation.file) {
+      // Use preloaded PDF if available, otherwise fetch now
+      if (preloadedPdfs[citation.file]) {
+        viewerPdf = await preloadedPdfs[citation.file];
+      }
+      if (!viewerPdf) {
+        const url = `/api/pdf/${encodeURIComponent(citation.file)}`;
+        viewerPdf = await window.pdfjsLib.getDocument({ url }).promise;
+      }
+      viewerFile = citation.file;
+    }
+    await verifyPromise;
+    viewerPage = Math.max(1, Math.min(citationStartPage(citation), viewerPdf.numPages || 1));
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    await renderSourceViewerPage(viewerPage);
+  } catch (err) {
+    console.error('Source Viewer failed:', err);
+    showSourceViewerState('error', err?.message || 'Failed to load PDF.');
+    sourceViewerMeta.textContent = 'Source unavailable';
+    sourceViewerPageIndicator.textContent = 'Page —';
+    viewerPdf = null;
+    viewerFile = '';
+    updateSourceViewerNav();
+  }
+}
+async function renderSourceViewerPage(pageNum) {
+  if (!viewerPdf) return;
+  showSourceViewerState('loading', 'Rendering page…');
+  const page = await viewerPdf.getPage(pageNum);
+  const baseViewport = page.getViewport({ scale: 1 });
+  const availableWidth = Math.max(240, sourceViewerBody.clientWidth - 32);
+  const cssScale = availableWidth / baseViewport.width;
+  const viewport = page.getViewport({ scale: cssScale });
+  const outputScale = window.devicePixelRatio || 1;
+  const ctx = sourceViewerCanvas.getContext('2d');
+  if (!ctx) throw new Error('Could not get canvas context for PDF rendering.');
+  sourceViewerCanvas.width = Math.floor(viewport.width * outputScale);
+  sourceViewerCanvas.height = Math.floor(viewport.height * outputScale);
+  sourceViewerCanvas.style.width = `${viewport.width}px`;
+  sourceViewerCanvas.style.height = `${viewport.height}px`;
+  sourceViewerPageWrap.style.width = `${viewport.width}px`;
+  sourceViewerPageWrap.style.height = `${viewport.height}px`;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, sourceViewerCanvas.width, sourceViewerCanvas.height);
+  await page.render({
+    canvasContext: ctx,
+    viewport,
+    transform: outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null,
+  }).promise;
+  viewerPage = pageNum;
+  renderSourceHighlights(pageNum, baseViewport.width, baseViewport.height);
+  const highlightCount = currentCitationBoxes(pageNum).length;
+  sourceViewerMeta.textContent = highlightCount > 0
+    ? `${viewerFile} · ${highlightCount} highlight${highlightCount !== 1 ? 's' : ''}`
+    : `${viewerFile} · no highlight on this page`;
+  showSourceViewerState('canvas');
+  updateSourceViewerNav();
+}
+function closeSourceViewer() {
+  sourceViewerEl.classList.remove('open');
+  sourceViewerEl.setAttribute('aria-hidden', 'true');
+  viewerCitation = null;
+  sourceViewerOverlay.innerHTML = '';
+  setActiveCitationChip(null);
+}
+function finishResponse(data) {
+  if (!currentAssistant) return;
+  renderAllAnswers(); // final render of all segments
+  if (lastCitations.length > 0) linkInlineCitations(lastCitations);
+  const done = document.createElement('div');
+  done.className = 'msg-done';
+  const parts = [`${data.elapsed}s`];
+  if (data.filesRead > 0) parts.push(`${data.filesRead} files read`);
+  else parts.push('wiki');
+  if (data.citationCount > 0) parts.push(`${data.citationCount} citations`);
+  done.textContent = parts.join(' · ');
+  currentAssistant.appendChild(done);
+  scrollToBottom();
+}
+function addSystemMessage(text) {
+  const div = document.createElement('div');
+  div.style.cssText = 'text-align:center; padding:8px; font-size:12px; color:var(--urgent); margin-bottom:12px;';
+  div.textContent = text;
+  messagesEl.appendChild(div);
+  scrollToBottom();
+}
+function scrollToBottom() {
+  requestAnimationFrame(() => {
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+  });
+}
+// ── Sessions ─────────────────────────────────────────────────
+async function loadSessions() {
+  try {
+    const res = await fetch('/api/sessions');
+    const sessions = await res.json();
+    const list = document.getElementById('sessions-list');
+    if (sessions.length === 0) {
+      list.innerHTML = '<div style="padding:12px 10px;font-size:12px;color:rgba(255,255,255,0.25);">No sessions yet</div>';
+      return;
+    }
+    list.innerHTML = sessions.map(s => {
+      const ago = timeAgo(new Date(s.timestamp));
+      const title = s.question.length > 35 ? s.question.slice(0, 32) + '...' : s.question;
+      return `<button class="session-item" data-id="${s.id}">
+        <span class="title">💬 ${escapeHtml(title)}</span>
+        <span class="meta">${ago} · ${s.citationCount} citations</span>
+      </button>`;
+    }).join('');
+  } catch (e) { console.error('Failed to load sessions:', e); }
+}
+async function loadStatus() {
+  try {
+    const res = await fetch('/api/status');
+    const data = await res.json();
+    statusText.textContent = `${data.sourceCount} sources · ${data.wikiConcepts} wiki concepts`;
+  } catch {}
+}
+document.getElementById('new-chat-btn').addEventListener('click', () => {
+  // Reload page to start fresh session
+  location.reload();
+});
+sourceViewerCloseBtn.addEventListener('click', closeSourceViewer);
+sourceViewerPrevBtn.addEventListener('click', () => {
+  if (viewerPdf && viewerPage > 1) renderSourceViewerPage(viewerPage - 1);
+});
+sourceViewerNextBtn.addEventListener('click', () => {
+  if (viewerPdf && viewerPage < viewerPdf.numPages) renderSourceViewerPage(viewerPage + 1);
+});
+window.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && sourceViewerEl.classList.contains('open')) {
+    closeSourceViewer();
+  }
+});
+window.addEventListener('resize', () => {
+  if (!viewerPdf || !sourceViewerEl.classList.contains('open')) return;
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    renderSourceViewerPage(viewerPage).catch((err) => console.error('Resize rerender failed:', err));
+  }, 120);
+});
+// ── Helpers ──────────────────────────────────────────────────
+function timeAgo(date) {
+  const diff = Date.now() - date.getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return 'yesterday';
+  return `${days}d ago`;
+}
+function escapeHtml(s) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+// ── Init ─────────────────────────────────────────────────────
+connectWS();
+loadSessions();
+</script>
+</body>
+</html>