npm - ai-localize-reporting - Versions diffs - 2.0.0 → 2.0.3 - Mend

ai-localize-reporting 2.0.0 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +47 -0
package/dist/index.d.mts +6 -0
package/dist/index.d.ts +6 -0
package/dist/index.js +1983 -83
package/dist/index.mjs +1983 -83
package/package.json +2 -2
package/preview/fix-exports.js +147 -0
package/preview/fix-preview-exports.js +166 -0
package/preview/generate-preview.ts +105 -0
package/preview/make-preview.cjs +564 -0
package/preview/make-preview.mjs +398 -0
package/preview/report-preview.html +831 -0
package/src/cli-reporter.ts +597 -25
package/src/html-reporter.ts +1674 -58
package/tsconfig.json +6 -1

package/src/html-reporter.ts CHANGED Viewed

@@ -3,72 +3,1688 @@ import * as fs from "fs";
 import * as path from "path";
 import { ensureDir } from "ai-localize-shared";
+/**
+ * Generates a comprehensive, self-contained HTML analytics dashboard report.
+ *
+ * @param report     - The report data object built by `buildReport()`
+ * @param outputPath - Full path to the output HTML file
+ */
 export function generateHtmlReport(report: Report, outputPath: string): void {
   ensureDir(path.dirname(outputPath));
-  const html = `<!DOCTYPE html>
-<html lang="en">
+  const html = buildHtml(report);
+  fs.writeFileSync(outputPath, html, "utf-8");
+}
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function esc(s: string): string {
+  return s
+    .replace(/&/g, "&")
+    .replace(/</g, "<")
+    .replace(/>/g, ">")
+    .replace(/"/g, "&#34;")
+    .replace(/'/g, "'");
+}
+function escJs(s: string): string {
+  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "");
+}
+type BadgeVariant = "blue" | "red" | "green" | "orange" | "grey" | "purple" | "yellow" | "teal";
+function badge(text: string, variant: BadgeVariant = "blue"): string {
+  return `<span class="badge badge-${variant}">${esc(text)}</span>`;
+}
+function severityBadge(count: number, warn = false): string {
+  if (count === 0) return badge("0", "green");
+  return badge(String(count), warn ? "orange" : "red");
+}
+// ─── AI Insights Computation ──────────────────────────────────────────────────
+interface DuplicateGroup {
+  text: string;
+  count: number;
+  keys: string[];
+  files: string[];
+}
+interface InsightResult {
+  duplicates: DuplicateGroup[];
+  inconsistencies: Array<{ key: string; languages: string[]; hint: string }>;
+  namespaceHints: Array<{ namespace: string; count: number; suggestion: string }>;
+  coveragePct: number;
+  totalKeys: number;
+  duplicateKeyCount: number;
+}
+function computeInsights(report: Report): InsightResult {
+  const { details } = report;
+  // ── Duplicate text detection (same text → multiple keys)
+  const textMap = new Map<string, { keys: Set<string>; files: Set<string> }>();
+  for (const dt of details.detectedTexts) {
+    const t = dt.text.trim();
+    if (!textMap.has(t)) textMap.set(t, { keys: new Set(), files: new Set() });
+    textMap.get(t)!.keys.add(dt.suggestedKey);
+    textMap.get(t)!.files.add(dt.filePath);
+  }
+  const duplicates: DuplicateGroup[] = [];
+  for (const [text, { keys, files }] of textMap) {
+    if (keys.size > 1) {
+      duplicates.push({ text, count: keys.size, keys: [...keys], files: [...files] });
+    }
+  }
+  duplicates.sort((a, b) => b.count - a.count);
+  // ── Duplicate key detection (same key → multiple different texts)
+  const keyTextMap = new Map<string, Set<string>>();
+for (const dt of details.detectedTexts) {
+    if (!keyTextMap.has(dt.suggestedKey)) keyTextMap.set(dt.suggestedKey, new Set());
+    keyTextMap.get(dt.suggestedKey)!.add(dt.text.trim());
+  }
+  let duplicateKeyCount = 0;
+  for (const [, texts] of keyTextMap) {
+    if (texts.size > 1) duplicateKeyCount++;
+  }
+  // ── Translation inconsistencies (missing keys grouped by language)
+  const byLang = new Map<string, string[]>();
+  for (const mk of details.missingKeys) {
+    if (mk.language) {
+      if (!byLang.has(mk.language)) byLang.set(mk.language, []);
+      byLang.get(mk.language)!.push(mk.key);
+    }
+  }
+  const inconsistencies = [...byLang.entries()].map(([lang, keys]) => ({
+    key: keys[0],
+    languages: [lang],
+    hint: `${keys.length} key${keys.length > 1 ? "s" : ""} missing in "${lang}"`,
+  }));
+  // ── Namespace cleanup hints
+  const nsCounts = new Map<string, number>();
+  for (const dt of details.detectedTexts) {
+    const ns = dt.suggestedKey.split(".")[0] || "default";
+    nsCounts.set(ns, (nsCounts.get(ns) || 0) + 1);
+  }
+  const namespaceHints: InsightResult["namespaceHints"] = [];
+  for (const [ns, count] of nsCounts) {
+    if (count < 3) {
+      namespaceHints.push({ namespace: ns, count, suggestion: `Namespace "${ns}" has only ${count} key(s) — consider merging into a broader namespace.` });
+    }
+  }
+  // ── Coverage
+  const totalKeys = new Set(details.detectedTexts.map((d) => d.suggestedKey)).size;
+  const missing = details.missingKeys.length;
+  const coveragePct = totalKeys > 0 ? Math.round(((totalKeys - missing) / totalKeys) * 100) : 100;
+  return { duplicates, inconsistencies, namespaceHints, coveragePct, totalKeys, duplicateKeyCount };
+}
+// ─── Section builders ────────────────────────────────────────────────────────
+function buildNavItem(id: string, icon: string, label: string, count: number | string, alert = false): string {
+  return `<a href="#${id}" class="nav-item${alert ? " nav-alert" : ""}" data-section="${id}">
+    <span class="nav-icon">${icon}</span>
+    <span class="nav-label">${esc(label)}</span>
+ <span class="nav-count">${count}</span>
+  </a>`;
+}
+function buildStatCard(value: number | string, label: string, hint: string, status: "ok" | "warn" | "err" | "neutral" | "info", icon: string): string {
+  return `<div class="stat-card stat-${status}">
+    <div class="stat-icon">${icon}</div>
+    <div class="stat-value">${value}</div>
+    <div class="stat-label">${esc(label)}</div>
+    <div class="stat-hint">${esc(hint)}</div>
+  </div>`;
+}
+function buildAccordion(id: string, title: string, subtitle: string, content: string, open = false, severity: "ok" | "warn" | "err" | "info" = "info"): string {
+  return `<div class="accordion${open ? " accordion-open" : ""}" id="acc-${id}">
+    <button class="accordion-trigger" aria-expanded="${open}" aria-controls="panel-${id}" onclick="toggleAccordion('${id}')">
+      <span class="accordion-icon severity-${severity}">&#9679;</span>
+      <span class="accordion-title">${title}</span>
+<span class="accordion-subtitle">${subtitle}</span>
+      <span class="accordion-chevron">&#8964;</span>
+    </button>
+    <div class="accordion-panel" id="panel-${id}" role="region" ${open ? "" : 'hidden'}>
+      <div class="accordion-body">${content}</div>
+  </div>
+  </div>`;
+}
+// ─── Chart builder (pure SVG, no external deps) ──────────────────────────────
+function buildCoverageDonut(pct: number): string {
+  const r = 52;
+  const circumference = 2 * Math.PI * r;
+  const dash = (pct / 100) * circumference;
+  const color = pct >= 80 ? "#22c55e" : pct >= 50 ? "#f59e0b" : "#ef4444";
+  return `<svg class="donut-chart" viewBox="0 0 120 120" aria-label="Coverage ${pct}%">
+    <circle cx="60" cy="60" r="${r}" fill="none" stroke="var(--border)" stroke-width="12"/>
+    <circle cx="60" cy="60" r="${r}" fill="none" stroke="${color}" stroke-width="12"
+      stroke-dasharray="${dash.toFixed(2)} ${circumference.toFixed(2)}"
+      stroke-dashoffset="${(circumference / 4).toFixed(2)}"
+    stroke-linecap="round" transform="rotate(-90 60 60)"/>
+    <text x="60" y="56" text-anchor="middle" font-size="20" font-weight="700" fill="${color}">${pct}%</text>
+ <text x="60" y="72" text-anchor="middle" font-size="10" fill="var(--text-muted)">coverage</text>
+  </svg>`;
+}
+function buildBarChart(data: Array<{ label: string; value: number; color?: string }>): string {
+  if (data.length === 0) return '<p class="empty-state">No data available.</p>';
+  const max = Math.max(...data.map((d) => d.value), 1);
+  const bars = data.map((d) => {
+    const pct = Math.round((d.value / max) * 100);
+    const color = d.color || "var(--accent)";
+    return `<div class="bar-row">
+      <span class="bar-label">${esc(d.label)}</span>
+   <div class="bar-track"><div class="bar-fill" style="width:${pct}%;background:${color}"></div></div>
+      <span class="bar-value">${d.value}</span>
+    </div>`;
+  }).join("");
+  return `<div class="bar-chart">${bars}</div>`;
+}
+// ─── Table builder with search/sort/filter/pagination ───────────────────────
+function buildSearchableTable(
+  tableId: string,
+  columns: Array<{ key: string; label: string; sortable?: boolean; width?: string }>,
+  rows: string[][],
+  pageSize = 50
+): string {
+  const thead = columns.map((c) =>
+    `<th data-col="${c.key}" ${c.sortable !== false ? `onclick="sortTable('${tableId}', '${c.key}')" class="sortable"` : ""} ${c.width ? `style="width:${c.width}"` : ""}>${c.label}${c.sortable !== false ? ' <span class="sort-icon">&#8597;</span>' : ""}</th>`
+  ).join("");
+  const tbody = rows.map((cells, _ri) =>
+    `<tr>${cells.map((cell, ci) => `<td data-col="${columns[ci]?.key || ci}">${cell}</td>`).join("")}</tr>`
+  ).join("\n");
+  return `<div class="table-wrapper" id="${tableId}-wrapper">
+    <div class="table-controls">
+      <div class="search-box">
+        <span class="search-icon">&#128269;</span>
+        <input type="text" class="table-search" placeholder="Search…" oninput="filterTable('${tableId}', this.value)" aria-label="Search table"/>
+      </div>
+    <div class="table-meta" id="${tableId}-meta"></div>
+      <div class="table-actions">
+     <button class="btn btn-sm" onclick="exportTableCsv('${tableId}')">&#8659; CSV</button>
+        <button class="btn btn-sm" onclick="exportTableJson('${tableId}')">&#8659; JSON</button>
+      </div>
+    </div>
+    <div class="table-scroll">
+      <table id="${tableId}" data-page-size="${pageSize}" data-page="1">
+        <thead><tr>${thead}</tr></thead>
+        <tbody>${tbody}</tbody>
+      </table>
+    </div>
+    <div class="table-pagination" id="${tableId}-pagination"></div>
+  </div>`;
+}
+// ─── Main HTML builder ───────────────────────────────────────────────────────
+function buildHtml(report: Report): string {
+const { timestamp, framework, duration, filesScanned, hardcodedTexts,
+    localeKeysGenerated, unusedKeys, missingTranslations, assets, details } = report;
+  const scanDate = new Date(timestamp).toLocaleString();
+  const insights = computeInsights(report);
+  // ── Coverage ring ──────────────────────────────────────────────────────────
+  const coverageDonut = buildCoverageDonut(insights.coveragePct);
+  // ── Namespace distribution chart ───────────────────────────────────────────
+  const nsCounts = new Map<string, number>();
+  for (const dt of details.detectedTexts) {
+  const ns = dt.suggestedKey.split(".")[0] || "default";
+    nsCounts.set(ns, (nsCounts.get(ns) || 0) + 1);
+  }
+  const nsChartData = [...nsCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10)
+    .map(([label, value]) => ({ label, value }));
+  const nsChart = buildBarChart(nsChartData);
+  // ── Context distribution ───────────────────────────────────────────────────
+  const ctxCounts = new Map<string, number>();
+  for (const dt of details.detectedTexts) {
+    ctxCounts.set(dt.context, (ctxCounts.get(dt.context) || 0) + 1);
+  }
+  const ctxChartData = [...ctxCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([label, value]) => ({ label, value }));
+const ctxChart = buildBarChart(ctxChartData);
+  // ── Summary cards ──────────────────────────────────────────────────────────
+  const summaryCards = `<div class="stats-grid">
+    ${buildStatCard(filesScanned, "Files Scanned", "Source files processed by AST scanner", "neutral", "&#128196;")}
+    ${buildStatCard(hardcodedTexts, "Hardcoded Texts", "Raw strings not yet in t()", hardcodedTexts > 0 ? "warn" : "ok", "&#128269;")}
+    ${buildStatCard(insights.totalKeys, "Unique Keys", "Deduplicated locale keys generated", "info", "&#128273;")}
+    ${buildStatCard(missingTranslations, "Missing Translations", "Keys absent in target languages", missingTranslations > 0 ? "err" : "ok", "&#10060;")}
+    ${buildStatCard(unusedKeys, "Unused Keys", "Keys in locale files not used in code", unusedKeys > 0 ? "warn" : "ok", "&#128465;")}
+    ${buildStatCard(insights.duplicateKeyCount, "Duplicate Keys", "Same key maps to different texts", insights.duplicateKeyCount > 0 ? "warn" : "ok", "&#128258;")}
+    ${buildStatCard(insights.coveragePct + "%", "Translation Coverage", "% of keys present in all languages", insights.coveragePct < 80 ? "err" : insights.coveragePct < 100 ? "warn" : "ok", "&#127919;")}
+    ${buildStatCard(assets.totalAssets, "Assets Found", "Static asset references in source", "neutral", "&#128230;")}
+    ${buildStatCard(assets.legacyCdnUrls, "Legacy CDN URLs", "Old CDN references not yet replaced", assets.legacyCdnUrls > 0 ? "warn" : "ok", "&#128279;")}
+  </div>`;
+  // ── Hardcoded texts section ────────────────────────────────────────────────
+  const hardcodedRows = details.detectedTexts.slice(0, 500).map((t) => [
+    `<code class="path-code">${esc(t.filePath.split("/").slice(-3).join("/"))}</code>`,
+    `<span class="line-num">${t.line}</span>`,
+    `<span class="text-preview">${esc(t.text.slice(0, 80))}${t.text.length > 80 ? "…" : ""}</span>`,
+    `<code class="key-code">${esc(t.suggestedKey)}</code>`,
+    badge(t.context, "blue"),
+    badge(t.nodeType, "grey"),
+  ]);
+  const hardcodedOverflowMsg = details.detectedTexts.length > 500
+    ? `<div class="overflow-notice">Showing 500 of ${details.detectedTexts.length} entries. Export to CSV/JSON for full list.</div>`
+    : "";
+  const hardcodedTable = details.detectedTexts.length > 0
+    ? buildSearchableTable("tbl-hardcoded", [
+        { key: "file", label: "File" },
+      { key: "line", label: "Line", width: "60px" },
+      { key: "text", label: "Text" },
+        { key: "key", label: "Suggested Key" },
+        { key: "context", label: "Context", width: "120px" },
+        { key: "node", label: "Node Type", width: "120px" },
+      ], hardcodedRows) + hardcodedOverflowMsg
+    : '<div class="empty-state-card">&#9989; No hardcoded texts detected. All strings are wrapped in translation calls.</div>';
+  const hardcodedContent = `
+    <div class="insight-legend">
+      Raw text strings found in source that are <strong>not yet wrapped</strong> in a translation call.
+      Run <code>ai-localize extract</code> to generate locale files and
+      <code>ai-localize full-migrate</code> to wrap them automatically.
+    </div>
+    ${hardcodedTable}`;
+  // ── Missing translations section ───────────────────────────────────────────
+  // Group by language
+  const missingByLang = new Map<string, typeof details.missingKeys>();
+  for (const mk of details.missingKeys) {
+    const lang = mk.language || "unknown";
+    if (!missingByLang.has(lang)) missingByLang.set(lang, []);
+    missingByLang.get(lang)!.push(mk);
+  }
+  let missingContent = "";
+  if (details.missingKeys.length === 0) {
+    missingContent = '<div class="empty-state-card">&#9989; All keys present in the default language exist in every target language file.</div>';
+  } else {
+    const missingTableRows = details.missingKeys.map((e) => [
+   `<code class="key-code">${esc(e.key)}</code>`,
+  e.language ? badge(e.language, "red") : "—",
+    e.filePath ? `<code class="path-code">${esc(e.filePath)}</code>` : "—",
+      `<span class="detail-text">${esc(e.message)}</span>`,
+    ]);
+    const langChips = [...missingByLang.entries()]
+      .map(([lang, keys]) => `<span class="chip chip-red" onclick="filterTable('tbl-missing', '${escJs(lang)}')">${esc(lang)} <strong>${keys.length}</strong></span>`)
+      .join(" ");
+    missingContent = `
+      <div class="insight-legend">
+        These locale keys exist in the <strong>default language</strong> but are <strong>absent</strong> in one or more target language files.
+        Ask your translators to fill in these entries. Running <code>ai-localize extract</code> seeds all target files with the source value.
+      </div>
+      <div class="chip-row">Filter by language: ${langChips}</div>
+      ${buildSearchableTable("tbl-missing", [
+        { key: "key", label: "Key" },
+        { key: "language", label: "Language", width: "100px" },
+        { key: "file", label: "Locale File" },
+      { key: "message", label: "Details" },
+      ], missingTableRows)}`;
+  }
+  // ── Unused keys section ────────────────────────────────────────────────────
+  const unusedContent = details.unusedKeysList.length === 0
+    ? '<div class="empty-state-card">&#9989; No unused translation keys detected. Your locale files are clean.</div>'
+    : `<div class="insight-legend">
+    Translation keys that exist in locale JSON files but are <strong>not referenced</strong> anywhere in scanned source code.
+They are likely left over from removed features. Run <code>ai-localize cleanup</code> to remove them.
+      </div>
+      ${buildSearchableTable("tbl-unused", [
+        { key: "key", label: "Unused Key" },
+      ], details.unusedKeysList.map((k) => [`<code class="key-code">${esc(k)}</code>`]))}`;
+  // ── Assets section ─────────────────────────────────────────────────────────
+  const assetRows = details.assets.map((a) => [
+    `<code class="path-code">${esc(a.localPath.split("/").slice(-3).join("/"))}</code>`,
+    `<code class="key-code">${esc(a.s3Key)}</code>`,
+    `<a href="${esc(a.cloudfrontUrl)}" target="_blank" rel="noopener" class="cdn-link">${esc(a.cloudfrontUrl.slice(0, 60))}${a.cloudfrontUrl.length > 60 ? "…" : ""}</a>`,
+    `<span class="file-size">${(a.size / 1024).toFixed(1)} KB</span>`,
+    badge(a.contentType, "grey"),
+  ]);
+  const assetsContent = `
+    <div class="asset-summary-row">
+    ${buildStatCard(assets.totalAssets, "Total Assets", "All static asset references", "neutral", "&#128190;")}
+      ${buildStatCard(assets.uploadedAssets, "Uploaded", "Pushed to S3/CloudFront this run", "ok", "&#9989;")}
+      ${buildStatCard(assets.replacedUrls, "URLs Replaced", "Legacy CDN refs rewritten", "ok", "&#128257;")}
+   ${buildStatCard(assets.legacyCdnUrls, "Legacy URLs", "Old CDN refs still pending", assets.legacyCdnUrls > 0 ? "warn" : "ok", "&#9888;")}
+    </div>
+    ${details.assets.length > 0
+      ? buildSearchableTable("tbl-assets", [
+          { key: "path", label: "Local Path" },
+      { key: "s3key", label: "S3 Key" },
+    { key: "url", label: "CloudFront URL" },
+          { key: "size", label: "Size", width: "80px" },
+          { key: "type", label: "Content Type", width: "140px" },
+        ], assetRows)
+   : '<div class="empty-state-card">No assets uploaded in this run. Use <code>ai-localize upload-assets</code>.</div>'
+    }`;
+  // ── AI Insights section ────────────────────────────────────────────────────
+  let insightsContent = "";
+  // Duplicate texts
+  const dupTextContent = insights.duplicates.length === 0
+    ? '<div class="insight-item insight-ok">&#9989; No duplicate texts detected — each string maps to a unique key.</div>'
+    : `<div class="insight-legend">Same text found mapped to multiple different keys. Consider consolidating to reduce translator workload.</div>
+      ${buildSearchableTable("tbl-dup-texts", [
+    { key: "text", label: "Duplicated Text" },
+        { key: "count", label: "Key Count", width: "100px" },
+        { key: "keys", label: "Keys" },
+   { key: "files", label: "Files" },
+      ], insights.duplicates.slice(0, 100).map((d) => [
+        `<span class="text-preview">${esc(d.text.slice(0, 80))}</span>`,
+        severityBadge(d.count, true),
+   `<span class="key-list">${d.keys.map((k) => `<code class="key-code">${esc(k)}</code>`).join(" ")}</span>`,
+        `<span class="muted">${d.files.length} file${d.files.length > 1 ? "s" : ""}</span>`,
+      ]))}`;
+  // Translation inconsistencies
+  const inconsistencyContent = insights.inconsistencies.length === 0
+    ? '<div class="insight-item insight-ok">&#9989; No translation inconsistencies detected.</div>'
+    : `<div class="insight-legend">Languages with the most missing translations — highest-priority for your translators.</div>
+   ${buildBarChart(
+      [...missingByLang.entries()]
+          .sort((a, b) => b[1].length - a[1].length)
+      .map(([lang, keys]) => ({ label: lang, value: keys.length, color: "#ef4444" }))
+      )}`;
+  // Namespace cleanup
+  const nsCleanupContent = insights.namespaceHints.length === 0
+    ? '<div class="insight-item insight-ok">&#9989; All namespaces have healthy key counts.</div>'
+    : `<div class="insight-legend">Namespaces with very few keys that could be merged for cleaner locale files.</div>
+      <ul class="insight-list">
+        ${insights.namespaceHints.map((h) => `<li><span class="insight-ns">${esc(h.namespace)}</span> ${badge(String(h.count) + " keys", "orange")} — ${esc(h.suggestion)}</li>`).join("")}
+      </ul>`;
+  // Unused key details
+  const unusedInsightContent = unusedKeys === 0
+    ? '<div class="insight-item insight-ok">&#9989; No unused keys — your locale bundles are lean.</div>'
+    : `<div class="insight-legend">${unusedKeys} key${unusedKeys > 1 ? "s" : ""} in locale files with no source code references. Run <code>ai-localize cleanup</code> to remove them.</div>
+${buildBarChart(
+     details.unusedKeysList.slice(0, 10).map((k) => ({
+          label: k.length > 40 ? k.slice(0, 40) + "…" : k,
+          value: 1,
+     color: "#f59e0b",
+        }))
+      )}`;
+  insightsContent = `
+    <div class="insights-grid">
+      <div class="insight-card">
+   <h3 class="insight-heading">&#128258; Duplicate Text Detection</h3>
+        <p class="insight-count">${insights.duplicates.length} duplicate text group${insights.duplicates.length !== 1 ? "s" : ""} found</p>
+        ${dupTextContent}
+      </div>
+      <div class="insight-card">
+        <h3 class="insight-heading">&#127757; Translation Inconsistencies</h3>
+      <p class="insight-count">${missingTranslations} missing translation${missingTranslations !== 1 ? "s" : ""} across all languages</p>
+        ${inconsistencyContent}
+      </div>
+   <div class="insight-card">
+        <h3 class="insight-heading">&#128465; Unused Key Analysis</h3>
+     <p class="insight-count">${unusedKeys} unused key${unusedKeys !== 1 ? "s" : ""} detected</p>
+        ${unusedInsightContent}
+      </div>
+      <div class="insight-card">
+  <h3 class="insight-heading">&#127800; Namespace Cleanup Suggestions</h3>
+        <p class="insight-count">${insights.namespaceHints.length} namespace${insights.namespaceHints.length !== 1 ? "s" : ""} could be consolidated</p>
+        ${nsCleanupContent}
+      </div>
+    </div>`;
+  // ── Diff explainer ─────────────────────────────────────────────────────────
+  const diff = Math.abs(hardcodedTexts - localeKeysGenerated);
+  const diffExplainer = hardcodedTexts !== localeKeysGenerated
+    ? `<div class="info-banner info-banner-blue">
+ <strong>&#8505; Why do Hardcoded Texts (${hardcodedTexts}) and Keys Generated (${localeKeysGenerated}) differ?</strong>
+<ul>
+      <li><strong>Hardcoded Texts</strong> = total raw string occurrences across all files (same string in 5 files = 5).</li>
+  <li><strong>Keys Generated</strong> = unique locale keys after deduplication. Identical strings share one key.</li>
+   <li>The difference (${diff}) = duplicate strings consolidated into shared keys.</li>
+        </ul>
+      </div>`
+    : `<div class="info-banner info-banner-green">
+        <strong>&#9989; Hardcoded Texts and Keys Generated match (${hardcodedTexts}).</strong>
+        Every detected string maps to a unique locale key.
+      </div>`;
+  // ── Charts overview ────────────────────────────────────────────────────────
+  const chartsSection = `<div class="charts-grid">
+    <div class="chart-card">
+      <h3 class="chart-title">&#127919; Translation Coverage</h3>
+      <div class="chart-body chart-donut-wrap">${coverageDonut}</div>
+      <p class="chart-caption">${insights.coveragePct}% of keys covered across all languages</p>
+    </div>
+    <div class="chart-card">
+      <h3 class="chart-title">&#128230; Keys by Namespace (Top 10)</h3>
+      <div class="chart-body">${nsChart}</div>
+    </div>
+    <div class="chart-card">
+    <h3 class="chart-title">&#127991; Texts by Context</h3>
+      <div class="chart-body">${ctxChart}</div>
+    </div>
+  </div>`;
+  // ── Navigation ─────────────────────────────────────────────────────────────
+  const nav = `<nav class="sidebar" id="sidebar" role="navigation" aria-label="Dashboard navigation">
+    <div class="sidebar-header">
+      <span class="sidebar-logo">&#127760;</span>
+      <span class="sidebar-brand">ai-localize</span>
+      <button class="sidebar-toggle" onclick="toggleSidebar()" aria-label="Toggle sidebar">&#9776;</button>
+    </div>
+    <div class="sidebar-meta">
+      <div class="sidebar-framework">${badge(framework, "blue")}</div>
+      <div class="sidebar-date">${scanDate}</div>
+    </div>
+    <div class="nav-group">
+      <div class="nav-group-label">Overview</div>
+      ${buildNavItem("overview", "&#128202;", "Summary", "")}
+   ${buildNavItem("charts", "&#128200;", "Charts", "")}
+    </div>
+    <div class="nav-group">
+      <div class="nav-group-label">Analysis</div>
+      ${buildNavItem("hardcoded", "&#128269;", "Hardcoded Texts", hardcodedTexts, hardcodedTexts > 0)}
+   ${buildNavItem("missing", "&#10060;", "Missing Translations", missingTranslations, missingTranslations > 0)}
+      ${buildNavItem("unused", "&#128465;", "Unused Keys", unusedKeys, unusedKeys > 0)}
+      ${buildNavItem("assets", "&#128230;", "Assets", assets.totalAssets)}
+    </div>
+    <div class="nav-group">
+      <div class="nav-group-label">AI Insights</div>
+      ${buildNavItem("insights", "&#129504;", "AI Insights", insights.duplicates.length + insights.namespaceHints.length, insights.duplicates.length > 0)}
+  </div>
+    <div class="nav-group">
+      <div class="nav-group-label">Export</div>
+      <button class="nav-item nav-btn" onclick="exportFullJson()">&#8659; Export JSON</button>
+      <button class="nav-item nav-btn" onclick="exportFullCsv()">&#8659; Export CSV</button>
+      <button class="nav-item nav-btn" onclick="window.print()">&#128424; Print / PDF</button>
+  </div>
+  </nav>`;
+  // ── Theme toggle ───────────────────────────────────────────────────────────
+  const themeToggle = `<button class="theme-toggle" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark/light mode" title="Toggle theme">
+    <span id="theme-icon">&#9790;</span>
+  </button>`;
+  // ── Full document ──────────────────────────────────────────────────────────
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="light">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>ai-localize Report - ${report.timestamp}</title>
-<style>
-  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 1200px; margin: 0 auto; padding: 24px; background: #f5f5f5; }
-  h1 { color: #1a1a2e; } h2 { color: #16213e; border-bottom: 2px solid #0f3460; padding-bottom: 8px; }
-  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
-  .stat-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; }
-  .stat-number { font-size: 2.5rem; font-weight: 700; color: #0f3460; }
-  .stat-label { color: #666; font-size: 0.9rem; margin-top: 4px; }
-  .error { color: #e53e3e; } .warning { color: #d69e2e; } .success { color: #38a169; }
-  table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
-  th { background: #0f3460; color: white; padding: 12px 16px; text-align: left; }
-  td { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
-tr:hover td { background: #f8f9ff; }
-  .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
-  .badge-blue { background: #ebf4ff; color: #2b6cb0; }
-  .badge-red { background: #fff5f5; color: #c53030; }
-  .badge-green { background: #f0fff4; color: #276749; }
-</style>
+<title>ai-localize Dashboard &mdash; ${esc(scanDate)}</title>
+<style>${CSS}</style>
 </head>
 <body>
-<h1>🌐 ai-localize Report</h1>
-<p><strong>Generated:</strong> ${report.timestamp} | <strong>Framework:</strong> ${report.framework} | <strong>Duration:</strong> ${report.duration}ms</p>
-<div class="stats">
-  <div class="stat-card"><div class="stat-number">${report.filesScanned}</div><div class="stat-label">Files Scanned</div></div>
-  <div class="stat-card"><div class="stat-number error">${report.hardcodedTexts}</div><div class="stat-label">Hardcoded Texts</div></div>
-  <div class="stat-card"><div class="stat-number success">${report.localeKeysGenerated}</div><div class="stat-label">Keys Generated</div></div>
-  <div class="stat-card"><div class="stat-number warning">${report.unusedKeys}</div><div class="stat-label">Unused Keys</div></div>
-  <div class="stat-card"><div class="stat-number error">${report.missingTranslations}</div><div class="stat-label">Missing Translations</div></div>
-  <div class="stat-card"><div class="stat-number">${report.assets.uploadedAssets}</div><div class="stat-label">Assets Uploaded</div></div>
-</div>
-${report.details.detectedTexts.length > 0 ? `
-<h2>Hardcoded Texts (${report.details.detectedTexts.length})</h2>
-<table>
-<thead><tr><th>File</th><th>Line</th><th>Text</th><th>Suggested Key</th><th>Context</th></tr></thead>
-  <tbody>
-    ${report.details.detectedTexts.slice(0, 100).map((t) => `
-    <tr>
-      <td><code>${t.filePath.split("/").slice(-3).join("/")}</code></td>
-    <td>${t.line}</td>
-      <td>${t.text.slice(0, 60)}${t.text.length > 60 ? "..." : ""}</td>
-      <td><span class="badge badge-blue">${t.suggestedKey}</span></td>
-      <td><span class="badge badge-green">${t.context}</span></td>
-    </tr>`).join("")}
-    ${report.details.detectedTexts.length > 100 ? `<tr><td colspan="5" style="text-align:center;color:#666">...and ${report.details.detectedTexts.length - 100} more</td></tr>` : ""}
-  </tbody>
-</table>` : ""}
-${report.details.missingKeys.length > 0 ? `
-<h2>Missing Translations (${report.details.missingKeys.length})</h2>
-<table>
-  <thead><tr><th>Key</th><th>Language</th><th>Message</th></tr></thead>
-  <tbody>
-    ${report.details.missingKeys.map((e) => `<tr><td><code>${e.key}</code></td><td><span class="badge badge-red">${e.language || ""}</span></td><td>${e.message}</td></tr>`).join("")}
-  </tbody>
-</table>` : ""}
+${themeToggle}
+${nav}
+<main class="main" id="main">
+  <header class="page-header">
+    <div class="page-header-left">
+      <h1 class="page-title">&#127760; Localization Analytics Dashboard</h1>
+      <div class="page-meta">
+<span class="meta-chip">${badge(framework, "blue")}</span>
+        <span class="meta-item">&#128197; ${scanDate}</span>
+        <span class="meta-item">&#9201; ${duration}ms</span>
+        <span class="meta-item">&#128196; ${filesScanned} files</span>
+      </div>
+    </div>
+    <div class="page-header-right">
+      <button class="btn btn-primary" onclick="expandAll()">Expand All</button>
+      <button class="btn" onclick="collapseAll()">Collapse All</button>
+    </div>
+  </header>
+  <!-- Summary -->
+  <section id="overview" class="section">
+    <div class="section-title-row">
+    <h2 class="section-title">&#128202; Summary</h2>
+    </div>
+    ${summaryCards}
+    ${diffExplainer}
+</section>
+  <!-- Charts -->
+  <section id="charts" class="section">
+    <div class="section-title-row">
+      <h2 class="section-title">&#128200; Analytics</h2>
+    </div>
+    ${chartsSection}
+  </section>
+  <!-- Hardcoded Texts -->
+  <section id="hardcoded" class="section">
+    <div class="section-title-row">
+      <h2 class="section-title">&#128269; Hardcoded Texts <span class="section-count ${hardcodedTexts > 0 ? "count-warn" : "count-ok"}">${hardcodedTexts}</span></h2>
+    </div>
+    ${buildAccordion("hardcoded-main",
+      hardcodedTexts > 0 ? "&#9888; " + hardcodedTexts + " hardcoded string" + (hardcodedTexts > 1 ? "s" : "") + " detected" : "&#9989; No hardcoded texts",
+      hardcodedTexts > 0 ? "Strings not yet wrapped in translation calls" : "All strings are properly localized",
+      hardcodedContent,
+      hardcodedTexts > 0,
+      hardcodedTexts > 0 ? "warn" : "ok"
+    )}
+  </section>
+  <!-- Missing Translations -->
+  <section id="missing" class="section">
+    <div class="section-title-row">
+      <h2 class="section-title">&#10060; Missing Translations <span class="section-count ${missingTranslations > 0 ? "count-err" : "count-ok"}">${missingTranslations}</span></h2>
+    </div>
+    ${buildAccordion("missing-main",
+      missingTranslations > 0 ? "&#10060; " + missingTranslations + " missing translation" + (missingTranslations > 1 ? "s" : "") + " found" : "&#9989; All translations present",
+ missingTranslations > 0 ? "Keys absent in one or more target language files" : "Every key is covered in all language files",
+      missingContent,
+      missingTranslations > 0,
+      missingTranslations > 0 ? "err" : "ok"
+    )}
+  </section>
+  <!-- Unused Keys -->
+  <section id="unused" class="section">
+    <div class="section-title-row">
+      <h2 class="section-title">&#128465; Unused Keys <span class="section-count ${unusedKeys > 0 ? "count-warn" : "count-ok"}">${unusedKeys}</span></h2>
+    </div>
+    ${buildAccordion("unused-main",
+    unusedKeys > 0 ? "&#9888; " + unusedKeys + " unused key" + (unusedKeys > 1 ? "s" : "") + " found" : "&#9989; No unused keys",
+      unusedKeys > 0 ? "Translation keys not referenced in source code" : "All keys are actively used",
+      unusedContent,
+      false,
+      unusedKeys > 0 ? "warn" : "ok"
+    )}
+  </section>
+  <!-- Assets -->
+  <section id="assets" class="section">
+  <div class="section-title-row">
+      <h2 class="section-title">&#128230; CDN Assets <span class="section-count count-neutral">${assets.totalAssets}</span></h2>
+    </div>
+    ${buildAccordion("assets-main",
+      "&#128230; Assets: " + assets.totalAssets + " found &middot; " + assets.uploadedAssets + " uploaded &middot; " + assets.legacyCdnUrls + " legacy URLs",
+      "S3/CloudFront asset migration status",
+      assetsContent,
+      false,
+  assets.legacyCdnUrls > 0 ? "warn" : "ok"
+    )}
+</section>
+  <!-- AI Insights -->
+  <section id="insights" class="section">
+    <div class="section-title-row">
+      <h2 class="section-title">&#129504; AI Insights <span class="section-count ${insights.duplicates.length > 0 || insights.namespaceHints.length > 0 ? "count-warn" : "count-ok"}">${insights.duplicates.length + insights.namespaceHints.length}</span></h2>
+    </div>
+    <div class="insight-banner">
+      &#129504; <strong>Deterministic analysis</strong> — patterns identified from your actual locale data. No LLM/AI required.
+    </div>
+    ${insightsContent}
+  </section>
+  <footer class="page-footer">
+    Generated by <strong>ai-localize-core</strong> &mdash; deterministic, offline-capable i18n tooling &mdash; ${scanDate}
+  </footer>
+</main>
+<script>${JS(report, insights)}</script>
 </body>
 </html>`;
-  fs.writeFileSync(outputPath, html, "utf-8");
 }
+// ─── JavaScript ───────────────────────────────────────────────────────────────
+function JS(report: Report, insights: InsightResult): string {
+  const reportJson = JSON.stringify({
+    timestamp: report.timestamp,
+    framework: report.framework,
+    filesScanned: report.filesScanned,
+    hardcodedTexts: report.hardcodedTexts,
+    localeKeysGenerated: report.localeKeysGenerated,
+    missingTranslations: report.missingTranslations,
+    unusedKeys: report.unusedKeys,
+    coveragePct: insights.coveragePct,
+    assets: report.assets,
+    details: {
+      detectedTexts: report.details.detectedTexts.map((t) => ({
+        filePath: t.filePath,
+        line: t.line,
+     column: t.column,
+     text: t.text,
+   suggestedKey: t.suggestedKey,
+ context: t.context,
+      nodeType: t.nodeType,
+        alreadyTranslated: t.alreadyTranslated,
+      })),
+    missingKeys: report.details.missingKeys.map((m) => ({
+     key: m.key,
+  language: m.language || '',
+  message: m.message,
+        filePath: m.filePath || '',
+      })),
+      unusedKeys: report.details.unusedKeysList,
+      assets: report.details.assets.map((a) => ({
+   localPath: a.localPath,
+        s3Key: a.s3Key,
+    cloudfrontUrl: a.cloudfrontUrl,
+  contentType: a.contentType,
+        sizeKb: (a.size / 1024).toFixed(1),
+      })),
+    },
+  }).replace(/<\/script>/g, "<\\/script>");
+  return `
+(function() {
+  'use strict';
+  // ── Theme ──────────────────────────────────────────────────────────────────
+  var THEME_KEY = 'ai-localize-theme';
+  function applyTheme(t) {
+    document.documentElement.setAttribute('data-theme', t);
+    var icon = document.getElementById('theme-icon');
+    if (icon) icon.textContent = t === 'dark' ? '\\u2600' : '\\u263E';
+  localStorage.setItem(THEME_KEY, t);
+  }
+  window.toggleTheme = function() {
+    var cur = document.documentElement.getAttribute('data-theme');
+    applyTheme(cur === 'dark' ? 'light' : 'dark');
+  };
+  var saved = localStorage.getItem(THEME_KEY);
+  if (saved) applyTheme(saved);
+  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) applyTheme('dark');
+  // ── Sidebar ────────────────────────────────────────────────────────────────
+  window.toggleSidebar = function() {
+    document.getElementById('sidebar').classList.toggle('sidebar-collapsed');
+    document.getElementById('main').classList.toggle('main-expanded');
+  };
+  // ── Active nav ─────────────────────────────────────────────────────────────
+  var sections = document.querySelectorAll('section[id]');
+  var navItems = document.querySelectorAll('.nav-item[data-section]');
+  function onScroll() {
+var scrollY = window.scrollY + 80;
+    var current = '';
+    sections.forEach(function(s) { if (scrollY >= s.offsetTop) current = s.id; });
+    navItems.forEach(function(a) {
+      a.classList.toggle('nav-active', a.getAttribute('data-section') === current);
+    });
+  }
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
+  // ── Accordion ─────────────────────────────────────────────────────────────
+  window.toggleAccordion = function(id) {
+    var acc = document.getElementById('acc-' + id);
+    var panel = document.getElementById('panel-' + id);
+    var btn = acc.querySelector('.accordion-trigger');
+    var open = acc.classList.toggle('accordion-open');
+    btn.setAttribute('aria-expanded', open);
+    if (open) panel.removeAttribute('hidden'); else panel.setAttribute('hidden', '');
+  };
+  window.expandAll = function() {
+    document.querySelectorAll('.accordion').forEach(function(acc) {
+      var id = acc.id.replace('acc-', '');
+      var panel = document.getElementById('panel-' + id);
+      var btn = acc.querySelector('.accordion-trigger');
+      acc.classList.add('accordion-open');
+      btn.setAttribute('aria-expanded', 'true');
+      if (panel) panel.removeAttribute('hidden');
+    });
+  };
+  window.collapseAll = function() {
+    document.querySelectorAll('.accordion').forEach(function(acc) {
+      var id = acc.id.replace('acc-', '');
+      var panel = document.getElementById('panel-' + id);
+ var btn = acc.querySelector('.accordion-trigger');
+   acc.classList.remove('accordion-open');
+      btn.setAttribute('aria-expanded', 'false');
+      if (panel) panel.setAttribute('hidden', '');
+    });
+  };
+// ── Table: filter ─────────────────────────────────────────────────────────
+  window.filterTable = function(tableId, query) {
+    var tbl = document.getElementById(tableId);
+    if (!tbl) return;
+    var q = query.toLowerCase();
+    var rows = tbl.querySelectorAll('tbody tr');
+    var shown = 0;
+    rows.forEach(function(row) {
+      var match = row.textContent.toLowerCase().indexOf(q) !== -1;
+      row.style.display = match ? '' : 'none';
+      if (match) shown++;
+    });
+    var meta = document.getElementById(tableId + '-meta');
+    if (meta) meta.textContent = shown + ' / ' + rows.length + ' rows';
+    renderPagination(tableId);
+  };
+  // ── Table: sort ───────────────────────────────────────────────────────────
+  var sortState = {};
+  window.sortTable = function(tableId, col) {
+    var tbl = document.getElementById(tableId);
+    if (!tbl) return;
+    var dir = (sortState[tableId] === col + '_asc') ? 'desc' : 'asc';
+    sortState[tableId] = col + '_' + dir;
+    var colIndex = -1;
+    tbl.querySelectorAll('thead th').forEach(function(th, i) {
+      if (th.getAttribute('data-col') === col) colIndex = i;
+    th.querySelector('.sort-icon') && (th.querySelector('.sort-icon').textContent = '\\u21C5');
+    });
+  if (colIndex === -1) return;
+    var th = tbl.querySelector('thead th[data-col="' + col + '"]');
+    if (th) th.querySelector('.sort-icon') && (th.querySelector('.sort-icon').textContent = dir === 'asc' ? '\\u2191' : '\\u2193');
+    var tbody = tbl.querySelector('tbody');
+    var rows = Array.from(tbody.querySelectorAll('tr'));
+    rows.sort(function(a, b) {
+      var av = (a.cells[colIndex] || {}).textContent || '';
+   var bv = (b.cells[colIndex] || {}).textContent || '';
+      var an = parseFloat(av), bn = parseFloat(bv);
+      if (!isNaN(an) && !isNaN(bn)) return dir === 'asc' ? an - bn : bn - an;
+      return dir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
+    });
+    rows.forEach(function(r) { tbody.appendChild(r); });
+renderPagination(tableId);
+  };
+  // ── Table: pagination ────────────────────────────────────────────────────
+  function renderPagination(tableId) {
+    var tbl = document.getElementById(tableId);
+    var pag = document.getElementById(tableId + '-pagination');
+    var meta = document.getElementById(tableId + '-meta');
+    if (!tbl || !pag) return;
+    var pageSize = parseInt(tbl.getAttribute('data-page-size') || '50', 10);
+    var rows = Array.from(tbl.querySelectorAll('tbody tr')).filter(function(r) { return r.style.display !== 'none'; });
+    var total = rows.length;
+    var pages = Math.ceil(total / pageSize);
+    var page = parseInt(tbl.getAttribute('data-page') || '1', 10);
+    if (page > pages) page = 1;
+    tbl.setAttribute('data-page', page);
+    rows.forEach(function(r, i) {
+      r.style.display = (i >= (page - 1) * pageSize && i < page * pageSize) ? '' : 'none';
+    });
+    if (meta) meta.textContent = total + ' row' + (total !== 1 ? 's' : '');
+    pag.innerHTML = '';
+    if (pages <= 1) return;
+    function btn(label, p, active, disabled) {
+      var b = document.createElement('button');
+      b.textContent = label;
+      b.className = 'pag-btn' + (active ? ' pag-active' : '') + (disabled ? ' pag-disabled' : '');
+      b.disabled = disabled;
+      b.onclick = function() { tbl.setAttribute('data-page', p); renderPagination(tableId); };
+      return b;
+    }
+  pag.appendChild(btn('\\u00AB', 1, false, page === 1));
+    pag.appendChild(btn('\\u2039', page - 1, false, page === 1));
+    var start = Math.max(1, page - 2), end = Math.min(pages, page + 2);
+    for (var i = start; i <= end; i++) pag.appendChild(btn(i, i, i === page, false));
+    pag.appendChild(btn('\\u203A', page + 1, false, page === pages));
+    pag.appendChild(btn('\\u00BB', pages, false, page === pages));
+    var info = document.createElement('span');
+    info.className = 'pag-info';
+    info.textContent = 'Page ' + page + ' of ' + pages;
+    pag.appendChild(info);
+  }
+  // Init all tables
+  document.querySelectorAll('table[id]').forEach(function(tbl) {
+    renderPagination(tbl.id);
+    var meta = document.getElementById(tbl.id + '-meta');
+    if (meta) {
+      var total = tbl.querySelectorAll('tbody tr').length;
+      meta.textContent = total + ' row' + (total !== 1 ? 's' : '');
+    }
+  });
+  // ── Export: table CSV ─────────────────────────────────────────────────────
+  window.exportTableCsv = function(tableId) {
+    var tbl = document.getElementById(tableId);
+    if (!tbl) return;
+    var rows = [Array.from(tbl.querySelectorAll('thead th')).map(function(th) { return '"' + th.textContent.replace(/"/g, '""').trim() + '"'; }).join(',')];
+    tbl.querySelectorAll('tbody tr').forEach(function(tr) {
+      rows.push(Array.from(tr.cells).map(function(td) { return '"' + td.textContent.replace(/"/g, '""').trim() + '"'; }).join(','));
+    });
+    downloadFile(tableId + '.csv', rows.join('\\n'), 'text/csv');
+  };
+  // ── Export: table JSON ────────────────────────────────────────────────────
+  window.exportTableJson = function(tableId) {
+    var tbl = document.getElementById(tableId);
+    if (!tbl) return;
+    var headers = Array.from(tbl.querySelectorAll('thead th')).map(function(th) { return th.textContent.trim().replace(/[\\u2191\\u2193\\u21C5]/g, '').trim(); });
+    var data = Array.from(tbl.querySelectorAll('tbody tr')).map(function(tr) {
+      var obj = {};
+    Array.from(tr.cells).forEach(function(td, i) { obj[headers[i] || i] = td.textContent.trim(); });
+      return obj;
+    });
+    downloadFile(tableId + '.json', JSON.stringify(data, null, 2), 'application/json');
+  };
+  // ── Export: full report JSON ───────────────────────────────────────────────
+  window.exportFullJson = function() {
+    var fullReport = ${reportJson};
+    downloadFile('ai-localize-report.json', JSON.stringify(fullReport, null, 2), 'application/json');
+  };
+  // ── Export: full report CSV (summary) ─────────────────────────────────────
+  // ── Export: full report CSV (all sections) ────────────────────────────────
+  window.exportFullCsv = function() {
+    var r = ${reportJson};
+    var q = function(s) { return '"' + String(s == null ? '' : s).replace(/"/g, '""') + '"'; };
+    var rows = [];
+    // Summary
+    rows.push('=== SUMMARY ===');
+    rows.push('"Metric","Value"');
+    rows.push(q('Framework') + ',' + q(r.framework));
+    rows.push(q('Generated') + ',' + q(r.timestamp));
+    rows.push(q('Files Scanned') + ',' + r.filesScanned);
+    rows.push(q('Hardcoded Texts') + ',' + r.hardcodedTexts);
+    rows.push(q('Keys Generated') + ',' + r.localeKeysGenerated);
+    rows.push(q('Missing Translations') + ',' + r.missingTranslations);
+    rows.push(q('Unused Keys') + ',' + r.unusedKeys);
+    rows.push(q('Coverage %') + ',' + r.coveragePct);
+    rows.push(q('Total Assets') + ',' + r.assets.totalAssets);
+  rows.push(q('Uploaded Assets') + ',' + r.assets.uploadedAssets);
+    rows.push(q('Replaced URLs') + ',' + r.assets.replacedUrls);
+    rows.push(q('Legacy CDN URLs') + ',' + r.assets.legacyCdnUrls);
+    rows.push('');
+    // Hardcoded Texts
+    rows.push('=== HARDCODED TEXTS ===');
+    rows.push('"File","Line","Column","Text","Suggested Key","Context","Node Type","Already Translated"');
+    (r.details.detectedTexts || []).forEach(function(t) {
+      rows.push([q(t.filePath), t.line, t.column, q(t.text), q(t.suggestedKey), q(t.context), q(t.nodeType), t.alreadyTranslated ? 'true' : 'false'].join(','));
+    });
+    rows.push('');
+    // Missing Translations
+    rows.push('=== MISSING TRANSLATIONS ===');
+ rows.push('"Key","Language","Locale File","Message"');
+    (r.details.missingKeys || []).forEach(function(m) {
+      rows.push([q(m.key), q(m.language), q(m.filePath), q(m.message)].join(','));
+    });
+    rows.push('');
+    // Unused Keys
+    rows.push('=== UNUSED KEYS ===');
+    rows.push('"Key"');
+    (r.details.unusedKeys || []).forEach(function(k) { rows.push(q(k)); });
+    rows.push('');
+    // CDN Assets
+    rows.push('=== CDN ASSETS ===');
+    rows.push('"Local Path","S3 Key","CloudFront URL","Content Type","Size (KB)"');
+    (r.details.assets || []).forEach(function(a) {
+      rows.push([q(a.localPath), q(a.s3Key), q(a.cloudfrontUrl), q(a.contentType), a.sizeKb].join(','));
+    });
+    downloadFile('ai-localize-full-report.csv', rows.join('\n'), 'text/csv');
+  };
+  function downloadFile(filename, content, mimeType) {
+    var a = document.createElement('a');
+  a.href = URL.createObjectURL(new Blob([content], { type: mimeType }));
+    a.download = filename;
+    a.click();
+    setTimeout(function() { URL.revokeObjectURL(a.href); }, 1000);
+  }
+  // ── Keyboard navigation ───────────────────────────────────────────────────
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      document.querySelectorAll('.table-search').forEach(function(inp) { inp.value = ''; filterTable(inp.closest('.table-wrapper').querySelector('table').id, ''); });
+    }
+ if ((e.metaKey || e.ctrlKey) && e.key === 'd') { e.preventDefault(); window.toggleTheme(); }
+  });
+// ── Smooth scroll for nav ─────────────────────────────────────────────────
+  document.querySelectorAll('a.nav-item[href^="#"]').forEach(function(a) {
+    a.addEventListener('click', function(e) {
+      e.preventDefault();
+      var target = document.querySelector(a.getAttribute('href'));
+      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  });
+})();
+`;
+}
+// ─── CSS ──────────────────────────────────────────────────────────────────────
+const CSS = `
+/* ── Reset & Variables ────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --sidebar-w: 240px;
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --ok: #22c55e;
+  --warn: #f59e0b;
+  --err: #ef4444;
+  --info: #3b82f6;
+  --neutral: #6b7280;
+  --bg: #f8fafc;
+  --bg-surface: #ffffff;
+  --bg-elevated: #f1f5f9;
+  --border: #e2e8f0;
+  --border-subtle: #f1f5f9;
+  --text: #0f172a;
+  --text-muted: #64748b;
+  --text-subtle: #94a3b8;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
+  --radius: 10px;
+  --radius-sm: 6px;
+  --radius-lg: 14px;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
+  --transition: 0.18s ease;
+}
+[data-theme="dark"] {
+  --bg: #0c0e14;
+  --bg-surface: #161b27;
+  --bg-elevated: #1e2535;
+  --border: #2d3748;
+  --border-subtle: #1e2535;
+  --text: #f1f5f9;
+  --text-muted: #94a3b8;
+  --text-subtle: #64748b;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
+  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
+  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
+  --accent: #818cf8;
+  --accent-hover: #a5b4fc;
+}
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  font-size: 14px;
+  display: flex;
+  min-height: 100vh;
+}
+/* ── Sidebar ─────────────────────────────────────────────────────────────── */
+.sidebar {
+  position: fixed;
+  top: 0; left: 0; bottom: 0;
+  width: var(--sidebar-w);
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 100;
+  transition: width var(--transition);
+}
+.sidebar-collapsed { width: 52px; }
+.sidebar-collapsed .sidebar-brand,
+.sidebar-collapsed .sidebar-meta,
+.sidebar-collapsed .nav-label,
+.sidebar-collapsed .nav-count,
+.sidebar-collapsed .nav-group-label { display: none; }
+.sidebar-collapsed .nav-item { justify-content:center;padding:10px; }
+.sidebar-collapsed .sidebar-logo { display:none; }
+.sidebar-collapsed .sidebar-header { justify-content:center;padding:10px 6px; }
+.sidebar-collapsed .sidebar-toggle { display:flex !important;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;background:var(--bg-elevated);border:1px solid var(--border);color:var(--accent) !important;font-size:18px;margin:0 auto; }
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 16px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.sidebar-logo { font-size: 22px; flex-shrink: 0; }
+.sidebar-brand { font-weight: 700; font-size: 15px; color: var(--accent); flex: 1; }
+.sidebar-toggle {
+  background: none; border: none; cursor: pointer;
+font-size: 18px; color: var(--text-muted); padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition);
+}
+.sidebar-toggle:hover { color: var(--accent); }
+.sidebar-meta {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.sidebar-framework { margin-bottom: 4px; }
+.sidebar-date { font-size: 11px; color: var(--text-subtle); }
+.nav-group { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
+.nav-group-label {
+padding: 6px 16px 3px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color: var(--text-subtle);
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  text-decoration: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  width: 100%;
+  transition: background var(--transition), color var(--transition);
+}
+.nav-item:hover { background: var(--bg-elevated); color: var(--text); }
+.nav-active { background: var(--bg-elevated) !important; color: var(--accent) !important; font-weight: 600; border-left: 3px solid var(--accent); }
+.nav-alert { color: var(--warn) !important; }
+.nav-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; }
+.nav-label { flex: 1; }
+.nav-count {
+  font-size: 11px; font-weight: 700;
+  background: var(--bg-elevated);
+  padding: 1px 7px; border-radius: 10px;
+  min-width: 24px; text-align: center;
+  color: var(--text-muted);
+}
+.nav-btn { font-size: 12px; }
+/* ── Main content ────────────────────────────────────────────────────────── */
+.main {
+  margin-left: var(--sidebar-w);
+  flex: 1;
+  min-width: 0;
+  padding: 24px 28px 48px;
+  transition: margin-left var(--transition);
+}
+.main-expanded { margin-left: 52px; }
+/* ── Theme toggle ────────────────────────────────────────────────────────── */
+.theme-toggle {
+  position: fixed;
+  top: 14px; right: 14px;
+  z-index: 200;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  width: 38px; height: 38px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+  transition: box-shadow var(--transition);
+}
+.theme-toggle:hover { box-shadow: var(--shadow-lg); }
+/* ── Page header ─────────────────────────────────────────────────────────── */
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 28px;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.page-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 8px;
+  letter-spacing: -.02em;
+}
+.page-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+.meta-chip { display: inline-flex; align-items: center; }
+.meta-item {
+  font-size: 12px;
+  color: var(--text-muted);
+  background: var(--bg-elevated);
+  padding: 3px 10px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+}
+.page-header-right { display: flex; gap: 8px; flex-shrink: 0; }
+/* ── Sections ────────────────────────────────────────────────────────────── */
+.section { margin-bottom: 32px; }
+.section-title-row {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 14px;
+}
+.section-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text);
+  display: flex; align-items: center; gap: 10px;
+}
+.section-count {
+  font-size: 12px;
+  font-weight: 700;
+  padding: 2px 10px;
+  border-radius: 20px;
+}
+.count-ok { background: #dcfce7; color: #15803d; }
+.count-warn { background: #fef3c7; color: #92400e; }
+.count-err { background: #fee2e2; color: #991b1b; }
+.count-neutral { background: var(--bg-elevated); color: var(--text-muted); }
+[data-theme="dark"] .count-ok { background: #14532d; color: #86efac; }
+[data-theme="dark"] .count-warn { background: #451a03; color: #fcd34d; }
+[data-theme="dark"] .count-err { background: #450a0a; color: #fca5a5; }
+/* ── Stat cards ──────────────────────────────────────────────────────────── */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 14px;
+  margin-bottom: 20px;
+}
+.stat-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 18px 16px 14px;
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  overflow: hidden;
+  transition: box-shadow var(--transition), transform var(--transition);
+}
+.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+.stat-ok::before { background: var(--ok); }
+.stat-warn::before { background: var(--warn); }
+.stat-err::before { background: var(--err); }
+.stat-info::before { background: var(--info); }
+.stat-neutral::before { background: var(--neutral); }
+.stat-icon { font-size: 22px; margin-bottom: 8px; }
+.stat-value {
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1;
+  margin-bottom: 4px;
+  color: var(--text);
+  letter-spacing: -.03em;
+}
+.stat-ok .stat-value { color: var(--ok); }
+.stat-warn .stat-value { color: var(--warn); }
+.stat-err .stat-value { color: var(--err); }
+.stat-info .stat-value { color: var(--info); }
+.stat-neutral .stat-value { color: var(--neutral); }
+.stat-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  margin-bottom: 3px;
+}
+.stat-hint { font-size: 11px; color: var(--text-subtle); }
+/* ── Asset summary row ───────────────────────────────────────────────────── */
+.asset-summary-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+/* ── Accordion ───────────────────────────────────────────────────────────── */
+.accordion {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 8px;
+}
+.accordion-trigger {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 18px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background var(--transition);
+}
+.accordion-trigger:hover { background: var(--bg-elevated); }
+.accordion-icon { font-size: 12px; flex-shrink: 0; }
+.severity-ok { color: var(--ok); }
+.severity-warn { color: var(--warn); }
+.severity-err { color: var(--err); }
+.severity-info { color: var(--info); }
+.accordion-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  flex: 1;
+}
+.accordion-subtitle { font-size: 12px; color: var(--text-muted); margin-right: 12px; }
+.accordion-chevron {
+  font-size: 18px;
+  color: var(--text-muted);
+  transition: transform var(--transition);
+}
+.accordion-open .accordion-chevron { transform: rotate(180deg); }
+.accordion-panel { border-top: 1px solid var(--border); }
+.accordion-body { padding: 18px; }
+/* ── Charts ──────────────────────────────────────────────────────────────── */
+.charts-grid {
+  display: grid;
+  grid-template-columns: 180px 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 4px;
+}
+@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }
+.chart-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+border-radius: var(--radius);
+  padding: 18px;
+  box-shadow: var(--shadow-sm);
+}
+.chart-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
+.chart-body { min-height: 80px; }
+.chart-donut-wrap { display: flex; justify-content: center; align-items: center; }
+.chart-caption { font-size: 11px; color: var(--text-muted); margin-top: 10px; text-align: center; }
+.donut-chart { width: 120px; height: 120px; }
+.bar-chart { display: flex; flex-direction: column; gap: 6px; }
+.bar-row { display: flex; align-items: center; gap: 8px; }
+.bar-label { font-size: 11px; color: var(--text-muted); width: 120px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bar-track { flex: 1; height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; }
+.bar-fill { height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; transition: width 0.5s ease; }
+.bar-value { font-size: 11px; font-weight: 700; color: var(--text-muted); width: 36px; text-align: right; flex-shrink: 0; }
+/* ── Info banners ────────────────────────────────────────────────────────── */
+.info-banner {
+  border-radius: var(--radius);
+  padding: 14px 18px;
+  font-size: 13px;
+  margin-bottom: 16px;
+  border-left: 4px solid;
+}
+.info-banner ul { margin: 8px 0 0 18px; }
+.info-banner li { margin-bottom: 4px; }
+.info-banner-blue { background: #eff6ff; border-color: var(--info); color: #1e40af; }
+.info-banner-green { background: #f0fdf4; border-color: var(--ok); color: #166534; }
+[data-theme="dark"] .info-banner-blue { background: #1e3a5f; color: #bfdbfe; }
+[data-theme="dark"] .info-banner-green { background: #14532d; color: #bbf7d0; }
+/* ── Insight legend ──────────────────────────────────────────────────────── */
+.insight-legend {
+  font-size: 13px;
+  color: var(--text-muted);
+  background: var(--bg-elevated);
+  border-left: 3px solid var(--accent);
+  padding: 10px 14px;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  margin-bottom: 14px;
+}
+.insight-legend code {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+/* ── Chip filter row ─────────────────────────────────────────────────────── */
+.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; font-size: 12px; color: var(--text-muted); }
+.chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 10px; border-radius: 14px;
+font-size: 12px; font-weight: 600;
+  cursor: pointer; border: 1px solid transparent;
+  transition: box-shadow var(--transition);
+}
+.chip:hover { box-shadow: 0 0 0 2px var(--accent); }
+.chip-red { background: #fee2e2; color: #991b1b; }
+[data-theme="dark"] .chip-red { background: #450a0a; color: #fca5a5; }
+/* ── Tables ──────────────────────────────────────────────────────────────── */
+.table-wrapper {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+.table-controls {
+display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 5px 10px;
+  flex: 1;
+  min-width: 180px;
+  max-width: 320px;
+}
+.search-icon { font-size: 13px; color: var(--text-subtle); flex-shrink: 0; }
+.table-search {
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  color: var(--text);
+  width: 100%;
+  font-family: var(--font);
+}
+.table-meta { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 80px; }
+.table-actions { display: flex; gap: 6px; }
+.table-scroll { overflow-x: auto; }
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+thead th {
+  background: var(--bg-elevated);
+  color: var(--text-muted);
+  padding: 10px 14px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+th.sortable { cursor: pointer; user-select: none; }
+th.sortable:hover { background: var(--border); }
+.sort-icon { font-size: 11px; opacity: .5; }
+tbody td {
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: top;
+  color: var(--text);
+}
+tbody tr:last-child td { border-bottom: none; }
+tbody tr:hover td { background: var(--bg-elevated); }
+.table-pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+.pag-btn {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 4px 9px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text);
+  transition: background var(--transition);
+}
+.pag-btn:hover:not(.pag-disabled) { background: var(--accent); color: white; border-color: var(--accent); }
+.pag-active { background: var(--accent) !important; color: white !important; border-color: var(--accent) !important; font-weight: 700; }
+.pag-disabled { opacity: .4; cursor: not-allowed; }
+.pag-info { font-size: 11px; color: var(--text-muted); margin-left: 6px; }
+/* ── Code & path styles ──────────────────────────────────────────────────── */
+.path-code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-elevated);
+  padding: 1px 6px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+.key-code {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent);
+  background: var(--bg-elevated);
+  padding: 1px 6px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+.key-list { display: flex; flex-wrap: wrap; gap: 4px; }
+.text-preview { font-size: 12px; word-break: break-word; max-width: 260px; display: inline-block; }
+.line-num {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-subtle);
+  background: var(--bg-elevated);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.file-size { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
+.detail-text { font-size: 12px; color: var(--text-muted); }
+.muted { color: var(--text-subtle); font-size: 12px; }
+.cdn-link { font-size: 11px; color: var(--accent); text-decoration: none; }
+.cdn-link:hover { text-decoration: underline; }
+/* ── Badges ──────────────────────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  line-height: 1.5;
+}
+.badge-blue    { background: #dbeafe; color: #1d4ed8; }
+.badge-red     { background: #fee2e2; color: #b91c1c; }
+.badge-green   { background: #dcfce7; color: #15803d; }
+.badge-orange  { background: #ffedd5; color: #c2410c; }
+.badge-grey    { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
+.badge-purple  { background: #ede9fe; color: #6d28d9; }
+.badge-yellow  { background: #fef9c3; color: #a16207; }
+.badge-teal    { background: #ccfbf1; color: #0f766e; }
+[data-theme="dark"] .badge-blue   { background: #1e3a5f; color: #93c5fd; }
+[data-theme="dark"] .badge-red    { background: #450a0a; color: #fca5a5; }
+[data-theme="dark"] .badge-green  { background: #14532d; color: #86efac; }
+[data-theme="dark"] .badge-orange { background: #431407; color: #fdba74; }
+[data-theme="dark"] .badge-purple { background: #2e1065; color: #c4b5fd; }
+[data-theme="dark"] .badge-yellow { background: #422006; color: #fde047; }
+[data-theme="dark"] .badge-teal   { background: #042f2e; color: #5eead4; }
+/* ── Buttons ─────────────────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-surface);
+  color: var(--text);
+  cursor: pointer;
+  transition: background var(--transition), box-shadow var(--transition);
+  font-family: var(--font);
+  white-space: nowrap;
+}
+.btn:hover { background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
+.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
+.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+.btn-sm { padding: 4px 10px; font-size: 11px; }
+/* ── AI Insights ─────────────────────────────────────────────────────────── */
+.insight-banner {
+  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
+  border: 1px solid #c4b5fd;
+  border-radius: var(--radius);
+  padding: 12px 18px;
+  font-size: 13px;
+  color: #5b21b6;
+  margin-bottom: 16px;
+}
+[data-theme="dark"] .insight-banner { background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 100%); color: #c4b5fd; border-color: #4c1d95; }
+.insights-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 16px;
+}
+.insight-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 18px;
+  box-shadow: var(--shadow-sm);
+}
+.insight-heading {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+.insight-count { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
+.insight-item { font-size: 13px; padding: 8px 0; }
+.insight-ok { color: var(--ok); font-weight: 500; }
+.insight-list { padding-left: 18px; list-style: disc; }
+.insight-list li { margin-bottom: 6px; font-size: 13px; color: var(--text-muted); }
+.insight-ns {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--accent);
+background: var(--bg-elevated);
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-right: 6px;
+}
+/* ── Empty state ─────────────────────────────────────────────────────────── */
+.empty-state-card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px 24px;
+  font-size: 13px;
+  color: var(--text-muted);
+  text-align: center;
+}
+.empty-state-card code {
+  font-family: var(--font-mono);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+/* ── Overflow notice ─────────────────────────────────────────────────────── */
+.overflow-notice {
+font-size: 12px;
+  color: var(--text-subtle);
+  text-align: center;
+  padding: 8px;
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--border);
+  border-radius: 0 0 var(--radius) var(--radius);
+  font-style: italic;
+}
+/* ── Footer ──────────────────────────────────────────────────────────────── */
+.page-footer {
+  margin-top: 48px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-subtle);
+  text-align: center;
+}
+/* ── Print ───────────────────────────────────────────────────────────────── */
+@media print {
+  .sidebar, .theme-toggle, .table-controls, .table-pagination, .page-header-right { display: none !important; }
+  .main { margin-left: 0 !important; padding: 16px; }
+  .accordion-panel { display: block !important; }
+  .accordion-panel[hidden] { display: block !important; }
+  .stat-card, .chart-card, .accordion, .table-wrapper { break-inside: avoid; }
+  body { background: white; color: black; }
+}
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  body { flex-direction: column; }
+  .sidebar { position: relative; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; overflow: visible; border-right: none; border-bottom: 1px solid var(--border); }
+  .main { margin-left: 0; padding: 16px; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .insights-grid { grid-template-columns: 1fr; }
+  .page-header { flex-direction: column; }
+  .theme-toggle { top: 8px; right: 8px; }
+}
+/* ── Scrollbar ───────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }
+/* ── Focus ───────────────────────────────────────────────────────────────── */
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+`;