@qontinui/ui-bridge 0.3.0 → 0.3.1

package/dist/debug/index.mjs

@@ -117,6 +117,241 @@ function createElementIdentifier(element) {
     selector: generateCSSSelector(element)
   };
 }
+
+// src/annotations/types.ts
+var ANNOTATION_CONFIG_VERSION = "1.0.0";
+
+// src/annotations/store.ts
+var AnnotationStore = class {
+  constructor() {
+    this.store = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Get an annotation by element ID.
+   */
+  get(elementId) {
+    return this.store.get(elementId);
+  }
+  /**
+   * Get all annotations as a record.
+   */
+  getAll() {
+    const result = {};
+    for (const [id, annotation] of this.store) {
+      result[id] = annotation;
+    }
+    return result;
+  }
+  /**
+   * Set an annotation for an element. Auto-sets `updatedAt`.
+   */
+  set(elementId, annotation) {
+    const updated = {
+      ...annotation,
+      updatedAt: Date.now()
+    };
+    this.store.set(elementId, updated);
+    this.emit({
+      type: "annotation:set",
+      elementId,
+      annotation: updated,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Delete an annotation by element ID.
+   *
+   * @returns true if the annotation existed and was deleted
+   */
+  delete(elementId) {
+    const existed = this.store.delete(elementId);
+    if (existed) {
+      this.emit({
+        type: "annotation:deleted",
+        elementId,
+        timestamp: Date.now()
+      });
+    }
+    return existed;
+  }
+  /**
+   * Check if an annotation exists for an element.
+   */
+  has(elementId) {
+    return this.store.has(elementId);
+  }
+  /**
+   * Get the number of stored annotations.
+   */
+  get count() {
+    return this.store.size;
+  }
+  /**
+   * Clear all annotations.
+   */
+  clear() {
+    this.store.clear();
+    this.emit({
+      type: "annotation:cleared",
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Import annotations from a config object.
+   *
+   * Merges with existing annotations (new values overwrite per element ID).
+   *
+   * @returns Number of annotations imported
+   *
+   * @example
+   * ```ts
+   * const config: AnnotationConfig = {
+   *   version: '1.0.0',
+   *   annotations: {
+   *     'btn-1': { description: 'Submit button', tags: ['form'] },
+   *     'input-1': { description: 'Name field' },
+   *   },
+   * };
+   * const count = store.importConfig(config); // 2
+   * ```
+   */
+  importConfig(config) {
+    let count = 0;
+    for (const [id, annotation] of Object.entries(config.annotations)) {
+      this.store.set(id, {
+        ...annotation,
+        updatedAt: annotation.updatedAt ?? Date.now()
+      });
+      count++;
+    }
+    this.emit({
+      type: "annotation:imported",
+      count,
+      timestamp: Date.now()
+    });
+    return count;
+  }
+  /**
+   * Export all annotations as a config object.
+   *
+   * The returned object can be serialized to JSON and saved to a file,
+   * then later re-imported with {@link importConfig}.
+   *
+   * @param metadata - Optional metadata to include (appName, description, etc.)
+   * @returns AnnotationConfig with all current annotations
+   *
+   * @example
+   * ```ts
+   * const config = store.exportConfig({ appName: 'MyApp' });
+   * // config.version === '1.0.0'
+   * // config.annotations === { 'btn-1': { ... }, 'input-1': { ... } }
+   * // config.metadata === { appName: 'MyApp', exportedAt: 1706900000000 }
+   *
+   * // Save to file
+   * fs.writeFileSync('annotations.json', JSON.stringify(config, null, 2));
+   * ```
+   */
+  exportConfig(metadata) {
+    return {
+      version: ANNOTATION_CONFIG_VERSION,
+      annotations: this.getAll(),
+      metadata: {
+        ...metadata,
+        exportedAt: Date.now()
+      }
+    };
+  }
+  /**
+   * Compute annotation coverage against a set of known element IDs.
+   *
+   * Compares the store's annotations against the provided list of element IDs
+   * to determine what percentage of elements have been annotated.
+   *
+   * @param allElementIds - Array of all known element IDs in the UI
+   * @returns Coverage statistics including percentages and lists of annotated/unannotated IDs
+   *
+   * @example
+   * ```ts
+   * store.set('btn-1', { description: 'Submit' });
+   * store.set('input-1', { description: 'Name' });
+   *
+   * const coverage = store.getCoverage(['btn-1', 'input-1', 'input-2', 'link-1']);
+   * // coverage.totalElements === 4
+   * // coverage.annotatedElements === 2
+   * // coverage.coveragePercent === 50
+   * // coverage.annotatedIds === ['btn-1', 'input-1']
+   * // coverage.unannotatedIds === ['input-2', 'link-1']
+   * ```
+   */
+  getCoverage(allElementIds) {
+    const annotatedIds = [];
+    const unannotatedIds = [];
+    for (const id of allElementIds) {
+      if (this.store.has(id)) {
+        annotatedIds.push(id);
+      } else {
+        unannotatedIds.push(id);
+      }
+    }
+    const total = allElementIds.length;
+    return {
+      totalElements: total,
+      annotatedElements: annotatedIds.length,
+      coveragePercent: total > 0 ? annotatedIds.length / total * 100 : 0,
+      annotatedIds,
+      unannotatedIds,
+      timestamp: Date.now()
+    };
+  }
+  /**
+   * Subscribe to annotation events.
+   *
+   * The listener is called whenever annotations are set, deleted, imported,
+   * or cleared. Returns an unsubscribe function to stop listening.
+   *
+   * @param listener - Callback function receiving {@link AnnotationEvent} objects
+   * @returns Unsubscribe function - call it to remove the listener
+   *
+   * @example
+   * ```ts
+   * const unsubscribe = store.on((event) => {
+   *   if (event.type === 'annotation:set') {
+   *     console.log(`Element ${event.elementId} annotated:`, event.annotation);
+   *   }
+   * });
+   *
+   * store.set('btn-1', { description: 'Submit' });
+   * // Logs: "Element btn-1 annotated: { description: 'Submit', updatedAt: ... }"
+   *
+   * unsubscribe(); // Stop listening
+   * ```
+   */
+  on(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  /**
+   * Emit an event to all listeners.
+   */
+  emit(event) {
+    for (const listener of this.listeners) {
+      try {
+        listener(event);
+      } catch {
+      }
+    }
+  }
+};
+var globalStore = null;
+function getGlobalAnnotationStore() {
+  if (!globalStore) {
+    globalStore = new AnnotationStore();
+  }
+  return globalStore;
+}
 var overlayStyles = {
   position: "fixed",
   pointerEvents: "none",
@@ -332,7 +567,7 @@ function InfoPanel({ element, onClose, registeredElement }) {
         /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.xpath })
       ] })
     ] }),
-    registeredElement && registeredElement.actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { ...sectionStyles, borderBottom: "none" }, children: [
+    registeredElement && registeredElement.actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: sectionStyles, children: [
       /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Actions" }),
       /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: registeredElement.actions.map((action) => /* @__PURE__ */ jsx(
         "span",
@@ -347,6 +582,43 @@ function InfoPanel({ element, onClose, registeredElement }) {
         },
         action
       )) })
+    ] }),
+    /* @__PURE__ */ jsx(AnnotationSection, { elementId: bestId })
+  ] });
+}
+function AnnotationSection({ elementId }) {
+  const annotation = getGlobalAnnotationStore().get(elementId);
+  if (!annotation) return null;
+  return /* @__PURE__ */ jsxs("div", { style: { ...sectionStyles, borderBottom: "none" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Annotation" }),
+    annotation.description && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Description:" }),
+      /* @__PURE__ */ jsx("span", { style: valueStyles, children: annotation.description })
+    ] }),
+    annotation.purpose && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Purpose:" }),
+      /* @__PURE__ */ jsx("span", { style: valueStyles, children: annotation.purpose })
+    ] }),
+    annotation.notes && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Notes:" }),
+      /* @__PURE__ */ jsx("span", { style: { color: "#fbbf24" }, children: annotation.notes })
+    ] }),
+    annotation.tags && annotation.tags.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Tags:" }),
+      /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", flexWrap: "wrap", gap: "4px" }, children: annotation.tags.map((tag) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            padding: "1px 6px",
+            backgroundColor: "#1e3a5f",
+            borderRadius: "4px",
+            color: "#93c5fd",
+            fontSize: "11px"
+          },
+          children: tag
+        },
+        tag
+      )) })
     ] })
   ] });
 }
@@ -443,6 +715,656 @@ function Inspector({ getRegisteredElement, initialActive }) {
   ] });
 }
 
+// src/debug/browser-capture-types.ts
+var DEFAULT_CAPTURE_CONFIG = {
+  console: true,
+  network: true,
+  navigation: true,
+  longTasks: true,
+  longAnimationFrames: true,
+  resourceErrors: true,
+  wsDisconnections: true,
+  hmr: true,
+  webVitals: false,
+  memory: false,
+  memoryIntervalMs: 3e4,
+  maxEntries: 200
+};
+
+// src/debug/captures/console.ts
+function argsToMessage(args) {
+  return args.map((a) => {
+    if (a instanceof Error) return a.message;
+    if (typeof a === "string") return a;
+    try {
+      return JSON.stringify(a);
+    } catch {
+      return String(a);
+    }
+  }).join(" ");
+}
+function extractStack(args) {
+  const err = args.find((a) => a instanceof Error);
+  return err?.stack;
+}
+function makeEvent(level, message, stack) {
+  return {
+    type: "console",
+    timestamp: Date.now(),
+    url: typeof window !== "undefined" ? window.location.href : "",
+    level,
+    message,
+    stack
+  };
+}
+function installConsoleCapture(emit) {
+  const originalError = console.error;
+  const originalWarn = console.warn;
+  console.error = (...args) => {
+    emit(makeEvent("error", argsToMessage(args), extractStack(args)));
+    originalError.apply(console, args);
+  };
+  console.warn = (...args) => {
+    emit(makeEvent("warn", argsToMessage(args), extractStack(args)));
+    originalWarn.apply(console, args);
+  };
+  const rejectionHandler = (event) => {
+    const reason = event.reason;
+    const message = reason instanceof Error ? reason.message : String(reason ?? "Unhandled rejection");
+    const stack = reason instanceof Error ? reason.stack : void 0;
+    emit(makeEvent("unhandledrejection", message, stack));
+  };
+  if (typeof window !== "undefined") {
+    window.addEventListener("unhandledrejection", rejectionHandler);
+  }
+  return () => {
+    console.error = originalError;
+    console.warn = originalWarn;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("unhandledrejection", rejectionHandler);
+    }
+  };
+}
+
+// src/debug/captures/network.ts
+var DEFAULT_IGNORE = ["/api/dev-debug/", "/api/ui-bridge/", "localhost:9876"];
+function installNetworkCapture(emit, options) {
+  if (typeof window === "undefined" || typeof window.fetch !== "function") {
+    return () => {
+    };
+  }
+  const originalFetch = window.fetch;
+  const ignorePatterns = options?.ignorePatterns ?? DEFAULT_IGNORE;
+  function shouldIgnore(url) {
+    return ignorePatterns.some((p) => url.includes(p));
+  }
+  function getMethod(input, init) {
+    if (init?.method) return init.method.toUpperCase();
+    if (input instanceof Request) return input.method.toUpperCase();
+    return "GET";
+  }
+  function getUrl(input) {
+    if (typeof input === "string") return input;
+    if (input instanceof URL) return input.href;
+    if (input instanceof Request) return input.url;
+    return String(input);
+  }
+  window.fetch = async function patchedFetch(input, init) {
+    const requestUrl = getUrl(input);
+    if (shouldIgnore(requestUrl)) {
+      return originalFetch.call(window, input, init);
+    }
+    const method = getMethod(input, init);
+    const start = performance.now();
+    try {
+      const response = await originalFetch.call(window, input, init);
+      const durationMs = Math.round(performance.now() - start);
+      if (response.status >= 400) {
+        const event = {
+          type: "network",
+          timestamp: Date.now(),
+          url: typeof window !== "undefined" ? window.location.href : "",
+          method,
+          requestUrl,
+          status: response.status,
+          statusText: response.statusText,
+          durationMs,
+          kind: "http-error"
+        };
+        emit(event);
+      }
+      return response;
+    } catch (err) {
+      const durationMs = Math.round(performance.now() - start);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      let kind = "network-error";
+      if (err instanceof DOMException && err.name === "AbortError") {
+        kind = "abort";
+      } else if (errorMessage.includes("CORS") || errorMessage.includes("cross-origin")) {
+        kind = "cors";
+      } else if (errorMessage.includes("timeout") || errorMessage.includes("timed out")) {
+        kind = "timeout";
+      }
+      const event = {
+        type: "network",
+        timestamp: Date.now(),
+        url: typeof window !== "undefined" ? window.location.href : "",
+        method,
+        requestUrl,
+        durationMs,
+        kind,
+        errorMessage
+      };
+      emit(event);
+      throw err;
+    }
+  };
+  return () => {
+    window.fetch = originalFetch;
+  };
+}
+
+// src/debug/captures/navigation.ts
+function installNavigationCapture(emit) {
+  if (typeof window === "undefined" || typeof history === "undefined") {
+    return () => {
+    };
+  }
+  let lastUrl = window.location.href;
+  function emitNav(to, trigger) {
+    const from = lastUrl;
+    lastUrl = to;
+    if (from === to) return;
+    emit({
+      type: "navigation",
+      timestamp: Date.now(),
+      url: to,
+      from,
+      to,
+      trigger
+    });
+  }
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  history.pushState = function(...args) {
+    originalPushState.apply(this, args);
+    emitNav(window.location.href, "pushState");
+  };
+  history.replaceState = function(...args) {
+    originalReplaceState.apply(this, args);
+    emitNav(window.location.href, "replaceState");
+  };
+  const popstateHandler = () => {
+    emitNav(window.location.href, "popstate");
+  };
+  window.addEventListener("popstate", popstateHandler);
+  return () => {
+    history.pushState = originalPushState;
+    history.replaceState = originalReplaceState;
+    window.removeEventListener("popstate", popstateHandler);
+  };
+}
+
+// src/debug/captures/long-tasks.ts
+function installLongTaskCapture(emit) {
+  if (typeof window === "undefined" || typeof PerformanceObserver === "undefined") {
+    return () => {
+    };
+  }
+  try {
+    const observer = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        emit({
+          type: "long-task",
+          timestamp: Date.now(),
+          url: window.location.href,
+          durationMs: Math.round(entry.duration)
+        });
+      }
+    });
+    observer.observe({ type: "longtask", buffered: true });
+    return () => {
+      observer.disconnect();
+    };
+  } catch {
+    return () => {
+    };
+  }
+}
+
+// src/debug/captures/resource-errors.ts
+var TRACKED_TAGS = /* @__PURE__ */ new Set(["IMG", "SCRIPT", "LINK"]);
+function installResourceErrorCapture(emit) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const handler = (event) => {
+    const target = event.target;
+    if (!target || !target.tagName) return;
+    if (!TRACKED_TAGS.has(target.tagName)) return;
+    const resourceUrl = target.src || target.src || target.href || "";
+    if (!resourceUrl) return;
+    emit({
+      type: "resource-error",
+      timestamp: Date.now(),
+      url: window.location.href,
+      resourceUrl,
+      tagName: target.tagName
+    });
+  };
+  window.addEventListener("error", handler, true);
+  return () => {
+    window.removeEventListener("error", handler, true);
+  };
+}
+
+// src/debug/captures/web-vitals.ts
+function installWebVitalsCapture(emit) {
+  if (typeof window === "undefined" || typeof PerformanceObserver === "undefined") {
+    return () => {
+    };
+  }
+  const observers = [];
+  try {
+    const lcpObserver = new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const last = entries[entries.length - 1];
+      if (last) {
+        emit({
+          type: "web-vital",
+          timestamp: Date.now(),
+          url: window.location.href,
+          metric: "LCP",
+          value: Math.round(last.startTime)
+        });
+      }
+    });
+    lcpObserver.observe({ type: "largest-contentful-paint", buffered: true });
+    observers.push(lcpObserver);
+  } catch {
+  }
+  try {
+    let clsValue = 0;
+    const clsObserver = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (!entry.hadRecentInput) {
+          clsValue += entry.value ?? 0;
+        }
+      }
+      emit({
+        type: "web-vital",
+        timestamp: Date.now(),
+        url: window.location.href,
+        metric: "CLS",
+        value: Math.round(clsValue * 1e3) / 1e3
+      });
+    });
+    clsObserver.observe({ type: "layout-shift", buffered: true });
+    observers.push(clsObserver);
+  } catch {
+  }
+  return () => {
+    for (const obs of observers) {
+      obs.disconnect();
+    }
+  };
+}
+
+// src/debug/captures/memory.ts
+function installMemoryCapture(emit, intervalMs = 3e4) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const perf = performance;
+  if (!perf.memory) {
+    return () => {
+    };
+  }
+  const tick = () => {
+    const mem = perf.memory;
+    if (!mem) return;
+    emit({
+      type: "memory",
+      timestamp: Date.now(),
+      url: window.location.href,
+      usedJSHeapSize: mem.usedJSHeapSize,
+      totalJSHeapSize: mem.totalJSHeapSize,
+      jsHeapSizeLimit: mem.jsHeapSizeLimit
+    });
+  };
+  tick();
+  const id = setInterval(tick, intervalMs);
+  return () => {
+    clearInterval(id);
+  };
+}
+
+// src/debug/captures/hmr.ts
+var HMR_PATH_PATTERNS = ["/_next/webpack-hmr", "/__turbopack_hmr", "/_next/turbopack-hmr"];
+function isHmrUrl(url) {
+  return HMR_PATH_PATTERNS.some((p) => url.includes(p));
+}
+function makeEvent2(level, message, moduleName, loc) {
+  return {
+    type: "hmr",
+    level,
+    message,
+    moduleName,
+    loc,
+    timestamp: Date.now(),
+    url: typeof window !== "undefined" ? window.location.href : ""
+  };
+}
+function processHmrMessage(data, emit) {
+  try {
+    const msg = JSON.parse(data);
+    if (Array.isArray(msg.errors)) {
+      for (const err of msg.errors) {
+        emit(
+          makeEvent2(
+            "error",
+            typeof err === "string" ? err : err.message ?? String(err),
+            err.moduleName ?? err.moduleIdentifier,
+            err.loc ? String(err.loc) : void 0
+          )
+        );
+      }
+    }
+    if (Array.isArray(msg.warnings)) {
+      for (const warn of msg.warnings) {
+        emit(
+          makeEvent2(
+            "warning",
+            typeof warn === "string" ? warn : warn.message ?? String(warn),
+            warn.moduleName ?? warn.moduleIdentifier,
+            warn.loc ? String(warn.loc) : void 0
+          )
+        );
+      }
+    }
+    if (msg.action === "serverError" && msg.errorJSON) {
+      try {
+        const err = JSON.parse(msg.errorJSON);
+        emit(makeEvent2("error", err.message ?? String(err)));
+      } catch {
+        emit(makeEvent2("error", msg.errorJSON));
+      }
+    }
+    if ((msg.action === "turbopack-message" || msg.type === "turbopack-message") && msg.data?.diagnostics) {
+      for (const diag of msg.data.diagnostics) {
+        emit(
+          makeEvent2(
+            diag.category === "warning" ? "warning" : "error",
+            diag.message ?? String(diag),
+            diag.filePath,
+            diag.line != null ? `${diag.line}:${diag.column ?? 0}` : void 0
+          )
+        );
+      }
+    }
+  } catch {
+  }
+}
+function installWebSocketCapture(emit, cleanups) {
+  if (!window.WebSocket) return;
+  const OriginalWebSocket = window.WebSocket;
+  const trackedSockets = [];
+  const PatchedWebSocket = function(url, protocols) {
+    const ws = new OriginalWebSocket(url, protocols);
+    const urlStr = typeof url === "string" ? url : url.toString();
+    if (isHmrUrl(urlStr)) {
+      ws.addEventListener("message", (event) => {
+        if (typeof event.data === "string") {
+          processHmrMessage(event.data, emit);
+        }
+      });
+      trackedSockets.push(ws);
+    }
+    return ws;
+  };
+  PatchedWebSocket.prototype = OriginalWebSocket.prototype;
+  Object.defineProperty(PatchedWebSocket, "CONNECTING", { value: OriginalWebSocket.CONNECTING });
+  Object.defineProperty(PatchedWebSocket, "OPEN", { value: OriginalWebSocket.OPEN });
+  Object.defineProperty(PatchedWebSocket, "CLOSING", { value: OriginalWebSocket.CLOSING });
+  Object.defineProperty(PatchedWebSocket, "CLOSED", { value: OriginalWebSocket.CLOSED });
+  window.WebSocket = PatchedWebSocket;
+  cleanups.push(() => {
+    window.WebSocket = OriginalWebSocket;
+    for (const ws of trackedSockets) {
+      ws.close();
+    }
+    trackedSockets.length = 0;
+  });
+}
+function installEventSourceCapture(emit, cleanups) {
+  if (!window.EventSource) return;
+  const OriginalEventSource = window.EventSource;
+  const trackedSources = [];
+  const messageHandler = (event) => {
+    if (typeof event.data === "string") {
+      processHmrMessage(event.data, emit);
+    }
+  };
+  const PatchedEventSource = function(url, init) {
+    const es = new OriginalEventSource(url, init);
+    const urlStr = typeof url === "string" ? url : url.toString();
+    if (isHmrUrl(urlStr)) {
+      es.addEventListener("message", messageHandler);
+      trackedSources.push(es);
+    }
+    return es;
+  };
+  PatchedEventSource.prototype = OriginalEventSource.prototype;
+  Object.defineProperty(PatchedEventSource, "CONNECTING", {
+    value: OriginalEventSource.CONNECTING
+  });
+  Object.defineProperty(PatchedEventSource, "OPEN", { value: OriginalEventSource.OPEN });
+  Object.defineProperty(PatchedEventSource, "CLOSED", { value: OriginalEventSource.CLOSED });
+  window.EventSource = PatchedEventSource;
+  cleanups.push(() => {
+    window.EventSource = OriginalEventSource;
+    for (const es of trackedSources) {
+      es.close();
+    }
+    trackedSources.length = 0;
+  });
+}
+function installHmrCapture(emit) {
+  if (typeof window === "undefined") return () => {
+  };
+  const cleanups = [];
+  installWebSocketCapture(emit, cleanups);
+  installEventSourceCapture(emit, cleanups);
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+
+// src/debug/captures/long-animation-frames.ts
+function installLoafCapture(emit) {
+  if (typeof window === "undefined" || typeof PerformanceObserver === "undefined") {
+    return () => {
+    };
+  }
+  try {
+    const observer = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        const scripts = (entry.scripts ?? []).map((s) => {
+          const script = s;
+          return {
+            invoker: script.invoker ?? "",
+            sourceURL: script.sourceURL ?? "",
+            sourceFunctionName: script.sourceFunctionName ?? "",
+            sourceCharPosition: script.sourceCharPosition ?? 0,
+            duration: Math.round(script.duration ?? 0)
+          };
+        });
+        emit({
+          type: "long-animation-frame",
+          timestamp: Date.now(),
+          url: window.location.href,
+          durationMs: Math.round(entry.duration),
+          blockingDurationMs: Math.round(
+            entry.blockingDuration ?? 0
+          ),
+          scripts
+        });
+      }
+    });
+    observer.observe({ type: "long-animation-frame", buffered: true });
+    return () => {
+      observer.disconnect();
+    };
+  } catch {
+    return () => {
+    };
+  }
+}
+
+// src/debug/browser-capture.ts
+var BrowserEventCapture = class {
+  constructor(config) {
+    this.buffer = [];
+    this.installed = false;
+    this.cleanups = [];
+    this.onEvent = null;
+    this.config = config ?? {};
+    this.maxEntries = config?.maxEntries ?? DEFAULT_CAPTURE_CONFIG.maxEntries;
+  }
+  setOnEvent(cb) {
+    this.onEvent = cb;
+  }
+  /**
+   * Install all enabled capture sub-modules.
+   * Safe to call multiple times (no-ops if already installed).
+   */
+  install() {
+    if (this.installed) return;
+    const cfg = { ...DEFAULT_CAPTURE_CONFIG, ...this.config };
+    const emit = (event) => {
+      this.buffer.push(event);
+      this.trim();
+      this.onEvent?.(event);
+    };
+    if (cfg.console) {
+      this.cleanups.push(installConsoleCapture(emit));
+    }
+    if (cfg.network) {
+      this.cleanups.push(installNetworkCapture(emit, cfg.networkOptions));
+    }
+    if (cfg.navigation) {
+      this.cleanups.push(installNavigationCapture(emit));
+    }
+    if (cfg.longTasks) {
+      this.cleanups.push(installLongTaskCapture(emit));
+    }
+    if (cfg.longAnimationFrames) {
+      this.cleanups.push(installLoafCapture(emit));
+    }
+    if (cfg.resourceErrors) {
+      this.cleanups.push(installResourceErrorCapture(emit));
+    }
+    if (cfg.webVitals) {
+      this.cleanups.push(installWebVitalsCapture(emit));
+    }
+    if (cfg.memory) {
+      this.cleanups.push(installMemoryCapture(emit, cfg.memoryIntervalMs));
+    }
+    if (cfg.hmr) {
+      this.cleanups.push(installHmrCapture(emit));
+    }
+    this.installed = true;
+  }
+  /**
+   * Uninstall all capture sub-modules.
+   */
+  uninstall() {
+    if (!this.installed) return;
+    for (const cleanup of this.cleanups) {
+      cleanup();
+    }
+    this.cleanups = [];
+    this.installed = false;
+  }
+  // -------------------------------------------------------------------------
+  // Manual event reporting (for events that can't be auto-captured)
+  // -------------------------------------------------------------------------
+  reportReactError(error, errorInfo) {
+    const event = {
+      type: "react-error",
+      timestamp: Date.now(),
+      url: typeof window !== "undefined" ? window.location.href : "",
+      message: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack
+    };
+    this.buffer.push(event);
+    this.trim();
+    this.onEvent?.(event);
+  }
+  reportWsStateChange(prev, next, reconnectAttempt) {
+    if (next === "disconnected" || next === "error") {
+      const event = {
+        type: "ws-disconnection",
+        timestamp: Date.now(),
+        url: typeof window !== "undefined" ? window.location.href : "",
+        previousState: prev,
+        newState: next,
+        reconnectAttempt
+      };
+      this.buffer.push(event);
+      this.trim();
+      this.onEvent?.(event);
+    }
+  }
+  // -------------------------------------------------------------------------
+  // Query methods
+  // -------------------------------------------------------------------------
+  getSince(ts) {
+    return this.buffer.filter((e) => e.timestamp >= ts);
+  }
+  getRecent(n = 50) {
+    return this.buffer.slice(-n);
+  }
+  getByType(type) {
+    return this.buffer.filter((e) => e.type === type);
+  }
+  /**
+   * Get console errors since a timestamp (backward-compat for ActionExecutor).
+   */
+  getConsoleSince(ts) {
+    return this.buffer.filter((e) => (e.type === "console" || e.type === "hmr") && e.timestamp >= ts).map((e) => ({
+      timestamp: e.timestamp,
+      level: e.type === "hmr" ? e.level === "warning" ? "warn" : e.level : e.level,
+      message: e.message,
+      stack: e.stack
+    }));
+  }
+  /**
+   * Get recent console errors (backward-compat for ActionExecutor).
+   */
+  getConsoleRecent(n = 50) {
+    return this.buffer.filter((e) => e.type === "console" || e.type === "hmr").slice(-n).map((e) => ({
+      timestamp: e.timestamp,
+      level: e.type === "hmr" ? e.level === "warning" ? "warn" : e.level : e.level,
+      message: e.message,
+      stack: e.stack
+    }));
+  }
+  clear() {
+    this.buffer = [];
+  }
+  trim() {
+    if (this.buffer.length > this.maxEntries) {
+      this.buffer = this.buffer.slice(-this.maxEntries);
+    }
+  }
+};
+
 // src/debug/metrics.ts
 function generateId() {
   return `${Date.now()}-${Math.random().toString(36).substr(2, 8)}`;
@@ -659,6 +1581,6 @@ function formatPercentage(value) {
   return `${(value * 100).toFixed(1)}%`;
 }
 
-export { InfoPanel, Inspector, InspectorOverlay, MetricsCollector, createMetricsCollector, formatDuration, formatPercentage, useInspector };
+export { BrowserEventCapture, DEFAULT_CAPTURE_CONFIG, InfoPanel, Inspector, InspectorOverlay, MetricsCollector, createMetricsCollector, formatDuration, formatPercentage, useInspector };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map