tech-debt-visualizer 0.2.4 → 0.2.6

package/dist/reports/assets/report.css

@@ -1,4 +1,4 @@
-/* Technical Debt Report — Grafana-style dashboard */
+/* Technical Debt Report — Colorful dashboard, clean fit, scroll in sections */
 :root {
   --bg: #0b0c0e;
   --bg-elevated: #111214;
@@ -9,8 +9,13 @@
   --text: #e8e9ea;
   --text-muted: #8b9199;
   --link: #5794f2;
-  --radius: 4px;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --radius: 6px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  --tier-1: #e53935;
+  --tier-2: #f57c00;
+  --tier-3: #f9a825;
+  --tier-4: #29b6f6;
+  --tier-5: #43a047;
 }
 
 [data-theme="light"] {
@@ -24,6 +29,11 @@
   --text-muted: #6b7077;
   --link: #3274d9;
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --tier-1: #c62828;
+  --tier-2: #ef6c00;
+  --tier-3: #f9a825;
+  --tier-4: #0288d1;
+  --tier-5: #2e7d32;
 }
 
 * { box-sizing: border-box; }
@@ -40,7 +50,11 @@ body {
 }
 
 body.dashboard-page {
-  padding-bottom: 2rem;
+  padding-bottom: 0;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 /* ——— Dashboard header (Grafana top bar: title left, score right) ——— */
@@ -104,70 +118,187 @@ body.dashboard-page {
 .dashboard-score-of { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
 .dashboard-score-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.35rem; opacity: 0.95; }
 
-.dashboard-score.tier-1 { background: rgba(204, 0, 0, 0.2); color: #f66; }
-.dashboard-score.tier-2 { background: rgba(232, 93, 0, 0.2); color: #f90; }
-.dashboard-score.tier-3 { background: rgba(184, 134, 11, 0.2); color: #db9; }
-.dashboard-score.tier-4 { background: rgba(0, 102, 153, 0.2); color: #6cf; }
-.dashboard-score.tier-5 { background: rgba(10, 107, 10, 0.2); color: #6c6; }
+.dashboard-score.tier-1 { background: rgba(229, 57, 53, 0.25); color: #ff8a80; font-weight: 700; }
+.dashboard-score.tier-2 { background: rgba(245, 124, 0, 0.25); color: #ffb74d; font-weight: 700; }
+.dashboard-score.tier-3 { background: rgba(249, 168, 37, 0.25); color: #ffd54f; font-weight: 700; }
+.dashboard-score.tier-4 { background: rgba(41, 182, 246, 0.25); color: #82b1ff; font-weight: 700; }
+.dashboard-score.tier-5 { background: rgba(67, 160, 71, 0.25); color: #81c784; font-weight: 700; }
 
 .dashboard-date {
   font-size: 12px;
   color: var(--text-muted);
 }
 
-/* ——— Main content: 2×2 dashboard grid ——— */
+/* ——— Main content: 2×2 grid, fills viewport, scroll inside cells ——— */
 .dashboard-main {
-  max-width: 1400px;
+  flex: 1;
+  min-height: 0;
+  max-width: 1600px;
   margin: 0 auto;
-  padding: 1rem 1.5rem;
-  min-height: calc(100vh - 52px);
+  padding: 0.75rem 1rem;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .dashboard-grid-2x2 {
+  flex: 1;
+  min-height: 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto minmax(320px, 1fr);
-  gap: 1rem;
-  align-items: start;
+  grid-template-rows: auto 1fr;
+  gap: 0.75rem;
+  align-items: stretch;
 }
 
 .dashboard-cell {
   min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 
 .dashboard-cell .panel {
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .dashboard-cell .panel-body {
   flex: 1;
   min-height: 0;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
-.dashboard-cell-score .panel-body-score { flex: 1 1 auto; overflow: visible; }
+.dashboard-cell-score .panel-body-score { flex: 1 1 auto; min-height: 0; }
 
 .dashboard-cell-heatmap .panel-body-heatmap,
 .dashboard-cell-list .panel-body {
-  min-height: 280px;
+  min-height: 0;
 }
 
 @media (max-width: 900px) {
+  body.dashboard-page { height: auto; overflow: auto; }
   .dashboard-grid-2x2 {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto auto;
+    height: auto;
   }
+  .dashboard-cell-heatmap .panel-body-heatmap { min-height: 240px; }
+  .dashboard-cell-list .panel-body { min-height: 240px; }
 }
 
 @media (max-width: 560px) {
-  .dashboard-header { padding: 0.6rem 1rem; }
-  .dashboard-main { padding: 0.75rem 1rem; }
+  .dashboard-header { padding: 0.5rem 0.75rem; }
+  .dashboard-main { padding: 0.5rem 0.75rem; }
+}
+
+/* ——— Footer: AI prompts button ——— */
+.dashboard-footer {
+  flex-shrink: 0;
+  padding: 0.5rem 0;
+  border-top: 1px solid var(--border-subtle);
+  margin-top: 0.5rem;
+}
+
+.btn-ai-prompts {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 0.5rem 1rem;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+}
+
+.btn-ai-prompts:hover {
+  background: var(--surface-hover);
+  border-color: var(--text-muted);
+}
+
+/* ——— AI prompts overlay (blank screen) ——— */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.overlay.show {
+  display: flex;
+}
+
+.overlay-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.overlay-panel {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  max-width: 560px;
+  width: 100%;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
 }
 
-/* ——— Panels (Grafana-style) ——— */
+.overlay-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.overlay-close {
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.overlay-close:hover {
+  color: var(--text);
+}
+
+.overlay-body {
+  padding: 1rem;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.overlay-placeholder {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* ——— Panels: borders, colored accents ——— */
 .panel {
   background: var(--surface);
   border: 1px solid var(--border);
@@ -177,9 +308,10 @@ body.dashboard-page {
 }
 
 .panel-header {
-  padding: 0.75rem 1rem;
+  padding: 0.6rem 0.85rem;
   border-bottom: 1px solid var(--border-subtle);
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.04);
+  flex-shrink: 0;
 }
 
 [data-theme="light"] .panel-header {
@@ -188,83 +320,80 @@ body.dashboard-page {
 
 .panel-title {
   margin: 0;
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 700;
   color: var(--text);
-  letter-spacing: -0.01em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 
 .panel-desc {
-  margin: 0.25rem 0 0;
-  font-size: 12px;
+  margin: 0.2rem 0 0;
+  font-size: 11px;
   color: var(--text-muted);
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .panel-body {
-  padding: 1rem;
+  padding: 0.85rem 1rem;
 }
 
 .panel-body-center {
   text-align: center;
 }
 
-/* ——— Score panel (top-left: shield + caption + stats) ——— */
+/* ——— Score panel (top-left): numeric score only, scrollable ——— */
 .panel-score .panel-body-score {
   text-align: center;
-  padding: 1.25rem 1rem;
+  padding: 1rem 0.85rem;
 }
 
-.panel-score .score-badge {
-  display: inline-block;
-  margin-bottom: 0.75rem;
-  line-height: 0;
-}
-
-.panel-score .score-badge-svg {
-  display: block;
-  width: 100px;
-  height: auto;
-  margin: 0 auto;
+.score-numeric {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
 }
 
-.panel-score .score-badge-svg .score-badge-num {
-  font-size: 36px;
+.score-num {
+  font-size: 2rem;
   font-weight: 800;
-  letter-spacing: -0.02em;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  color: var(--text);
 }
 
-.panel-score .score-badge-svg .score-badge-of {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  opacity: 0.95;
+.score-of {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-muted);
 }
 
 .panel-score .score-label {
-  margin: 0 0 0.25rem;
-  font-size: 1rem;
-  font-weight: 600;
+  margin: 0 0 0.2rem;
+  font-size: 0.95rem;
+  font-weight: 700;
   color: var(--text);
 }
 
 .panel-score .score-desc {
-  margin: 0 0 0.5rem;
-  font-size: 13px;
+  margin: 0 0 0.4rem;
+  font-size: 12px;
   color: var(--text-muted);
-  line-height: 1.45;
-  max-width: 280px;
+  line-height: 1.4;
+  max-width: 260px;
   margin-left: auto;
   margin-right: auto;
 }
 
 .panel-score .score-stats {
   margin: 0;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.04em;
+  font-weight: 600;
 }
 
 /* ——— Description of problems panel (top-right) ——— */
@@ -278,18 +407,18 @@ body.dashboard-page {
 .priority-inline {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-top: 1rem;
-  padding-top: 1rem;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
   border-top: 1px solid var(--border-subtle);
 }
 
 .priority-inline h4 {
-  margin: 0 0 0.5rem;
-  font-size: 11px;
-  font-weight: 600;
+  margin: 0 0 0.35rem;
+  font-size: 10px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
   color: var(--text-muted);
 }
 
@@ -324,10 +453,6 @@ body.dashboard-page {
   border-radius: var(--radius);
 }
 
-/* LLM panel accent */
-.panel-llm {
-  border-left: 3px solid var(--link);
-}
 
 /* ——— Banner ——— */
 .no-llm-banner {
@@ -345,27 +470,33 @@ body.dashboard-page {
   margin: 0;
 }
 
-/* ——— Treemap ——— */
+/* ——— Treemap: square boxes per file ——— */
 #treemap {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
-  min-height: 160px;
+  gap: 6px;
+  min-height: 120px;
   padding: 0.25rem 0;
 }
 
 .treemap-cell {
+  width: 44px;
+  height: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  flex: none;
   display: flex;
-  align-items: flex-end;
-  min-width: 64px;
-  padding: 6px 8px;
-  font-size: 11px;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  font-size: 10px;
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
+  border-radius: 4px;
+  text-align: center;
 }
 
 .treemap-cell:hover {
@@ -373,11 +504,11 @@ body.dashboard-page {
   outline-offset: 1px;
 }
 
-.treemap-cell[data-severity="critical"] { background: #c00; color: #fff; border-color: #900; }
-.treemap-cell[data-severity="high"]    { background: #e85d00; color: #fff; border-color: #b84a00; }
-.treemap-cell[data-severity="medium"]  { background: #b8860b; color: #fff; border-color: #8b6914; }
-.treemap-cell[data-severity="low"]     { background: #0a6b0a; color: #fff; border-color: #064906; }
-.treemap-cell[data-severity="none"]    { background: var(--border); color: var(--text-muted); border-color: var(--border); }
+.treemap-cell[data-severity="critical"] { background: var(--tier-1); color: #fff; border-color: rgba(0,0,0,0.2); }
+.treemap-cell[data-severity="high"]    { background: var(--tier-2); color: #fff; border-color: rgba(0,0,0,0.15); }
+.treemap-cell[data-severity="medium"]  { background: var(--tier-3); color: #1a1a1a; border-color: rgba(0,0,0,0.1); }
+.treemap-cell[data-severity="low"]     { background: var(--tier-5); color: #fff; border-color: rgba(0,0,0,0.1); }
+.treemap-cell[data-severity="none"]    { background: var(--border); color: var(--text-muted); border-color: var(--border-subtle); }
 
 .legend {
   display: flex;
@@ -389,12 +520,12 @@ body.dashboard-page {
   color: var(--text-muted);
 }
 
-.legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
-.legend .swatch { width: 10px; height: 10px; border-radius: 2px; }
-.legend .swatch-crit { background: #c00; }
-.legend .swatch-high { background: #e85d00; }
-.legend .swatch-med { background: #b8860b; }
-.legend .swatch-low { background: #0a6b0a; }
+.legend span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11px; font-weight: 600; }
+.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
+.legend .swatch-crit { background: var(--tier-1); }
+.legend .swatch-high { background: var(--tier-2); }
+.legend .swatch-med { background: var(--tier-3); }
+.legend .swatch-low { background: var(--tier-5); }
 .legend .swatch-none { background: var(--border); }
 
 /* ——— Priority lists ——— */
@@ -460,12 +591,12 @@ body.dashboard-page {
   border-radius: 3px;
 }
 
-.badge-critical { background: #c00; color: #fff; }
-.badge-high { background: #e85d00; color: #fff; }
-.badge-medium { background: #b8860b; color: #fff; }
-.badge-low { background: #0a6b0a; color: #fff; }
+.badge-critical { background: var(--tier-1); color: #fff; font-weight: 700; }
+.badge-high { background: var(--tier-2); color: #fff; font-weight: 700; }
+.badge-medium { background: var(--tier-3); color: #1a1a1a; font-weight: 700; }
+.badge-low { background: var(--tier-5); color: #fff; font-weight: 700; }
 .badge-none { background: var(--border); color: var(--text-muted); }
-.badge-llm { background: var(--link); color: #fff; }
+.badge-llm { background: var(--link); color: #fff; font-weight: 700; }
 
 /* ——— Detail modal ——— */
 #detail {

package/dist/reports/assets/report.js

@@ -145,8 +145,6 @@ fileScores.forEach(function (_ref) {
   var cell = document.createElement("div");
   cell.className = "treemap-cell";
   cell.dataset.severity = severity;
-  cell.style.flex = String((score / maxScore) * 100) + " 1 80px";
-  cell.style.minWidth = "72px";
   cell.title = file + llmScore;
   cell.textContent = file.split("/").pop() || file;
   cell.addEventListener("click", function () { showDetail(file, items); });
@@ -319,3 +317,22 @@ function showDetail(file, items) {
     if (e.target === panel) panel.classList.remove("show");
   };
 }
+
+(function () {
+  var btn = document.getElementById("btnAiPrompts");
+  var overlay = document.getElementById("aiPromptsOverlay");
+  var closeBtn = document.getElementById("closeAiPrompts");
+  var backdrop = overlay && overlay.querySelector(".overlay-backdrop");
+  if (!btn || !overlay) return;
+  function open() {
+    overlay.classList.add("show");
+    overlay.setAttribute("aria-hidden", "false");
+  }
+  function close() {
+    overlay.classList.remove("show");
+    overlay.setAttribute("aria-hidden", "true");
+  }
+  btn.addEventListener("click", open);
+  if (closeBtn) closeBtn.addEventListener("click", close);
+  if (backdrop) backdrop.addEventListener("click", close);
+})();

package/dist/reports/html.js

@@ -14,25 +14,25 @@ export async function generateHtmlReport(run, options) {
     const html = buildHtml(run, title, darkMode, css, script);
     await writeFile(outputPath, html, "utf-8");
 }
-/** Inline SVG badge: shield shape with tier number and "of 5". */
+/** Inline SVG badge: shield shape with tier number and "of 5" — clean, bold, tier-colored. */
 function buildScoreBadgeSvg(tier, fillColor) {
-    const lighter = adjustHexBrightness(fillColor, 1.3);
+    const lighter = adjustHexBrightness(fillColor, 1.25);
     const shadowId = "badge-shadow-" + tier;
     const gradientId = "badge-shine-" + tier;
     return `<svg class="score-badge-svg" viewBox="0 0 140 168" xmlns="http://www.w3.org/2000/svg" role="img">
   <defs>
     <linearGradient id="${gradientId}" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:${lighter};stop-opacity:0.5" />
+      <stop offset="0%" style="stop-color:${lighter};stop-opacity:0.6" />
       <stop offset="100%" style="stop-color:${fillColor};stop-opacity:1" />
     </linearGradient>
-    <filter id="${shadowId}" x="-30%" y="-20%" width="160%" height="150%">
-      <feDropShadow dx="0" dy="6" stdDeviation="8" flood-opacity="0.35"/>
+    <filter id="${shadowId}" x="-40%" y="-30%" width="180%" height="180%">
+      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="${fillColor}" flood-opacity="0.4"/>
     </filter>
   </defs>
   <path fill="url(#${gradientId})" filter="url(#${shadowId})" d="M70 12 C108 12 128 38 128 72 C128 106 70 156 70 156 C70 156 12 106 12 72 C12 38 32 12 70 12 Z"/>
-  <path fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2.5" stroke-linejoin="round" d="M70 12 C108 12 128 38 128 72 C128 106 70 156 70 156 C70 156 12 106 12 72 C12 38 32 12 70 12 Z"/>
-  <text x="70" y="78" text-anchor="middle" class="score-badge-num" fill="white">${tier}</text>
-  <text x="70" y="100" text-anchor="middle" class="score-badge-of" fill="white">of 5</text>
+  <path fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linejoin="round" d="M70 12 C108 12 128 38 128 72 C128 106 70 156 70 156 C70 156 12 106 12 72 C12 38 32 12 70 12 Z"/>
+  <text x="70" y="80" text-anchor="middle" class="score-badge-num" fill="white">${tier}</text>
+  <text x="70" y="102" text-anchor="middle" class="score-badge-of" fill="rgba(255,255,255,0.95)">of 5</text>
 </svg>`;
 }
 function adjustHexBrightness(hex, factor) {
@@ -69,15 +69,6 @@ function buildHtml(run, title, darkMode, css, script) {
     });
     const highCriticalCount = run.debtItems.filter((d) => d.severity === "high" || d.severity === "critical").length;
     const hotspotCount = run.fileMetrics.filter((m) => (m.hotspotScore ?? 0) > 0.3).length;
-    const tierColors = {
-        1: "#c00",
-        2: "#e85d00",
-        3: "#b8860b",
-        4: "#069",
-        5: "#0a6b0a",
-    };
-    const tierColor = tierColors[cleanliness.tier] ?? "#666";
-    const scoreBadgeSvg = buildScoreBadgeSvg(cleanliness.tier, tierColor);
     const statsLine = `${run.fileMetrics.length} files · ${run.debtItems.length} items · ${highCriticalCount} high/crit · ${hotspotCount} hotspots`;
     return `<!DOCTYPE html>
 <html lang="en" data-theme="${theme}">
@@ -113,12 +104,15 @@ function buildHtml(run, title, darkMode, css, script) {
   <main class="dashboard-main">
     <div class="dashboard-grid-2x2">
       <div class="dashboard-cell dashboard-cell-score">
-        <div class="panel panel-score tier-${cleanliness.tier}">
+        <div class="panel panel-score">
           <div class="panel-header">
             <h2 class="panel-title">Technical Debt Cleanliness Score</h2>
           </div>
           <div class="panel-body panel-body-score">
-            <div class="score-badge" aria-hidden="true">${scoreBadgeSvg}</div>
+            <div class="score-numeric">
+              <span class="score-num">${cleanliness.tier}</span>
+              <span class="score-of">of 5</span>
+            </div>
             <p class="score-label">${escapeHtml(cleanliness.label)}</p>
             <p class="score-desc">${escapeHtml(cleanliness.description)}</p>
             <p class="score-stats">${statsLine}</p>
@@ -126,8 +120,27 @@ function buildHtml(run, title, darkMode, css, script) {
         </div>
       </div>
 
+      <div class="dashboard-cell dashboard-cell-heatmap">
+        <div class="panel panel-heatmap">
+          <div class="panel-header panel-header-heatmap">
+            <h2 class="panel-title">Files by debt</h2>
+            <p class="panel-desc">Size = complexity + churn. Color = severity. Click for details.</p>
+            <div class="legend legend-inline">
+              <span><span class="swatch swatch-crit"></span> Critical</span>
+              <span><span class="swatch swatch-high"></span> High</span>
+              <span><span class="swatch swatch-med"></span> Medium</span>
+              <span><span class="swatch swatch-low"></span> Low</span>
+              <span><span class="swatch swatch-none"></span> None</span>
+            </div>
+          </div>
+          <div class="panel-body panel-body-heatmap">
+            <div id="treemap"></div>
+          </div>
+        </div>
+      </div>
+
       <div class="dashboard-cell dashboard-cell-problems">
-        <div class="panel panel-llm">
+        <div class="panel">
           <div class="panel-header">
             <h2 class="panel-title">Description of problems</h2>
           </div>
@@ -153,25 +166,6 @@ function buildHtml(run, title, darkMode, css, script) {
         </div>
       </div>
 
-      <div class="dashboard-cell dashboard-cell-heatmap">
-        <div class="panel panel-heatmap">
-          <div class="panel-header panel-header-heatmap">
-            <h2 class="panel-title">Files by debt</h2>
-            <p class="panel-desc">Size = complexity + churn. Color = severity. Click for details.</p>
-            <div class="legend legend-inline">
-              <span><span class="swatch swatch-crit"></span> Critical</span>
-              <span><span class="swatch swatch-high"></span> High</span>
-              <span><span class="swatch swatch-med"></span> Medium</span>
-              <span><span class="swatch swatch-low"></span> Low</span>
-              <span><span class="swatch swatch-none"></span> None</span>
-            </div>
-          </div>
-          <div class="panel-body panel-body-heatmap">
-            <div id="treemap"></div>
-          </div>
-        </div>
-      </div>
-
       <div class="dashboard-cell dashboard-cell-list">
         <div class="panel">
           <div class="panel-header">
@@ -184,8 +178,25 @@ function buildHtml(run, title, darkMode, css, script) {
         </div>
       </div>
     </div>
+
+    <div class="dashboard-footer">
+      <button type="button" class="btn-ai-prompts" id="btnAiPrompts">AI cleanup prompts</button>
+    </div>
   </main>
 
+  <div id="aiPromptsOverlay" class="overlay" aria-hidden="true">
+    <div class="overlay-backdrop"></div>
+    <div class="overlay-panel">
+      <div class="overlay-header">
+        <h2 class="overlay-title">AI cleanup prompts</h2>
+        <button type="button" class="overlay-close" id="closeAiPrompts" aria-label="Close">&times;</button>
+      </div>
+      <div class="overlay-body">
+        <p class="overlay-placeholder">Prompts to pass into AI for cleaning up the codebase will appear here.</p>
+      </div>
+    </div>
+  </div>
+
   <div id="detail">
     <div class="panel">
       <h3 id="detailTitle"></h3>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tech-debt-visualizer",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Language-agnostic CLI that analyzes repos and generates interactive technical debt visualizations with AI-powered insights",
   "type": "module",
   "main": "dist/index.js",