ai-localize-reporting 2.0.1 → 2.0.3

package/dist/index.js

@@ -74,13 +74,155 @@ function generateHtmlReport(report, outputPath) {
   fs.writeFileSync(outputPath, html, "utf-8");
 }
 function esc(s) {
-  return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, "&#34;");
+  return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, "&#34;").replace(/'/g, "'");
 }
-function badge(text, color) {
-  return '<span class="badge badge-' + color + '">' + esc(text) + "</span>";
+function escJs(s) {
+  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n").replace(/\r/g, "");
 }
-function sectionHeader(title, legend) {
-  return '\n<div class="section-header">\n  <h2>' + title + '</h2>\n  <p class="legend">' + legend + "</p>\n</div>";
+function badge(text, variant = "blue") {
+  return `<span class="badge badge-${variant}">${esc(text)}</span>`;
+}
+function severityBadge(count, warn = false) {
+  if (count === 0) return badge("0", "green");
+  return badge(String(count), warn ? "orange" : "red");
+}
+function computeInsights(report) {
+  const { details } = report;
+  const textMap = /* @__PURE__ */ new Map();
+  for (const dt of details.detectedTexts) {
+    const t = dt.text.trim();
+    if (!textMap.has(t)) textMap.set(t, { keys: /* @__PURE__ */ new Set(), files: /* @__PURE__ */ new Set() });
+    textMap.get(t).keys.add(dt.suggestedKey);
+    textMap.get(t).files.add(dt.filePath);
+  }
+  const duplicates = [];
+  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);
+  const keyTextMap = /* @__PURE__ */ new Map();
+  for (const dt of details.detectedTexts) {
+    if (!keyTextMap.has(dt.suggestedKey)) keyTextMap.set(dt.suggestedKey, /* @__PURE__ */ new Set());
+    keyTextMap.get(dt.suggestedKey).add(dt.text.trim());
+  }
+  let duplicateKeyCount = 0;
+  for (const [, texts] of keyTextMap) {
+    if (texts.size > 1) duplicateKeyCount++;
+  }
+  const byLang = /* @__PURE__ */ new Map();
+  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}"`
+  }));
+  const nsCounts = /* @__PURE__ */ new Map();
+  for (const dt of details.detectedTexts) {
+    const ns = dt.suggestedKey.split(".")[0] || "default";
+    nsCounts.set(ns, (nsCounts.get(ns) || 0) + 1);
+  }
+  const namespaceHints = [];
+  for (const [ns, count] of nsCounts) {
+    if (count < 3) {
+      namespaceHints.push({ namespace: ns, count, suggestion: `Namespace "${ns}" has only ${count} key(s) \u2014 consider merging into a broader namespace.` });
+    }
+  }
+  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 };
+}
+function buildNavItem(id, icon, label, count, alert = false) {
+  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, label, hint, status, icon) {
+  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, title, subtitle, content, open = false, severity = "info") {
+  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>`;
+}
+function buildCoverageDonut(pct) {
+  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) {
+  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>`;
+}
+function buildSearchableTable(tableId, columns, rows, pageSize = 50) {
+  const thead = columns.map(
+    (c2) => `<th data-col="${c2.key}" ${c2.sortable !== false ? `onclick="sortTable('${tableId}', '${c2.key}')" class="sortable"` : ""} ${c2.width ? `style="width:${c2.width}"` : ""}>${c2.label}${c2.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\u2026" 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>`;
 }
 function buildHtml(report) {
   const {
@@ -96,151 +238,1833 @@ function buildHtml(report) {
     details
   } = report;
   const scanDate = new Date(timestamp).toLocaleString();
-  const hardcodedRows = details.detectedTexts.slice(0, 200).map(
-    (t) => '<tr><td><code class="path">' + esc(t.filePath.split("/").slice(-3).join("/")) + '</code></td><td class="center">' + t.line + '</td><td class="text-cell">' + esc(t.text.slice(0, 80)) + (t.text.length > 80 ? "&#8230;" : "") + '</td><td><code class="key">' + esc(t.suggestedKey) + "</code></td><td>" + badge(t.context, "blue") + "</td></tr>"
-  ).join("\n");
-  const hardcodedOverflow = details.detectedTexts.length > 200 ? '<tr><td colspan="5" class="overflow-row">&#8230;and ' + (details.detectedTexts.length - 200) + " more \u2014 run <code>ai-localize scan --output results.json</code> for the full list</td></tr>" : "";
-  const hardcodedSection = details.detectedTexts.length > 0 ? sectionHeader(
-    "&#128269; Hardcoded Texts Found (" + details.detectedTexts.length + ")",
-    "These are raw text strings discovered in your source files that are <strong>not yet wrapped</strong> in a translation call. Each row shows the file, line number, the text itself, the suggested locale key that would be generated, and the AST context. Run <code>ai-localize extract</code> to generate locale files and <code>ai-localize full-migrate</code> to wrap them automatically."
-  ) + "\n<table>\n<thead><tr><th>File (last 3 segments)</th><th>Line</th><th>Text</th><th>Suggested Key</th><th>Context</th></tr></thead>\n<tbody>" + hardcodedRows + hardcodedOverflow + "</tbody>\n</table>" : sectionHeader(
-    "&#9989; Hardcoded Texts Found (0)",
-    "No hardcoded text was detected. All user-visible strings appear to be wrapped in translation calls already."
-  );
-  const missingRows = details.missingKeys.map(
-    (e) => '<tr><td><code class="key">' + esc(e.key) + "</code></td><td>" + (e.language ? badge(e.language, "red") : "\u2014") + "</td><td>" + (e.filePath ? '<code class="path">' + esc(e.filePath) + "</code>" : "\u2014") + "</td><td>" + esc(e.message) + "</td></tr>"
-  ).join("\n");
-  const missingSection = details.missingKeys.length > 0 ? sectionHeader(
-    "&#10060; Missing Translations (" + details.missingKeys.length + ")",
-    "These locale keys exist in the <strong>default language</strong> file but are <strong>absent</strong> in one or more target language files. A missing translation means your app will fall back to the default language (or show a blank / raw key) for users of that language. Ask your translators to fill in these entries. Running <code>ai-localize extract</code> now seeds all target language files with the source value so nothing is blank."
-  ) + "\n<table>\n<thead><tr><th>Key</th><th>Missing In Language</th><th>Locale File</th><th>Details</th></tr></thead>\n<tbody>" + missingRows + "</tbody>\n</table>" : sectionHeader(
-    "&#9989; Missing Translations (0)",
-    "All keys present in the default language are also present in every target language file."
-  );
-  const unusedRows = details.unusedKeysList.map((key) => '<tr><td><code class="key">' + esc(key) + "</code></td></tr>").join("\n");
-  const unusedSection = details.unusedKeysList.length > 0 ? sectionHeader(
-    "&#128465;&#65039; Unused Keys (" + details.unusedKeysList.length + ")",
-    "These translation keys exist in your locale JSON files but are <strong>not referenced anywhere</strong> in the scanned source code. They are likely left over from removed features or renamed components. Unused keys bloat your locale bundles and can confuse translators. Run <code>ai-localize cleanup</code> to remove them (review the list carefully first)."
-  ) + "\n<table>\n<thead><tr><th>Unused Key</th></tr></thead>\n<tbody>" + unusedRows + "</tbody>\n</table>" : sectionHeader(
-    "&#9989; Unused Keys (0)",
-    "No unused translation keys detected. Your locale files are clean."
-  );
-  const assetRows = details.assets.map(
-    (a) => '<tr><td><code class="path">' + esc(a.localPath.split("/").slice(-3).join("/")) + '</code></td><td><code class="key">' + esc(a.s3Key) + "</code></td><td><code>" + esc(a.cloudfrontUrl) + '</code></td><td class="center">' + (a.size / 1024).toFixed(1) + " KB</td><td>" + badge(a.contentType, "grey") + "</td></tr>"
-  ).join("\n");
-  const assetsSectionTitle = "&#128230; Assets (" + assets.totalAssets + " found &#183; " + assets.uploadedAssets + " uploaded &#183; " + assets.replacedUrls + " URLs replaced &#183; " + assets.legacyCdnUrls + " legacy CDN URLs)";
-  const assetsLegend = "<strong>Total assets</strong> = all static asset references found in source (images, fonts, CSS, JS). <strong>Uploaded</strong> = files pushed to S3/CloudFront in this run. <strong>Replaced URLs</strong> = legacy CDN references rewritten to the new CloudFront URL in source files. <strong>Legacy CDN URLs</strong> = old CDN references still present in source that have not yet been replaced \u2014 run <code>ai-localize replace-cdn</code> to fix them.";
-  const assetsSection = sectionHeader(assetsSectionTitle, assetsLegend) + (details.assets.length > 0 ? "\n<table>\n<thead><tr><th>Local Path</th><th>S3 Key</th><th>CloudFront URL</th><th>Size</th><th>Content Type</th></tr></thead>\n<tbody>" + assetRows + "</tbody>\n</table>" : '\n<p class="empty-state">No assets were uploaded in this run. Use <code>ai-localize upload-assets</code> to push static assets to S3/CloudFront.</p>');
+  const insights = computeInsights(report);
+  const coverageDonut = buildCoverageDonut(insights.coveragePct);
+  const nsCounts = /* @__PURE__ */ new Map();
+  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);
+  const ctxCounts = /* @__PURE__ */ new Map();
+  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);
+  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>`;
+  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 ? "\u2026" : ""}</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}`;
+  const missingByLang = /* @__PURE__ */ new Map();
+  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") : "\u2014",
+      e.filePath ? `<code class="path-code">${esc(e.filePath)}</code>` : "\u2014",
+      `<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)}`;
+  }
+  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>`]))}`;
+  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 ? "\u2026" : ""}</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>'}`;
+  let insightsContent = "";
+  const dupTextContent = insights.duplicates.length === 0 ? '<div class="insight-item insight-ok">&#9989; No duplicate texts detected \u2014 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>`
+  ]))}`;
+  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 \u2014 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" }))
+  )}`;
+  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")} \u2014 ${esc(h.suggestion)}</li>`).join("")}
+      </ul>`;
+  const unusedInsightContent = unusedKeys === 0 ? '<div class="insight-item insight-ok">&#9989; No unused keys \u2014 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) + "\u2026" : 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>`;
   const diff = Math.abs(hardcodedTexts - localeKeysGenerated);
-  const diffExplainer = hardcodedTexts !== localeKeysGenerated ? '<div class="info-box"><strong>&#8505;&#65039; Why do Hardcoded Texts (' + hardcodedTexts + ") and Keys Generated (" + localeKeysGenerated + ") differ?</strong><br><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> = number of <em>unique</em> 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-box success-box"><strong>&#9989; Hardcoded Texts and Keys Generated match (' + hardcodedTexts + ").</strong> Every detected string maps to a unique locale key.</div>";
-  const statCard = (num, label, hint, colorClass) => '<div class="stat-card"><div class="num ' + colorClass + '">' + num + '</div><div class="lbl">' + label + '</div><div class="hint">' + hint + "</div></div>";
-  const summaryCards = '<div class="stats">' + statCard(filesScanned, "Files Scanned", "Source files inspected by AST scanner", "num-neutral") + statCard(hardcodedTexts, "Hardcoded Texts", "Raw strings not yet wrapped in t()", hardcodedTexts > 0 ? "num-warn" : "num-ok") + statCard(localeKeysGenerated, "Keys Generated", "Unique locale keys (deduplicated)", "num-ok") + statCard(missingTranslations, "Missing Translations", "Keys absent in target languages", missingTranslations > 0 ? "num-err" : "num-ok") + statCard(unusedKeys, "Unused Keys", "Keys in locale files not used in code", unusedKeys > 0 ? "num-warn" : "num-ok") + statCard(assets.totalAssets, "Assets Found", "Static asset references in source", "num-neutral") + statCard(assets.uploadedAssets, "Assets Uploaded", "Pushed to S3/CloudFront", "num-ok") + statCard(assets.legacyCdnUrls, "Legacy CDN URLs", "Old CDN refs not yet replaced", assets.legacyCdnUrls > 0 ? "num-warn" : "num-ok") + "</div>";
-  return '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>ai-localize Report &#8212; ' + scanDate + "</title>\n<style>\n" + CSS + "\n</style>\n</head>\n<body>\n<h1>&#127760; ai-localize Report <small>&#8212; " + esc(framework) + '</small></h1>\n<p class="meta"><strong>Generated:</strong> ' + scanDate + " &nbsp;|&nbsp; <strong>Duration:</strong> " + duration + "ms &nbsp;|&nbsp; <strong>Files Scanned:</strong> " + filesScanned + "</p>\n" + summaryCards + "\n" + diffExplainer + "\n" + hardcodedSection + "\n" + missingSection + "\n" + unusedSection + "\n" + assetsSection + "\n<footer>Generated by <strong>ai-localize-core</strong> &#8212; deterministic, offline-capable i18n tooling</footer>\n</body>\n</html>";
+  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>`;
+  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>`;
+  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>`;
+  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>`;
+  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 Dashboard &mdash; ${esc(scanDate)}</title>
+<style>${CSS}</style>
+</head>
+<body>
+${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> \u2014 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>`;
 }
-var CSS = `
-  *, *::before, *::after { box-sizing: border-box; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    max-width: 1280px; margin: 0 auto; padding: 32px 24px;
-    background: #f0f2f5; color: #1a1a2e; line-height: 1.6;
-  }
-  h1 { font-size: 2rem; color: #0f3460; margin-bottom: 4px; }
-  h1 small { font-size: 1rem; font-weight: 400; color: #666; }
-  h2 { font-size: 1.2rem; color: #16213e; margin: 0 0 6px; }
-  .meta { color: #666; font-size: 0.9rem; margin-bottom: 32px; }
-  .meta strong { color: #333; }
-  .stats {
-    display: grid;
- grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
-    gap: 14px; margin-bottom: 32px;
-  }
-  .stat-card {
-    background: white; border-radius: 10px; padding: 18px 14px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center;
-  }
-  .stat-card .num { font-size: 2rem; font-weight: 700; line-height: 1; }
-  .stat-card .lbl { color: #444; font-size: 0.82rem; margin-top: 6px; font-weight: 600; }
-  .stat-card .hint { color: #999; font-size: 0.75rem; margin-top: 3px; font-style: italic; }
-  .num-neutral { color: #0f3460; }
-  .num-ok  { color: #38a169; }
-  .num-warn { color: #d69e2e; }
-  .num-err  { color: #e53e3e; }
-  .section-header { margin: 40px 0 12px; }
-  .legend {
-    font-size: 0.875rem; color: #555;
-    background: #f8f9ff; border-left: 4px solid #0f3460;
-padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 8px 0 14px;
-  }
-.legend code { background: #e8ebff; padding: 1px 5px; border-radius: 3px; font-size: 0.85em; }
-  table {
-    width: 100%; border-collapse: collapse; background: white;
-    border-radius: 10px; overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 8px;
-  }
-  th {
-    background: #0f3460; color: white; padding: 11px 14px;
-    text-align: left; font-size: 0.84rem; font-weight: 600;
-  }
-  td { padding: 9px 14px; border-bottom: 1px solid #f0f0f0; font-size: 0.84rem; vertical-align: top; }
-  tr:last-child td { border-bottom: none; }
-  tr:hover td { background: #f8f9ff; }
-  .center { text-align: center; }
-  .text-cell { max-width: 260px; word-break: break-word; }
-  code.path { color: #555; font-size: 0.81rem; }
-  code.key  { color: #0f3460; font-size: 0.81rem; }
-  .overflow-row { text-align: center; color: #888; font-style: italic; padding: 12px; }
-  .badge {
-    display: inline-block; padding: 2px 8px; border-radius: 10px;
-    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
-  }
-  .badge-blue   { background: #ebf4ff; color: #2b6cb0; }
-  .badge-red    { background: #fff5f5; color: #c53030; }
-  .badge-green  { background: #f0fff4; color: #276749; }
-  .badge-orange { background: #fffaf0; color: #c05621; }
-  .badge-grey   { background: #f7f7f7; color: #555; }
-  .info-box {
-    background: #ebf8ff; border-left: 4px solid #3182ce;
-    padding: 14px 18px; border-radius: 0 8px 8px 0;
-    margin: 0 0 28px; font-size: 0.9rem;
-  }
-  .info-box ul { margin: 8px 0 0 18px; padding: 0; }
-  .info-box li { margin-bottom: 4px; }
-  .success-box { background: #f0fff4; border-left-color: #38a169; }
-  .empty-state { color: #888; font-style: italic; font-size: 0.88rem; padding: 8px 0; }
-  footer {
-margin-top: 48px; padding-top: 16px;
-    border-top: 1px solid #ddd; color: #aaa;
-    font-size: 0.8rem; text-align: center;
+function JS(report, insights) {
+  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';
+
+  // \u2500\u2500 Theme \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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');
+
+  // \u2500\u2500 Sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  window.toggleSidebar = function() {
+    document.getElementById('sidebar').classList.toggle('sidebar-collapsed');
+    document.getElementById('main').classList.toggle('main-expanded');
+  };
+
+  // \u2500\u2500 Active nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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();
+
+  // \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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', '');
+    });
+  };
+
+// \u2500\u2500 Table: filter \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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);
+  };
+
+  // \u2500\u2500 Table: sort \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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);
+  };
+
+  // \u2500\u2500 Table: pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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' : '');
+    }
+  });
+
+  // \u2500\u2500 Export: table CSV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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');
+  };
+
+  // \u2500\u2500 Export: table JSON \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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');
+  };
+
+  // \u2500\u2500 Export: full report JSON \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  window.exportFullJson = function() {
+    var fullReport = ${reportJson};
+    downloadFile('ai-localize-report.json', JSON.stringify(fullReport, null, 2), 'application/json');
+  };
+
+  // \u2500\u2500 Export: full report CSV (summary) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  // \u2500\u2500 Export: full report CSV (all sections) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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('
+'), '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);
+  }
+
+  // \u2500\u2500 Keyboard navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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(); }
+  });
+
+// \u2500\u2500 Smooth scroll for nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  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' });
+    });
+  });
+
+})();
+`;
+}
+var CSS = `
+/* \u2500\u2500 Reset & Variables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+*, *::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;
+}
+
+/* \u2500\u2500 Sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Main content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Theme toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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); }
+
+/* \u2500\u2500 Page header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Stat cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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); }
+
+/* \u2500\u2500 Asset summary row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.asset-summary-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+/* \u2500\u2500 Accordion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Charts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Info banners \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Insight legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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;
+}
+
+/* \u2500\u2500 Chip filter row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Tables \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Code & path styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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; }
+
+/* \u2500\u2500 AI Insights \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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;
+}
+
+/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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;
+}
+
+/* \u2500\u2500 Overflow notice \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.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;
+}
+
+/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.page-footer {
+  margin-top: 48px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-subtle);
+  text-align: center;
+}
+
+/* \u2500\u2500 Print \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@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; }
+}
+
+/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+@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; }
+}
+
+/* \u2500\u2500 Scrollbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+::-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); }
+
+/* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 `;
 
 // src/cli-reporter.ts
+var A = {
+  reset: "\x1B[0m",
+  bold: "\x1B[1m",
+  dim: "\x1B[2m",
+  italic: "\x1B[3m",
+  underline: "\x1B[4m",
+  // foreground
+  black: "\x1B[30m",
+  red: "\x1B[31m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  blue: "\x1B[34m",
+  magenta: "\x1B[35m",
+  cyan: "\x1B[36m",
+  white: "\x1B[37m",
+  // bright foreground
+  brightRed: "\x1B[91m",
+  brightGreen: "\x1B[92m",
+  brightYellow: "\x1B[93m",
+  brightBlue: "\x1B[94m",
+  brightMagenta: "\x1B[95m",
+  brightCyan: "\x1B[96m",
+  brightWhite: "\x1B[97m",
+  // background
+  bgRed: "\x1B[41m",
+  bgGreen: "\x1B[42m",
+  bgYellow: "\x1B[43m",
+  bgBlue: "\x1B[44m",
+  bgMagenta: "\x1B[45m",
+  bgCyan: "\x1B[46m"
+};
+function c(color, text) {
+  return A[color] + text + A.reset;
+}
+function bold(text) {
+  return A.bold + text + A.reset;
+}
+function dim(text) {
+  return A.dim + text + A.reset;
+}
+function supportsColor() {
+  if (process.env.NO_COLOR || process.env.TERM === "dumb") return false;
+  if (process.stdout && !process.stdout.isTTY) return false;
+  return true;
+}
+function strip(text) {
+  return text.replace(/\x1b\[[0-9;]*m/g, "");
+}
+function visLen(s) {
+  return strip(s).length;
+}
+function padEnd(s, width) {
+  const pad = width - visLen(s);
+  return pad > 0 ? s + " ".repeat(pad) : s;
+}
+function padStart(s, width) {
+  const pad = width - visLen(s);
+  return pad > 0 ? " ".repeat(pad) + s : s;
+}
+function termWidth() {
+  return Math.min(process.stdout.columns || 100, 120);
+}
+function hr(char = "\u2500", color = "dim") {
+  const line = char.repeat(termWidth());
+  return supportsColor() ? A[color] + line + A.reset : line;
+}
+function centre(text) {
+  const visible = visLen(text);
+  const tw = termWidth();
+  if (visible >= tw) return text;
+  const pad = Math.floor((tw - visible) / 2);
+  return " ".repeat(pad) + text;
+}
+function badge2(text, ok) {
+  return ok ? c("bgGreen", c("black", ` ${text} `)) : c("bgRed", c("white", ` ${text} `));
+}
+function miniBar(value, max, width = 20, color = "cyan") {
+  const filled = max > 0 ? Math.round(value / max * width) : 0;
+  const empty = width - filled;
+  const bar = c(color, "\u2588".repeat(filled)) + dim("\u2591".repeat(empty));
+  return "[" + bar + "]";
+}
+function progressBar(pct, width = 24) {
+  const filled = Math.round(pct / 100 * width);
+  const empty = width - filled;
+  let color = "brightGreen";
+  if (pct < 50) color = "brightRed";
+  else if (pct < 80) color = "brightYellow";
+  const bar = c(color, "\u2588".repeat(filled)) + dim("\u2591".repeat(empty));
+  return "[" + bar + "]";
+}
+function dot(ok, warn) {
+  if (ok) return c("brightGreen", "\u25CF");
+  if (warn) return c("brightYellow", "\u25CF");
+  return c("brightRed", "\u25CF");
+}
+function fmt(n) {
+  return n.toLocaleString();
+}
+function renderTable(columns, rows) {
+  if (rows.length === 0) return "";
+  const widths = columns.map((col, i) => {
+    const headerW = visLen(col.header);
+    const maxDataW = rows.reduce((m, row) => Math.max(m, visLen(row[i] ?? "")), 0);
+    const w = Math.max(headerW, maxDataW);
+    return col.maxWidth ? Math.min(w, col.maxWidth) : w;
+  });
+  const sepLine = "\u251C" + widths.map((w) => "\u2500".repeat(w + 2)).join("\u253C") + "\u2524";
+  const topLine = "\u250C" + widths.map((w) => "\u2500".repeat(w + 2)).join("\u252C") + "\u2510";
+  const botLine = "\u2514" + widths.map((w) => "\u2500".repeat(w + 2)).join("\u2534") + "\u2518";
+  function renderRow(cells, isHeader = false) {
+    const parts = cells.map((cell, i) => {
+      const w = widths[i];
+      const col = columns[i];
+      let s = visLen(cell) > w ? strip(cell).slice(0, w - 1) + "\u2026" : cell;
+      if (isHeader) s = bold(strip(s));
+      if (col?.align === "right") s = padStart(s, w);
+      else if (col?.align === "center") {
+        const p = Math.floor((w - visLen(s)) / 2);
+        s = " ".repeat(p) + s + " ".repeat(w - visLen(s) - p);
+      } else {
+        s = padEnd(s, w);
+      }
+      return " " + s + " ";
+    });
+    return "\u2502" + parts.join("\u2502") + "\u2502";
+  }
+  const lines = [];
+  lines.push(dim(topLine));
+  lines.push(renderRow(columns.map((c2) => c2.header), true));
+  lines.push(dim(sepLine));
+  for (const row of rows) {
+    lines.push(renderRow(row));
+  }
+  lines.push(dim(botLine));
+  return lines.join("\n");
+}
+function computeCliInsights(report) {
+  const { details } = report;
+  const totalUniqueKeys = new Set(details.detectedTexts.map((d) => d.suggestedKey)).size;
+  const coveragePct = totalUniqueKeys > 0 ? Math.round((totalUniqueKeys - details.missingKeys.length) / totalUniqueKeys * 100) : 100;
+  const textMap = /* @__PURE__ */ new Map();
+  for (const dt of details.detectedTexts) {
+    const t = dt.text.trim();
+    if (!textMap.has(t)) textMap.set(t, /* @__PURE__ */ new Set());
+    textMap.get(t).add(dt.suggestedKey);
+  }
+  let duplicateTextGroups = 0;
+  for (const [, keys] of textMap) {
+    if (keys.size > 1) duplicateTextGroups++;
+  }
+  const nsCounts = /* @__PURE__ */ new Map();
+  for (const dt of details.detectedTexts) {
+    const ns = dt.suggestedKey.split(".")[0] || "default";
+    nsCounts.set(ns, (nsCounts.get(ns) || 0) + 1);
+  }
+  const topNamespaces = [...nsCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6).map(([ns, count]) => ({ ns, count }));
+  const ctxCounts = /* @__PURE__ */ new Map();
+  for (const dt of details.detectedTexts) {
+    ctxCounts.set(dt.context, (ctxCounts.get(dt.context) || 0) + 1);
+  }
+  const topContexts = [...ctxCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6).map(([ctx, count]) => ({ ctx, count }));
+  const byLang = /* @__PURE__ */ new Map();
+  for (const mk of details.missingKeys) {
+    if (mk.language) byLang.set(mk.language, (byLang.get(mk.language) || 0) + 1);
+  }
+  const topMissingLanguages = [...byLang.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6).map(([lang, count]) => ({ lang, count }));
+  const unusedTopKeys = details.unusedKeysList.slice(0, 5);
+  return {
+    coveragePct,
+    totalUniqueKeys,
+    duplicateTextGroups,
+    namespaceCount: nsCounts.size,
+    topMissingLanguages,
+    topNamespaces,
+    topContexts,
+    unusedTopKeys
+  };
+}
+function renderSectionHeader(icon, title, count, warn = false) {
+  const countStr = count !== void 0 ? " " + (count === 0 ? c("brightGreen", `(${count})`) : warn ? c("brightYellow", `(${count})`) : c("brightRed", `(${count})`)) : "";
+  return "\n" + bold(c("brightCyan", icon + " " + title)) + countStr;
+}
+function renderKeyValueSection(pairs, indent = "  ") {
+  const keyWidth = Math.max(...pairs.map(([k]) => k.length)) + 1;
+  return pairs.map(
+    ([k, v]) => indent + dim(padEnd(k + ":", keyWidth + 1)) + "  " + v
+  ).join("\n");
+}
 function printCliSummary(report) {
-  const lines = [
-    "",
-    "\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557",
-    "\u2551          ai-localize-core  Report Summary      \u2551",
-    "\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D",
-    "",
-    `  Framework        : ${report.framework}`,
-    `  Timestamp        : ${report.timestamp}`,
-    `  Duration         : ${report.duration}ms`,
-    "",
-    "  \u2500\u2500\u2500 Localization \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
-    `  Files Scanned : ${report.filesScanned}`,
-    `  Hardcoded Texts  : ${report.hardcodedTexts}`,
-    `  Keys Generated   : ${report.localeKeysGenerated}`,
-    `  Missing Trans.   : ${report.missingTranslations}`,
-    `  Unused Keys      : ${report.unusedKeys}`,
-    "",
-    "  \u2500\u2500\u2500 Assets / CDN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500",
-    `  Total Assets     : ${report.assets.totalAssets}`,
-    `  Uploaded Assets  : ${report.assets.uploadedAssets}`,
-    `  Replaced URLs    : ${report.assets.replacedUrls}`,
-    `Legacy CDN URLs  : ${report.assets.legacyCdnUrls}`,
-    ""
-  ];
-  console.log(lines.join("\n"));
+  const {
+    timestamp,
+    framework,
+    duration,
+    filesScanned,
+    hardcodedTexts,
+    localeKeysGenerated: _localeKeysGenerated,
+    unusedKeys,
+    missingTranslations,
+    assets,
+    details
+  } = report;
+  const scanDate = new Date(timestamp).toLocaleString();
+  const ins = computeCliInsights(report);
+  const w = termWidth();
+  const out = [];
+  const ln = (s = "") => out.push(s);
+  ln();
+  ln(hr("\u2550", "cyan"));
+  ln(centre(bold(c("brightCyan", "  \u{1F310}  ai-localize  \xB7  Localization Report  "))));
+  ln(hr("\u2550", "cyan"));
+  ln();
+  ln(centre(
+    dim("Framework: ") + c("brightWhite", framework) + dim("  \u2502  ") + dim("Scanned: ") + c("brightWhite", scanDate) + dim("  \u2502  ") + dim("Duration: ") + c("brightWhite", duration + "ms")
+  ));
+  ln();
+  ln(hr("\u2500"));
+  ln(bold(c("white", "  \u{1F4CA}  Summary")));
+  ln(hr("\u2500"));
+  ln();
+  function statLine(icon, label, value, statusOk, statusWarn = false, hint = "") {
+    const valStr = typeof value === "number" ? statusOk ? c("brightGreen", fmt(value)) : statusWarn ? c("brightYellow", fmt(value)) : c("brightRed", fmt(value)) : c("brightWhite", String(value));
+    const d = dot(statusOk, !statusOk && statusWarn);
+    const left = "  " + d + " " + padEnd(icon + " " + label, 26) + " " + padStart(valStr, 8);
+    const right = hint ? dim("  \u2190 " + hint) : "";
+    return left + right;
+  }
+  ln(statLine("\u{1F4C1}", "Files Scanned", filesScanned, true, false, "source files processed"));
+  ln(statLine("\u{1F50D}", "Hardcoded Texts", hardcodedTexts, hardcodedTexts === 0, hardcodedTexts === 0, "raw strings not yet in t()"));
+  ln(statLine("\u{1F511}", "Unique Keys Generated", ins.totalUniqueKeys, true, false, "deduplicated locale keys"));
+  ln(statLine("\u274C", "Missing Translations", missingTranslations, missingTranslations === 0, false, "absent in target languages"));
+  ln(statLine("\u{1F5D1} ", "Unused Keys", unusedKeys, unusedKeys === 0, true, "in locale but not in source"));
+  ln(statLine("\u{1F4CB}", "Duplicate Text Groups", ins.duplicateTextGroups, ins.duplicateTextGroups === 0, true, "same text \u2192 multiple keys"));
+  ln(statLine("\u{1F4E6}", "Total Assets", assets.totalAssets, true, false, "static asset references"));
+  ln(statLine("\u2601 ", "Uploaded to CDN", assets.uploadedAssets, true, false, "pushed to S3/CloudFront"));
+  ln(statLine("\u{1F517}", "Legacy CDN URLs", assets.legacyCdnUrls, assets.legacyCdnUrls === 0, true, "old CDN refs pending replace"));
+  ln();
+  ln(hr("\u2500"));
+  const covColor = ins.coveragePct >= 80 ? "brightGreen" : ins.coveragePct >= 50 ? "brightYellow" : "brightRed";
+  const covLabel = ins.coveragePct === 100 ? "\u2713 Fully Covered" : ins.coveragePct >= 80 ? "~ Good Coverage" : "\u2717 Low Coverage";
+  ln(
+    "  " + bold("\u{1F3AF} Translation Coverage") + "  " + progressBar(ins.coveragePct) + "  " + c(covColor, ins.coveragePct + "%") + "  " + dim(covLabel)
+  );
+  ln();
+  if (details.detectedTexts.length > 0) {
+    ln(hr("\u2500"));
+    ln(renderSectionHeader("\u{1F50D}", "Hardcoded Texts", hardcodedTexts, true));
+    ln(dim("  Strings detected in source that are not yet wrapped in a translation call."));
+    ln();
+    const maxCount = hardcodedTexts;
+    const topFiles = /* @__PURE__ */ new Map();
+    for (const dt of details.detectedTexts) {
+      const f = dt.filePath.split("/").slice(-2).join("/");
+      topFiles.set(f, (topFiles.get(f) || 0) + 1);
+    }
+    const topFilesSorted = [...topFiles.entries()].sort((a, b) => b[1] - a[1]).slice(0, 8);
+    if (topFilesSorted.length > 0) {
+      ln("  " + bold("Top files with hardcoded text:"));
+      ln();
+      for (const [file, cnt] of topFilesSorted) {
+        ln("  " + padEnd(dim(file), 48) + " " + miniBar(cnt, maxCount, 16) + " " + c("brightYellow", String(cnt)));
+      }
+      ln();
+    }
+    const sample = details.detectedTexts.slice(0, 5);
+    if (sample.length > 0) {
+      ln("  " + bold("Sample detected strings:"));
+      ln();
+      const sampleRows = sample.map((t) => [
+        c("cyan", t.filePath.split("/").slice(-2).join("/")),
+        dim(String(t.line)),
+        c("brightWhite", t.text.length > 50 ? t.text.slice(0, 50) + "\u2026" : t.text),
+        dim(t.context)
+      ]);
+      ln(renderTable(
+        [
+          { header: "File", maxWidth: 36 },
+          { header: "Line", align: "right", maxWidth: 6 },
+          { header: "Text", maxWidth: 52 },
+          { header: "Context", maxWidth: 20 }
+        ],
+        sampleRows
+      ).split("\n").map((l) => "  " + l).join("\n"));
+      if (details.detectedTexts.length > 5) {
+        ln();
+        ln("  " + dim(`\u2026 and ${details.detectedTexts.length - 5} more. Run `) + c("cyan", "ai-localize report") + dim(" for the full HTML report."));
+      }
+      ln();
+    }
+  }
+  if (missingTranslations > 0) {
+    ln(hr("\u2500"));
+    ln(renderSectionHeader("\u274C", "Missing Translations", missingTranslations));
+    ln(dim("  Keys present in the default language but absent in one or more target language files."));
+    ln();
+    if (ins.topMissingLanguages.length > 0) {
+      const maxMissing = ins.topMissingLanguages[0].count;
+      ln("  " + bold("Missing keys by language:"));
+      ln();
+      for (const { lang, count } of ins.topMissingLanguages) {
+        ln("  " + padEnd(c("brightMagenta", lang), 18) + " " + miniBar(count, maxMissing, 20, "brightRed") + " " + c("brightRed", String(count) + " key" + (count > 1 ? "s" : "")));
+      }
+      ln();
+    }
+    const missSample = details.missingKeys.slice(0, 5);
+    if (missSample.length > 0) {
+      ln("  " + bold("Sample missing keys:"));
+      ln();
+      const missRows = missSample.map((e) => [
+        c("cyan", e.key.length > 42 ? e.key.slice(0, 42) + "\u2026" : e.key),
+        e.language ? c("brightMagenta", e.language) : dim("\u2014"),
+        dim(e.filePath ? e.filePath.split("/").slice(-2).join("/") : "\u2014")
+      ]);
+      ln(renderTable(
+        [
+          { header: "Key", maxWidth: 44 },
+          { header: "Language", maxWidth: 14 },
+          { header: "Locale File", maxWidth: 36 }
+        ],
+        missRows
+      ).split("\n").map((l) => "  " + l).join("\n"));
+      if (details.missingKeys.length > 5) {
+        ln();
+        ln("  " + dim(`\u2026 and ${details.missingKeys.length - 5} more.`));
+      }
+      ln();
+    }
+    ln("  " + dim("\u{1F4A1} Tip: Run ") + c("cyan", "ai-localize extract") + dim(" to seed target language files with source values."));
+    ln();
+  } else {
+    ln(hr("\u2500"));
+    ln("  " + dot(true) + " " + bold(c("brightGreen", "Missing Translations")) + "  " + c("brightGreen", "All translations present \u2713"));
+    ln();
+  }
+  if (unusedKeys > 0) {
+    ln(hr("\u2500"));
+    ln(renderSectionHeader("\u{1F5D1} ", "Unused Keys", unusedKeys, true));
+    ln(dim("  Translation keys in locale files that are not referenced anywhere in source code."));
+    ln();
+    if (ins.unusedTopKeys.length > 0) {
+      ln("  " + bold("Examples:"));
+      for (const key of ins.unusedTopKeys) {
+        ln("  " + c("yellow", "  \u26A0  ") + c("brightYellow", key));
+      }
+      if (unusedKeys > ins.unusedTopKeys.length) {
+        ln("  " + dim(`  \u2026 and ${unusedKeys - ins.unusedTopKeys.length} more.`));
+      }
+    }
+    ln();
+    ln("  " + dim("\u{1F4A1} Tip: Run ") + c("cyan", "ai-localize cleanup") + dim(" to remove unused keys safely."));
+    ln();
+  } else {
+    ln(hr("\u2500"));
+    ln("  " + dot(true) + " " + bold(c("brightGreen", "Unused Keys")) + "  " + c("brightGreen", "No unused keys \u2014 locale files are clean \u2713"));
+    ln();
+  }
+  if (ins.topNamespaces.length > 0) {
+    ln(hr("\u2500"));
+    ln(renderSectionHeader("\u{1F4E6}", "Namespace Distribution", ins.namespaceCount));
+    ln(dim("  How locale keys are distributed across namespaces."));
+    ln();
+    const maxNs = ins.topNamespaces[0]?.count ?? 1;
+    for (const { ns, count } of ins.topNamespaces) {
+      ln("  " + padEnd(c("brightBlue", ns), 26) + " " + miniBar(count, maxNs, 18, "blue") + " " + dim(String(count) + " key" + (count > 1 ? "s" : "")));
+    }
+    if (ins.namespaceCount > ins.topNamespaces.length) {
+      ln("  " + dim(`  \u2026 and ${ins.namespaceCount - ins.topNamespaces.length} more namespaces.`));
+    }
+    ln();
+  }
+  if (ins.topContexts.length > 0) {
+    ln(hr("\u2500"));
+    ln(renderSectionHeader("\u{1F3F7} ", "Text Context Distribution", void 0));
+    ln(dim("  Where hardcoded strings were detected in the AST."));
+    ln();
+    const maxCtx = ins.topContexts[0]?.count ?? 1;
+    for (const { ctx, count } of ins.topContexts) {
+      ln("  " + padEnd(c("brightMagenta", ctx), 26) + " " + miniBar(count, maxCtx, 18, "magenta") + " " + dim(String(count)));
+    }
+    ln();
+  }
+  if (assets.totalAssets > 0 || assets.legacyCdnUrls > 0) {
+    ln(hr("\u2500"));
+    ln(renderSectionHeader("\u{1F4E6}", "CDN Assets", void 0));
+    ln();
+    ln(renderKeyValueSection([
+      ["Total Assets Found", c("brightWhite", fmt(assets.totalAssets))],
+      ["Uploaded to S3/CDN", c("brightGreen", fmt(assets.uploadedAssets))],
+      ["URLs Replaced", c("brightGreen", fmt(assets.replacedUrls))],
+      ["Legacy CDN URLs", assets.legacyCdnUrls > 0 ? c("brightYellow", fmt(assets.legacyCdnUrls)) + dim(" \u2190 run ai-localize replace-cdn") : c("brightGreen", "0")]
+    ]));
+    ln();
+  }
+  const hasInsights = ins.duplicateTextGroups > 0 || ins.topMissingLanguages.length > 0 || unusedKeys > 0;
+  ln(hr("\u2500"));
+  ln(bold(c("brightMagenta", "  \u{1F916}  AI Insights") + dim(" (deterministic analysis)")));
+  ln();
+  if (ins.duplicateTextGroups > 0) {
+    ln("  " + c("brightYellow", "\u26A0 ") + c("yellow", ins.duplicateTextGroups + " duplicate text group" + (ins.duplicateTextGroups > 1 ? "s" : "")) + dim(" \u2014 same string mapped to multiple keys. Consider consolidating."));
+  } else {
+    ln("  " + c("brightGreen", "\u2713 ") + dim("No duplicate texts detected."));
+  }
+  if (missingTranslations > 0) {
+    const langList = ins.topMissingLanguages.slice(0, 3).map((l) => c("brightMagenta", l.lang)).join(", ");
+    ln("  " + c("brightRed", "\u2717 ") + c("red", missingTranslations + " missing translation" + (missingTranslations > 1 ? "s" : "")) + dim(" in: ") + langList + (ins.topMissingLanguages.length > 3 ? dim(" + more") : ""));
+  } else {
+    ln("  " + c("brightGreen", "\u2713 ") + dim("All translations present across all languages."));
+  }
+  if (unusedKeys > 0) {
+    ln("  " + c("brightYellow", "\u26A0 ") + c("yellow", unusedKeys + " unused key" + (unusedKeys > 1 ? "s" : "")) + dim(" bloating your locale bundles."));
+  } else {
+    ln("  " + c("brightGreen", "\u2713 ") + dim("No unused keys \u2014 locale files are lean."));
+  }
+  if (!hasInsights) {
+    ln("  " + c("brightGreen", "\u2713 ") + dim("No issues detected. Your localization is in great shape!"));
+  }
+  ln();
+  ln(hr("\u2550", "cyan"));
+  const covBadge = ins.coveragePct === 100 ? badge2("COVERAGE 100%", true) : ins.coveragePct >= 80 ? c("bgYellow", c("black", ` COVERAGE ${ins.coveragePct}% `)) : badge2(`COVERAGE ${ins.coveragePct}%`, false);
+  const allOk = missingTranslations === 0 && unusedKeys === 0 && hardcodedTexts === 0;
+  const overallBadge = allOk ? badge2("  PASS  ", true) : badge2("  ISSUES ", false);
+  ln(centre(overallBadge + "  " + covBadge));
+  ln();
+  ln(centre(dim("Generated by ") + bold("ai-localize-core") + dim(" \xB7 deterministic, offline-capable i18n tooling")));
+  ln(hr("\u2550", "cyan"));
+  ln();
+  if (!allOk) {
+    ln(bold("  \u26A1 Recommended next steps:"));
+    ln();
+    if (hardcodedTexts > 0) {
+      ln("" + c("cyan", "1.") + " Run " + c("brightCyan", "ai-localize full-migrate") + dim(" to wrap hardcoded strings with translation calls."));
+    }
+    if (missingTranslations > 0) {
+      ln("  " + c("cyan", "2.") + " Run " + c("brightCyan", "ai-localize extract") + dim(" to seed target language files."));
+    }
+    if (unusedKeys > 0) {
+      ln("  " + c("cyan", "3.") + " Run " + c("brightCyan", "ai-localize cleanup") + dim(" to remove unused keys."));
+    }
+    if (assets.legacyCdnUrls > 0) {
+      ln("  " + c("cyan", "4.") + " Run " + c("brightCyan", "ai-localize replace-cdn") + dim(" to migrate legacy CDN URLs to CloudFront."));
+    }
+    ln();
+  }
+  const output = out.join("\n");
+  process.stdout.write(supportsColor() ? output : strip(output));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {