[web-shared][web] Fix trace viewer pagination issues (vercel#1182)

* [web-shared] Fix trace viewer pagination issue

* [web-shared] Fix trace viewer pagination issue

* [web-shared] Fix trace viewer pagination issue

* [workflow o11y] bump package and fix trace viewer pagination issue

* [workflow o11y] bump package and fix trace viewer pagination issue

Author: karthikscale3

.changeset/moody-ghosts-decide.md

@@ -0,0 +1,6 @@
+---
+"@workflow/web-shared": patch
+"@workflow/web": patch
+---
+
+Fix traceviewer pagination issues

packages/web-shared/src/components/run-trace-view.tsx

@@ -27,6 +27,9 @@ interface RunTraceViewProps {
   onCancelRun?: (runId: string) => Promise<void>;
   onStreamClick?: (streamId: string) => void;
   onSpanSelect?: (info: SpanSelectionInfo) => void;
+  onLoadMoreSpans?: () => void | Promise<void>;
+  hasMoreSpans?: boolean;
+  isLoadingMoreSpans?: boolean;
 }
 
 export function RunTraceView({
@@ -44,6 +47,9 @@ export function RunTraceView({
   onCancelRun,
   onStreamClick,
   onSpanSelect,
+  onLoadMoreSpans,
+  hasMoreSpans,
+  isLoadingMoreSpans,
 }: RunTraceViewProps) {
   if (error && !run) {
     return (
@@ -72,6 +78,9 @@ export function RunTraceView({
         onCancelRun={onCancelRun}
         onStreamClick={onStreamClick}
         onSpanSelect={onSpanSelect}
+        onLoadMoreSpans={onLoadMoreSpans}
+        hasMoreSpans={hasMoreSpans}
+        isLoadingMoreSpans={isLoadingMoreSpans}
       />
     </div>
   );

packages/web-shared/src/components/workflow-trace-view.tsx

@@ -278,6 +278,9 @@ function TraceViewerWithContextMenu({
   onWakeUpSleep,
   onCancelRun,
   onResolveHook,
+  onLoadMoreSpans,
+  hasMoreSpans = false,
+  isLoadingMoreSpans = false,
   children,
 }: {
   trace: { spans: Span[] };
@@ -294,9 +297,12 @@ function TraceViewerWithContextMenu({
     payload: unknown,
     hook?: Hook
   ) => Promise<void>;
+  onLoadMoreSpans?: () => void | Promise<void>;
+  hasMoreSpans?: boolean;
+  isLoadingMoreSpans?: boolean;
   children: ReactNode;
 }): ReactNode {
-  const { dispatch } = useTraceViewer();
+  const { state, dispatch } = useTraceViewer();
 
   // Drive active span widths at 60fps without React re-renders
   useLiveTick(isLive);
@@ -413,6 +419,37 @@ function TraceViewerWithContextMenu({
     };
   }, [handleContextMenu]);
 
+  const loadingMoreRef = useRef(false);
+  useEffect(() => {
+    const timeline = state.timelineRef.current;
+    if (!timeline || !onLoadMoreSpans || !hasMoreSpans) {
+      return;
+    }
+
+    const thresholdPx = 200;
+    const maybeLoadMore = () => {
+      if (loadingMoreRef.current || isLoadingMoreSpans || !hasMoreSpans) {
+        return;
+      }
+      const remaining =
+        timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight;
+      if (remaining > thresholdPx) {
+        return;
+      }
+
+      loadingMoreRef.current = true;
+      Promise.resolve(onLoadMoreSpans()).finally(() => {
+        loadingMoreRef.current = false;
+      });
+    };
+
+    timeline.addEventListener('scroll', maybeLoadMore);
+    maybeLoadMore();
+    return () => {
+      timeline.removeEventListener('scroll', maybeLoadMore);
+    };
+  }, [state.timelineRef, onLoadMoreSpans, hasMoreSpans, isLoadingMoreSpans]);
+
   const closeMenu = useCallback(() => {
     setContextMenu(null);
   }, []);
@@ -853,6 +890,9 @@ export const WorkflowTraceViewer = ({
   onStreamClick,
   onSpanSelect,
   onLoadEventData,
+  onLoadMoreSpans,
+  hasMoreSpans = false,
+  isLoadingMoreSpans = false,
 }: {
   run: WorkflowRun;
   steps: Step[];
@@ -883,6 +923,12 @@ export const WorkflowTraceViewer = ({
     correlationId: string,
     eventId: string
   ) => Promise<unknown | null>;
+  /** Load next trace page when vertical scroll reaches bottom. */
+  onLoadMoreSpans?: () => void | Promise<void>;
+  /** Whether trace pagination has more data to load. */
+  hasMoreSpans?: boolean;
+  /** Whether trace pagination is currently fetching another page. */
+  isLoadingMoreSpans?: boolean;
 }) => {
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
@@ -1049,6 +1095,9 @@ export const WorkflowTraceViewer = ({
             onWakeUpSleep={onWakeUpSleep}
             onCancelRun={onCancelRun}
             onResolveHook={onResolveHook}
+            onLoadMoreSpans={onLoadMoreSpans}
+            hasMoreSpans={hasMoreSpans}
+            isLoadingMoreSpans={isLoadingMoreSpans}
           >
             <TraceViewerTimeline
               eagerRender

packages/web/app/components/run-detail-view.tsx

@@ -357,6 +357,9 @@ export function RunDetailView({
     auxiliaryDataLoading,
     error,
     update,
+    loadMoreTraceData,
+    hasMoreTraceData,
+    isLoadingMoreTraceData,
   } = useWorkflowTraceViewerData(env, runId, { live: true });
   const run = runData ?? ({} as WorkflowRun);
 
@@ -723,6 +726,9 @@ export function RunDetailView({
                     onWakeUpSleep={handleWakeUpSleep}
                     onResolveHook={handleResolveHook}
                     onLoadEventData={handleLoadSidebarEventData}
+                    onLoadMoreSpans={loadMoreTraceData}
+                    hasMoreSpans={hasMoreTraceData}
+                    isLoadingMoreSpans={isLoadingMoreTraceData}
                   />
                 </div>
               </ErrorBoundary>

packages/web/app/lib/client/hooks/use-trace-viewer.test.ts

@@ -11,11 +11,13 @@ vi.mock('~/lib/rpc-client', () => ({
   fetchSteps: vi.fn(),
   fetchHooks: vi.fn(),
   fetchEvents: vi.fn(),
+  fetchEventsByCorrelationId: vi.fn(),
 }));
 
 import type { WorkflowRun } from '@workflow/world';
 import {
   fetchEvents,
+  fetchEventsByCorrelationId,
   fetchHooks,
   fetchRun,
   fetchSteps,
@@ -50,6 +52,7 @@ function emptyPage() {
 describe('useWorkflowTraceViewerData', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.mocked(fetchEventsByCorrelationId).mockReturnValue(emptyPage());
   });
 
   it('shows complete trace data on load', async () => {