tech-debt-visualizer 0.2.2 → 0.2.4

package/dist/reports/assets/report.css

@@ -43,7 +43,7 @@ body.dashboard-page {
   padding-bottom: 2rem;
 }
 
-/* ——— Dashboard header (Grafana-style top bar) ——— */
+/* ——— Dashboard header (Grafana top bar: title left, score right) ——— */
 .dashboard-header {
   display: flex;
   align-items: center;
@@ -100,25 +100,9 @@ body.dashboard-page {
   font-weight: 600;
 }
 
-.dashboard-score-value {
-  font-size: 1.25rem;
-  line-height: 1;
-}
-
-.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-value { font-size: 1.25rem; line-height: 1; }
+.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; }
@@ -131,36 +115,56 @@ body.dashboard-page {
   color: var(--text-muted);
 }
 
-/* ——— Main content & grid ——— */
+/* ——— Main content: 2×2 dashboard grid ——— */
 .dashboard-main {
-  max-width: 1200px;
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 1.25rem 1.5rem;
+  padding: 1rem 1.5rem;
+  min-height: calc(100vh - 52px);
 }
 
-.dashboard-grid {
+.dashboard-grid-2x2 {
   display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto minmax(320px, 1fr);
   gap: 1rem;
-  margin-bottom: 1rem;
+  align-items: start;
 }
 
-.dashboard-grid-stats {
-  grid-template-columns: repeat(4, 1fr);
+.dashboard-cell {
+  min-height: 0;
+  min-width: 0;
 }
 
-.dashboard-grid-half {
-  grid-template-columns: repeat(2, 1fr);
+.dashboard-cell .panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-cell .panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.dashboard-cell-score .panel-body-score { flex: 1 1 auto; overflow: visible; }
+
+.dashboard-cell-heatmap .panel-body-heatmap,
+.dashboard-cell-list .panel-body {
+  min-height: 280px;
 }
 
 @media (max-width: 900px) {
-  .dashboard-grid-stats { grid-template-columns: repeat(2, 1fr); }
-  .dashboard-grid-half { grid-template-columns: 1fr; }
+  .dashboard-grid-2x2 {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto auto;
+  }
 }
 
 @media (max-width: 560px) {
   .dashboard-header { padding: 0.6rem 1rem; }
-  .dashboard-main { padding: 1rem; }
-  .dashboard-grid-stats { grid-template-columns: 1fr; }
+  .dashboard-main { padding: 0.75rem 1rem; }
 }
 
 /* ——— Panels (Grafana-style) ——— */
@@ -205,32 +209,9 @@ 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 {
+/* ——— Score panel (top-left: shield + caption + stats) ——— */
+.panel-score .panel-body-score {
+  text-align: center;
   padding: 1.25rem 1rem;
 }
 
@@ -242,32 +223,105 @@ body.dashboard-page {
 
 .panel-score .score-badge-svg {
   display: block;
-  width: 120px;
+  width: 100px;
   height: auto;
+  margin: 0 auto;
 }
 
 .panel-score .score-badge-svg .score-badge-num {
-  font-size: 42px;
+  font-size: 36px;
   font-weight: 800;
   letter-spacing: -0.02em;
 }
 
 .panel-score .score-badge-svg .score-badge-of {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   opacity: 0.95;
 }
 
+.panel-score .score-label {
+  margin: 0 0 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
 .panel-score .score-desc {
+  margin: 0 0 0.5rem;
   font-size: 13px;
   color: var(--text-muted);
-  margin: 0;
-  max-width: 320px;
+  line-height: 1.45;
+  max-width: 280px;
   margin-left: auto;
   margin-right: auto;
-  line-height: 1.45;
+}
+
+.panel-score .score-stats {
+  margin: 0;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+/* ——— Description of problems panel (top-right) ——— */
+.panel-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.priority-inline {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.priority-inline h4 {
+  margin: 0 0 0.5rem;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.priority-inline .priority-list { margin: 0; }
+
+@media (max-width: 600px) {
+  .priority-inline { grid-template-columns: 1fr; }
+}
+
+/* ——— Heatmap panel (bottom-left) ——— */
+.panel-heatmap .panel-header-heatmap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.75rem 1.25rem;
+}
+
+.panel-heatmap .panel-title { margin-right: 0.5rem; }
+.panel-heatmap .panel-desc { margin: 0.15rem 0 0; flex-basis: 100%; }
+
+.legend-inline {
+  margin: 0;
+  margin-left: auto;
+}
+
+.panel-body-heatmap {
+  padding: 1rem;
+  padding-top: 0.5rem;
+}
+
+.panel-body-heatmap #treemap {
+  border-radius: var(--radius);
 }
 
 /* LLM panel accent */
@@ -379,8 +433,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

@@ -78,21 +78,7 @@ function buildHtml(run, title, darkMode, css, script) {
     };
     const tierColor = tierColors[cleanliness.tier] ?? "#666";
     const scoreBadgeSvg = buildScoreBadgeSvg(cleanliness.tier, tierColor);
-    const llmPanelHtml = run.llmOverallAssessment || run.llmOverallRaw
-        ? `
-    <div class="panel panel-llm">
-      <div class="panel-header">
-        <h2 class="panel-title">LLM overall assessment</h2>
-      </div>
-      <div class="panel-body">
-        <div class="llm-output">${run.llmOverallAssessment
-            ? renderLlmOutputToHtml(run.llmOverallAssessment)
-            : '<div class="llm-prose">' +
-                escapeHtml(stripTrailingSeverityAndScore(run.llmOverallRaw ?? "")).replace(/\n/g, "<br>") +
-                "</div>"}</div>
-      </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>
@@ -125,92 +111,77 @@ function buildHtml(run, title, darkMode, css, script) {
   </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 class="dashboard-grid-2x2">
+      <div class="dashboard-cell dashboard-cell-score">
+        <div class="panel panel-score 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-badge" aria-hidden="true">${scoreBadgeSvg}</div>
+            <p class="score-label">${escapeHtml(cleanliness.label)}</p>
+            <p class="score-desc">${escapeHtml(cleanliness.description)}</p>
+            <p class="score-stats">${statsLine}</p>
+          </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 class="dashboard-cell dashboard-cell-problems">
+        <div class="panel panel-llm">
+          <div class="panel-header">
+            <h2 class="panel-title">Description of problems</h2>
+          </div>
+          <div class="panel-body">
+            ${run.llmOverallAssessment || run.llmOverallRaw
+        ? `<div class="llm-output">${run.llmOverallAssessment
+            ? renderLlmOutputToHtml(run.llmOverallAssessment)
+            : '<div class="llm-prose">' +
+                escapeHtml(stripTrailingSeverityAndScore(run.llmOverallRaw ?? "")).replace(/\n/g, "<br>") +
+                "</div>"}</div>`
+        : '<p class="panel-empty">Run with LLM for an overall assessment of problems.</p>'}
+            <div class="priority-inline">
+              <div class="priority-inline-col">
+                <h4>High impact, easier</h4>
+                <ul id="q1" class="priority-list"></ul>
+              </div>
+              <div class="priority-inline-col">
+                <h4>High impact, harder</h4>
+                <ul id="q2" class="priority-list"></ul>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
 
-    ${llmPanelHtml}
-
-    <div class="panel">
-      <div class="panel-header">
-        <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">
-          <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>
+      <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 id="treemap"></div>
       </div>
-    </div>
 
-    <div class="dashboard-grid dashboard-grid-half">
-      <div class="panel">
-        <div class="panel-header">
-          <h2 class="panel-title">High impact, easier</h2>
-          <p class="panel-desc">High severity in smaller files.</p>
+      <div class="dashboard-cell dashboard-cell-list">
+        <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>
+          </div>
+          <div class="panel-body">
+            <ul class="debt-list" id="debtList"></ul>
+          </div>
         </div>
-        <div class="panel-body">
-          <ul id="q1" class="priority-list"></ul>
-        </div>
-      </div>
-      <div class="panel">
-        <div class="panel-header">
-          <h2 class="panel-title">High impact, harder</h2>
-          <p class="panel-desc">Critical or hotspot files.</p>
-        </div>
-        <div class="panel-body">
-          <ul id="q2" class="priority-list"></ul>
-        </div>
-      </div>
-    </div>
-
-    <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>
-      </div>
-      <div class="panel-body">
-        <ul class="debt-list" id="debtList"></ul>
       </div>
     </div>
   </main>

package/package.json

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