@workflow/web-shared 4.1.0-beta.62 → 4.1.0-beta.63

package/src/components/sidebar/entity-detail-panel.tsx

@@ -2,9 +2,10 @@
 
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
 import clsx from 'clsx';
-import { Send, Zap } from 'lucide-react';
+import { Lock, Send, Unlock, Zap } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
+import { isEncryptedMarker } from '../../lib/hydration';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
@@ -53,7 +54,6 @@ export interface SelectedSpanInfo {
  */
 export function EntityDetailPanel({
   run,
-  hooks,
   onStreamClick,
   spanDetailData,
   spanDetailError,
@@ -63,11 +63,10 @@ export function EntityDetailPanel({
   onLoadEventData,
   onResolveHook,
   encryptionKey,
+  onDecrypt,
   selectedSpan,
 }: {
   run: WorkflowRun;
-  /** All hooks for the current run (used as fallback for token lookup). */
-  hooks?: Hook[];
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
   /** Pre-fetched span detail data for the selected span. */
@@ -96,6 +95,8 @@ export function EntityDetailPanel({
   ) => Promise<void>;
   /** Encryption key (available after Decrypt is clicked), used to re-load event data */
   encryptionKey?: Uint8Array;
+  /** Callback to initiate decryption of encrypted run data */
+  onDecrypt?: () => void;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
 }): React.JSX.Element | null {
@@ -129,10 +130,11 @@ export function EntityDetailPanel({
       return { resource: 'hook', resourceId: data.hookId, runId: undefined };
     }
     if (res === 'sleep') {
+      const waitData = data as { runId?: string } | undefined;
       return {
         resource: 'sleep',
         resourceId: selectedSpan.spanId,
-        runId: undefined,
+        runId: waitData?.runId,
       };
     }
     return { resource: undefined, resourceId: undefined, runId: undefined };
@@ -196,6 +198,17 @@ export function EntityDetailPanel({
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
 
+  const hasEncryptedFields = useMemo(() => {
+    if (!spanDetailData) return false;
+    const d = spanDetailData as Record<string, unknown>;
+    return (
+      isEncryptedMarker(d.input) ||
+      isEncryptedMarker(d.output) ||
+      isEncryptedMarker(d.error) ||
+      isEncryptedMarker(d.metadata)
+    );
+  }, [spanDetailData]);
+
   // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
     if (resource !== 'hook' || !resourceId) return undefined;
@@ -203,17 +216,12 @@ export function EntityDetailPanel({
     if (isHook(spanDetailData) && spanDetailData.token) {
       return spanDetailData.token;
     }
-    // 2. Try the hooks array (always has tokens)
-    const hookFromArray = hooks?.find((h) => h.hookId === resourceId);
-    if (hookFromArray?.token) {
-      return hookFromArray.token;
-    }
-    // 3. Try the span's inline data (partial hook from events - may lack token)
+    // 2. Try the span's inline data (reconstructed from hook_created event)
     if (isHook(data) && (data as Hook).token) {
       return (data as Hook).token;
     }
     return undefined;
-  }, [resource, resourceId, spanDetailData, data, hooks]);
+  }, [resource, resourceId, spanDetailData, data]);
 
   useEffect(() => {
     if (error && selectedSpan && resource) {
@@ -299,16 +307,15 @@ export function EntityDetailPanel({
     [onResolveHook, hookToken, resolvingHook, spanDetailData, data]
   );
 
-  if (!selectedSpan || !resource || !resourceId) {
-    return null;
-  }
+  // Prefer externally-fetched details when available. For sleep spans, the
+  // host fetches full correlated events (withData=true) and materializes a wait
+  // entity, so this includes resumeAt/completedAt without bloating trace payloads.
+  const displayData = (spanDetailData ?? data) as
+    | WorkflowRun
+    | Step
+    | Hook
+    | Event;
 
-  // For sleep spans, spanDetailData from the host is typically an events array
-  // (not a single entity), so always prefer the inline wait entity from span
-  // attributes which contains waitId, runId, createdAt, resumeAt, completedAt.
-  const displayData = (
-    resource === 'sleep' ? data : (spanDetailData ?? data)
-  ) as WorkflowRun | Step | Hook | Event;
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
     const displayStepName = displayRecord.stepName;
@@ -325,6 +332,10 @@ export function EntityDetailPanel({
     return undefined;
   }, [displayData, run.workflowName]);
 
+  if (!selectedSpan || !resource || !resourceId) {
+    return null;
+  }
+
   const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
   const hasPendingActions =
     (resource === 'sleep' && canWakeUp) ||
@@ -369,6 +380,33 @@ export function EntityDetailPanel({
               {resourceId}
             </p>
           </div>
+          {(hasEncryptedFields || encryptionKey) && onDecrypt && (
+            <button
+              type="button"
+              onClick={onDecrypt}
+              disabled={!!encryptionKey}
+              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors flex-shrink-0"
+              style={{
+                borderColor: encryptionKey
+                  ? 'var(--ds-green-400)'
+                  : 'var(--ds-gray-300)',
+                color: encryptionKey
+                  ? 'var(--ds-green-900)'
+                  : 'var(--ds-gray-900)',
+                backgroundColor: encryptionKey
+                  ? 'var(--ds-green-100)'
+                  : 'var(--ds-background-100)',
+                cursor: encryptionKey ? 'default' : 'pointer',
+              }}
+            >
+              {encryptionKey ? (
+                <Unlock className="h-3 w-3" />
+              ) : (
+                <Lock className="h-3 w-3" />
+              )}
+              {encryptionKey ? 'Decrypted' : 'Decrypt'}
+            </button>
+          )}
         </div>
       </div>
 

package/src/components/trace-viewer/trace-viewer.tsx

@@ -103,7 +103,16 @@ export function TraceViewerTimeline({
   highlightedSpans,
   eagerRender = false,
   isLive = false,
-}: Omit<TraceViewerProps, 'getQuickLinks'>): ReactNode {
+  footer,
+  knownDurationMs,
+  hasMoreData = false,
+}: Omit<TraceViewerProps, 'getQuickLinks'> & {
+  footer?: ReactNode;
+  /** Duration in ms from trace start to the latest known event. Used to render the unknown-time overlay. */
+  knownDurationMs?: number;
+  /** Whether more data pages are expected. Controls the unknown-data overlay visibility. */
+  hasMoreData?: boolean;
+}): ReactNode {
   const isSkeleton = trace === skeletonTrace;
   const { state, dispatch } = useTraceViewer();
   const { timelineRef, scrollSnapshotRef } = state;
@@ -450,7 +459,7 @@ export function TraceViewerTimeline({
             style={{
               position: 'relative',
               width: state.timelineWidth,
-              height: state.timelineHeight - TIMELINE_PADDING * 2,
+              minHeight: state.timelineHeight - TIMELINE_PADDING * 2,
               padding: TIMELINE_PADDING,
               paddingBottom: 0,
             }}
@@ -487,8 +496,44 @@ export function TraceViewerTimeline({
                 scrollSnapshotRef={scrollSnapshotRef}
                 spans={spans}
               />
+              {/* Horizontal "unknown time" overlay — covers the region to the
+                  right of the latest known event, indicating data beyond this
+                  point hasn't been loaded yet. */}
+              {knownDurationMs != null &&
+                knownDurationMs > 0 &&
+                (hasMoreData || isLive) &&
+                state.root.duration > 0 &&
+                (() => {
+                  const knownPx = knownDurationMs * scale;
+                  const totalPx = state.root.duration * scale;
+                  const unknownWidth = totalPx - knownPx;
+                  // Only show if the unknown region is meaningfully wide
+                  if (unknownWidth < 4) return null;
+                  // Offset ~5% into the unknown region so it doesn't touch spans
+                  const insetPx = Math.min(unknownWidth * 0.05, 20);
+                  return (
+                    <div
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: knownPx + insetPx,
+                        width: unknownWidth - insetPx,
+                        height: '100%',
+                        pointerEvents: 'none',
+                        zIndex: 1,
+                        maskImage:
+                          'linear-gradient(to right, transparent 1%, black 3%)',
+                        WebkitMaskImage:
+                          'linear-gradient(to right, transparent 1%, black 3%)',
+                        background:
+                          'repeating-linear-gradient(-45deg, var(--ds-background-200) 0, var(--ds-background-200) 11px, var(--ds-gray-200) 11px, var(--ds-gray-200) 12px)',
+                      }}
+                    />
+                  );
+                })()}
             </div>
           </div>
+          {footer}
         </div>
         <div className={styles.zoomButtonTraceViewer}>
           <ZoomButton />

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

@@ -35,14 +35,7 @@ import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
-import {
-  hookToSpan,
-  runToSpan,
-  stepToSpan,
-  WORKFLOW_LIBRARY,
-  waitToSpan,
-} from './workflow-traces/trace-span-construction';
-import { otelTimeToMs } from './workflow-traces/trace-time-utils';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the
@@ -273,7 +266,6 @@ function SpanContextMenu({
 function TraceViewerWithContextMenu({
   trace,
   run,
-  hooks,
   isLive,
   onWakeUpSleep,
   onCancelRun,
@@ -285,7 +277,6 @@ function TraceViewerWithContextMenu({
 }: {
   trace: { spans: Span[] };
   run: WorkflowRun;
-  hooks: Hook[];
   isLive: boolean;
   onWakeUpSleep?: (
     runId: string,
@@ -307,7 +298,10 @@ function TraceViewerWithContextMenu({
   // Drive active span widths at 60fps without React re-renders
   useLiveTick(isLive);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
-  const [resolveHookTarget, setResolveHookTarget] = useState<Hook | null>(null);
+  const [resolveHookTarget, setResolveHookTarget] = useState<{
+    hookId: string;
+    token: string;
+  } | null>(null);
   const [resolvingHook, setResolvingHook] = useState(false);
   // Track hooks resolved in this session so the context menu item hides immediately
   const [resolvedHookIds, setResolvedHookIds] = useState<Set<string>>(
@@ -323,15 +317,6 @@ function TraceViewerWithContextMenu({
     return map;
   }, [trace.spans]);
 
-  // Build a lookup map: hookId -> Hook
-  const hookLookup = useMemo(() => {
-    const map = new Map<string, Hook>();
-    for (const hook of hooks) {
-      map.set(hook.hookId, hook);
-    }
-    return map;
-  }, [hooks]);
-
   const handleResolveHook = useCallback(
     async (payload: unknown) => {
       if (resolvingHook || !resolveHookTarget || !onResolveHook) return;
@@ -344,11 +329,7 @@ function TraceViewerWithContextMenu({
       }
       try {
         setResolvingHook(true);
-        await onResolveHook(
-          resolveHookTarget.token,
-          payload,
-          resolveHookTarget
-        );
+        await onResolveHook(resolveHookTarget.token, payload);
         toast.success('Hook resolved', {
           description: 'The payload has been sent and the hook resolved.',
         });
@@ -496,22 +477,24 @@ function TraceViewerWithContextMenu({
 
       // Hook-specific: Resolve Hook (only on active, unresolved hooks)
       if (menu.resourceType === 'hook' && isRunActive && onResolveHook) {
-        const hook = hookLookup.get(menu.spanId);
         const span = spanLookup.get(menu.spanId);
-        // Check data-level disposedAt, span events, AND local resolved state
         const hookData = span?.attributes?.data as
-          | { disposedAt?: unknown }
+          | { token?: string; disposedAt?: unknown }
           | undefined;
+        // Check data-level disposedAt, span events, AND local resolved state
         const isDisposed =
           Boolean(hookData?.disposedAt) ||
           Boolean(span?.events?.some((e) => e.name === 'hook_disposed')) ||
           resolvedHookIds.has(menu.spanId);
-        if (hook?.token && !isDisposed) {
+        if (hookData?.token && !isDisposed) {
           items.push({
             label: 'Resolve Hook',
             icon: <Send className="h-3.5 w-3.5" />,
             action: () => {
-              setResolveHookTarget(hook);
+              setResolveHookTarget({
+                hookId: menu.spanId,
+                token: hookData.token!,
+              });
             },
           });
         }
@@ -582,7 +565,6 @@ function TraceViewerWithContextMenu({
       onWakeUpSleep,
       onCancelRun,
       onResolveHook,
-      hookLookup,
       spanLookup,
       resolvedHookIds,
       run.runId,
@@ -610,159 +592,6 @@ function TraceViewerWithContextMenu({
   );
 }
 
-type GroupedEvents = {
-  eventsByStepId: Map<string, Event[]>;
-  eventsByHookId: Map<string, Event[]>;
-  runLevelEvents: Event[];
-  timerEvents: Map<string, Event[]>;
-  hookEvents: Map<string, Event[]>;
-};
-
-const isTimerEvent = (eventType: string) =>
-  eventType === 'wait_created' || eventType === 'wait_completed';
-
-const isHookLifecycleEvent = (eventType: string) =>
-  eventType === 'hook_received' ||
-  eventType === 'hook_created' ||
-  eventType === 'hook_disposed';
-
-const pushEvent = (
-  map: Map<string, Event[]>,
-  correlationId: string,
-  event: Event
-) => {
-  const existing = map.get(correlationId);
-  if (existing) {
-    existing.push(event);
-    return;
-  }
-  map.set(correlationId, [event]);
-};
-
-const groupEventsByCorrelation = (
-  events: Event[],
-  steps: Step[],
-  hooks: Hook[]
-): GroupedEvents => {
-  const eventsByStepId = new Map<string, Event[]>();
-  const eventsByHookId = new Map<string, Event[]>();
-  const runLevelEvents: Event[] = [];
-  const timerEvents = new Map<string, Event[]>();
-  const hookEvents = new Map<string, Event[]>();
-  const stepIds = new Set(steps.map((step) => step.stepId));
-  const hookIds = new Set(hooks.map((hook) => hook.hookId));
-
-  for (const event of events) {
-    const correlationId = event.correlationId;
-    if (!correlationId) {
-      runLevelEvents.push(event);
-      continue;
-    }
-
-    if (isTimerEvent(event.eventType)) {
-      pushEvent(timerEvents, correlationId, event);
-      continue;
-    }
-
-    if (isHookLifecycleEvent(event.eventType)) {
-      pushEvent(hookEvents, correlationId, event);
-      continue;
-    }
-
-    if (stepIds.has(correlationId)) {
-      pushEvent(eventsByStepId, correlationId, event);
-      continue;
-    }
-
-    if (hookIds.has(correlationId)) {
-      pushEvent(eventsByHookId, correlationId, event);
-      continue;
-    }
-
-    runLevelEvents.push(event);
-  }
-
-  return {
-    eventsByStepId,
-    eventsByHookId,
-    runLevelEvents,
-    timerEvents,
-    hookEvents,
-  };
-};
-
-const buildSpans = (
-  run: WorkflowRun,
-  steps: Step[],
-  groupedEvents: GroupedEvents,
-  now: Date
-) => {
-  const viewerEndTime = new Date(run.completedAt || now);
-  const stepSpans = steps.map((step) => {
-    const stepEvents = groupedEvents.eventsByStepId.get(step.stepId) || [];
-    return stepToSpan(step, stepEvents, now, viewerEndTime);
-  });
-
-  const hookSpans = Array.from(groupedEvents.hookEvents.values())
-    .map((events) => hookToSpan(events, run, now))
-    .filter((span): span is Span => span !== null);
-
-  const waitSpans = Array.from(groupedEvents.timerEvents.values())
-    .map((events) => waitToSpan(events, run, now))
-    .filter((span): span is Span => span !== null);
-
-  return {
-    runSpan: runToSpan(run, groupedEvents.runLevelEvents, now),
-    spans: [...stepSpans, ...hookSpans, ...waitSpans],
-  };
-};
-
-const cascadeSpans = (runSpan: Span, spans: Span[]) => {
-  const sortedSpans = [
-    runSpan,
-    ...spans.slice().sort((a, b) => {
-      const aStart = otelTimeToMs(a.startTime);
-      const bStart = otelTimeToMs(b.startTime);
-      return aStart - bStart;
-    }),
-  ];
-
-  return sortedSpans.map((span, index) => {
-    const parentSpanId =
-      index === 0 ? undefined : String(sortedSpans[index - 1].spanId);
-    return {
-      ...span,
-      parentSpanId,
-    };
-  });
-};
-
-const buildTrace = (
-  run: WorkflowRun,
-  steps: Step[],
-  hooks: Hook[],
-  events: Event[],
-  now: Date
-) => {
-  const groupedEvents = groupEventsByCorrelation(events, steps, hooks);
-  const { runSpan, spans } = buildSpans(run, steps, groupedEvents, now);
-  const sortedCascadingSpans = cascadeSpans(runSpan, spans);
-
-  return {
-    traceId: run.runId,
-    rootSpanId: run.runId,
-    spans: sortedCascadingSpans,
-    resources: [
-      {
-        name: 'workflow',
-        attributes: {
-          'service.name': WORKFLOW_LIBRARY.name,
-        },
-      },
-    ],
-  };
-};
-
 /** Re-export SpanSelectionInfo for consumers */
 export type { SpanSelectionInfo };
 
@@ -870,14 +699,73 @@ function PanelResizeHandle({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Trace viewer footer — loading / waiting indicator
+// ---------------------------------------------------------------------------
+
+function TraceViewerFooter({
+  hasMore,
+  isLive,
+}: {
+  hasMore: boolean;
+  isLive: boolean;
+}): ReactNode {
+  const style = { color: 'var(--ds-gray-900)' };
+  if (hasMore) {
+    return (
+      <div
+        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>
+        Loading more events…
+      </div>
+    );
+  }
+  if (isLive) {
+    return (
+      <div
+        className="flex items-center justify-center py-3 text-xs"
+        style={style}
+      >
+        Waiting for more events…
+      </div>
+    );
+  }
+  return (
+    <div
+      className="flex items-center justify-center py-3 text-xs"
+      style={style}
+    >
+      End of run
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Main component
 // ---------------------------------------------------------------------------
 
 export const WorkflowTraceViewer = ({
   run,
-  steps,
-  hooks,
   events,
   isLoading,
   error,
@@ -894,10 +782,9 @@ export const WorkflowTraceViewer = ({
   hasMoreSpans = false,
   isLoadingMoreSpans = false,
   encryptionKey,
+  onDecrypt,
 }: {
   run: WorkflowRun;
-  steps: Step[];
-  hooks: Hook[];
   events: Event[];
   isLoading?: boolean;
   error?: Error | null;
@@ -932,6 +819,8 @@ export const WorkflowTraceViewer = ({
   isLoadingMoreSpans?: boolean;
   /** Encryption key (available after Decrypt), threaded to event list for re-loading */
   encryptionKey?: Uint8Array;
+  /** Callback to initiate decryption of encrypted run data */
+  onDecrypt?: () => void;
 }) => {
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
@@ -947,13 +836,14 @@ export const WorkflowTraceViewer = ({
 
   // Build trace only when actual data changes — no timer-driven rebuilds.
   // Active span widths are animated imperatively by useLiveTick at 60fps.
-  const trace = useMemo(() => {
-    if (!run) {
+  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+    if (!run?.runId) {
       return undefined;
     }
-    return buildTrace(run, steps, hooks, events, new Date());
+    return buildTrace(run, events, new Date());
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
-  }, [run, steps, hooks, events]);
+  }, [run, events]);
+  const trace = traceWithMeta;
 
   useEffect(() => {
     if (error && !isLoading) {
@@ -1064,7 +954,7 @@ export const WorkflowTraceViewer = ({
     );
   }, [selectedSpan?.data]);
 
-  if (isLoading || !trace) {
+  if (!trace) {
     return (
       <div className="relative w-full h-full">
         <div className="border-b border-gray-alpha-400 w-full" />
@@ -1093,7 +983,6 @@ export const WorkflowTraceViewer = ({
           <TraceViewerWithContextMenu
             trace={trace}
             run={run}
-            hooks={hooks}
             isLive={isLive}
             onWakeUpSleep={onWakeUpSleep}
             onCancelRun={onCancelRun}
@@ -1107,6 +996,11 @@ export const WorkflowTraceViewer = ({
               height="100%"
               isLive={isLive}
               trace={trace}
+              knownDurationMs={traceWithMeta?.knownDurationMs}
+              hasMoreData={hasMoreSpans}
+              footer={
+                <TraceViewerFooter hasMore={hasMoreSpans} isLive={isLive} />
+              }
             />
           </TraceViewerWithContextMenu>
         </TraceViewerContextProvider>
@@ -1246,7 +1140,6 @@ export const WorkflowTraceViewer = ({
             <ErrorBoundary title="Failed to load entity details">
               <EntityDetailPanel
                 run={run}
-                hooks={hooks}
                 onStreamClick={onStreamClick}
                 spanDetailData={spanDetailData ?? null}
                 spanDetailError={spanDetailError}
@@ -1256,6 +1149,7 @@ export const WorkflowTraceViewer = ({
                 onLoadEventData={onLoadEventData}
                 onResolveHook={onResolveHook}
                 encryptionKey={encryptionKey}
+                onDecrypt={onDecrypt}
                 selectedSpan={selectedSpan}
               />
             </ErrorBoundary>