@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.40

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

@@ -1,24 +1,27 @@
 'use client';
 
-import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
+import {
+  type Event,
+  type Hook,
+  isTerminalWorkflowRunStatus,
+  type WorkflowRun,
+} from '@workflow/world';
 import clsx from 'clsx';
 import { Send, Zap } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useToast } from '../../lib/toast';
 import { DecryptClickContext } from '../ui/data-inspector';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
+import { useSidebarDataOptional } from './sidebar-data-context';
+import {
+  type FetchSpanDetail,
+  useSelectedSpanDetail,
+} from './use-selected-span-detail';
 
-// Type guards for runtime validation of span attribute data
-function isStep(data: unknown): data is Step {
-  return data !== null && typeof data === 'object' && 'stepId' in data;
-}
-
-function isWorkflowRun(data: unknown): data is WorkflowRun {
-  return data !== null && typeof data === 'object' && 'runId' in data;
-}
-
+// Type guard for runtime validation of span attribute data
 function isHook(data: unknown): data is Hook {
   return data !== null && typeof data === 'object' && 'hookId' in data;
 }
@@ -56,10 +59,7 @@ export function EntityDetailPanel({
   run,
   onStreamClick,
   onRunClick,
-  spanDetailData,
-  spanDetailError,
-  spanDetailLoading,
-  onSpanSelect,
+  fetchSpanDetail,
   onWakeUpSleep,
   onLoadEventData,
   onResolveHook,
@@ -67,30 +67,22 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
+  showSeparateEventOccurrenceTimestamps = false,
+  getModuleSourceUrl,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
   onStreamClick?: (streamId: string) => void;
   /** Callback when a run reference is clicked */
   onRunClick?: (runId: string) => void;
-  /** Pre-fetched span detail data for the selected span. */
-  spanDetailData: WorkflowRun | Step | Hook | Event | null;
-  /** Error from external span detail fetch. */
-  spanDetailError?: Error | null;
-  /** Loading state from external span detail fetch. */
-  spanDetailLoading?: boolean;
-  /** Callback when a span is selected. Use this to fetch data externally and pass via spanDetailData. */
-  onSpanSelect: (info: SpanSelectionInfo) => void;
+  fetchSpanDetail: FetchSpanDetail;
   /** Callback to wake up a pending sleep call. */
   onWakeUpSleep?: (
     runId: string,
     correlationId: string
   ) => Promise<{ stoppedCount: number }>;
   /** Callback to load event data for a specific event (lazy loading) */
-  onLoadEventData?: (
-    correlationId: string,
-    eventId: string
-  ) => Promise<unknown | null>;
+  onLoadEventData?: (event: Event) => Promise<unknown | null>;
   /** Callback to resolve a hook with a payload. */
   onResolveHook?: (
     hookToken: string,
@@ -105,6 +97,12 @@ export function EntityDetailPanel({
   isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
+  /** Show occurredAt separately instead of folding it into the Created timestamp. */
+  showSeparateEventOccurrenceTimestamps?: boolean;
+  getModuleSourceUrl?: (info: {
+    moduleSpecifier: string;
+    deploymentId: string;
+  }) => string | undefined;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -116,64 +114,28 @@ export function EntityDetailPanel({
     new Set()
   );
 
+  const sidebar = useSidebarDataOptional();
+  const hasEncryptedData = Boolean(sidebar?.hasEncryptedData && !encryptionKey);
+
   const data = selectedSpan?.data;
   const rawEvents = selectedSpan?.rawEvents;
   const rawEventsLength = rawEvents?.length ?? 0;
 
-  // Determine resource type, ID, and runId from the selected span
-  const { resource, resourceId, runId } = useMemo(() => {
-    if (!selectedSpan) {
-      return { resource: undefined, resourceId: undefined, runId: undefined };
-    }
-
-    const res = selectedSpan.resource;
-    if (res === 'step' && isStep(data)) {
-      return { resource: 'step', resourceId: data.stepId, runId: data.runId };
-    }
-    if (res === 'run' && isWorkflowRun(data)) {
-      return { resource: 'run', resourceId: data.runId, runId: undefined };
-    }
-    if (res === 'hook' && isHook(data)) {
-      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: waitData?.runId,
-      };
-    }
-    return { resource: undefined, resourceId: undefined, runId: undefined };
-  }, [selectedSpan, data]);
-
-  // Notify parent when span selection changes.
-  // Use a ref for the callback so the effect only fires when the actual
-  // selection values change, not when the callback identity changes due to
-  // parent re-renders from polling.
-  const onSpanSelectRef = useRef(onSpanSelect);
-  onSpanSelectRef.current = onSpanSelect;
-
-  useEffect(() => {
-    if (
-      resource &&
-      resourceId &&
-      ['run', 'step', 'hook', 'sleep'].includes(resource)
-    ) {
-      onSpanSelectRef.current({
-        resource: resource as 'run' | 'step' | 'hook' | 'sleep',
-        resourceId,
-        runId,
-      });
-    }
-  }, [resource, resourceId, runId]);
+  const {
+    status,
+    resource,
+    resourceId,
+    displayData,
+    detail: matchedSpanDetailData,
+    error,
+  } = useSelectedSpanDetail(selectedSpan, fetchSpanDetail);
+  const loading = status === 'loading';
 
   // Check if this sleep is still pending and can be woken up
   const canWakeUp = useMemo(() => {
     void rawEventsLength;
     if (resource !== 'sleep' || !rawEvents) return false;
-    const terminalStates = ['completed', 'failed', 'cancelled'];
-    if (terminalStates.includes(run.status)) return false;
+    if (isTerminalWorkflowRunStatus(run.status)) return false;
     const hasWaitCreated = rawEvents.some(
       (e) => e.eventType === 'wait_created'
     );
@@ -192,8 +154,7 @@ export function EntityDetailPanel({
     // Check if we already resolved this hook in this session
     if (resolvedHookIds.has(resourceId)) return false;
 
-    const terminalStates = ['completed', 'failed', 'cancelled'];
-    if (terminalStates.includes(run.status)) return false;
+    if (isTerminalWorkflowRunStatus(run.status)) return false;
     const hasHookDisposed = rawEvents.some(
       (e) => e.eventType === 'hook_disposed'
     );
@@ -208,22 +169,19 @@ export function EntityDetailPanel({
     resolvedHookIds,
   ]);
 
-  const error = spanDetailError ?? undefined;
-  const loading = spanDetailLoading ?? false;
-
   // Get the hook token for resolving (prefer fetched data, then hooks array fallback)
   const hookToken = useMemo(() => {
     if (resource !== 'hook' || !resourceId) return undefined;
     // 1. Try the externally-fetched detail data first
-    if (isHook(spanDetailData) && spanDetailData.token) {
-      return spanDetailData.token;
+    if (isHook(matchedSpanDetailData) && matchedSpanDetailData.token) {
+      return matchedSpanDetailData.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]);
+  }, [resource, resourceId, matchedSpanDetailData, data]);
 
   useEffect(() => {
     if (error && selectedSpan && resource) {
@@ -285,7 +243,7 @@ export function EntityDetailPanel({
 
       try {
         setResolvingHook(true);
-        const candidate = spanDetailData ?? data;
+        const candidate = matchedSpanDetailData ?? data;
         const hook = isHook(candidate) ? candidate : undefined;
         await onResolveHook(hookToken, payload, hook);
         toast.success('Hook resolved', {
@@ -306,18 +264,9 @@ export function EntityDetailPanel({
         setResolvingHook(false);
       }
     },
-    [onResolveHook, hookToken, resolvingHook, spanDetailData, data]
+    [onResolveHook, hookToken, resolvingHook, matchedSpanDetailData, data]
   );
 
-  // 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;
-
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
     const displayStepName = displayRecord.stepName;
@@ -334,6 +283,21 @@ export function EntityDetailPanel({
     return undefined;
   }, [displayData, run.workflowName]);
 
+  const moduleSourceUrl = useMemo(() => {
+    if (!getModuleSourceUrl || !moduleSpecifier) return undefined;
+    const parsed =
+      parseStepName(moduleSpecifier) ?? parseWorkflowName(moduleSpecifier);
+    if (!parsed) return undefined;
+    const dataDeploymentId = displayData.deploymentId;
+    return getModuleSourceUrl({
+      moduleSpecifier: parsed.moduleSpecifier,
+      deploymentId:
+        typeof dataDeploymentId === 'string'
+          ? dataDeploymentId
+          : run.deploymentId,
+    });
+  }, [getModuleSourceUrl, moduleSpecifier, displayData, run.deploymentId]);
+
   if (!selectedSpan || !resource || !resourceId) {
     return null;
   }
@@ -345,9 +309,11 @@ export function EntityDetailPanel({
   return (
     <div className="flex h-full flex-col">
       <DecryptClickContext.Provider
-        value={onDecrypt ? { onDecrypt, isDecrypting } : undefined}
+        value={
+          onDecrypt ? { onDecrypt, isDecrypting, hasEncryptedData } : undefined
+        }
       >
-        <div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
+        <div className="flex-1 overflow-y-auto px-4 pb-8">
           {hasPendingActions && (
             <div
               className="mb-4 rounded-lg border p-2"
@@ -357,7 +323,7 @@ export function EntityDetailPanel({
               }}
             >
               <p
-                className="mb-2 px-1 text-[13px] font-medium uppercase tracking-wide"
+                className="mb-2 px-1 text-label-13 font-medium uppercase tracking-wide"
                 style={{ color: 'var(--ds-gray-700)' }}
               >
                 Actions
@@ -370,7 +336,7 @@ export function EntityDetailPanel({
                     onClick={handleWakeUp}
                     disabled={stoppingSleep}
                     className={clsx(
-                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-button-14',
                       'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
                       stoppingSleep
                         ? 'opacity-50 cursor-not-allowed'
@@ -393,7 +359,7 @@ export function EntityDetailPanel({
                     onClick={() => setShowResolveHookModal(true)}
                     disabled={resolvingHook}
                     className={clsx(
-                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-button-14',
                       'disabled:opacity-50 disabled:cursor-not-allowed transition-colors',
                       resolvingHook
                         ? 'opacity-50 cursor-not-allowed'
@@ -412,32 +378,32 @@ export function EntityDetailPanel({
             </div>
           )}
 
-          <div className="space-y-4">
-            <section>
-              <AttributePanel
-                data={displayData}
-                moduleSpecifier={moduleSpecifier}
-                expiredAt={run.expiredAt}
-                isLoading={loading}
-                error={error ?? undefined}
-                onStreamClick={onStreamClick}
-                onRunClick={onRunClick}
-                onDecrypt={onDecrypt}
-                isDecrypting={isDecrypting}
-                resource={resource}
-              />
-            </section>
-
-            {resource !== 'run' && rawEvents && (
-              <section>
-                <EventsList
-                  events={rawEvents}
-                  onLoadEventData={onLoadEventData}
-                  encryptionKey={encryptionKey}
-                />
-              </section>
-            )}
-          </div>
+          <AttributePanel
+            data={displayData}
+            moduleSpecifier={moduleSpecifier}
+            moduleSourceUrl={moduleSourceUrl}
+            expiredAt={run.expiredAt}
+            isLoading={loading}
+            error={error ?? undefined}
+            onStreamClick={onStreamClick}
+            onRunClick={onRunClick}
+            onDecrypt={onDecrypt}
+            isDecrypting={isDecrypting}
+            resource={resource}
+          />
+
+          {rawEvents && (
+            <EventsList
+              events={rawEvents}
+              onLoadEventData={onLoadEventData}
+              onStreamClick={onStreamClick}
+              onRunClick={onRunClick}
+              encryptionKey={encryptionKey}
+              showSeparateEventOccurrenceTimestamps={
+                showSeparateEventOccurrenceTimestamps
+              }
+            />
+          )}
         </div>
       </DecryptClickContext.Provider>