@lostgradient/cinder 0.8.0 → 0.11.0

package/src/components/run-step-timeline/run-step-timeline.svelte

@@ -6,152 +6,170 @@ export {};
 import { classNames } from '../../utilities/class-names.ts';
 import Badge from '../badge/badge.svelte';
 import Collapsible from '../collapsible/collapsible.svelte';
+import RunStepBranchDisclosure from './run-step-branch-disclosure.svelte';
 import Link from '../link/link.svelte';
 import Progress from '../progress/progress.svelte';
 import StatusDot from '../status-dot/status-dot.svelte';
+import { actionsCountLabel, badgeVariant, branchGroupHasCurrentStep, branchOutcomeSummary, branchStartsCollapsed, hasProgress, hiddenNestedStepLabel, isCurrent, isTerminal, laneOutcomeBadgeVariant, laneOutcomeLabel, metadataItems, safeStepLinkHref, statusDotStatus, statusLabel, } from './run-step-timeline.utilities.ts';
 const MAX_NESTED_STEP_DEPTH = 3;
 let { steps, label, class: className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest } = $props();
 const resolvedAriaLabel = $derived(ariaLabelledby === undefined && ariaLabel === undefined ? label : ariaLabel);
-const renderedSteps = $derived(flattenRunSteps(steps));
-// Map generic RunStepStatus onto StatusDot status tokens.
-function statusDotStatus(status) {
-    switch (status) {
-        case 'succeeded':
-            return 'success';
-        case 'failed':
-            return 'danger';
-        case 'running':
-            return 'online';
-        case 'retrying':
-            return 'warning';
-        case 'waiting_approval':
-            return 'accent';
-        case 'cancelled':
-            return 'offline';
-        case 'skipped':
-            return 'neutral';
-        case 'pending':
-            return 'pending';
-    }
+const renderedEntries = $derived(flattenEntries(steps));
+function isBranchGroup(entry) {
+    return 'kind' in entry && entry.kind === 'branch';
 }
-// Human-readable label for the StatusDot accessible name.
-function statusLabel(status) {
-    switch (status) {
-        case 'pending':
-            return 'Pending';
-        case 'running':
-            return 'Running';
-        case 'succeeded':
-            return 'Succeeded';
-        case 'failed':
-            return 'Failed';
-        case 'cancelled':
-            return 'Cancelled';
-        case 'skipped':
-            return 'Skipped';
-        case 'retrying':
-            return 'Retrying';
-        case 'waiting_approval':
-            return 'Waiting approval';
+// Flatten the top-level entries, keeping contiguous runs of steps together so
+// the connector rail spans them, and emitting a standalone row for each
+// branch group (which renders its own parallel sub-lanes).
+function flattenEntries(entries) {
+    const result = [];
+    let stepRun = [];
+    const flushRun = () => {
+        if (stepRun.length === 0)
+            return;
+        result.push(...flattenSteps(stepRun, ''));
+        stepRun = [];
+    };
+    for (const entry of entries) {
+        if (isBranchGroup(entry)) {
+            flushRun();
+            result.push({
+                kind: 'branch',
+                group: entry,
+                // A raw `%` can never appear in an escaped step-path segment
+                // (escapeStepPathSegment turns `%` into `%25`), so this branch key
+                // cannot collide with any step's path key.
+                pathKey: `%branch/${escapeStepPathSegment(entry.id)}`,
+                connectorAfter: 'hidden',
+            });
+        }
+        else {
+            stepRun.push(entry);
+        }
     }
+    flushRun();
+    // `flattenSteps` computes `aria-current` within each contiguous run; on the
+    // outer rail, keep a SINGLE deepest current row across the whole timeline so
+    // a branch group between two active runs doesn't produce two current rows.
+    // `applyGlobalRailConnectors` then reconnects the rail across run/branch
+    // boundaries — each run is flattened in isolation, so its last row and the
+    // branch rows would otherwise both hide their connector and split one
+    // ordered run (step → branch → step) into disconnected rails.
+    // `applyGlobalTopLevelCompensates` likewise resolves `compensates` for
+    // top-level steps across the whole rail, since a compensating step can be
+    // separated from its forward sibling by a branch group (different run).
+    return applyGlobalRailConnectors(applyGlobalTopLevelCompensates(applyGlobalRailAriaCurrent(result)));
 }
-function badgeVariant(status) {
-    switch (status) {
-        case 'succeeded':
-            return 'success';
-        case 'failed':
-            return 'danger';
-        case 'running':
-            return 'info';
-        case 'retrying':
-            return 'warning';
-        case 'waiting_approval':
-            return 'accent';
-        case 'cancelled':
-            return 'neutral';
-        case 'skipped':
-            return 'neutral';
-        case 'pending':
-            return 'neutral';
+// Resolve `compensates` for TOP-LEVEL steps across the entire outer rail. Each
+// contiguous run is flattened in isolation, so a compensating top-level step
+// separated from its forward sibling by a branch group (e.g. `charge → branch
+// → refund` where refund compensates charge) would never find it in its own
+// run's label map. Nested steps are unaffected: a branch group never nests
+// inside a step's children, so nested siblings always share a run and are
+// already resolved correctly by `flattenSteps`.
+function applyGlobalTopLevelCompensates(rows) {
+    const topLevelLabelByPathKey = new Map();
+    for (const row of rows) {
+        if (row.kind === 'step' && row.depth === 0) {
+            topLevelLabelByPathKey.set(row.pathKey, row.step.label);
+        }
     }
+    return rows.map((row) => {
+        if (row.kind !== 'step' || row.depth !== 0 || row.step.compensates === undefined)
+            return row;
+        return {
+            ...row,
+            compensatesLabel: resolveSiblingCompensatesLabel(row, topLevelLabelByPathKey),
+        };
+    });
 }
-// Whether this status is a terminal state (no further changes expected).
-function isTerminal(status) {
-    return (status === 'succeeded' ||
-        status === 'failed' ||
-        status === 'cancelled' ||
-        status === 'skipped');
-}
-function isCurrent(status) {
-    return status === 'running' || status === 'retrying' || status === 'waiting_approval';
-}
-// Whether this step has a progress bar to show.
-function hasProgress(step) {
-    return step.progress !== undefined && isCurrent(step.status);
+// A rail row's effective depth for connector purposes. Branch groups always
+// render at the top level, so they sit at depth 0.
+function railRowDepth(row) {
+    return row.kind === 'branch' ? 0 : row.depth;
 }
-// Metadata items for a step, as term/definition pairs.
-function metadataItems(step) {
-    const items = [];
-    if (step.startTime !== undefined) {
-        items.push({ term: 'Started', definition: step.startTime });
-    }
-    if (step.endTime !== undefined) {
-        items.push({ term: 'Ended', definition: step.endTime });
-    }
-    if (step.duration !== undefined) {
-        items.push({ term: 'Duration', definition: step.duration });
-    }
-    if (step.attemptCount !== undefined && step.attemptCount > 1) {
-        items.push({ term: 'Attempts', definition: String(step.attemptCount) });
-    }
-    return items;
-}
-function actionsCountLabel(actionsCount) {
-    return actionsCount === 1 ? '1 action' : `${actionsCount} actions`;
+// Recompute each top-level row's downward connector against the ACTUAL next
+// rendered row (including branch rows), rather than the per-run view that
+// `flattenSteps` sees. A connector shows unless the row is last or the next
+// row dedents to a shallower level — so a depth-0 step followed by a branch,
+// and a branch followed by another run, both stay linked.
+function applyGlobalRailConnectors(rows) {
+    return rows.map((row, index) => {
+        const next = rows[index + 1];
+        const connectorAfter = next === undefined || railRowDepth(next) < railRowDepth(row) ? 'hidden' : 'visible';
+        return { ...row, connectorAfter };
+    });
 }
-function hiddenNestedStepLabel(hiddenStepCount) {
-    return hiddenStepCount === 1
-        ? '1 nested step hidden'
-        : `${hiddenStepCount} nested steps hidden`;
+// The "current depth" of a rail row: deeper is more current. A depth-limit row
+// that hides a current descendant counts one level below its own depth.
+function rowCurrentDepth(row) {
+    if (row.kind === 'depth-limit')
+        return row.hiddenCurrent ? row.depth + 1 : -1;
+    if (row.kind === 'step')
+        return isCurrent(row.step.status) ? row.depth : -1;
+    return -1;
 }
-function safeStepLinkHref(href) {
-    const trimmedHref = href.trim();
-    if (trimmedHref === '')
-        return undefined;
-    if (/[\u0000-\u001F\u007F]/.test(trimmedHref))
-        return undefined;
-    if (trimmedHref.includes('\\'))
-        return undefined;
-    const leadingSeparators = trimmedHref.match(/^[\\/]+/)?.[0] ?? '';
-    if (leadingSeparators.length > 1)
-        return undefined;
-    if (/^[A-Za-z][A-Za-z\d+.-]*:/.test(trimmedHref)) {
-        try {
-            const parsedUrl = new URL(trimmedHref);
-            return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:'
-                ? trimmedHref
-                : undefined;
-        }
-        catch {
-            return undefined;
+// Reduce the rail to a single `aria-current="step"` row: the deepest current
+// step across all top-level runs. Branch groups do not participate.
+function applyGlobalRailAriaCurrent(rows) {
+    let deepestRow;
+    let deepestDepth = -1;
+    for (const row of rows) {
+        const depth = rowCurrentDepth(row);
+        if (depth > deepestDepth) {
+            deepestDepth = depth;
+            deepestRow = row;
         }
     }
-    return trimmedHref;
+    return rows.map((row) => row.kind === 'branch' ? row : { ...row, ariaCurrent: row === deepestRow });
 }
-function flattenRunSteps(steps) {
+// Flatten a RunStep[] (with nested children) into rendered rows, computing the
+// connector rail, the single deepest `aria-current` row, and resolved
+// compensation labels. Reused for the main rail and for each branch lane.
+function flattenSteps(list, pathPrefix) {
     const rows = [];
-    appendRunStepRows(rows, steps, 0, '');
+    appendRunStepRows(rows, list, 0, pathPrefix);
     const currentRowIndex = deepestCurrentStepIndex(rows);
-    return rows.map((row, index) => ({
-        ...row,
-        connectorAfter: rows[index + 1] === undefined || (rows[index + 1]?.depth ?? 0) < row.depth
-            ? 'hidden'
-            : 'visible',
-        ariaCurrent: index === currentRowIndex,
-    }));
+    // Index every step row by its unique path key (built from the escaped id
+    // chain). A `compensates` id then resolves to a true SIBLING — a step under
+    // the same parent — rather than any same-id descendant elsewhere in the run
+    // or lane. Iterating the already-bounded, depth-capped rows also avoids
+    // recursing the full step tree, which could overflow the stack.
+    const labelByPathKey = new Map();
+    for (const row of rows) {
+        if (row.kind === 'step')
+            labelByPathKey.set(row.pathKey, row.step.label);
+    }
+    return rows.map((row, index) => {
+        const next = rows[index + 1];
+        const connectorAfter = next === undefined || next.depth < row.depth ? 'hidden' : 'visible';
+        const ariaCurrent = index === currentRowIndex;
+        if (row.kind === 'depth-limit') {
+            return { ...row, connectorAfter, ariaCurrent };
+        }
+        return {
+            ...row,
+            connectorAfter,
+            ariaCurrent,
+            compensatesLabel: resolveSiblingCompensatesLabel(row, labelByPathKey),
+        };
+    });
+}
+// Resolve a step's `compensates` id to the label of a sibling step (one under
+// the same parent), or `undefined` when there is no such sibling. Never
+// resolves to the step itself.
+function resolveSiblingCompensatesLabel(row, labelByPathKey) {
+    if (row.step.compensates === undefined)
+        return undefined;
+    const lastSeparator = row.pathKey.lastIndexOf('/');
+    const parentPrefix = lastSeparator === -1 ? '' : row.pathKey.slice(0, lastSeparator);
+    const siblingPathKey = nestedStepPathKey(parentPrefix, row.step.compensates);
+    if (siblingPathKey === row.pathKey)
+        return undefined;
+    return labelByPathKey.get(siblingPathKey);
 }
-function appendRunStepRows(rows, steps, depth, pathPrefix) {
-    for (const step of steps) {
+function appendRunStepRows(rows, list, depth, pathPrefix) {
+    for (const step of list) {
         const pathKey = nestedStepPathKey(pathPrefix, step.id);
         rows.push({ kind: 'step', step, depth, pathKey });
         if (step.children && step.children.length > 0) {
@@ -178,10 +196,10 @@ function nestedStepPathKey(pathPrefix, stepId) {
 function escapeStepPathSegment(stepId) {
     return stepId.replaceAll('%', '%25').replaceAll('/', '%2F');
 }
-function summarizeNestedRunSteps(steps) {
+function summarizeNestedRunSteps(list) {
     let count = 0;
     let hasCurrent = false;
-    const stack = [...steps];
+    const stack = [...list];
     while (stack.length > 0) {
         const step = stack.pop();
         if (step === undefined)
@@ -189,10 +207,10 @@ function summarizeNestedRunSteps(steps) {
         count += 1;
         if (isCurrent(step.status))
             hasCurrent = true;
-        const children = step.children;
-        if (children) {
-            for (let index = children.length - 1; index >= 0; index -= 1) {
-                const child = children[index];
+        const stepChildren = step.children;
+        if (stepChildren) {
+            for (let index = stepChildren.length - 1; index >= 0; index -= 1) {
+                const child = stepChildren[index];
                 if (child)
                     stack.push(child);
             }
@@ -216,162 +234,263 @@ function deepestCurrentStepIndex(rows) {
     });
     return currentIndex;
 }
+function laneRows(lane) {
+    return flattenSteps(lane.steps, '');
+}
+function laneStateLabel(lane) {
+    return lane.outcome === undefined ? 'racing' : laneOutcomeLabel(lane.outcome).toLowerCase();
+}
 </script>
 
+{#snippet stepItem(row: RenderedStepRow)}
+  {@const step = row.step}
+  {@const terminal = isTerminal(step.status)}
+  {@const metadata = metadataItems(step)}
+  <li
+    class="cinder-run-step-timeline__item"
+    data-cinder-status={step.status}
+    data-cinder-depth={row.depth}
+    data-cinder-path={row.pathKey}
+    data-cinder-terminal={terminal ? '' : undefined}
+    data-cinder-rewound={step.rewound ? '' : undefined}
+    data-cinder-compensation={row.compensatesLabel !== undefined ? '' : undefined}
+    data-cinder-connector-after={row.connectorAfter}
+    aria-current={row.ariaCurrent ? 'step' : undefined}
+    style:--_cinder-rst-depth={row.depth}
+  >
+    <div class="cinder-run-step-timeline__event">
+      <span class="cinder-run-step-timeline__marker" aria-hidden="true" inert>
+        <StatusDot
+          status={statusDotStatus(step.status)}
+          label={statusLabel(step.status)}
+          showLabel={false}
+          size="md"
+        />
+      </span>
+
+      <div class="cinder-run-step-timeline__content">
+        <div class="cinder-run-step-timeline__header">
+          <span class="cinder-run-step-timeline__label">{step.label}</span>
+          {#if step.link}
+            {@const safeLinkHref = safeStepLinkHref(step.link.href)}
+            {#if safeLinkHref}
+              <Link href={safeLinkHref} class="cinder-run-step-timeline__link">
+                {step.link.label}
+              </Link>
+            {:else}
+              <span class="cinder-run-step-timeline__link cinder-run-step-timeline__link--unsafe">
+                {step.link.label}
+              </span>
+            {/if}
+          {/if}
+          <Badge
+            class="cinder-run-step-timeline__status"
+            variant={badgeVariant(step.status)}
+            size="xs"
+            aria-label={`Status: ${statusLabel(step.status)}`}
+          >
+            {statusLabel(step.status)}
+          </Badge>
+          {#if step.rewound}
+            <Badge
+              class="cinder-run-step-timeline__flag"
+              variant="neutral"
+              size="xs"
+              aria-label="State: rewound — speculatively executed, then unwound"
+            >
+              Rewound
+            </Badge>
+          {/if}
+          {#if row.compensatesLabel !== undefined}
+            <Badge
+              class="cinder-run-step-timeline__flag"
+              variant="warning"
+              size="xs"
+              aria-label={`Compensates ${row.compensatesLabel} — reverses the forward step`}
+            >
+              Compensates {row.compensatesLabel}
+            </Badge>
+          {/if}
+          {#if step.attemptCount !== undefined && step.attemptCount > 1}
+            <Badge variant="neutral" size="xs" mono>attempt {step.attemptCount}</Badge>
+          {/if}
+          {#if step.actionsCount !== undefined && step.actionsCount > 0}
+            <Badge variant="neutral" size="xs" mono>{actionsCountLabel(step.actionsCount)}</Badge>
+          {/if}
+        </div>
+
+        {#if hasProgress(step)}
+          <div class="cinder-run-step-timeline__progress">
+            <Progress
+              value={step.progress ?? 0}
+              max={step.progressMax ?? 100}
+              size="sm"
+              ariaLabel={`${step.label} progress`}
+            />
+          </div>
+        {/if}
+
+        {#if metadata.length > 0}
+          <dl class="cinder-run-step-timeline__meta">
+            {#each metadata as item (item.term)}
+              <div class="cinder-run-step-timeline__meta-row">
+                <dt class="cinder-run-step-timeline__meta-term">{item.term}</dt>
+                <dd class="cinder-run-step-timeline__meta-definition">{item.definition}</dd>
+              </div>
+            {/each}
+          </dl>
+        {/if}
+
+        {#if step.details && step.details.length > 0}
+          <div class="cinder-run-step-timeline__details">
+            {#each step.details as detail (detail.id)}
+              <Collapsible trigger={detail.label}>
+                <pre class="cinder-run-step-timeline__detail-content">{detail.content}</pre>
+              </Collapsible>
+            {/each}
+          </div>
+        {/if}
+
+        {#if children}
+          <div class="cinder-run-step-timeline__body">
+            {@render children(step)}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </li>
+{/snippet}
+
+{#snippet depthLimitItem(row: RenderedDepthLimitRow)}
+  <li
+    class="cinder-run-step-timeline__item"
+    data-cinder-status="depth-limit"
+    data-cinder-depth={row.depth}
+    data-cinder-path={row.pathKey}
+    data-cinder-connector-after={row.connectorAfter}
+    data-cinder-depth-limit
+    aria-current={row.ariaCurrent ? 'step' : undefined}
+    style:--_cinder-rst-depth={row.depth}
+  >
+    <div class="cinder-run-step-timeline__event">
+      <span class="cinder-run-step-timeline__marker" aria-hidden="true" inert>
+        <StatusDot status="neutral" label="Nested steps hidden" showLabel={false} size="md" />
+      </span>
+
+      <div class="cinder-run-step-timeline__content">
+        <div class="cinder-run-step-timeline__header">
+          <span class="cinder-run-step-timeline__label">
+            {hiddenNestedStepLabel(row.hiddenStepCount)}
+          </span>
+          <Badge
+            class="cinder-run-step-timeline__status"
+            variant="neutral"
+            size="xs"
+            aria-label="Status: Nested child steps hidden"
+          >
+            Depth cap
+          </Badge>
+        </div>
+        <p class="cinder-run-step-timeline__body">
+          Additional child-workflow steps are hidden because the timeline depth cap was reached.
+        </p>
+      </div>
+    </div>
+  </li>
+{/snippet}
+
+{#snippet stepRail(rows: RenderedStepLike[])}
+  {#each rows as row (row.pathKey)}
+    {#if row.kind === 'depth-limit'}
+      {@render depthLimitItem(row)}
+    {:else}
+      {@render stepItem(row)}
+    {/if}
+  {/each}
+{/snippet}
+
 <ol
   {...rest}
   class={classNames('cinder-run-step-timeline', className)}
   aria-label={resolvedAriaLabel}
   aria-labelledby={ariaLabelledby}
 >
-  {#each renderedSteps as row (row.pathKey)}
-    {#if row.kind === 'depth-limit'}
+  {#each renderedEntries as entry (entry.pathKey)}
+    {#if entry.kind === 'branch'}
+      {@const group = entry.group}
+      {@const summary = branchOutcomeSummary(group.lanes)}
+      {@const initialOpen =
+        !branchStartsCollapsed(group.lanes.length, group.collapseThreshold, group.collapsed) ||
+        (group.collapsed === undefined && branchGroupHasCurrentStep(group))}
       <li
-        class="cinder-run-step-timeline__item"
-        data-cinder-status="depth-limit"
-        data-cinder-depth={row.depth}
-        data-cinder-path={row.pathKey}
-        data-cinder-connector-after={row.connectorAfter}
-        data-cinder-depth-limit
-        aria-current={row.ariaCurrent ? 'step' : undefined}
-        style:--_cinder-rst-depth={row.depth}
+        class="cinder-run-step-timeline__item cinder-run-step-timeline__item--branch"
+        data-cinder-status="branch"
+        data-cinder-depth="0"
+        data-cinder-path={entry.pathKey}
+        data-cinder-connector-after={entry.connectorAfter}
       >
         <div class="cinder-run-step-timeline__event">
           <span class="cinder-run-step-timeline__marker" aria-hidden="true" inert>
-            <StatusDot status="neutral" label="Nested steps hidden" showLabel={false} size="md" />
+            <StatusDot status="accent" label="Branch group" showLabel={false} size="md" />
           </span>
 
-          <div class="cinder-run-step-timeline__content">
-            <div class="cinder-run-step-timeline__header">
-              <span class="cinder-run-step-timeline__label">
-                {hiddenNestedStepLabel(row.hiddenStepCount)}
-              </span>
-              <Badge
-                class="cinder-run-step-timeline__status"
-                variant="neutral"
-                size="xs"
-                aria-label="Status: Nested child steps hidden"
-              >
-                Depth cap
-              </Badge>
-            </div>
-            <p class="cinder-run-step-timeline__body">
-              Additional child-workflow steps are hidden because the timeline depth cap was reached.
-            </p>
-          </div>
-        </div>
-      </li>
-    {:else}
-      {@const step = row.step}
-      {@const terminal = isTerminal(step.status)}
-      {@const metadata = metadataItems(step)}
-      <li
-        class="cinder-run-step-timeline__item"
-        data-cinder-status={step.status}
-        data-cinder-depth={row.depth}
-        data-cinder-path={row.pathKey}
-        data-cinder-terminal={terminal ? '' : undefined}
-        data-cinder-connector-after={row.connectorAfter}
-        aria-current={row.ariaCurrent ? 'step' : undefined}
-        style:--_cinder-rst-depth={row.depth}
-      >
-        <div class="cinder-run-step-timeline__event">
-          <!-- Marker: StatusDot on the rail -->
-          <span class="cinder-run-step-timeline__marker" aria-hidden="true" inert>
-            <StatusDot
-              status={statusDotStatus(step.status)}
-              label={statusLabel(step.status)}
-              showLabel={false}
-              size="md"
-            />
-          </span>
+          <div class="cinder-run-step-timeline__content cinder-run-step-timeline__branch">
+            <RunStepBranchDisclosure
+              {initialOpen}
+              class="cinder-run-step-timeline__branch-disclosure"
+              triggerAriaLabel={`Branch group: ${group.label}. ${summary}.`}
+            >
+              {#snippet trigger()}
+                <span class="cinder-run-step-timeline__branch-heading">
+                  <span class="cinder-run-step-timeline__label">{group.label}</span>
+                  <Badge variant="accent" size="xs" aria-label={`Branch group outcome: ${summary}`}>
+                    {summary}
+                  </Badge>
+                </span>
+              {/snippet}
 
-          <!-- Step content -->
-          <div class="cinder-run-step-timeline__content">
-            <!-- Header row: label + status badge -->
-            <div class="cinder-run-step-timeline__header">
-              <span class="cinder-run-step-timeline__label">{step.label}</span>
-              {#if step.link}
-                {@const safeLinkHref = safeStepLinkHref(step.link.href)}
-                {#if safeLinkHref}
-                  <Link href={safeLinkHref} class="cinder-run-step-timeline__link">
-                    {step.link.label}
-                  </Link>
-                {:else}
-                  <span
-                    class="cinder-run-step-timeline__link cinder-run-step-timeline__link--unsafe"
+              <ul class="cinder-run-step-timeline__lanes" aria-label={`${group.label} branches`}>
+                {#each group.lanes as lane (lane.id)}
+                  <li
+                    class="cinder-run-step-timeline__lane"
+                    data-cinder-outcome={lane.outcome ?? 'racing'}
+                    aria-label={`Branch ${lane.label ?? lane.id}: ${laneStateLabel(lane)}`}
                   >
-                    {step.link.label}
-                  </span>
-                {/if}
-              {/if}
-              <Badge
-                class="cinder-run-step-timeline__status"
-                variant={badgeVariant(step.status)}
-                size="xs"
-                aria-label={`Status: ${statusLabel(step.status)}`}
-              >
-                {statusLabel(step.status)}
-              </Badge>
-              {#if step.attemptCount !== undefined && step.attemptCount > 1}
-                <Badge variant="neutral" size="xs" mono>attempt {step.attemptCount}</Badge>
-              {/if}
-              {#if step.actionsCount !== undefined && step.actionsCount > 0}
-                <Badge variant="neutral" size="xs" mono
-                  >{actionsCountLabel(step.actionsCount)}</Badge
-                >
-              {/if}
-            </div>
-
-            <!-- Progress bar (only shown for current statuses with explicit progress) -->
-            {#if hasProgress(step)}
-              <div class="cinder-run-step-timeline__progress">
-                <Progress
-                  value={step.progress ?? 0}
-                  max={step.progressMax ?? 100}
-                  size="sm"
-                  ariaLabel={`${step.label} progress`}
-                />
-              </div>
-            {/if}
-
-            <!-- Metadata: start/end/duration/attempts -->
-            {#if metadata.length > 0}
-              <dl class="cinder-run-step-timeline__meta">
-                {#each metadata as item (item.term)}
-                  <div class="cinder-run-step-timeline__meta-row">
-                    <dt class="cinder-run-step-timeline__meta-term">{item.term}</dt>
-                    <dd class="cinder-run-step-timeline__meta-definition">{item.definition}</dd>
-                  </div>
+                    <div class="cinder-run-step-timeline__lane-header">
+                      <span class="cinder-run-step-timeline__lane-label">
+                        {lane.label ?? lane.id}
+                      </span>
+                      {#if lane.outcome !== undefined}
+                        <Badge
+                          variant={laneOutcomeBadgeVariant(lane.outcome)}
+                          size="xs"
+                          aria-label={`Outcome: ${laneOutcomeLabel(lane.outcome)}`}
+                        >
+                          {laneOutcomeLabel(lane.outcome)}
+                        </Badge>
+                      {:else}
+                        <Badge variant="info" size="xs" aria-label="Outcome: still racing">
+                          Racing
+                        </Badge>
+                      {/if}
+                    </div>
+                    <ol
+                      class="cinder-run-step-timeline cinder-run-step-timeline__lane-steps"
+                      aria-label={`${lane.label ?? lane.id} steps`}
+                    >
+                      {@render stepRail(laneRows(lane))}
+                    </ol>
+                  </li>
                 {/each}
-              </dl>
-            {/if}
-
-            <!-- Expandable details (logs, payloads, errors) -->
-            {#if step.details && step.details.length > 0}
-              <div class="cinder-run-step-timeline__details">
-                <!-- No idBase: let each Collapsible mint its own collision-free
-                   id via $props.id(). Passing detail.id here would reuse a
-                   consumer-supplied value that is only unique within a step, so
-                   two steps with a detail id like "logs" would produce duplicate
-                   DOM ids and cross-wired aria-controls. -->
-                {#each step.details as detail (detail.id)}
-                  <Collapsible trigger={detail.label}>
-                    <pre class="cinder-run-step-timeline__detail-content">{detail.content}</pre>
-                  </Collapsible>
-                {/each}
-              </div>
-            {/if}
-
-            <!-- Optional per-step body slot -->
-            {#if children}
-              <div class="cinder-run-step-timeline__body">
-                {@render children(step)}
-              </div>
-            {/if}
+              </ul>
+            </RunStepBranchDisclosure>
           </div>
         </div>
       </li>
+    {:else if entry.kind === 'depth-limit'}
+      {@render depthLimitItem(entry)}
+    {:else}
+      {@render stepItem(entry)}
     {/if}
   {/each}
 </ol>