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

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

@@ -4,10 +4,8 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isEncryptedMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { DecryptClickContext } from '../ui/data-inspector';
-import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -69,7 +67,6 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
-  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -108,8 +105,6 @@ 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);
@@ -216,17 +211,6 @@ export function EntityDetailPanel({
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
 
-  const hasEncryptedFields = useMemo(() => {
-    if (!spanDetailData) return false;
-    const d = spanDetailData as Record<string, unknown>;
-    return (
-      isEncryptedMarker(d.input) ||
-      isEncryptedMarker(d.output) ||
-      isEncryptedMarker(d.error) ||
-      isEncryptedMarker(d.metadata)
-    );
-  }, [spanDetailData]);
-
   // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
     if (resource !== 'hook' || !resourceId) return undefined;
@@ -354,61 +338,12 @@ export function EntityDetailPanel({
     return null;
   }
 
-  const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
   const hasPendingActions =
     (resource === 'sleep' && canWakeUp) ||
     (resource === 'hook' && canResolveHook);
-  const runStateLabel = run.completedAt ? 'Completed' : 'Live';
 
   return (
     <div className="flex h-full flex-col">
-      <div
-        className="border-b px-3 py-3"
-        style={{ borderColor: 'var(--ds-gray-200)' }}
-      >
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <span
-                className="inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                  color: 'var(--ds-gray-900)',
-                  backgroundColor: 'var(--ds-background-100)',
-                }}
-              >
-                {resourceLabel}
-              </span>
-              <span
-                className="text-[13px]"
-                style={{
-                  color: run.completedAt
-                    ? 'var(--ds-gray-700)'
-                    : 'var(--ds-green-800)',
-                }}
-              >
-                {runStateLabel}
-              </span>
-            </div>
-            <p
-              className="mt-1 truncate font-mono text-[13px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-              title={resourceId}
-            >
-              {resourceId}
-            </p>
-          </div>
-          {(hasEncryptedFields || hasEncryptedData || encryptionKey) &&
-            onDecrypt && (
-              <DecryptButton
-                decrypted={!!encryptionKey}
-                loading={isDecrypting}
-                onClick={onDecrypt}
-              />
-            )}
-        </div>
-      </div>
-
       <DecryptClickContext.Provider
         value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
       >
@@ -479,12 +414,6 @@ export function EntityDetailPanel({
 
           <div className="space-y-4">
             <section>
-              <h3
-                className="mb-2 text-[13px] font-medium uppercase tracking-wide"
-                style={{ color: 'var(--ds-gray-700)' }}
-              >
-                Details
-              </h3>
               <AttributePanel
                 data={displayData}
                 moduleSpecifier={moduleSpecifier}

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

@@ -142,8 +142,11 @@ function EventItem({
           className="flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5"
           style={{ borderColor: 'var(--ds-gray-300)' }}
         >
-          <span className="text-[14px]" style={{ color: 'var(--ds-gray-700)' }}>
-            eventId
+          <span
+            className="text-[13px] font-medium"
+            style={{ color: 'var(--ds-gray-700)' }}
+          >
+            Event ID
           </span>
           <span
             className="max-w-[70%] truncate text-right text-[13px] font-mono"
@@ -159,10 +162,10 @@ function EventItem({
             style={{ borderColor: 'var(--ds-gray-300)' }}
           >
             <span
-              className="text-[14px]"
+              className="text-[13px] font-medium"
               style={{ color: 'var(--ds-gray-700)' }}
             >
-              correlationId
+              Correlation ID
             </span>
             <span
               className="max-w-[70%] truncate text-right text-[13px] font-mono"
@@ -311,10 +314,10 @@ export function EventsList({
   return (
     <div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
       <h3
-        className="text-heading-16 font-medium mt-4 mb-2"
+        className="text-label-14 font-medium mt-4 mb-2"
         style={{ color: 'var(--ds-gray-1000)' }}
       >
-        Events {!isLoading && `(${sortedEvents.length})`}
+        Events
       </h3>
       {isLoading ? (
         <div className="flex flex-col gap-4">

package/src/components/sidebar/sidebar-data-context.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import type { SpanSelectionInfo } from './entity-detail-panel';
+
+export interface SidebarDataContextValue {
+  run: WorkflowRun;
+  events: Event[];
+  spanDetailData: WorkflowRun | Step | Hook | Event | null;
+  spanDetailError?: Error | null;
+  spanDetailLoading?: boolean;
+  onSpanSelect: (info: SpanSelectionInfo) => void;
+  onStreamClick?: (streamId: string) => void;
+  onRunClick?: (runId: string) => void;
+  onWakeUpSleep?: (
+    runId: string,
+    correlationId: string
+  ) => Promise<{ stoppedCount: number }>;
+  onLoadEventData?: (
+    correlationId: string,
+    eventId: string
+  ) => Promise<unknown | null>;
+  onResolveHook?: (
+    hookToken: string,
+    payload: unknown,
+    hook?: Hook
+  ) => Promise<void>;
+  encryptionKey?: Uint8Array;
+  onDecrypt?: () => void;
+  isDecrypting?: boolean;
+  hasEncryptedData?: boolean;
+}
+
+const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
+SidebarDataContext.displayName = 'SidebarDataContext';
+
+export function SidebarDataProvider({
+  value,
+  children,
+}: {
+  value: SidebarDataContextValue;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarDataContext.Provider value={value}>
+      {children}
+    </SidebarDataContext.Provider>
+  );
+}
+
+export function useSidebarData(): SidebarDataContextValue {
+  const ctx = useContext(SidebarDataContext);
+  if (!ctx) {
+    throw new Error('useSidebarData must be used within a SidebarDataProvider');
+  }
+  return ctx;
+}
+
+export function useSidebarDataOptional(): SidebarDataContextValue | null {
+  return useContext(SidebarDataContext);
+}

package/src/components/stream-viewer.tsx

@@ -5,37 +5,13 @@ import { Virtuoso, type VirtuosoHandle } from 'react-virtuoso';
 import { DataInspector } from './ui/data-inspector';
 import { Skeleton } from './ui/skeleton';
 
-// ──────────────────────────────────────────────────────────────────────────
-// Helpers
-// ──────────────────────────────────────────────────────────────────────────
-
-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;
-  }
-}
-
 // ──────────────────────────────────────────────────────────────────────────
 // Types
 // ──────────────────────────────────────────────────────────────────────────
 
 export interface StreamChunk {
   id: number;
-  text: string;
+  value: unknown;
 }
 
 type Chunk = StreamChunk;
@@ -62,8 +38,6 @@ const ChunkRow = React.memo(function ChunkRow({
   chunk: Chunk;
   index: number;
 }) {
-  const parsed = parseChunkData(chunk.text);
-
   return (
     <div
       className="text-[11px] rounded-md border p-3"
@@ -72,22 +46,26 @@ const ChunkRow = React.memo(function ChunkRow({
         backgroundColor: 'var(--ds-gray-100)',
       }}
     >
-      <span
-        className="select-none mr-2"
-        style={{ color: 'var(--ds-gray-500)' }}
-      >
-        [{index}]
-      </span>
-      {typeof parsed === 'string' ? (
+      <div className="flex items-start gap-2">
         <span
-          className="whitespace-pre-wrap break-words"
-          style={{ color: 'var(--ds-gray-1000)' }}
+          className="select-none pt-px"
+          style={{ color: 'var(--ds-gray-500)' }}
         >
-          {deserializeChunkText(parsed)}
+          [{index}]
         </span>
-      ) : (
-        <DataInspector data={parsed} expandLevel={1} />
-      )}
+        <div className="min-w-0 flex-1">
+          {typeof chunk.value === 'string' ? (
+            <span
+              className="whitespace-pre-wrap break-words"
+              style={{ color: 'var(--ds-gray-1000)' }}
+            >
+              {chunk.value}
+            </span>
+          ) : (
+            <DataInspector data={chunk.value} expandLevel={1} />
+          )}
+        </div>
+      </div>
     </div>
   );
 });

package/src/components/trace-viewer/util/timing.ts

@@ -14,22 +14,18 @@ export function getMsInHighRes(ms: number): [number, number] {
 }
 
 /**
- * Formats a duration for timeline display (compact single-unit format).
+ * Formats a duration for timeline display (compact format).
  * @deprecated Use formatDuration(ms, true) instead.
  */
 export const formatDurationForTimeline = (ms: number): string =>
   formatDuration(ms, true);
 
-const timeSelectionFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 export function formatTimeSelection(ms: number): string {
-  if (ms >= 1000) {
-    return `${timeSelectionFormatter.format(ms / 1000)}s`;
+  const roundedMs = Math.round(ms);
+  if (roundedMs < 1000) {
+    return `${roundedMs}ms`;
   }
-  return `${timeSelectionFormatter.format(ms)}ms`;
+  return `${Math.round(ms / 1000)}s`;
 }
 
 /**

package/src/components/trace-viewer-new.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import type { WorkflowRun } from '@workflow/core/runtime';
+import type { Event } from '@workflow/world';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
+import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
+import {
+  SidebarDataProvider,
+  type SidebarDataContextValue,
+} from './sidebar/sidebar-data-context';
+import type { Trace } from './trace-viewer/types';
+
+const NewTraceViewer = ({
+  run,
+  events,
+  sidebarData,
+}: {
+  run: WorkflowRun;
+  events: Event[];
+  sidebarData: SidebarDataContextValue;
+}) => {
+  // Build trace only when actual data changes — no timer-driven rebuilds.
+  // Active span widths are animated imperatively by useLiveTick at 60fps.
+  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+    if (!run?.runId) {
+      return undefined;
+    }
+    return buildTrace(run, events, new Date());
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
+  }, [run, events]);
+  const trace = traceWithMeta;
+
+  if (!trace) {
+    return (
+      <div className="relative w-full h-full flex items-center justify-center">
+        <div className="text-gray-500 text-sm">Loading trace…</div>
+      </div>
+    );
+  }
+
+  return (
+    <SidebarDataProvider value={sidebarData}>
+      <div className="relative w-full h-full flex">
+        <NewTraceViewerComponent trace={trace as Trace} />
+      </div>
+    </SidebarDataProvider>
+  );
+};
+
+export { NewTraceViewer };

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,
@@ -43,6 +48,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 +60,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 +99,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;
@@ -219,6 +257,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 +427,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 +535,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 +685,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();
   }