Add a documents panel to view/remove RAG-indexed documents

New "Indexed documents" button in the sidebar opens a modal listing
every document currently indexed for the active conversation, with its
real chunk count, and a Remove button per document — works for both
online (server KV) and offline (IndexedDB) RAG, following whichever
one is currently active.

Always does a fresh fetch/query when opened rather than trusting any
client-side cache, so what's shown can never drift from what
retrieval actually reads. Removing a document is the same single
write as "the index being recalculated" — there's no separate index
structure to rebuild, since retrieval always scans whatever's
currently stored; the modal just re-fetches after removal to show
that state, rather than optimistically dropping the row locally.

Also removes ragDocumentNames, an in-memory tracking array made fully
redundant by this fresh-fetch approach — it was already write-only
dead code after an earlier change, and would have been actively wrong
here (stale after a reload) if left in place.

Backend: new listDocuments/removeDocument request types, tested
directly end-to-end (ingest two documents, list, remove one, list
again, remove the other, confirm empty) before shipping.

index.html

@@ -278,6 +278,10 @@
         <button type="button" id="ragModeBtn" class="small-btn">RAG</button>
       </div>
     </div>
+    <div class="sidebar-footer-row" id="ragDocsRow">
+      <span>Indexed documents</span>
+      <button type="button" id="ragDocsBtn" class="small-btn">📚 View</button>
+    </div>
     <div class="sidebar-footer-row" id="aiModeRow" style="display:none;">
       <span id="aiModeLabel">AI mode</span>
       <div class="btn-group">
@@ -317,6 +321,14 @@
     <button type="button" class="modal-ok-btn" id="qrCopyLinkBtn">Copy link instead</button>
   </div>
 </div>
+<div class="modal-overlay" id="ragDocsModalOverlay" style="display:none;" role="dialog" aria-modal="true" aria-label="Indexed documents">
+  <div class="modal-box" style="max-width:420px;text-align:left;">
+    <button type="button" class="sidebar-close-btn" id="ragDocsModalClose" aria-label="Close" style="position:absolute;top:14px;right:14px;">✕</button>
+    <div class="modal-title" style="text-align:center;">Indexed documents</div>
+    <div class="modal-sub" id="ragDocsModalSub" style="margin-bottom:14px;text-align:center;">For this conversation</div>
+    <div id="ragDocsList" style="display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;"></div>
+  </div>
+</div>
 <div class="modal-overlay" id="capModalOverlay" style="display:none;" role="dialog" aria-modal="true">
   <div class="modal-box">
     <div class="modal-emoji" id="modalEmoji">🌙</div>
@@ -686,6 +698,11 @@ const aiModeServerBtn = document.getElementById('aiModeServerBtn');
 const aiModeLocalBtn = document.getElementById('aiModeLocalBtn');
 const chatModeBtn = document.getElementById('chatModeBtn');
 const ragModeBtn = document.getElementById('ragModeBtn');
+const ragDocsBtn = document.getElementById('ragDocsBtn');
+const ragDocsModalOverlay = document.getElementById('ragDocsModalOverlay');
+const ragDocsModalClose = document.getElementById('ragDocsModalClose');
+const ragDocsModalSub = document.getElementById('ragDocsModalSub');
+const ragDocsListEl = document.getElementById('ragDocsList');
 const sidebarToggleBtn = document.getElementById('sidebarToggle');
 const sidebarEl = document.getElementById('sidebar');
 const sidebarOverlayEl = document.getElementById('sidebarOverlay');
@@ -723,20 +740,6 @@ let pendingImage = null; // { base64, name }
 // mode is active when the file is picked decides which of these two gets
 // used, not anything about the file itself.
 let pendingOneShotDoc = null; // { text, name }
-// Tracks document names indexed for RAG in the CURRENT conversation — not
-// a queued attachment like pendingImage/pendingOneShotDoc. A document is
-// sent to the server and indexed immediately on file select (see the
-// fileInput handler below), not held until the next message is sent,
-// since from here on every question in this conversation retrieves from
-// it, not just the next one. Reset alongside every place activeConvoId
-// changes, so switching conversations (New Chat, loading a saved chat,
-// etc.) doesn't carry over a stale "documents indexed" state from a
-// different conversation's documents.
-let ragDocumentNames = [];
-
-function resetRagDocuments() {
-  ragDocumentNames = [];
-}
 
 // Chat vs. RAG only ever governs what happens to a document attached
 // FROM THIS POINT FORWARD — deliberately not retroactive. Switching mode
@@ -877,7 +880,6 @@ async function ingestDocumentForRag(text, name) {
     });
     const data = await res.json();
     if (!res.ok || !data.ok) throw new Error(data.error || 'indexing failed');
-    ragDocumentNames.push(name);
     attachPreview.innerHTML = `<span>📄 ${name} (indexed for this chat)</span><button type="button" id="clearAttach" aria-label="Dismiss">×</button>`;
     document.getElementById('clearAttach').addEventListener('click', clearAttachment);
   } catch (err) {
@@ -1315,7 +1317,6 @@ function loadConversationById(id) {
   if (!convo) return;
   if (typeof stopSpeaking === 'function') stopSpeaking();
   activeConvoId = id;
-  resetRagDocuments();
   setSavedActiveConvoId(id);
   history = [{ role: 'system', content: buildSystemPrompt() }, ...convo.messages];
   renderThreadFromHistory();
@@ -1586,7 +1587,6 @@ if (continueSharedBtn) continueSharedBtn.addEventListener('click', () => {
   exitSharedView();
   history = [{ role: 'system', content: buildSystemPrompt() }, ...messages];
   activeConvoId = null;
-  resetRagDocuments();
   persistActiveConversation();
   input.focus();
 });
@@ -1957,6 +1957,39 @@ async function deleteOfflineRagChunks(convoId) {
   } catch {}
 }
 
+// Groups stored chunks by document name — the offline mirror of the
+// server's listDocumentChunks, same reasoning: shows what's actually in
+// IndexedDB right now, not a client-side guess.
+async function listOfflineRagDocuments(convoId) {
+  const stored = await getOfflineRagChunks(convoId);
+  const byName = new Map();
+  for (const entry of stored) byName.set(entry.name, (byName.get(entry.name) || 0) + 1);
+  return Array.from(byName, ([name, chunks]) => ({ name, chunks }));
+}
+
+// Removing one document offline — same idea as removeDocumentChunks on
+// the server (filter it out, re-save), but IndexedDB does this as a
+// cursor delete rather than a read-filter-rewrite of a whole JSON blob.
+// "The index recalculated" is really just "future retrieval scans see
+// one fewer row" — nothing to explicitly rebuild.
+async function removeOfflineRagDocument(convoId, name) {
+  const db = await openOfflineRagDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(OFFLINE_RAG_STORE, 'readwrite');
+    const index = tx.objectStore(OFFLINE_RAG_STORE).index('convoId');
+    const req = index.openCursor(convoId);
+    req.onsuccess = () => {
+      const cursor = req.result;
+      if (cursor) {
+        if (cursor.value.name === name) cursor.delete();
+        cursor.continue();
+      }
+    };
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
 // Mirrors ingestDocumentForRag (the server path) exactly in shape and UX,
 // just routed to IndexedDB + the local embedder instead of a fetch() —
 // this is what the fileInput handler below calls when RAG mode AND
@@ -1971,7 +2004,6 @@ async function ingestDocumentForOfflineRag(text, name) {
     const vectors = await embedLocalTexts(rawChunks);
     const entries = rawChunks.map((chunkText, i) => ({ text: chunkText, name, vector: vectors[i] }));
     await addOfflineRagChunks(activeConvoId, entries);
-    ragDocumentNames.push(name);
     attachPreview.innerHTML = `<span>📄 ${name} (indexed offline)</span><button type="button" id="clearAttach" aria-label="Dismiss">×</button>`;
     document.getElementById('clearAttach').addEventListener('click', clearAttachment);
   } catch (err) {
@@ -2005,6 +2037,89 @@ async function retrieveOfflineRagContext(convoId, question) {
   }
 }
 
+// --- View/manage indexed documents (works for both online and offline
+// RAG) --------------------------------------------------------------
+// Always does a FRESH fetch/query when opened rather than trusting any
+// client-side cache — this is the real, current state (KV for online,
+// IndexedDB for offline), the same source of truth retrieval itself
+// reads from, so what's shown here can never drift from what's actually
+// searchable.
+async function fetchRagDocsList() {
+  if (!activeConvoId) return [];
+  if (localModeActive) {
+    return listOfflineRagDocuments(activeConvoId);
+  }
+  try {
+    const res = await fetch(WORKER_URL, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: 'listDocuments', convoId: activeConvoId })
+    });
+    const data = await res.json();
+    return data.ok ? data.documents : [];
+  } catch {
+    return [];
+  }
+}
+
+async function removeRagDocByName(name) {
+  if (!activeConvoId) return;
+  if (localModeActive) {
+    await removeOfflineRagDocument(activeConvoId, name);
+  } else {
+    try {
+      await fetch(WORKER_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: 'removeDocument', convoId: activeConvoId, name })
+      });
+    } catch {}
+  }
+}
+
+async function renderRagDocsList() {
+  ragDocsListEl.innerHTML = '<div style="text-align:center;color:var(--muted);font-size:13px;padding:12px 0;">Loading…</div>';
+  const documents = await fetchRagDocsList();
+  if (!documents.length) {
+    ragDocsListEl.innerHTML = '<div style="text-align:center;color:var(--muted);font-size:13px;padding:12px 0;">No documents indexed in this conversation yet.</div>';
+    return;
+  }
+  ragDocsListEl.innerHTML = '';
+  documents.forEach((doc) => {
+    const row = document.createElement('div');
+    row.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;';
+    const label = document.createElement('span');
+    label.style.cssText = 'font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+    label.textContent = `📄 ${doc.name} — ${doc.chunks} chunk${doc.chunks === 1 ? '' : 's'}`;
+    const removeBtn = document.createElement('button');
+    removeBtn.type = 'button';
+    removeBtn.className = 'small-btn';
+    removeBtn.textContent = 'Remove';
+    removeBtn.addEventListener('click', async () => {
+      removeBtn.disabled = true;
+      removeBtn.textContent = 'Removing…';
+      await removeRagDocByName(doc.name);
+      // Re-fetch rather than just dropping this row locally — this is
+      // the "index recalculated" step the removal itself already did
+      // server/IndexedDB-side; re-rendering from a fresh fetch is what
+      // actually shows that, rather than trusting the removal succeeded.
+      renderRagDocsList();
+    });
+    row.append(label, removeBtn);
+    ragDocsListEl.appendChild(row);
+  });
+}
+
+function openRagDocsModal() {
+  ragDocsModalSub.textContent = localModeActive ? 'For this conversation (stored offline on this device)' : 'For this conversation';
+  ragDocsModalOverlay.style.display = 'flex';
+  renderRagDocsList();
+}
+
+if (ragDocsBtn) ragDocsBtn.addEventListener('click', openRagDocsModal);
+if (ragDocsModalClose) ragDocsModalClose.addEventListener('click', () => { ragDocsModalOverlay.style.display = 'none'; });
+if (ragDocsModalOverlay) ragDocsModalOverlay.addEventListener('click', (e) => { if (e.target === ragDocsModalOverlay) ragDocsModalOverlay.style.display = 'none'; });
+
 // Which of the banner's three mutually-exclusive views is showing —
 // the outer .cap-banner container itself just handles positioning/padding.
 function showBannerView(view) {
@@ -2269,7 +2384,6 @@ function startNewChat() {
   if (typeof stopSpeaking === 'function') stopSpeaking();
   history = [{ role: "system", content: buildSystemPrompt() }];
   activeConvoId = null;
-  resetRagDocuments();
   setSavedActiveConvoId(null);
   thread.innerHTML = '';
   showEmptyState();