@workflow/web-shared 4.1.0-beta.52 → 4.1.0-beta.53

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

@@ -33,6 +33,10 @@ interface TraceViewerProps {
   withPanel?: boolean;
   getQuickLinks?: GetQuickLinks;
   highlightedSpans?: string[];
+  /** Render all spans immediately (no progressive streaming). */
+  eagerRender?: boolean;
+  /** Whether the trace is live (for continuous tick updates). */
+  isLive?: boolean;
 }
 
 export function TraceViewerProvider({
@@ -97,25 +101,107 @@ export function TraceViewerTimeline({
   height,
   withPanel = false,
   highlightedSpans,
+  eagerRender = false,
+  isLive = false,
 }: Omit<TraceViewerProps, 'getQuickLinks'>): ReactNode {
   const isSkeleton = trace === skeletonTrace;
   const { state, dispatch } = useTraceViewer();
   const { timelineRef, scrollSnapshotRef } = state;
   const memoCache = state.memoCacheRef.current;
-  const hideSearchBar =
-    (highlightedSpans?.length ?? 0) > 0 || trace.spans.length <= 10;
+  const hideSearchBar = (highlightedSpans?.length ?? 0) > 0;
+
+  const hasInitializedRef = useRef(false);
+  const prevSpanKeyRef = useRef('');
+  const prevRootRef = useRef<ReturnType<typeof parseTrace>['root'] | null>(
+    null
+  );
+  const prevSpanMapRef = useRef<ReturnType<typeof parseTrace>['map']>({});
+  const prevSizeRef = useRef<{ width: number; height: number } | null>(null);
 
   useEffect(() => {
-    const { root, map: spanMap } = parseTrace(trace);
+    const { root: newRoot, map: newSpanMap } = parseTrace(trace);
+    const isInitial = !hasInitializedRef.current;
+    hasInitializedRef.current = true;
+
+    // Build a structural key from span IDs + lightweight event signatures.
+    // When only timing changes (same spans and boundary events), we can skip the
+    // worker restart. When events change (step completed, etc.) we need a
+    // full update because the VisibleSpan objects rendered by React hold
+    // copies of the events from the worker — in-place mutation won't reach them.
+    const spanKey = Object.keys(newSpanMap)
+      .sort()
+      .map((id) => {
+        const events = newSpanMap[id].events;
+        const count = events?.length ?? 0;
+        const first = count ? events?.[0] : undefined;
+        const last = count ? events?.[count - 1] : undefined;
+        const eventSignature = `${first?.event.name ?? 'none'}@${first?.timestamp ?? 0}|${last?.event.name ?? 'none'}@${last?.timestamp ?? 0}`;
+        return `${id}:${count}:${eventSignature}`;
+      })
+      .join(',');
+
+    if (
+      !isInitial &&
+      spanKey === prevSpanKeyRef.current &&
+      prevRootRef.current
+    ) {
+      // Same span set, same event counts — only timing changed.
+      // Mutate in-place so the worker effect (which depends on root/spanMap
+      // references) does NOT restart.
+      const oldRoot = prevRootRef.current;
+      const oldSpanMap = prevSpanMapRef.current;
+      let didChange = false;
+
+      if (
+        oldRoot.endTime !== newRoot.endTime ||
+        oldRoot.duration !== newRoot.duration
+      ) {
+        oldRoot.endTime = newRoot.endTime;
+        oldRoot.duration = newRoot.duration;
+        didChange = true;
+      }
+
+      for (const [id, newNode] of Object.entries(newSpanMap)) {
+        const oldNode = oldSpanMap[id];
+        if (oldNode) {
+          if (
+            oldNode.endTime !== newNode.endTime ||
+            oldNode.duration !== newNode.duration
+          ) {
+            oldNode.endTime = newNode.endTime;
+            oldNode.duration = newNode.duration;
+            didChange = true;
+          }
+          Object.assign(oldNode.span, newNode.span);
+        }
+      }
+
+      if (!didChange) {
+        return;
+      }
+
+      // Trigger re-render (scale/markers) without restarting the worker.
+      // useLiveTick handles continuous scale recalculation for live runs.
+      dispatch({ type: 'forceRender' });
+      return;
+    }
+
+    // Structure changed or initial load — full dispatch (worker computes new rows)
+    prevSpanKeyRef.current = spanKey;
+    prevRootRef.current = newRoot;
+    prevSpanMapRef.current = newSpanMap;
     dispatch({
-      type: 'setRoot',
-      root,
-      spanMap,
+      type: isInitial ? 'setRoot' : 'updateRoot',
+      root: newRoot,
+      spanMap: newSpanMap,
       resources: trace.resources || [],
     });
   }, [dispatch, trace]);
 
-  const { rows, spans, events, scale } = useStreamingSpans(highlightedSpans);
+  const { rows, spans, events, scale } = useStreamingSpans(
+    highlightedSpans,
+    eagerRender
+  );
 
   const ref = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
@@ -125,11 +211,23 @@ export function TraceViewerTimeline({
     const onResize = (): void => {
       const padding = 2 * TIMELINE_PADDING;
       const rect = $el.getBoundingClientRect();
+      const nextWidth = rect.width - padding;
+      const nextHeight = rect.height;
+      const prevSize = prevSizeRef.current;
+
+      if (
+        prevSize &&
+        prevSize.width === nextWidth &&
+        prevSize.height === nextHeight
+      ) {
+        return;
+      }
+      prevSizeRef.current = { width: nextWidth, height: nextHeight };
 
       dispatch({
         type: 'setSize',
-        width: rect.width - padding,
-        height: rect.height,
+        width: nextWidth,
+        height: nextHeight,
       });
     };
 
@@ -202,7 +300,11 @@ export function TraceViewerTimeline({
     [dispatch]
   );
 
-  // Zoom helper
+  // Zoom helper — apply the scroll snapshot once after a zoom operation so
+  // the anchor point stays at the same screen position, then clear it.
+  // Without clearing, live runs (where scale changes every frame via
+  // detectBaseScale) would continuously reset scrollLeft and prevent the
+  // user from scrolling horizontally.
   useLayoutEffect(() => {
     const $timeline = timelineRef.current;
     if (!$timeline) return;
@@ -210,6 +312,7 @@ export function TraceViewerTimeline({
     const snapshot = scrollSnapshotRef.current;
     if (snapshot) {
       $timeline.scrollLeft = snapshot.anchorT * scale - snapshot.anchorX;
+      scrollSnapshotRef.current = undefined;
     }
   }, [scrollSnapshotRef, timelineRef, scale]);
 
@@ -359,7 +462,7 @@ export function TraceViewerTimeline({
                 height: timelineHeight - TIMELINE_PADDING * 2,
               }}
             >
-              <Markers scale={scale} />
+              <Markers scale={scale} isLive={isLive} />
               <EventMarkers events={events} root={state.root} scale={scale} />
               <CursorMarker
                 dispatch={dispatch}
@@ -378,6 +481,7 @@ export function TraceViewerTimeline({
                 customSpanEventClassNameFunc={
                   state.customSpanEventClassNameFunc
                 }
+                isLive={isLive}
                 root={state.root}
                 scale={scale}
                 scrollSnapshotRef={scrollSnapshotRef}

package/src/components/trace-viewer/util/timing.ts

@@ -31,3 +31,16 @@ export function formatTimeSelection(ms: number): string {
   }
   return `${timeSelectionFormatter.format(ms)}ms`;
 }
+
+/**
+ * Format an epoch-millisecond timestamp as a local wall-clock time.
+ * Returns a compact HH:MM:SS.mmm string (24-hour format).
+ */
+export function formatWallClockTime(epochMs: number): string {
+  const d = new Date(epochMs);
+  const h = String(d.getHours()).padStart(2, '0');
+  const m = String(d.getMinutes()).padStart(2, '0');
+  const s = String(d.getSeconds()).padStart(2, '0');
+  const ms = String(d.getMilliseconds()).padStart(3, '0');
+  return `${h}:${m}:${s}.${ms}`;
+}

package/src/components/trace-viewer/util/use-streaming-spans.ts

@@ -1,8 +1,6 @@
 'use client';
 
-import { clsx } from 'clsx';
 import { useEffect, useRef, useState } from 'react';
-import { getSpanClassName } from '../components/node';
 import { useTraceViewer } from '../context';
 import type {
   VisibleSpan,
@@ -32,7 +30,8 @@ function emptyArrayInit<T>(): T[] {
 }
 
 export const useStreamingSpans = (
-  highlightedSpans?: string[]
+  highlightedSpans?: string[],
+  eagerRender = false
 ): {
   rows: VisibleSpan[][];
   spans: VisibleSpan[];
@@ -50,7 +49,6 @@ export const useStreamingSpans = (
     scrollSnapshotRef,
     selected,
     memoCacheRef,
-    customSpanClassNameFunc,
   } = state;
   const timelineHeight = useStableValue(state.timelineHeight);
   const counterRef = useRef(0);
@@ -83,13 +81,16 @@ export const useStreamingSpans = (
   useEffect(() => {
     if (!root.startTime) return;
 
-    const worker = new Worker(new URL('../worker', import.meta.url));
+    const worker = new Worker(new URL('../worker', import.meta.url), {
+      type: 'module',
+    });
     let requestId = ++counterRef.current;
     const onMessage = (event: MessageEvent): void => {
       const data = event.data as WorkerResponse;
 
       switch (data.type) {
         case 'setRowsResult': {
+          if (data?.requestId !== requestId) return;
           if (data.isEnd) {
             for (const row of data.rows) {
               for (const node of row) {
@@ -168,6 +169,24 @@ export const useStreamingSpans = (
   useEffect(() => {
     if (!rows.length) return;
 
+    if (eagerRender) {
+      const visible: VisibleSpan[] = [];
+      const events: VisibleSpanEvent[] = [];
+      for (const row of rows) {
+        for (const span of row) {
+          if (!adjustSpanVisibility(span, scale)) continue;
+          visible.push(span);
+          if (span.events) {
+            events.push(...span.events);
+          }
+        }
+      }
+      setVisibleSpans(visible);
+      setVisibleEvents(events);
+      setResultScale(scale);
+      return;
+    }
+
     const $timeline = timelineRef.current;
     let snapshot = scrollSnapshotRef.current;
     let hasScrolled = false;
@@ -342,6 +361,7 @@ export const useStreamingSpans = (
     timelineRef,
     timelineWidth,
     timelineHeight,
+    eagerRender,
   ]);
 
   useEffect(() => {
@@ -359,22 +379,13 @@ export const useStreamingSpans = (
     if (!span || !$span) return;
 
     span.isSelected = true;
-    // Get both the base span className and custom class name
-    const baseClassName = getSpanClassName(span, scale);
-    const customClassName = customSpanClassNameFunc
-      ? customSpanClassNameFunc(span)
-      : '';
-    $span.className = clsx(baseClassName, customClassName);
+    $span.setAttribute('data-selected', '');
 
     return () => {
       span.isSelected = false;
-      const baseClassName = getSpanClassName(span, scale);
-      const customClassName = customSpanClassNameFunc
-        ? customSpanClassNameFunc(span)
-        : '';
-      $span.className = clsx(baseClassName, customClassName);
+      $span.removeAttribute('data-selected');
     };
-  }, [visibleSpans, scale, selected, customSpanClassNameFunc]);
+  }, [visibleSpans, selected]);
 
   return {
     rows,

package/src/components/trace-viewer/worker.ts

@@ -100,7 +100,10 @@ const filterSpans = (root: RootNode, filter: string): void => {
   }
 
   const match = (span: Span): boolean => {
-    if (!span.name.toLocaleLowerCase().includes(name)) return false;
+    const nameMatch =
+      span.name.toLocaleLowerCase().includes(name) ||
+      span.spanId.toLocaleLowerCase().includes(name);
+    if (!nameMatch) return false;
     // TODO: support resource attribute filtering
     return attrs.every(([key, value]) => {
       const v = span.attributes[key];

package/src/components/ui/alert.tsx

@@ -4,13 +4,13 @@ import * as React from 'react';
 import { cn } from '../../lib/utils';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground',
+        default: '',
         destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+          'border-red-400 text-red-900 dark:border-red-700 [&>svg]:text-red-900',
       },
     },
     defaultVariants: {

package/src/components/ui/card.tsx

@@ -10,10 +10,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      'rounded-lg border bg-card text-card-foreground shadow-sm',
-      className
-    )}
+    className={cn('rounded-lg border shadow-sm', className)}
     {...props}
   />
 ));
@@ -52,7 +49,8 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-sm', className)}
+    style={{ color: 'var(--ds-gray-900)' }}
     {...props}
   />
 ));

package/src/components/ui/data-inspector.tsx

@@ -0,0 +1,318 @@
+'use client';
+
+/**
+ * Reusable data inspector component built on react-inspector.
+ *
+ * All data rendering in the o11y UI should use this component to ensure
+ * consistent theming, custom type handling (StreamRef, ClassInstanceRef),
+ * and expand behavior.
+ */
+
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import {
+  ObjectInspector,
+  ObjectLabel,
+  ObjectName,
+  ObjectRootLabel,
+  ObjectValue,
+} from 'react-inspector';
+import { useDarkMode } from '../../hooks/use-dark-mode';
+import {
+  type InspectorThemeExtended,
+  inspectorThemeDark,
+  inspectorThemeExtendedDark,
+  inspectorThemeExtendedLight,
+  inspectorThemeLight,
+} from './inspector-theme';
+
+// ---------------------------------------------------------------------------
+// StreamRef / ClassInstanceRef type detection
+// (inline to avoid circular deps with hydration module)
+// ---------------------------------------------------------------------------
+
+const STREAM_REF_TYPE = '__workflow_stream_ref__';
+const CLASS_INSTANCE_REF_TYPE = '__workflow_class_instance_ref__';
+
+interface StreamRef {
+  __type: typeof STREAM_REF_TYPE;
+  streamId: string;
+}
+
+function isStreamRef(value: unknown): value is StreamRef {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    '__type' in value &&
+    (value as Record<string, unknown>).__type === STREAM_REF_TYPE
+  );
+}
+
+function isClassInstanceRef(value: unknown): value is {
+  __type: string;
+  className: string;
+  classId: string;
+  data: unknown;
+} {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    '__type' in value &&
+    (value as Record<string, unknown>).__type === CLASS_INSTANCE_REF_TYPE
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Stream click context (passed through from the panel)
+// ---------------------------------------------------------------------------
+
+/**
+ * Context for passing stream click handlers down to DataInspector instances.
+ * Exported so that parent components (e.g., AttributePanel) can provide the handler.
+ */
+export const StreamClickContext = createContext<
+  ((streamId: string) => void) | undefined
+>(undefined);
+
+function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
+  const onStreamClick = useContext(StreamClickContext);
+  return (
+    <button
+      type="button"
+      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer"
+      style={{
+        backgroundColor: 'var(--ds-blue-100)',
+        color: 'var(--ds-blue-800)',
+        border: '1px solid var(--ds-blue-300)',
+      }}
+      onClick={() => onStreamClick?.(streamRef.streamId)}
+      title={`View stream: ${streamRef.streamId}`}
+    >
+      <span>📡</span>
+      <span>{streamRef.streamId}</span>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Extended theme context (for colors react-inspector doesn't support natively)
+// ---------------------------------------------------------------------------
+
+const ExtendedThemeContext = createContext<InspectorThemeExtended>(
+  inspectorThemeExtendedLight
+);
+
+// ---------------------------------------------------------------------------
+// Custom nodeRenderer
+// ---------------------------------------------------------------------------
+
+/**
+ * Extends the default react-inspector nodeRenderer with special handling
+ * for ClassInstanceRef, StreamRef, and Date types.
+ *
+ * react-inspector renders Date instances as unstyled plain text (no theme
+ * key exists for them), so we intercept here and apply the magenta color
+ * from our extended theme — matching Node.js util.inspect()'s date style.
+ *
+ * Default nodeRenderer reference:
+ * https://github.com/storybookjs/react-inspector/blob/main/README.md#noderenderer
+ */
+function NodeRenderer({
+  depth,
+  name,
+  data,
+  isNonenumerable,
+}: {
+  depth: number;
+  name?: string;
+  data: unknown;
+  isNonenumerable?: boolean;
+  expanded?: boolean;
+}) {
+  const extendedTheme = useContext(ExtendedThemeContext);
+
+  // StreamRef → inline clickable badge
+  if (isStreamRef(data)) {
+    return (
+      <span>
+        {name != null && <ObjectName name={name} />}
+        {name != null && <span>: </span>}
+        <StreamRefInline streamRef={data} />
+      </span>
+    );
+  }
+
+  // ClassInstanceRef → show className as type, data as the inspectable value
+  if (isClassInstanceRef(data)) {
+    if (depth === 0) {
+      return <ObjectRootLabel name={data.className} data={data.data} />;
+    }
+    return (
+      <span>
+        {name != null && <ObjectName name={name} />}
+        {name != null && <span>: </span>}
+        <span style={{ fontStyle: 'italic' }}>{data.className} </span>
+        <ObjectValue object={data.data} />
+      </span>
+    );
+  }
+
+  // Date → magenta color (Node.js: 'date' → 'magenta')
+  // react-inspector has no OBJECT_VALUE_DATE_COLOR theme key, so we handle it here.
+  if (data instanceof Date) {
+    const dateStr = data.toISOString();
+    if (depth === 0) {
+      return (
+        <span style={{ color: extendedTheme.OBJECT_VALUE_DATE_COLOR }}>
+          {dateStr}
+        </span>
+      );
+    }
+    return (
+      <span>
+        {name != null && <ObjectName name={name} />}
+        {name != null && <span>: </span>}
+        <span style={{ color: extendedTheme.OBJECT_VALUE_DATE_COLOR }}>
+          {dateStr}
+        </span>
+      </span>
+    );
+  }
+
+  // Default rendering (same as react-inspector's built-in)
+  if (depth === 0) {
+    return <ObjectRootLabel name={name} data={data} />;
+  }
+  return (
+    <ObjectLabel name={name} data={data} isNonenumerable={isNonenumerable} />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Public component
+// ---------------------------------------------------------------------------
+
+export interface DataInspectorProps {
+  /** The data to inspect */
+  data: unknown;
+  /** Initial expand depth (default: 2) */
+  expandLevel?: number;
+  /** Optional name for the root node */
+  name?: string;
+  /** Callback when a stream reference is clicked */
+  onStreamClick?: (streamId: string) => void;
+}
+
+export function DataInspector({
+  data,
+  expandLevel = 2,
+  name,
+  onStreamClick,
+}: DataInspectorProps) {
+  const stableData = useStableInspectorData(data);
+  const [initialExpandLevel, setInitialExpandLevel] = useState(expandLevel);
+  const isDark = useDarkMode();
+  const extendedTheme = isDark
+    ? inspectorThemeExtendedDark
+    : inspectorThemeExtendedLight;
+
+  useEffect(() => {
+    // react-inspector reapplies expandLevel on every data change, which can
+    // reopen paths the user manually collapsed. Apply it only on mount.
+    setInitialExpandLevel(0);
+  }, []);
+
+  const content = (
+    <ExtendedThemeContext.Provider value={extendedTheme}>
+      <ObjectInspector
+        data={stableData}
+        name={name}
+        // @ts-expect-error react-inspector accepts theme objects at runtime despite
+        // types declaring string only — see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
+        theme={isDark ? inspectorThemeDark : inspectorThemeLight}
+        expandLevel={initialExpandLevel}
+        nodeRenderer={NodeRenderer}
+      />
+    </ExtendedThemeContext.Provider>
+  );
+
+  // Wrap in StreamClickContext if a handler is provided
+  if (onStreamClick) {
+    return (
+      <StreamClickContext.Provider value={onStreamClick}>
+        {content}
+      </StreamClickContext.Provider>
+    );
+  }
+
+  return content;
+}
+
+function useStableInspectorData<T>(next: T): T {
+  const previousRef = useRef<T>(next);
+  if (!isDeepEqual(previousRef.current, next)) {
+    previousRef.current = next;
+  }
+  return previousRef.current;
+}
+
+function isObjectLike(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function isDeepEqual(a: unknown, b: unknown, seen = new WeakMap()): boolean {
+  if (Object.is(a, b)) return true;
+
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+
+  if (a instanceof RegExp && b instanceof RegExp) {
+    return a.source === b.source && a.flags === b.flags;
+  }
+
+  if (a instanceof Map && b instanceof Map) {
+    if (a.size !== b.size) return false;
+    for (const [key, value] of a.entries()) {
+      if (!b.has(key) || !isDeepEqual(value, b.get(key), seen)) return false;
+    }
+    return true;
+  }
+
+  if (a instanceof Set && b instanceof Set) {
+    if (a.size !== b.size) return false;
+    for (const value of a.values()) {
+      if (!b.has(value)) return false;
+    }
+    return true;
+  }
+
+  if (!isObjectLike(a) || !isObjectLike(b)) {
+    return false;
+  }
+
+  if (seen.get(a) === b) return true;
+  seen.set(a, b);
+
+  const aIsArray = Array.isArray(a);
+  const bIsArray = Array.isArray(b);
+  if (aIsArray !== bIsArray) return false;
+
+  if (aIsArray && bIsArray) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i += 1) {
+      if (!isDeepEqual(a[i], b[i], seen)) return false;
+    }
+    return true;
+  }
+
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (!isDeepEqual(a[key], b[key], seen)) return false;
+  }
+
+  return true;
+}