@workflow/web-shared 5.0.0-beta.12 → 5.0.0-beta.14

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';
@@ -264,6 +261,7 @@ const attributeOrder: AttributeKey[] = [
   'eventData',
   'input',
   'output',
+  'attributes',
   'resumeAt',
 ];
 
@@ -287,6 +285,7 @@ const attributeDisplayNames: Partial<Record<AttributeKey, string>> = {
   runId: 'Run ID',
   token: 'Token',
   eventType: 'Event Type',
+  errorCode: 'Error Code',
   correlationId: 'Correlation ID',
   deploymentId: 'Deployment ID',
   specVersion: 'Spec Version',
@@ -418,11 +417,11 @@ const attributeToDisplayFn: Record<
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => null,
   // Attributes MVP — string-string metadata attached to the run.
-  // Rendered as a JSON block; if empty/missing, hidden by the
-  // hasDisplayContent gate above.
+  // Rendered in its own collapsible DetailCard; if empty/missing, hidden
+  // by the hasDisplayContent gate.
   attributes: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
-    return JsonBlock(value);
+    return <DetailCard summary="Attributes">{JsonBlock(value)}</DetailCard>;
   },
   // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
   createdAt: timestampWithTooltipOrNull,
@@ -548,9 +547,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} />
@@ -591,6 +590,7 @@ const resolvableAttributes = [
   'output',
   'error',
   'metadata',
+  'attributes',
   'eventData',
 ];
 
@@ -600,6 +600,7 @@ const selfHeaderedAttributes = new Set([
   'input',
   'output',
   'error',
+  'attributes',
   'eventData',
 ]);
 

package/src/components/sidebar/entity-detail-panel.tsx

@@ -10,6 +10,10 @@ import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
 import { useSidebarDataOptional } from './sidebar-data-context';
+import {
+  mergeSpanDetail,
+  spanDetailMatchesSelection,
+} from './span-detail-merge';
 
 // Type guards for runtime validation of span attribute data
 function isStep(data: unknown): data is Step {
@@ -215,19 +219,27 @@ export function EntityDetailPanel({
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
 
+  const matchedSpanDetailData = useMemo(
+    () =>
+      spanDetailMatchesSelection(spanDetailData, resource, resourceId)
+        ? spanDetailData
+        : null,
+    [spanDetailData, resource, resourceId]
+  );
+
   // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
     if (resource !== 'hook' || !resourceId) return undefined;
     // 1. Try the externally-fetched detail data first
-    if (isHook(spanDetailData) && spanDetailData.token) {
-      return spanDetailData.token;
+    if (isHook(matchedSpanDetailData) && matchedSpanDetailData.token) {
+      return matchedSpanDetailData.token;
     }
     // 2. Try the span's inline data (reconstructed from hook_created event)
     if (isHook(data) && (data as Hook).token) {
       return (data as Hook).token;
     }
     return undefined;
-  }, [resource, resourceId, spanDetailData, data]);
+  }, [resource, resourceId, matchedSpanDetailData, data]);
 
   useEffect(() => {
     if (error && selectedSpan && resource) {
@@ -289,7 +301,7 @@ export function EntityDetailPanel({
 
       try {
         setResolvingHook(true);
-        const candidate = spanDetailData ?? data;
+        const candidate = matchedSpanDetailData ?? data;
         const hook = isHook(candidate) ? candidate : undefined;
         await onResolveHook(hookToken, payload, hook);
         toast.success('Hook resolved', {
@@ -310,17 +322,18 @@ export function EntityDetailPanel({
         setResolvingHook(false);
       }
     },
-    [onResolveHook, hookToken, resolvingHook, spanDetailData, data]
+    [onResolveHook, hookToken, resolvingHook, matchedSpanDetailData, data]
   );
 
-  // Prefer externally-fetched details when available. For sleep spans, the
-  // host fetches full correlated events (withData=true) and materializes a wait
-  // entity, so this includes resumeAt/completedAt without bloating trace payloads.
-  const displayData = (spanDetailData ?? data) as
-    | WorkflowRun
-    | Step
-    | Hook
-    | Event;
+  const displayData = useMemo(
+    () =>
+      mergeSpanDetail(data, matchedSpanDetailData) as
+        | WorkflowRun
+        | Step
+        | Hook
+        | Event,
+    [data, matchedSpanDetailData]
+  );
 
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
@@ -435,6 +448,8 @@ export function EntityDetailPanel({
             <EventsList
               events={rawEvents}
               onLoadEventData={onLoadEventData}
+              onStreamClick={onStreamClick}
+              onRunClick={onRunClick}
               encryptionKey={encryptionKey}
             />
           )}

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

@@ -3,11 +3,9 @@
 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 { 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 { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -196,8 +194,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 +237,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} />;
     }
   }
@@ -259,6 +257,8 @@ export function EventsList({
   isLoading = false,
   error,
   onLoadEventData,
+  onStreamClick,
+  onRunClick,
   encryptionKey,
 }: {
   events: Event[];
@@ -268,6 +268,8 @@ export function EventsList({
     correlationId: string,
     eventId: string
   ) => Promise<unknown | null>;
+  onStreamClick?: (streamId: string) => void;
+  onRunClick?: (runId: string) => void;
   /** When provided, signals that decryption is active (triggers re-load of expanded events) */
   encryptionKey?: Uint8Array;
 }) {
@@ -288,31 +290,35 @@ export function EventsList({
   }
 
   return (
-    <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
-      {isLoading ? (
-        <div className="flex flex-col -mx-4">
-          {[0, 1, 2].map((i) => (
-            <div
-              key={i}
-              className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
-            >
-              <Skeleton className="h-4 w-32 rounded" />
-              <Skeleton className="h-3 w-16 rounded" />
+    <RunClickContext.Provider value={onRunClick}>
+      <StreamClickContext.Provider value={onStreamClick}>
+        <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
+          {isLoading ? (
+            <div className="flex flex-col -mx-4">
+              {[0, 1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
+                >
+                  <Skeleton className="h-4 w-32 rounded" />
+                  <Skeleton className="h-3 w-16 rounded" />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-      ) : (
-        <div className="flex flex-col -mx-4">
-          {sortedEvents.map((event) => (
-            <EventItem
-              key={event.eventId}
-              event={event}
-              onLoadEventData={onLoadEventData}
-              encryptionKey={encryptionKey}
-            />
-          ))}
-        </div>
-      )}
-    </DetailCard>
+          ) : (
+            <div className="flex flex-col -mx-4">
+              {sortedEvents.map((event) => (
+                <EventItem
+                  key={event.eventId}
+                  event={event}
+                  onLoadEventData={onLoadEventData}
+                  encryptionKey={encryptionKey}
+                />
+              ))}
+            </div>
+          )}
+        </DetailCard>
+      </StreamClickContext.Provider>
+    </RunClickContext.Provider>
   );
 }

package/src/components/sidebar/span-detail-merge.ts

@@ -0,0 +1,65 @@
+const hasField = (
+  value: object,
+  key: string
+): value is Record<string, unknown> => key in value;
+
+/**
+ * Returns true when the fetched `detail` belongs to the current selection.
+ * The fetch lags selection, so it can briefly hold a previously selected span
+ * (even a different resource type); reject it before merging or its fields
+ * union into the wrong panel. Steps/hooks/waits carry their parent `runId`, so
+ * a `run` selection excludes objects identifiable as a child resource.
+ */
+export function spanDetailMatchesSelection(
+  detail: unknown,
+  resource: string | undefined,
+  resourceId: string | undefined
+): boolean {
+  if (!detail || typeof detail !== 'object' || !resource || !resourceId) {
+    return false;
+  }
+  switch (resource) {
+    case 'step':
+      return hasField(detail, 'stepId') && detail.stepId === resourceId;
+    case 'hook':
+      return hasField(detail, 'hookId') && detail.hookId === resourceId;
+    case 'sleep':
+      return hasField(detail, 'waitId') && detail.waitId === resourceId;
+    case 'run':
+      return (
+        hasField(detail, 'runId') &&
+        !('stepId' in detail) &&
+        !('hookId' in detail) &&
+        !('waitId' in detail) &&
+        detail.runId === resourceId
+      );
+    default:
+      return false;
+  }
+}
+
+/**
+ * Merges fetched `detail` over the span's own data. The detail supplies the
+ * heavy fields the trace strips (input/output/error/metadata, sleep resumeAt);
+ * the span's identity, status, and event-derived timestamps stay authoritative
+ * so they don't flicker to the backend row's millisecond-different values.
+ */
+export function mergeSpanDetail(spanData: unknown, detail: unknown): unknown {
+  if (!detail || typeof detail !== 'object') {
+    return spanData;
+  }
+  if (!spanData || typeof spanData !== 'object') {
+    return detail;
+  }
+  // Skip `undefined` span fields so they don't clobber a value the detail
+  // legitimately provides (e.g. a step's optional startedAt).
+  const merged: Record<string, unknown> = { ...detail };
+  for (const [key, value] of Object.entries(
+    spanData as Record<string, unknown>
+  )) {
+    if (value !== undefined) {
+      merged[key] = value;
+    }
+  }
+  return merged;
+}

package/src/components/trace-viewer/util/timing.ts

@@ -1,6 +1,6 @@
-import { formatDuration } from '../../../lib/utils';
+import { formatDuration, formatDurationPrecise } from '../../../lib/utils';
 
-export { formatDuration };
+export { formatDuration, formatDurationPrecise };
 
 export function getHighResInMs([seconds, nanoseconds]: [
   number,

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/index.ts

@@ -64,6 +64,7 @@ export type { StreamStep } from './lib/utils';
 export {
   extractConversation,
   formatDuration,
+  formatDurationPrecise,
   identifyStreamSteps,
   isDoStreamStep,
 } from './lib/utils';

package/src/lib/utils.ts

@@ -80,6 +80,63 @@ export function formatDuration(ms: number, compact = false): string {
   return parts.join(' ');
 }
 
+// Locale-aware formatter that always renders exactly two fraction digits.
+// Used for the seconds component of precise durations so values are never
+// snapped to a whole second (and thousands separators stay correct).
+const preciseSecondsFormatter = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+/**
+ * Formats a duration in milliseconds without snapping to whole seconds.
+ *
+ * Unlike {@link formatDuration}, this never rounds a sub-minute value up to
+ * the next whole second (e.g. 1626ms renders as "1.63s", not "2s").
+ *
+ * - < 1s: shows whole milliseconds (e.g. "626ms")
+ * - 1s – 1m: shows seconds with two decimals (e.g. "1.63s", "45.20s")
+ * - >= 1m: decomposes into d/h/m with two-decimal seconds (e.g. "1m 13.45s")
+ */
+export function formatDurationPrecise(ms: number): string {
+  if (ms === 0) {
+    return '0s';
+  }
+
+  if (ms < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms);
+    if (roundedMs < MS_IN_SECOND) {
+      return `${roundedMs}ms`;
+    }
+  }
+
+  const normalizedMs = Math.round(ms / 10) * 10;
+
+  if (normalizedMs < MS_IN_MINUTE) {
+    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+  }
+
+  const days = Math.floor(normalizedMs / MS_IN_DAY);
+  const hours = Math.floor((normalizedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((normalizedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = (normalizedMs % MS_IN_MINUTE) / MS_IN_SECOND;
+
+  const parts: string[] = [];
+
+  if (days > 0) {
+    parts.push(`${days}d`);
+  }
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`);
+  }
+  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+
+  return parts.join(' ');
+}
+
 /**
  * Returns a formatted pagination display string
  * @param currentPage - The current page number

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