@tooluminati/angular-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/declarative-form.directives.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class WebMcpFormDirective {
+    readonly toolName: import("@angular/core").InputSignal<string>;
+    readonly toolDescription: import("@angular/core").InputSignal<string>;
+    readonly autoSubmit: import("@angular/core").InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WebMcpFormDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WebMcpFormDirective, "form[webMcpForm]", never, { "toolName": { "alias": "webMcpForm"; "required": true; "isSignal": true; }; "toolDescription": { "alias": "toolDescription"; "required": true; "isSignal": true; }; "autoSubmit": { "alias": "webMcpAutoSubmit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class WebMcpParamDescriptionDirective {
+    readonly webMcpParamDescription: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WebMcpParamDescriptionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WebMcpParamDescriptionDirective, "[webMcpParamDescription]", never, { "webMcpParamDescription": { "alias": "webMcpParamDescription"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=declarative-form.directives.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"declarative-form.directives.d.ts","sourceRoot":"","sources":["../src/declarative-form.directives.ts"],"names":[],"mappings":";AAEA,qBASa,mBAAmB;IAC9B,QAAQ,CAAC,QAAQ,8CAAmD;IACpE,QAAQ,CAAC,eAAe,8CAA4B;IACpD,QAAQ,CAAC,UAAU,+CAA+C;yCAHvD,mBAAmB;2CAAnB,mBAAmB;CAI/B;AAED,qBAOa,+BAA+B;IAC1C,QAAQ,CAAC,sBAAsB,8CAA4B;yCADhD,+BAA+B;2CAA/B,+BAA+B;CAE3C"}

package/dist/declarative-form.directives.js

@@ -0,0 +1,36 @@
+import { Directive, input } from '@angular/core';
+import * as i0 from "@angular/core";
+export class WebMcpFormDirective {
+    toolName = input.required(...(ngDevMode ? [{ debugName: "toolName", alias: 'webMcpForm' }] : [{ alias: 'webMcpForm' }]));
+    toolDescription = input.required(...(ngDevMode ? [{ debugName: "toolDescription" }] : []));
+    autoSubmit = input(false, ...(ngDevMode ? [{ debugName: "autoSubmit", alias: 'webMcpAutoSubmit' }] : [{ alias: 'webMcpAutoSubmit' }]));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: WebMcpFormDirective, isStandalone: true, selector: "form[webMcpForm]", inputs: { toolName: { classPropertyName: "toolName", publicName: "webMcpForm", isSignal: true, isRequired: true, transformFunction: null }, toolDescription: { classPropertyName: "toolDescription", publicName: "toolDescription", isSignal: true, isRequired: true, transformFunction: null }, autoSubmit: { classPropertyName: "autoSubmit", publicName: "webMcpAutoSubmit", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.toolname": "toolName()", "attr.tooldescription": "toolDescription()", "attr.toolautosubmit": "autoSubmit() ? \"\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpFormDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'form[webMcpForm]',
+                    standalone: true,
+                    host: {
+                        '[attr.toolname]': 'toolName()',
+                        '[attr.tooldescription]': 'toolDescription()',
+                        '[attr.toolautosubmit]': 'autoSubmit() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { toolName: [{ type: i0.Input, args: [{ isSignal: true, alias: "webMcpForm", required: true }] }], toolDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolDescription", required: true }] }], autoSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "webMcpAutoSubmit", required: false }] }] } });
+export class WebMcpParamDescriptionDirective {
+    webMcpParamDescription = input.required(...(ngDevMode ? [{ debugName: "webMcpParamDescription" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpParamDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: WebMcpParamDescriptionDirective, isStandalone: true, selector: "[webMcpParamDescription]", inputs: { webMcpParamDescription: { classPropertyName: "webMcpParamDescription", publicName: "webMcpParamDescription", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.toolparamdescription": "webMcpParamDescription()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpParamDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[webMcpParamDescription]',
+                    standalone: true,
+                    host: {
+                        '[attr.toolparamdescription]': 'webMcpParamDescription()',
+                    },
+                }]
+        }], propDecorators: { webMcpParamDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "webMcpParamDescription", required: true }] }] } });

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './provide-web-mcp-troubleshooting';
+export * from './troubleshooting-tokens';
+export * from './web-mcp-troubleshooting-panel.component';
+export * from './declarative-form.directives';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './provide-web-mcp-troubleshooting';
+export * from './troubleshooting-tokens';
+export * from './web-mcp-troubleshooting-panel.component';
+export * from './declarative-form.directives';

package/dist/provide-web-mcp-troubleshooting.d.ts

@@ -0,0 +1,30 @@
+import { EnvironmentProviders, ErrorHandler, type WritableSignal } from '@angular/core';
+import type { WebMcpToolDescriptor } from '@tooluminati/core';
+import { type ActionAvailabilityProvider, type QuerySummary, type TroubleshootingPanelSnapshot } from '@tooluminati/diagnostics';
+import * as i0 from "@angular/core";
+export interface WebMcpTroubleshootingPanelOptions {
+    enabled?: boolean | 'auto';
+    render?: boolean | 'auto' | boolean;
+    position?: 'br' | 'bl' | 'tr' | 'tl';
+    startCollapsed?: boolean;
+    pollMs?: number | null;
+    allowUrlOverride?: boolean;
+    eventLimit?: number;
+}
+export interface WebMcpTroubleshootingConfig {
+    enabled?: boolean;
+    actionProvider?: ActionAvailabilityProvider;
+    querySummaries?: () => QuerySummary[];
+    trackFetchFailures?: boolean;
+    panel?: WebMcpTroubleshootingPanelOptions;
+    extraTools?: WebMcpToolDescriptor[];
+}
+export declare class WebMcpTroubleshootingErrorHandler implements ErrorHandler {
+    private readonly services;
+    handleError(error: unknown): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WebMcpTroubleshootingErrorHandler, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WebMcpTroubleshootingErrorHandler>;
+}
+export declare function provideWebMcpTroubleshooting(config?: WebMcpTroubleshootingConfig): EnvironmentProviders;
+export declare function injectTroubleshootingPanel(): WritableSignal<TroubleshootingPanelSnapshot>;
+//# sourceMappingURL=provide-web-mcp-troubleshooting.d.ts.map

package/dist/provide-web-mcp-troubleshooting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provide-web-mcp-troubleshooting.d.ts","sourceRoot":"","sources":["../src/provide-web-mcp-troubleshooting.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,oBAAoB,EACpB,YAAY,EAOZ,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAkB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAsBL,KAAK,0BAA0B,EAC/B,KAAK,YAAY,EACjB,KAAK,4BAA4B,EAClC,MAAM,0BAA0B,CAAC;;AAUlC,MAAM,WAAW,iCAAiC;IAChD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IACpC,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,2BAA2B;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,UAAU,CAAC,EAAE,oBAAoB,EAAE,CAAC;CACrC;AA+BD,qBACa,iCAAkC,YAAW,YAAY;IACpE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAmC;IAE5D,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;yCAHtB,iCAAiC;6CAAjC,iCAAiC;CAa7C;AAED,wBAAgB,4BAA4B,CAC1C,MAAM,GAAE,2BAAgC,GACvC,oBAAoB,CAoItB;AAED,wBAAgB,0BAA0B,iDAEzC"}

package/dist/provide-web-mcp-troubleshooting.js

@@ -0,0 +1,159 @@
+import { ApplicationRef, createComponent, DestroyRef, EnvironmentInjector, ErrorHandler, inject, Injectable, isDevMode, makeEnvironmentProviders, provideEnvironmentInitializer, signal, } from '@angular/core';
+import { ClientErrorBuffer, TroubleshootingTimelineBuffer, createErrorCollector, createFetchFailureTracker, createActionAvailabilityTool, createListActionsTool, createMountedFormsRegistry, createMountedFormsSummaryTool, createRecentClientErrorsTool, createTimelineFromErrorBuffer, createTroubleshootingPanelViewModel, createTroubleshootingTimelineTool, createWebMcpEnvironmentSummary, createWebMcpEnvironmentTool, createWebMcpLifecycleCollector, createWorkflowBlockersTool, discoverDeclarativeForms, formSummaryFromMounted, isPanelEnabledByDefault, isPanelUrlOverrideEnabled, createTroubleshootingPanelVisibilityController, } from '@tooluminati/diagnostics';
+import { injectWebMcpRegistry, provideWebMcpRegistry } from '@tooluminati/angular';
+import { WEB_MCP_PANEL_VISIBILITY, WEB_MCP_TROUBLESHOOTING, wireAngularPanelVisibilityController, } from './troubleshooting-tokens';
+import { WebMcpTroubleshootingPanelComponent } from './web-mcp-troubleshooting-panel.component';
+import * as i0 from "@angular/core";
+function isAngularPanelEnabled(panel) {
+    if (panel?.enabled === true) {
+        return true;
+    }
+    if (panel?.enabled === false) {
+        return false;
+    }
+    return (isPanelEnabledByDefault(panel?.enabled) ||
+        isPanelUrlOverrideEnabled(panel?.allowUrlOverride) ||
+        (panel?.enabled === 'auto' || panel?.enabled === undefined) && isDevMode());
+}
+function shouldAutoRenderPanel(panel, panelEnabled) {
+    return (panelEnabled &&
+        panel?.render !== false &&
+        (panel?.render === true ||
+            panel?.render === 'auto' ||
+            panel?.render === undefined));
+}
+export class WebMcpTroubleshootingErrorHandler {
+    services = inject(WEB_MCP_TROUBLESHOOTING);
+    handleError(error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        this.services.errors.push({
+            message: err.message,
+            source: '@angular/core ErrorHandler',
+            timestamp: new Date().toISOString(),
+            ...(err.stack ? { stack: err.stack } : {}),
+        });
+        console.error(err);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpTroubleshootingErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpTroubleshootingErrorHandler });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpTroubleshootingErrorHandler, decorators: [{
+            type: Injectable
+        }] });
+export function provideWebMcpTroubleshooting(config = {}) {
+    const timeline = new TroubleshootingTimelineBuffer();
+    const errors = new ClientErrorBuffer({ includeStacks: true });
+    const mountedForms = createMountedFormsRegistry();
+    const visibility = createTroubleshootingPanelVisibilityController({
+        ...(config.panel?.startCollapsed !== undefined
+            ? { startCollapsed: config.panel.startCollapsed }
+            : {}),
+    });
+    wireAngularPanelVisibilityController(visibility);
+    const panelEnabled = isAngularPanelEnabled(config.panel);
+    const registryRef = { current: undefined };
+    const viewModel = createTroubleshootingPanelViewModel({
+        timeline,
+        errors,
+        environment: () => createWebMcpEnvironmentSummary({ registry: registryRef.current }),
+        ...(registryRef.current ? { registry: registryRef.current } : {}),
+    }, {
+        ...(config.panel?.eventLimit !== undefined
+            ? { eventLimit: config.panel.eventLimit }
+            : {}),
+        pollMs: config.panel?.pollMs ?? 2000,
+    });
+    const diagnosticTools = [
+        createTroubleshootingTimelineTool(timeline),
+        createWebMcpEnvironmentTool(() => createWebMcpEnvironmentSummary({ registry: registryRef.current })),
+        createRecentClientErrorsTool(errors),
+        createMountedFormsSummaryTool(mountedForms),
+        createWorkflowBlockersTool({
+            ...(config.actionProvider ? { actionProvider: config.actionProvider } : {}),
+            formSummaries: () => mountedForms.list().map(formSummaryFromMounted),
+            declarativeFormSummaries: () => discoverDeclarativeForms(),
+            recentErrors: () => errors.list(),
+            ...(config.querySummaries ? { querySummaries: config.querySummaries } : {}),
+        }),
+        ...(config.actionProvider
+            ? [
+                createActionAvailabilityTool(config.actionProvider),
+                createListActionsTool(config.actionProvider),
+            ]
+            : []),
+        ...(config.extraTools ?? []),
+    ];
+    const panelSnapshot = signal(viewModel.refresh(), ...(ngDevMode ? [{ debugName: "panelSnapshot" }] : []));
+    const services = {
+        timeline,
+        errors,
+        mountedForms,
+        viewModel,
+        visibility,
+        isPanelEnabled: panelEnabled,
+        panelOptions: config.panel ?? {},
+        panelSnapshot,
+    };
+    viewModel.subscribe(() => {
+        panelSnapshot.set(viewModel.refresh());
+    });
+    visibility.subscribe(() => {
+        panelSnapshot.set(viewModel.refresh());
+    });
+    const providers = [
+        provideWebMcpRegistry({
+            ...(config.enabled !== undefined ? { enabled: config.enabled } : {}),
+            tools: diagnosticTools,
+        }),
+        { provide: WEB_MCP_TROUBLESHOOTING, useValue: services },
+        { provide: WEB_MCP_PANEL_VISIBILITY, useValue: visibility },
+        { provide: ErrorHandler, useClass: WebMcpTroubleshootingErrorHandler },
+        provideEnvironmentInitializer(() => {
+            registryRef.current = injectWebMcpRegistry();
+            const destroyRef = inject(DestroyRef);
+            const cleanups = [
+                createErrorCollector({ buffer: errors }),
+                createTimelineFromErrorBuffer(errors, timeline),
+                createWebMcpLifecycleCollector({ buffer: timeline }),
+            ];
+            if (config.trackFetchFailures !== false) {
+                cleanups.push(createFetchFailureTracker({ buffer: timeline }));
+            }
+            destroyRef.onDestroy(() => {
+                for (const cleanup of cleanups) {
+                    cleanup();
+                }
+                viewModel.dispose();
+            });
+        }),
+    ];
+    if (shouldAutoRenderPanel(config.panel, panelEnabled)) {
+        providers.push(provideEnvironmentInitializer(() => {
+            const appRef = inject(ApplicationRef);
+            const envInjector = inject(EnvironmentInjector);
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const compRef = createComponent(WebMcpTroubleshootingPanelComponent, {
+                environmentInjector: envInjector,
+                hostElement: host,
+            });
+            compRef.setInput('startCollapsed', config.panel?.startCollapsed ?? false);
+            if (config.panel?.eventLimit !== undefined) {
+                compRef.setInput('eventLimit', config.panel.eventLimit);
+            }
+            if (config.panel?.position) {
+                compRef.setInput('position', config.panel.position);
+            }
+            appRef.attachView(compRef.hostView);
+            inject(DestroyRef).onDestroy(() => {
+                appRef.detachView(compRef.hostView);
+                compRef.destroy();
+                host.remove();
+            });
+        }));
+    }
+    return makeEnvironmentProviders(providers);
+}
+export function injectTroubleshootingPanel() {
+    return inject(WEB_MCP_TROUBLESHOOTING).panelSnapshot;
+}

package/dist/troubleshooting-tokens.d.ts

@@ -0,0 +1,23 @@
+import { InjectionToken, type Provider } from '@angular/core';
+import { type ClientErrorBuffer, type MountedFormsRegistry, type TroubleshootingPanelViewModel, type TroubleshootingPanelVisibilityController, type TroubleshootingTimelineBuffer } from '@tooluminati/diagnostics';
+import type { WebMcpTroubleshootingPanelOptions } from './provide-web-mcp-troubleshooting';
+import type { WritableSignal } from '@angular/core';
+import type { TroubleshootingPanelSnapshot } from '@tooluminati/diagnostics';
+export interface WebMcpTroubleshootingServices {
+    timeline: TroubleshootingTimelineBuffer;
+    errors: ClientErrorBuffer;
+    mountedForms: MountedFormsRegistry;
+    viewModel: TroubleshootingPanelViewModel;
+    visibility: TroubleshootingPanelVisibilityController;
+    isPanelEnabled: boolean;
+    panelOptions: WebMcpTroubleshootingPanelOptions;
+    panelSnapshot: WritableSignal<TroubleshootingPanelSnapshot>;
+}
+export declare const WEB_MCP_TROUBLESHOOTING: InjectionToken<WebMcpTroubleshootingServices>;
+export declare const WEB_MCP_PANEL_VISIBILITY: InjectionToken<TroubleshootingPanelVisibilityController>;
+export declare function wireAngularPanelVisibilityController(controller: TroubleshootingPanelVisibilityController): void;
+export declare function webMcpShowTroubleshootingPanel(): void;
+export declare function webMcpHideTroubleshootingPanel(): void;
+export declare function webMcpToggleTroubleshootingPanel(): void;
+export declare function provideWebMcpTroubleshootingPanel(): Provider[];
+//# sourceMappingURL=troubleshooting-tokens.d.ts.map

package/dist/troubleshooting-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"troubleshooting-tokens.d.ts","sourceRoot":"","sources":["../src/troubleshooting-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,6BAA6B,EAClC,KAAK,wCAAwC,EAC7C,KAAK,6BAA6B,EACnC,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;AAE3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAE7E,MAAM,WAAW,6BAA6B;IAC5C,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;IACxB,YAAY,EAAE,iCAAiC,CAAC;IAChD,aAAa,EAAE,cAAc,CAAC,4BAA4B,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,uBAAuB,+CAGjC,CAAC;AAEJ,eAAO,MAAM,wBAAwB,0DAGlC,CAAC;AAIJ,wBAAgB,oCAAoC,CAClD,UAAU,EAAE,wCAAwC,GACnD,IAAI,CAEN;AASD,wBAAgB,8BAA8B,IAAI,IAAI,CAErD;AAED,wBAAgB,8BAA8B,IAAI,IAAI,CAErD;AAED,wBAAgB,gCAAgC,IAAI,IAAI,CAEvD;AAED,wBAAgB,iCAAiC,IAAI,QAAQ,EAAE,CAE9D"}

package/dist/troubleshooting-tokens.js

@@ -0,0 +1,27 @@
+import { InjectionToken } from '@angular/core';
+import { createTroubleshootingPanelVisibilityController, } from '@tooluminati/diagnostics';
+import { WebMcpTroubleshootingPanelComponent } from './web-mcp-troubleshooting-panel.component';
+export const WEB_MCP_TROUBLESHOOTING = new InjectionToken('WEB_MCP_TROUBLESHOOTING');
+export const WEB_MCP_PANEL_VISIBILITY = new InjectionToken('WEB_MCP_PANEL_VISIBILITY');
+let panelVisibilityController;
+export function wireAngularPanelVisibilityController(controller) {
+    panelVisibilityController = controller;
+}
+function getAngularPanelVisibilityController() {
+    if (!panelVisibilityController) {
+        panelVisibilityController = createTroubleshootingPanelVisibilityController();
+    }
+    return panelVisibilityController;
+}
+export function webMcpShowTroubleshootingPanel() {
+    getAngularPanelVisibilityController().show();
+}
+export function webMcpHideTroubleshootingPanel() {
+    getAngularPanelVisibilityController().hide();
+}
+export function webMcpToggleTroubleshootingPanel() {
+    getAngularPanelVisibilityController().toggle();
+}
+export function provideWebMcpTroubleshootingPanel() {
+    return [WebMcpTroubleshootingPanelComponent];
+}

package/dist/web-mcp-troubleshooting-panel.component.d.ts

@@ -0,0 +1,23 @@
+import { type OnDestroy, type OnInit } from '@angular/core';
+import { type TimelineFilterGroup, type TroubleshootingPanelSnapshot } from '@tooluminati/diagnostics';
+import * as i0 from "@angular/core";
+export declare class WebMcpTroubleshootingPanelComponent implements OnInit, OnDestroy {
+    readonly services: import("./troubleshooting-tokens").WebMcpTroubleshootingServices;
+    private readonly cdr;
+    readonly position: import("@angular/core").InputSignal<"br" | "bl" | "tr" | "tl">;
+    readonly startCollapsed: import("@angular/core").InputSignal<boolean>;
+    readonly eventLimit: import("@angular/core").InputSignal<number>;
+    readonly filter: import("@angular/core").WritableSignal<TimelineFilterGroup>;
+    readonly chips: readonly ["all", "failures", "blocked", "tools", "nav"];
+    private unsubVm?;
+    private unsubVis?;
+    readonly snapshot: import("@angular/core").WritableSignal<TroubleshootingPanelSnapshot>;
+    readonly filteredEvents: import("@angular/core").Signal<import("@tooluminati/diagnostics").TroubleshootingPanelEventView[]>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    refresh(): void;
+    copy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WebMcpTroubleshootingPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WebMcpTroubleshootingPanelComponent, "webmcp-troubleshooting-panel", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "startCollapsed": { "alias": "startCollapsed"; "required": false; "isSignal": true; }; "eventLimit": { "alias": "eventLimit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+//# sourceMappingURL=web-mcp-troubleshooting-panel.component.d.ts.map

package/dist/web-mcp-troubleshooting-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-mcp-troubleshooting-panel.component.d.ts","sourceRoot":"","sources":["../src/web-mcp-troubleshooting-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,MAAM,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,4BAA4B,EAClC,MAAM,0BAA0B,CAAC;;AAGlC,qBAwGa,mCAAoC,YAAW,MAAM,EAAE,SAAS;IAC3E,QAAQ,CAAC,QAAQ,mEAAmC;IACpD,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA6B;IACjD,QAAQ,CAAC,QAAQ,iEAA0C;IAC3D,QAAQ,CAAC,cAAc,+CAAgB;IACvC,QAAQ,CAAC,UAAU,8CAAa;IAChC,QAAQ,CAAC,MAAM,8DAAsC;IACrD,QAAQ,CAAC,KAAK,0DAA2D;IACzE,OAAO,CAAC,OAAO,CAAC,CAAa;IAC7B,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,QAAQ,CAAC,QAAQ,uEAEf;IACF,QAAQ,CAAC,cAAc,qGAErB;IAEF,QAAQ,IAAI,IAAI;IAahB,WAAW,IAAI,IAAI;IAKnB,OAAO,IAAI,IAAI;IAIf,IAAI,IAAI,IAAI;yCAvCD,mCAAmC;2CAAnC,mCAAmC;CA2C/C"}

package/dist/web-mcp-troubleshooting-panel.component.js

@@ -0,0 +1,173 @@
+import { ChangeDetectorRef, Component, computed, inject, input, signal, } from '@angular/core';
+import { filterPanelEvents, serializeTroubleshootingDiagnostics, } from '@tooluminati/diagnostics';
+import { WEB_MCP_TROUBLESHOOTING } from './troubleshooting-tokens';
+import * as i0 from "@angular/core";
+export class WebMcpTroubleshootingPanelComponent {
+    services = inject(WEB_MCP_TROUBLESHOOTING);
+    cdr = inject(ChangeDetectorRef);
+    position = input('br', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    startCollapsed = input(false, ...(ngDevMode ? [{ debugName: "startCollapsed" }] : []));
+    eventLimit = input(20, ...(ngDevMode ? [{ debugName: "eventLimit" }] : []));
+    filter = signal('all', ...(ngDevMode ? [{ debugName: "filter" }] : []));
+    chips = ['all', 'failures', 'blocked', 'tools', 'nav'];
+    unsubVm;
+    unsubVis;
+    snapshot = signal(this.services.viewModel.refresh(), ...(ngDevMode ? [{ debugName: "snapshot" }] : []));
+    filteredEvents = computed(() => filterPanelEvents(this.snapshot().events, this.filter()), ...(ngDevMode ? [{ debugName: "filteredEvents" }] : []));
+    ngOnInit() {
+        if (this.startCollapsed()) {
+            this.services.visibility.setCollapsed(true);
+        }
+        this.unsubVm = this.services.viewModel.subscribe(() => {
+            this.snapshot.set(this.services.viewModel.refresh());
+            this.cdr.markForCheck();
+        });
+        this.unsubVis = this.services.visibility.subscribe(() => {
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.unsubVm?.();
+        this.unsubVis?.();
+    }
+    refresh() {
+        this.snapshot.set(this.services.viewModel.refresh());
+    }
+    copy() {
+        const json = serializeTroubleshootingDiagnostics(this.snapshot());
+        void navigator.clipboard?.writeText(json);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpTroubleshootingPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WebMcpTroubleshootingPanelComponent, isStandalone: true, selector: "webmcp-troubleshooting-panel", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null }, eventLimit: { classPropertyName: "eventLimit", publicName: "eventLimit", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "\"fixed\"", "style.z-index": "\"99990\"", "style.right.px": "position() === \"br\" || position() === \"tr\" ? 26 : null", "style.left.px": "position() === \"bl\" || position() === \"tl\" ? 26 : null", "style.bottom.px": "position() === \"br\" || position() === \"bl\" ? 26 : null", "style.top.px": "position() === \"tr\" || position() === \"tl\" ? 26 : null" } }, ngImport: i0, template: `
+    @if (services.isPanelEnabled && services.visibility.visible) {
+      @if (services.visibility.collapsed) {
+        <button
+          type="button"
+          class="tlm-badge"
+          data-testid="webmcp-troubleshooting-badge"
+          (click)="services.visibility.setCollapsed(false)"
+        >
+          WebMCP · {{ snapshot().toolCount }} tools
+        </button>
+      } @else {
+        <section
+          class="tlm-panel"
+          data-testid="webmcp-troubleshooting-panel"
+          [attr.data-state]="snapshot().panelState"
+        >
+          <header class="tlm-header">
+            <strong>WebMCP Troubleshooting</strong>
+            <button type="button" (click)="refresh()">Refresh</button>
+            <button type="button" (click)="copy()">Copy JSON</button>
+            <button type="button" (click)="services.visibility.setCollapsed(true)">–</button>
+          </header>
+          <div class="tlm-stats">
+            <span>{{ snapshot().supported ? 'Supported' : 'Unsupported' }}</span>
+            <span>{{ snapshot().toolCount }} tools</span>
+            <span>{{ snapshot().issueCount }} issues</span>
+          </div>
+          @if (snapshot().warnings.length) {
+            <div class="tlm-section">
+              <h3>Warnings</h3>
+              @for (warning of snapshot().warnings; track warning) {
+                <div class="tlm-row">{{ warning }}</div>
+              }
+            </div>
+          }
+          <div class="tlm-section">
+            <h3>Environment</h3>
+            @for (check of snapshot().checks; track check.id) {
+              <div class="tlm-row">{{ check.label }} · {{ check.value }}</div>
+            }
+          </div>
+          <div class="tlm-section">
+            <h3>Timeline</h3>
+            @for (chip of chips; track chip) {
+              <button type="button" (click)="filter.set(chip)">{{ chip }}</button>
+            }
+            @for (event of filteredEvents(); track event.id) {
+              <div class="tlm-row">{{ event.title }} · {{ event.time }}</div>
+            }
+          </div>
+          <div class="tlm-section">
+            <h3>Client Errors</h3>
+            @for (error of snapshot().errors; track error.id) {
+              <div class="tlm-row">{{ error.message }}</div>
+            }
+          </div>
+        </section>
+      }
+    }
+  `, isInline: true, styles: ["\n      .tlm-badge,\n      .tlm-panel {\n        font-family: 'IBM Plex Sans', system-ui, sans-serif;\n      }\n      .tlm-panel {\n        width: 412px;\n        max-height: calc(100vh - 52px);\n        overflow: auto;\n        background: #0a0e1a;\n        color: #eef2fa;\n        border: 1px solid #1c2438;\n        border-radius: 15px;\n        padding: 12px;\n      }\n      .tlm-header {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n      .tlm-stats,\n      .tlm-section {\n        margin-top: 10px;\n      }\n      .tlm-row {\n        font-size: 12px;\n        padding: 4px 0;\n      }\n    "] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WebMcpTroubleshootingPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'webmcp-troubleshooting-panel', standalone: true, host: {
+                        '[style.position]': '"fixed"',
+                        '[style.z-index]': '"99990"',
+                        '[style.right.px]': 'position() === "br" || position() === "tr" ? 26 : null',
+                        '[style.left.px]': 'position() === "bl" || position() === "tl" ? 26 : null',
+                        '[style.bottom.px]': 'position() === "br" || position() === "bl" ? 26 : null',
+                        '[style.top.px]': 'position() === "tr" || position() === "tl" ? 26 : null',
+                    }, template: `
+    @if (services.isPanelEnabled && services.visibility.visible) {
+      @if (services.visibility.collapsed) {
+        <button
+          type="button"
+          class="tlm-badge"
+          data-testid="webmcp-troubleshooting-badge"
+          (click)="services.visibility.setCollapsed(false)"
+        >
+          WebMCP · {{ snapshot().toolCount }} tools
+        </button>
+      } @else {
+        <section
+          class="tlm-panel"
+          data-testid="webmcp-troubleshooting-panel"
+          [attr.data-state]="snapshot().panelState"
+        >
+          <header class="tlm-header">
+            <strong>WebMCP Troubleshooting</strong>
+            <button type="button" (click)="refresh()">Refresh</button>
+            <button type="button" (click)="copy()">Copy JSON</button>
+            <button type="button" (click)="services.visibility.setCollapsed(true)">–</button>
+          </header>
+          <div class="tlm-stats">
+            <span>{{ snapshot().supported ? 'Supported' : 'Unsupported' }}</span>
+            <span>{{ snapshot().toolCount }} tools</span>
+            <span>{{ snapshot().issueCount }} issues</span>
+          </div>
+          @if (snapshot().warnings.length) {
+            <div class="tlm-section">
+              <h3>Warnings</h3>
+              @for (warning of snapshot().warnings; track warning) {
+                <div class="tlm-row">{{ warning }}</div>
+              }
+            </div>
+          }
+          <div class="tlm-section">
+            <h3>Environment</h3>
+            @for (check of snapshot().checks; track check.id) {
+              <div class="tlm-row">{{ check.label }} · {{ check.value }}</div>
+            }
+          </div>
+          <div class="tlm-section">
+            <h3>Timeline</h3>
+            @for (chip of chips; track chip) {
+              <button type="button" (click)="filter.set(chip)">{{ chip }}</button>
+            }
+            @for (event of filteredEvents(); track event.id) {
+              <div class="tlm-row">{{ event.title }} · {{ event.time }}</div>
+            }
+          </div>
+          <div class="tlm-section">
+            <h3>Client Errors</h3>
+            @for (error of snapshot().errors; track error.id) {
+              <div class="tlm-row">{{ error.message }}</div>
+            }
+          </div>
+        </section>
+      }
+    }
+  `, styles: ["\n      .tlm-badge,\n      .tlm-panel {\n        font-family: 'IBM Plex Sans', system-ui, sans-serif;\n      }\n      .tlm-panel {\n        width: 412px;\n        max-height: calc(100vh - 52px);\n        overflow: auto;\n        background: #0a0e1a;\n        color: #eef2fa;\n        border: 1px solid #1c2438;\n        border-radius: 15px;\n        padding: 12px;\n      }\n      .tlm-header {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n      .tlm-stats,\n      .tlm-section {\n        margin-top: 10px;\n      }\n      .tlm-row {\n        font-size: 12px;\n        padding: 4px 0;\n      }\n    "] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }], eventLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventLimit", required: false }] }] } });

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@tooluminati/angular-troubleshooting",
+  "version": "0.1.0",
+  "description": "Angular troubleshooting bundle with timeline, blockers, and dev panel.",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.8.0",
+    "@tooluminati/forms": "0.1.0",
+    "@tooluminati/diagnostics": "0.1.0",
+    "@tooluminati/angular": "0.1.0",
+    "@tooluminati/policies": "0.1.0",
+    "@tooluminati/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "tooluminati",
+    "webmcp",
+    "angular",
+    "troubleshooting",
+    "diagnostics"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jitterbox/Tooluminati.git",
+    "directory": "packages/angular-troubleshooting"
+  },
+  "bugs": {
+    "url": "https://github.com/jitterbox/Tooluminati/issues"
+  },
+  "homepage": "https://github.com/jitterbox/Tooluminati#readme",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "ngc -p tsconfig.build.json",
+    "typecheck": "ngc -p tsconfig.json --noEmit"
+  }
+}