@workflow/web-shared 5.0.0-beta.24 → 5.0.0-beta.26

package/src/components/event-list-view.tsx

@@ -69,6 +69,25 @@ function formatEventTime(date: Date): string {
   );
 }
 
+function parseEventDate(value: unknown): Date | null {
+  if (value == null) return null;
+
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function getEffectiveEventDate(
+  event: Pick<Event, 'createdAt' | 'occurredAt'>
+): Date {
+  return parseEventDate(event.occurredAt) ?? new Date(event.createdAt);
+}
+
+function getEffectiveEventTime(
+  event: Pick<Event, 'createdAt' | 'occurredAt'>
+): number {
+  return getEffectiveEventDate(event).getTime();
+}
+
 function formatEventType(eventType: Event['eventType']): string {
   return eventType
     .split('_')
@@ -178,7 +197,7 @@ export function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
   // events for the same correlationId; the queued duration must be measured
   // against the first one, not the last.
   const chronological = [...events].sort(
-    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+    (a, b) => getEffectiveEventTime(a) - getEffectiveEventTime(b)
   );
 
   const createdTimes = new Map<string, number>();
@@ -187,7 +206,7 @@ export function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
   const durations = new Map<string, DurationInfo>();
 
   for (const event of chronological) {
-    const ts = new Date(event.createdAt).getTime();
+    const ts = getEffectiveEventTime(event);
     const key = event.correlationId ?? '__run__';
     const type: string = event.eventType;
 
@@ -652,7 +671,11 @@ const SORT_OPTIONS = [
   { value: 'asc' as const, label: 'Oldest' },
 ];
 
-function RowsSkeleton() {
+function RowsSkeleton({
+  showSeparateEventOccurrenceTimestamps = false,
+}: {
+  showSeparateEventOccurrenceTimestamps?: boolean;
+}) {
   return (
     <div className="flex-1 overflow-hidden">
       {Array.from({ length: 16 }, (_, i) => (
@@ -689,7 +712,12 @@ function RowsSkeleton() {
           <div className="w-5 flex-shrink-0 flex items-center justify-center">
             <Skeleton className="w-5 h-5" style={{ borderRadius: 4 }} />
           </div>
-          {/* Time */}
+          {showSeparateEventOccurrenceTimestamps && (
+            <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+              <Skeleton className="h-3" style={{ width: '70%' }} />
+            </div>
+          )}
+          {/* Created */}
           <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
             <Skeleton className="h-3" style={{ width: '70%' }} />
           </div>
@@ -754,9 +782,11 @@ interface EventsListProps {
     kind: ExactWorkflowSearchIdKind,
     signal?: AbortSignal
   ) => Promise<ExactIdSearchResult>;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }
 
-function EventRow({
+export function EventRow({
   event,
   index,
   isFirst,
@@ -777,6 +807,7 @@ function EventRow({
   encryptionKey,
   onEncryptedDataDetected,
   suppressGroupDimming = false,
+  showSeparateEventOccurrenceTimestamps = false,
 }: {
   event: Event;
   index: number;
@@ -799,6 +830,8 @@ function EventRow({
   onEncryptedDataDetected?: () => void;
   /** Exact-ID search results should not dim unrelated rows. */
   suppressGroupDimming?: boolean;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [loadedEventData, setLoadedEventData] = useState<unknown | null>(
@@ -827,6 +860,10 @@ function EventRow({
 
   const statusDotColor = getStatusDotColor(event.eventType);
   const createdAt = new Date(event.createdAt);
+  const occurredAt = parseEventDate(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps
+    ? createdAt
+    : getEffectiveEventDate(event);
   const hasExistingEventData = 'eventData' in event && event.eventData != null;
   const isRun = isRunLevel(event.eventType);
   const eventName = isRun
@@ -1007,13 +1044,28 @@ function EventRow({
             />
           </div>
 
-          {/* Time */}
+          {showSeparateEventOccurrenceTimestamps && (
+            <div
+              className="tabular-nums min-w-0 px-4"
+              style={{ color: 'var(--ds-gray-900)', flex: '2 1 0%' }}
+            >
+              {occurredAt ? (
+                <TimestampTooltip date={occurredAt}>
+                  <span>{formatEventTime(occurredAt)}</span>
+                </TimestampTooltip>
+              ) : (
+                '-'
+              )}
+            </div>
+          )}
+
+          {/* Created */}
           <div
             className="tabular-nums min-w-0 px-4"
             style={{ color: 'var(--ds-gray-900)', flex: '2 1 0%' }}
           >
-            <TimestampTooltip date={createdAt}>
-              <span>{formatEventTime(createdAt)}</span>
+            <TimestampTooltip date={displayedCreatedAt}>
+              <span>{formatEventTime(displayedCreatedAt)}</span>
             </TimestampTooltip>
           </div>
 
@@ -1192,6 +1244,7 @@ function EventListViewInner({
   isDecrypting = false,
   hasEncryptedData: hasEncryptedDataProp = false,
   onExactIdSearch,
+  showSeparateEventOccurrenceTimestamps = false,
 }: EventsListProps) {
   const toast = useToast();
   const [internalSortOrder, setInternalSortOrder] = useState<'asc' | 'desc'>(
@@ -1229,9 +1282,7 @@ function EventListViewInner({
     if (sourceEvents.length === 0) return [];
     const dir = effectiveSortOrder === 'desc' ? -1 : 1;
     return [...sourceEvents].sort(
-      (a, b) =>
-        dir *
-        (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
+      (a, b) => dir * (getEffectiveEventTime(a) - getEffectiveEventTime(b))
     );
   }, [events, effectiveSortOrder, isExactSearchActive, searchResults]);
 
@@ -1645,8 +1696,13 @@ function EventListViewInner({
         >
           <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
           <div className="w-5 flex-shrink-0" />
+          {showSeparateEventOccurrenceTimestamps && (
+            <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+              Occurred
+            </div>
+          )}
           <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
-            Time
+            Created
           </div>
           <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
             Event Type
@@ -1664,7 +1720,11 @@ function EventListViewInner({
 
         {/* Virtualized event rows or refetching skeleton */}
         {isRefetching || searchLoading ? (
-          <RowsSkeleton />
+          <RowsSkeleton
+            showSeparateEventOccurrenceTimestamps={
+              showSeparateEventOccurrenceTimestamps
+            }
+          />
         ) : sortedEvents.length === 0 ? (
           <div
             className="flex flex-1 items-center justify-center px-6 text-center text-sm"
@@ -1720,6 +1780,9 @@ function EventListViewInner({
                   encryptionKey={encryptionKey}
                   onEncryptedDataDetected={handleEncryptedDataDetected}
                   suppressGroupDimming={isExactSearchActive}
+                  showSeparateEventOccurrenceTimestamps={
+                    showSeparateEventOccurrenceTimestamps
+                  }
                 />
               );
             }}

package/src/components/index.ts

@@ -13,18 +13,24 @@ export {
   ResolveHookModal,
   useHookActions,
 } from './hook-actions';
+export { TraceViewerSkeleton } from './new-trace-viewer/components/trace-viewer-skeleton';
 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 SidebarDataContextValue,
+  SidebarDataProvider,
+} from './sidebar/sidebar-data-context';
+export type {
+  DetailResource,
+  FetchSpanDetail,
+} from './sidebar/use-selected-span-detail';
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export type { Span, SpanEvent } from './trace-viewer/types';
+export { NewTraceViewer } from './trace-viewer-new';
 export {
   DataInspector,
   type DataInspectorProps,
@@ -38,5 +44,3 @@ 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';
-export { TraceViewerSkeleton } from './new-trace-viewer/components/trace-viewer-skeleton';

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

@@ -2,7 +2,7 @@
 
 import { Check, Copy } from 'lucide-react';
 import { type JSX, useEffect, useRef, useState } from 'react';
-import { cn } from '../../../lib/utils';
+import { cn } from '../../../lib/cn';
 
 interface CopyButtonProps {
   copyText: string;

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

@@ -1,6 +1,6 @@
 import { Circle } from 'lucide-react';
 import { useRef } from 'react';
-import { cn } from '../../../lib/utils';
+import { cn } from '../../../lib/cn';
 import type { Span } from '../types';
 import { formatDurationPrecise } from '../../trace-viewer/util/timing';
 import {

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useRef } from 'react';
 import type { ClipboardEvent, ComponentPropsWithoutRef, JSX } from 'react';
-import { cn } from '../../../../lib/utils';
+import { cn } from '../../../../lib/cn';
 import {
   getMiddleTruncateCopyText,
   getMiddleTruncateCopyTextFromSelectionText,

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

@@ -2,7 +2,7 @@
 
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../../../lib/utils';
+import { cn } from '../../../lib/cn';
 import { TimestampTooltip } from '../../ui/timestamp-tooltip';
 import type { SpanMarker } from '../utils';
 
@@ -153,7 +153,7 @@ export function OffscreenMarkerIndicator({
         onReveal?.(targetMs);
       }}
       className={cn(
-        'pointer-events-auto absolute top-1/2 z-20 flex h-6 -translate-y-1/2 cursor-pointer items-center rounded-[0.25rem] border border-gray-alpha-400 bg-background-100 shadow-sm hover:bg-gray-100',
+        'pointer-events-auto absolute top-1/2 z-20 flex h-6 -translate-y-1/2 cursor-pointer items-center rounded-[0.25rem] border border-gray-alpha-400 bg-background-100 hover:bg-gray-100',
         direction === 'right' ? 'right-0 pl-1.5' : 'left-0 pr-1.5'
       )}
     >

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

@@ -10,7 +10,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { cn } from '../../../lib/utils';
+import { cn } from '../../../lib/cn';
 
 const GUTTER_PX = 1;
 const MIN_PX = 50;

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

@@ -11,7 +11,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { cn } from '../../../lib/utils';
+import { cn } from '../../../lib/cn';
 import {
   formatDuration,
   formatDurationPrecise,

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

@@ -39,14 +39,14 @@ import {
   TooltipTrigger,
 } from '../ui/tooltip';
 import EventList from './components/event-list';
-import { TraceShortcutHelper } from './components/trace-shortcut-helper';
-import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
 import { SplitPane } from './components/split-pane';
 import {
   TIMELINE_PADDING_PX,
   Timeline,
   TimelineHeader,
 } from './components/timeline';
+import { TraceShortcutHelper } from './components/trace-shortcut-helper';
+import { ROW_HEIGHT_PX, scrollRowIntoView } from './components/use-row-window';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { searchSpans } from './search';
 import type { TraceWithMeta } from './types';
@@ -822,10 +822,7 @@ function NewTraceViewerContent({
                 run={sidebar.run}
                 onStreamClick={sidebar.onStreamClick}
                 onRunClick={sidebar.onRunClick}
-                spanDetailData={sidebar.spanDetailData}
-                spanDetailError={sidebar.spanDetailError}
-                spanDetailLoading={sidebar.spanDetailLoading}
-                onSpanSelect={sidebar.onSpanSelect}
+                fetchSpanDetail={sidebar.fetchSpanDetail}
                 onWakeUpSleep={sidebar.onWakeUpSleep}
                 onLoadEventData={sidebar.onLoadEventData}
                 onResolveHook={sidebar.onResolveHook}
@@ -833,6 +830,9 @@ function NewTraceViewerContent({
                 onDecrypt={sidebar.onDecrypt}
                 isDecrypting={sidebar.isDecrypting}
                 selectedSpan={selectedSpan}
+                showSeparateEventOccurrenceTimestamps={
+                  sidebar.showSeparateEventOccurrenceTimestamps
+                }
               />
             </ErrorBoundary>
           </div>

package/src/components/run-trace-view.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import type { Event, Hook, WorkflowRun } from '@workflow/world';
 import { AlertCircle } from 'lucide-react';
-import type { SpanSelectionInfo } from './sidebar/entity-detail-panel';
+import type { FetchSpanDetail } from './sidebar/use-selected-span-detail';
 import { WorkflowTraceViewer } from './workflow-trace-view';
 
 interface RunTraceViewProps {
@@ -10,9 +10,7 @@ interface RunTraceViewProps {
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
-  spanDetailData?: WorkflowRun | Step | Hook | Event | null;
-  spanDetailLoading?: boolean;
-  spanDetailError?: Error | null;
+  fetchSpanDetail: FetchSpanDetail;
   onWakeUpSleep?: (
     runId: string,
     correlationId: string
@@ -25,10 +23,10 @@ interface RunTraceViewProps {
   onCancelRun?: (runId: string) => Promise<void>;
   onStreamClick?: (streamId: string) => void;
   onRunClick?: (runId: string) => void;
-  onSpanSelect?: (info: SpanSelectionInfo) => void;
   onLoadMoreSpans?: () => void | Promise<void>;
   hasMoreSpans?: boolean;
   isLoadingMoreSpans?: boolean;
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }
 
 export function RunTraceView({
@@ -36,18 +34,16 @@ export function RunTraceView({
   events,
   isLoading,
   error,
-  spanDetailData,
-  spanDetailLoading,
-  spanDetailError,
+  fetchSpanDetail,
   onWakeUpSleep,
   onResolveHook,
   onCancelRun,
   onStreamClick,
   onRunClick,
-  onSpanSelect,
   onLoadMoreSpans,
   hasMoreSpans,
   isLoadingMoreSpans,
+  showSeparateEventOccurrenceTimestamps,
 }: RunTraceViewProps) {
   if (error && !run) {
     return (
@@ -66,18 +62,18 @@ export function RunTraceView({
         events={events}
         run={run}
         isLoading={isLoading}
-        spanDetailData={spanDetailData}
-        spanDetailLoading={spanDetailLoading}
-        spanDetailError={spanDetailError}
+        fetchSpanDetail={fetchSpanDetail}
         onWakeUpSleep={onWakeUpSleep}
         onResolveHook={onResolveHook}
         onCancelRun={onCancelRun}
         onStreamClick={onStreamClick}
         onRunClick={onRunClick}
-        onSpanSelect={onSpanSelect}
         onLoadMoreSpans={onLoadMoreSpans}
         hasMoreSpans={hasMoreSpans}
         isLoadingMoreSpans={isLoadingMoreSpans}
+        showSeparateEventOccurrenceTimestamps={
+          showSeparateEventOccurrenceTimestamps
+        }
       />
     </div>
   );

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

@@ -768,10 +768,8 @@ export const AttributePanel = ({
 
     if (resource === 'sleep') return present;
 
-    // During loading, ensure sections appear so their skeletons render
-    // in the correct position (above the events section).
-    const loadingDefaults = ['input', 'output'];
-    for (const key of loadingDefaults) {
+    const loadingPlaceholders = ['input', 'output'];
+    for (const key of loadingPlaceholders) {
       if (!present.includes(key)) {
         present.push(key);
       }

package/src/components/sidebar/detail-card.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { type ReactNode, useState } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 export function DetailCard({
   summary,

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

@@ -1,9 +1,9 @@
 'use client';
 
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import type { Event, Hook, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useToast } from '../../lib/toast';
 import { DecryptClickContext } from '../ui/data-inspector';
 import { AttributePanel } from './attribute-panel';
@@ -11,19 +11,11 @@ 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 {
-  return data !== null && typeof data === 'object' && 'stepId' in data;
-}
-
-function isWorkflowRun(data: unknown): data is WorkflowRun {
-  return data !== null && typeof data === 'object' && 'runId' in data;
-}
+  type FetchSpanDetail,
+  useSelectedSpanDetail,
+} from './use-selected-span-detail';
 
+// Type guard for runtime validation of span attribute data
 function isHook(data: unknown): data is Hook {
   return data !== null && typeof data === 'object' && 'hookId' in data;
 }
@@ -61,10 +53,7 @@ export function EntityDetailPanel({
   run,
   onStreamClick,
   onRunClick,
-  spanDetailData,
-  spanDetailError,
-  spanDetailLoading,
-  onSpanSelect,
+  fetchSpanDetail,
   onWakeUpSleep,
   onLoadEventData,
   onResolveHook,
@@ -72,20 +61,14 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
+  showSeparateEventOccurrenceTimestamps = false,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
   /** Callback when a run reference is clicked */
   onRunClick?: (runId: string) => void;
-  /** Pre-fetched span detail data for the selected span. */
-  spanDetailData: WorkflowRun | Step | Hook | Event | null;
-  /** Error from external span detail fetch. */
-  spanDetailError?: Error | null;
-  /** Loading state from external span detail fetch. */
-  spanDetailLoading?: boolean;
-  /** Callback when a span is selected. Use this to fetch data externally and pass via spanDetailData. */
-  onSpanSelect: (info: SpanSelectionInfo) => void;
+  fetchSpanDetail: FetchSpanDetail;
   /** Callback to wake up a pending sleep call. */
   onWakeUpSleep?: (
     runId: string,
@@ -110,6 +93,8 @@ export function EntityDetailPanel({
   isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -128,53 +113,15 @@ export function EntityDetailPanel({
   const rawEvents = selectedSpan?.rawEvents;
   const rawEventsLength = rawEvents?.length ?? 0;
 
-  // Determine resource type, ID, and runId from the selected span
-  const { resource, resourceId, runId } = useMemo(() => {
-    if (!selectedSpan) {
-      return { resource: undefined, resourceId: undefined, runId: undefined };
-    }
-
-    const res = selectedSpan.resource;
-    if (res === 'step' && isStep(data)) {
-      return { resource: 'step', resourceId: data.stepId, runId: data.runId };
-    }
-    if (res === 'run' && isWorkflowRun(data)) {
-      return { resource: 'run', resourceId: data.runId, runId: undefined };
-    }
-    if (res === 'hook' && isHook(data)) {
-      return { resource: 'hook', resourceId: data.hookId, runId: undefined };
-    }
-    if (res === 'sleep') {
-      const waitData = data as { runId?: string } | undefined;
-      return {
-        resource: 'sleep',
-        resourceId: selectedSpan.spanId,
-        runId: waitData?.runId,
-      };
-    }
-    return { resource: undefined, resourceId: undefined, runId: undefined };
-  }, [selectedSpan, data]);
-
-  // Notify parent when span selection changes.
-  // Use a ref for the callback so the effect only fires when the actual
-  // selection values change, not when the callback identity changes due to
-  // parent re-renders from polling.
-  const onSpanSelectRef = useRef(onSpanSelect);
-  onSpanSelectRef.current = onSpanSelect;
-
-  useEffect(() => {
-    if (
-      resource &&
-      resourceId &&
-      ['run', 'step', 'hook', 'sleep'].includes(resource)
-    ) {
-      onSpanSelectRef.current({
-        resource: resource as 'run' | 'step' | 'hook' | 'sleep',
-        resourceId,
-        runId,
-      });
-    }
-  }, [resource, resourceId, runId]);
+  const {
+    status,
+    resource,
+    resourceId,
+    displayData,
+    detail: matchedSpanDetailData,
+    error,
+  } = useSelectedSpanDetail(selectedSpan, fetchSpanDetail);
+  const loading = status === 'loading';
 
   // Check if this sleep is still pending and can be woken up
   const canWakeUp = useMemo(() => {
@@ -216,17 +163,6 @@ export function EntityDetailPanel({
     resolvedHookIds,
   ]);
 
-  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;
@@ -325,16 +261,6 @@ export function EntityDetailPanel({
     [onResolveHook, hookToken, resolvingHook, matchedSpanDetailData, data]
   );
 
-  const displayData = useMemo(
-    () =>
-      mergeSpanDetail(data, matchedSpanDetailData) as
-        | WorkflowRun
-        | Step
-        | Hook
-        | Event,
-    [data, matchedSpanDetailData]
-  );
-
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
     const displayStepName = displayRecord.stepName;
@@ -451,6 +377,9 @@ export function EntityDetailPanel({
               onStreamClick={onStreamClick}
               onRunClick={onRunClick}
               encryptionKey={encryptionKey}
+              showSeparateEventOccurrenceTimestamps={
+                showSeparateEventOccurrenceTimestamps
+              }
             />
           )}
         </div>