@workflow/web-shared 5.0.0-beta.2 → 5.0.0-beta.3

package/dist/components/new-trace-viewer/utils.js

@@ -0,0 +1,358 @@
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+export function computeRootBounds(spans) {
+    let minStart = Number.POSITIVE_INFINITY;
+    let maxEnd = Number.NEGATIVE_INFINITY;
+    for (const span of spans) {
+        const s = getHighResInMs(span.startTime);
+        const e = getHighResInMs(span.endTime);
+        if (s < minStart)
+            minStart = s;
+        if (e > maxEnd)
+            maxEnd = e;
+    }
+    if (!Number.isFinite(minStart) || !Number.isFinite(maxEnd)) {
+        return { startTime: 0, endTime: 1, duration: 1 };
+    }
+    const duration = Math.max(maxEnd - minStart, 1);
+    return { startTime: minStart, endTime: maxEnd, duration };
+}
+export function buildTimeCompression(_spans, viewStart, viewEnd) {
+    const range = viewEnd - viewStart;
+    return {
+        isCompressed: false,
+        toVisual(time) {
+            if (range <= 0)
+                return 0;
+            return Math.min(Math.max((time - viewStart) / range, 0), 1);
+        },
+        fromVisual(fraction) {
+            return viewStart + fraction * range;
+        },
+    };
+}
+const NICE_INTERVALS = [
+    1, 2, 5, 10, 20, 50, 100, 200, 500, 1_000, 2_000, 5_000, 10_000, 20_000,
+    50_000, 100_000, 200_000, 500_000, 1_000_000, 2_000_000, 5_000_000,
+    10_000_000, 20_000_000, 50_000_000, 100_000_000, 200_000_000, 500_000_000,
+    1_000_000_000, 2_000_000_000, 5_000_000_000,
+];
+const MAX_MARKERS = 8;
+function pickInterval(viewDuration, maxTicks) {
+    for (const interval of NICE_INTERVALS) {
+        if (viewDuration / interval <= maxTicks)
+            return interval;
+    }
+    return NICE_INTERVALS[NICE_INTERVALS.length - 1];
+}
+export function computeTimeMarkers(viewDuration, offset) {
+    if (viewDuration <= 0)
+        return [];
+    const maxTicks = 6;
+    const interval = pickInterval(viewDuration, maxTicks);
+    const firstTick = Math.ceil(offset / interval) * interval;
+    const markers = [];
+    for (let t = firstTick; t <= offset + viewDuration; t += interval) {
+        const position = (t - offset) / viewDuration;
+        if (position < -0.01 || position > 1.01)
+            continue;
+        markers.push({
+            position: Math.min(Math.max(position, 0), 1),
+            label: formatDuration(Math.abs(t), true),
+        });
+        if (markers.length >= MAX_MARKERS)
+            break;
+    }
+    return markers;
+}
+export function computeCompressedTimeMarkers(compression, viewStart, viewEnd, rootStart) {
+    const viewDuration = viewEnd - viewStart;
+    if (viewDuration <= 0)
+        return [];
+    const maxTicks = 6;
+    const interval = pickInterval(viewDuration, maxTicks);
+    const offset = viewStart - rootStart;
+    const firstTick = Math.ceil(offset / interval) * interval;
+    const markers = [];
+    for (let t = firstTick; t <= offset + viewDuration; t += interval) {
+        const absTime = rootStart + t;
+        const position = compression.toVisual(absTime);
+        if (position < -0.01 || position > 1.01)
+            continue;
+        markers.push({
+            position: Math.min(Math.max(position, 0), 1),
+            label: formatDuration(Math.abs(t), true),
+        });
+        if (markers.length >= MAX_MARKERS)
+            break;
+    }
+    return markers;
+}
+export function computeSpanGaps(spans, compression) {
+    const gaps = [];
+    for (let i = 0; i < spans.length - 1; i++) {
+        const endTime = getHighResInMs(spans[i].endTime);
+        const startTime = getHighResInMs(spans[i + 1].startTime);
+        const gapMs = startTime - endTime;
+        if (gapMs <= 0)
+            continue;
+        const leftFrac = compression.toVisual(endTime);
+        const rightFrac = compression.toVisual(startTime);
+        if (rightFrac - leftFrac < 0.001)
+            continue;
+        gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });
+    }
+    return gaps;
+}
+// ---------------------------------------------------------------------------
+// Resource colors
+// ---------------------------------------------------------------------------
+export const RESOURCE_COLORS = {
+    run: { bar: 'var(--ds-blue-700)', errorBar: 'var(--ds-red-700)' },
+    step: { bar: 'var(--ds-green-700)', errorBar: 'var(--ds-red-700)' },
+    hook: { bar: 'var(--ds-amber-700)', errorBar: 'var(--ds-red-700)' },
+    sleep: { bar: 'var(--ds-purple-700)', errorBar: 'var(--ds-red-700)' },
+    default: { bar: 'var(--ds-gray-500)', errorBar: 'var(--ds-red-700)' },
+};
+export function getResourceColor(resource) {
+    return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
+}
+function clampFraction(value) {
+    return Math.max(0, Math.min(1, value));
+}
+function timeToFraction(time, spanStart, spanDuration) {
+    if (spanDuration <= 0)
+        return 0;
+    return clampFraction((time - spanStart) / spanDuration);
+}
+function sortedEventMarks(events, relevantNames) {
+    return events
+        .filter((e) => relevantNames.includes(e.name))
+        .map((e) => ({ time: getHighResInMs(e.timestamp), type: e.name }))
+        .sort((a, b) => a.time - b.time);
+}
+function computeStepSegmentsFromSpan(startMs, duration, events) {
+    const segments = [];
+    if (duration <= 0)
+        return segments;
+    const marks = sortedEventMarks(events, [
+        'step_started',
+        'step_retrying',
+        'step_failed',
+        'step_completed',
+    ]);
+    if (marks.length === 0) {
+        segments.push({ startFraction: 0, endFraction: 1, status: 'running' });
+        return segments;
+    }
+    const firstFraction = timeToFraction(marks[0].time, startMs, duration);
+    if (firstFraction > 0.001) {
+        segments.push({
+            startFraction: 0,
+            endFraction: firstFraction,
+            status: 'queued',
+        });
+    }
+    for (let i = 0; i < marks.length; i++) {
+        const mark = marks[i];
+        const markFrac = timeToFraction(mark.time, startMs, duration);
+        const nextMark = marks[i + 1];
+        const nextFrac = nextMark
+            ? timeToFraction(nextMark.time, startMs, duration)
+            : 1;
+        if (mark.type === 'step_started') {
+            if (i === marks.length - 1) {
+                segments.push({
+                    startFraction: markFrac,
+                    endFraction: 1,
+                    status: 'succeeded',
+                });
+            }
+            else {
+                const nextType = nextMark.type;
+                const attemptStatus = nextType === 'step_retrying' || nextType === 'step_failed'
+                    ? 'failed'
+                    : nextType === 'step_completed'
+                        ? 'succeeded'
+                        : 'running';
+                segments.push({
+                    startFraction: markFrac,
+                    endFraction: nextFrac,
+                    status: attemptStatus,
+                });
+            }
+        }
+        else if (mark.type === 'step_retrying') {
+            segments.push({
+                startFraction: markFrac,
+                endFraction: nextFrac,
+                status: 'retrying',
+            });
+        }
+        else if (mark.type === 'step_failed') {
+            if (markFrac < 0.999) {
+                segments.push({
+                    startFraction: markFrac,
+                    endFraction: 1,
+                    status: 'failed',
+                });
+            }
+        }
+    }
+    return segments;
+}
+function computeHookSegmentsFromSpan(startMs, duration, events) {
+    const segments = [];
+    if (duration <= 0)
+        return segments;
+    const sorted = [...events]
+        .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
+        .sort((a, b) => a.time - b.time);
+    const received = sorted.find((e) => e.name === 'hook_received');
+    const disposed = sorted.find((e) => e.name === 'hook_disposed');
+    if (!received && !disposed) {
+        segments.push({ startFraction: 0, endFraction: 1, status: 'waiting' });
+        return segments;
+    }
+    const receivedFrac = received
+        ? timeToFraction(received.time, startMs, duration)
+        : null;
+    const disposedFrac = disposed
+        ? timeToFraction(disposed.time, startMs, duration)
+        : null;
+    if (receivedFrac !== null && receivedFrac > 0.001) {
+        segments.push({
+            startFraction: 0,
+            endFraction: receivedFrac,
+            status: 'waiting',
+        });
+    }
+    else if (receivedFrac === null && disposedFrac !== null) {
+        segments.push({
+            startFraction: 0,
+            endFraction: disposedFrac,
+            status: 'waiting',
+        });
+    }
+    if (receivedFrac !== null) {
+        segments.push({
+            startFraction: receivedFrac,
+            endFraction: disposedFrac ?? 1,
+            status: 'received',
+        });
+    }
+    if (disposedFrac !== null && disposedFrac < 0.999) {
+        segments.push({
+            startFraction: disposedFrac,
+            endFraction: 1,
+            status: 'succeeded',
+        });
+    }
+    return segments;
+}
+function computeSleepSegmentsFromSpan(startMs, duration, events) {
+    const segments = [];
+    if (duration <= 0)
+        return segments;
+    const completedTime = events
+        .filter((e) => e.name === 'wait_completed')
+        .map((e) => getHighResInMs(e.timestamp))
+        .sort((a, b) => a - b)[0];
+    if (completedTime === undefined) {
+        segments.push({ startFraction: 0, endFraction: 1, status: 'sleeping' });
+        return segments;
+    }
+    const completedFrac = timeToFraction(completedTime, startMs, duration);
+    if (completedFrac > 0.001) {
+        segments.push({
+            startFraction: 0,
+            endFraction: completedFrac,
+            status: 'sleeping',
+        });
+    }
+    segments.push({
+        startFraction: completedFrac,
+        endFraction: 1,
+        status: 'succeeded',
+    });
+    return segments;
+}
+function computeRunSegmentsFromSpan(startMs, duration, activeStartMs, events, attributes) {
+    const segments = [];
+    if (duration <= 0)
+        return segments;
+    const sorted = [...events]
+        .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
+        .sort((a, b) => a.time - b.time);
+    const hasRunCreated = sorted.some((e) => e.name === 'run_created');
+    if (!hasRunCreated) {
+        const runData = attributes?.data;
+        const runStatus = runData?.status;
+        return computeV1RunSegments(startMs, duration, activeStartMs, runStatus);
+    }
+    const failedEvent = sorted.find((e) => e.name === 'run_failed');
+    let cursor = 0;
+    if (activeStartMs !== undefined && activeStartMs > startMs) {
+        const queuedFrac = timeToFraction(activeStartMs, startMs, duration);
+        if (queuedFrac > 0.001) {
+            segments.push({
+                startFraction: 0,
+                endFraction: queuedFrac,
+                status: 'queued',
+            });
+            cursor = queuedFrac;
+        }
+    }
+    segments.push({
+        startFraction: cursor,
+        endFraction: 1,
+        status: failedEvent ? 'failed' : 'running',
+    });
+    return segments;
+}
+function computeV1RunSegments(startMs, duration, activeStartMs, runStatus) {
+    const segments = [];
+    let cursor = 0;
+    if (activeStartMs !== undefined && activeStartMs > startMs) {
+        const queuedFrac = timeToFraction(activeStartMs, startMs, duration);
+        if (queuedFrac > 0.001) {
+            segments.push({
+                startFraction: 0,
+                endFraction: queuedFrac,
+                status: 'queued',
+            });
+            cursor = queuedFrac;
+        }
+    }
+    segments.push({
+        startFraction: cursor,
+        endFraction: 1,
+        status: runStatus === 'failed' ? 'failed' : 'running',
+    });
+    return segments;
+}
+/**
+ * Compute event-based segments for a span. Dispatches on `span.resource`
+ * to the appropriate resource-type-specific segment builder.
+ * Returns an empty array for generic (non-workflow) spans.
+ */
+export function computeSpanSegments(span) {
+    const startMs = getHighResInMs(span.startTime);
+    const endMs = getHighResInMs(span.endTime);
+    const duration = endMs - startMs;
+    const activeStartMs = span.activeStartTime
+        ? getHighResInMs(span.activeStartTime)
+        : undefined;
+    switch (span.resource) {
+        case 'step':
+            return computeStepSegmentsFromSpan(startMs, duration, span.events);
+        case 'hook':
+            return computeHookSegmentsFromSpan(startMs, duration, span.events);
+        case 'sleep':
+            return computeSleepSegmentsFromSpan(startMs, duration, span.events);
+        case 'run':
+            return computeRunSegmentsFromSpan(startMs, duration, activeStartMs, span.events, span.attributes);
+        default:
+            return [];
+    }
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/new-trace-viewer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Span, SpanEvent } from '../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';\n\n// ---------------------------------------------------------------------------\n// Root bounds\n// ---------------------------------------------------------------------------\n\nexport interface RootBounds {\n  startTime: number;\n  endTime: number;\n  duration: number;\n}\n\nexport function computeRootBounds(spans: Span[]): RootBounds {\n  let minStart = Number.POSITIVE_INFINITY;\n  let maxEnd = Number.NEGATIVE_INFINITY;\n\n  for (const span of spans) {\n    const s = getHighResInMs(span.startTime);\n    const e = getHighResInMs(span.endTime);\n    if (s < minStart) minStart = s;\n    if (e > maxEnd) maxEnd = e;\n  }\n\n  if (!Number.isFinite(minStart) || !Number.isFinite(maxEnd)) {\n    return { startTime: 0, endTime: 1, duration: 1 };\n  }\n\n  const duration = Math.max(maxEnd - minStart, 1);\n  return { startTime: minStart, endTime: maxEnd, duration };\n}\n\n// ---------------------------------------------------------------------------\n// Time compression\n// ---------------------------------------------------------------------------\n\nexport interface TimeCompression {\n  toVisual(time: number): number;\n  fromVisual(fraction: number): number;\n  isCompressed: boolean;\n}\n\nexport function buildTimeCompression(\n  _spans: Span[],\n  viewStart: number,\n  viewEnd: number\n): TimeCompression {\n  const range = viewEnd - viewStart;\n\n  return {\n    isCompressed: false,\n    toVisual(time: number): number {\n      if (range <= 0) return 0;\n      return Math.min(Math.max((time - viewStart) / range, 0), 1);\n    },\n    fromVisual(fraction: number): number {\n      return viewStart + fraction * range;\n    },\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Time markers\n// ---------------------------------------------------------------------------\n\nexport interface TimeMarker {\n  position: number;\n  label: string;\n}\n\nconst NICE_INTERVALS = [\n  1, 2, 5, 10, 20, 50, 100, 200, 500, 1_000, 2_000, 5_000, 10_000, 20_000,\n  50_000, 100_000, 200_000, 500_000, 1_000_000, 2_000_000, 5_000_000,\n  10_000_000, 20_000_000, 50_000_000, 100_000_000, 200_000_000, 500_000_000,\n  1_000_000_000, 2_000_000_000, 5_000_000_000,\n];\n\nconst MAX_MARKERS = 8;\n\nfunction pickInterval(viewDuration: number, maxTicks: number): number {\n  for (const interval of NICE_INTERVALS) {\n    if (viewDuration / interval <= maxTicks) return interval;\n  }\n  return NICE_INTERVALS[NICE_INTERVALS.length - 1];\n}\n\nexport function computeTimeMarkers(\n  viewDuration: number,\n  offset: number\n): TimeMarker[] {\n  if (viewDuration <= 0) return [];\n\n  const maxTicks = 6;\n  const interval = pickInterval(viewDuration, maxTicks);\n\n  const firstTick = Math.ceil(offset / interval) * interval;\n  const markers: TimeMarker[] = [];\n\n  for (let t = firstTick; t <= offset + viewDuration; t += interval) {\n    const position = (t - offset) / viewDuration;\n    if (position < -0.01 || position > 1.01) continue;\n    markers.push({\n      position: Math.min(Math.max(position, 0), 1),\n      label: formatDuration(Math.abs(t), true),\n    });\n    if (markers.length >= MAX_MARKERS) break;\n  }\n\n  return markers;\n}\n\nexport function computeCompressedTimeMarkers(\n  compression: TimeCompression,\n  viewStart: number,\n  viewEnd: number,\n  rootStart: number\n): TimeMarker[] {\n  const viewDuration = viewEnd - viewStart;\n  if (viewDuration <= 0) return [];\n\n  const maxTicks = 6;\n  const interval = pickInterval(viewDuration, maxTicks);\n  const offset = viewStart - rootStart;\n\n  const firstTick = Math.ceil(offset / interval) * interval;\n  const markers: TimeMarker[] = [];\n\n  for (let t = firstTick; t <= offset + viewDuration; t += interval) {\n    const absTime = rootStart + t;\n    const position = compression.toVisual(absTime);\n    if (position < -0.01 || position > 1.01) continue;\n    markers.push({\n      position: Math.min(Math.max(position, 0), 1),\n      label: formatDuration(Math.abs(t), true),\n    });\n    if (markers.length >= MAX_MARKERS) break;\n  }\n\n  return markers;\n}\n\n// ---------------------------------------------------------------------------\n// Span gaps — time deltas between consecutive spans (Alt-key overlay)\n// ---------------------------------------------------------------------------\n\nexport interface SpanGap {\n  gapMs: number;\n  leftFrac: number;\n  rightFrac: number;\n  rowIndex: number;\n}\n\nexport function computeSpanGaps(\n  spans: Span[],\n  compression: TimeCompression\n): SpanGap[] {\n  const gaps: SpanGap[] = [];\n  for (let i = 0; i < spans.length - 1; i++) {\n    const endTime = getHighResInMs(spans[i].endTime);\n    const startTime = getHighResInMs(spans[i + 1].startTime);\n    const gapMs = startTime - endTime;\n    if (gapMs <= 0) continue;\n\n    const leftFrac = compression.toVisual(endTime);\n    const rightFrac = compression.toVisual(startTime);\n    if (rightFrac - leftFrac < 0.001) continue;\n\n    gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });\n  }\n  return gaps;\n}\n\n// ---------------------------------------------------------------------------\n// Resource colors\n// ---------------------------------------------------------------------------\n\nexport const RESOURCE_COLORS: Record<\n  string,\n  { bar: string; errorBar?: string }\n> = {\n  run: { bar: 'var(--ds-blue-700)', errorBar: 'var(--ds-red-700)' },\n  step: { bar: 'var(--ds-green-700)', errorBar: 'var(--ds-red-700)' },\n  hook: { bar: 'var(--ds-amber-700)', errorBar: 'var(--ds-red-700)' },\n  sleep: { bar: 'var(--ds-purple-700)', errorBar: 'var(--ds-red-700)' },\n  default: { bar: 'var(--ds-gray-500)', errorBar: 'var(--ds-red-700)' },\n};\n\nexport function getResourceColor(resource: string): {\n  bar: string;\n  errorBar?: string;\n} {\n  return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;\n}\n\n// ---------------------------------------------------------------------------\n// Span segments — split a timeline bar into colored sections by event state\n// ---------------------------------------------------------------------------\n\nexport type SegmentStatus =\n  | 'queued'\n  | 'running'\n  | 'failed'\n  | 'retrying'\n  | 'succeeded'\n  | 'waiting'\n  | 'sleeping'\n  | 'received';\n\nexport interface Segment {\n  startFraction: number;\n  endFraction: number;\n  status: SegmentStatus;\n}\n\nfunction clampFraction(value: number): number {\n  return Math.max(0, Math.min(1, value));\n}\n\nfunction timeToFraction(\n  time: number,\n  spanStart: number,\n  spanDuration: number\n): number {\n  if (spanDuration <= 0) return 0;\n  return clampFraction((time - spanStart) / spanDuration);\n}\n\ninterface EventMark {\n  time: number;\n  type: string;\n}\n\nfunction sortedEventMarks(\n  events: SpanEvent[],\n  relevantNames: string[]\n): EventMark[] {\n  return events\n    .filter((e) => relevantNames.includes(e.name))\n    .map((e) => ({ time: getHighResInMs(e.timestamp), type: e.name }))\n    .sort((a, b) => a.time - b.time);\n}\n\nfunction computeStepSegmentsFromSpan(\n  startMs: number,\n  duration: number,\n  events: SpanEvent[]\n): Segment[] {\n  const segments: Segment[] = [];\n  if (duration <= 0) return segments;\n\n  const marks = sortedEventMarks(events, [\n    'step_started',\n    'step_retrying',\n    'step_failed',\n    'step_completed',\n  ]);\n\n  if (marks.length === 0) {\n    segments.push({ startFraction: 0, endFraction: 1, status: 'running' });\n    return segments;\n  }\n\n  const firstFraction = timeToFraction(marks[0].time, startMs, duration);\n  if (firstFraction > 0.001) {\n    segments.push({\n      startFraction: 0,\n      endFraction: firstFraction,\n      status: 'queued',\n    });\n  }\n\n  for (let i = 0; i < marks.length; i++) {\n    const mark = marks[i];\n    const markFrac = timeToFraction(mark.time, startMs, duration);\n    const nextMark = marks[i + 1];\n    const nextFrac = nextMark\n      ? timeToFraction(nextMark.time, startMs, duration)\n      : 1;\n\n    if (mark.type === 'step_started') {\n      if (i === marks.length - 1) {\n        segments.push({\n          startFraction: markFrac,\n          endFraction: 1,\n          status: 'succeeded',\n        });\n      } else {\n        const nextType = nextMark.type;\n        const attemptStatus: SegmentStatus =\n          nextType === 'step_retrying' || nextType === 'step_failed'\n            ? 'failed'\n            : nextType === 'step_completed'\n              ? 'succeeded'\n              : 'running';\n        segments.push({\n          startFraction: markFrac,\n          endFraction: nextFrac,\n          status: attemptStatus,\n        });\n      }\n    } else if (mark.type === 'step_retrying') {\n      segments.push({\n        startFraction: markFrac,\n        endFraction: nextFrac,\n        status: 'retrying',\n      });\n    } else if (mark.type === 'step_failed') {\n      if (markFrac < 0.999) {\n        segments.push({\n          startFraction: markFrac,\n          endFraction: 1,\n          status: 'failed',\n        });\n      }\n    }\n  }\n\n  return segments;\n}\n\nfunction computeHookSegmentsFromSpan(\n  startMs: number,\n  duration: number,\n  events: SpanEvent[]\n): Segment[] {\n  const segments: Segment[] = [];\n  if (duration <= 0) return segments;\n\n  const sorted = [...events]\n    .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))\n    .sort((a, b) => a.time - b.time);\n\n  const received = sorted.find((e) => e.name === 'hook_received');\n  const disposed = sorted.find((e) => e.name === 'hook_disposed');\n\n  if (!received && !disposed) {\n    segments.push({ startFraction: 0, endFraction: 1, status: 'waiting' });\n    return segments;\n  }\n\n  const receivedFrac = received\n    ? timeToFraction(received.time, startMs, duration)\n    : null;\n  const disposedFrac = disposed\n    ? timeToFraction(disposed.time, startMs, duration)\n    : null;\n\n  if (receivedFrac !== null && receivedFrac > 0.001) {\n    segments.push({\n      startFraction: 0,\n      endFraction: receivedFrac,\n      status: 'waiting',\n    });\n  } else if (receivedFrac === null && disposedFrac !== null) {\n    segments.push({\n      startFraction: 0,\n      endFraction: disposedFrac,\n      status: 'waiting',\n    });\n  }\n\n  if (receivedFrac !== null) {\n    segments.push({\n      startFraction: receivedFrac,\n      endFraction: disposedFrac ?? 1,\n      status: 'received',\n    });\n  }\n\n  if (disposedFrac !== null && disposedFrac < 0.999) {\n    segments.push({\n      startFraction: disposedFrac,\n      endFraction: 1,\n      status: 'succeeded',\n    });\n  }\n\n  return segments;\n}\n\nfunction computeSleepSegmentsFromSpan(\n  startMs: number,\n  duration: number,\n  events: SpanEvent[]\n): Segment[] {\n  const segments: Segment[] = [];\n  if (duration <= 0) return segments;\n\n  const completedTime = events\n    .filter((e) => e.name === 'wait_completed')\n    .map((e) => getHighResInMs(e.timestamp))\n    .sort((a, b) => a - b)[0];\n\n  if (completedTime === undefined) {\n    segments.push({ startFraction: 0, endFraction: 1, status: 'sleeping' });\n    return segments;\n  }\n\n  const completedFrac = timeToFraction(completedTime, startMs, duration);\n  if (completedFrac > 0.001) {\n    segments.push({\n      startFraction: 0,\n      endFraction: completedFrac,\n      status: 'sleeping',\n    });\n  }\n\n  segments.push({\n    startFraction: completedFrac,\n    endFraction: 1,\n    status: 'succeeded',\n  });\n\n  return segments;\n}\n\nfunction computeRunSegmentsFromSpan(\n  startMs: number,\n  duration: number,\n  activeStartMs: number | undefined,\n  events: SpanEvent[],\n  attributes: Record<string, unknown>\n): Segment[] {\n  const segments: Segment[] = [];\n  if (duration <= 0) return segments;\n\n  const sorted = [...events]\n    .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))\n    .sort((a, b) => a.time - b.time);\n\n  const hasRunCreated = sorted.some((e) => e.name === 'run_created');\n\n  if (!hasRunCreated) {\n    const runData = attributes?.data as Record<string, unknown> | undefined;\n    const runStatus = runData?.status as string | undefined;\n    return computeV1RunSegments(startMs, duration, activeStartMs, runStatus);\n  }\n\n  const failedEvent = sorted.find((e) => e.name === 'run_failed');\n\n  let cursor = 0;\n  if (activeStartMs !== undefined && activeStartMs > startMs) {\n    const queuedFrac = timeToFraction(activeStartMs, startMs, duration);\n    if (queuedFrac > 0.001) {\n      segments.push({\n        startFraction: 0,\n        endFraction: queuedFrac,\n        status: 'queued',\n      });\n      cursor = queuedFrac;\n    }\n  }\n\n  segments.push({\n    startFraction: cursor,\n    endFraction: 1,\n    status: failedEvent ? 'failed' : 'running',\n  });\n\n  return segments;\n}\n\nfunction computeV1RunSegments(\n  startMs: number,\n  duration: number,\n  activeStartMs: number | undefined,\n  runStatus: string | undefined\n): Segment[] {\n  const segments: Segment[] = [];\n\n  let cursor = 0;\n  if (activeStartMs !== undefined && activeStartMs > startMs) {\n    const queuedFrac = timeToFraction(activeStartMs, startMs, duration);\n    if (queuedFrac > 0.001) {\n      segments.push({\n        startFraction: 0,\n        endFraction: queuedFrac,\n        status: 'queued',\n      });\n      cursor = queuedFrac;\n    }\n  }\n\n  segments.push({\n    startFraction: cursor,\n    endFraction: 1,\n    status: runStatus === 'failed' ? 'failed' : 'running',\n  });\n\n  return segments;\n}\n\n/**\n * Compute event-based segments for a span. Dispatches on `span.resource`\n * to the appropriate resource-type-specific segment builder.\n * Returns an empty array for generic (non-workflow) spans.\n */\nexport function computeSpanSegments(span: Span): Segment[] {\n  const startMs = getHighResInMs(span.startTime);\n  const endMs = getHighResInMs(span.endTime);\n  const duration = endMs - startMs;\n  const activeStartMs = span.activeStartTime\n    ? getHighResInMs(span.activeStartTime)\n    : undefined;\n\n  switch (span.resource) {\n    case 'step':\n      return computeStepSegmentsFromSpan(startMs, duration, span.events);\n    case 'hook':\n      return computeHookSegmentsFromSpan(startMs, duration, span.events);\n    case 'sleep':\n      return computeSleepSegmentsFromSpan(startMs, duration, span.events);\n    case 'run':\n      return computeRunSegmentsFromSpan(\n        startMs,\n        duration,\n        activeStartMs,\n        span.events,\n        span.attributes\n      );\n    default:\n      return [];\n  }\n}\n"]}

package/dist/components/sidebar/attribute-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attribute-panel.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/attribute-panel.tsx"],"names":[],"mappings":"AAmXA,eAAO,MAAM,oBAAoB,GAAI,OAAO,OAAO,KAAG,MAQrD,CAAC;AAoBF,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAqOD,eAAO,MAAM,cAAc,GAAI,mDAM5B;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,mDAyEA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uHAW5B;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,4CA2NA,CAAC"}
+{"version":3,"file":"attribute-panel.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/attribute-panel.tsx"],"names":[],"mappings":"AAwYA,eAAO,MAAM,oBAAoB,GAAI,OAAO,OAAO,KAAG,MAQrD,CAAC;AAoBF,UAAU,cAAc;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmOD,eAAO,MAAM,cAAc,GAAI,mDAM5B;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,mDAiEA,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uHAW5B;IACD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,4CA2NA,CAAC"}

package/dist/components/sidebar/attribute-panel.js

@@ -163,8 +163,29 @@ const sortByAttributeOrder = (a, b) => {
  * Display names for attributes that should render differently from their key.
  */
 const attributeDisplayNames = {
+    moduleSpecifier: 'Module',
+    workflowName: 'Workflow Name',
+    stepName: 'Step Name',
+    stepId: 'Step ID',
+    hookId: 'Hook ID',
+    attempt: 'Attempts',
+    eventId: 'Event ID',
+    runId: 'Run ID',
+    eventType: 'Event Type',
+    correlationId: 'Correlation ID',
+    deploymentId: 'Deployment ID',
+    specVersion: 'Spec Version',
     workflowCoreVersion: '@workflow/core version',
-    receivedCount: 'times resolved',
+    createdAt: 'Created',
+    startedAt: 'Started',
+    updatedAt: 'Updated',
+    completedAt: 'Completed',
+    expiredAt: 'Expired',
+    retryAfter: 'Retry After',
+    resumeAt: 'Resume',
+    lastReceivedAt: 'Last Received',
+    disposedAt: 'Disposed',
+    receivedCount: 'Times Resolved',
 };
 /**
  * Get the display name for an attribute key.
@@ -229,16 +250,16 @@ const timestampWithTooltipOrNull = (value) => {
 };
 const attributeToDisplayFn = {
     // Names that need pretty-printing
-    workflowName: (value) => parseWorkflowName(String(value))?.shortName ?? '?',
+    workflowName: (_value) => null,
     moduleSpecifier: (value) => getModuleSpecifierFromName(value),
-    stepName: (value) => parseStepName(String(value))?.shortName ?? String(value),
+    stepName: (_value) => null,
     // IDs
-    runId: (value) => String(value),
-    stepId: (value) => String(value),
+    runId: (_value) => null,
+    stepId: (_value) => null,
     hookId: (value) => String(value),
     eventId: (value) => String(value),
     // Run/step details
-    status: (value) => String(value),
+    status: (_value) => null,
     attempt: (value) => String(value),
     // Hook details
     token: (value) => String(value),
@@ -261,9 +282,9 @@ const attributeToDisplayFn = {
     // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
     createdAt: timestampWithTooltipOrNull,
     startedAt: timestampWithTooltipOrNull,
-    updatedAt: timestampWithTooltipOrNull,
+    updatedAt: (_value) => null,
     completedAt: timestampWithTooltipOrNull,
-    expiredAt: timestampWithTooltipOrNull,
+    expiredAt: (_value) => null,
     retryAfter: timestampWithTooltipOrNull,
     resumeAt: timestampWithTooltipOrNull,
     // Resolved attributes, won't actually use this function
@@ -298,9 +319,9 @@ const attributeToDisplayFn = {
             }
             // Don't render an empty "Input (0 arguments)" card when no input exists.
             if (!hasArgs && !hasClosureVars && !hasThisVal) {
-                return (_jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-base py-2" }));
+                return (_jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-label-14 font-medium py-2" }));
             }
-            return (_jsxs(_Fragment, { children: [_jsx(DetailCard, { summary: `Input (${argCount} ${argLabel})`, summaryClassName: "text-base py-2", contentClassName: "mt-0", children: Array.isArray(args)
+            return (_jsxs(_Fragment, { children: [_jsx(DetailCard, { summary: `Input (${argCount} ${argLabel})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: Array.isArray(args)
                             ? args.map((v, i) => (_jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)))
                             : JsonBlock(args) }), hasClosureVars && (_jsx(DetailCard, { summary: "Closure Variables", children: JsonBlock(closureVars) })), hasThisVal && (_jsx(DetailCard, { summary: "this", children: JsonBlock(thisVal) }))] }));
         }
@@ -308,9 +329,9 @@ const attributeToDisplayFn = {
         const argCount = Array.isArray(value) ? value.length : 0;
         const argLabel = argCount === 1 ? 'argument' : 'arguments';
         if (!hasDisplayContent(value)) {
-            return (_jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-base py-2" }));
+            return (_jsx(DetailCard, { summary: "Input (no data)", disabled: true, summaryClassName: "text-label-14 font-medium py-2" }));
         }
-        return (_jsx(DetailCard, { summary: `Input (${argCount} ${argLabel})`, summaryClassName: "text-base py-2", contentClassName: "mt-0", children: Array.isArray(value)
+        return (_jsx(DetailCard, { summary: `Input (${argCount} ${argLabel})`, summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: Array.isArray(value)
                 ? value.map((v, i) => (_jsx("div", { className: "mt-2 first:mt-0", children: JsonBlock(v) }, i)))
                 : JsonBlock(value) }));
     },
@@ -321,7 +342,7 @@ const attributeToDisplayFn = {
             return _jsx(EncryptedFieldBlock, {});
         if (isExpiredMarker(value))
             return _jsx(ExpiredFieldBlock, {});
-        return (_jsx(DetailCard, { summary: "Output", summaryClassName: "text-base py-2", contentClassName: "mt-0", children: JsonBlock(value) }));
+        return (_jsx(DetailCard, { summary: "Output", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) }));
     },
     error: (value) => {
         if (isEncryptedMarker(value))
@@ -333,9 +354,9 @@ const attributeToDisplayFn = {
         // If the error object has a `stack` field, render it as readable
         // pre-formatted text. Otherwise fall back to the raw JSON viewer.
         if (isStructuredErrorWithStack(value)) {
-            return (_jsx(DetailCard, { summary: "Error", summaryClassName: "text-base py-2", contentClassName: "mt-0", children: _jsx(ErrorStackBlock, { value: value }) }));
+            return (_jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: _jsx(ErrorStackBlock, { value: value }) }));
         }
-        return (_jsx(DetailCard, { summary: "Error", summaryClassName: "text-base py-2", contentClassName: "mt-0", children: JsonBlock(value) }));
+        return (_jsx(DetailCard, { summary: "Error", summaryClassName: "text-label-14 font-medium py-2", contentClassName: "mt-0", children: JsonBlock(value) }));
     },
     eventData: (value) => {
         if (isEncryptedMarker(value))
@@ -360,11 +381,9 @@ const ExpiredDataMessage = () => (_jsx("div", { className: "text-copy-12 rounded
         color: 'var(--ds-gray-700)',
     }, children: _jsx("span", { children: "The data for this run has expired and is no longer available." }) }));
 export const AttributeBlock = ({ attribute, value, isLoading, inline = false, context, }) => {
-    const isExpandableLoadingTarget = attribute === 'input' ||
-        attribute === 'output' ||
-        attribute === 'eventData';
+    const isExpandableLoadingTarget = attribute === 'input' || attribute === 'eventData';
     if (isLoading && isExpandableLoadingTarget && !hasDisplayContent(value)) {
-        return (_jsxs("div", { className: `my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`, children: [_jsx("span", { className: `${attribute === 'input' || attribute === 'output' ? 'text-base' : 'text-xs'} font-medium first-letter:uppercase`, style: { color: 'var(--ds-gray-700)' }, children: attribute }), _jsx(Skeleton, { className: "h-9 w-full rounded-md" })] }));
+        return (_jsxs("div", { className: `my-2 flex flex-col ${attribute === 'input' ? 'gap-2 my-3.5' : 'gap-0'}`, children: [_jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), _jsx(Skeleton, { className: "h-9 w-full rounded-md" })] }));
     }
     const displayFn = attributeToDisplayFn[attribute];
     if (!displayFn) {
@@ -377,7 +396,7 @@ export const AttributeBlock = ({ attribute, value, isLoading, inline = false, co
     if (inline) {
         return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-[11px] font-medium", style: { color: 'var(--ds-gray-700)' }, children: attribute }), _jsx("span", { className: "text-[11px]", style: { color: 'var(--ds-gray-1000)' }, children: displayValue })] }));
     }
-    return (_jsxs("div", { className: "relative", children: [typeof isLoading === 'boolean' && isLoading && (_jsx("div", { className: "absolute top-9 right-4", children: _jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: 'var(--ds-gray-900)' } }) })), _jsxs("div", { className: `my-2 flex flex-col ${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'gap-2 my-3.5' : 'gap-0'}`, children: [_jsx("span", { className: `${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'text-base' : 'text-xs'} font-medium first-letter:uppercase`, style: { color: 'var(--ds-gray-700)' }, children: attribute }), _jsx("span", { className: "text-xs", style: { color: 'var(--ds-gray-1000)' }, children: displayValue })] }, attribute)] }));
+    return (_jsxs("div", { className: "relative", children: [typeof isLoading === 'boolean' && isLoading && (_jsx("div", { className: "absolute top-9 right-4", children: _jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2", style: { borderColor: 'var(--ds-gray-900)' } }) })), _jsxs("div", { className: `my-2 flex flex-col ${attribute === 'input' || attribute === 'output' || attribute === 'error' ? 'gap-2 my-3.5' : 'gap-0'}`, children: [_jsx("span", { className: "text-label-14 text-gray-1000 font-medium first-letter:uppercase", children: attribute }), _jsx("span", { className: "text-xs", style: { color: 'var(--ds-gray-1000)' }, children: displayValue })] }, attribute)] }));
 };
 export const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expiredAt, onStreamClick, onRunClick, onDecrypt, isDecrypting = false, resource, }) => {
     const toast = useToast();
@@ -409,9 +428,9 @@ export const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expire
             .sort(sortByAttributeOrder);
         if (!isLoading)
             return present;
-        // During loading, ensure input/output appear so their skeletons render
+        // During loading, ensure input appears so its skeleton renders
         // in the correct position (above the events section).
-        const loadingDefaults = ['input', 'output'];
+        const loadingDefaults = ['input'];
         for (const key of loadingDefaults) {
             if (!present.includes(key)) {
                 present.push(key);
@@ -462,7 +481,7 @@ export const AttributePanel = ({ data, moduleSpecifier, isLoading, error, expire
             toast.error('Failed to copy moduleSpecifier');
         });
     }, []);
-    return (_jsx(RunClickContext.Provider, { value: onRunClick, children: _jsx(StreamClickContext.Provider, { value: onStreamClick, children: _jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : undefined, children: _jsxs("div", { children: [visibleBasicAttributes.length > 0 && (_jsxs("div", { className: "mb-3 flex flex-col overflow-hidden rounded-lg border", style: {
+    return (_jsx(RunClickContext.Provider, { value: onRunClick, children: _jsx(StreamClickContext.Provider, { value: onStreamClick, children: _jsx(DecryptClickContext.Provider, { value: onDecrypt ? { onDecrypt, isDecrypting } : undefined, children: _jsxs("div", { children: [visibleBasicAttributes.length > 0 && (_jsxs("div", { className: "mb-3 flex flex-col overflow-hidden rounded-md border", style: {
                                 borderColor: 'var(--ds-gray-300)',
                             }, children: [orderedBasicAttributes.map((attribute, index) => {
                                     const displayValue = attributeToDisplayFn[attribute]?.(displayData[attribute]);