@zerotal/inertia 1.6.2 → 1.7.0

package/CHANGELOG.md

@@ -6,7 +6,35 @@ follows the Zerotal monorepo's unified versioning.
 
 **Maturity: `stable`**
 
-## [Unreleased]
+## [1.7.0] — 2026-08-16
+
+### Added
+
+- **The recorder now also feeds Zerotal's own DevTools panel.** Everything it resolves —
+  which prop came from which wrapper, what kind of request this was, which batch it belongs
+  to — went to the browser-extension read API and nowhere else. So a developer running the
+  in-page panel could not see a single prop, and a developer running the extension could not
+  see a single SQL query; the two halves described the same request and never met.
+
+  Entries are now also pushed onto an `inertia` channel when `@zerotal/devtools` is
+  installed, where the panel draws the prop map as a tree, badges each prop with the wrapper
+  that produced it, and folds a visit together with the deferred loads it triggered. Because
+  the entry is recorded against the same `HttpContext` the queries were, one row shows the
+  props **and** the SQL that produced them — with no key to match and no way for the two to
+  disagree about which request they describe.
+
+  Deliberately a fan-out and not a migration: `DevtoolsEntry` and `/_inertia/devtools` are a
+  published contract and keep serving the extension either way. Nor is devtools a new
+  dependency — the sink is resolved by container key through a local structural interface, so
+  this package imports `@zerotal/devtools` nowhere and does nothing at all when it is absent.
+
+### Changed
+
+- **`redactValue` runs `redactGraph` from `@zerotal/core/security`** rather than its own copy
+  of the same walk. The protocol markers (`[REDACTED]`, `[Circular]`, `[Max depth]`) and the
+  depth limit are unchanged — they are specified by the wire contract, not chosen here, so
+  only the traversal is shared. Its last two parameters (`seen`, `depth`) were internal
+  bookkeeping and are gone; no caller passed them.
 
 ## [1.6.1] — 2026-08-15
 

package/api-surface.md

@@ -0,0 +1,359 @@
+# @zerotal/inertia — public API surface
+
+<!-- AUTO-GENERATED by scripts/api-surface.ts. Do not edit by hand.
+     Run `bun run api:surface` to regenerate after an intentional API change. -->
+
+## .  `(./src/index.ts)`
+
+class AlwaysProp = {
+  new <T = unknown>(value: T | PropFactory<T>): AlwaysProp<T>
+  append: (paths?: string | string[]) => AlwaysProp<T>
+  deepMerge: () => AlwaysProp<T>
+  isOnce: boolean
+  matchOn: (paths: string | string[]) => AlwaysProp<T>
+  merge: () => AlwaysProp<T>
+  mergeConfig: () => MergeConfig
+  once: (expiresAt?: number | null) => AlwaysProp<T>
+  onceExpiresAt: number | null
+  prepend: (paths?: string | string[]) => AlwaysProp<T>
+  readonly ignoreFirstLoad: boolean
+  resolve: () => T | Promise<T>
+  shouldMerge: boolean
+}
+
+class DeferProp = {
+  new <T = unknown>(callback: PropFactory<T>, group?: string, rescue?: boolean): DeferProp<T>
+  append: (paths?: string | string[]) => DeferProp<T>
+  deepMerge: () => DeferProp<T>
+  isOnce: boolean
+  matchOn: (paths: string | string[]) => DeferProp<T>
+  merge: () => DeferProp<T>
+  mergeConfig: () => MergeConfig
+  once: (expiresAt?: number | null) => DeferProp<T>
+  onceExpiresAt: number | null
+  prepend: (paths?: string | string[]) => DeferProp<T>
+  readonly group: string
+  readonly ignoreFirstLoad: true
+  readonly rescue: boolean
+  resolve: () => T | Promise<T>
+  shouldMerge: boolean
+}
+
+class InertiaDevtoolsMiddleware = {
+  new (): InertiaDevtoolsMiddleware
+  static with: <T extends new (...args: any[]) => BaseMiddleware<any>, Opts = T extends new (...args: any[]) => BaseMiddleware<infer U> ? U : object>(this: T, options: DeepPartial<NoInfer<Opts>>) => new () => InstanceType<T>
+  afterResponse?: (ctx: HttpContext) => Promise<void>
+  handle: (http: HttpContext, next: NextFn) => Promise<Response | void>
+  onError?: (ctx: HttpContext, error: Error) => Promise<void>
+}
+
+class InertiaError = {
+  new (message: string, code?: string, status?: number, context?: Record<string, unknown>): InertiaError
+  readonly code: string
+  readonly context?: Record<string, unknown> | undefined
+  readonly status: number
+}
+
+class InertiaMiddleware = {
+  new (): InertiaMiddleware
+  static with: <T extends new (...args: any[]) => BaseMiddleware<any>, Opts = T extends new (...args: any[]) => BaseMiddleware<infer U> ? U : object>(this: T, options: DeepPartial<NoInfer<Opts>>) => new () => InstanceType<T>
+  afterResponse?: (ctx: HttpContext) => Promise<void>
+  handle: (http: HttpContext, next: NextFn) => Promise<Response | void>
+  onError?: (ctx: HttpContext, error: Error) => Promise<void>
+}
+
+class InertiaProp = {
+  new (): InertiaProp
+  append: (paths?: string | string[]) => InertiaProp
+  deepMerge: () => InertiaProp
+  isOnce: boolean
+  matchOn: (paths: string | string[]) => InertiaProp
+  merge: () => InertiaProp
+  mergeConfig: () => MergeConfig
+  once: (expiresAt?: number | null) => InertiaProp
+  onceExpiresAt: number | null
+  prepend: (paths?: string | string[]) => InertiaProp
+  readonly ignoreFirstLoad: boolean
+  resolve: () => unknown | Promise<unknown>
+  shouldMerge: boolean
+}
+
+class InertiaProvider = {
+  new (app: Application): InertiaProvider
+  static dependsOn?: (new (app: Application) => ServiceProvider)[]
+  static environments: AppEnvironment[]
+  static priority?: number
+  static provides?: readonly (keyof ContainerBindings)[]
+  devProcesses: () => DevProcessDefinition[]
+  doctorChecks: () => DoctorCheck[]
+  onBooted: () => Promise<void>
+  onBooting: () => Promise<void>
+  onRegister: () => void
+  onRequestProcessed: (_ctx: HttpContext) => Promise<void>
+  onRequestReceived: (_ctx: HttpContext) => Promise<void>
+  onResponseSent: (_ctx: HttpContext) => Promise<void>
+  onStarted: () => Promise<void>
+  onStarting: () => Promise<void>
+  onStopped: () => Promise<void>
+  onStopping: () => Promise<void>
+  replContext: () => Record<string, unknown>
+}
+
+class InertiaTemplateNotLoadedError = {
+  new (): InertiaTemplateNotLoadedError
+  readonly code: string
+  readonly context?: Record<string, unknown> | undefined
+  readonly status: number
+}
+
+class InfiniteScrollProp = {
+  new (value: PaginatorLike | PropFactory, pageName?: string, dataPath?: string): InfiniteScrollProp
+  append: (paths?: string | string[]) => InfiniteScrollProp
+  deepMerge: () => InfiniteScrollProp
+  isOnce: boolean
+  matchOn: (paths: string | string[]) => InfiniteScrollProp
+  merge: () => InfiniteScrollProp
+  mergeConfig: () => MergeConfig
+  once: (expiresAt?: number | null) => InfiniteScrollProp
+  onceExpiresAt: number | null
+  prepend: (paths?: string | string[]) => InfiniteScrollProp
+  readonly dataPath: string
+  readonly ignoreFirstLoad: boolean
+  readonly pageName: string
+  resolve: () => unknown | Promise<unknown>
+  scrollConfig: (resolved: unknown) => ScrollConfig
+  shouldMerge: boolean
+}
+
+class InvalidComponentError = {
+  new (component: string, reason?: string): InvalidComponentError
+  readonly code: string
+  readonly context?: Record<string, unknown> | undefined
+  readonly status: number
+}
+
+class MergeProp = {
+  new <T = unknown>(value: T | PropFactory<T>): MergeProp<T>
+  append: (paths?: string | string[]) => MergeProp<T>
+  deepMerge: () => MergeProp<T>
+  isOnce: boolean
+  matchOn: (paths: string | string[]) => MergeProp<T>
+  merge: () => MergeProp<T>
+  mergeConfig: () => MergeConfig
+  once: (expiresAt?: number | null) => MergeProp<T>
+  onceExpiresAt: number | null
+  prepend: (paths?: string | string[]) => MergeProp<T>
+  readonly ignoreFirstLoad: boolean
+  resolve: () => T | Promise<T>
+  shouldMerge: boolean
+}
+
+class OptionalProp = {
+  new <T = unknown>(callback: PropFactory<T>): OptionalProp<T>
+  append: (paths?: string | string[]) => OptionalProp<T>
+  deepMerge: () => OptionalProp<T>
+  isOnce: boolean
+  matchOn: (paths: string | string[]) => OptionalProp<T>
+  merge: () => OptionalProp<T>
+  mergeConfig: () => MergeConfig
+  once: (expiresAt?: number | null) => OptionalProp<T>
+  onceExpiresAt: number | null
+  prepend: (paths?: string | string[]) => OptionalProp<T>
+  readonly ignoreFirstLoad: true
+  resolve: () => T | Promise<T>
+  shouldMerge: boolean
+}
+
+class PrecognitionMiddleware = {
+  new (): PrecognitionMiddleware
+  static with: <T extends new (...args: any[]) => BaseMiddleware<any>, Opts = T extends new (...args: any[]) => BaseMiddleware<infer U> ? U : object>(this: T, options: DeepPartial<NoInfer<Opts>>) => new () => InstanceType<T>
+  afterResponse?: (ctx: HttpContext) => Promise<void>
+  handle: (http: HttpContext, next: NextFn) => Promise<Response | void>
+  onError?: (ctx: HttpContext, error: Error) => Promise<void>
+}
+
+class SsrHandler = {
+  new (options?: { pagesDir?: string; }): SsrHandler
+  static isAuthorized: (http: HttpContext) => boolean
+  handle: (http: HttpContext) => Promise<void>
+}
+
+const DEVTOOLS_API_PREFIX = '/_inertia/devtools'
+
+const Inertia = {    readonly render: PageRenderer;    readonly stream: PageRenderer;    readonly optional: <T>(callback: PropFactory<T>) => OptionalProp<T>;    readonly lazy: <T>(callback: PropFactory<T>) => OptionalProp<T>;    readonly always: {        <T>(value: PropFactory<T>): AlwaysProp<T>;        <T>(value: T): AlwaysProp<T>;    };    readonly defer: <T>(callback: PropFactory<T>, group?: string, options?: {        rescue?: boolean;    }) => DeferProp<T>;    readonly merge: {        <T>(value: PropFactory<T>): MergeProp<T>;        <T>(value: T): MergeProp<T>;    };    readonly deepMerge: {        <T>(value: PropFactory<T>): MergeProp<T>;        <T>(value: T): MergeProp<T>;    };    readonly scroll: (value: PaginatorLike | PropFactory, options?: {        pageName?: string;        dataPath?: string;    }) => InfiniteScrollProp;    readonly share: {        (key: string, value: unknown): void;        (values: Record<string, unknown>): void;    };    readonly encryptHistory: (on?: boolean) => void;    readonly clearHistory: () => void;    readonly location: (url: string) => void;}
+
+const inertia = PageRenderer
+
+const inertiaStream = PageRenderer
+
+const route = RouteBuilder
+
+function _getHtmlTemplate = () => string
+
+function _setHtmlTemplate = (html: string) => void
+
+function always = {    <T>(value: PropFactory<T>): AlwaysProp<T>;    <T>(value: T): AlwaysProp<T>;}
+
+function assetVersion = () => string
+
+function buildPageObject = (component: string, props: Record<string, unknown>) => Promise<PageObject>
+
+function clearHistory = () => void
+
+function deepMerge = {    <T>(value: PropFactory<T>): MergeProp<T>;    <T>(value: T): MergeProp<T>;}
+
+function defer = <T>(callback: PropFactory<T>, group?: string, options?: {    rescue?: boolean;}) => DeferProp<T>
+
+function defineRoutes = (table: RouteTable) => void
+
+function detectVuePlugin = (cwd: string) => Promise<BunPlugin[]>
+
+function devtoolsEnabled = () => boolean
+
+function encryptHistory = (on?: boolean) => void
+
+function generatePageRegistry = (cwd?: string, pagesDir?: string) => Promise<void>
+
+function hasRoute = (name: string) => boolean
+
+function InertiaConfig = (options?: Partial<InertiaConfigShape>) => InertiaConfigShape
+
+function inertiaRoute = <N extends PageTarget>(path: string, component: N, props?: RenderProps<N> | MiddlewareClass[], middleware?: MiddlewareClass[]) => RouteRegistration
+
+function lazy = <T>(callback: PropFactory<T>) => OptionalProp<T>
+
+function location = (url: string) => void
+
+function merge = {    <T>(value: PropFactory<T>): MergeProp<T>;    <T>(value: T): MergeProp<T>;}
+
+function optional = <T>(callback: PropFactory<T>) => OptionalProp<T>
+
+function resetRoutes = () => void
+
+function resolveProps = (raw: Record<string, unknown>, headers: Headers, component: string) => Promise<ResolvedPage>
+
+function scroll = (value: PaginatorLike | PropFactory, options?: {    pageName?: string;    dataPath?: string;}) => InfiniteScrollProp
+
+function setAssetVersion = (v: string) => void
+
+function setHistoryEncryptionDefault = (on: boolean) => void
+
+function share = {    (key: string, value: unknown): void;    (values: Record<string, unknown>): void;}
+
+function sharedProps = () => Record<string, unknown>
+
+interface DevtoolsEntry = {
+  __meta: {    id: string;    method: string;    url: string;    status: number;    requestType: DevtoolsRequestType;    component: string | null;    timestamp: string;    utime: number;    tabUuid: string | null;    batchId: string | null;    serverTimingMs: number | null;    redirectLocation?: string | null;    visitId?: string | null;}
+  componentPath: string | null
+  http: {    requestHeaders: Record<string, string>;    responseHeaders: Record<string, string>;    requestBody: BodyCapture;    responseBody: BodyCapture;}
+  propValues?: Record<string, unknown>
+  props: Record<string, PropMeta>
+  renderSource: SourceLocation | null
+  route: RouteInfo
+}
+
+interface InertiaConfigShape = {
+  assetsUrl: string
+  devtools: InertiaDevtoolsConfig
+  encryptHistory: boolean
+  htmlTemplate: string
+  pagesDir: string
+  ssr: boolean
+  ssrSecret: string
+  version: string
+}
+
+interface InertiaDevtoolsConfig = {
+  enabled: boolean | null
+  except: string[]
+  gate: ((request: Request) => boolean | Promise<boolean>) | null
+  maxEntries: number
+  redact: string[]
+  redactHeaders: string[]
+}
+
+interface InertiaPageRegistry = {}
+
+interface InertiaProviderOptions = {
+  assetsUrl?: string
+  htmlTemplate?: string
+  version?: string
+}
+
+interface MergeConfig = {
+  appendPaths: string[]
+  deep: boolean
+  matchOn: string[]
+  prependPaths: string[]
+  prependRoot: boolean
+}
+
+interface PageObject = {
+  clearHistory?: boolean
+  component: string
+  deepMergeProps?: string[]
+  deferredProps?: Record<string, string[]>
+  encryptHistory?: boolean
+  matchPropsOn?: string[]
+  mergeProps?: string[]
+  onceProps?: Record<string, {    prop: string;    expiresAt: number | null;}>
+  prependProps?: string[]
+  preserveFragment?: boolean
+  props: Record<string, unknown>
+  rescuedProps?: string[]
+  scrollProps?: Record<string, unknown>
+  sharedProps?: string[]
+  url: string
+  version: string
+}
+
+interface PageRenderer = {
+  <N extends PageTarget>(component: N, props?: Record<string, unknown> | undefined): Promise<void>
+  dynamic: (component: string, props?: Record<string, unknown>) => Promise<void>
+}
+
+interface PaginatorLike = {
+  currentPage?: number
+  data: unknown[]
+  lastPage?: number
+  page?: number
+  perPage?: number
+  total?: number
+}
+
+interface ResolvedPage = {
+  deepMergeProps?: string[]
+  deferredProps?: Record<string, string[]>
+  matchPropsOn?: string[]
+  mergeProps?: string[]
+  onceProps?: Record<string, {    prop: string;    expiresAt: number | null;}>
+  prependProps?: string[]
+  props: Record<string, unknown>
+  rescuedProps?: string[]
+  scrollProps?: Record<string, ScrollConfig>
+}
+
+interface ScrollConfig = {
+  currentPage: number | null
+  nextPage: number | null
+  pageName: string
+  previousPage: number | null
+}
+
+interface SharedProps = {}
+
+type PageName = never
+
+type PageTarget = string
+
+type PropFactory = () => T | Promise<T>
+
+type PropInput = T | (() => T | Promise<T>) | AlwaysProp<T> | MergeProp<T> | (T extends PaginatorLike ? InfiniteScrollProp : never) | (undefined extends T ? OptionalProp<T> | DeferProp<T> : never)
+
+type PropsOf = PageComponent<N> extends (props: infer Props, ...rest: any[]) => any ? Props : PageComponent<N> extends abstract new (props: infer Props, ...rest: any[]) => any ? Props : Record<string, unknown>
+
+type RenderArgs = [props?: Record<string, unknown>]
+
+type RenderProps = {    [x: string]: unknown;}
+
+type RouteTable = Readonly<Record<string, string>> | ReadonlyMap<string, string>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerotal/inertia",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "license": "MIT",
   "maturity": "stable",
   "private": false,
@@ -12,6 +12,7 @@
   },
   "files": [
     "CHANGELOG.md",
+    "api-surface.md",
     "src",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
@@ -32,7 +33,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@zerotal/core": "1.6.2"
+    "@zerotal/core": "1.7.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/devtools/observability.ts

@@ -0,0 +1,145 @@
+/**
+ * Inertia → DevTools panel bridge.
+ *
+ * The recorder already resolves everything worth showing about an Inertia
+ * request — which prop came from which wrapper, what kind of request it was,
+ * which batch it belongs to. All of it went to the browser-extension read API
+ * and nowhere else, so a developer running the in-page panel could not see a
+ * single prop, and a developer running the extension could not see a single SQL
+ * query. The two halves described the same request and never met.
+ *
+ * This is the fan-out that joins them. The entry is recorded against the same
+ * `HttpContext` the SQL was, so the panel's own correlation puts both on one
+ * trace with no key to match — "is this page slow because of the query or the
+ * deferred prop" becomes one view rather than two tools.
+ *
+ * Deliberately a fan-out and not a migration: {@link DevtoolsEntry} and its read
+ * API are a published contract, and this package keeps serving them whether or
+ * not devtools is installed. Nor does installing devtools become a dependency —
+ * the sink is resolved by container key through a local structural interface,
+ * exactly as every other package's bridge does it, so `@zerotal/inertia` imports
+ * `@zerotal/devtools` nowhere.
+ *
+ * ## This package's cast boundary
+ *
+ * Listed under `boundaries` in `cast-baseline.json`. One cast lives here and it
+ * is the price of the independence described above: `devtools.trace` is not in
+ * `ContainerBindings` from this package, because the augmentation that adds it
+ * belongs to the package this one deliberately does not depend on. Typing the
+ * lookup properly would mean taking that dependency, which would cost more than
+ * the cast saves.
+ *
+ * The invariant it rests on: a missing binding is the ordinary case — devtools is
+ * not installed, or the app is in production — and `tryMake` returning
+ * `undefined` is handled on the next line.
+ */
+import type { Application, HttpContext } from "@zerotal/core";
+import type { DevtoolsEntry } from "./types.ts";
+
+/** The subset of the devtools trace sink this bridge calls (bound as `devtools.trace`). */
+interface DevtoolsSink {
+  channel(descriptor: {
+    id: string;
+    label: string;
+    badge?: string;
+    title?: string;
+    meta?: string[];
+    warn?: string;
+    order?: number;
+    render?: "rows" | "tree" | "table" | "kv" | "grouped";
+    treeField?: string;
+    treeBadge?: string;
+    groupBy?: string;
+    flags?: string[];
+    traceGroup?: string;
+  }): void;
+  record(ctx: object, channel: string, entry: Record<string, unknown>): void;
+}
+
+/** The sink, once the provider has found one. Null when devtools is not installed. */
+let _sink: DevtoolsSink | null = null;
+
+/**
+ * Point the recorder at the devtools panel, if there is one.
+ *
+ * Called from `InertiaProvider` when the recorder is enabled. Returns a disposer
+ * that detaches the bridge; call it from the provider's teardown so a suite that
+ * boots several apps does not leave one app's sink wired to the next one's.
+ *
+ * @param app - The application, for the container lookup.
+ */
+export function installInertiaObservability(app: Application): () => void {
+  // Not in `ContainerBindings` from here — the binding is declared by the package
+  // that owns it, and this one deliberately depends on none of them. A missing
+  // binding is the ordinary case, not an error: it means devtools is not
+  // installed, or the app is in production, and neither is this package's business.
+  const sink = app.container.tryMake("devtools.trace" as never) as DevtoolsSink | undefined;
+  if (!sink) return () => {};
+
+  // Declared once, as data. The panel renders the prop map as a tree, badges each
+  // prop with the wrapper that produced it, and folds a visit together with the
+  // deferred loads it triggered — and devtools ships no Inertia-specific code to
+  // do any of it.
+  sink.channel({
+    id: "inertia",
+    label: "Inertia",
+    badge: "requestType",
+    title: "component",
+    meta: ["route", "url", "status", "props", "serverTimingMs"],
+    order: 15,
+    render: "tree",
+    treeField: "propMeta",
+    treeBadge: "inertiaType",
+    flags: ["shared", "once", "rescued", "reset", "deepMerge"],
+    // A partial reload and the visit that caused it are one thing the developer
+    // did; `batchId` is what the protocol already uses to say so.
+    traceGroup: "batchId",
+  });
+
+  _sink = sink;
+  return () => {
+    _sink = null;
+  };
+}
+
+/**
+ * Push one finished entry onto the panel's `inertia` channel.
+ *
+ * A no-op when no sink was found, so the recorder calls it unguarded.
+ *
+ * The channel entry is a *view* of the protocol entry, not the entry itself: the
+ * panel wants flat, named fields it can badge and sort, while `DevtoolsEntry` is
+ * shaped by the wire contract. Copying the handful of fields worth showing keeps
+ * the two from constraining each other — and keeps the request headers and
+ * captured bodies out of a second store that has its own retention.
+ *
+ * @param http - The context the entry was recorded on; the join to its trace.
+ * @param entry - The finished protocol entry.
+ */
+export function shareEntryWithDevtools(http: HttpContext, entry: DevtoolsEntry): void {
+  const sink = _sink;
+  if (!sink) return;
+
+  const meta = entry.__meta;
+  const propMeta = entry.props;
+
+  sink.record(http, "inertia", {
+    requestType: meta.requestType,
+    component: meta.component ?? "—",
+    // The name when the route has one, the pattern when it does not: a named
+    // route is what the developer wrote, and a bare URI is what is left.
+    route: entry.route.name ?? entry.route.uri,
+    url: meta.url,
+    status: meta.status,
+    props: Object.keys(propMeta).length,
+    serverTimingMs: meta.serverTimingMs,
+    batchId: meta.batchId,
+    // The id the extension knows this entry by, and the value of the
+    // `X-Inertia-Devtools-Id` response header — so a row in the panel and a row
+    // in the extension can be recognised as the same request.
+    entryId: meta.id,
+    componentPath: entry.componentPath,
+    propMeta,
+    ...(meta.redirectLocation ? { redirectLocation: meta.redirectLocation } : {}),
+  });
+}

package/src/devtools/recorder.ts

@@ -30,6 +30,7 @@ import {
   redactValue,
 } from "./redact.ts";
 import { putEntry } from "./store.ts";
+import { shareEntryWithDevtools } from "./observability.ts";
 import { DEVTOOLS_REQUEST_HEADERS, type BodyCapture } from "./types.ts";
 import type { DevtoolsEntry, DevtoolsRequestType, PropMeta } from "./types.ts";
 import { devtoolsSettings } from "./enabled.ts";
@@ -267,4 +268,10 @@ export function finishRecording(
   if (Object.keys(recording.propValues).length > 0) entry.propValues = recording.propValues;
 
   putEntry(entry);
+
+  // Fan out to the in-page panel as well, when one is installed. Recorded against
+  // the same context, so it lands on the same request trace as that request's SQL
+  // — no key to match, and no way for the two to disagree about which request
+  // they describe. A no-op when devtools is absent.
+  shareEntryWithDevtools(http, entry);
 }

package/src/devtools/redact.ts

@@ -6,7 +6,14 @@
  * cookie, the `Authorization` header, and whatever a login form just posted.
  * Redaction runs before an entry is stored, not when it is served: an entry that
  * was never written cannot leak from a store that is later exposed by mistake.
+ *
+ * The walk is `redactGraph` from `@zerotal/core/security`; the *markers* below
+ * are not ours to choose. `[REDACTED]`, `[Circular]` and `[Max depth]` are what
+ * the published protocol specifies, so sharing an implementation with the
+ * devtools panel — which spells them `‹redacted›` — means sharing the traversal
+ * and nothing else.
  */
+import { redactGraph } from "@zerotal/core/security";
 
 /** The marker the protocol uses for a value that was withheld. */
 export const REDACTED = "[REDACTED]";
@@ -85,45 +92,30 @@ export function redactHeaders(
  *
  * @param value - Any prop value.
  * @param patterns - Key patterns to withhold.
- * @param seen - Internal: the ancestor set for cycle detection.
- * @param depth - Internal: current depth, bounded to keep a deep graph from stalling the request.
  */
 export function redactValue(
   value: unknown,
   patterns: readonly string[] = DEFAULT_REDACTED_KEYS,
-  seen: WeakSet<object> = new WeakSet(),
-  depth = 0,
 ): unknown {
-  if (value === null || typeof value !== "object") return value;
-
-  // Bounded rather than unbounded: recording is on the request path, and a
-  // pathological object graph should slow nothing down.
-  if (depth > 12) return "[Max depth]";
+  return redactGraph(value, {
+    sensitive: (key) => isSensitiveKey(key, patterns),
+    mask: REDACTED,
+    circular: "[Circular]",
+    tooDeep: "[Max depth]",
+    // Bounded rather than unbounded: recording is on the request path, and a
+    // pathological object graph should slow nothing down. Thirteen because that
+    // is the depth this recorder has always stopped at.
+    maxDepth: 13,
+    flatten: _summarise,
+  });
+}
 
+/** Values that must not be inlined, rendered as a one-line summary instead. */
+function _summarise(value: unknown): string | undefined {
   if (value instanceof Date) return value.toISOString();
   if (value instanceof File) {
     return `[File: ${value.name}, ${value.size} bytes, ${value.type || "unknown"}]`;
   }
   if (value instanceof Blob) return `[Blob: ${value.size} bytes, ${value.type || "unknown"}]`;
-
-  if (seen.has(value)) return "[Circular]";
-  seen.add(value);
-
-  try {
-    if (Array.isArray(value)) {
-      return value.map((item) => redactValue(item, patterns, seen, depth + 1));
-    }
-
-    const out: Record<string, unknown> = {};
-    for (const [key, entry] of Object.entries(value as Record<string, unknown>)) {
-      out[key] = isSensitiveKey(key, patterns)
-        ? REDACTED
-        : redactValue(entry, patterns, seen, depth + 1);
-    }
-    return out;
-  } finally {
-    // Released on the way out so a value that legitimately appears twice as a
-    // sibling is not mistaken for a cycle — only true ancestors count.
-    seen.delete(value);
-  }
+  return undefined;
 }

package/src/provider/InertiaProvider.ts

@@ -21,10 +21,14 @@ import { InertiaDevtoolsMiddleware } from "../devtools/middleware.ts";
 import { devtoolsEnabled, devtoolsSettings } from "../devtools/enabled.ts";
 import { registerDevtoolsApi } from "../devtools/api.ts";
 import { setMaxEntries } from "../devtools/store.ts";
+import { installInertiaObservability } from "../devtools/observability.ts";
 
 export class InertiaProvider extends ServiceProvider {
   static override environments: AppEnvironment[] = ["web", "console", "test"];
 
+  /** Detaches the devtools-panel fan-out. Null when there was nothing to attach. */
+  private _stopObservability: (() => void) | null = null;
+
   override onRegister(): void {
     // Make Router.inertia() available before routes load.
     Router.macro("inertia", inertiaRoute);
@@ -113,6 +117,14 @@ export class InertiaProvider extends ServiceProvider {
   }
 
   override async onBooted(): Promise<void> {
+    // Fan the recorder's entries out to the in-page devtools panel, when one is
+    // installed. In `onBooted` rather than `onBooting` because that is the first
+    // hook where every provider's bindings exist — `devtools.trace` is registered
+    // in DevtoolsProvider's `onBooting`, and provider order is the app's to choose.
+    if (devtoolsEnabled()) {
+      this._stopObservability = installInertiaObservability(this.app);
+    }
+
     // Register the dev build hook so DevOrchestrator (in @zerotal/core) can
     // trigger a full pages-manifest sync + asset rebuild without @zerotal/core
     // importing @zerotal/inertia (which would create a circular dependency).
@@ -160,6 +172,14 @@ export class InertiaProvider extends ServiceProvider {
         ),
     );
   }
+
+  override async onStopping(): Promise<void> {
+    // The bridge holds the previous app's sink in a module-local; a suite that
+    // boots several apps would otherwise leave one app's recorder writing into
+    // the trace store of an app that has already stopped.
+    this._stopObservability?.();
+    this._stopObservability = null;
+  }
 }
 
 // Used as fallback when resources/app.html does not exist yet