fix(web): render figures on split-origin deploy

- page_image_url resolves against API host, not frontend origin
- figure thumbs load same-origin; stop probing after first 404
- retry papers/health/figures fetches across Cloud Run cold start
- model menu: key-gated group labels with info tooltips

Author: NorthernLightx

web/app/api.js

@@ -47,16 +47,39 @@
 
   // Pre-rendered figure/table thumbnail (scripts/render_figure_thumbs.py). The
   // file is keyed by chunk_id with ":" → "_" (mirrors the Docling crop name).
-  // Small WebP served from the same /pages mount; callers fall back to a
-  // full-page CSS-crop when a thumb is absent (e.g. a freshly uploaded paper).
+  // Small WebP, served same-origin — bundled with the frontend on the split
+  // deploy (Firebase), or from the backend /pages mount on the combined deploy.
+  // Callers fall back to a full-page CSS-crop when a thumb is absent.
   function figThumbUrl(paperId, chunkId) {
     const safe = chunkId.replace(/:/g, "_");
-    return `${API}/pages/${encodeURIComponent(paperId)}/thumbs/${encodeURIComponent(safe)}.webp`;
+    return `/pages/${encodeURIComponent(paperId)}/thumbs/${encodeURIComponent(safe)}.webp`;
+  }
+
+  // /figures + /papers return page_image_url root-relative (/pages/...). On the
+  // split frontend (different origin than the API) it must resolve against the
+  // API host, not window.location.
+  function absPage(u) {
+    return u && u.startsWith("/") ? `${API}${u}` : u;
+  }
+
+  // Cloud Run scales to zero, so the first request after idle (or during a
+  // redeploy) can transiently fail or 5xx while the container spins up. Retry a
+  // few times so a cold start doesn't leave the tab empty with no recovery.
+  async function fetchRetry(url, tries = 3) {
+    for (let i = 0; ; i++) {
+      try {
+        const r = await fetch(url);
+        if (r.ok || i >= tries - 1) return r;
+      } catch (e) {
+        if (i >= tries - 1) throw e;
+      }
+      await new Promise((f) => setTimeout(f, 1200 * (i + 1)));
+    }
   }
 
   async function loadPapers() {
     try {
-      const r = await fetch(`${API}/papers`);
+      const r = await fetchRetry(`${API}/papers`);
       return r.ok ? await r.json() : [];
     } catch {
       return [];
@@ -65,8 +88,8 @@
 
   async function loadHealth() {
     try {
-      const r = await fetch(`${API}/health`);
-      return await r.json();
+      const r = await fetchRetry(`${API}/health`);
+      return r.ok ? await r.json() : {};
     } catch {
       return {};
     }
@@ -76,7 +99,7 @@
   // docling role/label. Used by the Figures gallery and the corpus counts.
   async function loadFigures(limit = 1000) {
     try {
-      const r = await fetch(`${API}/figures?limit=${limit}`);
+      const r = await fetchRetry(`${API}/figures?limit=${limit}`);
       return r.ok ? await r.json() : [];
     } catch {
       return [];
@@ -526,6 +549,7 @@
     supportsVision,
     pageImageUrl,
     figThumbUrl,
+    absPage,
     loadPapers,
     loadHealth,
     loadFigures,

web/app/app.jsx

@@ -138,9 +138,9 @@ function ConnectionControl({ apiKey, setApiKey, model, setModel, demoAvailable }
               <Icon name="check" size={14} className="model-row-check" />
             </button>
             }
-            <div className="model-group-label">free · no charge to your key</div>
+            <div className="model-group-label" title="No charge to your key, rate limits may apply"><span className="label-info">Free (OpenRouter key)<Icon name="info" size={12} /></span></div>
             {freeModels.map(modelRow)}
-            <div className="model-group-label">premium · billed to your key</div>
+            <div className="model-group-label" title="Billed to your key"><span className="label-info">Premium (OpenRouter key)<Icon name="info" size={12} /></span></div>
             {paidModels.map(modelRow)}
           </div>
           {!keyed &&

web/app/figures.jsx

@@ -68,9 +68,13 @@ function splitCaptionData(text) {
 // Crop a 150-DPI page image to a figure's PDF-point bbox. Computes the crop
 // transform from the image's natural size on load; falls back to the full page
 // width until then (and when a chunk has no bbox).
+// Session flag: once a thumb 404s (thumbnails not baked into this deploy), every
+// FigCrop skips the thumb and renders the full-page crop directly — avoids a
+// storm of failed thumb requests across the gallery.
+let thumbsAbsent = false;
 function FigCrop({ url, bbox, fallbackH = 150, eager = false, thumb = null }) {
   const [s, setS] = useState(null);
-  const [thumbFailed, setThumbFailed] = useState(false);
+  const [thumbFailed, setThumbFailed] = useState(thumbsAbsent);
   const onLoad = (e) => {
     const img = e.target;
     const nW = img.naturalWidth, nH = img.naturalHeight;
@@ -93,7 +97,7 @@ function FigCrop({ url, bbox, fallbackH = 150, eager = false, thumb = null }) {
     return (
       <div className="fig-crop" style={{ position: "relative", width: "100%", overflow: "hidden", background: "var(--panel-2)" }}>
         <img src={thumb} alt="" loading={eager ? "eager" : "lazy"} decoding="async"
-          onError={() => setThumbFailed(true)} style={{ width: "100%", display: "block" }} />
+          onError={() => { thumbsAbsent = true; setThumbFailed(true); }} style={{ width: "100%", display: "block" }} />
       </div>
     );
   }
@@ -121,7 +125,7 @@ function FigureCard({ f, onOpen }) {
   const hasCap = name && !/^\[.+\]$/.test(name.trim());
   return (
     <button className="figure-card" onClick={() => onOpen(f)}>
-      <FigCrop url={f.page_image_url} bbox={f.bbox} thumb={window.RAG.figThumbUrl(f.paper_id, f.chunk_id)} />
+      <FigCrop url={window.RAG.absPage(f.page_image_url)} bbox={f.bbox} thumb={window.RAG.figThumbUrl(f.paper_id, f.chunk_id)} />
       <div className="figure-card-body">
         {hasCap
           ? (name.includes("$") || name.includes("\\("))
@@ -192,7 +196,7 @@ function FigureLightbox({ f, onClose }) {
     <div className="lb-scrim" onClick={onClose}>
       <div className="lb rise" onClick={(e) => e.stopPropagation()}>
         <div className="lb-img" style={{ position: "relative" }}>
-          <img ref={imgRef} src={f.page_image_url} alt={`page ${f.page_number}`} onLoad={place} style={{ display: "block", width: "100%", height: "auto" }} />
+          <img ref={imgRef} src={window.RAG.absPage(f.page_image_url)} alt={`page ${f.page_number}`} onLoad={place} style={{ display: "block", width: "100%", height: "auto" }} />
           {ov && (
             <div className="pm-region visual" style={{ position: "absolute", top: ov.top + "px", left: ov.left + "px", width: ov.width + "px", height: ov.height + "px" }}>
               <span className="pm-region-tab">{figCategory(f)} · selected</span>

web/app/papers.jsx

@@ -71,7 +71,7 @@ function PaperDrawer({ p, figs, onClose }) {
                   <div key={f.chunk_id} className="figthumb figthumb-click"
                     onClick={() => setPageItem({ chunk_id: f.chunk_id, paper: f.paper_id, page: f.page_number, pages: [f.page_number], kind: "visual", bbox: f.bbox || null, text: f.caption || "" })}
                     title="View source region on page">
-                    <FigCrop url={f.page_image_url} bbox={f.bbox} fallbackH={92} eager thumb={window.RAG.figThumbUrl(f.paper_id, f.chunk_id)} />
+                    <FigCrop url={window.RAG.absPage(f.page_image_url)} bbox={f.bbox} fallbackH={92} eager thumb={window.RAG.figThumbUrl(f.paper_id, f.chunk_id)} />
                     <div className="figthumb-meta"><span className="mono">p.{f.page_number}</span> · {clip(drawerCaption(f.caption), 40)}</div>
                   </div>
                 ))}