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

package/src/lib/trace-builder.ts

@@ -12,8 +12,8 @@ import {
   hookToSpan,
   runToSpan,
   stepToSpan,
-  waitToSpan,
   WORKFLOW_LIBRARY,
+  waitToSpan,
 } from '../components/workflow-traces/trace-span-construction';
 import { otelTimeToMs } from '../components/workflow-traces/trace-time-utils';
 
@@ -31,6 +31,37 @@ export const isHookLifecycleEvent = (eventType: string) =>
   eventType === 'hook_created' ||
   eventType === 'hook_disposed';
 
+/**
+ * Events that belong to the run root span rather than a child entity span.
+ * Mirrors the fallthrough logic in {@link groupEventsByCorrelation}: events
+ * without a correlationId (run lifecycle) plus correlated events that aren't
+ * step/timer/hook events (e.g. `attr_set`, whose correlationId is a dedup
+ * token rather than a child entity ID).
+ */
+export const isRunLevelEvent = (event: Event): boolean =>
+  !event.correlationId ||
+  (!isTimerEvent(event.eventType) &&
+    !isHookLifecycleEvent(event.eventType) &&
+    !isStepEvent(event.eventType));
+
+/**
+ * Filter the raw event list down to the events for a selected span.
+ * For the run root span this returns run-level events (see
+ * {@link isRunLevelEvent}); for child spans it returns the events
+ * correlated to that span's ID.
+ */
+export function filterSpanRawEvents(
+  events: Event[],
+  resource: string | undefined,
+  spanId: string | undefined
+): Event[] {
+  if (resource === 'run') {
+    return events.filter(isRunLevelEvent);
+  }
+  if (!spanId) return [];
+  return events.filter((e) => e.correlationId === spanId);
+}
+
 // ---------------------------------------------------------------------------
 // Event grouping
 // ---------------------------------------------------------------------------
@@ -117,6 +148,7 @@ function buildSpans(
   // unknown territory. Even when the run is completed, we may not have loaded
   // all events yet, so always use the latest event we've actually seen.
   const childMaxEnd = latestKnownTime;
+  const runMaxEnd = run.completedAt ?? now;
 
   const stepSpans = Array.from(groupedEvents.eventsByStepId.values())
     .map((events) => stepToSpan(events, childMaxEnd))
@@ -127,7 +159,7 @@ function buildSpans(
     .filter((span): span is Span => span !== null);
 
   const waitSpans = Array.from(groupedEvents.timerEvents.values())
-    .map((events) => waitToSpan(events, childMaxEnd))
+    .map((events) => waitToSpan(events, childMaxEnd, runMaxEnd))
     .filter((span): span is Span => span !== null);
 
   return {

package/src/lib/utils.ts

@@ -7,10 +7,6 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-const durationFormatter = new Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 2,
-});
-
 const MS_IN_SECOND = 1000;
 const MS_IN_MINUTE = 60 * MS_IN_SECOND;
 const MS_IN_HOUR = 60 * MS_IN_MINUTE;
@@ -20,52 +16,53 @@ const MS_IN_DAY = 24 * MS_IN_HOUR;
  * Formats a duration in milliseconds to a human-readable string.
  *
  * @param ms - Duration in milliseconds
- * @param compact - If true, returns a single-unit format (e.g., "45s", "2.5m").
- *                  If false (default), returns multi-part format (e.g., "1h 30m", "2d 5h").
+ * @param compact - If true, returns a compact format (e.g., "380ms", "2m 30s").
+ *                  If false (default), returns multi-part format (e.g., "1m 13s", "2d 5h 3m 12s").
  *
- * Compact format:
- * - < 1s: shows milliseconds (e.g., "500ms")
+ * Compact format (timeline markers):
+ * - < 1s: shows milliseconds (e.g., "380ms")
  * - < 1m: shows seconds (e.g., "45s")
- * - < 1h: shows minutes (e.g., "45m")
- * - >= 1h: shows hours (e.g., "2.5h")
+ * - < 1h: shows minutes and seconds (e.g., "2m 30s")
+ * - >= 1h: shows hours and minutes (e.g., "2h 30m")
  *
  * Full format:
- * - < 1s: shows milliseconds (e.g., "500ms")
- * - < 1m: shows seconds (e.g., "45.5s")
- * - >= 1m: shows human-readable format (e.g., "1h 30m", "2d 5h")
+ * - < 1s: shows milliseconds (e.g., "380ms")
+ * - < 1m: shows seconds (e.g., "45s")
+ * - >= 1m: shows decomposed format with whole seconds (e.g., "1m 13s", "2m 13s")
  */
 export function formatDuration(ms: number, compact = false): string {
   if (ms === 0) {
-    return '0';
+    return '0s';
   }
 
-  // For durations less than 1 second, show milliseconds
   if (ms < MS_IN_SECOND) {
-    return `${durationFormatter.format(ms)}ms`;
+    const roundedMs = Math.round(ms);
+    return roundedMs < MS_IN_SECOND ? `${roundedMs}ms` : '1s';
   }
 
-  // For durations less than 1 minute, show seconds
-  if (ms < MS_IN_MINUTE) {
-    return `${durationFormatter.format(ms / MS_IN_SECOND)}s`;
+  const roundedMs = Math.round(ms / MS_IN_SECOND) * MS_IN_SECOND;
+
+  if (roundedMs < MS_IN_MINUTE) {
+    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
   }
 
   // Compact format: multi-unit without decimals (e.g. "8m 20s", "2h 30m")
   if (compact) {
-    if (ms < MS_IN_HOUR) {
-      const m = Math.floor(ms / MS_IN_MINUTE);
-      const s = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+    if (roundedMs < MS_IN_HOUR) {
+      const m = Math.floor(roundedMs / MS_IN_MINUTE);
+      const s = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
       return s > 0 ? `${m}m ${s}s` : `${m}m`;
     }
-    const h = Math.floor(ms / MS_IN_HOUR);
-    const m = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
+    const h = Math.floor(roundedMs / MS_IN_HOUR);
+    const m = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
     return m > 0 ? `${h}h ${m}m` : `${h}h`;
   }
 
-  // Full format: human-readable multi-part
-  const days = Math.floor(ms / MS_IN_DAY);
-  const hours = Math.floor((ms % MS_IN_DAY) / MS_IN_HOUR);
-  const minutes = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
-  const seconds = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+  // Full format: decompose into larger units + whole seconds.
+  const days = Math.floor(roundedMs / MS_IN_DAY);
+  const hours = Math.floor((roundedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
 
   const parts: string[] = [];
 
@@ -78,9 +75,64 @@ export function formatDuration(ms: number, compact = false): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  if (hours <= 1 && (seconds > 0 || parts.length === 0)) {
-    parts.push(`${seconds}s`);
+  parts.push(`${seconds}s`);
+
+  return parts.join(' ');
+}
+
+// Locale-aware formatter that always renders exactly two fraction digits.
+// Used for the seconds component of precise durations so values are never
+// snapped to a whole second (and thousands separators stay correct).
+const preciseSecondsFormatter = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+/**
+ * Formats a duration in milliseconds without snapping to whole seconds.
+ *
+ * Unlike {@link formatDuration}, this never rounds a sub-minute value up to
+ * the next whole second (e.g. 1626ms renders as "1.63s", not "2s").
+ *
+ * - < 1s: shows whole milliseconds (e.g. "626ms")
+ * - 1s – 1m: shows seconds with two decimals (e.g. "1.63s", "45.20s")
+ * - >= 1m: decomposes into d/h/m with two-decimal seconds (e.g. "1m 13.45s")
+ */
+export function formatDurationPrecise(ms: number): string {
+  if (ms === 0) {
+    return '0s';
+  }
+
+  if (ms < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms);
+    if (roundedMs < MS_IN_SECOND) {
+      return `${roundedMs}ms`;
+    }
+  }
+
+  const normalizedMs = Math.round(ms / 10) * 10;
+
+  if (normalizedMs < MS_IN_MINUTE) {
+    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+  }
+
+  const days = Math.floor(normalizedMs / MS_IN_DAY);
+  const hours = Math.floor((normalizedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((normalizedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = (normalizedMs % MS_IN_MINUTE) / MS_IN_SECOND;
+
+  const parts: string[] = [];
+
+  if (days > 0) {
+    parts.push(`${days}d`);
+  }
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`);
   }
+  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
 
   return parts.join(' ');
 }

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

@@ -0,0 +1,42 @@
+/**
+ * Browser zstd decoder for the o11y read path.
+ *
+ * The Web `DecompressionStream` has no zstd support, so `@workflow/core`'s
+ * `hydrateDataWithKey` delegates zstd inflation to a decoder registered via
+ * `registerZstdDecoder`. This module supplies that decoder, backed by the
+ * `@tootallnate/zstd-wasm` single-file WASM decoder.
+ *
+ * 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
+ * WASM is fetched only the first time a zstd payload is actually decoded.
+ */
+import { registerZstdDecoder } from '@workflow/core/serialization-format';
+
+let registered = false;
+let modulePromise: Promise<WebAssembly.Module> | undefined;
+
+function loadWasmModule(): Promise<WebAssembly.Module> {
+  if (!modulePromise) {
+    const url = new URL('@tootallnate/zstd-wasm/zstd.wasm', import.meta.url);
+    modulePromise = fetch(url)
+      .then((res) => res.arrayBuffer())
+      .then((bytes) => WebAssembly.compile(bytes));
+  }
+  return modulePromise;
+}
+
+/**
+ * Register the browser zstd decoder with `@workflow/core` (idempotent).
+ * Call this before hydrating payloads that may be zstd-compressed; the
+ * actual WASM compile + decode happens lazily on first use.
+ */
+export function ensureZstdDecoderRegistered(): void {
+  if (registered) return;
+  registered = true;
+  registerZstdDecoder(async (payload) => {
+    const { decompressBytes } = await import('@tootallnate/zstd-wasm');
+    const wasmModule = await loadWasmModule();
+    return decompressBytes(wasmModule, payload);
+  });
+}