@workflow/web-shared 5.0.0-beta.23 → 5.0.0-beta.25

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>

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

@@ -7,6 +7,7 @@ import { RunClickContext, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
+import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { AttrSetEventBlock } from './attributes-block';
 import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
@@ -34,6 +35,28 @@ const DATA_EVENT_TYPES = new Set([
   'attr_set',
 ]);
 
+const parseDateValue = (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;
+};
+
+const getEffectiveEventDate = (
+  event: Pick<Event, 'createdAt' | 'occurredAt'>
+): Date => parseDateValue(event.occurredAt) ?? new Date(event.createdAt);
+
+const formatEventTimestamp = (date: Date): string =>
+  date.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    fractionalSecondDigits: 3,
+    timeZoneName: 'short',
+  });
+
 /**
  * A single event row that can lazy-load its eventData when expanded.
  */
@@ -41,6 +64,7 @@ function EventItem({
   event,
   onLoadEventData,
   encryptionKey,
+  showSeparateEventOccurrenceTimestamps = false,
 }: {
   event: Event;
   onLoadEventData?: (
@@ -49,6 +73,8 @@ function EventItem({
   ) => Promise<unknown | null>;
   /** When this changes (e.g., Decrypt was clicked), invalidate cached data */
   encryptionKey?: Uint8Array;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }) {
   const [loadedData, setLoadedData] = useState<unknown | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -101,11 +127,18 @@ function EventItem({
   }, [encryptionKey, loadEventData]);
 
   const createdAt = new Date(event.createdAt);
-  const createdAtTime = createdAt.toLocaleTimeString(undefined, {
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-  });
+  const occurredAt = parseDateValue(event.occurredAt);
+  const displayedCreatedAt = showSeparateEventOccurrenceTimestamps
+    ? createdAt
+    : getEffectiveEventDate(event);
+  const displayedCreatedAtTime = displayedCreatedAt.toLocaleTimeString(
+    undefined,
+    {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    }
+  );
 
   const displayPayload = isLoading ? loadedData : mergedDisplay;
 
@@ -119,7 +152,7 @@ function EventItem({
             {event.eventType}
           </span>
           <span className="shrink-0 text-label-13 text-gray-900">
-            {createdAtTime}
+            {displayedCreatedAtTime}
           </span>
         </div>
       }
@@ -133,6 +166,16 @@ function EventItem({
     >
       {/* Event attributes */}
       <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
+        {showSeparateEventOccurrenceTimestamps && occurredAt && (
+          <div className="flex items-center justify-between gap-2 py-2 px-3">
+            <span className="text-label-12 text-gray-900">Occurred</span>
+            <TimestampTooltip date={occurredAt}>
+              <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
+                {formatEventTimestamp(occurredAt)}
+              </span>
+            </TimestampTooltip>
+          </div>
+        )}
         <div className="flex items-center justify-between gap-2 py-2 px-3">
           <span className="text-label-12 text-gray-900">Event ID</span>
           <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
@@ -268,6 +311,7 @@ export function EventsList({
   onStreamClick,
   onRunClick,
   encryptionKey,
+  showSeparateEventOccurrenceTimestamps = false,
 }: {
   events: Event[];
   isLoading?: boolean;
@@ -280,13 +324,16 @@ export function EventsList({
   onRunClick?: (runId: string) => void;
   /** When provided, signals that decryption is active (triggers re-load of expanded events) */
   encryptionKey?: Uint8Array;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }) {
-  // Sort by createdAt
+  // Sort by the timestamp shown as Created by default.
   const sortedEvents = useMemo(
     () =>
       [...events].sort(
         (a, b) =>
-          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+          getEffectiveEventDate(a).getTime() -
+          getEffectiveEventDate(b).getTime()
       ),
     [events]
   );
@@ -321,6 +368,9 @@ export function EventsList({
                   event={event}
                   onLoadEventData={onLoadEventData}
                   encryptionKey={encryptionKey}
+                  showSeparateEventOccurrenceTimestamps={
+                    showSeparateEventOccurrenceTimestamps
+                  }
                 />
               ))}
             </div>

package/src/components/sidebar/sidebar-data-context.tsx

@@ -1,16 +1,13 @@
 'use client';
 
-import { createContext, useContext, type ReactNode } from 'react';
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
-import type { SpanSelectionInfo } from './entity-detail-panel';
+import type { Event, Hook, WorkflowRun } from '@workflow/world';
+import { createContext, type ReactNode, useContext } from 'react';
+import type { FetchSpanDetail } from './use-selected-span-detail';
 
 export interface SidebarDataContextValue {
   run: WorkflowRun;
   events: Event[];
-  spanDetailData: WorkflowRun | Step | Hook | Event | null;
-  spanDetailError?: Error | null;
-  spanDetailLoading?: boolean;
-  onSpanSelect: (info: SpanSelectionInfo) => void;
+  fetchSpanDetail: FetchSpanDetail;
   onStreamClick?: (streamId: string) => void;
   onRunClick?: (runId: string) => void;
   onWakeUpSleep?: (
@@ -30,6 +27,8 @@ export interface SidebarDataContextValue {
   onDecrypt?: () => void;
   isDecrypting?: boolean;
   hasEncryptedData?: boolean;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }
 
 const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);

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

@@ -3,6 +3,75 @@ const hasField = (
   key: string
 ): value is Record<string, unknown> => key in value;
 
+const RESOURCES_WITH_FETCHED_DETAIL = new Set(['run', 'step', 'sleep']);
+
+export function resourceNeedsFetchedDetail(
+  resource: string | undefined
+): boolean {
+  return resource !== undefined && RESOURCES_WITH_FETCHED_DETAIL.has(resource);
+}
+
+export type SpanDetailStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export interface SpanDetailView {
+  status: SpanDetailStatus;
+  displayData: Record<string, unknown>;
+  detail: unknown;
+  error: Error | undefined;
+}
+
+export function deriveSpanDetailView(args: {
+  resource: string | undefined;
+  resourceId: string | undefined;
+  inlineData: unknown;
+  fetchedDetail: unknown;
+  fetchedError: Error | null;
+}): SpanDetailView {
+  const { resource, resourceId, inlineData, fetchedDetail, fetchedError } =
+    args;
+
+  const matchedDetail = spanDetailMatchesSelection(
+    fetchedDetail,
+    resource,
+    resourceId
+  )
+    ? fetchedDetail
+    : null;
+  const displayData = mergeSpanDetail(inlineData, matchedDetail) as Record<
+    string,
+    unknown
+  >;
+
+  if (!resource || !resourceId) {
+    return { status: 'idle', displayData, detail: null, error: undefined };
+  }
+  if (fetchedError) {
+    return {
+      status: 'error',
+      displayData,
+      detail: matchedDetail,
+      error: fetchedError,
+    };
+  }
+  if (!resourceNeedsFetchedDetail(resource)) {
+    return {
+      status: 'ready',
+      displayData,
+      detail: matchedDetail,
+      error: undefined,
+    };
+  }
+  if (matchedDetail !== null) {
+    return {
+      status: 'ready',
+      displayData,
+      detail: matchedDetail,
+      error: undefined,
+    };
+  }
+  return { status: 'loading', displayData, detail: null, error: undefined };
+}
+
 /**
  * Returns true when the fetched `detail` belongs to the current selection.
  * The fetch lags selection, so it can briefly hold a previously selected span

package/src/components/sidebar/use-selected-span-detail.ts

@@ -0,0 +1,146 @@
+'use client';
+
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  SelectedSpanInfo,
+  SpanSelectionInfo,
+} from './entity-detail-panel';
+import {
+  deriveSpanDetailView,
+  resourceNeedsFetchedDetail,
+  type SpanDetailStatus,
+} from './span-detail-merge';
+
+export type DetailResource = WorkflowRun | Step | Hook | Event;
+
+export type FetchSpanDetail = (
+  selection: SpanSelectionInfo
+) => Promise<DetailResource>;
+
+function deriveSpanSelection(
+  selectedSpan: SelectedSpanInfo | null
+): SpanSelectionInfo | null {
+  if (!selectedSpan) return null;
+  const { resource, data } = selectedSpan;
+
+  if (
+    resource === 'step' &&
+    data &&
+    typeof data === 'object' &&
+    'stepId' in data
+  ) {
+    const step = data as Step;
+    return { resource: 'step', resourceId: step.stepId, runId: step.runId };
+  }
+  if (
+    resource === 'run' &&
+    data &&
+    typeof data === 'object' &&
+    'runId' in data
+  ) {
+    return { resource: 'run', resourceId: (data as WorkflowRun).runId };
+  }
+  if (
+    resource === 'hook' &&
+    data &&
+    typeof data === 'object' &&
+    'hookId' in data
+  ) {
+    return { resource: 'hook', resourceId: (data as Hook).hookId };
+  }
+  if (resource === 'sleep') {
+    if (!selectedSpan.spanId) return null;
+    const waitData = data as { runId?: string } | undefined;
+    return {
+      resource: 'sleep',
+      resourceId: selectedSpan.spanId,
+      runId: waitData?.runId,
+    };
+  }
+  return null;
+}
+
+export interface SelectedSpanDetailResult {
+  status: SpanDetailStatus;
+  resource: SpanSelectionInfo['resource'] | undefined;
+  resourceId: string | undefined;
+  runId: string | undefined;
+  displayData: Record<string, unknown>;
+  detail: DetailResource | null;
+  error: Error | undefined;
+}
+
+export function useSelectedSpanDetail(
+  selectedSpan: SelectedSpanInfo | null,
+  fetchSpanDetail: FetchSpanDetail
+): SelectedSpanDetailResult {
+  const selection = useMemo(
+    () => deriveSpanSelection(selectedSpan),
+    [selectedSpan]
+  );
+  const resource = selection?.resource;
+  const resourceId = selection?.resourceId;
+  const runId = selection?.runId;
+  const selectionKey =
+    resource && resourceId ? `${resource}:${resourceId}` : null;
+  const needsFetch = resourceNeedsFetchedDetail(resource);
+
+  const [fetched, setFetched] = useState<{
+    detail: DetailResource | null;
+    error: Error | null;
+    errorKey: string | null;
+  }>({ detail: null, error: null, errorKey: null });
+
+  const tokenRef = useRef(0);
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+
+  useEffect(() => {
+    if (!selectionKey || !needsFetch) {
+      return;
+    }
+    const activeSelection = selectionRef.current;
+    if (!activeSelection) {
+      return;
+    }
+    const token = ++tokenRef.current;
+    fetchSpanDetail(activeSelection)
+      .then((detail) => {
+        if (tokenRef.current !== token) return;
+        setFetched({ detail, error: null, errorKey: null });
+      })
+      .catch((err: unknown) => {
+        if (tokenRef.current !== token) return;
+        setFetched({
+          detail: null,
+          error: err instanceof Error ? err : new Error(String(err)),
+          errorKey: selectionKey,
+        });
+      });
+  }, [selectionKey, runId, needsFetch, fetchSpanDetail]);
+
+  const scopedError = fetched.errorKey === selectionKey ? fetched.error : null;
+
+  const view = useMemo(
+    () =>
+      deriveSpanDetailView({
+        resource,
+        resourceId,
+        inlineData: selectedSpan?.data,
+        fetchedDetail: fetched.detail,
+        fetchedError: scopedError,
+      }),
+    [resource, resourceId, selectedSpan?.data, fetched.detail, scopedError]
+  );
+
+  return {
+    status: view.status,
+    resource,
+    resourceId,
+    runId,
+    displayData: view.displayData,
+    detail: view.detail as DetailResource | null,
+    error: view.error,
+  };
+}

package/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',

package/src/components/ui/button.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const buttonVariants = cva(
   [

package/src/components/ui/card.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const Card = React.forwardRef<
   HTMLDivElement,

package/src/components/ui/context-card.tsx

@@ -14,7 +14,7 @@ import {
 import { createPortal } from 'react-dom';
 import useMeasure from 'react-use-measure';
 import { useReducedMotion } from '../../hooks/use-reduced-motion';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const INACTIVE_TIMEOUT_MS = 250;
 const ENTER_DELAY_MS = 0;

package/src/components/ui/error-card.tsx

@@ -2,7 +2,7 @@
 
 import { AlertCircle, ChevronDown } from 'lucide-react';
 import { useState } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 interface ErrorCardProps {
   /** Title shown in the header */

package/src/components/ui/icon-button.tsx

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const iconButtonVariants = cva(
   [

package/src/components/ui/kbd.tsx

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import type { ComponentProps, ReactNode } from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const kbdVariants = cva(
   'inline-flex items-center justify-center rounded px-1 text-center font-sans',

package/src/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 function Skeleton({
   className,

package/src/components/ui/tooltip.tsx

@@ -2,7 +2,7 @@
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const TooltipProvider = TooltipPrimitive.Provider;