tech-debt-visualizer 0.2.19 → 0.2.21

package/dist/cli.js

@@ -195,7 +195,7 @@ function printCliReport(run, ci) {
     process.stdout.write(chalk.bold.dim("  Technical Debt Cleanliness Score\n"));
     process.stdout.write("  " + "—".repeat(52) + "\n");
     const tierColor = cleanlinessTierColor(cleanliness.tier);
-    process.stdout.write(tierColor(`  ${cleanliness.label} (${Math.round(cleanlinessScore)}/100, tier ${cleanliness.tier}/5)\n`));
+    process.stdout.write(tierColor(`  ${cleanliness.label} (${cleanliness.tier} out of 5)\n`));
     process.stdout.write(tierColor(`  ${cleanliness.description}\n`));
     process.stdout.write("  " + "—".repeat(52) + "\n\n");
     process.stdout.write(chalk.bold("  Summary\n"));
@@ -205,8 +205,7 @@ function printCliReport(run, ci) {
     if (run.debtTrend && run.debtTrend.length > 0) {
         process.stdout.write(`  Recent commits: ${chalk.cyan(String(run.debtTrend.length))}\n`);
     }
-    process.stdout.write(`  Cleanliness:    ${cleanlinessColor(cleanlinessScore)} / 100 (tier ${cleanliness.tier}/5)\n`);
-    process.stdout.write(chalk.dim("  0 = most debt, 100 = least debt\n\n"));
+    process.stdout.write(`  Score:         ${tierColor(`${cleanliness.tier} out of 5`)}\n\n`);
     const bySeverity = { critical: 0, high: 0, medium: 0, low: 0 };
     for (const d of debtItems) {
         bySeverity[d.severity]++;
@@ -296,14 +295,6 @@ function severityColor(score) {
         return chalk.yellow(String(score));
     return chalk.green(String(score));
 }
-function cleanlinessColor(cleanlinessScore) {
-    const n = Math.round(cleanlinessScore);
-    if (n >= 70)
-        return chalk.green(String(n));
-    if (n >= 40)
-        return chalk.yellow(String(n));
-    return chalk.red(String(n));
-}
 function cleanlinessTierColor(tier) {
     switch (tier) {
         case 5:

package/dist/llm.js

@@ -328,7 +328,7 @@ All files in this codebase: ${allFiles.join(", ")}
 Top risk files (by hotspot): ${topFiles.join(", ")}
 
 Output only:
-1. A single paragraph of 7–10 sentences that gives full context for the whole codebase. Cover ALL files: briefly note which files or areas are in good shape, which have issues, and how they fit together. Include strengths, main concerns, and the single most important improvement. Write for someone who needs to understand the entire codebase, not just the problematic parts. No code block unless absolutely necessary.
+1. A single paragraph of 5–8 sentences that gives full context for the whole codebase. Cover ALL files: briefly note which files or areas are in good shape, which have issues, and how they fit together. Include strengths, main concerns, and the single most important improvement. Write for someone who needs to understand the entire codebase, not just the problematic parts. No code block unless absolutely necessary.
 2. On the next line write only one word: critical, high, medium, low, or none (overall codebase technical debt severity).
 3. On the line after that write only a number 0-100 (0 = most debt, 100 = least debt / cleanest).
 No preamble.`;

package/dist/reports/assets/report.css

@@ -146,14 +146,20 @@ body.dashboard-page {
 }
 
 .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-of { font-size: 0.85rem; font-weight: 500; }
 .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.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; }
+/* Match hero score panel tier colors (1=worst, 5=best) */
+.dashboard-score.tier-1 { background: rgba(255, 107, 107, 0.2); color: #ff6b6b; font-weight: 700; }
+.dashboard-score.tier-1 .dashboard-score-of { color: rgba(255, 107, 107, 0.9); }
+.dashboard-score.tier-2 { background: rgba(255, 107, 53, 0.2); color: #ff6b35; font-weight: 700; }
+.dashboard-score.tier-2 .dashboard-score-of { color: rgba(255, 107, 53, 0.95); }
+.dashboard-score.tier-3 { background: rgba(255, 179, 71, 0.2); color: #ffd23f; font-weight: 700; }
+.dashboard-score.tier-3 .dashboard-score-of { color: rgba(255, 210, 63, 0.95); }
+.dashboard-score.tier-4 { background: rgba(78, 205, 196, 0.2); color: #4ecdc4; font-weight: 700; }
+.dashboard-score.tier-4 .dashboard-score-of { color: rgba(78, 205, 196, 0.95); }
+.dashboard-score.tier-5 { background: rgba(6, 255, 165, 0.2); color: #06ffa5; font-weight: 700; }
+.dashboard-score.tier-5 .dashboard-score-of { color: rgba(6, 255, 165, 0.95); }
 
 .dashboard-date {
   font-size: 12px;
@@ -506,7 +512,7 @@ body.dashboard-page {
   display: flex;
   align-items: baseline;
   justify-content: center;
-  gap: 0.4rem; /* space between number and "of 100" */
+  gap: 0.4rem; /* space between number and "out of 5" */
   margin-bottom: 0.5rem;
 }
 
@@ -550,20 +556,59 @@ body.dashboard-page {
   font-weight: 600;
 }
 
-/* ——— Hero-style score panel (reference look) ——— */
+/* ——— Hero-style score panel: colors tied to tier (1=worst, 5=best) ——— */
 .panel-score-pop {
+  --score-accent-a: #ff6b35;
+  --score-accent-b: #ff3366;
+  --score-glow: rgba(255, 107, 53, 0.35);
   border: 2px solid rgba(255, 107, 53, 0.3);
-  box-shadow: var(--glow), 0 20px 60px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 30px var(--score-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
   background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--surface-hover) 100%);
 }
 
+.panel-score-pop[data-tier="1"] {
+  --score-accent-a: #ff6b6b;
+  --score-accent-b: #e53935;
+  --score-glow: rgba(229, 57, 53, 0.35);
+  border-color: rgba(229, 57, 53, 0.4);
+  box-shadow: 0 0 30px var(--score-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+.panel-score-pop[data-tier="2"] {
+  --score-accent-a: #ff6b35;
+  --score-accent-b: #ff3366;
+  --score-glow: rgba(255, 107, 53, 0.35);
+  border-color: rgba(255, 107, 53, 0.4);
+  box-shadow: 0 0 30px var(--score-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+.panel-score-pop[data-tier="3"] {
+  --score-accent-a: #ffb347;
+  --score-accent-b: #ffd23f;
+  --score-glow: rgba(255, 210, 63, 0.3);
+  border-color: rgba(255, 210, 63, 0.4);
+  box-shadow: 0 0 30px var(--score-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+.panel-score-pop[data-tier="4"] {
+  --score-accent-a: #4ecdc4;
+  --score-accent-b: #29b6f6;
+  --score-glow: rgba(78, 205, 196, 0.3);
+  border-color: rgba(78, 205, 196, 0.4);
+  box-shadow: 0 0 30px var(--score-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+.panel-score-pop[data-tier="5"] {
+  --score-accent-a: #06ffa5;
+  --score-accent-b: #43a047;
+  --score-glow: rgba(6, 255, 165, 0.3);
+  border-color: rgba(6, 255, 165, 0.4);
+  box-shadow: 0 0 30px var(--score-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+
 .panel-score-pop::before {
   display: none;
 }
 
 .panel-score-pop:hover {
   transform: none;
-  box-shadow: var(--glow), 0 20px 60px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 30px var(--score-glow), 0 20px 60px rgba(0, 0, 0, 0.4);
 }
 
 .panel-score-pop .panel-body-score {
@@ -587,22 +632,22 @@ body.dashboard-page {
   font-size: 3.25rem;
   font-weight: 800;
   line-height: 1;
-  background: linear-gradient(180deg, var(--accent-orange) 0%, var(--accent-red) 100%);
+  background: linear-gradient(180deg, var(--score-accent-a) 0%, var(--score-accent-b) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.35));
+  filter: drop-shadow(0 0 20px var(--score-glow));
 }
 
 .panel-score-pop .score-of {
   font-size: 1.35rem;
   font-weight: 700;
-  color: var(--text-muted);
+  color: var(--score-accent-a);
 }
 
 .panel-score-pop .score-label {
   display: inline-block;
-  background: linear-gradient(135deg, var(--accent-orange), var(--accent-red));
+  background: linear-gradient(135deg, var(--score-accent-a), var(--score-accent-b));
   padding: 0.45rem 1.1rem;
   border-radius: 50px;
   font-family: "Inter", sans-serif;
@@ -610,12 +655,16 @@ body.dashboard-page {
   font-weight: 700;
   letter-spacing: 0.5px;
   text-transform: uppercase;
-  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.35);
+  box-shadow: 0 6px 18px var(--score-glow);
   margin-bottom: 0.35rem;
   -webkit-text-fill-color: initial;
   color: #fff;
 }
 
+.panel-score-pop[data-tier="3"] .score-label {
+  color: #1a1a1a;
+}
+
 .panel-score-pop .score-desc {
   font-size: 0.9rem;
   color: var(--text-muted);
@@ -652,18 +701,6 @@ body.dashboard-page {
   flex-wrap: wrap;
 }
 
-.panel-score-pop[data-tier="1"] .score-num { --accent-orange: #ff6b6b; --accent-red: #e53935; }
-.panel-score-pop[data-tier="2"] .score-num { --accent-orange: #ff6b35; --accent-red: #ff3366; }
-.panel-score-pop[data-tier="3"] .score-num { --accent-orange: #ffb347; --accent-red: #ffd23f; }
-.panel-score-pop[data-tier="4"] .score-num { --accent-orange: #4ecdc4; --accent-red: #29b6f6; }
-.panel-score-pop[data-tier="5"] .score-num { --accent-orange: #06ffa5; --accent-red: #43a047; }
-
-.panel-score-pop[data-tier="1"] .score-label { background: linear-gradient(135deg, #ff6b6b, #e53935); }
-.panel-score-pop[data-tier="2"] .score-label { background: linear-gradient(135deg, var(--accent-orange), var(--accent-red)); }
-.panel-score-pop[data-tier="3"] .score-label { background: linear-gradient(135deg, #ffb347, #ffd23f); color: #1a1a1a; }
-.panel-score-pop[data-tier="4"] .score-label { background: linear-gradient(135deg, #4ecdc4, #29b6f6); }
-.panel-score-pop[data-tier="5"] .score-label { background: linear-gradient(135deg, #06ffa5, #43a047); }
-
 /* ——— Description of problems panel (top-right) ——— */
 .panel-empty {
   margin: 0;
@@ -1091,12 +1128,12 @@ body.dashboard-page {
 .dashboard-main ::-webkit-scrollbar-thumb,
 .panel-body::-webkit-scrollbar-thumb,
 .overlay-prompt-wrap::-webkit-scrollbar-thumb {
-  background: var(--accent-orange);
+  background: var(--border);
   border-radius: 4px;
 }
 
 .dashboard-main ::-webkit-scrollbar-thumb:hover,
 .panel-body::-webkit-scrollbar-thumb:hover,
 .overlay-prompt-wrap::-webkit-scrollbar-thumb:hover {
-  background: var(--accent-red);
+  background: var(--text-muted);
 }

package/dist/reports/html.js

@@ -78,11 +78,11 @@ function buildHtml(run, title, darkMode, css, script) {
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>${escapeHtml(title)}</title>
-  <meta property="og:title" content="${escapeHtml(title)} — ${scoreNum}/100 ${escapeHtml(cleanliness.label)}" />
+  <meta property="og:title" content="${escapeHtml(title)} — ${cleanliness.tier} out of 5 ${escapeHtml(cleanliness.label)}" />
   <meta property="og:description" content="${escapeHtml(cleanliness.description)}" />
   <meta property="og:type" content="website" />
   <meta name="twitter:card" content="summary" />
-  <meta name="twitter:title" content="${escapeHtml(title)} — ${scoreNum}/100" />
+  <meta name="twitter:title" content="${escapeHtml(title)} — ${cleanliness.tier} out of 5" />
   <meta name="twitter:description" content="${escapeHtml(cleanliness.label)}: ${escapeHtml(cleanliness.description)}" />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <style>${css}</style>
@@ -95,9 +95,9 @@ function buildHtml(run, title, darkMode, css, script) {
       <span class="dashboard-meta">${escapeHtml(run.repoPath)}</span>
     </div>
     <div class="dashboard-header-right">
-      <div class="dashboard-score tier-${cleanliness.tier}" aria-label="Score ${scoreNum} of 100">
-        <span class="dashboard-score-value">${scoreNum}</span>
-        <span class="dashboard-score-of">/ 100</span>
+      <div class="dashboard-score tier-${cleanliness.tier}" aria-label="Score ${cleanliness.tier} out of 5">
+        <span class="dashboard-score-value">${cleanliness.tier}</span>
+        <span class="dashboard-score-of"> out of 5</span>
         <span class="dashboard-score-label">${escapeHtml(cleanliness.label)}</span>
       </div>
       <button type="button" class="btn-ai-prompts btn-ai-prompts-header" id="btnAiPrompts">AI cleanup prompts</button>
@@ -114,8 +114,8 @@ function buildHtml(run, title, darkMode, css, script) {
           </div>
           <div class="panel-body panel-body-score">
             <div class="score-numeric">
-              <span class="score-num">${scoreNum}</span>
-              <span class="score-of">of 100</span>
+              <span class="score-num">${cleanliness.tier}</span>
+              <span class="score-of"> out of 5</span>
             </div>
             <p class="score-label">${escapeHtml(cleanliness.label)}</p>
             <p class="score-desc">${escapeHtml(cleanliness.description)}</p>

package/package.json

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