Fix RAM missing on the bar: move RAM/CPU readout into the always-visible left chip cluster

60eea92eee1130d7409cb0841c1c85fc58cd187a · 2026-09-22 10:24:26 -0700 · Steve Abrams

The bar is a right-docked vertical strip; the RAM chip was in #meta (bottom of
the column) with RAM/CPU as a split .cnt/.nm pair, so RAM clipped while CPU showed.
Now it sits with the dot chips (top of the strip) as one atomic .cnt span
(🧠 RAM% ⚙ CPU%), plus the 🔫 ON/OFF toggle. Verified rendering on both displays.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AztR94xH5K8nBe9ssBoagG

Files touched

M public/index.html

Diff

commit 60eea92eee1130d7409cb0841c1c85fc58cd187a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Sep 22 10:24:26 2026 -0700

    Fix RAM missing on the bar: move RAM/CPU readout into the always-visible left chip cluster
    
    The bar is a right-docked vertical strip; the RAM chip was in #meta (bottom of
    the column) with RAM/CPU as a split .cnt/.nm pair, so RAM clipped while CPU showed.
    Now it sits with the dot chips (top of the strip) as one atomic .cnt span
    (🧠 RAM% ⚙ CPU%), plus the 🔫 ON/OFF toggle. Verified rendering on both displays.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_01AztR94xH5K8nBe9ssBoagG
---
 public/index.html | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7db9988..5bc7f32 100644
--- a/public/index.html
+++ b/public/index.html
@@ -149,16 +149,26 @@ function renderBar(){
     pchip.onclick = () => toggle('parked');
     bar.appendChild(pchip);
   }
+  // RAM Sniper lives in the LEFT chip cluster (always visible on the compact bar; the
+  // right-side #meta gets clipped off the pill). RAM+CPU are ONE atomic .cnt span so
+  // they can never render/clip asymmetrically (the earlier split hid RAM, showed CPU).
+  const rchip = document.createElement('div');
+  rchip.className = 'chip ramchip' + (openColor==='ram' ? ' active':'');
+  rchip.title = 'RAM / CPU — click for top memory hogs';
+  rchip.innerHTML = `<span class="dot" style="background:#59d0ff"></span>`
+    + `<span class="cnt">🧠 ${ram.ram_pct}% <span style="color:var(--dim);font-weight:600">⚙ ${ram.cpu_pct}%</span></span>`;
+  rchip.onclick = () => toggle('ram');
+  bar.appendChild(rchip);
+  const snbtn = document.createElement('button');
+  snbtn.className = 'cfgbtn' + (ram.on ? ' on':'');
+  snbtn.title = `RAM Sniper daemon — throttles background CPU/RAM hogs (never kills). Click to turn ${ram.on?'off':'on'}.`;
+  snbtn.textContent = ram.on ? '🔫 ON' : '🔫 OFF';
+  snbtn.onclick = toggleSniper;
+  bar.appendChild(snbtn);
   const sp = document.createElement('div'); sp.id='spacer'; bar.appendChild(sp);
   const meta = document.createElement('div'); meta.id='meta';
   const nextO = cfg.orientation==='top'?'left':cfg.orientation==='left'?'right':'top';
-  // RAM Sniper: 🧠 RAM% ⚙ CPU% chip (click -> top-hogs dropdown) + 🔫 ON/OFF daemon toggle.
-  meta.innerHTML = `<div class="chip ramchip${openColor==='ram'?' active':''}" title="RAM / CPU — click for top memory hogs" onclick="toggle('ram')">`
-      + `<span class="dot" style="background:#59d0ff"></span>`
-      + `<span class="cnt">🧠 ${ram.ram_pct}%</span>`
-      + `<span class="nm">⚙ ${ram.cpu_pct}%</span></div>`
-    + `<button class="cfgbtn${ram.on?' on':''}" title="RAM Sniper daemon — throttles background CPU/RAM hogs (never kills). Click to turn ${ram.on?'off':'on'}." onclick="toggleSniper()">${ram.on?'🔫 ON':'🔫 OFF'}</button>`
-    + `<button class="arrbtn${arranging?' busy':''}" ${arranging?'disabled':''} title="run the master dot-screen arrangement now" onclick="arrange()">${arranging?'⧉ Arranging…':(arrangeMsg?('⧉ '+arrangeMsg):'⧉ Arrange master')}</button>`
+  meta.innerHTML = `<button class="arrbtn${arranging?' busy':''}" ${arranging?'disabled':''} title="run the master dot-screen arrangement now" onclick="arrange()">${arranging?'⧉ Arranging…':(arrangeMsg?('⧉ '+arrangeMsg):'⧉ Arrange master')}</button>`
     + `<button class="cfgbtn" title="dock the bar on another edge (revert to Top from a side)" onclick="cycleOrient()">${ORIENT_LABEL[cfg.orientation]||'▲ Top'} ▸ ${ORIENT_LABEL[nextO].replace(/^[^ ]+ /,'')}</button>`
     + `<button class="cfgbtn${cfg.autohide?' on':''}" title="edge auto-hide: slide the bar off its edge; hover the edge to reveal" onclick="toggleAutohide()">${cfg.autohide?'👁 Auto-hide':'📌 Pinned'}</button>`
     + `<span><b>${data.total}</b> live</span>`

← 34abb18 Add RAM Sniper to the nav bar: live RAM%/CPU% chip, ON/OFF d · back to Desktop Dotbar · dotbar: visible dotted resize grip + one-click Compact/Full fa809cb →