@tooluminati/react-troubleshooting 0.1.0

package/dist/index.cjs

@@ -0,0 +1,833 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  WebMcpErrorBoundary: () => WebMcpErrorBoundary,
+  WebMcpForm: () => WebMcpForm,
+  WebMcpInput: () => WebMcpInput,
+  WebMcpSelect: () => WebMcpSelect,
+  WebMcpTextarea: () => WebMcpTextarea,
+  WebMcpTroubleshootingContext: () => WebMcpTroubleshootingContext,
+  WebMcpTroubleshootingPanel: () => WebMcpTroubleshootingPanel,
+  WebMcpTroubleshootingProvider: () => WebMcpTroubleshootingProvider,
+  createFormSubmitBlockersProvider: () => createFormSubmitBlockersProvider,
+  getPanelVisibilityController: () => getPanelVisibilityController,
+  hideWebMcpTroubleshootingPanel: () => hideWebMcpTroubleshootingPanel,
+  resetPanelVisibilityController: () => resetPanelVisibilityController,
+  showWebMcpTroubleshootingPanel: () => showWebMcpTroubleshootingPanel,
+  toggleWebMcpTroubleshootingPanel: () => toggleWebMcpTroubleshootingPanel,
+  useAgentInvokedSubmit: () => useAgentInvokedSubmit,
+  useDeclarativeFormToolEvents: () => useDeclarativeFormToolEvents,
+  useFormSubmitBlockers: () => useFormSubmitBlockers,
+  useTanStackQueryWebMcpTools: () => useTanStackQueryWebMcpTools,
+  useTroubleshootingPanel: () => useTroubleshootingPanel,
+  useTroubleshootingPanelVisibility: () => useTroubleshootingPanelVisibility,
+  useWebMcpTroubleshootingContext: () => useWebMcpTroubleshootingContext,
+  wirePanelVisibilityController: () => wirePanelVisibilityController
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/webmcp-declarative-attributes.ts
+var import_react = require("react");
+
+// src/WebMcpTroubleshootingProvider.tsx
+var import_react4 = require("react");
+var import_diagnostics3 = require("@tooluminati/diagnostics");
+var import_react5 = require("@tooluminati/react");
+
+// src/WebMcpTroubleshootingContext.tsx
+var import_react2 = require("react");
+var WebMcpTroubleshootingContext = (0, import_react2.createContext)(null);
+function useWebMcpTroubleshootingContext() {
+  const value = (0, import_react2.useContext)(WebMcpTroubleshootingContext);
+  if (!value) {
+    throw new Error(
+      "useWebMcpTroubleshootingContext requires WebMcpTroubleshootingProvider."
+    );
+  }
+  return value;
+}
+
+// src/WebMcpTroubleshootingPanel.tsx
+var import_react3 = require("react");
+var import_diagnostics = require("@tooluminati/diagnostics");
+var import_jsx_runtime = require("react/jsx-runtime");
+var PALETTE = {
+  surface: "#0a0e1a",
+  navy: "#17316A",
+  amber: "#FECD10",
+  cyan: "#0AADF2",
+  red: "#FF5C6C"
+};
+var positionStyle = {
+  br: { right: "26px", bottom: "26px" },
+  bl: { left: "26px", bottom: "26px" },
+  tr: { right: "26px", top: "26px" },
+  tl: { left: "26px", top: "26px" }
+};
+function WebMcpTroubleshootingPanel({
+  position = "br",
+  startCollapsed,
+  onCopyDiagnostics
+}) {
+  const { viewModel, visibility, isPanelEnabled } = useWebMcpTroubleshootingContext();
+  const [snapshot, setSnapshot] = (0, import_react3.useState)(
+    () => viewModel.refresh()
+  );
+  const [filter, setFilter] = (0, import_react3.useState)("all");
+  const [openChecks, setOpenChecks] = (0, import_react3.useState)({});
+  const [openEvents, setOpenEvents] = (0, import_react3.useState)({});
+  const [openErrors, setOpenErrors] = (0, import_react3.useState)({});
+  const [copied, setCopied] = (0, import_react3.useState)(false);
+  const [spinning, setSpinning] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    if (startCollapsed) {
+      visibility.setCollapsed(true);
+    }
+  }, [startCollapsed, visibility]);
+  (0, import_react3.useEffect)(() => {
+    const refresh2 = () => setSnapshot(viewModel.refresh());
+    refresh2();
+    const unsubVm = viewModel.subscribe(refresh2);
+    const unsubVis = visibility.subscribe(refresh2);
+    return () => {
+      unsubVm();
+      unsubVis();
+    };
+  }, [viewModel, visibility]);
+  const filteredEvents = (0, import_react3.useMemo)(
+    () => (0, import_diagnostics.filterPanelEvents)(snapshot.events, filter),
+    [snapshot.events, filter]
+  );
+  if (!isPanelEnabled || !visibility.visible) {
+    return null;
+  }
+  const pos = positionStyle[position];
+  const supportColor = snapshot.supported ? PALETTE.cyan : PALETTE.red;
+  const collapsed = visibility.collapsed;
+  const refresh = () => {
+    setSpinning(true);
+    setSnapshot(viewModel.refresh());
+    window.setTimeout(() => setSpinning(false), 650);
+  };
+  const copyDiagnostics = async () => {
+    const json = (0, import_diagnostics.serializeTroubleshootingDiagnostics)(snapshot);
+    if (onCopyDiagnostics) {
+      onCopyDiagnostics(json);
+    } else if (navigator.clipboard) {
+      await navigator.clipboard.writeText(json);
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+  if (collapsed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Expand WebMCP troubleshooting panel",
+        "data-testid": "webmcp-troubleshooting-badge",
+        onClick: () => visibility.setCollapsed(false),
+        style: {
+          position: "fixed",
+          ...pos,
+          zIndex: 99990,
+          display: "flex",
+          alignItems: "center",
+          gap: 11,
+          padding: "11px 15px 11px 13px",
+          background: "#0d1322",
+          border: "1px solid #1f2940",
+          borderRadius: 13,
+          cursor: "pointer",
+          boxShadow: "0 14px 40px rgba(0,0,0,.5)",
+          fontFamily: "'IBM Plex Sans', system-ui, sans-serif"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrandMark, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { display: "flex", flexDirection: "column", lineHeight: 1.15 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 600, color: "#e7ecf6" }, children: "WebMCP" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                style: {
+                  fontFamily: "'IBM Plex Mono', monospace",
+                  fontSize: 10,
+                  color: supportColor
+                },
+                children: snapshot.supported ? "supported" : "unsupported"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                paddingLeft: 11,
+                marginLeft: 3,
+                borderLeft: "1px solid #20293f"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      fontSize: 12,
+                      color: "#aeb7cb"
+                    },
+                    children: snapshot.toolCount
+                  }
+                ),
+                snapshot.issueCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: snapshot.errors.length > 0 ? PALETTE.red : PALETTE.amber
+                    }
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "aria-label": "WebMCP troubleshooting panel",
+      "data-testid": "webmcp-troubleshooting-panel",
+      style: {
+        position: "fixed",
+        ...pos,
+        zIndex: 99990,
+        width: 412,
+        maxHeight: "calc(100vh - 52px)",
+        display: "flex",
+        flexDirection: "column",
+        background: PALETTE.surface,
+        border: "1px solid #1c2438",
+        borderRadius: 15,
+        boxShadow: "0 26px 70px rgba(0,0,0,.62)",
+        overflow: "hidden",
+        fontFamily: "'IBM Plex Sans', system-ui, sans-serif",
+        color: "#eef2fa"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "header",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 11,
+              padding: "13px 14px",
+              borderBottom: "1px solid #161d2e"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrandMark, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginRight: "auto", lineHeight: 1.2 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13.5, fontWeight: 600 }, children: "WebMCP Troubleshooting" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      fontSize: 9.5,
+                      letterSpacing: 1.6,
+                      color: "#5f6a82",
+                      textTransform: "uppercase"
+                    },
+                    children: "Tooluminati \xB7 dev panel"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanelButton, { title: "Re-run checks", onClick: refresh, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "inline-block", animation: spinning ? "tlmSpin .65s linear" : "none" }, children: "\u27F3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanelButton, { onClick: () => void copyDiagnostics(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: copied ? PALETTE.cyan : "#9aa5bd" }, children: copied ? "Copied \u2713" : "Copy JSON" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanelButton, { title: "Minimize", onClick: () => visibility.setCollapsed(true), children: "\u2013" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr 1fr",
+              gap: 1,
+              background: "#161d2e"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatTile, { label: "WebMCP", value: snapshot.supported ? "Supported" : "Unsupported", color: supportColor }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatTile, { label: "Tools", value: String(snapshot.toolCount), color: snapshot.toolCount > 0 ? "#eef2fa" : PALETTE.amber }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatTile, { label: "Issues", value: String(snapshot.issueCount), color: snapshot.errors.length ? PALETTE.red : snapshot.issueCount ? PALETTE.amber : PALETTE.cyan })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { overflow: "auto", flex: 1, minHeight: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: "Environment", children: snapshot.checks.map((check) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Row,
+            {
+              open: openChecks[check.id] ?? false,
+              onToggle: () => setOpenChecks((s) => ({ ...s, [check.id]: !s[check.id] })),
+              hint: check.guidance,
+              label: check.label,
+              value: check.value,
+              status: check.status
+            },
+            check.id
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Section, { title: "Timeline", meta: `${snapshot.events.length} captured`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, padding: "0 12px 8px" }, children: ["all", "failures", "blocked", "tools", "nav"].map((chip) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setFilter(chip),
+                style: {
+                  fontFamily: "'IBM Plex Mono', monospace",
+                  fontSize: 10.5,
+                  padding: "4px 9px",
+                  borderRadius: 20,
+                  cursor: "pointer",
+                  border: `1px solid ${filter === chip ? PALETTE.cyan : "#1f2840"}`,
+                  background: filter === chip ? "rgba(10,173,242,.13)" : "#0d1322",
+                  color: filter === chip ? "#5EC8F7" : "#8893a8"
+                },
+                children: chip
+              },
+              chip
+            )) }),
+            filteredEvents.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyRow, { label: snapshot.events.length === 0 ? "No timeline activity yet" : "No events in this filter" }) : filteredEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              Row,
+              {
+                open: openEvents[event.id] ?? false,
+                onToggle: () => setOpenEvents((s) => ({ ...s, [event.id]: !s[event.id] })),
+                hint: event.detail ?? event.guidance,
+                meta: event.metadata ? JSON.stringify(event.metadata, null, 2) : void 0,
+                label: event.title,
+                value: event.time,
+                tag: event.category.slice(0, 4).toUpperCase()
+              },
+              event.id
+            ))
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: "Client Errors", meta: snapshot.errors.length ? `${snapshot.errors.length} captured` : "clean", children: snapshot.errors.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyRow, { label: "No errors captured this session", ok: true }) : snapshot.errors.map((error) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Row,
+            {
+              open: openErrors[error.id] ?? false,
+              onToggle: () => setOpenErrors((s) => ({ ...s, [error.id]: !s[error.id] })),
+              hint: error.guidance,
+              meta: error.stack,
+              label: error.message,
+              value: error.time,
+              tag: "ERR",
+              error: true
+            },
+            error.id
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "footer",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "9px 14px",
+              borderTop: "1px solid #161d2e",
+              background: "#0c1120"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 6, height: 6, borderRadius: "50%", background: PALETTE.cyan } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: "#6b768c" }, children: [
+                "Live \xB7 ",
+                snapshot.panelState
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes tlmSpin { to { transform: rotate(360deg); } }` })
+      ]
+    }
+  );
+}
+function BrandMark() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { position: "relative", width: 26, height: 26, display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 0, height: 0, borderLeft: "13px solid transparent", borderRight: "13px solid transparent", borderBottom: "22px solid #17316A", position: "absolute", top: 1 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { position: "relative", width: 7, height: 7, borderRadius: "50%", background: "#FECD10", marginTop: 6, boxShadow: "0 0 8px #FECD10" } })
+  ] });
+}
+function PanelButton({ children, onClick, title }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", title, onClick, style: { display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 30, height: 30, borderRadius: 8, background: "#121a2b", border: "1px solid #1f2840", color: "#9aa5bd", cursor: "pointer" }, children });
+}
+function StatTile({ label, value, color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { background: "#0a0e1a", padding: "12px 13px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 9.5, letterSpacing: 1, color: "#5f6a82", textTransform: "uppercase" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, fontWeight: 600, color }, children: value })
+  ] });
+}
+function Section({ title, meta, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { paddingBottom: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "13px 14px 6px", display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: 1.5, color: "#7b8aa6", textTransform: "uppercase", fontWeight: 600 }, children: title }),
+      meta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: "#4f5870" }, children: meta }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "0 12px" }, children })
+  ] });
+}
+function Row({
+  label,
+  value,
+  hint,
+  meta,
+  tag,
+  status,
+  open,
+  onToggle,
+  error
+}) {
+  const expandable = Boolean(hint || meta);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderRadius: 8, overflow: "hidden", marginBottom: 3, background: open ? "#0e1424" : error ? "rgba(255,92,108,.05)" : "#0b0f1c", borderLeft: error ? `2px solid #FF5C6C` : void 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", onClick: expandable ? onToggle : void 0, style: { width: "100%", display: "flex", alignItems: "center", gap: 9, padding: "7px 10px", background: "transparent", border: 0, cursor: expandable ? "pointer" : "default", color: "inherit", textAlign: "left" }, children: [
+      tag ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 8.5, fontWeight: 600, padding: "2px 5px", borderRadius: 4, color: error ? "#FF8088" : "#5EC8F7", background: error ? "rgba(255,92,108,.12)" : "rgba(10,173,242,.13)" }, children: tag }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
+      value ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: status === "warn" ? "#FFD86B" : status === "fail" ? "#FF8088" : "#58627a" }, children: value }) : null,
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: "#586279" }, children: open ? "\u25BE" : "\u25B8" }) : null
+    ] }),
+    open && hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "0 12px 11px 36px", fontSize: 11.5, lineHeight: 1.55, color: "#9aa5bd" }, children: hint }) : null,
+    open && meta ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { style: { margin: "0 12px 11px", fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: "#6b768c", background: "#070b14", border: "1px solid #161d2e", borderRadius: 6, padding: "7px 9px", whiteSpace: "pre-wrap" }, children: meta }) : null
+  ] });
+}
+function EmptyRow({ label, ok }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "12px 10px", fontSize: 12, color: "#586279", fontFamily: "'IBM Plex Mono', monospace" }, children: [
+    ok ? "\u2713 " : "",
+    label
+  ] });
+}
+
+// src/panel-visibility.ts
+var import_diagnostics2 = require("@tooluminati/diagnostics");
+var controller;
+function getPanelVisibilityController() {
+  if (!controller) {
+    controller = (0, import_diagnostics2.createTroubleshootingPanelVisibilityController)();
+  }
+  return controller;
+}
+function wirePanelVisibilityController(next) {
+  controller = next;
+}
+function showWebMcpTroubleshootingPanel() {
+  getPanelVisibilityController().show();
+}
+function hideWebMcpTroubleshootingPanel() {
+  getPanelVisibilityController().hide();
+}
+function toggleWebMcpTroubleshootingPanel() {
+  getPanelVisibilityController().toggle();
+}
+function resetPanelVisibilityController() {
+  controller = void 0;
+}
+
+// src/WebMcpTroubleshootingProvider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function WebMcpTroubleshootingInner({
+  children,
+  timeline,
+  errors,
+  mountedForms,
+  trackFetchFailures,
+  panel,
+  panelEnabled,
+  registryRef
+}) {
+  const registry = (0, import_react5.useWebMcpRegistry)();
+  (0, import_react4.useEffect)(() => {
+    registryRef.current = registry;
+  }, [registry, registryRef]);
+  const visibility = (0, import_react4.useMemo)(() => {
+    const controller2 = getPanelVisibilityController();
+    wirePanelVisibilityController(controller2);
+    if (panel?.startCollapsed) {
+      controller2.setCollapsed(true);
+    }
+    return controller2;
+  }, [panel?.startCollapsed]);
+  const viewModel = (0, import_react4.useMemo)(
+    () => (0, import_diagnostics3.createTroubleshootingPanelViewModel)(
+      {
+        timeline,
+        errors,
+        environment: () => (0, import_diagnostics3.createWebMcpEnvironmentSummary)({ registry }),
+        registry
+      },
+      {
+        pollMs: panel?.pollMs ?? 2e3,
+        registry,
+        ...panel?.eventLimit !== void 0 ? { eventLimit: panel.eventLimit } : {}
+      }
+    ),
+    [timeline, errors, registry, panel?.eventLimit, panel?.pollMs]
+  );
+  (0, import_react4.useEffect)(() => {
+    const cleanups = [
+      (0, import_diagnostics3.createErrorCollector)({ buffer: errors }),
+      (0, import_diagnostics3.createTimelineFromErrorBuffer)(errors, timeline),
+      (0, import_diagnostics3.createWebMcpLifecycleCollector)({ buffer: timeline })
+    ];
+    if (trackFetchFailures) {
+      cleanups.push((0, import_diagnostics3.createFetchFailureTracker)({ buffer: timeline }));
+    }
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+      viewModel.dispose();
+    };
+  }, [errors, timeline, trackFetchFailures, viewModel]);
+  const shouldRenderPanel = panelEnabled && panel?.render !== false && (panel?.render === true || panel?.render === "auto" || panel?.render === void 0);
+  const contextValue = (0, import_react4.useMemo)(
+    () => ({
+      timeline,
+      errors,
+      mountedForms,
+      viewModel,
+      visibility,
+      isPanelEnabled: panelEnabled
+    }),
+    [timeline, errors, mountedForms, viewModel, visibility, panelEnabled]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(WebMcpTroubleshootingContext.Provider, { value: contextValue, children: [
+    children,
+    shouldRenderPanel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      WebMcpTroubleshootingPanel,
+      {
+        position: panel?.position ?? "br",
+        ...panel?.startCollapsed !== void 0 ? { startCollapsed: panel.startCollapsed } : {},
+        ...panel?.eventLimit !== void 0 ? { eventLimit: panel.eventLimit } : {},
+        pollMs: panel?.pollMs ?? 2e3
+      }
+    ) : null
+  ] });
+}
+function WebMcpTroubleshootingProvider({
+  children,
+  actionProvider,
+  querySummaries,
+  trackFetchFailures = true,
+  panel,
+  tools = [],
+  extraTools = [],
+  ...providerProps
+}) {
+  const timeline = (0, import_react4.useMemo)(() => new import_diagnostics3.TroubleshootingTimelineBuffer(), []);
+  const errors = (0, import_react4.useMemo)(
+    () => new import_diagnostics3.ClientErrorBuffer({ includeStacks: true }),
+    []
+  );
+  const mountedForms = (0, import_react4.useMemo)(() => (0, import_diagnostics3.createMountedFormsRegistry)(), []);
+  const registryRef = (0, import_react4.useRef)(void 0);
+  const actionProviderRef = (0, import_react4.useRef)(actionProvider);
+  const querySummariesRef = (0, import_react4.useRef)(querySummaries);
+  actionProviderRef.current = actionProvider;
+  querySummariesRef.current = querySummaries;
+  (0, import_react4.useEffect)(() => () => resetPanelVisibilityController(), []);
+  const panelEnabled = (0, import_diagnostics3.isPanelEnabledByDefault)(panel?.enabled) || (0, import_diagnostics3.isPanelUrlOverrideEnabled)(panel?.allowUrlOverride);
+  const liveActionProvider = (0, import_react4.useMemo)(
+    () => ({
+      getActionAvailability: (actionId) => actionProviderRef.current?.getActionAvailability(actionId),
+      listActions: () => actionProviderRef.current?.listActions?.() ?? []
+    }),
+    []
+  );
+  const diagnosticTools = (0, import_react4.useMemo)(
+    () => [
+      (0, import_diagnostics3.createTroubleshootingTimelineTool)(timeline),
+      (0, import_diagnostics3.createWebMcpEnvironmentTool)(
+        () => (0, import_diagnostics3.createWebMcpEnvironmentSummary)({ registry: registryRef.current })
+      ),
+      (0, import_diagnostics3.createRecentClientErrorsTool)(errors),
+      (0, import_diagnostics3.createMountedFormsSummaryTool)(mountedForms),
+      (0, import_diagnostics3.createWorkflowBlockersTool)({
+        ...actionProvider ? { actionProvider: liveActionProvider } : {},
+        formSummaries: () => mountedForms.list().map(import_diagnostics3.formSummaryFromMounted),
+        declarativeFormSummaries: () => (0, import_diagnostics3.discoverDeclarativeForms)(),
+        recentErrors: () => errors.list(),
+        querySummaries: () => querySummariesRef.current?.() ?? []
+      }),
+      ...actionProvider ? [
+        (0, import_diagnostics3.createActionAvailabilityTool)(liveActionProvider),
+        (0, import_diagnostics3.createListActionsTool)(liveActionProvider)
+      ] : [],
+      ...tools,
+      ...extraTools
+    ],
+    [timeline, errors, mountedForms, actionProvider, liveActionProvider, tools, extraTools]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react5.WebMcpProvider, { ...providerProps, tools: diagnosticTools, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    WebMcpTroubleshootingInner,
+    {
+      timeline,
+      errors,
+      mountedForms,
+      trackFetchFailures,
+      panelEnabled,
+      registryRef,
+      ...actionProvider ? { actionProvider } : {},
+      ...querySummaries ? { querySummaries } : {},
+      ...panel ? { panel } : {},
+      children
+    }
+  ) });
+}
+
+// src/WebMcpErrorBoundary.tsx
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Boundary = class extends import_react6.Component {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, info) {
+    this.props.errors.push({
+      message: error.message,
+      source: this.props.source ?? info.componentStack?.split("\n")[1]?.trim() ?? "react",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      ...error.stack ? { stack: error.stack } : {}
+    });
+  }
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? null;
+    }
+    return this.props.children;
+  }
+};
+function WebMcpErrorBoundary({
+  children,
+  fallback,
+  source
+}) {
+  const { errors, timeline } = useWebMcpTroubleshootingContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Boundary,
+    {
+      errors,
+      timeline,
+      fallback,
+      ...source ? { source } : {},
+      children
+    }
+  );
+}
+
+// src/useTanStackQueryWebMcpTools.ts
+var import_react7 = require("react");
+var import_react8 = require("@tooluminati/react");
+var import_state = require("@tooluminati/state");
+function useTanStackQueryWebMcpTools(queryClient, options) {
+  const {
+    allowKeys,
+    includeDataShape,
+    includeData,
+    name
+  } = options;
+  const tool = (0, import_react7.useMemo)(() => {
+    return (0, import_state.createQueryCacheSummaryTool)({
+      queryClient,
+      allowKeys,
+      ...includeDataShape !== void 0 ? { includeDataShape } : {},
+      ...includeData !== void 0 ? { includeData } : {},
+      ...name ? { name } : {}
+    });
+  }, [queryClient, allowKeys, includeDataShape, includeData, name]);
+  (0, import_react8.useWebMcpTools)([tool], [tool], { source: "diagnostic" });
+}
+
+// src/useFormSubmitBlockers.ts
+var import_react9 = require("react");
+var import_react10 = require("@tooluminati/react");
+var import_diagnostics4 = require("@tooluminati/diagnostics");
+function createFormSubmitBlockersProvider(options) {
+  return {
+    getActionAvailability(actionId) {
+      if (actionId !== options.actionId) {
+        return void 0;
+      }
+      const summary = options.getFormSummary();
+      const reasons = [
+        ...summary.errors.map((e) => `${e.path}: ${e.message}`),
+        ...options.getExtraReasons?.() ?? []
+      ];
+      if (summary.submitting) {
+        reasons.push("Form is submitting.");
+      }
+      return {
+        actionId,
+        label: options.label,
+        available: reasons.length === 0,
+        reasons
+      };
+    },
+    listActions() {
+      const action = createFormSubmitBlockersProvider(
+        options
+      ).getActionAvailability(options.actionId);
+      return action ? [action] : [];
+    }
+  };
+}
+function useFormSubmitBlockers(options) {
+  const provider = (0, import_react9.useMemo)(
+    () => createFormSubmitBlockersProvider(options),
+    [options]
+  );
+  (0, import_react10.useWebMcpTool)((0, import_diagnostics4.createActionAvailabilityTool)(provider), [provider]);
+  return provider;
+}
+
+// src/declarative-form.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function WebMcpForm({
+  toolName,
+  toolDescription,
+  toolAutoSubmit,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "form",
+    {
+      ...props,
+      toolname: toolName,
+      tooldescription: toolDescription,
+      ...toolAutoSubmit ? { toolautosubmit: "" } : {},
+      children
+    }
+  );
+}
+function WebMcpInput(props) {
+  const { toolParamDescription, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "input",
+    {
+      ...rest,
+      ...toolParamDescription ? { toolparamdescription: toolParamDescription } : {}
+    }
+  );
+}
+function WebMcpSelect(props) {
+  const { toolParamDescription, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "select",
+    {
+      ...rest,
+      ...toolParamDescription ? { toolparamdescription: toolParamDescription } : {}
+    }
+  );
+}
+function WebMcpTextarea(props) {
+  const { toolParamDescription, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "textarea",
+    {
+      ...rest,
+      ...toolParamDescription ? { toolparamdescription: toolParamDescription } : {}
+    }
+  );
+}
+function useAgentInvokedSubmit(handler) {
+  return (event) => {
+    const submitEvent = event.nativeEvent;
+    if (submitEvent.agentInvoked) {
+      handler(event);
+    }
+  };
+}
+function useDeclarativeFormToolEvents(_options = {}) {
+}
+
+// src/useTroubleshootingPanel.ts
+var import_react11 = require("react");
+var import_diagnostics5 = require("@tooluminati/diagnostics");
+function useTroubleshootingPanel() {
+  const { viewModel } = useWebMcpTroubleshootingContext();
+  const [snapshot, setSnapshot] = (0, import_react11.useState)(
+    () => viewModel.refresh()
+  );
+  (0, import_react11.useEffect)(() => {
+    const refresh = () => setSnapshot(viewModel.refresh());
+    refresh();
+    return viewModel.subscribe(refresh);
+  }, [viewModel]);
+  return {
+    snapshot,
+    panelState: snapshot.panelState,
+    refresh: () => setSnapshot(viewModel.refresh()),
+    copyDiagnostics: () => (0, import_diagnostics5.serializeTroubleshootingDiagnostics)(snapshot)
+  };
+}
+function useTroubleshootingPanelVisibility() {
+  const { visibility, isPanelEnabled } = useWebMcpTroubleshootingContext();
+  const [, bump] = (0, import_react11.useState)(0);
+  (0, import_react11.useEffect)(() => visibility.subscribe(() => bump((n) => n + 1)), [visibility]);
+  return {
+    visibility,
+    isPanelEnabled,
+    visible: visibility.visible,
+    collapsed: visibility.collapsed
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WebMcpErrorBoundary,
+  WebMcpForm,
+  WebMcpInput,
+  WebMcpSelect,
+  WebMcpTextarea,
+  WebMcpTroubleshootingContext,
+  WebMcpTroubleshootingPanel,
+  WebMcpTroubleshootingProvider,
+  createFormSubmitBlockersProvider,
+  getPanelVisibilityController,
+  hideWebMcpTroubleshootingPanel,
+  resetPanelVisibilityController,
+  showWebMcpTroubleshootingPanel,
+  toggleWebMcpTroubleshootingPanel,
+  useAgentInvokedSubmit,
+  useDeclarativeFormToolEvents,
+  useFormSubmitBlockers,
+  useTanStackQueryWebMcpTools,
+  useTroubleshootingPanel,
+  useTroubleshootingPanelVisibility,
+  useWebMcpTroubleshootingContext,
+  wirePanelVisibilityController
+});