fix: keep the host readings' labels under header density, hide ringless ones at Compact tiny (release review)

#689's density steps hide every `.header-system-stats .stat-label` once the
toolbar is narrowed, and #692's readings (GPU, VRAM, GPU MHz, CPU MHz) have
nothing else naming them: at tight, dense and tiny the header showed "40%"
beside CPU's "12%", "3.2G" beside MEM's "7.9G", and two bare "1800 MHz" /
"4200 MHz" with no way to tell the GPU clock from the CPU one. At Compact +
tiny, where values are hidden too, the two clocks (no ring) were left as
0-px items that still took an 8 px flex gap each. Neither PR shows it alone.

- The four host items carry `stat-item--host`, excluded from the density
  label hide, so they keep their labels at every step.
- `stat-item--ringless` (static on the two clocks, toggled by
  `_updateHostSensors` on VRAM while its total, and so its ring, is unknown)
  is hidden at Compact + tiny instead of staying an empty item.

Tests: the browser test drives every density in all three styles against
the real markup and styles.css (it fails on the previous files), and the
unit test pins the VRAM ringless toggle.

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

src/web/public/index.html

@@ -178,7 +178,7 @@
             </div>
             <span class="stat-value" id="statMem">--</span>
           </div>
-          <div class="stat-item" id="statGpuItem" hidden>
+          <div class="stat-item stat-item--host" id="statGpuItem" hidden>
             <span class="stat-ring" id="statGpuRing" aria-hidden="true"></span>
             <span class="stat-label">GPU</span>
             <div class="stat-bar">
@@ -186,7 +186,7 @@
             </div>
             <span class="stat-value" id="statGpu">--%</span>
           </div>
-          <div class="stat-item" id="statVramItem" hidden>
+          <div class="stat-item stat-item--host" id="statVramItem" hidden>
             <span class="stat-ring" id="statVramRing" aria-hidden="true"></span>
             <span class="stat-label">VRAM</span>
             <div class="stat-bar">
@@ -194,11 +194,11 @@
             </div>
             <span class="stat-value" id="statVram">--%</span>
           </div>
-          <div class="stat-item" id="statGpuMhzItem" hidden>
+          <div class="stat-item stat-item--host stat-item--ringless" id="statGpuMhzItem" hidden>
             <span class="stat-label">GPU</span>
             <span class="stat-value" id="statGpuMhz">-- MHz</span>
           </div>
-          <div class="stat-item" id="statCpuMhzItem" hidden>
+          <div class="stat-item stat-item--host stat-item--ringless" id="statCpuMhzItem" hidden>
             <span class="stat-label">CPU</span>
             <span class="stat-value" id="statCpuMhz">-- MHz</span>
           </div>

src/web/public/panels-ui.js

@@ -6961,6 +6961,8 @@ Object.assign(CodemanApp.prototype, {
     if (gpu && gpu.memUsedMB !== undefined) {
       const used = `${(gpu.memUsedMB / 1024).toFixed(1)}G`;
       const ring = this.$('statVramRing');
+      // Ringless, the Compact style's rings-only step hides the whole item (styles.css) instead of an empty one.
+      this.$('statVramItem')?.classList.toggle('stat-item--ringless', gpu.memPercent === undefined);
       if (gpu.memPercent !== undefined) {
         fill('statVram', 'statVramRing', 'statVramBar', gpu.memPercent, used);
         if (ring) ring.style.display = '';

src/web/public/styles.css

@@ -2294,10 +2294,13 @@ html[data-tab-orientation='vertical'].tab-rail-compact
 
   /* The narrower the toolbar, the less each usage reading shows (data-header-density, header-divider.js):
      tight drops the window and CPU/MEM labels, dense shortens the provider names, tiny keeps only the rings.
-     The prefix outweighs the per-style rules further down, so every header-stats style follows it. */
+     The prefix outweighs the per-style rules further down, so every header-stats style follows it.
+     The opt-in host readings (.stat-item--host: GPU, VRAM and the two clocks) keep their labels at every
+     step: their values look like CPU's and MEM's ("40%", "3.2G", "1800 MHz" beside "4200 MHz"), so the
+     label is the only thing that says which reading is which. */
   html[data-header-density]:not([data-tab-orientation='vertical']):not([data-session-list='sidebar'])
     body:not(.solo-mode)
-    :is(.header-system-stats .stat-label, .header-plan-usage .pu-label) {
+    :is(.header-system-stats .stat-item:not(.stat-item--host) .stat-label, .header-plan-usage .pu-label) {
     display: none;
   }
 
@@ -2335,6 +2338,17 @@ html[data-tab-orientation='vertical'].tab-rail-compact
     :is(.header-system-stats .stat-value, .header-plan-usage .pu-val) {
     display: none;
   }
+
+  /* With its value gone, a reading with no ring (the two clocks, and VRAM while its total is unknown:
+     .stat-item--ringless, toggled by panels-ui.js) would be an empty item that still takes a gap. */
+  html[data-header-stats='compact'][data-header-density='tiny']:not([data-tab-orientation='vertical']):not(
+      [data-session-list='sidebar']
+    )
+    body:not(.solo-mode)
+    .header-system-stats
+    .stat-item--ringless {
+    display: none;
+  }
 }
 
 body.header-divider-dragging,