HTML demo: fix diagram crop; click-to-zoom lightbox with pan and +/- zoom.

Diagram uses scrollable wrap without max-height crop; all figures zoomable with full-size viewer, Ctrl+wheel zoom, Esc/backdrop close.

Made-with: Cursor

server/demo_page.html

@@ -302,18 +302,29 @@
     }
     .diagram-wrap {
       border-radius: var(--radius);
-      overflow: hidden;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
       background: var(--diagram-bg);
       border: 1px solid var(--diagram-border);
       box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
+      max-height: min(92vh, 1400px);
     }
     .diagram-wrap img {
       display: block;
       width: 100%;
+      max-width: 100%;
       height: auto;
-      max-height: min(68vh, 820px);
+      max-height: none;
       object-fit: contain;
       object-position: center top;
+      cursor: zoom-in;
+    }
+    img.sde-zoomable {
+      cursor: zoom-in;
+      transition: box-shadow 0.15s ease, transform 0.12s ease;
+    }
+    img.sde-zoomable:hover {
+      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
     }
     .figure-footer {
       display: flex;
@@ -550,6 +561,126 @@
         grid-template-columns: repeat(3, minmax(0, 1fr));
       }
     }
+    /* Full-screen image viewer (click any .sde-zoomable) */
+    .img-lightbox {
+      position: fixed;
+      inset: 0;
+      z-index: 200;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
+      box-sizing: border-box;
+    }
+    .img-lightbox[hidden] {
+      display: none !important;
+    }
+    .img-lightbox-backdrop {
+      position: absolute;
+      inset: 0;
+      border: none;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      cursor: zoom-out;
+      background: rgba(15, 23, 42, 0.9);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+    }
+    .img-lightbox-panel {
+      position: relative;
+      z-index: 1;
+      width: min(98vw, 1920px);
+      max-height: min(96vh, 1200px);
+      display: flex;
+      flex-direction: column;
+      background: #0b1220;
+      border-radius: var(--radius-lg);
+      border: 1px solid rgba(148, 163, 184, 0.35);
+      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
+      overflow: hidden;
+    }
+    .img-lightbox-close {
+      position: absolute;
+      top: 8px;
+      right: 10px;
+      z-index: 3;
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 10px;
+      font-size: 1.5rem;
+      line-height: 1;
+      cursor: pointer;
+      color: #f8fafc;
+      background: rgba(30, 41, 59, 0.95);
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
+    }
+    .img-lightbox-close:hover {
+      background: rgba(51, 65, 85, 0.98);
+    }
+    .img-lightbox-toolbar {
+      position: absolute;
+      top: 8px;
+      left: 10px;
+      z-index: 3;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .img-lightbox-toolbar button {
+      min-width: 40px;
+      height: 36px;
+      padding: 0 10px;
+      font-size: 0.9rem;
+      font-weight: 700;
+      font-family: inherit;
+      border-radius: 8px;
+      border: 1px solid rgba(148, 163, 184, 0.4);
+      cursor: pointer;
+      color: #e2e8f0;
+      background: rgba(30, 41, 59, 0.95);
+    }
+    .img-lightbox-toolbar button:hover {
+      background: rgba(51, 65, 85, 0.98);
+    }
+    .img-lightbox-hint {
+      display: block;
+      margin-top: 8px;
+      font-size: 0.72rem;
+      color: rgba(148, 163, 184, 0.95);
+      line-height: 1.35;
+    }
+    .img-lightbox-scroll {
+      flex: 1;
+      min-height: 120px;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      padding: 52px 14px 44px;
+      text-align: center;
+    }
+    .img-lightbox-stage {
+      display: inline-block;
+      margin: 0 auto;
+    }
+    .img-lightbox-scroll img {
+      display: block;
+      max-width: none;
+      max-height: none;
+      margin: 0 auto;
+      vertical-align: middle;
+      /* width/height set in JS so overflow scroll tracks zoom */
+    }
+    .img-lightbox-caption {
+      margin: 0;
+      padding: 10px 14px 12px;
+      font-size: 0.8125rem;
+      color: #cbd5e1;
+      background: rgba(15, 23, 42, 0.6);
+      border-top: 1px solid rgba(148, 163, 184, 0.25);
+      text-align: center;
+    }
     .link-list a {
       color: var(--accent);
       text-decoration: none;
@@ -670,7 +801,7 @@
             <p class="caption">Runtime flow (solid) vs training and ops (dashed). Reviewer-guarded path optional for safer rollouts.</p>
           </div>
           <div class="diagram-wrap">
-            <img src="/static/diagram-end-to-end-workflow.png" alt="End-to-end workflow: Client, FastAPI, environment core, data and reward layer, training and deployment." width="1600" height="900" loading="eager" decoding="async" />
+            <img class="sde-zoomable" src="/static/diagram-end-to-end-workflow.png" alt="End-to-end workflow: Client, FastAPI, environment core, data and reward layer, training and deployment." width="1600" height="900" loading="eager" decoding="async" title="Click to open full-size viewer (zoom and pan)" />
           </div>
           <div class="figure-footer">
             <div class="legend">
@@ -788,15 +919,15 @@ import wandb
         </div>
         <div class="benchmark-chart-grid">
           <figure class="proof-card">
-            <img src="/static/chart-performance-leap.png" alt="Performance leap: baseline versus RL on a Spider-style headline view" width="900" height="520" loading="lazy" decoding="async" />
+            <img class="sde-zoomable" src="/static/chart-performance-leap.png" alt="Performance leap: baseline versus RL on a Spider-style headline view" width="900" height="520" loading="lazy" decoding="async" title="Click to open full-size viewer (zoom and pan)" />
             <figcaption>Performance leap (Spider-style)</figcaption>
           </figure>
           <figure class="proof-card">
-            <img src="/static/chart-comparison-shift.png" alt="Comparison of models and reward distribution shift" width="900" height="520" loading="lazy" decoding="async" />
+            <img class="sde-zoomable" src="/static/chart-comparison-shift.png" alt="Comparison of models and reward distribution shift" width="900" height="520" loading="lazy" decoding="async" title="Click to open full-size viewer (zoom and pan)" />
             <figcaption>Comparison + reward shift</figcaption>
           </figure>
           <figure class="proof-card">
-            <img src="/static/chart-spider-benchmark.png" alt="Spider-style benchmark headline chart across industry baseline, Qwen-7B base, and RL agent" width="900" height="520" loading="lazy" decoding="async" />
+            <img class="sde-zoomable" src="/static/chart-spider-benchmark.png" alt="Spider-style benchmark headline chart across industry baseline, Qwen-7B base, and RL agent" width="900" height="520" loading="lazy" decoding="async" title="Click to open full-size viewer (zoom and pan)" />
             <figcaption>Spider-style headline chart</figcaption>
           </figure>
         </div>
@@ -810,11 +941,11 @@ import wandb
         </div>
         <div class="proof-grid">
           <figure class="proof-card">
-            <img src="/static/proof-combo.png" alt="Presentation combo chart from training run" width="1200" height="800" loading="lazy" decoding="async" />
+            <img class="sde-zoomable" src="/static/proof-combo.png" alt="Presentation combo chart from training run" width="1200" height="800" loading="lazy" decoding="async" title="Click to open full-size viewer (zoom and pan)" />
             <figcaption>Presentation combo — logged metrics.</figcaption>
           </figure>
           <figure class="proof-card">
-            <img src="/static/proof-distribution-shift.png" alt="Reward distribution shift" width="1200" height="800" loading="lazy" decoding="async" />
+            <img class="sde-zoomable" src="/static/proof-distribution-shift.png" alt="Reward distribution shift" width="1200" height="800" loading="lazy" decoding="async" title="Click to open full-size viewer (zoom and pan)" />
             <figcaption>Per-sample reward shift (baseline vs trained).</figcaption>
           </figure>
         </div>
@@ -920,6 +1051,27 @@ J(pi) = E_{tau ~ pi}[sum_{t=0..T} gamma^t * R_t]</code>
     </footer>
   </div>
 
+  <div id="imgLightbox" class="img-lightbox" hidden role="dialog" aria-modal="true" aria-label="Full-size image viewer">
+    <button type="button" class="img-lightbox-backdrop" id="imgLightboxBackdrop" aria-label="Close viewer"></button>
+    <div class="img-lightbox-panel">
+      <button type="button" class="img-lightbox-close" id="imgLightboxClose" aria-label="Close">×</button>
+      <div class="img-lightbox-toolbar">
+        <button type="button" id="lbZoomOut" title="Zoom out" aria-label="Zoom out">−</button>
+        <button type="button" id="lbZoomReset" title="Reset zoom" aria-label="Reset zoom">100%</button>
+        <button type="button" id="lbZoomIn" title="Zoom in" aria-label="Zoom in">+</button>
+      </div>
+      <div class="img-lightbox-scroll" id="imgLightboxScroll">
+        <div class="img-lightbox-stage" id="imgLightboxStage">
+          <img id="imgLightboxImg" src="" alt="" decoding="async" />
+        </div>
+      </div>
+      <p class="img-lightbox-caption">
+        <span id="imgLightboxCaption"></span>
+        <span class="img-lightbox-hint">Scroll to pan · +/− or Ctrl+scroll to zoom · dark area or Esc to close</span>
+      </p>
+    </div>
+  </div>
+
   <script>
     (function () {
       var btn = document.getElementById("btnOpenTab");
@@ -989,6 +1141,116 @@ J(pi) = E_{tau ~ pi}[sum_{t=0..T} gamma^t * R_t]</code>
         setLoading("btnSubmit", false);
       }
     }
+
+    (function imageLightbox() {
+      var main = document.querySelector("main");
+      var lb = document.getElementById("imgLightbox");
+      var stage = document.getElementById("imgLightboxStage");
+      var lbImg = document.getElementById("imgLightboxImg");
+      var cap = document.getElementById("imgLightboxCaption");
+      var scrollEl = document.getElementById("imgLightboxScroll");
+      var closeBtn = document.getElementById("imgLightboxClose");
+      var backdrop = document.getElementById("imgLightboxBackdrop");
+      var zIn = document.getElementById("lbZoomIn");
+      var zOut = document.getElementById("lbZoomOut");
+      var zReset = document.getElementById("lbZoomReset");
+      if (!main || !lb || !stage || !lbImg || !scrollEl) return;
+
+      var scale = 1;
+
+      function applyZoomedSize() {
+        var nw = lbImg.naturalWidth;
+        var nh = lbImg.naturalHeight;
+        if (!nw || !nh) return;
+        lbImg.style.width = nw * scale + "px";
+        lbImg.style.height = nh * scale + "px";
+      }
+
+      function clearZoomedSize() {
+        lbImg.style.width = "";
+        lbImg.style.height = "";
+      }
+
+      function setScale(next) {
+        scale = Math.min(4, Math.max(0.25, next));
+        applyZoomedSize();
+      }
+
+      function centerScroll() {
+        var el = scrollEl;
+        el.scrollLeft = Math.max(0, (el.scrollWidth - el.clientWidth) / 2);
+        el.scrollTop = Math.max(0, (el.scrollHeight - el.clientHeight) / 2);
+      }
+
+      function openFrom(thumb) {
+        clearZoomedSize();
+        lbImg.removeAttribute("src");
+        scale = 1;
+        lbImg.onload = function () {
+          lbImg.onload = null;
+          applyZoomedSize();
+          requestAnimationFrame(function () {
+            centerScroll();
+            closeBtn.focus();
+          });
+        };
+        lbImg.src = thumb.currentSrc || thumb.src;
+        lbImg.alt = thumb.getAttribute("alt") || "";
+        var fig = thumb.closest("figure");
+        var fc = fig && fig.querySelector("figcaption");
+        var capText = fc ? fc.textContent.replace(/\s+/g, " ").trim() : "";
+        if (!capText) {
+          capText = (thumb.getAttribute("alt") || "Image").trim();
+          if (capText.length > 140) capText = capText.slice(0, 137) + "…";
+        }
+        cap.textContent = capText;
+        lb.hidden = false;
+        lb.setAttribute("aria-hidden", "false");
+        document.body.style.overflow = "hidden";
+        if (lbImg.complete && lbImg.naturalWidth) {
+          lbImg.onload();
+        }
+      }
+
+      function closeLb() {
+        lb.hidden = true;
+        lb.setAttribute("aria-hidden", "true");
+        lbImg.onload = null;
+        lbImg.removeAttribute("src");
+        clearZoomedSize();
+        scale = 1;
+        document.body.style.overflow = "";
+      }
+
+      main.addEventListener("click", function (ev) {
+        var t = ev.target;
+        if (t && t.tagName === "IMG" && t.classList.contains("sde-zoomable")) {
+          ev.preventDefault();
+          openFrom(t);
+        }
+      });
+
+      closeBtn.addEventListener("click", closeLb);
+      backdrop.addEventListener("click", closeLb);
+      zIn.addEventListener("click", function () { setScale(scale * 1.25); });
+      zOut.addEventListener("click", function () { setScale(scale / 1.25); });
+      zReset.addEventListener("click", function () { setScale(1); centerScroll(); });
+
+      lb.addEventListener("wheel", function (ev) {
+        if (lb.hidden) return;
+        if (!ev.ctrlKey && !ev.metaKey) return;
+        ev.preventDefault();
+        setScale(scale * (ev.deltaY < 0 ? 1.1 : 0.9));
+      }, { passive: false });
+
+      document.addEventListener("keydown", function (ev) {
+        if (lb.hidden) return;
+        if (ev.key === "Escape") {
+          ev.preventDefault();
+          closeLb();
+        }
+      });
+    })();
   </script>
 </body>
 </html>