@workflow/web-shared 5.0.0-beta.35 → 5.0.0-beta.37

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

@@ -3,6 +3,7 @@ import type { Span, SpanEvent } from './types';
 import {
   clampViewportToRoot,
   computeOffscreenMarkers,
+  computeSpanDelta,
   computeSpanMarkers,
   computeSpanSegments,
   computeTimeMarkers,
@@ -257,3 +258,201 @@ describe('getResourceColor', () => {
     });
   });
 });
+
+describe('computeSpanDelta', () => {
+  function span(id: string, startMs: number, endMs: number): Span {
+    return {
+      name: id,
+      kind: 0,
+      resource: 'step',
+      library: { name: 'workflow' },
+      spanId: id,
+      status: { code: 1 },
+      traceFlags: 0,
+      attributes: {},
+      links: [],
+      events: [],
+      startTime: ts(startMs),
+      endTime: ts(endMs),
+      duration: ts(endMs - startMs),
+    };
+  }
+
+  it('measures the gap between disjoint spans (anchor earlier)', () => {
+    const delta = computeSpanDelta(
+      span('a', 0, 100),
+      span('b', 300, 400),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 200,
+      anchorFrac: 0.1,
+      hoveredFrac: 0.3,
+      anchorEdge: 'end',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('is direction-agnostic: anchor later gives the same delta with edges swapped', () => {
+    const delta = computeSpanDelta(
+      span('b', 300, 400),
+      span('a', 0, 100),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 200,
+      anchorFrac: 0.3,
+      hoveredFrac: 0.1,
+      anchorEdge: 'start',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('measures start-to-start offset for overlapping spans', () => {
+    const delta = computeSpanDelta(
+      span('a', 0, 500),
+      span('b', 200, 800),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 200,
+      anchorFrac: 0,
+      hoveredFrac: 0.2,
+      anchorEdge: 'start',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('measures start-to-start offset for contained spans (step inside run)', () => {
+    const delta = computeSpanDelta(
+      span('run', 0, 1000),
+      span('step', 400, 600),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 400,
+      anchorFrac: 0,
+      hoveredFrac: 0.4,
+      anchorEdge: 'start',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('returns a zero delta for identical starts', () => {
+    const delta = computeSpanDelta(
+      span('a', 200, 500),
+      span('b', 200, 300),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 0,
+      anchorFrac: 0.2,
+      hoveredFrac: 0.2,
+      anchorEdge: 'start',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('keeps a zero delta sitting exactly on the viewport edge (root span anchor at default zoom)', () => {
+    const delta = computeSpanDelta(
+      span('run', 0, 1000),
+      span('step', 0, 400),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 0,
+      anchorFrac: 0,
+      hoveredFrac: 0,
+      anchorEdge: 'start',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('treats touching spans as a zero gap, not an overlap', () => {
+    const delta = computeSpanDelta(
+      span('a', 0, 300),
+      span('b', 300, 400),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 0,
+      anchorFrac: 0.3,
+      hoveredFrac: 0.3,
+      anchorEdge: 'end',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('handles zero-duration spans as points', () => {
+    const delta = computeSpanDelta(
+      span('a', 100, 100),
+      span('b', 400, 400),
+      0,
+      1000
+    );
+    expect(delta).toEqual({
+      deltaMs: 300,
+      anchorFrac: 0.1,
+      hoveredFrac: 0.4,
+      anchorEdge: 'end',
+      hoveredOffscreen: null,
+    });
+  });
+
+  it('clamps edges to the viewport but keeps the true delta', () => {
+    const delta = computeSpanDelta(
+      span('a', 0, 100),
+      span('b', 900, 950),
+      500,
+      800
+    );
+    expect(delta).toEqual({
+      deltaMs: 800,
+      anchorFrac: 0,
+      hoveredFrac: 1,
+      anchorEdge: 'end',
+      hoveredOffscreen: 'right',
+    });
+  });
+
+  it('flags a hovered span lying fully left of the viewport', () => {
+    const delta = computeSpanDelta(
+      span('anchor', 600, 700),
+      span('hovered', 0, 100),
+      200,
+      1200
+    );
+    expect(delta).toEqual({
+      deltaMs: 500,
+      anchorFrac: 0.4,
+      hoveredFrac: 0,
+      anchorEdge: 'start',
+      hoveredOffscreen: 'left',
+    });
+  });
+
+  it('returns null when the measurement is entirely left of the viewport', () => {
+    expect(
+      computeSpanDelta(span('a', 0, 100), span('b', 200, 300), 500, 1000)
+    ).toBeNull();
+  });
+
+  it('returns null when the measurement is entirely right of the viewport', () => {
+    expect(
+      computeSpanDelta(span('a', 600, 700), span('b', 900, 950), 0, 500)
+    ).toBeNull();
+  });
+
+  it('returns null for an empty viewport range', () => {
+    expect(
+      computeSpanDelta(span('a', 0, 100), span('b', 200, 300), 500, 500)
+    ).toBeNull();
+  });
+});

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

@@ -174,6 +174,11 @@ export interface SpanGap {
   rowIndex: number;
 }
 
+/** Project an absolute time onto the viewport as a clamped [0, 1] fraction. */
+function toViewportFrac(ms: number, viewStart: number, range: number): number {
+  return Math.min(Math.max((ms - viewStart) / range, 0), 1);
+}
+
 export function computeSpanGaps(
   spans: Span[],
   viewStart: number,
@@ -189,8 +194,8 @@ export function computeSpanGaps(
     const gapMs = startTime - endTime;
     if (gapMs <= 0) continue;
 
-    const leftFrac = Math.min(Math.max((endTime - viewStart) / range, 0), 1);
-    const rightFrac = Math.min(Math.max((startTime - viewStart) / range, 0), 1);
+    const leftFrac = toViewportFrac(endTime, viewStart, range);
+    const rightFrac = toViewportFrac(startTime, viewStart, range);
     if (rightFrac - leftFrac < 0.001) continue;
 
     gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });
@@ -198,6 +203,78 @@ export function computeSpanGaps(
   return gaps;
 }
 
+export interface SpanDelta {
+  /** True measured time between the two spans, unaffected by clamping. */
+  deltaMs: number;
+  /** Viewport-clamped fraction of the anchor span's measured edge. */
+  anchorFrac: number;
+  /** Viewport-clamped fraction of the hovered span's measured edge. */
+  hoveredFrac: number;
+  /**
+   * Which edge of the anchor span the measurement runs from: its end when the
+   * spans are disjoint and the anchor comes first, otherwise its start.
+   */
+  anchorEdge: 'start' | 'end';
+  /**
+   * Set when the hovered span lies entirely outside the viewport on one side,
+   * i.e. its row renders an off-screen arrow the line should stop short of.
+   */
+  hoveredOffscreen: 'left' | 'right' | null;
+}
+
+/**
+ * Measure the temporal delta between an anchor (selected) span and a hovered
+ * span for the Alt+hover measurement overlay. Ordering the two spans by start
+ * time (E = earlier-starting, L = later-starting), the measurement runs to
+ * L's start from E's end when the spans are disjoint ("how long after E ended
+ * did L start"), or from E's start when they overlap ("how long after E
+ * started did L start"). Fractions are clamped to the viewport like
+ * `computeSpanGaps`; `deltaMs` is always the true duration. Returns null when
+ * the measurement lies entirely outside the viewport.
+ */
+export function computeSpanDelta(
+  anchor: Span,
+  hovered: Span,
+  viewStart: number,
+  viewEnd: number
+): SpanDelta | null {
+  const range = viewEnd - viewStart;
+  if (range <= 0) return null;
+
+  const anchorStart = getHighResInMs(anchor.startTime);
+  const hoveredStart = getHighResInMs(hovered.startTime);
+  const anchorIsEarlier = anchorStart <= hoveredStart;
+  const earlierStart = anchorIsEarlier ? anchorStart : hoveredStart;
+  const earlierEnd = getHighResInMs(
+    anchorIsEarlier ? anchor.endTime : hovered.endTime
+  );
+  const laterStart = anchorIsEarlier ? hoveredStart : anchorStart;
+
+  const originMs = earlierEnd <= laterStart ? earlierEnd : earlierStart;
+  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.
+  if (laterStart < viewStart || originMs > viewEnd) {
+    return null;
+  }
+
+  const originFrac = toViewportFrac(originMs, viewStart, range);
+  const laterFrac = toViewportFrac(laterStart, viewStart, range);
+
+  const hoveredEnd = getHighResInMs(hovered.endTime);
+
+  return {
+    deltaMs,
+    anchorFrac: anchorIsEarlier ? originFrac : laterFrac,
+    hoveredFrac: anchorIsEarlier ? laterFrac : originFrac,
+    anchorEdge: anchorIsEarlier && earlierEnd <= laterStart ? 'end' : 'start',
+    hoveredOffscreen:
+      hoveredStart > viewEnd ? 'right' : hoveredEnd < viewStart ? 'left' : null,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Resource colors
 // ---------------------------------------------------------------------------

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

@@ -417,6 +417,8 @@ const attributeToDisplayFn: Record<
   receivedCount: (value: unknown) => String(value),
   lastReceivedAt: localMillisecondTimeOrNull,
   disposedAt: localMillisecondTimeOrNull,
+  // Internal resume plumbing — not surfaced in the UI
+  resumeContext: (_value: unknown) => null,
   // Event details
   eventType: (value: unknown) => String(value),
   correlationId: (value: unknown) => String(value),
@@ -638,6 +640,10 @@ const attributeToDisplayFn: Record<
     if (typeof value !== 'string' || value.length === 0) return null;
     return String(value);
   },
+  // Internal encryption plumbing: the run's X25519 public key, used by
+  // cross-run writers to seal payloads to this run. Not actionable for users
+  // and not secret — hidden rather than rendered as 44 opaque base64 chars.
+  encryptionPublicKey: (_value: unknown) => null,
 };
 
 const resolvableAttributes = [

package/src/index.ts

@@ -1,7 +1,4 @@
-export type {
-  HealthCheckEndpoint,
-  HealthCheckResult,
-} from '@workflow/core/runtime';
+export type { HealthCheckResult } from '@workflow/core/runtime';
 export {
   parseStepName,
   parseWorkflowName,

package/src/lib/hydration.ts

@@ -487,7 +487,7 @@ export async function hydrateResourceIOAsync<T>(
   resource: T,
   key?: Uint8Array
 ): Promise<T> {
-  const { hydrateDataWithKey } = await import(
+  const { hydrateDataWithKey, deriveRunPayloadKeys } = await import(
     '@workflow/core/serialization-format'
   );
   // Payloads may be zstd-compressed (the Web DecompressionStream has no zstd);
@@ -497,11 +497,17 @@ export async function hydrateResourceIOAsync<T>(
     './zstd-browser-decoder.js'
   );
   ensureZstdDecoderRegistered();
-  const cryptoKey = key
-    ? await import('@workflow/core/encryption').then(({ importKey }) =>
-        importKey(key)
-      )
-    : undefined;
+  // 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
+  // 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
+  // 32 bytes the key-retrieval endpoint returns.
+  const cryptoKey = key ? await deriveRunPayloadKeys(key) : undefined;
   const revivers = getRevivers();
 
   async function hydrateField(value: unknown): Promise<unknown> {