npm - mcp-react-toolkit - Versions diffs - 1.3.0 → 1.4.0 - Mend

mcp-react-toolkit 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (268) hide show

package/node_modules/@mcp-showcase/ui-kit/demo/index.html ADDED Viewed

@@ -0,0 +1,653 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Codebase Health Studio — acme-dashboard</title>
+<style>
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%}
+body{margin:0}
+:root{
+  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
+  /* light (default) */
+  --bg:#f7f7f6;
+  --surface:#ffffff;
+  --surface-2:#fbfbfa;
+  --text:#16161a;
+  --muted:#6b7280;
+  --faint:#9aa0aa;
+  --border:#ebe9e4;
+  --border-strong:#dedcd5;
+  --shadow:0 1px 2px rgba(16,16,20,.04),0 8px 24px -12px rgba(16,16,20,.10);
+  --ring:rgba(99,102,241,.45);
+  --good:#059669; --good-soft:#ecfdf5;
+  --warn:#d97706; --warn-soft:#fffbeb;
+  --bad:#e11d48;  --bad-soft:#fff1f2;
+  --sev-critical:#e11d48; --sev-high:#ea580c; --sev-medium:#d97706; --sev-low:#64748b;
+  --sev-critical-soft:#fff1f2; --sev-high-soft:#fff7ed; --sev-medium-soft:#fffbeb; --sev-low-soft:#f1f5f9;
+  --accent:var(--good);
+  --accent-soft:var(--good-soft);
+  --radius:14px;
+  --radius-sm:10px;
+}
+[data-theme="dark"]{
+  --bg:#0a0b0d;
+  --surface:#141519;
+  --surface-2:#0f1013;
+  --text:#f3f4f6;
+  --muted:#9aa1ad;
+  --faint:#6b7280;
+  --border:rgba(255,255,255,.07);
+  --border-strong:rgba(255,255,255,.12);
+  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -20px rgba(0,0,0,.7);
+  --ring:rgba(129,140,248,.55);
+  --good:#34d399; --good-soft:rgba(52,211,153,.12);
+  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12);
+  --bad:#fb7185;  --bad-soft:rgba(251,113,133,.12);
+  --sev-critical:#fb7185; --sev-high:#fb923c; --sev-medium:#fbbf24; --sev-low:#94a3b8;
+  --sev-critical-soft:rgba(251,113,133,.12); --sev-high-soft:rgba(251,146,60,.12);
+  --sev-medium-soft:rgba(251,191,36,.12); --sev-low-soft:rgba(148,163,184,.12);
+}
+[data-band="good"]{--accent:var(--good);--accent-soft:var(--good-soft)}
+[data-band="warn"]{--accent:var(--warn);--accent-soft:var(--warn-soft)}
+[data-band="bad"]{--accent:var(--bad);--accent-soft:var(--bad-soft)}
+body{
+  font-family:var(--font);
+  background:var(--bg);
+  color:var(--text);
+  font-size:14px;
+  line-height:1.5;
+  -webkit-font-smoothing:antialiased;
+  font-variant-numeric:tabular-nums;
+}
+.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
+.wrap{max-width:1040px;margin:0 auto;padding:28px 24px 64px}
+/* header */
+.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
+.brand{display:flex;align-items:center;gap:11px;min-width:0}
+.brand .dot{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
+  display:grid;place-items:center;flex:none;border:1px solid var(--border)}
+.brand h1{font-size:15px;font-weight:650;margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.brand .sub{font-size:12px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.hdr-actions{display:flex;align-items:center;gap:8px;flex:none}
+.btn{appearance:none;font-family:inherit;font-size:12.5px;font-weight:550;color:var(--text);
+  background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;padding:7px 11px;
+  cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.16s ease;line-height:1}
+.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
+.btn:active{transform:translateY(0)}
+.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
+.btn.icon{padding:7px;width:32px;height:32px;justify-content:center}
+.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
+[data-theme="dark"] .btn.primary{color:#0a0b0d}
+.btn.primary:hover{filter:brightness(1.05);color:#fff}
+[data-theme="dark"] .btn.primary:hover{color:#0a0b0d}
+/* hero */
+.hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
+  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  padding:26px 28px;box-shadow:var(--shadow);margin-bottom:18px}
+.gauge{position:relative;width:148px;height:148px;flex:none}
+.gauge svg{transform:rotate(-90deg)}
+.gauge .track{stroke:var(--border-strong);fill:none}
+.gauge .arc{stroke:var(--accent);fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
+.gauge .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1}
+.gauge .score{font-size:42px;font-weight:680;letter-spacing:-.03em;line-height:1}
+.gauge .of{font-size:11px;color:var(--faint);margin-top:3px}
+.hero-meta{min-width:0}
+.grade-row{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
+.grade{font-size:13px;font-weight:650;color:var(--accent);background:var(--accent-soft);
+  border:1px solid var(--border);border-radius:7px;padding:3px 9px}
+.verdict{font-size:18px;font-weight:620;letter-spacing:-.01em}
+.hero p{color:var(--muted);margin:2px 0 14px;font-size:13px}
+.chips{display:flex;flex-wrap:wrap;gap:7px}
+.chip{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
+  border-radius:999px;padding:4px 10px;display:inline-flex;gap:5px}
+.chip b{color:var(--text);font-weight:600}
+/* section heading */
+.sec{margin:26px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
+.sec h2{font-size:13px;font-weight:620;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin:0}
+.sec .count{font-size:12px;color:var(--faint)}
+/* category cards */
+.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;
+  box-shadow:var(--shadow);transition:.16s ease;display:flex;flex-direction:column}
+.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
+.card .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
+.card .name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.card .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;flex:none}
+.badge.good{color:var(--good);background:var(--good-soft)}
+.badge.warn{color:var(--warn);background:var(--warn-soft)}
+.badge.bad{color:var(--bad);background:var(--bad-soft)}
+.card .sum{color:var(--muted);font-size:12.5px;line-height:1.45;min-height:3.9em;
+  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
+.bar{height:5px;border-radius:999px;background:var(--border-strong);overflow:hidden;margin-top:11px}
+.bar > i{display:block;height:100%;border-radius:999px;transition:width 1s cubic-bezier(.22,1,.36,1)}
+.bar > i.good{background:var(--good)} .bar > i.warn{background:var(--warn)} .bar > i.bad{background:var(--bad)}
+.card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:11.5px;color:var(--faint)}
+/* toolbar */
+.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
+.search{flex:1;min-width:180px;position:relative}
+.search input{width:100%;font-family:inherit;font-size:13px;color:var(--text);background:var(--surface);
+  border:1px solid var(--border-strong);border-radius:9px;padding:8px 11px 8px 32px}
+.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
+.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--faint)}
+.filter{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px}
+.filter button{appearance:none;font-family:inherit;font-size:12px;font-weight:550;color:var(--muted);
+  background:transparent;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;transition:.14s}
+.filter button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
+.filter button:hover{color:var(--text)}
+/* table */
+.table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  box-shadow:var(--shadow);overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
+thead th:nth-child(1),tbody td:nth-child(1){width:96px}
+thead th:nth-child(3),tbody td:nth-child(3){width:120px}
+thead th:nth-child(4),tbody td:nth-child(4){width:160px}
+thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
+  color:var(--faint);padding:11px 16px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap}
+thead th .arr{opacity:.4;font-size:9px;margin-left:3px}
+thead th[aria-sort] .arr{opacity:1;color:var(--accent)}
+tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
+tbody tr:last-child{border-bottom:0}
+tbody tr:hover{background:var(--surface-2)}
+tbody td{padding:11px 16px;vertical-align:top}
+.sev{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;white-space:nowrap}
+.sev .pip{width:7px;height:7px;border-radius:999px;flex:none}
+.sev.critical{color:var(--sev-critical)} .sev.critical .pip{background:var(--sev-critical)}
+.sev.high{color:var(--sev-high)} .sev.high .pip{background:var(--sev-high)}
+.sev.medium{color:var(--sev-medium)} .sev.medium .pip{background:var(--sev-medium)}
+.sev.low{color:var(--sev-low)} .sev.low .pip{background:var(--sev-low)}
+.cell-title{font-weight:550;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
+.cell-file{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;word-break:normal;max-width:200px}
+.tag{font-size:11px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
+  border-radius:6px;padding:2px 7px;white-space:nowrap}
+.empty{padding:40px 16px;text-align:center;color:var(--muted)}
+.empty .big{font-size:15px;color:var(--text);font-weight:600;margin-bottom:4px}
+/* drawer */
+.scrim{position:fixed;inset:0;background:rgba(10,11,13,.42);opacity:0;pointer-events:none;transition:.2s;z-index:40}
+.scrim.open{opacity:1;pointer-events:auto}
+.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);background:var(--surface);
+  border-left:1px solid var(--border);box-shadow:-24px 0 60px -30px rgba(0,0,0,.5);
+  transform:translateX(100%);transition:transform .26s cubic-bezier(.22,1,.36,1);z-index:50;
+  display:flex;flex-direction:column}
+.drawer.open{transform:translateX(0)}
+.drawer header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
+  padding:20px 22px 16px;border-bottom:1px solid var(--border)}
+.drawer header h3{margin:0;font-size:16px;font-weight:640;letter-spacing:-.01em;line-height:1.35}
+.drawer .body{padding:18px 22px;overflow-y:auto;flex:1}
+.drawer .field{margin-bottom:16px}
+.drawer .field .k{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
+.drawer .field .v{font-size:13.5px;color:var(--text)}
+.drawer .field .v.mono{font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-all}
+.drawer .acts{padding:16px 22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px}
+.kv{display:flex;gap:8px;flex-wrap:wrap}
+.kv .pair{font-size:12px;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:4px 9px}
+.kv .pair b{color:var(--text);font-weight:600}
+/* fix-first */
+.queue{display:flex;flex-direction:column;gap:8px}
+.qitem{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
+  border-radius:var(--radius-sm);padding:11px 14px;box-shadow:var(--shadow);cursor:pointer;transition:.14s}
+.qitem:hover{border-color:var(--accent);transform:translateX(2px)}
+.qitem .rank{width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--accent);
+  font-size:12px;font-weight:680;display:grid;place-items:center;flex:none}
+.qitem .qt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
+.qitem .qt .t{display:block;font-weight:550;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.qitem .qt .s{display:block;font-size:11.5px;color:var(--faint)}
+/* toast */
+.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
+  background:var(--text);color:var(--bg);font-size:13px;font-weight:550;padding:10px 16px;border-radius:10px;
+  box-shadow:var(--shadow);transition:.22s;z-index:60;pointer-events:none;max-width:90vw}
+.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
+.foot-note{margin-top:34px;text-align:center;font-size:11.5px;color:var(--faint)}
+.foot-note a{color:var(--muted)}
+@media (max-width:560px){
+  .hero{grid-template-columns:1fr;justify-items:center;text-align:center}
+  .hero-meta{text-align:center}.chips{justify-content:center}.grade-row{justify-content:center}
+}
+/* result view */
+.result-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
+  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  padding:22px 26px;box-shadow:var(--shadow);margin-bottom:18px}
+.result-hero .glyph{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);
+  display:grid;place-items:center;flex:none;border:1px solid var(--border)}
+.result-hero .rh-main{min-width:0;flex:1}
+.result-hero .rh-title{font-size:20px;font-weight:660;letter-spacing:-.02em;line-height:1.2}
+.result-hero .rh-sub{color:var(--muted);font-size:13px;margin-top:3px}
+.status-pill{font-size:12px;font-weight:650;padding:4px 10px;border-radius:999px;white-space:nowrap}
+.status-pill.good{color:var(--good);background:var(--good-soft)}
+.status-pill.warn{color:var(--warn);background:var(--warn-soft)}
+.status-pill.bad{color:var(--bad);background:var(--bad-soft)}
+.result-hero .chips{margin-top:0}
+.changes{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
+.change-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .12s}
+.change-row:last-child{border-bottom:0}
+.change-row.clickable{cursor:pointer}
+.change-row.clickable:hover{background:var(--surface-2)}
+.kind{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;flex:none;width:74px;text-align:center}
+.kind.created{color:var(--good);background:var(--good-soft)}
+.kind.modified{color:var(--warn);background:var(--warn-soft)}
+.kind.deleted{color:var(--bad);background:var(--bad-soft)}
+.kind.renamed{color:var(--sev-low);background:var(--sev-low-soft)}
+.change-main{flex:1;min-width:0}
+.change-path{font-family:var(--mono);font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.change-sum{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.change-delta{font-family:var(--mono);font-size:11.5px;flex:none;white-space:nowrap}
+.change-delta .add{color:var(--good)} .change-delta .del{color:var(--bad)}
+.section{margin-top:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
+.section-item{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border)}
+.section-item:last-child{border-bottom:0}
+.section-item .ip{width:7px;height:7px;border-radius:999px;margin-top:6px;flex:none;background:var(--faint)}
+.section-item .ip.ok{background:var(--good)} .section-item .ip.warn{background:var(--warn)} .section-item .ip.error{background:var(--bad)}
+.section-item .it{font-size:13px;font-weight:550}
+.section-item .id{font-size:12px;color:var(--muted)}
+.next-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
+.diff{font-family:var(--mono);font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
+  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
+.diff .dl-add{color:var(--good)} .diff .dl-del{color:var(--bad)} .diff .dl-ctx{color:var(--muted)}
+@media (prefers-reduced-motion:reduce){
+  *{transition:none!important;animation:none!important}
+}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <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>Codebase Health Studio</h1>
+        <p class="sub">acme-dashboard</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><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></span><span class="theme-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></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>
+  <section class="hero" data-band="warn">
+  <div class="gauge" role="img" aria-label="Health score 62 out of 100">
+    <svg width="148" height="148" viewBox="0 0 148 148">
+      <circle class="track" cx="74" cy="74" r="64" stroke-width="11"/>
+      <circle class="arc" cx="74" cy="74" r="64" stroke-width="11"
+        stroke-dasharray="402.1" stroke-dashoffset="402.1"
+        data-target="152.8"/>
+    </svg>
+    <div class="center">
+      <div class="score num" data-count="62">0</div>
+      <div class="of">/ 100</div>
+    </div>
+  </div>
+    <div class="hero-meta">
+      <div class="grade-row">
+        <span class="grade">Grade C</span>
+        <span class="verdict">Workable, but carrying debt</span>
+      </div>
+      <p>18 issues found across 6 areas · React 18 · CRA.</p>
+      <div class="chips"><span class="chip"><span>Framework</span><b>Create React App</b></span><span class="chip"><span>React</span><b>18.2.0</b></span><span class="chip"><span>Language</span><b>JavaScript</b></span><span class="chip"><span>Components</span><b>94</b></span></div>
+    </div>
+  </section>
+  <div class="sec"><h2>Fix-first queue</h2><span class="count">3 prioritised</span></div>
+  <div class="queue">
+      <div class="qitem" data-action="fix-god" role="button" tabindex="0">
+        <span class="rank num">1</span>
+        <span class="qt"><span class="t">Split the 3 god components</span><span class="s">Runs component-fixer</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>
+      <div class="qitem" data-action="plan" role="button" tabindex="0">
+        <span class="rank num">2</span>
+        <span class="qt"><span class="t">Generate full refactor plan</span><span class="s">Runs generate-refactor-plan</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>
+      <div class="qitem" data-action="migrate-ts" role="button" tabindex="0">
+        <span class="rank num">3</span>
+        <span class="qt"><span class="t">Migrate the API layer to TypeScript</span><span class="s">Asks the agent</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></div>
+  <div class="sec"><h2>Areas</h2><span class="count">6 analysed</span></div>
+  <div class="cards">
+    <div class="card" data-category="components" role="button" tabindex="0" aria-label="Filter issues by Components">
+      <div class="top">
+        <span class="name">Components</span>
+        <span class="badge warn">48</span>
+      </div>
+      <div class="sum">3 god components over 300 lines; 11 with mixed responsibilities.</div>
+      <div class="bar"><i class="warn" data-w="48" style="width:0"></i></div>
+      <div class="foot"><span>6 issues</span><span>View →</span></div>
+    </div>
+    <div class="card" data-category="state" role="button" tabindex="0" aria-label="Filter issues by State">
+      <div class="top">
+        <span class="name">State</span>
+        <span class="badge warn">55</span>
+      </div>
+      <div class="sum">Redux without normalisation; derived state stored in the store.</div>
+      <div class="bar"><i class="warn" data-w="55" style="width:0"></i></div>
+      <div class="foot"><span>3 issues</span><span>View →</span></div>
+    </div>
+    <div class="card" data-category="api" role="button" tabindex="0" aria-label="Filter issues by API layer">
+      <div class="top">
+        <span class="name">API layer</span>
+        <span class="badge bad">40</span>
+      </div>
+      <div class="sum">Scattered axios calls, 4 duplicated endpoints, no central client.</div>
+      <div class="bar"><i class="bad" data-w="40" style="width:0"></i></div>
+      <div class="foot"><span>4 issues</span><span>View →</span></div>
+    </div>
+    <div class="card" data-category="routing" role="button" tabindex="0" aria-label="Filter issues by Routing">
+      <div class="top">
+        <span class="name">Routing</span>
+        <span class="badge good">78</span>
+      </div>
+      <div class="sum">react-router v6, nested routes, but no lazy loading.</div>
+      <div class="bar"><i class="good" data-w="78" style="width:0"></i></div>
+      <div class="foot"><span>1 issue</span><span>View →</span></div>
+    </div>
+    <div class="card" data-category="styling" role="button" tabindex="0" aria-label="Filter issues by Styling">
+      <div class="top">
+        <span class="name">Styling</span>
+        <span class="badge warn">60</span>
+      </div>
+      <div class="sum">Mixed CSS + styled-components; 23 hardcoded colours.</div>
+      <div class="bar"><i class="warn" data-w="60" style="width:0"></i></div>
+      <div class="foot"><span>2 issues</span><span>View →</span></div>
+    </div>
+    <div class="card" data-category="deps" role="button" tabindex="0" aria-label="Filter issues by Dependencies">
+      <div class="top">
+        <span class="name">Dependencies</span>
+        <span class="badge good">84</span>
+      </div>
+      <div class="sum">2 unused deps; moment.js inflating the bundle.</div>
+      <div class="bar"><i class="good" data-w="84" style="width:0"></i></div>
+      <div class="foot"><span>2 issues</span><span>View →</span></div>
+    </div></div>
+  <div class="sec"><h2>Issues</h2><span class="count" id="issue-count">18 total</span></div>
+  <div class="toolbar">
+    <label class="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>
+      <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"><button type="button" data-sev="all" aria-pressed="true">All</button><button type="button" data-sev="critical" aria-pressed="false">Critical</button><button type="button" data-sev="high" aria-pressed="false">High</button><button type="button" data-sev="medium" aria-pressed="false">Medium</button><button type="button" data-sev="low" aria-pressed="false">Low</button></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>
+<div class="foot-note">legacy-analyzer · generated 2026-06-27 · mcp-react-toolkit</div>
+</div>
+  <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>
+<script id="report-data" type="application/json">{"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":[]}]}</script>
+<script>(function(){
+  "use strict";
+  function readEmbedded(){
+    var el=document.getElementById('report-data');
+    if(!el) return null; try{ return JSON.parse(el.textContent||'null'); }catch(e){ return null; }
+  }
+  function readUrl(){
+    try{ var p=new URLSearchParams(location.search).get('data'); if(!p) return null;
+      var bytes=Uint8Array.from(atob(p), function(c){ return c.charCodeAt(0); });
+      return JSON.parse(new TextDecoder().decode(bytes)); }catch(e){ return null; }
+  }
+  var DATA = window.__REPORT__ || readEmbedded() || readUrl();
+  if(!DATA){ return; }
+  var EMBEDDED = false; try{ EMBEDDED = window.self !== window.top; }catch(e){ EMBEDDED = true; }
+  var HOST_ORIGIN = window.__MCP_HOST_ORIGIN__ || '*'; // host may inject its origin to harden postMessage
+  var lastFocus = null;
+  var root = document.documentElement;
+  var SEV_RANK = { critical:4, high:3, medium:2, low:1 };
+  function E(s){ return String(s==null?'':s)
+    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+    .replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }
+  function $(id){ return document.getElementById(id); }
+  // ---------- theme ----------
+  function store(k,v){ try{ if(v==null) return localStorage.getItem(k); localStorage.setItem(k,v); }catch(e){ return null; } }
+  function applyTheme(t){
+    root.setAttribute('data-theme', t);
+    var sun=document.querySelector('.theme-sun'), moon=document.querySelector('.theme-moon');
+    if(sun&&moon){ sun.hidden = t!=='dark'; moon.hidden = t==='dark'; }
+  }
+  var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  applyTheme(store('mcp-ui-theme') || (prefersDark?'dark':'light'));
+  var tt=$('theme-toggle');
+  if(tt) tt.addEventListener('click', function(){
+    var next = root.getAttribute('data-theme')==='dark'?'light':'dark';
+    applyTheme(next); store('mcp-ui-theme', next);
+  });
+  // ---------- band + intro animation ----------
+  root.setAttribute('data-band', DATA.score>=70?'good':(DATA.score>=45?'warn':'bad'));
+  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  requestAnimationFrame(function(){
+    var arc=document.querySelector('.gauge .arc');
+    if(arc) arc.style.strokeDashoffset = arc.getAttribute('data-target');
+    Array.prototype.forEach.call(document.querySelectorAll('.bar > i'), function(i){ i.style.width=i.getAttribute('data-w')+'%'; });
+    var el=document.querySelector('.score'); if(!el) return;
+    var target=parseInt(el.getAttribute('data-count'),10)||0;
+    if(reduce){ el.textContent=target; return; }
+    var start=null;
+    requestAnimationFrame(function step(ts){ if(!start)start=ts; var p=Math.min(1,(ts-start)/1000);
+      el.textContent=Math.round((1-Math.pow(1-p,3))*target); if(p<1) requestAnimationFrame(step); });
+  });
+  // ---------- actions (DataAdapter) ----------
+  var actionsById={};
+  (DATA.topActions||[]).forEach(function(a){ actionsById[a.id]=a; });
+  (DATA.issues||[]).forEach(function(it){ (it.actions||[]).forEach(function(a){ actionsById[a.id]=a; }); });
+  function copy(text){
+    try{ if(navigator.clipboard&&navigator.clipboard.writeText) return navigator.clipboard.writeText(text); }catch(e){}
+    try{ var t=document.createElement('textarea'); t.value=text; document.body.appendChild(t); t.select();
+      document.execCommand('copy'); document.body.removeChild(t); }catch(e){}
+  }
+  var toastTimer;
+  function toast(msg){
+    var el=$('toast'); if(!el) return; el.textContent=msg; el.classList.add('show');
+    clearTimeout(toastTimer); toastTimer=setTimeout(function(){ el.classList.remove('show'); }, 2600);
+  }
+  function runAction(id){
+    var a=actionsById[id]; if(!a) return;
+    if(a.kind==='link'){
+      if(!/^https?:\/\//i.test(a.href||'')){ toast('Unsafe link blocked'); return; }
+      window.open(a.href,'_blank','noopener'); return;
+    }
+    if(EMBEDDED){
+      var msg = a.kind==='tool'
+        ? { type:'tool', messageId:'mcp-ui-'+Date.now(), payload:{ toolName:a.tool, params:a.params||{} } }
+        : { type:'prompt', messageId:'mcp-ui-'+Date.now(), payload:{ prompt:a.prompt } };
+      try{ window.parent.postMessage(msg,HOST_ORIGIN); toast(a.kind==='tool'?('Running '+a.tool+' …'):'Sent to agent ✓'); return; }catch(e){}
+    }
+    var text = a.kind==='tool' ? (a.fallback||('Run '+a.tool)) : (a.prompt||a.fallback||a.label);
+    copy(text); toast('Copied — paste into your agent');
+  }
+  document.addEventListener('click', function(e){
+    var el=e.target.closest && e.target.closest('[data-action]');
+    if(el){ e.preventDefault(); runAction(el.getAttribute('data-action')); }
+  });
+  document.addEventListener('keydown', function(e){
+    if((e.key==='Enter'||e.key===' ')){ var el=e.target.closest && e.target.closest('.qitem[data-action]');
+      if(el){ e.preventDefault(); runAction(el.getAttribute('data-action')); } }
+  });
+  // ---------- triage table ----------
+  var state={ sev:'all', q:'', cat:null, key:'severity', dir:'desc' };
+  var rowsEl=$('rows'), emptyEl=$('empty'), countEl=$('issue-count');
+  function passes(it){
+    if(state.sev!=='all' && it.severity!==state.sev) return false;
+    if(state.cat && it.category!==state.cat) return false;
+    if(state.q){ var q=state.q.toLowerCase();
+      var hay=(it.title+' '+(it.file||'')+' '+(it.category||'')+' '+(it.description||'')).toLowerCase();
+      if(hay.indexOf(q)<0) return false; }
+    return true;
+  }
+  function cmp(a,b){
+    var k=state.key, av, bv;
+    if(k==='severity'){ av=SEV_RANK[a.severity]||0; bv=SEV_RANK[b.severity]||0; }
+    else { av=(a[k]||'').toString().toLowerCase(); bv=(b[k]||'').toString().toLowerCase(); }
+    if(av<bv) return state.dir==='asc'?-1:1;
+    if(av>bv) return state.dir==='asc'?1:-1;
+    return 0;
+  }
+  function catName(id){ var c=(DATA.categories||[]).filter(function(x){return x.id===id;})[0]; return c?c.name:id; }
+  function render(){
+    var list=(DATA.issues||[]).filter(passes).slice().sort(cmp);
+    rowsEl.innerHTML = list.map(function(it){
+      return '<tr data-id="'+E(it.id)+'" tabindex="0" role="button" aria-label="Open issue: '+E(it.title)+'">'+
+        '<td><span class="sev '+E(it.severity)+'"><span class="pip"></span>'+E(it.severity)+'</span></td>'+
+        '<td class="cell-title">'+E(it.title)+'</td>'+
+        '<td><span class="tag">'+E(catName(it.category))+'</span></td>'+
+        '<td class="cell-file">'+E(it.file||'—')+'</td></tr>';
+    }).join('');
+    emptyEl.hidden = list.length>0;
+    if(countEl) countEl.textContent = list.length+(state.cat?(' in '+catName(state.cat)):(' of '+(DATA.issues||[]).length));
+  }
+  if(rowsEl){
+    rowsEl.addEventListener('click', function(e){
+      var tr=e.target.closest('tr[data-id]'); if(tr) openDrawer(tr.getAttribute('data-id'));
+    });
+    rowsEl.addEventListener('keydown', function(e){
+      if(e.key==='Enter'||e.key===' '){ var tr=e.target.closest('tr[data-id]');
+        if(tr){ e.preventDefault(); openDrawer(tr.getAttribute('data-id')); } }
+    });
+    Array.prototype.forEach.call(document.querySelectorAll('.filter button'), function(b){
+      b.addEventListener('click', function(){
+        state.sev=b.getAttribute('data-sev');
+        Array.prototype.forEach.call(document.querySelectorAll('.filter button'), function(x){
+          x.setAttribute('aria-pressed', x===b?'true':'false'); });
+        render();
+      });
+    });
+    var search=$('search');
+    if(search) search.addEventListener('input', function(){ state.q=search.value; render(); });
+    Array.prototype.forEach.call(document.querySelectorAll('thead th[data-sort]'), function(th){
+      th.addEventListener('click', function(){
+        var k=th.getAttribute('data-sort');
+        if(state.key===k){ state.dir=state.dir==='asc'?'desc':'asc'; } else { state.key=k; state.dir=k==='severity'?'desc':'asc'; }
+        Array.prototype.forEach.call(document.querySelectorAll('thead th[data-sort]'), function(x){ x.removeAttribute('aria-sort'); });
+        th.setAttribute('aria-sort', state.dir==='asc'?'ascending':'descending');
+        render();
+      });
+    });
+    Array.prototype.forEach.call(document.querySelectorAll('.card[data-category]'), function(card){
+      function trigger(){
+        var id=card.getAttribute('data-category');
+        state.cat = state.cat===id ? null : id;
+        Array.prototype.forEach.call(document.querySelectorAll('.card[data-category]'), function(c){
+          c.style.borderColor = (c===card && state.cat) ? 'var(--accent)' : ''; });
+        render();
+        var sec=document.querySelector('.table-card'); if(sec&&state.cat) sec.scrollIntoView({behavior:reduce?'auto':'smooth', block:'start'});
+      }
+      card.addEventListener('click', trigger);
+      card.addEventListener('keydown', function(e){ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); trigger(); } });
+    });
+    render();
+  }
+  // ---------- drawer ----------
+  var drawer=$('drawer'), scrim=$('scrim');
+  function field(k,v,mono){ return '<div class="field"><div class="k">'+E(k)+'</div><div class="v'+(mono?' mono':'')+'">'+E(v)+'</div></div>'; }
+  function openDrawer(id){
+    var it=(DATA.issues||[]).filter(function(x){return x.id===id;})[0]; if(!it) return;
+    lastFocus=document.activeElement;
+    $('d-title').textContent=it.title;
+    var body='';
+    body+='<div class="kv" style="margin-bottom:16px">'+
+      '<span class="pair"><b style="color:var(--sev-'+E(it.severity)+')">'+E(it.severity)+'</b></span>'+
+      '<span class="pair">'+E(catName(it.category))+'</span></div>';
+    if(it.description) body+=field('What it means', it.description);
+    if(it.file) body+=field('File', it.file, true);
+    (it.meta||[]).forEach(function(m){ body+=field(m.label, m.value); });
+    $('d-body').innerHTML=body;
+    $('d-acts').innerHTML=(it.actions||[]).map(function(a,i){
+      return '<button class="btn'+(i===0?' primary':'')+'" type="button" data-action="'+E(a.id)+'">'+E(a.label)+'</button>';
+    }).join('') || '<span style="color:var(--faint);font-size:12px">No automated fix available</span>';
+    drawer.classList.add('open'); scrim.classList.add('open');
+    var dcEl=$('d-close'); if(dcEl) dcEl.focus();
+  }
+  function closeDrawer(){
+    drawer.classList.remove('open'); scrim.classList.remove('open');
+    if(lastFocus&&lastFocus.focus){ lastFocus.focus(); lastFocus=null; }
+  }
+  if(scrim) scrim.addEventListener('click', closeDrawer);
+  var dc=$('d-close'); if(dc) dc.addEventListener('click', closeDrawer);
+  document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeDrawer(); });
+  // ---------- export ----------
+  var ex=$('export-btn');
+  function md(s){ return String(s==null?'':s).replace(/[\r\n]+/g,' '); }
+  if(ex) ex.addEventListener('click', function(){
+    var L=[]; L.push('# '+md(DATA.meta.title)); L.push('');
+    L.push('**Target:** '+md(DATA.meta.target)+'  ');
+    L.push('**Health score:** '+DATA.score+'/100  ');
+    L.push('**Issues:** '+DATA.totalIssues); L.push('');
+    L.push('## Areas');
+    (DATA.categories||[]).forEach(function(c){ L.push('- **'+md(c.name)+'** ('+c.status+(typeof c.score==='number'?', '+c.score:'')+') — '+md(c.summary)); });
+    L.push(''); L.push('## Issues');
+    (DATA.issues||[]).slice().sort(function(a,b){return (SEV_RANK[b.severity]||0)-(SEV_RANK[a.severity]||0);}).forEach(function(it){
+      L.push('- ['+it.severity.toUpperCase()+'] '+md(it.title)+(it.file?(' — '+md(it.file)):'')); });
+    copy(L.join('\n')); toast('Report copied as Markdown ✓');
+  });
+})();</script>
+</body>
+</html>