@tooluminati/react-troubleshooting 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jitterbox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/WebMcpErrorBoundary.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export interface WebMcpErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    source?: string;
+}
+export declare function WebMcpErrorBoundary({ children, fallback, source, }: WebMcpErrorBoundaryProps): import("react").JSX.Element;
+//# sourceMappingURL=WebMcpErrorBoundary.d.ts.map

package/dist/WebMcpErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebMcpErrorBoundary.d.ts","sourceRoot":"","sources":["../src/WebMcpErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlE,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAsCD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE,wBAAwB,+BAY1B"}

package/dist/WebMcpErrorBoundary.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+import { useWebMcpTroubleshootingContext } from './WebMcpTroubleshootingContext';
+class Boundary 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: new Date().toISOString(),
+            ...(error.stack ? { stack: error.stack } : {}),
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback ?? null;
+        }
+        return this.props.children;
+    }
+}
+export function WebMcpErrorBoundary({ children, fallback, source, }) {
+    const { errors, timeline } = useWebMcpTroubleshootingContext();
+    return (_jsx(Boundary, { errors: errors, timeline: timeline, fallback: fallback, ...(source ? { source } : {}), children: children }));
+}

package/dist/WebMcpTroubleshootingContext.d.ts

@@ -0,0 +1,12 @@
+import type { ClientErrorBuffer, MountedFormsRegistry, TroubleshootingPanelViewModel, TroubleshootingPanelVisibilityController, TroubleshootingTimelineBuffer } from '@tooluminati/diagnostics';
+export interface WebMcpTroubleshootingContextValue {
+    timeline: TroubleshootingTimelineBuffer;
+    errors: ClientErrorBuffer;
+    mountedForms: MountedFormsRegistry;
+    viewModel: TroubleshootingPanelViewModel;
+    visibility: TroubleshootingPanelVisibilityController;
+    isPanelEnabled: boolean;
+}
+export declare const WebMcpTroubleshootingContext: import("react").Context<WebMcpTroubleshootingContextValue | null>;
+export declare function useWebMcpTroubleshootingContext(): WebMcpTroubleshootingContextValue;
+//# sourceMappingURL=WebMcpTroubleshootingContext.d.ts.map

package/dist/WebMcpTroubleshootingContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebMcpTroubleshootingContext.d.ts","sourceRoot":"","sources":["../src/WebMcpTroubleshootingContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EACjB,oBAAoB,EACpB,6BAA6B,EAC7B,wCAAwC,EACxC,6BAA6B,EAC9B,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,iCAAiC;IAChD,QAAQ,EAAE,6BAA6B,CAAC;IACxC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,YAAY,EAAE,oBAAoB,CAAC;IACnC,SAAS,EAAE,6BAA6B,CAAC;IACzC,UAAU,EAAE,wCAAwC,CAAC;IACrD,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,4BAA4B,mEACsB,CAAC;AAEhE,wBAAgB,+BAA+B,IAAI,iCAAiC,CAQnF"}

package/dist/WebMcpTroubleshootingContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const WebMcpTroubleshootingContext = createContext(null);
+export function useWebMcpTroubleshootingContext() {
+    const value = useContext(WebMcpTroubleshootingContext);
+    if (!value) {
+        throw new Error('useWebMcpTroubleshootingContext requires WebMcpTroubleshootingProvider.');
+    }
+    return value;
+}

package/dist/WebMcpTroubleshootingPanel.d.ts

@@ -0,0 +1,9 @@
+export interface WebMcpTroubleshootingPanelProps {
+    position?: 'br' | 'bl' | 'tr' | 'tl';
+    startCollapsed?: boolean;
+    eventLimit?: number;
+    pollMs?: number | null;
+    onCopyDiagnostics?: (json: string) => void;
+}
+export declare function WebMcpTroubleshootingPanel({ position, startCollapsed, onCopyDiagnostics, }: WebMcpTroubleshootingPanelProps): import("react").JSX.Element | null;
+//# sourceMappingURL=WebMcpTroubleshootingPanel.d.ts.map

package/dist/WebMcpTroubleshootingPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebMcpTroubleshootingPanel.d.ts","sourceRoot":"","sources":["../src/WebMcpTroubleshootingPanel.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAYD,wBAAgB,0BAA0B,CAAC,EACzC,QAAe,EACf,cAAc,EACd,iBAAiB,GAClB,EAAE,+BAA+B,sCAkTjC"}

package/dist/WebMcpTroubleshootingPanel.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { filterPanelEvents, serializeTroubleshootingDiagnostics, } from '@tooluminati/diagnostics';
+import { useWebMcpTroubleshootingContext } from './WebMcpTroubleshootingContext';
+const PALETTE = {
+    surface: '#0a0e1a',
+    navy: '#17316A',
+    amber: '#FECD10',
+    cyan: '#0AADF2',
+    red: '#FF5C6C',
+};
+const positionStyle = {
+    br: { right: '26px', bottom: '26px' },
+    bl: { left: '26px', bottom: '26px' },
+    tr: { right: '26px', top: '26px' },
+    tl: { left: '26px', top: '26px' },
+};
+export 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 refresh = () => setSnapshot(viewModel.refresh());
+        refresh();
+        const unsubVm = viewModel.subscribe(refresh);
+        const unsubVis = visibility.subscribe(refresh);
+        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 (_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: [_jsx(BrandMark, {}), _jsxs("span", { style: { display: 'flex', flexDirection: 'column', lineHeight: 1.15 }, children: [_jsx("span", { style: { fontSize: 12, fontWeight: 600, color: '#e7ecf6' }, children: "WebMCP" }), _jsx("span", { style: {
+                                fontFamily: "'IBM Plex Mono', monospace",
+                                fontSize: 10,
+                                color: supportColor,
+                            }, children: snapshot.supported ? 'supported' : 'unsupported' })] }), _jsxs("span", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        paddingLeft: 11,
+                        marginLeft: 3,
+                        borderLeft: '1px solid #20293f',
+                    }, children: [_jsx("span", { style: {
+                                fontFamily: "'IBM Plex Mono', monospace",
+                                fontSize: 12,
+                                color: '#aeb7cb',
+                            }, children: snapshot.toolCount }), snapshot.issueCount > 0 ? (_jsx("span", { style: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: '50%',
+                                background: snapshot.errors.length > 0 ? PALETTE.red : PALETTE.amber,
+                            } })) : null] })] }));
+    }
+    return (_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: [_jsxs("header", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 11,
+                    padding: '13px 14px',
+                    borderBottom: '1px solid #161d2e',
+                }, children: [_jsx(BrandMark, {}), _jsxs("div", { style: { marginRight: 'auto', lineHeight: 1.2 }, children: [_jsx("div", { style: { fontSize: 13.5, fontWeight: 600 }, children: "WebMCP Troubleshooting" }), _jsx("div", { style: {
+                                    fontFamily: "'IBM Plex Mono', monospace",
+                                    fontSize: 9.5,
+                                    letterSpacing: 1.6,
+                                    color: '#5f6a82',
+                                    textTransform: 'uppercase',
+                                }, children: "Tooluminati \u00B7 dev panel" })] }), _jsx(PanelButton, { title: "Re-run checks", onClick: refresh, children: _jsx("span", { style: { display: 'inline-block', animation: spinning ? 'tlmSpin .65s linear' : 'none' }, children: "\u27F3" }) }), _jsx(PanelButton, { onClick: () => void copyDiagnostics(), children: _jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: copied ? PALETTE.cyan : '#9aa5bd' }, children: copied ? 'Copied ✓' : 'Copy JSON' }) }), _jsx(PanelButton, { title: "Minimize", onClick: () => visibility.setCollapsed(true), children: "\u2013" })] }), _jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: '1fr 1fr 1fr',
+                    gap: 1,
+                    background: '#161d2e',
+                }, children: [_jsx(StatTile, { label: "WebMCP", value: snapshot.supported ? 'Supported' : 'Unsupported', color: supportColor }), _jsx(StatTile, { label: "Tools", value: String(snapshot.toolCount), color: snapshot.toolCount > 0 ? '#eef2fa' : PALETTE.amber }), _jsx(StatTile, { label: "Issues", value: String(snapshot.issueCount), color: snapshot.errors.length ? PALETTE.red : snapshot.issueCount ? PALETTE.amber : PALETTE.cyan })] }), _jsxs("div", { style: { overflow: 'auto', flex: 1, minHeight: 0 }, children: [_jsx(Section, { title: "Environment", children: snapshot.checks.map((check) => (_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))) }), _jsxs(Section, { title: "Timeline", meta: `${snapshot.events.length} captured`, children: [_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 6, padding: '0 12px 8px' }, children: ['all', 'failures', 'blocked', 'tools', 'nav'].map((chip) => (_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 ? (_jsx(EmptyRow, { label: snapshot.events.length === 0 ? 'No timeline activity yet' : 'No events in this filter' })) : (filteredEvents.map((event) => (_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) : undefined, label: event.title, value: event.time, tag: event.category.slice(0, 4).toUpperCase() }, event.id))))] }), _jsx(Section, { title: "Client Errors", meta: snapshot.errors.length ? `${snapshot.errors.length} captured` : 'clean', children: snapshot.errors.length === 0 ? (_jsx(EmptyRow, { label: "No errors captured this session", ok: true })) : (snapshot.errors.map((error) => (_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)))) })] }), _jsxs("footer", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '9px 14px',
+                    borderTop: '1px solid #161d2e',
+                    background: '#0c1120',
+                }, children: [_jsx("span", { style: { width: 6, height: 6, borderRadius: '50%', background: PALETTE.cyan } }), _jsxs("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, color: '#6b768c' }, children: ["Live \u00B7 ", snapshot.panelState] })] }), _jsx("style", { children: `@keyframes tlmSpin { to { transform: rotate(360deg); } }` })] }));
+}
+function BrandMark() {
+    return (_jsxs("span", { style: { position: 'relative', width: 26, height: 26, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, children: [_jsx("span", { style: { width: 0, height: 0, borderLeft: '13px solid transparent', borderRight: '13px solid transparent', borderBottom: '22px solid #17316A', position: 'absolute', top: 1 } }), _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 (_jsx("button", { type: "button", title: title, onClick: 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: children }));
+}
+function StatTile({ label, value, color }) {
+    return (_jsxs("div", { style: { background: '#0a0e1a', padding: '12px 13px' }, children: [_jsx("div", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 9.5, letterSpacing: 1, color: '#5f6a82', textTransform: 'uppercase' }, children: label }), _jsx("div", { style: { fontSize: 14, fontWeight: 600, color }, children: value })] }));
+}
+function Section({ title, meta, children }) {
+    return (_jsxs("div", { style: { paddingBottom: 8 }, children: [_jsxs("div", { style: { padding: '13px 14px 6px', display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: 1.5, color: '#7b8aa6', textTransform: 'uppercase', fontWeight: 600 }, children: title }), meta ? _jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: '#4f5870' }, children: meta }) : null] }), _jsx("div", { style: { padding: '0 12px' }, children: children })] }));
+}
+function Row({ label, value, hint, meta, tag, status, open, onToggle, error, }) {
+    const expandable = Boolean(hint || meta);
+    return (_jsxs("div", { style: { borderRadius: 8, overflow: 'hidden', marginBottom: 3, background: open ? '#0e1424' : error ? 'rgba(255,92,108,.05)' : '#0b0f1c', borderLeft: error ? `2px solid #FF5C6C` : undefined }, children: [_jsxs("button", { type: "button", onClick: expandable ? onToggle : undefined, 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 ? _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, _jsx("span", { style: { fontSize: 12, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: label }), value ? _jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, color: status === 'warn' ? '#FFD86B' : status === 'fail' ? '#FF8088' : '#58627a' }, children: value }) : null, expandable ? _jsx("span", { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: '#586279' }, children: open ? '▾' : '▸' }) : null] }), open && hint ? _jsx("div", { style: { padding: '0 12px 11px 36px', fontSize: 11.5, lineHeight: 1.55, color: '#9aa5bd' }, children: hint }) : null, open && meta ? _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 (_jsxs("div", { style: { padding: '12px 10px', fontSize: 12, color: '#586279', fontFamily: "'IBM Plex Mono', monospace" }, children: [ok ? '✓ ' : '', label] }));
+}

package/dist/WebMcpTroubleshootingProvider.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import { type ActionAvailabilityProvider, type QuerySummary } from '@tooluminati/diagnostics';
+import { type WebMcpProviderProps } from '@tooluminati/react';
+export interface WebMcpTroubleshootingPanelOptions {
+    enabled?: boolean | 'auto';
+    render?: boolean | 'auto';
+    position?: 'br' | 'bl' | 'tr' | 'tl';
+    startCollapsed?: boolean;
+    pollMs?: number | null;
+    allowUrlOverride?: boolean;
+    eventLimit?: number;
+}
+export interface WebMcpTroubleshootingProviderProps extends Omit<WebMcpProviderProps, 'tools'> {
+    children: ReactNode;
+    actionProvider?: ActionAvailabilityProvider;
+    querySummaries?: () => QuerySummary[];
+    trackFetchFailures?: boolean;
+    panel?: WebMcpTroubleshootingPanelOptions;
+    tools?: WebMcpProviderProps['tools'];
+    extraTools?: WebMcpProviderProps['tools'];
+}
+export declare function WebMcpTroubleshootingProvider({ children, actionProvider, querySummaries, trackFetchFailures, panel, tools, extraTools, ...providerProps }: WebMcpTroubleshootingProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=WebMcpTroubleshootingProvider.d.ts.map

package/dist/WebMcpTroubleshootingProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebMcpTroubleshootingProvider.d.ts","sourceRoot":"","sources":["../src/WebMcpTroubleshootingProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAqBL,KAAK,0BAA0B,EAC/B,KAAK,YAAY,EAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAS5B,MAAM,WAAW,iCAAiC;IAChD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kCACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,iCAAiC,CAAC;IAC1C,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;CAC3C;AAgHD,wBAAgB,6BAA6B,CAAC,EAC5C,QAAQ,EACR,cAAc,EACd,cAAc,EACd,kBAAyB,EACzB,KAAK,EACL,KAAU,EACV,UAAe,EACf,GAAG,aAAa,EACjB,EAAE,kCAAkC,+BAyEpC"}

package/dist/WebMcpTroubleshootingProvider.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, 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';
+import { WebMcpTroubleshootingContext } from './WebMcpTroubleshootingContext';
+import { WebMcpTroubleshootingPanel } from './WebMcpTroubleshootingPanel';
+import { getPanelVisibilityController, resetPanelVisibilityController, wirePanelVisibilityController, } from './panel-visibility';
+function WebMcpTroubleshootingInner({ children, timeline, errors, mountedForms, trackFetchFailures, panel, panelEnabled, registryRef, }) {
+    const registry = useWebMcpRegistry();
+    useEffect(() => {
+        registryRef.current = registry;
+    }, [registry, registryRef]);
+    const visibility = useMemo(() => {
+        const controller = getPanelVisibilityController();
+        wirePanelVisibilityController(controller);
+        if (panel?.startCollapsed) {
+            controller.setCollapsed(true);
+        }
+        return controller;
+    }, [panel?.startCollapsed]);
+    const viewModel = useMemo(() => createTroubleshootingPanelViewModel({
+        timeline,
+        errors,
+        environment: () => createWebMcpEnvironmentSummary({ registry }),
+        registry,
+    }, {
+        pollMs: panel?.pollMs ?? 2000,
+        registry,
+        ...(panel?.eventLimit !== undefined
+            ? { eventLimit: panel.eventLimit }
+            : {}),
+    }), [timeline, errors, registry, panel?.eventLimit, panel?.pollMs]);
+    useEffect(() => {
+        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 === undefined);
+    const contextValue = useMemo(() => ({
+        timeline,
+        errors,
+        mountedForms,
+        viewModel,
+        visibility,
+        isPanelEnabled: panelEnabled,
+    }), [timeline, errors, mountedForms, viewModel, visibility, panelEnabled]);
+    return (_jsxs(WebMcpTroubleshootingContext.Provider, { value: contextValue, children: [children, shouldRenderPanel ? (_jsx(WebMcpTroubleshootingPanel, { position: panel?.position ?? 'br', ...(panel?.startCollapsed !== undefined
+                    ? { startCollapsed: panel.startCollapsed }
+                    : {}), ...(panel?.eventLimit !== undefined
+                    ? { eventLimit: panel.eventLimit }
+                    : {}), pollMs: panel?.pollMs ?? 2000 })) : null] }));
+}
+export function WebMcpTroubleshootingProvider({ children, actionProvider, querySummaries, trackFetchFailures = true, panel, tools = [], extraTools = [], ...providerProps }) {
+    const timeline = useMemo(() => new TroubleshootingTimelineBuffer(), []);
+    const errors = useMemo(() => new ClientErrorBuffer({ includeStacks: true }), []);
+    const mountedForms = useMemo(() => createMountedFormsRegistry(), []);
+    const registryRef = useRef(undefined);
+    const actionProviderRef = useRef(actionProvider);
+    const querySummariesRef = useRef(querySummaries);
+    actionProviderRef.current = actionProvider;
+    querySummariesRef.current = querySummaries;
+    useEffect(() => () => resetPanelVisibilityController(), []);
+    const panelEnabled = isPanelEnabledByDefault(panel?.enabled) ||
+        isPanelUrlOverrideEnabled(panel?.allowUrlOverride);
+    const liveActionProvider = useMemo(() => ({
+        getActionAvailability: (actionId) => actionProviderRef.current?.getActionAvailability(actionId),
+        listActions: () => actionProviderRef.current?.listActions?.() ?? [],
+    }), []);
+    const diagnosticTools = useMemo(() => [
+        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 (_jsx(WebMcpProvider, { ...providerProps, tools: diagnosticTools, children: _jsx(WebMcpTroubleshootingInner, { timeline: timeline, errors: errors, mountedForms: mountedForms, trackFetchFailures: trackFetchFailures, panelEnabled: panelEnabled, registryRef: registryRef, ...(actionProvider ? { actionProvider } : {}), ...(querySummaries ? { querySummaries } : {}), ...(panel ? { panel } : {}), children: children }) }));
+}

package/dist/declarative-form.d.ts

@@ -0,0 +1,23 @@
+import { type FormEventHandler, type InputHTMLAttributes, type ReactNode, type SelectHTMLAttributes, type TextareaHTMLAttributes, type FormHTMLAttributes } from 'react';
+export interface WebMcpFormProps extends FormHTMLAttributes<HTMLFormElement> {
+    toolName: string;
+    toolDescription: string;
+    toolAutoSubmit?: boolean;
+    children: ReactNode;
+}
+export declare function WebMcpForm({ toolName, toolDescription, toolAutoSubmit, children, ...props }: WebMcpFormProps): import("react").JSX.Element;
+export declare function WebMcpInput(props: InputHTMLAttributes<HTMLInputElement> & {
+    toolParamDescription?: string;
+}): import("react").JSX.Element;
+export declare function WebMcpSelect(props: SelectHTMLAttributes<HTMLSelectElement> & {
+    toolParamDescription?: string;
+}): import("react").JSX.Element;
+export declare function WebMcpTextarea(props: TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    toolParamDescription?: string;
+}): import("react").JSX.Element;
+export declare function useAgentInvokedSubmit(handler: FormEventHandler<HTMLFormElement>): FormEventHandler<HTMLFormElement>;
+export interface DeclarativeFormToolEventsOptions {
+    formSelector?: string;
+}
+export declare function useDeclarativeFormToolEvents(_options?: DeclarativeFormToolEventsOptions): void;
+//# sourceMappingURL=declarative-form.d.ts.map

package/dist/declarative-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"declarative-form.d.ts","sourceRoot":"","sources":["../src/declarative-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACxB,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,CAAC,eAAe,CAAC;IAC1E,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,eAAe,EACf,cAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BAWjB;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC7C,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,+BAWF;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC/C,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,+BAWF;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,GAAG;IACnD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,+BAWF;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,gBAAgB,CAAC,eAAe,CAAC,GACzC,gBAAgB,CAAC,eAAe,CAAC,CAOnC;AAED,MAAM,WAAW,gCAAgC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,4BAA4B,CAC1C,QAAQ,GAAE,gCAAqC,GAC9C,IAAI,CAEN"}

package/dist/declarative-form.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function WebMcpForm({ toolName, toolDescription, toolAutoSubmit, children, ...props }) {
+    return (_jsx("form", { ...props, toolname: toolName, tooldescription: toolDescription, ...(toolAutoSubmit ? { toolautosubmit: '' } : {}), children: children }));
+}
+export function WebMcpInput(props) {
+    const { toolParamDescription, ...rest } = props;
+    return (_jsx("input", { ...rest, ...(toolParamDescription
+            ? { toolparamdescription: toolParamDescription }
+            : {}) }));
+}
+export function WebMcpSelect(props) {
+    const { toolParamDescription, ...rest } = props;
+    return (_jsx("select", { ...rest, ...(toolParamDescription
+            ? { toolparamdescription: toolParamDescription }
+            : {}) }));
+}
+export function WebMcpTextarea(props) {
+    const { toolParamDescription, ...rest } = props;
+    return (_jsx("textarea", { ...rest, ...(toolParamDescription
+            ? { toolparamdescription: toolParamDescription }
+            : {}) }));
+}
+export function useAgentInvokedSubmit(handler) {
+    return (event) => {
+        const submitEvent = event.nativeEvent;
+        if (submitEvent.agentInvoked) {
+            handler(event);
+        }
+    };
+}
+export function useDeclarativeFormToolEvents(_options = {}) {
+    // Agent form submits are captured by createWebMcpLifecycleCollector().
+}