@workflow/web-shared 5.0.0-beta.3 → 5.0.0-beta.31

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

@@ -0,0 +1,134 @@
+const hasField = (
+  value: object,
+  key: string
+): value is Record<string, unknown> => key in value;
+
+const RESOURCES_WITH_FETCHED_DETAIL = new Set(['run', 'step', 'sleep']);
+
+export function resourceNeedsFetchedDetail(
+  resource: string | undefined
+): boolean {
+  return resource !== undefined && RESOURCES_WITH_FETCHED_DETAIL.has(resource);
+}
+
+export type SpanDetailStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export interface SpanDetailView {
+  status: SpanDetailStatus;
+  displayData: Record<string, unknown>;
+  detail: unknown;
+  error: Error | undefined;
+}
+
+export function deriveSpanDetailView(args: {
+  resource: string | undefined;
+  resourceId: string | undefined;
+  inlineData: unknown;
+  fetchedDetail: unknown;
+  fetchedError: Error | null;
+}): SpanDetailView {
+  const { resource, resourceId, inlineData, fetchedDetail, fetchedError } =
+    args;
+
+  const matchedDetail = spanDetailMatchesSelection(
+    fetchedDetail,
+    resource,
+    resourceId
+  )
+    ? fetchedDetail
+    : null;
+  const displayData = mergeSpanDetail(inlineData, matchedDetail) as Record<
+    string,
+    unknown
+  >;
+
+  if (!resource || !resourceId) {
+    return { status: 'idle', displayData, detail: null, error: undefined };
+  }
+  if (fetchedError) {
+    return {
+      status: 'error',
+      displayData,
+      detail: matchedDetail,
+      error: fetchedError,
+    };
+  }
+  if (!resourceNeedsFetchedDetail(resource)) {
+    return {
+      status: 'ready',
+      displayData,
+      detail: matchedDetail,
+      error: undefined,
+    };
+  }
+  if (matchedDetail !== null) {
+    return {
+      status: 'ready',
+      displayData,
+      detail: matchedDetail,
+      error: undefined,
+    };
+  }
+  return { status: 'loading', displayData, detail: null, error: undefined };
+}
+
+/**
+ * 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/sidebar/use-selected-span-detail.ts

@@ -0,0 +1,146 @@
+'use client';
+
+import type { Event, Hook, Step, WorkflowRun } from '@workflow/world';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  SelectedSpanInfo,
+  SpanSelectionInfo,
+} from './entity-detail-panel';
+import {
+  deriveSpanDetailView,
+  resourceNeedsFetchedDetail,
+  type SpanDetailStatus,
+} from './span-detail-merge';
+
+export type DetailResource = WorkflowRun | Step | Hook | Event;
+
+export type FetchSpanDetail = (
+  selection: SpanSelectionInfo
+) => Promise<DetailResource>;
+
+function deriveSpanSelection(
+  selectedSpan: SelectedSpanInfo | null
+): SpanSelectionInfo | null {
+  if (!selectedSpan) return null;
+  const { resource, data } = selectedSpan;
+
+  if (
+    resource === 'step' &&
+    data &&
+    typeof data === 'object' &&
+    'stepId' in data
+  ) {
+    const step = data as Step;
+    return { resource: 'step', resourceId: step.stepId, runId: step.runId };
+  }
+  if (
+    resource === 'run' &&
+    data &&
+    typeof data === 'object' &&
+    'runId' in data
+  ) {
+    return { resource: 'run', resourceId: (data as WorkflowRun).runId };
+  }
+  if (
+    resource === 'hook' &&
+    data &&
+    typeof data === 'object' &&
+    'hookId' in data
+  ) {
+    return { resource: 'hook', resourceId: (data as Hook).hookId };
+  }
+  if (resource === 'sleep') {
+    if (!selectedSpan.spanId) return null;
+    const waitData = data as { runId?: string } | undefined;
+    return {
+      resource: 'sleep',
+      resourceId: selectedSpan.spanId,
+      runId: waitData?.runId,
+    };
+  }
+  return null;
+}
+
+export interface SelectedSpanDetailResult {
+  status: SpanDetailStatus;
+  resource: SpanSelectionInfo['resource'] | undefined;
+  resourceId: string | undefined;
+  runId: string | undefined;
+  displayData: Record<string, unknown>;
+  detail: DetailResource | null;
+  error: Error | undefined;
+}
+
+export function useSelectedSpanDetail(
+  selectedSpan: SelectedSpanInfo | null,
+  fetchSpanDetail: FetchSpanDetail
+): SelectedSpanDetailResult {
+  const selection = useMemo(
+    () => deriveSpanSelection(selectedSpan),
+    [selectedSpan]
+  );
+  const resource = selection?.resource;
+  const resourceId = selection?.resourceId;
+  const runId = selection?.runId;
+  const selectionKey =
+    resource && resourceId ? `${resource}:${resourceId}` : null;
+  const needsFetch = resourceNeedsFetchedDetail(resource);
+
+  const [fetched, setFetched] = useState<{
+    detail: DetailResource | null;
+    error: Error | null;
+    errorKey: string | null;
+  }>({ detail: null, error: null, errorKey: null });
+
+  const tokenRef = useRef(0);
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+
+  useEffect(() => {
+    if (!selectionKey || !needsFetch) {
+      return;
+    }
+    const activeSelection = selectionRef.current;
+    if (!activeSelection) {
+      return;
+    }
+    const token = ++tokenRef.current;
+    fetchSpanDetail(activeSelection)
+      .then((detail) => {
+        if (tokenRef.current !== token) return;
+        setFetched({ detail, error: null, errorKey: null });
+      })
+      .catch((err: unknown) => {
+        if (tokenRef.current !== token) return;
+        setFetched({
+          detail: null,
+          error: err instanceof Error ? err : new Error(String(err)),
+          errorKey: selectionKey,
+        });
+      });
+  }, [selectionKey, runId, needsFetch, fetchSpanDetail]);
+
+  const scopedError = fetched.errorKey === selectionKey ? fetched.error : null;
+
+  const view = useMemo(
+    () =>
+      deriveSpanDetailView({
+        resource,
+        resourceId,
+        inlineData: selectedSpan?.data,
+        fetchedDetail: fetched.detail,
+        fetchedError: scopedError,
+      }),
+    [resource, resourceId, selectedSpan?.data, fetched.detail, scopedError]
+  );
+
+  return {
+    status: view.status,
+    resource,
+    resourceId,
+    runId,
+    displayData: view.displayData,
+    detail: view.detail as DetailResource | null,
+    error: view.error,
+  };
+}

package/src/components/trace-viewer/components/node.tsx

@@ -18,10 +18,10 @@ import { formatDuration, getHighResInMs } from '../util/timing';
 import { SpanContent } from './span-content';
 import { computeSegments } from './span-segments';
 import {
-  type ResourceType,
-  type SpanLayout,
   getResourceType,
   getSpanLayout,
+  type ResourceType,
+  type SpanLayout,
 } from './span-strategies';
 
 export const getSpanColorClassName = (node: SpanNode): string => {
@@ -362,6 +362,7 @@ const BOUNDARY_LABELS: Record<string, string> = {
   run_completed: 'Completed',
   run_failed: 'Run failed',
   step_completed: 'Completed',
+  attr_set: 'Attributes set',
 };
 
 export const SpanEventComponent = memo(function SpanEventComponent({

package/src/components/trace-viewer/trace-viewer.module.css

@@ -1314,10 +1314,10 @@
 .segQueued {
   background: repeating-linear-gradient(
     45deg,
-    var(--ds-gray-alpha-200),
-    var(--ds-gray-alpha-200) 6px,
-    var(--ds-gray-alpha-100) 6px,
-    var(--ds-gray-alpha-100) 12px
+    var(--ds-gray-200),
+    var(--ds-gray-200) 6px,
+    var(--ds-gray-100) 6px,
+    var(--ds-gray-100) 12px
   );
 }
 

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,
@@ -14,22 +14,18 @@ export function getMsInHighRes(ms: number): [number, number] {
 }
 
 /**
- * Formats a duration for timeline display (compact single-unit format).
+ * Formats a duration for timeline display (compact format).
  * @deprecated Use formatDuration(ms, true) instead.
  */
 export const formatDurationForTimeline = (ms: number): string =>
   formatDuration(ms, true);
 
-const timeSelectionFormatter = new Intl.NumberFormat(undefined, {
-  minimumFractionDigits: 2,
-  maximumFractionDigits: 2,
-});
-
 export function formatTimeSelection(ms: number): string {
-  if (ms >= 1000) {
-    return `${timeSelectionFormatter.format(ms / 1000)}s`;
+  const roundedMs = Math.round(ms);
+  if (roundedMs < 1000) {
+    return `${roundedMs}ms`;
   }
-  return `${timeSelectionFormatter.format(ms)}ms`;
+  return `${Math.round(ms / 1000)}s`;
 }
 
 /**

package/src/components/trace-viewer-new.tsx

@@ -1,46 +1,52 @@
-import { useMemo } from 'react';
 import type { WorkflowRun } from '@workflow/core/runtime';
 import type { Event } from '@workflow/world';
+import { useMemo } from 'react';
 import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
+import { TraceViewerSkeleton } from './new-trace-viewer/components/trace-viewer-skeleton';
 import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
 import {
-  SidebarDataProvider,
   type SidebarDataContextValue,
+  SidebarDataProvider,
 } from './sidebar/sidebar-data-context';
-import type { Trace } from './trace-viewer/types';
 
 const NewTraceViewer = ({
   run,
   events,
   sidebarData,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
+  loading = false,
 }: {
   run: WorkflowRun;
   events: Event[];
   sidebarData: SidebarDataContextValue;
+  onLoadMore?: () => void | Promise<void>;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  loading?: boolean;
 }) => {
-  // Build trace only when actual data changes — no timer-driven rebuilds.
-  // Active span widths are animated imperatively by useLiveTick at 60fps.
-  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+  const trace: TraceWithMeta | undefined = useMemo(() => {
     if (!run?.runId) {
       return undefined;
     }
     return buildTrace(run, events, new Date());
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep
   }, [run, events]);
-  const trace = traceWithMeta;
 
-  if (!trace) {
-    return (
-      <div className="relative w-full h-full flex items-center justify-center">
-        <div className="text-gray-500 text-sm">Loading trace…</div>
-      </div>
-    );
+  if (!trace || (loading && events.length === 0)) {
+    return <TraceViewerSkeleton />;
   }
 
   return (
     <SidebarDataProvider value={sidebarData}>
       <div className="relative w-full h-full flex">
-        <NewTraceViewerComponent trace={trace as Trace} />
+        <NewTraceViewerComponent
+          trace={trace}
+          onLoadMore={onLoadMore}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+        />
       </div>
     </SidebarDataProvider>
   );

package/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',

package/src/components/ui/button.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/cn';
+
+const buttonVariants = cva(
+  [
+    'outline-none m-0 border-0 align-baseline no-underline group/trigger',
+    'relative cursor-pointer select-none transform translate-z-0',
+    'inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium',
+    '!text-gray-100',
+    'bg-gray-1000',
+    'transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out',
+    // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+    // consuming app), darkened via ancestor theme class without a registered variant.
+    'hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]',
+    '[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    '[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+    // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+    'focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]',
+    // disabled styles
+    'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
+    'disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100',
+    'aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100',
+  ],
+  {
+    variants: {
+      variant: {
+        default: '',
+        secondary:
+          'border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]',
+        ghost:
+          '[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]',
+      },
+      size: {
+        default: 'h-10 px-4 text-[14px]',
+        sm: 'h-8 px-3 text-[14px]',
+        xs: 'h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]',
+        icon: 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export function Button({
+  className,
+  variant,
+  size,
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { buttonVariants };

package/src/components/ui/card.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const Card = React.forwardRef<
   HTMLDivElement,