aboutsummaryrefslogtreecommitdiff
path: root/docs/prototypes/2026-07-07-maint-console-C-severity-feed.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/prototypes/2026-07-07-maint-console-C-severity-feed.html')
-rw-r--r--docs/prototypes/2026-07-07-maint-console-C-severity-feed.html410
1 files changed, 410 insertions, 0 deletions
diff --git a/docs/prototypes/2026-07-07-maint-console-C-severity-feed.html b/docs/prototypes/2026-07-07-maint-console-C-severity-feed.html
new file mode 100644
index 0000000..90182d6
--- /dev/null
+++ b/docs/prototypes/2026-07-07-maint-console-C-severity-feed.html
@@ -0,0 +1,410 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>MAINT · ratio — Approach C · Severity feed</title>
+<style>
+ :root{
+ --page:#0a0c0d; --surface:#100f0f; --inset:#0a0c0d;
+ --gold:#dab53d; --silver:#bfc4d0; --dim:#7c838a; --cream:#f3e7c5;
+ --slate:#424f5e; --slate-hi:#54677d; --line:#2c2f32;
+ --ok:#74932f; --warn:#dab53d; --fail:#cb6b4d;
+ }
+ *{box-sizing:border-box}
+ html,body{margin:0;padding:0}
+ body{
+ background:var(--page);
+ color:var(--silver);
+ font-family:"BerkeleyMono Nerd Font","Berkeley Mono",monospace;
+ font-size:13px; line-height:1.45;
+ display:flex; flex-direction:column; align-items: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;
+ margin-bottom:20px;
+ }
+
+ /* ---- header ---- */
+ .top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
+ .title{font-weight:700; color:var(--cream); font-size:16px; letter-spacing:.5px}
+ .title .sub-host{color:var(--dim); font-weight:400; font-size:13px}
+ .verdict{font-weight:700; font-size:14px; color:var(--ok)}
+ .subtitle{color:var(--dim); font-size:12px; margin-top:2px; letter-spacing:.3px}
+
+ /* ---- action bar ---- */
+ .actionbar{
+ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
+ margin:14px 0 6px;
+ }
+ .btn{
+ background:var(--slate); color:var(--cream);
+ border:1px solid #2f3a45; border-radius:10px;
+ padding:7px 14px; font-family:inherit; font-size:12px; font-weight:600;
+ cursor:pointer; letter-spacing:.3px;
+ }
+ .btn:hover{background:var(--slate-hi)}
+ .btn.small{padding:4px 10px; font-size:11px; font-weight:500}
+ .btn.wide{padding:7px 18px}
+ .spacer{flex:1 1 auto}
+
+ /* quarantined updates pill */
+ .updates-pill{
+ display:flex; align-items:center; gap:12px;
+ background:var(--inset); border:1px solid var(--line);
+ border-left:3px solid var(--warn);
+ border-radius:10px; padding:6px 8px 6px 12px;
+ }
+ .updates-pill .u-text{font-size:12px; color:var(--silver)}
+ .updates-pill .u-text b{color:var(--cream); font-weight:600}
+ .updates-pill .u-cve{color:var(--fail); font-weight:600}
+ .updates-pill .u-pkgs{color:var(--dim)}
+
+ /* ---- feed ---- */
+ .feed{margin-top:14px}
+ .band-head{
+ display:flex; align-items:center; gap:10px;
+ color:var(--gold); font-weight:700; font-size:12px;
+ letter-spacing:1.2px; text-transform:uppercase;
+ margin:16px 0 6px; padding-bottom:5px;
+ border-bottom:1px solid var(--line);
+ }
+ .band-head .count{color:var(--dim); font-weight:400; letter-spacing:.3px; text-transform:none}
+ .band-head .accent{
+ display:inline-block; width:8px; height:8px; border-radius:2px;
+ }
+ .band-fail .accent{background:var(--fail)}
+ .band-warn .accent{background:var(--warn)}
+ .band-ok .accent{background:var(--ok)}
+
+ .rows{
+ background:var(--inset); border:1px solid var(--line);
+ border-radius:10px; padding:4px 2px;
+ }
+
+ .row{
+ display:flex; align-items:center; gap:10px;
+ padding:6px 12px;
+ border-bottom:1px solid rgba(44,47,50,.5);
+ }
+ .row:last-child{border-bottom:none}
+ .row .lamp{flex:0 0 auto; font-size:13px; width:14px; text-align:center}
+ .row .name{flex:0 0 auto; color:var(--silver); white-space:nowrap}
+ .row .dots{
+ flex:1 1 auto; min-width:16px;
+ border-bottom:1px dotted #3a3f43;
+ transform:translateY(-3px);
+ margin:0 4px;
+ }
+ .row .value{flex:0 0 auto; color:var(--cream); white-space:nowrap; text-align:right}
+ .row .value.warnval{color:var(--warn)}
+ .row .value.failval{color:var(--fail)}
+ .row .chip{
+ flex:0 0 auto; width:64px; text-align:center;
+ font-size:10px; letter-spacing:.4px; text-transform:uppercase;
+ padding:2px 0; border-radius:6px; border:1px solid var(--line);
+ color:var(--dim);
+ }
+ .chip.auto{color:#a9c05a; border-color:#3c4a24}
+ .chip.confirm{color:var(--gold); border-color:#4a4023}
+ .chip.workflow{color:var(--slate-hi); border-color:#33414f}
+ .chip.human{color:var(--cream); border-color:#4a4436}
+ .chip.none{color:var(--dim); border-color:var(--line)}
+ .row .control{flex:0 0 auto; width:118px; text-align:right}
+ .row .control .lever{
+ background:var(--slate); color:var(--cream);
+ border:1px solid #2f3a45; border-radius:8px;
+ padding:3px 10px; font-family:inherit; font-size:11px; cursor:pointer;
+ }
+ .row .control .lever:hover{background:var(--slate-hi)}
+ .row .control .wflink{color:var(--slate-hi); font-size:11px; cursor:pointer}
+ .row .control .wflink:hover{color:var(--cream); text-decoration:underline}
+ .row .control .nolever{color:#4a5054; font-size:11px}
+
+ /* lamps */
+ .l-ok{color:var(--ok)}
+ .l-warn{color:var(--warn)}
+ .l-fail{color:var(--fail)}
+ .l-off{color:var(--dim)}
+ .l-prog{color:var(--warn)}
+
+ /* OK band quieting */
+ .band-ok-summary{
+ display:flex; align-items:center; gap:8px;
+ color:var(--dim); font-size:12px; cursor:pointer;
+ margin:16px 0 6px; padding-bottom:5px;
+ border-bottom:1px solid var(--line);
+ }
+ .band-ok-summary .tri{color:var(--gold)}
+ .band-ok .rows{opacity:.72}
+ .band-ok .row{padding:4px 12px}
+ .band-ok .row .name{color:var(--dim)}
+ .band-ok .row .value{color:var(--silver)}
+
+ /* ---- running capsule ---- */
+ .capsule{
+ width:1000px; max-width:100%;
+ background:var(--surface);
+ border:1px solid var(--gold);
+ border-radius:16px; padding:16px 18px;
+ }
+ .cap-head{
+ display:flex; align-items:center; justify-content:space-between;
+ color:var(--cream); font-weight:700; font-size:13px; letter-spacing:.5px;
+ margin-bottom:10px;
+ }
+ .cap-head .run{color:var(--warn)}
+ .wall{
+ background:var(--inset); border:1px solid var(--line); border-radius:10px;
+ padding:10px 14px; font-size:12px;
+ }
+ .wall .line{display:flex; align-items:center; gap:10px; padding:3px 0}
+ .wall .line .lamp{width:14px; text-align:center}
+ .wall .line .act{color:var(--silver)}
+ .wall .line .act .done{color:var(--dim)}
+ .wall .line .res{color:var(--ok); margin-left:auto}
+ .wall .line.queued .act{color:var(--dim)}
+ .cap-foot{display:flex; justify-content:flex-end; margin-top:12px}
+
+ .legend{
+ width:1000px; max-width:100%;
+ color:var(--dim); font-size:11px; line-height:1.6;
+ margin-top:16px; padding:0 4px;
+ }
+ .legend b{color:var(--silver); font-weight:600}
+</style>
+</head>
+<body>
+
+<div class="console">
+ <div class="top">
+ <div>
+ <div class="title">MAINT <span class="sub-host">· ratio</span></div>
+ <div class="subtitle">Approach C — Severity feed</div>
+ </div>
+ <div class="verdict">● healthy</div>
+ </div>
+
+ <!-- action bar -->
+ <div class="actionbar">
+ <button class="btn wide">Clean up <span style="color:var(--dim);font-weight:400">· 4 Auto</span></button>
+ <button class="btn wide">Review &amp; fix <span style="color:var(--dim);font-weight:400">· 15 Confirm</span></button>
+ <div class="spacer"></div>
+ <div class="updates-pill">
+ <span class="u-text"><b>47 pending</b> · <span class="u-cve">3 CVE</span> · <span class="u-pkgs">mesa, linux-lts</span></span>
+ <button class="btn small">Run workflow</button>
+ </div>
+ </div>
+
+ <div class="feed">
+
+ <!-- ===================== FAIL ===================== -->
+ <div class="band-head band-fail"><span class="accent"></span>Fail <span class="count">— act now · 2</span></div>
+ <div class="rows">
+ <div class="row">
+ <span class="lamp l-fail">●</span>
+ <span class="name">fstrim.timer</span>
+ <span class="dots"></span>
+ <span class="value failval">off</span>
+ <span class="chip confirm">Confirm</span>
+ <span class="control"><button class="lever">Enable</button></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-fail">●</span>
+ <span class="name">arch-audit</span>
+ <span class="dots"></span>
+ <span class="value failval">3 CVE</span>
+ <span class="chip workflow">Workflow</span>
+ <span class="control"><span class="wflink">→ workflow</span></span>
+ </div>
+ </div>
+
+ <!-- ===================== WARN ===================== -->
+ <div class="band-head band-warn"><span class="accent"></span>Warn <span class="count">— review · 13</span></div>
+ <div class="rows">
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">cache</span>
+ <span class="dots"></span>
+ <span class="value warnval">8.8&nbsp;GB</span>
+ <span class="chip auto">Auto</span>
+ <span class="control"><button class="lever">Clean</button></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">btrfs scrub</span>
+ <span class="dots"></span>
+ <span class="value warnval">34d ago</span>
+ <span class="chip confirm">Confirm</span>
+ <span class="control"><button class="lever">Scrub</button></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">orphans</span>
+ <span class="dots"></span>
+ <span class="value warnval">13</span>
+ <span class="chip confirm">Confirm</span>
+ <span class="control"><button class="lever">Review</button></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">.pacnew files</span>
+ <span class="dots"></span>
+ <span class="value warnval">2</span>
+ <span class="chip confirm">Confirm</span>
+ <span class="control"><button class="lever">Review</button></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">pending updates</span>
+ <span class="dots"></span>
+ <span class="value warnval">47</span>
+ <span class="chip workflow">Workflow</span>
+ <span class="control"><span class="wflink">→ workflow</span></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">failed units</span>
+ <span class="dots"></span>
+ <span class="value warnval">1</span>
+ <span class="chip workflow">Workflow</span>
+ <span class="control"><span class="wflink">→ workflow</span></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">maintenance timers</span>
+ <span class="dots"></span>
+ <span class="value warnval">4/5</span>
+ <span class="chip confirm">Confirm</span>
+ <span class="control"><button class="lever">Enable</button></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">coredumps</span>
+ <span class="dots"></span>
+ <span class="value warnval">18 / 7d</span>
+ <span class="chip auto">Auto</span>
+ <span class="control"><button class="lever">Clear</button></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">unclean-shutdown</span>
+ <span class="dots"></span>
+ <span class="value warnval">75%</span>
+ <span class="chip workflow">Workflow</span>
+ <span class="control"><span class="wflink">→ workflow</span></span>
+ </div>
+ <div class="row">
+ <span class="lamp l-warn">●</span>
+ <span class="name">docker reclaim</span>
+ <span class="dots"></span>
+ <span class="value warnval">3&nbsp;GB</span>
+ <span class="chip confirm">Confirm</span>
+ <span class="control"><button class="lever">Prune</button></span>
+ </div>
+ </div>
+
+ <!-- ===================== OK (quieted) ===================== -->
+ <div class="band-ok" id="okband">
+ <div class="band-ok-summary" onclick="var b=document.getElementById('okrows');b.style.display=b.style.display==='none'?'block':'none';this.querySelector('.tri').textContent=b.style.display==='none'?'▸':'▾';">
+ <span class="tri">▾</span>
+ <span style="color:var(--ok)">●</span>
+ <span>29 OK — clean, no action</span>
+ <span style="flex:1"></span>
+ <span style="color:#565c60">collapse</span>
+ </div>
+ <div class="rows" id="okrows">
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">deep-trim keep-3</span><span class="dots"></span><span class="value">available</span><span class="chip confirm">Confirm</span><span class="control"><button class="lever">Deep trim</button></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">disk usage</span><span class="dots"></span><span class="value">69%</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">btrfs unalloc</span><span class="dots"></span><span class="value">118&nbsp;GiB</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">btrfs device-err</span><span class="dots"></span><span class="value">0 / 0</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">SMART status</span><span class="dots"></span><span class="value">PASSED</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">SMART wear</span><span class="dots"></span><span class="value">0%</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">pacman integrity</span><span class="dots"></span><span class="value">clean</span><span class="chip workflow">Workflow</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">snapper count</span><span class="dots"></span><span class="value">42</span><span class="chip confirm">Confirm</span><span class="control"><button class="lever">Prune</button></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">snapshot timer</span><span class="dots"></span><span class="value">active</span><span class="chip confirm">Confirm</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">keyring</span><span class="dots"></span><span class="value">12d</span><span class="chip confirm">Confirm</span><span class="control"><button class="lever">Refresh</button></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">AUR staleness</span><span class="dots"></span><span class="value">5</span><span class="chip workflow">Workflow</span><span class="control"><span class="wflink">→ workflow</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">reboot-required</span><span class="dots"></span><span class="value">no</span><span class="chip human">Human</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">is-system-running</span><span class="dots"></span><span class="value">running</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">kernel taint</span><span class="dots"></span><span class="value">0</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">journald size</span><span class="dots"></span><span class="value">1.2&nbsp;GB</span><span class="chip auto">Auto</span><span class="control"><button class="lever">Vacuum</button></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">app-log cleanup</span><span class="dots"></span><span class="value">ok</span><span class="chip auto">Auto</span><span class="control"><button class="lever">Run</button></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">journal errors</span><span class="dots"></span><span class="value">12 real</span><span class="chip workflow">Workflow</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">kernel/hw events</span><span class="dots"></span><span class="value">clean</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">memory</span><span class="dots"></span><span class="value">104&nbsp;GB free</span><span class="chip workflow">Workflow</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">swap/zram</span><span class="dots"></span><span class="value">16&nbsp;GiB</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">temps</span><span class="dots"></span><span class="value">61° / 54°</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">thermal throttle</span><span class="dots"></span><span class="value">no</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">DNS / NM</span><span class="dots"></span><span class="value">ok</span><span class="chip workflow">Workflow</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">firewall</span><span class="dots"></span><span class="value">active</span><span class="chip confirm">Confirm</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">listeners</span><span class="dots"></span><span class="value">3</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">tailscale</span><span class="dots"></span><span class="value">4/4</span><span class="chip confirm">Confirm</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">fail2ban</span><span class="dots"></span><span class="value">active</span><span class="chip confirm">Confirm</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">NTP</span><span class="dots"></span><span class="value">synced</span><span class="chip confirm">Confirm</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">rsyncshot</span><span class="dots"></span><span class="value">3h ago</span><span class="chip workflow">Workflow</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">docker stopped</span><span class="dots"></span><span class="value">2</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-ok">●</span><span class="name">cron</span><span class="dots"></span><span class="value">ok</span><span class="chip confirm">Confirm</span><span class="control"><span class="nolever">—</span></span></div>
+ </div>
+ </div>
+
+ <!-- ===================== OFF / N-A ===================== -->
+ <div class="band-ok" style="margin-top:6px">
+ <div class="rows" style="opacity:.55">
+ <div class="row"><span class="lamp l-off">○</span><span class="name" style="color:var(--dim)">battery</span><span class="dots"></span><span class="value" style="color:var(--dim)">n/a</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ <div class="row"><span class="lamp l-off">○</span><span class="name" style="color:var(--dim)">libvirt</span><span class="dots"></span><span class="value" style="color:var(--dim)">off</span><span class="chip none">None</span><span class="control"><span class="nolever">—</span></span></div>
+ </div>
+ </div>
+
+ </div>
+</div>
+
+<!-- =============== RUNNING / OUTPUT-WALL capsule =============== -->
+<div class="capsule">
+ <div class="cap-head">
+ <span>MAINT · ratio · CLEANING <span class="run">◐</span></span>
+ <span style="color:var(--dim); font-weight:400; font-size:12px">4 Auto actions</span>
+ </div>
+ <div class="wall">
+ <div class="line">
+ <span class="lamp l-prog">◐</span>
+ <span class="act">cache trim <span style="color:var(--dim)">running…</span></span>
+ </div>
+ <div class="line">
+ <span class="lamp l-ok">●</span>
+ <span class="act"><span class="done">journal vacuum — done</span></span>
+ <span class="res">reclaimed 0.9&nbsp;GB</span>
+ </div>
+ <div class="line">
+ <span class="lamp l-ok">●</span>
+ <span class="act"><span class="done">coredump clear — done</span></span>
+ <span class="res">12 cleared</span>
+ </div>
+ <div class="line queued">
+ <span class="lamp l-off">○</span>
+ <span class="act">app-log cleanup <span style="color:#565c60">queued</span></span>
+ </div>
+ </div>
+ <div class="cap-foot">
+ <button class="btn">Done</button>
+ </div>
+</div>
+
+<div class="legend">
+ <b>Automation classes:</b>
+ <b>Auto</b> — doctor "Clean up" runs unattended ·
+ <b>Confirm</b> — doctor "Review &amp; fix" preview then click ·
+ <b>Human</b> — you act ·
+ <b>Workflow</b> — escalate to an agent workflow ·
+ <b>None</b> — diagnostic only.
+ &nbsp;&nbsp;<b>Lamps:</b> ● ok / warn / fail · ◐ in-progress · ○ off-or-n/a. ZFS rows omitted (btrfs host).
+</div>
+
+</body>
+</html>