@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

package/dist/components/trace-viewer/components/node.js

@@ -1,285 +0,0 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { clsx } from 'clsx';
-import { memo, useEffect, useRef, useState } from 'react';
-import styles from '../trace-viewer.module.css';
-import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING } from '../util/constants';
-import { formatDuration, getHighResInMs } from '../util/timing';
-import { SpanContent } from './span-content';
-import { computeSegments } from './span-segments';
-import { getResourceType, getSpanLayout, } from './span-strategies';
-export const getSpanColorClassName = (node) => {
-    if (node.isVercel)
-        return String(styles.colorVercel);
-    return String(styles[`color${node.resourceIndex % 5}`]);
-};
-function getTerminalTimestamp(resourceType, node) {
-    const events = node.events;
-    if (!events?.length)
-        return undefined;
-    switch (resourceType) {
-        case 'hook':
-            for (let i = events.length; i--;) {
-                if (events[i].event.name === 'hook_disposed') {
-                    return events[i].timestamp;
-                }
-            }
-            return undefined;
-        case 'sleep':
-            for (let i = events.length; i--;) {
-                if (events[i].event.name === 'wait_completed') {
-                    return events[i].timestamp;
-                }
-            }
-            return undefined;
-        case 'run':
-            for (let i = events.length; i--;) {
-                const name = events[i].event.name;
-                if (name === 'run_completed' ||
-                    name === 'run_failed' ||
-                    name === 'run_cancelled') {
-                    return events[i].timestamp;
-                }
-            }
-            return undefined;
-        case 'step':
-            for (let i = events.length; i--;) {
-                const name = events[i].event.name;
-                if (name === 'step_completed' || name === 'step_failed') {
-                    return events[i].timestamp;
-                }
-                if (name === 'step_started' || name === 'step_retrying') {
-                    return undefined;
-                }
-            }
-            return undefined;
-        default:
-            return undefined;
-    }
-}
-export const SpanNodes = memo(function SpanNodes({ root, scale, spans, isLive = false, scrollSnapshotRef, cache, customSpanClassNameFunc, customSpanEventClassNameFunc, }) {
-    return spans.map((x) => (_jsx(SpanComponent, { cacheKey: cache.get(x.span.spanId), customSpanEventClassNameFunc: customSpanEventClassNameFunc, customSpanClassNameFunc: customSpanClassNameFunc, node: x, root: root, scale: scale, traceIsLive: isLive, scrollSnapshotRef: scrollSnapshotRef }, x.span.spanId)));
-});
-// ──────────────────────────────────────────────────────────────────────────
-// Compute inline styles from a SpanLayout
-// ──────────────────────────────────────────────────────────────────────────
-function getSpanStyle(layout, node, root, scale) {
-    // Use isExpanded (hovered or selected) for width expansion so that
-    // selected small spans stay expanded and show their name.
-    const expanded = layout.isExpanded;
-    return {
-        // Use actualWidth for CSS variable so hover expansion is accurate
-        '--span-width': `${Math.max(layout.actualWidth, 1)}px`,
-        minWidth: expanded ? layout.width : undefined,
-        width: expanded ? undefined : layout.width,
-        height: layout.height,
-        maxWidth: expanded && !layout.isNearRightSide
-            ? (root.endTime - node.startTime) * scale
-            : undefined,
-        containIntrinsicWidth: expanded ? undefined : layout.width,
-        containIntrinsicHeight: layout.height,
-        left: layout.isNearRightSide ? undefined : layout.left,
-        right: layout.isNearRightSide
-            ? (root.endTime - node.endTime) * scale
-            : undefined,
-        top: layout.top,
-    };
-}
-// ──────────────────────────────────────────────────────────────────────────
-// SpanComponent
-// ──────────────────────────────────────────────────────────────────────────
-export const SpanComponent = memo(function SpanComponent({ node, root, scale, traceIsLive = false, scrollSnapshotRef, customSpanClassNameFunc, customSpanEventClassNameFunc, }) {
-    const ref = useRef(null);
-    useEffect(() => {
-        node.ref = ref;
-        return () => {
-            node.ref = undefined;
-        };
-    }, [node]);
-    const { span } = node;
-    const resourceType = getResourceType(node);
-    const [liveNow, setLiveNow] = useState(0);
-    // Get custom class name from callback if provided
-    const customClassName = customSpanClassNameFunc
-        ? customSpanClassNameFunc(node)
-        : '';
-    // Workflow span types use colored segments + boundary line markers
-    // Generic OTEL spans use diamond event markers
-    const isWorkflowSpan = resourceType !== 'default';
-    // Determine if this span is still active (live). We require the parent run
-    // to be explicitly live to avoid completed/cancelled traces continuing to
-    // grow due to timing heuristics.
-    const data = span.attributes?.data;
-    const terminalTimestamp = getTerminalTimestamp(resourceType, node);
-    const hasTerminalEvent = terminalTimestamp != null;
-    const isCompletedByData = resourceType === 'hook'
-        ? Boolean(data?.disposedAt)
-        : Boolean(data?.completedAt);
-    const isCompleted = isCompletedByData || hasTerminalEvent;
-    const isLive = traceIsLive && isWorkflowSpan && !isCompleted;
-    useEffect(() => {
-        if (!isLive)
-            return;
-        setLiveNow(Date.now());
-        const interval = setInterval(() => {
-            setLiveNow(Date.now());
-        }, 250);
-        return () => clearInterval(interval);
-    }, [isLive]);
-    const canonicalStartTime = getHighResInMs(span.startTime);
-    const canonicalEndTime = getHighResInMs(span.endTime);
-    const canonicalDuration = getHighResInMs(span.duration);
-    const canonicalActiveStartTime = span.activeStartTime
-        ? getHighResInMs(span.activeStartTime)
-        : undefined;
-    const durationMs = terminalTimestamp != null
-        ? Math.max(0, terminalTimestamp - canonicalStartTime)
-        : isLive
-            ? Math.max(0, (liveNow || Date.now()) - canonicalStartTime)
-            : canonicalDuration;
-    const duration = node.isInstrumentationHint
-        ? 'Get Started'
-        : formatDuration(durationMs);
-    const baseNode = {
-        ...node,
-        startTime: canonicalStartTime,
-        endTime: canonicalEndTime,
-        duration: canonicalDuration,
-        activeStartTime: canonicalActiveStartTime,
-    };
-    const segmentNode = isLive
-        ? {
-            ...baseNode,
-            duration: durationMs,
-            endTime: canonicalStartTime + durationMs,
-        }
-        : baseNode;
-    const hasSegments = isWorkflowSpan &&
-        computeSegments(resourceType, segmentNode).segments.length > 0;
-    const layout = getSpanLayout(resourceType, segmentNode, root, scale, scrollSnapshotRef);
-    // For live spans the data-level `node.duration` can be stale (from the last
-    // fetch) while the visual width is growing via rAF. Recompute from real
-    // elapsed time so that:
-    //  - height/isSmall classification stays correct (not shrunken to 40%)
-    //  - React-rendered width matches the rAF-driven width, preventing a brief
-    //    shrink→expand flash on re-render that breaks cursor hit-testing
-    if (isLive) {
-        const elapsed = durationMs;
-        const liveActualWidth = elapsed * scale;
-        const liveWidth = Math.max(liveActualWidth, 4);
-        layout.actualWidth = liveActualWidth;
-        layout.width = liveWidth;
-        layout.isSmall = liveActualWidth < 64;
-        layout.isHuge = liveActualWidth >= 500;
-        if (!layout.isSmall) {
-            layout.height = ROW_HEIGHT;
-            layout.top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * segmentNode.row;
-        }
-    }
-    // Smoothly grow active span width at 60fps using wall clock time
-    useEffect(() => {
-        if (!isLive || !ref.current)
-            return;
-        let rafId = 0;
-        const tick = () => {
-            const $el = ref.current;
-            if (!$el)
-                return;
-            const elapsed = Date.now() - canonicalStartTime;
-            const w = Math.max(elapsed * scale, 2);
-            $el.style.width = `${w}px`;
-            $el.style.setProperty('--span-width', `${w}px`);
-            rafId = requestAnimationFrame(tick);
-        };
-        rafId = requestAnimationFrame(tick);
-        return () => cancelAnimationFrame(rafId);
-    }, [isLive, canonicalStartTime, scale]);
-    const renderNode = segmentNode;
-    return (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": `${span.name} - ${duration}`, className: clsx(styles.spanNode, layout.isHuge && styles.huge, layout.isSmall && styles.small, layout.isExpanded && styles.xHover, node.isHighlighted
-                    ? styles.colorHighlight
-                    : getSpanColorClassName(node), node.isHighlighted === false && styles.unlit, customClassName, hasSegments && styles.hasSegments), "data-span-id": span.spanId, "data-start-time": segmentNode.startTime - root.startTime, "data-right-side": layout.isNearRightSide, "data-selected": node.isSelected ? '' : undefined, ref: ref, style: getSpanStyle(layout, segmentNode, root, scale), type: "button", children: _jsx(SpanContent, { durationMs: durationMs, resourceType: resourceType, node: renderNode, layout: layout }) }), segmentNode.events && !layout.isSmall
-                ? segmentNode.events.map((x) => (_jsx(SpanEventComponent, { customSpanEventClassNameFunc: customSpanEventClassNameFunc, event: x, node: segmentNode, root: root, scale: scale, asBoundary: isWorkflowSpan }, x.key)))
-                : null] }));
-});
-// ──────────────────────────────────────────────────────────────────────────
-// SpanEventComponent
-// ──────────────────────────────────────────────────────────────────────────
-/** Human-readable labels for workflow event types */
-const BOUNDARY_LABELS = {
-    step_started: 'Started',
-    step_retrying: 'Retrying',
-    step_failed: 'Failed',
-    hook_created: 'Created',
-    hook_received: 'Received',
-    hook_disposed: 'Resolved',
-    wait_created: 'Sleep started',
-    wait_completed: 'Sleep completed',
-    run_started: 'Started',
-    run_completed: 'Completed',
-    run_failed: 'Run failed',
-    step_completed: 'Completed',
-};
-export const SpanEventComponent = memo(function SpanEventComponent({ event, node, root, scale, customSpanEventClassNameFunc, asBoundary = false, }) {
-    const ref = useRef(null);
-    useEffect(() => {
-        event.ref = ref;
-        return () => {
-            event.ref = undefined;
-        };
-    }, [event]);
-    const { event: { name }, } = event;
-    const timestamp = formatDuration(event.timestamp - root.startTime);
-    const displayLabel = asBoundary ? (BOUNDARY_LABELS[name] ?? name) : name;
-    // For boundary events, compute the duration of the phase.
-    // "Forward" events (started, retrying) measure until the next event.
-    // "Terminal" events (completed) measure from the previous started event.
-    const isForwardEvent = asBoundary &&
-        (name === 'step_started' ||
-            name === 'run_started' ||
-            name === 'step_retrying');
-    const isTerminalEvent = asBoundary && (name === 'step_completed' || name === 'run_completed');
-    let phaseDuration = null;
-    let phaseLabel = null;
-    if ((isForwardEvent || isTerminalEvent) && node.events) {
-        const sortedNodeEvents = [...node.events].sort((a, b) => a.timestamp - b.timestamp);
-        const currentIdx = sortedNodeEvents.findIndex((e) => e.key === event.key);
-        if (isTerminalEvent) {
-            // Look backward to find the last step_started
-            let prevStartTime = null;
-            for (let i = currentIdx - 1; i >= 0; i--) {
-                if (sortedNodeEvents[i].event.name === 'step_started') {
-                    prevStartTime = sortedNodeEvents[i].timestamp;
-                    break;
-                }
-            }
-            if (prevStartTime !== null) {
-                phaseDuration = formatDuration(event.timestamp - prevStartTime);
-                phaseLabel = 'Executed';
-            }
-        }
-        else {
-            // Look forward to the next event
-            const nextEvent = sortedNodeEvents[currentIdx + 1];
-            const endTime = nextEvent ? nextEvent.timestamp : node.endTime;
-            phaseDuration = formatDuration(endTime - event.timestamp);
-            phaseLabel = name === 'step_retrying' ? 'Waited' : 'Executed';
-        }
-    }
-    const left = (event.timestamp - root.startTime) * scale;
-    const top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;
-    const isLeftAligned = node.duration <= 0 ||
-        (event.timestamp - node.startTime) / node.duration < 0.5;
-    // Get custom class name from callback if provided
-    const customClassName = customSpanEventClassNameFunc
-        ? customSpanEventClassNameFunc(event)
-        : '';
-    return (_jsxs("div", { title: phaseDuration
-            ? `${displayLabel} ${timestamp}\n${phaseLabel} ${phaseDuration}`
-            : `${displayLabel} ${timestamp}`, className: clsx(styles.spanNodeEvent, customClassName, asBoundary && styles.boundaryMarker, node.isHighlighted
-            ? styles.colorHighlight
-            : getSpanColorClassName(node), node.isHighlighted === false && styles.unlit), "data-hovered": event.isHovered, ref: ref, style: {
-            left,
-            top,
-        }, children: [_jsx("div", { className: clsx(styles.hoverInfo, isLeftAligned ? styles.alignStart : styles.alignEnd), children: asBoundary ? (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.eventName, children: displayLabel }), _jsx("span", { className: styles.eventTimestamp, children: timestamp }), phaseDuration ? (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.eventName, children: phaseLabel }), _jsx("span", { className: styles.eventTimestamp, children: phaseDuration })] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.eventName, children: name }), _jsx("span", { className: styles.eventTimestamp, children: timestamp })] })) }), asBoundary ? (_jsx("div", { className: styles.boundaryLine })) : (_jsx("div", { className: styles.eventDiamond }))] }));
-});
-//# sourceMappingURL=node.js.map

package/dist/components/trace-viewer/components/node.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"node.js","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/node.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport type { CSSProperties, MutableRefObject, ReactNode } from 'react';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport styles from '../trace-viewer.module.css';\nimport type {\n  MemoCache,\n  MemoCacheKey,\n  RootNode,\n  ScrollSnapshot,\n  SpanNode,\n  VisibleSpan,\n  VisibleSpanEvent,\n} from '../types';\nimport { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING } from '../util/constants';\nimport { formatDuration, getHighResInMs } from '../util/timing';\nimport { SpanContent } from './span-content';\nimport { computeSegments } from './span-segments';\nimport {\n  type ResourceType,\n  type SpanLayout,\n  getResourceType,\n  getSpanLayout,\n} from './span-strategies';\n\nexport const getSpanColorClassName = (node: SpanNode): string => {\n  if (node.isVercel) return String(styles.colorVercel);\n  return String(styles[`color${node.resourceIndex % 5}` as 'color0']);\n};\n\nfunction getTerminalTimestamp(\n  resourceType: ResourceType,\n  node: VisibleSpan\n): number | undefined {\n  const events = node.events;\n  if (!events?.length) return undefined;\n\n  switch (resourceType) {\n    case 'hook':\n      for (let i = events.length; i--; ) {\n        if (events[i].event.name === 'hook_disposed') {\n          return events[i].timestamp;\n        }\n      }\n      return undefined;\n    case 'sleep':\n      for (let i = events.length; i--; ) {\n        if (events[i].event.name === 'wait_completed') {\n          return events[i].timestamp;\n        }\n      }\n      return undefined;\n    case 'run':\n      for (let i = events.length; i--; ) {\n        const name = events[i].event.name;\n        if (\n          name === 'run_completed' ||\n          name === 'run_failed' ||\n          name === 'run_cancelled'\n        ) {\n          return events[i].timestamp;\n        }\n      }\n      return undefined;\n    case 'step':\n      for (let i = events.length; i--; ) {\n        const name = events[i].event.name;\n        if (name === 'step_completed' || name === 'step_failed') {\n          return events[i].timestamp;\n        }\n        if (name === 'step_started' || name === 'step_retrying') {\n          return undefined;\n        }\n      }\n      return undefined;\n    default:\n      return undefined;\n  }\n}\n\nexport const SpanNodes = memo(function SpanNodes({\n  root,\n  scale,\n  spans,\n  isLive = false,\n  scrollSnapshotRef,\n  cache,\n  customSpanClassNameFunc,\n  customSpanEventClassNameFunc,\n}: {\n  root: RootNode;\n  scale: number;\n  spans: VisibleSpan[];\n  isLive?: boolean;\n  scrollSnapshotRef: MutableRefObject<ScrollSnapshot | undefined>;\n  /** Not used in the body — exists solely to bust React.memo when the global memo cache changes. */\n  cacheKey?: MemoCacheKey;\n  cache: MemoCache;\n  customSpanClassNameFunc?: (span: SpanNode) => string;\n  customSpanEventClassNameFunc?: (event: VisibleSpanEvent) => string;\n}) {\n  return spans.map((x) => (\n    <SpanComponent\n      cacheKey={cache.get(x.span.spanId)}\n      customSpanEventClassNameFunc={customSpanEventClassNameFunc}\n      customSpanClassNameFunc={customSpanClassNameFunc}\n      key={x.span.spanId}\n      node={x}\n      root={root}\n      scale={scale}\n      traceIsLive={isLive}\n      scrollSnapshotRef={scrollSnapshotRef}\n    />\n  ));\n});\n\n// ──────────────────────────────────────────────────────────────────────────\n// Compute inline styles from a SpanLayout\n// ──────────────────────────────────────────────────────────────────────────\n\nfunction getSpanStyle(\n  layout: SpanLayout,\n  node: VisibleSpan,\n  root: RootNode,\n  scale: number\n): CSSProperties {\n  // Use isExpanded (hovered or selected) for width expansion so that\n  // selected small spans stay expanded and show their name.\n  const expanded = layout.isExpanded;\n  return {\n    // Use actualWidth for CSS variable so hover expansion is accurate\n    '--span-width': `${Math.max(layout.actualWidth, 1)}px`,\n    minWidth: expanded ? layout.width : undefined,\n    width: expanded ? undefined : layout.width,\n    height: layout.height,\n    maxWidth:\n      expanded && !layout.isNearRightSide\n        ? (root.endTime - node.startTime) * scale\n        : undefined,\n    containIntrinsicWidth: expanded ? undefined : layout.width,\n    containIntrinsicHeight: layout.height,\n    left: layout.isNearRightSide ? undefined : layout.left,\n    right: layout.isNearRightSide\n      ? (root.endTime - node.endTime) * scale\n      : undefined,\n    top: layout.top,\n  } as CSSProperties;\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// SpanComponent\n// ──────────────────────────────────────────────────────────────────────────\n\nexport const SpanComponent = memo(function SpanComponent({\n  node,\n  root,\n  scale,\n  traceIsLive = false,\n  scrollSnapshotRef,\n  customSpanClassNameFunc,\n  customSpanEventClassNameFunc,\n}: {\n  node: VisibleSpan;\n  root: RootNode;\n  scale: number;\n  traceIsLive?: boolean;\n  scrollSnapshotRef: MutableRefObject<ScrollSnapshot | undefined>;\n  /** Not used in the body — exists solely to bust React.memo for this span. */\n  cacheKey?: MemoCacheKey;\n  customSpanClassNameFunc?: (span: SpanNode) => string;\n  customSpanEventClassNameFunc?: (event: VisibleSpanEvent) => string;\n}): ReactNode {\n  const ref = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    node.ref = ref;\n    return () => {\n      node.ref = undefined;\n    };\n  }, [node]);\n\n  const { span } = node;\n  const resourceType = getResourceType(node);\n  const [liveNow, setLiveNow] = useState(0);\n\n  // Get custom class name from callback if provided\n  const customClassName = customSpanClassNameFunc\n    ? customSpanClassNameFunc(node)\n    : '';\n\n  // Workflow span types use colored segments + boundary line markers\n  // Generic OTEL spans use diamond event markers\n  const isWorkflowSpan = resourceType !== 'default';\n\n  // Determine if this span is still active (live). We require the parent run\n  // to be explicitly live to avoid completed/cancelled traces continuing to\n  // grow due to timing heuristics.\n  const data = span.attributes?.data as Record<string, unknown> | undefined;\n  const terminalTimestamp = getTerminalTimestamp(resourceType, node);\n  const hasTerminalEvent = terminalTimestamp != null;\n  const isCompletedByData =\n    resourceType === 'hook'\n      ? Boolean(data?.disposedAt)\n      : Boolean(data?.completedAt);\n  const isCompleted = isCompletedByData || hasTerminalEvent;\n  const isLive = traceIsLive && isWorkflowSpan && !isCompleted;\n\n  useEffect(() => {\n    if (!isLive) return;\n    setLiveNow(Date.now());\n    const interval = setInterval(() => {\n      setLiveNow(Date.now());\n    }, 250);\n    return () => clearInterval(interval);\n  }, [isLive]);\n\n  const canonicalStartTime = getHighResInMs(span.startTime);\n  const canonicalEndTime = getHighResInMs(span.endTime);\n  const canonicalDuration = getHighResInMs(span.duration);\n  const canonicalActiveStartTime = span.activeStartTime\n    ? getHighResInMs(span.activeStartTime)\n    : undefined;\n\n  const durationMs =\n    terminalTimestamp != null\n      ? Math.max(0, terminalTimestamp - canonicalStartTime)\n      : isLive\n        ? Math.max(0, (liveNow || Date.now()) - canonicalStartTime)\n        : canonicalDuration;\n  const duration = node.isInstrumentationHint\n    ? 'Get Started'\n    : formatDuration(durationMs);\n  const baseNode = {\n    ...node,\n    startTime: canonicalStartTime,\n    endTime: canonicalEndTime,\n    duration: canonicalDuration,\n    activeStartTime: canonicalActiveStartTime,\n  } as VisibleSpan;\n  const segmentNode = isLive\n    ? ({\n        ...baseNode,\n        duration: durationMs,\n        endTime: canonicalStartTime + durationMs,\n      } as VisibleSpan)\n    : baseNode;\n  const hasSegments =\n    isWorkflowSpan &&\n    computeSegments(resourceType, segmentNode).segments.length > 0;\n  const layout = getSpanLayout(\n    resourceType,\n    segmentNode,\n    root,\n    scale,\n    scrollSnapshotRef\n  );\n\n  // For live spans the data-level `node.duration` can be stale (from the last\n  // fetch) while the visual width is growing via rAF. Recompute from real\n  // elapsed time so that:\n  //  - height/isSmall classification stays correct (not shrunken to 40%)\n  //  - React-rendered width matches the rAF-driven width, preventing a brief\n  //    shrink→expand flash on re-render that breaks cursor hit-testing\n  if (isLive) {\n    const elapsed = durationMs;\n    const liveActualWidth = elapsed * scale;\n    const liveWidth = Math.max(liveActualWidth, 4);\n    layout.actualWidth = liveActualWidth;\n    layout.width = liveWidth;\n    layout.isSmall = liveActualWidth < 64;\n    layout.isHuge = liveActualWidth >= 500;\n    if (!layout.isSmall) {\n      layout.height = ROW_HEIGHT;\n      layout.top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * segmentNode.row;\n    }\n  }\n\n  // Smoothly grow active span width at 60fps using wall clock time\n  useEffect(() => {\n    if (!isLive || !ref.current) return;\n\n    let rafId = 0;\n    const tick = (): void => {\n      const $el = ref.current;\n      if (!$el) return;\n      const elapsed = Date.now() - canonicalStartTime;\n      const w = Math.max(elapsed * scale, 2);\n      $el.style.width = `${w}px`;\n      $el.style.setProperty('--span-width', `${w}px`);\n      rafId = requestAnimationFrame(tick);\n    };\n    rafId = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(rafId);\n  }, [isLive, canonicalStartTime, scale]);\n\n  const renderNode = segmentNode;\n\n  return (\n    <>\n      <button\n        aria-label={`${span.name} - ${duration}`}\n        className={clsx(\n          styles.spanNode,\n          layout.isHuge && styles.huge,\n          layout.isSmall && styles.small,\n          layout.isExpanded && styles.xHover,\n          node.isHighlighted\n            ? styles.colorHighlight\n            : getSpanColorClassName(node),\n          node.isHighlighted === false && styles.unlit,\n          customClassName,\n          hasSegments && styles.hasSegments\n        )}\n        data-span-id={span.spanId}\n        data-start-time={segmentNode.startTime - root.startTime}\n        data-right-side={layout.isNearRightSide}\n        data-selected={node.isSelected ? '' : undefined}\n        ref={ref}\n        style={getSpanStyle(layout, segmentNode, root, scale)}\n        type=\"button\"\n      >\n        <SpanContent\n          durationMs={durationMs}\n          resourceType={resourceType}\n          node={renderNode}\n          layout={layout}\n        />\n      </button>\n      {segmentNode.events && !layout.isSmall\n        ? segmentNode.events.map((x) => (\n            <SpanEventComponent\n              customSpanEventClassNameFunc={customSpanEventClassNameFunc}\n              event={x}\n              key={x.key}\n              node={segmentNode}\n              root={root}\n              scale={scale}\n              asBoundary={isWorkflowSpan}\n            />\n          ))\n        : null}\n    </>\n  );\n});\n\n// ──────────────────────────────────────────────────────────────────────────\n// SpanEventComponent\n// ──────────────────────────────────────────────────────────────────────────\n\n/** Human-readable labels for workflow event types */\nconst BOUNDARY_LABELS: Record<string, string> = {\n  step_started: 'Started',\n  step_retrying: 'Retrying',\n  step_failed: 'Failed',\n  hook_created: 'Created',\n  hook_received: 'Received',\n  hook_disposed: 'Resolved',\n  wait_created: 'Sleep started',\n  wait_completed: 'Sleep completed',\n  run_started: 'Started',\n  run_completed: 'Completed',\n  run_failed: 'Run failed',\n  step_completed: 'Completed',\n};\n\nexport const SpanEventComponent = memo(function SpanEventComponent({\n  event,\n  node,\n  root,\n  scale,\n  customSpanEventClassNameFunc,\n  asBoundary = false,\n}: {\n  event: VisibleSpanEvent;\n  node: VisibleSpan;\n  root: RootNode;\n  scale: number;\n  customSpanEventClassNameFunc?: (event: VisibleSpanEvent) => string;\n  asBoundary?: boolean;\n}): ReactNode {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    event.ref = ref;\n    return () => {\n      event.ref = undefined;\n    };\n  }, [event]);\n\n  const {\n    event: { name },\n  } = event;\n  const timestamp = formatDuration(event.timestamp - root.startTime);\n  const displayLabel = asBoundary ? (BOUNDARY_LABELS[name] ?? name) : name;\n\n  // For boundary events, compute the duration of the phase.\n  // \"Forward\" events (started, retrying) measure until the next event.\n  // \"Terminal\" events (completed) measure from the previous started event.\n  const isForwardEvent =\n    asBoundary &&\n    (name === 'step_started' ||\n      name === 'run_started' ||\n      name === 'step_retrying');\n  const isTerminalEvent =\n    asBoundary && (name === 'step_completed' || name === 'run_completed');\n\n  let phaseDuration: string | null = null;\n  let phaseLabel: string | null = null;\n  if ((isForwardEvent || isTerminalEvent) && node.events) {\n    const sortedNodeEvents = [...node.events].sort(\n      (a, b) => a.timestamp - b.timestamp\n    );\n    const currentIdx = sortedNodeEvents.findIndex((e) => e.key === event.key);\n\n    if (isTerminalEvent) {\n      // Look backward to find the last step_started\n      let prevStartTime: number | null = null;\n      for (let i = currentIdx - 1; i >= 0; i--) {\n        if (sortedNodeEvents[i].event.name === 'step_started') {\n          prevStartTime = sortedNodeEvents[i].timestamp;\n          break;\n        }\n      }\n      if (prevStartTime !== null) {\n        phaseDuration = formatDuration(event.timestamp - prevStartTime);\n        phaseLabel = 'Executed';\n      }\n    } else {\n      // Look forward to the next event\n      const nextEvent = sortedNodeEvents[currentIdx + 1];\n      const endTime = nextEvent ? nextEvent.timestamp : node.endTime;\n      phaseDuration = formatDuration(endTime - event.timestamp);\n      phaseLabel = name === 'step_retrying' ? 'Waited' : 'Executed';\n    }\n  }\n\n  const left = (event.timestamp - root.startTime) * scale;\n  const top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;\n  const isLeftAligned =\n    node.duration <= 0 ||\n    (event.timestamp - node.startTime) / node.duration < 0.5;\n\n  // Get custom class name from callback if provided\n  const customClassName = customSpanEventClassNameFunc\n    ? customSpanEventClassNameFunc(event)\n    : '';\n\n  return (\n    <div\n      title={\n        phaseDuration\n          ? `${displayLabel} ${timestamp}\\n${phaseLabel} ${phaseDuration}`\n          : `${displayLabel} ${timestamp}`\n      }\n      className={clsx(\n        styles.spanNodeEvent,\n        customClassName,\n        asBoundary && styles.boundaryMarker,\n        node.isHighlighted\n          ? styles.colorHighlight\n          : getSpanColorClassName(node),\n        node.isHighlighted === false && styles.unlit\n      )}\n      data-hovered={event.isHovered}\n      ref={ref}\n      style={\n        {\n          left,\n          top,\n        } as CSSProperties\n      }\n    >\n      <div\n        className={clsx(\n          styles.hoverInfo,\n          isLeftAligned ? styles.alignStart : styles.alignEnd\n        )}\n      >\n        {asBoundary ? (\n          <>\n            <span className={styles.eventName}>{displayLabel}</span>\n            <span className={styles.eventTimestamp}>{timestamp}</span>\n            {phaseDuration ? (\n              <>\n                <span className={styles.eventName}>{phaseLabel}</span>\n                <span className={styles.eventTimestamp}>{phaseDuration}</span>\n              </>\n            ) : null}\n          </>\n        ) : (\n          <>\n            <span className={styles.eventName}>{name}</span>\n            <span className={styles.eventTimestamp}>{timestamp}</span>\n          </>\n        )}\n      </div>\n      {asBoundary ? (\n        <div className={styles.boundaryLine} />\n      ) : (\n        <div className={styles.eventDiamond} />\n      )}\n    </div>\n  );\n});\n"]}

package/dist/components/trace-viewer/components/search-input.d.ts

@@ -1,9 +0,0 @@
-import type { ChangeEventHandler, ReactNode } from 'react';
-export declare function SearchInput({ height, width, value, placeholder, onChange, }: {
-    height: number | string;
-    width?: number | string;
-    value: string;
-    placeholder?: string;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-}): ReactNode;
-//# sourceMappingURL=search-input.d.ts.map

package/dist/components/trace-viewer/components/search-input.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/search-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAChD,GAAG,SAAS,CAeZ"}

package/dist/components/trace-viewer/components/search-input.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from '../trace-viewer.module.css';
-export function SearchInput({ height, width, value, placeholder, onChange, }) {
-    return (_jsxs("label", { className: styles.searchInputLabel, children: [_jsx("div", { className: styles.searchInputPrefix, children: _jsx(MagnifyingGlassIcon, {}) }), _jsx("input", { type: "search", value: value, placeholder: placeholder, onChange: onChange, style: { height, width } })] }));
-}
-function MagnifyingGlassIcon() {
-    return (_jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M11.5 11.5L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-}
-//# sourceMappingURL=search-input.js.map

package/dist/components/trace-viewer/components/search-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-input.js","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/search-input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,UAAU,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,GAOT;IACC,OAAO,CACL,iBAAO,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACvC,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,KAAC,mBAAmB,KAAG,GACnB,EACN,gBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GACxB,IACI,CACT,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,CACL,eACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,KAAK,GAAG,EACxE,eACE,CAAC,EAAC,kBAAkB,EACpB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,IACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type { ChangeEventHandler, ReactNode } from 'react';\nimport styles from '../trace-viewer.module.css';\n\nexport function SearchInput({\n  height,\n  width,\n  value,\n  placeholder,\n  onChange,\n}: {\n  height: number | string;\n  width?: number | string;\n  value: string;\n  placeholder?: string;\n  onChange: ChangeEventHandler<HTMLInputElement>;\n}): ReactNode {\n  return (\n    <label className={styles.searchInputLabel}>\n      <div className={styles.searchInputPrefix}>\n        <MagnifyingGlassIcon />\n      </div>\n      <input\n        type=\"search\"\n        value={value}\n        placeholder={placeholder}\n        onChange={onChange}\n        style={{ height, width }}\n      />\n    </label>\n  );\n}\n\nfunction MagnifyingGlassIcon(): ReactNode {\n  return (\n    <svg\n      width={16}\n      height={16}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path\n        d=\"M11.5 11.5L14 14\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n"]}

package/dist/components/trace-viewer/components/search.d.ts

@@ -1,3 +0,0 @@
-import { type ReactNode } from 'react';
-export declare function SearchBar(): ReactNode;
-//# sourceMappingURL=search.d.ts.map

package/dist/components/trace-viewer/components/search.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/search.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5D,wBAAgB,SAAS,IAAI,SAAS,CAMrC"}

package/dist/components/trace-viewer/components/search.js

@@ -1,25 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useTraceViewer } from '../context';
-import styles from '../trace-viewer.module.css';
-import { SEARCH_HEIGHT } from '../util/constants';
-import { SearchInput } from './search-input';
-export function SearchBar() {
-    return (_jsx("nav", { className: styles.searchBar, children: _jsx(SearchInputWrapper, {}) }));
-}
-function SearchInputWrapper() {
-    const { dispatch } = useTraceViewer();
-    const [value, setValue] = useState('');
-    useEffect(() => {
-        const timeout = setTimeout(() => dispatch({
-            type: 'setFilter',
-            filter: value,
-        }), 100);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [dispatch, value]);
-    return (_jsx("div", { className: styles.searchInput, children: _jsx(SearchInput, { height: SEARCH_HEIGHT, onChange: (e) => setValue(e.target.value), placeholder: "Search spans\u2026", value: value, width: "100%" }) }));
-}
-//# sourceMappingURL=search.js.map

package/dist/components/trace-viewer/components/search.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/search.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC9B,KAAC,kBAAkB,KAAG,GAClB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB;IACzB,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CACxB,GAAG,EAAE,CACH,QAAQ,CAAC;YACP,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,KAAK;SACd,CAAC,EACJ,GAAG,CACJ,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAChC,KAAC,WAAW,IACV,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,WAAW,EAAC,oBAAe,EAC3B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,MAAM,GACZ,GACE,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport { useTraceViewer } from '../context';\nimport styles from '../trace-viewer.module.css';\nimport { SEARCH_HEIGHT } from '../util/constants';\nimport { SearchInput } from './search-input';\n\nexport function SearchBar(): ReactNode {\n  return (\n    <nav className={styles.searchBar}>\n      <SearchInputWrapper />\n    </nav>\n  );\n}\n\nfunction SearchInputWrapper(): ReactNode {\n  const { dispatch } = useTraceViewer();\n  const [value, setValue] = useState('');\n\n  useEffect(() => {\n    const timeout = setTimeout(\n      () =>\n        dispatch({\n          type: 'setFilter',\n          filter: value,\n        }),\n      100\n    );\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [dispatch, value]);\n\n  return (\n    <div className={styles.searchInput}>\n      <SearchInput\n        height={SEARCH_HEIGHT}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Search spans…\"\n        value={value}\n        width=\"100%\"\n      />\n    </div>\n  );\n}\n"]}

package/dist/components/trace-viewer/components/span-content.d.ts

@@ -1,19 +0,0 @@
-import type { ReactNode } from 'react';
-import type { SpanNode } from '../types';
-import type { ResourceType, SpanLayout } from './span-strategies';
-export interface SpanContentProps {
-    node: SpanNode;
-    layout: SpanLayout;
-    durationMs?: number;
-}
-export declare function RunContent(props: SpanContentProps): ReactNode;
-export declare function StepContent(props: SpanContentProps): ReactNode;
-export declare function HookContent(props: SpanContentProps): ReactNode;
-export declare function SleepContent(props: SpanContentProps): ReactNode;
-/**
- * Returns the inner content for a span based on its resource type.
- */
-export declare function SpanContent({ resourceType, ...props }: SpanContentProps & {
-    resourceType: ResourceType;
-}): ReactNode;
-//# sourceMappingURL=span-content.d.ts.map

package/dist/components/trace-viewer/components/span-content.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"span-content.d.ts","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/span-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAQzC,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAsJlE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAyCD,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAE7D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAE9D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAE9D;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAE/D;AAMD;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,GAAG,SAAS,CAa/D"}

package/dist/components/trace-viewer/components/span-content.js

@@ -1,137 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styles from '../trace-viewer.module.css';
-import { formatDuration } from '../util/timing';
-import { SEGMENT_CLASS_MAP, computeSegments, } from './span-segments';
-// ──────────────────────────────────────────────────────────────────────────
-// Shared helpers
-// ──────────────────────────────────────────────────────────────────────────
-function getDuration(node) {
-    if (node.isInstrumentationHint) {
-        return 'Get Started';
-    }
-    return formatDuration(node.duration);
-}
-// ──────────────────────────────────────────────────────────────────────────
-// Segment rendering (shared across all workflow span types)
-// ──────────────────────────────────────────────────────────────────────────
-const SEGMENT_LABELS = {
-    queued: 'Queued',
-    running: '',
-    failed: 'Failed',
-    retrying: 'Retry wait',
-    succeeded: 'Executed',
-    waiting: 'Waiting',
-    sleeping: 'Sleeping',
-    received: 'Received',
-};
-function SegmentLayer({ segments, spanDuration, }) {
-    if (segments.length === 0)
-        return null;
-    return (_jsx("div", { className: styles.segmentLayer, children: segments.map((seg, i) => {
-            const className = styles[SEGMENT_CLASS_MAP[seg.status]];
-            const segDuration = (seg.endFraction - seg.startFraction) * spanDuration;
-            const label = SEGMENT_LABELS[seg.status];
-            const style = {
-                left: `${seg.startFraction * 100}%`,
-                width: `${(seg.endFraction - seg.startFraction) * 100}%`,
-            };
-            return (_jsx("div", { className: `${styles.segment} ${String(className)}`, style: style, title: label
-                    ? `${label} ${formatDuration(segDuration)}`
-                    : formatDuration(segDuration) }, `seg-${seg.status}-${String(i)}`));
-        }) }));
-}
-/** Build inline segment tags to render next to the span name. */
-function getSegmentTags(segments, spanDuration) {
-    const tags = [];
-    for (let i = 0; i < segments.length; i++) {
-        const seg = segments[i];
-        const label = SEGMENT_LABELS[seg.status];
-        if (!label)
-            continue; // skip "running" which has no label
-        let segDuration = (seg.endFraction - seg.startFraction) * spanDuration;
-        // For terminal segments (succeeded/failed) with ~0 duration,
-        // use the preceding running segment's duration instead.
-        if (segDuration < 1 &&
-            (seg.status === 'succeeded' || seg.status === 'failed') &&
-            i > 0) {
-            const prev = segments[i - 1];
-            if (prev.status === 'running') {
-                segDuration = (prev.endFraction - prev.startFraction) * spanDuration;
-            }
-        }
-        // Skip tags that still have no meaningful duration
-        if (segDuration < 1)
-            continue;
-        tags.push({ label, duration: formatDuration(segDuration) });
-    }
-    return tags;
-}
-// ──────────────────────────────────────────────────────────────────────────
-// Text content (shared label + duration rendering)
-// ──────────────────────────────────────────────────────────────────────────
-function TextContent({ node, layout, durationMs, segmentTags, }) {
-    const duration = node.isInstrumentationHint
-        ? getDuration(node)
-        : formatDuration(durationMs ?? node.duration);
-    if (layout.isSmall && !layout.isHovered) {
-        return null;
-    }
-    const showTags = segmentTags &&
-        segmentTags.length > 0 &&
-        (layout.isHovered || layout.width > 200);
-    return (_jsxs(_Fragment, { children: [_jsxs("span", { className: styles.spanName, children: [node.label || node.span.name, showTags
-                        ? segmentTags.map((tag, i) => (_jsxs("span", { className: styles.segmentTag, children: [' · ', tag.label, " ", tag.duration] }, i)))
-                        : null] }), layout.isHuge ? _jsx("span", { className: styles.spanSpacer }) : null, layout.isHovered || layout.width > 128 ? (_jsx("span", { className: styles.spanDuration, children: duration })) : null] }));
-}
-// ──────────────────────────────────────────────────────────────────────────
-// Default content (generic OTEL spans — no segments)
-// ──────────────────────────────────────────────────────────────────────────
-function DefaultContent({ node, layout }) {
-    return _jsx(TextContent, { node: node, layout: layout });
-}
-// ──────────────────────────────────────────────────────────────────────────
-// Workflow content (segments + text for workflow span types)
-// ──────────────────────────────────────────────────────────────────────────
-function WorkflowContent({ resourceType, node, layout, durationMs, }) {
-    const spanDuration = durationMs ?? node.duration;
-    const { segments } = computeSegments(resourceType, node);
-    const segmentTags = getSegmentTags(segments, spanDuration);
-    return (_jsxs(_Fragment, { children: [_jsx(SegmentLayer, { segments: segments, spanDuration: spanDuration }), _jsx(TextContent, { durationMs: spanDuration, node: node, layout: layout, segmentTags: segmentTags })] }));
-}
-// ──────────────────────────────────────────────────────────────────────────
-// Per-type content components
-// ──────────────────────────────────────────────────────────────────────────
-export function RunContent(props) {
-    return _jsx(WorkflowContent, { resourceType: "run", ...props });
-}
-export function StepContent(props) {
-    return _jsx(WorkflowContent, { resourceType: "step", ...props });
-}
-export function HookContent(props) {
-    return _jsx(WorkflowContent, { resourceType: "hook", ...props });
-}
-export function SleepContent(props) {
-    return _jsx(WorkflowContent, { resourceType: "sleep", ...props });
-}
-// ──────────────────────────────────────────────────────────────────────────
-// Dispatcher
-// ──────────────────────────────────────────────────────────────────────────
-/**
- * Returns the inner content for a span based on its resource type.
- */
-export function SpanContent({ resourceType, ...props }) {
-    switch (resourceType) {
-        case 'run':
-            return _jsx(RunContent, { ...props });
-        case 'step':
-            return _jsx(StepContent, { ...props });
-        case 'hook':
-            return _jsx(HookContent, { ...props });
-        case 'sleep':
-            return _jsx(SleepContent, { ...props });
-        default:
-            return _jsx(DefaultContent, { ...props });
-    }
-}
-//# sourceMappingURL=span-content.js.map