@frontmcp/plugin-dashboard 0.0.1 → 0.7.0

package/esm/index.mjs

@@ -0,0 +1,1281 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// plugins/plugin-dashboard/src/dashboard.plugin.ts
+import { DynamicPlugin, Plugin } from "@frontmcp/sdk";
+
+// plugins/plugin-dashboard/src/dashboard.types.ts
+import { z } from "zod";
+var cdnConfigSchema = z.object({
+  /** Base URL for the dashboard UI bundle (e.g., https://esm.sh/@frontmcp/dashboard-ui@1.0.0) */
+  entrypoint: z.string().optional(),
+  /** React CDN URL */
+  react: z.string().default("https://esm.sh/react@19"),
+  /** React DOM CDN URL */
+  reactDom: z.string().default("https://esm.sh/react-dom@19"),
+  /** React DOM client CDN URL */
+  reactDomClient: z.string().default("https://esm.sh/react-dom@19/client"),
+  /** React JSX runtime CDN URL */
+  reactJsxRuntime: z.string().default("https://esm.sh/react@19/jsx-runtime"),
+  /** React Router CDN URL */
+  reactRouter: z.string().default("https://esm.sh/react-router-dom@7"),
+  /** XYFlow (React Flow) CDN URL */
+  xyflow: z.string().default("https://esm.sh/@xyflow/react@12?external=react,react-dom"),
+  /** Dagre layout library CDN URL */
+  dagre: z.string().default("https://esm.sh/dagre@0.8.5"),
+  /** XYFlow CSS URL */
+  xyflowCss: z.string().default("https://esm.sh/@xyflow/react@12/dist/style.css")
+});
+var dashboardAuthSchema = z.object({
+  /** Enable authentication (default: false) */
+  enabled: z.boolean().default(false),
+  /** Secret token for query param authentication (?token=xxx) */
+  token: z.string().optional()
+});
+var dashboardPluginOptionsSchema = z.object({
+  /** Enable/disable dashboard (undefined = auto: enabled in dev, disabled in prod) */
+  enabled: z.boolean().optional(),
+  /** Base path for dashboard routes (default: /dashboard) */
+  basePath: z.string().default("/dashboard"),
+  /** Authentication configuration */
+  auth: dashboardAuthSchema.optional().transform((v) => dashboardAuthSchema.parse(v ?? {})),
+  /** CDN configuration for UI loading */
+  cdn: cdnConfigSchema.optional().transform((v) => cdnConfigSchema.parse(v ?? {}))
+});
+var defaultDashboardPluginOptions = {
+  basePath: "/dashboard",
+  auth: { enabled: false },
+  cdn: {}
+};
+function isDashboardEnabled(options) {
+  if (options.enabled !== void 0) {
+    return options.enabled;
+  }
+  return process.env["NODE_ENV"] !== "production";
+}
+
+// plugins/plugin-dashboard/src/dashboard.symbol.ts
+var DashboardConfigToken = /* @__PURE__ */ Symbol("DashboardConfig");
+var GraphDataProviderToken = /* @__PURE__ */ Symbol("GraphDataProvider");
+var ParentScopeToken = /* @__PURE__ */ Symbol("ParentScope");
+
+// plugins/plugin-dashboard/src/dashboard.plugin.ts
+var DashboardPlugin = class extends DynamicPlugin {
+  options;
+  constructor(options = {}) {
+    super();
+    this.options = dashboardPluginOptionsSchema.parse({
+      ...defaultDashboardPluginOptions,
+      ...options
+    });
+  }
+  /**
+   * 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) {
+    const parsedOptions = dashboardPluginOptionsSchema.parse({
+      ...defaultDashboardPluginOptions,
+      ...options
+    });
+    return [
+      {
+        name: "dashboard:config",
+        provide: DashboardConfigToken,
+        useValue: parsedOptions
+      }
+    ];
+  }
+};
+DashboardPlugin = __decorateClass([
+  Plugin({
+    name: "dashboard",
+    description: "Visual dashboard for FrontMCP server monitoring and visualization",
+    providers: []
+  })
+], DashboardPlugin);
+
+// plugins/plugin-dashboard/src/app/dashboard.app.ts
+import {
+  App,
+  Plugin as Plugin2,
+  DynamicPlugin as DynamicPlugin2,
+  ScopeEntry as ScopeEntry4,
+  FrontMcpConfig,
+  FrontMcpServer
+} from "@frontmcp/sdk";
+
+// plugins/plugin-dashboard/src/providers/graph-data.provider.ts
+import { Provider } from "@frontmcp/sdk";
+var GraphDataProvider = class {
+  constructor(scope, serverName, serverVersion) {
+    this.scope = scope;
+    this.serverName = serverName;
+    this.serverVersion = serverVersion;
+  }
+  /** Cached graph data to avoid re-extraction on every request */
+  cachedData = null;
+  /** Timestamp of when the cache was last updated */
+  cacheTimestamp = 0;
+  /** Cache time-to-live in milliseconds */
+  cacheTTL = 5e3;
+  /**
+   * Get graph data for the current scope.
+   * Uses caching to avoid expensive extraction on every request.
+   */
+  async getGraphData() {
+    const now = Date.now();
+    if (this.cachedData && now - this.cacheTimestamp < this.cacheTTL) {
+      return this.cachedData;
+    }
+    this.cachedData = this.extractGraphData();
+    this.cacheTimestamp = now;
+    return this.cachedData;
+  }
+  /**
+   * Invalidate the cache to force fresh extraction.
+   */
+  invalidateCache() {
+    this.cachedData = null;
+    this.cacheTimestamp = 0;
+  }
+  /**
+   * Get all scopes from the ScopeRegistry, excluding the dashboard scope.
+   * Traverses up the provider hierarchy to find the ScopeRegistry if not found locally.
+   */
+  getMonitoredScopes() {
+    try {
+      let scopeRegistries = this.scope.providers.getRegistries("ScopeRegistry");
+      if (!scopeRegistries || scopeRegistries.length === 0) {
+        let currentProviders = this.scope.providers.parentProviders;
+        while (currentProviders && (!scopeRegistries || scopeRegistries.length === 0)) {
+          scopeRegistries = currentProviders.getRegistries?.("ScopeRegistry") || [];
+          currentProviders = currentProviders.parentProviders;
+        }
+      }
+      if (!scopeRegistries || scopeRegistries.length === 0) {
+        return [this.scope];
+      }
+      const scopeRegistry = scopeRegistries[0];
+      const allScopes = scopeRegistry.getScopes();
+      return allScopes.filter((s) => s.id !== "dashboard");
+    } catch {
+      return [this.scope];
+    }
+  }
+  /**
+   * Extract graph data from all monitored scopes.
+   */
+  extractGraphData() {
+    const nodes = [];
+    const edges = [];
+    const addedNodeIds = /* @__PURE__ */ new Set();
+    const addNode = (node) => {
+      if (!addedNodeIds.has(node.id)) {
+        nodes.push(node);
+        addedNodeIds.add(node.id);
+      }
+    };
+    const serverId = `server:${this.serverName}`;
+    addNode({
+      id: serverId,
+      type: "server",
+      label: this.serverName,
+      data: {
+        name: this.serverName,
+        description: `FrontMCP Server v${this.serverVersion || "unknown"}`
+      }
+    });
+    const scopes = this.getMonitoredScopes();
+    for (const scope of scopes) {
+      const scopeId = `scope:${scope.id}`;
+      addNode({
+        id: scopeId,
+        type: "scope",
+        label: scope.id,
+        data: {
+          name: scope.id
+        }
+      });
+      edges.push({
+        id: `${serverId}->${scopeId}`,
+        source: serverId,
+        target: scopeId,
+        type: "contains"
+      });
+      this.extractToolsFromScope(scope, scopeId, edges, addNode);
+      this.extractResourcesFromScope(scope, scopeId, edges, addNode);
+      this.extractResourceTemplatesFromScope(scope, scopeId, edges, addNode);
+      this.extractPromptsFromScope(scope, scopeId, edges, addNode);
+      this.extractAppsFromScope(scope, scopeId, edges, addNode);
+    }
+    return {
+      nodes,
+      edges,
+      metadata: this.createMetadata(nodes.length, edges.length)
+    };
+  }
+  extractToolsFromScope(scope, scopeId, edges, addNode) {
+    try {
+      const tools = scope.tools?.getTools?.(true) || [];
+      for (const tool of tools) {
+        if (tool.fullName?.startsWith("dashboard:")) {
+          continue;
+        }
+        const toolId = `tool:${tool.fullName}`;
+        addNode({
+          id: toolId,
+          type: "tool",
+          label: tool.name,
+          data: {
+            name: tool.fullName,
+            description: tool.metadata?.description,
+            inputSchema: tool.inputSchema,
+            outputSchema: tool.outputSchema,
+            tags: tool.metadata?.tags,
+            annotations: tool.metadata?.annotations
+          }
+        });
+        edges.push({
+          id: `${scopeId}->${toolId}`,
+          source: scopeId,
+          target: toolId,
+          type: "provides"
+        });
+      }
+    } catch {
+    }
+  }
+  extractResourcesFromScope(scope, scopeId, edges, addNode) {
+    try {
+      const resources = scope.resources?.getResources?.(true) || [];
+      for (const resource of resources) {
+        const resourceId = `resource:${resource.uri}`;
+        addNode({
+          id: resourceId,
+          type: "resource",
+          label: resource.name,
+          data: {
+            name: resource.name,
+            description: resource.metadata?.description,
+            uri: resource.uri,
+            mimeType: resource.metadata?.mimeType
+          }
+        });
+        edges.push({
+          id: `${scopeId}->${resourceId}`,
+          source: scopeId,
+          target: resourceId,
+          type: "provides"
+        });
+      }
+    } catch {
+    }
+  }
+  extractResourceTemplatesFromScope(scope, scopeId, edges, addNode) {
+    try {
+      const templates = scope.resources?.getResourceTemplates?.() || [];
+      for (const template of templates) {
+        const templateId = `resource-template:${template.uriTemplate}`;
+        addNode({
+          id: templateId,
+          type: "resource-template",
+          label: template.name,
+          data: {
+            name: template.name,
+            description: template.metadata?.description,
+            uri: template.uriTemplate,
+            mimeType: template.metadata?.mimeType
+          }
+        });
+        edges.push({
+          id: `${scopeId}->${templateId}`,
+          source: scopeId,
+          target: templateId,
+          type: "provides"
+        });
+      }
+    } catch {
+    }
+  }
+  extractPromptsFromScope(scope, scopeId, edges, addNode) {
+    try {
+      const prompts = scope.prompts?.getPrompts?.(true) || [];
+      for (const prompt of prompts) {
+        const promptId = `prompt:${prompt.name}`;
+        addNode({
+          id: promptId,
+          type: "prompt",
+          label: prompt.name,
+          data: {
+            name: prompt.name,
+            description: prompt.metadata?.description,
+            arguments: prompt.metadata?.arguments
+          }
+        });
+        edges.push({
+          id: `${scopeId}->${promptId}`,
+          source: scopeId,
+          target: promptId,
+          type: "provides"
+        });
+      }
+    } catch {
+    }
+  }
+  extractAppsFromScope(scope, scopeId, edges, addNode) {
+    try {
+      const apps = scope.apps?.getApps?.() || [];
+      for (const app of apps) {
+        const appName = app.metadata?.name || "unknown";
+        if (appName === "dashboard") {
+          continue;
+        }
+        const appId = `app:${appName}`;
+        addNode({
+          id: appId,
+          type: "app",
+          label: appName,
+          data: {
+            name: appName,
+            description: app.metadata?.description
+          }
+        });
+        edges.push({
+          id: `${scopeId}->${appId}`,
+          source: scopeId,
+          target: appId,
+          type: "contains"
+        });
+      }
+    } catch {
+    }
+  }
+  createMetadata(nodeCount, edgeCount) {
+    return {
+      serverName: this.serverName,
+      serverVersion: this.serverVersion,
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      entryFile: "runtime",
+      nodeCount,
+      edgeCount
+    };
+  }
+};
+GraphDataProvider = __decorateClass([
+  Provider({
+    name: "graph-data-provider"
+  })
+], GraphDataProvider);
+
+// plugins/plugin-dashboard/src/tools/graph.tool.ts
+import { Tool, ToolContext } from "@frontmcp/sdk";
+import { z as z2 } from "zod";
+var graphToolInputSchema = {
+  includeSchemas: z2.boolean().optional().default(false).describe("Include full input/output schemas in the response"),
+  refresh: z2.boolean().optional().default(false).describe("Force refresh the graph data (bypass cache)")
+};
+var GraphTool = class extends ToolContext {
+  async execute(input) {
+    const graphProvider = this.get(GraphDataProvider);
+    if (input.refresh) {
+      graphProvider.invalidateCache();
+    }
+    const graphData = await graphProvider.getGraphData();
+    if (!input.includeSchemas) {
+      return {
+        ...graphData,
+        nodes: graphData.nodes.map((node) => ({
+          ...node,
+          data: {
+            ...node.data,
+            inputSchema: void 0,
+            outputSchema: void 0
+          }
+        }))
+      };
+    }
+    return graphData;
+  }
+};
+GraphTool = __decorateClass([
+  Tool({
+    name: "dashboard:graph",
+    description: "Get the server graph showing all registered tools, resources, prompts, apps, and their relationships. Returns nodes and edges that can be visualized.",
+    inputSchema: graphToolInputSchema,
+    annotations: {
+      readOnlyHint: true
+    }
+  })
+], GraphTool);
+
+// plugins/plugin-dashboard/src/tools/list-tools.tool.ts
+import { Tool as Tool2, ToolContext as ToolContext2 } from "@frontmcp/sdk";
+import { z as z3 } from "zod";
+
+// plugins/plugin-dashboard/src/shared/safe-regex.ts
+function safeRegex(pattern) {
+  if (pattern.length > 100) {
+    return null;
+  }
+  try {
+    const regex = new RegExp(pattern, "i");
+    regex.test("test");
+    return regex;
+  } catch {
+    return null;
+  }
+}
+
+// plugins/plugin-dashboard/src/tools/list-tools.tool.ts
+var listToolsInputSchema = z3.object({
+  filter: z3.string().optional().describe("Filter tools by name pattern (regex supported)"),
+  includePlugins: z3.boolean().default(true).describe("Include tools from plugins"),
+  includeSchemas: z3.boolean().default(false).describe("Include input/output schemas in the response")
+});
+var listToolsOutputSchema = z3.object({
+  tools: z3.array(
+    z3.object({
+      name: z3.string(),
+      fullName: z3.string(),
+      description: z3.string().optional(),
+      tags: z3.array(z3.string()).optional(),
+      inputSchema: z3.unknown().optional(),
+      outputSchema: z3.unknown().optional()
+    })
+  ),
+  count: z3.number()
+});
+var ListToolsTool = class extends ToolContext2 {
+  async execute(input) {
+    const parentScope = this.tryGet(ParentScopeToken);
+    const targetScope = parentScope || this.scope;
+    let allTools = [];
+    try {
+      allTools = targetScope.tools?.getTools?.(input.includePlugins ?? true) || [];
+    } catch {
+    }
+    if (input.filter) {
+      const pattern = safeRegex(input.filter);
+      if (pattern) {
+        allTools = allTools.filter((t) => pattern.test(t.name) || pattern.test(t.fullName));
+      }
+    }
+    const tools = allTools.map((tool) => ({
+      name: tool.name,
+      fullName: tool.fullName,
+      description: tool.metadata?.description,
+      tags: tool.metadata?.tags,
+      ...input.includeSchemas ? {
+        inputSchema: tool.inputSchema,
+        outputSchema: tool.outputSchema
+      } : {}
+    }));
+    return {
+      tools,
+      count: tools.length
+    };
+  }
+};
+ListToolsTool = __decorateClass([
+  Tool2({
+    name: "dashboard:list-tools",
+    description: "List all tools registered in the monitored FrontMCP server. Returns tool names, descriptions, and optionally schemas.",
+    inputSchema: listToolsInputSchema,
+    outputSchema: listToolsOutputSchema,
+    annotations: {
+      readOnlyHint: true
+    }
+  })
+], ListToolsTool);
+
+// plugins/plugin-dashboard/src/tools/list-resources.tool.ts
+import { Tool as Tool3, ToolContext as ToolContext3 } from "@frontmcp/sdk";
+import { z as z4 } from "zod";
+var listResourcesInputSchema = z4.object({
+  filter: z4.string().optional().describe("Filter resources by name or URI pattern (regex supported)"),
+  includeTemplates: z4.boolean().default(true).describe("Include resource templates in the response")
+});
+var listResourcesOutputSchema = z4.object({
+  resources: z4.array(
+    z4.object({
+      name: z4.string(),
+      uri: z4.string(),
+      description: z4.string().optional(),
+      mimeType: z4.string().optional(),
+      isTemplate: z4.boolean()
+    })
+  ),
+  count: z4.number()
+});
+var ListResourcesTool = class extends ToolContext3 {
+  async execute(input) {
+    const parentScope = this.tryGet(ParentScopeToken);
+    const targetScope = parentScope || this.scope;
+    const results = [];
+    try {
+      const resources = targetScope.resources?.getResources?.(true) || [];
+      for (const resource of resources) {
+        results.push({
+          name: resource.name || "unnamed",
+          uri: resource.uri || "unknown",
+          description: resource.metadata?.description,
+          mimeType: resource.metadata?.mimeType,
+          isTemplate: false
+        });
+      }
+    } catch {
+    }
+    if (input.includeTemplates) {
+      try {
+        const templates = targetScope.resources?.getResourceTemplates?.() || [];
+        for (const template of templates) {
+          results.push({
+            name: template.name || "unnamed",
+            uri: template.uriTemplate || "unknown",
+            description: template.metadata?.description,
+            mimeType: template.metadata?.mimeType,
+            isTemplate: true
+          });
+        }
+      } catch {
+      }
+    }
+    let filtered = results;
+    if (input.filter) {
+      const pattern = safeRegex(input.filter);
+      if (pattern) {
+        filtered = results.filter((r) => pattern.test(r.name) || pattern.test(r.uri));
+      }
+    }
+    return {
+      resources: filtered,
+      count: filtered.length
+    };
+  }
+};
+ListResourcesTool = __decorateClass([
+  Tool3({
+    name: "dashboard:list-resources",
+    description: "List all resources and resource templates registered in the monitored FrontMCP server.",
+    inputSchema: listResourcesInputSchema,
+    outputSchema: listResourcesOutputSchema,
+    annotations: {
+      readOnlyHint: true
+    }
+  })
+], ListResourcesTool);
+
+// plugins/plugin-dashboard/src/html/html.generator.ts
+function escapeForJs(str) {
+  return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/</g, "\\x3c").replace(/>/g, "\\x3e").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+}
+function generateDashboardHtml(options) {
+  const cdn = options.cdn;
+  const basePath = options.basePath;
+  if (cdn.entrypoint) {
+    return generateExternalEntrypointHtml(options);
+  }
+  return generateInlineDashboardHtml(options);
+}
+function generateExternalEntrypointHtml(options) {
+  const { cdn, auth } = options;
+  const safeBasePath = escapeForJs(options.basePath);
+  const token = escapeForJs(auth?.token || "");
+  const safeReact = escapeForJs(cdn.react);
+  const safeReactDom = escapeForJs(cdn.reactDom);
+  const safeReactDomClient = escapeForJs(cdn.reactDomClient);
+  const safeReactJsxRuntime = escapeForJs(cdn.reactJsxRuntime);
+  const safeXyflow = escapeForJs(cdn.xyflow);
+  const safeDagre = escapeForJs(cdn.dagre);
+  const safeXyflowCss = escapeForJs(cdn.xyflowCss);
+  const safeEntrypoint = escapeForJs(cdn.entrypoint || "");
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FrontMCP Dashboard</title>
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "${safeReact}",
+      "react-dom": "${safeReactDom}",
+      "react-dom/client": "${safeReactDomClient}",
+      "react/jsx-runtime": "${safeReactJsxRuntime}",
+      "@xyflow/react": "${safeXyflow}",
+      "dagre": "${safeDagre}"
+    }
+  }
+  </script>
+  <link rel="stylesheet" href="${safeXyflowCss}" />
+</head>
+<body>
+  <div id="root">Loading dashboard...</div>
+  <script type="module">
+    // Escape HTML for safe innerHTML usage
+    function escapeHtml(str) {
+      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    // Dashboard configuration
+    window.__FRONTMCP_DASHBOARD__ = {
+      basePath: '${safeBasePath}',
+      sseUrl: '${safeBasePath}/sse${token ? `?token=${token}` : ""}',
+      token: '${token}',
+    };
+
+    // Load external dashboard UI
+    import('${safeEntrypoint}').then(mod => {
+      if (mod.mount) {
+        mod.mount(document.getElementById('root'), window.__FRONTMCP_DASHBOARD__);
+      }
+    }).catch(err => {
+      document.getElementById('root').innerHTML =
+        '<div style="color: red; padding: 20px;">Failed to load dashboard: ' + escapeHtml(err.message || 'Unknown error') + '</div>';
+    });
+  </script>
+</body>
+</html>`;
+}
+function generateInlineDashboardHtml(options) {
+  const { cdn, auth } = options;
+  const safeBasePath = escapeForJs(options.basePath);
+  const token = escapeForJs(auth?.token || "");
+  const sseUrl = `${safeBasePath}/sse${token ? `?token=${token}` : ""}`;
+  const safeReact = escapeForJs(cdn.react);
+  const safeReactDom = escapeForJs(cdn.reactDom);
+  const safeReactDomClient = escapeForJs(cdn.reactDomClient);
+  const safeReactJsxRuntime = escapeForJs(cdn.reactJsxRuntime);
+  const safeXyflow = escapeForJs(cdn.xyflow);
+  const safeDagre = escapeForJs(cdn.dagre);
+  const safeXyflowCss = escapeForJs(cdn.xyflowCss);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FrontMCP Dashboard</title>
+
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "${safeReact}",
+      "react-dom": "${safeReactDom}",
+      "react-dom/client": "${safeReactDomClient}",
+      "react/jsx-runtime": "${safeReactJsxRuntime}",
+      "@xyflow/react": "${safeXyflow}",
+      "dagre": "${safeDagre}"
+    }
+  }
+  </script>
+  <link rel="stylesheet" href="${safeXyflowCss}" />
+
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0f172a;
+      color: #e2e8f0;
+    }
+    #root { width: 100vw; height: 100vh; }
+
+    .loading {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      gap: 16px;
+    }
+    .loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid #334155;
+      border-top-color: #3b82f6;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      gap: 12px;
+      color: #f87171;
+    }
+
+    .header {
+      position: fixed;
+      top: 20px;
+      left: 20px;
+      background: #1e293b;
+      padding: 16px 20px;
+      border-radius: 12px;
+      border: 1px solid #334155;
+      z-index: 1000;
+    }
+    .header h1 {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+    .header .stats {
+      font-size: 13px;
+      color: #94a3b8;
+    }
+    .header .status {
+      font-size: 11px;
+      margin-top: 8px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #22c55e;
+    }
+    .status-dot.disconnected { background: #ef4444; }
+    .status-dot.connecting { background: #f59e0b; animation: pulse 1s ease-in-out infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+
+    .legend {
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      background: #1e293b;
+      padding: 16px;
+      border-radius: 12px;
+      border: 1px solid #334155;
+      z-index: 1000;
+      font-size: 12px;
+    }
+    .legend h3 {
+      margin-bottom: 12px;
+      font-size: 13px;
+      color: #f1f5f9;
+    }
+    .legend-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 6px;
+      color: #94a3b8;
+    }
+    .legend-color {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      margin-right: 8px;
+      border: 2px solid;
+    }
+
+    .custom-node {
+      padding: 10px 14px;
+      border-radius: 8px;
+      min-width: 140px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    }
+    .custom-node .node-type {
+      font-size: 10px;
+      text-transform: uppercase;
+      margin-bottom: 4px;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+    }
+    .custom-node .node-label {
+      font-size: 13px;
+      font-weight: 600;
+      color: #f1f5f9;
+    }
+    .custom-node .node-desc {
+      font-size: 10px;
+      color: #94a3b8;
+      margin-top: 3px;
+      max-width: 160px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .react-flow__minimap { background: #1e293b !important; }
+    .react-flow__controls button {
+      background: #1e293b !important;
+      border-color: #334155 !important;
+      color: #e2e8f0 !important;
+    }
+    .react-flow__controls button:hover {
+      background: #334155 !important;
+    }
+  </style>
+</head>
+<body>
+  <div id="root">
+    <div class="loading">
+      <div class="loading-spinner"></div>
+      <div>Connecting to server...</div>
+    </div>
+  </div>
+
+  <script type="module">
+    import React, { useMemo, useCallback, useState, useEffect } from 'react';
+    import { createRoot } from 'react-dom/client';
+    import {
+      ReactFlow,
+      ReactFlowProvider,
+      Background,
+      Controls,
+      MiniMap,
+      useNodesState,
+      useEdgesState,
+      Handle,
+      Position
+    } from '@xyflow/react';
+    import dagre from 'dagre';
+
+    // Configuration
+    const config = {
+      basePath: '${safeBasePath}',
+      sseUrl: '${sseUrl}',
+      token: '${token}',
+    };
+
+    // Node styling config
+    const nodeConfig = {
+      server: { fill: '#312e81', stroke: '#6366f1', icon: '\u{1F5A5}\uFE0F', textColor: '#a5b4fc' },
+      scope: { fill: '#1e3a5f', stroke: '#3b82f6', icon: '\u{1F4E6}', textColor: '#93c5fd' },
+      app: { fill: '#14532d', stroke: '#22c55e', icon: '\u{1F4F1}', textColor: '#86efac' },
+      plugin: { fill: '#713f12', stroke: '#f59e0b', icon: '\u{1F50C}', textColor: '#fcd34d' },
+      adapter: { fill: '#7f1d1d', stroke: '#ef4444', icon: '\u{1F517}', textColor: '#fca5a5' },
+      tool: { fill: '#164e63', stroke: '#06b6d4', icon: '\u{1F527}', textColor: '#67e8f9' },
+      resource: { fill: '#312e81', stroke: '#8b5cf6', icon: '\u{1F4C4}', textColor: '#c4b5fd' },
+      'resource-template': { fill: '#4c1d95', stroke: '#a78bfa', icon: '\u{1F4CB}', textColor: '#ddd6fe' },
+      prompt: { fill: '#831843', stroke: '#ec4899', icon: '\u{1F4AC}', textColor: '#f9a8d4' },
+      auth: { fill: '#78350f', stroke: '#d97706', icon: '\u{1F6E1}\uFE0F', textColor: '#fcd34d' },
+    };
+
+    // Custom node component
+    function CustomNode({ data, type }) {
+      const cfg = nodeConfig[type] || nodeConfig.tool;
+
+      return React.createElement('div', {
+        className: 'custom-node',
+        style: { background: cfg.fill, border: '2px solid ' + cfg.stroke }
+      },
+        React.createElement(Handle, { type: 'target', position: Position.Top, style: { visibility: 'hidden' } }),
+        React.createElement('div', { className: 'node-type', style: { color: cfg.textColor } },
+          cfg.icon + ' ' + type
+        ),
+        React.createElement('div', { className: 'node-label' }, data.label),
+        data.description && React.createElement('div', { className: 'node-desc' }, data.description),
+        React.createElement(Handle, { type: 'source', position: Position.Bottom, style: { visibility: 'hidden' } })
+      );
+    }
+
+    // Create node types
+    const nodeTypes = {};
+    Object.keys(nodeConfig).forEach(type => {
+      nodeTypes[type] = (props) => CustomNode({ ...props, type });
+    });
+
+    // Layout with Dagre
+    function layoutGraph(graphData) {
+      const g = new dagre.graphlib.Graph();
+      g.setGraph({ rankdir: 'TB', nodesep: 50, ranksep: 80 });
+      g.setDefaultEdgeLabel(() => ({}));
+
+      graphData.nodes.forEach(node => {
+        g.setNode(node.id, { width: 160, height: 60 });
+      });
+
+      graphData.edges.forEach(edge => {
+        g.setEdge(edge.source, edge.target);
+      });
+
+      dagre.layout(g);
+
+      const nodes = graphData.nodes.map(node => {
+        const pos = g.node(node.id);
+        return {
+          id: node.id,
+          type: node.type,
+          position: { x: pos.x - 80, y: pos.y - 30 },
+          data: { label: node.label, ...node.data },
+        };
+      });
+
+      const edges = graphData.edges.map(edge => ({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        type: 'smoothstep',
+        style: { stroke: '#475569', strokeWidth: 1.5 },
+        markerEnd: { type: 'arrowclosed', color: '#475569' },
+      }));
+
+      return { nodes, edges };
+    }
+
+    /**
+     * MCP Client for SSE transport communication.
+     * Connects to the dashboard SSE endpoint and sends JSON-RPC requests.
+     */
+    class McpClient {
+      constructor(sseUrl, basePath) {
+        this.sseUrl = sseUrl;
+        this.basePath = basePath;
+        this.messageUrl = null;
+        this.eventSource = null;
+        this.requestId = 0;
+        this.pendingRequests = new Map();
+        this.sessionId = null;
+      }
+
+      /**
+       * Connect to the SSE endpoint and wait for the message endpoint URL.
+       * The server sends an 'endpoint' event containing the URL for POST requests.
+       */
+      async connect() {
+        return new Promise((resolve, reject) => {
+          this.eventSource = new EventSource(this.sseUrl);
+
+          // Listen for the endpoint event to get the message URL
+          this.eventSource.addEventListener('endpoint', (e) => {
+            const endpointPath = e.data.split('?')[0].replace(this.basePath, '');
+            this.messageUrl = this.basePath + endpointPath;
+
+            // Extract sessionId from the endpoint URL (legacy SSE format)
+            const match = e.data.match(/sessionId=([^&]+)/);
+            this.sessionId = match ? match[1] : null;
+            resolve();
+          });
+
+          // Listen for responses to our requests
+          this.eventSource.addEventListener('message', (e) => {
+            try {
+              const response = JSON.parse(e.data);
+              if (response.id && this.pendingRequests.has(response.id)) {
+                const { resolve, reject } = this.pendingRequests.get(response.id);
+                this.pendingRequests.delete(response.id);
+                if (response.error) {
+                  reject(new Error(response.error.message));
+                } else {
+                  resolve(response.result);
+                }
+              }
+            } catch (err) {
+              console.error('Failed to parse SSE message:', err);
+            }
+          });
+
+          this.eventSource.onerror = () => {
+            if (!this.messageUrl) {
+              reject(new Error('SSE connection failed'));
+            }
+          };
+
+          // Connection timeout
+          setTimeout(() => {
+            if (!this.messageUrl) {
+              this.close();
+              reject(new Error('SSE connection timeout'));
+            }
+          }, 10000);
+        });
+      }
+
+      /**
+       * Call an MCP tool via JSON-RPC over HTTP POST.
+       * @param {string} name - The tool name (e.g., 'dashboard:graph')
+       * @param {object} args - The tool arguments
+       * @returns {Promise<object>} The tool result
+       */
+      async callTool(name, args = {}) {
+        if (!this.messageUrl) {
+          throw new Error('Not connected');
+        }
+
+        const id = ++this.requestId;
+        const message = {
+          jsonrpc: '2.0',
+          id,
+          method: 'tools/call',
+          params: { name, arguments: args }
+        };
+
+        return new Promise((resolve, reject) => {
+          this.pendingRequests.set(id, { resolve, reject });
+
+          // Append sessionId to URL for legacy SSE transport
+          const url = this.messageUrl + (this.sessionId ? '?sessionId=' + this.sessionId : '');
+          fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(message)
+          }).catch(reject);
+        });
+      }
+
+      /** Close the SSE connection */
+      close() {
+        if (this.eventSource) {
+          this.eventSource.close();
+          this.eventSource = null;
+        }
+      }
+    }
+
+    // Main App
+    function DashboardApp() {
+      const [status, setStatus] = useState('loading');
+      const [error, setError] = useState(null);
+      const [graphData, setGraphData] = useState(null);
+      const [nodes, setNodes, onNodesChange] = useNodesState([]);
+      const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+      useEffect(() => {
+        const client = new McpClient(config.sseUrl, config.basePath);
+
+        async function init() {
+          try {
+            // Connect via SSE
+            setStatus('connecting');
+            await client.connect();
+
+            // Call dashboard:graph tool via MCP protocol
+            const result = await client.callTool('dashboard:graph', {});
+
+            // Extract graph data from tool result
+            let data;
+            if (result && result.content && result.content[0]) {
+              const content = result.content[0];
+              if (content.type === 'text') {
+                data = JSON.parse(content.text);
+              }
+            }
+
+            if (!data) {
+              throw new Error('Invalid graph data response');
+            }
+
+            setGraphData(data);
+            setStatus('connected');
+
+            const { nodes: layoutNodes, edges: layoutEdges } = layoutGraph(data);
+            setNodes(layoutNodes);
+            setEdges(layoutEdges);
+          } catch (err) {
+            setStatus('error');
+            setError(err.message);
+          }
+        }
+
+        init();
+
+        return () => client.close();
+      }, []);
+
+      if (error) {
+        return React.createElement('div', { className: 'error' },
+          React.createElement('div', { style: { fontSize: 48 } }, '\u26A0\uFE0F'),
+          React.createElement('div', { style: { fontSize: 18, fontWeight: 600 } }, 'Connection Failed'),
+          React.createElement('div', { style: { color: '#94a3b8' } }, error)
+        );
+      }
+
+      if (!graphData) {
+        return React.createElement('div', { className: 'loading' },
+          React.createElement('div', { className: 'loading-spinner' }),
+          React.createElement('div', null, 'Loading graph data...')
+        );
+      }
+
+      return React.createElement('div', { style: { width: '100%', height: '100%' } },
+        React.createElement('div', { className: 'header' },
+          React.createElement('h1', null, graphData.metadata.serverName),
+          React.createElement('div', { className: 'stats' },
+            graphData.metadata.nodeCount + ' nodes \xB7 ' + graphData.metadata.edgeCount + ' edges'
+          ),
+          React.createElement('div', { className: 'status' },
+            React.createElement('span', {
+              className: 'status-dot' + (status !== 'connected' ? ' ' + status : '')
+            }),
+            status === 'connected' ? 'Connected' : status
+          )
+        ),
+
+        React.createElement('div', { className: 'legend' },
+          React.createElement('h3', null, 'Node Types'),
+          ...Object.entries(nodeConfig).slice(0, 6).map(([type, cfg]) =>
+            React.createElement('div', { key: type, className: 'legend-item' },
+              React.createElement('div', {
+                className: 'legend-color',
+                style: { background: cfg.fill, borderColor: cfg.stroke }
+              }),
+              cfg.icon + ' ' + type
+            )
+          )
+        ),
+
+        React.createElement(ReactFlow, {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          nodeTypes,
+          fitView: true,
+          fitViewOptions: { padding: 0.2 },
+          minZoom: 0.1,
+          maxZoom: 2,
+        },
+          React.createElement(Background, { color: '#334155', gap: 20 }),
+          React.createElement(Controls),
+          React.createElement(MiniMap, {
+            nodeColor: (n) => nodeConfig[n.type]?.stroke || '#475569',
+            maskColor: 'rgba(15, 23, 42, 0.8)'
+          })
+        )
+      );
+    }
+
+    // Mount
+    const root = createRoot(document.getElementById('root'));
+    root.render(
+      React.createElement(ReactFlowProvider, null,
+        React.createElement(DashboardApp)
+      )
+    );
+  </script>
+</body>
+</html>`;
+}
+
+// plugins/plugin-dashboard/src/app/dashboard.app.ts
+var DashboardMiddlewareToken = /* @__PURE__ */ Symbol("dashboard:middleware");
+function createDashboardMiddleware(options) {
+  const html = generateDashboardHtml(options);
+  return async (req, res, next) => {
+    if (!isDashboardEnabled(options)) {
+      return next();
+    }
+    const urlPath = req.path || req.url || "/";
+    const method = (req.method || "GET").toUpperCase();
+    if (method === "GET" && (urlPath === "/" || urlPath === "")) {
+      res.setHeader?.(
+        "Content-Type",
+        "text/html"
+      );
+      res.status(200).send(html);
+      return;
+    }
+    return next();
+  };
+}
+var DashboardHttpPlugin = class extends DynamicPlugin2 {
+  options;
+  constructor(options = {}) {
+    super();
+    this.options = dashboardPluginOptionsSchema.parse({
+      ...defaultDashboardPluginOptions,
+      ...options
+    });
+  }
+  /**
+   * Provide the dashboard config and middleware registration via DI.
+   */
+  static dynamicProviders(options) {
+    const parsedOptions = dashboardPluginOptionsSchema.parse({
+      ...defaultDashboardPluginOptions,
+      ...options
+    });
+    return [
+      {
+        name: "dashboard:config",
+        provide: DashboardConfigToken,
+        useValue: parsedOptions
+      },
+      // Register middleware for HTML serving (must be in dynamic providers to access config)
+      {
+        name: "dashboard:middleware",
+        provide: DashboardMiddlewareToken,
+        inject: () => [FrontMcpServer],
+        useFactory: (server) => {
+          const middleware = createDashboardMiddleware(parsedOptions);
+          server.registerMiddleware(parsedOptions.basePath, middleware);
+          return { registered: true };
+        }
+      }
+    ];
+  }
+};
+DashboardHttpPlugin = __decorateClass([
+  Plugin2({
+    name: "dashboard:http",
+    description: "Dashboard HTTP handler for serving UI HTML"
+  })
+], DashboardHttpPlugin);
+var DashboardApp = class {
+};
+DashboardApp = __decorateClass([
+  App({
+    name: "dashboard",
+    description: "FrontMCP Dashboard for visualization and monitoring",
+    providers: [
+      // Provide parent scope reference (same as current scope when standalone: false)
+      {
+        name: "dashboard:parent-scope",
+        provide: ParentScopeToken,
+        inject: () => [ScopeEntry4],
+        useFactory: (scope) => {
+          return scope;
+        }
+      },
+      // Graph data provider for extracting server structure
+      {
+        name: "dashboard:graph-data",
+        provide: GraphDataProvider,
+        inject: () => [ScopeEntry4, FrontMcpConfig],
+        useFactory: (scope, config) => {
+          const serverName = config.info?.name || "FrontMCP Server";
+          const serverVersion = config.info?.version;
+          return new GraphDataProvider(scope, serverName, serverVersion);
+        }
+      }
+    ],
+    plugins: [DashboardHttpPlugin.init({})],
+    tools: [GraphTool, ListToolsTool, ListResourcesTool],
+    auth: {
+      mode: "public"
+    },
+    standalone: true
+    // Dashboard is part of root scope so GraphDataProvider can access all tools/resources
+  })
+], DashboardApp);
+export {
+  DashboardApp,
+  DashboardConfigToken,
+  DashboardPlugin,
+  GraphDataProvider,
+  GraphDataProviderToken,
+  GraphTool,
+  ListResourcesTool,
+  ListToolsTool,
+  ParentScopeToken,
+  dashboardPluginOptionsSchema,
+  DashboardPlugin as default,
+  defaultDashboardPluginOptions,
+  isDashboardEnabled
+};