From 50986b5a056f09de5299d089387653b097bed1de Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Wed, 27 May 2026 01:50:36 +0200
Subject: [PATCH] dashboard: render `step` sub-line on rebuild queue entries
 (closes #437)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Frontend half of #437 — paired with damocles's #501 backend which
adds `step: Option<String>` to `QueueEntry` and annotates 9
worker phases across ApplyCommit / Spawn / MetaUpdate / Rebuild
pipelines.

When `entry.step` is present, render a cyan `↳ <step>` sub-line
below the main row in `renderQueueEntry`. Wraps to its own flex
line via `flex-basis: 100%`, indented 1.8em to align under the
state glyph + kind. Terminal transitions clear `step` on the
backend, so the sub-line just disappears on Done / Failed rows —
no client-side staleness handling needed.

CSS: `.rqe-step` keys off cyan to visually group with the
running-spinner color cue (vs the muted `.rqe-when` /
`.rqe-reason` chips). `tabular-nums` keeps the indented arrow
column stable as step strings change length mid-build.

docs/web-ui.md updated to describe the new sub-line behaviour
in the R3BU1LD QU3U3 section.
---
 docs/web-ui.md                                | 11 ++++++++---
 frontend/packages/dashboard/src/dashboard.css | 12 ++++++++++++
 frontend/packages/dashboard/src/tabs.js       |  8 ++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/docs/web-ui.md b/docs/web-ui.md
index 68918f9f..9a840e47 100644
--- a/docs/web-ui.md
+++ b/docs/web-ui.md
@@ -208,9 +208,14 @@ timing, and an optional reason / error. Meta-update cascade
 rebuilds nest under their parent entry (`parent_id` grouping;
 `rqe-child` CSS class). Dedup: re-enqueueing a still-queued op
 for the same agent collapses into the existing entry. Running
-entries tick elapsed seconds live. Cold-loaded from
-`/api/state.rebuild_queue`; live updates via `rebuild_queue_changed`
-snapshot event.
+entries tick elapsed seconds live, and when the worker has
+annotated the current phase (#437) a cyan `↳ <step>` sub-line
+appears under the main row showing the in-flight step name
+(e.g. `↳ meta prepare_deploy` → `↳ nixos-container update` →
+`↳ finalize deploy`). Terminal transitions clear `step` on the
+backend so Done / Failed rows don't render stale labels.
+Cold-loaded from `/api/state.rebuild_queue`; live updates via
+`rebuild_queue_changed` snapshot event.
 
 **K3PT ST4T3** — destroyed-but-state-kept tombstones (size +
 age + claude-creds badge). Two actions: `⊕ R3V1V3` (queues a
diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index de637f63..417712b4 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -791,6 +791,18 @@ code {
 .rqe-source-approval { color: var(--green); border-color: var(--green); }
 .rqe-when { color: var(--muted); font-size: 0.85em; }
 .rqe-reason { color: var(--muted); font-size: 0.85em; flex: 1 1 auto; }
+/* #437: in-flight step indicator on running queue entries — sub-line
+   below the main row, indented under the state glyph + kind. Cyan
+   keeps it visually grouped with the running spinner instead of
+   blending into the muted reason/timing chips. flex-basis: 100% so
+   it always wraps to its own line. */
+.rqe-step {
+  flex-basis: 100%;
+  margin: 0.1em 0 0 1.8em;
+  color: var(--cyan);
+  font-size: 0.85em;
+  font-variant-numeric: tabular-nums;
+}
 .rqe-error {
   flex-basis: 100%;
   margin: 0.3em 0 0;
diff --git a/frontend/packages/dashboard/src/tabs.js b/frontend/packages/dashboard/src/tabs.js
index 11aa7be1..ff16ce67 100644
--- a/frontend/packages/dashboard/src/tabs.js
+++ b/frontend/packages/dashboard/src/tabs.js
@@ -1823,6 +1823,14 @@ window.marked = marked;
       const r = entry.reason.split('\n')[0];
       li.append(' ', el('span', { class: 'rqe-reason', title: entry.reason }, '— ' + truncate(r, 60)));
     }
+    // Current step (#437 / #501): backend annotates the in-flight
+    // phase on `running` entries — sub-line below the main row so the
+    // operator can see "what's happening right now" inside a long
+    // build. Terminal transitions clear `step` on the backend so this
+    // doesn't render stale labels on Done / Failed rows.
+    if (entry.step) {
+      li.append(el('div', { class: 'rqe-step' }, '↳ ' + entry.step));
+    }
     // Error block, when failed.
     if (entry.error) {
       li.append(el('pre', { class: 'rqe-error', title: entry.error }, truncate(entry.error, 200)));