feat(ui): 15-point UX overhaul — affordances, feedback, and navigation
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:
@@ -101,11 +101,11 @@ templ RunHeader(d RunPageData) {
|
||||
<div class="run-header-right">
|
||||
if canCancel(&d.Run) {
|
||||
if d.Run.State == model.StateFailedHolding {
|
||||
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/cancel", d.Host.ID)) } class="inline" onsubmit="return confirm('Cancel held run? The host will reboot to local disk.');">
|
||||
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/cancel", d.Host.ID)) } class="inline" data-confirm="Cancel held run? The host will reboot to local disk.">
|
||||
<button type="submit" class="btn-danger">Cancel & reboot</button>
|
||||
</form>
|
||||
} else {
|
||||
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/cancel", d.Host.ID)) } class="inline" onsubmit="return confirm('Cancel run? Destructive stages may leave the host in an intermediate state requiring manual cleanup.');">
|
||||
<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/cancel", d.Host.ID)) } class="inline" data-confirm="Cancel run? Destructive stages may leave the host mid-operation.">
|
||||
<button type="submit" class="btn-danger">Cancel run</button>
|
||||
</form>
|
||||
}
|
||||
@@ -140,7 +140,10 @@ templ HoldBanner(d RunPageData) {
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
<span class="hold-banner-label">Host is holding — SSH available:</span>
|
||||
<code class="hold-ssh">{ sshInvocation(d.HoldKeyPath, d.Run.HoldIP) }</code>
|
||||
<div class="copyable-wrap">
|
||||
<code class="hold-ssh">{ sshInvocation(d.HoldKeyPath, d.Run.HoldIP) }</code>
|
||||
<button type="button" class="copy-btn" data-copy-target="previousSibling">Copy</button>
|
||||
</div>
|
||||
</section>
|
||||
} else {
|
||||
<section
|
||||
@@ -164,7 +167,10 @@ templ RunSpecDiffs(d RunPageData) {
|
||||
>
|
||||
if len(d.SpecDiffs) > 0 {
|
||||
<details open?={ hasCriticalDiff(d.SpecDiffs) }>
|
||||
<summary><h2>Spec diffs ({ fmt.Sprintf("%d", len(d.SpecDiffs)) })</h2></summary>
|
||||
<summary>
|
||||
<h2>Spec diffs</h2>
|
||||
<span class={ "diff-badge", diffBadgeClass(d.SpecDiffs) }>{ fmt.Sprintf("%d", len(d.SpecDiffs)) }</span>
|
||||
</summary>
|
||||
<ul class="diff-list">
|
||||
for _, diff := range d.SpecDiffs {
|
||||
<li class={ "diff-row", "diff-" + diff.Severity }>
|
||||
|
||||
Reference in New Issue
Block a user