@workflow/web-shared 4.1.0-beta.50 → 4.1.0-beta.52

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

@@ -1,25 +1,210 @@
 'use client';
 
-import { useMemo } from 'react';
-import { ErrorCard } from '../ui/error-card';
-import type { SpanEvent } from '../trace-viewer/types.js';
-import { AttributeBlock, localMillisecondTime } from './attribute-panel';
+import type { Event } from '@workflow/world';
+import { useCallback, useMemo, useState } from 'react';
+import { ObjectInspector } from 'react-inspector';
+import { useDarkMode } from '../../hooks/use-dark-mode';
+import { inspectorThemeDark, inspectorThemeLight } from '../ui/inspector-theme';
+import { localMillisecondTime } from './attribute-panel';
 import { DetailCard } from './detail-card';
 
+/**
+ * Event types that carry user-serialized data in their eventData field.
+ */
+const DATA_EVENT_TYPES = new Set([
+  'step_created',
+  'step_completed',
+  'step_failed',
+  'run_created',
+  'run_completed',
+]);
+
+/**
+ * A single event row that can lazy-load its eventData when expanded.
+ */
+function EventItem({
+  event,
+  onLoadEventData,
+}: {
+  event: Event;
+  onLoadEventData?: (
+    correlationId: string,
+    eventId: string
+  ) => Promise<unknown | null>;
+}) {
+  const isDark = useDarkMode();
+  const [loadedData, setLoadedData] = useState<unknown | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  // Check if the event already has eventData from the store
+  const existingData =
+    'eventData' in event && event.eventData != null ? event.eventData : null;
+  const displayData = existingData ?? loadedData;
+  const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
+
+  const handleExpand = useCallback(async () => {
+    if (existingData || loadedData !== null || isLoading) return;
+    if (!onLoadEventData || !event.correlationId || !event.eventId) return;
+
+    try {
+      setIsLoading(true);
+      setLoadError(null);
+      const data = await onLoadEventData(event.correlationId, event.eventId);
+      setLoadedData(data);
+    } catch (err) {
+      setLoadError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    existingData,
+    loadedData,
+    isLoading,
+    onLoadEventData,
+    event.correlationId,
+    event.eventId,
+  ]);
+
+  const createdAt = new Date(event.createdAt);
+
+  return (
+    <DetailCard
+      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={
+        canHaveData
+          ? (open) => {
+              if (open) handleExpand();
+            }
+          : 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 items-center justify-between px-2.5 py-1.5"
+          style={{ borderColor: 'var(--ds-gray-300)' }}
+        >
+          <span
+            className="text-[11px] font-medium"
+            style={{ color: 'var(--ds-gray-700)' }}
+          >
+            eventId
+          </span>
+          <span
+            className="text-[11px] font-mono"
+            style={{ color: 'var(--ds-gray-1000)' }}
+          >
+            {event.eventId}
+          </span>
+        </div>
+        {event.correlationId && (
+          <div
+            className="flex items-center justify-between px-2.5 py-1.5"
+            style={{ borderColor: 'var(--ds-gray-300)' }}
+          >
+            <span
+              className="text-[11px] font-medium"
+              style={{ color: 'var(--ds-gray-700)' }}
+            >
+              correlationId
+            </span>
+            <span
+              className="text-[11px] font-mono"
+              style={{ color: 'var(--ds-gray-1000)' }}
+            >
+              {event.correlationId}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Loading state */}
+      {isLoading && (
+        <div
+          className="mt-2 text-xs rounded-md border p-2"
+          style={{
+            borderColor: 'var(--ds-gray-300)',
+            color: 'var(--ds-gray-600)',
+          }}
+        >
+          Loading event data...
+        </div>
+      )}
+
+      {/* Error state */}
+      {loadError && (
+        <div
+          className="mt-2 text-xs rounded-md border p-2"
+          style={{
+            borderColor: 'var(--ds-red-300)',
+            color: 'var(--ds-red-700)',
+          }}
+        >
+          {loadError}
+        </div>
+      )}
+
+      {/* Event data */}
+      {displayData != null && (
+        <div
+          className="mt-2 overflow-x-auto rounded-md border p-3"
+          style={{ borderColor: 'var(--ds-gray-300)' }}
+        >
+          <ObjectInspector
+            data={displayData}
+            // @ts-expect-error react-inspector accepts theme objects at runtime
+            // see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
+            theme={isDark ? inspectorThemeDark : inspectorThemeLight}
+            expandLevel={2}
+          />
+        </div>
+      )}
+    </DetailCard>
+  );
+}
+
 export function EventsList({
   events,
-  fullEvents,
   isLoading = false,
   error,
+  onLoadEventData,
 }: {
-  events: SpanEvent[];
-  fullEvents?: SpanEvent[] | null;
+  events: Event[];
   isLoading?: boolean;
   error?: Error | null;
+  onLoadEventData?: (
+    correlationId: string,
+    eventId: string
+  ) => Promise<unknown | null>;
 }) {
-  const displayData = useMemo(
-    () => (fullEvents?.length ? fullEvents : events) || [],
-    [events, fullEvents]
+  // Sort by createdAt
+  const sortedEvents = useMemo(
+    () =>
+      [...events].sort(
+        (a, b) =>
+          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+      ),
+    [events]
   );
 
   return (
@@ -28,89 +213,20 @@ export function EventsList({
         className="text-heading-16 font-medium mt-4 mb-2"
         style={{ color: 'var(--ds-gray-1000)' }}
       >
-        Events {!isLoading && `(${displayData.length})`}
+        Events {!isLoading && `(${sortedEvents.length})`}
       </h3>
-      {error ? (
-        <ErrorCard
-          title="Failed to load full event list"
-          details={error?.message}
-          className="my-4"
-        />
-      ) : null}
       {isLoading ? <div>Loading events...</div> : null}
-      {!isLoading && !error && displayData.length === 0 && (
+      {!isLoading && !error && sortedEvents.length === 0 && (
         <div className="text-sm">No events found</div>
       )}
-      {displayData.length > 0 && !error ? (
+      {sortedEvents.length > 0 && !error ? (
         <div className="flex flex-col gap-2">
-          {displayData.map((event, index) => (
-            <DetailCard
-              key={`${event.name}-${index}`}
-              summary={
-                <>
-                  <span
-                    className="font-medium"
-                    style={{ color: 'var(--ds-gray-1000)' }}
-                  >
-                    {event.name}
-                  </span>{' '}
-                  -{' '}
-                  <span style={{ color: 'var(--ds-gray-700)' }}>
-                    {localMillisecondTime(
-                      event.timestamp[0] * 1000 + event.timestamp[1] / 1e6
-                    )}
-                  </span>
-                </>
-              }
-            >
-              {/* Bordered container with separator */}
-              <div
-                className="flex flex-col divide-y rounded-md border overflow-hidden"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                  backgroundColor: 'var(--ds-gray-100)',
-                }}
-              >
-                {Object.entries(event.attributes)
-                  .filter(([key]) => key !== 'eventData')
-                  .map(([key, value]) => (
-                    <div
-                      key={key}
-                      className="flex items-center justify-between px-2.5 py-1.5"
-                      style={{ borderColor: 'var(--ds-gray-300)' }}
-                    >
-                      <span
-                        className="text-[11px] font-medium"
-                        style={{ color: 'var(--ds-gray-700)' }}
-                      >
-                        {key}
-                      </span>
-                      <span
-                        className="text-[11px] font-mono"
-                        style={{ color: 'var(--ds-gray-1000)' }}
-                      >
-                        {String(value)}
-                      </span>
-                    </div>
-                  ))}
-              </div>
-              {error ? (
-                <ErrorCard
-                  title="Failed to load event data"
-                  details={String(error)}
-                  className="my-4"
-                />
-              ) : null}
-              {!error && !isLoading && event.attributes.eventData != null && (
-                <div className="mt-2">
-                  <AttributeBlock
-                    isLoading={isLoading}
-                    attribute="eventData"
-                    value={event.attributes.eventData}
-                  />
-                </div>
-              )}
-            </DetailCard>
+          {sortedEvents.map((event) => (
+            <EventItem
+              key={event.eventId}
+              event={event}
+              onLoadEventData={onLoadEventData}
+            />
           ))}
         </div>
       ) : null}

package/src/components/stream-viewer.tsx

@@ -1,23 +1,28 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { ObjectInspector } from 'react-inspector';
+import { useDarkMode } from '../hooks/use-dark-mode';
+
+export interface StreamChunk {
+  id: number;
+  /** The raw hydrated value from the stream */
+  data: unknown;
+}
 
 interface StreamViewerProps {
   streamId: string;
-  chunks: Chunk[];
+  chunks: StreamChunk[];
   isLive: boolean;
   error?: string | null;
 }
 
-interface Chunk {
-  id: number;
-  text: string;
-}
+import { inspectorThemeDark, inspectorThemeLight } from './ui/inspector-theme';
 
 /**
  * StreamViewer component that displays real-time stream data.
- * It connects to a stream and displays chunks as they arrive,
- * with auto-scroll functionality.
+ * Each chunk is rendered with ObjectInspector for proper display
+ * of complex types (Map, Set, Date, custom classes, etc.).
  */
 export function StreamViewer({
   streamId,
@@ -25,7 +30,7 @@ export function StreamViewer({
   isLive,
   error,
 }: StreamViewerProps) {
-  // TODO: Handle 410 error specifically (stream expired)
+  const isDark = useDarkMode();
   const [hasMoreBelow, setHasMoreBelow] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -39,14 +44,14 @@ export function StreamViewer({
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: chunks.length triggers scroll on new chunks
   useEffect(() => {
-    // Auto-scroll to bottom when new content arrives
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
-    // Check scroll position after content changes
     checkScrollPosition();
   }, [chunks.length, checkScrollPosition]);
 
+  const theme = isDark ? inspectorThemeDark : inspectorThemeLight;
+
   return (
     <div className="flex flex-col h-full pb-4">
       <div className="flex items-center justify-between mb-3 px-1">
@@ -106,25 +111,36 @@ export function StreamViewer({
             </div>
           ) : (
             chunks.map((chunk, index) => (
-              <pre
+              <div
                 key={`${streamId}-chunk-${chunk.id}`}
-                className="text-[11px] rounded-md border p-3 m-0 whitespace-pre-wrap break-words"
+                className="rounded-md border p-3"
                 style={{
                   borderColor: 'var(--ds-gray-300)',
-                  backgroundColor: 'var(--ds-gray-100)',
-                  color: 'var(--ds-gray-1000)',
                 }}
               >
-                <code>
+                <span
+                  className="select-none mr-2 text-[11px] font-mono"
+                  style={{ color: 'var(--ds-gray-500)' }}
+                >
+                  [{index}]
+                </span>
+                {typeof chunk.data === 'string' ? (
                   <span
-                    className="select-none mr-2"
-                    style={{ color: 'var(--ds-gray-500)' }}
+                    className="text-[11px] font-mono"
+                    style={{ color: 'var(--ds-gray-1000)' }}
                   >
-                    [{index}]
+                    {chunk.data}
                   </span>
-                  {chunk.text}
-                </code>
-              </pre>
+                ) : (
+                  <ObjectInspector
+                    data={chunk.data}
+                    // @ts-expect-error react-inspector accepts theme objects at runtime despite
+                    // types declaring string only — see https://github.com/storybookjs/react-inspector/blob/main/README.md#theme
+                    theme={theme}
+                    expandLevel={1}
+                  />
+                )}
+              </div>
             ))
           )}
         </div>

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

@@ -118,8 +118,9 @@ export interface TraceViewerState {
    */
   isMobile: boolean;
   /**
-   * Panel to render instead of the default span detail panel. The panel
-   * should use the context to get the selected span and other state.
+   * @deprecated Panel rendering has been moved outside the context.
+   * This field is kept for backwards compatibility but is no longer
+   * used by the workflow trace viewer.
    */
   customPanelComponent: ReactNode | null;
   /**

package/src/components/ui/inspector-theme.ts

@@ -0,0 +1,64 @@
+/**
+ * Shared theme configuration for react-inspector's ObjectInspector.
+ *
+ * Used by AttributePanel, EventListView, StreamViewer, and any other
+ * component that renders data with ObjectInspector.
+ */
+
+export const inspectorThemeLight = {
+  BASE_FONT_SIZE: '11px',
+  BASE_LINE_HEIGHT: 1.4,
+  BASE_BACKGROUND_COLOR: 'transparent',
+  BASE_COLOR: 'var(--ds-gray-1000)',
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
+  HTML_TAG_COLOR: 'rgb(168, 148, 166)',
+  HTML_TAGNAME_COLOR: 'rgb(136, 18, 128)',
+  HTML_TAGNAME_TEXT_TRANSFORM: 'lowercase',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(153, 69, 0)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(26, 26, 166)',
+  HTML_COMMENT_COLOR: 'rgb(35, 110, 37)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+  ARROW_COLOR: 'var(--ds-gray-600)',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  TREENODE_FONT_FAMILY: 'var(--font-mono)',
+  TREENODE_FONT_SIZE: '11px',
+  TREENODE_LINE_HEIGHT: 1.4,
+  TREENODE_PADDING_LEFT: 12,
+  TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
+  TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
+  TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
+  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
+  TABLE_DATA_BACKGROUND_IMAGE: 'none',
+  TABLE_DATA_BACKGROUND_SIZE: '0',
+};
+
+export const inspectorThemeDark = {
+  ...inspectorThemeLight,
+  BASE_COLOR: 'var(--ds-gray-1000)',
+  OBJECT_NAME_COLOR: 'rgb(227, 110, 236)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(127, 127, 127)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(233, 63, 59)',
+  OBJECT_VALUE_NUMBER_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'hsl(252, 100%, 75%)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(85, 106, 242)',
+  HTML_TAG_COLOR: 'rgb(93, 176, 215)',
+  HTML_TAGNAME_COLOR: 'rgb(93, 176, 215)',
+  HTML_ATTRIBUTE_NAME_COLOR: 'rgb(155, 187, 220)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'rgb(242, 151, 102)',
+  HTML_COMMENT_COLOR: 'rgb(137, 137, 137)',
+  HTML_DOCTYPE_COLOR: 'rgb(192, 192, 192)',
+};