@workflow/web-shared 5.0.0-beta.43 → 5.0.0-beta.46

package/src/components/trace-viewer/components/span-markers.tsx

@@ -4,7 +4,12 @@ import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { cn } from '../../../lib/cn';
 import { TimestampTooltip } from '../../ui/timestamp-tooltip';
-import type { SpanMarker } from '../utils';
+import type { SpanMarker, SpanMarkerKind } from '../utils';
+
+const MARKER_KIND_PREFIX: Record<SpanMarkerKind, string> = {
+  hook_received: 'Hook received',
+  attr_set: 'Attribute set',
+};
 
 // ---------------------------------------------------------------------------
 // Marker projection
@@ -12,8 +17,9 @@ import type { SpanMarker } from '../utils';
 
 export interface VisibleMarker {
   leftPct: number;
-  /** Absolute (epoch) timestamp in ms — for the tooltip. */
+  /** Absolute (epoch) timestamp in ms, for the tooltip. */
   timeMs: number;
+  kind: SpanMarkerKind;
 }
 
 /**
@@ -37,6 +43,7 @@ export function projectMarkers(
       {
         leftPct: ((m.timeMs - visibleStartMs) / visibleDurationMs) * 100,
         timeMs: m.timeMs,
+        kind: m.kind,
       },
     ];
   });
@@ -48,7 +55,7 @@ const MARKER_MIN_GAP_PX = 16;
 /**
  * Thin out ticks that would visually collide: walk left-to-right and keep each
  * one unless it sits within MARKER_MIN_GAP_PX of the last kept tick. Well-spaced
- * markers survive even when a tight cluster elsewhere on the bar gets thinned —
+ * markers survive even when a tight cluster elsewhere on the bar gets thinned;
  * zoom in to resolve a cluster.
  */
 export function cullCollidingMarkers(
@@ -80,13 +87,11 @@ function MarkerTick({ className }: { className?: string }): ReactNode {
 }
 
 /**
- * Point-in-time markers overlaid on a bar — one vertical tick per event (hook
+ * Point-in-time markers overlaid on a bar: one vertical tick per event (hook
  * resumptions and attribute writes), centered on the bar. Each tick sits inside
- * a larger hit target and, on hover, shows the shared `TimestampTooltip` card
- * (the same light Geist card used for every other timestamp in the app, e.g. the
- * attribute panel and event list) so the time reads consistently with the rest
- * of the product. The position is clamped a hair inside the bar so an edge
- * marker never jams the rounded corner.
+ * a larger hit target and, on hover, shows the shared relative-time context
+ * card, prefixed with the event kind. The position is clamped a hair inside
+ * the bar so an edge marker never jams the rounded corner.
  */
 export function MarkerLayer({
   markers,
@@ -95,13 +100,13 @@ export function MarkerLayer({
 }): ReactNode {
   return (
     <>
-      {markers.map((m) => (
+      {markers.map((m, index) => (
         <span
-          key={m.timeMs}
+          key={`${m.timeMs}-${index}`}
           className="pointer-events-auto absolute top-0 bottom-0 z-10 flex w-8 -translate-x-1/2 items-center justify-center"
           style={{ left: `clamp(8px, ${m.leftPct}%, calc(100% - 8px))` }}
         >
-          <TimestampTooltip date={m.timeMs}>
+          <TimestampTooltip date={m.timeMs} prefix={MARKER_KIND_PREFIX[m.kind]}>
             <span className="flex h-6 w-8 items-center justify-center">
               <MarkerTick className="h-3" />
             </span>
@@ -147,7 +152,7 @@ export function OffscreenMarkerIndicator({
       aria-label={label}
       title={label}
       onClick={(e) => {
-        // Don't let the row's onClick fire — revealing shouldn't also
+        // Don't let the row's onClick fire, since revealing shouldn't also
         // change the span selection.
         e.stopPropagation();
         onReveal?.(targetMs);

package/src/components/trace-viewer/components/timeline.tsx

@@ -432,7 +432,7 @@ const TimelineBar = memo(function TimelineBar({
   );
 
   // Markers that fall outside the visible window (scrolled off while zoomed in)
-  // — surfaced as edge indicators so they aren't silently lost.
+  // are surfaced as edge indicators so they aren't silently lost.
   const offscreen = useMemo<OffscreenMarkers>(
     () =>
       geometry.mode.kind === 'full'
@@ -543,7 +543,7 @@ export { TimelineBar };
 // ---------------------------------------------------------------------------
 
 // Horizontal distance between the anchor bar's measured edge and the vertical
-// guide — also the width of the connector stub bridging the two.
+// guide; also the width of the connector stub bridging the two.
 const MEASURE_GUIDE_OUTSET_PX = 4;
 
 const DeltaMeasureLine = memo(function DeltaMeasureLine({
@@ -567,7 +567,7 @@ const DeltaMeasureLine = memo(function DeltaMeasureLine({
   // It sits just outside the anchor bar's measured edge (so it doesn't blend
   // into the bar's border), joined to the bar by a short horizontal stub. The
   // line runs from the elbow corner (the guide's x) to the hovered span's
-  // measured edge — pulled short of the edge arrow when the hovered span is
+  // measured edge, pulled short of the edge arrow when the hovered span is
   // fully off-screen.
   const guideTop = Math.min(anchorCenterY, lineY);
   const guideBottom = Math.max(anchorCenterY, lineY);
@@ -675,7 +675,7 @@ export function TimelineHeader({
 export interface TimelineHover {
   /** Pointer x as a fraction of the timeline's content width, in [0, 1]. */
   fraction: number;
-  /** Row index under the pointer; may be past the last row — not validated. */
+  /** Row index under the pointer; may be past the last row (not validated). */
   rowIndex: number;
 }
 

package/src/components/trace-viewer/components/use-row-window.ts

@@ -96,7 +96,7 @@ export const ROW_HEIGHT_PX = 40;
  * Scroll a windowed row into view by index.
  *
  * The list is virtualized (fixed `rowHeight` rows), so an off-screen row has no
- * DOM node to `scrollIntoView` — its target offset is computed from its index
+ * DOM node to `scrollIntoView`; its target offset is computed from its index
  * instead. Walks up from `listEl` to the shared scrollable ancestor (the same
  * one `useRowWindow` measures against), only scrolls when the row sits outside
  * the visible area, leaves a one-row `margin` of breathing room past it, and

package/src/components/trace-viewer/trace-viewer.tsx

@@ -231,7 +231,7 @@ function TraceViewerContent({
     [root.startTime, root.endTime]
   );
 
-  // Pan (keeping the current zoom) so `timeMs` is centered in view — used by the
+  // Pan (keeping the current zoom) so `timeMs` is centered in view; used by the
   // off-screen marker indicators to scroll their marker into view.
   const handleRevealTime = useCallback(
     (timeMs: number) => {
@@ -307,7 +307,7 @@ function TraceViewerContent({
 
   // Bring a row into view when keyboard/button navigation lands on a span that
   // sits outside the shared scroll container's visible area. The list is
-  // windowed, so an off-screen row has no DOM node to `scrollIntoView` —
+  // windowed, so an off-screen row has no DOM node to `scrollIntoView`;
   // `scrollRowIntoView` computes the target offset from the span's index.
   const scrollSpanIntoView = useCallback(
     (spanId: string) => {

package/src/components/trace-viewer/utils.test.ts

@@ -153,8 +153,10 @@ describe('computeSpanMarkers', () => {
       attrSetMs: [10_000, 70_000],
     });
 
-    expect(computeSpanMarkers(span).map((m) => m.timeMs)).toEqual([
-      10_000, 50_000, 70_000,
+    expect(computeSpanMarkers(span)).toEqual([
+      { timeMs: 10_000, kind: 'attr_set' },
+      { timeMs: 50_000, kind: 'hook_received' },
+      { timeMs: 70_000, kind: 'attr_set' },
     ]);
   });
 
@@ -165,7 +167,7 @@ describe('computeSpanMarkers', () => {
 });
 
 describe('computeOffscreenMarkers', () => {
-  const mk = (timeMs: number) => ({ timeMs });
+  const mk = (timeMs: number) => ({ timeMs, kind: 'hook_received' as const });
 
   it('partitions markers by side with the nearest one per side', () => {
     const markers = [mk(5), mk(8), mk(50), mk(92), mk(99)];

package/src/components/trace-viewer/utils.ts

@@ -78,7 +78,7 @@ export function clampViewportToRoot(
 }
 
 // ---------------------------------------------------------------------------
-// Wheel gestures — shared between the timeline and the minimap
+// Wheel gestures: shared between the timeline and the minimap
 // ---------------------------------------------------------------------------
 
 /** Convert a wheel delta to pixel units (line-mode deltas arrive in lines). */
@@ -164,7 +164,7 @@ export function computeTimeMarkers(
 }
 
 // ---------------------------------------------------------------------------
-// Span gaps — time deltas between consecutive spans (Alt-key overlay)
+// Span gaps: time deltas between consecutive spans (Alt-key overlay)
 // ---------------------------------------------------------------------------
 
 export interface SpanGap {
@@ -254,8 +254,8 @@ export function computeSpanDelta(
   const deltaMs = laterStart - originMs;
 
   // Entirely outside the viewport. Compared in time-space (not clamped
-  // fractions) so a zero-delta point sitting exactly on a viewport edge —
-  // e.g. the root span selected at default zoom — still renders.
+  // fractions) so a zero-delta point sitting exactly on a viewport edge
+  // (e.g. the root span selected at default zoom) still renders.
   if (laterStart < viewStart || originMs > viewEnd) {
     return null;
   }
@@ -294,7 +294,7 @@ export const RESOURCE_CLASS_NAMES: Record<
     className: 'border-green-500 bg-green-200',
     errorClassName: 'border-red-500 bg-red-200',
   },
-  // Passive spans (hooks) stay gray — matches event-list icons and the minimap.
+  // Passive spans (hooks) stay gray; matches event-list icons and the minimap.
   hook: {
     className: 'border-gray-500 bg-gray-200',
     errorClassName: 'border-red-500 bg-red-200',
@@ -317,7 +317,7 @@ export function getResourceClassNames(resource: string): {
 }
 
 // ---------------------------------------------------------------------------
-// Span segments — split a timeline bar into colored sections by event state
+// Span segments: split a timeline bar into colored sections by event state
 // ---------------------------------------------------------------------------
 
 export type SegmentStatus =
@@ -603,11 +603,14 @@ export function computeSpanSegments(span: Span): Segment[] {
 }
 
 // ---------------------------------------------------------------------------
-// Span markers — point-in-time events rendered as ticks on top of a bar
+// Span markers: point-in-time events rendered as ticks on top of a bar
 // ---------------------------------------------------------------------------
 
+export type SpanMarkerKind = 'hook_received' | 'attr_set';
+
 export interface SpanMarker {
   timeMs: number;
+  kind: SpanMarkerKind;
 }
 
 // `hook_received` = a resumption; `attr_set` = attributes written mid-span.
@@ -616,12 +619,13 @@ const MARKER_EVENT_NAMES = ['hook_received', 'attr_set'];
 export function computeSpanMarkers(span: Span): SpanMarker[] {
   return sortedEventMarks(span.events, MARKER_EVENT_NAMES).map((mark) => ({
     timeMs: mark.time,
+    kind: mark.type as SpanMarkerKind,
   }));
 }
 
 export interface OffscreenSide {
   count: number;
-  /** Nearest off-screen marker — the one a reveal jumps to. */
+  /** Nearest off-screen marker: the one a reveal jumps to. */
   nearestMs: number;
 }
 

package/src/components/ui/data-inspector.tsx

@@ -145,6 +145,8 @@ export const StreamClickContext = createContext<
 export type DecryptClickContextValue = {
   onDecrypt: () => void;
   isDecrypting: boolean;
+  isDecryptDisabled?: boolean;
+  decryptDisabledReason?: string;
   hasEncryptedData?: boolean;
 };
 
@@ -167,7 +169,8 @@ function EncryptedInlineLabel() {
       <Button
         size="xs"
         className="align-baseline gap-x-1"
-        disabled={ctx.isDecrypting}
+        disabled={ctx.isDecrypting || ctx.isDecryptDisabled}
+        title={ctx.isDecryptDisabled ? ctx.decryptDisabledReason : undefined}
         onClick={(e) => {
           e.stopPropagation();
           ctx.onDecrypt();
@@ -842,7 +845,7 @@ export function collapseRefs(data: unknown): unknown {
   if (data instanceof Set) {
     return new Set(Array.from(data.values(), collapseRefs));
   }
-  // Only recurse into plain objects — leave class instances untouched
+  // Only recurse into plain objects; leave class instances untouched
   const proto = Object.getPrototypeOf(data);
   if (proto !== Object.prototype && proto !== null) return data;
   const result: Record<string, unknown> = {};
@@ -871,6 +874,10 @@ export interface DataInspectorProps {
   onDecrypt?: () => void;
   /** Whether decryption is currently in progress */
   isDecrypting?: boolean;
+  /** Whether decryption is unavailable */
+  isDecryptDisabled?: boolean;
+  /** Explains why decryption is unavailable */
+  decryptDisabledReason?: string;
 }
 
 export function DataInspector({
@@ -881,6 +888,8 @@ export function DataInspector({
   onRunClick,
   onDecrypt,
   isDecrypting = false,
+  isDecryptDisabled = false,
+  decryptDisabledReason,
 }: DataInspectorProps) {
   const collapsedData = useMemo(() => collapseRefs(data), [data]);
   const stableData = useStableInspectorData(collapsedData);
@@ -912,7 +921,14 @@ export function DataInspector({
   }
   if (onDecrypt) {
     content = (
-      <DecryptClickContext.Provider value={{ onDecrypt, isDecrypting }}>
+      <DecryptClickContext.Provider
+        value={{
+          onDecrypt,
+          isDecrypting,
+          isDecryptDisabled,
+          decryptDisabledReason,
+        }}
+      >
         {content}
       </DecryptClickContext.Provider>
     );

package/src/components/ui/decrypt-button.tsx

@@ -2,13 +2,17 @@
 
 import { Spinner } from './spinner';
 
-const STYLES = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-decrypt-idle{color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400)}.wf-decrypt-idle:hover{background:var(--ds-gray-alpha-200)}.wf-decrypt-done{color:var(--ds-green-900);background:var(--ds-green-100);box-shadow:0 0 0 1px var(--ds-green-400);cursor:default}`;
+const STYLES = `.wf-decrypt-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-decrypt-idle{color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400)}.wf-decrypt-idle:hover{background:var(--ds-gray-alpha-200)}.wf-decrypt-btn:disabled{cursor:not-allowed;opacity:.5}.wf-decrypt-done{color:var(--ds-green-900);background:var(--ds-green-100);box-shadow:0 0 0 1px var(--ds-green-400);cursor:default}`;
 
 interface DecryptButtonProps {
   /** Whether an encryption key has been obtained (decryption is active). */
   decrypted?: boolean;
   /** Whether the key is currently being fetched. */
   loading?: boolean;
+  /** Whether decryption is unavailable. */
+  disabled?: boolean;
+  /** Explains why decryption is unavailable. */
+  disabledReason?: string;
   /** Called when the user clicks to initiate decryption. */
   onClick?: () => void;
 }
@@ -20,6 +24,8 @@ interface DecryptButtonProps {
 export function DecryptButton({
   decrypted = false,
   loading = false,
+  disabled = false,
+  disabledReason,
   onClick,
 }: DecryptButtonProps) {
   return (
@@ -28,7 +34,8 @@ export function DecryptButton({
       <button
         type="button"
         onClick={decrypted ? undefined : onClick}
-        disabled={decrypted || loading}
+        disabled={decrypted || loading || disabled}
+        title={disabled ? disabledReason : undefined}
         className={`wf-decrypt-btn ${decrypted ? 'wf-decrypt-done' : 'wf-decrypt-idle'}`}
       >
         {loading ? (

package/src/components/ui/duplicate-event-tooltip.tsx

@@ -10,22 +10,24 @@ import {
 } from './tooltip';
 
 /**
- * Explains why an event is shown greyed out: it repeats a class the log
- * already records for the same entity, after that entity finished.
+ * Explains why an event row is shown greyed out, whether it is a repeat the
+ * runtime read past ({@link DUPLICATE_EVENT_MESSAGE}), a backend seal for an
+ * abandoned position (`SEALED_EVENT_MESSAGE`), or any other notice a list
+ * attaches.
  *
- * Renders `children` untouched when `isDuplicate` is false, so a call site can
+ * Renders `children` untouched when `notice` is absent, so a call site can
  * wrap an event label unconditionally. Mounts its own {@link TooltipProvider}
- * so it works in the sidebar and the events table alike; nesting one inside an
- * existing provider is harmless.
+ * so it works in the sidebar and the events table alike; nesting one inside
+ * an existing provider is harmless.
  */
-export function DuplicateEventTooltip({
-  isDuplicate = false,
+export function EventNoticeTooltip({
+  notice,
   children,
 }: {
-  isDuplicate?: boolean;
+  notice?: string;
   children: ReactNode;
 }): ReactNode {
-  if (!isDuplicate) return children;
+  if (!notice) return children;
 
   return (
     <TooltipProvider delayDuration={300}>
@@ -36,9 +38,29 @@ export function DuplicateEventTooltip({
           collisionPadding={8}
           side="top"
         >
-          {DUPLICATE_EVENT_MESSAGE}
+          {notice}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
 }
+
+/**
+ * The duplicate-specific wrapper kept for existing call sites: greys the
+ * event out as a repeat the runtime read past.
+ */
+export function DuplicateEventTooltip({
+  isDuplicate = false,
+  children,
+}: {
+  isDuplicate?: boolean;
+  children: ReactNode;
+}): ReactNode {
+  return (
+    <EventNoticeTooltip
+      notice={isDuplicate ? DUPLICATE_EVENT_MESSAGE : undefined}
+    >
+      {children}
+    </EventNoticeTooltip>
+  );
+}

package/src/components/ui/error-stack-block.tsx

@@ -39,10 +39,10 @@ export function isStructuredErrorWithStack(
 /**
  * Pull a short, single-line title out of an error message.
  *
- * Workflow's structured error messages are multi-line — the first line is
+ * Workflow's structured error messages are multi-line: the first line is
  * the headline (`Failed to serialize step return value`) and the rest are
  * `╰▶ hint:` / `╰▶ docs:` framed details. The full message belongs in the
- * body of the error block; the title should just be the headline so the
+ * body of the error block; the title should be the headline so the
  * card stays scannable.
  */
 function deriveTitle(message: string): string {
@@ -94,7 +94,7 @@ export function ErrorStackBlock({ value }: { value: StructuredErrorRecord }) {
           <AlertCircle className="h-4 w-4 shrink-0" />
           <p
             className="text-label-12 font-semibold m-0 truncate"
-            // The full message or stack is in the body below; the header just
+            // The full message or stack is in the body below; the header
             // shows the first line, single-line, with overflow
             // ellipsised so a long title doesn't push the copy button or
             // wrap into the framed hint/docs lines.

package/src/components/ui/timestamp-tooltip.tsx

@@ -156,7 +156,13 @@ function ZoneDateTimeRow({
   );
 }
 
-function RelativeTimeContextCardContent({ date }: { date: number }): ReactNode {
+function RelativeTimeContextCardContent({
+  date,
+  prefix,
+}: {
+  date: number;
+  prefix?: string;
+}): ReactNode {
   const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
   const timeAgo = useTimeAgo(date);
 
@@ -164,7 +170,7 @@ function RelativeTimeContextCardContent({ date }: { date: number }): ReactNode {
     <div className="flex flex-col gap-3 min-w-[300px]">
       <div className="flex flex-col gap-3">
         <span className="tabular-nums text-label-13 text-gray-900">
-          {timeAgo}
+          {prefix ? `${prefix} ${timeAgo}` : timeAgo}
         </span>
       </div>
       <div className="flex flex-col gap-2">
@@ -196,17 +202,19 @@ type RelativeTimeCardProps = Omit<
   date?: number | null;
   /** Custom content to render instead of the default relative time text. */
   children?: ReactNode;
+  prefix?: string;
 };
 
 /**
  * Relative time label that reveals a context card with detailed UTC and local
  * timestamps on hover. Renders a default short relative time label (e.g.
- * "3 days ago") when `children` is omitted; renders just the children without
+ * "3 days ago") when `children` is omitted; renders only the children without
  * the hover card when `date` is nullish.
  */
 export function RelativeTimeCard({
   date,
   children: _children,
+  prefix,
   ...props
 }: RelativeTimeCardProps): ReactNode {
   const children =
@@ -216,7 +224,7 @@ export function RelativeTimeCard({
 
   return (
     <ContextCardTrigger
-      content={<RelativeTimeContextCardContent date={date} />}
+      content={<RelativeTimeContextCardContent date={date} prefix={prefix} />}
       {...props}
     >
       {children}
@@ -225,7 +233,7 @@ export function RelativeTimeCard({
 }
 
 // ---------------------------------------------------------------------------
-// TimestampTooltip — convenience wrapper used across the observability UI
+// TimestampTooltip: convenience wrapper used across the observability UI
 // ---------------------------------------------------------------------------
 
 /**
@@ -238,10 +246,12 @@ export function TimestampTooltip({
   date,
   children,
   side = 'top',
+  prefix,
 }: {
   date: number | Date | string | null | undefined;
   children: ReactNode;
   side?: ContextCardTriggerProps['side'];
+  prefix?: string;
 }): ReactNode {
   const hasProvider = useHasContextCardProvider();
 
@@ -255,7 +265,7 @@ export function TimestampTooltip({
   if (ts == null || Number.isNaN(ts)) return <>{children}</>;
 
   const card = (
-    <RelativeTimeCard date={ts} side={side} asChild>
+    <RelativeTimeCard date={ts} side={side} prefix={prefix} asChild>
       {children}
     </RelativeTimeCard>
   );

package/src/components/workflow-traces/event-colors.ts

@@ -72,6 +72,17 @@ export function getEventColor(
     };
   }
 
+  // Sealed positions - neutral gray: backend log filler, not run activity
+  if (eventType === 'noop') {
+    return {
+      color: 'var(--ds-gray-500)',
+      background: 'var(--ds-gray-100)',
+      border: 'var(--ds-gray-400)',
+      text: 'var(--ds-gray-900)',
+      secondary: 'var(--ds-gray-700)',
+    };
+  }
+
   // Default - Blue
   return {
     color: 'var(--ds-blue-600)',

package/src/components/workflow-traces/trace-span-construction.test.ts

@@ -1,6 +1,6 @@
 import type { Event, WorkflowRun } from '@workflow/world';
 import { describe, expect, it } from 'vitest';
-import { runToSpan } from './trace-span-construction';
+import { runToSpan, stepToSpan } from './trace-span-construction';
 import { otelTimeToMs } from './trace-time-utils';
 
 const date = (ms: number) => new Date(ms);
@@ -83,3 +83,29 @@ describe('runToSpan', () => {
     expect(data).not.toHaveProperty('occurredAt');
   });
 });
+
+describe('stepToSpan', () => {
+  it('uses the short name for a workflow-prefixed step name', () => {
+    const span = stepToSpan(
+      [
+        event({
+          eventType: 'step_created',
+          correlationId: 'step_1',
+          eventData: {
+            stepName: 'workflow//src/billing.ts//fetchInvoices',
+            input: null,
+          },
+        }),
+        event({
+          eventType: 'step_completed',
+          correlationId: 'step_1',
+          createdAt: date(2_000),
+          eventData: { result: null },
+        }),
+      ],
+      date(2_000)
+    );
+
+    expect(span?.name).toBe('fetchInvoices');
+  });
+});

package/src/components/workflow-traces/trace-span-construction.ts

@@ -175,7 +175,7 @@ export const stepEventsToStepEntity = (
     return null;
   }
 
-  // Walk events in order to derive status, attempt count, and timestamps.
+  // Walk events to derive status, attempt count, and timestamps.
   // Handles both step_retrying and consecutive step_started as retry signals.
   let status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled' =
     'pending';
@@ -236,7 +236,9 @@ export function stepToSpan(stepEvents: Event[], maxEndTime: Date): Span | null {
   if (!step) {
     return null;
   }
-  const parsedName = parseStepName(String(step.stepName));
+  const parsedName =
+    parseStepName(String(step.stepName)) ??
+    parseWorkflowName(String(step.stepName));
 
   const attributes = {
     resource: 'step' as const,
@@ -404,7 +406,7 @@ export function runToSpan(
     getEventTimestamp(terminalEvent) ?? run.completedAt ?? undefined;
   const endTime = completedAt ?? now;
 
-  // Only embed identification fields — not the full object with
+  // Only embed identification fields, not the full object with
   // input/output/error which may contain non-cloneable types. Lifecycle
   // timestamps are event-derived so detail rows align with the span timeline.
   const { input: _i, output: _o, error: _e, ...runIdentity } = run;

package/src/index.ts

@@ -59,6 +59,10 @@ export {
   STREAM_REF_TYPE,
   truncateId,
 } from './lib/hydration';
+export {
+  isSealedNoopEvent,
+  SEALED_EVENT_MESSAGE,
+} from './lib/sealed-events';
 export type { DecodedStreamChunkSource } from './lib/stream-display';
 export type { ToastAdapter } from './lib/toast';
 export { ToastProvider, useToast } from './lib/toast';

package/src/lib/duplicate-events.ts

@@ -162,7 +162,7 @@ function foldDuplicates(ordered: readonly Event[]): Set<string> {
  * `isCompleteHistory` must be false whenever the caller holds a subset of the
  * run's log: one page of a paginated list, or the result of a search. Which
  * occurrence of a class came first is a property of the whole log, so on a
- * subset the earlier event may simply be missing, and the fold would report
+ * subset the earlier event may be missing, and the fold would report
  * the surviving one. Nothing is classified in that case.
  *
  * Two other things make the answer unknowable and yield the same empty result: