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

package/src/components/ui/inspector-theme.ts

@@ -1,17 +1,16 @@
 /**
  * Shared theme configuration for react-inspector's ObjectInspector.
  *
- * Color choices are inspired by Node.js `util.inspect()` ANSI stylizing:
- *   - property names: unstyled (default foreground — dark text on light, light text on dark)
- *   - strings / symbols: green
- *   - numbers / booleans / bigint: yellow
- *   - null: bold (foreground)
- *   - undefined: grey
- *   - regexp: red
- *   - functions (special): cyan
- *   - date: magenta
+ * Colors follow Geist's Shiki JSON palette so the inspector reads the same
+ * as highlighted code blocks across the product:
+ *   - property names / punctuation: --ds-gray-1000 (default foreground)
+ *   - strings / numbers / booleans: --ds-green-900
+ *   - null / undefined: --ds-gray-900 (muted)
+ *   - regexp / function: --ds-purple-900
+ *   - date: --ds-pink-900
  *
- * See: https://github.com/nodejs/node/blob/main/lib/internal/util/inspect.js
+ * Because the `--ds-*` tokens adapt to theme automatically, the light and
+ * dark objects are intentionally identical.
  */
 
 // ---------------------------------------------------------------------------
@@ -25,11 +24,11 @@ export interface InspectorThemeExtended {
 }
 
 export const inspectorThemeExtendedLight: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: '#a21caf', // fuchsia-700
+  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
 };
 
 export const inspectorThemeExtendedDark: InspectorThemeExtended = {
-  OBJECT_VALUE_DATE_COLOR: '#e879f9', // fuchsia-400
+  OBJECT_VALUE_DATE_COLOR: 'var(--ds-pink-900)',
 };
 
 // ---------------------------------------------------------------------------
@@ -57,96 +56,55 @@ const shared = {
 // Light theme
 // ---------------------------------------------------------------------------
 
-export const inspectorThemeLight = {
+const geistTheme = {
   ...shared,
 
   // Base text
   BASE_COLOR: 'var(--ds-gray-1000)',
 
-  // Property names — unstyled, same as base foreground (Node: no style)
-  OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
+  // Property names — default foreground (matches JSON key color in Geist Shiki)
+  OBJECT_NAME_COLOR: 'var(--ds-gray-1000)',
 
-  // Strings & symbols — green (Node: 'green')
-  OBJECT_VALUE_STRING_COLOR: '#16a34a', // green-600
-  OBJECT_VALUE_SYMBOL_COLOR: '#16a34a',
+  // Strings & symbols — green
+  OBJECT_VALUE_STRING_COLOR: 'var(--ds-green-900)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'var(--ds-green-900)',
 
-  // Numbers & booleans — yellow/amber (Node: 'yellow')
-  OBJECT_VALUE_NUMBER_COLOR: '#b45309', // amber-700 (readable on white)
-  OBJECT_VALUE_BOOLEAN_COLOR: '#b45309',
+  // Numbers & booleans — green (Geist JSON tokens)
+  OBJECT_VALUE_NUMBER_COLOR: 'var(--ds-green-900)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'var(--ds-green-900)',
 
-  // null — bold foreground (Node: 'bold')
+  // null — muted foreground
   OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-900)',
 
-  // undefined — grey (Node: 'grey')
-  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
+  // undefined — muted foreground
+  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-900)',
 
-  // RegExp — red (Node regexp base uses green/red/yellow palette)
-  OBJECT_VALUE_REGEXP_COLOR: '#dc2626', // red-600
+  // RegExp — purple
+  OBJECT_VALUE_REGEXP_COLOR: 'var(--ds-purple-900)',
 
-  // Functions — cyan (Node: 'special' → 'cyan')
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#0891b2', // cyan-600
+  // Functions — purple
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'var(--ds-purple-900)',
 
-  // HTML (less relevant for data inspection, but reasonable defaults)
-  HTML_TAG_COLOR: 'var(--ds-gray-500)',
-  HTML_TAGNAME_COLOR: '#0891b2',
-  HTML_ATTRIBUTE_NAME_COLOR: '#b45309',
-  HTML_ATTRIBUTE_VALUE_COLOR: '#16a34a',
-  HTML_COMMENT_COLOR: 'var(--ds-gray-400)',
-  HTML_DOCTYPE_COLOR: 'var(--ds-gray-400)',
+  // HTML (rarely used here, kept consistent with the palette)
+  HTML_TAG_COLOR: 'var(--ds-gray-900)',
+  HTML_TAGNAME_COLOR: 'var(--ds-blue-900)',
+  HTML_ATTRIBUTE_NAME_COLOR: 'var(--ds-amber-900)',
+  HTML_ATTRIBUTE_VALUE_COLOR: 'var(--ds-green-900)',
+  HTML_COMMENT_COLOR: 'var(--ds-gray-700)',
+  HTML_DOCTYPE_COLOR: 'var(--ds-gray-700)',
 
   // Structural
-  ARROW_COLOR: 'var(--ds-gray-500)',
+  ARROW_COLOR: 'var(--ds-gray-700)',
   TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
   TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
   TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
-  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
+  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-700)',
 };
 
+export const inspectorThemeLight = geistTheme;
+
 // ---------------------------------------------------------------------------
 // Dark theme
 // ---------------------------------------------------------------------------
 
-export const inspectorThemeDark = {
-  ...shared,
-
-  // Base text
-  BASE_COLOR: 'var(--ds-gray-1000)',
-
-  // Property names — white/light foreground (Node: unstyled = white in dark terminal)
-  OBJECT_NAME_COLOR: 'var(--ds-gray-900)',
-
-  // Strings & symbols — green (Node: 'green')
-  OBJECT_VALUE_STRING_COLOR: '#4ade80', // green-400
-  OBJECT_VALUE_SYMBOL_COLOR: '#4ade80',
-
-  // Numbers & booleans — yellow (Node: 'yellow')
-  OBJECT_VALUE_NUMBER_COLOR: '#facc15', // yellow-400
-  OBJECT_VALUE_BOOLEAN_COLOR: '#facc15',
-
-  // null — bold foreground / white (Node: 'bold')
-  OBJECT_VALUE_NULL_COLOR: 'var(--ds-gray-1000)',
-
-  // undefined — grey (Node: 'grey')
-  OBJECT_VALUE_UNDEFINED_COLOR: 'var(--ds-gray-500)',
-
-  // RegExp — red (Node regexp palette)
-  OBJECT_VALUE_REGEXP_COLOR: '#f87171', // red-400
-
-  // Functions — cyan (Node: 'special' → 'cyan')
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: '#22d3ee', // cyan-400
-
-  // HTML
-  HTML_TAG_COLOR: 'var(--ds-gray-500)',
-  HTML_TAGNAME_COLOR: '#22d3ee',
-  HTML_ATTRIBUTE_NAME_COLOR: '#facc15',
-  HTML_ATTRIBUTE_VALUE_COLOR: '#4ade80',
-  HTML_COMMENT_COLOR: 'var(--ds-gray-500)',
-  HTML_DOCTYPE_COLOR: 'var(--ds-gray-500)',
-
-  // Structural
-  ARROW_COLOR: 'var(--ds-gray-500)',
-  TABLE_BORDER_COLOR: 'var(--ds-gray-300)',
-  TABLE_TH_BACKGROUND_COLOR: 'var(--ds-gray-100)',
-  TABLE_TH_HOVER_COLOR: 'var(--ds-gray-200)',
-  TABLE_SORT_ICON_COLOR: 'var(--ds-gray-500)',
-};
+export const inspectorThemeDark = geistTheme;

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

@@ -17,6 +17,7 @@ import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useToast } from '../lib/toast';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 import { ErrorBoundary } from './error-boundary';
 import {
   EntityDetailPanel,
@@ -36,7 +37,6 @@ import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
-import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the
@@ -776,7 +776,6 @@ export const WorkflowTraceViewer = ({
   encryptionKey,
   onDecrypt,
   isDecrypting = false,
-  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   events: Event[];
@@ -819,8 +818,6 @@ 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>(
@@ -977,7 +974,7 @@ export const WorkflowTraceViewer = ({
   }
 
   return (
-    <div className="relative w-full h-full flex">
+    <div className="relative w-full h-full flex flex-col">
       {/* Timeline (takes remaining space) */}
       <div className="flex-1 min-w-0 relative">
         <TraceViewerContextProvider
@@ -1164,7 +1161,6 @@ export const WorkflowTraceViewer = ({
                 onDecrypt={onDecrypt}
                 isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
-                hasEncryptedData={hasEncryptedData}
               />
             </ErrorBoundary>
           </div>

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

@@ -59,7 +59,7 @@ export const waitEventsToWaitEntity = (
   waitId: string;
   runId: string;
   createdAt: Date;
-  resumeAt: Date;
+  resumeAt?: Date;
   completedAt?: Date;
 } | null => {
   const startEvent = events.find((event) => event.eventType === 'wait_created');
@@ -73,7 +73,9 @@ export const waitEventsToWaitEntity = (
     waitId: startEvent.correlationId,
     runId: startEvent.runId,
     createdAt: startEvent.createdAt,
-    resumeAt: startEvent.eventData?.resumeAt,
+    resumeAt: startEvent.eventData?.resumeAt
+      ? new Date(startEvent.eventData.resumeAt)
+      : undefined,
     completedAt: completedEvent?.createdAt,
   };
 };
@@ -81,13 +83,29 @@ export const waitEventsToWaitEntity = (
 /**
  * Converts a workflow Wait to an OpenTelemetry Span
  */
-export function waitToSpan(events: Event[], maxEndTime: Date): Span | null {
+export function waitToSpan(
+  events: Event[],
+  maxEndTime: Date,
+  fallbackEndTime = maxEndTime
+): Span | null {
   const wait = waitEventsToWaitEntity(events);
   if (!wait) {
     return null;
   }
   const startTime = wait.createdAt;
-  const endTime = wait.completedAt ?? maxEndTime;
+  const startMs = startTime.getTime();
+  let endTime = wait.completedAt;
+  if (!endTime) {
+    const fallbackCap =
+      wait.resumeAt && wait.resumeAt.getTime() < fallbackEndTime.getTime()
+        ? wait.resumeAt
+        : fallbackEndTime;
+    endTime =
+      maxEndTime.getTime() > startMs &&
+      maxEndTime.getTime() < fallbackCap.getTime()
+        ? maxEndTime
+        : fallbackCap;
+  }
   const start = dateToOtelTime(startTime);
   const end = dateToOtelTime(endTime);
   const duration = calculateDuration(startTime, endTime);

package/src/index.ts

@@ -50,6 +50,7 @@ export {
   STREAM_REF_TYPE,
   truncateId,
 } from './lib/hydration';
+export type { DecodedStreamChunkSource } from './lib/stream-display';
 export type { ToastAdapter } from './lib/toast';
 export { ToastProvider, useToast } from './lib/toast';
 export type { StreamStep } from './lib/utils';

package/src/lib/stream-display.ts

@@ -0,0 +1,48 @@
+export interface DecodedStreamChunkSource {
+  type: string;
+  encoding: 'utf-8';
+  rawSummary: string;
+}
+
+export interface FormattedStreamChunkDisplay {
+  text: string;
+  decodedFrom?: DecodedStreamChunkSource;
+}
+
+export function summarizeArrayBufferView(value: ArrayBufferView): string {
+  const ta = value as unknown as {
+    length: number;
+    constructor: { name: string };
+  } & ArrayLike<number>;
+  const name = ta.constructor.name;
+  const preview = Array.from(
+    { length: Math.min(ta.length, 8) },
+    (_, i) => ta[i]
+  );
+  const suffix = ta.length > 8 ? ', …' : '';
+  return `${name}(${ta.length}) [${preview.join(', ')}${suffix}]`;
+}
+
+/**
+ * Decode a typed array as UTF-8 text when valid, otherwise return a compact
+ * raw-byte summary. Used by `DataInspector`'s `collapseRefs` pipeline so
+ * hydrated `Uint8Array` chunks (e.g. AI SDK text deltas) render as readable
+ * text while still exposing the underlying byte layout.
+ */
+export function formatArrayBufferViewForDisplay(
+  value: ArrayBufferView
+): FormattedStreamChunkDisplay {
+  try {
+    const text = new TextDecoder('utf-8', { fatal: true }).decode(value);
+    return {
+      text,
+      decodedFrom: {
+        type: value.constructor.name,
+        encoding: 'utf-8',
+        rawSummary: summarizeArrayBufferView(value),
+      },
+    };
+  } catch {
+    return { text: summarizeArrayBufferView(value) };
+  }
+}

package/src/lib/trace-builder.ts

@@ -117,6 +117,7 @@ function buildSpans(
   // unknown territory. Even when the run is completed, we may not have loaded
   // all events yet, so always use the latest event we've actually seen.
   const childMaxEnd = latestKnownTime;
+  const runMaxEnd = run.completedAt ?? now;
 
   const stepSpans = Array.from(groupedEvents.eventsByStepId.values())
     .map((events) => stepToSpan(events, childMaxEnd))
@@ -127,7 +128,7 @@ function buildSpans(
     .filter((span): span is Span => span !== null);
 
   const waitSpans = Array.from(groupedEvents.timerEvents.values())
-    .map((events) => waitToSpan(events, childMaxEnd))
+    .map((events) => waitToSpan(events, childMaxEnd, runMaxEnd))
     .filter((span): span is Span => span !== null);
 
   return {

package/src/lib/utils.ts

@@ -7,10 +7,6 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
 
-const durationFormatter = new Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 2,
-});
-
 const MS_IN_SECOND = 1000;
 const MS_IN_MINUTE = 60 * MS_IN_SECOND;
 const MS_IN_HOUR = 60 * MS_IN_MINUTE;
@@ -20,52 +16,53 @@ const MS_IN_DAY = 24 * MS_IN_HOUR;
  * Formats a duration in milliseconds to a human-readable string.
  *
  * @param ms - Duration in milliseconds
- * @param compact - If true, returns a single-unit format (e.g., "45s", "2.5m").
- *                  If false (default), returns multi-part format (e.g., "1h 30m", "2d 5h").
+ * @param compact - If true, returns a compact format (e.g., "380ms", "2m 30s").
+ *                  If false (default), returns multi-part format (e.g., "1m 13s", "2d 5h 3m 12s").
  *
- * Compact format:
- * - < 1s: shows milliseconds (e.g., "500ms")
+ * Compact format (timeline markers):
+ * - < 1s: shows milliseconds (e.g., "380ms")
  * - < 1m: shows seconds (e.g., "45s")
- * - < 1h: shows minutes (e.g., "45m")
- * - >= 1h: shows hours (e.g., "2.5h")
+ * - < 1h: shows minutes and seconds (e.g., "2m 30s")
+ * - >= 1h: shows hours and minutes (e.g., "2h 30m")
  *
  * Full format:
- * - < 1s: shows milliseconds (e.g., "500ms")
- * - < 1m: shows seconds (e.g., "45.5s")
- * - >= 1m: shows human-readable format (e.g., "1h 30m", "2d 5h")
+ * - < 1s: shows milliseconds (e.g., "380ms")
+ * - < 1m: shows seconds (e.g., "45s")
+ * - >= 1m: shows decomposed format with whole seconds (e.g., "1m 13s", "2m 13s")
  */
 export function formatDuration(ms: number, compact = false): string {
   if (ms === 0) {
-    return '0';
+    return '0s';
   }
 
-  // For durations less than 1 second, show milliseconds
   if (ms < MS_IN_SECOND) {
-    return `${durationFormatter.format(ms)}ms`;
+    const roundedMs = Math.round(ms);
+    return roundedMs < MS_IN_SECOND ? `${roundedMs}ms` : '1s';
   }
 
-  // For durations less than 1 minute, show seconds
-  if (ms < MS_IN_MINUTE) {
-    return `${durationFormatter.format(ms / MS_IN_SECOND)}s`;
+  const roundedMs = Math.round(ms / MS_IN_SECOND) * MS_IN_SECOND;
+
+  if (roundedMs < MS_IN_MINUTE) {
+    return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
   }
 
   // Compact format: multi-unit without decimals (e.g. "8m 20s", "2h 30m")
   if (compact) {
-    if (ms < MS_IN_HOUR) {
-      const m = Math.floor(ms / MS_IN_MINUTE);
-      const s = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+    if (roundedMs < MS_IN_HOUR) {
+      const m = Math.floor(roundedMs / MS_IN_MINUTE);
+      const s = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
       return s > 0 ? `${m}m ${s}s` : `${m}m`;
     }
-    const h = Math.floor(ms / MS_IN_HOUR);
-    const m = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
+    const h = Math.floor(roundedMs / MS_IN_HOUR);
+    const m = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
     return m > 0 ? `${h}h ${m}m` : `${h}h`;
   }
 
-  // Full format: human-readable multi-part
-  const days = Math.floor(ms / MS_IN_DAY);
-  const hours = Math.floor((ms % MS_IN_DAY) / MS_IN_HOUR);
-  const minutes = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
-  const seconds = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+  // Full format: decompose into larger units + whole seconds.
+  const days = Math.floor(roundedMs / MS_IN_DAY);
+  const hours = Math.floor((roundedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
 
   const parts: string[] = [];
 
@@ -78,9 +75,7 @@ export function formatDuration(ms: number, compact = false): string {
   if (minutes > 0) {
     parts.push(`${minutes}m`);
   }
-  if (hours <= 1 && (seconds > 0 || parts.length === 0)) {
-    parts.push(`${seconds}s`);
-  }
+  parts.push(`${seconds}s`);
 
   return parts.join(' ');
 }