@workflow/web-shared 4.1.1 → 4.1.3

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

@@ -10,6 +10,7 @@
 
 import { Lock } from 'lucide-react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { Spinner } from './spinner';
 import {
   ObjectInspector,
   ObjectLabel,
@@ -75,6 +76,68 @@ 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 ? (
+          <Spinner size={12} />
+        ) : (
+          <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 +195,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 +284,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 +295,8 @@ export function DataInspector({
   expandLevel = 2,
   name,
   onStreamClick,
+  onDecrypt,
+  isDecrypting = false,
 }: DataInspectorProps) {
   const stableData = useStableInspectorData(data);
   const [initialExpandLevel, setInitialExpandLevel] = useState(expandLevel);
@@ -269,16 +325,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,

package/src/lib/hydration.ts

@@ -359,3 +359,29 @@ export async function hydrateResourceIOWithKey<T>(
 
   return result as T;
 }
+
+/**
+ * Check whether a hydrated resource (event, step, run, etc.) contains any
+ * encrypted display markers. Inspects the standard top-level fields
+ * (`input`, `output`, `error`, `metadata`) as well as the event-type-specific
+ * `eventData` ref fields.
+ */
+export function hasEncryptedFields(resource: unknown): boolean {
+  if (!resource || typeof resource !== 'object') return false;
+  const r = resource as Record<string, unknown>;
+
+  for (const key of ['input', 'output', 'metadata', 'error']) {
+    if (isEncryptedMarker(r[key])) return true;
+  }
+
+  if (r.eventData && typeof r.eventData === 'object') {
+    const eventType = typeof r.eventType === 'string' ? r.eventType : '';
+    const refKeys = EVENT_DATA_REF_FIELDS[eventType] ?? [];
+    const ed = r.eventData as Record<string, unknown>;
+    for (const key of refKeys) {
+      if (key in ed && isEncryptedMarker(ed[key])) return true;
+    }
+  }
+
+  return false;
+}