cleanup

Author: mitul-s

packages/web-shared/src/components/index.ts

@@ -15,6 +15,10 @@ export {
 } from './hook-actions';
 export { RunTraceView } from './run-trace-view';
 export { ConversationView } from './sidebar/conversation-view';
+export {
+  SidebarDataProvider,
+  type SidebarDataContextValue,
+} from './sidebar/sidebar-data-context';
 export type {
   SelectedSpanInfo,
   SpanSelectionInfo,

packages/web-shared/src/components/trace-viewer-new.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { WorkflowRun } from '@workflow/core/runtime';
-import { buildTrace, TraceWithMeta } from '../lib/trace-builder';
-import { Event } from '@workflow/world';
+import type { WorkflowRun } from '@workflow/core/runtime';
+import type { Event } from '@workflow/world';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
-import { Trace } from './trace-viewer/types';
+import type { Trace } from './trace-viewer/types';
 
 const NewTraceViewer = ({
   run,

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

@@ -17,6 +17,7 @@ import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useToast } from '../lib/toast';
+import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
 import { ErrorBoundary } from './error-boundary';
 import {
   EntityDetailPanel,
@@ -36,12 +37,6 @@ import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
 } from './workflow-traces/trace-colors';
-import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
-import { NewTraceViewer } from './trace-viewer-new';
-import {
-  SidebarDataProvider,
-  type SidebarDataContextValue,
-} from './sidebar/sidebar-data-context';
 
 /**
  * While a run is live, continuously grow root.duration and rescale so the
@@ -861,39 +856,6 @@ export const WorkflowTraceViewer = ({
     [onSpanSelect]
   );
 
-  const sidebarData = useMemo<SidebarDataContextValue>(
-    () => ({
-      run,
-      events,
-      spanDetailData: spanDetailData ?? null,
-      spanDetailError,
-      spanDetailLoading,
-      onSpanSelect: handleSpanSelect,
-      onStreamClick,
-      onWakeUpSleep,
-      onLoadEventData,
-      onResolveHook,
-      encryptionKey,
-      onDecrypt,
-      isDecrypting,
-    }),
-    [
-      run,
-      events,
-      spanDetailData,
-      spanDetailError,
-      spanDetailLoading,
-      handleSpanSelect,
-      onStreamClick,
-      onWakeUpSleep,
-      onLoadEventData,
-      onResolveHook,
-      encryptionKey,
-      onDecrypt,
-      isDecrypting,
-    ]
-  );
-
   const handleSelectionChange = useCallback(
     (info: SelectedSpanInfo | null) => {
       if (info) {
@@ -1004,9 +966,6 @@ export const WorkflowTraceViewer = ({
 
   return (
     <div className="relative w-full h-full flex flex-col">
-      <SidebarDataProvider value={sidebarData}>
-        <NewTraceViewer run={run} events={events} />
-      </SidebarDataProvider>
       {/* Timeline (takes remaining space) */}
       <div className="flex-1 min-w-0 relative">
         <TraceViewerContextProvider

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

@@ -6,9 +6,11 @@ import {
   EventListView,
   hydrateResourceIO,
   hydrateResourceIOWithKey,
+  NewTraceViewer,
+  type SidebarDataContextValue,
+  SidebarDataProvider,
   StreamViewer,
   stepEventsToStepEntity,
-  WorkflowTraceViewer,
 } from '@workflow/web-shared';
 import type { Event, WorkflowRun } from '@workflow/world';
 import {
@@ -18,7 +20,6 @@ import {
   List,
   Loader2,
   Lock,
-  Unlock,
 } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router';
@@ -42,20 +43,17 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '~/components/ui/breadcrumb';
-import { Button } from '~/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '~/components/ui/tooltip';
+import { useEventsListData } from '~/lib/client/hooks/use-events-list-data';
 import { mapRunToExecution } from '~/lib/flow-graph/graph-execution-mapper';
 import { useWorkflowGraphManifest } from '~/lib/flow-graph/use-workflow-graph';
 import { useStreamReader } from '~/lib/hooks/use-stream-reader';
-
 import { fetchEvent, getEncryptionKeyForRun } from '~/lib/rpc-client';
-
-import { useEventsListData } from '~/lib/client/hooks/use-events-list-data';
 import type { EnvMap } from '~/lib/types';
 import {
   cancelRun,
@@ -338,9 +336,6 @@ export function RunDetailView({
     loading,
     error,
     update,
-    loadMoreTraceData,
-    hasMoreTraceData,
-    isLoadingMoreTraceData,
   } = useWorkflowTraceViewerData(env, runId, { live: true });
 
   const run = runData ?? ({} as WorkflowRun);
@@ -418,6 +413,39 @@ export function RunDetailView({
     setSpanSelection(info);
   }, []);
 
+  const sidebarData = useMemo<SidebarDataContextValue>(
+    () => ({
+      run,
+      events: allEvents ?? [],
+      spanDetailData: spanDetailData ?? null,
+      spanDetailError,
+      spanDetailLoading,
+      onSpanSelect: handleSpanSelect,
+      onStreamClick: handleStreamClick,
+      onWakeUpSleep: handleWakeUpSleep,
+      onLoadEventData: handleLoadSidebarEventData,
+      onResolveHook: handleResolveHook,
+      encryptionKey: encryptionKey ?? undefined,
+      onDecrypt: handleDecrypt,
+      isDecrypting,
+    }),
+    [
+      run,
+      allEvents,
+      spanDetailData,
+      spanDetailError,
+      spanDetailLoading,
+      handleSpanSelect,
+      handleStreamClick,
+      handleWakeUpSleep,
+      handleLoadSidebarEventData,
+      handleResolveHook,
+      encryptionKey,
+      handleDecrypt,
+      isDecrypting,
+    ]
+  );
+
   // Fetch streams for this run
   const {
     streams,
@@ -741,26 +769,9 @@ export function RunDetailView({
             <TabsContent value="trace" className="mt-0 flex-1 min-h-0">
               <ErrorBoundary title="Failed to load trace viewer">
                 <div className="h-full">
-                  <WorkflowTraceViewer
-                    error={error}
-                    events={allEvents}
-                    run={run}
-                    isLoading={loading}
-                    spanDetailData={spanDetailData}
-                    spanDetailLoading={spanDetailLoading}
-                    spanDetailError={spanDetailError}
-                    onSpanSelect={handleSpanSelect}
-                    onStreamClick={handleStreamClick}
-                    onWakeUpSleep={handleWakeUpSleep}
-                    onResolveHook={handleResolveHook}
-                    onLoadEventData={handleLoadSidebarEventData}
-                    onLoadMoreSpans={loadMoreTraceData}
-                    hasMoreSpans={hasMoreTraceData}
-                    isLoadingMoreSpans={isLoadingMoreTraceData}
-                    encryptionKey={encryptionKey ?? undefined}
-                    onDecrypt={handleDecrypt}
-                    isDecrypting={isDecrypting}
-                  />
+                  <SidebarDataProvider value={sidebarData}>
+                    <NewTraceViewer run={run} events={allEvents ?? []} />
+                  </SidebarDataProvider>
                 </div>
               </ErrorBoundary>
             </TabsContent>