@workflow/web-shared 5.0.0-beta.13 → 5.0.0-beta.14

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

@@ -10,6 +10,10 @@ 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 {
@@ -215,19 +219,27 @@ export function EntityDetailPanel({
   const error = spanDetailError ?? undefined;
   const loading = spanDetailLoading ?? false;
 
+  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) {
@@ -289,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', {
@@ -310,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>;
@@ -435,6 +448,8 @@ export function EntityDetailPanel({
             <EventsList
               events={rawEvents}
               onLoadEventData={onLoadEventData}
+              onStreamClick={onStreamClick}
+              onRunClick={onRunClick}
               encryptionKey={encryptionKey}
             />
           )}

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

@@ -3,6 +3,7 @@
 import { EVENT_DATA_REF_FIELDS, type Event } from '@workflow/world';
 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, isStructuredError } from '../ui/error-stack-block';
 import { Skeleton } from '../ui/skeleton';
@@ -256,6 +257,8 @@ export function EventsList({
   isLoading = false,
   error,
   onLoadEventData,
+  onStreamClick,
+  onRunClick,
   encryptionKey,
 }: {
   events: Event[];
@@ -265,6 +268,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;
 }) {
@@ -285,31 +290,35 @@ export function EventsList({
   }
 
   return (
-    <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" />
+    <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>
-      ) : (
-        <div className="flex flex-col -mx-4">
-          {sortedEvents.map((event) => (
-            <EventItem
-              key={event.eventId}
-              event={event}
-              onLoadEventData={onLoadEventData}
-              encryptionKey={encryptionKey}
-            />
-          ))}
-        </div>
-      )}
-    </DetailCard>
+          ) : (
+            <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/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;
+}

package/src/components/trace-viewer/util/timing.ts

@@ -1,6 +1,6 @@
-import { formatDuration } from '../../../lib/utils';
+import { formatDuration, formatDurationPrecise } from '../../../lib/utils';
 
-export { formatDuration };
+export { formatDuration, formatDurationPrecise };
 
 export function getHighResInMs([seconds, nanoseconds]: [
   number,

package/src/index.ts

@@ -64,6 +64,7 @@ export type { StreamStep } from './lib/utils';
 export {
   extractConversation,
   formatDuration,
+  formatDurationPrecise,
   identifyStreamSteps,
   isDoStreamStep,
 } from './lib/utils';

package/src/lib/utils.ts

@@ -80,6 +80,63 @@ export function formatDuration(ms: number, compact = false): string {
   return parts.join(' ');
 }
 
+// Locale-aware formatter that always renders exactly two fraction digits.
+// Used for the seconds component of precise durations so values are never
+// snapped to a whole second (and thousands separators stay correct).
+const preciseSecondsFormatter = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+/**
+ * Formats a duration in milliseconds without snapping to whole seconds.
+ *
+ * Unlike {@link formatDuration}, this never rounds a sub-minute value up to
+ * the next whole second (e.g. 1626ms renders as "1.63s", not "2s").
+ *
+ * - < 1s: shows whole milliseconds (e.g. "626ms")
+ * - 1s – 1m: shows seconds with two decimals (e.g. "1.63s", "45.20s")
+ * - >= 1m: decomposes into d/h/m with two-decimal seconds (e.g. "1m 13.45s")
+ */
+export function formatDurationPrecise(ms: number): string {
+  if (ms === 0) {
+    return '0s';
+  }
+
+  if (ms < MS_IN_SECOND) {
+    const roundedMs = Math.round(ms);
+    if (roundedMs < MS_IN_SECOND) {
+      return `${roundedMs}ms`;
+    }
+  }
+
+  const normalizedMs = Math.round(ms / 10) * 10;
+
+  if (normalizedMs < MS_IN_MINUTE) {
+    return `${preciseSecondsFormatter.format(normalizedMs / MS_IN_SECOND)}s`;
+  }
+
+  const days = Math.floor(normalizedMs / MS_IN_DAY);
+  const hours = Math.floor((normalizedMs % MS_IN_DAY) / MS_IN_HOUR);
+  const minutes = Math.floor((normalizedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+  const seconds = (normalizedMs % MS_IN_MINUTE) / MS_IN_SECOND;
+
+  const parts: string[] = [];
+
+  if (days > 0) {
+    parts.push(`${days}d`);
+  }
+  if (hours > 0) {
+    parts.push(`${hours}h`);
+  }
+  if (minutes > 0) {
+    parts.push(`${minutes}m`);
+  }
+  parts.push(`${preciseSecondsFormatter.format(seconds)}s`);
+
+  return parts.join(' ');
+}
+
 /**
  * Returns a formatted pagination display string
  * @param currentPage - The current page number