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

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,
@@ -530,6 +569,7 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
         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>
+  );
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    showArrow?: boolean;
+  }
+>(
+  (
+    { className, sideOffset = 8, showArrow = true, children, ...props },
+    ref
+  ) => (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-[99999] flex items-center gap-1 rounded-[10px] bg-gray-1000 px-2 py-1.5 !text-label-13 text-background-100 shadow-md select-none',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showArrow ? (
+          <TooltipPrimitive.Arrow
+            width={11}
+            height={5}
+            className="fill-gray-1000"
+          />
+        ) : null}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/hooks/use-intersection-observer.ts

@@ -0,0 +1,57 @@
+'use client';
+
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
+
+interface UseIntersectionObserverArgs
+  extends Omit<IntersectionObserverInit, 'root'> {
+  /**
+   * Scroll container the target is observed within. Defaults to the viewport.
+   * Passed as a ref so it resolves after commit (when the node exists).
+   */
+  rootRef?: RefObject<Element | null>;
+  freezeOnceVisible?: boolean;
+}
+
+/**
+ * Returns the latest IntersectionObserverEntry for `elementRef`.
+ * Ported from vercel/front's `@vercel/hooks` `useIntersectionObserver`, with
+ * `root` threaded as a ref so we can observe inside a custom scroll container.
+ */
+export function useIntersectionObserver(
+  elementRef: RefObject<Element | null>,
+  {
+    threshold = 0,
+    rootRef,
+    rootMargin = '0%',
+    freezeOnceVisible = false,
+  }: UseIntersectionObserverArgs = {}
+): IntersectionObserverEntry | undefined {
+  const [entry, setEntry] = useState<IntersectionObserverEntry>();
+
+  const frozen = entry?.isIntersecting && freezeOnceVisible;
+
+  useEffect(() => {
+    const node = elementRef?.current;
+
+    const hasIOSupport = !!window.IntersectionObserver;
+
+    if (!hasIOSupport || frozen || !node) return;
+
+    const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
+      setEntry(entry);
+    };
+
+    const observer = new IntersectionObserver(updateEntry, {
+      threshold,
+      root: rootRef?.current ?? null,
+      rootMargin,
+    });
+
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [elementRef, threshold, rootRef, rootMargin, frozen]);
+
+  return entry;
+}

package/src/hooks/use-load-more-on-scroll.ts

@@ -0,0 +1,49 @@
+'use client';
+
+import type { RefObject } from 'react';
+import { useEffect, useRef } from 'react';
+import { useIntersectionObserver } from './use-intersection-observer';
+
+interface UseLoadMoreOnScrollOptions {
+  hasMore: boolean;
+  isLoadingMore: boolean;
+  /** Scroll container the sentinel lives in. Defaults to the viewport. */
+  rootRef?: RefObject<Element | null>;
+  rootMargin?: string;
+}
+
+/**
+ * Triggers `loadMore` when a sentinel element scrolls into view.
+ * Returns a ref to attach to an invisible sentinel `<div>` placed after the
+ * list content. Ported from vercel/front's `@vercel/hooks`
+ * `useLoadMoreOnScroll`.
+ *
+ * Because it keys off `isIntersecting`/`isLoadingMore`, it self-continues:
+ * if the sentinel is still in view once a page finishes loading, the next
+ * page is requested automatically.
+ */
+export function useLoadMoreOnScroll(
+  loadMore: () => void,
+  {
+    hasMore,
+    isLoadingMore,
+    rootRef,
+    rootMargin = '400px',
+  }: UseLoadMoreOnScrollOptions
+) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const entry = useIntersectionObserver(sentinelRef, { rootRef, rootMargin });
+
+  const loadMoreRef = useRef(loadMore);
+  useEffect(() => {
+    loadMoreRef.current = loadMore;
+  }, [loadMore]);
+
+  useEffect(() => {
+    if (entry?.isIntersecting && hasMore && !isLoadingMore) {
+      loadMoreRef.current();
+    }
+  }, [entry?.isIntersecting, hasMore, isLoadingMore]);
+
+  return sentinelRef;
+}