aboutsummaryrefslogtreecommitdiff
path: root/docs/prototypes/2026-07-07-maint-console-E2-grouped-dashboard.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/prototypes/2026-07-07-maint-console-E2-grouped-dashboard.html')
-rw-r--r--docs/prototypes/2026-07-07-maint-console-E2-grouped-dashboard.html443
1 files changed, 443 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-07-maint-console-E2-grouped-dashboard.html b/docs/prototypes/2026-07-07-maint-console-E2-grouped-dashboard.html
new file mode 100644
index 0000000..b818006
--- /dev/null
+++ b/docs/prototypes/2026-07-07-maint-console-E2-grouped-dashboard.html
@@ -0,0 +1,443 @@
+<meta charset="utf-8">
+<title>MAINT · ratio — Approach E2 · Grouped Instrument Dashboard</title>
+<style>
+ :root{
+ --page:#0a0c0d; --surface:#100f0f; --inset:#0a0c0d;
+ --gold:#dab53d; --silver:#bfc4d0; --dim:#7c838a; --cream:#f3e7c5;
+ --slate:#424f5e; --slate-hi:#54677d; --line:#2c2f32;
+ --olive:#74932f; --amber:#dab53d; --terra:#cb6b4d;
+ --font:"BerkeleyMono Nerd Font", ui-monospace, monospace;
+ }
+ *{box-sizing:border-box}
+ html,body{margin:0;background:var(--page);}
+ body{
+ font-family:var(--font); color:var(--silver);
+ display:flex; justify-content:center; padding:26px 14px 60px;
+ -webkit-font-smoothing:antialiased;
+ }
+ .console{ width:1050px; max-width:100%; background:var(--surface);
+ border:1px solid var(--gold); border-radius:16px; padding:18px; }
+
+ /* header */
+ .head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;}
+ .head .title{font-size:19px; color:var(--cream); letter-spacing:.5px;}
+ .head .title b{color:var(--gold); font-weight:700;}
+ .verdict{font-size:15px; color:var(--olive); font-weight:700; white-space:nowrap;}
+ .sub{color:var(--dim); font-size:12px; margin-top:2px; letter-spacing:.4px;}
+
+ /* action bar */
+ .actionbar{display:flex; align-items:center; gap:10px; margin:14px 0 14px;
+ padding:10px 12px; background:var(--inset); border:1px solid var(--line); border-radius:10px;}
+ .actionbar .lbl{color:var(--dim); font-size:11.5px; letter-spacing:.5px; text-transform:uppercase; margin-right:2px;}
+ .btn{font-family:var(--font); cursor:pointer; background:var(--slate); color:var(--cream);
+ border:none; border-radius:10px; padding:7px 14px; font-size:13px;}
+ .btn:hover{background:var(--slate-hi);}
+ .btn.lever{padding:3px 9px; font-size:11px; border-radius:8px;}
+ .btn.mini{padding:2px 8px; font-size:10.5px; border-radius:7px;}
+ .actionbar .spacer{flex:1;}
+ .legend{color:var(--dim); font-size:11px; line-height:1.5;}
+ .legend b{color:var(--silver); font-weight:400;}
+
+ /* updates quarantine */
+ .updates{border:1px solid var(--amber);
+ background:linear-gradient(180deg,#141210,#0a0c0d);
+ border-radius:10px; padding:12px 16px; margin-bottom:14px;
+ display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
+ .updates .q{color:var(--amber); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
+ border:1px solid var(--amber); padding:3px 8px; border-radius:6px; align-self:flex-start;}
+ .updates .metric{display:flex; flex-direction:column; gap:2px;}
+ .updates .metric .n{font-size:28px; color:var(--cream); font-weight:700; line-height:1;}
+ .updates .metric .n.cve{color:var(--terra);}
+ .updates .metric .k{color:var(--dim); font-size:10.5px; text-transform:uppercase; letter-spacing:.6px;}
+ .updates .spacer{flex:1;}
+
+ /* ---- category panel ---- */
+ .panel{border:1px solid var(--line); border-left:3px solid var(--line);
+ border-radius:11px; margin-bottom:10px; overflow:hidden; background:#0d0c0c;}
+ .panel.attn{border-left-color:var(--amber);}
+ .panel.crit{border-left-color:var(--terra);}
+ .panel.clear{border-left-color:var(--olive); opacity:.85;}
+ .phead{display:flex; align-items:center; gap:11px; padding:9px 14px; cursor:pointer;}
+ .phead:hover{background:#141313;}
+ .phead .nm{color:var(--gold); font-weight:700; letter-spacing:.9px; text-transform:uppercase; font-size:12.5px;}
+ .phead .cnt{color:var(--dim); font-size:11px; margin-left:auto;}
+ .phead .chev{color:var(--dim); font-size:12px; width:1em; text-align:center;}
+ .phead .attnword{color:var(--amber); font-size:11px;}
+ .phead .attnword.crit{color:var(--terra);}
+ .phead .okword{color:var(--olive); font-size:11px;}
+ .pbody{padding:2px 14px 13px;}
+
+ .heroes{display:grid; grid-template-columns:repeat(12,1fr); gap:10px; margin-bottom:11px;}
+ .card{background:var(--inset); border:1px solid var(--line); border-radius:10px;
+ padding:10px 12px 11px; position:relative; min-height:88px; display:flex; flex-direction:column;}
+ .card .lever{position:absolute; top:8px; right:8px;}
+ .card .cap{color:var(--dim); font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
+ margin-bottom:7px; padding-right:52px;}
+ .card .big{color:var(--cream); font-size:22px; line-height:1; font-weight:700;}
+ .card .unit{color:var(--dim); font-size:12px; font-weight:400;}
+ .card .note{color:var(--dim); font-size:11px; margin-top:6px;}
+ .s2{grid-column:span 2;} .s3{grid-column:span 3;} .s4{grid-column:span 4;}
+ .s5{grid-column:span 5;} .s6{grid-column:span 6;}
+
+ /* meter */
+ .meter{margin-top:auto;}
+ .meter .track{position:relative; height:13px; background:#07090a; border:1px solid var(--line);
+ border-radius:7px; overflow:hidden;}
+ .meter .fill{height:100%; border-radius:6px 0 0 6px;}
+ .fill.ok{background:linear-gradient(90deg,#5c7626,#74932f);}
+ .fill.warn{background:linear-gradient(90deg,#a98a2c,#dab53d);}
+ .fill.fail{background:linear-gradient(90deg,#a8543b,#cb6b4d);}
+ .meter .tick{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--gold);}
+ .meter .zone{position:absolute; top:0; bottom:0; opacity:.16;}
+ .zone.amber{background:var(--amber);} .zone.terra{background:var(--terra);}
+ .meter .scale{display:flex; justify-content:space-between; color:var(--dim); font-size:9.5px; margin-top:4px;}
+
+ /* lamps */
+ .lamp{display:inline-block; width:1em; text-align:center;}
+ .l-ok{color:var(--olive);} .l-warn{color:var(--amber);}
+ .l-fail{color:var(--terra);} .l-off{color:var(--dim);} .l-prog{color:var(--amber);}
+
+ .tile .row{display:flex; align-items:center; gap:8px;}
+ .tile .big{font-size:25px;}
+
+ .gaugewrap{display:flex; gap:14px; margin-top:2px;}
+ .gauge{display:flex; flex-direction:column; align-items:center; gap:3px;}
+ .gauge .rd{color:var(--cream); font-size:13px; font-weight:700;}
+ .gauge .lb{color:var(--dim); font-size:10px;}
+ .dialwrap{display:flex; justify-content:center; margin-top:2px;}
+
+ /* compact strip (the boring/green/binary metrics) */
+ .strip{display:grid; grid-template-columns:repeat(3,1fr); gap:5px 22px;
+ padding-top:9px; border-top:1px solid var(--line);}
+ .strip .row{display:flex; align-items:center; gap:8px; font-size:12px; min-height:22px;}
+ .strip .row .nm2{color:var(--silver);}
+ .strip .row .vv{color:var(--dim); margin-left:auto; font-size:11px;}
+ .strip .row .lever{margin-left:auto;}
+ .strip .row .lever + .vv{margin-left:8px;}
+
+ /* output wall */
+ .wall{margin-top:16px; background:var(--inset); border:1px solid var(--line);
+ border-radius:10px; padding:13px 15px;}
+ .wall .wh{display:flex; align-items:center; justify-content:space-between;
+ color:var(--cream); font-size:13px; letter-spacing:.5px; margin-bottom:10px;}
+ .wall .wh .l{color:var(--gold);}
+ .wall .stream{font-size:12.5px; line-height:1.85;}
+ .wall .stream .ln{display:flex; gap:9px; align-items:baseline;}
+ .wall .stream .msg{color:var(--silver);}
+ .wall .stream .meta{color:var(--dim);}
+ .wall .stream .queued .msg{color:var(--dim);}
+ .wall .wfoot{margin-top:11px; display:flex; justify-content:flex-end;}
+
+ .footnote{color:var(--dim); font-size:11px; margin-top:14px; line-height:1.6;}
+ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
+ .spin{animation:pulse 1.1s ease-in-out infinite;}
+</style>
+
+<div class="console">
+
+ <!-- HEADER -->
+ <div class="head">
+ <div>
+ <div class="title">MAINT · <b>ratio</b></div>
+ <div class="sub">Approach E2 — Grouped instrument dashboard (categories collapse when clean)</div>
+ </div>
+ <div class="verdict"><span class="lamp l-ok">●</span> healthy</div>
+ </div>
+
+ <!-- ACTION BAR -->
+ <div class="actionbar">
+ <span class="lbl">Doctor</span>
+ <button class="btn">Clean up</button>
+ <button class="btn">Review &amp; fix</button>
+ <span class="spacer"></span>
+ <span class="legend">
+ <b>Auto</b> unattended · <b>Confirm</b> preview+click · <b>Human</b> you act · <b>Workflow</b> escalate · <b>None</b> diagnostic
+ </span>
+ </div>
+
+ <!-- UPDATES (pulled up: the 3 CVEs are the one real fail) -->
+ <div class="updates">
+ <div class="q">Updates</div>
+ <div class="metric"><span class="n">47</span><span class="k">pending</span></div>
+ <div class="metric"><span class="n cve">3</span><span class="k">CVE · arch-audit</span></div>
+ <div class="metric"><span class="n">5</span><span class="k">AUR stale</span></div>
+ <div class="spacer"></div>
+ <div class="note" style="max-width:250px; margin:0; color:var(--dim); font-size:11px;">
+ <span class="lamp l-fail">●</span> Security advisories present. Updates run through the workflow — never an unattended clean.
+ </div>
+ <button class="btn">Run workflow</button>
+ </div>
+
+ <!-- ============ CATEGORY PANELS (severity-ordered) ============ -->
+
+ <!-- STORAGE (has a fail: fstrim) -->
+ <div class="panel crit">
+ <div class="phead">
+ <span class="chev">▾</span><span class="lamp l-fail">●</span>
+ <span class="nm">Storage &amp; Filesystem</span>
+ <span class="cnt"><span class="attnword crit">3 need attention</span> · 6 ok</span>
+ </div>
+ <div class="pbody">
+ <div class="heroes">
+ <div class="card s3">
+ <div class="cap">Disk usage</div>
+ <div class="big">69<span class="unit">%</span></div>
+ <div class="note">root · btrfs</div>
+ <div class="meter"><div class="track">
+ <div class="zone amber" style="left:80%;right:10%"></div>
+ <div class="zone terra" style="left:90%;right:0"></div>
+ <div class="fill ok" style="width:69%"></div></div>
+ <div class="scale"><span>0</span><span>80</span><span>90</span><span>100</span></div>
+ </div>
+ </div>
+ <div class="card s3">
+ <button class="btn lever">Clean</button>
+ <div class="cap">Cache <span class="lamp l-warn">●</span></div>
+ <div class="big">8.8<span class="unit"> GB</span></div>
+ <div class="note">Auto · thr ~10 GB</div>
+ <div class="meter"><div class="track"><div class="tick" style="left:88%"></div>
+ <div class="fill warn" style="width:88%"></div></div>
+ <div class="scale"><span>0</span><span>10 GB</span></div>
+ </div>
+ </div>
+ <div class="card s3">
+ <button class="btn lever">Scrub</button>
+ <div class="cap">btrfs scrub</div>
+ <div class="dialwrap">
+ <svg width="86" height="86" viewBox="0 0 98 98">
+ <circle cx="49" cy="49" r="40" fill="none" stroke="#1a1d1f" stroke-width="8"/>
+ <circle cx="49" cy="49" r="40" fill="none" stroke="#dab53d" stroke-width="8"
+ stroke-linecap="round" stroke-dasharray="251.3" stroke-dashoffset="95" transform="rotate(-90 49 49)"/>
+ <text x="49" y="46" text-anchor="middle" fill="#f3e7c5" font-family="monospace" font-size="20" font-weight="700">34</text>
+ <text x="49" y="63" text-anchor="middle" fill="#7c838a" font-family="monospace" font-size="10">days</text>
+ </svg>
+ </div>
+ <div class="note" style="text-align:center"><span class="lamp l-warn">●</span> past 30d</div>
+ </div>
+ <div class="card s3">
+ <button class="btn lever">Enable</button>
+ <div class="cap">fstrim.timer <span class="lamp l-fail">●</span></div>
+ <div class="big" style="color:var(--terra)">OFF</div>
+ <div class="note">Confirm · SSD discard off</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">SMART</span><span class="vv">PASSED</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">SMART wear</span><span class="vv">0%</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">device errors</span><span class="vv">0 / 0</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">btrfs unalloc</span><span class="vv">118 GiB</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">pacman integrity</span><span class="vv">clean</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">deep-trim</span><button class="btn mini lever" style="position:static">Deep trim</button><span class="vv">keep 3</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- PACKAGES & SECURITY -->
+ <div class="panel attn">
+ <div class="phead">
+ <span class="chev">▾</span><span class="lamp l-warn">●</span>
+ <span class="nm">Packages &amp; Security</span>
+ <span class="cnt"><span class="attnword">2 need attention</span> · 2 ok · updates above</span>
+ </div>
+ <div class="pbody">
+ <div class="heroes">
+ <div class="card s3 tile">
+ <button class="btn lever">Review</button>
+ <div class="cap">Orphans</div>
+ <div class="row"><span class="lamp l-warn">●</span><span class="big">13</span></div>
+ <div class="note">Confirm · unowned pkgs</div>
+ </div>
+ <div class="card s3 tile">
+ <button class="btn lever">Review</button>
+ <div class="cap">.pacnew files</div>
+ <div class="row"><span class="lamp l-warn">●</span><span class="big">2</span></div>
+ <div class="note">Confirm · config merges</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">keyring age</span><button class="btn mini lever" style="position:static">Refresh</button><span class="vv">12d</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">reboot required</span><span class="vv">no</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- SYSTEMD & BOOT -->
+ <div class="panel attn">
+ <div class="phead">
+ <span class="chev">▾</span><span class="lamp l-warn">●</span>
+ <span class="nm">systemd &amp; Boot</span>
+ <span class="cnt"><span class="attnword">2 need attention</span> · 2 ok</span>
+ </div>
+ <div class="pbody">
+ <div class="heroes">
+ <div class="card s3 tile">
+ <button class="btn lever">Run workflow</button>
+ <div class="cap">Failed units</div>
+ <div class="row"><span class="lamp l-warn">●</span><span class="big">1</span></div>
+ <div class="note">Workflow · systemd</div>
+ </div>
+ <div class="card s3 tile">
+ <button class="btn lever">Enable</button>
+ <div class="cap">Maintenance timers</div>
+ <div class="row"><span class="lamp l-warn">●</span><span class="big">4/5</span></div>
+ <div class="note">Confirm · one not firing</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">is-system-running</span><span class="vv">running</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">kernel taint</span><span class="vv">0</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- LOGS & COREDUMPS -->
+ <div class="panel attn">
+ <div class="phead">
+ <span class="chev">▾</span><span class="lamp l-warn">●</span>
+ <span class="nm">Logs &amp; Coredumps</span>
+ <span class="cnt"><span class="attnword">1 needs attention</span> · 4 ok</span>
+ </div>
+ <div class="pbody">
+ <div class="heroes">
+ <div class="card s3 tile">
+ <button class="btn lever">Clear</button>
+ <div class="cap">Coredumps 7d</div>
+ <div class="row"><span class="lamp l-warn">●</span><span class="big">18</span></div>
+ <div class="note">Auto · clearable</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">journald size</span><button class="btn mini lever" style="position:static">Vacuum</button><span class="vv">1.2 GB</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">app-log cleanup</span><button class="btn mini lever" style="position:static">Run</button><span class="vv">ok</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">journal errors</span><span class="vv">12 real</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">kernel/hw events</span><span class="vv">clean</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- MEMORY / THERMAL / POWER -->
+ <div class="panel attn">
+ <div class="phead">
+ <span class="chev">▾</span><span class="lamp l-warn">●</span>
+ <span class="nm">Memory · Thermal · Power</span>
+ <span class="cnt"><span class="attnword">1 needs attention</span> · 4 ok</span>
+ </div>
+ <div class="pbody">
+ <div class="heroes">
+ <div class="card s5">
+ <div class="cap">Temperatures <span class="lamp l-ok">●</span></div>
+ <div class="gaugewrap">
+ <div class="gauge">
+ <svg width="104" height="60" viewBox="0 0 112 64">
+ <path d="M8 60 A48 48 0 0 1 104 60" fill="none" stroke="#1a1d1f" stroke-width="9"/>
+ <path d="M8 60 A48 48 0 0 1 79 21" fill="none" stroke="#74932f" stroke-width="9" stroke-linecap="round"/>
+ <path d="M79 21 A48 48 0 0 1 96 34" fill="none" stroke="#dab53d" stroke-width="9"/>
+ <path d="M96 34 A48 48 0 0 1 104 60" fill="none" stroke="#cb6b4d" stroke-width="9"/>
+ <line x1="56" y1="60" x2="86" y2="30" stroke="#f3e7c5" stroke-width="2.5"/>
+ <circle cx="56" cy="60" r="4" fill="#dab53d"/>
+ </svg>
+ <div class="rd">61°C</div><div class="lb">CPU</div>
+ </div>
+ <div class="gauge">
+ <svg width="104" height="60" viewBox="0 0 112 64">
+ <path d="M8 60 A48 48 0 0 1 104 60" fill="none" stroke="#1a1d1f" stroke-width="9"/>
+ <path d="M8 60 A48 48 0 0 1 79 21" fill="none" stroke="#74932f" stroke-width="9" stroke-linecap="round"/>
+ <path d="M79 21 A48 48 0 0 1 96 34" fill="none" stroke="#dab53d" stroke-width="9"/>
+ <path d="M96 34 A48 48 0 0 1 104 60" fill="none" stroke="#cb6b4d" stroke-width="9"/>
+ <line x1="56" y1="60" x2="79" y2="34" stroke="#f3e7c5" stroke-width="2.5"/>
+ <circle cx="56" cy="60" r="4" fill="#dab53d"/>
+ </svg>
+ <div class="rd">54°C</div><div class="lb">NVMe</div>
+ </div>
+ </div>
+ </div>
+ <div class="card s4">
+ <div class="cap">Memory free <span class="lamp l-ok">●</span></div>
+ <div class="big">104<span class="unit"> GB</span></div>
+ <div class="note">of 125 GB · Workflow</div>
+ <div class="meter"><div class="track"><div class="fill ok" style="width:83%"></div></div>
+ <div class="scale"><span>0</span><span>free 104 / 125</span></div></div>
+ </div>
+ <div class="card s3">
+ <div class="cap">Unclean boot <span class="lamp l-warn">●</span></div>
+ <div class="big" style="color:var(--amber)">75<span class="unit">%</span></div>
+ <div class="note">Workflow · investigate</div>
+ <div class="meter"><div class="track"><div class="zone amber" style="left:0;right:0"></div>
+ <div class="fill warn" style="width:75%"></div></div>
+ <div class="scale"><span>0</span><span>100</span></div></div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">swap / zram</span><span class="vv">16 GiB</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">thermal throttle</span><span class="vv">no</span></div>
+ <div class="row"><span class="lamp l-off">○</span><span class="nm2">battery</span><span class="vv">n/a · desktop</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- SERVICES & BACKUPS -->
+ <div class="panel attn">
+ <div class="phead">
+ <span class="chev">▾</span><span class="lamp l-warn">●</span>
+ <span class="nm">Services &amp; Backups</span>
+ <span class="cnt"><span class="attnword">1 needs attention</span> · 3 ok</span>
+ </div>
+ <div class="pbody">
+ <div class="heroes">
+ <div class="card s3 tile">
+ <button class="btn lever">Prune</button>
+ <div class="cap">Docker reclaim</div>
+ <div class="row"><span class="lamp l-warn">●</span><span class="big">3<span class="unit"> GB</span></span></div>
+ <div class="note">Confirm · reclaimable</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">rsyncshot backup</span><span class="vv">3h ago</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">docker stopped</span><span class="vv">2</span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="nm2">cron</span><span class="vv">ok</span></div>
+ <div class="row"><span class="lamp l-off">○</span><span class="nm2">libvirt VMs</span><span class="vv">off</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- ===== COLLAPSED (all-green) categories — the space win ===== -->
+
+ <div class="panel clear">
+ <div class="phead">
+ <span class="chev">▸</span><span class="lamp l-ok">●</span>
+ <span class="nm">Snapshots</span>
+ <span class="cnt"><span class="okword">all clear · 2 ✓</span></span>
+ </div>
+ </div>
+
+ <div class="panel clear">
+ <div class="phead">
+ <span class="chev">▸</span><span class="lamp l-ok">●</span>
+ <span class="nm">Network &amp; Posture</span>
+ <span class="cnt"><span class="okword">all clear · 6 ✓</span></span>
+ </div>
+ </div>
+
+ <div class="footnote">
+ Collapsed panels are all-green — one header line each (chevron ▸ to expand). On a fully-healthy day every
+ panel collapses to this and the console is ~4 header rows plus the updates strip. The board's height tracks
+ how much needs you, not how many metrics exist. Verdict lamp (top-right) reads the worst <i>diagnostic</i>
+ state only — the fstrim fail and the 3 CVEs are actionable/updates, so the box still reads "healthy."
+ </div>
+
+ <!-- RUNNING / OUTPUT WALL -->
+ <div class="wall">
+ <div class="wh">
+ <span>MAINT · <span class="l">ratio</span> · CLEANING <span class="lamp l-prog spin">◐</span></span>
+ <span class="meta" style="font-size:11px">4 Auto actions</span>
+ </div>
+ <div class="stream">
+ <div class="ln"><span class="lamp l-prog spin">◐</span><span class="msg">cache trim</span><span class="meta">running…</span></div>
+ <div class="ln"><span class="lamp l-ok">●</span><span class="msg">journal vacuum</span><span class="meta">done · reclaimed 0.9 GB</span></div>
+ <div class="ln"><span class="lamp l-ok">●</span><span class="msg">coredump clear</span><span class="meta">done · 12 cleared</span></div>
+ <div class="ln queued"><span class="lamp l-off">○</span><span class="msg">app-log cleanup</span><span class="meta">queued</span></div>
+ </div>
+ <div class="wfoot"><button class="btn">Done</button></div>
+ </div>
+
+</div>