api-tracer-kit 1.0.0

package/dist/ui.cjs

@@ -0,0 +1,1162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/index.tsx
+
+// src/storage/memory.ts
+var MemoryTraceStorage = class {
+  constructor(max = 500) {
+    this.max = max;
+    this.order = [];
+    this.byId = /* @__PURE__ */ new Map();
+  }
+  add(trace) {
+    if (!this.byId.has(trace.id)) this.order.push(trace.id);
+    this.byId.set(trace.id, trace);
+    while (this.order.length > this.max) {
+      const oldest = this.order.shift();
+      if (oldest !== void 0) this.byId.delete(oldest);
+    }
+  }
+  update(id, patch) {
+    const current = this.byId.get(id);
+    if (!current) return void 0;
+    const next = { ...current, ...patch };
+    this.byId.set(id, next);
+    return next;
+  }
+  get(id) {
+    return this.byId.get(id);
+  }
+  getAll() {
+    return this.order.map((id) => this.byId.get(id)).filter((t) => Boolean(t));
+  }
+  remove(id) {
+    this.byId.delete(id);
+    this.order = this.order.filter((x) => x !== id);
+  }
+  clear() {
+    this.order = [];
+    this.byId.clear();
+  }
+};
+
+// src/core/redact.ts
+var REDACTED = "<redacted>";
+var DEFAULT_REDACT_HEADERS = [
+  "authorization",
+  "cookie",
+  "set-cookie",
+  "proxy-authorization",
+  "x-api-key",
+  "api-key",
+  "auth_token",
+  "access_token",
+  "secret_token",
+  "x-auth-token",
+  "x-csrf-token"
+];
+var DEFAULT_REDACT_FIELDS = /(token|password|passwd|secret|api[-_]?key|authorization|credential|otp|ssn)/i;
+function redactValue(value, fields, seen = /* @__PURE__ */ new WeakSet()) {
+  if (Array.isArray(value)) return value.map((v) => redactValue(v, fields, seen));
+  if (value && typeof value === "object") {
+    if (seen.has(value)) return "[circular]";
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null) return value;
+    seen.add(value);
+    return Object.fromEntries(
+      Object.entries(value).map(([k, v]) => [
+        k,
+        fields.test(k) ? REDACTED : redactValue(v, fields, seen)
+      ])
+    );
+  }
+  return value;
+}
+function redactHeaders(headers, names) {
+  const drop = new Set(names.map((n) => n.toLowerCase()));
+  return Object.fromEntries(
+    Object.entries(headers).map(([k, v]) => [k, drop.has(k.toLowerCase()) ? REDACTED : v])
+  );
+}
+
+// src/core/url.ts
+function parseQuery(search) {
+  const out = {};
+  const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+  for (const [rawKey, value] of params) {
+    const asArray = /^(.+)\[\]$/.exec(rawKey);
+    const asNested = /^([^[]+)\[([^\]]+)\]$/.exec(rawKey);
+    if (asArray) {
+      const key = asArray[1];
+      (out[key] ?? (out[key] = [])).push(value);
+    } else if (asNested) {
+      const key = asNested[1];
+      (out[key] ?? (out[key] = {}))[asNested[2]] = value;
+    } else {
+      out[rawKey] = value;
+    }
+  }
+  return out;
+}
+function absoluteUrl(url, base) {
+  try {
+    const origin = base ?? (typeof location !== "undefined" ? location.href : void 0);
+    return origin ? new URL(url, origin).toString() : new URL(url).toString();
+  } catch {
+    return url;
+  }
+}
+function pathOf(url) {
+  try {
+    const u = new URL(url);
+    return `${u.origin}${u.pathname}`;
+  } catch {
+    return url.split("?")[0] ?? url;
+  }
+}
+function searchOf(url) {
+  try {
+    return new URL(url).search;
+  } catch {
+    const at = url.indexOf("?");
+    return at === -1 ? "" : url.slice(at);
+  }
+}
+function appendParams(url, params, prefix = "") {
+  for (const [rawKey, v] of Object.entries(params)) {
+    const key = prefix ? `${prefix}[${rawKey}]` : rawKey;
+    if (v === void 0 || v === null || v === "") continue;
+    if (Array.isArray(v)) {
+      for (const item of v) {
+        if (item !== null && typeof item === "object") appendParams(url, item, `${key}[]`);
+        else url.searchParams.append(`${key}[]`, String(item));
+      }
+    } else if (typeof v === "object") {
+      appendParams(url, v, key);
+    } else {
+      url.searchParams.append(key, String(v));
+    }
+  }
+}
+function matches(url, patterns) {
+  return patterns.some((p) => typeof p === "string" ? url.includes(p) : p.test(url));
+}
+
+// src/core/envelope.ts
+var DEFAULT_ENVELOPE = {
+  codeFields: ["status", "code"],
+  okField: "success",
+  failFrom: 400
+};
+function readEnvelope(bodyText, options) {
+  if (options === false || !bodyText) return {};
+  const cfg = { ...DEFAULT_ENVELOPE, ...options ?? {} };
+  let parsed;
+  try {
+    parsed = JSON.parse(bodyText);
+  } catch {
+    return {};
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+  const body = parsed;
+  let code;
+  for (const field of cfg.codeFields) {
+    if (typeof body[field] === "number") {
+      code = body[field];
+      break;
+    }
+  }
+  const flag = body[cfg.okField];
+  if (code === void 0 && typeof flag !== "boolean") return {};
+  return {
+    envelopeCode: code,
+    envelopeOk: !(code !== void 0 && code >= cfg.failFrom) && flag !== false
+  };
+}
+
+// src/core/env.ts
+var hasFetch = () => typeof globalThis.fetch === "function";
+var hasXhr = () => typeof globalThis.XMLHttpRequest === "function";
+var hasFormData = () => typeof globalThis.FormData !== "undefined";
+var hasBlob = () => typeof globalThis.Blob !== "undefined";
+var now = () => typeof globalThis.performance?.now === "function" ? globalThis.performance.now() : Date.now();
+var counter = 0;
+function traceId() {
+  const c = globalThis.crypto;
+  if (typeof c?.randomUUID === "function") {
+    try {
+      return c.randomUUID();
+    } catch {
+    }
+  }
+  counter += 1;
+  return `t-${Date.now().toString(36)}-${counter.toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+// src/core/global.ts
+var REGISTRY = /* @__PURE__ */ Symbol.for("api-tracer-kit.registry");
+var registry = () => {
+  const host = globalThis;
+  return host[REGISTRY] ?? (host[REGISTRY] = {});
+};
+function shared(key, create) {
+  const store = registry();
+  if (!(key in store)) store[key] = create();
+  return store[key];
+}
+function sharedCounter(key) {
+  return shared(key, () => ({ value: 0 }));
+}
+
+// src/core/body.ts
+function fromFormData(fd) {
+  const out = {};
+  for (const [key, value] of fd.entries()) {
+    const isFile = typeof File !== "undefined" && value instanceof File ? true : hasBlob() && value instanceof Blob;
+    const item = isFile ? `<file: ${value.name || "unnamed"}, ${value.size} bytes>` : value;
+    if (key in out) out[key] = [].concat(out[key], item);
+    else out[key] = item;
+  }
+  return out;
+}
+var parseQueryString = (text) => Object.fromEntries(new URLSearchParams(text).entries());
+function readRequestBody(value, maxBytes) {
+  if (value === void 0 || value === null) return { bodyType: "none" };
+  if (hasFormData() && value instanceof FormData) {
+    return { bodyType: "formdata", body: fromFormData(value) };
+  }
+  if (typeof URLSearchParams !== "undefined" && value instanceof URLSearchParams) {
+    return { bodyType: "urlencoded", body: Object.fromEntries(value.entries()) };
+  }
+  if (typeof ReadableStream !== "undefined" && value instanceof ReadableStream) {
+    return { bodyType: "binary", omitted: "stream" };
+  }
+  if (hasBlob() && value instanceof Blob) {
+    return { bodyType: "binary", body: `<blob: ${value.size} bytes, ${value.type || "unknown"}>`, omitted: "binary" };
+  }
+  if (value instanceof ArrayBuffer || ArrayBuffer.isView(value)) {
+    return { bodyType: "binary", body: `<binary: ${value.byteLength} bytes>`, omitted: "binary" };
+  }
+  if (typeof value === "string") {
+    if (value.length > maxBytes) return { bodyType: "text", omitted: "too-large" };
+    const trimmed = value.trim();
+    if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+      try {
+        return { bodyType: "json", body: JSON.parse(value) };
+      } catch {
+        return { bodyType: "text", body: value };
+      }
+    }
+    if (/^[^=&\s]+=[^&]*(&|$)/.test(trimmed)) {
+      return { bodyType: "urlencoded", body: parseQueryString(trimmed) };
+    }
+    return { bodyType: "text", body: value };
+  }
+  if (typeof value === "object") {
+    try {
+      const text = JSON.stringify(value);
+      if (text && text.length > maxBytes) return { bodyType: "json", omitted: "too-large" };
+      return { bodyType: "json", body: value };
+    } catch {
+      return { bodyType: "json", omitted: "unreadable" };
+    }
+  }
+  return { bodyType: "text", body: String(value) };
+}
+var TEXTUAL = /^(application\/(json|.*\+json|xml|x-www-form-urlencoded|javascript)|text\/)/i;
+var STREAMING = /^text\/event-stream/i;
+async function readResponseBody(response, maxBytes) {
+  const type = response.headers.get("content-type") ?? "";
+  if (STREAMING.test(type)) return { omitted: "stream" };
+  if (type && !TEXTUAL.test(type)) {
+    const declared2 = Number(response.headers.get("content-length"));
+    return { omitted: "binary", size: Number.isFinite(declared2) ? declared2 : void 0 };
+  }
+  const declared = Number(response.headers.get("content-length"));
+  if (Number.isFinite(declared) && declared > maxBytes) {
+    return { omitted: "too-large", size: declared };
+  }
+  let clone;
+  try {
+    clone = response.clone();
+  } catch {
+    return { omitted: "unreadable" };
+  }
+  try {
+    const text = await clone.text();
+    if (text.length > maxBytes) return { omitted: "too-large", size: text.length };
+    return { body: text, size: text.length };
+  } catch {
+    return { omitted: "unreadable" };
+  }
+}
+function headersToObject(input) {
+  if (!input) return {};
+  const out = {};
+  if (typeof Headers !== "undefined" && input instanceof Headers) {
+    input.forEach((value, key) => {
+      out[key] = value;
+    });
+    return out;
+  }
+  if (Array.isArray(input)) {
+    for (const pair of input) if (pair?.[0]) out[pair[0]] = String(pair[1]);
+    return out;
+  }
+  if (typeof input === "object") {
+    for (const [k, v] of Object.entries(input)) {
+      if (v === void 0 || v === null || typeof v === "object") continue;
+      out[k] = String(v);
+    }
+  }
+  return out;
+}
+
+// src/adapters/fetch.ts
+var PATCHED = /* @__PURE__ */ Symbol.for("api-tracer-kit.fetch");
+function describe(input, init, maxBytes) {
+  const isRequest = typeof Request !== "undefined" && input instanceof Request;
+  const raw = isRequest ? input.url : String(input);
+  const url = absoluteUrl(raw);
+  const method = (init?.method ?? (isRequest ? input.method : "GET")).toUpperCase();
+  const headers = headersToObject(init?.headers ?? (isRequest ? input.headers : void 0));
+  const body = init?.body !== void 0 ? readRequestBody(init.body, maxBytes) : isRequest && input.body ? { bodyType: "binary", omitted: "stream" } : { bodyType: "none" };
+  return {
+    url,
+    path: pathOf(url),
+    method,
+    headers,
+    params: parseQuery(searchOf(url)),
+    body: "body" in body ? body.body : void 0,
+    bodyType: body.bodyType,
+    bodyOmitted: body.omitted
+  };
+}
+function installFetch(tracer) {
+  const original = globalThis.fetch;
+  if (original[PATCHED]) return () => {
+  };
+  const patched = function fetch(input, init) {
+    let trace;
+    try {
+      const request = describe(input, init, tracer.options.maxBodyBytes);
+      if (tracer.shouldTrace(request.url)) trace = tracer.start("fetch", request);
+    } catch {
+    }
+    const call = original.call(this ?? globalThis, input, init);
+    if (!trace) return call;
+    const id = trace.id;
+    return call.then(
+      (response) => {
+        void (async () => {
+          const read = await readResponseBody(response, tracer.options.maxBodyBytes);
+          tracer.complete(id, {
+            status: response.ok ? "success" : "error",
+            response: {
+              status: response.status,
+              statusText: response.statusText,
+              headers: headersToObject(response.headers),
+              body: read.body,
+              bodyOmitted: read.omitted,
+              size: read.size
+            }
+          });
+        })().catch(() => {
+          tracer.complete(id, { status: response.ok ? "success" : "error" });
+        });
+        return response;
+      },
+      (error) => {
+        const name = error?.name;
+        tracer.complete(id, {
+          // an aborted request is not a broken endpoint
+          status: name === "AbortError" ? "cancelled" : "network-error",
+          error: {
+            message: String(error?.message ?? error),
+            name,
+            stack: error?.stack
+          }
+        });
+        throw error;
+      }
+    );
+  };
+  patched[PATCHED] = original;
+  globalThis.fetch = patched;
+  return () => {
+    if (globalThis.fetch === patched) globalThis.fetch = original;
+  };
+}
+
+// src/adapters/suppress.ts
+var depth = () => sharedCounter("xhr-suppression");
+var suppressXhr = (fn) => {
+  const d = depth();
+  d.value += 1;
+  try {
+    return fn();
+  } finally {
+    d.value -= 1;
+  }
+};
+var xhrSuppressed = () => depth().value > 0;
+
+// src/adapters/xhr.ts
+var STATE = /* @__PURE__ */ Symbol.for("api-tracer-kit.xhr.state");
+var PATCHED2 = /* @__PURE__ */ Symbol.for("api-tracer-kit.xhr");
+function parseResponseHeaders(raw) {
+  const out = {};
+  for (const line of raw.split(/\r?\n/)) {
+    const at = line.indexOf(":");
+    if (at === -1) continue;
+    out[line.slice(0, at).trim().toLowerCase()] = line.slice(at + 1).trim();
+  }
+  return out;
+}
+function readBody(xhr, maxBytes) {
+  if (xhr.responseType && xhr.responseType !== "text" && xhr.responseType !== "json") {
+    return { omitted: "binary" };
+  }
+  try {
+    const text = xhr.responseType === "json" ? JSON.stringify(xhr.response) : xhr.responseText;
+    if (typeof text !== "string") return { omitted: "unreadable" };
+    if (text.length > maxBytes) return { omitted: "too-large", size: text.length };
+    return { body: text, size: text.length };
+  } catch {
+    return { omitted: "unreadable" };
+  }
+}
+function installXhr(tracer) {
+  const proto = globalThis.XMLHttpRequest.prototype;
+  if (proto[PATCHED2]) return () => {
+  };
+  const open = proto.open;
+  const send = proto.send;
+  const setRequestHeader = proto.setRequestHeader;
+  proto.open = function(method, url, ...rest) {
+    try {
+      this[STATE] = { method: String(method).toUpperCase(), url: absoluteUrl(String(url)), headers: {} };
+    } catch {
+    }
+    return open.call(this, method, url, ...rest);
+  };
+  proto.setRequestHeader = function(name, value) {
+    const state = this[STATE];
+    if (state) state.headers[name] = value;
+    return setRequestHeader.call(this, name, value);
+  };
+  proto.send = function(body) {
+    const state = this[STATE];
+    try {
+      if (state && !xhrSuppressed() && tracer.shouldTrace(state.url)) {
+        const read = readRequestBody(body ?? void 0, tracer.options.maxBodyBytes);
+        const trace = tracer.start("xhr", {
+          url: state.url,
+          path: pathOf(state.url),
+          method: state.method,
+          headers: state.headers,
+          params: parseQuery(searchOf(state.url)),
+          body: read.body,
+          bodyType: read.bodyType,
+          bodyOmitted: read.omitted
+        });
+        state.traceId = trace.id;
+        const id = trace.id;
+        this.addEventListener("load", () => {
+          const read2 = readBody(this, tracer.options.maxBodyBytes);
+          tracer.complete(id, {
+            status: this.status >= 200 && this.status < 300 ? "success" : "error",
+            response: {
+              status: this.status,
+              statusText: this.statusText,
+              headers: parseResponseHeaders(this.getAllResponseHeaders?.() ?? ""),
+              ...read2
+            }
+          });
+        });
+        this.addEventListener("error", () => {
+          tracer.complete(id, { status: "network-error", error: { message: "network error" } });
+        });
+        this.addEventListener("timeout", () => {
+          tracer.complete(id, { status: "network-error", error: { message: "timeout", name: "TimeoutError" } });
+        });
+        this.addEventListener("abort", () => {
+          tracer.complete(id, { status: "cancelled", error: { message: "aborted", name: "AbortError" } });
+        });
+      }
+    } catch {
+    }
+    return send.call(this, body ?? null);
+  };
+  proto[PATCHED2] = true;
+  return () => {
+    proto.open = open;
+    proto.send = send;
+    proto.setRequestHeader = setRequestHeader;
+    delete proto[PATCHED2];
+  };
+}
+
+// src/adapters/axios.ts
+var ATTACHED = /* @__PURE__ */ Symbol.for("api-tracer-kit.axios");
+function fullUrl(config) {
+  const base = config.baseURL ?? "";
+  const path = config.url ?? "";
+  const joined = /^https?:\/\//i.test(path) ? path : `${base.replace(/\/+$/, "")}${path.startsWith("/") || !base ? "" : "/"}${path}`;
+  const absolute = absoluteUrl(joined);
+  if (!config.params || !Object.keys(config.params).length) return absolute;
+  try {
+    const url = new URL(absolute);
+    appendParams(url, config.params);
+    return url.toString();
+  } catch {
+    return absolute;
+  }
+}
+function responseBody(data, maxBytes) {
+  if (data === void 0 || data === null) return {};
+  if (typeof data === "string") {
+    return data.length > maxBytes ? { bodyOmitted: "too-large", size: data.length } : { body: data, size: data.length };
+  }
+  if (typeof Blob !== "undefined" && data instanceof Blob) return { bodyOmitted: "binary", size: data.size };
+  if (data instanceof ArrayBuffer || ArrayBuffer.isView(data)) return { bodyOmitted: "binary", size: data.byteLength };
+  try {
+    const text = JSON.stringify(data);
+    if (typeof text !== "string") return { bodyOmitted: "unreadable" };
+    return text.length > maxBytes ? { bodyOmitted: "too-large", size: text.length } : { body: text, size: text.length };
+  } catch {
+    return { bodyOmitted: "unreadable" };
+  }
+}
+var ours = /* @__PURE__ */ new WeakMap();
+var wrapped = [];
+function wrapInstance(instance, tracer) {
+  const marked = instance;
+  if (!instance || marked[ATTACHED]) return instance;
+  marked[ATTACHED] = true;
+  const inherited = instance.defaults?.adapter;
+  if (typeof inherited === "function" && ours.has(inherited)) {
+    wrapped.push({ instance, current: ours.get(inherited) });
+    return instance;
+  }
+  const defaults = instance.defaults ?? (instance.defaults = {});
+  let inner = defaults.adapter;
+  const adapter = (config) => {
+    const run = () => suppressXhr(
+      () => typeof inner === "function" ? inner(config) : (
+        // fall back to whatever axios would have used, by passing it through
+        instance.request({
+          ...config,
+          adapter: inner
+        })
+      )
+    );
+    let id;
+    try {
+      const url = fullUrl(config);
+      if (tracer.shouldTrace(url)) {
+        const read = readRequestBody(config.data, tracer.options.maxBodyBytes);
+        id = tracer.start("axios", {
+          url,
+          path: pathOf(url),
+          method: (config.method ?? "get").toUpperCase(),
+          headers: headersToObject(config.headers),
+          params: config.params ? { ...config.params } : parseQuery(searchOf(url)),
+          body: read.body,
+          bodyType: read.bodyType,
+          bodyOmitted: read.omitted
+        }).id;
+      }
+    } catch {
+    }
+    const promise = run();
+    if (!id) return promise;
+    const traceId2 = id;
+    return promise.then(
+      (response) => {
+        tracer.complete(traceId2, {
+          status: response.status >= 200 && response.status < 300 ? "success" : "error",
+          response: {
+            status: response.status,
+            statusText: response.statusText,
+            headers: headersToObject(response.headers),
+            ...responseBody(response.data, tracer.options.maxBodyBytes)
+          }
+        });
+        return response;
+      },
+      (error) => {
+        const err = error;
+        if (err?.response) {
+          tracer.complete(traceId2, {
+            status: "error",
+            response: {
+              status: err.response.status,
+              statusText: err.response.statusText,
+              headers: headersToObject(err.response.headers),
+              ...responseBody(err.response.data, tracer.options.maxBodyBytes)
+            },
+            error: { message: String(err.message ?? error), name: err.name, stack: err.stack }
+          });
+        } else {
+          const cancelled = err?.code === "ERR_CANCELED" || err?.name === "CanceledError" || err?.name === "AbortError";
+          tracer.complete(traceId2, {
+            status: cancelled ? "cancelled" : "network-error",
+            error: { message: String(err?.message ?? error), name: err?.name, stack: err?.stack }
+          });
+        }
+        throw error;
+      }
+    );
+  };
+  wrapped.push({ instance, current: () => inner });
+  ours.set(adapter, () => inner);
+  Object.defineProperty(defaults, "adapter", {
+    configurable: true,
+    enumerable: true,
+    get: () => adapter,
+    set: (next) => {
+      inner = next;
+    }
+  });
+  return instance;
+}
+function installAxios(tracer, axios) {
+  const instance = axios;
+  if (!instance) return () => {
+  };
+  wrapInstance(instance, tracer);
+  const create = instance.create?.bind(instance);
+  if (create) {
+    instance.create = (config) => wrapInstance(create(config), tracer);
+  }
+  return () => {
+    if (create) instance.create = create;
+    for (const entry of wrapped.splice(0)) {
+      const marked = entry.instance;
+      delete marked[ATTACHED];
+      if (!entry.instance.defaults) continue;
+      Object.defineProperty(entry.instance.defaults, "adapter", {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: entry.current()
+      });
+    }
+  };
+}
+
+// src/transport/report.ts
+function toRecordPayload(trace) {
+  return {
+    method: trace.request.method,
+    url: trace.request.url,
+    params: trace.request.params,
+    data: trace.request.body ?? {},
+    bodyType: trace.request.bodyType === "none" ? "json" : trace.request.bodyType,
+    status: trace.response?.status ?? null,
+    ms: trace.timing.duration,
+    body: trace.response?.body,
+    error: trace.error?.message
+  };
+}
+function createReporter(baseUrl) {
+  const endpoint = `${baseUrl.replace(/\/+$/, "")}/api/record`;
+  let failures = 0;
+  return (trace) => {
+    if (!hasFetch() || trace.status === "pending" || failures > 5) return;
+    try {
+      void globalThis.fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(toRecordPayload(trace)),
+        // survives the page being closed mid-flight
+        keepalive: true,
+        mode: "cors"
+      }).then(
+        () => {
+          failures = 0;
+        },
+        () => {
+          failures += 1;
+        }
+      );
+    } catch {
+      failures += 1;
+    }
+  };
+}
+
+// src/core/tracer.ts
+var DEFAULT_REPORT_URL = "http://localhost:4400";
+var ApiTracer = class {
+  constructor() {
+    this.storage = new MemoryTraceStorage();
+    this.listeners = /* @__PURE__ */ new Set();
+    this.uninstallers = [];
+    this.started = false;
+    this.options = {
+      include: [],
+      exclude: [],
+      redactHeaderNames: DEFAULT_REDACT_HEADERS,
+      redactFields: DEFAULT_REDACT_FIELDS,
+      maxBodyBytes: 2e5,
+      maxTraces: 500,
+      envelope: void 0,
+      debug: false
+    };
+  }
+  /**
+   * Installs the interceptors. Calling it twice is a no-op rather than a second
+   * set of hooks — a double-init in React StrictMode or a hot reload must not
+   * double-count every request.
+   */
+  init(options = {}) {
+    if (this.started) {
+      if (options.onTrace) this.subscribe(options.onTrace);
+      return this;
+    }
+    this.options = {
+      include: options.include ?? [],
+      exclude: options.exclude ?? [],
+      redactHeaderNames: options.redactHeaders ?? DEFAULT_REDACT_HEADERS,
+      redactFields: options.redactFields ?? DEFAULT_REDACT_FIELDS,
+      maxBodyBytes: options.maxBodyBytes ?? 2e5,
+      maxTraces: options.maxTraces ?? 500,
+      envelope: options.envelope,
+      debug: options.debug ?? false
+    };
+    this.storage = options.storage ?? new MemoryTraceStorage(this.options.maxTraces);
+    if (options.onTrace) this.subscribe(options.onTrace);
+    if (options.reportTo) {
+      const url = options.reportTo === true ? DEFAULT_REPORT_URL : options.reportTo;
+      this.reporter = createReporter(url);
+      this.options.exclude = [...this.options.exclude, `${url.replace(/\/+$/, "")}/api/record`];
+    }
+    const wanted = options.transports ?? ["fetch", "xhr", "axios"];
+    if (wanted.includes("fetch") && hasFetch()) this.uninstallers.push(installFetch(this));
+    if (wanted.includes("xhr") && hasXhr()) this.uninstallers.push(installXhr(this));
+    this.started = true;
+    if (this.options.debug) {
+      console.info("[api-tracer] tracing", wanted.join(", "));
+    }
+    return this;
+  }
+  /**
+   * Traces an axios instance and everything it creates. Needed because an axios
+   * instance is an object the tracer has no way to reach on its own — there is
+   * no global to patch. One call covers the default export and every instance
+   * made from it afterwards.
+   */
+  useAxios(axios) {
+    if (!this.started) this.init();
+    this.uninstallers.push(installAxios(this, axios));
+    return this;
+  }
+  /** puts every patched global back, so the app behaves exactly as before */
+  destroy() {
+    for (const off of this.uninstallers.splice(0)) {
+      try {
+        off();
+      } catch {
+      }
+    }
+    this.listeners.clear();
+    this.reporter = void 0;
+    this.started = false;
+  }
+  get isActive() {
+    return this.started;
+  }
+  /* ------------------------------------------------------------ read side */
+  getTraces() {
+    return this.storage.getAll();
+  }
+  getTrace(id) {
+    return this.storage.get(id);
+  }
+  clear() {
+    this.storage.clear();
+  }
+  remove(id) {
+    this.storage.remove(id);
+  }
+  /** returns the unsubscribe function, so a component can clean up after itself */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  /* ----------------------------------------------------------- write side */
+  /** whether this URL is one we were asked to watch */
+  shouldTrace(url) {
+    if (this.options.exclude.length && matches(url, this.options.exclude)) return false;
+    if (this.options.include.length) return matches(url, this.options.include);
+    return true;
+  }
+  /** opens a trace; the adapter completes it later with the same id */
+  start(transport, request) {
+    const trace = {
+      id: traceId(),
+      transport,
+      status: "pending",
+      request: {
+        ...request,
+        headers: redactHeaders(request.headers, this.options.redactHeaderNames),
+        params: redactValue(request.params, this.options.redactFields),
+        body: request.body === void 0 ? void 0 : redactValue(request.body, this.options.redactFields)
+      },
+      timing: { startedAt: now() }
+    };
+    this.storage.add(trace);
+    return trace;
+  }
+  complete(id, outcome) {
+    const current = this.storage.get(id);
+    if (!current) return;
+    const completedAt = now();
+    const response = outcome.response ? {
+      ...outcome.response,
+      headers: redactHeaders(outcome.response.headers, this.options.redactHeaderNames)
+    } : void 0;
+    const envelope = response ? readEnvelope(response.body, this.options.envelope) : {};
+    const next = this.storage.update(id, {
+      status: outcome.status,
+      response,
+      error: outcome.error,
+      timing: {
+        startedAt: current.timing.startedAt,
+        completedAt,
+        duration: Math.round(completedAt - current.timing.startedAt)
+      },
+      ...envelope
+    });
+    if (next) this.emit(next);
+  }
+  emit(trace) {
+    for (const listener of this.listeners) {
+      try {
+        listener(trace);
+      } catch (e) {
+        if (this.options.debug) console.warn("[api-tracer] listener threw", e);
+      }
+    }
+    this.reporter?.(trace);
+  }
+};
+var apiTracer = shared("tracer", () => new ApiTracer());
+
+// src/react.ts
+function useApiTraces() {
+  const [traces, setTraces] = react.useState(() => apiTracer.getTraces());
+  const frame = react.useRef(null);
+  react.useEffect(() => {
+    const flush = () => {
+      frame.current = null;
+      setTraces(apiTracer.getTraces());
+    };
+    const schedule = () => {
+      if (frame.current !== null) return;
+      frame.current = typeof requestAnimationFrame === "function" ? requestAnimationFrame(flush) : setTimeout(flush, 16);
+    };
+    const off = apiTracer.subscribe(schedule);
+    schedule();
+    return () => {
+      off();
+      if (frame.current !== null && typeof cancelAnimationFrame === "function") {
+        cancelAnimationFrame(frame.current);
+      }
+      frame.current = null;
+    };
+  }, []);
+  const clear = react.useCallback(() => {
+    apiTracer.clear();
+    setTraces([]);
+  }, []);
+  const remove = react.useCallback((id) => {
+    apiTracer.remove(id);
+    setTraces(apiTracer.getTraces());
+  }, []);
+  return { traces, clear, remove };
+}
+var COLOURS = {
+  pending: "#9aa4b2",
+  success: "#2f9e44",
+  error: "#e03131",
+  "network-error": "#e8590c",
+  cancelled: "#868e96"
+};
+var S = {
+  panel: {
+    position: "fixed",
+    zIndex: 2147483e3,
+    width: "min(720px, calc(100vw - 32px))",
+    maxHeight: "min(70vh, 640px)",
+    display: "flex",
+    flexDirection: "column",
+    background: "#14171c",
+    color: "#e7ebf0",
+    border: "1px solid #2b313a",
+    borderRadius: 10,
+    boxShadow: "0 10px 40px rgba(0,0,0,.45)",
+    font: "12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
+    overflow: "hidden"
+  },
+  bar: {
+    display: "flex",
+    gap: 8,
+    alignItems: "center",
+    padding: "8px 10px",
+    borderBottom: "1px solid #2b313a",
+    background: "#191d24",
+    flexWrap: "wrap"
+  },
+  input: {
+    flex: "1 1 140px",
+    minWidth: 100,
+    background: "#0f1216",
+    border: "1px solid #2b313a",
+    borderRadius: 6,
+    color: "#e7ebf0",
+    padding: "4px 8px",
+    font: "inherit"
+  },
+  select: {
+    background: "#0f1216",
+    border: "1px solid #2b313a",
+    borderRadius: 6,
+    color: "#e7ebf0",
+    padding: "4px 6px",
+    font: "inherit"
+  },
+  button: {
+    background: "#232932",
+    border: "1px solid #2b313a",
+    borderRadius: 6,
+    color: "#e7ebf0",
+    padding: "4px 10px",
+    cursor: "pointer",
+    font: "inherit"
+  },
+  row: {
+    display: "grid",
+    gridTemplateColumns: "58px 1fr 52px 62px",
+    gap: 8,
+    alignItems: "center",
+    padding: "5px 10px",
+    borderBottom: "1px solid #20252c",
+    cursor: "pointer",
+    textAlign: "left",
+    width: "100%",
+    background: "transparent",
+    color: "inherit",
+    border: 0,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    font: "inherit"
+  },
+  key: { color: "#7f8896" },
+  pre: {
+    margin: 0,
+    padding: 8,
+    background: "#0f1216",
+    borderRadius: 6,
+    maxHeight: 220,
+    overflow: "auto",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+  }
+};
+var corner = (position) => ({
+  "bottom-right": { bottom: 16, right: 16 },
+  "bottom-left": { bottom: 16, left: 16 },
+  "top-right": { top: 16, right: 16 },
+  "top-left": { top: 16, left: 16 }
+})[position];
+var pretty = (value) => {
+  if (value === void 0) return "";
+  if (typeof value === "string") {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2);
+    } catch {
+      return value;
+    }
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+var shortPath = (trace) => {
+  try {
+    const url = new URL(trace.request.url);
+    return `${url.pathname}${url.search}`;
+  } catch {
+    return trace.request.url;
+  }
+};
+function Section({ title, children }) {
+  if (children === null || children === void 0 || children === "") return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 10 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...S.key, marginBottom: 4 }, children: title }),
+    children
+  ] });
+}
+function Detail({ trace }) {
+  const headers = (h) => Object.keys(h).length ? /* @__PURE__ */ jsxRuntime.jsx("pre", { style: S.pre, children: Object.entries(h).map(([k, v]) => `${k}: ${v}`).join("\n") }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 10, borderBottom: "1px solid #20252c", background: "#11141a" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 8, wordBreak: "break-all" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("b", { children: trace.request.method }),
+      " ",
+      trace.request.url
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...S.key, marginBottom: 10 }, children: [
+      trace.transport,
+      " \xB7 ",
+      trace.status,
+      trace.response ? ` \xB7 HTTP ${trace.response.status}` : "",
+      trace.envelopeCode !== void 0 ? ` \xB7 body code ${trace.envelopeCode}` : "",
+      trace.timing.duration !== void 0 ? ` \xB7 ${trace.timing.duration}ms` : "",
+      trace.response?.size !== void 0 ? ` \xB7 ${trace.response.size} bytes` : ""
+    ] }),
+    trace.error ? /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "error", children: /* @__PURE__ */ jsxRuntime.jsxs("pre", { style: { ...S.pre, color: COLOURS["network-error"] }, children: [
+      trace.error.name ? `${trace.error.name}: ` : "",
+      trace.error.message
+    ] }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "query params", children: Object.keys(trace.request.params).length ? /* @__PURE__ */ jsxRuntime.jsx("pre", { style: S.pre, children: pretty(trace.request.params) }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "request headers", children: headers(trace.request.headers) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: `request body (${trace.request.bodyType})`, children: trace.request.bodyOmitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.key, children: [
+      "omitted: ",
+      trace.request.bodyOmitted
+    ] }) : trace.request.body !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("pre", { style: S.pre, children: pretty(trace.request.body) }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "response headers", children: trace.response ? headers(trace.response.headers) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "response body", children: trace.response?.bodyOmitted ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.key, children: [
+      "omitted: ",
+      trace.response.bodyOmitted
+    ] }) : trace.response?.body !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("pre", { style: S.pre, children: pretty(trace.response.body) }) : null })
+  ] });
+}
+function ApiTracerPanel({
+  collapsed = true,
+  position = "bottom-right",
+  enabled = true,
+  style
+}) {
+  const { traces, clear } = useApiTraces();
+  const [open, setOpen] = react.useState(!collapsed);
+  const [query, setQuery] = react.useState("");
+  const [method, setMethod] = react.useState("");
+  const [status, setStatus] = react.useState("");
+  const [sort, setSort] = react.useState("time");
+  const [expanded, setExpanded] = react.useState(null);
+  const shown = react.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const rows = traces.filter((t) => {
+      if (method && t.request.method !== method) return false;
+      if (status === "failed" && t.status === "success") return false;
+      if (status === "ok" && t.status !== "success") return false;
+      if (status && status !== "failed" && status !== "ok" && t.status !== status) return false;
+      if (!q) return true;
+      return `${t.request.method} ${t.request.url} ${t.response?.status ?? ""}`.toLowerCase().includes(q);
+    });
+    const by = {
+      time: (a, b) => b.timing.startedAt - a.timing.startedAt,
+      duration: (a, b) => (b.timing.duration ?? 0) - (a.timing.duration ?? 0),
+      status: (a, b) => (a.response?.status ?? 0) - (b.response?.status ?? 0),
+      url: (a, b) => a.request.url.localeCompare(b.request.url)
+    };
+    return [...rows].sort(by[sort]);
+  }, [traces, query, method, status, sort]);
+  if (!enabled) return null;
+  const failed = traces.filter((t) => t.status !== "success" && t.status !== "pending").length;
+  if (!open) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        style: { ...S.button, ...S.panel, ...corner(position), width: "auto", padding: "6px 12px", display: "block" },
+        "aria-label": "Open the API tracer",
+        children: [
+          "API ",
+          traces.length,
+          failed ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: COLOURS.error }, children: [
+            " \xB7 ",
+            failed,
+            " failed"
+          ] }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...S.panel, ...corner(position), ...style }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.bar, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("b", { style: { marginRight: 4 }, children: "API tracer" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: S.key, children: [
+        shown.length,
+        "/",
+        traces.length
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          style: S.input,
+          placeholder: "search url, method, status",
+          value: query,
+          onChange: (e) => setQuery(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("select", { style: S.select, value: method, onChange: (e) => setMethod(e.target.value), "aria-label": "method", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "any method" }),
+        ["GET", "POST", "PUT", "PATCH", "DELETE"].map((m) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: m, children: m }, m))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("select", { style: S.select, value: status, onChange: (e) => setStatus(e.target.value), "aria-label": "status", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "any status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "ok", children: "passing" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "failed", children: "failing" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pending", children: "in flight" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "cancelled", children: "cancelled" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "network-error", children: "network error" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("select", { style: S.select, value: sort, onChange: (e) => setSort(e.target.value), "aria-label": "sort", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "time", children: "newest" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "duration", children: "slowest" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "status", children: "status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "url", children: "url" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: S.button, onClick: clear, children: "clear" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: S.button, onClick: () => setOpen(false), children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "auto" }, children: shown.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 16, ...S.key }, children: "No calls captured yet." }) : shown.map((t) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          style: S.row,
+          onClick: () => setExpanded(expanded === t.id ? null : t.id),
+          "aria-expanded": expanded === t.id,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: COLOURS[t.status] }, children: t.request.method }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: shortPath(t) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: COLOURS[t.status], textAlign: "right" }, children: t.response?.status ?? (t.status === "pending" ? "\u2026" : "\u2014") }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...S.key, textAlign: "right" }, children: t.timing.duration !== void 0 ? `${t.timing.duration}ms` : "" })
+          ]
+        }
+      ),
+      expanded === t.id ? /* @__PURE__ */ jsxRuntime.jsx(Detail, { trace: t }) : null
+    ] }, t.id)) })
+  ] });
+}
+var ui_default = ApiTracerPanel;
+
+exports.ApiTracerPanel = ApiTracerPanel;
+exports.default = ui_default;
+//# sourceMappingURL=ui.cjs.map
+//# sourceMappingURL=ui.cjs.map