Fix screenshot loading regression; add viewer nav; chart every ranked element

The previous fix routed every screenshot through fetch()+blob: to dodge a
hypothetical canvas-taint issue, but fetch() against file:// screenshots
turns out to be restricted in the packaged app's embedded webview even
though plain <img src> to the same path is not -- so every screenshot
started failing to load, producing the "Still loading this screenshot"
and "Could not load this session's screenshots" messages. Reverted to
direct <img>/Image src loading (the mechanism already proven to work)
for both the per-segment view and the full-session stitching; compositing
for export still works fine since it only draws already-displayed,
same-directory screenshots.

Screenshots are now clickable (not just the maximize button) and the
viewer gained Previous/Next controls (buttons, arrow keys) that swap the
displayed segment in place without closing the viewer.

Element Attention Analysis now plots every row of the existing Ranked
Attention data, in its existing order, instead of 5 aggregated categories
-- one point per ranked element, with the chart widening and the panel
scrolling horizontally once there are enough elements to need it.

Still confined entirely to the report's own HTML/CSS/JS template; no
tracking, screenshot capture, calibration, or analytics code touched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

analysis.py

@@ -437,7 +437,8 @@ __THEME_CSS__
   .hm-toolbar .slider-mini input { accent-color: var(--iux-primary-light); }
   .hm-toolbar .iux-btn { padding: 7px 10px; font-size: 11.5px; margin-left: auto; }
 
-  .shot-wrap { position: relative; border-radius: var(--iux-radius); overflow: hidden; background: var(--iux-bg-alt); border: 1px solid var(--iux-border); }
+  .shot-wrap { position: relative; border-radius: var(--iux-radius); overflow: hidden; background: var(--iux-bg-alt); border: 1px solid var(--iux-border); cursor: zoom-in; }
+  .shot-wrap:hover { box-shadow: var(--iux-shadow-glow); }
   .shot-wrap img, .shot-wrap canvas { display: block; width: 100%; height: auto; }
   .shot-wrap canvas { position: absolute; top: 0; left: 0; }
   .shot-nav { display: flex; align-items: center; justify-content: space-between;
@@ -455,7 +456,9 @@ __THEME_CSS__
   .hm-caption { font-size: 11px; color: var(--iux-text-faint); margin-top: 8px; line-height: 1.5; }
 
   .elem-chart-wrap { position: relative; }
-  .elem-chart-wrap canvas { width: 100%; height: 320px; display: block; }
+  .elem-chart-scroll { overflow-x: auto; overflow-y: hidden; border-radius: var(--iux-radius-sm); }
+  .elem-chart-scroll canvas { height: 340px; display: block; }
+  .elem-chart-hint { font-size: 10.5px; color: var(--iux-text-faint); margin-top: 6px; text-align: right; }
   .elem-tooltip {
     position: absolute; pointer-events: none; background: var(--iux-surface-hi); color: var(--iux-text);
     border: 1px solid var(--iux-border); border-radius: 8px; padding: 8px 12px; font-size: 11.5px;
@@ -480,6 +483,15 @@ __THEME_CSS__
   .iv-stage { flex: 1 1 auto; position: relative; overflow: hidden; cursor: grab; }
   .iv-stage.grabbing { cursor: grabbing; }
   #ivImage { position: absolute; top: 50%; left: 50%; max-width: none; user-select: none; -webkit-user-select: none; }
+  .iv-nav {
+    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
+    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+    color: #f1eefa; background: rgba(18,19,26,0.65); border-color: rgba(255,255,255,0.16);
+  }
+  .iv-nav:hover { background: rgba(139,92,246,0.55); }
+  .iv-nav-prev { left: 16px; }
+  .iv-nav-next { right: 16px; }
+  .iv-nav[disabled] { display: none; }
   .iv-bottombar {
     display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px;
     background: rgba(18,19,26,0.9); border-top: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; flex-wrap: wrap;
@@ -568,11 +580,14 @@ __THEME_CSS__
     </div>
   </div>
   <div class="panel iux-card full iux-fade-in">
-    <h2>__BARCHART_ICON__ Element Attention Analysis</h2>
+    <h2>__BARCHART_ICON__ Element Attention Analysis <span class="n" id="elemChartCount"></span></h2>
     <div class="elem-chart-wrap" id="elemChartWrap">
-      <canvas id="elemChart" width="1100" height="320"></canvas>
+      <div class="elem-chart-scroll" id="elemChartScroll">
+        <canvas id="elemChart" width="1100" height="340"></canvas>
+      </div>
       <div class="elem-tooltip" id="elemTooltip" style="display:none;"></div>
     </div>
+    <div class="elem-chart-hint" id="elemChartHint" style="display:none;">Scroll to see every element &rarr;</div>
   </div>
   <div class="panel iux-card full iux-fade-in">
     <h2>__CLOCK_ICON__ Attention Timeline</h2>
@@ -599,7 +614,9 @@ __THEME_CSS__
     <button type="button" class="iux-btn" id="ivClose" title="Close (Esc)">__CLOSE_ICON__</button>
   </div>
   <div class="iv-stage" id="ivStage">
+    <button type="button" class="iux-btn iv-nav iv-nav-prev" id="ivPrev" title="Previous screenshot">__CHEVRON_LEFT_ICON__</button>
     <img id="ivImage" draggable="false" alt="">
+    <button type="button" class="iux-btn iv-nav iv-nav-next" id="ivNext" title="Next screenshot">__CHEVRON_RIGHT_ICON__</button>
   </div>
   <div class="iv-bottombar">
     <button type="button" class="iux-btn" id="ivZoomOut" title="Zoom out">&minus;</button>
@@ -674,6 +691,9 @@ const Viewer = (function(){
   let dragging = false, dragStartX = 0, dragStartY = 0, panStartX = 0, panStartY = 0;
   let naturalW = 0, naturalH = 0;
   let downloadName = 'insightux-image.png';
+  const prevBtn = document.getElementById('ivPrev');
+  const nextBtn = document.getElementById('ivNext');
+  let onPrev = null, onNext = null;
 
   function applyTransform(){
     img.style.transform = 'translate(-50%, -50%) translate(' + panX + 'px,' + panY + 'px) scale(' + scale + ')';
@@ -708,6 +728,8 @@ const Viewer = (function(){
 
   function onKeydown(e){
     if (e.key === 'Escape') close();
+    else if (e.key === 'ArrowLeft' && onPrev) onPrev();
+    else if (e.key === 'ArrowRight' && onNext) onNext();
   }
 
   function open(opts){
@@ -721,6 +743,10 @@ const Viewer = (function(){
     }
     titleEl.textContent = opts.title || '';
     downloadName = opts.downloadName || 'insightux-image.png';
+    onPrev = opts.onPrev || null;
+    onNext = opts.onNext || null;
+    prevBtn.disabled = !onPrev;
+    nextBtn.disabled = !onNext;
     img.src = dataUrl;
     img.onload = function(){
       naturalW = img.naturalWidth; naturalH = img.naturalHeight;
@@ -773,6 +799,8 @@ const Viewer = (function(){
   zoomSlider.addEventListener('input', function(e){ setScale(e.target.value / 100); });
   document.getElementById('ivClose').addEventListener('click', close);
   document.getElementById('ivBack').addEventListener('click', close);
+  prevBtn.addEventListener('click', function(){ if (onPrev) onPrev(); });
+  nextBtn.addEventListener('click', function(){ if (onNext) onNext(); });
   document.getElementById('ivFullscreen').addEventListener('click', function(){
     if (!document.fullscreenElement) { el.requestFullscreen().catch(function(){}); }
     else { document.exitFullscreen().catch(function(){}); }
@@ -944,32 +972,22 @@ function paintHeatLayer(ctx, w, h, points, intensity, stops, opacity, composite)
 }
 
 // Loads a screenshot as a blob: URL rather than pointing <img> straight at
-// the file:// path. Some embedded webviews (this app's included) treat a
-// file:// image drawn onto a canvas as tainted, so a later toDataURL()/
-// getImageData() throws a SecurityError and the calling click handler dies
-// silently — the exact "button does nothing" symptom. Fetching the same
-// file and handing the canvas a blob: URL instead sidesteps that entirely;
-// the bytes on disk are identical, only how the browser tags their origin
-// changes. Every screenshot used for compositing/export goes through this.
+// Direct load, same as the plain <img src="..."> that already displays
+// these screenshots correctly elsewhere in this report — this is the
+// mechanism confirmed to work in the packaged app. (An earlier version of
+// this function routed everything through fetch()+blob: to dodge a
+// hypothetical canvas-taint issue; that broke plain loading entirely in
+// the real embedded webview, where fetch() against file:// screenshots is
+// restricted even though <img src> to the same path is not. Compositing
+// still works fine here because composeSegmentCanvas()/exportFullSession()
+// only ever draw already-loaded, same-directory screenshots.)
 function loadImage(src){
-  return fetch(src)
-    .then(function(resp){
-      if (!resp.ok) throw new Error('HTTP ' + resp.status);
-      return resp.blob();
-    })
-    .then(function(blob){
-      return new Promise(function(resolve, reject){
-        const url = URL.createObjectURL(blob);
-        const im = new Image();
-        im.onload = function(){ resolve(im); };
-        im.onerror = function(){ reject(new Error('image decode failed')); };
-        im.src = url;
-      });
-    })
-    .catch(function(err){
-      console.warn('[insightux-report] could not load screenshot:', src, err);
-      return null;
-    });
+  return new Promise(function(resolve){
+    const im = new Image();
+    im.onload = function(){ resolve(im); };
+    im.onerror = function(){ resolve(null); };
+    im.src = src;
+  });
 }
 
 // Minimal toast so a failed export/viewer action is visible instead of
@@ -1077,22 +1095,40 @@ function showToast(message, isError){
     return out;
   }
 
-  document.getElementById('hmFullscreen').addEventListener('click', function(){
-    const canvas = composeSegmentCanvas();
-    if (!canvas) { showToast('Still loading this screenshot — try again in a moment.', true); return; }
-    Viewer.open({
-      source: canvas,
-      title: 'Scroll segment ' + (cur+1) + ' of ' + SEGMENTS.length + ' — ' + mode.charAt(0).toUpperCase() + mode.slice(1) + ' heatmap',
-      downloadName: 'insightux-' + mode + '-heatmap-segment-' + (cur+1) + '.png',
+  function segmentTitle(i){
+    return 'Scroll segment ' + (i+1) + ' of ' + SEGMENTS.length + ' — ' + mode.charAt(0).toUpperCase() + mode.slice(1) + ' heatmap';
+  }
+  function segmentDownloadName(i){
+    return 'insightux-' + mode + '-heatmap-segment-' + (i+1) + '.png';
+  }
+
+  // Opens (or, if already open, updates in place) the shared viewer for
+  // segment i — used by the maximize button, clicking the screenshot
+  // itself, and the viewer's own Previous/Next controls.
+  function openSegmentViewer(i){
+    if (i < 0 || i >= SEGMENTS.length) return;
+    if (i !== cur) { cur = i; renderSegment(cur); }
+    renderPromise.then(function(){
+      const canvas = composeSegmentCanvas();
+      if (!canvas) { showToast('Could not prepare this screenshot for viewing.', true); return; }
+      Viewer.open({
+        source: canvas,
+        title: segmentTitle(i),
+        downloadName: segmentDownloadName(i),
+        onPrev: i > 0 ? function(){ openSegmentViewer(i - 1); } : null,
+        onNext: i < SEGMENTS.length - 1 ? function(){ openSegmentViewer(i + 1); } : null,
+      });
     });
-  });
+  }
+
+  document.getElementById('hmFullscreen').addEventListener('click', function(){ openSegmentViewer(cur); });
   document.getElementById('hmDownload').addEventListener('click', function(){
     const canvas = composeSegmentCanvas();
-    if (!canvas) { showToast('Still loading this screenshot — try again in a moment.', true); return; }
+    if (!canvas) { showToast('Could not prepare this screenshot for export.', true); return; }
     try {
       const a = document.createElement('a');
       a.href = canvas.toDataURL('image/png');
-      a.download = 'insightux-' + mode + '-heatmap-segment-' + (cur+1) + '.png';
+      a.download = segmentDownloadName(cur);
       a.click();
     } catch (err) {
       console.warn('[insightux-report] segment download failed:', err);
@@ -1100,11 +1136,18 @@ function showToast(message, isError){
     }
   });
 
-  async function renderSegment(i){
+  let renderPromise = Promise.resolve();
+
+  // Renders segment i's screenshot + active heat layer(s) exactly as
+  // before — plain <img src> is what reliably displays these screenshots
+  // in the packaged app, so that part is unchanged. Returns a promise that
+  // resolves once the image has actually painted, so callers that need the
+  // pixels (the viewer, download) can wait for it instead of racing it.
+  function renderSegment(i){
     const seg = SEGMENTS[i];
     area.innerHTML = `
-      <div class="shot-wrap" id="shotWrap">
-        <img id="shotImg" alt="">
+      <div class="shot-wrap" id="shotWrap" title="Click to open in viewer">
+        <img id="shotImg" src="${seg.screenshot}" alt="">
         <canvas id="shotCanvas"></canvas>
       </div>
       <div class="shot-nav">
@@ -1116,24 +1159,22 @@ function showToast(message, isError){
 
     document.getElementById('prevBtn').onclick = () => { if (cur>0){ cur--; renderSegment(cur); } };
     document.getElementById('nextBtn').onclick = () => { if (cur<SEGMENTS.length-1){ cur++; renderSegment(cur); } };
+    document.getElementById('shotWrap').addEventListener('click', function(){ openSegmentViewer(i); });
 
     const img = document.getElementById('shotImg');
     const cv  = document.getElementById('shotCanvas');
     const ctx = cv.getContext('2d');
 
-    function paint(){
-      cv.width = img.naturalWidth;
-      cv.height = img.naturalHeight;
-      paintActive(ctx, cv.width, cv.height);
-    }
-
-    // Loaded as a blob: URL (see loadImage()) so the <img> that ends up on
-    // screen is already non-tainting for the compose/download/fullscreen
-    // canvas operations above — same fix as the full-session export below.
-    const loaded = await loadImage(seg.screenshot);
-    if (!loaded || document.getElementById('shotImg') !== img) return;  // segment may have changed while awaiting
-    img.src = loaded.src;
-    if (img.complete) paint(); else img.onload = paint;
+    renderPromise = new Promise(function(resolve){
+      function paint(){
+        cv.width = img.naturalWidth;
+        cv.height = img.naturalHeight;
+        paintActive(ctx, cv.width, cv.height);
+        resolve();
+      }
+      if (img.complete && img.naturalWidth) paint(); else img.onload = paint;
+    });
+    return renderPromise;
   }
 
   renderSegment(cur);
@@ -1204,59 +1245,44 @@ function showToast(message, isError){
   document.getElementById('exportCombined').addEventListener('click', function(){ exportFullSession('combined'); });
 })();
 
-// ---------- Element Attention Analysis: line chart, client-side
-// re-aggregation of the already-computed RANKING array (compute_dwell_ranking()
-// output) — no new metric, just grouped by element type and charted. ----------
+// ---------- Element Attention Analysis: line chart plotting EVERY row of
+// the already-computed RANKING array (compute_dwell_ranking() output, in
+// its existing order) — one point per ranked element, no aggregation, no
+// new metric, nothing dropped. ----------
 (function(){
   const wrap = document.getElementById('elemChartWrap');
+  const scrollBox = document.getElementById('elemChartScroll');
   const cv = document.getElementById('elemChart');
   const tooltip = document.getElementById('elemTooltip');
+  const countEl = document.getElementById('elemChartCount');
+  const hint = document.getElementById('elemChartHint');
   const ctx = cv.getContext('2d');
 
   if (!RANKING.length){
-    wrap.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('bar-chart', 26) + '</span>Not enough attention data yet to categorize by element type.</div>';
-    return;
-  }
-  const CATS = {
-    image: { name: 'Images' },
-    video: { name: 'Video & Embeds' },
-    text:  { name: 'Headings & Text' },
-    nav:   { name: 'Navigation' },
-    other: { name: 'Buttons & Other' },
-  };
-  function categoryFor(label){
-    if (label.indexOf('Image') === 0) return 'image';
-    if (label.indexOf('Video') === 0 || label.indexOf('Embedded') === 0) return 'video';
-    if (label.indexOf('heading') !== -1 || label.indexOf('Heading') === 0 || label.indexOf('Text') === 0) return 'text';
-    if (label.indexOf('Navigation') === 0) return 'nav';
-    return 'other';
-  }
-  const totals = {};
-  RANKING.forEach(r => { const c = categoryFor(r.label); totals[c] = (totals[c] || 0) + r.seconds; });
-  const grand = Object.values(totals).reduce((a,b) => a+b, 0) || 1;
-  const points = Object.keys(totals).map(key => ({
-    key, name: CATS[key].name,
-    seconds: Math.round(totals[key] * 10) / 10,
-    pct: Math.round(100 * totals[key] / grand),
-  })).filter(r => r.seconds > 0).sort((a,b) => b.seconds - a.seconds);
-
-  if (!points.length){
-    wrap.innerHTML = '<div class="empty">No categorized attention data yet.</div>';
+    wrap.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('bar-chart', 26) + '</span>Not enough attention data yet to plot.</div>';
     return;
   }
 
+  // One point per Ranked Attention row, same order, same values — RANKING
+  // is already sorted by seconds descending by compute_dwell_ranking().
+  const points = RANKING.map(r => ({ name: r.label, seconds: r.seconds, pct: r.pct }));
+  countEl.textContent = points.length + (points.length === 1 ? ' element' : ' elements');
+
+  const MIN_POINT_GAP = 46;  // px between points before labels start colliding
   let animProgress = 0;
   let hoverIdx = -1;
   let raf = null;
 
   function layout(){
-    const rect = wrap.getBoundingClientRect();
-    cv.width = Math.max(320, Math.round(rect.width));
-    cv.height = 320;
+    const containerW = scrollBox.clientWidth || wrap.getBoundingClientRect().width;
+    const needed = 84 + points.length * MIN_POINT_GAP;
+    cv.width = Math.max(320, Math.round(containerW), needed);
+    cv.height = 340;
+    hint.style.display = needed > containerW ? 'block' : 'none';
   }
 
   function geometry(){
-    const padLeft = 54, padRight = 30, padTop = 26, padBottom = 46;
+    const padLeft = 54, padRight = 30, padTop = 26, padBottom = 56;
     const plotW = cv.width - padLeft - padRight;
     const plotH = cv.height - padTop - padBottom;
     const maxVal = Math.max.apply(null, points.map(p => p.seconds)) || 1;
@@ -1328,7 +1354,8 @@ function showToast(message, isError){
       ctx.stroke();
     }
 
-    // markers + x-axis labels
+    // markers + rotated x-axis labels (many ranked elements, so labels are
+    // angled to stay readable without overlapping their neighbors)
     pts.forEach((pt, i) => {
       const isHover = i === hoverIdx;
       ctx.beginPath();
@@ -1339,11 +1366,15 @@ function showToast(message, isError){
       ctx.strokeStyle = surface;
       ctx.stroke();
 
+      ctx.save();
+      ctx.translate(pt.x, g.padTop + g.plotH + 10);
+      ctx.rotate(-Math.PI / 4);
       ctx.fillStyle = isHover ? strong : dim;
-      ctx.font = isHover ? '600 11px -apple-system, Arial' : '11px -apple-system, Arial';
-      ctx.textAlign = 'center';
-      const label = pt.p.name.length > 15 ? pt.p.name.slice(0,14) + '…' : pt.p.name;
-      ctx.fillText(label, pt.x, cv.height - g.padBottom + 18);
+      ctx.font = isHover ? '600 10.5px -apple-system, Arial' : '10.5px -apple-system, Arial';
+      ctx.textAlign = 'right';
+      const label = pt.p.name.length > 20 ? pt.p.name.slice(0,19) + '…' : pt.p.name;
+      ctx.fillText(label, 0, 0);
+      ctx.restore();
     });
 
     // axis baseline
@@ -1357,7 +1388,7 @@ function showToast(message, isError){
     ctx.fillStyle = faint;
     ctx.font = '600 10px -apple-system, Arial';
     ctx.textAlign = 'center';
-    ctx.fillText('WEBPAGE ELEMENT TYPE', g.padLeft + g.plotW / 2, cv.height - 6);
+    ctx.fillText('RANKED WEBPAGE ELEMENTS (' + pts.length + ')', g.padLeft + g.plotW / 2, cv.height - 6);
     ctx.save();
     ctx.translate(14, g.padTop + g.plotH / 2);
     ctx.rotate(-Math.PI / 2);
@@ -1539,6 +1570,8 @@ def generate_report(session_dir):
     html = html.replace("__BARCHART_ICON__", theme.icon("bar-chart", 15))
     html = html.replace("__BACK_ICON__", theme.icon("arrow-left", 14))
     html = html.replace("__CLOSE_ICON__", theme.icon("x", 14))
+    html = html.replace("__CHEVRON_LEFT_ICON__", theme.icon("chevron-left", 20))
+    html = html.replace("__CHEVRON_RIGHT_ICON__", theme.icon("chevron-right", 20))
 
     out_path = os.path.join(session_dir, "analysis_report.html")
     with open(out_path, "w", encoding="utf-8") as f: