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

package/dist/components/workflow-trace-view.js

@@ -1,695 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import { ChevronDown, ChevronUp, Clock, Copy, Info, Send, Type, X, XCircle, } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useToast } from '../lib/toast';
-import { buildTrace } from '../lib/trace-builder';
-import { ErrorBoundary } from './error-boundary';
-import { EntityDetailPanel, } from './sidebar/entity-detail-panel';
-import { ResolveHookModal } from './sidebar/resolve-hook-modal';
-import { TraceViewerContextProvider, TraceViewerTimeline, useTraceViewer, } from './trace-viewer';
-import { Skeleton } from './ui/skeleton';
-import { Spinner } from './ui/spinner';
-import { getCustomSpanClassName, getCustomSpanEventClassName, } from './workflow-traces/trace-colors';
-/**
- * While a run is live, continuously grow root.duration and rescale so the
- * trace always fits within the viewport. Individual span widths are grown
- * by each SpanComponent's own useEffect (see node.tsx).
- */
-function useLiveTick(isLive) {
-    const { state, dispatch } = useTraceViewer();
-    const stateRef = useRef(state);
-    stateRef.current = state;
-    useEffect(() => {
-        if (!isLive)
-            return;
-        // Grow root.duration on every frame so span rAFs see the latest time
-        let rafId = 0;
-        const tick = () => {
-            const { root } = stateRef.current;
-            if (root.startTime) {
-                const nowMs = Date.now();
-                if (nowMs > root.endTime) {
-                    root.endTime = nowMs;
-                    root.duration = root.endTime - root.startTime;
-                }
-            }
-            rafId = requestAnimationFrame(tick);
-        };
-        rafId = requestAnimationFrame(tick);
-        // Re-scale smoothly so the trace fits the viewport as it grows.
-        // We dispatch detectBaseScale only when the computed baseScale has
-        // changed enough to matter visually (>0.1% shift), avoiding
-        // unnecessary React re-renders while keeping things smooth.
-        let scaleRafId = 0;
-        let lastBaseScale = 0;
-        const scaleTick = () => {
-            const s = stateRef.current;
-            if (s.root.duration > 0) {
-                const newBaseScale = (s.width - s.scrollbarWidth) / s.root.duration;
-                const delta = Math.abs(newBaseScale - lastBaseScale);
-                if (delta > lastBaseScale * 0.001 || lastBaseScale === 0) {
-                    lastBaseScale = newBaseScale;
-                    dispatch({ type: 'detectBaseScale' });
-                }
-            }
-            scaleRafId = requestAnimationFrame(scaleTick);
-        };
-        scaleRafId = requestAnimationFrame(scaleTick);
-        return () => {
-            cancelAnimationFrame(rafId);
-            cancelAnimationFrame(scaleRafId);
-        };
-    }, [isLive, dispatch]);
-}
-const DEFAULT_PANEL_WIDTH = 450;
-const MIN_PANEL_WIDTH = 240;
-function SpanContextMenu({ menu, items, onClose, }) {
-    const menuRef = useRef(null);
-    // Close on outside click
-    useEffect(() => {
-        const handleClick = (e) => {
-            if (menuRef.current && !menuRef.current.contains(e.target)) {
-                onClose();
-            }
-        };
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
-        const handleScroll = () => {
-            onClose();
-        };
-        // Use a timeout so we don't close immediately from the same event
-        const timeout = setTimeout(() => {
-            window.addEventListener('mousedown', handleClick);
-            window.addEventListener('keydown', handleKeyDown);
-            window.addEventListener('scroll', handleScroll, true);
-        }, 0);
-        return () => {
-            clearTimeout(timeout);
-            window.removeEventListener('mousedown', handleClick);
-            window.removeEventListener('keydown', handleKeyDown);
-            window.removeEventListener('scroll', handleScroll, true);
-        };
-    }, [onClose]);
-    // Adjust position if menu would overflow viewport
-    const [adjustedPos, setAdjustedPos] = useState({ x: menu.x, y: menu.y });
-    useEffect(() => {
-        const el = menuRef.current;
-        if (!el)
-            return;
-        const rect = el.getBoundingClientRect();
-        let { x, y } = menu;
-        if (rect.right > window.innerWidth) {
-            x = window.innerWidth - rect.width - 8;
-        }
-        if (rect.bottom > window.innerHeight) {
-            y = window.innerHeight - rect.height - 8;
-        }
-        if (x !== menu.x || y !== menu.y) {
-            setAdjustedPos({ x, y });
-        }
-    }, [menu]);
-    if (items.length === 0)
-        return null;
-    return createPortal(_jsxs("div", { ref: menuRef, style: {
-            position: 'fixed',
-            left: adjustedPos.x,
-            top: adjustedPos.y,
-            zIndex: 99999,
-            boxShadow: 'var(--ds-shadow-menu)',
-            borderRadius: 12,
-            background: 'var(--ds-background-100)',
-            padding: 'var(--geist-space-gap-quarter, 4px)',
-            fontSize: 14,
-            minWidth: 180,
-            overflowX: 'hidden',
-            overflowY: 'auto',
-        }, children: [_jsx("div", { style: {
-                    display: 'block',
-                    color: 'var(--ds-gray-900)',
-                    fontSize: '0.75rem',
-                    padding: 'var(--geist-gap-quarter, 4px) var(--geist-space-2x, 8px)',
-                    fontWeight: 500,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    maxWidth: 240,
-                    borderBottom: '1px solid var(--ds-gray-alpha-400)',
-                    marginBottom: 4,
-                }, children: menu.spanName }), items.map((item) => (_jsxs("button", { type: "button", style: {
-                    outline: 'none',
-                    cursor: item.disabled ? 'not-allowed' : 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 8,
-                    padding: '0 var(--geist-space-2x, 8px)',
-                    height: 40,
-                    textDecoration: 'none',
-                    borderRadius: 6,
-                    color: item.destructive
-                        ? 'var(--ds-red-900)'
-                        : 'var(--ds-gray-1000)',
-                    width: '100%',
-                    background: 'transparent',
-                    border: 'none',
-                    fontSize: 14,
-                    textAlign: 'left',
-                    opacity: item.disabled ? 0.4 : 1,
-                    transition: 'background 0.15s',
-                }, disabled: item.disabled, onMouseEnter: (e) => {
-                    e.currentTarget.style.background =
-                        'var(--ds-gray-alpha-100)';
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.background =
-                        'transparent';
-                }, onClick: () => {
-                    item.action();
-                    onClose();
-                }, children: [item.icon ?? null, item.label] }, item.label)))] }), document.body);
-}
-/** Inner wrapper that has access to the TraceViewer context */
-function TraceViewerWithContextMenu({ trace, run, isLive, onWakeUpSleep, onCancelRun, onResolveHook, onLoadMoreSpans, hasMoreSpans = false, isLoadingMoreSpans = false, children, }) {
-    const toast = useToast();
-    const { state, dispatch } = useTraceViewer();
-    // Drive active span widths at 60fps without React re-renders
-    useLiveTick(isLive);
-    const [contextMenu, setContextMenu] = useState(null);
-    const [resolveHookTarget, setResolveHookTarget] = useState(null);
-    const [resolvingHook, setResolvingHook] = useState(false);
-    // Track hooks resolved in this session so the context menu item hides immediately
-    const [resolvedHookIds, setResolvedHookIds] = useState(new Set());
-    // Build a lookup map: spanId -> span
-    const spanLookup = useMemo(() => {
-        const map = new Map();
-        for (const span of trace.spans) {
-            map.set(span.spanId, span);
-        }
-        return map;
-    }, [trace.spans]);
-    const handleResolveHook = useCallback(async (payload) => {
-        if (resolvingHook || !resolveHookTarget || !onResolveHook)
-            return;
-        if (!resolveHookTarget.token) {
-            toast.error('Unable to resolve hook', {
-                description: 'Missing hook token. Try refreshing the run data and retry.',
-            });
-            return;
-        }
-        try {
-            setResolvingHook(true);
-            await onResolveHook(resolveHookTarget.token, payload);
-            toast.success('Hook resolved', {
-                description: 'The payload has been sent and the hook resolved.',
-            });
-            // Mark this hook as resolved locally so the menu item hides immediately
-            setResolvedHookIds((prev) => new Set(prev).add(resolveHookTarget.hookId));
-            setResolveHookTarget(null);
-        }
-        catch (err) {
-            console.error('Failed to resolve hook:', err);
-            toast.error('Failed to resolve hook', {
-                description: err instanceof Error ? err.message : 'An unknown error occurred',
-            });
-        }
-        finally {
-            setResolvingHook(false);
-        }
-    }, [onResolveHook, resolveHookTarget, resolvingHook]);
-    const handleContextMenu = useCallback((e) => {
-        const target = e.target;
-        const $button = target.closest('[data-span-id]');
-        if (!$button)
-            return;
-        const spanId = $button.dataset.spanId;
-        if (!spanId)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const span = spanLookup.get(spanId);
-        if (!span)
-            return;
-        const resourceType = span.attributes.resource ?? 'unknown';
-        const spanData = span.attributes.data;
-        const isActive = !spanData?.completedAt && !spanData?.disposedAt;
-        setContextMenu({
-            x: e.clientX,
-            y: e.clientY,
-            spanId,
-            spanName: span.name,
-            resourceType,
-            isActive,
-        });
-    }, [spanLookup]);
-    const containerRef = useRef(null);
-    useEffect(() => {
-        const $container = containerRef.current;
-        if (!$container)
-            return;
-        const onContextMenu = (event) => {
-            handleContextMenu(event);
-        };
-        $container.addEventListener('contextmenu', onContextMenu);
-        return () => {
-            $container.removeEventListener('contextmenu', onContextMenu);
-        };
-    }, [handleContextMenu]);
-    const loadingMoreRef = useRef(false);
-    useEffect(() => {
-        const timeline = state.timelineRef.current;
-        if (!timeline || !onLoadMoreSpans || !hasMoreSpans) {
-            return;
-        }
-        const thresholdPx = 200;
-        const maybeLoadMore = () => {
-            if (loadingMoreRef.current || isLoadingMoreSpans || !hasMoreSpans) {
-                return;
-            }
-            const remaining = timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight;
-            if (remaining > thresholdPx) {
-                return;
-            }
-            loadingMoreRef.current = true;
-            Promise.resolve(onLoadMoreSpans()).finally(() => {
-                loadingMoreRef.current = false;
-            });
-        };
-        timeline.addEventListener('scroll', maybeLoadMore);
-        maybeLoadMore();
-        return () => {
-            timeline.removeEventListener('scroll', maybeLoadMore);
-        };
-    }, [state.timelineRef, onLoadMoreSpans, hasMoreSpans, isLoadingMoreSpans]);
-    const closeMenu = useCallback(() => {
-        setContextMenu(null);
-    }, []);
-    const getMenuItems = useCallback((menu) => {
-        const items = [];
-        // Sleep-specific: Wake Up (only on active runs)
-        const isRunActive = !run.completedAt;
-        if (menu.resourceType === 'sleep' &&
-            menu.isActive &&
-            isRunActive &&
-            onWakeUpSleep) {
-            items.push({
-                label: 'Wake Up Sleep',
-                icon: _jsx(Clock, { className: "h-3.5 w-3.5" }),
-                action: () => {
-                    onWakeUpSleep(run.runId, menu.spanId)
-                        .then((result) => {
-                        if (result.stoppedCount > 0) {
-                            toast.success('Sleep woken up', {
-                                description: `Woke up ${String(result.stoppedCount)} sleep${result.stoppedCount > 1 ? 's' : ''}`,
-                            });
-                        }
-                        else {
-                            toast.info('No active sleeps found', {
-                                description: 'The sleep may have already completed.',
-                            });
-                        }
-                    })
-                        .catch((err) => {
-                        toast.error('Failed to wake up sleep', {
-                            description: err instanceof Error
-                                ? err.message
-                                : 'An unknown error occurred',
-                        });
-                    });
-                },
-            });
-        }
-        // Hook-specific: Resolve Hook (only on active, unresolved hooks)
-        if (menu.resourceType === 'hook' && isRunActive && onResolveHook) {
-            const span = spanLookup.get(menu.spanId);
-            const hookData = span?.attributes?.data;
-            // Check data-level disposedAt, span events, AND local resolved state
-            const isDisposed = Boolean(hookData?.disposedAt) ||
-                Boolean(span?.events?.some((e) => e.name === 'hook_disposed')) ||
-                resolvedHookIds.has(menu.spanId);
-            if (hookData?.token && !isDisposed) {
-                items.push({
-                    label: 'Resolve Hook',
-                    icon: _jsx(Send, { className: "h-3.5 w-3.5" }),
-                    action: () => {
-                        setResolveHookTarget({
-                            hookId: menu.spanId,
-                            token: hookData.token,
-                        });
-                    },
-                });
-            }
-        }
-        // Run-specific: Cancel (only on active runs)
-        if (menu.resourceType === 'run' && isRunActive && onCancelRun) {
-            items.push({
-                label: 'Cancel Run',
-                icon: _jsx(XCircle, { className: "h-3.5 w-3.5" }),
-                destructive: true,
-                action: () => {
-                    onCancelRun(run.runId).catch((err) => {
-                        toast.error('Failed to cancel run', {
-                            description: err instanceof Error
-                                ? err.message
-                                : 'An unknown error occurred',
-                        });
-                    });
-                },
-            });
-        }
-        // Common actions
-        items.push({
-            label: 'View Details',
-            icon: _jsx(Info, { className: "h-3.5 w-3.5" }),
-            action: () => {
-                dispatch({ type: 'select', id: menu.spanId });
-            },
-        });
-        items.push({
-            label: 'Copy Name',
-            icon: _jsx(Type, { className: "h-3.5 w-3.5" }),
-            action: () => {
-                navigator.clipboard
-                    .writeText(menu.spanName)
-                    .then(() => {
-                    toast.success('Name copied to clipboard');
-                })
-                    .catch(() => {
-                    toast.error('Failed to copy name');
-                });
-            },
-        });
-        items.push({
-            label: 'Copy ID',
-            icon: _jsx(Copy, { className: "h-3.5 w-3.5" }),
-            action: () => {
-                navigator.clipboard
-                    .writeText(menu.spanId)
-                    .then(() => {
-                    toast.success('ID copied to clipboard');
-                })
-                    .catch(() => {
-                    toast.error('Failed to copy ID');
-                });
-            },
-        });
-        return items;
-    }, [
-        dispatch,
-        onWakeUpSleep,
-        onCancelRun,
-        onResolveHook,
-        spanLookup,
-        resolvedHookIds,
-        run.runId,
-        run.completedAt,
-    ]);
-    return (_jsxs("div", { className: "relative w-full h-full", ref: containerRef, children: [children, contextMenu ? (_jsx(SpanContextMenu, { menu: contextMenu, items: getMenuItems(contextMenu), onClose: closeMenu })) : null, _jsx(ResolveHookModal, { isOpen: resolveHookTarget !== null, onClose: () => setResolveHookTarget(null), onSubmit: handleResolveHook, isSubmitting: resolvingHook })] }));
-}
-// ---------------------------------------------------------------------------
-// Bridge: reads selected span from trace viewer context and notifies parent
-// ---------------------------------------------------------------------------
-/**
- * Bridge component that lives INSIDE the TraceViewerContextProvider and
- * reads the selected span info, passing it up to the parent via callback.
- * This allows the parent to render the detail panel OUTSIDE the context.
- */
-function SelectionBridge({ onSelectionChange, }) {
-    const { state } = useTraceViewer();
-    const { selected } = state;
-    const onSelectionChangeRef = useRef(onSelectionChange);
-    onSelectionChangeRef.current = onSelectionChange;
-    const prevSpanIdRef = useRef(undefined);
-    useEffect(() => {
-        const currentSpanId = selected?.span.spanId;
-        if (currentSpanId === prevSpanIdRef.current)
-            return;
-        prevSpanIdRef.current = currentSpanId;
-        if (selected) {
-            onSelectionChangeRef.current({
-                data: selected.span.attributes?.data,
-                resource: selected.span.attributes?.resource,
-                spanId: selected.span.spanId,
-            });
-        }
-        else {
-            onSelectionChangeRef.current(null);
-        }
-    }, [selected]);
-    return null;
-}
-/**
- * Bridge component to deselect from outside the context.
- */
-function DeselectBridge({ triggerDeselect }) {
-    const { dispatch } = useTraceViewer();
-    useEffect(() => {
-        if (triggerDeselect > 0) {
-            dispatch({ type: 'deselect' });
-        }
-    }, [triggerDeselect, dispatch]);
-    return null;
-}
-/**
- * Bridge component to select a span from outside the context.
- */
-function SelectBridge({ selectRequest, }) {
-    const { dispatch } = useTraceViewer();
-    useEffect(() => {
-        if (selectRequest?.id) {
-            dispatch({ type: 'select', id: selectRequest.id });
-        }
-    }, [dispatch, selectRequest]);
-    return null;
-}
-// ---------------------------------------------------------------------------
-// Panel chrome (header with name/duration, close button)
-// ---------------------------------------------------------------------------
-function PanelResizeHandle({ onResize, }) {
-    const handlePointerDown = useCallback((e) => {
-        e.preventDefault();
-        let lastX = e.clientX;
-        const onPointerMove = (moveEvent) => {
-            const deltaX = lastX - moveEvent.clientX;
-            lastX = moveEvent.clientX;
-            onResize(deltaX);
-        };
-        const onPointerUp = () => {
-            document.removeEventListener('pointermove', onPointerMove);
-            document.removeEventListener('pointerup', onPointerUp);
-        };
-        document.addEventListener('pointermove', onPointerMove);
-        document.addEventListener('pointerup', onPointerUp);
-    }, [onResize]);
-    return (_jsx("div", { className: "absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-blue-400/50 z-10", onPointerDown: handlePointerDown }));
-}
-// ---------------------------------------------------------------------------
-// Trace viewer footer — loading / waiting indicator
-// ---------------------------------------------------------------------------
-function TraceViewerFooter({ hasMore, isLive, isInitialLoading, }) {
-    const style = { color: 'var(--ds-gray-900)' };
-    if (hasMore || isInitialLoading) {
-        return (_jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-xs", style: style, children: [_jsx(Spinner, { size: 14 }), "Loading more events\u2026"] }));
-    }
-    if (isLive) {
-        return (_jsx("div", { className: "flex items-center justify-center py-3 text-xs", style: style, children: "Waiting for more events\u2026" }));
-    }
-    return (_jsx("div", { className: "flex items-center justify-center py-3 text-xs", style: style, children: "End of run" }));
-}
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
-export const WorkflowTraceViewer = ({ run, events, isLoading, error, spanDetailData, spanDetailLoading, spanDetailError, onWakeUpSleep, onResolveHook, onCancelRun, onStreamClick, onRunClick, onSpanSelect, onLoadEventData, onLoadMoreSpans, hasMoreSpans = false, isLoadingMoreSpans = false, encryptionKey, onDecrypt, isDecrypting = false, }) => {
-    const toast = useToast();
-    const [selectedSpan, setSelectedSpan] = useState(null);
-    const [panelWidth, setPanelWidth] = useState(DEFAULT_PANEL_WIDTH);
-    const [deselectTrigger, setDeselectTrigger] = useState(0);
-    const [selectRequest, setSelectRequest] = useState(null);
-    const isLive = Boolean(run && !run.completedAt);
-    // Build trace only when actual data changes — no timer-driven rebuilds.
-    // Active span widths are animated imperatively by useLiveTick at 60fps.
-    const traceWithMeta = useMemo(() => {
-        if (!run?.runId) {
-            return undefined;
-        }
-        return buildTrace(run, events, new Date());
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
-    }, [run, events]);
-    const trace = traceWithMeta;
-    useEffect(() => {
-        if (error && !isLoading) {
-            console.error(error);
-            toast.error('Error loading workflow trace data', {
-                description: error.message,
-            });
-        }
-    }, [error, isLoading]);
-    const handleSpanSelect = useCallback((info) => {
-        onSpanSelect?.(info);
-    }, [onSpanSelect]);
-    const handleSelectionChange = useCallback((info) => {
-        if (info) {
-            // Filter raw events by the selected span's correlationId (stepId/hookId)
-            // This bypasses the trace worker pipeline entirely.
-            const correlationId = info.spanId;
-            const rawEvents = correlationId
-                ? events.filter((e) => e.correlationId === correlationId)
-                : [];
-            setSelectedSpan({ ...info, rawEvents });
-        }
-        else {
-            setSelectedSpan(null);
-        }
-    }, [events]);
-    // Keep selected span raw events live as polling updates arrive.
-    useEffect(() => {
-        const correlationId = selectedSpan?.spanId;
-        if (!correlationId)
-            return;
-        const nextRawEvents = events.filter((e) => e.correlationId === correlationId);
-        setSelectedSpan((prev) => {
-            if (!prev || prev.spanId !== correlationId) {
-                return prev;
-            }
-            const prevRawEvents = prev.rawEvents ?? [];
-            const isSame = prevRawEvents.length === nextRawEvents.length &&
-                prevRawEvents.every((event, index) => event.eventId === nextRawEvents[index]?.eventId);
-            if (isSame) {
-                return prev;
-            }
-            return {
-                ...prev,
-                rawEvents: nextRawEvents,
-            };
-        });
-    }, [events, selectedSpan?.spanId]);
-    // Reset selected span when navigating to a different run
-    useEffect(() => {
-        setSelectedSpan(null);
-        setDeselectTrigger((n) => n + 1);
-    }, [run?.runId]);
-    const handleClose = useCallback(() => {
-        setSelectedSpan(null);
-        setDeselectTrigger((n) => n + 1);
-    }, []);
-    const handleResize = useCallback((deltaX) => {
-        setPanelWidth((w) => Math.max(MIN_PANEL_WIDTH, w + deltaX));
-    }, []);
-    const selectedSpanIndex = useMemo(() => {
-        if (!selectedSpan?.spanId || !trace)
-            return -1;
-        return trace.spans.findIndex((span) => span.spanId === selectedSpan.spanId);
-    }, [selectedSpan?.spanId, trace]);
-    const canSelectPrevSpan = selectedSpanIndex > 0;
-    const canSelectNextSpan = selectedSpanIndex >= 0 &&
-        trace != null &&
-        selectedSpanIndex < trace.spans.length - 1;
-    const handleSelectPrevSpan = useCallback(() => {
-        if (!trace || selectedSpanIndex <= 0)
-            return;
-        const targetId = trace.spans[selectedSpanIndex - 1]?.spanId;
-        if (!targetId)
-            return;
-        setSelectRequest({ id: targetId, token: Date.now() });
-    }, [selectedSpanIndex, trace]);
-    const handleSelectNextSpan = useCallback(() => {
-        if (!trace || selectedSpanIndex < 0)
-            return;
-        const targetId = trace.spans[selectedSpanIndex + 1]?.spanId;
-        if (!targetId)
-            return;
-        setSelectRequest({ id: targetId, token: Date.now() });
-    }, [selectedSpanIndex, trace]);
-    // Get the selected span name for the panel header
-    const selectedSpanName = useMemo(() => {
-        if (!selectedSpan?.data)
-            return undefined;
-        const data = selectedSpan.data;
-        const stepName = data.stepName;
-        const workflowName = data.workflowName;
-        return ((stepName ? parseStepName(stepName)?.shortName : undefined) ??
-            (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
-            stepName ??
-            workflowName ??
-            data.hookId ??
-            'Details');
-    }, [selectedSpan?.data]);
-    if (!trace) {
-        return (_jsxs("div", { className: "relative w-full h-full", children: [_jsx("div", { className: "border-b border-gray-alpha-400 w-full" }), _jsx(Skeleton, { className: "w-full ml-2 mt-1 mb-1 h-[56px]" }), _jsxs("div", { className: "p-2 relative w-full", children: [_jsx(Skeleton, { className: "w-full mt-6 h-[20px]" }), _jsx(Skeleton, { className: "w-[10%] mt-2 ml-6 h-[20px]" }), _jsx(Skeleton, { className: "w-[10%] mt-2 ml-12 h-[20px]" }), _jsx(Skeleton, { className: "w-[20%] mt-2 ml-16 h-[20px]" })] })] }));
-    }
-    return (_jsxs("div", { className: "relative w-full h-full flex flex-col", children: [_jsx("div", { className: "flex-1 min-w-0 relative", children: _jsxs(TraceViewerContextProvider, { customSpanClassNameFunc: getCustomSpanClassName, customSpanEventClassNameFunc: getCustomSpanEventClassName, children: [_jsx(SelectionBridge, { onSelectionChange: handleSelectionChange }), _jsx(DeselectBridge, { triggerDeselect: deselectTrigger }), _jsx(SelectBridge, { selectRequest: selectRequest }), _jsx(TraceViewerWithContextMenu, { trace: trace, run: run, isLive: isLive, onWakeUpSleep: onWakeUpSleep, onCancelRun: onCancelRun, onResolveHook: onResolveHook, onLoadMoreSpans: onLoadMoreSpans, hasMoreSpans: hasMoreSpans, isLoadingMoreSpans: isLoadingMoreSpans, children: _jsx(TraceViewerTimeline, { eagerRender: true, height: "100%", isLive: isLive, trace: trace, knownDurationMs: traceWithMeta?.knownDurationMs, hasMoreData: hasMoreSpans || Boolean(isLoading), footer: _jsx(TraceViewerFooter, { hasMore: hasMoreSpans, isLive: isLive, isInitialLoading: Boolean(isLoading) }) }) })] }) }), selectedSpan && (_jsxs("div", { className: "relative border-l flex-shrink-0 flex flex-col", style: {
-                    width: panelWidth,
-                    borderColor: 'var(--ds-gray-200)',
-                    backgroundColor: 'var(--ds-background-100)',
-                }, children: [_jsx(PanelResizeHandle, { onResize: handleResize }), _jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-y flex-shrink-0", style: { borderColor: 'var(--ds-gray-200)' }, children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx("div", { className: "text-sm font-medium truncate", style: { color: 'var(--ds-gray-1000)' }, title: selectedSpanName, children: selectedSpanName }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("button", { type: "button", "aria-label": "Previous span", onClick: handleSelectPrevSpan, disabled: !canSelectPrevSpan, style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            marginLeft: 6,
-                                            width: 24,
-                                            height: 24,
-                                            padding: 0,
-                                            borderRadius: 6,
-                                            border: 'none',
-                                            background: 'transparent',
-                                            color: 'var(--ds-gray-700)',
-                                            cursor: canSelectPrevSpan ? 'pointer' : 'not-allowed',
-                                            opacity: canSelectPrevSpan ? 1 : 0.45,
-                                            flexShrink: 0,
-                                            transition: 'background 0.15s',
-                                        }, onMouseEnter: (e) => {
-                                            if (!canSelectPrevSpan)
-                                                return;
-                                            e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                                        }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.background = 'transparent';
-                                        }, children: _jsx(ChevronUp, { size: 16 }) }), _jsx("button", { type: "button", "aria-label": "Next span", onClick: handleSelectNextSpan, disabled: !canSelectNextSpan, style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            marginLeft: 2,
-                                            width: 24,
-                                            height: 24,
-                                            padding: 0,
-                                            borderRadius: 6,
-                                            border: 'none',
-                                            background: 'transparent',
-                                            color: 'var(--ds-gray-700)',
-                                            cursor: canSelectNextSpan ? 'pointer' : 'not-allowed',
-                                            opacity: canSelectNextSpan ? 1 : 0.45,
-                                            flexShrink: 0,
-                                            transition: 'background 0.15s',
-                                        }, onMouseEnter: (e) => {
-                                            if (!canSelectNextSpan)
-                                                return;
-                                            e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                                        }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.background = 'transparent';
-                                        }, children: _jsx(ChevronDown, { size: 16 }) })] }), _jsx("div", { className: "flex items-center", style: {
-                                    borderLeft: '1px solid var(--ds-gray-300)',
-                                    marginLeft: 6,
-                                }, children: _jsx("button", { type: "button", "aria-label": "Close panel", onClick: handleClose, style: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        marginLeft: 6,
-                                        width: 24,
-                                        height: 24,
-                                        padding: 0,
-                                        borderRadius: 6,
-                                        border: 'none',
-                                        background: 'transparent',
-                                        color: 'var(--ds-gray-700)',
-                                        cursor: 'pointer',
-                                        flexShrink: 0,
-                                        transition: 'background 0.15s',
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.background = 'transparent';
-                                    }, children: _jsx(X, { size: 16 }) }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx(ErrorBoundary, { title: "Failed to load entity details", children: _jsx(EntityDetailPanel, { run: run, onStreamClick: onStreamClick, onRunClick: onRunClick, spanDetailData: spanDetailData ?? null, spanDetailError: spanDetailError, spanDetailLoading: spanDetailLoading, onSpanSelect: handleSpanSelect, onWakeUpSleep: onWakeUpSleep, onLoadEventData: onLoadEventData, onResolveHook: onResolveHook, encryptionKey: encryptionKey, onDecrypt: onDecrypt, isDecrypting: isDecrypting, selectedSpan: selectedSpan }) }) })] }))] }));
-};
-//# sourceMappingURL=workflow-trace-view.js.map