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/templates/host_tile.templ

@@ -5,13 +5,18 @@ import (
 	"context"
 	"fmt"
 	"time"
+
 	"vetting/internal/model"
+	"vetting/internal/store"
 )
 
-// HostTile renders a single dashboard card. The whole tile is a link
-// to /hosts/{id} (via a CSS-overlay <a>) — every control beyond the one
-// primary action lives on the detail page. It's the SSE-swap target
-// for per-host tile refreshes (`tile-N`).
+// HostTile renders a single dashboard card as a mini run-view. The whole
+// tile is a link to /hosts/{id} (via a CSS-overlay <a>) — every control
+// beyond the one primary action lives on the detail page. It's the SSE-
+// swap target for per-host tile refreshes (`tile-N`). The step list is
+// a compact vertical strip of the 9 canonical stages with just a
+// coloured dot per stage; operators can read run health at a glance
+// across the whole dashboard without drilling in.
 templ HostTile(t TileData) {
 	<article
 		id={ fmt.Sprintf("host-%d", t.Host.ID) }
@@ -27,6 +32,17 @@ templ HostTile(t TileData) {
 				<div class="tile-status">{ tileStatus(t.Latest) }</div>
 			</div>
 		</header>
+		if t.Latest != nil {
+			<div class="tile-meta-row">
+				<span class="tile-run-id">{ fmt.Sprintf("#%d", t.Latest.ID) }</span>
+				<span class="tile-run-duration">{ runDuration(t.Latest) }</span>
+			</div>
+		}
+		<ol class="tile-steplist">
+			for _, name := range store.DefaultStageOrder {
+				@tileStep(stageForName(t.Stages, name))
+			}
+		</ol>
 		<div class="tile-primary-action">
 			if canStart(t) {
 				<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/start", t.Host.ID)) } class="inline tile-start-form">
@@ -49,6 +65,17 @@ templ HostTile(t TileData) {
 	</article>
 }
 
+// tileStep renders one entry of the tile's mini step-list: a small
+// coloured dot plus the short stage name. Kept as its own templ so the
+// markup stays consistent with the detail page's larger stage-dot
+// elements (same class prefix, different size via the `-sm` modifier).
+templ tileStep(s model.Stage) {
+	<li class={ "tile-step", "tile-step-" + string(s.State) }>
+		<span class={ "stage-dot", "stage-dot-sm", "stage-dot-" + string(s.State) }>{ stageMarker(string(s.State)) }</span>
+		<span class="tile-step-name">{ s.Name }</span>
+	</li>
+}
+
 func canOverrideWipe(r *model.Run) bool {
 	if r == nil {
 		return false