From 2eced48b0684cae51fc813cd3eacbea806577a8b Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 17:04:18 +0100
Subject: [PATCH 01/42] Improve devtools inspection and connection diagnostics

---
 DEVTOOLS_SPEC.md                   |  14 ++
 extensions/src/panel.tsx           |   2 +
 extensions/src/protocol.ts         |   9 +-
 extensions/src/remote.ts           |  30 +++-
 lib/adapters/adapter.ts            |  20 +++
 lib/adapters/feathers.ts           | 144 ++++++++++++++++
 lib/core/devtoolsBridge.ts         |  14 +-
 lib/core/events.ts                 |  30 +++-
 lib/core/figbird.ts                |  14 +-
 lib/core/queryStore.ts             |  46 ++++-
 lib/core/relationalQuery.ts        |   4 +
 lib/devtools/Devtools.tsx          |  43 +++--
 lib/devtools/EventsTab.tsx         | 260 ++++++++++++++++++++++++-----
 lib/devtools/QueriesTab.tsx        | 155 ++++++++++++-----
 lib/devtools/QueryDetails.tsx      |  21 +++
 lib/devtools/QueryPresentation.tsx |  15 +-
 lib/devtools/TimelineCanvas.tsx    | 149 ++++++++++++++---
 lib/devtools/TimelineOverview.tsx  |  15 +-
 lib/devtools/TimelineTab.tsx       | 128 +++++++++++++-
 lib/devtools/collector.ts          |  69 +++++++-
 lib/devtools/model.ts              |  22 ++-
 test/devtools.test.tsx             |  52 +++++-
 test/relational-query.test.tsx     |   4 +
 23 files changed, 1100 insertions(+), 160 deletions(-)

diff --git a/DEVTOOLS_SPEC.md b/DEVTOOLS_SPEC.md
index ee4ab004..523e2016 100644
--- a/DEVTOOLS_SPEC.md
+++ b/DEVTOOLS_SPEC.md
@@ -22,6 +22,20 @@ The bridge serializes values before they cross the browser DevTools evaluation b
 Errors retain their name and message, bigint values become strings, and circular values
 are marked instead of breaking the panel.
 
+## 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.
+
 ## Extension architecture
 
 ```
diff --git a/extensions/src/panel.tsx b/extensions/src/panel.tsx
index 26f26eaa..67385255 100644
--- a/extensions/src/panel.tsx
+++ b/extensions/src/panel.tsx
@@ -27,6 +27,8 @@ function Panel() {
     }
   }, [session])
 
+  useEffect(() => session.subscribeReset(() => collector.reset()), [collector, session])
+
   return (
     <FigbirdDevtoolsPanel collector={collector} inspection={session.inspection} status={status} />
   )
diff --git a/extensions/src/protocol.ts b/extensions/src/protocol.ts
index fb14196d..c049a36a 100644
--- a/extensions/src/protocol.ts
+++ b/extensions/src/protocol.ts
@@ -59,7 +59,14 @@ export function decodeEvent(event: DevtoolsWireEvent): FigbirdEvent {
   switch (event.kind) {
     case 'fetch:error':
     case 'mutate:error':
-    case 'action:error': {
+    case 'action:error':
+    case 'connection:error': {
+      const error = new Error(event.error.message)
+      error.name = event.error.name
+      return { ...event, error }
+    }
+    case 'connection:reconnect-failed': {
+      if (!event.error) return event
       const error = new Error(event.error.message)
       error.name = event.error.name
       return { ...event, error }
diff --git a/extensions/src/remote.ts b/extensions/src/remote.ts
index 4c003112..90866b4b 100644
--- a/extensions/src/remote.ts
+++ b/extensions/src/remote.ts
@@ -90,6 +90,15 @@ class RemoteFigbird implements FigbirdLikeForDevtools {
     this.#renderFrame = null
   }
 
+  reset(): void {
+    this.cancelPending()
+    this.#queries = []
+    this.#relational = []
+    this.#mutations = []
+    for (const listener of this.#stateListeners) listener(undefined)
+    for (const listener of this.#mutatingListeners) listener()
+  }
+
   #flush(): void {
     const read = this.#pending
     this.#pending = null
@@ -122,6 +131,7 @@ export class ExtensionSession {
   #statusListeners = new Set<() => void>()
   #timer: ReturnType<typeof setInterval> | null = null
   #version: number | null = null
+  #resetListeners = new Set<() => void>()
 
   constructor(evaluate: Evaluate = evaluateInspectedWindow) {
     this.#evaluate = evaluate
@@ -135,6 +145,11 @@ export class ExtensionSession {
     return () => this.#statusListeners.delete(listener)
   }
 
+  subscribeReset = (listener: () => void): (() => void) => {
+    this.#resetListeners.add(listener)
+    return () => this.#resetListeners.delete(listener)
+  }
+
   start(): void {
     if (this.#timer) return
     const generation = ++this.#generation
@@ -182,8 +197,7 @@ export class ExtensionSession {
       )
       if (generation !== this.#generation) return
       if (!poll) {
-        this.#connection = null
-        this.#version = null
+        this.#resetConnection()
         this.inspection.reset()
         this.#setStatus('Reconnecting')
         return
@@ -193,8 +207,7 @@ export class ExtensionSession {
       await this.inspection.refresh()
     } catch {
       if (generation !== this.#generation) return
-      this.#connection = null
-      this.#version = null
+      this.#resetConnection()
       this.inspection.reset()
       this.#setStatus('Cannot inspect this page')
     } finally {
@@ -202,6 +215,15 @@ export class ExtensionSession {
     }
   }
 
+  #resetConnection(): void {
+    const hadConnection = this.#connection !== null || this.#version !== null
+    this.#connection = null
+    this.#version = null
+    if (!hadConnection) return
+    this.figbird.reset()
+    for (const listener of this.#resetListeners) listener()
+  }
+
   async #disconnect(sessionId: string): Promise<void> {
     await this.#evaluate(`${BRIDGE_EXPRESSION}?.disconnect(${JSON.stringify(sessionId)})`).catch(
       () => {},
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..8f865f37 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.
@@ -633,6 +651,124 @@ export class FeathersAdapter<TQuery = Record<string, unknown>> implements Adapte
     }
   }
 
+  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 {
+        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 +887,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/devtoolsBridge.ts b/lib/core/devtoolsBridge.ts
index 4ffd99dd..80500707 100644
--- a/lib/core/devtoolsBridge.ts
+++ b/lib/core/devtoolsBridge.ts
@@ -21,9 +21,12 @@ export interface DevtoolsWireError {
   name: string
 }
 
-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>
 
@@ -222,10 +225,15 @@ function toWireEvent(event: FigbirdEvent): DevtoolsWireEvent {
     case 'fetch:error':
     case 'mutate:error':
     case 'action:error':
+    case 'connection:error':
       return {
         ...event,
         error: { message: event.error.message, name: event.error.name },
       }
+    case 'connection:reconnect-failed':
+      return event.error
+        ? { ...event, error: { message: event.error.message, name: event.error.name } }
+        : event
     default:
       return event
   }
diff --git a/lib/core/events.ts b/lib/core/events.ts
index 0055160b..8ce0e317 100644
--- a/lib/core/events.ts
+++ b/lib/core/events.ts
@@ -17,9 +17,10 @@ export type MutationEventMethod = MutationMethod | (string & {})
  * 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; no result or cache diffs are emitted, and emit() drops everything when
+ * nothing is listening.
  */
 export type FigbirdEvent =
   | {
@@ -59,7 +60,30 @@ export type FigbirdEvent =
       serviceName: string
       type: EventType
       itemId: string | number | undefined
+      item?: unknown
     }
+  | {
+      kind: 'connection:connected'
+      transport?: string
+      connectionId?: string
+    }
+  | {
+      kind: 'connection:disconnected'
+      reason?: string
+      reconnecting: boolean
+    }
+  | {
+      kind: 'connection:reconnected'
+      attempt?: number
+      transport?: string
+      connectionId?: string
+    }
+  | {
+      kind: 'connection:error'
+      phase: 'connect' | 'reconnect'
+      error: Error
+    }
+  | { kind: 'connection:reconnect-failed'; error?: Error }
   | {
       kind: 'mutate:start'
       /** Correlates the start/end/error/rollback events of one mutation. */
diff --git a/lib/core/figbird.ts b/lib/core/figbird.ts
index d595f7e2..047e9a97 100644
--- a/lib/core/figbird.ts
+++ b/lib/core/figbird.ts
@@ -287,10 +287,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()
@@ -943,8 +943,10 @@ export class Figbird<
               }
             : {}),
           classification: query.classification,
+          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
@@ -990,8 +992,12 @@ export interface InspectedQuery {
   /** Native adapter page details. Offset pages remain visible in `query` as `$skip`/`$limit`. */
   page?: { request: PageRequest; info?: PageInfo }
   classification: QueryNodeClass | 'get'
+  /** 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
diff --git a/lib/core/queryStore.ts b/lib/core/queryStore.ts
index 724b7e9e..27fedb63 100644
--- a/lib/core/queryStore.ts
+++ b/lib/core/queryStore.ts
@@ -259,7 +259,50 @@ 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 => {
+        switch (event.type) {
+          case 'connected':
+            this.#events.emit({
+              kind: 'connection:connected',
+              ...(event.transport ? { transport: event.transport } : {}),
+              ...(event.connectionId ? { connectionId: event.connectionId } : {}),
+            })
+            break
+          case 'disconnected':
+            this.#events.emit({
+              kind: 'connection:disconnected',
+              ...(event.reason ? { reason: event.reason } : {}),
+              reconnecting: event.reconnecting,
+            })
+            break
+          case 'reconnected':
+            this.#events.emit({
+              kind: 'connection:reconnected',
+              ...(event.attempt === undefined ? {} : { attempt: event.attempt }),
+              ...(event.transport ? { transport: event.transport } : {}),
+              ...(event.connectionId ? { connectionId: event.connectionId } : {}),
+            })
+            this.#scheduleReconnectSweep()
+            break
+          case 'error':
+            this.#events.emit({
+              kind: 'connection:error',
+              phase: event.phase,
+              error: event.error,
+            })
+            break
+          case 'reconnect-failed':
+            this.#events.emit({
+              kind: 'connection:reconnect-failed',
+              ...(event.error ? { error: event.error } : {}),
+            })
+            break
+        }
+      })
+    } else {
+      this.#adapter.subscribeToReconnect?.(() => this.#scheduleReconnectSweep())
+    }
   }
 
   // Public store API
@@ -1581,6 +1624,7 @@ export class QueryStore<
         serviceName,
         type,
         itemId: this.#getIdWarn(serviceName, item),
+        item,
       })
     }
   }
diff --git a/lib/core/relationalQuery.ts b/lib/core/relationalQuery.ts
index 89894ff6..5ce14d30 100644
--- a/lib/core/relationalQuery.ts
+++ b/lib/core/relationalQuery.ts
@@ -167,6 +167,8 @@ export interface InspectedRelationalQuery {
   service: string
   ast: QueryAST
   pagination?: InspectedPagination
+  /** Current assembled result when the relational query has settled successfully. */
+  data?: unknown
   nodes: Array<{
     path: string
     role?: 'junction'
@@ -317,12 +319,14 @@ export class RelationalQueryRef<
           break
       }
     }
+    const snapshot = this.getSnapshot()
     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 } : {}),
       nodes,
     }
   }
diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index 75527393..566e3c19 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -17,6 +17,7 @@ import {
 } from './ui.js'
 
 type Tab = 'queries' | 'timeline' | 'events' | 'writes'
+export type QueryVisibility = 'active' | 'all' | 'skipped'
 
 export type DevtoolsInspectionSnapshot =
   | { kind: 'idle'; version: number }
@@ -61,7 +62,7 @@ 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 [timelineFollow, setTimelineFollow] = useState(true)
 
@@ -80,8 +81,10 @@ export function FigbirdDevtoolsPanel({
   )
 
   const model = useMemo(() => buildDevtoolsModel(snapshot), [snapshot])
+  const skippedQueryCount = model.operations.filter(operation => operation.summary.skipped).length
   const timelineEmpty =
     snapshot.timeline.realtime.length === 0 &&
+    snapshot.timeline.connection.length === 0 &&
     snapshot.queries.every(query => query.spans.length === 0)
   const clearTimeline = useCallback(() => {
     collector.clearTimeline()
@@ -133,22 +136,24 @@ export function FigbirdDevtoolsPanel({
                 onChange={event => setQueryFilter(event.currentTarget.value)}
                 placeholder='Filter service or query'
               />
-              <label
+              <select
+                aria-label='Query visibility'
+                title='Skipped queries are hidden from the live view'
+                value={queryVisibility}
+                onChange={event => setQueryVisibility(event.currentTarget.value as QueryVisibility)}
                 style={{
-                  color: colors.muted,
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 5,
-                  whiteSpace: 'nowrap',
+                  ...styles.input,
+                  width: 'auto',
+                  maxWidth: 'none',
+                  paddingRight: 24,
                 }}
               >
-                <input
-                  type='checkbox'
-                  checked={queryActiveOnly}
-                  onChange={event => setQueryActiveOnly(event.currentTarget.checked)}
-                />
-                active only
-              </label>
+                <option value='active'>Live queries</option>
+                <option value='all'>All queries</option>
+                <option value='skipped'>
+                  Skipped queries{skippedQueryCount > 0 ? ` (${skippedQueryCount})` : ''}
+                </option>
+              </select>
               {inspection ? (
                 <button
                   type='button'
@@ -201,6 +206,14 @@ export function FigbirdDevtoolsPanel({
               placeholder='Filter events'
             />
           ) : null}
+          {tab === 'events' ? (
+            <span
+              title='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}
@@ -217,7 +230,7 @@ export function FigbirdDevtoolsPanel({
             <QueriesTab
               model={model}
               filter={queryFilter}
-              activeOnly={queryActiveOnly}
+              visibility={queryVisibility}
               inspectedQueryCounts={inspected?.queryCounts ?? null}
             />
           ) : null}
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index b3a80c8d..a3b3acd2 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -1,7 +1,15 @@
+import { useState, type MouseEvent as ReactMouseEvent } from 'react'
 import type { DevtoolsEvent } from './collector.js'
-import { compactJson, formatClock, formatMs } from './format.js'
+import { compactJson, formatClock, formatMs, prettyJson } from './format.js'
 import type { EventQueryScope } from './model.js'
-import { toneColor, useDevtoolsTheme } from './ui.js'
+import {
+  DetailSection,
+  DetailStat,
+  DetailsPane,
+  toneColor,
+  useDetailsPaneWidth,
+  useDevtoolsTheme,
+} from './ui.js'
 
 export function EventsTab({
   events,
@@ -13,6 +21,8 @@ export function EventsTab({
   scopes: ReadonlyMap<string, readonly EventQueryScope[]>
 }) {
   const { colors, styles } = useDevtoolsTheme()
+  const [selectedEventId, setSelectedEventId] = useState<number | null>(null)
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
   const rows = events
     .filter(item => {
       if (!filter) return true
@@ -21,54 +31,190 @@ export function EventsTab({
         .includes(filter.toLowerCase())
     })
     .reverse()
+  const selectedEvent = events.find(item => item.id === selectedEventId)
   return (
-    <div style={styles.scroll}>
+    <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
+      <div style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
+        <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.length === 0 ? (
+          <div style={{ padding: 16, color: colors.muted }}>No matching events recorded.</div>
+        ) : null}
+        {rows.map(item => {
+          const queryId = eventQueryId(item.event)
+          const queryScopes = queryId ? scopes.get(queryId) : undefined
+          const details = eventDetails(item)
+          return (
+            <div
+              key={item.id}
+              role='button'
+              tabIndex={0}
+              aria-pressed={item.id === selectedEventId}
+              title='Select event details'
+              onClick={() => setSelectedEventId(item.id)}
+              onKeyDown={event => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  setSelectedEventId(item.id)
+                }
+              }}
+              style={{
+                ...styles.eventRow,
+                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={item.event.kind} />
+              <EventScopeBadge scopes={queryScopes} queryId={queryId} />
+              <span
+                style={{
+                  ...styles.code,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                title={details}
+              >
+                {details}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+      {selectedEvent ? (
+        <EventDetails
+          item={selectedEvent}
+          width={detailsWidth}
+          onResizeStart={onDetailsResizeStart}
+          onClose={() => setSelectedEventId(null)}
+        />
+      ) : null}
+    </section>
+  )
+}
+
+function EventDetails({
+  item,
+  width,
+  onResizeStart,
+  onClose,
+}: {
+  item: DevtoolsEvent
+  width: number
+  onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
+  onClose: () => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const queryId = eventQueryId(item.event)
+  const payload = eventPayload(item.event)
+  return (
+    <DetailsPane
+      title={item.event.kind}
+      subtitle={formatClock(item.wallAt, { milliseconds: true })}
+      width={width}
+      onResizeStart={onResizeStart}
+      onClose={onClose}
+    >
       <div
         style={{
-          ...styles.eventRow,
-          position: 'sticky',
-          top: 0,
-          zIndex: 1,
-          background: colors.bg,
-          color: colors.muted,
-          fontWeight: 600,
-          borderBottom: `1px solid ${colors.border}`,
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+          gap: '8px 16px',
+          marginBottom: 16,
         }}
       >
-        <span>Time</span>
-        <span>Event</span>
-        <span>Scope</span>
-        <span>Details</span>
+        {'serviceName' in item.event ? (
+          <DetailStat label='Service' value={item.event.serviceName} />
+        ) : null}
+        {'type' in item.event ? <DetailStat label='Type' value={item.event.type} /> : null}
+        {'method' in item.event ? <DetailStat label='Method' value={item.event.method} /> : null}
+        {queryId ? <DetailStat label='Query ID' value={queryId} /> : null}
       </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} />
-            <span
-              style={{
-                ...styles.code,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-              title={details}
-            >
-              {details}
-            </span>
-          </div>
-        )
-      })}
-    </div>
+      <DetailSection label={item.event.kind === 'realtime' ? 'Realtime payload' : 'Event payload'}>
+        <pre
+          style={{
+            ...styles.code,
+            whiteSpace: 'pre-wrap',
+            overflowWrap: 'anywhere',
+            margin: 0,
+            padding: 10,
+            color: payload === undefined ? colors.faint : colors.text,
+            background: colors.panel2,
+            borderRadius: 4,
+          }}
+        >
+          {payload === undefined ? 'No payload' : prettyJson(payload)}
+        </pre>
+      </DetailSection>
+      <DetailSection label='Full event'>
+        <pre
+          style={{
+            ...styles.code,
+            whiteSpace: 'pre-wrap',
+            overflowWrap: 'anywhere',
+            margin: 0,
+            color: colors.muted,
+          }}
+        >
+          {prettyJson(displayEvent(item.event))}
+        </pre>
+      </DetailSection>
+    </DetailsPane>
   )
 }
 
+function eventPayload(event: DevtoolsEvent['event']): unknown {
+  switch (event.kind) {
+    case 'realtime':
+      return event.item
+    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 { name: event.error.name, message: event.error.message }
+    case 'connection:connected':
+    case 'connection:disconnected':
+    case 'connection:reconnected':
+    case 'connection:reconnect-failed':
+      return displayEvent(event)
+    default:
+      return undefined
+  }
+}
+
+function displayEvent(event: DevtoolsEvent['event']): unknown {
+  if ('error' in event && event.error) {
+    return { ...event, error: { name: event.error.name, message: event.error.message } }
+  }
+  return event
+}
+
 function EventScopeBadge({
   scopes,
   queryId,
@@ -162,6 +308,30 @@ function eventDetails(item: DevtoolsEvent): string {
         event.type,
         event.itemId === undefined ? '' : `#${event.itemId}`,
       ])
+    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':
@@ -218,6 +388,14 @@ function EventKind({ kind }: { kind: string }) {
 }
 
 function eventTone(kind: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
+  if (kind === 'connection:connected' || kind === 'connection:reconnected') return 'green'
+  if (
+    kind === 'connection:disconnected' ||
+    kind === 'connection:error' ||
+    kind === 'connection:reconnect-failed'
+  ) {
+    return 'red'
+  }
   if (kind.endsWith(':error') || kind.endsWith(':rollback')) return 'red'
   if (kind === 'realtime') return 'blue'
   if (kind.endsWith(':update')) return 'blue'
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 45ccfed5..29712982 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -1,4 +1,5 @@
-import { useState, type CSSProperties } from 'react'
+import { useState, type CSSProperties, type MouseEvent as ReactMouseEvent } from 'react'
+import type { QueryVisibility } from './Devtools.js'
 import { compactJson, formatAge, formatMs } from './format.js'
 import type { DevtoolsModel, DevtoolsOperation, QuerySummary } from './model.js'
 import { QueryDetails } from './QueryDetails.js'
@@ -13,42 +14,49 @@ interface QueryRow {
 const QUERY_COLUMNS = [
   {
     label: 'query',
-    width: '18%',
+    width: 250,
+    minWidth: 150,
     description:
-      'Root query operation. The dot shows its state: green active, amber cached, blue fetching, red error, or gray retained history.',
+      'Root query operation. The dot shows its state: green active, amber cached, blue fetching, red error, or gray skipped/retained history.',
   },
   {
     label: 'shape',
-    width: '38%',
+    width: 420,
+    minWidth: 180,
     description:
       'Query method, parameters, related data, and the number of underlying relation fetches.',
   },
   {
     label: 'class',
-    width: '12%',
+    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%',
+    width: 75,
+    minWidth: 55,
     description: 'Number of items currently in the query result.',
   },
   {
     label: 'fetches',
-    width: '11%',
+    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.',
   },
   {
     label: 'last',
-    width: '7%',
+    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%',
+    width: 80,
+    minWidth: 60,
     description: "Time since this query's data was last fetched.",
   },
 ] as const
@@ -56,45 +64,82 @@ const QUERY_COLUMNS = [
 export function QueriesTab({
   model,
   filter,
-  activeOnly,
+  visibility,
   inspectedQueryCounts,
 }: {
   model: DevtoolsModel
   filter: string
-  activeOnly: boolean
+  visibility: QueryVisibility
   inspectedQueryCounts: ReadonlyMap<string, number> | null
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [selectedOperationKey, setSelectedOperationKey] = useState<string | null>(null)
+  const [columnWidths, setColumnWidths] = useState<number[]>(() =>
+    QUERY_COLUMNS.map(column => column.width),
+  )
   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 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 === 'active' && query.skipped === true) return []
+      if (
+        visibility === 'active' &&
+        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 }]
+    })
+    .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 onColumnResizeStart = (index: number, event: ReactMouseEvent<HTMLSpanElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
+    const startX = event.clientX
+    const startWidth = columnWidths[index]!
+    const minWidth = QUERY_COLUMNS[index]!.minWidth
+    const onMove = (move: MouseEvent) => {
+      setColumnWidths(current =>
+        current.map((width, columnIndex) =>
+          columnIndex === index ? Math.max(minWidth, startWidth + move.clientX - startX) : width,
+        ),
+      )
     }
-    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 onUp = () => {
+      ownerWindow.removeEventListener('mousemove', onMove)
+      ownerWindow.removeEventListener('mouseup', onUp)
+    }
+    ownerWindow.addEventListener('mousemove', onMove)
+    ownerWindow.addEventListener('mouseup', onUp)
+  }
 
   const ellipsizedCode: CSSProperties = {
     ...styles.code,
@@ -108,16 +153,22 @@ export function QueriesTab({
   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}>
+              {QUERY_COLUMNS.map((column, index) => (
+                <th
+                  key={column.label}
+                  style={{ ...styles.th, position: 'sticky' }}
+                  title={column.description}
+                >
                   <span
                     style={{
                       borderBottom: `1px dotted ${colors.faint}`,
@@ -126,6 +177,24 @@ export function QueriesTab({
                   >
                     {column.label}
                   </span>
+                  {index < QUERY_COLUMNS.length - 1 ? (
+                    <span
+                      role='separator'
+                      aria-label={`Resize ${column.label} column`}
+                      aria-orientation='vertical'
+                      onMouseDown={event => onColumnResizeStart(index, event)}
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        right: -3,
+                        bottom: 0,
+                        width: 7,
+                        cursor: 'col-resize',
+                        zIndex: 2,
+                        borderRight: `1px solid ${colors.rowBorder}`,
+                      }}
+                    />
+                  ) : null}
                 </th>
               ))}
             </tr>
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index cad59264..8bcb5809 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -234,6 +234,27 @@ export function QueryDetails({
           ) : null}
         </QueryDetailSection>
       ) : null}
+      <QueryDetailSection
+        label='Query data'
+        meta={activeQuery.skipped ? 'skipped' : plural(activeQuery.itemCount, 'row', 'rows')}
+      >
+        <pre
+          style={{
+            ...styles.code,
+            maxHeight: 360,
+            overflow: 'auto',
+            whiteSpace: 'pre-wrap',
+            overflowWrap: 'anywhere',
+            margin: 0,
+            padding: 10,
+            color: activeQuery.data === undefined ? colors.faint : colors.text,
+            background: colors.panel2,
+            borderRadius: 4,
+          }}
+        >
+          {activeQuery.data === undefined ? 'No data available' : prettyJson(activeQuery.data)}
+        </pre>
+      </QueryDetailSection>
       <details
         key={activeQueryId ?? operation.key}
         style={{
diff --git a/lib/devtools/QueryPresentation.tsx b/lib/devtools/QueryPresentation.tsx
index 364b5e76..dedcc297 100644
--- a/lib/devtools/QueryPresentation.tsx
+++ b/lib/devtools/QueryPresentation.tsx
@@ -35,11 +35,13 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
       ? colors.red
       : status.kind === 'fetching'
         ? colors.blue
-        : status.kind === 'retained'
+        : status.kind === 'skipped'
           ? colors.faint
-          : status.kind === 'cached'
-            ? colors.amber
-            : colors.green
+          : status.kind === 'retained'
+            ? colors.faint
+            : status.kind === 'cached'
+              ? colors.amber
+              : colors.green
   return (
     <span
       title={status.label}
@@ -57,12 +59,15 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
 }
 
 export function queryStatus(query: QuerySummary): {
-  kind: 'active' | 'cached' | 'error' | 'fetching' | 'retained'
+  kind: 'active' | 'cached' | 'error' | 'fetching' | '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') }
   }
diff --git a/lib/devtools/TimelineCanvas.tsx b/lib/devtools/TimelineCanvas.tsx
index 5c9182b3..72ae5c9b 100644
--- a/lib/devtools/TimelineCanvas.tsx
+++ b/lib/devtools/TimelineCanvas.tsx
@@ -1,17 +1,29 @@
-import { useCallback, useLayoutEffect, useRef, useState } from 'react'
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+} 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'
+import { TimelineOverview, type TimelineViewport } from './TimelineOverview.js'
+import { toneColor, useDevtoolsTheme, type DevtoolsColors } from './ui.js'
 
 const FOLLOW_THRESHOLD = 24
 const GRID_TICK_MS = 5_000
+const DEFAULT_LABEL_WIDTH = 340
+const MIN_LABEL_WIDTH = 240
+const MAX_LABEL_WIDTH = 640
+const TIMELINE_LANE_HEIGHT = 46
 export const TIMELINE_PIXELS_PER_SECOND = 64
 
+export interface TimelineMarker {
+  at: number
+  label: string
+  tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral'
+}
+
 export type TimelineLane =
   | {
       kind: 'query'
@@ -27,9 +39,20 @@ export type TimelineLane =
       id: string
       label: string
       detail: string
+      context: string
       firstAt: number
       ticks: number[]
     }
+  | {
+      kind: 'connection'
+      id: string
+      label: string
+      detail: string
+      context: string
+      firstAt: number
+      bars: QuerySpan[]
+      markers: TimelineMarker[]
+    }
 
 export interface TimelineLayout {
   start: number
@@ -61,6 +84,7 @@ export function TimelineCanvas({
   const axisScrollRef = useRef<HTMLDivElement>(null)
   const [viewport, setViewport] = useState<TimelineViewport>({ left: 0, width: 0 })
   const [availableTrackWidth, setAvailableTrackWidth] = useState(0)
+  const [labelWidth, setLabelWidth] = useState(DEFAULT_LABEL_WIDTH)
   const hasLayout = layout !== null
   const trackWidth = layout ? Math.max(layout.trackWidth, availableTrackWidth) : undefined
   const renderedLayout: RenderedTimelineLayout | null =
@@ -85,6 +109,23 @@ export function TimelineCanvas({
         : next,
     )
   }, [trackWidth])
+  const onLabelResizeStart = (event: ReactMouseEvent<HTMLSpanElement>) => {
+    event.preventDefault()
+    const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
+    const startX = event.clientX
+    const startWidth = labelWidth
+    const onMove = (move: MouseEvent) => {
+      setLabelWidth(
+        Math.max(MIN_LABEL_WIDTH, Math.min(MAX_LABEL_WIDTH, startWidth + move.clientX - startX)),
+      )
+    }
+    const onUp = () => {
+      ownerWindow.removeEventListener('mousemove', onMove)
+      ownerWindow.removeEventListener('mouseup', onUp)
+    }
+    ownerWindow.addEventListener('mousemove', onMove)
+    ownerWindow.addEventListener('mouseup', onUp)
+  }
 
   useLayoutEffect(() => {
     const horizontalScroll = trackScrollRef.current
@@ -136,6 +177,7 @@ export function TimelineCanvas({
         layout={renderedLayout}
         nowPoint={nowPoint}
         viewport={viewport}
+        labelWidth={labelWidth}
         onNavigate={ratio => {
           const scroll = trackScrollRef.current
           if (!scroll) return
@@ -155,7 +197,7 @@ export function TimelineCanvas({
       <div
         style={{
           display: 'grid',
-          gridTemplateColumns: `${LABEL_WIDTH}px minmax(0, 1fr)`,
+          gridTemplateColumns: `${labelWidth}px minmax(0, 1fr)`,
           minHeight: 38,
           flexShrink: 0,
           background: colors.bg,
@@ -164,6 +206,7 @@ export function TimelineCanvas({
         <div
           title={`Recording started ${formatTimelineClock(renderedLayout.start, wallClockOffset, true)}`}
           style={{
+            position: 'relative',
             color: colors.muted,
             padding: '7px 10px 0',
             borderBottom: `1px solid ${colors.border}`,
@@ -171,6 +214,23 @@ export function TimelineCanvas({
           }}
         >
           <TimelineLegend />
+          <span
+            role='separator'
+            aria-label='Resize timeline labels'
+            aria-orientation='vertical'
+            title='Resize timeline labels'
+            onMouseDown={onLabelResizeStart}
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: -4,
+              bottom: 0,
+              width: 8,
+              zIndex: 3,
+              cursor: 'col-resize',
+              borderRight: `1px solid ${colors.border}`,
+            }}
+          />
         </div>
         <div
           ref={axisScrollRef}
@@ -198,7 +258,7 @@ export function TimelineCanvas({
         <div
           style={{
             display: 'grid',
-            gridTemplateColumns: `${LABEL_WIDTH}px minmax(0, 1fr)`,
+            gridTemplateColumns: `${labelWidth}px minmax(0, 1fr)`,
             alignItems: 'start',
           }}
         >
@@ -207,7 +267,7 @@ export function TimelineCanvas({
               <TimelineLaneLabel
                 key={lane.id}
                 label={lane.label}
-                {...(lane.kind === 'query' ? { context: lane.context } : {})}
+                context={lane.context}
                 detail={lane.detail}
               />
             ))}
@@ -230,8 +290,10 @@ export function TimelineCanvas({
                 <TimelineLaneTrack
                   key={lane.id}
                   layout={renderedLayout}
-                  bars={lane.kind === 'query' ? lane.bars : []}
+                  bars={lane.kind === 'query' || lane.kind === 'connection' ? lane.bars : []}
                   ticks={lane.kind === 'realtime' ? lane.ticks : []}
+                  markers={lane.kind === 'connection' ? lane.markers : []}
+                  barLabel={lane.kind === 'connection' ? 'Offline' : 'Fetch'}
                   nowPoint={nowPoint}
                   wallClockOffset={wallClockOffset}
                 />
@@ -298,7 +360,7 @@ function TimelineLegend() {
     <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' />
+      <TimelineLegendItem color={colors.red} shape='bar' label='failed / offline' />
     </span>
   )
 }
@@ -344,16 +406,37 @@ function TimelineLaneLabel({
       data-timeline-lane={label}
       style={{
         ...styles.laneLabel,
-        height: 32,
+        height: TIMELINE_LANE_HEIGHT,
         boxSizing: 'border-box',
-        paddingLeft: 10,
+        padding: '6px 10px 4px',
         borderBottom: `1px solid ${colors.rowBorder}`,
       }}
       title={detail ? `${label} ${detail}` : label}
     >
-      <span style={{ color: colors.text, fontWeight: 600 }}>{label}</span>
+      <span
+        style={{
+          display: 'block',
+          color: colors.text,
+          fontWeight: 650,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        }}
+      >
+        {label}
+      </span>
       {context ? (
-        <span style={{ color: colors.faint, marginLeft: 6, whiteSpace: 'nowrap' }}>{context}</span>
+        <span
+          style={{
+            display: 'block',
+            color: colors.faint,
+            marginTop: 3,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {context}
+        </span>
       ) : null}
     </div>
   )
@@ -363,12 +446,16 @@ function TimelineLaneTrack({
   layout,
   bars,
   ticks,
+  markers,
+  barLabel,
   nowPoint,
   wallClockOffset,
 }: {
   layout: TimelineLayout
   bars: Array<{ startAt: number; endAt?: number; ok?: boolean }>
   ticks: number[]
+  markers: TimelineMarker[]
+  barLabel: 'Fetch' | 'Offline'
   nowPoint: number
   wallClockOffset: number
 }) {
@@ -378,7 +465,7 @@ function TimelineLaneTrack({
       style={{
         ...styles.laneTrack,
         width: layout.trackWidth,
-        height: 32,
+        height: TIMELINE_LANE_HEIGHT,
         boxSizing: 'border-box',
         borderBottom: `1px solid ${colors.rowBorder}`,
         ...timelineGridStyle(colors),
@@ -392,14 +479,16 @@ function TimelineLaneTrack({
         return (
           <span
             key={`${bar.startAt}:${index}`}
-            data-timeline-fetch={bar.ok === false ? 'failed' : 'success'}
+            {...(barLabel === 'Fetch'
+              ? { 'data-timeline-fetch': bar.ok === false ? 'failed' : 'success' }
+              : { 'data-timeline-outage': 'offline' })}
             title={[
-              `${bar.ok === false ? 'Failed fetch' : 'Fetch'} · ${formatMs(barEnd - bar.startAt)}`,
+              `${barLabel === 'Offline' ? 'Offline' : bar.ok === false ? 'Failed fetch' : 'Fetch'} · ${formatMs(barEnd - bar.startAt)}`,
               formatTimelineClock(bar.startAt, wallClockOffset, true),
             ].join('\n')}
             style={{
               position: 'absolute',
-              top: 13,
+              top: 19,
               left,
               width,
               height: 8,
@@ -430,7 +519,7 @@ function TimelineLaneTrack({
           title={`Realtime event\n${formatTimelineClock(tick, wallClockOffset, true)}`}
           style={{
             position: 'absolute',
-            top: 9,
+            top: 15,
             left: timeToPixels(tick, layout.start),
             width: 7,
             height: 7,
@@ -442,6 +531,24 @@ function TimelineLaneTrack({
           }}
         />
       ))}
+      {markers.map((marker, index) => (
+        <span
+          key={`${marker.at}:${marker.label}:${index}`}
+          title={`${marker.label}\n${formatTimelineClock(marker.at, wallClockOffset, true)}`}
+          style={{
+            position: 'absolute',
+            top: 14,
+            left: timeToPixels(marker.at, layout.start),
+            width: 9,
+            height: 9,
+            marginLeft: -5,
+            borderRadius: 999,
+            background: toneColor(colors, marker.tone),
+            border: `2px solid ${colors.bg}`,
+            boxSizing: 'border-box',
+          }}
+        />
+      ))}
     </div>
   )
 }
diff --git a/lib/devtools/TimelineOverview.tsx b/lib/devtools/TimelineOverview.tsx
index 1827d0d2..2b68055d 100644
--- a/lib/devtools/TimelineOverview.tsx
+++ b/lib/devtools/TimelineOverview.tsx
@@ -2,8 +2,6 @@ import { useEffect, useRef } from 'react'
 import type { QuerySpan } from './collector.js'
 import { useDevtoolsTheme } from './ui.js'
 
-export const TIMELINE_LABEL_WIDTH = 220
-
 const OVERVIEW_HEIGHT = 42
 
 export interface TimelineViewport {
@@ -14,6 +12,7 @@ export interface TimelineViewport {
 type TimelineOverviewLane =
   | { kind: 'query'; id: string; bars: QuerySpan[] }
   | { kind: 'realtime'; id: string; ticks: number[] }
+  | { kind: 'connection'; id: string; bars: QuerySpan[]; markers: Array<{ at: number }> }
 
 interface TimelineOverviewLayout {
   start: number
@@ -25,12 +24,14 @@ export function TimelineOverview({
   layout,
   nowPoint,
   viewport,
+  labelWidth,
   onNavigate,
 }: {
   lanes: TimelineOverviewLane[]
   layout: TimelineOverviewLayout
   nowPoint: number
   viewport: TimelineViewport
+  labelWidth: number
   onNavigate: (ratio: number) => void
 }) {
   const { colors } = useDevtoolsTheme()
@@ -51,7 +52,7 @@ export function TimelineOverview({
     <div
       style={{
         display: 'grid',
-        gridTemplateColumns: `${TIMELINE_LABEL_WIDTH}px minmax(0, 1fr)`,
+        gridTemplateColumns: `${labelWidth}px minmax(0, 1fr)`,
         minHeight: OVERVIEW_HEIGHT,
         flexShrink: 0,
         borderBottom: `1px solid ${colors.border}`,
@@ -130,16 +131,18 @@ function drawOverview(
   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') {
+    if (lane.kind === 'query' || lane.kind === 'connection') {
       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)
       }
-    } else {
+    }
+    if (lane.kind === 'realtime' || lane.kind === 'connection') {
       context.fillStyle = colors.blue
-      for (const tick of lane.ticks) {
+      const ticks = lane.kind === 'realtime' ? lane.ticks : lane.markers.map(marker => marker.at)
+      for (const tick of ticks) {
         context.fillRect(timelineRatio(tick, layout) * width, top, 2, markHeight)
       }
     }
diff --git a/lib/devtools/TimelineTab.tsx b/lib/devtools/TimelineTab.tsx
index 475e7063..d844eb9f 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useMemo, useState } from 'react'
-import type { DevtoolsSnapshot, QueryRecord } from './collector.js'
-import { compactJson, now } from './format.js'
+import type { DevtoolsSnapshot, QueryRecord, TimelineConnectionEvent } from './collector.js'
+import { compactJson, formatMs, 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,
+  type TimelineMarker,
 } from './TimelineCanvas.js'
 import { buttonStyle, useDevtoolsTheme } from './ui.js'
 
@@ -26,10 +27,21 @@ type RawTimelineLane =
       kind: 'realtime'
       id: string
       label: string
+      context: string
       detail: string
       firstAt: number
       ticks: number[]
     }
+  | {
+      kind: 'connection'
+      id: string
+      label: string
+      context: string
+      detail: string
+      firstAt: number
+      bars: QueryRecord['spans']
+      markers: TimelineMarker[]
+    }
 
 export function TimelineFollowControl({
   value,
@@ -97,7 +109,14 @@ export function TimelineTab({
           kind: 'query',
           id: `query:${query.queryId}`,
           label: `${query.serviceName}.${query.method}`,
-          context: timelineScopeLabel(scopes),
+          context: [
+            timelineScopeLabel(scopes),
+            `${query.itemCount} ${query.itemCount === 1 ? 'row' : 'rows'}`,
+            `${query.fetchCount} ${query.fetchCount === 1 ? 'fetch' : 'fetches'}`,
+            query.lastDurationMs === undefined ? '' : `${formatMs(query.lastDurationMs)} last`,
+          ]
+            .filter(Boolean)
+            .join(' · '),
           detail: timelineQueryDetail(query, scopes),
           firstAt: Math.min(...query.spans.map(span => span.startAt)),
           query,
@@ -107,14 +126,23 @@ export function TimelineTab({
       kind: 'realtime',
       id: `realtime:${serviceName}`,
       label: `${serviceName} realtime`,
+      context: `${ticks.length} ${ticks.length === 1 ? 'event' : 'events'} retained`,
       detail: `All retained realtime events emitted by ${serviceName}`,
       firstAt: Math.min(...ticks),
       ticks,
     }))
-    return [...queryLanes, ...realtimeLanes]
-  }, [model.scopesByQueryId, snapshot.queries, snapshot.timeline.realtime])
+    const connectionLane = buildConnectionLane(snapshot.timeline.connection)
+    return [...queryLanes, ...realtimeLanes, ...(connectionLane ? [connectionLane] : [])]
+  }, [
+    model.scopesByQueryId,
+    snapshot.queries,
+    snapshot.timeline.connection,
+    snapshot.timeline.realtime,
+  ])
   const hasInFlight = rawLanes.some(
-    lane => lane.kind === 'query' && lane.query.spans.some(span => span.endAt === undefined),
+    lane =>
+      (lane.kind === 'query' && lane.query.spans.some(span => span.endAt === undefined)) ||
+      (lane.kind === 'connection' && lane.bars.some(span => span.endAt === undefined)),
   )
   const nowPoint = useTimelineNow(hasInFlight)
   const wallClockOffset = Date.now() - now()
@@ -178,8 +206,11 @@ function timelineLayout(
       for (const span of lane.query.spans) {
         points.push(span.startAt, span.endAt ?? nowPoint)
       }
-    } else {
+    } else if (lane.kind === 'realtime') {
       points.push(...lane.ticks)
+    } else {
+      for (const span of lane.bars) points.push(span.startAt, span.endAt ?? nowPoint)
+      points.push(...lane.markers.map(marker => marker.at))
     }
   }
   if (points.length === 0) return null
@@ -191,6 +222,89 @@ function timelineLayout(
   return { start, trackWidth }
 }
 
+function buildConnectionLane(events: TimelineConnectionEvent[]): RawTimelineLane | null {
+  if (events.length === 0) return null
+  const bars: QueryRecord['spans'] = []
+  const markers: TimelineMarker[] = []
+  let offlineStart: number | undefined
+  let latestAttempt: number | undefined
+  let lastOutageDuration: number | undefined
+
+  for (const item of events) {
+    const event = item.event
+    switch (event.kind) {
+      case 'connection:connected':
+        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'green' })
+        break
+      case 'connection:disconnected':
+        if (offlineStart === undefined) offlineStart = item.at
+        latestAttempt = undefined
+        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'red' })
+        break
+      case 'connection:reconnected':
+        latestAttempt = event.attempt
+        if (offlineStart !== undefined) {
+          lastOutageDuration = item.at - offlineStart
+          bars.push({ startAt: offlineStart, endAt: item.at, ok: false })
+          offlineStart = undefined
+        }
+        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'green' })
+        break
+      case 'connection:error':
+      case 'connection:reconnect-failed':
+        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'red' })
+        break
+    }
+  }
+  if (offlineStart !== undefined) bars.push({ startAt: offlineStart, ok: false })
+
+  const latest = events.at(-1)!.event
+  const isOffline = offlineStart !== undefined
+  const transport =
+    latest.kind === 'connection:connected' || latest.kind === 'connection:reconnected'
+      ? latest.transport
+      : undefined
+  const context = [
+    isOffline ? 'offline' : 'connected',
+    transport ?? '',
+    latestAttempt === undefined ? '' : `attempt ${latestAttempt}`,
+    !isOffline && lastOutageDuration !== undefined ? `${formatMs(lastOutageDuration)} outage` : '',
+  ]
+    .filter(Boolean)
+    .join(' · ')
+
+  return {
+    kind: 'connection',
+    id: 'connection',
+    label: 'Connection',
+    context,
+    detail: `${events.length} retained connection ${events.length === 1 ? 'event' : 'events'}`,
+    firstAt: events[0]!.at,
+    bars,
+    markers,
+  }
+}
+
+function connectionEventLabel(event: TimelineConnectionEvent['event']): string {
+  switch (event.kind) {
+    case 'connection:connected':
+      return ['Connected', event.transport].filter(Boolean).join(' · ')
+    case 'connection:disconnected':
+      return ['Disconnected', event.reason].filter(Boolean).join(' · ')
+    case 'connection:reconnected':
+      return [
+        event.attempt === undefined ? 'Reconnected' : `Reconnected on attempt ${event.attempt}`,
+        event.transport,
+      ]
+        .filter(Boolean)
+        .join(' · ')
+    case 'connection:error':
+      return `${event.phase === 'connect' ? 'Connection' : 'Reconnect'} error · ${event.error.message}`
+    case 'connection:reconnect-failed':
+      return event.error ? `Reconnection failed · ${event.error.message}` : 'Reconnection failed'
+  }
+}
+
 function timelineQueryDetail(
   query: QueryRecord,
   scopes: readonly EventQueryScope[] | undefined,
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index f3adf00e..8399f998 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -62,10 +62,28 @@ export interface TimelineRealtimeEvent {
   serviceName: string
 }
 
+type ConnectionFigbirdEvent = Extract<
+  FigbirdEvent,
+  {
+    kind:
+      | 'connection:connected'
+      | 'connection:disconnected'
+      | 'connection:reconnected'
+      | 'connection:error'
+      | 'connection:reconnect-failed'
+  }
+>
+
+export interface TimelineConnectionEvent {
+  at: number
+  event: ConnectionFigbirdEvent
+}
+
 export interface DevtoolsTimeline {
   startedAt: number
   laneOrder: string[]
   realtime: TimelineRealtimeEvent[]
+  connection: TimelineConnectionEvent[]
 }
 
 export interface WriteRecord {
@@ -96,6 +114,7 @@ export interface DevtoolsSnapshot {
 }
 
 export interface Collector {
+  readonly eventLimit: number
   start(): void
   stop(): void
   subscribe(fn: () => void): () => void
@@ -103,6 +122,7 @@ export interface Collector {
   clearEvents(): void
   clearTimeline(): void
   clearWrites(): void
+  reset(): void
 }
 
 type CapturedQueryState = Omit<
@@ -138,7 +158,7 @@ const EMPTY_SNAPSHOT: DevtoolsSnapshot = {
   queries: [],
   relational: [],
   events: [],
-  timeline: { startedAt: 0, laneOrder: [], realtime: [] },
+  timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
   writes: [],
   inFlightWrites: 0,
 }
@@ -308,6 +328,7 @@ class FigbirdCollector implements Collector {
   #relational: Map<string, InternalRelationalQuery> = new Map()
   #events: CappedBuffer<DevtoolsEvent>
   #timelineRealtime: CappedBuffer<TimelineRealtimeEvent>
+  #timelineConnection: CappedBuffer<TimelineConnectionEvent>
   #timelineStartedAt = now()
   #timelineLaneOrder: string[] = []
   #timelineLaneIds = new Set<string>()
@@ -315,14 +336,18 @@ class FigbirdCollector implements Collector {
   #realtimeByService: Map<string, number> = new Map()
   #writes: Map<string, WriteRecord> = new Map()
 
+  readonly eventLimit: number
+
   constructor(figbird: FigbirdLikeForDevtools, options: ResolvedCollectorOptions) {
     this.#figbird = figbird
     this.#heartbeatMs = options.heartbeatMs
     this.#queryHistoryLimit = options.queryHistoryLimit
     this.#spanLimit = options.spanLimit
     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)
   }
 
   start(): void {
@@ -388,6 +413,7 @@ class FigbirdCollector implements Collector {
         startedAt: this.#timelineStartedAt,
         laneOrder: [...this.#timelineLaneOrder],
         realtime: this.#timelineRealtime.toArray(),
+        connection: this.#timelineConnection.toArray(),
       },
       writes,
       inFlightWrites: this.#figbird.mutating?.getSnapshot().length ?? 0,
@@ -403,6 +429,7 @@ class FigbirdCollector implements Collector {
 
   clearTimeline(): void {
     this.#timelineRealtime.clear()
+    this.#timelineConnection.clear()
     this.#timelineStartedAt = now()
     this.#timelineLaneOrder = []
     this.#timelineLaneIds.clear()
@@ -419,6 +446,21 @@ class FigbirdCollector implements Collector {
     this.#scheduleNotify()
   }
 
+  reset(): void {
+    this.#queries.clear()
+    this.#relational.clear()
+    this.#events.clear()
+    this.#timelineRealtime.clear()
+    this.#timelineConnection.clear()
+    this.#timelineStartedAt = now()
+    this.#timelineLaneOrder = []
+    this.#timelineLaneIds.clear()
+    this.#nextEventId = 1
+    this.#realtimeByService.clear()
+    this.#writes.clear()
+    this.#scheduleNotify()
+  }
+
   #scheduleNotify(): void {
     this.#dirty = true
     if (this.#notificationScheduled) return
@@ -459,6 +501,14 @@ class FigbirdCollector implements Collector {
           (this.#realtimeByService.get(event.serviceName) ?? 0) + 1,
         )
         break
+      case 'connection:connected':
+      case 'connection:disconnected':
+      case 'connection:reconnected':
+      case 'connection:error':
+      case 'connection:reconnect-failed':
+        this.#recordTimelineLane('connection')
+        this.#timelineConnection.push({ at, event: this.#captureConnectionEvent(event) })
+        break
       case 'reconcile:started':
         {
           const record = this.#queries.get(event.queryId)
@@ -493,7 +543,11 @@ class FigbirdCollector implements Collector {
       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: snapshotValue(row.query),
+        ...(row.data === undefined ? {} : { data: snapshotValue(row.data) }),
+      }
       const capturedState = queryState(capturedRow)
       const record =
         existing ?? makeQueryRecord(capturedRow, serviceRealtime, observedAt, this.#spanLimit)
@@ -747,9 +801,12 @@ class FigbirdCollector implements Collector {
           ...event,
           ...(event.params === undefined ? {} : { params: snapshotValue(event.params) }),
         }
+      case 'realtime':
+        return { ...event, item: snapshotValue(event.item) }
       case 'fetch:error':
       case 'mutate:error':
       case 'action:error':
+      case 'connection:error':
         return { ...event, error: new Error(errorMessage(event.error)) }
       case 'mutate:start':
         return {
@@ -776,6 +833,14 @@ 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: new Error(errorMessage(event.error)) }
+    }
+    return { ...event }
+  }
+
   #trimWrites(): void {
     if (this.#writes.size <= this.#writeLimit) return
     const settled = [...this.#writes.values()]
diff --git a/lib/devtools/model.ts b/lib/devtools/model.ts
index 9697f3fa..37ea225b 100644
--- a/lib/devtools/model.ts
+++ b/lib/devtools/model.ts
@@ -87,9 +87,17 @@ export function buildDevtoolsModel(snapshot: DevtoolsSnapshot): DevtoolsModel {
       })
     }
 
+    const summary = summarizeRootFetches(rootFetches)
     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 +140,19 @@ 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,
+    skipped: roots.every(query => query.skipped === true),
     status: roots.some(query => query.status === 'error')
       ? 'error'
       : roots.some(query => query.status === 'loading')
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index c69c1cd1..8350cd40 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -664,7 +664,7 @@ test('devtools model keeps operation identity separate from shared fetch identit
       },
     ],
     events: [],
-    timeline: { startedAt: 0, laneOrder: [], realtime: [] },
+    timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
     writes: [],
     inFlightWrites: 0,
   }
@@ -740,11 +740,12 @@ 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: [] },
     writes: [],
     inFlightWrites: 0,
   }
   const collector: Collector = {
+    eventLimit: 500,
     start() {},
     stop() {},
     subscribe: () => () => {},
@@ -752,6 +753,7 @@ test('query details show a cursor operation as one inspectable page chain', t =>
     clearEvents() {},
     clearTimeline() {},
     clearWrites() {},
+    reset() {},
   }
 
   render(<FigbirdDevtoolsPanel collector={collector} theme='light' />)
@@ -950,6 +952,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 +974,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 +1003,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,6 +1020,7 @@ 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: [],
     },
     writes: [],
     inFlightWrites: 0,
@@ -1069,6 +1087,18 @@ test('panel shows root queries and nests relation fetches in details', async t =
       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()
@@ -1119,6 +1149,8 @@ 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.true(devtoolsText.includes('Visible issue'))
   t.true(devtoolsText.includes('Parameters'))
   t.true(devtoolsText.includes('issueLabels'))
   t.false(devtoolsText.includes('Composition'))
@@ -1164,7 +1196,21 @@ test('panel shows root queries and nests relation fetches in details', async t =
   const timelineLanes = $all('[data-timeline-lane]').map(lane =>
     lane.getAttribute('data-timeline-lane'),
   )
-  t.deepEqual(timelineLanes, ['issues.find', 'issueLabels.find', 'issues realtime'])
+  t.deepEqual(timelineLanes, ['issues.find', 'issueLabels.find', 'issues realtime', '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!)
+  const realtimeEventRow = $all('[title="Select event details"]').find(row =>
+    row.textContent?.includes('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/relational-query.test.tsx b/test/relational-query.test.tsx
index 854d8031..e9241e87 100644
--- a/test/relational-query.test.tsx
+++ b/test/relational-query.test.tsx
@@ -975,6 +975,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 +1004,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()
 })
 
 // ============================================================================

From 5bbc744bd6140eec59c09ef0c005a879ef8bcd76 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 17:34:43 +0100
Subject: [PATCH 02/42] Add causal tracing and cache inspection

---
 DEVTOOLS_SPEC.md                  |  27 ++
 extensions/README.md              |   4 +-
 extensions/src/panel.tsx          |   8 +-
 extensions/src/protocol.ts        |   5 +-
 extensions/src/remote.ts          |  37 ++-
 lib/core/devtoolsBridge.ts        |  40 ++-
 lib/core/events.ts                |  58 +++-
 lib/core/figbird.ts               |  62 +++-
 lib/core/mutationLanes.ts         |   4 +
 lib/core/queryStore.ts            | 454 ++++++++++++++++++++++++----
 lib/core/queryTypes.ts            |   4 +
 lib/core/relationalQuery.ts       |   5 +-
 lib/core/windowMaintenance.ts     |  22 +-
 lib/devtools/CacheTab.tsx         | 472 ++++++++++++++++++++++++++++++
 lib/devtools/Devtools.tsx         |  35 ++-
 lib/devtools/EventsTab.tsx        | 122 +++++++-
 lib/devtools/QueryDetails.tsx     |  49 ++++
 lib/devtools/TimelineCanvas.tsx   |  52 +++-
 lib/devtools/TimelineOverview.tsx |   8 +-
 lib/devtools/TimelineTab.tsx      |  42 ++-
 lib/devtools/collector.ts         |  78 ++++-
 lib/devtools/model.ts             |   4 +
 lib/index.ts                      |   8 +-
 test/fetch-races.test.ts          |   1 +
 24 files changed, 1492 insertions(+), 109 deletions(-)
 create mode 100644 lib/devtools/CacheTab.tsx

diff --git a/DEVTOOLS_SPEC.md b/DEVTOOLS_SPEC.md
index 523e2016..85f5974a 100644
--- a/DEVTOOLS_SPEC.md
+++ b/DEVTOOLS_SPEC.md
@@ -36,6 +36,33 @@ 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.
+
+## 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
 
 ```
diff --git a/extensions/README.md b/extensions/README.md
index 09e6a022..d701a08f 100644
--- a/extensions/README.md
+++ b/extensions/README.md
@@ -65,7 +65,9 @@ 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.
+- 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 67385255..8ef97638 100644
--- a/extensions/src/panel.tsx
+++ b/extensions/src/panel.tsx
@@ -8,6 +8,7 @@ import { ExtensionSession } from './remote.js'
 function Panel() {
   const session = useMemo(() => new ExtensionSession(), [])
   const collector = useMemo(() => createCollector(session.figbird, { heartbeatMs: 0 }), [session])
+  const cacheEditor = useMemo(() => ({ update: session.editCacheEntity }), [session])
   const status = useSyncExternalStore(session.subscribeStatus, session.getStatus, session.getStatus)
 
   useEffect(() => {
@@ -30,7 +31,12 @@ function Panel() {
   useEffect(() => session.subscribeReset(() => collector.reset()), [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 c049a36a..9b8f6dec 100644
--- a/extensions/src/protocol.ts
+++ b/extensions/src/protocol.ts
@@ -9,6 +9,7 @@ interface WireEnvelopeShape {
   protocol: 2
   version: number
   read: {
+    cache?: unknown[]
     events: unknown[]
     inFlightMutations: unknown[]
     queries: unknown[]
@@ -50,7 +51,9 @@ export function parseWireRead(value: unknown): ParsedWireRead | null {
   // Protocol 2 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, cache: envelope.read.cache ?? [] } as unknown as DevtoolsWireRead)
+      : null,
     version: envelope.version,
   }
 }
diff --git a/extensions/src/remote.ts b/extensions/src/remote.ts
index 90866b4b..331744a0 100644
--- a/extensions/src/remote.ts
+++ b/extensions/src/remote.ts
@@ -1,5 +1,5 @@
 import type { FigbirdEvent, FigbirdEvents } from '../../lib/core/events.js'
-import type { InspectedQuery } from '../../lib/core/figbird.js'
+import type { InspectedCacheService, 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'
@@ -22,6 +22,7 @@ interface InspectedWindowApi {
 declare const chrome: { devtools: { inspectedWindow: InspectedWindowApi } }
 
 class RemoteFigbird implements FigbirdLikeForDevtools {
+  #cache: InspectedCacheService[] = []
   #eventListeners = new Set<(event: FigbirdEvent) => void>()
   #mutatingListeners = new Set<() => void>()
   #mutations: readonly InFlightMutation[] = []
@@ -51,6 +52,10 @@ class RemoteFigbird implements FigbirdLikeForDevtools {
     return this.#queries
   }
 
+  inspectCache(): InspectedCacheService[] {
+    return this.#cache
+  }
+
   inspectRelational(): InspectedRelationalQuery[] {
     return this.#relational
   }
@@ -93,6 +98,7 @@ class RemoteFigbird implements FigbirdLikeForDevtools {
   reset(): void {
     this.cancelPending()
     this.#queries = []
+    this.#cache = []
     this.#relational = []
     this.#mutations = []
     for (const listener of this.#stateListeners) listener(undefined)
@@ -108,6 +114,7 @@ class RemoteFigbird implements FigbirdLikeForDevtools {
       fetchedAt: query.fetchedAt,
       query: query.query,
     }))
+    this.#cache = read.cache
     this.#relational = read.relational
     this.#mutations = read.inFlightMutations
     for (const event of read.events) {
@@ -150,6 +157,25 @@ export class ExtensionSession {
     return () => this.#resetListeners.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
     const generation = ++this.#generation
@@ -237,6 +263,15 @@ export class ExtensionSession {
   }
 }
 
+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> {
   return new Promise((resolve, reject) => {
     chrome.devtools.inspectedWindow.eval(expression, (result, exceptionInfo) => {
diff --git a/lib/core/devtoolsBridge.ts b/lib/core/devtoolsBridge.ts
index 80500707..17215ad7 100644
--- a/lib/core/devtoolsBridge.ts
+++ b/lib/core/devtoolsBridge.ts
@@ -1,5 +1,5 @@
 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 { CappedBuffer } from './cappedBuffer.js'
@@ -12,7 +12,13 @@ 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
 }
 
@@ -43,6 +49,7 @@ export interface DevtoolsBridgeConnection {
 }
 
 export interface DevtoolsWireRead {
+  cache: InspectedCacheService[]
   events: DevtoolsWireEvent[]
   inFlightMutations: readonly InFlightMutation[]
   queries: DevtoolsWireQuery[]
@@ -67,6 +74,12 @@ interface DevtoolsPageBridge {
   protocol: 2
   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
 }
@@ -109,7 +122,9 @@ function isPageBridge(value: unknown): value is DevtoolsPageBridge {
     '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'
   )
 }
 
@@ -177,6 +192,26 @@ function createPageBridge(): DevtoolsPageBridge {
       closeSession(sessionId)
     },
 
+    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.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
@@ -188,6 +223,7 @@ function createPageBridge(): DevtoolsPageBridge {
         protocol: 2,
         version: session.version,
         read: {
+          cache: session.source.inspectCache(),
           events: session.events.drain().map(toWireEvent),
           inFlightMutations: session.source.mutating.getSnapshot(),
           queries: session.source.inspect(),
diff --git a/lib/core/events.ts b/lib/core/events.ts
index 8ce0e317..2b510e9e 100644
--- a/lib/core/events.ts
+++ b/lib/core/events.ts
@@ -13,14 +13,29 @@ export type MutationMethod = 'create' | 'update' | 'patch' | 'remove'
 // oxlint-disable-next-line @typescript-eslint/no-empty-object-type
 export type MutationEventMethod = MutationMethod | (string & {})
 
+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 }
+
+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 bounded by consumers. Realtime events and mutation/action
  * starts carry their original payloads so an attached devtool can inspect what
- * happened; no result or cache diffs are emitted, and emit() drops everything when
- * nothing is listening.
+ * happened. Cache transitions may include before/after values for attached devtools,
+ * and emit() drops everything when nothing is listening.
  */
 export type FigbirdEvent =
   | {
@@ -29,6 +44,10 @@ export type FigbirdEvent =
       method: 'find' | 'get'
       queryId: string
       generation: number
+      fetchId?: number
+      reason?: FetchReason
+      attempt?: number
+      causes?: readonly TraceCause[]
       resourceId?: string | number
       params?: unknown
     }
@@ -38,6 +57,7 @@ export type FigbirdEvent =
       method: 'find' | 'get'
       queryId: string
       generation: number
+      fetchId?: number
       durationMs: number
       itemCount: number
     }
@@ -47,6 +67,7 @@ export type FigbirdEvent =
       method: 'find' | 'get'
       queryId: string
       generation: number
+      fetchId?: number
       durationMs: number
       error: Error
     }
@@ -54,36 +75,67 @@ export type FigbirdEvent =
       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'; error?: Error }
+  | { kind: 'connection:reconnect-failed'; traceId?: number; error?: Error }
   | {
       kind: 'mutate:start'
       /** Correlates the start/end/error/rollback events of one mutation. */
diff --git a/lib/core/figbird.ts b/lib/core/figbird.ts
index 047e9a97..3efa443a 100644
--- a/lib/core/figbird.ts
+++ b/lib/core/figbird.ts
@@ -29,11 +29,19 @@ 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 ReconnectJitter,
   type RetryDelay,
   type VisibilitySource,
@@ -927,6 +935,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,6 +960,13 @@ 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,
@@ -964,6 +988,28 @@ export class Figbird<
     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.
@@ -992,6 +1038,8 @@ 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'
@@ -1006,3 +1054,15 @@ export interface InspectedQuery {
   lastDurationMs?: number
   totalDurationMs: number
 }
+
+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..244acae9 100644
--- a/lib/core/mutationLanes.ts
+++ b/lib/core/mutationLanes.ts
@@ -171,6 +171,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
       if (eventItem !== null && eventItem !== undefined) {
         authoritativeEvent = {
           origin: 'authoritative',
+          source: 'mutation',
           serviceName: state.serviceName,
           type,
           item: eventItem,
@@ -216,6 +217,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
       projection: this.#reproject(state),
       event: {
         origin: 'authoritative',
+        source: 'realtime',
         serviceName: state.serviceName,
         type,
         item,
@@ -272,6 +274,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
         if (!lane.lastPresent) continue
         events.push({
           origin: 'projection',
+          source: 'optimistic',
           serviceName,
           type: 'removed',
           item: lane.lastPresent,
@@ -282,6 +285,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
       } else {
         events.push({
           origin: 'projection',
+          source: 'optimistic',
           serviceName,
           type: lane.base === ABSENT ? 'created' : 'patched',
           item: lane.visible,
diff --git a/lib/core/queryStore.ts b/lib/core/queryStore.ts
index 27fedb63..cce273e2 100644
--- a/lib/core/queryStore.ts
+++ b/lib/core/queryStore.ts
@@ -7,7 +7,7 @@ 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 { FigbirdEventEmitter, type FetchReason, type TraceCause } from './events.js'
 import { MutationTracker } from './mutationTracker.js'
 import { GatedMutationAttempt } from './gatedMutationAttempt.js'
 import {
@@ -101,6 +101,20 @@ function resolveCreateOptimisticItem(desc: CreateMutationDescriptor): unknown {
   return optimistic == null || typeof optimistic === 'boolean' ? desc.data : optimistic
 }
 
+function mergeTraceCauses(
+  current: readonly TraceCause[],
+  next: readonly TraceCause[],
+): TraceCause[] {
+  const keyed = new Map<string, TraceCause>()
+  for (const cause of [...current, ...next]) {
+    const key = `${cause.kind}:${cause.traceId}${
+      cause.kind === 'mutation' ? `:${cause.mutationId ?? ''}` : ''
+    }`
+    keyed.set(key, cause)
+  }
+  return [...keyed.values()]
+}
+
 interface MutationTrackingEntry {
   serviceName: string
   method: string
@@ -129,11 +143,18 @@ interface QueuedMutation {
 interface AppliedEventEffect {
   event: ProcessedRealtimeEvent
   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[]
 }
 
 type LaneAuthoritativeAcceptance =
@@ -146,6 +167,12 @@ export interface QueryFetchStats {
   totalDurationMs: number
 }
 
+export interface DevtoolsCacheEditResult {
+  ok: boolean
+  error?: string
+  traceId?: number
+}
+
 function documentVisibility(): VisibilitySource {
   return {
     isHidden: () => typeof document !== 'undefined' && document.visibilityState === 'hidden',
@@ -181,6 +208,9 @@ export class QueryStore<
   #queryGenerations: Map<string, number> = new Map()
   #queryStats: Map<string, QueryFetchStats> = new Map()
   #nextQueryGeneration = 1
+  #nextTraceId = 1
+  #nextFetchId = 1
+  #followupFetchContexts = new Map<string, FetchContext>()
 
   #fetchEventJournal = new FetchEventJournal()
   #mutationLanes: MutationLanes<QueuedMutation>
@@ -191,9 +221,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[]> = new Map()
 
   #defaultSort: Record<string, number> | undefined
   #retry: number | false
@@ -261,10 +291,12 @@ export class QueryStore<
     this.#visibility.onChange(() => this.#drainDeferredReconciles())
     if (this.#adapter.subscribeToConnectionEvents) {
       this.#adapter.subscribeToConnectionEvents(event => {
+        const traceId = this.#nextTraceId++
         switch (event.type) {
           case 'connected':
             this.#events.emit({
               kind: 'connection:connected',
+              traceId,
               ...(event.transport ? { transport: event.transport } : {}),
               ...(event.connectionId ? { connectionId: event.connectionId } : {}),
             })
@@ -272,6 +304,7 @@ export class QueryStore<
           case 'disconnected':
             this.#events.emit({
               kind: 'connection:disconnected',
+              traceId,
               ...(event.reason ? { reason: event.reason } : {}),
               reconnecting: event.reconnecting,
             })
@@ -279,15 +312,17 @@ export class QueryStore<
           case 'reconnected':
             this.#events.emit({
               kind: 'connection:reconnected',
+              traceId,
               ...(event.attempt === undefined ? {} : { attempt: event.attempt }),
               ...(event.transport ? { transport: event.transport } : {}),
               ...(event.connectionId ? { connectionId: event.connectionId } : {}),
             })
-            this.#scheduleReconnectSweep()
+            this.#scheduleReconnectSweep(traceId)
             break
           case 'error':
             this.#events.emit({
               kind: 'connection:error',
+              traceId,
               phase: event.phase,
               error: event.error,
             })
@@ -295,13 +330,14 @@ export class QueryStore<
           case 'reconnect-failed':
             this.#events.emit({
               kind: 'connection:reconnect-failed',
+              traceId,
               ...(event.error ? { error: event.error } : {}),
             })
             break
         }
       })
     } else {
-      this.#adapter.subscribeToReconnect?.(() => this.#scheduleReconnectSweep())
+      this.#adapter.subscribeToReconnect?.(() => this.#scheduleReconnectSweep(this.#nextTraceId++))
     }
   }
 
@@ -326,6 +362,82 @@ 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 traceId = this.#nextTraceId++
+    const queryEffects = new Map<string, 'merged' | 'reconcile'>()
+    const event: ProcessedRealtimeEvent = {
+      origin: 'authoritative',
+      source: 'devtools',
+      traceId,
+      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.#events.emit({
+      kind: 'cache:updated',
+      traceId,
+      source: 'devtools',
+      serviceName,
+      type: 'patched',
+      itemId,
+      item,
+      previousItem,
+      queryEffects: [...queryEffects].map(([queryId, outcome]) => ({ queryId, outcome })),
+    })
+    return { ok: true, 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
@@ -496,17 +608,24 @@ export class QueryStore<
         !isFresh) ||
       (q.state.status === 'error' && !q.state.isFetching)
     ) {
-      this.#queue(queryId)
+      this.#queue(queryId, {
+        reason: 'subscription',
+        causes: [{ kind: 'subscription', traceId: this.#nextTraceId++ }],
+      })
     }
   }
 
   /** Refetch a specific query by id. */
-  refetch(queryId: string): void {
+  refetch(queryId: string, context?: FetchContext): void {
     const q = this.#getQuery(queryId)
     if (!q) return
+    const fetchContext = context ?? {
+      reason: 'manual' as const,
+      causes: [{ kind: 'manual' as const, traceId: this.#nextTraceId++ }],
+    }
 
     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) => {
@@ -515,6 +634,7 @@ export class QueryStore<
           dirty: true,
         })
       })
+      this.#followupFetchContexts.set(queryId, fetchContext)
     }
   }
 
@@ -1010,14 +1130,22 @@ export class QueryStore<
   }
 
   // Query lifecycle
-  async #queue(queryId: string): Promise<void> {
+  async #queue(queryId: string, context?: FetchContext): Promise<void> {
+    const fetchContext = context ?? {
+      reason: 'subscription' as const,
+      causes: [{ kind: 'subscription' as const, traceId: this.#nextTraceId++ }],
+    }
     this.#fetching({ queryId })
     const generation = this.#queryGenerations.get(queryId)
     if (generation === undefined) return
 
     let retryAttempt = 0
     while (true) {
-      const outcome = await this.#runFetchAttempt(queryId, generation)
+      const outcome = await this.#runFetchAttempt(queryId, generation, {
+        reason: retryAttempt === 0 ? fetchContext.reason : 'retry',
+        attempt: retryAttempt,
+        causes: fetchContext.causes,
+      })
       if (outcome.kind !== 'failed') return
 
       const query = this.#getQuery(queryId)
@@ -1046,13 +1174,18 @@ export class QueryStore<
     }
   }
 
-  async #runFetchAttempt(queryId: string, generation: number): Promise<FetchAttemptOutcome> {
+  async #runFetchAttempt(
+    queryId: string,
+    generation: number,
+    context: { reason: FetchReason; attempt: number; causes: TraceCause[] },
+  ): Promise<FetchAttemptOutcome> {
     const query = this.#getQuery(queryId)
     if (!query || this.#queryGenerations.get(queryId) !== generation) {
       return { kind: 'stale' }
     }
 
     const startedAt = Date.now()
+    const fetchId = this.#nextFetchId++
     const trace = {
       generation,
       serviceName: query.desc.serviceName,
@@ -1067,6 +1200,10 @@ export class QueryStore<
       method: trace.method,
       queryId,
       generation,
+      fetchId,
+      reason: context.reason,
+      attempt: context.attempt,
+      ...(context.causes.length > 0 ? { causes: context.causes } : {}),
       ...('resourceId' in trace ? { resourceId: trace.resourceId } : {}),
       params: trace.params,
     })
@@ -1080,7 +1217,13 @@ export class QueryStore<
         if (journal.overflowed) {
           this.#discardFetchedResponse(queryId)
         } else {
-          this.#fetched({ queryId, result, journalEvents: journal.events })
+          const cacheTraceId = context.causes[0]?.traceId
+          this.#fetched({
+            queryId,
+            result,
+            journalEvents: journal.events,
+            ...(cacheTraceId === undefined ? {} : { traceId: cacheTraceId }),
+          })
         }
         this.#recordFetchStats(queryId, { ok: true, durationMs })
       }
@@ -1093,6 +1236,7 @@ export class QueryStore<
         method: trace.method,
         queryId,
         generation,
+        fetchId,
         durationMs,
         itemCount,
       })
@@ -1112,6 +1256,7 @@ export class QueryStore<
         method: trace.method,
         queryId,
         generation,
+        fetchId,
         durationMs,
         error,
       })
@@ -1141,6 +1286,15 @@ export class QueryStore<
     )
   }
 
+  #takeFollowupFetchContext(queryId: string): FetchContext {
+    const context = this.#followupFetchContexts.get(queryId) ?? {
+      reason: 'follow-up' as const,
+      causes: [{ kind: 'fetch-rebase' as const, traceId: this.#nextTraceId++ }],
+    }
+    this.#followupFetchContexts.delete(queryId)
+    return context
+  }
+
   #resolveRetryDelay(delay: RetryDelay, attempt: number, error: Error): number {
     return resolveRetryDelay(
       () => (typeof delay === 'function' ? delay(attempt, error) : delay),
@@ -1304,10 +1458,12 @@ export class QueryStore<
     queryId,
     result,
     journalEvents,
+    traceId,
   }: {
     queryId: string
     result: StoreResponse<TMeta>
     journalEvents: readonly ProcessedRealtimeEvent[]
+    traceId?: number
   }): void {
     let shouldRefetch = false
     let hadEffectiveJournalEvents = false
@@ -1415,6 +1571,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) {
+                eventEffects.push({
+                  event: {
+                    origin: 'authoritative',
+                    source: 'fetch',
+                    serviceName: query.desc.serviceName,
+                    type: currentItem === undefined ? 'created' : 'updated',
+                    item,
+                    previousItem: currentItem ?? null,
+                    itemId: key,
+                    ...(traceId === undefined ? {} : { traceId }),
+                  },
+                  reconcileQueryIds: new Set(),
+                  queryEffects: new Map([[queryId, 'merged']]),
+                  observabilityOnly: true,
+                })
+              }
             }
           }
           addQueryToItemIndex(service, itemId, queryId)
@@ -1473,7 +1646,9 @@ export class QueryStore<
           ...this.#updateQueriesForEvents({
             service,
             serviceName: query.desc.serviceName,
-            processedEvents: diffEvents,
+            processedEvents: diffEvents.map(event =>
+              traceId === undefined ? event : { ...event, traceId },
+            ),
             touch,
             excludeQueryId: queryId,
           }),
@@ -1511,7 +1686,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.
@@ -1521,6 +1696,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)! }
+          : {}),
       })
     }
   }
@@ -1550,7 +1728,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))
     }
   }
 
@@ -1567,7 +1745,10 @@ 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,
+      causes: [{ kind: 'fetch-rebase', traceId: this.#nextTraceId++ }],
+    })
     // An immediate reconciliation has already restored isFetching=true; hidden
     // or inactive queries expose the settled state and remain pending instead.
     this.#notify(touched)
@@ -1617,26 +1798,38 @@ export class QueryStore<
     this.#realtime.add(serviceName)
   }
 
-  #emitRealtimeForItems(serviceName: string, type: Event['type'], items: unknown[]): void {
+  #emitRealtimeForItems(serviceName: string, type: Event['type'], items: unknown[]): number[] {
+    const traceIds: number[] = []
     for (const item of items) {
+      const traceId = this.#nextTraceId++
+      traceIds.push(traceId)
       this.#events.emit({
         kind: 'realtime',
+        traceId,
         serviceName,
         type,
         itemId: this.#getIdWarn(serviceName, item),
         item,
       })
     }
+    return traceIds
   }
 
   /** Push an authoritative event onto the atomic queue. */
-  #enqueueAuthoritativeEvent(serviceName: string, event: Event): void {
+  #enqueueAuthoritativeEvent(
+    serviceName: string,
+    event: Event,
+    source: 'realtime' | 'mutation',
+    traceId: number,
+  ): void {
     const items = Array.isArray(event.item) ? event.item : [event.item]
     this.#eventQueue.push({
       origin: 'authoritative',
+      source,
       serviceName,
       type: event.type,
       items,
+      traceIds: [traceId],
     })
   }
 
@@ -1645,6 +1838,7 @@ export class QueryStore<
     if (!event) return null
     return {
       origin: 'projection',
+      source: 'optimistic',
       serviceName: change.lane.serviceName,
       type: event.type,
       items: Array.isArray(event.item) ? event.item : [event.item],
@@ -1654,21 +1848,31 @@ export class QueryStore<
 
   /** Apply an event immediately — used for mutation results and optimistic writes. */
   #processEvent(serviceName: string, event: Event): void {
-    this.#ingestAuthoritativeEvent(serviceName, event, true)
+    this.#ingestAuthoritativeEvent(serviceName, event, true, 'mutation')
   }
 
   /** Queue a realtime event for batched processing. */
   #queueEvent(serviceName: string, event: Event): void {
-    this.#ingestAuthoritativeEvent(serviceName, event, false)
+    this.#ingestAuthoritativeEvent(serviceName, event, false, 'realtime')
   }
 
-  #ingestAuthoritativeEvent(serviceName: string, event: Event, immediate: boolean): void {
+  #ingestAuthoritativeEvent(
+    serviceName: string,
+    event: Event,
+    immediate: boolean,
+    source: 'realtime' | 'mutation',
+  ): void {
     const items = Array.isArray(event.item) ? event.item : [event.item]
-    this.#emitRealtimeForItems(serviceName, event.type, items)
-    for (const item of items) {
+    const traceIds = this.#emitRealtimeForItems(serviceName, event.type, items)
+    for (const [index, item] of items.entries()) {
       const accepted = this.#acceptLaneAuthoritative(serviceName, event.type, item)
       if (!accepted.handled) {
-        this.#enqueueAuthoritativeEvent(serviceName, { type: event.type, item })
+        this.#enqueueAuthoritativeEvent(
+          serviceName,
+          { type: event.type, item },
+          source,
+          traceIds[index]!,
+        )
         continue
       }
       if (accepted.projection) this.#applyProjection(accepted.projection, false)
@@ -1759,7 +1963,7 @@ export class QueryStore<
     const getId = this.#getIdReader(serviceName)
     return processedEvents.map(event => {
       const reconcileQueryIds = new Set<string>()
-      updateQueriesFromEvents({
+      const queryEffects = updateQueriesFromEvents({
         service,
         appliedItems: [event],
         touch,
@@ -1770,7 +1974,7 @@ export class QueryStore<
         ...(excludeQueryId ? { excludeQueryId } : {}),
         defaultSort: this.#defaultSort,
       })
-      return { event, reconcileQueryIds }
+      return { event, reconcileQueryIds, queryEffects }
     })
   }
 
@@ -1780,12 +1984,35 @@ 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 traceIds = new Map<ProcessedRealtimeEvent, number>()
+    const hasAuthoritative =
+      refetchPolicy === 'realtime' &&
+      effects.some(effect => effect.event.origin === 'authoritative')
+    const addReconcile = (queryId: string, cause: TraceCause | null) => {
+      immediateReconciles.add(queryId)
+      if (!cause) return
+      const current = reconcileCauses.get(queryId) ?? []
+      reconcileCauses.set(queryId, mergeTraceCauses(current, [cause]))
+    }
+
+    for (const { event, reconcileQueryIds, queryEffects, observabilityOnly } of effects) {
+      const traceId = event.traceId ?? this.#nextTraceId++
+      traceIds.set(event, traceId)
+      if (observabilityOnly) continue
+      const cause: TraceCause | null =
+        event.source === 'realtime'
+          ? { kind: 'realtime', traceId }
+          : event.source === 'mutation' || event.source === 'optimistic'
+            ? { kind: 'mutation', traceId }
+            : event.source === 'fetch'
+              ? { kind: 'fetch-rebase', traceId }
+              : null
       const deferred =
         event.origin === 'projection' &&
         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
@@ -1796,26 +2023,44 @@ export class QueryStore<
         !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.origin === 'authoritative') {
+          for (const queryId of refetchableQueryIds) {
+            queryEffects.set(queryId, 'reconcile')
+            addReconcile(queryId, cause)
+          }
+        } else if (!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) {
+      this.#events.emit({
+        kind: 'cache:updated',
+        traceId: traceIds.get(event)!,
+        source: event.source,
+        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 }
   }
 
   /** Publish an authoritative transition whose entity-cache effect already happened. */
@@ -1831,8 +2076,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 {
@@ -1897,9 +2147,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 {
@@ -1927,10 +2180,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 []
@@ -1958,21 +2207,31 @@ 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 = mergeTraceCauses([], 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,
+        mergeTraceCauses(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', causes: mergedCauses })
       return
     }
 
@@ -1980,25 +2239,36 @@ 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,
+        causes: [],
+      })
+      this.#emitReconcileDecision(queryId, 'fetch-now', mergedCauses)
+      this.#emitReconcileStarted(queryId, mergedCauses)
+      this.refetch(queryId, { reason: 'reconcile', causes: mergedCauses })
       return
     }
 
+    window.causes = mergeTraceCauses(window.causes, mergedCauses)
+    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
+          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, { causes: trailingCauses })
       },
       window.lastAt + this.#reconcileCooldown - now,
     )
@@ -2007,10 +2277,32 @@ export class QueryStore<
     window.trailing = timer
   }
 
-  #emitReconcileStarted(queryId: string): void {
+  #emitReconcileDecision(
+    queryId: string,
+    decision: 'fetch-now' | 'coalesced' | 'deferred-hidden' | 'inactive',
+    causes: readonly TraceCause[],
+  ): void {
+    const serviceName = this.#serviceNamesByQueryId.get(queryId)
+    if (serviceName !== undefined) {
+      this.#events.emit({
+        kind: 'reconcile:decision',
+        queryId,
+        serviceName,
+        decision,
+        ...(causes.length > 0 ? { causes } : {}),
+      })
+    }
+  }
+
+  #emitReconcileStarted(queryId: string, causes: readonly TraceCause[]): void {
     const serviceName = this.#serviceNamesByQueryId.get(queryId)
     if (serviceName !== undefined) {
-      this.#events.emit({ kind: 'reconcile:started', queryId, serviceName })
+      this.#events.emit({
+        kind: 'reconcile:started',
+        queryId,
+        serviceName,
+        ...(causes.length > 0 ? { causes } : {}),
+      })
     }
   }
 
@@ -2019,9 +2311,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 })
     }
   }
 
@@ -2061,12 +2353,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
@@ -2075,24 +2368,55 @@ 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 }))
+  }
+
+  #refetchActiveQueries(
+    traceId: number,
+    queries: readonly { queryId: string; force: boolean }[],
+  ): void {
+    for (const query of queries) {
+      this.#requestReconcile(query.queryId, {
+        force: query.force,
+        causes: [{ kind: 'reconnect', traceId }],
+      })
+    }
   }
 
-  #scheduleReconnectSweep(): void {
+  #scheduleReconnectSweep(traceId: number): 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.#events.emit({
+        kind: 'reconnect:sweep',
+        traceId,
+        phase: 'started',
+        delayMs: 0,
+        queryCount: queries.length,
+      })
+      this.#refetchActiveQueries(traceId, queries)
       return
     }
 
+    this.#events.emit({ kind: 'reconnect:sweep', traceId, phase: 'scheduled', delayMs: delay })
+
     const timer = setTimeout(() => {
       this.#reconnectSweepTimer = null
-      this.#refetchActiveQueries()
+      const queries = this.#activeReconnectQueries()
+      this.#events.emit({
+        kind: 'reconnect:sweep',
+        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/queryTypes.ts b/lib/core/queryTypes.ts
index 6bf4f8b9..187a387d 100644
--- a/lib/core/queryTypes.ts
+++ b/lib/core/queryTypes.ts
@@ -30,6 +30,8 @@ interface QueuedEventBase {
   serviceName: string
   type: EventType
   items: unknown[]
+  source: 'realtime' | 'mutation' | 'optimistic'
+  traceIds?: readonly number[]
 }
 
 /** Internal entity changes waiting at the store's atomic event boundary. */
@@ -49,6 +51,8 @@ interface ProcessedEventBase {
   previousItem: unknown | null
   /** Always defined — events whose item has no resolvable id are never applied. */
   itemId: EntityKey
+  source: 'realtime' | 'mutation' | 'fetch' | 'optimistic' | 'devtools'
+  traceId?: number
 }
 
 /** An optimistic entity change after cache application. */
diff --git a/lib/core/relationalQuery.ts b/lib/core/relationalQuery.ts
index 5ce14d30..f8c2585a 100644
--- a/lib/core/relationalQuery.ts
+++ b/lib/core/relationalQuery.ts
@@ -1397,8 +1397,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.origin === 'projection' || event.source === 'devtools') {
+        const laneKeys =
+          event.origin === 'projection' ? new Set([event.mutationLaneKey]) : new Set<string>()
         for (const queryId of this.#root?.queryIds() ?? []) {
           this.#host.queryStore.reapplyQuery(queryId, laneKeys)
         }
diff --git a/lib/core/windowMaintenance.ts b/lib/core/windowMaintenance.ts
index 9b43be10..33789aa2 100644
--- a/lib/core/windowMaintenance.ts
+++ b/lib/core/windowMaintenance.ts
@@ -168,7 +168,8 @@ export function applyEventsToService<TMeta>({
 }): void {
   for (const event of events) {
     const { type, items } = event
-    for (const item of items) {
+    for (const [index, item] of items.entries()) {
+      const traceId = event.traceIds?.[index]
       if (type === 'created') {
         const incomingId = getId(item)
         if (incomingId !== undefined) {
@@ -181,6 +182,8 @@ export function applyEventsToService<TMeta>({
             item,
             previousItem,
             itemId,
+            source: event.source,
+            ...(traceId === undefined ? {} : { traceId }),
             ...(event.origin === 'projection'
               ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
               : { origin: event.origin }),
@@ -199,6 +202,8 @@ export function applyEventsToService<TMeta>({
               item,
               previousItem: currItem ?? null,
               itemId,
+              source: event.source,
+              ...(traceId === undefined ? {} : { traceId }),
               ...(event.origin === 'projection'
                 ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
                 : { origin: event.origin }),
@@ -217,6 +222,8 @@ export function applyEventsToService<TMeta>({
             item,
             previousItem,
             itemId,
+            source: event.source,
+            ...(traceId === undefined ? {} : { traceId }),
             ...(event.origin === 'projection'
               ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
               : { origin: event.origin }),
@@ -260,6 +267,7 @@ export function diffCompleteSet<TMeta>({
         item: previousItem,
         previousItem,
         itemId,
+        source: 'fetch',
       })
     }
   }
@@ -275,6 +283,7 @@ export function diffCompleteSet<TMeta>({
         item,
         previousItem: null,
         itemId,
+        source: 'fetch',
       })
     } else if (previousItem !== item) {
       events.push({
@@ -284,6 +293,7 @@ export function diffCompleteSet<TMeta>({
         item,
         previousItem,
         itemId,
+        source: 'fetch',
       })
     }
   }
@@ -513,7 +523,7 @@ export function updateQueriesFromEvents<TMeta>({
   excludeQueryId?: string
   /** The backend's implicit order for queries without `$sort` — see QueryStore options. */
   defaultSort?: Record<string, number> | undefined
-}): void {
+}): Map<string, 'merged' | 'reconcile'> {
   const context: QueryEventContext<TMeta> = {
     service,
     touch,
@@ -522,15 +532,21 @@ export function updateQueriesFromEvents<TMeta>({
     itemRemoved,
     defaultSort,
   }
+  const effects = new Map<string, 'merged' | 'reconcile'>()
   for (const event of appliedItems) {
     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)
+        effects.set(queryId, 'reconcile')
+      } else if (result === 'applied') {
+        effects.set(queryId, 'merged')
       }
     }
   }
+  return effects
 }
 
 export type QueryReapplyResult = 'applied' | 'reconcile' | 'ignored'
diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
new file mode 100644
index 00000000..13e7b9d1
--- /dev/null
+++ b/lib/devtools/CacheTab.tsx
@@ -0,0 +1,472 @@
+import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
+import { compactJson, formatAge, formatClock, prettyJson } from './format.js'
+import type { DevtoolsCacheEntity, DevtoolsCacheService } from './collector.js'
+import type { DevtoolsModel } from './model.js'
+import {
+  Badge,
+  DetailSection,
+  DetailsPane,
+  buttonStyle,
+  useDetailsPaneWidth,
+  useDevtoolsTheme,
+} from './ui.js'
+
+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,
+}: {
+  services: DevtoolsCacheService[]
+  model: DevtoolsModel
+  filter: string
+  editor?: DevtoolsCacheEditor
+  onViewTrace?: (traceId: number) => 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 [selectedId, setSelectedId] = useState<string | null>(null)
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+
+  useEffect(() => {
+    if (serviceName && orderedServices.some(service => service.serviceName === serviceName)) return
+    setServiceName(orderedServices[0]?.serviceName ?? null)
+    setSelectedId(null)
+  }, [orderedServices, serviceName])
+
+  const service = orderedServices.find(item => item.serviceName === serviceName)
+  const normalizedFilter = filter.trim().toLowerCase()
+  const entities = (service?.entities ?? [])
+    .filter(entity => {
+      if (!normalizedFilter) return true
+      return `${entity.id} ${compactJson(entity.value)}`.toLowerCase().includes(normalizedFilter)
+    })
+    .sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }))
+  const selected = service?.entities.find(entity => entity.id === selectedId)
+
+  return (
+    <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
+      <nav
+        aria-label='Cached services'
+        style={{
+          width: 190,
+          flex: '0 0 190px',
+          overflow: 'auto',
+          borderRight: `1px solid ${colors.border}`,
+          background: colors.toolbar,
+        }}
+      >
+        <div
+          style={{
+            padding: '8px 10px',
+            color: colors.muted,
+            fontWeight: 650,
+            borderBottom: `1px solid ${colors.border}`,
+          }}
+        >
+          Normalized cache
+        </div>
+        {orderedServices.map(item => {
+          const selectedService = item.serviceName === serviceName
+          return (
+            <button
+              key={item.serviceName}
+              type='button'
+              onClick={() => {
+                setServiceName(item.serviceName)
+                setSelectedId(null)
+              }}
+              style={{
+                width: '100%',
+                border: 0,
+                borderBottom: `1px solid ${colors.rowBorder}`,
+                borderLeft: `3px solid ${selectedService ? colors.blue : 'transparent'}`,
+                padding: '8px 9px',
+                background: selectedService ? colors.activeButtonBg : 'transparent',
+                color: colors.text,
+                font: 'inherit',
+                textAlign: 'left',
+                cursor: 'pointer',
+              }}
+            >
+              <span style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
+                <strong
+                  style={{
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {item.serviceName}
+                </strong>
+                <span style={{ color: colors.faint, marginLeft: 'auto' }}>
+                  {item.entities.length}
+                </span>
+              </span>
+              {item.materialized ? (
+                <span style={{ display: 'block', color: colors.green, marginTop: 3 }}>
+                  complete set · {formatAge(Date.now() - item.materialized.fetchedAt)} ago
+                </span>
+              ) : null}
+            </button>
+          )
+        })}
+      </nav>
+      <div style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
+        {!service ? (
+          <div style={{ padding: 16, color: colors.muted }}>No entities cached yet.</div>
+        ) : (
+          <table style={{ ...styles.table, minWidth: 680 }}>
+            <colgroup>
+              <col style={{ width: 150 }} />
+              <col />
+              <col style={{ width: 110 }} />
+              <col style={{ width: 150 }} />
+            </colgroup>
+            <thead>
+              <tr>
+                <th style={styles.th}>entity</th>
+                <th style={styles.th}>value</th>
+                <th style={styles.th}>queries</th>
+                <th style={styles.th}>provenance</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entities.length === 0 ? (
+                <tr>
+                  <td colSpan={4} style={{ ...styles.td, color: colors.muted }}>
+                    No matching cached entities.
+                  </td>
+                </tr>
+              ) : null}
+              {entities.map(entity => {
+                const isSelected = entity.id === selectedId
+                return (
+                  <tr
+                    key={entity.id}
+                    tabIndex={0}
+                    aria-selected={isSelected}
+                    onClick={() => setSelectedId(entity.id)}
+                    onKeyDown={event => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault()
+                        setSelectedId(entity.id)
+                      }
+                    }}
+                    style={{
+                      cursor: 'pointer',
+                      outline: 'none',
+                      background: isSelected ? colors.activeButtonBg : undefined,
+                      boxShadow: isSelected ? `inset 3px 0 ${colors.blue}` : undefined,
+                    }}
+                  >
+                    <td style={styles.td}>
+                      <code style={{ ...styles.code, fontWeight: 650 }}>#{entity.id}</code>
+                    </td>
+                    <td style={styles.td}>
+                      <code
+                        title={prettyJson(entity.value)}
+                        style={{
+                          ...styles.code,
+                          display: 'block',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          color: colors.muted,
+                        }}
+                      >
+                        {compactJson(entity.value)}
+                      </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 title={formatClock(entity.lastChange.wallAt, { milliseconds: true })}>
+                          <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>
+                )
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+      {service && selected ? (
+        <CacheEntityDetails
+          key={`${service.serviceName}:${selected.id}`}
+          service={service}
+          entity={selected}
+          model={model}
+          width={detailsWidth}
+          onResizeStart={onDetailsResizeStart}
+          onClose={() => setSelectedId(null)}
+          {...(editor ? { editor } : {})}
+          {...(onViewTrace ? { onViewTrace } : {})}
+        />
+      ) : null}
+    </section>
+  )
+}
+
+function CacheEntityDetails({
+  service,
+  entity,
+  model,
+  width,
+  onResizeStart,
+  onClose,
+  editor,
+  onViewTrace,
+}: {
+  service: DevtoolsCacheService
+  entity: DevtoolsCacheEntity
+  model: DevtoolsModel
+  width: number
+  onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
+  onClose: () => void
+  editor?: DevtoolsCacheEditor
+  onViewTrace?: (traceId: number) => 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,
+    label: queryLabel(model, queryId),
+  }))
+
+  const update = async (value: unknown, rememberUndo: boolean) => {
+    if (!editor) return
+    setSaving(true)
+    setMessage(null)
+    const result = await editor.update(service.serviceName, entity.id, value)
+    setSaving(false)
+    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.' })
+  }
+
+  return (
+    <DetailsPane
+      title={`${service.serviceName} #${entity.id}`}
+      subtitle='Normalized entity'
+      width={width}
+      onResizeStart={onResizeStart}
+      onClose={onClose}
+    >
+      <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>
+        <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>
+      ) : (
+        <DetailSection label='Current value'>
+          <pre
+            style={{
+              ...styles.code,
+              maxHeight: 360,
+              overflow: 'auto',
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'anywhere',
+              margin: 0,
+              padding: 10,
+              background: colors.panel2,
+              borderRadius: 4,
+            }}
+          >
+            {prettyJson(entity.value)}
+          </pre>
+        </DetailSection>
+      )}
+
+      {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 => (
+            <div
+              key={item.queryId}
+              title={item.queryId}
+              style={{
+                padding: '7px 0',
+                borderTop: `1px solid ${colors.rowBorder}`,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {item.label}
+            </div>
+          ))
+        )}
+      </DetailSection>
+    </DetailsPane>
+  )
+}
+
+function queryLabel(model: DevtoolsModel, queryId: string): string {
+  for (const operation of model.operations) {
+    if (operation.rootFetches.some(query => query.queryId === queryId)) {
+      return `${operation.summary.serviceName}.${operation.summary.method} · root`
+    }
+    const nested = operation.underlying.find(item => item.query.queryId === queryId)
+    if (nested)
+      return `${operation.summary.serviceName}.${operation.summary.method} › ${nested.path}`
+  }
+  return queryId
+}
diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index 566e3c19..ebc16331 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
+import { CacheTab, type DevtoolsCacheEditor } from './CacheTab.js'
 import { EventsTab } from './EventsTab.js'
 import { QueriesTab } from './QueriesTab.js'
 import { TimelineFollowControl, TimelineTab } from './TimelineTab.js'
@@ -16,7 +17,7 @@ import {
   type DevtoolsThemeMode,
 } from './ui.js'
 
-type Tab = 'queries' | 'timeline' | 'events' | 'writes'
+type Tab = 'queries' | 'timeline' | 'events' | 'cache' | 'writes'
 export type QueryVisibility = 'active' | 'all' | 'skipped'
 
 export type DevtoolsInspectionSnapshot =
@@ -41,6 +42,7 @@ export interface DevtoolsInspectionController {
 export interface FigbirdDevtoolsPanelProps {
   collector: Collector
   inspection?: DevtoolsInspectionController
+  cacheEditor?: DevtoolsCacheEditor
   status?: string
   theme?: DevtoolsThemeMode
 }
@@ -53,6 +55,7 @@ const getEmptyInspection = () => EMPTY_INSPECTION
 export function FigbirdDevtoolsPanel({
   collector,
   inspection,
+  cacheEditor,
   status,
   theme = 'system',
 }: FigbirdDevtoolsPanelProps) {
@@ -64,6 +67,8 @@ export function FigbirdDevtoolsPanel({
   const [queryFilter, setQueryFilter] = useState('')
   const [queryVisibility, setQueryVisibility] = useState<QueryVisibility>('active')
   const [eventFilter, setEventFilter] = useState('')
+  const [cacheFilter, setCacheFilter] = useState('')
+  const [selectedTraceId, setSelectedTraceId] = useState<number | null>(null)
   const [timelineFollow, setTimelineFollow] = useState(true)
 
   useEffect(() => {
@@ -116,7 +121,7 @@ export function FigbirdDevtoolsPanel({
       >
         <header style={styles.header}>
           <span style={styles.brand}>figbird</span>
-          {(['queries', 'timeline', 'events', 'writes'] as const).map(item => (
+          {(['queries', 'timeline', 'events', 'cache', 'writes'] as const).map(item => (
             <TabButton
               key={item}
               active={tab === item}
@@ -206,6 +211,14 @@ export function FigbirdDevtoolsPanel({
               placeholder='Filter events'
             />
           ) : null}
+          {tab === 'cache' ? (
+            <input
+              style={styles.input}
+              value={cacheFilter}
+              onChange={event => setCacheFilter(event.currentTarget.value)}
+              placeholder='Filter entity ID or value'
+            />
+          ) : null}
           {tab === 'events' ? (
             <span
               title='The oldest event is discarded when the bounded buffer is full'
@@ -240,6 +253,10 @@ export function FigbirdDevtoolsPanel({
               model={model}
               follow={timelineFollow}
               onFollowChange={setTimelineFollow}
+              onTraceSelect={traceId => {
+                setSelectedTraceId(traceId)
+                setTab('events')
+              }}
             />
           ) : null}
           {tab === 'events' ? (
@@ -247,6 +264,20 @@ export function FigbirdDevtoolsPanel({
               events={snapshot.events}
               filter={eventFilter}
               scopes={model.scopesByQueryId}
+              selectedTraceId={selectedTraceId}
+              onSelectedTraceIdChange={setSelectedTraceId}
+            />
+          ) : null}
+          {tab === 'cache' ? (
+            <CacheTab
+              services={snapshot.cache ?? []}
+              model={model}
+              filter={cacheFilter}
+              {...(cacheEditor ? { editor: cacheEditor } : {})}
+              onViewTrace={traceId => {
+                setSelectedTraceId(traceId)
+                setTab('events')
+              }}
             />
           ) : null}
           {tab === 'writes' ? (
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index a3b3acd2..a32fc538 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -1,4 +1,4 @@
-import { useState, type MouseEvent as ReactMouseEvent } from 'react'
+import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import type { DevtoolsEvent } from './collector.js'
 import { compactJson, formatClock, formatMs, prettyJson } from './format.js'
 import type { EventQueryScope } from './model.js'
@@ -15,14 +15,19 @@ export function EventsTab({
   events,
   filter,
   scopes,
+  selectedTraceId,
+  onSelectedTraceIdChange,
 }: {
   events: DevtoolsEvent[]
   filter: string
   scopes: ReadonlyMap<string, readonly EventQueryScope[]>
+  selectedTraceId?: number | null
+  onSelectedTraceIdChange?: (traceId: number | null) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [selectedEventId, setSelectedEventId] = useState<number | null>(null)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const traceIndex = useMemo(() => buildTraceIndex(events), [events])
   const rows = events
     .filter(item => {
       if (!filter) return true
@@ -32,6 +37,24 @@ export function EventsTab({
     })
     .reverse()
   const selectedEvent = events.find(item => item.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
+    }
+    setSelectedEventId(traceEvents.at(-1)!.id)
+  }, [selectedEvent, selectedTraceId, traceEvents, traceIndex])
   return (
     <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
       <div style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
@@ -66,11 +89,15 @@ export function EventsTab({
               tabIndex={0}
               aria-pressed={item.id === selectedEventId}
               title='Select event details'
-              onClick={() => setSelectedEventId(item.id)}
+              onClick={() => {
+                setSelectedEventId(item.id)
+                onSelectedTraceIdChange?.(traceIdsForEvent(item.event, traceIndex)[0] ?? null)
+              }}
               onKeyDown={event => {
                 if (event.key === 'Enter' || event.key === ' ') {
                   event.preventDefault()
                   setSelectedEventId(item.id)
+                  onSelectedTraceIdChange?.(traceIdsForEvent(item.event, traceIndex)[0] ?? null)
                 }
               }}
               style={{
@@ -104,6 +131,8 @@ export function EventsTab({
       {selectedEvent ? (
         <EventDetails
           item={selectedEvent}
+          traceEvents={traceEvents}
+          selectedTraceId={selectedTraceId ?? null}
           width={detailsWidth}
           onResizeStart={onDetailsResizeStart}
           onClose={() => setSelectedEventId(null)}
@@ -115,11 +144,15 @@ export function EventsTab({
 
 function EventDetails({
   item,
+  traceEvents,
+  selectedTraceId,
   width,
   onResizeStart,
   onClose,
 }: {
   item: DevtoolsEvent
+  traceEvents: DevtoolsEvent[]
+  selectedTraceId: number | null
   width: number
   onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
   onClose: () => void
@@ -166,6 +199,37 @@ function EventDetails({
           {payload === undefined ? 'No payload' : prettyJson(payload)}
         </pre>
       </DetailSection>
+      {selectedTraceId && traceEvents.length > 1 ? (
+        <DetailSection label={`Causal trace #${selectedTraceId}`}>
+          <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
+            {traceEvents.map(traceEvent => (
+              <div
+                key={traceEvent.id}
+                style={{
+                  display: 'grid',
+                  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',
+                }}
+              >
+                <code style={{ ...styles.code, color: colors.faint }}>
+                  {formatClock(traceEvent.wallAt, { milliseconds: true })}
+                </code>
+                <strong style={{ fontWeight: 600 }}>{traceEvent.event.kind}</strong>
+                <span
+                  title={eventDetails(traceEvent)}
+                  style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                >
+                  {eventDetails(traceEvent)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </DetailSection>
+      ) : null}
       <DetailSection label='Full event'>
         <pre
           style={{
@@ -187,6 +251,8 @@ 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':
@@ -202,6 +268,9 @@ function eventPayload(event: DevtoolsEvent['event']): unknown {
     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
@@ -257,6 +326,37 @@ function EventScopeBadge({
   )
 }
 
+interface TraceIndex {
+  byFetchId: ReadonlyMap<number, readonly number[]>
+}
+
+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 }
+}
+
+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])) ?? []
+}
+
 function eventSearchText(item: DevtoolsEvent, scopes?: readonly EventQueryScope[]): string {
   return [
     formatClock(item.wallAt, { milliseconds: true }),
@@ -273,6 +373,7 @@ function eventQueryId(event: DevtoolsEvent['event']): string | undefined {
     case 'fetch:end':
     case 'fetch:error':
     case 'reconcile:started':
+    case 'reconcile:decision':
       return event.queryId
     default:
       return undefined
@@ -301,13 +402,28 @@ function eventDetails(item: DevtoolsEvent): string {
         errorMessage(event.error),
       ])
     case 'reconcile:started':
-      return event.serviceName
+      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',
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index 8bcb5809..e1e9e839 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -134,6 +134,36 @@ export function QueryDetails({
           {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
         </span>
       </div>
+      <QueryDetailSection label='Realtime handling'>
+        <div
+          style={{
+            padding: '8px 10px',
+            background: colors.panel2,
+            borderLeft: `3px solid ${
+              activeQuery.realtimeStrategy === 'merge'
+                ? colors.green
+                : activeQuery.realtimeStrategy === 'manual'
+                  ? colors.faint
+                  : colors.amber
+            }`,
+          }}
+        >
+          <strong style={{ fontWeight: 650 }}>
+            {activeQuery.realtimeStrategy === 'merge'
+              ? 'Merges events locally'
+              : activeQuery.realtimeStrategy === 'manual'
+                ? 'Manual realtime'
+                : 'Reconciles uncertain events'}
+          </strong>
+          <div style={{ color: colors.muted, marginTop: 3 }}>
+            {activeQuery.classificationReasons?.length
+              ? activeQuery.classificationReasons.map(classificationReasonLabel).join(' · ')
+              : activeQuery.classification === 'get'
+                ? 'Direct entity lookup'
+                : 'Membership and ordering are locally provable'}
+          </div>
+        </div>
+      </QueryDetailSection>
       {activeQuery.lastError ? (
         <div
           title={`Most recently observed fetch error · query generation ${activeQuery.lastError.generation}`}
@@ -306,6 +336,25 @@ export function QueryDetails({
   )
 }
 
+function classificationReasonLabel(reason: { code: string; detail?: string }): string {
+  switch (reason.code) {
+    case 'server-flag':
+      return `forced server authority${reason.detail ? ` by ${reason.detail}` : ''}`
+    case 'native-pagination':
+      return 'native cursor pagination'
+    case 'select-projection':
+      return `projected rows${reason.detail ? ` via ${reason.detail}` : ''}`
+    case 'server-only-operator':
+      return `server-only operator ${reason.detail ?? ''}`.trim()
+    case 'window-filter':
+      return `window boundary ${reason.detail ?? ''}`.trim()
+    case 'snapshot':
+      return 'snapshot query ignores realtime'
+    default:
+      return reason.detail ?? reason.code
+  }
+}
+
 function PaginationDetails({
   pagination,
   pages,
diff --git a/lib/devtools/TimelineCanvas.tsx b/lib/devtools/TimelineCanvas.tsx
index 72ae5c9b..062def88 100644
--- a/lib/devtools/TimelineCanvas.tsx
+++ b/lib/devtools/TimelineCanvas.tsx
@@ -22,6 +22,12 @@ export interface TimelineMarker {
   at: number
   label: string
   tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral'
+  traceId?: number
+}
+
+export interface TimelineTick {
+  at: number
+  traceId?: number
 }
 
 export type TimelineLane =
@@ -41,7 +47,7 @@ export type TimelineLane =
       detail: string
       context: string
       firstAt: number
-      ticks: number[]
+      ticks: TimelineTick[]
     }
   | {
       kind: 'connection'
@@ -70,6 +76,7 @@ export function TimelineCanvas({
   wallClockOffset,
   follow,
   onFollowChange,
+  onTraceSelect,
 }: {
   lanes: TimelineLane[]
   layout: TimelineLayout | null
@@ -77,6 +84,7 @@ export function TimelineCanvas({
   wallClockOffset: number
   follow: boolean
   onFollowChange: (value: boolean) => void
+  onTraceSelect?: (traceId: number) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const verticalScrollRef = useRef<HTMLDivElement>(null)
@@ -296,6 +304,7 @@ export function TimelineCanvas({
                   barLabel={lane.kind === 'connection' ? 'Offline' : 'Fetch'}
                   nowPoint={nowPoint}
                   wallClockOffset={wallClockOffset}
+                  {...(onTraceSelect ? { onTraceSelect } : {})}
                 />
               ))}
             </div>
@@ -450,14 +459,16 @@ function TimelineLaneTrack({
   barLabel,
   nowPoint,
   wallClockOffset,
+  onTraceSelect,
 }: {
   layout: TimelineLayout
-  bars: Array<{ startAt: number; endAt?: number; ok?: boolean }>
-  ticks: number[]
+  bars: QuerySpan[]
+  ticks: TimelineTick[]
   markers: TimelineMarker[]
   barLabel: 'Fetch' | 'Offline'
   nowPoint: number
   wallClockOffset: number
+  onTraceSelect?: (traceId: number) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
   return (
@@ -477,7 +488,8 @@ function TimelineLaneTrack({
         const width = Math.max(9, timeToPixels(barEnd, bar.startAt))
         const color = bar.ok === false ? colors.red : colors.green
         return (
-          <span
+          <button
+            type='button'
             key={`${bar.startAt}:${index}`}
             {...(barLabel === 'Fetch'
               ? { 'data-timeline-fetch': bar.ok === false ? 'failed' : 'success' }
@@ -487,6 +499,9 @@ function TimelineLaneTrack({
               formatTimelineClock(bar.startAt, wallClockOffset, true),
             ].join('\n')}
             style={{
+              border: 0,
+              padding: 0,
+              cursor: bar.traceIds?.[0] === undefined ? 'default' : 'pointer',
               position: 'absolute',
               top: 19,
               left,
@@ -497,6 +512,10 @@ function TimelineLaneTrack({
               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})`,
             }}
+            onClick={() => {
+              const traceId = bar.traceIds?.[0]
+              if (traceId !== undefined) onTraceSelect?.(traceId)
+            }}
           >
             <span
               aria-hidden='true'
@@ -510,19 +529,26 @@ function TimelineLaneTrack({
                 opacity: 0.9,
               }}
             />
-          </span>
+          </button>
         )
       })}
       {ticks.map((tick, index) => (
-        <span
-          key={`${tick}:${index}`}
-          title={`Realtime event\n${formatTimelineClock(tick, wallClockOffset, true)}`}
+        <button
+          type='button'
+          key={`${tick.at}:${index}`}
+          title={`Realtime event\n${formatTimelineClock(tick.at, wallClockOffset, true)}`}
+          onClick={() => {
+            if (tick.traceId !== undefined) onTraceSelect?.(tick.traceId)
+          }}
           style={{
             position: 'absolute',
             top: 15,
-            left: timeToPixels(tick, layout.start),
+            left: timeToPixels(tick.at, layout.start),
             width: 7,
             height: 7,
+            border: 0,
+            padding: 0,
+            cursor: tick.traceId === undefined ? 'default' : 'pointer',
             marginLeft: -4,
             borderRadius: 2,
             background: colors.blue,
@@ -532,9 +558,13 @@ function TimelineLaneTrack({
         />
       ))}
       {markers.map((marker, index) => (
-        <span
+        <button
+          type='button'
           key={`${marker.at}:${marker.label}:${index}`}
           title={`${marker.label}\n${formatTimelineClock(marker.at, wallClockOffset, true)}`}
+          onClick={() => {
+            if (marker.traceId !== undefined) onTraceSelect?.(marker.traceId)
+          }}
           style={{
             position: 'absolute',
             top: 14,
@@ -546,6 +576,8 @@ function TimelineLaneTrack({
             background: toneColor(colors, marker.tone),
             border: `2px solid ${colors.bg}`,
             boxSizing: 'border-box',
+            padding: 0,
+            cursor: marker.traceId === undefined ? 'default' : 'pointer',
           }}
         />
       ))}
diff --git a/lib/devtools/TimelineOverview.tsx b/lib/devtools/TimelineOverview.tsx
index 2b68055d..2585f11f 100644
--- a/lib/devtools/TimelineOverview.tsx
+++ b/lib/devtools/TimelineOverview.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 import type { QuerySpan } from './collector.js'
+import type { TimelineTick } from './TimelineCanvas.js'
 import { useDevtoolsTheme } from './ui.js'
 
 const OVERVIEW_HEIGHT = 42
@@ -11,7 +12,7 @@ export interface TimelineViewport {
 
 type TimelineOverviewLane =
   | { kind: 'query'; id: string; bars: QuerySpan[] }
-  | { kind: 'realtime'; id: string; ticks: number[] }
+  | { kind: 'realtime'; id: string; ticks: TimelineTick[] }
   | { kind: 'connection'; id: string; bars: QuerySpan[]; markers: Array<{ at: number }> }
 
 interface TimelineOverviewLayout {
@@ -141,7 +142,10 @@ function drawOverview(
     }
     if (lane.kind === 'realtime' || lane.kind === 'connection') {
       context.fillStyle = colors.blue
-      const ticks = lane.kind === 'realtime' ? lane.ticks : lane.markers.map(marker => marker.at)
+      const ticks =
+        lane.kind === 'realtime'
+          ? lane.ticks.map(tick => tick.at)
+          : lane.markers.map(marker => marker.at)
       for (const tick of ticks) {
         context.fillRect(timelineRatio(tick, layout) * width, top, 2, markHeight)
       }
diff --git a/lib/devtools/TimelineTab.tsx b/lib/devtools/TimelineTab.tsx
index d844eb9f..d1002b37 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -8,6 +8,7 @@ import {
   type TimelineLane,
   type TimelineLayout,
   type TimelineMarker,
+  type TimelineTick,
 } from './TimelineCanvas.js'
 import { buttonStyle, useDevtoolsTheme } from './ui.js'
 
@@ -30,7 +31,7 @@ type RawTimelineLane =
       context: string
       detail: string
       firstAt: number
-      ticks: number[]
+      ticks: TimelineTick[]
     }
   | {
       kind: 'connection'
@@ -88,17 +89,19 @@ export function TimelineTab({
   model,
   follow,
   onFollowChange,
+  onTraceSelect,
 }: {
   snapshot: DevtoolsSnapshot
   model: DevtoolsModel
   follow: boolean
   onFollowChange: (value: boolean) => void
+  onTraceSelect?: (traceId: number) => void
 }) {
   const rawLanes = useMemo(() => {
-    const realtimeByService = new Map<string, number[]>()
+    const realtimeByService = new Map<string, TimelineTick[]>()
     for (const item of snapshot.timeline.realtime) {
       const ticks = realtimeByService.get(item.serviceName) ?? []
-      ticks.push(item.at)
+      ticks.push({ at: item.at, ...(item.traceId === undefined ? {} : { traceId: item.traceId }) })
       realtimeByService.set(item.serviceName, ticks)
     }
     const queryLanes: RawTimelineLane[] = snapshot.queries
@@ -128,7 +131,7 @@ export function TimelineTab({
       label: `${serviceName} realtime`,
       context: `${ticks.length} ${ticks.length === 1 ? 'event' : 'events'} retained`,
       detail: `All retained realtime events emitted by ${serviceName}`,
-      firstAt: Math.min(...ticks),
+      firstAt: Math.min(...ticks.map(tick => tick.at)),
       ticks,
     }))
     const connectionLane = buildConnectionLane(snapshot.timeline.connection)
@@ -179,6 +182,7 @@ export function TimelineTab({
         wallClockOffset={wallClockOffset}
         follow={follow}
         onFollowChange={onFollowChange}
+        {...(onTraceSelect ? { onTraceSelect } : {})}
       />
     </section>
   )
@@ -207,7 +211,7 @@ function timelineLayout(
         points.push(span.startAt, span.endAt ?? nowPoint)
       }
     } else if (lane.kind === 'realtime') {
-      points.push(...lane.ticks)
+      points.push(...lane.ticks.map(tick => tick.at))
     } else {
       for (const span of lane.bars) points.push(span.startAt, span.endAt ?? nowPoint)
       points.push(...lane.markers.map(marker => marker.at))
@@ -234,12 +238,22 @@ function buildConnectionLane(events: TimelineConnectionEvent[]): RawTimelineLane
     const event = item.event
     switch (event.kind) {
       case 'connection:connected':
-        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'green' })
+        markers.push({
+          at: item.at,
+          label: connectionEventLabel(event),
+          tone: 'green',
+          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
+        })
         break
       case 'connection:disconnected':
         if (offlineStart === undefined) offlineStart = item.at
         latestAttempt = undefined
-        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'red' })
+        markers.push({
+          at: item.at,
+          label: connectionEventLabel(event),
+          tone: 'red',
+          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
+        })
         break
       case 'connection:reconnected':
         latestAttempt = event.attempt
@@ -248,11 +262,21 @@ function buildConnectionLane(events: TimelineConnectionEvent[]): RawTimelineLane
           bars.push({ startAt: offlineStart, endAt: item.at, ok: false })
           offlineStart = undefined
         }
-        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'green' })
+        markers.push({
+          at: item.at,
+          label: connectionEventLabel(event),
+          tone: 'green',
+          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
+        })
         break
       case 'connection:error':
       case 'connection:reconnect-failed':
-        markers.push({ at: item.at, label: connectionEventLabel(event), tone: 'red' })
+        markers.push({
+          at: item.at,
+          label: connectionEventLabel(event),
+          tone: 'red',
+          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
+        })
         break
     }
   }
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index 8399f998..e924335e 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -2,6 +2,7 @@ import type {
   FigbirdEvent,
   FigbirdEvents,
   InspectedQuery,
+  InspectedCacheService,
   InspectedRelationalQuery,
   MutationActivity,
 } from '../core/figbird.js'
@@ -12,6 +13,7 @@ export interface FigbirdLikeForDevtools {
   events: FigbirdEvents
   mutating?: MutationActivity
   inspect(): InspectedQuery[]
+  inspectCache?(): InspectedCacheService[]
   inspectRelational?(): InspectedRelationalQuery[]
   subscribeToStateChanges?(fn: (state: unknown) => void): () => void
 }
@@ -28,6 +30,9 @@ export interface QuerySpan {
   startAt: number
   endAt?: number
   ok?: boolean
+  fetchId?: number
+  reason?: string
+  traceIds?: number[]
 }
 
 export interface QueryRecord extends Omit<
@@ -60,6 +65,7 @@ export interface DevtoolsEvent {
 export interface TimelineRealtimeEvent {
   at: number
   serviceName: string
+  traceId?: number
 }
 
 type ConnectionFigbirdEvent = Extract<
@@ -105,6 +111,7 @@ export interface WriteRecord {
 }
 
 export interface DevtoolsSnapshot {
+  cache?: DevtoolsCacheService[]
   queries: QueryRecord[]
   relational: InspectedRelationalQuery[]
   events: DevtoolsEvent[]
@@ -113,6 +120,25 @@ export interface DevtoolsSnapshot {
   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
@@ -155,6 +181,7 @@ interface InternalRelationalQuery {
 }
 
 const EMPTY_SNAPSHOT: DevtoolsSnapshot = {
+  cache: [],
   queries: [],
   relational: [],
   events: [],
@@ -335,6 +362,8 @@ class FigbirdCollector implements Collector {
   #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[] }>()
 
   readonly eventLimit: number
 
@@ -405,7 +434,17 @@ class FigbirdCollector implements Collector {
         return `${a.serviceName}:${a.queryId}`.localeCompare(`${b.serviceName}:${b.queryId}`)
       })
     const writes = Array.from(this.#writes.values()).sort((a, b) => a.startedAt - b.startedAt)
+    const cache = (this.#figbird.inspectCache?.() ?? []).map(service => ({
+      ...service,
+      entities: service.entities.map(entity => ({
+        ...entity,
+        ...(this.#cacheProvenance.has(`${service.serviceName}:${entity.id}`)
+          ? { lastChange: this.#cacheProvenance.get(`${service.serviceName}:${entity.id}`)! }
+          : {}),
+      })),
+    }))
     this.#snapshot = {
+      cache,
       queries,
       relational: [...this.#relational.values()].map(record => record.inspected),
       events: this.#events.toArray(),
@@ -458,6 +497,8 @@ class FigbirdCollector implements Collector {
     this.#nextEventId = 1
     this.#realtimeByService.clear()
     this.#writes.clear()
+    this.#cacheProvenance.clear()
+    this.#fetchTraces.clear()
     this.#scheduleNotify()
   }
 
@@ -495,7 +536,11 @@ class FigbirdCollector implements Collector {
         break
       case 'realtime':
         this.#recordTimelineLane(`realtime:${event.serviceName}`)
-        this.#timelineRealtime.push({ at, serviceName: event.serviceName })
+        this.#timelineRealtime.push({
+          at,
+          serviceName: event.serviceName,
+          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
+        })
         this.#realtimeByService.set(
           event.serviceName,
           (this.#realtimeByService.get(event.serviceName) ?? 0) + 1,
@@ -509,6 +554,17 @@ class FigbirdCollector implements Collector {
         this.#recordTimelineLane('connection')
         this.#timelineConnection.push({ at, event: this.#captureConnectionEvent(event) })
         break
+      case 'cache:updated':
+        if (event.traceId !== undefined) {
+          this.#cacheProvenance.set(`${event.serviceName}:${String(event.itemId)}`, {
+            at,
+            wallAt: Date.now(),
+            source: event.source,
+            traceId: event.traceId,
+            type: event.type,
+          })
+        }
+        break
       case 'reconcile:started':
         {
           const record = this.#queries.get(event.queryId)
@@ -603,6 +659,15 @@ class FigbirdCollector implements Collector {
   }
 
   #recordFetchStart(event: Extract<FetchEvent, { kind: 'fetch:start' }>, at: number): void {
+    if (event.fetchId !== undefined) {
+      this.#fetchTraces.set(event.fetchId, {
+        ...(event.reason ? { reason: event.reason } : {}),
+        traceIds:
+          event.causes?.flatMap(cause =>
+            cause.kind === 'realtime' || cause.kind === 'reconnect' ? [cause.traceId] : [],
+          ) ?? [],
+      })
+    }
     const record = this.#ensureFetchRecord(event, at, true)
     if (record.current?.generation !== event.generation) return
     const current = {
@@ -677,7 +742,16 @@ class FigbirdCollector implements Collector {
 
     const observedStartAt = at - event.durationMs
     const startAt = Math.max(observedStartAt, this.#timelineStartedAt)
-    metrics.spans.push({ startAt, endAt: at, ok })
+    const trace = event.fetchId === undefined ? undefined : this.#fetchTraces.get(event.fetchId)
+    metrics.spans.push({
+      startAt,
+      endAt: at,
+      ok,
+      ...(event.fetchId === undefined ? {} : { fetchId: event.fetchId }),
+      ...(trace?.reason ? { reason: trace.reason } : {}),
+      ...(trace && trace.traceIds.length > 0 ? { traceIds: trace.traceIds } : {}),
+    })
+    if (event.fetchId !== undefined) this.#fetchTraces.delete(event.fetchId)
 
     const currentMatches = record.current?.generation === event.generation
     const retainedMatches =
diff --git a/lib/devtools/model.ts b/lib/devtools/model.ts
index 37ea225b..d0b872e1 100644
--- a/lib/devtools/model.ts
+++ b/lib/devtools/model.ts
@@ -152,6 +152,10 @@ function summarizeRootFetches(roots: QueryRecord[]): QuerySummary {
         }
       : {}),
     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'
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/test/fetch-races.test.ts b/test/fetch-races.test.ts
index 42966a6c..ee5ebc7f 100644
--- a/test/fetch-races.test.ts
+++ b/test/fetch-races.test.ts
@@ -160,6 +160,7 @@ function ids(data: unknown): number[] {
 function processedEvent(itemId: number): ProcessedRealtimeEvent {
   return {
     origin: 'authoritative',
+    source: 'realtime',
     serviceName: 'notes',
     type: 'patched',
     item: { id: itemId },

From d082a8b06771aea0deef1d3197de0a14297fa13e Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 17:46:53 +0100
Subject: [PATCH 03/42] Compact complete cache indicator

---
 lib/devtools/CacheTab.tsx | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 13e7b9d1..b5667d69 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -102,7 +102,7 @@ export function CacheTab({
                 cursor: 'pointer',
               }}
             >
-              <span style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                 <strong
                   style={{
                     minWidth: 0,
@@ -113,15 +113,38 @@ export function CacheTab({
                 >
                   {item.serviceName}
                 </strong>
-                <span style={{ color: colors.faint, marginLeft: 'auto' }}>
+                <span
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 5,
+                    color: colors.faint,
+                    marginLeft: 'auto',
+                  }}
+                >
                   {item.entities.length}
+                  {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>
               </span>
-              {item.materialized ? (
-                <span style={{ display: 'block', color: colors.green, marginTop: 3 }}>
-                  complete set · {formatAge(Date.now() - item.materialized.fetchedAt)} ago
-                </span>
-              ) : null}
             </button>
           )
         })}

From f994449227668c38bc436578d266f49f8bcc52c5 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 18:08:22 +0100
Subject: [PATCH 04/42] Group devtools activity and expose inactive queries

---
 DEVTOOLS_SPEC.md            |  16 +-
 extensions/README.md        |   2 +
 lib/devtools/Devtools.tsx   |  42 +++-
 lib/devtools/EventsTab.tsx  | 369 +++++++++++++++++++++++++++++++++---
 lib/devtools/QueriesTab.tsx |  10 +
 5 files changed, 397 insertions(+), 42 deletions(-)

diff --git a/DEVTOOLS_SPEC.md b/DEVTOOLS_SPEC.md
index 85f5974a..bab814f8 100644
--- a/DEVTOOLS_SPEC.md
+++ b/DEVTOOLS_SPEC.md
@@ -50,6 +50,16 @@ realtime, and connection marks link into the same chain. This metadata is emitte
 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.
+
 ## Cache inspection and editing
 
 The page bridge exposes a serialized projection of each service's normalized entities,
@@ -102,6 +112,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/extensions/README.md b/extensions/README.md
index d701a08f..c25ac95f 100644
--- a/extensions/README.md
+++ b/extensions/README.md
@@ -66,6 +66,8 @@ The shared browser extension version lives in `extensions/version.json`. See
 
 - The Figbird panel reports **Connected** after the page creates a Figbird instance.
 - 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.
 - 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.
diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index ebc16331..580f5f00 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { CacheTab, type DevtoolsCacheEditor } from './CacheTab.js'
 import { EventsTab } from './EventsTab.js'
-import { QueriesTab } from './QueriesTab.js'
+import { QueriesTab, operationIsInactive } from './QueriesTab.js'
 import { TimelineFollowControl, TimelineTab } from './TimelineTab.js'
 import { WritesTab } from './WritesTab.js'
 import type { Collector } from './collector.js'
@@ -18,7 +18,8 @@ import {
 } from './ui.js'
 
 type Tab = 'queries' | 'timeline' | 'events' | 'cache' | 'writes'
-export type QueryVisibility = 'active' | 'all' | 'skipped'
+export type QueryVisibility = 'active' | 'inactive' | 'all' | 'skipped'
+export type EventVisibility = 'activity' | 'all'
 
 export type DevtoolsInspectionSnapshot =
   | { kind: 'idle'; version: number }
@@ -67,6 +68,7 @@ export function FigbirdDevtoolsPanel({
   const [queryFilter, setQueryFilter] = useState('')
   const [queryVisibility, setQueryVisibility] = useState<QueryVisibility>('active')
   const [eventFilter, setEventFilter] = useState('')
+  const [eventVisibility, setEventVisibility] = useState<EventVisibility>('activity')
   const [cacheFilter, setCacheFilter] = useState('')
   const [selectedTraceId, setSelectedTraceId] = useState<number | null>(null)
   const [timelineFollow, setTimelineFollow] = useState(true)
@@ -87,6 +89,7 @@ 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 timelineEmpty =
     snapshot.timeline.realtime.length === 0 &&
     snapshot.timeline.connection.length === 0 &&
@@ -143,7 +146,7 @@ export function FigbirdDevtoolsPanel({
               />
               <select
                 aria-label='Query visibility'
-                title='Skipped queries are hidden from the live view'
+                title='Choose live, inactive cached, skipped, or historical queries'
                 value={queryVisibility}
                 onChange={event => setQueryVisibility(event.currentTarget.value as QueryVisibility)}
                 style={{
@@ -154,6 +157,9 @@ export function FigbirdDevtoolsPanel({
                 }}
               >
                 <option value='active'>Live queries</option>
+                <option value='inactive'>
+                  Inactive queries{inactiveQueryCount > 0 ? ` (${inactiveQueryCount})` : ''}
+                </option>
                 <option value='all'>All queries</option>
                 <option value='skipped'>
                   Skipped queries{skippedQueryCount > 0 ? ` (${skippedQueryCount})` : ''}
@@ -204,12 +210,29 @@ export function FigbirdDevtoolsPanel({
             </>
           ) : null}
           {tab === 'events' ? (
-            <input
-              style={styles.input}
-              value={eventFilter}
-              onChange={event => setEventFilter(event.currentTarget.value)}
-              placeholder='Filter events'
-            />
+            <>
+              <input
+                style={styles.input}
+                value={eventFilter}
+                onChange={event => setEventFilter(event.currentTarget.value)}
+                placeholder={eventVisibility === 'activity' ? 'Filter activity' : 'Filter events'}
+              />
+              <select
+                aria-label='Event visibility'
+                title='Activity groups causal work; All events shows the raw instrumentation stream'
+                value={eventVisibility}
+                onChange={event => setEventVisibility(event.currentTarget.value as EventVisibility)}
+                style={{
+                  ...styles.input,
+                  width: 'auto',
+                  maxWidth: 'none',
+                  paddingRight: 24,
+                }}
+              >
+                <option value='activity'>Activity</option>
+                <option value='all'>All events</option>
+              </select>
+            </>
           ) : null}
           {tab === 'cache' ? (
             <input
@@ -263,6 +286,7 @@ export function FigbirdDevtoolsPanel({
             <EventsTab
               events={snapshot.events}
               filter={eventFilter}
+              visibility={eventVisibility}
               scopes={model.scopesByQueryId}
               selectedTraceId={selectedTraceId}
               onSelectedTraceIdChange={setSelectedTraceId}
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index a32fc538..1993970e 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import type { DevtoolsEvent } from './collector.js'
+import type { EventVisibility } from './Devtools.js'
 import { compactJson, formatClock, formatMs, prettyJson } from './format.js'
 import type { EventQueryScope } from './model.js'
 import {
@@ -14,12 +15,14 @@ import {
 export function EventsTab({
   events,
   filter,
+  visibility,
   scopes,
   selectedTraceId,
   onSelectedTraceIdChange,
 }: {
   events: DevtoolsEvent[]
   filter: string
+  visibility: EventVisibility
   scopes: ReadonlyMap<string, readonly EventQueryScope[]>
   selectedTraceId?: number | null
   onSelectedTraceIdChange?: (traceId: number | null) => void
@@ -28,15 +31,26 @@ export function EventsTab({
   const [selectedEventId, setSelectedEventId] = useState<number | null>(null)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
   const traceIndex = useMemo(() => buildTraceIndex(events), [events])
-  const rows = events
-    .filter(item => {
-      if (!filter) return true
-      return eventSearchText(item, scopes.get(eventQueryId(item.event) ?? ''))
-        .toLowerCase()
-        .includes(filter.toLowerCase())
-    })
-    .reverse()
+  const activities = useMemo(() => buildActivities(events, traceIndex), [events, traceIndex])
+  const normalizedFilter = filter.toLowerCase()
+  const rows: EventListRow[] =
+    visibility === 'activity'
+      ? 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
@@ -53,8 +67,11 @@ export function EventsTab({
     ) {
       return
     }
-    setSelectedEventId(traceEvents.at(-1)!.id)
-  }, [selectedEvent, selectedTraceId, traceEvents, traceIndex])
+    const activity = activities.find(item => item.traceId === selectedTraceId)
+    setSelectedEventId(
+      visibility === 'activity' && activity ? activity.representative.id : traceEvents.at(-1)!.id,
+    )
+  }, [activities, selectedEvent, selectedTraceId, traceEvents, traceIndex, visibility])
   return (
     <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
       <div style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
@@ -71,33 +88,35 @@ export function EventsTab({
           }}
         >
           <span>Time</span>
-          <span>Event</span>
+          <span>{visibility === 'activity' ? 'Activity' : 'Event'}</span>
           <span>Scope</span>
           <span>Details</span>
         </div>
         {rows.length === 0 ? (
-          <div style={{ padding: 16, color: colors.muted }}>No matching events recorded.</div>
+          <div style={{ padding: 16, color: colors.muted }}>
+            No matching {visibility === 'activity' ? 'activity' : 'events'} recorded.
+          </div>
         ) : null}
-        {rows.map(item => {
-          const queryId = eventQueryId(item.event)
+        {rows.map(row => {
+          const item = row.representative
+          const queryId = row.queryId
           const queryScopes = queryId ? scopes.get(queryId) : undefined
-          const details = eventDetails(item)
           return (
             <div
-              key={item.id}
+              key={row.key}
               role='button'
               tabIndex={0}
               aria-pressed={item.id === selectedEventId}
               title='Select event details'
               onClick={() => {
                 setSelectedEventId(item.id)
-                onSelectedTraceIdChange?.(traceIdsForEvent(item.event, traceIndex)[0] ?? null)
+                onSelectedTraceIdChange?.(row.traceId ?? null)
               }}
               onKeyDown={event => {
                 if (event.key === 'Enter' || event.key === ' ') {
                   event.preventDefault()
                   setSelectedEventId(item.id)
-                  onSelectedTraceIdChange?.(traceIdsForEvent(item.event, traceIndex)[0] ?? null)
+                  onSelectedTraceIdChange?.(row.traceId ?? null)
                 }
               }}
               style={{
@@ -111,7 +130,7 @@ export function EventsTab({
               <span style={{ ...styles.code, color: colors.faint }}>
                 {formatClock(item.wallAt, { milliseconds: true })}
               </span>
-              <EventKind kind={item.event.kind} />
+              <EventKind kind={row.kind} />
               <EventScopeBadge scopes={queryScopes} queryId={queryId} />
               <span
                 style={{
@@ -120,9 +139,9 @@ export function EventsTab({
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
                 }}
-                title={details}
+                title={row.details}
               >
-                {details}
+                {row.details}
               </span>
             </div>
           )
@@ -131,8 +150,20 @@ export function EventsTab({
       {selectedEvent ? (
         <EventDetails
           item={selectedEvent}
-          traceEvents={traceEvents}
-          selectedTraceId={selectedTraceId ?? null}
+          relatedEvents={
+            selectedTraceId
+              ? traceEvents
+              : visibility === 'activity'
+                ? (selectedActivity?.events ?? [])
+                : []
+          }
+          relatedLabel={
+            selectedTraceId
+              ? `Causal trace #${selectedTraceId}`
+              : visibility === 'activity'
+                ? 'Related activity'
+                : null
+          }
           width={detailsWidth}
           onResizeStart={onDetailsResizeStart}
           onClose={() => setSelectedEventId(null)}
@@ -144,15 +175,15 @@ export function EventsTab({
 
 function EventDetails({
   item,
-  traceEvents,
-  selectedTraceId,
+  relatedEvents,
+  relatedLabel,
   width,
   onResizeStart,
   onClose,
 }: {
   item: DevtoolsEvent
-  traceEvents: DevtoolsEvent[]
-  selectedTraceId: number | null
+  relatedEvents?: DevtoolsEvent[]
+  relatedLabel: string | null
   width: number
   onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
   onClose: () => void
@@ -199,10 +230,10 @@ function EventDetails({
           {payload === undefined ? 'No payload' : prettyJson(payload)}
         </pre>
       </DetailSection>
-      {selectedTraceId && traceEvents.length > 1 ? (
-        <DetailSection label={`Causal trace #${selectedTraceId}`}>
+      {relatedEvents && relatedEvents.length > 1 ? (
+        <DetailSection label={relatedLabel ?? 'Related activity'}>
           <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
-            {traceEvents.map(traceEvent => (
+            {relatedEvents.map(traceEvent => (
               <div
                 key={traceEvent.id}
                 style={{
@@ -330,6 +361,281 @@ interface TraceIndex {
   byFetchId: ReadonlyMap<number, readonly number[]>
 }
 
+interface EventListRow {
+  key: string
+  representative: DevtoolsEvent
+  kind: string
+  details: string
+  queryId?: string
+  traceId?: number
+}
+
+interface ActivityRow extends EventListRow {
+  events: DevtoolsEvent[]
+  searchText: string
+}
+
+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,
+    details: eventDetails(item),
+    ...(queryId === undefined ? {} : { queryId }),
+    ...(traceId === undefined ? {} : { traceId }),
+  }
+}
+
+function buildActivities(events: readonly DevtoolsEvent[], index: TraceIndex): 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 queryId = group.events.map(item => eventQueryId(item.event)).find(Boolean)
+      return {
+        key,
+        representative,
+        events: group.events,
+        kind,
+        details,
+        searchText: [kind, details, ...group.events.map(item => eventSearchText(item))]
+          .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
+  switch (event.kind) {
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'mutate:end':
+    case 'mutate:error':
+    case 'mutate:rollback':
+      return `mutation:${event.mutationId}`
+    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 mutationOrActionStart = events.find(
+    item => item.event.kind === 'mutate:start' || item.event.kind === 'action:start',
+  )
+  if (mutationOrActionStart) return mutationOrActionStart
+
+  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 (key.startsWith('mutation:')) return 'mutation'
+  if (key.startsWith('action:')) 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 (key.startsWith('mutation:')) return mutationActivityDetails(representative, events)
+  if (key.startsWith('action:')) 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 merged', 'queries merged') : '',
+      effects.reconcile > 0
+        ? pluralActivity(effects.reconcile, 'query reconciled', 'queries reconciled')
+        : '',
+      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, 'query reconciled', 'queries reconciled')
+        : '',
+    ])
+  }
+
+  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)
+          : 'in flight',
+      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'
+          ? 'completed'
+          : 'in flight',
+    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'
+        ? 'completed'
+        : 'in flight',
+    terminal?.event.kind === 'action:end' || terminal?.event.kind === 'action:error'
+      ? formatMs(terminal.event.durationMs)
+      : '',
+  ])
+}
+
+function pluralActivity(count: number, singular: string, plural: string): string {
+  return `${count} ${count === 1 ? singular : plural}`
+}
+
 function buildTraceIndex(events: readonly DevtoolsEvent[]): TraceIndex {
   const byFetchId = new Map<number, readonly number[]>()
   for (const item of events) {
@@ -504,6 +810,9 @@ function EventKind({ kind }: { kind: string }) {
 }
 
 function eventTone(kind: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
+  if (kind === 'connection' || kind === 'fetch' || kind === 'cache edit') return 'blue'
+  if (kind === 'mutation' || kind === 'mutation cache' || kind === 'optimistic') return 'amber'
+  if (kind === 'action') return 'green'
   if (kind === 'connection:connected' || kind === 'connection:reconnected') return 'green'
   if (
     kind === 'connection:disconnected' ||
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 29712982..57618a9e 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -11,6 +11,15 @@ interface QueryRow {
   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) &&
+    queries.every(query => query.subscriberCount === 0)
+  )
+}
+
 const QUERY_COLUMNS = [
   {
     label: 'query',
@@ -84,6 +93,7 @@ export function QueriesTab({
       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 === 'active' && query.skipped === true) return []
       if (
         visibility === 'active' &&

From 84da409e7be7b04af953f1f167424bd838f76bad Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 18:24:36 +0100
Subject: [PATCH 05/42] Add interactive JSON inspection

---
 DEVTOOLS_SPEC.md              |   6 +
 extensions/README.md          |   1 +
 lib/devtools/CacheTab.tsx     |  17 +-
 lib/devtools/EventsTab.tsx    |  30 +--
 lib/devtools/JsonViewer.tsx   | 433 ++++++++++++++++++++++++++++++++++
 lib/devtools/QueryDetails.tsx |  34 +--
 lib/devtools/WritesTab.tsx    |  20 +-
 7 files changed, 456 insertions(+), 85 deletions(-)
 create mode 100644 lib/devtools/JsonViewer.tsx

diff --git a/DEVTOOLS_SPEC.md b/DEVTOOLS_SPEC.md
index bab814f8..bfefb16f 100644
--- a/DEVTOOLS_SPEC.md
+++ b/DEVTOOLS_SPEC.md
@@ -60,6 +60,12 @@ present in Figbird's cache but currently have no subscribers, so they remain ins
 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,
diff --git a/extensions/README.md b/extensions/README.md
index c25ac95f..082f9db5 100644
--- a/extensions/README.md
+++ b/extensions/README.md
@@ -68,6 +68,7 @@ The shared browser extension version lives in `extensions/version.json`. See
 - 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.
diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index b5667d69..9fbdb3dc 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import { compactJson, formatAge, 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,
@@ -415,21 +416,7 @@ function CacheEntityDetails({
         </DetailSection>
       ) : (
         <DetailSection label='Current value'>
-          <pre
-            style={{
-              ...styles.code,
-              maxHeight: 360,
-              overflow: 'auto',
-              whiteSpace: 'pre-wrap',
-              overflowWrap: 'anywhere',
-              margin: 0,
-              padding: 10,
-              background: colors.panel2,
-              borderRadius: 4,
-            }}
-          >
-            {prettyJson(entity.value)}
-          </pre>
+          <JsonViewer value={entity.value} />
         </DetailSection>
       )}
 
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index 1993970e..1e3df0f7 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import type { DevtoolsEvent } from './collector.js'
 import type { EventVisibility } from './Devtools.js'
-import { compactJson, formatClock, formatMs, prettyJson } from './format.js'
+import { compactJson, formatClock, formatMs } from './format.js'
+import { JsonViewer } from './JsonViewer.js'
 import type { EventQueryScope } from './model.js'
 import {
   DetailSection,
@@ -215,20 +216,7 @@ function EventDetails({
         {queryId ? <DetailStat label='Query ID' value={queryId} /> : null}
       </div>
       <DetailSection label={item.event.kind === 'realtime' ? 'Realtime payload' : 'Event payload'}>
-        <pre
-          style={{
-            ...styles.code,
-            whiteSpace: 'pre-wrap',
-            overflowWrap: 'anywhere',
-            margin: 0,
-            padding: 10,
-            color: payload === undefined ? colors.faint : colors.text,
-            background: colors.panel2,
-            borderRadius: 4,
-          }}
-        >
-          {payload === undefined ? 'No payload' : prettyJson(payload)}
-        </pre>
+        <JsonViewer value={payload} emptyLabel='No payload' />
       </DetailSection>
       {relatedEvents && relatedEvents.length > 1 ? (
         <DetailSection label={relatedLabel ?? 'Related activity'}>
@@ -262,17 +250,7 @@ function EventDetails({
         </DetailSection>
       ) : null}
       <DetailSection label='Full event'>
-        <pre
-          style={{
-            ...styles.code,
-            whiteSpace: 'pre-wrap',
-            overflowWrap: 'anywhere',
-            margin: 0,
-            color: colors.muted,
-          }}
-        >
-          {prettyJson(displayEvent(item.event))}
-        </pre>
+        <JsonViewer value={displayEvent(item.event)} />
       </DetailSection>
     </DetailsPane>
   )
diff --git a/lib/devtools/JsonViewer.tsx b/lib/devtools/JsonViewer.tsx
new file mode 100644
index 00000000..019e1cbd
--- /dev/null
+++ b/lib/devtools/JsonViewer.tsx
@@ -0,0 +1,433 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { buttonStyle, useDevtoolsTheme } from './ui.js'
+
+type JsonPrimitive = null | boolean | number | string
+type JsonTreeValue =
+  JsonPrimitive | JsonTreeValue[] | { [key: string]: JsonTreeValue } | SpecialValue
+
+interface SpecialValue {
+  __figbirdJsonSpecial: true
+  text: string
+}
+
+export function JsonViewer({
+  value,
+  emptyLabel = 'No data available',
+  maxHeight = 360,
+}: {
+  value: unknown
+  emptyLabel?: string
+  maxHeight?: number
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const [raw, setRaw] = useState(false)
+  const [expandAll, setExpandAll] = useState(false)
+  const normalized = useMemo(() => normalizeJson(value), [value])
+
+  if (value === undefined) {
+    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,
+        }}
+      >
+        <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}
+        <button
+          type='button'
+          aria-pressed={raw}
+          style={jsonButtonStyle(colors, raw)}
+          onClick={() => setRaw(current => !current)}
+        >
+          Raw
+        </button>
+      </div>
+      <div
+        style={{
+          ...styles.code,
+          maxHeight,
+          overflow: 'auto',
+          padding: '8px 10px',
+          lineHeight: 1.55,
+        }}
+      >
+        {raw ? (
+          <pre
+            style={{
+              font: 'inherit',
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'anywhere',
+              margin: 0,
+            }}
+          >
+            <HighlightedJson text={safePrettyJson(value)} />
+          </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,
+): JsonTreeValue {
+  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)
+  }
+
+  ancestors.add(value)
+  let normalized: JsonTreeValue
+  if (Array.isArray(value)) {
+    normalized = value.map(item => normalizeJson(item, ancestors, depth + 1))
+  } else if (value instanceof Map) {
+    normalized = Object.fromEntries(
+      [...value].map(([key, item]) => [String(key), normalizeJson(item, ancestors, depth + 1)]),
+    )
+  } else if (value instanceof Set) {
+    normalized = [...value].map(item => normalizeJson(item, ancestors, depth + 1))
+  } else {
+    try {
+      normalized = Object.fromEntries(
+        Object.entries(value).map(([key, item]) => [
+          key,
+          normalizeJson(item, ancestors, depth + 1),
+        ]),
+      )
+    } catch {
+      normalized = special('[Uninspectable object]')
+    }
+  }
+  ancestors.delete(value)
+  return normalized
+}
+
+function safePrettyJson(value: unknown): string {
+  const seen = new WeakSet<object>()
+  try {
+    return (
+      JSON.stringify(
+        value,
+        (_key, item: unknown) => {
+          if (typeof item === 'undefined') return '[undefined]'
+          if (typeof item === 'bigint') return `${String(item)}n`
+          if (typeof item === 'function') return `[Function ${item.name || 'anonymous'}]`
+          if (typeof item === 'symbol') return String(item)
+          if (item instanceof Error) return { name: item.name, message: item.message }
+          if (item instanceof Map) return Object.fromEntries(item)
+          if (item instanceof Set) return [...item]
+          if (item && typeof item === 'object') {
+            if (seen.has(item)) return '[Circular]'
+            seen.add(item)
+          }
+          return item
+        },
+        2,
+      ) ?? String(value)
+    )
+  } catch {
+    return '[unserializable 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/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index e1e9e839..ade19d64 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react'
 import type { QueryRecord } from './collector.js'
 import { compactJson, formatMs, prettyJson } from './format.js'
+import { JsonViewer } from './JsonViewer.js'
 import type {
   DevtoolsOperation,
   OperationPagination,
@@ -268,22 +269,7 @@ export function QueryDetails({
         label='Query data'
         meta={activeQuery.skipped ? 'skipped' : plural(activeQuery.itemCount, 'row', 'rows')}
       >
-        <pre
-          style={{
-            ...styles.code,
-            maxHeight: 360,
-            overflow: 'auto',
-            whiteSpace: 'pre-wrap',
-            overflowWrap: 'anywhere',
-            margin: 0,
-            padding: 10,
-            color: activeQuery.data === undefined ? colors.faint : colors.text,
-            background: colors.panel2,
-            borderRadius: 4,
-          }}
-        >
-          {activeQuery.data === undefined ? 'No data available' : prettyJson(activeQuery.data)}
-        </pre>
+        <JsonViewer value={activeQuery.data} />
       </QueryDetailSection>
       <details
         key={activeQueryId ?? operation.key}
@@ -318,19 +304,9 @@ export function QueryDetails({
             {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>
+        <div style={{ marginTop: 9 }}>
+          <JsonViewer value={activeQuery.query ?? {}} />
+        </div>
       </details>
     </DetailsPane>
   )
diff --git a/lib/devtools/WritesTab.tsx b/lib/devtools/WritesTab.tsx
index cc5122db..9a11a3a7 100644
--- a/lib/devtools/WritesTab.tsx
+++ b/lib/devtools/WritesTab.tsx
@@ -1,6 +1,7 @@
 import { useState, type MouseEvent as ReactMouseEvent } from 'react'
 import type { WriteRecord } from './collector.js'
-import { formatClock, formatMs, prettyJson } from './format.js'
+import { formatClock, formatMs } from './format.js'
+import { JsonViewer } from './JsonViewer.js'
 import {
   Badge,
   DetailSection,
@@ -186,7 +187,7 @@ function WriteDetails({
   onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
   onClose: () => void
 }) {
-  const { colors, styles } = useDevtoolsTheme()
+  const { colors } = useDevtoolsTheme()
   const label =
     write.type === 'action'
       ? (write.name ?? '(anonymous action)')
@@ -226,21 +227,10 @@ function WriteDetails({
         </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>
+        <JsonViewer value={payload} emptyLabel='No payload' />
       </DetailSection>
       <DetailSection label='Arguments'>
-        <pre style={{ ...styles.code, whiteSpace: 'pre-wrap', margin: 0 }}>
-          {prettyJson(write.args ?? [])}
-        </pre>
+        <JsonViewer value={write.args ?? []} />
       </DetailSection>
       <span style={{ color: colors.faint }} title={write.id}>
         Write ID

From ccd514e2a031aa8e02cd9dae234d80f7f3e4b01b Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 18:58:01 +0100
Subject: [PATCH 06/42] Tighten devtools causal architecture

---
 lib/core/events.ts            |  16 +-
 lib/core/mutationLanes.ts     |   6 +
 lib/core/queryStore.ts        | 236 ++++++++++------
 lib/core/queryTypes.ts        |  12 +-
 lib/core/windowMaintenance.ts |   8 +-
 lib/devtools/CacheTab.tsx     |  26 +-
 lib/devtools/EventsTab.tsx    | 507 +---------------------------------
 lib/devtools/JsonViewer.tsx   |  33 +--
 lib/devtools/collector.ts     |   7 +-
 lib/devtools/eventModel.ts    | 500 +++++++++++++++++++++++++++++++++
 test/mutations.test.ts        |  19 +-
 11 files changed, 737 insertions(+), 633 deletions(-)
 create mode 100644 lib/devtools/eventModel.ts

diff --git a/lib/core/events.ts b/lib/core/events.ts
index 2b510e9e..3906bf05 100644
--- a/lib/core/events.ts
+++ b/lib/core/events.ts
@@ -1,4 +1,5 @@
-import type { EventType } from './queryTypes.js'
+import type { EventType, TraceCause } from './queryTypes.js'
+export type { TraceCause } from './queryTypes.js'
 
 /**
  * Mutation method names (subset usable in observability events).
@@ -13,14 +14,6 @@ export type MutationMethod = 'create' | 'update' | 'patch' | 'remove'
 // oxlint-disable-next-line @typescript-eslint/no-empty-object-type
 export type MutationEventMethod = MutationMethod | (string & {})
 
-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 }
-
 export type FetchReason = 'subscription' | 'manual' | 'reconcile' | 'retry' | 'follow-up'
 
 export interface CacheQueryEffect {
@@ -140,6 +133,7 @@ export type FigbirdEvent =
       kind: 'mutate:start'
       /** Correlates the start/end/error/rollback events of one mutation. */
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       id?: string | number
@@ -150,6 +144,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
@@ -159,6 +154,7 @@ export type FigbirdEvent =
   | {
       kind: 'mutate:end'
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       durationMs: number
@@ -168,6 +164,7 @@ export type FigbirdEvent =
   | {
       kind: 'mutate:error'
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       durationMs: number
@@ -178,6 +175,7 @@ export type FigbirdEvent =
   | {
       kind: 'mutate:rollback'
       mutationId: number
+      traceId?: number
       serviceName: string
       method: MutationEventMethod
       id?: string | number
diff --git a/lib/core/mutationLanes.ts b/lib/core/mutationLanes.ts
index 244acae9..b3d16eef 100644
--- a/lib/core/mutationLanes.ts
+++ b/lib/core/mutationLanes.ts
@@ -5,6 +5,7 @@ import {
   type MutationDescriptor,
   type ProcessedProjectionEvent,
   type ProcessedRealtimeEvent,
+  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. */
@@ -177,6 +179,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
           item: eventItem,
           previousItem,
           itemId: entityKey(state.id),
+          ...(entry.cause === undefined ? {} : { cause: entry.cause }),
         }
       }
     }
@@ -270,6 +273,7 @@ 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({
@@ -281,6 +285,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
           previousItem,
           itemId: entityKey(lane.id),
           mutationLaneKey: lane.key,
+          ...(cause === undefined ? {} : { cause }),
         })
       } else {
         events.push({
@@ -292,6 +297,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
           previousItem,
           itemId: entityKey(lane.id),
           mutationLaneKey: lane.key,
+          ...(cause === undefined ? {} : { cause }),
         })
       }
     }
diff --git a/lib/core/queryStore.ts b/lib/core/queryStore.ts
index cce273e2..e80289bc 100644
--- a/lib/core/queryStore.ts
+++ b/lib/core/queryStore.ts
@@ -96,6 +96,8 @@ const DEFAULT_RETRIES = 3
 type StoreResponse<TMeta> =
   QueryResponse<unknown, TMeta | undefined> | PageResponse<unknown[], TMeta>
 
+type MutationTraceCause = Extract<TraceCause, { kind: 'mutation' }> & { mutationId: number }
+
 function resolveCreateOptimisticItem(desc: CreateMutationDescriptor): unknown {
   const { optimistic } = desc
   return optimistic == null || typeof optimistic === 'boolean' ? desc.data : optimistic
@@ -105,12 +107,9 @@ function mergeTraceCauses(
   current: readonly TraceCause[],
   next: readonly TraceCause[],
 ): TraceCause[] {
-  const keyed = new Map<string, TraceCause>()
+  const keyed = new Map<number, TraceCause>()
   for (const cause of [...current, ...next]) {
-    const key = `${cause.kind}:${cause.traceId}${
-      cause.kind === 'mutation' ? `:${cause.mutationId ?? ''}` : ''
-    }`
-    keyed.set(key, cause)
+    keyed.set(cause.traceId, cause)
   }
   return [...keyed.values()]
 }
@@ -124,12 +123,13 @@ interface MutationTrackingEntry {
 }
 
 interface MutationTrackingHooks<T> {
-  onSuccess?: (result: T) => void
-  onError?: (error: Error, mutationId: number) => void
+  onSuccess?: (result: T, cause: MutationTraceCause) => void
+  onError?: (error: Error, cause: MutationTraceCause) => void
 }
 
 interface TrackedMutation<T> {
   mutationId: number
+  cause: MutationTraceCause
   promise: Promise<T>
 }
 
@@ -138,6 +138,7 @@ interface QueuedMutation {
   args: unknown[]
   optimistic: boolean
   attempt: GatedMutationAttempt
+  cause?: MutationTraceCause
 }
 
 interface AppliedEventEffect {
@@ -376,11 +377,12 @@ export class QueryStore<
     }
 
     const traceId = this.#nextTraceId++
+    const cause = { kind: 'manual' as const, traceId }
     const queryEffects = new Map<string, 'merged' | 'reconcile'>()
     const event: ProcessedRealtimeEvent = {
       origin: 'authoritative',
       source: 'devtools',
-      traceId,
+      cause,
       serviceName,
       type: 'patched',
       item,
@@ -692,8 +694,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>>
@@ -762,21 +764,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, cause) => {
           if (!optimistic) return
-          this.#processEvent(desc.serviceName, { type: 'removed', item: optimisticItem })
+          this.#processEvent(desc.serviceName, { type: 'removed', item: optimisticItem }, cause)
           this.#events.emit({
             kind: 'mutate:rollback',
-            mutationId,
+            mutationId: cause.mutationId,
+            traceId: cause.traceId,
             serviceName: desc.serviceName,
             method: desc.method,
           })
@@ -801,11 +809,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,
+          ),
       },
     })
   }
@@ -841,13 +853,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, cause) => {
+          this.#settleQueuedMutation(lane, entry, { ok: false, error }, cause)
           if (optimistic) {
             this.#events.emit({
               kind: 'mutate:rollback',
-              mutationId,
+              mutationId: cause.mutationId,
+              traceId: cause.traceId,
               serviceName: desc.serviceName,
               method: desc.method,
               id,
@@ -857,7 +871,8 @@ export class QueryStore<
       },
     )
 
-    this.#applyProjection(this.#mutationLanes.enqueue(lane, entry), true)
+    entry.cause = tracked.cause
+    this.#applyProjection(this.#mutationLanes.enqueue(lane, entry), true, tracked.cause)
     entry.attempt.whenReady(() => {
       this.#expediteMutationPredecessors(lane, entry)
       this.#drainMutationLane(lane)
@@ -870,10 +885,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.#applyProjection(projection, true, tracked.cause)
         this.#events.emit({
           kind: 'mutate:update',
           mutationId: tracked.mutationId,
+          traceId: tracked.cause.traceId,
           serviceName: next.serviceName,
           method: next.method,
           id,
@@ -882,7 +898,7 @@ export class QueryStore<
         })
         return true
       },
-      cancel: error => this.#cancelQueuedMutation(lane, entry, error),
+      cancel: error => this.#cancelQueuedMutation(lane, entry, error, tracked.cause),
     }
   }
 
@@ -928,10 +944,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)
   }
 
@@ -939,6 +960,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
@@ -950,7 +972,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)
     }
@@ -973,8 +995,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()
@@ -1039,15 +1061,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,
@@ -1078,29 +1100,36 @@ export class QueryStore<
    */
   #trackMutation<T>(
     entry: MutationTrackingEntry,
-    run: () => Promise<T>,
+    run: (cause: MutationTraceCause) => 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 })
+    const cause = {
+      kind: 'mutation' as const,
+      traceId: this.#nextTraceId++,
+      mutationId,
+    }
     this.#events.emit({
       kind: 'mutate:start',
       mutationId,
+      traceId: cause.traceId,
       serviceName,
       method,
       ...idField,
       optimistic,
       args,
     })
-    const promise = run().then(
+    const promise = run(cause).then(
       result => {
-        hooks?.onSuccess?.(result)
+        hooks?.onSuccess?.(result, cause)
         this.#mutations.end(mutationId)
         this.#events.emit({
           kind: 'mutate:end',
           mutationId,
+          traceId: cause.traceId,
           serviceName,
           method,
           durationMs: Date.now() - startedAt,
@@ -1111,11 +1140,12 @@ export class QueryStore<
       },
       (err: unknown) => {
         const error = err instanceof Error ? err : new Error(String(err))
-        hooks?.onError?.(error, mutationId)
+        hooks?.onError?.(error, cause)
         this.#mutations.end(mutationId)
         this.#events.emit({
           kind: 'mutate:error',
           mutationId,
+          traceId: cause.traceId,
           serviceName,
           method,
           durationMs: Date.now() - startedAt,
@@ -1126,7 +1156,7 @@ export class QueryStore<
         throw error
       },
     )
-    return { mutationId, promise }
+    return { mutationId, cause, promise }
   }
 
   // Query lifecycle
@@ -1217,12 +1247,12 @@ export class QueryStore<
         if (journal.overflowed) {
           this.#discardFetchedResponse(queryId)
         } else {
-          const cacheTraceId = context.causes[0]?.traceId
+          const cacheCause = context.causes[0]
           this.#fetched({
             queryId,
             result,
             journalEvents: journal.events,
-            ...(cacheTraceId === undefined ? {} : { traceId: cacheTraceId }),
+            ...(cacheCause === undefined ? {} : { cause: cacheCause }),
           })
         }
         this.#recordFetchStats(queryId, { ok: true, durationMs })
@@ -1458,12 +1488,12 @@ export class QueryStore<
     queryId,
     result,
     journalEvents,
-    traceId,
+    cause,
   }: {
     queryId: string
     result: StoreResponse<TMeta>
     journalEvents: readonly ProcessedRealtimeEvent[]
-    traceId?: number
+    cause?: TraceCause
   }): void {
     let shouldRefetch = false
     let hadEffectiveJournalEvents = false
@@ -1492,9 +1522,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)
         }
       }
@@ -1581,7 +1617,7 @@ export class QueryStore<
                     item,
                     previousItem: currentItem ?? null,
                     itemId: key,
-                    ...(traceId === undefined ? {} : { traceId }),
+                    ...(cause === undefined ? {} : { cause }),
                   },
                   reconcileQueryIds: new Set(),
                   queryEffects: new Map([[queryId, 'merged']]),
@@ -1647,7 +1683,7 @@ export class QueryStore<
             service,
             serviceName: query.desc.serviceName,
             processedEvents: diffEvents.map(event =>
-              traceId === undefined ? event : { ...event, traceId },
+              cause === undefined ? event : { ...event, cause },
             ),
             touch,
             excludeQueryId: queryId,
@@ -1798,11 +1834,11 @@ export class QueryStore<
     this.#realtime.add(serviceName)
   }
 
-  #emitRealtimeForItems(serviceName: string, type: Event['type'], items: unknown[]): number[] {
-    const traceIds: number[] = []
+  #emitRealtimeForItems(serviceName: string, type: Event['type'], items: unknown[]): TraceCause[] {
+    const causes: TraceCause[] = []
     for (const item of items) {
       const traceId = this.#nextTraceId++
-      traceIds.push(traceId)
+      causes.push({ kind: 'realtime', traceId })
       this.#events.emit({
         kind: 'realtime',
         traceId,
@@ -1812,7 +1848,7 @@ export class QueryStore<
         item,
       })
     }
-    return traceIds
+    return causes
   }
 
   /** Push an authoritative event onto the atomic queue. */
@@ -1820,7 +1856,7 @@ export class QueryStore<
     serviceName: string,
     event: Event,
     source: 'realtime' | 'mutation',
-    traceId: number,
+    cause: TraceCause,
   ): void {
     const items = Array.isArray(event.item) ? event.item : [event.item]
     this.#eventQueue.push({
@@ -1829,11 +1865,11 @@ export class QueryStore<
       serviceName,
       type: event.type,
       items,
-      traceIds: [traceId],
+      causes: [cause],
     })
   }
 
-  #queuedProjectionEvent(change: ProjectionChange): QueuedEvent | null {
+  #queuedProjectionEvent(change: ProjectionChange, cause?: TraceCause): QueuedEvent | null {
     const event = this.#projectionEvent(change)
     if (!event) return null
     return {
@@ -1843,44 +1879,62 @@ export class QueryStore<
       type: event.type,
       items: Array.isArray(event.item) ? event.item : [event.item],
       mutationLaneKey: change.lane.key,
+      ...(cause === undefined ? {} : { causes: [cause] }),
     }
   }
 
   /** Apply an event immediately — used for mutation results and optimistic writes. */
-  #processEvent(serviceName: string, event: Event): void {
-    this.#ingestAuthoritativeEvent(serviceName, event, true, 'mutation')
+  #processEvent(serviceName: string, event: Event, cause: TraceCause): void {
+    this.#ingestAuthoritativeEvent(serviceName, event, {
+      immediate: true,
+      source: 'mutation',
+      cause,
+    })
   }
 
   /** Queue a realtime event for batched processing. */
   #queueEvent(serviceName: string, event: Event): void {
-    this.#ingestAuthoritativeEvent(serviceName, event, false, 'realtime')
+    this.#ingestAuthoritativeEvent(serviceName, event, {
+      immediate: false,
+      source: 'realtime',
+    })
   }
 
   #ingestAuthoritativeEvent(
     serviceName: string,
     event: Event,
-    immediate: boolean,
-    source: 'realtime' | 'mutation',
+    context:
+      | { immediate: false; source: 'realtime' }
+      | { immediate: true; source: 'mutation'; cause: TraceCause },
   ): void {
     const items = Array.isArray(event.item) ? event.item : [event.item]
-    const traceIds = this.#emitRealtimeForItems(serviceName, event.type, items)
+    const causes =
+      context.source === 'realtime'
+        ? this.#emitRealtimeForItems(serviceName, event.type, items)
+        : items.map(() => context.cause)
     for (const [index, item] of items.entries()) {
-      const accepted = this.#acceptLaneAuthoritative(serviceName, event.type, item)
+      const accepted = this.#acceptLaneAuthoritative(
+        serviceName,
+        event.type,
+        item,
+        context.source,
+        causes[index],
+      )
       if (!accepted.handled) {
         this.#enqueueAuthoritativeEvent(
           serviceName,
           { type: event.type, item },
-          source,
-          traceIds[index]!,
+          context.source,
+          causes[index]!,
         )
         continue
       }
-      if (accepted.projection) this.#applyProjection(accepted.projection, false)
+      if (accepted.projection) this.#applyProjection(accepted.projection, false, causes[index])
     }
 
     if (this.#eventQueue.length === 0) return
 
-    if (immediate) {
+    if (context.immediate) {
       this.#processQueuedEvents()
       return
     }
@@ -1903,6 +1957,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)
@@ -1911,7 +1967,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 }
   }
 
@@ -1985,29 +2047,27 @@ export class QueryStore<
   ): PublishedEventEffects {
     const immediateReconciles = new Set<string>()
     const reconcileCauses = new Map<string, TraceCause[]>()
-    const traceIds = new Map<ProcessedRealtimeEvent, number>()
+    const resolvedEffects = effects.map(effect => ({
+      ...effect,
+      cause: effect.event.cause ?? this.#fallbackEventCause(effect.event.source),
+    }))
     const hasAuthoritative =
       refetchPolicy === 'realtime' &&
       effects.some(effect => effect.event.origin === 'authoritative')
-    const addReconcile = (queryId: string, cause: TraceCause | null) => {
+    const addReconcile = (queryId: string, cause: TraceCause) => {
       immediateReconciles.add(queryId)
-      if (!cause) return
       const current = reconcileCauses.get(queryId) ?? []
       reconcileCauses.set(queryId, mergeTraceCauses(current, [cause]))
     }
 
-    for (const { event, reconcileQueryIds, queryEffects, observabilityOnly } of effects) {
-      const traceId = event.traceId ?? this.#nextTraceId++
-      traceIds.set(event, traceId)
+    for (const {
+      event,
+      reconcileQueryIds,
+      queryEffects,
+      observabilityOnly,
+      cause,
+    } of resolvedEffects) {
       if (observabilityOnly) continue
-      const cause: TraceCause | null =
-        event.source === 'realtime'
-          ? { kind: 'realtime', traceId }
-          : event.source === 'mutation' || event.source === 'optimistic'
-            ? { kind: 'mutation', traceId }
-            : event.source === 'fetch'
-              ? { kind: 'fetch-rebase', traceId }
-              : null
       const deferred =
         event.origin === 'projection' &&
         this.#mutationLanes.deferQueryIds(event.mutationLaneKey, reconcileQueryIds)
@@ -2046,10 +2106,10 @@ export class QueryStore<
       }
     }
 
-    for (const { event, queryEffects } of effects) {
+    for (const { event, queryEffects, cause } of resolvedEffects) {
       this.#events.emit({
         kind: 'cache:updated',
-        traceId: traceIds.get(event)!,
+        traceId: cause.traceId,
         source: event.source,
         serviceName: event.serviceName,
         type: event.type,
@@ -2063,6 +2123,14 @@ export class QueryStore<
     return { reconcileQueryIds: immediateReconciles, reconcileCauses }
   }
 
+  #fallbackEventCause(source: ProcessedRealtimeEvent['source']): TraceCause {
+    const traceId = this.#nextTraceId++
+    if (source === 'realtime') return { kind: 'realtime', traceId }
+    if (source === 'mutation' || source === 'optimistic') return { kind: 'mutation', traceId }
+    if (source === 'fetch') return { kind: 'fetch-rebase', traceId }
+    return { kind: 'manual', traceId }
+  }
+
   /** Publish an authoritative transition whose entity-cache effect already happened. */
   #publishAppliedEvent(event: ProcessedRealtimeEvent): void {
     let effects: AppliedEventEffect[] = []
diff --git a/lib/core/queryTypes.ts b/lib/core/queryTypes.ts
index 187a387d..36bd96c5 100644
--- a/lib/core/queryTypes.ts
+++ b/lib/core/queryTypes.ts
@@ -23,6 +23,14 @@ 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 }
+
 /**
  * Queued event for batch processing
  */
@@ -31,7 +39,7 @@ interface QueuedEventBase {
   type: EventType
   items: unknown[]
   source: 'realtime' | 'mutation' | 'optimistic'
-  traceIds?: readonly number[]
+  causes?: readonly TraceCause[]
 }
 
 /** Internal entity changes waiting at the store's atomic event boundary. */
@@ -52,7 +60,7 @@ interface ProcessedEventBase {
   /** Always defined — events whose item has no resolvable id are never applied. */
   itemId: EntityKey
   source: 'realtime' | 'mutation' | 'fetch' | 'optimistic' | 'devtools'
-  traceId?: number
+  cause?: TraceCause
 }
 
 /** An optimistic entity change after cache application. */
diff --git a/lib/core/windowMaintenance.ts b/lib/core/windowMaintenance.ts
index 33789aa2..6e43c78e 100644
--- a/lib/core/windowMaintenance.ts
+++ b/lib/core/windowMaintenance.ts
@@ -169,7 +169,7 @@ export function applyEventsToService<TMeta>({
   for (const event of events) {
     const { type, items } = event
     for (const [index, item] of items.entries()) {
-      const traceId = event.traceIds?.[index]
+      const cause = event.causes?.[index]
       if (type === 'created') {
         const incomingId = getId(item)
         if (incomingId !== undefined) {
@@ -183,7 +183,7 @@ export function applyEventsToService<TMeta>({
             previousItem,
             itemId,
             source: event.source,
-            ...(traceId === undefined ? {} : { traceId }),
+            ...(cause === undefined ? {} : { cause }),
             ...(event.origin === 'projection'
               ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
               : { origin: event.origin }),
@@ -203,7 +203,7 @@ export function applyEventsToService<TMeta>({
               previousItem: currItem ?? null,
               itemId,
               source: event.source,
-              ...(traceId === undefined ? {} : { traceId }),
+              ...(cause === undefined ? {} : { cause }),
               ...(event.origin === 'projection'
                 ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
                 : { origin: event.origin }),
@@ -223,7 +223,7 @@ export function applyEventsToService<TMeta>({
             previousItem,
             itemId,
             source: event.source,
-            ...(traceId === undefined ? {} : { traceId }),
+            ...(cause === undefined ? {} : { cause }),
             ...(event.origin === 'projection'
               ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
               : { origin: event.origin }),
diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 9fbdb3dc..7e8434ea 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -297,16 +297,24 @@ function CacheEntityDetails({
     if (!editor) return
     setSaving(true)
     setMessage(null)
-    const result = await editor.update(service.serviceName, entity.id, value)
-    setSaving(false)
-    if (!result.ok) {
-      setMessage({ tone: 'red', text: result.error ?? 'Cache edit failed' })
-      return
+    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)
     }
-    if (rememberUndo) setUndoValue(entity.value)
-    else setUndoValue(null)
-    setEditing(false)
-    setMessage({ tone: 'green', text: 'Applied in memory. No server request was sent.' })
   }
 
   return (
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index 1e3df0f7..4964d3b4 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -1,7 +1,20 @@
 import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
 import type { DevtoolsEvent } from './collector.js'
 import type { EventVisibility } from './Devtools.js'
-import { compactJson, formatClock, formatMs } from './format.js'
+import {
+  buildActivities,
+  buildTraceIndex,
+  displayEvent,
+  eventDetails,
+  eventPayload,
+  eventQueryId,
+  eventSearchText,
+  eventTone,
+  rawEventRow,
+  traceIdsForEvent,
+  type EventListRow,
+} from './eventModel.js'
+import { formatClock } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
 import type { EventQueryScope } from './model.js'
 import {
@@ -73,6 +86,7 @@ export function EventsTab({
       visibility === 'activity' && activity ? activity.representative.id : traceEvents.at(-1)!.id,
     )
   }, [activities, selectedEvent, selectedTraceId, traceEvents, traceIndex, visibility])
+
   return (
     <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
       <div style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
@@ -256,43 +270,6 @@ function EventDetails({
   )
 }
 
-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 { name: event.error.name, message: event.error.message }
-    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
-  }
-}
-
-function displayEvent(event: DevtoolsEvent['event']): unknown {
-  if ('error' in event && event.error) {
-    return { ...event, error: { name: event.error.name, message: event.error.message } }
-  }
-  return event
-}
-
 function EventScopeBadge({
   scopes,
   queryId,
@@ -335,440 +312,6 @@ function EventScopeBadge({
   )
 }
 
-interface TraceIndex {
-  byFetchId: ReadonlyMap<number, readonly number[]>
-}
-
-interface EventListRow {
-  key: string
-  representative: DevtoolsEvent
-  kind: string
-  details: string
-  queryId?: string
-  traceId?: number
-}
-
-interface ActivityRow extends EventListRow {
-  events: DevtoolsEvent[]
-  searchText: string
-}
-
-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,
-    details: eventDetails(item),
-    ...(queryId === undefined ? {} : { queryId }),
-    ...(traceId === undefined ? {} : { traceId }),
-  }
-}
-
-function buildActivities(events: readonly DevtoolsEvent[], index: TraceIndex): 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 queryId = group.events.map(item => eventQueryId(item.event)).find(Boolean)
-      return {
-        key,
-        representative,
-        events: group.events,
-        kind,
-        details,
-        searchText: [kind, details, ...group.events.map(item => eventSearchText(item))]
-          .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
-  switch (event.kind) {
-    case 'mutate:start':
-    case 'mutate:update':
-    case 'mutate:end':
-    case 'mutate:error':
-    case 'mutate:rollback':
-      return `mutation:${event.mutationId}`
-    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 mutationOrActionStart = events.find(
-    item => item.event.kind === 'mutate:start' || item.event.kind === 'action:start',
-  )
-  if (mutationOrActionStart) return mutationOrActionStart
-
-  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 (key.startsWith('mutation:')) return 'mutation'
-  if (key.startsWith('action:')) 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 (key.startsWith('mutation:')) return mutationActivityDetails(representative, events)
-  if (key.startsWith('action:')) 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 merged', 'queries merged') : '',
-      effects.reconcile > 0
-        ? pluralActivity(effects.reconcile, 'query reconciled', 'queries reconciled')
-        : '',
-      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, 'query reconciled', 'queries reconciled')
-        : '',
-    ])
-  }
-
-  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)
-          : 'in flight',
-      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'
-          ? 'completed'
-          : 'in flight',
-    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'
-        ? 'completed'
-        : 'in flight',
-    terminal?.event.kind === 'action:end' || terminal?.event.kind === 'action:error'
-      ? formatMs(terminal.event.durationMs)
-      : '',
-  ])
-}
-
-function pluralActivity(count: number, singular: string, plural: string): string {
-  return `${count} ${count === 1 ? singular : plural}`
-}
-
-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 }
-}
-
-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])) ?? []
-}
-
-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':
-    case 'reconcile:decision':
-      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 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 joinEventParts(parts: string[]): string {
-  return parts.filter(Boolean).join(' · ')
-}
-
-function errorMessage(error: Error): string {
-  return error.message || String(error)
-}
-
 function EventKind({ kind }: { kind: string }) {
   const { colors } = useDevtoolsTheme()
   return (
@@ -786,23 +329,3 @@ function EventKind({ kind }: { kind: string }) {
     </span>
   )
 }
-
-function eventTone(kind: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
-  if (kind === 'connection' || kind === 'fetch' || kind === 'cache edit') return 'blue'
-  if (kind === 'mutation' || kind === 'mutation cache' || kind === 'optimistic') return 'amber'
-  if (kind === 'action') return 'green'
-  if (kind === 'connection:connected' || kind === 'connection:reconnected') return 'green'
-  if (
-    kind === 'connection:disconnected' ||
-    kind === 'connection:error' ||
-    kind === 'connection:reconnect-failed'
-  ) {
-    return 'red'
-  }
-  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
index 019e1cbd..784ca045 100644
--- a/lib/devtools/JsonViewer.tsx
+++ b/lib/devtools/JsonViewer.tsx
@@ -99,7 +99,7 @@ export function JsonViewer({
               margin: 0,
             }}
           >
-            <HighlightedJson text={safePrettyJson(value)} />
+            <HighlightedJson text={prettyNormalizedJson(normalized)} />
           </pre>
         ) : (
           <JsonTreeRoot value={normalized} expandAll={expandAll} />
@@ -354,32 +354,11 @@ function normalizeJson(
   return normalized
 }
 
-function safePrettyJson(value: unknown): string {
-  const seen = new WeakSet<object>()
-  try {
-    return (
-      JSON.stringify(
-        value,
-        (_key, item: unknown) => {
-          if (typeof item === 'undefined') return '[undefined]'
-          if (typeof item === 'bigint') return `${String(item)}n`
-          if (typeof item === 'function') return `[Function ${item.name || 'anonymous'}]`
-          if (typeof item === 'symbol') return String(item)
-          if (item instanceof Error) return { name: item.name, message: item.message }
-          if (item instanceof Map) return Object.fromEntries(item)
-          if (item instanceof Set) return [...item]
-          if (item && typeof item === 'object') {
-            if (seen.has(item)) return '[Circular]'
-            seen.add(item)
-          }
-          return item
-        },
-        2,
-      ) ?? String(value)
-    )
-  } catch {
-    return '[unserializable value]'
-  }
+function prettyNormalizedJson(value: JsonTreeValue): string {
+  return (
+    JSON.stringify(value, (_key, item: unknown) => (isSpecial(item) ? item.text : item), 2) ??
+    String(value)
+  )
 }
 
 function isContainer(
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index e924335e..be625f59 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -438,6 +438,7 @@ class FigbirdCollector implements Collector {
       ...service,
       entities: service.entities.map(entity => ({
         ...entity,
+        value: snapshotValue(entity.value),
         ...(this.#cacheProvenance.has(`${service.serviceName}:${entity.id}`)
           ? { lastChange: this.#cacheProvenance.get(`${service.serviceName}:${entity.id}`)! }
           : {}),
@@ -662,10 +663,7 @@ class FigbirdCollector implements Collector {
     if (event.fetchId !== undefined) {
       this.#fetchTraces.set(event.fetchId, {
         ...(event.reason ? { reason: event.reason } : {}),
-        traceIds:
-          event.causes?.flatMap(cause =>
-            cause.kind === 'realtime' || cause.kind === 'reconnect' ? [cause.traceId] : [],
-          ) ?? [],
+        traceIds: event.causes?.map(cause => cause.traceId) ?? [],
       })
     }
     const record = this.#ensureFetchRecord(event, at, true)
@@ -886,6 +884,7 @@ class FigbirdCollector implements Collector {
         return {
           kind: event.kind,
           mutationId: event.mutationId,
+          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
           serviceName: event.serviceName,
           method: event.method,
           optimistic: event.optimistic,
diff --git a/lib/devtools/eventModel.ts b/lib/devtools/eventModel.ts
new file mode 100644
index 00000000..5fc55f89
--- /dev/null
+++ b/lib/devtools/eventModel.ts
@@ -0,0 +1,500 @@
+import type { DevtoolsEvent } from './collector.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
+  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 { name: event.error.name, message: event.error.message }
+    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 displayEvent(event: DevtoolsEvent['event']): unknown {
+  if ('error' in event && event.error) {
+    return { ...event, error: { name: event.error.name, message: event.error.message } }
+  }
+  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,
+    details: eventDetails(item),
+    ...(queryId === undefined ? {} : { queryId }),
+    ...(traceId === undefined ? {} : { traceId }),
+  }
+}
+
+export function buildActivities(
+  events: readonly DevtoolsEvent[],
+  index: TraceIndex,
+): 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 queryId = group.events.map(item => eventQueryId(item.event)).find(Boolean)
+      return {
+        key,
+        representative,
+        events: group.events,
+        kind,
+        details,
+        searchText: [kind, details, ...group.events.map(item => eventSearchText(item))]
+          .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:')) 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:')) 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 merged', 'queries merged') : '',
+      effects.reconcile > 0
+        ? pluralActivity(effects.reconcile, 'query reconciled', 'queries reconciled')
+        : '',
+      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, 'query reconciled', 'queries reconciled')
+        : '',
+    ])
+  }
+
+  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)
+          : 'in flight',
+      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'
+          ? 'completed'
+          : 'in flight',
+    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'
+        ? 'completed'
+        : 'in flight',
+    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[]): string {
+  return [
+    formatClock(item.wallAt, { milliseconds: true }),
+    item.event.kind,
+    eventQueryId(item.event) ?? '',
+    ...(scopes?.map(scope => scope.label) ?? []),
+    eventDetails(item),
+  ].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
+    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 ? 'item' : 'items'}`,
+        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 joinEventParts(parts: string[]): string {
+  return parts.filter(Boolean).join(' · ')
+}
+
+function errorMessage(error: Error): string {
+  return error.message || String(error)
+}
+
+export function eventTone(kind: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
+  if (kind === 'connection' || kind === 'fetch' || kind === 'cache edit') return 'blue'
+  if (kind === 'mutation' || kind === 'mutation cache' || kind === 'optimistic') return 'amber'
+  if (kind === 'action') return 'green'
+  if (kind === 'connection:connected' || kind === 'connection:reconnected') return 'green'
+  if (
+    kind === 'connection:disconnected' ||
+    kind === 'connection:error' ||
+    kind === 'connection:reconnect-failed'
+  ) {
+    return 'red'
+  }
+  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/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 -----

From 3c8b6298b6b1507586e7a21cf142f93b3091cc21 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 23:48:33 +0100
Subject: [PATCH 07/42] Redesign devtools timeline as activity table

---
 lib/devtools/Devtools.tsx              |   3 +-
 lib/devtools/TimelineActivityTable.tsx | 569 ++++++++++++++++++++++
 lib/devtools/TimelineCanvas.tsx        | 635 -------------------------
 lib/devtools/TimelineOverview.tsx      | 200 +++++---
 lib/devtools/TimelineTab.tsx           | 289 +----------
 lib/devtools/collector.ts              |   2 +
 lib/devtools/timelineModel.ts          | 377 +++++++++++++++
 test/devtools.test.tsx                 |   6 +-
 8 files changed, 1098 insertions(+), 983 deletions(-)
 create mode 100644 lib/devtools/TimelineActivityTable.tsx
 delete mode 100644 lib/devtools/TimelineCanvas.tsx
 create mode 100644 lib/devtools/timelineModel.ts

diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index 580f5f00..bc06179d 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -93,7 +93,8 @@ export function FigbirdDevtoolsPanel({
   const timelineEmpty =
     snapshot.timeline.realtime.length === 0 &&
     snapshot.timeline.connection.length === 0 &&
-    snapshot.queries.every(query => query.spans.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)
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
new file mode 100644
index 00000000..ec2cbda9
--- /dev/null
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -0,0 +1,569 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+} from 'react'
+import { formatClock, formatMs } from './format.js'
+import { JsonViewer } from './JsonViewer.js'
+import type { TimelineRange } from './TimelineOverview.js'
+import { TimelineOverview } from './TimelineOverview.js'
+import type { TimelineActivity, TimelineExtent } from './timelineModel.js'
+import {
+  Badge,
+  DetailSection,
+  DetailStat,
+  DetailsPane,
+  buttonStyle,
+  toneColor,
+  useDetailsPaneWidth,
+  useDevtoolsTheme,
+} from './ui.js'
+
+const FOLLOW_THRESHOLD = 24
+
+type TimelineVisibility = 'all' | 'fetch' | 'realtime' | 'write' | 'connection' | 'errors'
+
+const COLUMNS = [
+  { label: 'Time', width: 96, minWidth: 78 },
+  { label: 'Activity', width: 250, minWidth: 160 },
+  { label: 'Status', width: 94, minWidth: 78 },
+  { label: 'Trigger', width: 120, minWidth: 88 },
+  { label: 'Cache effect', width: 150, minWidth: 100 },
+  { label: 'Result', width: 145, minWidth: 100 },
+  { label: 'Duration', width: 82, minWidth: 66 },
+  { label: 'Waterfall', width: 240, minWidth: 150 },
+] as const
+
+const VISIBILITY_OPTIONS: Array<{ value: TimelineVisibility; label: string }> = [
+  { value: 'all', label: 'All' },
+  { value: 'fetch', label: 'Fetches' },
+  { value: 'realtime', label: 'Realtime' },
+  { value: 'write', label: 'Writes' },
+  { value: 'connection', label: 'Connection' },
+  { value: 'errors', label: 'Errors' },
+]
+
+export function TimelineActivityTable({
+  activities,
+  extent,
+  nowPoint,
+  wallClockOffset,
+  follow,
+  onFollowChange,
+  onTraceSelect,
+}: {
+  activities: readonly TimelineActivity[]
+  extent: TimelineExtent | null
+  nowPoint: number
+  wallClockOffset: number
+  follow: boolean
+  onFollowChange: (value: boolean) => void
+  onTraceSelect?: (traceId: number) => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [visibility, setVisibility] = useState<TimelineVisibility>('all')
+  const [filter, setFilter] = useState('')
+  const [range, setRange] = useState<TimelineRange | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [columnWidths, setColumnWidths] = useState<number[]>(() =>
+    COLUMNS.map(column => column.width),
+  )
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const selected = activities.find(activity => activity.id === selectedId)
+  const normalizedFilter = filter.trim().toLowerCase()
+  const rows = activities.filter(activity => {
+    if (
+      visibility === 'errors'
+        ? !activity.error
+        : visibility !== 'all' && activity.kind !== visibility
+    ) {
+      return false
+    }
+    if (range && !intersects(activity, range, nowPoint)) return false
+    return normalizedFilter ? activity.searchText.includes(normalizedFilter) : true
+  })
+  const totalWidth = columnWidths.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])
+
+  useLayoutEffect(() => {
+    const scroll = scrollRef.current
+    if (!scroll || !follow) return
+    scroll.scrollTop = Math.max(0, scroll.scrollHeight - scroll.clientHeight)
+  }, [activities.length, follow])
+
+  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.
+        </div>
+      </div>
+    )
+  }
+
+  const displayExtent = range ?? extent
+  const visibleSelection =
+    selected && rows.some(activity => activity.id === selected.id) ? selected : null
+
+  const onColumnResizeStart = (index: number, event: ReactMouseEvent<HTMLSpanElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
+    const startX = event.clientX
+    const startWidth = columnWidths[index]!
+    const minWidth = COLUMNS[index]!.minWidth
+    const onMove = (move: MouseEvent) => {
+      setColumnWidths(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)
+  }
+
+  return (
+    <>
+      <TimelineOverview
+        activities={activities}
+        extent={extent}
+        range={range}
+        nowPoint={nowPoint}
+        onRangeChange={next => {
+          setRange(next)
+          setSelectedId(null)
+          if (next) onFollowChange(false)
+        }}
+      />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          minHeight: 38,
+          padding: '0 8px',
+          flexShrink: 0,
+          overflowX: 'auto',
+          borderBottom: `1px solid ${colors.border}`,
+          background: colors.toolbar,
+        }}
+      >
+        <input
+          aria-label='Filter timeline activity'
+          placeholder='Filter activity'
+          value={filter}
+          onChange={event => {
+            setFilter(event.target.value)
+            setSelectedId(null)
+          }}
+          style={{ ...styles.input, width: 190, paddingBlock: 4 }}
+        />
+        {VISIBILITY_OPTIONS.map(option => (
+          <button
+            key={option.value}
+            type='button'
+            aria-pressed={visibility === option.value}
+            onClick={() => {
+              setVisibility(option.value)
+              setSelectedId(null)
+            }}
+            style={buttonStyle(colors, visibility === option.value)}
+          >
+            {option.label}
+          </button>
+        ))}
+        <span style={{ flex: 1 }} />
+        {range ? (
+          <button
+            type='button'
+            aria-label='Clear timeline range'
+            title='Show the full recording'
+            onClick={() => {
+              setRange(null)
+              setSelectedId(null)
+            }}
+            style={buttonStyle(colors, true)}
+          >
+            {formatOffset(range.start - extent.start)}–{formatOffset(range.end - extent.start)} ×
+          </button>
+        ) : (
+          <span style={{ color: colors.faint, whiteSpace: 'nowrap' }}>
+            Drag overview to filter time
+          </span>
+        )}
+      </div>
+      <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 => {
+            if (!follow) return
+            const scroll = event.currentTarget
+            const distance = scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop
+            if (distance > FOLLOW_THRESHOLD) onFollowChange(false)
+          }}
+        >
+          <table style={{ ...styles.table, minWidth: totalWidth, width: totalWidth }}>
+            <colgroup>
+              {COLUMNS.map((column, index) => (
+                <col key={column.label} style={{ width: columnWidths[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}
+                    <span
+                      role='separator'
+                      aria-label={`Resize ${column.label} column`}
+                      aria-orientation='vertical'
+                      onMouseDown={event => onColumnResizeStart(index, event)}
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        right: -4,
+                        bottom: 0,
+                        width: 8,
+                        cursor: 'col-resize',
+                        zIndex: 2,
+                        borderRight: `1px solid ${colors.border}`,
+                      }}
+                    />
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map(activity => (
+                <ActivityRow
+                  key={activity.id}
+                  activity={activity}
+                  selected={activity.id === selectedId}
+                  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}
+            wallClockOffset={wallClockOffset}
+            width={detailsWidth}
+            onResizeStart={onDetailsResizeStart}
+            onClose={() => setSelectedId(null)}
+            {...(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>{rows.filter(activity => activity.kind === 'fetch').length} fetches</span>
+        <span>{rows.filter(activity => activity.error).length} errors</span>
+        <span>{formatMs(displayExtent.end - displayExtent.start)} window</span>
+      </div>
+    </>
+  )
+}
+
+function ActivityRow({
+  activity,
+  selected,
+  extent,
+  nowPoint,
+  wallClockOffset,
+  onSelect,
+}: {
+  activity: TimelineActivity
+  selected: boolean
+  extent: TimelineExtent
+  nowPoint: number
+  wallClockOffset: number
+  onSelect: () => void
+}) {
+  const { colors, styles } = useDevtoolsTheme()
+  return (
+    <tr
+      data-timeline-activity={activity.kind}
+      aria-selected={selected}
+      tabIndex={0}
+      title='Select activity details'
+      onClick={onSelect}
+      onKeyDown={event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          onSelect()
+        }
+      }}
+      style={{
+        cursor: 'pointer',
+        outline: 'none',
+        background: selected ? colors.activeButtonBg : undefined,
+        boxShadow: selected ? `inset 3px 0 ${colors.blue}` : undefined,
+      }}
+    >
+      <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} />
+          <span style={{ minWidth: 0 }}>
+            <strong
+              style={{
+                display: 'block',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                fontWeight: 650,
+              }}
+            >
+              {activity.label}
+            </strong>
+            {activity.detail ? (
+              <span
+                style={{
+                  display: 'block',
+                  color: colors.faint,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  marginTop: 2,
+                }}
+              >
+                {activity.detail}
+              </span>
+            ) : null}
+          </span>
+        </span>
+      </td>
+      <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 }: { value: string; error?: boolean }) {
+  const { colors, styles } = useDevtoolsTheme()
+  return (
+    <td
+      title={value}
+      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: 30,
+        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 ? 10 : 11,
+          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,
+  wallClockOffset,
+  width,
+  onResizeStart,
+  onClose,
+  onTraceSelect,
+}: {
+  activity: TimelineActivity
+  wallClockOffset: number
+  width: number
+  onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
+  onClose: () => void
+  onTraceSelect?: (traceId: number) => void
+}) {
+  const { colors } = useDevtoolsTheme()
+  return (
+    <DetailsPane
+      title={activity.label}
+      subtitle={activity.kind}
+      width={width}
+      onResizeStart={onResizeStart}
+      onClose={onClose}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+          gap: '8px 16px',
+          marginBottom: 16,
+        }}
+      >
+        <DetailStat label='Status' value={activity.status} />
+        <DetailStat
+          label='Started'
+          value={formatClock(wallClockOffset + activity.startAt, { milliseconds: true })}
+        />
+        <DetailStat label='Trigger' value={activity.trigger} />
+        <DetailStat label='Cache effect' value={activity.effect} />
+        <DetailStat label='Result' value={activity.result} />
+        <DetailStat
+          label='Duration'
+          value={activity.durationMs === undefined ? '—' : formatMs(activity.durationMs)}
+        />
+        {activity.serviceName ? <DetailStat label='Service' value={activity.serviceName} /> : null}
+        {activity.queryId ? <DetailStat label='Query ID' value={activity.queryId} /> : null}
+      </div>
+      {activity.payload !== undefined ? (
+        <DetailSection label={activity.kind === 'realtime' ? 'Event payload' : 'Parameters'}>
+          <JsonViewer value={activity.payload} />
+        </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>
+  )
+}
+
+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 062def88..00000000
--- a/lib/devtools/TimelineCanvas.tsx
+++ /dev/null
@@ -1,635 +0,0 @@
-import {
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type MouseEvent as ReactMouseEvent,
-} from 'react'
-import type { QuerySpan } from './collector.js'
-import { formatClock, formatMs } from './format.js'
-import { TimelineOverview, type TimelineViewport } from './TimelineOverview.js'
-import { toneColor, useDevtoolsTheme, type DevtoolsColors } from './ui.js'
-
-const FOLLOW_THRESHOLD = 24
-const GRID_TICK_MS = 5_000
-const DEFAULT_LABEL_WIDTH = 340
-const MIN_LABEL_WIDTH = 240
-const MAX_LABEL_WIDTH = 640
-const TIMELINE_LANE_HEIGHT = 46
-export const TIMELINE_PIXELS_PER_SECOND = 64
-
-export interface TimelineMarker {
-  at: number
-  label: string
-  tone: 'green' | 'amber' | 'red' | 'blue' | 'neutral'
-  traceId?: number
-}
-
-export interface TimelineTick {
-  at: number
-  traceId?: number
-}
-
-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
-      context: string
-      firstAt: number
-      ticks: TimelineTick[]
-    }
-  | {
-      kind: 'connection'
-      id: string
-      label: string
-      detail: string
-      context: string
-      firstAt: number
-      bars: QuerySpan[]
-      markers: TimelineMarker[]
-    }
-
-export interface TimelineLayout {
-  start: number
-  trackWidth: number
-}
-
-interface RenderedTimelineLayout extends TimelineLayout {
-  end: number
-}
-
-export function TimelineCanvas({
-  lanes,
-  layout,
-  nowPoint,
-  wallClockOffset,
-  follow,
-  onFollowChange,
-  onTraceSelect,
-}: {
-  lanes: TimelineLane[]
-  layout: TimelineLayout | null
-  nowPoint: number
-  wallClockOffset: number
-  follow: boolean
-  onFollowChange: (value: boolean) => void
-  onTraceSelect?: (traceId: number) => 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 [labelWidth, setLabelWidth] = useState(DEFAULT_LABEL_WIDTH)
-  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])
-  const onLabelResizeStart = (event: ReactMouseEvent<HTMLSpanElement>) => {
-    event.preventDefault()
-    const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
-    const startX = event.clientX
-    const startWidth = labelWidth
-    const onMove = (move: MouseEvent) => {
-      setLabelWidth(
-        Math.max(MIN_LABEL_WIDTH, Math.min(MAX_LABEL_WIDTH, startWidth + move.clientX - startX)),
-      )
-    }
-    const onUp = () => {
-      ownerWindow.removeEventListener('mousemove', onMove)
-      ownerWindow.removeEventListener('mouseup', onUp)
-    }
-    ownerWindow.addEventListener('mousemove', onMove)
-    ownerWindow.addEventListener('mouseup', onUp)
-  }
-
-  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}
-        labelWidth={labelWidth}
-        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: `${labelWidth}px minmax(0, 1fr)`,
-          minHeight: 38,
-          flexShrink: 0,
-          background: colors.bg,
-        }}
-      >
-        <div
-          title={`Recording started ${formatTimelineClock(renderedLayout.start, wallClockOffset, true)}`}
-          style={{
-            position: 'relative',
-            color: colors.muted,
-            padding: '7px 10px 0',
-            borderBottom: `1px solid ${colors.border}`,
-            background: colors.bg,
-          }}
-        >
-          <TimelineLegend />
-          <span
-            role='separator'
-            aria-label='Resize timeline labels'
-            aria-orientation='vertical'
-            title='Resize timeline labels'
-            onMouseDown={onLabelResizeStart}
-            style={{
-              position: 'absolute',
-              top: 0,
-              right: -4,
-              bottom: 0,
-              width: 8,
-              zIndex: 3,
-              cursor: 'col-resize',
-              borderRight: `1px solid ${colors.border}`,
-            }}
-          />
-        </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: `${labelWidth}px minmax(0, 1fr)`,
-            alignItems: 'start',
-          }}
-        >
-          <div style={{ minWidth: 0, paddingBottom: 10 }}>
-            {lanes.map(lane => (
-              <TimelineLaneLabel
-                key={lane.id}
-                label={lane.label}
-                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.kind === 'connection' ? lane.bars : []}
-                  ticks={lane.kind === 'realtime' ? lane.ticks : []}
-                  markers={lane.kind === 'connection' ? lane.markers : []}
-                  barLabel={lane.kind === 'connection' ? 'Offline' : 'Fetch'}
-                  nowPoint={nowPoint}
-                  wallClockOffset={wallClockOffset}
-                  {...(onTraceSelect ? { onTraceSelect } : {})}
-                />
-              ))}
-            </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 / offline' />
-    </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: TIMELINE_LANE_HEIGHT,
-        boxSizing: 'border-box',
-        padding: '6px 10px 4px',
-        borderBottom: `1px solid ${colors.rowBorder}`,
-      }}
-      title={detail ? `${label} ${detail}` : label}
-    >
-      <span
-        style={{
-          display: 'block',
-          color: colors.text,
-          fontWeight: 650,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        }}
-      >
-        {label}
-      </span>
-      {context ? (
-        <span
-          style={{
-            display: 'block',
-            color: colors.faint,
-            marginTop: 3,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {context}
-        </span>
-      ) : null}
-    </div>
-  )
-}
-
-function TimelineLaneTrack({
-  layout,
-  bars,
-  ticks,
-  markers,
-  barLabel,
-  nowPoint,
-  wallClockOffset,
-  onTraceSelect,
-}: {
-  layout: TimelineLayout
-  bars: QuerySpan[]
-  ticks: TimelineTick[]
-  markers: TimelineMarker[]
-  barLabel: 'Fetch' | 'Offline'
-  nowPoint: number
-  wallClockOffset: number
-  onTraceSelect?: (traceId: number) => void
-}) {
-  const { colors, styles } = useDevtoolsTheme()
-  return (
-    <div
-      style={{
-        ...styles.laneTrack,
-        width: layout.trackWidth,
-        height: TIMELINE_LANE_HEIGHT,
-        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 (
-          <button
-            type='button'
-            key={`${bar.startAt}:${index}`}
-            {...(barLabel === 'Fetch'
-              ? { 'data-timeline-fetch': bar.ok === false ? 'failed' : 'success' }
-              : { 'data-timeline-outage': 'offline' })}
-            title={[
-              `${barLabel === 'Offline' ? 'Offline' : bar.ok === false ? 'Failed fetch' : 'Fetch'} · ${formatMs(barEnd - bar.startAt)}`,
-              formatTimelineClock(bar.startAt, wallClockOffset, true),
-            ].join('\n')}
-            style={{
-              border: 0,
-              padding: 0,
-              cursor: bar.traceIds?.[0] === undefined ? 'default' : 'pointer',
-              position: 'absolute',
-              top: 19,
-              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})`,
-            }}
-            onClick={() => {
-              const traceId = bar.traceIds?.[0]
-              if (traceId !== undefined) onTraceSelect?.(traceId)
-            }}
-          >
-            <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,
-              }}
-            />
-          </button>
-        )
-      })}
-      {ticks.map((tick, index) => (
-        <button
-          type='button'
-          key={`${tick.at}:${index}`}
-          title={`Realtime event\n${formatTimelineClock(tick.at, wallClockOffset, true)}`}
-          onClick={() => {
-            if (tick.traceId !== undefined) onTraceSelect?.(tick.traceId)
-          }}
-          style={{
-            position: 'absolute',
-            top: 15,
-            left: timeToPixels(tick.at, layout.start),
-            width: 7,
-            height: 7,
-            border: 0,
-            padding: 0,
-            cursor: tick.traceId === undefined ? 'default' : 'pointer',
-            marginLeft: -4,
-            borderRadius: 2,
-            background: colors.blue,
-            boxShadow: `0 0 0 1px ${colors.bg}`,
-            transform: 'rotate(45deg)',
-          }}
-        />
-      ))}
-      {markers.map((marker, index) => (
-        <button
-          type='button'
-          key={`${marker.at}:${marker.label}:${index}`}
-          title={`${marker.label}\n${formatTimelineClock(marker.at, wallClockOffset, true)}`}
-          onClick={() => {
-            if (marker.traceId !== undefined) onTraceSelect?.(marker.traceId)
-          }}
-          style={{
-            position: 'absolute',
-            top: 14,
-            left: timeToPixels(marker.at, layout.start),
-            width: 9,
-            height: 9,
-            marginLeft: -5,
-            borderRadius: 999,
-            background: toneColor(colors, marker.tone),
-            border: `2px solid ${colors.bg}`,
-            boxSizing: 'border-box',
-            padding: 0,
-            cursor: marker.traceId === undefined ? 'default' : 'pointer',
-          }}
-        />
-      ))}
-    </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 2585f11f..39bbfac9 100644
--- a/lib/devtools/TimelineOverview.tsx
+++ b/lib/devtools/TimelineOverview.tsx
@@ -1,59 +1,74 @@
-import { useEffect, useRef } from 'react'
-import type { QuerySpan } from './collector.js'
-import type { TimelineTick } from './TimelineCanvas.js'
+import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
+import type { TimelineActivity, TimelineActivityKind, TimelineExtent } from './timelineModel.js'
 import { useDevtoolsTheme } from './ui.js'
 
-const OVERVIEW_HEIGHT = 42
+const OVERVIEW_HEIGHT = 54
+const LABEL_WIDTH = 180
+const DRAG_THRESHOLD = 3
 
-export interface TimelineViewport {
-  left: number
-  width: number
-}
-
-type TimelineOverviewLane =
-  | { kind: 'query'; id: string; bars: QuerySpan[] }
-  | { kind: 'realtime'; id: string; ticks: TimelineTick[] }
-  | { kind: 'connection'; id: string; bars: QuerySpan[]; markers: Array<{ at: number }> }
-
-interface TimelineOverviewLayout {
+export interface TimelineRange {
   start: number
   end: number
 }
 
 export function TimelineOverview({
-  lanes,
-  layout,
+  activities,
+  extent,
+  range,
   nowPoint,
-  viewport,
-  labelWidth,
-  onNavigate,
+  onRangeChange,
 }: {
-  lanes: TimelineOverviewLane[]
-  layout: TimelineOverviewLayout
+  activities: readonly TimelineActivity[]
+  extent: TimelineExtent
+  range: TimelineRange | null
   nowPoint: number
-  viewport: TimelineViewport
-  labelWidth: number
-  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
       style={{
         display: 'grid',
-        gridTemplateColumns: `${labelWidth}px minmax(0, 1fr)`,
+        gridTemplateColumns: `${LABEL_WIDTH}px minmax(0, 1fr)`,
         minHeight: OVERVIEW_HEIGHT,
         flexShrink: 0,
         borderBottom: `1px solid ${colors.border}`,
@@ -63,24 +78,24 @@ export function TimelineOverview({
       <div
         style={{
           display: 'flex',
-          alignItems: 'center',
-          gap: 7,
+          flexDirection: 'column',
+          justifyContent: 'center',
           padding: '0 10px',
-          color: colors.muted,
-          fontWeight: 600,
+          minWidth: 0,
         }}
       >
-        Activity
-        <span style={{ color: colors.faint, fontWeight: 500 }}>{lanes.length} lanes</span>
+        <strong style={{ color: colors.text, fontWeight: 650 }}>Recording overview</strong>
+        <span style={{ color: colors.faint, marginTop: 2 }}>
+          {activities.length} {activities.length === 1 ? 'activity' : 'activities'}
+        </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)))
+        title='Drag to filter the activity table by time. Click to clear the range.'
+        onMouseDown={onMouseDown}
+        onKeyDown={event => {
+          if (event.key === 'Escape') onRangeChange(null)
         }}
         style={{
           position: 'relative',
@@ -109,10 +124,10 @@ export function TimelineOverview({
 
 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
@@ -128,39 +143,80 @@ 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' || lane.kind === 'connection') {
-      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)
-      }
-    }
-    if (lane.kind === 'realtime' || lane.kind === 'connection') {
-      context.fillStyle = colors.blue
-      const ticks =
-        lane.kind === 'realtime'
-          ? lane.ticks.map(tick => tick.at)
-          : lane.markers.map(marker => marker.at)
-      for (const tick of ticks) {
-        context.fillRect(timelineRatio(tick, layout) * width, top, 2, 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 bands: TimelineActivityKind[] = ['fetch', 'realtime', 'write', 'connection']
+  const bandHeight = height / bands.length
+  for (const activity of activities) {
+    const band = bands.indexOf(activity.kind)
+    const top = band * bandHeight + 4
+    const markHeight = Math.max(2, bandHeight - 7)
+    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 - 1, top, 2, markHeight)
+    } else {
+      context.fillRect(left, top, Math.max(2, right - left), markHeight)
     }
   }
 
-  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)
+  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.fillStyle = colors.activeButtonBg
+    context.fillRect(left, 0, Math.max(2, right - left), 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 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
+  }
+}
+
+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 d1002b37..7f634cb4 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -1,49 +1,11 @@
 import { useEffect, useMemo, useState } from 'react'
-import type { DevtoolsSnapshot, QueryRecord, TimelineConnectionEvent } from './collector.js'
-import { compactJson, formatMs, 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,
-  type TimelineMarker,
-  type TimelineTick,
-} from './TimelineCanvas.js'
+import type { DevtoolsSnapshot } from './collector.js'
+import { now } from './format.js'
+import type { DevtoolsModel } from './model.js'
+import { TimelineActivityTable } 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
-      context: string
-      detail: string
-      firstAt: number
-      ticks: TimelineTick[]
-    }
-  | {
-      kind: 'connection'
-      id: string
-      label: string
-      context: string
-      detail: string
-      firstAt: number
-      bars: QueryRecord['spans']
-      markers: TimelineMarker[]
-    }
-
 export function TimelineFollowControl({
   value,
   onChange,
@@ -97,87 +59,22 @@ export function TimelineTab({
   onFollowChange: (value: boolean) => void
   onTraceSelect?: (traceId: number) => void
 }) {
-  const rawLanes = useMemo(() => {
-    const realtimeByService = new Map<string, TimelineTick[]>()
-    for (const item of snapshot.timeline.realtime) {
-      const ticks = realtimeByService.get(item.serviceName) ?? []
-      ticks.push({ at: item.at, ...(item.traceId === undefined ? {} : { traceId: item.traceId }) })
-      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),
-            `${query.itemCount} ${query.itemCount === 1 ? 'row' : 'rows'}`,
-            `${query.fetchCount} ${query.fetchCount === 1 ? 'fetch' : 'fetches'}`,
-            query.lastDurationMs === undefined ? '' : `${formatMs(query.lastDurationMs)} last`,
-          ]
-            .filter(Boolean)
-            .join(' · '),
-          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`,
-      context: `${ticks.length} ${ticks.length === 1 ? 'event' : 'events'} retained`,
-      detail: `All retained realtime events emitted by ${serviceName}`,
-      firstAt: Math.min(...ticks.map(tick => tick.at)),
-      ticks,
-    }))
-    const connectionLane = buildConnectionLane(snapshot.timeline.connection)
-    return [...queryLanes, ...realtimeLanes, ...(connectionLane ? [connectionLane] : [])]
-  }, [
-    model.scopesByQueryId,
-    snapshot.queries,
-    snapshot.timeline.connection,
-    snapshot.timeline.realtime,
-  ])
-  const hasInFlight = rawLanes.some(
-    lane =>
-      (lane.kind === 'query' && lane.query.spans.some(span => span.endAt === undefined)) ||
-      (lane.kind === 'connection' && lane.bars.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}
         follow={follow}
@@ -198,155 +95,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 if (lane.kind === 'realtime') {
-      points.push(...lane.ticks.map(tick => tick.at))
-    } else {
-      for (const span of lane.bars) points.push(span.startAt, span.endAt ?? nowPoint)
-      points.push(...lane.markers.map(marker => marker.at))
-    }
-  }
-  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 buildConnectionLane(events: TimelineConnectionEvent[]): RawTimelineLane | null {
-  if (events.length === 0) return null
-  const bars: QueryRecord['spans'] = []
-  const markers: TimelineMarker[] = []
-  let offlineStart: number | undefined
-  let latestAttempt: number | undefined
-  let lastOutageDuration: number | undefined
-
-  for (const item of events) {
-    const event = item.event
-    switch (event.kind) {
-      case 'connection:connected':
-        markers.push({
-          at: item.at,
-          label: connectionEventLabel(event),
-          tone: 'green',
-          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
-        })
-        break
-      case 'connection:disconnected':
-        if (offlineStart === undefined) offlineStart = item.at
-        latestAttempt = undefined
-        markers.push({
-          at: item.at,
-          label: connectionEventLabel(event),
-          tone: 'red',
-          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
-        })
-        break
-      case 'connection:reconnected':
-        latestAttempt = event.attempt
-        if (offlineStart !== undefined) {
-          lastOutageDuration = item.at - offlineStart
-          bars.push({ startAt: offlineStart, endAt: item.at, ok: false })
-          offlineStart = undefined
-        }
-        markers.push({
-          at: item.at,
-          label: connectionEventLabel(event),
-          tone: 'green',
-          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
-        })
-        break
-      case 'connection:error':
-      case 'connection:reconnect-failed':
-        markers.push({
-          at: item.at,
-          label: connectionEventLabel(event),
-          tone: 'red',
-          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
-        })
-        break
-    }
-  }
-  if (offlineStart !== undefined) bars.push({ startAt: offlineStart, ok: false })
-
-  const latest = events.at(-1)!.event
-  const isOffline = offlineStart !== undefined
-  const transport =
-    latest.kind === 'connection:connected' || latest.kind === 'connection:reconnected'
-      ? latest.transport
-      : undefined
-  const context = [
-    isOffline ? 'offline' : 'connected',
-    transport ?? '',
-    latestAttempt === undefined ? '' : `attempt ${latestAttempt}`,
-    !isOffline && lastOutageDuration !== undefined ? `${formatMs(lastOutageDuration)} outage` : '',
-  ]
-    .filter(Boolean)
-    .join(' · ')
-
-  return {
-    kind: 'connection',
-    id: 'connection',
-    label: 'Connection',
-    context,
-    detail: `${events.length} retained connection ${events.length === 1 ? 'event' : 'events'}`,
-    firstAt: events[0]!.at,
-    bars,
-    markers,
-  }
-}
-
-function connectionEventLabel(event: TimelineConnectionEvent['event']): string {
-  switch (event.kind) {
-    case 'connection:connected':
-      return ['Connected', event.transport].filter(Boolean).join(' · ')
-    case 'connection:disconnected':
-      return ['Disconnected', event.reason].filter(Boolean).join(' · ')
-    case 'connection:reconnected':
-      return [
-        event.attempt === undefined ? 'Reconnected' : `Reconnected on attempt ${event.attempt}`,
-        event.transport,
-      ]
-        .filter(Boolean)
-        .join(' · ')
-    case 'connection:error':
-      return `${event.phase === 'connect' ? 'Connection' : 'Reconnect'} error · ${event.error.message}`
-    case 'connection:reconnect-failed':
-      return event.error ? `Reconnection failed · ${event.error.message}` : 'Reconnection failed'
-  }
-}
-
-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/collector.ts b/lib/devtools/collector.ts
index be625f59..93261d06 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -108,6 +108,7 @@ export interface WriteRecord {
   rolledBack?: boolean
   error?: string
   args?: readonly unknown[]
+  traceId?: number
 }
 
 export interface DevtoolsSnapshot {
@@ -790,6 +791,7 @@ class FigbirdCollector implements Collector {
         ...(event.id !== undefined ? { itemId: event.id } : {}),
         ...('optimistic' in event ? { optimistic: event.optimistic } : {}),
         ...('args' in event ? { args: this.#captureArgs(event.args) } : {}),
+        ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
       } satisfies WriteRecord)
 
     if (event.kind === 'mutate:update') {
diff --git a/lib/devtools/timelineModel.ts b/lib/devtools/timelineModel.ts
new file mode 100644
index 00000000..9a8ee8de
--- /dev/null
+++ b/lib/devtools/timelineModel.ts
@@ -0,0 +1,377 @@
+import type { FigbirdEvent } from '../core/events.js'
+import type { DevtoolsEvent, DevtoolsSnapshot, QueryRecord, WriteRecord } from './collector.js'
+import { buildTraceIndex, displayEvent, traceIdsForEvent } from './eventModel.js'
+import { 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 TimelineActivity {
+  id: string
+  kind: TimelineActivityKind
+  startAt: number
+  endAt?: number
+  label: string
+  detail: string
+  status: string
+  tone: TimelineActivityTone
+  trigger: string
+  effect: string
+  result: string
+  serviceName?: string
+  queryId?: string
+  traceId?: number
+  durationMs?: number
+  payload?: unknown
+  error: boolean
+  searchText: string
+}
+
+export interface TimelineExtent {
+  start: number
+  end: number
+}
+
+export function buildTimelineActivities(
+  snapshot: DevtoolsSnapshot,
+  model: DevtoolsModel,
+  nowPoint: number,
+): TimelineActivity[] {
+  const eventContext = buildEventContext(snapshot.events)
+  const activities = [
+    ...buildFetchActivities(snapshot.queries, model, eventContext, nowPoint),
+    ...buildRealtimeActivities(snapshot, eventContext),
+    ...snapshot.timeline.connection.map((item, index) =>
+      connectionActivity(item.at, item.event, index, eventContext),
+    ),
+    ...snapshot.writes
+      .filter(write => write.startedAt >= snapshot.timeline.startedAt)
+      .map(writeActivity),
+  ]
+  return activities.sort((a, b) => a.startAt - b.startAt || a.id.localeCompare(b.id))
+}
+
+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 = startedAt > 0 ? Math.min(startedAt, earliest) : earliest
+  return { start, end: Math.max(start + 1_000, latest) }
+}
+
+interface EventContext {
+  fetchStarts: ReadonlyMap<number, DevtoolsEvent>
+  fetchTerminals: ReadonlyMap<number, DevtoolsEvent>
+  realtime: ReadonlyMap<string, DevtoolsEvent>
+  traceEvents: ReadonlyMap<number, readonly DevtoolsEvent[]>
+}
+
+function buildEventContext(events: readonly DevtoolsEvent[]): EventContext {
+  const traceIndex = buildTraceIndex(events)
+  const fetchStarts = new Map<number, DevtoolsEvent>()
+  const fetchTerminals = new Map<number, DevtoolsEvent>()
+  const realtime = new Map<string, DevtoolsEvent>()
+  const traceEvents = new Map<number, DevtoolsEvent[]>()
+  for (const item of events) {
+    const event = item.event
+    if (event.kind === 'fetch:start' && event.fetchId !== undefined) {
+      fetchStarts.set(event.fetchId, item)
+    }
+    if (
+      (event.kind === 'fetch:end' || event.kind === 'fetch:error') &&
+      event.fetchId !== undefined
+    ) {
+      fetchTerminals.set(event.fetchId, item)
+    }
+    if (event.kind === 'realtime') realtime.set(realtimeKey(item.at, event.serviceName), item)
+    for (const traceId of traceIdsForEvent(event, traceIndex)) {
+      const related = traceEvents.get(traceId) ?? []
+      related.push(item)
+      traceEvents.set(traceId, related)
+    }
+  }
+  return { fetchStarts, fetchTerminals, realtime, traceEvents }
+}
+
+function buildFetchActivities(
+  queries: readonly QueryRecord[],
+  model: DevtoolsModel,
+  context: EventContext,
+  nowPoint: number,
+): TimelineActivity[] {
+  return queries.flatMap(query =>
+    query.spans.map((span, index) => {
+      const start = span.fetchId === undefined ? undefined : context.fetchStarts.get(span.fetchId)
+      const terminal =
+        span.fetchId === undefined ? undefined : context.fetchTerminals.get(span.fetchId)
+      const traceId = span.traceIds?.[0]
+      const traceEvents = traceId === undefined ? [] : (context.traceEvents.get(traceId) ?? [])
+      const terminalEvent = terminal?.event
+      const failed = span.ok === false || terminalEvent?.kind === 'fetch:error'
+      const pending = span.endAt === undefined
+      const itemCount =
+        terminalEvent?.kind === 'fetch:end'
+          ? terminalEvent.itemCount
+          : pending
+            ? undefined
+            : query.itemCount
+      const durationMs =
+        terminalEvent?.kind === 'fetch:end' || terminalEvent?.kind === 'fetch:error'
+          ? terminalEvent.durationMs
+          : (span.endAt ?? nowPoint) - span.startAt
+      const scope = model.scopesByQueryId
+        .get(query.queryId)
+        ?.map(item => item.label)
+        .join(', ')
+      const effect = cacheEffect(
+        traceEvents.filter(
+          item => item.event.kind !== 'cache:updated' || item.event.source === 'fetch',
+        ),
+        failed ? '' : 'cache refreshed',
+      )
+      const trigger = fetchTrigger(
+        span.reason ?? (start?.event.kind === 'fetch:start' ? start.event.reason : undefined),
+        start?.event.kind === 'fetch:start' ? start.event.causes : undefined,
+      )
+      const result = failed
+        ? terminalEvent?.kind === 'fetch:error'
+          ? terminalEvent.error.message
+          : (query.lastError?.message ?? 'failed')
+        : pending
+          ? 'pending'
+          : `${itemCount ?? 0} ${itemCount === 1 ? 'row' : 'rows'}`
+      const payload =
+        start?.event.kind === 'fetch:start'
+          ? start.event.params
+          : query.method === 'get'
+            ? query.resourceId
+            : query.query
+      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}.${query.method}`,
+        detail: [query.resourceId === undefined ? '' : `#${query.resourceId}`, scope ?? '']
+          .filter(Boolean)
+          .join(' · '),
+        status: failed ? 'failed' : pending ? 'fetching' : 'complete',
+        tone: failed ? 'red' : pending ? 'blue' : 'green',
+        trigger,
+        effect,
+        result,
+        serviceName: query.serviceName,
+        queryId: query.queryId,
+        ...(traceId === undefined ? {} : { traceId }),
+        durationMs,
+        ...(payload === undefined ? {} : { payload }),
+        error: failed,
+      })
+    }),
+  )
+}
+
+function buildRealtimeActivities(
+  snapshot: DevtoolsSnapshot,
+  context: EventContext,
+): TimelineActivity[] {
+  return snapshot.timeline.realtime.map((item, index) => {
+    const raw = context.realtime.get(realtimeKey(item.at, item.serviceName))
+    const event = raw?.event.kind === 'realtime' ? raw.event : undefined
+    const traceEvents =
+      item.traceId === undefined ? [] : (context.traceEvents.get(item.traceId) ?? [])
+    const effect = cacheEffect(traceEvents, 'received')
+    const fetches = traceEvents.filter(related => related.event.kind === 'fetch:start').length
+    const result = [
+      event?.type ?? 'event',
+      event?.itemId === undefined ? '' : `#${event.itemId}`,
+      fetches > 0 ? `${fetches} ${fetches === 1 ? 'fetch' : 'fetches'} triggered` : '',
+    ]
+      .filter(Boolean)
+      .join(' · ')
+    return searchable({
+      id: `realtime:${item.at}:${item.serviceName}:${index}`,
+      kind: 'realtime',
+      startAt: item.at,
+      endAt: item.at,
+      label: `${item.serviceName} realtime`,
+      detail: event ? `${event.type}${event.itemId === undefined ? '' : ` #${event.itemId}`}` : '',
+      status: 'received',
+      tone: 'blue',
+      trigger: 'socket event',
+      effect,
+      result,
+      serviceName: item.serviceName,
+      ...(item.traceId === undefined ? {} : { traceId: item.traceId }),
+      durationMs: 0,
+      ...(event?.item === undefined ? {} : { payload: event.item }),
+      error: false,
+    })
+  })
+}
+
+function connectionActivity(
+  at: number,
+  event: Extract<FigbirdEvent, { kind: `connection:${string}` }>,
+  index: number,
+  context: EventContext,
+): TimelineActivity {
+  const failed =
+    event.kind === 'connection:disconnected' ||
+    event.kind === 'connection:error' ||
+    event.kind === 'connection:reconnect-failed'
+  const traceEvents =
+    event.traceId === undefined ? [] : (context.traceEvents.get(event.traceId) ?? [])
+  const sweep = traceEvents.find(item => item.event.kind === 'reconnect:sweep')?.event
+  const fetches = traceEvents.filter(item => item.event.kind === 'fetch:start').length
+  const status = connectionStatus(event)
+  const result = [
+    'transport' in event ? (event.transport ?? '') : '',
+    'attempt' in event && event.attempt !== undefined ? `attempt ${event.attempt}` : '',
+    sweep?.kind === 'reconnect:sweep' && sweep.queryCount !== undefined
+      ? `${sweep.queryCount} ${sweep.queryCount === 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: status,
+    detail: connectionDetail(event),
+    status: failed
+      ? event.kind === 'connection:disconnected'
+        ? 'offline'
+        : 'failed'
+      : 'connected',
+    tone: failed ? 'red' : 'green',
+    trigger: 'transport',
+    effect: sweep?.kind === 'reconnect:sweep' ? `reconnect sweep ${sweep.phase}` : '—',
+    result: result || '—',
+    ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
+    durationMs: 0,
+    payload: displayEvent(event),
+    error: failed,
+  })
+}
+
+function writeActivity(write: WriteRecord): TimelineActivity {
+  const failed = write.status === 'error' || write.status === 'rollback'
+  const label =
+    write.type === 'action'
+      ? (write.name ?? '(anonymous action)')
+      : `${write.serviceName ?? ''}.${write.method ?? ''}${write.itemId === undefined ? '' : ` #${write.itemId}`}`
+  return searchable({
+    id: `write:${write.id}`,
+    kind: 'write',
+    startAt: write.startedAt,
+    ...(write.endedAt === undefined ? {} : { endAt: write.endedAt }),
+    label,
+    detail: write.type,
+    status: write.status,
+    tone: failed ? 'red' : write.status === 'in-flight' ? 'amber' : 'green',
+    trigger: write.type === 'action' ? 'action' : 'UI mutation',
+    effect: write.optimistic
+      ? write.rolledBack
+        ? 'optimistic rollback'
+        : 'optimistic cache'
+      : '—',
+    result: write.error ?? (write.status === 'in-flight' ? 'pending' : 'complete'),
+    ...(write.serviceName === undefined ? {} : { serviceName: write.serviceName }),
+    ...(write.traceId === undefined ? {} : { traceId: write.traceId }),
+    ...(write.durationMs === undefined ? {} : { durationMs: write.durationMs }),
+    ...(write.args === undefined ? {} : { payload: write.args }),
+    error: failed,
+  })
+}
+
+function cacheEffect(events: readonly DevtoolsEvent[], fallback: string): string {
+  const outcomes = new Map<string, 'merged' | 'reconcile'>()
+  let updated = false
+  for (const item of events) {
+    if (item.event.kind !== 'cache:updated') continue
+    updated = true
+    for (const effect of item.event.queryEffects) outcomes.set(effect.queryId, effect.outcome)
+  }
+  const merged = [...outcomes.values()].filter(outcome => outcome === 'merged').length
+  const reconcile = [...outcomes.values()].filter(outcome => outcome === 'reconcile').length
+  return (
+    [
+      merged > 0 ? `${merged} merged` : '',
+      reconcile > 0 ? `${reconcile} reconcile` : '',
+      merged === 0 && reconcile === 0 && updated ? 'cache updated' : '',
+    ]
+      .filter(Boolean)
+      .join(' · ') || fallback
+  )
+}
+
+function fetchTrigger(
+  reason: string | undefined,
+  causes: readonly { kind: string }[] | undefined,
+): string {
+  if (reason) return reason.replace('-', ' ')
+  const cause = causes?.[0]?.kind
+  return cause ? cause.replace('-', ' ') : 'request'
+}
+
+function connectionStatus(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' ? 'Connection error' : 'Reconnect error'
+    case 'connection:reconnect-failed':
+      return 'Reconnection 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 realtimeKey(at: number, serviceName: string): string {
+  return `${at}:${serviceName}`
+}
+
+function searchable(activity: Omit<TimelineActivity, 'searchText'>): TimelineActivity {
+  return {
+    ...activity,
+    searchText: [
+      activity.kind,
+      activity.label,
+      activity.detail,
+      activity.status,
+      activity.trigger,
+      activity.effect,
+      activity.result,
+      activity.durationMs === undefined ? '' : formatMs(activity.durationMs),
+    ]
+      .join(' ')
+      .toLowerCase(),
+  }
+}
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index 8350cd40..04335b45 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -1193,10 +1193,10 @@ 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 = $all('[data-timeline-activity]').map(row =>
+    row.getAttribute('data-timeline-activity'),
   )
-  t.deepEqual(timelineLanes, ['issues.find', 'issueLabels.find', 'issues realtime', 'Connection'])
+  t.deepEqual(timelineActivities, ['fetch', 'fetch', 'realtime', 'connection', 'connection'])
   t.is($all('[data-timeline-outage="offline"]').length, 1)
   t.true(timelineText.includes('websocket'))
 

From 37082d43c16fd26c5dcccf049ced22092e8eb184 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 23:50:44 +0100
Subject: [PATCH 08/42] Remove query row chevrons

---
 lib/devtools/QueriesTab.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 57618a9e..713b4e81 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -249,18 +249,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={{

From 7a8ff39de26d8d5064032312afed462b91fdfaf5 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 23:51:44 +0100
Subject: [PATCH 09/42] Keep query parameters expanded

---
 lib/devtools/QueryDetails.tsx | 42 ++++-------------------------------
 1 file changed, 4 insertions(+), 38 deletions(-)

diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index ade19d64..3755389a 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -7,7 +7,7 @@ import {
   type ReactNode,
 } from 'react'
 import type { QueryRecord } from './collector.js'
-import { compactJson, formatMs, prettyJson } from './format.js'
+import { compactJson, formatMs } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
 import type {
   DevtoolsOperation,
@@ -271,43 +271,9 @@ export function QueryDetails({
       >
         <JsonViewer value={activeQuery.data} />
       </QueryDetailSection>
-      <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 ?? {})}
-            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',
-            }}
-          >
-            {compactJson(activeQuery.query ?? {})}
-          </code>
-        </summary>
-        <div style={{ marginTop: 9 }}>
-          <JsonViewer value={activeQuery.query ?? {}} />
-        </div>
-      </details>
+      <QueryDetailSection label='Parameters'>
+        <JsonViewer value={activeQuery.query ?? {}} />
+      </QueryDetailSection>
     </DetailsPane>
   )
 }

From 0a445f44264df480ecf0e5125eed18b879273bfe Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 23:55:59 +0100
Subject: [PATCH 10/42] Make devtools columns resizable across tabs

---
 lib/devtools/CacheTab.tsx              | 33 +++++++---
 lib/devtools/EventsTab.tsx             | 39 ++++++++++--
 lib/devtools/QueriesTab.tsx            | 57 ++++-------------
 lib/devtools/TimelineActivityTable.tsx | 44 ++-----------
 lib/devtools/WritesTab.tsx             | 87 ++++++++++++++++++++------
 lib/devtools/ui.tsx                    | 71 +++++++++++++++++++++
 6 files changed, 214 insertions(+), 117 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 7e8434ea..ada36406 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -5,13 +5,22 @@ import { JsonViewer } from './JsonViewer.js'
 import type { DevtoolsModel } from './model.js'
 import {
   Badge,
+  ColumnResizeHandle,
   DetailSection,
   DetailsPane,
   buttonStyle,
   useDetailsPaneWidth,
+  useResizableColumns,
   useDevtoolsTheme,
 } from './ui.js'
 
+const CACHE_COLUMNS = [
+  { label: 'entity', width: 150, minWidth: 90 },
+  { label: 'value', width: 310, minWidth: 160 },
+  { label: 'queries', width: 110, minWidth: 76 },
+  { label: 'provenance', width: 150, minWidth: 110 },
+] as const
+
 export interface DevtoolsCacheEditor {
   update(
     serviceName: string,
@@ -40,7 +49,9 @@ export function CacheTab({
   )
   const [serviceName, setServiceName] = useState<string | null>(null)
   const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(CACHE_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const tableWidth = columnWidths.reduce((sum, width) => sum + width, 0)
 
   useEffect(() => {
     if (serviceName && orderedServices.some(service => service.serviceName === serviceName)) return
@@ -154,19 +165,23 @@ export function CacheTab({
         {!service ? (
           <div style={{ padding: 16, color: colors.muted }}>No entities cached yet.</div>
         ) : (
-          <table style={{ ...styles.table, minWidth: 680 }}>
+          <table style={{ ...styles.table, minWidth: tableWidth }}>
             <colgroup>
-              <col style={{ width: 150 }} />
-              <col />
-              <col style={{ width: 110 }} />
-              <col style={{ width: 150 }} />
+              {CACHE_COLUMNS.map((column, index) => (
+                <col key={column.label} style={{ width: columnWidths[index] }} />
+              ))}
             </colgroup>
             <thead>
               <tr>
-                <th style={styles.th}>entity</th>
-                <th style={styles.th}>value</th>
-                <th style={styles.th}>queries</th>
-                <th style={styles.th}>provenance</th>
+                {CACHE_COLUMNS.map((column, index) => (
+                  <th key={column.label} style={{ ...styles.th, position: 'sticky' }}>
+                    {column.label}
+                    <ColumnResizeHandle
+                      label={column.label}
+                      onMouseDown={event => onColumnResizeStart(index, event)}
+                    />
+                  </th>
+                ))}
               </tr>
             </thead>
             <tbody>
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index 4964d3b4..8c5992aa 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -18,14 +18,24 @@ import { formatClock } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
 import type { EventQueryScope } from './model.js'
 import {
+  ColumnResizeHandle,
   DetailSection,
   DetailStat,
   DetailsPane,
+  resizableGridTemplate,
   toneColor,
   useDetailsPaneWidth,
+  useResizableColumns,
   useDevtoolsTheme,
 } from './ui.js'
 
+const EVENT_COLUMNS = [
+  { label: 'Time', width: 108, minWidth: 84 },
+  { label: 'Activity', width: 132, minWidth: 96 },
+  { label: 'Scope', width: 140, minWidth: 96 },
+  { label: 'Details', width: 360, minWidth: 180 },
+] as const
+
 export function EventsTab({
   events,
   filter,
@@ -43,7 +53,11 @@ export function EventsTab({
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [selectedEventId, setSelectedEventId] = useState<number | null>(null)
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(EVENT_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const gridTemplateColumns = resizableGridTemplate(columnWidths, 3)
+  const gridMinWidth =
+    columnWidths.reduce((sum, width) => sum + width, 0) + (EVENT_COLUMNS.length - 1) * 10
   const traceIndex = useMemo(() => buildTraceIndex(events), [events])
   const activities = useMemo(() => buildActivities(events, traceIndex), [events, traceIndex])
   const normalizedFilter = filter.toLowerCase()
@@ -93,6 +107,8 @@ export function EventsTab({
         <div
           style={{
             ...styles.eventRow,
+            gridTemplateColumns,
+            minWidth: gridMinWidth,
             position: 'sticky',
             top: 0,
             zIndex: 1,
@@ -102,10 +118,23 @@ export function EventsTab({
             borderBottom: `1px solid ${colors.border}`,
           }}
         >
-          <span>Time</span>
-          <span>{visibility === 'activity' ? 'Activity' : 'Event'}</span>
-          <span>Scope</span>
-          <span>Details</span>
+          {EVENT_COLUMNS.map((column, index) => (
+            <span
+              key={column.label}
+              style={{
+                position: 'relative',
+                alignSelf: 'stretch',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              {index === 1 && visibility !== 'activity' ? 'Event' : column.label}
+              <ColumnResizeHandle
+                label={column.label}
+                onMouseDown={event => onColumnResizeStart(index, event)}
+              />
+            </span>
+          ))}
         </div>
         {rows.length === 0 ? (
           <div style={{ padding: 16, color: colors.muted }}>
@@ -136,6 +165,8 @@ export function EventsTab({
               }}
               style={{
                 ...styles.eventRow,
+                gridTemplateColumns,
+                minWidth: gridMinWidth,
                 cursor: 'pointer',
                 outline: 'none',
                 background: item.id === selectedEventId ? colors.activeButtonBg : undefined,
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 713b4e81..e62a3f80 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -1,10 +1,15 @@
-import { useState, type CSSProperties, type MouseEvent as ReactMouseEvent } from 'react'
+import { useState, type CSSProperties } from 'react'
 import type { QueryVisibility } from './Devtools.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 {
+  ColumnResizeHandle,
+  useDetailsPaneWidth,
+  useResizableColumns,
+  useDevtoolsTheme,
+} from './ui.js'
 
 interface QueryRow {
   operation: DevtoolsOperation
@@ -83,9 +88,7 @@ export function QueriesTab({
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [selectedOperationKey, setSelectedOperationKey] = useState<string | null>(null)
-  const [columnWidths, setColumnWidths] = useState<number[]>(() =>
-    QUERY_COLUMNS.map(column => column.width),
-  )
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(QUERY_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
   const rows: QueryRow[] = model.operations
     .flatMap(operation => {
@@ -129,28 +132,6 @@ export function QueriesTab({
       )
     })
 
-  const onColumnResizeStart = (index: number, event: ReactMouseEvent<HTMLSpanElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-    const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
-    const startX = event.clientX
-    const startWidth = columnWidths[index]!
-    const minWidth = QUERY_COLUMNS[index]!.minWidth
-    const onMove = (move: MouseEvent) => {
-      setColumnWidths(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)
-  }
-
   const ellipsizedCode: CSSProperties = {
     ...styles.code,
     display: 'block',
@@ -187,24 +168,10 @@ export function QueriesTab({
                   >
                     {column.label}
                   </span>
-                  {index < QUERY_COLUMNS.length - 1 ? (
-                    <span
-                      role='separator'
-                      aria-label={`Resize ${column.label} column`}
-                      aria-orientation='vertical'
-                      onMouseDown={event => onColumnResizeStart(index, event)}
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        right: -3,
-                        bottom: 0,
-                        width: 7,
-                        cursor: 'col-resize',
-                        zIndex: 2,
-                        borderRight: `1px solid ${colors.rowBorder}`,
-                      }}
-                    />
-                  ) : null}
+                  <ColumnResizeHandle
+                    label={column.label}
+                    onMouseDown={event => onColumnResizeStart(index, event)}
+                  />
                 </th>
               ))}
             </tr>
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index ec2cbda9..ac733e06 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -12,12 +12,14 @@ import { TimelineOverview } from './TimelineOverview.js'
 import type { TimelineActivity, TimelineExtent } from './timelineModel.js'
 import {
   Badge,
+  ColumnResizeHandle,
   DetailSection,
   DetailStat,
   DetailsPane,
   buttonStyle,
   toneColor,
   useDetailsPaneWidth,
+  useResizableColumns,
   useDevtoolsTheme,
 } from './ui.js'
 
@@ -68,9 +70,7 @@ export function TimelineActivityTable({
   const [filter, setFilter] = useState('')
   const [range, setRange] = useState<TimelineRange | null>(null)
   const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [columnWidths, setColumnWidths] = useState<number[]>(() =>
-    COLUMNS.map(column => column.width),
-  )
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
   const selected = activities.find(activity => activity.id === selectedId)
   const normalizedFilter = filter.trim().toLowerCase()
@@ -115,28 +115,6 @@ export function TimelineActivityTable({
   const visibleSelection =
     selected && rows.some(activity => activity.id === selected.id) ? selected : null
 
-  const onColumnResizeStart = (index: number, event: ReactMouseEvent<HTMLSpanElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-    const ownerWindow = event.currentTarget.ownerDocument.defaultView ?? window
-    const startX = event.clientX
-    const startWidth = columnWidths[index]!
-    const minWidth = COLUMNS[index]!.minWidth
-    const onMove = (move: MouseEvent) => {
-      setColumnWidths(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)
-  }
-
   return (
     <>
       <TimelineOverview
@@ -235,21 +213,9 @@ export function TimelineActivityTable({
                         {formatOffset(displayExtent.end - displayExtent.start)}
                       </span>
                     ) : null}
-                    <span
-                      role='separator'
-                      aria-label={`Resize ${column.label} column`}
-                      aria-orientation='vertical'
+                    <ColumnResizeHandle
+                      label={column.label}
                       onMouseDown={event => onColumnResizeStart(index, event)}
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        right: -4,
-                        bottom: 0,
-                        width: 8,
-                        cursor: 'col-resize',
-                        zIndex: 2,
-                        borderRight: `1px solid ${colors.border}`,
-                      }}
                     />
                   </th>
                 ))}
diff --git a/lib/devtools/WritesTab.tsx b/lib/devtools/WritesTab.tsx
index 9a11a3a7..4c664318 100644
--- a/lib/devtools/WritesTab.tsx
+++ b/lib/devtools/WritesTab.tsx
@@ -4,17 +4,31 @@ import { formatClock, formatMs } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
 import {
   Badge,
+  ColumnResizeHandle,
   DetailSection,
   DetailStat,
   DetailsPane,
+  resizableGridTemplate,
   useDetailsPaneWidth,
+  useResizableColumns,
   useDevtoolsTheme,
 } from './ui.js'
 
+const WRITE_COLUMNS = [
+  { label: 'Status', width: 96, minWidth: 78 },
+  { label: 'Operation', width: 360, minWidth: 180 },
+  { label: 'Duration', width: 80, minWidth: 64 },
+  { label: 'Started', width: 90, minWidth: 76 },
+] as const
+
 export function WritesTab({ writes, inFlight }: { writes: WriteRecord[]; inFlight: number }) {
   const { colors, styles } = useDevtoolsTheme()
   const [selectedWriteId, setSelectedWriteId] = useState<string | null>(null)
+  const [columnWidths, onColumnResizeStart] = useResizableColumns(WRITE_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const gridTemplateColumns = resizableGridTemplate(columnWidths, 1)
+  const gridMinWidth =
+    columnWidths.reduce((sum, width) => sum + width, 0) + (WRITE_COLUMNS.length - 1) * 8
   const actions = writes.filter(write => write.type === 'action')
   const mutations = writes.filter(write => write.type === 'mutation')
   const optimisticInFlight = mutations.filter(
@@ -28,6 +42,8 @@ export function WritesTab({ writes, inFlight }: { writes: WriteRecord[]; inFligh
         <div
           style={{
             ...styles.writeRow,
+            gridTemplateColumns,
+            minWidth: gridMinWidth,
             position: 'sticky',
             top: 0,
             zIndex: 1,
@@ -37,43 +53,58 @@ export function WritesTab({ writes, inFlight }: { writes: WriteRecord[]; inFligh
             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>
+          {WRITE_COLUMNS.map((column, index) => (
+            <span
+              key={column.label}
+              style={{
+                position: 'relative',
+                alignSelf: 'stretch',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              {column.label}
+              {index === 1 && inFlight > 0 ? (
+                <span style={{ color: colors.blue, marginLeft: 8 }}>{inFlight} in flight</span>
+              ) : null}
+              {index === 1 && 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}
+              <ColumnResizeHandle
+                label={column.label}
+                onMouseDown={event => onColumnResizeStart(index, event)}
+              />
+            </span>
+          ))}
         </div>
         {writes.length === 0 ? (
           <div style={{ padding: 16, color: colors.muted }}>No writes recorded.</div>
         ) : (
           <>
-            <SectionTitle title='Actions' count={actions.length} />
+            <SectionTitle title='Actions' count={actions.length} minWidth={gridMinWidth} />
             {actions.map(write => (
               <WriteRow
                 key={write.id}
                 write={write}
                 selected={write.id === selectedWriteId}
+                gridTemplateColumns={gridTemplateColumns}
+                minWidth={gridMinWidth}
                 onSelect={() => setSelectedWriteId(write.id)}
               />
             ))}
-            <SectionTitle title='Mutations' count={mutations.length} />
+            <SectionTitle title='Mutations' count={mutations.length} minWidth={gridMinWidth} />
             {mutations.map(write => (
               <WriteRow
                 key={write.id}
                 write={write}
                 selected={write.id === selectedWriteId}
+                gridTemplateColumns={gridTemplateColumns}
+                minWidth={gridMinWidth}
                 onSelect={() => setSelectedWriteId(write.id)}
               />
             ))}
@@ -92,11 +123,21 @@ export function WritesTab({ writes, inFlight }: { writes: WriteRecord[]; inFligh
   )
 }
 
-function SectionTitle({ title, count }: { title: string; count: number }) {
+function SectionTitle({
+  title,
+  count,
+  minWidth,
+}: {
+  title: string
+  count: number
+  minWidth: number
+}) {
   const { colors } = useDevtoolsTheme()
   return (
     <div
       style={{
+        minWidth,
+        boxSizing: 'border-box',
         padding: '6px 10px',
         background: colors.toolbar,
         borderTop: `1px solid ${colors.border}`,
@@ -113,10 +154,14 @@ function SectionTitle({ title, count }: { title: string; count: number }) {
 function WriteRow({
   write,
   selected,
+  gridTemplateColumns,
+  minWidth,
   onSelect,
 }: {
   write: WriteRecord
   selected: boolean
+  gridTemplateColumns: string
+  minWidth: number
   onSelect: () => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
@@ -139,6 +184,8 @@ function WriteRow({
       }}
       style={{
         ...styles.writeRow,
+        gridTemplateColumns,
+        minWidth,
         color: write.rolledBack || write.status === 'error' ? colors.red : colors.text,
         cursor: 'pointer',
         background: selected ? colors.activeButtonBg : undefined,
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 74316320..29b93322 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -450,6 +450,77 @@ export function DetailStat({ label, value }: { label: string; value: string }) {
   )
 }
 
+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
+      role='separator'
+      aria-label={`Resize ${label} column`}
+      aria-orientation='vertical'
+      title={`Resize ${label} column`}
+      onMouseDown={onMouseDown}
+      style={{
+        position: 'absolute',
+        top: 0,
+        right: -4,
+        bottom: 0,
+        width: 8,
+        cursor: 'col-resize',
+        zIndex: 2,
+        borderRight: `1px solid ${colors.border}`,
+      }}
+    />
+  )
+}
+
+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(): [number, (event: ReactMouseEvent<HTMLDivElement>) => void] {
   const [width, setWidth] = useState(DEFAULT_DETAILS_WIDTH)
   const onResizeStart = useCallback(

From 516a0181cfcb8c9817a8176dd1946d196781a40d Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sat, 15 Aug 2026 23:57:27 +0100
Subject: [PATCH 11/42] Compact devtools timeline rows

---
 lib/devtools/TimelineActivityTable.tsx | 57 ++++++++++----------------
 1 file changed, 22 insertions(+), 35 deletions(-)

diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index ac733e06..b6227c92 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -29,13 +29,14 @@ type TimelineVisibility = 'all' | 'fetch' | 'realtime' | 'write' | 'connection'
 
 const COLUMNS = [
   { label: 'Time', width: 96, minWidth: 78 },
-  { label: 'Activity', width: 250, minWidth: 160 },
+  { label: 'Activity', width: 190, minWidth: 130 },
+  { label: 'Context', width: 125, minWidth: 80 },
   { label: 'Status', width: 94, minWidth: 78 },
-  { label: 'Trigger', width: 120, minWidth: 88 },
-  { label: 'Cache effect', width: 150, minWidth: 100 },
-  { label: 'Result', width: 145, minWidth: 100 },
-  { label: 'Duration', width: 82, minWidth: 66 },
-  { label: 'Waterfall', width: 240, minWidth: 150 },
+  { label: 'Trigger', width: 110, minWidth: 80 },
+  { label: 'Cache effect', width: 135, minWidth: 90 },
+  { label: 'Result', width: 125, minWidth: 85 },
+  { label: 'Duration', width: 78, minWidth: 62 },
+  { label: 'Waterfall', width: 200, minWidth: 130 },
 ] as const
 
 const VISIBILITY_OPTIONS: Array<{ value: TimelineVisibility; label: string }> = [
@@ -316,35 +317,21 @@ function ActivityRow({
       <td style={styles.td}>
         <span style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
           <ActivityIcon activity={activity} />
-          <span style={{ minWidth: 0 }}>
-            <strong
-              style={{
-                display: 'block',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                fontWeight: 650,
-              }}
-            >
-              {activity.label}
-            </strong>
-            {activity.detail ? (
-              <span
-                style={{
-                  display: 'block',
-                  color: colors.faint,
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  marginTop: 2,
-                }}
-              >
-                {activity.detail}
-              </span>
-            ) : null}
-          </span>
+          <strong
+            title={activity.label}
+            style={{
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              fontWeight: 650,
+            }}
+          >
+            {activity.label}
+          </strong>
         </span>
       </td>
+      <EllipsisCell value={activity.detail || '—'} />
       <td style={styles.td}>
         <Badge tone={activity.tone}>{activity.status}</Badge>
       </td>
@@ -426,7 +413,7 @@ function Waterfall({
     <div
       style={{
         position: 'relative',
-        height: 30,
+        height: 26,
         overflow: 'hidden',
         backgroundImage: `repeating-linear-gradient(to right, ${colors.rowBorder} 0, ${colors.rowBorder} 1px, transparent 1px, transparent 25%)`,
       }}
@@ -439,7 +426,7 @@ function Waterfall({
         aria-hidden='true'
         style={{
           position: 'absolute',
-          top: point ? 10 : 11,
+          top: point ? 8 : 9,
           left: `${left}%`,
           width: point ? 8 : `max(4px, ${right - left}%)`,
           height: point ? 8 : 7,

From 3eca89541edbe442c2730db6220ce3dcfec11545 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 00:01:44 +0100
Subject: [PATCH 12/42] Keep sticky table header divider visible

---
 lib/devtools/ui.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 29b93322..cd467803 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -155,7 +155,7 @@ export function makeStyles(colors: DevtoolsColors) {
       color: colors.muted,
       fontWeight: 600,
       padding: '6px 10px',
-      borderBottom: `1px solid ${colors.border}`,
+      boxShadow: `inset 0 -1px ${colors.border}`,
       position: 'sticky',
       top: 0,
       background: colors.bg,

From 2d48e33f03b25d80033bc6a215be52bd0fb4ba89 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 00:04:06 +0100
Subject: [PATCH 13/42] Let timeline waterfall fill available width

---
 lib/devtools/TimelineActivityTable.tsx | 35 ++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index b6227c92..850c069d 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -71,8 +71,10 @@ export function TimelineActivityTable({
   const [filter, setFilter] = useState('')
   const [range, setRange] = useState<TimelineRange | null>(null)
   const [selectedId, setSelectedId] = 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 normalizedFilter = filter.trim().toLowerCase()
   const rows = activities.filter(activity => {
@@ -86,7 +88,18 @@ export function TimelineActivityTable({
     if (range && !intersects(activity, range, nowPoint)) return false
     return normalizedFilter ? activity.searchText.includes(normalizedFilter) : true
   })
-  const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0)
+  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)
@@ -102,6 +115,24 @@ export function TimelineActivityTable({
     scroll.scrollTop = Math.max(0, scroll.scrollHeight - scroll.clientHeight)
   }, [activities.length, follow])
 
+  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 }}>
@@ -201,7 +232,7 @@ export function TimelineActivityTable({
           <table style={{ ...styles.table, minWidth: totalWidth, width: totalWidth }}>
             <colgroup>
               {COLUMNS.map((column, index) => (
-                <col key={column.label} style={{ width: columnWidths[index] }} />
+                <col key={column.label} style={{ width: renderedColumnWidths[index] }} />
               ))}
             </colgroup>
             <thead>

From d570f97a48a537b85f0f31337e5e178379c2b09b Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 00:14:36 +0100
Subject: [PATCH 14/42] Consolidate writes into timeline

---
 lib/devtools/Devtools.tsx              |  23 +-
 lib/devtools/TimelineActivityTable.tsx |  47 +++-
 lib/devtools/WritesTab.tsx             | 297 -------------------------
 lib/devtools/collector.ts              |  18 +-
 lib/devtools/timelineModel.ts          |  25 ++-
 lib/devtools/ui.tsx                    |   8 +-
 test/devtools.test.tsx                 |   6 +-
 7 files changed, 85 insertions(+), 339 deletions(-)
 delete mode 100644 lib/devtools/WritesTab.tsx

diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index bc06179d..dae627ec 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -3,7 +3,6 @@ import { CacheTab, type DevtoolsCacheEditor } from './CacheTab.js'
 import { EventsTab } from './EventsTab.js'
 import { QueriesTab, operationIsInactive } from './QueriesTab.js'
 import { TimelineFollowControl, TimelineTab } from './TimelineTab.js'
-import { WritesTab } from './WritesTab.js'
 import type { Collector } from './collector.js'
 import { buildDevtoolsModel } from './model.js'
 import {
@@ -17,7 +16,7 @@ import {
   type DevtoolsThemeMode,
 } from './ui.js'
 
-type Tab = 'queries' | 'timeline' | 'events' | 'cache' | 'writes'
+type Tab = 'queries' | 'timeline' | 'events' | 'cache'
 export type QueryVisibility = 'active' | 'inactive' | 'all' | 'skipped'
 export type EventVisibility = 'activity' | 'all'
 
@@ -104,9 +103,7 @@ export function FigbirdDevtoolsPanel({
       ? { 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
+        : null
   const inspected = inspectionSnapshot.kind === 'selected' ? inspectionSnapshot : null
 
   return (
@@ -125,17 +122,8 @@ export function FigbirdDevtoolsPanel({
       >
         <header style={styles.header}>
           <span style={styles.brand}>figbird</span>
-          {(['queries', 'timeline', 'events', 'cache', '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' ? (
             <>
@@ -305,9 +293,6 @@ export function FigbirdDevtoolsPanel({
               }}
             />
           ) : null}
-          {tab === 'writes' ? (
-            <WritesTab writes={snapshot.writes} inFlight={snapshot.inFlightWrites} />
-          ) : null}
         </main>
       </section>
     </ThemeContext.Provider>
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index 850c069d..58f0458c 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -88,6 +88,13 @@ export function TimelineActivityTable({
     if (range && !intersects(activity, range, nowPoint)) return false
     return normalizedFilter ? activity.searchText.includes(normalizedFilter) : true
   })
+  const inFlightWriteCount = activities.filter(
+    activity => activity.kind === 'write' && activity.status === 'in-flight',
+  ).length
+  const projectedWriteCount = activities.filter(
+    activity =>
+      activity.kind === 'write' && activity.status === 'in-flight' && activity.write?.optimistic,
+  ).length
   const waterfallIndex = COLUMNS.length - 1
   const fixedColumnsWidth = columnWidths
     .slice(0, waterfallIndex)
@@ -188,6 +195,16 @@ export function TimelineActivityTable({
             key={option.value}
             type='button'
             aria-pressed={visibility === option.value}
+            title={
+              option.value === 'write' && inFlightWriteCount > 0
+                ? [
+                    `${inFlightWriteCount} in flight`,
+                    projectedWriteCount > 0 ? `${projectedWriteCount} projected` : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' · ')
+                : undefined
+            }
             onClick={() => {
               setVisibility(option.value)
               setSelectedId(null)
@@ -195,6 +212,16 @@ export function TimelineActivityTable({
             style={buttonStyle(colors, visibility === option.value)}
           >
             {option.label}
+            {option.value === 'write' && inFlightWriteCount > 0 ? (
+              <span style={{ color: colors.blue, marginLeft: 6 }}>
+                {inFlightWriteCount} in flight
+              </span>
+            ) : null}
+            {option.value === 'write' && projectedWriteCount > 0 ? (
+              <span style={{ color: colors.amber, marginLeft: 6 }}>
+                {projectedWriteCount} projected
+              </span>
+            ) : null}
           </button>
         ))}
         <span style={{ flex: 1 }} />
@@ -491,7 +518,7 @@ function ActivityDetails({
   return (
     <DetailsPane
       title={activity.label}
-      subtitle={activity.kind}
+      subtitle={activity.write?.type ?? activity.kind}
       width={width}
       onResizeStart={onResizeStart}
       onClose={onClose}
@@ -518,8 +545,24 @@ function ActivityDetails({
         />
         {activity.serviceName ? <DetailStat label='Service' value={activity.serviceName} /> : null}
         {activity.queryId ? <DetailStat label='Query ID' value={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} /> : null}
       </div>
-      {activity.payload !== undefined ? (
+      {activity.write ? (
+        <>
+          <DetailSection label='Payload'>
+            <JsonViewer value={activity.write.payload} emptyLabel='No payload' />
+          </DetailSection>
+          <DetailSection label='Arguments'>
+            <JsonViewer value={activity.write.args} />
+          </DetailSection>
+        </>
+      ) : activity.payload !== undefined ? (
         <DetailSection label={activity.kind === 'realtime' ? 'Event payload' : 'Parameters'}>
           <JsonViewer value={activity.payload} />
         </DetailSection>
diff --git a/lib/devtools/WritesTab.tsx b/lib/devtools/WritesTab.tsx
deleted file mode 100644
index 4c664318..00000000
--- a/lib/devtools/WritesTab.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import { useState, type MouseEvent as ReactMouseEvent } from 'react'
-import type { WriteRecord } from './collector.js'
-import { formatClock, formatMs } from './format.js'
-import { JsonViewer } from './JsonViewer.js'
-import {
-  Badge,
-  ColumnResizeHandle,
-  DetailSection,
-  DetailStat,
-  DetailsPane,
-  resizableGridTemplate,
-  useDetailsPaneWidth,
-  useResizableColumns,
-  useDevtoolsTheme,
-} from './ui.js'
-
-const WRITE_COLUMNS = [
-  { label: 'Status', width: 96, minWidth: 78 },
-  { label: 'Operation', width: 360, minWidth: 180 },
-  { label: 'Duration', width: 80, minWidth: 64 },
-  { label: 'Started', width: 90, minWidth: 76 },
-] as const
-
-export function WritesTab({ writes, inFlight }: { writes: WriteRecord[]; inFlight: number }) {
-  const { colors, styles } = useDevtoolsTheme()
-  const [selectedWriteId, setSelectedWriteId] = useState<string | null>(null)
-  const [columnWidths, onColumnResizeStart] = useResizableColumns(WRITE_COLUMNS)
-  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
-  const gridTemplateColumns = resizableGridTemplate(columnWidths, 1)
-  const gridMinWidth =
-    columnWidths.reduce((sum, width) => sum + width, 0) + (WRITE_COLUMNS.length - 1) * 8
-  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,
-            gridTemplateColumns,
-            minWidth: gridMinWidth,
-            position: 'sticky',
-            top: 0,
-            zIndex: 1,
-            background: colors.bg,
-            color: colors.muted,
-            fontWeight: 600,
-            borderBottom: `1px solid ${colors.border}`,
-          }}
-        >
-          {WRITE_COLUMNS.map((column, index) => (
-            <span
-              key={column.label}
-              style={{
-                position: 'relative',
-                alignSelf: 'stretch',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              {column.label}
-              {index === 1 && inFlight > 0 ? (
-                <span style={{ color: colors.blue, marginLeft: 8 }}>{inFlight} in flight</span>
-              ) : null}
-              {index === 1 && 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}
-              <ColumnResizeHandle
-                label={column.label}
-                onMouseDown={event => onColumnResizeStart(index, event)}
-              />
-            </span>
-          ))}
-        </div>
-        {writes.length === 0 ? (
-          <div style={{ padding: 16, color: colors.muted }}>No writes recorded.</div>
-        ) : (
-          <>
-            <SectionTitle title='Actions' count={actions.length} minWidth={gridMinWidth} />
-            {actions.map(write => (
-              <WriteRow
-                key={write.id}
-                write={write}
-                selected={write.id === selectedWriteId}
-                gridTemplateColumns={gridTemplateColumns}
-                minWidth={gridMinWidth}
-                onSelect={() => setSelectedWriteId(write.id)}
-              />
-            ))}
-            <SectionTitle title='Mutations' count={mutations.length} minWidth={gridMinWidth} />
-            {mutations.map(write => (
-              <WriteRow
-                key={write.id}
-                write={write}
-                selected={write.id === selectedWriteId}
-                gridTemplateColumns={gridTemplateColumns}
-                minWidth={gridMinWidth}
-                onSelect={() => setSelectedWriteId(write.id)}
-              />
-            ))}
-          </>
-        )}
-      </div>
-      {selectedWrite ? (
-        <WriteDetails
-          write={selectedWrite}
-          width={detailsWidth}
-          onResizeStart={onDetailsResizeStart}
-          onClose={() => setSelectedWriteId(null)}
-        />
-      ) : null}
-    </section>
-  )
-}
-
-function SectionTitle({
-  title,
-  count,
-  minWidth,
-}: {
-  title: string
-  count: number
-  minWidth: number
-}) {
-  const { colors } = useDevtoolsTheme()
-  return (
-    <div
-      style={{
-        minWidth,
-        boxSizing: 'border-box',
-        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,
-  gridTemplateColumns,
-  minWidth,
-  onSelect,
-}: {
-  write: WriteRecord
-  selected: boolean
-  gridTemplateColumns: string
-  minWidth: number
-  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,
-        gridTemplateColumns,
-        minWidth,
-        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 } = 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'>
-        <JsonViewer value={payload} emptyLabel='No payload' />
-      </DetailSection>
-      <DetailSection label='Arguments'>
-        <JsonViewer value={write.args ?? []} />
-      </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 93261d06..6cabf7d1 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -118,7 +118,6 @@ export interface DevtoolsSnapshot {
   events: DevtoolsEvent[]
   timeline: DevtoolsTimeline
   writes: WriteRecord[]
-  inFlightWrites: number
 }
 
 export interface DevtoolsCacheEntity {
@@ -148,7 +147,6 @@ export interface Collector {
   getSnapshot(): DevtoolsSnapshot
   clearEvents(): void
   clearTimeline(): void
-  clearWrites(): void
   reset(): void
 }
 
@@ -188,7 +186,6 @@ const EMPTY_SNAPSHOT: DevtoolsSnapshot = {
   events: [],
   timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
   writes: [],
-  inFlightWrites: 0,
 }
 
 function errorMessage(error: unknown): string {
@@ -457,7 +454,6 @@ class FigbirdCollector implements Collector {
         connection: this.#timelineConnection.toArray(),
       },
       writes,
-      inFlightWrites: this.#figbird.mutating?.getSnapshot().length ?? 0,
     }
     this.#dirty = false
     return this.#snapshot
@@ -471,6 +467,7 @@ class FigbirdCollector implements Collector {
   clearTimeline(): void {
     this.#timelineRealtime.clear()
     this.#timelineConnection.clear()
+    this.#clearSettledWrites()
     this.#timelineStartedAt = now()
     this.#timelineLaneOrder = []
     this.#timelineLaneIds.clear()
@@ -480,13 +477,6 @@ class FigbirdCollector implements Collector {
     this.#scheduleNotify()
   }
 
-  clearWrites(): void {
-    for (const [id, write] of this.#writes) {
-      if (write.status !== 'in-flight') this.#writes.delete(id)
-    }
-    this.#scheduleNotify()
-  }
-
   reset(): void {
     this.#queries.clear()
     this.#relational.clear()
@@ -517,6 +507,12 @@ class FigbirdCollector implements Collector {
     queueMicrotask(flush)
   }
 
+  #clearSettledWrites(): void {
+    for (const [id, write] of this.#writes) {
+      if (write.status !== 'in-flight') this.#writes.delete(id)
+    }
+  }
+
   #recordEvent(event: FigbirdEvent): void {
     const at = now()
     this.#events.push({
diff --git a/lib/devtools/timelineModel.ts b/lib/devtools/timelineModel.ts
index 9a8ee8de..3673b21b 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -24,6 +24,13 @@ export interface TimelineActivity {
   traceId?: number
   durationMs?: number
   payload?: unknown
+  write?: {
+    id: string
+    type: WriteRecord['type']
+    optimistic: boolean
+    payload: unknown
+    args: readonly unknown[]
+  }
   error: boolean
   searchText: string
 }
@@ -288,11 +295,27 @@ function writeActivity(write: WriteRecord): TimelineActivity {
     ...(write.serviceName === undefined ? {} : { serviceName: write.serviceName }),
     ...(write.traceId === undefined ? {} : { traceId: write.traceId }),
     ...(write.durationMs === undefined ? {} : { durationMs: write.durationMs }),
-    ...(write.args === undefined ? {} : { payload: write.args }),
+    write: {
+      id: write.id,
+      type: write.type,
+      optimistic: write.optimistic ?? false,
+      payload: writePayload(write),
+      args: write.args ?? [],
+    },
     error: failed,
   })
 }
 
+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
+}
+
 function cacheEffect(events: readonly DevtoolsEvent[], fallback: string): string {
   const outcomes = new Map<string, 'merged' | 'reconcile'>()
   let updated = false
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index cd467803..14ddd790 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -48,8 +48,8 @@ export const lightColors: DevtoolsColors = {
   border: '#d7dde3',
   rowBorder: '#e8edf2',
   text: '#18202a',
-  muted: '#687483',
-  faint: '#8b98a6',
+  muted: '#4f5b69',
+  faint: '#687483',
   green: '#087f4f',
   amber: '#a76500',
   red: '#cf3030',
@@ -67,8 +67,8 @@ 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',
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index 04335b45..6dac67f4 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -516,7 +516,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++) {
@@ -666,7 +666,6 @@ test('devtools model keeps operation identity separate from shared fetch identit
     events: [],
     timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
     writes: [],
-    inFlightWrites: 0,
   }
 
   const model = buildDevtoolsModel(snapshot)
@@ -742,7 +741,6 @@ test('query details show a cursor operation as one inspectable page chain', t =>
     events: [],
     timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
     writes: [],
-    inFlightWrites: 0,
   }
   const collector: Collector = {
     eventLimit: 500,
@@ -752,7 +750,6 @@ test('query details show a cursor operation as one inspectable page chain', t =>
     getSnapshot: () => snapshot,
     clearEvents() {},
     clearTimeline() {},
-    clearWrites() {},
     reset() {},
   }
 
@@ -1023,7 +1020,6 @@ test('panel shows root queries and nests relation fetches in details', async t =
       connection: [],
     },
     writes: [],
-    inFlightWrites: 0,
   }
   const events = new FigbirdEventEmitter()
   const inspectedRows = snapshot.queries.map(inspectedRow)

From aa7beab9a638ee59749e079f04a9be2e15f979ba Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 00:19:05 +0100
Subject: [PATCH 15/42] Collapse wrapper actions in timeline

---
 lib/devtools/TimelineActivityTable.tsx |  9 ++++
 lib/devtools/timelineModel.ts          | 63 +++++++++++++++++++++++---
 2 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index 58f0458c..1d4d7267 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -552,6 +552,15 @@ function ActivityDetails({
           />
         ) : null}
         {activity.write ? <DetailStat label='Write ID' value={activity.write.id} /> : 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}
       </div>
       {activity.write ? (
         <>
diff --git a/lib/devtools/timelineModel.ts b/lib/devtools/timelineModel.ts
index 3673b21b..274b1037 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -7,6 +7,8 @@ import type { DevtoolsModel } from './model.js'
 export type TimelineActivityKind = 'fetch' | 'realtime' | 'connection' | 'write'
 export type TimelineActivityTone = 'green' | 'amber' | 'red' | 'blue' | 'neutral'
 
+const ACTION_WRAPPER_START_TOLERANCE_MS = 10
+
 export interface TimelineActivity {
   id: string
   kind: TimelineActivityKind
@@ -30,6 +32,11 @@ export interface TimelineActivity {
     optimistic: boolean
     payload: unknown
     args: readonly unknown[]
+    initiatingAction?: {
+      id: string
+      name: string
+      durationMs?: number
+    }
   }
   error: boolean
   searchText: string
@@ -52,9 +59,9 @@ export function buildTimelineActivities(
     ...snapshot.timeline.connection.map((item, index) =>
       connectionActivity(item.at, item.event, index, eventContext),
     ),
-    ...snapshot.writes
-      .filter(write => write.startedAt >= snapshot.timeline.startedAt)
-      .map(writeActivity),
+    ...buildWriteActivities(
+      snapshot.writes.filter(write => write.startedAt >= snapshot.timeline.startedAt),
+    ),
   ]
   return activities.sort((a, b) => a.startAt - b.startAt || a.id.localeCompare(b.id))
 }
@@ -270,22 +277,55 @@ function connectionActivity(
   })
 }
 
-function writeActivity(write: WriteRecord): TimelineActivity {
+function buildWriteActivities(writes: readonly WriteRecord[]): 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, 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, initiatingAction?: WriteRecord): TimelineActivity {
   const failed = write.status === 'error' || write.status === 'rollback'
   const label =
     write.type === 'action'
       ? (write.name ?? '(anonymous action)')
       : `${write.serviceName ?? ''}.${write.method ?? ''}${write.itemId === undefined ? '' : ` #${write.itemId}`}`
+  const actionName = initiatingAction?.name ?? (initiatingAction ? '(anonymous action)' : undefined)
   return searchable({
     id: `write:${write.id}`,
     kind: 'write',
     startAt: write.startedAt,
     ...(write.endedAt === undefined ? {} : { endAt: write.endedAt }),
     label,
-    detail: write.type,
+    detail: actionName ? `${actionName} action` : write.type,
     status: write.status,
     tone: failed ? 'red' : write.status === 'in-flight' ? 'amber' : 'green',
-    trigger: write.type === 'action' ? 'action' : 'UI mutation',
+    trigger: initiatingAction || write.type === 'action' ? 'action' : 'UI mutation',
     effect: write.optimistic
       ? write.rolledBack
         ? 'optimistic rollback'
@@ -301,6 +341,17 @@ function writeActivity(write: WriteRecord): TimelineActivity {
       optimistic: write.optimistic ?? false,
       payload: writePayload(write),
       args: write.args ?? [],
+      ...(initiatingAction && actionName
+        ? {
+            initiatingAction: {
+              id: initiatingAction.id,
+              name: actionName,
+              ...(initiatingAction.durationMs === undefined
+                ? {}
+                : { durationMs: initiatingAction.durationMs }),
+            },
+          }
+        : {}),
     },
     error: failed,
   })

From 0dbe21ae56e04ff6de9e3d5e06f91a44de8726eb Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 09:24:06 +0100
Subject: [PATCH 16/42] Compact devtools status rows

---
 lib/devtools/EventsTab.tsx | 28 ++++++++--------------------
 lib/devtools/ui.tsx        | 35 +++++++++++++++++++----------------
 2 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index 8c5992aa..32267447 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -18,6 +18,7 @@ import { formatClock } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
 import type { EventQueryScope } from './model.js'
 import {
+  Badge,
   ColumnResizeHandle,
   DetailSection,
   DetailStat,
@@ -313,33 +314,20 @@ function EventScopeBadge({
     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
+      ? 'blue'
+      : 'neutral'
   return (
-    <span
+    <Badge
+      tone={tone}
       title={[...scopes.map(item => item.title), queryId ? `query id: ${queryId}` : '']
         .filter(Boolean)
         .join('\n')}
-      style={{
-        display: 'inline-block',
-        maxWidth: 150,
-        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`}
-    </span>
+    </Badge>
   )
 }
 
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 14ddd790..bf155f10 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -165,7 +165,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 +228,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>
 }
 
@@ -562,19 +554,30 @@ export function Badge({
     <span
       title={title}
       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>
   )
 }

From 3ae37ed3ea33b89cb2c7bf75a575fad7a3a90341 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 09:26:43 +0100
Subject: [PATCH 17/42] Hide missing legacy query shape

---
 lib/devtools/QueriesTab.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index e62a3f80..a9674305 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -254,7 +254,8 @@ export function QueriesTab({
                         color: operation.composition ? colors.text : colors.faint,
                       }}
                     >
-                      {operation.composition?.detail ?? compactJson(query.query)}
+                      {operation.composition?.detail ??
+                        (query.query === undefined ? '—' : compactJson(query.query))}
                       {operation.rootFetches.length > 1
                         ? ` · ${operation.rootFetches.length} root fetches`
                         : ''}

From e971d16cbaa20642f4f8aeb22ad48e8db367d56c Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 09:34:16 +0100
Subject: [PATCH 18/42] Separate timeline operations from activity

---
 lib/devtools/TimelineActivityTable.tsx | 22 +++++++----
 lib/devtools/timelineModel.ts          | 51 ++++++++++++++++----------
 test/devtools.test.tsx                 | 20 +++++++---
 3 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index 1d4d7267..9d403cf1 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -29,13 +29,14 @@ type TimelineVisibility = 'all' | 'fetch' | 'realtime' | 'write' | 'connection'
 
 const COLUMNS = [
   { label: 'Time', width: 96, minWidth: 78 },
-  { label: 'Activity', width: 190, minWidth: 130 },
-  { label: 'Context', width: 125, minWidth: 80 },
-  { label: 'Status', width: 94, minWidth: 78 },
-  { label: 'Trigger', width: 110, minWidth: 80 },
-  { label: 'Cache effect', width: 135, minWidth: 90 },
-  { label: 'Result', width: 125, minWidth: 85 },
-  { label: 'Duration', width: 78, minWidth: 62 },
+  { 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
 
@@ -389,6 +390,7 @@ function ActivityRow({
           </strong>
         </span>
       </td>
+      <EllipsisCell value={activity.operation} />
       <EllipsisCell value={activity.detail || '—'} />
       <td style={styles.td}>
         <Badge tone={activity.tone}>{activity.status}</Badge>
@@ -517,7 +519,9 @@ function ActivityDetails({
   const { colors } = useDevtoolsTheme()
   return (
     <DetailsPane
-      title={activity.label}
+      title={
+        activity.operation === 'action' ? activity.label : `${activity.label}.${activity.operation}`
+      }
       subtitle={activity.write?.type ?? activity.kind}
       width={width}
       onResizeStart={onResizeStart}
@@ -531,6 +535,8 @@ function ActivityDetails({
           marginBottom: 16,
         }}
       >
+        <DetailStat label='Operation' value={activity.operation} />
+        {activity.detail ? <DetailStat label='Context' value={activity.detail} /> : null}
         <DetailStat label='Status' value={activity.status} />
         <DetailStat
           label='Started'
diff --git a/lib/devtools/timelineModel.ts b/lib/devtools/timelineModel.ts
index 274b1037..57924dd6 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -15,6 +15,7 @@ export interface TimelineActivity {
   startAt: number
   endAt?: number
   label: string
+  operation: string
   detail: string
   status: string
   tone: TimelineActivityTone
@@ -170,7 +171,8 @@ function buildFetchActivities(
         kind: 'fetch',
         startAt: span.startAt,
         ...(span.endAt === undefined ? {} : { endAt: span.endAt }),
-        label: `${query.serviceName}.${query.method}`,
+        label: query.serviceName,
+        operation: query.method,
         detail: [query.resourceId === undefined ? '' : `#${query.resourceId}`, scope ?? '']
           .filter(Boolean)
           .join(' · '),
@@ -201,20 +203,15 @@ function buildRealtimeActivities(
       item.traceId === undefined ? [] : (context.traceEvents.get(item.traceId) ?? [])
     const effect = cacheEffect(traceEvents, 'received')
     const fetches = traceEvents.filter(related => related.event.kind === 'fetch:start').length
-    const result = [
-      event?.type ?? 'event',
-      event?.itemId === undefined ? '' : `#${event.itemId}`,
-      fetches > 0 ? `${fetches} ${fetches === 1 ? 'fetch' : 'fetches'} triggered` : '',
-    ]
-      .filter(Boolean)
-      .join(' · ')
+    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} realtime`,
-      detail: event ? `${event.type}${event.itemId === undefined ? '' : ` #${event.itemId}`}` : '',
+      label: item.serviceName,
+      operation: event?.type ?? 'event',
+      detail: event?.itemId === undefined ? '' : `#${event.itemId}`,
       status: 'received',
       tone: 'blue',
       trigger: 'socket event',
@@ -243,7 +240,7 @@ function connectionActivity(
     event.traceId === undefined ? [] : (context.traceEvents.get(event.traceId) ?? [])
   const sweep = traceEvents.find(item => item.event.kind === 'reconnect:sweep')?.event
   const fetches = traceEvents.filter(item => item.event.kind === 'fetch:start').length
-  const status = connectionStatus(event)
+  const operation = connectionOperation(event)
   const result = [
     'transport' in event ? (event.transport ?? '') : '',
     'attempt' in event && event.attempt !== undefined ? `attempt ${event.attempt}` : '',
@@ -259,7 +256,8 @@ function connectionActivity(
     kind: 'connection',
     startAt: at,
     endAt: at,
-    label: status,
+    label: 'socket',
+    operation,
     detail: connectionDetail(event),
     status: failed
       ? event.kind === 'connection:disconnected'
@@ -314,7 +312,8 @@ function writeActivity(write: WriteRecord, initiatingAction?: WriteRecord): Time
   const label =
     write.type === 'action'
       ? (write.name ?? '(anonymous action)')
-      : `${write.serviceName ?? ''}.${write.method ?? ''}${write.itemId === undefined ? '' : ` #${write.itemId}`}`
+      : (write.serviceName ?? 'mutation')
+  const operation = write.type === 'action' ? 'action' : (write.method ?? 'mutate')
   const actionName = initiatingAction?.name ?? (initiatingAction ? '(anonymous action)' : undefined)
   return searchable({
     id: `write:${write.id}`,
@@ -322,7 +321,16 @@ function writeActivity(write: WriteRecord, initiatingAction?: WriteRecord): Time
     startAt: write.startedAt,
     ...(write.endedAt === undefined ? {} : { endAt: write.endedAt }),
     label,
-    detail: actionName ? `${actionName} action` : write.type,
+    operation,
+    detail:
+      write.type === 'mutation'
+        ? [
+            write.itemId === undefined ? '' : `#${write.itemId}`,
+            actionName ? `${actionName} action` : '',
+          ]
+            .filter(Boolean)
+            .join(' · ')
+        : '',
     status: write.status,
     tone: failed ? 'red' : write.status === 'in-flight' ? 'amber' : 'green',
     trigger: initiatingAction || write.type === 'action' ? 'action' : 'UI mutation',
@@ -397,18 +405,20 @@ function fetchTrigger(
   return cause ? cause.replace('-', ' ') : 'request'
 }
 
-function connectionStatus(event: Extract<FigbirdEvent, { kind: `connection:${string}` }>): string {
+function connectionOperation(
+  event: Extract<FigbirdEvent, { kind: `connection:${string}` }>,
+): string {
   switch (event.kind) {
     case 'connection:connected':
-      return 'Connected'
+      return 'connected'
     case 'connection:disconnected':
-      return 'Disconnected'
+      return 'disconnected'
     case 'connection:reconnected':
-      return 'Reconnected'
+      return 'reconnected'
     case 'connection:error':
-      return event.phase === 'connect' ? 'Connection error' : 'Reconnect error'
+      return event.phase === 'connect' ? 'connect error' : 'reconnect error'
     case 'connection:reconnect-failed':
-      return 'Reconnection failed'
+      return 'reconnect failed'
   }
 }
 
@@ -438,6 +448,7 @@ function searchable(activity: Omit<TimelineActivity, 'searchText'>): TimelineAct
     searchText: [
       activity.kind,
       activity.label,
+      activity.operation,
       activity.detail,
       activity.status,
       activity.trigger,
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index 6dac67f4..afb987bb 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -1175,9 +1175,19 @@ test('panel shows root queries and nests relation fetches in details', async t =
   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('patched'),
+    ).length,
+    1,
+  )
   t.falsy($all('button').find(button => button.textContent === '30s'))
   t.truthy($('[aria-label="Timeline overview"]'))
   t.truthy($('[aria-label="Timeline overview"] canvas'))
@@ -1189,9 +1199,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
   click(liveTimelineButton!)
   t.truthy($('[aria-label="Resume live timeline"]'))
 
-  const timelineActivities = $all('[data-timeline-activity]').map(row =>
-    row.getAttribute('data-timeline-activity'),
-  )
+  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'))

From 09b052b7d73ce468e2d0a2dd999357f9fda777fe Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 09:37:07 +0100
Subject: [PATCH 19/42] Show timeline activity payloads

---
 lib/devtools/TimelineActivityTable.tsx | 21 ++++++++++++++++++---
 lib/devtools/timelineModel.ts          |  2 ++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index 9d403cf1..d401d769 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -577,9 +577,24 @@ function ActivityDetails({
             <JsonViewer value={activity.write.args} />
           </DetailSection>
         </>
-      ) : activity.payload !== undefined ? (
-        <DetailSection label={activity.kind === 'realtime' ? 'Event payload' : 'Parameters'}>
-          <JsonViewer value={activity.payload} />
+      ) : activity.kind === 'fetch' ? (
+        <>
+          {activity.payload !== undefined ? (
+            <DetailSection label='Parameters'>
+              <JsonViewer value={activity.payload} />
+            </DetailSection>
+          ) : null}
+          <DetailSection label='Current query data'>
+            <JsonViewer value={activity.data} emptyLabel='No query data captured' />
+          </DetailSection>
+        </>
+      ) : activity.kind === 'realtime' ? (
+        <DetailSection label='Event payload'>
+          <JsonViewer value={activity.payload} emptyLabel='No event payload captured' />
+        </DetailSection>
+      ) : activity.kind === 'connection' ? (
+        <DetailSection label='Connection event'>
+          <JsonViewer value={activity.payload} emptyLabel='No connection event captured' />
         </DetailSection>
       ) : null}
       {activity.traceId !== undefined && onTraceSelect ? (
diff --git a/lib/devtools/timelineModel.ts b/lib/devtools/timelineModel.ts
index 57924dd6..d087f4d5 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -27,6 +27,7 @@ export interface TimelineActivity {
   traceId?: number
   durationMs?: number
   payload?: unknown
+  data?: unknown
   write?: {
     id: string
     type: WriteRecord['type']
@@ -186,6 +187,7 @@ function buildFetchActivities(
         ...(traceId === undefined ? {} : { traceId }),
         durationMs,
         ...(payload === undefined ? {} : { payload }),
+        ...(query.data === undefined ? {} : { data: query.data }),
         error: failed,
       })
     }),

From 9e1a360b2afdcfc84163f671968f67fefa87ce45 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 09:43:22 +0100
Subject: [PATCH 20/42] Improve query and cache inspectors

---
 lib/devtools/CacheTab.tsx     |  69 ++++++-
 lib/devtools/JsonViewer.tsx   |   2 +-
 lib/devtools/QueriesTab.tsx   |   2 +-
 lib/devtools/QueryDetails.tsx | 330 +++++++++++++++++++---------------
 lib/devtools/format.ts        |  27 +++
 lib/devtools/ui.tsx           |  26 ++-
 6 files changed, 300 insertions(+), 156 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index ada36406..97335aaf 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -1,5 +1,12 @@
 import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
-import { compactJson, formatAge, formatClock, prettyJson } from './format.js'
+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'
@@ -16,11 +23,15 @@ import {
 
 const CACHE_COLUMNS = [
   { label: 'entity', width: 150, minWidth: 90 },
+  { label: 'est. size', width: 90, minWidth: 72 },
   { label: 'value', width: 310, minWidth: 160 },
   { label: 'queries', width: 110, minWidth: 76 },
   { label: 'provenance', 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.'
+
 export interface DevtoolsCacheEditor {
   update(
     serviceName: string,
@@ -52,6 +63,20 @@ export function CacheTab({
   const [columnWidths, onColumnResizeStart] = useResizableColumns(CACHE_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
   const tableWidth = columnWidths.reduce((sum, width) => sum + width, 0)
+  const serviceSizes = useMemo(
+    () =>
+      new Map(
+        orderedServices.map(item => [
+          item.serviceName,
+          item.entities.reduce(
+            (total, entity) => total + (estimateSerializedBytes(entity.value) ?? 0),
+            0,
+          ),
+        ]),
+      ),
+    [orderedServices],
+  )
+  const totalSize = [...serviceSizes.values()].reduce((total, size) => total + size, 0)
 
   useEffect(() => {
     if (serviceName && orderedServices.some(service => service.serviceName === serviceName)) return
@@ -82,14 +107,21 @@ export function CacheTab({
         }}
       >
         <div
+          title={CACHE_SIZE_DESCRIPTION}
           style={{
             padding: '8px 10px',
             color: colors.muted,
             fontWeight: 650,
             borderBottom: `1px solid ${colors.border}`,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
           }}
         >
-          Normalized cache
+          <span>Normalized cache</span>
+          <code style={{ ...styles.code, color: colors.faint, marginLeft: 'auto' }}>
+            ≈ {formatBytes(totalSize)}
+          </code>
         </div>
         {orderedServices.map(item => {
           const selectedService = item.serviceName === serviceName
@@ -135,6 +167,10 @@ export function CacheTab({
                   }}
                 >
                   {item.entities.length}
+                  <span aria-hidden='true'>·</span>
+                  <span title={CACHE_SIZE_DESCRIPTION}>
+                    ≈ {formatBytes(serviceSizes.get(item.serviceName) ?? 0)}
+                  </span>
                   {item.materialized ? (
                     <svg
                       aria-label='Complete cached set'
@@ -174,7 +210,11 @@ export function CacheTab({
             <thead>
               <tr>
                 {CACHE_COLUMNS.map((column, index) => (
-                  <th key={column.label} style={{ ...styles.th, position: 'sticky' }}>
+                  <th
+                    key={column.label}
+                    style={{ ...styles.th, position: 'sticky' }}
+                    {...(column.label === 'est. size' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
+                  >
                     {column.label}
                     <ColumnResizeHandle
                       label={column.label}
@@ -187,13 +227,14 @@ export function CacheTab({
             <tbody>
               {entities.length === 0 ? (
                 <tr>
-                  <td colSpan={4} style={{ ...styles.td, color: colors.muted }}>
+                  <td colSpan={CACHE_COLUMNS.length} style={{ ...styles.td, color: colors.muted }}>
                     No matching cached entities.
                   </td>
                 </tr>
               ) : null}
               {entities.map(entity => {
                 const isSelected = entity.id === selectedId
+                const estimatedSize = estimateSerializedBytes(entity.value)
                 return (
                   <tr
                     key={entity.id}
@@ -216,6 +257,18 @@ export function CacheTab({
                     <td style={styles.td}>
                       <code style={{ ...styles.code, fontWeight: 650 }}>#{entity.id}</code>
                     </td>
+                    <td style={styles.td}>
+                      <code
+                        title={
+                          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}>
                       <code
                         title={prettyJson(entity.value)}
@@ -346,6 +399,9 @@ function CacheEntityDetails({
           {entity.queryIds.length} query{' '}
           {entity.queryIds.length === 1 ? 'membership' : 'memberships'}
         </span>
+        <code title={CACHE_SIZE_DESCRIPTION} style={{ ...styles.code, color: colors.muted }}>
+          {formatEstimatedSize(entity.value)}
+        </code>
         <span style={styles.spacer} />
         {editor && !editing ? (
           <button
@@ -503,3 +559,8 @@ function queryLabel(model: DevtoolsModel, queryId: string): string {
   }
   return queryId
 }
+
+function formatEstimatedSize(value: unknown): string {
+  const bytes = estimateSerializedBytes(value)
+  return bytes === null ? '—' : `≈ ${formatBytes(bytes)}`
+}
diff --git a/lib/devtools/JsonViewer.tsx b/lib/devtools/JsonViewer.tsx
index 784ca045..5ced5161 100644
--- a/lib/devtools/JsonViewer.tsx
+++ b/lib/devtools/JsonViewer.tsx
@@ -17,7 +17,7 @@ export function JsonViewer({
 }: {
   value: unknown
   emptyLabel?: string
-  maxHeight?: number
+  maxHeight?: number | string
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [raw, setRaw] = useState(false)
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index a9674305..d011ba8d 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -89,7 +89,7 @@ export function QueriesTab({
   const { colors, styles } = useDevtoolsTheme()
   const [selectedOperationKey, setSelectedOperationKey] = useState<string | null>(null)
   const [columnWidths, onColumnResizeStart] = useResizableColumns(QUERY_COLUMNS)
-  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
+  const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth({ defaultWidth: 680 })
   const rows: QueryRow[] = model.operations
     .flatMap(operation => {
       const query = operation.summary
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index 3755389a..a584afa8 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -18,6 +18,8 @@ import type {
 import { ClassBadge, plural, queryStatus, QueryStatusDot } from './QueryPresentation.js'
 import { Badge, DetailsPane, useDevtoolsTheme, type DevtoolsColors } from './ui.js'
 
+const SPLIT_DETAILS_WIDTH = 600
+
 export function QueryDetails({
   operation,
   width,
@@ -44,6 +46,7 @@ export function QueryDetails({
   const rootTitle = `${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 =
@@ -117,167 +120,206 @@ export function QueryDetails({
       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>
-      <QueryDetailSection label='Realtime handling'>
-        <div
-          style={{
-            padding: '8px 10px',
-            background: colors.panel2,
-            borderLeft: `3px solid ${
-              activeQuery.realtimeStrategy === 'merge'
-                ? colors.green
-                : activeQuery.realtimeStrategy === 'manual'
-                  ? colors.faint
-                  : colors.amber
-            }`,
-          }}
-        >
-          <strong style={{ fontWeight: 650 }}>
-            {activeQuery.realtimeStrategy === 'merge'
-              ? 'Merges events locally'
-              : activeQuery.realtimeStrategy === 'manual'
-                ? 'Manual realtime'
-                : 'Reconciles uncertain events'}
-          </strong>
-          <div style={{ color: colors.muted, marginTop: 3 }}>
-            {activeQuery.classificationReasons?.length
-              ? activeQuery.classificationReasons.map(classificationReasonLabel).join(' · ')
-              : activeQuery.classification === 'get'
-                ? 'Direct entity lookup'
-                : 'Membership and ordering are locally provable'}
+        <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' }}>
+              {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
+            </span>
           </div>
-        </div>
-      </QueryDetailSection>
-      {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 ? (
+          <QueryDetailSection label='Realtime handling'>
+            <div
+              style={{
+                padding: '8px 10px',
+                background: colors.panel2,
+                borderLeft: `3px solid ${
+                  activeQuery.realtimeStrategy === 'merge'
+                    ? colors.green
+                    : activeQuery.realtimeStrategy === 'manual'
+                      ? colors.faint
+                      : colors.amber
+                }`,
+              }}
+            >
+              <strong style={{ fontWeight: 650 }}>
+                {activeQuery.realtimeStrategy === 'merge'
+                  ? 'Merges events locally'
+                  : activeQuery.realtimeStrategy === 'manual'
+                    ? 'Manual realtime'
+                    : 'Reconciles uncertain events'}
+              </strong>
+              <div style={{ color: colors.muted, marginTop: 3 }}>
+                {activeQuery.classificationReasons?.length
+                  ? activeQuery.classificationReasons.map(classificationReasonLabel).join(' · ')
+                  : activeQuery.classification === 'get'
+                    ? 'Direct entity lookup'
+                    : 'Membership and ordering are locally provable'}
+              </div>
+            </div>
+          </QueryDetailSection>
+          {activeQuery.lastError ? (
             <div
+              title={`Most recently observed fetch error · query generation ${activeQuery.lastError.generation}`}
               style={{
-                marginLeft: selectedUnderlying ? 0 : 7,
-                paddingLeft: selectedUnderlying ? 0 : 13,
-                borderLeft: selectedUnderlying ? undefined : `1px solid ${colors.border}`,
+                color: colors.red,
+                background: colors.panel2,
+                borderLeft: `3px solid ${colors.red}`,
+                padding: '7px 9px',
+                marginBottom: 10,
               }}
             >
-              {directChildren.map(item => (
+              <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
-                  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(' · ')}
-                  classification={item.query.classification}
-                  onSelect={() => setSelectedUnderlyingKey(underlyingFetchKey(item))}
+                  path='root'
+                  operation={rootOperation}
+                  detail={
+                    composition?.planDetail ??
+                    (summary.method === 'get'
+                      ? `id ${summary.resourceId ?? '?'}`
+                      : compactJson(summary.query ?? {}))
+                  }
                 />
-              ))}
-            </div>
+              ) : null}
+              {directChildren.length > 0 ? (
+                <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(' · ')}
+                      classification={item.query.classification}
+                      onSelect={() => setSelectedUnderlyingKey(underlyingFetchKey(item))}
+                    />
+                  ))}
+                </div>
+              ) : null}
+            </QueryDetailSection>
           ) : null}
-        </QueryDetailSection>
-      ) : null}
-      <QueryDetailSection
-        label='Query data'
-        meta={activeQuery.skipped ? 'skipped' : plural(activeQuery.itemCount, 'row', 'rows')}
-      >
-        <JsonViewer value={activeQuery.data} />
-      </QueryDetailSection>
-      <QueryDetailSection label='Parameters'>
-        <JsonViewer value={activeQuery.query ?? {}} />
-      </QueryDetailSection>
+          {!splitDetails ? <QueryData query={activeQuery} /> : null}
+          <QueryDetailSection label='Parameters'>
+            <JsonViewer value={activeQuery.query ?? {}} />
+          </QueryDetailSection>
+        </div>
+        {splitDetails ? (
+          <div
+            style={{
+              minWidth: 0,
+              minHeight: 0,
+              overflow: 'auto',
+              padding: 12,
+              borderLeft: `1px solid ${colors.border}`,
+              background: colors.bg,
+            }}
+          >
+            <QueryData query={activeQuery} fill />
+          </div>
+        ) : null}
+      </div>
     </DetailsPane>
   )
 }
 
+function QueryData({ query, fill = false }: { query: QuerySummary; fill?: boolean }) {
+  return (
+    <QueryDetailSection
+      label='Query data'
+      meta={query.skipped ? 'skipped' : plural(query.itemCount, 'row', 'rows')}
+    >
+      <JsonViewer value={query.data} maxHeight={fill ? 'none' : 360} />
+    </QueryDetailSection>
+  )
+}
+
 function classificationReasonLabel(reason: { code: string; detail?: string }): string {
   switch (reason.code) {
     case 'server-flag':
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/ui.tsx b/lib/devtools/ui.tsx
index bf155f10..0da51d7b 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -329,6 +329,7 @@ export function DetailsPane({
   width,
   onResizeStart,
   onClose,
+  contentStyle,
   children,
 }: {
   title: ReactNode
@@ -336,6 +337,7 @@ export function DetailsPane({
   width: number
   onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
   onClose: () => void
+  contentStyle?: CSSProperties
   children: ReactNode
 }) {
   const { colors, styles } = useDevtoolsTheme()
@@ -407,7 +409,7 @@ export function DetailsPane({
           ×
         </button>
       </div>
-      <div style={styles.details}>{children}</div>
+      <div style={{ ...styles.details, ...contentStyle }}>{children}</div>
     </aside>
   )
 }
@@ -513,18 +515,30 @@ export function resizableGridTemplate(widths: readonly number[], flexibleIndex:
     .join(' ')
 }
 
-export function useDetailsPaneWidth(): [number, (event: ReactMouseEvent<HTMLDivElement>) => void] {
-  const [width, setWidth] = useState(DEFAULT_DETAILS_WIDTH)
+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 = () => {
@@ -534,7 +548,7 @@ export function useDetailsPaneWidth(): [number, (event: ReactMouseEvent<HTMLDivE
       ownerWindow.addEventListener('mousemove', onMove)
       ownerWindow.addEventListener('mouseup', onUp)
     },
-    [width],
+    [maxWidth, width],
   )
   return [width, onResizeStart]
 }

From a6b5aafbe00d74c749b0a05cb837fb2a4ddc8993 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:14:01 +0100
Subject: [PATCH 21/42] Keep live timeline pinned to latest activity

---
 lib/devtools/TimelineActivityTable.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index d401d769..b3902164 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -68,6 +68,7 @@ export function TimelineActivityTable({
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const scrollRef = useRef<HTMLDivElement>(null)
+  const scrollPausedFollowRef = useRef(false)
   const [visibility, setVisibility] = useState<TimelineVisibility>('all')
   const [filter, setFilter] = useState('')
   const [range, setRange] = useState<TimelineRange | null>(null)
@@ -96,6 +97,7 @@ export function TimelineActivityTable({
     activity =>
       activity.kind === 'write' && activity.status === 'in-flight' && activity.write?.optimistic,
   ).length
+  const latestVisibleActivityId = rows.at(-1)?.id
   const waterfallIndex = COLUMNS.length - 1
   const fixedColumnsWidth = columnWidths
     .slice(0, waterfallIndex)
@@ -120,8 +122,9 @@ export function TimelineActivityTable({
   useLayoutEffect(() => {
     const scroll = scrollRef.current
     if (!scroll || !follow) return
+    scrollPausedFollowRef.current = false
     scroll.scrollTop = Math.max(0, scroll.scrollHeight - scroll.clientHeight)
-  }, [activities.length, follow])
+  }, [follow, latestVisibleActivityId])
 
   useLayoutEffect(() => {
     const scroll = scrollRef.current
@@ -165,7 +168,10 @@ export function TimelineActivityTable({
         onRangeChange={next => {
           setRange(next)
           setSelectedId(null)
-          if (next) onFollowChange(false)
+          if (next) {
+            scrollPausedFollowRef.current = false
+            onFollowChange(false)
+          }
         }}
       />
       <div
@@ -251,10 +257,19 @@ export function TimelineActivityTable({
           aria-label='Timeline activity'
           style={{ ...styles.scroll, flex: 1, minWidth: 0 }}
           onScroll={event => {
-            if (!follow) return
             const scroll = event.currentTarget
             const distance = scroll.scrollHeight - scroll.clientHeight - scroll.scrollTop
-            if (distance > FOLLOW_THRESHOLD) onFollowChange(false)
+            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 }}>

From 94ef56262397ec0c99f9ce9348a64f2f78fc35dc Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:15:40 +0100
Subject: [PATCH 22/42] Let timeline overview use the full width

---
 lib/devtools/TimelineOverview.tsx | 74 +++++++++++--------------------
 1 file changed, 26 insertions(+), 48 deletions(-)

diff --git a/lib/devtools/TimelineOverview.tsx b/lib/devtools/TimelineOverview.tsx
index 39bbfac9..1ad02dfa 100644
--- a/lib/devtools/TimelineOverview.tsx
+++ b/lib/devtools/TimelineOverview.tsx
@@ -3,7 +3,6 @@ import type { TimelineActivity, TimelineActivityKind, TimelineExtent } from './t
 import { useDevtoolsTheme } from './ui.js'
 
 const OVERVIEW_HEIGHT = 54
-const LABEL_WIDTH = 180
 const DRAG_THRESHOLD = 3
 
 export interface TimelineRange {
@@ -65,60 +64,39 @@ export function TimelineOverview({
   }
 
   return (
-    <div
+    <button
+      type='button'
+      aria-label='Timeline overview'
+      title='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: `${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
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          padding: '0 10px',
-          minWidth: 0,
-        }}
-      >
-        <strong style={{ color: colors.text, fontWeight: 650 }}>Recording overview</strong>
-        <span style={{ color: colors.faint, marginTop: 2 }}>
-          {activities.length} {activities.length === 1 ? 'activity' : 'activities'}
-        </span>
-      </div>
-      <button
-        type='button'
-        aria-label='Timeline overview'
-        title='Drag to filter the activity table by time. Click to clear the range.'
-        onMouseDown={onMouseDown}
-        onKeyDown={event => {
-          if (event.key === 'Escape') onRangeChange(null)
-        }}
+      <canvas
+        ref={canvasRef}
+        aria-hidden='true'
         style={{
-          position: 'relative',
-          overflow: 'hidden',
-          border: 0,
-          borderLeft: `1px solid ${colors.border}`,
-          padding: 0,
-          background: colors.panel,
-          cursor: 'crosshair',
+          display: 'block',
+          width: '100%',
+          height: OVERVIEW_HEIGHT,
+          pointerEvents: 'none',
         }}
-      >
-        <canvas
-          ref={canvasRef}
-          aria-hidden='true'
-          style={{
-            display: 'block',
-            width: '100%',
-            height: OVERVIEW_HEIGHT,
-            pointerEvents: 'none',
-          }}
-        />
-      </button>
-    </div>
+      />
+    </button>
   )
 }
 

From d38ad471a92f026a86f0320b73b5e4213c0b44a7 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:17:07 +0100
Subject: [PATCH 23/42] Simplify query table headers

---
 lib/devtools/QueriesTab.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index d011ba8d..4e7f1632 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -160,14 +160,7 @@ export function QueriesTab({
                   style={{ ...styles.th, position: 'sticky' }}
                   title={column.description}
                 >
-                  <span
-                    style={{
-                      borderBottom: `1px dotted ${colors.faint}`,
-                      cursor: 'help',
-                    }}
-                  >
-                    {column.label}
-                  </span>
+                  {column.label}
                   <ColumnResizeHandle
                     label={column.label}
                     onMouseDown={event => onColumnResizeStart(index, event)}

From e8976fd2ec3fa4e1b29f5df947742804c17312fb Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:24:00 +0100
Subject: [PATCH 24/42] Simplify devtools inspector layout

---
 lib/devtools/CacheTab.tsx              |  32 +--
 lib/devtools/Devtools.tsx              |  37 +++
 lib/devtools/QueryDetails.tsx          | 352 ++++++++++++-------------
 lib/devtools/TimelineActivityTable.tsx | 126 +++------
 lib/devtools/TimelineTab.tsx           |   8 +-
 lib/devtools/ui.tsx                    |   2 +-
 test/devtools.test.tsx                 |   2 +-
 7 files changed, 270 insertions(+), 289 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 97335aaf..e426e979 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -23,8 +23,8 @@ import {
 
 const CACHE_COLUMNS = [
   { label: 'entity', width: 150, minWidth: 90 },
-  { label: 'est. size', width: 90, minWidth: 72 },
   { label: 'value', width: 310, minWidth: 160 },
+  { label: 'est. size', width: 90, minWidth: 72 },
   { label: 'queries', width: 110, minWidth: 76 },
   { label: 'provenance', width: 150, minWidth: 110 },
 ] as const
@@ -120,7 +120,7 @@ export function CacheTab({
         >
           <span>Normalized cache</span>
           <code style={{ ...styles.code, color: colors.faint, marginLeft: 'auto' }}>
-            ≈ {formatBytes(totalSize)}
+            {formatBytes(totalSize)}
           </code>
         </div>
         {orderedServices.map(item => {
@@ -169,7 +169,7 @@ export function CacheTab({
                   {item.entities.length}
                   <span aria-hidden='true'>·</span>
                   <span title={CACHE_SIZE_DESCRIPTION}>
-                    ≈ {formatBytes(serviceSizes.get(item.serviceName) ?? 0)}
+                    {formatBytes(serviceSizes.get(item.serviceName) ?? 0)}
                   </span>
                   {item.materialized ? (
                     <svg
@@ -257,18 +257,6 @@ export function CacheTab({
                     <td style={styles.td}>
                       <code style={{ ...styles.code, fontWeight: 650 }}>#{entity.id}</code>
                     </td>
-                    <td style={styles.td}>
-                      <code
-                        title={
-                          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}>
                       <code
                         title={prettyJson(entity.value)}
@@ -284,6 +272,18 @@ export function CacheTab({
                         {compactJson(entity.value)}
                       </code>
                     </td>
+                    <td style={styles.td}>
+                      <code
+                        title={
+                          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>
@@ -562,5 +562,5 @@ function queryLabel(model: DevtoolsModel, queryId: string): string {
 
 function formatEstimatedSize(value: unknown): string {
   const bytes = estimateSerializedBytes(value)
-  return bytes === null ? '—' : `≈ ${formatBytes(bytes)}`
+  return bytes === null ? '—' : formatBytes(bytes)
 }
diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index dae627ec..3e3fd26e 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -3,6 +3,7 @@ import { CacheTab, type DevtoolsCacheEditor } from './CacheTab.js'
 import { EventsTab } from './EventsTab.js'
 import { QueriesTab, operationIsInactive } from './QueriesTab.js'
 import { TimelineFollowControl, TimelineTab } from './TimelineTab.js'
+import type { TimelineVisibility } from './TimelineActivityTable.js'
 import type { Collector } from './collector.js'
 import { buildDevtoolsModel } from './model.js'
 import {
@@ -68,6 +69,8 @@ export function FigbirdDevtoolsPanel({
   const [queryVisibility, setQueryVisibility] = useState<QueryVisibility>('active')
   const [eventFilter, setEventFilter] = useState('')
   const [eventVisibility, setEventVisibility] = useState<EventVisibility>('activity')
+  const [timelineFilter, setTimelineFilter] = useState('')
+  const [timelineVisibility, setTimelineVisibility] = useState<TimelineVisibility>('all')
   const [cacheFilter, setCacheFilter] = useState('')
   const [selectedTraceId, setSelectedTraceId] = useState<number | null>(null)
   const [timelineFollow, setTimelineFollow] = useState(true)
@@ -198,6 +201,38 @@ 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'
+                title='Choose which activity types appear in the timeline and overview'
+                value={timelineVisibility}
+                onChange={event =>
+                  setTimelineVisibility(event.currentTarget.value as TimelineVisibility)
+                }
+                style={{
+                  ...styles.input,
+                  width: 'auto',
+                  maxWidth: 'none',
+                  paddingRight: 24,
+                }}
+              >
+                <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
@@ -263,6 +298,8 @@ export function FigbirdDevtoolsPanel({
             <TimelineTab
               snapshot={snapshot}
               model={model}
+              filter={timelineFilter}
+              visibility={timelineVisibility}
               follow={timelineFollow}
               onFollowChange={setTimelineFollow}
               onTraceSelect={traceId => {
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index a584afa8..cd71fd15 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -59,6 +59,7 @@ export function QueryDetails({
             return !item.path.slice(prefix.length).includes('.')
           })
         : underlying
+  const showQueryPlan = directChildren.length > 0
   const breadcrumb = selectedUnderlying ? (
     <>
       <button
@@ -151,36 +152,7 @@ export function QueryDetails({
               {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
             </span>
           </div>
-          <QueryDetailSection label='Realtime handling'>
-            <div
-              style={{
-                padding: '8px 10px',
-                background: colors.panel2,
-                borderLeft: `3px solid ${
-                  activeQuery.realtimeStrategy === 'merge'
-                    ? colors.green
-                    : activeQuery.realtimeStrategy === 'manual'
-                      ? colors.faint
-                      : colors.amber
-                }`,
-              }}
-            >
-              <strong style={{ fontWeight: 650 }}>
-                {activeQuery.realtimeStrategy === 'merge'
-                  ? 'Merges events locally'
-                  : activeQuery.realtimeStrategy === 'manual'
-                    ? 'Manual realtime'
-                    : 'Reconciles uncertain events'}
-              </strong>
-              <div style={{ color: colors.muted, marginTop: 3 }}>
-                {activeQuery.classificationReasons?.length
-                  ? activeQuery.classificationReasons.map(classificationReasonLabel).join(' · ')
-                  : activeQuery.classification === 'get'
-                    ? 'Direct entity lookup'
-                    : 'Membership and ordering are locally provable'}
-              </div>
-            </div>
-          </QueryDetailSection>
+          <QueryMaintenance query={activeQuery} />
           {activeQuery.lastError ? (
             <div
               title={`Most recently observed fetch error · query generation ${activeQuery.lastError.generation}`}
@@ -196,99 +168,52 @@ export function QueryDetails({
               {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}
+          {!splitDetails ? <QueryData query={activeQuery} separated /> : null}
+          <QueryDetailSection label='Parameters' separated>
+            <JsonViewer value={activeQuery.query ?? {}} />
+          </QueryDetailSection>
           {!selectedUnderlying && operation.pagination ? (
             <PaginationDetails pagination={operation.pagination} pages={rootFetches} />
           ) : null}
-          {!selectedUnderlying || directChildren.length > 0 ? (
+          {showQueryPlan ? (
             <QueryDetailSection
               label={selectedUnderlying ? 'Related queries' : 'Query plan'}
-              {...(directChildren.length > 0
-                ? { meta: plural(directChildren.length, 'relation', 'relations') }
-                : {})}
+              meta={plural(directChildren.length, 'relation', 'relations')}
+              separated
             >
               {!selectedUnderlying ? (
-                <QueryPlanRow
-                  path='root'
-                  operation={rootOperation}
-                  detail={
-                    composition?.planDetail ??
-                    (summary.method === 'get'
-                      ? `id ${summary.resourceId ?? '?'}`
-                      : compactJson(summary.query ?? {}))
-                  }
-                />
-              ) : null}
-              {directChildren.length > 0 ? (
-                <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(' · ')}
-                      classification={item.query.classification}
-                      onSelect={() => setSelectedUnderlyingKey(underlyingFetchKey(item))}
-                    />
-                  ))}
-                </div>
+                <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>
             </QueryDetailSection>
           ) : null}
-          {!splitDetails ? <QueryData query={activeQuery} /> : null}
-          <QueryDetailSection label='Parameters'>
-            <JsonViewer value={activeQuery.query ?? {}} />
-          </QueryDetailSection>
+          <QueryPerformance query={activeQuery} average={average} />
         </div>
         {splitDetails ? (
           <div
@@ -309,17 +234,79 @@ export function QueryDetails({
   )
 }
 
-function QueryData({ query, fill = false }: { query: QuerySummary; fill?: boolean }) {
+function QueryData({
+  query,
+  fill = false,
+  separated = false,
+}: {
+  query: QuerySummary
+  fill?: boolean
+  separated?: boolean
+}) {
   return (
     <QueryDetailSection
       label='Query data'
       meta={query.skipped ? 'skipped' : plural(query.itemCount, 'row', 'rows')}
+      separated={separated}
     >
       <JsonViewer value={query.data} maxHeight={fill ? 'none' : 360} />
     </QueryDetailSection>
   )
 }
 
+function QueryMaintenance({ query }: { query: QuerySummary }) {
+  const { colors } = useDevtoolsTheme()
+  return (
+    <dl
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '82px minmax(0, 1fr)',
+        gap: '4px 10px',
+        margin: '0 0 14px',
+      }}
+    >
+      <dt style={{ color: colors.faint }}>Maintenance</dt>
+      <dd style={{ margin: 0, color: colors.text }}>{maintenanceLabel(query)}</dd>
+      <dt style={{ color: colors.faint }}>Reason</dt>
+      <dd style={{ margin: 0, color: colors.muted }}>{maintenanceReason(query)}</dd>
+    </dl>
+  )
+}
+
+function maintenanceLabel(query: QuerySummary): string {
+  switch (query.realtimeStrategy) {
+    case 'merge':
+      return 'Merge matching events locally'
+    case 'manual':
+      return 'Ignore realtime automatically'
+    default:
+      return 'Refetch on uncertain events'
+  }
+}
+
+function maintenanceReason(query: QuerySummary): string {
+  const reasons = query.classificationReasons ?? []
+  const windowReasons = reasons.filter(reason => reason.code === 'window-filter')
+  if (windowReasons.length > 0 && windowReasons.length === reasons.length) {
+    const fields = [
+      ...new Set(windowReasons.map(reason => reason.detail).filter(Boolean)),
+    ] as string[]
+    if (fields.length > 0) {
+      return `${formatList(fields)} ${fields.length === 1 ? 'creates' : 'create'} a server window boundary`
+    }
+  }
+  if (reasons.length > 0) return reasons.map(classificationReasonLabel).join(' · ')
+  return query.classification === 'get'
+    ? 'Direct entity lookup'
+    : 'Membership and ordering are provable locally'
+}
+
+function formatList(values: string[]): string {
+  if (values.length < 2) return values[0] ?? ''
+  if (values.length === 2) return `${values[0]} and ${values[1]}`
+  return `${values.slice(0, -1).join(', ')}, and ${values.at(-1)}`
+}
+
 function classificationReasonLabel(reason: { code: string; detail?: string }): string {
   switch (reason.code) {
     case 'server-flag':
@@ -364,6 +351,7 @@ function PaginationDetails({
     <QueryDetailSection
       label={pagination.strategy === 'cursor' ? 'Cursor page chain' : 'Pages'}
       meta={`${pagination.loadedPages} loaded · size ${pagination.pageSize} · ${state}`}
+      separated
     >
       <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
         {pages.map((page, index) => {
@@ -430,49 +418,74 @@ function breadcrumbButtonStyle(colors: DevtoolsColors): CSSProperties {
   }
 }
 
-function QueryMetric({
-  value,
-  label,
-  borderLeft,
-  borderTop,
-}: {
-  value: string
-  label: string
-  borderLeft?: boolean
-  borderTop?: boolean
-}) {
+function QueryPerformance({ query, average }: { query: QuerySummary; average: number }) {
   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>
+    <QueryDetailSection 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>
+        {query.spans.length > 1 ? (
+          <span style={{ marginLeft: 'auto' }}>
+            <Sparkline spans={query.spans} />
+          </span>
+        ) : null}
+      </div>
+    </QueryDetailSection>
   )
 }
 
 function QueryDetailSection({
   label,
   meta,
+  separated = false,
   children,
 }: {
   label: string
   meta?: string
+  separated?: boolean
   children: ReactNode
 }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <section style={{ marginBottom: 14 }}>
+    <section
+      style={{
+        marginBottom: 14,
+        paddingTop: separated ? 12 : 0,
+        borderTop: separated ? `1px solid ${colors.rowBorder}` : undefined,
+      }}
+    >
       <div
         style={{
           display: 'flex',
@@ -493,14 +506,12 @@ function QueryPlanRow({
   path,
   operation,
   detail,
-  classification,
   role,
   onSelect,
 }: {
   path: string
   operation: string
   detail: string
-  classification?: string
   role?: 'junction'
   onSelect?: () => void
 }) {
@@ -523,12 +534,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,
       }}
     >
@@ -548,39 +554,29 @@ 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
+            title={detail}
+            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>
   )
 }
@@ -590,7 +586,7 @@ function Sparkline({ spans }: { spans: QueryRecord['spans'] }) {
   if (spans.length === 0) return null
   const max = Math.max(1, ...spans.map(span => (span.endAt ?? span.startAt) - span.startAt))
   return (
-    <div style={{ display: 'flex', alignItems: 'end', gap: 2, height: 28, marginTop: 8 }}>
+    <span style={{ display: 'flex', alignItems: 'end', gap: 2, height: 22 }}>
       {spans.slice(-30).map((span, index) => {
         const duration = (span.endAt ?? span.startAt) - span.startAt
         return (
@@ -599,13 +595,13 @@ function Sparkline({ spans }: { spans: QueryRecord['spans'] }) {
             title={formatMs(duration)}
             style={{
               width: 4,
-              height: Math.max(3, (duration / max) * 24),
+              height: Math.max(3, (duration / max) * 20),
               background: span.ok === false ? colors.red : colors.green,
               borderRadius: 2,
             }}
           />
         )
       })}
-    </div>
+    </span>
   )
 }
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index b3902164..ef38f848 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -25,7 +25,7 @@ import {
 
 const FOLLOW_THRESHOLD = 24
 
-type TimelineVisibility = 'all' | 'fetch' | 'realtime' | 'write' | 'connection' | 'errors'
+export type TimelineVisibility = 'all' | 'fetch' | 'realtime' | 'write' | 'connection' | 'errors'
 
 const COLUMNS = [
   { label: 'Time', width: 96, minWidth: 78 },
@@ -40,20 +40,13 @@ const COLUMNS = [
   { label: 'Waterfall', width: 200, minWidth: 130 },
 ] as const
 
-const VISIBILITY_OPTIONS: Array<{ value: TimelineVisibility; label: string }> = [
-  { value: 'all', label: 'All' },
-  { value: 'fetch', label: 'Fetches' },
-  { value: 'realtime', label: 'Realtime' },
-  { value: 'write', label: 'Writes' },
-  { value: 'connection', label: 'Connection' },
-  { value: 'errors', label: 'Errors' },
-]
-
 export function TimelineActivityTable({
   activities,
   extent,
   nowPoint,
   wallClockOffset,
+  filter,
+  visibility,
   follow,
   onFollowChange,
   onTraceSelect,
@@ -62,6 +55,8 @@ export function TimelineActivityTable({
   extent: TimelineExtent | null
   nowPoint: number
   wallClockOffset: number
+  filter: string
+  visibility: TimelineVisibility
   follow: boolean
   onFollowChange: (value: boolean) => void
   onTraceSelect?: (traceId: number) => void
@@ -69,8 +64,6 @@ export function TimelineActivityTable({
   const { colors, styles } = useDevtoolsTheme()
   const scrollRef = useRef<HTMLDivElement>(null)
   const scrollPausedFollowRef = useRef(false)
-  const [visibility, setVisibility] = useState<TimelineVisibility>('all')
-  const [filter, setFilter] = useState('')
   const [range, setRange] = useState<TimelineRange | null>(null)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [availableTableWidth, setAvailableTableWidth] = useState(0)
@@ -79,7 +72,7 @@ export function TimelineActivityTable({
   const hasExtent = extent !== null
   const selected = activities.find(activity => activity.id === selectedId)
   const normalizedFilter = filter.trim().toLowerCase()
-  const rows = activities.filter(activity => {
+  const filteredActivities = activities.filter(activity => {
     if (
       visibility === 'errors'
         ? !activity.error
@@ -87,9 +80,11 @@ export function TimelineActivityTable({
     ) {
       return false
     }
-    if (range && !intersects(activity, range, nowPoint)) return false
     return normalizedFilter ? activity.searchText.includes(normalizedFilter) : true
   })
+  const rows = range
+    ? filteredActivities.filter(activity => intersects(activity, range, nowPoint))
+    : filteredActivities
   const inFlightWriteCount = activities.filter(
     activity => activity.kind === 'write' && activity.status === 'in-flight',
   ).length
@@ -119,6 +114,8 @@ export function TimelineActivityTable({
     if (selectedId && !activities.some(activity => activity.id === selectedId)) setSelectedId(null)
   }, [activities, selectedId])
 
+  useEffect(() => setSelectedId(null), [filter, visibility])
+
   useLayoutEffect(() => {
     const scroll = scrollRef.current
     if (!scroll || !follow) return
@@ -161,7 +158,7 @@ export function TimelineActivityTable({
   return (
     <>
       <TimelineOverview
-        activities={activities}
+        activities={filteredActivities}
         extent={extent}
         range={range}
         nowPoint={nowPoint}
@@ -174,83 +171,6 @@ export function TimelineActivityTable({
           }
         }}
       />
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 6,
-          minHeight: 38,
-          padding: '0 8px',
-          flexShrink: 0,
-          overflowX: 'auto',
-          borderBottom: `1px solid ${colors.border}`,
-          background: colors.toolbar,
-        }}
-      >
-        <input
-          aria-label='Filter timeline activity'
-          placeholder='Filter activity'
-          value={filter}
-          onChange={event => {
-            setFilter(event.target.value)
-            setSelectedId(null)
-          }}
-          style={{ ...styles.input, width: 190, paddingBlock: 4 }}
-        />
-        {VISIBILITY_OPTIONS.map(option => (
-          <button
-            key={option.value}
-            type='button'
-            aria-pressed={visibility === option.value}
-            title={
-              option.value === 'write' && inFlightWriteCount > 0
-                ? [
-                    `${inFlightWriteCount} in flight`,
-                    projectedWriteCount > 0 ? `${projectedWriteCount} projected` : '',
-                  ]
-                    .filter(Boolean)
-                    .join(' · ')
-                : undefined
-            }
-            onClick={() => {
-              setVisibility(option.value)
-              setSelectedId(null)
-            }}
-            style={buttonStyle(colors, visibility === option.value)}
-          >
-            {option.label}
-            {option.value === 'write' && inFlightWriteCount > 0 ? (
-              <span style={{ color: colors.blue, marginLeft: 6 }}>
-                {inFlightWriteCount} in flight
-              </span>
-            ) : null}
-            {option.value === 'write' && projectedWriteCount > 0 ? (
-              <span style={{ color: colors.amber, marginLeft: 6 }}>
-                {projectedWriteCount} projected
-              </span>
-            ) : null}
-          </button>
-        ))}
-        <span style={{ flex: 1 }} />
-        {range ? (
-          <button
-            type='button'
-            aria-label='Clear timeline range'
-            title='Show the full recording'
-            onClick={() => {
-              setRange(null)
-              setSelectedId(null)
-            }}
-            style={buttonStyle(colors, true)}
-          >
-            {formatOffset(range.start - extent.start)}–{formatOffset(range.end - extent.start)} ×
-          </button>
-        ) : (
-          <span style={{ color: colors.faint, whiteSpace: 'nowrap' }}>
-            Drag overview to filter time
-          </span>
-        )}
-      </div>
       <div style={{ flex: 1, minHeight: 0, minWidth: 0, display: 'flex' }}>
         <div
           ref={scrollRef}
@@ -343,7 +263,29 @@ export function TimelineActivityTable({
         </span>
         <span>{rows.filter(activity => activity.kind === 'fetch').length} fetches</span>
         <span>{rows.filter(activity => activity.error).length} errors</span>
+        {inFlightWriteCount > 0 ? <span>{inFlightWriteCount} writes in flight</span> : null}
+        {projectedWriteCount > 0 ? <span>{projectedWriteCount} projected</span> : null}
         <span>{formatMs(displayExtent.end - displayExtent.start)} window</span>
+        <span style={{ marginLeft: 'auto' }}>
+          {range ? (
+            <button
+              type='button'
+              aria-label='Clear timeline range'
+              title='Show the full recording'
+              onClick={() => {
+                setRange(null)
+                setSelectedId(null)
+              }}
+              style={buttonStyle(colors, true)}
+            >
+              {formatOffset(range.start - extent.start)}–{formatOffset(range.end - extent.start)} ×
+            </button>
+          ) : (
+            <span style={{ color: colors.faint, whiteSpace: 'nowrap' }}>
+              Drag overview to filter time
+            </span>
+          )}
+        </span>
       </div>
     </>
   )
diff --git a/lib/devtools/TimelineTab.tsx b/lib/devtools/TimelineTab.tsx
index 7f634cb4..724c89be 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import type { DevtoolsSnapshot } from './collector.js'
 import { now } from './format.js'
 import type { DevtoolsModel } from './model.js'
-import { TimelineActivityTable } from './TimelineActivityTable.js'
+import { TimelineActivityTable, type TimelineVisibility } from './TimelineActivityTable.js'
 import { buildTimelineActivities, timelineExtent } from './timelineModel.js'
 import { buttonStyle, useDevtoolsTheme } from './ui.js'
 
@@ -49,12 +49,16 @@ export function TimelineFollowControl({
 export function TimelineTab({
   snapshot,
   model,
+  filter,
+  visibility,
   follow,
   onFollowChange,
   onTraceSelect,
 }: {
   snapshot: DevtoolsSnapshot
   model: DevtoolsModel
+  filter: string
+  visibility: TimelineVisibility
   follow: boolean
   onFollowChange: (value: boolean) => void
   onTraceSelect?: (traceId: number) => void
@@ -77,6 +81,8 @@ export function TimelineTab({
         extent={extent}
         nowPoint={nowPoint}
         wallClockOffset={wallClockOffset}
+        filter={filter}
+        visibility={visibility}
         follow={follow}
         onFollowChange={onFollowChange}
         {...(onTraceSelect ? { onTraceSelect } : {})}
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 0da51d7b..06557a14 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -498,7 +498,7 @@ export function ColumnResizeHandle({
       style={{
         position: 'absolute',
         top: 0,
-        right: -4,
+        right: 0,
         bottom: 0,
         width: 8,
         cursor: 'col-resize',
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index afb987bb..cf540cc5 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -1163,7 +1163,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"]')

From 9b61c355e5e5a25cc710ae4b2b25eb4b5d499b3b Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:32:14 +0100
Subject: [PATCH 25/42] Use inset column resize grips

---
 lib/devtools/ui.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 06557a14..8a4f02b4 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -503,9 +503,20 @@ export function ColumnResizeHandle({
         width: 8,
         cursor: 'col-resize',
         zIndex: 2,
-        borderRight: `1px solid ${colors.border}`,
       }}
-    />
+    >
+      <span
+        aria-hidden='true'
+        style={{
+          position: 'absolute',
+          top: '50%',
+          right: 0,
+          height: 14,
+          transform: 'translateY(-50%)',
+          borderRight: `1px solid ${colors.border}`,
+        }}
+      />
+    </span>
   )
 }
 

From 9a95b6aa8b1529ac31102f8da8ca22d8b290fcc5 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:33:54 +0100
Subject: [PATCH 26/42] Rebalance query performance details

---
 lib/devtools/QueryDetails.tsx | 41 ++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index cd71fd15..63beb5ff 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -152,6 +152,7 @@ export function QueryDetails({
               {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
             </span>
           </div>
+          <QueryPerformance query={activeQuery} average={average} />
           <QueryMaintenance query={activeQuery} />
           {activeQuery.lastError ? (
             <div
@@ -213,7 +214,6 @@ export function QueryDetails({
               </div>
             </QueryDetailSection>
           ) : null}
-          <QueryPerformance query={activeQuery} average={average} />
         </div>
         {splitDetails ? (
           <div
@@ -257,19 +257,17 @@ function QueryData({
 function QueryMaintenance({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <dl
+    <div
+      title={`${maintenanceLabel(query)} · ${maintenanceReason(query)}`}
       style={{
-        display: 'grid',
-        gridTemplateColumns: '82px minmax(0, 1fr)',
-        gap: '4px 10px',
-        margin: '0 0 14px',
+        margin: '-3px 0 14px',
+        color: colors.faint,
+        fontSize: 11,
+        lineHeight: 1.4,
       }}
     >
-      <dt style={{ color: colors.faint }}>Maintenance</dt>
-      <dd style={{ margin: 0, color: colors.text }}>{maintenanceLabel(query)}</dd>
-      <dt style={{ color: colors.faint }}>Reason</dt>
-      <dd style={{ margin: 0, color: colors.muted }}>{maintenanceReason(query)}</dd>
-    </dl>
+      {maintenanceLabel(query)} · {maintenanceReason(query)}
+    </div>
   )
 }
 
@@ -421,7 +419,7 @@ function breadcrumbButtonStyle(colors: DevtoolsColors): CSSProperties {
 function QueryPerformance({ query, average }: { query: QuerySummary; average: number }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <QueryDetailSection label='Performance' separated>
+    <QueryDetailSection label='Performance'>
       <div
         style={{
           display: 'flex',
@@ -456,12 +454,21 @@ function QueryPerformance({ query, average }: { query: QuerySummary; average: nu
           </span>
         ) : null}
         <span style={{ whiteSpace: 'nowrap' }}>{plural(query.fetchCount, 'fetch', 'fetches')}</span>
-        {query.spans.length > 1 ? (
-          <span style={{ marginLeft: 'auto' }}>
-            <Sparkline spans={query.spans} />
-          </span>
-        ) : null}
       </div>
+      {query.spans.length > 0 ? (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '84px minmax(0, 1fr)',
+            alignItems: 'end',
+            gap: 8,
+            marginTop: 8,
+          }}
+        >
+          <span style={{ color: colors.faint, fontSize: 11 }}>Recent latency</span>
+          <Sparkline spans={query.spans} />
+        </div>
+      ) : null}
     </QueryDetailSection>
   )
 }

From 7e6157c6358e69896445133cc7ee83d13c8afd50 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:37:38 +0100
Subject: [PATCH 27/42] Clarify query detail sections

---
 lib/devtools/QueryDetails.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index 63beb5ff..4438c2f3 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -152,7 +152,6 @@ export function QueryDetails({
               {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
             </span>
           </div>
-          <QueryPerformance query={activeQuery} average={average} />
           <QueryMaintenance query={activeQuery} />
           {activeQuery.lastError ? (
             <div
@@ -169,6 +168,7 @@ export function QueryDetails({
               {activeQuery.lastError.message}
             </div>
           ) : null}
+          <QueryPerformance query={activeQuery} average={average} />
           {!splitDetails ? <QueryData query={activeQuery} separated /> : null}
           <QueryDetailSection label='Parameters' separated>
             <JsonViewer value={activeQuery.query ?? {}} />
@@ -419,7 +419,7 @@ function breadcrumbButtonStyle(colors: DevtoolsColors): CSSProperties {
 function QueryPerformance({ query, average }: { query: QuerySummary; average: number }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <QueryDetailSection label='Performance'>
+    <QueryDetailSection label='Performance' separated>
       <div
         style={{
           display: 'flex',

From d0be791c214dcda60c509f3588650aa2d1b6e805 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:43:42 +0100
Subject: [PATCH 28/42] Simplify pagination query details

---
 lib/devtools/QueryDetails.tsx | 128 ++++++++++++++++++----------------
 test/devtools.test.tsx        |   7 +-
 2 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index 4438c2f3..f73b9415 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -332,70 +332,80 @@ 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}`}
-      separated
-    >
-      <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 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
+                    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>
+        </details>
+      ) : null}
     </QueryDetailSection>
   )
 }
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index cf540cc5..a5f5ce8f 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -760,11 +760,12 @@ test('query details show a cursor operation as one inspectable page chain', t =>
   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('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()
 })
 

From 32d483a2fa619593a6cd155353cdc896ec9926b1 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:46:13 +0100
Subject: [PATCH 29/42] Integrate query labels into JSON viewers

---
 lib/devtools/JsonViewer.tsx   | 37 ++++++++++++++++++--------
 lib/devtools/QueryDetails.tsx | 50 +++++++++++++++++++++++------------
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/lib/devtools/JsonViewer.tsx b/lib/devtools/JsonViewer.tsx
index 5ced5161..d2e43e8d 100644
--- a/lib/devtools/JsonViewer.tsx
+++ b/lib/devtools/JsonViewer.tsx
@@ -13,10 +13,14 @@ interface SpecialValue {
 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()
@@ -24,7 +28,7 @@ export function JsonViewer({
   const [expandAll, setExpandAll] = useState(false)
   const normalized = useMemo(() => normalizeJson(value), [value])
 
-  if (value === undefined) {
+  if (value === undefined && !label) {
     return (
       <div
         style={{
@@ -61,7 +65,14 @@ export function JsonViewer({
           background: colors.toolbar,
         }}
       >
-        <code style={{ ...styles.code, color: colors.faint }}>{valueSummary(normalized)}</code>
+        {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
@@ -72,14 +83,16 @@ export function JsonViewer({
             {expandAll ? 'Collapse nested' : 'Expand all'}
           </button>
         ) : null}
-        <button
-          type='button'
-          aria-pressed={raw}
-          style={jsonButtonStyle(colors, raw)}
-          onClick={() => setRaw(current => !current)}
-        >
-          Raw
-        </button>
+        {value !== undefined ? (
+          <button
+            type='button'
+            aria-pressed={raw}
+            style={jsonButtonStyle(colors, raw)}
+            onClick={() => setRaw(current => !current)}
+          >
+            Raw
+          </button>
+        ) : null}
       </div>
       <div
         style={{
@@ -90,7 +103,9 @@ export function JsonViewer({
           lineHeight: 1.55,
         }}
       >
-        {raw ? (
+        {value === undefined ? (
+          <span style={{ color: colors.faint }}>{emptyLabel}</span>
+        ) : raw ? (
           <pre
             style={{
               font: 'inherit',
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index f73b9415..03fd8a61 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -170,9 +170,9 @@ export function QueryDetails({
           ) : null}
           <QueryPerformance query={activeQuery} average={average} />
           {!splitDetails ? <QueryData query={activeQuery} separated /> : null}
-          <QueryDetailSection label='Parameters' separated>
-            <JsonViewer value={activeQuery.query ?? {}} />
-          </QueryDetailSection>
+          <QueryDetailBlock separated>
+            <JsonViewer value={activeQuery.query ?? {}} label='Parameters' />
+          </QueryDetailBlock>
           {!selectedUnderlying && operation.pagination ? (
             <PaginationDetails pagination={operation.pagination} pages={rootFetches} />
           ) : null}
@@ -244,13 +244,14 @@ function QueryData({
   separated?: boolean
 }) {
   return (
-    <QueryDetailSection
-      label='Query data'
-      meta={query.skipped ? 'skipped' : plural(query.itemCount, 'row', 'rows')}
-      separated={separated}
-    >
-      <JsonViewer value={query.data} maxHeight={fill ? 'none' : 360} />
-    </QueryDetailSection>
+    <QueryDetailBlock separated={separated}>
+      <JsonViewer
+        value={query.data}
+        label='Query data'
+        meta={query.skipped ? 'skipped' : plural(query.itemCount, 'row', 'rows')}
+        maxHeight={fill ? 'none' : 360}
+      />
+    </QueryDetailBlock>
   )
 }
 
@@ -496,13 +497,7 @@ function QueryDetailSection({
 }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <section
-      style={{
-        marginBottom: 14,
-        paddingTop: separated ? 12 : 0,
-        borderTop: separated ? `1px solid ${colors.rowBorder}` : undefined,
-      }}
-    >
+    <QueryDetailBlock separated={separated}>
       <div
         style={{
           display: 'flex',
@@ -515,6 +510,27 @@ function QueryDetailSection({
         {meta ? <span style={{ color: colors.muted }}>{meta}</span> : null}
       </div>
       {children}
+    </QueryDetailBlock>
+  )
+}
+
+function QueryDetailBlock({
+  separated = false,
+  children,
+}: {
+  separated?: boolean
+  children: ReactNode
+}) {
+  const { colors } = useDevtoolsTheme()
+  return (
+    <section
+      style={{
+        marginBottom: 14,
+        paddingTop: separated ? 12 : 0,
+        borderTop: separated ? `1px solid ${colors.rowBorder}` : undefined,
+      }}
+    >
+      {children}
     </section>
   )
 }

From d9f80b3048d82bafb456f52cfefc9f7e30bf9dcd Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:48:56 +0100
Subject: [PATCH 30/42] Standardize JSON viewer titles

---
 lib/devtools/CacheTab.tsx              |  7 ++--
 lib/devtools/EventsTab.tsx             | 17 +++++----
 lib/devtools/TimelineActivityTable.tsx | 49 ++++++++++++++++----------
 lib/devtools/ui.tsx                    |  8 +++--
 4 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index e426e979..d0b16ff5 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -13,6 +13,7 @@ import type { DevtoolsModel } from './model.js'
 import {
   Badge,
   ColumnResizeHandle,
+  DetailBlock,
   DetailSection,
   DetailsPane,
   buttonStyle,
@@ -494,9 +495,9 @@ function CacheEntityDetails({
           </div>
         </DetailSection>
       ) : (
-        <DetailSection label='Current value'>
-          <JsonViewer value={entity.value} />
-        </DetailSection>
+        <DetailBlock>
+          <JsonViewer value={entity.value} label='Current value' />
+        </DetailBlock>
       )}
 
       {entity.lastChange ? (
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index 32267447..b69b35cf 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -20,6 +20,7 @@ import type { EventQueryScope } from './model.js'
 import {
   Badge,
   ColumnResizeHandle,
+  DetailBlock,
   DetailSection,
   DetailStat,
   DetailsPane,
@@ -261,9 +262,13 @@ function EventDetails({
         {'method' in item.event ? <DetailStat label='Method' value={item.event.method} /> : null}
         {queryId ? <DetailStat label='Query ID' value={queryId} /> : null}
       </div>
-      <DetailSection label={item.event.kind === 'realtime' ? 'Realtime payload' : 'Event payload'}>
-        <JsonViewer value={payload} emptyLabel='No payload' />
-      </DetailSection>
+      <DetailBlock>
+        <JsonViewer
+          value={payload}
+          label={item.event.kind === 'realtime' ? 'Realtime payload' : 'Event payload'}
+          emptyLabel='No payload'
+        />
+      </DetailBlock>
       {relatedEvents && relatedEvents.length > 1 ? (
         <DetailSection label={relatedLabel ?? 'Related activity'}>
           <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
@@ -295,9 +300,9 @@ function EventDetails({
           </div>
         </DetailSection>
       ) : null}
-      <DetailSection label='Full event'>
-        <JsonViewer value={displayEvent(item.event)} />
-      </DetailSection>
+      <DetailBlock>
+        <JsonViewer value={displayEvent(item.event)} label='Full event' />
+      </DetailBlock>
     </DetailsPane>
   )
 }
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index ef38f848..c04ce698 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -13,6 +13,7 @@ import type { TimelineActivity, TimelineExtent } from './timelineModel.js'
 import {
   Badge,
   ColumnResizeHandle,
+  DetailBlock,
   DetailSection,
   DetailStat,
   DetailsPane,
@@ -527,32 +528,44 @@ function ActivityDetails({
       </div>
       {activity.write ? (
         <>
-          <DetailSection label='Payload'>
-            <JsonViewer value={activity.write.payload} emptyLabel='No payload' />
-          </DetailSection>
-          <DetailSection label='Arguments'>
-            <JsonViewer value={activity.write.args} />
-          </DetailSection>
+          <DetailBlock>
+            <JsonViewer value={activity.write.payload} label='Payload' emptyLabel='No payload' />
+          </DetailBlock>
+          <DetailBlock>
+            <JsonViewer value={activity.write.args} label='Arguments' />
+          </DetailBlock>
         </>
       ) : activity.kind === 'fetch' ? (
         <>
           {activity.payload !== undefined ? (
-            <DetailSection label='Parameters'>
-              <JsonViewer value={activity.payload} />
-            </DetailSection>
+            <DetailBlock>
+              <JsonViewer value={activity.payload} label='Parameters' />
+            </DetailBlock>
           ) : null}
-          <DetailSection label='Current query data'>
-            <JsonViewer value={activity.data} emptyLabel='No query data captured' />
-          </DetailSection>
+          <DetailBlock>
+            <JsonViewer
+              value={activity.data}
+              label='Current query data'
+              emptyLabel='No query data captured'
+            />
+          </DetailBlock>
         </>
       ) : activity.kind === 'realtime' ? (
-        <DetailSection label='Event payload'>
-          <JsonViewer value={activity.payload} emptyLabel='No event payload captured' />
-        </DetailSection>
+        <DetailBlock>
+          <JsonViewer
+            value={activity.payload}
+            label='Event payload'
+            emptyLabel='No event payload captured'
+          />
+        </DetailBlock>
       ) : activity.kind === 'connection' ? (
-        <DetailSection label='Connection event'>
-          <JsonViewer value={activity.payload} emptyLabel='No connection event captured' />
-        </DetailSection>
+        <DetailBlock>
+          <JsonViewer
+            value={activity.payload}
+            label='Connection event'
+            emptyLabel='No connection event captured'
+          />
+        </DetailBlock>
       ) : null}
       {activity.traceId !== undefined && onTraceSelect ? (
         <DetailSection label='Causal trace'>
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 8a4f02b4..12437184 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -417,7 +417,7 @@ export function DetailsPane({
 export function DetailSection({ label, children }: { label: string; children: ReactNode }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <section style={{ marginBottom: 12 }}>
+    <DetailBlock>
       <div
         style={{
           color: colors.muted,
@@ -430,10 +430,14 @@ export function DetailSection({ label, children }: { label: string; children: Re
         {label}
       </div>
       {children}
-    </section>
+    </DetailBlock>
   )
 }
 
+export function DetailBlock({ children }: { children: ReactNode }) {
+  return <section style={{ marginBottom: 12 }}>{children}</section>
+}
+
 export function DetailStat({ label, value }: { label: string; value: string }) {
   const { colors } = useDevtoolsTheme()
   return (

From d613b9d5ab8272c484c8883ecbfd389ca1f7b31d Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:50:50 +0100
Subject: [PATCH 31/42] Align event detail attributes

---
 lib/devtools/EventsTab.tsx             | 12 +++-------
 lib/devtools/TimelineActivityTable.tsx | 12 +++-------
 lib/devtools/ui.tsx                    | 31 ++++++++++++++++++++++----
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index b69b35cf..c865bceb 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -23,6 +23,7 @@ import {
   DetailBlock,
   DetailSection,
   DetailStat,
+  DetailStats,
   DetailsPane,
   resizableGridTemplate,
   toneColor,
@@ -247,21 +248,14 @@ function EventDetails({
       onResizeStart={onResizeStart}
       onClose={onClose}
     >
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-          gap: '8px 16px',
-          marginBottom: 16,
-        }}
-      >
+      <DetailStats>
         {'serviceName' in item.event ? (
           <DetailStat label='Service' value={item.event.serviceName} />
         ) : null}
         {'type' in item.event ? <DetailStat label='Type' value={item.event.type} /> : null}
         {'method' in item.event ? <DetailStat label='Method' value={item.event.method} /> : null}
         {queryId ? <DetailStat label='Query ID' value={queryId} /> : null}
-      </div>
+      </DetailStats>
       <DetailBlock>
         <JsonViewer
           value={payload}
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index c04ce698..8652ccc1 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -16,6 +16,7 @@ import {
   DetailBlock,
   DetailSection,
   DetailStat,
+  DetailStats,
   DetailsPane,
   buttonStyle,
   toneColor,
@@ -485,14 +486,7 @@ function ActivityDetails({
       onResizeStart={onResizeStart}
       onClose={onClose}
     >
-      <div
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-          gap: '8px 16px',
-          marginBottom: 16,
-        }}
-      >
+      <DetailStats>
         <DetailStat label='Operation' value={activity.operation} />
         {activity.detail ? <DetailStat label='Context' value={activity.detail} /> : null}
         <DetailStat label='Status' value={activity.status} />
@@ -525,7 +519,7 @@ function ActivityDetails({
             value={formatMs(activity.write.initiatingAction.durationMs)}
           />
         ) : null}
-      </div>
+      </DetailStats>
       {activity.write ? (
         <>
           <DetailBlock>
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 12437184..a76b6bc6 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -438,13 +438,36 @@ 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 }: { label: string; value: string }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <span>
-      <span style={{ color: colors.muted }}>{label}</span>{' '}
-      <strong style={{ color: colors.text }}>{value}</strong>
-    </span>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '82px minmax(0, 1fr)',
+        gap: 6,
+        alignItems: 'baseline',
+        minWidth: 0,
+      }}
+    >
+      <span style={{ color: colors.muted }}>{label}</span>
+      <strong style={{ color: colors.text, minWidth: 0, overflowWrap: 'anywhere' }}>{value}</strong>
+    </div>
   )
 }
 

From e08797a5eb25068c6758f989ac70d48a34b66c6c Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:54:20 +0100
Subject: [PATCH 32/42] Link cache memberships to queries

---
 lib/devtools/CacheTab.tsx     | 95 +++++++++++++++++++++++++++--------
 lib/devtools/Devtools.tsx     | 10 ++++
 lib/devtools/QueriesTab.tsx   | 31 +++++++++---
 lib/devtools/QueryDetails.tsx | 12 ++++-
 4 files changed, 120 insertions(+), 28 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index d0b16ff5..75840707 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -1,4 +1,10 @@
-import { useEffect, useMemo, useState, type MouseEvent as ReactMouseEvent } from 'react'
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+} from 'react'
 import {
   compactJson,
   estimateSerializedBytes,
@@ -47,12 +53,14 @@ export function CacheTab({
   filter,
   editor,
   onViewTrace,
+  onViewQuery,
 }: {
   services: DevtoolsCacheService[]
   model: DevtoolsModel
   filter: string
   editor?: DevtoolsCacheEditor
   onViewTrace?: (traceId: number) => void
+  onViewQuery?: (queryId: string) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const orderedServices = useMemo(
@@ -326,6 +334,7 @@ export function CacheTab({
           onClose={() => setSelectedId(null)}
           {...(editor ? { editor } : {})}
           {...(onViewTrace ? { onViewTrace } : {})}
+          {...(onViewQuery ? { onViewQuery } : {})}
         />
       ) : null}
     </section>
@@ -341,6 +350,7 @@ function CacheEntityDetails({
   onClose,
   editor,
   onViewTrace,
+  onViewQuery,
 }: {
   service: DevtoolsCacheService
   entity: DevtoolsCacheEntity
@@ -350,6 +360,7 @@ function CacheEntityDetails({
   onClose: () => void
   editor?: DevtoolsCacheEditor
   onViewTrace?: (traceId: number) => void
+  onViewQuery?: (queryId: string) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [editing, setEditing] = useState(false)
@@ -359,7 +370,7 @@ function CacheEntityDetails({
   const [undoValue, setUndoValue] = useState<unknown | null>(null)
   const queryLabels = entity.queryIds.map(queryId => ({
     queryId,
-    label: queryLabel(model, queryId),
+    ...queryMembership(model, queryId),
   }))
 
   const update = async (value: unknown, rememberUndo: boolean) => {
@@ -528,37 +539,79 @@ function CacheEntityDetails({
             No retained query currently references this entity.
           </span>
         ) : (
-          queryLabels.map(item => (
-            <div
-              key={item.queryId}
-              title={item.queryId}
-              style={{
-                padding: '7px 0',
-                borderTop: `1px solid ${colors.rowBorder}`,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {item.label}
-            </div>
-          ))
+          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'
+                title={`Open ${item.label} in Queries`}
+                onClick={() => onViewQuery(item.queryId)}
+                style={{ ...style, cursor: 'pointer' }}
+              >
+                {content}
+              </button>
+            ) : (
+              <div key={item.queryId} title={item.queryId} style={style}>
+                {content}
+              </div>
+            )
+          })
         )}
       </DetailSection>
     </DetailsPane>
   )
 }
 
-function queryLabel(model: DevtoolsModel, queryId: string): string {
+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 `${operation.summary.serviceName}.${operation.summary.method} · root`
+      return {
+        label: `${operation.summary.serviceName}.${operation.summary.method} · root`,
+        available: true,
+      }
     }
     const nested = operation.underlying.find(item => item.query.queryId === queryId)
     if (nested)
-      return `${operation.summary.serviceName}.${operation.summary.method} › ${nested.path}`
+      return {
+        label: `${operation.summary.serviceName}.${operation.summary.method} › ${nested.path}`,
+        available: true,
+      }
   }
-  return queryId
+  return { label: queryId, available: false }
 }
 
 function formatEstimatedSize(value: unknown): string {
diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index 3e3fd26e..0d0153bd 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -72,6 +72,7 @@ export function FigbirdDevtoolsPanel({
   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 [timelineFollow, setTimelineFollow] = useState(true)
 
@@ -292,6 +293,8 @@ export function FigbirdDevtoolsPanel({
               filter={queryFilter}
               visibility={queryVisibility}
               inspectedQueryCounts={inspected?.queryCounts ?? null}
+              selectedQueryId={selectedQueryId}
+              onSelectedQueryIdChange={setSelectedQueryId}
             />
           ) : null}
           {tab === 'timeline' ? (
@@ -328,6 +331,13 @@ export function FigbirdDevtoolsPanel({
                 setSelectedTraceId(traceId)
                 setTab('events')
               }}
+              onViewQuery={queryId => {
+                inspection?.stop()
+                setQueryFilter('')
+                setQueryVisibility('all')
+                setSelectedQueryId(queryId)
+                setTab('queries')
+              }}
             />
           ) : null}
         </main>
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 4e7f1632..327bea13 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -1,4 +1,4 @@
-import { useState, type CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 import type { QueryVisibility } from './Devtools.js'
 import { compactJson, formatAge, formatMs } from './format.js'
 import type { DevtoolsModel, DevtoolsOperation, QuerySummary } from './model.js'
@@ -80,14 +80,17 @@ export function QueriesTab({
   filter,
   visibility,
   inspectedQueryCounts,
+  selectedQueryId,
+  onSelectedQueryIdChange,
 }: {
   model: DevtoolsModel
   filter: string
   visibility: QueryVisibility
   inspectedQueryCounts: ReadonlyMap<string, number> | null
+  selectedQueryId: string | null
+  onSelectedQueryIdChange: (queryId: string | null) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
-  const [selectedOperationKey, setSelectedOperationKey] = useState<string | null>(null)
   const [columnWidths, onColumnResizeStart] = useResizableColumns(QUERY_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth({ defaultWidth: 680 })
   const rows: QueryRow[] = model.operations
@@ -139,7 +142,10 @@ 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 }}>
@@ -186,11 +192,11 @@ export function QueriesTab({
                   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={{
@@ -281,15 +287,28 @@ export function QueriesTab({
       {selectedOperation ? (
         <QueryDetails
           operation={selectedOperation}
+          selectedQueryId={selectedQueryId}
           width={detailsWidth}
           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 QueryRows({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   return <span style={{ color: colors.text, fontWeight: 600 }}>{query.itemCount}</span>
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index 03fd8a61..e7c9c73d 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -22,18 +22,28 @@ const SPLIT_DETAILS_WIDTH = 600
 
 export function QueryDetails({
   operation,
+  selectedQueryId,
   width,
   onResizeStart,
   onClose,
 }: {
   operation: DevtoolsOperation
+  selectedQueryId: string | null
   width: number
   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 =

From 4f54dcdcc1f3427024bddc77260d0791d220ff66 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:56:32 +0100
Subject: [PATCH 33/42] Normalize toolbar select controls

---
 lib/devtools/Devtools.tsx | 21 +++------------------
 lib/devtools/ui.tsx       | 33 ++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index 0d0153bd..eaed260d 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -142,12 +142,7 @@ export function FigbirdDevtoolsPanel({
                 title='Choose live, inactive cached, skipped, or historical queries'
                 value={queryVisibility}
                 onChange={event => setQueryVisibility(event.currentTarget.value as QueryVisibility)}
-                style={{
-                  ...styles.input,
-                  width: 'auto',
-                  maxWidth: 'none',
-                  paddingRight: 24,
-                }}
+                style={styles.select}
               >
                 <option value='active'>Live queries</option>
                 <option value='inactive'>
@@ -218,12 +213,7 @@ export function FigbirdDevtoolsPanel({
                 onChange={event =>
                   setTimelineVisibility(event.currentTarget.value as TimelineVisibility)
                 }
-                style={{
-                  ...styles.input,
-                  width: 'auto',
-                  maxWidth: 'none',
-                  paddingRight: 24,
-                }}
+                style={styles.select}
               >
                 <option value='all'>All activity</option>
                 <option value='fetch'>Fetches</option>
@@ -247,12 +237,7 @@ export function FigbirdDevtoolsPanel({
                 title='Activity groups causal work; All events shows the raw instrumentation stream'
                 value={eventVisibility}
                 onChange={event => setEventVisibility(event.currentTarget.value as EventVisibility)}
-                style={{
-                  ...styles.input,
-                  width: 'auto',
-                  maxWidth: 'none',
-                  paddingRight: 24,
-                }}
+                style={styles.select}
               >
                 <option value='activity'>Activity</option>
                 <option value='all'>All events</option>
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index a76b6bc6..cd3b519d 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -86,6 +86,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 +143,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%',

From 840557ef2cd68e5c6a7cd23a7df4069070d56186 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 12:58:40 +0100
Subject: [PATCH 34/42] Standardize devtools column labels

---
 lib/devtools/CacheTab.tsx              |  4 ++--
 lib/devtools/EventsTab.tsx             |  8 ++++----
 lib/devtools/TimelineActivityTable.tsx | 22 +++++++++++-----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 75840707..42b00f84 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -31,7 +31,7 @@ import {
 const CACHE_COLUMNS = [
   { label: 'entity', width: 150, minWidth: 90 },
   { label: 'value', width: 310, minWidth: 160 },
-  { label: 'est. size', width: 90, minWidth: 72 },
+  { label: 'estSize', width: 90, minWidth: 72 },
   { label: 'queries', width: 110, minWidth: 76 },
   { label: 'provenance', width: 150, minWidth: 110 },
 ] as const
@@ -222,7 +222,7 @@ export function CacheTab({
                   <th
                     key={column.label}
                     style={{ ...styles.th, position: 'sticky' }}
-                    {...(column.label === 'est. size' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
+                    {...(column.label === 'estSize' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
                   >
                     {column.label}
                     <ColumnResizeHandle
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index c865bceb..e38c04fc 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -33,10 +33,10 @@ import {
 } from './ui.js'
 
 const EVENT_COLUMNS = [
-  { label: 'Time', width: 108, minWidth: 84 },
-  { label: 'Activity', width: 132, minWidth: 96 },
-  { label: 'Scope', width: 140, minWidth: 96 },
-  { label: 'Details', width: 360, minWidth: 180 },
+  { label: 'time', width: 108, minWidth: 84 },
+  { label: 'activity', width: 132, minWidth: 96 },
+  { label: 'scope', width: 140, minWidth: 96 },
+  { label: 'details', width: 360, minWidth: 180 },
 ] as const
 
 export function EventsTab({
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index 8652ccc1..c690615d 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -30,16 +30,16 @@ 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 },
+  { 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: 'cacheEffect', 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({
@@ -205,7 +205,7 @@ export function TimelineActivityTable({
                 {COLUMNS.map((column, index) => (
                   <th key={column.label} style={{ ...styles.th, position: 'sticky' }}>
                     {column.label}
-                    {column.label === 'Waterfall' && displayExtent ? (
+                    {column.label === 'waterfall' && displayExtent ? (
                       <span style={{ color: colors.faint, marginLeft: 7, fontWeight: 400 }}>
                         {formatOffset(displayExtent.end - displayExtent.start)}
                       </span>

From 25d25897edff12979db00760c17a1165275d03c1 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 13:02:09 +0100
Subject: [PATCH 35/42] Use title case for table headers

---
 lib/devtools/CacheTab.tsx              | 12 ++++++------
 lib/devtools/EventsTab.tsx             |  8 ++++----
 lib/devtools/QueriesTab.tsx            | 14 +++++++-------
 lib/devtools/TimelineActivityTable.tsx | 22 +++++++++++-----------
 test/devtools.test.tsx                 |  2 +-
 5 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 42b00f84..09344913 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -29,11 +29,11 @@ import {
 } from './ui.js'
 
 const CACHE_COLUMNS = [
-  { label: 'entity', width: 150, minWidth: 90 },
-  { label: 'value', width: 310, minWidth: 160 },
-  { label: 'estSize', width: 90, minWidth: 72 },
-  { label: 'queries', width: 110, minWidth: 76 },
-  { label: 'provenance', width: 150, minWidth: 110 },
+  { label: 'Entity', width: 150, minWidth: 90 },
+  { label: 'Value', width: 310, minWidth: 160 },
+  { label: 'Est. Size', width: 90, minWidth: 72 },
+  { label: 'Queries', width: 110, minWidth: 76 },
+  { label: 'Provenance', width: 150, minWidth: 110 },
 ] as const
 
 const CACHE_SIZE_DESCRIPTION =
@@ -222,7 +222,7 @@ export function CacheTab({
                   <th
                     key={column.label}
                     style={{ ...styles.th, position: 'sticky' }}
-                    {...(column.label === 'estSize' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
+                    {...(column.label === 'Est. Size' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
                   >
                     {column.label}
                     <ColumnResizeHandle
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index e38c04fc..c865bceb 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -33,10 +33,10 @@ import {
 } from './ui.js'
 
 const EVENT_COLUMNS = [
-  { label: 'time', width: 108, minWidth: 84 },
-  { label: 'activity', width: 132, minWidth: 96 },
-  { label: 'scope', width: 140, minWidth: 96 },
-  { label: 'details', width: 360, minWidth: 180 },
+  { label: 'Time', width: 108, minWidth: 84 },
+  { label: 'Activity', width: 132, minWidth: 96 },
+  { label: 'Scope', width: 140, minWidth: 96 },
+  { label: 'Details', width: 360, minWidth: 180 },
 ] as const
 
 export function EventsTab({
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 327bea13..4cb6c1f4 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -27,48 +27,48 @@ export function operationIsInactive(operation: DevtoolsOperation): boolean {
 
 const QUERY_COLUMNS = [
   {
-    label: 'query',
+    label: 'Query',
     width: 250,
     minWidth: 150,
     description:
       'Root query operation. The dot shows its state: green active, amber cached, blue fetching, red error, or gray skipped/retained history.',
   },
   {
-    label: 'shape',
+    label: 'Shape',
     width: 420,
     minWidth: 180,
     description:
       'Query method, parameters, related data, and the number of underlying relation fetches.',
   },
   {
-    label: 'class',
+    label: 'Class',
     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',
+    label: 'Rows',
     width: 75,
     minWidth: 55,
     description: 'Number of items currently in the query result.',
   },
   {
-    label: 'fetches',
+    label: 'Fetches',
     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.',
   },
   {
-    label: 'last',
+    label: 'Last',
     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',
+    label: 'Age',
     width: 80,
     minWidth: 60,
     description: "Time since this query's data was last fetched.",
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index c690615d..e828021b 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -30,16 +30,16 @@ 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: 'cacheEffect', width: 125, minWidth: 90 },
-  { label: 'result', width: 115, minWidth: 80 },
-  { label: 'duration', width: 74, minWidth: 60 },
-  { label: 'waterfall', width: 200, minWidth: 130 },
+  { 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({
@@ -205,7 +205,7 @@ export function TimelineActivityTable({
                 {COLUMNS.map((column, index) => (
                   <th key={column.label} style={{ ...styles.th, position: 'sticky' }}>
                     {column.label}
-                    {column.label === 'waterfall' && displayExtent ? (
+                    {column.label === 'Waterfall' && displayExtent ? (
                       <span style={{ color: colors.faint, marginLeft: 7, fontWeight: 400 }}>
                         {formatOffset(displayExtent.end - displayExtent.start)}
                       </span>
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index a5f5ce8f..ebd75e63 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -1135,7 +1135,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
   t.true(rowText[0]!.includes('find · with labels'))
   t.false(rowText[0]!.includes('issueLabels'))
 
-  const classHeader = $all('th').find(header => header.textContent === 'class')
+  const classHeader = $all('th').find(header => header.textContent === 'Class')
   t.true(classHeader?.getAttribute('title')?.includes('local-exact'))
   const classBadge = $all('span').find(element => element.textContent === 'local-exact')
   t.true(classBadge?.getAttribute('title')?.includes('merge directly'))

From 2055f4bdb4c57abac94a65055271d9af4ad22a15 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 13:05:20 +0100
Subject: [PATCH 36/42] Normalize query plan summaries

---
 lib/devtools/QueriesTab.tsx | 38 ++++++++++++++++++++++++-------------
 lib/devtools/model.ts       | 15 +++++++++++++++
 test/devtools.test.tsx      |  6 ++++--
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 4cb6c1f4..1fb0b51a 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -34,11 +34,10 @@ const QUERY_COLUMNS = [
       'Root query operation. The dot shows its state: green active, amber cached, blue fetching, red error, or gray skipped/retained history.',
   },
   {
-    label: 'Shape',
+    label: 'Plan',
     width: 420,
     minWidth: 180,
-    description:
-      'Query method, parameters, related data, and the number of underlying relation fetches.',
+    description: 'Query operation and parameters, followed by its related data paths.',
   },
   {
     label: 'Class',
@@ -185,6 +184,7 @@ export function QueriesTab({
             ) : null}
             {rows.map(({ operation, localSubscriberCount }) => {
               const query = operation.summary
+              const plan = queryPlan(operation)
               const isSelected = selectedOperationKey === operation.key
               return (
                 <tr
@@ -243,24 +243,20 @@ export function QueriesTab({
                   <td style={{ ...styles.td, maxWidth: 420 }}>
                     <span
                       title={[
+                        plan,
                         operation.composition?.title,
-                        `params ${JSON.stringify(query.query ?? {}, null, 2)}`,
+                        query.query === undefined
+                          ? undefined
+                          : `Parameters\n${JSON.stringify(query.query, null, 2)}`,
                       ]
                         .filter(Boolean)
                         .join('\n\n')}
                       style={{
                         ...ellipsizedCode,
-                        color: operation.composition ? colors.text : colors.faint,
+                        color: colors.text,
                       }}
                     >
-                      {operation.composition?.detail ??
-                        (query.query === undefined ? '—' : compactJson(query.query))}
-                      {operation.rootFetches.length > 1
-                        ? ` · ${operation.rootFetches.length} root fetches`
-                        : ''}
-                      {operation.underlying.length > 0
-                        ? ` · ${operation.underlying.length} underlying`
-                        : ''}
+                      {plan}
                     </span>
                   </td>
                   <td style={styles.td}>
@@ -309,6 +305,22 @@ 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 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>
diff --git a/lib/devtools/model.ts b/lib/devtools/model.ts
index d0b872e1..26ed65dc 100644
--- a/lib/devtools/model.ts
+++ b/lib/devtools/model.ts
@@ -16,6 +16,7 @@ export type OperationPagination = NonNullable<InspectedRelationalQuery['paginati
 export interface QueryComposition {
   detail: string
   operation: string
+  plan: string
   planDetail: string
   title: string
 }
@@ -228,6 +229,7 @@ function describeComposition(
   return {
     detail: parts.join(' · '),
     operation: `${ast.service}.${head}`,
+    plan: formatAstPlan(ast),
     planDetail: [
       pagination ? describePagination(pagination) : '',
       rootQuery || 'all',
@@ -239,6 +241,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/test/devtools.test.tsx b/test/devtools.test.tsx
index ebd75e63..87ca4a85 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -756,7 +756,9 @@ test('query details show a cursor operation as one inspectable page chain', t =>
   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.true(
+    (row?.textContent ?? '').includes('paginate(25, {"status":"open","$sort":{"createdAt":-1}})'),
+  )
   click(row!)
 
   const details = $('[aria-label="Figbird devtools"]')?.textContent ?? ''
@@ -1132,7 +1134,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
   const rowText = $all('tbody tr').map(row => row.textContent ?? '')
   t.is(rowText.length, 1)
   t.true(rowText[0]!.includes('issues'))
-  t.true(rowText[0]!.includes('find · with labels'))
+  t.true(rowText[0]!.includes('find() → labels'))
   t.false(rowText[0]!.includes('issueLabels'))
 
   const classHeader = $all('th').find(header => header.textContent === 'Class')

From 9581d2000e1e0b3873a6a3845f6b64f29c5e0098 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 13:46:29 +0100
Subject: [PATCH 37/42] Improve devtools traceability and coherence

---
 lib/devtools/CacheTab.tsx              | 145 +++++++++---
 lib/devtools/Devtools.tsx              | 115 +++++++--
 lib/devtools/EventsTab.tsx             | 205 +++++++++++++---
 lib/devtools/QueriesTab.tsx            |  85 +++++--
 lib/devtools/QueryDetails.tsx          | 308 +++++++++++++++----------
 lib/devtools/QueryPresentation.tsx     |   6 +-
 lib/devtools/TimelineActivityTable.tsx | 111 ++++++++-
 lib/devtools/TimelineTab.tsx           |  12 +
 lib/devtools/collector.ts              |  24 +-
 lib/devtools/eventModel.ts             | 241 ++++++++++++++++---
 lib/devtools/timelineModel.ts          | 109 +++++++--
 lib/devtools/ui.tsx                    | 103 ++++++++-
 test/devtools.test.tsx                 |  85 ++++++-
 13 files changed, 1219 insertions(+), 330 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 09344913..3a200b45 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -21,19 +21,23 @@ import {
   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: 'Queries', width: 110, minWidth: 76 },
-  { label: 'Provenance', width: 150, minWidth: 110 },
+  { label: 'Memberships', width: 110, minWidth: 76 },
+  { label: 'Last Changed', width: 150, minWidth: 110 },
 ] as const
 
 const CACHE_SIZE_DESCRIPTION =
@@ -54,6 +58,8 @@ export function CacheTab({
   editor,
   onViewTrace,
   onViewQuery,
+  requestedEntity,
+  onRequestedEntityHandled,
 }: {
   services: DevtoolsCacheService[]
   model: DevtoolsModel
@@ -61,6 +67,8 @@ export function CacheTab({
   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(
@@ -68,7 +76,7 @@ export function CacheTab({
     [services],
   )
   const [serviceName, setServiceName] = useState<string | null>(null)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedKey, setSelectedKey] = useState<string | null>(null)
   const [columnWidths, onColumnResizeStart] = useResizableColumns(CACHE_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
   const tableWidth = columnWidths.reduce((sum, width) => sum + width, 0)
@@ -88,20 +96,50 @@ export function CacheTab({
   const totalSize = [...serviceSizes.values()].reduce((total, size) => total + size, 0)
 
   useEffect(() => {
-    if (serviceName && orderedServices.some(service => service.serviceName === serviceName)) return
-    setServiceName(orderedServices[0]?.serviceName ?? null)
-    setSelectedId(null)
+    if (!serviceName || orderedServices.some(service => service.serviceName === serviceName)) return
+    setServiceName(null)
+    setSelectedKey(null)
   }, [orderedServices, serviceName])
 
-  const service = orderedServices.find(item => item.serviceName === 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 entities = (service?.entities ?? [])
-    .filter(entity => {
+  const entries = orderedServices
+    .filter(service => serviceName === null || service.serviceName === serviceName)
+    .flatMap(service => service.entities.map(entity => ({ service, entity })))
+    .filter(({ service, entity }) => {
       if (!normalizedFilter) return true
-      return `${entity.id} ${compactJson(entity.value)}`.toLowerCase().includes(normalizedFilter)
+      return [
+        service.serviceName,
+        entity.id,
+        compactJson(entity.value),
+        entity.queryIds.join(' '),
+        entity.lastChange?.source ?? 'initial snapshot',
+        entity.lastChange?.type ?? '',
+      ]
+        .join(' ')
+        .toLowerCase()
+        .includes(normalizedFilter)
     })
-    .sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }))
-  const selected = service?.entities.find(entity => entity.id === selectedId)
+    .sort(
+      (a, b) =>
+        a.service.serviceName.localeCompare(b.service.serviceName) ||
+        a.entity.id.localeCompare(b.entity.id, undefined, { numeric: true }),
+    )
+  const selected = entries.find(
+    ({ service, entity }) => cacheEntityKey(service.serviceName, entity.id) === selectedKey,
+  )
 
   return (
     <section style={{ height: '100%', display: 'flex', minWidth: 0 }}>
@@ -132,6 +170,19 @@ export function CacheTab({
             {formatBytes(totalSize)}
           </code>
         </div>
+        <button
+          type='button'
+          onClick={() => {
+            setServiceName(null)
+            setSelectedKey(null)
+          }}
+          style={cacheServiceButtonStyle(colors, serviceName === null)}
+        >
+          <span>All services</span>
+          <span style={{ color: colors.faint, marginLeft: 'auto' }}>
+            {orderedServices.reduce((count, item) => count + item.entities.length, 0)}
+          </span>
+        </button>
         {orderedServices.map(item => {
           const selectedService = item.serviceName === serviceName
           return (
@@ -140,22 +191,11 @@ export function CacheTab({
               type='button'
               onClick={() => {
                 setServiceName(item.serviceName)
-                setSelectedId(null)
-              }}
-              style={{
-                width: '100%',
-                border: 0,
-                borderBottom: `1px solid ${colors.rowBorder}`,
-                borderLeft: `3px solid ${selectedService ? colors.blue : 'transparent'}`,
-                padding: '8px 9px',
-                background: selectedService ? colors.activeButtonBg : 'transparent',
-                color: colors.text,
-                font: 'inherit',
-                textAlign: 'left',
-                cursor: 'pointer',
+                setSelectedKey(null)
               }}
+              style={cacheServiceButtonStyle(colors, selectedService)}
             >
-              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: 6, width: '100%' }}>
                 <strong
                   style={{
                     minWidth: 0,
@@ -207,7 +247,7 @@ export function CacheTab({
         })}
       </nav>
       <div style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
-        {!service ? (
+        {orderedServices.length === 0 ? (
           <div style={{ padding: 16, color: colors.muted }}>No entities cached yet.</div>
         ) : (
           <table style={{ ...styles.table, minWidth: tableWidth }}>
@@ -234,26 +274,27 @@ export function CacheTab({
               </tr>
             </thead>
             <tbody>
-              {entities.length === 0 ? (
+              {entries.length === 0 ? (
                 <tr>
                   <td colSpan={CACHE_COLUMNS.length} style={{ ...styles.td, color: colors.muted }}>
                     No matching cached entities.
                   </td>
                 </tr>
               ) : null}
-              {entities.map(entity => {
-                const isSelected = entity.id === selectedId
+              {entries.map(({ service, entity }) => {
+                const key = cacheEntityKey(service.serviceName, entity.id)
+                const isSelected = key === selectedKey
                 const estimatedSize = estimateSerializedBytes(entity.value)
                 return (
                   <tr
-                    key={entity.id}
+                    key={key}
                     tabIndex={0}
                     aria-selected={isSelected}
-                    onClick={() => setSelectedId(entity.id)}
+                    onClick={() => setSelectedKey(key)}
                     onKeyDown={event => {
                       if (event.key === 'Enter' || event.key === ' ') {
                         event.preventDefault()
-                        setSelectedId(entity.id)
+                        setSelectedKey(key)
                       }
                     }}
                     style={{
@@ -263,6 +304,9 @@ export function CacheTab({
                       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, fontWeight: 650 }}>#{entity.id}</code>
                     </td>
@@ -323,15 +367,15 @@ export function CacheTab({
           </table>
         )}
       </div>
-      {service && selected ? (
+      {selected ? (
         <CacheEntityDetails
-          key={`${service.serviceName}:${selected.id}`}
-          service={service}
-          entity={selected}
+          key={cacheEntityKey(selected.service.serviceName, selected.entity.id)}
+          service={selected.service}
+          entity={selected.entity}
           model={model}
           width={detailsWidth}
           onResizeStart={onDetailsResizeStart}
-          onClose={() => setSelectedId(null)}
+          onClose={() => setSelectedKey(null)}
           {...(editor ? { editor } : {})}
           {...(onViewTrace ? { onViewTrace } : {})}
           {...(onViewQuery ? { onViewQuery } : {})}
@@ -405,6 +449,10 @@ function CacheEntityDetails({
       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 }}>
@@ -618,3 +666,24 @@ 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: 'flex',
+    alignItems: 'center',
+    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 eaed260d..e2e83b63 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
 import { CacheTab, type DevtoolsCacheEditor } from './CacheTab.js'
 import { EventsTab } from './EventsTab.js'
-import { QueriesTab, operationIsInactive } from './QueriesTab.js'
+import { QueriesTab, operationIsInactive, operationIsRetained } from './QueriesTab.js'
 import { TimelineFollowControl, TimelineTab } from './TimelineTab.js'
 import type { TimelineVisibility } from './TimelineActivityTable.js'
-import type { Collector } from './collector.js'
+import type { Collector, QuerySpan } from './collector.js'
 import { buildDevtoolsModel } from './model.js'
 import {
   ThemeContext,
@@ -18,8 +18,8 @@ import {
 } from './ui.js'
 
 type Tab = 'queries' | 'timeline' | 'events' | 'cache'
-export type QueryVisibility = 'active' | 'inactive' | 'all' | 'skipped'
-export type EventVisibility = 'activity' | 'all'
+export type QueryVisibility = 'active' | 'inactive' | 'retained' | 'all' | 'skipped'
+export type EventVisibility = 'groups' | 'raw'
 
 export type DevtoolsInspectionSnapshot =
   | { kind: 'idle'; version: number }
@@ -68,14 +68,55 @@ export function FigbirdDevtoolsPanel({
   const [queryFilter, setQueryFilter] = useState('')
   const [queryVisibility, setQueryVisibility] = useState<QueryVisibility>('active')
   const [eventFilter, setEventFilter] = useState('')
-  const [eventVisibility, setEventVisibility] = useState<EventVisibility>('activity')
+  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 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()
     return () => collector.stop()
@@ -93,6 +134,7 @@ 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.timeline.connection.length === 0 &&
@@ -104,9 +146,13 @@ export function FigbirdDevtoolsPanel({
   }, [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 }
+        ? { label: 'Clear recording', disabled: timelineEmpty, run: clearTimeline }
         : null
   const inspected = inspectionSnapshot.kind === 'selected' ? inspectionSnapshot : null
 
@@ -139,19 +185,22 @@ export function FigbirdDevtoolsPanel({
               />
               <select
                 aria-label='Query visibility'
-                title='Choose live, inactive cached, skipped, or historical queries'
+                title='Choose live, inactive cached, retained history, skipped, or all queries'
                 value={queryVisibility}
                 onChange={event => setQueryVisibility(event.currentTarget.value as QueryVisibility)}
                 style={styles.select}
               >
                 <option value='active'>Live queries</option>
                 <option value='inactive'>
-                  Inactive queries{inactiveQueryCount > 0 ? ` (${inactiveQueryCount})` : ''}
+                  Inactive cached{inactiveQueryCount > 0 ? ` (${inactiveQueryCount})` : ''}
+                </option>
+                <option value='retained'>
+                  Retained history{retainedQueryCount > 0 ? ` (${retainedQueryCount})` : ''}
                 </option>
-                <option value='all'>All queries</option>
                 <option value='skipped'>
                   Skipped queries{skippedQueryCount > 0 ? ` (${skippedQueryCount})` : ''}
                 </option>
+                <option value='all'>All queries</option>
               </select>
               {inspection ? (
                 <button
@@ -230,17 +279,19 @@ export function FigbirdDevtoolsPanel({
                 style={styles.input}
                 value={eventFilter}
                 onChange={event => setEventFilter(event.currentTarget.value)}
-                placeholder={eventVisibility === 'activity' ? 'Filter activity' : 'Filter events'}
+                placeholder={
+                  eventVisibility === 'groups' ? 'Filter causal groups' : 'Filter raw events'
+                }
               />
               <select
                 aria-label='Event visibility'
-                title='Activity groups causal work; All events shows the raw instrumentation stream'
+                title='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='activity'>Activity</option>
-                <option value='all'>All events</option>
+                <option value='groups'>Causal groups</option>
+                <option value='raw'>Raw events</option>
               </select>
             </>
           ) : null}
@@ -249,7 +300,7 @@ export function FigbirdDevtoolsPanel({
               style={styles.input}
               value={cacheFilter}
               onChange={event => setCacheFilter(event.currentTarget.value)}
-              placeholder='Filter entity ID or value'
+              placeholder='Filter service, entity ID, or value'
             />
           ) : null}
           {tab === 'events' ? (
@@ -264,7 +315,11 @@ export function FigbirdDevtoolsPanel({
             <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 ? (
@@ -280,6 +335,7 @@ export function FigbirdDevtoolsPanel({
               inspectedQueryCounts={inspected?.queryCounts ?? null}
               selectedQueryId={selectedQueryId}
               onSelectedQueryIdChange={setSelectedQueryId}
+              onFetchSelect={inspectFetch}
             />
           ) : null}
           {tab === 'timeline' ? (
@@ -290,6 +346,10 @@ export function FigbirdDevtoolsPanel({
               visibility={timelineVisibility}
               follow={timelineFollow}
               onFollowChange={setTimelineFollow}
+              requestedActivityId={requestedTimelineActivityId}
+              onRequestedActivityHandled={() => setRequestedTimelineActivityId(null)}
+              onQuerySelect={openQuery}
+              onCacheEntitySelect={openCacheEntity}
               onTraceSelect={traceId => {
                 setSelectedTraceId(traceId)
                 setTab('events')
@@ -304,6 +364,7 @@ export function FigbirdDevtoolsPanel({
               scopes={model.scopesByQueryId}
               selectedTraceId={selectedTraceId}
               onSelectedTraceIdChange={setSelectedTraceId}
+              onViewQuery={openQuery}
             />
           ) : null}
           {tab === 'cache' ? (
@@ -311,18 +372,14 @@ export function FigbirdDevtoolsPanel({
               services={snapshot.cache ?? []}
               model={model}
               filter={cacheFilter}
+              requestedEntity={requestedCacheEntity}
+              onRequestedEntityHandled={() => setRequestedCacheEntity(null)}
               {...(cacheEditor ? { editor: cacheEditor } : {})}
               onViewTrace={traceId => {
                 setSelectedTraceId(traceId)
                 setTab('events')
               }}
-              onViewQuery={queryId => {
-                inspection?.stop()
-                setQueryFilter('')
-                setQueryVisibility('all')
-                setSelectedQueryId(queryId)
-                setTab('queries')
-              }}
+              onViewQuery={openQuery}
             />
           ) : null}
         </main>
@@ -349,7 +406,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
@@ -358,7 +423,7 @@ function ClearButton({ disabled, onClick }: { disabled: boolean; onClick: () =>
       disabled={disabled}
       onClick={onClick}
     >
-      Clear
+      {label}
     </button>
   )
 }
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index c865bceb..c33f6392 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -7,11 +7,12 @@ import {
   displayEvent,
   eventDetails,
   eventPayload,
+  eventPayloadLabel,
   eventQueryId,
   eventSearchText,
-  eventTone,
   rawEventRow,
   traceIdsForEvent,
+  type ActivityRow,
   type EventListRow,
 } from './eventModel.js'
 import { formatClock } from './format.js'
@@ -34,9 +35,12 @@ import {
 
 const EVENT_COLUMNS = [
   { label: 'Time', width: 108, minWidth: 84 },
-  { label: 'Activity', width: 132, minWidth: 96 },
-  { label: 'Scope', width: 140, minWidth: 96 },
-  { label: 'Details', width: 360, minWidth: 180 },
+  { 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({
@@ -46,6 +50,7 @@ export function EventsTab({
   scopes,
   selectedTraceId,
   onSelectedTraceIdChange,
+  onViewQuery,
 }: {
   events: DevtoolsEvent[]
   filter: string
@@ -53,19 +58,23 @@ export function EventsTab({
   scopes: ReadonlyMap<string, readonly EventQueryScope[]>
   selectedTraceId?: number | null
   onSelectedTraceIdChange?: (traceId: number | null) => void
+  onViewQuery?: (queryId: string) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [selectedEventId, setSelectedEventId] = useState<number | null>(null)
   const [columnWidths, onColumnResizeStart] = useResizableColumns(EVENT_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
-  const gridTemplateColumns = resizableGridTemplate(columnWidths, 3)
+  const gridTemplateColumns = resizableGridTemplate(columnWidths, 6)
   const gridMinWidth =
     columnWidths.reduce((sum, width) => sum + width, 0) + (EVENT_COLUMNS.length - 1) * 10
   const traceIndex = useMemo(() => buildTraceIndex(events), [events])
-  const activities = useMemo(() => buildActivities(events, traceIndex), [events, traceIndex])
+  const activities = useMemo(
+    () => buildActivities(events, traceIndex, scopes),
+    [events, scopes, traceIndex],
+  )
   const normalizedFilter = filter.toLowerCase()
   const rows: EventListRow[] =
-    visibility === 'activity'
+    visibility === 'groups'
       ? activities.filter(activity =>
           normalizedFilter ? activity.searchText.includes(normalizedFilter) : true,
         )
@@ -100,7 +109,7 @@ export function EventsTab({
     }
     const activity = activities.find(item => item.traceId === selectedTraceId)
     setSelectedEventId(
-      visibility === 'activity' && activity ? activity.representative.id : traceEvents.at(-1)!.id,
+      visibility === 'groups' && activity ? activity.representative.id : traceEvents.at(-1)!.id,
     )
   }, [activities, selectedEvent, selectedTraceId, traceEvents, traceIndex, visibility])
 
@@ -131,7 +140,7 @@ export function EventsTab({
                 alignItems: 'center',
               }}
             >
-              {index === 1 && visibility !== 'activity' ? 'Event' : column.label}
+              {index === 1 && visibility !== 'groups' ? 'Raw Event' : column.label}
               <ColumnResizeHandle
                 label={column.label}
                 onMouseDown={event => onColumnResizeStart(index, event)}
@@ -141,7 +150,7 @@ export function EventsTab({
         </div>
         {rows.length === 0 ? (
           <div style={{ padding: 16, color: colors.muted }}>
-            No matching {visibility === 'activity' ? 'activity' : 'events'} recorded.
+            No matching {visibility === 'groups' ? 'causal groups' : 'raw events'} recorded.
           </div>
         ) : null}
         {rows.map(row => {
@@ -180,7 +189,14 @@ export function EventsTab({
                 {formatClock(item.wallAt, { milliseconds: true })}
               </span>
               <EventKind kind={row.kind} />
-              <EventScopeBadge scopes={queryScopes} queryId={queryId} />
+              <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,
@@ -199,23 +215,28 @@ export function EventsTab({
       {selectedEvent ? (
         <EventDetails
           item={selectedEvent}
+          {...(selectedTraceId !== null && selectedTraceId !== undefined
+            ? { traceId: selectedTraceId }
+            : {})}
+          {...(visibility === 'groups' && selectedActivity ? { group: selectedActivity } : {})}
           relatedEvents={
             selectedTraceId
               ? traceEvents
-              : visibility === 'activity'
+              : visibility === 'groups'
                 ? (selectedActivity?.events ?? [])
                 : []
           }
           relatedLabel={
             selectedTraceId
               ? `Causal trace #${selectedTraceId}`
-              : visibility === 'activity'
-                ? 'Related activity'
+              : visibility === 'groups'
+                ? 'Raw events in group'
                 : null
           }
           width={detailsWidth}
           onResizeStart={onDetailsResizeStart}
           onClose={() => setSelectedEventId(null)}
+          onSelectEvent={eventId => setSelectedEventId(eventId)}
         />
       ) : null}
     </section>
@@ -224,59 +245,109 @@ export function EventsTab({
 
 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 = eventQueryId(item.event)
+  const queryId = group?.queryId ?? eventQueryId(item.event)
   const payload = eventPayload(item.event)
   return (
     <DetailsPane
-      title={item.event.kind}
-      subtitle={formatClock(item.wallAt, { milliseconds: true })}
+      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>
-        {'serviceName' in item.event ? (
-          <DetailStat label='Service' value={item.event.serviceName} />
+        <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}
-        {'type' in item.event ? <DetailStat label='Type' value={item.event.type} /> : null}
-        {'method' in item.event ? <DetailStat label='Method' value={item.event.method} /> : null}
-        {queryId ? <DetailStat label='Query ID' value={queryId} /> : null}
       </DetailStats>
       <DetailBlock>
-        <JsonViewer
-          value={payload}
-          label={item.event.kind === 'realtime' ? 'Realtime payload' : 'Event payload'}
-          emptyLabel='No payload'
-        />
+        <JsonViewer value={payload} label={eventPayloadLabel(item.event)} emptyLabel='No payload' />
       </DetailBlock>
       {relatedEvents && relatedEvents.length > 1 ? (
-        <DetailSection label={relatedLabel ?? 'Related activity'}>
+        <DetailSection label={relatedLabel ?? 'Related raw events'}>
           <div style={{ borderTop: `1px solid ${colors.rowBorder}` }}>
             {relatedEvents.map(traceEvent => (
-              <div
+              <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 }}>
@@ -289,7 +360,7 @@ function EventDetails({
                 >
                   {eventDetails(traceEvent)}
                 </span>
-              </div>
+              </button>
             ))}
           </div>
         </DetailSection>
@@ -301,16 +372,24 @@ function EventDetails({
   )
 }
 
+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 tone = scopes.some(item => item.kind === 'root')
@@ -318,7 +397,7 @@ function EventScopeBadge({
     : scopes.some(item => item.kind === 'nested')
       ? 'blue'
       : 'neutral'
-  return (
+  const badge = (
     <Badge
       tone={tone}
       title={[...scopes.map(item => item.title), queryId ? `query id: ${queryId}` : '']
@@ -328,6 +407,66 @@ function EventScopeBadge({
       {scopes.length === 1 ? scope.label : `${scopes.length} scopes`}
     </Badge>
   )
+  return queryId && onViewQuery ? (
+    <button
+      type='button'
+      title={`Open query ${queryId}`}
+      onClick={event => {
+        event.stopPropagation()
+        onViewQuery(queryId)
+      }}
+      style={{
+        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
+      title={value}
+      style={{
+        ...(code ? styles.code : {}),
+        color: colors.muted,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {value || '—'}
+    </span>
+  )
+}
+
+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) }}>
+      <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 }) {
@@ -335,7 +474,7 @@ function EventKind({ kind }: { kind: string }) {
   return (
     <span
       style={{
-        color: toneColor(colors, eventTone(kind)),
+        color: colors.text,
         fontWeight: 600,
         overflow: 'hidden',
         textOverflow: 'ellipsis',
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 1fb0b51a..a66efb54 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -1,9 +1,10 @@
 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 { ClassBadge, plural, queryStatus, QueryStatusDot } from './QueryPresentation.js'
 import {
   ColumnResizeHandle,
   useDetailsPaneWidth,
@@ -25,22 +26,34 @@ export function operationIsInactive(operation: DevtoolsOperation): boolean {
   )
 }
 
+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: 250,
-    minWidth: 150,
+    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 skipped/retained history.',
+      'Query service. The dot shows its state: green active, amber inactive cached, blue pending, red error, or gray skipped/retained history.',
   },
   {
-    label: 'Plan',
+    label: 'Query Operation',
+    width: 112,
+    minWidth: 88,
+    description:
+      'The logical Figbird operation. Paginate and all may use find as their transport request method.',
+  },
+  {
+    label: 'Definition',
     width: 420,
     minWidth: 180,
     description: 'Query operation and parameters, followed by its related data paths.',
   },
   {
-    label: 'Class',
+    label: 'Maintenance',
     width: 160,
     minWidth: 105,
     description:
@@ -50,24 +63,24 @@ const QUERY_COLUMNS = [
     label: 'Rows',
     width: 75,
     minWidth: 55,
-    description: 'Number of items currently in the query result.',
+    description: 'Number of rows currently in the query result.',
   },
   {
-    label: 'Fetches',
+    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',
+    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',
+    label: 'Fetched',
     width: 80,
     minWidth: 60,
     description: "Time since this query's data was last fetched.",
@@ -81,6 +94,7 @@ export function QueriesTab({
   inspectedQueryCounts,
   selectedQueryId,
   onSelectedQueryIdChange,
+  onFetchSelect,
 }: {
   model: DevtoolsModel
   filter: string
@@ -88,6 +102,7 @@ export function QueriesTab({
   inspectedQueryCounts: ReadonlyMap<string, number> | null
   selectedQueryId: string | null
   onSelectedQueryIdChange: (queryId: string | null) => void
+  onFetchSelect: (span: QuerySpan) => void
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const [columnWidths, onColumnResizeStart] = useResizableColumns(QUERY_COLUMNS)
@@ -99,6 +114,7 @@ export function QueriesTab({
       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' &&
@@ -110,6 +126,11 @@ export function QueriesTab({
       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 =>
@@ -117,7 +138,12 @@ export function QueriesTab({
             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(' ')
@@ -226,9 +252,6 @@ export function QueriesTab({
                         }}
                       >
                         {query.serviceName}
-                        <span style={{ color: colors.muted, fontWeight: 500 }}>
-                          .{query.method}
-                        </span>
                       </span>
                       {inspectedQueryCounts ? (
                         <span
@@ -240,6 +263,14 @@ export function QueriesTab({
                       ) : null}
                     </span>
                   </td>
+                  <td style={styles.td}>
+                    <code
+                      title={queryOperationTitle(operation)}
+                      style={{ ...styles.code, color: colors.text, fontWeight: 600 }}
+                    >
+                      {queryOperationName(operation)}
+                    </code>
+                  </td>
                   <td style={{ ...styles.td, maxWidth: 420 }}>
                     <span
                       title={[
@@ -285,6 +316,7 @@ export function QueriesTab({
           operation={selectedOperation}
           selectedQueryId={selectedQueryId}
           width={detailsWidth}
+          onFetchSelect={onFetchSelect}
           onResizeStart={onDetailsResizeStart}
           onClose={() => onSelectedQueryIdChange(null)}
         />
@@ -317,6 +349,20 @@ function queryPlan(operation: DevtoolsOperation): string {
   return `${query.method}(${args.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 queryOperationTitle(operation: DevtoolsOperation): string {
+  const logical = queryOperationName(operation)
+  return logical === operation.summary.method
+    ? `Query operation and request method: ${logical}`
+    : `Query operation: ${logical}\nRequest method: ${operation.summary.method}`
+}
+
 function formatPlanValue(value: string | number): string {
   return typeof value === 'string' ? JSON.stringify(value) : String(value)
 }
@@ -329,9 +375,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
@@ -359,7 +404,7 @@ function QueryLastTiming({ query }: { query: QuerySummary }) {
           ? 'warm'
           : query.isFetching
             ? 'pending'
-            : '-'
+            : '—'
       : formatMs(query.lastDurationMs)
   const mutedTiming =
     query.lastDurationMs === undefined && (duration === 'cached' || duration === 'warm')
@@ -393,7 +438,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 e7c9c73d..80aa8986 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -6,8 +6,8 @@ import {
   type MouseEvent as ReactMouseEvent,
   type ReactNode,
 } from 'react'
-import type { QueryRecord } from './collector.js'
-import { compactJson, formatMs } from './format.js'
+import type { QueryRecord, QuerySpan } from './collector.js'
+import { compactJson, formatMs, now } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
 import type {
   DevtoolsOperation,
@@ -16,7 +16,14 @@ 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
 
@@ -24,12 +31,14 @@ 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
 }) {
@@ -49,11 +58,12 @@ export function QueryDetails({
   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
@@ -110,23 +120,28 @@ 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
+            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}`
+              : `${summary.method} request · ${rootQueryIdentity}`}
+          </code>
+          {activeQueryId ? <CopyButton value={activeQueryId} label='Query ID' /> : null}
+        </span>
       }
       width={width}
       onResizeStart={onResizeStart}
@@ -162,7 +177,21 @@ export function QueryDetails({
               {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
             </span>
           </div>
-          <QueryMaintenance query={activeQuery} />
+          {activeQuery.resourceId !== undefined ? (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                margin: '-3px 0 10px',
+                color: colors.muted,
+              }}
+            >
+              <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
               title={`Most recently observed fetch error · query generation ${activeQuery.lastError.generation}`}
@@ -178,16 +207,20 @@ export function QueryDetails({
               {activeQuery.lastError.message}
             </div>
           ) : null}
-          <QueryPerformance query={activeQuery} average={average} />
+          <QueryPerformance query={activeQuery} average={average} onFetchSelect={onFetchSelect} />
+          <QueryRealtimeUpdates query={activeQuery} />
           {!splitDetails ? <QueryData query={activeQuery} separated /> : null}
           <QueryDetailBlock separated>
-            <JsonViewer value={activeQuery.query ?? {}} label='Parameters' />
+            <JsonViewer
+              value={queryArguments(activeQuery)}
+              label={activeQuery.method === 'get' ? 'Arguments' : 'Parameters'}
+            />
           </QueryDetailBlock>
           {!selectedUnderlying && operation.pagination ? (
             <PaginationDetails pagination={operation.pagination} pages={rootFetches} />
           ) : null}
           {showQueryPlan ? (
-            <QueryDetailSection
+            <DetailSection
               label={selectedUnderlying ? 'Related queries' : 'Query plan'}
               meta={plural(directChildren.length, 'relation', 'relations')}
               separated
@@ -222,7 +255,7 @@ export function QueryDetails({
                   />
                 ))}
               </div>
-            </QueryDetailSection>
+            </DetailSection>
           ) : null}
         </div>
         {splitDetails ? (
@@ -244,6 +277,15 @@ export function QueryDetails({
   )
 }
 
+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,
@@ -265,74 +307,49 @@ function QueryData({
   )
 }
 
-function QueryMaintenance({ query }: { query: QuerySummary }) {
+function QueryRealtimeUpdates({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <div
-      title={`${maintenanceLabel(query)} · ${maintenanceReason(query)}`}
-      style={{
-        margin: '-3px 0 14px',
-        color: colors.faint,
-        fontSize: 11,
-        lineHeight: 1.4,
-      }}
-    >
-      {maintenanceLabel(query)} · {maintenanceReason(query)}
-    </div>
+    <DetailSection label='Realtime Updates' separated>
+      <div style={{ color: colors.text, fontWeight: 600 }}>{realtimeUpdatesLabel(query)}</div>
+      <div style={{ color: colors.muted, marginTop: 2 }}>{realtimeUpdatesDescription(query)}</div>
+    </DetailSection>
   )
 }
 
-function maintenanceLabel(query: QuerySummary): string {
-  switch (query.realtimeStrategy) {
+function realtimeUpdatesLabel(query: QuerySummary): string {
+  switch (realtimeUpdatesMode(query)) {
     case 'merge':
-      return 'Merge matching events locally'
+      return 'Merges matching events locally'
     case 'manual':
-      return 'Ignore realtime automatically'
+      return 'Ignores realtime events'
     default:
-      return 'Refetch on uncertain events'
+      return 'Refetches uncertain events'
   }
 }
 
-function maintenanceReason(query: QuerySummary): string {
+function realtimeUpdatesDescription(query: QuerySummary): string {
+  const mode = realtimeUpdatesMode(query)
+  if (mode === 'manual') {
+    return 'This snapshot changes only when it is refetched manually.'
+  }
+  if (mode === 'merge') {
+    return 'Matching cache changes can be applied safely without refetching.'
+  }
+
   const reasons = query.classificationReasons ?? []
   const windowReasons = reasons.filter(reason => reason.code === 'window-filter')
-  if (windowReasons.length > 0 && windowReasons.length === reasons.length) {
-    const fields = [
-      ...new Set(windowReasons.map(reason => reason.detail).filter(Boolean)),
-    ] as string[]
-    if (fields.length > 0) {
-      return `${formatList(fields)} ${fields.length === 1 ? 'creates' : 'create'} a server window boundary`
-    }
+  if (windowReasons.length > 0) {
+    return 'Sorted or paginated results can’t always be updated safely in place.'
   }
-  if (reasons.length > 0) return reasons.map(classificationReasonLabel).join(' · ')
-  return query.classification === 'get'
-    ? 'Direct entity lookup'
-    : 'Membership and ordering are provable locally'
+  return 'The server is needed when an event can’t be applied safely in place.'
 }
 
-function formatList(values: string[]): string {
-  if (values.length < 2) return values[0] ?? ''
-  if (values.length === 2) return `${values[0]} and ${values[1]}`
-  return `${values.slice(0, -1).join(', ')}, and ${values.at(-1)}`
-}
-
-function classificationReasonLabel(reason: { code: string; detail?: string }): string {
-  switch (reason.code) {
-    case 'server-flag':
-      return `forced server authority${reason.detail ? ` by ${reason.detail}` : ''}`
-    case 'native-pagination':
-      return 'native cursor pagination'
-    case 'select-projection':
-      return `projected rows${reason.detail ? ` via ${reason.detail}` : ''}`
-    case 'server-only-operator':
-      return `server-only operator ${reason.detail ?? ''}`.trim()
-    case 'window-filter':
-      return `window boundary ${reason.detail ?? ''}`.trim()
-    case 'snapshot':
-      return 'snapshot query ignores realtime'
-    default:
-      return reason.detail ?? reason.code
-  }
+function realtimeUpdatesMode(query: QuerySummary): 'merge' | 'manual' | 'refetch' {
+  if (query.realtimeStrategy) return query.realtimeStrategy
+  if (query.classificationReasons?.some(reason => reason.code === 'snapshot')) return 'manual'
+  if (query.classification === 'local-exact' || query.classification === 'get') return 'merge'
+  return 'refetch'
 }
 
 function PaginationDetails({
@@ -355,7 +372,7 @@ function PaginationDetails({
     .join(' · ')
 
   return (
-    <QueryDetailSection label='Pagination' separated>
+    <DetailSection label='Pagination' separated>
       <div style={{ color: colors.muted }}>{summary}</div>
       {pages.length > 1 ? (
         <details style={{ marginTop: 8 }}>
@@ -417,7 +434,7 @@ function PaginationDetails({
           </div>
         </details>
       ) : null}
-    </QueryDetailSection>
+    </DetailSection>
   )
 }
 
@@ -437,10 +454,18 @@ function breadcrumbButtonStyle(colors: DevtoolsColors): CSSProperties {
   }
 }
 
-function QueryPerformance({ query, average }: { query: QuerySummary; average: number }) {
+function QueryPerformance({
+  query,
+  average,
+  onFetchSelect,
+}: {
+  query: QuerySummary
+  average: number
+  onFetchSelect: (span: QuerySpan) => void
+}) {
   const { colors } = useDevtoolsTheme()
   return (
-    <QueryDetailSection label='Performance' separated>
+    <DetailSection label='Performance' separated>
       <div
         style={{
           display: 'flex',
@@ -487,40 +512,10 @@ function QueryPerformance({ query, average }: { query: QuerySummary; average: nu
           }}
         >
           <span style={{ color: colors.faint, fontSize: 11 }}>Recent latency</span>
-          <Sparkline spans={query.spans} />
+          <Sparkline spans={query.spans} onSelect={onFetchSelect} />
         </div>
       ) : null}
-    </QueryDetailSection>
-  )
-}
-
-function QueryDetailSection({
-  label,
-  meta,
-  separated = false,
-  children,
-}: {
-  label: string
-  meta?: string
-  separated?: boolean
-  children: ReactNode
-}) {
-  const { colors } = useDevtoolsTheme()
-  return (
-    <QueryDetailBlock separated={separated}>
-      <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>
-      {children}
-    </QueryDetailBlock>
+    </DetailSection>
   )
 }
 
@@ -624,27 +619,86 @@ function QueryPlanRow({
   )
 }
 
-function Sparkline({ spans }: { spans: QueryRecord['spans'] }) {
+function Sparkline({
+  spans,
+  onSelect,
+}: {
+  spans: QueryRecord['spans']
+  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 visibleSpans = spans.slice(-30)
+  const max = Math.max(1, ...visibleSpans.map(span => spanDuration(span, nowPoint)))
   return (
-    <span style={{ display: 'flex', alignItems: 'end', gap: 2, height: 22 }}>
-      {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 }}
+    >
+      {visibleSpans.map((span, index) => {
+        const duration = spanDuration(span, nowPoint)
+        const state = span.endAt === undefined ? 'pending' : span.ok === false ? 'error' : 'success'
+        const trigger = fetchReasonLabel(span.reason)
         return (
-          <span
+          <button
+            type='button'
             key={`${span.startAt}:${index}`}
-            title={formatMs(duration)}
+            aria-label={`${formatMs(duration)}, ${state}, ${trigger}`}
+            title={`${formatMs(duration)} · ${state}\nTrigger: ${trigger}\nClick to inspect this fetch`}
+            onClick={() => onSelect(span)}
             style={{
-              width: 4,
-              height: Math.max(3, (duration / max) * 20),
-              background: span.ok === false ? colors.red : colors.green,
-              borderRadius: 2,
+              display: 'flex',
+              alignItems: 'end',
+              justifyContent: 'center',
+              width: 7,
+              height: 22,
+              padding: 0,
+              border: 0,
+              background: 'transparent',
+              cursor: 'pointer',
             }}
-          />
+          >
+            <span
+              aria-hidden='true'
+              style={{
+                width: 4,
+                height: Math.max(3, (duration / max) * 20),
+                background:
+                  span.endAt === undefined
+                    ? colors.blue
+                    : span.ok === false
+                      ? colors.red
+                      : colors.green,
+                borderRadius: 2,
+                opacity: span.endAt === undefined ? 0.75 : 1,
+                boxShadow: span.endAt === undefined ? `inset 0 0 0 1px ${colors.bg}` : undefined,
+              }}
+            />
+          </button>
         )
       })}
     </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 dedcc297..5b07b762 100644
--- a/lib/devtools/QueryPresentation.tsx
+++ b/lib/devtools/QueryPresentation.tsx
@@ -33,7 +33,7 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
   const color =
     status.kind === 'error'
       ? colors.red
-      : status.kind === 'fetching'
+      : status.kind === 'pending'
         ? colors.blue
         : status.kind === 'skipped'
           ? colors.faint
@@ -59,7 +59,7 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
 }
 
 export function queryStatus(query: QuerySummary): {
-  kind: 'active' | 'cached' | 'error' | 'fetching' | 'retained' | 'skipped'
+  kind: 'active' | 'cached' | 'error' | 'pending' | 'retained' | 'skipped'
   label: string
 } {
   if (!query.present) {
@@ -72,7 +72,7 @@ export function queryStatus(query: QuerySummary): {
     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) {
     return { kind: 'cached', label: statusLabel(query, 'cached') }
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index e828021b..6e9d2272 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -4,6 +4,7 @@ import {
   useRef,
   useState,
   type MouseEvent as ReactMouseEvent,
+  type RefObject,
 } from 'react'
 import { formatClock, formatMs } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
@@ -51,6 +52,10 @@ export function TimelineActivityTable({
   visibility,
   follow,
   onFollowChange,
+  requestedActivityId,
+  onRequestedActivityHandled,
+  onQuerySelect,
+  onCacheEntitySelect,
   onTraceSelect,
 }: {
   activities: readonly TimelineActivity[]
@@ -61,10 +66,15 @@ export function TimelineActivityTable({
   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
 }) {
   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)
@@ -88,11 +98,11 @@ export function TimelineActivityTable({
     ? filteredActivities.filter(activity => intersects(activity, range, nowPoint))
     : filteredActivities
   const inFlightWriteCount = activities.filter(
-    activity => activity.kind === 'write' && activity.status === 'in-flight',
+    activity => activity.kind === 'write' && activity.status === 'pending',
   ).length
   const projectedWriteCount = activities.filter(
     activity =>
-      activity.kind === 'write' && activity.status === 'in-flight' && activity.write?.optimistic,
+      activity.kind === 'write' && activity.status === 'pending' && activity.write?.optimistic,
   ).length
   const latestVisibleActivityId = rows.at(-1)?.id
   const waterfallIndex = COLUMNS.length - 1
@@ -118,6 +128,21 @@ export function TimelineActivityTable({
 
   useEffect(() => setSelectedId(null), [filter, visibility])
 
+  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
@@ -147,7 +172,7 @@ export function TimelineActivityTable({
     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.
+          No timeline activity yet. Recording continues until you press Clear recording.
         </div>
       </div>
     )
@@ -224,6 +249,7 @@ export function TimelineActivityTable({
                   key={activity.id}
                   activity={activity}
                   selected={activity.id === selectedId}
+                  {...(activity.id === selectedId ? { rowRef: selectedRowRef } : {})}
                   extent={displayExtent}
                   nowPoint={nowPoint}
                   wallClockOffset={wallClockOffset}
@@ -243,6 +269,8 @@ export function TimelineActivityTable({
             width={detailsWidth}
             onResizeStart={onDetailsResizeStart}
             onClose={() => setSelectedId(null)}
+            {...(onQuerySelect ? { onQuerySelect } : {})}
+            {...(onCacheEntitySelect ? { onCacheEntitySelect } : {})}
             {...(onTraceSelect ? { onTraceSelect } : {})}
           />
         ) : null}
@@ -263,9 +291,12 @@ export function TimelineActivityTable({
         <span>
           {rows.length} / {activities.length} activities
         </span>
-        <span>{rows.filter(activity => activity.kind === 'fetch').length} fetches</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} writes in flight</span> : null}
+        {inFlightWriteCount > 0 ? <span>{inFlightWriteCount} pending writes</span> : null}
         {projectedWriteCount > 0 ? <span>{projectedWriteCount} projected</span> : null}
         <span>{formatMs(displayExtent.end - displayExtent.start)} window</span>
         <span style={{ marginLeft: 'auto' }}>
@@ -293,9 +324,14 @@ export function TimelineActivityTable({
   )
 }
 
+function activityCount(activities: readonly TimelineActivity[], kind: TimelineActivity['kind']) {
+  return activities.filter(activity => activity.kind === kind).length
+}
+
 function ActivityRow({
   activity,
   selected,
+  rowRef,
   extent,
   nowPoint,
   wallClockOffset,
@@ -303,6 +339,7 @@ function ActivityRow({
 }: {
   activity: TimelineActivity
   selected: boolean
+  rowRef?: RefObject<HTMLTableRowElement | null>
   extent: TimelineExtent
   nowPoint: number
   wallClockOffset: number
@@ -311,6 +348,7 @@ function ActivityRow({
   const { colors, styles } = useDevtoolsTheme()
   return (
     <tr
+      ref={rowRef}
       data-timeline-activity={activity.kind}
       aria-selected={selected}
       tabIndex={0}
@@ -466,6 +504,8 @@ function ActivityDetails({
   width,
   onResizeStart,
   onClose,
+  onQuerySelect,
+  onCacheEntitySelect,
   onTraceSelect,
 }: {
   activity: TimelineActivity
@@ -473,6 +513,8 @@ function ActivityDetails({
   width: number
   onResizeStart: (event: ReactMouseEvent<HTMLDivElement>) => void
   onClose: () => void
+  onQuerySelect?: (queryId: string) => void
+  onCacheEntitySelect?: (serviceName: string, itemId: string | number) => void
   onTraceSelect?: (traceId: number) => void
 }) {
   const { colors } = useDevtoolsTheme()
@@ -487,7 +529,10 @@ function ActivityDetails({
       onClose={onClose}
     >
       <DetailStats>
-        <DetailStat label='Operation' value={activity.operation} />
+        <DetailStat
+          label={activity.kind === 'fetch' ? 'Request method' : 'Operation'}
+          value={activity.operation}
+        />
         {activity.detail ? <DetailStat label='Context' value={activity.detail} /> : null}
         <DetailStat label='Status' value={activity.status} />
         <DetailStat
@@ -502,14 +547,25 @@ function ActivityDetails({
           value={activity.durationMs === undefined ? '—' : formatMs(activity.durationMs)}
         />
         {activity.serviceName ? <DetailStat label='Service' value={activity.serviceName} /> : null}
-        {activity.queryId ? <DetailStat label='Query ID' value={activity.queryId} /> : null}
+        {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} /> : 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}
@@ -539,7 +595,7 @@ function ActivityDetails({
           <DetailBlock>
             <JsonViewer
               value={activity.data}
-              label='Current query data'
+              label='Current query data — not captured at fetch time'
               emptyLabel='No query data captured'
             />
           </DetailBlock>
@@ -548,8 +604,8 @@ function ActivityDetails({
         <DetailBlock>
           <JsonViewer
             value={activity.payload}
-            label='Event payload'
-            emptyLabel='No event payload captured'
+            label='Realtime payload'
+            emptyLabel='No realtime payload captured'
           />
         </DetailBlock>
       ) : activity.kind === 'connection' ? (
@@ -561,6 +617,33 @@ function ActivityDetails({
           />
         </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
@@ -576,6 +659,12 @@ function ActivityDetails({
   )
 }
 
+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
diff --git a/lib/devtools/TimelineTab.tsx b/lib/devtools/TimelineTab.tsx
index 724c89be..5c14bc34 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -53,6 +53,10 @@ export function TimelineTab({
   visibility,
   follow,
   onFollowChange,
+  requestedActivityId,
+  onRequestedActivityHandled,
+  onQuerySelect,
+  onCacheEntitySelect,
   onTraceSelect,
 }: {
   snapshot: DevtoolsSnapshot
@@ -61,6 +65,10 @@ export function TimelineTab({
   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 hasInFlight =
@@ -85,6 +93,10 @@ export function TimelineTab({
         visibility={visibility}
         follow={follow}
         onFollowChange={onFollowChange}
+        {...(requestedActivityId ? { requestedActivityId } : {})}
+        {...(onRequestedActivityHandled ? { onRequestedActivityHandled } : {})}
+        {...(onQuerySelect ? { onQuerySelect } : {})}
+        {...(onCacheEntitySelect ? { onCacheEntitySelect } : {})}
         {...(onTraceSelect ? { onTraceSelect } : {})}
       />
     </section>
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index 6cabf7d1..ff800ae2 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -156,6 +156,7 @@ type CapturedQueryState = Omit<
 >
 
 interface QueryMetrics {
+  activeSpans: Map<number, QuerySpan>
   errorCount: number
   fetchCount: number
   lastDurationMs?: number
@@ -217,6 +218,7 @@ function makeQueryRecord(
     lastObservedAt: observedAt,
     lastKnown: state,
     metrics: {
+      activeSpans: new Map(),
       fetchCount: row.fetchCount,
       errorCount: row.errorCount,
       ...(row.lastDurationMs !== undefined ? { lastDurationMs: row.lastDurationMs } : {}),
@@ -264,6 +266,7 @@ function makePlaceholderQueryRecord(
     lastKnown: state,
     lastObservedAt: observedAt,
     metrics: {
+      activeSpans: new Map(),
       fetchCount: 0,
       errorCount: 0,
       totalDurationMs: 0,
@@ -301,7 +304,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()].sort(
+      (a, b) => a.startAt - b.startAt,
+    ),
     realtimeSeen: metrics.realtimeSeen,
     reconciles: metrics.reconciles,
     ...(metrics.lastError ? { lastError: metrics.lastError } : {}),
@@ -473,6 +478,9 @@ class FigbirdCollector implements Collector {
     this.#timelineLaneIds.clear()
     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()
   }
@@ -657,14 +665,21 @@ class FigbirdCollector implements Collector {
   }
 
   #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 } : {}),
-        traceIds: event.causes?.map(cause => cause.traceId) ?? [],
+        traceIds,
+      })
+      record.metrics.activeSpans.set(event.fetchId, {
+        startAt: Math.max(at, this.#timelineStartedAt),
+        fetchId: event.fetchId,
+        ...(event.reason ? { reason: event.reason } : {}),
+        ...(traceIds.length > 0 ? { traceIds } : {}),
       })
     }
-    const record = this.#ensureFetchRecord(event, at, true)
-    if (record.current?.generation !== event.generation) return
     const current = {
       ...record.current,
       status: record.current.status === 'success' ? ('success' as const) : ('loading' as const),
@@ -738,6 +753,7 @@ class FigbirdCollector implements Collector {
     const observedStartAt = at - event.durationMs
     const startAt = Math.max(observedStartAt, this.#timelineStartedAt)
     const trace = event.fetchId === undefined ? undefined : this.#fetchTraces.get(event.fetchId)
+    if (event.fetchId !== undefined) metrics.activeSpans.delete(event.fetchId)
     metrics.spans.push({
       startAt,
       endAt: at,
diff --git a/lib/devtools/eventModel.ts b/lib/devtools/eventModel.ts
index 5fc55f89..c131273f 100644
--- a/lib/devtools/eventModel.ts
+++ b/lib/devtools/eventModel.ts
@@ -10,6 +10,10 @@ 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
@@ -50,6 +54,44 @@ export function eventPayload(event: DevtoolsEvent['event']): unknown {
   }
 }
 
+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: { name: event.error.name, message: event.error.message } }
@@ -64,6 +106,9 @@ export function rawEventRow(item: DevtoolsEvent, index: TraceIndex): EventListRo
     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 }),
@@ -73,6 +118,7 @@ export function rawEventRow(item: DevtoolsEvent, index: TraceIndex): EventListRo
 export function buildActivities(
   events: readonly DevtoolsEvent[],
   index: TraceIndex,
+  scopes?: ReadonlyMap<string, readonly EventQueryScope[]>,
 ): ActivityRow[] {
   const grouped = new Map<string, { traceId?: number; events: DevtoolsEvent[] }>()
   for (const item of events) {
@@ -97,14 +143,27 @@ export function buildActivities(
       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)
       const queryId = group.events.map(item => eventQueryId(item.event)).find(Boolean)
       return {
         key,
         representative,
         events: group.events,
         kind,
+        ...identity,
+        ...lifecycle,
         details,
-        searchText: [kind, details, ...group.events.map(item => eventSearchText(item))]
+        searchText: [
+          kind,
+          identity.subject,
+          identity.operation,
+          lifecycle.status,
+          details,
+          ...group.events.map(item =>
+            eventSearchText(item, scopes?.get(eventQueryId(item.event) ?? '')),
+          ),
+        ]
           .join(' ')
           .toLowerCase(),
         ...(queryId === undefined ? {} : { queryId }),
@@ -154,7 +213,7 @@ function activityRepresentative(events: readonly DevtoolsEvent[]): DevtoolsEvent
 
 function activityKind(key: string, representative: DevtoolsEvent): string {
   if (isMutationEvent(representative.event) || key.startsWith('mutation:')) return 'mutation'
-  if (key.startsWith('action:')) return 'action'
+  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'
@@ -176,7 +235,9 @@ function activityDetails(
   if (isMutationEvent(representative.event) || key.startsWith('mutation:')) {
     return mutationActivityDetails(representative, events)
   }
-  if (key.startsWith('action:')) return actionActivityDetails(representative, events)
+  if (key.startsWith('action:') || representative.event.kind === 'action:start') {
+    return actionActivityDetails(representative, events)
+  }
 
   const event = representative.event
   if (event.kind.startsWith('connection:')) {
@@ -198,9 +259,9 @@ function activityDetails(
     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 merged', 'queries merged') : '',
+      effects.merged > 0 ? pluralActivity(effects.merged, 'query updated', 'queries updated') : '',
       effects.reconcile > 0
-        ? pluralActivity(effects.reconcile, 'query reconciled', 'queries reconciled')
+        ? pluralActivity(effects.reconcile, 'refetch scheduled', 'refetches scheduled')
         : '',
       fetches > 0 ? pluralActivity(fetches, 'fetch', 'fetches') : '',
     ])
@@ -219,7 +280,7 @@ function activityDetails(
             : `${event.source} cache update`,
       effects.merged > 0 ? pluralActivity(effects.merged, 'query updated', 'queries updated') : '',
       effects.reconcile > 0
-        ? pluralActivity(effects.reconcile, 'query reconciled', 'queries reconciled')
+        ? pluralActivity(effects.reconcile, 'refetch scheduled', 'refetches scheduled')
         : '',
     ])
   }
@@ -236,7 +297,7 @@ function activityDetails(
         ? pluralActivity(terminal.event.itemCount, 'row', 'rows')
         : terminal?.event.kind === 'fetch:error'
           ? errorMessage(terminal.event.error)
-          : 'in flight',
+          : '',
       terminal?.event.kind === 'fetch:end' || terminal?.event.kind === 'fetch:error'
         ? formatMs(terminal.event.durationMs)
         : '',
@@ -284,8 +345,8 @@ function mutationActivityDetails(
       : terminal?.event.kind === 'mutate:rollback'
         ? 'rolled back'
         : terminal?.event.kind === 'mutate:end'
-          ? 'completed'
-          : 'in flight',
+          ? 'success'
+          : 'pending',
     terminal?.event.kind === 'mutate:end' || terminal?.event.kind === 'mutate:error'
       ? formatMs(terminal.event.durationMs)
       : '',
@@ -306,8 +367,8 @@ function actionActivityDetails(
     terminal?.event.kind === 'action:error'
       ? errorMessage(terminal.event.error)
       : terminal?.event.kind === 'action:end'
-        ? 'completed'
-        : 'in flight',
+        ? 'success'
+        : 'pending',
     terminal?.event.kind === 'action:end' || terminal?.event.kind === 'action:error'
       ? formatMs(terminal.event.durationMs)
       : '',
@@ -352,12 +413,19 @@ function traceIdsFromCauses(
 }
 
 export function eventSearchText(item: DevtoolsEvent, scopes?: readonly EventQueryScope[]): string {
+  const payload = eventPayload(item.event)
+  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),
+    payload === undefined ? '' : compactJson(payload),
+    compactJson(displayEvent(item.event)),
   ].join(' ')
 }
 
@@ -369,6 +437,8 @@ export function eventQueryId(event: DevtoolsEvent['event']): string | undefined
     case 'reconcile:started':
     case 'reconcile:decision':
       return event.queryId
+    case 'cache:updated':
+      return event.queryEffects[0]?.queryId
     default:
       return undefined
   }
@@ -386,7 +456,7 @@ export function eventDetails(item: DevtoolsEvent): string {
     case 'fetch:end':
       return joinEventParts([
         `${event.serviceName}.${event.method}`,
-        `${event.itemCount} ${event.itemCount === 1 ? 'item' : 'items'}`,
+        `${event.itemCount} ${event.itemCount === 1 ? 'row' : 'rows'}`,
         formatMs(event.durationMs),
       ])
     case 'fetch:error':
@@ -471,30 +541,139 @@ export function eventDetails(item: DevtoolsEvent): string {
   }
 }
 
-function joinEventParts(parts: string[]): string {
-  return parts.filter(Boolean).join(' · ')
+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 errorMessage(error: Error): string {
-  return error.message || String(error)
+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)
 }
 
-export function eventTone(kind: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
-  if (kind === 'connection' || kind === 'fetch' || kind === 'cache edit') return 'blue'
-  if (kind === 'mutation' || kind === 'mutation cache' || kind === 'optimistic') return 'amber'
-  if (kind === 'action') return 'green'
-  if (kind === 'connection:connected' || kind === 'connection:reconnected') return 'green'
+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 (
-    kind === 'connection:disconnected' ||
-    kind === 'connection:error' ||
-    kind === 'connection:reconnect-failed'
+    event.kind === 'action:start' ||
+    event.kind === 'action:end' ||
+    event.kind === 'action:error'
   ) {
-    return 'red'
+    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 (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'
+  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/timelineModel.ts b/lib/devtools/timelineModel.ts
index d087f4d5..de53208a 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -1,7 +1,7 @@
 import type { FigbirdEvent } from '../core/events.js'
 import type { DevtoolsEvent, DevtoolsSnapshot, QueryRecord, WriteRecord } from './collector.js'
 import { buildTraceIndex, displayEvent, traceIdsForEvent } from './eventModel.js'
-import { formatMs } from './format.js'
+import { compactJson, formatMs } from './format.js'
 import type { DevtoolsModel } from './model.js'
 
 export type TimelineActivityKind = 'fetch' | 'realtime' | 'connection' | 'write'
@@ -24,7 +24,9 @@ export interface TimelineActivity {
   result: string
   serviceName?: string
   queryId?: string
+  queryIds?: string[]
   traceId?: number
+  entity?: { serviceName: string; itemId: string | number }
   durationMs?: number
   payload?: unknown
   data?: unknown
@@ -148,7 +150,7 @@ function buildFetchActivities(
         traceEvents.filter(
           item => item.event.kind !== 'cache:updated' || item.event.source === 'fetch',
         ),
-        failed ? '' : 'cache refreshed',
+        failed ? '—' : 'cache refreshed',
       )
       const trigger = fetchTrigger(
         span.reason ?? (start?.event.kind === 'fetch:start' ? start.event.reason : undefined),
@@ -177,7 +179,7 @@ function buildFetchActivities(
         detail: [query.resourceId === undefined ? '' : `#${query.resourceId}`, scope ?? '']
           .filter(Boolean)
           .join(' · '),
-        status: failed ? 'failed' : pending ? 'fetching' : 'complete',
+        status: failed ? 'error' : pending ? 'pending' : 'success',
         tone: failed ? 'red' : pending ? 'blue' : 'green',
         trigger,
         effect,
@@ -203,7 +205,8 @@ function buildRealtimeActivities(
     const event = raw?.event.kind === 'realtime' ? raw.event : undefined
     const traceEvents =
       item.traceId === undefined ? [] : (context.traceEvents.get(item.traceId) ?? [])
-    const effect = cacheEffect(traceEvents, 'received')
+    const queryIds = affectedQueryIds(traceEvents)
+    const effect = cacheEffect(traceEvents, '—')
     const fetches = traceEvents.filter(related => related.event.kind === 'fetch:start').length
     const result = fetches > 0 ? `${fetches} ${fetches === 1 ? 'fetch' : 'fetches'} triggered` : '—'
     return searchable({
@@ -212,15 +215,19 @@ function buildRealtimeActivities(
       startAt: item.at,
       endAt: item.at,
       label: item.serviceName,
-      operation: event?.type ?? 'event',
+      operation: normalizeRealtimeOperation(event?.type),
       detail: event?.itemId === undefined ? '' : `#${event.itemId}`,
       status: 'received',
       tone: 'blue',
-      trigger: 'socket event',
+      trigger: 'realtime event',
       effect,
       result,
       serviceName: item.serviceName,
+      ...(queryIds.length > 0 ? { queryIds } : {}),
       ...(item.traceId === undefined ? {} : { traceId: item.traceId }),
+      ...(event?.itemId === undefined
+        ? {}
+        : { entity: { serviceName: item.serviceName, itemId: event.itemId } }),
       durationMs: 0,
       ...(event?.item === undefined ? {} : { payload: event.item }),
       error: false,
@@ -261,14 +268,22 @@ function connectionActivity(
     label: 'socket',
     operation,
     detail: connectionDetail(event),
-    status: failed
-      ? event.kind === 'connection:disconnected'
-        ? 'offline'
-        : 'failed'
-      : 'connected',
-    tone: failed ? 'red' : 'green',
+    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: sweep?.kind === 'reconnect:sweep' ? `reconnect sweep ${sweep.phase}` : '—',
+    effect: '—',
     result: result || '—',
     ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
     durationMs: 0,
@@ -311,6 +326,12 @@ function actionContainsMutation(action: WriteRecord, mutation: WriteRecord): boo
 
 function writeActivity(write: WriteRecord, 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)')
@@ -333,16 +354,21 @@ function writeActivity(write: WriteRecord, initiatingAction?: WriteRecord): Time
             .filter(Boolean)
             .join(' · ')
         : '',
-    status: write.status,
-    tone: failed ? 'red' : write.status === 'in-flight' ? 'amber' : 'green',
+    status,
+    tone: failed ? 'red' : write.status === 'in-flight' ? 'blue' : 'green',
     trigger: initiatingAction || write.type === 'action' ? 'action' : 'UI mutation',
-    effect: write.optimistic
-      ? write.rolledBack
-        ? 'optimistic rollback'
-        : 'optimistic cache'
-      : '—',
-    result: write.error ?? (write.status === 'in-flight' ? 'pending' : 'complete'),
+    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: {
@@ -389,9 +415,11 @@ function cacheEffect(events: readonly DevtoolsEvent[], fallback: string): string
   const reconcile = [...outcomes.values()].filter(outcome => outcome === 'reconcile').length
   return (
     [
-      merged > 0 ? `${merged} merged` : '',
-      reconcile > 0 ? `${reconcile} reconcile` : '',
-      merged === 0 && reconcile === 0 && updated ? 'cache updated' : '',
+      merged > 0 ? `${merged} ${merged === 1 ? 'query updated' : 'queries updated'}` : '',
+      reconcile > 0
+        ? `${reconcile} ${reconcile === 1 ? 'refetch scheduled' : 'refetches scheduled'}`
+        : '',
+      merged === 0 && reconcile === 0 && updated ? 'cache refreshed' : '',
     ]
       .filter(Boolean)
       .join(' · ') || fallback
@@ -407,6 +435,30 @@ function fetchTrigger(
   return cause ? cause.replace('-', ' ') : 'request'
 }
 
+function affectedQueryIds(events: readonly DevtoolsEvent[]): string[] {
+  const ids = new Set<string>()
+  for (const item of events) {
+    if (item.event.kind !== 'cache:updated') continue
+    for (const effect of item.event.queryEffects) ids.add(effect.queryId)
+  }
+  return [...ids]
+}
+
+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 {
@@ -456,6 +508,15 @@ function searchable(activity: Omit<TimelineActivity, 'searchText'>): TimelineAct
       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.payload === undefined ? '' : compactJson(activity.payload),
+      activity.data === undefined ? '' : compactJson(activity.data),
+      activity.write ? compactJson(activity.write.args) : '',
+      activity.write?.id ?? '',
       activity.durationMs === undefined ? '' : formatMs(activity.durationMs),
     ]
       .join(' ')
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index cd3b519d..25074549 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -429,23 +429,39 @@ export function DetailsPane({
   )
 }
 
-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 (
-    <DetailBlock>
+    <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}
-    </DetailBlock>
+    </section>
   )
 }
 
@@ -468,7 +484,15 @@ export function DetailStats({ children }: { children: ReactNode }) {
   )
 }
 
-export function DetailStat({ label, value }: { label: string; value: string }) {
+export function DetailStat({
+  label,
+  value,
+  copyValue,
+}: {
+  label: string
+  value: string
+  copyValue?: string
+}) {
   const { colors } = useDevtoolsTheme()
   return (
     <div
@@ -481,11 +505,70 @@ export function DetailStat({ label, value }: { label: string; value: string }) {
       }}
     >
       <span style={{ color: colors.muted }}>{label}</span>
-      <strong style={{ color: colors.text, minWidth: 0, overflowWrap: 'anywhere' }}>{value}</strong>
+      <span style={{ display: 'flex', alignItems: 'baseline', gap: 5, minWidth: 0 }}>
+        <strong style={{ color: colors.text, minWidth: 0, overflowWrap: 'anywhere' }}>
+          {value}
+        </strong>
+        {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}`}
+      title={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>
+  )
+}
+
+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
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index 87ca4a85..c82b776d 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 } from '../lib/devtools/eventModel.js'
+import { buildTimelineActivities } from '../lib/devtools/timelineModel.js'
 import { createTestApp, dom } from './helpers.js'
 
 interface Note {
@@ -314,13 +316,28 @@ test('collector marks optimistic mutation failures as rolled back writes', async
   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' }])
 
+  const writeActivity = buildTimelineActivities(
+    snapshot,
+    buildDevtoolsModel(snapshot),
+    performance.now(),
+  ).find(activity => activity.kind === 'write')
+  t.is(writeActivity?.status, 'error')
+  t.is(writeActivity?.effect, 'rolled back')
+
+  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()
 })
 
@@ -588,7 +605,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 +623,7 @@ test('collector bounds inactive query and settled write history', t => {
     generation: 2,
     serviceName: 'notes',
     method: 'find',
+    fetchId: 99,
     durationMs: 100,
     itemCount: 1,
   })
@@ -605,6 +632,7 @@ 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)
 
   collector.stop()
 })
@@ -756,12 +784,15 @@ test('query details show a cursor operation as one inspectable page chain', t =>
   render(<FigbirdDevtoolsPanel collector={collector} theme='light' />)
   const row = $all('tbody tr')[0]
   t.truthy(row)
+  t.is(row?.querySelectorAll('td')[1]?.textContent, 'paginate')
   t.true(
     (row?.textContent ?? '').includes('paginate(25, {"status":"open","$sort":{"createdAt":-1}})'),
   )
   click(row!)
 
   const details = $('[aria-label="Figbird devtools"]')?.textContent ?? ''
+  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'))
@@ -1055,6 +1086,8 @@ test('panel shows root queries and nests relation fetches in details', async t =
       generation: 1,
       serviceName: 'issues',
       method: 'find',
+      fetchId: 10,
+      reason: 'subscription',
     })
     events.emit({
       kind: 'fetch:end',
@@ -1062,6 +1095,7 @@ 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,
     })
@@ -1071,6 +1105,8 @@ test('panel shows root queries and nests relation fetches in details', async t =
       generation: 1,
       serviceName: 'issueLabels',
       method: 'find',
+      fetchId: 11,
+      reason: 'subscription',
     })
     events.emit({
       kind: 'fetch:end',
@@ -1078,6 +1114,7 @@ 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,
     })
@@ -1132,12 +1169,23 @@ 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',
+    'Query 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() → labels'))
   t.false(rowText[0]!.includes('issueLabels'))
 
-  const classHeader = $all('th').find(header => header.textContent === 'Class')
+  const classHeader = $all('th').find(header => header.textContent === 'Maintenance')
   t.true(classHeader?.getAttribute('title')?.includes('local-exact'))
   const classBadge = $all('span').find(element => element.textContent === 'local-exact')
   t.true(classBadge?.getAttribute('title')?.includes('merge directly'))
@@ -1151,12 +1199,14 @@ test('panel shows root queries and nests relation fetches in details', async t =
   t.true(devtoolsText.includes('Query data'))
   t.true(devtoolsText.includes('Visible issue'))
   t.true(devtoolsText.includes('Parameters'))
+  t.true(devtoolsText.includes('Realtime Updates'))
+  t.true(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')
+  const rootQueryId = $all('code').find(element => element.textContent?.includes('root'))
   t.true(rootQueryId?.getAttribute('title')?.includes('Cache identity'))
 
   const nestedQuery = $('[aria-label="Inspect nested query labels"]')
@@ -1174,6 +1224,25 @@ 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('title')?.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(
+      'Current query data — not captured at fetch time',
+    ),
+  )
+  t.truthy($all('button').find(button => button.textContent?.includes('Open query root')))
+  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!)
@@ -1187,7 +1256,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
       row =>
         row.getAttribute('data-timeline-activity') === 'realtime' &&
         row.textContent?.includes('issues') &&
-        row.textContent.includes('patched'),
+        row.textContent.includes('patch'),
     ).length,
     1,
   )
@@ -1210,6 +1279,14 @@ test('panel shows root queries and nests relation fetches in details', async t =
   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('[title="Select event details"]').find(row =>
     row.textContent?.includes('realtime'),
   )

From e1375009bcf5b6ceb92efc3e3cd673d11a8bef9f Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 13:54:39 +0100
Subject: [PATCH 38/42] Polish devtools table presentation

---
 lib/devtools/CacheTab.tsx              | 21 +++++++++--------
 lib/devtools/EventsTab.tsx             | 20 ++++++++---------
 lib/devtools/QueriesTab.tsx            | 31 +++++++++++++++++---------
 lib/devtools/QueryDetails.tsx          |  2 +-
 lib/devtools/TimelineActivityTable.tsx | 22 +++++++++---------
 lib/devtools/ui.tsx                    |  8 +++----
 test/devtools.test.tsx                 | 28 ++++++++++++-----------
 7 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 3a200b45..8b1d7f6f 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -32,12 +32,12 @@ import {
 } 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 },
+  { 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 =
@@ -262,7 +262,7 @@ export function CacheTab({
                   <th
                     key={column.label}
                     style={{ ...styles.th, position: 'sticky' }}
-                    {...(column.label === 'Est. Size' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
+                    {...(column.label === 'est. size' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
                   >
                     {column.label}
                     <ColumnResizeHandle
@@ -346,12 +346,15 @@ export function CacheTab({
                     </td>
                     <td style={styles.td}>
                       {entity.lastChange ? (
-                        <span title={formatClock(entity.lastChange.wallAt, { milliseconds: true })}>
+                        <span
+                          title={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>{' '}
+                          </Badge>
                           <span style={{ color: colors.faint }}>
                             {formatAge(Date.now() - entity.lastChange.wallAt)} ago
                           </span>
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index c33f6392..2029e057 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -34,13 +34,13 @@ import {
 } 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 },
+  { 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({
@@ -125,8 +125,8 @@ export function EventsTab({
             top: 0,
             zIndex: 1,
             background: colors.bg,
-            color: colors.muted,
-            fontWeight: 600,
+            color: colors.text,
+            fontWeight: 400,
             borderBottom: `1px solid ${colors.border}`,
           }}
         >
@@ -140,7 +140,7 @@ export function EventsTab({
                 alignItems: 'center',
               }}
             >
-              {index === 1 && visibility !== 'groups' ? 'Raw Event' : column.label}
+              {index === 1 && visibility !== 'groups' ? 'raw event' : column.label}
               <ColumnResizeHandle
                 label={column.label}
                 onMouseDown={event => onColumnResizeStart(index, event)}
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index a66efb54..e7fd6901 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -33,54 +33,54 @@ export function operationIsRetained(operation: DevtoolsOperation): boolean {
 
 const QUERY_COLUMNS = [
   {
-    label: 'Service',
+    label: 'service',
     width: 185,
     minWidth: 120,
     description:
       'Query service. The dot shows its state: green active, amber inactive cached, blue pending, red error, or gray skipped/retained history.',
   },
   {
-    label: 'Query Operation',
+    label: 'operation',
     width: 112,
     minWidth: 88,
     description:
       'The logical Figbird operation. Paginate and all may use find as their transport request method.',
   },
   {
-    label: 'Definition',
+    label: 'definition',
     width: 420,
     minWidth: 180,
-    description: 'Query operation and parameters, followed by its related data paths.',
+    description: 'Query arguments followed by its related data paths.',
   },
   {
-    label: 'Maintenance',
+    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',
+    label: 'rows',
     width: 75,
     minWidth: 55,
     description: 'Number of rows currently in the query result.',
   },
   {
-    label: 'Fetch Activity',
+    label: 'fetch activity',
     width: 175,
     minWidth: 100,
     description:
       'Completed fetch attempts · realtime notifications observed while the query was active · failed fetches. Extra counts appear only when non-zero.',
   },
   {
-    label: 'Last Fetch',
+    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: 'Fetched',
+    label: 'fetched',
     width: 80,
     minWidth: 60,
     description: "Time since this query's data was last fetched.",
@@ -211,6 +211,7 @@ export function QueriesTab({
             {rows.map(({ operation, localSubscriberCount }) => {
               const query = operation.summary
               const plan = queryPlan(operation)
+              const definition = queryDefinition(plan)
               const isSelected = selectedOperationKey === operation.key
               return (
                 <tr
@@ -284,10 +285,10 @@ export function QueriesTab({
                         .join('\n\n')}
                       style={{
                         ...ellipsizedCode,
-                        color: colors.text,
+                        color: definition === '—' ? colors.faint : colors.text,
                       }}
                     >
-                      {plan}
+                      {definition}
                     </span>
                   </td>
                   <td style={styles.td}>
@@ -349,6 +350,14 @@ function queryPlan(operation: DevtoolsOperation): string {
   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
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index 80aa8986..c8a3ca53 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -311,7 +311,7 @@ function QueryRealtimeUpdates({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   return (
     <DetailSection label='Realtime Updates' separated>
-      <div style={{ color: colors.text, fontWeight: 600 }}>{realtimeUpdatesLabel(query)}</div>
+      <div style={{ color: colors.text }}>{realtimeUpdatesLabel(query)}</div>
       <div style={{ color: colors.muted, marginTop: 2 }}>{realtimeUpdatesDescription(query)}</div>
     </DetailSection>
   )
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index 6e9d2272..a8be42e2 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -31,16 +31,16 @@ 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 },
+  { 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({
@@ -230,7 +230,7 @@ export function TimelineActivityTable({
                 {COLUMNS.map((column, index) => (
                   <th key={column.label} style={{ ...styles.th, position: 'sticky' }}>
                     {column.label}
-                    {column.label === 'Waterfall' && displayExtent ? (
+                    {column.label === 'waterfall' && displayExtent ? (
                       <span style={{ color: colors.faint, marginLeft: 7, fontWeight: 400 }}>
                         {formatOffset(displayExtent.end - displayExtent.start)}
                       </span>
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 25074549..22b5347f 100644
--- a/lib/devtools/ui.tsx
+++ b/lib/devtools/ui.tsx
@@ -167,8 +167,8 @@ export function makeStyles(colors: DevtoolsColors) {
     },
     th: {
       textAlign: 'left',
-      color: colors.muted,
-      fontWeight: 600,
+      color: colors.text,
+      fontWeight: 400,
       padding: '6px 10px',
       boxShadow: `inset 0 -1px ${colors.border}`,
       position: 'sticky',
@@ -506,9 +506,7 @@ export function DetailStat({
     >
       <span style={{ color: colors.muted }}>{label}</span>
       <span style={{ display: 'flex', alignItems: 'baseline', gap: 5, minWidth: 0 }}>
-        <strong style={{ color: colors.text, minWidth: 0, overflowWrap: 'anywhere' }}>
-          {value}
-        </strong>
+        <span style={{ color: colors.text, minWidth: 0, overflowWrap: 'anywhere' }}>{value}</span>
         {copyValue ? <CopyButton value={copyValue} /> : null}
       </span>
     </div>
diff --git a/test/devtools.test.tsx b/test/devtools.test.tsx
index c82b776d..efab1afd 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -785,8 +785,9 @@ test('query details show a cursor operation as one inspectable page chain', t =>
   const row = $all('tbody tr')[0]
   t.truthy(row)
   t.is(row?.querySelectorAll('td')[1]?.textContent, 'paginate')
-  t.true(
-    (row?.textContent ?? '').includes('paginate(25, {"status":"open","$sort":{"createdAt":-1}})'),
+  t.is(
+    row?.querySelectorAll('td')[2]?.textContent,
+    '25, {"status":"open","$sort":{"createdAt":-1}}',
   )
   click(row!)
 
@@ -1171,21 +1172,22 @@ test('panel shows root queries and nests relation fetches in details', async t =
   const rowText = $all('tbody tr').map(row => row.textContent ?? '')
   const queryHeaders = $all('th').map(header => header.textContent ?? '')
   t.deepEqual(queryHeaders, [
-    'Service',
-    'Query Operation',
-    'Definition',
-    'Maintenance',
-    'Rows',
-    'Fetch Activity',
-    'Last Fetch',
-    'Fetched',
+    '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() → 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 === 'Maintenance')
+  const classHeader = $all('th').find(header => header.textContent === 'maintenance')
   t.true(classHeader?.getAttribute('title')?.includes('local-exact'))
   const classBadge = $all('span').find(element => element.textContent === 'local-exact')
   t.true(classBadge?.getAttribute('title')?.includes('merge directly'))
@@ -1286,7 +1288,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
   const eventHeaders = $all('[aria-label="Figbird devtools"] [style*="position: sticky"]').at(
     -1,
   )?.textContent
-  t.true(eventHeaders?.includes('GroupServiceOperationScopeStatusDetails'))
+  t.true(eventHeaders?.includes('groupserviceoperationscopestatusdetails'))
   const realtimeEventRow = $all('[title="Select event details"]').find(row =>
     row.textContent?.includes('realtime'),
   )

From 6af00c47be18d82c168d4419da7625079d47458c Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 15:04:45 +0100
Subject: [PATCH 39/42] Improve devtools runtime performance

---
 extensions/src/panel.tsx               |  38 +-
 extensions/src/protocol.ts             |  31 +-
 extensions/src/remote.ts               |  58 ++-
 lib/core/cappedBuffer.ts               |  19 +-
 lib/core/devtoolsBridge.ts             |  64 +++-
 lib/devtools/CacheTab.tsx              |  46 ++-
 lib/devtools/EventsTab.tsx             |  20 +-
 lib/devtools/JsonViewer.tsx            |  62 ++-
 lib/devtools/QueriesTab.tsx            |  55 +--
 lib/devtools/TimelineActivityTable.tsx | 113 +++++-
 lib/devtools/TimelineTab.tsx           |   2 +
 lib/devtools/collector.ts              | 506 +++++++++++++++++++++----
 lib/devtools/eventModel.ts             |  17 +-
 lib/devtools/payloadRetention.ts       | 113 ++++++
 lib/devtools/timelineModel.ts          | 113 ++++--
 test/devtools.test.tsx                 |   7 +-
 16 files changed, 1022 insertions(+), 242 deletions(-)
 create mode 100644 lib/devtools/payloadRetention.ts

diff --git a/extensions/src/panel.tsx b/extensions/src/panel.tsx
index 8ef97638..e1f937c5 100644
--- a/extensions/src/panel.tsx
+++ b/extensions/src/panel.tsx
@@ -7,26 +7,48 @@ import { ExtensionSession } from './remote.js'
 
 function Panel() {
   const session = useMemo(() => new ExtensionSession(), [])
-  const collector = useMemo(() => createCollector(session.figbird, { heartbeatMs: 0 }), [session])
+  const collector = useMemo(
+    () => createCollector(session.figbird, { heartbeatMs: 0, snapshotValues: false }),
+    [session],
+  )
   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()
+        session.figbird.reset()
+        collector.reset()
+      }
+    }
+    const updateFromDocument = () => {
+      documentVisible = document.visibilityState !== 'hidden'
+      applyVisibility()
+    }
+    panelWindow[PANEL_VISIBILITY_CALLBACK] = visible => {
+      hostVisible = visible
+      applyVisibility()
     }
-    const updateFromDocument = () => setVisible(document.visibilityState !== 'hidden')
-    panelWindow[PANEL_VISIBILITY_CALLBACK] = setVisible
-    updateFromDocument()
+    applyVisibility()
     document.addEventListener('visibilitychange', updateFromDocument)
     return () => {
       document.removeEventListener('visibilitychange', updateFromDocument)
       delete panelWindow[PANEL_VISIBILITY_CALLBACK]
       session.stop()
+      session.figbird.reset()
+      collector.reset()
     }
-  }, [session])
+  }, [collector, session])
 
   useEffect(() => session.subscribeReset(() => collector.reset()), [collector, session])
 
diff --git a/extensions/src/protocol.ts b/extensions/src/protocol.ts
index 9b8f6dec..32921fea 100644
--- a/extensions/src/protocol.ts
+++ b/extensions/src/protocol.ts
@@ -6,14 +6,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
 }
 
@@ -26,7 +26,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'
@@ -48,12 +48,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
-      ? ({ ...envelope.read, cache: envelope.read.cache ?? [] } as unknown as DevtoolsWireRead)
-      : null,
+    read: envelope.read ? (envelope.read as unknown as DevtoolsWireRead) : null,
     version: envelope.version,
   }
 }
@@ -80,15 +78,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 331744a0..81b2db95 100644
--- a/extensions/src/remote.ts
+++ b/extensions/src/remote.ts
@@ -7,7 +7,8 @@ import type { FigbirdLikeForDevtools } 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>
@@ -68,6 +69,7 @@ class RemoteFigbird implements FigbirdLikeForDevtools {
   update(read: DevtoolsWireRead): void {
     this.#pending = this.#pending
       ? {
+          ...this.#pending,
           ...read,
           events: [...this.#pending.events, ...read.events],
         }
@@ -109,20 +111,28 @@ class RemoteFigbird implements FigbirdLikeForDevtools {
     const read = this.#pending
     this.#pending = null
     if (!read) return
-    this.#queries = read.queries.map(query => ({
-      ...query,
-      fetchedAt: query.fetchedAt,
-      query: query.query,
-    }))
-    this.#cache = read.cache
-    this.#relational = read.relational
-    this.#mutations = read.inFlightMutations
+    const stateChanged = Boolean(read.queries || read.cache || read.relational)
+    const mutationsChanged = read.inFlightMutations !== undefined
+    if (read.queries) {
+      this.#queries = read.queries.map(query => ({
+        ...query,
+        fetchedAt: query.fetchedAt,
+        query: query.query,
+      }))
+    }
+    if (read.cache) this.#cache = read.cache
+    if (read.relational) this.#relational = read.relational
+    if (read.inFlightMutations) 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()
+    if (stateChanged) {
+      for (const listener of this.#stateListeners) listener(undefined)
+    }
+    if (mutationsChanged) {
+      for (const listener of this.#mutatingListeners) listener()
+    }
   }
 }
 
@@ -179,13 +189,16 @@ export class ExtensionSession {
   start(): void {
     if (this.#timer) return
     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.#generation++
-    if (this.#timer) clearInterval(this.#timer)
+    if (this.#timer) clearTimeout(this.#timer)
     this.#timer = null
     this.#version = null
     this.figbird.cancelPending()
@@ -196,8 +209,12 @@ export class ExtensionSession {
   }
 
   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()`))
@@ -229,7 +246,10 @@ export class ExtensionSession {
         return
       }
       this.#version = poll.version
-      if (poll.read) this.figbird.update(poll.read)
+      if (poll.read) {
+        nextDelay = ACTIVE_POLL_INTERVAL_MS
+        this.figbird.update(poll.read)
+      }
       await this.inspection.refresh()
     } catch {
       if (generation !== this.#generation) return
@@ -238,9 +258,17 @@ export class ExtensionSession {
       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)
+  }
+
   #resetConnection(): void {
     const hadConnection = this.#connection !== null || this.#version !== null
     this.#connection = null
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 17215ad7..ee587005 100644
--- a/lib/core/devtoolsBridge.ts
+++ b/lib/core/devtoolsBridge.ts
@@ -6,7 +6,7 @@ import { CappedBuffer } from './cappedBuffer.js'
 
 const BRIDGE_KEY = '__FIGBIRD_DEVTOOLS__'
 const SESSION_TIMEOUT_MS = 5_000
-const EVENT_LIMIT = 1_000
+const EVENT_LIMIT = 250
 
 interface DevtoolsSource {
   events: FigbirdEvents
@@ -44,34 +44,38 @@ 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[]
+  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
+  mutationsDirty: boolean
+  queriesDirty: boolean
+  relationalDirty: boolean
   source: DevtoolsSource
   unsubscribe: () => void
   version: number
 }
 
 interface DevtoolsPageBridge {
-  protocol: 2
+  protocol: 2 | 3
   connect(instanceId?: number): DevtoolsBridgeConnection | null
   disconnect(sessionId: string): void
   editCacheEntityJson(
@@ -116,7 +120,7 @@ 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 &&
@@ -148,7 +152,7 @@ function createPageBridge(): DevtoolsPageBridge {
   }
 
   return {
-    protocol: 2,
+    protocol: 3,
 
     register(source) {
       instances.set(nextInstanceId++, new WeakRef(source))
@@ -161,8 +165,12 @@ function createPageBridge(): DevtoolsPageBridge {
       const [resolvedId, source] = instance
       const sessionId = `${Date.now().toString(36)}-${nextSessionId++}`
       const session: DevtoolsBridgeSession = {
+        cacheDirty: true,
         events: new CappedBuffer(EVENT_LIMIT),
         expires: null,
+        mutationsDirty: true,
+        queriesDirty: true,
+        relationalDirty: true,
         source,
         unsubscribe: () => {},
         version: 1,
@@ -170,10 +178,18 @@ function createPageBridge(): DevtoolsPageBridge {
       const unsubscribers = [
         source.events.subscribe(event => {
           session.events.push(event)
+          if (event.kind === 'cache:updated') session.cacheDirty = true
+          session.version++
+        }),
+        source.mutating.subscribe(() => {
+          session.mutationsDirty = 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()
@@ -183,7 +199,7 @@ function createPageBridge(): DevtoolsPageBridge {
       return {
         instanceCount: instances.size,
         instanceId: resolvedId,
-        protocol: 2,
+        protocol: 3,
         sessionId,
       }
     },
@@ -202,6 +218,9 @@ function createPageBridge(): DevtoolsPageBridge {
           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) {
@@ -219,17 +238,24 @@ function createPageBridge(): DevtoolsPageBridge {
       if (version === session.version) {
         return `{"protocol":2,"version":${session.version},"read":null}`
       }
-      return serializeWireEnvelope({
-        protocol: 2,
+      const serialized = serializeWireEnvelope({
+        protocol: 3,
         version: session.version,
         read: {
-          cache: session.source.inspectCache(),
+          ...(session.cacheDirty ? { cache: session.source.inspectCache() } : {}),
           events: session.events.drain().map(toWireEvent),
-          inFlightMutations: session.source.mutating.getSnapshot(),
-          queries: session.source.inspect(),
-          relational: session.source.inspectRelational(),
+          ...(session.mutationsDirty
+            ? { inFlightMutations: session.source.mutating.getSnapshot() }
+            : {}),
+          ...(session.queriesDirty ? { queries: session.source.inspect() } : {}),
+          ...(session.relationalDirty ? { relational: session.source.inspectRelational() } : {}),
         },
       })
+      session.cacheDirty = false
+      session.mutationsDirty = false
+      session.queriesDirty = false
+      session.relationalDirty = false
+      return serialized
     },
   }
 }
diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 8b1d7f6f..1abe686d 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -80,19 +80,29 @@ export function CacheTab({
   const [columnWidths, onColumnResizeStart] = useResizableColumns(CACHE_COLUMNS)
   const [detailsWidth, onDetailsResizeStart] = useDetailsPaneWidth()
   const tableWidth = columnWidths.reduce((sum, width) => sum + width, 0)
-  const serviceSizes = useMemo(
+  const cacheRows = useMemo(
     () =>
-      new Map(
-        orderedServices.map(item => [
-          item.serviceName,
-          item.entities.reduce(
-            (total, entity) => total + (estimateSerializedBytes(entity.value) ?? 0),
-            0,
-          ),
-        ]),
+      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)
 
   useEffect(() => {
@@ -115,15 +125,14 @@ export function CacheTab({
   }, [onRequestedEntityHandled, orderedServices, requestedEntity])
 
   const normalizedFilter = filter.trim().toLowerCase()
-  const entries = orderedServices
-    .filter(service => serviceName === null || service.serviceName === serviceName)
-    .flatMap(service => service.entities.map(entity => ({ service, entity })))
-    .filter(({ service, entity }) => {
+  const entries = cacheRows
+    .filter(row => serviceName === null || row.service.serviceName === serviceName)
+    .filter(({ service, entity, preview }) => {
       if (!normalizedFilter) return true
       return [
         service.serviceName,
         entity.id,
-        compactJson(entity.value),
+        preview,
         entity.queryIds.join(' '),
         entity.lastChange?.source ?? 'initial snapshot',
         entity.lastChange?.type ?? '',
@@ -281,10 +290,9 @@ export function CacheTab({
                   </td>
                 </tr>
               ) : null}
-              {entries.map(({ service, entity }) => {
+              {entries.map(({ service, entity, preview, estimatedSize }) => {
                 const key = cacheEntityKey(service.serviceName, entity.id)
                 const isSelected = key === selectedKey
-                const estimatedSize = estimateSerializedBytes(entity.value)
                 return (
                   <tr
                     key={key}
@@ -300,6 +308,8 @@ export function CacheTab({
                     style={{
                       cursor: 'pointer',
                       outline: 'none',
+                      contentVisibility: 'auto',
+                      containIntrinsicSize: '0 33px',
                       background: isSelected ? colors.activeButtonBg : undefined,
                       boxShadow: isSelected ? `inset 3px 0 ${colors.blue}` : undefined,
                     }}
@@ -312,7 +322,7 @@ export function CacheTab({
                     </td>
                     <td style={styles.td}>
                       <code
-                        title={prettyJson(entity.value)}
+                        title={preview}
                         style={{
                           ...styles.code,
                           display: 'block',
@@ -322,7 +332,7 @@ export function CacheTab({
                           color: colors.muted,
                         }}
                       >
-                        {compactJson(entity.value)}
+                        {preview}
                       </code>
                     </td>
                     <td style={styles.td}>
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index 2029e057..0454443b 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -67,12 +67,12 @@ export function EventsTab({
   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),
-    [events, scopes, traceIndex],
+    () => buildActivities(events, traceIndex, scopes, normalizedFilter.length > 0),
+    [events, normalizedFilter, scopes, traceIndex],
   )
-  const normalizedFilter = filter.toLowerCase()
   const rows: EventListRow[] =
     visibility === 'groups'
       ? activities.filter(activity =>
@@ -179,6 +179,8 @@ export function EventsTab({
                 ...styles.eventRow,
                 gridTemplateColumns,
                 minWidth: gridMinWidth,
+                contentVisibility: 'auto',
+                containIntrinsicSize: '0 33px',
                 cursor: 'pointer',
                 outline: 'none',
                 background: item.id === selectedEventId ? colors.activeButtonBg : undefined,
@@ -266,7 +268,7 @@ function EventDetails({
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const queryId = group?.queryId ?? eventQueryId(item.event)
-  const payload = eventPayload(item.event)
+  const payload = item.payloadState === 'evicted' ? undefined : eventPayload(item.event)
   return (
     <DetailsPane
       title={group?.kind ?? item.event.kind}
@@ -325,7 +327,15 @@ function EventDetails({
         ) : null}
       </DetailStats>
       <DetailBlock>
-        <JsonViewer value={payload} label={eventPayloadLabel(item.event)} emptyLabel='No payload' />
+        <JsonViewer
+          value={payload}
+          label={eventPayloadLabel(item.event)}
+          emptyLabel={
+            item.payloadState === 'evicted'
+              ? 'Payload vacuumed to keep the recording bounded'
+              : 'No payload'
+          }
+        />
       </DetailBlock>
       {relatedEvents && relatedEvents.length > 1 ? (
         <DetailSection label={relatedLabel ?? 'Related raw events'}>
diff --git a/lib/devtools/JsonViewer.tsx b/lib/devtools/JsonViewer.tsx
index d2e43e8d..f5cc7a78 100644
--- a/lib/devtools/JsonViewer.tsx
+++ b/lib/devtools/JsonViewer.tsx
@@ -10,6 +10,13 @@ interface SpecialValue {
   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',
@@ -326,7 +333,9 @@ 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))
@@ -340,27 +349,58 @@ function normalizeJson(
   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)
+    return normalizeJson({ name: value.name, message: value.message }, ancestors, depth + 1, budget)
   }
 
   ancestors.add(value)
   let normalized: JsonTreeValue
   if (Array.isArray(value)) {
-    normalized = value.map(item => normalizeJson(item, ancestors, depth + 1))
+    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) {
-    normalized = Object.fromEntries(
-      [...value].map(([key, item]) => [String(key), normalizeJson(item, ancestors, depth + 1)]),
-    )
+    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) {
-    normalized = [...value].map(item => normalizeJson(item, ancestors, depth + 1))
+    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 {
-      normalized = Object.fromEntries(
-        Object.entries(value).map(([key, item]) => [
+      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(item, ancestors, depth + 1),
-        ]),
-      )
+          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]')
     }
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index e7fd6901..8da2f46c 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -107,6 +107,7 @@ export function QueriesTab({
   const { colors, styles } = useDevtoolsTheme()
   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
@@ -123,31 +124,33 @@ export function QueriesTab({
       ) {
         return []
       }
-      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(filter.toLowerCase())) 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) => {
@@ -228,6 +231,8 @@ export function QueriesTab({
                   }}
                   style={{
                     cursor: 'pointer',
+                    contentVisibility: 'auto',
+                    containIntrinsicSize: '0 33px',
                     background: isSelected ? colors.activeButtonBg : colors.bg,
                     boxShadow: isSelected ? `inset 3px 0 ${colors.blue}` : undefined,
                     outline: 'none',
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index a8be42e2..b77b9969 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -10,7 +10,11 @@ import { formatClock, formatMs } from './format.js'
 import { JsonViewer } from './JsonViewer.js'
 import type { TimelineRange } from './TimelineOverview.js'
 import { TimelineOverview } from './TimelineOverview.js'
-import type { TimelineActivity, TimelineExtent } from './timelineModel.js'
+import {
+  timelineActivityMatchesFilter,
+  type TimelineActivity,
+  type TimelineExtent,
+} from './timelineModel.js'
 import {
   Badge,
   ColumnResizeHandle,
@@ -57,6 +61,8 @@ export function TimelineActivityTable({
   onQuerySelect,
   onCacheEntitySelect,
   onTraceSelect,
+  evictedCount = 0,
+  payloadsEvicted = 0,
 }: {
   activities: readonly TimelineActivity[]
   extent: TimelineExtent | null
@@ -71,6 +77,8 @@ export function TimelineActivityTable({
   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)
@@ -92,7 +100,7 @@ export function TimelineActivityTable({
     ) {
       return false
     }
-    return normalizedFilter ? activity.searchText.includes(normalizedFilter) : true
+    return timelineActivityMatchesFilter(activity, normalizedFilter)
   })
   const rows = range
     ? filteredActivities.filter(activity => intersects(activity, range, nowPoint))
@@ -298,6 +306,8 @@ export function TimelineActivityTable({
         <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}
         <span>{formatMs(displayExtent.end - displayExtent.start)} window</span>
         <span style={{ marginLeft: 'auto' }}>
           {range ? (
@@ -363,6 +373,8 @@ function ActivityRow({
       style={{
         cursor: 'pointer',
         outline: 'none',
+        contentVisibility: 'auto',
+        containIntrinsicSize: '0 33px',
         background: selected ? colors.activeButtonBg : undefined,
         boxShadow: selected ? `inset 3px 0 ${colors.blue}` : undefined,
       }}
@@ -579,35 +591,104 @@ function ActivityDetails({
       {activity.write ? (
         <>
           <DetailBlock>
-            <JsonViewer value={activity.write.payload} label='Payload' emptyLabel='No payload' />
+            <JsonViewer
+              value={activity.write.argsState === 'evicted' ? undefined : activity.write.payload}
+              label='Payload'
+              emptyLabel={
+                activity.write.argsState === 'evicted'
+                  ? 'Original payload vacuumed to keep the recording bounded'
+                  : 'No payload'
+              }
+            />
           </DetailBlock>
           <DetailBlock>
-            <JsonViewer value={activity.write.args} label='Arguments' />
+            <JsonViewer
+              value={activity.write.argsState === 'evicted' ? undefined : activity.write.args}
+              label='Arguments'
+              emptyLabel={
+                activity.write.argsState === 'evicted'
+                  ? 'Original arguments vacuumed to keep the recording bounded'
+                  : 'No arguments'
+              }
+            />
           </DetailBlock>
+          {activity.write.argsState === '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 ? (
+          {activity.payload !== undefined || activity.payloadState === 'evicted' ? (
+            <DetailBlock>
+              <JsonViewer
+                value={activity.payload}
+                label='Parameters at fetch time'
+                emptyLabel='Original parameters vacuumed to keep the recording bounded'
+              />
+            </DetailBlock>
+          ) : null}
+          {activity.payloadState === 'evicted' && activity.livePayload !== undefined ? (
             <DetailBlock>
-              <JsonViewer value={activity.payload} label='Parameters' />
+              <JsonViewer value={activity.livePayload} label='Current query parameters' />
             </DetailBlock>
           ) : null}
           <DetailBlock>
             <JsonViewer
-              value={activity.data}
-              label='Current query data — not captured at fetch time'
-              emptyLabel='No query data captured'
+              value={
+                activity.dataState === undefined
+                  ? activity.liveData
+                  : activity.dataState === 'evicted'
+                    ? undefined
+                    : activity.data
+              }
+              label={activity.dataState ? 'Response data at fetch time' : 'Current query data'}
+              emptyLabel={
+                activity.dataState === 'evicted'
+                  ? 'Original response vacuumed to keep the recording bounded'
+                  : 'No query data available'
+              }
             />
           </DetailBlock>
+          {activity.dataState === 'evicted' && activity.liveData !== undefined ? (
+            <DetailBlock>
+              <JsonViewer
+                value={activity.liveData}
+                label={
+                  activity.dataState === 'evicted'
+                    ? 'Current query data — original response vacuumed'
+                    : 'Current query data'
+                }
+              />
+            </DetailBlock>
+          ) : null}
         </>
       ) : activity.kind === 'realtime' ? (
-        <DetailBlock>
-          <JsonViewer
-            value={activity.payload}
-            label='Realtime payload'
-            emptyLabel='No realtime payload captured'
-          />
-        </DetailBlock>
+        <>
+          <DetailBlock>
+            <JsonViewer
+              value={activity.payloadState === 'evicted' ? undefined : activity.payload}
+              label='Realtime payload'
+              emptyLabel={
+                activity.payloadState === 'evicted'
+                  ? 'Original payload vacuumed to keep the recording bounded'
+                  : 'No realtime payload captured'
+              }
+            />
+          </DetailBlock>
+          {activity.payloadState === 'evicted' && activity.livePayload !== undefined ? (
+            <DetailBlock>
+              <JsonViewer
+                value={activity.livePayload}
+                label='Current cached entity — original payload vacuumed'
+              />
+            </DetailBlock>
+          ) : null}
+        </>
       ) : activity.kind === 'connection' ? (
         <DetailBlock>
           <JsonViewer
diff --git a/lib/devtools/TimelineTab.tsx b/lib/devtools/TimelineTab.tsx
index 5c14bc34..2149c725 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -93,6 +93,8 @@ export function TimelineTab({
         visibility={visibility}
         follow={follow}
         onFollowChange={onFollowChange}
+        evictedCount={snapshot.timeline.evictedCount ?? 0}
+        payloadsEvicted={snapshot.timeline.payloadsEvicted ?? 0}
         {...(requestedActivityId ? { requestedActivityId } : {})}
         {...(onRequestedActivityHandled ? { onRequestedActivityHandled } : {})}
         {...(onQuerySelect ? { onQuerySelect } : {})}
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index ff800ae2..b9b46731 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -8,6 +8,7 @@ import type {
 } from '../core/figbird.js'
 import { CappedBuffer } from '../core/cappedBuffer.js'
 import { now } from './format.js'
+import { PayloadRetention, type PayloadHandle } from './payloadRetention.js'
 
 export interface FigbirdLikeForDevtools {
   events: FigbirdEvents
@@ -21,11 +22,17 @@ export interface FigbirdLikeForDevtools {
 interface CollectorOptions {
   eventLimit?: number
   heartbeatMs?: number
+  payloadLimit?: number
+  payloadNodeLimit?: number
   queryHistoryLimit?: number
+  snapshotValues?: boolean
   spanLimit?: number
+  timelineLimit?: number
   writeLimit?: number
 }
 
+export type PayloadRetentionState = 'retained' | 'evicted'
+
 export interface QuerySpan {
   startAt: number
   endAt?: number
@@ -33,6 +40,10 @@ export interface QuerySpan {
   fetchId?: number
   reason?: string
   traceIds?: number[]
+  params?: unknown
+  paramsState?: PayloadRetentionState
+  result?: unknown
+  resultState?: PayloadRetentionState
 }
 
 export interface QueryRecord extends Omit<
@@ -60,12 +71,17 @@ export interface DevtoolsEvent {
   at: number
   wallAt: number
   event: FigbirdEvent
+  payloadState?: PayloadRetentionState
 }
 
 export interface TimelineRealtimeEvent {
   at: number
   serviceName: string
   traceId?: number
+  type?: Extract<FigbirdEvent, { kind: 'realtime' }>['type']
+  itemId?: string | number
+  payload?: unknown
+  payloadState?: PayloadRetentionState
 }
 
 type ConnectionFigbirdEvent = Extract<
@@ -87,9 +103,12 @@ export interface TimelineConnectionEvent {
 
 export interface DevtoolsTimeline {
   startedAt: number
+  /** Kept for protocol compatibility; the current table no longer needs lane state. */
   laneOrder: string[]
   realtime: TimelineRealtimeEvent[]
   connection: TimelineConnectionEvent[]
+  evictedCount?: number
+  payloadsEvicted?: number
 }
 
 export interface WriteRecord {
@@ -108,6 +127,7 @@ export interface WriteRecord {
   rolledBack?: boolean
   error?: string
   args?: readonly unknown[]
+  argsState?: PayloadRetentionState
   traceId?: number
 }
 
@@ -197,6 +217,50 @@ 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
+    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: [] }
+    default:
+      return event
+  }
+}
+
 function snapshotValue<T>(value: T): T {
   if (typeof structuredClone !== 'function') return value
   try {
@@ -304,9 +368,9 @@ function toPublicQueryRecord(record: InternalQueryRecord): QueryRecord {
     errorCount: metrics.errorCount,
     ...(metrics.lastDurationMs !== undefined ? { lastDurationMs: metrics.lastDurationMs } : {}),
     totalDurationMs: metrics.totalDurationMs,
-    spans: [...metrics.spans.toArray(), ...metrics.activeSpans.values()].sort(
-      (a, b) => a.startAt - b.startAt,
-    ),
+    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 } : {}),
@@ -320,8 +384,12 @@ export function createCollector(
   return new FigbirdCollector(figbird, {
     eventLimit: options.eventLimit ?? 500,
     heartbeatMs: options.heartbeatMs ?? 5_000,
+    payloadLimit: options.payloadLimit ?? 200,
+    payloadNodeLimit: options.payloadNodeLimit ?? 20_000,
     queryHistoryLimit: options.queryHistoryLimit ?? 250,
+    snapshotValues: options.snapshotValues ?? true,
     spanLimit: options.spanLimit ?? 50,
+    timelineLimit: options.timelineLimit ?? 2_000,
     writeLimit: options.writeLimit ?? 250,
   })
 }
@@ -329,8 +397,12 @@ export function createCollector(
 interface ResolvedCollectorOptions {
   eventLimit: number
   heartbeatMs: number
+  payloadLimit: number
+  payloadNodeLimit: number
   queryHistoryLimit: number
+  snapshotValues: boolean
   spanLimit: number
+  timelineLimit: number
   writeLimit: number
 }
 
@@ -338,14 +410,25 @@ 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
   #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
@@ -356,17 +439,23 @@ class FigbirdCollector implements Collector {
 
   #queries: Map<string, InternalQueryRecord> = new Map()
   #relational: Map<string, InternalRelationalQuery> = new Map()
+  #cache: DevtoolsCacheService[] = []
   #events: CappedBuffer<DevtoolsEvent>
   #timelineRealtime: CappedBuffer<TimelineRealtimeEvent>
   #timelineConnection: CappedBuffer<TimelineConnectionEvent>
   #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[] }>()
+  #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[]>()
+  #writePayloadHandles = new Map<string, PayloadHandle>()
 
   readonly eventLimit: number
 
@@ -374,24 +463,31 @@ class FigbirdCollector implements Collector {
     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.#refreshRelational()
+    this.#refreshCache()
+    this.#sourceStateDirty = false
     this.#eventUnsub = this.#figbird.events.subscribe(event => {
       this.#recordEvent(event)
       this.#scheduleNotify()
     })
     this.#stateUnsub =
       this.#figbird.subscribeToStateChanges?.(() => {
+        this.#sourceStateDirty = true
         this.#scheduleNotify()
       }) ?? null
     this.#mutationUnsub =
@@ -399,7 +495,10 @@ class FigbirdCollector implements Collector {
         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()
   }
@@ -425,8 +524,13 @@ class FigbirdCollector implements Collector {
 
   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) => {
@@ -437,26 +541,18 @@ class FigbirdCollector implements Collector {
         return `${a.serviceName}:${a.queryId}`.localeCompare(`${b.serviceName}:${b.queryId}`)
       })
     const writes = Array.from(this.#writes.values()).sort((a, b) => a.startedAt - b.startedAt)
-    const cache = (this.#figbird.inspectCache?.() ?? []).map(service => ({
-      ...service,
-      entities: service.entities.map(entity => ({
-        ...entity,
-        value: snapshotValue(entity.value),
-        ...(this.#cacheProvenance.has(`${service.serviceName}:${entity.id}`)
-          ? { lastChange: this.#cacheProvenance.get(`${service.serviceName}:${entity.id}`)! }
-          : {}),
-      })),
-    }))
     this.#snapshot = {
-      cache,
+      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(),
+        evictedCount: this.#timelineEvictedCount,
+        payloadsEvicted: this.#timelinePayloadsEvicted,
       },
       writes,
     }
@@ -465,17 +561,26 @@ class FigbirdCollector implements Collector {
   }
 
   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.#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()) {
@@ -488,20 +593,28 @@ class FigbirdCollector implements Collector {
   reset(): void {
     this.#queries.clear()
     this.#relational.clear()
+    this.#cache = []
     this.#events.clear()
     this.#timelineRealtime.clear()
     this.#timelineConnection.clear()
     this.#timelineStartedAt = now()
-    this.#timelineLaneOrder = []
-    this.#timelineLaneIds.clear()
+    this.#timelineEvictedCount = 0
+    this.#timelinePayloadsEvicted = 0
     this.#nextEventId = 1
     this.#realtimeByService.clear()
     this.#writes.clear()
     this.#cacheProvenance.clear()
     this.#fetchTraces.clear()
+    this.#sourceStateDirty = true
+    this.#payloads.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
@@ -517,39 +630,57 @@ class FigbirdCollector implements Collector {
 
   #clearSettledWrites(): void {
     for (const [id, write] of this.#writes) {
-      if (write.status !== 'in-flight') this.#writes.delete(id)
+      if (write.status === 'in-flight') continue
+      this.#payloads.release(this.#writePayloadHandles.get(id))
+      this.#writePayloadHandles.delete(id)
+      this.#writes.delete(id)
     }
   }
 
   #recordEvent(event: FigbirdEvent): void {
     const at = now()
-    this.#events.push({
+    const capturedEvent = this.#captureEvent(event)
+    const captured: DevtoolsEvent = {
       id: this.#nextEventId++,
       at,
       wallAt: Date.now(),
-      event: this.#captureEvent(event),
-    })
+      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)
         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,
-          ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
-        })
+        {
+          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: capturedEvent.item, payloadState: 'retained' as const }),
+          }
+          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':
@@ -557,23 +688,33 @@ class FigbirdCollector implements Collector {
       case 'connection:reconnected':
       case 'connection:error':
       case 'connection:reconnect-failed':
-        this.#recordTimelineLane('connection')
-        this.#timelineConnection.push({ at, event: this.#captureConnectionEvent(event) })
-        break
-      case 'cache:updated':
-        if (event.traceId !== undefined) {
-          this.#cacheProvenance.set(`${event.serviceName}:${String(event.itemId)}`, {
+        if (
+          this.#timelineConnection.push({
             at,
-            wallAt: Date.now(),
-            source: event.source,
-            traceId: event.traceId,
-            type: event.type,
+            event: this.#captureConnectionEvent(capturedEvent),
           })
+        ) {
+          this.#timelineEvictedCount++
+        }
+        break
+      case 'cache:updated':
+        this.#sourceStateDirty = true
+        if (capturedEvent.traceId !== undefined) {
+          this.#cacheProvenance.set(
+            `${capturedEvent.serviceName}:${String(capturedEvent.itemId)}`,
+            {
+              at,
+              wallAt: Date.now(),
+              source: capturedEvent.source,
+              traceId: capturedEvent.traceId,
+              type: capturedEvent.type,
+            },
+          )
         }
         break
       case 'reconcile:started':
         {
-          const record = this.#queries.get(event.queryId)
+          const record = this.#queries.get(capturedEvent.queryId)
           if (record) record.metrics.reconciles++
         }
         break
@@ -582,20 +723,37 @@ 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 {
@@ -607,8 +765,8 @@ class FigbirdCollector implements Collector {
       const existing = this.#queries.get(row.queryId)
       const capturedRow = {
         ...row,
-        query: snapshotValue(row.query),
-        ...(row.data === undefined ? {} : { data: snapshotValue(row.data) }),
+        query: this.#captureValue(row.query),
+        ...(row.data === undefined ? {} : { data: this.#captureValue(row.data) }),
       }
       const capturedState = queryState(capturedRow)
       const record =
@@ -626,6 +784,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
     }
@@ -639,6 +802,8 @@ class FigbirdCollector implements Collector {
       .sort((a, b) => a.lastObservedAt - b.lastObservedAt)
     for (const record of removable) {
       if (this.#queries.size <= this.#queryHistoryLimit) break
+      for (const span of record.metrics.spans.toArray()) this.#releaseSpanPayloads(span)
+      for (const span of record.metrics.activeSpans.values()) this.#releaseSpanPayloads(span)
       this.#queries.delete(record.lastKnown.queryId)
     }
   }
@@ -650,10 +815,16 @@ class FigbirdCollector implements Collector {
     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))
@@ -664,6 +835,28 @@ class FigbirdCollector implements Collector {
     }
   }
 
+  #refreshCache(): void {
+    const inspectedCache = this.#figbird.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
@@ -672,13 +865,26 @@ class FigbirdCollector implements Collector {
       this.#fetchTraces.set(event.fetchId, {
         ...(event.reason ? { reason: event.reason } : {}),
         traceIds,
+        startedAt: at,
       })
-      record.metrics.activeSpans.set(event.fetchId, {
+      const span: QuerySpan = {
         startAt: Math.max(at, this.#timelineStartedAt),
         fetchId: event.fetchId,
         ...(event.reason ? { reason: event.reason } : {}),
         ...(traceIds.length > 0 ? { traceIds } : {}),
-      })
+        ...(event.params === undefined
+          ? {}
+          : { params: event.params, paramsState: 'retained' as const }),
+      }
+      if (event.params !== undefined) {
+        this.#retainSpanPayload(span, event.params, () => {
+          span.params = undefined
+          span.paramsState = 'evicted'
+        })
+      }
+      const replaced = record.metrics.activeSpans.get(event.fetchId)
+      if (replaced) this.#releaseSpanPayloads(replaced)
+      record.metrics.activeSpans.set(event.fetchId, span)
     }
     const current = {
       ...record.current,
@@ -753,15 +959,37 @@ class FigbirdCollector implements Collector {
     const observedStartAt = at - event.durationMs
     const startAt = Math.max(observedStartAt, this.#timelineStartedAt)
     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)
-    metrics.spans.push({
+    const span: QuerySpan = {
+      ...activeSpan,
       startAt,
       endAt: at,
       ok,
       ...(event.fetchId === undefined ? {} : { fetchId: event.fetchId }),
       ...(trace?.reason ? { reason: trace.reason } : {}),
       ...(trace && trace.traceIds.length > 0 ? { traceIds: trace.traceIds } : {}),
-    })
+    }
+    const inspectedResult = ok
+      ? this.#figbird
+          .inspect()
+          .find(query => query.queryId === event.queryId && query.generation === event.generation)
+          ?.data
+      : undefined
+    if (inspectedResult !== undefined) {
+      span.result = this.#captureValue(inspectedResult)
+      span.resultState = 'retained'
+      this.#retainSpanPayload(span, span.result, () => {
+        span.result = undefined
+        span.resultState = 'evicted'
+      })
+    }
+    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
@@ -877,7 +1105,7 @@ class FigbirdCollector implements Collector {
   }
 
   #captureArgs(args: readonly unknown[]): readonly unknown[] {
-    return snapshotValue(args)
+    return this.#captureValue(args)
   }
 
   #captureEvent(event: FigbirdEvent): FigbirdEvent {
@@ -885,10 +1113,16 @@ 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: snapshotValue(event.item) }
+        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':
@@ -928,6 +1162,129 @@ class FigbirdCollector implements Collector {
     return { ...event }
   }
 
+  #retainEventPayload(item: DevtoolsEvent): void {
+    const payload = payloadForRetention(item.event)
+    if (payload === undefined) return
+    item.payloadState = 'retained'
+    const handle = this.#payloads.retain(payload, () => {
+      item.event = eventWithoutPayload(item.event)
+      item.payloadState = 'evicted'
+      this.#scheduleNotify()
+    })
+    this.#eventPayloadHandles.set(item, handle)
+  }
+
+  #retainRealtimePayload(item: TimelineRealtimeEvent): void {
+    if (item.payload === undefined) return
+    const handle = this.#payloads.retain(item.payload, () => {
+      item.payload = undefined
+      item.payloadState = 'evicted'
+      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)
+  }
+
+  #retainWriteArgs(id: string): void {
+    const write = this.#writes.get(id)
+    if (!write?.args) return
+    this.#payloads.release(this.#writePayloadHandles.get(id))
+    write.argsState = 'retained'
+    const handle = this.#payloads.retain(write.args, () => {
+      const current = this.#writes.get(id)
+      if (!current) return
+      const { args: _args, ...metadata } = current
+      void _args
+      this.#writes.set(id, { ...metadata, argsState: 'evicted' })
+      this.#timelinePayloadsEvicted++
+      this.#scheduleNotify()
+    })
+    this.#writePayloadHandles.set(id, handle)
+  }
+
+  #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.#payloads.release(this.#writePayloadHandles.get(oldest.id))
+        this.#writePayloadHandles.delete(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)
+    }
+  }
+
   #trimWrites(): void {
     if (this.#writes.size <= this.#writeLimit) return
     const settled = [...this.#writes.values()]
@@ -935,7 +1292,10 @@ class FigbirdCollector implements Collector {
       .sort((a, b) => a.startedAt - b.startedAt)
     for (const write of settled) {
       if (this.#writes.size <= this.#writeLimit) break
+      this.#payloads.release(this.#writePayloadHandles.get(write.id))
+      this.#writePayloadHandles.delete(write.id)
       this.#writes.delete(write.id)
+      this.#timelineEvictedCount++
     }
   }
 }
diff --git a/lib/devtools/eventModel.ts b/lib/devtools/eventModel.ts
index c131273f..82cbf452 100644
--- a/lib/devtools/eventModel.ts
+++ b/lib/devtools/eventModel.ts
@@ -119,6 +119,7 @@ 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) {
@@ -161,7 +162,11 @@ export function buildActivities(
           lifecycle.status,
           details,
           ...group.events.map(item =>
-            eventSearchText(item, scopes?.get(eventQueryId(item.event) ?? '')),
+            eventSearchText(
+              item,
+              scopes?.get(eventQueryId(item.event) ?? ''),
+              includePayloadSearch,
+            ),
           ),
         ]
           .join(' ')
@@ -412,8 +417,11 @@ function traceIdsFromCauses(
   return causes?.flatMap(cause => (cause.traceId === undefined ? [] : [cause.traceId])) ?? []
 }
 
-export function eventSearchText(item: DevtoolsEvent, scopes?: readonly EventQueryScope[]): string {
-  const payload = eventPayload(item.event)
+export function eventSearchText(
+  item: DevtoolsEvent,
+  scopes?: readonly EventQueryScope[],
+  includePayload = true,
+): string {
   const status = eventStatus(item.event).status
   return [
     formatClock(item.wallAt, { milliseconds: true }),
@@ -424,8 +432,7 @@ export function eventSearchText(item: DevtoolsEvent, scopes?: readonly EventQuer
     eventQueryId(item.event) ?? '',
     ...(scopes?.map(scope => scope.label) ?? []),
     eventDetails(item),
-    payload === undefined ? '' : compactJson(payload),
-    compactJson(displayEvent(item.event)),
+    includePayload ? compactJson(displayEvent(item.event)) : '',
   ].join(' ')
 }
 
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
index de53208a..feae00db 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -1,5 +1,11 @@
 import type { FigbirdEvent } from '../core/events.js'
-import type { DevtoolsEvent, DevtoolsSnapshot, QueryRecord, WriteRecord } from './collector.js'
+import type {
+  DevtoolsEvent,
+  DevtoolsSnapshot,
+  PayloadRetentionState,
+  QueryRecord,
+  WriteRecord,
+} from './collector.js'
 import { buildTraceIndex, displayEvent, traceIdsForEvent } from './eventModel.js'
 import { compactJson, formatMs } from './format.js'
 import type { DevtoolsModel } from './model.js'
@@ -29,13 +35,18 @@ export interface TimelineActivity {
   entity?: { serviceName: string; itemId: string | number }
   durationMs?: number
   payload?: unknown
+  payloadState?: PayloadRetentionState
+  livePayload?: unknown
   data?: unknown
+  dataState?: PayloadRetentionState
+  liveData?: unknown
   write?: {
     id: string
     type: WriteRecord['type']
     optimistic: boolean
     payload: unknown
     args: readonly unknown[]
+    argsState?: PayloadRetentionState
     initiatingAction?: {
       id: string
       name: string
@@ -65,6 +76,7 @@ export function buildTimelineActivities(
     ),
     ...buildWriteActivities(
       snapshot.writes.filter(write => write.startedAt >= snapshot.timeline.startedAt),
+      snapshot,
     ),
   ]
   return activities.sort((a, b) => a.startAt - b.startAt || a.id.localeCompare(b.id))
@@ -85,7 +97,6 @@ export function timelineExtent(
 interface EventContext {
   fetchStarts: ReadonlyMap<number, DevtoolsEvent>
   fetchTerminals: ReadonlyMap<number, DevtoolsEvent>
-  realtime: ReadonlyMap<string, DevtoolsEvent>
   traceEvents: ReadonlyMap<number, readonly DevtoolsEvent[]>
 }
 
@@ -93,7 +104,6 @@ function buildEventContext(events: readonly DevtoolsEvent[]): EventContext {
   const traceIndex = buildTraceIndex(events)
   const fetchStarts = new Map<number, DevtoolsEvent>()
   const fetchTerminals = new Map<number, DevtoolsEvent>()
-  const realtime = new Map<string, DevtoolsEvent>()
   const traceEvents = new Map<number, DevtoolsEvent[]>()
   for (const item of events) {
     const event = item.event
@@ -106,14 +116,13 @@ function buildEventContext(events: readonly DevtoolsEvent[]): EventContext {
     ) {
       fetchTerminals.set(event.fetchId, item)
     }
-    if (event.kind === 'realtime') realtime.set(realtimeKey(item.at, event.serviceName), item)
     for (const traceId of traceIdsForEvent(event, traceIndex)) {
       const related = traceEvents.get(traceId) ?? []
       related.push(item)
       traceEvents.set(traceId, related)
     }
   }
-  return { fetchStarts, fetchTerminals, realtime, traceEvents }
+  return { fetchStarts, fetchTerminals, traceEvents }
 }
 
 function buildFetchActivities(
@@ -164,11 +173,18 @@ function buildFetchActivities(
           ? 'pending'
           : `${itemCount ?? 0} ${itemCount === 1 ? 'row' : 'rows'}`
       const payload =
-        start?.event.kind === 'fetch:start'
-          ? start.event.params
-          : query.method === 'get'
-            ? query.resourceId
-            : query.query
+        span.paramsState === 'retained'
+          ? span.params
+          : start?.event.kind === 'fetch:start' && start.payloadState !== 'evicted'
+            ? start.event.params
+            : undefined
+      const payloadState: PayloadRetentionState | undefined =
+        payload !== undefined
+          ? 'retained'
+          : span.paramsState === 'evicted' || start?.payloadState === 'evicted'
+            ? 'evicted'
+            : undefined
+      const livePayload = query.method === 'get' ? query.resourceId : query.query
       return searchable({
         id: `fetch:${span.fetchId ?? `${query.queryId}:${span.startAt}:${index}`}`,
         kind: 'fetch',
@@ -189,7 +205,11 @@ function buildFetchActivities(
         ...(traceId === undefined ? {} : { traceId }),
         durationMs,
         ...(payload === undefined ? {} : { payload }),
-        ...(query.data === undefined ? {} : { data: query.data }),
+        ...(payloadState ? { payloadState } : {}),
+        ...(query.present && livePayload !== undefined ? { livePayload } : {}),
+        ...(span.result === undefined ? {} : { data: span.result }),
+        ...(span.resultState ? { dataState: span.resultState } : {}),
+        ...(query.present && query.data !== undefined ? { liveData: query.data } : {}),
         error: failed,
       })
     }),
@@ -201,8 +221,6 @@ function buildRealtimeActivities(
   context: EventContext,
 ): TimelineActivity[] {
   return snapshot.timeline.realtime.map((item, index) => {
-    const raw = context.realtime.get(realtimeKey(item.at, item.serviceName))
-    const event = raw?.event.kind === 'realtime' ? raw.event : undefined
     const traceEvents =
       item.traceId === undefined ? [] : (context.traceEvents.get(item.traceId) ?? [])
     const queryIds = affectedQueryIds(traceEvents)
@@ -215,8 +233,8 @@ function buildRealtimeActivities(
       startAt: item.at,
       endAt: item.at,
       label: item.serviceName,
-      operation: normalizeRealtimeOperation(event?.type),
-      detail: event?.itemId === undefined ? '' : `#${event.itemId}`,
+      operation: normalizeRealtimeOperation(item.type),
+      detail: item.itemId === undefined ? '' : `#${item.itemId}`,
       status: 'received',
       tone: 'blue',
       trigger: 'realtime event',
@@ -225,11 +243,17 @@ function buildRealtimeActivities(
       serviceName: item.serviceName,
       ...(queryIds.length > 0 ? { queryIds } : {}),
       ...(item.traceId === undefined ? {} : { traceId: item.traceId }),
-      ...(event?.itemId === undefined
+      ...(item.itemId === undefined
         ? {}
-        : { entity: { serviceName: item.serviceName, itemId: event.itemId } }),
+        : { entity: { serviceName: item.serviceName, itemId: item.itemId } }),
       durationMs: 0,
-      ...(event?.item === undefined ? {} : { payload: event.item }),
+      ...(item.payload === undefined ? {} : { payload: item.payload }),
+      ...(item.payloadState ? { payloadState: item.payloadState } : {}),
+      ...(item.itemId === undefined
+        ? {}
+        : {
+            livePayload: cachedEntityValue(snapshot, item.serviceName, item.itemId),
+          }),
       error: false,
     })
   })
@@ -292,7 +316,10 @@ function connectionActivity(
   })
 }
 
-function buildWriteActivities(writes: readonly WriteRecord[]): TimelineActivity[] {
+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>()
@@ -314,7 +341,7 @@ function buildWriteActivities(writes: readonly WriteRecord[]): TimelineActivity[
 
   return writes
     .filter(write => !collapsedActionIds.has(write.id))
-    .map(write => writeActivity(write, actionByMutationId.get(write.id)))
+    .map(write => writeActivity(write, snapshot, actionByMutationId.get(write.id)))
 }
 
 function actionContainsMutation(action: WriteRecord, mutation: WriteRecord): boolean {
@@ -324,7 +351,11 @@ function actionContainsMutation(action: WriteRecord, mutation: WriteRecord): boo
   return (mutation.endedAt ?? Infinity) <= action.endedAt
 }
 
-function writeActivity(write: WriteRecord, initiatingAction?: WriteRecord): TimelineActivity {
+function writeActivity(
+  write: WriteRecord,
+  snapshot: DevtoolsSnapshot,
+  initiatingAction?: WriteRecord,
+): TimelineActivity {
   const failed = write.status === 'error' || write.status === 'rollback'
   const status =
     write.status === 'in-flight'
@@ -371,12 +402,18 @@ function writeActivity(write: WriteRecord, initiatingAction?: WriteRecord): Time
       : { entity: { serviceName: write.serviceName, itemId: write.itemId } }),
     ...(write.traceId === undefined ? {} : { traceId: write.traceId }),
     ...(write.durationMs === undefined ? {} : { durationMs: write.durationMs }),
+    ...(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: writePayload(write),
       args: write.args ?? [],
+      ...(write.argsState ? { argsState: write.argsState } : {}),
       ...(initiatingAction && actionName
         ? {
             initiatingAction: {
@@ -492,10 +529,6 @@ function connectionDetail(event: Extract<FigbirdEvent, { kind: `connection:${str
   }
 }
 
-function realtimeKey(at: number, serviceName: string): string {
-  return `${at}:${serviceName}`
-}
-
 function searchable(activity: Omit<TimelineActivity, 'searchText'>): TimelineActivity {
   return {
     ...activity,
@@ -513,9 +546,6 @@ function searchable(activity: Omit<TimelineActivity, 'searchText'>): TimelineAct
       ...(activity.queryIds ?? []),
       activity.traceId === undefined ? '' : String(activity.traceId),
       activity.entity ? String(activity.entity.itemId) : '',
-      activity.payload === undefined ? '' : compactJson(activity.payload),
-      activity.data === undefined ? '' : compactJson(activity.data),
-      activity.write ? compactJson(activity.write.args) : '',
       activity.write?.id ?? '',
       activity.durationMs === undefined ? '' : formatMs(activity.durationMs),
     ]
@@ -523,3 +553,30 @@ function searchable(activity: Omit<TimelineActivity, 'searchText'>): TimelineAct
       .toLowerCase(),
   }
 }
+
+export function timelineActivityMatchesFilter(
+  activity: TimelineActivity,
+  normalizedFilter: string,
+): boolean {
+  if (!normalizedFilter) return true
+  if (activity.searchText.includes(normalizedFilter)) return true
+  return [
+    activity.payload,
+    activity.data,
+    activity.livePayload,
+    activity.liveData,
+    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/test/devtools.test.tsx b/test/devtools.test.tsx
index efab1afd..af87b052 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -159,8 +159,7 @@ test('collector records fetch spans and keeps event and timeline history indepen
   t.true(snapshot.events.every(event => event.wallAt !== undefined))
   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)
 
   collector.clearEvents()
@@ -841,7 +840,7 @@ 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(inspectCalls, 1)
   const unchanged = JSON.parse(bridgeState.readJson(connection!.sessionId, envelope.version)!)
@@ -1237,7 +1236,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
   t.true(selectedFetch?.textContent?.includes('success'))
   t.true(
     ($('[aria-label="Figbird devtools"]')?.textContent ?? '').includes(
-      'Current query data — not captured at fetch time',
+      'Response data at fetch time',
     ),
   )
   t.truthy($all('button').find(button => button.textContent?.includes('Open query root')))

From 3fc882ffc7e63219f092cfcf7613778262ec2d0c Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 22:25:14 +0100
Subject: [PATCH 40/42] Polish and harden devtools observability

---
 demo/src/components/DemoControls.tsx   |  22 ++
 demo/src/pages/IssueDetail/screen.tsx  |  10 +-
 extensions/src/panel.tsx               |  14 +-
 extensions/src/protocol.ts             |   7 +-
 extensions/src/remote.ts               |  46 +++-
 lib/core/devtoolsBridge.ts             | 313 +++++++++++++++++++++++-
 lib/core/errors.ts                     |  93 ++++++++
 lib/core/events.ts                     |  16 +-
 lib/core/figbird.ts                    |  15 +-
 lib/core/queryRef.ts                   |   9 +-
 lib/core/queryRoots.ts                 |  42 ++--
 lib/core/queryStore.ts                 | 162 +++++++++----
 lib/core/queryTypes.ts                 |  16 ++
 lib/core/relationalQuery.ts            | 125 +++++++++-
 lib/devtools/CacheTab.tsx              | 316 ++++++++++++++++++-------
 lib/devtools/Devtools.tsx              |  18 +-
 lib/devtools/EventsTab.tsx             |  32 ++-
 lib/devtools/JsonViewer.tsx            |  27 ++-
 lib/devtools/QueriesTab.tsx            |  31 +--
 lib/devtools/QueryDetails.tsx          | 236 +++++++++++-------
 lib/devtools/QueryPresentation.tsx     |  31 ++-
 lib/devtools/TimelineActivityTable.tsx | 291 ++++++++++++++++++++---
 lib/devtools/TimelineOverview.tsx      |  63 ++++-
 lib/devtools/TimelineTab.tsx           |   2 +-
 lib/devtools/collector.ts              | 182 ++++++++++++--
 lib/devtools/eventModel.ts             |  13 +-
 lib/devtools/model.ts                  |  21 +-
 lib/devtools/timelineModel.ts          | 104 +++++++-
 lib/devtools/ui.tsx                    | 206 +++++++++++++++-
 lib/react/useAction.ts                 |   3 +-
 test/devtools.test.tsx                 | 267 +++++++++++++++++++--
 test/relational-query.test.tsx         |  29 ++-
 32 files changed, 2306 insertions(+), 456 deletions(-)

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/src/panel.tsx b/extensions/src/panel.tsx
index e1f937c5..458dd74a 100644
--- a/extensions/src/panel.tsx
+++ b/extensions/src/panel.tsx
@@ -5,6 +5,13 @@ import { createCollector } 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(
@@ -28,7 +35,6 @@ function Panel() {
       } else {
         session.stop()
         session.figbird.reset()
-        collector.reset()
       }
     }
     const updateFromDocument = () => {
@@ -50,6 +56,12 @@ function Panel() {
     }
   }, [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])
 
   return (
diff --git a/extensions/src/protocol.ts b/extensions/src/protocol.ts
index 32921fea..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,
@@ -62,14 +63,12 @@ export function decodeEvent(event: DevtoolsWireEvent): FigbirdEvent {
     case 'mutate:error':
     case 'action:error':
     case 'connection:error': {
-      const error = new Error(event.error.message)
-      error.name = event.error.name
+      const error = errorFromDetails(event.error.details, event.error)
       return { ...event, error }
     }
     case 'connection:reconnect-failed': {
       if (!event.error) return event
-      const error = new Error(event.error.message)
-      error.name = event.error.name
+      const error = errorFromDetails(event.error.details, event.error)
       return { ...event, error }
     }
     default:
diff --git a/extensions/src/remote.ts b/extensions/src/remote.ts
index 81b2db95..edf251e5 100644
--- a/extensions/src/remote.ts
+++ b/extensions/src/remote.ts
@@ -143,7 +143,9 @@ export class ExtensionSession {
   #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
@@ -187,7 +189,8 @@ export class ExtensionSession {
   }
 
   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)
@@ -197,6 +200,7 @@ export class ExtensionSession {
   }
 
   stop(): void {
+    this.#running = false
     this.#generation++
     if (this.#timer) clearTimeout(this.#timer)
     this.#timer = null
@@ -208,6 +212,16 @@ export class ExtensionSession {
     if (sessionId) void this.#disconnect(sessionId)
   }
 
+  resetForNavigation(): void {
+    const restart = this.#running
+    this.stop()
+    this.#instanceId = null
+    this.figbird.reset()
+    this.inspection.reset()
+    for (const listener of this.#resetListeners) listener()
+    if (restart) this.start()
+  }
+
   async #poll(generation: number): Promise<void> {
     if (this.#polling) {
       if (generation === this.#generation) this.#schedulePoll(generation, ACTIVE_POLL_INTERVAL_MS)
@@ -226,12 +240,14 @@ export class ExtensionSession {
           this.#setStatus('Waiting for Figbird')
           return
         }
+        if (this.#instanceId !== null && connection.instanceId !== this.#instanceId) {
+          this.figbird.reset()
+          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)
@@ -240,12 +256,13 @@ export class ExtensionSession {
       )
       if (generation !== this.#generation) return
       if (!poll) {
-        this.#resetConnection()
+        this.#dropConnection()
         this.inspection.reset()
         this.#setStatus('Reconnecting')
         return
       }
       this.#version = poll.version
+      this.#setConnectedStatus(this.#connection)
       if (poll.read) {
         nextDelay = ACTIVE_POLL_INTERVAL_MS
         this.figbird.update(poll.read)
@@ -253,7 +270,6 @@ export class ExtensionSession {
       await this.inspection.refresh()
     } catch {
       if (generation !== this.#generation) return
-      this.#resetConnection()
       this.inspection.reset()
       this.#setStatus('Cannot inspect this page')
     } finally {
@@ -269,13 +285,17 @@ export class ExtensionSession {
     }, delay)
   }
 
-  #resetConnection(): void {
-    const hadConnection = this.#connection !== null || this.#version !== null
+  #dropConnection(): void {
     this.#connection = null
     this.#version = null
-    if (!hadConnection) return
-    this.figbird.reset()
-    for (const listener of this.#resetListeners) listener()
+  }
+
+  #setConnectedStatus(connection: DevtoolsBridgeConnection): void {
+    this.#setStatus(
+      connection.instanceCount > 1
+        ? `Connected · instance ${connection.instanceId} of ${connection.instanceCount}`
+        : 'Connected',
+    )
   }
 
   async #disconnect(sessionId: string): Promise<void> {
diff --git a/lib/core/devtoolsBridge.ts b/lib/core/devtoolsBridge.ts
index ee587005..a7fa213b 100644
--- a/lib/core/devtoolsBridge.ts
+++ b/lib/core/devtoolsBridge.ts
@@ -3,10 +3,19 @@ import type { InspectedCacheService, InspectedQuery } from './figbird.js'
 import type { InspectedRelationalQuery } from './relationalQuery.js'
 import type { InFlightMutation, MutationActivity } 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 = 250
+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
+let cachedStartupCaptureUntil = 0
 
 interface DevtoolsSource {
   events: FigbirdEvents
@@ -25,6 +34,7 @@ interface DevtoolsSource {
 export interface DevtoolsWireError {
   message: string
   name: string
+  details?: unknown
 }
 
 type ToWireEvent<E> = E extends unknown
@@ -74,6 +84,12 @@ interface DevtoolsBridgeSession {
   version: number
 }
 
+interface StartupCapture {
+  events: CappedBuffer<FigbirdEvent>
+  expires: ReturnType<typeof setTimeout>
+  unsubscribe: () => void
+}
+
 interface DevtoolsPageBridge {
   protocol: 2 | 3
   connect(instanceId?: number): DevtoolsBridgeConnection | null
@@ -135,15 +151,25 @@ function isPageBridge(value: unknown): value is DevtoolsPageBridge {
 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) => {
@@ -155,11 +181,22 @@ function createPageBridge(): DevtoolsPageBridge {
     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
@@ -194,6 +231,11 @@ function createPageBridge(): DevtoolsPageBridge {
       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 {
@@ -205,7 +247,11 @@ function createPageBridge(): DevtoolsPageBridge {
     },
 
     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) {
@@ -234,16 +280,18 @@ function createPageBridge(): DevtoolsPageBridge {
     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}`
       }
+      const pendingEvents = session.events.toArray()
       const serialized = serializeWireEnvelope({
         protocol: 3,
         version: session.version,
         read: {
           ...(session.cacheDirty ? { cache: session.source.inspectCache() } : {}),
-          events: session.events.drain().map(toWireEvent),
+          events: pendingEvents.map(toWireEvent),
           ...(session.mutationsDirty
             ? { inFlightMutations: session.source.mutating.getSnapshot() }
             : {}),
@@ -251,6 +299,7 @@ function createPageBridge(): DevtoolsPageBridge {
           ...(session.relationalDirty ? { relational: session.source.inspectRelational() } : {}),
         },
       })
+      session.events.clear()
       session.cacheDirty = false
       session.mutationsDirty = false
       session.queriesDirty = false
@@ -276,31 +325,273 @@ 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 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): DevtoolsWireEvent {
   switch (event.kind) {
+    case 'fetch:start':
+      return event.params === undefined
+        ? event
+        : { ...event, params: sanitizeDevtoolsPayload(event.params) }
+    case 'realtime':
+      return event.item === undefined
+        ? event
+        : { ...event, item: sanitizeDevtoolsPayload(event.item) }
+    case 'cache:updated':
+      return {
+        ...event,
+        item: sanitizeDevtoolsPayload(event.item),
+        previousItem:
+          event.previousItem === null ? null : sanitizeDevtoolsPayload(event.previousItem),
+      }
+    case 'mutate:start':
+    case 'mutate:update':
+    case 'action:start':
+      return event.args === undefined ? event : { ...event, args: sanitizeDevtoolsArgs(event.args) }
     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)),
+        },
       }
     case 'connection:reconnect-failed':
       return event.error
-        ? { ...event, error: { message: event.error.message, name: event.error.name } }
+        ? {
+            ...event,
+            error: {
+              message: event.error.message,
+              name: event.error.name,
+              details: sanitizeDevtoolsPayload(errorDetails(event.error)),
+            },
+          }
         : event
     default:
       return event
   }
 }
 
+interface PayloadBudget {
+  nodes: number
+  stringCharacters: number
+}
+
+function sanitizeDevtoolsArgs(args: readonly unknown[]): readonly unknown[] {
+  const sanitized = sanitizeDevtoolsPayload(args)
+  return Array.isArray(sanitized) ? sanitized : ['[Payload truncated]']
+}
+
+function sanitizeDevtoolsPayload(value: unknown): unknown {
+  return sanitizePayloadValue(value, 0, new Set<object>(), {
+    nodes: PAYLOAD_MAX_NODES,
+    stringCharacters: PAYLOAD_MAX_STRING_CHARACTERS,
+  })
+}
+
+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 3906bf05..b3af029e 100644
--- a/lib/core/events.ts
+++ b/lib/core/events.ts
@@ -1,5 +1,5 @@
-import type { EventType, TraceCause } from './queryTypes.js'
-export type { TraceCause } 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).
@@ -30,7 +30,7 @@ export interface CacheQueryEffect {
  * 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
@@ -41,6 +41,7 @@ export type FigbirdEvent =
       reason?: FetchReason
       attempt?: number
       causes?: readonly TraceCause[]
+      graph?: readonly QueryGraphRef[]
       resourceId?: string | number
       params?: unknown
     }
@@ -53,6 +54,7 @@ export type FigbirdEvent =
       fetchId?: number
       durationMs: number
       itemCount: number
+      graph?: readonly QueryGraphRef[]
     }
   | {
       kind: 'fetch:error'
@@ -63,6 +65,7 @@ export type FigbirdEvent =
       fetchId?: number
       durationMs: number
       error: Error
+      graph?: readonly QueryGraphRef[]
     }
   | {
       kind: 'reconcile:started'
@@ -202,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.
@@ -229,7 +236,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/figbird.ts b/lib/core/figbird.ts
index 3efa443a..907f499e 100644
--- a/lib/core/figbird.ts
+++ b/lib/core/figbird.ts
@@ -42,12 +42,18 @@ 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,
@@ -515,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(),
@@ -566,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()
@@ -982,6 +988,7 @@ export class Figbird<
           errorCount: stats?.errorCount ?? 0,
           ...(stats?.lastDurationMs !== undefined ? { lastDurationMs: stats.lastDurationMs } : {}),
           totalDurationMs: stats?.totalDurationMs ?? 0,
+          fetchHistory: stats?.history ?? [],
         })
       }
     }
@@ -1053,6 +1060,8 @@ 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 {
diff --git a/lib/core/queryRef.ts b/lib/core/queryRef.ts
index 060ec9f1..6ad8e66c 100644
--- a/lib/core/queryRef.ts
+++ b/lib/core/queryRef.ts
@@ -5,6 +5,7 @@ import type {
   ProcessedRealtimeEvent,
   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 */
diff --git a/lib/core/queryRoots.ts b/lib/core/queryRoots.ts
index 5f021876..a16771a7 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 { ProcessedRealtimeEvent, 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
@@ -269,6 +274,7 @@ export class PagedQueryRoot<
     }
     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 e80289bc..5639d62d 100644
--- a/lib/core/queryStore.ts
+++ b/lib/core/queryStore.ts
@@ -66,11 +66,14 @@ import {
   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
@@ -156,6 +159,11 @@ interface PublishedEventEffects {
 interface FetchContext {
   reason: Exclude<FetchReason, 'retry'>
   causes: TraceCause[]
+  graph?: QueryGraphRef[]
+}
+
+function graphRefKey(ref: QueryGraphRef): string {
+  return `${ref.operationId}\u0000${ref.runId}\u0000${ref.path}\u0000${ref.role ?? ''}`
 }
 
 type LaneAuthoritativeAcceptance =
@@ -166,8 +174,19 @@ 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
@@ -212,6 +231,7 @@ export class QueryStore<
   #nextTraceId = 1
   #nextFetchId = 1
   #followupFetchContexts = new Map<string, FetchContext>()
+  #activeFetchGraphs = new Map<string, Map<string, QueryGraphRef>>()
 
   #fetchEventJournal = new FetchEventJournal()
   #mutationLanes: MutationLanes<QueuedMutation>
@@ -448,7 +468,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 {
@@ -504,7 +524,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 () => {}
@@ -595,10 +615,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.#attachFetchGraph(queryId, options.graph)
+    }
+
     const staleTime = options.staleTime ?? 0
     const isFresh =
       staleTime > 0 && q.fetchedAt !== undefined && Date.now() - q.fetchedAt < staleTime
@@ -613,17 +637,23 @@ export class QueryStore<
       this.#queue(queryId, {
         reason: 'subscription',
         causes: [{ kind: 'subscription', traceId: this.#nextTraceId++ }],
+        ...(options.graph ? { graph: [options.graph] } : {}),
       })
     }
   }
 
   /** Refetch a specific query by id. */
-  refetch(queryId: string, context?: FetchContext): 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,
       causes: [{ kind: 'manual' as const, traceId: this.#nextTraceId++ }],
+      ...(options.graph ? { graph: [options.graph] } : {}),
     }
 
     if (!q.state.isFetching) {
@@ -936,7 +966,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
         }
@@ -1139,7 +1169,7 @@ export class QueryStore<
         return result
       },
       (err: unknown) => {
-        const error = err instanceof Error ? err : new Error(String(err))
+        const error = normalizeError(err)
         hooks?.onError?.(error, cause)
         this.#mutations.end(mutationId)
         this.#events.emit({
@@ -1165,41 +1195,57 @@ export class QueryStore<
       reason: 'subscription' as const,
       causes: [{ kind: 'subscription' as const, traceId: this.#nextTraceId++ }],
     }
+    const graph = new Map((fetchContext.graph ?? []).map(ref => [graphRefKey(ref), ref]))
+    this.#activeFetchGraphs.set(queryId, graph)
     this.#fetching({ queryId })
     const generation = this.#queryGenerations.get(queryId)
-    if (generation === undefined) return
+    if (generation === undefined) {
+      if (this.#activeFetchGraphs.get(queryId) === graph) this.#activeFetchGraphs.delete(queryId)
+      return
+    }
 
-    let retryAttempt = 0
-    while (true) {
-      const outcome = await this.#runFetchAttempt(queryId, generation, {
-        reason: retryAttempt === 0 ? fetchContext.reason : 'retry',
-        attempt: retryAttempt,
-        causes: fetchContext.causes,
-      })
-      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,
+            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 {
+      if (this.#activeFetchGraphs.get(queryId) === graph) {
+        this.#activeFetchGraphs.delete(queryId)
       }
     }
   }
@@ -1208,6 +1254,7 @@ export class QueryStore<
     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) {
@@ -1224,8 +1271,10 @@ export class QueryStore<
       params: query.desc.params,
     }
     const journalCursor = this.#fetchEventJournal.begin(trace.serviceName)
+    const graph = [...graphRefs.values()]
     this.#events.emit({
       kind: 'fetch:start',
+      timestamp: startedAt,
       serviceName: trace.serviceName,
       method: trace.method,
       queryId,
@@ -1234,13 +1283,15 @@ export class QueryStore<
       reason: context.reason,
       attempt: context.attempt,
       ...(context.causes.length > 0 ? { 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)
@@ -1255,13 +1306,20 @@ export class QueryStore<
             ...(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({
         kind: 'fetch:end',
+        timestamp: endedAt,
         serviceName: trace.serviceName,
         method: trace.method,
         queryId,
@@ -1269,19 +1327,28 @@ export class QueryStore<
         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({
         kind: 'fetch:error',
+        timestamp: endedAt,
         serviceName: trace.serviceName,
         method: trace.method,
         queryId,
@@ -1289,6 +1356,7 @@ export class QueryStore<
         fetchId,
         durationMs,
         error,
+        ...(graphRefs.size > 0 ? { graph: [...graphRefs.values()] } : {}),
       })
       return isCurrent ? { kind: 'failed', error } : { kind: 'stale' }
     } finally {
@@ -1296,6 +1364,12 @@ export class QueryStore<
     }
   }
 
+  #attachFetchGraph(queryId: string, ref: QueryGraphRef): void {
+    const refs = this.#activeFetchGraphs.get(queryId)
+    if (!refs) return
+    refs.set(graphRefKey(ref), ref)
+  }
+
   #shouldRetry(query: Query<unknown, TMeta, unknown>, retryAttempt: number, error: Error): boolean {
     const retry = this.#normalizeRetry(query.config.retry ?? this.#retry)
     return (
@@ -1790,20 +1864,20 @@ export class QueryStore<
     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],
     })
   }
 
diff --git a/lib/core/queryTypes.ts b/lib/core/queryTypes.ts
index 36bd96c5..3f504bd2 100644
--- a/lib/core/queryTypes.ts
+++ b/lib/core/queryTypes.ts
@@ -31,6 +31,22 @@ export type TraceCause =
   | { 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
  */
diff --git a/lib/core/relationalQuery.ts b/lib/core/relationalQuery.ts
index f8c2585a..f4281071 100644
--- a/lib/core/relationalQuery.ts
+++ b/lib/core/relationalQuery.ts
@@ -10,6 +10,7 @@ import type {
   ProcessedRealtimeEvent,
   QueryConfig,
   QueryDescriptor,
+  QueryGraphRef,
   ServiceState,
 } from './queryTypes.js'
 import {
@@ -169,6 +170,10 @@ export interface InspectedRelationalQuery {
   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'
@@ -201,6 +206,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
@@ -214,6 +222,10 @@ export class RelationalQueryRef<
   #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()
+  #listenerSources: Map<
+    (state: RelationalQueryState<T>) => void,
+    'subscriber' | 'prepare' | 'prefetch'
+  > = new Map()
   #processedEventUnsub: (() => void) | null = null
   #relationalFilterRefetchQueued = false
   // Strictest active subscriber freshness tolerance — applied to newly-created
@@ -253,6 +265,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.
@@ -320,6 +336,7 @@ export class RelationalQueryRef<
       }
     }
     const snapshot = this.getSnapshot()
+    const listenerSources = [...this.#listenerSources.values()]
     return {
       key: this.#queryId,
       ...(this.#name ? { name: this.#name } : {}),
@@ -327,6 +344,9 @@ export class RelationalQueryRef<
       ast: this.#ast,
       ...(this.#pagedRoot ? { pagination: this.#pagedRoot.inspectPagination() } : {}),
       ...(snapshot.status === 'success' ? { data: snapshot.data } : {}),
+      subscriberCount: listenerSources.filter(source => source === 'subscriber').length,
+      prefetchCount: listenerSources.filter(source => source === 'prefetch').length,
+      prepareCount: listenerSources.filter(source => source === 'prepare').length,
       nodes,
     }
   }
@@ -375,18 +395,33 @@ 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
+    const claimsColdStart = this.#coldStartAwaitingSubscriber
     this.#listeners.add(fn)
     this.#listenerStaleTimes.set(fn, staleTime)
+    this.#listenerSources.set(fn, 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
@@ -394,6 +429,7 @@ export class RelationalQueryRef<
     return () => {
       this.#listeners.delete(fn)
       this.#listenerStaleTimes.delete(fn)
+      this.#listenerSources.delete(fn)
       this.#staleTime = this.#currentStaleTime()
       this.#root?.setStaleTime(this.#staleTime)
 
@@ -417,11 +453,29 @@ export class RelationalQueryRef<
     return staleTime
   }
 
+  #beginGraphRun(): string {
+    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)
+    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 {
@@ -429,16 +483,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
@@ -799,36 +865,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)
@@ -867,7 +945,8 @@ export class RelationalQueryRef<
                 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,
@@ -879,6 +958,7 @@ export class RelationalQueryRef<
               ? 'reconcile'
               : 'merge-or-reconcile',
         staleTime: this.#staleTime,
+        ...(rootGraph ? { graph: rootGraph } : {}),
         makePageRef: (pageIndex, after) =>
           this.#query(
             sequential
@@ -921,6 +1001,7 @@ export class RelationalQueryRef<
         ...(cursorRealtime ? { cursorRealtime } : {}),
       })
       this.#root = this.#pagedRoot
+      this.#scheduleGraphRunCompletion(this.getSnapshot())
       return
     }
 
@@ -939,7 +1020,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',
@@ -954,7 +1036,9 @@ export class RelationalQueryRef<
       onRows,
       onChange,
       staleTime: this.#staleTime,
+      ...(rootGraph ? { graph: rootGraph } : {}),
     })
+    this.#scheduleGraphRunCompletion(this.getSnapshot())
   }
 
   /**
@@ -1078,6 +1162,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 })
@@ -1142,7 +1227,7 @@ export class RelationalQueryRef<
           }
           this.#notifyListeners()
         },
-        { staleTime: this.#staleTime },
+        { staleTime: this.#staleTime, graph: this.#graph(key) },
       )
 
       entry.children.set(sourceValueKey(sourceValue), { queryRef, unsub, sourceValue })
@@ -1230,6 +1315,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',
@@ -1454,6 +1540,19 @@ export class RelationalQueryRef<
     for (const listener of this.#listeners) {
       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
+    })
   }
 
   /**
@@ -1503,6 +1602,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.
@@ -1537,6 +1637,7 @@ export class RelationalQueryRef<
     this.#resolveSuspense = null
     this.#rejectSuspense = null
     this.#suspenseSettled = false
+    this.#coldStartAwaitingSubscriber = false
     this.#onEvict?.()
   }
 }
diff --git a/lib/devtools/CacheTab.tsx b/lib/devtools/CacheTab.tsx
index 1abe686d..c6087e53 100644
--- a/lib/devtools/CacheTab.tsx
+++ b/lib/devtools/CacheTab.tsx
@@ -1,9 +1,12 @@
 import {
   useEffect,
+  useLayoutEffect,
   useMemo,
+  useRef,
   useState,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
+  type RefObject,
 } from 'react'
 import {
   compactJson,
@@ -42,6 +45,11 @@ const CACHE_COLUMNS = [
 
 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(
@@ -77,6 +85,7 @@ export function CacheTab({
   )
   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)
@@ -104,6 +113,7 @@ export function CacheTab({
     [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
@@ -125,59 +135,96 @@ export function CacheTab({
   }, [onRequestedEntityHandled, orderedServices, requestedEntity])
 
   const normalizedFilter = filter.trim().toLowerCase()
-  const entries = 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 }),
-    )
+  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: 190,
-          flex: '0 0 190px',
+          width: CACHE_SERVICE_SIDEBAR_WIDTH,
+          flex: `0 0 ${CACHE_SERVICE_SIDEBAR_WIDTH}px`,
           overflow: 'auto',
           borderRight: `1px solid ${colors.border}`,
           background: colors.toolbar,
         }}
       >
         <div
-          title={CACHE_SIZE_DESCRIPTION}
+          data-tooltip={CACHE_SIZE_DESCRIPTION}
           style={{
             padding: '8px 10px',
             color: colors.muted,
             fontWeight: 650,
             borderBottom: `1px solid ${colors.border}`,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
           }}
         >
-          <span>Normalized cache</span>
-          <code style={{ ...styles.code, color: colors.faint, marginLeft: 'auto' }}>
-            {formatBytes(totalSize)}
-          </code>
+          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'
@@ -188,9 +235,14 @@ export function CacheTab({
           style={cacheServiceButtonStyle(colors, serviceName === null)}
         >
           <span>All services</span>
-          <span style={{ color: colors.faint, marginLeft: 'auto' }}>
-            {orderedServices.reduce((count, item) => count + item.entities.length, 0)}
+          <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
@@ -204,58 +256,52 @@ export function CacheTab({
               }}
               style={cacheServiceButtonStyle(colors, selectedService)}
             >
-              <span style={{ display: 'flex', alignItems: 'center', gap: 6, width: '100%' }}>
-                <strong
-                  style={{
-                    minWidth: 0,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {item.serviceName}
-                </strong>
-                <span
-                  style={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: 5,
-                    color: colors.faint,
-                    marginLeft: 'auto',
-                  }}
-                >
-                  {item.entities.length}
-                  <span aria-hidden='true'>·</span>
-                  <span title={CACHE_SIZE_DESCRIPTION}>
-                    {formatBytes(serviceSizes.get(item.serviceName) ?? 0)}
-                  </span>
-                  {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>
+              <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 style={{ ...styles.scroll, flex: 1, minWidth: 0 }}>
+      <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>
         ) : (
@@ -271,7 +317,9 @@ export function CacheTab({
                   <th
                     key={column.label}
                     style={{ ...styles.th, position: 'sticky' }}
-                    {...(column.label === 'est. size' ? { title: CACHE_SIZE_DESCRIPTION } : {})}
+                    {...(column.label === 'est. size'
+                      ? { 'data-tooltip': CACHE_SIZE_DESCRIPTION }
+                      : {})}
                   >
                     {column.label}
                     <ColumnResizeHandle
@@ -290,7 +338,10 @@ export function CacheTab({
                   </td>
                 </tr>
               ) : null}
-              {entries.map(({ service, entity, preview, estimatedSize }) => {
+              {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 (
@@ -308,8 +359,7 @@ export function CacheTab({
                     style={{
                       cursor: 'pointer',
                       outline: 'none',
-                      contentVisibility: 'auto',
-                      containIntrinsicSize: '0 33px',
+                      height: CACHE_ROW_HEIGHT,
                       background: isSelected ? colors.activeButtonBg : undefined,
                       boxShadow: isSelected ? `inset 3px 0 ${colors.blue}` : undefined,
                     }}
@@ -318,11 +368,12 @@ export function CacheTab({
                       <span style={{ fontWeight: 600 }}>{service.serviceName}</span>
                     </td>
                     <td style={styles.td}>
-                      <code style={{ ...styles.code, fontWeight: 650 }}>#{entity.id}</code>
+                      <code style={styles.code}>#{entity.id}</code>
                     </td>
                     <td style={styles.td}>
                       <code
-                        title={preview}
+                        data-tooltip={preview}
+                        data-tooltip-overflow=''
                         style={{
                           ...styles.code,
                           display: 'block',
@@ -337,7 +388,7 @@ export function CacheTab({
                     </td>
                     <td style={styles.td}>
                       <code
-                        title={
+                        data-tooltip={
                           estimatedSize === null
                             ? 'This value could not be JSON-serialized.'
                             : `${estimatedSize.toLocaleString()} estimated UTF-8 JSON bytes`
@@ -357,7 +408,9 @@ export function CacheTab({
                     <td style={styles.td}>
                       {entity.lastChange ? (
                         <span
-                          title={formatClock(entity.lastChange.wallAt, { milliseconds: true })}
+                          data-tooltip={formatClock(entity.lastChange.wallAt, {
+                            milliseconds: true,
+                          })}
                           style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
                         >
                           <Badge
@@ -376,6 +429,9 @@ export function CacheTab({
                   </tr>
                 )
               })}
+              {virtualRows.paddingBottom > 0 ? (
+                <CacheTableSpacer height={virtualRows.paddingBottom} />
+              ) : null}
             </tbody>
           </table>
         )}
@@ -398,6 +454,75 @@ export function CacheTab({
   )
 }
 
+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,
@@ -472,7 +597,7 @@ function CacheEntityDetails({
           {entity.queryIds.length} query{' '}
           {entity.queryIds.length === 1 ? 'membership' : 'memberships'}
         </span>
-        <code title={CACHE_SIZE_DESCRIPTION} style={{ ...styles.code, color: colors.muted }}>
+        <code data-tooltip={CACHE_SIZE_DESCRIPTION} style={{ ...styles.code, color: colors.muted }}>
           {formatEstimatedSize(entity.value)}
         </code>
         <span style={styles.spacer} />
@@ -636,14 +761,19 @@ function CacheEntityDetails({
               <button
                 key={item.queryId}
                 type='button'
-                title={`Open ${item.label} in Queries`}
+                data-tooltip={`Open ${item.label} in Queries`}
                 onClick={() => onViewQuery(item.queryId)}
                 style={{ ...style, cursor: 'pointer' }}
               >
                 {content}
               </button>
             ) : (
-              <div key={item.queryId} title={item.queryId} style={style}>
+              <div
+                key={item.queryId}
+                data-tooltip={item.queryId}
+                data-tooltip-overflow=''
+                style={style}
+              >
                 {content}
               </div>
             )
@@ -687,8 +817,10 @@ function cacheEntityKey(serviceName: string, entityId: string): string {
 function cacheServiceButtonStyle(colors: DevtoolsColors, selected: boolean): CSSProperties {
   return {
     width: '100%',
-    display: 'flex',
+    display: 'grid',
+    gridTemplateColumns: CACHE_SERVICE_GRID,
     alignItems: 'center',
+    gap: 4,
     border: 0,
     borderBottom: `1px solid ${colors.rowBorder}`,
     borderLeft: `3px solid ${selected ? colors.blue : 'transparent'}`,
diff --git a/lib/devtools/Devtools.tsx b/lib/devtools/Devtools.tsx
index e2e83b63..1139b110 100644
--- a/lib/devtools/Devtools.tsx
+++ b/lib/devtools/Devtools.tsx
@@ -1,4 +1,4 @@
-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, operationIsInactive, operationIsRetained } from './QueriesTab.js'
@@ -8,6 +8,7 @@ import type { Collector, QuerySpan } from './collector.js'
 import { buildDevtoolsModel } from './model.js'
 import {
   ThemeContext,
+  TooltipLayer,
   buttonStyle,
   darkColors,
   lightColors,
@@ -82,6 +83,7 @@ export function FigbirdDevtoolsPanel({
     itemId: string | number
   } | null>(null)
   const [timelineFollow, setTimelineFollow] = useState(true)
+  const panelRef = useRef<HTMLElement>(null)
 
   const inspectFetch = useCallback((span: QuerySpan) => {
     if (span.fetchId !== undefined) {
@@ -159,6 +161,7 @@ export function FigbirdDevtoolsPanel({
   return (
     <ThemeContext.Provider value={themeValue}>
       <section
+        ref={panelRef}
         data-figbird-devtools='panel'
         aria-label='Figbird devtools'
         style={{
@@ -170,6 +173,7 @@ export function FigbirdDevtoolsPanel({
           boxShadow: 'none',
         }}
       >
+        <TooltipLayer rootRef={panelRef} />
         <header style={styles.header}>
           <span style={styles.brand}>figbird</span>
           {(['queries', 'timeline', 'events', 'cache'] as const).map(item => (
@@ -185,7 +189,6 @@ export function FigbirdDevtoolsPanel({
               />
               <select
                 aria-label='Query visibility'
-                title='Choose live, inactive cached, retained history, skipped, or all queries'
                 value={queryVisibility}
                 onChange={event => setQueryVisibility(event.currentTarget.value as QueryVisibility)}
                 style={styles.select}
@@ -209,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>
@@ -218,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
@@ -257,7 +260,6 @@ export function FigbirdDevtoolsPanel({
               />
               <select
                 aria-label='Timeline visibility'
-                title='Choose which activity types appear in the timeline and overview'
                 value={timelineVisibility}
                 onChange={event =>
                   setTimelineVisibility(event.currentTarget.value as TimelineVisibility)
@@ -285,7 +287,7 @@ export function FigbirdDevtoolsPanel({
               />
               <select
                 aria-label='Event visibility'
-                title='Causal groups connect related work; Raw events shows the instrumentation stream'
+                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}
@@ -305,7 +307,7 @@ export function FigbirdDevtoolsPanel({
           ) : null}
           {tab === 'events' ? (
             <span
-              title='The oldest event is discarded when the bounded buffer is full'
+              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
@@ -450,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 0454443b..b31a7d46 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -160,10 +160,10 @@ export function EventsTab({
           return (
             <div
               key={row.key}
+              data-event-row=''
               role='button'
               tabIndex={0}
               aria-pressed={item.id === selectedEventId}
-              title='Select event details'
               onClick={() => {
                 setSelectedEventId(item.id)
                 onSelectedTraceIdChange?.(row.traceId ?? null)
@@ -206,7 +206,8 @@ export function EventsTab({
                   textOverflow: 'ellipsis',
                   whiteSpace: 'nowrap',
                 }}
-                title={row.details}
+                data-tooltip={row.details}
+                data-tooltip-overflow=''
               >
                 {row.details}
               </span>
@@ -237,7 +238,10 @@ export function EventsTab({
           }
           width={detailsWidth}
           onResizeStart={onDetailsResizeStart}
-          onClose={() => setSelectedEventId(null)}
+          onClose={() => {
+            setSelectedEventId(null)
+            onSelectedTraceIdChange?.(null)
+          }}
           onSelectEvent={eventId => setSelectedEventId(eventId)}
         />
       ) : null}
@@ -365,7 +369,8 @@ function EventDetails({
                 </code>
                 <strong style={{ fontWeight: 600 }}>{traceEvent.event.kind}</strong>
                 <span
-                  title={eventDetails(traceEvent)}
+                  data-tooltip={eventDetails(traceEvent)}
+                  data-tooltip-overflow=''
                   style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
                 >
                   {eventDetails(traceEvent)}
@@ -410,7 +415,7 @@ function EventScopeBadge({
   const badge = (
     <Badge
       tone={tone}
-      title={[...scopes.map(item => item.title), queryId ? `query id: ${queryId}` : '']
+      tooltip={[...scopes.map(item => item.title), queryId ? `query id: ${queryId}` : '']
         .filter(Boolean)
         .join('\n')}
     >
@@ -420,7 +425,7 @@ function EventScopeBadge({
   return queryId && onViewQuery ? (
     <button
       type='button'
-      title={`Open query ${queryId}`}
+      data-tooltip={`Open query ${queryId}`}
       onClick={event => {
         event.stopPropagation()
         onViewQuery(queryId)
@@ -444,7 +449,8 @@ function EllipsisValue({ value, code = false }: { value: string; code?: boolean
   const { colors, styles } = useDevtoolsTheme()
   return (
     <span
-      title={value}
+      data-tooltip={value}
+      data-tooltip-overflow=''
       style={{
         ...(code ? styles.code : {}),
         color: colors.muted,
@@ -467,7 +473,16 @@ function EventStatus({
 }) {
   const { colors } = useDevtoolsTheme()
   return (
-    <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: toneColor(colors, tone) }}>
+    <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' }}
@@ -490,7 +505,6 @@ function EventKind({ kind }: { kind: string }) {
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
       }}
-      title={kind}
     >
       {kind}
     </span>
diff --git a/lib/devtools/JsonViewer.tsx b/lib/devtools/JsonViewer.tsx
index f5cc7a78..43969e14 100644
--- a/lib/devtools/JsonViewer.tsx
+++ b/lib/devtools/JsonViewer.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState, type ReactNode } from 'react'
-import { buttonStyle, useDevtoolsTheme } from './ui.js'
+import { buttonStyle, copyText, useDevtoolsTheme } from './ui.js'
 
 type JsonPrimitive = null | boolean | number | string
 type JsonTreeValue =
@@ -33,7 +33,18 @@ export function JsonViewer({
   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 (
@@ -90,6 +101,20 @@ export function JsonViewer({
             {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'
diff --git a/lib/devtools/QueriesTab.tsx b/lib/devtools/QueriesTab.tsx
index 8da2f46c..0084d430 100644
--- a/lib/devtools/QueriesTab.tsx
+++ b/lib/devtools/QueriesTab.tsx
@@ -22,6 +22,8 @@ export function operationIsInactive(operation: DevtoolsOperation): boolean {
   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)
   )
 }
@@ -120,6 +122,8 @@ export function QueriesTab({
       if (
         visibility === 'active' &&
         query.subscriberCount === 0 &&
+        (query.prefetchCount ?? 0) === 0 &&
+        (query.prepareCount ?? 0) === 0 &&
         operation.underlying.every(item => item.query.subscriberCount === 0)
       ) {
         return []
@@ -192,7 +196,7 @@ export function QueriesTab({
                 <th
                   key={column.label}
                   style={{ ...styles.th, position: 'sticky' }}
-                  title={column.description}
+                  data-tooltip={column.description}
                 >
                   {column.label}
                   <ColumnResizeHandle
@@ -221,7 +225,6 @@ export function QueriesTab({
                   key={operation.key}
                   tabIndex={0}
                   aria-selected={isSelected}
-                  title='Select query details'
                   onClick={() => onSelectedQueryIdChange(operationRootQueryId(operation))}
                   onKeyDown={event => {
                     if (event.key === 'Enter' || event.key === ' ') {
@@ -261,7 +264,7 @@ export function QueriesTab({
                       </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
@@ -271,23 +274,14 @@ export function QueriesTab({
                   </td>
                   <td style={styles.td}>
                     <code
-                      title={queryOperationTitle(operation)}
-                      style={{ ...styles.code, color: colors.text, fontWeight: 600 }}
+                      data-tooltip={queryOperationTooltip(operation)}
+                      style={{ ...styles.code, color: colors.text }}
                     >
                       {queryOperationName(operation)}
                     </code>
                   </td>
                   <td style={{ ...styles.td, maxWidth: 420 }}>
                     <span
-                      title={[
-                        plan,
-                        operation.composition?.title,
-                        query.query === undefined
-                          ? undefined
-                          : `Parameters\n${JSON.stringify(query.query, null, 2)}`,
-                      ]
-                        .filter(Boolean)
-                        .join('\n\n')}
                       style={{
                         ...ellipsizedCode,
                         color: definition === '—' ? colors.faint : colors.text,
@@ -370,10 +364,10 @@ function queryOperationName(operation: DevtoolsOperation): string {
   return operationCall.split('(')[0] ?? operation.summary.method
 }
 
-function queryOperationTitle(operation: DevtoolsOperation): string {
+function queryOperationTooltip(operation: DevtoolsOperation): string | undefined {
   const logical = queryOperationName(operation)
   return logical === operation.summary.method
-    ? `Query operation and request method: ${logical}`
+    ? undefined
     : `Query operation: ${logical}\nRequest method: ${operation.summary.method}`
 }
 
@@ -401,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>
@@ -425,7 +420,6 @@ function QueryLastTiming({ query }: { query: QuerySummary }) {
 
   return (
     <span
-      title={`total ${formatMs(query.totalDurationMs)}`}
       style={{
         display: 'block',
         overflow: 'hidden',
@@ -443,7 +437,6 @@ function QueryAge({ query }: { query: QuerySummary }) {
   const { colors } = useDevtoolsTheme()
   return (
     <span
-      title='age since last fetch'
       style={{
         display: 'block',
         overflow: 'hidden',
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index c8a3ca53..6f08edf4 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -6,6 +6,7 @@ import {
   type MouseEvent as ReactMouseEvent,
   type ReactNode,
 } from 'react'
+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'
@@ -122,7 +123,7 @@ export function QueryDetails({
       subtitle={
         <span style={{ display: 'flex', alignItems: 'center', gap: 5, minWidth: 0 }}>
           <code
-            title={[
+            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,
             ]
@@ -174,7 +175,11 @@ export function QueryDetails({
             <ClassBadge value={activeQuery.classification} />
             <span style={styles.spacer} />
             <span style={{ color: colors.muted, whiteSpace: 'nowrap' }}>
-              {plural(activeQuery.subscriberCount, 'subscriber', 'subscribers')}
+              {(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 ? (
@@ -193,22 +198,39 @@ export function QueryDetails({
             </div>
           ) : null}
           {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>
+            <>
+              <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.detailsState === 'evicted'
+                      ? undefined
+                      : activeQuery.lastError.details
+                  }
+                  label='Error details'
+                  emptyLabel={
+                    activeQuery.lastError.detailsState === 'evicted'
+                      ? 'Original error details vacuumed to keep memory bounded'
+                      : 'No structured error details captured'
+                  }
+                  maxHeight={280}
+                />
+              </div>
+            </>
           ) : null}
           <QueryPerformance query={activeQuery} average={average} onFetchSelect={onFetchSelect} />
-          <QueryRealtimeUpdates query={activeQuery} />
           {!splitDetails ? <QueryData query={activeQuery} separated /> : null}
           <QueryDetailBlock separated>
             <JsonViewer
@@ -307,51 +329,6 @@ function QueryData({
   )
 }
 
-function QueryRealtimeUpdates({ query }: { query: QuerySummary }) {
-  const { colors } = useDevtoolsTheme()
-  return (
-    <DetailSection label='Realtime Updates' separated>
-      <div style={{ color: colors.text }}>{realtimeUpdatesLabel(query)}</div>
-      <div style={{ color: colors.muted, marginTop: 2 }}>{realtimeUpdatesDescription(query)}</div>
-    </DetailSection>
-  )
-}
-
-function realtimeUpdatesLabel(query: QuerySummary): string {
-  switch (realtimeUpdatesMode(query)) {
-    case 'merge':
-      return 'Merges matching events locally'
-    case 'manual':
-      return 'Ignores realtime events'
-    default:
-      return 'Refetches uncertain events'
-  }
-}
-
-function realtimeUpdatesDescription(query: QuerySummary): string {
-  const mode = realtimeUpdatesMode(query)
-  if (mode === 'manual') {
-    return 'This snapshot changes only when it is refetched manually.'
-  }
-  if (mode === 'merge') {
-    return 'Matching cache changes can be applied safely without refetching.'
-  }
-
-  const reasons = query.classificationReasons ?? []
-  const windowReasons = reasons.filter(reason => reason.code === 'window-filter')
-  if (windowReasons.length > 0) {
-    return 'Sorted or paginated results can’t always be updated safely in place.'
-  }
-  return 'The server is needed when an event can’t be applied safely in place.'
-}
-
-function realtimeUpdatesMode(query: QuerySummary): 'merge' | 'manual' | 'refetch' {
-  if (query.realtimeStrategy) return query.realtimeStrategy
-  if (query.classificationReasons?.some(reason => reason.code === 'snapshot')) return 'manual'
-  if (query.classification === 'local-exact' || query.classification === 'get') return 'merge'
-  return 'refetch'
-}
-
 function PaginationDetails({
   pagination,
   pages,
@@ -413,7 +390,7 @@ function PaginationDetails({
                 >
                   <strong style={{ fontWeight: 600 }}>Page {index + 1}</strong>
                   <code
-                    title={[position, continuation].filter(Boolean).join(' · ')}
+                    data-tooltip={[position, continuation].filter(Boolean).join(' · ')}
                     style={{
                       ...styles.code,
                       minWidth: 0,
@@ -501,7 +478,7 @@ function QueryPerformance({
         ) : null}
         <span style={{ whiteSpace: 'nowrap' }}>{plural(query.fetchCount, 'fetch', 'fetches')}</span>
       </div>
-      {query.spans.length > 0 ? (
+      {query.fetchCount > 0 || query.spans.some(span => span.endAt === undefined) ? (
         <div
           style={{
             display: 'grid',
@@ -511,8 +488,19 @@ function QueryPerformance({
             marginTop: 8,
           }}
         >
-          <span style={{ color: colors.faint, fontSize: 11 }}>Recent latency</span>
-          <Sparkline spans={query.spans} onSelect={onFetchSelect} />
+          <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>
@@ -561,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 === ' ') {
@@ -601,7 +589,8 @@ function QueryPlanRow({
         </div>
         {detail ? (
           <div
-            title={detail}
+            data-tooltip={detail}
+            data-tooltip-overflow=''
             style={{
               ...styles.code,
               color: colors.muted,
@@ -620,59 +609,126 @@ function QueryPlanRow({
 }
 
 function Sparkline({
-  spans,
+  query,
   onSelect,
 }: {
-  spans: QueryRecord['spans']
+  query: QuerySummary
   onSelect: (span: QuerySpan) => void
 }) {
   const { colors } = useDevtoolsTheme()
-  if (spans.length === 0) return null
   const nowPoint = now()
-  const visibleSpans = spans.slice(-30)
-  const max = Math.max(1, ...visibleSpans.map(span => spanDuration(span, nowPoint)))
+  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 (
     <span
       aria-label='Recent fetch history'
-      style={{ display: 'flex', alignItems: 'end', gap: 1, height: 22 }}
+      style={{ display: 'flex', alignItems: 'end', gap: 1, height: 22, minWidth: 0 }}
     >
-      {visibleSpans.map((span, index) => {
-        const duration = spanDuration(span, nowPoint)
-        const state = span.endAt === undefined ? 'pending' : span.ok === false ? 'error' : 'success'
-        const trigger = fetchReasonLabel(span.reason)
+      {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 (
           <button
             type='button'
-            key={`${span.startAt}:${index}`}
-            aria-label={`${formatMs(duration)}, ${state}, ${trigger}`}
-            title={`${formatMs(duration)} · ${state}\nTrigger: ${trigger}\nClick to inspect this fetch`}
-            onClick={() => onSelect(span)}
+            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={{
               display: 'flex',
               alignItems: 'end',
               justifyContent: 'center',
-              width: 7,
+              flex: '1 1 5px',
+              minWidth: 3,
+              maxWidth: 7,
               height: 22,
               padding: 0,
               border: 0,
               background: 'transparent',
-              cursor: 'pointer',
+              cursor: inspectable ? 'pointer' : 'default',
             }}
           >
             <span
               aria-hidden='true'
               style={{
-                width: 4,
-                height: Math.max(3, (duration / max) * 20),
+                width: 'min(4px, 80%)',
+                height: Math.max(3, (entry.duration / max) * 20),
                 background:
-                  span.endAt === undefined
+                  entry.state === 'pending'
                     ? colors.blue
-                    : span.ok === false
+                    : entry.state === 'error'
                       ? colors.red
-                      : colors.green,
+                      : entry.state === 'unavailable'
+                        ? colors.faint
+                        : colors.green,
                 borderRadius: 2,
-                opacity: span.endAt === undefined ? 0.75 : 1,
-                boxShadow: span.endAt === undefined ? `inset 0 0 0 1px ${colors.bg}` : undefined,
+                opacity: entry.state === 'pending' ? 0.75 : 1,
+                boxShadow: entry.state === 'pending' ? `inset 0 0 0 1px ${colors.bg}` : undefined,
               }}
             />
           </button>
diff --git a/lib/devtools/QueryPresentation.tsx b/lib/devtools/QueryPresentation.tsx
index 5b07b762..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>
   )
@@ -35,16 +35,20 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
       ? colors.red
       : status.kind === 'pending'
         ? colors.blue
-        : status.kind === 'skipped'
-          ? colors.faint
-          : 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,
@@ -59,7 +63,8 @@ export function QueryStatusDot({ query }: { query: QuerySummary }) {
 }
 
 export function queryStatus(query: QuerySummary): {
-  kind: 'active' | 'cached' | 'error' | 'pending' | 'retained' | 'skipped'
+  kind:
+    'active' | 'cached' | 'error' | 'pending' | 'prefetched' | 'prepared' | 'retained' | 'skipped'
   label: string
 } {
   if (!query.present) {
@@ -75,6 +80,12 @@ export function queryStatus(query: QuerySummary): {
     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
index b77b9969..a3e6b230 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -86,11 +86,19 @@ export function TimelineActivityTable({
   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 (
@@ -100,7 +108,8 @@ export function TimelineActivityTable({
     ) {
       return false
     }
-    return timelineActivityMatchesFilter(activity, normalizedFilter)
+    if (!timelineActivityMatchesFilter(activity, normalizedFilter)) return false
+    return !relatedOnly || activityHasGraph(activity, relatedOnly)
   })
   const rows = range
     ? filteredActivities.filter(activity => intersects(activity, range, nowPoint))
@@ -136,6 +145,12 @@ export function TimelineActivityTable({
 
   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
@@ -257,6 +272,10 @@ export function TimelineActivityTable({
                   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}
@@ -273,10 +292,18 @@ export function TimelineActivityTable({
         {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 } : {})}
@@ -308,27 +335,30 @@ export function TimelineActivityTable({
         {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>
-        <span style={{ marginLeft: 'auto' }}>
-          {range ? (
-            <button
-              type='button'
-              aria-label='Clear timeline range'
-              title='Show the full recording'
-              onClick={() => {
-                setRange(null)
-                setSelectedId(null)
-              }}
-              style={buttonStyle(colors, true)}
-            >
-              {formatOffset(range.start - extent.start)}–{formatOffset(range.end - extent.start)} ×
-            </button>
-          ) : (
-            <span style={{ color: colors.faint, whiteSpace: 'nowrap' }}>
-              Drag overview to filter time
-            </span>
-          )}
-        </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>
     </>
   )
@@ -341,6 +371,7 @@ function activityCount(activities: readonly TimelineActivity[], kind: TimelineAc
 function ActivityRow({
   activity,
   selected,
+  related,
   rowRef,
   extent,
   nowPoint,
@@ -349,6 +380,7 @@ function ActivityRow({
 }: {
   activity: TimelineActivity
   selected: boolean
+  related: boolean
   rowRef?: RefObject<HTMLTableRowElement | null>
   extent: TimelineExtent
   nowPoint: number
@@ -362,7 +394,6 @@ function ActivityRow({
       data-timeline-activity={activity.kind}
       aria-selected={selected}
       tabIndex={0}
-      title='Select activity details'
       onClick={onSelect}
       onKeyDown={event => {
         if (event.key === 'Enter' || event.key === ' ') {
@@ -375,8 +406,9 @@ function ActivityRow({
         outline: 'none',
         contentVisibility: 'auto',
         containIntrinsicSize: '0 33px',
-        background: selected ? colors.activeButtonBg : undefined,
+        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' }}>
@@ -386,7 +418,8 @@ function ActivityRow({
         <span style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
           <ActivityIcon activity={activity} />
           <strong
-            title={activity.label}
+            data-tooltip={activity.label}
+            data-tooltip-overflow=''
             style={{
               minWidth: 0,
               overflow: 'hidden',
@@ -400,7 +433,7 @@ function ActivityRow({
         </span>
       </td>
       <EllipsisCell value={activity.operation} />
-      <EllipsisCell value={activity.detail || '—'} />
+      <EllipsisCell value={activity.detail || '—'} tooltip={activity.detailTooltip} />
       <td style={styles.td}>
         <Badge tone={activity.tone}>{activity.status}</Badge>
       </td>
@@ -417,11 +450,20 @@ function ActivityRow({
   )
 }
 
-function EllipsisCell({ value, error = false }: { value: string; error?: boolean }) {
+function EllipsisCell({
+  value,
+  error = false,
+  tooltip,
+}: {
+  value: string
+  error?: boolean
+  tooltip?: string | undefined
+}) {
   const { colors, styles } = useDevtoolsTheme()
   return (
     <td
-      title={value}
+      data-tooltip={tooltip ?? value}
+      {...(tooltip ? {} : { 'data-tooltip-overflow': '' })}
       style={{
         ...styles.td,
         color: error ? colors.red : value === '—' ? colors.faint : colors.muted,
@@ -512,19 +554,27 @@ function Waterfall({
 
 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
@@ -541,24 +591,24 @@ function ActivityDetails({
       onClose={onClose}
     >
       <DetailStats>
+        {activity.serviceName ? <DetailStat label='Service' value={activity.serviceName} /> : null}
         <DetailStat
-          label={activity.kind === 'fetch' ? 'Request method' : 'Operation'}
+          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='Trigger' value={activity.trigger} />
-        <DetailStat label='Cache effect' value={activity.effect} />
-        <DetailStat label='Result' value={activity.result} />
         <DetailStat
           label='Duration'
           value={activity.durationMs === undefined ? '—' : formatMs(activity.durationMs)}
         />
-        {activity.serviceName ? <DetailStat label='Service' value={activity.serviceName} /> : null}
         {activity.queryId ? (
           <DetailStat label='Query ID' value={activity.queryId} copyValue={activity.queryId} />
         ) : null}
@@ -588,6 +638,28 @@ function ActivityDetails({
           />
         ) : null}
       </DetailStats>
+      {activity.error ? (
+        <DetailBlock>
+          <JsonViewer
+            value={activity.errorDetailsState === 'evicted' ? undefined : activity.errorDetails}
+            label='Error details'
+            emptyLabel={
+              activity.errorDetailsState === '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>
@@ -740,6 +812,161 @@ function ActivityDetails({
   )
 }
 
+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 ?? [])]),
diff --git a/lib/devtools/TimelineOverview.tsx b/lib/devtools/TimelineOverview.tsx
index 1ad02dfa..19cd0616 100644
--- a/lib/devtools/TimelineOverview.tsx
+++ b/lib/devtools/TimelineOverview.tsx
@@ -1,9 +1,13 @@
 import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent } from 'react'
-import type { TimelineActivity, TimelineActivityKind, TimelineExtent } from './timelineModel.js'
+import type { TimelineActivity, TimelineExtent } from './timelineModel.js'
 import { useDevtoolsTheme } from './ui.js'
 
 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
 
 export interface TimelineRange {
   start: number
@@ -67,7 +71,7 @@ export function TimelineOverview({
     <button
       type='button'
       aria-label='Timeline overview'
-      title='Drag to filter the activity table by time. Click to clear the range.'
+      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)
@@ -131,12 +135,13 @@ function drawOverview(
     context.stroke()
   }
 
-  const bands: TimelineActivityKind[] = ['fetch', 'realtime', 'write', 'connection']
-  const bandHeight = height / bands.length
-  for (const activity of activities) {
-    const band = bands.indexOf(activity.kind)
-    const top = band * bandHeight + 4
-    const markHeight = Math.max(2, bandHeight - 7)
+  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)
@@ -145,9 +150,9 @@ function drawOverview(
       activity.kind === 'realtime' ||
       activity.kind === 'connection'
     ) {
-      context.fillRect(left - 1, top, 2, markHeight)
+      context.fillRect(left - MIN_MARK_WIDTH / 2, top, MIN_MARK_WIDTH, MARK_HEIGHT)
     } else {
-      context.fillRect(left, top, Math.max(2, right - left), markHeight)
+      context.fillRect(left, top, Math.max(MIN_MARK_WIDTH, right - left), MARK_HEIGHT)
     }
   }
 
@@ -157,8 +162,6 @@ function drawOverview(
     context.fillStyle = 'rgba(0,0,0,.2)'
     context.fillRect(0, 0, left, height)
     context.fillRect(right, 0, width - right, height)
-    context.fillStyle = colors.activeButtonBg
-    context.fillRect(left, 0, Math.max(2, right - left), height)
     context.strokeStyle = colors.blue
     context.lineWidth = 1
     context.strokeRect(left + 0.5, 0.5, Math.max(1, right - left - 1), height - 1)
@@ -168,6 +171,42 @@ function drawOverview(
   }
 }
 
+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'],
diff --git a/lib/devtools/TimelineTab.tsx b/lib/devtools/TimelineTab.tsx
index 2149c725..d348e6a9 100644
--- a/lib/devtools/TimelineTab.tsx
+++ b/lib/devtools/TimelineTab.tsx
@@ -20,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.'
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index b9b46731..4f4d2e29 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -7,6 +7,7 @@ import type {
   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'
 
@@ -40,10 +41,13 @@ export interface QuerySpan {
   fetchId?: number
   reason?: string
   traceIds?: number[]
+  graph?: Extract<FigbirdEvent, { kind: 'fetch:start' }>['graph']
   params?: unknown
   paramsState?: PayloadRetentionState
   result?: unknown
   resultState?: PayloadRetentionState
+  errorDetails?: unknown
+  errorDetailsState?: PayloadRetentionState
 }
 
 export interface QueryRecord extends Omit<
@@ -63,7 +67,13 @@ 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?: unknown
+    detailsState?: PayloadRetentionState
+  }
 }
 
 export interface DevtoolsEvent {
@@ -126,6 +136,8 @@ export interface WriteRecord {
   optimistic?: boolean
   rolledBack?: boolean
   error?: string
+  errorDetails?: unknown
+  errorDetailsState?: PayloadRetentionState
   args?: readonly unknown[]
   argsState?: PayloadRetentionState
   traceId?: number
@@ -229,6 +241,13 @@ function payloadForRetention(event: FigbirdEvent): unknown {
     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
   }
@@ -256,6 +275,27 @@ function eventWithoutPayload(event: FigbirdEvent): FigbirdEvent {
     }
     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
   }
@@ -382,7 +422,7 @@ export function createCollector(
   options: CollectorOptions = {},
 ): Collector {
   return new FigbirdCollector(figbird, {
-    eventLimit: options.eventLimit ?? 500,
+    eventLimit: options.eventLimit ?? 5_000,
     heartbeatMs: options.heartbeatMs ?? 5_000,
     payloadLimit: options.payloadLimit ?? 200,
     payloadNodeLimit: options.payloadNodeLimit ?? 20_000,
@@ -455,7 +495,8 @@ class FigbirdCollector implements Collector {
   #eventPayloadHandles = new WeakMap<DevtoolsEvent, PayloadHandle>()
   #realtimePayloadHandles = new WeakMap<TimelineRealtimeEvent, PayloadHandle>()
   #spanPayloadHandles = new WeakMap<QuerySpan, PayloadHandle[]>()
-  #writePayloadHandles = new Map<string, PayloadHandle>()
+  #queryErrorPayloadHandles = new Map<string, PayloadHandle>()
+  #writePayloadHandles = new Map<string, PayloadHandle[]>()
 
   readonly eventLimit: number
 
@@ -607,6 +648,7 @@ class FigbirdCollector implements Collector {
     this.#fetchTraces.clear()
     this.#sourceStateDirty = true
     this.#payloads.clear()
+    this.#queryErrorPayloadHandles.clear()
     this.#writePayloadHandles.clear()
     this.#scheduleNotify()
   }
@@ -631,19 +673,21 @@ class FigbirdCollector implements Collector {
   #clearSettledWrites(): void {
     for (const [id, write] of this.#writes) {
       if (write.status === 'in-flight') continue
-      this.#payloads.release(this.#writePayloadHandles.get(id))
-      this.#writePayloadHandles.delete(id)
+      this.#releaseWritePayloads(id)
       this.#writes.delete(id)
     }
   }
 
   #recordEvent(event: FigbirdEvent): void {
-    const at = now()
+    const receivedAt = now()
+    const receivedWallAt = Date.now()
+    const wallAt = event.timestamp ?? receivedWallAt
+    const at = receivedAt + (wallAt - receivedWallAt)
     const capturedEvent = this.#captureEvent(event)
     const captured: DevtoolsEvent = {
       id: this.#nextEventId++,
       at,
-      wallAt: Date.now(),
+      wallAt,
       event: capturedEvent,
     }
     const evictedEvent = this.#events.push(captured)
@@ -704,7 +748,7 @@ class FigbirdCollector implements Collector {
             `${capturedEvent.serviceName}:${String(capturedEvent.itemId)}`,
             {
               at,
-              wallAt: Date.now(),
+              wallAt,
               source: capturedEvent.source,
               traceId: capturedEvent.traceId,
               type: capturedEvent.type,
@@ -804,7 +848,10 @@ class FigbirdCollector implements Collector {
       if (this.#queries.size <= this.#queryHistoryLimit) break
       for (const span of record.metrics.spans.toArray()) this.#releaseSpanPayloads(span)
       for (const span of record.metrics.activeSpans.values()) this.#releaseSpanPayloads(span)
-      this.#queries.delete(record.lastKnown.queryId)
+      const queryId = record.lastKnown.queryId
+      this.#payloads.release(this.#queryErrorPayloadHandles.get(queryId))
+      this.#queryErrorPayloadHandles.delete(queryId)
+      this.#queries.delete(queryId)
     }
   }
 
@@ -872,6 +919,7 @@ class FigbirdCollector implements Collector {
         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: event.params, paramsState: 'retained' as const }),
@@ -947,17 +995,34 @@ 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: capturedErrorDetails, detailsState: 'retained' as const }),
+      }
+      if (capturedErrorDetails !== undefined) {
+        this.#retainQueryError(event.queryId, metrics, capturedErrorDetails, at)
       }
     }
 
-    const observedStartAt = at - event.durationMs
+    const inspectedQuery = this.#figbird
+      .inspect()
+      .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)
+    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)
@@ -965,18 +1030,23 @@ class FigbirdCollector implements Collector {
     const span: QuerySpan = {
       ...activeSpan,
       startAt,
-      endAt: at,
+      endAt,
       ok,
       ...(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: capturedErrorDetails, errorDetailsState: 'retained' as const }),
+    }
+    if (capturedErrorDetails !== undefined) {
+      this.#retainSpanPayload(span, capturedErrorDetails, () => {
+        span.errorDetails = undefined
+        span.errorDetailsState = 'evicted'
+      })
     }
-    const inspectedResult = ok
-      ? this.#figbird
-          .inspect()
-          .find(query => query.queryId === event.queryId && query.generation === event.generation)
-          ?.data
-      : undefined
+    const inspectedResult = ok ? inspectedQuery?.data : undefined
     if (inspectedResult !== undefined) {
       span.result = this.#captureValue(inspectedResult)
       span.resultState = 'retained'
@@ -1002,6 +1072,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
@@ -1053,14 +1124,18 @@ 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: details,
+        errorDetailsState: 'retained',
         ...(base.optimistic || base.rolledBack ? { rolledBack: true } : {}),
       })
+      this.#retainWriteError(id, details)
       this.#trimWrites()
       return
     }
@@ -1091,13 +1166,22 @@ class FigbirdCollector implements Collector {
       } 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: details,
+              errorDetailsState: 'retained' as const,
+            }
+          : {}),
       })
+      if (details !== undefined) this.#retainWriteError(id, details)
       this.#trimWrites()
       return
     }
@@ -1127,10 +1211,17 @@ class FigbirdCollector implements Collector {
       case 'mutate:error':
       case 'action:error':
       case 'connection:error':
-        return { ...event, error: new Error(errorMessage(event.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,
@@ -1146,6 +1237,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 } : {}),
         }
@@ -1157,7 +1249,13 @@ 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: new Error(errorMessage(event.error)) }
+      return {
+        ...event,
+        error: errorFromDetails(this.#captureValue(errorDetails(event.error)), {
+          name: event.error.name,
+          message: event.error.message,
+        }),
+      }
     }
     return { ...event }
   }
@@ -1203,10 +1301,22 @@ class FigbirdCollector implements Collector {
     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
+      const { details: _details, ...metadata } = metrics.lastError
+      void _details
+      metrics.lastError = { ...metadata, detailsState: 'evicted' }
+      this.#scheduleNotify()
+    })
+    this.#queryErrorPayloadHandles.set(queryId, handle)
+  }
+
   #retainWriteArgs(id: string): void {
     const write = this.#writes.get(id)
     if (!write?.args) return
-    this.#payloads.release(this.#writePayloadHandles.get(id))
+    this.#releaseWritePayloads(id)
     write.argsState = 'retained'
     const handle = this.#payloads.retain(write.args, () => {
       const current = this.#writes.get(id)
@@ -1217,7 +1327,29 @@ class FigbirdCollector implements Collector {
       this.#timelinePayloadsEvicted++
       this.#scheduleNotify()
     })
-    this.#writePayloadHandles.set(id, handle)
+    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
+      const { errorDetails: _details, ...metadata } = current
+      void _details
+      this.#writes.set(id, { ...metadata, errorDetailsState: 'evicted' })
+      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 {
@@ -1262,8 +1394,7 @@ class FigbirdCollector implements Collector {
       } else if (oldest.kind === 'connection') {
         this.#timelineConnection.shift()
       } else {
-        this.#payloads.release(this.#writePayloadHandles.get(oldest.id))
-        this.#writePayloadHandles.delete(oldest.id)
+        this.#releaseWritePayloads(oldest.id)
         this.#writes.delete(oldest.id)
       }
       retained--
@@ -1292,8 +1423,7 @@ class FigbirdCollector implements Collector {
       .sort((a, b) => a.startedAt - b.startedAt)
     for (const write of settled) {
       if (this.#writes.size <= this.#writeLimit) break
-      this.#payloads.release(this.#writePayloadHandles.get(write.id))
-      this.#writePayloadHandles.delete(write.id)
+      this.#releaseWritePayloads(write.id)
       this.#writes.delete(write.id)
       this.#timelineEvictedCount++
     }
diff --git a/lib/devtools/eventModel.ts b/lib/devtools/eventModel.ts
index 82cbf452..c97cc514 100644
--- a/lib/devtools/eventModel.ts
+++ b/lib/devtools/eventModel.ts
@@ -1,4 +1,5 @@
 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'
 
@@ -40,7 +41,7 @@ export function eventPayload(event: DevtoolsEvent['event']): unknown {
     case 'mutate:error':
     case 'action:error':
     case 'connection:error':
-      return { name: event.error.name, message: event.error.message }
+      return errorDetails(event.error)
     case 'connection:connected':
     case 'connection:disconnected':
     case 'connection:reconnected':
@@ -94,7 +95,7 @@ export function eventPayloadLabel(event: DevtoolsEvent['event']): string {
 
 export function displayEvent(event: DevtoolsEvent['event']): unknown {
   if ('error' in event && event.error) {
-    return { ...event, error: { name: event.error.name, message: event.error.message } }
+    return { ...event, error: errorDetails(event.error) }
   }
   return event
 }
@@ -146,7 +147,13 @@ export function buildActivities(
       const details = activityDetails(key, representative, group.events)
       const identity = activityIdentity(key, representative.event)
       const lifecycle = activityStatus(key, group.events)
-      const queryId = group.events.map(item => eventQueryId(item.event)).find(Boolean)
+      // 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,
diff --git a/lib/devtools/model.ts b/lib/devtools/model.ts
index 26ed65dc..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,7 +10,10 @@ 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']>
 
@@ -88,7 +92,12 @@ export function buildDevtoolsModel(snapshot: DevtoolsSnapshot): DevtoolsModel {
       })
     }
 
-    const summary = summarizeRootFetches(rootFetches)
+    const summary = {
+      ...summarizeRootFetches(rootFetches),
+      subscriberCount: group.subscriberCount ?? summarySubscriberCount(rootFetches),
+      prefetchCount: group.prefetchCount ?? 0,
+      prepareCount: group.prepareCount ?? 0,
+    }
     operations.push({
       key: group.key,
       summary:
@@ -170,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),
@@ -178,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,
diff --git a/lib/devtools/timelineModel.ts b/lib/devtools/timelineModel.ts
index feae00db..fc3ebebc 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -1,4 +1,6 @@
 import type { FigbirdEvent } from '../core/events.js'
+import { errorDetails } from '../core/errors.js'
+import type { QueryGraphRef } from '../core/queryTypes.js'
 import type {
   DevtoolsEvent,
   DevtoolsSnapshot,
@@ -13,6 +15,10 @@ 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 {
@@ -23,6 +29,7 @@ export interface TimelineActivity {
   label: string
   operation: string
   detail: string
+  detailTooltip?: string
   status: string
   tone: TimelineActivityTone
   trigger: string
@@ -31,6 +38,7 @@ export interface TimelineActivity {
   serviceName?: string
   queryId?: string
   queryIds?: string[]
+  graph?: readonly TimelineGraphRef[]
   traceId?: number
   entity?: { serviceName: string; itemId: string | number }
   durationMs?: number
@@ -40,6 +48,8 @@ export interface TimelineActivity {
   data?: unknown
   dataState?: PayloadRetentionState
   liveData?: unknown
+  errorDetails?: unknown
+  errorDetailsState?: PayloadRetentionState
   write?: {
     id: string
     type: WriteRecord['type']
@@ -79,18 +89,51 @@ export function buildTimelineActivities(
       snapshot,
     ),
   ]
-  return activities.sort((a, b) => a.startAt - b.startAt || a.id.localeCompare(b.id))
+  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
+    }
+  }
+
+  return first.startAt - second.startAt || first.id.localeCompare(second.id)
+}
+
+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,
+  _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 = startedAt > 0 ? Math.min(startedAt, earliest) : earliest
+  const start = earliest
   return { start, end: Math.max(start + 1_000, latest) }
 }
 
@@ -131,6 +174,13 @@ function buildFetchActivities(
   context: EventContext,
   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 start = span.fetchId === undefined ? undefined : context.fetchStarts.get(span.fetchId)
@@ -150,11 +200,16 @@ function buildFetchActivities(
       const durationMs =
         terminalEvent?.kind === 'fetch:end' || terminalEvent?.kind === 'fetch:error'
           ? terminalEvent.durationMs
-          : (span.endAt ?? nowPoint) - span.startAt
-      const scope = model.scopesByQueryId
-        .get(query.queryId)
-        ?.map(item => item.label)
-        .join(', ')
+          : 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 = cacheEffect(
         traceEvents.filter(
           item => item.event.kind !== 'cache:updated' || item.event.source === 'fetch',
@@ -185,6 +240,18 @@ function buildFetchActivities(
             ? 'evicted'
             : undefined
       const livePayload = query.method === 'get' ? query.resourceId : query.query
+      const capturedErrorDetails =
+        span.errorDetailsState === 'retained'
+          ? span.errorDetails
+          : terminalEvent?.kind === 'fetch:error' && terminal?.payloadState !== 'evicted'
+            ? errorDetails(terminalEvent.error)
+            : undefined
+      const capturedErrorDetailsState =
+        capturedErrorDetails !== undefined
+          ? 'retained'
+          : span.errorDetailsState === 'evicted' || terminal?.payloadState === 'evicted'
+            ? 'evicted'
+            : undefined
       return searchable({
         id: `fetch:${span.fetchId ?? `${query.queryId}:${span.startAt}:${index}`}`,
         kind: 'fetch',
@@ -195,6 +262,7 @@ function buildFetchActivities(
         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,
@@ -202,6 +270,14 @@ function buildFetchActivities(
         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 }),
@@ -210,12 +286,22 @@ function buildFetchActivities(
         ...(span.result === undefined ? {} : { data: span.result }),
         ...(span.resultState ? { dataState: span.resultState } : {}),
         ...(query.present && query.data !== undefined ? { liveData: query.data } : {}),
+        ...(capturedErrorDetails === undefined ? {} : { errorDetails: capturedErrorDetails }),
+        ...(capturedErrorDetailsState ? { errorDetailsState: capturedErrorDetailsState } : {}),
         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,
   context: EventContext,
@@ -402,6 +488,8 @@ function writeActivity(
       : { 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.errorDetailsState ? { errorDetailsState: write.errorDetailsState } : {}),
     ...(write.serviceName === undefined || write.itemId === undefined
       ? {}
       : {
diff --git a/lib/devtools/ui.tsx b/lib/devtools/ui.tsx
index 22b5347f..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
 }
 
@@ -56,6 +61,7 @@ export const lightColors: DevtoolsColors = {
   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)',
 }
 
@@ -75,6 +81,7 @@ export const darkColors: DevtoolsColors = {
   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)',
 }
 
@@ -169,6 +176,7 @@ export function makeStyles(colors: DevtoolsColors) {
       textAlign: 'left',
       color: colors.text,
       fontWeight: 400,
+      cursor: 'default',
       padding: '6px 10px',
       boxShadow: `inset 0 -1px ${colors.border}`,
       position: 'sticky',
@@ -250,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))
 
@@ -362,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',
@@ -417,7 +608,7 @@ export function DetailsPane({
         <button
           type='button'
           aria-label='Close details'
-          title='Close details'
+          data-tooltip='Close details'
           style={iconButtonStyle(colors)}
           onClick={onClose}
         >
@@ -520,7 +711,7 @@ export function CopyButton({ value, label = 'value' }: { value: string; label?:
     <button
       type='button'
       aria-label={`Copy ${label}`}
-      title={copied ? 'Copied' : `Copy ${label}`}
+      data-tooltip={copied ? 'Copied' : `Copy ${label}`}
       onClick={event => {
         event.stopPropagation()
         void copyText(value).then(success => {
@@ -546,7 +737,7 @@ export function CopyButton({ value, label = 'value' }: { value: string; label?:
   )
 }
 
-async function copyText(value: string): Promise<boolean> {
+export async function copyText(value: string): Promise<boolean> {
   try {
     if (typeof navigator !== 'undefined' && navigator.clipboard) {
       await navigator.clipboard.writeText(value)
@@ -616,7 +807,6 @@ export function ColumnResizeHandle({
       role='separator'
       aria-label={`Resize ${label} column`}
       aria-orientation='vertical'
-      title={`Resize ${label} column`}
       onMouseDown={onMouseDown}
       style={{
         position: 'absolute',
@@ -690,17 +880,17 @@ export function useDetailsPaneWidth({
 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-flex',
         alignItems: 'center',
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 af87b052..c612f4fe 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -16,7 +16,7 @@ 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 } from '../lib/devtools/eventModel.js'
+import { buildActivities, buildTraceIndex, eventPayload } from '../lib/devtools/eventModel.js'
 import { buildTimelineActivities } from '../lib/devtools/timelineModel.js'
 import { createTestApp, dom } from './helpers.js'
 
@@ -154,9 +154,11 @@ 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.deepEqual(snapshot.timeline.laneOrder, [])
@@ -183,6 +185,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)
 
@@ -310,7 +313,12 @@ 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)
@@ -320,7 +328,13 @@ test('collector marks optimistic mutation failures as rolled back writes', async
   t.truthy(mutation)
   t.is(mutation?.status, 'error')
   t.true(mutation?.rolledBack)
-  t.is(mutation?.error, 'nope')
+  t.is(mutation?.error, 'Validation Error')
+  t.deepEqual(mutation?.errorDetails, {
+    name: 'ValidationError',
+    message: 'Validation Error',
+    code: 422,
+    issues: [{ name: 'content', reason: 'required' }],
+  })
   t.deepEqual(mutation?.args, [1, { content: 'bad' }])
 
   const writeActivity = buildTimelineActivities(
@@ -330,6 +344,10 @@ test('collector marks optimistic mutation failures as rolled back writes', async
   ).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)
 
   const mutationGroup = buildActivities(snapshot.events, buildTraceIndex(snapshot.events)).find(
     activity => activity.kind === 'mutation',
@@ -457,6 +475,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',
@@ -505,12 +528,19 @@ 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, {
+    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?.({
@@ -633,12 +663,83 @@ test('collector bounds inactive query and settled write history', t => {
   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,
@@ -714,6 +815,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 => {
@@ -802,7 +914,7 @@ test('query details show a cursor operation as one inspectable page chain', t =>
   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)
@@ -847,12 +959,78 @@ test('extension bridge starts debug collection only while connected', t => {
   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
@@ -879,6 +1057,34 @@ 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
+  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.start()
+  await sleep(1_100)
+  transientSession.stop()
+
+  t.is(connects, 1)
+  t.true(reads >= 2)
+  t.is(resets, 0)
+  transientSession.resetForNavigation()
+  t.is(resets, 1)
 })
 
 test('extension inspection waits for picker startup before refreshing', async t => {
@@ -1080,6 +1286,10 @@ 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',
@@ -1088,6 +1298,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
       method: 'find',
       fetchId: 10,
       reason: 'subscription',
+      graph: [{ ...graph, path: '(root)' }],
     })
     events.emit({
       kind: 'fetch:end',
@@ -1098,6 +1309,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
       fetchId: 10,
       durationMs: 8,
       itemCount: 1,
+      graph: [{ ...graph, path: '(root)' }],
     })
     events.emit({
       kind: 'fetch:start',
@@ -1107,6 +1319,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
       method: 'find',
       fetchId: 11,
       reason: 'subscription',
+      graph: [{ ...graph, path: 'labels' }],
     })
     events.emit({
       kind: 'fetch:end',
@@ -1117,6 +1330,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
       fetchId: 11,
       durationMs: 5,
       itemCount: 2,
+      graph: [{ ...graph, path: 'labels' }],
     })
     events.emit({
       kind: 'realtime',
@@ -1187,9 +1401,9 @@ test('panel shows root queries and nests relation fetches in details', async t =
   t.false(rowText[0]!.includes('issueLabels'))
 
   const classHeader = $all('th').find(header => header.textContent === 'maintenance')
-  t.true(classHeader?.getAttribute('title')?.includes('local-exact'))
+  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)
@@ -1198,17 +1412,18 @@ 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.true(devtoolsText.includes('Realtime Updates'))
-  t.true(devtoolsText.includes('Merges matching events locally'))
+  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?.includes('root'))
-  t.true(rootQueryId?.getAttribute('title')?.includes('Cache identity'))
+  t.true(rootQueryId?.getAttribute('data-tooltip')?.includes('Cache identity'))
 
   const nestedQuery = $('[aria-label="Inspect nested query labels"]')
   t.truthy(nestedQuery)
@@ -1227,7 +1442,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
 
   const fetchHistoryBar = $('[aria-label="8ms, success, subscription"]')
   t.truthy(fetchHistoryBar)
-  t.true(fetchHistoryBar?.getAttribute('title')?.includes('Trigger: subscription'))
+  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',
@@ -1240,6 +1455,28 @@ test('panel shows root queries and nests relation fetches in details', async t =
     ),
   )
   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!)
@@ -1288,7 +1525,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
     -1,
   )?.textContent
   t.true(eventHeaders?.includes('groupserviceoperationscopestatusdetails'))
-  const realtimeEventRow = $all('[title="Select event details"]').find(row =>
+  const realtimeEventRow = $all('[data-event-row]').find(row =>
     row.textContent?.includes('realtime'),
   )
   t.truthy(realtimeEventRow)
diff --git a/test/relational-query.test.tsx b/test/relational-query.test.tsx
index e9241e87..7d951374 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'
@@ -2003,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'))
@@ -2036,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()
 })
@@ -2955,9 +2958,15 @@ 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 unsubSharedRoot = sharedRootRef.subscribe(() => {})
   await new Promise(resolve => setTimeout(resolve, 10))
 
   const rows = figbird.inspect()
@@ -2969,6 +2978,24 @@ 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.true(
+    rootFetch!.graph!.some(
+      graph => graph.operationId === sharedRootRef.hash() && graph.path === '(root)',
+    ),
+    'one backing root fetch records every relational operation it served',
+  )
+
+  unsubEvents()
+  unsubSharedRoot()
   unsub()
 })
 

From 9f63336113f28e37fafa228fcf1bd914c21f59c2 Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Sun, 16 Aug 2026 22:54:13 +0100
Subject: [PATCH 41/42] Decouple query telemetry from cache semantics

---
 lib/adapters/feathers.ts       |  14 +-
 lib/core/events.ts             |   4 +
 lib/core/fetchRebase.ts        |  27 +-
 lib/core/mutationLanes.ts      |  18 +-
 lib/core/queryRef.ts           |   4 +-
 lib/core/queryRoots.ts         |   6 +-
 lib/core/queryStore.ts         | 454 +++++++++++++++++----------------
 lib/core/queryTelemetry.ts     | 102 ++++++++
 lib/core/queryTypes.ts         |  23 +-
 lib/core/relationalFilters.ts  |   4 +-
 lib/core/relationalQuery.ts    |  52 ++--
 lib/core/windowMaintenance.ts  | 134 +++++-----
 test/fetch-races.test.ts       |   8 +-
 test/mutation-queue.test.ts    |   2 +-
 test/relational-query.test.tsx |  13 +
 15 files changed, 486 insertions(+), 379 deletions(-)
 create mode 100644 lib/core/queryTelemetry.ts

diff --git a/lib/adapters/feathers.ts b/lib/adapters/feathers.ts
index 8f865f37..88ab77d6 100644
--- a/lib/adapters/feathers.ts
+++ b/lib/adapters/feathers.ts
@@ -638,17 +638,9 @@ export class FeathersAdapter<TQuery = Record<string, unknown>> implements Adapte
   }
 
   subscribeToReconnect(handler: () => void): () => void {
-    const source = this.#getReconnectEventSource()
-    if (!source) return () => {}
-
-    source.on('reconnect', handler)
-    return () => {
-      if (source.off) {
-        source.off('reconnect', handler)
-      } else {
-        source.removeListener?.('reconnect', handler)
-      }
-    }
+    return this.subscribeToConnectionEvents(event => {
+      if (event.type === 'reconnected') handler()
+    })
   }
 
   subscribeToConnectionEvents(handler: (event: AdapterConnectionEvent) => void): () => void {
diff --git a/lib/core/events.ts b/lib/core/events.ts
index b3af029e..b25fd668 100644
--- a/lib/core/events.ts
+++ b/lib/core/events.ts
@@ -225,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
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/mutationLanes.ts b/lib/core/mutationLanes.ts
index b3d16eef..992a8203 100644
--- a/lib/core/mutationLanes.ts
+++ b/lib/core/mutationLanes.ts
@@ -4,7 +4,7 @@ import {
   type ItemId,
   type MutationDescriptor,
   type ProcessedProjectionEvent,
-  type ProcessedRealtimeEvent,
+  type ProcessedServerEvent,
   type TraceCause,
 } from './queryTypes.js'
 
@@ -42,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 }
@@ -50,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 {
@@ -162,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]
@@ -172,7 +172,7 @@ 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,
@@ -219,7 +219,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
     return {
       projection: this.#reproject(state),
       event: {
-        origin: 'authoritative',
+        mode: 'server',
         source: 'realtime',
         serviceName: state.serviceName,
         type,
@@ -277,8 +277,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
       if (lane.visible === ABSENT) {
         if (!lane.lastPresent) continue
         events.push({
-          origin: 'projection',
-          source: 'optimistic',
+          mode: 'optimistic',
           serviceName,
           type: 'removed',
           item: lane.lastPresent,
@@ -289,8 +288,7 @@ export class MutationLanes<TEntry extends MutationLaneEntry> {
         })
       } else {
         events.push({
-          origin: 'projection',
-          source: 'optimistic',
+          mode: 'optimistic',
           serviceName,
           type: lane.base === ABSENT ? 'created' : 'patched',
           item: lane.visible,
diff --git a/lib/core/queryRef.ts b/lib/core/queryRef.ts
index 6ad8e66c..c23359d7 100644
--- a/lib/core/queryRef.ts
+++ b/lib/core/queryRef.ts
@@ -2,7 +2,7 @@ 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,
@@ -99,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 a16771a7..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, QueryGraphRef, 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. */
@@ -269,8 +269,8 @@ 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
diff --git a/lib/core/queryStore.ts b/lib/core/queryStore.ts
index 5639d62d..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, type FetchReason, type TraceCause } 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,7 +63,7 @@ import {
   type ItemMatcher,
   type MutationDescriptor,
   type ProcessedProjectionEvent,
-  type ProcessedRealtimeEvent,
+  type ProcessedCacheEvent,
   type Query,
   type QueryConfig,
   type QueryDescriptor,
@@ -101,22 +102,16 @@ type StoreResponse<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
 }
 
-function mergeTraceCauses(
-  current: readonly TraceCause[],
-  next: readonly TraceCause[],
-): TraceCause[] {
-  const keyed = new Map<number, TraceCause>()
-  for (const cause of [...current, ...next]) {
-    keyed.set(cause.traceId, cause)
-  }
-  return [...keyed.values()]
-}
-
 interface MutationTrackingEntry {
   serviceName: string
   method: string
@@ -126,13 +121,13 @@ interface MutationTrackingEntry {
 }
 
 interface MutationTrackingHooks<T> {
-  onSuccess?: (result: T, cause: MutationTraceCause) => void
-  onError?: (error: Error, cause: MutationTraceCause) => void
+  onSuccess?: (result: T, context: MutationTrackingContext) => void
+  onError?: (error: Error, context: MutationTrackingContext) => void
 }
 
 interface TrackedMutation<T> {
   mutationId: number
-  cause: MutationTraceCause
+  cause?: MutationTraceCause
   promise: Promise<T>
 }
 
@@ -145,9 +140,9 @@ interface QueuedMutation {
 }
 
 interface AppliedEventEffect {
-  event: ProcessedRealtimeEvent
+  event: ProcessedCacheEvent
   reconcileQueryIds: Set<string>
-  queryEffects: Map<string, 'merged' | 'reconcile'>
+  queryEffects?: Map<string, 'merged' | 'reconcile'>
   observabilityOnly?: boolean
 }
 
@@ -158,14 +153,10 @@ interface PublishedEventEffects {
 
 interface FetchContext {
   reason: Exclude<FetchReason, 'retry'>
-  causes: TraceCause[]
+  causes?: TraceCause[]
   graph?: QueryGraphRef[]
 }
 
-function graphRefKey(ref: QueryGraphRef): string {
-  return `${ref.operationId}\u0000${ref.runId}\u0000${ref.path}\u0000${ref.role ?? ''}`
-}
-
 type LaneAuthoritativeAcceptance =
   { handled: false } | { handled: true; projection: ProjectionChange | null }
 
@@ -214,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()
@@ -228,10 +219,7 @@ export class QueryStore<
   #queryGenerations: Map<string, number> = new Map()
   #queryStats: Map<string, QueryFetchStats> = new Map()
   #nextQueryGeneration = 1
-  #nextTraceId = 1
-  #nextFetchId = 1
   #followupFetchContexts = new Map<string, FetchContext>()
-  #activeFetchGraphs = new Map<string, Map<string, QueryGraphRef>>()
 
   #fetchEventJournal = new FetchEventJournal()
   #mutationLanes: MutationLanes<QueuedMutation>
@@ -242,9 +230,9 @@ export class QueryStore<
   #visibility: VisibilitySource
   #reconcileWindows: Map<
     string,
-    { lastAt: number; trailing: ReturnType<typeof setTimeout> | null; causes: TraceCause[] }
+    { lastAt: number; trailing: ReturnType<typeof setTimeout> | null; causes?: TraceCause[] }
   > = new Map()
-  #deferredWhileHidden: Map<string, TraceCause[]> = new Map()
+  #deferredWhileHidden: Map<string, TraceCause[] | undefined> = new Map()
 
   #defaultSort: Record<string, number> | undefined
   #retry: number | false
@@ -302,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)
@@ -312,28 +300,28 @@ export class QueryStore<
     this.#visibility.onChange(() => this.#drainDeferredReconciles())
     if (this.#adapter.subscribeToConnectionEvents) {
       this.#adapter.subscribeToConnectionEvents(event => {
-        const traceId = this.#nextTraceId++
+        const traceId = this.#telemetry.nextTraceId()
         switch (event.type) {
           case 'connected':
-            this.#events.emit({
+            this.#telemetry.emit({
               kind: 'connection:connected',
-              traceId,
+              ...(traceId === undefined ? {} : { traceId }),
               ...(event.transport ? { transport: event.transport } : {}),
               ...(event.connectionId ? { connectionId: event.connectionId } : {}),
             })
             break
           case 'disconnected':
-            this.#events.emit({
+            this.#telemetry.emit({
               kind: 'connection:disconnected',
-              traceId,
+              ...(traceId === undefined ? {} : { traceId }),
               ...(event.reason ? { reason: event.reason } : {}),
               reconnecting: event.reconnecting,
             })
             break
           case 'reconnected':
-            this.#events.emit({
+            this.#telemetry.emit({
               kind: 'connection:reconnected',
-              traceId,
+              ...(traceId === undefined ? {} : { traceId }),
               ...(event.attempt === undefined ? {} : { attempt: event.attempt }),
               ...(event.transport ? { transport: event.transport } : {}),
               ...(event.connectionId ? { connectionId: event.connectionId } : {}),
@@ -341,31 +329,33 @@ export class QueryStore<
             this.#scheduleReconnectSweep(traceId)
             break
           case 'error':
-            this.#events.emit({
+            this.#telemetry.emit({
               kind: 'connection:error',
-              traceId,
+              ...(traceId === undefined ? {} : { traceId }),
               phase: event.phase,
               error: event.error,
             })
             break
           case 'reconnect-failed':
-            this.#events.emit({
+            this.#telemetry.emit({
               kind: 'connection:reconnect-failed',
-              traceId,
+              ...(traceId === undefined ? {} : { traceId }),
               ...(event.error ? { error: event.error } : {}),
             })
             break
         }
       })
     } else {
-      this.#adapter.subscribeToReconnect?.(() => this.#scheduleReconnectSweep(this.#nextTraceId++))
+      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. */
@@ -373,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
@@ -396,13 +391,14 @@ export class QueryStore<
       return { ok: false, error: 'Edited JSON must retain the entity ID' }
     }
 
-    const traceId = this.#nextTraceId++
-    const cause = { kind: 'manual' as const, traceId }
-    const queryEffects = new Map<string, 'merged' | 'reconcile'>()
-    const event: ProcessedRealtimeEvent = {
-      origin: 'authoritative',
-      source: 'devtools',
-      cause,
+    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,
@@ -423,7 +419,7 @@ export class QueryStore<
           defaultSort: this.#defaultSort,
         })
         if (result === 'applied') {
-          queryEffects.set(queryId, 'merged')
+          queryEffects?.set(queryId, 'merged')
           continue
         }
         if (
@@ -436,7 +432,7 @@ export class QueryStore<
             itemRemoved: meta => this.#adapter.itemRemoved(meta),
           })
         ) {
-          queryEffects.set(queryId, 'merged')
+          queryEffects?.set(queryId, 'merged')
         }
       }
     })
@@ -446,18 +442,18 @@ export class QueryStore<
     // 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.#events.emit({
+    this.#telemetry.emit({
       kind: 'cache:updated',
-      traceId,
+      ...(traceId === undefined ? {} : { traceId }),
       source: 'devtools',
       serviceName,
       type: 'patched',
       itemId,
       item,
       previousItem,
-      queryEffects: [...queryEffects].map(([queryId, outcome]) => ({ queryId, outcome })),
+      queryEffects: [...(queryEffects ?? [])].map(([queryId, outcome]) => ({ queryId, outcome })),
     })
-    return { ok: true, traceId }
+    return { ok: true, ...(traceId === undefined ? {} : { traceId }) }
   }
 
   /** Returns the current state for a query by id, if present. */
@@ -554,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)
@@ -620,7 +616,7 @@ export class QueryStore<
     if (!q) return
 
     if (q.state.isFetching && options.graph) {
-      this.#attachFetchGraph(queryId, options.graph)
+      this.#telemetry.attachGraph(queryId, options.graph)
     }
 
     const staleTime = options.staleTime ?? 0
@@ -636,7 +632,7 @@ export class QueryStore<
     ) {
       this.#queue(queryId, {
         reason: 'subscription',
-        causes: [{ kind: 'subscription', traceId: this.#nextTraceId++ }],
+        ...this.#causeContext('subscription'),
         ...(options.graph ? { graph: [options.graph] } : {}),
       })
     }
@@ -652,7 +648,7 @@ export class QueryStore<
     if (!q) return
     const fetchContext = context ?? {
       reason: 'manual' as const,
-      causes: [{ kind: 'manual' as const, traceId: this.#nextTraceId++ }],
+      ...this.#causeContext('manual'),
       ...(options.graph ? { graph: [options.graph] } : {}),
     }
 
@@ -676,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)
@@ -724,7 +720,7 @@ export class QueryStore<
       control: undefined,
       run: () => this.#adapter.mutate(serviceName, method, [...args]),
       hooks: {
-        onSuccess: (item, cause) =>
+        onSuccess: (item, { cause }) =>
           this.#processEvent(serviceName, { type: MUTATION_EVENT_TYPE[method], item }, cause),
       },
     })
@@ -794,7 +790,7 @@ export class QueryStore<
       control,
       ...(optimistic
         ? {
-            project: (cause: MutationTraceCause) =>
+            project: (cause?: MutationTraceCause) =>
               this.#processEvent(
                 desc.serviceName,
                 { type: 'created', item: optimisticItem },
@@ -806,15 +802,15 @@ export class QueryStore<
       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, cause) =>
+        onSuccess: (item, { cause }) =>
           this.#processEvent(desc.serviceName, { type: 'created', item }, cause),
-        onError: (_error, cause) => {
+        onError: (_error, { mutationId, cause }) => {
           if (!optimistic) return
           this.#processEvent(desc.serviceName, { type: 'removed', item: optimisticItem }, cause)
-          this.#events.emit({
+          this.#telemetry.emit({
             kind: 'mutate:rollback',
-            mutationId: cause.mutationId,
-            traceId: cause.traceId,
+            mutationId,
+            ...(cause ? { traceId: cause.traceId } : {}),
             serviceName: desc.serviceName,
             method: desc.method,
           })
@@ -839,7 +835,7 @@ export class QueryStore<
       control,
       run: () => this.#adapter.mutate(desc.serviceName, desc.method, [...args]),
       hooks: {
-        onSuccess: (item, cause) =>
+        onSuccess: (item, { cause }) =>
           this.#processEvent(
             desc.serviceName,
             {
@@ -883,15 +879,15 @@ export class QueryStore<
       },
       () => entry.attempt.promise,
       {
-        onSuccess: (item, cause) =>
+        onSuccess: (item, { cause }) =>
           this.#settleQueuedMutation(lane, entry, { ok: true, item }, cause),
-        onError: (error, 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.mutationId,
-              traceId: cause.traceId,
+              mutationId,
+              ...(cause ? { traceId: cause.traceId } : {}),
               serviceName: desc.serviceName,
               method: desc.method,
               id,
@@ -901,7 +897,7 @@ export class QueryStore<
       },
     )
 
-    entry.cause = tracked.cause
+    if (tracked.cause) entry.cause = tracked.cause
     this.#applyProjection(this.#mutationLanes.enqueue(lane, entry), true, tracked.cause)
     entry.attempt.whenReady(() => {
       this.#expediteMutationPredecessors(lane, entry)
@@ -916,10 +912,10 @@ export class QueryStore<
         if (!projection) return false
         entry.args = this.#buildMutationArgs(next)
         this.#applyProjection(projection, true, tracked.cause)
-        this.#events.emit({
+        this.#telemetry.emit({
           kind: 'mutate:update',
           mutationId: tracked.mutationId,
-          traceId: tracked.cause.traceId,
+          ...(tracked.cause ? { traceId: tracked.cause.traceId } : {}),
           serviceName: next.serviceName,
           method: next.method,
           id,
@@ -978,7 +974,7 @@ export class QueryStore<
     lane: MutationLane,
     entry: QueuedMutation,
     error: Error,
-    cause: TraceCause,
+    cause?: TraceCause,
   ): void {
     if (!entry.attempt.cancel(error)) return
     const projection = this.#mutationLanes.cancel(lane, entry)
@@ -990,7 +986,7 @@ export class QueryStore<
     lane: MutationLane,
     entry: QueuedMutation,
     outcome: { ok: true; item: unknown } | { ok: false; error: Error },
-    cause: TraceCause,
+    cause?: TraceCause,
   ): void {
     const settlement = this.#mutationLanes.settle(lane, entry, outcome)
     if (!settlement) return
@@ -1091,14 +1087,14 @@ export class QueryStore<
   }: {
     tracking: MutationTrackingEntry
     control: ScheduledMutationControl | undefined
-    project?: (cause: MutationTraceCause) => void
+    project?: (cause?: MutationTraceCause) => void
     run: () => Promise<unknown>
     hooks?: MutationTrackingHooks<unknown>
   }): RegisteredMutation {
     const attempt = new GatedMutationAttempt(control)
     const tracked = this.#trackMutation(
       tracking,
-      cause => {
+      ({ cause }) => {
         project?.(cause)
         return attempt.promise
       },
@@ -1130,36 +1126,33 @@ export class QueryStore<
    */
   #trackMutation<T>(
     entry: MutationTrackingEntry,
-    run: (cause: MutationTraceCause) => 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 })
-    const cause = {
-      kind: 'mutation' as const,
-      traceId: this.#nextTraceId++,
-      mutationId,
-    }
-    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,
-      traceId: cause.traceId,
+      ...(cause ? { traceId: cause.traceId } : {}),
       serviceName,
       method,
       ...idField,
       optimistic,
       args,
     })
-    const promise = run(cause).then(
+    const promise = run(context).then(
       result => {
-        hooks?.onSuccess?.(result, cause)
+        hooks?.onSuccess?.(result, context)
         this.#mutations.end(mutationId)
-        this.#events.emit({
+        this.#telemetry.emit({
           kind: 'mutate:end',
           mutationId,
-          traceId: cause.traceId,
+          ...(cause ? { traceId: cause.traceId } : {}),
           serviceName,
           method,
           durationMs: Date.now() - startedAt,
@@ -1170,12 +1163,12 @@ export class QueryStore<
       },
       (err: unknown) => {
         const error = normalizeError(err)
-        hooks?.onError?.(error, cause)
+        hooks?.onError?.(error, context)
         this.#mutations.end(mutationId)
-        this.#events.emit({
+        this.#telemetry.emit({
           kind: 'mutate:error',
           mutationId,
-          traceId: cause.traceId,
+          ...(cause ? { traceId: cause.traceId } : {}),
           serviceName,
           method,
           durationMs: Date.now() - startedAt,
@@ -1186,21 +1179,20 @@ export class QueryStore<
         throw error
       },
     )
-    return { mutationId, cause, promise }
+    return { mutationId, ...(cause ? { cause } : {}), promise }
   }
 
   // Query lifecycle
   async #queue(queryId: string, context?: FetchContext): Promise<void> {
     const fetchContext = context ?? {
       reason: 'subscription' as const,
-      causes: [{ kind: 'subscription' as const, traceId: this.#nextTraceId++ }],
+      ...this.#causeContext('subscription'),
     }
-    const graph = new Map((fetchContext.graph ?? []).map(ref => [graphRefKey(ref), ref]))
-    this.#activeFetchGraphs.set(queryId, graph)
+    const graph = this.#telemetry.beginGraph(queryId, fetchContext.graph)
     this.#fetching({ queryId })
     const generation = this.#queryGenerations.get(queryId)
     if (generation === undefined) {
-      if (this.#activeFetchGraphs.get(queryId) === graph) this.#activeFetchGraphs.delete(queryId)
+      this.#telemetry.finishGraph(queryId, graph)
       return
     }
 
@@ -1213,7 +1205,7 @@ export class QueryStore<
           {
             reason: retryAttempt === 0 ? fetchContext.reason : 'retry',
             attempt: retryAttempt,
-            causes: fetchContext.causes,
+            ...(fetchContext.causes ? { causes: fetchContext.causes } : {}),
           },
           graph,
         )
@@ -1244,16 +1236,14 @@ export class QueryStore<
         }
       }
     } finally {
-      if (this.#activeFetchGraphs.get(queryId) === graph) {
-        this.#activeFetchGraphs.delete(queryId)
-      }
+      this.#telemetry.finishGraph(queryId, graph)
     }
   }
 
   async #runFetchAttempt(
     queryId: string,
     generation: number,
-    context: { reason: FetchReason; attempt: number; causes: TraceCause[] },
+    context: { reason: FetchReason; attempt: number; causes?: TraceCause[] },
     graphRefs: ReadonlyMap<string, QueryGraphRef>,
   ): Promise<FetchAttemptOutcome> {
     const query = this.#getQuery(queryId)
@@ -1262,7 +1252,7 @@ export class QueryStore<
     }
 
     const startedAt = Date.now()
-    const fetchId = this.#nextFetchId++
+    const fetchId = this.#telemetry.nextFetchId()
     const trace = {
       generation,
       serviceName: query.desc.serviceName,
@@ -1272,7 +1262,7 @@ export class QueryStore<
     }
     const journalCursor = this.#fetchEventJournal.begin(trace.serviceName)
     const graph = [...graphRefs.values()]
-    this.#events.emit({
+    this.#telemetry.emit({
       kind: 'fetch:start',
       timestamp: startedAt,
       serviceName: trace.serviceName,
@@ -1282,7 +1272,7 @@ export class QueryStore<
       fetchId,
       reason: context.reason,
       attempt: context.attempt,
-      ...(context.causes.length > 0 ? { causes: context.causes } : {}),
+      ...(context.causes ? { causes: context.causes } : {}),
       ...(graph.length > 0 ? { graph } : {}),
       ...('resourceId' in trace ? { resourceId: trace.resourceId } : {}),
       params: trace.params,
@@ -1298,7 +1288,7 @@ export class QueryStore<
         if (journal.overflowed) {
           this.#discardFetchedResponse(queryId)
         } else {
-          const cacheCause = context.causes[0]
+          const cacheCause = context.causes?.[0]
           this.#fetched({
             queryId,
             result,
@@ -1317,7 +1307,7 @@ export class QueryStore<
 
       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,
@@ -1346,7 +1336,7 @@ export class QueryStore<
         })
       }
 
-      this.#events.emit({
+      this.#telemetry.emit({
         kind: 'fetch:error',
         timestamp: endedAt,
         serviceName: trace.serviceName,
@@ -1364,12 +1354,6 @@ export class QueryStore<
     }
   }
 
-  #attachFetchGraph(queryId: string, ref: QueryGraphRef): void {
-    const refs = this.#activeFetchGraphs.get(queryId)
-    if (!refs) return
-    refs.set(graphRefKey(ref), ref)
-  }
-
   #shouldRetry(query: Query<unknown, TMeta, unknown>, retryAttempt: number, error: Error): boolean {
     const retry = this.#normalizeRetry(query.config.retry ?? this.#retry)
     return (
@@ -1393,7 +1377,7 @@ export class QueryStore<
   #takeFollowupFetchContext(queryId: string): FetchContext {
     const context = this.#followupFetchContexts.get(queryId) ?? {
       reason: 'follow-up' as const,
-      causes: [{ kind: 'fetch-rebase' as const, traceId: this.#nextTraceId++ }],
+      ...this.#causeContext('fetch-rebase'),
     }
     this.#followupFetchContexts.delete(queryId)
     return context
@@ -1566,7 +1550,7 @@ export class QueryStore<
   }: {
     queryId: string
     result: StoreResponse<TMeta>
-    journalEvents: readonly ProcessedRealtimeEvent[]
+    journalEvents: readonly ProcessedCacheEvent[]
     cause?: TraceCause
   }): void {
     let shouldRefetch = false
@@ -1681,10 +1665,10 @@ 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) {
+              if (!isCompleteSet && currentItem !== item && this.#telemetry.active) {
                 eventEffects.push({
                   event: {
-                    origin: 'authoritative',
+                    mode: 'server',
                     source: 'fetch',
                     serviceName: query.desc.serviceName,
                     type: currentItem === undefined ? 'created' : 'updated',
@@ -1857,7 +1841,7 @@ export class QueryStore<
       serviceName !== undefined && this.#state.get(serviceName)?.materialized?.queryId === queryId
     this.#requestReconcile(queryId, {
       force: isMaterializedRoot,
-      causes: [{ kind: 'fetch-rebase', traceId: this.#nextTraceId++ }],
+      ...this.#causeContext('fetch-rebase'),
     })
     // An immediate reconciliation has already restored isFetching=true; hidden
     // or inactive queries expose the settled state and remain pending instead.
@@ -1908,21 +1892,18 @@ export class QueryStore<
     this.#realtime.add(serviceName)
   }
 
-  #emitRealtimeForItems(serviceName: string, type: Event['type'], items: unknown[]): TraceCause[] {
-    const causes: TraceCause[] = []
-    for (const item of items) {
-      const traceId = this.#nextTraceId++
-      causes.push({ kind: 'realtime', traceId })
-      this.#events.emit({
-        kind: 'realtime',
-        traceId,
-        serviceName,
-        type,
-        itemId: this.#getIdWarn(serviceName, item),
-        item,
-      })
-    }
-    return causes
+  #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. */
@@ -1930,16 +1911,15 @@ export class QueryStore<
     serviceName: string,
     event: Event,
     source: 'realtime' | 'mutation',
-    cause: TraceCause,
+    cause?: TraceCause,
   ): void {
-    const items = Array.isArray(event.item) ? event.item : [event.item]
     this.#eventQueue.push({
-      origin: 'authoritative',
+      mode: 'server',
       source,
       serviceName,
       type: event.type,
-      items,
-      causes: [cause],
+      item: event.item,
+      ...(cause ? { cause } : {}),
     })
   }
 
@@ -1947,22 +1927,21 @@ export class QueryStore<
     const event = this.#projectionEvent(change)
     if (!event) return null
     return {
-      origin: 'projection',
-      source: 'optimistic',
+      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 ? {} : { causes: [cause] }),
+      ...(cause === undefined ? {} : { cause }),
     }
   }
 
   /** Apply an event immediately — used for mutation results and optimistic writes. */
-  #processEvent(serviceName: string, event: Event, cause: TraceCause): void {
+  #processEvent(serviceName: string, event: Event, cause?: TraceCause): void {
     this.#ingestAuthoritativeEvent(serviceName, event, {
       immediate: true,
       source: 'mutation',
-      cause,
+      ...(cause ? { cause } : {}),
     })
   }
 
@@ -1979,31 +1958,31 @@ export class QueryStore<
     event: Event,
     context:
       | { immediate: false; source: 'realtime' }
-      | { immediate: true; source: 'mutation'; cause: TraceCause },
+      | { immediate: true; source: 'mutation'; cause?: TraceCause },
   ): void {
     const items = Array.isArray(event.item) ? event.item : [event.item]
-    const causes =
-      context.source === 'realtime'
-        ? this.#emitRealtimeForItems(serviceName, event.type, items)
-        : items.map(() => context.cause)
-    for (const [index, item] of items.entries()) {
+    for (const item of items) {
+      const cause =
+        context.source === 'realtime'
+          ? this.#emitRealtime(serviceName, event.type, item)
+          : context.cause
       const accepted = this.#acceptLaneAuthoritative(
         serviceName,
         event.type,
         item,
         context.source,
-        causes[index],
+        cause,
       )
       if (!accepted.handled) {
         this.#enqueueAuthoritativeEvent(
           serviceName,
           { type: event.type, item },
           context.source,
-          causes[index]!,
+          cause,
         )
         continue
       }
-      if (accepted.projection) this.#applyProjection(accepted.projection, false, causes[index])
+      if (accepted.projection) this.#applyProjection(accepted.projection, false, cause)
     }
 
     if (this.#eventQueue.length === 0) return
@@ -2065,7 +2044,7 @@ export class QueryStore<
     excludeQueryId?: string
   }): AppliedEventEffect[] {
     const getId = this.#getIdReader(serviceName)
-    const processedEvents: ProcessedRealtimeEvent[] = []
+    const processedEvents: ProcessedCacheEvent[] = []
     applyEventsToService({
       service,
       serviceName,
@@ -2092,14 +2071,17 @@ 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 = updateQueriesFromEvents({
+      const queryEffects = this.#telemetry.active
+        ? new Map<string, 'merged' | 'reconcile'>()
+        : undefined
+      updateQueriesFromEvents({
         service,
         appliedItems: [event],
         touch,
@@ -2107,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, queryEffects }
+      return { event, reconcileQueryIds, ...(queryEffects ? { queryEffects } : {}) }
     })
   }
 
@@ -2121,29 +2109,31 @@ export class QueryStore<
   ): PublishedEventEffects {
     const immediateReconciles = new Set<string>()
     const reconcileCauses = new Map<string, TraceCause[]>()
-    const resolvedEffects = effects.map(effect => ({
-      ...effect,
-      cause: effect.event.cause ?? this.#fallbackEventCause(effect.event.source),
-    }))
+    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.origin === 'authoritative')
-    const addReconcile = (queryId: string, cause: TraceCause) => {
+      refetchPolicy === 'realtime' && effects.some(effect => effect.event.mode === 'server')
+    const addReconcile = (queryId: string, cause?: TraceCause) => {
       immediateReconciles.add(queryId)
-      const current = reconcileCauses.get(queryId) ?? []
-      reconcileCauses.set(queryId, mergeTraceCauses(current, [cause]))
+      if (!cause) return
+      const merged = this.#telemetry.merge(reconcileCauses.get(queryId), [cause])
+      if (merged) reconcileCauses.set(queryId, merged)
     }
 
-    for (const {
-      event,
-      reconcileQueryIds,
-      queryEffects,
-      observabilityOnly,
-      cause,
-    } of resolvedEffects) {
+    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) addReconcile(queryId, cause)
@@ -2153,26 +2143,26 @@ export class QueryStore<
       // 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)
 
       if (refetchPolicy === 'realtime') {
         const refetchableQueryIds = this.#refetchableQueryIds(serviceName)
-        if (event.origin === 'authoritative') {
+        if (event.mode === 'server') {
           for (const queryId of refetchableQueryIds) {
-            queryEffects.set(queryId, 'reconcile')
+            queryEffects?.set(queryId, 'reconcile')
             addReconcile(queryId, cause)
           }
-        } else if (!hasAuthoritative) {
+        } else if (event.mode === 'optimistic' && !hasAuthoritative) {
           const deferred = this.#mutationLanes.deferQueryIds(
             event.mutationLaneKey,
             refetchableQueryIds,
           )
           if (!deferred) {
             for (const queryId of refetchableQueryIds) {
-              queryEffects.set(queryId, 'reconcile')
+              queryEffects?.set(queryId, 'reconcile')
               addReconcile(queryId, cause)
             }
           }
@@ -2180,33 +2170,40 @@ export class QueryStore<
       }
     }
 
-    for (const { event, queryEffects, cause } of resolvedEffects) {
-      this.#events.emit({
+    for (const { event, queryEffects } of effects) {
+      if (!this.#telemetry.active) break
+      const cause = causeFor(event)
+      this.#telemetry.emit({
         kind: 'cache:updated',
-        traceId: cause.traceId,
-        source: event.source,
+        ...(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 })),
+        queryEffects: [...(queryEffects ?? [])].map(([queryId, outcome]) => ({ queryId, outcome })),
       })
     }
 
     return { reconcileQueryIds: immediateReconciles, reconcileCauses }
   }
 
-  #fallbackEventCause(source: ProcessedRealtimeEvent['source']): TraceCause {
-    const traceId = this.#nextTraceId++
-    if (source === 'realtime') return { kind: 'realtime', traceId }
-    if (source === 'mutation' || source === 'optimistic') return { kind: 'mutation', traceId }
-    if (source === 'fetch') return { kind: 'fetch-rebase', traceId }
-    return { kind: 'manual', traceId }
+  #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({
@@ -2302,7 +2299,7 @@ export class QueryStore<
     }
   }
 
-  #emitProcessedEvent(event: ProcessedRealtimeEvent): void {
+  #emitProcessedEvent(event: ProcessedCacheEvent): void {
     for (const listener of this.#processedEventListeners) {
       try {
         listener(event)
@@ -2351,9 +2348,9 @@ export class QueryStore<
    */
   #requestReconcile(
     queryId: string,
-    { force = false, causes = [] }: { force?: boolean; causes?: readonly TraceCause[] } = {},
+    { force = false, causes }: { force?: boolean; causes?: readonly TraceCause[] } = {},
   ): void {
-    const mergedCauses = mergeTraceCauses([], causes)
+    const mergedCauses = this.#telemetry.merge(undefined, causes)
     if (!force && this.#listenerCount(queryId) === 0) {
       this.#emitReconcileDecision(queryId, 'inactive', mergedCauses)
       this.#markQueryPending(queryId)
@@ -2363,7 +2360,7 @@ export class QueryStore<
     if (this.#visibility.isHidden()) {
       this.#deferredWhileHidden.set(
         queryId,
-        mergeTraceCauses(this.#deferredWhileHidden.get(queryId) ?? [], mergedCauses),
+        this.#telemetry.merge(this.#deferredWhileHidden.get(queryId), mergedCauses),
       )
       this.#emitReconcileDecision(queryId, 'deferred-hidden', mergedCauses)
       this.#markQueryPending(queryId)
@@ -2373,7 +2370,10 @@ export class QueryStore<
     if (this.#reconcileCooldown <= 0) {
       this.#emitReconcileDecision(queryId, 'fetch-now', mergedCauses)
       this.#emitReconcileStarted(queryId, mergedCauses)
-      this.refetch(queryId, { reason: 'reconcile', causes: mergedCauses })
+      this.refetch(queryId, {
+        reason: 'reconcile',
+        ...(mergedCauses ? { causes: mergedCauses } : {}),
+      })
       return
     }
 
@@ -2384,25 +2384,28 @@ export class QueryStore<
       this.#reconcileWindows.set(queryId, {
         lastAt: now,
         trailing: window?.trailing ?? null,
-        causes: [],
       })
       this.#emitReconcileDecision(queryId, 'fetch-now', mergedCauses)
       this.#emitReconcileStarted(queryId, mergedCauses)
-      this.refetch(queryId, { reason: 'reconcile', causes: mergedCauses })
+      this.refetch(queryId, {
+        reason: 'reconcile',
+        ...(mergedCauses ? { causes: mergedCauses } : {}),
+      })
       return
     }
 
-    window.causes = mergeTraceCauses(window.causes, mergedCauses)
+    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)
-        const trailingCauses = current?.causes ?? []
+        const trailingCauses = current?.causes
         if (current) {
           current.trailing = null
-          current.causes = []
+          delete current.causes
         }
         if (!this.#getQuery(queryId)) {
           this.#reconcileWindows.delete(queryId)
@@ -2410,7 +2413,7 @@ export class QueryStore<
         }
         // Re-enter the gate after the window expires unless the tab went hidden or
         // the last subscriber left in the meantime.
-        this.#requestReconcile(queryId, { causes: trailingCauses })
+        this.#requestReconcile(queryId, trailingCauses ? { causes: trailingCauses } : {})
       },
       window.lastAt + this.#reconcileCooldown - now,
     )
@@ -2422,28 +2425,28 @@ export class QueryStore<
   #emitReconcileDecision(
     queryId: string,
     decision: 'fetch-now' | 'coalesced' | 'deferred-hidden' | 'inactive',
-    causes: readonly TraceCause[],
+    causes: readonly TraceCause[] | undefined,
   ): void {
     const serviceName = this.#serviceNamesByQueryId.get(queryId)
     if (serviceName !== undefined) {
-      this.#events.emit({
+      this.#telemetry.emit({
         kind: 'reconcile:decision',
         queryId,
         serviceName,
         decision,
-        ...(causes.length > 0 ? { causes } : {}),
+        ...(causes ? { causes } : {}),
       })
     }
   }
 
-  #emitReconcileStarted(queryId: string, causes: readonly TraceCause[]): void {
+  #emitReconcileStarted(queryId: string, causes: readonly TraceCause[] | undefined): void {
     const serviceName = this.#serviceNamesByQueryId.get(queryId)
     if (serviceName !== undefined) {
-      this.#events.emit({
+      this.#telemetry.emit({
         kind: 'reconcile:started',
         queryId,
         serviceName,
-        ...(causes.length > 0 ? { causes } : {}),
+        ...(causes ? { causes } : {}),
       })
     }
   }
@@ -2455,7 +2458,7 @@ export class QueryStore<
     this.#deferredWhileHidden.clear()
     for (const [queryId, causes] of deferred) {
       if (!this.#getQuery(queryId)) continue
-      this.#requestReconcile(queryId, { causes })
+      this.#requestReconcile(queryId, causes ? { causes } : {})
     }
   }
 
@@ -2518,26 +2521,26 @@ export class QueryStore<
   }
 
   #refetchActiveQueries(
-    traceId: number,
+    traceId: number | undefined,
     queries: readonly { queryId: string; force: boolean }[],
   ): void {
     for (const query of queries) {
       this.#requestReconcile(query.queryId, {
         force: query.force,
-        causes: [{ kind: 'reconnect', traceId }],
+        ...(traceId === undefined ? {} : { causes: [{ kind: 'reconnect' as const, traceId }] }),
       })
     }
   }
 
-  #scheduleReconnectSweep(traceId: number): void {
+  #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) {
       const queries = this.#activeReconnectQueries()
-      this.#events.emit({
+      this.#telemetry.emit({
         kind: 'reconnect:sweep',
-        traceId,
+        ...(traceId === undefined ? {} : { traceId }),
         phase: 'started',
         delayMs: 0,
         queryCount: queries.length,
@@ -2546,14 +2549,19 @@ export class QueryStore<
       return
     }
 
-    this.#events.emit({ kind: 'reconnect:sweep', traceId, phase: 'scheduled', delayMs: delay })
+    this.#telemetry.emit({
+      kind: 'reconnect:sweep',
+      ...(traceId === undefined ? {} : { traceId }),
+      phase: 'scheduled',
+      delayMs: delay,
+    })
 
     const timer = setTimeout(() => {
       this.#reconnectSweepTimer = null
       const queries = this.#activeReconnectQueries()
-      this.#events.emit({
+      this.#telemetry.emit({
         kind: 'reconnect:sweep',
-        traceId,
+        ...(traceId === undefined ? {} : { traceId }),
         phase: 'started',
         delayMs: delay,
         queryCount: queries.length,
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 3f504bd2..b93c3443 100644
--- a/lib/core/queryTypes.ts
+++ b/lib/core/queryTypes.ts
@@ -53,15 +53,14 @@ export interface QueryExecutionOptions {
 interface QueuedEventBase {
   serviceName: string
   type: EventType
-  items: unknown[]
-  source: 'realtime' | 'mutation' | 'optimistic'
-  causes?: readonly TraceCause[]
+  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
@@ -75,19 +74,23 @@ interface ProcessedEventBase {
   previousItem: unknown | null
   /** Always defined — events whose item has no resolvable id are never applied. */
   itemId: EntityKey
-  source: 'realtime' | 'mutation' | 'fetch' | 'optimistic' | 'devtools'
   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 f4281071..204631de 100644
--- a/lib/core/relationalQuery.ts
+++ b/lib/core/relationalQuery.ts
@@ -7,7 +7,7 @@ import type { QueryRef } from './queryRef.js'
 import type { QueryLifecycleConfig } from './queryIdentity.js'
 import type {
   ProcessedProjectionEvent,
-  ProcessedRealtimeEvent,
+  ProcessedCacheEvent,
   QueryConfig,
   QueryDescriptor,
   QueryGraphRef,
@@ -67,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
@@ -220,11 +221,9 @@ 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()
-  #listenerSources: Map<
+  #listeners: Map<
     (state: RelationalQueryState<T>) => void,
-    'subscriber' | 'prepare' | 'prefetch'
+    { staleTime: number; source: 'subscriber' | 'prepare' | 'prefetch' }
   > = new Map()
   #processedEventUnsub: (() => void) | null = null
   #relationalFilterRefetchQueued = false
@@ -336,7 +335,7 @@ export class RelationalQueryRef<
       }
     }
     const snapshot = this.getSnapshot()
-    const listenerSources = [...this.#listenerSources.values()]
+    const listenerMetadata = [...this.#listeners.values()]
     return {
       key: this.#queryId,
       ...(this.#name ? { name: this.#name } : {}),
@@ -344,9 +343,9 @@ export class RelationalQueryRef<
       ast: this.#ast,
       ...(this.#pagedRoot ? { pagination: this.#pagedRoot.inspectPagination() } : {}),
       ...(snapshot.status === 'success' ? { data: snapshot.data } : {}),
-      subscriberCount: listenerSources.filter(source => source === 'subscriber').length,
-      prefetchCount: listenerSources.filter(source => source === 'prefetch').length,
-      prepareCount: listenerSources.filter(source => source === 'prepare').length,
+      subscriberCount: listenerMetadata.filter(({ source }) => source === 'subscriber').length,
+      prefetchCount: listenerMetadata.filter(({ source }) => source === 'prefetch').length,
+      prepareCount: listenerMetadata.filter(({ source }) => source === 'prepare').length,
       nodes,
     }
   }
@@ -403,9 +402,7 @@ export class RelationalQueryRef<
   ): () => void {
     const staleTime = options?.staleTime ?? 0
     const claimsColdStart = this.#coldStartAwaitingSubscriber
-    this.#listeners.add(fn)
-    this.#listenerStaleTimes.set(fn, staleTime)
-    this.#listenerSources.set(fn, options?.source ?? 'subscriber')
+    this.#listeners.set(fn, { staleTime, source: options?.source ?? 'subscriber' })
     this.#staleTime = this.#currentStaleTime()
 
     if (!this.#root) {
@@ -428,8 +425,6 @@ export class RelationalQueryRef<
 
     return () => {
       this.#listeners.delete(fn)
-      this.#listenerStaleTimes.delete(fn)
-      this.#listenerSources.delete(fn)
       this.#staleTime = this.#currentStaleTime()
       this.#root?.setStaleTime(this.#staleTime)
 
@@ -445,15 +440,19 @@ 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 {
+  #beginGraphRun(): string | null {
+    if (!this.#host.queryStore.isObservabilityActive()) {
+      this.#graphRunId = null
+      return null
+    }
     const runId = `${this.#queryId}:${this.#nextGraphRun++}`
     this.#graphRunId = runId
     return runId
@@ -470,7 +469,7 @@ export class RelationalQueryRef<
   }
 
   #ensureFresh(staleTime: number): void {
-    this.#beginGraphRun()
+    if (!this.#graphRunId) this.#beginGraphRun()
     this.#root?.ensureFresh(staleTime, this.#graph('(root)'))
     for (const sub of this.#relationSubs.values()) {
       this.#ensureRelationSubFresh(sub, staleTime)
@@ -934,11 +933,11 @@ 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 &&
@@ -1471,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(),
@@ -1483,9 +1482,9 @@ export class RelationalQueryRef<
 
     const unsubscribeEvents = this.#host.queryStore.subscribeToProcessedEvents(event => {
       if (!affectsFilter(event)) return
-      if (event.origin === 'projection' || event.source === 'devtools') {
+      if (event.mode !== 'server') {
         const laneKeys =
-          event.origin === 'projection' ? new Set([event.mutationLaneKey]) : new Set<string>()
+          event.mode === 'optimistic' ? new Set([event.mutationLaneKey]) : new Set<string>()
         for (const queryId of this.#root?.queryIds() ?? []) {
           this.#host.queryStore.reapplyQuery(queryId, laneKeys)
         }
@@ -1537,7 +1536,7 @@ 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)
@@ -1629,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.
diff --git a/lib/core/windowMaintenance.ts b/lib/core/windowMaintenance.ts
index 6e43c78e..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,72 +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 [index, item] of items.entries()) {
-      const cause = event.causes?.[index]
-      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,
+            previousItem: currItem ?? null,
             itemId,
-            source: event.source,
             ...(cause === undefined ? {} : { cause }),
-            ...(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,
-              source: event.source,
-              ...(cause === undefined ? {} : { cause }),
-              ...(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,
-            itemId,
-            source: event.source,
-            ...(cause === undefined ? {} : { cause }),
-            ...(event.origin === 'projection'
-              ? { origin: event.origin, mutationLaneKey: event.mutationLaneKey }
-              : { origin: event.origin }),
+            ...(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 }),
+        })
+      }
     }
   }
 }
@@ -254,14 +248,14 @@ 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,
@@ -277,7 +271,7 @@ export function diffCompleteSet<TMeta>({
     const previousItem = previousEntities.get(itemId)
     if (!previousItem) {
       events.push({
-        origin: 'authoritative',
+        mode: 'server',
         serviceName,
         type: 'created',
         item,
@@ -287,7 +281,7 @@ export function diffCompleteSet<TMeta>({
       })
     } else if (previousItem !== item) {
       events.push({
-        origin: 'authoritative',
+        mode: 'server',
         serviceName,
         type: 'updated',
         item,
@@ -314,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
@@ -395,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
@@ -418,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)
@@ -509,21 +503,23 @@ 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. */
   defaultSort?: Record<string, number> | undefined
-}): Map<string, 'merged' | 'reconcile'> {
+}): void {
   const context: QueryEventContext<TMeta> = {
     service,
     touch,
@@ -532,7 +528,6 @@ export function updateQueriesFromEvents<TMeta>({
     itemRemoved,
     defaultSort,
   }
-  const effects = new Map<string, 'merged' | 'reconcile'>()
   for (const event of appliedItems) {
     for (const [queryId, query] of service.queries) {
       if (queryId === excludeQueryId || query.config.realtime !== 'merge') continue
@@ -540,13 +535,12 @@ export function updateQueriesFromEvents<TMeta>({
       const result = applyMergeEventToQuery(context, queryId, event)
       if (result === 'reconcile') {
         serverMaintainedQueriesToRefetch.add(queryId)
-        effects.set(queryId, 'reconcile')
+        onEffect?.(queryId, 'reconcile')
       } else if (result === 'applied') {
-        effects.set(queryId, 'merged')
+        onEffect?.(queryId, 'merged')
       }
     }
   }
-  return effects
 }
 
 export type QueryReapplyResult = 'applied' | 'reconcile' | 'ignored'
@@ -650,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/test/fetch-races.test.ts b/test/fetch-races.test.ts
index ee5ebc7f..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,9 @@ 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',
@@ -274,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/relational-query.test.tsx b/test/relational-query.test.tsx
index 7d951374..83ae191f 100644
--- a/test/relational-query.test.tsx
+++ b/test/relational-query.test.tsx
@@ -2966,6 +2966,7 @@ test('inspect: stable read-only projection of live queries', async t => {
   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))
 
@@ -2987,6 +2988,17 @@ test('inspect: stable read-only projection of live queries', async t => {
   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)',
@@ -2996,6 +3008,7 @@ test('inspect: stable read-only projection of live queries', async t => {
 
   unsubEvents()
   unsubSharedRoot()
+  unsubSecondSubscriber()
   unsub()
 })
 

From 4a7bccb095c4c63a93dbbb31e64695d7456816ba Mon Sep 17 00:00:00 2001
From: Karolis Narkevicius <karolis.n@gmail.com>
Date: Mon, 17 Aug 2026 00:04:52 +0100
Subject: [PATCH 42/42] refactor devtools collection and retention

---
 DEVTOOLS_SPEC.md                       |  11 +-
 extensions/src/panel.tsx               |  10 +-
 extensions/src/remote.ts               | 150 +++------------
 lib/core/devtoolsBridge.ts             | 126 ++++++++++---
 lib/devtools/EventsTab.tsx             |   4 +-
 lib/devtools/QueryDetails.tsx          |   6 +-
 lib/devtools/TimelineActivityTable.tsx |  43 ++---
 lib/devtools/collector.ts              | 250 ++++++++++++++++---------
 lib/devtools/historicalValue.ts        |  12 ++
 lib/devtools/timelineModel.ts          | 230 ++++++++---------------
 lib/devtools/timelineTraceStore.ts     |  89 +++++++++
 test/devtools.test.tsx                 |  89 +++++++--
 12 files changed, 570 insertions(+), 450 deletions(-)
 create mode 100644 lib/devtools/historicalValue.ts
 create mode 100644 lib/devtools/timelineTraceStore.ts

diff --git a/DEVTOOLS_SPEC.md b/DEVTOOLS_SPEC.md
index bfefb16f..5443db09 100644
--- a/DEVTOOLS_SPEC.md
+++ b/DEVTOOLS_SPEC.md
@@ -14,13 +14,14 @@ 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
 
@@ -84,8 +85,10 @@ offers a one-step undo. Later fetches or realtime events may overwrite the edit.
 ```
 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
diff --git a/extensions/src/panel.tsx b/extensions/src/panel.tsx
index 458dd74a..f47b0260 100644
--- a/extensions/src/panel.tsx
+++ b/extensions/src/panel.tsx
@@ -1,7 +1,7 @@
 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'
 
@@ -14,10 +14,7 @@ declare const chrome: { devtools: { network: { onNavigated: DevtoolsNavigationEv
 
 function Panel() {
   const session = useMemo(() => new ExtensionSession(), [])
-  const collector = useMemo(
-    () => createCollector(session.figbird, { heartbeatMs: 0, snapshotValues: false }),
-    [session],
-  )
+  const collector = useMemo(() => createRemoteCollector(), [])
   const cacheEditor = useMemo(() => ({ update: session.editCacheEntity }), [session])
   const status = useSyncExternalStore(session.subscribeStatus, session.getStatus, session.getStatus)
 
@@ -34,7 +31,6 @@ function Panel() {
         session.start()
       } else {
         session.stop()
-        session.figbird.reset()
       }
     }
     const updateFromDocument = () => {
@@ -51,7 +47,6 @@ function Panel() {
       document.removeEventListener('visibilitychange', updateFromDocument)
       delete panelWindow[PANEL_VISIBILITY_CALLBACK]
       session.stop()
-      session.figbird.reset()
       collector.reset()
     }
   }, [collector, session])
@@ -63,6 +58,7 @@ function Panel() {
   }, [session])
 
   useEffect(() => session.subscribeReset(() => collector.reset()), [collector, session])
+  useEffect(() => session.subscribeRead(frame => collector.ingest(frame)), [collector, session])
 
   return (
     <FigbirdDevtoolsPanel
diff --git a/extensions/src/remote.ts b/extensions/src/remote.ts
index edf251e5..fe46d93c 100644
--- a/extensions/src/remote.ts
+++ b/extensions/src/remote.ts
@@ -1,9 +1,5 @@
-import type { FigbirdEvent, FigbirdEvents } from '../../lib/core/events.js'
-import type { InspectedCacheService, 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'
 
@@ -22,122 +18,7 @@ interface InspectedWindowApi {
 
 declare const chrome: { devtools: { inspectedWindow: InspectedWindowApi } }
 
-class RemoteFigbird implements FigbirdLikeForDevtools {
-  #cache: InspectedCacheService[] = []
-  #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
-  }
-
-  inspectCache(): InspectedCacheService[] {
-    return this.#cache
-  }
-
-  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
-      ? {
-          ...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
-  }
-
-  reset(): void {
-    this.cancelPending()
-    this.#queries = []
-    this.#cache = []
-    this.#relational = []
-    this.#mutations = []
-    for (const listener of this.#stateListeners) listener(undefined)
-    for (const listener of this.#mutatingListeners) listener()
-  }
-
-  #flush(): void {
-    const read = this.#pending
-    this.#pending = null
-    if (!read) return
-    const stateChanged = Boolean(read.queries || read.cache || read.relational)
-    const mutationsChanged = read.inFlightMutations !== undefined
-    if (read.queries) {
-      this.#queries = read.queries.map(query => ({
-        ...query,
-        fetchedAt: query.fetchedAt,
-        query: query.query,
-      }))
-    }
-    if (read.cache) this.#cache = read.cache
-    if (read.relational) this.#relational = read.relational
-    if (read.inFlightMutations) this.#mutations = read.inFlightMutations
-    for (const event of read.events) {
-      const decoded = decodeEvent(event)
-      for (const listener of this.#eventListeners) listener(decoded)
-    }
-    if (stateChanged) {
-      for (const listener of this.#stateListeners) listener(undefined)
-    }
-    if (mutationsChanged) {
-      for (const listener of this.#mutatingListeners) listener()
-    }
-  }
-}
-
 export class ExtensionSession {
-  readonly figbird = new RemoteFigbird()
   readonly inspection: ExtensionInspectionSession
 
   #connection: DevtoolsBridgeConnection | null = null
@@ -151,6 +32,7 @@ export class ExtensionSession {
   #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
@@ -169,6 +51,11 @@ export class ExtensionSession {
     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,
@@ -205,7 +92,6 @@ export class ExtensionSession {
     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
@@ -216,7 +102,6 @@ export class ExtensionSession {
     const restart = this.#running
     this.stop()
     this.#instanceId = null
-    this.figbird.reset()
     this.inspection.reset()
     for (const listener of this.#resetListeners) listener()
     if (restart) this.start()
@@ -241,7 +126,6 @@ export class ExtensionSession {
           return
         }
         if (this.#instanceId !== null && connection.instanceId !== this.#instanceId) {
-          this.figbird.reset()
           this.inspection.reset()
           for (const listener of this.#resetListeners) listener()
         }
@@ -265,7 +149,7 @@ export class ExtensionSession {
       this.#setConnectedStatus(this.#connection)
       if (poll.read) {
         nextDelay = ACTIVE_POLL_INTERVAL_MS
-        this.figbird.update(poll.read)
+        this.#publishRead(poll.read)
       }
       await this.inspection.refresh()
     } catch {
@@ -309,6 +193,24 @@ 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(
diff --git a/lib/core/devtoolsBridge.ts b/lib/core/devtoolsBridge.ts
index a7fa213b..00b2a993 100644
--- a/lib/core/devtoolsBridge.ts
+++ b/lib/core/devtoolsBridge.ts
@@ -1,7 +1,7 @@
 import type { FigbirdEvent, FigbirdEvents } from './events.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'
 
@@ -15,11 +15,12 @@ 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[]
@@ -76,7 +77,6 @@ interface DevtoolsBridgeSession {
   cacheDirty: boolean
   events: CappedBuffer<FigbirdEvent>
   expires: ReturnType<typeof setTimeout> | null
-  mutationsDirty: boolean
   queriesDirty: boolean
   relationalDirty: boolean
   source: DevtoolsSource
@@ -205,7 +205,6 @@ function createPageBridge(): DevtoolsPageBridge {
         cacheDirty: true,
         events: new CappedBuffer(EVENT_LIMIT),
         expires: null,
-        mutationsDirty: true,
         queriesDirty: true,
         relationalDirty: true,
         source,
@@ -218,10 +217,6 @@ function createPageBridge(): DevtoolsPageBridge {
           if (event.kind === 'cache:updated') session.cacheDirty = true
           session.version++
         }),
-        source.mutating.subscribe(() => {
-          session.mutationsDirty = true
-          session.version++
-        }),
         source.subscribeToStateChanges(() => {
           session.queriesDirty = true
           session.relationalDirty = true
@@ -286,22 +281,28 @@ function createPageBridge(): DevtoolsPageBridge {
         return `{"protocol":2,"version":${session.version},"read":null}`
       }
       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: {
-          ...(session.cacheDirty ? { cache: session.source.inspectCache() } : {}),
-          events: pendingEvents.map(toWireEvent),
-          ...(session.mutationsDirty
-            ? { inFlightMutations: session.source.mutating.getSnapshot() }
+          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.queriesDirty ? { queries: session.source.inspect() } : {}),
-          ...(session.relationalDirty ? { relational: session.source.inspectRelational() } : {}),
         },
       })
       session.events.clear()
       session.cacheDirty = false
-      session.mutationsDirty = false
       session.queriesDirty = false
       session.relationalDirty = false
       return serialized
@@ -370,27 +371,31 @@ function clearStartupCaptureMarker(): void {
   }
 }
 
-function toWireEvent(event: FigbirdEvent): DevtoolsWireEvent {
+function toWireEvent(event: FigbirdEvent, frameBudget?: PayloadBudget): DevtoolsWireEvent {
   switch (event.kind) {
     case 'fetch:start':
       return event.params === undefined
         ? event
-        : { ...event, params: sanitizeDevtoolsPayload(event.params) }
+        : { ...event, params: sanitizeDevtoolsPayload(event.params, frameBudget) }
     case 'realtime':
       return event.item === undefined
         ? event
-        : { ...event, item: sanitizeDevtoolsPayload(event.item) }
+        : { ...event, item: sanitizeDevtoolsPayload(event.item, frameBudget) }
     case 'cache:updated':
       return {
         ...event,
-        item: sanitizeDevtoolsPayload(event.item),
+        item: sanitizeDevtoolsPayload(event.item, frameBudget),
         previousItem:
-          event.previousItem === null ? null : sanitizeDevtoolsPayload(event.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) }
+      return event.args === undefined
+        ? event
+        : { ...event, args: sanitizeDevtoolsArgs(event.args, frameBudget) }
     case 'fetch:error':
     case 'mutate:error':
     case 'action:error':
@@ -400,7 +405,7 @@ function toWireEvent(event: FigbirdEvent): DevtoolsWireEvent {
         error: {
           message: event.error.message,
           name: event.error.name,
-          details: sanitizeDevtoolsPayload(errorDetails(event.error)),
+          details: sanitizeDevtoolsPayload(errorDetails(event.error), frameBudget),
         },
       }
     case 'connection:reconnect-failed':
@@ -410,7 +415,7 @@ function toWireEvent(event: FigbirdEvent): DevtoolsWireEvent {
             error: {
               message: event.error.message,
               name: event.error.name,
-              details: sanitizeDevtoolsPayload(errorDetails(event.error)),
+              details: sanitizeDevtoolsPayload(errorDetails(event.error), frameBudget),
             },
           }
         : event
@@ -419,21 +424,82 @@ function toWireEvent(event: FigbirdEvent): DevtoolsWireEvent {
   }
 }
 
+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[]): readonly unknown[] {
-  const sanitized = sanitizeDevtoolsPayload(args)
+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): unknown {
-  return sanitizePayloadValue(value, 0, new Set<object>(), {
-    nodes: PAYLOAD_MAX_NODES,
-    stringCharacters: PAYLOAD_MAX_STRING_CHARACTERS,
-  })
+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(
diff --git a/lib/devtools/EventsTab.tsx b/lib/devtools/EventsTab.tsx
index b31a7d46..3e9378b1 100644
--- a/lib/devtools/EventsTab.tsx
+++ b/lib/devtools/EventsTab.tsx
@@ -272,7 +272,7 @@ function EventDetails({
 }) {
   const { colors, styles } = useDevtoolsTheme()
   const queryId = group?.queryId ?? eventQueryId(item.event)
-  const payload = item.payloadState === 'evicted' ? undefined : eventPayload(item.event)
+  const payload = item.payload?.state === 'evicted' ? undefined : eventPayload(item.event)
   return (
     <DetailsPane
       title={group?.kind ?? item.event.kind}
@@ -335,7 +335,7 @@ function EventDetails({
           value={payload}
           label={eventPayloadLabel(item.event)}
           emptyLabel={
-            item.payloadState === 'evicted'
+            item.payload?.state === 'evicted'
               ? 'Payload vacuumed to keep the recording bounded'
               : 'No payload'
           }
diff --git a/lib/devtools/QueryDetails.tsx b/lib/devtools/QueryDetails.tsx
index 6f08edf4..dd08d196 100644
--- a/lib/devtools/QueryDetails.tsx
+++ b/lib/devtools/QueryDetails.tsx
@@ -215,13 +215,13 @@ export function QueryDetails({
               <div style={{ marginBottom: 10 }}>
                 <JsonViewer
                   value={
-                    activeQuery.lastError.detailsState === 'evicted'
+                    activeQuery.lastError.details?.state === 'evicted'
                       ? undefined
-                      : activeQuery.lastError.details
+                      : activeQuery.lastError.details?.value
                   }
                   label='Error details'
                   emptyLabel={
-                    activeQuery.lastError.detailsState === 'evicted'
+                    activeQuery.lastError.details?.state === 'evicted'
                       ? 'Original error details vacuumed to keep memory bounded'
                       : 'No structured error details captured'
                   }
diff --git a/lib/devtools/TimelineActivityTable.tsx b/lib/devtools/TimelineActivityTable.tsx
index a3e6b230..6c74ad22 100644
--- a/lib/devtools/TimelineActivityTable.tsx
+++ b/lib/devtools/TimelineActivityTable.tsx
@@ -8,6 +8,7 @@ import {
 } 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 {
@@ -641,10 +642,10 @@ function ActivityDetails({
       {activity.error ? (
         <DetailBlock>
           <JsonViewer
-            value={activity.errorDetailsState === 'evicted' ? undefined : activity.errorDetails}
+            value={historicalValue(activity.errorDetails)}
             label='Error details'
             emptyLabel={
-              activity.errorDetailsState === 'evicted'
+              activity.errorDetails?.state === 'evicted'
                 ? 'Original error details vacuumed to keep the recording bounded'
                 : 'No structured error details captured'
             }
@@ -664,10 +665,10 @@ function ActivityDetails({
         <>
           <DetailBlock>
             <JsonViewer
-              value={activity.write.argsState === 'evicted' ? undefined : activity.write.payload}
+              value={historicalValue(activity.write.payload)}
               label='Payload'
               emptyLabel={
-                activity.write.argsState === 'evicted'
+                activity.write.payload?.state === 'evicted'
                   ? 'Original payload vacuumed to keep the recording bounded'
                   : 'No payload'
               }
@@ -675,16 +676,16 @@ function ActivityDetails({
           </DetailBlock>
           <DetailBlock>
             <JsonViewer
-              value={activity.write.argsState === 'evicted' ? undefined : activity.write.args}
+              value={historicalValue(activity.write.args)}
               label='Arguments'
               emptyLabel={
-                activity.write.argsState === 'evicted'
+                activity.write.args?.state === 'evicted'
                   ? 'Original arguments vacuumed to keep the recording bounded'
                   : 'No arguments'
               }
             />
           </DetailBlock>
-          {activity.write.argsState === 'evicted' && activity.livePayload !== undefined ? (
+          {activity.write.args?.state === 'evicted' && activity.livePayload !== undefined ? (
             <DetailBlock>
               <JsonViewer
                 value={activity.livePayload}
@@ -695,16 +696,16 @@ function ActivityDetails({
         </>
       ) : activity.kind === 'fetch' ? (
         <>
-          {activity.payload !== undefined || activity.payloadState === 'evicted' ? (
+          {activity.payload !== undefined ? (
             <DetailBlock>
               <JsonViewer
-                value={activity.payload}
+                value={historicalValue(activity.payload)}
                 label='Parameters at fetch time'
                 emptyLabel='Original parameters vacuumed to keep the recording bounded'
               />
             </DetailBlock>
           ) : null}
-          {activity.payloadState === 'evicted' && activity.livePayload !== undefined ? (
+          {activity.payload?.state === 'evicted' && activity.livePayload !== undefined ? (
             <DetailBlock>
               <JsonViewer value={activity.livePayload} label='Current query parameters' />
             </DetailBlock>
@@ -712,26 +713,26 @@ function ActivityDetails({
           <DetailBlock>
             <JsonViewer
               value={
-                activity.dataState === undefined
+                activity.data === undefined
                   ? activity.liveData
-                  : activity.dataState === 'evicted'
+                  : activity.data.state === 'evicted'
                     ? undefined
-                    : activity.data
+                    : activity.data.value
               }
-              label={activity.dataState ? 'Response data at fetch time' : 'Current query data'}
+              label={activity.data ? 'Response data at fetch time' : 'Current query data'}
               emptyLabel={
-                activity.dataState === 'evicted'
+                activity.data?.state === 'evicted'
                   ? 'Original response vacuumed to keep the recording bounded'
                   : 'No query data available'
               }
             />
           </DetailBlock>
-          {activity.dataState === 'evicted' && activity.liveData !== undefined ? (
+          {activity.data?.state === 'evicted' && activity.liveData !== undefined ? (
             <DetailBlock>
               <JsonViewer
                 value={activity.liveData}
                 label={
-                  activity.dataState === 'evicted'
+                  activity.data?.state === 'evicted'
                     ? 'Current query data — original response vacuumed'
                     : 'Current query data'
                 }
@@ -743,16 +744,16 @@ function ActivityDetails({
         <>
           <DetailBlock>
             <JsonViewer
-              value={activity.payloadState === 'evicted' ? undefined : activity.payload}
+              value={historicalValue(activity.payload)}
               label='Realtime payload'
               emptyLabel={
-                activity.payloadState === 'evicted'
+                activity.payload?.state === 'evicted'
                   ? 'Original payload vacuumed to keep the recording bounded'
                   : 'No realtime payload captured'
               }
             />
           </DetailBlock>
-          {activity.payloadState === 'evicted' && activity.livePayload !== undefined ? (
+          {activity.payload?.state === 'evicted' && activity.livePayload !== undefined ? (
             <DetailBlock>
               <JsonViewer
                 value={activity.livePayload}
@@ -764,7 +765,7 @@ function ActivityDetails({
       ) : activity.kind === 'connection' ? (
         <DetailBlock>
           <JsonViewer
-            value={activity.payload}
+            value={historicalValue(activity.payload)}
             label='Connection event'
             emptyLabel='No connection event captured'
           />
diff --git a/lib/devtools/collector.ts b/lib/devtools/collector.ts
index 4f4d2e29..a6cdf0cd 100644
--- a/lib/devtools/collector.ts
+++ b/lib/devtools/collector.ts
@@ -4,16 +4,16 @@ import type {
   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[]
@@ -32,22 +32,20 @@ interface CollectorOptions {
   writeLimit?: number
 }
 
-export type PayloadRetentionState = 'retained' | 'evicted'
-
 export interface QuerySpan {
   startAt: number
   endAt?: number
   ok?: boolean
   fetchId?: number
   reason?: string
+  causeKinds?: string[]
   traceIds?: number[]
   graph?: Extract<FigbirdEvent, { kind: 'fetch:start' }>['graph']
-  params?: unknown
-  paramsState?: PayloadRetentionState
-  result?: unknown
-  resultState?: PayloadRetentionState
-  errorDetails?: unknown
-  errorDetailsState?: PayloadRetentionState
+  itemCount?: number
+  durationMs?: number
+  params?: HistoricalValue
+  result?: HistoricalValue
+  errorDetails?: HistoricalValue
 }
 
 export interface QueryRecord extends Omit<
@@ -71,8 +69,7 @@ export interface QueryRecord extends Omit<
     message: string
     at: number
     generation: number
-    details?: unknown
-    detailsState?: PayloadRetentionState
+    details?: HistoricalValue
   }
 }
 
@@ -81,7 +78,7 @@ export interface DevtoolsEvent {
   at: number
   wallAt: number
   event: FigbirdEvent
-  payloadState?: PayloadRetentionState
+  payload?: HistoricalValue
 }
 
 export interface TimelineRealtimeEvent {
@@ -90,8 +87,7 @@ export interface TimelineRealtimeEvent {
   traceId?: number
   type?: Extract<FigbirdEvent, { kind: 'realtime' }>['type']
   itemId?: string | number
-  payload?: unknown
-  payloadState?: PayloadRetentionState
+  payload?: HistoricalValue
 }
 
 type ConnectionFigbirdEvent = Extract<
@@ -111,12 +107,15 @@ export interface TimelineConnectionEvent {
   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
 }
@@ -136,10 +135,8 @@ export interface WriteRecord {
   optimistic?: boolean
   rolledBack?: boolean
   error?: string
-  errorDetails?: unknown
-  errorDetailsState?: PayloadRetentionState
-  args?: readonly unknown[]
-  argsState?: PayloadRetentionState
+  errorDetails?: HistoricalValue
+  args?: HistoricalValue<readonly unknown[]>
   traceId?: number
 }
 
@@ -182,6 +179,17 @@ export interface Collector {
   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<
   InspectedQuery,
   'errorCount' | 'fetchCount' | 'lastDurationMs' | 'totalDurationMs'
@@ -217,7 +225,7 @@ const EMPTY_SNAPSHOT: DevtoolsSnapshot = {
   queries: [],
   relational: [],
   events: [],
-  timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
+  timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [], traces: [] },
   writes: [],
 }
 
@@ -421,17 +429,34 @@ export function createCollector(
   figbird: FigbirdLikeForDevtools,
   options: CollectorOptions = {},
 ): Collector {
-  return new FigbirdCollector(figbird, {
+  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: options.heartbeatMs ?? 5_000,
+    heartbeatMs: overrides.heartbeatMs ?? options.heartbeatMs ?? 5_000,
     payloadLimit: options.payloadLimit ?? 200,
     payloadNodeLimit: options.payloadNodeLimit ?? 20_000,
     queryHistoryLimit: options.queryHistoryLimit ?? 250,
-    snapshotValues: options.snapshotValues ?? true,
+    snapshotValues: overrides.snapshotValues ?? options.snapshotValues ?? true,
     spanLimit: options.spanLimit ?? 50,
     timelineLimit: options.timelineLimit ?? 2_000,
     writeLimit: options.writeLimit ?? 250,
-  })
+  }
 }
 
 interface ResolvedCollectorOptions {
@@ -459,7 +484,10 @@ type TimelineEvictionCandidate =
   | { 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
@@ -473,7 +501,6 @@ class FigbirdCollector implements Collector {
   #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
 
@@ -483,6 +510,8 @@ class FigbirdCollector implements Collector {
   #events: CappedBuffer<DevtoolsEvent>
   #timelineRealtime: CappedBuffer<TimelineRealtimeEvent>
   #timelineConnection: CappedBuffer<TimelineConnectionEvent>
+  #timelineTraces = new TimelineTraceStore()
+  #wallClockOffset = now() - Date.now()
   #timelineStartedAt = now()
   #timelineEvictedCount = 0
   #timelinePayloadsEvicted = 0
@@ -500,7 +529,7 @@ class FigbirdCollector implements Collector {
 
   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
@@ -522,17 +551,14 @@ class FigbirdCollector implements Collector {
     this.#refreshRelational()
     this.#refreshCache()
     this.#sourceStateDirty = false
-    this.#eventUnsub = this.#figbird.events.subscribe(event => {
-      this.#recordEvent(event)
-      this.#scheduleNotify()
-    })
-    this.#stateUnsub =
-      this.#figbird.subscribeToStateChanges?.(() => {
-        this.#sourceStateDirty = true
+    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) {
@@ -547,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
   }
 
@@ -563,6 +587,16 @@ 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.#trimTimeline()
@@ -592,6 +626,7 @@ class FigbirdCollector implements Collector {
         laneOrder: [],
         realtime: this.#timelineRealtime.toArray().map(item => ({ ...item })),
         connection: this.#timelineConnection.toArray(),
+        traces: this.#timelineTraces.snapshot(),
         evictedCount: this.#timelineEvictedCount,
         payloadsEvicted: this.#timelinePayloadsEvicted,
       },
@@ -615,6 +650,7 @@ class FigbirdCollector implements Collector {
     }
     this.#timelineRealtime.clear()
     this.#timelineConnection.clear()
+    this.#timelineTraces.clear()
     this.#clearSettledWrites()
     this.#timelineStartedAt = now()
     this.#timelineEvictedCount = 0
@@ -638,6 +674,7 @@ class FigbirdCollector implements Collector {
     this.#events.clear()
     this.#timelineRealtime.clear()
     this.#timelineConnection.clear()
+    this.#timelineTraces.clear()
     this.#timelineStartedAt = now()
     this.#timelineEvictedCount = 0
     this.#timelinePayloadsEvicted = 0
@@ -646,6 +683,9 @@ class FigbirdCollector implements Collector {
     this.#writes.clear()
     this.#cacheProvenance.clear()
     this.#fetchTraces.clear()
+    this.#remoteQueries = []
+    this.#remoteCache = []
+    this.#remoteRelational = []
     this.#sourceStateDirty = true
     this.#payloads.clear()
     this.#queryErrorPayloadHandles.clear()
@@ -679,10 +719,8 @@ class FigbirdCollector implements Collector {
   }
 
   #recordEvent(event: FigbirdEvent): void {
-    const receivedAt = now()
-    const receivedWallAt = Date.now()
-    const wallAt = event.timestamp ?? receivedWallAt
-    const at = receivedAt + (wallAt - receivedWallAt)
+    const wallAt = event.timestamp ?? Date.now()
+    const at = wallAt + this.#wallClockOffset
     const capturedEvent = this.#captureEvent(event)
     const captured: DevtoolsEvent = {
       id: this.#nextEventId++,
@@ -698,6 +736,7 @@ class FigbirdCollector implements Collector {
     switch (capturedEvent.kind) {
       case 'fetch:start':
         this.#recordFetchStart(capturedEvent, at)
+        this.#timelineTraces.recordFetch(capturedEvent.causes)
         break
       case 'fetch:end':
       case 'fetch:error':
@@ -713,7 +752,7 @@ class FigbirdCollector implements Collector {
             ...(capturedEvent.traceId === undefined ? {} : { traceId: capturedEvent.traceId }),
             ...(capturedEvent.item === undefined
               ? {}
-              : { payload: capturedEvent.item, payloadState: 'retained' as const }),
+              : { payload: retainedValue(capturedEvent.item) }),
           }
           this.#retainRealtimePayload(timelineItem)
           const evictedRealtime = this.#timelineRealtime.push(timelineItem)
@@ -744,6 +783,8 @@ class FigbirdCollector implements Collector {
       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)}`,
             {
@@ -756,6 +797,11 @@ class FigbirdCollector implements Collector {
           )
         }
         break
+      case 'reconnect:sweep':
+        if (capturedEvent.traceId !== undefined) {
+          this.#timelineTraces.recordSweep(capturedEvent.traceId, capturedEvent.queryCount)
+        }
+        break
       case 'reconcile:started':
         {
           const record = this.#queries.get(capturedEvent.queryId)
@@ -803,7 +849,7 @@ class FigbirdCollector implements Collector {
   #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)
@@ -857,7 +903,7 @@ class FigbirdCollector implements Collector {
 
   #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)
@@ -883,7 +929,7 @@ class FigbirdCollector implements Collector {
   }
 
   #refreshCache(): void {
-    const inspectedCache = this.#figbird.inspectCache?.() ?? []
+    const inspectedCache = this.#inspectCache()
     const liveCacheKeys = new Set<string>()
     this.#cache = inspectedCache.map(service => ({
       ...service,
@@ -911,6 +957,9 @@ class FigbirdCollector implements Collector {
       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,
       })
@@ -920,14 +969,11 @@ class FigbirdCollector implements Collector {
         ...(event.reason ? { reason: event.reason } : {}),
         ...(traceIds.length > 0 ? { traceIds } : {}),
         ...(event.graph && event.graph.length > 0 ? { graph: event.graph } : {}),
-        ...(event.params === undefined
-          ? {}
-          : { params: event.params, paramsState: 'retained' as const }),
+        ...(event.params === undefined ? {} : { params: retainedValue(event.params) }),
       }
       if (event.params !== undefined) {
         this.#retainSpanPayload(span, event.params, () => {
-          span.params = undefined
-          span.paramsState = 'evicted'
+          span.params = EVICTED_VALUE
         })
       }
       const replaced = record.metrics.activeSpans.get(event.fetchId)
@@ -1004,16 +1050,16 @@ class FigbirdCollector implements Collector {
         generation: event.generation,
         ...(capturedErrorDetails === undefined
           ? {}
-          : { details: capturedErrorDetails, detailsState: 'retained' as const }),
+          : { details: retainedValue(capturedErrorDetails) }),
       }
       if (capturedErrorDetails !== undefined) {
         this.#retainQueryError(event.queryId, metrics, capturedErrorDetails, at)
       }
     }
 
-    const inspectedQuery = this.#figbird
-      .inspect()
-      .find(query => query.queryId === event.queryId && query.generation === event.generation)
+    const inspectedQuery = this.#inspectQueries().find(
+      query => query.queryId === event.queryId && query.generation === event.generation,
+    )
     const historyEntry =
       event.fetchId === undefined
         ? undefined
@@ -1032,27 +1078,27 @@ class FigbirdCollector implements Collector {
       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: capturedErrorDetails, errorDetailsState: 'retained' as const }),
+        : { errorDetails: retainedValue(capturedErrorDetails) }),
     }
     if (capturedErrorDetails !== undefined) {
       this.#retainSpanPayload(span, capturedErrorDetails, () => {
-        span.errorDetails = undefined
-        span.errorDetailsState = 'evicted'
+        span.errorDetails = EVICTED_VALUE
       })
     }
     const inspectedResult = ok ? inspectedQuery?.data : undefined
     if (inspectedResult !== undefined) {
-      span.result = this.#captureValue(inspectedResult)
-      span.resultState = 'retained'
-      this.#retainSpanPayload(span, span.result, () => {
-        span.result = undefined
-        span.resultState = 'evicted'
+      const result = this.#captureValue(inspectedResult)
+      span.result = retainedValue(result)
+      this.#retainSpanPayload(span, result, () => {
+        span.result = EVICTED_VALUE
       })
     }
     const evictedSpan = metrics.spans.push(span)
@@ -1101,7 +1147,7 @@ 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)
 
@@ -1109,7 +1155,7 @@ class FigbirdCollector implements Collector {
       this.#writes.set(id, {
         ...base,
         optimistic: event.optimistic,
-        args: this.#captureArgs(event.args),
+        args: retainedValue(this.#captureArgs(event.args)),
       })
       return
     }
@@ -1131,8 +1177,7 @@ class FigbirdCollector implements Collector {
         endedAt: at,
         durationMs: event.durationMs,
         error: errorMessage(event.error),
-        errorDetails: details,
-        errorDetailsState: 'retained',
+        errorDetails: retainedValue(details),
         ...(base.optimistic || base.rolledBack ? { rolledBack: true } : {}),
       })
       this.#retainWriteError(id, details)
@@ -1162,7 +1207,7 @@ 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') {
@@ -1176,8 +1221,7 @@ class FigbirdCollector implements Collector {
         ...(event.kind === 'action:error'
           ? {
               error: errorMessage(event.error),
-              errorDetails: details,
-              errorDetailsState: 'retained' as const,
+              errorDetails: retainedValue(details),
             }
           : {}),
       })
@@ -1263,20 +1307,20 @@ class FigbirdCollector implements Collector {
   #retainEventPayload(item: DevtoolsEvent): void {
     const payload = payloadForRetention(item.event)
     if (payload === undefined) return
-    item.payloadState = 'retained'
+    item.payload = retainedValue(payload)
     const handle = this.#payloads.retain(payload, () => {
       item.event = eventWithoutPayload(item.event)
-      item.payloadState = 'evicted'
+      item.payload = EVICTED_VALUE
       this.#scheduleNotify()
     })
     this.#eventPayloadHandles.set(item, handle)
   }
 
   #retainRealtimePayload(item: TimelineRealtimeEvent): void {
-    if (item.payload === undefined) return
-    const handle = this.#payloads.retain(item.payload, () => {
-      item.payload = undefined
-      item.payloadState = 'evicted'
+    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()
     })
@@ -1305,9 +1349,7 @@ class FigbirdCollector implements Collector {
     this.#payloads.release(this.#queryErrorPayloadHandles.get(queryId))
     const handle = this.#payloads.retain(details, () => {
       if (metrics.lastError?.at !== at) return
-      const { details: _details, ...metadata } = metrics.lastError
-      void _details
-      metrics.lastError = { ...metadata, detailsState: 'evicted' }
+      metrics.lastError = { ...metrics.lastError, details: EVICTED_VALUE }
       this.#scheduleNotify()
     })
     this.#queryErrorPayloadHandles.set(queryId, handle)
@@ -1315,15 +1357,12 @@ class FigbirdCollector implements Collector {
 
   #retainWriteArgs(id: string): void {
     const write = this.#writes.get(id)
-    if (!write?.args) return
+    if (write?.args?.state !== 'retained') return
     this.#releaseWritePayloads(id)
-    write.argsState = 'retained'
-    const handle = this.#payloads.retain(write.args, () => {
+    const handle = this.#payloads.retain(write.args.value, () => {
       const current = this.#writes.get(id)
       if (!current) return
-      const { args: _args, ...metadata } = current
-      void _args
-      this.#writes.set(id, { ...metadata, argsState: 'evicted' })
+      this.#writes.set(id, { ...current, args: EVICTED_VALUE })
       this.#timelinePayloadsEvicted++
       this.#scheduleNotify()
     })
@@ -1334,9 +1373,7 @@ class FigbirdCollector implements Collector {
     const handle = this.#payloads.retain(details, () => {
       const current = this.#writes.get(id)
       if (!current) return
-      const { errorDetails: _details, ...metadata } = current
-      void _details
-      this.#writes.set(id, { ...metadata, errorDetailsState: 'evicted' })
+      this.#writes.set(id, { ...current, errorDetails: EVICTED_VALUE })
       this.#timelinePayloadsEvicted++
       this.#scheduleNotify()
     })
@@ -1414,6 +1451,31 @@ class FigbirdCollector implements Collector {
     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 {
@@ -1428,4 +1490,16 @@ class FigbirdCollector implements Collector {
       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/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/timelineModel.ts b/lib/devtools/timelineModel.ts
index fc3ebebc..6d670952 100644
--- a/lib/devtools/timelineModel.ts
+++ b/lib/devtools/timelineModel.ts
@@ -1,14 +1,18 @@
 import type { FigbirdEvent } from '../core/events.js'
-import { errorDetails } from '../core/errors.js'
 import type { QueryGraphRef } from '../core/queryTypes.js'
 import type {
-  DevtoolsEvent,
   DevtoolsSnapshot,
-  PayloadRetentionState,
   QueryRecord,
+  TimelineTraceSummary,
   WriteRecord,
 } from './collector.js'
-import { buildTraceIndex, displayEvent, traceIdsForEvent } from './eventModel.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'
 
@@ -42,21 +46,17 @@ export interface TimelineActivity {
   traceId?: number
   entity?: { serviceName: string; itemId: string | number }
   durationMs?: number
-  payload?: unknown
-  payloadState?: PayloadRetentionState
+  payload?: HistoricalValue
   livePayload?: unknown
-  data?: unknown
-  dataState?: PayloadRetentionState
+  data?: HistoricalValue
   liveData?: unknown
-  errorDetails?: unknown
-  errorDetailsState?: PayloadRetentionState
+  errorDetails?: HistoricalValue
   write?: {
     id: string
     type: WriteRecord['type']
     optimistic: boolean
-    payload: unknown
-    args: readonly unknown[]
-    argsState?: PayloadRetentionState
+    payload?: HistoricalValue
+    args?: HistoricalValue<readonly unknown[]>
     initiatingAction?: {
       id: string
       name: string
@@ -77,12 +77,12 @@ export function buildTimelineActivities(
   model: DevtoolsModel,
   nowPoint: number,
 ): TimelineActivity[] {
-  const eventContext = buildEventContext(snapshot.events)
+  const traces = new Map(snapshot.timeline.traces.map(trace => [trace.traceId, trace]))
   const activities = [
-    ...buildFetchActivities(snapshot.queries, model, eventContext, nowPoint),
-    ...buildRealtimeActivities(snapshot, eventContext),
+    ...buildFetchActivities(snapshot.queries, model, nowPoint),
+    ...buildRealtimeActivities(snapshot, traces),
     ...snapshot.timeline.connection.map((item, index) =>
-      connectionActivity(item.at, item.event, index, eventContext),
+      connectionActivity(item.at, item.event, index, traces),
     ),
     ...buildWriteActivities(
       snapshot.writes.filter(write => write.startedAt >= snapshot.timeline.startedAt),
@@ -108,9 +108,25 @@ function compareTimelineActivities(first: TimelineActivity, second: TimelineActi
     }
   }
 
+  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
@@ -137,41 +153,9 @@ export function timelineExtent(
   return { start, end: Math.max(start + 1_000, latest) }
 }
 
-interface EventContext {
-  fetchStarts: ReadonlyMap<number, DevtoolsEvent>
-  fetchTerminals: ReadonlyMap<number, DevtoolsEvent>
-  traceEvents: ReadonlyMap<number, readonly DevtoolsEvent[]>
-}
-
-function buildEventContext(events: readonly DevtoolsEvent[]): EventContext {
-  const traceIndex = buildTraceIndex(events)
-  const fetchStarts = new Map<number, DevtoolsEvent>()
-  const fetchTerminals = new Map<number, DevtoolsEvent>()
-  const traceEvents = new Map<number, DevtoolsEvent[]>()
-  for (const item of events) {
-    const event = item.event
-    if (event.kind === 'fetch:start' && event.fetchId !== undefined) {
-      fetchStarts.set(event.fetchId, item)
-    }
-    if (
-      (event.kind === 'fetch:end' || event.kind === 'fetch:error') &&
-      event.fetchId !== undefined
-    ) {
-      fetchTerminals.set(event.fetchId, item)
-    }
-    for (const traceId of traceIdsForEvent(event, traceIndex)) {
-      const related = traceEvents.get(traceId) ?? []
-      related.push(item)
-      traceEvents.set(traceId, related)
-    }
-  }
-  return { fetchStarts, fetchTerminals, traceEvents }
-}
-
 function buildFetchActivities(
   queries: readonly QueryRecord[],
   model: DevtoolsModel,
-  context: EventContext,
   nowPoint: number,
 ): TimelineActivity[] {
   const operationLabels = new Map(
@@ -183,24 +167,11 @@ function buildFetchActivities(
   )
   return queries.flatMap(query =>
     query.spans.map((span, index) => {
-      const start = span.fetchId === undefined ? undefined : context.fetchStarts.get(span.fetchId)
-      const terminal =
-        span.fetchId === undefined ? undefined : context.fetchTerminals.get(span.fetchId)
       const traceId = span.traceIds?.[0]
-      const traceEvents = traceId === undefined ? [] : (context.traceEvents.get(traceId) ?? [])
-      const terminalEvent = terminal?.event
-      const failed = span.ok === false || terminalEvent?.kind === 'fetch:error'
+      const failed = span.ok === false
       const pending = span.endAt === undefined
-      const itemCount =
-        terminalEvent?.kind === 'fetch:end'
-          ? terminalEvent.itemCount
-          : pending
-            ? undefined
-            : query.itemCount
-      const durationMs =
-        terminalEvent?.kind === 'fetch:end' || terminalEvent?.kind === 'fetch:error'
-          ? terminalEvent.durationMs
-          : Math.max(0, (span.endAt ?? nowPoint) - span.startAt)
+      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 =
@@ -210,48 +181,16 @@ function buildFetchActivities(
               ...new Set(scopes.map(item => item.title)),
             ].join('\n')
           : undefined
-      const effect = cacheEffect(
-        traceEvents.filter(
-          item => item.event.kind !== 'cache:updated' || item.event.source === 'fetch',
-        ),
-        failed ? '—' : 'cache refreshed',
-      )
-      const trigger = fetchTrigger(
-        span.reason ?? (start?.event.kind === 'fetch:start' ? start.event.reason : undefined),
-        start?.event.kind === 'fetch:start' ? start.event.causes : undefined,
-      )
+      const effect = failed ? '—' : 'cache refreshed'
+      const trigger = fetchTrigger(span.reason, span.causeKinds)
       const result = failed
-        ? terminalEvent?.kind === 'fetch:error'
-          ? terminalEvent.error.message
-          : (query.lastError?.message ?? 'failed')
+        ? (query.lastError?.message ?? 'failed')
         : pending
           ? 'pending'
           : `${itemCount ?? 0} ${itemCount === 1 ? 'row' : 'rows'}`
-      const payload =
-        span.paramsState === 'retained'
-          ? span.params
-          : start?.event.kind === 'fetch:start' && start.payloadState !== 'evicted'
-            ? start.event.params
-            : undefined
-      const payloadState: PayloadRetentionState | undefined =
-        payload !== undefined
-          ? 'retained'
-          : span.paramsState === 'evicted' || start?.payloadState === 'evicted'
-            ? 'evicted'
-            : undefined
+      const payload = span.params
       const livePayload = query.method === 'get' ? query.resourceId : query.query
-      const capturedErrorDetails =
-        span.errorDetailsState === 'retained'
-          ? span.errorDetails
-          : terminalEvent?.kind === 'fetch:error' && terminal?.payloadState !== 'evicted'
-            ? errorDetails(terminalEvent.error)
-            : undefined
-      const capturedErrorDetailsState =
-        capturedErrorDetails !== undefined
-          ? 'retained'
-          : span.errorDetailsState === 'evicted' || terminal?.payloadState === 'evicted'
-            ? 'evicted'
-            : undefined
+      const capturedErrorDetails = span.errorDetails
       return searchable({
         id: `fetch:${span.fetchId ?? `${query.queryId}:${span.startAt}:${index}`}`,
         kind: 'fetch',
@@ -281,13 +220,10 @@ function buildFetchActivities(
         ...(traceId === undefined ? {} : { traceId }),
         durationMs,
         ...(payload === undefined ? {} : { payload }),
-        ...(payloadState ? { payloadState } : {}),
         ...(query.present && livePayload !== undefined ? { livePayload } : {}),
         ...(span.result === undefined ? {} : { data: span.result }),
-        ...(span.resultState ? { dataState: span.resultState } : {}),
         ...(query.present && query.data !== undefined ? { liveData: query.data } : {}),
         ...(capturedErrorDetails === undefined ? {} : { errorDetails: capturedErrorDetails }),
-        ...(capturedErrorDetailsState ? { errorDetailsState: capturedErrorDetailsState } : {}),
         error: failed,
       })
     }),
@@ -304,14 +240,13 @@ function normalizeScopeLabel(label: string): string {
 
 function buildRealtimeActivities(
   snapshot: DevtoolsSnapshot,
-  context: EventContext,
+  traces: ReadonlyMap<number, TimelineTraceSummary>,
 ): TimelineActivity[] {
   return snapshot.timeline.realtime.map((item, index) => {
-    const traceEvents =
-      item.traceId === undefined ? [] : (context.traceEvents.get(item.traceId) ?? [])
-    const queryIds = affectedQueryIds(traceEvents)
-    const effect = cacheEffect(traceEvents, '—')
-    const fetches = traceEvents.filter(related => related.event.kind === 'fetch:start').length
+    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}`,
@@ -334,7 +269,6 @@ function buildRealtimeActivities(
         : { entity: { serviceName: item.serviceName, itemId: item.itemId } }),
       durationMs: 0,
       ...(item.payload === undefined ? {} : { payload: item.payload }),
-      ...(item.payloadState ? { payloadState: item.payloadState } : {}),
       ...(item.itemId === undefined
         ? {}
         : {
@@ -349,22 +283,20 @@ function connectionActivity(
   at: number,
   event: Extract<FigbirdEvent, { kind: `connection:${string}` }>,
   index: number,
-  context: EventContext,
+  traces: ReadonlyMap<number, TimelineTraceSummary>,
 ): TimelineActivity {
   const failed =
     event.kind === 'connection:disconnected' ||
     event.kind === 'connection:error' ||
     event.kind === 'connection:reconnect-failed'
-  const traceEvents =
-    event.traceId === undefined ? [] : (context.traceEvents.get(event.traceId) ?? [])
-  const sweep = traceEvents.find(item => item.event.kind === 'reconnect:sweep')?.event
-  const fetches = traceEvents.filter(item => item.event.kind === 'fetch:start').length
+  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}` : '',
-    sweep?.kind === 'reconnect:sweep' && sweep.queryCount !== undefined
-      ? `${sweep.queryCount} ${sweep.queryCount === 1 ? 'query swept' : 'queries swept'}`
+    trace?.sweptQueries !== undefined
+      ? `${trace.sweptQueries} ${trace.sweptQueries === 1 ? 'query swept' : 'queries swept'}`
       : '',
     fetches > 0 ? `${fetches} ${fetches === 1 ? 'fetch' : 'fetches'}` : '',
   ]
@@ -397,7 +329,7 @@ function connectionActivity(
     result: result || '—',
     ...(event.traceId === undefined ? {} : { traceId: event.traceId }),
     durationMs: 0,
-    payload: displayEvent(event),
+    payload: retainedValue(displayEvent(event)),
     error: failed,
   })
 }
@@ -455,6 +387,7 @@ function writeActivity(
       : (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',
@@ -489,7 +422,6 @@ function writeActivity(
     ...(write.traceId === undefined ? {} : { traceId: write.traceId }),
     ...(write.durationMs === undefined ? {} : { durationMs: write.durationMs }),
     ...(write.errorDetails === undefined ? {} : { errorDetails: write.errorDetails }),
-    ...(write.errorDetailsState ? { errorDetailsState: write.errorDetailsState } : {}),
     ...(write.serviceName === undefined || write.itemId === undefined
       ? {}
       : {
@@ -499,9 +431,8 @@ function writeActivity(
       id: write.id,
       type: write.type,
       optimistic: write.optimistic ?? false,
-      payload: writePayload(write),
-      args: write.args ?? [],
-      ...(write.argsState ? { argsState: write.argsState } : {}),
+      ...(payload ? { payload } : {}),
+      ...(write.args ? { args: write.args } : {}),
       ...(initiatingAction && actionName
         ? {
             initiatingAction: {
@@ -518,33 +449,28 @@ function writeActivity(
   })
 }
 
-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]
+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 args.length === 1 ? args[0] : args
+  return retainedValue(args.length === 1 ? args[0] : args)
 }
 
-function cacheEffect(events: readonly DevtoolsEvent[], fallback: string): string {
-  const outcomes = new Map<string, 'merged' | 'reconcile'>()
-  let updated = false
-  for (const item of events) {
-    if (item.event.kind !== 'cache:updated') continue
-    updated = true
-    for (const effect of item.event.queryEffects) outcomes.set(effect.queryId, effect.outcome)
-  }
-  const merged = [...outcomes.values()].filter(outcome => outcome === 'merged').length
-  const reconcile = [...outcomes.values()].filter(outcome => outcome === 'reconcile').length
+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 && updated ? 'cache refreshed' : '',
+      merged === 0 && reconcile === 0 && trace?.cacheUpdated ? 'cache refreshed' : '',
     ]
       .filter(Boolean)
       .join(' · ') || fallback
@@ -553,20 +479,10 @@ function cacheEffect(events: readonly DevtoolsEvent[], fallback: string): string
 
 function fetchTrigger(
   reason: string | undefined,
-  causes: readonly { kind: string }[] | undefined,
+  causeKinds: readonly string[] | undefined,
 ): string {
   if (reason) return reason.replace('-', ' ')
-  const cause = causes?.[0]?.kind
-  return cause ? cause.replace('-', ' ') : 'request'
-}
-
-function affectedQueryIds(events: readonly DevtoolsEvent[]): string[] {
-  const ids = new Set<string>()
-  for (const item of events) {
-    if (item.event.kind !== 'cache:updated') continue
-    for (const effect of item.event.queryEffects) ids.add(effect.queryId)
-  }
-  return [...ids]
+  return causeKinds?.[0]?.replace('-', ' ') ?? 'request'
 }
 
 function normalizeRealtimeOperation(type: string | undefined): string {
@@ -649,11 +565,11 @@ export function timelineActivityMatchesFilter(
   if (!normalizedFilter) return true
   if (activity.searchText.includes(normalizedFilter)) return true
   return [
-    activity.payload,
-    activity.data,
+    historicalValue(activity.payload),
+    historicalValue(activity.data),
     activity.livePayload,
     activity.liveData,
-    activity.write?.args,
+    historicalValue(activity.write?.args),
   ].some(
     value => value !== undefined && compactJson(value).toLowerCase().includes(normalizedFilter),
   )
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/test/devtools.test.tsx b/test/devtools.test.tsx
index c612f4fe..da8b1abd 100644
--- a/test/devtools.test.tsx
+++ b/test/devtools.test.tsx
@@ -163,11 +163,33 @@ test('collector records fetch spans and keeps event and timeline history indepen
   t.true(snapshot.timeline.realtime.length > 0)
   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)
@@ -330,12 +352,18 @@ test('collector marks optimistic mutation failures as rolled back writes', async
   t.true(mutation?.rolledBack)
   t.is(mutation?.error, 'Validation Error')
   t.deepEqual(mutation?.errorDetails, {
-    name: 'ValidationError',
-    message: 'Validation Error',
-    code: 422,
-    issues: [{ name: 'content', reason: 'required' }],
+    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' }],
   })
-  t.deepEqual(mutation?.args, [1, { content: 'bad' }])
 
   const writeActivity = buildTimelineActivities(
     snapshot,
@@ -347,7 +375,10 @@ test('collector marks optimistic mutation failures as rolled back writes', async
   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)
+  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',
@@ -535,10 +566,13 @@ test('collector bounds inactive query and settled write history', t => {
   t.is(afterStaleError?.status, 'success')
   t.is(afterStaleError?.lastError?.generation, 1)
   t.deepEqual(afterStaleError?.lastError?.details, {
-    name: 'ValidationError',
-    message: 'old generation failed',
-    code: 422,
-    issues: [{ name: 'title', reason: 'required' }],
+    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)
 
@@ -609,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)
@@ -626,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',
@@ -792,7 +832,7 @@ test('devtools model keeps operation identity separate from shared fetch identit
       },
     ],
     events: [],
-    timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
+    timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [], traces: [] },
     writes: [],
   }
 
@@ -878,7 +918,7 @@ test('query details show a cursor operation as one inspectable page chain', t =>
       },
     ],
     events: [],
-    timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [] },
+    timeline: { startedAt: 0, laneOrder: [], realtime: [], connection: [], traces: [] },
     writes: [],
   }
   const collector: Collector = {
@@ -923,6 +963,18 @@ test('extension bridge starts debug collection only while connected', async 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 => {
@@ -954,6 +1006,8 @@ test('extension bridge starts debug collection only while connected', async t =>
   const envelope = JSON.parse(read!)
   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)
@@ -1061,6 +1115,7 @@ test('extension session disconnects after stop and preserves state across transi
   let connects = 0
   let reads = 0
   let resets = 0
+  let publishedFrames = 0
   const transientSession = new ExtensionSession(async expression => {
     if (expression.endsWith('?.connect()')) {
       connects++
@@ -1076,12 +1131,17 @@ test('extension session disconnects after stop and preserves state across transi
     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)
@@ -1258,6 +1318,7 @@ test('panel shows root queries and nests relation fetches in details', async t =
       laneOrder: ['query:root', 'query:labels', 'realtime:issues'],
       realtime: [{ at: timelineAt - 3, serviceName: 'issues' }],
       connection: [],
+      traces: [],
     },
     writes: [],
   }