Fix report viewer, image export, and add navigation/analytics polish

Root-caused the "downloaded images are black" bug: the download/export
code was reading pixels only from the transparent heat-overlay canvas,
never the underlying screenshot it's layered on top of via CSS -- a
mostly-transparent PNG renders as black in most viewers. Added a compose
step (screenshot + heat drawn onto one opaque canvas) used by every
export path, plus a white background fill in the full-session stitcher
to cover small gaps between periodically-captured screenshots.

Replaced the dead-end CSS-only "fullscreen" (no way back once entered)
with a real image viewer: wheel zoom, drag-to-pan, double-click zoom,
fit width/screen/actual-size, native Fullscreen API with a visible exit
control, and ESC to close. The three full-session export buttons now
open a result in this viewer instead of silently forcing a download.

Replaced the Element Attention progress-bar rows with an actual canvas
bar chart (gridlines, axis labels, hover tooltips, entrance animation,
theme-aware repaint) over the same category totals as before, and added
a "Back to Browser" button that just calls history.back() -- no tracking
state touched. Everything here is confined to the report's own HTML/CSS/JS
template; no tracking, calibration, analytics, or data-collection code
was touched.

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

analysis.py

@@ -440,8 +440,6 @@ __THEME_CSS__
   .shot-wrap { position: relative; border-radius: var(--iux-radius); overflow: hidden; background: var(--iux-bg-alt); border: 1px solid var(--iux-border); }
   .shot-wrap img, .shot-wrap canvas { display: block; width: 100%; height: auto; }
   .shot-wrap canvas { position: absolute; top: 0; left: 0; }
-  .shot-wrap.fullscreen { position: fixed; inset: 16px; z-index: 999999; border-radius: var(--iux-radius-lg); }
-  .shot-wrap.fullscreen img, .shot-wrap.fullscreen canvas { width: 100%; height: 100%; object-fit: contain; }
   .shot-nav { display: flex; align-items: center; justify-content: space-between;
               margin-top: 10px; font-size: 12px; color: var(--iux-text-dim); }
   .shot-nav .iux-btn { padding: 7px 14px; font-size: 12px; }
@@ -453,17 +451,48 @@ __THEME_CSS__
   .hm-export-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
   .hm-export-row .hm-export-label { font-size: 11.5px; color: var(--iux-text-faint); margin-right: 2px; display: flex; align-items: center; gap: 5px; }
   .hm-export-row .iux-btn { padding: 7px 12px; font-size: 11.5px; }
+  .hm-export-row .iux-btn[disabled] { opacity: .6; cursor: default; }
   .hm-caption { font-size: 11px; color: var(--iux-text-faint); margin-top: 8px; line-height: 1.5; }
 
-  .elem-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
-  .elem-label { display: flex; align-items: center; gap: 7px; width: 180px; flex-shrink: 0; font-size: 12.5px; color: var(--iux-text-dim); }
-  .elem-bar-bg { flex: 1 1 auto; background: var(--iux-surface-hi); border-radius: 6px; height: 14px; overflow: hidden; }
-  .elem-bar-fill { height: 100%; background: var(--iux-accent-grad); border-radius: 6px; width: 0; transition: width .6s var(--iux-ease); }
-  .elem-val { width: 56px; text-align: right; font-size: 12px; color: var(--iux-text-faint); flex-shrink: 0; }
+  .elem-chart-wrap { position: relative; }
+  .elem-chart-wrap canvas { width: 100%; height: 320px; display: block; }
+  .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;
+    box-shadow: var(--iux-shadow); z-index: 10; line-height: 1.5; white-space: nowrap;
+  }
+
+  .back-nav { position: fixed; top: 18px; left: 18px; z-index: 500; padding: 9px 16px; font-size: 12.5px; }
+
+  .iux-viewer {
+    position: fixed; inset: 0; z-index: 2000000; display: none; flex-direction: column;
+    background: rgba(10,8,20,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+  }
+  .iux-viewer.open { display: flex; }
+  .iv-topbar {
+    display: flex; align-items: center; gap: 10px; padding: 12px 18px;
+    background: rgba(18,19,26,0.9); border-bottom: 1px solid rgba(255,255,255,0.1); flex-shrink: 0;
+  }
+  .iv-topbar .iux-btn { color: #f1eefa; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
+  .iv-topbar .iux-btn:hover { background: rgba(255,255,255,0.18); }
+  .iv-title { color: #f1eefa; font-size: 13px; font-weight: 600; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .iv-zoom-pct { color: #cabdf0; font-size: 12px; min-width: 44px; text-align: center; flex-shrink: 0; }
+  .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-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;
+  }
+  .iv-bottombar .iux-btn { color: #f1eefa; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); padding: 7px 12px; font-size: 12px; }
+  .iv-bottombar .iux-btn:hover { background: rgba(255,255,255,0.18); }
+  .iv-bottombar input[type=range] { accent-color: var(--iux-primary-light); width: 120px; }
 </style>
 </head>
 <body>
 
+<button type="button" class="iux-btn back-nav iux-glass" id="backNav" title="Return to the browser without restarting tracking">__BACK_ICON__ Back to Browser</button>
+
 <div class="topbar iux-fade-in">
   <div class="brand">
     <div class="mark">__EYE_ICON__</div>
@@ -540,7 +569,10 @@ __THEME_CSS__
   </div>
   <div class="panel iux-card full iux-fade-in">
     <h2>__BARCHART_ICON__ Element Attention Analysis</h2>
-    <div id="elementChart"></div>
+    <div class="elem-chart-wrap" id="elemChartWrap">
+      <canvas id="elemChart" width="1100" height="320"></canvas>
+      <div class="elem-tooltip" id="elemTooltip" style="display:none;"></div>
+    </div>
   </div>
   <div class="panel iux-card full iux-fade-in">
     <h2>__CLOCK_ICON__ Attention Timeline</h2>
@@ -557,6 +589,29 @@ __THEME_CSS__
   </div>
 </div>
 
+<div id="iuxViewer" class="iux-viewer" aria-hidden="true">
+  <div class="iv-topbar">
+    <button type="button" class="iux-btn" id="ivBack" title="Back">__BACK_ICON__ Back</button>
+    <div class="iv-title" id="ivTitle"></div>
+    <div class="iv-zoom-pct" id="ivZoomPct">100%</div>
+    <button type="button" class="iux-btn" id="ivFullscreen" title="Toggle fullscreen">__MAXIMIZE_ICON__</button>
+    <button type="button" class="iux-btn" id="ivDownload" title="Download">__DOWNLOAD_ICON__</button>
+    <button type="button" class="iux-btn" id="ivClose" title="Close (Esc)">__CLOSE_ICON__</button>
+  </div>
+  <div class="iv-stage" id="ivStage">
+    <img id="ivImage" draggable="false" alt="">
+  </div>
+  <div class="iv-bottombar">
+    <button type="button" class="iux-btn" id="ivZoomOut" title="Zoom out">&minus;</button>
+    <input type="range" id="ivZoomSlider" min="10" max="400" value="100">
+    <button type="button" class="iux-btn" id="ivZoomIn" title="Zoom in">+</button>
+    <button type="button" class="iux-btn" id="ivReset" title="Reset zoom">Reset</button>
+    <button type="button" class="iux-btn" id="ivFitWidth" title="Fit width">Fit Width</button>
+    <button type="button" class="iux-btn" id="ivFitScreen" title="Fit screen">Fit Screen</button>
+    <button type="button" class="iux-btn" id="ivActual" title="Actual size">100%</button>
+  </div>
+</div>
+
 <script>
 __ICONS_JS__
 __THEME_JS__
@@ -593,6 +648,139 @@ document.getElementById('btnFilter').addEventListener('click', function(){
   input.focus();
 });
 
+// ---------- Back to Browser: pure client-side history navigation, never
+// touches the Api/tracking state — just returns to the previously loaded
+// page in this same pywebview window, same as a normal browser back. ----------
+document.getElementById('backNav').addEventListener('click', function(){
+  if (window.history.length > 1) {
+    window.history.back();
+  } else if (document.referrer) {
+    window.location.href = document.referrer;
+  }
+});
+
+// ---------- Shared image viewer: fullscreen heatmap segments and the
+// full-session stitched exports both open through here instead of forcing
+// an immediate download or a CSS-only "fullscreen" with no way out. ----------
+const Viewer = (function(){
+  const el = document.getElementById('iuxViewer');
+  const img = document.getElementById('ivImage');
+  const stage = document.getElementById('ivStage');
+  const titleEl = document.getElementById('ivTitle');
+  const zoomPct = document.getElementById('ivZoomPct');
+  const zoomSlider = document.getElementById('ivZoomSlider');
+  const MIN_SCALE = 0.1, MAX_SCALE = 4;
+  let scale = 1, panX = 0, panY = 0;
+  let dragging = false, dragStartX = 0, dragStartY = 0, panStartX = 0, panStartY = 0;
+  let naturalW = 0, naturalH = 0;
+  let downloadName = 'insightux-image.png';
+
+  function applyTransform(){
+    img.style.transform = 'translate(-50%, -50%) translate(' + panX + 'px,' + panY + 'px) scale(' + scale + ')';
+    zoomPct.textContent = Math.round(scale * 100) + '%';
+    zoomSlider.value = Math.round(scale * 100);
+  }
+  function setScale(next){
+    scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, next));
+    applyTransform();
+  }
+  function stageSize(){
+    const r = stage.getBoundingClientRect();
+    return { w: r.width, h: r.height };
+  }
+  function fitScreen(){
+    if (!naturalW || !naturalH) return;
+    const s = stageSize();
+    const next = Math.min((s.w - 32) / naturalW, (s.h - 32) / naturalH, MAX_SCALE);
+    scale = (isFinite(next) && next > 0) ? next : 1;
+    panX = 0; panY = 0;
+    applyTransform();
+  }
+  function fitWidth(){
+    if (!naturalW) return;
+    const s = stageSize();
+    const next = Math.min((s.w - 32) / naturalW, MAX_SCALE);
+    scale = (isFinite(next) && next > 0) ? next : 1;
+    panX = 0; panY = 0;
+    applyTransform();
+  }
+  function actualSize(){ scale = 1; panX = 0; panY = 0; applyTransform(); }
+
+  function onKeydown(e){
+    if (e.key === 'Escape') close();
+  }
+
+  function open(opts){
+    titleEl.textContent = opts.title || '';
+    downloadName = opts.downloadName || 'insightux-image.png';
+    const source = opts.source;
+    img.src = (typeof source === 'string') ? source : source.toDataURL('image/png');
+    img.onload = function(){
+      naturalW = img.naturalWidth; naturalH = img.naturalHeight;
+      fitScreen();
+    };
+    el.classList.add('open');
+    el.setAttribute('aria-hidden', 'false');
+    document.addEventListener('keydown', onKeydown, true);
+  }
+  function close(){
+    if (document.fullscreenElement) { document.exitFullscreen().catch(function(){}); }
+    el.classList.remove('open');
+    el.setAttribute('aria-hidden', 'true');
+    document.removeEventListener('keydown', onKeydown, true);
+  }
+
+  el.addEventListener('wheel', function(e){
+    if (!el.classList.contains('open')) return;
+    e.preventDefault();
+    setScale(scale + (e.deltaY > 0 ? -1 : 1) * 0.12 * scale);
+  }, { passive: false });
+
+  stage.addEventListener('mousedown', function(e){
+    dragging = true;
+    dragStartX = e.clientX; dragStartY = e.clientY;
+    panStartX = panX; panStartY = panY;
+    stage.classList.add('grabbing');
+  });
+  window.addEventListener('mousemove', function(e){
+    if (!dragging) return;
+    panX = panStartX + (e.clientX - dragStartX);
+    panY = panStartY + (e.clientY - dragStartY);
+    applyTransform();
+  });
+  window.addEventListener('mouseup', function(){
+    dragging = false;
+    stage.classList.remove('grabbing');
+  });
+  stage.addEventListener('dblclick', function(){
+    if (scale > 1.05) fitScreen(); else setScale(2);
+  });
+
+  document.getElementById('ivZoomIn').addEventListener('click', function(){ setScale(scale + 0.25); });
+  document.getElementById('ivZoomOut').addEventListener('click', function(){ setScale(scale - 0.25); });
+  document.getElementById('ivReset').addEventListener('click', actualSize);
+  document.getElementById('ivFitWidth').addEventListener('click', fitWidth);
+  document.getElementById('ivFitScreen').addEventListener('click', fitScreen);
+  document.getElementById('ivActual').addEventListener('click', actualSize);
+  zoomSlider.addEventListener('input', function(e){ setScale(e.target.value / 100); });
+  document.getElementById('ivClose').addEventListener('click', close);
+  document.getElementById('ivBack').addEventListener('click', close);
+  document.getElementById('ivFullscreen').addEventListener('click', function(){
+    if (!document.fullscreenElement) { el.requestFullscreen().catch(function(){}); }
+    else { document.exitFullscreen().catch(function(){}); }
+  });
+  document.getElementById('ivDownload').addEventListener('click', function(){
+    const a = document.createElement('a');
+    a.href = img.src;
+    a.download = downloadName;
+    a.click();
+  });
+  el.addEventListener('click', function(e){ if (e.target === el) close(); });
+  window.addEventListener('resize', function(){ if (el.classList.contains('open')) fitScreen(); });
+
+  return { open: open, close: close };
+})();
+
 // ---------- icon inference from friendly_label() output ----------
 function iconForLabel(label){
   if (!label) return 'click';
@@ -773,7 +961,6 @@ function loadImage(src){
 
   let cur = 0;
   let mode = 'eye';   // 'eye' | 'mouse' | 'combined'
-  let fullscreen = false;
   const heatState = {
     eye:      { opacity: 0.9, intensity: 0.09 },
     mouse:    { opacity: 0.9, intensity: 0.12 },
@@ -815,16 +1002,42 @@ function loadImage(src){
     heatState[mode].intensity = e.target.value / 33;
     renderSegment(cur);
   });
+  // Flattens the visible screenshot + its heat overlay into ONE opaque
+  // canvas. The on-screen view layers a transparent <canvas> on top of an
+  // <img> purely via CSS positioning — exporting the heat canvas alone (as
+  // earlier code did) produces a mostly-transparent PNG that most viewers
+  // render as solid black. This is the single source both the fullscreen
+  // viewer and the direct download button use, so both always show the
+  // real composited picture.
+  function composeSegmentCanvas(){
+    const shotImg = document.getElementById('shotImg');
+    const heatCv = document.getElementById('shotCanvas');
+    if (!shotImg || !heatCv || !shotImg.complete || !shotImg.naturalWidth) return null;
+    const out = document.createElement('canvas');
+    out.width = shotImg.naturalWidth;
+    out.height = shotImg.naturalHeight;
+    const octx = out.getContext('2d');
+    octx.fillStyle = '#ffffff';
+    octx.fillRect(0, 0, out.width, out.height);
+    octx.drawImage(shotImg, 0, 0);
+    octx.drawImage(heatCv, 0, 0);
+    return out;
+  }
+
   document.getElementById('hmFullscreen').addEventListener('click', function(){
-    fullscreen = !fullscreen;
-    const wrap = document.getElementById('shotWrap');
-    if (wrap) wrap.classList.toggle('fullscreen', fullscreen);
+    const canvas = composeSegmentCanvas();
+    if (!canvas) 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',
+    });
   });
   document.getElementById('hmDownload').addEventListener('click', function(){
-    const cv = document.getElementById('shotCanvas');
-    if (!cv) return;
+    const canvas = composeSegmentCanvas();
+    if (!canvas) return;
     const a = document.createElement('a');
-    a.href = cv.toDataURL('image/png');
+    a.href = canvas.toDataURL('image/png');
     a.download = 'insightux-' + mode + '-heatmap-segment-' + (cur+1) + '.png';
     a.click();
   });
@@ -832,7 +1045,7 @@ function loadImage(src){
   function renderSegment(i){
     const seg = SEGMENTS[i];
     area.innerHTML = `
-      <div class="shot-wrap${fullscreen ? ' fullscreen' : ''}" id="shotWrap">
+      <div class="shot-wrap" id="shotWrap">
         <img id="shotImg" src="${seg.screenshot}">
         <canvas id="shotCanvas"></canvas>
       </div>
@@ -878,6 +1091,13 @@ function loadImage(src){
       const full = document.createElement('canvas');
       full.width = width; full.height = height;
       const fctx = full.getContext('2d');
+      // Fill first: screenshots are only captured periodically, so there can
+      // be small gaps between stitched segments. Left transparent, those
+      // gaps render as solid black in most image viewers/downloads — a
+      // plain white fill (matching typical page background) fixes that
+      // without touching how or when screenshots are captured.
+      fctx.fillStyle = '#ffffff';
+      fctx.fillRect(0, 0, width, height);
       SEGMENTS.forEach((s, i) => { if (imgs[i]) fctx.drawImage(imgs[i], 0, s.scrollY); });
 
       const st = heatState[exportMode] || heatState.eye;
@@ -891,10 +1111,15 @@ function loadImage(src){
         paintHeatLayer(fctx, width, height, mouseFull, st.intensity, MOUSE_STOPS, st.opacity, exportMode === 'combined' ? 'lighter' : 'source-over');
       }
 
-      const a = document.createElement('a');
-      a.href = full.toDataURL('image/png');
-      a.download = 'insightux-full-session-' + exportMode + '-heatmap.png';
-      a.click();
+      // Opens the composed image in the shared viewer instead of forcing an
+      // immediate download — the viewer's own Download button saves it
+      // once the user has actually looked at it, same as a PDF/image
+      // preview rather than a silent file-save.
+      Viewer.open({
+        source: full,
+        title: 'Full Session — ' + exportMode.charAt(0).toUpperCase() + exportMode.slice(1) + ' Heatmap',
+        downloadName: 'insightux-full-session-' + exportMode + '-heatmap.png',
+      });
     } finally {
       if (btn) { btn.innerHTML = original; btn.disabled = false; }
     }
@@ -905,19 +1130,25 @@ function loadImage(src){
   document.getElementById('exportCombined').addEventListener('click', function(){ exportFullSession('combined'); });
 })();
 
-// ---------- Element Attention Analysis (client-side re-aggregation of RANKING) ----------
+// ---------- Element Attention Analysis: vertical bar 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. ----------
 (function(){
-  const el = document.getElementById('elementChart');
+  const wrap = document.getElementById('elemChartWrap');
+  const cv = document.getElementById('elemChart');
+  const tooltip = document.getElementById('elemTooltip');
+  const ctx = cv.getContext('2d');
+
   if (!RANKING.length){
-    el.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('bar-chart', 26) + '</span>Not enough attention data yet to categorize by element type.</div>';
+    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', icon: 'image' },
-    video: { name: 'Video & Embeds', icon: 'video' },
-    text:  { name: 'Headings & Text', icon: 'type' },
-    nav:   { name: 'Navigation', icon: 'menu' },
-    other: { name: 'Buttons & Other', icon: 'click' },
+    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';
@@ -929,27 +1160,136 @@ function loadImage(src){
   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 rows = Object.keys(totals).map(key => ({
-    key, name: CATS[key].name, icon: CATS[key].icon,
+  const bars = 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 (!rows.length){
-    el.innerHTML = '<div class="empty">No categorized attention data yet.</div>';
+  if (!bars.length){
+    wrap.innerHTML = '<div class="empty">No categorized attention data yet.</div>';
     return;
   }
-  const maxSeconds = rows[0].seconds || 1;
-  el.innerHTML = rows.map(r => `
-    <div class="elem-row" title="${r.name}: ${r.seconds}s (${r.pct}% of attributed attention)">
-      <div class="elem-label">${iuxIcon(r.icon, 15)}<span>${r.name}</span></div>
-      <div class="elem-bar-bg"><div class="elem-bar-fill" data-w="${Math.round(100 * r.seconds / maxSeconds)}"></div></div>
-      <div class="elem-val">${r.seconds}s &middot; ${r.pct}%</div>
-    </div>
-  `).join('');
-  requestAnimationFrame(function(){
-    document.querySelectorAll('.elem-bar-fill').forEach(function(bar){ bar.style.width = bar.dataset.w + '%'; });
+
+  const COLORS = ['#6366F1', '#8B5CF6', '#C084FC', '#67E8F9', '#FBBF24', '#34D399'];
+  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;
+  }
+
+  function geometry(){
+    const padLeft = 54, padRight = 20, padTop = 20, padBottom = 46;
+    const plotW = cv.width - padLeft - padRight;
+    const plotH = cv.height - padTop - padBottom;
+    const gap = plotW / bars.length;
+    const barW = Math.min(70, gap * 0.55);
+    const maxVal = bars[0].seconds || 1;
+    return { padLeft, padRight, padTop, padBottom, plotW, plotH, gap, barW, maxVal };
+  }
+
+  function paint(){
+    const dim = getComputedStyle(document.documentElement).getPropertyValue('--iux-text-dim').trim() || '#9a95b3';
+    const faint = getComputedStyle(document.documentElement).getPropertyValue('--iux-text-faint').trim() || '#6e6885';
+    const border = getComputedStyle(document.documentElement).getPropertyValue('--iux-border').trim() || 'rgba(148,138,179,0.16)';
+    const g = geometry();
+    ctx.clearRect(0, 0, cv.width, cv.height);
+
+    // gridlines + y-axis labels
+    const gridSteps = 4;
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = border;
+    for (let i = 0; i <= gridSteps; i++){
+      const v = (g.maxVal / gridSteps) * i;
+      const y = g.padTop + g.plotH - (v / g.maxVal) * g.plotH;
+      ctx.beginPath();
+      ctx.moveTo(g.padLeft, y);
+      ctx.lineTo(cv.width - g.padRight, y);
+      ctx.stroke();
+      ctx.fillStyle = faint;
+      ctx.font = '10.5px -apple-system, Arial';
+      ctx.textAlign = 'right';
+      ctx.fillText(v.toFixed(1) + 's', g.padLeft - 8, y + 3);
+    }
+
+    // bars (rounded top only) + x-axis labels
+    bars.forEach((b, i) => {
+      const x = g.padLeft + i * g.gap + (g.gap - g.barW) / 2;
+      const targetH = (b.seconds / g.maxVal) * g.plotH;
+      const h = Math.max(0, targetH * animProgress);
+      const y = g.padTop + g.plotH - h;
+      const grad = ctx.createLinearGradient(0, y, 0, g.padTop + g.plotH);
+      const base = COLORS[i % COLORS.length];
+      grad.addColorStop(0, base);
+      grad.addColorStop(1, 'rgba(99,102,241,0.32)');
+      ctx.fillStyle = grad;
+      ctx.globalAlpha = (hoverIdx === -1 || hoverIdx === i) ? 1 : 0.55;
+      const rr = Math.min(8, g.barW / 2, Math.max(0, h));
+      ctx.beginPath();
+      ctx.moveTo(x, y + rr);
+      ctx.arcTo(x, y, x + rr, y, rr);
+      ctx.arcTo(x + g.barW, y, x + g.barW, y + rr, rr);
+      ctx.lineTo(x + g.barW, g.padTop + g.plotH);
+      ctx.lineTo(x, g.padTop + g.plotH);
+      ctx.closePath();
+      ctx.fill();
+      ctx.globalAlpha = 1;
+
+      ctx.fillStyle = i === hoverIdx ? (document.documentElement.getAttribute('data-theme') === 'light' ? '#211D33' : '#F1EEFA') : dim;
+      ctx.font = i === hoverIdx ? '600 11px -apple-system, Arial' : '11px -apple-system, Arial';
+      ctx.textAlign = 'center';
+      const label = b.name.length > 15 ? b.name.slice(0,14) + '…' : b.name;
+      ctx.fillText(label, x + g.barW/2, cv.height - g.padBottom + 18);
+    });
+
+    // axis baseline
+    ctx.strokeStyle = border;
+    ctx.beginPath();
+    ctx.moveTo(g.padLeft, g.padTop + g.plotH);
+    ctx.lineTo(cv.width - g.padRight, g.padTop + g.plotH);
+    ctx.stroke();
+  }
+
+  function animate(){
+    animProgress = Math.min(1, animProgress + 0.06);
+    paint();
+    if (animProgress < 1) { raf = requestAnimationFrame(animate); }
+  }
+
+  function redraw(){ layout(); animProgress = 1; paint(); }
+  window.insightuxRepaintCanvases.push(redraw);
+
+  cv.addEventListener('mousemove', function(e){
+    const rect = cv.getBoundingClientRect();
+    const scaleX = cv.width / rect.width;
+    const mx = (e.clientX - rect.left) * scaleX;
+    const g = geometry();
+    let idx = -1;
+    bars.forEach((b, i) => {
+      const x = g.padLeft + i * g.gap;
+      if (mx >= x && mx < x + g.gap) idx = i;
+    });
+    if (idx !== hoverIdx) { hoverIdx = idx; paint(); }
+    if (idx >= 0) {
+      const b = bars[idx];
+      tooltip.style.display = 'block';
+      tooltip.style.left = Math.min(cv.clientWidth - 140, Math.max(0, e.clientX - rect.left + 12)) + 'px';
+      tooltip.style.top = (e.clientY - rect.top - 12) + 'px';
+      tooltip.innerHTML = '<b>' + b.name + '</b><br>' + b.seconds + 's &middot; ' + b.pct + '% of attention';
+    } else {
+      tooltip.style.display = 'none';
+    }
   });
+  cv.addEventListener('mouseleave', function(){ hoverIdx = -1; tooltip.style.display = 'none'; paint(); });
+
+  layout();
+  if (raf) cancelAnimationFrame(raf);
+  requestAnimationFrame(animate);
+  window.addEventListener('resize', function(){ layout(); paint(); });
 })();
 
 // ---------- Timeline ----------
@@ -1083,6 +1423,8 @@ def generate_report(session_dir):
     html = html.replace("__CURSOR_ICON_SM__", theme.icon("cursor", 13))
     html = html.replace("__LAYERS_ICON_SM__", theme.icon("layers", 13))
     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))
 
     out_path = os.path.join(session_dir, "analysis_report.html")
     with open(out_path, "w", encoding="utf-8") as f: