ui: GitHub-Actions-style detail page, sub-steps, mini-tile run-view

Reshapes the detail page into a run-view: hybrid horizontal pipeline
+ expanded active-step pane with sub-steps, a per-step log pane with
line-numbered permalinks and client-side search, and a runs-history
sidebar that navigates via ?run=N. Default step is server-picked
(running → failed → Reporting) so the operator lands on the thing
that's moving.

Adds a sub_steps table + SSE topic (substep-{run}-{stage}-{ordinal})
so per-disk and per-pass work (SMART, CPUStress CPU/RAM, Storage,
GPU) is visible in the UI instead of buried in stage summary JSON.
Agent emits sub-step reports from existing per-iteration loops.

Dashboard tiles become a mini run-view with a 9-dot step strip so
the operator reads run health across the whole grid at a glance.
Register page gets the same card shell + button styling.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

internal/web/static/app.js

@@ -0,0 +1,115 @@
+// 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.
+(function () {
+    'use strict';
+
+    // --- 1. auto-advance on substep SSE ---------------------------------
+
+    document.body.addEventListener('htmx:sseMessage', function (ev) {
+        var name = ev.detail && ev.detail.type;
+        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);
+    });
+
+    function autoAdvance() {
+        var steps = document.querySelectorAll('.step[data-stage]');
+        var runningStep = null;
+        steps.forEach(function (step) {
+            if (step.querySelector('.substep-running')) {
+                runningStep = step;
+            }
+        });
+        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 ----------------------------------------------
+
+    document.body.addEventListener('input', function (ev) {
+        var el = ev.target;
+        if (!el.classList || !el.classList.contains('log-search')) {
+            return;
+        }
+        var step = el.closest('.step');
+        if (!step) { return; }
+        var query = el.value.trim().toLowerCase();
+        step.querySelectorAll('.log-line').forEach(function (line) {
+            if (!query) {
+                line.style.display = '';
+                line.classList.remove('log-hit');
+                return;
+            }
+            var text = (line.textContent || '').toLowerCase();
+            if (text.indexOf(query) === -1) {
+                line.style.display = 'none';
+                line.classList.remove('log-hit');
+            } else {
+                line.style.display = '';
+                line.classList.add('log-hit');
+            }
+        });
+    });
+
+    // --- 3. permalink scroll + highlight on load ------------------------
+
+    function scrollToHash() {
+        var hash = (location.hash || '').replace(/^#/, '');
+        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' });
+    }
+
+    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; }
+        ev.preventDefault();
+        var href = a.getAttribute('href') || '';
+        if (href.indexOf('#') === 0) {
+            history.replaceState(null, '', href);
+            scrollToHash();
+        }
+    });
+})();