@tooluminati/react-troubleshooting 0.1.0

package/dist/index.js

@@ -0,0 +1,822 @@
+// src/webmcp-declarative-attributes.ts
+import "react";
+
+// src/WebMcpTroubleshootingProvider.tsx
+import {
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef
+} from "react";
+import {
+  ClientErrorBuffer,
+  TroubleshootingTimelineBuffer,
+  createErrorCollector,
+  createFetchFailureTracker,
+  createActionAvailabilityTool,
+  createListActionsTool,
+  createMountedFormsRegistry,
+  createMountedFormsSummaryTool,
+  createRecentClientErrorsTool,
+  createTimelineFromErrorBuffer,
+  createTroubleshootingPanelViewModel,
+  createTroubleshootingTimelineTool,
+  createWebMcpEnvironmentSummary,
+  createWebMcpEnvironmentTool,
+  createWebMcpLifecycleCollector,
+  createWorkflowBlockersTool,
+  discoverDeclarativeForms,
+  formSummaryFromMounted,
+  isPanelEnabledByDefault,
+  isPanelUrlOverrideEnabled
+} from "@tooluminati/diagnostics";
+import {
+  WebMcpProvider,
+  useWebMcpRegistry
+} from "@tooluminati/react";
+
+// src/WebMcpTroubleshootingContext.tsx
+import { createContext, useContext } from "react";
+var WebMcpTroubleshootingContext = createContext(null);
+function useWebMcpTroubleshootingContext() {
+  const value = useContext(WebMcpTroubleshootingContext);
+  if (!value) {
+    throw new Error(
+      "useWebMcpTroubleshootingContext requires WebMcpTroubleshootingProvider."
+    );
+  }
+  return value;
+}
+
+// src/WebMcpTroubleshootingPanel.tsx
+import { useEffect, useMemo, useState } from "react";
+import {
+  filterPanelEvents,
+  serializeTroubleshootingDiagnostics
+} from "@tooluminati/diagnostics";
+import { jsx, jsxs } from "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] = useState(
+    () => viewModel.refresh()
+  );
+  const [filter, setFilter] = useState("all");
+  const [openChecks, setOpenChecks] = useState({});
+  const [openEvents, setOpenEvents] = useState({});
+  const [openErrors, setOpenErrors] = useState({});
+  const [copied, setCopied] = useState(false);
+  const [spinning, setSpinning] = useState(false);
+  useEffect(() => {
+    if (startCollapsed) {
+      visibility.setCollapsed(true);
+    }
+  }, [startCollapsed, visibility]);
+  useEffect(() => {
+    const refresh2 = () => setSnapshot(viewModel.refresh());
+    refresh2();
+    const unsubVm = viewModel.subscribe(refresh2);
+    const unsubVis = visibility.subscribe(refresh2);
+    return () => {
+      unsubVm();
+      unsubVis();
+    };
+  }, [viewModel, visibility]);
+  const filteredEvents = useMemo(
+    () => 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 = 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__ */ 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__ */ jsx(BrandMark, {}),
+          /* @__PURE__ */ jsxs("span", { style: { display: "flex", flexDirection: "column", lineHeight: 1.15 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 600, color: "#e7ecf6" }, children: "WebMCP" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontFamily: "'IBM Plex Mono', monospace",
+                  fontSize: 10,
+                  color: supportColor
+                },
+                children: snapshot.supported ? "supported" : "unsupported"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                paddingLeft: 11,
+                marginLeft: 3,
+                borderLeft: "1px solid #20293f"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      fontSize: 12,
+                      color: "#aeb7cb"
+                    },
+                    children: snapshot.toolCount
+                  }
+                ),
+                snapshot.issueCount > 0 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: snapshot.errors.length > 0 ? PALETTE.red : PALETTE.amber
+                    }
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ jsxs(
+          "header",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 11,
+              padding: "13px 14px",
+              borderBottom: "1px solid #161d2e"
+            },
+            children: [
+              /* @__PURE__ */ jsx(BrandMark, {}),
+              /* @__PURE__ */ jsxs("div", { style: { marginRight: "auto", lineHeight: 1.2 }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontSize: 13.5, fontWeight: 600 }, children: "WebMCP Troubleshooting" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: "'IBM Plex Mono', monospace",
+                      fontSize: 9.5,
+                      letterSpacing: 1.6,
+                      color: "#5f6a82",
+                      textTransform: "uppercase"
+                    },
+                    children: "Tooluminati \xB7 dev panel"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(PanelButton, { title: "Re-run checks", onClick: refresh, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", animation: spinning ? "tlmSpin .65s linear" : "none" }, children: "\u27F3" }) }),
+              /* @__PURE__ */ jsx(PanelButton, { onClick: () => void copyDiagnostics(), children: /* @__PURE__ */ jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: copied ? PALETTE.cyan : "#9aa5bd" }, children: copied ? "Copied \u2713" : "Copy JSON" }) }),
+              /* @__PURE__ */ jsx(PanelButton, { title: "Minimize", onClick: () => visibility.setCollapsed(true), children: "\u2013" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr 1fr",
+              gap: 1,
+              background: "#161d2e"
+            },
+            children: [
+              /* @__PURE__ */ jsx(StatTile, { label: "WebMCP", value: snapshot.supported ? "Supported" : "Unsupported", color: supportColor }),
+              /* @__PURE__ */ jsx(StatTile, { label: "Tools", value: String(snapshot.toolCount), color: snapshot.toolCount > 0 ? "#eef2fa" : PALETTE.amber }),
+              /* @__PURE__ */ jsx(StatTile, { label: "Issues", value: String(snapshot.issueCount), color: snapshot.errors.length ? PALETTE.red : snapshot.issueCount ? PALETTE.amber : PALETTE.cyan })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { overflow: "auto", flex: 1, minHeight: 0 }, children: [
+          /* @__PURE__ */ jsx(Section, { title: "Environment", children: snapshot.checks.map((check) => /* @__PURE__ */ 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__ */ jsxs(Section, { title: "Timeline", meta: `${snapshot.events.length} captured`, children: [
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, padding: "0 12px 8px" }, children: ["all", "failures", "blocked", "tools", "nav"].map((chip) => /* @__PURE__ */ 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__ */ jsx(EmptyRow, { label: snapshot.events.length === 0 ? "No timeline activity yet" : "No events in this filter" }) : filteredEvents.map((event) => /* @__PURE__ */ 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__ */ jsx(Section, { title: "Client Errors", meta: snapshot.errors.length ? `${snapshot.errors.length} captured` : "clean", children: snapshot.errors.length === 0 ? /* @__PURE__ */ jsx(EmptyRow, { label: "No errors captured this session", ok: true }) : snapshot.errors.map((error) => /* @__PURE__ */ 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__ */ jsxs(
+          "footer",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "9px 14px",
+              borderTop: "1px solid #161d2e",
+              background: "#0c1120"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { width: 6, height: 6, borderRadius: "50%", background: PALETTE.cyan } }),
+              /* @__PURE__ */ jsxs("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: "#6b768c" }, children: [
+                "Live \xB7 ",
+                snapshot.panelState
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `@keyframes tlmSpin { to { transform: rotate(360deg); } }` })
+      ]
+    }
+  );
+}
+function BrandMark() {
+  return /* @__PURE__ */ jsxs("span", { style: { position: "relative", width: 26, height: 26, display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { width: 0, height: 0, borderLeft: "13px solid transparent", borderRight: "13px solid transparent", borderBottom: "22px solid #17316A", position: "absolute", top: 1 } }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { style: { background: "#0a0e1a", padding: "12px 13px" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 9.5, letterSpacing: 1, color: "#5f6a82", textTransform: "uppercase" }, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 14, fontWeight: 600, color }, children: value })
+  ] });
+}
+function Section({ title, meta, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { paddingBottom: 8 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { padding: "13px 14px 6px", display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: 1.5, color: "#7b8aa6", textTransform: "uppercase", fontWeight: 600 }, children: title }),
+      meta ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: "#4f5870" }, children: meta }) : null
+    ] }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("span", { style: { fontSize: 12, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: label }),
+      value ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: status === "warn" ? "#FFD86B" : status === "fail" ? "#FF8088" : "#58627a" }, children: value }) : null,
+      expandable ? /* @__PURE__ */ jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: "#586279" }, children: open ? "\u25BE" : "\u25B8" }) : null
+    ] }),
+    open && hint ? /* @__PURE__ */ jsx("div", { style: { padding: "0 12px 11px 36px", fontSize: 11.5, lineHeight: 1.55, color: "#9aa5bd" }, children: hint }) : null,
+    open && meta ? /* @__PURE__ */ 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__ */ jsxs("div", { style: { padding: "12px 10px", fontSize: 12, color: "#586279", fontFamily: "'IBM Plex Mono', monospace" }, children: [
+    ok ? "\u2713 " : "",
+    label
+  ] });
+}
+
+// src/panel-visibility.ts
+import {
+  createTroubleshootingPanelVisibilityController
+} from "@tooluminati/diagnostics";
+var controller;
+function getPanelVisibilityController() {
+  if (!controller) {
+    controller = 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
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function WebMcpTroubleshootingInner({
+  children,
+  timeline,
+  errors,
+  mountedForms,
+  trackFetchFailures,
+  panel,
+  panelEnabled,
+  registryRef
+}) {
+  const registry = useWebMcpRegistry();
+  useEffect2(() => {
+    registryRef.current = registry;
+  }, [registry, registryRef]);
+  const visibility = useMemo2(() => {
+    const controller2 = getPanelVisibilityController();
+    wirePanelVisibilityController(controller2);
+    if (panel?.startCollapsed) {
+      controller2.setCollapsed(true);
+    }
+    return controller2;
+  }, [panel?.startCollapsed]);
+  const viewModel = useMemo2(
+    () => createTroubleshootingPanelViewModel(
+      {
+        timeline,
+        errors,
+        environment: () => createWebMcpEnvironmentSummary({ registry }),
+        registry
+      },
+      {
+        pollMs: panel?.pollMs ?? 2e3,
+        registry,
+        ...panel?.eventLimit !== void 0 ? { eventLimit: panel.eventLimit } : {}
+      }
+    ),
+    [timeline, errors, registry, panel?.eventLimit, panel?.pollMs]
+  );
+  useEffect2(() => {
+    const cleanups = [
+      createErrorCollector({ buffer: errors }),
+      createTimelineFromErrorBuffer(errors, timeline),
+      createWebMcpLifecycleCollector({ buffer: timeline })
+    ];
+    if (trackFetchFailures) {
+      cleanups.push(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 = useMemo2(
+    () => ({
+      timeline,
+      errors,
+      mountedForms,
+      viewModel,
+      visibility,
+      isPanelEnabled: panelEnabled
+    }),
+    [timeline, errors, mountedForms, viewModel, visibility, panelEnabled]
+  );
+  return /* @__PURE__ */ jsxs2(WebMcpTroubleshootingContext.Provider, { value: contextValue, children: [
+    children,
+    shouldRenderPanel ? /* @__PURE__ */ jsx2(
+      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 = useMemo2(() => new TroubleshootingTimelineBuffer(), []);
+  const errors = useMemo2(
+    () => new ClientErrorBuffer({ includeStacks: true }),
+    []
+  );
+  const mountedForms = useMemo2(() => createMountedFormsRegistry(), []);
+  const registryRef = useRef(void 0);
+  const actionProviderRef = useRef(actionProvider);
+  const querySummariesRef = useRef(querySummaries);
+  actionProviderRef.current = actionProvider;
+  querySummariesRef.current = querySummaries;
+  useEffect2(() => () => resetPanelVisibilityController(), []);
+  const panelEnabled = isPanelEnabledByDefault(panel?.enabled) || isPanelUrlOverrideEnabled(panel?.allowUrlOverride);
+  const liveActionProvider = useMemo2(
+    () => ({
+      getActionAvailability: (actionId) => actionProviderRef.current?.getActionAvailability(actionId),
+      listActions: () => actionProviderRef.current?.listActions?.() ?? []
+    }),
+    []
+  );
+  const diagnosticTools = useMemo2(
+    () => [
+      createTroubleshootingTimelineTool(timeline),
+      createWebMcpEnvironmentTool(
+        () => createWebMcpEnvironmentSummary({ registry: registryRef.current })
+      ),
+      createRecentClientErrorsTool(errors),
+      createMountedFormsSummaryTool(mountedForms),
+      createWorkflowBlockersTool({
+        ...actionProvider ? { actionProvider: liveActionProvider } : {},
+        formSummaries: () => mountedForms.list().map(formSummaryFromMounted),
+        declarativeFormSummaries: () => discoverDeclarativeForms(),
+        recentErrors: () => errors.list(),
+        querySummaries: () => querySummariesRef.current?.() ?? []
+      }),
+      ...actionProvider ? [
+        createActionAvailabilityTool(liveActionProvider),
+        createListActionsTool(liveActionProvider)
+      ] : [],
+      ...tools,
+      ...extraTools
+    ],
+    [timeline, errors, mountedForms, actionProvider, liveActionProvider, tools, extraTools]
+  );
+  return /* @__PURE__ */ jsx2(WebMcpProvider, { ...providerProps, tools: diagnosticTools, children: /* @__PURE__ */ jsx2(
+    WebMcpTroubleshootingInner,
+    {
+      timeline,
+      errors,
+      mountedForms,
+      trackFetchFailures,
+      panelEnabled,
+      registryRef,
+      ...actionProvider ? { actionProvider } : {},
+      ...querySummaries ? { querySummaries } : {},
+      ...panel ? { panel } : {},
+      children
+    }
+  ) });
+}
+
+// src/WebMcpErrorBoundary.tsx
+import { Component } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Boundary = class extends 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__ */ jsx3(
+    Boundary,
+    {
+      errors,
+      timeline,
+      fallback,
+      ...source ? { source } : {},
+      children
+    }
+  );
+}
+
+// src/useTanStackQueryWebMcpTools.ts
+import { useMemo as useMemo3 } from "react";
+import { useWebMcpTools } from "@tooluminati/react";
+import {
+  createQueryCacheSummaryTool
+} from "@tooluminati/state";
+function useTanStackQueryWebMcpTools(queryClient, options) {
+  const {
+    allowKeys,
+    includeDataShape,
+    includeData,
+    name
+  } = options;
+  const tool = useMemo3(() => {
+    return createQueryCacheSummaryTool({
+      queryClient,
+      allowKeys,
+      ...includeDataShape !== void 0 ? { includeDataShape } : {},
+      ...includeData !== void 0 ? { includeData } : {},
+      ...name ? { name } : {}
+    });
+  }, [queryClient, allowKeys, includeDataShape, includeData, name]);
+  useWebMcpTools([tool], [tool], { source: "diagnostic" });
+}
+
+// src/useFormSubmitBlockers.ts
+import { useMemo as useMemo4 } from "react";
+import { useWebMcpTool } from "@tooluminati/react";
+import { createActionAvailabilityTool as createActionAvailabilityTool2 } from "@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 = useMemo4(
+    () => createFormSubmitBlockersProvider(options),
+    [options]
+  );
+  useWebMcpTool(createActionAvailabilityTool2(provider), [provider]);
+  return provider;
+}
+
+// src/declarative-form.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function WebMcpForm({
+  toolName,
+  toolDescription,
+  toolAutoSubmit,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "form",
+    {
+      ...props,
+      toolname: toolName,
+      tooldescription: toolDescription,
+      ...toolAutoSubmit ? { toolautosubmit: "" } : {},
+      children
+    }
+  );
+}
+function WebMcpInput(props) {
+  const { toolParamDescription, ...rest } = props;
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ...rest,
+      ...toolParamDescription ? { toolparamdescription: toolParamDescription } : {}
+    }
+  );
+}
+function WebMcpSelect(props) {
+  const { toolParamDescription, ...rest } = props;
+  return /* @__PURE__ */ jsx4(
+    "select",
+    {
+      ...rest,
+      ...toolParamDescription ? { toolparamdescription: toolParamDescription } : {}
+    }
+  );
+}
+function WebMcpTextarea(props) {
+  const { toolParamDescription, ...rest } = props;
+  return /* @__PURE__ */ jsx4(
+    "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
+import { useEffect as useEffect3, useState as useState2 } from "react";
+import {
+  serializeTroubleshootingDiagnostics as serializeTroubleshootingDiagnostics2
+} from "@tooluminati/diagnostics";
+function useTroubleshootingPanel() {
+  const { viewModel } = useWebMcpTroubleshootingContext();
+  const [snapshot, setSnapshot] = useState2(
+    () => viewModel.refresh()
+  );
+  useEffect3(() => {
+    const refresh = () => setSnapshot(viewModel.refresh());
+    refresh();
+    return viewModel.subscribe(refresh);
+  }, [viewModel]);
+  return {
+    snapshot,
+    panelState: snapshot.panelState,
+    refresh: () => setSnapshot(viewModel.refresh()),
+    copyDiagnostics: () => serializeTroubleshootingDiagnostics2(snapshot)
+  };
+}
+function useTroubleshootingPanelVisibility() {
+  const { visibility, isPanelEnabled } = useWebMcpTroubleshootingContext();
+  const [, bump] = useState2(0);
+  useEffect3(() => visibility.subscribe(() => bump((n) => n + 1)), [visibility]);
+  return {
+    visibility,
+    isPanelEnabled,
+    visible: visibility.visible,
+    collapsed: visibility.collapsed
+  };
+}
+export {
+  WebMcpErrorBoundary,
+  WebMcpForm,
+  WebMcpInput,
+  WebMcpSelect,
+  WebMcpTextarea,
+  WebMcpTroubleshootingContext,
+  WebMcpTroubleshootingPanel,
+  WebMcpTroubleshootingProvider,
+  createFormSubmitBlockersProvider,
+  getPanelVisibilityController,
+  hideWebMcpTroubleshootingPanel,
+  resetPanelVisibilityController,
+  showWebMcpTroubleshootingPanel,
+  toggleWebMcpTroubleshootingPanel,
+  useAgentInvokedSubmit,
+  useDeclarativeFormToolEvents,
+  useFormSubmitBlockers,
+  useTanStackQueryWebMcpTools,
+  useTroubleshootingPanel,
+  useTroubleshootingPanelVisibility,
+  useWebMcpTroubleshootingContext,
+  wirePanelVisibilityController
+};