[web-shared]: timestamp tooltips, toast adapter, loading skeletons, and encrypted data detection

.changeset/spotty-lemons-brush.md

@@ -0,0 +1,7 @@
+---
+"@workflow/web-shared": patch
+"@workflow/web": patch
+---
+
+web-shared: Timestamp tooltips, toast adapter, improved skeletons, and encrypted data detection for lazy-loaded events
+web: Add toast for decryption

packages/web-shared/src/components/event-list-view.tsx

@@ -17,6 +17,7 @@ import {
 import { LoadMoreButton } from './ui/load-more-button';
 import { MenuDropdown } from './ui/menu-dropdown';
 import { Skeleton } from './ui/skeleton';
+import { TimestampTooltip } from './ui/timestamp-tooltip';
 
 /**
  * Event types whose eventData contains an error field with a StructuredError.
@@ -211,6 +212,15 @@ function buildDurationMap(events: Event[]): Map<string, DurationInfo> {
   return durations;
 }
 
+/** Check if a loaded eventData object contains any encrypted marker values. */
+function hasEncryptedValues(data: unknown): boolean {
+  if (!data || typeof data !== 'object') return false;
+  for (const val of Object.values(data as Record<string, unknown>)) {
+    if (isEncryptedMarker(val)) return true;
+  }
+  return false;
+}
+
 function isRunLevel(eventType: string): boolean {
   return (
     eventType === 'run_created' ||
@@ -602,21 +612,67 @@ const SORT_OPTIONS = [
 function RowsSkeleton() {
   return (
     <div className="flex-1 overflow-hidden">
-      {Array.from({ length: 8 }, (_, i) => (
-        <div
-          key={i}
-          className="flex items-center gap-3 px-4"
-          style={{ height: 40 }}
-        >
-          <Skeleton
-            className="h-2 w-2 flex-shrink-0"
-            style={{ borderRadius: '50%' }}
-          />
-          <Skeleton className="h-3" style={{ width: 90 }} />
-          <Skeleton className="h-3" style={{ width: 100 }} />
-          <Skeleton className="h-3" style={{ width: 80 }} />
-          <Skeleton className="h-3 flex-1" />
-          <Skeleton className="h-3 flex-1" />
+      {Array.from({ length: 16 }, (_, i) => (
+        <div key={i} className="flex items-center gap-0" style={{ height: 40 }}>
+          {/* Gutter area */}
+          <div
+            className="relative flex-shrink-0 self-stretch flex items-center"
+            style={{ width: GUTTER_WIDTH }}
+          >
+            {/* Vertical line skeleton */}
+            <div
+              style={{
+                position: 'absolute',
+                left: 8,
+                top: i === 0 ? '50%' : 0,
+                bottom: 0,
+                width: 2,
+              }}
+            >
+              <Skeleton className="w-full h-full" style={{ borderRadius: 1 }} />
+            </div>
+            {/* Dot skeleton */}
+            <Skeleton
+              className="flex-shrink-0"
+              style={{
+                width: i % 4 === 0 ? 8 : 6,
+                height: i % 4 === 0 ? 8 : 6,
+                borderRadius: '50%',
+                marginLeft: i % 4 === 0 ? 5 : 6,
+              }}
+            />
+          </div>
+          {/* Chevron placeholder */}
+          <div className="w-5 flex-shrink-0 flex items-center justify-center">
+            <Skeleton className="w-5 h-5" style={{ borderRadius: 4 }} />
+          </div>
+          {/* Time */}
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '70%' }} />
+          </div>
+          {/* Event Type */}
+          <div
+            className="min-w-0 px-4 flex items-center gap-1.5"
+            style={{ flex: '2 1 0%' }}
+          >
+            <Skeleton
+              className="flex-shrink-0"
+              style={{ width: 6, height: 6, borderRadius: '50%' }}
+            />
+            <Skeleton className="h-3" style={{ width: '60%' }} />
+          </div>
+          {/* Name */}
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '50%' }} />
+          </div>
+          {/* Correlation ID */}
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '75%' }} />
+          </div>
+          {/* Event ID */}
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: '75%' }} />
+          </div>
         </div>
       ))}
     </div>
@@ -668,6 +724,7 @@ function EventRow({
   cachedEventData,
   onCacheEventData,
   encryptionKey,
+  onEncryptedDataDetected,
 }: {
   event: Event;
   index: number;
@@ -687,6 +744,7 @@ function EventRow({
   cachedEventData: unknown | null;
   onCacheEventData: (eventId: string, data: unknown) => void;
   encryptionKey?: Uint8Array;
+  onEncryptedDataDetected?: () => void;
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [loadedEventData, setLoadedEventData] = useState<unknown | null>(
@@ -697,6 +755,18 @@ function EventRow({
     cachedEventData !== null
   );
 
+  // Notify parent if cached data has encrypted markers on mount
+  useEffect(() => {
+    if (
+      cachedEventData !== null &&
+      !encryptionKey &&
+      hasEncryptedValues(cachedEventData)
+    ) {
+      onEncryptedDataDetected?.();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const rowGroupKey = isRunLevel(event.eventType)
     ? '__run__'
     : (event.correlationId ?? undefined);
@@ -745,6 +815,9 @@ function EventRow({
       if (data !== null && data !== undefined) {
         setLoadedEventData(data);
         onCacheEventData(event.eventId, data);
+        if (!encryptionKey && hasEncryptedValues(data)) {
+          onEncryptedDataDetected?.();
+        }
       }
     } catch (err) {
       setLoadError(
@@ -760,6 +833,8 @@ function EventRow({
     hasExistingEventData,
     onLoadEventData,
     onCacheEventData,
+    encryptionKey,
+    onEncryptedDataDetected,
   ]);
 
   // Auto-load event data when remounting in expanded state without cached data
@@ -877,7 +952,9 @@ function EventRow({
             className="tabular-nums min-w-0 px-4"
             style={{ color: 'var(--ds-gray-900)', flex: '2 1 0%' }}
           >
-            {formatEventTime(createdAt)}
+            <TimestampTooltip date={createdAt}>
+              <span>{formatEventTime(createdAt)}</span>
+            </TimestampTooltip>
           </div>
 
           {/* Event Type */}
@@ -1079,22 +1156,26 @@ export function EventListView({
     );
   }, [events, effectiveSortOrder]);
 
-  // Detect encrypted fields across all loaded events.
-  // Only checks top-level eventData values (input, output, result, etc.) —
-  // the current data model guarantees encrypted markers appear at this level.
-  const hasEncryptedData = useMemo(() => {
+  // Detect encrypted fields across all loaded events (inline eventData).
+  const hasEncryptedInlineData = useMemo(() => {
     if (!events) return false;
     for (const event of events) {
       const ed = (event as Record<string, unknown>).eventData;
-      if (!ed || typeof ed !== 'object') continue;
-      const data = ed as Record<string, unknown>;
-      for (const val of Object.values(data)) {
-        if (isEncryptedMarker(val)) return true;
-      }
+      if (hasEncryptedValues(ed)) return true;
     }
     return false;
   }, [events]);
 
+  // Tracks whether any expanded row's lazy-loaded data contained encrypted markers.
+  // Set to true by EventRow via onEncryptedDataDetected; never reset (sticky).
+  const [foundEncryptedInLazyData, setFoundEncryptedInLazyData] =
+    useState(false);
+  const handleEncryptedDataDetected = useCallback(() => {
+    setFoundEncryptedInLazyData(true);
+  }, []);
+
+  const hasEncryptedData = hasEncryptedInlineData || foundEncryptedInLazyData;
+
   const { correlationNameMap, workflowName } = useMemo(
     () => buildNameMaps(events ?? null, run ?? null),
     [events, run]
@@ -1268,18 +1349,26 @@ export function EventListView({
         </div>
         {/* Skeleton header */}
         <div
-          className="flex items-center gap-0 h-10 border-b flex-shrink-0 px-4"
+          className="flex items-center gap-0 h-10 border-b flex-shrink-0"
           style={{ borderColor: 'var(--ds-gray-alpha-200)' }}
         >
-          <Skeleton className="h-3" style={{ width: 60 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 80 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 50 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 90 }} />
-          <div style={{ flex: 1 }} />
-          <Skeleton className="h-3" style={{ width: 70 }} />
+          <div className="flex-shrink-0" style={{ width: GUTTER_WIDTH }} />
+          <div className="w-5 flex-shrink-0" />
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 40 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 72 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '2 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 44 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 92 }} />
+          </div>
+          <div className="min-w-0 px-4" style={{ flex: '3 1 0%' }}>
+            <Skeleton className="h-3" style={{ width: 60 }} />
+          </div>
         </div>
         <RowsSkeleton />
       </div>
@@ -1455,6 +1544,7 @@ export function EventListView({
                 }
                 onCacheEventData={cacheEventData}
                 encryptionKey={encryptionKey}
+                onEncryptedDataDetected={handleEncryptedDataDetected}
               />
             );
           }}

packages/web-shared/src/components/hook-actions.tsx

@@ -3,7 +3,7 @@
 import type { Hook, WorkflowRunStatus } from '@workflow/world';
 import { Send } from 'lucide-react';
 import { useCallback, useState } from 'react';
-import { toast } from 'sonner';
+import { useToast } from '../lib/toast';
 import { ResolveHookModal } from './sidebar/resolve-hook-modal';
 
 // ============================================================================
@@ -45,6 +45,7 @@ export function useHookActions({
   onResolve,
   callbacks,
 }: UseHookActionsOptions): UseHookActionsReturn {
+  const toast = useToast();
   const [isResolving, setIsResolving] = useState(false);
   const [selectedHook, setSelectedHook] = useState<Hook | null>(null);
 

packages/web-shared/src/components/sidebar/attribute-panel.tsx

@@ -6,10 +6,11 @@ import type { ModelMessage } from 'ai';
 import { Lock } from 'lucide-react';
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
 import { extractConversation, isDoStreamStep } from '../../lib/utils';
 import { StreamClickContext } from '../ui/data-inspector';
+import { TimestampTooltip } from '../ui/timestamp-tooltip';
 import { ErrorCard } from '../ui/error-card';
 import {
   ErrorStackBlock,
@@ -336,6 +337,16 @@ const localMillisecondTimeOrNull = (value: unknown): string | null => {
   return formatLocalMillisecondTime(date);
 };
 
+const timestampWithTooltipOrNull = (value: unknown): ReactNode | null => {
+  const date = parseDateValue(value);
+  if (!date) return null;
+  return (
+    <TimestampTooltip date={date}>
+      <span>{formatLocalMillisecondTime(date)}</span>
+    </TimestampTooltip>
+  );
+};
+
 interface DisplayContext {
   stepName?: string;
 }
@@ -375,15 +386,14 @@ const attributeToDisplayFn: Record<
   projectId: (_value: unknown) => null,
   environment: (_value: unknown) => null,
   executionContext: (_value: unknown) => null,
-  // Dates
-  // TODO: relative time with tooltips for ISO times
-  createdAt: localMillisecondTimeOrNull,
-  startedAt: localMillisecondTimeOrNull,
-  updatedAt: localMillisecondTimeOrNull,
-  completedAt: localMillisecondTimeOrNull,
-  expiredAt: localMillisecondTimeOrNull,
-  retryAfter: localMillisecondTimeOrNull,
-  resumeAt: localMillisecondTimeOrNull,
+  // Dates — wrapped with TimestampTooltip showing UTC/local + relative time
+  createdAt: timestampWithTooltipOrNull,
+  startedAt: timestampWithTooltipOrNull,
+  updatedAt: timestampWithTooltipOrNull,
+  completedAt: timestampWithTooltipOrNull,
+  expiredAt: timestampWithTooltipOrNull,
+  retryAfter: timestampWithTooltipOrNull,
+  resumeAt: timestampWithTooltipOrNull,
   // Resolved attributes, won't actually use this function
   metadata: (value: unknown) => {
     if (!hasDisplayContent(value)) return null;
@@ -683,6 +693,7 @@ export const AttributePanel = ({
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
 }) => {
+  const toast = useToast();
   // Extract workflowCoreVersion from executionContext for display
   const displayData = useMemo(() => {
     const result = { ...data };

packages/web-shared/src/components/sidebar/copyable-data-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Copy } from 'lucide-react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 import { DataInspector } from '../ui/data-inspector';
 
 const serializeForClipboard = (value: unknown): string => {
@@ -21,6 +21,7 @@ const serializeForClipboard = (value: unknown): string => {
 };
 
 export function CopyableDataBlock({ data }: { data: unknown }) {
+  const toast = useToast();
   return (
     <div
       className="relative overflow-x-auto rounded-md border p-3 pt-9"

packages/web-shared/src/components/sidebar/entity-detail-panel.tsx

@@ -4,7 +4,7 @@ import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { toast } from 'sonner';
+import { useToast } from '../../lib/toast';
 import { isEncryptedMarker } from '../../lib/hydration';
 import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
@@ -104,6 +104,7 @@ export function EntityDetailPanel({
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
 }): React.JSX.Element | null {
+  const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
   const [showResolveHookModal, setShowResolveHookModal] = useState(false);
   const [resolvingHook, setResolvingHook] = useState(false);

packages/web-shared/src/components/sidebar/events-list.tsx

@@ -23,10 +23,14 @@ const DATA_EVENT_TYPES = new Set([
   'step_created',
   'step_completed',
   'step_failed',
+  'step_retrying',
   'hook_created',
   'hook_received',
   'run_created',
   'run_completed',
+  'run_failed',
+  'wait_created',
+  'wait_completed',
 ]);
 
 /**