feat: add BPMN inspection and workflow progress visuals

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);