@workflow/web-shared 4.1.0-beta.64 → 4.1.0-beta.66

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "4.1.0-beta.64",
+  "version": "4.1.0-beta.66",
   "private": false,
   "files": [
     "dist",
@@ -52,23 +52,25 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "4.2.0-beta.69",
+    "@workflow/core": "4.2.0-beta.71",
     "@workflow/utils": "4.1.0-beta.13",
-    "@workflow/world": "4.1.0-beta.12"
+    "@workflow/world": "4.1.0-beta.13"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.4",
     "@types/node": "22.19.0",
     "@types/react": "19",
     "@types/react-dom": "19",
-    "ai": "5.0.104",
+    "ai": "6.0.116",
     "typescript": "^5.9.3",
+    "vitest": "^4.0.18",
     "@workflow/tsconfig": "4.0.1-beta.0"
   },
   "scripts": {
     "build": "tsc && cp -r src/components/trace-viewer/*.css dist/components/trace-viewer/ && cp src/styles.css dist/styles.css",
     "dev": "tsc --watch",
     "clean": "tsc --build --clean && rm -r dist ||:",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit",
     "lint": "biome check",
     "format": "biome format --write"

package/src/components/event-list-view.tsx

@@ -6,14 +6,18 @@ import { Check, ChevronRight, Copy } from 'lucide-react';
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
+import { isEncryptedMarker } from '../lib/hydration';
+import { DecryptButton } from './ui/decrypt-button';
 import { formatDuration } from '../lib/utils';
 import { DataInspector } from './ui/data-inspector';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
 } from './ui/error-stack-block';
+import { LoadMoreButton } from './ui/load-more-button';
 import { MenuDropdown } from './ui/menu-dropdown';
 import { Skeleton } from './ui/skeleton';
+import { TimestampTooltip } from './ui/timestamp-tooltip';
 
 /**
  * Event types whose eventData contains an error field with a StructuredError.
@@ -208,6 +212,15 @@ function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
   return durations;
 }
 
+/** Check if a loaded eventData object contains any encrypted marker values. */
+function hasEncryptedValues(data: unknown): boolean {
+  if (!data || typeof data !== 'object') return false;
+  for (const val of Object.values(data as Record<string, unknown>)) {
+    if (isEncryptedMarker(val)) return true;
+  }
+  return false;
+}
+
 function isRunLevel(eventType: string): boolean {
   return (
     eventType === 'run_created' ||
@@ -596,6 +609,76 @@ const SORT_OPTIONS = [
   { value: 'asc' as const, label: 'Oldest' },
 ];
 
+function RowsSkeleton() {
+  return (
+    <div className="flex-1 overflow-hidden">
+      {Array.from({ length: 16 }, (_, i) => (
+        <div key={i} className="flex items-center gap-0" style={{ height: 40 }}>
+          {/* Gutter area */}
+          <div
+            className="relative flex-shrink-0 self-stretch flex items-center"
+            style={{ width: GUTTER_WIDTH }}
+          >
+            {/* Vertical line skeleton */}
+            <div
+              style={{
+                position: 'absolute',
+                left: 8,
+                top: i === 0 ? '50%' : 0,
+                bottom: 0,
+                width: 2,
+              }}
+            >
+              <Skeleton className="w-full h-full" style={{ borderRadius: 1 }} />
+            </div>
+            {/* Dot skeleton */}
+            <Skeleton
+              className="flex-shrink-0"
+              style={{
+                width: i % 4 === 0 ? 8 : 6,
+                height: i % 4 === 0 ? 8 : 6,
+                borderRadius: '50%',
+                marginLeft: i % 4 === 0 ? 5 : 6,
+              }}
+            />
+          </div>
+          {/* Chevron placeholder */}
+          <div className="w-5 flex-shrink-0 flex items-center justify-center">
+            <Skeleton className="w-5 h-5" style={{ borderRadius: 4 }} />
+          </div>
+          {/* Time */}
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '70%' }} />
+          </div>
+          {/* Event Type */}
+          <div
+            className="min-w-0 px-4 flex items-center gap-1.5"
+            style={{ flex: '2 1 0%' }}
+          >
+            <Skeleton
+              className="flex-shrink-0"
+              style={{ width: 6, height: 6, borderRadius: '50%' }}
+            />
+            <Skeleton className="h-3" style={{ width: '60%' }} />
+          </div>
+          {/* Name */}
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '50%' }} />
+          </div>
+          {/* Correlation ID */}
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '75%' }} />
+          </div>
+          {/* Event ID */}
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '75%' }} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 // ──────────────────────────────────────────────────────────────────────────
 // Event row
 // ──────────────────────────────────────────────────────────────────────────
@@ -616,6 +699,10 @@ interface EventsListProps {
   /** Called when the user changes sort order. When provided, the sort dropdown is shown
    *  and the parent is expected to refetch from the API with the new order. */
   onSortOrderChange?: (order: 'asc' | 'desc') => void;
+  /** Called when the user clicks the Decrypt button. */
+  onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched. */
+  isDecrypting?: boolean;
 }
 
 function EventRow({
@@ -637,6 +724,7 @@ function EventRow({
   cachedEventData,
   onCacheEventData,
   encryptionKey,
+  onEncryptedDataDetected,
 }: {
   event: Event;
   index: number;
@@ -656,6 +744,7 @@ function EventRow({
   cachedEventData: unknown | null;
   onCacheEventData: (eventId: string, data: unknown) => void;
   encryptionKey?: Uint8Array;
+  onEncryptedDataDetected?: () => void;
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [loadedEventData, setLoadedEventData] = useState<unknown | null>(
@@ -666,6 +755,18 @@ function EventRow({
     cachedEventData !== null
   );
 
+  // Notify parent if cached data has encrypted markers on mount
+  useEffect(() => {
+    if (
+      cachedEventData !== null &&
+      !encryptionKey &&
+      hasEncryptedValues(cachedEventData)
+    ) {
+      onEncryptedDataDetected?.();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const rowGroupKey = isRunLevel(event.eventType)
     ? '__run__'
     : (event.correlationId ?? undefined);
@@ -714,6 +815,9 @@ function EventRow({
       if (data !== null && data !== undefined) {
         setLoadedEventData(data);
         onCacheEventData(event.eventId, data);
+        if (!encryptionKey && hasEncryptedValues(data)) {
+          onEncryptedDataDetected?.();
+        }
       }
     } catch (err) {
       setLoadError(
@@ -729,6 +833,8 @@ function EventRow({
     hasExistingEventData,
     onLoadEventData,
     onCacheEventData,
+    encryptionKey,
+    onEncryptedDataDetected,
   ]);
 
   // Auto-load event data when remounting in expanded state without cached data
@@ -846,7 +952,9 @@ function EventRow({
             className="tabular-nums min-w-0 px-4"
             style={{ color: 'var(--ds-gray-900)', flex: '2 1 0%' }}
           >
-            {formatEventTime(createdAt)}
+            <TimestampTooltip date={createdAt}>
+              <span>{formatEventTime(createdAt)}</span>
+            </TimestampTooltip>
           </div>
 
           {/* Event Type */}
@@ -1020,6 +1128,8 @@ export function EventListView({
   isLoading = false,
   sortOrder: sortOrderProp,
   onSortOrderChange,
+  onDecrypt,
+  isDecrypting = false,
 }: EventsListProps) {
   const [internalSortOrder, setInternalSortOrder] = useState<'asc' | 'desc'>(
     'asc'
@@ -1046,6 +1156,26 @@ export function EventListView({
     );
   }, [events, effectiveSortOrder]);
 
+  // Detect encrypted fields across all loaded events (inline eventData).
+  const hasEncryptedInlineData = useMemo(() => {
+    if (!events) return false;
+    for (const event of events) {
+      const ed = (event as Record<string, unknown>).eventData;
+      if (hasEncryptedValues(ed)) return true;
+    }
+    return false;
+  }, [events]);
+
+  // Tracks whether any expanded row's lazy-loaded data contained encrypted markers.
+  // Set to true by EventRow via onEncryptedDataDetected; never reset (sticky).
+  const [foundEncryptedInLazyData, setFoundEncryptedInLazyData] =
+    useState(false);
+  const handleEncryptedDataDetected = useCallback(() => {
+    setFoundEncryptedInLazyData(true);
+  }, []);
+
+  const hasEncryptedData = hasEncryptedInlineData || foundEncryptedInLazyData;
+
   const { correlationNameMap, workflowName } = useMemo(
     () => buildNameMaps(events ?? null, run ?? null),
     [events, run]
@@ -1201,52 +1331,51 @@ export function EventListView({
     }
   }, [searchQuery, searchIndex]);
 
-  if (!events || events.length === 0) {
-    if (isLoading) {
-      return (
-        <div className="h-full flex flex-col overflow-hidden">
-          {/* Skeleton search bar */}
-          <div style={{ padding: 6 }}>
-            <Skeleton style={{ height: 40, borderRadius: 6 }} />
+  // Track whether we've ever had events to distinguish initial load from refetch
+  const hasHadEventsRef = useRef(false);
+  if (sortedEvents.length > 0) {
+    hasHadEventsRef.current = true;
+  }
+  const isInitialLoad = isLoading && !hasHadEventsRef.current;
+  const isRefetching =
+    isLoading && hasHadEventsRef.current && sortedEvents.length === 0;
+
+  if (isInitialLoad) {
+    return (
+      <div className="h-full flex flex-col overflow-hidden">
+        {/* Skeleton search bar */}
+        <div style={{ padding: 6 }}>
+          <Skeleton style={{ height: 40, borderRadius: 6 }} />
+        </div>
+        {/* Skeleton header */}
+        <div
+          className="flex items-center gap-0 h-10 border-b flex-shrink-0"
+          style={{ borderColor: 'var(--ds-gray-alpha-200)' }}
+        >
+          <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
+          <div className="w-5 flex-shrink-0" />
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 40 }} />
           </div>
-          {/* Skeleton header */}
-          <div
-            className="flex items-center gap-0 h-10 border-b flex-shrink-0 px-4"
-            style={{ borderColor: 'var(--ds-gray-alpha-200)' }}
-          >
-            <Skeleton className="h-3" style={{ width: 60 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 80 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 50 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 90 }} />
-            <div style={{ flex: 1 }} />
-            <Skeleton className="h-3" style={{ width: 70 }} />
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 72 }} />
           </div>
-          {/* Skeleton rows */}
-          <div className="flex-1 overflow-hidden">
-            {Array.from({ length: 8 }, (_, i) => (
-              <div
-                key={i}
-                className="flex items-center gap-3 px-4"
-                style={{ height: 40 }}
-              >
-                <Skeleton
-                  className="h-2 w-2 flex-shrink-0"
-                  style={{ borderRadius: '50%' }}
-                />
-                <Skeleton className="h-3" style={{ width: 90 }} />
-                <Skeleton className="h-3" style={{ width: 100 }} />
-                <Skeleton className="h-3" style={{ width: 80 }} />
-                <Skeleton className="h-3 flex-1" />
-                <Skeleton className="h-3 flex-1" />
-              </div>
-            ))}
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 44 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 92 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 60 }} />
           </div>
         </div>
-      );
-    }
+        <RowsSkeleton />
+      </div>
+    );
+  }
+
+  if (!isLoading && (!events || events.length === 0)) {
     return (
       <div
         className="flex items-center justify-center h-full text-sm"
@@ -1339,6 +1468,13 @@ export function EventListView({
           value={effectiveSortOrder}
           onChange={handleSortOrderChange}
         />
+        {(hasEncryptedData || encryptionKey) && onDecrypt && (
+          <DecryptButton
+            decrypted={!!encryptionKey}
+            loading={isDecrypting}
+            onClick={onDecrypt}
+          />
+        )}
       </div>
 
       {/* Header */}
@@ -1369,82 +1505,76 @@ export function EventListView({
         </div>
       </div>
 
-      {/* Virtualized event rows */}
-      <Virtuoso
-        ref={virtuosoRef}
-        totalCount={sortedEvents.length}
-        overscan={20}
-        defaultItemHeight={40}
-        endReached={() => {
-          if (!hasMoreEvents || isLoadingMoreEvents) {
-            return;
-          }
-          void onLoadMoreEvents?.();
-        }}
-        itemContent={(index: number) => {
-          const ev = sortedEvents[index];
-          return (
-            <EventRow
-              event={ev}
-              index={index}
-              isFirst={index === 0}
-              isLast={index === sortedEvents.length - 1}
-              isExpanded={expandedEventIds.has(ev.eventId)}
-              onToggleExpand={toggleEventExpanded}
-              activeGroupKey={activeGroupKey}
-              selectedGroupKey={selectedGroupKey}
-              selectedGroupRange={selectedGroupRange}
-              correlationNameMap={correlationNameMap}
-              workflowName={workflowName}
-              durationMap={durationMap}
-              onSelectGroup={onSelectGroup}
-              onHoverGroup={onHoverGroup}
-              onLoadEventData={onLoadEventData}
-              cachedEventData={
-                eventDataCacheRef.current.get(ev.eventId) ?? null
-              }
-              onCacheEventData={cacheEventData}
-              encryptionKey={encryptionKey}
-            />
-          );
-        }}
-        components={{
-          Footer: hasMoreEvents
-            ? () => (
-                <div className="px-3 pt-3 flex justify-center">
-                  <button
-                    type="button"
-                    onClick={() => void onLoadMoreEvents?.()}
-                    disabled={isLoadingMoreEvents}
-                    className="h-8 px-3 text-xs rounded-md border transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
-                    style={{
-                      borderColor: 'var(--ds-gray-alpha-400)',
-                      color: 'var(--ds-gray-900)',
-                      backgroundColor: 'var(--ds-background-100)',
-                    }}
-                  >
-                    {isLoadingMoreEvents
-                      ? 'Loading more events...'
-                      : 'Load more'}
-                  </button>
-                </div>
-              )
-            : undefined,
-        }}
-        style={{ flex: 1, minHeight: 0 }}
-      />
+      {/* Virtualized event rows or refetching skeleton */}
+      {isRefetching ? (
+        <RowsSkeleton />
+      ) : (
+        <Virtuoso
+          ref={virtuosoRef}
+          totalCount={sortedEvents.length}
+          overscan={20}
+          defaultItemHeight={40}
+          endReached={() => {
+            if (!hasMoreEvents || isLoadingMoreEvents) {
+              return;
+            }
+            void onLoadMoreEvents?.();
+          }}
+          itemContent={(index: number) => {
+            const ev = sortedEvents[index];
+            return (
+              <EventRow
+                event={ev}
+                index={index}
+                isFirst={index === 0}
+                isLast={index === sortedEvents.length - 1}
+                isExpanded={expandedEventIds.has(ev.eventId)}
+                onToggleExpand={toggleEventExpanded}
+                activeGroupKey={activeGroupKey}
+                selectedGroupKey={selectedGroupKey}
+                selectedGroupRange={selectedGroupRange}
+                correlationNameMap={correlationNameMap}
+                workflowName={workflowName}
+                durationMap={durationMap}
+                onSelectGroup={onSelectGroup}
+                onHoverGroup={onHoverGroup}
+                onLoadEventData={onLoadEventData}
+                cachedEventData={
+                  eventDataCacheRef.current.get(ev.eventId) ?? null
+                }
+                onCacheEventData={cacheEventData}
+                encryptionKey={encryptionKey}
+                onEncryptedDataDetected={handleEncryptedDataDetected}
+              />
+            );
+          }}
+          style={{ flex: 1, minHeight: 0 }}
+        />
+      )}
 
-      {/* Fixed footer — always at the bottom of the visible area */}
+      {/* Fixed footer — count + load more */}
       <div
-        className="flex-shrink-0 border-t text-xs px-3 py-2"
+        className="relative flex-shrink-0 flex items-center h-10 border-t px-4 text-xs"
         style={{
           borderColor: 'var(--ds-gray-alpha-200)',
           color: 'var(--ds-gray-900)',
           backgroundColor: 'var(--ds-background-100)',
         }}
       >
-        {sortedEvents.length} event
-        {sortedEvents.length !== 1 ? 's' : ''} total
+        <span>
+          {sortedEvents.length} event
+          {sortedEvents.length !== 1 ? 's' : ''} loaded
+        </span>
+        {hasMoreEvents && (
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="pointer-events-auto">
+              <LoadMoreButton
+                loading={isLoadingMoreEvents}
+                onClick={() => void onLoadMoreEvents?.()}
+              />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/components/hook-actions.tsx

@@ -3,7 +3,7 @@
 import type { Hook, WorkflowRunStatus } from '@workflow/world';
 import { Send } from 'lucide-react';
 import { useCallback, useState } from 'react';
-import { toast } from 'sonner';
+import { useToast } from '../lib/toast';
 import { ResolveHookModal } from './sidebar/resolve-hook-modal';
 
 // ============================================================================
@@ -45,6 +45,7 @@ export function useHookActions({
   onResolve,
   callbacks,
 }: UseHookActionsOptions): UseHookActionsReturn {
+  const toast = useToast();
   const [isResolving, setIsResolving] = useState(false);
   const [selectedHook, setSelectedHook] = useState<Hook | null>(null);
 

package/src/components/index.ts

@@ -22,5 +22,8 @@ export type {
 export { type StreamChunk, StreamViewer } from './stream-viewer';
 export type { Span, SpanEvent } from './trace-viewer/types';
 export { DataInspector, type DataInspectorProps } from './ui/data-inspector';
+export { DecryptButton } from './ui/decrypt-button';
+export { LoadMoreButton } from './ui/load-more-button';
 export { MenuDropdown, type MenuDropdownOption } from './ui/menu-dropdown';
+export { Spinner } from './ui/spinner';
 export { WorkflowTraceViewer } from './workflow-trace-view';