@workflow/web-shared 5.0.0-beta.3 → 5.0.0-beta.31

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

@@ -1,15 +1,20 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { useEffect, useState } from 'react';
+import {
+  ContextCardProvider,
+  ContextCardTrigger,
+  type ContextCardTriggerProps,
+  useHasContextCardProvider,
+} from './context-card';
 
 // ---------------------------------------------------------------------------
 // Time formatting helpers
 // ---------------------------------------------------------------------------
 
 interface TimeUnit {
-  unit: string;
+  unit: Intl.RelativeTimeFormatUnit;
   ms: number;
 }
 
@@ -38,25 +43,69 @@ function formatTimeDifference(diff: number): string {
   return result.join(', ');
 }
 
-function useTimeAgo(date: number): string {
+/**
+ * Detailed relative time string that auto-updates every second
+ * (e.g. "2 hours, 15 minutes, 30 seconds ago"). Used inside the hover card.
+ */
+export function useTimeAgo(date: number): string {
   const [timeAgo, setTimeAgo] = useState<string>('');
 
   useEffect(() => {
-    const update = (): void => {
+    const updateTimeAgo = (): void => {
       const diff = Date.now() - date;
-      const formatted = formatTimeDifference(diff);
-      setTimeAgo(formatted ? `${formatted} ago` : 'Just now');
+      const formattedDiff = formatTimeDifference(diff);
+      setTimeAgo(formattedDiff ? `${formattedDiff} ago` : 'Just now');
     };
-    update();
-    const timer = setInterval(update, 1000);
+
+    updateTimeAgo();
+    const timer = setInterval(updateTimeAgo, 1000);
     return () => clearInterval(timer);
   }, [date]);
 
   return timeAgo;
 }
 
+/**
+ * Short relative time string that auto-updates every minute
+ * (e.g. "3 days ago", "5 hours ago"). Returns an empty string if `date` is
+ * nullish.
+ */
+export function useShortTimeAgo(date: number | null | undefined): string {
+  const [shortTimeAgo, setShortTimeAgo] = useState<string>('');
+
+  useEffect(() => {
+    if (!date) {
+      setShortTimeAgo('');
+      return;
+    }
+
+    const updateShortTimeAgo = (): void => {
+      const diff = Date.now() - date;
+      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(diff / (1000 * 60 * 60));
+      const minutes = Math.floor(diff / (1000 * 60));
+
+      if (days > 0) {
+        setShortTimeAgo(`${days} day${days > 1 ? 's' : ''} ago`);
+      } else if (hours > 0) {
+        setShortTimeAgo(`${hours} hour${hours > 1 ? 's' : ''} ago`);
+      } else if (minutes > 0) {
+        setShortTimeAgo(`${minutes} minute${minutes > 1 ? 's' : ''} ago`);
+      } else {
+        setShortTimeAgo('Just now');
+      }
+    };
+
+    updateShortTimeAgo();
+    const timer = setInterval(updateShortTimeAgo, 60000);
+    return () => clearInterval(timer);
+  }, [date]);
+
+  return shortTimeAgo;
+}
+
 // ---------------------------------------------------------------------------
-// Timezone row
+// Hover card content
 // ---------------------------------------------------------------------------
 
 function ZoneDateTimeRow({
@@ -91,86 +140,34 @@ function ZoneDateTimeRow({
   });
 
   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 className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-1.5">
+        <div className="flex items-center justify-center h-4 px-1.5 bg-gray-200 rounded-xs">
+          <span className="text-[12px] font-mono text-gray-900">
+            {formattedZone}
+          </span>
         </div>
-        <span
-          style={{
-            fontSize: 13,
-            color: 'var(--ds-gray-1000)',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {formattedDate}
-        </span>
+        <span className="text-[13px] text-gray-1000">{formattedDate}</span>
       </div>
-      <span
-        style={{
-          fontSize: 11,
-          fontFamily: 'var(--font-mono, monospace)',
-          fontVariantNumeric: 'tabular-nums',
-          color: 'var(--ds-gray-900)',
-          whiteSpace: 'nowrap',
-        }}
-      >
+      <span className="tabular-nums text-[12px] font-mono text-gray-900">
         {formattedTime}
       </span>
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Tooltip card content
-// ---------------------------------------------------------------------------
-
-function TimestampTooltipContent({ date }: { date: number }): ReactNode {
+function RelativeTimeContextCardContent({ 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 }}>
+    <div className="flex flex-col gap-3 min-w-[300px]">
+      <div className="flex flex-col gap-3">
+        <span className="tabular-nums text-[13px] text-gray-900">
+          {timeAgo}
+        </span>
+      </div>
+      <div className="flex flex-col gap-2">
         <ZoneDateTimeRow date={date} zone="UTC" />
         <ZoneDateTimeRow date={date} zone={localTimezone} />
       </div>
@@ -178,102 +175,75 @@ function TimestampTooltipContent({ date }: { date: number }): ReactNode {
   );
 }
 
+function DefaultTimeText({
+  date,
+}: {
+  date: number | null | undefined;
+}): ReactNode {
+  const shortTimeAgo = useShortTimeAgo(date);
+  return <span className="text-label-14 text-gray-900">{shortTimeAgo}</span>;
+}
+
 // ---------------------------------------------------------------------------
-// Hover tooltip wrapper
+// RelativeTimeCard
 // ---------------------------------------------------------------------------
 
-const TOOLTIP_WIDTH = 330;
-const VIEWPORT_PAD = 8;
-
-function TooltipPortal({
-  triggerRect,
-  onMouseEnter,
-  onMouseLeave,
+type RelativeTimeCardProps = Omit<
+  ContextCardTriggerProps,
+  'content' | 'children'
+> & {
+  /** Timestamp in milliseconds to display as a relative time. */
+  date?: number | null;
+  /** Custom content to render instead of the default relative time text. */
+  children?: ReactNode;
+};
+
+/**
+ * Relative time label that reveals a context card with detailed UTC and local
+ * timestamps on hover. Renders a default short relative time label (e.g.
+ * "3 days ago") when `children` is omitted; renders just the children without
+ * the hover card when `date` is nullish.
+ */
+export function RelativeTimeCard({
   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',
-  });
+  children: _children,
+  ...props
+}: RelativeTimeCardProps): ReactNode {
+  const children =
+    _children === undefined ? <DefaultTimeText date={date} /> : _children;
 
-  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;
-      }
-    }
+  if (!date) return children;
 
-    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}
+  return (
+    <ContextCardTrigger
+      content={<RelativeTimeContextCardContent date={date} />}
+      {...props}
     >
-      <TimestampTooltipContent date={date} />
-    </div>,
-    document.body
+      {children}
+    </ContextCardTrigger>
   );
 }
 
+// ---------------------------------------------------------------------------
+// TimestampTooltip — convenience wrapper used across the observability UI
+// ---------------------------------------------------------------------------
+
+/**
+ * Wraps an already-formatted timestamp display with a relative-time hover
+ * card. Self-mounts a {@link ContextCardProvider} when one isn't already
+ * present so it works anywhere, but shares a provider (enabling the animated
+ * card morph between adjacent timestamps) when rendered inside one.
+ */
 export function TimestampTooltip({
   date,
   children,
+  side = 'top',
 }: {
   date: number | Date | string | null | undefined;
   children: ReactNode;
+  side?: ContextCardTriggerProps['side'];
 }): 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 hasProvider = useHasContextCardProvider();
 
   const ts =
     date == null
@@ -284,43 +254,11 @@ export function TimestampTooltip({
 
   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' }}
-    >
+  const card = (
+    <RelativeTimeCard date={ts} side={side} asChild>
       {children}
-      {open && triggerRect && (
-        <TooltipPortal
-          triggerRect={triggerRect}
-          onMouseEnter={cancelClose}
-          onMouseLeave={scheduleClose}
-          date={ts}
-        />
-      )}
-    </span>
+    </RelativeTimeCard>
   );
+
+  return hasProvider ? card : <ContextCardProvider>{card}</ContextCardProvider>;
 }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../../lib/cn';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    showArrow?: boolean;
+  }
+>(
+  (
+    { className, sideOffset = 8, showArrow = true, children, ...props },
+    ref
+  ) => (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-[99999] flex items-center gap-1 rounded-[10px] bg-gray-1000 px-2 py-1.5 !text-label-13 text-background-100 shadow-md select-none',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showArrow ? (
+          <TooltipPrimitive.Arrow
+            width={11}
+            height={5}
+            className="fill-gray-1000"
+          />
+        ) : null}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import type { Event, Hook, WorkflowRun } from '@workflow/world';
 import {
   ChevronDown,
   ChevronUp,
@@ -17,7 +17,11 @@ 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 {
+  buildTrace,
+  filterSpanRawEvents,
+  type TraceWithMeta,
+} from '../lib/trace-builder';
 import { ErrorBoundary } from './error-boundary';
 import {
   EntityDetailPanel,
@@ -25,6 +29,7 @@ import {
   type SpanSelectionInfo,
 } from './sidebar/entity-detail-panel';
 import { ResolveHookModal } from './sidebar/resolve-hook-modal';
+import type { FetchSpanDetail } from './sidebar/use-selected-span-detail';
 import {
   TraceViewerContextProvider,
   TraceViewerTimeline,
@@ -760,15 +765,12 @@ export const WorkflowTraceViewer = ({
   events,
   isLoading,
   error,
-  spanDetailData,
-  spanDetailLoading,
-  spanDetailError,
+  fetchSpanDetail,
   onWakeUpSleep,
   onResolveHook,
   onCancelRun,
   onStreamClick,
   onRunClick,
-  onSpanSelect,
   onLoadEventData,
   onLoadMoreSpans,
   hasMoreSpans = false,
@@ -776,14 +778,13 @@ export const WorkflowTraceViewer = ({
   encryptionKey,
   onDecrypt,
   isDecrypting = false,
+  showSeparateEventOccurrenceTimestamps = false,
 }: {
   run: WorkflowRun;
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
-  spanDetailData?: WorkflowRun | Step | Hook | Event | null;
-  spanDetailLoading?: boolean;
-  spanDetailError?: Error | null;
+  fetchSpanDetail: FetchSpanDetail;
   onWakeUpSleep?: (
     runId: string,
     correlationId: string
@@ -799,13 +800,8 @@ export const WorkflowTraceViewer = ({
   onStreamClick?: (streamId: string) => void;
   /** Callback when a run reference is clicked in the detail panel */
   onRunClick?: (runId: string) => void;
-  /** Callback when a span is selected. */
-  onSpanSelect?: (info: SpanSelectionInfo) => void;
   /** Callback to load event data for a specific event (lazy loading in sidebar) */
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => Promise<unknown | null>;
   /** Load next trace page when vertical scroll reaches bottom. */
   onLoadMoreSpans?: () => void | Promise<void>;
   /** Whether trace pagination has more data to load. */
@@ -818,6 +814,8 @@ export const WorkflowTraceViewer = ({
   onDecrypt?: () => void;
   /** Whether the encryption key is currently being fetched */
   isDecrypting?: boolean;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
 }) => {
   const toast = useToast();
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
@@ -852,22 +850,17 @@ export const WorkflowTraceViewer = ({
     }
   }, [error, isLoading]);
 
-  const handleSpanSelect = useCallback(
-    (info: SpanSelectionInfo) => {
-      onSpanSelect?.(info);
-    },
-    [onSpanSelect]
-  );
-
   const handleSelectionChange = useCallback(
     (info: SelectedSpanInfo | null) => {
       if (info) {
-        // Filter raw events by the selected span's correlationId (stepId/hookId)
-        // This bypasses the trace worker pipeline entirely.
-        const correlationId = info.spanId;
-        const rawEvents = correlationId
-          ? events.filter((e) => e.correlationId === correlationId)
-          : [];
+        // Filter raw events for the selected span: child spans match on
+        // correlationId (stepId/hookId), the run root span gets run-level
+        // events. This bypasses the trace worker pipeline entirely.
+        const rawEvents = filterSpanRawEvents(
+          events,
+          info.resource,
+          info.spanId
+        );
         setSelectedSpan({ ...info, rawEvents });
       } else {
         setSelectedSpan(null);
@@ -881,8 +874,10 @@ export const WorkflowTraceViewer = ({
     const correlationId = selectedSpan?.spanId;
     if (!correlationId) return;
 
-    const nextRawEvents = events.filter(
-      (e) => e.correlationId === correlationId
+    const nextRawEvents = filterSpanRawEvents(
+      events,
+      selectedSpan?.resource,
+      correlationId
     );
     setSelectedSpan((prev) => {
       if (!prev || prev.spanId !== correlationId) {
@@ -904,7 +899,7 @@ export const WorkflowTraceViewer = ({
         rawEvents: nextRawEvents,
       };
     });
-  }, [events, selectedSpan?.spanId]);
+  }, [events, selectedSpan?.spanId, selectedSpan?.resource]);
 
   // Reset selected span when navigating to a different run
   useEffect(() => {
@@ -974,7 +969,7 @@ export const WorkflowTraceViewer = ({
   }
 
   return (
-    <div className="relative w-full h-full flex flex-col">
+    <div className="relative w-full h-full flex flex-row">
       {/* Timeline (takes remaining space) */}
       <div className="flex-1 min-w-0 relative">
         <TraceViewerContextProvider
@@ -1150,10 +1145,7 @@ export const WorkflowTraceViewer = ({
                 run={run}
                 onStreamClick={onStreamClick}
                 onRunClick={onRunClick}
-                spanDetailData={spanDetailData ?? null}
-                spanDetailError={spanDetailError}
-                spanDetailLoading={spanDetailLoading}
-                onSpanSelect={handleSpanSelect}
+                fetchSpanDetail={fetchSpanDetail}
                 onWakeUpSleep={onWakeUpSleep}
                 onLoadEventData={onLoadEventData}
                 onResolveHook={onResolveHook}
@@ -1161,6 +1153,9 @@ export const WorkflowTraceViewer = ({
                 onDecrypt={onDecrypt}
                 isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
+                showSeparateEventOccurrenceTimestamps={
+                  showSeparateEventOccurrenceTimestamps
+                }
               />
             </ErrorBoundary>
           </div>

package/src/components/workflow-traces/event-colors.ts

@@ -2,7 +2,7 @@
  * Color utilities for workflow event markers
  */
 
-import type { Event } from '@workflow/world';
+import { type Event, isHookLifecycleEventType } from '@workflow/world';
 
 export interface EventColorPalette {
   /** Color of the diamond/marker itself */
@@ -22,6 +22,7 @@ export interface EventColorPalette {
  * - Red for failures (step_failed, run_failed)
  * - Orange/yellow for retries (step_retrying)
  * - Purple for webhook-related events
+ * - Teal for attribute changes (attr_set)
  * - Blue otherwise (default)
  */
 export function getEventColor(
@@ -50,11 +51,7 @@ export function getEventColor(
   }
 
   // Webhook-related - Purple
-  if (
-    eventType === 'hook_created' ||
-    eventType === 'hook_received' ||
-    eventType === 'hook_disposed'
-  ) {
+  if (isHookLifecycleEventType(eventType)) {
     return {
       color: 'var(--ds-purple-600)',
       background: 'var(--ds-purple-100)',
@@ -64,6 +61,17 @@ export function getEventColor(
     };
   }
 
+  // Attribute changes - Teal
+  if (eventType === 'attr_set') {
+    return {
+      color: 'var(--ds-teal-900)',
+      background: 'var(--ds-teal-200)',
+      border: 'var(--ds-teal-500)',
+      text: 'var(--ds-teal-900)',
+      secondary: 'var(--ds-gray-900)',
+    };
+  }
+
   // Default - Blue
   return {
     color: 'var(--ds-blue-600)',
@@ -81,11 +89,7 @@ export function getEventColor(
  */
 export function shouldShowVerticalLine(eventType: Event['eventType']): boolean {
   // Show vertical lines for hook-related events
-  if (
-    eventType === 'hook_created' ||
-    eventType === 'hook_received' ||
-    eventType === 'hook_disposed'
-  ) {
+  if (isHookLifecycleEventType(eventType)) {
     return true;
   }