feat(ui): 15-point UX overhaul — affordances, feedback, and navigation
CI / Lint + build + test (push) Successful in 1m43s
Release / detect (push) Successful in 6s
Release / build-live-image (push) Has been skipped
Release / bundle (push) Successful in 52s

Address friction points identified in a full interface audit:
- Re-add status badge to dashboard tiles so run state is visible at a glance
- Add active nav indicator and SSE connection health monitor (live/stale)
- Show manual registration form by default instead of hiding behind <details>
- Add copy-to-clipboard buttons on SSH hold command and quick-register one-liner
- Replace tooltip-only profile descriptions with inline visible text
- Clarify non-destructive toggle with explicit stage impact description
- Replace disabled "Start vetting" button with actionable offline guidance
- Swap browser confirm() dialogs for styled inline confirmations
- Add colored badge to spec diffs summary visible when collapsed
- Add distinct "cancelled" mood for cancelled runs (vs idle)
- Add match count to log search and aria-label for accessibility
- Add styled 404 page rendered inside the app shell

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-23 20:08:07 -04:00
parent 8367ec2a9f
commit 017c3c38fe
18 changed files with 644 additions and 219 deletions
+6 -5
View File
@@ -25,14 +25,16 @@ templ Registration(form RegistrationForm) {
<section class="detail-section quick-register">
<h2>Quick register <span class="muted">(recommended)</span></h2>
<p>Run this on the target host as root before wiping. It auto-detects MAC and hardware, then registers with this orchestrator:</p>
<pre class="one-liner"><code>{ "curl -fsSL " + form.QuickRegisterURL + "/register/quick.sh | sudo bash" }</code></pre>
<div class="copyable-wrap">
<pre class="one-liner"><code>{ "curl -fsSL " + form.QuickRegisterURL + "/register/quick.sh | sudo bash" }</code></pre>
<button type="button" class="copy-btn" data-copy-target="previousSibling">Copy</button>
</div>
<p class="muted">After the script prints <code>OK</code>, refresh the dashboard and click <b>Start vetting</b> on the new host.</p>
</section>
}
<section class="detail-section manual-register-card">
<details class="manual-register">
<summary><h2>Register manually</h2></summary>
<form method="post" action="/hosts" class="host-form">
<h2>Register manually</h2>
<form method="post" action="/hosts" class="host-form">
<label>
Name
<input type="text" name="name" value={ form.Name } required pattern="[A-Za-z0-9_\-\.]+" placeholder="pve-node-03"/>
@@ -64,7 +66,6 @@ templ Registration(form RegistrationForm) {
<a class="button-secondary" href="/">Cancel</a>
</div>
</form>
</details>
</section>
</section>
}