From d1cae949d1b7bd8894a967be06846e17d2e9d197 Mon Sep 17 00:00:00 2001
From: brokemac79 <martin_cleary@yahoo.co.uk>
Date: Mon, 10 Aug 2026 20:27:50 +0100
Subject: [PATCH 1/2] feat(dashboard): prioritize operational telemetry

---
 dashboard/worker.ts           | 39 ++++++++++++++++++++++++++++-------
 test/dashboard-worker.test.ts | 10 ++++++++-
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/dashboard/worker.ts b/dashboard/worker.ts
index e4cdbd921e..03c201f93b 100644
--- a/dashboard/worker.ts
+++ b/dashboard/worker.ts
@@ -9396,7 +9396,26 @@ a.pill:hover { color: var(--claw); text-decoration: none; }
 .health-chip.ok { border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
 .health-chip.amber { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); }
 .health-chip.red { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
-.review-coverage { margin-top: 6px; }
+.review-coverage { margin-top: 28px; }
+.review-coverage > summary {
+  padding: 14px 0;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+}
+.coverage-summary-content {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 18px;
+  width: calc(100% - 24px);
+  margin-left: 8px;
+}
+.review-coverage > summary:hover h2 { color: var(--claw); }
+.review-coverage > summary:focus-visible { outline: 2px solid var(--claw); outline-offset: 4px; }
+.review-coverage > summary h2 { display: inline; margin: 0; }
+.review-coverage > summary .muted { text-align: right; }
+.review-coverage[open] > summary { margin-bottom: 14px; }
 .coverage-fleets { display: grid; gap: 10px; margin-top: 14px; }
 .coverage-fleet {
   display: grid;
@@ -9465,6 +9484,8 @@ a.pill:hover { color: var(--claw); text-decoration: none; }
   .worker-toolbar { align-items: stretch; flex-direction: column; }
   .coverage-fleet { grid-template-columns: 1fr; gap: 9px; }
   .coverage-value { justify-items: start; }
+  .coverage-summary-content { align-items: flex-start; flex-direction: column; gap: 6px; }
+  .review-coverage > summary .muted { padding-left: 24px; text-align: left; }
 }
 @media (max-width: 560px) {
   main { width: min(100vw - 24px, 1280px); padding-top: 18px; }
@@ -9507,13 +9528,6 @@ a.pill:hover { color: var(--claw); text-decoration: none; }
     <div class="health-strip" id="health-strip" aria-label="Subsystem health at a glance"></div>
   </section>
   <section class="grid" id="metrics"></section>
-  <section class="review-coverage" aria-labelledby="review-coverage-title">
-    <div class="overview-head">
-      <h2 id="review-coverage-title">Fleet Review Coverage</h2>
-      <span class="muted" id="review-coverage-note">Open items reviewed in the trailing 7 days</span>
-    </div>
-    <div id="review-coverage-body" aria-live="polite"><div class="empty">Loading review coverage…</div></div>
-  </section>
   <section class="overview-shell" aria-labelledby="system-overview-title">
     <div class="overview-head">
       <h2 id="system-overview-title">System Overview</h2>
@@ -9568,6 +9582,15 @@ a.pill:hover { color: var(--claw); text-decoration: none; }
     </div>
     <div id="workers"></div>
   </section>
+  <details class="review-coverage">
+    <summary>
+      <span class="coverage-summary-content">
+        <h2 id="review-coverage-title">Fleet Review Coverage</h2>
+        <span class="muted" id="review-coverage-note">Open items reviewed in the trailing 7 days</span>
+      </span>
+    </summary>
+    <div id="review-coverage-body" aria-live="polite" aria-labelledby="review-coverage-title"><div class="empty">Loading review coverage…</div></div>
+  </details>
   <section class="automerge-health" aria-labelledby="automerge-product-title">
     <div class="automerge-health-head">
       <h2 id="automerge-product-title">Automerge Product Health</h2>
diff --git a/test/dashboard-worker.test.ts b/test/dashboard-worker.test.ts
index dc70bf23c4..b87bbe2efb 100644
--- a/test/dashboard-worker.test.ts
+++ b/test/dashboard-worker.test.ts
@@ -21625,7 +21625,15 @@ test("dashboard HTML preserves UTF-8 emoji labels", async () => {
   assert.match(html, /Fleet Review Coverage/);
   assert.match(html, /id="review-coverage-body"/);
   assert.match(html, /\/api\/review-coverage/);
-  assert.ok(html.indexOf('id="review-coverage-body"') < html.indexOf("System Overview"));
+  assert.ok(html.indexOf("System Overview") < html.indexOf('id="review-coverage-body"'));
+  assert.match(html, /<details class="review-coverage">/);
+  assert.match(
+    html,
+    /<summary>\s*<span class="coverage-summary-content">\s*<h2 id="review-coverage-title">Fleet Review Coverage<\/h2>/,
+  );
+  assert.doesNotMatch(html, /\.review-coverage > summary \{[^}]*display: flex/);
+  assert.doesNotMatch(html, /<details class="review-coverage" open>/);
+  assert.match(html, /aria-labelledby="review-coverage-title"/);
   assert.match(html, /\/api\/apply-observability\?range=/);
   assert.match(html, /data-trend-range="6h"/);
   assert.match(html, /<details class="execution-alert">/);

From 6f3571adf1fe028483f94e934db067419286f66d Mon Sep 17 00:00:00 2001
From: brokemac79 <martin_cleary@yahoo.co.uk>
Date: Mon, 10 Aug 2026 21:48:55 +0100
Subject: [PATCH 2/2] fix(dashboard): keep coverage heading semantic

---
 dashboard/worker.ts           | 7 ++++---
 test/dashboard-worker.test.ts | 7 ++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/dashboard/worker.ts b/dashboard/worker.ts
index 03c201f93b..f737162031 100644
--- a/dashboard/worker.ts
+++ b/dashboard/worker.ts
@@ -9411,9 +9411,9 @@ a.pill:hover { color: var(--claw); text-decoration: none; }
   width: calc(100% - 24px);
   margin-left: 8px;
 }
-.review-coverage > summary:hover h2 { color: var(--claw); }
+.review-coverage > summary:hover .coverage-summary-label { color: var(--claw); }
 .review-coverage > summary:focus-visible { outline: 2px solid var(--claw); outline-offset: 4px; }
-.review-coverage > summary h2 { display: inline; margin: 0; }
+.coverage-summary-label { color: var(--ink); font-family: var(--font-heading); font-size: 18px; font-weight: 800; }
 .review-coverage > summary .muted { text-align: right; }
 .review-coverage[open] > summary { margin-bottom: 14px; }
 .coverage-fleets { display: grid; gap: 10px; margin-top: 14px; }
@@ -9582,10 +9582,11 @@ a.pill:hover { color: var(--claw); text-decoration: none; }
     </div>
     <div id="workers"></div>
   </section>
+  <h2 id="review-coverage-title">Fleet Review Coverage</h2>
   <details class="review-coverage">
     <summary>
       <span class="coverage-summary-content">
-        <h2 id="review-coverage-title">Fleet Review Coverage</h2>
+        <span class="coverage-summary-label">Explore repository coverage</span>
         <span class="muted" id="review-coverage-note">Open items reviewed in the trailing 7 days</span>
       </span>
     </summary>
diff --git a/test/dashboard-worker.test.ts b/test/dashboard-worker.test.ts
index b87bbe2efb..ed30203332 100644
--- a/test/dashboard-worker.test.ts
+++ b/test/dashboard-worker.test.ts
@@ -21629,8 +21629,13 @@ test("dashboard HTML preserves UTF-8 emoji labels", async () => {
   assert.match(html, /<details class="review-coverage">/);
   assert.match(
     html,
-    /<summary>\s*<span class="coverage-summary-content">\s*<h2 id="review-coverage-title">Fleet Review Coverage<\/h2>/,
+    /<h2 id="review-coverage-title">Fleet Review Coverage<\/h2>\s*<details class="review-coverage">/,
   );
+  assert.match(
+    html,
+    /<summary>\s*<span class="coverage-summary-content">\s*<span class="coverage-summary-label">Explore repository coverage<\/span>/,
+  );
+  assert.doesNotMatch(html, /<summary>(?:(?!<\/summary>)[\s\S])*<h2/);
   assert.doesNotMatch(html, /\.review-coverage > summary \{[^}]*display: flex/);
   assert.doesNotMatch(html, /<details class="review-coverage" open>/);
   assert.match(html, /aria-labelledby="review-coverage-title"/);