tech-debt-visualizer 0.1.6 → 0.2.0

package/dist/llm.js

@@ -1,12 +1,23 @@
 /**
  * LLM integration: debt explanations, per-file cleanliness, and overall assessment.
  * Supports OpenAI, OpenRouter (OpenAI-compatible), and Google Gemini.
+ *
+ * No time limits: requests run until the API returns. Truncation is only from token limits.
+ * Override with LLMConfig.maxTokens or --llm-max-tokens. Defaults are generous to avoid cut-off:
+ * - Debt item insights (explainDebtItem): config.maxTokens ?? DEFAULT_MAX_TOKENS (2048)
+ * - Per-file assessment (assessFileCleanliness): config.maxTokens ?? DEFAULT_MAX_TOKENS_FILE (8192)
+ * - Overall assessment (assessOverallCleanliness): config.maxTokens ?? DEFAULT_MAX_TOKENS_OVERALL (8192)
+ * - enrichDebtWithInsights: passes config.maxTokens ?? DEFAULT_MAX_TOKENS to each item
  */
 const OPENAI_DEFAULT_MODEL = "gpt-4o-mini";
-const OPENROUTER_DEFAULT_MODEL = "google/gemini-2.0-flash-001";
-const GEMINI_DEFAULT_MODEL = "gemini-1.5-flash";
-const DEFAULT_MAX_TOKENS = 300;
-const DEFAULT_MAX_TOKENS_OVERALL = 500;
+const OPENROUTER_DEFAULT_MODEL = "google/gemini-2.5-flash";
+const GEMINI_DEFAULT_MODEL = "gemini-2.5-flash";
+/** Default for enrichDebtWithInsights (debt item insights). Override with config.maxTokens. */
+const DEFAULT_MAX_TOKENS = 2048;
+/** Default for assessFileCleanliness. */
+const DEFAULT_MAX_TOKENS_FILE = 8192;
+/** Default for assessOverallCleanliness. Override with config.maxTokens. */
+const DEFAULT_MAX_TOKENS_OVERALL = 8192;
 const OPENROUTER_BASE = "https://openrouter.ai/api/v1";
 const GEMINI_BASE = "https://generativelanguage.googleapis.com/v1beta";
 /** Extract first markdown code block and the prose before it. */
@@ -18,11 +29,70 @@ function parseCodeBlockAndProse(response) {
     const code = match[2]?.trim();
     return { prose, code: code || undefined };
 }
-/** Resolve provider and auth from config + env. OpenRouter and Gemini take precedence when their keys are set. */
+/** Parse trailing "severity" line and "score" line from LLM text; return assessment + optional score/severity. */
+function parseSeverityAndScore(lines) {
+    let assessment = lines.join("\n").trim();
+    let score;
+    let severity;
+    if (lines.length > 0) {
+        const lastLine = lines[lines.length - 1];
+        const scoreMatch = lastLine.match(/^\s*(\d{1,3})\s*$/);
+        if (scoreMatch) {
+            score = Math.min(100, Math.max(0, parseInt(scoreMatch[1], 10)));
+            const rest = lines.length > 1 ? lines.slice(0, -1) : [];
+            if (rest.length > 0) {
+                const severityLine = rest[rest.length - 1];
+                const sevMatch = severityLine.match(/^\s*(critical|high|medium|low|none)\s*$/i);
+                if (sevMatch) {
+                    severity = sevMatch[1].toLowerCase();
+                    rest.pop();
+                }
+                assessment = rest.join("\n").trim();
+            }
+            else {
+                assessment = "";
+            }
+        }
+    }
+    return { assessment: assessment || lines.join("\n").trim(), score, severity };
+}
+/** Parse per-file assessment: prose, fileScore 0–100, severity (critical|high|medium|low|none), optional code block. */
+function parseFileAssessmentResponse(raw) {
+    const { prose, code } = parseCodeBlockAndProse(raw);
+    const lines = prose.split(/\n/).map((l) => l.trim()).filter(Boolean);
+    const parsed = parseSeverityAndScore(lines);
+    return {
+        assessment: parsed.assessment || prose,
+        fileScore: parsed.score,
+        severity: parsed.severity,
+        code: code || undefined,
+    };
+}
+/** Resolve provider and auth from config + env. When --llm-key is used, provider is inferred from key format so a Gemini key is not sent to OpenRouter. */
 export function resolveLLMConfig(config = {}) {
-    const openRouterKey = config.apiKey ?? process.env.OPENROUTER_API_KEY;
-    const geminiKey = config.apiKey ?? process.env.GEMINI_API_KEY ?? process.env.GOOGLE_GENAI_API_KEY;
-    const openaiKey = config.apiKey ?? process.env.OPENAI_API_KEY ?? process.env.ANTHROPIC_API_KEY;
+    const cliKey = config.apiKey;
+    const openRouterKey = cliKey ?? process.env.OPENROUTER_API_KEY;
+    const geminiKey = cliKey ?? process.env.GEMINI_API_KEY ?? process.env.GOOGLE_GENAI_API_KEY;
+    const openaiKey = cliKey ?? process.env.OPENAI_API_KEY ?? process.env.ANTHROPIC_API_KEY;
+    // When a single key is passed (e.g. --llm-key), pick provider by key format so we don't send a Gemini key to OpenRouter (401 "No cookie auth").
+    if (cliKey) {
+        if (cliKey.startsWith("AIza")) {
+            return {
+                provider: "gemini",
+                apiKey: cliKey,
+                baseURL: GEMINI_BASE,
+                model: config.model ?? process.env.GEMINI_MODEL ?? GEMINI_DEFAULT_MODEL,
+            };
+        }
+        if (cliKey.startsWith("sk-")) {
+            return {
+                provider: "openai",
+                apiKey: cliKey,
+                baseURL: config.baseURL ?? process.env.OPENAI_BASE_URL ?? "",
+                model: config.model ?? process.env.OPENAI_MODEL ?? OPENAI_DEFAULT_MODEL,
+            };
+        }
+    }
     if (openRouterKey) {
         return {
             provider: "openrouter",
@@ -73,13 +143,17 @@ async function openAICompatibleCompletion(prompt, opts) {
                 max_tokens: opts.maxTokens,
             }),
         });
-        if (!res.ok)
+        const bodyText = await res.text();
+        if (!res.ok) {
+            process.stderr.write(`[LLM] OpenAI-compatible API error ${res.status}: ${bodyText.slice(0, 200)}${bodyText.length > 200 ? "..." : ""}\n`);
             return null;
-        const data = (await res.json());
+        }
+        const data = JSON.parse(bodyText);
         const text = data.choices?.[0]?.message?.content?.trim();
         return text || null;
     }
-    catch {
+    catch (e) {
+        process.stderr.write(`[LLM] Request failed: ${e instanceof Error ? e.message : String(e)}\n`);
         return null;
     }
 }
@@ -98,17 +172,22 @@ async function geminiCompletion(prompt, opts) {
                 },
             }),
         });
-        if (!res.ok)
+        const bodyText = await res.text();
+        if (!res.ok) {
+            process.stderr.write(`[LLM] Gemini API error ${res.status}: ${bodyText.slice(0, 300)}${bodyText.length > 300 ? "..." : ""}\n`);
             return null;
-        const data = (await res.json());
+        }
+        const data = JSON.parse(bodyText);
         const text = data.candidates?.[0]?.content?.parts?.[0]?.text?.trim();
         return text || null;
     }
-    catch {
+    catch (e) {
+        process.stderr.write(`[LLM] Gemini request failed: ${e instanceof Error ? e.message : String(e)}\n`);
         return null;
     }
 }
-export async function enrichDebtWithInsights(items, fileContents, config = {}) {
+/** Optional progress callback: (completedBatches, totalBatches) after each batch. */
+export async function enrichDebtWithInsights(items, fileContents, config = {}, onProgress) {
     const resolved = resolveLLMConfig(config);
     if (!resolved)
         return items;
@@ -116,6 +195,7 @@ export async function enrichDebtWithInsights(items, fileContents, config = {}) {
     const maxTokens = config.maxTokens ?? DEFAULT_MAX_TOKENS;
     const enriched = [];
     const batchSize = 5;
+    const totalBatches = Math.ceil(items.length / batchSize);
     for (let i = 0; i < items.length; i += batchSize) {
         const batch = items.slice(i, i + batchSize);
         const results = await Promise.allSettled(batch.map((item) => explainDebtItem(item, fileContents.get(item.file) ?? "", {
@@ -134,12 +214,15 @@ export async function enrichDebtWithInsights(items, fileContents, config = {}) {
                     ...item,
                     insight: v.insight,
                     suggestedCode: v.suggestedCode,
+                    llmSeverity: v.severity,
+                    llmRawResponse: v.raw,
                 });
             }
             else {
                 enriched.push(item);
             }
         }
+        onProgress?.(Math.floor((i + batchSize) / batchSize), totalBatches);
     }
     return enriched;
 }
@@ -147,14 +230,8 @@ async function explainDebtItem(item, fileContent, opts) {
     const snippet = item.line
         ? fileContent.split("\n").slice(Math.max(0, item.line - 3), (item.endLine ?? item.line) + 2).join("\n")
         : fileContent.slice(0, 1500);
-    const prompt = `You are a senior engineer reviewing technical debt. For this item:
-
-1) In 1-2 sentences: why it matters for maintainability or risk, and what to do.
-2) If a concrete code simplification or refactor is possible (e.g. reduce branching, extract function, simplify condition), provide ONLY the refactored/simplified code in a markdown code block. Use the same language as the snippet. If no code change is needed or the fix is trivial (e.g. "add a comment"), omit the code block.
-
-Debt: ${item.title}
-Category: ${item.category}
-Description: ${item.description}
+    const prompt = `Technical debt item: ${item.title} (${item.category})
+${item.description}
 ${item.metrics ? `Metrics: ${JSON.stringify(item.metrics)}` : ""}
 
 Relevant code:
@@ -162,47 +239,68 @@ Relevant code:
 ${snippet}
 \`\`\`
 
-Reply format: Short explanation first, then optionally a code block with the suggested refactor. No other preamble.`;
-    const raw = await chat(prompt, { ...opts, maxTokens: 500 });
+Output only:
+1. A two- to four-sentence summary of the issues: why it matters and what to do. No code block unless absolutely necessary to demonstrate.
+2. On the next line write only one word: critical, high, medium, low, or none (how severe this debt item is; none = not significant).
+No preamble.`;
+    const raw = await chat(prompt, opts);
     if (!raw)
         return null;
     const { prose, code } = parseCodeBlockAndProse(raw);
-    return { insight: prose || item.description, suggestedCode: code };
+    const lines = prose.split(/\n/).map((l) => l.trim()).filter(Boolean);
+    let severity;
+    let assessment = prose;
+    if (lines.length > 0) {
+        const lastLine = lines[lines.length - 1];
+        const sevMatch = lastLine.match(/^\s*(critical|high|medium|low|none)\s*$/i);
+        if (sevMatch) {
+            severity = sevMatch[1].toLowerCase();
+            const rest = lines.slice(0, -1).join("\n").trim();
+            assessment = rest || prose;
+        }
+    }
+    return {
+        insight: assessment || item.description,
+        suggestedCode: code,
+        severity,
+        raw,
+    };
 }
-/** Per-file: LLM assesses cleanliness and suggests optimizations with cross-file context. */
+/** Per-file: LLM gives a short summary, a 0–100 debt score, and optionally one refactor. One request per file; call in parallel from CLI. */
 export async function assessFileCleanliness(filePath, content, metrics, config = {}, repoContext) {
     const resolved = resolveLLMConfig(config);
     if (!resolved)
         return null;
-    const snippet = content.length > 4000 ? content.slice(0, 4000) + "\n\n[... truncated]" : content;
-    const otherFiles = repoContext?.filePaths?.filter((p) => p !== filePath).slice(0, 80) ?? [];
-    const repoContextBlock = otherFiles.length > 0
-        ? `\nRepository context (other files in this run): ${otherFiles.join(", ")}.\nWhen suggesting optimizations, you may reference other files (e.g. extract to a shared module, reuse from another file, or move code between files). Explain why each suggestion helps.\n`
-        : "";
-    const prompt = `You are a senior engineer assessing code cleanliness and possible optimizations for this file.
-
-1) In 1-3 sentences: how clean and maintainable is it, and one or two concrete improvements (or "Looks good" if fine). Explain why each improvement matters.
-2) If one specific optimization is possible (e.g. simplify a function, reduce nesting, extract a helper, or a cross-file refactor like moving code to a shared module), provide ONLY that refactored snippet in a markdown code block. Same language as the file. Briefly say why it helps. If no clear code change applies, omit the code block.
-${repoContextBlock}
-File: ${filePath}
-Metrics: complexity ${metrics.cyclomaticComplexity ?? "?"}, lines ${metrics.lineCount}, ${metrics.hasDocumentation ? "has docs" : "no module docs"}${metrics.hotspotScore != null ? `, hotspot ${metrics.hotspotScore.toFixed(2)}` : ""}.
+    const snippet = content.length > 3500 ? content.slice(0, 3500) + "\n\n[... truncated]" : content;
+    const prompt = `File: ${filePath}
+Metrics: complexity ${metrics.cyclomaticComplexity ?? "?"}, lines ${metrics.lineCount}, ${metrics.hasDocumentation ? "has docs" : "no module docs"}${metrics.hotspotScore != null ? `, hotspot ${metrics.hotspotScore.toFixed(2)}` : ""}
 
 Code:
 \`\`\`
 ${snippet}
 \`\`\`
 
-Reply: short assessment first (with brief "why"), then optionally a code block with the suggested refactor. No preamble.`;
+Output only:
+1. A two- to four-sentence summary of the issues (how clean/maintainable, main concerns). No code block unless absolutely necessary to demonstrate.
+2. On the next line write only one word: critical, high, medium, low, or none (this file's technical debt severity; none = no significant debt).
+3. On the line after that write only a number 0-100 (100 = most technical debt).
+No preamble.`;
     const raw = await chat(prompt, {
         ...resolved,
-        maxTokens: config.maxTokens ?? 500,
+        maxTokens: config.maxTokens ?? DEFAULT_MAX_TOKENS_FILE,
     });
     if (!raw)
         return null;
-    const { prose, code } = parseCodeBlockAndProse(raw);
-    return { assessment: prose, suggestedCode: code };
+    const parsed = parseFileAssessmentResponse(raw);
+    return {
+        assessment: parsed.assessment,
+        suggestedCode: parsed.code,
+        fileScore: parsed.fileScore,
+        severity: parsed.severity,
+        raw,
+    };
 }
-/** Overall: LLM assesses the whole codebase cleanliness in a short paragraph. */
+/** Overall: LLM assesses the whole codebase and optionally a 0–100 debt score. */
 export async function assessOverallCleanliness(run, config = {}) {
     const resolved = resolveLLMConfig(config);
     if (!resolved)
@@ -215,52 +313,25 @@ export async function assessOverallCleanliness(run, config = {}) {
         .sort((a, b) => (b.hotspotScore ?? 0) - (a.hotspotScore ?? 0))
         .slice(0, 12)
         .map((m) => m.file);
-    const prompt = `You are a senior engineer giving a brief overall assessment of a codebase's technical debt and cleanliness.
-
-Summary:
-- ${fileCount} files analyzed
-- ${debtCount} debt items (${criticalHigh} critical/high)
-- ${hotspots} hotspot files (high churn + complexity)
-- Top files by risk: ${topFiles.join(", ")}
-
-In one short paragraph (3-5 sentences), assess overall cleanliness: main strengths or concerns, and the single most important thing to improve. Be direct and actionable. No preamble.`;
-    return chat(prompt, {
-        ...resolved,
-        maxTokens: config.maxTokens ?? DEFAULT_MAX_TOKENS_OVERALL,
-    });
-}
-/** LLM suggests 3–5 prioritized next steps (actionable bullets). */
-export async function suggestNextSteps(run, config = {}) {
-    const resolved = resolveLLMConfig(config);
-    if (!resolved)
-        return null;
-    const fileCount = run.fileMetrics.length;
-    const debtCount = run.debtItems.length;
-    const bySeverity = run.debtItems.reduce((acc, d) => {
-        acc[d.severity] = (acc[d.severity] ?? 0) + 1;
-        return acc;
-    }, {});
-    const severityOrd = (s) => ({ critical: 4, high: 3, medium: 2, low: 1 }[s] ?? 0);
-    const topItems = run.debtItems
-        .sort((a, b) => severityOrd(b.severity) - severityOrd(a.severity))
-        .slice(0, 15)
-        .map((d) => `${d.severity}: ${d.title} (${d.file}${d.line ? `:${d.line}` : ""})`);
-    const prompt = `You are a senior engineer. Given this technical debt summary, suggest 3–5 concrete, prioritized next steps the team should take to reduce debt. Be specific (files, types of fixes). Output ONLY a short bullet list: one action per line, starting each line with "- " or "• ". No preamble or explanation.
+    const prompt = `Codebase summary: ${fileCount} files, ${debtCount} debt items (${criticalHigh} critical/high), ${hotspots} hotspots. Top risk files: ${topFiles.join(", ")}
 
-Summary: ${fileCount} files, ${debtCount} debt items. By severity: ${JSON.stringify(bySeverity)}.
-Sample items: ${topItems.join("; ")}
-
-List 3–5 next steps:`;
+Output only:
+1. A two- to four-sentence summary of the main issues (strengths, concerns, single most important improvement). No code block unless absolutely necessary to demonstrate.
+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 (100 = most debt).
+No preamble.`;
     const raw = await chat(prompt, {
         ...resolved,
-        maxTokens: 300,
+        maxTokens: config.maxTokens ?? DEFAULT_MAX_TOKENS_OVERALL,
     });
     if (!raw)
         return null;
-    const bullets = raw
-        .split(/\n/)
-        .map((s) => s.replace(/^[\s\-•*]+\s*/, "").trim())
-        .filter((s) => s.length > 0)
-        .slice(0, 5);
-    return bullets.length > 0 ? bullets : null;
+    const lines = raw.trim().split(/\n/).map((l) => l.trim()).filter(Boolean);
+    const parsed = parseSeverityAndScore(lines);
+    return {
+        assessment: parsed.assessment || raw.trim(),
+        score: parsed.score,
+        severity: parsed.severity,
+        raw,
+    };
 }

package/dist/reports/assets/report.css

@@ -0,0 +1,322 @@
+/* Technical Debt Report - theme and layout */
+:root {
+  --bg: #fff;
+  --surface: #fff;
+  --border: #ccc;
+  --text: #222;
+  --text-muted: #666;
+  --link: #0568c2;
+}
+
+[data-theme="dark"] {
+  --bg: #1a1a1a;
+  --surface: #252525;
+  --border: #404040;
+  --text: #e0e0e0;
+  --text-muted: #999;
+  --link: #6eb3f7;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+/* Banner */
+.no-llm-banner {
+  width: 100%;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 0.5rem 1rem;
+  text-align: center;
+}
+
+.no-llm-banner .no-llm-cta {
+  font-size: 14px;
+  font-weight: normal;
+  color: var(--text);
+  margin: 0;
+}
+
+/* Hero / score */
+.hero-caption {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0 0 0.5rem;
+  text-align: center;
+}
+
+.hero {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.score-badge {
+  display: inline-block;
+  margin-bottom: 0.75rem;
+  line-height: 0;
+}
+
+.score-badge-svg {
+  display: block;
+  width: 160px;
+  height: auto;
+  max-width: min(160px, 40vw);
+}
+
+.score-badge-svg .score-badge-num {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 56px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.score-badge-svg .score-badge-of {
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0.95;
+}
+
+.hero .score-label { font-size: 1.1rem; font-weight: bold; color: var(--text); margin: 0 0 0.2rem; }
+.hero .score-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 0.35rem; max-width: 360px; margin-left: auto; margin-right: auto; }
+.hero .report-meta { font-size: 12px; color: var(--text-muted); }
+
+.hero.tier-1 { --tier-bg: #c00; --tier-num: #fff; }
+.hero.tier-2 { --tier-bg: #e85d00; --tier-num: #fff; }
+.hero.tier-3 { --tier-bg: #b8860b; --tier-num: #fff; }
+.hero.tier-4 { --tier-bg: #069; --tier-num: #fff; }
+.hero.tier-5 { --tier-bg: #0a6b0a; --tier-num: #fff; }
+
+/* Summary cards */
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .summary-cards { grid-template-columns: repeat(2, 1fr); }
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: 0.75rem 1rem;
+}
+
+.card .value { font-size: 1.35rem; font-weight: bold; color: var(--text); }
+.card .label { font-size: 12px; color: var(--text-muted); margin-top: 0.15rem; }
+
+/* Sections */
+.section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+}
+
+.section h2 { font-size: 1rem; margin: 0 0 0.75rem; color: var(--text); font-weight: bold; }
+.section-desc { font-size: 13px; color: var(--text-muted); margin: -0.35rem 0 0.75rem; line-height: 1.4; }
+
+/* Treemap */
+#treemap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-height: 160px;
+  padding: 0.25rem 0;
+}
+
+.treemap-cell {
+  display: flex;
+  align-items: flex-end;
+  min-width: 64px;
+  padding: 6px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 1px solid rgba(0,0,0,0.1);
+}
+
+.treemap-cell:hover { outline: 2px solid var(--text); 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); }
+
+/* Legend */
+.legend { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; font-size: 12px; color: var(--text-muted); }
+.legend span { display: inline-flex; align-items: center; gap: 0.25rem; }
+.legend .swatch { width: 10px; height: 10px; }
+.legend .swatch-crit { background: #c00; }
+.legend .swatch-high { background: #e85d00; }
+.legend .swatch-med { background: #b8860b; }
+.legend .swatch-low { background: #0a6b0a; }
+.legend .swatch-none { background: var(--border); }
+
+/* Debt list */
+.debt-list { list-style: none; padding: 0; margin: 0; }
+
+.debt-list li {
+  border-bottom: 1px solid var(--border);
+  padding: 0.6rem 0;
+  cursor: pointer;
+}
+
+.debt-list li:last-child { border-bottom: none; }
+.debt-list li:hover { background: var(--bg); }
+.debt-list .title { font-weight: bold; margin-bottom: 0.2rem; }
+.debt-list .meta { font-size: 12px; color: var(--text-muted); display: block; margin-top: 0.2rem; }
+.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-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: 13px; }
+
+/* Badges */
+.badge { display: inline-block; padding: 0.15em 0.4em; font-size: 11px; font-weight: bold; }
+.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-none { background: var(--border); color: var(--text-muted); }
+.badge-llm { background: var(--link); color: #fff; }
+
+/* Detail modal */
+#detail {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  padding: 1rem;
+}
+
+#detail.show { display: flex; }
+
+#detail .panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  max-width: 520px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 1.25rem;
+  -webkit-overflow-scrolling: touch;
+}
+
+#detail .panel h3 { margin: 0 0 0.35rem; font-size: 1rem; }
+#detail .panel .file { font-family: ui-monospace, monospace; font-size: 13px; color: var(--link); }
+#detail .panel .close-hint { margin-top: 0.75rem; font-size: 12px; color: var(--text-muted); }
+
+#detail .panel .explanation,
+#detail .panel .detail-explanation {
+  margin-top: 0.75rem;
+  line-height: 1.5;
+  color: var(--text-muted);
+  font-size: 13px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+#detail .panel .detail-explanation.has-llm-output { white-space: normal; }
+#detail .panel .detail-explanation .llm-output { margin-top: 0.25rem; }
+#detail .panel .detail-explanation .detail-severities { margin-bottom: 0.5rem; }
+#detail .panel .detail-explanation .detail-sev { margin-right: 1rem; }
+#detail .panel .detail-explanation .detail-llm-label { margin-top: 0.5rem; margin-bottom: 0.25rem; }
+#detail .panel .detail-explanation .detail-no-llm { font-style: italic; color: var(--text-muted); }
+#detail .panel .detail-explanation .detail-static-desc { margin-top: 0.5rem; font-size: 12px; color: var(--text-muted); }
+
+#detail .panel .file-assessment {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border);
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+#detail .panel .file-assessment strong { color: var(--text); font-size: 12px; }
+#detail .panel .suggested-code { margin-top: 0.75rem; }
+
+/* Code blocks - shared */
+.code-block {
+  margin: 0.5rem 0;
+  padding: 0.75rem 1rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 13px;
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: 20em;
+}
+
+.code-block .lang-label {
+  display: block;
+  font-size: 11px;
+  font-family: system-ui, sans-serif;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.code-block pre { margin: 0; white-space: pre; overflow-x: auto; min-width: min-content; }
+.code-block code {
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text);
+  display: block;
+}
+
+#detail .panel .code-block {
+  max-height: 16em;
+}
+
+#detail .panel .suggested-code .code-block { margin: 0.35rem 0 0; background: var(--surface); }
+#detail .panel .file-assessment .code-block { margin: 0.5rem 0 0; background: var(--surface); }
+
+/* LLM sections */
+.llm-overall { border-left: 3px solid var(--link); padding-left: 0.5rem; margin-left: -0.5rem; }
+.llm-overall h2 { color: var(--text); font-size: 1rem; }
+.llm-overall .llm-overall-text { margin: 0; color: var(--text); line-height: 1.5; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
+
+.llm-output .llm-prose { margin: 0 0 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+.llm-output .llm-prose:last-child { margin-bottom: 0; }
+
+.llm-next-steps h2 { color: var(--text); font-size: 1rem; }
+.llm-next-steps ul { margin: 0; padding-left: 1.25rem; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+
+/* Priority matrix */
+.priority-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
+.priority-matrix .quadrant { padding: 0.75rem; border: 1px solid var(--border); }
+.priority-matrix .quadrant h4 { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: bold; }
+.priority-matrix .quadrant p { margin: 0; font-size: 13px; color: var(--text-muted); }