@frontmcp/plugin-dashboard 0.0.1 → 0.7.1

package/app/dashboard.app.d.ts

@@ -0,0 +1,45 @@
+import { DynamicPlugin, ProviderType } from '@frontmcp/sdk';
+import { DashboardPluginOptions, DashboardPluginOptionsInput } from '../dashboard.types';
+/**
+ * Internal Dashboard HTTP Plugin.
+ *
+ * Handles HTTP requests for serving the dashboard HTML.
+ * The SSE transport and MCP protocol are handled by FrontMCP's built-in transport layer.
+ */
+declare class DashboardHttpPlugin extends DynamicPlugin<DashboardPluginOptions, DashboardPluginOptionsInput> {
+    options: DashboardPluginOptions;
+    constructor(options?: DashboardPluginOptionsInput);
+    /**
+     * Provide the dashboard config and middleware registration via DI.
+     */
+    static dynamicProviders(options: DashboardPluginOptionsInput): ProviderType[];
+}
+/**
+ * FrontMCP Dashboard App.
+ *
+ * A dashboard application that provides:
+ * - Server structure visualization via MCP tools
+ * - Real-time event streaming via SSE (built into FrontMCP)
+ * - Access to server scope for monitoring
+ *
+ * The dashboard UI is loaded from CDN (esm.sh by default) and connects
+ * to the dashboard via MCP protocol over SSE transport.
+ *
+ * @example
+ * ```typescript
+ * import { DashboardApp } from '@frontmcp/plugins';
+ *
+ * @FrontMCP({
+ *   name: 'my-server',
+ *   apps: [DashboardApp],
+ * })
+ * class MyServer {}
+ * ```
+ *
+ * Then access the dashboard at `http://localhost:3000/dashboard`
+ * The dashboard connects via SSE at the standard `/sse` endpoint.
+ */
+export declare class DashboardApp {
+}
+export { DashboardHttpPlugin };
+//# sourceMappingURL=dashboard.app.d.ts.map

package/app/dashboard.app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.app.d.ts","sourceRoot":"","sources":["../../src/app/dashboard.app.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,aAAa,EAMb,YAAY,EAGb,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,sBAAsB,EACtB,2BAA2B,EAI5B,MAAM,oBAAoB,CAAC;AAmD5B;;;;;GAKG;AACH,cAIM,mBAAoB,SAAQ,aAAa,CAAC,sBAAsB,EAAE,2BAA2B,CAAC;IAClG,OAAO,EAAE,sBAAsB,CAAC;gBAEpB,OAAO,GAAE,2BAAgC;IAQrD;;OAEG;WACa,gBAAgB,CAAC,OAAO,EAAE,2BAA2B,GAAG,YAAY,EAAE;CAyBvF;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAgCa,YAAY;CAAG;AAG5B,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/app/index.d.ts

@@ -0,0 +1,2 @@
+export { DashboardApp, DashboardHttpPlugin } from './dashboard.app';
+//# sourceMappingURL=index.d.ts.map

package/app/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC"}

package/dashboard.plugin.d.ts

@@ -0,0 +1,65 @@
+import { DynamicPlugin, ProviderType } from '@frontmcp/sdk';
+import { DashboardPluginOptions, DashboardPluginOptionsInput } from './dashboard.types';
+/**
+ * FrontMCP Dashboard Plugin.
+ *
+ * Adds a visual dashboard to your FrontMCP server for:
+ * - Viewing server structure (tools, resources, prompts, apps)
+ * - Real-time monitoring via MCP protocol
+ * - Graph-based visualization of your MCP architecture
+ *
+ * The dashboard UI is loaded from CDN (esm.sh by default) and connects
+ * to the dashboard via MCP protocol over SSE transport.
+ *
+ * @example Basic usage
+ * ```typescript
+ * import { DashboardPlugin } from '@frontmcp/plugins';
+ *
+ * @FrontMCP({
+ *   name: 'my-server',
+ *   plugins: [new DashboardPlugin()],
+ * })
+ * class MyServer {}
+ * ```
+ *
+ * @example With authentication
+ * ```typescript
+ * @FrontMCP({
+ *   name: 'my-server',
+ *   plugins: [
+ *     new DashboardPlugin({
+ *       auth: { enabled: true, token: 'my-secret-token' },
+ *     }),
+ *   ],
+ * })
+ * class MyServer {}
+ *
+ * // Access: http://localhost:3000/dashboard?token=my-secret-token
+ * ```
+ *
+ * @example With custom CDN entrypoint
+ * ```typescript
+ * @FrontMCP({
+ *   name: 'my-server',
+ *   plugins: [
+ *     new DashboardPlugin({
+ *       cdn: {
+ *         entrypoint: 'https://cdn.example.com/dashboard-ui@1.0.0/index.js',
+ *       },
+ *     }),
+ *   ],
+ * })
+ * class MyServer {}
+ * ```
+ */
+export default class DashboardPlugin extends DynamicPlugin<DashboardPluginOptions, DashboardPluginOptionsInput> {
+    options: DashboardPluginOptions;
+    constructor(options?: DashboardPluginOptionsInput);
+    /**
+     * Dynamic providers allow configuration of the dashboard with custom options.
+     * This injects the parsed options into the DI container so all dashboard
+     * components can access the configuration.
+     */
+    static dynamicProviders(options: DashboardPluginOptionsInput): ProviderType[];
+}
+//# sourceMappingURL=dashboard.plugin.d.ts.map

package/dashboard.plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.plugin.d.ts","sourceRoot":"","sources":["../src/dashboard.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EACL,sBAAsB,EACtB,2BAA2B,EAG5B,MAAM,mBAAmB,CAAC;AAG3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAMH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,aAAa,CAAC,sBAAsB,EAAE,2BAA2B,CAAC;IAC7G,OAAO,EAAE,sBAAsB,CAAC;gBAEpB,OAAO,GAAE,2BAAgC;IASrD;;;;OAIG;WACa,gBAAgB,CAAC,OAAO,EAAE,2BAA2B,GAAG,YAAY,EAAE;CAevF"}

package/dashboard.symbol.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dependency injection tokens for dashboard plugin.
+ */
+/** Token for dashboard configuration */
+export declare const DashboardConfigToken: unique symbol;
+/** Token for graph data provider */
+export declare const GraphDataProviderToken: unique symbol;
+/** Token for parent scope reference */
+export declare const ParentScopeToken: unique symbol;
+//# sourceMappingURL=dashboard.symbol.d.ts.map

package/dashboard.symbol.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.symbol.d.ts","sourceRoot":"","sources":["../src/dashboard.symbol.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,wCAAwC;AACxC,eAAO,MAAM,oBAAoB,eAA4B,CAAC;AAE9D,oCAAoC;AACpC,eAAO,MAAM,sBAAsB,eAA8B,CAAC;AAElE,uCAAuC;AACvC,eAAO,MAAM,gBAAgB,eAAwB,CAAC"}

package/dashboard.types.d.ts

@@ -0,0 +1,85 @@
+import { z } from 'zod';
+/**
+ * CDN configuration for loading dashboard UI from external sources.
+ */
+export declare const cdnConfigSchema: z.ZodObject<{
+    entrypoint: z.ZodOptional<z.ZodString>;
+    react: z.ZodDefault<z.ZodString>;
+    reactDom: z.ZodDefault<z.ZodString>;
+    reactDomClient: z.ZodDefault<z.ZodString>;
+    reactJsxRuntime: z.ZodDefault<z.ZodString>;
+    reactRouter: z.ZodDefault<z.ZodString>;
+    xyflow: z.ZodDefault<z.ZodString>;
+    dagre: z.ZodDefault<z.ZodString>;
+    xyflowCss: z.ZodDefault<z.ZodString>;
+}, z.core.$strip>;
+/** CDN config type */
+export type CdnConfig = z.output<typeof cdnConfigSchema>;
+/**
+ * Authentication configuration for dashboard access.
+ */
+export declare const dashboardAuthSchema: z.ZodObject<{
+    enabled: z.ZodDefault<z.ZodBoolean>;
+    token: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+/** Dashboard auth type */
+export type DashboardAuth = z.output<typeof dashboardAuthSchema>;
+/**
+ * Dashboard plugin options schema.
+ */
+export declare const dashboardPluginOptionsSchema: z.ZodObject<{
+    enabled: z.ZodOptional<z.ZodBoolean>;
+    basePath: z.ZodDefault<z.ZodString>;
+    auth: z.ZodPipe<z.ZodOptional<z.ZodObject<{
+        enabled: z.ZodDefault<z.ZodBoolean>;
+        token: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>, z.ZodTransform<{
+        enabled: boolean;
+        token?: string | undefined;
+    }, {
+        enabled: boolean;
+        token?: string | undefined;
+    } | undefined>>;
+    cdn: z.ZodPipe<z.ZodOptional<z.ZodObject<{
+        entrypoint: z.ZodOptional<z.ZodString>;
+        react: z.ZodDefault<z.ZodString>;
+        reactDom: z.ZodDefault<z.ZodString>;
+        reactDomClient: z.ZodDefault<z.ZodString>;
+        reactJsxRuntime: z.ZodDefault<z.ZodString>;
+        reactRouter: z.ZodDefault<z.ZodString>;
+        xyflow: z.ZodDefault<z.ZodString>;
+        dagre: z.ZodDefault<z.ZodString>;
+        xyflowCss: z.ZodDefault<z.ZodString>;
+    }, z.core.$strip>>, z.ZodTransform<{
+        react: string;
+        reactDom: string;
+        reactDomClient: string;
+        reactJsxRuntime: string;
+        reactRouter: string;
+        xyflow: string;
+        dagre: string;
+        xyflowCss: string;
+        entrypoint?: string | undefined;
+    }, {
+        react: string;
+        reactDom: string;
+        reactDomClient: string;
+        reactJsxRuntime: string;
+        reactRouter: string;
+        xyflow: string;
+        dagre: string;
+        xyflowCss: string;
+        entrypoint?: string | undefined;
+    } | undefined>>;
+}, z.core.$strip>;
+/** Dashboard plugin options (parsed/validated) */
+export type DashboardPluginOptions = z.output<typeof dashboardPluginOptionsSchema>;
+/** Dashboard plugin options input (before validation) */
+export type DashboardPluginOptionsInput = z.input<typeof dashboardPluginOptionsSchema>;
+/** Default dashboard plugin options */
+export declare const defaultDashboardPluginOptions: DashboardPluginOptionsInput;
+/**
+ * Check if dashboard is enabled based on options and environment.
+ */
+export declare function isDashboardEnabled(options: DashboardPluginOptions): boolean;
+//# sourceMappingURL=dashboard.types.d.ts.map

package/dashboard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.types.d.ts","sourceRoot":"","sources":["../src/dashboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;iBAmB1B,CAAC;AAEH,sBAAsB;AACtB,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;iBAK9B,CAAC;AAEH,0BAA0B;AAC1B,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEjE;;GAEG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBASvC,CAAC;AAEH,kDAAkD;AAClD,MAAM,MAAM,sBAAsB,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAEnF,yDAAyD;AACzD,MAAM,MAAM,2BAA2B,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAEvF,uCAAuC;AACvC,eAAO,MAAM,6BAA6B,EAAE,2BAI3C,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAM3E"}