@workflow/web-shared 5.0.0-beta.42 → 5.0.0-beta.44

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:

package/src/lib/hydration.ts

@@ -137,8 +137,8 @@ export function getWebRevivers(): Revivers {
     // entry for each built-in Error subclass plus the workflow-specific
     // `FatalError` / `RetryableError` / `HookConflictError` /
     // `RuntimeDecryptionError` and `AggregateError`. Without
-    // matching revivers here, `devalue.unflatten` throws "Unknown type X"
-    // — which surfaces in the web o11y UI as "Failed to load resource
+    // matching revivers here, `devalue.unflatten` throws "Unknown type X",
+    // which surfaces in the web o11y UI as "Failed to load resource
     // details: Unknown type FatalError".
     Error: (value) => {
       const opts = 'cause' in value ? { cause: value.cause } : undefined;
@@ -171,7 +171,7 @@ export function getWebRevivers(): Revivers {
     // `FatalError` and `RetryableError` are not built-in browser globals,
     // so we can't resolve a constructor from globalThis. The web o11y UI
     // doesn't need `instanceof FatalError` to pass (no user code runs
-    // here) — it just needs `name`, `message`, `stack`, and any extra
+    // here). The web o11y UI needs `name`, `message`, `stack`, and any extra
     // enumerable fields to render. Construct a plain `Error` with `name`
     // set; ObjectInspector reads `constructor.name` for the displayed
     // class label, but we don't have the real class, so we emit a tagged
@@ -209,7 +209,7 @@ export function getWebRevivers(): Revivers {
       // RetryableError reducer for the rationale around realm-safety).
       // Rehydrate as a Date so o11y consumers can render it directly.
       // Guard against payloads from older runtime versions that predate
-      // the field — without this check, `new Date(undefined)` would
+      // the field: without this check, `new Date(undefined)` would
       // produce an Invalid Date rather than omitting the property.
       if (value.retryAfter != null) {
         error.retryAfter = new Date(value.retryAfter);
@@ -492,17 +492,12 @@ export async function hydrateResourceIOAsync<T>(
   );
   // Payloads may be zstd-compressed (the Web DecompressionStream has no zstd);
   // register the WASM-backed browser decoder before hydrating. Idempotent and
-  // lazy — the WASM is only compiled when a zstd payload is actually decoded.
+  // lazy: the WASM is only compiled when a zstd payload is actually decoded.
   const { ensureZstdDecoderRegistered } = await import(
     './zstd-browser-decoder.js'
   );
   ensureZstdDecoderRegistered();
-  // Resolve the *full* key capability, not just the symmetric key: a run's
-  // event log can contain sealed ('encp') payloads that another run wrote to
-  // it (a cross-deployment hook resumption, say), and opening those needs the
-  // run's X25519 scalar in addition to its AES key. Both are derived from the
-  // same 32 bytes the key-retrieval endpoint returns.
-  // Resolve the *full* key capability, not just the symmetric key: a run's
+  // Resolve the *full* key capability: a run's
   // event log can contain sealed ('encp') payloads that another run wrote to
   // it (a cross-deployment hook resumption, say), and opening those needs the
   // run's X25519 scalar in addition to its AES key. Both derive from the same
@@ -520,7 +515,7 @@ export async function hydrateResourceIOAsync<T>(
     if (value instanceof Uint8Array) {
       return hydrateDataWithKey(value, revivers, cryptoKey);
     }
-    // Not serialized — return as-is.
+    // Not serialized, so return as-is.
     return value;
   }
 

package/src/lib/sealed-events.ts

@@ -0,0 +1,32 @@
+import { type Event, isSealedNoopEvent as isSealedNoop } from '@workflow/world';
+
+/**
+ * Sealed-position `noop` events (specVersion 7).
+ *
+ * A sealed-log backend hands each write its position before the write
+ * commits, so a writer that dies after claiming a position leaves a hole.
+ * The backend closes a provably abandoned hole by writing a `noop` event
+ * into it, creating a log-only row the run itself never observes. Replay steps
+ * over it without offering it to any consumer and without advancing the
+ * deterministic clock.
+ *
+ * The observability UI mirrors that treatment. A `noop` appears in event
+ * lists (greyed, with {@link SEALED_EVENT_MESSAGE} on hover) because it is a
+ * real row of the log, but it is excluded from span geometry and from
+ * trace-duration bounds: its `createdAt` is the *sealer's* wall clock, which
+ * can postdate every real event around it, and letting it stretch a span or
+ * the trace's known duration would chart the sealer's schedule rather than
+ * the run's.
+ */
+export const SEALED_EVENT_MESSAGE =
+  'No-op events are written by the backend to seal an abandoned log position';
+
+/**
+ * Whether `event` is a backend-written seal for an abandoned position.
+ *
+ * Delegates to `@workflow/world` so the UI, the `node:vm` engine and the
+ * QuickJS engine cannot drift on what a seal is.
+ */
+export function isSealedNoopEvent(event: Pick<Event, 'eventType'>): boolean {
+  return isSealedNoop(event);
+}

package/src/lib/trace-builder.test.ts

@@ -1,7 +1,7 @@
 import type { Event, EventType, WorkflowRun } from '@workflow/world';
 import { describe, expect, it } from 'vitest';
 import { otelTimeToMs } from '../components/workflow-traces/trace-time-utils';
-import { buildTrace } from './trace-builder';
+import { buildTrace, filterSpanRawEvents } from './trace-builder';
 
 const BASE_TIME = Date.parse('2026-01-01T00:00:00.000Z');
 
@@ -71,4 +71,32 @@ describe('buildTrace', () => {
     expect(otelTimeToMs(stepSpan?.endTime ?? [0, 0])).toBe(BASE_TIME + 20_000);
     expect(trace.duplicateEventIds.size).toBe(0);
   });
+
+  it('keeps sealed-position noops out of the geometry and its time bounds', () => {
+    const events = [
+      event('run_created', { at: 0 }),
+      event('run_started', { at: 0 }),
+      event('step_created', { correlationId: 'step_a', at: 1 }),
+      event('step_started', { correlationId: 'step_a', at: 1 }),
+      event('step_completed', { correlationId: 'step_a', at: 4 }),
+      // A hole sealed by a reader long after the run went quiet. Its
+      // createdAt is the SEALER's clock — letting it into the geometry would
+      // stretch the trace to the sealer's schedule.
+      event('noop', { correlationId: 'noop_5', at: 300 }),
+    ];
+
+    const trace = buildTrace(run, events, new Date(BASE_TIME + 400_000), {
+      isCompleteHistory: true,
+    });
+
+    // No span for the noop's correlationId, and the trace's known duration
+    // ends at the last real event, not at the seal.
+    expect(trace.spans.some((span) => span.spanId === 'noop_5')).toBe(false);
+    expect(trace.knownDurationMs).toBe(4000);
+
+    // The run span's raw event list still shows the seal (greyed in the UI),
+    // exactly like duplicate rows: real log rows, marked with the reason.
+    const runRaw = filterSpanRawEvents(events, 'run', 'run_1');
+    expect(runRaw.some((e) => e.eventType === 'noop')).toBe(true);
+  });
 });

package/src/lib/trace-builder.ts

@@ -23,6 +23,7 @@ import {
 } from '../components/workflow-traces/trace-span-construction';
 import { otelTimeToMs } from '../components/workflow-traces/trace-time-utils';
 import { findDuplicateEventIds } from './duplicate-events';
+import { isSealedNoopEvent } from './sealed-events';
 import type { Span } from './trace-types';
 
 /**
@@ -212,14 +213,18 @@ export function buildTrace(
   // Span geometry comes from what the run acted on. A repeat of a class the
   // log already records is read past by every replay, and letting one through
   // here would stretch a span to whenever a concurrent replay committed it.
-  // The event lists still show them, marked as repeats.
+  // Sealed-position noops are excluded for the same reason with a different
+  // clock: a noop's createdAt is the sealer's wall time, which can postdate
+  // every real event around it, so feeding it into span grouping or the
+  // latest-known-time bound would chart the sealer's schedule instead of the
+  // run's. The event lists still show both, marked with the reason.
   const duplicateEventIds = findDuplicateEventIds(events, {
     isCompleteHistory,
   });
-  const actedOnEvents =
-    duplicateEventIds.size === 0
-      ? events
-      : events.filter((event) => !duplicateEventIds.has(event.eventId));
+  const actedOnEvents = events.filter(
+    (event) =>
+      !duplicateEventIds.has(event.eventId) && !isSealedNoopEvent(event)
+  );
 
   const groupedEvents = groupEventsByCorrelation(actedOnEvents);
   const latestKnownTime = computeLatestKnownTime(actedOnEvents, run);

package/src/lib/utils.ts

@@ -80,7 +80,7 @@ export function formatDuration(ms: number, compact = false): string {
  * Unlike {@link formatDuration}, this keeps sub-second detail, so 1626ms
  * renders as "1.63s" rather than "2s". `fractionDigits` sets both the number of
  * decimals on the seconds component (trailing zeros trimmed, so 2000ms is "2s"
- * and 1500ms is "1.5s") and the rounding granularity — the default of 2 rounds
+ * and 1500ms is "1.5s") and the rounding granularity: the default of 2 rounds
  * to 10ms; the timeline ruler passes fewer digits to match its tick step.
  *
  * - < 1s: shows whole milliseconds (e.g. "626ms")

package/src/lib/zstd-browser-decoder.ts

@@ -8,7 +8,7 @@
  *
  * The package leaves WASM sourcing to the caller; we resolve the shipped
  * `zstd.wasm` as a bundler asset (`new URL(..., import.meta.url)`, the same
- * pattern the trace-viewer Worker uses) and compile it once, lazily — the
+ * pattern the trace-viewer Worker uses) and compile it once, lazily: the
  * WASM is fetched only the first time a zstd payload is actually decoded.
  */
 import { registerZstdDecoder } from '@workflow/core/serialization-format';