@workflow/web-shared 4.1.0-beta.47 → 4.1.0-beta.49

package/src/components/sidebar/conversation-view.tsx

@@ -0,0 +1,235 @@
+import type { ModelMessage } from 'ai';
+import { Streamdown } from 'streamdown';
+
+interface ConversationViewProps {
+  messages: ModelMessage[];
+}
+
+export function ConversationView({ messages }: ConversationViewProps) {
+  if (messages.length === 0) {
+    return (
+      <div
+        className="text-center py-8 text-[11px]"
+        style={{ color: 'var(--ds-gray-600)' }}
+      >
+        No messages
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3 p-3">
+      {messages.map((message, index) => (
+        <MessageBubble key={index} message={message} />
+      ))}
+    </div>
+  );
+}
+
+function MessageBubble({ message }: { message: ModelMessage }) {
+  const role = message.role;
+  const parts = parseContent(message.content);
+  const style = getRoleStyle(role);
+
+  return (
+    <div
+      className="rounded-md border text-[11px]"
+      style={{
+        backgroundColor: style.bg,
+        borderColor: style.border,
+      }}
+    >
+      {/* Role header */}
+      <div
+        className="px-2.5 py-1 border-b text-[10px] font-medium uppercase tracking-wide"
+        style={{
+          borderColor: style.border,
+          color: style.label,
+        }}
+      >
+        {role}
+      </div>
+
+      {/* Content */}
+      <div className="px-2.5 py-2 space-y-2">
+        {parts.map((part, i) => (
+          <ContentPart key={i} part={part} role={role} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ParsedPart {
+  type: 'text' | 'tool-call' | 'tool-result';
+  text?: string;
+  toolName?: string;
+  input?: unknown;
+  output?: unknown;
+}
+
+function ContentPart({ part, role }: { part: ParsedPart; role: string }) {
+  if (part.type === 'text') {
+    if (!part.text) return null;
+
+    // Use Streamdown for assistant messages (they often contain markdown)
+    if (role === 'assistant') {
+      return (
+        <div
+          className="prose prose-sm max-w-none text-[11px] [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+          style={{ color: 'var(--ds-gray-1000)' }}
+        >
+          <Streamdown>{part.text}</Streamdown>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className="whitespace-pre-wrap break-words"
+        style={{ color: 'var(--ds-gray-1000)' }}
+      >
+        {part.text}
+      </div>
+    );
+  }
+
+  if (part.type === 'tool-call') {
+    return (
+      <div
+        className="rounded border px-2 py-1.5"
+        style={{
+          backgroundColor: 'var(--ds-purple-100)',
+          borderColor: 'var(--ds-purple-300)',
+        }}
+      >
+        <div className="flex items-center gap-1.5 text-[10px] font-medium">
+          <span>🔧</span>
+          <span style={{ color: 'var(--ds-purple-900)' }}>{part.toolName}</span>
+        </div>
+        {part.input != null && (
+          <pre
+            className="mt-1.5 text-[10px] overflow-x-auto p-1.5 rounded"
+            style={{
+              backgroundColor: 'var(--ds-gray-100)',
+              color: 'var(--ds-gray-800)',
+            }}
+          >
+            {typeof part.input === 'string'
+              ? part.input
+              : JSON.stringify(part.input, null, 2)}
+          </pre>
+        )}
+      </div>
+    );
+  }
+
+  if (part.type === 'tool-result') {
+    const outputText = formatOutput(part.output);
+    return (
+      <div
+        className="rounded border px-2 py-1.5"
+        style={{
+          backgroundColor: 'var(--ds-green-100)',
+          borderColor: 'var(--ds-green-300)',
+        }}
+      >
+        <div className="flex items-center gap-1.5 text-[10px] font-medium">
+          <span>✓</span>
+          <span style={{ color: 'var(--ds-green-900)' }}>
+            {part.toolName} result
+          </span>
+        </div>
+        {outputText && (
+          <pre
+            className="mt-1.5 text-[10px] overflow-x-auto max-h-[80px] p-1.5 rounded"
+            style={{
+              backgroundColor: 'var(--ds-gray-100)',
+              color: 'var(--ds-gray-800)',
+            }}
+          >
+            {outputText}
+          </pre>
+        )}
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function getRoleStyle(role: string) {
+  switch (role) {
+    case 'user':
+      return {
+        bg: 'var(--ds-blue-100)',
+        border: 'var(--ds-blue-300)',
+        label: 'var(--ds-blue-700)',
+      };
+    case 'assistant':
+      return {
+        bg: 'var(--ds-gray-100)',
+        border: 'var(--ds-gray-300)',
+        label: 'var(--ds-gray-700)',
+      };
+    case 'system':
+      return {
+        bg: 'var(--ds-amber-100)',
+        border: 'var(--ds-amber-300)',
+        label: 'var(--ds-amber-700)',
+      };
+    case 'tool':
+      return {
+        bg: 'var(--ds-green-50)',
+        border: 'var(--ds-green-300)',
+        label: 'var(--ds-green-700)',
+      };
+    default:
+      return {
+        bg: 'var(--ds-gray-100)',
+        border: 'var(--ds-gray-300)',
+        label: 'var(--ds-gray-700)',
+      };
+  }
+}
+
+function parseContent(content: unknown): ParsedPart[] {
+  if (typeof content === 'string') {
+    return [{ type: 'text', text: content }];
+  }
+
+  if (Array.isArray(content)) {
+    return content.map((part): ParsedPart => {
+      if (typeof part === 'string') {
+        return { type: 'text', text: part };
+      }
+      if (part?.type === 'text') {
+        return { type: 'text', text: String(part.text ?? '') };
+      }
+      if (part?.type === 'tool-call') {
+        return {
+          type: 'tool-call',
+          toolName: part.toolName,
+          input: part.input,
+        };
+      }
+      if (part?.type === 'tool-result') {
+        return {
+          type: 'tool-result',
+          toolName: part.toolName,
+          output: part.output,
+        };
+      }
+      return { type: 'text', text: '' };
+    });
+  }
+
+  return [];
+}
+
+function formatOutput(output: unknown): string | null {
+  if (output == null) return null;
+  const text =
+    typeof output === 'string' ? output : JSON.stringify(output, null, 2);
+  return text.length > 500 ? `${text.slice(0, 500)}...` : text;
+}

package/src/components/sidebar/detail-card.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+
+export function DetailCard({
+  summary,
+  children,
+}: {
+  summary: ReactNode;
+  children?: ReactNode;
+}) {
+  return (
+    <details className="group">
+      <summary
+        className="cursor-pointer rounded-md border px-2.5 py-1.5 text-xs hover:brightness-95"
+        style={{
+          borderColor: 'var(--ds-gray-300)',
+          backgroundColor: 'var(--ds-gray-100)',
+          color: 'var(--ds-gray-900)',
+        }}
+      >
+        {summary}
+      </summary>
+      {/* Expanded content with connecting line */}
+      <div className="relative pl-6 mt-3">
+        {/* Curved connecting line - vertical part from summary */}
+        <div
+          className="absolute left-3 -top-3 w-px h-3"
+          style={{ backgroundColor: 'var(--ds-gray-400)' }}
+        />
+        {/* Curved corner */}
+        <div
+          className="absolute left-3 top-0 w-3 h-3 border-l border-b rounded-bl-lg"
+          style={{ borderColor: 'var(--ds-gray-400)' }}
+        />
+        {/* Horizontal part to content */}
+        <div
+          className="absolute left-6 top-3 w-0 h-px -translate-y-px"
+          style={{ backgroundColor: 'var(--ds-gray-400)' }}
+        />
+        <div>{children}</div>
+      </div>
+    </details>
+  );
+}

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

@@ -0,0 +1,338 @@
+'use client';
+
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import clsx from 'clsx';
+import { Send, Zap } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { useTraceViewer } from '../trace-viewer';
+import { AttributePanel } from './attribute-panel';
+import { EventsList } from './events-list';
+import { ResolveHookModal } from './resolve-hook-modal';
+
+// 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;
+}
+
+function isHook(data: unknown): data is Hook {
+  return data !== null && typeof data === 'object' && 'hookId' in data;
+}
+
+/**
+ * Info about the currently selected span
+ */
+export type SpanSelectionInfo = {
+  resource: 'run' | 'step' | 'hook' | 'sleep';
+  resourceId: string;
+  runId?: string;
+};
+
+/**
+ * Custom panel component for workflow traces that displays entity details
+ */
+export function EntityDetailPanel({
+  run,
+  onStreamClick,
+  spanDetailData,
+  spanDetailError,
+  spanDetailLoading,
+  onSpanSelect,
+  onWakeUpSleep,
+  onResolveHook,
+}: {
+  run: WorkflowRun;
+  /** Callback when a stream reference is clicked */
+  onStreamClick?: (streamId: 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;
+  /** Callback to wake up a pending sleep call. */
+  onWakeUpSleep?: (
+    runId: string,
+    correlationId: string
+  ) => Promise<{ stoppedCount: number }>;
+  /** Callback to resolve a hook with a payload. */
+  onResolveHook?: (
+    hookToken: string,
+    payload: unknown,
+    hook?: Hook
+  ) => Promise<void>;
+}): React.JSX.Element | null {
+  const { state } = useTraceViewer();
+  const { selected } = state;
+  const [stoppingSleep, setStoppingSleep] = useState(false);
+  const [showResolveHookModal, setShowResolveHookModal] = useState(false);
+  const [resolvingHook, setResolvingHook] = useState(false);
+
+  const data = selected?.span.attributes?.data;
+
+  // Stable ref for onSpanSelect to avoid re-render loops when parent
+  // doesn't memoize the callback with useCallback.
+  const onSpanSelectRef = useRef(onSpanSelect);
+  useEffect(() => {
+    onSpanSelectRef.current = onSpanSelect;
+  });
+
+  // Determine resource ID and runId (needed for steps)
+  // Uses type guards to validate the data shape matches the expected resource type
+  const { resource, resourceId, runId } = useMemo(() => {
+    const resource = selected?.span.attributes?.resource;
+    if (resource === 'step' && isStep(data)) {
+      return { resource: 'step', resourceId: data.stepId, runId: data.runId };
+    } else if (resource === 'run' && isWorkflowRun(data)) {
+      return { resource: 'run', resourceId: data.runId, runId: undefined };
+    } else if (resource === 'hook' && isHook(data)) {
+      return { resource: 'hook', resourceId: data.hookId, runId: undefined };
+    } else if (resource === 'sleep') {
+      return {
+        resource: 'sleep',
+        resourceId: selected?.span?.spanId,
+        runId: undefined,
+      };
+    }
+    return { resource: undefined, resourceId: undefined, runId: undefined };
+  }, [selected, data]);
+
+  // Notify parent when span selection changes
+  useEffect(() => {
+    if (
+      resource &&
+      resourceId &&
+      ['run', 'step', 'hook', 'sleep'].includes(resource)
+    ) {
+      onSpanSelectRef.current({
+        resource: resource as 'run' | 'step' | 'hook' | 'sleep',
+        resourceId,
+        runId,
+      });
+    }
+  }, [resource, resourceId, runId]);
+
+  // Check if this sleep is still pending and can be woken up
+  // Requirements: no wait_completed event, resumeAt is in the future, run is not terminal
+  const spanEvents = selected?.span.events;
+  const spanEventsLength = spanEvents?.length ?? 0;
+  const canWakeUp = useMemo(() => {
+    void spanEventsLength; // Force dependency on length for reactivity
+    if (resource !== 'sleep' || !spanEvents) return false;
+
+    // Check run is not in a terminal state
+    const terminalStates = ['completed', 'failed', 'cancelled'];
+    if (terminalStates.includes(run.status)) return false;
+
+    // Check if wait has already completed
+    const hasWaitCompleted = spanEvents.some(
+      (e) => e.name === 'wait_completed'
+    );
+    if (hasWaitCompleted) return false;
+
+    // Check if resumeAt is in the future
+    const waitCreatedEvent = spanEvents.find((e) => e.name === 'wait_created');
+    const eventData = waitCreatedEvent?.attributes?.eventData as
+      | { resumeAt?: string | Date }
+      | undefined;
+    const resumeAt = eventData?.resumeAt;
+    if (!resumeAt) return false;
+
+    const resumeAtDate = new Date(resumeAt);
+    return resumeAtDate.getTime() > Date.now();
+  }, [resource, spanEvents, spanEventsLength, run.status]);
+
+  // Check if this hook can be resolved (not yet resolved, run is not terminal)
+  const canResolveHook = useMemo(() => {
+    void spanEventsLength; // Force dependency on length for reactivity
+    if (resource !== 'hook' || !spanEvents) return false;
+
+    // Check run is not in a terminal state
+    const terminalStates = ['completed', 'failed', 'cancelled'];
+    if (terminalStates.includes(run.status)) return false;
+
+    // Check if hook has already been disposed
+    const hasHookDisposed = spanEvents.some((e) => e.name === 'hook_disposed');
+    if (hasHookDisposed) return false;
+
+    // Hook can be resolved
+    return true;
+  }, [resource, spanEvents, spanEventsLength, run.status]);
+
+  const error = spanDetailError ?? undefined;
+  const loading = spanDetailLoading ?? false;
+
+  // Get the hook token for resolving (prefer fetched data when available)
+  const hookToken = useMemo(() => {
+    if (resource !== 'hook') return undefined;
+    const candidate = spanDetailData ?? data;
+    return isHook(candidate) ? candidate.token : undefined;
+  }, [resource, spanDetailData, data]);
+
+  useEffect(() => {
+    if (error && selected && resource) {
+      toast.error(`Failed to load ${resource} details`, {
+        description: error.message,
+      });
+    }
+  }, [error, resource, selected]);
+
+  const handleWakeUp = async () => {
+    if (stoppingSleep || !resourceId) return;
+    if (!onWakeUpSleep) {
+      toast.error('Unable to wake up sleep', {
+        description: 'No wake-up handler provided.',
+      });
+      return;
+    }
+
+    try {
+      setStoppingSleep(true);
+      const result = await onWakeUpSleep(run.runId, resourceId);
+      if (result.stoppedCount > 0) {
+        toast.success('Run woken up', {
+          description:
+            'The sleep call has been interrupted and the run woken up.',
+        });
+      } else {
+        toast.info('Sleep already completed', {
+          description: 'This sleep call has already finished.',
+        });
+      }
+    } catch (err) {
+      console.error('Failed to wake up run:', err);
+      toast.error('Failed to wake up run', {
+        description:
+          err instanceof Error ? err.message : 'An unknown error occurred',
+      });
+    } finally {
+      setStoppingSleep(false);
+    }
+  };
+
+  const handleResolveHook = useCallback(
+    async (payload: unknown) => {
+      if (resolvingHook) return;
+      if (!onResolveHook) {
+        toast.error('Unable to resolve hook', {
+          description: 'No resolve handler provided.',
+        });
+        return;
+      }
+      if (!hookToken) {
+        toast.error('Unable to resolve hook', {
+          description:
+            'Missing hook token. Try refreshing the run data and retry.',
+        });
+        return;
+      }
+
+      try {
+        setResolvingHook(true);
+        const candidate = spanDetailData ?? data;
+        const hook = isHook(candidate) ? candidate : undefined;
+        await onResolveHook(hookToken, payload, hook);
+        toast.success('Hook resolved', {
+          description: 'The payload has been sent and the hook resolved.',
+        });
+        setShowResolveHookModal(false);
+      } 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, hookToken, resolvingHook, spanDetailData, data]
+  );
+
+  if (!selected || !resource || !resourceId) {
+    return null;
+  }
+
+  const displayData = (spanDetailData ?? data) as
+    | WorkflowRun
+    | Step
+    | Hook
+    | Event;
+
+  return (
+    <div className={clsx('flex flex-col px-2')}>
+      {/* Wake up button for pending sleep calls */}
+      {resource === 'sleep' && canWakeUp && (
+        <div className="mb-3 pb-3 border-b border-gray-200 dark:border-gray-700">
+          <button
+            type="button"
+            onClick={handleWakeUp}
+            disabled={stoppingSleep}
+            className={clsx(
+              'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md w-full',
+              'bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-200',
+              'hover:bg-amber-200 dark:hover:bg-amber-900/50',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              'transition-colors',
+              stoppingSleep ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+            )}
+          >
+            <Zap className="h-4 w-4" />
+            {stoppingSleep ? 'Waking up...' : 'Wake up'}
+          </button>
+          <p className="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+            Interrupt this sleep call and wake up the run.
+          </p>
+        </div>
+      )}
+
+      {/* Resolve hook button for pending hooks */}
+      {resource === 'hook' && canResolveHook && (
+        <div className="mb-3 pb-3 border-b border-gray-200 dark:border-gray-700">
+          <button
+            type="button"
+            onClick={() => setShowResolveHookModal(true)}
+            disabled={resolvingHook}
+            className={clsx(
+              'flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md w-full',
+              'bg-primary text-primary-foreground hover:bg-primary/90',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+              'transition-colors',
+              resolvingHook ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+            )}
+          >
+            <Send className="h-4 w-4" />
+            Resolve Hook
+          </button>
+          <p className="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+            Send a JSON payload to resolve this hook.
+          </p>
+        </div>
+      )}
+
+      {/* Resolve Hook Modal */}
+      <ResolveHookModal
+        isOpen={showResolveHookModal}
+        onClose={() => setShowResolveHookModal(false)}
+        onSubmit={handleResolveHook}
+        isSubmitting={resolvingHook}
+      />
+
+      {/* Content display */}
+      <AttributePanel
+        data={displayData}
+        expiredAt={run.expiredAt}
+        isLoading={loading}
+        error={error ?? undefined}
+        onStreamClick={onStreamClick}
+      />
+      {resource !== 'run' && <EventsList events={selected.span.events} />}
+    </div>
+  );
+}