Fix browser/report navigation split, contain session-list scroll, add rename

Root-caused "Back randomly opens the Report" bug: the report's Back button
was navigating via location.href to the tracked page's URL, which pushes a
*second* history entry for that same page (report was reached via a real
prior navigation already, so this created a duplicate). The next press of
the toolbar's own Back button then replayed straight into the report. Back
to Browser now calls history.back() first (correct semantics, no
duplicate entry, scroll position preserved) and only falls back to the
recorded tracked-page URL / referrer if back() genuinely had nowhere to go
(checked via a timeout, not assumed). Home was already unconditional
(direct navigation to the landing page, independent of history) and
needed no change. Application-level navigation (Home/Report) and the
embedded browser's own website history remain two separate systems, as
intended.

Recent Sessions on the landing page no longer expands the whole page:
the outer page is now fixed (overflow hidden), and only the session list
itself scrolls, capped to a responsive max-height. Raised the listed
session count from 5 to 25 so the scroll is actually exercised.

Sessions can now be renamed inline (pencil icon -> edit -> Enter saves /
Escape cancels), with the custom label stored in localStorage keyed by
the session's own timestamp-folder id -- purely a display override, never
touching the session identifier, its report file, or which report a
session opens.

No backend file was touched -- git diff confirms changes are confined to
browser_session.py (landing page + toolbar chrome) and analysis.py (report
template) only.

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

analysis.py

@@ -666,23 +666,35 @@ document.getElementById('btnFilter').addEventListener('click', function(){
   input.focus();
 });
 
-// ---------- Back to Browser: navigates straight back to the website that
-// was actually being tracked (same URL session_summary() already recorded
-// for this session — the __URL__ shown in the header above) rather than
-// leaning on window.history, whose stack can be unreliable to reason about
-// inside an embedded webview after a Python-triggered navigation. Falls
-// back to real history/referrer only if that URL is unknown. Pure
-// client-side navigation — never touches the Api or tracking state. ----------
+// ---------- Back to Browser: the report was reached by a REAL navigation
+// (Python's window.load_url() away from the tracked page, once the session
+// ended) — that's already a normal entry in this webview's own history, one
+// step behind this page. history.back() is therefore both correct AND the
+// only option that doesn't add a new entry: jumping straight to SESSION_URL
+// via location.href instead would push a *second*, duplicate visit to that
+// same page, and the very next press of the toolbar's own Back button would
+// then land on the report again (the exact "Back randomly opens the report"
+// bug this replaces). history.back() is tried first for that reason; the
+// recorded tracked-page URL / document.referrer are only a fallback, and
+// only used if history.back() genuinely didn't navigate anywhere (checked
+// via a short timeout) — e.g. the report was opened with no prior page in
+// this window's history at all. Pure client-side navigation either way —
+// never touches the Api or tracking state. ----------
 const SESSION_URL = __URL_JSON__;
 document.getElementById('backNav').addEventListener('click', function(){
-  if (SESSION_URL) {
-    window.location.href = SESSION_URL;
-  } else if (window.history.length > 1) {
+  function fallback(){
+    if (SESSION_URL) window.location.href = SESSION_URL;
+    else if (document.referrer) window.location.href = document.referrer;
+    else showToast('No previous page to return to.', true);
+  }
+  if (window.history.length > 1) {
+    const before = window.location.href;
     window.history.back();
-  } else if (document.referrer) {
-    window.location.href = document.referrer;
+    setTimeout(function(){
+      if (window.location.href === before) fallback();  // back() had nowhere to go
+    }, 400);
   } else {
-    showToast('No previous page to return to.', true);
+    fallback();
   }
 });
 

browser_session.py

@@ -125,13 +125,15 @@ __THEME_CSS__
   html, body { height: 100%; }
   body {
     margin: 0; display: flex; flex-direction: column;
-    align-items: center; justify-content: center; gap: 26px;
+    align-items: center; justify-content: center; gap: 22px;
     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);
+    overflow: hidden;  /* the page itself never scrolls — only .recent-list does */
+    padding: 16px 0;
   }
   .theme-toggle {
     position: fixed; top: 20px; right: 22px; width: 38px; height: 38px; padding: 0;
@@ -175,21 +177,43 @@ __THEME_CSS__
     padding: 1px 7px; font: 700 11px var(--iux-font); color: var(--iux-primary-light);
   }
 
-  .recent { width: 640px; max-width: 90vw; margin-top: 4px; }
+  /* Recent Sessions is the only part of this page that scrolls — capped to
+     a viewport-relative height so the page itself never grows past the
+     window, however many past sessions exist. */
+  .recent {
+    width: 640px; max-width: 90vw; margin-top: 4px;
+    display: flex; flex-direction: column; min-height: 0;
+    max-height: min(340px, 34vh);
+  }
   .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;
+    margin: 0 0 10px 2px; font-weight: 600; flex-shrink: 0;
+  }
+  .recent-list {
+    display: flex; flex-direction: column; gap: 6px;
+    overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
+    padding-right: 4px; margin-right: -4px;
   }
-  .recent-list { display: flex; flex-direction: column; gap: 6px; }
   .recent-item {
     display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
-    color: var(--iux-text-dim); font-size: 12.5px; transition: background .12s ease;
+    color: var(--iux-text-dim); font-size: 12.5px; transition: background .12s ease; flex-shrink: 0;
   }
   .recent-item.clickable { cursor: pointer; }
   .recent-item:hover { background: var(--iux-surface-hi); }
   .recent-icon { flex-shrink: 0; color: var(--iux-primary-light); display: flex; }
   .recent-info { flex: 1 1 auto; min-width: 0; }
-  .recent-label { color: var(--iux-text); font-weight: 600; font-size: 12.5px; }
+  .recent-label-row { display: flex; align-items: center; gap: 6px; }
+  .recent-label {
+    color: var(--iux-text); font-weight: 600; font-size: 12.5px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .recent-timestamp { color: var(--iux-text-faint); font-size: 11px; margin-top: 1px; }
+  .recent-edit-btn {
+    flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center;
+    justify-content: center; color: var(--iux-text-faint); opacity: 0; transition: opacity .12s ease, color .12s ease;
+  }
+  .recent-item:hover .recent-edit-btn { opacity: 1; }
+  .recent-edit-btn:hover { color: var(--iux-primary-light); background: var(--iux-surface); }
   .recent-domain {
     color: var(--iux-text-dim); font-size: 11.5px; margin-top: 2px;
     white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
@@ -203,6 +227,13 @@ __THEME_CSS__
   .recent-item .rt { color: var(--iux-text-faint); margin-left: auto; font-size: 11px; flex-shrink: 0; }
   .recent-empty { color: var(--iux-text-faint); font-size: 12px; text-align: center; padding: 14px 0; }
 
+  .recent-name-edit { display: flex; align-items: center; gap: 6px; }
+  .recent-name-input {
+    flex: 1 1 auto; min-width: 0; padding: 5px 9px; font-size: 12.5px; border-radius: 7px;
+    border: 1.5px solid var(--iux-primary-light); background: var(--iux-surface); color: var(--iux-text); outline: none;
+  }
+  .recent-name-edit .iux-btn { flex-shrink: 0; width: 24px; height: 24px; padding: 0; }
+
   .hint {
     color: var(--iux-text-faint); text-align: center; line-height: 1.6; font-size: 11.5px; max-width: 520px;
   }
@@ -269,19 +300,42 @@ __THEME_JS__
 
   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 {
+
+  // Custom session display names live only in this browser's localStorage,
+  // keyed by each session's own timestamp-folder id — never sent anywhere,
+  // never touches the session/report files themselves. Renaming only ever
+  // changes what's shown here; s.id (and therefore s.reportUrl) is untouched.
+  function loadSessionNames(){
+    try { return JSON.parse(localStorage.getItem('__iux_session_names__') || '{}'); } catch (e) { return {}; }
+  }
+  function saveSessionName(id, name){
+    const names = loadSessionNames();
+    const trimmed = (name || '').trim();
+    if (trimmed) names[id] = trimmed; else delete names[id];
+    try { localStorage.setItem('__iux_session_names__', JSON.stringify(names)); } catch (e) {}
+  }
+
+  function renderRecentSessions(){
+    if (!RECENT_SESSIONS.length) {
+      recentList.innerHTML = '<div class="recent-empty">No sessions yet — start tracking on any page to create your first one.</div>';
+      return;
+    }
+    const names = loadSessionNames();
     recentList.innerHTML = RECENT_SESSIONS.map(function(s, i){
       const stats = [];
       if (s.duration != null) stats.push(s.duration + 's');
       if (s.samples != null) stats.push(s.samples + ' gaze samples');
       const hasReport = !!s.reportUrl;
+      const customName = names[s.id];
       return '<div class="recent-item' + (hasReport ? ' clickable' : '') + '" data-idx="' + i + '" title="' +
              (hasReport ? 'Open the report for this session' : 'Report not available for this session') + '">' +
         '<span class="recent-icon">' + iuxIcon('clock', 16) + '</span>' +
         '<div class="recent-info">' +
-          '<div class="recent-label">' + s.label + '</div>' +
+          '<div class="recent-label-row" id="recentRow' + i + '">' +
+            '<span class="recent-label" id="recentLabel' + i + '">' + (customName || s.label) + '</span>' +
+            '<button type="button" class="recent-edit-btn" id="recentEdit' + i + '" title="Rename session">' + iuxIcon('type', 12) + '</button>' +
+          '</div>' +
+          (customName ? '<div class="recent-timestamp">' + s.label + '</div>' : '') +
           (s.domain ? '<div class="recent-domain">' + s.domain + '</div>' : '') +
           (stats.length ? '<div class="recent-stats">' + stats.join(' &middot; ') + '</div>' : '') +
         '</div>' +
@@ -290,13 +344,49 @@ __THEME_JS__
           : '<span class="rt">' + s.when + '</span>') +
       '</div>';
     }).join('');
-    recentList.querySelectorAll('.recent-item.clickable').forEach(function(el){
-      el.addEventListener('click', function(){
-        const s = RECENT_SESSIONS[parseInt(el.dataset.idx, 10)];
-        if (s && s.reportUrl) location.href = s.reportUrl;
-      });
+
+    RECENT_SESSIONS.forEach(function(s, i){
+      const item = recentList.children[i];
+      if (item && s.reportUrl) {
+        item.addEventListener('click', function(){ location.href = s.reportUrl; });
+      }
+      const editBtn = document.getElementById('recentEdit' + i);
+      if (editBtn) {
+        editBtn.addEventListener('click', function(e){ e.stopPropagation(); startEditingName(i); });
+      }
     });
   }
+
+  function startEditingName(i){
+    const s = RECENT_SESSIONS[i];
+    const names = loadSessionNames();
+    const current = names[s.id] || '';
+    const row = document.getElementById('recentRow' + i);
+    row.innerHTML =
+      '<div class="recent-name-edit">' +
+        '<input type="text" class="recent-name-input" id="recentNameInput' + i + '" value="' +
+          current.replace(/"/g, '&quot;') + '" placeholder="' + s.label + '" maxlength="80">' +
+        '<button type="button" class="iux-btn" id="recentNameSave' + i + '" title="Save">' + iuxIcon('check', 13) + '</button>' +
+        '<button type="button" class="iux-btn" id="recentNameCancel' + i + '" title="Cancel">' + iuxIcon('x', 13) + '</button>' +
+      '</div>';
+    const input = document.getElementById('recentNameInput' + i);
+    input.addEventListener('click', function(e){ e.stopPropagation(); });
+    input.focus();
+    input.select();
+
+    function commit(){ saveSessionName(s.id, input.value); renderRecentSessions(); }
+    function cancel(){ renderRecentSessions(); }
+
+    document.getElementById('recentNameSave' + i).addEventListener('click', function(e){ e.stopPropagation(); commit(); });
+    document.getElementById('recentNameCancel' + i).addEventListener('click', function(e){ e.stopPropagation(); cancel(); });
+    input.addEventListener('keydown', function(e){
+      e.stopPropagation();
+      if (e.key === 'Enter') { e.preventDefault(); commit(); }
+      else if (e.key === 'Escape') { e.preventDefault(); cancel(); }
+    });
+  }
+
+  renderRecentSessions();
 </script>
 </body>
 </html>
@@ -328,11 +418,11 @@ def _recent_sessions_json(limit=5):
                 ts = _dt.datetime.strptime(name, "%Y%m%d_%H%M%S")
             except ValueError:
                 continue
-            entries.append((ts, full))
-    entries.sort(key=lambda pair: pair[0], reverse=True)
+            entries.append((ts, name, full))
+    entries.sort(key=lambda triple: triple[0], reverse=True)
 
     out = []
-    for ts, full in entries[:limit]:
+    for ts, name, full in entries[:limit]:
         report_path = os.path.join(full, "analysis_report.html")
         report_url = None
         if os.path.exists(report_path):
@@ -350,6 +440,7 @@ def _recent_sessions_json(limit=5):
             pass  # malformed/partial session folder — still list it, just without stats
 
         out.append({
+            "id": name,  # stable session identifier (its own timestamp folder name) — never shown, only used to key a display-name override
             "label": ts.strftime("%b %d, %Y — %I:%M %p").replace(" 0", " "),
             "when": ts.strftime("%Y-%m-%d %H:%M"),
             "domain": domain,
@@ -372,7 +463,7 @@ def _write_landing_page():
     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()))
+    html = html.replace("__RECENT_SESSIONS_JSON__", json.dumps(_recent_sessions_json(limit=25)))
     with open(path, "w", encoding="utf-8") as f:
         f.write(html)
     return "file://" + path.replace(os.sep, "/")