instar 1.3.787 → 1.3.789

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;
@@ -542,6 +559,28 @@
       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.
+
+       F7 — CANONICAL purpose-line class. `.tab-purpose` is the shared vocabulary
+       every NEW tab should use for its purpose line. Three legacy variants still
+       exist and carry their own deliberately-distinct sizing — `.ph-intro`
+       (Process-Health design-system intro, larger), `.features-subtitle`, and
+       `.dropzone-subtitle` — all recognized by the F3 floor test. Per the spec
+       (docs/specs/dashboard-ux-standard.md, FD-3) F7 is soft-first: consolidating
+       those three into `.tab-purpose` is a tracked migration (it changes their
+       visual size, so it is done deliberately, not big-bang). Until then: reach
+       for `.tab-purpose`; do not add a fifth variant or an inline-styled line. */
+    .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;
@@ -767,41 +806,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 {
@@ -1008,6 +1075,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);
     }
@@ -1819,6 +1887,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);
     }
@@ -2193,6 +2262,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;
@@ -2284,7 +2354,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); }
@@ -2750,32 +2820,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">
@@ -2815,6 +2900,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>
@@ -2867,13 +2953,14 @@
         <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>
       </div>
       <div class="file-content-panel" id="fileContentPanel">
         <div class="file-content-header" id="fileContentHeader" style="display:none">
-          <button class="files-back-btn" onclick="filesGoBack()">&larr;</button>
+          <button class="files-back-btn" onclick="filesGoBack()" title="Back" aria-label="Back">&larr;</button>
           <div class="breadcrumbs" id="fileBreadcrumbs"></div>
           <div class="file-badges" id="fileBadges"></div>
         </div>
@@ -2981,7 +3068,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>
@@ -3012,6 +3099,7 @@
           <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>
@@ -3133,6 +3221,7 @@
           <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.
@@ -3146,11 +3235,11 @@
         <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.
+        No active projects yet. Ask your agent to start one from a plan document, and it'll appear here.
       </div>
       <div id="projectsList" style="display:flex;flex-direction:column;gap:12px"></div>
     </div>
@@ -3173,15 +3262,15 @@
           <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>.
       </div>
       <div id="initiativesDigest" style="display:none;padding:12px;border:1px solid var(--border);border-radius:6px;background:var(--bg-dim)"></div>
       <div id="initiativesEmpty" style="padding:40px;text-align:center;color:var(--text-dim);display:none">
-        No initiatives to display. Create one via <code>POST /initiatives</code>.
+        No initiatives yet. Ask your agent to create one, and it'll appear here.
       </div>
       <div id="initiativesList" style="display:flex;flex-direction:column;gap:12px"></div>
     </div>
@@ -3195,9 +3284,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.
@@ -3210,7 +3298,7 @@
         <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>,
@@ -3228,7 +3316,7 @@
         <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>
 
@@ -3264,7 +3352,7 @@
         <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>
 
@@ -3304,7 +3392,7 @@
         <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".
@@ -3330,7 +3418,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
@@ -3364,7 +3452,7 @@
         <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
@@ -3407,7 +3495,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;
@@ -3642,7 +3730,7 @@
         <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>
@@ -3701,7 +3789,7 @@
         <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>
 
@@ -3798,7 +3886,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>
@@ -3867,7 +3955,7 @@
   <!-- WhatsApp QR panel (hidden by default) -->
   <div class="wa-qr-backdrop" id="waQrBackdrop" style="display:none" onclick="closeQrPanel()"></div>
   <div class="wa-qr-panel" id="waQrPanel" style="display:none">
-    <button class="wa-close" onclick="closeQrPanel()">&times;</button>
+    <button class="wa-close" onclick="closeQrPanel()" title="Close" aria-label="Close">&times;</button>
     <h3>WhatsApp Connection</h3>
     <p id="waQrMsg">Scan this QR code with WhatsApp to connect</p>
     <div id="waQrContainer"></div>
@@ -5537,7 +5625,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>
       `;
     }
@@ -7571,7 +7659,7 @@
 
       detail.innerHTML = '<div class="job-detail-header">'
         + '<div>'
-        + '<button class="back-btn" onclick="jobsGoBack()" style="display:none;margin-right:8px">&larr;</button>'
+        + '<button class="back-btn" onclick="jobsGoBack()" style="display:none;margin-right:8px" title="Back" aria-label="Back">&larr;</button>'
         + '<h3>' + esc(displayName) + '</h3>'
         + '<div class="job-desc">' + esc(job.description || '') + '</div>'
         + '</div>'
@@ -9342,7 +9430,7 @@
       try {
         const data = await apiFetch(info.endpoint);
         panel.innerHTML = '<div class="cap-content-panel">' +
-          '<div class="cap-content-header"><span>' + esc(info.label) + '</span><button onclick="document.getElementById(\'capContentBrowser\').innerHTML=\'\'" style="border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:14px">&times;</button></div>' +
+          '<div class="cap-content-header"><span>' + esc(info.label) + '</span><button onclick="document.getElementById(\'capContentBrowser\').innerHTML=\'\'" style="border:none;background:none;color:var(--text-dim);cursor:pointer;font-size:14px" title="Close" aria-label="Close">&times;</button></div>' +
           '<div class="cap-content-body">' + renderBrowsableContent(info.renderer, data) + '</div></div>';
       } catch (e) {
         panel.innerHTML = '<div style="padding:12px;color:var(--red);font-size:12px">Failed to load: ' + esc(e.message) + '</div>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instar",
-  "version": "1.3.787",
+  "version": "1.3.789",
   "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-09T03:23:07.095Z",
-  "instarVersion": "1.3.787",
+  "generatedAt": "2026-07-09T07:11:33.686Z",
+  "instarVersion": "1.3.789",
   "entryCount": 202,
   "entries": {
     "hook:session-start": {

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/1.3.789.md

@@ -0,0 +1,44 @@
+# Upgrade Guide — vNEXT
+
+<!-- assembled-by: assemble-next-md -->
+<!-- bump: patch -->
+
+## What Changed
+
+- **Every dashboard control is now labeled (Dashboard UX Standard F5).** Four icon-only buttons
+  (the Files back arrow, the QR-panel close, the Jobs back arrow, and the capability-content
+  close) shipped as a bare `←` / `×` glyph with no accessible name — a user (or screen reader)
+  had to guess. Each now carries a `title` + `aria-label`. A build-time floor
+  (`dashboard-controls-labeled.test.ts`) fails if any future button ships icon-only.
+- **Empty states speak plain language, not API jargon (F6).** Two empty states told the operator
+  to "Create one via `POST /projects`" / "`POST /initiatives`" — meaningless to the person
+  reading the dashboard. They now say "Ask your agent to start one … and it'll appear here." A
+  floor (`dashboard-empty-states.test.ts`) fails on a bare or jargon-leaking empty state.
+- **Shared purpose-line vocabulary documented (F7, soft-first).** `.tab-purpose` is marked the
+  canonical purpose-line class; the three legacy variants (`ph-intro`, `features-subtitle`,
+  `dropzone-subtitle`) are documented for a tracked, deliberate migration (per spec FD-3, not a
+  big-bang restyle).
+- **Broken-asset floor (F8).** `dashboard-assets-resolve.test.ts` fails if a referenced local
+  image/icon has no file on disk.
+
+## What to Tell Your User
+
+A few more dashboard papercuts are gone: every button now has a readable label (better for
+accessibility too), and the "nothing here yet" messages tell you what to do in plain English
+instead of showing a developer command. Nothing to enable — it lands with the release.
+
+## Summary of New Capabilities
+
+- None — UX polish plus three build-time floors (F5 control labeling, F6 empty-state clarity,
+  F8 asset resolution) that fail the build if a future change regresses them.
+
+## Evidence
+
+`tests/unit/dashboard-controls-labeled.test.ts` (F5): scans every `<button>` in
+`dashboard/index.html`, asserts each has visible text, `title`, or `aria-label` (population floor
+≥30). `tests/unit/dashboard-empty-states.test.ts` (F6): audits the `*Empty*` resting-state
+containers (population floor ≥6) for a real sentence and no `POST /…`/curl jargon.
+`tests/unit/dashboard-assets-resolve.test.ts` (F8): every static local `src`/`url(...)` ref
+resolves to a real file (logo.png confirmed present). All 7 dashboard floor tests green (13
+cases, 1 browser-gated skip). Display-only markup + build-time floors — no runtime surface;
+machine-local static asset; rollback is a plain revert.

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-f5-f8.md

@@ -0,0 +1,22 @@
+# Side-effects review — Dashboard UX Standard floors F5–F8
+
+**Change:** `dashboard/index.html` (F5 button labels, F6 empty-state de-jargoning, F7 canonical-class doc) + three static floor tests (`dashboard-controls-labeled` F5, `dashboard-empty-states` F6, `dashboard-assets-resolve` F8). Spec: `docs/specs/dashboard-ux-standard.md` (converged + approved, shipped in #1404). Tier 1 — display-only markup + build-time CI floors; no runtime `src/` change, no decision logic.
+
+## Phase 1 — Principle check (signal vs authority)
+Does this touch a decision point that gates information flow / blocks actions / constrains agent behavior? **No.** The changes are (a) HTML label/text attributes rendered to the operator and (b) static test files that fail a *build* if the dashboard regresses. The tests are build-time CI floors, not runtime authorities — they never gate a message, session, or agent action. Signal-vs-authority does not apply (no runtime decision surface).
+
+## Phase 4 — Side-effects review
+1. **Over-block:** the floor tests could reject legitimate markup. F5 accepts a button labeled by visible text OR `title` OR `aria-label` OR dynamic (`${…}`/concatenated) content — the full current button population passes; a button labeled *only* by an adjacent element (not itself) would false-flag, acceptable because self-labeling is the accessibility norm and easily satisfied. F6 requires a ≥4-word sentence in each `*Empty*` container — a legitimately terse state would flag, but the 4-word floor is lenient. F8 excludes `data:`/`http(s)`/dynamic `${}` srcs, so only real static local refs are checked. No legitimate current markup is rejected (all 7 dashboard tests green).
+2. **Under-block:** F5 checks `<button>` only, not `<select>`/`<input>` labeling (a tracked F5 follow-up <!-- tracked: topic-29723 -->). F6 audits `*Empty*`-id containers, not every conceivable resting state. F8 checks static local refs only. These are honest partial floors that raise the bar without claiming totality — not regressions.
+3. **Level-of-abstraction fit:** correct layer. A UI-consistency standard is enforced at build time over the shipped markup; there is no smarter runtime gate this should feed (it is not a runtime concern). It extends the existing dashboard-floor test family (`dashboard-tab-purpose`, `dashboard-panel-placement`, `dashboard-nav-reachability`, `dashboard-viewport-scroll`) — same pattern, same layer.
+4. **Signal vs authority compliance:** compliant by absence — no blocking authority added (build-time test, not runtime gate). See Phase 1.
+5. **Interactions:** the new F5/F6/F8 tests are independent scans over `index.html`; none shadows another. The F7 change is a CSS *comment* only — it does not alter the `.tab-purpose` rule and the F3 `dashboard-tab-purpose` test (which recognizes all four purpose-line classes) still passes. No double-fire, no race with cleanup.
+6. **External surfaces:** changes the dashboard HTML the operator sees — 4 icon buttons gain accessible names, 2 empty states lose API jargon ("POST /projects" → plain language). Strictly additive/clarifying; no behavior, endpoint, or data change. No surface visible to other agents/users/systems. No timing/conversation-state dependency.
+7. **Multi-machine posture:** **machine-local BY DESIGN** — `dashboard/index.html` is a static asset shipped in the package and served by each machine's own server; every machine serves the identical shipped file, so there is nothing to replicate, proxy, or transfer. No durable state, no generated URL, no user-facing notice. A single-machine assumption is correct here, not a defect.
+8. **Rollback cost:** trivial — `git revert` the commit. Display-only markup + additive tests; no migration, no agent-state repair, no data change.
+
+## Phase 4.5 — No deferrals
+The two under-block follow-ups (F5 select/input labeling; broader F6 coverage) are tracked <!-- tracked: topic-29723 -->. F7 hard-consolidation is deliberately soft-first per the spec's FD-3, not an orphan deferral. No partial fix of an in-scope item is shipped.
+
+## Phase 5 — Second pass
+Not required: no block/allow, session-lifecycle, coherence, or sentinel/guard/gate/watchdog surface (Tier 1, display-only).

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.