tech-debt-visualizer 0.2.6 → 0.2.8

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;
@@ -195,29 +196,33 @@ body.dashboard-page {
   .dashboard-main { padding: 0.5rem 0.75rem; }
 }
 
-/* ——— Footer: AI prompts button ——— */
+/* ——— Footer: AI prompts button (Grafana-style, fits dashboard) ——— */
 .dashboard-footer {
   flex-shrink: 0;
-  padding: 0.5rem 0;
-  border-top: 1px solid var(--border-subtle);
+  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: 13px;
+  font-size: 12px;
   font-weight: 600;
-  padding: 0.5rem 1rem;
+  letter-spacing: 0.02em;
+  padding: 0.45rem 0.9rem;
   background: var(--surface);
-  color: var(--text);
+  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: var(--surface-hover);
-  border-color: var(--text-muted);
+  background: rgba(87, 148, 242, 0.08);
+  border-color: var(--link);
 }
 
 /* ——— AI prompts overlay (blank screen) ——— */
@@ -310,19 +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-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;
 }
@@ -342,7 +350,16 @@ body.dashboard-page {
   text-align: center;
 }
 
-/* ——— Score panel (top-left): numeric score only, scrollable ——— */
+/* ——— Score panel (top-left): numeric score, tier accent ——— */
+.panel-score {
+  border-left: 3px solid var(--link);
+}
+.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;
@@ -436,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;
@@ -470,45 +494,62 @@ body.dashboard-page {
   margin: 0;
 }
 
-/* ——— Treemap: square boxes per file ——— */
+/* ——— Treemap: colored block + file name visible ——— */
 #treemap {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 10px 12px;
   min-height: 120px;
   padding: 0.25rem 0;
 }
 
 .treemap-cell {
-  width: 44px;
-  height: 44px;
-  min-width: 44px;
-  min-height: 44px;
+  width: 92px;
   flex: none;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 4px;
-  font-size: 10px;
+  gap: 4px;
   cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  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);
+}
+
+.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: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,11 +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.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);
 });

package/dist/reports/html.js

@@ -104,7 +104,7 @@ 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">
+        <div class="panel panel-score" data-tier="${cleanliness.tier}">
           <div class="panel-header">
             <h2 class="panel-title">Technical Debt Cleanliness Score</h2>
           </div>
@@ -167,7 +167,7 @@ function buildHtml(run, title, darkMode, css, script) {
       </div>
 
       <div class="dashboard-cell dashboard-cell-list">
-        <div class="panel">
+        <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>

package/package.json

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