@workflow/web-shared 5.0.0-beta.17 → 5.0.0-beta.18

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

@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest';
+import type { Span, SpanEvent } from './types';
+import {
+  computeOffscreenMarkers,
+  computeSpanMarkers,
+  computeSpanSegments,
+} from './utils';
+
+/** Build a high-res timestamp tuple ([seconds, nanoseconds]) for a given ms. */
+function ts(ms: number): [number, number] {
+  return [Math.floor(ms / 1000), (ms % 1000) * 1e6];
+}
+
+function hookSpan(opts: {
+  startMs: number;
+  endMs: number;
+  receivesMs: number[];
+  disposedMs?: number;
+  attrSetMs?: number[];
+}): Span {
+  const events: SpanEvent[] = [
+    { name: 'hook_created', timestamp: ts(opts.startMs), attributes: {} },
+    ...opts.receivesMs.map((m) => ({
+      name: 'hook_received',
+      timestamp: ts(m),
+      attributes: {},
+    })),
+    ...(opts.attrSetMs ?? []).map((m) => ({
+      name: 'attr_set',
+      timestamp: ts(m),
+      attributes: {},
+    })),
+    ...(opts.disposedMs !== undefined
+      ? [
+          {
+            name: 'hook_disposed',
+            timestamp: ts(opts.disposedMs),
+            attributes: {},
+          } satisfies SpanEvent,
+        ]
+      : []),
+  ];
+
+  return {
+    name: 'hook',
+    kind: 0,
+    resource: 'hook',
+    library: { name: 'workflow' },
+    spanId: 'hook-1',
+    status: { code: 1 },
+    traceFlags: 0,
+    attributes: {},
+    links: [],
+    events,
+    startTime: ts(opts.startMs),
+    endTime: ts(opts.endMs),
+    duration: ts(opts.endMs - opts.startMs),
+  };
+}
+
+describe('computeSpanSegments (hook)', () => {
+  it('renders a single waiting segment for a hook resumed many times but not disposed', () => {
+    const span = hookSpan({
+      startMs: 0,
+      endMs: 100_000,
+      receivesMs: [1_000, 50_000, 99_000],
+    });
+
+    // A hook resumed N times still re-suspends after every resumption, so the
+    // bar must stay "waiting" for its whole life — not flip to a filled
+    // "received" segment after the first receive (which hid resumptions 2..N).
+    expect(computeSpanSegments(span)).toEqual([
+      { startFraction: 0, endFraction: 1, status: 'waiting' },
+    ]);
+  });
+
+  it('ends the waiting segment at disposal and appends a succeeded tail', () => {
+    const span = hookSpan({
+      startMs: 0,
+      endMs: 100_000,
+      receivesMs: [1_000, 50_000],
+      disposedMs: 80_000,
+    });
+
+    expect(computeSpanSegments(span)).toEqual([
+      { startFraction: 0, endFraction: 0.8, status: 'waiting' },
+      { startFraction: 0.8, endFraction: 1, status: 'succeeded' },
+    ]);
+  });
+
+  it('treats a never-resolved hook as fully waiting', () => {
+    const span = hookSpan({ startMs: 0, endMs: 100_000, receivesMs: [] });
+
+    expect(computeSpanSegments(span)).toEqual([
+      { startFraction: 0, endFraction: 1, status: 'waiting' },
+    ]);
+  });
+});
+
+describe('computeSpanMarkers', () => {
+  it('emits one marker per resumption, including those at the temporal edges', () => {
+    const span = hookSpan({
+      startMs: 0,
+      endMs: 100_000,
+      receivesMs: [1_000, 50_000, 99_000],
+    });
+
+    const markers = computeSpanMarkers(span);
+    expect(markers.map((m) => m.timeMs)).toEqual([1_000, 50_000, 99_000]);
+  });
+
+  it('merges hook_received and attr_set events, sorted by time', () => {
+    const span = hookSpan({
+      startMs: 0,
+      endMs: 100_000,
+      receivesMs: [50_000],
+      attrSetMs: [10_000, 70_000],
+    });
+
+    expect(computeSpanMarkers(span).map((m) => m.timeMs)).toEqual([
+      10_000, 50_000, 70_000,
+    ]);
+  });
+
+  it('returns no markers when the span has no marker events', () => {
+    const span = hookSpan({ startMs: 0, endMs: 100_000, receivesMs: [] });
+    expect(computeSpanMarkers(span)).toEqual([]);
+  });
+});
+
+describe('computeOffscreenMarkers', () => {
+  const mk = (timeMs: number) => ({ timeMs });
+
+  it('partitions markers by side with the nearest one per side', () => {
+    const markers = [mk(5), mk(8), mk(50), mk(92), mk(99)];
+    // Visible window [10, 90]: 5 & 8 off left (nearest 8), 92 & 99 off right
+    // (nearest 92), 50 in view.
+    expect(computeOffscreenMarkers(markers, 10, 90)).toEqual({
+      left: { count: 2, nearestMs: 8 },
+      right: { count: 2, nearestMs: 92 },
+    });
+  });
+
+  it('returns null for a side with nothing off-screen', () => {
+    expect(computeOffscreenMarkers([mk(20), mk(50)], 10, 90)).toEqual({
+      left: null,
+      right: null,
+    });
+  });
+});

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

@@ -1,5 +1,5 @@
-import type { Span, SpanEvent } from './types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import type { Span, SpanEvent } from './types';
 
 // ---------------------------------------------------------------------------
 // Root bounds
@@ -243,7 +243,7 @@ function computeStepSegmentsFromSpan(
   ]);
 
   if (marks.length === 0) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'running' });
+    segments.push({ startFraction: 0, endFraction: 1, status: 'queued' });
     return segments;
   }
 
@@ -278,7 +278,7 @@ function computeStepSegmentsFromSpan(
             ? 'failed'
             : nextType === 'step_completed'
               ? 'succeeded'
-              : 'running';
+              : 'retrying';
         segments.push({
           startFraction: markFrac,
           endFraction: nextFrac,
@@ -313,47 +313,20 @@ function computeHookSegmentsFromSpan(
   const segments: Segment[] = [];
   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 disposed = sortedEventMarks(events, ['hook_disposed'])[0];
   const disposedFrac = disposed
     ? timeToFraction(disposed.time, startMs, duration)
     : null;
 
-  if (receivedFrac !== null && receivedFrac > 0.001) {
+  const waitingEnd = disposedFrac ?? 1;
+  if (waitingEnd > 0.001) {
     segments.push({
       startFraction: 0,
-      endFraction: receivedFrac,
-      status: 'waiting',
-    });
-  } else if (receivedFrac === null && disposedFrac !== null) {
-    segments.push({
-      startFraction: 0,
-      endFraction: disposedFrac,
+      endFraction: waitingEnd,
       status: 'waiting',
     });
   }
 
-  if (receivedFrac !== null) {
-    segments.push({
-      startFraction: receivedFrac,
-      endFraction: disposedFrac ?? 1,
-      status: 'received',
-    });
-  }
-
   if (disposedFrac !== null && disposedFrac < 0.999) {
     segments.push({
       startFraction: disposedFrac,
@@ -488,3 +461,57 @@ export function computeSpanSegments(span: Span): Segment[] {
       return [];
   }
 }
+
+// ---------------------------------------------------------------------------
+// Span markers — point-in-time events rendered as ticks on top of a bar
+// ---------------------------------------------------------------------------
+
+export interface SpanMarker {
+  timeMs: number;
+}
+
+// `hook_received` = a resumption; `attr_set` = attributes written mid-span.
+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,
+  }));
+}
+
+export interface OffscreenSide {
+  count: number;
+  /** Nearest off-screen marker — the one a reveal jumps to. */
+  nearestMs: number;
+}
+
+export interface OffscreenMarkers {
+  left: OffscreenSide | null;
+  right: OffscreenSide | null;
+}
+
+/** Partition markers outside `[visibleStartMs, visibleEndMs]` by side. */
+export function computeOffscreenMarkers(
+  markers: SpanMarker[],
+  visibleStartMs: number,
+  visibleEndMs: number
+): OffscreenMarkers {
+  let leftCount = 0;
+  let rightCount = 0;
+  let nearestLeft = Number.NEGATIVE_INFINITY;
+  let nearestRight = Number.POSITIVE_INFINITY;
+  for (const { timeMs } of markers) {
+    if (timeMs < visibleStartMs) {
+      leftCount++;
+      if (timeMs > nearestLeft) nearestLeft = timeMs;
+    } else if (timeMs > visibleEndMs) {
+      rightCount++;
+      if (timeMs < nearestRight) nearestRight = timeMs;
+    }
+  }
+  return {
+    left: leftCount > 0 ? { count: leftCount, nearestMs: nearestLeft } : null,
+    right:
+      rightCount > 0 ? { count: rightCount, nearestMs: nearestRight } : null,
+  };
+}

package/src/components/sidebar/attribute-panel.tsx

@@ -7,7 +7,6 @@ import { format } from 'date-fns';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
-import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
 import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
@@ -616,6 +615,7 @@ const copyableBasicAttributes = new Set<AttributeKey>([
   'hookId',
   'eventId',
   'deploymentId',
+  'moduleSpecifier',
 ]);
 
 export const AttributeBlock = ({
@@ -733,7 +733,6 @@ export const AttributePanel = ({
   /** Resource type of the selected span — used to show targeted loading skeletons. */
   resource?: string;
 }) => {
-  const toast = useToast();
   // Extract workflowCoreVersion from executionContext for display
   const displayData = useMemo(() => {
     const result = { ...data };
@@ -819,17 +818,6 @@ export const AttributePanel = ({
     }),
     [displayData.stepName]
   );
-  const handleCopyModuleSpecifier = useCallback((value: string) => {
-    navigator.clipboard
-      .writeText(value)
-      .then(() => {
-        toast.success('moduleSpecifier copied');
-      })
-      .catch(() => {
-        toast.error('Failed to copy moduleSpecifier');
-      });
-  }, []);
-
   const outerDecryptCtx = useContext(DecryptClickContext);
   const decryptValue = onDecrypt
     ? {
@@ -850,16 +838,9 @@ export const AttributePanel = ({
                   const displayValue = attributeToDisplayFn[
                     attribute as keyof typeof attributeToDisplayFn
                   ]?.(displayData[attribute as keyof typeof displayData]);
-                  const isModuleSpecifier = attribute === 'moduleSpecifier';
                   const isCopyableBasicAttribute =
                     copyableBasicAttributes.has(attribute as AttributeKey) &&
                     typeof displayValue === 'string';
-                  const moduleSpecifierValue =
-                    typeof displayValue === 'string'
-                      ? displayValue
-                      : String(
-                          displayValue ?? displayData.moduleSpecifier ?? ''
-                        );
 
                   return (
                     <div
@@ -869,34 +850,15 @@ export const AttributePanel = ({
                       <span className="text-label-14 text-gray-900">
                         {getAttributeDisplayName(attribute)}
                       </span>
-                      {isModuleSpecifier ? (
-                        <button
-                          type="button"
-                          className="min-w-0 max-w-[70%] truncate text-right text-label-13 font-mono"
-                          style={{
-                            color: 'var(--ds-gray-1000)',
-                            background: 'transparent',
-                            border: 'none',
-                            padding: 0,
-                          }}
-                          title={moduleSpecifierValue}
-                          onClick={() =>
-                            handleCopyModuleSpecifier(moduleSpecifierValue)
-                          }
-                        >
-                          {moduleSpecifierValue}
-                        </button>
-                      ) : isCopyableBasicAttribute ? (
+                      {isCopyableBasicAttribute ? (
                         <div
-                          className="flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-right text-[13px] font-mono"
-                          style={{
-                            color: 'var(--ds-gray-1000)',
-                          }}
+                          className="flex min-w-0 max-w-[70%] items-center justify-end gap-1 text-[13px] font-mono text-gray-1000"
                           title={displayValue}
                         >
                           <MiddleTruncate
                             value={displayValue}
-                            className="flex-1"
+                            className="text-right"
+                            style={{ gridTemplateColumns: 'minmax(0, 1fr)' }}
                           />
                           <CopyButton
                             copyText={displayValue}

package/src/components/sidebar/attributes-block.tsx

@@ -41,26 +41,21 @@ function AttributeRow({
 }) {
   const reserved = isReservedAttributeKey(attributeKey);
   return (
-    <div className="flex items-center justify-between gap-3 py-1.5">
+    <div className="flex items-center justify-between gap-3 py-0.5">
       <span
-        className="flex min-w-0 items-center gap-1.5 text-label-12 font-mono"
-        style={{
-          color: reserved ? 'var(--ds-gray-700)' : 'var(--ds-gray-900)',
-        }}
+        className="flex min-w-0 items-center gap-1.5 text-label-13 text-gray-900"
+        style={reserved ? { color: 'var(--ds-gray-700)' } : undefined}
       >
         <span className="truncate">{attributeKey}</span>
         {reserved && <ReservedBadge />}
       </span>
       {removed ? (
-        <span
-          className="shrink-0 text-label-12 italic"
-          style={{ color: 'var(--ds-gray-700)' }}
-        >
+        <span className="shrink-0 text-copy-13 italic text-gray-700">
           removed
         </span>
       ) : (
         <span
-          className="max-w-[60%] truncate text-right text-label-12 font-mono text-gray-1000"
+          className="max-w-[60%] truncate text-copy-13 text-gray-1000"
           title={value}
         >
           {value}
@@ -85,7 +80,7 @@ export function sortAttributeKeys(keys: string[]): string[] {
 }
 
 /**
- * Collapsible card showing a run's materialized attributes as key-value
+ * Collapsible section showing a run's materialized attributes as key-value
  * rows. Reserved (`$`-prefixed) keys are visually de-emphasized with a
  * badge and sorted after user keys.
  */
@@ -98,12 +93,8 @@ export function RunAttributesCard({
   if (keys.length === 0) return null;
 
   return (
-    <DetailCard
-      summary={`Attributes (${keys.length})`}
-      defaultOpen
-      contentClassName="mb-0"
-    >
-      <div className="flex flex-col divide-y divide-gray-alpha-400">
+    <DetailCard summary="Attributes" defaultOpen contentClassName="mb-4">
+      <div className="flex flex-col">
         {keys.map((key) => (
           <AttributeRow attributeKey={key} key={key} value={attributes[key]} />
         ))}
@@ -156,7 +147,7 @@ export function AttrSetEventBlock({ data }: { data: unknown }) {
 
   return (
     <div className="flex flex-col px-3 py-1">
-      <div className="flex flex-col divide-y divide-gray-alpha-400">
+      <div className="flex flex-col">
         {data.changes.map((change, index) => (
           <AttributeRow
             attributeKey={change.key}

package/src/components/trace-viewer/trace-viewer.module.css

@@ -1314,10 +1314,10 @@
 .segQueued {
   background: repeating-linear-gradient(
     45deg,
-    var(--ds-gray-alpha-200),
-    var(--ds-gray-alpha-200) 6px,
-    var(--ds-gray-alpha-100) 6px,
-    var(--ds-gray-alpha-100) 12px
+    var(--ds-gray-200),
+    var(--ds-gray-200) 6px,
+    var(--ds-gray-100) 6px,
+    var(--ds-gray-100) 12px
   );
 }
 

package/src/lib/hydration.ts

@@ -476,6 +476,13 @@ export async function hydrateResourceIOWithKey<T>(
     '@workflow/core/serialization-format'
   );
   const { importKey } = await import('@workflow/core/encryption');
+  // 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.
+  const { ensureZstdDecoderRegistered } = await import(
+    './zstd-browser-decoder.js'
+  );
+  ensureZstdDecoderRegistered();
   const cryptoKey = await importKey(key);
   const revivers = getRevivers();
 

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);
+  });
+}