tech-debt-visualizer 0.2.4 → 0.2.5

package/dist/reports/assets/report.css

@@ -1,4 +1,4 @@
-/* Technical Debt Report — Grafana-style dashboard */
+/* Technical Debt Report — Colorful dashboard, clean fit, scroll in sections */
 :root {
   --bg: #0b0c0e;
   --bg-elevated: #111214;
@@ -9,8 +9,13 @@
   --text: #e8e9ea;
   --text-muted: #8b9199;
   --link: #5794f2;
-  --radius: 4px;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --radius: 6px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  --tier-1: #e53935;
+  --tier-2: #f57c00;
+  --tier-3: #f9a825;
+  --tier-4: #29b6f6;
+  --tier-5: #43a047;
 }
 
 [data-theme="light"] {
@@ -24,6 +29,11 @@
   --text-muted: #6b7077;
   --link: #3274d9;
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --tier-1: #c62828;
+  --tier-2: #ef6c00;
+  --tier-3: #f9a825;
+  --tier-4: #0288d1;
+  --tier-5: #2e7d32;
 }
 
 * { box-sizing: border-box; }
@@ -40,7 +50,11 @@ body {
 }
 
 body.dashboard-page {
-  padding-bottom: 2rem;
+  padding-bottom: 0;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 /* ——— Dashboard header (Grafana top bar: title left, score right) ——— */
@@ -104,70 +118,82 @@ 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(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-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-date {
   font-size: 12px;
   color: var(--text-muted);
 }
 
-/* ——— Main content: 2×2 dashboard grid ——— */
+/* ——— Main content: 2×2 grid, fills viewport, scroll inside cells ——— */
 .dashboard-main {
-  max-width: 1400px;
+  flex: 1;
+  min-height: 0;
+  max-width: 1600px;
   margin: 0 auto;
-  padding: 1rem 1.5rem;
-  min-height: calc(100vh - 52px);
+  padding: 0.75rem 1rem;
+  width: 100%;
+  overflow: hidden;
 }
 
 .dashboard-grid-2x2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto minmax(320px, 1fr);
-  gap: 1rem;
-  align-items: start;
+  grid-template-rows: auto 1fr;
+  gap: 0.75rem;
+  height: 100%;
+  min-height: 0;
+  align-items: stretch;
 }
 
 .dashboard-cell {
   min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 
 .dashboard-cell .panel {
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .dashboard-cell .panel-body {
   flex: 1;
   min-height: 0;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
-.dashboard-cell-score .panel-body-score { flex: 1 1 auto; overflow: visible; }
+.dashboard-cell-score .panel-body-score { flex: 0 1 auto; overflow: visible; min-height: 0; }
 
 .dashboard-cell-heatmap .panel-body-heatmap,
 .dashboard-cell-list .panel-body {
-  min-height: 280px;
+  min-height: 0;
 }
 
 @media (max-width: 900px) {
+  body.dashboard-page { height: auto; overflow: auto; }
   .dashboard-grid-2x2 {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto auto;
+    height: auto;
   }
+  .dashboard-cell-heatmap .panel-body-heatmap { min-height: 240px; }
+  .dashboard-cell-list .panel-body { min-height: 240px; }
 }
 
 @media (max-width: 560px) {
-  .dashboard-header { padding: 0.6rem 1rem; }
-  .dashboard-main { padding: 0.75rem 1rem; }
+  .dashboard-header { padding: 0.5rem 0.75rem; }
+  .dashboard-main { padding: 0.5rem 0.75rem; }
 }
 
-/* ——— Panels (Grafana-style) ——— */
+/* ——— Panels: borders, colored accents ——— */
 .panel {
   background: var(--surface);
   border: 1px solid var(--border);
@@ -177,94 +203,154 @@ body.dashboard-page {
 }
 
 .panel-header {
-  padding: 0.75rem 1rem;
+  padding: 0.6rem 0.85rem;
   border-bottom: 1px solid var(--border-subtle);
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.04);
+  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);
 }
 
 .panel-title {
   margin: 0;
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 12px;
+  font-weight: 700;
   color: var(--text);
-  letter-spacing: -0.01em;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 
 .panel-desc {
-  margin: 0.25rem 0 0;
-  font-size: 12px;
+  margin: 0.2rem 0 0;
+  font-size: 11px;
   color: var(--text-muted);
-  line-height: 1.4;
+  line-height: 1.35;
 }
 
 .panel-body {
-  padding: 1rem;
+  padding: 0.85rem 1rem;
 }
 
 .panel-body-center {
   text-align: center;
 }
 
-/* ——— Score panel (top-left: shield + caption + stats) ——— */
+/* ——— 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); }
+
 .panel-score .panel-body-score {
   text-align: center;
-  padding: 1.25rem 1rem;
+  padding: 1rem 0.85rem;
 }
 
-.panel-score .score-badge {
-  display: inline-block;
-  margin-bottom: 0.75rem;
+.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: 100px;
+  width: 72px;
   height: auto;
-  margin: 0 auto;
 }
 
 .panel-score .score-badge-svg .score-badge-num {
-  font-size: 36px;
-  font-weight: 800;
-  letter-spacing: -0.02em;
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  fill: #fff;
 }
 
 .panel-score .score-badge-svg .score-badge-of {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  opacity: 0.95;
+  fill: rgba(255,255,255,0.95);
 }
 
-.panel-score .score-label {
-  margin: 0 0 0.25rem;
-  font-size: 1rem;
+.score-numeric {
+  display: flex;
+  align-items: baseline;
+  gap: 0.2rem;
+}
+
+.score-num {
+  font-size: 2.25rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.04em;
+}
+
+.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-weight: 600;
-  color: var(--text);
+  color: var(--text-muted);
+}
+
+.panel-score .score-label {
+  margin: 0 0 0.2rem;
+  font-size: 0.95rem;
+  font-weight: 700;
 }
 
+.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.5rem;
-  font-size: 13px;
+  margin: 0 0 0.4rem;
+  font-size: 12px;
   color: var(--text-muted);
-  line-height: 1.45;
-  max-width: 280px;
+  line-height: 1.4;
+  max-width: 260px;
   margin-left: auto;
   margin-right: auto;
 }
 
 .panel-score .score-stats {
   margin: 0;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.04em;
+  font-weight: 600;
 }
 
 /* ——— Description of problems panel (top-right) ——— */
@@ -278,19 +364,19 @@ body.dashboard-page {
 .priority-inline {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-top: 1rem;
-  padding-top: 1rem;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
   border-top: 1px solid var(--border-subtle);
 }
 
 .priority-inline h4 {
-  margin: 0 0 0.5rem;
-  font-size: 11px;
-  font-weight: 600;
+  margin: 0 0 0.35rem;
+  font-size: 10px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  color: var(--tier-2);
 }
 
 .priority-inline .priority-list { margin: 0; }
@@ -324,10 +410,11 @@ body.dashboard-page {
   border-radius: var(--radius);
 }
 
-/* LLM panel accent */
+/* Problems panel: blue accent */
 .panel-llm {
   border-left: 3px solid var(--link);
 }
+.panel-llm .panel-header { border-left: none; }
 
 /* ——— Banner ——— */
 .no-llm-banner {
@@ -373,11 +460,11 @@ body.dashboard-page {
   outline-offset: 1px;
 }
 
-.treemap-cell[data-severity="critical"] { background: #c00; color: #fff; border-color: #900; }
-.treemap-cell[data-severity="high"]    { background: #e85d00; color: #fff; border-color: #b84a00; }
-.treemap-cell[data-severity="medium"]  { background: #b8860b; color: #fff; border-color: #8b6914; }
-.treemap-cell[data-severity="low"]     { background: #0a6b0a; color: #fff; border-color: #064906; }
-.treemap-cell[data-severity="none"]    { background: var(--border); color: var(--text-muted); border-color: var(--border); }
+.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); }
 
 .legend {
   display: flex;
@@ -389,12 +476,12 @@ body.dashboard-page {
   color: var(--text-muted);
 }
 
-.legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
-.legend .swatch { width: 10px; height: 10px; border-radius: 2px; }
-.legend .swatch-crit { background: #c00; }
-.legend .swatch-high { background: #e85d00; }
-.legend .swatch-med { background: #b8860b; }
-.legend .swatch-low { background: #0a6b0a; }
+.legend span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11px; font-weight: 600; }
+.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
+.legend .swatch-crit { background: var(--tier-1); }
+.legend .swatch-high { background: var(--tier-2); }
+.legend .swatch-med { background: var(--tier-3); }
+.legend .swatch-low { background: var(--tier-5); }
 .legend .swatch-none { background: var(--border); }
 
 /* ——— Priority lists ——— */
@@ -460,12 +547,12 @@ body.dashboard-page {
   border-radius: 3px;
 }
 
-.badge-critical { background: #c00; color: #fff; }
-.badge-high { background: #e85d00; color: #fff; }
-.badge-medium { background: #b8860b; color: #fff; }
-.badge-low { background: #0a6b0a; color: #fff; }
+.badge-critical { background: var(--tier-1); color: #fff; font-weight: 700; }
+.badge-high { background: var(--tier-2); color: #fff; font-weight: 700; }
+.badge-medium { background: var(--tier-3); color: #1a1a1a; font-weight: 700; }
+.badge-low { background: var(--tier-5); color: #fff; font-weight: 700; }
 .badge-none { background: var(--border); color: var(--text-muted); }
-.badge-llm { background: var(--link); color: #fff; }
+.badge-llm { background: var(--link); color: #fff; font-weight: 700; }
 
 /* ——— Detail modal ——— */
 #detail {

package/dist/reports/html.js

@@ -14,25 +14,25 @@ export async function generateHtmlReport(run, options) {
     const html = buildHtml(run, title, darkMode, css, script);
     await writeFile(outputPath, html, "utf-8");
 }
-/** Inline SVG badge: shield shape with tier number and "of 5". */
+/** Inline SVG badge: shield shape with tier number and "of 5" — clean, bold, tier-colored. */
 function buildScoreBadgeSvg(tier, fillColor) {
-    const lighter = adjustHexBrightness(fillColor, 1.3);
+    const lighter = adjustHexBrightness(fillColor, 1.25);
     const shadowId = "badge-shadow-" + tier;
     const gradientId = "badge-shine-" + tier;
     return `<svg class="score-badge-svg" viewBox="0 0 140 168" xmlns="http://www.w3.org/2000/svg" role="img">
   <defs>
     <linearGradient id="${gradientId}" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:${lighter};stop-opacity:0.5" />
+      <stop offset="0%" style="stop-color:${lighter};stop-opacity:0.6" />
       <stop offset="100%" style="stop-color:${fillColor};stop-opacity:1" />
     </linearGradient>
-    <filter id="${shadowId}" x="-30%" y="-20%" width="160%" height="150%">
-      <feDropShadow dx="0" dy="6" stdDeviation="8" flood-opacity="0.35"/>
+    <filter id="${shadowId}" x="-40%" y="-30%" width="180%" height="180%">
+      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="${fillColor}" flood-opacity="0.4"/>
     </filter>
   </defs>
   <path fill="url(#${gradientId})" filter="url(#${shadowId})" d="M70 12 C108 12 128 38 128 72 C128 106 70 156 70 156 C70 156 12 106 12 72 C12 38 32 12 70 12 Z"/>
-  <path fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2.5" stroke-linejoin="round" d="M70 12 C108 12 128 38 128 72 C128 106 70 156 70 156 C70 156 12 106 12 72 C12 38 32 12 70 12 Z"/>
-  <text x="70" y="78" text-anchor="middle" class="score-badge-num" fill="white">${tier}</text>
-  <text x="70" y="100" text-anchor="middle" class="score-badge-of" fill="white">of 5</text>
+  <path fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linejoin="round" d="M70 12 C108 12 128 38 128 72 C128 106 70 156 70 156 C70 156 12 106 12 72 C12 38 32 12 70 12 Z"/>
+  <text x="70" y="80" text-anchor="middle" class="score-badge-num" fill="white">${tier}</text>
+  <text x="70" y="102" text-anchor="middle" class="score-badge-of" fill="rgba(255,255,255,0.95)">of 5</text>
 </svg>`;
 }
 function adjustHexBrightness(hex, factor) {
@@ -113,12 +113,18 @@ 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 tier-${cleanliness.tier}">
-          <div class="panel-header">
+        <div class="panel panel-score panel-score-tier-${cleanliness.tier}">
+          <div class="panel-header panel-header-accent">
             <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>
+            <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>
             <p class="score-label">${escapeHtml(cleanliness.label)}</p>
             <p class="score-desc">${escapeHtml(cleanliness.description)}</p>
             <p class="score-stats">${statsLine}</p>
@@ -154,7 +160,7 @@ function buildHtml(run, title, darkMode, css, script) {
       </div>
 
       <div class="dashboard-cell dashboard-cell-heatmap">
-        <div class="panel panel-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>
@@ -173,7 +179,7 @@ function buildHtml(run, title, darkMode, css, script) {
       </div>
 
       <div class="dashboard-cell dashboard-cell-list">
-        <div class="panel">
+        <div class="panel panel-header-accent-blue">
           <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.4",
+  "version": "0.2.5",
   "description": "Language-agnostic CLI that analyzes repos and generates interactive technical debt visualizations with AI-powered insights",
   "type": "module",
   "main": "dist/index.js",