aboutsummaryrefslogtreecommitdiff
path: root/docs/prototypes/2026-07-07-maint-console-D-doctor-first.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/prototypes/2026-07-07-maint-console-D-doctor-first.html')
-rw-r--r--docs/prototypes/2026-07-07-maint-console-D-doctor-first.html364
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>