feat(web): collapsible retrieval panel; figure under answer matches citation

- Add a collapse toggle to the retrieval panel: shrinks to a labeled rail,
  state persists in localStorage.
- Under an answer, show only the cited page's figure (deduped by page) so the
  thumbnail matches the [n] citation rather than a stray retrieved candidate.
- Remove the redundant split/focus layout toggle and its dead `single` state;
  the collapse control supersedes it.

Author: NorthernLightx

web/app/app.jsx

@@ -8,7 +8,7 @@ const NAV = [
 { id: "why", label: "Why multimodal?", icon: "why" }];
 
 
-function Sidebar({ tab, setTab, theme, setTheme, layout, setLayout, stats, open }) {
+function Sidebar({ tab, setTab, theme, setTheme, stats, open }) {
   return (
     <aside className={"sidebar" + (open ? " open" : "")}>
       <div className="brand">
@@ -68,8 +68,7 @@ function hexToRgba(hex, a) {
 const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
   "accent": "#3b82f6",
   "density": "regular",
-  "answerFont": "sans",
-  "defaultLayout": "split"
+  "answerFont": "sans"
 } /*EDITMODE-END*/;
 
 /* Two top-bar pills: model picker and key entry. Separate menus, because
@@ -231,7 +230,6 @@ function App() {
     const valid = ["chat", "inspection", "papers", "figures", "why"];
     return (valid.includes(h) && h) || localStorage.getItem("sr-tab") || "chat";
   });
-  const [layout, setLayout] = useState(() => localStorage.getItem("sr-layout") || "split");
   const [navOpen, setNavOpen] = useState(false);
   const [model, setModel] = useState("openai/gpt-4o-mini");
   const [apiKey, setApiKeyRaw] = useState(() => localStorage.getItem("sr-key") || "");
@@ -255,7 +253,6 @@ function App() {
     // the saved tab on every reload.
     if ((location.hash || "").replace(/^#/, "") !== tab) history.replaceState(null, "", "#" + tab);
   }, [tab]);
-  useEffect(() => {localStorage.setItem("sr-layout", layout);}, [layout]);
 
   // Real corpus data: the paper list (feeds the paper filter) and whether page
   // PNGs are mounted (gates vision generation). Best-effort; on failure the
@@ -280,16 +277,6 @@ function App() {
   }, [t.accent, theme]);
   useEffect(() => {document.documentElement.setAttribute("data-density", t.density);}, [t.density]);
   useEffect(() => {document.documentElement.setAttribute("data-answerfont", t.answerFont);}, [t.answerFont]);
-  // Apply the layout tweak only when it actually changes: running on mount
-  // would clobber the persisted sr-layout choice with the tweak default. The
-  // tweak speaks "focus"; the layout state machine speaks "single".
-  const layoutTweakFirst = useRef(true);
-  useEffect(() => {
-    if (layoutTweakFirst.current) { layoutTweakFirst.current = false; return; }
-    setLayout(t.defaultLayout === "focus" ? "single" : t.defaultLayout);
-    /* eslint-disable-next-line */
-  }, [t.defaultLayout]);
-
   const crumb = CRUMB[tab];
   const stats = { papers: papers.length, figures: figures ? figures.length : 0 };
   // Tapping a nav item also dismisses the mobile drawer.
@@ -299,7 +286,7 @@ function App() {
 
   return (
     <div className="app">
-      <Sidebar tab={tab} setTab={selectTab} theme={theme} setTheme={setTheme} layout={layout} setLayout={setLayout} stats={stats} open={navOpen} />
+      <Sidebar tab={tab} setTab={selectTab} theme={theme} setTheme={setTheme} stats={stats} open={navOpen} />
       {navOpen && <div className="nav-scrim" onClick={() => setNavOpen(false)}></div>}
       <main className="main">
         <div className="topbar">
@@ -312,10 +299,6 @@ function App() {
             {(tab === "chat" || tab === "inspection") &&
             <ConnectionControl apiKey={apiKey} setApiKey={setApiKey} model={model} setModel={setModel} demoAvailable={demoAvailable} />
             }
-            {tab === "chat" &&
-            <Segmented value={layout} onChange={setLayout}
-            options={[{ value: "split", label: "split" }, { value: "single", label: "focus" }]} />
-            }
           </div>
         </div>
 
@@ -324,7 +307,7 @@ function App() {
               destroy the conversation while the chat itself points users at
               the Papers and Figures tabs. */}
           <div style={{ display: tab === "chat" ? "contents" : "none" }}>
-            <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")} />
+            <ChatView settings={settings} set={set} apiKey={apiKey} model={model} papers={papers} figures={figures} pagesAvailable={pagesAvailable} demoAvailable={demoAvailable} routingAvailable={routingAvailable} onNeedKey={(reason) => setKeyModalOpen(reason || "quota")} />
           </div>
           {tab === "inspection" && <InspectionView settings={settings} apiKey={apiKey} model={model} papers={papers} pagesAvailable={pagesAvailable} routingAvailable={routingAvailable} />}
           {tab === "papers" && <PapersView setTab={setTab} papers={papers} figures={figures} uploadAvailable={uploadAvailable} onUploaded={reloadCorpus} />}
@@ -341,8 +324,6 @@ function App() {
         options={["#3b82f6", "#8b5cf6", "#14b8a6", "#e0993a"]}
         onChange={(v) => setTweak("accent", v)} />
         <TweakSection label="Layout" />
-        <TweakRadio label="Chat default" value={t.defaultLayout}
-        options={["split", "focus"]} onChange={(v) => setTweak("defaultLayout", v)} />
         <TweakRadio label="Density" value={t.density}
         options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
         <TweakSection label="Reading" />

web/app/chat.jsx

@@ -23,6 +23,23 @@ function previewQuote(raw, max = 180) {
   return t.length > max ? t.slice(0, max).trim() + "…" : t;
 }
 
+// Page images shown under an answer must be the ones the answer CITED, not
+// every visual candidate retrieved: a retrieved-but-uncited page would read as
+// "the figure this answer describes" when the text never used it. Dedupe by
+// page so a figure cited in several sentences yields one thumbnail.
+function citedVisualPages(citations) {
+  const seen = new Set();
+  const out = [];
+  for (const c of citations || []) {
+    if (c.kind !== "visual" || c.page == null) continue;
+    const key = `${c.paper}:${c.page}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(c);
+  }
+  return out;
+}
+
 function AdvancedPanel({ settings, set, papers, routingAvailable }) {
   // When the server runs without the multimodal router (no GPU visual leg),
   // force_route/routing_mode are no-ops — grey them out rather than offering
@@ -91,7 +108,7 @@ function EmptyState({ onAsk, routingAvailable }) {
 
 function AiMessage({ msg, onCite, onFig, paperTitle, pendingLabel }) {
   const done = !msg.streaming;
-  const figs = (msg.candidates || []).filter((c) => c.kind === "visual");
+  const citedFigs = citedVisualPages(msg.citations);
   const tokens = msg.usage ? (msg.usage.prompt_tokens || 0) + (msg.usage.completion_tokens || 0) : 0;
   // KaTeX over the finished answer only: a done message's props never change,
   // so React won't fight the DOM mutation (same pattern as the figure
@@ -131,14 +148,18 @@ function AiMessage({ msg, onCite, onFig, paperTitle, pendingLabel }) {
           </React.Fragment>
         )}
       </div>
-      {done && !msg.error && figs.length > 0 && (
+      {done && !msg.error && citedFigs.length > 0 && (
         <div className="answer-figs rise">
-          {figs.slice(0, 4).map((f, i) => (
-            <button key={f.chunk_id || i} className="answer-fig" onClick={() => onFig(f)}>
+          {citedFigs.slice(0, 4).map((f) => (
+            <button key={f.id} className="answer-fig" title="View cited page"
+              onClick={() => onFig({
+                chunk_id: f.id, paper: f.paper, page: f.page, pages: [f.page],
+                kind: "visual", bbox: f.bbox || null, text: f.quote || "", page_cite: !!f.page_cite,
+              })}>
               <div className="answer-fig-img" style={{ height: 92 }}>
                 <img src={window.RAG.pageImageUrl(f.paper, f.page)} alt={`page ${f.page}`} loading="lazy" />
               </div>
-              <div className="cap"><b>p.{f.page}</b> {previewQuote(f.text, 64)}</div>
+              <div className="cap"><b>[{f.n}] p.{f.page}</b> {previewQuote(f.quote || "", 56)}</div>
             </button>
           ))}
         </div>
@@ -181,10 +202,26 @@ function Composer({ onAsk, busy }) {
 /* ---- retrieval panel ---- */
 function RetrievalPanel({ turn, highlight, settings, paperTitle, routingAvailable }) {
   const [pageItem, setPageItem] = useState(null);
+  const [collapsed, setCollapsed] = useState(() => localStorage.getItem("sr-retr-collapsed") === "1");
+  const toggleCollapsed = () =>
+    setCollapsed((v) => { localStorage.setItem("sr-retr-collapsed", v ? "0" : "1"); return !v; });
+  if (collapsed) {
+    return (
+      <aside className="retr-panel collapsed">
+        <button className="retr-rail" onClick={toggleCollapsed} title="Show retrieval panel" aria-label="Show retrieval panel">
+          <Icon name="chevron" size={16} style={{ transform: "rotate(180deg)" }} />
+          <span className="rail-label">Retrieval</span>
+        </button>
+      </aside>
+    );
+  }
   if (!turn || !turn.candidates) {
     return (
       <aside className="retr-panel">
-        <div className="retr-head"><Icon name="route" size={15} /><h3>Retrieval</h3></div>
+        <div className="retr-head">
+          <Icon name="route" size={15} /><h3>Retrieval</h3>
+          <button className="retr-collapse" style={{ marginLeft: "auto" }} onClick={toggleCollapsed} title="Hide retrieval panel" aria-label="Hide retrieval panel"><Icon name="chevron" size={15} /></button>
+        </div>
         <div className="retr-empty">No turn yet.<br />Ask a question and the live routing decision, ranked candidates, and retrieved figures appear here.</div>
       </aside>
     );
@@ -238,6 +275,7 @@ function RetrievalPanel({ turn, highlight, settings, paperTitle, routingAvailabl
         <Icon name="route" size={15} />
         <h3>Retrieval</h3>
         <span className="live"><span className="dot"></span>live</span>
+        <button className="retr-collapse" onClick={toggleCollapsed} title="Hide retrieval panel" aria-label="Hide retrieval panel"><Icon name="chevron" size={15} /></button>
       </div>
       <div className="retr-body">
         <div className="retr-section">
@@ -351,7 +389,7 @@ function RetrievalPanel({ turn, highlight, settings, paperTitle, routingAvailabl
   );
 }
 
-function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, figures, pagesAvailable, demoAvailable, routingAvailable, onNeedKey }) {
+function ChatView({ settings, set, resetSignal, apiKey, model, papers, figures, pagesAvailable, demoAvailable, routingAvailable, onNeedKey }) {
   const [turns, setTurns] = useState([]);
   const [busy, setBusy] = useState(false);
   const [advOpen, setAdvOpen] = useState(false);
@@ -574,7 +612,7 @@ function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, f
 
   // Bumping runSeq orphans any in-flight ask: its guarded writes become no-ops.
   const newChat = () => { runSeq.current += 1; setTurns([]); setHighlight(null); setBusy(false); setStatus(""); };
-  // The retrieval panel is hidden in focus layout and at phone width, so a
+  // The retrieval panel is hidden at phone width, so a
   // highlight there would be invisible — open the source-page modal instead.
   // Page-image citations always open the modal: they have no panel row.
   const onCite = (tag, msg) => {
@@ -591,7 +629,7 @@ function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, f
     }
     // The panel only ever shows the LAST turn's evidence, so a highlight is
     // wrong for citations in older messages — open the modal for those too.
-    const panelHidden = layout === "single" || (window.matchMedia && window.matchMedia("(max-width: 760px)").matches);
+    const panelHidden = window.matchMedia && window.matchMedia("(max-width: 760px)").matches;
     const isLastTurn = msg === lastAssistant;
     if ((panelHidden || !isLastTurn) && cit && msg.candidates) {
       const cand = msg.candidates.find((cd) => cd.chunk_id === cit.id);
@@ -609,7 +647,7 @@ function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, f
   }, [resetSignal]);
 
   return (
-    <div className={"chat-wrap" + (layout === "single" ? " single" : "")}>
+    <div className="chat-wrap">
       <div className="chat-col">
         <div className="adv-toggle-row">
           <div className={"adv-toggle" + (advOpen ? " open" : "")} onClick={() => setAdvOpen((o) => !o)}>
@@ -643,7 +681,7 @@ function ChatView({ settings, set, layout, resetSignal, apiKey, model, papers, f
         <Composer onAsk={ask} busy={busy} />
       </div>
 
-      {layout !== "single" && <RetrievalPanel turn={lastAssistant} highlight={highlight} settings={settings} paperTitle={paperTitle} routingAvailable={routingAvailable} />}
+      <RetrievalPanel turn={lastAssistant} highlight={highlight} settings={settings} paperTitle={paperTitle} routingAvailable={routingAvailable} />
       <PageRegionModal item={pageItem} onClose={() => setPageItem(null)} paperTitle={paperTitle} />
     </div>
   );

web/app/styles.css

@@ -247,8 +247,7 @@ body {
   .topbar-sub { display: none; }
   .topbar .tag { display: none; }
   /* Single-column chat: a two-pane split is unusable at phone width, so hide
-     the retrieval side-panel and its toggle and let the conversation fill. */
-  .topbar .segmented { display: none; }
+     the retrieval side-panel and let the conversation fill. */
   .endpoint-model { white-space: nowrap; }
   .endpoint-keylabel { display: none; }
   .chat-wrap .retr-panel { display: none; }
@@ -581,7 +580,25 @@ body {
 .retr-panel {
   width: 384px; flex: none; border-left: 1px solid var(--border);
   background: var(--panel); display: flex; flex-direction: column; min-height: 0;
+  transition: width .16s ease;
 }
+.retr-panel.collapsed { width: 40px; }
+.retr-rail {
+  flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px;
+  padding: 16px 0; background: none; border: none; cursor: pointer; color: var(--text-dim);
+  transition: color .12s, background .12s;
+}
+.retr-rail:hover { color: var(--text); background: var(--border-soft); }
+.retr-rail .rail-label {
+  writing-mode: vertical-rl; text-orientation: mixed; font-size: 11px; font-weight: 600;
+  letter-spacing: .12em; text-transform: uppercase;
+}
+.retr-collapse {
+  display: inline-flex; align-items: center; justify-content: center; flex: none;
+  width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 6px;
+  background: none; color: var(--text-dim); cursor: pointer; transition: color .12s, border-color .12s;
+}
+.retr-collapse:hover { color: var(--text); border-color: var(--accent-line); }
 .retr-head { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; flex: none; }
 .retr-head h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
 .retr-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--good); }