ai-localize-reporting 2.0.5 → 2.0.7

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # ai-localize-reporting
 
+## 2.0.7
+
+### Minor Changes
+
+- **HTML report UI refinements** (9 fixes):
+  - Accordion chevron now rotates correctly on expand/collapse (CSS `transform` fix).
+  - Translation coverage % in the stat card now shows the correct rounded integer.
+  - Filter input and pagination controls are now visible and functional on all tables.
+  - Language filter chips on the Missing Translations table now toggle correctly.
+  - Keyboard shortcut hint (`Cmd+D` / `Ctrl+D`) for dark-mode toggle is now displayed.
+  - Mobile sidebar collapses automatically after a nav link is clicked.
+  - Print/PDF CSS hides interactive controls and expands all accordions.
+  - Stat card hover-lift animation no longer causes layout shift on Safari.
+  - CSV/JSON export buttons now correctly serialise filtered (not full) table data.
+- **91 new tests** — 58 `html-reporter` tests + 33 `cli-reporter` tests covering all
+  major rendering paths, edge cases, and the new UI fixes.
+- **CLI reporter circular next-steps fix** — the "Recommended next steps" list no longer
+  repeats the same step in a loop when all checks pass.
+
+### Patch Changes
+
+- Added `repository`, `homepage`, `bugs`, `author` fields to `package.json` for npm registry display.
+- Added `sideEffects: false` to enable tree-shaking in bundlers.
+- Added `prepublishOnly` script to ensure the package is built before publishing.
+
+## 2.0.6
+
+### Patch Changes
+
+- Add per-package README.md files so each package displays documentation on npmjs.com
+- Update README version badge to 2.0.6
+
 ## 2.0.5
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-2026 ai-localize-core contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,77 @@
+# ai-localize-reporting
+
+> HTML analytics dashboard + rich CLI terminal reporter for the [ai-localize-core](https://github.com/ai-localize/ai-localize-core) platform.
+
+[![npm version](https://img.shields.io/npm/v/ai-localize-reporting.svg)](https://www.npmjs.com/package/ai-localize-reporting)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+
+---
+
+## What it does
+
+- **`buildReport()`** — assembles a `Report` object from scan + validation results
+- **`generateHtmlReport()`** — writes a self-contained, interactive HTML analytics dashboard
+- **`printCliSummary()`** — prints a rich structured terminal summary with ANSI colour, bar charts, and tables
+
+## Installation
+
+```bash
+npm install ai-localize-reporting
+```
+
+## Usage
+
+```ts
+import { buildReport, generateHtmlReport, printCliSummary } from 'ai-localize-reporting';
+
+const report = buildReport({
+  scanResult,
+  validationResult,
+  uploadedAssets,   // optional
+  replacedUrls,     // optional
+});
+
+// Write HTML dashboard
+generateHtmlReport(report, './.reports/report.html');
+
+// Print terminal summary
+printCliSummary(report);
+```
+
+## HTML report features
+
+- **Sticky sidebar navigation** with active section highlighting and alert indicators
+- **Light / dark theme** — system preference, `localStorage`, `Cmd+D` / `Ctrl+D` shortcut
+- **9 stat cards** — top-border colour coding (ok / warn / error / info)
+- **SVG donut chart** — translation coverage % (no external dependencies)
+- **Bar charts** — keys by namespace, texts by AST context
+- **Interactive tables** — search, sort, CSV/JSON export, pagination (50 rows/page)
+- **AI Insights** (100% deterministic) — duplicate text detection, translation inconsistency, unused keys, namespace cleanup hints
+- **Export panel** — full report JSON, summary CSV, print/PDF
+- **Responsive + accessible** — ARIA roles, keyboard navigation, mobile sidebar
+
+## CLI terminal summary features
+
+- **Zero new dependencies** — all ANSI codes inlined; `NO_COLOR` env var respected
+- **Full-width banner** with centred title
+- **9 stat lines** with status dots (green/yellow/red) and contextual hints
+- **Coverage progress bar** (24-block, colour-coded)
+- **Top-files bar chart**, missing-translations ranking, namespace distribution, AST context distribution
+- **AI Insights block** and recommended next steps
+- **Responsive width** — reads `process.stdout.columns`, caps at 120 chars
+
+## Coverage calculation (v2.0.5+)
+
+Coverage % is computed using **distinct missing key names** (not raw per-language count), so it correctly reflects the fraction of unique keys that have been translated:
+
+```
+coverage = (totalUniqueKeys - distinctMissingKeys) / totalUniqueKeys × 100
+```
+
+---
+
+## Part of ai-localize-core
+
+Install the CLI for the complete toolset: `npm install -g ai-localize-cli`
+
+MIT © ai-localize-core contributors

package/dist/index.js

@@ -135,15 +135,16 @@ function computeInsights(report) {
     }
   }
   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;
+  const distinctMissingKeys = new Set(details.missingKeys.map((mk) => mk.key)).size;
+  const coveredKeys = Math.max(0, totalKeys - distinctMissingKeys);
+  const coveragePct = totalKeys > 0 ? Math.round(coveredKeys / 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>
+    <span class="nav-count">${count}</span>
   </a>`;
 }
 function buildStatCard(value, label, hint, status, icon) {
@@ -156,15 +157,15 @@ function buildStatCard(value, label, hint, status, icon) {
 }
 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>
+    <button class="accordion-trigger" aria-expanded="${open ? "true" : "false"}" aria-controls="panel-${id}" onclick="toggleAccordion('${escJs(id)}')">
+      <span class="accordion-icon severity-${severity}" aria-hidden="true">&#9679;</span>
       <span class="accordion-title">${title}</span>
-<span class="accordion-subtitle">${subtitle}</span>
-      <span class="accordion-chevron">&#8964;</span>
+      <span class="accordion-subtitle">${subtitle}</span>
+      <span class="accordion-chevron" aria-hidden="true">&#9660;</span>
     </button>
-    <div class="accordion-panel" id="panel-${id}" role="region" ${open ? "" : "hidden"}>
+    <div class="accordion-panel" id="panel-${id}" role="region" aria-labelledby="acc-${id}"${open ? "" : " hidden"}>
       <div class="accordion-body">${content}</div>
-  </div>
+    </div>
   </div>`;
 }
 function buildCoverageDonut(pct) {
@@ -304,13 +305,17 @@ function buildHtml(report) {
       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(" ");
+    const langChips = [...missingByLang.entries()].map(([lang, keys]) => `<button class="chip chip-red" onclick="applyLangFilter('${escJs(lang)}')" aria-label="Filter by ${esc(lang)}">${esc(lang)} <strong>${keys.length}</strong></button>`).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>
+      <div class="chip-row">
+        <span class="chip-label">Filter by language:</span>
+        ${langChips}
+        <button class="chip chip-clear" onclick="applyLangFilter('')" aria-label="Clear language filter">&#10005; Clear</button>
+      </div>
       ${buildSearchableTable("tbl-missing", [
       { key: "key", label: "Key" },
       { key: "language", label: "Language", width: "100px" },
@@ -477,7 +482,7 @@ ${nav}
     <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-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>
@@ -492,11 +497,11 @@ ${nav}
   <!-- Summary -->
   <section id="overview" class="section">
     <div class="section-title-row">
-    <h2 class="section-title">&#128202; Summary</h2>
+      <h2 class="section-title">&#128202; Summary</h2>
     </div>
     ${summaryCards}
     ${diffExplainer}
-</section>
+  </section>
 
   <!-- Charts -->
   <section id="charts" class="section">
@@ -553,7 +558,7 @@ ${nav}
 
   <!-- Assets -->
   <section id="assets" class="section">
-  <div class="section-title-row">
+    <div class="section-title-row">
       <h2 class="section-title">&#128230; CDN Assets <span class="section-count count-neutral">${assets.totalAssets}</span></h2>
     </div>
     ${buildAccordion(
@@ -564,7 +569,7 @@ ${nav}
     false,
     assets.legacyCdnUrls > 0 ? "warn" : "ok"
   )}
-</section>
+  </section>
 
   <!-- AI Insights -->
   <section id="insights" class="section">
@@ -579,6 +584,9 @@ ${nav}
 
   <footer class="page-footer">
     Generated by <strong>ai-localize-core</strong> &mdash; deterministic, offline-capable i18n tooling &mdash; ${scanDate}
+    <span class="footer-shortcuts" aria-label="Keyboard shortcuts">
+      <kbd>Esc</kbd> clear search &nbsp;&bull;&nbsp; <kbd>Cmd+D</kbd> toggle theme &nbsp;&bull;&nbsp; <kbd>Tab</kbd> navigate
+    </span>
   </footer>
 </main>
 
@@ -653,10 +661,14 @@ function JS(report, insights) {
   // \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]');
+  // Use 120px offset to account for sticky table headers and give visual lead-time
+  var NAV_OFFSET = 120;
   function onScroll() {
-var scrollY = window.scrollY + 80;
+    var scrollY = window.scrollY + NAV_OFFSET;
     var current = '';
-    sections.forEach(function(s) { if (scrollY >= s.offsetTop) current = s.id; });
+    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);
     });
@@ -668,10 +680,18 @@ var scrollY = window.scrollY + 80;
   window.toggleAccordion = function(id) {
     var acc = document.getElementById('acc-' + id);
     var panel = document.getElementById('panel-' + id);
+    if (!acc || !panel) return;
     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', '');
+    var isOpen = acc.classList.contains('accordion-open');
+    if (isOpen) {
+      acc.classList.remove('accordion-open');
+      btn.setAttribute('aria-expanded', 'false');
+      panel.setAttribute('hidden', '');
+    } else {
+      acc.classList.add('accordion-open');
+      btn.setAttribute('aria-expanded', 'true');
+      panel.removeAttribute('hidden');
+    }
   };
   window.expandAll = function() {
     document.querySelectorAll('.accordion').forEach(function(acc) {
@@ -679,7 +699,7 @@ var scrollY = window.scrollY + 80;
       var panel = document.getElementById('panel-' + id);
       var btn = acc.querySelector('.accordion-trigger');
       acc.classList.add('accordion-open');
-      btn.setAttribute('aria-expanded', 'true');
+      if (btn) btn.setAttribute('aria-expanded', 'true');
       if (panel) panel.removeAttribute('hidden');
     });
   };
@@ -687,30 +707,40 @@ var scrollY = window.scrollY + 80;
     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');
+      var btn = acc.querySelector('.accordion-trigger');
+      acc.classList.remove('accordion-open');
+      if (btn) 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
+  // \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
+  // Mark rows with data-filtered attribute instead of display:none so that
+  // renderPagination can independently control visibility for pagination.
   window.filterTable = function(tableId, query) {
     var tbl = document.getElementById(tableId);
     if (!tbl) return;
-    var q = query.toLowerCase();
+    var q = (query || '').toLowerCase().trim();
     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++;
+      if (q === '' || row.textContent.toLowerCase().indexOf(q) !== -1) {
+        row.removeAttribute('data-filtered');
+      } else {
+        row.setAttribute('data-filtered', '1');
+      }
     });
-    var meta = document.getElementById(tableId + '-meta');
-    if (meta) meta.textContent = shown + ' / ' + rows.length + ' rows';
+    // Reset to page 1 whenever filter changes
+    tbl.setAttribute('data-page', '1');
     renderPagination(tableId);
   };
 
+  // \u2500\u2500 Language chip filter (syncs search-box input + resets page) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  window.applyLangFilter = function(lang) {
+    var inp = document.querySelector('#tbl-missing-wrapper .table-search');
+    if (inp) inp.value = lang;
+    window.filterTable('tbl-missing', lang);
+  };
+
   // \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) {
@@ -721,39 +751,52 @@ var scrollY = window.scrollY + 80;
     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');
+      var icon = th.querySelector('.sort-icon');
+      if (icon) icon.textContent = '\\u21C5';
     });
-  if (colIndex === -1) return;
+    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');
+    if (th) {
+      var icon = th.querySelector('.sort-icon');
+      if (icon) 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 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);
+    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
+  // Reads data-filtered attribute set by filterTable; does not conflict with
+  // filter visibility since rows are never hidden by this function until
+  // it has determined which rows belong to the current page.
   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 allRows = Array.from(tbl.querySelectorAll('tbody tr'));
+    // Rows that passed the current filter
+    var visibleRows = allRows.filter(function(r) { return !r.hasAttribute('data-filtered'); });
+    var total = visibleRows.length;
+    var pages = Math.max(1, 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 (page < 1) page = 1;
+    tbl.setAttribute('data-page', String(page));
+    // First hide all rows, then show only the current page slice of visible rows
+    allRows.forEach(function(r) { r.style.display = 'none'; });
+    var startIdx = (page - 1) * pageSize;
+    visibleRows.forEach(function(r, i) {
+      if (i >= startIdx && i < startIdx + pageSize) r.style.display = '';
     });
     if (meta) meta.textContent = total + ' row' + (total !== 1 ? 's' : '');
     pag.innerHTML = '';
@@ -763,13 +806,13 @@ renderPagination(tableId);
       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); };
+      b.onclick = function() { tbl.setAttribute('data-page', String(p)); renderPagination(tableId); };
       return b;
     }
-  pag.appendChild(btn('\\u00AB', 1, false, page === 1));
+    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));
+    var winStart = Math.max(1, page - 2), winEnd = Math.min(pages, page + 2);
+    for (var i = winStart; i <= winEnd; 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');
@@ -877,21 +920,33 @@ renderPagination(tableId);
 
   function downloadFile(filename, content, mimeType) {
     var a = document.createElement('a');
-  a.href = URL.createObjectURL(new Blob([content], { type: mimeType }));
+    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
+  // Escape: clear all table search inputs and reset filters
+  // Cmd/Ctrl+D: toggle dark/light theme
   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, ''); });
+      document.querySelectorAll('.table-search').forEach(function(inp) {
+        var wrapper = inp.closest('.table-wrapper');
+        if (!wrapper) return;
+        var tbl = wrapper.querySelector('table');
+        if (!tbl) return;
+        inp.value = '';
+        window.filterTable(tbl.id, '');
+      });
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
+      e.preventDefault();
+      window.toggleTheme();
     }
- 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
+  // \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();
@@ -1238,10 +1293,12 @@ padding: 6px 16px 3px;
 }
 .accordion-subtitle { font-size: 12px; color: var(--text-muted); margin-right: 12px; }
 .accordion-chevron {
-  font-size: 18px;
+  font-size: 14px;
   color: var(--text-muted);
   transition: transform var(--transition);
+  display: inline-block;
 }
+/* \u25BE (&#9660;) points down by default; rotates to \u25B4 when open */
 .accordion-open .accordion-chevron { transform: rotate(180deg); }
 .accordion-panel { border-top: 1px solid var(--border); }
 .accordion-body { padding: 18px; }
@@ -1311,15 +1368,20 @@ border-radius: var(--radius);
 
 /* \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-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
 .chip {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 3px 10px; border-radius: 14px;
-font-size: 12px; font-weight: 600;
+  font-size: 12px; font-weight: 600;
   cursor: pointer; border: 1px solid transparent;
-  transition: box-shadow var(--transition);
+  transition: box-shadow var(--transition), background var(--transition);
+  font-family: var(--font);
 }
 .chip:hover { box-shadow: 0 0 0 2px var(--accent); }
+.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .chip-red { background: #fee2e2; color: #991b1b; }
+.chip-clear { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
+.chip-clear:hover { background: var(--border); box-shadow: none; }
 [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 */
@@ -1586,25 +1648,57 @@ font-size: 12px;
   font-size: 12px;
   color: var(--text-subtle);
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.footer-shortcuts { font-size: 11px; color: var(--text-subtle); }
+kbd {
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  color: var(--text-muted);
+  white-space: nowrap;
 }
 
 /* \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; }
+  /* Force accordion panels visible \u2014 the hidden attribute needs !important override */
+  .accordion-panel { display: block !important; visibility: visible !important; }
+  .accordion-panel[hidden] { display: block !important; visibility: visible !important; }
   .stat-card, .chart-card, .accordion, .table-wrapper { break-inside: avoid; }
   body { background: white; color: black; }
+  a { color: inherit; text-decoration: none; }
 }
 
-/* \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 */
+/* \u2500\u2500 Responsive / Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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); }
+  /* On mobile the sidebar becomes an in-flow top-bar, not fixed/absolute */
+  .sidebar {
+    position: relative;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    flex-direction: column;
+  }
+  .nav-group { display: flex; flex-wrap: wrap; padding: 4px 8px; border-bottom: none; }
+  .nav-group-label { width: 100%; padding: 4px 8px 2px; }
+  .nav-item { padding: 6px 10px; border-radius: var(--radius-sm); }
   .main { margin-left: 0; padding: 16px; }
   .stats-grid { grid-template-columns: repeat(2, 1fr); }
   .insights-grid { grid-template-columns: 1fr; }
+  .charts-grid { grid-template-columns: 1fr; }
   .page-header { flex-direction: column; }
   .theme-toggle { top: 8px; right: 8px; }
 }
@@ -2050,21 +2144,33 @@ function printCliSummary(report) {
   ln(centre(dim("Generated by ") + bold("ai-localize-core") + dim(" \xB7 deterministic, offline-capable i18n tooling")));
   ln(hr("\u2550", "cyan"));
   ln();
-  if (!allOk) {
+  const nextSteps = [];
+  if (hardcodedTexts > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize scan") + dim(" then ") + c("brightCyan", "ai-localize extract") + dim(" to wrap hardcoded strings and generate locale keys.")
+    );
+  }
+  if (missingTranslations > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize extract") + dim(" to seed missing translations in target language files.")
+    );
+  }
+  if (unusedKeys > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize cleanup") + dim(" to remove unused keys from locale files.")
+    );
+  }
+  if (assets.legacyCdnUrls > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize replace-cdn") + dim(" to migrate legacy CDN URLs to CloudFront.")
+    );
+  }
+  if (nextSteps.length > 0) {
     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."));
-    }
+    nextSteps.forEach((step, i) => {
+      ln("  " + c("cyan", String(i + 1) + ".") + " " + step);
+    });
     ln();
   }
   const output = out.join("\n");

package/dist/index.mjs

@@ -97,15 +97,16 @@ function computeInsights(report) {
     }
   }
   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;
+  const distinctMissingKeys = new Set(details.missingKeys.map((mk) => mk.key)).size;
+  const coveredKeys = Math.max(0, totalKeys - distinctMissingKeys);
+  const coveragePct = totalKeys > 0 ? Math.round(coveredKeys / 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>
+    <span class="nav-count">${count}</span>
   </a>`;
 }
 function buildStatCard(value, label, hint, status, icon) {
@@ -118,15 +119,15 @@ function buildStatCard(value, label, hint, status, icon) {
 }
 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>
+    <button class="accordion-trigger" aria-expanded="${open ? "true" : "false"}" aria-controls="panel-${id}" onclick="toggleAccordion('${escJs(id)}')">
+      <span class="accordion-icon severity-${severity}" aria-hidden="true">&#9679;</span>
       <span class="accordion-title">${title}</span>
-<span class="accordion-subtitle">${subtitle}</span>
-      <span class="accordion-chevron">&#8964;</span>
+      <span class="accordion-subtitle">${subtitle}</span>
+      <span class="accordion-chevron" aria-hidden="true">&#9660;</span>
     </button>
-    <div class="accordion-panel" id="panel-${id}" role="region" ${open ? "" : "hidden"}>
+    <div class="accordion-panel" id="panel-${id}" role="region" aria-labelledby="acc-${id}"${open ? "" : " hidden"}>
       <div class="accordion-body">${content}</div>
-  </div>
+    </div>
   </div>`;
 }
 function buildCoverageDonut(pct) {
@@ -266,13 +267,17 @@ function buildHtml(report) {
       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(" ");
+    const langChips = [...missingByLang.entries()].map(([lang, keys]) => `<button class="chip chip-red" onclick="applyLangFilter('${escJs(lang)}')" aria-label="Filter by ${esc(lang)}">${esc(lang)} <strong>${keys.length}</strong></button>`).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>
+      <div class="chip-row">
+        <span class="chip-label">Filter by language:</span>
+        ${langChips}
+        <button class="chip chip-clear" onclick="applyLangFilter('')" aria-label="Clear language filter">&#10005; Clear</button>
+      </div>
       ${buildSearchableTable("tbl-missing", [
       { key: "key", label: "Key" },
       { key: "language", label: "Language", width: "100px" },
@@ -439,7 +444,7 @@ ${nav}
     <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-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>
@@ -454,11 +459,11 @@ ${nav}
   <!-- Summary -->
   <section id="overview" class="section">
     <div class="section-title-row">
-    <h2 class="section-title">&#128202; Summary</h2>
+      <h2 class="section-title">&#128202; Summary</h2>
     </div>
     ${summaryCards}
     ${diffExplainer}
-</section>
+  </section>
 
   <!-- Charts -->
   <section id="charts" class="section">
@@ -515,7 +520,7 @@ ${nav}
 
   <!-- Assets -->
   <section id="assets" class="section">
-  <div class="section-title-row">
+    <div class="section-title-row">
       <h2 class="section-title">&#128230; CDN Assets <span class="section-count count-neutral">${assets.totalAssets}</span></h2>
     </div>
     ${buildAccordion(
@@ -526,7 +531,7 @@ ${nav}
     false,
     assets.legacyCdnUrls > 0 ? "warn" : "ok"
   )}
-</section>
+  </section>
 
   <!-- AI Insights -->
   <section id="insights" class="section">
@@ -541,6 +546,9 @@ ${nav}
 
   <footer class="page-footer">
     Generated by <strong>ai-localize-core</strong> &mdash; deterministic, offline-capable i18n tooling &mdash; ${scanDate}
+    <span class="footer-shortcuts" aria-label="Keyboard shortcuts">
+      <kbd>Esc</kbd> clear search &nbsp;&bull;&nbsp; <kbd>Cmd+D</kbd> toggle theme &nbsp;&bull;&nbsp; <kbd>Tab</kbd> navigate
+    </span>
   </footer>
 </main>
 
@@ -615,10 +623,14 @@ function JS(report, insights) {
   // \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]');
+  // Use 120px offset to account for sticky table headers and give visual lead-time
+  var NAV_OFFSET = 120;
   function onScroll() {
-var scrollY = window.scrollY + 80;
+    var scrollY = window.scrollY + NAV_OFFSET;
     var current = '';
-    sections.forEach(function(s) { if (scrollY >= s.offsetTop) current = s.id; });
+    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);
     });
@@ -630,10 +642,18 @@ var scrollY = window.scrollY + 80;
   window.toggleAccordion = function(id) {
     var acc = document.getElementById('acc-' + id);
     var panel = document.getElementById('panel-' + id);
+    if (!acc || !panel) return;
     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', '');
+    var isOpen = acc.classList.contains('accordion-open');
+    if (isOpen) {
+      acc.classList.remove('accordion-open');
+      btn.setAttribute('aria-expanded', 'false');
+      panel.setAttribute('hidden', '');
+    } else {
+      acc.classList.add('accordion-open');
+      btn.setAttribute('aria-expanded', 'true');
+      panel.removeAttribute('hidden');
+    }
   };
   window.expandAll = function() {
     document.querySelectorAll('.accordion').forEach(function(acc) {
@@ -641,7 +661,7 @@ var scrollY = window.scrollY + 80;
       var panel = document.getElementById('panel-' + id);
       var btn = acc.querySelector('.accordion-trigger');
       acc.classList.add('accordion-open');
-      btn.setAttribute('aria-expanded', 'true');
+      if (btn) btn.setAttribute('aria-expanded', 'true');
       if (panel) panel.removeAttribute('hidden');
     });
   };
@@ -649,30 +669,40 @@ var scrollY = window.scrollY + 80;
     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');
+      var btn = acc.querySelector('.accordion-trigger');
+      acc.classList.remove('accordion-open');
+      if (btn) 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
+  // \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
+  // Mark rows with data-filtered attribute instead of display:none so that
+  // renderPagination can independently control visibility for pagination.
   window.filterTable = function(tableId, query) {
     var tbl = document.getElementById(tableId);
     if (!tbl) return;
-    var q = query.toLowerCase();
+    var q = (query || '').toLowerCase().trim();
     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++;
+      if (q === '' || row.textContent.toLowerCase().indexOf(q) !== -1) {
+        row.removeAttribute('data-filtered');
+      } else {
+        row.setAttribute('data-filtered', '1');
+      }
     });
-    var meta = document.getElementById(tableId + '-meta');
-    if (meta) meta.textContent = shown + ' / ' + rows.length + ' rows';
+    // Reset to page 1 whenever filter changes
+    tbl.setAttribute('data-page', '1');
     renderPagination(tableId);
   };
 
+  // \u2500\u2500 Language chip filter (syncs search-box input + resets page) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  window.applyLangFilter = function(lang) {
+    var inp = document.querySelector('#tbl-missing-wrapper .table-search');
+    if (inp) inp.value = lang;
+    window.filterTable('tbl-missing', lang);
+  };
+
   // \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) {
@@ -683,39 +713,52 @@ var scrollY = window.scrollY + 80;
     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');
+      var icon = th.querySelector('.sort-icon');
+      if (icon) icon.textContent = '\\u21C5';
     });
-  if (colIndex === -1) return;
+    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');
+    if (th) {
+      var icon = th.querySelector('.sort-icon');
+      if (icon) 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 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);
+    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
+  // Reads data-filtered attribute set by filterTable; does not conflict with
+  // filter visibility since rows are never hidden by this function until
+  // it has determined which rows belong to the current page.
   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 allRows = Array.from(tbl.querySelectorAll('tbody tr'));
+    // Rows that passed the current filter
+    var visibleRows = allRows.filter(function(r) { return !r.hasAttribute('data-filtered'); });
+    var total = visibleRows.length;
+    var pages = Math.max(1, 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 (page < 1) page = 1;
+    tbl.setAttribute('data-page', String(page));
+    // First hide all rows, then show only the current page slice of visible rows
+    allRows.forEach(function(r) { r.style.display = 'none'; });
+    var startIdx = (page - 1) * pageSize;
+    visibleRows.forEach(function(r, i) {
+      if (i >= startIdx && i < startIdx + pageSize) r.style.display = '';
     });
     if (meta) meta.textContent = total + ' row' + (total !== 1 ? 's' : '');
     pag.innerHTML = '';
@@ -725,13 +768,13 @@ renderPagination(tableId);
       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); };
+      b.onclick = function() { tbl.setAttribute('data-page', String(p)); renderPagination(tableId); };
       return b;
     }
-  pag.appendChild(btn('\\u00AB', 1, false, page === 1));
+    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));
+    var winStart = Math.max(1, page - 2), winEnd = Math.min(pages, page + 2);
+    for (var i = winStart; i <= winEnd; 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');
@@ -839,21 +882,33 @@ renderPagination(tableId);
 
   function downloadFile(filename, content, mimeType) {
     var a = document.createElement('a');
-  a.href = URL.createObjectURL(new Blob([content], { type: mimeType }));
+    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
+  // Escape: clear all table search inputs and reset filters
+  // Cmd/Ctrl+D: toggle dark/light theme
   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, ''); });
+      document.querySelectorAll('.table-search').forEach(function(inp) {
+        var wrapper = inp.closest('.table-wrapper');
+        if (!wrapper) return;
+        var tbl = wrapper.querySelector('table');
+        if (!tbl) return;
+        inp.value = '';
+        window.filterTable(tbl.id, '');
+      });
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
+      e.preventDefault();
+      window.toggleTheme();
     }
- 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
+  // \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();
@@ -1200,10 +1255,12 @@ padding: 6px 16px 3px;
 }
 .accordion-subtitle { font-size: 12px; color: var(--text-muted); margin-right: 12px; }
 .accordion-chevron {
-  font-size: 18px;
+  font-size: 14px;
   color: var(--text-muted);
   transition: transform var(--transition);
+  display: inline-block;
 }
+/* \u25BE (&#9660;) points down by default; rotates to \u25B4 when open */
 .accordion-open .accordion-chevron { transform: rotate(180deg); }
 .accordion-panel { border-top: 1px solid var(--border); }
 .accordion-body { padding: 18px; }
@@ -1273,15 +1330,20 @@ border-radius: var(--radius);
 
 /* \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-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
 .chip {
   display: inline-flex; align-items: center; gap: 4px;
   padding: 3px 10px; border-radius: 14px;
-font-size: 12px; font-weight: 600;
+  font-size: 12px; font-weight: 600;
   cursor: pointer; border: 1px solid transparent;
-  transition: box-shadow var(--transition);
+  transition: box-shadow var(--transition), background var(--transition);
+  font-family: var(--font);
 }
 .chip:hover { box-shadow: 0 0 0 2px var(--accent); }
+.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .chip-red { background: #fee2e2; color: #991b1b; }
+.chip-clear { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }
+.chip-clear:hover { background: var(--border); box-shadow: none; }
 [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 */
@@ -1548,25 +1610,57 @@ font-size: 12px;
   font-size: 12px;
   color: var(--text-subtle);
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.footer-shortcuts { font-size: 11px; color: var(--text-subtle); }
+kbd {
+  display: inline-block;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  color: var(--text-muted);
+  white-space: nowrap;
 }
 
 /* \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; }
+  /* Force accordion panels visible \u2014 the hidden attribute needs !important override */
+  .accordion-panel { display: block !important; visibility: visible !important; }
+  .accordion-panel[hidden] { display: block !important; visibility: visible !important; }
   .stat-card, .chart-card, .accordion, .table-wrapper { break-inside: avoid; }
   body { background: white; color: black; }
+  a { color: inherit; text-decoration: none; }
 }
 
-/* \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 */
+/* \u2500\u2500 Responsive / Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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); }
+  /* On mobile the sidebar becomes an in-flow top-bar, not fixed/absolute */
+  .sidebar {
+    position: relative;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+    flex-direction: column;
+  }
+  .nav-group { display: flex; flex-wrap: wrap; padding: 4px 8px; border-bottom: none; }
+  .nav-group-label { width: 100%; padding: 4px 8px 2px; }
+  .nav-item { padding: 6px 10px; border-radius: var(--radius-sm); }
   .main { margin-left: 0; padding: 16px; }
   .stats-grid { grid-template-columns: repeat(2, 1fr); }
   .insights-grid { grid-template-columns: 1fr; }
+  .charts-grid { grid-template-columns: 1fr; }
   .page-header { flex-direction: column; }
   .theme-toggle { top: 8px; right: 8px; }
 }
@@ -2012,21 +2106,33 @@ function printCliSummary(report) {
   ln(centre(dim("Generated by ") + bold("ai-localize-core") + dim(" \xB7 deterministic, offline-capable i18n tooling")));
   ln(hr("\u2550", "cyan"));
   ln();
-  if (!allOk) {
+  const nextSteps = [];
+  if (hardcodedTexts > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize scan") + dim(" then ") + c("brightCyan", "ai-localize extract") + dim(" to wrap hardcoded strings and generate locale keys.")
+    );
+  }
+  if (missingTranslations > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize extract") + dim(" to seed missing translations in target language files.")
+    );
+  }
+  if (unusedKeys > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize cleanup") + dim(" to remove unused keys from locale files.")
+    );
+  }
+  if (assets.legacyCdnUrls > 0) {
+    nextSteps.push(
+      "Run " + c("brightCyan", "ai-localize replace-cdn") + dim(" to migrate legacy CDN URLs to CloudFront.")
+    );
+  }
+  if (nextSteps.length > 0) {
     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."));
-    }
+    nextSteps.forEach((step, i) => {
+      ln("  " + c("cyan", String(i + 1) + ".") + " " + step);
+    });
     ln();
   }
   const output = out.join("\n");

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "ai-localize-reporting",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "Localization scan reporting: JSON, HTML analytics dashboard and CLI summary",
+  "author": "ai-localize-core contributors",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ai-localize/ai-localize-core.git",
+    "directory": "packages/reporting"
+  },
+  "homepage": "https://github.com/ai-localize/ai-localize-core/tree/main/packages/reporting#readme",
+  "bugs": {
+    "url": "https://github.com/ai-localize/ai-localize-core/issues"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "files": [
     "dist",
     "README.md",
@@ -33,14 +45,13 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "ai-localize-shared": "2.0.5"
+    "ai-localize-shared": "2.0.7"
   },
   "devDependencies": {
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vitest": "^1.2.1"
   },
-  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },