Redesign the PDF/print report into a paginated, professional layout

Adds a JS-driven print engine that builds fixed-size, deliberately
paginated pages from the same RANKING/SEGMENTS/MOUSE_* data the
dashboard already uses: cover + metrics + attention summary, a ranked
attention table (top 20, with repeated-header continuation pages),
attention visualization, heatmaps, element details, mouse interaction,
and session insights. Tables/cards/images are measured and moved whole
to a fresh page rather than split, fixing the on-screen overlap in the
mouse interaction panel along the way (a mis-sized, non-resizing
click-timeline canvas). Also hides InsightUX's own toolbar/sidebar/gaze
overlay right before each session screenshot capture so heatmap images
show only the tracked page, and raises the mouse "most interacted"
cap from 10 to 20 to match the ranked-attention cap.

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

analysis.py

@@ -25,6 +25,11 @@ import theme
 
 PAD_PX = 90  # keep identical to TRACKING_JS's PAD_PX in browser_session.py
 
+# Report/print item caps — presentation limits only, never applied to the
+# underlying computed data (compute_dwell_ranking/summarize_mouse still
+# return every item; this only bounds how many rows get *displayed*).
+MAX_ATTENTION_ITEMS = 20
+
 
 # =============================================================================
 # LOADING
@@ -90,7 +95,7 @@ def summarize_mouse(session_dir):
     interests = sorted(
         ({"element": k, "seconds": round(v / 1000.0, 1)} for k, v in dwell_totals.items()),
         key=lambda r: -r["seconds"]
-    )[:10]
+    )[:MAX_ATTENTION_ITEMS]
 
     clicks.sort(key=lambda c: c.get("timestamp", ""))
 
@@ -462,7 +467,7 @@ __THEME_CSS__
   .shot-nav .iux-btn { padding: 7px 14px; font-size: 12px; }
   .shot-nav .iux-btn:disabled { opacity: 0.35; cursor: default; transform:none; }
 
-  .click-timeline { width: 100%; display: block; margin-top: 8px; }
+  .click-timeline { width: 100%; height: 60px; display: block; margin-top: 8px; }
 
   .hm-tab { display: flex; align-items: center; gap: 6px; }
 
@@ -568,6 +573,105 @@ __THEME_CSS__
   .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; }
+
+  /* =========================================================================
+     PRINT / PDF REPORT
+     A self-contained set of fixed-size "pages" built by buildPrintReport()
+     (see the inline <script> at the bottom of this document) from the exact
+     same RANKING/SEGMENTS/MOUSE_* data the on-screen dashboard uses — never
+     a separate data source. Kept visually hidden (off-screen, not
+     display:none, so it can still be measured/laid out for pagination) on
+     screen, and swapped in for everything else only under @media print.
+     Colors are hardcoded to the dark palette here (not var(--iux-*)) so the
+     exported report always matches the intended report design regardless of
+     which theme is active on screen at export time. ========================= */
+  #printReport {
+    position: absolute; left: -10000px; top: 0; width: 794px;
+    font-family: var(--iux-font);
+  }
+  @page { size: A4; margin: 0; }
+  @media print {
+    html, body { background: #12131A !important; }
+    body > .back-nav, body > .topbar, body > .stat-row, body > .grid,
+    #iuxViewer, #elemFullscreen, #iuxReportToast { display: none !important; }
+    #printReport { position: static !important; left: auto !important; width: auto !important; }
+  }
+
+  .print-page {
+    position: relative; width: 794px; height: 1123px;
+    background: #12131A; color: #F1EEFA;
+    box-sizing: border-box; overflow: hidden;
+    break-after: page; page-break-after: always;
+    font-family: var(--iux-font);
+  }
+  .print-page:last-child { break-after: auto; page-break-after: auto; }
+
+  .pp-accent { position: absolute; top: 0; left: 0; right: 0; height: 6px;
+    background: linear-gradient(90deg, #6366F1, #8B5CF6 55%, #C084FC); }
+  .pp-header { position: absolute; top: 16px; left: 46px; right: 46px; height: 20px;
+    display: flex; align-items: center; justify-content: space-between; }
+  .pp-header .pp-brand { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: #F1EEFA; }
+  .pp-header .pp-tag { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; color: #6E6885; text-transform: uppercase; }
+  .pp-body { position: absolute; top: 46px; left: 46px; right: 46px; bottom: 52px; overflow: hidden; }
+  .pp-footer { position: absolute; bottom: 0; left: 46px; right: 46px; height: 40px;
+    display: flex; align-items: center; justify-content: space-between;
+    border-top: 1px solid rgba(148,138,179,0.16); font-size: 8.5px; color: #6E6885; }
+
+  .pp-cover-title { font-size: 25px; font-weight: 700; color: #F1EEFA; margin: 8px 0 4px; }
+  .pp-cover-meta { font-size: 10.5px; color: #9B95B3; margin-bottom: 20px; }
+
+  .pp-metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
+  .pp-metric { background: #1E2030; border: 1px solid rgba(148,138,179,0.16); border-radius: 12px; padding: 12px 14px; break-inside: avoid; }
+  .pp-metric .pp-m-label { font-size: 8.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #6E6885; margin-bottom: 6px; }
+  .pp-metric .pp-m-value { font-size: 19px; font-weight: 700; color: #F1EEFA; }
+  .pp-metric .pp-m-sub { font-size: 8.5px; color: #6E6885; margin-top: 2px; }
+
+  .pp-card { background: #1E2030; border: 1px solid rgba(148,138,179,0.16); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; break-inside: avoid; }
+  .pp-section-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #F1EEFA; margin: 0 0 10px; }
+  .pp-section-sub { font-size: 10px; color: #9B95B3; margin: -6px 0 12px; line-height: 1.5; }
+  .pp-body-text { font-size: 10.5px; color: #B7B2CC; line-height: 1.65; }
+  .pp-body-text b { color: #F1EEFA; }
+  .pp-two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
+
+  .pp-table { width: 100%; border-collapse: collapse; font-size: 10px; }
+  .pp-table th { text-align: left; color: #6E6885; font-weight: 700; padding: 6px 8px; font-size: 8.5px;
+    text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid rgba(148,138,179,0.25); }
+  .pp-table td { padding: 7px 8px; border-bottom: 1px solid rgba(148,138,179,0.12); vertical-align: middle; }
+  .pp-table tr:nth-child(even) td { background: rgba(148,138,179,0.05); }
+  .pp-table .pp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .pp-table .pp-rank { color: #6E6885; width: 22px; }
+  .pp-table .pp-el-name { word-break: break-word; }
+
+  .pp-snap-item { margin-bottom: 12px; }
+  .pp-snap-item .pp-snap-label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #6E6885; margin-bottom: 3px; }
+  .pp-snap-item .pp-snap-value { font-size: 13px; font-weight: 700; color: #F1EEFA; }
+
+  .pp-shot-frame { width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid rgba(148,138,179,0.2); background: #171923; }
+  .pp-shot-frame img { display: block; width: 100%; height: auto; }
+  .pp-shot-label { font-size: 9.5px; color: #9B95B3; margin-bottom: 8px; display: flex; justify-content: space-between; }
+  .pp-shot-row { display: grid; gap: 12px; margin-bottom: 14px; break-inside: avoid; }
+  .pp-shot-row.pp-cols-1 { grid-template-columns: 1fr; }
+  .pp-shot-row.pp-cols-2 { grid-template-columns: 1fr 1fr; }
+
+  .pp-chart-caption { font-size: 9px; color: #6E6885; margin-top: 8px; text-align: center; }
+
+  .pp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+  .pp-detail-card { background: #171923; border: 1px solid rgba(148,138,179,0.14); border-radius: 10px; padding: 10px 12px; break-inside: avoid; }
+  .pp-detail-card .pp-d-name { font-size: 10.5px; font-weight: 600; color: #F1EEFA; margin-bottom: 6px; }
+  .pp-detail-card .pp-d-row { display: flex; justify-content: space-between; font-size: 9px; color: #9B95B3; padding: 2px 0; }
+  .pp-detail-card .pp-d-row b { color: #F1EEFA; font-weight: 600; }
+
+  .pp-click-item { border-bottom: 1px solid rgba(148,138,179,0.12); padding: 7px 0; font-size: 10px; break-inside: avoid; }
+  .pp-click-item .pp-click-time { font-size: 8.5px; color: #6E6885; }
+  .pp-click-item .pp-click-el { font-weight: 600; color: #F1EEFA; }
+  .pp-click-item .pp-click-text { color: #9B95B3; font-size: 9.5px; }
+
+  .pp-insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  .pp-insight-card { background: #1E2030; border: 1px solid rgba(148,138,179,0.16); border-radius: 12px; padding: 16px; break-inside: avoid; }
+  .pp-insight-card .pp-i-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: #6E6885; margin-bottom: 6px; }
+  .pp-insight-card .pp-i-value { font-size: 17px; font-weight: 700; color: #F1EEFA; }
+
+  .pp-empty { font-size: 10.5px; color: #6E6885; padding: 10px 0; }
 </style>
 </head>
 <body>
@@ -709,6 +813,8 @@ __THEME_CSS__
   </div>
 </div>
 
+<div id="printReport"></div>
+
 <script>
 __ICONS_JS__
 __THEME_JS__
@@ -725,8 +831,18 @@ const SEGMENTS = __SEGMENTS_JSON__;
 const MOUSE_INTERESTS = __MOUSE_INTERESTS_JSON__;
 const MOUSE_CLICKS = __MOUSE_CLICKS_JSON__;
 const MOUSE_SEGMENTS = __MOUSE_SEGMENTS_JSON__;
-
-document.getElementById('btnExport').addEventListener('click', function(){ window.print(); });
+const MAX_ATTENTION_ITEMS = __MAX_ATTENTION_ITEMS__;
+const SESSION = {
+  url: __URL_JSON__,
+  timestamp: __SESSION_TIMESTAMP_JSON__,
+  duration: __DURATION__,
+  samples: __SAMPLES__,
+  clickCount: __CLICK_COUNT__
+};
+
+document.getElementById('btnExport').addEventListener('click', function(){
+  Promise.resolve(window.__insightuxPrintReady).then(function(){ window.print(); });
+});
 
 // ---------- Back to Browser: the report was reached by a REAL navigation
 // (Python's window.load_url() away from the tracked page, once the session
@@ -945,22 +1061,30 @@ function iconForLabel(label){
   // ---- click timeline mini-chart (derived from the same click timestamps) ----
   const cv = document.getElementById('clickTimeline');
   const ctx = cv.getContext('2d');
-  function resizeClickCanvas(){ cv.width = cv.clientWidth || 560; cv.height = 60; }
-  resizeClickCanvas();
-  ctx.clearRect(0, 0, cv.width, cv.height);
-  if (MOUSE_CLICKS.length > 1) {
-    const times = MOUSE_CLICKS.map(c => { const p = (c.timestamp||'').split(':').map(Number); return (p[0]||0)*3600+(p[1]||0)*60+(p[2]||0); });
-    const tmin = Math.min(...times), tmax = Math.max(...times) || tmin + 1;
-    ctx.strokeStyle = 'rgba(139,92,246,0.25)';
-    ctx.beginPath(); ctx.moveTo(0, cv.height - 10); ctx.lineTo(cv.width, cv.height - 10); ctx.stroke();
-    times.forEach(function(t){
-      const x = ((t - tmin) / (tmax - tmin || 1)) * (cv.width - 12) + 6;
-      const grad = ctx.createLinearGradient(x, 6, x, cv.height - 10);
-      grad.addColorStop(0, '#C084FC'); grad.addColorStop(1, '#6366F1');
-      ctx.fillStyle = grad;
-      ctx.beginPath(); ctx.arc(x, cv.height - 10, 4, 0, 2*Math.PI); ctx.fill();
-    });
+  function paintClickTimeline(){
+    // CSS fixes the box at width:100%/height:60px, so clientWidth is stable
+    // post-layout — but re-measure on every call (resize/print/theme) rather
+    // than once, so the canvas never locks in a stale width.
+    cv.width = cv.clientWidth || 560;
+    cv.height = 60;
+    ctx.clearRect(0, 0, cv.width, cv.height);
+    if (MOUSE_CLICKS.length > 1) {
+      const times = MOUSE_CLICKS.map(c => { const p = (c.timestamp||'').split(':').map(Number); return (p[0]||0)*3600+(p[1]||0)*60+(p[2]||0); });
+      const tmin = Math.min(...times), tmax = Math.max(...times) || tmin + 1;
+      ctx.strokeStyle = 'rgba(139,92,246,0.25)';
+      ctx.beginPath(); ctx.moveTo(0, cv.height - 10); ctx.lineTo(cv.width, cv.height - 10); ctx.stroke();
+      times.forEach(function(t){
+        const x = ((t - tmin) / (tmax - tmin || 1)) * (cv.width - 12) + 6;
+        const grad = ctx.createLinearGradient(x, 6, x, cv.height - 10);
+        grad.addColorStop(0, '#C084FC'); grad.addColorStop(1, '#6366F1');
+        ctx.fillStyle = grad;
+        ctx.beginPath(); ctx.arc(x, cv.height - 10, 4, 0, 2*Math.PI); ctx.fill();
+      });
+    }
   }
+  paintClickTimeline();
+  window.addEventListener('resize', paintClickTimeline, {passive:true});
+  window.insightuxRepaintCanvases.push(paintClickTimeline);
 })();
 
 // ---------- Ranked table (with live filter) ----------
@@ -1657,6 +1781,538 @@ function showToast(message, isError, onRetry){
   window.addEventListener('resize', function(){ layout(); paint(); });
 })();
 
+// =============================================================================
+// PRINT / PDF REPORT — builds a fixed set of paginated .print-page elements
+// inside #printReport from the exact same RANKING/SEGMENTS/MOUSE_*/SESSION
+// data every on-screen panel above already uses (nothing recomputed, nothing
+// fabricated). Pagination is done here in JS rather than left to the
+// browser's default print reflow: each atomic block (a table row, a card, an
+// image) is appended and measured, and moved whole to a fresh page the
+// instant it would overflow, so a card/row/image is never split across a
+// page boundary and a heading never ends up alone at the bottom of one.
+// window.__insightuxPrintReady is a Promise the Export button (and anyone
+// calling window.print() directly) can await first, since the heatmap
+// images are composited (screenshot + eye heat layer, flattened to a single
+// PNG) asynchronously before layout runs.
+// =============================================================================
+(function(){
+  const root = document.getElementById('printReport');
+  if (!root) { window.__insightuxPrintReady = Promise.resolve(); return; }
+
+  function esc(s){
+    return (s == null ? '' : String(s)).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+  function fmtS(n){ return (Math.round((n||0)*100)/100).toFixed(2) + 's'; }
+  function fmtPct(n){ return (n||0).toFixed(1) + '%'; }
+
+  // Composites each segment's screenshot with its eye-attention heat layer
+  // (the exact same paintHeatLayer()/EYE_STOPS the live Attention Heatmaps
+  // panel uses) into one flattened PNG, so print doesn't depend on a live
+  // canvas repainting correctly inside the print engine.
+  function compositeSegmentImage(seg){
+    return new Promise(function(resolve){
+      const im = new Image();
+      im.onload = function(){
+        const cv = document.createElement('canvas');
+        cv.width = im.naturalWidth || 1;
+        cv.height = im.naturalHeight || 1;
+        const cx = cv.getContext('2d');
+        cx.drawImage(im, 0, 0);
+        try { paintHeatLayer(cx, cv.width, cv.height, seg.points || [], 0.09, EYE_STOPS, 0.9); } catch(e){}
+        let dataUrl = seg.screenshotData;
+        try { dataUrl = cv.toDataURL('image/png'); } catch(e){}
+        resolve({ dataUrl: dataUrl, w: cv.width, h: cv.height });
+      };
+      im.onerror = function(){ resolve({ dataUrl: seg.screenshotData, w: 16, h: 9 }); };
+      im.src = seg.screenshotData;
+    });
+  }
+
+  window.__insightuxPrintReady = Promise.all(SEGMENTS.map(compositeSegmentImage))
+    .then(buildPrintPages)
+    .catch(function(){ /* best-effort — export still works with whatever got built */ });
+
+  function buildPrintPages(composited){
+    const BODY_BUDGET = 1025; // must match .pp-body's CSS height (1123 - 46 top - 52 bottom)
+    const PAGES = [];
+    let curBody = null;
+
+    function newPage(){
+      const page = document.createElement('div');
+      page.className = 'print-page';
+      page.innerHTML =
+        '<div class="pp-accent"></div>' +
+        '<div class="pp-header"><span class="pp-brand">INSIGHTUX</span><span class="pp-tag">Session Report</span></div>' +
+        '<div class="pp-body"></div>' +
+        '<div class="pp-footer"><span class="pp-f-meta"></span><span class="pp-f-page"></span></div>';
+      root.appendChild(page);
+      curBody = page.querySelector('.pp-body');
+      PAGES.push(page);
+      return page;
+    }
+
+    // Appends one atomic block; if it overflows AND the page already holds
+    // other content, moves it whole to a fresh page instead (break-inside:
+    // avoid on .pp-card/.pp-metric/etc. is a defensive backstop — this is
+    // the actual mechanism preventing split cards/images/charts).
+    function fitAppend(el){
+      curBody.appendChild(el);
+      if (curBody.scrollHeight > BODY_BUDGET && curBody.children.length > 1) {
+        curBody.removeChild(el);
+        newPage();
+        curBody.appendChild(el);
+      }
+    }
+
+    // Generic "table that may need to continue onto further pages" flow:
+    // tries the full row set first (the common case — fits on one page),
+    // and only if that overflows does it trim back to however many rows
+    // actually fit, repeat the header + heading with " — Continued" on a
+    // fresh page, and carry on with what's left. A heading is never left
+    // without at least its header row + one data row, and a solitary
+    // last row is folded back a page rather than stranded alone.
+    function flowTable(title, headHtml, rows, rowHtmlFn){
+      function build(rowsSlice, continued){
+        const card = document.createElement('div');
+        card.className = 'pp-card';
+        const t = document.createElement('div');
+        t.className = 'pp-section-title';
+        t.textContent = title + (continued ? ' — Continued' : '');
+        card.appendChild(t);
+        const table = document.createElement('table');
+        table.className = 'pp-table';
+        table.innerHTML = '<thead><tr>' + headHtml + '</tr></thead>';
+        const tbody = document.createElement('tbody');
+        rowsSlice.forEach(function(r, i){
+          const tr = document.createElement('tr');
+          tr.innerHTML = rowHtmlFn(r, i);
+          tbody.appendChild(tr);
+        });
+        table.appendChild(tbody);
+        card.appendChild(table);
+        return { card: card, tbody: tbody };
+      }
+      let remaining = rows.slice();
+      let continued = false;
+      while (remaining.length) {
+        const built = build(remaining, continued);
+        curBody.appendChild(built.card);
+        if (curBody.scrollHeight <= BODY_BUDGET) { remaining = []; break; }
+        let fitCount = remaining.length;
+        while (fitCount > 0) {
+          while (built.tbody.children.length > fitCount) built.tbody.removeChild(built.tbody.lastChild);
+          if (curBody.scrollHeight <= BODY_BUDGET) break;
+          fitCount--;
+        }
+        if (fitCount === 0) {
+          curBody.removeChild(built.card);
+          newPage();
+          continue;
+        }
+        if (remaining.length - fitCount === 1 && fitCount > 1) {
+          fitCount--;
+          while (built.tbody.children.length > fitCount) built.tbody.removeChild(built.tbody.lastChild);
+        }
+        remaining = remaining.slice(fitCount);
+        continued = true;
+        if (remaining.length) newPage();
+      }
+    }
+
+    // Same continuation-safe flow as flowTable, for a heading + a list of
+    // non-tabular item cards (the click log) — the heading is bundled with
+    // at least its first item so it's never left alone at a page's bottom.
+    function flowList(title, items, renderFn){
+      function build(itemsSlice, continued){
+        const wrap = document.createElement('div');
+        const h = document.createElement('div');
+        h.className = 'pp-section-title';
+        h.style.fontSize = '15px';
+        h.style.marginBottom = '10px';
+        h.textContent = title + (continued ? ' — Continued' : '');
+        wrap.appendChild(h);
+        const list = document.createElement('div');
+        itemsSlice.forEach(function(it){ list.appendChild(renderFn(it)); });
+        wrap.appendChild(list);
+        return { wrap: wrap, list: list };
+      }
+      let remaining = items.slice();
+      let continued = false;
+      while (remaining.length) {
+        const built = build(remaining, continued);
+        curBody.appendChild(built.wrap);
+        if (curBody.scrollHeight <= BODY_BUDGET) { remaining = []; break; }
+        let fitCount = remaining.length;
+        while (fitCount > 0) {
+          while (built.list.children.length > fitCount) built.list.removeChild(built.list.lastChild);
+          if (curBody.scrollHeight <= BODY_BUDGET) break;
+          fitCount--;
+        }
+        if (fitCount === 0) {
+          curBody.removeChild(built.wrap);
+          newPage();
+          continue;
+        }
+        remaining = remaining.slice(fitCount);
+        continued = true;
+        if (remaining.length) newPage();
+      }
+    }
+
+    function sectionHeading(text, sub){
+      const wrap = document.createElement('div');
+      wrap.innerHTML = '<div class="pp-section-title" style="font-size:15px;margin-bottom:' + (sub ? '4px' : '10px') + ';">' + esc(text) + '</div>' +
+        (sub ? '<div class="pp-section-sub">' + esc(sub) + '</div>' : '');
+      return wrap;
+    }
+
+    const items = RANKING.slice(0, MAX_ATTENTION_ITEMS);
+    items.forEach(function(r, i){ r._rank = i + 1; });
+    const totalGaze = RANKING.reduce(function(s, r){ return s + r.seconds; }, 0);
+    const avgPerElement = RANKING.length ? totalGaze / RANKING.length : 0;
+    const topLabel = RANKING.length ? RANKING[0].label : '—';
+    const topPct = RANKING.length ? RANKING[0].pct : 0;
+
+    // ======================================================================
+    // PAGE 1 — cover, metric cards, attention summary, ranked attention
+    // ======================================================================
+    newPage();
+
+    const cover = document.createElement('div');
+    cover.innerHTML =
+      '<div class="pp-cover-title">InsightUX Session Report</div>' +
+      '<div class="pp-cover-meta">' + esc(SESSION.url || 'Unknown page') + '  &middot;  ' + esc(SESSION.timestamp) +
+      '  &middot;  ' + SESSION.duration + 's session  &middot;  ' + SESSION.samples + ' gaze samples</div>';
+    fitAppend(cover);
+
+    const metrics = document.createElement('div');
+    metrics.className = 'pp-metric-row';
+    metrics.innerHTML = [
+      ['Session Length', SESSION.duration + 's', 'recorded session'],
+      ['Gaze Samples', String(SESSION.samples), 'eye-tracking samples'],
+      ['Elements Tracked', String(RANKING.length), 'ranked attention targets'],
+      ['Mouse Events', String(SESSION.clickCount), 'recorded clicks']
+    ].map(function(m){
+      return '<div class="pp-metric"><div class="pp-m-label">' + m[0] + '</div><div class="pp-m-value">' + m[1] + '</div><div class="pp-m-sub">' + m[2] + '</div></div>';
+    }).join('');
+    fitAppend(metrics);
+
+    const summaryCard = document.createElement('div');
+    summaryCard.className = 'pp-card pp-two-col';
+    let summaryText;
+    if (RANKING.length) {
+      summaryText = 'During this session, InsightUX recorded <b>' + fmtS(totalGaze) + '</b> of element-level gaze attention across ' +
+        '<b>' + RANKING.length + '</b> tracked webpage element' + (RANKING.length === 1 ? '' : 's') + '. ' +
+        'The highest-attention element was <b>' + esc(topLabel) + '</b>, receiving <b>' + fmtPct(topPct) + '</b> of recorded attention.';
+      if (SESSION.clickCount > 0) {
+        summaryText += ' The session also recorded <b>' + SESSION.clickCount + '</b> mouse click' + (SESSION.clickCount === 1 ? '' : 's') + '.';
+      }
+    } else {
+      summaryText = 'No elements were fixated long enough to register during this session.';
+    }
+    summaryCard.innerHTML =
+      '<div>' +
+        '<div class="pp-section-title">Attention Summary</div>' +
+        '<div class="pp-body-text">' + summaryText + '</div>' +
+      '</div>' +
+      '<div>' +
+        '<div class="pp-section-title">Session Snapshot</div>' +
+        '<div class="pp-snap-item"><div class="pp-snap-label">Top Element</div><div class="pp-snap-value">' + esc(topLabel) + '</div></div>' +
+        '<div class="pp-snap-item"><div class="pp-snap-label">Top Share</div><div class="pp-snap-value">' + fmtPct(topPct) + '</div></div>' +
+        '<div class="pp-snap-item"><div class="pp-snap-label">Average / Element</div><div class="pp-snap-value">' + fmtS(avgPerElement) + '</div></div>' +
+      '</div>';
+    fitAppend(summaryCard);
+
+    if (items.length) {
+      flowTable('Ranked Attention',
+        '<th style="width:22px;">#</th><th>Element</th><th class="pp-num">Gaze Attention</th><th class="pp-num">Share</th><th class="pp-num">Hits</th>',
+        items,
+        function(r){
+          return '<td class="pp-rank">' + r._rank + '</td>' +
+            '<td class="pp-el-name">' + esc(r.label) + '</td>' +
+            '<td class="pp-num">' + fmtS(r.seconds) + '</td>' +
+            '<td class="pp-num">' + fmtPct(r.pct) + '</td>' +
+            '<td class="pp-num">' + r.hits + '</td>';
+        });
+    } else {
+      const empty = document.createElement('div');
+      empty.className = 'pp-card';
+      empty.innerHTML = '<div class="pp-section-title">Ranked Attention</div><div class="pp-empty">No elements were fixated long enough to register.</div>';
+      fitAppend(empty);
+    }
+
+    // ======================================================================
+    // PAGE — Attention Visualization: session view + element attention chart
+    // ======================================================================
+    newPage();
+    fitAppend(sectionHeading('Attention Visualization', 'Visual representation of the recorded gaze attention across webpage elements.'));
+
+    if (SEGMENTS.length) {
+      const seg = SEGMENTS[0];
+      const c = composited[0];
+      const shotCard = document.createElement('div');
+      shotCard.className = 'pp-card';
+      shotCard.innerHTML =
+        '<div class="pp-section-title" style="font-size:10.5px;">Session View</div>' +
+        '<div class="pp-shot-label"><span>Scroll segment 1 of ' + SEGMENTS.length + '</span><span>~' + seg.duration + 's of attention here</span></div>' +
+        '<div class="pp-shot-frame"><img width="' + c.w + '" height="' + c.h + '" src="' + c.dataUrl + '" alt=""></div>';
+      fitAppend(shotCard);
+    }
+
+    const chartCard = document.createElement('div');
+    chartCard.className = 'pp-card';
+    const chartTitle = document.createElement('div');
+    chartTitle.className = 'pp-section-title';
+    chartTitle.style.fontSize = '10.5px';
+    chartTitle.textContent = 'Element Attention Analysis';
+    chartCard.appendChild(chartTitle);
+    if (items.length) {
+      const chartWrap = document.createElement('div');
+      chartWrap.style.cssText = 'display:flex;justify-content:center;';
+      const chartCanvas = document.createElement('canvas');
+      chartWrap.appendChild(chartCanvas);
+      chartCard.appendChild(chartWrap);
+      renderPrintChart(chartCanvas, items);
+      if (items.length > 8) {
+        const caption = document.createElement('div');
+        caption.className = 'pp-chart-caption';
+        caption.textContent = 'Reference numbers correspond to rank in the Ranked Attention table.';
+        chartCard.appendChild(caption);
+      }
+    } else {
+      const emptyChart = document.createElement('div');
+      emptyChart.className = 'pp-empty';
+      emptyChart.textContent = 'No elements were fixated long enough to chart.';
+      chartCard.appendChild(emptyChart);
+    }
+    fitAppend(chartCard);
+
+    const vizStats = document.createElement('div');
+    vizStats.className = 'pp-metric-row';
+    vizStats.innerHTML = [
+      ['Total Gaze Time', fmtS(totalGaze)],
+      ['Top Element Share', fmtPct(topPct)],
+      ['Total Elements', String(RANKING.length)],
+      ['Avg. / Element', fmtS(avgPerElement)]
+    ].map(function(m){
+      return '<div class="pp-metric"><div class="pp-m-label">' + m[0] + '</div><div class="pp-m-value" style="font-size:15px;">' + m[1] + '</div></div>';
+    }).join('');
+    fitAppend(vizStats);
+
+    // ======================================================================
+    // PAGE(S) — Attention Heatmaps
+    // ======================================================================
+    newPage();
+    fitAppend(sectionHeading('Attention Heatmaps', 'Heatmaps show where visual attention was concentrated within the recorded webpage viewport.'));
+
+    if (SEGMENTS.length) {
+      const perRow = SEGMENTS.length <= 3 ? 1 : 2;
+      for (let i = 0; i < SEGMENTS.length; i += perRow) {
+        const row = document.createElement('div');
+        row.className = 'pp-shot-row pp-cols-' + perRow;
+        for (let j = i; j < Math.min(i + perRow, SEGMENTS.length); j++) {
+          const seg = SEGMENTS[j], c = composited[j];
+          const card = document.createElement('div');
+          card.innerHTML =
+            '<div class="pp-shot-label"><span>Scroll Segment ' + (j + 1) + '</span><span>~' + seg.duration + 's attention</span></div>' +
+            '<div class="pp-shot-frame"><img width="' + c.w + '" height="' + c.h + '" src="' + c.dataUrl + '" alt=""></div>';
+          row.appendChild(card);
+        }
+        fitAppend(row);
+      }
+    } else {
+      const empty = document.createElement('div');
+      empty.className = 'pp-card';
+      empty.innerHTML = '<div class="pp-empty">No page screenshots were captured for this session (older session, or screen-capture failed).</div>';
+      fitAppend(empty);
+    }
+
+    // ======================================================================
+    // PAGE — Element Attention Details (a compact reference sheet; only
+    // worth its own page once there are more ranked elements than the
+    // Ranked Attention table on page 1 can be quickly scanned at a glance)
+    // ======================================================================
+    if (items.length > 6) {
+      newPage();
+      fitAppend(sectionHeading('Element Attention Details'));
+      let grid = document.createElement('div');
+      grid.className = 'pp-detail-grid';
+      curBody.appendChild(grid);
+      items.forEach(function(r){
+        const card = document.createElement('div');
+        card.className = 'pp-detail-card';
+        card.innerHTML =
+          '<div class="pp-d-name">#' + r._rank + ' · ' + esc(r.label) + '</div>' +
+          '<div class="pp-d-row"><span>Gaze Time</span><b>' + fmtS(r.seconds) + '</b></div>' +
+          '<div class="pp-d-row"><span>Share of Attention</span><b>' + fmtPct(r.pct) + '</b></div>' +
+          '<div class="pp-d-row"><span>Hits</span><b>' + r.hits + '</b></div>';
+        grid.appendChild(card);
+        if (curBody.scrollHeight > BODY_BUDGET && grid.children.length > 1) {
+          grid.removeChild(card);
+          newPage();
+          grid = document.createElement('div');
+          grid.className = 'pp-detail-grid';
+          curBody.appendChild(grid);
+          grid.appendChild(card);
+        }
+      });
+    }
+
+    // ======================================================================
+    // PAGE(S) — Mouse Interaction Analysis
+    // ======================================================================
+    if (MOUSE_INTERESTS.length || MOUSE_CLICKS.length) {
+      newPage();
+      fitAppend(sectionHeading('Mouse Interaction Analysis'));
+
+      if (MOUSE_INTERESTS.length) {
+        flowTable('Most Interacted Elements',
+          '<th style="width:22px;">#</th><th>Element</th><th class="pp-num">Interaction Time</th>',
+          MOUSE_INTERESTS,
+          function(r, i){ return '<td class="pp-rank">' + (i + 1) + '</td><td class="pp-el-name">' + esc(r.element) + '</td><td class="pp-num">' + fmtS(r.seconds) + '</td>'; });
+      } else {
+        const empty = document.createElement('div');
+        empty.className = 'pp-card';
+        empty.innerHTML = '<div class="pp-section-title">Most Interacted Elements</div><div class="pp-empty">No mouse dwell data recorded for this session.</div>';
+        fitAppend(empty);
+      }
+
+      if (MOUSE_CLICKS.length) {
+        flowList('Mouse — Click Timeline & Log', MOUSE_CLICKS, function(c){
+          const item = document.createElement('div');
+          item.className = 'pp-click-item';
+          item.innerHTML =
+            '<div class="pp-click-time">' + esc(c.timestamp || '') + '</div>' +
+            '<div class="pp-click-el">' + esc(c.element || '') + '</div>' +
+            '<div class="pp-click-text">"' + esc(c.text || '') + '"</div>';
+          return item;
+        });
+      } else {
+        fitAppend(sectionHeading('Mouse — Click Timeline & Log'));
+        const empty = document.createElement('div');
+        empty.className = 'pp-card';
+        empty.innerHTML = '<div class="pp-empty">No mouse clicks were recorded during this session.</div>';
+        fitAppend(empty);
+      }
+    }
+
+    // ======================================================================
+    // FINAL PAGE — Session Insights (objective, derived-only wording)
+    // ======================================================================
+    if (RANKING.length) {
+      newPage();
+      fitAppend(sectionHeading('Session Insights'));
+      const grid = document.createElement('div');
+      grid.className = 'pp-insight-grid';
+      grid.innerHTML = [
+        ['Highest Attention', esc(topLabel) + ' — ' + fmtS(RANKING[0].seconds)],
+        ['Largest Attention Share', fmtPct(topPct)],
+        ['Tracked Elements', String(RANKING.length)],
+        ['Total Gaze Attention', fmtS(totalGaze)]
+      ].map(function(x){
+        return '<div class="pp-insight-card"><div class="pp-i-label">' + x[0] + '</div><div class="pp-i-value">' + x[1] + '</div></div>';
+      }).join('');
+      fitAppend(grid);
+    }
+
+    // ---- footers, now that the final page count is known ----
+    PAGES.forEach(function(page, i){
+      page.querySelector('.pp-f-meta').textContent =
+        'InsightUX · Session Report · ' + (SESSION.url || '') + ' · ' + (SESSION.timestamp || '');
+      page.querySelector('.pp-f-page').textContent = 'Page ' + (i + 1) + ' of ' + PAGES.length;
+    });
+  }
+
+  // Clean, static line chart for the Element Attention Analysis print page:
+  // every ranked element gets one point, numbered #1.. to match the Ranked
+  // Attention table's rank column (full names are already on that table —
+  // repeating all of them here gets unreadable past ~8 points).
+  function renderPrintChart(canvas, items){
+    const cssW = 690, cssH = 300, dpr = 2;
+    canvas.width = cssW * dpr;
+    canvas.height = cssH * dpr;
+    canvas.style.width = cssW + 'px';
+    canvas.style.height = cssH + 'px';
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+    const font = getComputedStyle(document.body).fontFamily || 'sans-serif';
+
+    const padL = 54, padR = 16, padT = 16, padB = 40;
+    const plotW = cssW - padL - padR, plotH = cssH - padT - padB;
+
+    const maxVal = items.reduce(function(m, r){ return Math.max(m, r.seconds); }, 0) || 1;
+    function niceCeil(v){
+      if (v <= 0) return 1;
+      const mag = Math.pow(10, Math.floor(Math.log10(v)));
+      const norm = v / mag;
+      const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;
+      return step * mag;
+    }
+    const top = niceCeil(maxVal * 1.15);
+    const TICKS = 5;
+
+    ctx.clearRect(0, 0, cssW, cssH);
+
+    ctx.strokeStyle = 'rgba(148,138,179,0.16)';
+    ctx.fillStyle = '#6E6885';
+    ctx.font = '9px ' + font;
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
+    for (let i = 0; i <= TICKS; i++){
+      const v = top * i / TICKS;
+      const y = padT + plotH - (v / top) * plotH;
+      ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(padL + plotW, y); ctx.stroke();
+      ctx.fillText(v.toFixed(1) + 's', padL - 8, y);
+    }
+
+    const n = items.length;
+    const stepX = n > 1 ? plotW / (n - 1) : 0;
+    const xFor = function(i){ return n > 1 ? padL + i * stepX : padL + plotW / 2; };
+    const yFor = function(v){ return padT + plotH - (v / top) * plotH; };
+
+    ctx.strokeStyle = '#8B5CF6';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    items.forEach(function(r, i){
+      const x = xFor(i), y = yFor(r.seconds);
+      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    });
+    ctx.stroke();
+
+    const showValues = n <= 10;
+    items.forEach(function(r, i){
+      const x = xFor(i), y = yFor(r.seconds);
+      const grad = ctx.createRadialGradient(x, y, 0, x, y, 5);
+      grad.addColorStop(0, '#C084FC'); grad.addColorStop(1, '#6366F1');
+      ctx.fillStyle = grad;
+      ctx.beginPath(); ctx.arc(x, y, 3.5, 0, 2 * Math.PI); ctx.fill();
+      if (showValues) {
+        ctx.fillStyle = '#F1EEFA';
+        ctx.font = '600 9px ' + font;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'alphabetic';
+        ctx.fillText(r.seconds.toFixed(2) + 's', x, Math.max(10, y - 10));
+      }
+    });
+
+    ctx.fillStyle = '#9B95B3';
+    ctx.font = '8.5px ' + font;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'top';
+    items.forEach(function(r, i){ ctx.fillText('#' + (i + 1), xFor(i), padT + plotH + 8); });
+
+    ctx.fillStyle = '#6E6885';
+    ctx.font = '700 8px ' + font;
+    ctx.textAlign = 'center';
+    ctx.fillText('WEBPAGE ELEMENTS', padL + plotW / 2, cssH - 8);
+    ctx.save();
+    ctx.translate(12, padT + plotH / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.fillText('GAZE ATTENTION (SEC)', 0, 0);
+    ctx.restore();
+  }
+})();
+
 </script>
 </body>
 </html>
@@ -1689,11 +2345,13 @@ def generate_report(session_dir):
     html = html.replace("__URL__", summary["url"] or "Unknown page")
     html = html.replace("__URL_JSON__", json.dumps(summary["url"] or ""))
     html = html.replace("__SESSION_TIMESTAMP__", session_timestamp)
+    html = html.replace("__SESSION_TIMESTAMP_JSON__", json.dumps(session_timestamp))
     html = html.replace("__SAMPLES__", str(summary["samples"]))
     html = html.replace("__DURATION__", str(summary["duration"]))
     html = html.replace("__NUM_ELEMENTS__", str(len(ranking)))
     html = html.replace("__TOP_LABEL__", top_label)
     html = html.replace("__CLICK_COUNT__", str(mouse["click_count"]))
+    html = html.replace("__MAX_ATTENTION_ITEMS__", str(MAX_ATTENTION_ITEMS))
     html = html.replace("__RANKING_JSON__", json.dumps(ranking))
     html = html.replace("__SEGMENTS_JSON__", json.dumps(segments))
     html = html.replace("__MOUSE_INTERESTS_JSON__", json.dumps(mouse["interests"]))

browser_session.py

@@ -994,6 +994,20 @@ TRACKING_JS = r"""
     if (!document.body.contains(cv)) document.body.appendChild(cv);
   }, 1000);
 
+  // Momentarily hides InsightUX's own injected UI (toolbar, sidebar, this
+  // gaze/AOI canvas, the mouse HUD panel) so pyautogui's full-screen grab in
+  // maybe_capture_screenshot() captures only the tracked page underneath —
+  // called from Python right before/after each screenshot, never during
+  // normal tracking.
+  window.__insightuxSetCaptureMode = function(hidden){
+    const vis = hidden ? 'hidden' : '';
+    cv.style.visibility = vis;
+    ['__insightux_toolbar', '__insightux_sidebar', '__insightux_mouse_panel'].forEach(function(id){
+      const el = document.getElementById(id);
+      if (el) el.style.visibility = vis;
+    });
+  };
+
   function roundRectPath(c, x, y, w, h, r){
     c.beginPath();
     c.moveTo(x + r, y);
@@ -2106,7 +2120,18 @@ def gaze_worker(window, stop_event, session_dir, api_ref):
         if not (scrolled_enough or time_elapsed):
             return None
         try:
-            img = pyautogui.screenshot()
+            try:
+                window.evaluate_js("window.__insightuxSetCaptureMode && window.__insightuxSetCaptureMode(true)")
+            except Exception:
+                pass
+            time.sleep(0.05)  # let the hide actually repaint before the OS-level grab
+            try:
+                img = pyautogui.screenshot()
+            finally:
+                try:
+                    window.evaluate_js("window.__insightuxSetCaptureMode && window.__insightuxSetCaptureMode(false)")
+                except Exception:
+                    pass
             # Force to the same pixel space as gaze coordinates (SCREEN_W x
             # SCREEN_H) — Windows DPI scaling can otherwise return a
             # screenshot at a different resolution than pyautogui.size(),