@workflow/web-shared 4.1.0 → 4.1.2

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

@@ -5,11 +5,11 @@ 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 { useCallback, useContext, useMemo, useState } from 'react';
 import { isEncryptedMarker, isExpiredMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
-import { StreamClickContext } from '../ui/data-inspector';
+import { DecryptClickContext, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
@@ -180,9 +180,42 @@ function ConversationWithTabs({
  * with the lucide Lock icon matching the title bar Decrypt button.
  */
 function EncryptedFieldBlock() {
+  const ctx = useContext(DecryptClickContext);
+  if (ctx) {
+    return (
+      <button
+        type="button"
+        onClick={ctx.onDecrypt}
+        disabled={ctx.isDecrypting}
+        className="flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs cursor-pointer transition-colors"
+        style={{
+          borderColor: 'var(--ds-gray-400)',
+          backgroundColor: 'var(--ds-gray-100)',
+          color: 'var(--ds-gray-700)',
+          opacity: ctx.isDecrypting ? 0.6 : 1,
+        }}
+        title="Click to decrypt"
+      >
+        {ctx.isDecrypting ? (
+          <span
+            className="h-3 w-3 animate-spin rounded-full border-2"
+            style={{
+              borderColor: 'var(--ds-gray-400)',
+              borderTopColor: 'var(--ds-gray-700)',
+            }}
+          />
+        ) : (
+          <Lock className="h-3 w-3" />
+        )}
+        <span className="font-medium">
+          {ctx.isDecrypting ? 'Decrypting…' : 'Decrypt'}
+        </span>
+      </button>
+    );
+  }
   return (
     <div
-      className="flex items-center gap-1.5 rounded-md border px-3 py-2 text-xs"
+      className="flex w-full items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-xs"
       style={{
         borderColor: 'var(--ds-gray-300)',
         backgroundColor: 'var(--ds-gray-100)',
@@ -689,6 +722,8 @@ export const AttributePanel = ({
   error,
   expiredAt,
   onStreamClick,
+  onDecrypt,
+  isDecrypting = false,
   resource,
 }: {
   data: Record<string, unknown>;
@@ -698,6 +733,10 @@ export const AttributePanel = ({
   expiredAt?: string | Date;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Callback when an encrypted marker is clicked (triggers decryption) */
+  onDecrypt?: () => void;
+  /** Whether decryption is currently in progress */
+  isDecrypting?: boolean;
   /** Resource type of the selected span — used to show targeted loading skeletons. */
   resource?: string;
 }) => {
@@ -798,116 +837,121 @@ export const AttributePanel = ({
 
   return (
     <StreamClickContext.Provider value={onStreamClick}>
-      <div>
-        {/* Basic attributes in a vertical layout with border */}
-        {visibleBasicAttributes.length > 0 && (
-          <div
-            className="mb-3 flex flex-col overflow-hidden rounded-lg border"
-            style={{
-              borderColor: 'var(--ds-gray-300)',
-            }}
-          >
-            {orderedBasicAttributes.map((attribute, index) => {
-              const displayValue = attributeToDisplayFn[
-                attribute as keyof typeof attributeToDisplayFn
-              ]?.(displayData[attribute as keyof typeof displayData]);
-              const isModuleSpecifier = attribute === 'moduleSpecifier';
-              const moduleSpecifierValue =
-                typeof displayValue === 'string'
-                  ? displayValue
-                  : String(displayValue ?? displayData.moduleSpecifier ?? '');
-              const shouldCapitalizeLabel = attribute !== 'workflowCoreVersion';
-              const showResumeAtSkeleton =
-                isLoading && resource === 'sleep' && !displayData.resumeAt;
-              const showDivider =
-                index < orderedBasicAttributes.length - 1 ||
-                showResumeAtSkeleton;
-
-              return (
-                <div key={attribute} className="py-1">
+      <DecryptClickContext.Provider
+        value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
+      >
+        <div>
+          {/* Basic attributes in a vertical layout with border */}
+          {visibleBasicAttributes.length > 0 && (
+            <div
+              className="mb-3 flex flex-col overflow-hidden rounded-lg border"
+              style={{
+                borderColor: 'var(--ds-gray-300)',
+              }}
+            >
+              {orderedBasicAttributes.map((attribute, index) => {
+                const displayValue = attributeToDisplayFn[
+                  attribute as keyof typeof attributeToDisplayFn
+                ]?.(displayData[attribute as keyof typeof displayData]);
+                const isModuleSpecifier = attribute === 'moduleSpecifier';
+                const moduleSpecifierValue =
+                  typeof displayValue === 'string'
+                    ? displayValue
+                    : String(displayValue ?? displayData.moduleSpecifier ?? '');
+                const shouldCapitalizeLabel =
+                  attribute !== 'workflowCoreVersion';
+                const showResumeAtSkeleton =
+                  isLoading && resource === 'sleep' && !displayData.resumeAt;
+                const showDivider =
+                  index < orderedBasicAttributes.length - 1 ||
+                  showResumeAtSkeleton;
+
+                return (
+                  <div key={attribute} className="py-1">
+                    <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
+                      <span
+                        className={
+                          shouldCapitalizeLabel
+                            ? 'text-[14px] first-letter:uppercase'
+                            : 'text-[14px]'
+                        }
+                        style={{ color: 'var(--ds-gray-700)' }}
+                      >
+                        {getAttributeDisplayName(attribute)}
+                      </span>
+                      {isModuleSpecifier ? (
+                        <button
+                          type="button"
+                          className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
+                          style={{
+                            color: 'var(--ds-gray-1000)',
+                            background: 'transparent',
+                            border: 'none',
+                            padding: 0,
+                          }}
+                          title={moduleSpecifierValue}
+                          onClick={() =>
+                            handleCopyModuleSpecifier(moduleSpecifierValue)
+                          }
+                        >
+                          {moduleSpecifierValue}
+                        </button>
+                      ) : (
+                        <span
+                          className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
+                          style={{ color: 'var(--ds-gray-1000)' }}
+                        >
+                          {displayValue}
+                        </span>
+                      )}
+                    </div>
+                    {showDivider ? (
+                      <div
+                        className="mx-2.5 border-b"
+                        style={{ borderColor: 'var(--ds-gray-300)' }}
+                      />
+                    ) : null}
+                  </div>
+                );
+              })}
+              {isLoading && resource === 'sleep' && !displayData.resumeAt && (
+                <div className="py-1">
                   <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
                     <span
-                      className={
-                        shouldCapitalizeLabel
-                          ? 'text-[14px] first-letter:uppercase'
-                          : 'text-[14px]'
-                      }
+                      className="text-[14px] first-letter:uppercase"
                       style={{ color: 'var(--ds-gray-700)' }}
                     >
-                      {getAttributeDisplayName(attribute)}
+                      resumeAt
                     </span>
-                    {isModuleSpecifier ? (
-                      <button
-                        type="button"
-                        className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
-                        style={{
-                          color: 'var(--ds-gray-1000)',
-                          background: 'transparent',
-                          border: 'none',
-                          padding: 0,
-                        }}
-                        title={moduleSpecifierValue}
-                        onClick={() =>
-                          handleCopyModuleSpecifier(moduleSpecifierValue)
-                        }
-                      >
-                        {moduleSpecifierValue}
-                      </button>
-                    ) : (
-                      <span
-                        className="min-w-0 max-w-[70%] truncate text-right text-[13px] font-mono"
-                        style={{ color: 'var(--ds-gray-1000)' }}
-                      >
-                        {displayValue}
-                      </span>
-                    )}
+                    <Skeleton className="h-4 w-[55%]" />
                   </div>
-                  {showDivider ? (
-                    <div
-                      className="mx-2.5 border-b"
-                      style={{ borderColor: 'var(--ds-gray-300)' }}
-                    />
-                  ) : null}
-                </div>
-              );
-            })}
-            {isLoading && resource === 'sleep' && !displayData.resumeAt && (
-              <div className="py-1">
-                <div className="flex min-h-[32px] items-center justify-between gap-4 rounded-sm px-2.5 py-1">
-                  <span
-                    className="text-[14px] first-letter:uppercase"
-                    style={{ color: 'var(--ds-gray-700)' }}
-                  >
-                    resumeAt
-                  </span>
-                  <Skeleton className="h-4 w-[55%]" />
                 </div>
-              </div>
-            )}
-          </div>
-        )}
-        {error ? (
-          <ErrorCard
-            title="Failed to load resource details"
-            details={error.message}
-            className="my-4"
-          />
-        ) : hasExpired ? (
-          <ExpiredDataMessage />
-        ) : (
-          <>
-            {resolvedAttributes.map((attribute) => (
-              <AttributeBlock
-                isLoading={isLoading}
-                key={attribute}
-                attribute={attribute}
-                value={displayData[attribute as keyof typeof displayData]}
-                context={displayContext}
-              />
-            ))}
-          </>
-        )}
-      </div>
+              )}
+            </div>
+          )}
+          {error ? (
+            <ErrorCard
+              title="Failed to load resource details"
+              details={error.message}
+              className="my-4"
+            />
+          ) : hasExpired ? (
+            <ExpiredDataMessage />
+          ) : (
+            <>
+              {resolvedAttributes.map((attribute) => (
+                <AttributeBlock
+                  isLoading={isLoading}
+                  key={attribute}
+                  attribute={attribute}
+                  value={displayData[attribute as keyof typeof displayData]}
+                  context={displayContext}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      </DecryptClickContext.Provider>
     </StreamClickContext.Provider>
   );
 };

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

@@ -67,6 +67,7 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
+  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -103,6 +104,8 @@ export function EntityDetailPanel({
   isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
+  /** Run-level hint: the run contains encrypted data (from probe). */
+  hasEncryptedData?: boolean;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -391,13 +394,14 @@ export function EntityDetailPanel({
               {resourceId}
             </p>
           </div>
-          {(hasEncryptedFields || encryptionKey) && onDecrypt && (
-            <DecryptButton
-              decrypted={!!encryptionKey}
-              loading={isDecrypting}
-              onClick={onDecrypt}
-            />
-          )}
+          {(hasEncryptedFields || hasEncryptedData || encryptionKey) &&
+            onDecrypt && (
+              <DecryptButton
+                decrypted={!!encryptionKey}
+                loading={isDecrypting}
+                onClick={onDecrypt}
+              />
+            )}
         </div>
       </div>
 
@@ -481,6 +485,8 @@ export function EntityDetailPanel({
               isLoading={loading}
               error={error ?? undefined}
               onStreamClick={onStreamClick}
+              onDecrypt={onDecrypt}
+              isDecrypting={isDecrypting}
               resource={resource}
             />
           </section>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import type { Event } from '@workflow/world';
+import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { isExpiredMarker } from '../../lib/hydration';
 import { ErrorCard } from '../ui/error-card';
@@ -55,46 +55,56 @@ 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]);
+    if (!encryptionKey || !wasExpandedRef.current) return;
+    loadedDataRef.current = null;
+    setLoadedData(null);
+    void loadEventData({ force: true });
+  }, [encryptionKey, loadEventData]);
 
   const createdAt = new Date(event.createdAt);
 
+  const displayPayload = isLoading ? loadedData : mergedDisplay;
+
   return (
     <DetailCard
       summaryClassName="text-base py-2"
@@ -189,9 +199,9 @@ function EventItem({
       )}
 
       {/* Event data */}
-      {displayData != null && (
+      {displayPayload != null && (
         <div className="mt-2">
-          <EventDataBlock eventType={event.eventType} data={displayData} />
+          <EventDataBlock eventType={event.eventType} data={displayPayload} />
         </div>
       )}
     </DetailCard>
@@ -199,17 +209,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 +240,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"

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

@@ -75,6 +75,76 @@ export const StreamClickContext = createContext<
   ((streamId: string) => void) | undefined
 >(undefined);
 
+/**
+ * Context for passing a decrypt handler down to DataInspector instances.
+ * When provided, encrypted markers become clickable buttons that trigger decryption.
+ */
+export type DecryptClickContextValue = {
+  onDecrypt: () => void;
+  isDecrypting: boolean;
+};
+
+export const DecryptClickContext = createContext<
+  DecryptClickContextValue | undefined
+>(undefined);
+
+function EncryptedInlineLabel() {
+  const ctx = useContext(DecryptClickContext);
+  if (ctx) {
+    return (
+      <button
+        type="button"
+        className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] cursor-pointer"
+        style={{
+          backgroundColor: 'var(--ds-gray-100)',
+          color: 'var(--ds-gray-700)',
+          border: '1px solid var(--ds-gray-400)',
+          fontStyle: 'italic',
+          opacity: ctx.isDecrypting ? 0.6 : 1,
+        }}
+        disabled={ctx.isDecrypting}
+        onClick={(e) => {
+          e.stopPropagation();
+          ctx.onDecrypt();
+        }}
+        title="Click to decrypt"
+      >
+        {ctx.isDecrypting ? (
+          <span
+            className="h-3 w-3 animate-spin rounded-full border-2"
+            style={{
+              display: 'inline-block',
+              flexShrink: 0,
+              borderColor: 'var(--ds-gray-400)',
+              borderTopColor: 'var(--ds-gray-700)',
+            }}
+          />
+        ) : (
+          <Lock
+            className="h-3 w-3"
+            style={{ display: 'inline', flexShrink: 0 }}
+          />
+        )}
+        <span>{ctx.isDecrypting ? 'Decrypting…' : 'Decrypt'}</span>
+      </button>
+    );
+  }
+  return (
+    <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>
+  );
+}
+
 function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
   const onStreamClick = useContext(StreamClickContext);
   return (
@@ -132,26 +202,13 @@ function NodeRenderer({
 }) {
   const extendedTheme = useContext(ExtendedThemeContext);
 
-  // Encrypted marker → flat label with Lock icon, non-expandable
+  // Encrypted marker → flat label with Lock icon, clickable when onDecrypt is available
   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>
-    );
+    const label = <EncryptedInlineLabel />;
     if (depth === 0) {
       return label;
     }
@@ -234,6 +291,10 @@ export interface DataInspectorProps {
   name?: string;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Callback when an encrypted marker is clicked (triggers decryption) */
+  onDecrypt?: () => void;
+  /** Whether decryption is currently in progress */
+  isDecrypting?: boolean;
 }
 
 export function DataInspector({
@@ -241,6 +302,8 @@ export function DataInspector({
   expandLevel = 2,
   name,
   onStreamClick,
+  onDecrypt,
+  isDecrypting = false,
 }: DataInspectorProps) {
   const stableData = useStableInspectorData(data);
   const [initialExpandLevel, setInitialExpandLevel] = useState(expandLevel);
@@ -269,16 +332,25 @@ export function DataInspector({
     </ExtendedThemeContext.Provider>
   );
 
-  // Wrap in StreamClickContext if a handler is provided
+  let wrapped = content;
+
   if (onStreamClick) {
-    return (
+    wrapped = (
       <StreamClickContext.Provider value={onStreamClick}>
-        {content}
+        {wrapped}
       </StreamClickContext.Provider>
     );
   }
 
-  return content;
+  if (onDecrypt) {
+    wrapped = (
+      <DecryptClickContext.Provider value={{ onDecrypt, isDecrypting }}>
+        {wrapped}
+      </DecryptClickContext.Provider>
+    );
+  }
+
+  return wrapped;
 }
 
 function useStableInspectorData<T>(next: T): T {

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

@@ -775,6 +775,7 @@ export const WorkflowTraceViewer = ({
   encryptionKey,
   onDecrypt,
   isDecrypting = false,
+  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   events: Event[];
@@ -815,6 +816,8 @@ export const WorkflowTraceViewer = ({
   onDecrypt?: () => void;
   /** Whether the encryption key is currently being fetched */
   isDecrypting?: boolean;
+  /** Run-level hint: the run contains encrypted data (from probe). */
+  hasEncryptedData?: boolean;
 }) => {
   const toast = useToast();
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
@@ -1151,6 +1154,7 @@ export const WorkflowTraceViewer = ({
                 onDecrypt={onDecrypt}
                 isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
+                hasEncryptedData={hasEncryptedData}
               />
             </ErrorBoundary>
           </div>

package/src/index.ts

@@ -40,6 +40,7 @@ export {
   ENCRYPTED_PLACEHOLDER,
   extractStreamIds,
   getWebRevivers,
+  hasEncryptedFields,
   hydrateResourceIO,
   hydrateResourceIOWithKey,
   isClassInstanceRef,