Redesign frontend UI with a shared purple/indigo theme system

Adds theme.py as a single source of truth for CSS variables (dark/light),
an inline icon set, and theme-toggle persistence, then applies it across
every real UI surface: the landing page, injected toolbar/sidebar chrome,
gaze/mouse overlays, and the session report. Includes new status pills for
simultaneous eye/mouse tracking, a settings popover, heatmap opacity and
gaze-point controls, and a filterable ranked-attention table. Tracking,
calibration, and report-generation logic are unchanged — only presentation.

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

Files changed (4) hide show

.gitignore +1 -0
analysis.py +371 -120
browser_session.py +443 -122
theme.py +255 -0

.gitignore CHANGED Viewed

@@ -24,6 +24,7 @@
 !analysis.py
 !inference_pipeline.py
 !session_logger.py
 !packaging/InsightUX.spec
 !packaging/installer.iss

 !analysis.py
 !inference_pipeline.py
 !session_logger.py
+!theme.py
 !packaging/InsightUX.spec
 !packaging/installer.iss

analysis.py CHANGED Viewed

@@ -19,6 +19,8 @@ import re
 import json
 import bisect
 PAD_PX = 90  # keep identical to TRACKING_JS's PAD_PX in browser_session.py
@@ -124,10 +126,10 @@ def friendly_label(raw):
     m = re.match(r"^(h[123]):\s*(.*)$", raw)
     if m:
         level = {"h1": "Main heading", "h2": "Heading", "h3": "Sub-heading"}[m.group(1)]
-        return f"{level} — \u201c{m.group(2)}\u201d"
     m = re.match(r"^p \((.*)\)$", raw)
     if m:
-        return f"Text — \u201c{m.group(1)}\u2026\u201d"
     if raw.startswith("#"):
         return "Section: " + raw[1:]
     if raw.startswith("."):
@@ -224,6 +226,23 @@ def session_summary(gaze, dom):
     return {"duration": round(duration, 1), "url": url, "samples": len(gaze)}
 # =============================================================================
 # SCREENSHOT-BACKED HEATMAP SEGMENTS
 # Groups gaze points against whichever screenshot was on screen at the time,
@@ -276,74 +295,129 @@ _TEMPLATE = r"""<!DOCTYPE html>
 <meta name="insightux-report" content="true">
 <title>InsightUX Session Report</title>
 <style>
-  :root {
-    --purple: #7B2FBE; --purple-light: #9B59FF; --pink: #FF2DF0;
-    --bg: #14121a; --panel: #1e1b26; --text: #f0ecf7; --dim: #9a92ad;
-  }
   * { box-sizing: border-box; }
   body {
-    margin: 0; padding: 32px; background: var(--bg); color: var(--text);
-    font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
   }
-  h1 { margin: 0 0 4px 0; font-size: 22px; }
-  .sub { color: var(--dim); font-size: 13px; margin-bottom: 24px; }
-  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
-  .panel {
-    background: var(--panel); border: 1px solid #302a3d; border-radius: 12px;
-    padding: 20px;
   }
-  .panel h2 { margin: 0 0 14px 0; font-size: 14px; color: var(--purple-light);
-              text-transform: uppercase; letter-spacing: 0.06em; }
-  table { width: 100%; border-collapse: collapse; font-size: 13px; }
-  th { text-align: left; color: var(--dim); font-weight: 500; padding: 6px 8px;
-       border-bottom: 1px solid #302a3d; }
-  td { padding: 7px 8px; border-bottom: 1px solid #241f2e; }
-  .bar-bg { background: #2a2436; border-radius: 4px; height: 6px; margin-top: 4px; overflow: hidden; }
-  .bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); }
-  canvas { display: block; }
   .full { grid-column: 1 / -1; }
-  .stat-row { display: flex; gap: 24px; margin-bottom: 20px; }
-  .stat { background: var(--panel); border: 1px solid #302a3d; border-radius: 12px;
-          padding: 14px 20px; }
-  .stat .v { font-size: 20px; font-weight: 600; color: var(--purple-light); }
-  .stat .l { font-size: 11px; color: var(--dim); text-transform: uppercase; }
-  .empty { color: var(--dim); font-size: 13px; padding: 20px 0; text-align: center; }
-  .legend { font-size: 12px; color: var(--dim); line-height: 1.7; }
-  .legend b { color: var(--text); }
   .legend-scale { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
-  .legend-scale .bar { flex: 1; height: 10px; border-radius: 5px;
     background: linear-gradient(90deg, #0000ff, #00e5ff, #00ff5a, #e8ff00, #ff2d00); }
-  .shot-wrap { position: relative; border-radius: 8px; overflow: hidden; background: #100e16; }
   .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;
-              margin-top: 10px; font-size: 12px; color: var(--dim); }
-  .shot-nav button {
-    background: #2a2436; border: 1px solid #3a3348; color: var(--text);
-    padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px;
-  }
-  .shot-nav button:hover { background: #352d44; }
-  .shot-nav button:disabled { opacity: 0.35; cursor: default; }
 </style>
 </head>
 <body>
-<h1>InsightUX Session Report</h1>
-<div class="sub">__URL__ &nbsp;·&nbsp; generated from __SAMPLES__ gaze samples</div>
-<div class="stat-row">
-  <div class="stat"><div class="v">__DURATION__s</div><div class="l">Session Length</div></div>
-  <div class="stat"><div class="v">__NUM_ELEMENTS__</div><div class="l">Elements Fixated</div></div>
-  <div class="stat"><div class="v">__TOP_LABEL__</div><div class="l">Most Attended</div></div>
 </div>
 <div class="grid">
-  <div class="panel">
-    <h2>Ranked Attention</h2>
     <div id="rankingTable"></div>
   </div>
-  <div class="panel">
-    <h2>How to read this report</h2>
     <div class="legend">
       <p><b>Ranked Attention</b> — every part of the page you looked at for a
       meaningful stretch of time, ordered by how long you spent there.</p>
@@ -360,25 +434,46 @@ _TEMPLATE = r"""<!DOCTYPE html>
       so you can see the order things were looked at, not just the totals.</p>
     </div>
   </div>
-  <div class="panel full">
-    <h2>Heatmap by Scroll Position</h2>
     <div id="heatmapArea"></div>
   </div>
-  <div class="panel full">
-    <h2>Attention Timeline</h2>
     <canvas id="timeline" width="1240" height="320"></canvas>
   </div>
-  <div class="panel">
-    <h2>Mouse — Most Interacted Elements</h2>
     <div id="mouseInterests"></div>
   </div>
-  <div class="panel">
-    <h2>Mouse — Click Log</h2>
-    <div id="mouseClicks" style="max-height:260px;overflow-y:auto;"></div>
   </div>
 </div>
 <script>
 const RANKING  = __RANKING_JSON__;
 const TIMELINE = __TIMELINE_JSON__;
 const SEGMENTS = __SEGMENTS_JSON__;
@@ -386,15 +481,42 @@ const DURATION = __DURATION_JSON__;
 const MOUSE_INTERESTS = __MOUSE_INTERESTS_JSON__;
 const MOUSE_CLICKS = __MOUSE_CLICKS_JSON__;
 // ---------- Mouse interests / clicks (from the in-page Mouse Tracker) ----------
 (function(){
   const el = document.getElementById('mouseInterests');
   if (!MOUSE_INTERESTS.length) {
-    el.innerHTML = '<div class="empty">No mouse dwell data recorded for this session.</div>';
   } else {
     let html = '<table><tr><th>#</th><th>Element</th><th>Time</th></tr>';
     MOUSE_INTERESTS.forEach((r, i) => {
-      html += `<tr><td>${i+1}</td><td>${r.element}</td><td>${r.seconds}s</td></tr>`;
     });
     html += '</table>';
     el.innerHTML = html;
@@ -402,37 +524,69 @@ const MOUSE_CLICKS = __MOUSE_CLICKS_JSON__;
   const clickEl = document.getElementById('mouseClicks');
   if (!MOUSE_CLICKS.length) {
-    clickEl.innerHTML = '<div class="empty">No clicks recorded for this session.</div>';
   } else {
     let html = '<ul style="padding-left:0;margin:0;list-style:none;">';
     MOUSE_CLICKS.slice().reverse().forEach(c => {
-      html += `<li style="margin-bottom:8px;border-bottom:1px solid #302a3d;padding-bottom:6px;">
-                 <span style="color:var(--dim);font-size:11px;">${c.timestamp || ''}</span><br>
                  <b>${c.element || ''}</b><br>
-                 <span style="color:var(--text);font-size:12px;">"${(c.text || '').replace(/</g,'&lt;')}"</span>
                </li>`;
     });
     html += '</ul>';
     clickEl.innerHTML = html;
   }
 })();
-// ---------- Ranked table ----------
 (function(){
   const el = document.getElementById('rankingTable');
-  if (!RANKING.length) { el.innerHTML = '<div class="empty">No elements were fixated long enough to register.</div>'; return; }
-  let html = '<table><tr><th>#</th><th>Element</th><th>Dwell</th><th>Share</th><th>Hits</th></tr>';
-  RANKING.slice(0, 15).forEach((r, i) => {
-    html += `<tr>
-      <td>${i+1}</td>
-      <td>${r.label}<div class="bar-bg"><div class="bar-fill" style="width:${r.pct}%"></div></div></td>
-      <td>${r.seconds}s</td>
-      <td>${r.pct}%</td>
-      <td>${r.hits}</td>
-    </tr>`;
-  });
-  html += '</table>';
-  el.innerHTML = html;
 })();
 // ---------- Classic red/green/blue heat colormap ----------
@@ -458,25 +612,50 @@ function jetColor(t){
 // ---------- Screenshot-backed heatmaps, paginated ----------
 (function(){
   const area = document.getElementById('heatmapArea');
   if (!SEGMENTS.length){
-    area.innerHTML = '<div class="empty">No page screenshots were captured for this session ' +
       '(older session, or screen-capture failed) — nothing to overlay a heatmap on.</div>';
     return;
   }
   let cur = 0;
   function renderSegment(i){
     const seg = SEGMENTS[i];
     area.innerHTML = `
-      <div class="shot-wrap" id="shotWrap">
         <img id="shotImg" src="${seg.screenshot}">
         <canvas id="shotCanvas"></canvas>
       </div>
       <div class="shot-nav">
-        <button id="prevBtn" ${i===0?'disabled':''}>&larr; Earlier</button>
         <span>Scroll segment ${i+1} of ${SEGMENTS.length} &middot; ~${seg.duration}s of attention here</span>
-        <button id="nextBtn" ${i===SEGMENTS.length-1?'disabled':''}>Later &rarr;</button>
       </div>
     `;
@@ -484,7 +663,7 @@ function jetColor(t){
     const cv  = document.getElementById('shotCanvas');
     const ctx = cv.getContext('2d');
-    function paint(){
       cv.width = img.naturalWidth;
       cv.height = img.naturalHeight;
@@ -494,7 +673,7 @@ function jetColor(t){
       seg.points.forEach(p => {
         const grad = octx.createRadialGradient(p.sx, p.sy, 0, p.sx, p.sy, 55);
-        grad.addColorStop(0, 'rgba(255,255,255,0.09)');
         grad.addColorStop(1, 'rgba(255,255,255,0)');
         octx.fillStyle = grad;
         octx.beginPath();
@@ -509,13 +688,33 @@ function jetColor(t){
         if (a <= 0) continue;
         const t = Math.min(1, a * 3.0);
         const [r,g,b] = jetColor(t);
-        d[k] = r; d[k+1] = g; d[k+2] = b; d[k+3] = Math.min(235, a*520);
       }
       octx.putImageData(idata, 0, 0);
       ctx.clearRect(0,0,cv.width,cv.height);
       ctx.drawImage(off, 0, 0);
     }
     if (img.complete) paint(); else img.onload = paint;
     document.getElementById('prevBtn').onclick = () => { if (cur>0){ cur--; renderSegment(cur); } };
@@ -529,41 +728,72 @@ function jetColor(t){
 (function(){
   const cv = document.getElementById('timeline');
   const ctx = cv.getContext('2d');
-  ctx.fillStyle = '#100e16';
-  ctx.fillRect(0, 0, cv.width, cv.height);
-  if (!TIMELINE.length || DURATION <= 0) { return; }
-  const labels = [...new Set(TIMELINE.filter(s => s.label).map(s => s.label))];
-  const rowH = Math.min(28, (cv.height - 40) / Math.max(labels.length, 1));
-  const leftPad = 220, topPad = 10, plotW = cv.width - leftPad - 20;
-  ctx.font = '11px -apple-system, Arial';
-  ctx.fillStyle = '#9a92ad';
-  labels.forEach((lab, i) => {
-    const y = topPad + i * rowH;
-    ctx.fillText(lab.length > 28 ? lab.slice(0,28)+'…' : lab, 4, y + rowH*0.65);
-  });
-  const colors = ['#7B2FBE', '#9B59FF', '#FF2DF0', '#5EC8D8', '#F0A868', '#7BE0A0'];
-  TIMELINE.forEach(seg => {
-    if (!seg.label) return;
-    const rowIdx = labels.indexOf(seg.label);
-    const x = leftPad + (seg.start / DURATION) * plotW;
-    const w = Math.max(2, ((seg.end - seg.start) / DURATION) * plotW);
-    const y = topPad + rowIdx * rowH + 3;
-    ctx.fillStyle = colors[rowIdx % colors.length];
-    ctx.fillRect(x, y, w, rowH - 6);
-  });
-  ctx.strokeStyle = '#302a3d';
-  ctx.beginPath();
-  ctx.moveTo(leftPad, cv.height - 18);
-  ctx.lineTo(cv.width - 10, cv.height - 18);
-  ctx.stroke();
-  ctx.fillStyle = '#9a92ad';
-  [0, 0.25, 0.5, 0.75, 1].forEach(f => {
-    const x = leftPad + f * plotW;
-    ctx.fillText((f * DURATION).toFixed(1) + 's', x, cv.height - 4);
   });
 })();
 </script>
@@ -581,6 +811,7 @@ def generate_report(session_dir):
     segments = build_screenshot_segments(gaze, dom)
     summary = session_summary(gaze, dom)
     mouse = summarize_mouse(session_dir)
     top_label = ranking[0]["label"] if ranking else "—"
@@ -590,6 +821,8 @@ def generate_report(session_dir):
     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("__RANKING_JSON__", json.dumps(ranking))
     html = html.replace("__TIMELINE_JSON__", json.dumps(timeline))
     html = html.replace("__SEGMENTS_JSON__", json.dumps(segments))
@@ -597,6 +830,24 @@ def generate_report(session_dir):
     html = html.replace("__MOUSE_INTERESTS_JSON__", json.dumps(mouse["interests"]))
     html = html.replace("__MOUSE_CLICKS_JSON__", json.dumps(mouse["clicks"]))
     out_path = os.path.join(session_dir, "analysis_report.html")
     with open(out_path, "w", encoding="utf-8") as f:
         f.write(html)
@@ -608,4 +859,4 @@ if __name__ == "__main__":
     import sys
     session_dir = sys.argv[1] if len(sys.argv) > 1 else os.path.join("sessions", "live")
     path = generate_report(session_dir)
-    print(f"Report written to: {path}")

 import json
 import bisect
+import theme
 PAD_PX = 90  # keep identical to TRACKING_JS's PAD_PX in browser_session.py
     m = re.match(r"^(h[123]):\s*(.*)$", raw)
     if m:
         level = {"h1": "Main heading", "h2": "Heading", "h3": "Sub-heading"}[m.group(1)]
+        return f"{level} — “{m.group(2)}”"
     m = re.match(r"^p \((.*)\)$", raw)
     if m:
+        return f"Text — “{m.group(1)}…”"
     if raw.startswith("#"):
         return "Section: " + raw[1:]
     if raw.startswith("."):
     return {"duration": round(duration, 1), "url": url, "samples": len(gaze)}
+def compute_scroll_depth(dom):
+    """Max % of page height reached, derived from the scrollY/page/viewport
+    fields already present in every dom snapshot (insightuxAOIs() in
+    TRACKING_JS) — no new data collection, just a derived metric."""
+    best = 0.0
+    for d in dom:
+        page_h = (d.get("page") or {}).get("h") or 0
+        viewport_h = (d.get("viewport") or {}).get("h") or 0
+        scroll_y = d.get("scrollY", 0)
+        if page_h <= 0:
+            continue
+        pct = min(100.0, 100.0 * (scroll_y + viewport_h) / page_h)
+        if pct > best:
+            best = pct
+    return round(best)
 # =============================================================================
 # SCREENSHOT-BACKED HEATMAP SEGMENTS
 # Groups gaze points against whichever screenshot was on screen at the time,
 <meta name="insightux-report" content="true">
 <title>InsightUX Session Report</title>
 <style>
+__THEME_CSS__
   * { box-sizing: border-box; }
   body {
+    margin: 0; padding: 28px 32px 48px; background: var(--iux-bg); color: var(--iux-text);
+    font-family: var(--iux-font); transition: background .3s var(--iux-ease), color .3s var(--iux-ease);
+  }
+  .topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
+  .topbar .brand { display: flex; align-items: center; gap: 10px; }
+  .topbar .mark {
+    width: 34px; height: 34px; border-radius: 10px; background: var(--iux-accent-grad);
+    display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
+  }
+  h1 { margin: 0; font-size: 19px; font-weight: 700; }
+  .sub { color: var(--iux-text-dim); font-size: 12.5px; margin-top: 2px; }
+  .topbar .actions { margin-left: auto; display: flex; gap: 8px; }
+  .topbar .actions .iux-btn { padding: 8px 13px; font-size: 12px; }
+  .stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
+  .stat {
+    padding: 16px 18px; position: relative; overflow: hidden;
+  }
+  .stat .icon-badge {
+    width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
+    background: var(--iux-accent-grad); color: #fff; margin-bottom: 10px;
   }
+  .stat .v { font-size: 21px; font-weight: 700; color: var(--iux-text); }
+  .stat .l { font-size: 10.5px; color: var(--iux-text-faint); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
+  .stat::after {
+    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
+    background: var(--iux-accent-grad); opacity: .7;
   }
+  .grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 18px; }
+  .panel { padding: 20px; }
+  .panel h2 {
+    margin: 0 0 14px 0; font-size: 12.5px; color: var(--iux-text-dim); font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.07em; display: flex; align-items: center; gap: 7px;
+  }
+  .panel h2 .n { margin-left: auto; color: var(--iux-text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
   .full { grid-column: 1 / -1; }
+  table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  th { text-align: left; color: var(--iux-text-faint); font-weight: 600; padding: 7px 8px;
+       border-bottom: 1px solid var(--iux-border); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
+  td { padding: 9px 8px; border-bottom: 1px solid var(--iux-border); vertical-align: middle; }
+  tr.data-row { transition: background .12s ease; cursor: default; }
+  tr.data-row:hover { background: var(--iux-surface-hi); }
+  .row-el { display: flex; align-items: center; gap: 8px; }
+  .row-el .ri { color: var(--iux-primary-light); flex-shrink: 0; }
+  .bar-bg { background: var(--iux-surface-hi); border-radius: 4px; height: 5px; margin-top: 5px; overflow: hidden; }
+  .bar-fill { height: 100%; background: var(--iux-accent-grad); border-radius: 4px; transition: width .4s var(--iux-ease); }
+  #rankingFilter {
+    width: 100%; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--iux-border);
+    background: var(--iux-surface-hi); color: var(--iux-text); font-size: 12px; outline: none; margin-bottom: 10px;
+  }
+  .empty { color: var(--iux-text-faint); font-size: 12.5px; padding: 30px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+  .empty .ei { opacity: .5; }
+  .legend { font-size: 12px; color: var(--iux-text-dim); line-height: 1.7; }
+  .legend b { color: var(--iux-text); }
   .legend-scale { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
+  .legend-scale .bar { flex: 1; height: 9px; border-radius: 5px;
     background: linear-gradient(90deg, #0000ff, #00e5ff, #00ff5a, #e8ff00, #ff2d00); }
+  .hm-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
+  .hm-toolbar .seg { display: flex; gap: 4px; background: var(--iux-surface-hi); padding: 3px; border-radius: 999px; }
+  .hm-toolbar .seg button {
+    border: none; background: transparent; color: var(--iux-text-dim); padding: 6px 12px; border-radius: 999px;
+    font-size: 11.5px; cursor: pointer; font-family: var(--iux-font);
+  }
+  .hm-toolbar .seg button.on { background: var(--iux-accent-grad); color: #fff; }
+  .hm-toolbar .slider-mini { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--iux-text-faint); }
+  .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 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; }
+  .shot-nav .iux-btn:disabled { opacity: 0.35; cursor: default; transform:none; }
+  .click-timeline { width: 100%; display: block; margin-top: 8px; }
 </style>
 </head>
 <body>
+<div class="topbar iux-fade-in">
+  <div class="brand">
+    <div class="mark">__EYE_ICON__</div>
+    <div>
+      <h1>InsightUX Session Report</h1>
+      <div class="sub">__URL__ &nbsp;&middot;&nbsp; __SAMPLES__ gaze samples</div>
+    </div>
+  </div>
+  <div class="actions">
+    <button class="iux-btn" id="btnFilter" title="Filter ranked attention">__FILTER_ICON__ Filter</button>
+    <button class="iux-btn" id="btnCopy" title="Copy summary to clipboard">__COPY_ICON__ Copy</button>
+    <button class="iux-btn primary" id="btnExport" title="Export / print">__EXPORT_ICON__ Export</button>
+    <button class="iux-btn" id="themeToggle" title="Toggle theme" style="width:36px;"></button>
+  </div>
+</div>
+<div class="stat-row iux-fade-in">
+  <div class="stat iux-card hoverable"><div class="icon-badge">__CLOCK_ICON__</div><div class="v">__DURATION__s</div><div class="l">Session Length</div></div>
+  <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>
 <div class="grid">
+  <div class="panel iux-card iux-fade-in">
+    <h2>__TYPE_ICON__ Ranked Attention <span class="n" id="rankCount"></span></h2>
+    <input type="text" id="rankingFilter" placeholder="Filter by element name...">
     <div id="rankingTable"></div>
   </div>
+  <div class="panel iux-card iux-fade-in">
+    <h2>__INFO_ICON__ How to read this report</h2>
     <div class="legend">
       <p><b>Ranked Attention</b> — every part of the page you looked at for a
       meaningful stretch of time, ordered by how long you spent there.</p>
       so you can see the order things were looked at, not just the totals.</p>
     </div>
   </div>
+  <div class="panel iux-card full iux-fade-in">
+    <h2>__LAYERS_ICON__ Heatmap by Scroll Position</h2>
+    <div class="hm-toolbar" id="hmToolbar" style="display:none;">
+      <div class="seg">
+        <button id="modeHeat" class="on">Heatmap</button>
+        <button id="modeGaze">Gaze Points</button>
+      </div>
+      <div class="slider-mini">Opacity <input type="range" id="hmOpacity" min="30" max="100" value="90"></div>
+      <div class="slider-mini">Intensity <input type="range" id="hmIntensity" min="1" max="10" value="3"></div>
+      <button class="iux-btn" id="hmFullscreen">__MAXIMIZE_ICON__</button>
+      <button class="iux-btn" id="hmDownload">__DOWNLOAD_ICON__</button>
+    </div>
     <div id="heatmapArea"></div>
   </div>
+  <div class="panel iux-card full iux-fade-in">
+    <h2>__CLOCK_ICON__ Attention Timeline</h2>
     <canvas id="timeline" width="1240" height="320"></canvas>
   </div>
+  <div class="panel iux-card iux-fade-in">
+    <h2>__CURSOR_ICON__ Mouse — Most Interacted Elements</h2>
     <div id="mouseInterests"></div>
   </div>
+  <div class="panel iux-card iux-fade-in">
+    <h2>__CLICK_ICON__ Mouse — Click Timeline &amp; Log</h2>
+    <canvas class="click-timeline" id="clickTimeline" width="560" height="60"></canvas>
+    <div id="mouseClicks" style="max-height:220px;overflow-y:auto;margin-top:10px;"></div>
   </div>
 </div>
 <script>
+__ICONS_JS__
+__THEME_JS__
+document.getElementById('themeToggle').innerHTML = iuxIcon(window.insightuxGetTheme() === 'light' ? 'moon' : 'sun', 16);
+window.insightuxRepaintCanvases = [];
+document.getElementById('themeToggle').addEventListener('click', function(){
+  const next = window.insightuxToggleTheme();
+  this.innerHTML = iuxIcon(next === 'light' ? 'moon' : 'sun', 16);
+  window.insightuxRepaintCanvases.forEach(function(fn){ try { fn(); } catch(e){} });
+});
 const RANKING  = __RANKING_JSON__;
 const TIMELINE = __TIMELINE_JSON__;
 const SEGMENTS = __SEGMENTS_JSON__;
 const MOUSE_INTERESTS = __MOUSE_INTERESTS_JSON__;
 const MOUSE_CLICKS = __MOUSE_CLICKS_JSON__;
+document.getElementById('btnExport').addEventListener('click', function(){ window.print(); });
+document.getElementById('btnCopy').addEventListener('click', function(){
+  const summary = 'InsightUX Session Report\n' +
+    'Duration: __DURATION__s | Elements fixated: __NUM_ELEMENTS__ | Most attended: __TOP_LABEL__\n' +
+    'Top attention:\n' + RANKING.slice(0,5).map(r => '- ' + r.label + ' (' + r.seconds + 's, ' + r.pct + '%)').join('\n');
+  if (navigator.clipboard) navigator.clipboard.writeText(summary).catch(function(){});
+  const btn = document.getElementById('btnCopy');
+  const original = btn.innerHTML;
+  btn.innerHTML = iuxIcon('check', 14) + ' Copied';
+  setTimeout(function(){ btn.innerHTML = original; }, 1400);
+});
+document.getElementById('btnFilter').addEventListener('click', function(){
+  const input = document.getElementById('rankingFilter');
+  input.focus();
+});
+// ---------- icon inference from friendly_label() output ----------
+function iconForLabel(label){
+  if (!label) return 'click';
+  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 'type';
+  if (label.indexOf('Navigation') === 0) return 'menu';
+  if (label.indexOf('Page header') === 0 || label.indexOf('Page footer') === 0) return 'layers';
+  return 'click';
+}
 // ---------- Mouse interests / clicks (from the in-page Mouse Tracker) ----------
 (function(){
   const el = document.getElementById('mouseInterests');
   if (!MOUSE_INTERESTS.length) {
+    el.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('cursor', 26) + '</span>No mouse dwell data recorded for this session.</div>';
   } else {
     let html = '<table><tr><th>#</th><th>Element</th><th>Time</th></tr>';
     MOUSE_INTERESTS.forEach((r, i) => {
+      html += `<tr class="data-row"><td>${i+1}</td><td>${r.element}</td><td>${r.seconds}s</td></tr>`;
     });
     html += '</table>';
     el.innerHTML = html;
   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>';
   } else {
     let html = '<ul style="padding-left:0;margin:0;list-style:none;">';
     MOUSE_CLICKS.slice().reverse().forEach(c => {
+      html += `<li style="margin-bottom:8px;border-bottom:1px solid var(--iux-border);padding-bottom:8px;">
+                 <span style="color:var(--iux-text-faint);font-size:11px;">${c.timestamp || ''}</span><br>
                  <b>${c.element || ''}</b><br>
+                 <span style="color:var(--iux-text-dim);font-size:12px;">"${(c.text || '').replace(/</g,'&lt;')}"</span>
                </li>`;
     });
     html += '</ul>';
     clickEl.innerHTML = html;
   }
+  // ---- 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();
+    });
+  }
 })();
+// ---------- Ranked table (with live filter) ----------
 (function(){
   const el = document.getElementById('rankingTable');
+  const filterInput = document.getElementById('rankingFilter');
+  document.getElementById('rankCount').textContent = RANKING.length ? RANKING.length + ' items' : '';
+  if (!RANKING.length) {
+    filterInput.style.display = 'none';
+    el.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('target', 26) + '</span>No elements were fixated long enough to register.</div>';
+    return;
+  }
+  function render(filterText){
+    const rows = RANKING.filter(r => !filterText || r.label.toLowerCase().indexOf(filterText.toLowerCase()) !== -1).slice(0, 25);
+    if (!rows.length) { el.innerHTML = '<div class="empty">No elements match "' + filterText + '".</div>'; return; }
+    let html = '<table><tr><th>#</th><th>Element</th><th>Dwell</th><th>Share</th><th>Hits</th></tr>';
+    rows.forEach((r, i) => {
+      html += `<tr class="data-row">
+        <td>${i+1}</td>
+        <td><div class="row-el"><span class="ri">${iuxIcon(iconForLabel(r.label), 15)}</span><span>${r.label}<div class="bar-bg"><div class="bar-fill" style="width:${r.pct}%"></div></div></span></div></td>
+        <td>${r.seconds}s</td>
+        <td>${r.pct}%</td>
+        <td>${r.hits}</td>
+      </tr>`;
+    });
+    html += '</table>';
+    el.innerHTML = html;
+  }
+  render('');
+  filterInput.addEventListener('input', function(e){ render(e.target.value); });
 })();
 // ---------- Classic red/green/blue heat colormap ----------
 // ---------- Screenshot-backed heatmaps, paginated ----------
 (function(){
   const area = document.getElementById('heatmapArea');
+  const toolbar = document.getElementById('hmToolbar');
   if (!SEGMENTS.length){
+    area.innerHTML = '<div class="empty"><span class="ei">' + iuxIcon('layers', 26) + '</span>No page screenshots were captured for this session ' +
       '(older session, or screen-capture failed) — nothing to overlay a heatmap on.</div>';
     return;
   }
+  toolbar.style.display = 'flex';
   let cur = 0;
+  let mode = 'heat';       // 'heat' | 'gaze'
+  let opacity = 0.9, intensity = 0.09;
+  let fullscreen = false;
+  const modeHeatBtn = document.getElementById('modeHeat');
+  const modeGazeBtn = document.getElementById('modeGaze');
+  modeHeatBtn.addEventListener('click', function(){ mode = 'heat'; modeHeatBtn.classList.add('on'); modeGazeBtn.classList.remove('on'); renderSegment(cur); });
+  modeGazeBtn.addEventListener('click', function(){ mode = 'gaze'; modeGazeBtn.classList.add('on'); modeHeatBtn.classList.remove('on'); renderSegment(cur); });
+  document.getElementById('hmOpacity').addEventListener('input', function(e){ opacity = e.target.value/100; renderSegment(cur); });
+  document.getElementById('hmIntensity').addEventListener('input', function(e){ intensity = e.target.value/33; renderSegment(cur); });
+  document.getElementById('hmFullscreen').addEventListener('click', function(){
+    fullscreen = !fullscreen;
+    const wrap = document.getElementById('shotWrap');
+    if (wrap) wrap.classList.toggle('fullscreen', fullscreen);
+  });
+  document.getElementById('hmDownload').addEventListener('click', function(){
+    const cv = document.getElementById('shotCanvas');
+    if (!cv) return;
+    const a = document.createElement('a');
+    a.href = cv.toDataURL('image/png');
+    a.download = 'insightux-heatmap-segment-' + (cur+1) + '.png';
+    a.click();
+  });
   function renderSegment(i){
     const seg = SEGMENTS[i];
     area.innerHTML = `
+      <div class="shot-wrap${fullscreen ? ' fullscreen' : ''}" id="shotWrap">
         <img id="shotImg" src="${seg.screenshot}">
         <canvas id="shotCanvas"></canvas>
       </div>
       <div class="shot-nav">
+        <button class="iux-btn" id="prevBtn" ${i===0?'disabled':''}>${iuxIcon('chevron-left',13)} Earlier</button>
         <span>Scroll segment ${i+1} of ${SEGMENTS.length} &middot; ~${seg.duration}s of attention here</span>
+        <button class="iux-btn" id="nextBtn" ${i===SEGMENTS.length-1?'disabled':''}>Later ${iuxIcon('chevron-right',13)}</button>
       </div>
     `;
     const cv  = document.getElementById('shotCanvas');
     const ctx = cv.getContext('2d');
+    function paintHeat(){
       cv.width = img.naturalWidth;
       cv.height = img.naturalHeight;
       seg.points.forEach(p => {
         const grad = octx.createRadialGradient(p.sx, p.sy, 0, p.sx, p.sy, 55);
+        grad.addColorStop(0, 'rgba(255,255,255,' + intensity + ')');
         grad.addColorStop(1, 'rgba(255,255,255,0)');
         octx.fillStyle = grad;
         octx.beginPath();
         if (a <= 0) continue;
         const t = Math.min(1, a * 3.0);
         const [r,g,b] = jetColor(t);
+        d[k] = r; d[k+1] = g; d[k+2] = b; d[k+3] = Math.min(235, a*520) * opacity;
       }
       octx.putImageData(idata, 0, 0);
       ctx.clearRect(0,0,cv.width,cv.height);
       ctx.drawImage(off, 0, 0);
     }
+    function paintGaze(){
+      cv.width = img.naturalWidth;
+      cv.height = img.naturalHeight;
+      ctx.clearRect(0,0,cv.width,cv.height);
+      ctx.save();
+      ctx.globalAlpha = opacity;
+      seg.points.forEach(p => {
+        ctx.beginPath();
+        ctx.arc(p.sx, p.sy, 5, 0, 2*Math.PI);
+        ctx.fillStyle = '#C084FC';
+        ctx.fill();
+        ctx.lineWidth = 1.2;
+        ctx.strokeStyle = 'rgba(18,19,26,0.6)';
+        ctx.stroke();
+      });
+      ctx.restore();
+    }
+    function paint(){ mode === 'heat' ? paintHeat() : paintGaze(); }
     if (img.complete) paint(); else img.onload = paint;
     document.getElementById('prevBtn').onclick = () => { if (cur>0){ cur--; renderSegment(cur); } };
 (function(){
   const cv = document.getElementById('timeline');
   const ctx = cv.getContext('2d');
+  function paintTimeline(){
+    const bg = getComputedStyle(document.documentElement).getPropertyValue('--iux-bg-alt').trim() || '#171923';
+    const dim = getComputedStyle(document.documentElement).getPropertyValue('--iux-text-dim').trim() || '#9a95b3';
+    ctx.clearRect(0, 0, cv.width, cv.height);
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, cv.width, cv.height);
+    if (!TIMELINE.length || DURATION <= 0) { return; }
+    const labels = [...new Set(TIMELINE.filter(s => s.label).map(s => s.label))];
+    const rowH = Math.min(28, (cv.height - 40) / Math.max(labels.length, 1));
+    const leftPad = 220, topPad = 10, plotW = cv.width - leftPad - 20;
+    ctx.font = '11px -apple-system, Arial';
+    ctx.fillStyle = dim;
+    labels.forEach((lab, i) => {
+      const y = topPad + i * rowH;
+      ctx.fillText(lab.length > 28 ? lab.slice(0,28)+'…' : lab, 4, y + rowH*0.65);
+    });
+    const colors = ['#6366F1', '#8B5CF6', '#C084FC', '#67E8F9', '#FBBF24', '#34D399'];
+    TIMELINE.forEach(seg => {
+      if (!seg.label) return;
+      const rowIdx = labels.indexOf(seg.label);
+      const x = leftPad + (seg.start / DURATION) * plotW;
+      const w = Math.max(2, ((seg.end - seg.start) / DURATION) * plotW);
+      const y = topPad + rowIdx * rowH + 3;
+      ctx.fillStyle = colors[rowIdx % colors.length];
+      const rr = Math.min(4, (rowH - 6) / 2, w / 2);
+      ctx.beginPath();
+      ctx.moveTo(x + rr, y);
+      ctx.arcTo(x + w, y, x + w, y + (rowH - 6), rr);
+      ctx.arcTo(x + w, y + (rowH - 6), x, y + (rowH - 6), rr);
+      ctx.arcTo(x, y + (rowH - 6), x, y, rr);
+      ctx.arcTo(x, y, x + w, y, rr);
+      ctx.closePath();
+      ctx.fill();
+    });
+    ctx.strokeStyle = '#302a3d55';
+    ctx.beginPath();
+    ctx.moveTo(leftPad, cv.height - 18);
+    ctx.lineTo(cv.width - 10, cv.height - 18);
+    ctx.stroke();
+    ctx.fillStyle = dim;
+    [0, 0.25, 0.5, 0.75, 1].forEach(f => {
+      const x = leftPad + f * plotW;
+      ctx.fillText((f * DURATION).toFixed(1) + 's', x, cv.height - 4);
+    });
+  }
+  paintTimeline();
+  window.insightuxRepaintCanvases.push(paintTimeline);
+  const leftPadForHit = 220, topPadForHit = 10;
+  cv.addEventListener('mousemove', function(e){
+    cv.title = '';
+    if (!TIMELINE.length || DURATION <= 0) return;
+    const rect = cv.getBoundingClientRect();
+    const scaleX = cv.width / rect.width;
+    const mx = (e.clientX - rect.left) * scaleX;
+    const plotW = cv.width - leftPadForHit - 20;
+    if (mx < leftPadForHit) return;
+    const t = ((mx - leftPadForHit) / plotW) * DURATION;
+    const hit = TIMELINE.find(s => s.label && t >= s.start && t <= s.end);
+    if (hit) cv.title = hit.label + ' — ' + hit.start.toFixed(1) + 's to ' + hit.end.toFixed(1) + 's';
   });
 })();
 </script>
     segments = build_screenshot_segments(gaze, dom)
     summary = session_summary(gaze, dom)
     mouse = summarize_mouse(session_dir)
+    scroll_depth = compute_scroll_depth(dom)
     top_label = ranking[0]["label"] if ranking else "—"
     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))
     html = html.replace("__MOUSE_INTERESTS_JSON__", json.dumps(mouse["interests"]))
     html = html.replace("__MOUSE_CLICKS_JSON__", json.dumps(mouse["clicks"]))
+    html = html.replace("__THEME_CSS__", theme.THEME_CSS)
+    html = html.replace("__THEME_JS__", theme.THEME_TOGGLE_JS)
+    html = html.replace("__ICONS_JS__", theme.ICONS_JS)
+    html = html.replace("__EYE_ICON__", theme.icon("eye", 18))
+    html = html.replace("__FILTER_ICON__", theme.icon("sliders", 13))
+    html = html.replace("__COPY_ICON__", theme.icon("type", 13))
+    html = html.replace("__EXPORT_ICON__", theme.icon("download", 13))
+    html = html.replace("__CLOCK_ICON__", theme.icon("clock", 15))
+    html = html.replace("__LAYERS_ICON__", theme.icon("layers", 15))
+    html = html.replace("__TARGET_ICON__", theme.icon("target", 15))
+    html = html.replace("__CURSOR_ICON__", theme.icon("cursor", 15))
+    html = html.replace("__CHEVRON_ICON__", theme.icon("chevron-down", 15))
+    html = html.replace("__TYPE_ICON__", theme.icon("type", 13))
+    html = html.replace("__INFO_ICON__", theme.icon("info", 13))
+    html = html.replace("__CLICK_ICON__", theme.icon("click", 13))
+    html = html.replace("__MAXIMIZE_ICON__", theme.icon("maximize", 13))
+    html = html.replace("__DOWNLOAD_ICON__", theme.icon("download", 13))
     out_path = os.path.join(session_dir, "analysis_report.html")
     with open(out_path, "w", encoding="utf-8") as f:
         f.write(html)
     import sys
     session_dir = sys.argv[1] if len(sys.argv) > 1 else os.path.join("sessions", "live")
     path = generate_report(session_dir)
+    print(f"Report written to: {path}")

browser_session.py CHANGED Viewed

@@ -61,6 +61,7 @@ from preprocessing.preprocessing_pipeline import (
 from inference_pipeline import InsightUXPipeline, GazeAngleSmoother
 from session_logger import GazeLogger
 from analysis import generate_report
 # =============================================================================
@@ -119,48 +120,124 @@ _LANDING_HTML = r"""<!DOCTYPE html>
 <meta name="insightux-landing" content="true">
 <title>InsightUX — Eye-Tracking Research Browser</title>
 <style>
   * { box-sizing: border-box; }
   body {
-    margin: 0; height: 100vh; display: flex; flex-direction: column;
-    align-items: center; justify-content: center;
-    background: radial-gradient(circle at 50% 35%, #221a2e, #100e16 70%);
-    font-family: -apple-system, 'Segoe UI', Arial, sans-serif; color: #f0ecf7;
   }
   .logo {
-    font-size: 42px; font-weight: 700; letter-spacing: -0.01em;
-    background: linear-gradient(90deg, #9B59FF, #FF2DF0);
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-    margin-bottom: 6px;
   }
-  .tagline { color: #8a8098; font-size: 14px; margin-bottom: 36px; }
-  form { width: 560px; max-width: 88vw; }
   input {
-    width: 100%; padding: 15px 20px; font-size: 15px; border-radius: 26px;
-    border: 1.5px solid #3a3348; background: #1c1826; color: #f0ecf7;
-    outline: none; transition: border-color 0.15s;
   }
-  input:focus { border-color: #9B59FF; }
-  input::placeholder { color: #635a72; }
   .hint {
-    margin-top: 18px; font-size: 12px; color: #6b6278; text-align: center;
-    line-height: 1.6;
   }
-  .hint b { color: #9B59FF; }
 </style>
 </head>
 <body>
-  <div class="logo">InsightUX</div>
-  <div class="tagline">Eye-Tracking Research Browser</div>
-  <form id="searchForm">
     <input id="searchInput" type="text" autofocus
            placeholder="Search Google, or enter a website address">
   </form>
   <div class="hint">
-    Search results and websites open below as normal.<br>
-    Once you land on the page you want to study, press <b>S</b> to start eye-tracking,
-    <b>E</b> to stop.
   </div>
 <script>
   document.getElementById('searchForm').addEventListener('submit', function(e){
     e.preventDefault();
     const raw = document.getElementById('searchInput').value.trim();
@@ -175,16 +252,62 @@ _LANDING_HTML = r"""<!DOCTYPE html>
       window.location.href = 'https://www.google.com/search?q=' + encodeURIComponent(raw);
     }
   });
 </script>
 </body>
 </html>
 """
 def _write_landing_page():
     path = os.path.join(DATA_DIR, "insightux_landing.html")
     with open(path, "w", encoding="utf-8") as f:
-        f.write(_LANDING_HTML)
     return "file://" + path.replace(os.sep, "/")
@@ -277,91 +400,153 @@ CHROME_JS = r"""
   const isReport    = !!document.querySelector('meta[name="insightux-report"]');
   const isTrackable = !isLanding && !isReport;
   const style = document.createElement('style');
   style.textContent = `
-    html {
-      overflow-x: hidden !important;
-    }
     body {
       box-sizing: border-box !important;
       width: 100vw !important;
       margin: 0 !important;
-      padding-top: 46px !important;
-      padding-left: 84px !important;
       overflow-x: hidden !important;
     }
     #__insightux_toolbar {
-      position:fixed; top:0; left:0; right:0; height:46px; z-index:2147483647;
-      display:flex; align-items:center; gap:10px; padding:0 12px; box-sizing:border-box;
-      background:linear-gradient(90deg, rgba(20,18,26,0.97), rgba(30,20,40,0.97));
-      border-bottom:2px solid; border-image:linear-gradient(90deg,#7B2FBE,#FF2DF0) 1;
-      box-shadow:0 3px 14px rgba(0,0,0,0.35);
-      font:12px -apple-system,'Segoe UI',Arial; color:#f0ecf7;
     }
-    #__insightux_toolbar button {
-      flex:0 0 auto; width:30px; height:30px; border-radius:8px; cursor:pointer;
-      background:#241f2e; border:1px solid #3a3348; color:#f0ecf7; font-size:15px;
-      display:flex; align-items:center; justify-content:center;
     }
-    #__insightux_toolbar button:hover { background:#302a3d; }
     #__iux_addr_form { flex:1 1 auto; min-width:0; }
     #__iux_addr {
-      width:100%; box-sizing:border-box; padding:7px 14px; border-radius:16px;
-      border:1.5px solid #3a3348; background:#1c1826; color:#f0ecf7; outline:none;
-      font-size:12.5px;
     }
-    #__iux_addr:focus { border-color:#9B59FF; }
-    #__insightux_status {
-      flex:0 0 auto; color:#c9a6f5; white-space:nowrap; max-width:30vw;
-      overflow:hidden; text-overflow:ellipsis;
     }
     #__insightux_sidebar {
-      position:fixed; top:46px; left:0; bottom:0; width:84px; z-index:2147483647;
-      display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:10px 8px;
-      box-sizing:border-box; font:11px -apple-system,'Segoe UI',Arial;
-      background:linear-gradient(180deg, rgba(24,20,32,0.97), rgba(16,14,22,0.97));
-      border-right:2px solid; border-image:linear-gradient(180deg,#7B2FBE,#FF2DF0) 1;
-      box-shadow:3px 0 14px rgba(0,0,0,0.35);
     }
-    #__insightux_sidebar button {
-      background:#241f2e; border:1px solid #3a3348; color:#f0ecf7; border-radius:10px;
-      padding:10px 4px; cursor:pointer; line-height:1.5; font-size:11px; text-align:center;
     }
-    #__insightux_sidebar button:hover { background:#302a3d; }
-    #__iux_session.active { background:linear-gradient(135deg,#7B2FBE,#FF2DF0); border-color:transparent; }
-    #__insightux_sidebar .__iux_hints {
-      margin-top:auto; color:#7a7288; font-size:9.5px; line-height:1.6; text-align:center;
     }
     #__insightux_update {
       display:none; cursor:pointer; flex:0 0 auto; white-space:nowrap;
-      padding:5px 12px; border-radius:12px; font-weight:600; font-size:11px;
-      background:linear-gradient(135deg,#7B2FBE,#FF2DF0); color:#fff;
     }
-    #__insightux_update:hover { filter:brightness(1.12); }
   `;
   document.head.appendChild(style);
   const toolbar = document.createElement('div');
   toolbar.id = '__insightux_toolbar';
   toolbar.innerHTML = `
-    <button type="button" id="__iux_back" title="Back">&#8592;</button>
-    <button type="button" id="__iux_fwd" title="Forward">&#8594;</button>
-    <button type="button" id="__iux_reload" title="Reload">&#8635;</button>
-    <button type="button" id="__iux_home" title="Home">&#8962;</button>
-    <form id="__iux_addr_form"><input id="__iux_addr" type="text" autocomplete="off"
-      placeholder="Search or enter address"></form>
     <span id="__insightux_update" title="Click to open the download page"></span>
-    <span id="__insightux_status">Press S to start tracking &middot; E to stop &middot; H heatmap &middot; M mouse panel &middot; X quit</span>
   `;
   document.documentElement.appendChild(toolbar);
   const sidebar = document.createElement('div');
   sidebar.id = '__insightux_sidebar';
   sidebar.innerHTML = `
-    <button type="button" id="__iux_calibrate">&#128065;<br>Calibrate</button>
-    <button type="button" id="__iux_validate">&#127919;<br>Validate</button>
-    <button type="button" id="__iux_session">&#9654;<br>Start<br>Session</button>
-    <div class="__iux_hints">S/E start&#47;stop<br>H heatmap<br>M panel<br>X quit</div>
   `;
   document.documentElement.appendChild(sidebar);
@@ -370,22 +555,83 @@ CHROME_JS = r"""
     if (!document.documentElement.contains(sidebar)) document.documentElement.appendChild(sidebar);
   }, 1000);
-  const statusEl = () => document.getElementById('__insightux_status');
   window.insightuxSetStatus = function(text){
     const el = statusEl();
     if (el) el.textContent = text;
   };
   window.insightuxSetSessionUI = function(isTracking){
     const btn = document.getElementById('__iux_session');
-    if (!btn) return;
-    btn.innerHTML = isTracking ? '&#9632;<br>Stop<br>Session' : '&#9654;<br>Start<br>Session';
-    btn.classList.toggle('active', isTracking);
   };
   window.insightuxShowUpdate = function(version, url){
     const el = document.getElementById('__insightux_update');
     if (!el) return;
-    el.textContent = 'Update available (v' + version + ')';
-    el.style.display = 'inline-block';
     el.onclick = function(){
       if (window.pywebview && window.pywebview.api && window.pywebview.api.open_update_page) {
         window.pywebview.api.open_update_page(url);
@@ -463,6 +709,10 @@ CHROME_JS = r"""
 })();
 """
 CHROME_JS = CHROME_JS.replace("__INSIGHTUX_LANDING_URL__", json.dumps(LANDING_URL))
 # JS: tracking overlay (gaze dot + AOI highlighting) — injected only once
 # tracking actually starts. Ported directly from run_session.py's JS_SETUP.
@@ -493,6 +743,16 @@ TRACKING_JS = r"""
     if (!document.body.contains(cv)) document.body.appendChild(cv);
   }, 1000);
   const MIN_W=40, MIN_H=24, MAX_AOIS=90, MAX_SCAN=2500;
   const PAD_PX = 90;
   const TALL_WRAPPER_H = 220;
@@ -653,30 +913,55 @@ TRACKING_JS = r"""
     ctx.clearRect(0,0,cv.width,cv.height);
     if (activeBox){
-      ctx.fillStyle = 'rgba(123,47,190,0.16)';
-      ctx.fillRect(activeBox.x, activeBox.y, activeBox.w, activeBox.h);
-      ctx.strokeStyle = '#7B2FBE'; ctx.lineWidth = 3;
-      ctx.strokeRect(activeBox.x, activeBox.y, activeBox.w, activeBox.h);
       const label = activeBox.label;
-      ctx.font = 'bold 13px Arial';
-      const tw = ctx.measureText(label).width + 16;
-      const ly = Math.max(0, activeBox.y - 22);
-      ctx.fillStyle = '#7B2FBE';
-      ctx.fillRect(activeBox.x, ly, tw, 20);
       ctx.fillStyle = '#FFFFFF';
-      ctx.fillText(label, activeBox.x + 8, ly + 14);
     }
     ctx.beginPath();
-    ctx.arc(dot.x, dot.y, 13, 0, 2*Math.PI);
-    ctx.fillStyle = 'rgba(255,255,255,0.9)';
     ctx.fill();
     ctx.beginPath();
-    ctx.arc(dot.x, dot.y, 9, 0, 2*Math.PI);
-    ctx.fillStyle = '#FF2DF0';
     ctx.fill();
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = 'rgba(0,0,0,0.55)';
     ctx.stroke();
     requestAnimationFrame(renderLoop);
@@ -927,6 +1212,7 @@ MOUSE_JS = r"""
   }
   // ---- heatmap overlay canvas (ported 1:1 from the extension) ----
   window.insightuxMouseToggleHeatmap = function(){
     if (canvas) { document.body.removeChild(canvas); canvas = null; return; }
     canvas = document.createElement('canvas');
@@ -934,11 +1220,17 @@ MOUSE_JS = r"""
     canvas.style.top = '0'; canvas.style.left = '0';
     canvas.style.zIndex = '2147483645';
     canvas.style.pointerEvents = 'none';
     canvas.width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth, document.documentElement.offsetWidth);
     canvas.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight, document.documentElement.offsetHeight);
     document.body.appendChild(canvas);
     drawHeatmapHighQuality(allHeatmap, allTrail, allClicks);
   };
   function drawClick(x, y){
     if (!canvas) return;
@@ -971,7 +1263,7 @@ MOUSE_JS = r"""
     brushCanvas.width = radius * 2; brushCanvas.height = radius * 2;
     const brushCtx = brushCanvas.getContext('2d');
     const g = brushCtx.createRadialGradient(radius, radius, 0, radius, radius, radius);
-    g.addColorStop(0, 'rgba(0, 0, 0, 0.05)'); g.addColorStop(1, 'rgba(0, 0, 0, 0)');
     brushCtx.fillStyle = g; brushCtx.fillRect(0, 0, radius * 2, radius * 2);
     allHeatPoints.forEach(function(point){ ctx.drawImage(brushCanvas, point.x - radius, point.y - radius); });
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -1012,48 +1304,61 @@ MOUSE_JS = r"""
   });
   // ---- insights panel: in-page port of the extension's popup.html/popup.js ----
   const style = document.createElement('style');
   style.textContent = `
     #__insightux_mouse_panel {
-      position: fixed; top: 44px; right: 16px; width: 260px; z-index: 2147483647;
-      background: linear-gradient(180deg, rgba(28,24,38,0.97), rgba(20,18,26,0.97));
-      border: 1px solid #3a3348; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45);
-      font: 12px -apple-system, 'Segoe UI', Arial; color: #f0ecf7; padding: 14px;
       pointer-events: auto; display: none;
     }
     #__insightux_mouse_panel.open { display: block; }
-    #__insightux_mouse_panel h3 { margin: 0 0 8px 0; font-size: 13px; color: #f0ecf7;
-      display:flex; align-items:center; justify-content:space-between; }
-    #__insightux_mouse_panel .muted { color: #9a92ad; font-size: 11px; }
-    #__insightux_mouse_panel .row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
-    #__insightux_mouse_panel button {
-      flex: 1 1 auto; padding: 6px 8px; font-size: 11px; border-radius: 6px; border: 1px solid #3a3348;
-      background: #241f2e; color: #f0ecf7; cursor: pointer;
     }
-    #__insightux_mouse_panel button:hover { background: #302a3d; }
-    #__insightux_mouse_panel .timer { font-weight: 600; margin-bottom: 6px; }
     #__insightux_mouse_panel .hero {
-      background: rgba(123,47,190,0.15); border: 1px solid #7B2FBE; border-radius: 8px;
-      padding: 8px; text-align: center; margin-bottom: 8px;
     }
-    #__insightux_mouse_panel .hero .lbl { font-size: 9px; text-transform: uppercase; color: #c9a6f5; letter-spacing: 0.05em; }
-    #__insightux_mouse_panel .hero .el { font-weight: 600; margin: 3px 0; color: #FF2DF0; }
     #__insightux_mouse_panel .interest-item, #__insightux_mouse_panel .log-item {
-      background: #241f2e; border-radius: 6px; padding: 5px 7px; margin-bottom: 4px; font-size: 11px;
     }
     #__insightux_mouse_panel .list { max-height: 160px; overflow-y: auto; }
   `;
   document.head.appendChild(style);
   const panel = document.createElement('div');
   panel.id = '__insightux_mouse_panel';
   panel.innerHTML = `
-    <h3>Mouse Tracker <span class="muted" id="__mt_status">idle</span></h3>
-    <div class="timer" id="__mt_timer">Session Time: 00:00</div>
     <div class="row">
-      <button id="__mt_clear">Clear</button>
-      <button id="__mt_heatmap">Heatmap</button>
-      <button id="__mt_logs">Logs</button>
     </div>
     <div id="__mt_hero" class="hero" style="display:none;">
       <div class="lbl">Most Viewed Element</div>
@@ -1064,6 +1369,7 @@ MOUSE_JS = r"""
     <div id="__mt_logs_list" class="list" style="display:none;"></div>
   `;
   document.documentElement.appendChild(panel);
   document.getElementById('__mt_clear').addEventListener('click', function(){
     trailBuffer = []; heatmapBuffer = []; clickBuffer = []; dwellBuffer = [];
@@ -1072,9 +1378,22 @@ MOUSE_JS = r"""
     if (canvas) { document.body.removeChild(canvas); canvas = null; }
     updatePanel();
   });
-  document.getElementById('__mt_heatmap').addEventListener('click', function(){ window.insightuxMouseToggleHeatmap(); });
   document.getElementById('__mt_logs').addEventListener('click', function(){
     logsOpen = !logsOpen;
     document.getElementById('__mt_logs_list').style.display = logsOpen ? 'block' : 'none';
     document.getElementById('__mt_interests').style.display = logsOpen ? 'none' : 'block';
     updatePanel();
@@ -1150,6 +1469,8 @@ MOUSE_JS = r"""
   updatePanel();
 })();
 """
 # =============================================================================

 from inference_pipeline import InsightUXPipeline, GazeAngleSmoother
 from session_logger import GazeLogger
 from analysis import generate_report
+import theme
 # =============================================================================
 <meta name="insightux-landing" content="true">
 <title>InsightUX — Eye-Tracking Research Browser</title>
 <style>
+__THEME_CSS__
   * { box-sizing: border-box; }
+  html, body { height: 100%; }
   body {
+    margin: 0; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 26px;
+    background:
+      radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--iux-primary) 20%, transparent), transparent 42%),
+      radial-gradient(circle at 82% 82%, color-mix(in srgb, var(--iux-indigo) 18%, transparent), transparent 45%),
+      var(--iux-bg);
+    font-family: var(--iux-font); color: var(--iux-text);
+    transition: background 0.3s var(--iux-ease), color 0.3s var(--iux-ease);
   }
+  .theme-toggle {
+    position: fixed; top: 20px; right: 22px; width: 38px; height: 38px; padding: 0;
+  }
+  .brand { text-align: center; }
+  .logo-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
+  .logo-mark {
+    width: 46px; height: 46px; border-radius: 14px; background: var(--iux-accent-grad);
+    display: flex; align-items: center; justify-content: center; box-shadow: var(--iux-shadow-glow);
+  }
+  .logo-mark svg { color: #fff; }
   .logo {
+    font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
+    background: var(--iux-accent-grad);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+  }
+  .tagline { color: var(--iux-text-dim); font-size: 14.5px; margin-top: 8px; }
+  .desc { color: var(--iux-text-faint); font-size: 12.5px; margin-top: 4px; max-width: 480px; }
+  form { width: 560px; max-width: 88vw; position: relative; }
+  form .search-icon {
+    position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--iux-text-faint);
+    pointer-events: none;
   }
   input {
+    width: 100%; padding: 16px 20px 16px 46px; font-size: 15px; border-radius: 28px;
+    border: 1.5px solid var(--iux-border); background: var(--iux-surface); color: var(--iux-text);
+    outline: none; transition: border-color 0.15s var(--iux-ease), box-shadow 0.15s var(--iux-ease);
+    box-shadow: var(--iux-shadow-sm);
+  }
+  input:focus { border-color: var(--iux-primary-light); box-shadow: var(--iux-shadow-glow); }
+  input::placeholder { color: var(--iux-text-faint); }
+  .chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 640px; }
+  .chip {
+    display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
+    background: var(--iux-surface); border: 1px solid var(--iux-border); font-size: 12px; color: var(--iux-text-dim);
+  }
+  .chip kbd {
+    background: var(--iux-surface-hi); border: 1px solid var(--iux-border); border-radius: 6px;
+    padding: 1px 7px; font: 700 11px var(--iux-font); color: var(--iux-primary-light);
+  }
+  .recent { width: 640px; max-width: 90vw; margin-top: 4px; }
+  .recent h3 {
+    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--iux-text-faint);
+    margin: 0 0 10px 2px; font-weight: 600;
   }
+  .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;
+  }
+  .recent-item:hover { background: var(--iux-surface-hi); }
+  .recent-item .rt { color: var(--iux-text-faint); margin-left: auto; font-size: 11px; }
+  .recent-empty { color: var(--iux-text-faint); font-size: 12px; text-align: center; padding: 14px 0; }
   .hint {
+    color: var(--iux-text-faint); text-align: center; line-height: 1.6; font-size: 11.5px; max-width: 520px;
   }
 </style>
 </head>
 <body>
+  <button type="button" class="theme-toggle iux-btn" id="themeToggle" title="Toggle theme"></button>
+  <div class="brand iux-fade-in">
+    <div class="logo-row">
+      <div class="logo-mark">__LOGO_ICON__</div>
+      <div class="logo">InsightUX</div>
+    </div>
+    <div class="tagline">AI-Powered Eye &amp; Mouse Tracking Research Browser</div>
+    <div class="desc">Browse the real web, then press S to start studying attention — gaze, cursor, and clicks, all in one session.</div>
+  </div>
+  <form id="searchForm" class="iux-fade-in">
+    <span class="search-icon">__SEARCH_ICON__</span>
     <input id="searchInput" type="text" autofocus
            placeholder="Search Google, or enter a website address">
   </form>
+  <div class="chips iux-fade-in">
+    <span class="chip">__PLAY_ICON__ <kbd>S</kbd> Start Tracking</span>
+    <span class="chip">__STOP_ICON__ <kbd>E</kbd> Stop Tracking</span>
+    <span class="chip">__LAYERS_ICON__ <kbd>H</kbd> Heatmap</span>
+    <span class="chip">__CURSOR_ICON__ <kbd>M</kbd> Mouse Panel</span>
+  </div>
+  <div class="recent iux-card iux-fade-in" style="padding: 16px 10px;">
+    <h3 style="padding-left: 10px;">Recent Sessions</h3>
+    <div class="recent-list" id="recentList"></div>
+  </div>
   <div class="hint">
+    Search results and websites open below as normal. Once you land on the page you want
+    to study, press <b>S</b> to start eye-tracking, <b>E</b> to stop.
   </div>
 <script>
+__ICONS_JS__
+__THEME_JS__
+  document.getElementById('themeToggle').innerHTML = iuxIcon(window.insightuxGetTheme() === 'light' ? 'moon' : 'sun', 18);
+  document.getElementById('themeToggle').addEventListener('click', function(){
+    const next = window.insightuxToggleTheme();
+    this.innerHTML = iuxIcon(next === 'light' ? 'moon' : 'sun', 18);
+  });
   document.getElementById('searchForm').addEventListener('submit', function(e){
     e.preventDefault();
     const raw = document.getElementById('searchInput').value.trim();
       window.location.href = 'https://www.google.com/search?q=' + encodeURIComponent(raw);
     }
   });
+  const RECENT_SESSIONS = __RECENT_SESSIONS_JSON__;
+  const recentList = document.getElementById('recentList');
+  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>';
+    }).join('');
+  }
 </script>
 </body>
 </html>
 """
+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."""
+    import datetime as _dt
+    entries = []
+    if os.path.isdir(SESSIONS_ROOT):
+        for name in os.listdir(SESSIONS_ROOT):
+            full = os.path.join(SESSIONS_ROOT, name)
+            if not os.path.isdir(full):
+                continue
+            try:
+                ts = _dt.datetime.strptime(name, "%Y%m%d_%H%M%S")
+            except ValueError:
+                continue
+            entries.append((ts, name))
+    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]
+    ]
 def _write_landing_page():
     path = os.path.join(DATA_DIR, "insightux_landing.html")
+    html = _LANDING_HTML
+    html = html.replace("__THEME_CSS__", theme.THEME_CSS)
+    html = html.replace("__THEME_JS__", theme.THEME_TOGGLE_JS)
+    html = html.replace("__ICONS_JS__", theme.ICONS_JS)
+    html = html.replace("__LOGO_ICON__", theme.icon("eye", 24))
+    html = html.replace("__SEARCH_ICON__", theme.icon("search", 18))
+    html = html.replace("__PLAY_ICON__", theme.icon("play", 13))
+    html = html.replace("__STOP_ICON__", theme.icon("stop", 13))
+    html = html.replace("__LAYERS_ICON__", theme.icon("layers", 13))
+    html = html.replace("__CURSOR_ICON__", theme.icon("cursor", 13))
+    html = html.replace("__RECENT_SESSIONS_JSON__", json.dumps(_recent_sessions_json()))
     with open(path, "w", encoding="utf-8") as f:
+        f.write(html)
     return "file://" + path.replace(os.sep, "/")
   const isReport    = !!document.querySelector('meta[name="insightux-report"]');
   const isTrackable = !isLanding && !isReport;
+__ICONS_JS__
+__THEME_JS__
   const style = document.createElement('style');
   style.textContent = `
+__THEME_CSS__
+    html { overflow-x: hidden !important; }
     body {
       box-sizing: border-box !important;
       width: 100vw !important;
       margin: 0 !important;
+      padding-top: 54px !important;
+      padding-left: 78px !important;
       overflow-x: hidden !important;
     }
     #__insightux_toolbar {
+      position:fixed; top:0; left:0; right:0; height:54px; z-index:2147483647;
+      display:flex; align-items:center; gap:8px; padding:0 14px; box-sizing:border-box;
+      font:12px var(--iux-font); color:var(--iux-text);
+      border-bottom:1px solid var(--iux-border);
     }
+    #__insightux_toolbar .iux-navbtn {
+      flex:0 0 auto; width:32px; height:32px; border-radius:10px; padding:0;
     }
+    #__iux_addr_wrap {
+      flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center;
+    }
+    #__iux_addr_wrap .lead-icon { position:absolute; left:12px; color:var(--iux-text-faint); pointer-events:none; display:flex; }
     #__iux_addr_form { flex:1 1 auto; min-width:0; }
     #__iux_addr {
+      width:100%; box-sizing:border-box; padding:8px 14px 8px 36px; border-radius:999px;
+      border:1.5px solid var(--iux-border); background:var(--iux-surface); color:var(--iux-text); outline:none;
+      font-size:12.5px; transition:border-color .15s var(--iux-ease), box-shadow .15s var(--iux-ease);
     }
+    #__iux_addr:focus { border-color:var(--iux-primary-light); box-shadow:var(--iux-shadow-glow); }
+    #__iux_loadbar {
+      position:fixed; top:0; left:0; height:2px; width:0; z-index:2147483647;
+      background:var(--iux-accent-grad); transition:width .5s var(--iux-ease), opacity .3s ease .25s; opacity:0;
     }
+    #__insightux_indicators { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
+    #__insightux_status.iux-pill { max-width:26vw; }
+    #__insightux_status .txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    #__iux_theme_toggle { flex:0 0 auto; }
     #__insightux_sidebar {
+      position:fixed; top:66px; left:12px; bottom:12px; width:66px; z-index:2147483647;
+      display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:12px 8px;
+      box-sizing:border-box; font:11px var(--iux-font);
+      border-radius:var(--iux-radius-lg);
+      transition:width .2s var(--iux-ease);
+    }
+    #__insightux_sidebar.collapsed { width:56px; }
+    #__insightux_sidebar .side-btn {
+      position:relative; flex-direction:column; gap:4px; padding:11px 4px; line-height:1.35;
+      font-size:10.5px; width:100%;
+    }
+    #__insightux_sidebar .side-btn.active {
+      background:var(--iux-accent-grad); border-color:transparent; color:#fff; box-shadow:var(--iux-shadow-glow);
     }
+    #__insightux_sidebar.collapsed .side-btn .lbl { display:none; }
+    #__insightux_sidebar .side-btn .tip {
+      position:absolute; left:100%; top:50%; transform:translateY(-50%) translateX(8px);
+      background:var(--iux-surface-hi); color:var(--iux-text); border:1px solid var(--iux-border);
+      padding:5px 10px; border-radius:8px; font-size:11px; white-space:nowrap; pointer-events:none;
+      opacity:0; transition:opacity .15s ease; box-shadow:var(--iux-shadow-sm);
     }
+    #__insightux_sidebar.collapsed .side-btn:hover .tip { opacity:1; }
+    #__insightux_sidebar .spacer { margin-top:auto; }
+    #__insightux_sidebar .hints {
+      color:var(--iux-text-faint); font-size:9px; line-height:1.7; text-align:center; padding:2px 0;
     }
+    #__insightux_sidebar.collapsed .hints { display:none; }
+    #__iux_collapse_btn { width:100%; }
+    #__iux_settings_pop {
+      position:absolute; left:100%; bottom:0; margin-left:10px; width:220px; padding:14px;
+      display:none; z-index:2147483647; border-radius:var(--iux-radius);
+    }
+    #__iux_settings_pop.open { display:block; }
+    #__iux_settings_pop h4 { margin:0 0 10px; font-size:12px; color:var(--iux-text); }
+    #__iux_settings_pop .row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:11.5px; color:var(--iux-text-dim); }
+    #__iux_settings_pop .kbd-row { display:flex; justify-content:space-between; font-size:11px; color:var(--iux-text-faint); padding:3px 0; }
+    #__iux_settings_pop .ver { margin-top:8px; font-size:10px; color:var(--iux-text-faint); text-align:center; }
     #__insightux_update {
       display:none; cursor:pointer; flex:0 0 auto; white-space:nowrap;
+      padding:6px 13px; border-radius:999px; font-weight:600; font-size:11px;
+      background:var(--iux-accent-grad); color:#fff; align-items:center; gap:6px;
     }
+    #__insightux_update:hover { filter:brightness(1.12); transform:translateY(-1px); }
   `;
   document.head.appendChild(style);
+  const loadbar = document.createElement('div');
+  loadbar.id = '__iux_loadbar';
+  document.documentElement.appendChild(loadbar);
+  requestAnimationFrame(function(){
+    loadbar.style.opacity = '1'; loadbar.style.width = '70%';
+    setTimeout(function(){ loadbar.style.width = '100%'; }, 160);
+    setTimeout(function(){ loadbar.style.opacity = '0'; }, 550);
+  });
   const toolbar = document.createElement('div');
   toolbar.id = '__insightux_toolbar';
+  toolbar.className = 'iux-glass';
   toolbar.innerHTML = `
+    <button type="button" class="iux-btn iux-navbtn" id="__iux_back" title="Back">${iuxIcon('arrow-left',15)}</button>
+    <button type="button" class="iux-btn iux-navbtn" id="__iux_fwd" title="Forward">${iuxIcon('arrow-right',15)}</button>
+    <button type="button" class="iux-btn iux-navbtn" id="__iux_reload" title="Reload">${iuxIcon('refresh',15)}</button>
+    <button type="button" class="iux-btn iux-navbtn" id="__iux_home" title="Home">${iuxIcon('home',15)}</button>
+    <div id="__iux_addr_wrap">
+      <span class="lead-icon" id="__iux_security_icon"></span>
+      <form id="__iux_addr_form"><input id="__iux_addr" type="text" autocomplete="off"
+        placeholder="Search or enter address"></form>
+    </div>
+    <div id="__insightux_indicators">
+      <span class="iux-pill" id="__iux_pill_eye"><span class="dot"></span>Eye Tracking</span>
+      <span class="iux-pill" id="__iux_pill_mouse"><span class="dot"></span>Mouse Tracking</span>
+      <span class="iux-pill" id="__iux_pill_time" style="display:none;">${iuxIcon('clock',11)}<span class="txt">00:00</span></span>
+    </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_theme_toggle" title="Toggle theme" style="width:32px;height:32px;"></button>
   `;
   document.documentElement.appendChild(toolbar);
   const sidebar = document.createElement('div');
   sidebar.id = '__insightux_sidebar';
+  sidebar.className = 'iux-glass';
   sidebar.innerHTML = `
+    <button type="button" class="iux-btn side-btn" id="__iux_calibrate">${iuxIcon('eye',18)}<span class="lbl">Calibrate</span><span class="tip">Calibrate</span></button>
+    <button type="button" class="iux-btn side-btn" id="__iux_validate">${iuxIcon('target',18)}<span class="lbl">Validate</span><span class="tip">Validate</span></button>
+    <button type="button" class="iux-btn side-btn" id="__iux_session">${iuxIcon('play',18)}<span class="lbl">Start<br>Session</span><span class="tip">Start Session</span></button>
+    <div class="spacer"></div>
+    <div style="position:relative;">
+      <button type="button" class="iux-btn side-btn" id="__iux_settings_btn">${iuxIcon('settings',18)}<span class="lbl">Settings</span><span class="tip">Settings</span></button>
+      <div id="__iux_settings_pop" class="iux-glass iux-fade-in">
+        <h4>Shortcuts</h4>
+        <div class="kbd-row"><span>Start / Stop tracking</span><b>S / E</b></div>
+        <div class="kbd-row"><span>Toggle heatmap</span><b>H</b></div>
+        <div class="kbd-row"><span>Mouse panel</span><b>M</b></div>
+        <div class="kbd-row"><span>Quit</span><b>X</b></div>
+        <div class="ver">InsightUX v__INSIGHTUX_VERSION__</div>
+      </div>
+    </div>
+    <button type="button" class="iux-btn" id="__iux_collapse_btn" title="Collapse sidebar">${iuxIcon('chevron-left',14)}</button>
+    <div class="hints">S/E &middot; H &middot; M &middot; X</div>
   `;
   document.documentElement.appendChild(sidebar);
     if (!document.documentElement.contains(sidebar)) document.documentElement.appendChild(sidebar);
   }, 1000);
+  // -- theme toggle --
+  const themeBtn = document.getElementById('__iux_theme_toggle');
+  function paintThemeBtn(){
+    themeBtn.innerHTML = iuxIcon(window.insightuxGetTheme() === 'light' ? 'moon' : 'sun', 15);
+  }
+  paintThemeBtn();
+  themeBtn.addEventListener('click', function(){ window.insightuxToggleTheme(); paintThemeBtn(); });
+  // -- sidebar collapse (persisted like theme) --
+  const collapseBtn = document.getElementById('__iux_collapse_btn');
+  function applyCollapsed(collapsed){
+    sidebar.classList.toggle('collapsed', collapsed);
+    collapseBtn.innerHTML = iuxIcon(collapsed ? 'chevron-right' : 'chevron-left', 14);
+  }
+  applyCollapsed(window.insightuxGetPrefs().sidebarCollapsed === true);
+  collapseBtn.addEventListener('click', function(){
+    const collapsed = !sidebar.classList.contains('collapsed');
+    applyCollapsed(collapsed);
+    window.insightuxSetPref('sidebarCollapsed', collapsed);
+  });
+  // -- settings popover --
+  const settingsBtn = document.getElementById('__iux_settings_btn');
+  const settingsPop = document.getElementById('__iux_settings_pop');
+  settingsBtn.addEventListener('click', function(e){
+    e.stopPropagation();
+    settingsPop.classList.toggle('open');
+  });
+  document.addEventListener('click', function(){ settingsPop.classList.remove('open'); });
+  // -- security icon (padlock for https, globe otherwise) --
+  document.getElementById('__iux_security_icon').innerHTML =
+    iuxIcon(location.protocol === 'https:' ? 'lock' : 'globe', 14);
+  // -- status text / pills, driven by the same Python calls as before --
+  const statusEl = () => document.querySelector('#__insightux_status .txt');
   window.insightuxSetStatus = function(text){
     const el = statusEl();
     if (el) el.textContent = text;
   };
+  let sessionStartedAt = null, timerInterval = null;
+  function tickTimer(){
+    const pill = document.getElementById('__iux_pill_time');
+    if (!sessionStartedAt) { pill.style.display = 'none'; return; }
+    const diff = Math.floor((Date.now() - sessionStartedAt) / 1000);
+    const m = String(Math.floor(diff / 60)).padStart(2, '0');
+    const s = String(diff % 60).padStart(2, '0');
+    pill.querySelector('.txt').textContent = m + ':' + s;
+    pill.style.display = 'inline-flex';
+  }
   window.insightuxSetSessionUI = function(isTracking){
     const btn = document.getElementById('__iux_session');
+    if (btn) {
+      btn.innerHTML = isTracking
+        ? iuxIcon('stop',18) + '<span class="lbl">Stop<br>Session</span><span class="tip">Stop Session</span>'
+        : iuxIcon('play',18) + '<span class="lbl">Start<br>Session</span><span class="tip">Start Session</span>';
+      btn.classList.toggle('active', isTracking);
+    }
+    document.getElementById('__iux_pill_eye').classList.toggle('on', isTracking);
+    document.getElementById('__iux_pill_mouse').classList.toggle('on', isTracking);
+    if (isTracking) {
+      sessionStartedAt = Date.now();
+      if (timerInterval) clearInterval(timerInterval);
+      timerInterval = setInterval(tickTimer, 1000);
+      tickTimer();
+    } else {
+      sessionStartedAt = null;
+      if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
+      tickTimer();
+    }
   };
   window.insightuxShowUpdate = function(version, url){
     const el = document.getElementById('__insightux_update');
     if (!el) return;
+    el.innerHTML = iuxIcon('download', 12) + '<span>Update available (v' + version + ')</span>';
+    el.style.display = 'inline-flex';
     el.onclick = function(){
       if (window.pywebview && window.pywebview.api && window.pywebview.api.open_update_page) {
         window.pywebview.api.open_update_page(url);
 })();
 """
 CHROME_JS = CHROME_JS.replace("__INSIGHTUX_LANDING_URL__", json.dumps(LANDING_URL))
+CHROME_JS = CHROME_JS.replace("__ICONS_JS__", theme.ICONS_JS)
+CHROME_JS = CHROME_JS.replace("__THEME_JS__", theme.THEME_TOGGLE_JS)
+CHROME_JS = CHROME_JS.replace("__THEME_CSS__", theme.THEME_CSS)
+CHROME_JS = CHROME_JS.replace("__INSIGHTUX_VERSION__", VERSION)
 # JS: tracking overlay (gaze dot + AOI highlighting) — injected only once
 # tracking actually starts. Ported directly from run_session.py's JS_SETUP.
     if (!document.body.contains(cv)) document.body.appendChild(cv);
   }, 1000);
+  function roundRectPath(c, x, y, w, h, r){
+    c.beginPath();
+    c.moveTo(x + r, y);
+    c.arcTo(x + w, y, x + w, y + h, r);
+    c.arcTo(x + w, y + h, x, y + h, r);
+    c.arcTo(x, y + h, x, y, r);
+    c.arcTo(x, y, x + w, y, r);
+    c.closePath();
+  }
   const MIN_W=40, MIN_H=24, MAX_AOIS=90, MAX_SCAN=2500;
   const PAD_PX = 90;
   const TALL_WRAPPER_H = 220;
     ctx.clearRect(0,0,cv.width,cv.height);
     if (activeBox){
+      ctx.save();
+      ctx.fillStyle = 'rgba(99,102,241,0.14)';
+      ctx.strokeStyle = '#8B5CF6'; ctx.lineWidth = 2.5;
+      ctx.shadowColor = 'rgba(139,92,246,0.55)'; ctx.shadowBlur = 14;
+      roundRectPath(ctx, activeBox.x, activeBox.y, activeBox.w, activeBox.h, 8);
+      ctx.fill();
+      ctx.shadowBlur = 0;
+      ctx.stroke();
+      ctx.restore();
       const label = activeBox.label;
+      ctx.font = '600 12px -apple-system, "Segoe UI", Arial';
+      const tw = ctx.measureText(label).width + 20;
+      const ly = Math.max(0, activeBox.y - 26);
+      ctx.save();
+      const grad = ctx.createLinearGradient(activeBox.x, ly, activeBox.x + tw, ly);
+      grad.addColorStop(0, '#6366F1'); grad.addColorStop(1, '#C084FC');
+      ctx.fillStyle = grad;
+      roundRectPath(ctx, activeBox.x, ly, tw, 22, 11);
+      ctx.fill();
       ctx.fillStyle = '#FFFFFF';
+      ctx.fillText(label, activeBox.x + 10, ly + 15);
+      ctx.restore();
     }
+    // soft pulsing ring around the dot, on a slow independent cycle
+    const pulse = (Math.sin(now / 420) + 1) / 2;
     ctx.beginPath();
+    ctx.arc(dot.x, dot.y, 15 + pulse * 5, 0, 2*Math.PI);
+    ctx.strokeStyle = 'rgba(139,92,246,' + (0.35 - pulse * 0.2) + ')';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.save();
+    ctx.shadowColor = 'rgba(99,102,241,0.65)'; ctx.shadowBlur = 12;
+    ctx.beginPath();
+    ctx.arc(dot.x, dot.y, 12, 0, 2*Math.PI);
+    ctx.fillStyle = 'rgba(255,255,255,0.92)';
     ctx.fill();
+    ctx.restore();
     ctx.beginPath();
+    ctx.arc(dot.x, dot.y, 8, 0, 2*Math.PI);
+    const dotGrad = ctx.createRadialGradient(dot.x - 2, dot.y - 2, 1, dot.x, dot.y, 8);
+    dotGrad.addColorStop(0, '#C084FC'); dotGrad.addColorStop(1, '#6366F1');
+    ctx.fillStyle = dotGrad;
     ctx.fill();
+    ctx.lineWidth = 1.5;
+    ctx.strokeStyle = 'rgba(18,19,26,0.55)';
     ctx.stroke();
     requestAnimationFrame(renderLoop);
   }
   // ---- heatmap overlay canvas (ported 1:1 from the extension) ----
+  let heatOpacity = 0.85, heatIntensity = 0.05;
   window.insightuxMouseToggleHeatmap = function(){
     if (canvas) { document.body.removeChild(canvas); canvas = null; return; }
     canvas = document.createElement('canvas');
     canvas.style.top = '0'; canvas.style.left = '0';
     canvas.style.zIndex = '2147483645';
     canvas.style.pointerEvents = 'none';
+    canvas.style.opacity = heatOpacity;
+    canvas.style.transition = 'opacity .15s ease';
     canvas.width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth, document.documentElement.offsetWidth);
     canvas.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight, document.documentElement.offsetHeight);
     document.body.appendChild(canvas);
     drawHeatmapHighQuality(allHeatmap, allTrail, allClicks);
   };
+  window.insightuxMouseSetHeatStyle = function(opacity, intensity){
+    if (opacity != null) { heatOpacity = opacity; if (canvas) canvas.style.opacity = heatOpacity; }
+    if (intensity != null) { heatIntensity = intensity; if (canvas) drawHeatmapHighQuality(allHeatmap, allTrail, allClicks); }
+  };
   function drawClick(x, y){
     if (!canvas) return;
     brushCanvas.width = radius * 2; brushCanvas.height = radius * 2;
     const brushCtx = brushCanvas.getContext('2d');
     const g = brushCtx.createRadialGradient(radius, radius, 0, radius, radius, radius);
+    g.addColorStop(0, 'rgba(0, 0, 0, ' + heatIntensity + ')'); g.addColorStop(1, 'rgba(0, 0, 0, 0)');
     brushCtx.fillStyle = g; brushCtx.fillRect(0, 0, radius * 2, radius * 2);
     allHeatPoints.forEach(function(point){ ctx.drawImage(brushCanvas, point.x - radius, point.y - radius); });
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   });
   // ---- insights panel: in-page port of the extension's popup.html/popup.js ----
+__ICONS_JS__
   const style = document.createElement('style');
   style.textContent = `
+__THEME_CSS__
     #__insightux_mouse_panel {
+      position: fixed; top: 66px; right: 16px; width: 268px; z-index: 2147483647;
+      border-radius: var(--iux-radius); box-shadow: var(--iux-shadow);
+      font: 12px var(--iux-font); color: var(--iux-text); padding: 14px;
       pointer-events: auto; display: none;
+      transform: translateY(-8px); opacity: 0; transition: transform .2s var(--iux-ease), opacity .2s var(--iux-ease);
     }
     #__insightux_mouse_panel.open { display: block; }
+    #__insightux_mouse_panel.show { transform: translateY(0); opacity: 1; }
+    #__insightux_mouse_panel h3 { margin: 0 0 10px 0; font-size: 12.5px; color: var(--iux-text); font-weight: 600;
+      display:flex; align-items:center; gap:6px; }
+    #__insightux_mouse_panel .muted { color: var(--iux-text-faint); font-size: 11px; }
+    #__insightux_mouse_panel .row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
+    #__insightux_mouse_panel .row .iux-btn {
+      flex: 1 1 auto; padding: 7px 6px; font-size: 10.5px; gap: 4px;
     }
+    #__insightux_mouse_panel .row .iux-btn.active { background: var(--iux-accent-grad); border-color: transparent; color: #fff; }
+    #__insightux_mouse_panel .timer { font-weight: 600; margin-bottom: 10px; display:flex; align-items:center; gap:6px; color: var(--iux-text-dim); }
     #__insightux_mouse_panel .hero {
+      background: linear-gradient(135deg, color-mix(in srgb, var(--iux-primary) 16%, transparent), color-mix(in srgb, var(--iux-indigo) 10%, transparent));
+      border: 1px solid var(--iux-border); border-radius: var(--iux-radius-sm);
+      padding: 10px; text-align: center; margin-bottom: 10px;
     }
+    #__insightux_mouse_panel .hero .lbl { font-size: 9px; text-transform: uppercase; color: var(--iux-text-faint); letter-spacing: 0.06em; }
+    #__insightux_mouse_panel .hero .el { font-weight: 700; margin: 4px 0; color: var(--iux-primary-light); }
     #__insightux_mouse_panel .interest-item, #__insightux_mouse_panel .log-item {
+      background: var(--iux-surface-hi); border-radius: 8px; padding: 6px 8px; margin-bottom: 5px; font-size: 11px;
     }
     #__insightux_mouse_panel .list { max-height: 160px; overflow-y: auto; }
+    #__insightux_mouse_panel .sliders { display: none; margin-bottom: 10px; }
+    #__insightux_mouse_panel .sliders.open { display: block; }
+    #__insightux_mouse_panel .slider-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size: 10.5px; color: var(--iux-text-dim); }
+    #__insightux_mouse_panel .slider-row span { flex: 0 0 52px; }
+    #__insightux_mouse_panel input[type=range] { flex: 1 1 auto; accent-color: var(--iux-primary-light); }
   `;
   document.head.appendChild(style);
   const panel = document.createElement('div');
   panel.id = '__insightux_mouse_panel';
+  panel.className = 'iux-glass';
   panel.innerHTML = `
+    <h3>${iuxIcon('cursor', 14)} Mouse Tracker <span class="muted" id="__mt_status" style="margin-left:auto;">idle</span></h3>
+    <div class="timer">${iuxIcon('clock', 13)} <span id="__mt_timer">00:00</span></div>
     <div class="row">
+      <button class="iux-btn" id="__mt_clear" title="Clear collected data">${iuxIcon('trash', 13)} Clear</button>
+      <button class="iux-btn" id="__mt_heatmap" title="Toggle heatmap overlay (H)">${iuxIcon('layers', 13)} Heatmap</button>
+      <button class="iux-btn" id="__mt_logs" title="View click log">${iuxIcon('type', 13)} Logs</button>
+    </div>
+    <div class="sliders" id="__mt_sliders">
+      <div class="slider-row"><span>Opacity</span><input type="range" id="__mt_opacity" min="20" max="100" value="85"></div>
+      <div class="slider-row"><span>Intensity</span><input type="range" id="__mt_intensity" min="2" max="12" value="5"></div>
     </div>
     <div id="__mt_hero" class="hero" style="display:none;">
       <div class="lbl">Most Viewed Element</div>
     <div id="__mt_logs_list" class="list" style="display:none;"></div>
   `;
   document.documentElement.appendChild(panel);
+  requestAnimationFrame(function(){ panel.classList.add('show'); });
   document.getElementById('__mt_clear').addEventListener('click', function(){
     trailBuffer = []; heatmapBuffer = []; clickBuffer = []; dwellBuffer = [];
     if (canvas) { document.body.removeChild(canvas); canvas = null; }
     updatePanel();
   });
+  const heatmapBtn = document.getElementById('__mt_heatmap');
+  const slidersEl = document.getElementById('__mt_sliders');
+  heatmapBtn.addEventListener('click', function(){
+    window.insightuxMouseToggleHeatmap();
+    heatmapBtn.classList.toggle('active', !!canvas);
+    slidersEl.classList.toggle('open', !!canvas);
+  });
+  document.getElementById('__mt_opacity').addEventListener('input', function(e){
+    window.insightuxMouseSetHeatStyle(e.target.value / 100, null);
+  });
+  document.getElementById('__mt_intensity').addEventListener('input', function(e){
+    window.insightuxMouseSetHeatStyle(null, e.target.value / 100);
+  });
   document.getElementById('__mt_logs').addEventListener('click', function(){
     logsOpen = !logsOpen;
+    document.getElementById('__mt_logs').classList.toggle('active', logsOpen);
     document.getElementById('__mt_logs_list').style.display = logsOpen ? 'block' : 'none';
     document.getElementById('__mt_interests').style.display = logsOpen ? 'none' : 'block';
     updatePanel();
   updatePanel();
 })();
 """
+MOUSE_JS = MOUSE_JS.replace("__ICONS_JS__", theme.ICONS_JS)
+MOUSE_JS = MOUSE_JS.replace("__THEME_CSS__", theme.THEME_CSS)
 # =============================================================================

theme.py ADDED Viewed

	@@ -0,0 +1,255 @@

+"""
+theme.py
+Single source of truth for InsightUX's visual design system: CSS custom
+properties (dark + light), a handful of shared utility classes, an inline
+icon set, and the theme-toggle/persistence script.
+Every InsightUX UI surface is a separate HTML document or an independently
+injected JS bundle (landing page, toolbar/sidebar overlay, session report,
+mouse-tracker panel) — none of them share a stylesheet at runtime. This
+module exists so all four still look like one product: each template
+splices THEME_CSS + THEME_TOGGLE_JS into its own <style>/<script>, instead
+of every surface hand-rolling its own palette.
+No heavy imports (no cv2/mediapipe/pyautogui) so analysis.py can import
+this standalone, the same way it already runs outside the pywebview app.
+"""
+import json
+# =============================================================================
+# ICONS — one inline SVG path set, reused from both Python (string-built
+# templates) and JS (client-side rendering in the report). Kept intentionally
+# small: only the glyphs actually used across the four surfaces.
+# =============================================================================
+ICON_PATHS = {
+    "search": '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+    "x": '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+    "sun": '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>',
+    "moon": '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+    "eye": '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+    "cursor": '<path d="M12.586 12.586 19 19"/><path d="M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"/>',
+    "target": '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
+    "play": '<polygon points="6 3 20 12 6 21 6 3"/>',
+    "stop": '<rect width="16" height="16" x="4" y="4" rx="3"/>',
+    "home": '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/>',
+    "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+    "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+    "refresh": '<path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v6h-6"/>',
+    "lock": '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+    "globe": '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10Z"/>',
+    "image": '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',
+    "type": '<path d="M17 6.1H3"/><path d="M21 12.1H3"/><path d="M15.1 18H3"/>',
+    "video": '<path d="m16 13 5.2 3.5a.5.5 0 0 0 .8-.4V7.9a.5.5 0 0 0-.8-.4L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/>',
+    "click": '<path d="m9 9 5 12 1.8-5.2L21 14Z"/><path d="M7.2 2.2 8 5.1"/><path d="m5.1 8-2.9-.8"/><path d="M14 4.1 12 6"/><path d="m6 12-1.9 2"/>',
+    "download": '<path d="M12 15V3"/><path d="M3 15v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4"/><path d="m7 10 5 5 5-5"/>',
+    "maximize": '<path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>',
+    "sliders": '<line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="1" x2="7" y1="14" y2="14"/><line x1="9" x2="15" y1="8" y2="8"/><line x1="17" x2="23" y1="16" y2="16"/>',
+    "clock": '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+    "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+    "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+    "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+    "settings": '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/>',
+    "layers": '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 12.32-8.58 3.9a2 2 0 0 1-1.66 0L2 12.32"/><path d="m22 17.32-8.58 3.9a2 2 0 0 1-1.66 0L2 17.32"/>',
+    "trash": '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
+    "info": '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    "check": '<path d="M20 6 9 17l-5-5"/>',
+    "camera": '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
+    "menu": '<line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/>',
+}
+def icon(name, size=18, css_class=""):
+    """Python-side inline <svg> for a template string."""
+    body = ICON_PATHS.get(name, "")
+    cls = ("iux-icon " + css_class).strip()
+    return (
+        f'<svg class="{cls}" width="{size}" height="{size}" viewBox="0 0 24 24" '
+        f'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" '
+        f'stroke-linejoin="round">{body}</svg>'
+    )
+ICONS_JS = (
+    "const IUX_ICONS = " + json.dumps(ICON_PATHS) + ";\n"
+    "function iuxIcon(name, size){\n"
+    "  size = size || 18;\n"
+    "  return '<svg class=\"iux-icon\" width=\"' + size + '\" height=\"' + size + '\" "
+    "viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" "
+    "stroke-linecap=\"round\" stroke-linejoin=\"round\">' + (IUX_ICONS[name] || '') + '</svg>';\n"
+    "}\n"
+)
+# =============================================================================
+# CSS — shared custom properties + a small utility layer. Dark is the
+# default (:root); :root[data-theme="light"] overrides. Deep charcoal, not
+# pitch black, for dark; warm off-white, not pure white, for light.
+# =============================================================================
+THEME_CSS = r"""
+:root {
+  --iux-bg: #12131A;
+  --iux-bg-alt: #171923;
+  --iux-surface: #1E2030;
+  --iux-surface-hi: #262940;
+  --iux-border: rgba(148, 138, 179, 0.16);
+  --iux-text: #F1EEFA;
+  --iux-text-dim: #9B95B3;
+  --iux-text-faint: #6E6885;
+  --iux-primary: #7C3AED;
+  --iux-primary-light: #8B5CF6;
+  --iux-indigo: #6366F1;
+  --iux-accent-grad: linear-gradient(135deg, #6366F1, #8B5CF6 55%, #C084FC);
+  --iux-cyan: #67E8F9;
+  --iux-lavender: #C4B5FD;
+  --iux-success: #34D399;
+  --iux-warning: #FBBF24;
+  --iux-danger: #FB7185;
+  --iux-info: #38BDF8;
+  --iux-radius-sm: 8px;
+  --iux-radius: 14px;
+  --iux-radius-lg: 20px;
+  --iux-shadow-sm: 0 2px 10px rgba(0,0,0,0.28);
+  --iux-shadow: 0 10px 34px rgba(10,6,24,0.45);
+  --iux-shadow-glow: 0 0 0 1px rgba(139,92,246,0.35), 0 8px 28px rgba(124,58,237,0.28);
+  --iux-blur: blur(18px);
+  --iux-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --iux-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Manrope', Arial, sans-serif;
+}
+:root[data-theme="light"] {
+  --iux-bg: #F7F5FB;
+  --iux-bg-alt: #F1EEFA;
+  --iux-surface: #FFFFFF;
+  --iux-surface-hi: #F3F0FA;
+  --iux-border: rgba(99, 79, 150, 0.14);
+  --iux-text: #211D33;
+  --iux-text-dim: #635C7D;
+  --iux-text-faint: #918AA8;
+  --iux-shadow-sm: 0 2px 10px rgba(76,60,120,0.08);
+  --iux-shadow: 0 14px 34px rgba(76,60,120,0.14);
+  --iux-shadow-glow: 0 0 0 1px rgba(124,58,237,0.18), 0 8px 24px rgba(124,58,237,0.16);
+}
+.iux-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
+.iux-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  border-radius: var(--iux-radius-sm); border: 1px solid var(--iux-border);
+  background: var(--iux-surface); color: var(--iux-text); cursor: pointer;
+  font: 500 12.5px var(--iux-font);
+  transition: transform 0.15s var(--iux-ease), background 0.15s var(--iux-ease), box-shadow 0.15s var(--iux-ease);
+}
+.iux-btn:hover { background: var(--iux-surface-hi); transform: translateY(-1px); }
+.iux-btn:active { transform: translateY(0) scale(0.97); }
+.iux-btn.primary { background: var(--iux-accent-grad); border-color: transparent; color: #fff; }
+.iux-btn.primary:hover { box-shadow: var(--iux-shadow-glow); }
+.iux-card {
+  background: var(--iux-surface); border: 1px solid var(--iux-border);
+  border-radius: var(--iux-radius); box-shadow: var(--iux-shadow-sm);
+  transition: transform 0.18s var(--iux-ease), box-shadow 0.18s var(--iux-ease);
+}
+.iux-card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--iux-shadow); }
+.iux-glass {
+  background: color-mix(in srgb, var(--iux-surface) 82%, transparent);
+  backdrop-filter: var(--iux-blur); -webkit-backdrop-filter: var(--iux-blur);
+  border: 1px solid var(--iux-border);
+}
+.iux-pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 12px; border-radius: 999px; font: 600 11px var(--iux-font);
+  border: 1px solid var(--iux-border); background: var(--iux-surface-hi); color: var(--iux-text-dim);
+  white-space: nowrap;
+}
+.iux-pill .dot {
+  width: 7px; height: 7px; border-radius: 50%; background: var(--iux-text-faint); flex-shrink: 0;
+}
+.iux-pill.on { color: var(--iux-success); border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.1); }
+.iux-pill.on .dot { background: var(--iux-success); animation: iux-pulse 1.6s ease-in-out infinite; }
+@keyframes iux-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
+  70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
+}
+.iux-toast {
+  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
+  border-radius: var(--iux-radius-sm); background: var(--iux-surface); color: var(--iux-text);
+  border: 1px solid var(--iux-border); box-shadow: var(--iux-shadow);
+  font: 500 12.5px var(--iux-font);
+  animation: iux-toast-in 0.25s var(--iux-ease);
+}
+@keyframes iux-toast-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.iux-fade-in { animation: iux-fade 0.35s var(--iux-ease); }
+@keyframes iux-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+::-webkit-scrollbar { width: 9px; height: 9px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--iux-border); border-radius: 8px; }
+::-webkit-scrollbar-thumb:hover { background: var(--iux-text-faint); }
+"""
+# =============================================================================
+# THEME PERSISTENCE — pure frontend, no Api/IPC calls.
+#
+# CHROME_JS and MOUSE_JS are re-injected into whatever real website is
+# currently loaded (google.com, wikipedia.org, ...), each a different
+# origin, so localStorage (per-origin) can't carry a preference between
+# them. window.name is the standard trick here: it survives navigation
+# across origins within the same tab/window and is only cleared when the
+# window itself closes. localStorage is kept as a secondary mirror so the
+# landing page and the generated report (both file:// — same origin) stay
+# in sync with each other even in a fresh window.
+# =============================================================================
+THEME_TOGGLE_JS = r"""
+(function(){
+  function readPrefs(){
+    try {
+      if (window.name && window.name.indexOf('__iuxprefs__:') === 0) {
+        return JSON.parse(window.name.slice(13));
+      }
+    } catch (e) {}
+    try {
+      const raw = localStorage.getItem('__iux_prefs__');
+      if (raw) return JSON.parse(raw);
+    } catch (e) {}
+    return {};
+  }
+  function writePrefs(prefs){
+    try { window.name = '__iuxprefs__:' + JSON.stringify(prefs); } catch (e) {}
+    try { localStorage.setItem('__iux_prefs__', JSON.stringify(prefs)); } catch (e) {}
+  }
+  const prefs = readPrefs();
+  const theme = prefs.theme === 'light' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', theme);
+  window.insightuxGetPrefs = readPrefs;
+  window.insightuxSetPref = function(key, value){
+    const p = readPrefs();
+    p[key] = value;
+    writePrefs(p);
+  };
+  window.insightuxGetTheme = function(){ return readPrefs().theme === 'light' ? 'light' : 'dark'; };
+  window.insightuxToggleTheme = function(){
+    const next = window.insightuxGetTheme() === 'light' ? 'dark' : 'light';
+    document.documentElement.setAttribute('data-theme', next);
+    window.insightuxSetPref('theme', next);
+    return next;
+  };
+})();
+"""