tech-debt-visualizer 0.2.5 → 0.2.6

package/dist/reports/assets/report.css

@@ -138,15 +138,17 @@ body.dashboard-page {
   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 1fr;
   gap: 0.75rem;
-  height: 100%;
-  min-height: 0;
   align-items: stretch;
 }
 
@@ -170,7 +172,7 @@ body.dashboard-page {
   -webkit-overflow-scrolling: touch;
 }
 
-.dashboard-cell-score .panel-body-score { flex: 0 1 auto; overflow: visible; min-height: 0; }
+.dashboard-cell-score .panel-body-score { flex: 1 1 auto; min-height: 0; }
 
 .dashboard-cell-heatmap .panel-body-heatmap,
 .dashboard-cell-list .panel-body {
@@ -193,6 +195,109 @@ body.dashboard-page {
   .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;
+}
+
+.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);
@@ -209,16 +314,6 @@ body.dashboard-page {
   flex-shrink: 0;
 }
 
-.panel-header-accent { border-left: 3px solid var(--tier-4); }
-.panel-header-accent-orange { border-left: 3px solid var(--tier-2); }
-.panel-header-accent-blue { border-left: 3px solid var(--link); }
-
-.panel-score-tier-1 .panel-header-accent { border-left-color: var(--tier-1); }
-.panel-score-tier-2 .panel-header-accent { border-left-color: var(--tier-2); }
-.panel-score-tier-3 .panel-header-accent { border-left-color: var(--tier-3); }
-.panel-score-tier-4 .panel-header-accent { border-left-color: var(--tier-4); }
-.panel-score-tier-5 .panel-header-accent { border-left-color: var(--tier-5); }
-
 [data-theme="light"] .panel-header {
   background: rgba(0, 0, 0, 0.02);
 }
@@ -247,77 +342,30 @@ body.dashboard-page {
   text-align: center;
 }
 
-/* ——— Score panel: shield + big number + tier color ——— */
-.panel-score {
-  border-top: 2px solid transparent;
-}
-.panel-score-tier-1 { border-top-color: var(--tier-1); }
-.panel-score-tier-2 { border-top-color: var(--tier-2); }
-.panel-score-tier-3 { border-top-color: var(--tier-3); }
-.panel-score-tier-4 { border-top-color: var(--tier-4); }
-.panel-score-tier-5 { border-top-color: var(--tier-5); }
-
+/* ——— Score panel (top-left): numeric score only, scrollable ——— */
 .panel-score .panel-body-score {
   text-align: center;
   padding: 1rem 0.85rem;
 }
 
-.score-display {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  margin-bottom: 0.6rem;
-  flex-wrap: wrap;
-}
-
-.score-shield-wrap {
-  line-height: 0;
-  flex-shrink: 0;
-}
-
-.panel-score .score-badge-svg {
-  display: block;
-  width: 72px;
-  height: auto;
-}
-
-.panel-score .score-badge-svg .score-badge-num {
-  font-size: 28px;
-  font-weight: 900;
-  letter-spacing: -0.03em;
-  fill: #fff;
-}
-
-.panel-score .score-badge-svg .score-badge-of {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  fill: rgba(255,255,255,0.95);
-}
-
 .score-numeric {
   display: flex;
   align-items: baseline;
-  gap: 0.2rem;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
 }
 
 .score-num {
-  font-size: 2.25rem;
+  font-size: 2rem;
   font-weight: 800;
   line-height: 1;
   letter-spacing: -0.04em;
+  color: var(--text);
 }
 
-.panel-score-tier-1 .score-num { color: var(--tier-1); }
-.panel-score-tier-2 .score-num { color: var(--tier-2); }
-.panel-score-tier-3 .score-num { color: var(--tier-3); }
-.panel-score-tier-4 .score-num { color: var(--tier-4); }
-.panel-score-tier-5 .score-num { color: var(--tier-5); }
-
 .score-of {
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   font-weight: 600;
   color: var(--text-muted);
 }
@@ -326,14 +374,9 @@ body.dashboard-page {
   margin: 0 0 0.2rem;
   font-size: 0.95rem;
   font-weight: 700;
+  color: var(--text);
 }
 
-.panel-score-tier-1 .score-label { color: var(--tier-1); }
-.panel-score-tier-2 .score-label { color: var(--tier-2); }
-.panel-score-tier-3 .score-label { color: var(--tier-3); }
-.panel-score-tier-4 .score-label { color: var(--tier-4); }
-.panel-score-tier-5 .score-label { color: var(--tier-5); }
-
 .panel-score .score-desc {
   margin: 0 0 0.4rem;
   font-size: 12px;
@@ -376,7 +419,7 @@ body.dashboard-page {
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  color: var(--tier-2);
+  color: var(--text-muted);
 }
 
 .priority-inline .priority-list { margin: 0; }
@@ -410,11 +453,6 @@ body.dashboard-page {
   border-radius: var(--radius);
 }
 
-/* Problems panel: blue accent */
-.panel-llm {
-  border-left: 3px solid var(--link);
-}
-.panel-llm .panel-header { border-left: none; }
 
 /* ——— Banner ——— */
 .no-llm-banner {
@@ -432,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 {

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

@@ -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,17 +104,14 @@ 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 panel-score-tier-${cleanliness.tier}">
-          <div class="panel-header panel-header-accent">
+        <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-display">
-              <div class="score-shield-wrap" aria-hidden="true">${scoreBadgeSvg}</div>
-              <div class="score-numeric">
-                <span class="score-num">${cleanliness.tier}</span>
-                <span class="score-of">of 5</span>
-              </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>
@@ -132,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>
@@ -159,27 +166,8 @@ function buildHtml(run, title, darkMode, css, script) {
         </div>
       </div>
 
-      <div class="dashboard-cell dashboard-cell-heatmap">
-        <div class="panel panel-heatmap panel-header-accent-orange">
-          <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 panel-header-accent-blue">
+        <div class="panel">
           <div class="panel-header">
             <h2 class="panel-title">Ratings & files</h2>
             <p class="panel-desc">Files rated above none by static or LLM. Click for full details.</p>
@@ -190,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.5",
+  "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",