diff --git a/DEVTOOLS_SPEC.md b/DEVTOOLS_SPEC.md
index ee4ab004..5443db09 100644
--- a/DEVTOOLS_SPEC.md
+++ b/DEVTOOLS_SPEC.md
@@ -14,21 +14,81 @@ connection:
 
 - selects the newest live Figbird instance;
 - subscribes to `figbird.events`;
-- exposes current `inspect()`, `inspectRelational()`, and `mutating` snapshots;
-- buffers at most 1,000 events between panel polls; and
+- exposes current `inspect()`, `inspectCache()`, and `inspectRelational()` snapshots;
+- buffers at most 5,000 events between panel polls; and
 - expires after five seconds without a poll, removing every event subscription.
 
 The bridge serializes values before they cross the browser DevTools evaluation boundary.
 Errors retain their name and message, bigint values become strings, and circular values
-are marked instead of breaking the panel.
+are marked instead of breaking the panel. Event payloads and current query, cache, and
+relational values are depth-, item-, string-, and node-bounded before serialization.
+
+## Connection diagnostics
+
+Adapters may expose transport lifecycle events through Figbird's adapter-neutral
+connection observer. The Feathers adapter maps Socket.IO `connect`, `disconnect`,
+connection failure, and Manager reconnection state into this observer. A successful
+reconnection remains the single trigger for Figbird's active-query sweep.
+
+The panel retains these lifecycle events in the bounded event log and renders a
+**Connection** timeline lane. Red spans show detected offline intervals; the reconnect
+marker carries the final attempt count and transport so the refetch activity immediately
+after it can be correlated visually. Individual retry attempts are deliberately
+coalesced instead of filling the event buffer. Authentication payloads and tokens are
+never collected.
+
+## Causal traces
+
+Runtime events carry stable, session-local identifiers where one operation causes
+another. Realtime items and reconnections are trace roots. Cache updates retain the
+root identifier, reconciliation decisions record whether work started, coalesced,
+deferred while hidden, or became pending while inactive, and fetch attempts carry
+their reason, retry attempt, and causes. Fetch end/error events share a fetch ID with
+their start event.
+
+The event details pane assembles those events into one causal chain. Timeline fetch,
+realtime, and connection marks link into the same chain. This metadata is emitted only
+while something subscribes to `figbird.events`, and the extension continues to bound
+all retained history.
+
+The Events tab defaults to an **Activity** projection: one summary row per causal trace,
+mutation, or action. Supporting cache, reconciliation, retry, and sweep events remain in
+the row's details. **All events** exposes the complete raw instrumentation stream when a
+forensic view is needed.
+
+The Queries tab separates **Inactive queries** from the live view. These are still
+present in Figbird's cache but currently have no subscribers, so they remain inspectable
+until normal garbage collection removes them. **All queries** also includes bounded
+DevTools history for queries that are no longer present in Figbird.
+
+Read-only JSON values use a shared syntax-highlighted browser. The root is expanded so
+top-level properties are immediately visible, nested containers are individually
+collapsible, and **Expand all** opens the complete value. **Raw** switches to highlighted
+formatted JSON. The cache editor remains a JSON textarea because it accepts replacement
+input rather than only inspecting a value.
+
+## Cache inspection and editing
+
+The page bridge exposes a serialized projection of each service's normalized entities,
+their current query memberships, and complete-set materialization marker. The collector
+adds session-local provenance from cache-update events (fetch, realtime, mutation,
+optimistic projection, or devtools edit).
+
+An attached extension session may replace one existing entity in memory. The edited
+JSON must retain the same entity ID. Figbird reapplies locally decidable query results
+and replaces the value in query results that already contain the entity; it never sends
+a service mutation or server request. The panel labels this behavior explicitly and
+offers a one-step undo. Later fetches or realtime events may overwrite the edit.
 
 ## Extension architecture
 
 ```
 lib/core/devtoolsBridge.ts  weak instance registry and inspected-page session
 lib/devtools/collector.ts   bounded query, event, timeline, and write history
+lib/devtools/timelineTraceStore.ts  Timeline-owned causal summaries independent of Events
+lib/devtools/historicalValue.ts  retained-or-evicted diagnostic value contract
 lib/devtools/Devtools.tsx   shared React panel used only by the extension
-extensions/src/remote.ts    polling transport exposed as a collector-compatible source
+extensions/src/remote.ts    polling transport that publishes decoded collector frames
 extensions/src/protocol.ts  versioned snapshot envelope and wire-to-panel decoding
 extensions/src/inspection.ts  extension-side picker lifecycle and state
 extensions/src/inspectionPage.ts  injected element picker and React query-area scanner
@@ -61,6 +121,6 @@ to expire.
 
 ## Scope
 
-The panel is read-only apart from clearing its local history and starting or stopping the
-element picker. It does not persist history across reloads, edit application state, or
-provide time travel.
+The panel is read-only apart from clearing local history, controlling the element picker,
+and explicitly replacing an existing cached entity in memory. It does not persist history
+across reloads, write cache edits to the server, or provide time travel.
diff --git a/demo/src/components/DemoControls.tsx b/demo/src/components/DemoControls.tsx
index 4bc2560d..9d585675 100644
--- a/demo/src/components/DemoControls.tsx
+++ b/demo/src/components/DemoControls.tsx
@@ -25,6 +25,28 @@ export function DemoControls() {
     }
   }, [open])
 
+  useEffect(() => {
+    if (!demoState?.chaosArmed) return
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | null = null
+    const refresh = async () => {
+      try {
+        const state = await demoControl.getState()
+        if (cancelled) return
+        setDemoState(state)
+        if (!state.chaosArmed) return
+      } catch {
+        if (cancelled) return
+      }
+      timer = setTimeout(() => void refresh(), 500)
+    }
+    timer = setTimeout(() => void refresh(), 500)
+    return () => {
+      cancelled = true
+      if (timer) clearTimeout(timer)
+    }
+  }, [demoState?.chaosArmed])
+
   const applyDemoPatch = async (patch: Partial<DemoState>) => {
     if (!demoState) return
     const previous = demoState
diff --git a/demo/src/pages/IssueDetail/screen.tsx b/demo/src/pages/IssueDetail/screen.tsx
index 6a2ef28a..937b6f6e 100644
--- a/demo/src/pages/IssueDetail/screen.tsx
+++ b/demo/src/pages/IssueDetail/screen.tsx
@@ -190,23 +190,23 @@ queries: ({ params }) => [
       <TasksPanel key={issue.id} issueId={issue.id} users={users} />
 
       <div className='action-toolbar'>
-        <button className='link' onClick={reassign.run} disabled={busy}>
+        <button className='link' onClick={() => void reassign.run()} disabled={busy}>
           {reassign.pending ? 'Reassigning…' : 'Reassign'}
         </button>
         <Sep />
-        <button className='link' onClick={moveTeam.run} disabled={busy}>
+        <button className='link' onClick={() => void moveTeam.run()} disabled={busy}>
           {moveTeam.pending ? 'Moving…' : 'Move team'}
         </button>
         <Sep />
-        <button className='link' onClick={boost.run} disabled={busy}>
+        <button className='link' onClick={() => void boost.run()} disabled={busy}>
           {boost.pending ? 'Boosting…' : 'Boost'}
         </button>
         <Sep />
-        <button className='link' onClick={toggleStatus.run} disabled={busy}>
+        <button className='link' onClick={() => void toggleStatus.run()} disabled={busy}>
           {toggleStatus.pending ? 'Updating…' : issue.status === 'open' ? 'Close' : 'Reopen'}
         </button>
         <Sep />
-        <button className='link' onClick={addLabel.run} disabled={busy}>
+        <button className='link' onClick={() => void addLabel.run()} disabled={busy}>
           {addLabel.pending ? 'Adding…' : 'Add label'}
         </button>
         <Sep />
diff --git a/extensions/README.md b/extensions/README.md
index 09e6a022..082f9db5 100644
--- a/extensions/README.md
+++ b/extensions/README.md
@@ -65,7 +65,12 @@ The shared browser extension version lives in `extensions/version.json`. See
 ## QA checklist
 
 - The Figbird panel reports **Connected** after the page creates a Figbird instance.
-- Queries, relational details, events, the fetch timeline, and writes update live.
+- Queries, relational details, causal events, the fetch timeline, normalized cache, and writes update live.
+- The Queries visibility menu separates live, inactive cached, skipped, and historical queries.
+- Events opens in grouped Activity mode; All events exposes the bounded raw stream.
+- JSON details open as a collapsible highlighted tree, with Expand all and Raw views.
+- Selecting a linked timeline or cache-provenance mark opens its causal event chain.
+- Cache JSON edits rerender affected subscribers without issuing a server request and can be undone.
 - **Inspect** highlights the page and filters to queries owned by the selected area.
 - Reloading or navigating the inspected tab reconnects the panel.
 - Closing the panel for five seconds ends the page-side debug session.
diff --git a/extensions/src/panel.tsx b/extensions/src/panel.tsx
index 26f26eaa..f47b0260 100644
--- a/extensions/src/panel.tsx
+++ b/extensions/src/panel.tsx
@@ -1,34 +1,72 @@
 import { useEffect, useMemo, useSyncExternalStore } from 'react'
 import { createRoot } from 'react-dom/client'
 import { FigbirdDevtoolsPanel } from '../../lib/devtools/Devtools.js'
-import { createCollector } from '../../lib/devtools/collector.js'
+import { createRemoteCollector } from '../../lib/devtools/collector.js'
 import { PANEL_VISIBILITY_CALLBACK, type DevtoolsPanelWindow } from './panelVisibility.js'
 import { ExtensionSession } from './remote.js'
 
+interface DevtoolsNavigationEvent {
+  addListener(listener: (url: string) => void): void
+  removeListener(listener: (url: string) => void): void
+}
+
+declare const chrome: { devtools: { network: { onNavigated: DevtoolsNavigationEvent } } }
+
 function Panel() {
   const session = useMemo(() => new ExtensionSession(), [])
-  const collector = useMemo(() => createCollector(session.figbird, { heartbeatMs: 0 }), [session])
+  const collector = useMemo(() => createRemoteCollector(), [])
+  const cacheEditor = useMemo(() => ({ update: session.editCacheEntity }), [session])
   const status = useSyncExternalStore(session.subscribeStatus, session.getStatus, session.getStatus)
 
   useEffect(() => {
     const panelWindow = window as DevtoolsPanelWindow
-    const setVisible = (visible: boolean) => {
-      if (visible) session.start()
-      else session.stop()
+    let documentVisible = document.visibilityState !== 'hidden'
+    let hostVisible = true
+    let running = false
+    const applyVisibility = () => {
+      const visible = documentVisible && hostVisible
+      if (visible === running) return
+      running = visible
+      if (visible) {
+        session.start()
+      } else {
+        session.stop()
+      }
+    }
+    const updateFromDocument = () => {
+      documentVisible = document.visibilityState !== 'hidden'
+      applyVisibility()
     }
-    const updateFromDocument = () => setVisible(document.visibilityState !== 'hidden')
-    panelWindow[PANEL_VISIBILITY_CALLBACK] = setVisible
-    updateFromDocument()
+    panelWindow[PANEL_VISIBILITY_CALLBACK] = visible => {
+      hostVisible = visible
+      applyVisibility()
+    }
+    applyVisibility()
     document.addEventListener('visibilitychange', updateFromDocument)
     return () => {
       document.removeEventListener('visibilitychange', updateFromDocument)
       delete panelWindow[PANEL_VISIBILITY_CALLBACK]
       session.stop()
+      collector.reset()
     }
+  }, [collector, session])
+
+  useEffect(() => {
+    const resetForNavigation = () => session.resetForNavigation()
+    chrome.devtools.network.onNavigated.addListener(resetForNavigation)
+    return () => chrome.devtools.network.onNavigated.removeListener(resetForNavigation)
   }, [session])
 
+  useEffect(() => session.subscribeReset(() => collector.reset()), [collector, session])
+  useEffect(() => session.subscribeRead(frame => collector.ingest(frame)), [collector, session])
+
   return (
-    <FigbirdDevtoolsPanel collector={collector} inspection={session.inspection} status={status} />
+    <FigbirdDevtoolsPanel
+      collector={collector}
+      inspection={session.inspection}
+      cacheEditor={cacheEditor}
+      status={status}
+    />
   )
 }
 
diff --git a/extensions/src/protocol.ts b/extensions/src/protocol.ts
index fb14196d..07e51337 100644
--- a/extensions/src/protocol.ts
+++ b/extensions/src/protocol.ts
@@ -1,4 +1,5 @@
 import type { FigbirdEvent } from '../../lib/core/events.js'
+import { errorFromDetails } from '../../lib/core/errors.js'
 import type {
   DevtoolsBridgeConnection,
   DevtoolsWireEvent,
@@ -6,13 +7,14 @@ import type {
 } from '../../lib/core/devtoolsBridge.js'
 
 interface WireEnvelopeShape {
-  protocol: 2
+  protocol: 2 | 3
   version: number
   read: {
+    cache?: unknown[]
     events: unknown[]
-    inFlightMutations: unknown[]
-    queries: unknown[]
-    relational: unknown[]
+    inFlightMutations?: unknown[]
+    queries?: unknown[]
+    relational?: unknown[]
   } | null
 }
 
@@ -25,7 +27,7 @@ export function parseConnection(value: unknown): DevtoolsBridgeConnection | null
   if (value === null || value === undefined) return null
   if (
     !isRecord(value) ||
-    value.protocol !== 2 ||
+    (value.protocol !== 2 && value.protocol !== 3) ||
     typeof value.instanceCount !== 'number' ||
     typeof value.instanceId !== 'number' ||
     typeof value.sessionId !== 'string'
@@ -47,10 +49,10 @@ export function parseWireRead(value: unknown): ParsedWireRead | null {
   const envelope: unknown = JSON.parse(value)
   if (!isWireEnvelope(envelope)) throw new Error('Figbird returned an invalid devtools snapshot')
 
-  // Protocol 2 defines the collection item shapes. The envelope check guards the
+  // The bridge protocol defines the collection item shapes. The envelope check guards the
   // transport boundary without duplicating every domain type in the extension.
   return {
-    read: envelope.read as unknown as DevtoolsWireRead | null,
+    read: envelope.read ? (envelope.read as unknown as DevtoolsWireRead) : null,
     version: envelope.version,
   }
 }
@@ -59,9 +61,14 @@ export function decodeEvent(event: DevtoolsWireEvent): FigbirdEvent {
   switch (event.kind) {
     case 'fetch:error':
     case 'mutate:error':
-    case 'action:error': {
-      const error = new Error(event.error.message)
-      error.name = event.error.name
+    case 'action:error':
+    case 'connection:error': {
+      const error = errorFromDetails(event.error.details, event.error)
+      return { ...event, error }
+    }
+    case 'connection:reconnect-failed': {
+      if (!event.error) return event
+      const error = errorFromDetails(event.error.details, event.error)
       return { ...event, error }
     }
     default:
@@ -70,15 +77,22 @@ export function decodeEvent(event: DevtoolsWireEvent): FigbirdEvent {
 }
 
 function isWireEnvelope(value: unknown): value is WireEnvelopeShape {
-  if (!isRecord(value) || value.protocol !== 2 || typeof value.version !== 'number') return false
+  if (
+    !isRecord(value) ||
+    (value.protocol !== 2 && value.protocol !== 3) ||
+    typeof value.version !== 'number'
+  ) {
+    return false
+  }
   if (value.read === null) return true
   if (!isRecord(value.read)) return false
   const read = value.read
   return (
     Array.isArray(read.events) &&
-    Array.isArray(read.inFlightMutations) &&
-    Array.isArray(read.queries) &&
-    Array.isArray(read.relational)
+    (read.cache === undefined || Array.isArray(read.cache)) &&
+    (read.inFlightMutations === undefined || Array.isArray(read.inFlightMutations)) &&
+    (read.queries === undefined || Array.isArray(read.queries)) &&
+    (read.relational === undefined || Array.isArray(read.relational))
   )
 }
 
diff --git a/extensions/src/remote.ts b/extensions/src/remote.ts
index 4c003112..fe46d93c 100644
--- a/extensions/src/remote.ts
+++ b/extensions/src/remote.ts
@@ -1,13 +1,10 @@
-import type { FigbirdEvent, FigbirdEvents } from '../../lib/core/events.js'
-import type { InspectedQuery } from '../../lib/core/figbird.js'
-import type { InFlightMutation, MutationActivity } from '../../lib/core/mutationTracker.js'
-import type { InspectedRelationalQuery } from '../../lib/core/relationalQuery.js'
 import type { DevtoolsBridgeConnection, DevtoolsWireRead } from '../../lib/core/devtoolsBridge.js'
-import type { FigbirdLikeForDevtools } from '../../lib/devtools/collector.js'
+import type { RemoteCollectorFrame } from '../../lib/devtools/collector.js'
 import { ExtensionInspectionSession } from './inspection.js'
 import { decodeEvent, parseConnection, parseWireRead } from './protocol.js'
 
-const POLL_INTERVAL_MS = 250
+const ACTIVE_POLL_INTERVAL_MS = 250
+const IDLE_POLL_INTERVAL_MS = 1_000
 const BRIDGE_EXPRESSION = 'globalThis["__FIGBIRD_DEVTOOLS__"]'
 
 type Evaluate = (expression: string) => Promise<unknown>
@@ -21,107 +18,21 @@ interface InspectedWindowApi {
 
 declare const chrome: { devtools: { inspectedWindow: InspectedWindowApi } }
 
-class RemoteFigbird implements FigbirdLikeForDevtools {
-  #eventListeners = new Set<(event: FigbirdEvent) => void>()
-  #mutatingListeners = new Set<() => void>()
-  #mutations: readonly InFlightMutation[] = []
-  #pending: DevtoolsWireRead | null = null
-  #queries: InspectedQuery[] = []
-  #relational: InspectedRelationalQuery[] = []
-  #renderFrame: number | null = null
-  #stateListeners = new Set<(state: unknown) => void>()
-  #taskVersion = 0
-
-  readonly events: FigbirdEvents = {
-    subscribe: listener => {
-      this.#eventListeners.add(listener)
-      return () => this.#eventListeners.delete(listener)
-    },
-  }
-
-  readonly mutating: MutationActivity = {
-    getSnapshot: () => this.#mutations,
-    subscribe: listener => {
-      this.#mutatingListeners.add(listener)
-      return () => this.#mutatingListeners.delete(listener)
-    },
-  }
-
-  inspect(): InspectedQuery[] {
-    return this.#queries
-  }
-
-  inspectRelational(): InspectedRelationalQuery[] {
-    return this.#relational
-  }
-
-  subscribeToStateChanges(listener: (state: unknown) => void): () => void {
-    this.#stateListeners.add(listener)
-    return () => this.#stateListeners.delete(listener)
-  }
-
-  update(read: DevtoolsWireRead): void {
-    this.#pending = this.#pending
-      ? {
-          ...read,
-          events: [...this.#pending.events, ...read.events],
-        }
-      : read
-    if (this.#renderFrame !== null) return
-    if (typeof requestAnimationFrame === 'function') {
-      this.#renderFrame = requestAnimationFrame(() => {
-        this.#renderFrame = null
-        this.#flush()
-      })
-      return
-    }
-    const taskVersion = ++this.#taskVersion
-    queueMicrotask(() => {
-      if (taskVersion === this.#taskVersion) this.#flush()
-    })
-  }
-
-  cancelPending(): void {
-    this.#taskVersion++
-    this.#pending = null
-    if (this.#renderFrame !== null && typeof cancelAnimationFrame === 'function') {
-      cancelAnimationFrame(this.#renderFrame)
-    }
-    this.#renderFrame = null
-  }
-
-  #flush(): void {
-    const read = this.#pending
-    this.#pending = null
-    if (!read) return
-    this.#queries = read.queries.map(query => ({
-      ...query,
-      fetchedAt: query.fetchedAt,
-      query: query.query,
-    }))
-    this.#relational = read.relational
-    this.#mutations = read.inFlightMutations
-    for (const event of read.events) {
-      const decoded = decodeEvent(event)
-      for (const listener of this.#eventListeners) listener(decoded)
-    }
-    for (const listener of this.#stateListeners) listener(undefined)
-    for (const listener of this.#mutatingListeners) listener()
-  }
-}
-
 export class ExtensionSession {
-  readonly figbird = new RemoteFigbird()
   readonly inspection: ExtensionInspectionSession
 
   #connection: DevtoolsBridgeConnection | null = null
   #evaluate: Evaluate
   #generation = 0
+  #instanceId: number | null = null
   #polling = false
+  #running = false
   #status = 'Waiting for Figbird'
   #statusListeners = new Set<() => void>()
   #timer: ReturnType<typeof setInterval> | null = null
   #version: number | null = null
+  #resetListeners = new Set<() => void>()
+  #readListeners = new Set<(frame: RemoteCollectorFrame) => void>()
 
   constructor(evaluate: Evaluate = evaluateInspectedWindow) {
     this.#evaluate = evaluate
@@ -135,28 +46,74 @@ export class ExtensionSession {
     return () => this.#statusListeners.delete(listener)
   }
 
+  subscribeReset = (listener: () => void): (() => void) => {
+    this.#resetListeners.add(listener)
+    return () => this.#resetListeners.delete(listener)
+  }
+
+  subscribeRead = (listener: (frame: RemoteCollectorFrame) => void): (() => void) => {
+    this.#readListeners.add(listener)
+    return () => this.#readListeners.delete(listener)
+  }
+
+  editCacheEntity = async (
+    serviceName: string,
+    itemId: string | number,
+    item: unknown,
+  ): Promise<{ ok: boolean; error?: string; traceId?: number }> => {
+    try {
+      const sessionId = this.#connection?.sessionId
+      if (!sessionId) return { ok: false, error: 'Figbird is not connected' }
+      const expression = `${BRIDGE_EXPRESSION}?.editCacheEntityJson(${JSON.stringify(sessionId)},${JSON.stringify(serviceName)},${JSON.stringify(JSON.stringify(itemId))},${JSON.stringify(JSON.stringify(item))})`
+      const value = await this.#evaluate(expression)
+      if (typeof value !== 'string') return { ok: false, error: 'Invalid cache edit response' }
+      const parsed: unknown = JSON.parse(value)
+      if (!isCacheEditResult(parsed)) return { ok: false, error: 'Invalid cache edit response' }
+      return parsed
+    } catch (error) {
+      return { ok: false, error: error instanceof Error ? error.message : String(error) }
+    }
+  }
+
   start(): void {
-    if (this.#timer) return
+    if (this.#running) return
+    this.#running = true
     const generation = ++this.#generation
+    if (this.#polling) {
+      this.#schedulePoll(generation, ACTIVE_POLL_INTERVAL_MS)
+      return
+    }
     void this.#poll(generation)
-    this.#timer = setInterval(() => void this.#poll(generation), POLL_INTERVAL_MS)
   }
 
   stop(): void {
+    this.#running = false
     this.#generation++
-    if (this.#timer) clearInterval(this.#timer)
+    if (this.#timer) clearTimeout(this.#timer)
     this.#timer = null
     this.#version = null
-    this.figbird.cancelPending()
     this.inspection.stop()
     const sessionId = this.#connection?.sessionId
     this.#connection = null
     if (sessionId) void this.#disconnect(sessionId)
   }
 
+  resetForNavigation(): void {
+    const restart = this.#running
+    this.stop()
+    this.#instanceId = null
+    this.inspection.reset()
+    for (const listener of this.#resetListeners) listener()
+    if (restart) this.start()
+  }
+
   async #poll(generation: number): Promise<void> {
-    if (this.#polling) return
+    if (this.#polling) {
+      if (generation === this.#generation) this.#schedulePoll(generation, ACTIVE_POLL_INTERVAL_MS)
+      return
+    }
     this.#polling = true
+    let nextDelay = IDLE_POLL_INTERVAL_MS
     try {
       if (!this.#connection) {
         const connection = parseConnection(await this.#evaluate(`${BRIDGE_EXPRESSION}?.connect()`))
@@ -168,12 +125,13 @@ export class ExtensionSession {
           this.#setStatus('Waiting for Figbird')
           return
         }
+        if (this.#instanceId !== null && connection.instanceId !== this.#instanceId) {
+          this.inspection.reset()
+          for (const listener of this.#resetListeners) listener()
+        }
+        this.#instanceId = connection.instanceId
         this.#connection = connection
-        this.#setStatus(
-          connection.instanceCount > 1
-            ? `Connected · instance ${connection.instanceId} of ${connection.instanceCount}`
-            : 'Connected',
-        )
+        this.#setConnectedStatus(connection)
       }
 
       const sessionId = JSON.stringify(this.#connection.sessionId)
@@ -182,26 +140,48 @@ export class ExtensionSession {
       )
       if (generation !== this.#generation) return
       if (!poll) {
-        this.#connection = null
-        this.#version = null
+        this.#dropConnection()
         this.inspection.reset()
         this.#setStatus('Reconnecting')
         return
       }
       this.#version = poll.version
-      if (poll.read) this.figbird.update(poll.read)
+      this.#setConnectedStatus(this.#connection)
+      if (poll.read) {
+        nextDelay = ACTIVE_POLL_INTERVAL_MS
+        this.#publishRead(poll.read)
+      }
       await this.inspection.refresh()
     } catch {
       if (generation !== this.#generation) return
-      this.#connection = null
-      this.#version = null
       this.inspection.reset()
       this.#setStatus('Cannot inspect this page')
     } finally {
       this.#polling = false
+      if (generation === this.#generation) this.#schedulePoll(generation, nextDelay)
     }
   }
 
+  #schedulePoll(generation: number, delay: number): void {
+    this.#timer = setTimeout(() => {
+      this.#timer = null
+      void this.#poll(generation)
+    }, delay)
+  }
+
+  #dropConnection(): void {
+    this.#connection = null
+    this.#version = null
+  }
+
+  #setConnectedStatus(connection: DevtoolsBridgeConnection): void {
+    this.#setStatus(
+      connection.instanceCount > 1
+        ? `Connected · instance ${connection.instanceId} of ${connection.instanceCount}`
+        : 'Connected',
+    )
+  }
+
   async #disconnect(sessionId: string): Promise<void> {
     await this.#evaluate(`${BRIDGE_EXPRESSION}?.disconnect(${JSON.stringify(sessionId)})`).catch(
       () => {},
@@ -213,6 +193,33 @@ export class ExtensionSession {
     this.#status = status
     for (const listener of this.#statusListeners) listener()
   }
+
+  #publishRead(read: DevtoolsWireRead): void {
+    const frame: RemoteCollectorFrame = {
+      events: read.events.map(decodeEvent),
+      ...(read.queries
+        ? {
+            queries: read.queries.map(query => ({
+              ...query,
+              fetchedAt: query.fetchedAt,
+              query: query.query ?? {},
+            })),
+          }
+        : {}),
+      ...(read.cache ? { cache: read.cache } : {}),
+      ...(read.relational ? { relational: read.relational } : {}),
+    }
+    for (const listener of this.#readListeners) listener(frame)
+  }
+}
+
+function isCacheEditResult(
+  value: unknown,
+): value is { ok: boolean; error?: string; traceId?: number } {
+  if (typeof value !== 'object' || value === null || !('ok' in value)) return false
+  if (typeof value.ok !== 'boolean') return false
+  if ('error' in value && value.error !== undefined && typeof value.error !== 'string') return false
+  return !('traceId' in value) || value.traceId === undefined || typeof value.traceId === 'number'
 }
 
 function evaluateInspectedWindow(expression: string): Promise<unknown> {
diff --git a/lib/adapters/adapter.ts b/lib/adapters/adapter.ts
index b84e3548..9a92c1f1 100644
--- a/lib/adapters/adapter.ts
+++ b/lib/adapters/adapter.ts
@@ -61,6 +61,23 @@ export interface EventHandlers {
   removed: (item: unknown) => void
 }
 
+/** Transport lifecycle facts an adapter can expose for observability. */
+export type AdapterConnectionEvent =
+  | { type: 'connected'; transport?: string; connectionId?: string }
+  | {
+      type: 'disconnected'
+      reason?: string
+      reconnecting: boolean
+    }
+  | {
+      type: 'reconnected'
+      attempt?: number
+      transport?: string
+      connectionId?: string
+    }
+  | { type: 'error'; phase: 'connect' | 'reconnect'; error: Error }
+  | { type: 'reconnect-failed'; error?: Error }
+
 /** Service context supplied when the adapter evaluates a query locally. */
 export interface MatcherContext {
   serviceName: string
@@ -102,6 +119,9 @@ export interface Adapter<
   // reconnects after a period where realtime events may have been missed.
   subscribeToReconnect?(handler: () => void): () => void
 
+  /** Optional detailed transport lifecycle for devtools and diagnostics. */
+  subscribeToConnectionEvents?(handler: (event: AdapterConnectionEvent) => void): () => void
+
   /**
    * Read an item's id, or `undefined` when absent. Pure extraction — whether a
    * missing id is noteworthy is the store's call (it warns on event/fetch paths
diff --git a/lib/adapters/feathers.ts b/lib/adapters/feathers.ts
index bc7b6045..88ab77d6 100644
--- a/lib/adapters/feathers.ts
+++ b/lib/adapters/feathers.ts
@@ -1,5 +1,6 @@
 import type {
   Adapter,
+  AdapterConnectionEvent,
   EventHandlers,
   MatcherContext,
   PageCursor,
@@ -228,6 +229,23 @@ interface ReconnectEventSource {
   removeListener?: (event: string, listener: () => void) => void
 }
 
+type ConnectionEventListener = (...args: unknown[]) => void
+
+interface ConnectionEventSource {
+  on(event: string, listener: ConnectionEventListener): void
+  off?: (event: string, listener: ConnectionEventListener) => void
+  removeListener?: (event: string, listener: ConnectionEventListener) => void
+}
+
+interface SocketIoConnectionSource extends ConnectionEventSource {
+  active?: boolean
+  connected?: boolean
+  id?: string
+  io?: ConnectionEventSource & {
+    engine?: { transport?: { name?: string } }
+  }
+}
+
 /**
  * Typed Feathers service for a specific service in the schema.
  * Provides full type safety for CRUD methods and custom methods.
@@ -620,19 +638,129 @@ export class FeathersAdapter<TQuery = Record<string, unknown>> implements Adapte
   }
 
   subscribeToReconnect(handler: () => void): () => void {
-    const source = this.#getReconnectEventSource()
-    if (!source) return () => {}
+    return this.subscribeToConnectionEvents(event => {
+      if (event.type === 'reconnected') handler()
+    })
+  }
 
-    source.on('reconnect', handler)
-    return () => {
-      if (source.off) {
-        source.off('reconnect', handler)
+  subscribeToConnectionEvents(handler: (event: AdapterConnectionEvent) => void): () => void {
+    const socket = this.#getSocketIoConnectionSource()
+    if (!socket) {
+      const source = this.#getReconnectEventSource()
+      if (!source) return () => {}
+      const onReconnect = () => handler({ type: 'reconnected' })
+      source.on('reconnect', onReconnect)
+      return () => {
+        if (source.off) source.off('reconnect', onReconnect)
+        else source.removeListener?.('reconnect', onReconnect)
+      }
+    }
+
+    const manager = socket.io
+    let disconnected = false
+    let reconnectAttempt: number | undefined
+    let lastReconnectError: Error | undefined
+    const listeners: Array<{
+      source: ConnectionEventSource
+      event: string
+      listener: ConnectionEventListener
+    }> = []
+    const listen = (
+      source: ConnectionEventSource | undefined,
+      event: string,
+      listener: ConnectionEventListener,
+    ) => {
+      if (!source) return
+      source.on(event, listener)
+      listeners.push({ source, event, listener })
+    }
+    const connectionDetails = () => ({
+      ...(manager?.engine?.transport?.name ? { transport: manager.engine.transport.name } : {}),
+      ...(socket.id ? { connectionId: socket.id } : {}),
+    })
+
+    listen(socket, 'connect', () => {
+      if (disconnected || reconnectAttempt !== undefined) {
+        handler({
+          type: 'reconnected',
+          ...(reconnectAttempt === undefined ? {} : { attempt: reconnectAttempt }),
+          ...connectionDetails(),
+        })
+      } else {
+        handler({ type: 'connected', ...connectionDetails() })
+      }
+      disconnected = false
+      reconnectAttempt = undefined
+      lastReconnectError = undefined
+    })
+    listen(socket, 'disconnect', (reason: unknown) => {
+      disconnected = true
+      handler({
+        type: 'disconnected',
+        ...(typeof reason === 'string' ? { reason } : {}),
+        reconnecting: socket.active === true,
+      })
+    })
+    listen(socket, 'connect_error', (error: unknown) => {
+      const captured = connectionError(error)
+      if (disconnected || reconnectAttempt !== undefined || socket.active === true) {
+        lastReconnectError = captured
       } else {
-        source.removeListener?.('reconnect', handler)
+        handler({ type: 'error', phase: 'connect', error: captured })
+      }
+    })
+    listen(manager, 'reconnect_attempt', (attempt: unknown) => {
+      if (typeof attempt !== 'number') return
+      reconnectAttempt = attempt
+    })
+    listen(manager, 'reconnect_error', (error: unknown) => {
+      lastReconnectError = connectionError(error)
+    })
+    listen(manager, 'reconnect_failed', () =>
+      handler({
+        type: 'reconnect-failed',
+        ...(lastReconnectError ? { error: lastReconnectError } : {}),
+      }),
+    )
+    if (!manager) {
+      listen(socket, 'reconnect', (attempt: unknown) => {
+        handler({
+          type: 'reconnected',
+          ...(typeof attempt === 'number' ? { attempt } : {}),
+          ...connectionDetails(),
+        })
+        disconnected = false
+        reconnectAttempt = undefined
+        lastReconnectError = undefined
+      })
+    }
+
+    return () => {
+      for (const { source, event, listener } of listeners) {
+        if (source.off) source.off(event, listener)
+        else source.removeListener?.(event, listener)
       }
     }
   }
 
+  #getSocketIoConnectionSource(): SocketIoConnectionSource | null {
+    const candidates = [
+      (this.feathers as { io?: unknown }).io,
+      (this.feathers as { socket?: unknown }).socket,
+    ]
+    for (const candidate of candidates) {
+      if (
+        candidate &&
+        typeof candidate === 'object' &&
+        'on' in candidate &&
+        typeof candidate.on === 'function'
+      ) {
+        return candidate as SocketIoConnectionSource
+      }
+    }
+    return null
+  }
+
   #getReconnectEventSource(): ReconnectEventSource | null {
     const io = (this.feathers as { io?: { io?: unknown } }).io
     const candidates = [
@@ -751,3 +879,11 @@ export class FeathersAdapter<TQuery = Record<string, unknown>> implements Adapte
     return window
   }
 }
+
+function connectionError(value: unknown): Error {
+  if (value instanceof Error) return value
+  if (typeof value === 'object' && value !== null && 'message' in value) {
+    return new Error(String(value.message))
+  }
+  return new Error(String(value))
+}
diff --git a/lib/core/cappedBuffer.ts b/lib/core/cappedBuffer.ts
index 3c7a2bd3..50f5fbb0 100644
--- a/lib/core/cappedBuffer.ts
+++ b/lib/core/cappedBuffer.ts
@@ -13,15 +13,30 @@ export class CappedBuffer<T> {
     return this.#length
   }
 
-  push(item: T): void {
-    if (this.#capacity === 0) return
+  push(item: T): T | undefined {
+    if (this.#capacity === 0) return item
     const index = (this.#start + this.#length) % this.#capacity
+    const evicted = this.#length === this.#capacity ? this.#items[index] : undefined
     this.#items[index] = item
     if (this.#length < this.#capacity) {
       this.#length++
     } else {
       this.#start = (this.#start + 1) % this.#capacity
     }
+    return evicted
+  }
+
+  first(): T | undefined {
+    return this.#length === 0 ? undefined : this.#items[this.#start]
+  }
+
+  shift(): T | undefined {
+    if (this.#length === 0) return undefined
+    const item = this.#items[this.#start]
+    this.#items[this.#start] = undefined
+    this.#start = (this.#start + 1) % this.#capacity
+    this.#length--
+    return item
   }
 
   clear(): void {
diff --git a/lib/core/devtoolsBridge.ts b/lib/core/devtoolsBridge.ts
index 4ffd99dd..00b2a993 100644
--- a/lib/core/devtoolsBridge.ts
+++ b/lib/core/devtoolsBridge.ts
@@ -1,29 +1,49 @@
 import type { FigbirdEvent, FigbirdEvents } from './events.js'
-import type { InspectedQuery } from './figbird.js'
+import type { InspectedCacheService, InspectedQuery } from './figbird.js'
 import type { InspectedRelationalQuery } from './relationalQuery.js'
-import type { InFlightMutation, MutationActivity } from './mutationTracker.js'
+import type { InFlightMutation } from './mutationTracker.js'
 import { CappedBuffer } from './cappedBuffer.js'
+import { errorDetails } from './errors.js'
 
 const BRIDGE_KEY = '__FIGBIRD_DEVTOOLS__'
 const SESSION_TIMEOUT_MS = 5_000
-const EVENT_LIMIT = 1_000
+const EVENT_LIMIT = 5_000
+const STARTUP_CAPTURE_KEY = '__FIGBIRD_DEVTOOLS_CAPTURE_UNTIL__'
+const STARTUP_CAPTURE_TTL_MS = 10_000
+const PAYLOAD_MAX_DEPTH = 8
+const PAYLOAD_MAX_ARRAY_ITEMS = 200
+const PAYLOAD_MAX_OBJECT_PROPERTIES = 100
+const PAYLOAD_MAX_NODES = 2_000
+const PAYLOAD_MAX_STRING_CHARACTERS = 100_000
+const FRAME_MAX_NODES = 50_000
+const FRAME_MAX_STRING_CHARACTERS = 2_000_000
+let cachedStartupCaptureUntil = 0
 
 interface DevtoolsSource {
   events: FigbirdEvents
-  mutating: MutationActivity
   inspect(): InspectedQuery[]
+  inspectCache(): InspectedCacheService[]
   inspectRelational(): InspectedRelationalQuery[]
+  editCacheEntity(
+    serviceName: string,
+    itemId: string | number,
+    item: unknown,
+  ): { ok: boolean; error?: string; traceId?: number }
   subscribeToStateChanges(fn: (state: unknown) => void): () => void
 }
 
 export interface DevtoolsWireError {
   message: string
   name: string
+  details?: unknown
 }
 
-type ToWireEvent<E> = E extends { error: Error }
-  ? Omit<E, 'error'> & { error: DevtoolsWireError }
-  : E
+type ToWireEvent<E> = E extends unknown
+  ? 'error' extends keyof E
+    ? Omit<E, 'error'> &
+        (E extends { error: Error } ? { error: DevtoolsWireError } : { error?: DevtoolsWireError })
+    : E
+  : never
 
 export type DevtoolsWireEvent = ToWireEvent<FigbirdEvent>
 
@@ -35,35 +55,51 @@ export type DevtoolsWireQuery = Omit<InspectedQuery, 'fetchedAt' | 'query'> & {
 export interface DevtoolsBridgeConnection {
   instanceCount: number
   instanceId: number
-  protocol: 2
+  protocol: 2 | 3
   sessionId: string
 }
 
 export interface DevtoolsWireRead {
+  cache?: InspectedCacheService[]
   events: DevtoolsWireEvent[]
-  inFlightMutations: readonly InFlightMutation[]
-  queries: DevtoolsWireQuery[]
-  relational: InspectedRelationalQuery[]
+  inFlightMutations?: readonly InFlightMutation[]
+  queries?: DevtoolsWireQuery[]
+  relational?: InspectedRelationalQuery[]
 }
 
 export interface DevtoolsWireEnvelope {
-  protocol: 2
+  protocol: 3
   version: number
   read: DevtoolsWireRead | null
 }
 
 interface DevtoolsBridgeSession {
+  cacheDirty: boolean
   events: CappedBuffer<FigbirdEvent>
   expires: ReturnType<typeof setTimeout> | null
+  queriesDirty: boolean
+  relationalDirty: boolean
   source: DevtoolsSource
   unsubscribe: () => void
   version: number
 }
 
+interface StartupCapture {
+  events: CappedBuffer<FigbirdEvent>
+  expires: ReturnType<typeof setTimeout>
+  unsubscribe: () => void
+}
+
 interface DevtoolsPageBridge {
-  protocol: 2
+  protocol: 2 | 3
   connect(instanceId?: number): DevtoolsBridgeConnection | null
   disconnect(sessionId: string): void
+  editCacheEntityJson(
+    sessionId: string,
+    serviceName: string,
+    itemIdJson: string,
+    itemJson: string,
+  ): string
   readJson(sessionId: string, version: number | null): string | null
   register(source: DevtoolsSource): void
 }
@@ -100,28 +136,40 @@ function isPageBridge(value: unknown): value is DevtoolsPageBridge {
     typeof value === 'object' &&
     value !== null &&
     'protocol' in value &&
-    value.protocol === 2 &&
+    (value.protocol === 2 || value.protocol === 3) &&
     'register' in value &&
     typeof value.register === 'function' &&
     'connect' in value &&
     typeof value.connect === 'function' &&
     'readJson' in value &&
-    typeof value.readJson === 'function'
+    typeof value.readJson === 'function' &&
+    'editCacheEntityJson' in value &&
+    typeof value.editCacheEntityJson === 'function'
   )
 }
 
 function createPageBridge(): DevtoolsPageBridge {
   const instances = new Map<number, WeakRef<DevtoolsSource>>()
   const sessions = new Map<string, DevtoolsBridgeSession>()
+  const startupCaptures = new Map<number, StartupCapture>()
   let nextInstanceId = 1
   let nextSessionId = 1
 
-  const closeSession = (sessionId: string) => {
+  const closeSession = (sessionId: string): boolean => {
     const session = sessions.get(sessionId)
-    if (!session) return
+    if (!session) return false
     if (session.expires) clearTimeout(session.expires)
     session.unsubscribe()
     sessions.delete(sessionId)
+    return true
+  }
+
+  const closeStartupCapture = (instanceId: number) => {
+    const capture = startupCaptures.get(instanceId)
+    if (!capture) return
+    clearTimeout(capture.expires)
+    capture.unsubscribe()
+    startupCaptures.delete(instanceId)
   }
 
   const refreshExpiry = (sessionId: string, session: DevtoolsBridgeSession) => {
@@ -130,21 +178,35 @@ function createPageBridge(): DevtoolsPageBridge {
   }
 
   return {
-    protocol: 2,
+    protocol: 3,
 
     register(source) {
-      instances.set(nextInstanceId++, new WeakRef(source))
+      const instanceId = nextInstanceId++
+      instances.set(instanceId, new WeakRef(source))
+      const captureUntil = startupCaptureUntil()
+      if (captureUntil <= Date.now()) return
+      const events = new CappedBuffer<FigbirdEvent>(EVENT_LIMIT)
+      const unsubscribe = source.events.subscribe(event => events.push(event))
+      const expires = setTimeout(
+        () => closeStartupCapture(instanceId),
+        Math.max(0, captureUntil - Date.now()),
+      )
+      startupCaptures.set(instanceId, { events, expires, unsubscribe })
     },
 
     connect(instanceId) {
-      removeCollectedInstances(instances)
+      refreshStartupCaptureMarker()
+      removeCollectedInstances(instances, closeStartupCapture)
       const instance = resolveInstance(instances, instanceId)
       if (!instance) return null
       const [resolvedId, source] = instance
       const sessionId = `${Date.now().toString(36)}-${nextSessionId++}`
       const session: DevtoolsBridgeSession = {
+        cacheDirty: true,
         events: new CappedBuffer(EVENT_LIMIT),
         expires: null,
+        queriesDirty: true,
+        relationalDirty: true,
         source,
         unsubscribe: () => {},
         version: 1,
@@ -152,45 +214,98 @@ function createPageBridge(): DevtoolsPageBridge {
       const unsubscribers = [
         source.events.subscribe(event => {
           session.events.push(event)
+          if (event.kind === 'cache:updated') session.cacheDirty = true
+          session.version++
+        }),
+        source.subscribeToStateChanges(() => {
+          session.queriesDirty = true
+          session.relationalDirty = true
           session.version++
         }),
-        source.mutating.subscribe(() => session.version++),
-        source.subscribeToStateChanges(() => session.version++),
       ]
       session.unsubscribe = () => {
         for (const unsubscribe of unsubscribers) unsubscribe()
       }
+      const startupCapture = startupCaptures.get(resolvedId)
+      if (startupCapture) {
+        for (const event of startupCapture.events.toArray()) session.events.push(event)
+        closeStartupCapture(resolvedId)
+      }
       sessions.set(sessionId, session)
       refreshExpiry(sessionId, session)
       return {
         instanceCount: instances.size,
         instanceId: resolvedId,
-        protocol: 2,
+        protocol: 3,
         sessionId,
       }
     },
 
     disconnect(sessionId) {
-      closeSession(sessionId)
+      const closed = closeSession(sessionId)
+      if (closed && sessions.size === 0) {
+        clearStartupCaptureMarker()
+        for (const instanceId of startupCaptures.keys()) closeStartupCapture(instanceId)
+      }
+    },
+
+    editCacheEntityJson(sessionId, serviceName, itemIdJson, itemJson) {
+      const session = sessions.get(sessionId)
+      if (!session) return '{"ok":false,"error":"Devtools session expired"}'
+      refreshExpiry(sessionId, session)
+      try {
+        const itemId = JSON.parse(itemIdJson) as unknown
+        if (typeof itemId !== 'string' && typeof itemId !== 'number') {
+          return '{"ok":false,"error":"Entity ID must be a string or number"}'
+        }
+        const result = session.source.editCacheEntity(serviceName, itemId, JSON.parse(itemJson))
+        session.cacheDirty = true
+        session.queriesDirty = true
+        session.relationalDirty = true
+        session.version++
+        return JSON.stringify(result)
+      } catch (error) {
+        return JSON.stringify({
+          ok: false,
+          error: error instanceof Error ? error.message : String(error),
+        })
+      }
     },
 
     readJson(sessionId, version) {
       const session = sessions.get(sessionId)
       if (!session) return null
+      refreshStartupCaptureMarker()
       refreshExpiry(sessionId, session)
       if (version === session.version) {
         return `{"protocol":2,"version":${session.version},"read":null}`
       }
-      return serializeWireEnvelope({
-        protocol: 2,
+      const pendingEvents = session.events.toArray()
+      const frameBudget: PayloadBudget = {
+        nodes: FRAME_MAX_NODES,
+        stringCharacters: FRAME_MAX_STRING_CHARACTERS,
+      }
+      const serialized = serializeWireEnvelope({
+        protocol: 3,
         version: session.version,
         read: {
-          events: session.events.drain().map(toWireEvent),
-          inFlightMutations: session.source.mutating.getSnapshot(),
-          queries: session.source.inspect(),
-          relational: session.source.inspectRelational(),
+          events: pendingEvents.map(event => toWireEvent(event, frameBudget)),
+          ...(session.cacheDirty
+            ? { cache: sanitizeCache(session.source.inspectCache(), frameBudget) }
+            : {}),
+          ...(session.queriesDirty
+            ? { queries: sanitizeQueries(session.source.inspect(), frameBudget) }
+            : {}),
+          ...(session.relationalDirty
+            ? { relational: sanitizeRelational(session.source.inspectRelational(), frameBudget) }
+            : {}),
         },
       })
+      session.events.clear()
+      session.cacheDirty = false
+      session.queriesDirty = false
+      session.relationalDirty = false
+      return serialized
     },
   }
 }
@@ -211,26 +326,338 @@ function resolveInstance(
   return null
 }
 
-function removeCollectedInstances(instances: Map<number, WeakRef<DevtoolsSource>>): void {
+function removeCollectedInstances(
+  instances: Map<number, WeakRef<DevtoolsSource>>,
+  onRemove: (instanceId: number) => void,
+): void {
   for (const [id, reference] of instances) {
-    if (!reference.deref()) instances.delete(id)
+    if (reference.deref()) continue
+    instances.delete(id)
+    onRemove(id)
+  }
+}
+
+function startupCaptureUntil(): number {
+  if (cachedStartupCaptureUntil > Date.now()) return cachedStartupCaptureUntil
+  try {
+    if (typeof sessionStorage === 'undefined') return 0
+    const value = Number(sessionStorage.getItem(STARTUP_CAPTURE_KEY))
+    cachedStartupCaptureUntil = Number.isFinite(value) ? value : 0
+    return cachedStartupCaptureUntil
+  } catch {
+    return 0
   }
 }
 
-function toWireEvent(event: FigbirdEvent): DevtoolsWireEvent {
+function refreshStartupCaptureMarker(): void {
+  const currentTime = Date.now()
+  if (cachedStartupCaptureUntil - currentTime > STARTUP_CAPTURE_TTL_MS / 2) return
+  try {
+    if (typeof sessionStorage === 'undefined') return
+    cachedStartupCaptureUntil = currentTime + STARTUP_CAPTURE_TTL_MS
+    sessionStorage.setItem(STARTUP_CAPTURE_KEY, String(cachedStartupCaptureUntil))
+  } catch {
+    // Storage can be unavailable in sandboxed frames. Live collection still works.
+  }
+}
+
+function clearStartupCaptureMarker(): void {
+  cachedStartupCaptureUntil = 0
+  try {
+    if (typeof sessionStorage === 'undefined') return
+    sessionStorage.removeItem(STARTUP_CAPTURE_KEY)
+  } catch {
+    // Storage can be unavailable in sandboxed frames.
+  }
+}
+
+function toWireEvent(event: FigbirdEvent, frameBudget?: PayloadBudget): DevtoolsWireEvent {
   switch (event.kind) {
+    case 'fetch:start':
+      return event.params === undefined
+        ? event
+        : { ...event, params: sanitizeDevtoolsPayload(event.params, frameBudget) }
+    case 'realtime':
+      return event.item === undefined
+        ? event
+        : { ...event, item: sanitizeDevtoolsPayload(event.item, frameBudget) }
+    case 'cache:updated':
+      return {
+        ...event,
+        item: sanitizeDevtoolsPayload(event.item, frameBudget),
+        previousItem:
+          event.previousItem === null
+            ? null
+            : sanitizeDevtoolsPayload(event.previousItem, frameBudget),
+      }
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'action:start':
+      return event.args === undefined
+        ? event
+        : { ...event, args: sanitizeDevtoolsArgs(event.args, frameBudget) }
     case 'fetch:error':
     case 'mutate:error':
     case 'action:error':
+    case 'connection:error':
       return {
         ...event,
-        error: { message: event.error.message, name: event.error.name },
+        error: {
+          message: event.error.message,
+          name: event.error.name,
+          details: sanitizeDevtoolsPayload(errorDetails(event.error), frameBudget),
+        },
       }
+    case 'connection:reconnect-failed':
+      return event.error
+        ? {
+            ...event,
+            error: {
+              message: event.error.message,
+              name: event.error.name,
+              details: sanitizeDevtoolsPayload(errorDetails(event.error), frameBudget),
+            },
+          }
+        : event
     default:
       return event
   }
 }
 
+function sanitizeQueries(
+  queries: readonly InspectedQuery[],
+  frameBudget: PayloadBudget,
+): DevtoolsWireQuery[] {
+  return queries.map(query => ({
+    ...query,
+    query: sanitizeRecord(query.query ?? {}, frameBudget),
+    ...(query.data === undefined ? {} : { data: sanitizeDevtoolsPayload(query.data, frameBudget) }),
+  }))
+}
+
+function sanitizeCache(
+  cache: readonly InspectedCacheService[],
+  frameBudget: PayloadBudget,
+): InspectedCacheService[] {
+  return cache.map(service => ({
+    ...service,
+    entities: service.entities.map(entity => ({
+      ...entity,
+      value: sanitizeDevtoolsPayload(entity.value, frameBudget),
+    })),
+  }))
+}
+
+function sanitizeRelational(
+  relational: readonly InspectedRelationalQuery[],
+  frameBudget: PayloadBudget,
+): InspectedRelationalQuery[] {
+  return relational.map(query => ({
+    ...query,
+    ...(query.data === undefined ? {} : { data: sanitizeDevtoolsPayload(query.data, frameBudget) }),
+  }))
+}
+
+function sanitizeRecord(
+  value: Record<string, unknown>,
+  frameBudget: PayloadBudget,
+): Record<string, unknown> {
+  const sanitized = sanitizeDevtoolsPayload(value, frameBudget)
+  return typeof sanitized === 'object' && sanitized !== null && !Array.isArray(sanitized)
+    ? (sanitized as Record<string, unknown>)
+    : {}
+}
+
+interface PayloadBudget {
+  nodes: number
+  stringCharacters: number
+}
+
+function sanitizeDevtoolsArgs(
+  args: readonly unknown[],
+  frameBudget?: PayloadBudget,
+): readonly unknown[] {
+  const sanitized = sanitizeDevtoolsPayload(args, frameBudget)
+  return Array.isArray(sanitized) ? sanitized : ['[Payload truncated]']
+}
+
+function sanitizeDevtoolsPayload(value: unknown, frameBudget?: PayloadBudget): unknown {
+  const budget = {
+    nodes: Math.min(PAYLOAD_MAX_NODES, frameBudget?.nodes ?? PAYLOAD_MAX_NODES),
+    stringCharacters: Math.min(
+      PAYLOAD_MAX_STRING_CHARACTERS,
+      frameBudget?.stringCharacters ?? PAYLOAD_MAX_STRING_CHARACTERS,
+    ),
+  }
+  const initialNodes = budget.nodes
+  const initialStringCharacters = budget.stringCharacters
+  const sanitized = sanitizePayloadValue(value, 0, new Set<object>(), budget)
+  if (frameBudget) {
+    frameBudget.nodes = Math.max(0, frameBudget.nodes - (initialNodes - budget.nodes))
+    frameBudget.stringCharacters = Math.max(
+      0,
+      frameBudget.stringCharacters - (initialStringCharacters - budget.stringCharacters),
+    )
+  }
+  return sanitized
+}
+
+function sanitizePayloadValue(
+  value: unknown,
+  depth: number,
+  ancestors: Set<object>,
+  budget: PayloadBudget,
+): unknown {
+  if (typeof value === 'string') return boundedString(value, budget)
+  if (
+    value === null ||
+    typeof value === 'boolean' ||
+    typeof value === 'number' ||
+    typeof value === 'undefined'
+  ) {
+    return value
+  }
+  if (typeof value === 'bigint') return String(value)
+  if (typeof value === 'symbol')
+    return value.description ? `[Symbol ${value.description}]` : '[Symbol]'
+  if (typeof value === 'function') return value.name ? `[Function ${value.name}]` : '[Function]'
+  if (depth >= PAYLOAD_MAX_DEPTH) return '[Max depth]'
+  if (budget.nodes-- <= 0) return '[Payload truncated]'
+
+  const object = value as object
+  const hostDescription = describeHostObject(object)
+  if (hostDescription) return hostDescription
+  if (object instanceof Error) {
+    return {
+      message: boundedString(object.message, budget),
+      name: boundedString(object.name, budget),
+    }
+  }
+  if (object instanceof Date)
+    return Number.isNaN(object.valueOf()) ? '[Invalid Date]' : object.toISOString()
+  if (object instanceof RegExp) return String(object)
+  if (ancestors.has(object)) return '[Circular]'
+
+  ancestors.add(object)
+  try {
+    if (Array.isArray(object)) {
+      const itemCount = Math.min(object.length, PAYLOAD_MAX_ARRAY_ITEMS)
+      const result: unknown[] = []
+      for (let index = 0; index < itemCount; index++) {
+        result.push(sanitizePayloadValue(object[index], depth + 1, ancestors, budget))
+      }
+      if (object.length > itemCount) result.push(`[${object.length - itemCount} more items]`)
+      return result
+    }
+
+    const keys = safeEnumerableKeys(object)
+    const propertyCount = Math.min(keys.length, PAYLOAD_MAX_OBJECT_PROPERTIES)
+    const result: Record<string, unknown> = {}
+    for (let index = 0; index < propertyCount; index++) {
+      const key = keys[index]!
+      result[key] = sanitizePayloadValue(
+        safePropertyValue(object, key),
+        depth + 1,
+        ancestors,
+        budget,
+      )
+    }
+    if (keys.length > propertyCount) {
+      result['[truncated]'] = `${keys.length - propertyCount} more properties`
+    }
+    return result
+  } finally {
+    ancestors.delete(object)
+  }
+}
+
+function boundedString(value: string, budget: PayloadBudget): string {
+  const retained = Math.min(value.length, Math.max(0, budget.stringCharacters))
+  budget.stringCharacters -= retained
+  if (retained === value.length) return value
+  return `${value.slice(0, retained)}… [${value.length - retained} characters omitted]`
+}
+
+function describeHostObject(value: object): string | null {
+  const syntheticType = ownDataProperty(value, 'type')
+  if (typeof syntheticType === 'string' && ownDataProperty(value, 'nativeEvent') !== undefined) {
+    return `[SyntheticEvent ${syntheticType}]`
+  }
+
+  let tag: string
+  try {
+    tag = Object.prototype.toString.call(value).slice(8, -1)
+  } catch {
+    return '[Uninspectable object]'
+  }
+  try {
+    if (typeof Node !== 'undefined' && value instanceof Node) return `[${tag}]`
+    if (typeof Event !== 'undefined' && value instanceof Event) {
+      const type = safePropertyValue(value, 'type')
+      return typeof type === 'string' ? `[${tag} ${type}]` : `[${tag}]`
+    }
+  } catch {
+    return '[Uninspectable host object]'
+  }
+  if (tag === 'Window' || tag === 'Document' || tag === 'Node' || tag === 'Text') {
+    return `[${tag}]`
+  }
+  if (tag.endsWith('Element')) return `[${tag}]`
+  if (tag.endsWith('Event')) {
+    const type = safePropertyValue(value, 'type')
+    return typeof type === 'string' ? `[${tag} ${type}]` : `[${tag}]`
+  }
+  if (
+    tag === 'ArrayBuffer' ||
+    tag === 'SharedArrayBuffer' ||
+    (tag !== 'Array' && tag.endsWith('Array'))
+  ) {
+    const byteLength = safePropertyValue(value, 'byteLength')
+    return typeof byteLength === 'number' ? `[${tag} ${byteLength} bytes]` : `[${tag}]`
+  }
+  if (tag === 'Blob' || tag === 'File') {
+    const size = safePropertyValue(value, 'size')
+    const name = tag === 'File' ? safePropertyValue(value, 'name') : undefined
+    return `[${tag}${typeof name === 'string' ? ` ${name}` : ''}${typeof size === 'number' ? ` ${size} bytes` : ''}]`
+  }
+  if (
+    tag === 'Map' ||
+    tag === 'Set' ||
+    tag === 'WeakMap' ||
+    tag === 'WeakSet' ||
+    tag === 'Promise'
+  ) {
+    const size = safePropertyValue(value, 'size')
+    return `[${tag}${typeof size === 'number' ? `(${size})` : ''}]`
+  }
+  return null
+}
+
+function safeEnumerableKeys(value: object): string[] {
+  try {
+    return Object.keys(value)
+  } catch {
+    return []
+  }
+}
+
+function safePropertyValue(value: object, key: string): unknown {
+  try {
+    return (value as Record<string, unknown>)[key]
+  } catch (error) {
+    return `[Property threw: ${error instanceof Error ? error.message : String(error)}]`
+  }
+}
+
+function ownDataProperty(value: object, key: string): unknown {
+  try {
+    const descriptor = Object.getOwnPropertyDescriptor(value, key)
+    return descriptor && 'value' in descriptor ? descriptor.value : undefined
+  } catch {
+    return undefined
+  }
+}
+
 function serializeWireEnvelope(envelope: DevtoolsWireEnvelope): string {
   const ancestors: object[] = []
   const serialized = JSON.stringify(envelope, function (_key, value: unknown): unknown {
diff --git a/lib/core/errors.ts b/lib/core/errors.ts
index 89181c96..2d1ba38f 100644
--- a/lib/core/errors.ts
+++ b/lib/core/errors.ts
@@ -1,5 +1,98 @@
 type ItemId = string | number
 
+export interface ErrorDetails {
+  name: string
+  message: string
+  [property: string]: unknown
+}
+
+/** Preserve structured server failures while keeping the public error contract. */
+export function normalizeError(value: unknown): Error {
+  if (value instanceof Error) return value
+
+  const details = errorDetails(value)
+  const error = new Error(details.message)
+  error.name = details.name
+  applyErrorDetails(error, details)
+  return error
+}
+
+/** Convert an Error (including Feathers custom fields) into inspectable data. */
+export function errorDetails(value: unknown): ErrorDetails {
+  if (value instanceof Error) {
+    const details: ErrorDetails = {
+      name: value.name || 'Error',
+      message: value.message || String(value),
+    }
+    for (const key of errorPropertyNames(value)) {
+      if (key === 'name' || key === 'message' || key === 'stack') continue
+      details[key] = safeErrorProperty(value, key)
+    }
+    return details
+  }
+
+  if (isErrorRecord(value)) {
+    const name = typeof value.name === 'string' ? value.name : 'Error'
+    const message =
+      typeof value.message === 'string' && value.message
+        ? value.message
+        : typeof value.error === 'string' && value.error
+          ? value.error
+          : 'Request failed'
+    return { ...value, name, message }
+  }
+
+  if (typeof value === 'string') return { name: 'Error', message: value }
+  return { name: 'Error', message: 'Request failed', response: value }
+}
+
+/** Rebuild an Error after structured details have crossed the extension boundary. */
+export function errorFromDetails(
+  details: unknown,
+  fallback: { name: string; message: string },
+): Error {
+  const normalized = isErrorRecord(details)
+    ? errorDetails(details)
+    : { name: fallback.name, message: fallback.message }
+  const error = new Error(normalized.message)
+  error.name = normalized.name
+  applyErrorDetails(error, normalized)
+  return error
+}
+
+function applyErrorDetails(error: Error, details: ErrorDetails): void {
+  const target = error as Error & Record<string, unknown>
+  for (const [key, value] of Object.entries(details)) {
+    if (key === 'name' || key === 'message' || key === 'stack') continue
+    try {
+      target[key] = value
+    } catch {
+      // A custom Error subclass may expose a read-only property. Its core
+      // name/message still survive even when that one field cannot be restored.
+    }
+  }
+}
+
+function errorPropertyNames(error: Error): string[] {
+  try {
+    return [...new Set([...Object.getOwnPropertyNames(error), ...Object.keys(error)])]
+  } catch {
+    return []
+  }
+}
+
+function safeErrorProperty(error: Error, key: string): unknown {
+  try {
+    return (error as Error & Record<string, unknown>)[key]
+  } catch (propertyError) {
+    return `[Property threw: ${propertyError instanceof Error ? propertyError.message : String(propertyError)}]`
+  }
+}
+
+function isErrorRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
 /** A fetched item was removed by realtime while a consumer was viewing it. */
 export class ItemRemovedError extends Error {
   readonly itemId: ItemId
diff --git a/lib/core/events.ts b/lib/core/events.ts
index 0055160b..b25fd668 100644
--- a/lib/core/events.ts
+++ b/lib/core/events.ts
@@ -1,4 +1,5 @@
-import type { EventType } from './queryTypes.js'
+import type { EventType, QueryGraphRef, TraceCause } from './queryTypes.js'
+export type { QueryGraphRef, TraceCause } from './queryTypes.js'
 
 /**
  * Mutation method names (subset usable in observability events).
@@ -13,21 +14,34 @@ export type MutationMethod = 'create' | 'update' | 'patch' | 'remove'
 // oxlint-disable-next-line @typescript-eslint/no-empty-object-type
 export type MutationEventMethod = MutationMethod | (string & {})
 
+export type FetchReason = 'subscription' | 'manual' | 'reconcile' | 'retry' | 'follow-up'
+
+export interface CacheQueryEffect {
+  queryId: string
+  outcome: 'merged' | 'reconcile'
+}
+
 /**
  * Observability events emitted by a Figbird instance — the same signal a dev tool
  * panel or trace logger would want to subscribe to.
  *
- * Events are intentionally lightweight. Mutation and action starts carry their
- * original arguments so an attached devtool can inspect the write; no result or
- * cache diffs are emitted, and emit() drops everything when nothing is listening.
+ * Events are intentionally bounded by consumers. Realtime events and mutation/action
+ * starts carry their original payloads so an attached devtool can inspect what
+ * happened. Cache transitions may include before/after values for attached devtools,
+ * and emit() drops everything when nothing is listening.
  */
-export type FigbirdEvent =
+export type FigbirdEvent = (
   | {
       kind: 'fetch:start'
       serviceName: string
       method: 'find' | 'get'
       queryId: string
       generation: number
+      fetchId?: number
+      reason?: FetchReason
+      attempt?: number
+      causes?: readonly TraceCause[]
+      graph?: readonly QueryGraphRef[]
       resourceId?: string | number
       params?: unknown
     }
@@ -37,8 +51,10 @@ export type FigbirdEvent =
       method: 'find' | 'get'
       queryId: string
       generation: number
+      fetchId?: number
       durationMs: number
       itemCount: number
+      graph?: readonly QueryGraphRef[]
     }
   | {
       kind: 'fetch:error'
@@ -46,24 +62,81 @@ export type FigbirdEvent =
       method: 'find' | 'get'
       queryId: string
       generation: number
+      fetchId?: number
       durationMs: number
       error: Error
+      graph?: readonly QueryGraphRef[]
     }
   | {
       kind: 'reconcile:started'
       queryId: string
       serviceName: string
+      causes?: readonly TraceCause[]
+    }
+  | {
+      kind: 'reconcile:decision'
+      queryId: string
+      serviceName: string
+      decision: 'fetch-now' | 'coalesced' | 'deferred-hidden' | 'inactive'
+      causes?: readonly TraceCause[]
+    }
+  | {
+      kind: 'reconnect:sweep'
+      traceId?: number
+      phase: 'scheduled' | 'started'
+      delayMs: number
+      queryCount?: number
     }
   | {
       kind: 'realtime'
+      traceId?: number
       serviceName: string
       type: EventType
       itemId: string | number | undefined
+      item?: unknown
+    }
+  | {
+      kind: 'cache:updated'
+      traceId?: number
+      source: 'realtime' | 'mutation' | 'fetch' | 'optimistic' | 'devtools'
+      serviceName: string
+      type: EventType
+      itemId: string | number
+      item: unknown
+      previousItem: unknown | null
+      queryEffects: readonly CacheQueryEffect[]
     }
+  | {
+      kind: 'connection:connected'
+      traceId?: number
+      transport?: string
+      connectionId?: string
+    }
+  | {
+      kind: 'connection:disconnected'
+      traceId?: number
+      reason?: string
+      reconnecting: boolean
+    }
+  | {
+      kind: 'connection:reconnected'
+      traceId?: number
+      attempt?: number
+      transport?: string
+      connectionId?: string
+    }
+  | {
+      kind: 'connection:error'
+      traceId?: number
+      phase: 'connect' | 'reconnect'
+      error: Error
+    }
+  | { kind: 'connection:reconnect-failed'; traceId?: number; error?: Error }
   | {
       kind: 'mutate:start'
       /** Correlates the start/end/error/rollback events of one mutation. */
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       id?: string | number
@@ -74,6 +147,7 @@ export type FigbirdEvent =
       /** An unsent queued mutation was coalesced with newer arguments. */
       kind: 'mutate:update'
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       id?: string | number
@@ -83,6 +157,7 @@ export type FigbirdEvent =
   | {
       kind: 'mutate:end'
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       durationMs: number
@@ -92,6 +167,7 @@ export type FigbirdEvent =
   | {
       kind: 'mutate:error'
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       durationMs: number
@@ -102,6 +178,7 @@ export type FigbirdEvent =
   | {
       kind: 'mutate:rollback'
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       id?: string | number
@@ -128,6 +205,10 @@ export type FigbirdEvent =
       /** The captured failure — also available on the hook's `error` slot. */
       error: Error
     }
+) & {
+  /** Epoch timestamp captured at the event source, before deferred or bridged delivery. */
+  timestamp?: number
+}
 
 /**
  * Public surface for subscribing to Figbird's observability events.
@@ -144,6 +225,10 @@ export class FigbirdEventEmitter implements FigbirdEvents {
   }> = []
   #flushScheduled = false
 
+  get hasListeners(): boolean {
+    return this.#listeners.size > 0
+  }
+
   /**
    * Emission is deferred to a microtask (batched, order-preserving). Some emits
    * happen synchronously inside a React render (subscribing to a query can start a
@@ -155,7 +240,8 @@ export class FigbirdEventEmitter implements FigbirdEvents {
    */
   emit(event: FigbirdEvent): void {
     if (this.#listeners.size === 0) return
-    this.#queue.push({ event, recipients: [...this.#listeners] })
+    const timedEvent = event.timestamp === undefined ? { ...event, timestamp: Date.now() } : event
+    this.#queue.push({ event: timedEvent, recipients: [...this.#listeners] })
     if (this.#flushScheduled) return
     this.#flushScheduled = true
     queueMicrotask(() => {
diff --git a/lib/core/fetchRebase.ts b/lib/core/fetchRebase.ts
index 693f40f1..60adb9e3 100644
--- a/lib/core/fetchRebase.ts
+++ b/lib/core/fetchRebase.ts
@@ -1,9 +1,4 @@
-import {
-  entityKey,
-  type EntityKey,
-  type ItemId,
-  type ProcessedRealtimeEvent,
-} from './queryTypes.js'
+import { entityKey, type EntityKey, type ItemId, type ProcessedCacheEvent } from './queryTypes.js'
 
 /** Maximum retained events per service while one or more fetches are in flight. */
 export const MAX_FETCH_JOURNAL_EVENTS = 1024
@@ -14,7 +9,7 @@ interface ActiveFetch {
 }
 
 interface ServiceJournal {
-  events: ProcessedRealtimeEvent[]
+  events: ProcessedCacheEvent[]
   activeFetches: Map<number, ActiveFetch>
 }
 
@@ -24,7 +19,7 @@ export interface FetchJournalCursor {
 }
 
 export interface FetchJournalSnapshot {
-  readonly events: readonly ProcessedRealtimeEvent[]
+  readonly events: readonly ProcessedCacheEvent[]
   readonly overflowed: boolean
 }
 
@@ -88,7 +83,7 @@ export class FetchEventJournal {
     }
   }
 
-  record(events: readonly ProcessedRealtimeEvent[]): void {
+  record(events: readonly ProcessedCacheEvent[]): void {
     for (const event of events) {
       const journal = this.#services.get(event.serviceName)
       if (!journal) continue
@@ -126,8 +121,8 @@ export class FetchEventJournal {
 }
 
 export interface FetchRebasePlan {
-  readonly events: readonly ProcessedRealtimeEvent[]
-  readonly latestEventById: ReadonlyMap<EntityKey, ProcessedRealtimeEvent>
+  readonly events: readonly ProcessedCacheEvent[]
+  readonly latestEventById: ReadonlyMap<EntityKey, ProcessedCacheEvent>
   readonly itemIds: ReadonlySet<EntityKey>
 }
 
@@ -139,7 +134,7 @@ export function planFetchRebase({
   isItemStale,
 }: {
   responseItems: readonly unknown[]
-  journalEvents: readonly ProcessedRealtimeEvent[]
+  journalEvents: readonly ProcessedCacheEvent[]
   getId: (item: unknown) => ItemId | undefined
   isItemStale: (current: unknown, next: unknown) => boolean
 }): FetchRebasePlan {
@@ -149,7 +144,7 @@ export function planFetchRebase({
     if (itemId !== undefined) responseItemsById.set(entityKey(itemId), item)
   }
 
-  const latestJournalEventById = new Map<EntityKey, ProcessedRealtimeEvent>()
+  const latestJournalEventById = new Map<EntityKey, ProcessedCacheEvent>()
   for (const event of journalEvents) {
     latestJournalEventById.set(event.itemId, event)
   }
@@ -166,7 +161,7 @@ export function planFetchRebase({
   }
 
   const events = journalEvents.filter(event => !supersededItemIds.has(event.itemId))
-  const latestEventById = new Map<EntityKey, ProcessedRealtimeEvent>()
+  const latestEventById = new Map<EntityKey, ProcessedCacheEvent>()
   for (const event of events) {
     latestEventById.set(event.itemId, event)
   }
@@ -184,7 +179,7 @@ export type FetchResponseMode = 'entity' | 'projection' | 'snapshot'
 
 function overlayProjectionItem(
   responseItem: unknown,
-  event: ProcessedRealtimeEvent,
+  event: ProcessedCacheEvent,
 ): unknown | undefined {
   if (event.type === 'removed') return undefined
   if (
@@ -226,7 +221,7 @@ export function rebaseResponseData({
 }: {
   data: unknown
   mode: FetchResponseMode
-  latestEventById: ReadonlyMap<EntityKey, ProcessedRealtimeEvent>
+  latestEventById: ReadonlyMap<EntityKey, ProcessedCacheEvent>
   entities: ReadonlyMap<EntityKey, unknown>
   getId: (item: unknown) => ItemId | undefined
   isItemStale: (current: unknown, next: unknown) => boolean
diff --git a/lib/core/figbird.ts b/lib/core/figbird.ts
index d595f7e2..907f499e 100644
--- a/lib/core/figbird.ts
+++ b/lib/core/figbird.ts
@@ -29,17 +29,31 @@ import {
   type QueryBuilderResult,
 } from './queryBuilder.js'
 import { resolveQueryInput, type PreparedQuery, type QueryInput } from './queryDefinition.js'
-import { explainQuery, type ExplainReport, type QueryNodeClass } from './queryClassification.js'
+import {
+  explainQuery,
+  explainQueryNode,
+  isServerMaintained,
+  type ClassificationReason,
+  type ExplainReport,
+  type QueryNodeClass,
+} from './queryClassification.js'
 export type { ExplainNode, ExplainReport } from './queryClassification.js'
 import { QueryRef } from './queryRef.js'
 import {
   QueryStore,
+  type DevtoolsCacheEditResult,
+  type QueryFetchHistoryEntry,
   type ReconnectJitter,
   type RetryDelay,
   type VisibilitySource,
 } from './queryStore.js'
 
-export type { ReconnectJitter, RetryDelay, VisibilitySource } from './queryStore.js'
+export type {
+  QueryFetchHistoryEntry,
+  ReconnectJitter,
+  RetryDelay,
+  VisibilitySource,
+} from './queryStore.js'
 import {
   normalizeQueryConfig,
   queryOfParams,
@@ -287,10 +301,10 @@ export class Figbird<
   }
 
   /**
-   * Returns the entire internal state map keyed by service name — including the
-   * cached entities themselves, which `inspect()` deliberately omits. Debug-grade:
-   * internal shapes may change between versions; prefer `inspect()` for anything
-   * built to last.
+   * Returns the entire internal state map keyed by service name — including cached
+   * entities that are not part of a current query result. Debug-grade: internal
+   * shapes may change between versions; prefer `inspect()` for anything built to
+   * last.
    */
   getState(): Map<string, ServiceState<AdapterFindMeta<A>>> {
     return this.queryStore.getState()
@@ -507,7 +521,7 @@ export class Figbird<
     // While pinned, subsequent useQuery subscribers join the same ref. When everyone has
     // released and unsubscribed, RelationalQueryRef cleans up and evicts the cache entry.
     // A staleTime skips the SWR revalidation when the data is already fresh enough.
-    const unsub = ref.subscribe(() => {}, options ?? {})
+    const unsub = ref.subscribe(() => {}, { ...options, source: 'prepare' })
     return {
       key: ref.hash(),
       promise: ref.suspensePromise(),
@@ -558,7 +572,7 @@ export class Figbird<
 
     // The pin also carries the staleTime so a warm-in-store read within the window
     // skips the SWR revalidation instead of re-fetching.
-    const release = ref.subscribe(() => {}, { staleTime })
+    const release = ref.subscribe(() => {}, { staleTime, source: 'prefetch' })
     const timer = setTimeout(() => {
       this.#prefetches.delete(hash)
       release()
@@ -927,6 +941,15 @@ export class Figbird<
         const stats = this.queryStore.getQueryStats(query.queryId)
         const generation = this.queryStore.getQueryGeneration(query.queryId)
         if (generation === undefined) continue
+        const explanation =
+          query.desc.method === 'find'
+            ? explainQueryNode(q, {
+                server: query.config.server,
+                allPages: 'allPages' in query.config && query.config.allPages === true,
+                localOperators: locallySupportedOperators(this.adapter, serviceName),
+                snapshot: query.config.realtime === 'disabled',
+              })
+            : null
         rows.push({
           queryId: query.queryId,
           generation,
@@ -943,8 +966,17 @@ export class Figbird<
               }
             : {}),
           classification: query.classification,
+          classificationReasons: explanation?.reasons ?? [],
+          realtimeStrategy:
+            query.config.realtime === 'disabled'
+              ? 'manual'
+              : query.config.realtime === 'refetch' || isServerMaintained(query.classification)
+                ? 'refetch'
+                : 'merge',
+          skipped: query.config.skip === true,
           status: query.state.status,
           isFetching: query.state.isFetching,
+          data: query.state.data,
           itemCount: Array.isArray(query.state.data)
             ? query.state.data.length
             : query.state.data
@@ -956,12 +988,35 @@ export class Figbird<
           errorCount: stats?.errorCount ?? 0,
           ...(stats?.lastDurationMs !== undefined ? { lastDurationMs: stats.lastDurationMs } : {}),
           totalDurationMs: stats?.totalDurationMs ?? 0,
+          fetchHistory: stats?.history ?? [],
         })
       }
     }
     return rows
   }
 
+  /** Read-only normalized entity-cache projection for attached devtools. */
+  inspectCache(): InspectedCacheService[] {
+    return [...this.queryStore.getState()].map(([serviceName, service]) => ({
+      serviceName,
+      ...(service.materialized ? { materialized: service.materialized } : {}),
+      entities: [...service.entities].map(([id, value]) => ({
+        id,
+        value,
+        queryIds: [...(service.itemQueryIndex.get(id) ?? [])],
+      })),
+    }))
+  }
+
+  /** @internal Browser-devtools command; changes only the in-memory cache. */
+  editCacheEntity(
+    serviceName: string,
+    itemId: string | number,
+    item: unknown,
+  ): DevtoolsCacheEditResult {
+    return this.queryStore.editCacheEntity(serviceName, itemId, item)
+  }
+
   /**
    * Read-only grouping of active relational query refs and the store-level queries
    * each one currently owns. Entries exist while the interned ref is alive.
@@ -990,8 +1045,14 @@ export interface InspectedQuery {
   /** Native adapter page details. Offset pages remain visible in `query` as `$skip`/`$limit`. */
   page?: { request: PageRequest; info?: PageInfo }
   classification: QueryNodeClass | 'get'
+  classificationReasons?: ClassificationReason[]
+  realtimeStrategy?: 'merge' | 'refetch' | 'manual'
+  /** True when this entry was materialized with `skip: true`. */
+  skipped?: boolean
   status: 'loading' | 'success' | 'error'
   isFetching: boolean
+  /** Current result for this query. Debug-only and safe to inspect, not mutate. */
+  data?: unknown
   itemCount: number
   fetchedAt: number | undefined
   subscriberCount: number
@@ -999,4 +1060,18 @@ export interface InspectedQuery {
   errorCount: number
   lastDurationMs?: number
   totalDurationMs: number
+  /** Bounded, payload-free latency history used by attached developer tools. */
+  fetchHistory?: readonly QueryFetchHistoryEntry[]
+}
+
+export interface InspectedCacheEntity {
+  id: string
+  value: unknown
+  queryIds: string[]
+}
+
+export interface InspectedCacheService {
+  serviceName: string
+  materialized?: { queryId: string; fetchedAt: number }
+  entities: InspectedCacheEntity[]
 }
diff --git a/lib/core/mutationLanes.ts b/lib/core/mutationLanes.ts
index 8e385a33..992a8203 100644
--- a/lib/core/mutationLanes.ts
+++ b/lib/core/mutationLanes.ts
@@ -4,7 +4,8 @@ import {
   type ItemId,
   type MutationDescriptor,
   type ProcessedProjectionEvent,
-  type ProcessedRealtimeEvent,
+  type ProcessedServerEvent,
+  type TraceCause,
 } from './queryTypes.js'
 
 export const ABSENT = Symbol('figbird.absent')
@@ -13,6 +14,7 @@ export type ProjectedEntity = unknown | typeof ABSENT
 export interface MutationLaneEntry {
   desc: MutationDescriptor
   optimistic: boolean
+  cause?: TraceCause
 }
 
 /** Opaque identity for a lane; mutable lane state stays inside MutationLanes. */
@@ -40,7 +42,7 @@ export interface ProjectionChange {
 
 export interface AuthoritativeTransition {
   projection: ProjectionChange
-  event: ProcessedRealtimeEvent
+  event: ProcessedServerEvent
 }
 
 export type MutationOutcome = { ok: true; item: unknown } | { ok: false; error: Error }
@@ -48,7 +50,7 @@ export type MutationOutcome = { ok: true; item: unknown } | { ok: false; error:
 export interface LaneSettlement<TEntry extends MutationLaneEntry> {
   projection: ProjectionChange
   cancelled: TEntry[]
-  authoritativeEvent: ProcessedRealtimeEvent | null
+  authoritativeEvent: ProcessedServerEvent | null
 }
 
 export interface ReleasedLaneEffects {
@@ -160,7 +162,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
       const end = nextCreate === -1 ? state.entries.length : nextCreate
       cancelled = state.entries.splice(0, end)
     }
-    let authoritativeEvent: ProcessedRealtimeEvent | null = null
+    let authoritativeEvent: ProcessedServerEvent | null = null
 
     if (outcome.ok) {
       const type = MUTATION_EVENT_TYPE[entry.desc.method]
@@ -170,12 +172,14 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
       this.#setBase(state, type, outcome.item)
       if (eventItem !== null && eventItem !== undefined) {
         authoritativeEvent = {
-          origin: 'authoritative',
+          mode: 'server',
+          source: 'mutation',
           serviceName: state.serviceName,
           type,
           item: eventItem,
           previousItem,
           itemId: entityKey(state.id),
+          ...(entry.cause === undefined ? {} : { cause: entry.cause }),
         }
       }
     }
@@ -215,7 +219,8 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
     return {
       projection: this.#reproject(state),
       event: {
-        origin: 'authoritative',
+        mode: 'server',
+        source: 'realtime',
         serviceName: state.serviceName,
         type,
         item,
@@ -268,26 +273,29 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
       if (lane.serviceName !== serviceName || !lane.entries.some(entry => entry.optimistic))
         continue
       const previousItem = lane.base === ABSENT ? null : lane.base
+      const cause = [...lane.entries].reverse().find(entry => entry.optimistic)?.cause
       if (lane.visible === ABSENT) {
         if (!lane.lastPresent) continue
         events.push({
-          origin: 'projection',
+          mode: 'optimistic',
           serviceName,
           type: 'removed',
           item: lane.lastPresent,
           previousItem,
           itemId: entityKey(lane.id),
           mutationLaneKey: lane.key,
+          ...(cause === undefined ? {} : { cause }),
         })
       } else {
         events.push({
-          origin: 'projection',
+          mode: 'optimistic',
           serviceName,
           type: lane.base === ABSENT ? 'created' : 'patched',
           item: lane.visible,
           previousItem,
           itemId: entityKey(lane.id),
           mutationLaneKey: lane.key,
+          ...(cause === undefined ? {} : { cause }),
         })
       }
     }
diff --git a/lib/core/queryRef.ts b/lib/core/queryRef.ts
index 060ec9f1..c23359d7 100644
--- a/lib/core/queryRef.ts
+++ b/lib/core/queryRef.ts
@@ -2,9 +2,10 @@ import { createQueryId } from './queryIdentity.js'
 import type { AnySchema, Schema } from './schema.js'
 import type { QueryStore } from './queryStore.js'
 import type {
-  ProcessedRealtimeEvent,
+  ProcessedCacheEvent,
   QueryConfig,
   QueryDescriptor,
+  QueryExecutionOptions,
   QueryState,
 } from './queryTypes.js'
 
@@ -64,7 +65,7 @@ export class QueryRef<
    */
   subscribe(
     fn: (state: QueryState<T, TMeta>) => void,
-    options?: { staleTime?: number | undefined },
+    options?: QueryExecutionOptions,
   ): () => void {
     this.#queryStore.materialize(this)
     return this.#queryStore.subscribe<T>(this.#queryId, fn, options)
@@ -74,7 +75,7 @@ export class QueryRef<
    * Re-run the store's subscribe-time freshness check without adding a listener.
    * Relational refs use this when a stricter subscriber joins an already-live tree.
    */
-  ensureFresh(options?: { staleTime?: number | undefined }): void {
+  ensureFresh(options?: QueryExecutionOptions): void {
     this.#queryStore.materialize(this)
     this.#queryStore.ensureFresh(this.#queryId, options)
   }
@@ -86,9 +87,9 @@ export class QueryRef<
   }
 
   /** Triggers a refetch for this query. */
-  refetch(): void {
+  refetch(options?: Omit<QueryExecutionOptions, 'staleTime'>): void {
     this.#queryStore.materialize(this)
-    return this.#queryStore.refetch(this.#queryId)
+    return this.#queryStore.refetch(this.#queryId, undefined, options)
   }
 
   /** Route an event-driven refetch through the store's reconciliation gate. @internal */
@@ -98,7 +99,7 @@ export class QueryRef<
   }
 
   /** Apply a value-only update to an already-visible row. @internal */
-  applyVisibleEvent(event: ProcessedRealtimeEvent): void {
+  applyVisibleEvent(event: ProcessedCacheEvent): void {
     this.#queryStore.materialize(this)
     this.#queryStore.applyVisibleEvent(this.#queryId, event)
   }
diff --git a/lib/core/queryRoots.ts b/lib/core/queryRoots.ts
index 5f021876..278cb581 100644
--- a/lib/core/queryRoots.ts
+++ b/lib/core/queryRoots.ts
@@ -1,6 +1,6 @@
 import type { PageCursor, PageInfo } from '../adapters/adapter.js'
 import type { QueryRef } from './queryRef.js'
-import type { ProcessedRealtimeEvent, QueryState } from './queryTypes.js'
+import type { ProcessedCacheEvent, QueryGraphRef, QueryState } from './queryTypes.js'
 import type { AnySchema, Schema } from './schema.js'
 
 /** The relational engine's adapter-neutral view of its root rows. */
@@ -27,8 +27,8 @@ export interface RootSource {
   snapshot(): RootSnapshot
   metadata(): RootMetadata
   setStaleTime(staleTime: number): void
-  ensureFresh(staleTime?: number): void
-  refetch(): void
+  ensureFresh(staleTime?: number, graph?: QueryGraphRef): void
+  refetch(graph?: QueryGraphRef): void
   teardown(): void
   queryIds(): string[]
 }
@@ -56,7 +56,7 @@ export interface InspectedPagination {
 }
 
 export interface PaginatedRootSource extends RootSource {
-  loadMore(): void
+  loadMore(graph?: QueryGraphRef): void
   pagination(): RelationalPaginationState
   inspectPagination(): InspectedPagination
 }
@@ -84,13 +84,14 @@ export function subscribeAndSeed<
   onSuccess: (data: unknown[]) => void,
   onChange: () => void,
   staleTime = 0,
+  graph?: QueryGraphRef,
 ): () => void {
   const unsub = queryRef.subscribe(
     state => {
       if (state.status === 'success') onSuccess(state.data as unknown[])
       onChange()
     },
-    { staleTime },
+    { staleTime, graph },
   )
   const initial = queryRef.getSnapshot()
   if (initial?.status === 'success') onSuccess(initial.data as unknown[])
@@ -116,12 +117,14 @@ export class SingleQueryRoot<
     onRows,
     onChange,
     staleTime = 0,
+    graph,
   }: {
     queryRef: QueryRef<unknown[], unknown, S, TParams, TMeta, TQuery>
     isGet: boolean
     onRows: (rows: unknown[]) => void
     onChange: () => void
     staleTime?: number
+    graph?: QueryGraphRef
   }) {
     this.#queryRef = queryRef
     this.#isGet = isGet
@@ -130,6 +133,7 @@ export class SingleQueryRoot<
       data => onRows(this.#asRows(data)),
       onChange,
       staleTime,
+      graph,
     )
   }
 
@@ -172,14 +176,14 @@ export class SingleQueryRoot<
     }
   }
 
-  ensureFresh(staleTime?: number): void {
-    this.#queryRef.ensureFresh({ staleTime })
+  ensureFresh(staleTime?: number, graph?: QueryGraphRef): void {
+    this.#queryRef.ensureFresh({ staleTime, graph })
   }
 
   setStaleTime(_staleTime: number): void {}
 
-  refetch(): void {
-    this.#queryRef.refetch()
+  refetch(graph?: QueryGraphRef): void {
+    this.#queryRef.refetch({ graph })
   }
 
   teardown(): void {
@@ -253,6 +257,7 @@ export class PagedQueryRoot<
     cursorRealtime,
     realtime,
     staleTime = 0,
+    graph,
   }: {
     pageSize: number
     includeTotal: boolean
@@ -264,11 +269,12 @@ export class PagedQueryRoot<
     onRows: (rows: unknown[]) => void
     onChange: () => void
     cursorRealtime?: {
-      subscribe(fn: (event: ProcessedRealtimeEvent) => void): () => void
-      canKeepPrefix(event: ProcessedRealtimeEvent): boolean
+      subscribe(fn: (event: ProcessedCacheEvent) => void): () => void
+      canKeepPrefix(event: ProcessedCacheEvent): boolean
     }
     realtime: InspectedPagination['realtime']
     staleTime?: number
+    graph?: QueryGraphRef
   }) {
     this.#pageSize = pageSize
     this.#includeTotal = includeTotal
@@ -278,7 +284,7 @@ export class PagedQueryRoot<
     this.#onRows = onRows
     this.#onChange = onChange
     this.#staleTime = staleTime
-    this.#setupPage(0)
+    this.#setupPage(0, undefined, undefined, graph)
     if (cursorRealtime) {
       this.#cursorReconnectUnsub = this.#pageRefs[0]?.registerReconnectReconciliation() ?? null
       this.#cursorEventUnsub = cursorRealtime.subscribe(event => {
@@ -295,6 +301,7 @@ export class PagedQueryRoot<
     pageIndex: number,
     settle?: { onError: (error: Error) => void },
     after?: PageCursor,
+    graph?: QueryGraphRef,
   ): void {
     const queryRef = this.#makePageRef(pageIndex, after)
     this.#pageRefs.push(queryRef)
@@ -357,13 +364,13 @@ export class PagedQueryRoot<
         onState(state)
         this.#onChange()
       },
-      { staleTime: reconcile.phase === 'running' ? 0 : this.#staleTime },
+      { staleTime: reconcile.phase === 'running' ? 0 : this.#staleTime, graph },
     )
     this.#pageUnsubs.push(unsub)
     onState(queryRef.getSnapshot())
   }
 
-  loadMore(): void {
+  loadMore(graph?: QueryGraphRef): void {
     if (this.#reconcile.phase !== 'idle') return
     if (this.#isLoadingMore || !this.#hasMoreSticky || this.#pageRefs.length === 0) return
 
@@ -390,6 +397,7 @@ export class PagedQueryRoot<
         },
       },
       after,
+      graph,
     )
     this.#onChange()
   }
@@ -427,12 +435,12 @@ export class PagedQueryRoot<
     }
   }
 
-  ensureFresh(staleTime?: number): void {
+  ensureFresh(staleTime?: number, graph?: QueryGraphRef): void {
     if (this.#sequential) {
-      this.#pageRefs[0]?.ensureFresh({ staleTime })
+      this.#pageRefs[0]?.ensureFresh({ staleTime, graph })
       return
     }
-    for (const ref of this.#pageRefs) ref.ensureFresh({ staleTime })
+    for (const ref of this.#pageRefs) ref.ensureFresh({ staleTime, graph })
   }
 
   setStaleTime(staleTime: number): void {
@@ -474,13 +482,13 @@ export class PagedQueryRoot<
   }
 
   /** Manual refetch deliberately resets the cursor chain to page zero. */
-  refetch(): void {
+  refetch(graph?: QueryGraphRef): void {
     this.#reconcile = { phase: 'idle' }
     this.#dropFollowupPages()
     this.#hasMoreSticky = true
     this.#isLoadingMore = false
     this.#loadMoreError = null
-    this.#pageRefs[0]?.refetch()
+    this.#pageRefs[0]?.refetch({ graph })
     this.#onChange()
   }
 
diff --git a/lib/core/queryStore.ts b/lib/core/queryStore.ts
index 724b7e9e..176853a3 100644
--- a/lib/core/queryStore.ts
+++ b/lib/core/queryStore.ts
@@ -7,7 +7,8 @@ import {
 import type { AnySchema, Schema } from './schema.js'
 import type { QueryRef } from './queryRef.js'
 import { isEphemeralQuery } from './queryIdentity.js'
-import { FigbirdEventEmitter } from './events.js'
+import { type FigbirdEventEmitter, type FetchReason, type TraceCause } from './events.js'
+import { QueryTelemetry } from './queryTelemetry.js'
 import { MutationTracker } from './mutationTracker.js'
 import { GatedMutationAttempt } from './gatedMutationAttempt.js'
 import {
@@ -62,15 +63,18 @@ import {
   type ItemMatcher,
   type MutationDescriptor,
   type ProcessedProjectionEvent,
-  type ProcessedRealtimeEvent,
+  type ProcessedCacheEvent,
   type Query,
   type QueryConfig,
   type QueryDescriptor,
+  type QueryExecutionOptions,
+  type QueryGraphRef,
   type QueryState,
   type QueuedEvent,
   type ServiceState,
 } from './queryTypes.js'
 import { defaultRetryDelay, resolveRetryDelay } from './retryDelay.js'
+import { normalizeError } from './errors.js'
 
 /**
  * Where the store learns whether the tab is visible. Injectable for tests and
@@ -96,6 +100,13 @@ const DEFAULT_RETRIES = 3
 type StoreResponse<TMeta> =
   QueryResponse<unknown, TMeta | undefined> | PageResponse<unknown[], TMeta>
 
+type MutationTraceCause = Extract<TraceCause, { kind: 'mutation' }> & { mutationId: number }
+
+interface MutationTrackingContext {
+  mutationId: number
+  cause?: MutationTraceCause
+}
+
 function resolveCreateOptimisticItem(desc: CreateMutationDescriptor): unknown {
   const { optimistic } = desc
   return optimistic == null || typeof optimistic === 'boolean' ? desc.data : optimistic
@@ -110,12 +121,13 @@ interface MutationTrackingEntry {
 }
 
 interface MutationTrackingHooks<T> {
-  onSuccess?: (result: T) => void
-  onError?: (error: Error, mutationId: number) => void
+  onSuccess?: (result: T, context: MutationTrackingContext) => void
+  onError?: (error: Error, context: MutationTrackingContext) => void
 }
 
 interface TrackedMutation<T> {
   mutationId: number
+  cause?: MutationTraceCause
   promise: Promise<T>
 }
 
@@ -124,16 +136,25 @@ interface QueuedMutation {
   args: unknown[]
   optimistic: boolean
   attempt: GatedMutationAttempt
+  cause?: MutationTraceCause
 }
 
 interface AppliedEventEffect {
-  event: ProcessedRealtimeEvent
+  event: ProcessedCacheEvent
   reconcileQueryIds: Set<string>
+  queryEffects?: Map<string, 'merged' | 'reconcile'>
+  observabilityOnly?: boolean
 }
 
 interface PublishedEventEffects {
   reconcileQueryIds: Set<string>
-  refetchService: boolean
+  reconcileCauses: Map<string, TraceCause[]>
+}
+
+interface FetchContext {
+  reason: Exclude<FetchReason, 'retry'>
+  causes?: TraceCause[]
+  graph?: QueryGraphRef[]
 }
 
 type LaneAuthoritativeAcceptance =
@@ -144,6 +165,23 @@ export interface QueryFetchStats {
   errorCount: number
   lastDurationMs?: number
   totalDurationMs: number
+  history: QueryFetchHistoryEntry[]
+}
+
+export interface QueryFetchHistoryEntry {
+  fetchId: number
+  startedAt: number
+  durationMs: number
+  ok: boolean
+  reason: FetchReason
+}
+
+export const QUERY_FETCH_HISTORY_LIMIT = 50
+
+export interface DevtoolsCacheEditResult {
+  ok: boolean
+  error?: string
+  traceId?: number
 }
 
 function documentVisibility(): VisibilitySource {
@@ -167,13 +205,13 @@ export class QueryStore<
   TQuery = Record<string, unknown>,
 > {
   #adapter: Adapter<TParams, TMeta, TQuery>
-  #events: FigbirdEventEmitter
+  #telemetry: QueryTelemetry
   #mutations: MutationTracker
 
   #realtime: Set<string> = new Set()
   #listeners: Map<string, Set<(state: QueryState<unknown, TMeta>) => void>> = new Map()
   #globalListeners: Set<(state: Map<string, ServiceState<TMeta>>) => void> = new Set()
-  #processedEventListeners: Set<(event: ProcessedRealtimeEvent) => void> = new Set()
+  #processedEventListeners: Set<(event: ProcessedCacheEvent) => void> = new Set()
   #projectionSettlementListeners: Set<(event: ProcessedProjectionEvent) => void> = new Set()
 
   #state: Map<string, ServiceState<TMeta>> = new Map()
@@ -181,6 +219,7 @@ export class QueryStore<
   #queryGenerations: Map<string, number> = new Map()
   #queryStats: Map<string, QueryFetchStats> = new Map()
   #nextQueryGeneration = 1
+  #followupFetchContexts = new Map<string, FetchContext>()
 
   #fetchEventJournal = new FetchEventJournal()
   #mutationLanes: MutationLanes<QueuedMutation>
@@ -191,9 +230,9 @@ export class QueryStore<
   #visibility: VisibilitySource
   #reconcileWindows: Map<
     string,
-    { lastAt: number; trailing: ReturnType<typeof setTimeout> | null }
+    { lastAt: number; trailing: ReturnType<typeof setTimeout> | null; causes?: TraceCause[] }
   > = new Map()
-  #deferredWhileHidden: Set<string> = new Set()
+  #deferredWhileHidden: Map<string, TraceCause[] | undefined> = new Map()
 
   #defaultSort: Record<string, number> | undefined
   #retry: number | false
@@ -251,7 +290,7 @@ export class QueryStore<
     this.#mutationLanes = new MutationLanes(item => this.#peekId(item))
     this.#defaultSort = defaultSort
     this.#eventBatchInterval = eventBatchInterval
-    this.#events = new FigbirdEventEmitter()
+    this.#telemetry = new QueryTelemetry()
     this.#mutations = new MutationTracker()
     this.#reconcileCooldown = reconcileCooldown
     this.#retry = this.#normalizeRetry(retry)
@@ -259,13 +298,64 @@ export class QueryStore<
     this.#reconnectJitter = this.#normalizeReconnectJitter(reconnectJitter)
     this.#visibility = visibility ?? documentVisibility()
     this.#visibility.onChange(() => this.#drainDeferredReconciles())
-    this.#adapter.subscribeToReconnect?.(() => this.#scheduleReconnectSweep())
+    if (this.#adapter.subscribeToConnectionEvents) {
+      this.#adapter.subscribeToConnectionEvents(event => {
+        const traceId = this.#telemetry.nextTraceId()
+        switch (event.type) {
+          case 'connected':
+            this.#telemetry.emit({
+              kind: 'connection:connected',
+              ...(traceId === undefined ? {} : { traceId }),
+              ...(event.transport ? { transport: event.transport } : {}),
+              ...(event.connectionId ? { connectionId: event.connectionId } : {}),
+            })
+            break
+          case 'disconnected':
+            this.#telemetry.emit({
+              kind: 'connection:disconnected',
+              ...(traceId === undefined ? {} : { traceId }),
+              ...(event.reason ? { reason: event.reason } : {}),
+              reconnecting: event.reconnecting,
+            })
+            break
+          case 'reconnected':
+            this.#telemetry.emit({
+              kind: 'connection:reconnected',
+              ...(traceId === undefined ? {} : { traceId }),
+              ...(event.attempt === undefined ? {} : { attempt: event.attempt }),
+              ...(event.transport ? { transport: event.transport } : {}),
+              ...(event.connectionId ? { connectionId: event.connectionId } : {}),
+            })
+            this.#scheduleReconnectSweep(traceId)
+            break
+          case 'error':
+            this.#telemetry.emit({
+              kind: 'connection:error',
+              ...(traceId === undefined ? {} : { traceId }),
+              phase: event.phase,
+              error: event.error,
+            })
+            break
+          case 'reconnect-failed':
+            this.#telemetry.emit({
+              kind: 'connection:reconnect-failed',
+              ...(traceId === undefined ? {} : { traceId }),
+              ...(event.error ? { error: event.error } : {}),
+            })
+            break
+        }
+      })
+    } else {
+      this.#adapter.subscribeToReconnect?.(() =>
+        this.#scheduleReconnectSweep(this.#telemetry.nextTraceId()),
+      )
+    }
   }
 
   // Public store API
   /** The instance's observability event emitter — the store is its single owner. */
   get events(): FigbirdEventEmitter {
-    return this.#events
+    return this.#telemetry.events
   }
 
   /** The instance's active mutation tracker — the store is its single owner. */
@@ -273,6 +363,11 @@ export class QueryStore<
     return this.#mutations
   }
 
+  /** Whether an observability consumer is currently attached. @internal */
+  isObservabilityActive(): boolean {
+    return this.#telemetry.active
+  }
+
   /** Returns the entire store state map keyed by service name. */
   getState(): Map<string, ServiceState<TMeta>> {
     return this.#state
@@ -283,6 +378,84 @@ export class QueryStore<
     return this.#state.get(serviceName)
   }
 
+  /** Apply an in-memory entity edit from an attached devtool without touching the server. */
+  editCacheEntity(serviceName: string, itemId: ItemId, item: unknown): DevtoolsCacheEditResult {
+    const service = this.#state.get(serviceName)
+    const key = entityKey(itemId)
+    const previousItem = service?.entities.get(key)
+    if (!service || previousItem === undefined) {
+      return { ok: false, error: `Entity ${serviceName} #${String(itemId)} is not cached` }
+    }
+    const nextId = this.#peekId(item)
+    if (nextId === undefined || entityKey(nextId) !== key) {
+      return { ok: false, error: 'Edited JSON must retain the entity ID' }
+    }
+
+    const cause = this.#telemetry.cause('manual')
+    const traceId = cause?.traceId
+    const queryEffects = this.#telemetry.active
+      ? new Map<string, 'merged' | 'reconcile'>()
+      : undefined
+    const event: ProcessedCacheEvent = {
+      mode: 'local',
+      ...(cause === undefined ? {} : { cause }),
+      serviceName,
+      type: 'patched',
+      item,
+      previousItem,
+      itemId: key,
+    }
+    const touched = this.#transactOverServiceByName(serviceName, (current, touch) => {
+      current.entities.set(key, item)
+      const getId = this.#getIdReader(serviceName)
+      for (const queryId of current.queries.keys()) {
+        const result = reapplyQueryFromEntities({
+          service: current,
+          queryId,
+          touch,
+          getId,
+          itemAdded: meta => this.#adapter.itemAdded(meta),
+          itemRemoved: meta => this.#adapter.itemRemoved(meta),
+          defaultSort: this.#defaultSort,
+        })
+        if (result === 'applied') {
+          queryEffects?.set(queryId, 'merged')
+          continue
+        }
+        if (
+          applyVisibleEventToQuery({
+            service: current,
+            queryId,
+            event,
+            touch,
+            getId,
+            itemRemoved: meta => this.#adapter.itemRemoved(meta),
+          })
+        ) {
+          queryEffects?.set(queryId, 'merged')
+        }
+      }
+    })
+    if (touched.size > 0) this.#notify(touched)
+    else this.#invokeGlobalListeners()
+    // Let relational queries recompute filters and assembled values from the edit.
+    // Consumers distinguish this source from authoritative server events, so this
+    // remains a purely local operation and never schedules a reconciliation fetch.
+    this.#emitProcessedEvent(event)
+    this.#telemetry.emit({
+      kind: 'cache:updated',
+      ...(traceId === undefined ? {} : { traceId }),
+      source: 'devtools',
+      serviceName,
+      type: 'patched',
+      itemId,
+      item,
+      previousItem,
+      queryEffects: [...(queryEffects ?? [])].map(([queryId, outcome]) => ({ queryId, outcome })),
+    })
+    return { ok: true, ...(traceId === undefined ? {} : { traceId }) }
+  }
+
   /** Returns the current state for a query by id, if present. */
   getQueryState<T>(queryId: string): QueryState<T, TMeta> | undefined {
     return this.#getQuery(queryId)?.state as QueryState<T, TMeta> | undefined
@@ -291,7 +464,7 @@ export class QueryStore<
   getQueryStats(queryId: string): QueryFetchStats | undefined {
     const stats = this.#queryStats.get(queryId)
     if (!stats) return undefined
-    return { ...stats }
+    return { ...stats, history: [...stats.history] }
   }
 
   getQueryGeneration(queryId: string): number | undefined {
@@ -347,7 +520,7 @@ export class QueryStore<
   subscribe<T>(
     queryId: string,
     fn: (state: QueryState<T, TMeta>) => void,
-    options: { staleTime?: number | undefined } = {},
+    options: QueryExecutionOptions = {},
   ): () => void {
     const q = this.#getQuery(queryId)
     if (!q) return () => {}
@@ -377,7 +550,7 @@ export class QueryStore<
    * Used internally for relational-filter invalidation; each event carries the
    * previous entity so listeners can detect which fields changed.
    */
-  subscribeToProcessedEvents(fn: (event: ProcessedRealtimeEvent) => void): () => void {
+  subscribeToProcessedEvents(fn: (event: ProcessedCacheEvent) => void): () => void {
     this.#processedEventListeners.add(fn)
     return () => {
       this.#processedEventListeners.delete(fn)
@@ -438,10 +611,14 @@ export class QueryStore<
    * `staleTime` is not part of query identity: a later, stricter subscriber must be
    * able to revalidate an already-live query without rebuilding its subscription.
    */
-  ensureFresh(queryId: string, options: { staleTime?: number | undefined } = {}): void {
+  ensureFresh(queryId: string, options: QueryExecutionOptions = {}): void {
     const q = this.#getQuery(queryId)
     if (!q) return
 
+    if (q.state.isFetching && options.graph) {
+      this.#telemetry.attachGraph(queryId, options.graph)
+    }
+
     const staleTime = options.staleTime ?? 0
     const isFresh =
       staleTime > 0 && q.fetchedAt !== undefined && Date.now() - q.fetchedAt < staleTime
@@ -453,17 +630,30 @@ export class QueryStore<
         !isFresh) ||
       (q.state.status === 'error' && !q.state.isFetching)
     ) {
-      this.#queue(queryId)
+      this.#queue(queryId, {
+        reason: 'subscription',
+        ...this.#causeContext('subscription'),
+        ...(options.graph ? { graph: [options.graph] } : {}),
+      })
     }
   }
 
   /** Refetch a specific query by id. */
-  refetch(queryId: string): void {
+  refetch(
+    queryId: string,
+    context?: FetchContext,
+    options: Omit<QueryExecutionOptions, 'staleTime'> = {},
+  ): void {
     const q = this.#getQuery(queryId)
     if (!q) return
+    const fetchContext = context ?? {
+      reason: 'manual' as const,
+      ...this.#causeContext('manual'),
+      ...(options.graph ? { graph: [options.graph] } : {}),
+    }
 
     if (!q.state.isFetching) {
-      this.#queue(queryId)
+      this.#queue(queryId, fetchContext)
     } else {
       // Mark as dirty to refetch after current fetch completes
       this.#transactOverService(queryId, (service, query) => {
@@ -472,6 +662,7 @@ export class QueryStore<
           dirty: true,
         })
       })
+      this.#followupFetchContexts.set(queryId, fetchContext)
     }
   }
 
@@ -481,7 +672,7 @@ export class QueryStore<
   }
 
   /** Replace/remove a row already visible in one query without changing membership. @internal */
-  applyVisibleEvent(queryId: string, event: ProcessedRealtimeEvent): void {
+  applyVisibleEvent(queryId: string, event: ProcessedCacheEvent): void {
     const serviceName = this.#serviceNamesByQueryId.get(queryId)
     if (!serviceName) return
     const getId = this.#getIdReader(serviceName)
@@ -529,8 +720,8 @@ export class QueryStore<
       control: undefined,
       run: () => this.#adapter.mutate(serviceName, method, [...args]),
       hooks: {
-        onSuccess: item =>
-          this.#processEvent(serviceName, { type: MUTATION_EVENT_TYPE[method], item }),
+        onSuccess: (item, { cause }) =>
+          this.#processEvent(serviceName, { type: MUTATION_EVENT_TYPE[method], item }, cause),
       },
     })
     return registration.promise as Promise<InferMutationData<S, D>>
@@ -599,21 +790,27 @@ export class QueryStore<
       control,
       ...(optimistic
         ? {
-            project: () =>
-              this.#processEvent(desc.serviceName, { type: 'created', item: optimisticItem }),
+            project: (cause?: MutationTraceCause) =>
+              this.#processEvent(
+                desc.serviceName,
+                { type: 'created', item: optimisticItem },
+                cause,
+              ),
           }
         : {}),
       run: () => this.#adapter.mutate(desc.serviceName, desc.method, [...args]),
       hooks: {
         // Apply the cache update before ending the tracker entry, so by the time a
         // `useMutating` subscriber sees "not busy" the data is already in the cache.
-        onSuccess: item => this.#processEvent(desc.serviceName, { type: 'created', item }),
-        onError: (_error, mutationId) => {
+        onSuccess: (item, { cause }) =>
+          this.#processEvent(desc.serviceName, { type: 'created', item }, cause),
+        onError: (_error, { mutationId, cause }) => {
           if (!optimistic) return
-          this.#processEvent(desc.serviceName, { type: 'removed', item: optimisticItem })
-          this.#events.emit({
+          this.#processEvent(desc.serviceName, { type: 'removed', item: optimisticItem }, cause)
+          this.#telemetry.emit({
             kind: 'mutate:rollback',
             mutationId,
+            ...(cause ? { traceId: cause.traceId } : {}),
             serviceName: desc.serviceName,
             method: desc.method,
           })
@@ -638,11 +835,15 @@ export class QueryStore<
       control,
       run: () => this.#adapter.mutate(desc.serviceName, desc.method, [...args]),
       hooks: {
-        onSuccess: item =>
-          this.#processEvent(desc.serviceName, {
-            type: MUTATION_EVENT_TYPE[desc.method],
-            item,
-          }),
+        onSuccess: (item, { cause }) =>
+          this.#processEvent(
+            desc.serviceName,
+            {
+              type: MUTATION_EVENT_TYPE[desc.method],
+              item,
+            },
+            cause,
+          ),
       },
     })
   }
@@ -678,13 +879,15 @@ export class QueryStore<
       },
       () => entry.attempt.promise,
       {
-        onSuccess: item => this.#settleQueuedMutation(lane, entry, { ok: true, item }),
-        onError: (error, mutationId) => {
-          this.#settleQueuedMutation(lane, entry, { ok: false, error })
+        onSuccess: (item, { cause }) =>
+          this.#settleQueuedMutation(lane, entry, { ok: true, item }, cause),
+        onError: (error, { mutationId, cause }) => {
+          this.#settleQueuedMutation(lane, entry, { ok: false, error }, cause)
           if (optimistic) {
-            this.#events.emit({
+            this.#telemetry.emit({
               kind: 'mutate:rollback',
               mutationId,
+              ...(cause ? { traceId: cause.traceId } : {}),
               serviceName: desc.serviceName,
               method: desc.method,
               id,
@@ -694,7 +897,8 @@ export class QueryStore<
       },
     )
 
-    this.#applyProjection(this.#mutationLanes.enqueue(lane, entry), true)
+    if (tracked.cause) entry.cause = tracked.cause
+    this.#applyProjection(this.#mutationLanes.enqueue(lane, entry), true, tracked.cause)
     entry.attempt.whenReady(() => {
       this.#expediteMutationPredecessors(lane, entry)
       this.#drainMutationLane(lane)
@@ -707,10 +911,11 @@ export class QueryStore<
         const projection = this.#mutationLanes.replaceTail(lane, entry, next)
         if (!projection) return false
         entry.args = this.#buildMutationArgs(next)
-        this.#applyProjection(projection, true)
-        this.#events.emit({
+        this.#applyProjection(projection, true, tracked.cause)
+        this.#telemetry.emit({
           kind: 'mutate:update',
           mutationId: tracked.mutationId,
+          ...(tracked.cause ? { traceId: tracked.cause.traceId } : {}),
           serviceName: next.serviceName,
           method: next.method,
           id,
@@ -719,7 +924,7 @@ export class QueryStore<
         })
         return true
       },
-      cancel: error => this.#cancelQueuedMutation(lane, entry, error),
+      cancel: error => this.#cancelQueuedMutation(lane, entry, error, tracked.cause),
     }
   }
 
@@ -757,7 +962,7 @@ export class QueryStore<
       try {
         return await run()
       } catch (error) {
-        const normalized = error instanceof Error ? error : new Error(String(error))
+        const normalized = normalizeError(error)
         if (!control || (await control.onAttemptFailure(normalized, attempt)) === 'discard') {
           throw normalized
         }
@@ -765,10 +970,15 @@ export class QueryStore<
     }
   }
 
-  #cancelQueuedMutation(lane: MutationLane, entry: QueuedMutation, error: Error): void {
+  #cancelQueuedMutation(
+    lane: MutationLane,
+    entry: QueuedMutation,
+    error: Error,
+    cause?: TraceCause,
+  ): void {
     if (!entry.attempt.cancel(error)) return
     const projection = this.#mutationLanes.cancel(lane, entry)
-    if (projection) this.#applyProjection(projection, true)
+    if (projection) this.#applyProjection(projection, true, cause)
     this.#drainMutationLane(lane)
   }
 
@@ -776,6 +986,7 @@ export class QueryStore<
     lane: MutationLane,
     entry: QueuedMutation,
     outcome: { ok: true; item: unknown } | { ok: false; error: Error },
+    cause?: TraceCause,
   ): void {
     const settlement = this.#mutationLanes.settle(lane, entry, outcome)
     if (!settlement) return
@@ -787,7 +998,7 @@ export class QueryStore<
       this.#fetchEventJournal.record([settlement.authoritativeEvent])
     }
 
-    const projected = this.#applyProjection(settlement.projection, true)
+    const projected = this.#applyProjection(settlement.projection, true, cause)
     if (!projected && settlement.authoritativeEvent && !this.#mutationLanes.peekNext(lane)) {
       this.#publishAppliedEvent(settlement.authoritativeEvent)
     }
@@ -810,8 +1021,8 @@ export class QueryStore<
     this.#drainMutationLane(lane)
   }
 
-  #applyProjection(change: ProjectionChange, immediate: boolean): boolean {
-    const event = this.#queuedProjectionEvent(change)
+  #applyProjection(change: ProjectionChange, immediate: boolean, cause?: TraceCause): boolean {
+    const event = this.#queuedProjectionEvent(change, cause)
     if (!event) return false
     this.#eventQueue.push(event)
     if (immediate) this.#processQueuedEvents()
@@ -876,15 +1087,15 @@ export class QueryStore<
   }: {
     tracking: MutationTrackingEntry
     control: ScheduledMutationControl | undefined
-    project?: () => void
+    project?: (cause?: MutationTraceCause) => void
     run: () => Promise<unknown>
     hooks?: MutationTrackingHooks<unknown>
   }): RegisteredMutation {
     const attempt = new GatedMutationAttempt(control)
     const tracked = this.#trackMutation(
       tracking,
-      () => {
-        project?.()
+      ({ cause }) => {
+        project?.(cause)
         return attempt.promise
       },
       hooks,
@@ -915,29 +1126,33 @@ export class QueryStore<
    */
   #trackMutation<T>(
     entry: MutationTrackingEntry,
-    run: () => Promise<T>,
+    run: (context: MutationTrackingContext) => Promise<T>,
     hooks?: MutationTrackingHooks<T>,
   ): TrackedMutation<T> {
     const { serviceName, method, id, optimistic, args } = entry
     const idField = id !== undefined ? { id } : {}
     const startedAt = Date.now()
     const mutationId = this.#mutations.start({ serviceName, method, ...idField })
-    this.#events.emit({
+    const cause = this.#telemetry.mutationCause(mutationId) as MutationTraceCause | undefined
+    const context: MutationTrackingContext = { mutationId, ...(cause ? { cause } : {}) }
+    this.#telemetry.emit({
       kind: 'mutate:start',
       mutationId,
+      ...(cause ? { traceId: cause.traceId } : {}),
       serviceName,
       method,
       ...idField,
       optimistic,
       args,
     })
-    const promise = run().then(
+    const promise = run(context).then(
       result => {
-        hooks?.onSuccess?.(result)
+        hooks?.onSuccess?.(result, context)
         this.#mutations.end(mutationId)
-        this.#events.emit({
+        this.#telemetry.emit({
           kind: 'mutate:end',
           mutationId,
+          ...(cause ? { traceId: cause.traceId } : {}),
           serviceName,
           method,
           durationMs: Date.now() - startedAt,
@@ -947,12 +1162,13 @@ export class QueryStore<
         return result
       },
       (err: unknown) => {
-        const error = err instanceof Error ? err : new Error(String(err))
-        hooks?.onError?.(error, mutationId)
+        const error = normalizeError(err)
+        hooks?.onError?.(error, context)
         this.#mutations.end(mutationId)
-        this.#events.emit({
+        this.#telemetry.emit({
           kind: 'mutate:error',
           mutationId,
+          ...(cause ? { traceId: cause.traceId } : {}),
           serviceName,
           method,
           durationMs: Date.now() - startedAt,
@@ -963,53 +1179,80 @@ export class QueryStore<
         throw error
       },
     )
-    return { mutationId, promise }
+    return { mutationId, ...(cause ? { cause } : {}), promise }
   }
 
   // Query lifecycle
-  async #queue(queryId: string): Promise<void> {
+  async #queue(queryId: string, context?: FetchContext): Promise<void> {
+    const fetchContext = context ?? {
+      reason: 'subscription' as const,
+      ...this.#causeContext('subscription'),
+    }
+    const graph = this.#telemetry.beginGraph(queryId, fetchContext.graph)
     this.#fetching({ queryId })
     const generation = this.#queryGenerations.get(queryId)
-    if (generation === undefined) return
+    if (generation === undefined) {
+      this.#telemetry.finishGraph(queryId, graph)
+      return
+    }
 
-    let retryAttempt = 0
-    while (true) {
-      const outcome = await this.#runFetchAttempt(queryId, generation)
-      if (outcome.kind !== 'failed') return
-
-      const query = this.#getQuery(queryId)
-      if (
-        !query ||
-        this.#queryGenerations.get(queryId) !== generation ||
-        !this.#hasRetryOwner(queryId) ||
-        !this.#shouldRetry(query, retryAttempt, outcome.error)
-      ) {
-        if (query && this.#queryGenerations.get(queryId) === generation) {
-          this.#fetchFailed({ queryId, error: outcome.error })
+    try {
+      let retryAttempt = 0
+      while (true) {
+        const outcome = await this.#runFetchAttempt(
+          queryId,
+          generation,
+          {
+            reason: retryAttempt === 0 ? fetchContext.reason : 'retry',
+            attempt: retryAttempt,
+            ...(fetchContext.causes ? { causes: fetchContext.causes } : {}),
+          },
+          graph,
+        )
+        if (outcome.kind !== 'failed') return
+
+        const query = this.#getQuery(queryId)
+        if (
+          !query ||
+          this.#queryGenerations.get(queryId) !== generation ||
+          !this.#hasRetryOwner(queryId) ||
+          !this.#shouldRetry(query, retryAttempt, outcome.error)
+        ) {
+          if (query && this.#queryGenerations.get(queryId) === generation) {
+            this.#fetchFailed({ queryId, error: outcome.error })
+          }
+          return
         }
-        return
-      }
 
-      retryAttempt++
-      const configuredDelay = query.config.retryDelay ?? this.#retryDelay
-      const delay = this.#resolveRetryDelay(configuredDelay, retryAttempt, outcome.error)
-      await new Promise<void>(resolve => setTimeout(resolve, delay))
+        retryAttempt++
+        const configuredDelay = query.config.retryDelay ?? this.#retryDelay
+        const delay = this.#resolveRetryDelay(configuredDelay, retryAttempt, outcome.error)
+        await new Promise<void>(resolve => setTimeout(resolve, delay))
 
-      if (this.#queryGenerations.get(queryId) !== generation) return
-      if (!this.#hasRetryOwner(queryId)) {
-        this.#fetchFailed({ queryId, error: outcome.error })
-        return
+        if (this.#queryGenerations.get(queryId) !== generation) return
+        if (!this.#hasRetryOwner(queryId)) {
+          this.#fetchFailed({ queryId, error: outcome.error })
+          return
+        }
       }
+    } finally {
+      this.#telemetry.finishGraph(queryId, graph)
     }
   }
 
-  async #runFetchAttempt(queryId: string, generation: number): Promise<FetchAttemptOutcome> {
+  async #runFetchAttempt(
+    queryId: string,
+    generation: number,
+    context: { reason: FetchReason; attempt: number; causes?: TraceCause[] },
+    graphRefs: ReadonlyMap<string, QueryGraphRef>,
+  ): Promise<FetchAttemptOutcome> {
     const query = this.#getQuery(queryId)
     if (!query || this.#queryGenerations.get(queryId) !== generation) {
       return { kind: 'stale' }
     }
 
     const startedAt = Date.now()
+    const fetchId = this.#telemetry.nextFetchId()
     const trace = {
       generation,
       serviceName: query.desc.serviceName,
@@ -1018,59 +1261,92 @@ export class QueryStore<
       params: query.desc.params,
     }
     const journalCursor = this.#fetchEventJournal.begin(trace.serviceName)
-    this.#events.emit({
+    const graph = [...graphRefs.values()]
+    this.#telemetry.emit({
       kind: 'fetch:start',
+      timestamp: startedAt,
       serviceName: trace.serviceName,
       method: trace.method,
       queryId,
       generation,
+      fetchId,
+      reason: context.reason,
+      attempt: context.attempt,
+      ...(context.causes ? { causes: context.causes } : {}),
+      ...(graph.length > 0 ? { graph } : {}),
       ...('resourceId' in trace ? { resourceId: trace.resourceId } : {}),
       params: trace.params,
     })
 
     try {
       const result = await this.#fetch(queryId)
-      const durationMs = Date.now() - startedAt
+      const endedAt = Date.now()
+      const durationMs = endedAt - startedAt
       const current = this.#getQuery(queryId)
       if (current && this.#queryGenerations.get(queryId) === generation) {
         const journal = this.#fetchEventJournal.read(journalCursor)
         if (journal.overflowed) {
           this.#discardFetchedResponse(queryId)
         } else {
-          this.#fetched({ queryId, result, journalEvents: journal.events })
+          const cacheCause = context.causes?.[0]
+          this.#fetched({
+            queryId,
+            result,
+            journalEvents: journal.events,
+            ...(cacheCause === undefined ? {} : { cause: cacheCause }),
+          })
         }
-        this.#recordFetchStats(queryId, { ok: true, durationMs })
+        this.#recordFetchStats(queryId, {
+          fetchId,
+          startedAt,
+          durationMs,
+          ok: true,
+          reason: context.reason,
+        })
       }
 
       const data = result.data
       const itemCount = Array.isArray(data) ? data.length : data ? 1 : 0
-      this.#events.emit({
+      this.#telemetry.emit({
         kind: 'fetch:end',
+        timestamp: endedAt,
         serviceName: trace.serviceName,
         method: trace.method,
         queryId,
         generation,
+        fetchId,
         durationMs,
         itemCount,
+        ...(graphRefs.size > 0 ? { graph: [...graphRefs.values()] } : {}),
       })
       return { kind: 'completed' }
     } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err))
-      const durationMs = Date.now() - startedAt
+      const error = normalizeError(err)
+      const endedAt = Date.now()
+      const durationMs = endedAt - startedAt
       const current = this.#getQuery(queryId)
       const isCurrent = Boolean(current && this.#queryGenerations.get(queryId) === generation)
       if (isCurrent) {
-        this.#recordFetchStats(queryId, { ok: false, durationMs })
+        this.#recordFetchStats(queryId, {
+          fetchId,
+          startedAt,
+          durationMs,
+          ok: false,
+          reason: context.reason,
+        })
       }
 
-      this.#events.emit({
+      this.#telemetry.emit({
         kind: 'fetch:error',
+        timestamp: endedAt,
         serviceName: trace.serviceName,
         method: trace.method,
         queryId,
         generation,
+        fetchId,
         durationMs,
         error,
+        ...(graphRefs.size > 0 ? { graph: [...graphRefs.values()] } : {}),
       })
       return isCurrent ? { kind: 'failed', error } : { kind: 'stale' }
     } finally {
@@ -1098,6 +1374,15 @@ export class QueryStore<
     )
   }
 
+  #takeFollowupFetchContext(queryId: string): FetchContext {
+    const context = this.#followupFetchContexts.get(queryId) ?? {
+      reason: 'follow-up' as const,
+      ...this.#causeContext('fetch-rebase'),
+    }
+    this.#followupFetchContexts.delete(queryId)
+    return context
+  }
+
   #resolveRetryDelay(delay: RetryDelay, attempt: number, error: Error): number {
     return resolveRetryDelay(
       () => (typeof delay === 'function' ? delay(attempt, error) : delay),
@@ -1261,10 +1546,12 @@ export class QueryStore<
     queryId,
     result,
     journalEvents,
+    cause,
   }: {
     queryId: string
     result: StoreResponse<TMeta>
-    journalEvents: readonly ProcessedRealtimeEvent[]
+    journalEvents: readonly ProcessedCacheEvent[]
+    cause?: TraceCause
   }): void {
     let shouldRefetch = false
     let hadEffectiveJournalEvents = false
@@ -1293,9 +1580,15 @@ export class QueryStore<
         for (const item of responseItems) {
           const itemId = getId(item)
           if (itemId === undefined || rebasePlan.itemIds.has(entityKey(itemId))) continue
-          const accepted = this.#acceptLaneAuthoritative(query.desc.serviceName, 'updated', item)
+          const accepted = this.#acceptLaneAuthoritative(
+            query.desc.serviceName,
+            'updated',
+            item,
+            'fetch',
+            cause,
+          )
           if (!accepted.handled || !accepted.projection) continue
-          const projectionEvent = this.#queuedProjectionEvent(accepted.projection)
+          const projectionEvent = this.#queuedProjectionEvent(accepted.projection, cause)
           if (projectionEvent) fetchedProjectionEvents.push(projectionEvent)
         }
       }
@@ -1372,6 +1665,23 @@ export class QueryStore<
             const currentItem = service.entities.get(key)
             if (!currentItem || !this.#adapter.isItemStale(currentItem, item)) {
               service.entities.set(key, item)
+              if (!isCompleteSet && currentItem !== item && this.#telemetry.active) {
+                eventEffects.push({
+                  event: {
+                    mode: 'server',
+                    source: 'fetch',
+                    serviceName: query.desc.serviceName,
+                    type: currentItem === undefined ? 'created' : 'updated',
+                    item,
+                    previousItem: currentItem ?? null,
+                    itemId: key,
+                    ...(cause === undefined ? {} : { cause }),
+                  },
+                  reconcileQueryIds: new Set(),
+                  queryEffects: new Map([[queryId, 'merged']]),
+                  observabilityOnly: true,
+                })
+              }
             }
           }
           addQueryToItemIndex(service, itemId, queryId)
@@ -1430,7 +1740,9 @@ export class QueryStore<
           ...this.#updateQueriesForEvents({
             service,
             serviceName: query.desc.serviceName,
-            processedEvents: diffEvents,
+            processedEvents: diffEvents.map(event =>
+              cause === undefined ? event : { ...event, cause },
+            ),
             touch,
             excludeQueryId: queryId,
           }),
@@ -1468,7 +1780,7 @@ export class QueryStore<
 
     if (shouldRefetch && shouldRunFollowup) {
       serverMaintainedQueriesToRefetch.delete(queryId)
-      this.#queue(queryId)
+      this.#queue(queryId, this.#takeFollowupFetchContext(queryId))
     } else if (hadEffectiveJournalEvents && query?.config.realtime !== 'disabled') {
       // Even exact replay cannot prove every server-maintained membership/order
       // edge. One gated trailing reconciliation guarantees convergence.
@@ -1478,6 +1790,9 @@ export class QueryStore<
     for (const id of serverMaintainedQueriesToRefetch) {
       this.#requestReconcile(id, {
         force: id === service?.materialized?.queryId,
+        ...(publishedEffects.reconcileCauses.has(id)
+          ? { causes: publishedEffects.reconcileCauses.get(id)! }
+          : {}),
       })
     }
   }
@@ -1507,7 +1822,7 @@ export class QueryStore<
     const isMaterializedRoot =
       serviceName !== undefined && this.#state.get(serviceName)?.materialized?.queryId === queryId
     if (shouldRefetch && (this.#listenerCount(queryId) > 0 || isMaterializedRoot)) {
-      this.#queue(queryId)
+      this.#queue(queryId, this.#takeFollowupFetchContext(queryId))
     }
   }
 
@@ -1524,26 +1839,29 @@ export class QueryStore<
     const serviceName = this.#serviceNamesByQueryId.get(queryId)
     const isMaterializedRoot =
       serviceName !== undefined && this.#state.get(serviceName)?.materialized?.queryId === queryId
-    this.#requestReconcile(queryId, { force: isMaterializedRoot })
+    this.#requestReconcile(queryId, {
+      force: isMaterializedRoot,
+      ...this.#causeContext('fetch-rebase'),
+    })
     // An immediate reconciliation has already restored isFetching=true; hidden
     // or inactive queries expose the settled state and remain pending instead.
     this.#notify(touched)
   }
 
-  #recordFetchStats(
-    queryId: string,
-    { ok, durationMs }: { ok: boolean; durationMs: number },
-  ): void {
+  #recordFetchStats(queryId: string, entry: QueryFetchHistoryEntry): void {
+    const { ok, durationMs } = entry
     const current = this.#queryStats.get(queryId) ?? {
       fetchCount: 0,
       errorCount: 0,
       totalDurationMs: 0,
+      history: [],
     }
     this.#queryStats.set(queryId, {
       fetchCount: current.fetchCount + 1,
       errorCount: current.errorCount + (ok ? 0 : 1),
       totalDurationMs: current.totalDurationMs + durationMs,
       lastDurationMs: durationMs,
+      history: [...current.history.slice(-(QUERY_FETCH_HISTORY_LIMIT - 1)), entry],
     })
   }
 
@@ -1574,65 +1892,102 @@ export class QueryStore<
     this.#realtime.add(serviceName)
   }
 
-  #emitRealtimeForItems(serviceName: string, type: Event['type'], items: unknown[]): void {
-    for (const item of items) {
-      this.#events.emit({
-        kind: 'realtime',
-        serviceName,
-        type,
-        itemId: this.#getIdWarn(serviceName, item),
-      })
-    }
+  #emitRealtime(serviceName: string, type: Event['type'], item: unknown): TraceCause | undefined {
+    if (!this.#telemetry.active) return undefined
+    const cause = this.#telemetry.cause('realtime')
+    this.#telemetry.emit({
+      kind: 'realtime',
+      ...(cause ? { traceId: cause.traceId } : {}),
+      serviceName,
+      type,
+      itemId: this.#getIdWarn(serviceName, item),
+      item,
+    })
+    return cause
   }
 
   /** Push an authoritative event onto the atomic queue. */
-  #enqueueAuthoritativeEvent(serviceName: string, event: Event): void {
-    const items = Array.isArray(event.item) ? event.item : [event.item]
+  #enqueueAuthoritativeEvent(
+    serviceName: string,
+    event: Event,
+    source: 'realtime' | 'mutation',
+    cause?: TraceCause,
+  ): void {
     this.#eventQueue.push({
-      origin: 'authoritative',
+      mode: 'server',
+      source,
       serviceName,
       type: event.type,
-      items,
+      item: event.item,
+      ...(cause ? { cause } : {}),
     })
   }
 
-  #queuedProjectionEvent(change: ProjectionChange): QueuedEvent | null {
+  #queuedProjectionEvent(change: ProjectionChange, cause?: TraceCause): QueuedEvent | null {
     const event = this.#projectionEvent(change)
     if (!event) return null
     return {
-      origin: 'projection',
+      mode: 'optimistic',
       serviceName: change.lane.serviceName,
       type: event.type,
-      items: Array.isArray(event.item) ? event.item : [event.item],
+      item: event.item,
       mutationLaneKey: change.lane.key,
+      ...(cause === undefined ? {} : { cause }),
     }
   }
 
   /** Apply an event immediately — used for mutation results and optimistic writes. */
-  #processEvent(serviceName: string, event: Event): void {
-    this.#ingestAuthoritativeEvent(serviceName, event, true)
+  #processEvent(serviceName: string, event: Event, cause?: TraceCause): void {
+    this.#ingestAuthoritativeEvent(serviceName, event, {
+      immediate: true,
+      source: 'mutation',
+      ...(cause ? { cause } : {}),
+    })
   }
 
   /** Queue a realtime event for batched processing. */
   #queueEvent(serviceName: string, event: Event): void {
-    this.#ingestAuthoritativeEvent(serviceName, event, false)
+    this.#ingestAuthoritativeEvent(serviceName, event, {
+      immediate: false,
+      source: 'realtime',
+    })
   }
 
-  #ingestAuthoritativeEvent(serviceName: string, event: Event, immediate: boolean): void {
+  #ingestAuthoritativeEvent(
+    serviceName: string,
+    event: Event,
+    context:
+      | { immediate: false; source: 'realtime' }
+      | { immediate: true; source: 'mutation'; cause?: TraceCause },
+  ): void {
     const items = Array.isArray(event.item) ? event.item : [event.item]
-    this.#emitRealtimeForItems(serviceName, event.type, items)
     for (const item of items) {
-      const accepted = this.#acceptLaneAuthoritative(serviceName, event.type, item)
+      const cause =
+        context.source === 'realtime'
+          ? this.#emitRealtime(serviceName, event.type, item)
+          : context.cause
+      const accepted = this.#acceptLaneAuthoritative(
+        serviceName,
+        event.type,
+        item,
+        context.source,
+        cause,
+      )
       if (!accepted.handled) {
-        this.#enqueueAuthoritativeEvent(serviceName, { type: event.type, item })
+        this.#enqueueAuthoritativeEvent(
+          serviceName,
+          { type: event.type, item },
+          context.source,
+          cause,
+        )
         continue
       }
-      if (accepted.projection) this.#applyProjection(accepted.projection, false)
+      if (accepted.projection) this.#applyProjection(accepted.projection, false, cause)
     }
 
     if (this.#eventQueue.length === 0) return
 
-    if (immediate) {
+    if (context.immediate) {
       this.#processQueuedEvents()
       return
     }
@@ -1655,6 +2010,8 @@ export class QueryStore<
     serviceName: string,
     type: Event['type'],
     item: unknown,
+    source: 'realtime' | 'mutation' | 'fetch',
+    cause?: TraceCause,
   ): LaneAuthoritativeAcceptance {
     const id = this.#peekId(item)
     const lane = id === undefined ? undefined : this.#mutationLanes.get(serviceName, id)
@@ -1663,7 +2020,13 @@ export class QueryStore<
       this.#adapter.isItemStale(current, next),
     )
     if (!transition) return { handled: true, projection: null }
-    this.#fetchEventJournal.record([transition.event])
+    this.#fetchEventJournal.record([
+      {
+        ...transition.event,
+        source,
+        ...(cause === undefined ? {} : { cause }),
+      },
+    ])
     return { handled: true, projection: transition.projection }
   }
 
@@ -1681,7 +2044,7 @@ export class QueryStore<
     excludeQueryId?: string
   }): AppliedEventEffect[] {
     const getId = this.#getIdReader(serviceName)
-    const processedEvents: ProcessedRealtimeEvent[] = []
+    const processedEvents: ProcessedCacheEvent[] = []
     applyEventsToService({
       service,
       serviceName,
@@ -1708,13 +2071,16 @@ export class QueryStore<
   }: {
     service: ServiceState<TMeta>
     serviceName: string
-    processedEvents: readonly ProcessedRealtimeEvent[]
+    processedEvents: readonly ProcessedCacheEvent[]
     touch: (queryId: string) => void
     excludeQueryId?: string
   }): AppliedEventEffect[] {
     const getId = this.#getIdReader(serviceName)
     return processedEvents.map(event => {
       const reconcileQueryIds = new Set<string>()
+      const queryEffects = this.#telemetry.active
+        ? new Map<string, 'merged' | 'reconcile'>()
+        : undefined
       updateQueriesFromEvents({
         service,
         appliedItems: [event],
@@ -1723,10 +2089,16 @@ export class QueryStore<
         itemAdded: meta => this.#adapter.itemAdded(meta),
         itemRemoved: meta => this.#adapter.itemRemoved(meta),
         serverMaintainedQueriesToRefetch: reconcileQueryIds,
+        ...(queryEffects
+          ? {
+              onEffect: (queryId: string, effect: 'merged' | 'reconcile') =>
+                queryEffects.set(queryId, effect),
+            }
+          : {}),
         ...(excludeQueryId ? { excludeQueryId } : {}),
         defaultSort: this.#defaultSort,
       })
-      return { event, reconcileQueryIds }
+      return { event, reconcileQueryIds, ...(queryEffects ? { queryEffects } : {}) }
     })
   }
 
@@ -1736,46 +2108,102 @@ export class QueryStore<
     refetchPolicy: 'realtime' | 'none',
   ): PublishedEventEffects {
     const immediateReconciles = new Set<string>()
-    for (const { event, reconcileQueryIds } of effects) {
+    const reconcileCauses = new Map<string, TraceCause[]>()
+    const fallbackCauses = this.#telemetry.active
+      ? new Map<ProcessedCacheEvent, TraceCause | undefined>()
+      : undefined
+    const causeFor = (event: ProcessedCacheEvent): TraceCause | undefined => {
+      if (event.cause) return event.cause
+      if (!fallbackCauses) return undefined
+      if (!fallbackCauses.has(event)) {
+        fallbackCauses.set(event, this.#telemetry.fallbackCause(event))
+      }
+      return fallbackCauses.get(event)
+    }
+    const hasAuthoritative =
+      refetchPolicy === 'realtime' && effects.some(effect => effect.event.mode === 'server')
+    const addReconcile = (queryId: string, cause?: TraceCause) => {
+      immediateReconciles.add(queryId)
+      if (!cause) return
+      const merged = this.#telemetry.merge(reconcileCauses.get(queryId), [cause])
+      if (merged) reconcileCauses.set(queryId, merged)
+    }
+
+    for (const { event, reconcileQueryIds, queryEffects, observabilityOnly } of effects) {
+      if (observabilityOnly) continue
+      const cause = causeFor(event)
       const deferred =
-        event.origin === 'projection' &&
+        event.mode === 'optimistic' &&
         this.#mutationLanes.deferQueryIds(event.mutationLaneKey, reconcileQueryIds)
       if (!deferred) {
-        for (const queryId of reconcileQueryIds) immediateReconciles.add(queryId)
+        for (const queryId of reconcileQueryIds) addReconcile(queryId, cause)
       }
 
       // Relational filters need projected dependency changes immediately so
       // they can recompute locally. Their listener distinguishes projections
       // from authoritative events and only the latter may trigger a refetch.
       const projectionSettled =
-        event.origin === 'projection' &&
+        event.mode === 'optimistic' &&
         !this.#mutationLanes.deferProjection(event.mutationLaneKey, event)
       this.#emitProcessedEvent(event)
       if (projectionSettled) this.#emitProjectionSettlement(event)
-    }
 
-    const refetchService =
-      refetchPolicy === 'realtime' && effects.some(({ event }) => event.origin === 'authoritative')
-    if (refetchPolicy === 'realtime' && effects.length > 0 && !refetchService) {
-      const refetchableQueryIds = this.#refetchableQueryIds(serviceName)
-      for (const { event } of effects) {
-        if (event.origin === 'projection') {
+      if (refetchPolicy === 'realtime') {
+        const refetchableQueryIds = this.#refetchableQueryIds(serviceName)
+        if (event.mode === 'server') {
+          for (const queryId of refetchableQueryIds) {
+            queryEffects?.set(queryId, 'reconcile')
+            addReconcile(queryId, cause)
+          }
+        } else if (event.mode === 'optimistic' && !hasAuthoritative) {
           const deferred = this.#mutationLanes.deferQueryIds(
             event.mutationLaneKey,
             refetchableQueryIds,
           )
           if (!deferred) {
-            for (const queryId of refetchableQueryIds) immediateReconciles.add(queryId)
+            for (const queryId of refetchableQueryIds) {
+              queryEffects?.set(queryId, 'reconcile')
+              addReconcile(queryId, cause)
+            }
           }
         }
       }
     }
 
-    return { reconcileQueryIds: immediateReconciles, refetchService }
+    for (const { event, queryEffects } of effects) {
+      if (!this.#telemetry.active) break
+      const cause = causeFor(event)
+      this.#telemetry.emit({
+        kind: 'cache:updated',
+        ...(cause ? { traceId: cause.traceId } : {}),
+        source: this.#cacheEventSource(event),
+        serviceName: event.serviceName,
+        type: event.type,
+        itemId: event.itemId,
+        item: event.item,
+        previousItem: event.previousItem,
+        queryEffects: [...(queryEffects ?? [])].map(([queryId, outcome]) => ({ queryId, outcome })),
+      })
+    }
+
+    return { reconcileQueryIds: immediateReconciles, reconcileCauses }
+  }
+
+  #cacheEventSource(
+    event: ProcessedCacheEvent,
+  ): 'realtime' | 'mutation' | 'fetch' | 'optimistic' | 'devtools' {
+    if (event.mode === 'optimistic') return 'optimistic'
+    if (event.mode === 'local') return 'devtools'
+    return event.source
+  }
+
+  #causeContext(kind: TraceCause['kind']): { causes?: TraceCause[] } {
+    const cause = this.#telemetry.cause(kind)
+    return cause ? { causes: [cause] } : {}
   }
 
   /** Publish an authoritative transition whose entity-cache effect already happened. */
-  #publishAppliedEvent(event: ProcessedRealtimeEvent): void {
+  #publishAppliedEvent(event: ProcessedCacheEvent): void {
     let effects: AppliedEventEffect[] = []
     const touched = this.#transactOverServiceByName(event.serviceName, (service, touch) => {
       effects = this.#updateQueriesForEvents({
@@ -1787,8 +2215,13 @@ export class QueryStore<
     })
     this.#notify(touched)
     const published = this.#publishServiceEventEffects(event.serviceName, effects, 'realtime')
-    for (const queryId of published.reconcileQueryIds) this.#requestReconcile(queryId)
-    if (published.refetchService) this.#refetchRefetchableQueries(event.serviceName)
+    for (const queryId of published.reconcileQueryIds) {
+      this.#requestReconcile(queryId, {
+        ...(published.reconcileCauses.has(queryId)
+          ? { causes: published.reconcileCauses.get(queryId)! }
+          : {}),
+      })
+    }
   }
 
   #processQueuedEvents(): void {
@@ -1853,9 +2286,12 @@ export class QueryStore<
           // ones through the gate (cooldown + hidden-tab deferral); the gate marks
           // inactive cached ones pending so their next subscription reconciles.
           for (const queryId of publishedEffects.reconcileQueryIds) {
-            this.#requestReconcile(queryId)
+            this.#requestReconcile(queryId, {
+              ...(publishedEffects.reconcileCauses.has(queryId)
+                ? { causes: publishedEffects.reconcileCauses.get(queryId)! }
+                : {}),
+            })
           }
-          if (publishedEffects.refetchService) this.#refetchRefetchableQueries(serviceName)
         }
       }
     } finally {
@@ -1863,7 +2299,7 @@ export class QueryStore<
     }
   }
 
-  #emitProcessedEvent(event: ProcessedRealtimeEvent): void {
+  #emitProcessedEvent(event: ProcessedCacheEvent): void {
     for (const listener of this.#processedEventListeners) {
       try {
         listener(event)
@@ -1883,10 +2319,6 @@ export class QueryStore<
     }
   }
 
-  #refetchRefetchableQueries(serviceName: string): void {
-    for (const queryId of this.#refetchableQueryIds(serviceName)) this.#requestReconcile(queryId)
-  }
-
   #refetchableQueryIds(serviceName: string): string[] {
     const service = this.getState().get(serviceName)
     if (!service) return []
@@ -1914,21 +2346,34 @@ export class QueryStore<
    *   edge — isolated changes stay as fast as today); further events within
    *   `reconcileCooldown` coalesce into one guaranteed trailing refetch.
    */
-  #requestReconcile(queryId: string, { force = false }: { force?: boolean } = {}): void {
+  #requestReconcile(
+    queryId: string,
+    { force = false, causes }: { force?: boolean; causes?: readonly TraceCause[] } = {},
+  ): void {
+    const mergedCauses = this.#telemetry.merge(undefined, causes)
     if (!force && this.#listenerCount(queryId) === 0) {
+      this.#emitReconcileDecision(queryId, 'inactive', mergedCauses)
       this.#markQueryPending(queryId)
       return
     }
 
     if (this.#visibility.isHidden()) {
-      this.#deferredWhileHidden.add(queryId)
+      this.#deferredWhileHidden.set(
+        queryId,
+        this.#telemetry.merge(this.#deferredWhileHidden.get(queryId), mergedCauses),
+      )
+      this.#emitReconcileDecision(queryId, 'deferred-hidden', mergedCauses)
       this.#markQueryPending(queryId)
       return
     }
 
     if (this.#reconcileCooldown <= 0) {
-      this.#emitReconcileStarted(queryId)
-      this.refetch(queryId)
+      this.#emitReconcileDecision(queryId, 'fetch-now', mergedCauses)
+      this.#emitReconcileStarted(queryId, mergedCauses)
+      this.refetch(queryId, {
+        reason: 'reconcile',
+        ...(mergedCauses ? { causes: mergedCauses } : {}),
+      })
       return
     }
 
@@ -1936,25 +2381,39 @@ export class QueryStore<
     const window = this.#reconcileWindows.get(queryId)
 
     if (!window || now - window.lastAt >= this.#reconcileCooldown) {
-      this.#reconcileWindows.set(queryId, { lastAt: now, trailing: window?.trailing ?? null })
-      this.#emitReconcileStarted(queryId)
-      this.refetch(queryId)
+      this.#reconcileWindows.set(queryId, {
+        lastAt: now,
+        trailing: window?.trailing ?? null,
+      })
+      this.#emitReconcileDecision(queryId, 'fetch-now', mergedCauses)
+      this.#emitReconcileStarted(queryId, mergedCauses)
+      this.refetch(queryId, {
+        reason: 'reconcile',
+        ...(mergedCauses ? { causes: mergedCauses } : {}),
+      })
       return
     }
 
+    const coalescedCauses = this.#telemetry.merge(window.causes, mergedCauses)
+    if (coalescedCauses) window.causes = coalescedCauses
+    this.#emitReconcileDecision(queryId, 'coalesced', mergedCauses)
     if (window.trailing) return // the pending trailing refetch already covers this
 
     const timer = setTimeout(
       () => {
         const current = this.#reconcileWindows.get(queryId)
-        if (current) current.trailing = null
+        const trailingCauses = current?.causes
+        if (current) {
+          current.trailing = null
+          delete current.causes
+        }
         if (!this.#getQuery(queryId)) {
           this.#reconcileWindows.delete(queryId)
           return
         }
         // Re-enter the gate after the window expires unless the tab went hidden or
         // the last subscriber left in the meantime.
-        this.#requestReconcile(queryId)
+        this.#requestReconcile(queryId, trailingCauses ? { causes: trailingCauses } : {})
       },
       window.lastAt + this.#reconcileCooldown - now,
     )
@@ -1963,10 +2422,32 @@ export class QueryStore<
     window.trailing = timer
   }
 
-  #emitReconcileStarted(queryId: string): void {
+  #emitReconcileDecision(
+    queryId: string,
+    decision: 'fetch-now' | 'coalesced' | 'deferred-hidden' | 'inactive',
+    causes: readonly TraceCause[] | undefined,
+  ): void {
     const serviceName = this.#serviceNamesByQueryId.get(queryId)
     if (serviceName !== undefined) {
-      this.#events.emit({ kind: 'reconcile:started', queryId, serviceName })
+      this.#telemetry.emit({
+        kind: 'reconcile:decision',
+        queryId,
+        serviceName,
+        decision,
+        ...(causes ? { causes } : {}),
+      })
+    }
+  }
+
+  #emitReconcileStarted(queryId: string, causes: readonly TraceCause[] | undefined): void {
+    const serviceName = this.#serviceNamesByQueryId.get(queryId)
+    if (serviceName !== undefined) {
+      this.#telemetry.emit({
+        kind: 'reconcile:started',
+        queryId,
+        serviceName,
+        ...(causes ? { causes } : {}),
+      })
     }
   }
 
@@ -1975,9 +2456,9 @@ export class QueryStore<
     if (this.#visibility.isHidden() || this.#deferredWhileHidden.size === 0) return
     const deferred = Array.from(this.#deferredWhileHidden)
     this.#deferredWhileHidden.clear()
-    for (const queryId of deferred) {
+    for (const [queryId, causes] of deferred) {
       if (!this.#getQuery(queryId)) continue
-      this.#requestReconcile(queryId)
+      this.#requestReconcile(queryId, causes ? { causes } : {})
     }
   }
 
@@ -2017,12 +2498,13 @@ export class QueryStore<
     }
   }
 
-  #refetchActiveQueries(): void {
+  #activeReconnectQueries(): Array<{ queryId: string; force: boolean }> {
+    const queryIds = new Map<string, boolean>()
     for (const service of this.getState().values()) {
       // Materialization roots reconcile even with no subscribers — every local read
       // depends on their completeness, and events may have been missed while offline.
       if (service.materialized) {
-        this.#requestReconcile(service.materialized.queryId, { force: true })
+        queryIds.set(service.materialized.queryId, true)
       }
       for (const query of service.queries.values()) {
         if (query.queryId === service.materialized?.queryId) continue
@@ -2031,24 +2513,60 @@ export class QueryStore<
           (query.config.realtime !== 'disabled' || this.#reconnectQueryIds.has(query.queryId)) &&
           this.#listenerCount(query.queryId) > 0
         ) {
-          this.#requestReconcile(query.queryId)
+          queryIds.set(query.queryId, false)
         }
       }
     }
+    return [...queryIds].map(([queryId, force]) => ({ queryId, force }))
   }
 
-  #scheduleReconnectSweep(): void {
+  #refetchActiveQueries(
+    traceId: number | undefined,
+    queries: readonly { queryId: string; force: boolean }[],
+  ): void {
+    for (const query of queries) {
+      this.#requestReconcile(query.queryId, {
+        force: query.force,
+        ...(traceId === undefined ? {} : { causes: [{ kind: 'reconnect' as const, traceId }] }),
+      })
+    }
+  }
+
+  #scheduleReconnectSweep(traceId: number | undefined): void {
     if (this.#reconnectSweepTimer) return
     const [min, max] = this.#reconnectJitter
     const delay = min === max ? min : min + Math.floor(Math.random() * (max - min + 1))
     if (delay === 0) {
-      this.#refetchActiveQueries()
+      const queries = this.#activeReconnectQueries()
+      this.#telemetry.emit({
+        kind: 'reconnect:sweep',
+        ...(traceId === undefined ? {} : { traceId }),
+        phase: 'started',
+        delayMs: 0,
+        queryCount: queries.length,
+      })
+      this.#refetchActiveQueries(traceId, queries)
       return
     }
 
+    this.#telemetry.emit({
+      kind: 'reconnect:sweep',
+      ...(traceId === undefined ? {} : { traceId }),
+      phase: 'scheduled',
+      delayMs: delay,
+    })
+
     const timer = setTimeout(() => {
       this.#reconnectSweepTimer = null
-      this.#refetchActiveQueries()
+      const queries = this.#activeReconnectQueries()
+      this.#telemetry.emit({
+        kind: 'reconnect:sweep',
+        ...(traceId === undefined ? {} : { traceId }),
+        phase: 'started',
+        delayMs: delay,
+        queryCount: queries.length,
+      })
+      this.#refetchActiveQueries(traceId, queries)
     }, delay)
     ;(timer as { unref?: () => void }).unref?.()
     this.#reconnectSweepTimer = timer
diff --git a/lib/core/queryTelemetry.ts b/lib/core/queryTelemetry.ts
new file mode 100644
index 00000000..38927474
--- /dev/null
+++ b/lib/core/queryTelemetry.ts
@@ -0,0 +1,102 @@
+import { FigbirdEventEmitter, type FigbirdEvent, type TraceCause } from './events.js'
+import type { ProcessedCacheEvent, QueryGraphRef } from './queryTypes.js'
+
+type TraceKind = TraceCause['kind']
+
+const EMPTY_GRAPH = new Map<string, QueryGraphRef>()
+
+function graphRefKey(ref: QueryGraphRef): string {
+  return `${ref.operationId}\u0000${ref.runId}\u0000${ref.path}\u0000${ref.role ?? ''}`
+}
+
+/**
+ * Owns the IDs and public event schema used for optional query observability.
+ * Cache and query state machines ask for optional causes only at lifecycle seams;
+ * when nobody is listening, no trace objects are retained by those machines.
+ */
+export class QueryTelemetry {
+  readonly #events = new FigbirdEventEmitter()
+  #nextTraceId = 1
+  #nextFetchId = 1
+  readonly #activeFetchGraphs = new Map<string, Map<string, QueryGraphRef>>()
+
+  get events(): FigbirdEventEmitter {
+    return this.#events
+  }
+
+  get active(): boolean {
+    return this.#events.hasListeners
+  }
+
+  emit(event: FigbirdEvent): void {
+    this.#events.emit(event)
+  }
+
+  nextFetchId(): number {
+    return this.#nextFetchId++
+  }
+
+  nextTraceId(): number | undefined {
+    return this.active ? this.#nextTraceId++ : undefined
+  }
+
+  beginGraph(
+    queryId: string,
+    refs: readonly QueryGraphRef[] | undefined,
+  ): ReadonlyMap<string, QueryGraphRef> {
+    if (!this.active) return EMPTY_GRAPH
+    const graph = new Map((refs ?? []).map(ref => [graphRefKey(ref), ref]))
+    this.#activeFetchGraphs.set(queryId, graph)
+    return graph
+  }
+
+  attachGraph(queryId: string, ref: QueryGraphRef): void {
+    this.#activeFetchGraphs.get(queryId)?.set(graphRefKey(ref), ref)
+  }
+
+  finishGraph(queryId: string, graph: ReadonlyMap<string, QueryGraphRef>): void {
+    if (this.#activeFetchGraphs.get(queryId) === graph) this.#activeFetchGraphs.delete(queryId)
+  }
+
+  cause(kind: TraceKind): TraceCause | undefined {
+    if (!this.active) return undefined
+    const traceId = this.#nextTraceId++
+    switch (kind) {
+      case 'realtime':
+        return { kind, traceId }
+      case 'reconnect':
+        return { kind, traceId }
+      case 'mutation':
+        return { kind, traceId }
+      case 'fetch-rebase':
+        return { kind, traceId }
+      case 'manual':
+        return { kind, traceId }
+      case 'subscription':
+        return { kind, traceId }
+    }
+  }
+
+  mutationCause(mutationId: number): Extract<TraceCause, { kind: 'mutation' }> | undefined {
+    if (!this.active) return undefined
+    return { kind: 'mutation', traceId: this.#nextTraceId++, mutationId }
+  }
+
+  merge(
+    current: readonly TraceCause[] | undefined,
+    next: readonly TraceCause[] | undefined,
+  ): TraceCause[] | undefined {
+    if (!this.active) return undefined
+    const keyed = new Map<number, TraceCause>()
+    for (const cause of [...(current ?? []), ...(next ?? [])]) keyed.set(cause.traceId, cause)
+    return keyed.size > 0 ? [...keyed.values()] : undefined
+  }
+
+  fallbackCause(event: ProcessedCacheEvent): TraceCause | undefined {
+    if (event.mode === 'optimistic') return this.cause('mutation')
+    if (event.mode === 'local') return this.cause('manual')
+    if (event.source === 'realtime') return this.cause('realtime')
+    if (event.source === 'mutation') return this.cause('mutation')
+    return this.cause('fetch-rebase')
+  }
+}
diff --git a/lib/core/queryTypes.ts b/lib/core/queryTypes.ts
index 6bf4f8b9..b93c3443 100644
--- a/lib/core/queryTypes.ts
+++ b/lib/core/queryTypes.ts
@@ -23,19 +23,44 @@ export interface Event {
   item: unknown
 }
 
+export type TraceCause =
+  | { kind: 'realtime'; traceId: number }
+  | { kind: 'reconnect'; traceId: number }
+  | { kind: 'mutation'; traceId: number; mutationId?: number }
+  | { kind: 'fetch-rebase'; traceId: number }
+  | { kind: 'manual'; traceId: number }
+  | { kind: 'subscription'; traceId: number }
+
+/**
+ * Identifies the relational operation run and structural node that owns a fetch.
+ * This is execution metadata only: it must never participate in query identity.
+ */
+export interface QueryGraphRef {
+  operationId: string
+  runId: string
+  path: string
+  role?: 'junction'
+}
+
+export interface QueryExecutionOptions {
+  staleTime?: number | undefined
+  graph?: QueryGraphRef | undefined
+}
+
 /**
  * Queued event for batch processing
  */
 interface QueuedEventBase {
   serviceName: string
   type: EventType
-  items: unknown[]
+  item: unknown
+  cause?: TraceCause
 }
 
 /** Internal entity changes waiting at the store's atomic event boundary. */
 export type QueuedEvent =
-  | (QueuedEventBase & { origin: 'authoritative' })
-  | (QueuedEventBase & { origin: 'projection'; mutationLaneKey: string })
+  | (QueuedEventBase & { mode: 'server'; source: 'realtime' | 'mutation' })
+  | (QueuedEventBase & { mode: 'optimistic'; mutationLaneKey: string })
 
 /**
  * A realtime event after it has been applied to the entity cache. Carries the
@@ -49,17 +74,23 @@ interface ProcessedEventBase {
   previousItem: unknown | null
   /** Always defined — events whose item has no resolvable id are never applied. */
   itemId: EntityKey
+  cause?: TraceCause
 }
 
 /** An optimistic entity change after cache application. */
 export type ProcessedProjectionEvent = ProcessedEventBase & {
-  origin: 'projection'
+  mode: 'optimistic'
   mutationLaneKey: string
 }
 
-/** An authoritative or optimistic entity change after cache application. */
-export type ProcessedRealtimeEvent =
-  (ProcessedEventBase & { origin: 'authoritative' }) | ProcessedProjectionEvent
+/** A server, optimistic, or explicitly local entity change after cache application. */
+export type ProcessedServerEvent = ProcessedEventBase & {
+  mode: 'server'
+  source: 'realtime' | 'mutation' | 'fetch'
+}
+
+export type ProcessedCacheEvent =
+  ProcessedServerEvent | ProcessedProjectionEvent | (ProcessedEventBase & { mode: 'local' })
 
 export type QueryStatus = 'loading' | 'success' | 'error'
 
diff --git a/lib/core/relationalFilters.ts b/lib/core/relationalFilters.ts
index b8782614..983c4d27 100644
--- a/lib/core/relationalFilters.ts
+++ b/lib/core/relationalFilters.ts
@@ -1,7 +1,7 @@
 import type { QueryAST } from './queryBuilder.js'
 import type { RelationshipDef, Schema } from './schema.js'
 import { resolveServicePath } from './schema.js'
-import { entityKey, type ProcessedRealtimeEvent, type ServiceState } from './queryTypes.js'
+import { entityKey, type ProcessedCacheEvent, type ServiceState } from './queryTypes.js'
 
 /**
  * Relational filters — dotted-path predicates over related entities, e.g.
@@ -142,7 +142,7 @@ export function shouldRefetchRelationalFilterQuery<TMeta extends Record<string,
   // caller rather than re-derived on every processed event.
   paths: RelationalFilterPath[],
   dependencies: RelationalFilterDependency[],
-  event: ProcessedRealtimeEvent,
+  event: ProcessedCacheEvent,
 ): boolean {
   const dep = dependencies.find(item => item.serviceName === event.serviceName)
   if (!dep) return false
diff --git a/lib/core/relationalQuery.ts b/lib/core/relationalQuery.ts
index 89894ff6..204631de 100644
--- a/lib/core/relationalQuery.ts
+++ b/lib/core/relationalQuery.ts
@@ -7,9 +7,10 @@ import type { QueryRef } from './queryRef.js'
 import type { QueryLifecycleConfig } from './queryIdentity.js'
 import type {
   ProcessedProjectionEvent,
-  ProcessedRealtimeEvent,
+  ProcessedCacheEvent,
   QueryConfig,
   QueryDescriptor,
+  QueryGraphRef,
   ServiceState,
 } from './queryTypes.js'
 import {
@@ -66,7 +67,8 @@ export interface RelationalQueryHost<TParams, TMeta extends Record<string, unkno
     pageSource?(serviceName: string): PageSource<TParams, TMeta> | undefined
   }
   queryStore: {
-    subscribeToProcessedEvents(fn: (event: ProcessedRealtimeEvent) => void): () => void
+    isObservabilityActive(): boolean
+    subscribeToProcessedEvents(fn: (event: ProcessedCacheEvent) => void): () => void
     subscribeToProjectionSettlements(fn: (event: ProcessedProjectionEvent) => void): () => void
     ensureRealtimeSubscription(serviceName: string): void
     reapplyQuery(queryId: string, mutationLaneKeys: ReadonlySet<string>): void
@@ -167,6 +169,12 @@ export interface InspectedRelationalQuery {
   service: string
   ast: QueryAST
   pagination?: InspectedPagination
+  /** Current assembled result when the relational query has settled successfully. */
+  data?: unknown
+  /** Mounted consumers, excluding internal prepare/prefetch pins. */
+  subscriberCount?: number
+  prefetchCount?: number
+  prepareCount?: number
   nodes: Array<{
     path: string
     role?: 'junction'
@@ -199,6 +207,9 @@ export class RelationalQueryRef<
   #ast: QueryAST
   #schema: S
   #queryId: string
+  #nextGraphRun = 1
+  #graphRunId: string | null = null
+  #graphCompletionScheduled = false
 
   // The root data source — a single find/get query, or a page accumulator for
   // `.paginate()` builders. `#pagedRoot` aliases the same object when paginated so
@@ -210,8 +221,10 @@ export class RelationalQueryRef<
   // "comments.reactions"). A relation is "synced" once its entry exists here — even a
   // kind:'empty' entry counts, so loading detection doesn't hang on empty relations.
   #relationSubs: Map<string, RelationSub<S, TParams, TMeta, TQuery>> = new Map()
-  #listeners: Set<(state: RelationalQueryState<T>) => void> = new Set()
-  #listenerStaleTimes: Map<(state: RelationalQueryState<T>) => void, number> = new Map()
+  #listeners: Map<
+    (state: RelationalQueryState<T>) => void,
+    { staleTime: number; source: 'subscriber' | 'prepare' | 'prefetch' }
+  > = new Map()
   #processedEventUnsub: (() => void) | null = null
   #relationalFilterRefetchQueued = false
   // Strictest active subscriber freshness tolerance — applied to newly-created
@@ -251,6 +264,10 @@ export class RelationalQueryRef<
   #resolveSuspense: (() => void) | null = null
   #rejectSuspense: ((error: Error) => void) | null = null
   #suspenseSettled = false
+  // A Suspense read materializes and fetches the graph before React can commit its
+  // subscription. The first committed listener claims that fetch instead of treating
+  // the just-resolved data as stale and immediately repeating the whole graph.
+  #coldStartAwaitingSubscriber = false
 
   // Relation keys that already produced a fan-out warning — warn once per relation,
   // not on every sync pass.
@@ -317,12 +334,18 @@ export class RelationalQueryRef<
           break
       }
     }
+    const snapshot = this.getSnapshot()
+    const listenerMetadata = [...this.#listeners.values()]
     return {
       key: this.#queryId,
       ...(this.#name ? { name: this.#name } : {}),
       service: this.#ast.service,
       ast: this.#ast,
       ...(this.#pagedRoot ? { pagination: this.#pagedRoot.inspectPagination() } : {}),
+      ...(snapshot.status === 'success' ? { data: snapshot.data } : {}),
+      subscriberCount: listenerMetadata.filter(({ source }) => source === 'subscriber').length,
+      prefetchCount: listenerMetadata.filter(({ source }) => source === 'prefetch').length,
+      prepareCount: listenerMetadata.filter(({ source }) => source === 'prepare').length,
       nodes,
     }
   }
@@ -371,25 +394,37 @@ export class RelationalQueryRef<
    */
   subscribe(
     fn: (state: RelationalQueryState<T>) => void,
-    options?: { staleTime?: number | undefined },
+    options?: {
+      staleTime?: number | undefined
+      /** @internal Identifies non-UI pins in devtools. */
+      source?: 'subscriber' | 'prepare' | 'prefetch'
+    },
   ): () => void {
     const staleTime = options?.staleTime ?? 0
-    this.#listeners.add(fn)
-    this.#listenerStaleTimes.set(fn, staleTime)
+    const claimsColdStart = this.#coldStartAwaitingSubscriber
+    this.#listeners.set(fn, { staleTime, source: options?.source ?? 'subscriber' })
     this.#staleTime = this.#currentStaleTime()
 
     if (!this.#root) {
       this.#setupRoot()
     } else {
       this.#root.setStaleTime(this.#staleTime)
-      this.#ensureFresh(staleTime)
+      if (claimsColdStart) {
+        // React StrictMode may subscribe, unsubscribe, and resubscribe in one turn.
+        // Keep the claim window open through that commit so neither subscription
+        // mistakes the Suspense fetch for stale data.
+        queueMicrotask(() => {
+          this.#coldStartAwaitingSubscriber = false
+        })
+      } else {
+        this.#ensureFresh(staleTime)
+      }
     }
 
     // Don't call fn synchronously - useSyncExternalStore will call getSnapshot() instead
 
     return () => {
       this.#listeners.delete(fn)
-      this.#listenerStaleTimes.delete(fn)
       this.#staleTime = this.#currentStaleTime()
       this.#root?.setStaleTime(this.#staleTime)
 
@@ -405,19 +440,41 @@ export class RelationalQueryRef<
   }
 
   #currentStaleTime(): number {
-    if (this.#listenerStaleTimes.size === 0) return 0
+    if (this.#listeners.size === 0) return 0
     let staleTime = Infinity
-    for (const value of this.#listenerStaleTimes.values()) {
-      staleTime = Math.min(staleTime, value)
+    for (const listener of this.#listeners.values()) {
+      staleTime = Math.min(staleTime, listener.staleTime)
     }
     return staleTime
   }
 
+  #beginGraphRun(): string | null {
+    if (!this.#host.queryStore.isObservabilityActive()) {
+      this.#graphRunId = null
+      return null
+    }
+    const runId = `${this.#queryId}:${this.#nextGraphRun++}`
+    this.#graphRunId = runId
+    return runId
+  }
+
+  #graph(path: string, role?: QueryGraphRef['role']): QueryGraphRef | undefined {
+    if (!this.#graphRunId) return undefined
+    return {
+      operationId: this.#queryId,
+      runId: this.#graphRunId,
+      path,
+      ...(role ? { role } : {}),
+    }
+  }
+
   #ensureFresh(staleTime: number): void {
-    this.#root?.ensureFresh(staleTime)
+    if (!this.#graphRunId) this.#beginGraphRun()
+    this.#root?.ensureFresh(staleTime, this.#graph('(root)'))
     for (const sub of this.#relationSubs.values()) {
       this.#ensureRelationSubFresh(sub, staleTime)
     }
+    this.#scheduleGraphRunCompletion(this.getSnapshot())
   }
 
   #ensureRelationSubFresh(sub: RelationSub<S, TParams, TMeta, TQuery>, staleTime: number): void {
@@ -425,16 +482,28 @@ export class RelationalQueryRef<
       case 'empty':
         return
       case 'fanIn':
+        sub.queryRef.ensureFresh({ staleTime, graph: this.#graph(this.#pathForSub(sub)) })
+        return
       case 'junction':
-        sub.queryRef.ensureFresh({ staleTime })
+        sub.queryRef.ensureFresh({
+          staleTime,
+          graph: this.#graph(this.#pathForSub(sub), 'junction'),
+        })
         return
       case 'perParent':
         for (const child of sub.children.values()) {
-          child.queryRef.ensureFresh({ staleTime })
+          child.queryRef.ensureFresh({ staleTime, graph: this.#graph(this.#pathForSub(sub)) })
         }
     }
   }
 
+  #pathForSub(target: RelationSub<S, TParams, TMeta, TQuery>): string {
+    for (const [path, sub] of this.#relationSubs) {
+      if (sub === target) return path.endsWith('#dest') ? path.slice(0, -'#dest'.length) : path
+    }
+    return '(unknown)'
+  }
+
   #scheduleCleanup(): void {
     if (this.#cleanupScheduled) return
     this.#cleanupScheduled = true
@@ -795,36 +864,48 @@ export class RelationalQueryRef<
    * server changes invisible (especially for snapshot queries).
    */
   refetch(): void {
-    this.#root?.refetch()
+    this.#beginGraphRun()
+    this.#root?.refetch(this.#graph('(root)'))
     const seen = new Set<QueryRef<unknown[], unknown, S, TParams, TMeta, TQuery>>()
     for (const sub of this.#relationSubs.values()) {
       switch (sub.kind) {
         case 'empty':
           break
         case 'fanIn':
+          if (!seen.has(sub.queryRef)) {
+            seen.add(sub.queryRef)
+            sub.queryRef.refetch({ graph: this.#graph(this.#pathForSub(sub)) })
+          }
+          break
         case 'junction':
           if (!seen.has(sub.queryRef)) {
             seen.add(sub.queryRef)
-            sub.queryRef.refetch()
+            sub.queryRef.refetch({
+              graph: this.#graph(this.#pathForSub(sub), 'junction'),
+            })
           }
           break
         case 'perParent':
           for (const child of sub.children.values()) {
             if (seen.has(child.queryRef)) continue
             seen.add(child.queryRef)
-            child.queryRef.refetch()
+            child.queryRef.refetch({ graph: this.#graph(this.#pathForSub(sub)) })
           }
           break
       }
     }
+    this.#scheduleGraphRunCompletion(this.getSnapshot())
   }
 
   /** Append the next page (paginated queries only; no-op otherwise). */
   loadMore(): void {
-    this.#pagedRoot?.loadMore()
+    this.#beginGraphRun()
+    this.#pagedRoot?.loadMore(this.#graph('(root)'))
+    this.#scheduleGraphRunCompletion(this.getSnapshot())
   }
 
   #setupRoot(): void {
+    this.#beginGraphRun()
     this.#subscribeToRelationalFilterInvalidations()
 
     const serviceName = resolveServicePath(this.#schema, this.#ast.service)
@@ -852,18 +933,19 @@ export class RelationalQueryRef<
         !this.#ast.snapshot &&
         cursorQueryCanKeepPrefix(this.#ast.query)
           ? {
-              subscribe: (fn: (event: ProcessedRealtimeEvent) => void) =>
+              subscribe: (fn: (event: ProcessedCacheEvent) => void) =>
                 this.#host.queryStore.subscribeToProcessedEvents(event => {
                   if (event.serviceName === serviceName) fn(event)
                 }),
-              canKeepPrefix: (event: ProcessedRealtimeEvent) =>
+              canKeepPrefix: (event: ProcessedCacheEvent) =>
                 !this.#ast.server &&
                 (event.type === 'patched' || event.type === 'updated') &&
                 event.previousItem !== null &&
                 cursorQueryInputsUnchanged(this.#ast.query, event.previousItem, event.item),
             }
           : undefined
-      this.#pagedRoot = new PagedQueryRoot({
+      const rootGraph = this.#graph('(root)')
+      this.#pagedRoot = new PagedQueryRoot<S, TParams, TMeta, TQuery>({
         pageSize,
         includeTotal: Boolean(this.#ast.includeTotal),
         sequential,
@@ -875,6 +957,7 @@ export class RelationalQueryRef<
               ? 'reconcile'
               : 'merge-or-reconcile',
         staleTime: this.#staleTime,
+        ...(rootGraph ? { graph: rootGraph } : {}),
         makePageRef: (pageIndex, after) =>
           this.#query(
             sequential
@@ -917,6 +1000,7 @@ export class RelationalQueryRef<
         ...(cursorRealtime ? { cursorRealtime } : {}),
       })
       this.#root = this.#pagedRoot
+      this.#scheduleGraphRunCompletion(this.getSnapshot())
       return
     }
 
@@ -935,7 +1019,8 @@ export class RelationalQueryRef<
           }
         : { serviceName, method: 'find', params: { query: this.#ast.query } }
 
-    this.#root = new SingleQueryRoot({
+    const rootGraph = this.#graph('(root)')
+    this.#root = new SingleQueryRoot<S, TParams, TMeta, TQuery>({
       queryRef: this.#query(rootDesc, {
         realtime: this.#realtimeMode,
         fetchPolicy: 'swr',
@@ -950,7 +1035,9 @@ export class RelationalQueryRef<
       onRows,
       onChange,
       staleTime: this.#staleTime,
+      ...(rootGraph ? { graph: rootGraph } : {}),
     })
+    this.#scheduleGraphRunCompletion(this.getSnapshot())
   }
 
   /**
@@ -1074,6 +1161,7 @@ export class RelationalQueryRef<
       data => this.#syncNested(data, relAST, nestedKey),
       () => this.#notifyListeners(),
       this.#staleTime,
+      this.#graph(nestedKey),
     )
 
     this.#relationSubs.set(subKey, { kind: 'fanIn', sourceKey, queryRef, unsub })
@@ -1138,7 +1226,7 @@ export class RelationalQueryRef<
           }
           this.#notifyListeners()
         },
-        { staleTime: this.#staleTime },
+        { staleTime: this.#staleTime, graph: this.#graph(key) },
       )
 
       entry.children.set(sourceValueKey(sourceValue), { queryRef, unsub, sourceValue })
@@ -1226,6 +1314,7 @@ export class RelationalQueryRef<
       junctionItems => this.#syncFanInRelation(junctionItems, relDef, relAST, `${key}#dest`, key),
       () => this.#notifyListeners(),
       this.#staleTime,
+      this.#graph(key, 'junction'),
     )
     this.#relationSubs.set(key, {
       kind: 'junction',
@@ -1381,7 +1470,7 @@ export class RelationalQueryRef<
       this.#host.queryStore.ensureRealtimeSubscription(dependency.serviceName)
     }
 
-    const affectsFilter = (event: ProcessedRealtimeEvent) =>
+    const affectsFilter = (event: ProcessedCacheEvent) =>
       shouldRefetchRelationalFilterQuery(
         this.#schema,
         this.#host.getState(),
@@ -1393,8 +1482,9 @@ export class RelationalQueryRef<
 
     const unsubscribeEvents = this.#host.queryStore.subscribeToProcessedEvents(event => {
       if (!affectsFilter(event)) return
-      if (event.origin === 'projection') {
-        const laneKeys = new Set([event.mutationLaneKey])
+      if (event.mode !== 'server') {
+        const laneKeys =
+          event.mode === 'optimistic' ? new Set([event.mutationLaneKey]) : new Set<string>()
         for (const queryId of this.#root?.queryIds() ?? []) {
           this.#host.queryStore.reapplyQuery(queryId, laneKeys)
         }
@@ -1446,9 +1536,22 @@ export class RelationalQueryRef<
     const snapshot = this.getSnapshot()
     this.#settleSuspense(snapshot)
     // Notify all listeners with the cached snapshot
-    for (const listener of this.#listeners) {
+    for (const listener of this.#listeners.keys()) {
       listener(snapshot)
     }
+    this.#scheduleGraphRunCompletion(snapshot)
+  }
+
+  #scheduleGraphRunCompletion(snapshot: RelationalQueryState<T>): void {
+    if (!this.#graphRunId || snapshot.isFetching || this.#graphCompletionScheduled) return
+    const runId = this.#graphRunId
+    this.#graphCompletionScheduled = true
+    queueMicrotask(() => {
+      this.#graphCompletionScheduled = false
+      if (this.#graphRunId !== runId) return
+      const current = this.getSnapshot()
+      if (!current.isFetching) this.#graphRunId = null
+    })
   }
 
   /**
@@ -1498,6 +1601,7 @@ export class RelationalQueryRef<
       // Ensure the underlying queries are materialised — callers may reach this method via
       // the hook before subscribe() runs in some orderings.
       if (!this.#root) {
+        this.#coldStartAwaitingSubscriber = this.#listeners.size === 0
         this.#setupRoot()
       }
       // If we've already reached a terminal state synchronously, settle immediately.
@@ -1524,7 +1628,6 @@ export class RelationalQueryRef<
     this.#lastRelationData.clear()
     this.#lastRelationAssembly = null
     this.#lastGatherWasPartial = false
-    this.#listenerStaleTimes.clear()
     this.#staleTime = 0
     // Evict from the figbird-level cache so a subsequent query rebuilds a fresh ref.
     // Reset the suspense promise state too — a fresh cold-start will need a fresh promise.
@@ -1532,6 +1635,7 @@ export class RelationalQueryRef<
     this.#resolveSuspense = null
     this.#rejectSuspense = null
     this.#suspenseSettled = false
+    this.#coldStartAwaitingSubscriber = false
     this.#onEvict?.()
   }
 }
diff --git a/lib/core/windowMaintenance.ts b/lib/core/windowMaintenance.ts
index 9b43be10..2015124a 100644
--- a/lib/core/windowMaintenance.ts
+++ b/lib/core/windowMaintenance.ts
@@ -18,7 +18,7 @@ import {
   type ItemId,
   queryOfParams,
   type EventType,
-  type ProcessedRealtimeEvent,
+  type ProcessedCacheEvent,
   type Query,
   type QueryState,
   type QueuedEvent,
@@ -164,65 +164,66 @@ export function applyEventsToService<TMeta>({
   events: QueuedEvent[]
   getId: (item: unknown) => ItemId | undefined
   isItemStale: (curr: unknown, next: unknown) => boolean
-  processedEvents: ProcessedRealtimeEvent[]
+  processedEvents: ProcessedCacheEvent[]
 }): void {
   for (const event of events) {
-    const { type, items } = event
-    for (const item of items) {
-      if (type === 'created') {
-        const incomingId = getId(item)
-        if (incomingId !== undefined) {
-          const itemId = entityKey(incomingId)
-          const previousItem = service.entities.get(itemId) ?? null
+    const { type, item, cause } = event
+    if (type === 'created') {
+      const incomingId = getId(item)
+      if (incomingId !== undefined) {
+        const itemId = entityKey(incomingId)
+        const previousItem = service.entities.get(itemId) ?? null
+        service.entities.set(itemId, item)
+        processedEvents.push({
+          serviceName,
+          type,
+          item,
+          previousItem,
+          itemId,
+          ...(cause === undefined ? {} : { cause }),
+          ...(event.mode === 'optimistic'
+            ? { mode: event.mode, mutationLaneKey: event.mutationLaneKey }
+            : { mode: event.mode, source: event.source }),
+        })
+      }
+    } else if (type === 'updated' || type === 'patched') {
+      const incomingId = getId(item)
+      if (incomingId !== undefined) {
+        const itemId = entityKey(incomingId)
+        const currItem = service.entities.get(itemId)
+        if (event.mode !== 'server' || !currItem || !isItemStale(currItem, item)) {
           service.entities.set(itemId, item)
           processedEvents.push({
             serviceName,
             type,
             item,
-            previousItem,
-            itemId,
-            ...(event.origin === 'projection'
-              ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
-              : { origin: event.origin }),
-          })
-        }
-      } else if (type === 'updated' || type === 'patched') {
-        const incomingId = getId(item)
-        if (incomingId !== undefined) {
-          const itemId = entityKey(incomingId)
-          const currItem = service.entities.get(itemId)
-          if (event.origin === 'projection' || !currItem || !isItemStale(currItem, item)) {
-            service.entities.set(itemId, item)
-            processedEvents.push({
-              serviceName,
-              type,
-              item,
-              previousItem: currItem ?? null,
-              itemId,
-              ...(event.origin === 'projection'
-                ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
-                : { origin: event.origin }),
-            })
-          }
-        }
-      } else if (type === 'removed') {
-        const incomingId = getId(item)
-        if (incomingId !== undefined) {
-          const itemId = entityKey(incomingId)
-          const previousItem = service.entities.get(itemId) ?? null
-          service.entities.delete(itemId)
-          processedEvents.push({
-            serviceName,
-            type,
-            item,
-            previousItem,
+            previousItem: currItem ?? null,
             itemId,
-            ...(event.origin === 'projection'
-              ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
-              : { origin: event.origin }),
+            ...(cause === undefined ? {} : { cause }),
+            ...(event.mode === 'optimistic'
+              ? { mode: event.mode, mutationLaneKey: event.mutationLaneKey }
+              : { mode: event.mode, source: event.source }),
           })
         }
       }
+    } else if (type === 'removed') {
+      const incomingId = getId(item)
+      if (incomingId !== undefined) {
+        const itemId = entityKey(incomingId)
+        const previousItem = service.entities.get(itemId) ?? null
+        service.entities.delete(itemId)
+        processedEvents.push({
+          serviceName,
+          type,
+          item,
+          previousItem,
+          itemId,
+          ...(cause === undefined ? {} : { cause }),
+          ...(event.mode === 'optimistic'
+            ? { mode: event.mode, mutationLaneKey: event.mutationLaneKey }
+            : { mode: event.mode, source: event.source }),
+        })
+      }
     }
   }
 }
@@ -247,19 +248,20 @@ export function diffCompleteSet<TMeta>({
   nextItemIds: Set<EntityKey>
   /** Items changed by events during the fetch; those events already own their diff. */
   ignoredItemIds?: ReadonlySet<EntityKey>
-}): ProcessedRealtimeEvent[] {
-  const events: ProcessedRealtimeEvent[] = []
+}): ProcessedCacheEvent[] {
+  const events: ProcessedCacheEvent[] = []
   for (const [itemId, previousItem] of previousEntities) {
     if (ignoredItemIds?.has(itemId)) continue
     if (!nextItemIds.has(itemId)) {
       service.entities.delete(itemId)
       events.push({
-        origin: 'authoritative',
+        mode: 'server',
         serviceName,
         type: 'removed',
         item: previousItem,
         previousItem,
         itemId,
+        source: 'fetch',
       })
     }
   }
@@ -269,21 +271,23 @@ export function diffCompleteSet<TMeta>({
     const previousItem = previousEntities.get(itemId)
     if (!previousItem) {
       events.push({
-        origin: 'authoritative',
+        mode: 'server',
         serviceName,
         type: 'created',
         item,
         previousItem: null,
         itemId,
+        source: 'fetch',
       })
     } else if (previousItem !== item) {
       events.push({
-        origin: 'authoritative',
+        mode: 'server',
         serviceName,
         type: 'updated',
         item,
         previousItem,
         itemId,
+        source: 'fetch',
       })
     }
   }
@@ -304,7 +308,7 @@ type QueryEventApplication = 'applied' | 'reconcile' | 'ignored'
 function applyVisibleEventEffect<TMeta>(
   context: QueryEventContext<TMeta>,
   queryId: string,
-  event: ProcessedRealtimeEvent,
+  event: ProcessedCacheEvent,
   effect: 'remove' | 'replace',
 ): boolean {
   const { service, touch, getId, itemRemoved } = context
@@ -385,7 +389,7 @@ export function applyVisibleEventToQuery<TMeta>({
 }: {
   service: ServiceState<TMeta>
   queryId: string
-  event: ProcessedRealtimeEvent
+  event: ProcessedCacheEvent
   touch: (queryId: string) => void
   getId: (item: unknown) => ItemId | undefined
   itemRemoved: (meta: TMeta) => TMeta
@@ -408,7 +412,7 @@ export function applyVisibleEventToQuery<TMeta>({
 function applyMergeEventToQuery<TMeta>(
   context: QueryEventContext<TMeta>,
   queryId: string,
-  event: ProcessedRealtimeEvent,
+  event: ProcessedCacheEvent,
 ): QueryEventApplication {
   const { service, touch, getId, itemAdded, itemRemoved, defaultSort } = context
   const query = service.queries.get(queryId)
@@ -499,16 +503,18 @@ export function updateQueriesFromEvents<TMeta>({
   itemAdded,
   itemRemoved,
   serverMaintainedQueriesToRefetch,
+  onEffect,
   excludeQueryId,
   defaultSort,
 }: {
   service: ServiceState<TMeta>
-  appliedItems: readonly ProcessedRealtimeEvent[]
+  appliedItems: readonly ProcessedCacheEvent[]
   touch: (queryId: string) => void
   getId: (item: unknown) => ItemId | undefined
   itemAdded: (meta: TMeta) => TMeta
   itemRemoved: (meta: TMeta) => TMeta
   serverMaintainedQueriesToRefetch: Set<string>
+  onEffect?: (queryId: string, effect: 'merged' | 'reconcile') => void
   /** A query whose state already reflects the applied items (e.g. the fetch they came from). */
   excludeQueryId?: string
   /** The backend's implicit order for queries without `$sort` — see QueryStore options. */
@@ -526,8 +532,12 @@ export function updateQueriesFromEvents<TMeta>({
     for (const [queryId, query] of service.queries) {
       if (queryId === excludeQueryId || query.config.realtime !== 'merge') continue
       if (query.desc.method === 'find' && query.config.fetchPolicy === 'network-only') continue
-      if (applyMergeEventToQuery(context, queryId, event) === 'reconcile') {
+      const result = applyMergeEventToQuery(context, queryId, event)
+      if (result === 'reconcile') {
         serverMaintainedQueriesToRefetch.add(queryId)
+        onEffect?.(queryId, 'reconcile')
+      } else if (result === 'applied') {
+        onEffect?.(queryId, 'merged')
       }
     }
   }
@@ -634,7 +644,7 @@ export function replayFetchedQueryFromEvents<TMeta>({
 }: {
   service: ServiceState<TMeta>
   queryId: string
-  events: readonly ProcessedRealtimeEvent[]
+  events: readonly ProcessedCacheEvent[]
   touch: (queryId: string) => void
   getId: (item: unknown) => ItemId | undefined
   itemAdded: (meta: TMeta) => TMeta
diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
new file mode 100644
index 00000000..c6087e53
--- /dev/null
+++ b/lib/devtools/CacheTab.tsx
@@ -0,0 +1,834 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+  type RefObject,
+} from 'react'
+import {
+  compactJson,
+  estimateSerializedBytes,
+  formatAge,
+  formatBytes,
+  formatClock,
+  prettyJson,
+} from './format.js'
+import type { DevtoolsCacheEntity, DevtoolsCacheService } from './collector.js'
+import { JsonViewer } from './JsonViewer.js'
+import type { DevtoolsModel } from './model.js'
+import {
+  Badge,
+  ColumnResizeHandle,
+  DetailBlock,
+  DetailSection,
+  DetailStat,
+  DetailStats,
+  DetailsPane,
+  buttonStyle,
+  useDetailsPaneWidth,
+  useResizableColumns,
+  useDevtoolsTheme,
+  type DevtoolsColors,
+} from './ui.js'
+
+const CACHE_COLUMNS = [
+  { label: 'service', width: 140, minWidth: 95 },
+  { label: 'entity', width: 150, minWidth: 90 },
+  { label: 'value', width: 310, minWidth: 160 },
+  { label: 'est. size', width: 90, minWidth: 72 },
+  { label: 'memberships', width: 110, minWidth: 76 },
+  { label: 'last changed', width: 150, minWidth: 110 },
+] as const
+
+const CACHE_SIZE_DESCRIPTION =
+  'Estimated UTF-8 size of the JSON-serialized cache value. This is not JavaScript heap usage.'
+const CACHE_ROW_HEIGHT = 29
+const CACHE_HEADER_HEIGHT = 30
+const CACHE_ROW_OVERSCAN = 16
+const CACHE_SERVICE_SIDEBAR_WIDTH = 280
+const CACHE_SERVICE_GRID = 'minmax(0, 1fr) 32px 50px 14px'
+
+export interface DevtoolsCacheEditor {
+  update(
+    serviceName: string,
+    itemId: string | number,
+    item: unknown,
+  ): Promise<{ ok: boolean; error?: string; traceId?: number }>
+}
+
+export function CacheTab({
+  services,
+  model,
+  filter,
+  editor,
+  onViewTrace,
+  onViewQuery,
+  requestedEntity,
+  onRequestedEntityHandled,
+}: {
+  services: DevtoolsCacheService[]
+  model: DevtoolsModel
+  filter: string
+  editor?: DevtoolsCacheEditor
+  onViewTrace?: (traceId: number) => void
+  onViewQuery?: (queryId: string) => void
+  requestedEntity?: { serviceName: string; itemId: string | number } | null
+  onRequestedEntityHandled?: () => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const orderedServices = useMemo(
+    () => [...services].sort((a, b) => a.serviceName.localeCompare(b.serviceName)),
+    [services],
+  )
+  const [serviceName, setServiceName] = useState<string | null>(null)
+  const [selectedKey, setSelectedKey] = useState<string | null>(null)
+  const cacheScrollRef = useRef<HTMLDivElement>(null)
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(CACHE_COLUMNS)
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const tableWidth = columnWidths.reduce((sum, width) => sum + width, 0)
+  const cacheRows = useMemo(
+    () =>
+      orderedServices.flatMap(service =>
+        service.entities.map(entity => ({
+          service,
+          entity,
+          preview: compactJson(entity.value),
+          estimatedSize: estimateSerializedBytes(entity.value),
+        })),
+      ),
+    [orderedServices],
+  )
+  const serviceSizes = useMemo(
+    () =>
+      cacheRows.reduce((sizes, row) => {
+        sizes.set(
+          row.service.serviceName,
+          (sizes.get(row.service.serviceName) ?? 0) + (row.estimatedSize ?? 0),
+        )
+        return sizes
+      }, new Map<string, number>()),
+    [cacheRows],
+  )
+  const totalSize = [...serviceSizes.values()].reduce((total, size) => total + size, 0)
+  const totalEntities = orderedServices.reduce((count, item) => count + item.entities.length, 0)
+
+  useEffect(() => {
+    if (!serviceName || orderedServices.some(service => service.serviceName === serviceName)) return
+    setServiceName(null)
+    setSelectedKey(null)
+  }, [orderedServices, serviceName])
+
+  useEffect(() => {
+    if (!requestedEntity) return
+    const service = orderedServices.find(item => item.serviceName === requestedEntity.serviceName)
+    if (!service) {
+      onRequestedEntityHandled?.()
+      return
+    }
+    const entity = service.entities.find(item => item.id === String(requestedEntity.itemId))
+    setServiceName(service.serviceName)
+    setSelectedKey(entity ? cacheEntityKey(service.serviceName, entity.id) : null)
+    onRequestedEntityHandled?.()
+  }, [onRequestedEntityHandled, orderedServices, requestedEntity])
+
+  const normalizedFilter = filter.trim().toLowerCase()
+  const entries = useMemo(
+    () =>
+      cacheRows
+        .filter(row => serviceName === null || row.service.serviceName === serviceName)
+        .filter(({ service, entity, preview }) => {
+          if (!normalizedFilter) return true
+          return [
+            service.serviceName,
+            entity.id,
+            preview,
+            entity.queryIds.join(' '),
+            entity.lastChange?.source ?? 'initial snapshot',
+            entity.lastChange?.type ?? '',
+          ]
+            .join(' ')
+            .toLowerCase()
+            .includes(normalizedFilter)
+        })
+        .sort(
+          (a, b) =>
+            a.service.serviceName.localeCompare(b.service.serviceName) ||
+            a.entity.id.localeCompare(b.entity.id, undefined, { numeric: true }),
+        ),
+    [cacheRows, normalizedFilter, serviceName],
+  )
+  const virtualRows = useVirtualCacheRows(
+    entries.length,
+    cacheScrollRef,
+    `${serviceName ?? '*'}\u0000${normalizedFilter}`,
+  )
+  const visibleEntries = entries.slice(virtualRows.start, virtualRows.end)
+  const selected = entries.find(
+    ({ service, entity }) => cacheEntityKey(service.serviceName, entity.id) === selectedKey,
+  )
+
+  useEffect(() => {
+    if (!selectedKey) return
+    const index = entries.findIndex(
+      ({ service, entity }) => cacheEntityKey(service.serviceName, entity.id) === selectedKey,
+    )
+    const scroll = cacheScrollRef.current
+    if (index < 0 || !scroll || scroll.clientHeight === 0) return
+    const top = CACHE_HEADER_HEIGHT + index * CACHE_ROW_HEIGHT
+    const bottom = top + CACHE_ROW_HEIGHT
+    if (top < scroll.scrollTop + CACHE_HEADER_HEIGHT) {
+      scroll.scrollTop = Math.max(0, top - CACHE_HEADER_HEIGHT)
+    } else if (bottom > scroll.scrollTop + scroll.clientHeight) {
+      scroll.scrollTop = bottom - scroll.clientHeight
+    }
+  }, [entries, selectedKey])
+
+  return (
+    <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
+      <nav
+        aria-label='Cached services'
+        style={{
+          width: CACHE_SERVICE_SIDEBAR_WIDTH,
+          flex: `0 0 ${CACHE_SERVICE_SIDEBAR_WIDTH}px`,
+          overflow: 'auto',
+          borderRight: `1px solid ${colors.border}`,
+          background: colors.toolbar,
+        }}
+      >
+        <div
+          data-tooltip={CACHE_SIZE_DESCRIPTION}
+          style={{
+            padding: '8px 10px',
+            color: colors.muted,
+            fontWeight: 650,
+            borderBottom: `1px solid ${colors.border}`,
+          }}
+        >
+          Normalized cache
+        </div>
+        <div
+          aria-hidden='true'
+          style={{
+            display: 'grid',
+            gridTemplateColumns: CACHE_SERVICE_GRID,
+            gap: 4,
+            padding: '5px 9px',
+            borderBottom: `1px solid ${colors.rowBorder}`,
+            color: colors.faint,
+            fontSize: 11,
+          }}
+        >
+          <span>service</span>
+          <span style={{ textAlign: 'right' }}>items</span>
+          <span style={{ textAlign: 'right' }}>size</span>
+          <span />
+        </div>
+        <button
+          type='button'
+          onClick={() => {
+            setServiceName(null)
+            setSelectedKey(null)
+          }}
+          style={cacheServiceButtonStyle(colors, serviceName === null)}
+        >
+          <span>All services</span>
+          <span style={{ color: colors.faint, textAlign: 'right' }}>{totalEntities}</span>
+          <span
+            data-tooltip={CACHE_SIZE_DESCRIPTION}
+            style={{ color: colors.faint, textAlign: 'right', whiteSpace: 'nowrap' }}
+          >
+            {formatBytes(totalSize)}
+          </span>
+          <span />
+        </button>
+        {orderedServices.map(item => {
+          const selectedService = item.serviceName === serviceName
+          return (
+            <button
+              key={item.serviceName}
+              type='button'
+              onClick={() => {
+                setServiceName(item.serviceName)
+                setSelectedKey(null)
+              }}
+              style={cacheServiceButtonStyle(colors, selectedService)}
+            >
+              <span
+                style={{
+                  minWidth: 0,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {item.serviceName}
+              </span>
+              <span style={{ color: colors.faint, textAlign: 'right' }}>
+                {item.entities.length}
+              </span>
+              <span
+                data-tooltip={CACHE_SIZE_DESCRIPTION}
+                style={{ color: colors.faint, textAlign: 'right', whiteSpace: 'nowrap' }}
+              >
+                {formatBytes(serviceSizes.get(item.serviceName) ?? 0)}
+              </span>
+              <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                {item.materialized ? (
+                  <svg
+                    aria-label='Complete cached set'
+                    role='img'
+                    viewBox='0 0 12 12'
+                    width='12'
+                    height='12'
+                    style={{ color: colors.green, flex: '0 0 auto' }}
+                  >
+                    <circle cx='6' cy='6' r='5' fill='currentColor' />
+                    <path
+                      d='m3.6 6 1.5 1.5 3.3-3.3'
+                      fill='none'
+                      stroke={colors.bg}
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                      strokeWidth='1.3'
+                    />
+                  </svg>
+                ) : null}
+              </span>
+            </button>
+          )
+        })}
+      </nav>
+      <div ref={cacheScrollRef} style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
+        {orderedServices.length === 0 ? (
+          <div style={{ padding: 16, color: colors.muted }}>No entities cached yet.</div>
+        ) : (
+          <table style={{ ...styles.table, minWidth: tableWidth }}>
+            <colgroup>
+              {CACHE_COLUMNS.map((column, index) => (
+                <col key={column.label} style={{ width: columnWidths[index] }} />
+              ))}
+            </colgroup>
+            <thead>
+              <tr>
+                {CACHE_COLUMNS.map((column, index) => (
+                  <th
+                    key={column.label}
+                    style={{ ...styles.th, position: 'sticky' }}
+                    {...(column.label === 'est. size'
+                      ? { 'data-tooltip': CACHE_SIZE_DESCRIPTION }
+                      : {})}
+                  >
+                    {column.label}
+                    <ColumnResizeHandle
+                      label={column.label}
+                      onMouseDown={event => onColumnResizeStart(index, event)}
+                    />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {entries.length === 0 ? (
+                <tr>
+                  <td colSpan={CACHE_COLUMNS.length} style={{ ...styles.td, color: colors.muted }}>
+                    No matching cached entities.
+                  </td>
+                </tr>
+              ) : null}
+              {virtualRows.paddingTop > 0 ? (
+                <CacheTableSpacer height={virtualRows.paddingTop} />
+              ) : null}
+              {visibleEntries.map(({ service, entity, preview, estimatedSize }) => {
+                const key = cacheEntityKey(service.serviceName, entity.id)
+                const isSelected = key === selectedKey
+                return (
+                  <tr
+                    key={key}
+                    tabIndex={0}
+                    aria-selected={isSelected}
+                    onClick={() => setSelectedKey(key)}
+                    onKeyDown={event => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault()
+                        setSelectedKey(key)
+                      }
+                    }}
+                    style={{
+                      cursor: 'pointer',
+                      outline: 'none',
+                      height: CACHE_ROW_HEIGHT,
+                      background: isSelected ? colors.activeButtonBg : undefined,
+                      boxShadow: isSelected ? `inset 3px 0 ${colors.blue}` : undefined,
+                    }}
+                  >
+                    <td style={styles.td}>
+                      <span style={{ fontWeight: 600 }}>{service.serviceName}</span>
+                    </td>
+                    <td style={styles.td}>
+                      <code style={styles.code}>#{entity.id}</code>
+                    </td>
+                    <td style={styles.td}>
+                      <code
+                        data-tooltip={preview}
+                        data-tooltip-overflow=''
+                        style={{
+                          ...styles.code,
+                          display: 'block',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          color: colors.muted,
+                        }}
+                      >
+                        {preview}
+                      </code>
+                    </td>
+                    <td style={styles.td}>
+                      <code
+                        data-tooltip={
+                          estimatedSize === null
+                            ? 'This value could not be JSON-serialized.'
+                            : `${estimatedSize.toLocaleString()} estimated UTF-8 JSON bytes`
+                        }
+                        style={{ ...styles.code, color: colors.muted, whiteSpace: 'nowrap' }}
+                      >
+                        {estimatedSize === null ? '—' : formatBytes(estimatedSize)}
+                      </code>
+                    </td>
+                    <td style={styles.td}>
+                      {entity.queryIds.length === 0 ? (
+                        <span style={{ color: colors.faint }}>unreferenced</span>
+                      ) : (
+                        `${entity.queryIds.length} ${entity.queryIds.length === 1 ? 'query' : 'queries'}`
+                      )}
+                    </td>
+                    <td style={styles.td}>
+                      {entity.lastChange ? (
+                        <span
+                          data-tooltip={formatClock(entity.lastChange.wallAt, {
+                            milliseconds: true,
+                          })}
+                          style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
+                        >
+                          <Badge
+                            tone={entity.lastChange.source === 'devtools' ? 'blue' : 'neutral'}
+                          >
+                            {entity.lastChange.source}
+                          </Badge>
+                          <span style={{ color: colors.faint }}>
+                            {formatAge(Date.now() - entity.lastChange.wallAt)} ago
+                          </span>
+                        </span>
+                      ) : (
+                        <span style={{ color: colors.faint }}>initial snapshot</span>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+              {virtualRows.paddingBottom > 0 ? (
+                <CacheTableSpacer height={virtualRows.paddingBottom} />
+              ) : null}
+            </tbody>
+          </table>
+        )}
+      </div>
+      {selected ? (
+        <CacheEntityDetails
+          key={cacheEntityKey(selected.service.serviceName, selected.entity.id)}
+          service={selected.service}
+          entity={selected.entity}
+          model={model}
+          width={detailsWidth}
+          onResizeStart={onDetailsResizeStart}
+          onClose={() => setSelectedKey(null)}
+          {...(editor ? { editor } : {})}
+          {...(onViewTrace ? { onViewTrace } : {})}
+          {...(onViewQuery ? { onViewQuery } : {})}
+        />
+      ) : null}
+    </section>
+  )
+}
+
+function useVirtualCacheRows(
+  count: number,
+  scrollRef: RefObject<HTMLDivElement | null>,
+  resetKey: string,
+): { start: number; end: number; paddingTop: number; paddingBottom: number } {
+  const [range, setRange] = useState({ start: 0, end: Math.min(count, 64) })
+
+  useLayoutEffect(() => {
+    const scroll = scrollRef.current
+    if (scroll) scroll.scrollTop = 0
+  }, [resetKey, scrollRef])
+
+  useLayoutEffect(() => {
+    const scroll = scrollRef.current
+    if (!scroll) {
+      setRange({ start: 0, end: Math.min(count, 64) })
+      return
+    }
+    const ownerWindow = scroll.ownerDocument.defaultView
+    let frame: number | null = null
+    const measure = () => {
+      frame = null
+      const viewportHeight = scroll.clientHeight || CACHE_ROW_HEIGHT * 48
+      const bodyScrollTop = Math.max(0, scroll.scrollTop - CACHE_HEADER_HEIGHT)
+      const start = Math.max(0, Math.floor(bodyScrollTop / CACHE_ROW_HEIGHT) - CACHE_ROW_OVERSCAN)
+      const end = Math.min(
+        count,
+        Math.ceil((bodyScrollTop + viewportHeight) / CACHE_ROW_HEIGHT) + CACHE_ROW_OVERSCAN,
+      )
+      setRange(current =>
+        current.start === start && current.end === end ? current : { start, end },
+      )
+    }
+    const scheduleMeasure = () => {
+      if (frame !== null) return
+      if (ownerWindow?.requestAnimationFrame) {
+        frame = ownerWindow.requestAnimationFrame(measure)
+      } else {
+        measure()
+      }
+    }
+
+    measure()
+    scroll.addEventListener('scroll', scheduleMeasure, { passive: true })
+    const observer =
+      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleMeasure)
+    observer?.observe(scroll)
+    return () => {
+      scroll.removeEventListener('scroll', scheduleMeasure)
+      observer?.disconnect()
+      if (frame !== null) ownerWindow?.cancelAnimationFrame(frame)
+    }
+  }, [count, resetKey, scrollRef])
+
+  return {
+    ...range,
+    paddingTop: range.start * CACHE_ROW_HEIGHT,
+    paddingBottom: Math.max(0, count - range.end) * CACHE_ROW_HEIGHT,
+  }
+}
+
+function CacheTableSpacer({ height }: { height: number }) {
+  return (
+    <tr aria-hidden='true' style={{ height }}>
+      <td colSpan={CACHE_COLUMNS.length} style={{ height, padding: 0, border: 0 }} />
+    </tr>
+  )
+}
+
+function CacheEntityDetails({
+  service,
+  entity,
+  model,
+  width,
+  onResizeStart,
+  onClose,
+  editor,
+  onViewTrace,
+  onViewQuery,
+}: {
+  service: DevtoolsCacheService
+  entity: DevtoolsCacheEntity
+  model: DevtoolsModel
+  width: number
+  onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
+  onClose: () => void
+  editor?: DevtoolsCacheEditor
+  onViewTrace?: (traceId: number) => void
+  onViewQuery?: (queryId: string) => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(() => prettyJson(entity.value))
+  const [saving, setSaving] = useState(false)
+  const [message, setMessage] = useState<{ tone: 'green' | 'red'; text: string } | null>(null)
+  const [undoValue, setUndoValue] = useState<unknown | null>(null)
+  const queryLabels = entity.queryIds.map(queryId => ({
+    queryId,
+    ...queryMembership(model, queryId),
+  }))
+
+  const update = async (value: unknown, rememberUndo: boolean) => {
+    if (!editor) return
+    setSaving(true)
+    setMessage(null)
+    try {
+      const result = await editor.update(service.serviceName, entity.id, value)
+      if (!result.ok) {
+        setMessage({ tone: 'red', text: result.error ?? 'Cache edit failed' })
+        return
+      }
+      if (rememberUndo) setUndoValue(entity.value)
+      else setUndoValue(null)
+      setEditing(false)
+      setMessage({ tone: 'green', text: 'Applied in memory. No server request was sent.' })
+    } catch (error) {
+      setMessage({
+        tone: 'red',
+        text: error instanceof Error ? error.message : 'Cache edit failed',
+      })
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <DetailsPane
+      title={`${service.serviceName} #${entity.id}`}
+      subtitle='Normalized entity'
+      width={width}
+      onResizeStart={onResizeStart}
+      onClose={onClose}
+    >
+      <DetailStats>
+        <DetailStat label='Service' value={service.serviceName} />
+        <DetailStat label='Entity ID' value={`#${entity.id}`} copyValue={entity.id} />
+      </DetailStats>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 12 }}>
+        {entity.lastChange ? <Badge tone='neutral'>{entity.lastChange.type}</Badge> : null}
+        <span style={{ color: colors.muted }}>
+          {entity.queryIds.length} query{' '}
+          {entity.queryIds.length === 1 ? 'membership' : 'memberships'}
+        </span>
+        <code data-tooltip={CACHE_SIZE_DESCRIPTION} style={{ ...styles.code, color: colors.muted }}>
+          {formatEstimatedSize(entity.value)}
+        </code>
+        <span style={styles.spacer} />
+        {editor && !editing ? (
+          <button
+            type='button'
+            style={buttonStyle(colors, false)}
+            onClick={() => {
+              setDraft(prettyJson(entity.value))
+              setEditing(true)
+              setMessage(null)
+            }}
+          >
+            Edit cache
+          </button>
+        ) : null}
+      </div>
+
+      {message ? (
+        <div
+          style={{
+            padding: '7px 9px',
+            marginBottom: 12,
+            color: message.tone === 'red' ? colors.red : colors.green,
+            background: colors.panel2,
+            borderLeft: `3px solid ${message.tone === 'red' ? colors.red : colors.green}`,
+          }}
+        >
+          {message.text}
+          {undoValue !== null && editor ? (
+            <button
+              type='button'
+              disabled={saving}
+              onClick={() => void update(undoValue, false)}
+              style={{ ...buttonStyle(colors, false), marginLeft: 8 }}
+            >
+              Undo
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
+      {editing ? (
+        <DetailSection label='Edit JSON'>
+          <textarea
+            aria-label='Edited cache entity JSON'
+            value={draft}
+            onChange={event => setDraft(event.currentTarget.value)}
+            spellCheck={false}
+            style={{
+              ...styles.code,
+              width: '100%',
+              minHeight: 280,
+              boxSizing: 'border-box',
+              resize: 'vertical',
+              border: `1px solid ${colors.border}`,
+              borderRadius: 4,
+              padding: 10,
+              background: colors.panel2,
+              color: colors.text,
+            }}
+          />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 8 }}>
+            <span style={{ color: colors.amber, marginRight: 'auto' }}>
+              In-memory only; a refetch or realtime event may overwrite this value.
+            </span>
+            <button
+              type='button'
+              disabled={saving}
+              style={buttonStyle(colors, false)}
+              onClick={() => setEditing(false)}
+            >
+              Cancel
+            </button>
+            <button
+              type='button'
+              disabled={saving}
+              style={buttonStyle(colors, true)}
+              onClick={() => {
+                try {
+                  void update(JSON.parse(draft), true)
+                } catch (error) {
+                  setMessage({
+                    tone: 'red',
+                    text: error instanceof Error ? error.message : 'Invalid JSON',
+                  })
+                }
+              }}
+            >
+              {saving ? 'Applying…' : 'Apply in memory'}
+            </button>
+          </div>
+        </DetailSection>
+      ) : (
+        <DetailBlock>
+          <JsonViewer value={entity.value} label='Current value' />
+        </DetailBlock>
+      )}
+
+      {entity.lastChange ? (
+        <DetailSection label='Provenance'>
+          <div style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: '6px 10px' }}>
+            <span style={{ color: colors.faint }}>Source</span>
+            <span>{entity.lastChange.source}</span>
+            <span style={{ color: colors.faint }}>Operation</span>
+            <span>{entity.lastChange.type}</span>
+            <span style={{ color: colors.faint }}>Observed</span>
+            <span>{formatClock(entity.lastChange.wallAt, { milliseconds: true })}</span>
+          </div>
+          {onViewTrace ? (
+            <button
+              type='button'
+              style={{ ...buttonStyle(colors, false), marginTop: 10 }}
+              onClick={() => onViewTrace(entity.lastChange!.traceId)}
+            >
+              View causal trace
+            </button>
+          ) : null}
+        </DetailSection>
+      ) : null}
+
+      <DetailSection label='Query memberships'>
+        {queryLabels.length === 0 ? (
+          <span style={{ color: colors.faint }}>
+            No retained query currently references this entity.
+          </span>
+        ) : (
+          queryLabels.map(item => {
+            const content = (
+              <>
+                <span
+                  style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {item.label}
+                </span>
+                {item.available && onViewQuery ? (
+                  <span aria-hidden='true' style={{ marginLeft: 'auto', color: colors.faint }}>
+                    →
+                  </span>
+                ) : null}
+              </>
+            )
+            const style: CSSProperties = {
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              padding: '7px 0',
+              border: 0,
+              borderTop: `1px solid ${colors.rowBorder}`,
+              background: 'transparent',
+              color: item.available && onViewQuery ? colors.blue : colors.text,
+              font: 'inherit',
+              textAlign: 'left',
+            }
+            return item.available && onViewQuery ? (
+              <button
+                key={item.queryId}
+                type='button'
+                data-tooltip={`Open ${item.label} in Queries`}
+                onClick={() => onViewQuery(item.queryId)}
+                style={{ ...style, cursor: 'pointer' }}
+              >
+                {content}
+              </button>
+            ) : (
+              <div
+                key={item.queryId}
+                data-tooltip={item.queryId}
+                data-tooltip-overflow=''
+                style={style}
+              >
+                {content}
+              </div>
+            )
+          })
+        )}
+      </DetailSection>
+    </DetailsPane>
+  )
+}
+
+function queryMembership(
+  model: DevtoolsModel,
+  queryId: string,
+): { label: string; available: boolean } {
+  for (const operation of model.operations) {
+    if (operation.rootFetches.some(query => query.queryId === queryId)) {
+      return {
+        label: `${operation.summary.serviceName}.${operation.summary.method} · root`,
+        available: true,
+      }
+    }
+    const nested = operation.underlying.find(item => item.query.queryId === queryId)
+    if (nested)
+      return {
+        label: `${operation.summary.serviceName}.${operation.summary.method} › ${nested.path}`,
+        available: true,
+      }
+  }
+  return { label: queryId, available: false }
+}
+
+function formatEstimatedSize(value: unknown): string {
+  const bytes = estimateSerializedBytes(value)
+  return bytes === null ? '—' : formatBytes(bytes)
+}
+
+function cacheEntityKey(serviceName: string, entityId: string): string {
+  return JSON.stringify([serviceName, entityId])
+}
+
+function cacheServiceButtonStyle(colors: DevtoolsColors, selected: boolean): CSSProperties {
+  return {
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: CACHE_SERVICE_GRID,
+    alignItems: 'center',
+    gap: 4,
+    border: 0,
+    borderBottom: `1px solid ${colors.rowBorder}`,
+    borderLeft: `3px solid ${selected ? colors.blue : 'transparent'}`,
+    padding: '8px 9px',
+    background: selected ? colors.activeButtonBg : 'transparent',
+    color: colors.text,
+    font: 'inherit',
+    textAlign: 'left',
+    cursor: 'pointer',
+  }
+}
diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index 75527393..1139b110 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -1,12 +1,14 @@
-import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import { CacheTab, type DevtoolsCacheEditor } from './CacheTab.js'
 import { EventsTab } from './EventsTab.js'
-import { QueriesTab } from './QueriesTab.js'
+import { QueriesTab, operationIsInactive, operationIsRetained } from './QueriesTab.js'
 import { TimelineFollowControl, TimelineTab } from './TimelineTab.js'
-import { WritesTab } from './WritesTab.js'
-import type { Collector } from './collector.js'
+import type { TimelineVisibility } from './TimelineActivityTable.js'
+import type { Collector, QuerySpan } from './collector.js'
 import { buildDevtoolsModel } from './model.js'
 import {
   ThemeContext,
+  TooltipLayer,
   buttonStyle,
   darkColors,
   lightColors,
@@ -16,7 +18,9 @@ import {
   type DevtoolsThemeMode,
 } from './ui.js'
 
-type Tab = 'queries' | 'timeline' | 'events' | 'writes'
+type Tab = 'queries' | 'timeline' | 'events' | 'cache'
+export type QueryVisibility = 'active' | 'inactive' | 'retained' | 'all' | 'skipped'
+export type EventVisibility = 'groups' | 'raw'
 
 export type DevtoolsInspectionSnapshot =
   | { kind: 'idle'; version: number }
@@ -40,6 +44,7 @@ export interface DevtoolsInspectionController {
 export interface FigbirdDevtoolsPanelProps {
   collector: Collector
   inspection?: DevtoolsInspectionController
+  cacheEditor?: DevtoolsCacheEditor
   status?: string
   theme?: DevtoolsThemeMode
 }
@@ -52,6 +57,7 @@ const getEmptyInspection = () => EMPTY_INSPECTION
 export function FigbirdDevtoolsPanel({
   collector,
   inspection,
+  cacheEditor,
   status,
   theme = 'system',
 }: FigbirdDevtoolsPanelProps) {
@@ -61,9 +67,57 @@ export function FigbirdDevtoolsPanel({
   const themeValue = useMemo(() => ({ colors, styles }), [colors, styles])
   const [tab, setTab] = useState<Tab>('queries')
   const [queryFilter, setQueryFilter] = useState('')
-  const [queryActiveOnly, setQueryActiveOnly] = useState(true)
+  const [queryVisibility, setQueryVisibility] = useState<QueryVisibility>('active')
   const [eventFilter, setEventFilter] = useState('')
+  const [eventVisibility, setEventVisibility] = useState<EventVisibility>('groups')
+  const [timelineFilter, setTimelineFilter] = useState('')
+  const [timelineVisibility, setTimelineVisibility] = useState<TimelineVisibility>('all')
+  const [cacheFilter, setCacheFilter] = useState('')
+  const [selectedQueryId, setSelectedQueryId] = useState<string | null>(null)
+  const [selectedTraceId, setSelectedTraceId] = useState<number | null>(null)
+  const [requestedTimelineActivityId, setRequestedTimelineActivityId] = useState<string | null>(
+    null,
+  )
+  const [requestedCacheEntity, setRequestedCacheEntity] = useState<{
+    serviceName: string
+    itemId: string | number
+  } | null>(null)
   const [timelineFollow, setTimelineFollow] = useState(true)
+  const panelRef = useRef<HTMLElement>(null)
+
+  const inspectFetch = useCallback((span: QuerySpan) => {
+    if (span.fetchId !== undefined) {
+      setTimelineFilter('')
+      setTimelineVisibility('all')
+      setTimelineFollow(false)
+      setRequestedTimelineActivityId(`fetch:${span.fetchId}`)
+      setTab('timeline')
+      return
+    }
+
+    const traceId = span.traceIds?.[0]
+    if (traceId !== undefined) {
+      setSelectedTraceId(traceId)
+      setTab('events')
+    }
+  }, [])
+
+  const openQuery = useCallback(
+    (queryId: string) => {
+      inspection?.stop()
+      setQueryFilter('')
+      setQueryVisibility('all')
+      setSelectedQueryId(queryId)
+      setTab('queries')
+    },
+    [inspection],
+  )
+
+  const openCacheEntity = useCallback((serviceName: string, itemId: string | number) => {
+    setCacheFilter('')
+    setRequestedCacheEntity({ serviceName, itemId })
+    setTab('cache')
+  }, [])
 
   useEffect(() => {
     collector.start()
@@ -80,26 +134,34 @@ export function FigbirdDevtoolsPanel({
   )
 
   const model = useMemo(() => buildDevtoolsModel(snapshot), [snapshot])
+  const skippedQueryCount = model.operations.filter(operation => operation.summary.skipped).length
+  const inactiveQueryCount = model.operations.filter(operationIsInactive).length
+  const retainedQueryCount = model.operations.filter(operationIsRetained).length
   const timelineEmpty =
     snapshot.timeline.realtime.length === 0 &&
-    snapshot.queries.every(query => query.spans.length === 0)
+    snapshot.timeline.connection.length === 0 &&
+    snapshot.queries.every(query => query.spans.length === 0) &&
+    snapshot.writes.every(write => write.startedAt < snapshot.timeline.startedAt)
   const clearTimeline = useCallback(() => {
     collector.clearTimeline()
     setTimelineFollow(true)
   }, [collector])
   const clearAction =
     tab === 'events'
-      ? { disabled: snapshot.events.length === 0, run: () => collector.clearEvents() }
+      ? {
+          label: 'Clear events',
+          disabled: snapshot.events.length === 0,
+          run: () => collector.clearEvents(),
+        }
       : tab === 'timeline'
-        ? { disabled: timelineEmpty, run: clearTimeline }
-        : tab === 'writes'
-          ? { disabled: snapshot.writes.length === 0, run: () => collector.clearWrites() }
-          : null
+        ? { label: 'Clear recording', disabled: timelineEmpty, run: clearTimeline }
+        : null
   const inspected = inspectionSnapshot.kind === 'selected' ? inspectionSnapshot : null
 
   return (
     <ThemeContext.Provider value={themeValue}>
       <section
+        ref={panelRef}
         data-figbird-devtools='panel'
         aria-label='Figbird devtools'
         style={{
@@ -111,19 +173,11 @@ export function FigbirdDevtoolsPanel({
           boxShadow: 'none',
         }}
       >
+        <TooltipLayer rootRef={panelRef} />
         <header style={styles.header}>
           <span style={styles.brand}>figbird</span>
-          {(['queries', 'timeline', 'events', 'writes'] as const).map(item => (
-            <TabButton
-              key={item}
-              active={tab === item}
-              onClick={() => setTab(item)}
-              label={
-                item === 'writes' && snapshot.inFlightWrites > 0
-                  ? `writes (${snapshot.inFlightWrites})`
-                  : item
-              }
-            />
+          {(['queries', 'timeline', 'events', 'cache'] as const).map(item => (
+            <TabButton key={item} active={tab === item} onClick={() => setTab(item)} label={item} />
           ))}
           {tab === 'queries' ? (
             <>
@@ -133,22 +187,24 @@ export function FigbirdDevtoolsPanel({
                 onChange={event => setQueryFilter(event.currentTarget.value)}
                 placeholder='Filter service or query'
               />
-              <label
-                style={{
-                  color: colors.muted,
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 5,
-                  whiteSpace: 'nowrap',
-                }}
+              <select
+                aria-label='Query visibility'
+                value={queryVisibility}
+                onChange={event => setQueryVisibility(event.currentTarget.value as QueryVisibility)}
+                style={styles.select}
               >
-                <input
-                  type='checkbox'
-                  checked={queryActiveOnly}
-                  onChange={event => setQueryActiveOnly(event.currentTarget.checked)}
-                />
-                active only
-              </label>
+                <option value='active'>Live queries</option>
+                <option value='inactive'>
+                  Inactive cached{inactiveQueryCount > 0 ? ` (${inactiveQueryCount})` : ''}
+                </option>
+                <option value='retained'>
+                  Retained history{retainedQueryCount > 0 ? ` (${retainedQueryCount})` : ''}
+                </option>
+                <option value='skipped'>
+                  Skipped queries{skippedQueryCount > 0 ? ` (${skippedQueryCount})` : ''}
+                </option>
+                <option value='all'>All queries</option>
+              </select>
               {inspection ? (
                 <button
                   type='button'
@@ -156,7 +212,7 @@ export function FigbirdDevtoolsPanel({
                   onClick={
                     inspectionSnapshot.kind === 'picking' ? inspection.stop : inspection.start
                   }
-                  title='Pick an area of the inspected page and show its mounted queries'
+                  data-tooltip='Pick an area of the inspected page and show its mounted queries'
                 >
                   {inspectionSnapshot.kind === 'picking' ? 'Cancel' : 'Inspect'}
                 </button>
@@ -165,7 +221,7 @@ export function FigbirdDevtoolsPanel({
                 <button
                   type='button'
                   onClick={inspection!.stop}
-                  title={inspectionTitle(inspected)}
+                  data-tooltip={inspectionTitle(inspected)}
                   style={{
                     ...buttonStyle(colors, true),
                     color: !inspected.supported
@@ -193,19 +249,79 @@ export function FigbirdDevtoolsPanel({
               ) : null}
             </>
           ) : null}
+          {tab === 'timeline' ? (
+            <>
+              <input
+                aria-label='Filter timeline activity'
+                style={styles.input}
+                value={timelineFilter}
+                onChange={event => setTimelineFilter(event.currentTarget.value)}
+                placeholder='Filter activity'
+              />
+              <select
+                aria-label='Timeline visibility'
+                value={timelineVisibility}
+                onChange={event =>
+                  setTimelineVisibility(event.currentTarget.value as TimelineVisibility)
+                }
+                style={styles.select}
+              >
+                <option value='all'>All activity</option>
+                <option value='fetch'>Fetches</option>
+                <option value='realtime'>Realtime</option>
+                <option value='write'>Writes</option>
+                <option value='connection'>Connection</option>
+                <option value='errors'>Errors</option>
+              </select>
+            </>
+          ) : null}
           {tab === 'events' ? (
+            <>
+              <input
+                style={styles.input}
+                value={eventFilter}
+                onChange={event => setEventFilter(event.currentTarget.value)}
+                placeholder={
+                  eventVisibility === 'groups' ? 'Filter causal groups' : 'Filter raw events'
+                }
+              />
+              <select
+                aria-label='Event visibility'
+                data-tooltip='Causal groups connect related work; Raw events shows the instrumentation stream'
+                value={eventVisibility}
+                onChange={event => setEventVisibility(event.currentTarget.value as EventVisibility)}
+                style={styles.select}
+              >
+                <option value='groups'>Causal groups</option>
+                <option value='raw'>Raw events</option>
+              </select>
+            </>
+          ) : null}
+          {tab === 'cache' ? (
             <input
               style={styles.input}
-              value={eventFilter}
-              onChange={event => setEventFilter(event.currentTarget.value)}
-              placeholder='Filter events'
+              value={cacheFilter}
+              onChange={event => setCacheFilter(event.currentTarget.value)}
+              placeholder='Filter service, entity ID, or value'
             />
           ) : null}
+          {tab === 'events' ? (
+            <span
+              data-tooltip='The oldest event is discarded when the bounded buffer is full'
+              style={{ color: colors.muted, whiteSpace: 'nowrap' }}
+            >
+              {snapshot.events.length} / {collector.eventLimit} retained
+            </span>
+          ) : null}
           {tab === 'timeline' ? (
             <TimelineFollowControl value={timelineFollow} onChange={setTimelineFollow} />
           ) : null}
           {clearAction ? (
-            <ClearButton disabled={clearAction.disabled} onClick={clearAction.run} />
+            <ClearButton
+              label={clearAction.label}
+              disabled={clearAction.disabled}
+              onClick={clearAction.run}
+            />
           ) : null}
           <span style={styles.spacer} />
           {status ? (
@@ -217,27 +333,56 @@ export function FigbirdDevtoolsPanel({
             <QueriesTab
               model={model}
               filter={queryFilter}
-              activeOnly={queryActiveOnly}
+              visibility={queryVisibility}
               inspectedQueryCounts={inspected?.queryCounts ?? null}
+              selectedQueryId={selectedQueryId}
+              onSelectedQueryIdChange={setSelectedQueryId}
+              onFetchSelect={inspectFetch}
             />
           ) : null}
           {tab === 'timeline' ? (
             <TimelineTab
               snapshot={snapshot}
               model={model}
+              filter={timelineFilter}
+              visibility={timelineVisibility}
               follow={timelineFollow}
               onFollowChange={setTimelineFollow}
+              requestedActivityId={requestedTimelineActivityId}
+              onRequestedActivityHandled={() => setRequestedTimelineActivityId(null)}
+              onQuerySelect={openQuery}
+              onCacheEntitySelect={openCacheEntity}
+              onTraceSelect={traceId => {
+                setSelectedTraceId(traceId)
+                setTab('events')
+              }}
             />
           ) : null}
           {tab === 'events' ? (
             <EventsTab
               events={snapshot.events}
               filter={eventFilter}
+              visibility={eventVisibility}
               scopes={model.scopesByQueryId}
+              selectedTraceId={selectedTraceId}
+              onSelectedTraceIdChange={setSelectedTraceId}
+              onViewQuery={openQuery}
             />
           ) : null}
-          {tab === 'writes' ? (
-            <WritesTab writes={snapshot.writes} inFlight={snapshot.inFlightWrites} />
+          {tab === 'cache' ? (
+            <CacheTab
+              services={snapshot.cache ?? []}
+              model={model}
+              filter={cacheFilter}
+              requestedEntity={requestedCacheEntity}
+              onRequestedEntityHandled={() => setRequestedCacheEntity(null)}
+              {...(cacheEditor ? { editor: cacheEditor } : {})}
+              onViewTrace={traceId => {
+                setSelectedTraceId(traceId)
+                setTab('events')
+              }}
+              onViewQuery={openQuery}
+            />
           ) : null}
         </main>
       </section>
@@ -263,7 +408,15 @@ function inspectionTitle({
   return `Clear area filter: ${queryCounts.size} query roots mounted in ${label}`
 }
 
-function ClearButton({ disabled, onClick }: { disabled: boolean; onClick: () => void }) {
+function ClearButton({
+  label,
+  disabled,
+  onClick,
+}: {
+  label: string
+  disabled: boolean
+  onClick: () => void
+}) {
   const { colors } = useDevtoolsTheme()
   return (
     <button
@@ -272,7 +425,7 @@ function ClearButton({ disabled, onClick }: { disabled: boolean; onClick: () =>
       disabled={disabled}
       onClick={onClick}
     >
-      Clear
+      {label}
     </button>
   )
 }
@@ -299,7 +452,7 @@ function TabButton({
         background: 'transparent',
         color: active ? colors.text : colors.muted,
         font: 'inherit',
-        fontWeight: active ? 650 : 500,
+        fontWeight: 500,
         cursor: 'pointer',
       }}
       onClick={onClick}
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index b3a80c8d..3e9378b1 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -1,202 +1,497 @@
+import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import type { DevtoolsEvent } from './collector.js'
-import { compactJson, formatClock, formatMs } from './format.js'
+import type { EventVisibility } from './Devtools.js'
+import {
+  buildActivities,
+  buildTraceIndex,
+  displayEvent,
+  eventDetails,
+  eventPayload,
+  eventPayloadLabel,
+  eventQueryId,
+  eventSearchText,
+  rawEventRow,
+  traceIdsForEvent,
+  type ActivityRow,
+  type EventListRow,
+} from './eventModel.js'
+import { formatClock } from './format.js'
+import { JsonViewer } from './JsonViewer.js'
 import type { EventQueryScope } from './model.js'
-import { toneColor, useDevtoolsTheme } from './ui.js'
+import {
+  Badge,
+  ColumnResizeHandle,
+  DetailBlock,
+  DetailSection,
+  DetailStat,
+  DetailStats,
+  DetailsPane,
+  resizableGridTemplate,
+  toneColor,
+  useDetailsPaneWidth,
+  useResizableColumns,
+  useDevtoolsTheme,
+} from './ui.js'
+
+const EVENT_COLUMNS = [
+  { label: 'time', width: 108, minWidth: 84 },
+  { label: 'group', width: 112, minWidth: 84 },
+  { label: 'service', width: 130, minWidth: 92 },
+  { label: 'operation', width: 92, minWidth: 72 },
+  { label: 'scope', width: 135, minWidth: 92 },
+  { label: 'status', width: 94, minWidth: 74 },
+  { label: 'details', width: 300, minWidth: 160 },
+] as const
 
 export function EventsTab({
   events,
   filter,
+  visibility,
   scopes,
+  selectedTraceId,
+  onSelectedTraceIdChange,
+  onViewQuery,
 }: {
   events: DevtoolsEvent[]
   filter: string
+  visibility: EventVisibility
   scopes: ReadonlyMap<string, readonly EventQueryScope[]>
+  selectedTraceId?: number | null
+  onSelectedTraceIdChange?: (traceId: number | null) => void
+  onViewQuery?: (queryId: string) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
-  const rows = events
-    .filter(item => {
-      if (!filter) return true
-      return eventSearchText(item, scopes.get(eventQueryId(item.event) ?? ''))
-        .toLowerCase()
-        .includes(filter.toLowerCase())
-    })
-    .reverse()
+  const [selectedEventId, setSelectedEventId] = useState<number | null>(null)
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(EVENT_COLUMNS)
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const gridTemplateColumns = resizableGridTemplate(columnWidths, 6)
+  const gridMinWidth =
+    columnWidths.reduce((sum, width) => sum + width, 0) + (EVENT_COLUMNS.length - 1) * 10
+  const normalizedFilter = filter.trim().toLowerCase()
+  const traceIndex = useMemo(() => buildTraceIndex(events), [events])
+  const activities = useMemo(
+    () => buildActivities(events, traceIndex, scopes, normalizedFilter.length > 0),
+    [events, normalizedFilter, scopes, traceIndex],
+  )
+  const rows: EventListRow[] =
+    visibility === 'groups'
+      ? activities.filter(activity =>
+          normalizedFilter ? activity.searchText.includes(normalizedFilter) : true,
+        )
+      : events
+          .filter(item => {
+            if (!normalizedFilter) return true
+            return eventSearchText(item, scopes.get(eventQueryId(item.event) ?? ''))
+              .toLowerCase()
+              .includes(normalizedFilter)
+          })
+          .reverse()
+          .map(item => rawEventRow(item, traceIndex))
+  const selectedEvent = events.find(item => item.id === selectedEventId)
+  const selectedActivity = activities.find(
+    activity => activity.representative.id === selectedEventId,
+  )
+  const traceEvents = useMemo(
+    () =>
+      selectedTraceId
+        ? events.filter(item => traceIdsForEvent(item.event, traceIndex).includes(selectedTraceId))
+        : [],
+    [events, selectedTraceId, traceIndex],
+  )
+
+  useEffect(() => {
+    if (!selectedTraceId || traceEvents.length === 0) return
+    if (
+      selectedEvent &&
+      traceIdsForEvent(selectedEvent.event, traceIndex).includes(selectedTraceId)
+    ) {
+      return
+    }
+    const activity = activities.find(item => item.traceId === selectedTraceId)
+    setSelectedEventId(
+      visibility === 'groups' && activity ? activity.representative.id : traceEvents.at(-1)!.id,
+    )
+  }, [activities, selectedEvent, selectedTraceId, traceEvents, traceIndex, visibility])
+
   return (
-    <div style={styles.scroll}>
-      <div
-        style={{
-          ...styles.eventRow,
-          position: 'sticky',
-          top: 0,
-          zIndex: 1,
-          background: colors.bg,
-          color: colors.muted,
-          fontWeight: 600,
-          borderBottom: `1px solid ${colors.border}`,
-        }}
-      >
-        <span>Time</span>
-        <span>Event</span>
-        <span>Scope</span>
-        <span>Details</span>
-      </div>
-      {rows.map(item => {
-        const queryId = eventQueryId(item.event)
-        const queryScopes = queryId ? scopes.get(queryId) : undefined
-        const details = eventDetails(item)
-        return (
-          <div key={item.id} style={styles.eventRow}>
-            <span style={{ ...styles.code, color: colors.faint }}>
-              {formatClock(item.wallAt, { milliseconds: true })}
-            </span>
-            <EventKind kind={item.event.kind} />
-            <EventScopeBadge scopes={queryScopes} queryId={queryId} />
+    <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
+      <div style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            ...styles.eventRow,
+            gridTemplateColumns,
+            minWidth: gridMinWidth,
+            position: 'sticky',
+            top: 0,
+            zIndex: 1,
+            background: colors.bg,
+            color: colors.text,
+            fontWeight: 400,
+            borderBottom: `1px solid ${colors.border}`,
+          }}
+        >
+          {EVENT_COLUMNS.map((column, index) => (
             <span
+              key={column.label}
               style={{
-                ...styles.code,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
+                position: 'relative',
+                alignSelf: 'stretch',
+                display: 'flex',
+                alignItems: 'center',
               }}
-              title={details}
             >
-              {details}
+              {index === 1 && visibility !== 'groups' ? 'raw event' : column.label}
+              <ColumnResizeHandle
+                label={column.label}
+                onMouseDown={event => onColumnResizeStart(index, event)}
+              />
             </span>
+          ))}
+        </div>
+        {rows.length === 0 ? (
+          <div style={{ padding: 16, color: colors.muted }}>
+            No matching {visibility === 'groups' ? 'causal groups' : 'raw events'} recorded.
           </div>
-        )
-      })}
-    </div>
+        ) : null}
+        {rows.map(row => {
+          const item = row.representative
+          const queryId = row.queryId
+          const queryScopes = queryId ? scopes.get(queryId) : undefined
+          return (
+            <div
+              key={row.key}
+              data-event-row=''
+              role='button'
+              tabIndex={0}
+              aria-pressed={item.id === selectedEventId}
+              onClick={() => {
+                setSelectedEventId(item.id)
+                onSelectedTraceIdChange?.(row.traceId ?? null)
+              }}
+              onKeyDown={event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  setSelectedEventId(item.id)
+                  onSelectedTraceIdChange?.(row.traceId ?? null)
+                }
+              }}
+              style={{
+                ...styles.eventRow,
+                gridTemplateColumns,
+                minWidth: gridMinWidth,
+                contentVisibility: 'auto',
+                containIntrinsicSize: '0 33px',
+                cursor: 'pointer',
+                outline: 'none',
+                background: item.id === selectedEventId ? colors.activeButtonBg : undefined,
+                boxShadow: item.id === selectedEventId ? `inset 3px 0 ${colors.blue}` : undefined,
+              }}
+            >
+              <span style={{ ...styles.code, color: colors.faint }}>
+                {formatClock(item.wallAt, { milliseconds: true })}
+              </span>
+              <EventKind kind={row.kind} />
+              <EllipsisValue value={row.subject} />
+              <EllipsisValue value={row.operation} code />
+              <EventScopeBadge
+                scopes={queryScopes}
+                queryId={queryId}
+                {...(onViewQuery ? { onViewQuery } : {})}
+              />
+              <EventStatus status={row.status} tone={row.tone} />
+              <span
+                style={{
+                  ...styles.code,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                data-tooltip={row.details}
+                data-tooltip-overflow=''
+              >
+                {row.details}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+      {selectedEvent ? (
+        <EventDetails
+          item={selectedEvent}
+          {...(selectedTraceId !== null && selectedTraceId !== undefined
+            ? { traceId: selectedTraceId }
+            : {})}
+          {...(visibility === 'groups' && selectedActivity ? { group: selectedActivity } : {})}
+          relatedEvents={
+            selectedTraceId
+              ? traceEvents
+              : visibility === 'groups'
+                ? (selectedActivity?.events ?? [])
+                : []
+          }
+          relatedLabel={
+            selectedTraceId
+              ? `Causal trace #${selectedTraceId}`
+              : visibility === 'groups'
+                ? 'Raw events in group'
+                : null
+          }
+          width={detailsWidth}
+          onResizeStart={onDetailsResizeStart}
+          onClose={() => {
+            setSelectedEventId(null)
+            onSelectedTraceIdChange?.(null)
+          }}
+          onSelectEvent={eventId => setSelectedEventId(eventId)}
+        />
+      ) : null}
+    </section>
   )
 }
 
+function EventDetails({
+  item,
+  group,
+  traceId,
+  relatedEvents,
+  relatedLabel,
+  width,
+  onResizeStart,
+  onClose,
+  onSelectEvent,
+}: {
+  item: DevtoolsEvent
+  group?: ActivityRow
+  traceId?: number
+  relatedEvents?: DevtoolsEvent[]
+  relatedLabel: string | null
+  width: number
+  onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
+  onClose: () => void
+  onSelectEvent: (eventId: number) => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const queryId = group?.queryId ?? eventQueryId(item.event)
+  const payload = item.payload?.state === 'evicted' ? undefined : eventPayload(item.event)
+  return (
+    <DetailsPane
+      title={group?.kind ?? item.event.kind}
+      subtitle={
+        group
+          ? `Causal group · ${formatClock(item.wallAt, { milliseconds: true })}`
+          : formatClock(item.wallAt, { milliseconds: true })
+      }
+      width={width}
+      onResizeStart={onResizeStart}
+      onClose={onClose}
+    >
+      <DetailStats>
+        <DetailStat
+          label='Service'
+          value={
+            group?.subject ?? ('serviceName' in item.event ? item.event.serviceName : 'figbird')
+          }
+        />
+        {group ? <DetailStat label='Operation' value={group.operation} /> : null}
+        {group ? <DetailStat label='Status' value={group.status} /> : null}
+        {!group && 'type' in item.event ? (
+          <DetailStat label='Type' value={item.event.type} />
+        ) : null}
+        {!group && 'method' in item.event ? (
+          <DetailStat label='Method' value={item.event.method} />
+        ) : null}
+        {queryId ? <DetailStat label='Query ID' value={queryId} copyValue={queryId} /> : null}
+        {(group?.traceId ?? traceId) !== undefined ? (
+          <DetailStat
+            label='Trace ID'
+            value={`#${group?.traceId ?? traceId}`}
+            copyValue={String(group?.traceId ?? traceId)}
+          />
+        ) : null}
+        {'mutationId' in item.event ? (
+          <DetailStat
+            label='Write ID'
+            value={`mutation:${item.event.mutationId}`}
+            copyValue={`mutation:${item.event.mutationId}`}
+          />
+        ) : null}
+        {'actionId' in item.event ? (
+          <DetailStat
+            label='Write ID'
+            value={`action:${item.event.actionId}`}
+            copyValue={`action:${item.event.actionId}`}
+          />
+        ) : null}
+        {eventEntityId(item.event) !== undefined ? (
+          <DetailStat
+            label='Entity ID'
+            value={`#${eventEntityId(item.event)}`}
+            copyValue={String(eventEntityId(item.event))}
+          />
+        ) : null}
+      </DetailStats>
+      <DetailBlock>
+        <JsonViewer
+          value={payload}
+          label={eventPayloadLabel(item.event)}
+          emptyLabel={
+            item.payload?.state === 'evicted'
+              ? 'Payload vacuumed to keep the recording bounded'
+              : 'No payload'
+          }
+        />
+      </DetailBlock>
+      {relatedEvents && relatedEvents.length > 1 ? (
+        <DetailSection label={relatedLabel ?? 'Related raw events'}>
+          <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
+            {relatedEvents.map(traceEvent => (
+              <button
+                type='button'
+                key={traceEvent.id}
+                onClick={() => onSelectEvent(traceEvent.id)}
+                style={{
+                  display: 'grid',
+                  width: '100%',
+                  gridTemplateColumns: '82px minmax(112px, auto) minmax(0, 1fr)',
+                  gap: 8,
+                  padding: '7px 0',
+                  borderBottom: `1px solid ${colors.rowBorder}`,
+                  color: traceEvent.id === item.id ? colors.text : colors.muted,
+                  background: traceEvent.id === item.id ? colors.activeButtonBg : 'transparent',
+                  border: 0,
+                  font: 'inherit',
+                  textAlign: 'left',
+                  cursor: 'pointer',
+                }}
+              >
+                <code style={{ ...styles.code, color: colors.faint }}>
+                  {formatClock(traceEvent.wallAt, { milliseconds: true })}
+                </code>
+                <strong style={{ fontWeight: 600 }}>{traceEvent.event.kind}</strong>
+                <span
+                  data-tooltip={eventDetails(traceEvent)}
+                  data-tooltip-overflow=''
+                  style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                >
+                  {eventDetails(traceEvent)}
+                </span>
+              </button>
+            ))}
+          </div>
+        </DetailSection>
+      ) : null}
+      <DetailBlock>
+        <JsonViewer value={displayEvent(item.event)} label='Full event' />
+      </DetailBlock>
+    </DetailsPane>
+  )
+}
+
+function eventEntityId(event: DevtoolsEvent['event']): string | number | undefined {
+  if (event.kind === 'realtime' || event.kind === 'cache:updated') return event.itemId
+  if ('mutationId' in event) return event.id
+  return undefined
+}
+
 function EventScopeBadge({
   scopes,
   queryId,
+  onViewQuery,
 }: {
   scopes: readonly EventQueryScope[] | undefined
   queryId: string | undefined
+  onViewQuery?: (queryId: string) => void
 }) {
   const { colors } = useDevtoolsTheme()
   if (!scopes || scopes.length === 0) {
-    return <span style={{ color: colors.faint }}>-</span>
+    return <span style={{ color: colors.faint }}>—</span>
   }
   const scope = scopes[0]!
-  const background = scopes.some(item => item.kind === 'root')
-    ? colors.amber
+  const tone = scopes.some(item => item.kind === 'root')
+    ? 'amber'
     : scopes.some(item => item.kind === 'nested')
-      ? colors.blue
-      : colors.muted
-  return (
-    <span
-      title={[...scopes.map(item => item.title), queryId ? `query id: ${queryId}` : '']
+      ? 'blue'
+      : 'neutral'
+  const badge = (
+    <Badge
+      tone={tone}
+      tooltip={[...scopes.map(item => item.title), queryId ? `query id: ${queryId}` : '']
         .filter(Boolean)
         .join('\n')}
+    >
+      {scopes.length === 1 ? scope.label : `${scopes.length} scopes`}
+    </Badge>
+  )
+  return queryId && onViewQuery ? (
+    <button
+      type='button'
+      data-tooltip={`Open query ${queryId}`}
+      onClick={event => {
+        event.stopPropagation()
+        onViewQuery(queryId)
+      }}
       style={{
-        display: 'inline-block',
-        maxWidth: 150,
+        border: 0,
+        padding: 0,
+        background: 'transparent',
+        textAlign: 'left',
+        cursor: 'pointer',
+      }}
+    >
+      {badge}
+    </button>
+  ) : (
+    badge
+  )
+}
+
+function EllipsisValue({ value, code = false }: { value: string; code?: boolean }) {
+  const { colors, styles } = useDevtoolsTheme()
+  return (
+    <span
+      data-tooltip={value}
+      data-tooltip-overflow=''
+      style={{
+        ...(code ? styles.code : {}),
+        color: colors.muted,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        color: colors.bg,
-        background,
-        borderRadius: 3,
-        padding: '1px 6px',
-        fontSize: 11,
-        fontWeight: 700,
-        lineHeight: '17px',
       }}
     >
-      {scopes.length === 1 ? scope.label : `${scopes.length} scopes`}
+      {value || '—'}
     </span>
   )
 }
 
-function eventSearchText(item: DevtoolsEvent, scopes?: readonly EventQueryScope[]): string {
-  return [
-    formatClock(item.wallAt, { milliseconds: true }),
-    item.event.kind,
-    eventQueryId(item.event) ?? '',
-    ...(scopes?.map(scope => scope.label) ?? []),
-    eventDetails(item),
-  ].join(' ')
-}
-
-function eventQueryId(event: DevtoolsEvent['event']): string | undefined {
-  switch (event.kind) {
-    case 'fetch:start':
-    case 'fetch:end':
-    case 'fetch:error':
-    case 'reconcile:started':
-      return event.queryId
-    default:
-      return undefined
-  }
-}
-
-function eventDetails(item: DevtoolsEvent): string {
-  const event = item.event
-  switch (event.kind) {
-    case 'fetch:start':
-      return joinEventParts([
-        `${event.serviceName}.${event.method}`,
-        event.resourceId === undefined ? '' : `#${event.resourceId}`,
-        event.params === undefined ? '' : `params ${compactJson(event.params)}`,
-      ])
-    case 'fetch:end':
-      return joinEventParts([
-        `${event.serviceName}.${event.method}`,
-        `${event.itemCount} ${event.itemCount === 1 ? 'item' : 'items'}`,
-        formatMs(event.durationMs),
-      ])
-    case 'fetch:error':
-      return joinEventParts([
-        `${event.serviceName}.${event.method}`,
-        formatMs(event.durationMs),
-        errorMessage(event.error),
-      ])
-    case 'reconcile:started':
-      return event.serviceName
-    case 'realtime':
-      return joinEventParts([
-        event.serviceName,
-        event.type,
-        event.itemId === undefined ? '' : `#${event.itemId}`,
-      ])
-    case 'mutate:start':
-    case 'mutate:update':
-    case 'mutate:end':
-    case 'mutate:error':
-    case 'mutate:rollback':
-      return joinEventParts([
-        `${event.serviceName}.${event.method}`,
-        `mutation ${event.mutationId}`,
-        event.id === undefined ? '' : `#${event.id}`,
-        'optimistic' in event && event.optimistic ? 'optimistic' : '',
-        'durationMs' in event ? formatMs(event.durationMs) : '',
-        'error' in event ? errorMessage(event.error) : '',
-      ])
-    case 'action:start':
-    case 'action:end':
-    case 'action:error':
-      return joinEventParts([
-        `action ${event.actionId}`,
-        event.name ?? '(anonymous)',
-        'durationMs' in event ? formatMs(event.durationMs) : '',
-        'error' in event ? errorMessage(event.error) : '',
-      ])
-    default: {
-      const exhaustive: never = event
-      return exhaustive
-    }
-  }
-}
-
-function joinEventParts(parts: string[]): string {
-  return parts.filter(Boolean).join(' · ')
-}
-
-function errorMessage(error: Error): string {
-  return error.message || String(error)
+function EventStatus({
+  status,
+  tone,
+}: {
+  status: string
+  tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral'
+}) {
+  const { colors } = useDevtoolsTheme()
+  return (
+    <span
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        color: toneColor(colors, tone),
+        fontSize: 11,
+        lineHeight: '14px',
+      }}
+    >
+      <span
+        aria-hidden='true'
+        style={{ width: 6, height: 6, borderRadius: 999, background: 'currentColor' }}
+      />
+      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        {status}
+      </span>
+    </span>
+  )
 }
 
 function EventKind({ kind }: { kind: string }) {
@@ -204,24 +499,14 @@ function EventKind({ kind }: { kind: string }) {
   return (
     <span
       style={{
-        color: toneColor(colors, eventTone(kind)),
+        color: colors.text,
         fontWeight: 600,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
       }}
-      title={kind}
     >
       {kind}
     </span>
   )
 }
-
-function eventTone(kind: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
-  if (kind.endsWith(':error') || kind.endsWith(':rollback')) return 'red'
-  if (kind === 'realtime') return 'blue'
-  if (kind.endsWith(':update')) return 'blue'
-  if (kind.endsWith(':start')) return 'amber'
-  if (kind.endsWith(':end')) return 'green'
-  return 'neutral'
-}
diff --git a/lib/devtools/JsonViewer.tsx b/lib/devtools/JsonViewer.tsx
new file mode 100644
index 00000000..43969e14
--- /dev/null
+++ b/lib/devtools/JsonViewer.tsx
@@ -0,0 +1,492 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { buttonStyle, copyText, useDevtoolsTheme } from './ui.js'
+
+type JsonPrimitive = null | boolean | number | string
+type JsonTreeValue =
+  JsonPrimitive | JsonTreeValue[] | { [key: string]: JsonTreeValue } | SpecialValue
+
+interface SpecialValue {
+  __figbirdJsonSpecial: true
+  text: string
+}
+
+interface NormalizationBudget {
+  remaining: number
+}
+
+const MAX_JSON_CHILDREN = 500
+const MAX_JSON_NODES = 5_000
+
+export function JsonViewer({
+  value,
+  emptyLabel = 'No data available',
+  label,
+  meta,
+  maxHeight = 360,
+}: {
+  value: unknown
+  emptyLabel?: string
+  label?: string
+  meta?: string
+  maxHeight?: number | string
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const [raw, setRaw] = useState(false)
+  const [expandAll, setExpandAll] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const normalized = useMemo(() => normalizeJson(value), [value])
+  const copyValue = useMemo(
+    () => (value === undefined ? null : prettyNormalizedJson(normalized)),
+    [normalized, value],
+  )
+
+  useEffect(() => {
+    if (!copied) return
+    const timeout = setTimeout(() => setCopied(false), 1_200)
+    return () => clearTimeout(timeout)
+  }, [copied])
+
+  if (value === undefined && !label) {
+    return (
+      <div
+        style={{
+          ...styles.code,
+          padding: 10,
+          color: colors.faint,
+          background: colors.panel2,
+          borderRadius: 4,
+        }}
+      >
+        {emptyLabel}
+      </div>
+    )
+  }
+
+  const expandable = isContainer(normalized) && childEntries(normalized).length > 0
+  return (
+    <div
+      style={{
+        border: `1px solid ${colors.rowBorder}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        background: colors.panel2,
+      }}
+    >
+      <div
+        style={{
+          minHeight: 30,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          padding: '3px 5px 3px 9px',
+          borderBottom: `1px solid ${colors.rowBorder}`,
+          background: colors.toolbar,
+        }}
+      >
+        {label ? (
+          <>
+            <strong style={{ color: colors.text, fontWeight: 650 }}>{label}</strong>
+            {meta ? <span style={{ color: colors.muted }}>{meta}</span> : null}
+          </>
+        ) : (
+          <code style={{ ...styles.code, color: colors.faint }}>{valueSummary(normalized)}</code>
+        )}
+        <span style={styles.spacer} />
+        {!raw && expandable ? (
+          <button
+            type='button'
+            style={jsonButtonStyle(colors)}
+            onClick={() => setExpandAll(current => !current)}
+          >
+            {expandAll ? 'Collapse nested' : 'Expand all'}
+          </button>
+        ) : null}
+        {copyValue !== null ? (
+          <button
+            type='button'
+            aria-label={`Copy ${label ?? 'JSON'}`}
+            style={jsonButtonStyle(colors, copied)}
+            onClick={() => {
+              void copyText(copyValue).then(success => {
+                if (success) setCopied(true)
+              })
+            }}
+          >
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        ) : null}
+        {value !== undefined ? (
+          <button
+            type='button'
+            aria-pressed={raw}
+            style={jsonButtonStyle(colors, raw)}
+            onClick={() => setRaw(current => !current)}
+          >
+            Raw
+          </button>
+        ) : null}
+      </div>
+      <div
+        style={{
+          ...styles.code,
+          maxHeight,
+          overflow: 'auto',
+          padding: '8px 10px',
+          lineHeight: 1.55,
+        }}
+      >
+        {value === undefined ? (
+          <span style={{ color: colors.faint }}>{emptyLabel}</span>
+        ) : raw ? (
+          <pre
+            style={{
+              font: 'inherit',
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'anywhere',
+              margin: 0,
+            }}
+          >
+            <HighlightedJson text={prettyNormalizedJson(normalized)} />
+          </pre>
+        ) : (
+          <JsonTreeRoot value={normalized} expandAll={expandAll} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function JsonTreeRoot({ value, expandAll }: { value: JsonTreeValue; expandAll: boolean }) {
+  const { colors } = useDevtoolsTheme()
+  if (!isContainer(value)) return <JsonLeaf value={value} />
+  const entries = childEntries(value)
+  const [open, close] = Array.isArray(value) ? ['[', ']'] : ['{', '}']
+  if (entries.length === 0) return <span style={{ color: colors.muted }}>{open + close}</span>
+  return (
+    <div>
+      <span style={{ color: colors.muted }}>{open}</span>
+      <div style={{ marginLeft: 13, borderLeft: `1px solid ${colors.rowBorder}`, paddingLeft: 7 }}>
+        {entries.map(([key, child], index) => (
+          <JsonNode
+            key={key}
+            name={key}
+            value={child}
+            arrayItem={Array.isArray(value)}
+            comma={index < entries.length - 1}
+            expandAll={expandAll}
+            defaultOpen={Array.isArray(value) && isContainer(child)}
+          />
+        ))}
+      </div>
+      <span style={{ color: colors.muted }}>{close}</span>
+    </div>
+  )
+}
+
+function JsonNode({
+  name,
+  value,
+  arrayItem,
+  comma,
+  expandAll,
+  defaultOpen,
+}: {
+  name: string
+  value: JsonTreeValue
+  arrayItem: boolean
+  comma: boolean
+  expandAll: boolean
+  defaultOpen: boolean
+}) {
+  const { colors } = useDevtoolsTheme()
+  const expandable = isContainer(value) && childEntries(value).length > 0
+  const [open, setOpen] = useState(expandAll || defaultOpen)
+  useEffect(() => setOpen(expandAll || defaultOpen), [defaultOpen, expandAll])
+  const key = (
+    <>
+      <span style={{ color: arrayItem ? colors.faint : colors.blue }}>{name}</span>
+      <span style={{ color: colors.muted }}>: </span>
+    </>
+  )
+
+  if (!expandable) {
+    return (
+      <div style={{ display: 'flex', minWidth: 0 }}>
+        <span aria-hidden='true' style={{ width: 14, flex: '0 0 14px' }} />
+        <span style={{ minWidth: 0, overflowWrap: 'anywhere' }}>
+          {key}
+          <JsonLeaf value={value} />
+          {comma ? <span style={{ color: colors.muted }}>,</span> : null}
+        </span>
+      </div>
+    )
+  }
+
+  const entries = childEntries(value)
+  const [opening, closing] = Array.isArray(value) ? ['[', ']'] : ['{', '}']
+  return (
+    <div>
+      <div style={{ display: 'flex', minWidth: 0 }}>
+        <button
+          type='button'
+          aria-label={`${open ? 'Collapse' : 'Expand'} ${name}`}
+          aria-expanded={open}
+          onClick={() => setOpen(current => !current)}
+          style={{
+            width: 14,
+            flex: '0 0 14px',
+            padding: 0,
+            border: 0,
+            background: 'transparent',
+            color: colors.faint,
+            font: 'inherit',
+            lineHeight: 'inherit',
+            cursor: 'pointer',
+          }}
+        >
+          {open ? '▾' : '▸'}
+        </button>
+        <button
+          type='button'
+          onClick={() => setOpen(current => !current)}
+          style={{
+            minWidth: 0,
+            padding: 0,
+            border: 0,
+            background: 'transparent',
+            color: colors.text,
+            font: 'inherit',
+            lineHeight: 'inherit',
+            textAlign: 'left',
+            cursor: 'pointer',
+          }}
+        >
+          {key}
+          <span style={{ color: colors.muted }}>{open ? opening : `${opening}…${closing}`}</span>
+          {!open ? (
+            <span style={{ color: colors.faint, marginLeft: 6 }}>{entryCountLabel(value)}</span>
+          ) : null}
+          {!open && comma ? <span style={{ color: colors.muted }}>,</span> : null}
+        </button>
+      </div>
+      {open ? (
+        <>
+          <div
+            style={{
+              marginLeft: 13,
+              borderLeft: `1px solid ${colors.rowBorder}`,
+              paddingLeft: 7,
+            }}
+          >
+            {entries.map(([childName, child], index) => (
+              <JsonNode
+                key={childName}
+                name={childName}
+                value={child}
+                arrayItem={Array.isArray(value)}
+                comma={index < entries.length - 1}
+                expandAll={expandAll}
+                defaultOpen={false}
+              />
+            ))}
+          </div>
+          <div style={{ marginLeft: 14, color: colors.muted }}>
+            {closing}
+            {comma ? ',' : ''}
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+function JsonLeaf({ value }: { value: JsonTreeValue }) {
+  const { colors } = useDevtoolsTheme()
+  if (isContainer(value)) {
+    return <span style={{ color: colors.muted }}>{Array.isArray(value) ? '[]' : '{}'}</span>
+  }
+  if (isSpecial(value)) return <span style={{ color: colors.faint }}>{value.text}</span>
+  if (value === null) return <span style={{ color: colors.faint }}>null</span>
+  if (typeof value === 'string')
+    return <span style={{ color: colors.green }}>{JSON.stringify(value)}</span>
+  if (typeof value === 'number')
+    return <span style={{ color: colors.purple }}>{String(value)}</span>
+  return <span style={{ color: colors.amber }}>{String(value)}</span>
+}
+
+function HighlightedJson({ text }: { text: string }) {
+  const { colors } = useDevtoolsTheme()
+  const parts: ReactNode[] = []
+  const token = /("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g
+  let cursor = 0
+  let match: RegExpExecArray | null
+  while ((match = token.exec(text))) {
+    if (match.index > cursor) parts.push(text.slice(cursor, match.index))
+    const value = match[0]
+    if (match[1]) {
+      const isKey = Boolean(match[2])
+      parts.push(
+        <span key={match.index} style={{ color: isKey ? colors.blue : colors.green }}>
+          {match[1]}
+        </span>,
+      )
+      if (match[2]) parts.push(<span key={`${match.index}:`}>{match[2]}</span>)
+    } else {
+      parts.push(
+        <span
+          key={match.index}
+          style={{
+            color:
+              value === 'null'
+                ? colors.faint
+                : value === 'true' || value === 'false'
+                  ? colors.amber
+                  : colors.purple,
+          }}
+        >
+          {value}
+        </span>,
+      )
+    }
+    cursor = match.index + value.length
+  }
+  if (cursor < text.length) parts.push(text.slice(cursor))
+  return parts
+}
+
+function normalizeJson(
+  value: unknown,
+  ancestors = new WeakSet<object>(),
+  depth = 0,
+  budget: NormalizationBudget = { remaining: MAX_JSON_NODES },
+): JsonTreeValue {
+  if (budget.remaining-- <= 0) return special('[Additional values omitted]')
+  if (value === null || typeof value === 'string' || typeof value === 'boolean') return value
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : special(String(value))
+  }
+  if (typeof value === 'undefined') return special('undefined')
+  if (typeof value === 'bigint') return special(`${String(value)}n`)
+  if (typeof value === 'function') return special(`[Function ${value.name || 'anonymous'}]`)
+  if (typeof value === 'symbol') return special(String(value))
+  if (typeof value !== 'object') return special(String(value))
+  if (depth >= 20) return special('[Max depth]')
+  if (ancestors.has(value)) return special('[Circular]')
+  if (value instanceof Date) return value.toISOString()
+  if (value instanceof Error) {
+    return normalizeJson({ name: value.name, message: value.message }, ancestors, depth + 1, budget)
+  }
+
+  ancestors.add(value)
+  let normalized: JsonTreeValue
+  if (Array.isArray(value)) {
+    const visible = value
+      .slice(0, MAX_JSON_CHILDREN)
+      .map(item => normalizeJson(item, ancestors, depth + 1, budget))
+    normalized =
+      value.length > visible.length
+        ? [...visible, special(`[${value.length - visible.length} more items omitted]`)]
+        : visible
+  } else if (value instanceof Map) {
+    const entries: Array<[string, JsonTreeValue]> = []
+    for (const [key, item] of value) {
+      if (entries.length >= MAX_JSON_CHILDREN) break
+      entries.push([String(key), normalizeJson(item, ancestors, depth + 1, budget)])
+    }
+    if (value.size > entries.length) {
+      entries.push(['…', special(`[${value.size - entries.length} more entries omitted]`)])
+    }
+    normalized = Object.fromEntries(entries)
+  } else if (value instanceof Set) {
+    const entries: JsonTreeValue[] = []
+    for (const item of value) {
+      if (entries.length >= MAX_JSON_CHILDREN) break
+      entries.push(normalizeJson(item, ancestors, depth + 1, budget))
+    }
+    if (value.size > entries.length) {
+      entries.push(special(`[${value.size - entries.length} more items omitted]`))
+    }
+    normalized = entries
+  } else {
+    try {
+      const entries: Array<[string, JsonTreeValue]> = []
+      let omitted = false
+      for (const key in value) {
+        if (!Object.prototype.hasOwnProperty.call(value, key)) continue
+        if (entries.length >= MAX_JSON_CHILDREN) {
+          omitted = true
+          break
+        }
+        entries.push([
+          key,
+          normalizeJson((value as Record<string, unknown>)[key], ancestors, depth + 1, budget),
+        ])
+      }
+      if (omitted) {
+        entries.push(['…', special('[More properties omitted]')])
+      }
+      normalized = Object.fromEntries(entries)
+    } catch {
+      normalized = special('[Uninspectable object]')
+    }
+  }
+  ancestors.delete(value)
+  return normalized
+}
+
+function prettyNormalizedJson(value: JsonTreeValue): string {
+  return (
+    JSON.stringify(value, (_key, item: unknown) => (isSpecial(item) ? item.text : item), 2) ??
+    String(value)
+  )
+}
+
+function isContainer(
+  value: JsonTreeValue,
+): value is JsonTreeValue[] | { [key: string]: JsonTreeValue } {
+  return typeof value === 'object' && value !== null && !isSpecial(value)
+}
+
+function isSpecial(value: unknown): value is SpecialValue {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '__figbirdJsonSpecial' in value &&
+    value.__figbirdJsonSpecial === true
+  )
+}
+
+function special(text: string): SpecialValue {
+  return { __figbirdJsonSpecial: true, text }
+}
+
+function childEntries(value: JsonTreeValue): Array<[string, JsonTreeValue]> {
+  if (Array.isArray(value)) return value.map((item, index) => [String(index), item])
+  if (!isContainer(value)) return []
+  return Object.entries(value)
+}
+
+function valueSummary(value: JsonTreeValue): string {
+  if (Array.isArray(value)) return `Array(${value.length})`
+  if (isContainer(value)) {
+    const count = Object.keys(value).length
+    return `${count} ${count === 1 ? 'property' : 'properties'}`
+  }
+  return 'Value'
+}
+
+function entryCountLabel(value: JsonTreeValue[] | { [key: string]: JsonTreeValue }): string {
+  const count = childEntries(value).length
+  return Array.isArray(value)
+    ? `${count} ${count === 1 ? 'item' : 'items'}`
+    : `${count} ${count === 1 ? 'property' : 'properties'}`
+}
+
+function jsonButtonStyle(colors: ReturnType<typeof useDevtoolsTheme>['colors'], active = false) {
+  return {
+    ...buttonStyle(colors, active),
+    minHeight: 22,
+    padding: '2px 7px',
+    fontSize: 11,
+  }
+}
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 45ccfed5..0084d430 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -1,54 +1,90 @@
-import { useState, type CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
+import type { QueryVisibility } from './Devtools.js'
+import type { QuerySpan } from './collector.js'
 import { compactJson, formatAge, formatMs } from './format.js'
 import type { DevtoolsModel, DevtoolsOperation, QuerySummary } from './model.js'
 import { QueryDetails } from './QueryDetails.js'
-import { ClassBadge, plural, QueryStatusDot } from './QueryPresentation.js'
-import { useDetailsPaneWidth, useDevtoolsTheme } from './ui.js'
+import { ClassBadge, plural, queryStatus, QueryStatusDot } from './QueryPresentation.js'
+import {
+  ColumnResizeHandle,
+  useDetailsPaneWidth,
+  useResizableColumns,
+  useDevtoolsTheme,
+} from './ui.js'
 
 interface QueryRow {
   operation: DevtoolsOperation
   localSubscriberCount: number
 }
 
+export function operationIsInactive(operation: DevtoolsOperation): boolean {
+  const queries = [operation.summary, ...operation.underlying.map(item => item.query)]
+  return (
+    operation.summary.skipped !== true &&
+    queries.some(query => query.present) &&
+    (operation.summary.prefetchCount ?? 0) === 0 &&
+    (operation.summary.prepareCount ?? 0) === 0 &&
+    queries.every(query => query.subscriberCount === 0)
+  )
+}
+
+export function operationIsRetained(operation: DevtoolsOperation): boolean {
+  const queries = [operation.summary, ...operation.underlying.map(item => item.query)]
+  return operation.summary.skipped !== true && queries.every(query => !query.present)
+}
+
 const QUERY_COLUMNS = [
   {
-    label: 'query',
-    width: '18%',
+    label: 'service',
+    width: 185,
+    minWidth: 120,
     description:
-      'Root query operation. The dot shows its state: green active, amber cached, blue fetching, red error, or gray retained history.',
+      'Query service. The dot shows its state: green active, amber inactive cached, blue pending, red error, or gray skipped/retained history.',
   },
   {
-    label: 'shape',
-    width: '38%',
+    label: 'operation',
+    width: 112,
+    minWidth: 88,
     description:
-      'Query method, parameters, related data, and the number of underlying relation fetches.',
+      'The logical Figbird operation. Paginate and all may use find as their transport request method.',
+  },
+  {
+    label: 'definition',
+    width: 420,
+    minWidth: 180,
+    description: 'Query arguments followed by its related data paths.',
   },
   {
-    label: 'class',
-    width: '12%',
+    label: 'maintenance',
+    width: 160,
+    minWidth: 105,
     description:
       'How Figbird maintains the result.\nlocal-exact: membership and ordering are provable locally.\nserver-window: a limited or sorted server result; uncertain changes trigger a refetch.\nserver-authoritative: the server decides membership; cursor queries may still merge updates proven not to move page boundaries.\nget: a direct lookup by ID.',
   },
   {
     label: 'rows',
-    width: '7%',
-    description: 'Number of items currently in the query result.',
+    width: 75,
+    minWidth: 55,
+    description: 'Number of rows currently in the query result.',
   },
   {
-    label: 'fetches',
-    width: '11%',
+    label: 'fetch activity',
+    width: 175,
+    minWidth: 100,
     description:
-      'Completed fetch attempts · realtime service events observed while the query was active · event-driven refetches · failed fetches. Extra counts appear only when non-zero.',
+      'Completed fetch attempts · realtime notifications observed while the query was active · failed fetches. Extra counts appear only when non-zero.',
   },
   {
-    label: 'last',
-    width: '7%',
+    label: 'last fetch',
+    width: 90,
+    minWidth: 65,
     description:
       'Duration of the most recently completed fetch. "cached" or "warm" means data was available without a measured fetch in this devtools session.',
   },
   {
-    label: 'age',
-    width: '7%',
+    label: 'fetched',
+    width: 80,
+    minWidth: 60,
     description: "Time since this query's data was last fetched.",
   },
 ] as const
@@ -56,45 +92,80 @@ const QUERY_COLUMNS = [
 export function QueriesTab({
   model,
   filter,
-  activeOnly,
+  visibility,
   inspectedQueryCounts,
+  selectedQueryId,
+  onSelectedQueryIdChange,
+  onFetchSelect,
 }: {
   model: DevtoolsModel
   filter: string
-  activeOnly: boolean
+  visibility: QueryVisibility
   inspectedQueryCounts: ReadonlyMap<string, number> | null
+  selectedQueryId: string | null
+  onSelectedQueryIdChange: (queryId: string | null) => void
+  onFetchSelect: (span: QuerySpan) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
-  const [selectedOperationKey, setSelectedOperationKey] = useState<string | null>(null)
-  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
-  const rows: QueryRow[] = model.operations.flatMap(operation => {
-    const query = operation.summary
-    const localSubscriberCount = inspectedQueryCounts?.get(operation.key) ?? 0
-    if (inspectedQueryCounts && localSubscriberCount === 0) return []
-    if (
-      activeOnly &&
-      query.subscriberCount === 0 &&
-      operation.underlying.every(item => item.query.subscriberCount === 0)
-    ) {
-      return []
-    }
-    const haystack = [
-      query.serviceName,
-      query.method,
-      operation.composition?.detail ?? '',
-      JSON.stringify(query.query ?? {}),
-      ...operation.underlying.map(item =>
-        [
-          item.path,
-          item.query.serviceName,
-          item.query.method,
-          JSON.stringify(item.query.query ?? {}),
-        ].join(' '),
-      ),
-    ].join(' ')
-    if (!haystack.toLowerCase().includes(filter.toLowerCase())) return []
-    return [{ operation, localSubscriberCount }]
-  })
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(QUERY_COLUMNS)
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth({ defaultWidth: 680 })
+  const normalizedFilter = filter.trim().toLowerCase()
+  const rows: QueryRow[] = model.operations
+    .flatMap(operation => {
+      const query = operation.summary
+      const localSubscriberCount = inspectedQueryCounts?.get(operation.key) ?? 0
+      if (inspectedQueryCounts && localSubscriberCount === 0) return []
+      if (visibility === 'skipped' && query.skipped !== true) return []
+      if (visibility === 'inactive' && !operationIsInactive(operation)) return []
+      if (visibility === 'retained' && !operationIsRetained(operation)) return []
+      if (visibility === 'active' && query.skipped === true) return []
+      if (
+        visibility === 'active' &&
+        query.subscriberCount === 0 &&
+        (query.prefetchCount ?? 0) === 0 &&
+        (query.prepareCount ?? 0) === 0 &&
+        operation.underlying.every(item => item.query.subscriberCount === 0)
+      ) {
+        return []
+      }
+      if (normalizedFilter) {
+        const haystack = [
+          query.serviceName,
+          query.method,
+          query.resourceId ?? '',
+          query.classification,
+          queryStatus(query).kind,
+          compactJson(query.data),
+          ...operation.rootFetches.map(root => root.queryId),
+          operation.composition?.detail ?? '',
+          JSON.stringify(query.query ?? {}),
+          ...operation.underlying.map(item =>
+            [
+              item.path,
+              item.query.serviceName,
+              item.query.method,
+              item.query.queryId,
+              item.query.resourceId ?? '',
+              item.query.classification,
+              queryStatus(item.query).kind,
+              JSON.stringify(item.query.query ?? {}),
+              compactJson(item.query.data),
+            ].join(' '),
+          ),
+        ].join(' ')
+        if (!haystack.toLowerCase().includes(normalizedFilter)) return []
+      }
+      return [{ operation, localSubscriberCount }]
+    })
+    .sort((a, b) => {
+      const aQuery = a.operation.summary
+      const bQuery = b.operation.summary
+      return `${aQuery.serviceName}.${aQuery.method}`.localeCompare(
+        `${bQuery.serviceName}.${bQuery.method}`,
+        undefined,
+        { sensitivity: 'base' },
+      )
+    })
 
   const ellipsizedCode: CSSProperties = {
     ...styles.code,
@@ -103,29 +174,35 @@ export function QueriesTab({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   }
-  const selectedOperation = rows.find(row => row.operation.key === selectedOperationKey)?.operation
+  const selectedOperation = rows.find(row =>
+    operationContainsQuery(row.operation, selectedQueryId),
+  )?.operation
+  const selectedOperationKey = selectedOperation?.key ?? null
 
   return (
     <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
       <div style={{ ...styles.scroll, flex: 1, minHeight: 0 }}>
-        <table style={styles.table}>
+        <table
+          style={{ ...styles.table, minWidth: columnWidths.reduce((sum, width) => sum + width, 0) }}
+        >
           <colgroup>
-            {QUERY_COLUMNS.map(column => (
-              <col key={column.label} style={{ width: column.width }} />
+            {QUERY_COLUMNS.map((column, index) => (
+              <col key={column.label} style={{ width: columnWidths[index] }} />
             ))}
           </colgroup>
           <thead>
             <tr>
-              {QUERY_COLUMNS.map(column => (
-                <th key={column.label} style={styles.th} title={column.description}>
-                  <span
-                    style={{
-                      borderBottom: `1px dotted ${colors.faint}`,
-                      cursor: 'help',
-                    }}
-                  >
-                    {column.label}
-                  </span>
+              {QUERY_COLUMNS.map((column, index) => (
+                <th
+                  key={column.label}
+                  style={{ ...styles.th, position: 'sticky' }}
+                  data-tooltip={column.description}
+                >
+                  {column.label}
+                  <ColumnResizeHandle
+                    label={column.label}
+                    onMouseDown={event => onColumnResizeStart(index, event)}
+                  />
                 </th>
               ))}
             </tr>
@@ -140,22 +217,25 @@ export function QueriesTab({
             ) : null}
             {rows.map(({ operation, localSubscriberCount }) => {
               const query = operation.summary
+              const plan = queryPlan(operation)
+              const definition = queryDefinition(plan)
               const isSelected = selectedOperationKey === operation.key
               return (
                 <tr
                   key={operation.key}
                   tabIndex={0}
                   aria-selected={isSelected}
-                  title='Select query details'
-                  onClick={() => setSelectedOperationKey(operation.key)}
+                  onClick={() => onSelectedQueryIdChange(operationRootQueryId(operation))}
                   onKeyDown={event => {
                     if (event.key === 'Enter' || event.key === ' ') {
                       event.preventDefault()
-                      setSelectedOperationKey(operation.key)
+                      onSelectedQueryIdChange(operationRootQueryId(operation))
                     }
                   }}
                   style={{
                     cursor: 'pointer',
+                    contentVisibility: 'auto',
+                    containIntrinsicSize: '0 33px',
                     background: isSelected ? colors.activeButtonBg : colors.bg,
                     boxShadow: isSelected ? `inset 3px 0 ${colors.blue}` : undefined,
                     outline: 'none',
@@ -170,18 +250,6 @@ export function QueriesTab({
                         minWidth: 0,
                       }}
                     >
-                      <span
-                        aria-hidden='true'
-                        style={{
-                          width: 8,
-                          color: isSelected ? colors.blue : colors.faint,
-                          flexShrink: 0,
-                          fontSize: 14,
-                          lineHeight: 1,
-                        }}
-                      >
-                        {isSelected ? '⌄' : '›'}
-                      </span>
                       <QueryStatusDot query={query} />
                       <span
                         style={{
@@ -193,13 +261,10 @@ export function QueriesTab({
                         }}
                       >
                         {query.serviceName}
-                        <span style={{ color: colors.muted, fontWeight: 500 }}>
-                          .{query.method}
-                        </span>
                       </span>
                       {inspectedQueryCounts ? (
                         <span
-                          title={`${localSubscriberCount} of ${query.subscriberCount} subscribers in the selected area`}
+                          data-tooltip={`${localSubscriberCount} of ${query.subscriberCount} subscribers in the selected area`}
                           style={{ color: colors.blue, whiteSpace: 'nowrap', flexShrink: 0 }}
                         >
                           {localSubscriberCount} here
@@ -207,26 +272,22 @@ export function QueriesTab({
                       ) : null}
                     </span>
                   </td>
+                  <td style={styles.td}>
+                    <code
+                      data-tooltip={queryOperationTooltip(operation)}
+                      style={{ ...styles.code, color: colors.text }}
+                    >
+                      {queryOperationName(operation)}
+                    </code>
+                  </td>
                   <td style={{ ...styles.td, maxWidth: 420 }}>
                     <span
-                      title={[
-                        operation.composition?.title,
-                        `params ${JSON.stringify(query.query ?? {}, null, 2)}`,
-                      ]
-                        .filter(Boolean)
-                        .join('\n\n')}
                       style={{
                         ...ellipsizedCode,
-                        color: operation.composition ? colors.text : colors.faint,
+                        color: definition === '—' ? colors.faint : colors.text,
                       }}
                     >
-                      {operation.composition?.detail ?? compactJson(query.query)}
-                      {operation.rootFetches.length > 1
-                        ? ` · ${operation.rootFetches.length} root fetches`
-                        : ''}
-                      {operation.underlying.length > 0
-                        ? ` · ${operation.underlying.length} underlying`
-                        : ''}
+                      {definition}
                     </span>
                   </td>
                   <td style={styles.td}>
@@ -253,15 +314,67 @@ export function QueriesTab({
       {selectedOperation ? (
         <QueryDetails
           operation={selectedOperation}
+          selectedQueryId={selectedQueryId}
           width={detailsWidth}
+          onFetchSelect={onFetchSelect}
           onResizeStart={onDetailsResizeStart}
-          onClose={() => setSelectedOperationKey(null)}
+          onClose={() => onSelectedQueryIdChange(null)}
         />
       ) : null}
     </section>
   )
 }
 
+function operationContainsQuery(operation: DevtoolsOperation, queryId: string | null): boolean {
+  if (!queryId) return false
+  return (
+    operation.rootFetches.some(query => query.queryId === queryId) ||
+    operation.underlying.some(item => item.query.queryId === queryId)
+  )
+}
+
+function operationRootQueryId(operation: DevtoolsOperation): string {
+  return operation.rootFetches[0]?.queryId ?? operation.key
+}
+
+function queryPlan(operation: DevtoolsOperation): string {
+  if (operation.composition) return operation.composition.plan
+  const query = operation.summary
+  const args = [
+    query.resourceId === undefined ? '' : formatPlanValue(query.resourceId),
+    query.query === undefined || Object.keys(query.query).length === 0
+      ? ''
+      : compactJson(query.query),
+  ].filter(Boolean)
+  return `${query.method}(${args.join(', ')})`
+}
+
+function queryDefinition(plan: string): string {
+  const call = /^[^(]+\((.*)\)(.*)$/.exec(plan)
+  if (!call) return plan
+  const argumentsText = call[1]!.trim()
+  const relations = call[2]!.trim()
+  return [argumentsText, relations].filter(Boolean).join(' ') || '—'
+}
+
+function queryOperationName(operation: DevtoolsOperation): string {
+  if (!operation.composition) return operation.summary.method
+  const qualified = operation.composition.operation
+  const operationCall = qualified.slice(qualified.indexOf('.') + 1)
+  return operationCall.split('(')[0] ?? operation.summary.method
+}
+
+function queryOperationTooltip(operation: DevtoolsOperation): string | undefined {
+  const logical = queryOperationName(operation)
+  return logical === operation.summary.method
+    ? undefined
+    : `Query operation: ${logical}\nRequest method: ${operation.summary.method}`
+}
+
+function formatPlanValue(value: string | number): string {
+  return typeof value === 'string' ? JSON.stringify(value) : String(value)
+}
+
 function QueryRows({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   return <span style={{ color: colors.text, fontWeight: 600 }}>{query.itemCount}</span>
@@ -270,9 +383,8 @@ function QueryRows({ query }: { query: QuerySummary }) {
 function QueryFetchStats({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   const parts = [plural(query.fetchCount, 'fetch', 'fetches')]
-  if (query.realtimeSeen > 0) parts.push(plural(query.realtimeSeen, 'event', 'events'))
-  if (query.reconciles > 0) parts.push(plural(query.reconciles, 'refetch', 'refetches'))
-  if (query.errorCount > 0) parts.push(plural(query.errorCount, 'error', 'errors'))
+  if (query.realtimeSeen > 0) parts.push(`${query.realtimeSeen} realtime`)
+  if (query.errorCount > 0) parts.push(plural(query.errorCount, 'failed', 'failed'))
 
   return (
     <span
@@ -283,7 +395,8 @@ function QueryFetchStats({ query }: { query: QuerySummary }) {
         whiteSpace: 'nowrap',
         color: query.errorCount > 0 ? colors.red : colors.muted,
       }}
-      title={parts.join('\n')}
+      data-tooltip={parts.join('\n')}
+      data-tooltip-overflow=''
     >
       {parts.join(' · ')}
     </span>
@@ -300,14 +413,13 @@ function QueryLastTiming({ query }: { query: QuerySummary }) {
           ? 'warm'
           : query.isFetching
             ? 'pending'
-            : '-'
+            : '—'
       : formatMs(query.lastDurationMs)
   const mutedTiming =
     query.lastDurationMs === undefined && (duration === 'cached' || duration === 'warm')
 
   return (
     <span
-      title={`total ${formatMs(query.totalDurationMs)}`}
       style={{
         display: 'block',
         overflow: 'hidden',
@@ -325,7 +437,6 @@ function QueryAge({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   return (
     <span
-      title='age since last fetch'
       style={{
         display: 'block',
         overflow: 'hidden',
@@ -334,7 +445,7 @@ function QueryAge({ query }: { query: QuerySummary }) {
         color: colors.muted,
       }}
     >
-      {query.fetchedAt ? formatAge(Date.now() - query.fetchedAt) : '-'}
+      {query.fetchedAt ? formatAge(Date.now() - query.fetchedAt) : '—'}
     </span>
   )
 }
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index cad59264..dd08d196 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -6,8 +6,10 @@ import {
   type MouseEvent as ReactMouseEvent,
   type ReactNode,
 } from 'react'
-import type { QueryRecord } from './collector.js'
-import { compactJson, formatMs, prettyJson } from './format.js'
+import { QUERY_FETCH_HISTORY_LIMIT } from '../core/queryStore.js'
+import type { QueryRecord, QuerySpan } from './collector.js'
+import { compactJson, formatMs, now } from './format.js'
+import { JsonViewer } from './JsonViewer.js'
 import type {
   DevtoolsOperation,
   OperationPagination,
@@ -15,34 +17,57 @@ import type {
   UnderlyingFetch,
 } from './model.js'
 import { ClassBadge, plural, queryStatus, QueryStatusDot } from './QueryPresentation.js'
-import { Badge, DetailsPane, useDevtoolsTheme, type DevtoolsColors } from './ui.js'
+import {
+  Badge,
+  CopyButton,
+  DetailSection,
+  DetailsPane,
+  useDevtoolsTheme,
+  type DevtoolsColors,
+} from './ui.js'
+
+const SPLIT_DETAILS_WIDTH = 600
 
 export function QueryDetails({
   operation,
+  selectedQueryId,
   width,
+  onFetchSelect,
   onResizeStart,
   onClose,
 }: {
   operation: DevtoolsOperation
+  selectedQueryId: string | null
   width: number
+  onFetchSelect: (span: QuerySpan) => void
   onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
   onClose: () => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
+  const requestedUnderlying = operation.underlying.find(
+    item => item.query.queryId === selectedQueryId,
+  )
+  const requestedUnderlyingKey = requestedUnderlying
+    ? underlyingFetchKey(requestedUnderlying)
+    : null
   const [selectedUnderlyingKey, setSelectedUnderlyingKey] = useState<string | null>(null)
-  useEffect(() => setSelectedUnderlyingKey(null), [operation.key])
+  useEffect(() => {
+    setSelectedUnderlyingKey(requestedUnderlyingKey)
+  }, [operation.key, requestedUnderlyingKey])
 
   const { summary, rootFetches, underlying, composition } = operation
   const selectedUnderlying =
     underlying.find(item => underlyingFetchKey(item) === selectedUnderlyingKey) ?? null
   const activeQuery: QuerySummary = selectedUnderlying?.query ?? summary
-  const activeQueryId = selectedUnderlying?.query.queryId
+  const activeQueryId =
+    selectedUnderlying?.query.queryId ?? (rootFetches.length === 1 ? rootFetches[0]!.queryId : null)
   const average =
     activeQuery.fetchCount > 0 ? activeQuery.totalDurationMs / activeQuery.fetchCount : 0
   const status = queryStatus(activeQuery)
-  const rootTitle = `${summary.serviceName}.${summary.method}`
+  const rootTitle = composition?.operation ?? `${summary.serviceName}.${summary.method}`
   const rootOperation = composition?.operation ?? rootTitle
   const activeOperation = `${activeQuery.serviceName}.${activeQuery.method}`
+  const splitDetails = width >= SPLIT_DETAILS_WIDTH
   const rootQueryIdentity =
     rootFetches.length === 1 ? rootFetches[0]!.queryId : `${rootFetches.length} root query IDs`
   const directChildren =
@@ -55,6 +80,7 @@ export function QueryDetails({
             return !item.path.slice(prefix.length).includes('.')
           })
         : underlying
+  const showQueryPlan = directChildren.length > 0
   const breadcrumb = selectedUnderlying ? (
     <>
       <button
@@ -95,196 +121,214 @@ export function QueryDetails({
     <DetailsPane
       title={breadcrumb}
       subtitle={
-        <code
-          title={[
-            'Cache identity derived from the operation and parameters. Changing filters creates a new query ID.',
-            rootFetches.length > 1 ? rootFetches.map(root => root.queryId).join('\n') : undefined,
-          ]
-            .filter(Boolean)
-            .join('\n\n')}
-          style={{
-            ...styles.code,
-            color: colors.muted,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {selectedUnderlying ? `${activeOperation} · ${activeQueryId}` : rootQueryIdentity}
-        </code>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 5, minWidth: 0 }}>
+          <code
+            data-tooltip={[
+              'Cache identity derived from the operation and parameters. Changing filters creates a new query ID.',
+              rootFetches.length > 1 ? rootFetches.map(root => root.queryId).join('\n') : undefined,
+            ]
+              .filter(Boolean)
+              .join('\n\n')}
+            style={{
+              ...styles.code,
+              color: colors.muted,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {selectedUnderlying
+              ? `${activeOperation} · ${activeQueryId}`
+              : `${summary.method} request · ${rootQueryIdentity}`}
+          </code>
+          {activeQueryId ? <CopyButton value={activeQueryId} label='Query ID' /> : null}
+        </span>
       }
       width={width}
       onResizeStart={onResizeStart}
       onClose={onClose}
+      contentStyle={{ padding: 0, overflow: 'hidden' }}
     >
       <div
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 7,
-          minHeight: 24,
-          marginBottom: 10,
+          display: splitDetails ? 'grid' : 'block',
+          gridTemplateColumns: splitDetails
+            ? 'minmax(280px, 0.9fr) minmax(300px, 1.1fr)'
+            : undefined,
+          height: '100%',
+          minHeight: 0,
+          overflow: splitDetails ? 'hidden' : 'auto',
         }}
       >
-        <QueryStatusDot query={activeQuery} />
-        <span style={{ color: colors.text, fontWeight: 600 }}>{status.kind}</span>
-        <ClassBadge value={activeQuery.classification} />
-        <span style={styles.spacer} />
-        <span style={{ color: colors.muted, whiteSpace: 'nowrap' }}>
-          {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
-        </span>
-      </div>
-      {activeQuery.lastError ? (
-        <div
-          title={`Most recently observed fetch error · query generation ${activeQuery.lastError.generation}`}
-          style={{
-            color: colors.red,
-            background: colors.panel2,
-            borderLeft: `3px solid ${colors.red}`,
-            padding: '7px 9px',
-            marginBottom: 10,
-          }}
-        >
-          <div style={{ fontWeight: 650, marginBottom: 2 }}>Last fetch error</div>
-          {activeQuery.lastError.message}
-        </div>
-      ) : null}
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-          borderTop: `1px solid ${colors.rowBorder}`,
-          borderBottom: `1px solid ${colors.rowBorder}`,
-          marginBottom: 14,
-        }}
-      >
-        <QueryMetric value={String(activeQuery.itemCount)} label='rows' />
-        <QueryMetric value={String(activeQuery.fetchCount)} label='fetches' borderLeft />
-        <QueryMetric
-          value={
-            activeQuery.lastDurationMs === undefined ? '-' : formatMs(activeQuery.lastDurationMs)
-          }
-          label='last fetch'
-          borderTop
-        />
-        <QueryMetric
-          value={activeQuery.fetchCount === 0 ? '-' : formatMs(average)}
-          label='average'
-          borderLeft
-          borderTop
-        />
-      </div>
-      {activeQuery.spans.length > 0 ? (
-        <QueryDetailSection
-          label='Recent fetches'
-          meta={`${formatMs(activeQuery.totalDurationMs)} total`}
-        >
-          <Sparkline spans={activeQuery.spans} />
-        </QueryDetailSection>
-      ) : null}
-      {!selectedUnderlying && operation.pagination ? (
-        <PaginationDetails pagination={operation.pagination} pages={rootFetches} />
-      ) : null}
-      {!selectedUnderlying || directChildren.length > 0 ? (
-        <QueryDetailSection
-          label={selectedUnderlying ? 'Related queries' : 'Query plan'}
-          {...(directChildren.length > 0
-            ? { meta: plural(directChildren.length, 'relation', 'relations') }
-            : {})}
-        >
-          {!selectedUnderlying ? (
-            <QueryPlanRow
-              path='root'
-              operation={rootOperation}
-              detail={
-                composition?.planDetail ??
-                (summary.method === 'get'
-                  ? `id ${summary.resourceId ?? '?'}`
-                  : compactJson(summary.query ?? {}))
-              }
-            />
-          ) : null}
-          {directChildren.length > 0 ? (
+        <div style={{ minWidth: 0, minHeight: 0, overflow: 'auto', padding: 12 }}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 7,
+              minHeight: 24,
+              marginBottom: 10,
+            }}
+          >
+            <QueryStatusDot query={activeQuery} />
+            <span style={{ color: colors.text, fontWeight: 600 }}>{status.kind}</span>
+            <ClassBadge value={activeQuery.classification} />
+            <span style={styles.spacer} />
+            <span style={{ color: colors.muted, whiteSpace: 'nowrap' }}>
+              {(activeQuery.prefetchCount ?? 0) > 0 && activeQuery.subscriberCount === 0
+                ? 'speculative prefetch'
+                : (activeQuery.prepareCount ?? 0) > 0 && activeQuery.subscriberCount === 0
+                  ? 'prepared query'
+                  : plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
+            </span>
+          </div>
+          {activeQuery.resourceId !== undefined ? (
             <div
               style={{
-                marginLeft: selectedUnderlying ? 0 : 7,
-                paddingLeft: selectedUnderlying ? 0 : 13,
-                borderLeft: selectedUnderlying ? undefined : `1px solid ${colors.border}`,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                margin: '-3px 0 10px',
+                color: colors.muted,
               }}
             >
-              {directChildren.map(item => (
-                <QueryPlanRow
-                  key={underlyingFetchKey(item)}
-                  path={selectedUnderlying ? (item.path.split('.').pop() ?? item.path) : item.path}
-                  operation={`${item.query.serviceName}.${item.query.method}`}
-                  {...(item.role ? { role: item.role } : {})}
-                  detail={[
-                    plural(item.query.itemCount, 'row', 'rows'),
-                    item.query.lastDurationMs === undefined
+              <span>Resource ID</span>
+              <code style={{ ...styles.code, color: colors.text }}>#{activeQuery.resourceId}</code>
+              <CopyButton value={String(activeQuery.resourceId)} label='Resource ID' />
+            </div>
+          ) : null}
+          {activeQuery.lastError ? (
+            <>
+              <div
+                data-tooltip={`Most recently observed fetch error · query generation ${activeQuery.lastError.generation}`}
+                style={{
+                  color: colors.red,
+                  background: colors.panel2,
+                  borderLeft: `3px solid ${colors.red}`,
+                  padding: '7px 9px',
+                  marginBottom: 8,
+                }}
+              >
+                <div style={{ fontWeight: 650, marginBottom: 2 }}>Last fetch error</div>
+                {activeQuery.lastError.message}
+              </div>
+              <div style={{ marginBottom: 10 }}>
+                <JsonViewer
+                  value={
+                    activeQuery.lastError.details?.state === 'evicted'
                       ? undefined
-                      : formatMs(item.query.lastDurationMs),
-                  ]
-                    .filter(Boolean)
-                    .join(' · ')}
-                  classification={item.query.classification}
-                  onSelect={() => setSelectedUnderlyingKey(underlyingFetchKey(item))}
+                      : activeQuery.lastError.details?.value
+                  }
+                  label='Error details'
+                  emptyLabel={
+                    activeQuery.lastError.details?.state === 'evicted'
+                      ? 'Original error details vacuumed to keep memory bounded'
+                      : 'No structured error details captured'
+                  }
+                  maxHeight={280}
                 />
-              ))}
-            </div>
+              </div>
+            </>
           ) : null}
-        </QueryDetailSection>
-      ) : null}
-      <details
-        key={activeQueryId ?? operation.key}
-        style={{
-          borderTop: `1px solid ${colors.rowBorder}`,
-          padding: '11px 0',
-        }}
-      >
-        <summary
-          style={{
-            color: colors.text,
-            cursor: 'pointer',
-            fontWeight: 600,
-          }}
-        >
-          Parameters
-          <code
-            title={prettyJson(activeQuery.query ?? {})}
+          <QueryPerformance query={activeQuery} average={average} onFetchSelect={onFetchSelect} />
+          {!splitDetails ? <QueryData query={activeQuery} separated /> : null}
+          <QueryDetailBlock separated>
+            <JsonViewer
+              value={queryArguments(activeQuery)}
+              label={activeQuery.method === 'get' ? 'Arguments' : 'Parameters'}
+            />
+          </QueryDetailBlock>
+          {!selectedUnderlying && operation.pagination ? (
+            <PaginationDetails pagination={operation.pagination} pages={rootFetches} />
+          ) : null}
+          {showQueryPlan ? (
+            <DetailSection
+              label={selectedUnderlying ? 'Related queries' : 'Query plan'}
+              meta={plural(directChildren.length, 'relation', 'relations')}
+              separated
+            >
+              {!selectedUnderlying ? (
+                <QueryPlanRow path='root' operation={rootOperation} detail='' />
+              ) : null}
+              <div
+                style={{
+                  marginLeft: selectedUnderlying ? 0 : 7,
+                  paddingLeft: selectedUnderlying ? 0 : 13,
+                  borderLeft: selectedUnderlying ? undefined : `1px solid ${colors.border}`,
+                }}
+              >
+                {directChildren.map(item => (
+                  <QueryPlanRow
+                    key={underlyingFetchKey(item)}
+                    path={
+                      selectedUnderlying ? (item.path.split('.').pop() ?? item.path) : item.path
+                    }
+                    operation={`${item.query.serviceName}.${item.query.method}`}
+                    {...(item.role ? { role: item.role } : {})}
+                    detail={[
+                      plural(item.query.itemCount, 'row', 'rows'),
+                      item.query.lastDurationMs === undefined
+                        ? undefined
+                        : formatMs(item.query.lastDurationMs),
+                    ]
+                      .filter(Boolean)
+                      .join(' · ')}
+                    onSelect={() => setSelectedUnderlyingKey(underlyingFetchKey(item))}
+                  />
+                ))}
+              </div>
+            </DetailSection>
+          ) : null}
+        </div>
+        {splitDetails ? (
+          <div
             style={{
-              ...styles.code,
-              display: 'inline-block',
-              maxWidth: 'calc(100% - 90px)',
-              color: colors.muted,
-              fontWeight: 400,
-              marginLeft: 8,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              verticalAlign: 'bottom',
-              whiteSpace: 'nowrap',
+              minWidth: 0,
+              minHeight: 0,
+              overflow: 'auto',
+              padding: 12,
+              borderLeft: `1px solid ${colors.border}`,
+              background: colors.bg,
             }}
           >
-            {compactJson(activeQuery.query ?? {})}
-          </code>
-        </summary>
-        <pre
-          style={{
-            ...styles.code,
-            whiteSpace: 'pre-wrap',
-            overflowWrap: 'anywhere',
-            margin: '9px 0 0',
-            padding: 10,
-            background: colors.panel2,
-            borderRadius: 4,
-          }}
-        >
-          {prettyJson(activeQuery.query ?? {})}
-        </pre>
-      </details>
+            <QueryData query={activeQuery} fill />
+          </div>
+        ) : null}
+      </div>
     </DetailsPane>
   )
 }
 
+function queryArguments(query: QuerySummary): unknown {
+  if (query.method !== 'get') return query.query ?? {}
+  if (query.resourceId === undefined) return query.query ?? {}
+  return {
+    id: query.resourceId,
+    ...(query.query && Object.keys(query.query).length > 0 ? { query: query.query } : {}),
+  }
+}
+
+function QueryData({
+  query,
+  fill = false,
+  separated = false,
+}: {
+  query: QuerySummary
+  fill?: boolean
+  separated?: boolean
+}) {
+  return (
+    <QueryDetailBlock separated={separated}>
+      <JsonViewer
+        value={query.data}
+        label='Query data'
+        meta={query.skipped ? 'skipped' : plural(query.itemCount, 'row', 'rows')}
+        maxHeight={fill ? 'none' : 360}
+      />
+    </QueryDetailBlock>
+  )
+}
+
 function PaginationDetails({
   pagination,
   pages,
@@ -293,70 +337,81 @@ function PaginationDetails({
   pages: QueryRecord[]
 }) {
   const { colors, styles } = useDevtoolsTheme()
-  const state = [
-    pagination.realtime === 'manual'
-      ? 'manual realtime'
-      : pagination.realtime === 'reconcile'
-        ? 'reconciles on events'
-        : 'merges stable updates',
-    pagination.hasMore ? 'has more' : 'complete',
-    pagination.isLoadingMore ? 'loading next page' : '',
-    pagination.total !== undefined ? `${pagination.total} total` : '',
+  const loadedRows = pages.reduce((total, page) => total + page.itemCount, 0)
+  const summary = [
+    pagination.total === undefined
+      ? `${loadedRows} rows loaded`
+      : `${loadedRows} of ${pagination.total} rows loaded`,
+    pagination.loadedPages > 1 ? plural(pagination.loadedPages, 'page', 'pages') : undefined,
+    pagination.isLoadingMore ? 'loading more' : pagination.hasMore ? 'more available' : 'complete',
   ]
     .filter(Boolean)
     .join(' · ')
 
   return (
-    <QueryDetailSection
-      label={pagination.strategy === 'cursor' ? 'Cursor page chain' : 'Pages'}
-      meta={`${pagination.loadedPages} loaded · size ${pagination.pageSize} · ${state}`}
-    >
-      <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
-        {pages.map((page, index) => {
-          const request = page.page?.request
-          const info = page.page?.info
-          const position =
-            pagination.strategy === 'cursor'
-              ? `after ${request?.after === undefined ? 'start' : compactJson(request.after)}`
-              : `offset ${String(page.query?.$skip ?? index * pagination.pageSize)}`
-          const continuation =
-            pagination.strategy === 'cursor' && info
-              ? info.hasMore
-                ? `next ${compactJson(info.endCursor)}`
-                : 'end'
-              : ''
-          return (
-            <div
-              key={page.queryId}
-              style={{
-                display: 'grid',
-                gridTemplateColumns: '55px minmax(0, 1fr) auto',
-                gap: 8,
-                alignItems: 'baseline',
-                padding: '7px 0',
-                borderBottom: `1px solid ${colors.rowBorder}`,
-              }}
-            >
-              <strong style={{ fontWeight: 600 }}>Page {index + 1}</strong>
-              <code
-                title={[position, continuation].filter(Boolean).join(' · ')}
-                style={{
-                  ...styles.code,
-                  minWidth: 0,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  color: colors.muted,
-                }}
-              >
-                {[position, continuation].filter(Boolean).join(' · ')}
-              </code>
-              <span style={{ color: colors.muted }}>{plural(page.itemCount, 'row', 'rows')}</span>
-            </div>
-          )
-        })}
-      </div>
-    </QueryDetailSection>
+    <DetailSection label='Pagination' separated>
+      <div style={{ color: colors.muted }}>{summary}</div>
+      {pages.length > 1 ? (
+        <details style={{ marginTop: 8 }}>
+          <summary
+            style={{
+              color: colors.text,
+              cursor: 'pointer',
+              fontWeight: 600,
+              userSelect: 'none',
+            }}
+          >
+            Page chain
+          </summary>
+          <div style={{ marginTop: 5 }}>
+            {pages.map((page, index) => {
+              const request = page.page?.request
+              const info = page.page?.info
+              const position =
+                pagination.strategy === 'cursor'
+                  ? `after ${request?.after === undefined ? 'start' : compactJson(request.after)}`
+                  : `offset ${String(page.query?.$skip ?? index * pagination.pageSize)}`
+              const continuation =
+                pagination.strategy === 'cursor' && info
+                  ? info.hasMore
+                    ? `next ${compactJson(info.endCursor)}`
+                    : 'end'
+                  : ''
+              return (
+                <div
+                  key={page.queryId}
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: '55px minmax(0, 1fr) auto',
+                    gap: 8,
+                    alignItems: 'baseline',
+                    padding: '4px 0 4px 14px',
+                  }}
+                >
+                  <strong style={{ fontWeight: 600 }}>Page {index + 1}</strong>
+                  <code
+                    data-tooltip={[position, continuation].filter(Boolean).join(' · ')}
+                    style={{
+                      ...styles.code,
+                      minWidth: 0,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      color: colors.muted,
+                    }}
+                  >
+                    {[position, continuation].filter(Boolean).join(' · ')}
+                  </code>
+                  <span style={{ color: colors.muted }}>
+                    {plural(page.itemCount, 'row', 'rows')}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        </details>
+      ) : null}
+    </DetailSection>
   )
 }
 
@@ -376,60 +431,98 @@ function breadcrumbButtonStyle(colors: DevtoolsColors): CSSProperties {
   }
 }
 
-function QueryMetric({
-  value,
-  label,
-  borderLeft,
-  borderTop,
+function QueryPerformance({
+  query,
+  average,
+  onFetchSelect,
 }: {
-  value: string
-  label: string
-  borderLeft?: boolean
-  borderTop?: boolean
+  query: QuerySummary
+  average: number
+  onFetchSelect: (span: QuerySpan) => void
 }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'baseline',
-        gap: 5,
-        minWidth: 0,
-        padding: '9px 0',
-        paddingLeft: borderLeft ? 12 : 0,
-        borderLeft: borderLeft ? `1px solid ${colors.rowBorder}` : undefined,
-        borderTop: borderTop ? `1px solid ${colors.rowBorder}` : undefined,
-      }}
-    >
-      <strong style={{ color: colors.text, fontSize: 14 }}>{value}</strong>
-      <span style={{ color: colors.muted, whiteSpace: 'nowrap' }}>{label}</span>
-    </div>
+    <DetailSection label='Performance' separated>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: '5px 8px',
+          color: colors.muted,
+        }}
+      >
+        {query.lastDurationMs !== undefined ? (
+          <span style={{ whiteSpace: 'nowrap' }}>
+            <strong style={{ color: colors.text, fontWeight: 650 }}>
+              {formatMs(query.lastDurationMs)}
+            </strong>{' '}
+            last
+          </span>
+        ) : null}
+        {query.fetchCount > 1 ? (
+          <>
+            <span aria-hidden='true' style={{ color: colors.faint }}>
+              ·
+            </span>
+            <span style={{ whiteSpace: 'nowrap' }}>
+              <strong style={{ color: colors.text, fontWeight: 650 }}>{formatMs(average)}</strong>{' '}
+              average
+            </span>
+          </>
+        ) : null}
+        {query.lastDurationMs !== undefined ? (
+          <span aria-hidden='true' style={{ color: colors.faint }}>
+            ·
+          </span>
+        ) : null}
+        <span style={{ whiteSpace: 'nowrap' }}>{plural(query.fetchCount, 'fetch', 'fetches')}</span>
+      </div>
+      {query.fetchCount > 0 || query.spans.some(span => span.endAt === undefined) ? (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '84px minmax(0, 1fr)',
+            alignItems: 'end',
+            gap: 8,
+            marginTop: 8,
+          }}
+        >
+          <span
+            data-tooltip={
+              query.fetchCount > QUERY_FETCH_HISTORY_LIMIT
+                ? `Showing the latest ${QUERY_FETCH_HISTORY_LIMIT} of ${query.fetchCount} completed fetches`
+                : undefined
+            }
+            style={{ color: colors.faint, fontSize: 11 }}
+          >
+            {query.fetchCount > QUERY_FETCH_HISTORY_LIMIT
+              ? `Last ${QUERY_FETCH_HISTORY_LIMIT} of ${query.fetchCount}`
+              : 'Fetch latency'}
+          </span>
+          <Sparkline query={query} onSelect={onFetchSelect} />
+        </div>
+      ) : null}
+    </DetailSection>
   )
 }
 
-function QueryDetailSection({
-  label,
-  meta,
+function QueryDetailBlock({
+  separated = false,
   children,
 }: {
-  label: string
-  meta?: string
+  separated?: boolean
   children: ReactNode
 }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <section style={{ marginBottom: 14 }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'baseline',
-          gap: 8,
-          marginBottom: 5,
-        }}
-      >
-        <strong style={{ color: colors.text, fontWeight: 650 }}>{label}</strong>
-        {meta ? <span style={{ color: colors.muted }}>{meta}</span> : null}
-      </div>
+    <section
+      style={{
+        marginBottom: 14,
+        paddingTop: separated ? 12 : 0,
+        borderTop: separated ? `1px solid ${colors.rowBorder}` : undefined,
+      }}
+    >
       {children}
     </section>
   )
@@ -439,14 +532,12 @@ function QueryPlanRow({
   path,
   operation,
   detail,
-  classification,
   role,
   onSelect,
 }: {
   path: string
   operation: string
   detail: string
-  classification?: string
   role?: 'junction'
   onSelect?: () => void
 }) {
@@ -458,7 +549,7 @@ function QueryPlanRow({
             role: 'button',
             tabIndex: 0,
             'aria-label': `Inspect nested query ${path}`,
-            title: `Inspect ${path}`,
+            'data-tooltip': `Inspect ${path}`,
             onClick: onSelect,
             onKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>) => {
               if (event.key === 'Enter' || event.key === ' ') {
@@ -469,12 +560,7 @@ function QueryPlanRow({
           }
         : {})}
       style={{
-        display: 'grid',
-        gridTemplateColumns: 'minmax(0, 1fr) auto',
-        alignItems: 'start',
-        gap: 8,
-        padding: '7px 0',
-        borderTop: `1px solid ${colors.rowBorder}`,
+        padding: '4px 0',
         cursor: onSelect ? 'pointer' : undefined,
       }}
     >
@@ -494,64 +580,181 @@ function QueryPlanRow({
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
               fontWeight: 600,
+              color: onSelect ? colors.blue : colors.text,
             }}
           >
             {operation}
           </strong>
           {role === 'junction' ? <Badge tone='neutral'>junction</Badge> : null}
         </div>
-        <div
-          title={detail}
-          style={{
-            ...styles.code,
-            color: colors.muted,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            marginTop: 3,
-          }}
-        >
-          {detail || 'all'}
-        </div>
+        {detail ? (
+          <div
+            data-tooltip={detail}
+            data-tooltip-overflow=''
+            style={{
+              ...styles.code,
+              color: colors.muted,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              marginTop: 2,
+            }}
+          >
+            {detail}
+          </div>
+        ) : null}
       </div>
-      {classification || onSelect ? (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
-          {classification ? <ClassBadge value={classification} /> : null}
-          {onSelect ? (
-            <span
-              aria-hidden='true'
-              style={{ color: colors.blue, fontSize: 16, lineHeight: '18px' }}
-            >
-              ›
-            </span>
-          ) : null}
-        </div>
-      ) : null}
     </div>
   )
 }
 
-function Sparkline({ spans }: { spans: QueryRecord['spans'] }) {
+function Sparkline({
+  query,
+  onSelect,
+}: {
+  query: QuerySummary
+  onSelect: (span: QuerySpan) => void
+}) {
   const { colors } = useDevtoolsTheme()
-  if (spans.length === 0) return null
-  const max = Math.max(1, ...spans.map(span => (span.endAt ?? span.startAt) - span.startAt))
+  const nowPoint = now()
+  const recordedByFetchId = new Map(
+    query.spans.flatMap(span =>
+      span.fetchId === undefined ? [] : [[span.fetchId, span] as const],
+    ),
+  )
+  const historyFetchIds = new Set(query.fetchHistory?.map(entry => entry.fetchId) ?? [])
+  const completed = [
+    ...(query.fetchHistory ?? []).map(entry => ({
+      key: `history:${entry.fetchId}`,
+      duration: entry.durationMs,
+      state: entry.ok ? ('success' as const) : ('error' as const),
+      trigger: fetchReasonLabel(entry.reason),
+      span: recordedByFetchId.get(entry.fetchId),
+    })),
+    ...query.spans.flatMap((span, index) =>
+      span.endAt === undefined || (span.fetchId !== undefined && historyFetchIds.has(span.fetchId))
+        ? []
+        : [
+            {
+              key: `span:${span.fetchId ?? `${span.startAt}:${index}`}`,
+              duration: spanDuration(span, nowPoint),
+              state: span.ok === false ? ('error' as const) : ('success' as const),
+              trigger: fetchReasonLabel(span.reason),
+              span,
+            },
+          ],
+    ),
+  ].slice(-QUERY_FETCH_HISTORY_LIMIT)
+  const missingCount = Math.min(
+    Math.max(0, query.fetchCount - completed.length),
+    QUERY_FETCH_HISTORY_LIMIT - completed.length,
+  )
+  const active = query.spans.flatMap((span, index) =>
+    span.endAt === undefined
+      ? [
+          {
+            key: `active:${span.fetchId ?? `${span.startAt}:${index}`}`,
+            duration: spanDuration(span, nowPoint),
+            state: 'pending' as const,
+            trigger: fetchReasonLabel(span.reason),
+            span,
+          },
+        ]
+      : [],
+  )
+  const entries = [
+    ...Array.from({ length: missingCount }, (_, index) => ({
+      key: `unavailable:${index}`,
+      duration: 0,
+      state: 'unavailable' as const,
+      trigger: 'timing unavailable',
+      span: undefined,
+    })),
+    ...completed,
+    ...active,
+  ]
+  if (entries.length === 0) return null
+  const max = Math.max(1, ...entries.map(entry => entry.duration))
   return (
-    <div style={{ display: 'flex', alignItems: 'end', gap: 2, height: 28, marginTop: 8 }}>
-      {spans.slice(-30).map((span, index) => {
-        const duration = (span.endAt ?? span.startAt) - span.startAt
+    <span
+      aria-label='Recent fetch history'
+      style={{ display: 'flex', alignItems: 'end', gap: 1, height: 22, minWidth: 0 }}
+    >
+      {entries.map(entry => {
+        const inspectable = entry.span !== undefined
+        const title =
+          entry.state === 'unavailable'
+            ? 'Timing unavailable · fetch completed before detailed recording began'
+            : `${formatMs(entry.duration)} · ${entry.state}\nTrigger: ${entry.trigger}${
+                inspectable ? '\nClick to inspect this fetch' : '\nDetailed recording unavailable'
+              }`
         return (
-          <span
-            key={`${span.startAt}:${index}`}
-            title={formatMs(duration)}
+          <button
+            type='button'
+            key={entry.key}
+            aria-label={
+              entry.state === 'unavailable'
+                ? 'Fetch timing unavailable'
+                : `${formatMs(entry.duration)}, ${entry.state}, ${entry.trigger}`
+            }
+            data-tooltip={title}
+            onClick={inspectable ? () => onSelect(entry.span!) : undefined}
             style={{
-              width: 4,
-              height: Math.max(3, (duration / max) * 24),
-              background: span.ok === false ? colors.red : colors.green,
-              borderRadius: 2,
+              display: 'flex',
+              alignItems: 'end',
+              justifyContent: 'center',
+              flex: '1 1 5px',
+              minWidth: 3,
+              maxWidth: 7,
+              height: 22,
+              padding: 0,
+              border: 0,
+              background: 'transparent',
+              cursor: inspectable ? 'pointer' : 'default',
             }}
-          />
+          >
+            <span
+              aria-hidden='true'
+              style={{
+                width: 'min(4px, 80%)',
+                height: Math.max(3, (entry.duration / max) * 20),
+                background:
+                  entry.state === 'pending'
+                    ? colors.blue
+                    : entry.state === 'error'
+                      ? colors.red
+                      : entry.state === 'unavailable'
+                        ? colors.faint
+                        : colors.green,
+                borderRadius: 2,
+                opacity: entry.state === 'pending' ? 0.75 : 1,
+                boxShadow: entry.state === 'pending' ? `inset 0 0 0 1px ${colors.bg}` : undefined,
+              }}
+            />
+          </button>
         )
       })}
-    </div>
+    </span>
   )
 }
+
+function spanDuration(span: QuerySpan, nowPoint: number): number {
+  return Math.max(0, (span.endAt ?? nowPoint) - span.startAt)
+}
+
+function fetchReasonLabel(reason: string | undefined): string {
+  switch (reason) {
+    case 'subscription':
+      return 'subscription'
+    case 'manual':
+      return 'manual refetch'
+    case 'reconcile':
+      return 'realtime reconciliation'
+    case 'retry':
+      return 'retry'
+    case 'follow-up':
+      return 'follow-up fetch'
+    default:
+      return 'unknown trigger'
+  }
+}
diff --git a/lib/devtools/QueryPresentation.tsx b/lib/devtools/QueryPresentation.tsx
index 364b5e76..a74a008a 100644
--- a/lib/devtools/QueryPresentation.tsx
+++ b/lib/devtools/QueryPresentation.tsx
@@ -21,7 +21,7 @@ export function ClassBadge({ value }: { value: string }) {
           ? 'neutral'
           : 'red'
   return (
-    <Badge tone={tone} title={QUERY_CLASS_DESCRIPTIONS[value]}>
+    <Badge tone={tone} tooltip={QUERY_CLASS_DESCRIPTIONS[value]}>
       {value}
     </Badge>
   )
@@ -33,16 +33,22 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
   const color =
     status.kind === 'error'
       ? colors.red
-      : status.kind === 'fetching'
+      : status.kind === 'pending'
         ? colors.blue
-        : status.kind === 'retained'
-          ? colors.faint
-          : status.kind === 'cached'
-            ? colors.amber
-            : colors.green
+        : status.kind === 'prefetched'
+          ? colors.blue
+          : status.kind === 'prepared'
+            ? colors.purple
+            : status.kind === 'skipped'
+              ? colors.faint
+              : status.kind === 'retained'
+                ? colors.faint
+                : status.kind === 'cached'
+                  ? colors.amber
+                  : colors.green
   return (
     <span
-      title={status.label}
+      data-tooltip={status.label}
       aria-label={status.label}
       style={{
         width: 8,
@@ -57,19 +63,29 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
 }
 
 export function queryStatus(query: QuerySummary): {
-  kind: 'active' | 'cached' | 'error' | 'fetching' | 'retained'
+  kind:
+    'active' | 'cached' | 'error' | 'pending' | 'prefetched' | 'prepared' | 'retained' | 'skipped'
   label: string
 } {
   if (!query.present) {
     return { kind: 'retained', label: statusLabel(query, 'retained history') }
   }
+  if (query.skipped) {
+    return { kind: 'skipped', label: statusLabel(query, 'skipped intentionally') }
+  }
   if (query.status === 'error') {
     return { kind: 'error', label: statusLabel(query, 'error') }
   }
   if (query.isFetching || query.status === 'loading') {
-    return { kind: 'fetching', label: statusLabel(query, 'fetching') }
+    return { kind: 'pending', label: statusLabel(query, 'pending') }
   }
   if (query.subscriberCount === 0) {
+    if ((query.prefetchCount ?? 0) > 0) {
+      return { kind: 'prefetched', label: `prefetched · ${query.status}` }
+    }
+    if ((query.prepareCount ?? 0) > 0) {
+      return { kind: 'prepared', label: `prepared · ${query.status}` }
+    }
     return { kind: 'cached', label: statusLabel(query, 'cached') }
   }
   return { kind: 'active', label: statusLabel(query, 'active') }
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
new file mode 100644
index 00000000..6c74ad22
--- /dev/null
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -0,0 +1,988 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+  type RefObject,
+} from 'react'
+import { formatClock, formatMs } from './format.js'
+import { JsonViewer } from './JsonViewer.js'
+import { historicalValue } from './historicalValue.js'
+import type { TimelineRange } from './TimelineOverview.js'
+import { TimelineOverview } from './TimelineOverview.js'
+import {
+  timelineActivityMatchesFilter,
+  type TimelineActivity,
+  type TimelineExtent,
+} from './timelineModel.js'
+import {
+  Badge,
+  ColumnResizeHandle,
+  DetailBlock,
+  DetailSection,
+  DetailStat,
+  DetailStats,
+  DetailsPane,
+  buttonStyle,
+  toneColor,
+  useDetailsPaneWidth,
+  useResizableColumns,
+  useDevtoolsTheme,
+} from './ui.js'
+
+const FOLLOW_THRESHOLD = 24
+
+export type TimelineVisibility = 'all' | 'fetch' | 'realtime' | 'write' | 'connection' | 'errors'
+
+const COLUMNS = [
+  { label: 'time', width: 96, minWidth: 78 },
+  { label: 'activity', width: 145, minWidth: 100 },
+  { label: 'operation', width: 85, minWidth: 70 },
+  { label: 'context', width: 120, minWidth: 80 },
+  { label: 'status', width: 84, minWidth: 70 },
+  { label: 'trigger', width: 100, minWidth: 75 },
+  { label: 'cache effect', width: 125, minWidth: 90 },
+  { label: 'result', width: 115, minWidth: 80 },
+  { label: 'duration', width: 74, minWidth: 60 },
+  { label: 'waterfall', width: 200, minWidth: 130 },
+] as const
+
+export function TimelineActivityTable({
+  activities,
+  extent,
+  nowPoint,
+  wallClockOffset,
+  filter,
+  visibility,
+  follow,
+  onFollowChange,
+  requestedActivityId,
+  onRequestedActivityHandled,
+  onQuerySelect,
+  onCacheEntitySelect,
+  onTraceSelect,
+  evictedCount = 0,
+  payloadsEvicted = 0,
+}: {
+  activities: readonly TimelineActivity[]
+  extent: TimelineExtent | null
+  nowPoint: number
+  wallClockOffset: number
+  filter: string
+  visibility: TimelineVisibility
+  follow: boolean
+  onFollowChange: (value: boolean) => void
+  requestedActivityId?: string
+  onRequestedActivityHandled?: () => void
+  onQuerySelect?: (queryId: string) => void
+  onCacheEntitySelect?: (serviceName: string, itemId: string | number) => void
+  onTraceSelect?: (traceId: number) => void
+  evictedCount?: number
+  payloadsEvicted?: number
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const selectedRowRef = useRef<HTMLTableRowElement>(null)
+  const scrollPausedFollowRef = useRef(false)
+  const [range, setRange] = useState<TimelineRange | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [relatedOnly, setRelatedOnly] = useState<string | null>(null)
+  const [availableTableWidth, setAvailableTableWidth] = useState(0)
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(COLUMNS)
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const hasExtent = extent !== null
+  const selected = activities.find(activity => activity.id === selectedId)
+  const selectedGraphKeys = new Set(
+    selected?.kind === 'fetch'
+      ? (selected.graph ?? [])
+          .filter(ref => ref.path === '(root)')
+          .map(ref => timelineGraphKey(ref.operationId, ref.runId))
+      : [],
+  )
+  const normalizedFilter = filter.trim().toLowerCase()
+  const filteredActivities = activities.filter(activity => {
+    if (
+      visibility === 'errors'
+        ? !activity.error
+        : visibility !== 'all' && activity.kind !== visibility
+    ) {
+      return false
+    }
+    if (!timelineActivityMatchesFilter(activity, normalizedFilter)) return false
+    return !relatedOnly || activityHasGraph(activity, relatedOnly)
+  })
+  const rows = range
+    ? filteredActivities.filter(activity => intersects(activity, range, nowPoint))
+    : filteredActivities
+  const inFlightWriteCount = activities.filter(
+    activity => activity.kind === 'write' && activity.status === 'pending',
+  ).length
+  const projectedWriteCount = activities.filter(
+    activity =>
+      activity.kind === 'write' && activity.status === 'pending' && activity.write?.optimistic,
+  ).length
+  const latestVisibleActivityId = rows.at(-1)?.id
+  const waterfallIndex = COLUMNS.length - 1
+  const fixedColumnsWidth = columnWidths
+    .slice(0, waterfallIndex)
+    .reduce((sum, width) => sum + width, 0)
+  const waterfallWidth = Math.max(
+    columnWidths[waterfallIndex]!,
+    availableTableWidth - fixedColumnsWidth,
+  )
+  const renderedColumnWidths = columnWidths.map((width, index) =>
+    index === waterfallIndex ? waterfallWidth : width,
+  )
+  const totalWidth = renderedColumnWidths.reduce((sum, width) => sum + width, 0)
+
+  useEffect(() => {
+    if (follow) setRange(null)
+  }, [follow])
+
+  useEffect(() => {
+    if (selectedId && !activities.some(activity => activity.id === selectedId)) setSelectedId(null)
+  }, [activities, selectedId])
+
+  useEffect(() => setSelectedId(null), [filter, visibility])
+
+  useEffect(() => {
+    if (relatedOnly && !activities.some(activity => activityHasGraph(activity, relatedOnly))) {
+      setRelatedOnly(null)
+    }
+  }, [activities, relatedOnly])
+
+  useEffect(() => {
+    if (!requestedActivityId) return
+    if (!activities.some(activity => activity.id === requestedActivityId)) return
+    setRange(null)
+    setSelectedId(requestedActivityId)
+    onFollowChange(false)
+    onRequestedActivityHandled?.()
+  }, [activities, onFollowChange, onRequestedActivityHandled, requestedActivityId])
+
+  useLayoutEffect(() => {
+    const row = selectedRowRef.current
+    if (!row || typeof row.scrollIntoView !== 'function') return
+    row.scrollIntoView({ block: 'nearest' })
+  }, [selectedId])
+
+  useLayoutEffect(() => {
+    const scroll = scrollRef.current
+    if (!scroll || !follow) return
+    scrollPausedFollowRef.current = false
+    scroll.scrollTop = Math.max(0, scroll.scrollHeight - scroll.clientHeight)
+  }, [follow, latestVisibleActivityId])
+
+  useLayoutEffect(() => {
+    const scroll = scrollRef.current
+    if (!scroll) return
+
+    const measure = () => {
+      setAvailableTableWidth(current =>
+        current === scroll.clientWidth ? current : scroll.clientWidth,
+      )
+    }
+
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+
+    const observer = new ResizeObserver(measure)
+    observer.observe(scroll)
+    return () => observer.disconnect()
+  }, [hasExtent])
+
+  if (!extent) {
+    return (
+      <div style={{ ...styles.scroll, height: 'auto', flex: 1, minHeight: 0 }}>
+        <div style={{ padding: 16, color: colors.muted }}>
+          No timeline activity yet. Recording continues until you press Clear recording.
+        </div>
+      </div>
+    )
+  }
+
+  const displayExtent = range ?? extent
+  const visibleSelection =
+    selected && rows.some(activity => activity.id === selected.id) ? selected : null
+
+  return (
+    <>
+      <TimelineOverview
+        activities={filteredActivities}
+        extent={extent}
+        range={range}
+        nowPoint={nowPoint}
+        onRangeChange={next => {
+          setRange(next)
+          setSelectedId(null)
+          if (next) {
+            scrollPausedFollowRef.current = false
+            onFollowChange(false)
+          }
+        }}
+      />
+      <div style={{ flex: 1, minHeight: 0, minWidth: 0, display: 'flex' }}>
+        <div
+          ref={scrollRef}
+          aria-label='Timeline activity'
+          style={{ ...styles.scroll, flex: 1, minWidth: 0 }}
+          onScroll={event => {
+            const scroll = event.currentTarget
+            const distance = scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop
+            if (distance > FOLLOW_THRESHOLD) {
+              if (follow) {
+                scrollPausedFollowRef.current = true
+                onFollowChange(false)
+              }
+              return
+            }
+            if (!follow && scrollPausedFollowRef.current) {
+              scrollPausedFollowRef.current = false
+              onFollowChange(true)
+            }
+          }}
+        >
+          <table style={{ ...styles.table, minWidth: totalWidth, width: totalWidth }}>
+            <colgroup>
+              {COLUMNS.map((column, index) => (
+                <col key={column.label} style={{ width: renderedColumnWidths[index] }} />
+              ))}
+            </colgroup>
+            <thead>
+              <tr>
+                {COLUMNS.map((column, index) => (
+                  <th key={column.label} style={{ ...styles.th, position: 'sticky' }}>
+                    {column.label}
+                    {column.label === 'waterfall' && displayExtent ? (
+                      <span style={{ color: colors.faint, marginLeft: 7, fontWeight: 400 }}>
+                        {formatOffset(displayExtent.end - displayExtent.start)}
+                      </span>
+                    ) : null}
+                    <ColumnResizeHandle
+                      label={column.label}
+                      onMouseDown={event => onColumnResizeStart(index, event)}
+                    />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map(activity => (
+                <ActivityRow
+                  key={activity.id}
+                  activity={activity}
+                  selected={activity.id === selectedId}
+                  related={
+                    selectedGraphKeys.size > 0 &&
+                    activityMatchesAnyGraph(activity, selectedGraphKeys)
+                  }
+                  {...(activity.id === selectedId ? { rowRef: selectedRowRef } : {})}
+                  extent={displayExtent}
+                  nowPoint={nowPoint}
+                  wallClockOffset={wallClockOffset}
+                  onSelect={() => setSelectedId(activity.id)}
+                />
+              ))}
+            </tbody>
+          </table>
+          {rows.length === 0 ? (
+            <div style={{ padding: 16, color: colors.muted }}>No matching activity recorded.</div>
+          ) : null}
+        </div>
+        {visibleSelection ? (
+          <ActivityDetails
+            activity={visibleSelection}
+            activities={activities}
+            wallClockOffset={wallClockOffset}
+            width={detailsWidth}
+            onResizeStart={onDetailsResizeStart}
+            onClose={() => setSelectedId(null)}
+            onActivitySelect={activityId => {
+              setRange(null)
+              setSelectedId(activityId)
+              onFollowChange(false)
+            }}
+            relatedOnly={relatedOnly}
+            onRelatedOnlyChange={setRelatedOnly}
+            {...(onQuerySelect ? { onQuerySelect } : {})}
+            {...(onCacheEntitySelect ? { onCacheEntitySelect } : {})}
+            {...(onTraceSelect ? { onTraceSelect } : {})}
+          />
+        ) : null}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          minHeight: 27,
+          padding: '0 10px',
+          flexShrink: 0,
+          color: colors.muted,
+          borderTop: `1px solid ${colors.border}`,
+          background: colors.toolbar,
+        }}
+      >
+        <span>
+          {rows.length} / {activities.length} activities
+        </span>
+        <span>{activityCount(rows, 'fetch')} fetches</span>
+        <span>{activityCount(rows, 'realtime')} realtime</span>
+        <span>{activityCount(rows, 'write')} writes</span>
+        <span>{activityCount(rows, 'connection')} connections</span>
+        <span>{rows.filter(activity => activity.error).length} errors</span>
+        {inFlightWriteCount > 0 ? <span>{inFlightWriteCount} pending writes</span> : null}
+        {projectedWriteCount > 0 ? <span>{projectedWriteCount} projected</span> : null}
+        {evictedCount > 0 ? <span>{evictedCount} older activities evicted</span> : null}
+        {payloadsEvicted > 0 ? <span>{payloadsEvicted} payloads vacuumed</span> : null}
+        {relatedOnly ? (
+          <button
+            type='button'
+            onClick={() => setRelatedOnly(null)}
+            style={buttonStyle(colors, true)}
+          >
+            Showing query graph ×
+          </button>
+        ) : null}
+        <span>{formatMs(displayExtent.end - displayExtent.start)} window</span>
+        {range ? (
+          <button
+            type='button'
+            aria-label='Clear timeline range'
+            data-tooltip='Show the full recording'
+            onClick={() => {
+              setRange(null)
+              setSelectedId(null)
+            }}
+            style={{ ...buttonStyle(colors, true), marginLeft: 'auto' }}
+          >
+            {formatOffset(range.start - extent.start)}–{formatOffset(range.end - extent.start)} ×
+          </button>
+        ) : null}
+      </div>
+    </>
+  )
+}
+
+function activityCount(activities: readonly TimelineActivity[], kind: TimelineActivity['kind']) {
+  return activities.filter(activity => activity.kind === kind).length
+}
+
+function ActivityRow({
+  activity,
+  selected,
+  related,
+  rowRef,
+  extent,
+  nowPoint,
+  wallClockOffset,
+  onSelect,
+}: {
+  activity: TimelineActivity
+  selected: boolean
+  related: boolean
+  rowRef?: RefObject<HTMLTableRowElement | null>
+  extent: TimelineExtent
+  nowPoint: number
+  wallClockOffset: number
+  onSelect: () => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  return (
+    <tr
+      ref={rowRef}
+      data-timeline-activity={activity.kind}
+      aria-selected={selected}
+      tabIndex={0}
+      onClick={onSelect}
+      onKeyDown={event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          onSelect()
+        }
+      }}
+      style={{
+        cursor: 'pointer',
+        outline: 'none',
+        contentVisibility: 'auto',
+        containIntrinsicSize: '0 33px',
+        background: selected ? colors.activeButtonBg : related ? colors.relatedRowBg : undefined,
+        boxShadow: selected ? `inset 3px 0 ${colors.blue}` : undefined,
+        transition: 'background 80ms ease',
+      }}
+    >
+      <td style={{ ...styles.td, ...styles.code, color: colors.faint, whiteSpace: 'nowrap' }}>
+        {formatClock(wallClockOffset + activity.startAt, { milliseconds: true })}
+      </td>
+      <td style={styles.td}>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
+          <ActivityIcon activity={activity} />
+          <strong
+            data-tooltip={activity.label}
+            data-tooltip-overflow=''
+            style={{
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              fontWeight: 650,
+            }}
+          >
+            {activity.label}
+          </strong>
+        </span>
+      </td>
+      <EllipsisCell value={activity.operation} />
+      <EllipsisCell value={activity.detail || '—'} tooltip={activity.detailTooltip} />
+      <td style={styles.td}>
+        <Badge tone={activity.tone}>{activity.status}</Badge>
+      </td>
+      <EllipsisCell value={activity.trigger} />
+      <EllipsisCell value={activity.effect} />
+      <EllipsisCell value={activity.result} error={activity.error} />
+      <td style={{ ...styles.td, ...styles.code, color: colors.muted, whiteSpace: 'nowrap' }}>
+        {activity.durationMs === undefined ? '—' : formatMs(activity.durationMs)}
+      </td>
+      <td style={{ ...styles.td, paddingBlock: 0 }}>
+        <Waterfall activity={activity} extent={extent} nowPoint={nowPoint} />
+      </td>
+    </tr>
+  )
+}
+
+function EllipsisCell({
+  value,
+  error = false,
+  tooltip,
+}: {
+  value: string
+  error?: boolean
+  tooltip?: string | undefined
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  return (
+    <td
+      data-tooltip={tooltip ?? value}
+      {...(tooltip ? {} : { 'data-tooltip-overflow': '' })}
+      style={{
+        ...styles.td,
+        color: error ? colors.red : value === '—' ? colors.faint : colors.muted,
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+      }}
+    >
+      {value}
+    </td>
+  )
+}
+
+function ActivityIcon({ activity }: { activity: TimelineActivity }) {
+  const { colors } = useDevtoolsTheme()
+  const color = toneColor(colors, activity.tone)
+  const symbol =
+    activity.kind === 'fetch'
+      ? '↗'
+      : activity.kind === 'realtime'
+        ? '◆'
+        : activity.kind === 'write'
+          ? '✎'
+          : '●'
+  return (
+    <span
+      aria-hidden='true'
+      style={{
+        width: 16,
+        flexShrink: 0,
+        color,
+        font:
+          activity.kind === 'fetch' ? '700 15px/1 ui-monospace, monospace' : '11px/1 sans-serif',
+        textAlign: 'center',
+      }}
+    >
+      {symbol}
+    </span>
+  )
+}
+
+function Waterfall({
+  activity,
+  extent,
+  nowPoint,
+}: {
+  activity: TimelineActivity
+  extent: TimelineExtent
+  nowPoint: number
+}) {
+  const { colors } = useDevtoolsTheme()
+  const duration = Math.max(1, extent.end - extent.start)
+  const left = Math.max(0, Math.min(100, ((activity.startAt - extent.start) / duration) * 100))
+  const end = activity.endAt ?? nowPoint
+  const right = Math.max(left, Math.min(100, ((end - extent.start) / duration) * 100))
+  const point = activity.kind === 'realtime' || activity.kind === 'connection'
+  const color = toneColor(colors, activity.tone)
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height: 26,
+        overflow: 'hidden',
+        backgroundImage: `repeating-linear-gradient(to right, ${colors.rowBorder} 0, ${colors.rowBorder} 1px, transparent 1px, transparent 25%)`,
+      }}
+    >
+      <span
+        {...(activity.kind === 'fetch' ? { 'data-timeline-fetch': activity.status } : {})}
+        {...(activity.kind === 'connection' && activity.error
+          ? { 'data-timeline-outage': 'offline' }
+          : {})}
+        aria-hidden='true'
+        style={{
+          position: 'absolute',
+          top: point ? 8 : 9,
+          left: `${left}%`,
+          width: point ? 8 : `max(4px, ${right - left}%)`,
+          height: point ? 8 : 7,
+          marginLeft: point ? -4 : 0,
+          borderRadius: point ? (activity.kind === 'realtime' ? 2 : 999) : 999,
+          background: color,
+          boxShadow: `0 0 0 1px ${colors.bg}`,
+          transform: activity.kind === 'realtime' ? 'rotate(45deg)' : undefined,
+        }}
+      />
+    </div>
+  )
+}
+
+function ActivityDetails({
+  activity,
+  activities,
+  wallClockOffset,
+  width,
+  onResizeStart,
+  onClose,
+  onActivitySelect,
+  relatedOnly,
+  onRelatedOnlyChange,
+  onQuerySelect,
+  onCacheEntitySelect,
+  onTraceSelect,
+}: {
+  activity: TimelineActivity
+  activities: readonly TimelineActivity[]
+  wallClockOffset: number
+  width: number
+  onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
+  onClose: () => void
+  onActivitySelect: (activityId: string) => void
+  relatedOnly: string | null
+  onRelatedOnlyChange: (key: string | null) => void
+  onQuerySelect?: (queryId: string) => void
+  onCacheEntitySelect?: (serviceName: string, itemId: string | number) => void
+  onTraceSelect?: (traceId: number) => void
+}) {
+  const { colors } = useDevtoolsTheme()
+  return (
+    <DetailsPane
+      title={
+        activity.operation === 'action' ? activity.label : `${activity.label}.${activity.operation}`
+      }
+      subtitle={activity.write?.type ?? activity.kind}
+      width={width}
+      onResizeStart={onResizeStart}
+      onClose={onClose}
+    >
+      <DetailStats>
+        {activity.serviceName ? <DetailStat label='Service' value={activity.serviceName} /> : null}
+        <DetailStat
+          label={activity.kind === 'fetch' ? 'Method' : 'Operation'}
+          value={activity.operation}
+        />
+        {activity.detail ? <DetailStat label='Context' value={activity.detail} /> : null}
+        <DetailStat label='Status' value={activity.status} />
+        <DetailStat label='Trigger' value={activity.trigger} />
+        <DetailStat label='Result' value={activity.result} />
+        <DetailStat label='Cache effect' value={activity.effect} />
+        <DetailStat
+          label='Started'
+          value={formatClock(wallClockOffset + activity.startAt, { milliseconds: true })}
+        />
+        <DetailStat
+          label='Duration'
+          value={activity.durationMs === undefined ? '—' : formatMs(activity.durationMs)}
+        />
+        {activity.queryId ? (
+          <DetailStat label='Query ID' value={activity.queryId} copyValue={activity.queryId} />
+        ) : null}
+        {activity.write?.type === 'mutation' ? (
+          <DetailStat
+            label='Cache mode'
+            value={activity.write.optimistic ? 'projected immediately' : 'after confirmation'}
+          />
+        ) : null}
+        {activity.write ? (
+          <DetailStat label='Write ID' value={activity.write.id} copyValue={activity.write.id} />
+        ) : null}
+        {activity.traceId !== undefined ? (
+          <DetailStat
+            label='Trace ID'
+            value={`#${activity.traceId}`}
+            copyValue={String(activity.traceId)}
+          />
+        ) : null}
+        {activity.write?.initiatingAction ? (
+          <DetailStat label='Action' value={activity.write.initiatingAction.name} />
+        ) : null}
+        {activity.write?.initiatingAction?.durationMs !== undefined ? (
+          <DetailStat
+            label='Action duration'
+            value={formatMs(activity.write.initiatingAction.durationMs)}
+          />
+        ) : null}
+      </DetailStats>
+      {activity.error ? (
+        <DetailBlock>
+          <JsonViewer
+            value={historicalValue(activity.errorDetails)}
+            label='Error details'
+            emptyLabel={
+              activity.errorDetails?.state === 'evicted'
+                ? 'Original error details vacuumed to keep the recording bounded'
+                : 'No structured error details captured'
+            }
+          />
+        </DetailBlock>
+      ) : null}
+      {activity.kind === 'fetch' && activity.graph && activity.graph.length > 0 ? (
+        <QueryGraphDetails
+          activity={activity}
+          activities={activities}
+          relatedOnly={relatedOnly}
+          onRelatedOnlyChange={onRelatedOnlyChange}
+          onActivitySelect={onActivitySelect}
+        />
+      ) : null}
+      {activity.write ? (
+        <>
+          <DetailBlock>
+            <JsonViewer
+              value={historicalValue(activity.write.payload)}
+              label='Payload'
+              emptyLabel={
+                activity.write.payload?.state === 'evicted'
+                  ? 'Original payload vacuumed to keep the recording bounded'
+                  : 'No payload'
+              }
+            />
+          </DetailBlock>
+          <DetailBlock>
+            <JsonViewer
+              value={historicalValue(activity.write.args)}
+              label='Arguments'
+              emptyLabel={
+                activity.write.args?.state === 'evicted'
+                  ? 'Original arguments vacuumed to keep the recording bounded'
+                  : 'No arguments'
+              }
+            />
+          </DetailBlock>
+          {activity.write.args?.state === 'evicted' && activity.livePayload !== undefined ? (
+            <DetailBlock>
+              <JsonViewer
+                value={activity.livePayload}
+                label='Current cached entity — original write payload vacuumed'
+              />
+            </DetailBlock>
+          ) : null}
+        </>
+      ) : activity.kind === 'fetch' ? (
+        <>
+          {activity.payload !== undefined ? (
+            <DetailBlock>
+              <JsonViewer
+                value={historicalValue(activity.payload)}
+                label='Parameters at fetch time'
+                emptyLabel='Original parameters vacuumed to keep the recording bounded'
+              />
+            </DetailBlock>
+          ) : null}
+          {activity.payload?.state === 'evicted' && activity.livePayload !== undefined ? (
+            <DetailBlock>
+              <JsonViewer value={activity.livePayload} label='Current query parameters' />
+            </DetailBlock>
+          ) : null}
+          <DetailBlock>
+            <JsonViewer
+              value={
+                activity.data === undefined
+                  ? activity.liveData
+                  : activity.data.state === 'evicted'
+                    ? undefined
+                    : activity.data.value
+              }
+              label={activity.data ? 'Response data at fetch time' : 'Current query data'}
+              emptyLabel={
+                activity.data?.state === 'evicted'
+                  ? 'Original response vacuumed to keep the recording bounded'
+                  : 'No query data available'
+              }
+            />
+          </DetailBlock>
+          {activity.data?.state === 'evicted' && activity.liveData !== undefined ? (
+            <DetailBlock>
+              <JsonViewer
+                value={activity.liveData}
+                label={
+                  activity.data?.state === 'evicted'
+                    ? 'Current query data — original response vacuumed'
+                    : 'Current query data'
+                }
+              />
+            </DetailBlock>
+          ) : null}
+        </>
+      ) : activity.kind === 'realtime' ? (
+        <>
+          <DetailBlock>
+            <JsonViewer
+              value={historicalValue(activity.payload)}
+              label='Realtime payload'
+              emptyLabel={
+                activity.payload?.state === 'evicted'
+                  ? 'Original payload vacuumed to keep the recording bounded'
+                  : 'No realtime payload captured'
+              }
+            />
+          </DetailBlock>
+          {activity.payload?.state === 'evicted' && activity.livePayload !== undefined ? (
+            <DetailBlock>
+              <JsonViewer
+                value={activity.livePayload}
+                label='Current cached entity — original payload vacuumed'
+              />
+            </DetailBlock>
+          ) : null}
+        </>
+      ) : activity.kind === 'connection' ? (
+        <DetailBlock>
+          <JsonViewer
+            value={historicalValue(activity.payload)}
+            label='Connection event'
+            emptyLabel='No connection event captured'
+          />
+        </DetailBlock>
+      ) : null}
+      {onQuerySelect && relatedQueryIds(activity).length > 0 ? (
+        <DetailSection label='Queries'>
+          {relatedQueryIds(activity).map(queryId => (
+            <button
+              key={queryId}
+              type='button'
+              onClick={() => onQuerySelect(queryId)}
+              style={{ ...buttonStyle(colors, false), width: '100%', textAlign: 'left' }}
+            >
+              Open query {queryId} →
+            </button>
+          ))}
+        </DetailSection>
+      ) : null}
+      {activity.entity && onCacheEntitySelect ? (
+        <DetailSection label='Cached entity'>
+          <button
+            type='button'
+            onClick={() =>
+              onCacheEntitySelect(activity.entity!.serviceName, activity.entity!.itemId)
+            }
+            style={{ ...buttonStyle(colors, false), width: '100%', textAlign: 'left' }}
+          >
+            Open {activity.entity.serviceName} #{activity.entity.itemId} in Cache →
+          </button>
+        </DetailSection>
+      ) : null}
+      {activity.traceId !== undefined && onTraceSelect ? (
+        <DetailSection label='Causal trace'>
+          <button
+            type='button'
+            onClick={() => onTraceSelect(activity.traceId!)}
+            style={{ ...buttonStyle(colors, true), width: '100%', textAlign: 'left' }}
+          >
+            Open trace #{activity.traceId} in Events →
+          </button>
+        </DetailSection>
+      ) : null}
+    </DetailsPane>
+  )
+}
+
+interface QueryGraphRow {
+  key: string
+  path: string
+  role?: 'junction'
+  serviceName: string
+  activities: TimelineActivity[]
+}
+
+function QueryGraphDetails({
+  activity,
+  activities,
+  relatedOnly,
+  onRelatedOnlyChange,
+  onActivitySelect,
+}: {
+  activity: TimelineActivity
+  activities: readonly TimelineActivity[]
+  relatedOnly: string | null
+  onRelatedOnlyChange: (key: string | null) => void
+  onActivitySelect: (activityId: string) => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const runs = [
+    ...new Map(
+      (activity.graph ?? []).map(ref => [timelineGraphKey(ref.operationId, ref.runId), ref]),
+    ).entries(),
+  ]
+
+  return (
+    <DetailSection label='Query graph'>
+      {runs.map(([runKey, ref]) => {
+        const related = activities.filter(item => activityHasGraph(item, runKey))
+        const rows = queryGraphRows(related, ref.operationId, ref.runId)
+        return (
+          <div key={runKey} style={{ display: 'grid', gap: 5, marginBottom: 10 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                {ref.operationLabel}
+              </span>
+              <span style={{ color: colors.faint, whiteSpace: 'nowrap' }}>
+                {related.length} {related.length === 1 ? 'fetch' : 'fetches'}
+              </span>
+              <button
+                type='button'
+                onClick={() => onRelatedOnlyChange(relatedOnly === runKey ? null : runKey)}
+                style={{ ...buttonStyle(colors, relatedOnly === runKey), marginLeft: 'auto' }}
+              >
+                {relatedOnly === runKey ? 'Show all' : 'Show only related'}
+              </button>
+            </div>
+            <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
+              {rows.map(row => {
+                const durations = row.activities
+                  .map(item => item.durationMs)
+                  .filter((value): value is number => value !== undefined)
+                const min = durations.length > 0 ? Math.min(...durations) : undefined
+                const max = durations.length > 0 ? Math.max(...durations) : undefined
+                return (
+                  <button
+                    key={row.key}
+                    type='button'
+                    onClick={() => onActivitySelect(row.activities[0]!.id)}
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: 'minmax(110px, 1fr) minmax(70px, .7fr) auto auto',
+                      alignItems: 'center',
+                      gap: 8,
+                      width: '100%',
+                      minHeight: 27,
+                      padding: '3px 0',
+                      border: 0,
+                      borderBottom: `1px solid ${colors.rowBorder}`,
+                      background: 'transparent',
+                      color: colors.text,
+                      font: 'inherit',
+                      textAlign: 'left',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <span style={{ color: row.path === '(root)' ? colors.text : colors.muted }}>
+                      {row.path === '(root)'
+                        ? 'root'
+                        : `nested: ${row.path}${row.role === 'junction' ? ' junction' : ''}`}
+                    </span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      {row.serviceName}
+                    </span>
+                    <span style={{ color: colors.faint, whiteSpace: 'nowrap' }}>
+                      {row.activities.length > 1 ? `${row.activities.length} ×` : ''}
+                    </span>
+                    <span style={{ ...styles.code, color: colors.muted, whiteSpace: 'nowrap' }}>
+                      {min === undefined
+                        ? '—'
+                        : min === max
+                          ? formatMs(min)
+                          : `${formatMs(min)}–${formatMs(max!)}`}
+                    </span>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+    </DetailSection>
+  )
+}
+
+function queryGraphRows(
+  activities: readonly TimelineActivity[],
+  operationId: string,
+  runId: string,
+): QueryGraphRow[] {
+  const rows = new Map<string, QueryGraphRow>()
+  for (const activity of activities) {
+    const ref = activity.graph?.find(
+      item => item.operationId === operationId && item.runId === runId,
+    )
+    if (!ref) continue
+    const serviceName = activity.serviceName ?? activity.label
+    const key = `${ref.path}\u0000${ref.role ?? ''}\u0000${serviceName}`
+    const row = rows.get(key)
+    if (row) {
+      row.activities.push(activity)
+    } else {
+      rows.set(key, {
+        key,
+        path: ref.path,
+        ...(ref.role ? { role: ref.role } : {}),
+        serviceName,
+        activities: [activity],
+      })
+    }
+  }
+  return [...rows.values()].sort((a, b) => {
+    if (a.path === '(root)') return -1
+    if (b.path === '(root)') return 1
+    return a.path.localeCompare(b.path) || a.serviceName.localeCompare(b.serviceName)
+  })
+}
+
+function timelineGraphKey(operationId: string, runId: string): string {
+  return `${operationId}\u0000${runId}`
+}
+
+function activityHasGraph(activity: TimelineActivity, key: string): boolean {
+  return activity.graph?.some(ref => timelineGraphKey(ref.operationId, ref.runId) === key) ?? false
+}
+
+function activityMatchesAnyGraph(activity: TimelineActivity, keys: ReadonlySet<string>): boolean {
+  return (
+    activity.graph?.some(ref => keys.has(timelineGraphKey(ref.operationId, ref.runId))) ?? false
+  )
+}
+
+function relatedQueryIds(activity: TimelineActivity): string[] {
+  return [
+    ...new Set([...(activity.queryId ? [activity.queryId] : []), ...(activity.queryIds ?? [])]),
+  ]
+}
+
+function intersects(activity: TimelineActivity, range: TimelineRange, nowPoint: number): boolean {
+  const end = activity.endAt ?? nowPoint
+  return activity.startAt <= range.end && end >= range.start
+}
+
+function formatOffset(value: number): string {
+  if (value < 1_000) return `${Math.round(value)}ms`
+  if (value < 60_000) return `${(value / 1_000).toFixed(value < 10_000 ? 1 : 0)}s`
+  const minutes = Math.floor(value / 60_000)
+  const seconds = Math.round((value % 60_000) / 1_000)
+  return seconds === 0 ? `${minutes}m` : `${minutes}m ${seconds}s`
+}
diff --git a/lib/devtools/TimelineCanvas.tsx b/lib/devtools/TimelineCanvas.tsx
deleted file mode 100644
index 5c9182b3..00000000
--- a/lib/devtools/TimelineCanvas.tsx
+++ /dev/null
@@ -1,496 +0,0 @@
-import { useCallback, useLayoutEffect, useRef, useState } from 'react'
-import type { QuerySpan } from './collector.js'
-import { formatClock, formatMs } from './format.js'
-import {
-  TimelineOverview,
-  TIMELINE_LABEL_WIDTH as LABEL_WIDTH,
-  type TimelineViewport,
-} from './TimelineOverview.js'
-import { useDevtoolsTheme, type DevtoolsColors } from './ui.js'
-
-const FOLLOW_THRESHOLD = 24
-const GRID_TICK_MS = 5_000
-export const TIMELINE_PIXELS_PER_SECOND = 64
-
-export type TimelineLane =
-  | {
-      kind: 'query'
-      id: string
-      label: string
-      context: string
-      detail: string
-      firstAt: number
-      bars: QuerySpan[]
-    }
-  | {
-      kind: 'realtime'
-      id: string
-      label: string
-      detail: string
-      firstAt: number
-      ticks: number[]
-    }
-
-export interface TimelineLayout {
-  start: number
-  trackWidth: number
-}
-
-interface RenderedTimelineLayout extends TimelineLayout {
-  end: number
-}
-
-export function TimelineCanvas({
-  lanes,
-  layout,
-  nowPoint,
-  wallClockOffset,
-  follow,
-  onFollowChange,
-}: {
-  lanes: TimelineLane[]
-  layout: TimelineLayout | null
-  nowPoint: number
-  wallClockOffset: number
-  follow: boolean
-  onFollowChange: (value: boolean) => void
-}) {
-  const { colors, styles } = useDevtoolsTheme()
-  const verticalScrollRef = useRef<HTMLDivElement>(null)
-  const trackScrollRef = useRef<HTMLDivElement>(null)
-  const axisScrollRef = useRef<HTMLDivElement>(null)
-  const [viewport, setViewport] = useState<TimelineViewport>({ left: 0, width: 0 })
-  const [availableTrackWidth, setAvailableTrackWidth] = useState(0)
-  const hasLayout = layout !== null
-  const trackWidth = layout ? Math.max(layout.trackWidth, availableTrackWidth) : undefined
-  const renderedLayout: RenderedTimelineLayout | null =
-    layout && trackWidth !== undefined
-      ? {
-          ...layout,
-          end: layout.start + (trackWidth / TIMELINE_PIXELS_PER_SECOND) * 1_000,
-          trackWidth,
-        }
-      : null
-  const updateViewport = useCallback(() => {
-    const scroll = trackScrollRef.current
-    if (!scroll || trackWidth === undefined) return
-    const visibleTrackWidth = Math.max(1, scroll.clientWidth)
-    const next = {
-      left: Math.max(0, Math.min(1, scroll.scrollLeft / trackWidth)),
-      width: Math.max(0, Math.min(1, visibleTrackWidth / trackWidth)),
-    }
-    setViewport(current =>
-      Math.abs(current.left - next.left) < 0.0001 && Math.abs(current.width - next.width) < 0.0001
-        ? current
-        : next,
-    )
-  }, [trackWidth])
-
-  useLayoutEffect(() => {
-    const horizontalScroll = trackScrollRef.current
-    const verticalScroll = verticalScrollRef.current
-    if (!horizontalScroll || !verticalScroll || !follow || trackWidth === undefined) return
-    horizontalScroll.scrollLeft = Math.max(
-      0,
-      horizontalScroll.scrollWidth - horizontalScroll.clientWidth,
-    )
-    verticalScroll.scrollTop = Math.max(
-      0,
-      verticalScroll.scrollHeight - verticalScroll.clientHeight,
-    )
-    if (axisScrollRef.current) axisScrollRef.current.scrollLeft = horizontalScroll.scrollLeft
-    updateViewport()
-  }, [follow, lanes.length, trackWidth, updateViewport])
-
-  useLayoutEffect(() => {
-    if (!hasLayout) return
-    const scroll = trackScrollRef.current
-    if (!scroll) return
-    const measure = () => {
-      const width = scroll.clientWidth
-      setAvailableTrackWidth(current => (current === width ? current : width))
-    }
-    measure()
-    if (typeof ResizeObserver === 'undefined') return
-    const observer = new ResizeObserver(measure)
-    observer.observe(scroll)
-    return () => observer.disconnect()
-  }, [hasLayout])
-
-  useLayoutEffect(updateViewport, [updateViewport])
-
-  if (!layout || !renderedLayout) {
-    return (
-      <div style={{ ...styles.scroll, height: 'auto', flex: 1, minHeight: 0 }}>
-        <div style={{ padding: 16, color: colors.muted }}>
-          No timeline activity yet. Recording continues until you press Clear.
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <TimelineOverview
-        lanes={lanes}
-        layout={renderedLayout}
-        nowPoint={nowPoint}
-        viewport={viewport}
-        onNavigate={ratio => {
-          const scroll = trackScrollRef.current
-          if (!scroll) return
-          const visibleTrackWidth = Math.max(1, scroll.clientWidth)
-          scroll.scrollLeft = Math.max(
-            0,
-            Math.min(
-              renderedLayout.trackWidth - visibleTrackWidth,
-              ratio * renderedLayout.trackWidth - visibleTrackWidth / 2,
-            ),
-          )
-          if (axisScrollRef.current) axisScrollRef.current.scrollLeft = scroll.scrollLeft
-          onFollowChange(false)
-          updateViewport()
-        }}
-      />
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: `${LABEL_WIDTH}px minmax(0, 1fr)`,
-          minHeight: 38,
-          flexShrink: 0,
-          background: colors.bg,
-        }}
-      >
-        <div
-          title={`Recording started ${formatTimelineClock(renderedLayout.start, wallClockOffset, true)}`}
-          style={{
-            color: colors.muted,
-            padding: '7px 10px 0',
-            borderBottom: `1px solid ${colors.border}`,
-            background: colors.bg,
-          }}
-        >
-          <TimelineLegend />
-        </div>
-        <div
-          ref={axisScrollRef}
-          aria-hidden='true'
-          style={{ overflow: 'hidden', borderBottom: `1px solid ${colors.border}` }}
-        >
-          <TimelineAxis
-            layout={renderedLayout}
-            viewport={viewport}
-            wallClockOffset={wallClockOffset}
-          />
-        </div>
-      </div>
-      <div
-        ref={verticalScrollRef}
-        aria-label='Timeline lanes'
-        style={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}
-        onScroll={event => {
-          if (!follow) return
-          const scroll = event.currentTarget
-          const distance = scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop
-          if (distance > FOLLOW_THRESHOLD) onFollowChange(false)
-        }}
-      >
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: `${LABEL_WIDTH}px minmax(0, 1fr)`,
-            alignItems: 'start',
-          }}
-        >
-          <div style={{ minWidth: 0, paddingBottom: 10 }}>
-            {lanes.map(lane => (
-              <TimelineLaneLabel
-                key={lane.id}
-                label={lane.label}
-                {...(lane.kind === 'query' ? { context: lane.context } : {})}
-                detail={lane.detail}
-              />
-            ))}
-          </div>
-          <div
-            ref={trackScrollRef}
-            aria-label='Timeline time range'
-            style={{ minWidth: 0, overflowX: 'auto', overflowY: 'hidden' }}
-            onScroll={event => {
-              const scroll = event.currentTarget
-              if (axisScrollRef.current) axisScrollRef.current.scrollLeft = scroll.scrollLeft
-              updateViewport()
-              if (!follow) return
-              const distance = scroll.scrollWidth - scroll.clientWidth - scroll.scrollLeft
-              if (distance > FOLLOW_THRESHOLD) onFollowChange(false)
-            }}
-          >
-            <div style={{ width: renderedLayout.trackWidth, paddingBottom: 10 }}>
-              {lanes.map(lane => (
-                <TimelineLaneTrack
-                  key={lane.id}
-                  layout={renderedLayout}
-                  bars={lane.kind === 'query' ? lane.bars : []}
-                  ticks={lane.kind === 'realtime' ? lane.ticks : []}
-                  nowPoint={nowPoint}
-                  wallClockOffset={wallClockOffset}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-function TimelineAxis({
-  layout,
-  viewport,
-  wallClockOffset,
-}: {
-  layout: RenderedTimelineLayout
-  viewport: TimelineViewport
-  wallClockOffset: number
-}) {
-  const { colors } = useDevtoolsTheme()
-  return (
-    <div
-      style={{
-        position: 'relative',
-        width: layout.trackWidth,
-        minHeight: 38,
-        ...timelineGridStyle(colors),
-      }}
-    >
-      {timelineAxisTicks(layout.start, layout.trackWidth, viewport).map(tick => (
-        <span
-          key={tick}
-          style={{
-            position: 'absolute',
-            left: timeToPixels(tick, layout.start),
-            top: 0,
-            bottom: 0,
-            borderLeft: `1px solid ${colors.rowBorder}`,
-          }}
-        >
-          <span
-            style={{
-              position: 'absolute',
-              top: 9,
-              left: 6,
-              color: colors.muted,
-              whiteSpace: 'nowrap',
-            }}
-            title={formatTimelineClock(tick, wallClockOffset, true)}
-          >
-            {formatTimelineOffset(tick - layout.start)}
-          </span>
-        </span>
-      ))}
-    </div>
-  )
-}
-
-function TimelineLegend() {
-  const { colors } = useDevtoolsTheme()
-  return (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, color: colors.muted }}>
-      <TimelineLegendItem color={colors.green} shape='bar' label='fetch' />
-      <TimelineLegendItem color={colors.blue} shape='dot' label='realtime' />
-      <TimelineLegendItem color={colors.red} shape='bar' label='failed' />
-    </span>
-  )
-}
-
-function TimelineLegendItem({
-  color,
-  shape,
-  label,
-}: {
-  color: string
-  shape: 'bar' | 'dot'
-  label: string
-}) {
-  return (
-    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap' }}>
-      <span
-        aria-hidden='true'
-        style={{
-          width: shape === 'dot' ? 6 : 20,
-          height: shape === 'dot' ? 6 : 7,
-          borderRadius: 999,
-          background: color,
-          display: 'inline-block',
-        }}
-      />
-      {label}
-    </span>
-  )
-}
-
-function TimelineLaneLabel({
-  label,
-  context,
-  detail,
-}: {
-  label: string
-  context?: string
-  detail: string
-}) {
-  const { colors, styles } = useDevtoolsTheme()
-  return (
-    <div
-      data-timeline-lane={label}
-      style={{
-        ...styles.laneLabel,
-        height: 32,
-        boxSizing: 'border-box',
-        paddingLeft: 10,
-        borderBottom: `1px solid ${colors.rowBorder}`,
-      }}
-      title={detail ? `${label} ${detail}` : label}
-    >
-      <span style={{ color: colors.text, fontWeight: 600 }}>{label}</span>
-      {context ? (
-        <span style={{ color: colors.faint, marginLeft: 6, whiteSpace: 'nowrap' }}>{context}</span>
-      ) : null}
-    </div>
-  )
-}
-
-function TimelineLaneTrack({
-  layout,
-  bars,
-  ticks,
-  nowPoint,
-  wallClockOffset,
-}: {
-  layout: TimelineLayout
-  bars: Array<{ startAt: number; endAt?: number; ok?: boolean }>
-  ticks: number[]
-  nowPoint: number
-  wallClockOffset: number
-}) {
-  const { colors, styles } = useDevtoolsTheme()
-  return (
-    <div
-      style={{
-        ...styles.laneTrack,
-        width: layout.trackWidth,
-        height: 32,
-        boxSizing: 'border-box',
-        borderBottom: `1px solid ${colors.rowBorder}`,
-        ...timelineGridStyle(colors),
-      }}
-    >
-      {bars.map((bar, index) => {
-        const barEnd = bar.endAt ?? nowPoint
-        const left = timeToPixels(bar.startAt, layout.start)
-        const width = Math.max(9, timeToPixels(barEnd, bar.startAt))
-        const color = bar.ok === false ? colors.red : colors.green
-        return (
-          <span
-            key={`${bar.startAt}:${index}`}
-            data-timeline-fetch={bar.ok === false ? 'failed' : 'success'}
-            title={[
-              `${bar.ok === false ? 'Failed fetch' : 'Fetch'} · ${formatMs(barEnd - bar.startAt)}`,
-              formatTimelineClock(bar.startAt, wallClockOffset, true),
-            ].join('\n')}
-            style={{
-              position: 'absolute',
-              top: 13,
-              left,
-              width,
-              height: 8,
-              overflow: 'hidden',
-              borderRadius: 999,
-              background: `linear-gradient(180deg, color-mix(in srgb, ${color} 76%, white), ${color})`,
-              boxShadow: `0 0 0 1px color-mix(in srgb, ${color} 62%, ${colors.bg})`,
-            }}
-          >
-            <span
-              aria-hidden='true'
-              style={{
-                position: 'absolute',
-                insetBlock: 1,
-                left: 2,
-                width: 2,
-                borderRadius: 999,
-                background: bar.ok === false ? colors.amber : colors.blue,
-                opacity: 0.9,
-              }}
-            />
-          </span>
-        )
-      })}
-      {ticks.map((tick, index) => (
-        <span
-          key={`${tick}:${index}`}
-          title={`Realtime event\n${formatTimelineClock(tick, wallClockOffset, true)}`}
-          style={{
-            position: 'absolute',
-            top: 9,
-            left: timeToPixels(tick, layout.start),
-            width: 7,
-            height: 7,
-            marginLeft: -4,
-            borderRadius: 2,
-            background: colors.blue,
-            boxShadow: `0 0 0 1px ${colors.bg}`,
-            transform: 'rotate(45deg)',
-          }}
-        />
-      ))}
-    </div>
-  )
-}
-
-function timeToPixels(value: number, start: number): number {
-  return Math.max(0, ((value - start) / 1_000) * TIMELINE_PIXELS_PER_SECOND)
-}
-
-function formatTimelineOffset(value: number): string {
-  const seconds = Math.round(value / 1_000)
-  if (seconds < 60) return `${seconds}s`
-  const minutes = Math.floor(seconds / 60)
-  const remainder = seconds % 60
-  return remainder === 0 ? `${minutes}m` : `${minutes}m ${remainder}s`
-}
-
-function timelineAxisTicks(
-  start: number,
-  trackWidth: number,
-  viewport: TimelineViewport,
-): number[] {
-  const tickWidth = TIMELINE_PIXELS_PER_SECOND * (GRID_TICK_MS / 1_000)
-  const first = Math.max(0, Math.floor((viewport.left * trackWidth) / tickWidth) - 1)
-  const last = Math.min(
-    Math.floor(trackWidth / tickWidth),
-    Math.ceil(((viewport.left + viewport.width) * trackWidth) / tickWidth) + 1,
-  )
-  return Array.from(
-    { length: Math.max(0, last - first + 1) },
-    (_, index) => start + (first + index) * GRID_TICK_MS,
-  )
-}
-
-function timelineGridStyle(colors: DevtoolsColors) {
-  const second = TIMELINE_PIXELS_PER_SECOND
-  const major = second * (GRID_TICK_MS / 1_000)
-  return {
-    backgroundColor: colors.panel2,
-    backgroundImage: [
-      `repeating-linear-gradient(to right, ${colors.border} 0, ${colors.border} 1px, transparent 1px, transparent ${major}px)`,
-      `repeating-linear-gradient(to right, ${colors.rowBorder} 0, ${colors.rowBorder} 1px, transparent 1px, transparent ${second}px)`,
-    ].join(', '),
-  }
-}
-
-function formatTimelineClock(
-  value: number,
-  wallClockOffset: number,
-  milliseconds: boolean,
-): string {
-  return formatClock(wallClockOffset + value, { milliseconds })
-}
diff --git a/lib/devtools/TimelineOverview.tsx b/lib/devtools/TimelineOverview.tsx
index 1827d0d2..19cd0616 100644
--- a/lib/devtools/TimelineOverview.tsx
+++ b/lib/devtools/TimelineOverview.tsx
@@ -1,116 +1,115 @@
-import { useEffect, useRef } from 'react'
-import type { QuerySpan } from './collector.js'
+import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
+import type { TimelineActivity, TimelineExtent } from './timelineModel.js'
 import { useDevtoolsTheme } from './ui.js'
 
-export const TIMELINE_LABEL_WIDTH = 220
+const OVERVIEW_HEIGHT = 54
+const DRAG_THRESHOLD = 3
+const OVERVIEW_PADDING = 4
+const MARK_HEIGHT = 3
+const LANE_GAP = 1
+const MIN_MARK_WIDTH = 2
 
-const OVERVIEW_HEIGHT = 42
-
-export interface TimelineViewport {
-  left: number
-  width: number
-}
-
-type TimelineOverviewLane =
-  | { kind: 'query'; id: string; bars: QuerySpan[] }
-  | { kind: 'realtime'; id: string; ticks: number[] }
-
-interface TimelineOverviewLayout {
+export interface TimelineRange {
   start: number
   end: number
 }
 
 export function TimelineOverview({
-  lanes,
-  layout,
+  activities,
+  extent,
+  range,
   nowPoint,
-  viewport,
-  onNavigate,
+  onRangeChange,
 }: {
-  lanes: TimelineOverviewLane[]
-  layout: TimelineOverviewLayout
+  activities: readonly TimelineActivity[]
+  extent: TimelineExtent
+  range: TimelineRange | null
   nowPoint: number
-  viewport: TimelineViewport
-  onNavigate: (ratio: number) => void
+  onRangeChange: (range: TimelineRange | null) => void
 }) {
   const { colors } = useDevtoolsTheme()
   const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [draft, setDraft] = useState<TimelineRange | null>(null)
 
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas || typeof CanvasRenderingContext2D === 'undefined') return
-    const draw = () => drawOverview(canvas, lanes, layout, nowPoint, viewport, colors)
+    const draw = () => drawOverview(canvas, activities, extent, draft ?? range, nowPoint, colors)
     draw()
     if (typeof ResizeObserver === 'undefined') return
     const observer = new ResizeObserver(draw)
     observer.observe(canvas)
     return () => observer.disconnect()
-  }, [colors, lanes, layout, nowPoint, viewport])
+  }, [activities, colors, draft, extent, nowPoint, range])
+
+  const onMouseDown = (event: ReactMouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    const button = event.currentTarget
+    const ownerWindow = button.ownerDocument.defaultView ?? window
+    const bounds = button.getBoundingClientRect()
+    if (bounds.width <= 0) return
+    const startX = event.clientX
+    const anchor = timeAt(event.clientX, bounds, extent)
+    const onMove = (move: MouseEvent) => {
+      const point = timeAt(move.clientX, bounds, extent)
+      setDraft(normalizeRange(anchor, point))
+    }
+    const onUp = (up: MouseEvent) => {
+      ownerWindow.removeEventListener('mousemove', onMove)
+      ownerWindow.removeEventListener('mouseup', onUp)
+      const point = timeAt(up.clientX, bounds, extent)
+      const next =
+        Math.abs(up.clientX - startX) < DRAG_THRESHOLD ? null : normalizeRange(anchor, point)
+      setDraft(null)
+      onRangeChange(next)
+    }
+    ownerWindow.addEventListener('mousemove', onMove)
+    ownerWindow.addEventListener('mouseup', onUp)
+  }
 
   return (
-    <div
+    <button
+      type='button'
+      aria-label='Timeline overview'
+      data-tooltip='Drag to filter the activity table by time. Click to clear the range.'
+      onMouseDown={onMouseDown}
+      onKeyDown={event => {
+        if (event.key === 'Escape') onRangeChange(null)
+      }}
       style={{
-        display: 'grid',
-        gridTemplateColumns: `${TIMELINE_LABEL_WIDTH}px minmax(0, 1fr)`,
-        minHeight: OVERVIEW_HEIGHT,
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        height: OVERVIEW_HEIGHT,
         flexShrink: 0,
+        overflow: 'hidden',
+        border: 0,
         borderBottom: `1px solid ${colors.border}`,
-        background: colors.panel2,
+        padding: 0,
+        background: colors.panel,
+        cursor: 'crosshair',
       }}
     >
-      <div
+      <canvas
+        ref={canvasRef}
+        aria-hidden='true'
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 7,
-          padding: '0 10px',
-          color: colors.muted,
-          fontWeight: 600,
-        }}
-      >
-        Activity
-        <span style={{ color: colors.faint, fontWeight: 500 }}>{lanes.length} lanes</span>
-      </div>
-      <button
-        type='button'
-        aria-label='Timeline overview'
-        title='Click to inspect another point in the recording'
-        onClick={event => {
-          const bounds = event.currentTarget.getBoundingClientRect()
-          if (bounds.width <= 0) return
-          onNavigate(Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width)))
+          display: 'block',
+          width: '100%',
+          height: OVERVIEW_HEIGHT,
+          pointerEvents: 'none',
         }}
-        style={{
-          position: 'relative',
-          overflow: 'hidden',
-          border: 0,
-          borderLeft: `1px solid ${colors.border}`,
-          padding: 0,
-          background: colors.panel,
-          cursor: 'crosshair',
-        }}
-      >
-        <canvas
-          ref={canvasRef}
-          aria-hidden='true'
-          style={{
-            display: 'block',
-            width: '100%',
-            height: OVERVIEW_HEIGHT,
-            pointerEvents: 'none',
-          }}
-        />
-      </button>
-    </div>
+      />
+    </button>
   )
 }
 
 function drawOverview(
   canvas: HTMLCanvasElement,
-  lanes: TimelineOverviewLane[],
-  layout: TimelineOverviewLayout,
+  activities: readonly TimelineActivity[],
+  extent: TimelineExtent,
+  range: TimelineRange | null,
   nowPoint: number,
-  viewport: TimelineViewport,
   colors: ReturnType<typeof useDevtoolsTheme>['colors'],
 ): void {
   const width = canvas.clientWidth
@@ -126,34 +125,115 @@ function drawOverview(
   context.setTransform(ratio, 0, 0, ratio, 0, 0)
   context.clearRect(0, 0, width, height)
 
-  const laneHeight = (height - 10) / Math.max(1, lanes.length)
-  for (const [laneIndex, lane] of lanes.entries()) {
-    const markHeight = Math.min(3, Math.max(1, laneHeight * 0.5))
-    const top = 5 + laneIndex * laneHeight + Math.max(0, (laneHeight - markHeight) / 2)
-    if (lane.kind === 'query') {
-      for (const bar of lane.bars) {
-        const left = timelineRatio(bar.startAt, layout) * width
-        const right = timelineRatio(bar.endAt ?? nowPoint, layout) * width
-        context.fillStyle = bar.ok === false ? colors.red : colors.green
-        context.fillRect(left, top, Math.max(1, right - left), markHeight)
-      }
+  context.strokeStyle = colors.rowBorder
+  context.lineWidth = 1
+  for (let index = 1; index < 8; index++) {
+    const x = Math.round((index / 8) * width) + 0.5
+    context.beginPath()
+    context.moveTo(x, 0)
+    context.lineTo(x, height)
+    context.stroke()
+  }
+
+  const laneCount = Math.max(
+    1,
+    Math.floor((height - OVERVIEW_PADDING * 2 + LANE_GAP) / (MARK_HEIGHT + LANE_GAP)),
+  )
+  const marks = packOverviewMarks(activities, extent, nowPoint, width, laneCount)
+  for (const { activity, lane } of marks) {
+    const top = OVERVIEW_PADDING + lane * (MARK_HEIGHT + LANE_GAP)
+    const left = timelineRatio(activity.startAt, extent) * width
+    const right = timelineRatio(activity.endAt ?? nowPoint, extent) * width
+    context.fillStyle = toneColor(activity.tone, colors)
+    if (
+      activity.startAt === activity.endAt ||
+      activity.kind === 'realtime' ||
+      activity.kind === 'connection'
+    ) {
+      context.fillRect(left - MIN_MARK_WIDTH / 2, top, MIN_MARK_WIDTH, MARK_HEIGHT)
     } else {
-      context.fillStyle = colors.blue
-      for (const tick of lane.ticks) {
-        context.fillRect(timelineRatio(tick, layout) * width, top, 2, markHeight)
+      context.fillRect(left, top, Math.max(MIN_MARK_WIDTH, right - left), MARK_HEIGHT)
+    }
+  }
+
+  if (range) {
+    const left = timelineRatio(range.start, extent) * width
+    const right = timelineRatio(range.end, extent) * width
+    context.fillStyle = 'rgba(0,0,0,.2)'
+    context.fillRect(0, 0, left, height)
+    context.fillRect(right, 0, width - right, height)
+    context.strokeStyle = colors.blue
+    context.lineWidth = 1
+    context.strokeRect(left + 0.5, 0.5, Math.max(1, right - left - 1), height - 1)
+    context.fillStyle = colors.blue
+    context.fillRect(left, 0, 2, height)
+    context.fillRect(right - 2, 0, 2, height)
+  }
+}
+
+function packOverviewMarks(
+  activities: readonly TimelineActivity[],
+  extent: TimelineExtent,
+  nowPoint: number,
+  width: number,
+  laneCount: number,
+): Array<{ activity: TimelineActivity; lane: number }> {
+  const minimumDuration = ((extent.end - extent.start) * MIN_MARK_WIDTH) / Math.max(1, width)
+  const laneEnds = Array.from({ length: laneCount }, () => Number.NEGATIVE_INFINITY)
+  const sorted = [...activities].sort(
+    (first, second) =>
+      first.startAt - second.startAt ||
+      activityEnd(first, nowPoint) - activityEnd(second, nowPoint),
+  )
+
+  return sorted.map(activity => {
+    const start = activity.startAt
+    const end = Math.max(activityEnd(activity, nowPoint), start + minimumDuration)
+    let lane = laneEnds.findIndex(laneEnd => laneEnd <= start)
+
+    if (lane === -1) {
+      lane = 0
+      for (let index = 1; index < laneEnds.length; index++) {
+        if (laneEnds[index]! < laneEnds[lane]!) lane = index
       }
     }
+
+    laneEnds[lane] = end
+    return { activity, lane }
+  })
+}
+
+function activityEnd(activity: TimelineActivity, nowPoint: number): number {
+  return activity.endAt ?? nowPoint
+}
+
+function toneColor(
+  tone: TimelineActivity['tone'],
+  colors: ReturnType<typeof useDevtoolsTheme>['colors'],
+): string {
+  switch (tone) {
+    case 'green':
+      return colors.green
+    case 'amber':
+      return colors.amber
+    case 'red':
+      return colors.red
+    case 'blue':
+      return colors.blue
+    case 'neutral':
+      return colors.faint
   }
+}
 
-  const viewportLeft = viewport.left * width
-  const viewportWidth = Math.max(4, viewport.width * width)
-  context.fillStyle = colors.activeButtonBg
-  context.fillRect(viewportLeft, 0, viewportWidth, height)
-  context.strokeStyle = colors.blue
-  context.lineWidth = 1
-  context.strokeRect(viewportLeft + 0.5, 0.5, Math.max(0, viewportWidth - 1), height - 1)
+function normalizeRange(first: number, second: number): TimelineRange {
+  return first <= second ? { start: first, end: second } : { start: second, end: first }
+}
+
+function timeAt(clientX: number, bounds: DOMRect, extent: TimelineExtent): number {
+  const ratio = Math.max(0, Math.min(1, (clientX - bounds.left) / bounds.width))
+  return extent.start + ratio * (extent.end - extent.start)
 }
 
-function timelineRatio(value: number, layout: TimelineOverviewLayout): number {
-  return Math.max(0, Math.min(1, (value - layout.start) / (layout.end - layout.start)))
+function timelineRatio(value: number, extent: TimelineExtent): number {
+  return Math.max(0, Math.min(1, (value - extent.start) / (extent.end - extent.start)))
 }
diff --git a/lib/devtools/TimelineTab.tsx b/lib/devtools/TimelineTab.tsx
index 475e7063..d348e6a9 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -1,36 +1,11 @@
 import { useEffect, useMemo, useState } from 'react'
-import type { DevtoolsSnapshot, QueryRecord } from './collector.js'
-import { compactJson, now } from './format.js'
-import type { DevtoolsModel, EventQueryScope } from './model.js'
-import {
-  TimelineCanvas,
-  TIMELINE_PIXELS_PER_SECOND as PIXELS_PER_SECOND,
-  type TimelineLane,
-  type TimelineLayout,
-} from './TimelineCanvas.js'
+import type { DevtoolsSnapshot } from './collector.js'
+import { now } from './format.js'
+import type { DevtoolsModel } from './model.js'
+import { TimelineActivityTable, type TimelineVisibility } from './TimelineActivityTable.js'
+import { buildTimelineActivities, timelineExtent } from './timelineModel.js'
 import { buttonStyle, useDevtoolsTheme } from './ui.js'
 
-const END_GUTTER_MS = 1_000
-
-type RawTimelineLane =
-  | {
-      kind: 'query'
-      id: string
-      label: string
-      context: string
-      detail: string
-      firstAt: number
-      query: QueryRecord
-    }
-  | {
-      kind: 'realtime'
-      id: string
-      label: string
-      detail: string
-      firstAt: number
-      ticks: number[]
-    }
-
 export function TimelineFollowControl({
   value,
   onChange,
@@ -45,7 +20,7 @@ export function TimelineFollowControl({
       aria-label={value ? 'Pause live timeline' : 'Resume live timeline'}
       aria-pressed={value}
       onClick={() => onChange(!value)}
-      title={
+      data-tooltip={
         value
           ? 'Following new timeline activity. Scroll away or click to pause.'
           : 'Return to the latest timeline activity.'
@@ -74,83 +49,57 @@ export function TimelineFollowControl({
 export function TimelineTab({
   snapshot,
   model,
+  filter,
+  visibility,
   follow,
   onFollowChange,
+  requestedActivityId,
+  onRequestedActivityHandled,
+  onQuerySelect,
+  onCacheEntitySelect,
+  onTraceSelect,
 }: {
   snapshot: DevtoolsSnapshot
   model: DevtoolsModel
+  filter: string
+  visibility: TimelineVisibility
   follow: boolean
   onFollowChange: (value: boolean) => void
+  requestedActivityId?: string | null
+  onRequestedActivityHandled?: () => void
+  onQuerySelect?: (queryId: string) => void
+  onCacheEntitySelect?: (serviceName: string, itemId: string | number) => void
+  onTraceSelect?: (traceId: number) => void
 }) {
-  const rawLanes = useMemo(() => {
-    const realtimeByService = new Map<string, number[]>()
-    for (const item of snapshot.timeline.realtime) {
-      const ticks = realtimeByService.get(item.serviceName) ?? []
-      ticks.push(item.at)
-      realtimeByService.set(item.serviceName, ticks)
-    }
-    const queryLanes: RawTimelineLane[] = snapshot.queries
-      .filter(query => query.spans.length > 0)
-      .map(query => {
-        const scopes = model.scopesByQueryId.get(query.queryId)
-        return {
-          kind: 'query',
-          id: `query:${query.queryId}`,
-          label: `${query.serviceName}.${query.method}`,
-          context: timelineScopeLabel(scopes),
-          detail: timelineQueryDetail(query, scopes),
-          firstAt: Math.min(...query.spans.map(span => span.startAt)),
-          query,
-        }
-      })
-    const realtimeLanes: RawTimelineLane[] = [...realtimeByService].map(([serviceName, ticks]) => ({
-      kind: 'realtime',
-      id: `realtime:${serviceName}`,
-      label: `${serviceName} realtime`,
-      detail: `All retained realtime events emitted by ${serviceName}`,
-      firstAt: Math.min(...ticks),
-      ticks,
-    }))
-    return [...queryLanes, ...realtimeLanes]
-  }, [model.scopesByQueryId, snapshot.queries, snapshot.timeline.realtime])
-  const hasInFlight = rawLanes.some(
-    lane => lane.kind === 'query' && lane.query.spans.some(span => span.endAt === undefined),
-  )
+  const hasInFlight =
+    snapshot.queries.some(query => query.spans.some(span => span.endAt === undefined)) ||
+    snapshot.writes.some(write => write.status === 'in-flight')
   const nowPoint = useTimelineNow(hasInFlight)
   const wallClockOffset = Date.now() - now()
-  const layout = timelineLayout(rawLanes, snapshot.timeline.startedAt, nowPoint)
-  const lanes: TimelineLane[] = rawLanes.map(lane =>
-    lane.kind === 'query'
-      ? {
-          kind: lane.kind,
-          id: lane.id,
-          label: lane.label,
-          context: lane.context,
-          detail: lane.detail,
-          firstAt: lane.firstAt,
-          bars: lane.query.spans,
-        }
-      : lane,
+  const activities = useMemo(
+    () => buildTimelineActivities(snapshot, model, nowPoint),
+    [model, nowPoint, snapshot],
   )
-  const laneOrder = new Map(snapshot.timeline.laneOrder.map((id, index) => [id, index]))
-  lanes.sort((a, b) => {
-    const recordedOrder =
-      (laneOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER) -
-      (laneOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER)
-    if (recordedOrder !== 0) return recordedOrder
-    const first = a.firstAt - b.firstAt
-    if (first !== 0) return first
-    return a.id.localeCompare(b.id)
-  })
+  const extent = timelineExtent(activities, snapshot.timeline.startedAt, nowPoint)
+
   return (
-    <section style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <TimelineCanvas
-        lanes={lanes}
-        layout={layout}
+    <section style={{ height: '100%', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+      <TimelineActivityTable
+        activities={activities}
+        extent={extent}
         nowPoint={nowPoint}
         wallClockOffset={wallClockOffset}
+        filter={filter}
+        visibility={visibility}
         follow={follow}
         onFollowChange={onFollowChange}
+        evictedCount={snapshot.timeline.evictedCount ?? 0}
+        payloadsEvicted={snapshot.timeline.payloadsEvicted ?? 0}
+        {...(requestedActivityId ? { requestedActivityId } : {})}
+        {...(onRequestedActivityHandled ? { onRequestedActivityHandled } : {})}
+        {...(onQuerySelect ? { onQuerySelect } : {})}
+        {...(onCacheEntitySelect ? { onCacheEntitySelect } : {})}
+        {...(onTraceSelect ? { onTraceSelect } : {})}
       />
     </section>
   )
@@ -166,49 +115,3 @@ function useTimelineNow(running: boolean): number {
   }, [running])
   return value
 }
-
-function timelineLayout(
-  lanes: RawTimelineLane[],
-  startedAt: number,
-  nowPoint: number,
-): TimelineLayout | null {
-  const points: number[] = []
-  for (const lane of lanes) {
-    if (lane.kind === 'query') {
-      for (const span of lane.query.spans) {
-        points.push(span.startAt, span.endAt ?? nowPoint)
-      }
-    } else {
-      points.push(...lane.ticks)
-    }
-  }
-  if (points.length === 0) return null
-  const earliest = Math.min(...points)
-  const start = startedAt > 0 ? Math.min(startedAt, earliest) : earliest
-  const latest = Math.max(...points)
-  const duration = Math.max(END_GUTTER_MS, latest - start + END_GUTTER_MS)
-  const trackWidth = Math.ceil((duration / 1_000) * PIXELS_PER_SECOND)
-  return { start, trackWidth }
-}
-
-function timelineQueryDetail(
-  query: QueryRecord,
-  scopes: readonly EventQueryScope[] | undefined,
-): string {
-  const scope = scopes?.map(item => item.label).join(', ')
-  const queryDetail =
-    query.method === 'get'
-      ? query.resourceId === undefined
-        ? ''
-        : `#${query.resourceId}`
-      : query.query === undefined || Object.keys(query.query).length === 0
-        ? ''
-        : compactJson(query.query)
-  return [scope, queryDetail, `query id: ${query.queryId}`].filter(Boolean).join(' · ')
-}
-
-function timelineScopeLabel(scopes: readonly EventQueryScope[] | undefined): string {
-  if (!scopes || scopes.length === 0) return 'retained'
-  if (scopes.length === 1) return scopes[0]!.label
-  return `${scopes.length} scopes`
-}
diff --git a/lib/devtools/WritesTab.tsx b/lib/devtools/WritesTab.tsx
deleted file mode 100644
index cc5122db..00000000
--- a/lib/devtools/WritesTab.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import { useState, type MouseEvent as ReactMouseEvent } from 'react'
-import type { WriteRecord } from './collector.js'
-import { formatClock, formatMs, prettyJson } from './format.js'
-import {
-  Badge,
-  DetailSection,
-  DetailStat,
-  DetailsPane,
-  useDetailsPaneWidth,
-  useDevtoolsTheme,
-} from './ui.js'
-
-export function WritesTab({ writes, inFlight }: { writes: WriteRecord[]; inFlight: number }) {
-  const { colors, styles } = useDevtoolsTheme()
-  const [selectedWriteId, setSelectedWriteId] = useState<string | null>(null)
-  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
-  const actions = writes.filter(write => write.type === 'action')
-  const mutations = writes.filter(write => write.type === 'mutation')
-  const optimisticInFlight = mutations.filter(
-    write => write.optimistic && write.status === 'in-flight',
-  ).length
-  const selectedWrite = writes.find(write => write.id === selectedWriteId)
-
-  return (
-    <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
-      <div style={{ ...styles.scroll, flex: 1, minHeight: 0 }}>
-        <div
-          style={{
-            ...styles.writeRow,
-            position: 'sticky',
-            top: 0,
-            zIndex: 1,
-            background: colors.bg,
-            color: colors.muted,
-            fontWeight: 600,
-            borderBottom: `1px solid ${colors.border}`,
-          }}
-        >
-          <span>Status</span>
-          <span>
-            Operation
-            {inFlight > 0 ? (
-              <span style={{ color: colors.blue, marginLeft: 8 }}>{inFlight} in flight</span>
-            ) : null}
-            {optimisticInFlight > 0 ? (
-              <span
-                style={{ color: colors.amber, marginLeft: 8 }}
-                title='Already projected into the cache; may still be scheduled or saving'
-              >
-                {optimisticInFlight} projected
-              </span>
-            ) : null}
-          </span>
-          <span>Duration</span>
-          <span>Started</span>
-        </div>
-        {writes.length === 0 ? (
-          <div style={{ padding: 16, color: colors.muted }}>No writes recorded.</div>
-        ) : (
-          <>
-            <SectionTitle title='Actions' count={actions.length} />
-            {actions.map(write => (
-              <WriteRow
-                key={write.id}
-                write={write}
-                selected={write.id === selectedWriteId}
-                onSelect={() => setSelectedWriteId(write.id)}
-              />
-            ))}
-            <SectionTitle title='Mutations' count={mutations.length} />
-            {mutations.map(write => (
-              <WriteRow
-                key={write.id}
-                write={write}
-                selected={write.id === selectedWriteId}
-                onSelect={() => setSelectedWriteId(write.id)}
-              />
-            ))}
-          </>
-        )}
-      </div>
-      {selectedWrite ? (
-        <WriteDetails
-          write={selectedWrite}
-          width={detailsWidth}
-          onResizeStart={onDetailsResizeStart}
-          onClose={() => setSelectedWriteId(null)}
-        />
-      ) : null}
-    </section>
-  )
-}
-
-function SectionTitle({ title, count }: { title: string; count: number }) {
-  const { colors } = useDevtoolsTheme()
-  return (
-    <div
-      style={{
-        padding: '6px 10px',
-        background: colors.toolbar,
-        borderTop: `1px solid ${colors.border}`,
-        borderBottom: `1px solid ${colors.rowBorder}`,
-        color: colors.text,
-        fontWeight: 600,
-      }}
-    >
-      {title} <span style={{ color: colors.muted }}>{count}</span>
-    </div>
-  )
-}
-
-function WriteRow({
-  write,
-  selected,
-  onSelect,
-}: {
-  write: WriteRecord
-  selected: boolean
-  onSelect: () => void
-}) {
-  const { colors, styles } = useDevtoolsTheme()
-  const label =
-    write.type === 'action'
-      ? (write.name ?? '(anonymous)')
-      : `${write.serviceName ?? ''}.${write.method ?? ''}${write.itemId !== undefined ? ` #${write.itemId}` : ''}`
-  return (
-    <div
-      role='button'
-      tabIndex={0}
-      aria-pressed={selected}
-      title='Select write details'
-      onClick={onSelect}
-      onKeyDown={event => {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault()
-          onSelect()
-        }
-      }}
-      style={{
-        ...styles.writeRow,
-        color: write.rolledBack || write.status === 'error' ? colors.red : colors.text,
-        cursor: 'pointer',
-        background: selected ? colors.activeButtonBg : undefined,
-        boxShadow: selected ? `inset 3px 0 ${colors.blue}` : undefined,
-        outline: 'none',
-      }}
-    >
-      <Badge
-        tone={
-          write.status === 'error' || write.status === 'rollback'
-            ? 'red'
-            : write.status === 'in-flight'
-              ? 'blue'
-              : 'green'
-        }
-      >
-        {write.status}
-      </Badge>
-      <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
-        <span style={{ color: selected ? colors.blue : colors.faint, marginRight: 6 }}>›</span>
-        <strong style={{ fontWeight: 600 }}>{label}</strong>
-        {write.optimistic ? (
-          <span style={{ color: colors.amber }}> · optimistic projection</span>
-        ) : null}
-        {write.error ? <div style={{ color: colors.red }}>{write.error}</div> : null}
-      </span>
-      <span>{write.durationMs === undefined ? '-' : formatMs(write.durationMs)}</span>
-      <span
-        style={{ color: colors.faint }}
-        title={formatClock(write.startedWallAt, { milliseconds: true })}
-      >
-        {formatClock(write.startedWallAt)}
-      </span>
-    </div>
-  )
-}
-
-function WriteDetails({
-  write,
-  width,
-  onResizeStart,
-  onClose,
-}: {
-  write: WriteRecord
-  width: number
-  onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
-  onClose: () => void
-}) {
-  const { colors, styles } = useDevtoolsTheme()
-  const label =
-    write.type === 'action'
-      ? (write.name ?? '(anonymous action)')
-      : `${write.serviceName ?? ''}.${write.method ?? ''}${write.itemId !== undefined ? ` #${write.itemId}` : ''}`
-  const payload = writePayload(write)
-  return (
-    <DetailsPane
-      title={label}
-      subtitle={write.type === 'action' ? 'Action' : 'Mutation'}
-      width={width}
-      onResizeStart={onResizeStart}
-      onClose={onClose}
-    >
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-          gap: '8px 16px',
-          marginBottom: 14,
-        }}
-      >
-        <DetailStat label='Status' value={write.status} />
-        <DetailStat
-          label='Duration'
-          value={write.durationMs === undefined ? '-' : formatMs(write.durationMs)}
-        />
-        {write.type === 'mutation' ? (
-          <DetailStat
-            label='Cache mode'
-            value={write.optimistic ? 'projected immediately' : 'after confirmation'}
-          />
-        ) : null}
-      </div>
-      {write.error ? (
-        <DetailSection label='Error'>
-          <span style={{ color: colors.red }}>{write.error}</span>
-        </DetailSection>
-      ) : null}
-      <DetailSection label='Payload'>
-        <pre
-          style={{
-            ...styles.code,
-            whiteSpace: 'pre-wrap',
-            margin: 0,
-            color: payload === undefined ? colors.faint : colors.text,
-          }}
-        >
-          {payload === undefined ? 'No payload' : prettyJson(payload)}
-        </pre>
-      </DetailSection>
-      <DetailSection label='Arguments'>
-        <pre style={{ ...styles.code, whiteSpace: 'pre-wrap', margin: 0 }}>
-          {prettyJson(write.args ?? [])}
-        </pre>
-      </DetailSection>
-      <span style={{ color: colors.faint }} title={write.id}>
-        Write ID
-      </span>
-    </DetailsPane>
-  )
-}
-
-function writePayload(write: WriteRecord): unknown {
-  const args = write.args
-  if (!args || args.length === 0) return undefined
-  if (write.type === 'action') return args.length === 1 ? args[0] : args
-  if (write.method === 'create') return args[0]
-  if (write.method === 'update' || write.method === 'patch') return args[1]
-  if (write.method === 'remove') return undefined
-  return args.length === 1 ? args[0] : args
-}
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index f3adf00e..a6cdf0cd 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -2,16 +2,20 @@ import type {
   FigbirdEvent,
   FigbirdEvents,
   InspectedQuery,
+  InspectedCacheService,
   InspectedRelationalQuery,
-  MutationActivity,
 } from '../core/figbird.js'
 import { CappedBuffer } from '../core/cappedBuffer.js'
+import { errorDetails, errorFromDetails } from '../core/errors.js'
 import { now } from './format.js'
+import { PayloadRetention, type PayloadHandle } from './payloadRetention.js'
+import { TimelineTraceStore, type TimelineTraceSummary } from './timelineTraceStore.js'
+import { EVICTED_VALUE, retainedValue, type HistoricalValue } from './historicalValue.js'
 
 export interface FigbirdLikeForDevtools {
   events: FigbirdEvents
-  mutating?: MutationActivity
   inspect(): InspectedQuery[]
+  inspectCache?(): InspectedCacheService[]
   inspectRelational?(): InspectedRelationalQuery[]
   subscribeToStateChanges?(fn: (state: unknown) => void): () => void
 }
@@ -19,8 +23,12 @@ export interface FigbirdLikeForDevtools {
 interface CollectorOptions {
   eventLimit?: number
   heartbeatMs?: number
+  payloadLimit?: number
+  payloadNodeLimit?: number
   queryHistoryLimit?: number
+  snapshotValues?: boolean
   spanLimit?: number
+  timelineLimit?: number
   writeLimit?: number
 }
 
@@ -28,6 +36,16 @@ export interface QuerySpan {
   startAt: number
   endAt?: number
   ok?: boolean
+  fetchId?: number
+  reason?: string
+  causeKinds?: string[]
+  traceIds?: number[]
+  graph?: Extract<FigbirdEvent, { kind: 'fetch:start' }>['graph']
+  itemCount?: number
+  durationMs?: number
+  params?: HistoricalValue
+  result?: HistoricalValue
+  errorDetails?: HistoricalValue
 }
 
 export interface QueryRecord extends Omit<
@@ -47,7 +65,12 @@ export interface QueryRecord extends Omit<
   spans: QuerySpan[]
   realtimeSeen: number
   reconciles: number
-  lastError?: { message: string; at: number; generation: number }
+  lastError?: {
+    message: string
+    at: number
+    generation: number
+    details?: HistoricalValue
+  }
 }
 
 export interface DevtoolsEvent {
@@ -55,17 +78,46 @@ export interface DevtoolsEvent {
   at: number
   wallAt: number
   event: FigbirdEvent
+  payload?: HistoricalValue
 }
 
 export interface TimelineRealtimeEvent {
   at: number
   serviceName: string
+  traceId?: number
+  type?: Extract<FigbirdEvent, { kind: 'realtime' }>['type']
+  itemId?: string | number
+  payload?: HistoricalValue
+}
+
+type ConnectionFigbirdEvent = Extract<
+  FigbirdEvent,
+  {
+    kind:
+      | 'connection:connected'
+      | 'connection:disconnected'
+      | 'connection:reconnected'
+      | 'connection:error'
+      | 'connection:reconnect-failed'
+  }
+>
+
+export interface TimelineConnectionEvent {
+  at: number
+  event: ConnectionFigbirdEvent
 }
 
+export type { TimelineTraceSummary } from './timelineTraceStore.js'
+
 export interface DevtoolsTimeline {
   startedAt: number
+  /** Kept for protocol compatibility; the current table no longer needs lane state. */
   laneOrder: string[]
   realtime: TimelineRealtimeEvent[]
+  connection: TimelineConnectionEvent[]
+  traces: TimelineTraceSummary[]
+  evictedCount?: number
+  payloadsEvicted?: number
 }
 
 export interface WriteRecord {
@@ -83,26 +135,59 @@ export interface WriteRecord {
   optimistic?: boolean
   rolledBack?: boolean
   error?: string
-  args?: readonly unknown[]
+  errorDetails?: HistoricalValue
+  args?: HistoricalValue<readonly unknown[]>
+  traceId?: number
 }
 
 export interface DevtoolsSnapshot {
+  cache?: DevtoolsCacheService[]
   queries: QueryRecord[]
   relational: InspectedRelationalQuery[]
   events: DevtoolsEvent[]
   timeline: DevtoolsTimeline
   writes: WriteRecord[]
-  inFlightWrites: number
+}
+
+export interface DevtoolsCacheEntity {
+  id: string
+  value: unknown
+  queryIds: string[]
+  lastChange?: {
+    at: number
+    wallAt: number
+    source: 'realtime' | 'mutation' | 'fetch' | 'optimistic' | 'devtools'
+    traceId: number
+    type: 'created' | 'updated' | 'patched' | 'removed'
+  }
+}
+
+export interface DevtoolsCacheService {
+  serviceName: string
+  materialized?: { queryId: string; fetchedAt: number }
+  entities: DevtoolsCacheEntity[]
 }
 
 export interface Collector {
+  readonly eventLimit: number
   start(): void
   stop(): void
   subscribe(fn: () => void): () => void
   getSnapshot(): DevtoolsSnapshot
   clearEvents(): void
   clearTimeline(): void
-  clearWrites(): void
+  reset(): void
+}
+
+export interface RemoteCollectorFrame {
+  queries?: InspectedQuery[]
+  cache?: InspectedCacheService[]
+  relational?: InspectedRelationalQuery[]
+  events: FigbirdEvent[]
+}
+
+export interface RemoteCollector extends Collector {
+  ingest(frame: RemoteCollectorFrame): void
 }
 
 type CapturedQueryState = Omit<
@@ -111,6 +196,7 @@ type CapturedQueryState = Omit<
 >
 
 interface QueryMetrics {
+  activeSpans: Map<number, QuerySpan>
   errorCount: number
   fetchCount: number
   lastDurationMs?: number
@@ -135,12 +221,12 @@ interface InternalRelationalQuery {
 }
 
 const EMPTY_SNAPSHOT: DevtoolsSnapshot = {
+  cache: [],
   queries: [],
   relational: [],
   events: [],
-  timeline: { startedAt: 0, laneOrder: [], realtime: [] },
+  timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [], traces: [] },
   writes: [],
-  inFlightWrites: 0,
 }
 
 function errorMessage(error: unknown): string {
@@ -151,6 +237,78 @@ function errorMessage(error: unknown): string {
   return String(error)
 }
 
+function payloadForRetention(event: FigbirdEvent): unknown {
+  switch (event.kind) {
+    case 'fetch:start':
+      return event.params
+    case 'realtime':
+      return event.item
+    case 'cache:updated':
+      return { item: event.item, previousItem: event.previousItem }
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'action:start':
+      return event.args
+    case 'fetch:error':
+    case 'mutate:error':
+    case 'action:error':
+    case 'connection:error':
+      return errorDetails(event.error)
+    case 'connection:reconnect-failed':
+      return event.error ? errorDetails(event.error) : undefined
+    default:
+      return undefined
+  }
+}
+
+function eventWithoutPayload(event: FigbirdEvent): FigbirdEvent {
+  switch (event.kind) {
+    case 'fetch:start': {
+      const { params: _params, ...metadata } = event
+      void _params
+      return metadata
+    }
+    case 'realtime': {
+      const { item: _item, ...metadata } = event
+      void _item
+      return metadata
+    }
+    case 'cache:updated':
+      return { ...event, item: undefined, previousItem: null }
+    case 'mutate:start':
+    case 'action:start': {
+      const { args: _args, ...metadata } = event
+      void _args
+      return metadata
+    }
+    case 'mutate:update':
+      return { ...event, args: [] }
+    case 'fetch:error':
+    case 'mutate:error':
+    case 'action:error':
+    case 'connection:error':
+      return {
+        ...event,
+        error: errorFromDetails(undefined, {
+          name: event.error.name,
+          message: event.error.message,
+        }),
+      }
+    case 'connection:reconnect-failed':
+      return event.error
+        ? {
+            ...event,
+            error: errorFromDetails(undefined, {
+              name: event.error.name,
+              message: event.error.message,
+            }),
+          }
+        : event
+    default:
+      return event
+  }
+}
+
 function snapshotValue<T>(value: T): T {
   if (typeof structuredClone !== 'function') return value
   try {
@@ -172,6 +330,7 @@ function makeQueryRecord(
     lastObservedAt: observedAt,
     lastKnown: state,
     metrics: {
+      activeSpans: new Map(),
       fetchCount: row.fetchCount,
       errorCount: row.errorCount,
       ...(row.lastDurationMs !== undefined ? { lastDurationMs: row.lastDurationMs } : {}),
@@ -219,6 +378,7 @@ function makePlaceholderQueryRecord(
     lastKnown: state,
     lastObservedAt: observedAt,
     metrics: {
+      activeSpans: new Map(),
       fetchCount: 0,
       errorCount: 0,
       totalDurationMs: 0,
@@ -256,7 +416,9 @@ function toPublicQueryRecord(record: InternalQueryRecord): QueryRecord {
     errorCount: metrics.errorCount,
     ...(metrics.lastDurationMs !== undefined ? { lastDurationMs: metrics.lastDurationMs } : {}),
     totalDurationMs: metrics.totalDurationMs,
-    spans: metrics.spans.toArray(),
+    spans: [...metrics.spans.toArray(), ...metrics.activeSpans.values()]
+      .map(span => ({ ...span }))
+      .sort((a, b) => a.startAt - b.startAt),
     realtimeSeen: metrics.realtimeSeen,
     reconciles: metrics.reconciles,
     ...(metrics.lastError ? { lastError: metrics.lastError } : {}),
@@ -267,20 +429,45 @@ export function createCollector(
   figbird: FigbirdLikeForDevtools,
   options: CollectorOptions = {},
 ): Collector {
-  return new FigbirdCollector(figbird, {
-    eventLimit: options.eventLimit ?? 500,
-    heartbeatMs: options.heartbeatMs ?? 5_000,
+  return new FigbirdCollector(figbird, resolveCollectorOptions(options))
+}
+
+export function createRemoteCollector(options: CollectorOptions = {}): RemoteCollector {
+  return new FigbirdCollector(
+    null,
+    resolveCollectorOptions(options, {
+      heartbeatMs: 0,
+      snapshotValues: false,
+    }),
+  )
+}
+
+function resolveCollectorOptions(
+  options: CollectorOptions,
+  overrides: Partial<Pick<ResolvedCollectorOptions, 'heartbeatMs' | 'snapshotValues'>> = {},
+): ResolvedCollectorOptions {
+  return {
+    eventLimit: options.eventLimit ?? 5_000,
+    heartbeatMs: overrides.heartbeatMs ?? options.heartbeatMs ?? 5_000,
+    payloadLimit: options.payloadLimit ?? 200,
+    payloadNodeLimit: options.payloadNodeLimit ?? 20_000,
     queryHistoryLimit: options.queryHistoryLimit ?? 250,
+    snapshotValues: overrides.snapshotValues ?? options.snapshotValues ?? true,
     spanLimit: options.spanLimit ?? 50,
+    timelineLimit: options.timelineLimit ?? 2_000,
     writeLimit: options.writeLimit ?? 250,
-  })
+  }
 }
 
 interface ResolvedCollectorOptions {
   eventLimit: number
   heartbeatMs: number
+  payloadLimit: number
+  payloadNodeLimit: number
   queryHistoryLimit: number
+  snapshotValues: boolean
   spanLimit: number
+  timelineLimit: number
   writeLimit: number
 }
 
@@ -288,61 +475,97 @@ type FetchEvent = Extract<FigbirdEvent, { kind: 'fetch:start' | 'fetch:end' | 'f
 
 type FetchTerminalEvent = Extract<FetchEvent, { kind: 'fetch:end' | 'fetch:error' }>
 
+const MAX_ACTIVE_FETCH_MS = 10 * 60_000
+
+type TimelineEvictionCandidate =
+  | { at: number; kind: 'span'; record: InternalQueryRecord }
+  | { at: number; kind: 'realtime' }
+  | { at: number; kind: 'connection' }
+  | { at: number; kind: 'write'; id: string }
+
 class FigbirdCollector implements Collector {
-  #figbird: FigbirdLikeForDevtools
+  #figbird: FigbirdLikeForDevtools | null
+  #remoteQueries: InspectedQuery[] = []
+  #remoteCache: InspectedCacheService[] = []
+  #remoteRelational: InspectedRelationalQuery[] = []
   #heartbeatMs: number
   #queryHistoryLimit: number
+  #snapshotValues: boolean
   #spanLimit: number
+  #timelineLimit: number
   #writeLimit: number
   #started = false
   #dirty = true
+  #sourceStateDirty = true
   #notificationScheduled = false
   #eventUnsub: (() => void) | null = null
   #heartbeat: ReturnType<typeof setInterval> | null = null
   #stateUnsub: (() => void) | null = null
-  #mutationUnsub: (() => void) | null = null
   #listeners: Set<() => void> = new Set()
   #snapshot: DevtoolsSnapshot = EMPTY_SNAPSHOT
 
   #queries: Map<string, InternalQueryRecord> = new Map()
   #relational: Map<string, InternalRelationalQuery> = new Map()
+  #cache: DevtoolsCacheService[] = []
   #events: CappedBuffer<DevtoolsEvent>
   #timelineRealtime: CappedBuffer<TimelineRealtimeEvent>
+  #timelineConnection: CappedBuffer<TimelineConnectionEvent>
+  #timelineTraces = new TimelineTraceStore()
+  #wallClockOffset = now() - Date.now()
   #timelineStartedAt = now()
-  #timelineLaneOrder: string[] = []
-  #timelineLaneIds = new Set<string>()
+  #timelineEvictedCount = 0
+  #timelinePayloadsEvicted = 0
   #nextEventId = 1
   #realtimeByService: Map<string, number> = new Map()
   #writes: Map<string, WriteRecord> = new Map()
+  #cacheProvenance = new Map<string, NonNullable<DevtoolsCacheEntity['lastChange']>>()
+  #fetchTraces = new Map<number, { reason?: string; traceIds: number[]; startedAt: number }>()
+  #payloads: PayloadRetention
+  #eventPayloadHandles = new WeakMap<DevtoolsEvent, PayloadHandle>()
+  #realtimePayloadHandles = new WeakMap<TimelineRealtimeEvent, PayloadHandle>()
+  #spanPayloadHandles = new WeakMap<QuerySpan, PayloadHandle[]>()
+  #queryErrorPayloadHandles = new Map<string, PayloadHandle>()
+  #writePayloadHandles = new Map<string, PayloadHandle[]>()
+
+  readonly eventLimit: number
 
-  constructor(figbird: FigbirdLikeForDevtools, options: ResolvedCollectorOptions) {
+  constructor(figbird: FigbirdLikeForDevtools | null, options: ResolvedCollectorOptions) {
     this.#figbird = figbird
     this.#heartbeatMs = options.heartbeatMs
     this.#queryHistoryLimit = options.queryHistoryLimit
+    this.#snapshotValues = options.snapshotValues
     this.#spanLimit = options.spanLimit
+    this.#timelineLimit = options.timelineLimit
     this.#writeLimit = options.writeLimit
+    this.eventLimit = options.eventLimit
     this.#events = new CappedBuffer(options.eventLimit)
     this.#timelineRealtime = new CappedBuffer(options.eventLimit)
+    this.#timelineConnection = new CappedBuffer(options.eventLimit)
+    this.#payloads = new PayloadRetention(options.payloadLimit, options.payloadNodeLimit)
   }
 
   start(): void {
     if (this.#started) return
     this.#started = true
     this.#refreshQueries()
-    this.#eventUnsub = this.#figbird.events.subscribe(event => {
-      this.#recordEvent(event)
-      this.#scheduleNotify()
-    })
-    this.#stateUnsub =
-      this.#figbird.subscribeToStateChanges?.(() => {
+    this.#refreshRelational()
+    this.#refreshCache()
+    this.#sourceStateDirty = false
+    this.#eventUnsub =
+      this.#figbird?.events.subscribe(event => {
+        this.#recordEvent(event)
         this.#scheduleNotify()
       }) ?? null
-    this.#mutationUnsub =
-      this.#figbird.mutating?.subscribe(() => {
+    this.#stateUnsub =
+      this.#figbird?.subscribeToStateChanges?.(() => {
+        this.#sourceStateDirty = true
         this.#scheduleNotify()
       }) ?? null
     if (this.#heartbeatMs > 0) {
-      this.#heartbeat = setInterval(() => this.#scheduleNotify(), this.#heartbeatMs)
+      this.#heartbeat = setInterval(() => {
+        if (!this.#stateUnsub) this.#sourceStateDirty = true
+        this.#scheduleNotify()
+      }, this.#heartbeatMs)
     }
     this.#scheduleNotify()
   }
@@ -350,12 +573,10 @@ class FigbirdCollector implements Collector {
   stop(): void {
     this.#eventUnsub?.()
     this.#stateUnsub?.()
-    this.#mutationUnsub?.()
     if (this.#heartbeat) clearInterval(this.#heartbeat)
     this.#eventUnsub = null
     this.#heartbeat = null
     this.#stateUnsub = null
-    this.#mutationUnsub = null
     this.#started = false
   }
 
@@ -366,10 +587,25 @@ class FigbirdCollector implements Collector {
     }
   }
 
+  ingest(frame: RemoteCollectorFrame): void {
+    if (this.#figbird) throw new Error('Only remote collectors accept bridge frames')
+    if (frame.queries) this.#remoteQueries = frame.queries
+    if (frame.cache) this.#remoteCache = frame.cache
+    if (frame.relational) this.#remoteRelational = frame.relational
+    if (frame.queries || frame.cache || frame.relational) this.#sourceStateDirty = true
+    for (const event of frame.events) this.#recordEvent(event)
+    this.#scheduleNotify()
+  }
+
   getSnapshot(): DevtoolsSnapshot {
     if (!this.#dirty) return this.#snapshot
-    this.#refreshQueries()
-    this.#refreshRelational()
+    this.#trimTimeline()
+    if (this.#sourceStateDirty) {
+      this.#refreshQueries()
+      this.#refreshRelational()
+      this.#refreshCache()
+      this.#sourceStateDirty = false
+    }
     const queries = Array.from(this.#queries.values())
       .map(record => toPublicQueryRecord(record))
       .sort((a, b) => {
@@ -381,44 +617,86 @@ class FigbirdCollector implements Collector {
       })
     const writes = Array.from(this.#writes.values()).sort((a, b) => a.startedAt - b.startedAt)
     this.#snapshot = {
+      cache: this.#cache,
       queries,
       relational: [...this.#relational.values()].map(record => record.inspected),
-      events: this.#events.toArray(),
+      events: this.#events.toArray().map(item => ({ ...item })),
       timeline: {
         startedAt: this.#timelineStartedAt,
-        laneOrder: [...this.#timelineLaneOrder],
-        realtime: this.#timelineRealtime.toArray(),
+        laneOrder: [],
+        realtime: this.#timelineRealtime.toArray().map(item => ({ ...item })),
+        connection: this.#timelineConnection.toArray(),
+        traces: this.#timelineTraces.snapshot(),
+        evictedCount: this.#timelineEvictedCount,
+        payloadsEvicted: this.#timelinePayloadsEvicted,
       },
       writes,
-      inFlightWrites: this.#figbird.mutating?.getSnapshot().length ?? 0,
     }
     this.#dirty = false
     return this.#snapshot
   }
 
   clearEvents(): void {
+    for (const item of this.#events.toArray()) {
+      this.#payloads.release(this.#eventPayloadHandles.get(item))
+    }
     this.#events.clear()
     this.#scheduleNotify()
   }
 
   clearTimeline(): void {
+    for (const item of this.#timelineRealtime.toArray()) {
+      this.#payloads.release(this.#realtimePayloadHandles.get(item))
+    }
     this.#timelineRealtime.clear()
+    this.#timelineConnection.clear()
+    this.#timelineTraces.clear()
+    this.#clearSettledWrites()
     this.#timelineStartedAt = now()
-    this.#timelineLaneOrder = []
-    this.#timelineLaneIds.clear()
+    this.#timelineEvictedCount = 0
+    this.#timelinePayloadsEvicted = 0
+    for (const record of this.#queries.values()) {
+      for (const span of record.metrics.spans.toArray()) this.#releaseSpanPayloads(span)
+    }
     for (const record of this.#queries.values()) {
       record.metrics.spans.clear()
+      for (const span of record.metrics.activeSpans.values()) {
+        span.startAt = this.#timelineStartedAt
+      }
     }
     this.#scheduleNotify()
   }
 
-  clearWrites(): void {
-    for (const [id, write] of this.#writes) {
-      if (write.status !== 'in-flight') this.#writes.delete(id)
-    }
+  reset(): void {
+    this.#queries.clear()
+    this.#relational.clear()
+    this.#cache = []
+    this.#events.clear()
+    this.#timelineRealtime.clear()
+    this.#timelineConnection.clear()
+    this.#timelineTraces.clear()
+    this.#timelineStartedAt = now()
+    this.#timelineEvictedCount = 0
+    this.#timelinePayloadsEvicted = 0
+    this.#nextEventId = 1
+    this.#realtimeByService.clear()
+    this.#writes.clear()
+    this.#cacheProvenance.clear()
+    this.#fetchTraces.clear()
+    this.#remoteQueries = []
+    this.#remoteCache = []
+    this.#remoteRelational = []
+    this.#sourceStateDirty = true
+    this.#payloads.clear()
+    this.#queryErrorPayloadHandles.clear()
+    this.#writePayloadHandles.clear()
     this.#scheduleNotify()
   }
 
+  #captureValue<T>(value: T): T {
+    return this.#snapshotValues ? snapshotValue(value) : value
+  }
+
   #scheduleNotify(): void {
     this.#dirty = true
     if (this.#notificationScheduled) return
@@ -432,36 +710,101 @@ class FigbirdCollector implements Collector {
     queueMicrotask(flush)
   }
 
+  #clearSettledWrites(): void {
+    for (const [id, write] of this.#writes) {
+      if (write.status === 'in-flight') continue
+      this.#releaseWritePayloads(id)
+      this.#writes.delete(id)
+    }
+  }
+
   #recordEvent(event: FigbirdEvent): void {
-    const at = now()
-    this.#events.push({
+    const wallAt = event.timestamp ?? Date.now()
+    const at = wallAt + this.#wallClockOffset
+    const capturedEvent = this.#captureEvent(event)
+    const captured: DevtoolsEvent = {
       id: this.#nextEventId++,
       at,
-      wallAt: Date.now(),
-      event: this.#captureEvent(event),
-    })
+      wallAt,
+      event: capturedEvent,
+    }
+    const evictedEvent = this.#events.push(captured)
+    if (evictedEvent) {
+      this.#payloads.release(this.#eventPayloadHandles.get(evictedEvent))
+    }
 
-    switch (event.kind) {
+    switch (capturedEvent.kind) {
       case 'fetch:start':
-        this.#recordTimelineLane(`query:${event.queryId}`)
-        this.#recordFetchStart(event, at)
+        this.#recordFetchStart(capturedEvent, at)
+        this.#timelineTraces.recordFetch(capturedEvent.causes)
         break
       case 'fetch:end':
       case 'fetch:error':
-        this.#recordTimelineLane(`query:${event.queryId}`)
-        this.#finishFetch(event, at)
+        this.#finishFetch(capturedEvent, at)
         break
       case 'realtime':
-        this.#recordTimelineLane(`realtime:${event.serviceName}`)
-        this.#timelineRealtime.push({ at, serviceName: event.serviceName })
+        {
+          const timelineItem: TimelineRealtimeEvent = {
+            at,
+            serviceName: capturedEvent.serviceName,
+            type: capturedEvent.type,
+            ...(capturedEvent.itemId === undefined ? {} : { itemId: capturedEvent.itemId }),
+            ...(capturedEvent.traceId === undefined ? {} : { traceId: capturedEvent.traceId }),
+            ...(capturedEvent.item === undefined
+              ? {}
+              : { payload: retainedValue(capturedEvent.item) }),
+          }
+          this.#retainRealtimePayload(timelineItem)
+          const evictedRealtime = this.#timelineRealtime.push(timelineItem)
+          if (evictedRealtime) {
+            this.#payloads.release(this.#realtimePayloadHandles.get(evictedRealtime))
+            this.#timelineEvictedCount++
+          }
+        }
         this.#realtimeByService.set(
-          event.serviceName,
-          (this.#realtimeByService.get(event.serviceName) ?? 0) + 1,
+          capturedEvent.serviceName,
+          (this.#realtimeByService.get(capturedEvent.serviceName) ?? 0) + 1,
         )
         break
+      case 'connection:connected':
+      case 'connection:disconnected':
+      case 'connection:reconnected':
+      case 'connection:error':
+      case 'connection:reconnect-failed':
+        if (
+          this.#timelineConnection.push({
+            at,
+            event: this.#captureConnectionEvent(capturedEvent),
+          })
+        ) {
+          this.#timelineEvictedCount++
+        }
+        break
+      case 'cache:updated':
+        this.#sourceStateDirty = true
+        if (capturedEvent.traceId !== undefined) {
+          const traceId = capturedEvent.traceId
+          this.#timelineTraces.recordCacheUpdate(traceId, capturedEvent.queryEffects)
+          this.#cacheProvenance.set(
+            `${capturedEvent.serviceName}:${String(capturedEvent.itemId)}`,
+            {
+              at,
+              wallAt,
+              source: capturedEvent.source,
+              traceId: capturedEvent.traceId,
+              type: capturedEvent.type,
+            },
+          )
+        }
+        break
+      case 'reconnect:sweep':
+        if (capturedEvent.traceId !== undefined) {
+          this.#timelineTraces.recordSweep(capturedEvent.traceId, capturedEvent.queryCount)
+        }
+        break
       case 'reconcile:started':
         {
-          const record = this.#queries.get(event.queryId)
+          const record = this.#queries.get(capturedEvent.queryId)
           if (record) record.metrics.reconciles++
         }
         break
@@ -470,30 +813,51 @@ class FigbirdCollector implements Collector {
       case 'mutate:end':
       case 'mutate:error':
       case 'mutate:rollback':
-        this.#recordMutation(event, at)
+        this.#recordMutation(
+          event as Extract<
+            FigbirdEvent,
+            {
+              kind:
+                'mutate:start' | 'mutate:update' | 'mutate:end' | 'mutate:error' | 'mutate:rollback'
+            }
+          >,
+          at,
+        )
+        if (
+          (event.kind === 'mutate:start' || event.kind === 'mutate:update') &&
+          event.args !== undefined
+        ) {
+          this.#retainWriteArgs(`mutation:${event.mutationId}`)
+        }
         break
       case 'action:start':
       case 'action:end':
       case 'action:error':
-        this.#recordAction(event, at)
+        this.#recordAction(
+          event as Extract<FigbirdEvent, { kind: 'action:start' | 'action:end' | 'action:error' }>,
+          at,
+        )
+        if (event.kind === 'action:start' && event.args !== undefined) {
+          this.#retainWriteArgs(`action:${event.actionId}`)
+        }
         break
     }
-  }
-
-  #recordTimelineLane(id: string): void {
-    if (this.#timelineLaneIds.has(id)) return
-    this.#timelineLaneIds.add(id)
-    this.#timelineLaneOrder.push(id)
+    this.#retainEventPayload(captured)
+    this.#trimTimeline()
   }
 
   #refreshQueries(): void {
     const observedAt = now()
     const observedQueryIds = new Set<string>()
-    for (const row of this.#figbird.inspect()) {
+    for (const row of this.#inspectQueries()) {
       observedQueryIds.add(row.queryId)
       const serviceRealtime = this.#realtimeByService.get(row.serviceName) ?? 0
       const existing = this.#queries.get(row.queryId)
-      const capturedRow = { ...row, query: snapshotValue(row.query) }
+      const capturedRow = {
+        ...row,
+        query: this.#captureValue(row.query),
+        ...(row.data === undefined ? {} : { data: this.#captureValue(row.data) }),
+      }
       const capturedState = queryState(capturedRow)
       const record =
         existing ?? makeQueryRecord(capturedRow, serviceRealtime, observedAt, this.#spanLimit)
@@ -510,6 +874,11 @@ class FigbirdCollector implements Collector {
     for (const record of this.#queries.values()) {
       if (observedQueryIds.has(record.lastKnown.queryId)) continue
       record.current = null
+      if (record.lastKnown.data !== undefined) {
+        const { data: _data, ...metadata } = record.lastKnown
+        void _data
+        record.lastKnown = metadata
+      }
       record.serviceRealtimeBaseline =
         this.#realtimeByService.get(record.lastKnown.serviceName) ?? 0
     }
@@ -523,21 +892,32 @@ class FigbirdCollector implements Collector {
       .sort((a, b) => a.lastObservedAt - b.lastObservedAt)
     for (const record of removable) {
       if (this.#queries.size <= this.#queryHistoryLimit) break
-      this.#queries.delete(record.lastKnown.queryId)
+      for (const span of record.metrics.spans.toArray()) this.#releaseSpanPayloads(span)
+      for (const span of record.metrics.activeSpans.values()) this.#releaseSpanPayloads(span)
+      const queryId = record.lastKnown.queryId
+      this.#payloads.release(this.#queryErrorPayloadHandles.get(queryId))
+      this.#queryErrorPayloadHandles.delete(queryId)
+      this.#queries.delete(queryId)
     }
   }
 
   #refreshRelational(): void {
     const observedAt = now()
-    const current = this.#figbird.inspectRelational?.() ?? []
+    const current = this.#inspectRelational()
     const observedKeys = new Set<string>()
     for (const inspected of current) {
       observedKeys.add(inspected.key)
       this.#relational.set(inspected.key, {
-        inspected: snapshotValue(inspected),
+        inspected: this.#captureValue(inspected),
         lastObservedAt: observedAt,
       })
     }
+    for (const record of this.#relational.values()) {
+      if (observedKeys.has(record.inspected.key) || record.inspected.data === undefined) continue
+      const { data: _data, ...metadata } = record.inspected
+      void _data
+      record.inspected = metadata
+    }
     if (this.#relational.size <= this.#queryHistoryLimit) return
     const removable = [...this.#relational.values()]
       .filter(record => !observedKeys.has(record.inspected.key))
@@ -548,9 +928,58 @@ class FigbirdCollector implements Collector {
     }
   }
 
+  #refreshCache(): void {
+    const inspectedCache = this.#inspectCache()
+    const liveCacheKeys = new Set<string>()
+    this.#cache = inspectedCache.map(service => ({
+      ...service,
+      entities: service.entities.map(entity => {
+        const key = `${service.serviceName}:${entity.id}`
+        liveCacheKeys.add(key)
+        return {
+          ...entity,
+          value: this.#captureValue(entity.value),
+          ...(this.#cacheProvenance.has(key)
+            ? { lastChange: this.#cacheProvenance.get(key)! }
+            : {}),
+        }
+      }),
+    }))
+    for (const key of this.#cacheProvenance.keys()) {
+      if (!liveCacheKeys.has(key)) this.#cacheProvenance.delete(key)
+    }
+  }
+
   #recordFetchStart(event: Extract<FetchEvent, { kind: 'fetch:start' }>, at: number): void {
     const record = this.#ensureFetchRecord(event, at, true)
     if (record.current?.generation !== event.generation) return
+    if (event.fetchId !== undefined) {
+      const traceIds = event.causes?.map(cause => cause.traceId) ?? []
+      this.#fetchTraces.set(event.fetchId, {
+        ...(event.reason ? { reason: event.reason } : {}),
+        ...(event.causes && event.causes.length > 0
+          ? { causeKinds: event.causes.map(cause => cause.kind) }
+          : {}),
+        traceIds,
+        startedAt: at,
+      })
+      const span: QuerySpan = {
+        startAt: Math.max(at, this.#timelineStartedAt),
+        fetchId: event.fetchId,
+        ...(event.reason ? { reason: event.reason } : {}),
+        ...(traceIds.length > 0 ? { traceIds } : {}),
+        ...(event.graph && event.graph.length > 0 ? { graph: event.graph } : {}),
+        ...(event.params === undefined ? {} : { params: retainedValue(event.params) }),
+      }
+      if (event.params !== undefined) {
+        this.#retainSpanPayload(span, event.params, () => {
+          span.params = EVICTED_VALUE
+        })
+      }
+      const replaced = record.metrics.activeSpans.get(event.fetchId)
+      if (replaced) this.#releaseSpanPayloads(replaced)
+      record.metrics.activeSpans.set(event.fetchId, span)
+    }
     const current = {
       ...record.current,
       status: record.current.status === 'success' ? ('success' as const) : ('loading' as const),
@@ -612,18 +1041,72 @@ class FigbirdCollector implements Collector {
     metrics.fetchCount++
     metrics.totalDurationMs += event.durationMs
     metrics.lastDurationMs = event.durationMs
+    const capturedErrorDetails = ok ? undefined : this.#captureValue(errorDetails(event.error))
     if (!ok) {
       metrics.errorCount++
       metrics.lastError = {
         message: errorMessage(event.error),
         at,
         generation: event.generation,
+        ...(capturedErrorDetails === undefined
+          ? {}
+          : { details: retainedValue(capturedErrorDetails) }),
+      }
+      if (capturedErrorDetails !== undefined) {
+        this.#retainQueryError(event.queryId, metrics, capturedErrorDetails, at)
       }
     }
 
-    const observedStartAt = at - event.durationMs
+    const inspectedQuery = this.#inspectQueries().find(
+      query => query.queryId === event.queryId && query.generation === event.generation,
+    )
+    const historyEntry =
+      event.fetchId === undefined
+        ? undefined
+        : inspectedQuery?.fetchHistory?.find(entry => entry.fetchId === event.fetchId)
+    const observedStartAt = historyEntry
+      ? at + (historyEntry.startedAt - (event.timestamp ?? Date.now()))
+      : at - event.durationMs
     const startAt = Math.max(observedStartAt, this.#timelineStartedAt)
-    metrics.spans.push({ startAt, endAt: at, ok })
+    const endAt = Math.max(startAt, at)
+    const trace = event.fetchId === undefined ? undefined : this.#fetchTraces.get(event.fetchId)
+    const activeSpan =
+      event.fetchId === undefined ? undefined : metrics.activeSpans.get(event.fetchId)
+    if (event.fetchId !== undefined) metrics.activeSpans.delete(event.fetchId)
+    const span: QuerySpan = {
+      ...activeSpan,
+      startAt,
+      endAt,
+      ok,
+      durationMs: event.durationMs,
+      ...(event.kind === 'fetch:end' ? { itemCount: event.itemCount } : {}),
+      ...(event.fetchId === undefined ? {} : { fetchId: event.fetchId }),
+      ...(trace?.reason ? { reason: trace.reason } : {}),
+      ...(trace && trace.traceIds.length > 0 ? { traceIds: trace.traceIds } : {}),
+      ...(event.graph && event.graph.length > 0 ? { graph: event.graph } : {}),
+      ...(capturedErrorDetails === undefined
+        ? {}
+        : { errorDetails: retainedValue(capturedErrorDetails) }),
+    }
+    if (capturedErrorDetails !== undefined) {
+      this.#retainSpanPayload(span, capturedErrorDetails, () => {
+        span.errorDetails = EVICTED_VALUE
+      })
+    }
+    const inspectedResult = ok ? inspectedQuery?.data : undefined
+    if (inspectedResult !== undefined) {
+      const result = this.#captureValue(inspectedResult)
+      span.result = retainedValue(result)
+      this.#retainSpanPayload(span, result, () => {
+        span.result = EVICTED_VALUE
+      })
+    }
+    const evictedSpan = metrics.spans.push(span)
+    if (evictedSpan) {
+      this.#releaseSpanPayloads(evictedSpan)
+      this.#timelineEvictedCount++
+    }
+    if (event.fetchId !== undefined) this.#fetchTraces.delete(event.fetchId)
 
     const currentMatches = record.current?.generation === event.generation
     const retainedMatches =
@@ -635,6 +1118,7 @@ class FigbirdCollector implements Collector {
       status: ok ? 'success' : 'error',
       isFetching: false,
       ...(event.kind === 'fetch:end' ? { itemCount: event.itemCount } : {}),
+      ...(inspectedQuery?.fetchHistory ? { fetchHistory: inspectedQuery.fetchHistory } : {}),
     }
     record.lastKnown = settled
     if (currentMatches) record.current = settled
@@ -663,14 +1147,15 @@ class FigbirdCollector implements Collector {
         method: event.method,
         ...(event.id !== undefined ? { itemId: event.id } : {}),
         ...('optimistic' in event ? { optimistic: event.optimistic } : {}),
-        ...('args' in event ? { args: this.#captureArgs(event.args) } : {}),
+        ...('args' in event ? { args: retainedValue(this.#captureArgs(event.args)) } : {}),
+        ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
       } satisfies WriteRecord)
 
     if (event.kind === 'mutate:update') {
       this.#writes.set(id, {
         ...base,
         optimistic: event.optimistic,
-        args: this.#captureArgs(event.args),
+        args: retainedValue(this.#captureArgs(event.args)),
       })
       return
     }
@@ -685,14 +1170,17 @@ class FigbirdCollector implements Collector {
       return
     }
     if (event.kind === 'mutate:error') {
+      const details = this.#captureValue(errorDetails(event.error))
       this.#writes.set(id, {
         ...base,
         status: 'error',
         endedAt: at,
         durationMs: event.durationMs,
         error: errorMessage(event.error),
+        errorDetails: retainedValue(details),
         ...(base.optimistic || base.rolledBack ? { rolledBack: true } : {}),
       })
+      this.#retainWriteError(id, details)
       this.#trimWrites()
       return
     }
@@ -719,17 +1207,25 @@ class FigbirdCollector implements Collector {
         startedAt: at,
         startedWallAt: Date.now(),
         ...(event.name ? { name: event.name } : {}),
-        ...('args' in event ? { args: this.#captureArgs(event.args) } : {}),
+        ...('args' in event ? { args: retainedValue(this.#captureArgs(event.args)) } : {}),
       } satisfies WriteRecord)
 
     if (event.kind === 'action:end' || event.kind === 'action:error') {
+      const details =
+        event.kind === 'action:error' ? this.#captureValue(errorDetails(event.error)) : undefined
       this.#writes.set(id, {
         ...base,
         status: event.kind === 'action:end' ? 'success' : 'error',
         endedAt: at,
         durationMs: event.durationMs,
-        ...(event.kind === 'action:error' ? { error: errorMessage(event.error) } : {}),
+        ...(event.kind === 'action:error'
+          ? {
+              error: errorMessage(event.error),
+              errorDetails: retainedValue(details),
+            }
+          : {}),
       })
+      if (details !== undefined) this.#retainWriteError(id, details)
       this.#trimWrites()
       return
     }
@@ -737,7 +1233,7 @@ class FigbirdCollector implements Collector {
   }
 
   #captureArgs(args: readonly unknown[]): readonly unknown[] {
-    return snapshotValue(args)
+    return this.#captureValue(args)
   }
 
   #captureEvent(event: FigbirdEvent): FigbirdEvent {
@@ -745,16 +1241,33 @@ class FigbirdCollector implements Collector {
       case 'fetch:start':
         return {
           ...event,
-          ...(event.params === undefined ? {} : { params: snapshotValue(event.params) }),
+          ...(event.params === undefined ? {} : { params: this.#captureValue(event.params) }),
+        }
+      case 'realtime':
+        return { ...event, item: this.#captureValue(event.item) }
+      case 'cache:updated':
+        return {
+          ...event,
+          item: this.#captureValue(event.item),
+          previousItem: this.#captureValue(event.previousItem),
         }
       case 'fetch:error':
       case 'mutate:error':
       case 'action:error':
-        return { ...event, error: new Error(errorMessage(event.error)) }
+      case 'connection:error':
+        return {
+          ...event,
+          error: errorFromDetails(this.#captureValue(errorDetails(event.error)), {
+            name: event.error.name,
+            message: event.error.message,
+          }),
+        }
       case 'mutate:start':
         return {
           kind: event.kind,
+          ...(event.timestamp === undefined ? {} : { timestamp: event.timestamp }),
           mutationId: event.mutationId,
+          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
           serviceName: event.serviceName,
           method: event.method,
           optimistic: event.optimistic,
@@ -768,6 +1281,7 @@ class FigbirdCollector implements Collector {
       case 'action:start':
         return {
           kind: event.kind,
+          ...(event.timestamp === undefined ? {} : { timestamp: event.timestamp }),
           actionId: event.actionId,
           ...(event.name ? { name: event.name } : {}),
         }
@@ -776,6 +1290,194 @@ class FigbirdCollector implements Collector {
     }
   }
 
+  #captureConnectionEvent(event: ConnectionFigbirdEvent): ConnectionFigbirdEvent {
+    if (event.kind === 'connection:error' || event.kind === 'connection:reconnect-failed') {
+      if (!event.error) return { ...event }
+      return {
+        ...event,
+        error: errorFromDetails(this.#captureValue(errorDetails(event.error)), {
+          name: event.error.name,
+          message: event.error.message,
+        }),
+      }
+    }
+    return { ...event }
+  }
+
+  #retainEventPayload(item: DevtoolsEvent): void {
+    const payload = payloadForRetention(item.event)
+    if (payload === undefined) return
+    item.payload = retainedValue(payload)
+    const handle = this.#payloads.retain(payload, () => {
+      item.event = eventWithoutPayload(item.event)
+      item.payload = EVICTED_VALUE
+      this.#scheduleNotify()
+    })
+    this.#eventPayloadHandles.set(item, handle)
+  }
+
+  #retainRealtimePayload(item: TimelineRealtimeEvent): void {
+    const payload = item.payload?.state === 'retained' ? item.payload.value : undefined
+    if (payload === undefined) return
+    const handle = this.#payloads.retain(payload, () => {
+      item.payload = EVICTED_VALUE
+      this.#timelinePayloadsEvicted++
+      this.#scheduleNotify()
+    })
+    this.#realtimePayloadHandles.set(item, handle)
+  }
+
+  #retainSpanPayload(span: QuerySpan, value: unknown, evict: () => void): void {
+    const handle = this.#payloads.retain(value, () => {
+      evict()
+      this.#timelinePayloadsEvicted++
+      this.#scheduleNotify()
+    })
+    const handles = this.#spanPayloadHandles.get(span) ?? []
+    handles.push(handle)
+    this.#spanPayloadHandles.set(span, handles)
+  }
+
+  #releaseSpanPayloads(span: QuerySpan): void {
+    for (const handle of this.#spanPayloadHandles.get(span) ?? []) {
+      this.#payloads.release(handle)
+    }
+    this.#spanPayloadHandles.delete(span)
+  }
+
+  #retainQueryError(queryId: string, metrics: QueryMetrics, details: unknown, at: number): void {
+    this.#payloads.release(this.#queryErrorPayloadHandles.get(queryId))
+    const handle = this.#payloads.retain(details, () => {
+      if (metrics.lastError?.at !== at) return
+      metrics.lastError = { ...metrics.lastError, details: EVICTED_VALUE }
+      this.#scheduleNotify()
+    })
+    this.#queryErrorPayloadHandles.set(queryId, handle)
+  }
+
+  #retainWriteArgs(id: string): void {
+    const write = this.#writes.get(id)
+    if (write?.args?.state !== 'retained') return
+    this.#releaseWritePayloads(id)
+    const handle = this.#payloads.retain(write.args.value, () => {
+      const current = this.#writes.get(id)
+      if (!current) return
+      this.#writes.set(id, { ...current, args: EVICTED_VALUE })
+      this.#timelinePayloadsEvicted++
+      this.#scheduleNotify()
+    })
+    this.#writePayloadHandles.set(id, [handle])
+  }
+
+  #retainWriteError(id: string, details: unknown): void {
+    const handle = this.#payloads.retain(details, () => {
+      const current = this.#writes.get(id)
+      if (!current) return
+      this.#writes.set(id, { ...current, errorDetails: EVICTED_VALUE })
+      this.#timelinePayloadsEvicted++
+      this.#scheduleNotify()
+    })
+    const handles = this.#writePayloadHandles.get(id) ?? []
+    handles.push(handle)
+    this.#writePayloadHandles.set(id, handles)
+  }
+
+  #releaseWritePayloads(id: string): void {
+    for (const handle of this.#writePayloadHandles.get(id) ?? []) {
+      this.#payloads.release(handle)
+    }
+    this.#writePayloadHandles.delete(id)
+  }
+
+  #trimTimeline(): void {
+    const candidates = (): TimelineEvictionCandidate[] => {
+      const result: TimelineEvictionCandidate[] = []
+      for (const record of this.#queries.values()) {
+        const span = record.metrics.spans.first()
+        if (span) result.push({ at: span.startAt, kind: 'span', record })
+      }
+      const realtime = this.#timelineRealtime.first()
+      if (realtime) result.push({ at: realtime.at, kind: 'realtime' })
+      const connection = this.#timelineConnection.first()
+      if (connection) result.push({ at: connection.at, kind: 'connection' })
+      for (const write of this.#writes.values()) {
+        if (write.status !== 'in-flight' && write.startedAt >= this.#timelineStartedAt) {
+          result.push({ at: write.startedAt, kind: 'write', id: write.id })
+        }
+      }
+      return result
+    }
+
+    let retained =
+      [...this.#queries.values()].reduce(
+        (total, record) => total + record.metrics.spans.length,
+        0,
+      ) +
+      this.#timelineRealtime.length +
+      this.#timelineConnection.length +
+      [...this.#writes.values()].filter(
+        write => write.status !== 'in-flight' && write.startedAt >= this.#timelineStartedAt,
+      ).length
+
+    while (retained > this.#timelineLimit) {
+      const oldest = candidates().sort((a, b) => a.at - b.at)[0]
+      if (!oldest) break
+      if (oldest.kind === 'span') {
+        const span = oldest.record.metrics.spans.shift()
+        if (span) this.#releaseSpanPayloads(span)
+      } else if (oldest.kind === 'realtime') {
+        const item = this.#timelineRealtime.shift()
+        if (item) this.#payloads.release(this.#realtimePayloadHandles.get(item))
+      } else if (oldest.kind === 'connection') {
+        this.#timelineConnection.shift()
+      } else {
+        this.#releaseWritePayloads(oldest.id)
+        this.#writes.delete(oldest.id)
+      }
+      retained--
+      this.#timelineEvictedCount++
+    }
+
+    const cutoff = now() - MAX_ACTIVE_FETCH_MS
+    for (const record of this.#queries.values()) {
+      for (const [fetchId, span] of record.metrics.activeSpans) {
+        if (span.startAt >= cutoff) continue
+        this.#releaseSpanPayloads(span)
+        record.metrics.activeSpans.delete(fetchId)
+        this.#fetchTraces.delete(fetchId)
+        this.#timelineEvictedCount++
+      }
+    }
+    for (const [fetchId, trace] of this.#fetchTraces) {
+      if (trace.startedAt < cutoff) this.#fetchTraces.delete(fetchId)
+    }
+    this.#trimTimelineTraces()
+  }
+
+  #trimTimelineTraces(): void {
+    const retained = new Set<number>()
+    for (const record of this.#queries.values()) {
+      for (const span of record.metrics.spans.toArray()) {
+        for (const traceId of span.traceIds ?? []) retained.add(traceId)
+      }
+      for (const span of record.metrics.activeSpans.values()) {
+        for (const traceId of span.traceIds ?? []) retained.add(traceId)
+      }
+    }
+    for (const item of this.#timelineRealtime.toArray()) {
+      if (item.traceId !== undefined) retained.add(item.traceId)
+    }
+    for (const item of this.#timelineConnection.toArray()) {
+      if (item.event.traceId !== undefined) retained.add(item.event.traceId)
+    }
+    for (const write of this.#writes.values()) {
+      if (write.traceId !== undefined && write.startedAt >= this.#timelineStartedAt) {
+        retained.add(write.traceId)
+      }
+    }
+    this.#timelineTraces.retainOnly(retained)
+  }
+
   #trimWrites(): void {
     if (this.#writes.size <= this.#writeLimit) return
     const settled = [...this.#writes.values()]
@@ -783,7 +1485,21 @@ class FigbirdCollector implements Collector {
       .sort((a, b) => a.startedAt - b.startedAt)
     for (const write of settled) {
       if (this.#writes.size <= this.#writeLimit) break
+      this.#releaseWritePayloads(write.id)
       this.#writes.delete(write.id)
+      this.#timelineEvictedCount++
     }
   }
+
+  #inspectQueries(): InspectedQuery[] {
+    return this.#figbird ? this.#figbird.inspect() : this.#remoteQueries
+  }
+
+  #inspectCache(): InspectedCacheService[] {
+    return this.#figbird ? (this.#figbird.inspectCache?.() ?? []) : this.#remoteCache
+  }
+
+  #inspectRelational(): InspectedRelationalQuery[] {
+    return this.#figbird ? (this.#figbird.inspectRelational?.() ?? []) : this.#remoteRelational
+  }
 }
diff --git a/lib/devtools/eventModel.ts b/lib/devtools/eventModel.ts
new file mode 100644
index 00000000..c97cc514
--- /dev/null
+++ b/lib/devtools/eventModel.ts
@@ -0,0 +1,693 @@
+import type { DevtoolsEvent } from './collector.js'
+import { errorDetails } from '../core/errors.js'
+import { compactJson, formatClock, formatMs } from './format.js'
+import type { EventQueryScope } from './model.js'
+
+export interface TraceIndex {
+  byFetchId: ReadonlyMap<number, readonly number[]>
+}
+
+export interface EventListRow {
+  key: string
+  representative: DevtoolsEvent
+  kind: string
+  subject: string
+  operation: string
+  status: string
+  tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral'
+  details: string
+  queryId?: string
+  traceId?: number
+}
+
+export interface ActivityRow extends EventListRow {
+  events: DevtoolsEvent[]
+  searchText: string
+}
+
+export function eventPayload(event: DevtoolsEvent['event']): unknown {
+  switch (event.kind) {
+    case 'realtime':
+      return event.item
+    case 'cache:updated':
+      return { before: event.previousItem, after: event.item, queries: event.queryEffects }
+    case 'fetch:start':
+      return event.params
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'action:start':
+      return event.args
+    case 'fetch:error':
+    case 'mutate:error':
+    case 'action:error':
+    case 'connection:error':
+      return errorDetails(event.error)
+    case 'connection:connected':
+    case 'connection:disconnected':
+    case 'connection:reconnected':
+    case 'connection:reconnect-failed':
+    case 'reconnect:sweep':
+    case 'reconcile:decision':
+    case 'reconcile:started':
+      return displayEvent(event)
+    default:
+      return undefined
+  }
+}
+
+export function eventPayloadLabel(event: DevtoolsEvent['event']): string {
+  switch (event.kind) {
+    case 'fetch:start':
+      return 'Parameters'
+    case 'fetch:end':
+      return 'Fetch result'
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'action:start':
+      return 'Arguments'
+    case 'mutate:end':
+    case 'mutate:rollback':
+      return 'Mutation result'
+    case 'action:end':
+      return 'Action result'
+    case 'realtime':
+      return 'Realtime payload'
+    case 'fetch:error':
+    case 'mutate:error':
+    case 'action:error':
+    case 'connection:error':
+    case 'connection:reconnect-failed':
+      return 'Error'
+    case 'connection:connected':
+    case 'connection:disconnected':
+    case 'connection:reconnected':
+    case 'reconnect:sweep':
+      return 'Connection event'
+    case 'cache:updated':
+      return 'Cache change'
+    case 'reconcile:decision':
+    case 'reconcile:started':
+      return 'Reconciliation event'
+    default:
+      return 'Instrumentation data'
+  }
+}
+
+export function displayEvent(event: DevtoolsEvent['event']): unknown {
+  if ('error' in event && event.error) {
+    return { ...event, error: errorDetails(event.error) }
+  }
+  return event
+}
+
+export function rawEventRow(item: DevtoolsEvent, index: TraceIndex): EventListRow {
+  const queryId = eventQueryId(item.event)
+  const traceId = traceIdsForEvent(item.event, index)[0]
+  return {
+    key: `event:${item.id}`,
+    representative: item,
+    kind: item.event.kind,
+    subject: eventSubject(item.event),
+    operation: eventOperation(item.event),
+    ...eventStatus(item.event),
+    details: eventDetails(item),
+    ...(queryId === undefined ? {} : { queryId }),
+    ...(traceId === undefined ? {} : { traceId }),
+  }
+}
+
+export function buildActivities(
+  events: readonly DevtoolsEvent[],
+  index: TraceIndex,
+  scopes?: ReadonlyMap<string, readonly EventQueryScope[]>,
+  includePayloadSearch = true,
+): ActivityRow[] {
+  const grouped = new Map<string, { traceId?: number; events: DevtoolsEvent[] }>()
+  for (const item of events) {
+    const traceIds = traceIdsForEvent(item.event, index)
+    const add = (key: string, traceId?: number) => {
+      const group = grouped.get(key) ?? {
+        ...(traceId === undefined ? {} : { traceId }),
+        events: [],
+      }
+      group.events.push(item)
+      grouped.set(key, group)
+    }
+    if (traceIds.length > 0) {
+      for (const traceId of traceIds) add(`trace:${traceId}`, traceId)
+    } else {
+      add(activityGroupKey(item))
+    }
+  }
+
+  return [...grouped.entries()]
+    .map(([key, group]) => {
+      const representative = activityRepresentative(group.events)
+      const kind = activityKind(key, representative)
+      const details = activityDetails(key, representative, group.events)
+      const identity = activityIdentity(key, representative.event)
+      const lifecycle = activityStatus(key, group.events)
+      // Connection traces can fan out into many unrelated query fetches. Associating
+      // the whole lifecycle with the first query makes that arbitrary query look like
+      // the owner of the reconnect, so connection groups intentionally have no scope.
+      const queryId =
+        kind === 'connection'
+          ? undefined
+          : group.events.map(item => eventQueryId(item.event)).find(Boolean)
+      return {
+        key,
+        representative,
+        events: group.events,
+        kind,
+        ...identity,
+        ...lifecycle,
+        details,
+        searchText: [
+          kind,
+          identity.subject,
+          identity.operation,
+          lifecycle.status,
+          details,
+          ...group.events.map(item =>
+            eventSearchText(
+              item,
+              scopes?.get(eventQueryId(item.event) ?? ''),
+              includePayloadSearch,
+            ),
+          ),
+        ]
+          .join(' ')
+          .toLowerCase(),
+        ...(queryId === undefined ? {} : { queryId }),
+        ...(group.traceId === undefined ? {} : { traceId: group.traceId }),
+      }
+    })
+    .sort((a, b) => b.representative.wallAt - a.representative.wallAt)
+}
+
+function activityGroupKey(item: DevtoolsEvent): string {
+  const event = item.event
+  if (isMutationEvent(event)) return `mutation:${event.mutationId}`
+  switch (event.kind) {
+    case 'action:start':
+    case 'action:end':
+    case 'action:error':
+      return `action:${event.actionId}`
+    default:
+      return `event:${item.id}`
+  }
+}
+
+function activityRepresentative(events: readonly DevtoolsEvent[]): DevtoolsEvent {
+  const start = events.find(
+    item => item.event.kind === 'mutate:start' || item.event.kind === 'action:start',
+  )
+  if (start) return start
+
+  const connection = events.find(item => item.event.kind.startsWith('connection:'))
+  if (connection) return connection
+
+  const mutationCache = events.find(
+    item =>
+      item.event.kind === 'cache:updated' &&
+      (item.event.source === 'mutation' || item.event.source === 'optimistic'),
+  )
+  if (mutationCache) return mutationCache
+
+  return (
+    events.find(item => item.event.kind === 'realtime') ??
+    events.find(item => item.event.kind === 'cache:updated' && item.event.source === 'devtools') ??
+    events.find(item => item.event.kind === 'fetch:start') ??
+    events.find(item => item.event.kind === 'cache:updated') ??
+    events[0]!
+  )
+}
+
+function activityKind(key: string, representative: DevtoolsEvent): string {
+  if (isMutationEvent(representative.event) || key.startsWith('mutation:')) return 'mutation'
+  if (key.startsWith('action:') || representative.event.kind === 'action:start') return 'action'
+  const event = representative.event
+  if (event.kind.startsWith('connection:')) return 'connection'
+  if (event.kind.startsWith('fetch:')) return 'fetch'
+  if (event.kind.startsWith('reconcile:')) return 'reconcile'
+  if (event.kind === 'cache:updated') {
+    if (event.source === 'devtools') return 'cache edit'
+    if (event.source === 'optimistic') return 'optimistic'
+    if (event.source === 'mutation') return 'mutation cache'
+    return 'cache'
+  }
+  return event.kind
+}
+
+function activityDetails(
+  key: string,
+  representative: DevtoolsEvent,
+  events: readonly DevtoolsEvent[],
+): string {
+  if (isMutationEvent(representative.event) || key.startsWith('mutation:')) {
+    return mutationActivityDetails(representative, events)
+  }
+  if (key.startsWith('action:') || representative.event.kind === 'action:start') {
+    return actionActivityDetails(representative, events)
+  }
+
+  const event = representative.event
+  if (event.kind.startsWith('connection:')) {
+    const sweep = events.find(item => item.event.kind === 'reconnect:sweep')?.event
+    const fetches = events.filter(
+      item => item.event.kind === 'fetch:end' || item.event.kind === 'fetch:error',
+    ).length
+    return joinEventParts([
+      eventDetails(representative),
+      sweep?.kind === 'reconnect:sweep' && sweep.queryCount !== undefined
+        ? pluralActivity(sweep.queryCount, 'query swept', 'queries swept')
+        : '',
+      fetches > 0 ? pluralActivity(fetches, 'fetch', 'fetches') : '',
+    ])
+  }
+
+  if (event.kind === 'realtime') {
+    const effects = activityQueryEffects(events)
+    const fetches = events.filter(item => item.event.kind === 'fetch:start').length
+    return joinEventParts([
+      `${event.serviceName} ${event.type}${event.itemId === undefined ? '' : ` #${event.itemId}`}`,
+      effects.merged > 0 ? pluralActivity(effects.merged, 'query updated', 'queries updated') : '',
+      effects.reconcile > 0
+        ? pluralActivity(effects.reconcile, 'refetch scheduled', 'refetches scheduled')
+        : '',
+      fetches > 0 ? pluralActivity(fetches, 'fetch', 'fetches') : '',
+    ])
+  }
+
+  if (event.kind === 'cache:updated') {
+    const effects = activityQueryEffects(events)
+    return joinEventParts([
+      `${event.serviceName} #${event.itemId}`,
+      event.source === 'devtools'
+        ? 'edited in memory'
+        : event.source === 'optimistic'
+          ? 'optimistic cache update'
+          : event.source === 'mutation'
+            ? 'mutation applied to cache'
+            : `${event.source} cache update`,
+      effects.merged > 0 ? pluralActivity(effects.merged, 'query updated', 'queries updated') : '',
+      effects.reconcile > 0
+        ? pluralActivity(effects.reconcile, 'refetch scheduled', 'refetches scheduled')
+        : '',
+    ])
+  }
+
+  if (event.kind === 'fetch:start') {
+    const terminal = [...events]
+      .reverse()
+      .find(item => item.event.kind === 'fetch:end' || item.event.kind === 'fetch:error')
+    const attempts = events.filter(item => item.event.kind === 'fetch:start').length
+    return joinEventParts([
+      `${event.serviceName}.${event.method}`,
+      event.reason ?? '',
+      terminal?.event.kind === 'fetch:end'
+        ? pluralActivity(terminal.event.itemCount, 'row', 'rows')
+        : terminal?.event.kind === 'fetch:error'
+          ? errorMessage(terminal.event.error)
+          : '',
+      terminal?.event.kind === 'fetch:end' || terminal?.event.kind === 'fetch:error'
+        ? formatMs(terminal.event.durationMs)
+        : '',
+      attempts > 1 ? pluralActivity(attempts - 1, 'retry', 'retries') : '',
+    ])
+  }
+
+  return eventDetails(representative)
+}
+
+function activityQueryEffects(events: readonly DevtoolsEvent[]): {
+  merged: number
+  reconcile: number
+} {
+  const outcomes = new Map<string, 'merged' | 'reconcile'>()
+  for (const item of events) {
+    if (item.event.kind !== 'cache:updated') continue
+    for (const effect of item.event.queryEffects) outcomes.set(effect.queryId, effect.outcome)
+  }
+  return {
+    merged: [...outcomes.values()].filter(outcome => outcome === 'merged').length,
+    reconcile: [...outcomes.values()].filter(outcome => outcome === 'reconcile').length,
+  }
+}
+
+function mutationActivityDetails(
+  representative: DevtoolsEvent,
+  events: readonly DevtoolsEvent[],
+): string {
+  if (representative.event.kind !== 'mutate:start') return eventDetails(representative)
+  const start = representative.event
+  const terminal = [...events]
+    .reverse()
+    .find(
+      item =>
+        item.event.kind === 'mutate:end' ||
+        item.event.kind === 'mutate:error' ||
+        item.event.kind === 'mutate:rollback',
+    )
+  return joinEventParts([
+    `${start.serviceName}.${start.method}${start.id === undefined ? '' : ` #${start.id}`}`,
+    start.optimistic ? 'optimistic' : 'confirmed',
+    terminal?.event.kind === 'mutate:error'
+      ? errorMessage(terminal.event.error)
+      : terminal?.event.kind === 'mutate:rollback'
+        ? 'rolled back'
+        : terminal?.event.kind === 'mutate:end'
+          ? 'success'
+          : 'pending',
+    terminal?.event.kind === 'mutate:end' || terminal?.event.kind === 'mutate:error'
+      ? formatMs(terminal.event.durationMs)
+      : '',
+  ])
+}
+
+function actionActivityDetails(
+  representative: DevtoolsEvent,
+  events: readonly DevtoolsEvent[],
+): string {
+  if (representative.event.kind !== 'action:start') return eventDetails(representative)
+  const start = representative.event
+  const terminal = [...events]
+    .reverse()
+    .find(item => item.event.kind === 'action:end' || item.event.kind === 'action:error')
+  return joinEventParts([
+    start.name ?? '(anonymous action)',
+    terminal?.event.kind === 'action:error'
+      ? errorMessage(terminal.event.error)
+      : terminal?.event.kind === 'action:end'
+        ? 'success'
+        : 'pending',
+    terminal?.event.kind === 'action:end' || terminal?.event.kind === 'action:error'
+      ? formatMs(terminal.event.durationMs)
+      : '',
+  ])
+}
+
+function isMutationEvent(
+  event: DevtoolsEvent['event'],
+): event is Extract<DevtoolsEvent['event'], { mutationId: number }> {
+  return 'mutationId' in event
+}
+
+function pluralActivity(count: number, singular: string, plural: string): string {
+  return `${count} ${count === 1 ? singular : plural}`
+}
+
+export function buildTraceIndex(events: readonly DevtoolsEvent[]): TraceIndex {
+  const byFetchId = new Map<number, readonly number[]>()
+  for (const item of events) {
+    const event = item.event
+    if (event.kind !== 'fetch:start' || event.fetchId === undefined) continue
+    const traceIds = traceIdsFromCauses(event.causes)
+    if (traceIds.length > 0) byFetchId.set(event.fetchId, traceIds)
+  }
+  return { byFetchId }
+}
+
+export function traceIdsForEvent(event: DevtoolsEvent['event'], index: TraceIndex): number[] {
+  const direct = 'traceId' in event && event.traceId !== undefined ? [event.traceId] : []
+  const caused = 'causes' in event ? traceIdsFromCauses(event.causes) : []
+  const fetch =
+    'fetchId' in event && event.fetchId !== undefined
+      ? (index.byFetchId.get(event.fetchId) ?? [])
+      : []
+  return [...new Set([...direct, ...caused, ...fetch])]
+}
+
+function traceIdsFromCauses(
+  causes: readonly { kind: string; traceId?: number }[] | undefined,
+): number[] {
+  return causes?.flatMap(cause => (cause.traceId === undefined ? [] : [cause.traceId])) ?? []
+}
+
+export function eventSearchText(
+  item: DevtoolsEvent,
+  scopes?: readonly EventQueryScope[],
+  includePayload = true,
+): string {
+  const status = eventStatus(item.event).status
+  return [
+    formatClock(item.wallAt, { milliseconds: true }),
+    item.event.kind,
+    eventSubject(item.event),
+    eventOperation(item.event),
+    status,
+    eventQueryId(item.event) ?? '',
+    ...(scopes?.map(scope => scope.label) ?? []),
+    eventDetails(item),
+    includePayload ? compactJson(displayEvent(item.event)) : '',
+  ].join(' ')
+}
+
+export function eventQueryId(event: DevtoolsEvent['event']): string | undefined {
+  switch (event.kind) {
+    case 'fetch:start':
+    case 'fetch:end':
+    case 'fetch:error':
+    case 'reconcile:started':
+    case 'reconcile:decision':
+      return event.queryId
+    case 'cache:updated':
+      return event.queryEffects[0]?.queryId
+    default:
+      return undefined
+  }
+}
+
+export function eventDetails(item: DevtoolsEvent): string {
+  const event = item.event
+  switch (event.kind) {
+    case 'fetch:start':
+      return joinEventParts([
+        `${event.serviceName}.${event.method}`,
+        event.resourceId === undefined ? '' : `#${event.resourceId}`,
+        event.params === undefined ? '' : `params ${compactJson(event.params)}`,
+      ])
+    case 'fetch:end':
+      return joinEventParts([
+        `${event.serviceName}.${event.method}`,
+        `${event.itemCount} ${event.itemCount === 1 ? 'row' : 'rows'}`,
+        formatMs(event.durationMs),
+      ])
+    case 'fetch:error':
+      return joinEventParts([
+        `${event.serviceName}.${event.method}`,
+        formatMs(event.durationMs),
+        errorMessage(event.error),
+      ])
+    case 'reconcile:started':
+      return joinEventParts([event.serviceName, 'reconciliation started'])
+    case 'reconcile:decision':
+      return joinEventParts([event.serviceName, event.decision])
+    case 'reconnect:sweep':
+      return joinEventParts([
+        `sweep ${event.phase}`,
+        event.queryCount === undefined ? '' : `${event.queryCount} queries`,
+        event.delayMs > 0 ? `${formatMs(event.delayMs)} jitter` : '',
+      ])
+    case 'realtime':
+      return joinEventParts([
+        event.serviceName,
+        event.type,
+        event.itemId === undefined ? '' : `#${event.itemId}`,
+      ])
+    case 'cache:updated':
+      return joinEventParts([
+        `${event.serviceName} ${event.type} #${event.itemId}`,
+        event.source,
+        `${event.queryEffects.filter(effect => effect.outcome === 'merged').length} merged`,
+        `${event.queryEffects.filter(effect => effect.outcome === 'reconcile').length} reconcile`,
+      ])
+    case 'connection:connected':
+      return joinEventParts([
+        'connected',
+        event.transport ?? '',
+        event.connectionId ? `socket ${event.connectionId}` : '',
+      ])
+    case 'connection:disconnected':
+      return joinEventParts([
+        event.reason ?? 'connection lost',
+        event.reconnecting ? 'will reconnect' : 'reconnect disabled',
+      ])
+    case 'connection:reconnected':
+      return joinEventParts([
+        event.attempt === undefined ? 'reconnected' : `reconnected after attempt ${event.attempt}`,
+        event.transport ?? '',
+        event.connectionId ? `socket ${event.connectionId}` : '',
+      ])
+    case 'connection:error':
+      return joinEventParts([event.phase, errorMessage(event.error)])
+    case 'connection:reconnect-failed':
+      return joinEventParts([
+        'reconnection attempts exhausted',
+        event.error ? errorMessage(event.error) : '',
+      ])
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'mutate:end':
+    case 'mutate:error':
+    case 'mutate:rollback':
+      return joinEventParts([
+        `${event.serviceName}.${event.method}`,
+        `mutation ${event.mutationId}`,
+        event.id === undefined ? '' : `#${event.id}`,
+        'optimistic' in event && event.optimistic ? 'optimistic' : '',
+        'durationMs' in event ? formatMs(event.durationMs) : '',
+        'error' in event ? errorMessage(event.error) : '',
+      ])
+    case 'action:start':
+    case 'action:end':
+    case 'action:error':
+      return joinEventParts([
+        `action ${event.actionId}`,
+        event.name ?? '(anonymous)',
+        'durationMs' in event ? formatMs(event.durationMs) : '',
+        'error' in event ? errorMessage(event.error) : '',
+      ])
+    default: {
+      const exhaustive: never = event
+      return exhaustive
+    }
+  }
+}
+
+function activityIdentity(
+  key: string,
+  event: DevtoolsEvent['event'],
+): { subject: string; operation: string } {
+  if (key.startsWith('action:') || event.kind === 'action:start') {
+    return {
+      subject: 'action',
+      operation: event.kind === 'action:start' ? (event.name ?? '(anonymous)') : 'run',
+    }
+  }
+  return { subject: eventSubject(event), operation: eventOperation(event) }
+}
+
+function activityStatus(
+  key: string,
+  events: readonly DevtoolsEvent[],
+): { status: string; tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral' } {
+  const representative = activityRepresentative(events).event
+  if (key.startsWith('mutation:') || isMutationEvent(representative)) {
+    const terminal = [...events]
+      .reverse()
+      .find(item => ['mutate:end', 'mutate:error', 'mutate:rollback'].includes(item.event.kind))
+    if (!terminal) return { status: 'pending', tone: 'blue' }
+    return eventStatus(terminal.event)
+  }
+  if (key.startsWith('action:') || representative.kind === 'action:start') {
+    const terminal = [...events]
+      .reverse()
+      .find(item => item.event.kind === 'action:end' || item.event.kind === 'action:error')
+    return terminal ? eventStatus(terminal.event) : { status: 'pending', tone: 'blue' }
+  }
+  if (
+    representative.kind === 'realtime' ||
+    representative.kind === 'cache:updated' ||
+    representative.kind.startsWith('connection:')
+  ) {
+    return eventStatus(representative)
+  }
+  const terminal = [...events]
+    .reverse()
+    .find(item => item.event.kind === 'fetch:end' || item.event.kind === 'fetch:error')
+  if (terminal) return eventStatus(terminal.event)
+  return eventStatus(events.at(-1)!.event)
+}
+
+function eventSubject(event: DevtoolsEvent['event']): string {
+  if ('serviceName' in event) return event.serviceName
+  if (event.kind.startsWith('connection:')) return 'socket'
+  if (event.kind === 'reconnect:sweep') return 'socket'
+  if (
+    event.kind === 'action:start' ||
+    event.kind === 'action:end' ||
+    event.kind === 'action:error'
+  ) {
+    return event.name ?? 'action'
+  }
+  return 'figbird'
+}
+
+function eventOperation(event: DevtoolsEvent['event']): string {
+  if (event.kind === 'realtime' || event.kind === 'cache:updated') {
+    return normalizeRealtimeOperation(event.type)
+  }
+  if ('method' in event) return event.method
+  if (event.kind.startsWith('connection:')) return event.kind.slice('connection:'.length)
+  if (event.kind.startsWith('fetch:')) return event.kind.slice('fetch:'.length)
+  if (event.kind.startsWith('reconcile:')) return event.kind.slice('reconcile:'.length)
+  if (event.kind === 'reconnect:sweep') return 'sweep'
+  if (event.kind.startsWith('action:')) return 'action'
+  return event.kind
+}
+
+function eventStatus(event: DevtoolsEvent['event']): {
+  status: string
+  tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral'
+} {
+  switch (event.kind) {
+    case 'fetch:start':
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'action:start':
+    case 'reconcile:started':
+      return { status: 'pending', tone: 'blue' }
+    case 'fetch:end':
+    case 'mutate:end':
+    case 'action:end':
+      return { status: 'success', tone: 'green' }
+    case 'fetch:error':
+    case 'mutate:error':
+    case 'action:error':
+    case 'connection:error':
+    case 'connection:reconnect-failed':
+      return { status: 'error', tone: 'red' }
+    case 'mutate:rollback':
+      return { status: 'rolled back', tone: 'red' }
+    case 'realtime':
+      return { status: 'received', tone: 'blue' }
+    case 'cache:updated':
+      return event.source === 'optimistic'
+        ? { status: 'projected', tone: 'amber' }
+        : { status: 'success', tone: 'green' }
+    case 'connection:connected':
+    case 'connection:reconnected':
+      return { status: 'connected', tone: 'green' }
+    case 'connection:disconnected':
+      return event.reconnecting
+        ? { status: 'reconnecting', tone: 'blue' }
+        : { status: 'offline', tone: 'red' }
+    case 'reconnect:sweep':
+      return { status: event.phase, tone: 'blue' }
+    case 'reconcile:decision':
+      return { status: event.decision, tone: 'neutral' }
+  }
+}
+
+function normalizeRealtimeOperation(type: string): string {
+  switch (type) {
+    case 'created':
+      return 'create'
+    case 'updated':
+      return 'update'
+    case 'patched':
+      return 'patch'
+    case 'removed':
+      return 'remove'
+  }
+  return type
+}
+
+function joinEventParts(parts: string[]): string {
+  return parts.filter(Boolean).join(' · ')
+}
+
+function errorMessage(error: Error): string {
+  return error.message || String(error)
+}
diff --git a/lib/devtools/format.ts b/lib/devtools/format.ts
index f99be65e..6509adde 100644
--- a/lib/devtools/format.ts
+++ b/lib/devtools/format.ts
@@ -16,6 +16,33 @@ export function prettyJson(value: unknown): string {
   }
 }
 
+export function estimateSerializedBytes(value: unknown): number | null {
+  let serialized: string | undefined
+  try {
+    serialized = JSON.stringify(value)
+  } catch {
+    return null
+  }
+  if (serialized === undefined) return null
+
+  let bytes = 0
+  for (const character of serialized) {
+    const codePoint = character.codePointAt(0)!
+    bytes += codePoint <= 0x7f ? 1 : codePoint <= 0x7ff ? 2 : codePoint <= 0xffff ? 3 : 4
+  }
+  return bytes
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1_024) return `${bytes} B`
+  if (bytes < 1_048_576) return `${formatByteUnit(bytes / 1_024)} KB`
+  return `${formatByteUnit(bytes / 1_048_576)} MB`
+}
+
+function formatByteUnit(value: number): string {
+  return value < 10 ? value.toFixed(1) : Math.round(value).toString()
+}
+
 export function formatMs(ms: number): string {
   return `${Math.round(ms)}ms`
 }
diff --git a/lib/devtools/historicalValue.ts b/lib/devtools/historicalValue.ts
new file mode 100644
index 00000000..903d6313
--- /dev/null
+++ b/lib/devtools/historicalValue.ts
@@ -0,0 +1,12 @@
+/** A diagnostic value that can outlive the bounded payload retention window. */
+export type HistoricalValue<T = unknown> = { state: 'retained'; value: T } | { state: 'evicted' }
+
+export const EVICTED_VALUE: HistoricalValue<never> = { state: 'evicted' }
+
+export function retainedValue<T>(value: T): HistoricalValue<T> {
+  return { state: 'retained', value }
+}
+
+export function historicalValue<T>(captured: HistoricalValue<T> | undefined): T | undefined {
+  return captured?.state === 'retained' ? captured.value : undefined
+}
diff --git a/lib/devtools/model.ts b/lib/devtools/model.ts
index 9697f3fa..e2f0da52 100644
--- a/lib/devtools/model.ts
+++ b/lib/devtools/model.ts
@@ -1,4 +1,5 @@
 import type { QueryAST } from '../core/queryBuilder.js'
+import { QUERY_FETCH_HISTORY_LIMIT } from '../core/queryStore.js'
 import type { InspectedRelationalQuery } from '../core/relationalQuery.js'
 import type { DevtoolsSnapshot, QueryRecord } from './collector.js'
 import { compactJson } from './format.js'
@@ -9,13 +10,17 @@ export interface UnderlyingFetch {
   query: QueryRecord
 }
 
-export type QuerySummary = Omit<QueryRecord, 'generation' | 'page' | 'queryId'>
+export type QuerySummary = Omit<QueryRecord, 'generation' | 'page' | 'queryId'> & {
+  prefetchCount?: number
+  prepareCount?: number
+}
 
 export type OperationPagination = NonNullable<InspectedRelationalQuery['pagination']>
 
 export interface QueryComposition {
   detail: string
   operation: string
+  plan: string
   planDetail: string
   title: string
 }
@@ -87,9 +92,22 @@ export function buildDevtoolsModel(snapshot: DevtoolsSnapshot): DevtoolsModel {
       })
     }
 
+    const summary = {
+      ...summarizeRootFetches(rootFetches),
+      subscriberCount: group.subscriberCount ?? summarySubscriberCount(rootFetches),
+      prefetchCount: group.prefetchCount ?? 0,
+      prepareCount: group.prepareCount ?? 0,
+    }
     operations.push({
       key: group.key,
-      summary: summarizeRootFetches(rootFetches),
+      summary:
+        group.data === undefined
+          ? summary
+          : {
+              ...summary,
+              data: group.data,
+              itemCount: Array.isArray(group.data) ? group.data.length : 1,
+            },
       rootFetches,
       underlying: [...underlyingByPath.values()],
       composition: describeComposition(group.ast, group.name, group.pagination),
@@ -132,7 +150,23 @@ function summarizeRootFetches(roots: QueryRecord[]): QuerySummary {
     method: latest.method,
     ...(latest.resourceId !== undefined ? { resourceId: latest.resourceId } : {}),
     query: latest.query,
+    ...(roots.some(query => query.data !== undefined)
+      ? {
+          data: roots.flatMap(query =>
+            Array.isArray(query.data)
+              ? query.data
+              : query.data === undefined || query.data === null
+                ? []
+                : [query.data],
+          ),
+        }
+      : {}),
     classification: latest.classification,
+    ...(latest.classificationReasons
+      ? { classificationReasons: latest.classificationReasons }
+      : {}),
+    ...(latest.realtimeStrategy ? { realtimeStrategy: latest.realtimeStrategy } : {}),
+    skipped: roots.every(query => query.skipped === true),
     status: roots.some(query => query.status === 'error')
       ? 'error'
       : roots.some(query => query.status === 'loading')
@@ -145,6 +179,10 @@ function summarizeRootFetches(roots: QueryRecord[]): QuerySummary {
     fetchCount: roots.reduce((count, query) => count + query.fetchCount, 0),
     errorCount: roots.reduce((count, query) => count + query.errorCount, 0),
     totalDurationMs: roots.reduce((duration, query) => duration + query.totalDurationMs, 0),
+    fetchHistory: roots
+      .flatMap(query => query.fetchHistory ?? [])
+      .sort((a, b) => a.startedAt - b.startedAt)
+      .slice(-QUERY_FETCH_HISTORY_LIMIT),
     spans: roots.flatMap(query => query.spans).sort((a, b) => a.startAt - b.startAt),
     realtimeSeen: Math.max(...roots.map(query => query.realtimeSeen)),
     reconciles: roots.reduce((count, query) => count + query.reconciles, 0),
@@ -153,6 +191,10 @@ function summarizeRootFetches(roots: QueryRecord[]): QuerySummary {
   }
 }
 
+function summarySubscriberCount(roots: QueryRecord[]): number {
+  return Math.max(...roots.map(query => query.subscriberCount))
+}
+
 function querySummary({
   generation: _generation,
   page: _page,
@@ -204,6 +246,7 @@ function describeComposition(
   return {
     detail: parts.join(' · '),
     operation: `${ast.service}.${head}`,
+    plan: formatAstPlan(ast),
     planDetail: [
       pagination ? describePagination(pagination) : '',
       rootQuery || 'all',
@@ -215,6 +258,19 @@ function describeComposition(
   }
 }
 
+function formatAstPlan(ast: QueryAST): string {
+  const query = compactAstQuery(ast.query)
+  const args =
+    ast.kind === 'get'
+      ? [formatAstValue(ast.resourceId), query]
+      : ast.kind === 'paginate'
+        ? [String(ast.pageSize ?? '?'), query]
+        : [query]
+  const call = `${ast.kind}(${args.filter(Boolean).join(', ')})`
+  const related = relationPaths(ast)
+  return related.length > 0 ? `${call} → ${formatList(related)}` : call
+}
+
 function describePagination(pagination: OperationPagination): string {
   return `${pagination.strategy} · ${pagination.loadedPages} ${pagination.loadedPages === 1 ? 'page' : 'pages'}`
 }
diff --git a/lib/devtools/payloadRetention.ts b/lib/devtools/payloadRetention.ts
new file mode 100644
index 00000000..7359be92
--- /dev/null
+++ b/lib/devtools/payloadRetention.ts
@@ -0,0 +1,113 @@
+export interface PayloadHandle {
+  active: boolean
+  cost: number
+  evict: () => void
+}
+
+/** FIFO retention for expensive diagnostic values while their metadata lives longer. */
+export class PayloadRetention {
+  #activeCount = 0
+  #cost = 0
+  #items: PayloadHandle[] = []
+  #start = 0
+
+  constructor(
+    readonly limit: number,
+    readonly nodeLimit: number,
+  ) {}
+
+  retain(value: unknown, evict: () => void): PayloadHandle {
+    const handle: PayloadHandle = {
+      active: true,
+      cost: payloadCost(value, this.nodeLimit + 1),
+      evict,
+    }
+    this.#items.push(handle)
+    this.#activeCount++
+    this.#cost += handle.cost
+    this.#vacuum()
+    return handle
+  }
+
+  release(handle: PayloadHandle | undefined): void {
+    if (!handle?.active) return
+    handle.active = false
+    this.#activeCount--
+    this.#cost -= handle.cost
+  }
+
+  clear(): void {
+    this.#activeCount = 0
+    this.#cost = 0
+    this.#items = []
+    this.#start = 0
+  }
+
+  #vacuum(): void {
+    while (this.#activeCount > this.limit || this.#cost > this.nodeLimit) {
+      const handle = this.#items[this.#start++]
+      if (!handle?.active) continue
+      handle.active = false
+      this.#activeCount--
+      this.#cost -= handle.cost
+      handle.evict()
+    }
+    if (this.#start > 512 && this.#start * 2 > this.#items.length) {
+      this.#items = this.#items.slice(this.#start)
+      this.#start = 0
+    }
+  }
+}
+
+/**
+ * A bounded walk avoids serializing retained payloads just to estimate their cost.
+ * Long strings are weighted too, so one flat payload cannot bypass the object budget.
+ */
+function payloadCost(value: unknown, maximum: number): number {
+  const seen = new WeakSet<object>()
+  const queue: unknown[] = [value]
+  let cost = 0
+  while (queue.length > 0 && cost < maximum) {
+    const item = queue.pop()
+    if (typeof item === 'string') {
+      cost += Math.max(1, Math.ceil(item.length / 256))
+      continue
+    }
+    cost++
+    if (typeof item !== 'object' || item === null || seen.has(item)) continue
+    seen.add(item)
+    if (Array.isArray(item)) {
+      const remaining = Math.max(0, maximum - cost)
+      for (let index = Math.min(item.length, remaining) - 1; index >= 0; index--) {
+        queue.push(item[index])
+      }
+      continue
+    }
+    if (item instanceof Map) {
+      for (const [key, mapValue] of item) {
+        queue.push(key, mapValue)
+        if (queue.length + cost >= maximum) break
+      }
+      continue
+    }
+    if (item instanceof Set) {
+      for (const setValue of item) {
+        queue.push(setValue)
+        if (queue.length + cost >= maximum) break
+      }
+      continue
+    }
+    const remaining = Math.max(0, maximum - cost)
+    let inspected = 0
+    for (const key in item) {
+      if (!Object.prototype.hasOwnProperty.call(item, key)) continue
+      if (inspected++ >= remaining) break
+      try {
+        queue.push((item as Record<string, unknown>)[key])
+      } catch {
+        // Ignore getters that cannot be inspected.
+      }
+    }
+  }
+  return Math.min(maximum, cost)
+}
diff --git a/lib/devtools/timelineModel.ts b/lib/devtools/timelineModel.ts
new file mode 100644
index 00000000..6d670952
--- /dev/null
+++ b/lib/devtools/timelineModel.ts
@@ -0,0 +1,586 @@
+import type { FigbirdEvent } from '../core/events.js'
+import type { QueryGraphRef } from '../core/queryTypes.js'
+import type {
+  DevtoolsSnapshot,
+  QueryRecord,
+  TimelineTraceSummary,
+  WriteRecord,
+} from './collector.js'
+import {
+  EVICTED_VALUE,
+  historicalValue,
+  retainedValue,
+  type HistoricalValue,
+} from './historicalValue.js'
+import { displayEvent } from './eventModel.js'
+import { compactJson, formatMs } from './format.js'
+import type { DevtoolsModel } from './model.js'
+
+export type TimelineActivityKind = 'fetch' | 'realtime' | 'connection' | 'write'
+export type TimelineActivityTone = 'green' | 'amber' | 'red' | 'blue' | 'neutral'
+
+export interface TimelineGraphRef extends QueryGraphRef {
+  operationLabel: string
+}
+
+const ACTION_WRAPPER_START_TOLERANCE_MS = 10
+
+export interface TimelineActivity {
+  id: string
+  kind: TimelineActivityKind
+  startAt: number
+  endAt?: number
+  label: string
+  operation: string
+  detail: string
+  detailTooltip?: string
+  status: string
+  tone: TimelineActivityTone
+  trigger: string
+  effect: string
+  result: string
+  serviceName?: string
+  queryId?: string
+  queryIds?: string[]
+  graph?: readonly TimelineGraphRef[]
+  traceId?: number
+  entity?: { serviceName: string; itemId: string | number }
+  durationMs?: number
+  payload?: HistoricalValue
+  livePayload?: unknown
+  data?: HistoricalValue
+  liveData?: unknown
+  errorDetails?: HistoricalValue
+  write?: {
+    id: string
+    type: WriteRecord['type']
+    optimistic: boolean
+    payload?: HistoricalValue
+    args?: HistoricalValue<readonly unknown[]>
+    initiatingAction?: {
+      id: string
+      name: string
+      durationMs?: number
+    }
+  }
+  error: boolean
+  searchText: string
+}
+
+export interface TimelineExtent {
+  start: number
+  end: number
+}
+
+export function buildTimelineActivities(
+  snapshot: DevtoolsSnapshot,
+  model: DevtoolsModel,
+  nowPoint: number,
+): TimelineActivity[] {
+  const traces = new Map(snapshot.timeline.traces.map(trace => [trace.traceId, trace]))
+  const activities = [
+    ...buildFetchActivities(snapshot.queries, model, nowPoint),
+    ...buildRealtimeActivities(snapshot, traces),
+    ...snapshot.timeline.connection.map((item, index) =>
+      connectionActivity(item.at, item.event, index, traces),
+    ),
+    ...buildWriteActivities(
+      snapshot.writes.filter(write => write.startedAt >= snapshot.timeline.startedAt),
+      snapshot,
+    ),
+  ]
+  return activities.sort(compareTimelineActivities)
+}
+
+function compareTimelineActivities(first: TimelineActivity, second: TimelineActivity): number {
+  const startMillisecond = Math.round(first.startAt) - Math.round(second.startAt)
+  if (startMillisecond !== 0) return first.startAt - second.startAt
+
+  if (first.kind === 'fetch' && second.kind === 'fetch') {
+    const rootPriority = Number(!isRootFetch(first)) - Number(!isRootFetch(second))
+    if (rootPriority !== 0) return rootPriority
+
+    const firstSequence = fetchSequence(first)
+    const secondSequence = fetchSequence(second)
+    if (firstSequence !== undefined && secondSequence !== undefined) {
+      const sequence = firstSequence - secondSequence
+      if (sequence !== 0) return sequence
+    }
+  }
+
+  const kindPriority = timelineKindPriority(first.kind) - timelineKindPriority(second.kind)
+  if (kindPriority !== 0) return kindPriority
+
+  return first.startAt - second.startAt || first.id.localeCompare(second.id)
+}
+
+function timelineKindPriority(kind: TimelineActivityKind): number {
+  switch (kind) {
+    case 'fetch':
+      return 0
+    case 'realtime':
+      return 1
+    case 'connection':
+      return 2
+    case 'write':
+      return 3
+  }
+}
+
+function isRootFetch(activity: TimelineActivity): boolean {
+  if (activity.kind !== 'fetch') return false
+  if (activity.graph?.some(ref => ref.path === '(root)')) return true
+  return activity.detail
+    .split(' · ')
+    .flatMap(part => part.split(','))
+    .some(part => part.trim() === 'root')
+}
+
+function fetchSequence(activity: TimelineActivity): number | undefined {
+  const match = /^fetch:(\d+)$/.exec(activity.id)
+  return match ? Number(match[1]) : undefined
+}
+
+export function timelineExtent(
+  activities: readonly TimelineActivity[],
+  _startedAt: number,
+  nowPoint: number,
+): TimelineExtent | null {
+  if (activities.length === 0) return null
+  const earliest = Math.min(...activities.map(activity => activity.startAt))
+  const latest = Math.max(...activities.map(activity => activity.endAt ?? nowPoint))
+  const start = earliest
+  return { start, end: Math.max(start + 1_000, latest) }
+}
+
+function buildFetchActivities(
+  queries: readonly QueryRecord[],
+  model: DevtoolsModel,
+  nowPoint: number,
+): TimelineActivity[] {
+  const operationLabels = new Map(
+    model.operations.map(operation => [
+      operation.key,
+      operation.composition?.operation ??
+        `${operation.summary.serviceName}.${operation.summary.method}`,
+    ]),
+  )
+  return queries.flatMap(query =>
+    query.spans.map((span, index) => {
+      const traceId = span.traceIds?.[0]
+      const failed = span.ok === false
+      const pending = span.endAt === undefined
+      const itemCount = pending ? undefined : (span.itemCount ?? query.itemCount)
+      const durationMs = span.durationMs ?? Math.max(0, (span.endAt ?? nowPoint) - span.startAt)
+      const scopes = model.scopesByQueryId.get(query.queryId) ?? []
+      const scope = [...new Set(scopes.map(item => normalizeScopeLabel(item.label)))].join(', ')
+      const scopeTooltip =
+        scopes.length > 1
+          ? [
+              `Shared by ${scopes.length} query operations`,
+              ...new Set(scopes.map(item => item.title)),
+            ].join('\n')
+          : undefined
+      const effect = failed ? '—' : 'cache refreshed'
+      const trigger = fetchTrigger(span.reason, span.causeKinds)
+      const result = failed
+        ? (query.lastError?.message ?? 'failed')
+        : pending
+          ? 'pending'
+          : `${itemCount ?? 0} ${itemCount === 1 ? 'row' : 'rows'}`
+      const payload = span.params
+      const livePayload = query.method === 'get' ? query.resourceId : query.query
+      const capturedErrorDetails = span.errorDetails
+      return searchable({
+        id: `fetch:${span.fetchId ?? `${query.queryId}:${span.startAt}:${index}`}`,
+        kind: 'fetch',
+        startAt: span.startAt,
+        ...(span.endAt === undefined ? {} : { endAt: span.endAt }),
+        label: query.serviceName,
+        operation: query.method,
+        detail: [query.resourceId === undefined ? '' : `#${query.resourceId}`, scope ?? '']
+          .filter(Boolean)
+          .join(' · '),
+        ...(scopeTooltip ? { detailTooltip: scopeTooltip } : {}),
+        status: failed ? 'error' : pending ? 'pending' : 'success',
+        tone: failed ? 'red' : pending ? 'blue' : 'green',
+        trigger,
+        effect,
+        result,
+        serviceName: query.serviceName,
+        queryId: query.queryId,
+        ...(span.graph && span.graph.length > 0
+          ? {
+              graph: span.graph.map(ref => ({
+                ...ref,
+                operationLabel: operationLabels.get(ref.operationId) ?? ref.operationId,
+              })),
+            }
+          : {}),
+        ...(traceId === undefined ? {} : { traceId }),
+        durationMs,
+        ...(payload === undefined ? {} : { payload }),
+        ...(query.present && livePayload !== undefined ? { livePayload } : {}),
+        ...(span.result === undefined ? {} : { data: span.result }),
+        ...(query.present && query.data !== undefined ? { liveData: query.data } : {}),
+        ...(capturedErrorDetails === undefined ? {} : { errorDetails: capturedErrorDetails }),
+        error: failed,
+      })
+    }),
+  )
+}
+
+function normalizeScopeLabel(label: string): string {
+  const parts = label
+    .split(',')
+    .map(part => part.trim())
+    .filter(Boolean)
+  return [...new Set(parts)].join(', ')
+}
+
+function buildRealtimeActivities(
+  snapshot: DevtoolsSnapshot,
+  traces: ReadonlyMap<number, TimelineTraceSummary>,
+): TimelineActivity[] {
+  return snapshot.timeline.realtime.map((item, index) => {
+    const trace = item.traceId === undefined ? undefined : traces.get(item.traceId)
+    const queryIds = trace?.queryIds ?? []
+    const effect = cacheEffect(trace, '—')
+    const fetches = trace?.fetches ?? 0
+    const result = fetches > 0 ? `${fetches} ${fetches === 1 ? 'fetch' : 'fetches'} triggered` : '—'
+    return searchable({
+      id: `realtime:${item.at}:${item.serviceName}:${index}`,
+      kind: 'realtime',
+      startAt: item.at,
+      endAt: item.at,
+      label: item.serviceName,
+      operation: normalizeRealtimeOperation(item.type),
+      detail: item.itemId === undefined ? '' : `#${item.itemId}`,
+      status: 'received',
+      tone: 'blue',
+      trigger: 'realtime event',
+      effect,
+      result,
+      serviceName: item.serviceName,
+      ...(queryIds.length > 0 ? { queryIds } : {}),
+      ...(item.traceId === undefined ? {} : { traceId: item.traceId }),
+      ...(item.itemId === undefined
+        ? {}
+        : { entity: { serviceName: item.serviceName, itemId: item.itemId } }),
+      durationMs: 0,
+      ...(item.payload === undefined ? {} : { payload: item.payload }),
+      ...(item.itemId === undefined
+        ? {}
+        : {
+            livePayload: cachedEntityValue(snapshot, item.serviceName, item.itemId),
+          }),
+      error: false,
+    })
+  })
+}
+
+function connectionActivity(
+  at: number,
+  event: Extract<FigbirdEvent, { kind: `connection:${string}` }>,
+  index: number,
+  traces: ReadonlyMap<number, TimelineTraceSummary>,
+): TimelineActivity {
+  const failed =
+    event.kind === 'connection:disconnected' ||
+    event.kind === 'connection:error' ||
+    event.kind === 'connection:reconnect-failed'
+  const trace = event.traceId === undefined ? undefined : traces.get(event.traceId)
+  const fetches = trace?.fetches ?? 0
+  const operation = connectionOperation(event)
+  const result = [
+    'transport' in event ? (event.transport ?? '') : '',
+    'attempt' in event && event.attempt !== undefined ? `attempt ${event.attempt}` : '',
+    trace?.sweptQueries !== undefined
+      ? `${trace.sweptQueries} ${trace.sweptQueries === 1 ? 'query swept' : 'queries swept'}`
+      : '',
+    fetches > 0 ? `${fetches} ${fetches === 1 ? 'fetch' : 'fetches'}` : '',
+  ]
+    .filter(Boolean)
+    .join(' · ')
+  return searchable({
+    id: `connection:${at}:${event.kind}:${index}`,
+    kind: 'connection',
+    startAt: at,
+    endAt: at,
+    label: 'socket',
+    operation,
+    detail: connectionDetail(event),
+    status:
+      event.kind === 'connection:disconnected'
+        ? event.reconnecting
+          ? 'reconnecting'
+          : 'offline'
+        : failed
+          ? 'error'
+          : 'connected',
+    tone:
+      event.kind === 'connection:disconnected' && event.reconnecting
+        ? 'blue'
+        : failed
+          ? 'red'
+          : 'green',
+    trigger: 'transport',
+    effect: '—',
+    result: result || '—',
+    ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
+    durationMs: 0,
+    payload: retainedValue(displayEvent(event)),
+    error: failed,
+  })
+}
+
+function buildWriteActivities(
+  writes: readonly WriteRecord[],
+  snapshot: DevtoolsSnapshot,
+): TimelineActivity[] {
+  const mutations = writes.filter(write => write.type === 'mutation')
+  const collapsedActionIds = new Set<string>()
+  const actionByMutationId = new Map<string, WriteRecord>()
+  const actions = writes
+    .filter(
+      write => write.type === 'action' && write.status === 'success' && write.endedAt !== undefined,
+    )
+    .sort((a, b) => (a.durationMs ?? Infinity) - (b.durationMs ?? Infinity))
+
+  for (const action of actions) {
+    const candidates = mutations.filter(mutation => actionContainsMutation(action, mutation))
+    if (candidates.length !== 1) continue
+
+    const mutation = candidates[0]!
+    if (actionByMutationId.has(mutation.id)) continue
+    collapsedActionIds.add(action.id)
+    actionByMutationId.set(mutation.id, action)
+  }
+
+  return writes
+    .filter(write => !collapsedActionIds.has(write.id))
+    .map(write => writeActivity(write, snapshot, actionByMutationId.get(write.id)))
+}
+
+function actionContainsMutation(action: WriteRecord, mutation: WriteRecord): boolean {
+  if (action.endedAt === undefined) return false
+  if (mutation.startedAt < action.startedAt) return false
+  if (mutation.startedAt - action.startedAt > ACTION_WRAPPER_START_TOLERANCE_MS) return false
+  return (mutation.endedAt ?? Infinity) <= action.endedAt
+}
+
+function writeActivity(
+  write: WriteRecord,
+  snapshot: DevtoolsSnapshot,
+  initiatingAction?: WriteRecord,
+): TimelineActivity {
+  const failed = write.status === 'error' || write.status === 'rollback'
+  const status =
+    write.status === 'in-flight'
+      ? 'pending'
+      : write.status === 'rollback'
+        ? 'rolled back'
+        : write.status
+  const label =
+    write.type === 'action'
+      ? (write.name ?? '(anonymous action)')
+      : (write.serviceName ?? 'mutation')
+  const operation = write.type === 'action' ? 'action' : (write.method ?? 'mutate')
+  const actionName = initiatingAction?.name ?? (initiatingAction ? '(anonymous action)' : undefined)
+  const payload = writePayload(write)
+  return searchable({
+    id: `write:${write.id}`,
+    kind: 'write',
+    startAt: write.startedAt,
+    ...(write.endedAt === undefined ? {} : { endAt: write.endedAt }),
+    label,
+    operation,
+    detail:
+      write.type === 'mutation'
+        ? [
+            write.itemId === undefined ? '' : `#${write.itemId}`,
+            actionName ? `${actionName} action` : '',
+          ]
+            .filter(Boolean)
+            .join(' · ')
+        : '',
+    status,
+    tone: failed ? 'red' : write.status === 'in-flight' ? 'blue' : 'green',
+    trigger: initiatingAction || write.type === 'action' ? 'action' : 'UI mutation',
+    effect: write.optimistic ? (write.rolledBack ? 'rolled back' : 'projected') : '—',
+    result:
+      write.error ??
+      (write.status === 'in-flight'
+        ? 'pending'
+        : write.status === 'rollback'
+          ? 'rolled back'
+          : 'complete'),
+    ...(write.serviceName === undefined ? {} : { serviceName: write.serviceName }),
+    ...(write.serviceName === undefined || write.itemId === undefined
+      ? {}
+      : { entity: { serviceName: write.serviceName, itemId: write.itemId } }),
+    ...(write.traceId === undefined ? {} : { traceId: write.traceId }),
+    ...(write.durationMs === undefined ? {} : { durationMs: write.durationMs }),
+    ...(write.errorDetails === undefined ? {} : { errorDetails: write.errorDetails }),
+    ...(write.serviceName === undefined || write.itemId === undefined
+      ? {}
+      : {
+          livePayload: cachedEntityValue(snapshot, write.serviceName, write.itemId),
+        }),
+    write: {
+      id: write.id,
+      type: write.type,
+      optimistic: write.optimistic ?? false,
+      ...(payload ? { payload } : {}),
+      ...(write.args ? { args: write.args } : {}),
+      ...(initiatingAction && actionName
+        ? {
+            initiatingAction: {
+              id: initiatingAction.id,
+              name: actionName,
+              ...(initiatingAction.durationMs === undefined
+                ? {}
+                : { durationMs: initiatingAction.durationMs }),
+            },
+          }
+        : {}),
+    },
+    error: failed,
+  })
+}
+
+function writePayload(write: WriteRecord): HistoricalValue | undefined {
+  if (!write.args) return undefined
+  if (write.args.state === 'evicted') return EVICTED_VALUE
+  const args = write.args.value
+  if (args.length === 0) return undefined
+  if (write.type === 'action') return retainedValue(args.length === 1 ? args[0] : args)
+  if (write.method === 'create') return retainedValue(args[0])
+  if (write.method === 'update' || write.method === 'patch') return retainedValue(args[1])
+  if (write.method === 'remove') return undefined
+  return retainedValue(args.length === 1 ? args[0] : args)
+}
+
+function cacheEffect(trace: TimelineTraceSummary | undefined, fallback: string): string {
+  const merged = trace?.mergedQueries ?? 0
+  const reconcile = trace?.reconciledQueries ?? 0
+  return (
+    [
+      merged > 0 ? `${merged} ${merged === 1 ? 'query updated' : 'queries updated'}` : '',
+      reconcile > 0
+        ? `${reconcile} ${reconcile === 1 ? 'refetch scheduled' : 'refetches scheduled'}`
+        : '',
+      merged === 0 && reconcile === 0 && trace?.cacheUpdated ? 'cache refreshed' : '',
+    ]
+      .filter(Boolean)
+      .join(' · ') || fallback
+  )
+}
+
+function fetchTrigger(
+  reason: string | undefined,
+  causeKinds: readonly string[] | undefined,
+): string {
+  if (reason) return reason.replace('-', ' ')
+  return causeKinds?.[0]?.replace('-', ' ') ?? 'request'
+}
+
+function normalizeRealtimeOperation(type: string | undefined): string {
+  switch (type) {
+    case 'created':
+      return 'create'
+    case 'updated':
+      return 'update'
+    case 'patched':
+      return 'patch'
+    case 'removed':
+      return 'remove'
+    default:
+      return type ?? 'event'
+  }
+}
+
+function connectionOperation(
+  event: Extract<FigbirdEvent, { kind: `connection:${string}` }>,
+): string {
+  switch (event.kind) {
+    case 'connection:connected':
+      return 'connected'
+    case 'connection:disconnected':
+      return 'disconnected'
+    case 'connection:reconnected':
+      return 'reconnected'
+    case 'connection:error':
+      return event.phase === 'connect' ? 'connect error' : 'reconnect error'
+    case 'connection:reconnect-failed':
+      return 'reconnect failed'
+  }
+}
+
+function connectionDetail(event: Extract<FigbirdEvent, { kind: `connection:${string}` }>): string {
+  switch (event.kind) {
+    case 'connection:connected':
+    case 'connection:reconnected':
+      return ['transport' in event ? event.transport : '', event.connectionId ?? '']
+        .filter(Boolean)
+        .join(' · ')
+    case 'connection:disconnected':
+      return event.reason ?? 'connection lost'
+    case 'connection:error':
+      return event.error.message
+    case 'connection:reconnect-failed':
+      return event.error?.message ?? 'attempts exhausted'
+  }
+}
+
+function searchable(activity: Omit<TimelineActivity, 'searchText'>): TimelineActivity {
+  return {
+    ...activity,
+    searchText: [
+      activity.kind,
+      activity.label,
+      activity.operation,
+      activity.detail,
+      activity.status,
+      activity.trigger,
+      activity.effect,
+      activity.result,
+      activity.serviceName ?? '',
+      activity.queryId ?? '',
+      ...(activity.queryIds ?? []),
+      activity.traceId === undefined ? '' : String(activity.traceId),
+      activity.entity ? String(activity.entity.itemId) : '',
+      activity.write?.id ?? '',
+      activity.durationMs === undefined ? '' : formatMs(activity.durationMs),
+    ]
+      .join(' ')
+      .toLowerCase(),
+  }
+}
+
+export function timelineActivityMatchesFilter(
+  activity: TimelineActivity,
+  normalizedFilter: string,
+): boolean {
+  if (!normalizedFilter) return true
+  if (activity.searchText.includes(normalizedFilter)) return true
+  return [
+    historicalValue(activity.payload),
+    historicalValue(activity.data),
+    activity.livePayload,
+    activity.liveData,
+    historicalValue(activity.write?.args),
+  ].some(
+    value => value !== undefined && compactJson(value).toLowerCase().includes(normalizedFilter),
+  )
+}
+
+function cachedEntityValue(
+  snapshot: DevtoolsSnapshot,
+  serviceName: string,
+  itemId: string | number,
+): unknown {
+  return snapshot.cache
+    ?.find(service => service.serviceName === serviceName)
+    ?.entities.find(entity => entity.id === String(itemId))?.value
+}
diff --git a/lib/devtools/timelineTraceStore.ts b/lib/devtools/timelineTraceStore.ts
new file mode 100644
index 00000000..2a27baaf
--- /dev/null
+++ b/lib/devtools/timelineTraceStore.ts
@@ -0,0 +1,89 @@
+import type { CacheQueryEffect, TraceCause } from '../core/events.js'
+
+export interface TimelineTraceSummary {
+  traceId: number
+  queryIds: string[]
+  mergedQueries: number
+  reconciledQueries: number
+  cacheUpdated: boolean
+  fetches: number
+  sweptQueries?: number
+}
+
+/** Timeline-owned causal facts that remain valid when the raw event log is cleared. */
+export class TimelineTraceStore {
+  #traces = new Map<number, TimelineTraceSummary>()
+  #outcomes = new Map<number, Map<string, CacheQueryEffect['outcome']>>()
+
+  recordFetch(causes: readonly TraceCause[] | undefined): void {
+    for (const cause of causes ?? []) {
+      this.#update(cause.traceId, trace => {
+        trace.fetches++
+      })
+    }
+  }
+
+  recordCacheUpdate(traceId: number, effects: readonly CacheQueryEffect[]): void {
+    this.#update(traceId, trace => {
+      trace.cacheUpdated = true
+      const outcomes = this.#outcomes.get(traceId) ?? new Map()
+      for (const effect of effects) outcomes.set(effect.queryId, effect.outcome)
+      this.#outcomes.set(traceId, outcomes)
+      trace.queryIds = [...outcomes.keys()]
+      trace.mergedQueries = countOutcome(outcomes, 'merged')
+      trace.reconciledQueries = countOutcome(outcomes, 'reconcile')
+    })
+  }
+
+  recordSweep(traceId: number, queryCount: number | undefined): void {
+    if (queryCount === undefined) return
+    this.#update(traceId, trace => {
+      trace.sweptQueries = queryCount
+    })
+  }
+
+  snapshot(): TimelineTraceSummary[] {
+    return [...this.#traces.values()].map(trace => ({ ...trace, queryIds: [...trace.queryIds] }))
+  }
+
+  retainOnly(traceIds: ReadonlySet<number>): void {
+    for (const traceId of this.#traces.keys()) {
+      if (traceIds.has(traceId)) continue
+      this.#traces.delete(traceId)
+      this.#outcomes.delete(traceId)
+    }
+  }
+
+  clear(): void {
+    this.#traces.clear()
+    this.#outcomes.clear()
+  }
+
+  #update(traceId: number, update: (trace: TimelineTraceSummary) => void): void {
+    const trace = this.#traces.get(traceId) ?? emptyTrace(traceId)
+    update(trace)
+    this.#traces.set(traceId, trace)
+  }
+}
+
+function emptyTrace(traceId: number): TimelineTraceSummary {
+  return {
+    traceId,
+    queryIds: [],
+    mergedQueries: 0,
+    reconciledQueries: 0,
+    cacheUpdated: false,
+    fetches: 0,
+  }
+}
+
+function countOutcome(
+  outcomes: ReadonlyMap<string, CacheQueryEffect['outcome']>,
+  expected: CacheQueryEffect['outcome'],
+): number {
+  let count = 0
+  for (const outcome of outcomes.values()) {
+    if (outcome === expected) count++
+  }
+  return count
+}
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 74316320..fb62a3ec 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -3,11 +3,15 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
+  useRef,
   useState,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
   type ReactNode,
+  type RefObject,
 } from 'react'
+import { createPortal } from 'react-dom'
 
 const MIN_DETAILS_WIDTH = 280
 const DEFAULT_DETAILS_WIDTH = 360
@@ -32,6 +36,7 @@ export interface DevtoolsColors {
   blue: string
   purple: string
   activeButtonBg: string
+  relatedRowBg: string
   drawerShadow: string
 }
 
@@ -48,14 +53,15 @@ export const lightColors: DevtoolsColors = {
   border: '#d7dde3',
   rowBorder: '#e8edf2',
   text: '#18202a',
-  muted: '#687483',
-  faint: '#8b98a6',
+  muted: '#4f5b69',
+  faint: '#687483',
   green: '#087f4f',
   amber: '#a76500',
   red: '#cf3030',
   blue: '#1d65d8',
   purple: '#8a3ffc',
   activeButtonBg: 'rgba(29,101,216,.1)',
+  relatedRowBg: 'rgba(29,101,216,.045)',
   drawerShadow: '0 -18px 50px rgba(29,42,58,.2)',
 }
 
@@ -67,14 +73,15 @@ export const darkColors: DevtoolsColors = {
   border: '#343b42',
   rowBorder: 'rgba(255,255,255,.06)',
   text: '#f2f4f5',
-  muted: '#9aa3ad',
-  faint: '#65717c',
+  muted: '#b4bcc5',
+  faint: '#8d98a3',
   green: '#63d28f',
   amber: '#e7bd58',
   red: '#ff7777',
   blue: '#74a7ff',
   purple: '#c98cff',
   activeButtonBg: 'rgba(116,167,255,.16)',
+  relatedRowBg: 'rgba(116,167,255,.07)',
   drawerShadow: '0 -18px 50px rgba(0,0,0,.45)',
 }
 
@@ -86,6 +93,19 @@ const defaultTheme: DevtoolsTheme = {
 export const ThemeContext = createContext<DevtoolsTheme>(defaultTheme)
 
 export function makeStyles(colors: DevtoolsColors) {
+  const input: CSSProperties = {
+    width: 210,
+    maxWidth: '44vw',
+    height: 26,
+    boxSizing: 'border-box',
+    border: `1px solid ${colors.border}`,
+    borderRadius: 4,
+    background: colors.panel,
+    color: colors.text,
+    padding: '4px 8px',
+    font: 'inherit',
+  }
+  const chevronColor = colors.muted.replace('#', '%23')
   return {
     drawer: {
       position: 'fixed',
@@ -130,15 +150,17 @@ export function makeStyles(colors: DevtoolsColors) {
       flex: 1,
       minHeight: 0,
     },
-    input: {
-      width: 210,
-      maxWidth: '44vw',
-      border: `1px solid ${colors.border}`,
-      borderRadius: 4,
-      background: colors.panel,
-      color: colors.text,
-      padding: '5px 8px',
-      font: 'inherit',
+    input,
+    select: {
+      ...input,
+      width: 'auto',
+      maxWidth: 'none',
+      appearance: 'none',
+      paddingRight: 30,
+      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='${chevronColor}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'right 10px center',
+      backgroundSize: '10px 6px',
     },
     scroll: {
       height: '100%',
@@ -152,10 +174,11 @@ export function makeStyles(colors: DevtoolsColors) {
     },
     th: {
       textAlign: 'left',
-      color: colors.muted,
-      fontWeight: 600,
+      color: colors.text,
+      fontWeight: 400,
+      cursor: 'default',
       padding: '6px 10px',
-      borderBottom: `1px solid ${colors.border}`,
+      boxShadow: `inset 0 -1px ${colors.border}`,
       position: 'sticky',
       top: 0,
       background: colors.bg,
@@ -165,7 +188,7 @@ export function makeStyles(colors: DevtoolsColors) {
       whiteSpace: 'nowrap',
     },
     td: {
-      padding: '6px 10px',
+      padding: '5px 10px',
       borderBottom: `1px solid ${colors.rowBorder}`,
       verticalAlign: 'middle',
       overflow: 'hidden',
@@ -228,14 +251,6 @@ export function makeStyles(colors: DevtoolsColors) {
       borderBottom: `1px solid ${colors.rowBorder}`,
       alignItems: 'center',
     },
-    writeRow: {
-      display: 'grid',
-      gridTemplateColumns: '96px 1fr 80px 90px',
-      gap: 8,
-      padding: '6px 10px',
-      borderBottom: `1px solid ${colors.rowBorder}`,
-      alignItems: 'center',
-    },
   } satisfies Record<string, CSSProperties>
 }
 
@@ -243,6 +258,190 @@ export function useDevtoolsTheme(): DevtoolsTheme {
   return useContext(ThemeContext)
 }
 
+interface TooltipTarget {
+  anchor: HTMLElement
+  content: string
+}
+
+interface TooltipPosition {
+  left: number
+  top: number
+}
+
+const TOOLTIP_DELAY_MS = 700
+const TOOLTIP_SKIP_DELAY_MS = 400
+
+/** One delegated tooltip surface for the entire devtools panel. */
+export function TooltipLayer({ rootRef }: { rootRef: RefObject<HTMLElement | null> }) {
+  const { colors } = useDevtoolsTheme()
+  const [target, setTarget] = useState<TooltipTarget | null>(null)
+  const [position, setPosition] = useState<TooltipPosition | null>(null)
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const showTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const sessionTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const tooltipSessionActive = useRef(false)
+
+  const hide = useCallback((keepSession = false) => {
+    if (showTimer.current) clearTimeout(showTimer.current)
+    if (sessionTimer.current) clearTimeout(sessionTimer.current)
+    showTimer.current = null
+    sessionTimer.current = null
+    setTarget(null)
+    setPosition(null)
+    if (keepSession && tooltipSessionActive.current) {
+      sessionTimer.current = setTimeout(() => {
+        sessionTimer.current = null
+        tooltipSessionActive.current = false
+      }, TOOLTIP_SKIP_DELAY_MS)
+    } else {
+      tooltipSessionActive.current = false
+    }
+  }, [])
+
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const ownerWindow = root.ownerDocument.defaultView
+    if (!ownerWindow) return
+
+    const tooltipAnchor = (eventTarget: EventTarget | null): HTMLElement | null => {
+      if (!(eventTarget instanceof ownerWindow.Element)) return null
+      let anchor: Element | null = eventTarget.closest('[data-tooltip]')
+      while (anchor instanceof ownerWindow.HTMLElement && root.contains(anchor)) {
+        const overflowOnly = anchor.hasAttribute('data-tooltip-overflow')
+        const clipped =
+          anchor.scrollWidth > anchor.clientWidth || anchor.scrollHeight > anchor.clientHeight
+        if (!overflowOnly || clipped) return anchor
+        anchor = anchor.parentElement?.closest('[data-tooltip]') ?? null
+      }
+      return null
+    }
+    const show = (anchor: HTMLElement, immediate: boolean) => {
+      const content = anchor.dataset.tooltip
+      if (!content) return
+      if (showTimer.current) clearTimeout(showTimer.current)
+      if (sessionTimer.current) clearTimeout(sessionTimer.current)
+      sessionTimer.current = null
+      const reveal = () => {
+        showTimer.current = null
+        if (!anchor.isConnected) return
+        tooltipSessionActive.current = true
+        setTarget({ anchor, content })
+      }
+      if (immediate || tooltipSessionActive.current) reveal()
+      else showTimer.current = setTimeout(reveal, TOOLTIP_DELAY_MS)
+    }
+    const onPointerOver = (event: PointerEvent) => {
+      const anchor = tooltipAnchor(event.target)
+      if (!anchor || tooltipAnchor(event.relatedTarget) === anchor) return
+      show(anchor, false)
+    }
+    const onPointerOut = (event: PointerEvent) => {
+      const anchor = tooltipAnchor(event.target)
+      if (!anchor) return
+      const nextAnchor = tooltipAnchor(event.relatedTarget)
+      if (nextAnchor === anchor) return
+      if (nextAnchor) show(nextAnchor, false)
+      else hide(true)
+    }
+    const onFocusIn = (event: FocusEvent) => {
+      const anchor = tooltipAnchor(event.target)
+      if (anchor) show(anchor, true)
+    }
+    const onFocusOut = (event: FocusEvent) => {
+      const anchor = tooltipAnchor(event.target)
+      if (!anchor) return
+      const related = event.relatedTarget
+      if (related instanceof ownerWindow.Node && anchor.contains(related)) return
+      hide()
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') hide()
+    }
+
+    root.addEventListener('pointerover', onPointerOver)
+    root.addEventListener('pointerout', onPointerOut)
+    root.addEventListener('focusin', onFocusIn)
+    root.addEventListener('focusout', onFocusOut)
+    const onPointerDown = () => hide()
+    root.addEventListener('pointerdown', onPointerDown)
+    root.addEventListener('keydown', onKeyDown)
+    return () => {
+      root.removeEventListener('pointerover', onPointerOver)
+      root.removeEventListener('pointerout', onPointerOut)
+      root.removeEventListener('focusin', onFocusIn)
+      root.removeEventListener('focusout', onFocusOut)
+      root.removeEventListener('pointerdown', onPointerDown)
+      root.removeEventListener('keydown', onKeyDown)
+      if (showTimer.current) clearTimeout(showTimer.current)
+      if (sessionTimer.current) clearTimeout(sessionTimer.current)
+    }
+  }, [hide, rootRef])
+
+  const updatePosition = useCallback(() => {
+    if (!target || !tooltipRef.current) return
+    const { ownerDocument } = target.anchor
+    const ownerWindow = ownerDocument.defaultView
+    if (!ownerWindow) return
+    const anchorRect = target.anchor.getBoundingClientRect()
+    const tooltipRect = tooltipRef.current.getBoundingClientRect()
+    const gutter = 8
+    const gap = 7
+    const centered = anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2
+    const left = Math.max(
+      gutter,
+      Math.min(centered, ownerWindow.innerWidth - tooltipRect.width - gutter),
+    )
+    const below = anchorRect.bottom + gap
+    const top =
+      below + tooltipRect.height <= ownerWindow.innerHeight - gutter
+        ? below
+        : Math.max(gutter, anchorRect.top - tooltipRect.height - gap)
+    setPosition({ left, top })
+  }, [target])
+
+  useLayoutEffect(() => {
+    if (!target) return
+    updatePosition()
+    const ownerDocument = target.anchor.ownerDocument
+    const ownerWindow = ownerDocument.defaultView
+    ownerDocument.addEventListener('scroll', updatePosition, true)
+    ownerWindow?.addEventListener('resize', updatePosition)
+    return () => {
+      ownerDocument.removeEventListener('scroll', updatePosition, true)
+      ownerWindow?.removeEventListener('resize', updatePosition)
+    }
+  }, [target, updatePosition])
+
+  if (!target) return null
+  return createPortal(
+    <div
+      ref={tooltipRef}
+      role='tooltip'
+      style={{
+        position: 'fixed',
+        zIndex: 2147483647,
+        left: position?.left ?? -10_000,
+        top: position?.top ?? -10_000,
+        maxWidth: 'min(360px, calc(100vw - 16px))',
+        padding: '6px 8px',
+        borderRadius: 4,
+        background: colors.text,
+        color: colors.bg,
+        boxShadow: '0 4px 18px rgba(0,0,0,.24)',
+        font: '11px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        letterSpacing: 0,
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'anywhere',
+        pointerEvents: 'none',
+      }}
+    >
+      {target.content}
+    </div>,
+    target.anchor.ownerDocument.body,
+  )
+}
+
 export function usePreferredColorScheme(theme: DevtoolsThemeMode): ColorScheme {
   const [scheme, setScheme] = useState<ColorScheme>(() => resolveColorScheme(theme))
 
@@ -337,6 +536,7 @@ export function DetailsPane({
   width,
   onResizeStart,
   onClose,
+  contentStyle,
   children,
 }: {
   title: ReactNode
@@ -344,6 +544,7 @@ export function DetailsPane({
   width: number
   onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
   onClose: () => void
+  contentStyle?: CSSProperties
   children: ReactNode
 }) {
   const { colors, styles } = useDevtoolsTheme()
@@ -353,7 +554,6 @@ export function DetailsPane({
         role='separator'
         aria-label='Resize details pane'
         aria-orientation='vertical'
-        title='Resize details pane'
         onMouseDown={onResizeStart}
         style={{
           position: 'absolute',
@@ -408,60 +608,261 @@ export function DetailsPane({
         <button
           type='button'
           aria-label='Close details'
-          title='Close details'
+          data-tooltip='Close details'
           style={iconButtonStyle(colors)}
           onClick={onClose}
         >
           ×
         </button>
       </div>
-      <div style={styles.details}>{children}</div>
+      <div style={{ ...styles.details, ...contentStyle }}>{children}</div>
     </aside>
   )
 }
 
-export function DetailSection({ label, children }: { label: string; children: ReactNode }) {
+export function DetailSection({
+  label,
+  meta,
+  separated = false,
+  children,
+}: {
+  label: string
+  meta?: string
+  separated?: boolean
+  children: ReactNode
+}) {
   const { colors } = useDevtoolsTheme()
   return (
-    <section style={{ marginBottom: 12 }}>
+    <section
+      style={{
+        marginBottom: 14,
+        paddingTop: separated ? 12 : 0,
+        borderTop: separated ? `1px solid ${colors.rowBorder}` : undefined,
+      }}
+    >
       <div
         style={{
-          color: colors.muted,
-          fontSize: 10,
-          fontWeight: 700,
-          textTransform: 'uppercase',
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 8,
           marginBottom: 5,
         }}
       >
-        {label}
+        <strong style={{ color: colors.text, fontWeight: 650 }}>{label}</strong>
+        {meta ? <span style={{ color: colors.muted }}>{meta}</span> : null}
       </div>
       {children}
     </section>
   )
 }
 
-export function DetailStat({ label, value }: { label: string; value: string }) {
+export function DetailBlock({ children }: { children: ReactNode }) {
+  return <section style={{ marginBottom: 12 }}>{children}</section>
+}
+
+export function DetailStats({ children }: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))',
+        gap: '8px 16px',
+        marginBottom: 16,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function DetailStat({
+  label,
+  value,
+  copyValue,
+}: {
+  label: string
+  value: string
+  copyValue?: string
+}) {
+  const { colors } = useDevtoolsTheme()
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '82px minmax(0, 1fr)',
+        gap: 6,
+        alignItems: 'baseline',
+        minWidth: 0,
+      }}
+    >
+      <span style={{ color: colors.muted }}>{label}</span>
+      <span style={{ display: 'flex', alignItems: 'baseline', gap: 5, minWidth: 0 }}>
+        <span style={{ color: colors.text, minWidth: 0, overflowWrap: 'anywhere' }}>{value}</span>
+        {copyValue ? <CopyButton value={copyValue} /> : null}
+      </span>
+    </div>
+  )
+}
+
+export function CopyButton({ value, label = 'value' }: { value: string; label?: string }) {
+  const { colors } = useDevtoolsTheme()
+  const [copied, setCopied] = useState(false)
+  return (
+    <button
+      type='button'
+      aria-label={`Copy ${label}`}
+      data-tooltip={copied ? 'Copied' : `Copy ${label}`}
+      onClick={event => {
+        event.stopPropagation()
+        void copyText(value).then(success => {
+          if (!success) return
+          setCopied(true)
+          setTimeout(() => setCopied(false), 1_200)
+        })
+      }}
+      style={{
+        flex: '0 0 auto',
+        border: 0,
+        padding: 0,
+        background: 'transparent',
+        color: copied ? colors.green : colors.faint,
+        font: 'inherit',
+        fontSize: 11,
+        lineHeight: 1,
+        cursor: 'pointer',
+      }}
+    >
+      {copied ? '✓' : '⧉'}
+    </button>
+  )
+}
+
+export async function copyText(value: string): Promise<boolean> {
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      await navigator.clipboard.writeText(value)
+      return true
+    }
+    if (typeof document === 'undefined') return false
+    const input = document.createElement('textarea')
+    input.value = value
+    input.style.position = 'fixed'
+    input.style.opacity = '0'
+    document.body.append(input)
+    input.select()
+    const copied = document.execCommand('copy')
+    input.remove()
+    return copied
+  } catch {
+    return false
+  }
+}
+
+export interface ResizableColumn {
+  width: number
+  minWidth: number
+}
+
+export function useResizableColumns(
+  columns: readonly ResizableColumn[],
+): [number[], (index: number, event: ReactMouseEvent<HTMLElement>) => void] {
+  const [widths, setWidths] = useState<number[]>(() => columns.map(column => column.width))
+  const onResizeStart = useCallback(
+    (index: number, event: ReactMouseEvent<HTMLElement>) => {
+      event.preventDefault()
+      event.stopPropagation()
+      const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
+      const startX = event.clientX
+      const startWidth = widths[index]!
+      const minWidth = columns[index]!.minWidth
+      const onMove = (move: MouseEvent) => {
+        setWidths(current =>
+          current.map((width, columnIndex) =>
+            columnIndex === index ? Math.max(minWidth, startWidth + move.clientX - startX) : width,
+          ),
+        )
+      }
+      const onUp = () => {
+        ownerWindow.removeEventListener('mousemove', onMove)
+        ownerWindow.removeEventListener('mouseup', onUp)
+      }
+      ownerWindow.addEventListener('mousemove', onMove)
+      ownerWindow.addEventListener('mouseup', onUp)
+    },
+    [columns, widths],
+  )
+  return [widths, onResizeStart]
+}
+
+export function ColumnResizeHandle({
+  label,
+  onMouseDown,
+}: {
+  label: string
+  onMouseDown: (event: ReactMouseEvent<HTMLSpanElement>) => void
+}) {
   const { colors } = useDevtoolsTheme()
   return (
-    <span>
-      <span style={{ color: colors.muted }}>{label}</span>{' '}
-      <strong style={{ color: colors.text }}>{value}</strong>
+    <span
+      role='separator'
+      aria-label={`Resize ${label} column`}
+      aria-orientation='vertical'
+      onMouseDown={onMouseDown}
+      style={{
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: 8,
+        cursor: 'col-resize',
+        zIndex: 2,
+      }}
+    >
+      <span
+        aria-hidden='true'
+        style={{
+          position: 'absolute',
+          top: '50%',
+          right: 0,
+          height: 14,
+          transform: 'translateY(-50%)',
+          borderRight: `1px solid ${colors.border}`,
+        }}
+      />
     </span>
   )
 }
 
-export function useDetailsPaneWidth(): [number, (event: ReactMouseEvent<HTMLDivElement>) => void] {
-  const [width, setWidth] = useState(DEFAULT_DETAILS_WIDTH)
+export function resizableGridTemplate(widths: readonly number[], flexibleIndex: number): string {
+  return widths
+    .map((width, index) => (index === flexibleIndex ? `minmax(${width}px, 1fr)` : `${width}px`))
+    .join(' ')
+}
+
+export function useDetailsPaneWidth({
+  defaultWidth = DEFAULT_DETAILS_WIDTH,
+  maxWidth = MAX_DETAILS_WIDTH,
+}: {
+  defaultWidth?: number
+  maxWidth?: number
+} = {}): [number, (event: ReactMouseEvent<HTMLDivElement>) => void] {
+  const [width, setWidth] = useState(() => {
+    if (typeof window === 'undefined') return defaultWidth
+    return Math.max(MIN_DETAILS_WIDTH, Math.min(defaultWidth, maxWidth, window.innerWidth * 0.65))
+  })
   const onResizeStart = useCallback(
     (event: ReactMouseEvent<HTMLDivElement>) => {
       event.preventDefault()
       const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
       const startX = event.clientX
       const startWidth = width
-      const maxWidth = Math.min(MAX_DETAILS_WIDTH, ownerWindow.innerWidth * 0.65)
+      const availableMaxWidth = Math.min(maxWidth, ownerWindow.innerWidth * 0.65)
       const onMove = (move: MouseEvent) => {
         setWidth(
-          Math.max(MIN_DETAILS_WIDTH, Math.min(maxWidth, startWidth + startX - move.clientX)),
+          Math.max(
+            MIN_DETAILS_WIDTH,
+            Math.min(availableMaxWidth, startWidth + startX - move.clientX),
+          ),
         )
       }
       const onUp = () => {
@@ -471,7 +872,7 @@ export function useDetailsPaneWidth(): [number, (event: ReactMouseEvent<HTMLDivE
       ownerWindow.addEventListener('mousemove', onMove)
       ownerWindow.addEventListener('mouseup', onUp)
     },
-    [width],
+    [maxWidth, width],
   )
   return [width, onResizeStart]
 }
@@ -479,31 +880,42 @@ export function useDetailsPaneWidth(): [number, (event: ReactMouseEvent<HTMLDivE
 export function Badge({
   tone,
   children,
-  title,
+  tooltip,
 }: {
   tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral'
   children: string
-  title?: string | undefined
+  tooltip?: string | undefined
 }) {
   const { colors } = useDevtoolsTheme()
   const color = toneColor(colors, tone)
   return (
     <span
-      title={title}
+      data-tooltip={tooltip}
       style={{
-        display: 'inline-block',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 5,
         alignSelf: 'center',
-        flexShrink: 0,
+        minWidth: 0,
+        maxWidth: '100%',
+        flexShrink: 1,
         color,
-        border: `1px solid ${color}`,
-        borderRadius: 999,
-        padding: '1px 6px',
         fontSize: 11,
-        lineHeight: '16px',
+        lineHeight: '14px',
         whiteSpace: 'nowrap',
       }}
     >
-      {children}
+      <span
+        aria-hidden='true'
+        style={{
+          width: 6,
+          height: 6,
+          flexShrink: 0,
+          borderRadius: 999,
+          background: color,
+        }}
+      />
+      <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>{children}</span>
     </span>
   )
 }
diff --git a/lib/index.ts b/lib/index.ts
index 1410389b..c042c1f7 100644
--- a/lib/index.ts
+++ b/lib/index.ts
@@ -83,7 +83,13 @@ export type { QueryAST, QueryBuilderProxy } from './core/queryBuilder.js'
 
 // query classification report types (returned by figbird.explain / figbird.inspect)
 export type { ClassificationReason, QueryNodeClass } from './core/queryClassification.js'
-export type { ExplainNode, ExplainReport, InspectedQuery } from './core/figbird.js'
+export type {
+  ExplainNode,
+  ExplainReport,
+  InspectedCacheEntity,
+  InspectedCacheService,
+  InspectedQuery,
+} from './core/figbird.js'
 
 // relational query
 export { RelationalQueryRef } from './core/figbird.js'
diff --git a/lib/react/useAction.ts b/lib/react/useAction.ts
index bb84ea54..761de7ce 100644
--- a/lib/react/useAction.ts
+++ b/lib/react/useAction.ts
@@ -1,5 +1,6 @@
 import { startTransition, useCallback, useEffect, useMemo, useReducer, useRef } from 'react'
 import { FigbirdEventEmitter, type FigbirdEvent } from '../core/events.js'
+import { normalizeError } from '../core/errors.js'
 import type { FigbirdEvents } from '../core/figbird.js'
 import { useFigbirdMaybe } from './context.js'
 
@@ -199,7 +200,7 @@ export function useActionImpl<TArgs extends unknown[], TResult>(
             durationMs: Date.now() - startedAt,
           })
         } catch (err) {
-          const error = err instanceof Error ? err : new Error(String(err))
+          const error = normalizeError(err)
           if (mountedRef.current) {
             dispatch({ type: 'failure', payload: error })
           }
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index c69c1cd1..da8b1abd 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -16,6 +16,8 @@ import { ExtensionInspectionSession } from '../extensions/src/inspection.js'
 import { inspectQueryArea } from '../extensions/src/inspectionPage.js'
 import { ExtensionSession } from '../extensions/src/remote.js'
 import { buildDevtoolsModel } from '../lib/devtools/model.js'
+import { buildActivities, buildTraceIndex, eventPayload } from '../lib/devtools/eventModel.js'
+import { buildTimelineActivities } from '../lib/devtools/timelineModel.js'
 import { createTestApp, dom } from './helpers.js'
 
 interface Note {
@@ -152,19 +154,42 @@ test('collector records fetch spans and keeps event and timeline history indepen
   t.truthy(row)
   t.is(row?.fetchCount, 1)
   t.is(row?.spans.length, 1)
+  t.is(row?.fetchHistory?.length, 1)
   t.true(row?.lastDurationMs !== undefined)
   t.true(snapshot.events.length > 0)
   t.true(snapshot.events.every(event => event.wallAt !== undefined))
+  t.true(snapshot.events.every(event => event.wallAt === event.event.timestamp))
   t.true(snapshot.timeline.startedAt > 0)
   t.true(snapshot.timeline.realtime.length > 0)
-  t.true(snapshot.timeline.laneOrder.includes(`query:${row?.queryId}`))
-  t.true(snapshot.timeline.laneOrder.includes('realtime:notes'))
+  t.deepEqual(snapshot.timeline.laneOrder, [])
   t.is(collector.getSnapshot(), snapshot)
+  const realtimeBeforeClear = buildTimelineActivities(
+    snapshot,
+    buildDevtoolsModel(snapshot),
+    performance.now(),
+  ).find(activity => activity.kind === 'realtime')
 
   collector.clearEvents()
   const clearedEvents = collector.getSnapshot()
   t.is(clearedEvents.events.length, 0)
   t.is(clearedEvents.timeline.realtime.length, snapshot.timeline.realtime.length)
+  const realtimeAfterClear = buildTimelineActivities(
+    clearedEvents,
+    buildDevtoolsModel(clearedEvents),
+    performance.now(),
+  ).find(activity => activity.kind === 'realtime')
+  t.deepEqual(
+    realtimeAfterClear && {
+      effect: realtimeAfterClear.effect,
+      queryIds: realtimeAfterClear.queryIds,
+      result: realtimeAfterClear.result,
+    },
+    realtimeBeforeClear && {
+      effect: realtimeBeforeClear.effect,
+      queryIds: realtimeBeforeClear.queryIds,
+      result: realtimeBeforeClear.result,
+    },
+  )
 
   feathers.service('notes').emit('patched', { id: 1, content: 'changed again' })
   await sleep(70)
@@ -182,6 +207,7 @@ test('collector records fetch spans and keeps event and timeline history indepen
   t.deepEqual(clearedTimeline.timeline.laneOrder, [])
   t.is(clearedTimeline.timeline.realtime.length, 0)
   t.is(clearedRow?.spans.length, 0)
+  t.is(clearedRow?.fetchHistory?.length, beforeTimelineClearRow?.fetchHistory?.length)
   t.is(clearedRow?.realtimeSeen, beforeTimelineClearRow?.realtimeSeen)
   t.is(clearedRow?.reconciles, beforeTimelineClearRow?.reconciles)
 
@@ -309,17 +335,56 @@ test('collector marks optimistic mutation failures as rolled back writes', async
   const collector = createCollector(figbird)
   collector.start()
 
-  feathers.service('notes').patch = () => Promise.reject(new Error('nope'))
+  const validationError = Object.assign(new Error('Validation Error'), {
+    name: 'ValidationError',
+    code: 422,
+    issues: [{ name: 'content', reason: 'required' }],
+  })
+  feathers.service('notes').patch = () => Promise.reject(validationError)
 
   await t.throwsAsync(figbird.m.notes.patch(1, { content: 'bad' }))
   await sleep(70)
 
-  const mutation = collector.getSnapshot().writes.find(write => write.type === 'mutation')
+  const snapshot = collector.getSnapshot()
+  const mutation = snapshot.writes.find(write => write.type === 'mutation')
   t.truthy(mutation)
   t.is(mutation?.status, 'error')
   t.true(mutation?.rolledBack)
-  t.is(mutation?.error, 'nope')
-  t.deepEqual(mutation?.args, [1, { content: 'bad' }])
+  t.is(mutation?.error, 'Validation Error')
+  t.deepEqual(mutation?.errorDetails, {
+    state: 'retained',
+    value: {
+      name: 'ValidationError',
+      message: 'Validation Error',
+      code: 422,
+      issues: [{ name: 'content', reason: 'required' }],
+    },
+  })
+  t.deepEqual(mutation?.args, {
+    state: 'retained',
+    value: [1, { content: 'bad' }],
+  })
+
+  const writeActivity = buildTimelineActivities(
+    snapshot,
+    buildDevtoolsModel(snapshot),
+    performance.now(),
+  ).find(activity => activity.kind === 'write')
+  t.is(writeActivity?.status, 'error')
+  t.is(writeActivity?.effect, 'rolled back')
+  t.deepEqual(writeActivity?.errorDetails, mutation?.errorDetails)
+
+  const mutationError = snapshot.events.find(item => item.event.kind === 'mutate:error')
+  t.deepEqual(
+    mutationError ? eventPayload(mutationError.event) : undefined,
+    mutation?.errorDetails?.state === 'retained' ? mutation.errorDetails.value : undefined,
+  )
+
+  const mutationGroup = buildActivities(snapshot.events, buildTraceIndex(snapshot.events)).find(
+    activity => activity.kind === 'mutation',
+  )
+  t.is(mutationGroup?.status, 'error')
+  t.is(mutationGroup?.tone, 'red')
 
   collector.stop()
 })
@@ -441,6 +506,11 @@ test('collector bounds inactive query and settled write history', t => {
   t.false(retainedGeneration?.present ?? true)
   t.is(retainedGeneration?.subscriberCount, 0)
 
+  const staleValidationError = Object.assign(new Error('old generation failed'), {
+    name: 'ValidationError',
+    code: 422,
+    issues: [{ name: 'title', reason: 'required' }],
+  })
   listeners.event?.({
     kind: 'realtime',
     serviceName: 'notes',
@@ -489,12 +559,22 @@ test('collector bounds inactive query and settled write history', t => {
     serviceName: 'notes',
     method: 'find',
     durationMs: 11,
-    error: new Error('old generation failed'),
+    error: staleValidationError,
   })
   const afterStaleError = collector.getSnapshot().queries.find(query => query.queryId === 'live-3')
   t.is(afterStaleError?.generation, 2)
   t.is(afterStaleError?.status, 'success')
   t.is(afterStaleError?.lastError?.generation, 1)
+  t.deepEqual(afterStaleError?.lastError?.details, {
+    state: 'retained',
+    value: {
+      name: 'ValidationError',
+      message: 'old generation failed',
+      code: 422,
+      issues: [{ name: 'title', reason: 'required' }],
+    },
+  })
+  t.deepEqual(afterStaleError?.spans.at(-1)?.errorDetails, afterStaleError?.lastError?.details)
 
   for (let mutationId = 1; mutationId <= 3; mutationId++) {
     listeners.event?.({
@@ -516,7 +596,7 @@ test('collector bounds inactive query and settled write history', t => {
   }
   t.is(collector.getSnapshot().writes.length, 2)
 
-  collector.clearWrites()
+  collector.clearTimeline()
   t.is(collector.getSnapshot().writes.length, 0)
 
   for (let mutationId = 4; mutationId <= 6; mutationId++) {
@@ -563,7 +643,10 @@ test('collector bounds inactive query and settled write history', t => {
   })
   retainedPayload.content = 'changed later'
   const retainedWrite = collector.getSnapshot().writes.find(write => write.id === 'mutation:7')
-  t.deepEqual(retainedWrite?.args, [7, { content: 'captured' }])
+  t.deepEqual(retainedWrite?.args, {
+    state: 'retained',
+    value: [7, { content: 'captured' }],
+  })
   const retainedEvent = collector
     .getSnapshot()
     .events.find(item => item.event.kind === 'mutate:start' && item.event.mutationId === 7)
@@ -580,7 +663,10 @@ test('collector bounds inactive query and settled write history', t => {
   })
   updatedPayload.content = 'changed later'
   const updatedWrite = collector.getSnapshot().writes.find(write => write.id === 'mutation:7')
-  t.deepEqual(updatedWrite?.args, [7, { content: 'coalesced' }])
+  t.deepEqual(updatedWrite?.args, {
+    state: 'retained',
+    value: [7, { content: 'coalesced' }],
+  })
 
   listeners.event?.({
     kind: 'fetch:start',
@@ -588,7 +674,16 @@ test('collector bounds inactive query and settled write history', t => {
     generation: 2,
     serviceName: 'notes',
     method: 'find',
+    fetchId: 99,
+    reason: 'retry',
   })
+  const activeSpan = collector
+    .getSnapshot()
+    .queries.find(query => query.queryId === 'live-3')
+    ?.spans.at(-1)
+  t.is(activeSpan?.fetchId, 99)
+  t.is(activeSpan?.endAt, undefined)
+  t.is(activeSpan?.reason, 'retry')
   const timelineClearStartedAt = performance.now()
   collector.clearTimeline()
   listeners.event?.({
@@ -597,6 +692,7 @@ test('collector bounds inactive query and settled write history', t => {
     generation: 2,
     serviceName: 'notes',
     method: 'find',
+    fetchId: 99,
     durationMs: 100,
     itemCount: 1,
   })
@@ -605,13 +701,85 @@ test('collector bounds inactive query and settled write history', t => {
     .queries.find(query => query.queryId === 'live-3')
     ?.spans.at(-1)
   t.true((postClearSpan?.startAt ?? 0) >= timelineClearStartedAt)
+  t.is(postClearSpan?.ok, true)
+
+  const sourceTime = Date.now() + 1_000
+  listeners.event?.({
+    kind: 'fetch:start',
+    queryId: 'timing-root',
+    generation: 1,
+    serviceName: 'teams',
+    method: 'find',
+    fetchId: 100,
+    timestamp: sourceTime,
+  })
+  listeners.event?.({
+    kind: 'fetch:start',
+    queryId: 'timing-child',
+    generation: 1,
+    serviceName: 'users',
+    method: 'find',
+    fetchId: 101,
+    timestamp: sourceTime + 25,
+  })
+  listeners.event?.({
+    kind: 'fetch:end',
+    queryId: 'timing-child',
+    generation: 1,
+    serviceName: 'users',
+    method: 'find',
+    fetchId: 101,
+    durationMs: 50,
+    itemCount: 1,
+    timestamp: sourceTime + 75,
+  })
+  listeners.event?.({
+    kind: 'fetch:end',
+    queryId: 'timing-root',
+    generation: 1,
+    serviceName: 'teams',
+    method: 'find',
+    fetchId: 100,
+    durationMs: 100,
+    itemCount: 1,
+    timestamp: sourceTime + 100,
+  })
+  const timedActivities = buildTimelineActivities(
+    collector.getSnapshot(),
+    buildDevtoolsModel(collector.getSnapshot()),
+    performance.now(),
+  )
+  const timedRoot = timedActivities.find(activity => activity.queryId === 'timing-root')
+  const timedChild = timedActivities.find(activity => activity.queryId === 'timing-child')
+  t.true(Math.abs((timedChild?.startAt ?? 0) - (timedRoot?.startAt ?? 0) - 25) < 1)
+  t.true(Math.abs((timedRoot?.endAt ?? 0) - (timedRoot?.startAt ?? 0) - 100) < 1)
 
   collector.stop()
 })
 
 test('devtools model keeps operation identity separate from shared fetch identity', t => {
-  const root = queryRecord('root', 'issues')
-  const team = queryRecord('team', 'teams')
+  const root = queryRecord('root', 'issues', {
+    spans: [
+      {
+        fetchId: 20,
+        startAt: 10.4,
+        endAt: 15,
+        ok: true,
+        graph: [{ operationId: 'rq/team', runId: 'rq/team:1', path: '(root)' }],
+      },
+    ],
+  })
+  const team = queryRecord('team', 'teams', {
+    spans: [
+      {
+        fetchId: 10,
+        startAt: 10.2,
+        endAt: 14,
+        ok: true,
+        graph: [{ operationId: 'rq/team', runId: 'rq/team:1', path: 'team' }],
+      },
+    ],
+  })
   const labels = queryRecord('labels', 'labels')
   const page1 = queryRecord('page-1', 'issues', {
     itemCount: 25,
@@ -664,9 +832,8 @@ test('devtools model keeps operation identity separate from shared fetch identit
       },
     ],
     events: [],
-    timeline: { startedAt: 0, laneOrder: [], realtime: [] },
+    timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [], traces: [] },
     writes: [],
-    inFlightWrites: 0,
   }
 
   const model = buildDevtoolsModel(snapshot)
@@ -688,6 +855,17 @@ test('devtools model keeps operation identity separate from shared fetch identit
   t.is(pages?.rootFetches[1]?.page?.request.after, 'cursor:25')
   t.false(pages ? 'queryId' in pages.summary : true)
   t.is(model.scopesByQueryId.get(root.queryId)?.length, 2)
+  const rootActivity = buildTimelineActivities(snapshot, model, 20).find(
+    activity => activity.queryId === root.queryId,
+  )
+  t.is(rootActivity?.detail, 'root')
+  t.true(rootActivity?.detailTooltip?.includes('Shared by 2 query operations') ?? false)
+  t.deepEqual(
+    buildTimelineActivities(snapshot, model, 20)
+      .filter(activity => activity.kind === 'fetch')
+      .map(activity => activity.queryId),
+    [root.queryId, team.queryId],
+  )
 })
 
 test('query details show a cursor operation as one inspectable page chain', t => {
@@ -740,36 +918,43 @@ test('query details show a cursor operation as one inspectable page chain', t =>
       },
     ],
     events: [],
-    timeline: { startedAt: 0, laneOrder: [], realtime: [] },
+    timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [], traces: [] },
     writes: [],
-    inFlightWrites: 0,
   }
   const collector: Collector = {
+    eventLimit: 500,
     start() {},
     stop() {},
     subscribe: () => () => {},
     getSnapshot: () => snapshot,
     clearEvents() {},
     clearTimeline() {},
-    clearWrites() {},
+    reset() {},
   }
 
   render(<FigbirdDevtoolsPanel collector={collector} theme='light' />)
   const row = $all('tbody tr')[0]
   t.truthy(row)
-  t.true((row?.textContent ?? '').includes('paginate(25) · cursor · 2 pages'))
+  t.is(row?.querySelectorAll('td')[1]?.textContent, 'paginate')
+  t.is(
+    row?.querySelectorAll('td')[2]?.textContent,
+    '25, {"status":"open","$sort":{"createdAt":-1}}',
+  )
   click(row!)
 
   const details = $('[aria-label="Figbird devtools"]')?.textContent ?? ''
-  t.true(details.includes('Cursor page chain'))
-  t.true(details.includes('merges stable updates'))
+  t.true(details.includes('issues.paginate(25)'))
+  t.true(details.includes('find request'))
+  t.true(details.includes('Pagination'))
+  t.true(details.includes('35 of 35 rows loaded · 2 pages · complete'))
+  t.true(details.includes('Page chain'))
   t.true(details.includes('after start · next "cursor:25"'))
   t.true(details.includes('after "cursor:25" · end'))
-  t.true(details.includes('35 total'))
+  t.false(details.includes('merges stable updates'))
   unmount()
 })
 
-test('extension bridge starts debug collection only while connected', t => {
+test('extension bridge starts debug collection only while connected', async t => {
   dom()
   const { figbird } = app()
   const inspect = figbird.inspect.bind(figbird)
@@ -778,6 +963,18 @@ test('extension bridge starts debug collection only while connected', t => {
     inspectCalls++
     return inspect()
   }
+  figbird.inspectCache = () => [
+    {
+      serviceName: 'notes',
+      entities: [
+        {
+          id: 'large',
+          queryIds: [],
+          value: { items: Array.from({ length: 50_000 }, (_, index) => index) },
+        },
+      ],
+    },
+  ]
   const subscribe = figbird.events.subscribe.bind(figbird.events)
   let eventSubscriptions = 0
   figbird.events.subscribe = listener => {
@@ -807,19 +1004,87 @@ test('extension bridge starts debug collection only while connected', t => {
   const read = bridgeState.readJson(connection!.sessionId, null)
   t.truthy(read)
   const envelope = JSON.parse(read!)
-  t.is(envelope.protocol, 2)
+  t.is(envelope.protocol, 3)
   t.true(Array.isArray(envelope.read.queries))
+  t.is(envelope.read.cache[0].entities[0].value.items.length, 201)
+  t.is(envelope.read.cache[0].entities[0].value.items.at(-1), '[49800 more items]')
   t.is(inspectCalls, 1)
   const unchanged = JSON.parse(bridgeState.readJson(connection!.sessionId, envelope.version)!)
   t.is(unchanged.version, envelope.version)
   t.is(unchanged.read, null)
   t.is(inspectCalls, 1)
+  const queryUnsubscribe = figbird
+    .queryDesc({ serviceName: 'notes', method: 'find' })
+    .subscribe(() => {})
+  await sleep(10)
+  const changed = JSON.parse(bridgeState.readJson(connection!.sessionId, envelope.version)!)
+  t.is(typeof changed.read.events[0].timestamp, 'number')
+
+  const syntheticEvent: Record<string, unknown> = {
+    type: 'click',
+    nativeEvent: new window.MouseEvent('click'),
+    target: window.document.createElement('button'),
+  }
+  syntheticEvent.self = syntheticEvent
+  const unsafePayload: Record<string, unknown> = {
+    circular: null,
+    items: Array.from({ length: 50_000 }, (_, index) => index),
+  }
+  unsafePayload.circular = unsafePayload
+  Object.defineProperty(unsafePayload, 'throwing', {
+    enumerable: true,
+    get: () => {
+      throw new Error('getter failed')
+    },
+  })
+  ;(figbird.events as FigbirdEventEmitter).emit({
+    kind: 'action:start',
+    actionId: 1,
+    name: 'unsafe click',
+    args: [syntheticEvent, unsafePayload],
+  })
+  await sleep(10)
+  const safeReadJson = bridgeState.readJson(connection!.sessionId, changed.version)
+  t.truthy(safeReadJson)
+  t.true(safeReadJson!.length < 10_000)
+  const safeRead = JSON.parse(safeReadJson!)
+  const action = safeRead.read.events.find(
+    (event: { kind: string }) => event.kind === 'action:start',
+  )
+  t.is(action.args[0], '[SyntheticEvent click]')
+  t.is(action.args[1].circular, '[Circular]')
+  t.is(action.args[1].items.length, 201)
+  t.is(action.args[1].items.at(-1), '[49800 more items]')
+  t.is(action.args[1].throwing, '[Property threw: getter failed]')
+  ;(figbird.events as FigbirdEventEmitter).emit({
+    kind: 'action:error',
+    actionId: 2,
+    name: 'validate',
+    durationMs: 12,
+    error: Object.assign(new Error('Validation Error'), {
+      name: 'ValidationError',
+      code: 422,
+      issues: [{ name: 'email', reason: 'required' }],
+    }),
+  })
+  await sleep(10)
+  const errorRead = JSON.parse(bridgeState.readJson(connection!.sessionId, safeRead.version)!)
+  const actionError = errorRead.read.events.find(
+    (event: { kind: string }) => event.kind === 'action:error',
+  )
+  t.deepEqual(actionError.error.details, {
+    name: 'ValidationError',
+    message: 'Validation Error',
+    code: 422,
+    issues: [{ name: 'email', reason: 'required' }],
+  })
+  queryUnsubscribe()
   bridgeState.disconnect(connection!.sessionId)
   t.is(eventSubscriptions, 0)
   t.is(bridgeState.readJson(connection!.sessionId, envelope.version), null)
 })
 
-test('extension session disconnects when connection finishes after stop', async t => {
+test('extension session disconnects after stop and preserves state across transient reads', async t => {
   let resolveConnect!: (connection: unknown) => void
   const connect = new Promise<unknown>(resolve => {
     resolveConnect = resolve
@@ -846,6 +1111,40 @@ test('extension session disconnects when connection finishes after stop', async
 
   t.true(expressions.some(expression => expression.includes('?.disconnect("late")')))
   t.false(expressions.some(expression => expression.includes('?.readJson(')))
+
+  let connects = 0
+  let reads = 0
+  let resets = 0
+  let publishedFrames = 0
+  const transientSession = new ExtensionSession(async expression => {
+    if (expression.endsWith('?.connect()')) {
+      connects++
+      return { instanceCount: 1, instanceId: 1, protocol: 3, sessionId: 'stable' }
+    }
+    if (expression.includes('?.readJson(')) {
+      reads++
+      if (reads === 1) throw new Error('temporary evaluation failure')
+      return '{"protocol":3,"version":1,"read":{"events":[]}}'
+    }
+    if (expression.includes('?.disconnect(')) return undefined
+    if (expression.endsWith('?.protocol')) return null
+    throw new Error(`Unexpected expression: ${expression}`)
+  })
+  transientSession.subscribeReset(() => resets++)
+  transientSession.subscribeRead(frame => {
+    publishedFrames++
+    t.deepEqual(frame.events, [])
+  })
+  transientSession.start()
+  await sleep(1_100)
+  transientSession.stop()
+
+  t.is(connects, 1)
+  t.true(reads >= 2)
+  t.true(publishedFrames >= 1)
+  t.is(resets, 0)
+  transientSession.resetForNavigation()
+  t.is(resets, 1)
 })
 
 test('extension inspection waits for picker startup before refreshing', async t => {
@@ -950,6 +1249,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
         spans: [{ startAt: timelineAt - 20, endAt: timelineAt - 10, ok: true }],
         realtimeSeen: 0,
         reconciles: 0,
+        data: [{ id: 76, title: 'Visible issue' }],
       },
       {
         queryId: 'labels',
@@ -971,6 +1271,10 @@ test('panel shows root queries and nests relation fetches in details', async t =
         spans: [{ startAt: timelineAt - 15, endAt: timelineAt - 5, ok: true }],
         realtimeSeen: 0,
         reconciles: 0,
+        data: [
+          { id: 1, issueId: 76, name: 'bug' },
+          { id: 2, issueId: 76, name: 'urgent' },
+        ],
       },
     ],
     relational: [
@@ -996,6 +1300,16 @@ test('panel shows root queries and nests relation fetches in details', async t =
           { path: '(root)', queryId: 'root' },
           { path: 'labels', queryId: 'labels' },
         ],
+        data: [
+          {
+            id: 76,
+            title: 'Visible issue',
+            labels: [
+              { id: 1, issueId: 76, name: 'bug' },
+              { id: 2, issueId: 76, name: 'urgent' },
+            ],
+          },
+        ],
       },
     ],
     events: [],
@@ -1003,9 +1317,10 @@ test('panel shows root queries and nests relation fetches in details', async t =
       startedAt: timelineAt - 25,
       laneOrder: ['query:root', 'query:labels', 'realtime:issues'],
       realtime: [{ at: timelineAt - 3, serviceName: 'issues' }],
+      connection: [],
+      traces: [],
     },
     writes: [],
-    inFlightWrites: 0,
   }
   const events = new FigbirdEventEmitter()
   const inspectedRows = snapshot.queries.map(inspectedRow)
@@ -1032,12 +1347,19 @@ test('panel shows root queries and nests relation fetches in details', async t =
 
   render(<FigbirdDevtoolsPanel collector={collector} inspection={inspection} />)
   await act(async () => {
+    const graph = {
+      operationId: inspectedRef.hash(),
+      runId: `${inspectedRef.hash()}:1`,
+    }
     events.emit({
       kind: 'fetch:start',
       queryId: 'root',
       generation: 1,
       serviceName: 'issues',
       method: 'find',
+      fetchId: 10,
+      reason: 'subscription',
+      graph: [{ ...graph, path: '(root)' }],
     })
     events.emit({
       kind: 'fetch:end',
@@ -1045,8 +1367,10 @@ test('panel shows root queries and nests relation fetches in details', async t =
       generation: 1,
       serviceName: 'issues',
       method: 'find',
+      fetchId: 10,
       durationMs: 8,
       itemCount: 1,
+      graph: [{ ...graph, path: '(root)' }],
     })
     events.emit({
       kind: 'fetch:start',
@@ -1054,6 +1378,9 @@ test('panel shows root queries and nests relation fetches in details', async t =
       generation: 1,
       serviceName: 'issueLabels',
       method: 'find',
+      fetchId: 11,
+      reason: 'subscription',
+      graph: [{ ...graph, path: 'labels' }],
     })
     events.emit({
       kind: 'fetch:end',
@@ -1061,14 +1388,28 @@ test('panel shows root queries and nests relation fetches in details', async t =
       generation: 1,
       serviceName: 'issueLabels',
       method: 'find',
+      fetchId: 11,
       durationMs: 5,
       itemCount: 2,
+      graph: [{ ...graph, path: 'labels' }],
     })
     events.emit({
       kind: 'realtime',
       serviceName: 'issues',
       type: 'patched',
       itemId: 76,
+      item: { id: 76, title: 'Updated issue' },
+    })
+    events.emit({
+      kind: 'connection:disconnected',
+      reason: 'transport close',
+      reconnecting: true,
+    })
+    events.emit({
+      kind: 'connection:reconnected',
+      attempt: 1,
+      transport: 'websocket',
+      connectionId: 'socket-2',
     })
     await Promise.resolve()
     await Promise.resolve()
@@ -1103,15 +1444,27 @@ test('panel shows root queries and nests relation fetches in details', async t =
   t.true(($all('tbody tr')[0]?.textContent ?? '').includes('1 here'))
 
   const rowText = $all('tbody tr').map(row => row.textContent ?? '')
+  const queryHeaders = $all('th').map(header => header.textContent ?? '')
+  t.deepEqual(queryHeaders, [
+    'service',
+    'operation',
+    'definition',
+    'maintenance',
+    'rows',
+    'fetch activity',
+    'last fetch',
+    'fetched',
+  ])
   t.is(rowText.length, 1)
   t.true(rowText[0]!.includes('issues'))
-  t.true(rowText[0]!.includes('find · with labels'))
+  t.true(rowText[0]!.includes('→ labels'))
+  t.false(rowText[0]!.includes('find()'))
   t.false(rowText[0]!.includes('issueLabels'))
 
-  const classHeader = $all('th').find(header => header.textContent === 'class')
-  t.true(classHeader?.getAttribute('title')?.includes('local-exact'))
+  const classHeader = $all('th').find(header => header.textContent === 'maintenance')
+  t.true(classHeader?.getAttribute('data-tooltip')?.includes('local-exact'))
   const classBadge = $all('span').find(element => element.textContent === 'local-exact')
-  t.true(classBadge?.getAttribute('title')?.includes('merge directly'))
+  t.true(classBadge?.getAttribute('data-tooltip')?.includes('merge directly'))
 
   const issuesRow = $all('tbody tr')[0]
   t.truthy(issuesRow)
@@ -1119,14 +1472,19 @@ test('panel shows root queries and nests relation fetches in details', async t =
 
   const devtoolsText = $('[aria-label="Figbird devtools"]')?.textContent ?? ''
   t.true(devtoolsText.includes('Query plan'))
+  t.true(devtoolsText.includes('Query data'))
+  t.truthy($('[aria-label="Copy Query data"]'))
+  t.true(devtoolsText.includes('Visible issue'))
   t.true(devtoolsText.includes('Parameters'))
+  t.false(devtoolsText.includes('Realtime Updates'))
+  t.false(devtoolsText.includes('Merges matching events locally'))
   t.true(devtoolsText.includes('issueLabels'))
   t.false(devtoolsText.includes('Composition'))
   t.false(devtoolsText.includes('Underlying fetches'))
   t.truthy($('[role="separator"][aria-label="Resize details pane"]'))
 
-  const rootQueryId = $all('code').find(element => element.textContent === 'root')
-  t.true(rootQueryId?.getAttribute('title')?.includes('Cache identity'))
+  const rootQueryId = $all('code').find(element => element.textContent?.includes('root'))
+  t.true(rootQueryId?.getAttribute('data-tooltip')?.includes('Cache identity'))
 
   const nestedQuery = $('[aria-label="Inspect nested query labels"]')
   t.truthy(nestedQuery)
@@ -1135,7 +1493,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
   const nestedText = $('[aria-label="Figbird devtools"]')?.textContent ?? ''
   t.true(nestedText.includes('issues.find›labels'))
   t.true(nestedText.includes('issueLabels.find · labels'))
-  t.true(nestedText.includes('2rows'))
+  t.true(nestedText.includes('2 rows'))
   t.false(nestedText.includes('issues root'))
 
   const rootBreadcrumb = $('[aria-label="Back to root query"]')
@@ -1143,13 +1501,64 @@ test('panel shows root queries and nests relation fetches in details', async t =
   click(rootBreadcrumb!)
   t.true(($('[aria-label="Figbird devtools"]')?.textContent ?? '').includes('Query plan'))
 
+  const fetchHistoryBar = $('[aria-label="8ms, success, subscription"]')
+  t.truthy(fetchHistoryBar)
+  t.true(fetchHistoryBar?.getAttribute('data-tooltip')?.includes('Trigger: subscription'))
+  click(fetchHistoryBar!)
+  const selectedFetch = $all('[data-timeline-activity="fetch"]').find(
+    row => row.getAttribute('aria-selected') === 'true',
+  )
+  t.true(selectedFetch?.textContent?.includes('issues'))
+  t.true(selectedFetch?.textContent?.includes('success'))
+  t.true(
+    ($('[aria-label="Figbird devtools"]')?.textContent ?? '').includes(
+      'Response data at fetch time',
+    ),
+  )
+  t.truthy($all('button').find(button => button.textContent?.includes('Open query root')))
+  t.true(($('[aria-label="Figbird devtools"]')?.textContent ?? '').includes('Query graph'))
+  t.true(($('[aria-label="Figbird devtools"]')?.textContent ?? '').includes('2 fetches'))
+  const nestedGraphRow = $all('button').find(
+    button =>
+      button.textContent?.includes('nested: labels') && button.textContent.includes('issueLabels'),
+  )
+  t.truthy(nestedGraphRow)
+  click(nestedGraphRow!)
+  t.true(
+    $all('[data-timeline-activity="fetch"]')
+      .find(row => row.getAttribute('aria-selected') === 'true')
+      ?.textContent?.includes('issueLabels'),
+  )
+  const showOnlyRelated = $all('button').find(button =>
+    button.textContent?.includes('Show only related'),
+  )
+  t.truthy(showOnlyRelated)
+  click(showOnlyRelated!)
+  t.is($all('[data-timeline-activity]').length, 2)
+  const showAll = $all('button').find(button => button.textContent?.includes('Show all'))
+  t.truthy(showAll)
+  click(showAll!)
+  const resumeAfterFetchNavigation = $('[aria-label="Resume live timeline"]')
+  t.truthy(resumeAfterFetchNavigation)
+  click(resumeAfterFetchNavigation!)
+
   const timelineButton = $all('button').find(button => button.textContent === 'timeline')
   t.truthy(timelineButton)
   click(timelineButton!)
   const timelineText = $('[aria-label="Figbird devtools"]')?.textContent ?? ''
-  t.true(timelineText.includes('issues.find'))
-  t.true(timelineText.includes('issueLabels.find'))
-  t.is(timelineText.match(/issues realtime/g)?.length, 1)
+  const timelineRows = $all('[data-timeline-activity]')
+  const timelineRowText = timelineRows.map(row => row.textContent ?? '')
+  t.true(timelineRowText.some(text => text.includes('issues') && text.includes('find')))
+  t.true(timelineRowText.some(text => text.includes('issueLabels') && text.includes('find')))
+  t.is(
+    timelineRows.filter(
+      row =>
+        row.getAttribute('data-timeline-activity') === 'realtime' &&
+        row.textContent?.includes('issues') &&
+        row.textContent.includes('patch'),
+    ).length,
+    1,
+  )
   t.falsy($all('button').find(button => button.textContent === '30s'))
   t.truthy($('[aria-label="Timeline overview"]'))
   t.truthy($('[aria-label="Timeline overview"] canvas'))
@@ -1161,10 +1570,30 @@ test('panel shows root queries and nests relation fetches in details', async t =
   click(liveTimelineButton!)
   t.truthy($('[aria-label="Resume live timeline"]'))
 
-  const timelineLanes = $all('[data-timeline-lane]').map(lane =>
-    lane.getAttribute('data-timeline-lane'),
+  const timelineActivities = timelineRows.map(row => row.getAttribute('data-timeline-activity'))
+  t.deepEqual(timelineActivities, ['fetch', 'fetch', 'realtime', 'connection', 'connection'])
+  t.is($all('[data-timeline-outage="offline"]').length, 1)
+  t.true(timelineText.includes('websocket'))
+
+  const eventsButton = $all('button').find(button => button.textContent === 'events')
+  t.truthy(eventsButton)
+  click(eventsButton!)
+  t.deepEqual(
+    $all('[aria-label="Event visibility"] option').map(option => option.textContent ?? ''),
+    ['Causal groups', 'Raw events'],
+  )
+  const eventHeaders = $all('[aria-label="Figbird devtools"] [style*="position: sticky"]').at(
+    -1,
+  )?.textContent
+  t.true(eventHeaders?.includes('groupserviceoperationscopestatusdetails'))
+  const realtimeEventRow = $all('[data-event-row]').find(row =>
+    row.textContent?.includes('realtime'),
   )
-  t.deepEqual(timelineLanes, ['issues.find', 'issueLabels.find', 'issues realtime'])
+  t.truthy(realtimeEventRow)
+  click(realtimeEventRow!)
+  const eventDetails = $('[aria-label="Figbird devtools"]')?.textContent ?? ''
+  t.true(eventDetails.includes('Realtime payload'))
+  t.true(eventDetails.includes('Updated issue'))
 
   const largeElement = window.document.createElement('div')
   const largeHostFiber: Record<string, unknown> = { stateNode: largeElement }
diff --git a/test/fetch-races.test.ts b/test/fetch-races.test.ts
index 42966a6c..d5b3eda6 100644
--- a/test/fetch-races.test.ts
+++ b/test/fetch-races.test.ts
@@ -1,7 +1,7 @@
 import test from 'ava'
 import { FeathersAdapter, Figbird, createSchema, service, type RetryDelay } from '../lib'
 import { FetchEventJournal, MAX_FETCH_JOURNAL_EVENTS } from '../lib/core/fetchRebase'
-import type { ProcessedRealtimeEvent } from '../lib/core/queryTypes'
+import type { ProcessedCacheEvent } from '../lib/core/queryTypes'
 import { mockFeathers, type TestItem } from './helpers'
 
 interface Note extends TestItem {
@@ -157,9 +157,10 @@ function ids(data: unknown): number[] {
   return (data as Note[]).map(note => note.id)
 }
 
-function processedEvent(itemId: number): ProcessedRealtimeEvent {
+function processedEvent(itemId: number): ProcessedCacheEvent {
   return {
-    origin: 'authoritative',
+    mode: 'server',
+    source: 'realtime',
     serviceName: 'notes',
     type: 'patched',
     item: { id: itemId },
@@ -273,7 +274,7 @@ test('a removed event that lands during a find is not resurrected', async t => {
 test('a complete-set refetch does not delete a row created during the fetch', async t => {
   const { figbird, notes } = createApp({ 1: { id: 1, content: 'one', rank: 1 } })
   const ref = figbird.queryDesc({ serviceName: 'notes', method: 'find' }, { allPages: true })
-  const processed: ProcessedRealtimeEvent[] = []
+  const processed: ProcessedCacheEvent[] = []
   const unsubProcessed = figbird.queryStore.subscribeToProcessedEvents(event => {
     processed.push(event)
   })
diff --git a/test/mutation-queue.test.ts b/test/mutation-queue.test.ts
index 7858f8d7..971c0161 100644
--- a/test/mutation-queue.test.ts
+++ b/test/mutation-queue.test.ts
@@ -29,7 +29,7 @@ test('mutation queue: buffered patches coalesce while every call projects immedi
   const mutationEvents: FigbirdEvent[] = []
   const unsubscribeMutationEvents = figbird.events.subscribe(event => mutationEvents.push(event))
   const unsubscribeEvents = figbird.queryStore.subscribeToProcessedEvents(event => {
-    if (event.origin === 'projection' && event.itemId === '1') projectionEvents += 1
+    if (event.mode === 'optimistic' && event.itemId === '1') projectionEvents += 1
   })
   const unsubscribeSettlements = figbird.queryStore.subscribeToProjectionSettlements(event => {
     if (event.itemId === '1') projectionSettlements += 1
diff --git a/test/mutations.test.ts b/test/mutations.test.ts
index 53c53791..43e356f1 100644
--- a/test/mutations.test.ts
+++ b/test/mutations.test.ts
@@ -1,5 +1,5 @@
 import test from 'ava'
-import type { QueryState } from '../lib'
+import type { FigbirdEvent, QueryState } from '../lib'
 import { createTestApp } from './helpers'
 import {
   collectEvents,
@@ -229,10 +229,12 @@ test('m: resolves service path aliases', async t => {
   t.is(patched.name, 'Grace')
 })
 
-test('mutate events carry a correlating mutationId', async t => {
+test('mutate events carry correlating mutation and causal ids', async t => {
   const { figbird } = createTestApp(schema, services())
   const { m } = figbird
   const events = collectEvents(figbird, 'mutate:')
+  const observed: FigbirdEvent[] = []
+  figbird.events.subscribe(event => observed.push(event))
 
   await m.notes.patch(1, { content: 'a' })
   await m.notes.patch(2, { content: 'b' })
@@ -243,6 +245,19 @@ test('mutate events carry a correlating mutationId', async t => {
   t.is(ids[0], ids[1], 'first start/end pair correlates')
   t.is(ids[2], ids[3], 'second start/end pair correlates')
   t.not(ids[0], ids[2], 'distinct mutations get distinct ids')
+
+  const traces = events.map(event => ('traceId' in event ? event.traceId : undefined))
+  t.is(traces[0], traces[1], 'first mutation lifecycle shares one causal trace')
+  t.is(traces[2], traces[3], 'second mutation lifecycle shares one causal trace')
+  t.not(traces[0], traces[2], 'distinct mutations get distinct causal traces')
+  t.true(
+    observed.some(event => event.kind === 'cache:updated' && event.traceId === traces[0]),
+    'the mutation cache transition joins the mutation trace',
+  )
+  t.false(
+    observed.some(event => event.kind === 'realtime'),
+    'mutation acknowledgements are not reported as realtime traffic',
+  )
 })
 
 // ----- the optimistic-create id contract -----
diff --git a/test/relational-query.test.tsx b/test/relational-query.test.tsx
index 854d8031..83ae191f 100644
--- a/test/relational-query.test.tsx
+++ b/test/relational-query.test.tsx
@@ -11,6 +11,7 @@ import {
   service,
   useFind,
   useQuery,
+  type FigbirdEvent,
   type QueryBuilder,
   type StandardSchemaV1,
 } from '../lib'
@@ -975,6 +976,8 @@ test('figbird.query: reconnect refetches active queries after missed events', as
     reconnectJitter: 0,
   })
   const peopleService = feathers.service('people')
+  const connectionKinds: string[] = []
+  const unsubscribeEvents = figbird.events.subscribe(event => connectionKinds.push(event.kind))
   const queryRef = figbird.queryDesc({
     serviceName: 'people',
     method: 'find',
@@ -1002,8 +1005,10 @@ test('figbird.query: reconnect refetches active queries after missed events', as
 
   t.is(peopleService.counts.find, initialFindCount + 1)
   t.deepEqual(latestNames, ['Alicia'])
+  t.true(connectionKinds.includes('connection:reconnected'))
 
   unsubscribe()
+  unsubscribeEvents()
 })
 
 // ============================================================================
@@ -1999,7 +2004,7 @@ class ErrorBoundary extends React.Component<
 
 test('suspense: first-mount cold shows fallback, then data', async t => {
   const { render, unmount, flush, $ } = dom()
-  const { App, figbird } = createApp()
+  const { App, figbird, feathers } = createApp()
 
   function IssueDetail() {
     const { data } = useQuery(figbird.q.issues.get(1).related('creator'))
@@ -2032,6 +2037,8 @@ test('suspense: first-mount cold shows fallback, then data', async t => {
   t.truthy($('.issue-detail'))
   t.is($('.title')!.innerHTML, 'First issue')
   t.is($('.creator')!.innerHTML, 'Alice')
+  t.is(feathers.service('issues').counts.get, 1, 'commit must reuse the cold Suspense fetch')
+  t.is(feathers.service('users').counts.find, 1, 'relations must not revalidate on commit')
 
   unmount()
 })
@@ -2951,9 +2958,16 @@ test('explain: classifies nodes with structured reasons', t => {
 
 test('inspect: stable read-only projection of live queries', async t => {
   const { figbird } = createApp()
+  const fetches: Array<Extract<FigbirdEvent, { kind: 'fetch:end' }>> = []
+  const unsubEvents = figbird.events.subscribe(event => {
+    if (event.kind === 'fetch:end') fetches.push(event)
+  })
 
   const ref = figbird.query(figbird.q.issues.related('comments'))
+  const sharedRootRef = figbird.query(figbird.q.issues.related('creator'))
   const unsub = ref.subscribe(() => {})
+  const unsubSecondSubscriber = ref.subscribe(() => {})
+  const unsubSharedRoot = sharedRootRef.subscribe(() => {})
   await new Promise(resolve => setTimeout(resolve, 10))
 
   const rows = figbird.inspect()
@@ -2965,6 +2979,36 @@ test('inspect: stable read-only projection of live queries', async t => {
   t.true(typeof issuesRow.fetchedAt === 'number')
   t.true(issuesRow.subscriberCount > 0)
 
+  const rootFetch = fetches.find(event =>
+    event.graph?.some(graph => graph.operationId === ref.hash() && graph.path === '(root)'),
+  )
+  const commentsFetch = fetches.find(event =>
+    event.graph?.some(graph => graph.operationId === ref.hash() && graph.path === 'comments'),
+  )
+  t.truthy(rootFetch)
+  t.truthy(commentsFetch)
+  t.is(rootFetch!.graph![0]!.runId, commentsFetch!.graph![0]!.runId)
+  t.is(
+    new Set(
+      fetches.flatMap(event =>
+        (event.graph ?? [])
+          .filter(graph => graph.operationId === ref.hash())
+          .map(graph => graph.runId),
+      ),
+    ).size,
+    1,
+    'a second subscriber joining an in-flight graph reuses the same run',
+  )
+  t.true(
+    rootFetch!.graph!.some(
+      graph => graph.operationId === sharedRootRef.hash() && graph.path === '(root)',
+    ),
+    'one backing root fetch records every relational operation it served',
+  )
+
+  unsubEvents()
+  unsubSharedRoot()
+  unsubSecondSubscriber()
   unsub()
 })