@workflow/web-shared 5.0.0-beta.2 → 5.0.0-beta.20

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

@@ -4,13 +4,16 @@ 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 { isEncryptedMarker } from '../../lib/hydration';
 import { useToast } from '../../lib/toast';
 import { DecryptClickContext } from '../ui/data-inspector';
-import { DecryptButton } from '../ui/decrypt-button';
 import { AttributePanel } from './attribute-panel';
 import { EventsList } from './events-list';
 import { ResolveHookModal } from './resolve-hook-modal';
+import { useSidebarDataOptional } from './sidebar-data-context';
+import {
+  mergeSpanDetail,
+  spanDetailMatchesSelection,
+} from './span-detail-merge';
 
 // Type guards for runtime validation of span attribute data
 function isStep(data: unknown): data is Step {
@@ -69,7 +72,6 @@ export function EntityDetailPanel({
   onDecrypt,
   isDecrypting = false,
   selectedSpan,
-  hasEncryptedData = false,
 }: {
   run: WorkflowRun;
   /** Callback when a stream reference is clicked */
@@ -108,8 +110,6 @@ export function EntityDetailPanel({
   isDecrypting?: boolean;
   /** Info about the currently selected span from the trace viewer */
   selectedSpan: SelectedSpanInfo | null;
-  /** Run-level hint: the run contains encrypted data (from probe). */
-  hasEncryptedData?: boolean;
 }): React.JSX.Element | null {
   const toast = useToast();
   const [stoppingSleep, setStoppingSleep] = useState(false);
@@ -121,6 +121,9 @@ 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;
@@ -216,30 +219,27 @@ 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]);
+  const matchedSpanDetailData = useMemo(
+    () =>
+      spanDetailMatchesSelection(spanDetailData, resource, resourceId)
+        ? spanDetailData
+        : null,
+    [spanDetailData, resource, resourceId]
+  );
 
   // 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) {
@@ -301,7 +301,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', {
@@ -322,17 +322,18 @@ 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 displayData = useMemo(
+    () =>
+      mergeSpanDetail(data, matchedSpanDetailData) as
+        | WorkflowRun
+        | Step
+        | Hook
+        | Event,
+    [data, matchedSpanDetailData]
+  );
 
   const moduleSpecifier = useMemo(() => {
     const displayRecord = displayData as Record<string, unknown>;
@@ -354,65 +355,18 @@ export function EntityDetailPanel({
     return null;
   }
 
-  const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
   const hasPendingActions =
     (resource === 'sleep' && canWakeUp) ||
     (resource === 'hook' && canResolveHook);
-  const runStateLabel = run.completedAt ? 'Completed' : 'Live';
 
   return (
     <div className="flex h-full flex-col">
-      <div
-        className="border-b px-3 py-3"
-        style={{ borderColor: 'var(--ds-gray-200)' }}
-      >
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0">
-            <div className="flex items-center gap-2">
-              <span
-                className="inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium"
-                style={{
-                  borderColor: 'var(--ds-gray-300)',
-                  color: 'var(--ds-gray-900)',
-                  backgroundColor: 'var(--ds-background-100)',
-                }}
-              >
-                {resourceLabel}
-              </span>
-              <span
-                className="text-[13px]"
-                style={{
-                  color: run.completedAt
-                    ? 'var(--ds-gray-700)'
-                    : 'var(--ds-green-800)',
-                }}
-              >
-                {runStateLabel}
-              </span>
-            </div>
-            <p
-              className="mt-1 truncate font-mono text-[13px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-              title={resourceId}
-            >
-              {resourceId}
-            </p>
-          </div>
-          {(hasEncryptedFields || hasEncryptedData || encryptionKey) &&
-            onDecrypt && (
-              <DecryptButton
-                decrypted={!!encryptionKey}
-                loading={isDecrypting}
-                onClick={onDecrypt}
-              />
-            )}
-        </div>
-      </div>
-
       <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"
@@ -477,38 +431,28 @@ export function EntityDetailPanel({
             </div>
           )}
 
-          <div className="space-y-4">
-            <section>
-              <h3
-                className="mb-2 text-[13px] font-medium uppercase tracking-wide"
-                style={{ color: 'var(--ds-gray-700)' }}
-              >
-                Details
-              </h3>
-              <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}
+            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}
+            />
+          )}
         </div>
       </DecryptClickContext.Provider>
 

package/src/components/sidebar/events-list.tsx

@@ -1,16 +1,14 @@
 'use client';
 
 import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isExpiredMarker } from '../../lib/hydration';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { hasEncryptedFields, isExpiredMarker } from '../../lib/hydration';
+import { RunClickContext, StreamClickContext } from '../ui/data-inspector';
 import { ErrorCard } from '../ui/error-card';
-import {
-  ErrorStackBlock,
-  isStructuredErrorWithStack,
-} from '../ui/error-stack-block';
+import { ErrorStackBlock, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
-import { localMillisecondTime } from './attribute-panel';
-import { CopyableDataBlock } from './copyable-data-block';
+import { AttrSetEventBlock } from './attributes-block';
+import { CopyableDataBlock, EncryptedDataBlock } from './copyable-data-block';
 import { DetailCard } from './detail-card';
 
 /**
@@ -33,6 +31,7 @@ const DATA_EVENT_TYPES = new Set([
   'run_failed',
   'wait_created',
   'wait_completed',
+  'attr_set',
 ]);
 
 /**
@@ -94,7 +93,7 @@ function EventItem({
 
   // When the encryption key changes and this event was previously expanded,
   // re-load the data so it gets decrypted
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!encryptionKey || !wasExpandedRef.current) return;
     loadedDataRef.current = null;
     setLoadedData(null);
@@ -102,25 +101,27 @@ function EventItem({
   }, [encryptionKey, loadEventData]);
 
   const createdAt = new Date(event.createdAt);
+  const createdAtTime = createdAt.toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  });
 
   const displayPayload = isLoading ? loadedData : mergedDisplay;
 
   return (
     <DetailCard
-      summaryClassName="text-base py-2"
+      variant="card"
+      summaryClassName="px-3 py-2"
       summary={
-        <>
-          <span
-            className="font-medium"
-            style={{ color: 'var(--ds-gray-1000)' }}
-          >
+        <div className="flex w-full items-center justify-between gap-3">
+          <span className="text-gray-1000 text-label-12 font-mono">
             {event.eventType}
-          </span>{' '}
-          -{' '}
-          <span style={{ color: 'var(--ds-gray-700)' }}>
-            {localMillisecondTime(createdAt.getTime())}
           </span>
-        </>
+          <span className="shrink-0 text-label-13 text-gray-900">
+            {createdAtTime}
+          </span>
+        </div>
       }
       onToggle={
         canHaveData
@@ -131,44 +132,17 @@ function EventItem({
       }
     >
       {/* Event attributes */}
-      <div
-        className="flex flex-col divide-y rounded-md border overflow-hidden"
-        style={{
-          borderColor: 'var(--ds-gray-300)',
-          backgroundColor: 'var(--ds-gray-100)',
-        }}
-      >
-        <div
-          className="flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5"
-          style={{ borderColor: 'var(--ds-gray-300)' }}
-        >
-          <span className="text-[14px]" style={{ color: 'var(--ds-gray-700)' }}>
-            eventId
-          </span>
-          <span
-            className="max-w-[70%] truncate text-right text-[13px] font-mono"
-            style={{ color: 'var(--ds-gray-1000)' }}
-            title={event.eventId}
-          >
+      <div className="flex flex-col bg-background-200 [&:has(+_*)]:border-b [&:has(+_*)]:border-gray-alpha-400">
+        <div className="flex items-center justify-between gap-2 py-2 px-3">
+          <span className="text-label-12 text-gray-900">Event ID</span>
+          <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
             {event.eventId}
           </span>
         </div>
         {event.correlationId && (
-          <div
-            className="flex min-h-[32px] items-center justify-between gap-4 px-2.5 py-1.5"
-            style={{ borderColor: 'var(--ds-gray-300)' }}
-          >
-            <span
-              className="text-[14px]"
-              style={{ color: 'var(--ds-gray-700)' }}
-            >
-              correlationId
-            </span>
-            <span
-              className="max-w-[70%] truncate text-right text-[13px] font-mono"
-              style={{ color: 'var(--ds-gray-1000)' }}
-              title={event.correlationId}
-            >
+          <div className="flex items-center justify-between gap-2 py-2 px-3">
+            <span className="text-label-12 text-gray-900">Correlation ID</span>
+            <span className="max-w-[70%] truncate text-right text-label-12 font-mono">
               {event.correlationId}
             </span>
           </div>
@@ -177,12 +151,7 @@ function EventItem({
 
       {/* Loading state */}
       {isLoading && (
-        <div
-          className="mt-2 rounded-md border p-3"
-          style={{
-            borderColor: 'var(--ds-gray-300)',
-          }}
-        >
+        <div className="p-3">
           <Skeleton className="h-4 w-[35%]" />
           <Skeleton className="mt-2 h-4 w-[90%]" />
           <Skeleton className="mt-2 h-4 w-[75%]" />
@@ -200,7 +169,7 @@ function EventItem({
 
       {/* Event data */}
       {displayPayload != null && (
-        <div className="mt-2">
+        <div className="[&>div]:border-none [&>div]:rounded-none">
           <EventDataBlock eventType={event.eventType} data={displayPayload} />
         </div>
       )}
@@ -227,8 +196,8 @@ function hasOnlyExpiredFields(data: unknown, eventType: string): boolean {
 }
 
 /**
- * Renders event data, using ErrorStackBlock for error events that contain
- * a structured error with a stack trace, and CopyableDataBlock otherwise.
+ * Renders event data, using ErrorStackBlock for error events that contain a
+ * structured error, and CopyableDataBlock otherwise.
  */
 function EventDataBlock({
   eventType,
@@ -255,6 +224,16 @@ function EventDataBlock({
     );
   }
 
+  if (hasEncryptedFields({ eventType, eventData: data })) {
+    return <EncryptedDataBlock />;
+  }
+
+  // Attribute changes — render the changed keys and the writer instead of
+  // the raw JSON payload.
+  if (eventType === 'attr_set') {
+    return <AttrSetEventBlock data={data} />;
+  }
+
   // For error events (step_failed, step_retrying), the eventData has the shape
   // { error: StructuredError, stack?: string, ... }. Check both the top-level
   // value and the nested `error` field for a stack trace.
@@ -266,12 +245,12 @@ function EventDataBlock({
     const record = data as Record<string, unknown>;
 
     // Check the nested `error` field first (the StructuredError)
-    if (isStructuredErrorWithStack(record.error)) {
+    if (isStructuredError(record.error)) {
       return <ErrorStackBlock value={record.error} />;
     }
 
-    // Some error formats put the stack at the top level of eventData
-    if (isStructuredErrorWithStack(record)) {
+    // Some error formats put the message/stack at the top level of eventData.
+    if (isStructuredError(record)) {
       return <ErrorStackBlock value={record} />;
     }
   }
@@ -286,6 +265,8 @@ export function EventsList({
   isLoading = false,
   error,
   onLoadEventData,
+  onStreamClick,
+  onRunClick,
   encryptionKey,
 }: {
   events: Event[];
@@ -295,6 +276,8 @@ export function EventsList({
     correlationId: string,
     eventId: string
   ) => Promise<unknown | null>;
+  onStreamClick?: (streamId: string) => void;
+  onRunClick?: (runId: string) => void;
   /** When provided, signals that decryption is active (triggers re-load of expanded events) */
   encryptionKey?: Uint8Array;
 }) {
@@ -308,36 +291,42 @@ export function EventsList({
     [events]
   );
 
+  const hasEvents = sortedEvents.length > 0 && !error;
+
+  if (!hasEvents && !isLoading) {
+    return <DetailCard summary="Events" disabled />;
+  }
+
   return (
-    <div className="mt-2" style={{ color: 'var(--ds-gray-1000)' }}>
-      <h3
-        className="text-heading-16 font-medium mt-4 mb-2"
-        style={{ color: 'var(--ds-gray-1000)' }}
-      >
-        Events {!isLoading && `(${sortedEvents.length})`}
-      </h3>
-      {isLoading ? (
-        <div className="flex flex-col gap-4">
-          <Skeleton className="h-9 w-full rounded-md" />
-          <Skeleton className="h-9 w-full rounded-md" />
-          <Skeleton className="h-9 w-full rounded-md" />
-        </div>
-      ) : null}
-      {!isLoading && !error && sortedEvents.length === 0 && (
-        <div className="text-sm">No events found</div>
-      )}
-      {sortedEvents.length > 0 && !error ? (
-        <div className="flex flex-col gap-4">
-          {sortedEvents.map((event) => (
-            <EventItem
-              key={event.eventId}
-              event={event}
-              onLoadEventData={onLoadEventData}
-              encryptionKey={encryptionKey}
-            />
-          ))}
-        </div>
-      ) : null}
-    </div>
+    <RunClickContext.Provider value={onRunClick}>
+      <StreamClickContext.Provider value={onStreamClick}>
+        <DetailCard summary="Events" contentClassName="mb-0" defaultOpen>
+          {isLoading ? (
+            <div className="flex flex-col -mx-4">
+              {[0, 1, 2].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between gap-3 bg-background-200 px-4 py-2"
+                >
+                  <Skeleton className="h-4 w-32 rounded" />
+                  <Skeleton className="h-3 w-16 rounded" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="flex flex-col -mx-4">
+              {sortedEvents.map((event) => (
+                <EventItem
+                  key={event.eventId}
+                  event={event}
+                  onLoadEventData={onLoadEventData}
+                  encryptionKey={encryptionKey}
+                />
+              ))}
+            </div>
+          )}
+        </DetailCard>
+      </StreamClickContext.Provider>
+    </RunClickContext.Provider>
   );
 }

package/src/components/sidebar/sidebar-data-context.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import type { SpanSelectionInfo } from './entity-detail-panel';
+
+export interface SidebarDataContextValue {
+  run: WorkflowRun;
+  events: Event[];
+  spanDetailData: WorkflowRun | Step | Hook | Event | null;
+  spanDetailError?: Error | null;
+  spanDetailLoading?: boolean;
+  onSpanSelect: (info: SpanSelectionInfo) => void;
+  onStreamClick?: (streamId: string) => void;
+  onRunClick?: (runId: string) => void;
+  onWakeUpSleep?: (
+    runId: string,
+    correlationId: string
+  ) => Promise<{ stoppedCount: number }>;
+  onLoadEventData?: (
+    correlationId: string,
+    eventId: string
+  ) => Promise<unknown | null>;
+  onResolveHook?: (
+    hookToken: string,
+    payload: unknown,
+    hook?: Hook
+  ) => Promise<void>;
+  encryptionKey?: Uint8Array;
+  onDecrypt?: () => void;
+  isDecrypting?: boolean;
+  hasEncryptedData?: boolean;
+}
+
+const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
+SidebarDataContext.displayName = 'SidebarDataContext';
+
+export function SidebarDataProvider({
+  value,
+  children,
+}: {
+  value: SidebarDataContextValue;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarDataContext.Provider value={value}>
+      {children}
+    </SidebarDataContext.Provider>
+  );
+}
+
+export function useSidebarData(): SidebarDataContextValue {
+  const ctx = useContext(SidebarDataContext);
+  if (!ctx) {
+    throw new Error('useSidebarData must be used within a SidebarDataProvider');
+  }
+  return ctx;
+}
+
+export function useSidebarDataOptional(): SidebarDataContextValue | null {
+  return useContext(SidebarDataContext);
+}

package/src/components/sidebar/span-detail-merge.ts

@@ -0,0 +1,65 @@
+const hasField = (
+  value: object,
+  key: string
+): value is Record<string, unknown> => key in value;
+
+/**
+ * Returns true when the fetched `detail` belongs to the current selection.
+ * The fetch lags selection, so it can briefly hold a previously selected span
+ * (even a different resource type); reject it before merging or its fields
+ * union into the wrong panel. Steps/hooks/waits carry their parent `runId`, so
+ * a `run` selection excludes objects identifiable as a child resource.
+ */
+export function spanDetailMatchesSelection(
+  detail: unknown,
+  resource: string | undefined,
+  resourceId: string | undefined
+): boolean {
+  if (!detail || typeof detail !== 'object' || !resource || !resourceId) {
+    return false;
+  }
+  switch (resource) {
+    case 'step':
+      return hasField(detail, 'stepId') && detail.stepId === resourceId;
+    case 'hook':
+      return hasField(detail, 'hookId') && detail.hookId === resourceId;
+    case 'sleep':
+      return hasField(detail, 'waitId') && detail.waitId === resourceId;
+    case 'run':
+      return (
+        hasField(detail, 'runId') &&
+        !('stepId' in detail) &&
+        !('hookId' in detail) &&
+        !('waitId' in detail) &&
+        detail.runId === resourceId
+      );
+    default:
+      return false;
+  }
+}
+
+/**
+ * Merges fetched `detail` over the span's own data. The detail supplies the
+ * heavy fields the trace strips (input/output/error/metadata, sleep resumeAt);
+ * the span's identity, status, and event-derived timestamps stay authoritative
+ * so they don't flicker to the backend row's millisecond-different values.
+ */
+export function mergeSpanDetail(spanData: unknown, detail: unknown): unknown {
+  if (!detail || typeof detail !== 'object') {
+    return spanData;
+  }
+  if (!spanData || typeof spanData !== 'object') {
+    return detail;
+  }
+  // Skip `undefined` span fields so they don't clobber a value the detail
+  // legitimately provides (e.g. a step's optional startedAt).
+  const merged: Record<string, unknown> = { ...detail };
+  for (const [key, value] of Object.entries(
+    spanData as Record<string, unknown>
+  )) {
+    if (value !== undefined) {
+      merged[key] = value;
+    }
+  }
+  return merged;
+}