Add tabbed heatmaps, full-session export, adaptive chrome, element chart

Recent Sessions on the landing page now map to their actual generated
report (session-id -> analysis_report.html, reusing analysis.py's own
load_session()/session_summary() for domain/duration/sample-count) instead
of being static, unclickable timestamp rows. Report's "Back to Browser"
now navigates directly to the tracked page's own URL (already recorded
per-session) instead of leaning on window.history, which is unreliable to
reason about after a Python-triggered navigation in an embedded webview.

Sidebar and toolbar now auto-collapse into a compact bar the moment a
session starts (reusing the sidebar's existing collapse mode + a new
toolbar compact mode), maximizing space for the tracked page, with a
small always-visible toggle to reveal full controls temporarily; both
restore automatically when tracking stops.

Report: removed the Scroll Depth stat card (kept compute_scroll_depth()
itself untouched, just stopped surfacing it) and added a Gaze Samples
card in its place; enriched the header with session timestamp and
duration alongside the URL; added a styled error+Retry state for
screenshots that fail to load and Retry actions on toast failures for
full-session export, instead of things just silently not working.

Investigated the "Mouse Events: 0 / no clicks recorded" report: dwell
(hover) data and click data are collected separately in MOUSE_JS -- hover
tracking (getSmartLabel, populates "Most Interacted Elements") has no
element-type restriction, but click logging is gated by isInteractable(),
which only records clicks on genuine links/buttons/inputs/cursor:pointer
elements. That gate is mouse-tracking data-collection logic, out of scope
for this frontend-only pass, so it was left untouched; this is a data-
availability characteristic, not a frontend rendering bug -- the click
log correctly displays whatever clicks the existing collector captured.

No tracking, calibration, validation, screenshot-capture, or analytics
code was touched -- confined entirely to browser_session.py's landing
page/chrome and analysis.py's report template.

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

analysis.py

@@ -18,6 +18,7 @@ import os
 import re
 import json
 import bisect
+from datetime import datetime
 
 import theme
 
@@ -510,7 +511,7 @@ __THEME_CSS__
     <div class="mark">__EYE_ICON__</div>
     <div>
       <h1>InsightUX Session Report</h1>
-      <div class="sub">__URL__ &nbsp;&middot;&nbsp; __SAMPLES__ gaze samples</div>
+      <div class="sub">__URL__ &nbsp;&middot;&nbsp; __SESSION_TIMESTAMP__ &nbsp;&middot;&nbsp; __DURATION__s &nbsp;&middot;&nbsp; __SAMPLES__ gaze samples</div>
     </div>
   </div>
   <div class="actions">
@@ -526,7 +527,7 @@ __THEME_CSS__
   <div class="stat iux-card hoverable"><div class="icon-badge">__LAYERS_ICON__</div><div class="v">__NUM_ELEMENTS__</div><div class="l">Elements Fixated</div></div>
   <div class="stat iux-card hoverable"><div class="icon-badge">__TARGET_ICON__</div><div class="v" style="font-size:14px;">__TOP_LABEL__</div><div class="l">Most Attended</div></div>
   <div class="stat iux-card hoverable"><div class="icon-badge">__CURSOR_ICON__</div><div class="v">__CLICK_COUNT__</div><div class="l">Mouse Events</div></div>
-  <div class="stat iux-card hoverable"><div class="icon-badge">__CHEVRON_ICON__</div><div class="v">__SCROLL_DEPTH__%</div><div class="l">Scroll Depth</div></div>
+  <div class="stat iux-card hoverable"><div class="icon-badge">__TYPE_ICON__</div><div class="v">__SAMPLES__</div><div class="l">Gaze Samples</div></div>
 </div>
 
 <div class="grid">
@@ -665,14 +666,23 @@ 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. ----------
+// ---------- Back to Browser: navigates straight back to the website that
+// was actually being tracked (same URL session_summary() already recorded
+// for this session — the __URL__ shown in the header above) rather than
+// leaning on window.history, whose stack can be unreliable to reason about
+// inside an embedded webview after a Python-triggered navigation. Falls
+// back to real history/referrer only if that URL is unknown. Pure
+// client-side navigation — never touches the Api or tracking state. ----------
+const SESSION_URL = __URL_JSON__;
 document.getElementById('backNav').addEventListener('click', function(){
-  if (window.history.length > 1) {
+  if (SESSION_URL) {
+    window.location.href = SESSION_URL;
+  } else if (window.history.length > 1) {
     window.history.back();
   } else if (document.referrer) {
     window.location.href = document.referrer;
+  } else {
+    showToast('No previous page to return to.', true);
   }
 });
 
@@ -844,7 +854,7 @@ function iconForLabel(label){
 
   const clickEl = document.getElementById('mouseClicks');
   if (!MOUSE_CLICKS.length) {
-    clickEl.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('click', 26) + '</span>No clicks recorded for this session.</div>';
+    clickEl.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('click', 26) + '</span>No mouse clicks were recorded during this session.</div>';
   } else {
     let html = '<ul style="padding-left:0;margin:0;list-style:none;">';
     MOUSE_CLICKS.slice().reverse().forEach(c => {
@@ -992,8 +1002,9 @@ function loadImage(src){
 
 // Minimal toast so a failed export/viewer action is visible instead of
 // silently doing nothing — reuses the .iux-toast style already shared with
-// the toolbar/landing page design system.
-function showToast(message, isError){
+// the toolbar/landing page design system. Pass onRetry to add a Retry
+// action instead of the toast just auto-dismissing.
+function showToast(message, isError, onRetry){
   let toast = document.getElementById('iuxReportToast');
   if (!toast) {
     toast = document.createElement('div');
@@ -1005,14 +1016,27 @@ function showToast(message, isError){
     toast.style.transform = 'translateX(-50%)';
     toast.style.zIndex = '3000000';
     toast.style.display = 'none';
+    toast.style.gap = '12px';
     document.body.appendChild(toast);
   }
-  toast.textContent = message;
+  toast.innerHTML = '<span></span>';
+  toast.querySelector('span').textContent = message;
+  if (onRetry) {
+    const retryBtn = document.createElement('button');
+    retryBtn.type = 'button';
+    retryBtn.className = 'iux-btn';
+    retryBtn.style.padding = '4px 10px';
+    retryBtn.style.fontSize = '11.5px';
+    retryBtn.textContent = 'Retry';
+    retryBtn.addEventListener('click', function(){ toast.style.display = 'none'; clearTimeout(toast._hideTimer); onRetry(); });
+    toast.appendChild(retryBtn);
+  }
   toast.style.borderColor = isError ? 'var(--iux-danger)' : 'var(--iux-border)';
   toast.style.color = isError ? 'var(--iux-danger)' : 'var(--iux-text)';
   toast.style.display = 'flex';
+  toast.style.alignItems = 'center';
   clearTimeout(toast._hideTimer);
-  toast._hideTimer = setTimeout(function(){ toast.style.display = 'none'; }, 3200);
+  toast._hideTimer = setTimeout(function(){ toast.style.display = 'none'; }, onRetry ? 6000 : 3200);
 }
 
 // ---------- Screenshot-backed heatmaps: Eye / Mouse / Combined tabs, paginated ----------
@@ -1110,7 +1134,10 @@ function showToast(message, isError){
     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; }
+      if (!canvas) {
+        showToast('Could not prepare this screenshot for viewing.', true, function(){ renderSegment(i); openSegmentViewer(i); });
+        return;
+      }
       Viewer.open({
         source: canvas,
         title: segmentTitle(i),
@@ -1123,8 +1150,12 @@ function showToast(message, isError){
 
   document.getElementById('hmFullscreen').addEventListener('click', function(){ openSegmentViewer(cur); });
   document.getElementById('hmDownload').addEventListener('click', function(){
+    const theCur = cur;
     const canvas = composeSegmentCanvas();
-    if (!canvas) { showToast('Could not prepare this screenshot for export.', true); return; }
+    if (!canvas) {
+      showToast('Could not prepare this screenshot for export.', true, function(){ renderSegment(theCur); });
+      return;
+    }
     try {
       const a = document.createElement('a');
       a.href = canvas.toDataURL('image/png');
@@ -1172,7 +1203,22 @@ function showToast(message, isError){
         paintActive(ctx, cv.width, cv.height);
         resolve();
       }
-      if (img.complete && img.naturalWidth) paint(); else img.onload = paint;
+      function fail(){
+        const shotWrap = document.getElementById('shotWrap');
+        if (shotWrap) {
+          shotWrap.innerHTML =
+            '<div class="empty"><span class="ei">' + iuxIcon('info', 26) + '</span>' +
+            'Could not load the screenshot for segment ' + (i+1) + '.<br>' +
+            '<button type="button" class="iux-btn" id="retryShotBtn" style="margin-top:10px;">' +
+            iuxIcon('refresh', 13) + ' Retry</button></div>';
+          shotWrap.removeAttribute('title');
+          const retryBtn = document.getElementById('retryShotBtn');
+          if (retryBtn) retryBtn.addEventListener('click', function(e){ e.stopPropagation(); renderSegment(i); });
+        }
+        resolve();  // let any pending viewer/download callers proceed — composeSegmentCanvas will see no #shotImg and surface its own toast
+      }
+      if (img.complete && img.naturalWidth) paint();
+      else { img.onload = paint; img.onerror = fail; }
     });
     return renderPromise;
   }
@@ -1188,14 +1234,14 @@ function showToast(message, isError){
       const imgs = await Promise.all(SEGMENTS.map(s => loadImage(s.screenshot)));
       const valid = imgs.filter(Boolean);
       if (!valid.length) {
-        showToast('Could not load this session’s screenshots for a full-page export.', true);
+        showToast('Could not load this session’s screenshots for a full-page export.', true, function(){ exportFullSession(exportMode); });
         return;
       }
       const width = valid[0].naturalWidth;
       let height = 0;
       SEGMENTS.forEach((s, i) => { if (imgs[i]) height = Math.max(height, s.scrollY + imgs[i].naturalHeight); });
       if (!height) {
-        showToast('Could not determine the page size for this export.', true);
+        showToast('Could not determine the page size for this export.', true, function(){ exportFullSession(exportMode); });
         return;
       }
 
@@ -1231,10 +1277,10 @@ function showToast(message, isError){
         title: 'Full Session — ' + exportMode.charAt(0).toUpperCase() + exportMode.slice(1) + ' Heatmap',
         downloadName: 'insightux-full-session-' + exportMode + '-heatmap.png',
       });
-      if (!opened) showToast('Could not open the ' + exportMode + ' heatmap viewer.', true);
+      if (!opened) showToast('Could not open the ' + exportMode + ' heatmap viewer.', true, function(){ exportFullSession(exportMode); });
     } catch (err) {
       console.warn('[insightux-report] full-session export failed:', exportMode, err);
-      showToast('Could not build the full-session ' + exportMode + ' heatmap.', true);
+      showToast('Could not build the full-session ' + exportMode + ' heatmap.', true, function(){ exportFullSession(exportMode); });
     } finally {
       if (btn) { btn.innerHTML = original; btn.disabled = false; }
     }
@@ -1524,20 +1570,30 @@ def generate_report(session_dir):
     segments = build_screenshot_segments(gaze, dom)
     summary = session_summary(gaze, dom)
     mouse = summarize_mouse(session_dir)
-    scroll_depth = compute_scroll_depth(dom)
     mouse_points = mouse_heat_points(session_dir)
     mouse_segments = build_mouse_screenshot_segments(segments, dom, session_dir)
 
     top_label = ranking[0]["label"] if ranking else "—"
 
+    # session_dir's own folder name is already the session's timestamp
+    # (browser_session.py names it that way) — reused here only to print a
+    # human-readable date in the header, same convention _recent_sessions_json()
+    # already parses on the landing page.
+    try:
+        session_ts = datetime.strptime(os.path.basename(session_dir.rstrip("/\\")), "%Y%m%d_%H%M%S")
+        session_timestamp = session_ts.strftime("%b %d, %Y — %I:%M %p").replace(" 0", " ")
+    except ValueError:
+        session_timestamp = "Unknown time"
+
     html = _TEMPLATE
     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("__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("__SCROLL_DEPTH__", str(scroll_depth))
     html = html.replace("__RANKING_JSON__", json.dumps(ranking))
     html = html.replace("__TIMELINE_JSON__", json.dumps(timeline))
     html = html.replace("__SEGMENTS_JSON__", json.dumps(segments))

browser_session.py

@@ -60,7 +60,7 @@ from preprocessing.preprocessing_pipeline import (
 )
 from inference_pipeline import InsightUXPipeline, GazeAngleSmoother
 from session_logger import GazeLogger
-from analysis import generate_report
+from analysis import generate_report, load_session, session_summary
 import theme
 
 
@@ -182,11 +182,25 @@ __THEME_CSS__
   }
   .recent-list { display: flex; flex-direction: column; gap: 6px; }
   .recent-item {
-    display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
-    color: var(--iux-text-dim); font-size: 12.5px;
+    display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
+    color: var(--iux-text-dim); font-size: 12.5px; transition: background .12s ease;
   }
+  .recent-item.clickable { cursor: pointer; }
   .recent-item:hover { background: var(--iux-surface-hi); }
-  .recent-item .rt { color: var(--iux-text-faint); margin-left: auto; font-size: 11px; }
+  .recent-icon { flex-shrink: 0; color: var(--iux-primary-light); display: flex; }
+  .recent-info { flex: 1 1 auto; min-width: 0; }
+  .recent-label { color: var(--iux-text); font-weight: 600; font-size: 12.5px; }
+  .recent-domain {
+    color: var(--iux-text-dim); font-size: 11.5px; margin-top: 2px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .recent-stats { color: var(--iux-text-faint); font-size: 11px; margin-top: 2px; }
+  .recent-action {
+    flex-shrink: 0; display: flex; align-items: center; gap: 5px;
+    font-size: 11.5px; font-weight: 600; color: var(--iux-primary-light); white-space: nowrap;
+  }
+  .recent-item:hover .recent-action { color: var(--iux-lavender); }
+  .recent-item .rt { color: var(--iux-text-faint); margin-left: auto; font-size: 11px; flex-shrink: 0; }
   .recent-empty { color: var(--iux-text-faint); font-size: 12px; text-align: center; padding: 14px 0; }
 
   .hint {
@@ -258,10 +272,30 @@ __THEME_JS__
   if (!RECENT_SESSIONS.length) {
     recentList.innerHTML = '<div class="recent-empty">No sessions yet — start tracking on any page to create your first one.</div>';
   } else {
-    recentList.innerHTML = RECENT_SESSIONS.map(function(s){
-      return '<div class="recent-item">' + iuxIcon('clock', 15) + '<span>' + s.label + '</span>' +
-             '<span class="rt">' + s.when + '</span></div>';
+    recentList.innerHTML = RECENT_SESSIONS.map(function(s, i){
+      const stats = [];
+      if (s.duration != null) stats.push(s.duration + 's');
+      if (s.samples != null) stats.push(s.samples + ' gaze samples');
+      const hasReport = !!s.reportUrl;
+      return '<div class="recent-item' + (hasReport ? ' clickable' : '') + '" data-idx="' + i + '" title="' +
+             (hasReport ? 'Open the report for this session' : 'Report not available for this session') + '">' +
+        '<span class="recent-icon">' + iuxIcon('clock', 16) + '</span>' +
+        '<div class="recent-info">' +
+          '<div class="recent-label">' + s.label + '</div>' +
+          (s.domain ? '<div class="recent-domain">' + s.domain + '</div>' : '') +
+          (stats.length ? '<div class="recent-stats">' + stats.join(' &middot; ') + '</div>' : '') +
+        '</div>' +
+        (hasReport
+          ? '<span class="recent-action">View Report ' + iuxIcon('arrow-right', 13) + '</span>'
+          : '<span class="rt">' + s.when + '</span>') +
+      '</div>';
     }).join('');
+    recentList.querySelectorAll('.recent-item.clickable').forEach(function(el){
+      el.addEventListener('click', function(){
+        const s = RECENT_SESSIONS[parseInt(el.dataset.idx, 10)];
+        if (s && s.reportUrl) location.href = s.reportUrl;
+      });
+    });
   }
 </script>
 </body>
@@ -272,8 +306,18 @@ __THEME_JS__
 def _recent_sessions_json(limit=5):
     """Read-only directory listing of sessions/<timestamp> folders (already
     a well-known constant, SESSIONS_ROOT) for the landing page's "Recent
-    Sessions" strip. Never touches session contents or tracking state."""
+    Sessions" strip. Never touches session contents or tracking state.
+
+    Each entry is matched to its own already-generated analysis_report.html
+    (written by generate_report() at session end, under that same session's
+    folder — the existing session-id -> report mapping already used
+    elsewhere) so "View Report" always opens THAT session's report, never
+    just the most recent one. Duration/sample-count/domain reuse analysis.py's
+    existing load_session()/session_summary() — same read-only computation
+    the report itself already does, not a new data path."""
     import datetime as _dt
+    from urllib.parse import urlparse
+
     entries = []
     if os.path.isdir(SESSIONS_ROOT):
         for name in os.listdir(SESSIONS_ROOT):
@@ -284,13 +328,36 @@ def _recent_sessions_json(limit=5):
                 ts = _dt.datetime.strptime(name, "%Y%m%d_%H%M%S")
             except ValueError:
                 continue
-            entries.append((ts, name))
+            entries.append((ts, full))
     entries.sort(key=lambda pair: pair[0], reverse=True)
-    return [
-        {"label": ts.strftime("%b %d, %Y — %I:%M %p").replace(" 0", " "),
-         "when": ts.strftime("%Y-%m-%d %H:%M")}
-        for ts, _name in entries[:limit]
-    ]
+
+    out = []
+    for ts, full in entries[:limit]:
+        report_path = os.path.join(full, "analysis_report.html")
+        report_url = None
+        if os.path.exists(report_path):
+            report_url = "file://" + report_path.replace(os.sep, "/")
+
+        domain, duration, samples = None, None, None
+        try:
+            gaze, dom = load_session(full)
+            summary = session_summary(gaze, dom)
+            duration = summary["duration"] or None
+            samples = summary["samples"] or None
+            if summary["url"]:
+                domain = urlparse(summary["url"]).netloc or summary["url"]
+        except Exception:
+            pass  # malformed/partial session folder — still list it, just without stats
+
+        out.append({
+            "label": ts.strftime("%b %d, %Y — %I:%M %p").replace(" 0", " "),
+            "when": ts.strftime("%Y-%m-%d %H:%M"),
+            "domain": domain,
+            "duration": duration,
+            "samples": samples,
+            "reportUrl": report_url,
+        })
+    return out
 
 
 def _write_landing_page():
@@ -433,6 +500,16 @@ __THEME_CSS__
     #__insightux_toolbar .iux-navbtn {
       flex:0 0 auto; width:32px; height:32px; border-radius:10px; padding:0;
     }
+    /* Tracking mode: shrink the toolbar down to status pills + a small
+       "reveal" handle so the tracked page gets the screen back, without
+       ever removing the controls — __iux_reveal_toggle brings them back. */
+    #__insightux_toolbar.tracking-compact { height:38px; gap:6px; padding:0 10px; }
+    #__insightux_toolbar.tracking-compact .iux-navbtn,
+    #__insightux_toolbar.tracking-compact #__iux_addr_wrap,
+    #__insightux_toolbar.tracking-compact #__insightux_update,
+    #__insightux_toolbar.tracking-compact #__insightux_status { display:none; }
+    #__insightux_toolbar.tracking-compact #__iux_reveal_toggle { display:flex !important; }
+    body.iux-tracking-compact { padding-top:38px !important; }
     #__iux_addr_wrap {
       flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center;
     }
@@ -531,6 +608,7 @@ __THEME_CSS__
     </div>
     <span id="__insightux_update" title="Click to open the download page"></span>
     <span id="__insightux_status" class="iux-pill"><span class="txt">Press S to start &middot; H heatmap &middot; M panel &middot; X quit</span></span>
+    <button type="button" class="iux-btn" id="__iux_reveal_toggle" title="Show controls" style="width:32px;height:32px;display:none;">${iuxIcon('menu',15)}</button>
     <button type="button" class="iux-btn" id="__iux_theme_toggle" title="Toggle theme" style="width:32px;height:32px;"></button>
   `;
   document.documentElement.appendChild(toolbar);
@@ -585,6 +663,30 @@ __THEME_CSS__
     window.insightuxSetPref('sidebarCollapsed', collapsed);
   });
 
+  // -- tracking-mode compact chrome: sidebar + toolbar shrink automatically
+  // once a session starts, so the tracked page gets maximum space, without
+  // ever removing the controls — __iux_reveal_toggle (only shown while
+  // tracking) brings the full toolbar/sidebar back temporarily. --
+  const revealToggle = document.getElementById('__iux_reveal_toggle');
+  let isTrackingNow = false;
+  let controlsRevealed = false;
+  function applyTrackingChrome(){
+    const compact = isTrackingNow && !controlsRevealed;
+    toolbar.classList.toggle('tracking-compact', compact);
+    document.body.classList.toggle('iux-tracking-compact', compact);
+    if (isTrackingNow) {
+      sidebar.classList.toggle('collapsed', !controlsRevealed);
+    } else {
+      applyCollapsed(window.insightuxGetPrefs().sidebarCollapsed === true);
+    }
+    revealToggle.innerHTML = iuxIcon(controlsRevealed ? 'x' : 'menu', 15);
+    revealToggle.title = controlsRevealed ? 'Hide controls' : 'Show controls';
+  }
+  revealToggle.addEventListener('click', function(){
+    controlsRevealed = !controlsRevealed;
+    applyTrackingChrome();
+  });
+
   // -- settings popover --
   const settingsBtn = document.getElementById('__iux_settings_btn');
   const settingsPop = document.getElementById('__iux_settings_pop');
@@ -625,6 +727,9 @@ __THEME_CSS__
     }
     document.getElementById('__iux_pill_eye').classList.toggle('on', isTracking);
     document.getElementById('__iux_pill_mouse').classList.toggle('on', isTracking);
+    isTrackingNow = isTracking;
+    controlsRevealed = false;
+    applyTrackingChrome();
     if (isTracking) {
       sessionStartedAt = Date.now();
       if (timerInterval) clearInterval(timerInterval);