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

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,
@@ -19,6 +26,11 @@ import {
 } from 'react-inspector';
 import { useDarkMode } from '../../hooks/use-dark-mode';
 import { ENCRYPTED_DISPLAY_NAME } from '../../lib/hydration';
+import {
+  type DecodedStreamChunkSource,
+  type FormattedStreamChunkDisplay,
+  formatArrayBufferViewForDisplay,
+} from '../../lib/stream-display';
 import {
   type InspectorThemeExtended,
   inspectorThemeDark,
@@ -26,6 +38,8 @@ import {
   inspectorThemeExtendedLight,
   inspectorThemeLight,
 } from './inspector-theme';
+import { Button } from './button';
+import { Spinner } from './spinner';
 
 // ---------------------------------------------------------------------------
 // StreamRef / ClassInstanceRef type detection
@@ -34,19 +48,62 @@ import {
 
 const STREAM_REF_TYPE = '__workflow_stream_ref__';
 const CLASS_INSTANCE_REF_TYPE = '__workflow_class_instance_ref__';
+const RUN_REF_TYPE = '__workflow_run_ref__';
+const BYTES_DISPLAY_TYPE = '__workflow_bytes_display__';
 
 interface StreamRef {
   __type: typeof STREAM_REF_TYPE;
   streamId: string;
 }
 
+interface RunRef {
+  __type: typeof RUN_REF_TYPE;
+  runId: string;
+}
+
+interface BytesDisplay {
+  __type: typeof BYTES_DISPLAY_TYPE;
+  text: string;
+  decodedFrom?: DecodedStreamChunkSource;
+}
+
+function deserializeChunkText(text: string): string {
+  try {
+    const parsed = JSON.parse(text);
+    if (typeof parsed === 'string') {
+      return parsed;
+    }
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return text;
+  }
+}
+
+function parseChunkData(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+
 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;
+}
+
+export function isBytesDisplay(value: unknown): value is BytesDisplay {
+  if (value === null || typeof value !== 'object') return false;
+  const desc = Object.getOwnPropertyDescriptor(value, '__type');
+  return desc?.value === BYTES_DISPLAY_TYPE;
 }
 
 function isClassInstanceRef(value: unknown): value is {
@@ -75,18 +132,79 @@ 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;
+  hasEncryptedData?: 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
+        size="xs"
+        className="align-baseline gap-x-1"
+        disabled={ctx.isDecrypting}
+        onClick={(e) => {
+          e.stopPropagation();
+          ctx.onDecrypt();
+        }}
+      >
+        {ctx.isDecrypting ? (
+          <Spinner size={10} />
+        ) : (
+          <Lock className="h-3 w-3" />
+        )}
+        <span>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 +213,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)
 // ---------------------------------------------------------------------------
@@ -103,6 +248,147 @@ const ExtendedThemeContext = createContext<InspectorThemeExtended>(
   inspectorThemeExtendedLight
 );
 
+function DecodedBytesChunk({
+  decodedText,
+  source,
+}: {
+  decodedText: string;
+  source: DecodedStreamChunkSource;
+}) {
+  const [selectedView, setSelectedView] = useState<'decoded' | 'bytes'>(
+    'decoded'
+  );
+  const parsed = parseChunkData(decodedText);
+
+  return (
+    <div className="min-w-0">
+      {selectedView === 'decoded' ? (
+        <div className="min-w-0">
+          {typeof parsed === 'string' ? (
+            <span
+              className="whitespace-pre-wrap break-words"
+              style={{ color: 'var(--ds-gray-1000)' }}
+            >
+              {deserializeChunkText(parsed)}
+            </span>
+          ) : (
+            <DataInspector data={parsed} expandLevel={1} />
+          )}
+        </div>
+      ) : (
+        <DecodedBytesInspector decodedText={decodedText} source={source} />
+      )}
+      <div className="mt-2 flex">
+        <div
+          className="inline-flex overflow-hidden rounded border"
+          style={{ borderColor: 'var(--ds-gray-400)' }}
+          title={`${source.type} decoded as ${source.encoding.toUpperCase()} text. Switch to Bytes to inspect the summarized raw value.`}
+        >
+          <button
+            type="button"
+            className="h-5 px-1.5 text-[10px] font-medium"
+            style={{
+              backgroundColor:
+                selectedView === 'decoded'
+                  ? 'var(--ds-gray-200)'
+                  : 'var(--ds-gray-100)',
+              color: 'var(--ds-gray-900)',
+            }}
+            onClick={() => setSelectedView('decoded')}
+            aria-pressed={selectedView === 'decoded'}
+            aria-label="Show decoded text"
+          >
+            Decoded
+          </button>
+          <button
+            type="button"
+            className="h-5 border-l px-1.5 text-[10px] font-medium"
+            style={{
+              borderColor: 'var(--ds-gray-400)',
+              backgroundColor:
+                selectedView === 'bytes'
+                  ? 'var(--ds-gray-200)'
+                  : 'var(--ds-gray-100)',
+              color: 'var(--ds-gray-900)',
+            }}
+            onClick={() => setSelectedView('bytes')}
+            aria-pressed={selectedView === 'bytes'}
+            aria-label="Show raw bytes summary"
+          >
+            Bytes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DecodedBytesInspector({
+  decodedText,
+  source,
+}: {
+  decodedText: string;
+  source: DecodedStreamChunkSource;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="font-mono">
+      <button
+        type="button"
+        className="flex max-w-full items-start gap-1 text-left"
+        style={{ color: 'var(--ds-gray-1000)' }}
+        onClick={() => setExpanded((value) => !value)}
+        title={`${source.type} decoded as ${source.encoding.toUpperCase()} text`}
+      >
+        <span className="select-none" style={{ color: 'var(--ds-gray-700)' }}>
+          {expanded ? '▼' : '▶'}
+        </span>
+        <span className="min-w-0 break-words">{source.rawSummary}</span>
+      </button>
+      {expanded && (
+        <div className="mt-1 pl-5">
+          <span style={{ color: 'var(--ds-gray-700)' }}>decoded: </span>
+          <span
+            className="whitespace-pre-wrap break-words"
+            style={{ color: 'var(--ds-green-900)' }}
+          >
+            {JSON.stringify(decodedText)}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function BytesDisplayLabel({
+  name,
+  display,
+}: {
+  name?: string;
+  display: BytesDisplay;
+}) {
+  return (
+    <div className="inline-block min-w-0 align-top">
+      {name != null && <ObjectName name={name} />}
+      {name != null && <span>: </span>}
+      {display.decodedFrom ? (
+        <DecodedBytesChunk
+          decodedText={display.text}
+          source={display.decodedFrom}
+        />
+      ) : (
+        <span
+          className="whitespace-pre-wrap break-words"
+          style={{ color: 'var(--ds-gray-1000)' }}
+        >
+          {display.text}
+        </span>
+      )}
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Custom nodeRenderer
 // ---------------------------------------------------------------------------
@@ -132,26 +418,17 @@ function NodeRenderer({
 }) {
   const extendedTheme = useContext(ExtendedThemeContext);
 
-  // Encrypted marker → flat label with Lock icon, non-expandable
+  if (isBytesDisplay(data)) {
+    return <BytesDisplayLabel name={name} display={data} />;
+  }
+
+  // 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 +452,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 +513,76 @@ 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;
+}
+
+function makeBytesDisplay(display: FormattedStreamChunkDisplay): unknown {
+  const opaque = Object.create(null);
+  Object.defineProperty(opaque, '__type', {
+    value: BYTES_DISPLAY_TYPE,
+    enumerable: false,
+  });
+  Object.defineProperty(opaque, 'text', {
+    value: display.text,
+    enumerable: false,
+  });
+  Object.defineProperty(opaque, 'decodedFrom', {
+    value: display.decodedFrom,
+    enumerable: false,
+  });
+  return opaque;
+}
+
+/**
+ * Recursively walk data and replace RunRef/StreamRef/typed array 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, URL, Headers, etc.) that have their own rendering in
+ * NodeRenderer. Map and Set containers are preserved while their contents are
+ * prepared for display.
+ *
+ * Exported for testing the typed-array detection path used by hydrated
+ * AI agent stream chunks (e.g. `{ delta: new Uint8Array(...) }`).
+ */
+export function collapseRefs(data: unknown): unknown {
+  if (data === null || typeof data !== 'object') return data;
+  if (ArrayBuffer.isView(data) && !(data instanceof DataView)) {
+    return makeBytesDisplay(formatArrayBufferViewForDisplay(data));
+  }
+  if (isRunRef(data) || isStreamRef(data))
+    return makeOpaqueRef(data as unknown as Record<string, unknown>);
+  if (Array.isArray(data)) return data.map(collapseRefs);
+  if (data instanceof Map) {
+    return new Map(
+      Array.from(data.entries(), ([key, value]) => [
+        collapseRefs(key),
+        collapseRefs(value),
+      ])
+    );
+  }
+  if (data instanceof Set) {
+    return new Set(Array.from(data.values(), 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 +592,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 +605,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 +637,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 {
@@ -293,9 +676,22 @@ function isObjectLike(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
 }
 
+function isSameBytesDisplay(a: BytesDisplay, b: BytesDisplay): boolean {
+  return (
+    a.text === b.text &&
+    a.decodedFrom?.type === b.decodedFrom?.type &&
+    a.decodedFrom?.encoding === b.decodedFrom?.encoding &&
+    a.decodedFrom?.rawSummary === b.decodedFrom?.rawSummary
+  );
+}
+
 function isDeepEqual(a: unknown, b: unknown, seen = new WeakMap()): boolean {
   if (Object.is(a, b)) return true;
 
+  if (isBytesDisplay(a) || isBytesDisplay(b)) {
+    return isBytesDisplay(a) && isBytesDisplay(b) && isSameBytesDisplay(a, b);
+  }
+
   if (a instanceof Date && b instanceof Date) {
     return a.getTime() === b.getTime();
   }

package/src/components/ui/error-stack-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { AlertCircle, Copy } from 'lucide-react';
-import { useToast } from '../../lib/toast';
+import { AlertCircle } from 'lucide-react';
+import { CopyButton } from '../new-trace-viewer/components/copy-button';
 
 /**
  * Check whether `value` looks like a structured error object with a `stack`
@@ -18,6 +18,21 @@ export function isStructuredErrorWithStack(
   );
 }
 
+/**
+ * Pull a short, single-line title out of an error message.
+ *
+ * Workflow's structured error messages are multi-line — the first line is
+ * the headline (`Failed to serialize step return value`) and the rest are
+ * `╰▶ hint:` / `╰▶ docs:` framed details. The full message belongs in the
+ * body of the error block; the title should just be the headline so the
+ * card stays scannable.
+ */
+function deriveTitle(message: string): string {
+  const firstLine =
+    message.split('\n').find((line) => line.trim().length > 0) ?? message;
+  return firstLine.trim();
+}
+
 /**
  * Renders an error with a `stack` field as a visually distinct error block.
  * Shows the error message with an alert icon at the top, separated from
@@ -28,9 +43,12 @@ export function ErrorStackBlock({
 }: {
   value: Record<string, unknown> & { stack: string };
 }) {
-  const toast = useToast();
   const stack = value.stack;
   const message = typeof value.message === 'string' ? value.message : undefined;
+  // V8's `Error.stack` already starts with `Name: message`, so when the
+  // body shows the stack it includes the full multi-line message anyway.
+  // The header just needs the first line.
+  const title = message ? deriveTitle(message) : undefined;
   const copyText = message ? `${message}\n\n${stack}` : stack;
 
   return (
@@ -41,40 +59,31 @@ export function ErrorStackBlock({
         background: 'var(--ds-red-100)',
       }}
     >
-      <button
-        type="button"
-        aria-label="Copy error"
-        title="Copy"
-        className="!absolute !right-2 !top-2 !flex !h-6 !w-6 !items-center !justify-center !rounded-md !border transition-transform transition-colors duration-100 hover:!bg-[var(--ds-red-200)] active:!scale-95"
-        style={{
-          borderColor: 'var(--ds-red-400)',
-          background: 'var(--ds-red-100)',
-          color: 'var(--ds-red-900)',
-        }}
-        onClick={() => {
-          navigator.clipboard
-            .writeText(copyText)
-            .then(() => {
-              toast.success('Copied to clipboard');
-            })
-            .catch(() => {
-              toast.error('Failed to copy');
-            });
-        }}
-      >
-        <Copy size={12} />
-      </button>
+      <CopyButton
+        copyText={copyText}
+        ariaLabel="Copy error"
+        className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-md border border-red-400 bg-red-100 p-0 text-red-900 transition-transform transition-colors duration-100 hover:bg-red-200 active:scale-95"
+      />
 
-      {message && (
+      {title && (
         <div
-          className="flex items-start gap-2 px-3 py-2.5 pr-10"
+          className="flex items-center gap-2 px-3 py-2.5 pr-10"
           style={{
             color: 'var(--ds-red-900)',
             borderBottom: '1px solid var(--ds-red-400)',
           }}
         >
-          <AlertCircle className="h-4 w-4 shrink-0" style={{ marginTop: 1 }} />
-          <p className="text-xs font-semibold m-0 break-words">{message}</p>
+          <AlertCircle className="h-4 w-4 shrink-0" />
+          <p
+            className="text-xs font-semibold m-0 truncate"
+            // The full multi-line message is in the stack body below; the
+            // header just shows the first line, single-line, with overflow
+            // ellipsised so a long title doesn't push the copy button or
+            // wrap into the framed hint/docs lines.
+            title={message}
+          >
+            {title}
+          </p>
         </div>
       )}
       <pre