@workflow/web-shared 4.1.0-beta.65 → 4.1.0-beta.67

package/src/components/ui/timestamp-tooltip.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+// ---------------------------------------------------------------------------
+// Time formatting helpers
+// ---------------------------------------------------------------------------
+
+interface TimeUnit {
+  unit: string;
+  ms: number;
+}
+
+const TIME_UNITS: TimeUnit[] = [
+  { unit: 'year', ms: 31536000000 },
+  { unit: 'month', ms: 2628000000 },
+  { unit: 'day', ms: 86400000 },
+  { unit: 'hour', ms: 3600000 },
+  { unit: 'minute', ms: 60000 },
+  { unit: 'second', ms: 1000 },
+];
+
+function formatTimeDifference(diff: number): string {
+  let remaining = Math.abs(diff);
+  const result: string[] = [];
+
+  for (const { unit, ms } of TIME_UNITS) {
+    const value = Math.floor(remaining / ms);
+    if (value > 0 || result.length > 0) {
+      result.push(`${value} ${unit}${value !== 1 ? 's' : ''}`);
+      remaining %= ms;
+    }
+    if (result.length === 3) break;
+  }
+
+  return result.join(', ');
+}
+
+function useTimeAgo(date: number): string {
+  const [timeAgo, setTimeAgo] = useState<string>('');
+
+  useEffect(() => {
+    const update = (): void => {
+      const diff = Date.now() - date;
+      const formatted = formatTimeDifference(diff);
+      setTimeAgo(formatted ? `${formatted} ago` : 'Just now');
+    };
+    update();
+    const timer = setInterval(update, 1000);
+    return () => clearInterval(timer);
+  }, [date]);
+
+  return timeAgo;
+}
+
+// ---------------------------------------------------------------------------
+// Timezone row
+// ---------------------------------------------------------------------------
+
+function ZoneDateTimeRow({
+  date,
+  zone,
+}: {
+  zone: string;
+  date: number;
+}): ReactNode {
+  const dateObj = new Date(date);
+
+  const formattedZone =
+    new Intl.DateTimeFormat('en-US', {
+      timeZone: zone,
+      timeZoneName: 'short',
+    })
+      .formatToParts(dateObj)
+      .find((part) => part.type === 'timeZoneName')?.value || zone;
+
+  const formattedDate = dateObj.toLocaleString('en-US', {
+    timeZone: zone,
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  const formattedTime = dateObj.toLocaleTimeString('en-US', {
+    timeZone: zone,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 16,
+            padding: '0 6px',
+            backgroundColor: 'var(--ds-gray-200)',
+            borderRadius: 3,
+            fontSize: 11,
+            fontFamily: 'var(--font-mono, monospace)',
+            fontWeight: 500,
+            color: 'var(--ds-gray-900)',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {formattedZone}
+        </div>
+        <span
+          style={{
+            fontSize: 13,
+            color: 'var(--ds-gray-1000)',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {formattedDate}
+        </span>
+      </div>
+      <span
+        style={{
+          fontSize: 11,
+          fontFamily: 'var(--font-mono, monospace)',
+          fontVariantNumeric: 'tabular-nums',
+          color: 'var(--ds-gray-900)',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {formattedTime}
+      </span>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tooltip card content
+// ---------------------------------------------------------------------------
+
+function TimestampTooltipContent({ date }: { date: number }): ReactNode {
+  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const timeAgo = useTimeAgo(date);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+        minWidth: 300,
+        padding: '12px 14px',
+      }}
+    >
+      <span
+        style={{
+          fontSize: 13,
+          fontVariantNumeric: 'tabular-nums',
+          color: 'var(--ds-gray-900)',
+        }}
+      >
+        {timeAgo}
+      </span>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <ZoneDateTimeRow date={date} zone="UTC" />
+        <ZoneDateTimeRow date={date} zone={localTimezone} />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Hover tooltip wrapper
+// ---------------------------------------------------------------------------
+
+const TOOLTIP_WIDTH = 330;
+const VIEWPORT_PAD = 8;
+
+function TooltipPortal({
+  triggerRect,
+  onMouseEnter,
+  onMouseLeave,
+  date,
+}: {
+  triggerRect: DOMRect;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  date: number;
+}): ReactNode {
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const [style, setStyle] = useState<React.CSSProperties>({
+    position: 'fixed',
+    zIndex: 9999,
+    visibility: 'hidden',
+  });
+
+  useEffect(() => {
+    const placement = triggerRect.top > 240 ? 'above' : 'below';
+    const centerX = triggerRect.left + triggerRect.width / 2;
+
+    const el = tooltipRef.current;
+    const w = el ? el.offsetWidth : TOOLTIP_WIDTH;
+    const h = el ? el.offsetHeight : 100;
+
+    let left = centerX - w / 2;
+    left = Math.max(
+      VIEWPORT_PAD,
+      Math.min(left, window.innerWidth - w - VIEWPORT_PAD)
+    );
+
+    let top: number;
+    if (placement === 'above') {
+      top = triggerRect.top - h - 6;
+      if (top < VIEWPORT_PAD) {
+        top = triggerRect.bottom + 6;
+      }
+    } else {
+      top = triggerRect.bottom + 6;
+      if (top + h > window.innerHeight - VIEWPORT_PAD) {
+        top = triggerRect.top - h - 6;
+      }
+    }
+
+    setStyle({
+      position: 'fixed',
+      left,
+      top,
+      zIndex: 9999,
+      borderRadius: 10,
+      border: '1px solid var(--ds-gray-alpha-200)',
+      backgroundColor: 'var(--ds-background-100)',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)',
+      visibility: 'visible',
+    });
+  }, [triggerRect]);
+
+  return createPortal(
+    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip hover zone
+    <div
+      ref={tooltipRef}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      style={style}
+    >
+      <TimestampTooltipContent date={date} />
+    </div>,
+    document.body
+  );
+}
+
+export function TimestampTooltip({
+  date,
+  children,
+}: {
+  date: number | Date | string | null | undefined;
+  children: ReactNode;
+}): ReactNode {
+  const [open, setOpen] = useState(false);
+  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
+  const triggerRef = useRef<HTMLSpanElement>(null);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    };
+  }, []);
+
+  const ts =
+    date == null
+      ? null
+      : typeof date === 'number'
+        ? date
+        : new Date(date).getTime();
+
+  if (ts == null || Number.isNaN(ts)) return <>{children}</>;
+
+  const cancelClose = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+
+  const scheduleClose = () => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 120);
+  };
+
+  const handleOpen = () => {
+    cancelClose();
+    if (triggerRef.current) {
+      setTriggerRect(triggerRef.current.getBoundingClientRect());
+    }
+    setOpen(true);
+  };
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: tooltip trigger
+    <span
+      ref={triggerRef}
+      onMouseEnter={handleOpen}
+      onMouseLeave={scheduleClose}
+      style={{ display: 'inline-flex' }}
+    >
+      {children}
+      {open && triggerRect && (
+        <TooltipPortal
+          triggerRect={triggerRect}
+          onMouseEnter={cancelClose}
+          onMouseLeave={scheduleClose}
+          date={ts}
+        />
+      )}
+    </span>
+  );
+}

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

@@ -16,7 +16,7 @@ import {
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { toast } from 'sonner';
+import { useToast } from '../lib/toast';
 import { ErrorBoundary } from './error-boundary';
 import {
   EntityDetailPanel,
@@ -294,6 +294,7 @@ function TraceViewerWithContextMenu({
   isLoadingMoreSpans?: boolean;
   children: ReactNode;
 }): ReactNode {
+  const toast = useToast();
   const { state, dispatch } = useTraceViewer();
 
   // Drive active span widths at 60fps without React re-renders
@@ -614,8 +615,13 @@ function SelectionBridge({
   const { selected } = state;
   const onSelectionChangeRef = useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
+  const prevSpanIdRef = useRef<string | undefined>(undefined);
 
   useEffect(() => {
+    const currentSpanId = selected?.span.spanId;
+    if (currentSpanId === prevSpanIdRef.current) return;
+    prevSpanIdRef.current = currentSpanId;
+
     if (selected) {
       onSelectionChangeRef.current({
         data: selected.span.attributes?.data,
@@ -810,6 +816,7 @@ export const WorkflowTraceViewer = ({
   /** Whether the encryption key is currently being fetched */
   isDecrypting?: boolean;
 }) => {
+  const toast = useToast();
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
   );

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

@@ -129,9 +129,14 @@ export const stepEventsToStepEntity = (
   const createdEvent = events.find(
     (event) => event.eventType === 'step_created'
   );
-  if (!createdEvent) {
+
+  // V1 runs don't emit step_created events. Fall back to the earliest event
+  // in the group so we can still build a step span.
+  const anchorEvent = createdEvent ?? events[0];
+  if (!anchorEvent) {
     return null;
   }
+
   // Walk events in order to derive status, attempt count, and timestamps.
   // Handles both step_retrying and consecutive step_started as retry signals.
   let status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled' =
@@ -168,16 +173,16 @@ export const stepEventsToStepEntity = (
 
   const lastEvent = events[events.length - 1];
   return {
-    stepId: createdEvent.correlationId,
-    runId: createdEvent.runId,
-    stepName: createdEvent.eventData?.stepName ?? '',
+    stepId: anchorEvent.correlationId ?? '',
+    runId: anchorEvent.runId,
+    stepName: createdEvent?.eventData?.stepName ?? '',
     status,
     attempt,
-    createdAt: createdEvent.createdAt,
-    updatedAt: lastEvent?.createdAt ?? createdEvent.createdAt,
+    createdAt: anchorEvent.createdAt,
+    updatedAt: lastEvent?.createdAt ?? anchorEvent.createdAt,
     startedAt,
     completedAt,
-    specVersion: createdEvent.specVersion,
+    specVersion: anchorEvent.specVersion,
   };
 };
 

package/src/index.ts

@@ -49,6 +49,8 @@ export {
   STREAM_REF_TYPE,
   truncateId,
 } from './lib/hydration';
+export type { ToastAdapter } from './lib/toast';
+export { ToastProvider, useToast } from './lib/toast';
 export type { StreamStep } from './lib/utils';
 export {
   extractConversation,

package/src/lib/hydration.ts

@@ -10,6 +10,7 @@ import {
   extractClassName,
   hydrateResourceIO as hydrateResourceIOGeneric,
   isEncryptedData,
+  isExpiredStub,
   observabilityRevivers,
   type Revivers,
 } from '@workflow/core/serialization-format';
@@ -149,7 +150,7 @@ export function hydrateResourceIO<T>(resource: T): T {
     resource as any,
     getRevivers()
   ) as T;
-  return replaceEncryptedWithMarkers(hydrated);
+  return replaceEncryptedAndExpiredWithMarkers(hydrated);
 }
 
 // ---------------------------------------------------------------------------
@@ -191,27 +192,60 @@ export function isEncryptedMarker(value: unknown): boolean {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Expired data display markers
+// ---------------------------------------------------------------------------
+
+export const EXPIRED_DISPLAY_NAME = 'Expired Data';
+
+/**
+ * Create a display-friendly object for expired data.
+ *
+ * Uses the same named-constructor trick as the encrypted marker so that
+ * ObjectInspector renders the constructor name ("Expired Data") with no
+ * expandable children.
+ */
+function createExpiredMarker(): object {
+  // biome-ignore lint/complexity/useArrowFunction: arrow functions have no .prototype
+  const ctor = { [EXPIRED_DISPLAY_NAME]: function () {} }[
+    EXPIRED_DISPLAY_NAME
+  ]!;
+  return Object.create(ctor.prototype);
+}
+
+/** Check if a value is an expired data display marker */
+export function isExpiredMarker(value: unknown): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    value.constructor?.name === EXPIRED_DISPLAY_NAME
+  );
+}
+
+/** Replace a single field value with a display marker if it's encrypted or expired. */
+function toDisplayMarker(value: unknown): unknown {
+  if (isEncryptedData(value)) return createEncryptedMarker(value as Uint8Array);
+  if (isExpiredStub(value)) return createExpiredMarker();
+  return value;
+}
+
 /**
  * Post-process hydrated resource data: replace encrypted Uint8Array values
- * with display-friendly marker objects in known data fields.
+ * and expired stubs with display-friendly marker objects in known data fields.
  */
-function replaceEncryptedWithMarkers<T>(resource: T): T {
+function replaceEncryptedAndExpiredWithMarkers<T>(resource: T): T {
   if (!resource || typeof resource !== 'object') return resource;
   const r = resource as Record<string, unknown>;
   const result = { ...r };
 
   for (const key of ['input', 'output', 'metadata', 'error']) {
-    if (isEncryptedData(result[key])) {
-      result[key] = createEncryptedMarker(result[key] as Uint8Array);
-    }
+    result[key] = toDisplayMarker(result[key]);
   }
 
   if (result.eventData && typeof result.eventData === 'object') {
     const ed = { ...(result.eventData as Record<string, unknown>) };
     for (const key of EVENT_DATA_SERIALIZED_FIELDS) {
-      if (isEncryptedData(ed[key])) {
-        ed[key] = createEncryptedMarker(ed[key] as Uint8Array);
-      }
+      ed[key] = toDisplayMarker(ed[key]);
     }
     result.eventData = ed;
   }

package/src/lib/toast.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createContext, useContext } from 'react';
+import { toast as sonnerToast } from 'sonner';
+
+export interface ToastAdapter {
+  success: (message: string, opts?: { description?: string }) => void;
+  error: (message: string, opts?: { description?: string }) => void;
+  info: (message: string, opts?: { description?: string }) => void;
+}
+
+const defaultAdapter: ToastAdapter = {
+  success: (msg, opts) => sonnerToast.success(msg, opts),
+  error: (msg, opts) => sonnerToast.error(msg, opts),
+  info: (msg, opts) => sonnerToast.info(msg, opts),
+};
+
+const ToastContext = createContext<ToastAdapter>(defaultAdapter);
+
+/**
+ * Provide a custom toast implementation to web-shared components.
+ *
+ * When not provided, falls back to sonner (works in packages/web).
+ * Host apps like vercel-site can supply their own adapter
+ * (e.g. Geist useToasts) so toasts render in the host's toast system.
+ */
+export function ToastProvider({
+  toast,
+  children,
+}: {
+  toast: ToastAdapter;
+  children: ReactNode;
+}): ReactNode {
+  return (
+    <ToastContext.Provider value={toast}>{children}</ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastAdapter {
+  return useContext(ToastContext);
+}

package/src/lib/utils.ts

@@ -49,12 +49,16 @@ export function formatDuration(ms: number, compact = false): string {
     return `${durationFormatter.format(ms / MS_IN_SECOND)}s`;
   }
 
-  // Compact format: single unit
+  // Compact format: multi-unit without decimals (e.g. "8m 20s", "2h 30m")
   if (compact) {
     if (ms < MS_IN_HOUR) {
-      return `${durationFormatter.format(ms / MS_IN_MINUTE)}m`;
+      const m = Math.floor(ms / MS_IN_MINUTE);
+      const s = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+      return s > 0 ? `${m}m ${s}s` : `${m}m`;
     }
-    return `${durationFormatter.format(ms / MS_IN_HOUR)}h`;
+    const h = Math.floor(ms / MS_IN_HOUR);
+    const m = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
+    return m > 0 ? `${h}h ${m}m` : `${h}h`;
   }
 
   // Full format: human-readable multi-part