Back to Langfuse

Session detail ownership

web/src/components/session/README.md

3.222.01.6 KB
Original Source

Session detail ownership

index.tsx owns session queries, header actions, filters, saved views, and the feature-flagged choice between the existing card layout and Modern Session.

Render boundaries

  • TraceRow.tsx: legacy trace card and lazy-load boundary.
  • TraceEventsRow.tsx: events-backed trace content for card and Modern Session feed surfaces.
  • ModernSession.tsx: minimap, scroll-spy derivation, smooth navigation, and the continuous virtualized feed.
  • SessionVirtualizedRow.tsx + useStableVirtualRowMeasurement.ts: translated DOM-safe dynamic row measurement.
  • SessionObservationIO.tsx: bounded observation payload rendering and the bridge into IOPreview full/conversation modes.

Modern Session prepares each events-backed observation once inside its narrow row container and passes the parsed I/O plus ChatML result through IOPreview. The existing card surface keeps its lazy parser path.

State

sessionDetailStore.ts is a per-page store. It owns loaded trace IDs, correction visibility, inline-tool visibility, and system-prompt visibility so virtual row remounts do not reset view state. On the events-backed session page, modernSession is a user Feature Preview flag; disabled users retain the card layout without a page-level layout control. The preview toggle is disabled unless Fast (Preview) selects this events-backed page.

Server/query state remains in tRPC and React Query. Active Modern Session state is derived from TanStack Virtual's current scroll offset unless the user explicitly selects a minimap item that cannot reach the feed's top edge. User scrolling restores scroll-spy ownership; no effect mirrors either state.