tech-debt-visualizer 0.2.5 → 0.2.7

package/dist/reports/assets/report.css

@@ -57,7 +57,7 @@ body.dashboard-page {
   flex-direction: column;
 }
 
-/* ——— Dashboard header (Grafana top bar: title left, score right) ——— */
+/* ——— Dashboard header (Grafana: bar with accent) ——— */
 .dashboard-header {
   display: flex;
   align-items: center;
@@ -67,6 +67,7 @@ body.dashboard-page {
   padding: 0.75rem 1.5rem;
   background: var(--bg-elevated);
   border-bottom: 1px solid var(--border);
+  border-left: 3px solid var(--link);
   position: sticky;
   top: 0;
   z-index: 10;
@@ -118,11 +119,11 @@ 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(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-score.tier-1 { background: rgba(229, 57, 53, 0.2); color: #ff8a80; font-weight: 700; }
+.dashboard-score.tier-2 { background: rgba(245, 124, 0, 0.2); color: #ffb74d; font-weight: 700; }
+.dashboard-score.tier-3 { background: rgba(249, 168, 37, 0.2); color: #ffd54f; font-weight: 700; }
+.dashboard-score.tier-4 { background: rgba(41, 182, 246, 0.2); color: #82b1ff; font-weight: 700; }
+.dashboard-score.tier-5 { background: rgba(67, 160, 71, 0.2); color: #81c784; font-weight: 700; }
 
 .dashboard-date {
   font-size: 12px;
@@ -138,15 +139,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 +173,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 +196,113 @@ body.dashboard-page {
   .dashboard-main { padding: 0.5rem 0.75rem; }
 }
 
+/* ——— Footer: AI prompts button (Grafana-style, fits dashboard) ——— */
+.dashboard-footer {
+  flex-shrink: 0;
+  padding: 0.6rem 0 0;
+  border-top: 1px solid var(--border);
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+}
+
+.btn-ai-prompts {
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 0.45rem 0.9rem;
+  background: var(--surface);
+  color: var(--link);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.btn-ai-prompts:hover {
+  background: rgba(87, 148, 242, 0.08);
+  border-color: var(--link);
+}
+
+/* ——— 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);
@@ -205,29 +315,22 @@ body.dashboard-page {
 .panel-header {
   padding: 0.6rem 0.85rem;
   border-bottom: 1px solid var(--border-subtle);
-  background: rgba(0, 0, 0, 0.04);
+  background: rgba(0, 0, 0, 0.05);
   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); }
+.panel-title {
+  color: var(--text);
+}
 
 [data-theme="light"] .panel-header {
-  background: rgba(0, 0, 0, 0.02);
+  background: rgba(0, 0, 0, 0.03);
 }
 
 .panel-title {
   margin: 0;
   font-size: 12px;
   font-weight: 700;
-  color: var(--text);
   letter-spacing: 0.02em;
   text-transform: uppercase;
 }
@@ -247,77 +350,39 @@ body.dashboard-page {
   text-align: center;
 }
 
-/* ——— Score panel: shield + big number + tier color ——— */
+/* ——— Score panel (top-left): numeric score, tier accent ——— */
 .panel-score {
-  border-top: 2px solid transparent;
+  border-left: 3px solid var(--link);
 }
-.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); }
+.panel-score[data-tier="1"] { border-left-color: var(--tier-1); }
+.panel-score[data-tier="2"] { border-left-color: var(--tier-2); }
+.panel-score[data-tier="3"] { border-left-color: var(--tier-3); }
+.panel-score[data-tier="4"] { border-left-color: var(--tier-4); }
+.panel-score[data-tier="5"] { border-left-color: var(--tier-5); }
 
 .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 +391,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 +436,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; }
@@ -393,9 +453,16 @@ body.dashboard-page {
   gap: 0.75rem 1.25rem;
 }
 
+.panel-heatmap .panel-header-heatmap {
+  border-left: 2px solid var(--tier-3);
+}
 .panel-heatmap .panel-title { margin-right: 0.5rem; }
 .panel-heatmap .panel-desc { margin: 0.15rem 0 0; flex-basis: 100%; }
 
+.panel-list .panel-header {
+  border-left: 2px solid var(--link);
+}
+
 .legend-inline {
   margin: 0;
   margin-left: auto;
@@ -410,11 +477,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,39 +494,62 @@ body.dashboard-page {
   margin: 0;
 }
 
-/* ——— Treemap ——— */
+/* ——— Treemap: colored block + file name visible ——— */
 #treemap {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
-  min-height: 160px;
+  gap: 10px 12px;
+  min-height: 120px;
   padding: 0.25rem 0;
 }
 
 .treemap-cell {
+  width: 92px;
+  flex: none;
   display: flex;
-  align-items: flex-end;
-  min-width: 64px;
-  padding: 6px 8px;
-  font-size: 11px;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
   cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  padding: 0;
+  border: none;
+  background: none;
+}
+
+.treemap-cell-block {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
 }
 
-.treemap-cell:hover {
+.treemap-cell-name {
+  font-size: 10px;
+  line-height: 1.3;
+  color: var(--text);
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+.treemap-cell:hover .treemap-cell-block {
   outline: 2px solid var(--link);
   outline-offset: 1px;
 }
+.treemap-cell:hover .treemap-cell-name {
+  color: var(--link);
+}
 
-.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); }
+.treemap-cell[data-severity="critical"] .treemap-cell-block { background: var(--tier-1); border-color: rgba(0,0,0,0.2); }
+.treemap-cell[data-severity="high"] .treemap-cell-block    { background: var(--tier-2); border-color: rgba(0,0,0,0.15); }
+.treemap-cell[data-severity="medium"] .treemap-cell-block  { background: var(--tier-3); border-color: rgba(0,0,0,0.1); }
+.treemap-cell[data-severity="low"] .treemap-cell-block     { background: var(--tier-5); border-color: rgba(0,0,0,0.1); }
+.treemap-cell[data-severity="none"] .treemap-cell-block    { background: var(--border); border-color: var(--border-subtle); }
 
 .legend {
   display: flex;

package/dist/reports/assets/report.js

@@ -142,13 +142,14 @@ fileScores.forEach(function (_ref) {
   var llmScore =
     fileM && fileM.llmFileScore != null ? " (LLM debt: " + fileM.llmFileScore + "/100)" : "";
   var severity = (fileM && fileM.llmSeverity) ? fileM.llmSeverity : worstSeverity(items);
+  var basename = file.split("/").pop() || file;
   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.innerHTML =
+    '<span class="treemap-cell-block" aria-hidden="true"></span>' +
+    '<span class="treemap-cell-name">' + escapeHtml(basename) + "</span>";
   cell.addEventListener("click", function () { showDetail(file, items); });
   treemapEl.appendChild(cell);
 });
@@ -319,3 +320,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" data-tier="${cleanliness.tier}">
+          <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 panel-list">
           <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.7",
   "description": "Language-agnostic CLI that analyzes repos and generates interactive technical debt visualizations with AI-powered insights",
   "type": "module",
   "main": "dist/index.js",