@dg-superapp/bridge-devtools

Developer tools for DG Super App Bridge — event bus, instrumented bridge, logging, call history, and visual debug panels (v1 vanilla + v2 Preact).

v1 (mountPanel) — stable

import { mountPanel } from "@dg-superapp/bridge-devtools";

const handle = mountPanel(document.getElementById("devtools")!, bridge);
// ...
handle.unmount();

The v1 panel is unchanged by Phase 59 and is not deprecated.

v2 (mountDevtoolsV2) — preview

Phase 59 ships a new Preact-based panel behind the ./v2 subpath with four tabs: Waterfall (DT-01), Inspector (DT-02), Profile (DT-03), and Time-travel (DT-04).

import { mountDevtoolsV2 } from "@dg-superapp/bridge-devtools/v2";

const panel = mountDevtoolsV2(
  document.getElementById("devtools")!,
  bridge,
  {
    defaultTab: "waterfall",
    // optional: pre-load a recording into the Time-travel tab
    // initialRecording: recording,
  },
);

// ... later
panel.unmount();

mountDevtoolsV2 subscribes to the global bridge event bus (getEventBus()) and ingests call-complete / call-error events into a rolling 1000-entry window. Click a row in Waterfall to open it in the Inspector. Profile computes p50/p95/p99 per handler. Time-travel replays a BridgeRecording step-by-step.

Do not ship to production

The devtools panel keeps live bridge call args and responses in memory to enable inspection. This data often includes secrets (auth tokens, user profile fields, internal IDs). Do not ship bridge-devtools in production builds. Gate the import behind a dev-only conditional, e.g.:

if (import.meta.env.DEV) {
  const { mountDevtoolsV2 } = await import(
    "@dg-superapp/bridge-devtools/v2"
  );
  mountDevtoolsV2(container, bridge);
}

The ./v2 subpath bundles preact as a runtime dependency (~10 kB gz). The main . entry does not.

Docs

Full per-tab walkthrough: docs/devtools-v2.md.