@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -1,4 +1,9 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@import '../badge/badge.css';
+@import '../collapsible/collapsible.css';
+@import '../link/link.css';
+@import '../progress/progress.css';
+@import '../status-dot/status-dot.css';
 
 @layer cinder.components {
   /* ========================================
@@ -11,6 +16,8 @@
     --_cinder-rst-rail-size: 1.5rem;
     --_cinder-rst-marker-size: 0.875rem;
     --_cinder-rst-rail-center: 0.6875rem;
+    --_cinder-rst-depth: 0;
+    --_cinder-rst-nested-indent: 1.75rem;
 
     list-style: none;
     margin: 0;
@@ -23,6 +30,8 @@
    * ---------------------------------------- */
 
   .cinder-run-step-timeline__item {
+    --_cinder-rst-depth-offset: calc(var(--_cinder-rst-depth) * var(--_cinder-rst-nested-indent));
+
     position: relative;
     padding-bottom: var(--cinder-space-4);
   }
@@ -35,10 +44,10 @@
   .cinder-run-step-timeline__item::before {
     content: '';
     position: absolute;
-    left: var(--_cinder-rst-rail-center);
-    top: 1rem;
-    bottom: 0;
-    width: 1px;
+    inset-inline-start: calc(var(--_cinder-rst-depth-offset) + var(--_cinder-rst-rail-center));
+    inset-block-start: 1rem;
+    inset-block-end: 0;
+    inline-size: 1px;
     background: var(--cinder-border-muted);
   }
 
@@ -55,6 +64,7 @@
     grid-template-columns: var(--_cinder-rst-rail-size) 1fr;
     gap: var(--cinder-space-3);
     align-items: start;
+    padding-inline-start: var(--_cinder-rst-depth-offset);
   }
 
   /* ----------------------------------------
@@ -102,11 +112,21 @@
 
   /* Running step: label highlighted */
   .cinder-run-step-timeline__item[data-cinder-status='running'] .cinder-run-step-timeline__label,
-  .cinder-run-step-timeline__item[data-cinder-status='retrying'] .cinder-run-step-timeline__label {
+  .cinder-run-step-timeline__item[data-cinder-status='retrying'] .cinder-run-step-timeline__label,
+  .cinder-run-step-timeline__item[data-cinder-status='waiting_approval']
+    .cinder-run-step-timeline__label {
     color: var(--cinder-text);
     font-weight: var(--cinder-font-semibold);
   }
 
+  .cinder-run-step-timeline__link {
+    font-size: var(--cinder-text-xs);
+  }
+
+  .cinder-run-step-timeline__link--unsafe {
+    color: var(--cinder-text-muted);
+  }
+
   /* Pending step: label muted */
   .cinder-run-step-timeline__item[data-cinder-status='pending'] .cinder-run-step-timeline__label,
   .cinder-run-step-timeline__item[data-cinder-status='skipped'] .cinder-run-step-timeline__label,

package/src/components/run-step-timeline/run-step-timeline.examples.json

@@ -17,9 +17,9 @@
     },
     {
       "id": "workflow-run",
-      "title": "Workflow run with retry and signal wait",
-      "description": "A workflow run with scheduled start, activity dispatch, retry, signal wait, and terminal completion — showing all major step states.",
-      "code": "<script lang=\"ts\">\n  import { RunStepTimeline } from '@lostgradient/cinder/run-step-timeline';\n  import type { RunStep } from '@lostgradient/cinder/run-step-timeline';\n\n  const steps: RunStep[] = [\n    {\n      id: 'scheduled',\n      label: 'Schedule workflow',\n      status: 'succeeded',\n      startTime: '2026-06-01T09:00:00Z',\n      endTime: '2026-06-01T09:00:01Z',\n      duration: '1s',\n    },\n    {\n      id: 'dispatch',\n      label: 'Dispatch activity',\n      status: 'succeeded',\n      startTime: '2026-06-01T09:00:01Z',\n      endTime: '2026-06-01T09:01:15Z',\n      duration: '1m 14s',\n    },\n    {\n      id: 'retry-activity',\n      label: 'Retry failed activity',\n      status: 'succeeded',\n      startTime: '2026-06-01T09:01:30Z',\n      endTime: '2026-06-01T09:03:22Z',\n      duration: '1m 52s',\n      attemptCount: 3,\n      details: [\n        {\n          id: 'retry-error-log',\n          label: 'Error from attempt 2',\n          content:\n            'ActivityError: upstream dependency timed out after 30s\\n  at activity/fetch.ts:42',\n        },\n      ],\n    },\n    {\n      id: 'signal-wait',\n      label: 'Wait for approval signal',\n      status: 'running',\n      startTime: '2026-06-01T09:03:30Z',\n    },\n    {\n      id: 'finalize',\n      label: 'Finalize and archive',\n      status: 'pending',\n    },\n  ];\n</script>\n\n<RunStepTimeline {steps} label=\"Workflow run\" />\n"
+      "title": "Temporal child workflow with approval wait",
+      "description": "A Temporal-style workflow lane that moves from model planning to tool execution, waits on approval, then shows a retrying subagent lane.",
+      "code": "<script lang=\"ts\">\n  import { RunStepTimeline } from '@lostgradient/cinder/run-step-timeline';\n  import type { RunStep } from '@lostgradient/cinder/run-step-timeline';\n\n  const steps: RunStep[] = [\n    {\n      id: 'model',\n      label: 'Model plans workflow',\n      status: 'succeeded',\n      startTime: '2026-06-01T09:00:00Z',\n      endTime: '2026-06-01T09:00:08Z',\n      duration: '8s',\n      actionsCount: 3,\n    },\n    {\n      id: 'tool',\n      label: 'Run repository tool',\n      status: 'succeeded',\n      startTime: '2026-06-01T09:00:09Z',\n      endTime: '2026-06-01T09:00:27Z',\n      duration: '18s',\n      link: {\n        href: '/runs/wf-83a1c/tools/rg',\n        label: 'Open tool trace',\n      },\n    },\n    {\n      id: 'approval',\n      label: 'Await deployment approval',\n      status: 'waiting_approval',\n      startTime: '2026-06-01T09:00:28Z',\n      actionsCount: 1,\n    },\n    {\n      id: 'subagent',\n      label: 'Subagent lane',\n      status: 'running',\n      startTime: '2026-06-01T09:00:31Z',\n      children: [\n        {\n          id: 'checkout',\n          label: 'Inspect generated diff',\n          status: 'succeeded',\n          startTime: '2026-06-01T09:00:31Z',\n          endTime: '2026-06-01T09:00:43Z',\n          duration: '12s',\n        },\n        {\n          id: 'retry',\n          label: 'Retry flaky verification',\n          status: 'retrying',\n          startTime: '2026-06-01T09:00:44Z',\n          attemptCount: 2,\n          progress: 60,\n          details: [\n            {\n              id: 'retry-log',\n              label: 'Retry output',\n              content:\n                'Attempt 1 failed while the browser harness was still starting.\\nAttempt 2 is running with the same verification command.',\n            },\n          ],\n        },\n      ],\n    },\n    {\n      id: 'finalize',\n      label: 'Finalize and archive',\n      status: 'pending',\n    },\n  ];\n</script>\n\n<RunStepTimeline {steps} label=\"Workflow run\" />\n"
     }
   ]
 }

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

@@ -16,6 +16,7 @@
   export type {
     RunStep,
     RunStepDetail,
+    RunStepLink,
     RunStepStatus,
     RunStepTimelineProps,
   } from './run-step-timeline.types.ts';
@@ -25,11 +26,44 @@
   import { classNames } from '../../utilities/class-names.ts';
   import Badge from '../badge/badge.svelte';
   import Collapsible from '../collapsible/collapsible.svelte';
+  import Link from '../link/link.svelte';
   import Progress from '../progress/progress.svelte';
   import StatusDot from '../status-dot/status-dot.svelte';
   import type { StatusDotStatus } from '../status-dot/status-dot.types.ts';
   import type { RunStep, RunStepStatus, RunStepTimelineProps } from './run-step-timeline.types.ts';
 
+  const MAX_NESTED_STEP_DEPTH = 3;
+
+  type RenderedRunStepBase = {
+    depth: number;
+    pathKey: string;
+  };
+
+  type RenderedStepRow = RenderedRunStepBase & {
+    kind: 'step';
+    step: RunStep;
+  };
+
+  type RenderedDepthLimitRow = RenderedRunStepBase & {
+    kind: 'depth-limit';
+    hiddenStepCount: number;
+    hiddenCurrent: boolean;
+  };
+
+  type PendingRenderedRunStep = RenderedStepRow | RenderedDepthLimitRow;
+
+  type RenderedRunStep = PendingRenderedRunStep & {
+    depth: number;
+    pathKey: string;
+    connectorAfter: 'hidden' | 'visible';
+    ariaCurrent: boolean;
+  };
+
+  type NestedRunStepSummary = {
+    count: number;
+    hasCurrent: boolean;
+  };
+
   let {
     steps,
     label,
@@ -44,17 +78,21 @@
     ariaLabelledby === undefined && ariaLabel === undefined ? label : ariaLabel,
   );
 
+  const renderedSteps = $derived(flattenRunSteps(steps));
+
   // Map generic RunStepStatus onto StatusDot status tokens.
   function statusDotStatus(status: RunStepStatus): StatusDotStatus {
     switch (status) {
       case 'succeeded':
         return 'success';
       case 'failed':
-        return 'error';
+        return 'danger';
       case 'running':
         return 'online';
       case 'retrying':
         return 'warning';
+      case 'waiting_approval':
+        return 'accent';
       case 'cancelled':
         return 'offline';
       case 'skipped':
@@ -81,6 +119,8 @@
         return 'Skipped';
       case 'retrying':
         return 'Retrying';
+      case 'waiting_approval':
+        return 'Waiting approval';
     }
   }
 
@@ -96,6 +136,8 @@
         return 'info';
       case 'retrying':
         return 'warning';
+      case 'waiting_approval':
+        return 'accent';
       case 'cancelled':
         return 'neutral';
       case 'skipped':
@@ -115,9 +157,13 @@
     );
   }
 
+  function isCurrent(status: RunStepStatus): boolean {
+    return status === 'running' || status === 'retrying' || status === 'waiting_approval';
+  }
+
   // Whether this step has a progress bar to show.
   function hasProgress(step: RunStep): boolean {
-    return step.progress !== undefined && (step.status === 'running' || step.status === 'retrying');
+    return step.progress !== undefined && isCurrent(step.status);
   }
 
   // Metadata items for a step, as term/definition pairs.
@@ -137,6 +183,132 @@
     }
     return items;
   }
+
+  function actionsCountLabel(actionsCount: number): string {
+    return actionsCount === 1 ? '1 action' : `${actionsCount} actions`;
+  }
+
+  function hiddenNestedStepLabel(hiddenStepCount: number): string {
+    return hiddenStepCount === 1
+      ? '1 nested step hidden'
+      : `${hiddenStepCount} nested steps hidden`;
+  }
+
+  function safeStepLinkHref(href: string): string | undefined {
+    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;
+      }
+    }
+
+    return trimmedHref;
+  }
+
+  function flattenRunSteps(steps: RunStep[]): RenderedRunStep[] {
+    const rows: PendingRenderedRunStep[] = [];
+    appendRunStepRows(rows, steps, 0, '');
+    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,
+    }));
+  }
+
+  function appendRunStepRows(
+    rows: PendingRenderedRunStep[],
+    steps: RunStep[],
+    depth: number,
+    pathPrefix: string,
+  ): void {
+    for (const step of steps) {
+      const pathKey = nestedStepPathKey(pathPrefix, step.id);
+      rows.push({ kind: 'step', step, depth, pathKey });
+      if (step.children && step.children.length > 0) {
+        if (depth < MAX_NESTED_STEP_DEPTH) {
+          appendRunStepRows(rows, step.children, depth + 1, pathKey);
+        } else {
+          const hiddenSummary = summarizeNestedRunSteps(step.children);
+          rows.push({
+            kind: 'depth-limit',
+            depth,
+            pathKey: `${pathKey}/__cinder-depth-limit`,
+            hiddenStepCount: hiddenSummary.count,
+            hiddenCurrent: hiddenSummary.hasCurrent,
+          });
+        }
+      }
+    }
+  }
+
+  function nestedStepPathKey(pathPrefix: string, stepId: string): string {
+    const encodedStepId = escapeStepPathSegment(stepId);
+    return pathPrefix === '' ? encodedStepId : `${pathPrefix}/${encodedStepId}`;
+  }
+
+  function escapeStepPathSegment(stepId: string): string {
+    return stepId.replaceAll('%', '%25').replaceAll('/', '%2F');
+  }
+
+  function summarizeNestedRunSteps(steps: RunStep[]): NestedRunStepSummary {
+    let count = 0;
+    let hasCurrent = false;
+    const stack = [...steps];
+
+    while (stack.length > 0) {
+      const step = stack.pop();
+      if (step === undefined) continue;
+
+      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];
+          if (child) stack.push(child);
+        }
+      }
+    }
+
+    return { count, hasCurrent };
+  }
+
+  function deepestCurrentStepIndex(rows: PendingRenderedRunStep[]): number {
+    let currentIndex = -1;
+    let currentDepth = -1;
+
+    rows.forEach((row, index) => {
+      const rowCurrentDepth =
+        row.kind === 'depth-limit' && row.hiddenCurrent
+          ? row.depth + 1
+          : row.kind === 'step' && isCurrent(row.step.status)
+            ? row.depth
+            : -1;
+
+      if (rowCurrentDepth > currentDepth) {
+        currentIndex = index;
+        currentDepth = rowCurrentDepth;
+      }
+    });
+
+    return currentIndex;
+  }
 </script>
 
 <ol
@@ -145,90 +317,154 @@
   aria-label={resolvedAriaLabel}
   aria-labelledby={ariaLabelledby}
 >
-  {#each steps as step, index (step.id)}
-    {@const isLast = index === steps.length - 1}
-    {@const isCurrent = step.status === 'running' || step.status === 'retrying'}
-    {@const terminal = isTerminal(step.status)}
-    {@const metadata = metadataItems(step)}
-    <li
-      class="cinder-run-step-timeline__item"
-      data-cinder-status={step.status}
-      data-cinder-terminal={terminal ? '' : undefined}
-      data-cinder-connector-after={isLast ? 'hidden' : 'visible'}
-      aria-current={isCurrent ? 'step' : undefined}
-    >
-      <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>
-
-        <!-- 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>
-            <Badge variant={badgeVariant(step.status)} size="xs">
-              {statusLabel(step.status)}
-            </Badge>
-            {#if step.attemptCount !== undefined && step.attemptCount > 1}
-              <Badge variant="neutral" size="xs" mono>attempt {step.attemptCount}</Badge>
-            {/if}
+  {#each renderedSteps as row (row.pathKey)}
+    {#if row.kind === 'depth-limit'}
+      <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>
+    {: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>
 
-          <!-- Progress bar (only shown while running or retrying) -->
-          {#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`}
-              />
+          <!-- 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"
+                  >
+                    {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>
-          {/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>
-              {/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
+
+            <!-- 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>
+                {/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}
+                {#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}
+            <!-- Optional per-step body slot -->
+            {#if children}
+              <div class="cinder-run-step-timeline__body">
+                {@render children(step)}
+              </div>
+            {/if}
+          </div>
         </div>
-      </div>
-    </li>
+      </li>
+    {/if}
   {/each}
 </ol>