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

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

@@ -1 +0,0 @@
-{"version":3,"file":"span-content.js","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/span-content.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode } from 'react';\nimport styles from '../trace-viewer.module.css';\nimport type { SpanNode } from '../types';\nimport { formatDuration } from '../util/timing';\nimport {\n  type Segment,\n  type SegmentStatus,\n  SEGMENT_CLASS_MAP,\n  computeSegments,\n} from './span-segments';\nimport type { ResourceType, SpanLayout } from './span-strategies';\n\n// ──────────────────────────────────────────────────────────────────────────\n// Shared helpers\n// ──────────────────────────────────────────────────────────────────────────\n\nfunction getDuration(node: SpanNode): string {\n  if (node.isInstrumentationHint) {\n    return 'Get Started';\n  }\n  return formatDuration(node.duration);\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// Segment rendering (shared across all workflow span types)\n// ──────────────────────────────────────────────────────────────────────────\n\nconst SEGMENT_LABELS: Record<SegmentStatus, string> = {\n  queued: 'Queued',\n  running: '',\n  failed: 'Failed',\n  retrying: 'Retry wait',\n  succeeded: 'Executed',\n  waiting: 'Waiting',\n  sleeping: 'Sleeping',\n  received: 'Received',\n};\n\nfunction SegmentLayer({\n  segments,\n  spanDuration,\n}: {\n  segments: Segment[];\n  spanDuration: number;\n}): ReactNode {\n  if (segments.length === 0) return null;\n\n  return (\n    <div className={styles.segmentLayer}>\n      {segments.map((seg, i) => {\n        const className =\n          styles[SEGMENT_CLASS_MAP[seg.status] as keyof typeof styles];\n        const segDuration =\n          (seg.endFraction - seg.startFraction) * spanDuration;\n        const label = SEGMENT_LABELS[seg.status];\n        const style: CSSProperties = {\n          left: `${seg.startFraction * 100}%`,\n          width: `${(seg.endFraction - seg.startFraction) * 100}%`,\n        };\n\n        return (\n          <div\n            key={`seg-${seg.status}-${String(i)}`}\n            className={`${styles.segment} ${String(className)}`}\n            style={style}\n            title={\n              label\n                ? `${label} ${formatDuration(segDuration)}`\n                : formatDuration(segDuration)\n            }\n          />\n        );\n      })}\n    </div>\n  );\n}\n\n/** Build inline segment tags to render next to the span name. */\nfunction getSegmentTags(\n  segments: Segment[],\n  spanDuration: number\n): { label: string; duration: string }[] {\n  const tags: { label: string; duration: string }[] = [];\n  for (let i = 0; i < segments.length; i++) {\n    const seg = segments[i];\n    const label = SEGMENT_LABELS[seg.status];\n    if (!label) continue; // skip \"running\" which has no label\n    let segDuration = (seg.endFraction - seg.startFraction) * spanDuration;\n\n    // For terminal segments (succeeded/failed) with ~0 duration,\n    // use the preceding running segment's duration instead.\n    if (\n      segDuration < 1 &&\n      (seg.status === 'succeeded' || seg.status === 'failed') &&\n      i > 0\n    ) {\n      const prev = segments[i - 1];\n      if (prev.status === 'running') {\n        segDuration = (prev.endFraction - prev.startFraction) * spanDuration;\n      }\n    }\n\n    // Skip tags that still have no meaningful duration\n    if (segDuration < 1) continue;\n\n    tags.push({ label, duration: formatDuration(segDuration) });\n  }\n  return tags;\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// Text content (shared label + duration rendering)\n// ──────────────────────────────────────────────────────────────────────────\n\nfunction TextContent({\n  node,\n  layout,\n  durationMs,\n  segmentTags,\n}: SpanContentProps & {\n  segmentTags?: { label: string; duration: string }[];\n}): ReactNode {\n  const duration = node.isInstrumentationHint\n    ? getDuration(node)\n    : formatDuration(durationMs ?? node.duration);\n\n  if (layout.isSmall && !layout.isHovered) {\n    return null;\n  }\n\n  const showTags =\n    segmentTags &&\n    segmentTags.length > 0 &&\n    (layout.isHovered || layout.width > 200);\n\n  return (\n    <>\n      <span className={styles.spanName}>\n        {node.label || node.span.name}\n        {showTags\n          ? segmentTags.map((tag, i) => (\n              <span key={i} className={styles.segmentTag}>\n                {' · '}\n                {tag.label} {tag.duration}\n              </span>\n            ))\n          : null}\n      </span>\n      {layout.isHuge ? <span className={styles.spanSpacer} /> : null}\n      {layout.isHovered || layout.width > 128 ? (\n        <span className={styles.spanDuration}>{duration}</span>\n      ) : null}\n    </>\n  );\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// Content props\n// ──────────────────────────────────────────────────────────────────────────\n\nexport interface SpanContentProps {\n  node: SpanNode;\n  layout: SpanLayout;\n  durationMs?: number;\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// Default content (generic OTEL spans — no segments)\n// ──────────────────────────────────────────────────────────────────────────\n\nfunction DefaultContent({ node, layout }: SpanContentProps): ReactNode {\n  return <TextContent node={node} layout={layout} />;\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// Workflow content (segments + text for workflow span types)\n// ──────────────────────────────────────────────────────────────────────────\n\nfunction WorkflowContent({\n  resourceType,\n  node,\n  layout,\n  durationMs,\n}: SpanContentProps & { resourceType: ResourceType }): ReactNode {\n  const spanDuration = durationMs ?? node.duration;\n  const { segments } = computeSegments(resourceType, node);\n  const segmentTags = getSegmentTags(segments, spanDuration);\n\n  return (\n    <>\n      <SegmentLayer segments={segments} spanDuration={spanDuration} />\n      <TextContent\n        durationMs={spanDuration}\n        node={node}\n        layout={layout}\n        segmentTags={segmentTags}\n      />\n    </>\n  );\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// Per-type content components\n// ──────────────────────────────────────────────────────────────────────────\n\nexport function RunContent(props: SpanContentProps): ReactNode {\n  return <WorkflowContent resourceType=\"run\" {...props} />;\n}\n\nexport function StepContent(props: SpanContentProps): ReactNode {\n  return <WorkflowContent resourceType=\"step\" {...props} />;\n}\n\nexport function HookContent(props: SpanContentProps): ReactNode {\n  return <WorkflowContent resourceType=\"hook\" {...props} />;\n}\n\nexport function SleepContent(props: SpanContentProps): ReactNode {\n  return <WorkflowContent resourceType=\"sleep\" {...props} />;\n}\n\n// ──────────────────────────────────────────────────────────────────────────\n// Dispatcher\n// ──────────────────────────────────────────────────────────────────────────\n\n/**\n * Returns the inner content for a span based on its resource type.\n */\nexport function SpanContent({\n  resourceType,\n  ...props\n}: SpanContentProps & { resourceType: ResourceType }): ReactNode {\n  switch (resourceType) {\n    case 'run':\n      return <RunContent {...props} />;\n    case 'step':\n      return <StepContent {...props} />;\n    case 'hook':\n      return <HookContent {...props} />;\n    case 'sleep':\n      return <SleepContent {...props} />;\n    default:\n      return <DefaultContent {...props} />;\n  }\n}\n"]}

package/dist/components/trace-viewer/components/span-detail-panel.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-export declare const SpanDetailPanelBody: () => import("react/jsx-runtime").JSX.Element | null;
-export declare function SpanDetailPanel({ attached, }: {
-    attached?: boolean;
-}): ReactNode;
-/**
- * Resizer component for the trace viewer panel.
- */
-export declare function PanelResizer(): ReactNode;
-//# sourceMappingURL=span-detail-panel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"span-detail-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/span-detail-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAgH5D,eAAO,MAAM,mBAAmB,sDAoI/B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,QAAgB,GACjB,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CAgDZ;AAsRD;;GAEG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAwExC"}

package/dist/components/trace-viewer/components/span-detail-panel.js

@@ -1,285 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { clsx } from 'clsx';
-import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { initialState, useCustomPanelComponent, useTraceViewer, } from '../context';
-import styles from '../trace-viewer.module.css';
-import { formatDuration } from '../util/timing';
-import { getSpanColorClassName } from './node';
-import { ButtonLink, IconChevronDown, IconCross, IconExternalSmall, Link, Note, Skeleton, } from './ui';
-const percentage = (n) => `${(100 * n).toFixed(3)}%`;
-const sortWord = (a, b) => {
-    if (a < b) {
-        return -1;
-    }
-    else if (a > b) {
-        return 1;
-    }
-    return 0;
-};
-const getGroupedAttributes = (attributes) => {
-    // Build groups of items with the same prefix
-    const groups = {};
-    for (const [key, value] of Object.entries(attributes)) {
-        const dotIndex = key.indexOf('.');
-        let prefix = '';
-        let suffix = '';
-        if (dotIndex !== -1) {
-            prefix = key.substring(0, dotIndex);
-            suffix = key.substring(dotIndex + 1);
-        }
-        else {
-            suffix = key;
-        }
-        let group = groups[prefix];
-        if (!group) {
-            group = {
-                prefix,
-                attributes: [],
-            };
-            groups[prefix] = group;
-        }
-        group.attributes.push({
-            key,
-            suffix,
-            value: String(value),
-        });
-    }
-    // List and sort everything
-    const result = Array.from(Object.values(groups)).sort((a, b) => sortWord(a.prefix, b.prefix));
-    for (const group of result) {
-        group.attributes.sort((a, b) => sortWord(a.suffix, b.suffix));
-    }
-    return result;
-};
-// biome-ignore lint/correctness/noUnusedFunctionParameters: ignored using `--suppress`
-const getAncestors = (_root, start) => {
-    const result = [];
-    if (!start)
-        return result;
-    for (let node = start; 'parent' in node; node = node.parent) {
-        result.unshift(node);
-    }
-    return result;
-};
-export const SpanDetailPanelBody = () => {
-    const { state: { root, selected, resourceMap, getQuickLinks }, dispatch, } = useTraceViewer();
-    const ancestors = useMemo(() => getAncestors(root, selected), [root, selected]);
-    const attributeGroups = useMemo(() => getGroupedAttributes(selected?.span.attributes ?? {}), [selected]);
-    const resourceAttributeGroups = useMemo(() => {
-        const resourceName = selected?.span.resource;
-        if (!resourceName)
-            return [];
-        const resourceAttributes = resourceMap[resourceName];
-        if (!resourceAttributes)
-            return [];
-        return getGroupedAttributes(resourceAttributes);
-    }, [resourceMap, selected]);
-    if (!selected)
-        return null;
-    const { span } = selected;
-    const isEntrySpan = detectIsEntrySpan(selected);
-    return (_jsxs(_Fragment, { children: [selected.isVercel ? _jsx(InfraSpanDescription, { node: selected }) : null, selected.isInstrumentationHint ? _jsx(InstrumentationHint, {}) : null, !selected.isInstrumentationHint && ancestors.length ? (_jsx(DetailGroup, { className: styles.ancestorGroup, name: "Location", children: ancestors.map((node) => (_jsxs("button", { className: styles.ancestorNode, onClick: () => dispatch({
-                        type: 'select',
-                        id: node.span.spanId,
-                    }), type: "button", children: [_jsxs("div", { className: styles.ancestorText, children: [_jsx("span", { className: styles.ancestorName, children: node.label || node.span.name }), _jsx("span", { className: styles.ancestorDuration, children: formatDuration(node.duration) })] }), _jsx("span", { "aria-hidden": true, className: styles.ancestorLineContainer, children: _jsx("span", { className: clsx(styles.ancestorLine, getSpanColorClassName(node)), style: {
-                                    left: percentage((node.startTime - root.startTime) / root.duration),
-                                    width: percentage(node.duration / root.duration),
-                                } }) })] }, `${selected.span.spanId}.${node.span.spanId}`))) })) : null, isEntrySpan ? (_jsx(EntrySpanLinks, { getQuickLinks: getQuickLinks, span: selected.span })) : null, selected.events?.length ? (_jsx(DetailGroup, { name: "Events", children: selected.events.map((event) => (_jsxs(Fragment, { children: [_jsxs("dl", { className: styles.spanDetailPanelAttribute, children: [_jsx("dt", { className: styles.spanDetailPanelAttributeKey, children: event.event.name }), _jsx("dd", { className: styles.spanDetailPanelAttributeValue, children: formatDuration(event.timestamp - root.startTime) })] }), Object.entries(event.event.attributes).map(([key, value]) => (_jsx(DetailLine, { name: `${event.event.name}.${key}`, value: value }, key)))] }, event.key))) })) : null, attributeGroups.length ? (_jsx(DetailGroup, { name: "Attributes", children: attributeGroups.map((group) => (_jsx(Fragment, { children: group.attributes.map(({ key, value }) => (_jsx(DetailLine, { name: key, value: value }, key))) }, group.prefix))) })) : null, resourceAttributeGroups.length ? (_jsx(DetailGroup, { name: "Resource", children: resourceAttributeGroups.map((group) => (_jsx(Fragment, { children: group.attributes.map(({ key, value }) => (_jsx(DetailLine, { name: key, value: value }, key))) }, group.prefix))) })) : null, selected.isInstrumentationHint ? null : (_jsxs(DetailGroup, { name: "Library", children: [_jsx(DetailLine, { name: "name", value: span.library.name }), span.library.version ? (_jsx(DetailLine, { name: "version", value: span.library.version })) : null] }))] }));
-};
-export function SpanDetailPanel({ attached = false, }) {
-    const { state: { selected, isMobile }, dispatch, } = useTraceViewer();
-    const customPanelComponent = useCustomPanelComponent();
-    if (!selected)
-        return null;
-    const { span } = selected;
-    return (_jsxs("div", { className: clsx(styles.spanDetailPanel, isMobile && styles.mobile), children: [attached && !isMobile ? _jsx(PanelResizer, {}) : null, _jsx("div", { className: styles.spanDetailPanelTop, children: _jsxs("div", { className: styles.spanDetailPanelTopInfo, children: [_jsx("span", { className: styles.spanDetailPanelName, title: span.name, children: span.name }), _jsxs("div", { className: styles.spanDetailPanelCorner, children: [selected.isInstrumentationHint ? null : (_jsx("span", { className: styles.spanDetailPanelDuration, children: formatDuration(selected.duration) })), _jsx("div", { className: styles.spanDetailPanelCloseVerticalRule }), _jsx("button", { "aria-label": "Close Span Details", className: styles.spanDetailPanelClose, onClick: () => dispatch({
-                                        type: 'deselect',
-                                    }), type: "button", children: _jsx(IconCross, { color: "gray-700", size: 20 }) })] })] }) }), _jsx("div", { className: clsx('flex gap-3', styles.spanDetailPanelBody), children: customPanelComponent || _jsx(SpanDetailPanelBody, {}) })] }));
-}
-const EXPANDED_STORAGE_KEY_PREFIX = 'vc-trace-span-exp:';
-function DetailGroup({ name, className = '', children, }) {
-    const [isExpanded, setIsExpanded] = useState(() => {
-        if (!('localStorage' in globalThis))
-            return true;
-        return (localStorage.getItem(`${EXPANDED_STORAGE_KEY_PREFIX}${name}`) !== '0');
-    });
-    const toggleExpanded = useCallback(() => {
-        setIsExpanded((x) => {
-            const willBeExpanded = !x;
-            localStorage.setItem(`${EXPANDED_STORAGE_KEY_PREFIX}${name}`, String(Number(willBeExpanded)));
-            return willBeExpanded;
-        });
-    }, [name]);
-    return (_jsxs("div", { className: clsx(styles.detailGroup, isExpanded ? styles.expanded : styles.collapsed, className), children: [_jsxs("button", { className: styles.detailHeading, onClick: toggleExpanded, type: "button", children: [_jsx("span", { children: name }), _jsx(IconChevronDown, {})] }), isExpanded ? children : null] }));
-}
-const CommonHttpVerbs = new Set([
-    'OPTIONS',
-    'HEAD',
-    'GET',
-    'PUT',
-    'POST',
-    'DELETE',
-]);
-const KnownSpans = {
-    'Resolve Deployment': `How long it took Vercel's routing layer to retrieve details for the deployment.`,
-    'Resolve Cache': `How long it took Vercel's routing layer to check for a cached function invocation.`,
-    'Resolve Route': `How long it took Vercel's routing layer to resolve routing rules, including redirects and rewrites.`,
-    'Invoke Middleware': `How long it took this middleware to start and run user code.`,
-    'Invoke Function': `How long it took this Vercel Function to start and run user code.`,
-    waitUntil: `How long it took to run user code inside of waitUntil.`,
-    'Start VM': `How long it took to start the Virtual Machine which contains the Vercel Function.`,
-    'Spawn Node.js': `How long it took the Virtual Machine to start the Node.js runtime.`,
-    'Spawn Python': `How long it took the Virtual Machine to start the Python runtime.`,
-    'Init User Code': `How long it took to import the user code and run any globally-scoped code.`,
-};
-const ColdStartSpanNames = new Set([
-    'Start VM',
-    'Spawn Node.js',
-    'Spawn Python',
-    'Init User Code',
-]);
-const getRegion = (node) => {
-    if (!node || !('span' in node)) {
-        return null;
-    }
-    const attr = node.span.attributes;
-    const region = attr['vercel.region'] || attr['vercel.function.region'];
-    if (region)
-        return String(region);
-    return null;
-};
-const getNote = (node) => {
-    const { name } = node.span;
-    const region = getRegion(node);
-    const parentRegion = getRegion(node.parent);
-    if (node.span.attributes['vercel.middleware.internal'] === 'true') {
-        return 'The Vercel Toolbar created this middleware.';
-    }
-    else if (ColdStartSpanNames.has(name) ||
-        (name === 'Invoke Function' &&
-            node.children.some((x) => ColdStartSpanNames.has(x.span.name)))) {
-        return 'This function encountered a cold start.';
-    }
-    else if (region && parentRegion && region !== parentRegion) {
-        return 'This request was routed across regions.';
-    }
-    return null;
-};
-const detectIsEntrySpan = (node) => {
-    if (!node.isVercel)
-        return false;
-    const { name } = node.span;
-    const spaceIndex = name.indexOf(' ');
-    if (spaceIndex === -1)
-        return false;
-    const firstWord = name.substring(0, spaceIndex);
-    return CommonHttpVerbs.has(firstWord);
-};
-function InfraSpanDescription({ node }) {
-    const { name } = node.span;
-    let description = KnownSpans[name];
-    if (!description && detectIsEntrySpan(node)) {
-        description = `How long it took for Vercel to process the request and send the response.`;
-    }
-    if (!description)
-        return null;
-    const note = getNote(node);
-    return (_jsx(DetailGroup, { name: "What is this?", children: _jsxs("div", { className: styles.infraSpanDescription, children: [_jsx("span", { children: description }), note ? _jsx(Note, { children: note }) : note] }) }));
-}
-const EntrySpanLinks = memo(function EntrySpanLinks({ getQuickLinks, span, }) {
-    const links = getQuickLinks(span);
-    if (!links.length)
-        return null;
-    return (_jsx(DetailGroup, { name: "Links", children: links.map(({ key, value }) => (_jsx(EntrySpanLink, { link: value, name: key }, key))) }));
-});
-function usePromise(promise) {
-    const [_, setLatest] = useState({});
-    const fulfilled = promise.__resolvedValue !== undefined ||
-        promise.__rejectedValue !== undefined;
-    useEffect(() => {
-        if (fulfilled)
-            return;
-        promise
-            .then((value) => {
-            promise.__resolvedValue = value;
-        })
-            .catch((err) => {
-            promise.__rejectedValue = err;
-        })
-            .finally(() => setLatest({}));
-    }, [promise, fulfilled]);
-    return promise.__resolvedValue;
-}
-function EntrySpanLink({ name, link: linkPromise, }) {
-    const link = usePromise(linkPromise);
-    return (_jsxs(Link, { as: link ? undefined : 'span', className: clsx(styles.spanDetailPanelAttribute, styles.spanDetailPanelQuickLink), href: link?.href || '', children: [_jsx("span", { className: styles.spanDetailPanelAttributeKey, children: name }), _jsx("span", { className: clsx(styles.spanDetailPanelAttributeValue, styles.spanDetailPanelQuickLinkLabel), children: link ? (_jsxs(_Fragment, { children: [link.label, link.icon || _jsx(IconExternalSmall, { color: "gray-900" })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 18, width: 32 + name.length * 8 }), _jsx(Skeleton, { height: 18, rounded: true, width: 18 })] })) })] }));
-}
-function InstrumentationHint() {
-    return (_jsx(DetailGroup, { name: "What is this?", children: _jsxs("div", { className: styles.infraSpanDescription, children: [_jsx("span", { children: `You can visualize your application's spans alongside Vercel's spans in this viewer.` }), _jsx(ButtonLink, { href: "https://vercel.com/docs/session-tracing#adding-custom-spans", size: "small", target: "_blank", children: "Get Started" })] }) }));
-}
-function DetailLine({ name, value, }) {
-    return (_jsxs("dl", { className: styles.spanDetailPanelAttribute, children: [_jsx("dt", { className: styles.spanDetailPanelAttributeKey, children: name }), _jsx("dd", { className: styles.spanDetailPanelAttributeValue, title: String(value), children: String(value) })] }));
-}
-/**
- * Resizer component for the trace viewer panel.
- */
-export function PanelResizer() {
-    const { state: { panelWidth }, dispatch, } = useTraceViewer();
-    const gestureRef = useRef({
-        start: {
-            x: 0,
-            width: panelWidth,
-        },
-        x: 0,
-        width: panelWidth,
-        isHeld: false,
-    });
-    gestureRef.current.width = panelWidth;
-    const onPointerDown = useCallback((event) => {
-        if (event.pointerType !== 'mouse')
-            return;
-        event.preventDefault();
-        const g = gestureRef.current;
-        g.start.x = event.clientX;
-        g.x = event.clientX;
-        g.start.width = g.width;
-        g.isHeld = true;
-    }, []);
-    const onDoubleClick = useCallback(() => {
-        dispatch({
-            type: 'setPanelWidth',
-            width: initialState.panelWidth,
-        });
-    }, [dispatch]);
-    useEffect(() => {
-        let nextFrame = 0;
-        const onFrame = () => {
-            const g = gestureRef.current;
-            const width = g.start.width + g.start.x - g.x;
-            dispatch({
-                type: 'setPanelWidth',
-                width,
-            });
-        };
-        const onPointerMove = (event) => {
-            if (!gestureRef.current.isHeld)
-                return;
-            event.preventDefault();
-            gestureRef.current.x = event.clientX;
-            cancelAnimationFrame(nextFrame);
-            nextFrame = requestAnimationFrame(onFrame);
-        };
-        const onPointerUp = () => {
-            gestureRef.current.isHeld = false;
-        };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        return () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-        };
-    }, [dispatch]);
-    return (_jsx("div", { "aria-hidden": true, className: styles.spanDetailPanelResizer, onDoubleClick: onDoubleClick, onPointerDown: onPointerDown }));
-}
-//# sourceMappingURL=span-detail-panel.js.map

package/dist/components/trace-viewer/components/span-detail-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"span-detail-panel.js","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/span-detail-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { clsx } from 'clsx';\nimport type { PointerEventHandler, ReactNode } from 'react';\nimport {\n  Fragment,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  initialState,\n  useCustomPanelComponent,\n  useTraceViewer,\n} from '../context';\nimport styles from '../trace-viewer.module.css';\nimport type {\n  GetQuickLinks,\n  QuickLinkValue,\n  RootNode,\n  Span,\n  SpanNode,\n  TraceNode,\n} from '../types';\nimport { formatDuration } from '../util/timing';\nimport { getSpanColorClassName } from './node';\nimport {\n  ButtonLink,\n  IconChevronDown,\n  IconCross,\n  IconExternalSmall,\n  Link,\n  Note,\n  Skeleton,\n} from './ui';\n\nconst percentage = (n: number): string => `${(100 * n).toFixed(3)}%`;\n\ninterface GroupedAttribute {\n  prefix: string;\n  attributes: Attribute[];\n}\n\ninterface Attribute {\n  suffix: string;\n  key: string;\n  value: string;\n}\n\nconst sortWord = (a: string, b: string): number => {\n  if (a < b) {\n    return -1;\n  } else if (a > b) {\n    return 1;\n  }\n  return 0;\n};\n\nconst getGroupedAttributes = (\n  attributes: Span['attributes']\n): GroupedAttribute[] => {\n  // Build groups of items with the same prefix\n  const groups: Record<string, GroupedAttribute> = {};\n  for (const [key, value] of Object.entries(attributes)) {\n    const dotIndex = key.indexOf('.');\n    let prefix = '';\n    let suffix = '';\n    if (dotIndex !== -1) {\n      prefix = key.substring(0, dotIndex);\n      suffix = key.substring(dotIndex + 1);\n    } else {\n      suffix = key;\n    }\n\n    let group = groups[prefix];\n    if (!group) {\n      group = {\n        prefix,\n        attributes: [],\n      };\n      groups[prefix] = group;\n    }\n    group.attributes.push({\n      key,\n      suffix,\n      value: String(value),\n    });\n  }\n\n  // List and sort everything\n  const result = Array.from(Object.values(groups)).sort((a, b) =>\n    sortWord(a.prefix, b.prefix)\n  );\n  for (const group of result) {\n    group.attributes.sort((a, b) => sortWord(a.suffix, b.suffix));\n  }\n  return result;\n};\n\n// biome-ignore lint/correctness/noUnusedFunctionParameters: ignored using `--suppress`\nconst getAncestors = (_root: RootNode, start: SpanNode | null): SpanNode[] => {\n  const result: SpanNode[] = [];\n\n  if (!start) return result;\n\n  for (let node: TraceNode = start; 'parent' in node; node = node.parent) {\n    result.unshift(node);\n  }\n\n  return result;\n};\n\nexport const SpanDetailPanelBody = () => {\n  const {\n    state: { root, selected, resourceMap, getQuickLinks },\n    dispatch,\n  } = useTraceViewer();\n\n  const ancestors = useMemo(\n    () => getAncestors(root, selected),\n    [root, selected]\n  );\n\n  const attributeGroups = useMemo(\n    () => getGroupedAttributes(selected?.span.attributes ?? {}),\n    [selected]\n  );\n\n  const resourceAttributeGroups = useMemo(() => {\n    const resourceName = selected?.span.resource;\n    if (!resourceName) return [];\n    const resourceAttributes = resourceMap[resourceName];\n    if (!resourceAttributes) return [];\n    return getGroupedAttributes(resourceAttributes);\n  }, [resourceMap, selected]);\n\n  if (!selected) return null;\n\n  const { span } = selected;\n\n  const isEntrySpan = detectIsEntrySpan(selected);\n\n  return (\n    <>\n      {selected.isVercel ? <InfraSpanDescription node={selected} /> : null}\n      {selected.isInstrumentationHint ? <InstrumentationHint /> : null}\n      {!selected.isInstrumentationHint && ancestors.length ? (\n        <DetailGroup className={styles.ancestorGroup} name=\"Location\">\n          {ancestors.map((node) => (\n            <button\n              className={styles.ancestorNode}\n              key={`${selected.span.spanId}.${node.span.spanId}`}\n              onClick={() =>\n                dispatch({\n                  type: 'select',\n                  id: node.span.spanId,\n                })\n              }\n              type=\"button\"\n            >\n              <div className={styles.ancestorText}>\n                <span className={styles.ancestorName}>\n                  {node.label || node.span.name}\n                </span>\n                <span className={styles.ancestorDuration}>\n                  {formatDuration(node.duration)}\n                </span>\n              </div>\n              <span aria-hidden className={styles.ancestorLineContainer}>\n                <span\n                  className={clsx(\n                    styles.ancestorLine,\n                    getSpanColorClassName(node)\n                  )}\n                  style={{\n                    left: percentage(\n                      (node.startTime - root.startTime) / root.duration\n                    ),\n                    width: percentage(node.duration / root.duration),\n                  }}\n                />\n              </span>\n            </button>\n          ))}\n        </DetailGroup>\n      ) : null}\n      {isEntrySpan ? (\n        <EntrySpanLinks getQuickLinks={getQuickLinks} span={selected.span} />\n      ) : null}\n      {selected.events?.length ? (\n        <DetailGroup name=\"Events\">\n          {selected.events.map((event) => (\n            <Fragment key={event.key}>\n              <dl className={styles.spanDetailPanelAttribute}>\n                <dt className={styles.spanDetailPanelAttributeKey}>\n                  {event.event.name}\n                </dt>\n                <dd className={styles.spanDetailPanelAttributeValue}>\n                  {formatDuration(event.timestamp - root.startTime)}\n                </dd>\n              </dl>\n              {Object.entries(event.event.attributes).map(([key, value]) => (\n                <DetailLine\n                  key={key}\n                  name={`${event.event.name}.${key}`}\n                  value={value}\n                />\n              ))}\n            </Fragment>\n          ))}\n        </DetailGroup>\n      ) : null}\n      {attributeGroups.length ? (\n        <DetailGroup name=\"Attributes\">\n          {attributeGroups.map((group) => (\n            <Fragment key={group.prefix}>\n              {group.attributes.map(({ key, value }) => (\n                <DetailLine key={key} name={key} value={value} />\n              ))}\n            </Fragment>\n          ))}\n        </DetailGroup>\n      ) : null}\n      {resourceAttributeGroups.length ? (\n        <DetailGroup name=\"Resource\">\n          {resourceAttributeGroups.map((group) => (\n            <Fragment key={group.prefix}>\n              {group.attributes.map(({ key, value }) => (\n                <DetailLine key={key} name={key} value={value} />\n              ))}\n            </Fragment>\n          ))}\n        </DetailGroup>\n      ) : null}\n      {selected.isInstrumentationHint ? null : (\n        <DetailGroup name=\"Library\">\n          <DetailLine name=\"name\" value={span.library.name} />\n          {span.library.version ? (\n            <DetailLine name=\"version\" value={span.library.version} />\n          ) : null}\n        </DetailGroup>\n      )}\n    </>\n  );\n};\n\nexport function SpanDetailPanel({\n  attached = false,\n}: {\n  attached?: boolean;\n}): ReactNode {\n  const {\n    state: { selected, isMobile },\n    dispatch,\n  } = useTraceViewer();\n  const customPanelComponent = useCustomPanelComponent();\n\n  if (!selected) return null;\n\n  const { span } = selected;\n\n  return (\n    <div className={clsx(styles.spanDetailPanel, isMobile && styles.mobile)}>\n      {attached && !isMobile ? <PanelResizer /> : null}\n      <div className={styles.spanDetailPanelTop}>\n        <div className={styles.spanDetailPanelTopInfo}>\n          {/* Name/ID first */}\n          <span className={styles.spanDetailPanelName} title={span.name}>\n            {span.name}\n          </span>\n          {/* Right side: duration badge, separator, close */}\n          <div className={styles.spanDetailPanelCorner}>\n            {selected.isInstrumentationHint ? null : (\n              <span className={styles.spanDetailPanelDuration}>\n                {formatDuration(selected.duration)}\n              </span>\n            )}\n            <div className={styles.spanDetailPanelCloseVerticalRule} />\n            <button\n              aria-label=\"Close Span Details\"\n              className={styles.spanDetailPanelClose}\n              onClick={() =>\n                dispatch({\n                  type: 'deselect',\n                })\n              }\n              type=\"button\"\n            >\n              <IconCross color=\"gray-700\" size={20} />\n            </button>\n          </div>\n        </div>\n      </div>\n      <div className={clsx('flex gap-3', styles.spanDetailPanelBody)}>\n        {customPanelComponent || <SpanDetailPanelBody />}\n      </div>\n    </div>\n  );\n}\n\nconst EXPANDED_STORAGE_KEY_PREFIX = 'vc-trace-span-exp:';\n\nfunction DetailGroup({\n  name,\n  className = '',\n  children,\n}: {\n  name: string;\n  className?: string;\n  children: ReactNode;\n}): ReactNode {\n  const [isExpanded, setIsExpanded] = useState(() => {\n    if (!('localStorage' in globalThis)) return true;\n    return (\n      localStorage.getItem(`${EXPANDED_STORAGE_KEY_PREFIX}${name}`) !== '0'\n    );\n  });\n\n  const toggleExpanded = useCallback(() => {\n    setIsExpanded((x) => {\n      const willBeExpanded = !x;\n      localStorage.setItem(\n        `${EXPANDED_STORAGE_KEY_PREFIX}${name}`,\n        String(Number(willBeExpanded))\n      );\n      return willBeExpanded;\n    });\n  }, [name]);\n\n  return (\n    <div\n      className={clsx(\n        styles.detailGroup,\n        isExpanded ? styles.expanded : styles.collapsed,\n        className\n      )}\n    >\n      <button\n        className={styles.detailHeading}\n        onClick={toggleExpanded}\n        type=\"button\"\n      >\n        <span>{name}</span>\n        <IconChevronDown />\n      </button>\n      {isExpanded ? children : null}\n    </div>\n  );\n}\n\nconst CommonHttpVerbs = new Set([\n  'OPTIONS',\n  'HEAD',\n  'GET',\n  'PUT',\n  'POST',\n  'DELETE',\n]);\nconst KnownSpans: Record<string, string> = {\n  'Resolve Deployment': `How long it took Vercel's routing layer to retrieve details for the deployment.`,\n  'Resolve Cache': `How long it took Vercel's routing layer to check for a cached function invocation.`,\n  'Resolve Route': `How long it took Vercel's routing layer to resolve routing rules, including redirects and rewrites.`,\n  'Invoke Middleware': `How long it took this middleware to start and run user code.`,\n  'Invoke Function': `How long it took this Vercel Function to start and run user code.`,\n  waitUntil: `How long it took to run user code inside of waitUntil.`,\n  'Start VM': `How long it took to start the Virtual Machine which contains the Vercel Function.`,\n  'Spawn Node.js': `How long it took the Virtual Machine to start the Node.js runtime.`,\n  'Spawn Python': `How long it took the Virtual Machine to start the Python runtime.`,\n  'Init User Code': `How long it took to import the user code and run any globally-scoped code.`,\n};\n\nconst ColdStartSpanNames = new Set([\n  'Start VM',\n  'Spawn Node.js',\n  'Spawn Python',\n  'Init User Code',\n]);\n\nconst getRegion = (\n  node: SpanNode | RootNode | null | undefined\n): string | null => {\n  if (!node || !('span' in node)) {\n    return null;\n  }\n\n  const attr = node.span.attributes;\n  const region = attr['vercel.region'] || attr['vercel.function.region'];\n  if (region) return String(region);\n  return null;\n};\n\nconst getNote = (node: SpanNode): ReactNode => {\n  const { name } = node.span;\n  const region = getRegion(node);\n  const parentRegion = getRegion(node.parent);\n\n  if (node.span.attributes['vercel.middleware.internal'] === 'true') {\n    return 'The Vercel Toolbar created this middleware.';\n  } else if (\n    ColdStartSpanNames.has(name) ||\n    (name === 'Invoke Function' &&\n      node.children.some((x) => ColdStartSpanNames.has(x.span.name)))\n  ) {\n    return 'This function encountered a cold start.';\n  } else if (region && parentRegion && region !== parentRegion) {\n    return 'This request was routed across regions.';\n  }\n\n  return null;\n};\n\nconst detectIsEntrySpan = (node: SpanNode): boolean => {\n  if (!node.isVercel) return false;\n  const { name } = node.span;\n  const spaceIndex = name.indexOf(' ');\n  if (spaceIndex === -1) return false;\n  const firstWord = name.substring(0, spaceIndex);\n  return CommonHttpVerbs.has(firstWord);\n};\n\nfunction InfraSpanDescription({ node }: { node: SpanNode }): ReactNode {\n  const { name } = node.span;\n  let description = KnownSpans[name];\n\n  if (!description && detectIsEntrySpan(node)) {\n    description = `How long it took for Vercel to process the request and send the response.`;\n  }\n\n  if (!description) return null;\n\n  const note = getNote(node);\n\n  return (\n    <DetailGroup name=\"What is this?\">\n      <div className={styles.infraSpanDescription}>\n        <span>{description}</span>\n        {note ? <Note>{note}</Note> : note}\n      </div>\n    </DetailGroup>\n  );\n}\n\nconst EntrySpanLinks = memo(function EntrySpanLinks({\n  getQuickLinks,\n  span,\n}: {\n  getQuickLinks: GetQuickLinks;\n  span: Span;\n}): ReactNode {\n  const links = getQuickLinks(span);\n\n  if (!links.length) return null;\n\n  return (\n    <DetailGroup name=\"Links\">\n      {links.map(({ key, value }) => (\n        <EntrySpanLink key={key} link={value} name={key} />\n      ))}\n    </DetailGroup>\n  );\n});\n\ninterface ResolvablePromise<T> extends Promise<T> {\n  __resolvedValue?: T;\n  __rejectedValue?: unknown;\n}\n\nfunction usePromise<T>(promise: ResolvablePromise<T>): T | undefined {\n  const [_, setLatest] = useState({});\n  const fulfilled =\n    promise.__resolvedValue !== undefined ||\n    promise.__rejectedValue !== undefined;\n  useEffect(() => {\n    if (fulfilled) return;\n\n    promise\n      .then((value) => {\n        promise.__resolvedValue = value;\n      })\n      .catch((err) => {\n        promise.__rejectedValue = err;\n      })\n      .finally(() => setLatest({}));\n  }, [promise, fulfilled]);\n\n  return promise.__resolvedValue;\n}\n\nfunction EntrySpanLink({\n  name,\n  link: linkPromise,\n}: {\n  name: string;\n  link: Promise<QuickLinkValue>;\n}): ReactNode {\n  const link = usePromise(linkPromise);\n\n  return (\n    <Link\n      as={link ? undefined : 'span'}\n      className={clsx(\n        styles.spanDetailPanelAttribute,\n        styles.spanDetailPanelQuickLink\n      )}\n      href={link?.href || ''}\n    >\n      <span className={styles.spanDetailPanelAttributeKey}>{name}</span>\n      <span\n        className={clsx(\n          styles.spanDetailPanelAttributeValue,\n          styles.spanDetailPanelQuickLinkLabel\n        )}\n      >\n        {link ? (\n          <>\n            {link.label}\n            {link.icon || <IconExternalSmall color=\"gray-900\" />}\n          </>\n        ) : (\n          <>\n            <Skeleton height={18} width={32 + name.length * 8} />\n            <Skeleton height={18} rounded width={18} />\n          </>\n        )}\n      </span>\n    </Link>\n  );\n}\n\nfunction InstrumentationHint(): ReactNode {\n  return (\n    <DetailGroup name=\"What is this?\">\n      <div className={styles.infraSpanDescription}>\n        <span>{`You can visualize your application's spans alongside Vercel's spans in this viewer.`}</span>\n        <ButtonLink\n          href=\"https://vercel.com/docs/session-tracing#adding-custom-spans\"\n          size=\"small\"\n          target=\"_blank\"\n        >\n          Get Started\n        </ButtonLink>\n      </div>\n    </DetailGroup>\n  );\n}\n\nfunction DetailLine({\n  name,\n  value,\n}: {\n  name: string;\n  value: unknown;\n}): ReactNode {\n  return (\n    <dl className={styles.spanDetailPanelAttribute}>\n      <dt className={styles.spanDetailPanelAttributeKey}>{name}</dt>\n      <dd\n        className={styles.spanDetailPanelAttributeValue}\n        title={String(value)}\n      >\n        {String(value)}\n      </dd>\n    </dl>\n  );\n}\n\ninterface ResizeGestureRef {\n  start: {\n    x: number;\n    width: number;\n  };\n  x: number;\n  width: number;\n  isHeld: boolean;\n}\n\n/**\n * Resizer component for the trace viewer panel.\n */\nexport function PanelResizer(): ReactNode {\n  const {\n    state: { panelWidth },\n    dispatch,\n  } = useTraceViewer();\n  const gestureRef = useRef<ResizeGestureRef>({\n    start: {\n      x: 0,\n      width: panelWidth,\n    },\n    x: 0,\n    width: panelWidth,\n    isHeld: false,\n  });\n  gestureRef.current.width = panelWidth;\n\n  const onPointerDown = useCallback<PointerEventHandler>((event) => {\n    if (event.pointerType !== 'mouse') return;\n    event.preventDefault();\n    const g = gestureRef.current;\n    g.start.x = event.clientX;\n    g.x = event.clientX;\n    g.start.width = g.width;\n    g.isHeld = true;\n  }, []);\n\n  const onDoubleClick = useCallback(() => {\n    dispatch({\n      type: 'setPanelWidth',\n      width: initialState.panelWidth,\n    });\n  }, [dispatch]);\n\n  useEffect(() => {\n    let nextFrame = 0;\n    const onFrame = (): void => {\n      const g = gestureRef.current;\n      const width = g.start.width + g.start.x - g.x;\n      dispatch({\n        type: 'setPanelWidth',\n        width,\n      });\n    };\n\n    const onPointerMove = (event: PointerEvent): void => {\n      if (!gestureRef.current.isHeld) return;\n      event.preventDefault();\n      gestureRef.current.x = event.clientX;\n      cancelAnimationFrame(nextFrame);\n      nextFrame = requestAnimationFrame(onFrame);\n    };\n    const onPointerUp = (): void => {\n      gestureRef.current.isHeld = false;\n    };\n\n    window.addEventListener('pointermove', onPointerMove);\n    window.addEventListener('pointerup', onPointerUp);\n\n    return () => {\n      window.removeEventListener('pointermove', onPointerMove);\n      window.removeEventListener('pointerup', onPointerUp);\n    };\n  }, [dispatch]);\n\n  return (\n    <div\n      aria-hidden\n      className={styles.spanDetailPanelResizer}\n      onDoubleClick={onDoubleClick}\n      onPointerDown={onPointerDown}\n    />\n  );\n}\n"]}

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

@@ -1,50 +0,0 @@
-import type { SpanNode } from '../types';
-import type { ResourceType } from './span-strategies';
-/**
- * Visual status of a segment within a span bar.
- *
- * - queued:     Waiting to start (hatched pattern)
- * - running:    Actively executing (solid blue)
- * - failed:     Attempt that ended in failure (soft red)
- * - retrying:   Waiting between retry attempts (hatched pattern)
- * - succeeded:  Final successful attempt (soft green)
- * - waiting:    Passive waiting, e.g. hook waiting for payload (hatched pattern)
- * - sleeping:   Sleep in progress (soft amber)
- * - received:   Hook received a payload (soft blue)
- */
-export type SegmentStatus = 'queued' | 'running' | 'failed' | 'retrying' | 'succeeded' | 'waiting' | 'sleeping' | 'received';
-export interface Segment {
-    /** Fraction of span width where this segment starts (0–1) */
-    startFraction: number;
-    /** Fraction of span width where this segment ends (0–1) */
-    endFraction: number;
-    /** Visual status controlling color/pattern */
-    status: SegmentStatus;
-}
-/**
- * A boundary between two segments, representing an event that caused
- * a transition. Rendered as a hoverable divider with a tooltip.
- */
-export interface SegmentBoundary {
-    /** Fractional position along the span (0–1) */
-    fraction: number;
-    /** Display label for the tooltip (e.g. "step_started") */
-    label: string;
-    /** Formatted timestamp relative to span start */
-    offsetMs: number;
-}
-/**
- * Maps a SegmentStatus to the CSS module class name to use.
- * These class names must exist in trace-viewer.module.css.
- */
-export declare const SEGMENT_CLASS_MAP: Record<SegmentStatus, string>;
-export interface SegmentResult {
-    segments: Segment[];
-    boundaries: SegmentBoundary[];
-}
-/**
- * Compute the event-based segments and boundaries for a span based on its resource type.
- * Returns empty arrays for 'default' (generic OTEL) spans.
- */
-export declare function computeSegments(resourceType: ResourceType, node: SpanNode): SegmentResult;
-//# sourceMappingURL=span-segments.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"span-segments.d.ts","sourceRoot":"","sources":["../../../../src/components/trace-viewer/components/span-segments.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAiB,MAAM,UAAU,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMtD;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,WAAW,OAAO;IACtB,6DAA6D;IAC7D,aAAa,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,8CAA8C;IAC9C,MAAM,EAAE,aAAa,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAS3D,CAAC;AA8ZF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AA0DD;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,QAAQ,GACb,aAAa,CAkCf"}