mcp-react-toolkit 1.3.0 → 1.4.0

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

@@ -0,0 +1,191 @@
+// ============================================================================
+// 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 {
+  HealthReport,
+  ReportCategory,
+  ReportAction,
+  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: number): string {
+  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: HealthReport): string {
+  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: number): string {
+  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: HealthReport): string {
+  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: ReportAction[] | undefined, primaryFirst = false): string {
+  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: HealthReport): string {
+  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: HealthReport): string {
+  const card = (c: ReportCategory): string => {
+    const hasScore = typeof c.score === "number";
+    const pct = hasScore ? Math.max(0, Math.min(100, c.score as number)) : 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: HealthReport): string {
+  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(): string {
+  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 };

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

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

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

@@ -0,0 +1,53 @@
+import { HealthReport } from "./types.js";
+
+/** Representative sample report — drives the standalone browser demo and tests. */
+export const SAMPLE_REPORT: HealthReport = {
+  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: [] },
+  ],
+};

package/node_modules/@mcp-showcase/ui-kit/src/generate-template.ts

@@ -0,0 +1,21 @@
+// Build step: emit a standalone browser demo (fixture baked in) so the report
+// UI can be opened directly in a browser — the public showcase artifact.
+import { writeFileSync, mkdirSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { renderReportHTML } from "./render.js";
+import { renderResultHTML } from "./result-render.js";
+import { SAMPLE_REPORT } from "./fixture.js";
+import { SAMPLE_RESULT } from "./result-fixture.js";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const outDir = resolve(here, "..", "demo");
+mkdirSync(outDir, { recursive: true });
+
+const html = renderReportHTML(SAMPLE_REPORT);
+writeFileSync(resolve(outDir, "index.html"), html, "utf8");
+console.error(`[ui-kit] wrote demo/index.html (${(html.length / 1024).toFixed(1)} KB)`);
+
+const resultHtml = renderResultHTML(SAMPLE_RESULT);
+writeFileSync(resolve(outDir, "result.html"), resultHtml, "utf8");
+console.error(`[ui-kit] wrote demo/result.html (${(resultHtml.length / 1024).toFixed(1)} KB)`);

package/node_modules/@mcp-showcase/ui-kit/src/index.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from "vitest";
+import { renderReportHTML, SAMPLE_REPORT, scoreToGrade, scoreToBand } from "./index.js";
+import { esc } from "./escape.js";
+import type { HealthReport } from "./index.js";
+
+describe("scoreToGrade", () => {
+  it("maps score ranges to grades", () => {
+    expect(scoreToGrade(100)).toBe("A+");
+    expect(scoreToGrade(88)).toBe("A");
+    expect(scoreToGrade(72)).toBe("B");
+    expect(scoreToGrade(60)).toBe("C");
+    expect(scoreToGrade(42)).toBe("D");
+    expect(scoreToGrade(20)).toBe("F");
+  });
+});
+
+describe("scoreToBand", () => {
+  it("buckets scores into accent bands", () => {
+    expect(scoreToBand(80)).toBe("good");
+    expect(scoreToBand(50)).toBe("warn");
+    expect(scoreToBand(30)).toBe("bad");
+  });
+});
+
+describe("esc", () => {
+  it("escapes HTML-significant characters", () => {
+    expect(esc(`<img src=x onerror="a">`)).toBe("&lt;img src=x onerror=&quot;a&quot;&gt;");
+    expect(esc("a & b")).toBe("a &amp; b");
+    expect(esc(null)).toBe("");
+  });
+});
+
+describe("renderReportHTML", () => {
+  const html = renderReportHTML(SAMPLE_REPORT);
+
+  it("produces a complete self-contained document", () => {
+    expect(html.startsWith("<!doctype html>")).toBe(true);
+    expect(html).toContain("<style>");
+    expect(html).toContain("data-theme=\"light\"");
+    // no external resource requests
+    expect(html).not.toMatch(/<link[^>]+href=/i);
+    expect(html).not.toMatch(/<script[^>]+src=/i);
+  });
+
+  it("renders the headline score and grade", () => {
+    expect(html).toContain('data-count="62"');
+    expect(html).toContain("Grade C");
+  });
+
+  it("renders every category and embeds the report data", () => {
+    for (const c of SAMPLE_REPORT.categories) expect(html).toContain(esc(c.name));
+    expect(html).toContain('id="report-data"');
+    const json = html.split('id="report-data" type="application/json">')[1].split("</script>")[0];
+    const parsed = JSON.parse(json.replace(/\\u003c/g, "<")) as HealthReport;
+    expect(parsed.issues).toHaveLength(SAMPLE_REPORT.issues.length);
+  });
+
+  it("ships the theme toggle and agentic action hooks", () => {
+    expect(html).toContain('id="theme-toggle"');
+    expect(html).toContain('data-action="fix-god"');
+  });
+
+  it("escapes a malicious title so it cannot break out of the document", () => {
+    const evil: HealthReport = {
+      ...SAMPLE_REPORT,
+      meta: { ...SAMPLE_REPORT.meta, title: `</script><img src=x onerror=alert(1)>` },
+    };
+    const out = renderReportHTML(evil);
+    expect(out).not.toContain("<img src=x onerror=alert(1)>");
+    expect(out).not.toContain("</script><img");
+  });
+});

package/node_modules/@mcp-showcase/ui-kit/src/index.ts

@@ -0,0 +1,6 @@
+// @mcp-showcase/ui-kit — reusable single-file HTML report UI for MCP tools.
+export * from "./types.js";
+export { renderReportHTML } from "./render.js";
+export { renderResultHTML } from "./result-render.js";
+export { SAMPLE_REPORT } from "./fixture.js";
+export { SAMPLE_RESULT } from "./result-fixture.js";

package/node_modules/@mcp-showcase/ui-kit/src/render.ts

@@ -0,0 +1,48 @@
+// ============================================================================
+// renderReportHTML — assembles ONE self-contained HTML document from a
+// HealthReport. Styles + runtime + data are all inlined (no external requests),
+// so the result drops straight into a sandboxed MCP iframe or a browser tab.
+// ============================================================================
+
+import { STYLES } from "./theme.js";
+import { RUNTIME } from "./runtime.js";
+import { esc } from "./escape.js";
+import {
+  buildHeader,
+  buildHero,
+  buildFixFirst,
+  buildCategories,
+  buildTriageShell,
+  buildChrome,
+} from "./components.js";
+import { HealthReport } from "./types.js";
+
+/** Embed JSON safely inside a <script> tag (neutralise `</script>` break-out). */
+function embedJson(data: unknown): string {
+  return JSON.stringify(data).replace(/</g, "\\u003c");
+}
+
+export function renderReportHTML(report: HealthReport): string {
+  return `<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>${esc(report.meta.title)} — ${esc(report.meta.target)}</title>
+<style>${STYLES}</style>
+</head>
+<body>
+<div class="wrap">
+${buildHeader(report)}
+${buildHero(report)}
+${buildFixFirst(report)}
+${buildCategories(report)}
+${buildTriageShell(report)}
+<div class="foot-note">${esc(report.meta.tool)} · generated ${esc(report.meta.generatedAt)} · mcp-react-toolkit</div>
+</div>
+${buildChrome()}
+<script id="report-data" type="application/json">${embedJson(report)}</script>
+<script>${RUNTIME}</script>
+</body>
+</html>`;
+}

package/node_modules/@mcp-showcase/ui-kit/src/result-components.ts

@@ -0,0 +1,112 @@
+// ============================================================================
+// SERVER-SIDE BUILDERS for the RESULT view (generative/action tools).
+// Reuses the shared chrome (header, drawer, toast) and CSS classes.
+// ============================================================================
+
+import { esc } from "./escape.js";
+import { buildChrome } from "./components.js";
+import { ResultReport, FileChange, ResultSection, statusToBand } 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 STATUS_LABEL: Record<string, string> = { success: "Success", partial: "Partial", noop: "No changes" };
+
+export function buildResultHeader(report: ResultReport): string {
+  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 summary 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>`;
+}
+
+export function buildResultHero(report: ResultReport): string {
+  const band = statusToBand(report.status);
+  const chips = (report.stats ?? [])
+    .map((s) => `<span class="chip"><span>${esc(s.label)}</span><b>${esc(s.value)}</b></span>`)
+    .join("");
+  return /* html */ `
+  <section class="result-hero" data-band="${band}">
+    <span class="glyph" aria-hidden="true">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+    </span>
+    <div class="rh-main">
+      <div class="rh-title">${esc(report.headline)}</div>
+      ${report.meta.subtitle ? `<div class="rh-sub">${esc(report.meta.subtitle)}</div>` : ""}
+      ${chips ? `<div class="chips" style="margin-top:10px">${chips}</div>` : ""}
+    </div>
+    <span class="status-pill ${band}">${esc(STATUS_LABEL[report.status] ?? report.status)}</span>
+  </section>`;
+}
+
+export function buildChanges(report: ResultReport): string {
+  const changes = report.changes ?? [];
+  if (!changes.length) return "";
+  const row = (c: FileChange, i: number): string => {
+    const delta =
+      c.additions != null || c.deletions != null
+        ? `<span class="change-delta">${c.additions != null ? `<span class="add">+${esc(c.additions)}</span> ` : ""}${c.deletions != null ? `<span class="del">-${esc(c.deletions)}</span>` : ""}</span>`
+        : "";
+    const clickable = c.diff ? "clickable" : "";
+    return /* html */ `
+    <div class="change-row ${clickable}" ${c.diff ? `data-change="${i}" role="button" tabindex="0"` : ""}>
+      <span class="kind ${esc(c.kind)}">${esc(c.kind)}</span>
+      <span class="change-main">
+        <span class="change-path">${esc(c.path)}</span>
+        ${c.summary ? `<span class="change-sum">${esc(c.summary)}</span>` : ""}
+      </span>
+      ${delta}
+    </div>`;
+  };
+  return /* html */ `
+  <div class="sec"><h2>Changes</h2><span class="count">${changes.length} file${changes.length === 1 ? "" : "s"}</span></div>
+  <div class="changes">${changes.map(row).join("")}</div>`;
+}
+
+export function buildSections(report: ResultReport): string {
+  const sections = report.sections ?? [];
+  if (!sections.length) return "";
+  const section = (s: ResultSection): string => {
+    const items = s.items
+      .map(
+        (it) => `
+      <div class="section-item">
+        <span class="ip ${it.status ? esc(it.status) : ""}"></span>
+        <div style="min-width:0"><div class="it">${esc(it.title)}</div>${it.detail ? `<div class="id">${esc(it.detail)}</div>` : ""}</div>
+      </div>`
+      )
+      .join("");
+    return /* html */ `
+    <div class="sec"><h2>${esc(s.title)}</h2><span class="count">${s.items.length}</span></div>
+    <div class="section">${items}</div>`;
+  };
+  return sections.map(section).join("");
+}
+
+export function buildNextSteps(report: ResultReport): string {
+  const actions = report.nextActions ?? [];
+  if (!actions.length) return "";
+  const btns = actions
+    .map((a, i) => `<button class="btn${i === 0 ? " primary" : ""}" type="button" data-action="${esc(a.id)}">${esc(a.label)}</button>`)
+    .join("");
+  return /* html */ `
+  <div class="sec"><h2>Next steps</h2></div>
+  <div class="next-steps">${btns}</div>`;
+}
+
+export { buildChrome };

package/node_modules/@mcp-showcase/ui-kit/src/result-fixture.ts

@@ -0,0 +1,40 @@
+import { ResultReport } from "./types.js";
+
+/** Sample action report — drives the result-view demo and tests. */
+export const SAMPLE_RESULT: ResultReport = {
+  meta: {
+    title: "Component Factory",
+    subtitle: "shadcn/ui · Button",
+    target: "@repo/ui",
+    generatedAt: "2026-06-27",
+    tool: "component-factory",
+  },
+  headline: "Created 3 files for Button",
+  status: "success",
+  stats: [
+    { label: "Created", value: "3" },
+    { label: "Template", value: "shadcn/ui" },
+    { label: "Variants", value: "6" },
+  ],
+  changes: [
+    { path: "src/components/Button/Button.tsx", kind: "created", summary: "Component with 6 variants + 4 sizes", additions: 84, language: "tsx", diff: "+ import { cva } from 'class-variance-authority';\n+ export const Button = ({ variant, size, ...props }) => {\n+   return <button className={cn(buttonVariants({ variant, size }))} {...props} />;\n+ };" },
+    { path: "src/components/Button/Button.test.tsx", kind: "created", summary: "Vitest + RTL suite, 8 cases", additions: 52, language: "tsx" },
+    { path: "src/components/Button/Button.stories.tsx", kind: "created", summary: "Storybook stories: Default, variants, sizes", additions: 39, language: "tsx" },
+  ],
+  sections: [
+    {
+      title: "Steps",
+      items: [
+        { title: "Resolved shadcn/ui Button template", status: "ok" },
+        { title: "Generated variants with CVA", status: "ok" },
+        { title: "Wrote tests + stories", status: "ok" },
+        { title: "Skipped: index barrel not updated", detail: "Add `export * from './Button'` to src/components/index.ts", status: "warn" },
+      ],
+    },
+  ],
+  nextActions: [
+    { id: "review", label: "Review the component", kind: "tool", tool: "component-reviewer", params: { path: "src/components/Button/Button.tsx" }, fallback: "Review src/components/Button/Button.tsx." },
+    { id: "story", label: "Generate more stories", kind: "tool", tool: "storybook-generator", params: { path: "src/components/Button/Button.tsx" }, fallback: "Generate Storybook stories for Button." },
+    { id: "barrel", label: "Update barrel export", kind: "prompt", prompt: "Add `export * from './Button'` to src/components/index.ts" },
+  ],
+};

package/node_modules/@mcp-showcase/ui-kit/src/result-render.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { renderResultHTML, SAMPLE_RESULT, statusToBand } from "./index.js";
+import { esc } from "./escape.js";
+import type { ResultReport } from "./index.js";
+
+describe("statusToBand", () => {
+  it("maps status to accent band", () => {
+    expect(statusToBand("success")).toBe("good");
+    expect(statusToBand("partial")).toBe("warn");
+    expect(statusToBand("noop")).toBe("good");
+  });
+});
+
+describe("renderResultHTML", () => {
+  const html = renderResultHTML(SAMPLE_RESULT);
+
+  it("produces a complete self-contained document with no external requests", () => {
+    expect(html.startsWith("<!doctype html>")).toBe(true);
+    expect(html).not.toMatch(/<link[^>]+href=/i);
+    expect(html).not.toMatch(/<script[^>]+src=/i);
+  });
+
+  it("renders the headline, status and every change path", () => {
+    expect(html).toContain("Created 3 files for Button");
+    expect(html).toContain("Success");
+    for (const c of SAMPLE_RESULT.changes ?? []) expect(html).toContain(esc(c.path));
+  });
+
+  it("ships the theme toggle, next-step actions and embedded data", () => {
+    expect(html).toContain('id="theme-toggle"');
+    expect(html).toContain('data-action="review"');
+    expect(html).toContain('id="report-data"');
+    const json = html.split('id="report-data" type="application/json">')[1].split("</script>")[0];
+    const parsed = JSON.parse(json.replace(/\\u003c/g, "<")) as ResultReport;
+    expect(parsed.changes).toHaveLength(3);
+  });
+
+  it("escapes a malicious file path so it cannot break out", () => {
+    const evil: ResultReport = {
+      ...SAMPLE_RESULT,
+      changes: [{ path: `</script><img src=x onerror=alert(1)>`, kind: "created" }],
+    };
+    const out = renderResultHTML(evil);
+    expect(out).not.toContain("<img src=x onerror=alert(1)>");
+    expect(out).not.toContain("</script><img");
+  });
+});