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:
+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