diff --git a/docs/architecture-invariants.md b/docs/architecture-invariants.md
index c202044d..7a743bb6 100644
--- a/docs/architecture-invariants.md
+++ b/docs/architecture-invariants.md
@@ -1045,7 +1045,7 @@ With `classic` nothing is left behind: no headings, no breaks, no inline order,
 
 ### Header stats styles
 
-**Header stats styles** (`headerStatsStyle`, per-device, desktop only, default `compact`; Discussion #426 option G): how the WS readout, CPU, MEM and the plan-usage windows are drawn. `tiles` gives each its own label-over-value tile with a bar along the bottom edge; `compact` is two pills, WS / CPU / MEM and the plan windows, with a ring beside every value (stat rings accent, red past 80%; plan rings green, yellow or red); `classic` is the bars and `5H · 7D` chip as before. `data-header-stats` on `<html>` (pre-paint, then `applyHeaderStatsStyle()` from `applyHeaderVisibilitySettings()`) drives every rule; narrower than 768px and in a solo window it resolves to `classic`, because the stats are hidden there anyway and the moves below would otherwise reach the phone header. The opt-in host readings after MEM (GPU, VRAM, GPU MHz, CPU MHz: `.stat-item` elements that start `hidden` and are shown by `_updateHostSensors` in panels-ui.js) rely on `html[data-header-stats] .header-system-stats .stat-item[hidden]` in styles.css outranking the Tiles style's own `display` on `.stat-item`; keep that selector's specificity above any style rule that sets `display` on a stat item, or the hidden placeholders (`--%`) reappear.
+**Header stats styles** (`headerStatsStyle`, per-device, desktop only, default `compact`; Discussion #426 option G): how the WS readout, CPU, MEM and the plan-usage windows are drawn. `tiles` gives each its own label-over-value tile with a bar along the bottom edge; `compact` is two pills, WS / CPU / MEM and the plan windows, with a ring beside every value (stat rings accent, red past 80%; plan rings green, yellow or red); `classic` is the bars and `5H · 7D` chip as before. `data-header-stats` on `<html>` (pre-paint, then `applyHeaderStatsStyle()` from `applyHeaderVisibilitySettings()`) drives every rule; narrower than 768px and in a solo window it resolves to `classic`, because the stats are hidden there anyway and the moves below would otherwise reach the phone header. The opt-in host readings after MEM (GPU, VRAM, GPU MHz, CPU MHz: `.stat-item` elements that start `hidden` and are shown by `_updateHostSensors` in panels-ui.js) rely on `html[data-header-stats] .header-system-stats .stat-item[hidden]` in styles.css outranking the Tiles style's own `display` on `.stat-item`; keep that selector's specificity above any style rule that sets `display` on a stat item, or the hidden placeholders (`--%`) reappear. Those four carry `.stat-item--host`, which the header divider's density rule (`data-header-density`) excludes from its label hide: their values read like CPU's and MEM's, so the label is the only thing naming them. At Compact + `tiny` (rings only, values hidden) a reading with no ring is hidden outright rather than left an empty flex item: `.stat-item--ringless`, static on the two clocks and toggled by `_updateHostSensors` on VRAM while its total (and so its ring) is unknown. Tests: `test/header-host-sensors.browser.test.ts` (browser suite, not in the gate).
 
 ⚠️ The clustered styles need the three elements contiguous, and the template keeps the classic order, so `applyHeaderStatsStyle()` MOVES `#connectionIndicator` into `#headerSystemStats` (first child) and `#planUsageChip` right after it, and `classic` moves them back to comment anchors it left at the template positions. Ids are unchanged, so every writer still finds them. ⚠️ The indicator joins the pill only while System Stats is shown: the pill is hidden with `display: none`, and the WS readout must not disappear with it.
 
diff --git a/docs/wiki/The-Dashboard.md b/docs/wiki/The-Dashboard.md
index db23eb42..47854b09 100644
--- a/docs/wiki/The-Dashboard.md
+++ b/docs/wiki/The-Dashboard.md
@@ -180,7 +180,9 @@ Hiding System Stats or Plan Usage still hides them in every style.
 
 The line between the session tabs and the toolbar is a handle: drag it right to narrow the toolbar
 (it wraps onto a second line and the usage readings shed their labels, then their provider names,
-then, in the Compact style, their percentages), left to widen it. Arrow keys resize it, and
+then, in the Compact style, their percentages), left to widen it. The GPU, VRAM and clock readings
+keep their labels, since their values look like CPU's and MEM's; at the narrowest Compact step a
+clock, which has no ring, is hidden. Arrow keys resize it, and
 double-click or Home resets it. It stops at the widest reading, the width is kept per device, and it
 is not shown on phones, in the sidebar layout, in the vertical rail or in a solo window.
 
diff --git a/src/web/public/index.html b/src/web/public/index.html
index d0109982..b52a2956 100644
--- a/src/web/public/index.html
+++ b/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>
diff --git a/src/web/public/panels-ui.js b/src/web/public/panels-ui.js
index 9caf42a4..5da8666c 100644
--- a/src/web/public/panels-ui.js
+++ b/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 = '';
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index d0ec0816..49af0d3e 100644
--- a/src/web/public/styles.css
+++ b/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,
diff --git a/test/header-host-sensors-ui.test.ts b/test/header-host-sensors-ui.test.ts
index a02f0d71..7d5d7e6b 100644
--- a/test/header-host-sensors-ui.test.ts
+++ b/test/header-host-sensors-ui.test.ts
@@ -123,8 +123,11 @@ describe('header host sensors', () => {
     expect(els.get('statVramItem')?.hidden).toBe(false);
     expect(els.get('statVram')?.textContent).toBe('1.5G');
     expect(els.get('statVramRing')?.style.display).toBe('none');
+    // marked ringless, so the Compact style's rings-only step hides the item rather than leave an empty one
+    expect(els.get('statVramItem')?.classList.set.has('stat-item--ringless')).toBe(true);
     app._updateHostSensors({ gpu: { percent: 5, memUsedMB: 1536, memTotalMB: 8192, memPercent: 19 } });
     expect(els.get('statVramRing')?.style.display).toBe('');
+    expect(els.get('statVramItem')?.classList.set.has('stat-item--ringless')).toBe(false);
   });
 
   it('keeps polling the header stats with no session open, so CPU, MEM and the readings are never stuck at --', () => {
diff --git a/test/header-host-sensors.browser.test.ts b/test/header-host-sensors.browser.test.ts
index b2a32606..d18ab02c 100644
--- a/test/header-host-sensors.browser.test.ts
+++ b/test/header-host-sensors.browser.test.ts
@@ -1,6 +1,8 @@
 /**
  * Real Chromium, real header markup and styles.css: the opt-in host readings stay out of the header until they
  * are switched on and reported, under every header-stats style, and a reported one is drawn with its value.
+ * As the header divider narrows the toolbar (data-header-density), they keep the label that says which reading
+ * is which, and the Compact style's rings-only step hides a reading with no ring instead of leaving it empty.
  */
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
@@ -11,6 +13,14 @@ const dir = resolve(import.meta.dirname, '../src/web/public');
 const styles = readFileSync(resolve(dir, 'styles.css'), 'utf8');
 const header = /<header class="header">[\s\S]*?<\/header>/.exec(readFileSync(resolve(dir, 'index.html'), 'utf8'))![0];
 const ITEMS = ['statGpuItem', 'statVramItem', 'statCpuMhzItem', 'statGpuMhzItem'];
+/** Each host reading: its value element, a value that looks like CPU's or MEM's, and the label naming it. */
+const READINGS: Record<string, { value: string; text: string; label: string }> = {
+  statGpuItem: { value: 'statGpu', text: '40%', label: 'GPU' },
+  statVramItem: { value: 'statVram', text: '3.2G', label: 'VRAM' },
+  statGpuMhzItem: { value: 'statGpuMhz', text: '1800 MHz', label: 'GPU' },
+  statCpuMhzItem: { value: 'statCpuMhz', text: '4200 MHz', label: 'CPU' },
+};
+const RINGLESS = ['statGpuMhzItem', 'statCpuMhzItem'];
 
 describe('opt-in host readings in the header (real Chromium)', () => {
   let browser: Browser;
@@ -44,5 +54,63 @@ describe('opt-in host readings in the header (real Chromium)', () => {
       expect(await p.locator('#statGpuItem').innerText()).toContain('42%');
       await p.close();
     });
+
+    it(`keeps every host reading's label as the toolbar narrows, in the ${style} style`, async () => {
+      p = await browser.newPage({ viewport: { width: 1600, height: 400 } });
+      await p.setContent(
+        `<!doctype html><html data-header-stats="${style}" data-tab-orientation="horizontal" data-session-list="header"><head><style>${styles}</style></head><body>${header}</body></html>`
+      );
+      await p.evaluate((readings) => {
+        document.getElementById('statCpu')!.textContent = '12%';
+        document.getElementById('statMem')!.textContent = '7.9G';
+        for (const [id, r] of Object.entries(readings)) {
+          document.getElementById(id)!.hidden = false;
+          document.getElementById(r.value)!.textContent = r.text;
+        }
+      }, READINGS);
+      const read = () =>
+        p.evaluate((ids) => {
+          const shown = (el: Element) => getComputedStyle(el).display !== 'none';
+          return Object.fromEntries(
+            ids.map((id) => {
+              const item = document.getElementById(id)!;
+              const label = item.querySelector('.stat-label')!;
+              return [
+                id,
+                {
+                  shown: shown(item),
+                  width: item.getBoundingClientRect().width,
+                  label: shown(label) && label.getBoundingClientRect().width > 0 ? label.textContent : null,
+                },
+              ];
+            })
+          );
+        }, ITEMS);
+      const cpuLabel = () =>
+        p.evaluate(() => getComputedStyle(document.querySelector('.header-system-stats .stat-label')!).display);
+      for (const density of ['tight', 'dense', 'tiny']) {
+        await p.evaluate((d) => (document.documentElement.dataset.headerDensity = d), density);
+        const items = await read();
+        // the density step still sheds CPU's and MEM's labels
+        expect(await cpuLabel(), density).toBe('none');
+        for (const id of ITEMS) {
+          if (style === 'compact' && density === 'tiny' && RINGLESS.includes(id)) {
+            // rings only: a clock has no ring, so it goes rather than stay an empty item taking a gap
+            expect(items[id].shown, `${density} ${id}`).toBe(false);
+            continue;
+          }
+          expect(items[id].shown, `${density} ${id}`).toBe(true);
+          expect(items[id].width, `${density} ${id}`).toBeGreaterThan(0);
+          expect(items[id].label, `${density} ${id}`).toBe(READINGS[id].label);
+        }
+      }
+      // VRAM whose total is unknown has no ring either (panels-ui.js marks it ringless)
+      await p.evaluate(() => {
+        document.getElementById('statVramItem')!.classList.add('stat-item--ringless');
+        document.getElementById('statVramRing')!.style.display = 'none';
+      });
+      expect((await read()).statVramItem.shown).toBe(style !== 'compact');
+      await p.close();
+    });
   }
 });