@@ -18,6 +18,8 @@ export type TraceStatusInput = {
   missingAnchor: boolean;
   loadFailed: boolean;
   isLiveReloading: boolean;
+  /** False when this view doesn't follow the run live, e.g. a session's older runs. */
+  live: boolean;
   liveTailEnabled: boolean;
   maximumLiveReloadingSetting: number;
 };
@@ -26,7 +28,7 @@ export type TraceStatusInput = {
 export function getTraceStatus(input: TraceStatusInput): TraceStatus {
   // The run row and the tree can disagree for a moment; either one saying "done" wins.
   const finished = input.runFinished || input.rootSpanStatus !== "executing";
-  const liveStopped = !finished && !input.isLiveReloading;
+  const liveStopped = input.live && !finished && !input.isLiveReloading;
 
   if (input.loadFailed && !input.isTruncated) {
     const paused = liveStopped ? " Live updates are paused until it loads." : "";
@@ -50,6 +52,9 @@ export function getTraceStatus(input: TraceStatusInput): TraceStatus {
   }
   if (finished) return { kind: "allLoaded" };
   if (input.isLiveReloading) return { kind: "live" };
+  if (!input.live) {
+    return { kind: "liveOff", reason: "Live updates only follow the latest run." };
+  }
 
   if (!input.liveTailEnabled) {
     return {
 
@@ -72,6 +72,7 @@ export function useRunTrace({
   maximumLiveReloadingSetting,
   onRunDataStale,
   readContext,
+  live = true,
 }: {
   run: RunTraceRun;
   trace: RunTraceInput;
@@ -80,6 +81,8 @@ export function useRunTrace({
   onRunDataStale: () => void;
   /** Sent with every chunk read; "session" bounds completed runs' reads. */
   readContext?: "session";
+  /** False turns off the stream, tail and status polling, e.g. for a session's older runs. */
+  live?: boolean;
 }) {
   const organization = useOrganization();
   const project = useProject();
@@ -125,13 +128,15 @@ export function useRunTrace({
 
   // Tail path (flag on): delta-fetch per signal, skipped for truncated or partly
   // failed trees. Legacy path: revalidate per signal, with the old size cap.
-  const isLiveReloading = liveTailEnabled
-    ? shouldLiveReload(run, rootSpanStatus) && !traceIsTruncated && !loadFailed
-    : shouldLiveReloadLegacy({
-        eventCount: events.length,
-        maximumLiveReloadingSetting,
-        run,
-      });
+  const isLiveReloading =
+    live &&
+    (liveTailEnabled
+      ? shouldLiveReload(run, rootSpanStatus) && !traceIsTruncated && !loadFailed
+      : shouldLiveReloadLegacy({
+          eventCount: events.length,
+          maximumLiveReloadingSetting,
+          run,
+        }));
 
   const traceStatus = getTraceStatus({
     // Same rule as live reload: only a finished time means the run is done.
@@ -142,6 +147,7 @@ export function useRunTrace({
     missingAnchor,
     loadFailed,
     isLiveReloading,
+    live,
     liveTailEnabled,
     maximumLiveReloadingSetting,
   });
@@ -177,17 +183,17 @@ export function useRunTrace({
   useEffect(() => {
     const previous = prevRootSpanRef.current;
     prevRootSpanRef.current = { runId: run.friendlyId, status: rootSpanStatus };
-    if (!liveTailEnabled || previous.runId !== run.friendlyId) return;
+    if (!live || !liveTailEnabled || previous.runId !== run.friendlyId) return;
     if (previous.status === "executing" && rootSpanStatus !== "executing" && runDataUnfinished) {
       onRunDataStaleRef.current();
     }
-  }, [run.friendlyId, rootSpanStatus, liveTailEnabled, runDataUnfinished]);
+  }, [run.friendlyId, rootSpanStatus, live, liveTailEnabled, runDataUnfinished]);
 
   // Tail path backstop: reload when the run starts and when it finishes, even if the
   // tail missed the root's final row. Polls whatever the stream is doing, and keeps
   // reloading until the page data agrees (a reload can read a lagging replica).
   useRunStatusBackstop({
-    enabled: liveTailEnabled && runDataUnfinished,
+    enabled: live && liveTailEnabled && runDataUnfinished,
     statusPath,
     shouldSkip: () => document.visibilityState === "hidden",
     onStatus: (data) => {
@@ -205,19 +211,20 @@ export function useRunTrace({
     pollMs: RUN_STATUS_BACKSTOP_POLL_MS,
   });
 
-  // SSE is off during the background load, so pick up rows written meanwhile. Runs
-  // even if live reload already stopped, as long as the run finished recently.
+  // SSE is off during the background load (and while not live), so pick up rows written
+  // meanwhile. Runs even if live reload already stopped, as long as the run finished recently.
   const sinceFinished = msSinceFinished(run);
   const recentlyActive = sinceFinished === null || sinceFinished < LIVE_TAIL_UNRESOLVED_ROOT_MS;
-  const prevIsCompleteRef = useRef(isComplete);
+  const catchUpReady = live && isComplete;
+  const prevCatchUpReadyRef = useRef(catchUpReady);
   useEffect(() => {
-    const wasComplete = prevIsCompleteRef.current;
-    prevIsCompleteRef.current = isComplete;
-    if (!liveTailEnabled || wasComplete || !isComplete) return;
+    const wasReady = prevCatchUpReadyRef.current;
+    prevCatchUpReadyRef.current = catchUpReady;
+    if (!liveTailEnabled || wasReady || !catchUpReady) return;
     if (recentlyActive && !traceIsTruncated && !loadFailed) {
       tailLive();
     }
-  }, [isComplete, recentlyActive, traceIsTruncated, loadFailed, liveTailEnabled, tailLive]);
+  }, [catchUpReady, recentlyActive, traceIsTruncated, loadFailed, liveTailEnabled, tailLive]);
 
   // Tail path: the inspector loads separately, so reload it when the tree changes. After
   // the background load, rebuilds come from the tail or a revalidate merge.
 
@@ -0,0 +1,147 @@
+import type { FlatTree, FlatTreeItem } from "~/components/primitives/TreeView/TreeView";
+import type { SessionTraceRun, SessionTraceSpan } from "./sessionTraceTypes";
+
+/** Quiet periods longer than this between two runs fold into one row. */
+export const GAP_FOLD_MS = 10 * 60_000;
+
+export type SessionTreeRow<TSpanData> =
+  | { kind: "session"; runCount: number }
+  | { kind: "loadEarlier"; count: number }
+  | { kind: "notLoaded"; count: number; olderRunFriendlyId: string; newerRunFriendlyId: string }
+  | { kind: "gap"; durationMs: number }
+  | { kind: "run"; run: SessionTraceRun; spansLoaded: boolean }
+  | { kind: "span"; runFriendlyId: string; spanId: string; span: TSpanData };
+
+type SessionTreeNode<TSpanData> = FlatTreeItem<SessionTreeRow<TSpanData>>;
+
+const SESSION_NODE_ID = "session";
+const LOAD_EARLIER_NODE_ID = "loadEarlier";
+
+export function runNodeId(runFriendlyId: string) {
+  return `run:${runFriendlyId}`;
+}
+
+export function spanNodeId(runFriendlyId: string, spanId: string) {
+  return `${runFriendlyId}:${spanId}`;
+}
+
+/** Rows that only label the list: arrow keys skip them and they can't be selected. */
+export function isSelectableRow(row: SessionTreeRow<unknown>) {
+  return row.kind === "session" || row.kind === "run" || row.kind === "span";
+}
+
+/**
+ * One flat list for the whole session: the session row, then runs oldest first, each followed
+ * by its loaded spans. Runs can come from several pages; duplicates are merged by friendlyId,
+ * the later copy winning, and missing run numbers between pages become a "not loaded" row.
+ */
+export function buildSessionTree<TSpanData>({
+  runs,
+  totalCount,
+  spansByRun,
+}: {
+  runs: SessionTraceRun[];
+  totalCount: number;
+  /** Loaded events per run friendlyId, in trace order (parents before children). */
+  spansByRun: ReadonlyMap<string, SessionTraceSpan<TSpanData>[]>;
+}): FlatTree<SessionTreeRow<TSpanData>> {
+  const session: SessionTreeNode<TSpanData> = {
+    id: SESSION_NODE_ID,
+    children: [],
+    hasChildren: false,
+    level: 0,
+    data: { kind: "session", runCount: totalCount },
+  };
+  const tree: SessionTreeNode<TSpanData>[] = [session];
+
+  const addSessionChild = (id: string, data: SessionTreeRow<TSpanData>) => {
+    session.children.push(id);
+    const node: SessionTreeNode<TSpanData> = {
+      id,
+      parentId: SESSION_NODE_ID,
+      children: [],
+      hasChildren: false,
+      level: 1,
+      data,
+    };
+    tree.push(node);
+    return node;
+  };
+
+  const ordered = uniqueRunsOldestFirst(runs);
+  const oldest = ordered[0];
+  if (oldest && oldest.number > 1) {
+    addSessionChild(LOAD_EARLIER_NODE_ID, { kind: "loadEarlier", count: oldest.number - 1 });
+  }
+
+  let previous: SessionTraceRun | undefined;
+  for (const run of ordered) {
+    if (previous) {
+      const missing = run.number - previous.number - 1;
+      if (missing > 0) {
+        addSessionChild(`notLoaded:${run.friendlyId}`, {
+          kind: "notLoaded",
+          count: missing,
+          olderRunFriendlyId: previous.friendlyId,
+          newerRunFriendlyId: run.friendlyId,
+        });
+      } else {
+        const gapMs = quietGapMs(previous, run);
+        if (gapMs !== undefined && gapMs > GAP_FOLD_MS) {
+          addSessionChild(`gap:${run.friendlyId}`, { kind: "gap", durationMs: gapMs });
+        }
+      }
+    }
+
+    const spans = spansByRun.get(run.friendlyId);
+    const runNode = addSessionChild(runNodeId(run.friendlyId), {
+      kind: "run",
+      run,
+      spansLoaded: spans !== undefined,
+    });
+    if (spans) graftSpans(tree, runNode, run.friendlyId, spans);
+    previous = run;
+  }
+
+  session.hasChildren = session.children.length > 0;
+  return tree;
+}
+
+function uniqueRunsOldestFirst(runs: SessionTraceRun[]) {
+  const byId = new Map<string, SessionTraceRun>();
+  for (const run of runs) byId.set(run.friendlyId, run);
+  return [...byId.values()].sort((a, b) => a.number - b.number);
+}
+
+function quietGapMs(previous: SessionTraceRun, next: SessionTraceRun) {
+  if (!previous.finishedAt || !next.createdAt) return undefined;
+  return new Date(next.createdAt).getTime() - new Date(previous.finishedAt).getTime();
+}
+
+// The run's root span is hidden: the run row stands in for it, so its children move up to the run.
+function graftSpans<TSpanData>(
+  tree: SessionTreeNode<TSpanData>[],
+  runNode: SessionTreeNode<TSpanData>,
+  runFriendlyId: string,
+  spans: SessionTraceSpan<TSpanData>[]
+) {
+  const grafted = new Map<string, SessionTreeNode<TSpanData>>();
+
+  for (const span of spans) {
+    if (span.level === 0) continue;
+
+    const parent = (span.parentId && grafted.get(span.parentId)) || runNode;
+    const node: SessionTreeNode<TSpanData> = {
+      id: spanNodeId(runFriendlyId, span.id),
+      parentId: parent.id,
+      children: [],
+      hasChildren: false,
+      level: parent.level + 1,
+      data: { kind: "span", runFriendlyId, spanId: span.id, span: span.data },
+    };
+    parent.children.push(node.id);
+    parent.hasChildren = true;
+    grafted.set(span.id, node);
+    tree.push(node);
+  }
+}
@@ -0,0 +1,119 @@
+/** At most this many runs fetch their spans at once, first chunk and later pages included. */
+export const MAX_CONCURRENT_RUN_LOADS = 3;
+
+type RunTraceUnavailableReason =
+  | "legacyStore"
+  | "emergencyCap"
+  | "chunkUnsupported"
+  | "noWriteTimes"
+  | "anchorMissing"
+  | "noSpans";
+
+type SettledRunLoad =
+  | { state: "progressive" }
+  | { state: "empty" }
+  | { state: "unavailable"; reason: RunTraceUnavailableReason }
+  | { state: "logsDeleted" }
+  | { state: "error"; message: string };
+
+export type SessionRunLoad =
+  | { state: "idle" }
+  | { state: "queued" }
+  /** `loadId` identifies this fetch; a settle for an older one is ignored. */
+  | { state: "loading"; loadId: number }
+  /** First chunk shown, later pages still loading; keeps its slot. */
+  | { state: "paging"; loadId: number }
+  | SettledRunLoad;
+
+/** Where a run's read got to: paging after its first chunk, or how it ended. */
+type SessionRunLoadOutcome = { state: "paging" } | SettledRunLoad;
+
+export type SessionRunLoads = {
+  loads: Readonly<Record<string, SessionRunLoad>>;
+  /** Queued runs in request order. */
+  queue: readonly string[];
+  nextLoadId: number;
+};
+
+export type SessionRunLoadsAction =
+  | { type: "request"; runFriendlyIds: string[] }
+  | { type: "settle"; runFriendlyId: string; loadId: number; outcome: SessionRunLoadOutcome }
+  | { type: "release"; runFriendlyIds: string[] };
+
+const IDLE: SessionRunLoad = { state: "idle" };
+const REQUESTABLE = new Set<SessionRunLoad["state"]>(["idle", "error", "empty"]);
+
+function isInFlight(load: SessionRunLoad): load is Extract<SessionRunLoad, { loadId: number }> {
+  return load.state === "loading" || load.state === "paging";
+}
+
+export const initialSessionRunLoads: SessionRunLoads = { loads: {}, queue: [], nextLoadId: 1 };
+
+export function runLoad(loads: SessionRunLoads, runFriendlyId: string): SessionRunLoad {
+  return loads.loads[runFriendlyId] ?? IDLE;
+}
+
+/**
+ * Requested runs queue up and start loading as slots free, oldest request first. A run holds its
+ * slot until all its pages are in. Only idle, failed and empty runs can be requested. Release
+ * puts runs back to idle and frees their slot, cancelling a fetch in flight: its late settle no
+ * longer matches the run's load id.
+ */
+export function sessionRunLoadsReducer(
+  current: SessionRunLoads,
+  action: SessionRunLoadsAction
+): SessionRunLoads {
+  switch (action.type) {
+    case "request": {
+      const requested = [...new Set(action.runFriendlyIds)].filter((id) =>
+        REQUESTABLE.has(runLoad(current, id).state)
+      );
+      if (requested.length === 0) return current;
+
+      const loads = { ...current.loads };
+      for (const id of requested) loads[id] = { state: "queued" };
+      return startQueued({ ...current, loads, queue: [...current.queue, ...requested] });
+    }
+    case "settle": {
+      const load = runLoad(current, action.runFriendlyId);
+      if (!isInFlight(load) || load.loadId !== action.loadId) return current;
+
+      const next: SessionRunLoad =
+        action.outcome.state === "paging"
+          ? { state: "paging", loadId: load.loadId }
+          : action.outcome;
+      return startQueued({
+        ...current,
+        loads: { ...current.loads, [action.runFriendlyId]: next },
+      });
+    }
+    case "release": {
+      const released = new Set(action.runFriendlyIds.filter((id) => id in current.loads));
+      if (released.size === 0) return current;
+
+      const loads = { ...current.loads };
+      for (const id of released) delete loads[id];
+      return startQueued({
+        ...current,
+        loads,
+        queue: current.queue.filter((id) => !released.has(id)),
+      });
+    }
+  }
+}
+
+function startQueued(current: SessionRunLoads): SessionRunLoads {
+  let inFlight = Object.values(current.loads).filter(isInFlight).length;
+  if (inFlight >= MAX_CONCURRENT_RUN_LOADS || current.queue.length === 0) return current;
+
+  const loads = { ...current.loads };
+  const queue = [...current.queue];
+  let nextLoadId = current.nextLoadId;
+  while (inFlight < MAX_CONCURRENT_RUN_LOADS) {
+    const id = queue.shift();
+    if (!id) break;
+    loads[id] = { state: "loading", loadId: nextLoadId++ };
+    inFlight++;
+  }
+  return { loads, queue, nextLoadId };
+}