home: color-coded host load badge (green <8, yellow <20, red ≥20) + 1 smoke

552db5e54a9adb503941fa2e72e425ed1ae60e24 · 2026-05-13 18:26:02 -0700 · SteveStudio2

Files touched

M public/css/site.css
M server.js
M test/smoke.js

Diff

commit 552db5e54a9adb503941fa2e72e425ed1ae60e24
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Wed May 13 18:26:02 2026 -0700

    home: color-coded host load badge (green <8, yellow <20, red ≥20) + 1 smoke
---
 public/css/site.css | 9 +++++++++
 server.js           | 6 +++++-
 test/smoke.js       | 1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/public/css/site.css b/public/css/site.css
index 4ca73f5..c5683d1 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -110,6 +110,15 @@ h2 { font-size: 20px; font-weight: 700; margin: 36px 0 14px; letter-spacing: -0.
 .bp-body { margin: 20px 0; }
 .bp-body pre { background: var(--code-bg); white-space: pre-wrap; }
 .bp-diff { font-size: 12px; max-height: 70vh; overflow: auto; }
+.bp-load { font-family: ui-monospace, Menlo, monospace; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
+.bp-load-ok   { background: rgba(31,122,48,0.15);  color: #1f7a30; }
+.bp-load-warn { background: rgba(196,140,30,0.18); color: #9b6f15; }
+.bp-load-hot  { background: rgba(177,71,71,0.18);  color: #b14747; }
+@media (prefers-color-scheme: dark) {
+  .bp-load-ok   { color: #5cd278; }
+  .bp-load-warn { color: #ffc857; }
+  .bp-load-hot  { color: #ff7373; }
+}
 .bp-d-add { color: #1f7a30; background: rgba(31,122,48,0.08); display: block; }
 .bp-d-rm  { color: #b14747; background: rgba(177,71,71,0.08); display: block; }
 .bp-d-h   { color: var(--muted); font-weight: 600; display: block; }
diff --git a/server.js b/server.js
index 9833c39..2976059 100644
--- a/server.js
+++ b/server.js
@@ -367,7 +367,11 @@ app.get('/', async (req, res, next) => {
       <h1>build journals</h1>
       <p class="bp-lede">Every build, every commit, every line. Click into a project to see how it actually got made.</p>
       <p class="bp-meta">${entries.length} projects · ${totalCommits} commits · ${totalIdeas} design-rationale ideas surfaced</p>
-      <p class="bp-meta">velocity: <strong>${last24}</strong> commits in the last 24h · <strong>${last7d}</strong> in the last 7 days</p>
+      <p class="bp-meta">velocity: <strong>${last24}</strong> commits in the last 24h · <strong>${last7d}</strong> in the last 7 days · ${(() => {
+        const [l1] = require('os').loadavg();
+        const cls = l1 < 8 ? 'bp-load-ok' : l1 < 20 ? 'bp-load-warn' : 'bp-load-hot';
+        return `host load <span class="bp-load ${cls}">${l1.toFixed(1)}</span> (1m)`;
+      })()}</p>
 
       <section class="bp-section">
         <h2>Recent across the fleet</h2>
diff --git a/test/smoke.js b/test/smoke.js
index 4e78f1c..cfd7b5a 100644
--- a/test/smoke.js
+++ b/test/smoke.js
@@ -96,6 +96,7 @@ function check(name, cond, hint = '') {
   check('home: theme-color',       /name="theme-color"/.test(r.body));
   check('home: top skills rail',   /Top skills \+ agents/.test(r.body));
   check('home: velocity line',     /velocity: <strong>\d+<\/strong>/.test(r.body));
+  check('home: load badge',        /class="bp-load (bp-load-ok|bp-load-warn|bp-load-hot)"/.test(r.body));
   check('home: canonical',         /rel="canonical"/.test(r.body));
   check('home: og:title',          /property="og:title"/.test(r.body));
   check('home: WebSite JSON-LD',   /"@type":"WebSite"/.test(r.body));

← bae5063 api/health: include loadavg {1m,5m,15m} for host-overload mo · back to build-pages · api/recent: ?since= filter (24h|7d|YYYY-MM-DD) + 2 smoke d965741 →