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:
+143
-24
@@ -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; }
|
||||
|
||||
+119
-31
@@ -1,16 +1,5 @@
|
||||
// Detail-page client behaviors. Loaded in layout.templ with `defer` so the
|
||||
// DOM is parsed before any listeners fire. Three jobs:
|
||||
//
|
||||
// 1. Auto-advance: when a substep-* SSE event lands with state=running,
|
||||
// open the parent step panel and collapse any previously-running step
|
||||
// that's now completed. Keeps the operator's attention on the thing
|
||||
// that's currently moving without manual clicks.
|
||||
// 2. In-step search: filter `.log-line` rows inside the current step by
|
||||
// substring match. Client-side only — the log pane's `<details>` ancestor
|
||||
// scopes the filter naturally.
|
||||
// 3. Permalink scroll + highlight: when the URL carries `#L{run}-{stage}-{ord}`
|
||||
// on load, scroll that log line into view; anchor clicks update
|
||||
// `location.hash` without a reload.
|
||||
// Client behaviors for the Vetting UI. Loaded in layout.templ with `defer`
|
||||
// so the DOM is parsed before any listeners fire.
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
@@ -21,9 +10,6 @@
|
||||
if (!name || name.indexOf('substep-') !== 0) {
|
||||
return;
|
||||
}
|
||||
// After htmx has applied the swap, check which step the just-updated
|
||||
// substep belongs to. We scan *after* the swap so we see the new
|
||||
// class ("substep-running" / "substep-passed") rather than the old.
|
||||
setTimeout(function () {
|
||||
autoAdvance();
|
||||
}, 0);
|
||||
@@ -40,24 +26,19 @@
|
||||
if (!runningStep) {
|
||||
return;
|
||||
}
|
||||
// Open the running step; collapse any other open step that no longer
|
||||
// has a running substep. The default-open step picked server-side
|
||||
// stays open if nothing is running yet.
|
||||
steps.forEach(function (step) {
|
||||
if (step === runningStep) {
|
||||
if (!step.open) { step.open = true; }
|
||||
return;
|
||||
}
|
||||
if (step.open && !step.querySelector('.substep-running')) {
|
||||
// Leave the "currently-failed" step open even when we
|
||||
// auto-advance — operator still wants to see what broke.
|
||||
if (step.classList.contains('step-failed')) { return; }
|
||||
step.open = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- 2. in-step search ----------------------------------------------
|
||||
// --- 2. in-step search + match count --------------------------------
|
||||
|
||||
document.body.addEventListener('input', function (ev) {
|
||||
var el = ev.target;
|
||||
@@ -67,6 +48,7 @@
|
||||
var step = el.closest('.step');
|
||||
if (!step) { return; }
|
||||
var query = el.value.trim().toLowerCase();
|
||||
var matchCount = 0;
|
||||
step.querySelectorAll('.log-line').forEach(function (line) {
|
||||
if (!query) {
|
||||
line.style.display = '';
|
||||
@@ -80,17 +62,22 @@
|
||||
} else {
|
||||
line.style.display = '';
|
||||
line.classList.add('log-hit');
|
||||
matchCount++;
|
||||
}
|
||||
});
|
||||
var counter = el.closest('.log-search-wrap').querySelector('.log-match-count');
|
||||
if (counter) {
|
||||
if (!query) {
|
||||
counter.textContent = '';
|
||||
} else if (matchCount === 0) {
|
||||
counter.textContent = 'No matches';
|
||||
} else {
|
||||
counter.textContent = matchCount + (matchCount === 1 ? ' match' : ' matches');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// --- 3. live duration tick ------------------------------------------
|
||||
//
|
||||
// .run-duration spans carry data-started-at (RFC3339) while the run is
|
||||
// non-terminal. Every second we rewrite their text with the current
|
||||
// elapsed so the header timer ticks between SSE pushes. When an SSE
|
||||
// swap drops the attribute (run finished), the tick silently skips it
|
||||
// and the server-rendered final value stays put.
|
||||
|
||||
function formatDuration(ms) {
|
||||
if (ms < 0) { ms = 0; }
|
||||
@@ -126,7 +113,6 @@
|
||||
if (!hash) { return; }
|
||||
var target = document.getElementById(hash);
|
||||
if (!target) { return; }
|
||||
// Open the enclosing step so the target is actually visible.
|
||||
var step = target.closest('.step');
|
||||
if (step && !step.open) { step.open = true; }
|
||||
target.scrollIntoView({ block: 'center' });
|
||||
@@ -135,8 +121,6 @@
|
||||
window.addEventListener('load', scrollToHash);
|
||||
window.addEventListener('hashchange', scrollToHash);
|
||||
|
||||
// Anchor clicks update location.hash without triggering navigation;
|
||||
// the hashchange listener above handles the scroll + highlight.
|
||||
document.body.addEventListener('click', function (ev) {
|
||||
var a = ev.target.closest && ev.target.closest('.log-anchor');
|
||||
if (!a) { return; }
|
||||
@@ -147,4 +131,108 @@
|
||||
scrollToHash();
|
||||
}
|
||||
});
|
||||
|
||||
// --- 5. active nav indicator ----------------------------------------
|
||||
|
||||
(function setActiveNav() {
|
||||
var path = location.pathname;
|
||||
var nav = document.querySelector('[data-nav]');
|
||||
if (!nav) { return; }
|
||||
nav.querySelectorAll('a').forEach(function (a) {
|
||||
var href = a.getAttribute('href');
|
||||
if (href === '/hosts/new' && path === '/hosts/new') {
|
||||
a.classList.add('nav-active');
|
||||
} else if (href === '/' && path !== '/hosts/new') {
|
||||
a.classList.add('nav-active');
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// --- 6. copy-to-clipboard buttons -----------------------------------
|
||||
|
||||
document.body.addEventListener('click', function (ev) {
|
||||
var btn = ev.target.closest && ev.target.closest('.copy-btn');
|
||||
if (!btn) { return; }
|
||||
var wrap = btn.closest('.copyable-wrap');
|
||||
if (!wrap) { return; }
|
||||
var source = wrap.querySelector('.one-liner code, .hold-ssh');
|
||||
if (!source) { return; }
|
||||
var text = source.textContent || '';
|
||||
navigator.clipboard.writeText(text.trim()).then(function () {
|
||||
btn.textContent = 'Copied';
|
||||
btn.classList.add('copied');
|
||||
setTimeout(function () {
|
||||
btn.textContent = 'Copy';
|
||||
btn.classList.remove('copied');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// --- 7. SSE connection health indicator ------------------------------
|
||||
|
||||
var lastSSE = 0;
|
||||
var HEARTBEAT_INTERVAL = 15000;
|
||||
var STALE_THRESHOLD = HEARTBEAT_INTERVAL * 2.5;
|
||||
|
||||
document.body.addEventListener('htmx:sseMessage', function () {
|
||||
lastSSE = Date.now();
|
||||
var hb = document.querySelector('.heartbeat');
|
||||
if (hb) {
|
||||
hb.classList.add('heartbeat-live');
|
||||
hb.classList.remove('heartbeat-stale');
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function () {
|
||||
if (!lastSSE) { return; }
|
||||
var hb = document.querySelector('.heartbeat');
|
||||
if (!hb) { return; }
|
||||
if (Date.now() - lastSSE > STALE_THRESHOLD) {
|
||||
hb.classList.remove('heartbeat-live');
|
||||
hb.classList.add('heartbeat-stale');
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
// --- 8. inline confirmation for destructive actions ------------------
|
||||
|
||||
document.body.addEventListener('submit', function (ev) {
|
||||
var form = ev.target;
|
||||
if (!form || !form.hasAttribute('data-confirm')) { return; }
|
||||
if (form.dataset.confirmed === 'yes') {
|
||||
form.removeAttribute('data-confirmed');
|
||||
return;
|
||||
}
|
||||
ev.preventDefault();
|
||||
if (form.querySelector('.confirm-overlay')) { return; }
|
||||
|
||||
var msg = form.getAttribute('data-confirm');
|
||||
var btn = form.querySelector('button[type="submit"]');
|
||||
if (!btn) { return; }
|
||||
btn.style.display = 'none';
|
||||
|
||||
var overlay = document.createElement('div');
|
||||
overlay.className = 'confirm-overlay';
|
||||
overlay.innerHTML =
|
||||
'<span class="confirm-msg">' + escapeHtml(msg) + '</span>' +
|
||||
'<button type="button" class="confirm-yes">Confirm</button>' +
|
||||
'<button type="button" class="confirm-no">Cancel</button>';
|
||||
|
||||
form.appendChild(overlay);
|
||||
|
||||
overlay.querySelector('.confirm-yes').addEventListener('click', function () {
|
||||
form.dataset.confirmed = 'yes';
|
||||
form.requestSubmit();
|
||||
});
|
||||
overlay.querySelector('.confirm-no').addEventListener('click', function () {
|
||||
overlay.remove();
|
||||
btn.style.display = '';
|
||||
});
|
||||
});
|
||||
|
||||
function escapeHtml(str) {
|
||||
var div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user