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, 364 insertions, 0 deletions

diff --git a/docs/prototypes/2026-07-07-maint-console-D-doctor-first.html b/docs/prototypes/2026-07-07-maint-console-D-doctor-first.html
new file mode 100644
index 0000000..7f2a86e
--- /dev/null
+++ b/docs/prototypes/2026-07-07-maint-console-D-doctor-first.html
@@ -0,0 +1,364 @@
+<!-- Approach D — Doctor-first maintenance console mockup (ratio) -->
+<title>MAINT · ratio — Approach D Doctor-first</title>
+<style>
+  :root{
+    --bg:#0a0c0d; --surface:#100f0f; --gold:#dab53d; --silver:#bfc4d0;
+    --dim:#7c838a; --cream:#f3e7c5; --slate:#424f5e; --slate-h:#54677d;
+    --inset:#0a0c0d; --line:#2c2f32;
+    --olive:#74932f; --amber:#dab53d; --terra:#cb6b4d;
+  }
+  *{box-sizing:border-box}
+  html,body{margin:0;padding:0}
+  body{
+    background:var(--bg);
+    color:var(--silver);
+    font-family:"BerkeleyMono Nerd Font", ui-monospace, monospace;
+    font-size:13px; line-height:1.45;
+    display:flex; justify-content:center;
+    padding:28px 16px 60px;
+    -webkit-font-smoothing:antialiased;
+  }
+  .console{
+    width:1000px; 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:12px}
+  .head .title{color:var(--cream); font-size:15px; letter-spacing:.06em; font-weight:700}
+  .head .title .sub{display:block; color:var(--dim); font-size:11px; font-weight:400; letter-spacing:.02em; margin-top:2px}
+  .verdict{font-size:14px; font-weight:700; letter-spacing:.03em}
+  .verdict .lamp{font-size:13px}
+
+  .rule{height:1px; background:var(--line); border:0; margin:14px 0}
+
+  /* ---- lamps ---- */
+  .lamp{font-style:normal}
+  .ok{color:var(--olive)}
+  .warn{color:var(--amber)}
+  .fail{color:var(--terra)}
+  .na{color:var(--dim)}
+  .run{color:var(--amber)}
+
+  /* ---- generic inset ---- */
+  .inset{background:var(--inset); border:1px solid var(--line); border-radius:10px; padding:14px}
+  .sec-h{color:var(--gold); font-weight:700; letter-spacing:.05em; font-size:12px; text-transform:uppercase; margin:0 0 10px}
+
+  /* ---- buttons ---- */
+  button{font-family:inherit; cursor:pointer}
+  .btn{
+    background:var(--slate); color:var(--cream); border:1px solid #33414d;
+    border-radius:10px; padding:9px 16px; font-size:12px; letter-spacing:.03em;
+    transition:background .12s;
+  }
+  .btn:hover{background:var(--slate-h)}
+  .btn-lever{padding:4px 10px; font-size:11px; border-radius:8px}
+
+  /* ================= HERO ================= */
+  .hero{
+    background:linear-gradient(180deg,#141312,#0d0c0c);
+    border:1px solid var(--line); border-radius:14px;
+    padding:22px 22px 24px; text-align:center;
+  }
+  .hero .stethoscope{font-size:26px; color:var(--gold); letter-spacing:.3em; margin-bottom:6px}
+  .hero .stat-line{color:var(--silver); font-size:13px; letter-spacing:.04em}
+  .hero .stat-line b{color:var(--cream); font-weight:700}
+  .hero .stat-line .fail{font-weight:700}
+
+  /* summary lamp strip */
+  .strip{display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin:14px auto 4px; max-width:720px}
+  .strip .dot{font-size:11px; line-height:1}
+
+  .dbig{display:flex; gap:16px; justify-content:center; margin-top:20px; flex-wrap:wrap}
+  .doc-btn{
+    background:var(--slate); color:var(--cream);
+    border:1px solid #33414d; border-radius:12px;
+    padding:16px 26px; min-width:280px; text-align:center;
+    transition:background .12s;
+  }
+  .doc-btn:hover{background:var(--slate-h)}
+  .doc-btn .big{display:block; font-size:17px; font-weight:700; letter-spacing:.08em; color:var(--cream)}
+  .doc-btn .sub{display:block; font-size:11px; color:#cdd7cf; margin-top:6px; letter-spacing:.02em; opacity:.85}
+  .doc-btn.primary{border-color:var(--gold); box-shadow:0 0 0 1px rgba(218,181,61,.25) inset}
+  .doc-btn.primary .big{color:var(--cream)}
+
+  .hero-foot{color:var(--dim); font-size:11px; margin-top:18px; letter-spacing:.02em}
+
+  /* ================= DETAILS DISCLOSURE ================= */
+  .disc{margin-top:16px}
+  .disc-head{
+    display:flex; align-items:center; gap:8px;
+    color:var(--gold); font-weight:700; font-size:12px; letter-spacing:.05em;
+    cursor:pointer; user-select:none; padding:4px 2px;
+  }
+  .disc-head .caret{transition:transform .12s}
+  .disc-body{margin-top:12px}
+
+  .domain{margin-bottom:14px}
+  .domain-h{color:var(--dim); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px; border-bottom:1px solid var(--line); padding-bottom:4px}
+  table.metrics{width:100%; border-collapse:collapse}
+  table.metrics td{padding:3px 8px; vertical-align:middle; white-space:nowrap}
+  table.metrics tr:hover{background:rgba(66,79,94,.14)}
+  td.mlamp{width:16px; text-align:center}
+  td.mname{color:var(--silver)}
+  td.mval{color:var(--dim); text-align:right; width:150px}
+  td.mlever{width:110px; text-align:right}
+  .auto-tag{font-size:9px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase; padding-right:6px}
+
+  /* ================= UPDATES QUARANTINE ================= */
+  .updates{margin-top:16px; border:1px dashed #4a4535; background:#12100c}
+  .updates .sec-h{color:var(--amber)}
+  .updates-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
+  .updates-info b{color:var(--cream)}
+  .updates-info .cve{color:var(--terra); font-weight:700}
+  .updates-info .pkgs{color:var(--dim)}
+  .updates-note{color:var(--dim); font-size:10px; margin-top:8px; letter-spacing:.02em}
+
+  /* ================= OUTPUT WALL ================= */
+  .wall{
+    margin-top:18px;
+    background:#0b0a09; border:1px solid var(--gold); border-radius:14px;
+    padding:18px 20px;
+  }
+  .wall-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
+  .wall-h .t{color:var(--gold); font-weight:700; letter-spacing:.06em; font-size:13px}
+  .wall-h .meta{color:var(--dim); font-size:11px}
+  .wall-sub{color:var(--dim); font-size:11px; margin-bottom:12px}
+  .prog{height:6px; background:#1a1712; border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-bottom:14px}
+  .prog i{display:block; height:100%; width:62%; background:linear-gradient(90deg,#74932f,#dab53d)}
+  .stream{font-size:12.5px; line-height:1.9}
+  .srow{display:flex; align-items:baseline; gap:10px}
+  .srow .l{width:14px; text-align:center; flex:0 0 auto}
+  .srow .task{color:var(--silver); flex:0 0 200px}
+  .srow .status{color:var(--dim)}
+  .srow.done .task{color:var(--silver)}
+  .srow.done .status{color:var(--olive)}
+  .srow.run .task{color:var(--cream)}
+  .srow.run .status{color:var(--amber)}
+  .srow.queued .task{color:var(--dim)}
+  .srow.queued .status{color:var(--dim)}
+  .srow .result{color:var(--cream); opacity:.85}
+  .wall-foot{display:flex; justify-content:space-between; align-items:center; margin-top:16px}
+  .wall-foot .summary{color:var(--dim); font-size:11px}
+  .wall-foot .summary b{color:var(--olive)}
+
+  .stagelabel{color:var(--dim); font-size:10px; letter-spacing:.18em; text-transform:uppercase; margin:26px 0 8px; text-align:center}
+</style>
+
+<div class="console">
+
+  <!-- ================= HEADER ================= -->
+  <div class="head">
+    <div class="title">MAINT · ratio
+      <span class="sub">Approach D — Doctor-first</span>
+    </div>
+    <div class="verdict ok"><span class="lamp">●</span> healthy</div>
+  </div>
+  <hr class="rule">
+
+  <div class="stagelabel">— resting state · the doctor is what you see first —</div>
+
+  <!-- ================= HERO (resting) ================= -->
+  <div class="hero">
+    <div class="stethoscope">✚ ✚ ✚</div>
+    <div class="stat-line">
+      <b>ratio</b> · <span class="fail">1 fail</span> · <span class="warn">8 warnings</span> · <span class="ok">34 ok</span>
+    </div>
+
+    <!-- summary lamp strip: one tiny lamp per metric -->
+    <div class="strip" title="one lamp per metric, colored by state">
+      <!-- 44 dots; mostly olive, some amber, one terracotta -->
+      <span class="dot warn">●</span><span class="dot ok">●</span><span class="dot ok">●</span>
+      <span class="dot warn">●</span><span class="dot ok">●</span><span class="dot ok">●</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span><span class="dot fail">●</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span><span class="dot ok">●</span>
+      <span class="dot warn">●</span><span class="dot warn">●</span><span class="dot ok">●</span>
+      <span class="dot warn">●</span><span class="dot fail">●</span><span class="dot ok">●</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span><span class="dot warn">●</span>
+      <span class="dot warn">●</span><span class="dot ok">●</span><span class="dot warn">●</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span><span class="dot ok">●</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span><span class="dot ok">●</span>
+      <span class="dot ok">●</span><span class="dot na">○</span><span class="dot warn">●</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span><span class="dot ok">●</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span><span class="dot ok">●</span>
+      <span class="dot warn">●</span><span class="dot ok">●</span><span class="dot na">○</span>
+      <span class="dot ok">●</span><span class="dot ok">●</span>
+    </div>
+
+    <!-- big doctor actions -->
+    <div class="dbig">
+      <button class="doc-btn primary" onclick="document.getElementById('wall').scrollIntoView({behavior:'smooth'})">
+        <span class="big">CLEAN UP</span>
+        <span class="sub">4 safe tasks · reclaims ~2 GB</span>
+      </button>
+      <button class="doc-btn">
+        <span class="big">REVIEW &amp; FIX</span>
+        <span class="sub">9 items need a look</span>
+      </button>
+    </div>
+
+    <div class="hero-foot">
+      "Should I run the doctor?" — press Clean up for the 4 unattended tasks, or Review &amp; fix to preview the 9 confirm items.
+    </div>
+  </div>
+
+  <!-- ================= DETAILS DISCLOSURE (shown expanded statically) ================= -->
+  <div class="disc inset">
+    <div class="disc-head" onclick="var b=document.getElementById('discbody'); var c=this.querySelector('.caret'); if(b.style.display==='none'){b.style.display='block'; c.textContent='▾';} else {b.style.display='none'; c.textContent='▸';}">
+      <span class="caret">▾</span> 44 metrics · the fine print
+    </div>
+    <div class="disc-body" id="discbody">
+
+      <!-- STORAGE / FILESYSTEM -->
+      <div class="domain">
+        <div class="domain-h">Storage &amp; filesystem</div>
+        <table class="metrics">
+          <tr><td class="mlamp warn">●</td><td class="mname">cache</td><td class="mval">8.8 GB</td><td class="mlever"><span class="auto-tag">auto</span><button class="btn btn-lever">Clean</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">deep-trim keep-3</td><td class="mval">ready</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Deep trim</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">disk</td><td class="mval">69%</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">btrfs unalloc</td><td class="mval">118 GiB</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">btrfs scrub</td><td class="mval">34 d ago</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Scrub</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">btrfs device-err</td><td class="mval">0 / 0</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">SMART</td><td class="mval">PASSED</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">SMART wear</td><td class="mval">0%</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp fail">●</td><td class="mname">fstrim.timer</td><td class="mval">off</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Enable</button></td></tr>
+        </table>
+      </div>
+
+      <!-- PACKAGES -->
+      <div class="domain">
+        <div class="domain-h">Packages &amp; snapshots</div>
+        <table class="metrics">
+          <tr><td class="mlamp ok">●</td><td class="mname">pacman integrity</td><td class="mval">clean</td><td class="mlever"><span class="auto-tag">workflow</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">snapper count</td><td class="mval">42</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Prune</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">snapshot timer</td><td class="mval">active</td><td class="mlever"><span class="auto-tag">confirm</span>—</td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">orphans</td><td class="mval">13</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Review</button></td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">.pacnew</td><td class="mval">2</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Review</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">keyring</td><td class="mval">12 d</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Refresh</button></td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">pending updates</td><td class="mval">47</td><td class="mlever"><span class="auto-tag">workflow</span>updates</td></tr>
+          <tr><td class="mlamp fail">●</td><td class="mname">arch-audit</td><td class="mval">3 CVE</td><td class="mlever"><span class="auto-tag">workflow</span>updates</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">AUR staleness</td><td class="mval">5</td><td class="mlever"><span class="auto-tag">workflow</span>updates</td></tr>
+        </table>
+      </div>
+
+      <!-- SYSTEM STATE -->
+      <div class="domain">
+        <div class="domain-h">System state</div>
+        <table class="metrics">
+          <tr><td class="mlamp ok">●</td><td class="mname">reboot-required</td><td class="mval">no</td><td class="mlever"><span class="auto-tag">human</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">is-system-running</td><td class="mval">running</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">failed units</td><td class="mval">1</td><td class="mlever"><span class="auto-tag">workflow</span><button class="btn btn-lever">Run</button></td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">maintenance timers</td><td class="mval">4 / 5</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Enable</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">kernel taint</td><td class="mval">0</td><td class="mlever">—</td></tr>
+        </table>
+      </div>
+
+      <!-- LOGS -->
+      <div class="domain">
+        <div class="domain-h">Logs &amp; coredumps</div>
+        <table class="metrics">
+          <tr><td class="mlamp warn">●</td><td class="mname">coredumps</td><td class="mval">18 / 7 d</td><td class="mlever"><span class="auto-tag">auto</span><button class="btn btn-lever">Clear</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">journald</td><td class="mval">1.2 GB</td><td class="mlever"><span class="auto-tag">auto</span><button class="btn btn-lever">Vacuum</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">app-log cleanup</td><td class="mval">ok</td><td class="mlever"><span class="auto-tag">auto</span><button class="btn btn-lever">Run</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">journal errors</td><td class="mval">12 real</td><td class="mlever"><span class="auto-tag">workflow</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">kernel/hw events</td><td class="mval">clean</td><td class="mlever">—</td></tr>
+        </table>
+      </div>
+
+      <!-- RESOURCES -->
+      <div class="domain">
+        <div class="domain-h">Resources &amp; thermals</div>
+        <table class="metrics">
+          <tr><td class="mlamp ok">●</td><td class="mname">memory</td><td class="mval">104 GB free</td><td class="mlever"><span class="auto-tag">workflow</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">swap / zram</td><td class="mval">16 GiB</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">temps</td><td class="mval">61° / 54°</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">thermal throttle</td><td class="mval">no</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp na">○</td><td class="mname na">battery</td><td class="mval">n/a</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">unclean-shutdown</td><td class="mval">75%</td><td class="mlever"><span class="auto-tag">workflow</span>—</td></tr>
+        </table>
+      </div>
+
+      <!-- NETWORK / SECURITY -->
+      <div class="domain">
+        <div class="domain-h">Network &amp; security</div>
+        <table class="metrics">
+          <tr><td class="mlamp ok">●</td><td class="mname">DNS / NM</td><td class="mval">ok</td><td class="mlever"><span class="auto-tag">workflow</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">firewall</td><td class="mval">active</td><td class="mlever"><span class="auto-tag">confirm</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">listeners</td><td class="mval">3</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">tailscale</td><td class="mval">4 / 4</td><td class="mlever"><span class="auto-tag">confirm</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">fail2ban</td><td class="mval">active</td><td class="mlever"><span class="auto-tag">confirm</span>—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">NTP</td><td class="mval">synced</td><td class="mlever"><span class="auto-tag">confirm</span>—</td></tr>
+        </table>
+      </div>
+
+      <!-- SERVICES / BACKUP -->
+      <div class="domain">
+        <div class="domain-h">Backup &amp; services</div>
+        <table class="metrics">
+          <tr><td class="mlamp ok">●</td><td class="mname">rsyncshot</td><td class="mval">3 h ago</td><td class="mlever"><span class="auto-tag">workflow</span>—</td></tr>
+          <tr><td class="mlamp warn">●</td><td class="mname">docker reclaim</td><td class="mval">3 GB</td><td class="mlever"><span class="auto-tag">confirm</span><button class="btn btn-lever">Prune</button></td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">docker stopped</td><td class="mval">2</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp na">○</td><td class="mname na">libvirt</td><td class="mval">off</td><td class="mlever">—</td></tr>
+          <tr><td class="mlamp ok">●</td><td class="mname">cron</td><td class="mval">ok</td><td class="mlever"><span class="auto-tag">confirm</span>—</td></tr>
+        </table>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- ================= UPDATES QUARANTINE ================= -->
+  <div class="updates inset">
+    <div class="sec-h">Updates — quarantined from the doctor</div>
+    <div class="updates-row">
+      <div class="updates-info">
+        <b>47 pending</b> · <span class="cve">3 CVE</span> · <span class="pkgs">mesa, linux-lts, systemd</span>
+      </div>
+      <button class="btn">Run workflow</button>
+    </div>
+    <div class="updates-note">Updates run through the workflow, never the doctor. Clean up will not touch these.</div>
+  </div>
+
+  <div class="stagelabel">— running state · press CLEAN UP and the hero becomes the output wall —</div>
+
+  <!-- ================= OUTPUT WALL (the star) ================= -->
+  <div class="wall" id="wall">
+    <div class="wall-h">
+      <span class="t">✚ DOCTOR · CLEAN UP</span>
+      <span class="meta">4 tasks · unattended · started 14:22:07</span>
+    </div>
+    <div class="wall-sub">Running the 4 safe (auto) tasks. Confirm items and updates are untouched.</div>
+    <div class="prog"><i></i></div>
+
+    <div class="stream">
+      <div class="srow run">
+        <span class="l run">◐</span>
+        <span class="task">cache trim</span>
+        <span class="status">running… 8.8 GB → clearing</span>
+      </div>
+      <div class="srow done">
+        <span class="l ok">●</span>
+        <span class="task">journald vacuum</span>
+        <span class="status">done · <span class="result">reclaimed 0.9 GB</span></span>
+      </div>
+      <div class="srow done">
+        <span class="l ok">●</span>
+        <span class="task">coredump clear</span>
+        <span class="status">done · <span class="result">12 cleared</span></span>
+      </div>
+      <div class="srow queued">
+        <span class="l na">○</span>
+        <span class="task">app-log cleanup</span>
+        <span class="status">queued</span>
+      </div>
+    </div>
+
+    <div class="wall-foot">
+      <span class="summary">3 of 4 complete · <b>reclaimed 0.9 GB</b> so far · ~1.1 GB pending</span>
+      <button class="btn">Done</button>
+    </div>
+  </div>
+
+</div>