@workflow/web-shared 4.1.0-beta.64 → 4.1.0-beta.66

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { AlertCircle, Copy } from 'lucide-react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 
 /**
  * Check whether `value` looks like a structured error object with a `stack`
@@ -28,6 +28,7 @@ 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;
   const copyText = message ? `${message}\n\n${stack}` : stack;

package/src/components/ui/load-more-button.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Spinner } from './spinner';
+
+const STYLES = `.wf-load-more{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-load-more:hover{background:var(--ds-gray-alpha-200)}.wf-load-more:disabled{opacity:.6;cursor:default}.wf-load-more:disabled:hover{background:var(--ds-background-100)}`;
+
+interface LoadMoreButtonProps {
+  loading?: boolean;
+  onClick?: () => void;
+  label?: string;
+  loadingLabel?: string;
+}
+
+/**
+ * A "Load more" button matching Geist's Button type="secondary" size="small"
+ * with a spinner prefix when loading.
+ */
+export function LoadMoreButton({
+  loading = false,
+  onClick,
+  label = 'Load more',
+  loadingLabel = 'Loading...',
+}: LoadMoreButtonProps) {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={loading}
+        className="wf-load-more"
+      >
+        {loading && <Spinner size={14} />}
+        {loading ? loadingLabel : label}
+      </button>
+    </>
+  );
+}

package/src/components/ui/menu-dropdown.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useRef, useState } from 'react';
 
+const STYLES = `.wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
+
 export interface MenuDropdownOption<T extends string = string> {
   value: T;
   label: string;
@@ -40,12 +42,7 @@ export function MenuDropdown<T extends string = string>({
 
   return (
     <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
-      <style>{`
-        .wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}
-        .wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}
-        .wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}
-        .wf-menu-item:hover{background:var(--ds-gray-alpha-100)}
-      `}</style>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
 
       <button
         type="button"

package/src/components/ui/spinner.tsx

@@ -0,0 +1,76 @@
+const KEYFRAMES = `@keyframes wf-spinner-fade{0%{opacity:1}100%{opacity:.15}}`;
+
+/**
+ * Spinner matching Geist's multi-line fade spinner.
+ * At size ≤12: 8 lines, ≤16: 10 lines, else: 12 lines.
+ */
+export function Spinner({
+  size = 14,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) {
+  const config =
+    size <= 12
+      ? {
+          count: 8,
+          angle: 45,
+          delays: [-875, -750, -625, -500, -375, -250, -125, 0],
+          duration: 1000,
+          lineW: 3,
+          lineH: 1.5,
+        }
+      : size <= 16
+        ? {
+            count: 10,
+            angle: 36,
+            delays: [-900, -800, -700, -600, -500, -400, -300, -200, -100, 0],
+            duration: 1000,
+            lineW: 4,
+            lineH: 1.5,
+          }
+        : {
+            count: 12,
+            angle: 30,
+            delays: [
+              -1100, -1000, -900, -800, -700, -600, -500, -400, -300, -200,
+              -100, 0,
+            ],
+            duration: 1200,
+            lineW: size * 0.24,
+            lineH: size * 0.08,
+          };
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        position: 'relative',
+        width: size,
+        height: size,
+      }}
+    >
+      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
+      {config.delays.map((delay, i) => (
+        <span
+          key={delay}
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: config.lineW,
+            height: config.lineH,
+            marginLeft: -config.lineW / 2,
+            marginTop: -config.lineH / 2,
+            borderRadius: 1,
+            backgroundColor: color ?? 'var(--ds-gray-700)',
+            transform: `rotate(${i * config.angle}deg) translate(${size * 0.36}px)`,
+            animation: `wf-spinner-fade ${config.duration}ms linear infinite`,
+            animationDelay: `${delay}ms`,
+          }}
+        />
+      ))}
+    </span>
+  );
+}

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,
@@ -31,6 +31,7 @@ import {
 } from './trace-viewer';
 import type { Span } from './trace-viewer/types';
 import { Skeleton } from './ui/skeleton';
+import { Spinner } from './ui/spinner';
 import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
@@ -293,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
@@ -613,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,
@@ -719,25 +726,7 @@ function TraceViewerFooter({
         className="flex items-center justify-center gap-2 py-3 text-xs"
         style={style}
       >
-        <svg
-          className="h-3.5 w-3.5 animate-spin"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          />
-        </svg>
+        <Spinner size={14} />
         Loading more events…
       </div>
     );
@@ -785,6 +774,7 @@ export const WorkflowTraceViewer = ({
   isLoadingMoreSpans = false,
   encryptionKey,
   onDecrypt,
+  isDecrypting = false,
 }: {
   run: WorkflowRun;
   events: Event[];
@@ -823,7 +813,10 @@ export const WorkflowTraceViewer = ({
   encryptionKey?: Uint8Array;
   /** Callback to initiate decryption of encrypted run data */
   onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched */
+  isDecrypting?: boolean;
 }) => {
+  const toast = useToast();
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
   );
@@ -1156,6 +1149,7 @@ export const WorkflowTraceViewer = ({
                 onResolveHook={onResolveHook}
                 encryptionKey={encryptionKey}
                 onDecrypt={onDecrypt}
+                isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
               />
             </ErrorBoundary>

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/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);
+}