instar 1.3.786 → 1.3.788

package/dashboard/index.html

@@ -55,10 +55,27 @@
       position: relative;
     }
 
-    /* Hamburger toggle — visible only on mobile, sits in the header row */
+    /* Navigation menu button — grouped-nav trigger at ALL widths (F2, dashboard-ux-standard).
+       Reachability floor: 25 tabs can't fit a flat bar, so a single grouped menu opens from here. */
     .nav-toggle {
-      display: none;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 16px;
+      padding: 8px 14px;
+      min-height: 38px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--text);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      flex-shrink: 0;
     }
+    .nav-toggle:hover { background: var(--bg-hover); }
+    .nav-toggle[aria-expanded="true"] { background: var(--bg-active); border-color: var(--accent); }
+    #navToggleLabel { font-weight: 600; color: var(--text-bright); }
 
     .header-left {
       display: flex;
@@ -527,6 +544,33 @@
       background: var(--bg);
     }
 
+    /* ── REQUIRED placement for every tab panel declared after </main> ──
+       Those panels are direct .app grid children. switchTab() hides the
+       sidebar too, so WITHOUT explicit grid placement the lone visible
+       panel auto-places into the 280px sidebar COLUMN — the "squished to
+       the side" bug (operator report 2026-07-08). Every after-main panel
+       MUST carry class="tab-panel" (or one of the container classes that
+       already sets grid-column: files/jobs/systems/features/dropzone, or
+       ph-root). Enforced structurally:
+       tests/unit/dashboard-panel-placement.test.ts fails on a bare panel. */
+    .tab-panel {
+      grid-column: 1 / -1;
+      min-width: 0;
+      background: var(--bg);
+    }
+
+    /* F3 — Dashboard UX Standard: every tab's plain-language purpose line.
+       One muted, readable sentence directly under the tab header telling a
+       non-expert what the tab is for and what they can do here. Enforced by
+       tests/unit/dashboard-tab-purpose.test.ts. */
+    .tab-purpose {
+      font-size: 13px;
+      color: var(--text-dim);
+      line-height: 1.5;
+      margin: 0 0 4px 0;
+      max-width: 900px;
+    }
+
     .terminal-header {
       display: flex;
       align-items: center;
@@ -752,41 +796,69 @@
     ::-webkit-scrollbar-thumb:hover { background: #444; }
 
     /* ── Tab bar ──────────────────────────────────────────── */
+    /* Grouped navigation menu (F2, dashboard-ux-standard) — one dropdown at ALL widths,
+       opened by .nav-toggle. Hidden until .app.nav-open. Replaces the old horizontal bar
+       that clipped 17 of 25 tabs with no reachable affordance. */
     .tab-bar {
-      display: flex;
-      gap: 0;
-      margin-left: 24px;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      scrollbar-width: none; /* hide scrollbar on Firefox */
+      position: absolute;
+      top: 100%;
+      left: 16px;
+      width: 320px;
+      max-width: calc(100vw - 32px);
+      display: none;
+      flex-direction: column;
+      gap: 2px;
+      padding: 8px;
+      background: var(--bg-panel);
+      border: 1px solid var(--border);
+      border-radius: 0 0 10px 10px;
+      box-shadow: 0 8px 28px rgba(0,0,0,0.45);
+      z-index: 100;
+      max-height: calc(100vh - 64px);
+      overflow-y: auto;
     }
-    .tab-bar::-webkit-scrollbar { display: none; }
+    .app.nav-open .tab-bar { display: flex; }
 
-    .tab-bar .tab {
-      padding: 6px 16px;
-      border: 1px solid var(--border);
-      border-radius: 6px 6px 0 0;
-      background: var(--bg);
+    /* Group headers inside the menu (grouped sections). */
+    .tab-group { display: flex; flex-direction: column; gap: 2px; }
+    .tab-group + .tab-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
+    .tab-group-label {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
       color: var(--text-dim);
-      font-size: 13px;
+      padding: 4px 10px 2px;
+    }
+
+    .tab-bar .tab {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      width: 100%;
+      text-align: left;
+      padding: 9px 12px;
+      min-height: 40px;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--text);
+      font-size: 14px;
       font-weight: 500;
       cursor: pointer;
-      border-bottom: none;
-      margin-bottom: -1px;
       transition: color 0.15s, background 0.15s;
-      white-space: nowrap;
-      flex-shrink: 0;
     }
 
     .tab-bar .tab:hover {
-      color: var(--text);
+      color: var(--text-bright);
       background: var(--bg-hover);
     }
 
     .tab-bar .tab.active {
-      background: var(--bg-panel);
+      background: var(--bg-active);
       color: var(--accent);
-      border-color: var(--border);
+      border-color: var(--accent);
     }
 
     .tab-bar .tab-count {
@@ -884,10 +956,10 @@
        maturation "you're here" marker. */
     .ph-root {
       --ph-accent: #4ade80;
-      /* These panels are declared after </main>, making them direct .app grid
-         children. switchTab() hides the sidebar too, so without explicit
-         placement the lone visible panel auto-places into the 280px sidebar
-         COLUMN — the "squashed to the side" bug. Span the full grid. */
+      /* Grid placement for after-main panels is now the shared .tab-panel
+         contract (see the .tab-panel rule + the placement floor test:
+         tests/unit/dashboard-panel-placement.test.ts). ph-root keeps its own
+         grid-column because it ALSO constrains width for prose readability. */
       grid-column: 1 / -1;
       max-width: 760px;
       width: 100%;
@@ -993,6 +1065,7 @@
     .files-container {
       display: flex;
       grid-column: 1 / -1;
+      min-width: 0; /* F4 — a grid child must be able to shrink below content width, else it blows out the row and the body scrolls sideways */
       overflow: hidden;
       background: var(--bg);
     }
@@ -1804,6 +1877,7 @@
     .jobs-container {
       display: flex;
       grid-column: 1 / -1;
+      min-width: 0; /* F4 — grid child must shrink below content width (no body h-scroll) */
       overflow: hidden;
       background: var(--bg);
     }
@@ -2178,6 +2252,7 @@
     /* ── Features Tab (was Discovery) ──────────────────────────── */
     .features-container {
       grid-column: 1 / -1;
+      min-width: 0; /* F4 — grid child must shrink below content width (no body h-scroll) */
       overflow-y: auto;
       background: var(--bg);
       padding: 20px;
@@ -2269,7 +2344,7 @@
     .feat-reversibility { font-size: 12px; color: var(--text-dim); line-height: 1.5; padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; }
 
     /* ── Systems Tab ──────────────────────────────────────────── */
-    .systems-container { grid-column: 1 / -1; overflow-y: auto; background: var(--bg); padding: 20px; }
+    .systems-container { grid-column: 1 / -1; min-width: 0; overflow-y: auto; background: var(--bg); padding: 20px; }
     .systems-main { max-width: 960px; margin: 0 auto; }
     .systems-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
     .systems-header h2 { font-size: 16px; font-weight: 600; color: var(--text-bright); }
@@ -2735,32 +2810,47 @@
         <img class="logo" src="/dashboard/logo.png" alt="Instar">
         <h1>Instar Dashboard</h1>
         <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" aria-expanded="false" onclick="toggleNavMenu()">&#9776; <span id="navToggleLabel">Sessions</span></button>
-        <nav class="tab-bar" id="tabBar">
-          <button class="tab active" data-tab="sessions" onclick="switchTab('sessions')">Sessions <span class="tab-count" id="tabSessionCount">0</span></button>
-          <button class="tab" data-tab="files" onclick="switchTab('files')">Files</button>
-          <button class="tab" data-tab="dropzone" onclick="switchTab('dropzone')">Send Content</button>
-          <button class="tab" data-tab="secrets" onclick="switchTab('secrets')">Secrets <span class="tab-count" id="tabSecretCount">0</span></button>
-          <button class="tab" data-tab="jobs" onclick="switchTab('jobs')">Jobs <span class="tab-count" id="tabJobCount">0</span></button>
-          <button class="tab" data-tab="features" onclick="switchTab('features')">Features</button>
-          <button class="tab" data-tab="systems" onclick="switchTab('systems')">Health</button>
-          <button class="tab" data-tab="integrated-being" onclick="switchTab('integrated-being')">Integrated-Being</button>
-          <button class="tab" data-tab="pr-pipeline" onclick="switchTab('pr-pipeline')">PR Pipeline</button>
-          <button class="tab" data-tab="projects" onclick="switchTab('projects')">Projects <span class="tab-count" id="tabProjectCount">0</span></button>
-          <button class="tab" data-tab="initiatives" onclick="switchTab('initiatives')">Initiatives <span class="tab-count" id="tabInitiativeCount">0</span></button>
-          <button class="tab" data-tab="commitments" onclick="switchTab('commitments')">Commitments <span class="tab-count" id="tabCommitmentCount">0</span></button>
-          <button class="tab" data-tab="tokens" onclick="switchTab('tokens')">Tokens</button>
-          <button class="tab" data-tab="resources" onclick="switchTab('resources')">Resource Usage</button>
-          <button class="tab" data-tab="llm-activity" onclick="switchTab('llm-activity')">LLM Activity</button>
-          <button class="tab" data-tab="routing-map" onclick="switchTab('routing-map')">Routing Map</button>
-          <button class="tab" data-tab="spend" onclick="switchTab('spend')">Spend</button>
-          <button class="tab" data-tab="threadline" onclick="switchTab('threadline')">Threadline</button>
-          <button class="tab" data-tab="evidence" onclick="switchTab('evidence')">Evidence</button>
-          <button class="tab" data-tab="process-health" onclick="switchTab('process-health')">Process Health</button>
-          <button class="tab" data-tab="subscriptions" onclick="switchTab('subscriptions')">Subscriptions</button>
-          <button class="tab" data-tab="preferences-learning" onclick="switchTab('preferences-learning')">Preferences</button>
-          <button class="tab" data-tab="machines" onclick="switchTab('machines')">Machines</button>
-          <button class="tab" data-tab="mandates" onclick="switchTab('mandates')">Mandates</button>
-          <button class="tab" data-tab="blockers" onclick="switchTab('blockers')">Blockers</button>
+        <nav class="tab-bar" id="tabBar" aria-label="Dashboard sections">
+          <div class="tab-group" role="group" aria-label="Runtime">
+            <div class="tab-group-label">Runtime</div>
+            <button class="tab active" data-tab="sessions" onclick="switchTab('sessions')">Sessions <span class="tab-count" id="tabSessionCount">0</span></button>
+            <button class="tab" data-tab="machines" onclick="switchTab('machines')">Machines</button>
+            <button class="tab" data-tab="jobs" onclick="switchTab('jobs')">Jobs <span class="tab-count" id="tabJobCount">0</span></button>
+            <button class="tab" data-tab="systems" onclick="switchTab('systems')">Health</button>
+          </div>
+          <div class="tab-group" role="group" aria-label="Work & Delivery">
+            <div class="tab-group-label">Work &amp; Delivery</div>
+            <button class="tab" data-tab="pr-pipeline" onclick="switchTab('pr-pipeline')">PR Pipeline</button>
+            <button class="tab" data-tab="projects" onclick="switchTab('projects')">Projects <span class="tab-count" id="tabProjectCount">0</span></button>
+            <button class="tab" data-tab="initiatives" onclick="switchTab('initiatives')">Initiatives <span class="tab-count" id="tabInitiativeCount">0</span></button>
+            <button class="tab" data-tab="commitments" onclick="switchTab('commitments')">Commitments <span class="tab-count" id="tabCommitmentCount">0</span></button>
+            <button class="tab" data-tab="blockers" onclick="switchTab('blockers')">Blockers</button>
+            <button class="tab" data-tab="evidence" onclick="switchTab('evidence')">Evidence</button>
+          </div>
+          <div class="tab-group" role="group" aria-label="Cost & Routing">
+            <div class="tab-group-label">Cost &amp; Routing</div>
+            <button class="tab" data-tab="spend" onclick="switchTab('spend')">Spend</button>
+            <button class="tab" data-tab="subscriptions" onclick="switchTab('subscriptions')">Subscriptions</button>
+            <button class="tab" data-tab="routing-map" onclick="switchTab('routing-map')">Routing Map</button>
+            <button class="tab" data-tab="llm-activity" onclick="switchTab('llm-activity')">LLM Activity</button>
+            <button class="tab" data-tab="tokens" onclick="switchTab('tokens')">Tokens</button>
+            <button class="tab" data-tab="resources" onclick="switchTab('resources')">Resource Usage</button>
+          </div>
+          <div class="tab-group" role="group" aria-label="Intelligence & Comms">
+            <div class="tab-group-label">Intelligence &amp; Comms</div>
+            <button class="tab" data-tab="threadline" onclick="switchTab('threadline')">Threadline</button>
+            <button class="tab" data-tab="integrated-being" onclick="switchTab('integrated-being')">Integrated-Being</button>
+            <button class="tab" data-tab="process-health" onclick="switchTab('process-health')">Process Health</button>
+            <button class="tab" data-tab="preferences-learning" onclick="switchTab('preferences-learning')">Preferences</button>
+          </div>
+          <div class="tab-group" role="group" aria-label="Content & Access">
+            <div class="tab-group-label">Content &amp; Access</div>
+            <button class="tab" data-tab="files" onclick="switchTab('files')">Files</button>
+            <button class="tab" data-tab="dropzone" onclick="switchTab('dropzone')">Send Content</button>
+            <button class="tab" data-tab="secrets" onclick="switchTab('secrets')">Secrets <span class="tab-count" id="tabSecretCount">0</span></button>
+            <button class="tab" data-tab="features" onclick="switchTab('features')">Features</button>
+            <button class="tab" data-tab="mandates" onclick="switchTab('mandates')">Mandates</button>
+          </div>
         </nav>
       </div>
       <div class="vital-signs" id="vitalSigns">
@@ -2800,6 +2890,7 @@
           <button class="new-session-btn" onclick="openNewSessionModal()" title="New session">+</button>
         </div>
       </div>
+      <div class="tab-purpose" style="padding:0 12px 8px">Your agent's live sessions — pick one to watch its terminal in real time.</div>
       <div class="session-list" id="sessionList">
         <div class="empty-state" id="emptyState">
           <div class="icon">&#x1F4AD;</div>
@@ -2852,6 +2943,7 @@
         <div class="file-tree-header">
           <h2>Files</h2>
         </div>
+        <div class="tab-purpose" style="padding:0 12px">Browse and edit this project's files from any device — changes save straight to disk.</div>
         <div class="file-tree-list" id="fileTreeList">
           <div class="file-loading" id="fileTreeLoading">Loading...</div>
         </div>
@@ -2966,7 +3058,7 @@
             <option value="lastRun">Sort: Last Run</option>
           </select>
         </div>
-        <div style="font-size:11px;color:var(--text-dim);padding:0 12px 8px;line-height:1.4">Monitor and control your scheduled tasks</div>
+        <div class="tab-purpose" style="padding:0 12px 8px">Monitor and control your scheduled tasks — recurring jobs that run on their own.</div>
         <div id="jobsSummary" class="jobs-summary"></div>
         <div class="jobs-filter-bar" id="jobsFilterBar">
           <button class="jobs-filter-chip active" data-filter="all" onclick="setJobFilter('all')">All</button>
@@ -2990,13 +3082,14 @@
     </div>
 
     <!-- Integrated-Being Tab (Integrated-Being v1) -->
-    <div id="integratedBeingPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="integratedBeingPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Integrated-Being</h2>
         <div>
           <button onclick="loadIntegratedBeing()" style="padding:6px 12px">Refresh</button>
         </div>
       </div>
+      <div class="tab-purpose">A cross-session record of what other parts of this agent have been doing — the shared memory that keeps separate conversations aware of each other.</div>
       <div id="ibPerMachineNotice" style="font-size:12px;color:var(--text-dim);display:none">
         Integrated-Being on this machine only — cross-machine ledger visibility is not yet implemented.
       </div>
@@ -3111,13 +3204,14 @@
     <!-- Read-only: NO action buttons that mutate eligibility. All PR-authored -->
     <!-- content rendered via textContent, never innerHTML — XSS defense rule -->
     <!-- for the dashboard per spec §"Dashboard surface rules". -->
-    <div id="prPipelinePanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="prPipelinePanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">PR Pipeline</h2>
         <div>
           <button onclick="loadPrPipeline()" style="padding:6px 12px">Refresh</button>
         </div>
       </div>
+      <div class="tab-purpose">A live view of your open pull requests as they move through review and CI checks toward merge.</div>
       <div id="prPipelinePhaseNotice" style="font-size:12px;color:var(--text-dim)"></div>
       <div id="prPipelineEmpty" style="padding:40px;text-align:center;color:var(--text-dim);display:none">
         No PR activity to display.
@@ -3126,13 +3220,13 @@
     </div>
 
     <!-- Projects Tab — PROJECT-SCOPE-SPEC Phase 1.10 read-only view -->
-    <div id="projectsPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="projectsPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Projects</h2>
         <button onclick="loadProjects()" style="padding:6px 12px">Refresh</button>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
-        Multi-spec project plans. Each project bundles related child initiatives across rounds with structurally-gated round advance.
+      <div class="tab-purpose">
+        Multi-spec project plans. Each project groups related pieces of work and only advances to its next round once its required checks pass.
       </div>
       <div id="projectsEmpty" style="padding:40px;text-align:center;color:var(--text-dim);display:none">
         No active projects. Create one via <code>POST /projects</code> with a plan-doc path.
@@ -3141,7 +3235,7 @@
     </div>
 
     <!-- Initiatives Tab — multi-phase long-running work -->
-    <div id="initiativesPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="initiativesPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Initiatives</h2>
         <div style="display:flex;gap:8px;align-items:center">
@@ -3158,8 +3252,8 @@
           <button onclick="loadInitiatives()" style="padding:6px 12px">Refresh</button>
         </div>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
-        Multi-phase long-running work. Signals: <span style="color:#e27d3b">needs-user</span>,
+      <div class="tab-purpose">
+        Long-running work that spans multiple phases, with a status flag on each. Signals: <span style="color:#e27d3b">needs-user</span>,
         <span style="color:#d65f5f">next-check-due</span>,
         <span style="color:#4a9a4a">ready-to-advance</span>,
         <span style="color:#888">stale (&gt;7d)</span>.
@@ -3172,7 +3266,7 @@
     </div>
 
     <!-- Commitments Tab (Open Promises) -->
-    <div id="secretsPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="secretsPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">Secrets</h2>
         <div style="display:flex;gap:8px">
@@ -3180,9 +3274,8 @@
           <button onclick="loadSecrets()" style="padding:6px 12px">Refresh</button>
         </div>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
-        Secret Drop — one-time-use links for users to submit credentials safely (never through chat).
-        Links expire automatically and are destroyed after submission.
+      <div class="tab-purpose">
+        Secret Drop — create one-time links so someone can hand you a password or API key safely, never pasted into chat. Each link expires and is destroyed the moment it's used.
       </div>
       <div id="secretsEmpty" style="padding:40px;text-align:center;color:var(--text-dim);display:none">
         No pending secret requests.
@@ -3190,12 +3283,12 @@
       <div id="secretsList" style="display:flex;flex-direction:column;gap:12px"></div>
     </div>
 
-    <div id="commitmentsPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="commitmentsPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Commitments</h2>
         <button onclick="loadCommitments()" style="padding:6px 12px">Refresh</button>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         Open promises — beacon-watched commitments (⏳). States:
         <span style="color:#4a9a4a">pending</span>,
         <span style="color:#e27d3b">atRisk</span>,
@@ -3208,12 +3301,12 @@
     </div>
 
     <!-- Tokens Tab — read-only token-usage observability -->
-    <div id="tokensPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="tokensPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Tokens</h2>
         <button onclick="loadTokens()" style="padding:6px 12px">Refresh</button>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         Token usage rolled up from Claude Code session transcripts. Last 24 hours unless noted.
       </div>
 
@@ -3244,12 +3337,12 @@
 
     <!-- Resource Usage tab — per-agent CPU + memory (ResourceLedger Phase B).
          Read-only observability; mirrors the Tokens tab. -->
-    <div id="resourcesPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="resourcesPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Resource Usage</h2>
         <button onclick="loadResources()" style="padding:6px 12px">Refresh</button>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         How much CPU and memory this agent is using right now — the server process and each running session — sampled continuously. Last hour unless noted.
       </div>
 
@@ -3284,12 +3377,12 @@
          true-blocker. A true-blocker is "best current understanding — recheck after <date>",
          never "stop trying". Read-only here; data from GET /blockers. detectedText and all
          free-text are UNTRUSTED and HTML-escaped before render. 503 = feature off. -->
-    <div id="blockersPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="blockersPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Blockers</h2>
         <button onclick="loadBlockers()" style="padding:6px 12px">Refresh</button>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         Things that looked like they stopped progress, tracked as <b>decaying hypotheses</b> rather than settled walls.
         Each one moves through verification states; a "true blocker" is the best current understanding with a recheck date —
         never a permanent "give up".
@@ -3303,7 +3396,7 @@
          Every LLM call the system makes on its own behalf: which component, which
          provider/model, whether it acted or no-op'd, was skipped, cost + latency.
          Read-only; data from /metrics/features. -->
-    <div id="llmActivityPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="llmActivityPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">LLM Activity</h2>
         <div style="display:flex;gap:8px;align-items:center">
@@ -3315,7 +3408,7 @@
           <button onclick="loadLlmActivity()" style="padding:6px 12px">Refresh</button>
         </div>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         Every decision the system's "autopilot" makes with an AI call — sentinels, gates, background checks.
         For each one: which AI provider ran it, how often it actually <b>acted</b> on something vs. found
         nothing to do, how often it was <b>skipped</b> to save on rate limits, and what it cost. A row that
@@ -3344,12 +3437,12 @@
          model it uses and its full ordered fallback tier list, with injection-safe /
          money-gated / critical-gate flags. Read-only display; data from
          /intelligence/routing/chains. No controls — the map only DISPLAYS the routing. -->
-    <div id="routingMapPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="routingMapPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">Routing Map</h2>
         <button onclick="loadRoutingMap()" style="padding:6px 12px">Refresh</button>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         Where each internal job-kind sends its AI calls. Every background check, gate, and
         sentinel has a <b>lane</b> (its "nature") and a fallback list of <b>doors</b> — the ways
         it can reach a model. This shows, per lane, the ordered door + model list it tries, and
@@ -3379,7 +3472,7 @@
          READ + every metered paid-door key with its caps and honest not-live/$0 state.
          Read-only: data from /routing-spend/summary + /routing-spend/caps. No money controls
          (caps adjust, go-live, alerts are later, dark increments). -->
-    <div id="spendPanel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="spendPanel" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
         <h2 style="margin:0">Spend</h2>
         <div style="display:flex;gap:8px;align-items:center">
@@ -3392,7 +3485,7 @@
           <button onclick="loadRoutingSpend()" style="padding:6px 12px">Refresh</button>
         </div>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         What the internal AI calls cost, and where the paid-door caps sit. The dollar figures are a
         <b>reporting</b> view — immutable token counts priced against a reviewed price list on read, so a
         price correction reflows automatically. <b>No paid door is live yet</b>, so metered spend is $0;
@@ -3622,12 +3715,12 @@
       </section>
     </div>
 
-    <div id="evidenceTab" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="evidenceTab" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Evidence</h2>
         <div style="font-size:12px;color:var(--text-dim)">Per-entity evidence + reverse citations</div>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         Inspect the evidence trail behind any memory entity, or ask "what cites this?" given a kind + sourceId.
         All results are viewer-scope filtered by SemanticMemory before they reach this view.
       </div>
@@ -3681,12 +3774,12 @@
     </div>
 
     <!-- Threadline Tab — agent-to-agent conversations + Telegram bridge settings -->
-    <div id="threadlineTab" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
+    <div id="threadlineTab" class="tab-panel" style="display:none;flex-direction:column;padding:20px;gap:16px;overflow-y:auto">
       <div style="display:flex;justify-content:space-between;align-items:center">
         <h2 style="margin:0">Threadline</h2>
         <button onclick="loadThreadlineBridgeConfig()" style="padding:6px 12px">Refresh</button>
       </div>
-      <div style="font-size:12px;color:var(--text-dim);line-height:1.4">
+      <div class="tab-purpose">
         Threadline is your agent's secure channel to other AI agents. The Telegram bridge mirrors those conversations into per-thread Telegram topics so you can watch every exchange. Quiet by default — flip the master switch below to opt in.
       </div>
 
@@ -3783,7 +3876,7 @@
             <h2>Health</h2>
             <button class="systems-refresh" onclick="loadSystems()">Refresh</button>
           </div>
-          <div style="font-size:12px;color:var(--text-dim);margin-bottom:16px;line-height:1.4">Your agent's health and running processes</div>
+          <div class="tab-purpose" style="margin-bottom:16px">Your agent's health and running processes — the server and each running session at a glance.</div>
           <div id="systemsBanner">
             <div style="padding:20px;color:var(--text-dim);text-align:center">Loading...</div>
           </div>
@@ -5522,7 +5615,7 @@
             <span style="font-size:11px;color:var(--text-dim)">confidence: ${escapeHtml(confidence)}</span>
             <button class="ev-inspect-btn" data-entity-id="${id}" style="margin-left:auto;padding:2px 8px;font-size:11px">Inspect evidence</button>
           </div>
-          ${content ? `<div style="font-size:12px;color:var(--text-dim);line-height:1.4">${content}</div>` : ''}
+          ${content ? `<div class="tab-purpose">${content}</div>` : ''}
         </div>
       `;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instar",
-  "version": "1.3.786",
+  "version": "1.3.788",
   "description": "Coherence infrastructure for self-evolving AI agents — on the Claude Code or Codex subscription you already have.",
   "type": "module",
   "main": "dist/index.js",

package/src/data/builtin-manifest.json

@@ -1,8 +1,8 @@
 {
   "$schema": "./builtin-manifest.schema.json",
   "schemaVersion": 1,
-  "generatedAt": "2026-07-08T21:14:02.877Z",
-  "instarVersion": "1.3.786",
+  "generatedAt": "2026-07-09T06:42:14.302Z",
+  "instarVersion": "1.3.788",
   "entryCount": 202,
   "entries": {
     "hook:session-start": {

package/upgrades/1.3.787.md

@@ -0,0 +1,42 @@
+# Upgrade Guide — vNEXT
+
+<!-- assembled-by: assemble-next-md -->
+<!-- bump: patch -->
+
+## What Changed
+
+- **The "squished to the side" bug is fixed structurally.** Fourteen dashboard tab panels
+  (Routing Map, Spend, Tokens, LLM Activity, Integrated Being, PR Pipeline, Projects,
+  Initiatives, Secrets, Commitments, Resources, Blockers, Evidence, Threadline) are declared
+  after `</main>` and are therefore direct `.app` grid children; with the sidebar hidden they
+  auto-placed into the 280px sidebar COLUMN, rendering all content in a ~185px strip on a
+  1280px viewport (operator screenshots, topic 29723). A shared `.tab-panel` class
+  (`grid-column: 1 / -1; min-width: 0`) now places every one of them across the full content
+  area — one rule instead of fourteen inline copies. The pre-existing `.ph-root` tabs keep
+  their own placement + prose width.
+- **A placement floor makes the bug unrepeatable.** `tests/unit/dashboard-panel-placement.test.ts`
+  scans the after-main markup region and fails the build when a top-level panel lacks a
+  placement-carrying class (with an instructive message naming the panel and the fix), asserts
+  the `.tab-panel` rule keeps its grid span, and guards its own matcher with a population floor.
+  The old defense was a CSS comment on `.ph-root` — a wish; every panel added since repeated
+  the bug. This is the guarantee (Structure > Willpower).
+
+## What to Tell Your User
+
+The dashboard tabs that used to render squeezed into a narrow strip on the left of a desktop
+window — including the new Routing Map and Spend tabs — now use the full width of the window.
+Nothing to enable; it's just fixed everywhere once the release lands.
+
+## Summary of New Capabilities
+
+- None — this is a layout bug fix. (It also adds a build-time guard so a future dashboard tab
+  can't reintroduce the same squished layout.)
+
+## Evidence
+
+`tests/unit/dashboard-panel-placement.test.ts` — 4 cases: rule present + spans grid, every
+placement class actually declares grid-column, no bare after-main panel (negative control
+verified: stripping one panel's class fails naming exactly that panel), matcher-anchor guard
+(the slice skips CSS/JS mentions of `</main>`). Real-browser (headless Chromium) before/after
+screenshots at 1280×800: content strip ~260px before, full-width after; 390×844 rendering is
+byte-identical before vs after (placement-only change). All 106 dashboard-reading unit tests green.

package/upgrades/1.3.788.md

@@ -0,0 +1,45 @@
+# Upgrade Guide — vNEXT
+
+<!-- assembled-by: assemble-next-md -->
+<!-- bump: patch -->
+
+## What Changed
+
+- **All 25 dashboard tabs are now reachable — grouped navigation (Dashboard UX Standard F2).**
+  The dashboard grew to 25 tabs in a flat horizontal bar that clipped at ~8 tabs on a 1280px
+  viewport with a hidden scrollbar — the other ~17 (Spend, Machines, Mandates, Process Health,
+  …) were unreachable by pointer, and the active tab often wasn't even visible in the nav
+  (operator report, topic 29723). The nav is now ONE grouped dropdown menu, opened from the
+  always-visible `☰` button at every viewport, organized into five labeled sections (Runtime,
+  Work & Delivery, Cost & Routing, Intelligence & Comms, Content & Access). It reuses the
+  existing (previously mobile-only) collapsible-menu machinery — every tab's data-tab, onclick,
+  and count badge is preserved verbatim.
+- **The Dashboard UX Standard is now a constitutional standard with CI-enforced floors.**
+  `docs/specs/dashboard-ux-standard.md` (operator-approved, topic 29723) turns the operator's
+  "VERY user friendly / EASY to navigate" bar into eight objective floors. Two ship enforced:
+  F1 (panel placement, shipped #1403) and F2 (nav reachability, this change) — the rest are
+  tracked follow-up passes. Registered in `docs/STANDARDS-REGISTRY.md` so the
+  Standards-Enforcement-Coverage audit classifies them as enforced gates.
+
+## What to Tell Your User
+
+Every dashboard tab is now reachable from one clean, grouped menu (opened by the ☰ button) at
+desktop and phone width — no more tabs hidden off the edge of the screen. Nothing to enable;
+it lands with the release.
+
+## Summary of New Capabilities
+
+- None — this is a navigation/UX fix plus a build-time floor (`dashboard-nav-reachability.test.ts`)
+  that fails the build if a future tab is unreachable or the nav loses its grouped structure.
+
+## Evidence
+
+`tests/unit/dashboard-nav-reachability.test.ts` — 3 cases: every `TAB_REGISTRY` tab has a
+reachable nav control and there are no orphan nav buttons (population floor ≥20), the nav is
+grouped into labeled sections, and the menu is reachable at all widths (`.nav-toggle`
+`display:flex` at base + `.app.nav-open .tab-bar` open mechanism). Real-browser (headless
+Chromium) verified at 1280×860 and 390×844: the grouped menu renders all five sections with all
+25 tabs, active-tab highlight + count badges intact, closed-state header shows the `☰ Sessions`
+button and a full-width panel; no horizontal body overflow. Both dashboard floor tests green
+(7 cases). The header-logo audit finding was confirmed a static-render artifact (logo.png is
+served live via `express.static`) — corrected in the spec, no spurious fix made.

package/upgrades/side-effects/dashboard-f3-tab-purpose.md

@@ -0,0 +1,20 @@
+# Side-Effects Review — Dashboard F3 (tab purpose lines)
+
+**Change:** Implements floor **F3** of the Dashboard UX Standard (`docs/specs/dashboard-ux-standard.md`, merged in #1404): every registered dashboard tab now carries a plain-language, self-explanatory purpose line near its top. Adds a shared `.tab-purpose` CSS class, converts the dashboard's pre-existing muted intro divs to it (de-jargoning the worst offenders), adds purpose lines to the tabs that lacked one (Sessions, Files), and adds a static floor test.
+
+**Files:**
+- `dashboard/index.html` — one `.tab-purpose` CSS rule; ~15 panels' intro divs converted to (or given) `.tab-purpose`; new purpose lines for Sessions and Files. Pure markup/CSS — no script changes.
+- `tests/unit/dashboard-tab-purpose.test.ts` — the F3 floor: maps every `TAB_REGISTRY` tab to its panel markup and fails (naming the tab) if none carries a recognized purpose-line class (`tab-purpose` / `ph-intro` / `features-subtitle` / `dropzone-subtitle`). Population-floor guarded.
+
+**Side effects / blast radius:**
+- **Runtime behavior:** NONE. The dashboard is a static file served by `express.static`; this change adds display-only markup + CSS. No JS logic, no API routes, no state, no config touched.
+- **Migrations:** none required. The dashboard `index.html` is served from the package, not templated per-agent; no `PostUpdateMigrator` / CLAUDE.md-template surface is involved (no agent-installed file changes).
+- **Server/lifeline/deploy path:** untouched.
+- **Cross-machine / mesh:** untouched.
+- **Security/PII:** none — no data, credentials, or user content flow through the changed lines.
+
+**Risk:** Low. Worst case is a cosmetic mis-placement of a purpose line on a tab, visible only in the dashboard UI, fixable by a follow-up edit. The floor test prevents a future tab from silently shipping without a purpose line.
+
+**Rollback:** revert this commit — the dashboard reverts to the prior markup with zero residual state (nothing persisted, nothing migrated).
+
+**Follow-ups (tracked, out of scope here):** F4 (mobile no-horizontal-scroll) ships next; F5–F8 (labeled controls, self-explaining empty states, shared component vocabulary that will consolidate the 4 accepted purpose-line classes into one) follow per the spec sequencing.

package/upgrades/side-effects/dashboard-f4-viewport-scroll.md

@@ -0,0 +1,18 @@
+# Side-Effects Review — Dashboard F4 (no mobile horizontal scroll)
+
+**Change:** Implements floor **F4** of the Dashboard UX Standard (`docs/specs/dashboard-ux-standard.md`): the page body must never scroll horizontally at 1280/768/390px. The audit (2026-07-08) found panels overflowing the viewport's right edge at 390px so the whole page scrolled sideways on a phone.
+
+**Files:**
+- `dashboard/index.html` — adds `min-width: 0` to the four grid-child panel containers that lacked it (`files-container`, `jobs-container`, `systems-container`, `features-container`). These are direct `.app` grid children (`grid-column: 1 / -1`); a CSS grid/flex child defaults to `min-width: auto`, so a wide descendant forces the row wider than the viewport and the body scrolls sideways. `min-width: 0` lets the child shrink so wide content wraps/contains instead of blowing out the row. (`.tab-panel` already carried this from #1403.) No JS touched.
+- `tests/unit/dashboard-viewport-scroll.test.ts` — the F4 floor, in two halves: (1) a STATIC check that every grid-child container carries `min-width: 0` (always runs); (2) a BROWSER-GATED render check that `document.body.scrollWidth <= clientWidth` at each viewport, which SKIPS HONESTLY when no browser driver is installed (FD-2) and runs in the CI browser job. Never a false green.
+
+**Side effects / blast radius:**
+- **Runtime behavior:** NONE. Display-only CSS on static markup. No JS, API, state, or config.
+- **Migrations / agent-installed files:** none (dashboard is package-served, not templated per agent).
+- **Server/lifeline/mesh/security:** untouched.
+
+**Risk:** Very low. `min-width: 0` on a grid child is the textbook, side-effect-free fix for grid row-blowout; it only *allows* a child to shrink, it never forces a size. Worst case is a wide element inside one of these tabs wrapping instead of overflowing — the desired behavior.
+
+**Verification honesty:** The static half is verified green here. The rendered half is **browser-gated and was SKIPPED in this worktree** — no Playwright/Puppeteer is installed, and installing a browser (a large download) was deliberately avoided on a host that wedged twice on 2026-07-08 under filesystem load. The `min-width: 0` fix targets the known mechanism (grid child blowout) with high confidence from the CSS, but a pixel-level 390px confirmation should run via the CI browser job or a browser-capable pass before treating F4 as fully closed. This is disclosed rather than claimed as visually verified.
+
+**Rollback:** revert — pure CSS + a test, zero residual state.

package/upgrades/side-effects/dashboard-responsive-fix.md

@@ -0,0 +1,51 @@
+# Side-Effects Review — Dashboard responsive fix (.tab-panel placement + floor test)
+
+**Version / slug:** `dashboard-responsive-fix`
+**Date:** `2026-07-08`
+**Author:** `Instar Agent (echo)`
+**Second-pass reviewer:** `not required`
+
+## Summary of the change
+
+Fixes the "everything is squished to the side" dashboard bug (operator report with screenshots, topic 29723, 2026-07-08): fourteen tab panels declared after `</main>` in `dashboard/index.html` are direct `.app` grid children with no explicit grid placement, so the lone visible panel auto-places into the 280px sidebar column on desktop. The fix adds ONE shared `.tab-panel` CSS class (`grid-column: 1 / -1; min-width: 0`) applied to all fourteen panels (Integrated Being, PR Pipeline, Projects, Initiatives, Secrets, Commitments, Tokens, Resources, Blockers, LLM Activity, Routing Map, Spend, Evidence, Threadline), plus a regression floor test (`tests/unit/dashboard-panel-placement.test.ts`) that fails the build when a future after-main panel lacks a placement-carrying class. The pre-existing `.ph-root` per-tab fix is left untouched; its comment now points at the shared contract. Files touched: `dashboard/index.html`, `tests/unit/dashboard-panel-placement.test.ts`, `docs/specs/dashboard-responsive-fix.eli16.md`, this artifact, and a release fragment.
+
+## Decision-point inventory
+
+No decision-point surface. This change is presentation-layer CSS/HTML plus a static test. It gates no information flow, blocks no actions, filters no messages, and constrains no agent behavior at runtime. (The new unit test constrains future COMMITS — the standard test-ratchet pattern — not runtime behavior.)
+
+---
+
+## 1. Over-block
+
+No block/allow surface at runtime — over-block not applicable to agent/user traffic. For the commit-time ratchet: the floor test could "over-block" a future legitimate panel that is genuinely out of normal flow (e.g. a new fixed-position overlay). Mitigation is built in: the `OUT_OF_FLOW_EXEMPT` list with a required justification comment, and the failure message names the exact panel and both resolution paths.
+
+## 2. Under-block
+
+The floor test keys on 4-space-indented `<div id=...>` openers in the after-`</main>` markup region (all 27 current top-level panels match this shape). A future panel authored at unconventional indentation, as a non-div element, or injected purely from JS would not be seen by the floor. Accepted: the regression vector this floor closes is the observed copy-paste pattern (14 real instances); the population-sanity assertion (≥20 openers visible) fails loudly if the matcher ever goes blind wholesale. Deeper enforcement (viewport smoke tests) belongs to the Dashboard UX Standard work tracked in the topic-29723 working brief. <!-- tracked: topic-29723 dashboard-ux-brief Increment 2 -->
+
+## 3. Level-of-abstraction fit
+
+Right layer. The bug is a CSS grid-placement defect; the fix is a shared CSS class at the layout layer where the sibling container classes (`files-container`, `jobs-container`, `systems-container`, `features-container`, `dropzone-container`) already solve the same problem the same way. The alternative — per-panel inline styles — is exactly the pattern that produced fourteen copies of the bug. No smarter existing gate applies (this is not decision logic).
+
+## 4. Signal vs authority compliance
+
+Compliant by vacuity at runtime: the change holds no blocking authority and produces no signal — it is inert presentation markup. The unit test is a build-time ratchet, the same class as every other test in `tests/unit/`; it holds commit-blocking authority through CI exactly like all tests do, with deterministic, human-readable failure output.
+
+## 5. Interactions
+
+- Interacts with `switchTab()` only passively: switchTab toggles inline `display`; the new class carries grid placement only, so show/hide behavior is unchanged.
+- `.ph-root` panels keep their own placement + 760px prose width; the new rule does not apply to them (no double-fire; the floor test accepts either class).
+- Mobile breakpoint (`@media max-width: 768px`) collapses `.app` to one column; `grid-column: 1 / -1` resolves identically there — verified byte-identical mobile rendering before vs after the change.
+- No other rule targets `.tab-panel` (fresh class name; grep-verified single definition).
+
+## 6. External surfaces
+
+Visible change: dashboard tabs render full-width on desktop instead of squished — the operator-requested fix. No API change, no data change, no cross-agent surface, no timing/conversation-state dependency. Verified with real-browser (headless Chromium) before/after screenshots at 1280×800 and 390×844: desktop fixed; mobile rendering byte-identical to pre-change.
+
+## 7. Multi-machine posture (Cross-Machine Coherence)
+
+Machine-local BY DESIGN in the same sense as all dashboard markup: the HTML ships identically to every machine with the release; each machine serves its own copy. No replicated state, no machine-boundary URL, no one-voice notice surface. Both of the operator's machines get the fix as they pick up the release.
+
+## 8. Rollback cost
+
+Trivial: revert the commit (CSS class + class attributes + one test file). No data migration, no agent state, no config. A revert restores the prior (buggy) rendering and deletes the floor test with it.

package/upgrades/side-effects/dashboard-ux-standard-nav.md

@@ -0,0 +1,53 @@
+# Side-Effects Review — Grouped-nav reachability + Dashboard UX Standard (F1/F2)
+
+**Version / slug:** `dashboard-ux-standard-nav`
+**Date:** `2026-07-08`
+**Author:** `Instar Agent (echo)`
+**Second-pass reviewer:** `not required`
+
+## Summary of the change
+
+Makes all 25 dashboard tabs reachable (operator report, topic 29723: 17 of 25 unreachable in a clipping flat nav bar) by converting the nav into ONE grouped dropdown menu, opened from the always-visible `☰` toggle at every viewport, organized into five labeled sections. This reuses the existing (previously mobile-only) `.app.nav-open .tab-bar` collapsible-menu machinery — `toggleNavMenu`/`closeNavMenu`/`updateNavToggleLabel`/`switchTab` are untouched; every tab button's `data-tab`, `onclick`, and count badge is preserved verbatim (25 in, 25 out, cross-checked against `TAB_REGISTRY`). Ships the operator-approved `docs/specs/dashboard-ux-standard.md` (8 floors), a `docs/STANDARDS-REGISTRY.md` entry, and the F2 floor test. Files touched: `dashboard/index.html` (CSS: `.nav-toggle` visible at base + `.tab-bar` → grouped dropdown + `.tab-group`/`.tab-group-label`; markup: tabs wrapped in groups), `tests/unit/dashboard-nav-reachability.test.ts`, `docs/specs/dashboard-ux-standard.md`, `docs/STANDARDS-REGISTRY.md`, this artifact, a release fragment.
+
+## Decision-point inventory
+
+No runtime decision-point surface. Presentation-layer CSS/HTML plus a static test. It gates no information flow, blocks no actions, filters no messages, constrains no agent behavior at runtime. The new unit test constrains future COMMITS (the standard test-ratchet pattern), not runtime behavior.
+
+---
+
+## 1. Over-block
+
+No block/allow surface at runtime. For the commit-time ratchet: the F2 floor could "over-block" a future legitimate nav change — e.g. a deliberate move to a different reachable model (persistent left rail). Mitigation: the floor asserts the FLOOR (every tab reachable, nav grouped, reachable at all widths), not a specific implementation; a left-rail that keeps tabs reachable + grouped still passes. Failure messages name the exact unreachable/orphan tab and the fix.
+
+## 2. Under-block
+
+The floor keys on `data-tab="..."` buttons inside the `id="tabBar"` nav and `id: '...'` entries in the `TAB_REGISTRY` array. A tab injected purely from JS (not in the static markup) or a registry authored with unconventional syntax would not be seen. Accepted: the regression vector this closes is the observed flat-nav clip (a real 25-tab overflow); the population floor (≥20 nav buttons AND ≥20 registry ids visible) fails loudly if either matcher goes blind. Deeper enforcement (the F4 viewport smoke test for body-never-h-scroll) is a tracked follow-up pass in the spec's implementation sequencing. <!-- tracked: topic-29723 dashboard-ux-brief Increment 2b -->
+
+## 3. Level-of-abstraction fit
+
+Right layer. The bug is nav reachability; the fix reuses the existing collapsible-menu mechanism at the layout layer rather than inventing new nav architecture (a persistent sidebar rewrite would relocate the sessions panel that owns the 280px column — higher risk for no reachability gain). No smarter existing gate applies (not decision logic).
+
+## 4. Signal vs authority compliance
+
+Compliant by vacuity at runtime: the change holds no blocking authority and produces no signal — inert presentation markup. The unit test is a build-time ratchet with commit-blocking authority through CI exactly like every other test, with deterministic human-readable failure output.
+
+## 5. Interactions
+
+- `switchTab()` already closes the menu (`classList.remove('nav-open')`) and updates the toggle label on selection — verified; the always-dropdown model needs no JS change.
+- The mobile `@media` block still sets `.tab-bar` full-width (`left:0;right:0`) — it reinforces the base dropdown harmlessly (mobile menu = full width).
+- `.tab-panel` placement (F1, #1403) is unaffected — this change touches only the header nav, not the after-main panels.
+- Fresh class names (`.tab-group`, `.tab-group-label`) — grep-verified no prior definitions; `.nav-toggle`/`.tab-bar` rules are the only ones restyled, both verified.
+
+## 6. External surfaces
+
+Visible change: the dashboard nav becomes a grouped `☰` menu reachable at every width; all 25 tabs reachable (was ~8). No API change, no data change, no cross-agent surface, no timing/conversation-state dependency. Verified with real-browser (headless Chromium) at 1280×860 (grouped menu: 5 sections, all tabs, active highlight + count badges) and 390×844 (full-width menu, no h-overflow), plus the closed default state (header `☰ Sessions` button + full-width panel).
+
+**Operator-Surface-Quality (dashboard is an operator surface):** (1) leads with the primary action — the nav is the surface's primary affordance and is now front-and-center, all destinations reachable; (2) zero raw internals — tabs are plain-language labels, grouped under plain-language section headers, no JSON/IDs/slugs; (3) no destructive action in the nav; (4) plain language a non-engineer reads ("Cost & Routing → Spend"); (5) works at phone width — 40px+ tap targets, readable 14–15px type, no horizontal scroll (headless-verified at 390px). The header-logo "broken" audit finding was confirmed a static-render false positive (logo.png served live via `express.static`) — no spurious change made.
+
+## 7. Multi-machine posture (Cross-Machine Coherence)
+
+Machine-local BY DESIGN like all dashboard markup: the HTML ships identically to every machine with the release; each serves its own copy. No replicated state, no machine-boundary URL, no one-voice notice surface. Both operator machines get it as they pick up the release.
+
+## 8. Rollback cost
+
+Trivial: revert the commit (CSS + nav markup regroup + one test + the spec/registry/fragment docs). No data migration, no agent state, no config. A revert restores the prior (clipping) nav and deletes the F2 floor with it.