@zerotal/devtools 1.6.3 → 1.7.2

package/src/redaction.ts

@@ -1,19 +1,30 @@
 /**
- * Query-binding redaction.
+ * Trace redaction.
  *
  * A trace does not stay on screen: it is streamed to the browser and written to
- * `.zerotal/devtools.sqlite`, where it sits for a day. Bindings are the request's
- * actual values — the password on a registration, a reset token, a session
- * payload, every customer email a listing selects by. An ephemeral dev panel and
- * a plaintext file with a day's worth of credentials in it are different risks,
- * so the values are masked by default and you opt individual columns back in.
+ * `.zerotal/devtools.sqlite`, where it sits for a day. What it carries is the
+ * request's actual values — the password on a registration, a reset token, a
+ * session payload, every customer email a listing selects by. An ephemeral dev
+ * panel and a plaintext file with a day's worth of credentials in it are
+ * different risks, so those values are masked by default and you opt individual
+ * names back in.
  *
- * Matching is on the column each binding belongs to, recovered by pairing the
- * SQL's placeholders with the identifiers around them. When a binding cannot be
- * attributed to a column — a raw expression, a dialect this does not parse — it
- * is masked, because guessing wrong in the other direction is what writes a
- * password to disk.
+ * Three entry points, one rule. {@link redactBindings} masks query bindings by
+ * the column each belongs to, recovered by pairing the SQL's placeholders with
+ * the identifiers around them; when a binding cannot be attributed to a column —
+ * a raw expression, a dialect this does not parse — it is masked, because
+ * guessing wrong in the other direction is what writes a password to disk.
+ * {@link redactValue} walks anything with named fields (a channel entry, a
+ * logged object) and masks by field name. {@link redactCacheKey} masks the tail
+ * of a cache key whose name says it holds a secret.
+ *
+ * All three share {@link isSensitiveName}, so `allow` and `deny` in the app's
+ * config mean the same thing everywhere. The walk itself is `redactGraph` from
+ * `@zerotal/core/security` — the same one the Inertia recorder runs, which is
+ * how two recorders that must not agree on their *markers* still agree on how a
+ * cycle, a depth limit, and a nested secret are handled.
  */
+import { redactGraph } from "@zerotal/core/security";
 
 export interface RedactionOptions {
   /**
@@ -22,12 +33,13 @@ export interface RedactionOptions {
    */
   enabled?: boolean;
   /**
-   * Column names whose values are safe to show in full. Matched
-   * case-insensitively against the column each binding belongs to.
+   * Names whose values are safe to show in full. Matched case-insensitively
+   * against the column a binding belongs to, a channel entry's field name, or a
+   * cache key's segment.
    */
   allow?: string[];
   /**
-   * Extra column names to mask, added to the built-in list.
+   * Extra names to mask, added to the built-in list.
    */
   deny?: string[];
 }
@@ -64,9 +76,141 @@ const SENSITIVE = [
 /** Columns always shown: structural values that make a trace readable at all. */
 const STRUCTURAL = ["id", "created_at", "updated_at", "deleted_at"];
 
-/** What a masked binding is replaced with. */
+/** What a masked value is replaced with. */
 const MASK = "‹redacted›";
 
+/** Stand-ins for values a walk cannot render rather than will not. */
+const CIRCULAR = "‹circular›";
+const TOO_DEEP = "‹truncated›";
+
+/**
+ * How far {@link redactValue} descends before it stops.
+ *
+ * A panel row shows a few fields, not an object graph, and the walk runs on
+ * every entry of every request — so the cap is about the cost of the walk as
+ * much as the size of what comes out of it.
+ */
+const MAX_DEPTH = 6;
+
+/** The allow/deny sets a redaction pass runs against. */
+interface Rules {
+  allow: Set<string>;
+  deny: string[];
+}
+
+function _rules(options: RedactionOptions): Rules {
+  return {
+    allow: new Set((options.allow ?? []).map((c) => c.toLowerCase())),
+    deny: [...SENSITIVE, ...(options.deny ?? []).map((c) => c.toLowerCase())],
+  };
+}
+
+/**
+ * Whether a name means "the value under me is a secret".
+ *
+ * The one place the rule lives, so a column, a channel field, and a cache-key
+ * segment are judged the same way — and so `allow`/`deny` in the app's config
+ * cannot mean one thing on the Queries tab and another on the Cache tab.
+ *
+ * Matching is by substring, which is why `password` covers `password_hash`. It
+ * also means `author_id` matches `auth`; that is the trade the built-in list
+ * makes, and `allow: ['author_id']` opts it back in.
+ */
+export function isSensitiveName(name: string, options: RedactionOptions = {}): boolean {
+  return _sensitive(name, _rules(options));
+}
+
+function _sensitive(name: string, { allow, deny }: Rules): boolean {
+  const key = name.toLowerCase();
+  if (allow.has(key)) return false;
+  if (STRUCTURAL.includes(key)) return false;
+  return deny.some((s) => key.includes(s));
+}
+
+/**
+ * Mask every field of `value` whose name says it holds a secret.
+ *
+ * Used at the sink boundary for the things that arrive as named fields rather
+ * than as SQL — a channel entry a package recorded, an object someone passed to
+ * `console.log`. A bare scalar has no name to judge it by and comes back
+ * unchanged; masking on the *contents* of a string is a different, guessier job
+ * this deliberately does not attempt.
+ *
+ * Cycles and over-deep branches are replaced rather than followed, so the result
+ * is always safe to `JSON.stringify` — which is the other half of why the log
+ * capture calls this: a circular argument used to throw out of the console patch.
+ *
+ * @returns A new value; the input is not modified.
+ */
+export function redactValue(value: unknown, options: RedactionOptions = {}): unknown {
+  if (options.enabled === false) return value;
+  const rules = _rules(options);
+  return redactGraph(value, {
+    sensitive: (key) => _sensitive(key, rules),
+    mask: MASK,
+    circular: CIRCULAR,
+    tooDeep: TOO_DEEP,
+    maxDepth: MAX_DEPTH,
+    flatten: _flatten,
+  });
+}
+
+/**
+ * Three shapes that read better named than walked, and that a devtools entry
+ * carries often enough to be worth naming. A function is here because
+ * `JSON.stringify` drops the key it sits under, and a log line that quietly
+ * loses a field is the kind of wrongness a debugging tool must not have.
+ */
+function _flatten(value: unknown): string | undefined {
+  if (value instanceof Date) return value.toISOString();
+  if (value instanceof Error) return `${value.name}: ${value.message}`;
+  if (typeof value === "function") return `‹fn ${value.name || "anonymous"}›`;
+  return undefined;
+}
+
+/**
+ * What separates a cache key's *name* from its *value*, kept in the split so the
+ * key rebuilds.
+ *
+ * Deliberately not `_` or `-`: those sit inside a name — `password_reset` is one
+ * word — so splitting on them would mask `reset` and leave the row unreadable
+ * without protecting anything.
+ */
+const KEY_PARTS = /([:|/.])/;
+
+/**
+ * Mask the identifying tail of a cache key whose name says it holds a secret.
+ *
+ * A cache key is a name and a value welded together: `password_reset:9f2c…` *is*
+ * the reset token. Masking the whole key would leave the Cache tab a column of
+ * `‹redacted›` with nothing to read it by, so only what follows the sensitive
+ * segment goes — the name that makes the row identifiable stays.
+ *
+ * @returns The key with its tail masked, or the key unchanged.
+ */
+export function redactCacheKey(key: string, options: RedactionOptions = {}): string {
+  if (options.enabled === false) return key;
+  if (!key) return key;
+
+  const rules = _rules(options);
+  const parts = key.split(KEY_PARTS);
+  let masked = false;
+
+  const out = parts.map((part, i) => {
+    // Odd indices are the captured separators; they hold no value.
+    if (i % 2 === 1) return part;
+    if (masked) return part ? MASK : part;
+    if (_sensitive(part, rules)) masked = true;
+    return part;
+  });
+
+  // A key with no separator to split a name from its value — `sessionabc123` —
+  // cannot be trimmed to its name, so it goes whole. Naming a value we cannot
+  // clear is the wrong half to keep.
+  if (!masked) return key;
+  return out.length === 1 ? MASK : out.join("");
+}
+
 /**
  * Mask the bindings of `sql` that belong to a sensitive column.
  *
@@ -83,8 +227,7 @@ export function redactBindings(
   if (options.enabled === false) return bindings;
   if (!Array.isArray(bindings) || bindings.length === 0) return bindings;
 
-  const allow = new Set((options.allow ?? []).map((c) => c.toLowerCase()));
-  const deny = [...SENSITIVE, ...(options.deny ?? []).map((c) => c.toLowerCase())];
+  const rules = _rules(options);
   const columns = attributeBindings(sql, bindings.length);
 
   return bindings.map((value, i) => {
@@ -93,9 +236,7 @@ export function redactBindings(
     // An unattributable binding is masked: a value we cannot name is a value we
     // cannot clear.
     if (!column) return MASK;
-    if (allow.has(column)) return value;
-    if (STRUCTURAL.includes(column)) return value;
-    return deny.some((s) => column.includes(s)) ? MASK : value;
+    return _sensitive(column, rules) ? MASK : value;
   });
 }
 

package/src/tracing.ts

@@ -19,10 +19,27 @@
  *
  * Console patching is handled separately via startConsoleCapture() since
  * console.log is a hook (interception) not a broadcast event.
+ *
+ * ## This package's cast boundary
+ *
+ * Listed under `boundaries` in `cast-baseline.json`, so the per-file cast ratchet
+ * does not apply here. That is deliberate and confined to this file, for two
+ * invariants nothing in the type system can express:
+ *
+ * 1. **`HttpContext` is read structurally.** `ctx.session`, `ctx.user` and
+ *    `ctx._routeDef` are contributed by packages devtools does not import — that
+ *    independence is the whole design, and it is why an app without the session
+ *    middleware simply has no `session` to read. Every such read is guarded and
+ *    falls back to empty; a missing property is the ordinary case, not an error.
+ * 2. **`console` is patched by name.** Replacing `console[level]` at runtime is
+ *    interception, not a typed call, so the index has to be untyped.
+ *
+ * Nothing else in `@zerotal/devtools` is exempt. A cast that wants to live
+ * somewhere other than this file is a cast to remove.
  */
 
 import { FrameworkEvents, RequestContext } from "@zerotal/core";
-import type { RequestHandled, RequestFailed } from "@zerotal/core";
+import type { RequestHandled, RequestFailed, OutgoingRequestCompleted } from "@zerotal/core";
 import type { HttpContext } from "@zerotal/core";
 import type {
   QuerySpan,
@@ -31,19 +48,26 @@ import type {
   MailEntry,
   CacheEntry,
   JobEntry,
+  ExceptionInfo,
   RequestTrace,
   TraceChannelDescriptor,
   TraceChannelEntry,
 } from "./RequestTrace.ts";
 import { traceStore } from "./TraceStore.ts";
-import { redactBindings, type RedactionOptions } from "./redaction.ts";
+import { captureCallSite, parseStack } from "./callsite.ts";
+import { redactBindings, redactCacheKey, redactValue, type RedactionOptions } from "./redaction.ts";
 
 // ── Per-context event buffers ─────────────────────────────────────────────────
 // Events are buffered for the full request lifetime (including phases that run
 // before DevtoolsInjectionMiddleware, e.g. AuthMiddleware loading the user).
 // Buffers are GC'd with the HttpContext via WeakMap.
 
-type _BufLog = { level: LogEntry["level"]; args: string[]; absMs: number };
+type _BufLog = {
+  level: LogEntry["level"];
+  args: string[];
+  absMs: number;
+  source?: LogEntry["source"];
+};
 type _BufMail = Omit<MailEntry, "offsetMs"> & { absMs: number };
 type _BufCache = Omit<CacheEntry, "offsetMs"> & { absMs: number };
 type _BufJob = Omit<JobEntry, "offsetMs"> & { absMs: number };
@@ -70,11 +94,16 @@ export function _bufPush<T>(map: WeakMap<object, T[]>, ctx: object, item: T): vo
 
 const _channels = new Map<string, TraceChannelDescriptor>();
 
-/** Every channel declared so far, in display order. */
+/**
+ * Every channel that wants a tab, in display order.
+ *
+ * A `hidden` channel is left out: its entries are still recorded and still reach
+ * the panel on the trace, but whatever renders them is not this generic row list.
+ */
 export function traceChannels(): TraceChannelDescriptor[] {
-  return [...(_channels.values() as Iterable<TraceChannelDescriptor>)].sort(
-    (a, b) => (a.order ?? 100) - (b.order ?? 100) || a.label.localeCompare(b.label),
-  );
+  return [...(_channels.values() as Iterable<TraceChannelDescriptor>)]
+    .filter((c) => !c.hidden)
+    .sort((a, b) => (a.order ?? 100) - (b.order ?? 100) || a.label.localeCompare(b.label));
 }
 
 /** @internal — drop every declared channel (provider teardown, tests). */
@@ -82,7 +111,7 @@ export function _resetChannels(): void {
   _channels.clear();
 }
 
-// ── Redaction ─────────────────────────────────────────────────────────────────
+// ── Capture settings ──────────────────────────────────────────────────────────
 
 let _redaction: RedactionOptions = {};
 
@@ -91,6 +120,31 @@ export function _setRedaction(options: RedactionOptions): void {
   _redaction = options;
 }
 
+/**
+ * Whether to walk the stack for each query and log line.
+ *
+ * A field rather than a config read per event: this runs on the hot path of a
+ * request running forty queries, and resolving config forty times to answer the
+ * same question would cost more than the walk it is guarding.
+ */
+let _captureSource = true;
+
+/** @internal — set by DevtoolsProvider from the app's `devtools` config. */
+export function _setCaptureSource(enabled: boolean): void {
+  _captureSource = enabled;
+}
+
+/**
+ * Request headers recorded beyond the built-in safe list, lower-cased.
+ * `"*"` records every header the redaction rules do not mask.
+ */
+let _extraHeaders = new Set<string>();
+
+/** @internal — set by DevtoolsProvider from the app's `devtools` config. */
+export function _setHeaderAllowlist(headers: string[]): void {
+  _extraHeaders = new Set(headers.map((h) => h.toLowerCase()));
+}
+
 // ── The sink feature packages contribute to ───────────────────────────────────
 
 /**
@@ -115,6 +169,25 @@ export interface TraceSink {
    * picks up the entries already buffered for the request in flight.
    */
   record(ctx: object, channel: string, entry: Record<string, unknown>): void;
+  /**
+   * Turn a context into a trace, for work that never was an HTTP request.
+   *
+   * Traces are normally finalised from core's `RequestHandled` / `RequestFailed`,
+   * which covers everything the HTTP kernel serves and nothing else. A Flow action
+   * arrives over a WebSocket and runs against its own `HttpContext` — as do queue
+   * jobs and scheduled tasks — so no HTTP lifecycle event ever fires for it, and
+   * without this call everything buffered against that context (its channel rows,
+   * but equally its queries, its logs, its N+1 warnings) accumulated and was
+   * dropped unread. The Flow tab could then only ever report "no flow activity",
+   * which is exactly what it did.
+   *
+   * `method` labels the trace in the request list, because the underlying request
+   * is synthetic: Flow passes `FLOW` so an action is not read as a second `GET` of
+   * the page it acted on.
+   *
+   * Finalising happens once per context; a second call for the same one is ignored.
+   */
+  finalise(ctx: object, meta: { startMs: number; durationMs: number; method?: string }): void;
   bufferQuery(ctx: object, q: QuerySpan): void;
   bufferWarning(ctx: object, w: NPlusOneWarning): void;
   bufferMail(ctx: object, m: Omit<MailEntry, "offsetMs">): void;
@@ -122,15 +195,35 @@ export interface TraceSink {
   bufferJob(ctx: object, j: Omit<JobEntry, "offsetMs">): void;
 }
 
+// Everything below masks on the way *in*. Redacting in a renderer would protect
+// nothing: by the time a panel draws a row, the unredacted copy has already been
+// streamed to the browser and written to `.zerotal/devtools.sqlite`, where it
+// sits for a day. The sink is the last point where "not recorded" is still true.
 export const traceSink: TraceSink = {
   channel(descriptor: TraceChannelDescriptor): void {
     _channels.set(descriptor.id, descriptor);
   },
   record(ctx: object, channel: string, entry: Record<string, unknown>): void {
-    _bufPush(_ctxChannels, ctx, { channel, entry, absMs: Date.now() });
+    _bufPush(_ctxChannels, ctx, {
+      channel,
+      entry: redactValue(entry, _redaction) as Record<string, unknown>,
+      absMs: Date.now(),
+    });
+  },
+  finalise(ctx: object, meta: { startMs: number; durationMs: number; method?: string }): void {
+    _finaliseTrace(ctx as HttpContext, meta.startMs, meta.durationMs, null, meta.method);
   },
   bufferQuery(ctx: object, q: QuerySpan): void {
-    _bufPush(_ctxQueries, ctx, { ...q, bindings: redactBindings(q.sql, q.bindings, _redaction) });
+    // The call site is captured here rather than at the emit site because here
+    // is the only place that knows whether anyone is recording. `skip` is 0: the
+    // frames above are this method and the ORM's bridge, both of which the
+    // framework filter drops anyway.
+    const source = _captureSource && !q.source ? captureCallSite() : q.source;
+    _bufPush(_ctxQueries, ctx, {
+      ...q,
+      bindings: redactBindings(q.sql, q.bindings, _redaction),
+      ...(source ? { source } : {}),
+    });
   },
   bufferWarning(ctx: object, w: NPlusOneWarning): void {
     _bufPush(_ctxWarnings, ctx, w);
@@ -139,7 +232,7 @@ export const traceSink: TraceSink = {
     _bufPush(_ctxMail, ctx, { ...m, absMs: Date.now() });
   },
   bufferCache(ctx: object, c: Omit<CacheEntry, "offsetMs">): void {
-    _bufPush(_ctxCache, ctx, { ...c, absMs: Date.now() });
+    _bufPush(_ctxCache, ctx, { ...c, key: redactCacheKey(c.key, _redaction), absMs: Date.now() });
   },
   bufferJob(ctx: object, j: Omit<JobEntry, "offsetMs">): void {
     _bufPush(_ctxJobs, ctx, { ...j, absMs: Date.now() });
@@ -158,17 +251,38 @@ function _cleanupBuffers(ctx: object): void {
 
 // ── Trace builder ─────────────────────────────────────────────────────────────
 
+/**
+ * Request headers recorded without being asked.
+ *
+ * An allowlist rather than a denylist because a trace is *persisted*: `cookie`
+ * and `authorization` are the request's credentials, and a header nobody thought
+ * to deny is a header on disk for a day. The cost is that the custom header you
+ * are actually debugging is invisible, which is what `devtools.headers` opens.
+ */
 const SAFE_HEADERS = new Set([
   "accept",
   "content-type",
+  "content-length",
   "user-agent",
   "referer",
+  "origin",
+  "accept-language",
   "x-request-id",
   "x-forwarded-for",
   "x-inertia",
   "x-inertia-version",
+  "x-requested-with",
 ]);
 
+/** Never recorded, whatever the allowlist says — these *are* the credentials. */
+const NEVER_HEADERS = new Set(["cookie", "set-cookie", "authorization", "proxy-authorization"]);
+
+function _recordHeader(name: string): boolean {
+  const key = name.toLowerCase();
+  if (NEVER_HEADERS.has(key)) return false;
+  return SAFE_HEADERS.has(key) || _extraHeaders.has("*") || _extraHeaders.has(key);
+}
+
 const INTERNAL_PREFIXES = ["/__flow/", "/__zerotal/", "/__dev/"];
 
 function _isInternal(path: string): boolean {
@@ -189,7 +303,35 @@ function _offset(absMs: number, startMs: number): number {
   return Math.max(0, absMs - startMs);
 }
 
-function _buildTrace(ctx: HttpContext, startMs: number, durationMs: number): RequestTrace {
+/**
+ * What is in the session — the key names, never the values.
+ *
+ * "Is the CSRF token there, did the flash survive the redirect, is the user id
+ * set" are the session questions a request inspector is asked, and all three are
+ * answered by the keys. The values are the request's real state — the user's id,
+ * the token itself, whatever a form flashed — and this trace is written to disk
+ * for a day.
+ *
+ * Read structurally: devtools imports no feature package, and an app without the
+ * session middleware has no `ctx.session` at all.
+ */
+function _sessionKeys(ctx: HttpContext): string[] {
+  try {
+    const session = (ctx as unknown as Record<string, unknown>)["session"] as
+      { _data?: Record<string, unknown> } | undefined;
+    return session?._data ? Object.keys(session._data).sort() : [];
+  } catch {
+    return [];
+  }
+}
+
+function _buildTrace(
+  ctx: HttpContext,
+  startMs: number,
+  durationMs: number,
+  exception: ExceptionInfo | null,
+  method?: string,
+): RequestTrace {
   const queryParams: Record<string, string> = {};
   ctx.url.searchParams.forEach((v, k) => {
     queryParams[k] = v;
@@ -197,7 +339,14 @@ function _buildTrace(ctx: HttpContext, startMs: number, durationMs: number): Req
 
   const headers: Record<string, string> = {};
   ctx.request.headers.forEach((v, k) => {
-    if (SAFE_HEADERS.has(k.toLowerCase())) headers[k] = v;
+    if (_recordHeader(k)) headers[k] = v;
+  });
+
+  // The response half of the exchange: its status line and the headers it set.
+  // A request tab that shows only what came in answers half the question.
+  const responseHeaders: Record<string, string> = {};
+  ctx.response?.headers.forEach((v, k) => {
+    if (_recordHeader(k)) responseHeaders[k] = v;
   });
 
   const ctxRecord = ctx as unknown as Record<string, unknown>;
@@ -214,7 +363,7 @@ function _buildTrace(ctx: HttpContext, startMs: number, durationMs: number): Req
   return {
     id: crypto.randomUUID().slice(0, 12),
     requestId: ctx.requestId,
-    method: ctx.request.method.toUpperCase(),
+    method: (method ?? ctx.request.method).toUpperCase(),
     path: ctx.url.pathname,
     statusCode: ctx.response?.status ?? 0,
     startMs,
@@ -222,14 +371,18 @@ function _buildTrace(ctx: HttpContext, startMs: number, durationMs: number): Req
     memory: _heapUsed(),
     queryParams,
     headers,
+    responseHeaders,
+    session: _sessionKeys(ctx),
     route: rd ? { pattern: rd.pattern, controller: rd.controller, action: rd.action } : null,
     auth: user ? { id: user["id"], name: user["name"], email: user["email"] } : null,
+    exception,
     queries: _ctxQueries.get(ctx) ?? [],
     warnings: _ctxWarnings.get(ctx) ?? [],
     logs: (_ctxLogs.get(ctx) ?? []).map((l) => ({
       level: l.level,
       args: l.args,
       offsetMs: _offset(l.absMs, startMs),
+      ...(l.source ? { source: l.source } : {}),
     })),
     mail: (_ctxMail.get(ctx) ?? []).map(({ absMs, ...rest }) => ({
       ...rest,
@@ -261,27 +414,86 @@ export function startDevtoolsTracing(): void {
 
   // Both successful and failed requests finalise the trace. Failed requests still
   // carry the rendered error response on ctx, so the trace records the error status
-  // code like any other outcome. Everything else on the trace is buffered by
-  // feature packages through `traceSink`.
+  // code like any other outcome — and now the message with it, which used to be
+  // dropped here, leaving a red 500 in the panel with nothing to read next to it.
+  // Everything else on the trace is buffered by feature packages through `traceSink`.
   _unsubs = [
     FrameworkEvents.on<RequestHandled>("RequestHandled", (e) =>
-      _finaliseTrace(e.ctx as HttpContext, e.startMs, e.durationMs),
-    ),
-    FrameworkEvents.on<RequestFailed>("RequestFailed", (e) =>
-      _finaliseTrace(e.ctx as HttpContext, e.startMs, e.durationMs),
+      _finaliseTrace(e.ctx as HttpContext, e.startMs, e.durationMs, null),
     ),
+    FrameworkEvents.on<RequestFailed>("RequestFailed", (e) => {
+      const frames = parseStack(e.stack);
+      _finaliseTrace(e.ctx as HttpContext, e.startMs, e.durationMs, {
+        message: e.error,
+        status: e.status,
+        ...(e.type ? { type: e.type } : {}),
+        ...(frames.length ? { frames } : {}),
+      });
+    }),
+    // Outgoing calls, recorded here rather than by a bridge in the package that
+    // owns them: the owner is `@zerotal/core`, and core cannot know about the
+    // channel API because devtools is what depends on core. Devtools already
+    // subscribes to core's events, so this costs no new dependency in either
+    // direction.
+    FrameworkEvents.on<OutgoingRequestCompleted>("OutgoingRequestCompleted", (e) => {
+      // The event carries no context — the client does not take one — so the
+      // request is read from the ambient scope it was called in.
+      const ctx = RequestContext.tryGet();
+      if (!ctx) return;
+      traceSink.record(ctx, "http", {
+        method: e.method,
+        url: e.url,
+        host: e.host,
+        status: e.status || "—",
+        durationMs: e.durationMs,
+        failed: !e.ok,
+      });
+    }),
   ];
+
+  // Declared here rather than in a satellite for the same reason. `order` puts
+  // it beside the other per-request feeds rather than at the back of the strip.
+  traceSink.channel({
+    id: "http",
+    label: "Outgoing",
+    badge: "method",
+    title: "url",
+    meta: ["status", "durationMs", "host"],
+    warn: "failed",
+    order: 35,
+    render: "table",
+  });
 }
 
+/**
+ * Contexts already turned into a trace.
+ *
+ * One trace per context, enforced here rather than trusted: the HTTP lifecycle
+ * finalises exactly once, but a context that finalises *itself* — a Flow action,
+ * a queue job — could also be claimed by something else, and the second call
+ * would push a duplicate carrying none of the evidence, since the first cleaned
+ * the buffers out. Weak so it holds no context alive.
+ */
+const _finalised = new WeakSet<object>();
+
 /** Merge buffered events into a trace and push it to the store (once per request). */
-function _finaliseTrace(ctx: HttpContext, startMs: number, durationMs: number): void {
+function _finaliseTrace(
+  ctx: HttpContext,
+  startMs: number,
+  durationMs: number,
+  exception: ExceptionInfo | null,
+  method?: string,
+): void {
+  if (_finalised.has(ctx)) return;
+  _finalised.add(ctx);
+
   // Internal framework paths are noise — skip them
   if (_isInternal(ctx.url.pathname)) {
     _cleanupBuffers(ctx);
     return;
   }
 
-  const trace = _buildTrace(ctx, startMs, durationMs);
+  const trace = _buildTrace(ctx, startMs, durationMs, exception, method);
   _cleanupBuffers(ctx);
   traceStore().push(trace);
 }
@@ -298,6 +510,28 @@ const LOG_LEVELS = ["log", "debug", "info", "warn", "error"] as const;
 let _origConsole: Partial<Record<string, unknown>> = {};
 let _consoleCaptured = false;
 
+/**
+ * One logged argument, as the line the panel shows.
+ *
+ * Objects are redacted before they are serialised, not after: `console.log(user)`
+ * during a debug session used to write the whole record — password hash included
+ * — to disk for a day. Redacting also makes the value safe to serialise at all,
+ * since the walk replaces cycles; a circular argument used to throw a
+ * `Converting circular structure to JSON` out of this patch and into the caller's
+ * `console.log`.
+ */
+function _formatLogArg(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value instanceof Error) return `${value.name}: ${value.message}`;
+  const safe = redactValue(value, _redaction);
+  try {
+    return JSON.stringify(safe) ?? String(safe);
+  } catch {
+    // BigInt, a throwing toJSON — the log line is not worth failing the request.
+    return String(safe);
+  }
+}
+
 /** @internal — patch console.* to capture log lines per request context */
 export function startConsoleCapture(): void {
   // Idempotent: a second start() without an intervening stop() would otherwise
@@ -319,16 +553,14 @@ export function startConsoleCapture(): void {
       orig(...args);
       const ctx = RequestContext.tryGet();
       if (!ctx) return;
+      // One frame to skip: this wrapper is standing between the caller and the
+      // stack, and without dropping it every log line would point at devtools.
+      const source = _captureSource ? captureCallSite(1) : null;
       _bufPush(_ctxLogs, ctx, {
         level,
-        args: args.map((a) =>
-          typeof a === "string"
-            ? a
-            : a instanceof Error
-              ? `${a.name}: ${a.message}`
-              : (JSON.stringify(a, null, 0) ?? String(a)),
-        ),
+        args: args.map(_formatLogArg),
         absMs: Date.now(),
+        ...(source ? { source } : {}),
       });
     };
   }