@workflow/web-shared 5.0.0-beta.1 → 5.0.0-beta.11

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

@@ -1,16 +1,15 @@
 '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 { 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';
 
 /**
@@ -94,7 +93,7 @@ function EventItem({
 
   // 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);
@@ -102,25 +101,27 @@ function EventItem({
   }, [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
@@ -131,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>
@@ -177,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%]" />
@@ -200,7 +169,7 @@ function EventItem({
 
       {/* Event data */}
       {displayPayload != null && (
-        <div className="mt-2">
+        <div className="[&>div]:border-none [&>div]:rounded-none">
           <EventDataBlock eventType={event.eventType} data={displayPayload} />
         </div>
       )}
@@ -255,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.
@@ -308,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}
@@ -337,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,57 @@
+import type { WorkflowRun } from '@workflow/core/runtime';
+import type { Event } from '@workflow/world';
+import { useMemo } from 'react';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
+import { TraceViewerSkeleton } from './new-trace-viewer/components/trace-viewer-skeleton';
+import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
+import {
+  type SidebarDataContextValue,
+  SidebarDataProvider,
+} from './sidebar/sidebar-data-context';
+import type { Trace } from './trace-viewer/types';
+
+const NewTraceViewer = ({
+  run,
+  events,
+  sidebarData,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
+  loading = false,
+}: {
+  run: WorkflowRun;
+  events: Event[];
+  sidebarData: SidebarDataContextValue;
+  onLoadMore?: () => void | Promise<void>;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  loading?: boolean;
+}) => {
+  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
+  }, [run, events]);
+  const trace = traceWithMeta;
+
+  if (!trace || (loading && events.length === 0)) {
+    return <TraceViewerSkeleton />;
+  }
+
+  return (
+    <SidebarDataProvider value={sidebarData}>
+      <div className="relative w-full h-full flex">
+        <NewTraceViewerComponent
+          trace={trace as Trace}
+          onLoadMore={onLoadMore}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+        />
+      </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 };