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

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

@@ -9,7 +9,14 @@
  */
 
 import { Lock } from 'lucide-react';
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   ObjectInspector,
   ObjectLabel,
@@ -26,6 +33,7 @@ import {
   inspectorThemeExtendedLight,
   inspectorThemeLight,
 } from './inspector-theme';
+import { Spinner } from './spinner';
 
 // ---------------------------------------------------------------------------
 // StreamRef / ClassInstanceRef type detection
@@ -34,19 +42,29 @@ import {
 
 const STREAM_REF_TYPE = '__workflow_stream_ref__';
 const CLASS_INSTANCE_REF_TYPE = '__workflow_class_instance_ref__';
+const RUN_REF_TYPE = '__workflow_run_ref__';
 
 interface StreamRef {
   __type: typeof STREAM_REF_TYPE;
   streamId: string;
 }
 
+interface RunRef {
+  __type: typeof RUN_REF_TYPE;
+  runId: string;
+}
+
 function isStreamRef(value: unknown): value is StreamRef {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    '__type' in value &&
-    (value as Record<string, unknown>).__type === STREAM_REF_TYPE
-  );
+  if (value === null || typeof value !== 'object') return false;
+  // Check both enumerable and non-enumerable __type (opaque refs use non-enumerable)
+  const desc = Object.getOwnPropertyDescriptor(value, '__type');
+  return desc?.value === STREAM_REF_TYPE;
+}
+
+function isRunRef(value: unknown): value is RunRef {
+  if (value === null || typeof value !== 'object') return false;
+  const desc = Object.getOwnPropertyDescriptor(value, '__type');
+  return desc?.value === RUN_REF_TYPE;
 }
 
 function isClassInstanceRef(value: unknown): value is {
@@ -75,18 +93,89 @@ 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);
+
+export const RunClickContext = createContext<
+  ((runId: string) => void) | 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);
+  const [hovered, setHovered] = useState(false);
   return (
     <button
       type="button"
-      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer"
+      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors"
       style={{
-        backgroundColor: 'var(--ds-blue-100)',
-        color: 'var(--ds-blue-800)',
+        backgroundColor: hovered ? 'var(--ds-blue-200)' : 'var(--ds-blue-100)',
+        color: 'var(--ds-blue-900)',
         border: '1px solid var(--ds-blue-300)',
       }}
-      onClick={() => onStreamClick?.(streamRef.streamId)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onStreamClick?.(streamRef.streamId);
+      }}
       title={`View stream: ${streamRef.streamId}`}
     >
       <span>📡</span>
@@ -95,6 +184,33 @@ function StreamRefInline({ streamRef }: { streamRef: StreamRef }) {
   );
 }
 
+function RunRefInline({ runRef }: { runRef: RunRef }) {
+  const onRunClick = useContext(RunClickContext);
+  const [hovered, setHovered] = useState(false);
+  return (
+    <button
+      type="button"
+      className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-mono cursor-pointer underline decoration-transparent transition-colors"
+      style={{
+        backgroundColor: hovered
+          ? 'var(--ds-purple-200)'
+          : 'var(--ds-purple-100)',
+        color: 'var(--ds-purple-900)',
+        border: '1px solid var(--ds-purple-300)',
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onRunClick?.(runRef.runId);
+      }}
+      title={`View run: ${runRef.runId}`}
+    >
+      <span>{runRef.runId}</span>
+    </button>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Extended theme context (for colors react-inspector doesn't support natively)
 // ---------------------------------------------------------------------------
@@ -132,26 +248,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;
     }
@@ -175,6 +278,17 @@ function NodeRenderer({
     );
   }
 
+  // RunRef → inline clickable badge linking to the target run
+  if (isRunRef(data)) {
+    return (
+      <span>
+        {name != null && <ObjectName name={name} />}
+        {name != null && <span>: </span>}
+        <RunRefInline runRef={data} />
+      </span>
+    );
+  }
+
   // ClassInstanceRef → show className as type, data as the inspectable value
   if (isClassInstanceRef(data)) {
     if (depth === 0) {
@@ -225,6 +339,41 @@ function NodeRenderer({
 // Public component
 // ---------------------------------------------------------------------------
 
+/**
+ * Create a non-expandable wrapper that carries ref data as non-enumerable
+ * properties. ObjectInspector won't render children for objects with no
+ * enumerable keys, but our NodeRenderer can still detect them.
+ */
+function makeOpaqueRef(ref: Record<string, unknown>): unknown {
+  const opaque = Object.create(null);
+  for (const [key, value] of Object.entries(ref)) {
+    Object.defineProperty(opaque, key, { value, enumerable: false });
+  }
+  return opaque;
+}
+
+/**
+ * Recursively walk data and replace RunRef/StreamRef objects with
+ * non-expandable versions so ObjectInspector doesn't show their internals.
+ * Only recurses into plain objects and arrays to avoid stripping class
+ * instances (Date, Error, Map, Set, URL, Headers, etc.) that have their
+ * own rendering in NodeRenderer.
+ */
+function collapseRefs(data: unknown): unknown {
+  if (data === null || typeof data !== 'object') return data;
+  if (isRunRef(data) || isStreamRef(data))
+    return makeOpaqueRef(data as unknown as Record<string, unknown>);
+  if (Array.isArray(data)) return data.map(collapseRefs);
+  // Only recurse into plain objects — leave class instances untouched
+  const proto = Object.getPrototypeOf(data);
+  if (proto !== Object.prototype && proto !== null) return data;
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(data)) {
+    result[key] = collapseRefs(value);
+  }
+  return result;
+}
+
 export interface DataInspectorProps {
   /** The data to inspect */
   data: unknown;
@@ -234,6 +383,12 @@ export interface DataInspectorProps {
   name?: string;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
+  /** Callback when a run reference is clicked */
+  onRunClick?: (runId: 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,8 +396,12 @@ export function DataInspector({
   expandLevel = 2,
   name,
   onStreamClick,
+  onRunClick,
+  onDecrypt,
+  isDecrypting = false,
 }: DataInspectorProps) {
-  const stableData = useStableInspectorData(data);
+  const collapsedData = useMemo(() => collapseRefs(data), [data]);
+  const stableData = useStableInspectorData(collapsedData);
   const [initialExpandLevel, setInitialExpandLevel] = useState(expandLevel);
   const isDark = useDarkMode();
   const extendedTheme = isDark
@@ -269,16 +428,31 @@ 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>
     );
   }
+  if (onRunClick) {
+    wrapped = (
+      <RunClickContext.Provider value={onRunClick}>
+        {wrapped}
+      </RunClickContext.Provider>
+    );
+  }
+  if (onDecrypt) {
+    wrapped = (
+      <DecryptClickContext.Provider value={{ onDecrypt, isDecrypting }}>
+        {wrapped}
+      </DecryptClickContext.Provider>
+    );
+  }
 
-  return content;
+  return wrapped;
 }
 
 function useStableInspectorData<T>(next: T): T {

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

@@ -767,6 +767,7 @@ export const WorkflowTraceViewer = ({
   onResolveHook,
   onCancelRun,
   onStreamClick,
+  onRunClick,
   onSpanSelect,
   onLoadEventData,
   onLoadMoreSpans,
@@ -775,6 +776,7 @@ export const WorkflowTraceViewer = ({
   encryptionKey,
   onDecrypt,
   isDecrypting = false,
+  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   events: Event[];
@@ -796,6 +798,8 @@ export const WorkflowTraceViewer = ({
   onCancelRun?: (runId: string) => Promise<void>;
   /** Callback when a stream reference is clicked in the detail panel */
   onStreamClick?: (streamId: string) => void;
+  /** Callback when a run reference is clicked in the detail panel */
+  onRunClick?: (runId: string) => void;
   /** Callback when a span is selected. */
   onSpanSelect?: (info: SpanSelectionInfo) => void;
   /** Callback to load event data for a specific event (lazy loading in sidebar) */
@@ -815,6 +819,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>(
@@ -903,6 +909,12 @@ export const WorkflowTraceViewer = ({
     });
   }, [events, selectedSpan?.spanId]);
 
+  // Reset selected span when navigating to a different run
+  useEffect(() => {
+    setSelectedSpan(null);
+    setDeselectTrigger((n) => n + 1);
+  }, [run?.runId]);
+
   const handleClose = useCallback(() => {
     setSelectedSpan(null);
     setDeselectTrigger((n) => n + 1);
@@ -1140,6 +1152,7 @@ export const WorkflowTraceViewer = ({
               <EntityDetailPanel
                 run={run}
                 onStreamClick={onStreamClick}
+                onRunClick={onRunClick}
                 spanDetailData={spanDetailData ?? null}
                 spanDetailError={spanDetailError}
                 spanDetailLoading={spanDetailLoading}
@@ -1151,6 +1164,7 @@ export const WorkflowTraceViewer = ({
                 onDecrypt={onDecrypt}
                 isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
+                hasEncryptedData={hasEncryptedData}
               />
             </ErrorBoundary>
           </div>

package/src/components/workflow-traces/trace-span-construction.ts

@@ -225,7 +225,7 @@ export function stepToSpan(stepEvents: Event[], maxEndTime: Date): Span | null {
 
   return {
     spanId: String(step.stepId),
-    name: parsedName?.shortName ?? '',
+    name: parsedName?.shortName ?? String(step.stepName),
     kind: 1, // INTERNAL span kind
     resource,
     library: WORKFLOW_LIBRARY,

package/src/index.ts

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

package/src/lib/hydration.ts

@@ -11,8 +11,10 @@ import {
   hydrateResourceIO as hydrateResourceIOGeneric,
   isEncryptedData,
   isExpiredStub,
+  isRunRef,
   observabilityRevivers,
   type Revivers,
+  serializedInstanceToRef,
 } from '@workflow/core/serialization-format';
 import { EVENT_DATA_REF_FIELDS } from '@workflow/world';
 
@@ -24,11 +26,15 @@ export {
   extractStreamIds,
   isClassInstanceRef,
   isEncryptedData,
+  isRunRef,
   isStreamId,
   isStreamRef,
   type Revivers,
+  RUN_REF_TYPE,
+  type RunRef,
   STREAM_REF_TYPE,
   type StreamRef,
+  serializedInstanceToRef,
   truncateId,
 } from '@workflow/core/serialization-format';
 
@@ -137,6 +143,11 @@ export function getWebRevivers(): Revivers {
     // react-inspector shows the class name (it reads constructor.name).
     Class: (value) => `<class:${extractClassName(value.classId)}>`,
     Instance: (value) => {
+      // Run instances are rendered as clickable RunRef badges
+      const runRef = serializedInstanceToRef(value);
+      if (isRunRef(runRef)) {
+        return runRef;
+      }
       const className = extractClassName(value.classId);
       const data = value.data;
       const props =
@@ -359,3 +370,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;
+}