@concavejs/devtools 0.0.1-alpha.4

package/dist/client.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Client entry point for DevTools
+ * This is injected into the browser by the Vite plugin
+ */
+export declare function initDevTools(options?: {
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+}): void;

package/dist/client.js

@@ -0,0 +1,5 @@
+import "react/jsx-runtime";
+import { i as t } from "./client-D6NyDOCN.js";
+export {
+  t as initDevTools
+};

package/dist/extension/page-agent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Page Agent — Thin IIFE injected into the page context.
+ *
+ * Intercepts WebSocket traffic using the same WebSocketInterceptor,
+ * but instead of a full EventStore it posts events to the content script
+ * via window.postMessage. Buffers the last 500 events for late-opening panels.
+ */
+export {};

package/dist/extension/panel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * DevTools Panel Entry — React app rendered inside the Chrome DevTools "Concave" tab.
+ *
+ * Uses chrome.devtools.inspectedWindow.reload({ injectedScript }) to install a
+ * WebSocket interceptor BEFORE any page scripts run. This guarantees full
+ * interception without any permissions beyond the devtools_page manifest key.
+ *
+ * Flow:
+ *  1. Panel opens → try eval() injection (catches new WS connections)
+ *  2. If page already has a connection → show "Reload" button
+ *  3. Reload uses inspectedWindow.reload({ injectedScript }) — runs before page JS
+ *  4. On navigation → re-inject via eval()
+ */
+import "../devtools.css";

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Concave DevTools
+ *
+ * Client-side development tools for Convex/Concave applications
+ */
+export type { DevToolsEvent, QueryEvent, MutationEvent, ActionEvent, SubscriptionEvent, LogEvent, AuthEvent, ActiveSubscription, PerformanceMetrics, EventType, EventStatus, SubscriptionStatus, } from "./types";
+export { EventStore, getGlobalEventStore } from "./store/event-store";
+export type { EventListener, StoreSnapshot, ExportedSession } from "./store/event-store";
+export { WebSocketInterceptor } from "./interceptor/websocket-interceptor";
+export { DevToolbar } from "./overlay/DevToolbar";
+export { SubscriptionsPanel } from "./overlay/SubscriptionsPanel";
+export { PerformancePanel } from "./overlay/PerformancePanel";
+export { LogsPanel } from "./overlay/LogsPanel";
+export { SettingsPanel } from "./overlay/SettingsPanel";
+export { DataInspector } from "./overlay/DataInspector";
+export { initDevTools } from "./client";
+export { default as concaveDevTools } from "./vite-plugin/index";
+export type { DevToolsOptions } from "./vite-plugin/index";

package/dist/index.js

@@ -0,0 +1,380 @@
+var m = Object.defineProperty;
+var v = (c, e, t) => e in c ? m(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
+var d = (c, e, t) => v(c, typeof e != "symbol" ? e + "" : e, t);
+import { b as w, D as P, E, L as S, P as A, a as L, S as M, g as D, i as $ } from "./client-D6NyDOCN.js";
+import { concaveDevTools as R } from "./vite-plugin.js";
+function T(c) {
+  const e = c.split(".");
+  if (e.length < 2) return null;
+  try {
+    const t = e[1].replace(/-/g, "+").replace(/_/g, "/"), n = t + "=".repeat((4 - t.length % 4) % 4), s = JSON.parse(atob(n)), o = ["iss", "sub", "aud", "exp", "iat", "nbf"], i = {};
+    for (const a of o) {
+      const u = s[a];
+      u !== void 0 && (i[a] = u);
+    }
+    return typeof i.exp == "number" && (i.expIso = new Date(i.exp * 1e3).toISOString()), typeof i.iat == "number" && (i.iatIso = new Date(i.iat * 1e3).toISOString()), Object.keys(i).length > 0 ? i : null;
+  } catch {
+    return null;
+  }
+}
+class I {
+  constructor(e) {
+    d(this, "eventStore");
+    d(this, "originalWebSocket");
+    d(this, "pendingQueries", /* @__PURE__ */ new Map());
+    d(this, "pendingMutations", /* @__PURE__ */ new Map());
+    d(this, "pendingActions", /* @__PURE__ */ new Map());
+    d(this, "pendingAuthTokenType", null);
+    /** Tracks the most recent mutation event ID for causality linking */
+    d(this, "lastMutationEventId", null);
+    d(this, "lastMutationTimestamp", 0);
+    this.eventStore = e, this.originalWebSocket = window.WebSocket;
+  }
+  /**
+   * Install the WebSocket interceptor
+   */
+  install() {
+    const e = this, t = this.originalWebSocket;
+    class n extends t {
+      constructor(o, i) {
+        super(o, i);
+        const a = this.addEventListener.bind(this);
+        this.addEventListener = (r, l, h) => {
+          r === "message" && typeof l == "function" ? a("message", (p) => {
+            try {
+              e.handleServerMessage(p.data);
+            } catch (f) {
+              console.warn("[DevTools] Error parsing server message:", f);
+            }
+            l(p);
+          }, h) : a(r, l, h);
+        };
+        let u = null;
+        Object.defineProperty(this, "onmessage", {
+          get: () => u,
+          set: (r) => {
+            u = r, r && a("message", (h) => {
+              try {
+                e.handleServerMessage(h.data);
+              } catch (g) {
+                console.warn("[DevTools] Error parsing server message:", g);
+              }
+              r.call(this, h);
+            });
+          },
+          configurable: !0,
+          enumerable: !0
+        });
+        const y = this.send.bind(this);
+        this.send = (r) => {
+          try {
+            typeof r == "string" && e.handleClientMessage(r);
+          } catch (l) {
+            console.warn("[DevTools] Error parsing client message:", l);
+          }
+          y(r);
+        };
+      }
+    }
+    window.WebSocket = n, console.log("[DevTools] WebSocket interceptor installed");
+  }
+  /**
+   * Uninstall the interceptor
+   */
+  uninstall() {
+    window.WebSocket = this.originalWebSocket;
+  }
+  /**
+   * Handle client → server messages
+   */
+  handleClientMessage(e) {
+    try {
+      const t = JSON.parse(e);
+      switch (console.log("[DevTools] Client message:", t.type, t), t.type) {
+        case "ModifyQuerySet":
+          this.handleModifyQuerySet(t.modifications);
+          break;
+        case "Mutation":
+          this.handleMutationRequest(t);
+          break;
+        case "Action":
+          this.handleActionRequest(t);
+          break;
+        case "Connect":
+          this.handleConnectMessage(t);
+          break;
+        case "Authenticate":
+          this.handleAuthenticateMessage(t);
+          break;
+      }
+    } catch (t) {
+      console.warn("[DevTools] Failed to parse client message:", t);
+    }
+  }
+  /**
+   * Handle server → client messages
+   */
+  handleServerMessage(e) {
+    try {
+      const t = JSON.parse(e);
+      switch (console.log("[DevTools] Server message:", t.type, t), t.type) {
+        case "Transition":
+          this.handleTransition(t);
+          break;
+        case "MutationResponse":
+          this.handleMutationResponse(t);
+          break;
+        case "ActionResponse":
+          this.handleActionResponse(t);
+          break;
+        case "AuthError":
+          this.handleAuthErrorResponse(t);
+          break;
+      }
+    } catch (t) {
+      console.warn("[DevTools] Failed to parse server message:", t);
+    }
+  }
+  /**
+   * Handle query set modifications (subscriptions)
+   */
+  handleModifyQuerySet(e) {
+    const t = Date.now();
+    for (const n of e)
+      if (n.type === "Add") {
+        this.pendingQueries.set(n.queryId, {
+          queryId: n.queryId,
+          udfPath: n.udfPath,
+          args: n.args,
+          componentPath: n.componentPath,
+          startTime: t
+        });
+        const s = {
+          id: `sub-${n.queryId}-${t}`,
+          timestamp: t,
+          type: "subscription",
+          queryId: n.queryId,
+          udfPath: n.udfPath,
+          args: n.args,
+          componentPath: n.componentPath,
+          status: "added"
+        };
+        this.eventStore.addEvent(s);
+      } else if (n.type === "Remove") {
+        const s = this.pendingQueries.get(n.queryId);
+        if (this.pendingQueries.delete(n.queryId), s) {
+          const o = {
+            id: `sub-${n.queryId}-${t}`,
+            timestamp: t,
+            type: "subscription",
+            queryId: n.queryId,
+            udfPath: s.udfPath,
+            args: s.args,
+            componentPath: s.componentPath,
+            status: "removed"
+          };
+          this.eventStore.addEvent(o);
+        }
+      }
+  }
+  /**
+   * Handle mutation requests
+   */
+  handleMutationRequest(e) {
+    const t = Date.now();
+    this.pendingMutations.set(e.requestId, {
+      requestId: e.requestId,
+      udfPath: e.udfPath,
+      args: e.args,
+      componentPath: e.componentPath,
+      startTime: t
+    });
+  }
+  /**
+   * Handle action requests
+   */
+  handleActionRequest(e) {
+    const t = Date.now();
+    this.pendingActions.set(e.requestId, {
+      requestId: e.requestId,
+      udfPath: e.udfPath,
+      args: e.args,
+      componentPath: e.componentPath,
+      startTime: t
+    });
+  }
+  handleConnectMessage(e) {
+    const t = {};
+    typeof e.connectionCount == "number" && (t.connectionCount = e.connectionCount), typeof e.lastCloseReason == "string" && (t.lastCloseReason = e.lastCloseReason), typeof e.clientTs == "number" && (t.clientTs = e.clientTs), typeof e.sessionId == "string" && (t.sessionId = e.sessionId), this.emitAuthEvent({
+      direction: "client",
+      messageType: "Connect",
+      status: "success",
+      details: t
+    });
+  }
+  handleAuthenticateMessage(e) {
+    const t = {};
+    if (typeof e.baseVersion == "number" && (t.baseVersion = e.baseVersion), typeof e.tokenType == "string" && (t.tokenType = e.tokenType), typeof e.value == "string" && e.value.length > 0) {
+      const n = e.value;
+      t.tokenLength = n.length, t.tokenPreview = n.length > 24 ? `${n.slice(0, 12)}…${n.slice(-10)}` : n;
+      const s = T(n);
+      s && (t.jwtClaims = s);
+    }
+    this.pendingAuthTokenType = e.tokenType ?? "Unknown", this.emitAuthEvent({
+      direction: "client",
+      messageType: "Authenticate",
+      status: "success",
+      tokenType: e.tokenType,
+      details: t
+    });
+  }
+  /**
+   * Handle state transitions (query updates)
+   */
+  handleTransition(e) {
+    const t = Date.now();
+    this.pendingAuthTokenType && (this.emitAuthEvent({
+      direction: "server",
+      messageType: "Authenticated",
+      status: "success",
+      tokenType: this.pendingAuthTokenType,
+      details: { modificationCount: e.modifications.length }
+    }), this.pendingAuthTokenType = null);
+    for (const n of e.modifications)
+      if (n.type === "QueryUpdated") {
+        const s = this.pendingQueries.get(n.queryId);
+        if (!s) continue;
+        const o = t - s.startTime, i = this.lastMutationEventId && t - this.lastMutationTimestamp < 2e3 ? this.lastMutationEventId : void 0, a = {
+          id: `query-${n.queryId}-${t}`,
+          timestamp: t,
+          type: "query",
+          queryId: n.queryId,
+          udfPath: s.udfPath,
+          args: s.args,
+          componentPath: s.componentPath,
+          status: "success",
+          result: n.value,
+          logLines: n.logLines,
+          duration: o,
+          triggeredBy: i
+        };
+        this.eventStore.addEvent(a), Array.isArray(n.logLines) && n.logLines.length > 0 && this.emitLogEvents(n.logLines, a.id);
+      } else if (n.type === "QueryFailed") {
+        const s = this.pendingQueries.get(n.queryId);
+        if (!s) continue;
+        const o = t - s.startTime, i = {
+          id: `query-${n.queryId}-${t}`,
+          timestamp: t,
+          type: "query",
+          queryId: n.queryId,
+          udfPath: s.udfPath,
+          args: s.args,
+          componentPath: s.componentPath,
+          status: "error",
+          error: n.errorMessage,
+          logLines: n.logLines,
+          duration: o
+        };
+        this.eventStore.addEvent(i), Array.isArray(n.logLines) && n.logLines.length > 0 && this.emitLogEvents(n.logLines, i.id);
+      }
+  }
+  /**
+   * Handle mutation responses
+   */
+  handleMutationResponse(e) {
+    const t = this.pendingMutations.get(e.requestId);
+    if (!t) return;
+    const n = Date.now(), s = n - t.startTime, o = {
+      id: `mutation-${e.requestId}-${n}`,
+      timestamp: n,
+      type: "mutation",
+      requestId: e.requestId,
+      udfPath: t.udfPath,
+      args: t.args,
+      componentPath: t.componentPath,
+      status: e.success ? "success" : "error",
+      result: e.success ? e.result : void 0,
+      error: e.success ? void 0 : e.result,
+      logLines: e.logLines,
+      duration: s
+    };
+    this.eventStore.addEvent(o), this.lastMutationEventId = o.id, this.lastMutationTimestamp = n, e.logLines && e.logLines.length > 0 && this.emitLogEvents(e.logLines, o.id), this.pendingMutations.delete(e.requestId);
+  }
+  /**
+   * Handle action responses
+   */
+  handleActionResponse(e) {
+    const t = this.pendingActions.get(e.requestId);
+    if (!t) return;
+    const n = Date.now(), s = n - t.startTime, o = {
+      id: `action-${e.requestId}-${n}`,
+      timestamp: n,
+      type: "action",
+      requestId: e.requestId,
+      udfPath: t.udfPath,
+      args: t.args,
+      componentPath: t.componentPath,
+      status: e.success ? "success" : "error",
+      result: e.success ? e.result : void 0,
+      error: e.success ? void 0 : e.result,
+      logLines: e.logLines,
+      duration: s
+    };
+    this.eventStore.addEvent(o), e.logLines && e.logLines.length > 0 && this.emitLogEvents(e.logLines, o.id), this.pendingActions.delete(e.requestId);
+  }
+  handleAuthErrorResponse(e) {
+    const t = {};
+    typeof e.baseVersion == "number" && (t.baseVersion = e.baseVersion), typeof e.authUpdateAttempted == "boolean" && (t.authUpdateAttempted = e.authUpdateAttempted), this.emitAuthEvent({
+      direction: "server",
+      messageType: "AuthError",
+      status: "error",
+      tokenType: this.pendingAuthTokenType ?? void 0,
+      error: e.error ?? "Authentication failed",
+      details: t
+    }), this.pendingAuthTokenType = null;
+  }
+  emitAuthEvent(e) {
+    const t = Date.now(), n = {
+      id: `auth-${e.direction}-${e.messageType}-${t}-${Math.random().toString(36).slice(2, 8)}`,
+      timestamp: t,
+      type: "auth",
+      direction: e.direction,
+      messageType: e.messageType,
+      status: e.status,
+      tokenType: e.tokenType,
+      error: e.error,
+      details: e.details
+    };
+    this.eventStore.addEvent(n);
+  }
+  /**
+   * Extract and emit log events from logLines
+   */
+  emitLogEvents(e, t) {
+    const n = Date.now();
+    for (const s of e) {
+      const o = s.match(/^\[(log|info|warn|error)\]\s+(.+)$/i), i = o ? o[1].toLowerCase() : "log", a = o ? o[2] : s, u = {
+        id: `log-${n}-${Math.random()}`,
+        timestamp: n,
+        type: "log",
+        level: i,
+        message: a,
+        relatedEventId: t
+      };
+      this.eventStore.addEvent(u);
+    }
+  }
+}
+export {
+  w as DataInspector,
+  P as DevToolbar,
+  E as EventStore,
+  S as LogsPanel,
+  A as PerformancePanel,
+  L as SettingsPanel,
+  M as SubscriptionsPanel,
+  I as WebSocketInterceptor,
+  R as concaveDevTools,
+  D as getGlobalEventStore,
+  $ as initDevTools
+};

package/dist/interceptor/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * WebSocket Interceptor exports
+ */
+export { WebSocketInterceptor } from "./websocket-interceptor";
+export { getGlobalEventStore } from "../store/event-store";

package/dist/interceptor/websocket-interceptor.d.ts

@@ -0,0 +1,67 @@
+/**
+ * WebSocket Interceptor for Convex Sync Protocol
+ *
+ * Intercepts WebSocket messages to capture queries, mutations, actions, subscriptions,
+ * and authentication protocol events.
+ */
+import type { EventStore } from "../store/event-store";
+export declare class WebSocketInterceptor {
+    private eventStore;
+    private originalWebSocket;
+    private pendingQueries;
+    private pendingMutations;
+    private pendingActions;
+    private pendingAuthTokenType;
+    /** Tracks the most recent mutation event ID for causality linking */
+    private lastMutationEventId;
+    private lastMutationTimestamp;
+    constructor(eventStore: EventStore);
+    /**
+     * Install the WebSocket interceptor
+     */
+    install(): void;
+    /**
+     * Uninstall the interceptor
+     */
+    uninstall(): void;
+    /**
+     * Handle client → server messages
+     */
+    private handleClientMessage;
+    /**
+     * Handle server → client messages
+     */
+    private handleServerMessage;
+    /**
+     * Handle query set modifications (subscriptions)
+     */
+    private handleModifyQuerySet;
+    /**
+     * Handle mutation requests
+     */
+    private handleMutationRequest;
+    /**
+     * Handle action requests
+     */
+    private handleActionRequest;
+    private handleConnectMessage;
+    private handleAuthenticateMessage;
+    /**
+     * Handle state transitions (query updates)
+     */
+    private handleTransition;
+    /**
+     * Handle mutation responses
+     */
+    private handleMutationResponse;
+    /**
+     * Handle action responses
+     */
+    private handleActionResponse;
+    private handleAuthErrorResponse;
+    private emitAuthEvent;
+    /**
+     * Extract and emit log events from logLines
+     */
+    private emitLogEvents;
+}

package/dist/overlay/ActivityPanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Activity Panel - Unified view of queries, mutations, and actions
+ * with focused list-first debugging UX
+ */
+import type { EventStore } from "../store/event-store";
+interface ActivityPanelProps {
+    eventStore: EventStore;
+}
+export declare function ActivityPanel({ eventStore }: ActivityPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/ContextMenu.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ContextMenu - Native-style right-click context menu for DevTools panels
+ */
+export interface MenuItem {
+    label: string;
+    action: () => void;
+    shortcut?: string;
+    disabled?: boolean;
+    separator?: boolean;
+}
+export interface ContextMenuProps {
+    x: number;
+    y: number;
+    items: MenuItem[];
+    onClose: () => void;
+}
+export declare function ContextMenu({ x, y, items, onClose }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+/** State type for panels using context menus */
+export interface ContextMenuState {
+    x: number;
+    y: number;
+    items: MenuItem[];
+}

package/dist/overlay/DataInspector.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Data Inspector - Advanced JSON viewer with syntax highlighting, search, and diff
+ */
+import type { JSONValue } from "../types";
+interface DataInspectorProps {
+    data: JSONValue;
+    label?: string;
+    onCopy?: () => void;
+    maxHeight?: number;
+}
+export declare function DataInspector({ data, label, onCopy, maxHeight, }: DataInspectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/DevToolbar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Main DevTools Overlay Component
+ */
+import type { EventStore } from "../store/event-store";
+interface DevToolbarProps {
+    eventStore: EventStore;
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    mode?: "overlay" | "panel";
+}
+export declare function DevToolbar({ eventStore, position, mode }: DevToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/LogsPanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Logs Panel - Shows console logs from function executions
+ */
+import type { EventStore } from "../store/event-store";
+interface LogsPanelProps {
+    eventStore: EventStore;
+    onNavigate?: (tab: "activity" | "subscriptions" | "performance" | "logs" | "settings") => void;
+}
+export declare function LogsPanel({ eventStore, onNavigate }: LogsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/NetworkPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Network Panel - Shows all client-server communication
+ */
+import type { EventStore } from "../store/event-store";
+interface NetworkPanelProps {
+    eventStore: EventStore;
+}
+export declare function NetworkPanel({ eventStore }: NetworkPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/PerformancePanel.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Performance Panel - Shows performance metrics with sparkline trends
+ */
+import type { EventStore } from "../store/event-store";
+interface PerformancePanelProps {
+    eventStore: EventStore;
+    onNavigate?: (tab: "activity" | "subscriptions" | "performance" | "logs" | "settings") => void;
+}
+export declare function PerformancePanel({ eventStore, onNavigate }: PerformancePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/SearchField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
+    value: string;
+    onValueChange: (value: string) => void;
+    onClear?: () => void;
+    className?: string;
+}
+export declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/overlay/SettingsPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Settings Panel - Configure devtools behavior
+ */
+import type { EventStore } from "../store/event-store";
+interface SettingsPanelProps {
+    eventStore: EventStore;
+}
+export declare function SettingsPanel({ eventStore }: SettingsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/SubscriptionsPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subscriptions Panel - Shows active query subscriptions
+ */
+import type { EventStore } from "../store/event-store";
+interface SubscriptionsPanelProps {
+    eventStore: EventStore;
+}
+export declare function SubscriptionsPanel({ eventStore }: SubscriptionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/TimelinePanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Timeline Panel - Visual timeline of all events
+ */
+import type { EventStore } from "../store/event-store";
+interface TimelinePanelProps {
+    eventStore: EventStore;
+}
+export declare function TimelinePanel({ eventStore }: TimelinePanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlay/utils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copy text to clipboard with fallback for restricted contexts (e.g. Chrome
+ * DevTools panels where the Clipboard API is blocked by permissions policy).
+ * Shows a brief "Copied!" toast on success.
+ */
+export declare function copyToClipboard(text: string): void;
+export declare function unwrapArgs<T>(args: T): T;
+export type InlinePreviewOptions = {
+    maxStringLength?: number;
+    stringTailLength?: number;
+    maxArrayItems?: number;
+    maxObjectEntries?: number;
+    maxDepth?: number;
+};
+export declare function formatInlinePreview(value: any, options?: InlinePreviewOptions, depth?: number): string;
+export declare function formatJsonSnippet(value: any, maxLength?: number): string;

package/dist/standalone.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Standalone DevTools Entry Point
+ *
+ * Self-contained bundle that can be loaded via <script> on any page.
+ * Renders inside a Shadow DOM for complete CSS/DOM isolation from the host page.
+ *
+ * When the Chrome extension's page-agent is already intercepting WebSockets,
+ * this skips installing its own interceptor and instead consumes events from
+ * page-agent via postMessage. This enables overlay + panel coexistence.
+ */
+export {};