@workflow/web-shared 5.0.0-beta.2 → 5.0.0-beta.3

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export type { HookActionCallbacks, HookActionsDropdownItemProps, HookResolveModa
 export { HookResolveModalWrapper, ResolveHookDropdownItem, ResolveHookModal, useHookActions, } from './hook-actions';
 export { RunTraceView } from './run-trace-view';
 export { ConversationView } from './sidebar/conversation-view';
+export { SidebarDataProvider, type SidebarDataContextValue, } from './sidebar/sidebar-data-context';
 export type { SelectedSpanInfo, SpanSelectionInfo, } from './sidebar/entity-detail-panel';
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export type { Span, SpanEvent } from './trace-viewer/types';
@@ -13,4 +14,5 @@ export { LoadMoreButton } from './ui/load-more-button';
 export { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';
 export { Spinner } from './ui/spinner';
 export { WorkflowTraceViewer } from './workflow-trace-view';
+export { NewTraceViewer } from './trace-viewer-new';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,KAAK,WAAW,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACjE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,YAAY,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EACL,mBAAmB,EACnB,KAAK,uBAAuB,GAC7B,MAAM,gCAAgC,CAAC;AACxC,YAAY,EACV,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,KAAK,WAAW,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACjE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/index.js

@@ -3,6 +3,7 @@ export { EventListView } from './event-list-view';
 export { HookResolveModalWrapper, ResolveHookDropdownItem, ResolveHookModal, useHookActions, } from './hook-actions';
 export { RunTraceView } from './run-trace-view';
 export { ConversationView } from './sidebar/conversation-view';
+export { SidebarDataProvider, } from './sidebar/sidebar-data-context';
 export { StreamViewer } from './stream-viewer';
 export { DataInspector, DecryptClickContext, } from './ui/data-inspector';
 export { DecryptButton } from './ui/decrypt-button';
@@ -10,4 +11,5 @@ export { LoadMoreButton } from './ui/load-more-button';
 export { MenuDropdown } from './ui/menu-dropdown';
 export { Spinner } from './ui/spinner';
 export { WorkflowTraceViewer } from './workflow-trace-view';
+export { NewTraceViewer } from './trace-viewer-new';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQlD,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAK/D,OAAO,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,EACL,aAAa,EAEb,mBAAmB,GAEpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { ErrorBoundary } from './error-boundary';\nexport { EventListView } from './event-list-view';\nexport type {\n  HookActionCallbacks,\n  HookActionsDropdownItemProps,\n  HookResolveModalProps,\n  UseHookActionsOptions,\n  UseHookActionsReturn,\n} from './hook-actions';\nexport {\n  HookResolveModalWrapper,\n  ResolveHookDropdownItem,\n  ResolveHookModal,\n  useHookActions,\n} from './hook-actions';\nexport { RunTraceView } from './run-trace-view';\nexport { ConversationView } from './sidebar/conversation-view';\nexport type {\n  SelectedSpanInfo,\n  SpanSelectionInfo,\n} from './sidebar/entity-detail-panel';\nexport { type StreamChunk, StreamViewer } from './stream-viewer';\nexport type { Span, SpanEvent } from './trace-viewer/types';\nexport {\n  DataInspector,\n  type DataInspectorProps,\n  DecryptClickContext,\n  type DecryptClickContextValue,\n} from './ui/data-inspector';\nexport { DecryptButton } from './ui/decrypt-button';\nexport { LoadMoreButton } from './ui/load-more-button';\nexport { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';\nexport { Spinner } from './ui/spinner';\nexport { WorkflowTraceViewer } from './workflow-trace-view';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQlD,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EACL,mBAAmB,GAEpB,MAAM,gCAAgC,CAAC;AAKxC,OAAO,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,EACL,aAAa,EAEb,mBAAmB,GAEpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,YAAY,EAA2B,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { ErrorBoundary } from './error-boundary';\nexport { EventListView } from './event-list-view';\nexport type {\n  HookActionCallbacks,\n  HookActionsDropdownItemProps,\n  HookResolveModalProps,\n  UseHookActionsOptions,\n  UseHookActionsReturn,\n} from './hook-actions';\nexport {\n  HookResolveModalWrapper,\n  ResolveHookDropdownItem,\n  ResolveHookModal,\n  useHookActions,\n} from './hook-actions';\nexport { RunTraceView } from './run-trace-view';\nexport { ConversationView } from './sidebar/conversation-view';\nexport {\n  SidebarDataProvider,\n  type SidebarDataContextValue,\n} from './sidebar/sidebar-data-context';\nexport type {\n  SelectedSpanInfo,\n  SpanSelectionInfo,\n} from './sidebar/entity-detail-panel';\nexport { type StreamChunk, StreamViewer } from './stream-viewer';\nexport type { Span, SpanEvent } from './trace-viewer/types';\nexport {\n  DataInspector,\n  type DataInspectorProps,\n  DecryptClickContext,\n  type DecryptClickContextValue,\n} from './ui/data-inspector';\nexport { DecryptButton } from './ui/decrypt-button';\nexport { LoadMoreButton } from './ui/load-more-button';\nexport { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';\nexport { Spinner } from './ui/spinner';\nexport { WorkflowTraceViewer } from './workflow-trace-view';\nexport { NewTraceViewer } from './trace-viewer-new';\n"]}

package/dist/components/new-trace-viewer/components/copy-button.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from 'react';
+interface CopyButtonProps {
+    copyText: string;
+    ariaLabel: string;
+    className?: string;
+}
+export declare function CopyButton({ copyText, ariaLabel, className, }: CopyButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/new-trace-viewer/components/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/copy-button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,GAAG,EAA+B,MAAM,OAAO,CAAC;AAG9D,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAmD/B"}

package/dist/components/new-trace-viewer/components/copy-button.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+export function CopyButton({ copyText, ariaLabel, className, }) {
+    const [copied, setCopied] = useState(false);
+    const timeoutRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    return (_jsx("button", { type: "button", "aria-label": ariaLabel, className: cn('cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0', className), onClick: (e) => {
+            e.stopPropagation();
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            void navigator.clipboard.writeText(copyText).then(() => {
+                setCopied(true);
+                timeoutRef.current = setTimeout(() => setCopied(false), 1000);
+            });
+        }, children: _jsxs("div", { className: "relative w-3 h-3", children: [_jsx("div", { className: cn('absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out', copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'), children: _jsx(Check, { className: "w-3 h-3" }) }), _jsx("div", { className: cn('absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out', copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'), children: _jsx(Copy, { className: "w-3 h-3" }) })] }) }));
+}
+//# sourceMappingURL=copy-button.js.map

package/dist/components/new-trace-viewer/components/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/copy-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAY,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAQxC,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,SAAS,GACO;IAChB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;gBACvB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAE,EAAE,CACX,sFAAsF,EACtF,SAAS,CACV,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;gBACvB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACnC,CAAC;YACD,KAAK,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;gBACrD,SAAS,CAAC,IAAI,CAAC,CAAC;gBAChB,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;YAChE,CAAC,CAAC,CAAC;QACL,CAAC,YAED,eAAK,SAAS,EAAC,kBAAkB,aAC/B,cACE,SAAS,EAAE,EAAE,CACX,wFAAwF,EACxF,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,mBAAmB,CACvD,YAED,KAAC,KAAK,IAAC,SAAS,EAAC,SAAS,GAAG,GACzB,EACN,cACE,SAAS,EAAE,EAAE,CACX,wFAAwF,EACxF,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,uBAAuB,CACvD,YAED,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,GACxB,IACF,GACC,CACV,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { Check, Copy } from 'lucide-react';\nimport { type JSX, useEffect, useRef, useState } from 'react';\nimport { cn } from '../../../lib/utils';\n\ninterface CopyButtonProps {\n  copyText: string;\n  ariaLabel: string;\n  className?: string;\n}\n\nexport function CopyButton({\n  copyText,\n  ariaLabel,\n  className,\n}: CopyButtonProps): JSX.Element {\n  const [copied, setCopied] = useState(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={cn(\n        'cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-none p-1 m-0',\n        className\n      )}\n      onClick={(e) => {\n        e.stopPropagation();\n        if (timeoutRef.current) {\n          clearTimeout(timeoutRef.current);\n        }\n        void navigator.clipboard.writeText(copyText).then(() => {\n          setCopied(true);\n          timeoutRef.current = setTimeout(() => setCopied(false), 1000);\n        });\n      }}\n    >\n      <div className=\"relative w-3 h-3\">\n        <div\n          className={cn(\n            'absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out',\n            copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'\n          )}\n        >\n          <Check className=\"w-3 h-3\" />\n        </div>\n        <div\n          className={cn(\n            'absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out',\n            copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'\n          )}\n        >\n          <Copy className=\"w-3 h-3\" />\n        </div>\n      </div>\n    </button>\n  );\n}\n"]}

package/dist/components/new-trace-viewer/components/event-list.d.ts

@@ -0,0 +1,8 @@
+import type { Span } from '../../trace-viewer/types';
+declare const EventList: ({ spans, activeSpanId, onSelectSpan, }: {
+    spans: Span[];
+    activeSpanId: string | null;
+    onSelectSpan: (spanId: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default EventList;
+//# sourceMappingURL=event-list.d.ts.map

package/dist/components/new-trace-viewer/components/event-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-list.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/event-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AA6ErD,QAAA,MAAM,SAAS,GAAI,wCAIhB;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,4CAmBA,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/new-trace-viewer/components/event-list.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import { WorkflowIcon, WebhookIcon, SleepIcon, StepForwardIcon, } from '../icons';
+const eventStyles = {
+    run: { icon: WorkflowIcon, className: 'text-blue-900' },
+    step: { icon: StepForwardIcon, className: 'text-green-900' },
+    hook: { icon: WebhookIcon, className: 'text-yellow-900' },
+    sleep: { icon: SleepIcon, className: 'text-gray-900' },
+};
+const defaultStyle = {
+    icon: Circle,
+    className: 'text-gray-900',
+};
+function getEventStyle(resource, isErrored) {
+    const style = eventStyles[resource] ?? defaultStyle;
+    return {
+        icon: style.icon,
+        className: cn(isErrored ? 'text-red-900' : style.className),
+    };
+}
+const EventRow = ({ span, isSelected, onSelectSpan, }) => {
+    const durationMs = getHighResInMs(span.duration);
+    const isErrored = span.attributes.data.status === 'failed';
+    const { icon: Icon, className: tagClassName } = getEventStyle(span.resource, isErrored);
+    return (_jsx("li", { className: "overflow-clip group", role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, onClick: () => onSelectSpan(span.spanId), children: _jsxs("div", { className: "hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-[34px] py-1.5 flex", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: tagClassName, children: _jsx(Icon, { className: "w-4 h-4" }) }), _jsx("span", { className: "text-label-14", children: span.name })] }), _jsx("div", { className: "ml-auto", children: _jsx("span", { className: "text-label-14 text-gray-900 tabular-nums", children: formatDuration(durationMs) }) })] }) }));
+};
+const EventList = ({ spans, activeSpanId, onSelectSpan, }) => {
+    return (_jsx("ul", { id: "event-list", role: "tree", className: "block min-h-0 overflow-visible px-2 py-2", children: spans.map((span) => {
+            return (_jsx(EventRow, { span: span, isSelected: span.spanId === activeSpanId, onSelectSpan: onSelectSpan }, span.spanId));
+        }) }));
+};
+export default EventList;
+//# sourceMappingURL=event-list.js.map

package/dist/components/new-trace-viewer/components/event-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-list.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/event-list.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EACL,YAAY,EACZ,WAAW,EACX,SAAS,EACT,eAAe,GAChB,MAAM,UAAU,CAAC;AAOlB,MAAM,WAAW,GAA+B;IAC9C,GAAG,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE;IACvD,IAAI,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,EAAE;IAC5D,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE;IACzD,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE;CACvD,CAAC;AAEF,MAAM,YAAY,GAAe;IAC/B,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,eAAe;CAC3B,CAAC;AAEF,SAAS,aAAa,CAAC,QAAgB,EAAE,SAAkB;IACzD,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,YAAY,CAAC;IACpD,OAAO;QACL,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;KAC5D,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,UAAU,EACV,YAAY,GAKb,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,SAAS,GACZ,IAAI,CAAC,UAAU,CAAC,IAAgC,CAAC,MAAM,KAAK,QAAQ,CAAC;IACxE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,aAAa,CAC3D,IAAI,CAAC,QAAQ,EACb,SAAS,CACV,CAAC;IAEF,OAAO,CACL,aACE,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,UAAU,mBACA,UAAU,mBACV,UAAU,gBACb,CAAC,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,YAExC,eAAK,SAAS,EAAC,8JAA8J,aAC3K,eAAK,SAAS,EAAC,yBAAyB,aACtC,eAAM,SAAS,EAAE,YAAY,YAC3B,KAAC,IAAI,IAAC,SAAS,EAAC,SAAS,GAAG,GACvB,EACP,eAAM,SAAS,EAAC,eAAe,YAAE,IAAI,CAAC,IAAI,GAAQ,IAC9C,EACN,cAAK,SAAS,EAAC,SAAS,YACtB,eAAM,SAAS,EAAC,0CAA0C,YACvD,cAAc,CAAC,UAAU,CAAC,GACtB,GACH,IACF,GACH,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,EACjB,KAAK,EACL,YAAY,EACZ,YAAY,GAKb,EAAE,EAAE;IACH,OAAO,CACL,aACE,EAAE,EAAC,YAAY,EACf,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,0CAA0C,YAEnD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClB,OAAO,CACL,KAAC,QAAQ,IAEP,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,IAAI,CAAC,MAAM,KAAK,YAAY,EACxC,YAAY,EAAE,YAAY,IAHrB,IAAI,CAAC,MAAM,CAIhB,CACH,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { Circle } from 'lucide-react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';\nimport {\n  WorkflowIcon,\n  WebhookIcon,\n  SleepIcon,\n  StepForwardIcon,\n} from '../icons';\n\ninterface EventStyle {\n  icon: React.ComponentType<{ className?: string }>;\n  className: string;\n}\n\nconst eventStyles: Record<string, EventStyle> = {\n  run: { icon: WorkflowIcon, className: 'text-blue-900' },\n  step: { icon: StepForwardIcon, className: 'text-green-900' },\n  hook: { icon: WebhookIcon, className: 'text-yellow-900' },\n  sleep: { icon: SleepIcon, className: 'text-gray-900' },\n};\n\nconst defaultStyle: EventStyle = {\n  icon: Circle,\n  className: 'text-gray-900',\n};\n\nfunction getEventStyle(resource: string, isErrored: boolean): EventStyle {\n  const style = eventStyles[resource] ?? defaultStyle;\n  return {\n    icon: style.icon,\n    className: cn(isErrored ? 'text-red-900' : style.className),\n  };\n}\n\nconst EventRow = ({\n  span,\n  isSelected,\n  onSelectSpan,\n}: {\n  span: Span;\n  isSelected: boolean;\n  onSelectSpan: (spanId: string) => void;\n}) => {\n  const durationMs = getHighResInMs(span.duration);\n  const isErrored =\n    (span.attributes.data as Record<string, unknown>).status === 'failed';\n  const { icon: Icon, className: tagClassName } = getEventStyle(\n    span.resource,\n    isErrored\n  );\n\n  return (\n    <li\n      className=\"overflow-clip group\"\n      role=\"treeitem\"\n      aria-selected={isSelected}\n      aria-expanded={isSelected}\n      aria-level={1}\n      onClick={() => onSelectSpan(span.spanId)}\n    >\n      <div className=\"hover:bg-gray-100 group-aria-selected:bg-gray-100 group-aria-selected:hover:bg-gray-200 hover:aria-selected:bg-gray-100 rounded-sm px-2 h-[34px] py-1.5 flex\">\n        <div className=\"flex items-center gap-2\">\n          <span className={tagClassName}>\n            <Icon className=\"w-4 h-4\" />\n          </span>\n          <span className=\"text-label-14\">{span.name}</span>\n        </div>\n        <div className=\"ml-auto\">\n          <span className=\"text-label-14 text-gray-900 tabular-nums\">\n            {formatDuration(durationMs)}\n          </span>\n        </div>\n      </div>\n    </li>\n  );\n};\n\nconst EventList = ({\n  spans,\n  activeSpanId,\n  onSelectSpan,\n}: {\n  spans: Span[];\n  activeSpanId: string | null;\n  onSelectSpan: (spanId: string) => void;\n}) => {\n  return (\n    <ul\n      id=\"event-list\"\n      role=\"tree\"\n      className=\"block min-h-0 overflow-visible px-2 py-2\"\n    >\n      {spans.map((span) => {\n        return (\n          <EventRow\n            key={span.spanId}\n            span={span}\n            isSelected={span.spanId === activeSpanId}\n            onSelectSpan={onSelectSpan}\n          />\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default EventList;\n"]}

package/dist/components/new-trace-viewer/components/split-pane.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export declare function Divider(): import("react/jsx-runtime").JSX.Element;
+export interface SplitPaneProps {
+    children: ReactNode;
+    className?: string;
+    /** Fixed pixel width for the start (left) pane. Default 220. */
+    defaultStartWidth?: number;
+    /** Fixed (non-scrolling) header rendered above the start pane. */
+    startHeader?: ReactNode;
+    /** Fixed (non-scrolling) header rendered above the end pane. */
+    endHeader?: ReactNode;
+}
+export declare function SplitPane({ children, className, defaultStartWidth, startHeader, endHeader, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=split-pane.d.ts.map

package/dist/components/new-trace-viewer/components/split-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAQf,wBAAgB,OAAO,4CAEtB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,iBAAoC,EACpC,WAAW,EACX,SAAS,GACV,EAAE,cAAc,2CAkJhB"}

package/dist/components/new-trace-viewer/components/split-pane.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useCallback, useEffect, useRef, useState, } from 'react';
+import { cn } from '../../../lib/utils';
+/** Wide enough for comfortable dragging; visual line stays 1px centered. */
+const GUTTER_PX = 9;
+const MIN_PX = 50;
+const DEFAULT_START_PX = 340;
+export function Divider() {
+    return _jsx("div", { "aria-hidden": true, className: "h-full w-px shrink-0 bg-gray-alpha-400" });
+}
+export function SplitPane({ children, className, defaultStartWidth = DEFAULT_START_PX, startHeader, endHeader, }) {
+    const parts = Children.toArray(children);
+    if (parts.length !== 2) {
+        throw new Error('SplitPane expects exactly two children');
+    }
+    const [start, end] = parts;
+    const [startPx, setStartPx] = useState(defaultStartWidth);
+    const [isDragging, setIsDragging] = useState(false);
+    const containerRef = useRef(null);
+    const gutterRef = useRef(null);
+    const rafRef = useRef(null);
+    const pendingPx = useRef(defaultStartWidth);
+    const pointerIdRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+        };
+    }, []);
+    const clampPx = useCallback((px) => {
+        const el = containerRef.current;
+        if (!el)
+            return px;
+        const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;
+        return Math.min(maxPx, Math.max(MIN_PX, px));
+    }, []);
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        const onPointerMove = (e) => {
+            if (e.pointerId !== pointerIdRef.current)
+                return;
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const rect = container.getBoundingClientRect();
+            pendingPx.current = clampPx(e.clientX - rect.left);
+            if (!rafRef.current) {
+                rafRef.current = requestAnimationFrame(() => {
+                    rafRef.current = null;
+                    setStartPx(pendingPx.current);
+                });
+            }
+        };
+        const onPointerUp = (e) => {
+            if (e.pointerId !== pointerIdRef.current)
+                return;
+            const gutter = gutterRef.current;
+            if (gutter?.hasPointerCapture(e.pointerId)) {
+                gutter.releasePointerCapture(e.pointerId);
+            }
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+            pointerIdRef.current = null;
+            setIsDragging(false);
+        };
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp);
+        document.addEventListener('pointercancel', onPointerUp);
+        return () => {
+            document.removeEventListener('pointermove', onPointerMove);
+            document.removeEventListener('pointerup', onPointerUp);
+            document.removeEventListener('pointercancel', onPointerUp);
+        };
+    }, [isDragging, clampPx]);
+    const handlePointerDown = (e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        pointerIdRef.current = e.pointerId;
+        setIsDragging(true);
+    };
+    const handleLostPointerCapture = () => {
+        pointerIdRef.current = null;
+        setIsDragging(false);
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+    };
+    const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
+    const hasHeaders = startHeader != null || endHeader != null;
+    const gutter = (_jsx("div", { ref: gutterRef, className: "relative z-20 isolate flex shrink-0 cursor-col-resize justify-center", onPointerDown: handlePointerDown, onLostPointerCapture: handleLostPointerCapture, children: _jsx("span", { className: "pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400", "aria-hidden": true }) }));
+    if (hasHeaders) {
+        return (_jsxs("div", { className: cn('flex flex-col h-full min-h-0', className), children: [_jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: colTemplate }, children: [_jsx("div", { children: startHeader }), _jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "h-full w-px bg-gray-alpha-400", "aria-hidden": true }) }), _jsx("div", { children: endHeader })] }), _jsxs("div", { ref: containerRef, className: cn('grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto', isDragging && 'select-none'), style: { gridTemplateColumns: colTemplate }, children: [start, gutter, end] })] }));
+    }
+    return (_jsxs("div", { ref: containerRef, className: cn('grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto', isDragging && 'select-none', className), style: { gridTemplateColumns: colTemplate, height: '100%' }, children: [start, gutter, end] }));
+}
+//# sourceMappingURL=split-pane.js.map

package/dist/components/new-trace-viewer/components/split-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {\n  Children,\n  type ReactNode,\n  type PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../../lib/utils';\n\n/** Wide enough for comfortable dragging; visual line stays 1px centered. */\nconst GUTTER_PX = 9;\nconst MIN_PX = 50;\nconst DEFAULT_START_PX = 340;\n\nexport function Divider() {\n  return <div aria-hidden className=\"h-full w-px shrink-0 bg-gray-alpha-400\" />;\n}\n\nexport interface SplitPaneProps {\n  children: ReactNode;\n  className?: string;\n  /** Fixed pixel width for the start (left) pane. Default 220. */\n  defaultStartWidth?: number;\n  /** Fixed (non-scrolling) header rendered above the start pane. */\n  startHeader?: ReactNode;\n  /** Fixed (non-scrolling) header rendered above the end pane. */\n  endHeader?: ReactNode;\n}\n\nexport function SplitPane({\n  children,\n  className,\n  defaultStartWidth = DEFAULT_START_PX,\n  startHeader,\n  endHeader,\n}: SplitPaneProps) {\n  const parts = Children.toArray(children);\n  if (parts.length !== 2) {\n    throw new Error('SplitPane expects exactly two children');\n  }\n  const [start, end] = parts;\n\n  const [startPx, setStartPx] = useState(defaultStartWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const gutterRef = useRef<HTMLDivElement>(null);\n  const rafRef = useRef<number | null>(null);\n  const pendingPx = useRef(defaultStartWidth);\n  const pointerIdRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\n    };\n  }, []);\n\n  const clampPx = useCallback((px: number) => {\n    const el = containerRef.current;\n    if (!el) return px;\n    const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;\n    return Math.min(maxPx, Math.max(MIN_PX, px));\n  }, []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n\n    const onPointerMove = (e: globalThis.PointerEvent) => {\n      if (e.pointerId !== pointerIdRef.current) return;\n      const container = containerRef.current;\n      if (!container) return;\n      const rect = container.getBoundingClientRect();\n      pendingPx.current = clampPx(e.clientX - rect.left);\n      if (!rafRef.current) {\n        rafRef.current = requestAnimationFrame(() => {\n          rafRef.current = null;\n          setStartPx(pendingPx.current);\n        });\n      }\n    };\n\n    const onPointerUp = (e: globalThis.PointerEvent) => {\n      if (e.pointerId !== pointerIdRef.current) return;\n      const gutter = gutterRef.current;\n      if (gutter?.hasPointerCapture(e.pointerId)) {\n        gutter.releasePointerCapture(e.pointerId);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n      pointerIdRef.current = null;\n      setIsDragging(false);\n    };\n\n    document.addEventListener('pointermove', onPointerMove);\n    document.addEventListener('pointerup', onPointerUp);\n    document.addEventListener('pointercancel', onPointerUp);\n\n    return () => {\n      document.removeEventListener('pointermove', onPointerMove);\n      document.removeEventListener('pointerup', onPointerUp);\n      document.removeEventListener('pointercancel', onPointerUp);\n    };\n  }, [isDragging, clampPx]);\n\n  const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    e.currentTarget.setPointerCapture(e.pointerId);\n    pointerIdRef.current = e.pointerId;\n    setIsDragging(true);\n  };\n\n  const handleLostPointerCapture = () => {\n    pointerIdRef.current = null;\n    setIsDragging(false);\n    if (rafRef.current) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  };\n\n  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;\n  const hasHeaders = startHeader != null || endHeader != null;\n\n  const gutter = (\n    <div\n      ref={gutterRef}\n      className=\"relative z-20 isolate flex shrink-0 cursor-col-resize justify-center\"\n      onPointerDown={handlePointerDown}\n      onLostPointerCapture={handleLostPointerCapture}\n    >\n      <span\n        className=\"pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400\"\n        aria-hidden\n      />\n    </div>\n  );\n\n  if (hasHeaders) {\n    return (\n      <div className={cn('flex flex-col h-full min-h-0', className)}>\n        <div\n          className=\"shrink-0 grid\"\n          style={{ gridTemplateColumns: colTemplate }}\n        >\n          <div>{startHeader}</div>\n          <div className=\"flex justify-center\">\n            <span className=\"h-full w-px bg-gray-alpha-400\" aria-hidden />\n          </div>\n          <div>{endHeader}</div>\n        </div>\n        <div\n          ref={containerRef}\n          className={cn(\n            'grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto',\n            isDragging && 'select-none'\n          )}\n          style={{ gridTemplateColumns: colTemplate }}\n        >\n          {start}\n          {gutter}\n          {end}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',\n        isDragging && 'select-none',\n        className\n      )}\n      style={{ gridTemplateColumns: colTemplate, height: '100%' }}\n    >\n      {start}\n      {gutter}\n      {end}\n    </div>\n  );\n}\n"]}

package/dist/components/new-trace-viewer/components/timeline.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { Span } from '../../trace-viewer/types';
+import type { TimeCompression } from '../utils';
+declare const TimelineBar: import("react").NamedExoticComponent<{
+    span: Span;
+    compression: TimeCompression;
+    containerWidth: number;
+    isSelected: boolean;
+    onClick: () => void;
+}>;
+export { TimelineBar };
+export declare function TimelineHeader({ viewStart, viewDuration, rootStart, compression, isZoomed, onResetZoom, hoverInfo, }: {
+    viewStart: number;
+    viewDuration: number;
+    rootStart: number;
+    compression: TimeCompression;
+    isZoomed: boolean;
+    onResetZoom: () => void;
+    hoverInfo?: {
+        fraction: number;
+        label: string;
+    } | null;
+}): ReactNode;
+export declare function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, altHeld, }: {
+    spans: Span[];
+    compression: TimeCompression;
+    selectedId: string | null;
+    onSelect: (spanId: string) => void;
+    hoverFraction?: number | null;
+    altHeld?: boolean;
+}): ReactNode;
+//# sourceMappingURL=timeline.d.ts.map

package/dist/components/new-trace-viewer/components/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAuE/D,QAAA,MAAM,WAAW;UAOT,IAAI;iBACG,eAAe;oBACZ,MAAM;gBACV,OAAO;aACV,MAAM,IAAI;EAwJnB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,SAAS,GACV,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACxD,GAAG,SAAS,CAgDZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,WAAW,EAAE,eAAe,CAAC;IAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,SAAS,CAoDZ"}

package/dist/components/new-trace-viewer/components/timeline.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import { computeCompressedTimeMarkers, computeSpanGaps, computeSpanSegments, computeTimeMarkers, getResourceColor, } from '../utils';
+const QUEUED_BACKGROUND = 'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
+const HATCHED_BACKGROUND = 'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';
+const SEGMENT_CONFIG = {
+    queued: { style: { background: QUEUED_BACKGROUND } },
+    retrying: {
+        className: 'box-border bg-gray-500',
+    },
+    waiting: { style: { background: HATCHED_BACKGROUND } },
+    running: { className: 'bg-blue-700' },
+    failed: { className: 'bg-red-700' },
+    succeeded: { className: 'bg-green-700' },
+    sleeping: { className: 'bg-amber-700' },
+    received: { className: 'bg-blue-700' },
+};
+const FIXED_BAR_WIDTH_PX = 4;
+const SEGMENT_GAP_PX = 1;
+// Keep this in sync with the rendered row height in the timeline/event list.
+const ROW_HEIGHT = 34;
+const CONTAINER_PAD_Y = 8;
+const END_CAP_HEIGHT = 8;
+const DeltaIndicator = memo(function DeltaIndicator({ leftFrac, rightFrac, label, rowIndex, }) {
+    const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
+    return (_jsxs("div", { className: "absolute pointer-events-none", style: {
+            left: `${leftFrac * 100}%`,
+            width: `${(rightFrac - leftFrac) * 100}%`,
+            top: centerY - END_CAP_HEIGHT / 2,
+            height: END_CAP_HEIGHT,
+        }, children: [_jsx("div", { className: "absolute left-0 top-0 w-px h-full bg-amber-800" }), _jsx("div", { className: "absolute left-0 right-0 top-1/2 h-px bg-amber-800" }), _jsx("div", { className: "absolute right-0 top-0 w-px h-full bg-amber-800" }), _jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800", children: label })] }));
+});
+const TimelineBar = memo(function TimelineBar({ span, compression, containerWidth, isSelected, onClick, }) {
+    const startTime = getHighResInMs(span.startTime);
+    const endTime = getHighResInMs(span.endTime);
+    const totalDurationMs = endTime - startTime;
+    const leftFrac = compression.toVisual(startTime);
+    const rightFrac = compression.toVisual(endTime);
+    const widthFrac = rightFrac - leftFrac;
+    const leftPct = leftFrac * 100;
+    const widthPct = widthFrac * 100;
+    const pixelWidth = widthFrac * containerWidth;
+    const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+    const [isRowHovered, setIsRowHovered] = useState(false);
+    const segments = useMemo(() => computeSpanSegments(span), [span]);
+    const finalSegment = segments[segments.length - 1];
+    const workflowStatus = span.attributes.data
+        ?.status;
+    const isErrored = span.status.code === 2 || workflowStatus === 'failed';
+    const colors = getResourceColor(span.resource);
+    const fallbackColor = isErrored
+        ? (colors.errorBar ?? 'var(--ds-red-700)')
+        : colors.bar;
+    const compressedSegmentStatus = isErrored
+        ? 'failed'
+        : span.resource === 'hook'
+            ? 'received'
+            : finalSegment?.status;
+    const compressedSegmentStyle = compressedSegmentStatus === 'queued'
+        ? { background: 'var(--ds-gray-500)' }
+        : compressedSegmentStatus
+            ? SEGMENT_CONFIG[compressedSegmentStatus].style
+            : undefined;
+    const compressedSegmentClassName = compressedSegmentStatus
+        ? SEGMENT_CONFIG[compressedSegmentStatus].className
+        : undefined;
+    const hasCompressedStatus = Boolean(compressedSegmentClassName || compressedSegmentStyle);
+    const renderDurationLabel = (label) => (_jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums", style: { textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }, children: label }));
+    const getMinDurationLabelWidthPx = (label) => Math.max(40, label.length * 6 + 12);
+    const totalDurationLabel = formatDuration(totalDurationMs);
+    const showBarDurationLabel = isRowHovered &&
+        pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
+    const barContent = isCompressed ? (_jsx("div", { className: cn('relative h-4 rounded-[0.25rem] top-[3px]', compressedSegmentClassName), style: {
+            width: '100%',
+            background: hasCompressedStatus ? undefined : fallbackColor,
+            ...compressedSegmentStyle,
+        }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null })) : segments.length > 0 ? (_jsx("div", { className: "relative w-full h-4 top-[3px]", children: segments.map((seg, i) => {
+            const segPixelWidth = (seg.endFraction - seg.startFraction) * pixelWidth;
+            const segDurationLabel = formatDuration((seg.endFraction - seg.startFraction) * totalDurationMs);
+            const showSegmentDurationLabel = isRowHovered &&
+                segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);
+            const segStyle = seg.status === 'queued' && segPixelWidth < 20
+                ? { background: 'var(--ds-gray-500)' }
+                : SEGMENT_CONFIG[seg.status].style;
+            return (_jsx("div", { className: cn('absolute h-full rounded-[0.25rem]', SEGMENT_CONFIG[seg.status].className), style: {
+                    left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,
+                    width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,
+                    minWidth: 1,
+                    ...segStyle,
+                }, children: showSegmentDurationLabel
+                    ? renderDurationLabel(segDurationLabel)
+                    : null }, `${seg.status}-${i}`));
+        }) })) : (_jsx("div", { className: "relative h-4 rounded-[0.25rem] top-[3px]", style: {
+            width: '100%',
+            minWidth: 4,
+            background: fallbackColor,
+        }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null }));
+    return (_jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn('h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'), onMouseEnter: () => setIsRowHovered(true), onMouseLeave: () => setIsRowHovered(false), onClick: onClick, children: _jsx("div", { className: "absolute top-1.5 h-[22px] rounded-sm", style: {
+                left: isCompressed
+                    ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
+                    : `${leftPct}%`,
+                width: isCompressed
+                    ? `${FIXED_BAR_WIDTH_PX}px`
+                    : `max(${widthPct}%, 4px)`,
+            }, children: barContent }) }));
+});
+export { TimelineBar };
+export function TimelineHeader({ viewStart, viewDuration, rootStart, compression, isZoomed, onResetZoom, hoverInfo, }) {
+    const viewEnd = viewStart + viewDuration;
+    const markers = useMemo(() => compression.isCompressed
+        ? computeCompressedTimeMarkers(compression, viewStart, viewEnd, rootStart)
+        : computeTimeMarkers(viewDuration, viewStart - rootStart), [compression, viewStart, viewEnd, viewDuration, rootStart]);
+    return (_jsxs("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1", children: [_jsxs("div", { className: "relative h-full flex-1", children: [markers.map((m, i) => (_jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m.position * 100}%` }, children: m.label }, i))), hoverInfo && (_jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo.fraction * 100}%` }, children: hoverInfo.label }))] }), isZoomed && (_jsx("button", { type: "button", className: "absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600", onClick: onResetZoom, children: "Reset zoom" }))] }));
+}
+export function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, altHeld = false, }) {
+    const containerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const gaps = useMemo(() => computeSpanGaps(spans, compression), [spans, compression]);
+    return (_jsxs("div", { ref: containerRef, className: "relative py-2", children: [hoverFraction != null && (_jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10", style: { left: `${hoverFraction * 100}%` } })), spans.map((span) => (_jsx(TimelineBar, { span: span, compression: compression, containerWidth: containerWidth, isSelected: selectedId === span.spanId, onClick: () => onSelect(span.spanId) }, span.spanId))), altHeld && (_jsx("div", { "aria-hidden": true, className: "absolute inset-0 pointer-events-none", children: gaps.map((gap) => (_jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex))) }))] }));
+}
+//# sourceMappingURL=timeline.js.map

package/dist/components/new-trace-viewer/components/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';\nimport type { SegmentStatus, TimeCompression } from '../utils';\nimport {\n  computeCompressedTimeMarkers,\n  computeSpanGaps,\n  computeSpanSegments,\n  computeTimeMarkers,\n  getResourceColor,\n} from '../utils';\n\nconst QUEUED_BACKGROUND =\n  'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';\n\nconst HATCHED_BACKGROUND =\n  'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';\n\nconst SEGMENT_CONFIG: Record<\n  SegmentStatus,\n  { className?: string; style?: React.CSSProperties }\n> = {\n  queued: { style: { background: QUEUED_BACKGROUND } },\n  retrying: {\n    className: 'box-border bg-gray-500',\n  },\n  waiting: { style: { background: HATCHED_BACKGROUND } },\n  running: { className: 'bg-blue-700' },\n  failed: { className: 'bg-red-700' },\n  succeeded: { className: 'bg-green-700' },\n  sleeping: { className: 'bg-amber-700' },\n  received: { className: 'bg-blue-700' },\n};\n\nconst FIXED_BAR_WIDTH_PX = 4;\nconst SEGMENT_GAP_PX = 1;\n// Keep this in sync with the rendered row height in the timeline/event list.\nconst ROW_HEIGHT = 34;\nconst CONTAINER_PAD_Y = 8;\nconst END_CAP_HEIGHT = 8;\n\nconst DeltaIndicator = memo(function DeltaIndicator({\n  leftFrac,\n  rightFrac,\n  label,\n  rowIndex,\n}: {\n  leftFrac: number;\n  rightFrac: number;\n  label: string;\n  rowIndex: number;\n}) {\n  const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;\n\n  return (\n    <div\n      className=\"absolute pointer-events-none\"\n      style={{\n        left: `${leftFrac * 100}%`,\n        width: `${(rightFrac - leftFrac) * 100}%`,\n        top: centerY - END_CAP_HEIGHT / 2,\n        height: END_CAP_HEIGHT,\n      }}\n    >\n      <div className=\"absolute left-0 top-0 w-px h-full bg-amber-800\" />\n      <div className=\"absolute left-0 right-0 top-1/2 h-px bg-amber-800\" />\n      <div className=\"absolute right-0 top-0 w-px h-full bg-amber-800\" />\n      <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800\">\n        {label}\n      </span>\n    </div>\n  );\n});\n\nconst TimelineBar = memo(function TimelineBar({\n  span,\n  compression,\n  containerWidth,\n  isSelected,\n  onClick,\n}: {\n  span: Span;\n  compression: TimeCompression;\n  containerWidth: number;\n  isSelected: boolean;\n  onClick: () => void;\n}): ReactNode {\n  const startTime = getHighResInMs(span.startTime);\n  const endTime = getHighResInMs(span.endTime);\n  const totalDurationMs = endTime - startTime;\n\n  const leftFrac = compression.toVisual(startTime);\n  const rightFrac = compression.toVisual(endTime);\n  const widthFrac = rightFrac - leftFrac;\n\n  const leftPct = leftFrac * 100;\n  const widthPct = widthFrac * 100;\n\n  const pixelWidth = widthFrac * containerWidth;\n  const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;\n  const [isRowHovered, setIsRowHovered] = useState(false);\n\n  const segments = useMemo(() => computeSpanSegments(span), [span]);\n  const finalSegment = segments[segments.length - 1];\n\n  const workflowStatus = (span.attributes.data as Record<string, unknown>)\n    ?.status as string | undefined;\n  const isErrored = span.status.code === 2 || workflowStatus === 'failed';\n  const colors = getResourceColor(span.resource);\n  const fallbackColor = isErrored\n    ? (colors.errorBar ?? 'var(--ds-red-700)')\n    : colors.bar;\n  const compressedSegmentStatus = isErrored\n    ? 'failed'\n    : span.resource === 'hook'\n      ? 'received'\n      : finalSegment?.status;\n  const compressedSegmentStyle =\n    compressedSegmentStatus === 'queued'\n      ? { background: 'var(--ds-gray-500)' }\n      : compressedSegmentStatus\n        ? SEGMENT_CONFIG[compressedSegmentStatus].style\n        : undefined;\n  const compressedSegmentClassName = compressedSegmentStatus\n    ? SEGMENT_CONFIG[compressedSegmentStatus].className\n    : undefined;\n\n  const hasCompressedStatus = Boolean(\n    compressedSegmentClassName || compressedSegmentStyle\n  );\n  const renderDurationLabel = (label: string) => (\n    <span\n      className=\"pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums\"\n      style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}\n    >\n      {label}\n    </span>\n  );\n  const getMinDurationLabelWidthPx = (label: string) =>\n    Math.max(40, label.length * 6 + 12);\n  const totalDurationLabel = formatDuration(totalDurationMs);\n  const showBarDurationLabel =\n    isRowHovered &&\n    pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);\n\n  const barContent = isCompressed ? (\n    <div\n      className={cn(\n        'relative h-4 rounded-[0.25rem] top-[3px]',\n        compressedSegmentClassName\n      )}\n      style={{\n        width: '100%',\n        background: hasCompressedStatus ? undefined : fallbackColor,\n        ...compressedSegmentStyle,\n      }}\n    >\n      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}\n    </div>\n  ) : segments.length > 0 ? (\n    <div className=\"relative w-full h-4 top-[3px]\">\n      {segments.map((seg, i) => {\n        const segPixelWidth =\n          (seg.endFraction - seg.startFraction) * pixelWidth;\n        const segDurationLabel = formatDuration(\n          (seg.endFraction - seg.startFraction) * totalDurationMs\n        );\n        const showSegmentDurationLabel =\n          isRowHovered &&\n          segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);\n        const segStyle =\n          seg.status === 'queued' && segPixelWidth < 20\n            ? { background: 'var(--ds-gray-500)' }\n            : SEGMENT_CONFIG[seg.status].style;\n\n        return (\n          <div\n            key={`${seg.status}-${i}`}\n            className={cn(\n              'absolute h-full rounded-[0.25rem]',\n              SEGMENT_CONFIG[seg.status].className\n            )}\n            style={{\n              left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,\n              width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,\n              minWidth: 1,\n              ...segStyle,\n            }}\n          >\n            {showSegmentDurationLabel\n              ? renderDurationLabel(segDurationLabel)\n              : null}\n          </div>\n        );\n      })}\n    </div>\n  ) : (\n    <div\n      className=\"relative h-4 rounded-[0.25rem] top-[3px]\"\n      style={{\n        width: '100%',\n        minWidth: 4,\n        background: fallbackColor,\n      }}\n    >\n      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}\n    </div>\n  );\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-selected={isSelected}\n      aria-expanded={isSelected}\n      aria-level={1}\n      className={cn(\n        'h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'\n      )}\n      onMouseEnter={() => setIsRowHovered(true)}\n      onMouseLeave={() => setIsRowHovered(false)}\n      onClick={onClick}\n    >\n      <div\n        className=\"absolute top-1.5 h-[22px] rounded-sm\"\n        style={{\n          left: isCompressed\n            ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`\n            : `${leftPct}%`,\n          width: isCompressed\n            ? `${FIXED_BAR_WIDTH_PX}px`\n            : `max(${widthPct}%, 4px)`,\n        }}\n      >\n        {barContent}\n      </div>\n    </div>\n  );\n});\n\nexport { TimelineBar };\n\nexport function TimelineHeader({\n  viewStart,\n  viewDuration,\n  rootStart,\n  compression,\n  isZoomed,\n  onResetZoom,\n  hoverInfo,\n}: {\n  viewStart: number;\n  viewDuration: number;\n  rootStart: number;\n  compression: TimeCompression;\n  isZoomed: boolean;\n  onResetZoom: () => void;\n  hoverInfo?: { fraction: number; label: string } | null;\n}): ReactNode {\n  const viewEnd = viewStart + viewDuration;\n\n  const markers = useMemo(\n    () =>\n      compression.isCompressed\n        ? computeCompressedTimeMarkers(\n            compression,\n            viewStart,\n            viewEnd,\n            rootStart\n          )\n        : computeTimeMarkers(viewDuration, viewStart - rootStart),\n    [compression, viewStart, viewEnd, viewDuration, rootStart]\n  );\n\n  return (\n    <div className=\"relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1\">\n      <div className=\"relative h-full flex-1\">\n        {markers.map((m, i) => (\n          <span\n            key={i}\n            className=\"absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap\"\n            style={{ left: `${m.position * 100}%` }}\n          >\n            {m.label}\n          </span>\n        ))}\n        {hoverInfo && (\n          <span\n            className=\"absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2\"\n            style={{ left: `${hoverInfo.fraction * 100}%` }}\n          >\n            {hoverInfo.label}\n          </span>\n        )}\n      </div>\n      {isZoomed && (\n        <button\n          type=\"button\"\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600\"\n          onClick={onResetZoom}\n        >\n          Reset zoom\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function Timeline({\n  spans,\n  compression,\n  selectedId,\n  onSelect,\n  hoverFraction,\n  altHeld = false,\n}: {\n  spans: Span[];\n  compression: TimeCompression;\n  selectedId: string | null;\n  onSelect: (spanId: string) => void;\n  hoverFraction?: number | null;\n  altHeld?: boolean;\n}): ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      setContainerWidth(entry.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const gaps = useMemo(\n    () => computeSpanGaps(spans, compression),\n    [spans, compression]\n  );\n\n  return (\n    <div ref={containerRef} className=\"relative py-2\">\n      {hoverFraction != null && (\n        <div\n          className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10\"\n          style={{ left: `${hoverFraction * 100}%` }}\n        />\n      )}\n      {spans.map((span) => (\n        <TimelineBar\n          key={span.spanId}\n          span={span}\n          compression={compression}\n          containerWidth={containerWidth}\n          isSelected={selectedId === span.spanId}\n          onClick={() => onSelect(span.spanId)}\n        />\n      ))}\n      {altHeld && (\n        <div aria-hidden className=\"absolute inset-0 pointer-events-none\">\n          {gaps.map((gap) => (\n            <DeltaIndicator\n              key={gap.rowIndex}\n              leftFrac={gap.leftFrac}\n              rightFrac={gap.rightFrac}\n              label={formatDuration(gap.gapMs, true)}\n              rowIndex={gap.rowIndex}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components/new-trace-viewer/context.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { Span } from '../trace-viewer/types';
+interface ActiveSpanContextValue {
+    activeSpanId: string | null;
+    activeSpan: Span | null;
+    setActiveSpan: (spanId: string) => void;
+    clearActiveSpan: () => void;
+}
+export declare function ActiveSpanProvider({ spans, children, }: {
+    spans: Span[];
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const useActiveSpan: () => ActiveSpanContextValue;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/components/new-trace-viewer/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAuDA;AAED,eAAO,MAAM,aAAa,QAAO,sBAOhC,CAAC"}

package/dist/components/new-trace-viewer/context.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+const ActiveSpanContext = createContext(null);
+ActiveSpanContext.displayName = 'ActiveSpanContext';
+export function ActiveSpanProvider({ spans, children, }) {
+    const [activeSpanId, setActiveSpanId] = useState(spans[0]?.spanId ?? null);
+    useEffect(() => {
+        setActiveSpanId((currentSpanId) => {
+            if (spans.length === 0) {
+                return null;
+            }
+            if (currentSpanId) {
+                const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
+                if (hasCurrentSpan) {
+                    return currentSpanId;
+                }
+            }
+            return spans[0].spanId;
+        });
+    }, [spans]);
+    const activeSpan = useMemo(() => {
+        if (!activeSpanId) {
+            return null;
+        }
+        return spans.find((span) => span.spanId === activeSpanId) ?? null;
+    }, [activeSpanId, spans]);
+    const setActiveSpan = useCallback((spanId) => {
+        setActiveSpanId(spanId);
+    }, []);
+    const clearActiveSpan = useCallback(() => {
+        setActiveSpanId(null);
+    }, []);
+    const value = useMemo(() => ({
+        activeSpanId,
+        activeSpan,
+        setActiveSpan,
+        clearActiveSpan,
+    }), [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]);
+    return (_jsx(ActiveSpanContext.Provider, { value: value, children: children }));
+}
+export const useActiveSpan = () => {
+    const context = useContext(ActiveSpanContext);
+    if (!context) {
+        throw new Error('useActiveSpan must be used within ActiveSpanProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=context.js.map