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
+9 -2
View File
@@ -16,7 +16,7 @@ import (
templ HostTile(t TileData) {
<article
id={ fmt.Sprintf("host-%d", t.Host.ID) }
class="tile"
class={ "tile", "tile-" + tileMood(t.Latest) }
sse-swap={ fmt.Sprintf("tile-%d", t.Host.ID) }
hx-swap="outerHTML"
>
@@ -25,6 +25,11 @@ templ HostTile(t TileData) {
<div class="tile-name">{ t.Host.Name }</div>
<span class={ "tile-last-seen", lastSeenClass(t.LastSeenAt) }>{ lastSeenLabel(t.LastSeenAt) }</span>
</header>
if t.Latest != nil {
<div class="tile-status">
<span class={ "run-status-badge", "run-status-badge-sm", "run-status-" + tileMood(t.Latest) }>{ tileStatus(t.Latest) }</span>
</div>
}
</article>
}
@@ -84,7 +89,9 @@ func tileMood(r *model.Run) string {
return "pass"
case model.StateFailed, model.StateFailedHolding:
return "fail"
case model.StateReleased, model.StateCancelled:
case model.StateCancelled:
return "cancelled"
case model.StateReleased:
return "idle"
}
return "active"