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>

webui/src/styles/workflow.css

@@ -328,14 +328,20 @@
 
 .workflow-palette-items {
   display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
   height: calc(100% - 44px);
   gap: 4px;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: 8px;
+  scrollbar-gutter: stable;
 }
 
 .workflow-palette-group {
   display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
   gap: 2px;
 }
 
@@ -548,11 +554,15 @@
 
 .workflow-inspector-fields {
   display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
   gap: 12px;
-  min-height: 0;
+  height: calc(100% - 44px);
   flex: 1 1 auto;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: 12px;
+  scrollbar-gutter: stable;
 }
 
 .workflow-inspector-fields input,
@@ -879,7 +889,6 @@
   display: grid;
 }
 
-.workflow-run-history > div > span,
 .workflow-run-events > div > span {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(160px, auto) auto;
@@ -890,6 +899,100 @@
   padding: 6px 2px;
 }
 
+.workflow-run-history > div {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(150px, 100%), 1fr)
+  );
+  overflow-x: auto;
+  padding: 2px 0 4px;
+}
+
+.workflow-run-stage {
+  --workflow-stage-color: var(--line-dark);
+  position: relative;
+  display: grid;
+  min-width: 140px;
+  grid-template-columns: 32px minmax(0, 1fr);
+  gap: 7px;
+  padding: 4px 12px 4px 0;
+}
+
+.workflow-run-stage[data-state="completed"] {
+  --workflow-stage-color: var(--green);
+}
+
+.workflow-run-stage[data-state="running"],
+.workflow-run-stage[data-state="waiting"] {
+  --workflow-stage-color: var(--blue);
+}
+
+.workflow-run-stage[data-state="failed"],
+.workflow-run-stage[data-state="cancelled"] {
+  --workflow-stage-color: var(--red);
+}
+
+.workflow-run-stage[data-state="superseded"] {
+  --workflow-stage-color: var(--muted);
+}
+
+.workflow-run-stage:not(:last-child)::after {
+  position: absolute;
+  z-index: 0;
+  top: 18px;
+  left: 27px;
+  width: calc(100% - 17px);
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--workflow-stage-color),
+    var(--line-dark)
+  );
+  content: "";
+}
+
+.workflow-run-stage-marker {
+  z-index: 1;
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid var(--workflow-stage-color);
+  border-radius: 50%;
+  background: var(--panel);
+  color: var(--workflow-stage-color);
+}
+
+.workflow-run-stage[data-current="true"] .workflow-run-stage-marker {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--workflow-stage-color) 18%, transparent);
+}
+
+.workflow-run-stage-copy {
+  z-index: 1;
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 3px;
+  padding-top: 2px;
+}
+
+.workflow-run-stage-copy strong,
+.workflow-run-stage-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workflow-run-stage-copy strong {
+  color: var(--text-strong);
+  font-size: 11px;
+}
+
+.workflow-run-stage-copy .status-badge {
+  width: fit-content;
+  margin-top: 2px;
+}
+
 .workflow-run-history small,
 .workflow-run-events small {
   color: var(--muted);