mcp-react-toolkit 1.3.1 → 1.4.0

package/README.md

@@ -6,7 +6,7 @@ MCP servers for React + TypeScript development automation. Works with Claude Des
 [![CI](https://github.com/Nishant-Chaudhary5338/mcp-toolkit/actions/workflows/ci.yml/badge.svg)](https://github.com/Nishant-Chaudhary5338/mcp-toolkit/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 [![MCP SDK](https://img.shields.io/badge/MCP%20SDK-1.12.0-blue)](https://github.com/modelcontextprotocol/typescript-sdk)
-[![Tests](https://img.shields.io/badge/tests-450%20passing-brightgreen)](#testing)
+[![Tests](https://img.shields.io/badge/tests-passing-brightgreen)](#testing)
 
 ---
 
@@ -41,6 +41,27 @@ Swap in any tool name from `npx mcp-react-toolkit --list`. Restart your client a
 
 ---
 
+## 🖥️ Interactive dashboards
+
+Most MCP tools return raw JSON. The tools here return that JSON **plus a premium, interactive HTML dashboard** — a 0–100 health score, sortable issue triage, light/dark toggle, and one-click *fix* actions that call other tools in the toolkit.
+
+It works three ways from a single self-contained artifact (no server, no external requests):
+
+| Where you run it | What you get |
+|---|---|
+| **Claude Desktop** (MCP Apps) | The dashboard renders **inline in the conversation** (sandboxed iframe); action buttons drive the agent. |
+| **Claude Code (VS Code) · Cursor · CLI** | The JSON **plus a clickable `file://` link** — open it to view the full dashboard in your browser. |
+| **Any browser** | The same HTML opens standalone — fully interactive. |
+
+Two dashboard styles:
+
+- **Audit view** — `legacy-analyzer`, `component-reviewer`, `accessibility-checker`, `dep-auditor`, `typescript-enforcer`, `performance-audit`, `render-analyzer`, `test-gap-analyzer`, `quality-pipeline`, `lighthouse-runner`. Health score, grade, category cards, filter/sort issue table.
+- **Result view** — `component-factory`, `component-fixer`, `code-modernizer`, `storybook-generator`, `generate-tests`, `monorepo-manager`. Files created/changed, diffs, and follow-up actions.
+
+**How it renders:** the tool returns an MCP `resource` with a `ui://` URI and `mimeType: text/html`. Hosts that support [MCP Apps](https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/) render it inline; for every other client the toolkit also writes the HTML to a temp file and returns a `file://` link so you can open it in a browser. Powered by the internal `@mcp-showcase/ui-kit` package — dependency-free, dual light/dark, ~30 KB per report.
+
+---
+
 ## What's here
 
 ```
@@ -184,7 +205,7 @@ git clone https://github.com/Nishant-Chaudhary5338/mcp-toolkit.git
 cd mcp-toolkit
 npm install
 npm run build
-npm test          # 450 tests across all 17 tools
+npm test          # run the full suite across all tools
 npm run dev       # server on :3002, client on :5173
 ```
 
@@ -326,34 +347,13 @@ echo '{"jsonrpc":"2.0","id":1,"method":"tools/list"}' | node tools/legacy-analyz
 
 ## Testing
 
-Each tool has a dedicated test file covering its core logic directly — no MCP transport required.
+Every tool has a co-located Vitest suite covering its core logic directly — no MCP transport required — plus tests for the dashboard renderers and per-tool report mappers.
 
 ```sh
 npm test                                    # all tools
 npm run test -w tools/legacy-analyzer      # single tool
 ```
 
-| Tool | Tests |
-|---|---|
-| render-analyzer | 11 |
-| storybook-generator | 20 |
-| performance-audit | 15 |
-| lighthouse-runner | 13 |
-| test-gap-analyzer | 15 |
-| component-reviewer | 19 |
-| component-fixer | 10 |
-| legacy-analyzer | 14 |
-| json-viewer | 16 |
-| quality-pipeline | 8 |
-| component-factory | 6 |
-| code-modernizer | 8 |
-| dep-auditor | 15 |
-| accessibility-checker | 15 |
-| generate-tests | 14 |
-| typescript-enforcer | 22 |
-| monorepo-manager | 30 |
-| **Total** | **450** |
-
 CI runs on every push and PR against Node 20 and 22.
 
 ---

package/node_modules/@mcp-showcase/shared/build/McpServerBase.d.ts

@@ -11,6 +11,19 @@ export declare abstract class McpServerBase {
     private setupHandlers;
     private setupErrorHandlers;
     protected success<T extends Record<string, unknown>>(data: T): ToolResult;
+    /**
+     * Return machine-readable data (so the model can reason over it), an
+     * interactive UI resource (MCP Apps hosts render it inline in a sandboxed
+     * iframe), AND a clickable file:// link to the same dashboard written to a
+     * temp file — so clients without MCP-Apps rendering (e.g. Claude Code in
+     * VS Code) can still open the visual report in a browser.
+     */
+    protected successWithUI<T extends Record<string, unknown>>(data: T, ui: {
+        uri: string;
+        html: string;
+    }): ToolResult;
+    /** Write the dashboard HTML to a stable temp file; return its file:// URL (null on failure). */
+    private writeReportFile;
     protected error(error: unknown): ToolResult;
     run(): Promise<void>;
     shutdown(): Promise<void>;

package/node_modules/@mcp-showcase/shared/build/McpServerBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"McpServerBase.d.ts","sourceRoot":"","sources":["../src/McpServerBase.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAQnE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExF,8BAAsB,aAAa;IACjC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,QAAQ,EAAE,YAAY,CAAC;IACjC,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC;gBAEnB,MAAM,EAAE,YAAY;IAchC,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IAExC,SAAS,CAAC,OAAO,CACf,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,cAAc,CAAC,aAAa,CAAC,EAC1C,OAAO,EAAE,WAAW,GACnB,IAAI;IAIP,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,kBAAkB;IAS1B,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,UAAU;IAMzE,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,UAAU;IAQrC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IAMpB,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;CAIhC"}
+{"version":3,"file":"McpServerBase.d.ts","sourceRoot":"","sources":["../src/McpServerBase.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAWnE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExF,8BAAsB,aAAa;IACjC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,QAAQ,EAAE,YAAY,CAAC;IACjC,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC;gBAEnB,MAAM,EAAE,YAAY;IAchC,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI;IAExC,SAAS,CAAC,OAAO,CACf,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,cAAc,CAAC,aAAa,CAAC,EAC1C,OAAO,EAAE,WAAW,GACnB,IAAI;IAIP,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,kBAAkB;IAS1B,SAAS,CAAC,OAAO,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,UAAU;IAMzE;;;;;;OAMG;IACH,SAAS,CAAC,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvD,IAAI,EAAE,CAAC,EACP,EAAE,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAChC,UAAU;IAkBb,gGAAgG;IAChG,OAAO,CAAC,eAAe;IAavB,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,UAAU;IAQrC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IAMpB,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;CAIhC"}

package/node_modules/@mcp-showcase/shared/build/McpServerBase.js

@@ -4,6 +4,9 @@
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { CallToolRequestSchema, ErrorCode, ListToolsRequestSchema, McpError, } from '@modelcontextprotocol/sdk/types.js';
+import { writeFileSync, mkdirSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
 import { ToolRegistry } from './ToolRegistry.js';
 export class McpServerBase {
     server;
@@ -54,6 +57,43 @@ export class McpServerBase {
             content: [{ type: 'text', text: JSON.stringify({ success: true, ...data }, null, 2) }],
         };
     }
+    /**
+     * Return machine-readable data (so the model can reason over it), an
+     * interactive UI resource (MCP Apps hosts render it inline in a sandboxed
+     * iframe), AND a clickable file:// link to the same dashboard written to a
+     * temp file — so clients without MCP-Apps rendering (e.g. Claude Code in
+     * VS Code) can still open the visual report in a browser.
+     */
+    successWithUI(data, ui) {
+        const content = [
+            { type: 'text', text: JSON.stringify({ success: true, ...data }, null, 2) },
+        ];
+        const fileUrl = this.writeReportFile(ui.uri, ui.html);
+        if (fileUrl) {
+            content.push({
+                type: 'text',
+                text: `📊 Interactive dashboard: ${fileUrl}\n` +
+                    `Open that link in a browser to explore the report (sortable issues, theme toggle, fix actions). ` +
+                    `In Claude Desktop it renders inline automatically.`,
+            });
+        }
+        content.push({ type: 'resource', resource: { uri: ui.uri, mimeType: 'text/html', text: ui.html } });
+        return { content };
+    }
+    /** Write the dashboard HTML to a stable temp file; return its file:// URL (null on failure). */
+    writeReportFile(uri, html) {
+        try {
+            const slug = uri.replace(/^ui:\/\//, '').replace(/[^a-zA-Z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'report';
+            const dir = join(tmpdir(), 'mcp-react-toolkit');
+            mkdirSync(dir, { recursive: true });
+            const filePath = join(dir, `${slug}.html`);
+            writeFileSync(filePath, html, 'utf8');
+            return `file://${filePath}`;
+        }
+        catch {
+            return null;
+        }
+    }
     error(error) {
         const msg = error instanceof Error ? error.message : String(error);
         return {

package/node_modules/@mcp-showcase/shared/build/McpServerBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"McpServerBase.js","sourceRoot":"","sources":["../src/McpServerBase.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"McpServerBase.js","sourceRoot":"","sources":["../src/McpServerBase.ts"],"names":[],"mappings":"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"}

package/node_modules/@mcp-showcase/shared/build/types.d.ts

@@ -21,11 +21,22 @@ export interface ToolResult {
     _meta?: Record<string, unknown>;
     [key: string]: unknown;
 }
+export interface EmbeddedResource {
+    /** Resource identifier. UI resources use the `ui://` scheme (MCP Apps / MCP-UI). */
+    uri: string;
+    mimeType?: string;
+    /** Inline text payload (e.g. self-contained HTML for a `text/html` UI resource). */
+    text?: string;
+    /** Base64 binary payload. */
+    blob?: string;
+}
 export interface ToolContent {
     type: 'text' | 'image' | 'resource';
     text?: string;
     data?: string;
     mimeType?: string;
+    /** Present when `type === 'resource'`. */
+    resource?: EmbeddedResource;
 }
 export interface ServerConfig {
     name: string;

package/node_modules/@mcp-showcase/shared/build/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,IAAI,EAAE,QAAQ,CAAC;QACf,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QAC3C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,IAAI,EAAE,QAAQ,CAAC;QACf,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;QAC3C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC"}

package/node_modules/@mcp-showcase/shared/src/McpServerBase.ts

@@ -10,6 +10,9 @@ import {
   ListToolsRequestSchema,
   McpError,
 } from '@modelcontextprotocol/sdk/types.js';
+import { writeFileSync, mkdirSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
 import { ToolRegistry } from './ToolRegistry.js';
 import type { ServerConfig, ToolDefinition, ToolHandler, ToolResult } from './types.js';
 
@@ -79,6 +82,48 @@ export abstract class McpServerBase {
     };
   }
 
+  /**
+   * Return machine-readable data (so the model can reason over it), an
+   * interactive UI resource (MCP Apps hosts render it inline in a sandboxed
+   * iframe), AND a clickable file:// link to the same dashboard written to a
+   * temp file — so clients without MCP-Apps rendering (e.g. Claude Code in
+   * VS Code) can still open the visual report in a browser.
+   */
+  protected successWithUI<T extends Record<string, unknown>>(
+    data: T,
+    ui: { uri: string; html: string }
+  ): ToolResult {
+    const content: ToolResult['content'] = [
+      { type: 'text', text: JSON.stringify({ success: true, ...data }, null, 2) },
+    ];
+    const fileUrl = this.writeReportFile(ui.uri, ui.html);
+    if (fileUrl) {
+      content.push({
+        type: 'text',
+        text:
+          `📊 Interactive dashboard: ${fileUrl}\n` +
+          `Open that link in a browser to explore the report (sortable issues, theme toggle, fix actions). ` +
+          `In Claude Desktop it renders inline automatically.`,
+      });
+    }
+    content.push({ type: 'resource', resource: { uri: ui.uri, mimeType: 'text/html', text: ui.html } });
+    return { content };
+  }
+
+  /** Write the dashboard HTML to a stable temp file; return its file:// URL (null on failure). */
+  private writeReportFile(uri: string, html: string): string | null {
+    try {
+      const slug = uri.replace(/^ui:\/\//, '').replace(/[^a-zA-Z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'report';
+      const dir = join(tmpdir(), 'mcp-react-toolkit');
+      mkdirSync(dir, { recursive: true });
+      const filePath = join(dir, `${slug}.html`);
+      writeFileSync(filePath, html, 'utf8');
+      return `file://${filePath}`;
+    } catch {
+      return null;
+    }
+  }
+
   protected error(error: unknown): ToolResult {
     const msg = error instanceof Error ? error.message : String(error);
     return {

package/node_modules/@mcp-showcase/shared/src/types.ts

@@ -28,11 +28,23 @@ export interface ToolResult {
   [key: string]: unknown;
 }
 
+export interface EmbeddedResource {
+  /** Resource identifier. UI resources use the `ui://` scheme (MCP Apps / MCP-UI). */
+  uri: string;
+  mimeType?: string;
+  /** Inline text payload (e.g. self-contained HTML for a `text/html` UI resource). */
+  text?: string;
+  /** Base64 binary payload. */
+  blob?: string;
+}
+
 export interface ToolContent {
   type: 'text' | 'image' | 'resource';
   text?: string;
   data?: string;
   mimeType?: string;
+  /** Present when `type === 'resource'`. */
+  resource?: EmbeddedResource;
 }
 
 export interface ServerConfig {

package/node_modules/@mcp-showcase/ui-kit/README.md

@@ -0,0 +1,30 @@
+# @mcp-showcase/ui-kit
+
+Reusable **single-file HTML report UI** for MCP tools — dependency-free, dual-theme (light/dark), and agentic. Any tool that maps its output to the `HealthReport` schema gets a premium interactive dashboard that renders inside an MCP host (MCP Apps / `ui://`) **and** opens standalone in a browser.
+
+Flagship producer: `legacy-analyzer` → **Codebase Health Studio**.
+
+## Exports
+
+```ts
+import { renderReportHTML, SAMPLE_REPORT, type HealthReport } from "@mcp-showcase/ui-kit";
+
+const html = renderReportHTML(myReport); // one self-contained <!doctype html> string
+```
+
+- `renderReportHTML(report: HealthReport): string` — styles, runtime and data all inlined (no external requests, safe for a sandboxed iframe).
+- `HealthReport` / `ReportIssue` / `ReportCategory` / `ReportAction` — the tool-agnostic contract.
+- `SAMPLE_REPORT` — fixture used by the standalone demo (`npm run build` → `demo/index.html`).
+
+## Surfaces (DataAdapter)
+
+The runtime detects where it is running:
+
+- **Embedded in an MCP host** → action buttons `postMessage` MCP-UI intents (`tool` / `prompt`) to the parent so the agent runs the fix.
+- **Standalone browser tab** → graceful fallback: copies a ready-to-paste prompt to the clipboard.
+
+Data is read from `window.__REPORT__`, then an inline `#report-data` script, then a `?data=` base64 URL param.
+
+## Why no framework
+
+The artifact must be a tiny, robust, self-contained file for a sandboxed iframe. Plain CSS + browser JS keeps the bundle ~38 KB with zero supply chain. The React/Vite path is a documented future swap if richer interactivity is needed.

package/node_modules/@mcp-showcase/ui-kit/build/components.d.ts

@@ -0,0 +1,10 @@
+import { HealthReport, ReportAction } from "./types.js";
+export declare function buildHeader(report: HealthReport): string;
+export declare function buildHero(report: HealthReport): string;
+declare function actionButtons(actions: ReportAction[] | undefined, primaryFirst?: boolean): string;
+export declare function buildFixFirst(report: HealthReport): string;
+export declare function buildCategories(report: HealthReport): string;
+export declare function buildTriageShell(report: HealthReport): string;
+export declare function buildChrome(): string;
+export { actionButtons };
+//# sourceMappingURL=components.d.ts.map

package/node_modules/@mcp-showcase/ui-kit/build/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,YAAY,EAEZ,YAAY,EAGb,MAAM,YAAY,CAAC;AAcpB,wBAAgB,WAAW,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAsBxD;AAsBD,wBAAgB,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAkBtD;AAED,iBAAS,aAAa,CAAC,OAAO,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,YAAY,UAAQ,GAAG,MAAM,CAQxF;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAiB1D;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAkB5D;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CA+B7D;AAED,wBAAgB,WAAW,IAAI,MAAM,CAcpC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/node_modules/@mcp-showcase/ui-kit/build/components.js

@@ -0,0 +1,177 @@
+// ============================================================================
+// SERVER-SIDE COMPONENT BUILDERS — pure string -> HTML. No framework.
+// The hero, category cards and fix-first queue are rendered statically for an
+// instant premium paint; the interactive triage table + drawer are hydrated
+// client-side by runtime.ts from the injected report data.
+// ============================================================================
+import { esc } from "./escape.js";
+import { scoreToBand, scoreToGrade, } from "./types.js";
+const SUN = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>`;
+const MOON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>`;
+const SEARCH = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>`;
+function verdict(score) {
+    if (score >= 85)
+        return "Healthy & well-structured";
+    if (score >= 70)
+        return "Solid, with a few rough edges";
+    if (score >= 55)
+        return "Workable, but carrying debt";
+    if (score >= 40)
+        return "Significant tech debt";
+    return "High-risk — needs intervention";
+}
+export function buildHeader(report) {
+    return /* html */ `
+  <header class="hdr">
+    <div class="brand">
+      <span class="dot" aria-hidden="true">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+      </span>
+      <div style="min-width:0">
+        <h1>${esc(report.meta.title)}</h1>
+        <p class="sub">${esc(report.meta.target)}</p>
+      </div>
+    </div>
+    <div class="hdr-actions">
+      <button class="btn icon" id="theme-toggle" type="button" aria-label="Toggle colour theme" title="Toggle theme">
+        <span class="theme-sun" hidden>${SUN}</span><span class="theme-moon">${MOON}</span>
+      </button>
+      <button class="btn" id="export-btn" type="button" title="Copy report as Markdown">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+        Export
+      </button>
+    </div>
+  </header>`;
+}
+function gauge(score) {
+    const r = 64;
+    const circ = 2 * Math.PI * r;
+    const pct = Math.max(0, Math.min(100, score)) / 100;
+    const offset = circ * (1 - pct);
+    return /* html */ `
+  <div class="gauge" role="img" aria-label="Health score ${esc(score)} out of 100">
+    <svg width="148" height="148" viewBox="0 0 148 148">
+      <circle class="track" cx="74" cy="74" r="${r}" stroke-width="11"/>
+      <circle class="arc" cx="74" cy="74" r="${r}" stroke-width="11"
+        stroke-dasharray="${circ.toFixed(1)}" stroke-dashoffset="${circ.toFixed(1)}"
+        data-target="${offset.toFixed(1)}"/>
+    </svg>
+    <div class="center">
+      <div class="score num" data-count="${esc(score)}">0</div>
+      <div class="of">/ 100</div>
+    </div>
+  </div>`;
+}
+export function buildHero(report) {
+    const band = scoreToBand(report.score);
+    const grade = scoreToGrade(report.score);
+    const chips = (report.chips ?? [])
+        .map((c) => `<span class="chip"><span>${esc(c.label)}</span><b>${esc(c.value)}</b></span>`)
+        .join("");
+    return /* html */ `
+  <section class="hero" data-band="${band}">
+    ${gauge(report.score)}
+    <div class="hero-meta">
+      <div class="grade-row">
+        <span class="grade">Grade ${esc(grade)}</span>
+        <span class="verdict">${esc(verdict(report.score))}</span>
+      </div>
+      <p>${esc(report.totalIssues)} issue${report.totalIssues === 1 ? "" : "s"} found across ${esc(report.categories.length)} areas${report.meta.subtitle ? " · " + esc(report.meta.subtitle) : ""}.</p>
+      <div class="chips">${chips}</div>
+    </div>
+  </section>`;
+}
+function actionButtons(actions, primaryFirst = false) {
+    if (!actions || !actions.length)
+        return "";
+    return actions
+        .map((a, i) => {
+        const cls = primaryFirst && i === 0 ? "btn primary" : "btn";
+        return `<button class="${cls}" type="button" data-action="${esc(a.id)}">${esc(a.label)}</button>`;
+    })
+        .join("");
+}
+export function buildFixFirst(report) {
+    const actions = report.topActions ?? [];
+    if (!actions.length)
+        return "";
+    const items = actions
+        .map((a, i) => {
+        const sub = a.kind === "tool" ? `Runs ${esc(a.tool)}` : a.kind === "prompt" ? "Asks the agent" : "Opens link";
+        return /* html */ `
+      <div class="qitem" data-action="${esc(a.id)}" role="button" tabindex="0">
+        <span class="rank num">${i + 1}</span>
+        <span class="qt"><span class="t">${esc(a.label)}</span><span class="s">${sub}</span></span>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--faint)"><path d="m9 18 6-6-6-6"/></svg>
+      </div>`;
+    })
+        .join("");
+    return /* html */ `
+  <div class="sec"><h2>Fix-first queue</h2><span class="count">${actions.length} prioritised</span></div>
+  <div class="queue">${items}</div>`;
+}
+export function buildCategories(report) {
+    const card = (c) => {
+        const hasScore = typeof c.score === "number";
+        const pct = hasScore ? Math.max(0, Math.min(100, c.score)) : 0;
+        return /* html */ `
+    <div class="card" data-category="${esc(c.id)}" role="button" tabindex="0" aria-label="Filter issues by ${esc(c.name)}">
+      <div class="top">
+        <span class="name">${esc(c.name)}</span>
+        <span class="badge ${esc(c.status)}">${hasScore ? esc(pct) : esc(c.status)}</span>
+      </div>
+      <div class="sum">${esc(c.summary)}</div>
+      ${hasScore ? `<div class="bar"><i class="${esc(c.status)}" data-w="${pct}" style="width:0"></i></div>` : ""}
+      <div class="foot"><span>${esc(c.issueCount)} issue${c.issueCount === 1 ? "" : "s"}</span><span>View →</span></div>
+    </div>`;
+    };
+    return /* html */ `
+  <div class="sec"><h2>Areas</h2><span class="count">${report.categories.length} analysed</span></div>
+  <div class="cards">${report.categories.map(card).join("")}</div>`;
+}
+export function buildTriageShell(report) {
+    const sevFilters = ["all", "critical", "high", "medium", "low"]
+        .map((s, i) => `<button type="button" data-sev="${s}" aria-pressed="${i === 0 ? "true" : "false"}">${s[0].toUpperCase() + s.slice(1)}</button>`)
+        .join("");
+    return /* html */ `
+  <div class="sec"><h2>Issues</h2><span class="count" id="issue-count">${report.issues.length} total</span></div>
+  <div class="toolbar">
+    <label class="search">
+      ${SEARCH}
+      <input id="search" type="search" placeholder="Search issues, files, categories…" aria-label="Search issues"/>
+    </label>
+    <div class="filter" role="group" aria-label="Filter by severity">${sevFilters}</div>
+  </div>
+  <div class="table-card">
+    <table>
+      <thead><tr>
+        <th data-sort="severity" aria-sort="descending">Severity<span class="arr">▼</span></th>
+        <th data-sort="title">Issue<span class="arr">▼</span></th>
+        <th data-sort="category">Area<span class="arr">▼</span></th>
+        <th data-sort="file">File<span class="arr">▼</span></th>
+      </tr></thead>
+      <tbody id="rows"></tbody>
+    </table>
+    <div class="empty" id="empty" hidden>
+      <div class="big">Nothing matches</div>
+      <div>Try clearing the search or severity filter.</div>
+    </div>
+  </div>`;
+}
+export function buildChrome() {
+    return /* html */ `
+  <div class="scrim" id="scrim"></div>
+  <aside class="drawer" id="drawer" role="dialog" aria-modal="true" aria-labelledby="d-title">
+    <header>
+      <h3 id="d-title"></h3>
+      <button class="btn icon" id="d-close" type="button" aria-label="Close detail">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+    </header>
+    <div class="body" id="d-body"></div>
+    <div class="acts" id="d-acts"></div>
+  </aside>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>`;
+}
+export { actionButtons };
+//# sourceMappingURL=components.js.map

package/node_modules/@mcp-showcase/ui-kit/build/components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"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"}

package/node_modules/@mcp-showcase/ui-kit/build/escape.d.ts

@@ -0,0 +1,3 @@
+/** Escape a string for safe interpolation into HTML text/attribute context. */
+export declare function esc(value: unknown): string;
+//# sourceMappingURL=escape.d.ts.map

package/node_modules/@mcp-showcase/ui-kit/build/escape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape.d.ts","sourceRoot":"","sources":["../src/escape.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,wBAAgB,GAAG,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAO1C"}

package/node_modules/@mcp-showcase/ui-kit/build/escape.js

@@ -0,0 +1,10 @@
+/** Escape a string for safe interpolation into HTML text/attribute context. */
+export function esc(value) {
+    return String(value ?? "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+//# sourceMappingURL=escape.js.map

package/node_modules/@mcp-showcase/ui-kit/build/escape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"escape.js","sourceRoot":"","sources":["../src/escape.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,UAAU,GAAG,CAAC,KAAc;IAChC,OAAO,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAC5B,CAAC"}

package/node_modules/@mcp-showcase/ui-kit/build/fixture.d.ts

@@ -0,0 +1,4 @@
+import { HealthReport } from "./types.js";
+/** Representative sample report — drives the standalone browser demo and tests. */
+export declare const SAMPLE_REPORT: HealthReport;
+//# sourceMappingURL=fixture.d.ts.map

package/node_modules/@mcp-showcase/ui-kit/build/fixture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixture.d.ts","sourceRoot":"","sources":["../src/fixture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,mFAAmF;AACnF,eAAO,MAAM,aAAa,EAAE,YAiD3B,CAAC"}

package/node_modules/@mcp-showcase/ui-kit/build/fixture.js

@@ -0,0 +1,52 @@
+/** Representative sample report — drives the standalone browser demo and tests. */
+export const SAMPLE_REPORT = {
+    meta: {
+        title: "Codebase Health Studio",
+        subtitle: "React 18 · CRA",
+        target: "acme-dashboard",
+        generatedAt: "2026-06-27",
+        tool: "legacy-analyzer",
+    },
+    score: 62,
+    totalIssues: 18,
+    chips: [
+        { label: "Framework", value: "Create React App" },
+        { label: "React", value: "18.2.0" },
+        { label: "Language", value: "JavaScript" },
+        { label: "Components", value: "94" },
+    ],
+    topActions: [
+        { id: "fix-god", label: "Split the 3 god components", kind: "tool", tool: "component-fixer", params: { target: "components" }, fallback: "Refactor Dashboard.jsx, Settings.jsx and Reports.jsx into smaller components." },
+        { id: "plan", label: "Generate full refactor plan", kind: "tool", tool: "generate-refactor-plan", params: { path: "." }, fallback: "Generate a refactor plan for acme-dashboard." },
+        { id: "migrate-ts", label: "Migrate the API layer to TypeScript", kind: "prompt", prompt: "Convert src/api/*.js to TypeScript with typed responses and a centralised client." },
+    ],
+    categories: [
+        { id: "components", name: "Components", score: 48, status: "warn", summary: "3 god components over 300 lines; 11 with mixed responsibilities.", issueCount: 6, details: [{ label: "Total", value: "94" }, { label: "Large", value: "3" }] },
+        { id: "state", name: "State", score: 55, status: "warn", summary: "Redux without normalisation; derived state stored in the store.", issueCount: 3 },
+        { id: "api", name: "API layer", score: 40, status: "bad", summary: "Scattered axios calls, 4 duplicated endpoints, no central client.", issueCount: 4 },
+        { id: "routing", name: "Routing", score: 78, status: "good", summary: "react-router v6, nested routes, but no lazy loading.", issueCount: 1 },
+        { id: "styling", name: "Styling", score: 60, status: "warn", summary: "Mixed CSS + styled-components; 23 hardcoded colours.", issueCount: 2 },
+        { id: "deps", name: "Dependencies", score: 84, status: "good", summary: "2 unused deps; moment.js inflating the bundle.", issueCount: 2 },
+    ],
+    issues: [
+        { id: "i1", category: "components", severity: "critical", title: "God component: Dashboard.jsx (612 lines)", description: "Dashboard.jsx mixes data fetching, layout, and 4 unrelated widgets. It is the single largest re-render hotspot.", file: "src/pages/Dashboard.jsx", meta: [{ label: "Lines", value: "612" }, { label: "Responsibilities", value: "5" }], actions: [{ id: "fix-i1", label: "Split with component-fixer", kind: "tool", tool: "component-fixer", params: { file: "src/pages/Dashboard.jsx" }, fallback: "Split src/pages/Dashboard.jsx into smaller components." }, { id: "explain-i1", label: "Explain the risk", kind: "prompt", prompt: "Explain why a 612-line god component hurts maintainability and performance in React." }] },
+        { id: "i2", category: "api", severity: "critical", title: "Duplicated endpoint: GET /users called 4 ways", description: "Four components call GET /users with slightly different axios config — no shared client or cache.", file: "src/api/", meta: [{ label: "Call sites", value: "4" }], actions: [{ id: "fix-i2", label: "Centralise the API client", kind: "prompt", prompt: "Create a centralised typed axios client and replace the 4 duplicate GET /users call sites." }] },
+        { id: "i3", category: "components", severity: "high", title: "God component: Settings.jsx (438 lines)", file: "src/pages/Settings.jsx", meta: [{ label: "Lines", value: "438" }], actions: [{ id: "fix-i3", label: "Split with component-fixer", kind: "tool", tool: "component-fixer", params: { file: "src/pages/Settings.jsx" }, fallback: "Split src/pages/Settings.jsx." }] },
+        { id: "i4", category: "api", severity: "high", title: "No central HTTP client — axios imported in 19 files", file: "src/", actions: [] },
+        { id: "i5", category: "state", severity: "high", title: "Derived state stored in Redux (totals recomputed on every action)", file: "src/store/cartSlice.js", actions: [{ id: "explain-i5", label: "How to fix", kind: "prompt", prompt: "Show how to replace derived state in Redux with reselect selectors." }] },
+        { id: "i6", category: "deps", severity: "high", title: "moment.js adds ~230KB — replace with date-fns or Temporal", file: "package.json", meta: [{ label: "Bundle impact", value: "~230KB" }], actions: [] },
+        { id: "i7", category: "components", severity: "medium", title: "Prop drilling 4 levels deep for `user`", file: "src/pages/Reports.jsx", actions: [] },
+        { id: "i8", category: "styling", severity: "medium", title: "23 hardcoded hex colours outside the token system", file: "src/styles/", actions: [] },
+        { id: "i9", category: "state", severity: "medium", title: "No memoised selectors — components re-render on unrelated store changes", file: "src/store/", actions: [] },
+        { id: "i10", category: "api", severity: "medium", title: "Errors swallowed — 11 axios calls have no .catch", file: "src/api/", actions: [] },
+        { id: "i11", category: "components", severity: "medium", title: "List rendered with array index as key", file: "src/components/Table.jsx", actions: [] },
+        { id: "i12", category: "routing", severity: "medium", title: "No route-level code splitting (React.lazy)", file: "src/App.jsx", actions: [] },
+        { id: "i13", category: "deps", severity: "low", title: "2 unused dependencies in package.json", file: "package.json", actions: [] },
+        { id: "i14", category: "styling", severity: "low", title: "Duplicate utility classes across 6 CSS files", file: "src/styles/", actions: [] },
+        { id: "i15", category: "components", severity: "low", title: "12 components missing displayName", file: "src/components/", actions: [] },
+        { id: "i16", category: "api", severity: "low", title: "Base URL hardcoded instead of env var", file: "src/api/config.js", actions: [] },
+        { id: "i17", category: "components", severity: "low", title: "Inline arrow functions in 31 render paths", file: "src/", actions: [] },
+        { id: "i18", category: "state", severity: "low", title: "Local component state duplicates Redux store data", file: "src/pages/Profile.jsx", actions: [] },
+    ],
+};
+//# sourceMappingURL=fixture.js.map