ai-localize-reporting 2.0.1 → 2.0.3

package/preview/make-preview.mjs

@@ -0,0 +1,398 @@
+/**
+ * Standalone preview generator — run with:
+ *   node packages/reporting/preview/make-preview.mjs
+ *
+ * Writes: packages/reporting/preview/report-preview.html
+ * Then opens it in the default browser.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ─── ANSI helpers (for terminal output) ──────────────────────────────────────
+const c = (code, t) => `\x1b[${code}m${t}\x1b[0m`;
+const bold = (t) => c('1', t);
+const cyan = (t) => c('96', t);
+const green = (t) => c('92', t);
+const yellow = (t) => c('93', t);
+const red = (t) => c('91', t);
+const dim = (t) => c('2', t);
+
+// ─── Mock report data ─────────────────────────────────────────────────────────
+const mockReport = {
+  timestamp: new Date().toISOString(),
+  duration: 2340,
+  framework: 'react-vite',
+  filesScanned: 148,
+  hardcodedTexts: 37,
+  localeKeysGenerated: 29,
+  unusedKeys: 4,
+  missingTranslations: 12,
+  languages: ['en', 'fr', 'de', 'es', 'ja'],
+  assets: {
+    totalAssets: 23,
+    uploadedAssets: 18,
+    replacedUrls: 15,
+    legacyCdnUrls: 5,
+  },
+  details: {
+    detectedTexts: [
+      { filePath: '/app/src/components/Button/PrimaryButton.tsx', line: 14, column: 8, text: 'Submit', suggestedKey: 'common.submit', context: 'button', nodeType: 'JSXAttribute', alreadyTranslated: false },
+      { filePath: '/app/src/components/Button/PrimaryButton.tsx', line: 22, column: 12, text: 'Cancel', suggestedKey: 'common.cancel', context: 'button', nodeType: 'JSXAttribute', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Dashboard/Overview.tsx', line: 31, column: 6, text: 'Welcome back!', suggestedKey: 'dashboard.welcomeBack', context: 'heading', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Dashboard/Overview.tsx', line: 45, column: 10, text: 'Total Revenue', suggestedKey: 'dashboard.totalRevenue', context: 'table-header', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Dashboard/Overview.tsx', line: 67, column: 14, text: 'No data available', suggestedKey: 'dashboard.noData', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+   { filePath: '/app/src/components/Modal/ConfirmModal.tsx', line: 8, column: 4, text: 'Are you sure?', suggestedKey: 'modal.confirmTitle', context: 'modal', nodeType: 'JSXText', alreadyTranslated: false },
+    { filePath: '/app/src/components/Modal/ConfirmModal.tsx', line: 19, column: 8, text: 'This action cannot be undone.', suggestedKey: 'modal.confirmBody', context: 'modal', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/Modal/ConfirmModal.tsx', line: 32, column: 12, text: 'Delete', suggestedKey: 'common.delete', context: 'button', nodeType: 'JSXAttribute', alreadyTranslated: false },
+      { filePath: '/app/src/forms/LoginForm.tsx', line: 12, column: 6, text: 'Email address', suggestedKey: 'auth.emailLabel', context: 'label', nodeType: 'JSXText', alreadyTranslated: false },
+  { filePath: '/app/src/forms/LoginForm.tsx', line: 18, column: 6, text: 'Password', suggestedKey: 'auth.passwordLabel', context: 'label', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/forms/LoginForm.tsx', line: 24, column: 10, text: 'Enter your email', suggestedKey: 'auth.emailPlaceholder', context: 'placeholder', nodeType: 'JSXAttribute', alreadyTranslated: false },
+      { filePath: '/app/src/forms/LoginForm.tsx', line: 30, column: 10, text: 'Enter your password', suggestedKey: 'auth.passwordPlaceholder', context: 'placeholder', nodeType: 'JSXAttribute', alreadyTranslated: false },
+    { filePath: '/app/src/forms/LoginForm.tsx', line: 56, column: 8, text: 'Sign in', suggestedKey: 'auth.signIn', context: 'button', nodeType: 'JSXAttribute', alreadyTranslated: false },
+      { filePath: '/app/src/forms/LoginForm.tsx', line: 60, column: 12, text: 'Forgot password?', suggestedKey: 'auth.forgotPassword', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+{ filePath: '/app/src/components/Nav/Sidebar.tsx', line: 22, column: 6, text: 'Dashboard', suggestedKey: 'nav.dashboard', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/Nav/Sidebar.tsx', line: 30, column: 6, text: 'Settings', suggestedKey: 'nav.settings', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/Nav/Sidebar.tsx', line: 38, column: 6, text: 'Users', suggestedKey: 'nav.users', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/Nav/Sidebar.tsx', line: 46, column: 6, text: 'Reports', suggestedKey: 'nav.reports', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/Nav/Sidebar.tsx', line: 54, column: 6, text: 'Log out', suggestedKey: 'nav.logout', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Settings/ProfileSettings.tsx', line: 11, column: 4, text: 'Profile Settings', suggestedKey: 'settings.profileTitle', context: 'heading', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Settings/ProfileSettings.tsx', line: 28, column: 8, text: 'First name', suggestedKey: 'settings.firstName', context: 'label', nodeType: 'JSXText', alreadyTranslated: false },
+   { filePath: '/app/src/pages/Settings/ProfileSettings.tsx', line: 36, column: 8, text: 'Last name', suggestedKey: 'settings.lastName', context: 'label', nodeType: 'JSXText', alreadyTranslated: false },
+ { filePath: '/app/src/pages/Settings/ProfileSettings.tsx', line: 44, column: 8, text: 'Save changes', suggestedKey: 'common.saveChanges', context: 'button', nodeType: 'JSXAttribute', alreadyTranslated: false },
+      { filePath: '/app/src/components/Toast/ToastManager.tsx', line: 9, column: 6, text: 'Changes saved successfully', suggestedKey: 'toast.saveSuccess', context: 'toast', nodeType: 'string-literal', alreadyTranslated: false },
+      { filePath: '/app/src/components/Toast/ToastManager.tsx', line: 15, column: 6, text: 'An error occurred. Please try again.', suggestedKey: 'toast.genericError', context: 'toast', nodeType: 'string-literal', alreadyTranslated: false },
+      { filePath: '/app/src/components/Toast/ToastManager.tsx', line: 21, column: 6, text: 'Network connection lost', suggestedKey: 'toast.networkError', context: 'toast', nodeType: 'string-literal', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Users/UserTable.tsx', line: 17, column: 6, text: 'Name', suggestedKey: 'users.columnName', context: 'table-header', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Users/UserTable.tsx', line: 24, column: 6, text: 'Email', suggestedKey: 'users.columnEmail', context: 'table-header', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Users/UserTable.tsx', line: 31, column: 6, text: 'Role', suggestedKey: 'users.columnRole', context: 'table-header', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Users/UserTable.tsx', line: 38, column: 6, text: 'Status', suggestedKey: 'users.columnStatus', context: 'table-header', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Users/UserTable.tsx', line: 68, column: 10, text: 'No users found', suggestedKey: 'users.emptyState', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+{ filePath: '/app/src/components/Alert/ErrorBanner.tsx', line: 7, column: 4, text: 'Something went wrong', suggestedKey: 'alert.errorTitle', context: 'alert', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/Alert/ErrorBanner.tsx', line: 13, column: 8, text: 'Please refresh the page', suggestedKey: 'alert.refreshHint', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/Tooltip/HelpTooltip.tsx', line: 5, column: 6, text: 'Click for more information', suggestedKey: 'tooltip.helpInfo', context: 'tooltip', nodeType: 'JSXAttribute', alreadyTranslated: false },
+ { filePath: '/app/src/components/DataGrid/DataGrid.tsx', line: 42, column: 8, text: 'Loading data\u2026', suggestedKey: 'grid.loading', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      { filePath: '/app/src/components/DataGrid/DataGrid.tsx', line: 58, column: 8, text: 'No results match your search', suggestedKey: 'grid.noResults', context: 'jsx-text', nodeType: 'JSXText', alreadyTranslated: false },
+      // duplicate text scenarios (Submit/Cancel in a different namespace)
+      { filePath: '/app/src/pages/Reports/ReportHeader.tsx', line: 10, column: 6, text: 'Submit', suggestedKey: 'reports.submit', context: 'button', nodeType: 'JSXAttribute', alreadyTranslated: false },
+      { filePath: '/app/src/pages/Reports/ReportHeader.tsx', line: 22, column: 8, text: 'Cancel', suggestedKey: 'reports.cancel', context: 'button', nodeType: 'JSXAttribute', alreadyTranslated: false },
+    ],
+    missingKeys: [
+{ type: 'missing-key', key: 'common.submit', language: 'fr', message: 'Key missing in fr locale', filePath: '/app/locales/fr/common.json' },
+      { type: 'missing-key', key: 'common.cancel', language: 'fr', message: 'Key missing in fr locale', filePath: '/app/locales/fr/common.json' },
+      { type: 'missing-key', key: 'auth.signIn', language: 'fr', message: 'Key missing in fr locale', filePath: '/app/locales/fr/auth.json' },
+      { type: 'missing-key', key: 'dashboard.welcomeBack', language: 'de', message: 'Key missing in de locale', filePath: '/app/locales/de/dashboard.json' },
+      { type: 'missing-key', key: 'dashboard.totalRevenue', language: 'de', message: 'Key missing in de locale', filePath: '/app/locales/de/dashboard.json' },
+      { type: 'missing-key', key: 'modal.confirmTitle', language: 'de', message: 'Key missing in de locale', filePath: '/app/locales/de/modal.json' },
+      { type: 'missing-key', key: 'modal.confirmBody', language: 'de', message: 'Key missing in de locale', filePath: '/app/locales/de/modal.json' },
+      { type: 'missing-key', key: 'nav.logout', language: 'es', message: 'Key missing in es locale', filePath: '/app/locales/es/nav.json' },
+      { type: 'missing-key', key: 'settings.profileTitle', language: 'es', message: 'Key missing in es locale', filePath: '/app/locales/es/settings.json' },
+      { type: 'missing-key', key: 'toast.genericError', language: 'ja', message: 'Key missing in ja locale', filePath: '/app/locales/ja/toast.json' },
+      { type: 'missing-key', key: 'toast.saveSuccess', language: 'ja', message: 'Key missing in ja locale', filePath: '/app/locales/ja/toast.json' },
+  { type: 'missing-key', key: 'users.emptyState', language: 'ja', message: 'Key missing in ja locale', filePath: '/app/locales/ja/users.json' },
+    ],
+    unusedKeysList: [
+      'common.oldButton',
+      'dashboard.legacyWidget',
+      'auth.ssoLogin',
+      'settings.betaFeature',
+    ],
+    assets: [
+      { localPath: '/app/public/images/logo.png', s3Key: 'assets/images/logo.png', hash: 'abc123', cloudfrontUrl: 'https://d1abc123.cloudfront.net/assets/images/logo.png', contentType: 'image/png', size: 24576 },
+      { localPath: '/app/public/images/hero-banner.webp', s3Key: 'assets/images/hero-banner.webp', hash: 'def456', cloudfrontUrl: 'https://d1abc123.cloudfront.net/assets/images/hero-banner.webp', contentType: 'image/webp', size: 102400 },
+      { localPath: '/app/public/fonts/Inter-Regular.woff2', s3Key: 'assets/fonts/Inter-Regular.woff2', hash: 'ghi789', cloudfrontUrl: 'https://d1abc123.cloudfront.net/assets/fonts/Inter-Regular.woff2', contentType: 'font/woff2', size: 65536 },
+   { localPath: '/app/public/fonts/Inter-Bold.woff2', s3Key: 'assets/fonts/Inter-Bold.woff2', hash: 'jkl012', cloudfrontUrl: 'https://d1abc123.cloudfront.net/assets/fonts/Inter-Bold.woff2', contentType: 'font/woff2', size: 69120 },
+      { localPath: '/app/public/icons/favicon.svg', s3Key: 'assets/icons/favicon.svg', hash: 'mno345', cloudfrontUrl: 'https://d1abc123.cloudfront.net/assets/icons/favicon.svg', contentType: 'image/svg+xml', size: 4096 },
+      { localPath: '/app/public/videos/onboarding.mp4', s3Key: 'assets/videos/onboarding.mp4', hash: 'pqr678', cloudfrontUrl: 'https://d1abc123.cloudfront.net/assets/videos/onboarding.mp4', contentType: 'video/mp4', size: 5242880 },
+    ],
+  },
+};
+
+// ─── Inline the reporter logic ────────────────────────────────────────────────
+// We duplicate the buildHtml logic here as pure JS so we don't need TS compilation.
+
+function esc(s) {
+  return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '&#34;').replace(/'/g, ''');
+}
+function escJs(s) {
+  return s.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '');
+}
+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 = new Map();
+  for (const dt of details.detectedTexts) {
+    const t = dt.text.trim();
+    if (!textMap.has(t)) textMap.set(t, { keys: new Set(), files: new Set() });
+    textMap.get(t).keys.add(dt.suggestedKey);
+    textMap.get(t).files.add(dt.filePath);
+  }
+  const duplicates = [];
+  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 = new Map();
+  for (const dt of details.detectedTexts) {
+    if (!keyTextMap.has(dt.suggestedKey)) keyTextMap.set(dt.suggestedKey, new Set());
+    keyTextMap.get(dt.suggestedKey).add(dt.text.trim());
+  }
+  let duplicateKeyCount = 0;
+  for (const [, texts] of keyTextMap) { if (texts.size > 1) duplicateKeyCount++; }
+
+  const byLang = 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 = 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) — 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);
+  return `<div class="bar-chart">${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('')}</div>`;
+}
+
+function buildSearchableTable(tableId, columns, rows, pageSize = 50) {
+  const thead = columns.map((col) =>
+    `<th data-col="${col.key}" ${col.sortable !== false ? `onclick="sortTable('${tableId}', '${col.key}')" class="sortable"` : ''} ${col.width ? `style="width:${col.width}"` : ''}>${col.label}${col.sortable !== false ? ' <span class="sort-icon">&#8597;</span>' : ''}</th>`
+  ).join('');
+  const tbody = rows.map((cells) =>
+    `<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&hellip;" 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 { timestamp, framework, duration, filesScanned, hardcodedTexts,
+localeKeysGenerated, unusedKeys, missingTranslations, assets, details } = report;
+  const scanDate = new Date(timestamp).toLocaleString();
+  const ins = computeInsights(report);
+
+  const coverageDonut = buildCoverageDonut(ins.coveragePct);
+
+  const nsCounts = new Map();
+  for (const dt of details.detectedTexts) {
+    const ns = dt.suggestedKey.split('.')[0] || 'default';
+    nsCounts.set(ns, (nsCounts.get(ns) || 0) + 1);
+  }
+  const nsChart = buildBarChart([...nsCounts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10).map(([label, value]) => ({ label, value })));
+
+  const ctxCounts = new Map();
+  for (const dt of details.detectedTexts) ctxCounts.set(dt.context, (ctxCounts.get(dt.context) || 0) + 1);
+  const ctxChart = buildBarChart([...ctxCounts.entries()].sort((a, b) => b[1] - a[1]).map(([label, value]) => ({ label, value })));
+
+  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(ins.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(ins.duplicateKeyCount, 'Duplicate Keys', 'Same key maps to different texts', ins.duplicateKeyCount > 0 ? 'warn' : 'ok', '&#128258;')}
+    ${buildStatCard(ins.coveragePct + '%', 'Translation Coverage', '% of keys present in all languages', ins.coveragePct < 80 ? 'err' : ins.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 ? '&hellip;' : ''}</span>`,
+    `<code class="key-code">${esc(t.suggestedKey)}</code>`,
+    badge(t.context, 'blue'),
+    badge(t.nodeType, 'grey'),
+  ]);
+
+  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)
+    : '<div class="empty-state-card">&#9989; No hardcoded texts detected.</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 = 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 translations present.</div>';
+  } else {
+    const missingTableRows = details.missingKeys.map((e) => [
+      `<code class="key-code">${esc(e.key)}</code>`,
+      e.language ? badge(e.language, 'red') : '&mdash;',
+      e.filePath ? `<code class="path-code">${esc(e.filePath)}</code>` : '&mdash;',
+      `<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.
+   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.</div>'
+    : `<div class="insight-legend">
+ Translation keys that exist in locale JSON files but are <strong>not referenced</strong> anywhere in scanned source code.
+        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 ? '&hellip;' : ''}</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.</div>'
+    }`;
+
+  // Insights
+  const dupTextContent = ins.duplicates.length === 0
+    ? '<div class="insight-item insight-ok">&#9989; No duplicate texts detected.</div>'
+    : `<div class="insight-legend">Same text found mapped