tech-debt-visualizer 0.2.2 → 0.2.3

package/dist/reports/assets/report.css

@@ -46,11 +46,11 @@ body.dashboard-page {
 /* ——— Dashboard header (Grafana-style top bar) ——— */
 .dashboard-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 0.75rem;
-  padding: 0.75rem 1.5rem;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
   background: var(--bg-elevated);
   border-bottom: 1px solid var(--border);
   position: sticky;
@@ -60,75 +60,69 @@ body.dashboard-page {
 
 .dashboard-header-left {
   display: flex;
-  align-items: baseline;
-  gap: 0.75rem;
+  align-items: flex-start;
+  gap: 1rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.dashboard-score-badge {
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.dashboard-score-badge .score-badge-svg {
+  width: 56px;
+  height: auto;
+  display: block;
+}
+
+.dashboard-score-badge .score-badge-num { font-size: 22px; }
+.dashboard-score-badge .score-badge-of { font-size: 9px; }
+
+.dashboard-hero {
   min-width: 0;
 }
 
 .dashboard-title {
-  margin: 0;
+  margin: 0 0 0.25rem;
   font-size: 1.125rem;
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+.dashboard-blurb {
+  margin: 0 0 0.35rem;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--text);
+  max-width: 42em;
 }
 
 .dashboard-meta {
   font-size: 12px;
   color: var(--text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .dashboard-header-right {
   display: flex;
-  align-items: center;
-  gap: 1rem;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
   flex-shrink: 0;
 }
 
-.dashboard-score {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.2rem;
-  padding: 0.35rem 0.65rem;
-  border-radius: var(--radius);
-  font-weight: 600;
-}
-
-.dashboard-score-value {
-  font-size: 1.25rem;
-  line-height: 1;
-}
-
-.dashboard-score-of {
-  font-size: 0.85rem;
-  font-weight: 500;
+.dashboard-stats {
+  font-size: 12px;
   color: var(--text-muted);
+  white-space: nowrap;
 }
 
-.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-date {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted);
+  opacity: 0.9;
 }
 
 /* ——— Main content & grid ——— */
@@ -144,23 +138,17 @@ body.dashboard-page {
   margin-bottom: 1rem;
 }
 
-.dashboard-grid-stats {
-  grid-template-columns: repeat(4, 1fr);
-}
-
 .dashboard-grid-half {
   grid-template-columns: repeat(2, 1fr);
 }
 
 @media (max-width: 900px) {
-  .dashboard-grid-stats { grid-template-columns: repeat(2, 1fr); }
   .dashboard-grid-half { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 560px) {
-  .dashboard-header { padding: 0.6rem 1rem; }
+  .dashboard-header { padding: 0.75rem 1rem; }
   .dashboard-main { padding: 1rem; }
-  .dashboard-grid-stats { grid-template-columns: 1fr; }
 }
 
 /* ——— Panels (Grafana-style) ——— */
@@ -205,69 +193,29 @@ body.dashboard-page {
   text-align: center;
 }
 
-/* Stat panels (KPI row) */
-.stat-panel .panel-body {
-  padding: 1rem 1.25rem;
-}
-
-.stat-value {
-  font-size: 1.75rem;
-  font-weight: 700;
-  line-height: 1.2;
-  color: var(--text);
-  letter-spacing: -0.02em;
-}
-
-.stat-label {
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-muted);
-  margin-top: 0.25rem;
-}
-
-.stat-panel-warn .stat-value { color: #f44; }
-
-/* Score panel (cleanliness gauge) */
-.panel-score .panel-body-center {
-  padding: 1.25rem 1rem;
-}
-
-.panel-score .score-badge {
-  display: inline-block;
-  margin-bottom: 0.75rem;
-  line-height: 0;
+/* ——— Heatmap panel ——— */
+.panel-heatmap .panel-header-heatmap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.75rem 1.25rem;
 }
 
-.panel-score .score-badge-svg {
-  display: block;
-  width: 120px;
-  height: auto;
-}
+.panel-heatmap .panel-title { margin-right: 0.5rem; }
+.panel-heatmap .panel-desc { margin: 0.15rem 0 0; flex-basis: 100%; }
 
-.panel-score .score-badge-svg .score-badge-num {
-  font-size: 42px;
-  font-weight: 800;
-  letter-spacing: -0.02em;
+.legend-inline {
+  margin: 0;
+  margin-left: auto;
 }
 
-.panel-score .score-badge-svg .score-badge-of {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  opacity: 0.95;
+.panel-body-heatmap {
+  padding: 1rem;
+  padding-top: 0.5rem;
 }
 
-.panel-score .score-desc {
-  font-size: 13px;
-  color: var(--text-muted);
-  margin: 0;
-  max-width: 320px;
-  margin-left: auto;
-  margin-right: auto;
-  line-height: 1.45;
+.panel-body-heatmap #treemap {
+  border-radius: var(--radius);
 }
 
 /* LLM panel accent */
@@ -379,8 +327,18 @@ body.dashboard-page {
 
 .debt-list .title { font-weight: 600; margin-bottom: 0.2rem; }
 .debt-list .meta { font-size: 12px; color: var(--text-muted); display: block; margin-top: 0.25rem; font-family: ui-monospace, monospace; }
+.debt-list-explanation {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0.35rem 0 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 .debt-list .insight { font-size: 13px; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
-.debt-list-ratings { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0; flex-wrap: wrap; }
+.debt-list-ratings { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 0; flex-wrap: wrap; }
 .debt-list-rating { display: inline-flex; align-items: center; gap: 0.35rem; }
 .debt-list-rating-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
 .debt-list-llm-none { color: var(--text-muted); font-size: 12px; }

package/dist/reports/assets/report.js

@@ -166,44 +166,81 @@ document.getElementById("q2").innerHTML = highImpact
   .map(function (d) { return '<li style="font-size:0.8rem">' + escapeHtml(d.file) + "</li>"; })
   .join("");
 
-// Debt list: one row per file; static = worst severity across that file's issues, LLM = file's rating
-var sev = { critical: 4, high: 3, medium: 2, low: 1 };
+// Debt list: every file rated above none by static OR LLM; show both ratings and short explanation
+var sev = { critical: 4, high: 3, medium: 2, low: 1, none: 0 };
 var list = document.getElementById("debtList");
-var filesWithDebt = Array.from(debtByFile.keys()).sort(function (fa, fb) {
-  var itemsA = debtByFile.get(fa);
-  var itemsB = debtByFile.get(fb);
-  var worstA = itemsA.length ? Math.max.apply(null, itemsA.map(function (d) { return sev[d.severity] || 0; })) : 0;
-  var worstB = itemsB.length ? Math.max.apply(null, itemsB.map(function (d) { return sev[d.severity] || 0; })) : 0;
+
+function severityNum(s) { return sev[s] || 0; }
+function fileWorstStatic(items) {
+  if (!items || !items.length) return 0;
+  return Math.max.apply(null, items.map(function (d) { return severityNum(d.severity); }));
+}
+function fileWorstLlm(metric) {
+  if (!metric || !metric.llmSeverity || metric.llmSeverity === "none") return 0;
+  return severityNum(metric.llmSeverity);
+}
+
+var filesFromStatic = new Set(debtByFile.keys());
+var filesFromLlm = new Set();
+DATA.fileMetrics.forEach(function (m) {
+  if (m.llmSeverity && m.llmSeverity !== "none") filesFromLlm.add(m.file);
+});
+var fileSet = new Set([].concat(Array.from(filesFromStatic), Array.from(filesFromLlm)));
+
+var filesWithDebt = Array.from(fileSet).sort(function (fa, fb) {
+  var itemsA = debtByFile.get(fa) || [];
+  var itemsB = debtByFile.get(fb) || [];
+  var metricA = DATA.fileMetrics.find(function (m) { return m.file === fa; });
+  var metricB = DATA.fileMetrics.find(function (m) { return m.file === fb; });
+  var worstA = Math.max(fileWorstStatic(itemsA), fileWorstLlm(metricA));
+  var worstB = Math.max(fileWorstStatic(itemsB), fileWorstLlm(metricB));
   if (worstB !== worstA) return worstB - worstA;
   return fa.localeCompare(fb);
 });
+
+function firstLine(text) {
+  if (!text || !String(text).trim()) return "";
+  return String(text).trim().split(/\n/)[0].trim().slice(0, 120);
+}
+
 filesWithDebt.forEach(function (file) {
-  var items = debtByFile.get(file);
+  var items = debtByFile.get(file) || [];
+  var fileM = DATA.fileMetrics.find(function (m) { return m.file === file; });
   var worstSeverityVal = items.length ? items.reduce(function (best, d) {
-    return (sev[d.severity] || 0) > (sev[best.severity] || 0) ? d : best;
+    return severityNum(d.severity) > severityNum(best.severity) ? d : best;
   }, items[0]) : null;
-  var staticSeverity = worstSeverityVal ? worstSeverityVal.severity : "low";
-  var fileM = DATA.fileMetrics.find(function (m) { return m.file === file; });
-  var fileLlmSeverity = fileM && fileM.llmSeverity ? fileM.llmSeverity : null;
-  var staticBadge = '<span class="badge badge-' + staticSeverity + '" title="Static analysis (worst of ' + items.length + ' issue(s))">' + staticSeverity + "</span>";
-  var llmRating = fileLlmSeverity
-    ? '<span class="badge badge-' + fileLlmSeverity + '" title="LLM rating for this file">' + fileLlmSeverity + "</span>"
+  var staticSeverity = worstSeverityVal ? worstSeverityVal.severity : null;
+  var fileLlmSeverity = fileM && fileM.llmSeverity && fileM.llmSeverity !== "none" ? fileM.llmSeverity : null;
+
+  var staticBadge = staticSeverity
+    ? '<span class="badge badge-' + staticSeverity + '" title="Static (worst of ' + items.length + ')">' + staticSeverity + "</span>"
     : '<span class="debt-list-llm-none">—</span>';
-  var titleText = items.length === 1
-    ? items[0].title
-    : worstSeverityVal.title + " (+" + (items.length - 1) + " more)";
+  var llmBadge = fileLlmSeverity
+    ? '<span class="badge badge-' + fileLlmSeverity + '" title="LLM">' + fileLlmSeverity + "</span>"
+    : '<span class="debt-list-llm-none">—</span>';
+
+  var explanation = "";
+  if (items.length && worstSeverityVal) {
+    explanation = escapeHtml(firstLine(worstSeverityVal.title || worstSeverityVal.description || ""));
+    if (items.length > 1) explanation += " (+" + (items.length - 1) + " more)";
+  }
+  if (fileM && (fileM.llmAssessment || fileM.llmRawAssessment)) {
+    var llmBlurb = firstLine(stripTrailingSeverityAndScore(fileM.llmRawAssessment || fileM.llmAssessment || ""));
+    if (llmBlurb) explanation = explanation ? explanation + " · " + escapeHtml(llmBlurb) : escapeHtml(llmBlurb);
+  }
+  if (!explanation) explanation = "Rated by static or LLM.";
+
   var ratingsRow =
     '<div class="debt-list-ratings">' +
     '<span class="debt-list-rating"><span class="debt-list-rating-label">Static</span> ' + staticBadge + "</span>" +
-    '<span class="debt-list-rating"><span class="debt-list-rating-label">LLM</span> ' + llmRating + "</span>" +
+    '<span class="debt-list-rating"><span class="debt-list-rating-label">LLM</span> ' + llmBadge + "</span>" +
     "</div>";
   var li = document.createElement("li");
   li.innerHTML =
-    '<span class="title">' +
-    escapeHtml(titleText) +
-    "</span> " +
+    '<span class="title">' + escapeHtml(file.split("/").pop() || file) + "</span> " +
     ratingsRow +
-    '<span class="meta">' + escapeHtml(file) + "</span>";
+    '<span class="meta">' + escapeHtml(file) + "</span>" +
+    '<p class="debt-list-explanation">' + explanation + "</p>";
   li.addEventListener("click", function () { showDetail(file, items); });
   list.appendChild(li);
 });
@@ -212,35 +249,44 @@ function showDetail(file, items) {
   var panel = document.getElementById("detail");
   var fileMetric = DATA.fileMetrics.find(function (m) { return m.file === file; });
   var worstItem = items.length ? items.reduce(function (best, d) {
-    return (sev[d.severity] || 0) > (sev[best.severity] || 0) ? d : best;
+    return severityNum(d.severity) > severityNum(best.severity) ? d : best;
   }, items[0]) : null;
-  var staticSeverity = worstItem ? worstItem.severity : "low";
+  var staticSeverity = worstItem ? worstItem.severity : null;
 
-  document.getElementById("detailTitle").textContent = items.length === 1
+  var titleText = items.length === 1
     ? (items[0].title || "Debt item")
-    : items.length + " static issues";
+    : items.length > 1
+      ? items.length + " static issues"
+      : (fileMetric && fileMetric.llmSeverity ? "LLM assessment" : "File details");
+  document.getElementById("detailTitle").textContent = titleText;
   document.getElementById("detailFile").textContent = file;
 
   var explanationEl = document.getElementById("detailExplanation");
   var parts = [];
   parts.push(
     '<div class="detail-severities">' +
-    '<span class="detail-sev"><strong>Static</strong> <span class="badge badge-' + staticSeverity + '">' + staticSeverity + "</span> (worst of " + items.length + ")</span> " +
+    '<span class="detail-sev"><strong>Static</strong> ' +
+    (staticSeverity ? '<span class="badge badge-' + staticSeverity + '">' + staticSeverity + "</span> (worst of " + items.length + ")" : "<span class=\"debt-list-llm-none\">\u2014</span>") +
+    "</span> " +
     '<span class="detail-sev"><strong>LLM</strong> ' +
-    (fileMetric && fileMetric.llmSeverity ? '<span class="badge badge-' + fileMetric.llmSeverity + '">' + fileMetric.llmSeverity + "</span>" : "<span class=\"debt-list-llm-none\">—</span>") +
+    (fileMetric && fileMetric.llmSeverity && fileMetric.llmSeverity !== "none" ? '<span class="badge badge-' + fileMetric.llmSeverity + '">' + fileMetric.llmSeverity + "</span>" : "<span class=\"debt-list-llm-none\">\u2014</span>") +
     "</span></div>"
   );
   parts.push('<div class="detail-static-desc"><strong>Static issues</strong><ul class="detail-issues-list">');
-  items.forEach(function (item) {
-    parts.push(
-      '<li><span class="badge badge-' + item.severity + '">' + item.severity + "</span> " +
-      escapeHtml(item.title || "Issue") +
-      (item.line ? " <span class=\"detail-line\">line " + item.line + "</span>" : "")
-    );
-    if (item.description)
-      parts.push('<div class="detail-issue-desc">' + escapeHtml(item.description).replace(/\n/g, "<br>") + "</div>");
-    parts.push("</li>");
-  });
+  if (items.length) {
+    items.forEach(function (item) {
+      parts.push(
+        '<li><span class="badge badge-' + item.severity + '">' + item.severity + "</span> " +
+        escapeHtml(item.title || "Issue") +
+        (item.line ? " <span class=\"detail-line\">line " + item.line + "</span>" : "")
+      );
+      if (item.description)
+        parts.push('<div class="detail-issue-desc">' + escapeHtml(item.description).replace(/\n/g, "<br>") + "</div>");
+      parts.push("</li>");
+    });
+  } else {
+    parts.push("<li class=\"detail-no-llm\">No static issues for this file.</li>");
+  }
   parts.push("</ul></div>");
   parts.push('<div class="detail-llm-label"><strong>LLM assessment</strong></div>');
   if (fileMetric && (fileMetric.llmRawAssessment || fileMetric.llmAssessment)) {

package/dist/reports/html.js

@@ -93,6 +93,7 @@ function buildHtml(run, title, darkMode, css, script) {
       </div>
     </div>`
         : "";
+    const statsLine = `${run.fileMetrics.length} files · ${run.debtItems.length} items · ${highCriticalCount} high/crit · ${hotspotCount} hotspots`;
     return `<!DOCTYPE html>
 <html lang="en" data-theme="${theme}">
 <head>
@@ -111,74 +112,35 @@ function buildHtml(run, title, darkMode, css, script) {
   ${!hasLlm ? `<div class="no-llm-banner"><p class="no-llm-cta">Analysis run without LLM — for full results, run with LLM</p></div>` : ""}
   <header class="dashboard-header">
     <div class="dashboard-header-left">
-      <h1 class="dashboard-title">${escapeHtml(title)}</h1>
-      <span class="dashboard-meta">${escapeHtml(run.repoPath)}</span>
+      <div class="dashboard-score-badge tier-${cleanliness.tier}" aria-label="Score ${cleanliness.tier} of 5">${scoreBadgeSvg}</div>
+      <div class="dashboard-hero">
+        <h1 class="dashboard-title">${escapeHtml(title)}</h1>
+        <p class="dashboard-blurb">${escapeHtml(cleanliness.description)}</p>
+        <span class="dashboard-meta">${escapeHtml(run.repoPath)}</span>
+      </div>
     </div>
     <div class="dashboard-header-right">
-      <div class="dashboard-score tier-${cleanliness.tier}" aria-label="Score ${cleanliness.tier} of 5">
-        <span class="dashboard-score-value">${cleanliness.tier}</span>
-        <span class="dashboard-score-of">/ 5</span>
-        <span class="dashboard-score-label">${escapeHtml(cleanliness.label)}</span>
-      </div>
+      <span class="dashboard-stats">${statsLine}</span>
       <span class="dashboard-date">${run.completedAt ?? run.startedAt}</span>
     </div>
   </header>
 
   <main class="dashboard-main">
-    <div class="dashboard-grid dashboard-grid-stats">
-      <div class="panel stat-panel">
-        <div class="panel-body">
-          <div class="stat-value">${run.fileMetrics.length}</div>
-          <div class="stat-label">Files analyzed</div>
-        </div>
-      </div>
-      <div class="panel stat-panel">
-        <div class="panel-body">
-          <div class="stat-value">${run.debtItems.length}</div>
-          <div class="stat-label">Debt items</div>
-        </div>
-      </div>
-      <div class="panel stat-panel stat-panel-warn">
-        <div class="panel-body">
-          <div class="stat-value">${highCriticalCount}</div>
-          <div class="stat-label">High / Critical</div>
-        </div>
-      </div>
-      <div class="panel stat-panel">
-        <div class="panel-body">
-          <div class="stat-value">${hotspotCount}</div>
-          <div class="stat-label">Hotspots</div>
-        </div>
-      </div>
-    </div>
-
-    <div class="dashboard-grid">
-      <div class="panel panel-score tier-${cleanliness.tier}">
-        <div class="panel-header">
-          <h2 class="panel-title">Cleanliness score</h2>
-        </div>
-        <div class="panel-body panel-body-center">
-          <div class="score-badge" aria-hidden="true">${scoreBadgeSvg}</div>
-          <p class="score-desc">${escapeHtml(cleanliness.description)}</p>
-        </div>
-      </div>
-    </div>
-
     ${llmPanelHtml}
 
-    <div class="panel">
-      <div class="panel-header">
+    <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 = LLM severity. Click for details.</p>
-      </div>
-      <div class="panel-body">
-        <div class="legend">
+        <p class="panel-desc">Size = complexity + churn. Color = severity (static or LLM). 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> No debt</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>
@@ -206,8 +168,8 @@ function buildHtml(run, title, darkMode, css, script) {
 
     <div class="panel">
       <div class="panel-header">
-        <h2 class="panel-title">All debt items</h2>
-        <p class="panel-desc">Static and LLM ratings. Click a row for details.</p>
+        <h2 class="panel-title">Files with debt (static or LLM)</h2>
+        <p class="panel-desc">Every file rated above none by static analysis or LLM. Click a row for full ratings and explanations.</p>
       </div>
       <div class="panel-body">
         <ul class="debt-list" id="debtList"></ul>

package/package.json

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