observatory: fix sidebar/header usability

Two UI improvements addressing feedback that the left panel
requires hovering a hard-to-find 12px strip to open:

Header
- Remove hover-only reveal (no more invisible 10px trigger strip)
- Make header permanently visible with `position: sticky`
- Slightly compact padding so it uses less vertical space

Sidebar toggle tab
- Add a visible 22px-wide tab fixed at the left edge (always visible)
- Shows ›/‹ chevron; click to pin panel open or close
- Tab slides to left:300px when sidebar is pinned open
- State persisted in localStorage (os_sidebar_pinned) so it
  survives page refresh
- Hover-to-reveal still works as a secondary mechanism

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

Author: quic-boyuc

devtools/observatory/templates/css/main.css

@@ -87,42 +87,34 @@
         header {
             background: var(--bg-secondary);
             color: var(--text-primary);
-            padding: 1rem 2rem;
+            padding: 0.55rem 1.5rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
             flex-shrink: 0;
             border-bottom: 1px solid var(--border-color);
-            position: fixed;
+            position: sticky;
             top: 0;
             left: 0;
             right: 0;
-            transform: translateY(-100%);
-            transition: transform 0.25s ease, box-shadow 0.25s ease;
             z-index: 200;
         }
 
-        .header-trigger:hover ~ header,
-        header:hover {
-            transform: translateY(0);
-            box-shadow: 0 4px 12px var(--shadow);
-        }
-
         header.hidden {
-            transform: translateY(-100%);
+            display: none;
         }
-        
+
         [data-theme="dark"] header {
             background: var(--header-bg);
             color: var(--text-inverse);
             border-bottom: none;
         }
 
-        .header-content h1 { font-size: 1.2rem; margin: 0; }
-        .header-meta { font-size: 0.85rem; opacity: 0.7; margin-top: 0.2rem; }
+        .header-content h1 { font-size: 1.05rem; margin: 0; }
+        .header-meta { font-size: 0.8rem; opacity: 0.7; margin-top: 0.1rem; }
         .header-meta span { margin-right: 1.5rem; }
         .header-meta code { background: var(--bg-tertiary); padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid var(--border-color); }
-        
+
         [data-theme="dark"] .header-meta code { background: rgba(255,255,255,0.1); border: none; }
 
         /* Theme Toggle */
@@ -131,30 +123,69 @@
             border: 1px solid var(--border-color);
             color: var(--text-primary);
             border-radius: 6px;
-            padding: 0.5rem 0.75rem;
+            padding: 0.4rem 0.65rem;
             cursor: pointer;
-            font-size: 1.2rem;
+            font-size: 1.1rem;
             transition: all 0.2s;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         .theme-toggle:hover { background: var(--hover-color); transform: scale(1.05); }
-        
+
         [data-theme="dark"] .theme-toggle {
             background: rgba(255,255,255,0.1);
             border: 1px solid rgba(255,255,255,0.2);
             color: white;
         }
         [data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.2); }
 
+        /* Sidebar toggle tab — always-visible click target on left edge */
+        .sidebar-toggle-btn {
+            position: fixed;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 210;
+            width: 22px;
+            height: 60px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-left: none;
+            border-radius: 0 8px 8px 0;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 2px 0 8px var(--shadow);
+            transition: left 0.25s ease, background 0.2s, box-shadow 0.2s;
+            padding: 0;
+            color: var(--text-secondary);
+            font-size: 13px;
+            line-height: 1;
+            user-select: none;
+        }
+        .sidebar-toggle-btn:hover {
+            background: var(--hover-color);
+            color: var(--text-primary);
+            box-shadow: 3px 0 12px var(--shadow);
+            width: 26px;
+        }
+        .sidebar-toggle-btn.open { left: 300px; }
+        [data-theme="dark"] .sidebar-toggle-btn {
+            background: var(--header-bg);
+            border-color: rgba(255,255,255,0.15);
+            color: rgba(255,255,255,0.7);
+        }
+        [data-theme="dark"] .sidebar-toggle-btn:hover { background: rgba(255,255,255,0.12); color: white; }
+
         .container {
             display: flex;
             flex: 1;
             overflow: hidden;
         }
 
-        /* Sidebar trigger zone — invisible strip on left edge */
+        /* Sidebar trigger zone — invisible strip on left edge (hover fallback) */
         .index-pane-trigger {
             position: fixed;
             left: 0;
@@ -182,9 +213,10 @@
             box-shadow: none;
         }
 
-        /* Show when trigger zone or pane itself is hovered */
+        /* Show when trigger zone or pane itself is hovered, or pinned open */
         .index-pane-trigger:hover ~ .index-pane,
-        .index-pane:hover {
+        .index-pane:hover,
+        .index-pane.pinned {
             transform: translateX(0);
             box-shadow: 4px 0 16px var(--shadow);
         }

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

@@ -3,10 +3,13 @@
   const state = OBS.state;
   const { escapeHtml } = OBS.utils;
 
+  // Restore pinned state from localStorage
+  let sidebarPinned = false;
+  try { sidebarPinned = localStorage.getItem('obs_sidebar_pinned') === '1'; } catch(e) {}
+
   function renderLayout() {
     const icon = state.theme === 'dark' ? '☀️' : '🌙';
     OBS.app.innerHTML = `
-      <div class="header-trigger"></div>
       <header>
         <div class="header-content">
           <h1>${escapeHtml(state.data.title || 'Observatory Report')}</h1>
@@ -22,7 +25,13 @@
       </header>
       <div class="container">
         <div class="index-pane-trigger"></div>
-        <nav class="index-pane">
+        <button class="sidebar-toggle-btn ${sidebarPinned ? 'open' : ''}"
+                id="sidebar-toggle-btn"
+                onclick="toggleSidebar()"
+                title="${sidebarPinned ? 'Close panel' : 'Open panel'}">
+          ${sidebarPinned ? '&#8249;' : '&#8250;'}
+        </button>
+        <nav class="index-pane ${sidebarPinned ? 'pinned' : ''}" id="index-pane">
           <div class="index-header" id="index-header">
             <h2>Collected Graphs (${(state.data.records || []).length})</h2>
           </div>
@@ -34,6 +43,20 @@
     updateIndexHeader();
   }
 
+  window.toggleSidebar = function() {
+    sidebarPinned = !sidebarPinned;
+    try { localStorage.setItem('obs_sidebar_pinned', sidebarPinned ? '1' : '0'); } catch(e) {}
+
+    const pane = document.getElementById('index-pane');
+    const btn  = document.getElementById('sidebar-toggle-btn');
+    if (pane) pane.classList.toggle('pinned', sidebarPinned);
+    if (btn)  {
+      btn.classList.toggle('open', sidebarPinned);
+      btn.innerHTML = sidebarPinned ? '&#8249;' : '&#8250;';
+      btn.title = sidebarPinned ? 'Close panel' : 'Open panel';
+    }
+  };
+
   function updateIndexHeader() {
     const header = document.getElementById('index-header');
     if (!header) return;