feat(web): attach the page that actually shows a named figure or table

Page images only reached the model when retrieval pulled a chunk from
that page. A question naming "Figure 1" can match body text that
references the figure from another page, leaving the figure itself
unseen. The client already holds the full figure index (/figures), so
when the question names a figure or table, its real page is looked up
by caption and attached too (scoped to the top retrieved papers, max
two extra pages, deduped against pages already attached).

Author: NorthernLightx

web/app/api.js

@@ -216,7 +216,30 @@
     }
   }
 
-  async function buildMessages(priorTurns, latestUserText, chunks, useImages) {
+  // When the question names "Figure N" / "Table N", find that element's real
+  // page via the figure index (/figures). Retrieval often returns body text
+  // that only references the figure from another page — without this, the
+  // page that actually shows it never reaches the model. Scoped to papers in
+  // the top retrieved chunks; at most two extra pages.
+  function referencedFigurePages(question, chunks, figureIndex) {
+    if (!Array.isArray(figureIndex) || figureIndex.length === 0) return [];
+    const refs = [...question.matchAll(/\b(fig(?:ure)?\.?|table)\s*(\d+)\b/gi)];
+    if (refs.length === 0) return [];
+    const papers = [...new Set(chunks.slice(0, 3).map((c) => c.paper_id))];
+    const out = [];
+    for (const [, kindRaw, num] of refs) {
+      const re = /^t/i.test(kindRaw)
+        ? new RegExp(`^table\\.?\\s*${num}\\b`, "i")
+        : new RegExp(`^fig(?:ure)?\\.?\\s*${num}\\b`, "i");
+      for (const paperId of papers) {
+        const f = figureIndex.find((g) => g.paper_id === paperId && re.test(String(g.caption || "").trim()));
+        if (f && typeof f.page_number === "number") out.push({ paperId, page: f.page_number });
+      }
+    }
+    return out.slice(0, 2);
+  }
+
+  async function buildMessages(priorTurns, latestUserText, chunks, useImages, figureIndex) {
     const system = [
       "You are a careful research assistant answering questions from the supplied documents.",
       '- Use only the provided context for factual claims. If the user asks a factual question the context cannot answer, say exactly "Not stated in the provided context." — do not speculate.',
@@ -257,6 +280,20 @@
         }
       }
     }
+    // Attach the page that actually shows a figure/table the question names,
+    // when retrieval didn't already bring it in.
+    if (useImages) {
+      for (const ref of referencedFigurePages(latestUserText, chunks, figureIndex)) {
+        const key = `${ref.paperId}:${ref.page}`;
+        if (seenPages.has(key)) continue;
+        seenPages.add(key);
+        const dataUrl = await imageToDataUrl(pageImageUrl(ref.paperId, ref.page));
+        if (dataUrl) {
+          content.push({ type: "text", text: `[page image ${ref.paperId}::p${ref.page}::page]` });
+          content.push({ type: "image_url", image_url: { url: dataUrl } });
+        }
+      }
+    }
     content.push({ type: "text", text: `\nQuestion: ${latestUserText}` });
     messages.push({ role: "user", content });
     return messages;

web/app/app.jsx

@@ -308,7 +308,7 @@ function App() {
         </div>
 
         <div className="view">
-          {tab === "chat" && <ChatView settings={settings} set={set} layout={layout} apiKey={apiKey} model={model} papers={papers} pagesAvailable={pagesAvailable} demoAvailable={demoAvailable} routingAvailable={routingAvailable} onNeedKey={(reason) => setKeyModalOpen(reason || "quota")} />}
+          {tab === "chat" && <ChatView settings={settings} set={set} layout={layout} apiKey={apiKey} model={model} papers={papers} figures={figures} pagesAvailable={pagesAvailable} demoAvailable={demoAvailable} routingAvailable={routingAvailable} onNeedKey={(reason) => setKeyModalOpen(reason || "quota")} />}
           {tab === "inspection" && <InspectionView settings={settings} apiKey={apiKey} model={model} papers={papers} pagesAvailable={pagesAvailable} routingAvailable={routingAvailable} />}
           {tab === "papers" && <PapersView setTab={setTab} papers={papers} figures={figures} />}
           {tab === "figures" && <FiguresView figures={figures} />}

web/app/chat.jsx

@@ -270,7 +270,7 @@ function RetrievalPanel({ turn, highlight, settings, paperTitle, routingAvailabl
   );
 }
 
-function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, pagesAvailable, demoAvailable, routingAvailable, onNeedKey }) {
+function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, figures, pagesAvailable, demoAvailable, routingAvailable, onNeedKey }) {
   const [turns, setTurns] = useState([]);
   const [busy, setBusy] = useState(false);
   const [advOpen, setAdvOpen] = useState(false);
@@ -397,7 +397,7 @@ function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, p
       // attach page images when pages are served.
       const useImages = pagesAvailable && (hasKey ? window.RAG.supportsVision(model) : true);
       if (useImages) setStatus(hasKey ? "Reading the retrieved page images…" : "Free demo model is reading the retrieved pages…");
-      const messages = await window.RAG.buildMessages(priorTurns, q, results, useImages);
+      const messages = await window.RAG.buildMessages(priorTurns, q, results, useImages, figures);
       const tGen = performance.now();
       const onDelta = (delta) => updateLast((prev) => ({ answer: prev.answer + delta }));
       const { text, usage } = hasKey
@@ -445,7 +445,7 @@ function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, p
     } finally {
       setBusy(false);
     }
-  }, [busy, apiKey, model, settings, pagesAvailable, demoAvailable, routingAvailable, onNeedKey]);
+  }, [busy, apiKey, model, settings, figures, pagesAvailable, demoAvailable, routingAvailable, onNeedKey]);
 
   const newChat = () => { setTurns([]); setHighlight(null); setBusy(false); setStatus(""); };
   // The retrieval panel is hidden in focus layout and at phone width, so a