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>

internal/web/static/app.css

@@ -215,31 +215,14 @@ body.bare main { max-width: none; }
 .quick-register .one-liner code { white-space: pre; }
 
 .manual-register-card { padding-top: 10px; padding-bottom: 14px; }
-.manual-register summary {
-  list-style: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0;
-}
-.manual-register summary::before {
-  content: "▸";
-  color: var(--text-dim);
-  font-size: 12px;
-  transition: transform .1s ease;
-}
-.manual-register[open] > summary::before { transform: rotate(90deg); }
-.manual-register summary h2 {
-  margin: 0;
+.manual-register-card h2 {
+  margin: 0 0 12px;
   font-size: 15px;
   text-transform: uppercase;
   letter-spacing: .5px;
   color: var(--text-dim);
   font-weight: 600;
 }
-.manual-register summary:hover h2 { color: var(--text); }
-.manual-register[open] summary { margin-bottom: 12px; }
 
 /* ===== Host detail page ===== */
 .detail { display: flex; flex-direction: column; gap: 20px; }
@@ -777,14 +760,14 @@ body.bare main { max-width: none; }
 .host-profile-picker {
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 6px 10px;
-  display: inline-flex;
-  gap: 12px;
-  align-items: center;
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   margin: 0 8px 0 0;
 }
 .host-profile-picker legend { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; }
-.host-profile-picker label { display: inline-flex; gap: 4px; align-items: center; font-family: var(--mono); font-size: 13px; cursor: pointer; }
+.host-profile-picker label { cursor: pointer; }
 
 .in-flight-banner-wrap { display: contents; }
 .in-flight-banner {
@@ -864,3 +847,139 @@ body.bare main { max-width: none; }
 .run-page { display: flex; flex-direction: column; gap: 12px; }
 .run-body { display: flex; flex-direction: column; gap: 10px; }
 .run-header-name { margin: 0; font-size: 20px; font-weight: 600; }
+
+/* ---------- UX fixes ------------------------------------------------ */
+
+/* #1: Active nav indicator */
+.topbar nav a.nav-active { color: var(--text); }
+
+/* #3: Copy button for code blocks */
+.copyable-wrap { position: relative; display: flex; align-items: stretch; gap: 0; }
+.copyable-wrap .one-liner,
+.copyable-wrap .hold-ssh { flex: 1; margin: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.copy-btn {
+  padding: 6px 12px;
+  font-size: 11px;
+  font-family: var(--mono);
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  background: var(--bg-elev-2);
+  border: 1px solid var(--border);
+  border-left: none;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  color: var(--text-dim);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.copy-btn:hover { color: var(--text); background: var(--bg-elev); }
+.copy-btn.copied { color: var(--success); }
+
+/* #4: Profile picker descriptions */
+.host-profile-picker label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  font-family: var(--mono);
+  font-size: 13px;
+  cursor: pointer;
+}
+.host-profile-picker label > .profile-label { display: inline-flex; align-items: center; gap: 4px; }
+.host-profile-picker label > .profile-desc { font-family: var(--font); font-size: 11px; color: var(--text-dim); padding-left: 18px; }
+
+/* #5: Non-destructive hint */
+.nd-hint {
+  display: block;
+  font-size: 11px;
+  color: var(--text-dim);
+  padding-left: 20px;
+  margin-top: 2px;
+}
+
+/* #6: Offline guidance */
+.offline-hint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.offline-hint span { font-size: 13px; color: var(--text-dim); }
+.offline-hint a { color: var(--accent); }
+
+/* #7: SSE connection indicator */
+.heartbeat { transition: color .3s ease; }
+.heartbeat-live { color: var(--success) !important; }
+.heartbeat-stale { color: var(--danger) !important; }
+
+/* #9: Diff badge on collapsed spec diffs */
+.diff-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  font-family: var(--mono);
+  line-height: 1;
+}
+.diff-badge-critical { background: rgba(229,100,102,.2); color: var(--danger); border: 1px solid rgba(229,100,102,.5); }
+.diff-badge-warn { background: rgba(228,169,75,.15); color: var(--warn); border: 1px solid rgba(228,169,75,.4); }
+
+/* #10: Cancelled run state */
+.run-status-cancelled { background: rgba(154,162,177,.12); border-color: rgba(154,162,177,.4); color: var(--text-dim); }
+.tile-cancelled { border-color: rgba(154,162,177,.3); }
+
+/* #11: Small status badge on tiles */
+.run-status-badge-sm { font-size: 10px; padding: 2px 7px; }
+.tile-status { display: flex; }
+
+/* #12: Log search match count */
+.log-match-count {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-dim);
+  padding: 6px 8px;
+  white-space: nowrap;
+  align-self: center;
+}
+.log-match-count:empty { display: none; }
+
+/* #8: Inline confirm */
+.confirm-overlay {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: rgba(229,100,102,.1);
+  border: 1px solid rgba(229,100,102,.5);
+  border-radius: var(--radius);
+  font-size: 13px;
+  color: var(--danger);
+}
+.confirm-overlay .confirm-msg { flex: 1; }
+.confirm-overlay .confirm-yes {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: #fff;
+  font-weight: 600;
+  padding: 6px 14px;
+}
+.confirm-overlay .confirm-no {
+  background: transparent;
+  border-color: var(--border);
+  color: var(--text-dim);
+  padding: 6px 14px;
+}
+
+/* #13: 404 page */
+.not-found {
+  text-align: center;
+  padding: 80px 24px;
+  color: var(--text-dim);
+}
+.not-found h1 { font-size: 24px; color: var(--text); margin: 0 0 8px; }
+.not-found p { margin: 0 0 20px; }
+.not-found .button { display: inline-block; }