@workflow/web-shared 4.1.0-beta.57 → 4.1.0-beta.59

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "4.1.0-beta.57",
+  "version": "4.1.0-beta.59",
   "private": false,
   "files": [
     "dist",
@@ -52,9 +52,9 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "4.1.0-beta.62",
+    "@workflow/core": "4.2.0-beta.64",
     "@workflow/utils": "4.1.0-beta.13",
-    "@workflow/world": "4.1.0-beta.8"
+    "@workflow/world": "4.1.0-beta.9"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.4",

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

@@ -454,6 +454,11 @@ function deepParseJson(value: unknown): unknown {
     return value.map(deepParseJson);
   }
   if (value !== null && typeof value === 'object') {
+    // Preserve objects with custom constructors (e.g., encrypted markers,
+    // class instance refs) — don't destructure them into plain objects
+    if (value.constructor !== Object) {
+      return value;
+    }
     const result: Record<string, unknown> = {};
     for (const [k, v] of Object.entries(value)) {
       result[k] = deepParseJson(v);
@@ -584,6 +589,8 @@ interface EventsListProps {
   hasMoreEvents?: boolean;
   isLoadingMoreEvents?: boolean;
   onLoadMoreEvents?: () => Promise<void> | void;
+  /** When provided, signals that decryption is active (triggers re-load of expanded events) */
+  encryptionKey?: Uint8Array;
 }
 
 function EventRow({
@@ -600,6 +607,7 @@ function EventRow({
   onSelectGroup,
   onHoverGroup,
   onLoadEventData,
+  encryptionKey,
 }: {
   event: Event;
   index: number;
@@ -614,6 +622,7 @@ function EventRow({
   onSelectGroup: (groupKey: string | undefined) => void;
   onHoverGroup: (groupKey: string | undefined) => void;
   onLoadEventData?: (event: Event) => Promise<unknown | null>;
+  encryptionKey?: Uint8Array;
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -686,6 +695,26 @@ function EventRow({
     }
   }, [event, loadedEventData, hasExistingEventData, onLoadEventData]);
 
+  // When encryption key changes and this event was previously loaded,
+  // re-load to get decrypted data
+  useEffect(() => {
+    if (encryptionKey && hasAttemptedLoad && onLoadEventData) {
+      setLoadedEventData(null);
+      setHasAttemptedLoad(false);
+      onLoadEventData(event)
+        .then((data) => {
+          if (data !== null && data !== undefined) {
+            setLoadedEventData(data);
+          }
+          setHasAttemptedLoad(true);
+        })
+        .catch(() => {
+          setHasAttemptedLoad(true);
+        });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [encryptionKey]);
+
   const handleExpandToggle = useCallback(
     (e: ReactMouseEvent) => {
       e.stopPropagation();
@@ -937,6 +966,7 @@ export function EventListView({
   hasMoreEvents = false,
   isLoadingMoreEvents = false,
   onLoadMoreEvents,
+  encryptionKey,
 }: EventsListProps) {
   const sortedEvents = useMemo(() => {
     if (!events || events.length === 0) return [];
@@ -1154,6 +1184,7 @@ export function EventListView({
               onSelectGroup={onSelectGroup}
               onHoverGroup={onHoverGroup}
               onLoadEventData={onLoadEventData}
+              encryptionKey={encryptionKey}
             />
           );
         }}

package/src/components/sidebar/attribute-panel.tsx

@@ -3,9 +3,11 @@
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import type { ModelMessage } from 'ai';
+import { Lock } from 'lucide-react';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'sonner';
+import { isEncryptedMarker } from '../../lib/hydration';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
@@ -172,6 +174,26 @@ function ConversationWithTabs({
  * Render a value with the shared DataInspector (ObjectInspector with
  * custom theming, nodeRenderer for StreamRef/ClassInstanceRef, etc.)
  */
+/**
+ * Inline display for an encrypted field — no expand, just a flat label
+ * with the lucide Lock icon matching the title bar Decrypt button.
+ */
+function EncryptedFieldBlock() {
+  return (
+    <div
+      className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+      style={{
+        borderColor: 'var(--ds-gray-300)',
+        backgroundColor: 'var(--ds-gray-100)',
+        color: 'var(--ds-gray-700)',
+      }}
+    >
+      <Lock className="h-3 w-3" />
+      <span className="font-medium">Encrypted</span>
+    </div>
+  );
+}
+
 function JsonBlock(value: unknown) {
   return <CopyableDataBlock data={value} />;
 }
@@ -262,20 +284,24 @@ const getModuleSpecifierFromName = (value: unknown): string => {
   return raw;
 };
 
-export const localMillisecondTime = (value: unknown): string => {
-  let date: Date;
+const parseDateValue = (value: unknown): Date | null => {
+  if (value == null) {
+    return null;
+  }
   if (value instanceof Date) {
-    date = value;
-  } else if (typeof value === 'number') {
-    date = new Date(value);
-  } else if (typeof value === 'string') {
-    date = new Date(value);
-  } else {
-    date = new Date(String(value));
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+  if (typeof value === 'string' && value.trim().length === 0) {
+    return null;
   }
 
-  // e.g. 12/17/2025, 9:08:55.182 AM
-  return date.toLocaleString(undefined, {
+  const date =
+    typeof value === 'number' ? new Date(value) : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+const formatLocalMillisecondTime = (date: Date): string =>
+  date.toLocaleString(undefined, {
     year: 'numeric',
     month: 'numeric',
     day: 'numeric',
@@ -284,6 +310,23 @@ export const localMillisecondTime = (value: unknown): string => {
     second: 'numeric',
     fractionalSecondDigits: 3,
   });
+
+export const localMillisecondTime = (value: unknown): string => {
+  const date = parseDateValue(value);
+  if (!date) {
+    return '-';
+  }
+
+  // e.g. 12/17/2025, 9:08:55.182 AM
+  return formatLocalMillisecondTime(date);
+};
+
+const localMillisecondTimeOrNull = (value: unknown): string | null => {
+  const date = parseDateValue(value);
+  if (!date) {
+    return null;
+  }
+  return formatLocalMillisecondTime(date);
 };
 
 interface DisplayContext {
@@ -309,6 +352,7 @@ const attributeToDisplayFn: Record<
   attempt: (value: unknown) => String(value),
   // Hook details
   token: (value: unknown) => String(value),
+  isWebhook: (value: unknown) => String(value),
   // Event details
   eventType: (value: unknown) => String(value),
   correlationId: (value: unknown) => String(value),
@@ -323,19 +367,21 @@ const attributeToDisplayFn: Record<
   executionContext: (_value: unknown) => null,
   // Dates
   // TODO: relative time with tooltips for ISO times
-  createdAt: localMillisecondTime,
-  startedAt: localMillisecondTime,
-  updatedAt: localMillisecondTime,
-  completedAt: localMillisecondTime,
-  expiredAt: localMillisecondTime,
-  retryAfter: localMillisecondTime,
-  resumeAt: localMillisecondTime,
+  createdAt: localMillisecondTimeOrNull,
+  startedAt: localMillisecondTimeOrNull,
+  updatedAt: localMillisecondTimeOrNull,
+  completedAt: localMillisecondTimeOrNull,
+  expiredAt: localMillisecondTimeOrNull,
+  retryAfter: localMillisecondTimeOrNull,
+  resumeAt: localMillisecondTimeOrNull,
   // Resolved attributes, won't actually use this function
   metadata: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
+    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
     return JsonBlock(value);
   },
   input: (value: unknown, context?: DisplayContext) => {
+    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
     // Check if input has args + closure vars structure
     if (value && typeof value === 'object' && 'args' in value) {
       const { args, closureVars, thisVal } = value as {
@@ -439,6 +485,7 @@ const attributeToDisplayFn: Record<
   },
   output: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
+    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
     return (
       <DetailCard
         summary="Output"
@@ -450,6 +497,7 @@ const attributeToDisplayFn: Record<
     );
   },
   error: (value: unknown) => {
+    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
     if (!hasDisplayContent(value)) return null;
 
     // If the error object has a `stack` field, render it as readable
@@ -477,6 +525,7 @@ const attributeToDisplayFn: Record<
     );
   },
   eventData: (value: unknown) => {
+    if (isEncryptedMarker(value)) return <EncryptedFieldBlock />;
     if (!hasDisplayContent(value)) return null;
     return <DetailCard summary="Event Data">{JsonBlock(value)}</DetailCard>;
   },
@@ -781,15 +830,17 @@ export const AttributePanel = ({
         ) : hasExpired ? (
           <ExpiredDataMessage />
         ) : (
-          resolvedAttributes.map((attribute) => (
-            <AttributeBlock
-              isLoading={isLoading}
-              key={attribute}
-              attribute={attribute}
-              value={displayData[attribute as keyof typeof displayData]}
-              context={displayContext}
-            />
-          ))
+          <>
+            {resolvedAttributes.map((attribute) => (
+              <AttributeBlock
+                isLoading={isLoading}
+                key={attribute}
+                attribute={attribute}
+                value={displayData[attribute as keyof typeof displayData]}
+                context={displayContext}
+              />
+            ))}
+          </>
         )}
       </div>
     </StreamClickContext.Provider>

package/src/components/sidebar/entity-detail-panel.tsx

@@ -62,6 +62,7 @@ export function EntityDetailPanel({
   onWakeUpSleep,
   onLoadEventData,
   onResolveHook,
+  encryptionKey,
   selectedSpan,
 }: {
   run: WorkflowRun;
@@ -93,6 +94,8 @@ export function EntityDetailPanel({
     payload: unknown,
     hook?: Hook
   ) => Promise<void>;
+  /** Encryption key (available after Decrypt is clicked), used to re-load event data */
+  encryptionKey?: Uint8Array;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
 }): React.JSX.Element | null {
@@ -457,6 +460,7 @@ export function EntityDetailPanel({
               <EventsList
                 events={rawEvents}
                 onLoadEventData={onLoadEventData}
+                encryptionKey={encryptionKey}
               />
             </section>
           )}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import type { Event } from '@workflow/world';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ErrorStackBlock,
   isStructuredErrorWithStack,
@@ -35,16 +35,20 @@ const DATA_EVENT_TYPES = new Set([
 function EventItem({
   event,
   onLoadEventData,
+  encryptionKey,
 }: {
   event: Event;
   onLoadEventData?: (
     correlationId: string,
     eventId: string
   ) => Promise<unknown | null>;
+  /** When this changes (e.g., Decrypt was clicked), invalidate cached data */
+  encryptionKey?: Uint8Array;
 }) {
   const [loadedData, setLoadedData] = useState<unknown | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const wasExpandedRef = useRef(false);
 
   // Check if the event already has eventData from the store
   const existingData =
@@ -52,8 +56,7 @@ function EventItem({
   const displayData = existingData ?? loadedData;
   const canHaveData = DATA_EVENT_TYPES.has(event.eventType);
 
-  const handleExpand = useCallback(async () => {
-    if (existingData || loadedData !== null || isLoading) return;
+  const loadEventData = useCallback(async () => {
     if (!onLoadEventData || !event.correlationId || !event.eventId) return;
 
     try {
@@ -66,14 +69,23 @@ function EventItem({
     } finally {
       setIsLoading(false);
     }
-  }, [
-    existingData,
-    loadedData,
-    isLoading,
-    onLoadEventData,
-    event.correlationId,
-    event.eventId,
-  ]);
+  }, [onLoadEventData, event.correlationId, event.eventId]);
+
+  const handleExpand = useCallback(async () => {
+    if (existingData || loadedData !== null || isLoading) return;
+    wasExpandedRef.current = true;
+    await loadEventData();
+  }, [existingData, loadedData, 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]);
 
   const createdAt = new Date(event.createdAt);
 
@@ -226,6 +238,7 @@ export function EventsList({
   isLoading = false,
   error,
   onLoadEventData,
+  encryptionKey,
 }: {
   events: Event[];
   isLoading?: boolean;
@@ -234,6 +247,8 @@ export function EventsList({
     correlationId: string,
     eventId: string
   ) => Promise<unknown | null>;
+  /** When provided, signals that decryption is active (triggers re-load of expanded events) */
+  encryptionKey?: Uint8Array;
 }) {
   // Sort by createdAt
   const sortedEvents = useMemo(
@@ -270,6 +285,7 @@ export function EventsList({
               key={event.eventId}
               event={event}
               onLoadEventData={onLoadEventData}
+              encryptionKey={encryptionKey}
             />
           ))}
         </div>

package/src/components/ui/data-inspector.tsx

@@ -8,6 +8,7 @@
  * and expand behavior.
  */
 
+import { Lock } from 'lucide-react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import {
   ObjectInspector,
@@ -17,6 +18,7 @@ import {
   ObjectValue,
 } from 'react-inspector';
 import { useDarkMode } from '../../hooks/use-dark-mode';
+import { ENCRYPTED_DISPLAY_NAME } from '../../lib/hydration';
 import {
   type InspectorThemeExtended,
   inspectorThemeDark,
@@ -130,6 +132,38 @@ function NodeRenderer({
 }) {
   const extendedTheme = useContext(ExtendedThemeContext);
 
+  // Encrypted marker → flat label with Lock icon, non-expandable
+  if (
+    data !== null &&
+    typeof data === 'object' &&
+    data.constructor?.name === ENCRYPTED_DISPLAY_NAME
+  ) {
+    const label = (
+      <span style={{ color: 'var(--ds-gray-600)', fontStyle: 'italic' }}>
+        <Lock
+          className="h-3 w-3"
+          style={{
+            display: 'inline',
+            verticalAlign: 'middle',
+            marginRight: '3px',
+            marginTop: '-1px',
+          }}
+        />
+        Encrypted
+      </span>
+    );
+    if (depth === 0) {
+      return label;
+    }
+    return (
+      <span>
+        {name != null && <ObjectName name={name} />}
+        {name != null && <span>: </span>}
+        {label}
+      </span>
+    );
+  }
+
   // StreamRef → inline clickable badge
   if (isStreamRef(data)) {
     return (
@@ -310,7 +344,7 @@ function isDeepEqual(a: unknown, b: unknown, seen = new WeakMap()): boolean {
   if (aKeys.length !== bKeys.length) return false;
 
   for (const key of aKeys) {
-    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+    if (!Object.hasOwn(b, key)) return false;
     if (!isDeepEqual(a[key], b[key], seen)) return false;
   }
 

package/src/components/workflow-trace-view.tsx

@@ -893,6 +893,7 @@ export const WorkflowTraceViewer = ({
   onLoadMoreSpans,
   hasMoreSpans = false,
   isLoadingMoreSpans = false,
+  encryptionKey,
 }: {
   run: WorkflowRun;
   steps: Step[];
@@ -929,6 +930,8 @@ export const WorkflowTraceViewer = ({
   hasMoreSpans?: boolean;
   /** Whether trace pagination is currently fetching another page. */
   isLoadingMoreSpans?: boolean;
+  /** Encryption key (available after Decrypt), threaded to event list for re-loading */
+  encryptionKey?: Uint8Array;
 }) => {
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
@@ -1252,6 +1255,7 @@ export const WorkflowTraceViewer = ({
                 onWakeUpSleep={onWakeUpSleep}
                 onLoadEventData={onLoadEventData}
                 onResolveHook={onResolveHook}
+                encryptionKey={encryptionKey}
                 selectedSpan={selectedSpan}
               />
             </ErrorBoundary>

package/src/index.ts

@@ -24,10 +24,13 @@ export type { Revivers, StreamRef } from './lib/hydration';
 export {
   CLASS_INSTANCE_REF_TYPE,
   ClassInstanceRef,
+  ENCRYPTED_PLACEHOLDER,
   extractStreamIds,
   getWebRevivers,
   hydrateResourceIO,
+  hydrateResourceIOWithKey,
   isClassInstanceRef,
+  isEncryptedMarker,
   isStreamId,
   isStreamRef,
   STREAM_REF_TYPE,

package/src/lib/hydration.ts

@@ -9,6 +9,7 @@
 import {
   extractClassName,
   hydrateResourceIO as hydrateResourceIOGeneric,
+  isEncryptedData,
   observabilityRevivers,
   type Revivers,
 } from '@workflow/core/serialization-format';
@@ -17,8 +18,10 @@ import {
 export {
   CLASS_INSTANCE_REF_TYPE,
   ClassInstanceRef,
+  ENCRYPTED_PLACEHOLDER,
   extractStreamIds,
   isClassInstanceRef,
+  isEncryptedData,
   isStreamId,
   isStreamRef,
   type Revivers,
@@ -142,5 +145,152 @@ function getRevivers(): Revivers {
  * from the server before passing it to UI components.
  */
 export function hydrateResourceIO<T>(resource: T): T {
-  return hydrateResourceIOGeneric(resource as any, getRevivers()) as T;
+  const hydrated = hydrateResourceIOGeneric(
+    resource as any,
+    getRevivers()
+  ) as T;
+  return replaceEncryptedWithMarkers(hydrated);
+}
+
+// ---------------------------------------------------------------------------
+// Encrypted data display markers
+// ---------------------------------------------------------------------------
+
+export const ENCRYPTED_DISPLAY_NAME = 'Encrypted';
+
+/**
+ * Create a display-friendly object for encrypted data.
+ *
+ * Uses the same named-constructor trick as the Instance reviver so that
+ * ObjectInspector renders the constructor name ("🔒 Encrypted") with no
+ * expandable children. The original encrypted bytes are stored in a
+ * non-enumerable property for later decryption.
+ */
+function createEncryptedMarker(data: Uint8Array): object {
+  // biome-ignore lint/complexity/useArrowFunction: arrow functions have no .prototype
+  const ctor = { [ENCRYPTED_DISPLAY_NAME]: function () {} }[
+    ENCRYPTED_DISPLAY_NAME
+  ]!;
+  const obj = Object.create(ctor.prototype);
+  // Store original bytes for decryption, but non-enumerable so
+  // ObjectInspector doesn't show them as children
+  Object.defineProperty(obj, '__encryptedData', {
+    value: data,
+    enumerable: false,
+    configurable: false,
+  });
+  return obj;
+}
+
+/** Check if a value is an encrypted display marker */
+export function isEncryptedMarker(value: unknown): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    value.constructor?.name === ENCRYPTED_DISPLAY_NAME
+  );
+}
+
+/**
+ * Post-process hydrated resource data: replace encrypted Uint8Array values
+ * with display-friendly marker objects in known data fields.
+ */
+function replaceEncryptedWithMarkers<T>(resource: T): T {
+  if (!resource || typeof resource !== 'object') return resource;
+  const r = resource as Record<string, unknown>;
+  const result = { ...r };
+
+  for (const key of ['input', 'output', 'metadata', 'error']) {
+    if (isEncryptedData(result[key])) {
+      result[key] = createEncryptedMarker(result[key] as Uint8Array);
+    }
+  }
+
+  if (result.eventData && typeof result.eventData === 'object') {
+    const ed = { ...(result.eventData as Record<string, unknown>) };
+    for (const key of EVENT_DATA_SERIALIZED_FIELDS) {
+      if (isEncryptedData(ed[key])) {
+        ed[key] = createEncryptedMarker(ed[key] as Uint8Array);
+      }
+    }
+    result.eventData = ed;
+  }
+
+  return result as T;
+}
+
+/** Known serialized subfields within eventData, matching hydrateEventData in core */
+const EVENT_DATA_SERIALIZED_FIELDS = [
+  'result',
+  'input',
+  'output',
+  'metadata',
+  'payload',
+];
+
+/**
+ * Hydrate resource data with decryption support.
+ *
+ * When a key is provided, encrypted fields are decrypted before hydration.
+ * This is the async version used when the user clicks "Decrypt" in the web UI.
+ *
+ * Handles both top-level fields (input, output, metadata) and nested
+ * eventData subfields (result, input, output, metadata, payload).
+ */
+export async function hydrateResourceIOWithKey<T>(
+  resource: T,
+  key: Uint8Array
+): Promise<T> {
+  const { hydrateDataWithKey } = await import(
+    '@workflow/core/serialization-format'
+  );
+  const { importKey } = await import('@workflow/core/encryption');
+  const cryptoKey = await importKey(key);
+  const revivers = getRevivers();
+
+  /** Extract original encrypted bytes from a marker or raw Uint8Array, then decrypt + hydrate */
+  async function decryptField(
+    value: unknown,
+    rev: Revivers,
+    k: Awaited<ReturnType<typeof importKey>>
+  ): Promise<unknown> {
+    // Already-hydrated: encrypted marker with stored bytes
+    if (isEncryptedMarker(value)) {
+      const raw = (value as any).__encryptedData as Uint8Array;
+      return hydrateDataWithKey(raw, rev, k);
+    }
+    // Raw encrypted Uint8Array (not yet hydrated)
+    if (value instanceof Uint8Array) {
+      return hydrateDataWithKey(value, rev, k);
+    }
+    // Not encrypted — return as-is
+    return value;
+  }
+
+  const r = resource as Record<string, unknown>;
+  const result = { ...r };
+
+  // Decrypt + hydrate top-level serialized fields (runs, steps, hooks)
+  for (const field of ['input', 'output', 'metadata', 'error']) {
+    if (field in result) {
+      result[field] = await decryptField(result[field], revivers, cryptoKey);
+    }
+  }
+
+  // Decrypt + hydrate eventData subfields (events)
+  if (result.eventData && typeof result.eventData === 'object') {
+    const eventData = { ...(result.eventData as Record<string, unknown>) };
+    for (const field of EVENT_DATA_SERIALIZED_FIELDS) {
+      if (field in eventData) {
+        eventData[field] = await decryptField(
+          eventData[field],
+          revivers,
+          cryptoKey
+        );
+      }
+    }
+    result.eventData = eventData;
+  }
+
+  return result as T;
 }