@workflow/web-shared 5.0.0-beta.11 → 5.0.0-beta.13

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

@@ -26,8 +26,8 @@ import {
   EntityDetailPanel,
   type SelectedSpanInfo,
 } from '../sidebar/entity-detail-panel';
-import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
-import type { Trace } from '../trace-viewer/types';
+import { useSidebarData } from '../sidebar/sidebar-data-context';
+import type { TraceWithMeta } from './types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { IconButton } from '../ui/icon-button';
 import { Spinner } from '../ui/spinner';
@@ -46,12 +46,11 @@ import {
   TooltipTrigger,
 } from '../ui/tooltip';
 import { ActiveSpanProvider, useActiveSpan } from './context';
-import { DetailPanel } from './detail-panel';
 import { searchSpans } from './search';
 import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
-  trace: Trace;
+  trace: TraceWithMeta;
   onLoadMore?: () => void | Promise<void>;
   hasMore?: boolean;
   isLoadingMore?: boolean;
@@ -141,10 +140,10 @@ function useAnimatedViewport(initial: Viewport) {
 
 function useSelectedSpanInfo(): SelectedSpanInfo | null {
   const { activeSpan } = useActiveSpan();
-  const sidebar = useSidebarDataOptional();
+  const sidebar = useSidebarData();
 
   return useMemo(() => {
-    if (!activeSpan || !sidebar) return null;
+    if (!activeSpan) return null;
 
     const correlationId = activeSpan.spanId;
     const rawEvents = correlationId
@@ -193,7 +192,7 @@ function NewTraceViewerContent({
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
     useActiveSpan();
 
-  const sidebar = useSidebarDataOptional();
+  const sidebar = useSidebarData();
   const selectedSpan = useSelectedSpanInfo();
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -562,7 +561,7 @@ function NewTraceViewerContent({
     <div
       data-pane="pane-root"
       data-has-detail={activeSpan ? '' : undefined}
-      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]"
+      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,100%)]"
     >
       <div
         id="trace-parent"
@@ -674,7 +673,7 @@ function NewTraceViewerContent({
       </div>
 
       {/* Detail panel */}
-      {activeSpan && sidebar ? (
+      {activeSpan ? (
         <aside className="flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto">
           {/* Panel header */}
           <div className="flex items-center justify-between gap-2 shrink-0 px-4 pt-3 pb-3">
@@ -750,12 +749,6 @@ function NewTraceViewerContent({
             </ErrorBoundary>
           </div>
         </aside>
-      ) : activeSpan ? (
-        <DetailPanel
-          span={activeSpan}
-          rootStart={root.startTime}
-          onClose={clearActiveSpan}
-        />
       ) : null}
     </div>
   );

package/src/components/new-trace-viewer/types.ts

@@ -0,0 +1,2 @@
+export type { Span, SpanEvent, Trace } from '../trace-viewer/types';
+export type { TraceWithMeta } from '../../lib/trace-builder';

package/src/components/new-trace-viewer/utils.ts

@@ -1,4 +1,4 @@
-import type { Span, SpanEvent } from '../trace-viewer/types';
+import type { Span, SpanEvent } from './types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 
 // ---------------------------------------------------------------------------

package/src/components/sidebar/attribute-panel.tsx

@@ -8,20 +8,17 @@ import { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
+import { CopyButton } from '../new-trace-viewer/components/copy-button';
+import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
 import {
   DecryptClickContext,
   RunClickContext,
   StreamClickContext,
 } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
-import {
-  ErrorStackBlock,
-  isStructuredErrorWithStack,
-} from '../ui/error-stack-block';
+import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
 import { TimestampTooltip } from '../ui/timestamp-tooltip';
-import { CopyButton } from '../new-trace-viewer/components/copy-button';
-import { MiddleTruncate } from '../new-trace-viewer/components/middle-truncate/middle-truncate';
 import { ConversationView } from './conversation-view';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -548,9 +545,9 @@ const attributeToDisplayFn: Record<
     if (isExpiredMarker(value)) return <ExpiredFieldBlock />;
     if (!hasDisplayContent(value)) return null;
 
-    // If the error object has a `stack` field, render it as readable
-    // pre-formatted text. Otherwise fall back to the raw JSON viewer.
-    if (isStructuredErrorWithStack(value)) {
+    // Structured workflow errors may be persisted as either `{ message }` or
+    // `{ message, stack }`. Render both with the dedicated error block.
+    if (isStructuredError(value)) {
       return (
         <DetailCard summary="Error" defaultOpen>
           <ErrorStackBlock value={value} />

package/src/components/sidebar/events-list.tsx

@@ -4,10 +4,7 @@ import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
 import { ErrorCard } from '../ui/error-card';
-import {
-  ErrorStackBlock,
-  isStructuredErrorWithStack,
-} from '../ui/error-stack-block';
+import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -196,8 +193,8 @@ function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
 }
 
 /**
- * Renders event data, using ErrorStackBlock for error events that contain
- * a structured error with a stack trace, and CopyableDataBlock otherwise.
+ * Renders event data, using ErrorStackBlock for error events that contain a
+ * structured error, and CopyableDataBlock otherwise.
  */
 function EventDataBlock({
   eventType,
@@ -239,12 +236,12 @@ function EventDataBlock({
     const record = data as Record<string, unknown>;
 
     // Check the nested `error` field first (the StructuredError)
-    if (isStructuredErrorWithStack(record.error)) {
+    if (isStructuredError(record.error)) {
       return <ErrorStackBlock value={record.error} />;
     }
 
-    // Some error formats put the stack at the top level of eventData
-    if (isStructuredErrorWithStack(record)) {
+    // Some error formats put the message/stack at the top level of eventData.
+    if (isStructuredError(record)) {
       return <ErrorStackBlock value={record} />;
     }
   }

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

@@ -8,7 +8,6 @@ import {
   type SidebarDataContextValue,
   SidebarDataProvider,
 } from './sidebar/sidebar-data-context';
-import type { Trace } from './trace-viewer/types';
 
 const NewTraceViewer = ({
   run,
@@ -27,14 +26,13 @@ const NewTraceViewer = ({
   isLoadingMore?: boolean;
   loading?: boolean;
 }) => {
-  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+  const trace: TraceWithMeta | undefined = 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
   }, [run, events]);
-  const trace = traceWithMeta;
 
   if (!trace || (loading && events.length === 0)) {
     return <TraceViewerSkeleton />;
@@ -44,7 +42,7 @@ const NewTraceViewer = ({
     <SidebarDataProvider value={sidebarData}>
       <div className="relative w-full h-full flex">
         <NewTraceViewerComponent
-          trace={trace as Trace}
+          trace={trace}
           onLoadMore={onLoadMore}
           hasMore={hasMore}
           isLoadingMore={isLoadingMore}

package/src/components/ui/error-stack-block.tsx

@@ -3,18 +3,36 @@
 import { AlertCircle } from 'lucide-react';
 import { CopyButton } from '../new-trace-viewer/components/copy-button';
 
+export type StructuredErrorRecord = Record<string, unknown> & {
+  message?: string;
+  stack?: string;
+};
+
 /**
- * Check whether `value` looks like a structured error object with a `stack`
- * field that we can render as pre-formatted text.
+ * Check whether `value` looks like a structured error object we can render
+ * with the error block. Some persisted workflow errors only include a
+ * `message`, while runtime errors usually also include `stack`.
  */
-export function isStructuredErrorWithStack(
+export function isStructuredError(
   value: unknown
-): value is Record<string, unknown> & { stack: string } {
+): value is StructuredErrorRecord {
   return (
     value != null &&
     typeof value === 'object' &&
-    'stack' in value &&
-    typeof (value as Record<string, unknown>).stack === 'string'
+    (typeof (value as Record<string, unknown>).message === 'string' ||
+      typeof (value as Record<string, unknown>).stack === 'string')
+  );
+}
+
+/**
+ * Narrower guard kept for callers that specifically need a stack trace.
+ */
+export function isStructuredErrorWithStack(
+  value: unknown
+): value is StructuredErrorRecord & { stack: string } {
+  return (
+    isStructuredError(value) &&
+    typeof (value as StructuredErrorRecord).stack === 'string'
   );
 }
 
@@ -34,22 +52,22 @@ function deriveTitle(message: string): string {
 }
 
 /**
- * Renders an error with a `stack` field as a visually distinct error block.
- * Shows the error message with an alert icon at the top, separated from
- * the stack trace below.
+ * Renders a structured error as a visually distinct error block. Shows the
+ * error message with an alert icon at the top, separated from the stack trace
+ * or full message below.
  */
-export function ErrorStackBlock({
-  value,
-}: {
-  value: Record<string, unknown> & { stack: string };
-}) {
-  const stack = value.stack;
+export function ErrorStackBlock({ value }: { value: StructuredErrorRecord }) {
+  const stack = typeof value.stack === 'string' ? value.stack : undefined;
   const message = typeof value.message === 'string' ? value.message : undefined;
-  // V8's `Error.stack` already starts with `Name: message`, so when the
-  // body shows the stack it includes the full multi-line message anyway.
-  // The header just needs the first line.
-  const title = message ? deriveTitle(message) : undefined;
-  const copyText = message ? `${message}\n\n${stack}` : stack;
+  const body = stack ?? message ?? '';
+  // V8's `Error.stack` already starts with `Name: message`; message-only
+  // errors use the message as the body so long single-line failures remain
+  // readable even when the header truncates.
+  const title = message ? deriveTitle(message) : deriveTitle(body);
+  const copyText =
+    message && stack && !stack.includes(message)
+      ? `${message}\n\n${stack}`
+      : body;
 
   return (
     <div
@@ -76,8 +94,8 @@ export function ErrorStackBlock({
           <AlertCircle className="h-4 w-4 shrink-0" />
           <p
             className="text-xs font-semibold m-0 truncate"
-            // The full multi-line message is in the stack body below; the
-            // header just shows the first line, single-line, with overflow
+            // The full message or stack is in the body below; the header just
+            // shows the first line, single-line, with overflow
             // ellipsised so a long title doesn't push the copy button or
             // wrap into the framed hint/docs lines.
             title={message}
@@ -86,15 +104,17 @@ export function ErrorStackBlock({
           </p>
         </div>
       )}
-      <pre
-        className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
-        style={{
-          color: 'var(--ds-red-900)',
-          background: 'var(--ds-red-200)',
-        }}
-      >
-        {stack}
-      </pre>
+      {body && (
+        <pre
+          className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
+          style={{
+            color: 'var(--ds-red-900)',
+            background: 'var(--ds-red-200)',
+          }}
+        >
+          {body}
+        </pre>
+      )}
     </div>
   );
 }

package/src/lib/hydration.ts

@@ -135,7 +135,8 @@ export function getWebRevivers(): Revivers {
     // Error family. The reducer side (see
     // `packages/core/src/serialization/reducers/common.ts`) emits a tagged
     // entry for each built-in Error subclass plus the workflow-specific
-    // `FatalError` / `RetryableError` and `AggregateError`. Without
+    // `FatalError` / `RetryableError` / `HookConflictError` /
+    // `RuntimeDecryptionError` and `AggregateError`. Without
     // matching revivers here, `devalue.unflatten` throws "Unknown type X"
     // — which surfaces in the web o11y UI as "Failed to load resource
     // details: Unknown type FatalError".
@@ -183,6 +184,20 @@ export function getWebRevivers(): Revivers {
       if (value.stack !== undefined) error.stack = value.stack;
       return error;
     },
+    HookConflictError: (value) => {
+      const opts = 'cause' in value ? { cause: value.cause } : undefined;
+      const error = new Error(value.message, opts) as Error & {
+        token?: string;
+        conflictingRunId?: string;
+      };
+      error.name = 'HookConflictError';
+      error.token = value.token;
+      if (value.conflictingRunId !== undefined) {
+        error.conflictingRunId = value.conflictingRunId;
+      }
+      if (value.stack !== undefined) error.stack = value.stack;
+      return error;
+    },
     RetryableError: (value) => {
       const opts = 'cause' in value ? { cause: value.cause } : undefined;
       const error = new Error(value.message, opts) as Error & {
@@ -201,6 +216,18 @@ export function getWebRevivers(): Revivers {
       }
       return error;
     },
+    RuntimeDecryptionError: (value) => {
+      const opts = 'cause' in value ? { cause: value.cause } : undefined;
+      const error = new Error(value.message, opts) as Error & {
+        context?: unknown;
+      };
+      error.name = 'RuntimeDecryptionError';
+      if (value.context !== undefined) {
+        error.context = value.context;
+      }
+      if (value.stack !== undefined) error.stack = value.stack;
+      return error;
+    },
     DOMException: (value) => {
       // Modern browsers and Node 18+ expose `DOMException` on globalThis.
       // `AbortController.abort()` with no argument synthesizes one as the

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

@@ -1,10 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Span } from '../trace-viewer/types';
-interface DetailPanelProps {
-    span: Span;
-    rootStart: number;
-    onClose: () => void;
-}
-export declare function DetailPanel({ span, rootStart, onClose, }: DetailPanelProps): ReactNode;
-export {};
-//# sourceMappingURL=detail-panel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/detail-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAKlD,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,GAAG,SAAS,CAmC9B"}

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

@@ -1,13 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
-import { IconButton } from '../ui/icon-button';
-import { getSpanDurationMs } from './utils';
-export function DetailPanel({ span, rootStart, onClose, }) {
-    const startMs = getHighResInMs(span.startTime);
-    const durationMs = getSpanDurationMs(span);
-    const offsetMs = startMs - rootStart;
-    return (_jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [_jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [_jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), _jsx(IconButton, { "aria-label": "Close span details", onClick: onClose, children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [_jsx("dt", { className: "text-gray-900", children: "Resource" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), _jsx("dt", { className: "text-gray-900", children: "Duration" }), _jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), _jsx("dt", { className: "text-gray-900", children: "Offset" }), _jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), _jsx("dt", { className: "text-gray-900", children: "Status" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? 'Error' : 'OK' })] }) })] }));
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV0YWlsLXBhbmVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3LXRyYWNlLXZpZXdlci9kZXRhaWwtcGFuZWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFlBQVksQ0FBQzs7QUFFYixPQUFPLEVBQUUsQ0FBQyxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBR2pDLE9BQU8sRUFBRSxjQUFjLEVBQUUsY0FBYyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDN0UsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQVE1QyxNQUFNLFVBQVUsV0FBVyxDQUFDLEVBQzFCLElBQUksRUFDSixTQUFTLEVBQ1QsT0FBTyxHQUNVO0lBQ2pCLE1BQU0sT0FBTyxHQUFHLGNBQWMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDL0MsTUFBTSxVQUFVLEdBQUcsaUJBQWlCLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDM0MsTUFBTSxRQUFRLEdBQUcsT0FBTyxHQUFHLFNBQVMsQ0FBQztJQUVyQyxPQUFPLENBQ0wsaUJBQU8sU0FBUyxFQUFDLGlFQUFpRSxhQUNoRixlQUFLLFNBQVMsRUFBQyx1RUFBdUUsYUFDcEYsZUFBTSxTQUFTLEVBQUMsNkNBQTZDLFlBQzFELElBQUksQ0FBQyxJQUFJLEdBQ0wsRUFDUCxLQUFDLFVBQVUsa0JBQVksb0JBQW9CLEVBQUMsT0FBTyxFQUFFLE9BQU8sWUFDMUQsS0FBQyxDQUFDLElBQUMsU0FBUyxFQUFDLFNBQVMsR0FBRyxHQUNkLElBQ1QsRUFDTixjQUFLLFNBQVMsRUFBQywrQkFBK0IsWUFDNUMsY0FBSSxTQUFTLEVBQUMscURBQXFELGFBQ2pFLGFBQUksU0FBUyxFQUFDLGVBQWUseUJBQWMsRUFDM0MsYUFBSSxTQUFTLEVBQUMsMEJBQTBCLFlBQUUsSUFBSSxDQUFDLFFBQVEsR0FBTSxFQUM3RCxhQUFJLFNBQVMsRUFBQyxlQUFlLHlCQUFjLEVBQzNDLGFBQUksU0FBUyxFQUFDLHVDQUF1QyxZQUNsRCxjQUFjLENBQUMsVUFBVSxDQUFDLEdBQ3hCLEVBQ0wsYUFBSSxTQUFTLEVBQUMsZUFBZSx1QkFBWSxFQUN6QyxjQUFJLFNBQVMsRUFBQyx1Q0FBdUMsa0JBQ2pELGNBQWMsQ0FBQyxRQUFRLENBQUMsSUFDdkIsRUFDTCxhQUFJLFNBQVMsRUFBQyxlQUFlLHVCQUFZLEVBQ3pDLGFBQUksU0FBUyxFQUFDLDBCQUEwQixZQUNyQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxHQUNyQyxJQUNGLEdBQ0QsSUFDQSxDQUNULENBQUM7QUFDSixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQgeyBYIH0gZnJvbSAnbHVjaWRlLXJlYWN0JztcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUgeyBTcGFuIH0gZnJvbSAnLi4vdHJhY2Utdmlld2VyL3R5cGVzJztcbmltcG9ydCB7IGZvcm1hdER1cmF0aW9uLCBnZXRIaWdoUmVzSW5NcyB9IGZyb20gJy4uL3RyYWNlLXZpZXdlci91dGlsL3RpbWluZyc7XG5pbXBvcnQgeyBJY29uQnV0dG9uIH0gZnJvbSAnLi4vdWkvaWNvbi1idXR0b24nO1xuaW1wb3J0IHsgZ2V0U3BhbkR1cmF0aW9uTXMgfSBmcm9tICcuL3V0aWxzJztcblxuaW50ZXJmYWNlIERldGFpbFBhbmVsUHJvcHMge1xuICBzcGFuOiBTcGFuO1xuICByb290U3RhcnQ6IG51bWJlcjtcbiAgb25DbG9zZTogKCkgPT4gdm9pZDtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIERldGFpbFBhbmVsKHtcbiAgc3BhbixcbiAgcm9vdFN0YXJ0LFxuICBvbkNsb3NlLFxufTogRGV0YWlsUGFuZWxQcm9wcyk6IFJlYWN0Tm9kZSB7XG4gIGNvbnN0IHN0YXJ0TXMgPSBnZXRIaWdoUmVzSW5NcyhzcGFuLnN0YXJ0VGltZSk7XG4gIGNvbnN0IGR1cmF0aW9uTXMgPSBnZXRTcGFuRHVyYXRpb25NcyhzcGFuKTtcbiAgY29uc3Qgb2Zmc2V0TXMgPSBzdGFydE1zIC0gcm9vdFN0YXJ0O1xuXG4gIHJldHVybiAoXG4gICAgPGFzaWRlIGNsYXNzTmFtZT1cImdyaWQgaC1mdWxsIG1heC1oLWZ1bGwgZ3JpZC1yb3dzLVsyLjVyZW1fMWZyXSBiZy1iYWNrZ3JvdW5kLTIwMFwiPlxuICAgICAgPGRpdiBjbGFzc05hbWU9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWJldHdlZW4gcHgtMyBib3JkZXItYiBib3JkZXItZ3JheS1hbHBoYS00MDBcIj5cbiAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwidGV4dC1zbSBmb250LW1lZGl1bSB0ZXh0LWdyYXktMTAwMCB0cnVuY2F0ZVwiPlxuICAgICAgICAgIHtzcGFuLm5hbWV9XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPEljb25CdXR0b24gYXJpYS1sYWJlbD1cIkNsb3NlIHNwYW4gZGV0YWlsc1wiIG9uQ2xpY2s9e29uQ2xvc2V9PlxuICAgICAgICAgIDxYIGNsYXNzTmFtZT1cInctNCBoLTRcIiAvPlxuICAgICAgICA8L0ljb25CdXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwib3ZlcmZsb3cteS1hdXRvIHAtMyBzcGFjZS15LTNcIj5cbiAgICAgICAgPGRsIGNsYXNzTmFtZT1cImdyaWQgZ3JpZC1jb2xzLVthdXRvXzFmcl0gZ2FwLXgtMyBnYXAteS0xLjUgdGV4dC1zbVwiPlxuICAgICAgICAgIDxkdCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktOTAwXCI+UmVzb3VyY2U8L2R0PlxuICAgICAgICAgIDxkZCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktMTAwMCBmb250LW1vbm9cIj57c3Bhbi5yZXNvdXJjZX08L2RkPlxuICAgICAgICAgIDxkdCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktOTAwXCI+RHVyYXRpb248L2R0PlxuICAgICAgICAgIDxkZCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktMTAwMCB0YWJ1bGFyLW51bXMgZm9udC1tb25vXCI+XG4gICAgICAgICAgICB7Zm9ybWF0RHVyYXRpb24oZHVyYXRpb25Ncyl9XG4gICAgICAgICAgPC9kZD5cbiAgICAgICAgICA8ZHQgY2xhc3NOYW1lPVwidGV4dC1ncmF5LTkwMFwiPk9mZnNldDwvZHQ+XG4gICAgICAgICAgPGRkIGNsYXNzTmFtZT1cInRleHQtZ3JheS0xMDAwIHRhYnVsYXItbnVtcyBmb250LW1vbm9cIj5cbiAgICAgICAgICAgICt7Zm9ybWF0RHVyYXRpb24ob2Zmc2V0TXMpfVxuICAgICAgICAgIDwvZGQ+XG4gICAgICAgICAgPGR0IGNsYXNzTmFtZT1cInRleHQtZ3JheS05MDBcIj5TdGF0dXM8L2R0PlxuICAgICAgICAgIDxkZCBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktMTAwMCBmb250LW1vbm9cIj5cbiAgICAgICAgICAgIHtzcGFuLnN0YXR1cy5jb2RlID09PSAyID8gJ0Vycm9yJyA6ICdPSyd9XG4gICAgICAgICAgPC9kZD5cbiAgICAgICAgPC9kbD5cbiAgICAgIDwvZGl2PlxuICAgIDwvYXNpZGU+XG4gICk7XG59XG4iXX0=

package/dist/components/new-trace-viewer/util/constants.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=constants.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/util/constants.ts"],"names":[],"mappings":""}

package/dist/components/new-trace-viewer/util/constants.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3LXRyYWNlLXZpZXdlci91dGlsL2NvbnN0YW50cy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiIl19

package/src/components/new-trace-viewer/detail-panel.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { X } from 'lucide-react';
-import type { ReactNode } from 'react';
-import type { Span } from '../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
-import { IconButton } from '../ui/icon-button';
-import { getSpanDurationMs } from './utils';
-
-interface DetailPanelProps {
-  span: Span;
-  rootStart: number;
-  onClose: () => void;
-}
-
-export function DetailPanel({
-  span,
-  rootStart,
-  onClose,
-}: DetailPanelProps): ReactNode {
-  const startMs = getHighResInMs(span.startTime);
-  const durationMs = getSpanDurationMs(span);
-  const offsetMs = startMs - rootStart;
-
-  return (
-    <aside className="grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200">
-      <div className="flex items-center justify-between px-3 border-b border-gray-alpha-400">
-        <span className="text-sm font-medium text-gray-1000 truncate">
-          {span.name}
-        </span>
-        <IconButton aria-label="Close span details" onClick={onClose}>
-          <X className="w-4 h-4" />
-        </IconButton>
-      </div>
-      <div className="overflow-y-auto p-3 space-y-3">
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">
-          <dt className="text-gray-900">Resource</dt>
-          <dd className="text-gray-1000 font-mono">{span.resource}</dd>
-          <dt className="text-gray-900">Duration</dt>
-          <dd className="text-gray-1000 tabular-nums font-mono">
-            {formatDuration(durationMs)}
-          </dd>
-          <dt className="text-gray-900">Offset</dt>
-          <dd className="text-gray-1000 tabular-nums font-mono">
-            +{formatDuration(offsetMs)}
-          </dd>
-          <dt className="text-gray-900">Status</dt>
-          <dd className="text-gray-1000 font-mono">
-            {span.status.code === 2 ? 'Error' : 'OK'}
-          </dd>
-        </dl>
-      </div>
-    </aside>
-  );
-}