@@ -80,7 +80,14 @@ const INITIAL_PAYLOAD_TIMESTAMP = 0;
  * Intended to be mounted inside a scrollable container — the component
  * does not own its own scrollbar.
  */
-export function AgentView({ agentView }: { agentView: AgentViewAuth }) {
+export function AgentView({
+  agentView,
+  paused = false,
+}: {
+  agentView: AgentViewAuth;
+  /** Hidden: the streams keep reading, but the messages render once it's shown again. */
+  paused?: boolean;
+}) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -93,6 +100,7 @@ export function AgentView({ agentView }: { agentView: AgentViewAuth }) {
     envSlug: environment.slug,
     initialMessages: agentView.initialMessages,
     transcriptSeed: agentView.transcriptSeed,
+    paused,
   });
 
   // Sticky-bottom auto-scroll: walks up to find the inspector's scroll
@@ -245,6 +253,7 @@ function useAgentSessionMessages({
   envSlug,
   initialMessages,
   transcriptSeed,
+  paused,
 }: {
   sessionId: string;
   apiOrigin: string;
@@ -253,6 +262,7 @@ function useAgentSessionMessages({
   envSlug: string;
   initialMessages: UIMessage[];
   transcriptSeed?: TranscriptSeed;
+  paused: boolean;
 }): {
   messages: UIMessage[];
   hasEarlier: boolean;
@@ -316,8 +326,14 @@ function useAgentSessionMessages({
   const lastFlushAtRef = useRef<number>(0);
   const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const scheduleFlush = useRef<() => void>(() => {});
+  const pausedRef = useRef(paused);
+  const flushOnResumeRef = useRef(false);
 
   scheduleFlush.current = () => {
+    if (pausedRef.current) {
+      flushOnResumeRef.current = true;
+      return;
+    }
     if (pendingTimerRef.current !== null) return; // already scheduled
     const now = Date.now();
     const sinceLast = now - lastFlushAtRef.current;
@@ -329,6 +345,13 @@ function useAgentSessionMessages({
     }, delay);
   };
 
+  useEffect(() => {
+    pausedRef.current = paused;
+    if (paused || !flushOnResumeRef.current) return;
+    flushOnResumeRef.current = false;
+    scheduleFlush.current();
+  }, [paused]);
+
   useEffect(() => {
     const abort = new AbortController();
 
 
@@ -80,6 +80,7 @@ export function useRunTrace({
   canFetchPage,
   onLoadedSpans,
   retryKey,
+  paused = false,
 }: {
   run: RunTraceRun;
   trace: RunTraceInput;
@@ -119,6 +120,7 @@ export function useRunTrace({
     canFetchPage,
     onLoadedSpans,
     retryKey,
+    paused,
   });
 
   const traceIsTruncated = isTruncated || progressiveIsTruncated;
@@ -166,8 +168,10 @@ export function useRunTrace({
 
   // The callback's identity is unstable, so effects read it from a ref.
   const onRunDataStaleRef = useRef(onRunDataStale);
+  const pausedRef = useRef(paused);
   useEffect(() => {
     onRunDataStaleRef.current = onRunDataStale;
+    pausedRef.current = paused;
   });
 
   const streamedEvents = useEventSource(
@@ -207,7 +211,7 @@ export function useRunTrace({
   useRunStatusBackstop({
     enabled: live && liveTailEnabled && runDataUnfinished,
     statusPath,
-    shouldSkip: () => document.visibilityState === "hidden",
+    shouldSkip: () => document.visibilityState === "hidden" || pausedRef.current,
     onStatus: (data) => {
       if (data.isFinished || data.completedAt !== null) {
         // The reload alone won't refresh the tree if the span count didn't change.
 
@@ -30,6 +30,8 @@ type RunTraceSourceProps = {
   run: SessionTraceRun & { status: TaskRunStatus };
   load: SessionRunLoad;
   live: boolean;
+  /** The tab is hidden: live tails wait until it's shown again. */
+  paused: boolean;
   /** Errors only is on: a run that isn't fully loaded also reads its errors from the server. */
   errorsOnly: boolean;
   /** A deep-linked span: the first chunk includes it and its parents even past the first page. */
@@ -80,6 +82,7 @@ function RunTraceLive({
   run,
   load,
   live,
+  paused,
   errorsOnly,
   started,
   onSettle,
@@ -118,6 +121,7 @@ function RunTraceLive({
     onRunDataStale,
     readContext: "session",
     live,
+    paused,
     canFetchPage: (loaded) => askPage(run.friendlyId, loaded),
     onLoadedSpans: (loaded) => {
       if (mounted.current) onLoadedSpans(run.friendlyId, loaded);
 
@@ -6,7 +6,9 @@ import {
 } from "@heroicons/react/20/solid";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import {
+  createContext,
   useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useMemo,
@@ -108,6 +110,7 @@ import {
   RUNS_FILL_MAX,
   RUNS_PAGE_SIZE,
   type LoadedRuns,
+  type NewestPageReason,
   useSessionRunPages,
 } from "./useSessionRunPages";
 import { useSessionTraceSelection } from "./useSessionTraceSelection";
@@ -120,13 +123,19 @@ function isScrolledToBottom(element: HTMLElement) {
 // Like the run page: arrowing through rows doesn't write the URL on every step.
 const SELECTION_URL_DEBOUNCE_MS = 250;
 
+// Rows' clocks stop while the tab is hidden.
+const TraceTabActiveContext = createContext(true);
+
 /** The session's runs as one tree, newest page first, with earlier pages on request. */
 export function SessionTraceTab({
   runsPath,
   treeSnapshot,
+  active,
 }: {
   runsPath: string;
   treeSnapshot: ResizableSnapshot | undefined;
+  /** False while the Conversation tab is shown: the tab stays mounted but makes no requests. */
+  active: boolean;
 }) {
   // A run in the URL when the tab opens is a deep link: its page is read with the newest one.
   const { selection, setSelection } = useSessionTraceSelection();
@@ -149,24 +158,33 @@ export function SessionTraceTab({
   // New runs: re-read the newest page while the tab is visible (focus also refreshes it). It
   // lives here, not in the tree, so a session with no runs yet still picks up its first one.
   const [checkedAtMs, setCheckedAtMs] = useState(() => Date.now());
+  const { refreshNewest } = pages;
+  const checkNewest = useCallback(
+    (reason: NewestPageReason) => {
+      setCheckedAtMs(Date.now());
+      refreshNewest(reason);
+    },
+    [refreshNewest]
+  );
   useInterval({
     interval: newRunsPollIntervalMs(pages.runs ?? [], pages.totalCount, checkedAtMs),
-    disabled: pages.state.status !== "ready",
+    disabled: pages.state.status !== "ready" || !active,
     onLoad: false,
     onFocus: false,
-    callback: () => {
-      setCheckedAtMs(Date.now());
-      pages.refreshNewest("poll");
-    },
+    callback: () => checkNewest("poll"),
   });
   useInterval({
-    disabled: pages.state.status !== "ready",
+    disabled: pages.state.status !== "ready" || !active,
     onLoad: false,
-    callback: () => {
-      setCheckedAtMs(Date.now());
-      pages.refreshNewest("focus");
-    },
+    callback: () => checkNewest("focus"),
   });
+  // Shown again after Conversation: check at once instead of waiting for the next poll.
+  const wasActive = useRef(active);
+  useEffect(() => {
+    const shown = active && !wasActive.current;
+    wasActive.current = active;
+    if (shown && pages.state.status === "ready") checkNewest("focus");
+  }, [active, pages.state.status, checkNewest]);
 
   if (pages.state.status === "loading") {
     return (
@@ -199,23 +217,26 @@ export function SessionTraceTab({
   }
 
   return (
-    <SessionTraceTree
-      runs={pages.runs}
-      view={pages.view}
-      totalCount={pages.totalCount}
-      canLoadEarlier={pages.canLoadEarlier}
-      loadingEarlier={pages.loadingEarlier}
-      earlierError={pages.earlierError}
-      onLoadEarlier={pages.loadEarlier}
-      olderLoadBusy={pages.olderLoadBusy}
-      fillingRunFriendlyId={pages.fillingRunFriendlyId}
-      fillFailedRunFriendlyId={pages.fillFailedRunFriendlyId}
-      onFillHole={pages.fillHole}
-      onRunDataStale={pages.refreshNewest}
-      checkedAtMs={checkedAtMs}
-      treeSnapshot={treeSnapshot}
-      notice={showRunNotFound ? "That run isn't in this session." : undefined}
-    />
+    <TraceTabActiveContext.Provider value={active}>
+      <SessionTraceTree
+        runs={pages.runs}
+        view={pages.view}
+        totalCount={pages.totalCount}
+        canLoadEarlier={pages.canLoadEarlier}
+        loadingEarlier={pages.loadingEarlier}
+        earlierError={pages.earlierError}
+        onLoadEarlier={pages.loadEarlier}
+        olderLoadBusy={pages.olderLoadBusy}
+        fillingRunFriendlyId={pages.fillingRunFriendlyId}
+        fillFailedRunFriendlyId={pages.fillFailedRunFriendlyId}
+        onFillHole={pages.fillHole}
+        onRunDataStale={pages.refreshNewest}
+        checkedAtMs={checkedAtMs}
+        treeSnapshot={treeSnapshot}
+        notice={showRunNotFound ? "That run isn't in this session." : undefined}
+        active={active}
+      />
+    </TraceTabActiveContext.Provider>
   );
 }
 
@@ -238,6 +259,7 @@ function SessionTraceTree({
   checkedAtMs,
   treeSnapshot,
   notice,
+  active,
 }: {
   runs: SessionTraceRun[];
   view: LoadedRuns["view"];
@@ -255,6 +277,7 @@ function SessionTraceTree({
   checkedAtMs: number;
   treeSnapshot: ResizableSnapshot | undefined;
   notice: string | undefined;
+  active: boolean;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const parentRef = useRef<HTMLDivElement>(null);
@@ -335,6 +358,9 @@ function SessionTraceTree({
     loadsRef.current = sessionRunLoadsReducer(loadsRef.current, action);
     reactDispatchLoads(action);
   }, []);
+  useEffect(() => {
+    dispatchLoads({ type: "paused", paused: !active });
+  }, [active, dispatchLoads]);
   const onSettle = useCallback(
     (runFriendlyId: string, loadId: number, outcome: SessionRunLoadOutcome) =>
       dispatchLoads({ type: "settle", runFriendlyId, loadId, outcome }),
@@ -411,7 +437,11 @@ function SessionTraceTree({
   // Only the live run's scale moves with the clock; the rest are fixed at page load.
   const [openedAtMs] = useState(() => Date.now());
   const [nowMs, setNowMs] = useState(openedAtMs);
-  useInterval({ interval: 1_000, disabled: !liveRunId, callback: () => setNowMs(Date.now()) });
+  useInterval({
+    interval: 1_000,
+    disabled: !liveRunId || !active,
+    callback: () => setNowMs(Date.now()),
+  });
   const settledScales = useMemo(() => {
     const scales = new Map<string, TraceTimelineScale>();
     for (const run of runs) {
@@ -869,6 +899,7 @@ function SessionTraceTree({
             run={{ ...run, status: run.status }}
             load={load}
             live={run.friendlyId === newestRunId}
+            paused={!active}
             errorsOnly={filter.errorsOnly}
             selectedSpanId={
               deepLink?.kind === "span" && deepLink.runFriendlyId === run.friendlyId
@@ -1018,8 +1049,9 @@ function SessionTraceTree({
       </ResizablePanelGroup>
       <div className="flex items-center justify-between gap-2 border-t border-grid-dimmed px-4">
         <div className="flex items-center gap-4 overflow-hidden">
+          {/* Shortcuts listen on the document, so `inert` on the hidden tab doesn't stop them. */}
           <KeyboardShortcuts
-            enabled
+            enabled={active}
             onExpandAll={expandAll}
             onCollapseAll={collapseAll}
             onToggleLevel={toggleLevel}
@@ -1450,8 +1482,13 @@ function RunLoadStatus({
 
 // Only the live run counts up; an older unfinished run shows when it started instead.
 function RunDurationLabel({ run, isLive }: { run: SessionTraceRun; isLive: boolean }) {
+  const active = useContext(TraceTabActiveContext);
   const [nowMs, setNowMs] = useState(() => Date.now());
-  useInterval({ interval: 1_000, disabled: !isLive, callback: () => setNowMs(Date.now()) });
+  useInterval({
+    interval: 1_000,
+    disabled: !isLive || !active,
+    callback: () => setNowMs(Date.now()),
+  });
 
   const duration = runDuration(run, nowMs);
   if (!duration) return run.status && !isFinalRunStatus(run.status) ? <>Queued</> : null;
 
@@ -62,6 +62,8 @@ export type SessionRunLoads = {
   budget: number;
   /** How often the budget freed collapsed runs or cut one off, for analytics. */
   budgetHits: { freed: number; cutOff: number };
+  /** The tab is hidden: queued runs wait, runs already loading finish. */
+  paused: boolean;
 };
 
 export type SessionRunLoadsAction =
@@ -87,7 +89,9 @@ export type SessionRunLoadsAction =
   /** Retry a failed run: in place when some of its spans are on screen, else from the start. */
   | { type: "retry"; runFriendlyId: string }
   /** Frees runs back to idle, cancelling a fetch in flight (its late settle won't match). */
-  | { type: "release"; runFriendlyIds: string[]; forBudget?: boolean };
+  | { type: "release"; runFriendlyIds: string[]; forBudget?: boolean }
+  /** The tab was hidden or shown again. */
+  | { type: "paused"; paused: boolean };
 
 /** What to do before a run fetches its next page. */
 type PageDecision =
@@ -174,6 +178,7 @@ export function createSessionRunLoads(
     newestRunId: undefined,
     budget,
     budgetHits: { freed: 0, cutOff: 0 },
+    paused: false,
   };
 }
 
@@ -343,6 +348,11 @@ export function sessionRunLoadsReducer(
         action.forBudget ? freeForBudget(current, released) : withoutLoads(current, released)
       );
     }
+    case "paused": {
+      if (current.paused === action.paused) return current;
+      const next = { ...current, paused: action.paused };
+      return action.paused ? next : startQueued(next);
+    }
   }
 }
 
@@ -464,6 +474,7 @@ function withoutLoads(current: SessionRunLoads, runFriendlyIds: string[]): Sessi
 }
 
 function startQueued(current: SessionRunLoads): SessionRunLoads {
+  if (current.paused) return current;
   let inFlight = inFlightCount(current);
   if (inFlight >= MAX_CONCURRENT_RUN_LOADS || current.queue.length === 0) return current;