feat: add BPMN inspection and workflow progress visuals

webui/src/features/workflow/WorkflowRunsDialog.tsx

@@ -5,6 +5,10 @@ import {
   useState
 } from "react";
 import {
+  AlertTriangle,
+  Check,
+  Circle,
+  Clock3,
   ExternalLink,
   Play,
   RefreshCw,
@@ -417,13 +421,36 @@ export default function WorkflowRunsDialog({
                     <h3>Progress</h3>
                     <div>
                       {selected.steps.map((step) => (
-                        <span key={step.id}>
-                          <strong>{step.node_id}</strong>
-                          <small>
-                            {step.node_type} · attempt {step.attempt}
-                          </small>
-                          <StatusBadge status={step.status} label={step.status} />
-                        </span>
+                        <div
+                          key={step.id}
+                          className="workflow-run-stage"
+                          data-state={step.status}
+                          data-current={
+                            step.id === selected.current_step_id || undefined
+                          }
+                        >
+                          <span className="workflow-run-stage-marker">
+                            {step.status === "completed" ? (
+                              <Check size={15} aria-hidden="true" />
+                            ) : step.status === "failed" ? (
+                              <AlertTriangle size={15} aria-hidden="true" />
+                            ) : ["running", "waiting"].includes(step.status) ? (
+                              <Clock3 size={15} aria-hidden="true" />
+                            ) : (
+                              <Circle size={13} aria-hidden="true" />
+                            )}
+                          </span>
+                          <span className="workflow-run-stage-copy">
+                            <strong>{step.node_id}</strong>
+                            <small>
+                              {step.node_type} · attempt {step.attempt}
+                            </small>
+                            <StatusBadge
+                              status={step.status}
+                              label={step.status}
+                            />
+                          </span>
+                        </div>
                       ))}
                     </div>
                   </section>