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

package/src/components/trace-viewer/components/middle-truncate/measurement-batch.ts

@@ -0,0 +1,47 @@
+interface MeasurementTask<T> {
+  measure: (measurement: T) => void;
+  read: () => T | null;
+}
+
+type PendingMeasurement = () => (() => void) | null;
+
+const pendingMeasurements = new Map<object, PendingMeasurement>();
+let measurementFrame = 0;
+
+function flushMeasurements(): void {
+  measurementFrame = 0;
+
+  const reads = [...pendingMeasurements.values()];
+  pendingMeasurements.clear();
+  const measures = reads.map((read) => read());
+
+  for (const measure of measures) {
+    measure?.();
+  }
+}
+
+function scheduleMeasurement<T>(
+  key: object,
+  { read, measure }: MeasurementTask<T>
+): void {
+  pendingMeasurements.set(key, () => {
+    const measurement = read();
+    return measurement === null ? null : () => measure(measurement);
+  });
+
+  if (measurementFrame === 0) {
+    measurementFrame = requestAnimationFrame(flushMeasurements);
+  }
+}
+
+function cancelMeasurement(key: object): void {
+  pendingMeasurements.delete(key);
+
+  if (pendingMeasurements.size === 0 && measurementFrame !== 0) {
+    cancelAnimationFrame(measurementFrame);
+    measurementFrame = 0;
+  }
+}
+
+export { cancelMeasurement, scheduleMeasurement };
+export type { MeasurementTask };

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

@@ -28,13 +28,20 @@ function getRangeOffsets(
     return null;
   }
 
-  const startRange = document.createRange();
-  startRange.selectNodeContents(container);
-  startRange.setEnd(range.startContainer, range.startOffset);
-
-  const endRange = document.createRange();
-  endRange.selectNodeContents(container);
-  endRange.setEnd(range.endContainer, range.endOffset);
+  let startRange: Range;
+  let endRange: Range;
+
+  try {
+    startRange = document.createRange();
+    startRange.selectNodeContents(container);
+    startRange.setEnd(range.startContainer, range.startOffset);
+
+    endRange = document.createRange();
+    endRange.selectNodeContents(container);
+    endRange.setEnd(range.endContainer, range.endOffset);
+  } catch {
+    return null;
+  }
 
   return {
     end: endRange.toString().length,
@@ -80,6 +87,7 @@ function MiddleTruncate({
       let copyText: string | null = null;
 
       if (
+        selectionText.includes(ELLIPSIS) &&
         e.currentTarget.contains(range.startContainer) &&
         e.currentTarget.contains(range.endContainer) &&
         visibleEl

package/src/components/trace-viewer/components/middle-truncate/use-middle-truncate.ts

@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { cancelMeasurement, scheduleMeasurement } from './measurement-batch';
 import { middleTruncate, toGraphemes } from './truncate';
 
 const useIsomorphicLayoutEffect =
@@ -22,6 +23,17 @@ interface MiddleTruncateState {
   suffixText: string;
 }
 
+interface MiddleTruncateMeasurement {
+  availableWidth: number;
+  typography: string;
+}
+
+interface TextMeasurementCache {
+  typography: string;
+  value: string;
+  widths: Map<string, number>;
+}
+
 function createFullState(
   value: string,
   graphemes: string[]
@@ -62,7 +74,15 @@ function useMiddleTruncate(value: string): {
   const ref = useRef<HTMLSpanElement | null>(null);
   const measureRef = useRef<HTMLSpanElement | null>(null);
   const [state, setState] = useState<MiddleTruncateState>(() => fullState);
-  const rafRef = useRef<number>(0);
+  const measurementKeyRef = useRef<object>({});
+  const textMeasurementCacheRef = useRef<TextMeasurementCache>({
+    typography: '',
+    value,
+    widths: new Map(),
+  });
+  const lastMeasurementRef = useRef<
+    (MiddleTruncateMeasurement & { value: string }) | null
+  >(null);
 
   const updateState = useCallback((nextState: MiddleTruncateState) => {
     setState((currentState) => {
@@ -81,76 +101,150 @@ function useMiddleTruncate(value: string): {
     });
   }, []);
 
-  const recalculate = useCallback(() => {
+  const readMeasurement = useCallback((): MiddleTruncateMeasurement | null => {
     const el = ref.current;
     const measureEl = measureRef.current;
-    if (!el || !measureEl) return;
+    if (!el || !measureEl) return null;
 
-    const available = el.clientWidth;
+    const availableWidth = el.clientWidth;
+    const style = getComputedStyle(measureEl);
 
-    if (available <= 0) {
-      updateState(fullState);
-      return;
-    }
-
-    const measure = (text: string): number => {
-      measureEl.textContent = text;
-      return measureEl.scrollWidth;
+    return {
+      availableWidth,
+      typography: [
+        style.fontFamily,
+        style.fontFeatureSettings,
+        style.fontKerning,
+        style.fontSize,
+        style.fontStretch,
+        style.fontStyle,
+        style.fontVariationSettings,
+        style.fontWeight,
+        style.letterSpacing,
+        style.textTransform,
+      ].join('\0'),
     };
+  }, []);
 
-    const fullWidth = measure(value);
+  const recalculate = useCallback(
+    ({ availableWidth, typography }: MiddleTruncateMeasurement) => {
+      const measureEl = measureRef.current;
+      if (!measureEl) return;
 
-    if (fullWidth <= available) {
-      updateState(fullState);
-      return;
-    }
+      const lastMeasurement = lastMeasurementRef.current;
+      if (
+        lastMeasurement?.availableWidth === availableWidth &&
+        lastMeasurement.typography === typography &&
+        lastMeasurement.value === value
+      ) {
+        return;
+      }
 
-    const result = middleTruncate(graphemes, available, measure, fullWidth);
-    updateState({
-      displayText: result.text,
-      isTruncated: result.truncated,
-      prefixGraphemeCount: result.prefixGraphemeCount,
-      prefixText: result.prefixText,
-      suffixGraphemeCount: result.suffixGraphemeCount,
-      suffixText: result.suffixText,
-    });
-  }, [fullState, graphemes, updateState, value]);
+      lastMeasurementRef.current = {
+        availableWidth,
+        typography,
+        value,
+      };
+
+      if (availableWidth <= 0) {
+        updateState(fullState);
+        return;
+      }
+
+      const textMeasurementCache = textMeasurementCacheRef.current;
+      if (
+        textMeasurementCache.typography !== typography ||
+        textMeasurementCache.value !== value
+      ) {
+        textMeasurementCache.typography = typography;
+        textMeasurementCache.value = value;
+        textMeasurementCache.widths.clear();
+      }
+
+      const measure = (text: string): number => {
+        const cachedWidth = textMeasurementCache.widths.get(text);
+        if (cachedWidth !== undefined) {
+          return cachedWidth;
+        }
+
+        measureEl.textContent = text;
+        const width = measureEl.scrollWidth;
+        textMeasurementCache.widths.set(text, width);
+        return width;
+      };
+
+      const fullWidth = measure(value);
+
+      if (fullWidth <= availableWidth) {
+        updateState(fullState);
+        return;
+      }
+
+      const result = middleTruncate(
+        graphemes,
+        availableWidth,
+        measure,
+        fullWidth
+      );
+      updateState({
+        displayText: result.text,
+        isTruncated: result.truncated,
+        prefixGraphemeCount: result.prefixGraphemeCount,
+        prefixText: result.prefixText,
+        suffixGraphemeCount: result.suffixGraphemeCount,
+        suffixText: result.suffixText,
+      });
+    },
+    [fullState, graphemes, updateState, value]
+  );
 
   // Measure on mount and when value changes - before paint
   useIsomorphicLayoutEffect(() => {
-    recalculate();
-  }, [recalculate]);
+    const measurement = readMeasurement();
+    if (measurement) {
+      recalculate(measurement);
+    }
+  }, [readMeasurement, recalculate]);
 
   // ResizeObserver + font loading for ongoing responsiveness
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
 
-    const debouncedRecalc = (): void => {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(recalculate);
+    const measurementKey = measurementKeyRef.current;
+    const scheduleRecalculation = (): void => {
+      scheduleMeasurement(measurementKey, {
+        read: readMeasurement,
+        measure: recalculate,
+      });
     };
 
     const ro =
       typeof ResizeObserver !== 'undefined'
-        ? new ResizeObserver(debouncedRecalc)
+        ? new ResizeObserver(scheduleRecalculation)
         : null;
     ro?.observe(el);
-    window.addEventListener('resize', debouncedRecalc);
+    if (!ro) {
+      window.addEventListener('resize', scheduleRecalculation);
+    }
 
     const onFontsLoaded = (): void => {
-      debouncedRecalc();
+      textMeasurementCacheRef.current.widths.clear();
+      lastMeasurementRef.current = null;
+      scheduleRecalculation();
     };
     const fontSet = 'fonts' in document ? document.fonts : null;
     fontSet?.addEventListener?.('loadingdone', onFontsLoaded);
 
     return () => {
       ro?.disconnect();
-      window.removeEventListener('resize', debouncedRecalc);
-      cancelAnimationFrame(rafRef.current);
+      if (!ro) {
+        window.removeEventListener('resize', scheduleRecalculation);
+      }
+      cancelMeasurement(measurementKey);
       fontSet?.removeEventListener?.('loadingdone', onFontsLoaded);
     };
-  }, [recalculate]);
+  }, [readMeasurement, recalculate]);
 
   return {
     ref,

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

@@ -200,9 +200,9 @@ export const Minimap = memo(function Minimap({
 
   // Density canvas: one thin line per span across the full run. Sizing is
   // read live and redraws run straight from the ResizeObserver (which fires
-  // before paint), so layout changes — e.g. the detail panel opening — never
+  // before paint), so layout changes (e.g. the detail panel opening) never
   // paint a frame with a stale, stretched bitmap.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: themeVersion is a redraw trigger — the canvas re-resolves its token colors when the theme flips
+  // biome-ignore lint/correctness/useExhaustiveDependencies: themeVersion is a redraw trigger; the canvas re-resolves its token colors when the theme flips
   useLayoutEffect(() => {
     const canvas = canvasRef.current;
     const container = containerRef.current;
@@ -276,7 +276,7 @@ export const Minimap = memo(function Minimap({
         return { mode: 'resize-right' };
       }
       // Panning a full-extent window is a no-op, so let a drag on the brush
-      // start a selection instead — the natural first gesture on the map.
+      // start a selection instead, the natural first gesture on the map.
       const { start, end } = viewportRef.current;
       const isFullExtent =
         start - rootStartMs < rootDurationMs * 0.001 &&

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