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/active_step.templ

@@ -0,0 +1,96 @@
+package templates
+
+import (
+	"fmt"
+	"time"
+
+	"vetting/internal/model"
+)
+
+// ActiveStepData is the per-stage payload for the expanded step panel.
+// The handler builds one per stage in DefaultStageOrder and hands it to
+// ActiveStep so the template stays free of any slicing logic.
+type ActiveStepData struct {
+	RunID     int64
+	Stage     model.Stage
+	SubSteps  []model.SubStep
+	LogReplay string
+	Open      bool
+}
+
+// ActiveStep renders one stage's expanded panel: the header summary
+// (state badge, stage name, duration), any sub-step rows, a per-step
+// search box, and a live log pane scoped to that stage's SSE topic.
+// Uses <details open?={ d.Open }> so the server-picked default stage
+// opens automatically on page load; app.js takes over after that for
+// SSE-driven auto-advance.
+templ ActiveStep(d ActiveStepData) {
+	<details class={ "step", "step-" + string(d.Stage.State) } open?={ d.Open } data-stage={ d.Stage.Name }>
+		<summary class="step-summary">
+			<span class={ "stage-dot", "stage-dot-" + string(d.Stage.State) }>{ stageMarker(string(d.Stage.State)) }</span>
+			<span class="step-name">{ d.Stage.Name }</span>
+			<span class="step-duration">{ stageDurationFromStage(d.Stage) }</span>
+		</summary>
+		<div class="step-body">
+			if len(d.SubSteps) > 0 {
+				<ol class="substep-list">
+					for _, ss := range d.SubSteps {
+						@SubStepRow(ss)
+					}
+				</ol>
+			}
+			<div class="log-search-wrap">
+				<input class="log-search" type="search" placeholder="Search this step" data-step={ d.Stage.Name }/>
+			</div>
+			<div
+				class="log-pane"
+				id={ fmt.Sprintf("log-%d-%s", d.RunID, d.Stage.Name) }
+				sse-swap={ fmt.Sprintf("log-%d-%s", d.RunID, d.Stage.Name) }
+				hx-swap="beforeend show:bottom"
+			>
+				@templ.Raw(d.LogReplay)
+			</div>
+		</div>
+	</details>
+}
+
+// SubStepsForStage filters a flat []SubStep to just the entries for one
+// stage. Used by host_detail when wiring ActiveStepData — keeps the
+// filtering logic testable and off the template surface.
+func SubStepsForStage(all []model.SubStep, stageName string) []model.SubStep {
+	out := make([]model.SubStep, 0, len(all))
+	for _, ss := range all {
+		if ss.StageName == stageName {
+			out = append(out, ss)
+		}
+	}
+	return out
+}
+
+// stageDurationFromStage is stageDuration adapted to a model.Stage — same
+// formatting rules, different input shape.
+func stageDurationFromStage(s model.Stage) string {
+	if s.StartedAt == nil {
+		return ""
+	}
+	end := time.Now()
+	if s.CompletedAt != nil {
+		end = *s.CompletedAt
+	}
+	d := end.Sub(*s.StartedAt)
+	if d < 0 {
+		d = 0
+	}
+	switch {
+	case d < time.Second:
+		return fmt.Sprintf("%dms", int(d/time.Millisecond))
+	case d < 10*time.Second:
+		return fmt.Sprintf("%.1fs", d.Seconds())
+	case d < time.Minute:
+		return fmt.Sprintf("%ds", int(d/time.Second))
+	case d < time.Hour:
+		return fmt.Sprintf("%dm", int(d/time.Minute))
+	default:
+		return fmt.Sprintf("%dh", int(d/time.Hour))
+	}
+}

internal/web/templates/active_step_templ.go

@@ -0,0 +1,274 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.1001
+package templates
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import (
+	"fmt"
+	"time"
+
+	"vetting/internal/model"
+)
+
+// ActiveStepData is the per-stage payload for the expanded step panel.
+// The handler builds one per stage in DefaultStageOrder and hands it to
+// ActiveStep so the template stays free of any slicing logic.
+type ActiveStepData struct {
+	RunID     int64
+	Stage     model.Stage
+	SubSteps  []model.SubStep
+	LogReplay string
+	Open      bool
+}
+
+// ActiveStep renders one stage's expanded panel: the header summary
+// (state badge, stage name, duration), any sub-step rows, a per-step
+// search box, and a live log pane scoped to that stage's SSE topic.
+// Uses <details open?={ d.Open }> so the server-picked default stage
+// opens automatically on page load; app.js takes over after that for
+// SSE-driven auto-advance.
+func ActiveStep(d ActiveStepData) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var2 = []any{"step", "step-" + string(d.Stage.State)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<details class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if d.Open {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " open")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " data-stage=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(d.Stage.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 28, Col: 102}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\"><summary class=\"step-summary\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 = []any{"stage-dot", "stage-dot-" + string(d.Stage.State)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var5...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<span class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var5).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(stageMarker(string(d.Stage.State)))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 30, Col: 105}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span> <span class=\"step-name\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(d.Stage.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 31, Col: 41}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</span> <span class=\"step-duration\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(stageDurationFromStage(d.Stage))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 32, Col: 64}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</span></summary><div class=\"step-body\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(d.SubSteps) > 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<ol class=\"substep-list\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, ss := range d.SubSteps {
+				templ_7745c5c3_Err = SubStepRow(ss).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</ol>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<div class=\"log-search-wrap\"><input class=\"log-search\" type=\"search\" placeholder=\"Search this step\" data-step=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(d.Stage.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 43, Col: 99}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"></div><div class=\"log-pane\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("log-%d-%s", d.RunID, d.Stage.Name))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 47, Col: 56}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\" sse-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("log-%d-%s", d.RunID, d.Stage.Name))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/active_step.templ`, Line: 48, Col: 62}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" hx-swap=\"beforeend show:bottom\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.Raw(d.LogReplay).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div></div></details>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// SubStepsForStage filters a flat []SubStep to just the entries for one
+// stage. Used by host_detail when wiring ActiveStepData — keeps the
+// filtering logic testable and off the template surface.
+func SubStepsForStage(all []model.SubStep, stageName string) []model.SubStep {
+	out := make([]model.SubStep, 0, len(all))
+	for _, ss := range all {
+		if ss.StageName == stageName {
+			out = append(out, ss)
+		}
+	}
+	return out
+}
+
+// stageDurationFromStage is stageDuration adapted to a model.Stage — same
+// formatting rules, different input shape.
+func stageDurationFromStage(s model.Stage) string {
+	if s.StartedAt == nil {
+		return ""
+	}
+	end := time.Now()
+	if s.CompletedAt != nil {
+		end = *s.CompletedAt
+	}
+	d := end.Sub(*s.StartedAt)
+	if d < 0 {
+		d = 0
+	}
+	switch {
+	case d < time.Second:
+		return fmt.Sprintf("%dms", int(d/time.Millisecond))
+	case d < 10*time.Second:
+		return fmt.Sprintf("%.1fs", d.Seconds())
+	case d < time.Minute:
+		return fmt.Sprintf("%ds", int(d/time.Second))
+	case d < time.Hour:
+		return fmt.Sprintf("%dm", int(d/time.Minute))
+	default:
+		return fmt.Sprintf("%dh", int(d/time.Hour))
+	}
+}
+
+var _ = templruntime.GeneratedTemplate

internal/web/templates/dashboard.templ

@@ -9,10 +9,14 @@ import (
 // TileData pairs a host with its latest run and the derived fields the
 // tile needs to render: spec-diff count (server-side diff result) and
 // the on-disk path to the hold-key artifact when the run is holding.
-// LastSeenAt is the host-mode agent's most recent heartbeat.
+// LastSeenAt is the host-mode agent's most recent heartbeat. Stages is
+// the list of canonical-order stage rows for Latest, used by HostTile
+// to render the mini run-view; nil/empty for never-run hosts (a ghost
+// dot strip is rendered from DefaultStageOrder).
 type TileData struct {
 	Host             model.Host
 	Latest           *model.Run
+	Stages           []model.Stage
 	SpecDiffCritical int
 	HoldKeyPath      string
 	LastSeenAt       *time.Time

internal/web/templates/dashboard_templ.go

@@ -17,10 +17,14 @@ import (
 // TileData pairs a host with its latest run and the derived fields the
 // tile needs to render: spec-diff count (server-side diff result) and
 // the on-disk path to the hold-key artifact when the run is holding.
-// LastSeenAt is the host-mode agent's most recent heartbeat.
+// LastSeenAt is the host-mode agent's most recent heartbeat. Stages is
+// the list of canonical-order stage rows for Latest, used by HostTile
+// to render the mini run-view; nil/empty for never-run hosts (a ghost
+// dot strip is rendered from DefaultStageOrder).
 type TileData struct {
 	Host             model.Host
 	Latest           *model.Run
+	Stages           []model.Stage
 	SpecDiffCritical int
 	HoldKeyPath      string
 	LastSeenAt       *time.Time

internal/web/templates/host_detail.templ

@@ -4,34 +4,56 @@ import (
 	"bytes"
 	"context"
 	"fmt"
+	"time"
 
 	"vetting/internal/model"
 	"vetting/internal/store"
 )
 
 // HostDetailData is the full payload the detail handler hands to the
-// HostDetail template. Tile carries host + latest-run enrichment (same
-// shape the dashboard tile uses), Stages/SpecDiffs drive the pipeline
-// and diff list. LogReplay is the pre-rendered history fragment
-// produced by logs.Hub.Replay on the initial page render so the operator
-// sees prior output without waiting for a fresh SSE event.
+// HostDetail template. Tile carries host + viewed-run enrichment (same
+// shape the dashboard tile uses), Stages/SpecDiffs/SubSteps drive the
+// pipeline, diff list, and expanded step panel. History backs the runs
+// sidebar (last 20, newest first). DefaultStepStage is the stage name
+// whose <details> opens by default on page load — running → failed →
+// Reporting. LogReplay is the pre-rendered history fragment produced
+// by logs.Hub.Replay on the initial page render so the operator sees
+// prior output without waiting for a fresh SSE event.
 type HostDetailData struct {
-	Tile      TileData
-	Stages    []model.Stage
-	SpecDiffs []model.SpecDiff
-	LogReplay string
+	Tile             TileData
+	Stages           []model.Stage
+	SpecDiffs        []model.SpecDiff
+	SubSteps         []model.SubStep
+	History          []model.Run
+	DefaultStepStage string
+	LogReplay        string
+	// LogReplayByStage is the pre-rendered log HTML grouped by stage
+	// name. Each ActiveStep panel picks its own bucket so the detail
+	// page doesn't fire nine disk scans per reload. The "" key holds
+	// orphan/framing lines (no stage set), surfaced under the "Run"
+	// pseudo-step at the top of the page.
+	LogReplayByStage map[string]string
 }
 
+// HostDetail is the GitHub-Actions-style run view. Layout is: meta
+// drawer (collapsed) → run header + actions → hold banner → horizontal
+// pipeline → two-column body (active-step pane + runs sidebar) → spec
+// diffs at the bottom. Each section keeps its own sse-swap target so
+// live updates don't trigger whole-page reflows.
 templ HostDetail(d HostDetailData) {
 	@Layout(d.Tile.Host.Name) {
-		<section class="detail" hx-ext="sse" sse-connect="/events">
+		<section class="detail detail-v2" hx-ext="sse" sse-connect="/events">
 			<nav class="breadcrumb">
 				<a href="/">Dashboard</a>
 				<span class="breadcrumb-sep">/</span>
 				<span>{ d.Tile.Host.Name }</span>
 			</nav>
 
+			@HostMetaDrawer(d)
+
 			@DetailSummary(d)
+			@DetailActions(d)
+			@DetailHold(d)
 
 			if d.Tile.Latest != nil {
 				@PipelineSection(d.Tile.Latest, BuildPipeline(d.Tile.Latest, d.Stages))
@@ -42,51 +64,41 @@ templ HostDetail(d HostDetailData) {
 				</section>
 			}
 
-			@DetailHold(d)
-			@DetailActions(d)
-			@DetailSpecDiffs(d)
-
-			if d.Tile.Latest != nil {
-				@LogTabs(d.Tile.Latest.ID, d.LogReplay)
-			}
-
-			<section class="detail-section detail-host-meta">
-				<details>
-					<summary><h2>Host details</h2></summary>
-					if d.Tile.Host.Notes != "" {
-						<div class="detail-notes">
-							<h3>Notes</h3>
-							<p>{ d.Tile.Host.Notes }</p>
-						</div>
+			<div class="detail-body">
+				<div class="active-step-pane">
+					if d.Tile.Latest != nil {
+						for _, stageName := range store.DefaultStageOrder {
+							@ActiveStep(ActiveStepData{
+								RunID:     d.Tile.Latest.ID,
+								Stage:     stageForName(d.Stages, stageName),
+								SubSteps:  SubStepsForStage(d.SubSteps, stageName),
+								LogReplay: d.LogReplayByStage[stageName],
+								Open:      stageName == d.DefaultStepStage,
+							})
+						}
+					} else {
+						<p class="detail-empty">No run yet. Click <strong>Start vetting</strong> to begin.</p>
 					}
-					<div class="detail-spec">
-						<h3>Expected spec</h3>
-						<pre class="detail-spec-yaml">{ d.Tile.Host.ExpectedSpecYAML }</pre>
-					</div>
-				</details>
-			</section>
+				</div>
+				@RunsSidebar(d)
+			</div>
+
+			@DetailSpecDiffs(d)
 		</section>
 	}
 }
 
-// DetailSummary is the status header at the top of the detail page:
-// name, last-seen badge, run status, MAC/WoL/failed-stage/spec-diffs
-// meta grid. Keyed on host ID so the SSE event name is stable across
-// run turnover.
-templ DetailSummary(d HostDetailData) {
-	<header
-		id={ fmt.Sprintf("detail-summary-%d", d.Tile.Host.ID) }
-		class={ "detail-summary", "tile-" + tileMood(d.Tile.Latest) }
-		sse-swap={ fmt.Sprintf("detail-summary-%d", d.Tile.Host.ID) }
-		hx-swap="outerHTML"
-	>
-		<div class="detail-summary-head">
-			<h1 class="detail-name">{ d.Tile.Host.Name }</h1>
-			<div class="detail-status-row">
-				<span class={ "tile-last-seen", lastSeenClass(d.Tile.LastSeenAt) }>{ lastSeenLabel(d.Tile.LastSeenAt) }</span>
-				<span class="tile-status">{ tileStatus(d.Tile.Latest) }</span>
-			</div>
-		</div>
+// HostMetaDrawer is the collapsed "host details" block at the top of the
+// page: MAC, WoL, last-seen, expected spec, and notes. <details> defaults
+// to closed so the run itself stays above the fold; operators open it
+// when they need the provisioning info.
+templ HostMetaDrawer(d HostDetailData) {
+	<details class="host-meta-drawer">
+		<summary>
+			<span class="meta-summary-label">Host details</span>
+			<span class={ "tile-last-seen", lastSeenClass(d.Tile.LastSeenAt) }>{ lastSeenLabel(d.Tile.LastSeenAt) }</span>
+			<span class="meta-summary-mac">{ d.Tile.Host.MAC }</span>
+		</summary>
 		<dl class="detail-meta">
 			<div>
 				<dt>MAC</dt>
@@ -96,19 +108,48 @@ templ DetailSummary(d HostDetailData) {
 				<dt>WoL</dt>
 				<dd>{ fmt.Sprintf("%s:%d", d.Tile.Host.WoLBroadcastIP, d.Tile.Host.WoLPort) }</dd>
 			</div>
+		</dl>
+		if d.Tile.Host.Notes != "" {
+			<div class="detail-notes">
+				<h3>Notes</h3>
+				<p>{ d.Tile.Host.Notes }</p>
+			</div>
+		}
+		<div class="detail-spec">
+			<h3>Expected spec</h3>
+			<pre class="detail-spec-yaml">{ d.Tile.Host.ExpectedSpecYAML }</pre>
+		</div>
+	</details>
+}
+
+// DetailSummary is the run header: host name on the left, run number,
+// status icon, and elapsed/total duration. Keyed on host ID so the SSE
+// event name is stable across run turnover.
+templ DetailSummary(d HostDetailData) {
+	<header
+		id={ fmt.Sprintf("detail-summary-%d", d.Tile.Host.ID) }
+		class={ "run-header", "tile-" + tileMood(d.Tile.Latest) }
+		sse-swap={ fmt.Sprintf("detail-summary-%d", d.Tile.Host.ID) }
+		hx-swap="outerHTML"
+	>
+		<div class="run-header-left">
+			<h1 class="detail-name">{ d.Tile.Host.Name }</h1>
+			if d.Tile.Latest != nil {
+				<span class="run-number">{ fmt.Sprintf("run #%d", d.Tile.Latest.ID) }</span>
+			}
+			<span class={ "run-status-badge", "run-status-" + tileMood(d.Tile.Latest) }>{ tileStatus(d.Tile.Latest) }</span>
+			if d.Tile.Latest != nil {
+				<span class="run-duration">{ runDuration(d.Tile.Latest) }</span>
+			}
+		</div>
+		<div class="run-header-right">
 			if d.Tile.Latest != nil && d.Tile.Latest.FailedStage != "" {
-				<div>
-					<dt>Failed at</dt>
-					<dd class="bad">{ d.Tile.Latest.FailedStage }</dd>
-				</div>
+				<span class="run-failed-stage">failed at <strong>{ d.Tile.Latest.FailedStage }</strong></span>
 			}
 			if d.Tile.SpecDiffCritical > 0 {
-				<div>
-					<dt>Spec diffs</dt>
-					<dd class="bad">{ fmt.Sprintf("%d critical", d.Tile.SpecDiffCritical) }</dd>
-				</div>
+				<span class="run-diffs bad">{ fmt.Sprintf("%d critical diff", d.Tile.SpecDiffCritical) }</span>
 			}
-		</dl>
+		</div>
 	</header>
 }
 
@@ -124,7 +165,6 @@ templ DetailActions(d HostDetailData) {
 		sse-swap={ fmt.Sprintf("detail-actions-%d", d.Tile.Host.ID) }
 		hx-swap="outerHTML"
 	>
-		<h2>Actions</h2>
 		<div class="detail-actions-row">
 			if canStart(d.Tile) {
 				<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/start", d.Tile.Host.ID)) } class="inline detail-start-form">
@@ -132,7 +172,7 @@ templ DetailActions(d HostDetailData) {
 						<input type="checkbox" name="non_destructive" value="1"/>
 						Non-destructive (skip wipe-probe + disk writes)
 					</label>
-					<button type="submit">Start vetting</button>
+					<button type="submit" class="btn-primary">Start vetting</button>
 				</form>
 			} else if canStartIfOnline(d.Tile.Latest) {
 				<button type="button" disabled title="host is not heartbeating — install the reporter via /register/quick.sh on the target host">Start vetting</button>
@@ -141,19 +181,19 @@ templ DetailActions(d HostDetailData) {
 			}
 			if canCancel(d.Tile.Latest) {
 				<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/cancel", d.Tile.Host.ID)) } class="inline" onsubmit="return confirm('Cancel run? Destructive stages may leave the host in an intermediate state requiring manual cleanup.');">
-					<button type="submit" class="danger">Cancel run</button>
+					<button type="submit" class="btn-danger">Cancel run</button>
 				</form>
 			}
 			if canOverrideWipe(d.Tile.Latest) {
 				<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/override-wipe", d.Tile.Host.ID)) } class="inline">
-					<button type="submit" class="danger">Override wipe-probe</button>
+					<button type="submit" class="btn-danger">Override wipe-probe</button>
 				</form>
 			}
 			if hasReport(d.Tile.Latest) {
 				<a class="button-like" href={ templ.SafeURL(fmt.Sprintf("/reports/%d", d.Tile.Latest.ID)) } target="_blank" rel="noopener">View report</a>
 			}
-			<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/delete", d.Tile.Host.ID)) } class="inline">
-				<button type="submit" class="danger">Delete host</button>
+			<form method="post" action={ templ.SafeURL(fmt.Sprintf("/hosts/%d/delete", d.Tile.Host.ID)) } class="inline" onsubmit="return confirm('Delete host and all its runs?');">
+				<button type="submit" class="btn-danger">Delete host</button>
 			</form>
 		</div>
 	</section>
@@ -192,20 +232,21 @@ templ DetailSpecDiffs(d HostDetailData) {
 	}
 }
 
-// DetailHold renders the "Host is holding — SSH available" block while
-// a run is in FailedHolding with an IP recorded. Otherwise it emits an
-// empty wrapper so the first push when the hold actually fires has a
-// target. Keyed on run ID for the same reason as DetailSpecDiffs.
+// DetailHold renders the "Host is holding — SSH available" strip across
+// the top when a run is in FailedHolding with an IP recorded. Otherwise
+// it emits an empty wrapper so the first SSE push when the hold actually
+// fires has a target. Keyed on run ID for the same reason as
+// DetailSpecDiffs.
 templ DetailHold(d HostDetailData) {
 	if d.Tile.Latest != nil {
 		if d.Tile.Latest.State == model.StateFailedHolding && d.Tile.Latest.HoldIP != "" {
 			<section
 				id={ fmt.Sprintf("detail-hold-%d", d.Tile.Latest.ID) }
-				class="detail-section detail-hold"
+				class="hold-banner"
 				sse-swap={ fmt.Sprintf("detail-hold-%d", d.Tile.Latest.ID) }
 				hx-swap="outerHTML"
 			>
-				<h2>Host is holding — SSH available</h2>
+				<span class="hold-banner-label">Host is holding — SSH available:</span>
 				<code class="hold-ssh">{ sshInvocation(d.Tile.HoldKeyPath, d.Tile.Latest.HoldIP) }</code>
 			</section>
 		} else {
@@ -219,6 +260,32 @@ templ DetailHold(d HostDetailData) {
 	}
 }
 
+// RunsSidebar is the right-rail history list: last 20 runs for this
+// host, newest first. Each entry links back to /hosts/{id}?run=N for
+// navigation into a past run. The row for the currently-viewed run is
+// flagged so CSS can highlight it.
+templ RunsSidebar(d HostDetailData) {
+	<aside class="runs-sidebar">
+		<h2 class="runs-sidebar-heading">History</h2>
+		if len(d.History) == 0 {
+			<p class="runs-sidebar-empty">No runs yet.</p>
+		} else {
+			<ul class="runs-sidebar-list">
+				for _, r := range d.History {
+					<li class={ "runs-sidebar-item", "runs-sidebar-" + tileMood(&r), runSidebarActiveClass(d.Tile.Latest, r.ID) }>
+						<a href={ templ.SafeURL(fmt.Sprintf("/hosts/%d?run=%d", d.Tile.Host.ID, r.ID)) }>
+							<span class={ "runs-sidebar-dot", "runs-sidebar-dot-" + tileMood(&r) }>{ runSidebarGlyph(&r) }</span>
+							<span class="runs-sidebar-id">{ fmt.Sprintf("#%d", r.ID) }</span>
+							<span class="runs-sidebar-started">{ relativeTime(r.StartedAt) }</span>
+							<span class="runs-sidebar-duration">{ runDuration(&r) }</span>
+						</a>
+					</li>
+				}
+			</ul>
+		}
+	</aside>
+}
+
 // RenderDetailSummaryString, RenderDetailActionsString,
 // RenderDetailSpecDiffsString, RenderDetailHoldString each render one
 // component to a string so the orchestrator can publish SSE fragments
@@ -259,37 +326,98 @@ func hasCriticalDiff(diffs []model.SpecDiff) bool {
 	return false
 }
 
-// LogTabs renders an "All" tab plus one tab per stage in DefaultStageOrder.
-// Switching is pure CSS: hidden radio inputs drive sibling-selector
-// visibility on the panes. Each pane carries its own sse-swap target so
-// live events append only to the relevant pane. The All pane is seeded
-// with replay HTML so reload on an in-flight run still shows history.
-templ LogTabs(runID int64, replay string) {
-	<section class="detail-section log-section">
-		<h2>Log</h2>
-		<div class="log-tabs">
-			<input type="radio" name={ fmt.Sprintf("log-tab-%d", runID) } id={ fmt.Sprintf("log-tab-%d-all", runID) } class="log-tab-input log-tab-all" checked/>
-			<label for={ fmt.Sprintf("log-tab-%d-all", runID) } class="log-tab-label">All</label>
-			for _, s := range store.DefaultStageOrder {
-				<input type="radio" name={ fmt.Sprintf("log-tab-%d", runID) } id={ fmt.Sprintf("log-tab-%d-%s", runID, s) } class={ "log-tab-input", "log-tab-" + s }/>
-				<label for={ fmt.Sprintf("log-tab-%d-%s", runID, s) } class="log-tab-label">{ s }</label>
-			}
-			<div
-				class="log-pane log-pane-all"
-				id={ fmt.Sprintf("log-%d", runID) }
-				sse-swap={ fmt.Sprintf("log-%d", runID) }
-				hx-swap="beforeend show:bottom"
-			>
-				@templ.Raw(replay)
-			</div>
-			for _, s := range store.DefaultStageOrder {
-				<div
-					class={ "log-pane", "log-pane-" + s }
-					id={ fmt.Sprintf("log-%d-%s", runID, s) }
-					sse-swap={ fmt.Sprintf("log-%d-%s", runID, s) }
-					hx-swap="beforeend show:bottom"
-				></div>
-			}
-		</div>
-	</section>
+// stageForName returns the persisted Stage row for a given name, or a
+// synthetic pending-state stub when no row has been seeded yet (e.g.
+// the run is still in a pre-stage). Keeps the template free of nil
+// checks and ghost logic — ActiveStep always gets a concrete Stage.
+func stageForName(stages []model.Stage, name string) model.Stage {
+	for _, s := range stages {
+		if s.Name == name {
+			return s
+		}
+	}
+	return model.Stage{Name: name, State: model.StagePending}
+}
+
+// runSidebarActiveClass marks the row for the currently-viewed run so
+// CSS can highlight it. Empty string (no class added) when the row isn't
+// the active one.
+func runSidebarActiveClass(viewed *model.Run, rowID int64) string {
+	if viewed != nil && viewed.ID == rowID {
+		return "runs-sidebar-active"
+	}
+	return ""
+}
+
+// runDuration formats the elapsed time for a run using the same buckets
+// as stageDuration. In-flight runs clock from StartedAt to now so the
+// header duration keeps updating on each SSE tick.
+func runDuration(r *model.Run) string {
+	if r == nil || r.StartedAt.IsZero() {
+		return ""
+	}
+	end := time.Now()
+	if r.CompletedAt != nil {
+		end = *r.CompletedAt
+	}
+	d := end.Sub(r.StartedAt)
+	if d < 0 {
+		d = 0
+	}
+	switch {
+	case d < time.Second:
+		return fmt.Sprintf("%dms", int(d/time.Millisecond))
+	case d < 10*time.Second:
+		return fmt.Sprintf("%.1fs", d.Seconds())
+	case d < time.Minute:
+		return fmt.Sprintf("%ds", int(d/time.Second))
+	case d < time.Hour:
+		return fmt.Sprintf("%dm %ds", int(d/time.Minute), int((d%time.Minute)/time.Second))
+	default:
+		return fmt.Sprintf("%dh %dm", int(d/time.Hour), int((d%time.Hour)/time.Minute))
+	}
+}
+
+// relativeTime renders a past time as "2m ago" / "1h ago" / "3d ago"
+// for the runs-sidebar. Future times (clock skew on the host) render as
+// "now" so the sidebar never shows nonsense.
+func relativeTime(t time.Time) string {
+	if t.IsZero() {
+		return ""
+	}
+	d := time.Since(t)
+	if d < 0 {
+		return "now"
+	}
+	if d < time.Minute {
+		return "just now"
+	}
+	if d < time.Hour {
+		return fmt.Sprintf("%dm ago", int(d/time.Minute))
+	}
+	if d < 24*time.Hour {
+		return fmt.Sprintf("%dh ago", int(d/time.Hour))
+	}
+	return fmt.Sprintf("%dd ago", int(d/(24*time.Hour)))
+}
+
+// runSidebarGlyph mirrors stageMarker for run-state: ✓ / ! / ● / –.
+// Used inside the sidebar dot so the color + glyph carry redundant
+// meaning.
+func runSidebarGlyph(r *model.Run) string {
+	if r == nil {
+		return ""
+	}
+	switch r.State {
+	case model.StateCompleted:
+		return "✓"
+	case model.StateFailed, model.StateFailedHolding:
+		return "!"
+	case model.StateReleased, model.StateCancelled:
+		return "–"
+	}
+	if r.State.IsTerminal() {
+		return ""
+	}
+	return "●"
 }

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

internal/web/templates/host_tile_templ.go

@@ -13,13 +13,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.
 func HostTile(t TileData) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -53,7 +58,7 @@ func HostTile(t TileData) templ.Component {
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("host-%d", t.Host.ID))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 17, Col: 40}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 22, Col: 40}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -79,7 +84,7 @@ func HostTile(t TileData) templ.Component {
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("tile-%d", t.Host.ID))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 19, Col: 46}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 24, Col: 46}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
@@ -92,7 +97,7 @@ func HostTile(t TileData) templ.Component {
 		var templ_7745c5c3_Var6 templ.SafeURL
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/hosts/%d", t.Host.ID)))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 22, Col: 80}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 27, Col: 80}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -105,7 +110,7 @@ func HostTile(t TileData) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("Open " + t.Host.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 22, Col: 117}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 27, Col: 117}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
@@ -118,7 +123,7 @@ func HostTile(t TileData) templ.Component {
 		var templ_7745c5c3_Var8 string
 		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(t.Host.Name)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 24, Col: 39}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 29, Col: 39}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
@@ -153,7 +158,7 @@ func HostTile(t TileData) templ.Component {
 		var templ_7745c5c3_Var11 string
 		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(lastSeenLabel(t.LastSeenAt))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 26, Col: 95}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 31, Col: 95}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 		if templ_7745c5c3_Err != nil {
@@ -166,77 +171,222 @@ func HostTile(t TileData) templ.Component {
 		var templ_7745c5c3_Var12 string
 		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(tileStatus(t.Latest))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 27, Col: 51}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 32, Col: 51}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div></div></header><div class=\"tile-primary-action\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div></div></header>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		if canStart(t) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<form method=\"post\" action=\"")
+		if t.Latest != nil {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<div class=\"tile-meta-row\"><span class=\"tile-run-id\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var13 templ.SafeURL
-			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/hosts/%d/start", t.Host.ID)))
+			var templ_7745c5c3_Var13 string
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("#%d", t.Latest.ID))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 32, Col: 89}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 37, Col: 63}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"inline tile-start-form\"><label class=\"tile-nd-toggle\"><input type=\"checkbox\" name=\"non_destructive\" value=\"1\"> Non-destructive</label> <button type=\"submit\">Start vetting</button></form>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</span> <span class=\"tile-run-duration\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-		} else if canStartIfOnline(t.Latest) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<button type=\"button\" disabled title=\"host is not heartbeating — install the reporter via /register/quick.sh on the target host\">Start vetting</button>")
+			var templ_7745c5c3_Var14 string
+			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(runDuration(t.Latest))
 			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		} else if canCancel(t.Latest) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<form method=\"post\" action=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var14 templ.SafeURL
-			templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/hosts/%d/cancel", t.Host.ID)))
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 42, Col: 90}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 38, Col: 59}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"inline tile-cancel-form\" onsubmit=\"return confirm('Cancel run? Destructive stages may leave the host in an intermediate state requiring manual cleanup.');\"><button type=\"submit\" class=\"danger\">Cancel run</button></form>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-		} else if hasReport(t.Latest) {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<a class=\"button-like\" href=\"")
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<ol class=\"tile-steplist\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, name := range store.DefaultStageOrder {
+			templ_7745c5c3_Err = tileStep(stageForName(t.Stages, name)).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</ol><div class=\"tile-primary-action\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if canStart(t) {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<form method=\"post\" action=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var15 templ.SafeURL
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/reports/%d", t.Latest.ID)))
+			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/hosts/%d/start", t.Host.ID)))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 46, Col: 88}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 48, Col: 89}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" target=\"_blank\" rel=\"noopener\">View report</a>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" class=\"inline tile-start-form\"><label class=\"tile-nd-toggle\"><input type=\"checkbox\" name=\"non_destructive\" value=\"1\"> Non-destructive</label> <button type=\"submit\">Start vetting</button></form>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else if canStartIfOnline(t.Latest) {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<button type=\"button\" disabled title=\"host is not heartbeating — install the reporter via /register/quick.sh on the target host\">Start vetting</button>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else if canCancel(t.Latest) {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<form method=\"post\" action=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var16 templ.SafeURL
+			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/hosts/%d/cancel", t.Host.ID)))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 58, Col: 90}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" class=\"inline tile-cancel-form\" onsubmit=\"return confirm('Cancel run? Destructive stages may leave the host in an intermediate state requiring manual cleanup.');\"><button type=\"submit\" class=\"danger\">Cancel run</button></form>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else if hasReport(t.Latest) {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<a class=\"button-like\" href=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var17 templ.SafeURL
+			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL(fmt.Sprintf("/reports/%d", t.Latest.ID)))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 62, Col: 88}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\" target=\"_blank\" rel=\"noopener\">View report</a>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</div></article>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div></article>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// 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).
+func tileStep(s model.Stage) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var18 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var18 == nil {
+			templ_7745c5c3_Var18 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var19 = []any{"tile-step", "tile-step-" + string(s.State)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var19...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<li class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var20 string
+		templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var19).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var21 = []any{"stage-dot", "stage-dot-sm", "stage-dot-" + string(s.State)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var21...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<span class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var21).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(stageMarker(string(s.State)))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 74, Col: 108}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</span> <span class=\"tile-step-name\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(s.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/host_tile.templ`, Line: 75, Col: 39}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</span></li>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

internal/web/templates/host_tile_test.go

@@ -2,11 +2,13 @@ package templates
 
 import (
 	"context"
+	"fmt"
 	"strings"
 	"testing"
 	"time"
 
 	"vetting/internal/model"
+	"vetting/internal/store"
 )
 
 func TestHumanAgoFrom(t *testing.T) {
@@ -96,6 +98,99 @@ func TestHostTile_DisabledStartWhenOffline(t *testing.T) {
 	}
 }
 
+// TestHostTile_MiniRunView asserts the tile renders a step-list entry
+// for every canonical stage, colours the dots according to the mixed
+// stage states in the fixture, and surfaces the run id + duration in
+// the meta row. This is the contract the dashboard leans on: the
+// operator should be able to read run health across all tiles without
+// drilling into any of them.
+func TestHostTile_MiniRunView(t *testing.T) {
+	now := time.Now()
+	started := now.Add(-3 * time.Minute)
+	latest := &model.Run{
+		ID:        17,
+		State:     model.StateSMART,
+		StartedAt: started,
+	}
+	// Mixed states: first two stages passed, SMART running, rest pending.
+	stages := []model.Stage{
+		{Name: "Inventory", State: model.StagePassed},
+		{Name: "SpecValidate", State: model.StagePassed},
+		{Name: "SMART", State: model.StageRunning},
+	}
+	data := TileData{
+		Host:       model.Host{ID: 42, Name: "tile-test", MAC: "aa:bb:cc:dd:ee:ff"},
+		Latest:     latest,
+		Stages:     stages,
+		LastSeenAt: &now,
+	}
+	var buf strings.Builder
+	if err := HostTile(data).Render(context.Background(), &buf); err != nil {
+		t.Fatalf("render: %v", err)
+	}
+	html := buf.String()
+
+	// Step list exists and contains every canonical stage name so the
+	// operator reads a full 9-dot strip regardless of how far the run got.
+	if !strings.Contains(html, `<ol class="tile-steplist">`) {
+		t.Fatalf("tile missing step list: %s", html)
+	}
+	for _, s := range store.DefaultStageOrder {
+		want := fmt.Sprintf(`<span class="tile-step-name">%s</span>`, s)
+		if !strings.Contains(html, want) {
+			t.Fatalf("tile missing step name %q: %s", s, html)
+		}
+	}
+	// Colours: the two passed stages got passed dots; SMART got a running
+	// dot; CPUStress (no fixture row) falls back to pending.
+	mustContain := []string{
+		`stage-dot stage-dot-sm stage-dot-passed`,
+		`stage-dot stage-dot-sm stage-dot-running`,
+		`stage-dot stage-dot-sm stage-dot-pending`,
+	}
+	for _, c := range mustContain {
+		if !strings.Contains(html, c) {
+			t.Fatalf("tile missing expected dot classes %q: %s", c, html)
+		}
+	}
+	// Meta row: run id + a duration string (minutes for a 3m-old run).
+	if !strings.Contains(html, `#17`) {
+		t.Fatalf("tile missing run id #17: %s", html)
+	}
+	if !strings.Contains(html, `class="tile-run-duration"`) {
+		t.Fatalf("tile missing duration element: %s", html)
+	}
+}
+
+// TestHostTile_GhostSteplist: a never-run host still gets a 9-dot
+// ghost strip (all pending). Keeps the tile height stable so the
+// dashboard grid doesn't reflow as hosts gain their first run.
+func TestHostTile_GhostSteplist(t *testing.T) {
+	now := time.Now()
+	data := TileData{
+		Host:       model.Host{ID: 1, Name: "fresh", MAC: "aa:bb:cc:dd:ee:01"},
+		LastSeenAt: &now,
+	}
+	var buf strings.Builder
+	if err := HostTile(data).Render(context.Background(), &buf); err != nil {
+		t.Fatalf("render: %v", err)
+	}
+	html := buf.String()
+	for _, s := range store.DefaultStageOrder {
+		want := fmt.Sprintf(`<span class="tile-step-name">%s</span>`, s)
+		if !strings.Contains(html, want) {
+			t.Fatalf("ghost tile missing stage %q: %s", s, html)
+		}
+	}
+	if strings.Contains(html, `stage-dot-passed`) || strings.Contains(html, `stage-dot-running`) || strings.Contains(html, `stage-dot-failed`) {
+		t.Fatalf("ghost tile should have only pending dots: %s", html)
+	}
+	// No run → no meta row (suppresses "#0 · 0s" when no run exists).
+	if strings.Contains(html, `class="tile-run-id"`) {
+		t.Fatalf("ghost tile should omit run id: %s", html)
+	}
+}
+
 func TestLastSeenLabelAndClass(t *testing.T) {
 	if got := lastSeenLabel(nil); got != "never" {
 		t.Fatalf("label nil = %q, want never", got)

internal/web/templates/layout.templ

@@ -10,6 +10,7 @@ templ Layout(title string) {
 			<link rel="stylesheet" href="/static/app.css"/>
 			<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
 			<script src="https://unpkg.com/htmx-ext-sse@2.2.2" integrity="sha384-fw+eTlCc7suMV/1w/7fr2/PmwElUIt5i82bi+qTiLXvjRXZ2/FkiTNA/w0MhXnGI" crossorigin="anonymous"></script>
+			<script src="/static/app.js" defer></script>
 		</head>
 		<body hx-boost="true">
 			<header class="topbar">

internal/web/templates/layout_templ.go

@@ -42,7 +42,7 @@ func Layout(title string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " — Vetting</title><link rel=\"stylesheet\" href=\"/static/app.css\"><script src=\"https://unpkg.com/htmx.org@2.0.2\" integrity=\"sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ\" crossorigin=\"anonymous\"></script><script src=\"https://unpkg.com/htmx-ext-sse@2.2.2\" integrity=\"sha384-fw+eTlCc7suMV/1w/7fr2/PmwElUIt5i82bi+qTiLXvjRXZ2/FkiTNA/w0MhXnGI\" crossorigin=\"anonymous\"></script></head><body hx-boost=\"true\"><header class=\"topbar\"><div class=\"brand\">Vetting</div><nav><a href=\"/\">Dashboard</a> <a href=\"/hosts/new\">Register host</a></nav><div class=\"session\"><span class=\"heartbeat\" hx-ext=\"sse\" sse-connect=\"/events\" sse-swap=\"heartbeat\">·</span></div></header><main>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " — Vetting</title><link rel=\"stylesheet\" href=\"/static/app.css\"><script src=\"https://unpkg.com/htmx.org@2.0.2\" integrity=\"sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ\" crossorigin=\"anonymous\"></script><script src=\"https://unpkg.com/htmx-ext-sse@2.2.2\" integrity=\"sha384-fw+eTlCc7suMV/1w/7fr2/PmwElUIt5i82bi+qTiLXvjRXZ2/FkiTNA/w0MhXnGI\" crossorigin=\"anonymous\"></script><script src=\"/static/app.js\" defer></script></head><body hx-boost=\"true\"><header class=\"topbar\"><div class=\"brand\">Vetting</div><nav><a href=\"/\">Dashboard</a> <a href=\"/hosts/new\">Register host</a></nav><div class=\"session\"><span class=\"heartbeat\" hx-ext=\"sse\" sse-connect=\"/events\" sse-swap=\"heartbeat\">·</span></div></header><main>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -86,7 +86,7 @@ func BareLayout(title string) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/layout.templ`, Line: 38, Col: 17}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/layout.templ`, Line: 39, Col: 17}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {

internal/web/templates/registration.templ

@@ -14,53 +14,58 @@ type RegistrationForm struct {
 templ Registration(form RegistrationForm) {
 	@Layout("Register host") {
 		<section class="form-wrap">
-			<h1>Register host</h1>
+			<header class="form-wrap-head">
+				<h1>Register host</h1>
+				<a class="button-secondary" href="/">Back to dashboard</a>
+			</header>
 			if form.Error != "" {
 				<div class="error">{ form.Error }</div>
 			}
 			if form.QuickRegisterURL != "" {
-				<div class="quick-register">
+				<section class="detail-section quick-register">
 					<h2>Quick register <span class="muted">(recommended)</span></h2>
 					<p>Run this on the target host as root before wiping. It auto-detects MAC and hardware, then registers with this orchestrator:</p>
 					<pre class="one-liner"><code>{ "curl -fsSL " + form.QuickRegisterURL + "/register/quick.sh | sudo bash" }</code></pre>
 					<p class="muted">After the script prints <code>OK</code>, refresh the dashboard and click <b>Start vetting</b> on the new host.</p>
-				</div>
+				</section>
 			}
-			<details class="manual-register">
-				<summary>Register manually</summary>
-				<form method="post" action="/hosts" class="host-form">
-					<label>
-						Name
-						<input type="text" name="name" value={ form.Name } required pattern="[A-Za-z0-9_\-\.]+" placeholder="pve-node-03"/>
-					</label>
-					<label>
-						MAC address
-						<input type="text" name="mac" value={ form.MAC } required placeholder="aa:bb:cc:dd:ee:ff"/>
-					</label>
-					<div class="grid-2">
+			<section class="detail-section manual-register-card">
+				<details class="manual-register">
+					<summary><h2>Register manually</h2></summary>
+					<form method="post" action="/hosts" class="host-form">
 						<label>
-							WoL broadcast IP
-							<input type="text" name="wol_broadcast_ip" value={ form.WoLBroadcastIP } required placeholder="10.0.0.255"/>
+							Name
+							<input type="text" name="name" value={ form.Name } required pattern="[A-Za-z0-9_\-\.]+" placeholder="pve-node-03"/>
 						</label>
 						<label>
-							WoL port
-							<input type="number" name="wol_port" value={ defaultPort(form.WoLPort) } min="1" max="65535"/>
+							MAC address
+							<input type="text" name="mac" value={ form.MAC } required placeholder="aa:bb:cc:dd:ee:ff"/>
 						</label>
-					</div>
-					<label>
-						Expected hardware spec (YAML)
-						<textarea name="expected_spec_yaml" rows="12" required placeholder="cpu:&#10;  model_match: ...">{ form.ExpectedSpecYAML }</textarea>
-					</label>
-					<label>
-						Notes
-						<textarea name="notes" rows="3">{ form.Notes }</textarea>
-					</label>
-					<div class="actions">
-						<button type="submit">Register</button>
-						<a class="button-secondary" href="/">Cancel</a>
-					</div>
-				</form>
-			</details>
+						<div class="grid-2">
+							<label>
+								WoL broadcast IP
+								<input type="text" name="wol_broadcast_ip" value={ form.WoLBroadcastIP } required placeholder="10.0.0.255"/>
+							</label>
+							<label>
+								WoL port
+								<input type="number" name="wol_port" value={ defaultPort(form.WoLPort) } min="1" max="65535"/>
+							</label>
+						</div>
+						<label>
+							Expected hardware spec (YAML)
+							<textarea name="expected_spec_yaml" rows="12" required placeholder="cpu:&#10;  model_match: ...">{ form.ExpectedSpecYAML }</textarea>
+						</label>
+						<label>
+							Notes
+							<textarea name="notes" rows="3">{ form.Notes }</textarea>
+						</label>
+						<div class="actions">
+							<button type="submit" class="btn-primary">Register</button>
+							<a class="button-secondary" href="/">Cancel</a>
+						</div>
+					</form>
+				</details>
+			</section>
 		</section>
 	}
 }

internal/web/templates/registration_templ.go

@@ -52,7 +52,7 @@ func Registration(form RegistrationForm) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"form-wrap\"><h1>Register host</h1>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<section class=\"form-wrap\"><header class=\"form-wrap-head\"><h1>Register host</h1><a class=\"button-secondary\" href=\"/\">Back to dashboard</a></header>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -64,7 +64,7 @@ func Registration(form RegistrationForm) templ.Component {
 				var templ_7745c5c3_Var3 string
 				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(form.Error)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 19, Col: 35}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 22, Col: 35}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 				if templ_7745c5c3_Err != nil {
@@ -76,32 +76,32 @@ func Registration(form RegistrationForm) templ.Component {
 				}
 			}
 			if form.QuickRegisterURL != "" {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<div class=\"quick-register\"><h2>Quick register <span class=\"muted\">(recommended)</span></h2><p>Run this on the target host as root before wiping. It auto-detects MAC and hardware, then registers with this orchestrator:</p><pre class=\"one-liner\"><code>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<section class=\"detail-section quick-register\"><h2>Quick register <span class=\"muted\">(recommended)</span></h2><p>Run this on the target host as root before wiping. It auto-detects MAC and hardware, then registers with this orchestrator:</p><pre class=\"one-liner\"><code>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("curl -fsSL " + form.QuickRegisterURL + "/register/quick.sh | sudo bash")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 25, Col: 108}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 28, Col: 108}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</code></pre><p class=\"muted\">After the script prints <code>OK</code>, refresh the dashboard and click <b>Start vetting</b> on the new host.</p></div>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</code></pre><p class=\"muted\">After the script prints <code>OK</code>, refresh the dashboard and click <b>Start vetting</b> on the new host.</p></section>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<details class=\"manual-register\"><summary>Register manually</summary><form method=\"post\" action=\"/hosts\" class=\"host-form\"><label>Name <input type=\"text\" name=\"name\" value=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<section class=\"detail-section manual-register-card\"><details class=\"manual-register\"><summary><h2>Register manually</h2></summary><form method=\"post\" action=\"/hosts\" class=\"host-form\"><label>Name <input type=\"text\" name=\"name\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(form.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 34, Col: 54}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 38, Col: 55}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -114,7 +114,7 @@ func Registration(form RegistrationForm) templ.Component {
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(form.MAC)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 38, Col: 52}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 42, Col: 53}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -127,7 +127,7 @@ func Registration(form RegistrationForm) templ.Component {
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(form.WoLBroadcastIP)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 43, Col: 77}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 47, Col: 78}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -140,7 +140,7 @@ func Registration(form RegistrationForm) templ.Component {
 			var templ_7745c5c3_Var8 string
 			templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(defaultPort(form.WoLPort))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 47, Col: 77}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 51, Col: 78}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 			if templ_7745c5c3_Err != nil {
@@ -153,7 +153,7 @@ func Registration(form RegistrationForm) templ.Component {
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(form.ExpectedSpecYAML)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 52, Col: 126}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 56, Col: 127}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
@@ -166,13 +166,13 @@ func Registration(form RegistrationForm) templ.Component {
 			var templ_7745c5c3_Var10 string
 			templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(form.Notes)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 56, Col: 50}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/registration.templ`, Line: 60, Col: 51}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</textarea></label><div class=\"actions\"><button type=\"submit\">Register</button> <a class=\"button-secondary\" href=\"/\">Cancel</a></div></form></details></section>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</textarea></label><div class=\"actions\"><button type=\"submit\" class=\"btn-primary\">Register</button> <a class=\"button-secondary\" href=\"/\">Cancel</a></div></form></details></section></section>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}

internal/web/templates/substep_row.templ

@@ -0,0 +1,81 @@
+package templates
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"time"
+
+	"vetting/internal/model"
+)
+
+// subStepDuration formats a sub-step's elapsed time the same way
+// stageDuration does for pipeline nodes. Empty string when not started.
+func subStepDuration(ss model.SubStep) string {
+	if ss.StartedAt == nil {
+		return ""
+	}
+	end := time.Now()
+	if ss.CompletedAt != nil {
+		end = *ss.CompletedAt
+	}
+	d := end.Sub(*ss.StartedAt)
+	if d < 0 {
+		d = 0
+	}
+	switch {
+	case d < time.Second:
+		return fmt.Sprintf("%dms", int(d/time.Millisecond))
+	case d < 10*time.Second:
+		return fmt.Sprintf("%.1fs", d.Seconds())
+	case d < time.Minute:
+		return fmt.Sprintf("%ds", int(d/time.Second))
+	case d < time.Hour:
+		return fmt.Sprintf("%dm", int(d/time.Minute))
+	default:
+		return fmt.Sprintf("%dh", int(d/time.Hour))
+	}
+}
+
+// subStepMarker mirrors stageMarker — a single-char glyph used inside the
+// state badge. StageState values reused verbatim for sub-steps.
+func subStepMarker(s model.StageState) string {
+	switch s {
+	case model.StagePassed:
+		return "✓"
+	case model.StageFailed:
+		return "!"
+	case model.StageRunning:
+		return "●"
+	case model.StageSkipped:
+		return "–"
+	}
+	return ""
+}
+
+// SubStepRow renders one sub-step entry for the expanded-step pane. The
+// outer <div> carries the sse-swap target keyed by (runID, stage,
+// ordinal) so the orchestrator's PublishSubStepUpdate can swap just this
+// row without touching the rest of the stage panel. hx-swap="outerHTML"
+// keeps the attributes intact across repeat swaps.
+templ SubStepRow(ss model.SubStep) {
+	<div
+		id={ fmt.Sprintf("substep-%d-%s-%d", ss.RunID, ss.StageName, ss.Ordinal) }
+		class={ "substep", "substep-" + string(ss.State) }
+		sse-swap={ fmt.Sprintf("substep-%d-%s-%d", ss.RunID, ss.StageName, ss.Ordinal) }
+		hx-swap="outerHTML"
+	>
+		<span class={ "substep-badge", "substep-badge-" + string(ss.State) }>{ subStepMarker(ss.State) }</span>
+		<span class="substep-name">{ ss.Name }</span>
+		<span class="substep-duration">{ subStepDuration(ss) }</span>
+	</div>
+}
+
+// RenderSubStepRowString is the one-shot renderer the orchestrator
+// registers as SubStepRenderer so it can emit substep-* SSE payloads
+// without importing the templates package directly.
+func RenderSubStepRowString(ss model.SubStep) string {
+	var buf bytes.Buffer
+	_ = SubStepRow(ss).Render(context.Background(), &buf)
+	return buf.String()
+}

internal/web/templates/substep_row_templ.go

@@ -0,0 +1,212 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.1001
+package templates
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import (
+	"bytes"
+	"context"
+	"fmt"
+	"time"
+
+	"vetting/internal/model"
+)
+
+// subStepDuration formats a sub-step's elapsed time the same way
+// stageDuration does for pipeline nodes. Empty string when not started.
+func subStepDuration(ss model.SubStep) string {
+	if ss.StartedAt == nil {
+		return ""
+	}
+	end := time.Now()
+	if ss.CompletedAt != nil {
+		end = *ss.CompletedAt
+	}
+	d := end.Sub(*ss.StartedAt)
+	if d < 0 {
+		d = 0
+	}
+	switch {
+	case d < time.Second:
+		return fmt.Sprintf("%dms", int(d/time.Millisecond))
+	case d < 10*time.Second:
+		return fmt.Sprintf("%.1fs", d.Seconds())
+	case d < time.Minute:
+		return fmt.Sprintf("%ds", int(d/time.Second))
+	case d < time.Hour:
+		return fmt.Sprintf("%dm", int(d/time.Minute))
+	default:
+		return fmt.Sprintf("%dh", int(d/time.Hour))
+	}
+}
+
+// subStepMarker mirrors stageMarker — a single-char glyph used inside the
+// state badge. StageState values reused verbatim for sub-steps.
+func subStepMarker(s model.StageState) string {
+	switch s {
+	case model.StagePassed:
+		return "✓"
+	case model.StageFailed:
+		return "!"
+	case model.StageRunning:
+		return "●"
+	case model.StageSkipped:
+		return "–"
+	}
+	return ""
+}
+
+// SubStepRow renders one sub-step entry for the expanded-step pane. The
+// outer <div> carries the sse-swap target keyed by (runID, stage,
+// ordinal) so the orchestrator's PublishSubStepUpdate can swap just this
+// row without touching the rest of the stage panel. hx-swap="outerHTML"
+// keeps the attributes intact across repeat swaps.
+func SubStepRow(ss model.SubStep) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		var templ_7745c5c3_Var2 = []any{"substep", "substep-" + string(ss.State)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var2...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("substep-%d-%s-%d", ss.RunID, ss.StageName, ss.Ordinal))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/substep_row.templ`, Line: 63, Col: 74}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\" class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var2).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/substep_row.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" sse-swap=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("substep-%d-%s-%d", ss.RunID, ss.StageName, ss.Ordinal))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/substep_row.templ`, Line: 65, Col: 80}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\" hx-swap=\"outerHTML\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 = []any{"substep-badge", "substep-badge-" + string(ss.State)}
+		templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var6...)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<span class=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var6).String())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/substep_row.templ`, Line: 1, Col: 0}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(subStepMarker(ss.State))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/substep_row.templ`, Line: 68, Col: 96}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span> <span class=\"substep-name\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(ss.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/substep_row.templ`, Line: 69, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span> <span class=\"substep-duration\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(subStepDuration(ss))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/web/templates/substep_row.templ`, Line: 70, Col: 54}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</span></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// RenderSubStepRowString is the one-shot renderer the orchestrator
+// registers as SubStepRenderer so it can emit substep-* SSE payloads
+// without importing the templates package directly.
+func RenderSubStepRowString(ss model.SubStep) string {
+	var buf bytes.Buffer
+	_ = SubStepRow(ss).Render(context.Background(), &buf)
+	return buf.String()
+}
+
+var _ = templruntime.GeneratedTemplate