aboutsummaryrefslogtreecommitdiff
path: root/docs/prototypes/2026-07-07-maint-console-E3-hifi-drilldown.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/prototypes/2026-07-07-maint-console-E3-hifi-drilldown.html')
-rw-r--r--docs/prototypes/2026-07-07-maint-console-E3-hifi-drilldown.html488
1 files changed, 488 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-07-maint-console-E3-hifi-drilldown.html b/docs/prototypes/2026-07-07-maint-console-E3-hifi-drilldown.html
new file mode 100644
index 0000000..fbfb03d
--- /dev/null
+++ b/docs/prototypes/2026-07-07-maint-console-E3-hifi-drilldown.html
@@ -0,0 +1,488 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>MAINT · ratio — Approach E3 · Hi-fi drill-down console</title>
+<style>
+:root{
+ --ground:#151311; --panel:#100f0f; --well:#0a0c0d; --raise:#1a1917;
+ --gold:#dab53d; --gold-hi:#ffd75f; --silver:#bfc4d0; --cream:#f3e7c5;
+ --steel:#969385; --dim:#7c838a; --slate:#424f5e; --slate-hi:#54677d;
+ --wash:#2c2f32; --pass:#74932f; --amber:#dab53d; --fail:#cb6b4d;
+ --mono:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+html{background:var(--ground)}
+body{font-family:var(--mono);color:var(--silver);line-height:1.45;
+ padding:2rem 1.4rem 5rem;
+ background:radial-gradient(1200px 600px at 70% -10%,#1c1915 0%,transparent 60%),var(--ground);
+ display:flex;justify-content:center}
+.console{width:1080px;max-width:100%}
+
+/* ---- shared primitives (from the widget gallery) ---- */
+.lamp{width:10px;height:10px;border-radius:50%;background:var(--pass);
+ box-shadow:0 0 6px 1px rgba(116,147,47,.55);display:inline-block;flex:none}
+.lamp.gold{background:var(--gold);box-shadow:0 0 6px 1px rgba(218,181,61,.6)}
+.lamp.red{background:var(--fail);box-shadow:0 0 7px 1px rgba(203,107,77,.6)}
+.lamp.off{background:var(--wash);box-shadow:none}
+.lamp.busy{background:var(--gold);animation:pulse .7s ease-in-out infinite}
+@keyframes pulse{50%{opacity:.25}}
+
+.key{font:inherit;font-size:11.5px;letter-spacing:.06em;color:var(--silver);cursor:pointer;
+ background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-bottom-color:#0c0b0a;
+ border-radius:8px;padding:6px 11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 3px rgba(0,0,0,.4)}
+.key:hover{color:var(--gold);border-color:var(--gold)}
+.key:active{transform:translateY(1px)}
+.key.on{color:var(--panel);background:linear-gradient(180deg,#f0d879,var(--gold));border-color:var(--gold-hi);font-weight:700}
+.key.red{color:var(--cream);background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail)}
+.key.sm{font-size:10.5px;padding:4px 9px;border-radius:7px}
+
+.badge{font-size:.62rem;letter-spacing:.16em;color:var(--panel);background:var(--gold);border-radius:4px;padding:1px 6px}
+.badge.red{background:var(--fail);color:var(--cream)}
+.badge.ghost{background:transparent;border:1px solid var(--slate);color:var(--silver)}
+
+.bar{width:100%;height:12px;background:#0d0f10;border:1px solid #231f18;border-radius:6px;overflow:hidden;position:relative}
+.bar>span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8a7524,var(--gold));border-radius:6px}
+.bar.warn>span{background:linear-gradient(90deg,#a35a3f,var(--fail))}
+.bar .tk{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--gold-hi)}
+
+.ring{width:58px;height:58px;border-radius:50%;
+ background:conic-gradient(var(--rc,var(--gold)) calc(var(--p)*1%),var(--wash) 0);
+ display:grid;place-items:center;position:relative;flex:none}
+.ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--well)}
+.ring b{position:relative;color:var(--cream);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
+.ring small{position:relative;color:var(--dim);font-size:8.5px}
+
+.readout{color:var(--cream);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.03em}
+.readout small{color:var(--dim);font-size:11px;font-weight:400}
+
+/* engraved section label */
+.engrave{color:var(--steel);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
+ display:flex;align-items:center;gap:10px;flex:1}
+.engrave::after{content:"";height:1px;background:var(--wash);flex:1}
+.engrave .cnt{color:var(--dim);letter-spacing:.08em;text-transform:none;font-size:.7rem}
+
+/* lamp row (list item) */
+.lrow{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;background:#141210;font-size:12.5px}
+.lrow .who{color:var(--silver)} .lrow .who b{color:var(--cream)}
+.lrow .what{margin-left:auto;color:var(--dim);font-size:11px;display:flex;align-items:center;gap:8px}
+
+/* faceplate card */
+.plate{background:linear-gradient(180deg,var(--raise),var(--panel));border:1px solid #262320;border-radius:12px;
+ box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 14px rgba(0,0,0,.4)}
+
+/* ---- masthead ---- */
+.mast{padding:15px 18px;margin-bottom:14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
+.mast .brand{display:flex;flex-direction:column;gap:2px}
+.mast .brand .ey{color:var(--steel);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase}
+.mast .brand .ti{color:var(--cream);font-size:19px;letter-spacing:.5px}
+.mast .brand .ti b{color:var(--gold)}
+.mast .verdict{display:flex;align-items:center;gap:8px;color:var(--pass);font-size:14px;font-weight:700}
+.mast .spacer{flex:1}
+.mast .doctor{display:flex;align-items:center;gap:8px}
+.mast .doctor .lbl{color:var(--steel);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;margin-right:2px}
+
+/* updates readout inline in masthead */
+.updbar{display:flex;align-items:center;gap:16px;padding:9px 18px;margin-bottom:16px;
+ border:1px solid var(--fail);border-radius:11px;
+ background:linear-gradient(180deg,#181210,#0a0c0d)}
+.updbar .q{color:var(--fail);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
+ border:1px solid var(--fail);border-radius:5px;padding:2px 7px}
+.updbar .rd{display:flex;flex-direction:column;line-height:1.05}
+.updbar .rd .n{color:var(--cream);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
+.updbar .rd .n.cve{color:var(--fail)}
+.updbar .rd .k{color:var(--dim);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
+.updbar .spacer{flex:1}
+.updbar .msg{color:var(--dim);font-size:11px;max-width:300px}
+
+/* ---- OVERVIEW: station grid ---- */
+.ovhead{margin:0 4px 9px;display:flex;align-items:center;gap:10px}
+.overview{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:22px}
+.station{padding:12px 13px;cursor:pointer;display:flex;flex-direction:column;gap:9px;
+ transition:border-color .12s,transform .06s;border-left:3px solid var(--wash)}
+.station:hover{border-color:#3a352c;transform:translateY(-1px)}
+.station.attn{border-left-color:var(--amber)}
+.station.crit{border-left-color:var(--fail)}
+.station.clear{border-left-color:var(--pass)}
+.station .top{display:flex;align-items:center;gap:9px}
+.station .top .nm{color:var(--cream);font-size:12.5px;font-weight:700;letter-spacing:.02em}
+.station .top .chev{margin-left:auto;color:var(--dim);font-size:11px}
+.station .st{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim)}
+.station .st .att{color:var(--amber)} .station .st .att.crit{color:var(--fail)}
+.station .st .okc{color:var(--pass)}
+.station .spark{margin-top:1px}
+
+/* ---- CATEGORY drill-down sections ---- */
+.cat{margin-bottom:11px;overflow:hidden}
+.cathead{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;user-select:none}
+.cathead:hover{background:#161412}
+.cathead .chev{color:var(--gold);font-size:12px;width:1em;text-align:center;transition:transform .15s}
+.cat.open .cathead .chev{transform:rotate(90deg)}
+.cathead .nm{color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px}
+.cathead .cnt{margin-left:auto;color:var(--dim);font-size:11px;display:flex;gap:10px;align-items:center}
+.cathead .cnt .att{color:var(--amber)} .cathead .cnt .att.crit{color:var(--fail)}
+.catbody{display:none;padding:2px 16px 15px}
+.cat.open .catbody{display:block}
+
+.heroes{display:grid;grid-template-columns:repeat(12,1fr);gap:11px;margin-bottom:12px}
+.inst{background:var(--well);border:1px solid #201d17;border-radius:9px;padding:11px 12px;
+ display:flex;flex-direction:column;gap:8px;position:relative;min-height:84px}
+.inst .cap{color:var(--steel);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
+ display:flex;align-items:center;gap:7px}
+.inst .cap .key{position:absolute;top:9px;right:9px}
+.inst .val{display:flex;align-items:baseline;gap:8px;margin-top:auto}
+.inst.s3{grid-column:span 3} .inst.s4{grid-column:span 4} .inst.s5{grid-column:span 5} .inst.s6{grid-column:span 6}
+.inst .sub{color:var(--dim);font-size:10.5px}
+.gaugepair{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:auto}
+.gaugepair .g{display:flex;flex-direction:column;align-items:center;gap:3px}
+.gaugepair .g .lb{color:var(--steel);font-size:9px;letter-spacing:.1em}
+
+.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 12px}
+
+/* ---- output well ---- */
+.owell{margin-top:18px;padding:13px 15px}
+.owell .oh{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;
+ color:var(--cream);font-size:13px}
+.owell .oh .l{color:var(--gold)}
+.owell .ostep{display:flex;gap:9px;align-items:flex-start;padding:3px 0;font-size:12.5px}
+.owell .ostep .lamp{margin-top:3px;width:8px;height:8px}
+.owell .ostep b{color:var(--cream);font-weight:700}
+.owell .ostep .ev{color:var(--steel);font-size:11px}
+.owell .queued b{color:var(--dim)}
+.owell .ofoot{margin-top:11px;display:flex;justify-content:flex-end}
+
+.hint{color:var(--dim);font-size:11px;margin:0 4px 14px;display:flex;align-items:center;gap:8px}
+.controls-row{display:flex;gap:8px;margin:0 2px 12px}
+.footnote{color:var(--dim);font-size:11px;margin-top:16px;line-height:1.6;padding:0 4px}
+.footnote i{color:var(--steel);font-style:normal}
+@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+</style>
+</head>
+<body>
+<div class="console">
+
+ <!-- ===== MASTHEAD ===== -->
+ <div class="plate mast">
+ <div class="brand">
+ <div class="ey">archsetup · maintenance console</div>
+ <div class="ti">MAINT · <b>ratio</b></div>
+ </div>
+ <div class="verdict"><span class="lamp"></span> HEALTHY</div>
+ <div class="spacer"></div>
+ <div class="doctor">
+ <span class="lbl">Doctor</span>
+ <button class="key" onclick="runDoctor()">CLEAN UP</button>
+ <button class="key">REVIEW &amp; FIX</button>
+ </div>
+ </div>
+
+ <!-- ===== UPDATES (quarantined, top billing for the 3 CVEs) ===== -->
+ <div class="updbar">
+ <span class="q">Updates</span>
+ <div class="rd"><span class="n">47</span><span class="k">pending</span></div>
+ <div class="rd"><span class="n cve">3</span><span class="k">CVE</span></div>
+ <div class="rd"><span class="n">5</span><span class="k">AUR stale</span></div>
+ <span class="msg"><span class="lamp red" style="width:8px;height:8px"></span> Security advisories present — updates run through the workflow, never the doctor.</span>
+ <span class="spacer"></span>
+ <button class="key red">RUN WORKFLOW</button>
+ </div>
+
+ <!-- ===== OVERVIEW: all categories at a glance ===== -->
+ <div class="ovhead"><span class="engrave">Overview<span class="cnt">· 8 systems</span></span></div>
+ <div class="overview" id="overview"></div>
+
+ <!-- ===== DRILL-DOWN CATEGORY SECTIONS ===== -->
+ <div class="controls-row">
+ <button class="key sm" onclick="allCats(true)">EXPAND ALL</button>
+ <button class="key sm" onclick="allCats(false)">COLLAPSE ALL</button>
+ <span class="hint" style="margin:0 0 0 6px">click any category header — or its overview tile — to drill in</span>
+ </div>
+
+ <!-- STORAGE -->
+ <div class="cat plate open" id="cat-storage">
+ <div class="cathead" onclick="toggleCat('storage')">
+ <span class="chev">▸</span><span class="lamp red"></span>
+ <span class="nm">Storage &amp; Filesystem</span>
+ <span class="cnt"><span class="att crit">3 attention</span> · 6 ok</span>
+ </div>
+ <div class="catbody">
+ <div class="heroes">
+ <div class="inst s3">
+ <div class="cap">Disk usage</div>
+ <div class="val"><span class="readout">69<small>%</small></span></div>
+ <div class="bar"><span style="width:69%"></span></div>
+ <div class="sub">root · btrfs · thr 80 / 90</div>
+ </div>
+ <div class="inst s3">
+ <button class="key sm">CLEAN</button>
+ <div class="cap"><span class="lamp gold"></span> Package cache</div>
+ <div class="val"><span class="readout">8.8<small> GB</small></span></div>
+ <div class="bar warn"><span style="width:88%"></span><span class="tk" style="left:100%"></span></div>
+ <div class="sub">Auto · threshold ~10 GB</div>
+ </div>
+ <div class="inst s3">
+ <button class="key sm">SCRUB</button>
+ <div class="cap"><span class="lamp gold"></span> btrfs scrub</div>
+ <div style="display:flex;justify-content:center;margin-top:auto">
+ <span class="ring" style="--p:62;--rc:var(--amber)"><b>34</b><small>days</small></span>
+ </div>
+ <div class="sub" style="text-align:center">past 30d cadence</div>
+ </div>
+ <div class="inst s3">
+ <button class="key sm red">ENABLE</button>
+ <div class="cap"><span class="lamp red"></span> fstrim.timer</div>
+ <div class="val"><span class="readout" style="color:var(--fail)">OFF</span></div>
+ <div class="sub">Confirm · SSD discard disabled</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">SMART</span><span class="what">PASSED</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">SMART wear</span><span class="what">0%</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">device errors</span><span class="what">0 / 0</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">btrfs unalloc</span><span class="what">118 GiB</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">pacman integrity</span><span class="what">clean</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">deep-trim</span><span class="what"><button class="key sm">DEEP TRIM</button> keep 3</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- PACKAGES -->
+ <div class="cat plate open" id="cat-packages">
+ <div class="cathead" onclick="toggleCat('packages')">
+ <span class="chev">▸</span><span class="lamp gold"></span>
+ <span class="nm">Packages &amp; Security</span>
+ <span class="cnt"><span class="att">2 attention</span> · 2 ok · updates above</span>
+ </div>
+ <div class="catbody">
+ <div class="heroes">
+ <div class="inst s3">
+ <button class="key sm">REVIEW</button>
+ <div class="cap"><span class="lamp gold"></span> Orphans</div>
+ <div class="val"><span class="readout">13</span></div>
+ <div class="sub">Confirm · unowned pkgs</div>
+ </div>
+ <div class="inst s3">
+ <button class="key sm">REVIEW</button>
+ <div class="cap"><span class="lamp gold"></span> .pacnew files</div>
+ <div class="val"><span class="readout">2</span></div>
+ <div class="sub">Confirm · config merges</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">keyring age</span><span class="what"><button class="key sm">REFRESH</button> 12d</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">reboot required</span><span class="what">no</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- SYSTEMD -->
+ <div class="cat plate open" id="cat-systemd">
+ <div class="cathead" onclick="toggleCat('systemd')">
+ <span class="chev">▸</span><span class="lamp gold"></span>
+ <span class="nm">systemd &amp; Boot</span>
+ <span class="cnt"><span class="att">2 attention</span> · 2 ok</span>
+ </div>
+ <div class="catbody">
+ <div class="heroes">
+ <div class="inst s3">
+ <button class="key sm">WORKFLOW</button>
+ <div class="cap"><span class="lamp gold"></span> Failed units</div>
+ <div class="val"><span class="readout">1</span></div>
+ <div class="sub">Workflow · systemd</div>
+ </div>
+ <div class="inst s3">
+ <button class="key sm">ENABLE</button>
+ <div class="cap"><span class="lamp gold"></span> Maint timers</div>
+ <div class="val"><span class="readout">4<small>/5</small></span></div>
+ <div class="sub">Confirm · one not firing</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">is-system-running</span><span class="what">running</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">kernel taint</span><span class="what">0</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- LOGS -->
+ <div class="cat plate open" id="cat-logs">
+ <div class="cathead" onclick="toggleCat('logs')">
+ <span class="chev">▸</span><span class="lamp gold"></span>
+ <span class="nm">Logs &amp; Coredumps</span>
+ <span class="cnt"><span class="att">1 attention</span> · 4 ok</span>
+ </div>
+ <div class="catbody">
+ <div class="heroes">
+ <div class="inst s3">
+ <button class="key sm">CLEAR</button>
+ <div class="cap"><span class="lamp gold"></span> Coredumps 7d</div>
+ <div class="val"><span class="readout">18</span></div>
+ <div class="sub">Auto · clearable</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">journald size</span><span class="what"><button class="key sm">VACUUM</button> 1.2 GB</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">app-log cleanup</span><span class="what"><button class="key sm">RUN</button> ok</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">journal errors</span><span class="what">12 real</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">kernel/hw events</span><span class="what">clean</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- MEMORY/THERMAL/POWER -->
+ <div class="cat plate open" id="cat-power">
+ <div class="cathead" onclick="toggleCat('power')">
+ <span class="chev">▸</span><span class="lamp gold"></span>
+ <span class="nm">Memory · Thermal · Power</span>
+ <span class="cnt"><span class="att">1 attention</span> · 4 ok</span>
+ </div>
+ <div class="catbody">
+ <div class="heroes">
+ <div class="inst s5">
+ <div class="cap"><span class="lamp"></span> Temperatures</div>
+ <div class="gaugepair">
+ <div class="g"><span class="ring" style="--p:61;--rc:var(--pass)"><b>61°</b></span><span class="lb">CPU</span></div>
+ <div class="g"><span class="ring" style="--p:54;--rc:var(--pass)"><b>54°</b></span><span class="lb">NVMe</span></div>
+ </div>
+ </div>
+ <div class="inst s4">
+ <div class="cap"><span class="lamp"></span> Memory free</div>
+ <div class="val"><span class="readout">104<small> GB</small></span></div>
+ <div class="bar"><span style="width:83%"></span></div>
+ <div class="sub">of 125 GB · 0 OOM</div>
+ </div>
+ <div class="inst s3">
+ <div class="cap"><span class="lamp gold"></span> Unclean boot</div>
+ <div class="val"><span class="readout" style="color:var(--amber)">75<small>%</small></span></div>
+ <div class="bar warn"><span style="width:75%"></span></div>
+ <div class="sub">Workflow · investigate</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">swap / zram</span><span class="what">16 GiB</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">thermal throttle</span><span class="what">no</span></div>
+ <div class="lrow"><span class="lamp off"></span><span class="who">battery</span><span class="what">n/a · desktop</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- SERVICES -->
+ <div class="cat plate open" id="cat-services">
+ <div class="cathead" onclick="toggleCat('services')">
+ <span class="chev">▸</span><span class="lamp gold"></span>
+ <span class="nm">Services &amp; Backups</span>
+ <span class="cnt"><span class="att">1 attention</span> · 3 ok</span>
+ </div>
+ <div class="catbody">
+ <div class="heroes">
+ <div class="inst s3">
+ <button class="key sm">PRUNE</button>
+ <div class="cap"><span class="lamp gold"></span> Docker reclaim</div>
+ <div class="val"><span class="readout">3<small> GB</small></span></div>
+ <div class="sub">Confirm · reclaimable</div>
+ </div>
+ </div>
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">rsyncshot backup</span><span class="what">3h ago</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">docker stopped</span><span class="what">2</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">cron</span><span class="what">ok</span></div>
+ <div class="lrow"><span class="lamp off"></span><span class="who">libvirt VMs</span><span class="what">off</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- SNAPSHOTS (collapsed by default — all green) -->
+ <div class="cat plate" id="cat-snapshots">
+ <div class="cathead" onclick="toggleCat('snapshots')">
+ <span class="chev">▸</span><span class="lamp"></span>
+ <span class="nm">Snapshots</span>
+ <span class="cnt"><span class="okc" style="color:var(--pass)">all clear · 2 ✓</span></span>
+ </div>
+ <div class="catbody">
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">snapper count</span><span class="what"><button class="key sm">PRUNE</button> 42 · retention ok</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">snapshot timer</span><span class="what">active</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- NETWORK (collapsed by default — all green) -->
+ <div class="cat plate" id="cat-network">
+ <div class="cathead" onclick="toggleCat('network')">
+ <span class="chev">▸</span><span class="lamp"></span>
+ <span class="nm">Network &amp; Posture</span>
+ <span class="cnt"><span class="okc" style="color:var(--pass)">all clear · 6 ✓</span></span>
+ </div>
+ <div class="catbody">
+ <div class="strip">
+ <div class="lrow"><span class="lamp"></span><span class="who">firewall</span><span class="what">active</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">unexpected listeners</span><span class="what">3</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">tailscale</span><span class="what">4/4</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">fail2ban</span><span class="what">active</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">NTP sync</span><span class="what">synced</span></div>
+ <div class="lrow"><span class="lamp"></span><span class="who">DNS / NM</span><span class="what">ok</span></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- ===== OUTPUT WELL (doctor running) ===== -->
+ <div class="plate owell" id="owell" style="display:none">
+ <div class="oh"><span>MAINT · <span class="l">ratio</span> · CLEANING <span class="lamp busy"></span></span>
+ <span style="color:var(--dim);font-size:11px">4 Auto actions</span></div>
+ <div class="ostep"><span class="lamp busy"></span><span><b>cache trim</b> <span class="ev">running…</span></span></div>
+ <div class="ostep"><span class="lamp"></span><span><b>journal vacuum</b> <span class="ev">done · reclaimed 0.9 GB</span></span></div>
+ <div class="ostep"><span class="lamp"></span><span><b>coredump clear</b> <span class="ev">done · 12 cleared</span></span></div>
+ <div class="ostep queued"><span class="lamp off"></span><span><b>app-log cleanup</b> <span class="ev">queued</span></span></div>
+ <div class="ofoot"><button class="key" onclick="document.getElementById('owell').style.display='none'">DONE</button></div>
+ </div>
+
+ <div class="footnote">
+ Two levels: the <i>Overview</i> grid is every system at a glance — click a tile to jump to and open its section.
+ Each <i>category</i> below is a drill-down you expand or collapse (click the header, or use Expand/Collapse all).
+ All-green categories (Snapshots, Network) start collapsed — on a fully-healthy day every section collapses and the
+ console is the masthead + overview. Verdict lamp reads worst <i>diagnostic</i> state only — the fstrim fail and the
+ 3 CVEs are actionable/updates, so the box still reads HEALTHY.
+ </div>
+
+</div>
+
+<script>
+const CATS = [
+ {id:'storage', name:'Storage & FS', cls:'crit', att:'3', ok:'6', crit:true},
+ {id:'packages', name:'Packages & Sec', cls:'attn', att:'2', ok:'2'},
+ {id:'systemd', name:'systemd & Boot', cls:'attn', att:'2', ok:'2'},
+ {id:'logs', name:'Logs & Cores', cls:'attn', att:'1', ok:'4'},
+ {id:'power', name:'Mem·Therm·Power', cls:'attn', att:'1', ok:'4'},
+ {id:'services', name:'Services & Backup', cls:'attn', att:'1', ok:'3'},
+ {id:'snapshots',name:'Snapshots', cls:'clear', att:'0', ok:'2'},
+ {id:'network', name:'Network & Posture',cls:'clear', att:'0', ok:'6'},
+];
+const lampFor = c => c.cls==='crit'?'red':c.cls==='attn'?'gold':'';
+// build overview station tiles
+const ov = document.getElementById('overview');
+CATS.forEach(c=>{
+ const el=document.createElement('div');
+ el.className='plate station '+c.cls;
+ const att = c.att!=='0'
+ ? `<span class="att ${c.crit?'crit':''}">${c.att} attention</span> · <span class="okc">${c.ok} ok</span>`
+ : `<span class="okc">all clear · ${c.ok} ✓</span>`;
+ el.innerHTML =
+ `<div class="top"><span class="lamp ${lampFor(c)}"></span><span class="nm">${c.name}</span><span class="chev">▸</span></div>
+ <div class="st">${att}</div>`;
+ el.onclick=()=>openCat(c.id);
+ ov.appendChild(el);
+});
+function toggleCat(id){ document.getElementById('cat-'+id).classList.toggle('open'); }
+function openCat(id){
+ const el=document.getElementById('cat-'+id);
+ el.classList.add('open');
+ el.scrollIntoView({behavior:'smooth',block:'center'});
+}
+function allCats(open){ CATS.forEach(c=>{
+ document.getElementById('cat-'+c.id).classList.toggle('open',open); }); }
+function runDoctor(){ document.getElementById('owell').style.display='block';
+ document.getElementById('owell').scrollIntoView({behavior:'smooth',block:'center'}); }
+</script>
+</body>
+</html>