@workflow/web-shared 5.0.0-beta.10 → 5.0.0-beta.12

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

@@ -4,6 +4,7 @@ import {
   Children,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
+  type RefObject,
   useCallback,
   useEffect,
   useRef,
@@ -28,6 +29,7 @@ export interface SplitPaneProps {
   startHeader?: ReactNode;
   /** Fixed (non-scrolling) header rendered above the end pane. */
   endHeader?: ReactNode;
+  scrollContainerRef?: RefObject<HTMLDivElement | null>;
 }
 
 export function SplitPane({
@@ -36,6 +38,7 @@ export function SplitPane({
   defaultStartWidth = DEFAULT_START_PX,
   startHeader,
   endHeader,
+  scrollContainerRef,
 }: SplitPaneProps) {
   const parts = Children.toArray(children);
   if (parts.length !== 2) {
@@ -57,6 +60,16 @@ export function SplitPane({
     };
   }, []);
 
+  const setContainerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      containerRef.current = node;
+      if (scrollContainerRef) {
+        scrollContainerRef.current = node;
+      }
+    },
+    [scrollContainerRef]
+  );
+
   const clampPx = useCallback((px: number) => {
     const el = containerRef.current;
     if (!el) return px;
@@ -152,7 +165,7 @@ export function SplitPane({
           <div>{endHeader}</div>
         </div>
         <div
-          ref={containerRef}
+          ref={setContainerRef}
           className={cn(
             'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',
             isDragging && 'select-none'
@@ -169,7 +182,7 @@ export function SplitPane({
 
   return (
     <div
-      ref={containerRef}
+      ref={setContainerRef}
       className={cn(
         'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',
         isDragging && 'select-none',

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

@@ -6,14 +6,15 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import type { Span } from '../../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
-import type { Segment, SegmentStatus, TimeMarker } from '../utils';
 import { isSpanDimmedBySearch, type SpanSearchResult } from '../search';
+import type { Segment, SegmentStatus, TimeMarker } from '../utils';
 import {
   computeSpanGaps,
   computeSpanSegments,
   getResourceColor,
   getSpanDurationMs,
 } from '../utils';
+import { ROW_HEIGHT_PX, useRowWindow } from './use-row-window';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -365,10 +366,6 @@ export { TimelineBar };
 // DeltaIndicator (Alt-key gap overlay)
 // ---------------------------------------------------------------------------
 
-// Row and indicator sizes are local to DeltaIndicator since it's the only
-// place that needs to compute Y positions from a row index. ROW_HEIGHT must
-// match the `h-10` (40px) row used in TimelineBar.
-const DELTA_ROW_HEIGHT_PX = 40;
 const DELTA_CAP_HEIGHT_PX = 8;
 // Vertical offset to sit the indicator inside the gap between row N and N+1,
 // aligned with where the bar starts in the next row (rows center a 24px bar
@@ -386,7 +383,7 @@ const DeltaIndicator = memo(function DeltaIndicator({
   label: string;
   rowIndex: number;
 }) {
-  const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * DELTA_ROW_HEIGHT_PX;
+  const centerY = DELTA_ROW_OFFSET_PX + (rowIndex + 1) * ROW_HEIGHT_PX;
 
   return (
     <div
@@ -473,6 +470,11 @@ export function Timeline({
   const [containerWidth, setContainerWidth] = useState(0);
   const viewDuration = viewEnd - viewStart;
   const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
+  const { start, end } = useRowWindow(
+    containerRef,
+    spans.length,
+    ROW_HEIGHT_PX
+  );
 
   useEffect(() => {
     const el = containerRef.current;
@@ -490,7 +492,11 @@ export function Timeline({
   );
 
   return (
-    <div ref={containerRef} className="relative h-full overflow-hidden">
+    <div
+      ref={containerRef}
+      className="relative h-full overflow-hidden"
+      style={{ minHeight: spans.length * ROW_HEIGHT_PX }}
+    >
       <div
         aria-hidden
         className="absolute inset-y-0 pointer-events-none"
@@ -518,18 +524,20 @@ export function Timeline({
           />
         </div>
       )}
-      {spans.map((span) => (
-        <TimelineBar
-          key={span.spanId}
-          span={span}
-          viewStart={viewStart}
-          viewDuration={viewDuration}
-          containerWidth={timelineWidth}
-          isSelected={selectedId === span.spanId}
-          isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
-          onSelect={onSelect}
-        />
-      ))}
+      <div style={{ transform: `translateY(${start * ROW_HEIGHT_PX}px)` }}>
+        {spans.slice(start, end).map((span) => (
+          <TimelineBar
+            key={span.spanId}
+            span={span}
+            viewStart={viewStart}
+            viewDuration={viewDuration}
+            containerWidth={timelineWidth}
+            isSelected={selectedId === span.spanId}
+            isDimmed={isSpanDimmedBySearch(span.spanId, searchResult)}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
       {altHeld && (
         <div
           aria-hidden

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

@@ -0,0 +1,94 @@
+import { Skeleton } from '../../ui/skeleton';
+
+const COL_TEMPLATE = '340px 1px minmax(50px, 1fr)';
+
+const ROWS: { id: string; name: number; off: number; bar: number }[] = [
+  { id: 'r0', name: 62, off: 0, bar: 72 },
+  { id: 'r1', name: 78, off: 6, bar: 48 },
+  { id: 'r2', name: 50, off: 10, bar: 55 },
+  { id: 'r3', name: 84, off: 18, bar: 30 },
+  { id: 'r4', name: 45, off: 18, bar: 42 },
+  { id: 'r5', name: 66, off: 34, bar: 38 },
+  { id: 'r6', name: 55, off: 41, bar: 25 },
+  { id: 'r7', name: 40, off: 50, bar: 30 },
+];
+
+const HEADER_MARKERS = ['m0', 'm1', 'm2', 'm3'];
+
+const HeaderDivider = () => (
+  <div className="flex justify-center">
+    <span aria-hidden className="h-full w-px bg-gray-alpha-400" />
+  </div>
+);
+
+export function TraceViewerSkeleton() {
+  return (
+    <output
+      aria-busy="true"
+      aria-label="Loading trace"
+      className="flex flex-col w-full h-full min-h-0 bg-background-100"
+    >
+      <span className="sr-only">Loading trace…</span>
+
+      {/* Header row: search header | divider | timeline header */}
+      <div
+        className="shrink-0 grid"
+        style={{ gridTemplateColumns: COL_TEMPLATE }}
+      >
+        <div className="h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5">
+          <Skeleton className="w-3.5 h-3.5 shrink-0 rounded-sm" />
+          <Skeleton className="h-3.5 w-40" />
+        </div>
+        <HeaderDivider />
+        <div className="h-10 min-h-10 flex items-end border-b border-gray-alpha-400 px-4 pb-1 gap-2">
+          <div className="relative flex-1 flex items-end justify-between">
+            {HEADER_MARKERS.map((id) => (
+              <Skeleton key={id} className="h-3.5 w-9" />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content row: event list | gutter | timeline */}
+      <div
+        className="grid flex-1 min-h-0 overflow-hidden"
+        style={{ gridTemplateColumns: COL_TEMPLATE }}
+      >
+        {/* Sidebar event rows */}
+        <div className="block overflow-visible">
+          <ul className="block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400">
+            {ROWS.map((row) => (
+              <li key={row.id} className="h-10 flex items-center pl-4 pr-2">
+                <div className="flex min-w-0 flex-1 items-center gap-2">
+                  <Skeleton className="w-4 h-4 shrink-0 rounded-sm" />
+                  <Skeleton
+                    className="h-3.5"
+                    style={{ width: `${row.name}%` }}
+                  />
+                </div>
+                <Skeleton className="ml-2 h-3.5 w-10 shrink-0" />
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Gutter */}
+        <span aria-hidden className="h-full w-px bg-gray-alpha-400" />
+
+        {/* Timeline bars */}
+        <div className="relative min-h-0">
+          {ROWS.map((row) => (
+            <div key={row.id} className="relative h-10">
+              <div className="absolute inset-x-4 inset-y-0">
+                <Skeleton
+                  className="absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]"
+                  style={{ left: `${row.off}%`, width: `${row.bar}%` }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </output>
+  );
+}

package/src/components/new-trace-viewer/components/use-row-window.ts

@@ -0,0 +1,93 @@
+'use client';
+
+import { type RefObject, useEffect, useState } from 'react';
+
+/** Rows rendered on the first paint, before the container has been measured. */
+const INITIAL_VISIBLE_ROWS = 60;
+
+export interface RowWindow {
+  /** First visible row index (inclusive), already padded by overscan. */
+  start: number;
+  /** Last visible row index (exclusive), already padded by overscan. */
+  end: number;
+}
+
+/** Nearest scrollable ancestor of `el` (the shared `SplitPane` container). */
+function getScrollParent(el: HTMLElement | null): HTMLElement | null {
+  let node = el?.parentElement ?? null;
+  while (node) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if (overflowY === 'auto' || overflowY === 'scroll') return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+
+/**
+ * Fixed-height windowing over a shared scroll container.
+ *
+ * The events list and timeline both render one `rowHeight`-tall row per span
+ * and scroll together inside the same `SplitPane`. Each caller passes a ref to
+ * its own root; the hook walks up to the shared scrollable ancestor, so the
+ * scroll container doesn't have to be threaded through props. Same scroll
+ * position + same row height means both panes window to the same range.
+ */
+export function useRowWindow(
+  ref: RefObject<HTMLElement | null>,
+  rowCount: number,
+  rowHeight: number,
+  overscan = 12
+): RowWindow {
+  // Bound the pre-measurement window so the first paint of a large trace
+  // doesn't render every row before the effect narrows it down.
+  const [range, setRange] = useState<RowWindow>(() => ({
+    start: 0,
+    end: Math.min(rowCount, INITIAL_VISIBLE_ROWS),
+  }));
+
+  useEffect(() => {
+    const self = ref.current;
+    const el = getScrollParent(self);
+    if (!self || !el) return;
+
+    let raf = 0;
+    const measure = () => {
+      raf = 0;
+      // Offset of the list's top within the scroll container's content, so the
+      // window stays correct even if the list isn't flush with the top.
+      const offset =
+        self.getBoundingClientRect().top -
+        el.getBoundingClientRect().top +
+        el.scrollTop;
+      const top = el.scrollTop - offset;
+      const start = Math.max(0, Math.floor(top / rowHeight) - overscan);
+      const end = Math.min(
+        rowCount,
+        Math.ceil((top + el.clientHeight) / rowHeight) + overscan
+      );
+      setRange((prev) =>
+        prev.start === start && prev.end === end ? prev : { start, end }
+      );
+    };
+
+    const onScroll = () => {
+      if (!raf) raf = requestAnimationFrame(measure);
+    };
+
+    measure();
+    el.addEventListener('scroll', onScroll, { passive: true });
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+
+    return () => {
+      el.removeEventListener('scroll', onScroll);
+      ro.disconnect();
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [ref, rowCount, rowHeight, overscan]);
+
+  return range;
+}
+
+/** Row height (px) shared by the events list and timeline rows (`h-10`). */
+export const ROW_HEIGHT_PX = 40;

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

@@ -28,9 +28,7 @@ export function ActiveSpanProvider({
   spans: Span[];
   children: ReactNode;
 }) {
-  const [activeSpanId, setActiveSpanId] = useState<string | null>(
-    spans[0]?.spanId ?? null
-  );
+  const [activeSpanId, setActiveSpanId] = useState<string | null>(null);
 
   useEffect(() => {
     setActiveSpanId((currentSpanId) => {

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

@@ -19,6 +19,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { useLoadMoreOnScroll } from '../../hooks/use-load-more-on-scroll';
 import { useReducedMotion } from '../../hooks/use-reduced-motion';
 import { ErrorBoundary } from '../error-boundary';
 import {
@@ -29,6 +30,8 @@ import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
 import type { Trace } from '../trace-viewer/types';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
 import { IconButton } from '../ui/icon-button';
+import { Spinner } from '../ui/spinner';
+import { Kbd } from '../ui/kbd';
 import EventList from './components/event-list';
 import { SplitPane } from './components/split-pane';
 import {
@@ -36,6 +39,12 @@ import {
   Timeline,
   TimelineHeader,
 } from './components/timeline';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../ui/tooltip';
 import { ActiveSpanProvider, useActiveSpan } from './context';
 import { DetailPanel } from './detail-panel';
 import { searchSpans } from './search';
@@ -43,6 +52,9 @@ import { computeRootBounds, computeTimeMarkers } from './utils';
 
 interface NewTraceViewerProps {
   trace: Trace;
+  onLoadMore?: () => void | Promise<void>;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
 }
 
 const MIN_VIEWPORT_MS = 0.001;
@@ -152,15 +164,32 @@ function useSelectedSpanInfo(): SelectedSpanInfo | null {
 // Root component
 // ---------------------------------------------------------------------------
 
-export function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {
+export function NewTraceViewer({
+  trace,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
+}: NewTraceViewerProps): ReactNode {
   return (
-    <ActiveSpanProvider spans={trace.spans}>
-      <NewTraceViewerContent trace={trace} />
-    </ActiveSpanProvider>
+    <TooltipProvider delayDuration={300}>
+      <ActiveSpanProvider spans={trace.spans}>
+        <NewTraceViewerContent
+          trace={trace}
+          onLoadMore={onLoadMore}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+        />
+      </ActiveSpanProvider>
+    </TooltipProvider>
   );
 }
 
-function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
+function NewTraceViewerContent({
+  trace,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
+}: NewTraceViewerProps): ReactNode {
   const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =
     useActiveSpan();
 
@@ -177,6 +206,16 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
 
   const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const loadMore = useCallback(() => {
+    void onLoadMore?.();
+  }, [onLoadMore]);
+  const loadMoreSentinelRef = useLoadMoreOnScroll(loadMore, {
+    hasMore: Boolean(onLoadMore && hasMore),
+    isLoadingMore: Boolean(isLoadingMore),
+    rootRef: scrollContainerRef,
+  });
+
   const { viewport, setViewport, animateTo } = useAnimatedViewport({
     start: root.startTime,
     end: root.startTime + root.duration,
@@ -523,13 +562,14 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
     <div
       data-pane="pane-root"
       data-has-detail={activeSpan ? '' : undefined}
-      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]"
+      className="grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,360px,100%)]"
     >
       <div
         id="trace-parent"
         className="grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100"
       >
         <SplitPane
+          scrollContainerRef={scrollContainerRef}
           startHeader={
             <div className="bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center pl-4 pr-2 gap-1.5">
               <Search className="w-3.5 h-3.5 shrink-0 text-gray-800" />
@@ -575,6 +615,14 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               searchResult={searchResult}
               onSelectSpan={handleSelectSpan}
             />
+            <div ref={loadMoreSentinelRef} className="flex justify-center">
+              {isLoadingMore ? (
+                <div className="flex items-center justify-center gap-2 py-3 text-sm text-gray-800">
+                  <Spinner size={14} />
+                  <span>Loading spans…</span>
+                </div>
+              ) : null}
+            </div>
           </div>
           {/* biome-ignore lint/a11y/noStaticElementInteractions: timeline hover and wheel gestures are pointer-only annotations */}
           <div
@@ -634,22 +682,42 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
               {selectedSpanName}
             </span>
             <div className="flex items-center gap-0.5 shrink-0">
-              <IconButton
-                aria-label="Navigate to previous span"
-                aria-keyshortcuts="K"
-                onClick={handleSelectPrevSpan}
-                disabled={!prevSpanId}
-              >
-                <ChevronUp className="w-4 h-4" />
-              </IconButton>
-              <IconButton
-                aria-label="Navigate to next span"
-                aria-keyshortcuts="J"
-                onClick={handleSelectNextSpan}
-                disabled={!nextSpanId}
-              >
-                <ChevronDown className="w-4 h-4" />
-              </IconButton>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <IconButton
+                    aria-label="Navigate up"
+                    aria-keyshortcuts="K"
+                    onClick={handleSelectPrevSpan}
+                    disabled={!prevSpanId}
+                  >
+                    <ChevronUp className="w-4 h-4" />
+                  </IconButton>
+                </TooltipTrigger>
+                {prevSpanId ? (
+                  <TooltipContent>
+                    Navigate up
+                    <Kbd>K</Kbd>
+                  </TooltipContent>
+                ) : null}
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <IconButton
+                    aria-label="Navigate down"
+                    aria-keyshortcuts="J"
+                    onClick={handleSelectNextSpan}
+                    disabled={!nextSpanId}
+                  >
+                    <ChevronDown className="w-4 h-4" />
+                  </IconButton>
+                </TooltipTrigger>
+                {nextSpanId ? (
+                  <TooltipContent>
+                    Navigate down
+                    <Kbd>J</Kbd>
+                  </TooltipContent>
+                ) : null}
+              </Tooltip>
               <div aria-hidden className="w-px h-4 bg-gray-alpha-400 mx-1" />
               <IconButton
                 aria-label="Close span details"

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

@@ -1,11 +1,12 @@
-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';
 
@@ -13,34 +14,41 @@ 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(() => {
     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 as Trace}
+          onLoadMore={onLoadMore}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+        />
       </div>
     </SidebarDataProvider>
   );

package/src/components/ui/icon-button.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import type * as React from 'react';
+import * as React from 'react';
 import { cn } from '../../lib/utils';
 
 const iconButtonVariants = cva(
@@ -38,20 +38,16 @@ export type IconButtonProps = Omit<
     type?: 'button' | 'submit' | 'reset';
   };
 
-export function IconButton({
-  className,
-  variant,
-  size,
-  type = 'button',
-  ...props
-}: IconButtonProps) {
-  return (
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className, variant, size, type = 'button', ...props }, ref) => (
     <button
+      ref={ref}
       type={type}
       className={cn(iconButtonVariants({ variant, size, className }))}
       {...props}
     />
-  );
-}
+  )
+);
+IconButton.displayName = 'IconButton';
 
 export { iconButtonVariants };

package/src/components/ui/kbd.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+
+export function Kbd({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}): ReactNode {
+  return (
+    <kbd
+      className={cn(
+        'inline-flex h-5 min-w-5 items-center justify-center rounded bg-background-100/20 px-1 text-center font-sans text-xs leading-none',
+        className
+      )}
+    >
+      {children}
+    </kbd>
+  );
+}