@cinnabun/dev-dashboard 0.0.1

package/dist/dev-dashboard.module.d.ts

@@ -0,0 +1,6 @@
+import { Module } from "@cinnabun/core";
+import type { DevDashboardOptions } from "./interfaces/dashboard-options.js";
+export declare class DevDashboardModule {
+    static forRoot(options: DevDashboardOptions): ReturnType<typeof Module>;
+    static getOptions(): DevDashboardOptions;
+}

package/dist/dev-dashboard.module.js

@@ -0,0 +1,158 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Module, RestController, GetMapping, UseGuard, } from "@cinnabun/core";
+import { IntrospectionService } from "./services/introspection.service.js";
+import { MetricsService } from "./services/metrics.service.js";
+import { createDashboardAuthGuard } from "./guards/dashboard-auth.guard.js";
+import { buildDashboardUIHtml } from "./ui/dashboard-ui.js";
+let moduleOptions = null;
+export class DevDashboardModule {
+    static forRoot(options) {
+        moduleOptions = options;
+        const enabled = options.enabled ?? process.env.NODE_ENV === "development";
+        const basePath = (options.path ?? "/__cinnabun").replace(/\/$/, "") || "/__cinnabun";
+        const authGuard = createDashboardAuthGuard(options.auth?.enabled && options.auth?.secret ? options.auth.secret : undefined);
+        if (!enabled) {
+            let EmptyDashboardModule = class EmptyDashboardModule {
+            };
+            EmptyDashboardModule = __decorate([
+                Module({
+                    controllers: [],
+                    providers: [],
+                    exports: [],
+                })
+            ], EmptyDashboardModule);
+            return EmptyDashboardModule;
+        }
+        let DynamicDashboardController = class DynamicDashboardController {
+            introspectionService;
+            metricsService;
+            constructor(introspectionService, metricsService) {
+                this.introspectionService = introspectionService;
+                this.metricsService = metricsService;
+            }
+            getUI() {
+                const html = buildDashboardUIHtml("Cinnabun Dev Dashboard", basePath);
+                return new Response(html, {
+                    headers: { "Content-Type": "text/html; charset=utf-8" },
+                });
+            }
+            getRoutes() {
+                return this.introspectionService.getRoutes();
+            }
+            getModules() {
+                return this.introspectionService.getModules();
+            }
+            getWebSockets() {
+                return this.introspectionService.getWebSocketMappings();
+            }
+            async getQueue() {
+                return this.introspectionService.getQueueJobs();
+            }
+            async getCache() {
+                return this.introspectionService.getCacheKeys();
+            }
+            async getScheduler() {
+                return this.introspectionService.getScheduledTasks();
+            }
+            getProviders() {
+                return this.introspectionService.getProviders();
+            }
+            getPlugins() {
+                return this.introspectionService.getPlugins();
+            }
+            getMetrics() {
+                return this.metricsService.getMetrics() ?? { available: false };
+            }
+        };
+        __decorate([
+            GetMapping("/"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], DynamicDashboardController.prototype, "getUI", null);
+        __decorate([
+            GetMapping("/api/routes"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], DynamicDashboardController.prototype, "getRoutes", null);
+        __decorate([
+            GetMapping("/api/modules"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], DynamicDashboardController.prototype, "getModules", null);
+        __decorate([
+            GetMapping("/api/websockets"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], DynamicDashboardController.prototype, "getWebSockets", null);
+        __decorate([
+            GetMapping("/api/queue"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", Promise)
+        ], DynamicDashboardController.prototype, "getQueue", null);
+        __decorate([
+            GetMapping("/api/cache"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", Promise)
+        ], DynamicDashboardController.prototype, "getCache", null);
+        __decorate([
+            GetMapping("/api/scheduler"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", Promise)
+        ], DynamicDashboardController.prototype, "getScheduler", null);
+        __decorate([
+            GetMapping("/api/providers"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], DynamicDashboardController.prototype, "getProviders", null);
+        __decorate([
+            GetMapping("/api/plugins"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], DynamicDashboardController.prototype, "getPlugins", null);
+        __decorate([
+            GetMapping("/api/metrics"),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", []),
+            __metadata("design:returntype", void 0)
+        ], DynamicDashboardController.prototype, "getMetrics", null);
+        DynamicDashboardController = __decorate([
+            RestController(basePath),
+            UseGuard(authGuard),
+            __metadata("design:paramtypes", [IntrospectionService,
+                MetricsService])
+        ], DynamicDashboardController);
+        let DevDashboardDynamicModule = class DevDashboardDynamicModule {
+        };
+        DevDashboardDynamicModule = __decorate([
+            Module({
+                controllers: [DynamicDashboardController],
+                providers: [IntrospectionService, MetricsService],
+                exports: [IntrospectionService, MetricsService],
+            })
+        ], DevDashboardDynamicModule);
+        return DevDashboardDynamicModule;
+    }
+    static getOptions() {
+        if (!moduleOptions) {
+            throw new Error("DevDashboardModule not initialized. Call DevDashboardModule.forRoot() first.");
+        }
+        return moduleOptions;
+    }
+}

package/dist/dev-dashboard.plugin.d.ts

@@ -0,0 +1,5 @@
+import type { CinnabunPlugin, PluginContext } from "@cinnabun/core";
+export declare class DevDashboardPlugin implements CinnabunPlugin {
+    name: string;
+    onInit(context: PluginContext): Promise<void>;
+}

package/dist/dev-dashboard.plugin.js

@@ -0,0 +1,16 @@
+import { Logger } from "@cinnabun/core";
+import { IntrospectionService } from "./services/introspection.service.js";
+export class DevDashboardPlugin {
+    name = "DevDashboardPlugin";
+    async onInit(context) {
+        const logger = new Logger("DevDashboardPlugin");
+        try {
+            const introspectionService = context.container.resolve(IntrospectionService);
+            introspectionService.setContainer(context.container);
+            logger.info("Dev dashboard initialized");
+        }
+        catch (err) {
+            logger.warn("DevDashboardPlugin: IntrospectionService not found. Ensure DevDashboardModule.forRoot() is imported.");
+        }
+    }
+}

package/dist/guards/dashboard-auth.guard.d.ts

@@ -0,0 +1,2 @@
+import type { Guard } from "@cinnabun/core";
+export declare function createDashboardAuthGuard(secret?: string): new () => Guard;

package/dist/guards/dashboard-auth.guard.js

@@ -0,0 +1,23 @@
+import { UnauthorizedException } from "@cinnabun/core";
+export function createDashboardAuthGuard(secret) {
+    if (!secret) {
+        return class NoOpGuard {
+            canActivate() {
+                return true;
+            }
+        };
+    }
+    return class DashboardSecretGuard {
+        async canActivate(req) {
+            const authHeader = req.headers.get("Authorization");
+            const secretHeader = req.headers.get("X-Dashboard-Secret");
+            const token = authHeader?.startsWith("Bearer ")
+                ? authHeader.slice(7)
+                : secretHeader;
+            if (token !== secret) {
+                throw new UnauthorizedException("Invalid or missing dashboard secret");
+            }
+            return true;
+        }
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { DevDashboardModule } from "./dev-dashboard.module.js";
+export { DevDashboardPlugin } from "./dev-dashboard.plugin.js";
+export type { DevDashboardOptions } from "./interfaces/dashboard-options.js";
+export { IntrospectionService } from "./services/introspection.service.js";
+export { MetricsService } from "./services/metrics.service.js";
+export type { RouteInfo, ModuleInfo, WebSocketInfo, QueueJobInfo, CacheKeyInfo, ScheduledTaskInfo, ProviderInfo, PluginInfo, } from "./services/introspection.service.js";
+export type { RequestMetric, MetricsSummary } from "./services/metrics.service.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { DevDashboardModule } from "./dev-dashboard.module.js";
+export { DevDashboardPlugin } from "./dev-dashboard.plugin.js";
+export { IntrospectionService } from "./services/introspection.service.js";
+export { MetricsService } from "./services/metrics.service.js";

package/dist/interfaces/dashboard-options.d.ts

@@ -0,0 +1,11 @@
+export interface DevDashboardOptions {
+    /** Default: process.env.NODE_ENV === "development" */
+    enabled?: boolean;
+    /** Default: "/__cinnabun" */
+    path?: string;
+    auth?: {
+        enabled: boolean;
+        /** Simple secret key for dev access */
+        secret?: string;
+    };
+}

package/dist/interfaces/dashboard-options.js

@@ -0,0 +1 @@
+export {};

package/dist/services/introspection.service.d.ts

@@ -0,0 +1,75 @@
+import type { Container } from "@cinnabun/core";
+export interface RouteInfo {
+    method: string;
+    path: string;
+    controller: string;
+    handler: string;
+    guards: string[];
+    interceptors: string[];
+}
+export interface ModuleInfo {
+    name: string;
+    imports: string[];
+    controllers: string[];
+    providers: string[];
+}
+export interface WebSocketMappingInfo {
+    destination: string;
+    handler: string;
+    broadcastTo?: string;
+}
+export interface WebSocketSubscribeInfo {
+    destination: string;
+    subscriberCount?: string;
+}
+export interface WebSocketInfo {
+    brokerPrefixes: string[];
+    appPrefixes: string[];
+    endpoints: string[];
+    messageMappings: WebSocketMappingInfo[];
+    subscriptions: WebSocketSubscribeInfo[];
+}
+export interface QueueJobInfo {
+    queueName: string;
+    jobName: string;
+    handler: string;
+    status: string;
+}
+export interface CacheKeyInfo {
+    key: string;
+    ttl?: string;
+    size?: string;
+    lastAccess?: string;
+}
+export interface ScheduledTaskInfo {
+    name: string;
+    expression?: string;
+    nextRun?: string;
+    lastRun?: string;
+    status: string;
+}
+export interface ProviderInfo {
+    name: string;
+    scope: string;
+    resolved: boolean;
+    dependencies?: string[];
+}
+export interface PluginInfo {
+    name: string;
+    version?: string;
+    onInit: boolean;
+    onReady: boolean;
+    onShutdown: boolean;
+}
+export declare class IntrospectionService {
+    private container;
+    setContainer(container: Container): void;
+    getRoutes(): RouteInfo[];
+    getModules(): ModuleInfo[];
+    getWebSocketMappings(): WebSocketInfo;
+    getProviders(): ProviderInfo[];
+    getPlugins(): PluginInfo[];
+    getQueueJobs(): Promise<QueueJobInfo[]>;
+    getCacheKeys(): Promise<CacheKeyInfo[]>;
+    getScheduledTasks(): Promise<ScheduledTaskInfo[]>;
+}

package/dist/services/introspection.service.js

@@ -0,0 +1,157 @@
+import { metadataStorage } from "@cinnabun/core";
+export class IntrospectionService {
+    container = null;
+    setContainer(container) {
+        this.container = container;
+    }
+    getRoutes() {
+        const routes = metadataStorage.routes;
+        return routes.map((route) => {
+            const basePath = metadataStorage.getControllerPath(route.target);
+            const methodPath = route.path === "/" ? "" : route.path;
+            const fullPath = basePath + methodPath || "/";
+            const guards = metadataStorage.getGuardsFor(route.target, route.methodKey);
+            const interceptors = metadataStorage.getInterceptorsFor(route.target, route.methodKey);
+            return {
+                method: route.httpMethod,
+                path: fullPath,
+                controller: route.target.name,
+                handler: route.methodKey,
+                guards: guards.map((g) => g.name),
+                interceptors: interceptors.map((i) => i.name),
+            };
+        });
+    }
+    getModules() {
+        const modules = metadataStorage.modules;
+        return Array.from(modules.entries()).map(([target, meta]) => ({
+            name: target.name,
+            imports: meta.imports.map((c) => c.name),
+            controllers: meta.controllers.map((c) => c.name),
+            providers: meta.providers.map((p) => p.name),
+        }));
+    }
+    getWebSocketMappings() {
+        const gateways = metadataStorage.getAllWsGateways();
+        let brokerPrefixes = [];
+        let appPrefixes = [];
+        const endpoints = [];
+        for (const [, path] of gateways) {
+            endpoints.push(path);
+        }
+        const firstBroker = Array.from(metadataStorage.wsBrokerMetadata.values())[0];
+        if (firstBroker) {
+            brokerPrefixes = firstBroker.brokerPrefixes;
+            appPrefixes = firstBroker.appDestinationPrefixes;
+        }
+        const messageMappings = [];
+        for (const mapping of metadataStorage.messageMappings) {
+            const sendTo = metadataStorage.getSendTo(mapping.target, mapping.methodKey);
+            messageMappings.push({
+                destination: mapping.destination,
+                handler: `${mapping.target.name}.${mapping.methodKey}`,
+                broadcastTo: sendTo,
+            });
+        }
+        const subscriptions = [];
+        for (const mapping of metadataStorage.subscribeMappings) {
+            subscriptions.push({
+                destination: mapping.destination,
+                subscriberCount: "—",
+            });
+        }
+        return {
+            brokerPrefixes,
+            appPrefixes,
+            endpoints,
+            messageMappings,
+            subscriptions,
+        };
+    }
+    getProviders() {
+        if (!this.container)
+            return [];
+        const providers = this.container.getProviders();
+        return providers.map((p) => ({
+            name: p.name,
+            scope: "Singleton",
+            resolved: true,
+        }));
+    }
+    getPlugins() {
+        const appMetadata = metadataStorage.appMetadata;
+        const plugins = [];
+        for (const [, meta] of appMetadata) {
+            for (const plugin of meta.plugins || []) {
+                const p = plugin;
+                plugins.push({
+                    name: p.name ?? "Unknown",
+                    version: p.version,
+                    onInit: "onInit" in plugin && typeof plugin.onInit === "function",
+                    onReady: "onReady" in plugin && typeof plugin.onReady === "function",
+                    onShutdown: "onShutdown" in plugin && typeof plugin.onShutdown === "function",
+                });
+            }
+        }
+        return plugins;
+    }
+    async getQueueJobs() {
+        try {
+            const { queueMetadataStorage } = await import("@cinnabun/queue");
+            const processors = queueMetadataStorage.getAllProcessors();
+            const jobs = [];
+            for (const proc of processors) {
+                const procJobs = queueMetadataStorage.getJobs(proc.target);
+                for (const j of procJobs) {
+                    jobs.push({
+                        queueName: proc.queueName,
+                        jobName: j.jobName,
+                        handler: `${proc.target.name}.${j.methodKey}`,
+                        status: "Active",
+                    });
+                }
+            }
+            return jobs;
+        }
+        catch {
+            return [];
+        }
+    }
+    async getCacheKeys() {
+        try {
+            const { getCacheService } = await import("@cinnabun/cache");
+            const cache = getCacheService();
+            if (!cache)
+                return [];
+            const keys = await cache.keys();
+            return keys.map((key) => ({
+                key,
+                ttl: "—",
+                size: "—",
+                lastAccess: "—",
+            }));
+        }
+        catch {
+            return [];
+        }
+    }
+    async getScheduledTasks() {
+        if (!this.container)
+            return [];
+        try {
+            const { SchedulerService } = await import("@cinnabun/scheduler");
+            const scheduler = this.container.resolve(SchedulerService);
+            const tasks = scheduler.getTasks();
+            return tasks.map((t) => ({
+                name: t.name,
+                expression: t.expression,
+                nextRun: t.nextRun ? String(t.nextRun) : undefined,
+                lastRun: t.lastRun ? String(t.lastRun) : undefined,
+                status: t.enabled ? "Active" : "Disabled",
+            }));
+        }
+        catch {
+            return [];
+        }
+    }
+}

package/dist/services/metrics.service.d.ts

@@ -0,0 +1,24 @@
+export interface RequestMetric {
+    method: string;
+    path: string;
+    statusCode: number;
+    durationMs: number;
+    timestamp: number;
+}
+export interface MetricsSummary {
+    totalRequests: number;
+    successRate: number;
+    errorRate: number;
+    averageResponseTimeMs: number;
+    recentErrors: Array<{
+        status: number;
+        method: string;
+        path: string;
+        message?: string;
+    }>;
+}
+export declare class MetricsService {
+    private requests;
+    record(method: string, path: string, statusCode: number, durationMs: number): void;
+    getMetrics(): MetricsSummary | null;
+}

package/dist/services/metrics.service.js

@@ -0,0 +1,35 @@
+const MAX_REQUESTS = 1000;
+export class MetricsService {
+    requests = [];
+    record(method, path, statusCode, durationMs) {
+        this.requests.push({
+            method,
+            path,
+            statusCode,
+            durationMs,
+            timestamp: Date.now(),
+        });
+        if (this.requests.length > MAX_REQUESTS) {
+            this.requests = this.requests.slice(-MAX_REQUESTS);
+        }
+    }
+    getMetrics() {
+        if (this.requests.length === 0)
+            return null;
+        const total = this.requests.length;
+        const success = this.requests.filter((r) => r.statusCode >= 200 && r.statusCode < 400).length;
+        const errors = this.requests.filter((r) => r.statusCode >= 400);
+        const avg = this.requests.reduce((s, r) => s + r.durationMs, 0) / total;
+        return {
+            totalRequests: total,
+            successRate: (success / total) * 100,
+            errorRate: (errors.length / total) * 100,
+            averageResponseTimeMs: Math.round(avg),
+            recentErrors: errors.slice(-10).map((r) => ({
+                status: r.statusCode,
+                method: r.method,
+                path: r.path,
+            })),
+        };
+    }
+}

package/dist/ui/dashboard-ui.d.ts

@@ -0,0 +1 @@
+export declare function buildDashboardUIHtml(title: string, basePath: string): string;

package/dist/ui/dashboard-ui.js

@@ -0,0 +1,306 @@
+export function buildDashboardUIHtml(title, basePath) {
+    const apiBase = `${basePath}/api`;
+    const scriptContent = buildScriptContent(apiBase, basePath);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; }
+    .layout { display: flex; min-height: 100vh; }
+    .sidebar { width: 220px; background: #1e293b; padding: 1rem 0; flex-shrink: 0; }
+    .sidebar h1 { margin: 0 1rem 1rem; font-size: 1rem; font-weight: 600; color: #f8fafc; }
+    .sidebar a { display: block; padding: 0.5rem 1rem; color: #94a3b8; text-decoration: none; cursor: pointer; }
+    .sidebar a:hover { background: #334155; color: #fff; }
+    .sidebar a.active { background: #334155; color: #38bdf8; }
+    .main { flex: 1; padding: 1.5rem; overflow: auto; }
+    .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+    .btn { padding: 0.4rem 0.8rem; background: #334155; color: #e2e8f0; border: 1px solid #475569; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
+    .btn:hover { background: #475569; }
+    .search { padding: 0.4rem 0.8rem; border: 1px solid #475569; border-radius: 6px; background: #1e293b; color: #e2e8f0; width: 200px; }
+    table { width: 100%; border-collapse: collapse; background: #1e293b; border-radius: 8px; overflow: hidden; }
+    th, td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid #334155; }
+    th { background: #0f172a; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; color: #94a3b8; }
+    tr:hover { background: #334155; }
+    .empty { display: flex; min-height: 200px; align-items: center; justify-content: center; color: #64748b; }
+    .error { color: #f87171; font-size: 0.9rem; }
+    .loading { color: #94a3b8; }
+    .card { background: #1e293b; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
+    .card h3 { margin: 0 0 0.5rem; font-size: 0.9rem; color: #94a3b8; }
+    .copy-btn { padding: 0.2rem 0.5rem; font-size: 0.75rem; margin-left: 0.5rem; cursor: pointer; }
+    code { font-family: ui-monospace, monospace; font-size: 0.85em; background: #0f172a; padding: 0.1rem 0.3rem; border-radius: 4px; }
+  </style>
+</head>
+<body>
+  <div class="layout">
+    <nav class="sidebar">
+      <h1>${escapeHtml(title)}</h1>
+      <a data-section="routes" class="active">Routes</a>
+      <a data-section="modules">Modules</a>
+      <a data-section="websockets">WebSockets</a>
+      <a data-section="queue">Queue</a>
+      <a data-section="cache">Cache</a>
+      <a data-section="scheduler">Scheduler</a>
+      <a data-section="providers">Providers</a>
+      <a data-section="plugins">Plugins</a>
+      <a data-section="metrics">Metrics</a>
+    </nav>
+    <main class="main">
+      <div class="toolbar">
+        <h2 id="section-title">Routes</h2>
+        <div>
+          <input type="text" class="search" id="search" placeholder="Filter..." style="display:none">
+          <button class="btn" id="refresh-btn">Refresh</button>
+        </div>
+      </div>
+      <div id="content"></div>
+    </main>
+  </div>
+  <script>${scriptContent}</script>
+</body>
+</html>`;
+}
+function buildScriptContent(apiBase, basePath) {
+    return `
+(function() {
+  const API_BASE = ${JSON.stringify(apiBase)};
+  let currentSection = "routes";
+  let searchTerm = "";
+
+  function escapeHtml(s) {
+    if (s == null) return "";
+    const div = document.createElement("div");
+    div.textContent = String(s);
+    return div.innerHTML;
+  }
+
+  function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(function() {
+      const btn = event.target;
+      const orig = btn.textContent;
+      btn.textContent = "Copied!";
+      setTimeout(function() { btn.textContent = orig; }, 1000);
+    });
+  }
+
+  function attrEscape(s) {
+    if (s == null) return "";
+    return String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+
+  document.addEventListener("click", function(e) {
+    const btn = e.target.closest("[data-copy]");
+    if (btn) {
+      e.preventDefault();
+      copyToClipboard(btn.getAttribute("data-copy") || "");
+    }
+  });
+
+  async function fetchSection(section) {
+    const res = await fetch(API_BASE + "/" + section);
+    if (!res.ok) throw new Error("Failed to load: " + res.status);
+    return res.json();
+  }
+
+  function renderRoutes(data) {
+    if (!data || !data.length) return "<div class='empty'>No routes registered</div>";
+    const filtered = data.filter(function(r) {
+      if (!searchTerm) return true;
+      const s = searchTerm.toLowerCase();
+      return (r.method + r.path + r.controller + r.handler).toLowerCase().includes(s);
+    });
+    let html = "<table><thead><tr><th>Method</th><th>Path</th><th>Controller</th><th>Handler</th><th>Guards</th><th>Interceptors</th></tr></thead><tbody>";
+    filtered.forEach(function(r) {
+      html += "<tr><td><code>" + escapeHtml(r.method) + "</code></td><td><code>" + escapeHtml(r.path) + "</code><button class='copy-btn btn' data-copy='" + attrEscape(r.path) + "'>Copy</button></td><td>" + escapeHtml(r.controller) + "</td><td>" + escapeHtml(r.handler) + "</td><td>" + (r.guards && r.guards.length ? r.guards.join(", ") : "—") + "</td><td>" + (r.interceptors && r.interceptors.length ? r.interceptors.join(", ") : "—") + "</td></tr>";
+    });
+    html += "</tbody></table>";
+    return html;
+  }
+
+  function renderModules(data) {
+    if (!data || !data.length) return "<div class='empty'>No modules registered</div>";
+    const filtered = data.filter(function(m) {
+      if (!searchTerm) return true;
+      return (m.name + (m.imports || []).join("") + (m.controllers || []).join("") + (m.providers || []).join("")).toLowerCase().includes(searchTerm.toLowerCase());
+    });
+    let html = "";
+    filtered.forEach(function(m) {
+      html += "<div class='card'><h3>" + escapeHtml(m.name) + "</h3>";
+      html += "<p><strong>Imports:</strong> " + (m.imports && m.imports.length ? m.imports.join(", ") : "—") + "</p>";
+      html += "<p><strong>Controllers:</strong> " + (m.controllers && m.controllers.length ? m.controllers.join(", ") : "—") + "</p>";
+      html += "<p><strong>Providers:</strong> " + (m.providers && m.providers.length ? m.providers.join(", ") : "—") + "</p></div>";
+    });
+    return html || "<div class='empty'>No modules match filter</div>";
+  }
+
+  function renderWebSockets(data) {
+    if (!data) return "<div class='empty'>No WebSocket configuration</div>";
+    let html = "<div class='card'><h3>Broker</h3><p>Prefixes: " + (data.brokerPrefixes && data.brokerPrefixes.length ? data.brokerPrefixes.join(", ") : "—") + "</p>";
+    html += "<p>App prefixes: " + (data.appPrefixes && data.appPrefixes.length ? data.appPrefixes.join(", ") : "—") + "</p>";
+    html += "<p>Endpoints: " + (data.endpoints && data.endpoints.length ? data.endpoints.join(", ") : "—") + "</p></div>";
+    if (data.messageMappings && data.messageMappings.length) {
+      html += "<h3 style='margin:1rem 0 0.5rem'>Message Mappings</h3><table><thead><tr><th>Destination</th><th>Handler</th><th>Broadcast To</th></tr></thead><tbody>";
+      data.messageMappings.forEach(function(m) {
+        html += "<tr><td><code>" + escapeHtml(m.destination) + "</code></td><td>" + escapeHtml(m.handler) + "</td><td>" + (m.broadcastTo ? "<code>" + escapeHtml(m.broadcastTo) + "</code>" : "—") + "</td></tr>";
+      });
+      html += "</tbody></table>";
+    }
+    if (data.subscriptions && data.subscriptions.length) {
+      html += "<h3 style='margin:1rem 0 0.5rem'>Subscriptions</h3><table><thead><tr><th>Destination</th><th>Subscribers</th></tr></thead><tbody>";
+      data.subscriptions.forEach(function(s) {
+        html += "<tr><td><code>" + escapeHtml(s.destination) + "</code></td><td>" + (s.subscriberCount || "—") + "</td></tr>";
+      });
+      html += "</tbody></table>";
+    }
+    return html || "<div class='empty'>No WebSocket mappings</div>";
+  }
+
+  function renderQueue(data) {
+    if (!data || !data.length) return "<div class='empty'>No queue jobs (or @cinnabun/queue not installed)</div>";
+    let html = "<table><thead><tr><th>Queue</th><th>Job Name</th><th>Handler</th><th>Status</th></tr></thead><tbody>";
+    data.forEach(function(j) {
+      html += "<tr><td>" + escapeHtml(j.queueName) + "</td><td>" + escapeHtml(j.jobName) + "</td><td><code>" + escapeHtml(j.handler) + "</code></td><td>" + escapeHtml(j.status) + "</td></tr>";
+    });
+    html += "</tbody></table>";
+    return html;
+  }
+
+  function renderCache(data) {
+    if (!data || !data.length) return "<div class='empty'>No cache keys (or @cinnabun/cache not installed)</div>";
+    let html = "<table><thead><tr><th>Key</th><th>TTL</th><th>Size</th><th>Last Access</th></tr></thead><tbody>";
+    data.forEach(function(k) {
+      html += "<tr><td><code>" + escapeHtml(k.key) + "</code><button class='copy-btn btn' data-copy='" + attrEscape(k.key) + "'>Copy</button></td><td>" + (k.ttl || "—") + "</td><td>" + (k.size || "—") + "</td><td>" + (k.lastAccess || "—") + "</td></tr>";
+    });
+    html += "</tbody></table>";
+    return html;
+  }
+
+  function renderScheduler(data) {
+    if (!data || !data.length) return "<div class='empty'>No scheduled tasks (or @cinnabun/scheduler not installed)</div>";
+    let html = "<table><thead><tr><th>Task</th><th>Expression</th><th>Next Run</th><th>Last Run</th><th>Status</th></tr></thead><tbody>";
+    data.forEach(function(t) {
+      html += "<tr><td>" + escapeHtml(t.name) + "</td><td><code>" + escapeHtml(t.expression || "—") + "</code></td><td>" + (t.nextRun || "—") + "</td><td>" + (t.lastRun || "—") + "</td><td>" + escapeHtml(t.status) + "</td></tr>";
+    });
+    html += "</tbody></table>";
+    return html;
+  }
+
+  function renderProviders(data) {
+    if (!data || !data.length) return "<div class='empty'>No providers resolved</div>";
+    let html = "<table><thead><tr><th>Provider</th><th>Scope</th><th>Resolved</th></tr></thead><tbody>";
+    data.forEach(function(p) {
+      html += "<tr><td>" + escapeHtml(p.name) + "</td><td>" + escapeHtml(p.scope) + "</td><td>" + (p.resolved ? "Yes" : "No") + "</td></tr>";
+    });
+    html += "</tbody></table>";
+    return html;
+  }
+
+  function renderPlugins(data) {
+    if (!data || !data.length) return "<div class='empty'>No plugins registered</div>";
+    let html = "<table><thead><tr><th>Plugin</th><th>Version</th><th>onInit</th><th>onReady</th><th>onShutdown</th></tr></thead><tbody>";
+    data.forEach(function(p) {
+      html += "<tr><td>" + escapeHtml(p.name) + "</td><td>" + (p.version || "—") + "</td><td>" + (p.onInit ? "✓" : "—") + "</td><td>" + (p.onReady ? "✓" : "—") + "</td><td>" + (p.onShutdown ? "✓" : "Pending") + "</td></tr>";
+    });
+    html += "</tbody></table>";
+    return html;
+  }
+
+  function renderMetrics(data) {
+    if (!data || data.available === false) return "<div class='empty'>Metrics not available. Add MetricsInterceptor to collect request metrics.</div>";
+    let html = "<div class='card'><h3>Summary</h3>";
+    html += "<p><strong>Total Requests:</strong> " + data.totalRequests + "</p>";
+    html += "<p><strong>Success Rate:</strong> " + data.successRate.toFixed(1) + "%</p>";
+    html += "<p><strong>Error Rate:</strong> " + data.errorRate.toFixed(1) + "%</p>";
+    html += "<p><strong>Avg Response Time:</strong> " + data.averageResponseTimeMs + "ms</p></div>";
+    if (data.recentErrors && data.recentErrors.length) {
+      html += "<h3 style='margin:1rem 0 0.5rem'>Recent Errors</h3><table><thead><tr><th>Status</th><th>Method</th><th>Path</th></tr></thead><tbody>";
+      data.recentErrors.forEach(function(e) {
+        html += "<tr><td>" + e.status + "</td><td>" + escapeHtml(e.method) + "</td><td>" + escapeHtml(e.path) + "</td></tr>";
+      });
+      html += "</tbody></table>";
+    }
+    return html;
+  }
+
+  const renderers = {
+    routes: renderRoutes,
+    modules: renderModules,
+    websockets: renderWebSockets,
+    queue: renderQueue,
+    cache: renderCache,
+    scheduler: renderScheduler,
+    providers: renderProviders,
+    plugins: renderPlugins,
+    metrics: renderMetrics
+  };
+
+  const titles = {
+    routes: "Routes",
+    modules: "Modules",
+    websockets: "WebSockets",
+    queue: "Queue Jobs",
+    cache: "Cache Keys",
+    scheduler: "Scheduled Tasks",
+    providers: "DI Providers",
+    plugins: "Plugins",
+    metrics: "Request Metrics"
+  };
+
+  async function loadSection(section) {
+    currentSection = section;
+    document.getElementById("section-title").textContent = titles[section] || section;
+    document.querySelectorAll(".sidebar a").forEach(function(a) {
+      a.classList.toggle("active", a.dataset.section === section);
+    });
+    const content = document.getElementById("content");
+    content.innerHTML = "<div class='loading'>Loading...</div>";
+    const searchEl = document.getElementById("search");
+    searchEl.style.display = (section === "routes" || section === "modules") ? "inline-block" : "none";
+
+    try {
+      const data = await fetchSection(section);
+      const render = renderers[section];
+      content.innerHTML = render ? render(data) : JSON.stringify(data, null, 2);
+    } catch (err) {
+      content.innerHTML = "<div class='error'>" + escapeHtml(err.message) + "</div>";
+    }
+  }
+
+  function applyFilter() {
+    searchTerm = (document.getElementById("search").value || "").trim();
+    loadSection(currentSection);
+  }
+
+  document.querySelectorAll(".sidebar a").forEach(function(a) {
+    a.addEventListener("click", function(e) {
+      e.preventDefault();
+      loadSection(a.dataset.section);
+    });
+  });
+
+  document.getElementById("refresh-btn").addEventListener("click", function() {
+    loadSection(currentSection);
+  });
+
+  document.getElementById("search").addEventListener("input", function() {
+    clearTimeout(window.searchTimeout);
+    window.searchTimeout = setTimeout(applyFilter, 200);
+  });
+
+  setInterval(function() { loadSection(currentSection); }, 10000);
+
+  loadSection("routes");
+})();
+`;
+}
+function escapeHtml(s) {
+    return s
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@cinnabun/dev-dashboard",
+  "version": "0.0.1",
+  "description": "Development-only dashboard for introspection and debugging",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "scripts": {
+    "test": "bun test",
+    "build": "tsc",
+    "prepublishOnly": "bun run build"
+  },
+  "keywords": ["cinnabun", "dev", "dashboard", "introspection"],
+  "peerDependencies": {
+    "@cinnabun/core": "^0.0.3",
+    "@cinnabun/queue": ">=0.0.1",
+    "@cinnabun/cache": ">=0.0.1",
+    "@cinnabun/scheduler": ">=0.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@cinnabun/queue": { "optional": true },
+    "@cinnabun/cache": { "optional": true },
+    "@cinnabun/scheduler": { "optional": true }
+  },
+  "devDependencies": {
+    "@cinnabun/core": "workspace:*",
+    "@cinnabun/testing": "workspace:*",
+    "@types/bun": "latest",
+    "reflect-metadata": "^0.2.2",
+    "typescript": "^5.9.3"
+  }
+}