@workflow/web-shared 5.0.0-beta.0 → 5.0.0-beta.10

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

@@ -1,16 +1,15 @@
 'use client';
 
-import type { Event } from '@workflow/world';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isExpiredMarker } from '../../lib/hydration';
+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 { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
 } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
-import { localMillisecondTime } from './attribute-panel';
-import { CopyableDataBlock } from './copyable-data-block';
+import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
 
 /**
@@ -55,62 +54,74 @@ function EventItem({
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const wasExpandedRef = useRef(false);
+  /** Mirrors whether we have a fetched payload; avoids stale `loadedData` in load closure. */
+  const loadedDataRef = useRef<unknown | 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 mergedDisplay = loadedData ?? existingData;
   const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
 
-  const loadEventData = useCallback(async () => {
-    if (!onLoadEventData || !event.correlationId || !event.eventId) return;
+  const loadEventData = useCallback(
+    async (options?: { force?: boolean }) => {
+      if (!onLoadEventData || !event.correlationId || !event.eventId) return;
+      if (!options?.force && loadedDataRef.current !== null) {
+        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);
-    }
-  }, [onLoadEventData, event.correlationId, event.eventId]);
+      try {
+        setIsLoading(true);
+        setLoadError(null);
+        const data = await onLoadEventData(event.correlationId, event.eventId);
+        loadedDataRef.current = data;
+        setLoadedData(data);
+      } catch (err) {
+        setLoadError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [onLoadEventData, event.correlationId, event.eventId]
+  );
 
   const handleExpand = useCallback(async () => {
-    if (existingData || loadedData !== null || isLoading) return;
+    if (isLoading) return;
     wasExpandedRef.current = true;
     await loadEventData();
-  }, [existingData, loadedData, isLoading, loadEventData]);
+  }, [isLoading, loadEventData]);
 
   // When the encryption key changes and this event was previously expanded,
   // re-load the data so it gets decrypted
-  useEffect(() => {
-    if (encryptionKey && wasExpandedRef.current && loadedData !== null) {
-      setLoadedData(null); // clear stale data
-      loadEventData();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [encryptionKey]);
+  useLayoutEffect(() => {
+    if (!encryptionKey || !wasExpandedRef.current) return;
+    loadedDataRef.current = null;
+    setLoadedData(null);
+    void loadEventData({ force: true });
+  }, [encryptionKey, loadEventData]);
 
   const createdAt = new Date(event.createdAt);
+  const createdAtTime = createdAt.toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  });
+
+  const displayPayload = isLoading ? loadedData : mergedDisplay;
 
   return (
     <DetailCard
-      summaryClassName="text-base py-2"
+      variant="card"
+      summaryClassName="px-3 py-2"
       summary={
-        <>
-          <span
-            className="font-medium"
-            style={{ color: 'var(--ds-gray-1000)' }}
-          >
+        <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 style={{ color: 'var(--ds-gray-700)' }}>
-            {localMillisecondTime(createdAt.getTime())}
           </span>
-        </>
+          <span className="shrink-0 text-label-13 text-gray-900">
+            {createdAtTime}
+          </span>
+        </div>
       }
       onToggle={
         canHaveData
@@ -121,44 +132,17 @@ function EventItem({
       }
     >
       {/* 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-[14px]" style={{ color: 'var(--ds-gray-700)' }}>
-            eventId
-          </span>
-          <span
-            className="max-w-[70%] truncate text-right text-[13px] font-mono"
-            style={{ color: 'var(--ds-gray-1000)' }}
-            title={event.eventId}
-          >
+      <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
+        <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>
         {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-[14px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-            >
-              correlationId
-            </span>
-            <span
-              className="max-w-[70%] truncate text-right text-[13px] font-mono"
-              style={{ color: 'var(--ds-gray-1000)' }}
-              title={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>
@@ -167,12 +151,7 @@ function EventItem({
 
       {/* Loading state */}
       {isLoading && (
-        <div
-          className="mt-2 rounded-md border p-3"
-          style={{
-            borderColor: 'var(--ds-gray-300)',
-          }}
-        >
+        <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%]" />
@@ -189,9 +168,9 @@ function EventItem({
       )}
 
       {/* Event data */}
-      {displayData != null && (
-        <div className="mt-2">
-          <EventDataBlock eventType={event.eventType} data={displayData} />
+      {displayPayload != null && (
+        <div className="[&>div]:border-none [&>div]:rounded-none">
+          <EventDataBlock eventType={event.eventType} data={displayPayload} />
         </div>
       )}
     </DetailCard>
@@ -199,17 +178,17 @@ function EventItem({
 }
 
 /**
- * Check if an eventData object has only expired marker values in its serialized
- * sub-fields (result, input, output, metadata, payload). Non-serialized fields
- * like `resumeAt` or `reason` are ignored.
+ * 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
+ * (e.g. `resumeAt`, `stepName`) are ignored.
  */
-function hasOnlyExpiredFields(data: unknown): boolean {
+function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
   if (data === null || typeof data !== 'object' || Array.isArray(data)) {
     return false;
   }
   const record = data as Record<string, unknown>;
-  const serializedKeys = ['result', 'input', 'output', 'metadata', 'payload'];
-  const presentKeys = serializedKeys.filter((k) => k in record);
+  const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+  const presentKeys = refKeys.filter((k) => k in record);
   return (
     presentKeys.length > 0 &&
     presentKeys.every((k) => isExpiredMarker(record[k]))
@@ -230,7 +209,7 @@ function EventDataBlock({
   // Expired data — show a simple message instead of the raw stub.
   // Check both the top-level eventData and nested sub-fields (result, input, etc.)
   // since the server stubs each ref field independently.
-  if (isExpiredMarker(data) || hasOnlyExpiredFields(data)) {
+  if (isExpiredMarker(data) || hasOnlyExpiredFields(data, eventType)) {
     return (
       <div
         className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
@@ -245,6 +224,10 @@ function EventDataBlock({
     );
   }
 
+  if (hasEncryptedFields({ eventType, eventData: data })) {
+    return <EncryptedDataBlock />;
+  }
+
   // 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.
@@ -298,26 +281,28 @@ export function EventsList({
     [events]
   );
 
+  const hasEvents = sortedEvents.length > 0 && !error;
+
+  if (!hasEvents && !isLoading) {
+    return <DetailCard summary="Events" disabled />;
+  }
+
   return (
-    <div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
-      <h3
-        className="text-heading-16 font-medium mt-4 mb-2"
-        style={{ color: 'var(--ds-gray-1000)' }}
-      >
-        Events {!isLoading && `(${sortedEvents.length})`}
-      </h3>
+    <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
       {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 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>
-      ) : 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">
+      ) : (
+        <div className="flex flex-col -mx-4">
           {sortedEvents.map((event) => (
             <EventItem
               key={event.eventId}
@@ -327,7 +312,7 @@ export function EventsList({
             />
           ))}
         </div>
-      ) : null}
-    </div>
+      )}
+    </DetailCard>
   );
 }

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

@@ -0,0 +1,62 @@
+'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';
+
+export interface SidebarDataContextValue {
+  run: WorkflowRun;
+  events: Event[];
+  spanDetailData: WorkflowRun | Step | Hook | Event | null;
+  spanDetailError?: Error | null;
+  spanDetailLoading?: boolean;
+  onSpanSelect: (info: SpanSelectionInfo) => void;
+  onStreamClick?: (streamId: string) => void;
+  onRunClick?: (runId: string) => void;
+  onWakeUpSleep?: (
+    runId: string,
+    correlationId: string
+  ) => Promise<{ stoppedCount: number }>;
+  onLoadEventData?: (
+    correlationId: string,
+    eventId: string
+  ) => Promise<unknown | null>;
+  onResolveHook?: (
+    hookToken: string,
+    payload: unknown,
+    hook?: Hook
+  ) => Promise<void>;
+  encryptionKey?: Uint8Array;
+  onDecrypt?: () => void;
+  isDecrypting?: boolean;
+  hasEncryptedData?: boolean;
+}
+
+const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
+SidebarDataContext.displayName = 'SidebarDataContext';
+
+export function SidebarDataProvider({
+  value,
+  children,
+}: {
+  value: SidebarDataContextValue;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarDataContext.Provider value={value}>
+      {children}
+    </SidebarDataContext.Provider>
+  );
+}
+
+export function useSidebarData(): SidebarDataContextValue {
+  const ctx = useContext(SidebarDataContext);
+  if (!ctx) {
+    throw new Error('useSidebarData must be used within a SidebarDataProvider');
+  }
+  return ctx;
+}
+
+export function useSidebarDataOptional(): SidebarDataContextValue | null {
+  return useContext(SidebarDataContext);
+}

package/src/components/stream-viewer.tsx

@@ -5,37 +5,13 @@ import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 import { DataInspector } from './ui/data-inspector';
 import { Skeleton } from './ui/skeleton';
 
-// ──────────────────────────────────────────────────────────────────────────
-// Helpers
-// ──────────────────────────────────────────────────────────────────────────
-
-function deserializeChunkText(text: string): string {
-  try {
-    const parsed = JSON.parse(text);
-    if (typeof parsed === 'string') {
-      return parsed;
-    }
-    return JSON.stringify(parsed, null, 2);
-  } catch {
-    return text;
-  }
-}
-
-function parseChunkData(text: string): unknown {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return text;
-  }
-}
-
 // ──────────────────────────────────────────────────────────────────────────
 // Types
 // ──────────────────────────────────────────────────────────────────────────
 
 export interface StreamChunk {
   id: number;
-  text: string;
+  value: unknown;
 }
 
 type Chunk = StreamChunk;
@@ -62,8 +38,6 @@ const ChunkRow = React.memo(function ChunkRow({
   chunk: Chunk;
   index: number;
 }) {
-  const parsed = parseChunkData(chunk.text);
-
   return (
     <div
       className="text-[11px] rounded-md border p-3"
@@ -72,22 +46,26 @@ const ChunkRow = React.memo(function ChunkRow({
         backgroundColor: 'var(--ds-gray-100)',
       }}
     >
-      <span
-        className="select-none mr-2"
-        style={{ color: 'var(--ds-gray-500)' }}
-      >
-        [{index}]
-      </span>
-      {typeof parsed === 'string' ? (
+      <div className="flex items-start gap-2">
         <span
-          className="whitespace-pre-wrap break-words"
-          style={{ color: 'var(--ds-gray-1000)' }}
+          className="select-none pt-px"
+          style={{ color: 'var(--ds-gray-500)' }}
         >
-          {deserializeChunkText(parsed)}
+          [{index}]
         </span>
-      ) : (
-        <DataInspector data={parsed} expandLevel={1} />
-      )}
+        <div className="min-w-0 flex-1">
+          {typeof chunk.value === 'string' ? (
+            <span
+              className="whitespace-pre-wrap break-words"
+              style={{ color: 'var(--ds-gray-1000)' }}
+            >
+              {chunk.value}
+            </span>
+          ) : (
+            <DataInspector data={chunk.value} expandLevel={1} />
+          )}
+        </div>
+      </div>
     </div>
   );
 });

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

@@ -14,22 +14,18 @@ export function getMsInHighRes(ms: number): [number, number] {
 }
 
 /**
- * Formats a duration for timeline display (compact single-unit format).
+ * Formats a duration for timeline display (compact format).
  * @deprecated Use formatDuration(ms, true) instead.
  */
 export const formatDurationForTimeline = (ms: number): string =>
   formatDuration(ms, true);
 
-const timeSelectionFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 export function formatTimeSelection(ms: number): string {
-  if (ms >= 1000) {
-    return `${timeSelectionFormatter.format(ms / 1000)}s`;
+  const roundedMs = Math.round(ms);
+  if (roundedMs < 1000) {
+    return `${roundedMs}ms`;
   }
-  return `${timeSelectionFormatter.format(ms)}ms`;
+  return `${Math.round(ms / 1000)}s`;
 }
 
 /**

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import type { WorkflowRun } from '@workflow/core/runtime';
+import type { Event } from '@workflow/world';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
+import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
+import {
+  SidebarDataProvider,
+  type SidebarDataContextValue,
+} from './sidebar/sidebar-data-context';
+import type { Trace } from './trace-viewer/types';
+
+const NewTraceViewer = ({
+  run,
+  events,
+  sidebarData,
+}: {
+  run: WorkflowRun;
+  events: Event[];
+  sidebarData: SidebarDataContextValue;
+}) => {
+  // Build trace only when actual data changes — no timer-driven rebuilds.
+  // Active span widths are animated imperatively by useLiveTick at 60fps.
+  const traceWithMeta: 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; useLiveTick handles live growth
+  }, [run, events]);
+  const trace = traceWithMeta;
+
+  if (!trace) {
+    return (
+      <div className="relative w-full h-full flex items-center justify-center">
+        <div className="text-gray-500 text-sm">Loading trace…</div>
+      </div>
+    );
+  }
+
+  return (
+    <SidebarDataProvider value={sidebarData}>
+      <div className="relative w-full h-full flex">
+        <NewTraceViewerComponent trace={trace as Trace} />
+      </div>
+    </SidebarDataProvider>
+  );
+};
+
+export { NewTraceViewer };

package/src/components/ui/button.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  [
+    'outline-none m-0 border-0 align-baseline no-underline group/trigger',
+    'relative cursor-pointer select-none transform translate-z-0',
+    'inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium',
+    '!text-gray-100',
+    'bg-gray-1000',
+    'transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out',
+    // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+    // consuming app), darkened via ancestor theme class without a registered variant.
+    'hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]',
+    '[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    '[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+    // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+    'focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]',
+    // disabled styles
+    'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
+    'disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100',
+    'aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100',
+  ],
+  {
+    variants: {
+      variant: {
+        default: '',
+        secondary:
+          'border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]',
+        ghost:
+          '[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]',
+      },
+      size: {
+        default: 'h-10 px-4 text-[14px]',
+        sm: 'h-8 px-3 text-[14px]',
+        xs: 'h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]',
+        icon: 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export function Button({
+  className,
+  variant,
+  size,
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { buttonVariants };