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

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

@@ -26,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,
@@ -33,6 +38,7 @@ import {
   inspectorThemeExtendedLight,
   inspectorThemeLight,
 } from './inspector-theme';
+import { Button } from './button';
 import { Spinner } from './spinner';
 
 // ---------------------------------------------------------------------------
@@ -43,6 +49,7 @@ import { Spinner } from './spinner';
 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;
@@ -54,6 +61,32 @@ interface RunRef {
   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 {
   if (value === null || typeof value !== 'object') return false;
   // Check both enumerable and non-enumerable __type (opaque refs use non-enumerable)
@@ -67,6 +100,12 @@ function isRunRef(value: unknown): value is RunRef {
   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 {
   __type: string;
   className: string;
@@ -100,6 +139,7 @@ export const StreamClickContext = createContext<
 export type DecryptClickContextValue = {
   onDecrypt: () => void;
   isDecrypting: boolean;
+  hasEncryptedData?: boolean;
 };
 
 export const DecryptClickContext = createContext<
@@ -114,33 +154,22 @@ 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,
-        }}
+      <Button
+        size="xs"
+        className="align-baseline gap-x-1"
         disabled={ctx.isDecrypting}
         onClick={(e) => {
           e.stopPropagation();
           ctx.onDecrypt();
         }}
-        title="Click to decrypt"
       >
         {ctx.isDecrypting ? (
-          <Spinner size={12} />
+          <Spinner size={10} />
         ) : (
-          <Lock
-            className="h-3 w-3"
-            style={{ display: 'inline', flexShrink: 0 }}
-          />
+          <Lock className="h-3 w-3" />
         )}
-        <span>{ctx.isDecrypting ? 'Decrypting…' : 'Decrypt'}</span>
-      </button>
+        <span>Decrypt</span>
+      </Button>
     );
   }
   return (
@@ -219,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
 // ---------------------------------------------------------------------------
@@ -248,6 +418,10 @@ function NodeRenderer({
 }) {
   const extendedTheme = useContext(ExtendedThemeContext);
 
+  if (isBytesDisplay(data)) {
+    return <BytesDisplayLabel name={name} display={data} />;
+  }
+
   // Encrypted marker → flat label with Lock icon, clickable when onDecrypt is available
   if (
     data !== null &&
@@ -352,18 +526,53 @@ function makeOpaqueRef(ref: Record<string, unknown>): unknown {
   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 objects with
+ * 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, Map, Set, URL, Headers, etc.) that have their
- * own rendering in NodeRenderer.
+ * 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(...) }`).
  */
-function collapseRefs(data: unknown): unknown {
+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;
@@ -467,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,37 +1,73 @@
 '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';
+
+export type StructuredErrorRecord = Record<string, unknown> & {
+  message?: string;
+  stack?: string;
+};
 
 /**
- * Check whether `value` looks like a structured error object with a `stack`
- * field that we can render as pre-formatted text.
+ * Check whether `value` looks like a structured error object we can render
+ * with the error block. Some persisted workflow errors only include a
+ * `message`, while runtime errors usually also include `stack`.
  */
-export function isStructuredErrorWithStack(
+export function isStructuredError(
   value: unknown
-): value is Record<string, unknown> & { stack: string } {
+): value is StructuredErrorRecord {
   return (
     value != null &&
     typeof value === 'object' &&
-    'stack' in value &&
-    typeof (value as Record<string, unknown>).stack === 'string'
+    (typeof (value as Record<string, unknown>).message === 'string' ||
+      typeof (value as Record<string, unknown>).stack === 'string')
+  );
+}
+
+/**
+ * Narrower guard kept for callers that specifically need a stack trace.
+ */
+export function isStructuredErrorWithStack(
+  value: unknown
+): value is StructuredErrorRecord & { stack: string } {
+  return (
+    isStructuredError(value) &&
+    typeof (value as StructuredErrorRecord).stack === 'string'
   );
 }
 
 /**
- * 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
- * the stack trace below.
+ * 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.
  */
-export function ErrorStackBlock({
-  value,
-}: {
-  value: Record<string, unknown> & { stack: string };
-}) {
-  const toast = useToast();
-  const stack = value.stack;
+function deriveTitle(message: string): string {
+  const firstLine =
+    message.split('\n').find((line) => line.trim().length > 0) ?? message;
+  return firstLine.trim();
+}
+
+/**
+ * Renders a structured error as a visually distinct error block. Shows the
+ * error message with an alert icon at the top, separated from the stack trace
+ * or full message below.
+ */
+export function ErrorStackBlock({ value }: { value: StructuredErrorRecord }) {
+  const stack = typeof value.stack === 'string' ? value.stack : undefined;
   const message = typeof value.message === 'string' ? value.message : undefined;
-  const copyText = message ? `${message}\n\n${stack}` : stack;
+  const body = stack ?? message ?? '';
+  // V8's `Error.stack` already starts with `Name: message`; message-only
+  // errors use the message as the body so long single-line failures remain
+  // readable even when the header truncates.
+  const title = message ? deriveTitle(message) : deriveTitle(body);
+  const copyText =
+    message && stack && !stack.includes(message)
+      ? `${message}\n\n${stack}`
+      : body;
 
   return (
     <div
@@ -41,51 +77,44 @@ 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 message or stack is in the 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
-        className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
-        style={{
-          color: 'var(--ds-red-900)',
-          background: 'var(--ds-red-200)',
-        }}
-      >
-        {stack}
-      </pre>
+      {body && (
+        <pre
+          className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
+          style={{
+            color: 'var(--ds-red-900)',
+            background: 'var(--ds-red-200)',
+          }}
+        >
+          {body}
+        </pre>
+      )}
     </div>
   );
 }

package/src/components/ui/icon-button.tsx

@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const iconButtonVariants = cva(
+  [
+    'm-0 inline-flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent p-0 align-baseline font-inherit no-underline [background:none] [-webkit-appearance:none] [-webkit-tap-highlight-color:transparent]',
+    'transition-colors duration-150 ease-in-out',
+    'enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-40',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--ds-focus-color)] focus-visible:outline-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        tertiary:
+          'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+        muted:
+          'text-gray-900 enabled:hover:bg-gray-alpha-200 enabled:hover:text-gray-1000 enabled:active:bg-gray-alpha-200 focus-visible:text-gray-1000',
+      },
+      size: {
+        tiny: 'h-6 w-6 rounded-[4px] [&_svg]:h-4 [&_svg]:w-4',
+        small: 'h-8 w-8 rounded-md [&_svg]:h-4 [&_svg]:w-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'tertiary',
+      size: 'tiny',
+    },
+  }
+);
+
+export type IconButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'type'
+> &
+  VariantProps<typeof iconButtonVariants> & {
+    'aria-label': string;
+    type?: 'button' | 'submit' | 'reset';
+  };
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className, variant, size, type = 'button', ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(iconButtonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+);
+IconButton.displayName = 'IconButton';
+
+export { iconButtonVariants };