observatory: n-column compare-mode sidebar (RFC commit 2/3)

When the report aggregates multiple archives (compare mode), the left
sidebar is now an N-column grid with one column per archive.

- main.css: new .index-list.compare-mode rule that switches the list to
  CSS grid with grid-template-columns: repeat(var(--archive-cols), 1fr).
  Each archive becomes an .archive-column li with a sticky header
  (.archive-column-header) showing the archive label, and an internal
  ul.archive-sessions holding that archive's session-dashboard links
  and grouped records (region tree or flat). Tightened item styling
  inside columns (no shadows, smaller font) so two columns stay
  readable on standard sidebar widths.

- 02_layout.js: renderIndex() now branches on state.data.archives.length:
  - len > 1: compare-mode N-column grid; sessions filtered into their
    column via _renderArchiveColumn.
  - len == 1 (single archive): flat session list, identical to today's
    rendering.
  - sessions empty: defensive fallback (very old archives).
  --archive-cols CSS var is set at render time so the grid size adjusts
  to the archive count automatically.

Single-archive reports are unchanged visually; only the structure of
state.data.archives drives the layout.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Author: quic-boyuc

devtools/observatory/templates/css/main.css

@@ -481,3 +481,62 @@
             border-left: 2px solid var(--border-color);
             margin-left: 0.5rem;
         }
+
+        /* Compare-mode n-column layout: when the report aggregates
+           multiple archives, the sidebar becomes an N-column grid with
+           one column per archive. Each column carries its archive label
+           as a sticky header and lists that archive's sessions, dashboard
+           links, and (region-tree or flat) records.
+
+           In single-archive reports `.index-list` keeps its default
+           single-column flow -- the grid styles below only apply when
+           the renderer adds the `compare-mode` class. */
+        .index-list.compare-mode {
+            display: grid;
+            grid-template-columns: repeat(var(--archive-cols, 1), minmax(0, 1fr));
+            gap: 0.5rem;
+            padding: 0.5rem;
+            align-items: start;
+        }
+        .archive-column {
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            overflow: hidden;
+        }
+        .archive-column-header {
+            padding: 0.45rem 0.75rem;
+            font-size: 0.85rem;
+            font-weight: 700;
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border-color);
+            color: var(--text-primary);
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        ul.archive-sessions {
+            list-style: none;
+            margin: 0;
+            padding: 0.4rem;
+            min-width: 0;
+        }
+        /* Tightened items inside columns -- the column itself provides
+           the visual separation so per-item shadows/margins look heavy. */
+        .archive-column .index-item {
+            margin-bottom: 0.2rem;
+            font-size: 0.82rem;
+            box-shadow: none;
+            background: var(--bg-tertiary);
+        }
+        .archive-column .session-dashboard-link {
+            margin-bottom: 0.3rem;
+            font-weight: 600;
+        }

devtools/observatory/templates/js/02_layout.js

@@ -314,22 +314,58 @@
     return html;
   }
 
+  function _renderArchiveColumn(archive, sessions, records, useTree) {
+    const sessionsInArchive = sessions.filter((s) => s.archive === archive.label);
+    let inner = '';
+    sessionsInArchive.forEach((session) => {
+      inner += _renderSessionDashboardLink(session);
+      inner += useTree
+        ? renderIndexTree(records, session.id)
+        : renderIndexFlat(records, session.id);
+    });
+    return `
+      <li class="archive-column">
+        <div class="archive-column-header" title="${escapeHtml(archive.label)}">${escapeHtml(archive.label)}</div>
+        <ul class="archive-sessions">${inner}</ul>
+      </li>
+    `;
+  }
+
   function renderIndex() {
     const list = document.getElementById('index-list');
     if (!list) return;
 
     const records = state.data.records || [];
     const sessions = state.data.sessions || [];
+    const archives = state.data.archives || [];
     const useTree = treeView && records.some((r) => Array.isArray(r.region_stack) && r.region_stack.length > 0);
 
     if (sessions.length === 0) {
       // Defensive fallback: payloads without a sessions list (very old
       // archives) render as a single ungrouped list.
+      list.classList.remove('compare-mode');
+      list.style.removeProperty('--archive-cols');
       list.innerHTML = useTree ? renderIndexTree(records) : renderIndexFlat(records);
       updateIndexHeader();
       return;
     }
 
+    // Compare mode: more than one archive => N-column grid, one per archive.
+    if (archives.length > 1) {
+      list.classList.add('compare-mode');
+      list.style.setProperty('--archive-cols', String(archives.length));
+      let html = '';
+      archives.forEach((archive) => {
+        html += _renderArchiveColumn(archive, sessions, records, useTree);
+      });
+      list.innerHTML = html;
+      updateIndexHeader();
+      return;
+    }
+
+    // Single-archive: flat list of session dashboards + records.
+    list.classList.remove('compare-mode');
+    list.style.removeProperty('--archive-cols');
     let html = '';
     sessions.forEach((session) => {
       html += _renderSessionDashboardLink(session);