@workflow/web-shared 4.1.0-beta.52 → 4.1.0-beta.53

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

@@ -1,8 +1,11 @@
 'use client';
 
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
 import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
-import { X } from 'lucide-react';
+import { Clock, Copy, Info, Send, Type, X, XCircle } from 'lucide-react';
+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 { ErrorBoundary } from './error-boundary';
 import {
@@ -10,6 +13,7 @@ import {
   type SelectedSpanInfo,
   type SpanSelectionInfo,
 } from './sidebar/entity-detail-panel';
+import { ResolveHookModal } from './sidebar/resolve-hook-modal';
 import {
   TraceViewerContextProvider,
   TraceViewerTimeline,
@@ -30,10 +34,535 @@ import {
 } from './workflow-traces/trace-span-construction';
 import { otelTimeToMs } from './workflow-traces/trace-time-utils';
 
-const RE_RENDER_INTERVAL_MS = 2000;
+/**
+ * While a run is live, continuously grow root.duration and rescale so the
+ * trace always fits within the viewport. Individual span widths are grown
+ * by each SpanComponent's own useEffect (see node.tsx).
+ */
+function useLiveTick(isLive: boolean): void {
+  const { state, dispatch } = useTraceViewer();
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  useEffect(() => {
+    if (!isLive) return;
+
+    // Grow root.duration on every frame so span rAFs see the latest time
+    let rafId = 0;
+    const tick = (): void => {
+      const { root } = stateRef.current;
+      if (root.startTime) {
+        const nowMs = Date.now();
+        if (nowMs > root.endTime) {
+          root.endTime = nowMs;
+          root.duration = root.endTime - root.startTime;
+        }
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+
+    // Re-scale smoothly so the trace fits the viewport as it grows.
+    // We dispatch detectBaseScale only when the computed baseScale has
+    // changed enough to matter visually (>0.1% shift), avoiding
+    // unnecessary React re-renders while keeping things smooth.
+    let scaleRafId = 0;
+    let lastBaseScale = 0;
+    const scaleTick = (): void => {
+      const s = stateRef.current;
+      if (s.root.duration > 0) {
+        const newBaseScale = (s.width - s.scrollbarWidth) / s.root.duration;
+        const delta = Math.abs(newBaseScale - lastBaseScale);
+        if (delta > lastBaseScale * 0.001 || lastBaseScale === 0) {
+          lastBaseScale = newBaseScale;
+          dispatch({ type: 'detectBaseScale' });
+        }
+      }
+      scaleRafId = requestAnimationFrame(scaleTick);
+    };
+    scaleRafId = requestAnimationFrame(scaleTick);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      cancelAnimationFrame(scaleRafId);
+    };
+  }, [isLive, dispatch]);
+}
+
 const DEFAULT_PANEL_WIDTH = 380;
 const MIN_PANEL_WIDTH = 240;
 
+// ──────────────────────────────────────────────────────────────────────────
+// Right-click context menu for spans
+// ──────────────────────────────────────────────────────────────────────────
+
+type ResourceType = 'sleep' | 'step' | 'hook' | 'run' | 'unknown';
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  spanId: string;
+  spanName: string;
+  resourceType: ResourceType;
+  /** Whether the span represents an active/pending resource (not yet completed) */
+  isActive: boolean;
+}
+
+interface ContextMenuItem {
+  label: string;
+  icon?: ReactNode;
+  action: () => void;
+  destructive?: boolean;
+  disabled?: boolean;
+}
+
+function SpanContextMenu({
+  menu,
+  items,
+  onClose,
+}: {
+  menu: ContextMenuState;
+  items: ContextMenuItem[];
+  onClose: () => void;
+}): ReactNode {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClick = (e: MouseEvent): void => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    const handleScroll = (): void => {
+      onClose();
+    };
+    // Use a timeout so we don't close immediately from the same event
+    const timeout = setTimeout(() => {
+      window.addEventListener('mousedown', handleClick);
+      window.addEventListener('keydown', handleKeyDown);
+      window.addEventListener('scroll', handleScroll, true);
+    }, 0);
+    return () => {
+      clearTimeout(timeout);
+      window.removeEventListener('mousedown', handleClick);
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('scroll', handleScroll, true);
+    };
+  }, [onClose]);
+
+  // Adjust position if menu would overflow viewport
+  const [adjustedPos, setAdjustedPos] = useState({ x: menu.x, y: menu.y });
+  useEffect(() => {
+    const el = menuRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    let { x, y } = menu;
+    if (rect.right > window.innerWidth) {
+      x = window.innerWidth - rect.width - 8;
+    }
+    if (rect.bottom > window.innerHeight) {
+      y = window.innerHeight - rect.height - 8;
+    }
+    if (x !== menu.x || y !== menu.y) {
+      setAdjustedPos({ x, y });
+    }
+  }, [menu]);
+
+  if (items.length === 0) return null;
+
+  return createPortal(
+    <div
+      ref={menuRef}
+      style={{
+        position: 'fixed',
+        left: adjustedPos.x,
+        top: adjustedPos.y,
+        zIndex: 99999,
+        boxShadow: 'var(--ds-shadow-menu)',
+        borderRadius: 12,
+        background: 'var(--ds-background-100)',
+        padding: 'var(--geist-space-gap-quarter, 4px)',
+        fontSize: 14,
+        minWidth: 180,
+        overflowX: 'hidden',
+        overflowY: 'auto',
+      }}
+    >
+      <div
+        style={{
+          display: 'block',
+          color: 'var(--ds-gray-900)',
+          fontSize: '0.75rem',
+          padding: 'var(--geist-gap-quarter, 4px) var(--geist-space-2x, 8px)',
+          fontWeight: 500,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          maxWidth: 240,
+          borderBottom: '1px solid var(--ds-gray-alpha-400)',
+          marginBottom: 4,
+        }}
+      >
+        {menu.spanName}
+      </div>
+      {items.map((item) => (
+        <button
+          key={item.label}
+          type="button"
+          style={{
+            outline: 'none',
+            cursor: item.disabled ? 'not-allowed' : 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '0 var(--geist-space-2x, 8px)',
+            height: 40,
+            textDecoration: 'none',
+            borderRadius: 6,
+            color: item.destructive
+              ? 'var(--ds-red-900)'
+              : 'var(--ds-gray-1000)',
+            width: '100%',
+            background: 'transparent',
+            border: 'none',
+            fontSize: 14,
+            textAlign: 'left',
+            opacity: item.disabled ? 0.4 : 1,
+            transition: 'background 0.15s',
+          }}
+          disabled={item.disabled}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.background =
+              'var(--ds-gray-alpha-100)';
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.background =
+              'transparent';
+          }}
+          onClick={() => {
+            item.action();
+            onClose();
+          }}
+        >
+          {item.icon ?? null}
+          {item.label}
+        </button>
+      ))}
+    </div>,
+    document.body
+  );
+}
+
+/** Inner wrapper that has access to the TraceViewer context */
+function TraceViewerWithContextMenu({
+  trace,
+  run,
+  hooks,
+  isLive,
+  onWakeUpSleep,
+  onCancelRun,
+  onResolveHook,
+  children,
+}: {
+  trace: { spans: Span[] };
+  run: WorkflowRun;
+  hooks: Hook[];
+  isLive: boolean;
+  onWakeUpSleep?: (
+    runId: string,
+    correlationId: string
+  ) => Promise<{ stoppedCount: number }>;
+  onCancelRun?: (runId: string) => Promise<void>;
+  onResolveHook?: (
+    hookToken: string,
+    payload: unknown,
+    hook?: Hook
+  ) => Promise<void>;
+  children: ReactNode;
+}): ReactNode {
+  const { dispatch } = useTraceViewer();
+
+  // 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 [resolvingHook, setResolvingHook] = useState(false);
+  // Track hooks resolved in this session so the context menu item hides immediately
+  const [resolvedHookIds, setResolvedHookIds] = useState<Set<string>>(
+    new Set()
+  );
+
+  // Build a lookup map: spanId -> span
+  const spanLookup = useMemo(() => {
+    const map = new Map<string, Span>();
+    for (const span of trace.spans) {
+      map.set(span.spanId, span);
+    }
+    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;
+      if (!resolveHookTarget.token) {
+        toast.error('Unable to resolve hook', {
+          description:
+            'Missing hook token. Try refreshing the run data and retry.',
+        });
+        return;
+      }
+      try {
+        setResolvingHook(true);
+        await onResolveHook(
+          resolveHookTarget.token,
+          payload,
+          resolveHookTarget
+        );
+        toast.success('Hook resolved', {
+          description: 'The payload has been sent and the hook resolved.',
+        });
+        // Mark this hook as resolved locally so the menu item hides immediately
+        setResolvedHookIds((prev) =>
+          new Set(prev).add(resolveHookTarget.hookId)
+        );
+        setResolveHookTarget(null);
+      } catch (err) {
+        console.error('Failed to resolve hook:', err);
+        toast.error('Failed to resolve hook', {
+          description:
+            err instanceof Error ? err.message : 'An unknown error occurred',
+        });
+      } finally {
+        setResolvingHook(false);
+      }
+    },
+    [onResolveHook, resolveHookTarget, resolvingHook]
+  );
+
+  const handleContextMenu = useCallback(
+    (e: ReactMouseEvent | MouseEvent): void => {
+      const target = e.target as HTMLElement;
+      const $button = target.closest<HTMLButtonElement>('[data-span-id]');
+      if (!$button) return;
+
+      const spanId = $button.dataset.spanId;
+      if (!spanId) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const span = spanLookup.get(spanId);
+      if (!span) return;
+
+      const resourceType =
+        (span.attributes.resource as ResourceType) ?? 'unknown';
+      const spanData = span.attributes.data as
+        | Record<string, unknown>
+        | undefined;
+      const isActive = !spanData?.completedAt && !spanData?.disposedAt;
+
+      setContextMenu({
+        x: e.clientX,
+        y: e.clientY,
+        spanId,
+        spanName: span.name,
+        resourceType,
+        isActive,
+      });
+    },
+    [spanLookup]
+  );
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const $container = containerRef.current;
+    if (!$container) return;
+
+    const onContextMenu = (event: MouseEvent): void => {
+      handleContextMenu(event);
+    };
+    $container.addEventListener('contextmenu', onContextMenu);
+
+    return () => {
+      $container.removeEventListener('contextmenu', onContextMenu);
+    };
+  }, [handleContextMenu]);
+
+  const closeMenu = useCallback(() => {
+    setContextMenu(null);
+  }, []);
+
+  const getMenuItems = useCallback(
+    (menu: ContextMenuState): ContextMenuItem[] => {
+      const items: ContextMenuItem[] = [];
+
+      // Sleep-specific: Wake Up (only on active runs)
+      const isRunActive = !run.completedAt;
+      if (
+        menu.resourceType === 'sleep' &&
+        menu.isActive &&
+        isRunActive &&
+        onWakeUpSleep
+      ) {
+        items.push({
+          label: 'Wake Up Sleep',
+          icon: <Clock className="h-3.5 w-3.5" />,
+          action: () => {
+            onWakeUpSleep(run.runId, menu.spanId)
+              .then((result) => {
+                if (result.stoppedCount > 0) {
+                  toast.success('Sleep woken up', {
+                    description: `Woke up ${String(result.stoppedCount)} sleep${result.stoppedCount > 1 ? 's' : ''}`,
+                  });
+                } else {
+                  toast.info('No active sleeps found', {
+                    description: 'The sleep may have already completed.',
+                  });
+                }
+              })
+              .catch((err: unknown) => {
+                toast.error('Failed to wake up sleep', {
+                  description:
+                    err instanceof Error
+                      ? err.message
+                      : 'An unknown error occurred',
+                });
+              });
+          },
+        });
+      }
+
+      // 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 }
+          | undefined;
+        const isDisposed =
+          Boolean(hookData?.disposedAt) ||
+          Boolean(span?.events?.some((e) => e.name === 'hook_disposed')) ||
+          resolvedHookIds.has(menu.spanId);
+        if (hook?.token && !isDisposed) {
+          items.push({
+            label: 'Resolve Hook',
+            icon: <Send className="h-3.5 w-3.5" />,
+            action: () => {
+              setResolveHookTarget(hook);
+            },
+          });
+        }
+      }
+
+      // Run-specific: Cancel (only on active runs)
+      if (menu.resourceType === 'run' && isRunActive && onCancelRun) {
+        items.push({
+          label: 'Cancel Run',
+          icon: <XCircle className="h-3.5 w-3.5" />,
+          destructive: true,
+          action: () => {
+            onCancelRun(run.runId).catch((err: unknown) => {
+              toast.error('Failed to cancel run', {
+                description:
+                  err instanceof Error
+                    ? err.message
+                    : 'An unknown error occurred',
+              });
+            });
+          },
+        });
+      }
+
+      // Common actions
+      items.push({
+        label: 'View Details',
+        icon: <Info className="h-3.5 w-3.5" />,
+        action: () => {
+          dispatch({ type: 'select', id: menu.spanId });
+        },
+      });
+
+      items.push({
+        label: 'Copy Name',
+        icon: <Type className="h-3.5 w-3.5" />,
+        action: () => {
+          navigator.clipboard
+            .writeText(menu.spanName)
+            .then(() => {
+              toast.success('Name copied to clipboard');
+            })
+            .catch(() => {
+              toast.error('Failed to copy name');
+            });
+        },
+      });
+
+      items.push({
+        label: 'Copy ID',
+        icon: <Copy className="h-3.5 w-3.5" />,
+        action: () => {
+          navigator.clipboard
+            .writeText(menu.spanId)
+            .then(() => {
+              toast.success('ID copied to clipboard');
+            })
+            .catch(() => {
+              toast.error('Failed to copy ID');
+            });
+        },
+      });
+
+      return items;
+    },
+    [
+      dispatch,
+      onWakeUpSleep,
+      onCancelRun,
+      onResolveHook,
+      hookLookup,
+      spanLookup,
+      resolvedHookIds,
+      run.runId,
+      run.completedAt,
+    ]
+  );
+
+  return (
+    <div className="relative w-full h-full" ref={containerRef}>
+      {children}
+      {contextMenu ? (
+        <SpanContextMenu
+          menu={contextMenu}
+          items={getMenuItems(contextMenu)}
+          onClose={closeMenu}
+        />
+      ) : null}
+      <ResolveHookModal
+        isOpen={resolveHookTarget !== null}
+        onClose={() => setResolveHookTarget(null)}
+        onSubmit={handleResolveHook}
+        isSubmitting={resolvingHook}
+      />
+    </div>
+  );
+}
+
 type GroupedEvents = {
   eventsByStepId: Map<string, Event[]>;
   eventsByHookId: Map<string, Event[]>;
@@ -121,9 +650,10 @@ const buildSpans = (
   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);
+    return stepToSpan(step, stepEvents, now, viewerEndTime);
   });
 
   const hookSpans = Array.from(groupedEvents.hookEvents.values())
@@ -290,6 +820,7 @@ export const WorkflowTraceViewer = ({
   spanDetailError,
   onWakeUpSleep,
   onResolveHook,
+  onCancelRun,
   onStreamClick,
   onSpanSelect,
   onLoadEventData,
@@ -312,6 +843,8 @@ export const WorkflowTraceViewer = ({
     payload: unknown,
     hook?: Hook
   ) => Promise<void>;
+  /** Callback to cancel the current run */
+  onCancelRun?: (runId: string) => Promise<void>;
   /** Callback when a stream reference is clicked in the detail panel */
   onStreamClick?: (streamId: string) => void;
   /** Callback when a span is selected. */
@@ -322,29 +855,23 @@ export const WorkflowTraceViewer = ({
     eventId: string
   ) => Promise<unknown | null>;
 }) => {
-  const [now, setNow] = useState(() => new Date());
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
   );
   const [panelWidth, setPanelWidth] = useState(DEFAULT_PANEL_WIDTH);
   const [deselectTrigger, setDeselectTrigger] = useState(0);
 
-  useEffect(() => {
-    if (!run?.completedAt) {
-      const interval = setInterval(() => {
-        setNow(new Date());
-      }, RE_RENDER_INTERVAL_MS);
-      return () => clearInterval(interval);
-    }
-    return undefined;
-  }, [run?.completedAt]);
+  const isLive = Boolean(run && !run.completedAt);
 
+  // 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) {
       return undefined;
     }
-    return buildTrace(run, steps, hooks, events, now);
-  }, [run, steps, hooks, events, now]);
+    return buildTrace(run, steps, hooks, 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]);
 
   useEffect(() => {
     if (error && !isLoading) {
@@ -379,6 +906,36 @@ export const WorkflowTraceViewer = ({
     [events]
   );
 
+  // Keep selected span raw events live as polling updates arrive.
+  useEffect(() => {
+    const correlationId = selectedSpan?.spanId;
+    if (!correlationId) return;
+
+    const nextRawEvents = events.filter(
+      (e) => e.correlationId === correlationId
+    );
+    setSelectedSpan((prev) => {
+      if (!prev || prev.spanId !== correlationId) {
+        return prev;
+      }
+
+      const prevRawEvents = prev.rawEvents ?? [];
+      const isSame =
+        prevRawEvents.length === nextRawEvents.length &&
+        prevRawEvents.every(
+          (event, index) => event.eventId === nextRawEvents[index]?.eventId
+        );
+      if (isSame) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        rawEvents: nextRawEvents,
+      };
+    });
+  }, [events, selectedSpan?.spanId]);
+
   const handleClose = useCallback(() => {
     setSelectedSpan(null);
     setDeselectTrigger((n) => n + 1);
@@ -388,13 +945,17 @@ export const WorkflowTraceViewer = ({
     setPanelWidth((w) => Math.max(MIN_PANEL_WIDTH, w + deltaX));
   }, []);
 
-  // Get the selected span name and duration for the panel header
+  // Get the selected span name for the panel header
   const selectedSpanName = useMemo(() => {
     if (!selectedSpan?.data) return undefined;
     const data = selectedSpan.data as Record<string, unknown>;
+    const stepName = data.stepName as string | undefined;
+    const workflowName = data.workflowName as string | undefined;
     return (
-      (data.stepName as string) ??
-      (data.workflowName as string) ??
+      (stepName ? parseStepName(stepName)?.shortName : undefined) ??
+      (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
+      stepName ??
+      workflowName ??
       (data.hookId as string) ??
       'Details'
     );
@@ -425,7 +986,22 @@ export const WorkflowTraceViewer = ({
         >
           <SelectionBridge onSelectionChange={handleSelectionChange} />
           <DeselectBridge triggerDeselect={deselectTrigger} />
-          <TraceViewerTimeline height="100%" trace={trace} />
+          <TraceViewerWithContextMenu
+            trace={trace}
+            run={run}
+            hooks={hooks}
+            isLive={isLive}
+            onWakeUpSleep={onWakeUpSleep}
+            onCancelRun={onCancelRun}
+            onResolveHook={onResolveHook}
+          >
+            <TraceViewerTimeline
+              eagerRender
+              height="100%"
+              isLive={isLive}
+              trace={trace}
+            />
+          </TraceViewerWithContextMenu>
         </TraceViewerContextProvider>
       </div>
 
@@ -445,17 +1021,39 @@ export const WorkflowTraceViewer = ({
             className="flex items-center justify-between px-3 py-2 border-b flex-shrink-0"
             style={{ borderColor: 'var(--ds-gray-200)' }}
           >
-            <span
-              className="text-sm font-medium truncate"
-              style={{ color: 'var(--ds-gray-1000)' }}
-            >
-              {selectedSpanName}
-            </span>
+            <div className="min-w-0 flex-1">
+              <div
+                className="text-sm font-medium truncate"
+                style={{ color: 'var(--ds-gray-1000)' }}
+                title={selectedSpanName}
+              >
+                {selectedSpanName}
+              </div>
+            </div>
             <button
               type="button"
               aria-label="Close panel"
               onClick={handleClose}
-              className="ml-2 p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 flex-shrink-0"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginLeft: 8,
+                padding: 4,
+                borderRadius: 6,
+                border: 'none',
+                background: 'transparent',
+                color: 'var(--ds-gray-900)',
+                cursor: 'pointer',
+                flexShrink: 0,
+                transition: 'background 0.15s',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = 'var(--ds-gray-alpha-200)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = 'transparent';
+              }}
             >
               <X size={16} />
             </button>
@@ -465,6 +1063,7 @@ export const WorkflowTraceViewer = ({
             <ErrorBoundary title="Failed to load entity details">
               <EntityDetailPanel
                 run={run}
+                hooks={hooks}
                 onStreamClick={onStreamClick}
                 spanDetailData={spanDetailData ?? null}
                 spanDetailError={spanDetailError}