@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

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

@@ -1,39 +1,43 @@
 'use client';
 
-import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isExpiredMarker } from '../../lib/hydration';
-import { ErrorCard } from '../ui/error-card';
+import { type Event, getEventDataRefFields } from '@workflow/world';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
 import {
-  ErrorStackBlock,
-  isStructuredErrorWithStack,
-} from '../ui/error-stack-block';
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '../ui/collapsible';
+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 { localMillisecondTime } from './attribute-panel';
-import { CopyableDataBlock } from './copyable-data-block';
-import { DetailCard } from './detail-card';
+import { TimestampTooltip } from '../ui/timestamp-tooltip';
+import { AttrSetEventBlock } from './attributes-block';
+import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 
-/**
- * Event types whose eventData contains an error field with a StructuredError.
- */
-const ERROR_EVENT_TYPES = new Set(['step_failed', 'step_retrying']);
+const parseDateValue = (value: unknown): Date | null => {
+  if (value == null) return null;
 
-/**
- * Event types that carry user-serialized data in their eventData field.
- */
-const DATA_EVENT_TYPES = new Set([
-  'step_created',
-  'step_completed',
-  'step_failed',
-  'step_retrying',
-  'hook_created',
-  'hook_received',
-  'run_created',
-  'run_completed',
-  'run_failed',
-  'wait_created',
-  'wait_completed',
-]);
+  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.
@@ -42,14 +46,14 @@ function EventItem({
   event,
   onLoadEventData,
   encryptionKey,
+  showSeparateEventOccurrenceTimestamps = false,
 }: {
   event: Event;
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => 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);
@@ -62,19 +66,20 @@ function EventItem({
   const existingData =
     'eventData' in event && event.eventData != null ? event.eventData : null;
   const mergedDisplay = loadedData ?? existingData;
-  const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
+  const canHaveData =
+    existingData !== null || getEventDataRefFields(event.eventType).length > 0;
 
   const loadEventData = useCallback(
-    async (options?: { force?: boolean }) => {
-      if (!onLoadEventData || !event.correlationId || !event.eventId) return;
-      if (!options?.force && loadedDataRef.current !== null) {
+    async (force: boolean) => {
+      if (!onLoadEventData) return;
+      if (!force && loadedDataRef.current !== null) {
         return;
       }
 
       try {
         setIsLoading(true);
         setLoadError(null);
-        const data = await onLoadEventData(event.correlationId, event.eventId);
+        const data = await onLoadEventData(event);
         loadedDataRef.current = data;
         setLoadedData(data);
       } catch (err) {
@@ -83,46 +88,44 @@ function EventItem({
         setIsLoading(false);
       }
     },
-    [onLoadEventData, event.correlationId, event.eventId]
+    [onLoadEventData, event]
   );
 
-  const handleExpand = useCallback(async () => {
+  const handleExpand = useCallback(() => {
     if (isLoading) return;
     wasExpandedRef.current = true;
-    await loadEventData();
+    void loadEventData(false);
   }, [isLoading, loadEventData]);
 
   // When the encryption key changes and this event was previously expanded,
   // re-load the data so it gets decrypted
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!encryptionKey || !wasExpandedRef.current) return;
     loadedDataRef.current = null;
     setLoadedData(null);
-    void loadEventData({ force: true });
+    void loadEventData(true);
   }, [encryptionKey, loadEventData]);
 
   const createdAt = new Date(event.createdAt);
+  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;
 
   return (
-    <DetailCard
-      summaryClassName="text-base py-2"
-      summary={
-        <>
-          <span
-            className="font-medium"
-            style={{ color: 'var(--ds-gray-1000)' }}
-          >
-            {event.eventType}
-          </span>{' '}
-          -{' '}
-          <span style={{ color: 'var(--ds-gray-700)' }}>
-            {localMillisecondTime(createdAt.getTime())}
-          </span>
-        </>
-      }
-      onToggle={
+    <CollapsibleRoot
+      variant="card"
+      onOpenChange={
         canHaveData
           ? (open) => {
               if (open) handleExpand();
@@ -130,90 +133,79 @@ function EventItem({
           : undefined
       }
     >
-      {/* Event attributes */}
-      <div
-        className="flex flex-col divide-y rounded-md border overflow-hidden"
-        style={{
-          borderColor: 'var(--ds-gray-300)',
-          backgroundColor: 'var(--ds-gray-100)',
-        }}
-      >
-        <div
-          className="flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5"
-          style={{ borderColor: 'var(--ds-gray-300)' }}
-        >
-          <span
-            className="text-[13px] font-medium"
-            style={{ color: 'var(--ds-gray-700)' }}
-          >
-            Event ID
+      <CollapsibleTrigger className="px-3 py-2">
+        <div className="flex w-full items-center justify-between gap-3">
+          <span className="text-gray-1000 text-label-12 font-mono">
+            {event.eventType}
           </span>
-          <span
-            className="max-w-[70%] truncate text-right text-[13px] font-mono"
-            style={{ color: 'var(--ds-gray-1000)' }}
-            title={event.eventId}
-          >
-            {event.eventId}
+          <span className="shrink-0 text-label-13 text-gray-900">
+            {displayedCreatedAtTime}
           </span>
         </div>
-        {event.correlationId && (
-          <div
-            className="flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5"
-            style={{ borderColor: 'var(--ds-gray-300)' }}
-          >
-            <span
-              className="text-[13px] font-medium"
-              style={{ color: 'var(--ds-gray-700)' }}
-            >
-              Correlation ID
-            </span>
-            <span
-              className="max-w-[70%] truncate text-right text-[13px] font-mono"
-              style={{ color: 'var(--ds-gray-1000)' }}
-              title={event.correlationId}
-            >
-              {event.correlationId}
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        {/* 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">
+              {event.eventId}
             </span>
           </div>
-        )}
-      </div>
-
-      {/* Loading state */}
-      {isLoading && (
-        <div
-          className="mt-2 rounded-md border p-3"
-          style={{
-            borderColor: 'var(--ds-gray-300)',
-          }}
-        >
-          <Skeleton className="h-4 w-[35%]" />
-          <Skeleton className="mt-2 h-4 w-[90%]" />
-          <Skeleton className="mt-2 h-4 w-[75%]" />
+          {event.correlationId && (
+            <div className="flex items-center justify-between gap-2 py-2 px-3">
+              <span className="text-label-12 text-gray-900">
+                Correlation ID
+              </span>
+              <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
+                {event.correlationId}
+              </span>
+            </div>
+          )}
         </div>
-      )}
 
-      {/* Error state */}
-      {loadError && (
-        <ErrorCard
-          title="Failed to load event data"
-          details={loadError}
-          className="mt-2"
-        />
-      )}
+        {/* Loading state */}
+        {isLoading && (
+          <div className="p-3">
+            <Skeleton className="h-4 w-[35%]" />
+            <Skeleton className="mt-2 h-4 w-[90%]" />
+            <Skeleton className="mt-2 h-4 w-[75%]" />
+          </div>
+        )}
+
+        {/* Error state */}
+        {loadError && (
+          <ErrorCard
+            title="Failed to load event data"
+            details={loadError}
+            className="mt-2"
+          />
+        )}
 
-      {/* Event data */}
-      {displayPayload != null && (
-        <div className="mt-2">
-          <EventDataBlock eventType={event.eventType} data={displayPayload} />
-        </div>
-      )}
-    </DetailCard>
+        {/* Event data */}
+        {displayPayload != null && (
+          <div className="[&>div]:border-none [&>div]:rounded-none">
+            <EventDataBlock eventType={event.eventType} data={displayPayload} />
+          </div>
+        )}
+      </CollapsibleContent>
+    </CollapsibleRoot>
   );
 }
 
 /**
  * Check if an eventData object has only expired marker values in ref/payload
- * fields for this event type (see {@link EVENT_DATA_REF_FIELDS}). Other keys
+ * fields for this event type (see {@link getEventDataRefFields}). Other keys
  * (e.g. `resumeAt`, `stepName`) are ignored.
  */
 function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
@@ -221,7 +213,7 @@ function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
     return false;
   }
   const record = data as Record<string, unknown>;
-  const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+  const refKeys = getEventDataRefFields(eventType);
   const presentKeys = refKeys.filter((k) => k in record);
   return (
     presentKeys.length > 0 &&
@@ -230,8 +222,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,
@@ -246,7 +238,7 @@ function EventDataBlock({
   if (isExpiredMarker(data) || hasOnlyExpiredFields(data, eventType)) {
     return (
       <div
-        className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+        className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-label-12"
         style={{
           borderColor: 'var(--ds-gray-300)',
           backgroundColor: 'var(--ds-gray-100)',
@@ -258,23 +250,32 @@ function EventDataBlock({
     );
   }
 
-  // For error events (step_failed, step_retrying), the eventData has the shape
-  // { error: StructuredError, stack?: string, ... }. Check both the top-level
-  // value and the nested `error` field for a stack trace.
+  if (hasEncryptedFields({ eventType, eventData: data })) {
+    return <EncryptedDataBlock />;
+  }
+
+  // Attribute changes — render the changed keys and the writer instead of
+  // the raw JSON payload.
+  if (eventType === 'attr_set') {
+    return <AttrSetEventBlock data={data} />;
+  }
+
+  // Error events carry a StructuredError in eventData.error. Check both the
+  // nested field and the top-level value for legacy payloads.
   if (
-    ERROR_EVENT_TYPES.has(eventType) &&
+    getEventDataRefFields(eventType).includes('error') &&
     data != null &&
     typeof data === 'object'
   ) {
     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} />;
     }
   }
@@ -289,58 +290,75 @@ export function EventsList({
   isLoading = false,
   error,
   onLoadEventData,
+  onStreamClick,
+  onRunClick,
   encryptionKey,
+  showSeparateEventOccurrenceTimestamps = false,
 }: {
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => 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;
+  /** 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]
   );
 
+  const hasEvents = sortedEvents.length > 0 && !error;
+
+  if (!hasEvents && !isLoading) {
+    return <Collapsible label="Events" disabled />;
+  }
+
   return (
-    <div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
-      <h3
-        className="text-label-14 font-medium mt-4 mb-2"
-        style={{ color: 'var(--ds-gray-1000)' }}
-      >
-        Events
-      </h3>
-      {isLoading ? (
-        <div className="flex flex-col gap-4">
-          <Skeleton className="h-9 w-full rounded-md" />
-          <Skeleton className="h-9 w-full rounded-md" />
-          <Skeleton className="h-9 w-full rounded-md" />
-        </div>
-      ) : null}
-      {!isLoading && !error && sortedEvents.length === 0 && (
-        <div className="text-sm">No events found</div>
-      )}
-      {sortedEvents.length > 0 && !error ? (
-        <div className="flex flex-col gap-4">
-          {sortedEvents.map((event) => (
-            <EventItem
-              key={event.eventId}
-              event={event}
-              onLoadEventData={onLoadEventData}
-              encryptionKey={encryptionKey}
-            />
-          ))}
-        </div>
-      ) : null}
-    </div>
+    <RunClickContext.Provider value={onRunClick}>
+      <StreamClickContext.Provider value={onStreamClick}>
+        <CollapsibleRoot defaultOpen>
+          <CollapsibleTrigger>Events</CollapsibleTrigger>
+          <CollapsibleContent className="mb-0">
+            {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 className="flex flex-col -mx-4">
+                {sortedEvents.map((event) => (
+                  <EventItem
+                    key={event.eventId}
+                    event={event}
+                    onLoadEventData={onLoadEventData}
+                    encryptionKey={encryptionKey}
+                    showSeparateEventOccurrenceTimestamps={
+                      showSeparateEventOccurrenceTimestamps
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </CollapsibleContent>
+        </CollapsibleRoot>
+      </StreamClickContext.Provider>
+    </RunClickContext.Provider>
   );
 }

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

@@ -1,26 +1,20 @@
 '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?: (
     runId: string,
     correlationId: string
   ) => Promise<{ stoppedCount: number }>;
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => Promise<unknown | null>;
   onResolveHook?: (
     hookToken: string,
     payload: unknown,
@@ -30,6 +24,12 @@ export interface SidebarDataContextValue {
   onDecrypt?: () => void;
   isDecrypting?: boolean;
   hasEncryptedData?: boolean;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
+  getModuleSourceUrl?: (info: {
+    moduleSpecifier: string;
+    deploymentId: string;
+  }) => string | undefined;
 }
 
 const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);