fix(web): retrieval panel + routing UX fixes

- surface cited page-images in their own panel section (previously
  orphaned off the ranked list)
- sort cited candidates to the top
- route bars count cited modality, not retrieval mix -- a text route
  that cited page-images read as 100% text
- routing toggle: auto/text/visual/hybrid/agentic
- route-pill copy; de-figure the page-image note
- drop the embeddings chip and Index panel
- html overflow:hidden -- kill the double scrollbar on Figures

Author: NorthernLightx

web/app/app.jsx

@@ -32,15 +32,6 @@ function Sidebar({ tab, setTab, theme, setTheme, layout, setLayout, stats, open
 
       <div className="sidebar-spacer"></div>
 
-      <div className="corpus-card">
-        <h4>Index</h4>
-        <div className="stat-row"><span className="k">Papers</span><span className="v">{stats.papers || "—"}</span></div>
-        <div className="stat-row"><span className="k">Figures</span><span className="v">{stats.figures || "—"}</span></div>
-        <hr className="divider" style={{ margin: "8px 0" }} />
-        <div className="stat-row"><span className="k">Text</span><span className="v idx">bge-m3</span></div>
-        <div className="stat-row"><span className="k">Embeddings</span><span className="v idx">1024-d</span></div>
-      </div>
-
       <div className="sidebar-foot">
         <div className="theme-toggle" role="group" aria-label="Theme">
           <button className={theme === "light" ? "on" : ""} onClick={() => setTheme("light")} title="Light"><Icon name="sun" size={14} /></button>
@@ -322,7 +313,6 @@ function App() {
             <Segmented value={layout} onChange={setLayout}
             options={[{ value: "split", label: "split" }, { value: "single", label: "focus" }]} />
             }
-            <span className="tag"><Icon name="layers" size={12} style={{ verticalAlign: -2, marginRight: 4 }} />1024-d embeddings</span>
           </div>
         </div>
 

web/app/chat.jsx

@@ -36,6 +36,7 @@ function AdvancedPanel({ settings, set, papers, routingAvailable }) {
         <Segmented value={settings.route} onChange={(v) => set("route", v)}
           options={[{ value: "auto", label: "auto" }, { value: "text", label: "text" },
             { value: "visual", label: "visual", disabled: noRouter, disabledTitle: offTitle },
+            { value: "hybrid", label: "hybrid", disabled: noRouter, disabledTitle: offTitle },
             { value: "agentic", label: "agentic" }]} />
         {noRouter &&
         <span className="field-note">visual routing needs the GPU leg — off on this CPU deployment (offline: +35% recall over text-only); figure questions still work via page images</span>
@@ -81,7 +82,6 @@ function EmptyState({ onAsk, routingAvailable }) {
         {window.RAG.SUGGESTIONS.map((s, i) => (
           <button key={i} className="suggest" onClick={() => onAsk(s.q)}>
             <span className="q">{s.q}</span>
-            {!noRouter && <RoutePill route={s.route} />}
           </button>
         ))}
       </div>
@@ -198,12 +198,40 @@ function RetrievalPanel({ turn, highlight, settings, paperTitle, routingAvailabl
   const relScore = (s) => (sMax === sMin ? 1 : (s - sMin) / (sMax - sMin));
   const vis = cands.filter((c) => c.kind === "visual");
   const total = cands.length;
-  const visShare = total ? Math.round((vis.length / total) * 100) : 0;
+  // Evidence-mix bars reflect what the answer CITED, not just what was
+  // retrieved. On a text route the model can still cite page images attached at
+  // generation, so a retrieval-only split falsely reads 100% text. Count cited
+  // modality (page_cite / fig_cite / visual candidates all carry kind "visual");
+  // fall back to the retrieved-candidate mix before any citations exist.
+  const cites = turn.citations || [];
+  const visCited = cites.filter((c) => c.kind === "visual").length;
+  const visShare = cites.length
+    ? Math.round((visCited / cites.length) * 100)
+    : total
+      ? Math.round((vis.length / total) * 100)
+      : 0;
   const txtShare = 100 - visShare;
   const citedNum = (c) => {
     const ct = (turn.citations || []).find((x) => x.id === c.chunk_id);
     return ct ? ct.n : null;
   };
+  // Page-image citations (`::page`) the model produced from the page images
+  // attached at generation. They aren't retrieval candidates, so they get no
+  // ranked row — surface them here so a cited [n] always resolves to something
+  // in the panel. Skip any whose id is already a candidate (hybrid route, where
+  // the visual leg retrieved the same page).
+  const citedPages = (turn.citations || []).filter(
+    (c) => c.page_cite && !cands.some((cd) => cd.chunk_id === c.id)
+  );
+  // Surface the candidates the answer actually cited at the top, then the rest.
+  // Each group keeps the retriever's existing rank order — which for a text-only
+  // result set is score DESC. We deliberately don't re-sort by raw `score`: text
+  // rerank logits and visual patch-sim are different scales, so a global sort
+  // would interleave the legs wrongly. The [n] badge is the citation's own number.
+  const orderedCands = [
+    ...cands.filter((c) => citedNum(c) != null),
+    ...cands.filter((c) => citedNum(c) == null),
+  ];
   return (
     <aside className="retr-panel">
       <div className="retr-head">
@@ -258,7 +286,7 @@ function RetrievalPanel({ turn, highlight, settings, paperTitle, routingAvailabl
 
         <div className="retr-section">
           <h4>Ranked candidates <span className="n">{total} chunks</span></h4>
-          {cands.map((c, i) => {
+          {orderedCands.map((c, i) => {
             const num = citedNum(c);
             const hl = highlight && num && String(num) === String(highlight);
             return (
@@ -280,6 +308,26 @@ function RetrievalPanel({ turn, highlight, settings, paperTitle, routingAvailabl
           })}
         </div>
 
+        {citedPages.length > 0 && (
+          <div className="retr-section">
+            <h4>Page images cited <span className="n">{citedPages.length}</span></h4>
+            {citedPages.map((c, i) => (
+              <div key={c.id || i} className="cand row-clickable"
+                onClick={() => setPageItem({ chunk_id: c.id, paper: c.paper, page: c.page, pages: [c.page], kind: "visual", bbox: null, text: "", page_cite: true })}
+                title="View cited page image">
+                <div className="cand-top">
+                  <span className="cand-num visual">{c.n}</span>
+                  <span className="cand-src">{c.paper} · p.{c.page}</span>
+                  <span className="cand-score">page</span>
+                </div>
+                <div className="cand-meta">
+                  <span className="pin-note">the model read this whole page at generation; cited but not a ranked retrieval result</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
         {vis.length > 0 && (
           <div className="retr-section">
             <h4>Retrieved figures <span className="n">{vis.length}</span></h4>
@@ -407,7 +455,7 @@ function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, f
       const t0 = performance.now();
       const { results, routing, trace } = await window.RAG.retrieve(searchQuery, {
         topK: settings.topk,
-        forceRoute: settings.route === "text" ? "text" : settings.route === "visual" ? "hybrid" : "",
+        forceRoute: ["text", "visual", "hybrid"].includes(settings.route) ? settings.route : "",
         routingMode: settings.routingMode || "",
         paperId: settings.paper || "",
         dci: settings.route === "agentic",

web/app/inspection.jsx

@@ -72,7 +72,7 @@ function InspectionView({ settings, papers, routingAvailable }) {
     try {
       const { results, routing } = await window.RAG.retrieve(v, {
         topK: settings.topk,
-        forceRoute: settings.route === "text" ? "text" : settings.route === "visual" ? "hybrid" : "",
+        forceRoute: ["text", "visual", "hybrid"].includes(settings.route) ? settings.route : "",
         routingMode: settings.routingMode || "",
         paperId: settings.paper || "",
         onStatus: setStatus,

web/app/shared.jsx

@@ -52,7 +52,7 @@ function Icon({ name, size = 16, className = "", strokeWidth = 1.7, fill = false
 
 function RoutePill({ route }) {
   const cls = route === "visual" ? "visual" : route === "agentic" || route.includes("+") ? "mixed" : "text";
-  const label = route === "visual" ? "visual route" : route === "agentic" ? "agentic search" : route.includes("+") ? "text + visual" : "text route";
+  const label = route === "visual" ? "visual" : route === "agentic" ? "agentic search" : route.includes("+") ? "text + visual" : "text";
   return <span className={"pill " + cls}><span className="dot"></span>{label}</span>;
 }
 
@@ -235,7 +235,7 @@ function PageRegionModal({ item, onClose, paperTitle }) {
           <div className="pm-note">
             <Icon name={isVis ? "image" : "text"} size={13} />
             <span>{item.page_cite
-              ? "Cited as a page image: the model read this page directly when describing the figure, so the whole page is the evidence."
+              ? "Cited as a page image: the model read this page directly, so the whole page is the evidence."
               : isVis
               ? (hasBbox ? "Retrieved from the visual store over page images; the box marks the figure or table region on the source page." : "Retrieved from the visual store over page images.")
               : (hasBbox ? "Retrieved from the text store by the dense retriever; the box marks the cited passage on the page." : "Retrieved from the text store by the dense retriever. This chunk spans page boundaries, so no single region box is available.")}</span>

web/app/styles.css

@@ -62,7 +62,11 @@
 }
 
 * { box-sizing: border-box; }
-html, body { height: 100%; }
+/* The app shell never scrolls the document — every tab scrolls inside its own
+   container (`.view` is overflow:hidden; panels scroll via `.scroll-view > .content-pad` or `.chat-scroll`).
+   Without this, a tall inner grid (the Figures gallery) leaks its height to the
+   root scroller and you get a second, page-level scrollbar. */
+html, body { height: 100%; overflow: hidden; }
 body {
   margin: 0;
   background: var(--bg);