@brett_lamy/docstream 1.20.1 → 1.22.0

package/src/env-keychain.ts

@@ -0,0 +1,264 @@
+/* A passkey keychain for a page's environment variables (frontmatter `env`).
+
+   The values are encrypted with AES-GCM under a key derived (HKDF) from the passkey's PRF output, so reading
+   them takes the reader's fingerprint, face or security key; the ciphertext lives in localStorage. Which
+   variables it holds is kept in the clear (names are not secrets), so a page can say "unlock" rather than
+   "sign in" before asking for biometrics. There is no recovery key: tokens can always be fetched again, so
+   losing the passkey only means signing in again (`reset()` starts over).
+
+     const keychain = createEnvKeychain({ id: "my-docs", rpName: "My docs" })
+     const envHost = keychainEnvHost(keychain, {
+       obtain: async (names) => ({ GITHUB_TOKEN: await signInWithGitHub() }),  // for what it doesn't hold
+     })
+
+   `keychainEnvHost` unlocks once (a biometric prompt) and then answers with *everything* the keychain holds,
+   so one press opens every example on the page whose variables are already saved. Runs in the browser only;
+   PRF needs a passkey provider that supports it (iCloud Keychain, Google Password Manager, Windows Hello,
+   recent security keys). Without it, values are kept for the page only. */
+import type { DocstreamEnvHost } from "./doc-env"
+
+export type EnvKeychainStatus = "unsupported" | "empty" | "locked" | "unlocked"
+
+export interface EnvKeychain {
+  readonly status: EnvKeychainStatus
+  /** The variables it holds (readable while locked). */
+  readonly names: readonly string[]
+  /** Creates the passkey (a biometric prompt; may ask twice on authenticators that only return PRF on sign-in). */
+  enroll(): Promise<void>
+  /** A biometric prompt; then `values` can be read. */
+  unlock(): Promise<void>
+  lock(): void
+  /** Everything it holds. Unlocked only. */
+  values(): Promise<Record<string, string>>
+  /** Adds or replaces values. Unlocked only. */
+  set(values: Record<string, string>): Promise<void>
+  /** Forgets one variable, or (no argument) everything including the passkey's record. */
+  reset(name?: string): Promise<void>
+  subscribe(listener: () => void): () => void
+}
+
+export interface EnvKeychainOptions {
+  /** Names the keychain in storage; different ids are different keychains. */
+  id: string
+  /** Shown by the passkey prompt. */
+  rpName: string
+  /** Account name the passkey is listed under. Default "Environment variables". */
+  userName?: string
+  /** Default `localStorage`. */
+  storage?: Pick<Storage, "getItem" | "setItem" | "removeItem">
+}
+
+interface Stored {
+  v: 1
+  credentialId: string
+  salt: string
+  names: string[]
+  iv?: string
+  data?: string
+}
+
+const b64 = (bytes: ArrayBuffer | Uint8Array) => {
+  const u = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes)
+  let s = ""
+  for (const b of u) s += String.fromCharCode(b)
+  return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "")
+}
+const unb64 = (text: string) => {
+  const s = atob(text.replace(/-/g, "+").replace(/_/g, "/") + "===".slice((text.length + 3) % 4))
+  return Uint8Array.from(s, (c) => c.charCodeAt(0))
+}
+const random = (n: number) => crypto.getRandomValues(new Uint8Array(n))
+
+type PrfResults = { prf?: { enabled?: boolean; results?: { first?: ArrayBuffer | ArrayBufferView } } }
+const prfFirst = (credential: PublicKeyCredential): Uint8Array<ArrayBuffer> | null => {
+  const first = (credential.getClientExtensionResults() as PrfResults).prf?.results?.first
+  if (!first) return null
+  const view = ArrayBuffer.isView(first) ? new Uint8Array(first.buffer, first.byteOffset, first.byteLength) : new Uint8Array(first)
+  const copy = new Uint8Array(view.byteLength)
+  copy.set(view)
+  return copy
+}
+
+async function aesKey(prf: Uint8Array<ArrayBuffer>): Promise<CryptoKey> {
+  const base = await crypto.subtle.importKey("raw", prf, "HKDF", false, ["deriveKey"])
+  return crypto.subtle.deriveKey(
+    { name: "HKDF", hash: "SHA-256", salt: new Uint8Array(0), info: new TextEncoder().encode("docstream env keychain v1") },
+    base,
+    { name: "AES-GCM", length: 256 },
+    false,
+    ["encrypt", "decrypt"],
+  )
+}
+
+export function createEnvKeychain(options: EnvKeychainOptions): EnvKeychain {
+  const key = `docstream-env-keychain:${options.id}`
+  const storage = options.storage ?? (typeof localStorage !== "undefined" ? localStorage : null)
+  const listeners = new Set<() => void>()
+  let aes: CryptoKey | null = null
+  let cache: Record<string, string> | null = null
+
+  const read = (): Stored | null => {
+    try {
+      const raw = storage?.getItem(key)
+      const s = raw ? (JSON.parse(raw) as Stored) : null
+      return s?.v === 1 && typeof s.credentialId === "string" && typeof s.salt === "string" ? { ...s, names: Array.isArray(s.names) ? s.names : [] } : null
+    } catch {
+      return null
+    }
+  }
+  const write = (s: Stored | null) => {
+    if (s) storage?.setItem(key, JSON.stringify(s))
+    else storage?.removeItem(key)
+    listeners.forEach((l) => l())
+  }
+  const supported = () =>
+    typeof window !== "undefined" && window.isSecureContext && typeof PublicKeyCredential !== "undefined" && !!navigator.credentials && !!storage && !!crypto?.subtle
+
+  /** A sign-in with the stored passkey, returning its PRF output. */
+  async function assert(stored: Stored): Promise<Uint8Array<ArrayBuffer>> {
+    const credential = (await navigator.credentials.get({
+      publicKey: {
+        challenge: random(32),
+        allowCredentials: [{ type: "public-key", id: unb64(stored.credentialId) }],
+        userVerification: "required",
+        extensions: { prf: { eval: { first: unb64(stored.salt) } } } as AuthenticationExtensionsClientInputs,
+      },
+    })) as PublicKeyCredential | null
+    const first = credential && prfFirst(credential)
+    if (!first) throw new Error("This passkey can't unlock the keychain (no PRF support).")
+    return first
+  }
+
+  async function seal(values: Record<string, string>, stored: Stored) {
+    const iv = random(12)
+    const data = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, aes!, new TextEncoder().encode(JSON.stringify(values)))
+    cache = { ...values }
+    write({ ...stored, names: Object.keys(values).sort(), iv: b64(iv), data: b64(data) })
+  }
+
+  const keychain: EnvKeychain = {
+    get status(): EnvKeychainStatus {
+      if (!supported()) return "unsupported"
+      if (!read()) return "empty"
+      return aes ? "unlocked" : "locked"
+    },
+    get names() {
+      return read()?.names ?? []
+    },
+    async enroll() {
+      if (!supported()) throw new Error("This browser can't keep a passkey keychain.")
+      const salt = random(32)
+      const created = (await navigator.credentials.create({
+        publicKey: {
+          rp: { name: options.rpName },
+          user: { id: random(16), name: options.userName ?? "Environment variables", displayName: options.userName ?? "Environment variables" },
+          challenge: random(32),
+          pubKeyCredParams: [{ type: "public-key", alg: -7 }, { type: "public-key", alg: -257 }],
+          authenticatorSelection: { residentKey: "preferred", userVerification: "required" },
+          extensions: { prf: { eval: { first: salt } } } as AuthenticationExtensionsClientInputs,
+        },
+      })) as PublicKeyCredential | null
+      if (!created) throw new Error("No passkey was created.")
+      const ext = (created.getClientExtensionResults() as PrfResults).prf
+      if (!ext?.enabled && !ext?.results?.first) throw new Error("This passkey can't encrypt (no PRF support). Try another passkey provider.")
+      const stored: Stored = { v: 1, credentialId: b64(created.rawId), salt: b64(salt), names: [] }
+      // Some authenticators only evaluate PRF on sign-in: then this asks once more.
+      aes = await aesKey(prfFirst(created) ?? (await assert(stored)))
+      await seal({}, stored)
+    },
+    async unlock() {
+      const stored = read()
+      if (!stored) throw new Error("There is no keychain yet.")
+      if (aes) return
+      aes = await aesKey(await assert(stored))
+      cache = null
+      listeners.forEach((l) => l())
+    },
+    lock() {
+      aes = null
+      cache = null
+      listeners.forEach((l) => l())
+    },
+    async values() {
+      if (!aes) throw new Error("The keychain is locked.")
+      if (cache) return { ...cache }
+      const stored = read()
+      if (!stored?.data || !stored.iv) return (cache = {})
+      try {
+        const plain = await crypto.subtle.decrypt({ name: "AES-GCM", iv: unb64(stored.iv) }, aes, unb64(stored.data))
+        cache = JSON.parse(new TextDecoder().decode(plain)) as Record<string, string>
+      } catch {
+        aes = null
+        throw new Error("That passkey doesn't open this keychain.")
+      }
+      return { ...cache }
+    },
+    async set(values) {
+      const stored = read()
+      if (!stored || !aes) throw new Error("The keychain is locked.")
+      await seal({ ...(await keychain.values()), ...values }, stored)
+    },
+    async reset(name) {
+      if (name === undefined) {
+        aes = null
+        cache = null
+        write(null)
+        return
+      }
+      const stored = read()
+      if (!stored) return
+      if (aes) {
+        const { [name]: _, ...rest } = await keychain.values()
+        await seal(rest, stored)
+      } else write({ ...stored, names: stored.names.filter((n) => n !== name) })
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+  return keychain
+}
+
+export interface KeychainEnvHostOptions {
+  /** Gets values the keychain doesn't hold — a sign-in, a prompt. Resolve with what you got; it is saved. */
+  obtain?: (names: readonly string[]) => Promise<Record<string, string>>
+  /** The gate's button when a sign-in is needed. Default "Sign In". */
+  signInLabel?: string | ((names: readonly string[]) => string)
+  /** The gate's button when the keychain already holds everything the example needs. Default "Unlock with Passkey". */
+  unlockLabel?: string
+  /** A hint beside a variable the keychain doesn't hold. */
+  describe?: (name: string) => string | undefined
+}
+
+/**
+ * A `DocstreamEnvHost` over a keychain. Pressing a gate's button:
+ * 1. creates the keychain (first time; a passkey prompt) or unlocks it (a biometric prompt);
+ * 2. asks `obtain` for the variables it doesn't hold, and saves them;
+ * 3. answers with everything the keychain holds, so every example those values cover opens.
+ * Without passkey support (or if the reader declines) values are kept for the page only.
+ */
+export function keychainEnvHost(keychain: EnvKeychain, options: KeychainEnvHostOptions = {}): DocstreamEnvHost {
+  const held = (names: readonly string[]) => names.every((n) => keychain.names.includes(n))
+  return {
+    label: (names) =>
+      held(names) ? options.unlockLabel ?? "Unlock with Passkey"
+        : typeof options.signInLabel === "function" ? options.signInLabel(names) : options.signInLabel ?? "Sign In",
+    describe: (name) => (keychain.names.includes(name) ? "In your keychain" : options.describe?.(name)),
+    async request(names) {
+      // The press's user activation is still live here: spend it on the passkey prompt first.
+      let usable = keychain.status === "unlocked"
+      if (keychain.status === "locked") {
+        await keychain.unlock()
+        usable = true
+      } else if (keychain.status === "empty") {
+        usable = await keychain.enroll().then(() => true, () => false)
+      }
+      const saved = usable ? await keychain.values() : {}
+      const missing = names.filter((n) => saved[n] === undefined)
+      const got = missing.length && options.obtain ? await options.obtain(missing) : {}
+      if (usable && Object.keys(got).length) await keychain.set(got)
+      return { ...saved, ...got }
+    },
+  }
+}

package/src/index.ts

@@ -8,6 +8,8 @@ export type { TaskCheckboxProps, TaskStateChangeHandler } from "./docs/TaskCheck
 export { TASK_STATES, getTaskState, taskMarker, taskStateFromMarker } from "./gitbook/tasks"
 export { DocstreamEnvProvider, EnvGate, envNamesFromProperties, useDocstreamEnv, useEnvGate, usedEnvNames } from "./doc-env"
 export type { DocstreamEnv, DocstreamEnvHost, DocstreamEnvProviderProps, DocstreamEnvValues } from "./doc-env"
+export { createEnvKeychain, keychainEnvHost } from "./env-keychain"
+export type { EnvKeychain, EnvKeychainOptions, EnvKeychainStatus, KeychainEnvHostOptions } from "./env-keychain"
 export { DocumentProperties } from "./docs/DocumentProperties"
 export type { DocumentPropertiesProps } from "./docs/DocumentProperties"
 export { readDocumentProperties, removeDocumentProperty, setDocumentProperty } from "./gitbook/properties"

package/src/replay/ReplayDevtools.tsx

@@ -0,0 +1,348 @@
+/* The player's DevTools: a Console and a Network button in the top bar, with what had happened by the playhead —
+   requests sent and, in red, how many had failed; console errors in red — and, behind them, a panel over the
+   page in the manner of Chrome's DevTools. The Console lists what had been logged, warnings and errors on their
+   tinted rows with their stack traces; the Network tab lists the requests that had been sent (a request still
+   waiting at the playhead shows as pending), and a request's row opens its headers, payload and response.
+
+   Everything is a function of the playhead: scrub back and the lists shrink to what DevTools showed then. A row's
+   time jumps the player there. Esc closes the panel. Plain React + plain CSS, like the player. */
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent } from 'react'
+import { ChevronRight, CircleX, Info, Network, SquareTerminal, TriangleAlert, X } from 'lucide-react'
+import type { ReplayConsoleEntry, ReplayDevtoolsState, ReplayRequest } from './devtools'
+
+export type ReplayDevtoolsTab = 'console' | 'network'
+
+const time = (ms: number) => {
+  const s = Math.max(0, ms) / 1000
+  return `${Math.floor(s / 60)}:${(s % 60).toFixed(1).padStart(4, '0')}`
+}
+const duration = (ms?: number) => (ms === undefined ? '—' : ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`)
+
+/** The two buttons for the top bar (or the controls row): icon, request count and, in red, what failed. */
+export function DevtoolsButtons({ state, open, onOpen }: {
+  state: ReplayDevtoolsState; open: ReplayDevtoolsTab | null; onOpen: (tab: ReplayDevtoolsTab) => void
+}) {
+  const { requests, failed, errors, warnings } = state.counts
+  return (
+    <div data-slot="replay-devtools-buttons">
+      <button
+        type="button"
+        data-slot="replay-devtools-button"
+        data-tab="console"
+        aria-pressed={open === 'console'}
+        aria-label={`Console: ${errors} ${errors === 1 ? 'error' : 'errors'}, ${warnings} ${warnings === 1 ? 'warning' : 'warnings'}`}
+        title="Console"
+        onClick={() => onOpen('console')}
+      >
+        <SquareTerminal size={14} strokeWidth={2} />
+        {errors ? <span data-part="failed">{errors}</span> : null}
+        {warnings ? <span data-part="warn">{warnings}</span> : null}
+      </button>
+      <button
+        type="button"
+        data-slot="replay-devtools-button"
+        data-tab="network"
+        aria-pressed={open === 'network'}
+        aria-label={`Network: ${requests} ${requests === 1 ? 'request' : 'requests'}, ${failed} failed`}
+        title="Network"
+        onClick={() => onOpen('network')}
+      >
+        <Network size={14} strokeWidth={2} />
+        <span data-part="count">{requests}</span>
+        {failed ? <span data-part="failed">{failed}</span> : null}
+      </button>
+    </div>
+  )
+}
+
+/** The panel over the page: Console and Network, cut at the playhead. */
+export function DevtoolsPanel({ state, at, tab, onTab, onClose, onSeek }: {
+  state: ReplayDevtoolsState; at: number; tab: ReplayDevtoolsTab; onTab: (tab: ReplayDevtoolsTab) => void
+  onClose: () => void; onSeek: (ms: number) => void
+}) {
+  const panel = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState(58)
+  useEffect(() => { panel.current?.focus({ preventScroll: true }) }, [])
+
+  // Drag the top edge to resize, as a fraction of the stage.
+  const resize = (e: ReactPointerEvent<HTMLDivElement>) => {
+    const stage = panel.current?.parentElement
+    if (!stage) return
+    e.preventDefault()
+    const el = e.currentTarget
+    el.setPointerCapture(e.pointerId)
+    const box = stage.getBoundingClientRect()
+    const move = (ev: PointerEvent) => setHeight(Math.min(92, Math.max(22, ((box.bottom - ev.clientY) / box.height) * 100)))
+    const up = () => { el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', up) }
+    el.addEventListener('pointermove', move)
+    el.addEventListener('pointerup', up)
+  }
+
+  const onKeyDown = (e: ReactKeyboardEvent) => {
+    if (e.key === 'Escape') { e.stopPropagation(); onClose() }
+    // The player's own keys (space, arrows, J/K/L) stay out of the panel.
+    else if (!(e.target as HTMLElement).closest('input')) e.stopPropagation()
+  }
+
+  const tabs: { id: ReplayDevtoolsTab; label: string }[] = [{ id: 'console', label: 'Console' }, { id: 'network', label: 'Network' }]
+  return (
+    <div
+      ref={panel}
+      data-slot="replay-devtools"
+      role="dialog"
+      aria-label="DevTools"
+      tabIndex={-1}
+      onKeyDown={onKeyDown}
+      style={{ height: `${height}%` }}
+    >
+      <div data-slot="replay-devtools-resize" aria-hidden="true" onPointerDown={resize} />
+      <div data-slot="replay-devtools-tabs" role="tablist" aria-label="DevTools panels">
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            role="tab"
+            aria-selected={tab === t.id}
+            onClick={() => onTab(t.id)}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); onTab(t.id === 'console' ? 'network' : 'console') }
+            }}
+            tabIndex={tab === t.id ? 0 : -1}
+          >
+            {t.label}
+            {t.id === 'console' && state.counts.errors ? <span data-part="failed">{state.counts.errors}</span> : null}
+            {t.id === 'network' && state.counts.failed ? <span data-part="failed">{state.counts.failed}</span> : null}
+          </button>
+        ))}
+        <span data-part="at">As of {time(at)}</span>
+        <button type="button" data-slot="replay-devtools-close" aria-label="Close DevTools" onClick={onClose}><X size={14} /></button>
+      </div>
+      {tab === 'console' ? <ConsolePane state={state} onSeek={onSeek} /> : <NetworkPane state={state} onSeek={onSeek} />}
+    </div>
+  )
+}
+
+/* ── Console ─────────────────────────────────────────────────────────────────────── */
+
+type LevelFilter = 'all' | 'error' | 'warn' | 'info'
+const LEVEL_ICON = { error: CircleX, warn: TriangleAlert, info: Info } as const
+
+function ConsolePane({ state, onSeek }: { state: ReplayDevtoolsState; onSeek: (ms: number) => void }) {
+  const [query, setQuery] = useState('')
+  const [level, setLevel] = useState<LevelFilter>('all')
+  const list = useRef<HTMLDivElement>(null)
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return state.console.filter((e) =>
+      (level === 'all' || (level === 'info' ? e.level === 'info' || e.level === 'log' || e.level === 'debug' : e.level === level)) &&
+      (!q || e.message.toLowerCase().includes(q)))
+  }, [state.console, query, level])
+  // Follow new messages as they're logged, unless you've scrolled up to read.
+  const pinned = useRef(true)
+  useEffect(() => {
+    const el = list.current
+    if (el && pinned.current) el.scrollTop = el.scrollHeight
+  }, [rows.length])
+  return (
+    <div data-slot="replay-devtools-pane" data-pane="console">
+      <div data-slot="replay-devtools-toolbar">
+        <input type="search" aria-label="Filter console" placeholder="Filter" value={query} onChange={(e) => setQuery(e.currentTarget.value)} />
+        <select aria-label="Log levels" value={level} onChange={(e) => setLevel(e.currentTarget.value as LevelFilter)}>
+          <option value="all">All levels</option>
+          <option value="error">Errors</option>
+          <option value="warn">Warnings</option>
+          <option value="info">Info</option>
+        </select>
+        <span data-part="summary">
+          {state.counts.errors ? <span data-part="failed">{state.counts.errors} {state.counts.errors === 1 ? 'error' : 'errors'}</span> : null}
+          {state.counts.warnings ? <span data-part="warn">{state.counts.warnings} {state.counts.warnings === 1 ? 'warning' : 'warnings'}</span> : null}
+        </span>
+      </div>
+      <div
+        ref={list}
+        data-slot="replay-devtools-list"
+        role="log"
+        aria-label="Console messages"
+        onScroll={(e) => { const el = e.currentTarget; pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 8 }}
+      >
+        {rows.map((entry) => <ConsoleRow key={entry.id} entry={entry} onSeek={onSeek} />)}
+        {!rows.length ? <p data-slot="replay-devtools-empty">{state.console.length ? 'No messages match the filter' : 'Nothing logged yet'}</p> : null}
+        {state.counts.laterMessages ? <p data-slot="replay-devtools-later">{state.counts.laterMessages} more later in the recording</p> : null}
+      </div>
+    </div>
+  )
+}
+
+function ConsoleRow({ entry, onSeek }: { entry: ReplayConsoleEntry; onSeek: (ms: number) => void }) {
+  const Glyph = entry.level === 'error' || entry.level === 'warn' || entry.level === 'info' ? LEVEL_ICON[entry.level] : null
+  const body = (
+    <>
+      <span data-part="icon" aria-hidden="true">{Glyph ? <Glyph size={12} strokeWidth={2.2} /> : null}</span>
+      <span data-part="message">{entry.message || ' '}</span>
+    </>
+  )
+  return (
+    <div data-slot="replay-devtools-message" data-level={entry.level}>
+      {entry.trace?.length ? (
+        <details>
+          <summary>{body}</summary>
+          <ol data-part="trace">{entry.trace.map((frame, i) => <li key={i}>{frame}</li>)}</ol>
+        </details>
+      ) : <div data-part="line">{body}</div>}
+      <button type="button" data-part="time" aria-label={`Go to ${time(entry.time)}`} onClick={() => onSeek(entry.time)}>{time(entry.time)}</button>
+    </div>
+  )
+}
+
+/* ── Network ─────────────────────────────────────────────────────────────────────── */
+
+type RequestFilter = 'all' | 'fetch' | 'failed'
+type Row = ReplayRequest & { pending: boolean }
+
+const statusText = (r: Row) => (r.pending ? '(pending)' : r.status === undefined ? (r.failed ? '(failed)' : '—') : r.status === 0 ? '(failed)' : String(r.status))
+
+function NetworkPane({ state, onSeek }: { state: ReplayDevtoolsState; onSeek: (ms: number) => void }) {
+  const [query, setQuery] = useState('')
+  const [filter, setFilter] = useState<RequestFilter>('all')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const rows = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return state.network.filter((r) =>
+      (filter === 'all' || (filter === 'failed' ? r.failed && !r.pending : r.type === 'fetch' || r.type === 'xhr')) &&
+      (!q || r.url.toLowerCase().includes(q) || r.method.toLowerCase() === q))
+  }, [state.network, query, filter])
+  const selected = state.network.find((r) => r.id === selectedId) ?? null
+  // The waterfall spans from the first request to the last answer seen by the playhead.
+  const span = useMemo(() => {
+    const first = state.network[0]?.time ?? 0
+    let last = first + 1
+    for (const r of state.network) last = Math.max(last, r.time + (r.duration ?? 0))
+    return { first, length: last - first }
+  }, [state.network])
+
+  return (
+    <div data-slot="replay-devtools-pane" data-pane="network" data-detail={selected ? '' : undefined}>
+      <div data-slot="replay-devtools-toolbar">
+        <input type="search" aria-label="Filter requests" placeholder="Filter" value={query} onChange={(e) => setQuery(e.currentTarget.value)} />
+        <div data-slot="replay-devtools-chips" role="radiogroup" aria-label="Request types">
+          {(['all', 'fetch', 'failed'] as const).map((f) => (
+            <button key={f} type="button" role="radio" aria-checked={filter === f} onClick={() => setFilter(f)}>
+              {f === 'all' ? 'All' : f === 'fetch' ? 'Fetch/XHR' : 'Failed'}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div data-slot="replay-devtools-network">
+        <div data-slot="replay-devtools-table-wrap">
+          <table data-slot="replay-devtools-table">
+            <thead>
+              <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Status</th>
+                {selected ? null : <><th scope="col">Method</th><th scope="col">Type</th><th scope="col">Time</th><th scope="col" data-col="waterfall">Waterfall</th></>}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r) => (
+                <tr
+                  key={r.id}
+                  data-failed={(r.failed && !r.pending) || undefined}
+                  data-pending={r.pending || undefined}
+                  aria-selected={r.id === selectedId}
+                  tabIndex={0}
+                  onClick={() => setSelectedId(r.id === selectedId ? null : r.id)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(r.id === selectedId ? null : r.id) } }}
+                >
+                  <td title={r.url}><span data-part="name">{r.name}</span></td>
+                  <td>{statusText(r)}</td>
+                  {selected ? null : (
+                    <>
+                      <td>{r.method}</td>
+                      <td>{r.type}</td>
+                      <td>{r.pending ? 'Pending' : duration(r.duration)}</td>
+                      <td data-col="waterfall">
+                        <span
+                          data-part="bar"
+                          style={{
+                            left: `${((r.time - span.first) / span.length) * 100}%`,
+                            width: `max(2px, ${(((r.duration ?? 0) / span.length) * 100).toFixed(2)}%)`,
+                          }}
+                        />
+                      </td>
+                    </>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {!rows.length ? <p data-slot="replay-devtools-empty">{state.network.length ? 'No requests match the filter' : 'No requests yet'}</p> : null}
+        </div>
+        {selected ? <RequestDetail request={selected} onClose={() => setSelectedId(null)} onSeek={onSeek} /> : null}
+      </div>
+      <div data-slot="replay-devtools-status">
+        <span>{state.counts.requests} {state.counts.requests === 1 ? 'request' : 'requests'}</span>
+        {state.counts.failed ? <span data-part="failed">{state.counts.failed} failed</span> : null}
+        {state.counts.laterRequests ? <span>{state.counts.laterRequests} more later in the recording</span> : null}
+      </div>
+    </div>
+  )
+}
+
+type DetailTab = 'headers' | 'payload' | 'response'
+
+function RequestDetail({ request, onClose, onSeek }: { request: Row; onClose: () => void; onSeek: (ms: number) => void }) {
+  const [tab, setTab] = useState<DetailTab>('headers')
+  const pretty = (body?: string) => {
+    if (body === undefined || body === '') return undefined
+    try { return JSON.stringify(JSON.parse(body), null, 2) } catch { return body }
+  }
+  const general: [string, string][] = [
+    ['Request URL', request.url],
+    ['Request Method', request.method],
+    ['Status Code', request.pending ? 'Pending' : request.status !== undefined ? `${request.status}${request.statusText ? ` ${request.statusText}` : ''}` : request.failed ? 'Failed' : 'Unknown'],
+    ...(request.error ? [['Error', request.error] as [string, string]] : []),
+    ['Sent at', time(request.time)],
+    ['Duration', duration(request.duration)],
+  ]
+  return (
+    <div data-slot="replay-devtools-detail">
+      <div data-slot="replay-devtools-detail-tabs" role="tablist" aria-label={`${request.name} details`}>
+        <button type="button" aria-label="Close request details" data-slot="replay-devtools-close" onClick={onClose}><X size={13} /></button>
+        {(['headers', 'payload', 'response'] as const).map((t) => (
+          <button key={t} type="button" role="tab" aria-selected={tab === t} onClick={() => setTab(t)}>
+            {t[0]!.toUpperCase() + t.slice(1)}
+          </button>
+        ))}
+      </div>
+      <div data-slot="replay-devtools-detail-body">
+        {tab === 'headers' ? (
+          <>
+            <Section title="General" rows={general} />
+            {request.responseHeaders ? <Section title="Response Headers" rows={Object.entries(request.responseHeaders)} /> : null}
+            {request.requestHeaders ? <Section title="Request Headers" rows={Object.entries(request.requestHeaders)} /> : null}
+            <button type="button" data-slot="replay-devtools-jump" onClick={() => onSeek(request.time)}>Go to {time(request.time)} in the recording</button>
+          </>
+        ) : (
+          <Body text={pretty(tab === 'payload' ? request.requestBody : request.responseBody)} empty={tab === 'payload' ? 'This request has no recorded payload' : request.pending ? 'Waiting for the response' : 'The recording has no response body for this request'} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Section({ title, rows }: { title: string; rows: [string, string][] }) {
+  return (
+    <details open data-slot="replay-devtools-section">
+      <summary><ChevronRight size={12} data-part="chevron" />{title}</summary>
+      <dl>
+        {rows.map(([k, v]) => (
+          <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
+        ))}
+      </dl>
+    </details>
+  )
+}
+
+function Body({ text, empty }: { text?: string; empty: string }) {
+  return text !== undefined ? <pre data-slot="replay-devtools-body">{text}</pre> : <p data-slot="replay-devtools-empty">{empty}</p>
+}