@concavejs/devtools 0.0.1-alpha.10

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

package/dist/overlay/ActivityPanel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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;
+    panelConnectionState?: {
+        waitingForConnection: boolean;
+        needsReload: boolean;
+        onReload: () => void;
+        agentAttached?: boolean;
+        socketSeen?: boolean;
+        captureLive?: boolean;
+    };
+}
+export declare function ActivityPanel({ eventStore, panelConnectionState }: 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,19 @@
+/**
+ * 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";
+    panelConnectionState?: {
+        waitingForConnection: boolean;
+        needsReload: boolean;
+        onReload: () => void;
+        agentAttached?: boolean;
+        socketSeen?: boolean;
+        captureLive?: boolean;
+    };
+}
+export declare function DevToolbar({ eventStore, position, mode, panelConnectionState, }: DevToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};