docs: add maintenance console design + interactive prototypes

The design doc replaces the install-health framing in system-monitor-design-ideas.org with a maintenance console: dense metric subpanels behind a persistent selector, a doctor that streams into a results wall, determinate remedies only (guard-armed updates, curation lifecycles for noise, listeners, containers, and orphans), rotary band selectors on the tall subpanels, and a CLI-first build with a four-layer test strategy. Every decision is dated in the doc.

Prototypes A-E5 keep the exploration path: five divergent layouts converging into E5, a fully interactive simulation whose GOOD/BAD snapshots become the build's test fixtures.

todo.org gains the spec-create task, the panel keybinding-family task, and scope notes on the net/bt doctor retrofit.

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>