@hydration-audit/dashboard 0.2.4 → 0.2.5

package/dist/index.cjs

@@ -59,6 +59,41 @@ async function startDashboard(reportPath, port = 4173) {
   }
   const currentDir = import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
   const staticDir = import_node_fs.default.existsSync(import_node_path.default.join(currentDir, "app")) ? import_node_path.default.join(currentDir, "app") : currentDir;
+  let currentImageReport = null;
+  const imageReportPath = import_node_path.default.join(import_node_path.default.dirname(absoluteReportPath), ".image-audit-report.json");
+  let imageWatcher = null;
+  const watchImageReport = () => {
+    if (imageWatcher) return;
+    try {
+      if (import_node_fs.default.existsSync(imageReportPath)) {
+        imageWatcher = import_node_fs.default.watch(imageReportPath, () => {
+          try {
+            tryReadImageReport();
+            for (const client of wss.clients) {
+              if (client.readyState === 1) {
+                client.send(JSON.stringify({ type: "image-update", report: currentImageReport }));
+              }
+            }
+          } catch {
+          }
+        });
+      }
+    } catch {
+    }
+  };
+  function tryReadImageReport() {
+    try {
+      if (import_node_fs.default.existsSync(imageReportPath)) {
+        const content = import_node_fs.default.readFileSync(imageReportPath, "utf-8");
+        currentImageReport = JSON.parse(content);
+        watchImageReport();
+      } else {
+        currentImageReport = null;
+      }
+    } catch {
+      currentImageReport = null;
+    }
+  }
   const server = import_node_http.default.createServer((req, res) => {
     const url = req.url ?? "/";
     if (url === "/api/report") {
@@ -66,6 +101,12 @@ async function startDashboard(reportPath, port = 4173) {
       res.end(JSON.stringify(currentReport ?? { error: "No report loaded" }));
       return;
     }
+    if (url === "/api/image-report") {
+      tryReadImageReport();
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(currentImageReport ?? { error: "No image report found" }));
+      return;
+    }
     let filePath = import_node_path.default.join(staticDir, url === "/" ? "index.html" : url);
     const ext = import_node_path.default.extname(filePath);
     if (!ext) {
@@ -99,6 +140,7 @@ async function startDashboard(reportPath, port = 4173) {
   } catch {
     console.warn("Could not watch report file for changes");
   }
+  tryReadImageReport();
   return new Promise((resolve) => {
     server.listen(port, () => {
       const url = `http://localhost:${port}`;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/server.ts"],"sourcesContent":["export { startDashboard } from './server.js';\n","import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const currentDir = path.dirname(fileURLToPath(import.meta.url));\n  const staticDir = fs.existsSync(path.join(currentDir, 'app'))\n    ? path.join(currentDir, 'app')\n    : currentDir;\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAAiB;AACjB,qBAAe;AACf,uBAAiB;AACjB,sBAA8B;AAC9B,gBAAgC;AAJhC;AAOA,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AACV;AAMA,eAAsB,eACpB,YACA,OAAO,MACsC;AAC7C,QAAM,qBAAqB,iBAAAA,QAAK,QAAQ,UAAU;AAGlD,MAAI,gBAAuC;AAC3C,MAAI;AACF,UAAM,UAAU,eAAAC,QAAG,aAAa,oBAAoB,OAAO;AAC3D,oBAAgB,KAAK,MAAM,OAAO;AAAA,EACpC,QAAQ;AACN,YAAQ,KAAK,4BAA4B,kBAAkB,EAAE;AAAA,EAC/D;AAEA,QAAM,aAAa,iBAAAD,QAAK,YAAQ,+BAAc,YAAY,GAAG,CAAC;AAC9D,QAAM,YAAY,eAAAC,QAAG,WAAW,iBAAAD,QAAK,KAAK,YAAY,KAAK,CAAC,IACxD,iBAAAA,QAAK,KAAK,YAAY,KAAK,IAC3B;AAEJ,QAAM,SAAS,iBAAAE,QAAK,aAAa,CAAC,KAAK,QAAQ;AAC7C,UAAM,MAAM,IAAI,OAAO;AAGvB,QAAI,QAAQ,eAAe;AACzB,UAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,UAAI,IAAI,KAAK,UAAU,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,CAAC;AACtE;AAAA,IACF;AAGA,QAAI,WAAW,iBAAAF,QAAK,KAAK,WAAW,QAAQ,MAAM,eAAe,GAAG;AACpE,UAAM,MAAM,iBAAAA,QAAK,QAAQ,QAAQ;AAGjC,QAAI,CAAC,KAAK;AACR,iBAAW,iBAAAA,QAAK,KAAK,WAAW,YAAY;AAAA,IAC9C;AAEA,QAAI;AACF,YAAM,UAAU,eAAAC,QAAG,aAAa,QAAQ;AACxC,YAAM,OAAO,WAAW,iBAAAD,QAAK,QAAQ,QAAQ,CAAC,KAAK;AACnD,UAAI,UAAU,KAAK,EAAE,gBAAgB,KAAK,CAAC;AAC3C,UAAI,IAAI,OAAO;AAAA,IACjB,QAAQ;AACN,UAAI,UAAU,GAAG;AACjB,UAAI,IAAI,WAAW;AAAA,IACrB;AAAA,EACF,CAAC;AAGD,QAAM,MAAM,IAAI,0BAAgB,EAAE,OAAO,CAAC;AAG1C,MAAI,UAA+B;AACnC,MAAI;AACF,cAAU,eAAAC,QAAG,MAAM,oBAAoB,MAAM;AAC3C,UAAI;AACF,cAAM,UAAU,eAAAA,QAAG,aAAa,oBAAoB,OAAO;AAC3D,wBAAgB,KAAK,MAAM,OAAO;AAElC,mBAAW,UAAU,IAAI,SAAS;AAChC,cAAI,OAAO,eAAe,GAAG;AAC3B,mBAAO,KAAK,KAAK,UAAU,EAAE,MAAM,UAAU,QAAQ,cAAc,CAAC,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF,CAAC;AAAA,EACH,QAAQ;AACN,YAAQ,KAAK,yCAAyC;AAAA,EACxD;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,WAAO,OAAO,MAAM,MAAM;AACxB,YAAM,MAAM,oBAAoB,IAAI;AACpC,cAAQ,IAAI;AAAA,yBAA4B,GAAG;AAAA,CAAI;AAC/C,cAAQ;AAAA,QACN;AAAA,QACA,OAAO,MAAM;AACX,mBAAS,MAAM;AACf,cAAI,MAAM;AACV,iBAAO,MAAM;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;","names":["path","fs","http"]}
+{"version":3,"sources":["../src/index.ts","../src/server.ts"],"sourcesContent":["export { startDashboard } from './server.js';\n","import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const currentDir = path.dirname(fileURLToPath(import.meta.url));\n  const staticDir = fs.existsSync(path.join(currentDir, 'app'))\n    ? path.join(currentDir, 'app')\n    : currentDir;\n\n  let currentImageReport: any = null;\n  const imageReportPath = path.join(path.dirname(absoluteReportPath), '.image-audit-report.json');\n  let imageWatcher: fs.FSWatcher | null = null;\n\n  const watchImageReport = () => {\n    if (imageWatcher) return;\n    try {\n      if (fs.existsSync(imageReportPath)) {\n        imageWatcher = fs.watch(imageReportPath, () => {\n          try {\n            tryReadImageReport();\n            for (const client of wss.clients) {\n              if (client.readyState === 1) {\n                client.send(JSON.stringify({ type: 'image-update', report: currentImageReport }));\n              }\n            }\n          } catch {}\n        });\n      }\n    } catch {}\n  };\n\n  function tryReadImageReport() {\n    try {\n      if (fs.existsSync(imageReportPath)) {\n        const content = fs.readFileSync(imageReportPath, 'utf-8');\n        currentImageReport = JSON.parse(content);\n        watchImageReport();\n      } else {\n        currentImageReport = null;\n      }\n    } catch {\n      currentImageReport = null;\n    }\n  }\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    if (url === '/api/image-report') {\n      tryReadImageReport();\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentImageReport ?? { error: 'No image report found' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  tryReadImageReport();\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":"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","names":["path","fs","http"]}

package/dist/index.html

@@ -812,6 +812,66 @@
     .view.active {
       display: block;
     }
+
+    /* Images & Media View Styling */
+    .img-preview-thumb {
+      width: 48px;
+      height: 48px;
+      object-fit: cover;
+      border-radius: 4px;
+      background: var(--surface-active);
+      border: 1px solid var(--border);
+    }
+    .img-preview-placeholder {
+      width: 48px;
+      height: 48px;
+      border-radius: 4px;
+      background: var(--surface-active);
+      border: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+    .cdn-badge {
+      display: inline-block;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+    .cdn-badge.yes {
+      background: var(--green-alpha);
+      color: var(--green);
+    }
+    .cdn-badge.no {
+      background: var(--yellow-alpha);
+      color: var(--yellow);
+    }
+    .issue-badge-inline {
+      display: inline-block;
+      padding: 1px 6px;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      margin-top: 2px;
+    }
+    .issue-badge-inline.error {
+      background: var(--red-alpha);
+      color: var(--red);
+    }
+    .issue-badge-inline.warning {
+      background: var(--yellow-alpha);
+      color: var(--yellow);
+    }
+    .issue-badge-inline.info {
+      background: var(--blue-alpha);
+      color: var(--blue);
+    }
   </style>
 </head>
 <body>
@@ -825,6 +885,7 @@
 
   <script type="module">
     let report = null;
+    let imageReport = null;
     let activeTab = 'overview';
     
     // Filtering and search state
@@ -833,6 +894,9 @@
     let directiveFilter = 'all';
     let severityFilter = 'all';
 
+    let imagePageFilter = 'all';
+    let imageSeverityFilter = 'all';
+
     // Sorting state
     let sortColumn = 'gzip';
     let sortAsc = false;
@@ -845,6 +909,17 @@
       try {
         const res = await fetch('/api/report');
         report = await res.json();
+
+        try {
+          const imgRes = await fetch('/api/image-report');
+          const imgData = await imgRes.json();
+          if (imgData && !imgData.error) {
+            imageReport = imgData;
+          }
+        } catch (e) {
+          console.warn('No image report available', e);
+        }
+
         renderLayout();
         connectWS();
       } catch (e) {
@@ -866,6 +941,9 @@
           if (data.type === 'update') {
             report = data.report;
             updateMetricsAndViews();
+          } else if (data.type === 'image-update') {
+            imageReport = data.report;
+            updateMetricsAndViews();
           }
         };
         ws.onclose = () => setTimeout(connectWS, 3000);
@@ -923,6 +1001,10 @@
               <span>Issues</span>
               <span class="nav-badge" id="badge-issues-count" style="${totalIssues > 0 ? 'background:var(--yellow-alpha);color:var(--yellow);' : ''}">${totalIssues}</span>
             </button>
+            <button class="nav-item ${activeTab === 'images' ? 'active' : ''}" data-tab="images" id="nav-item-images" style="display: none;">
+              <span>Images & Media</span>
+              <span class="nav-badge" id="badge-images-issues-count">0</span>
+            </button>
           </div>
 
           <div class="status">
@@ -1020,6 +1102,35 @@
 
             <div class="issues-list" id="issues-list-container"></div>
           </div>
+
+          <!-- Images View -->
+          <div class="view ${activeTab === 'images' ? 'active' : ''}" id="view-images">
+            <div class="header">
+              <div class="header-title">
+                <h2>Images & Media Audit</h2>
+                <p>Verify image dimensions, sizes, formats, broken assets, and CDN delivery.</p>
+              </div>
+            </div>
+            <div class="stats-grid" id="images-stats" style="margin-bottom: 1.5rem;"></div>
+            
+            <div class="filter-bar" id="images-filter-bar">
+              <div class="filter-group">
+                <span class="filter-label">Filter Page:</span>
+                <select id="images-page-select" class="search-input" style="width: auto; max-width: 300px; padding: 0.35rem 0.75rem;">
+                  <option value="all">All Pages</option>
+                </select>
+              </div>
+              <div class="filter-group" style="margin-left: auto;">
+                <span class="filter-label">Filter Severity:</span>
+                <button class="filter-pill active" id="btn-img-severity-all">All</button>
+                <button class="filter-pill" id="btn-img-severity-error">Errors</button>
+                <button class="filter-pill" id="btn-img-severity-warning">Warnings</button>
+                <button class="filter-pill" id="btn-img-severity-info">Info</button>
+              </div>
+            </div>
+
+            <div id="images-report-container" style="display:flex; flex-direction:column; gap:2rem;"></div>
+          </div>
         </div>
 
         <!-- Detail Inspector Slide-out Drawer -->
@@ -1036,6 +1147,26 @@
       `;
 
       document.getElementById('app-root').replaceChildren(container);
+
+      // Show/hide Images nav item
+      if (imageReport) {
+        const navItemImages = document.getElementById('nav-item-images');
+        if (navItemImages) {
+          navItemImages.style.display = 'flex';
+          const totalImgIssues = imageReport.totals.totalIssues;
+          const imgBadge = document.getElementById('badge-images-issues-count');
+          if (imgBadge) {
+            imgBadge.textContent = totalImgIssues;
+            if (totalImgIssues > 0) {
+              imgBadge.style.background = 'var(--yellow-alpha)';
+              imgBadge.style.color = 'var(--yellow)';
+            } else {
+              imgBadge.style.background = 'var(--surface-hover)';
+              imgBadge.style.color = 'var(--text-secondary)';
+            }
+          }
+        }
+      }
       
       // Wire sidebar tabs switching
       document.querySelectorAll('.sidebar .nav-item').forEach(btn => {
@@ -1050,6 +1181,8 @@
           // Re-trigger layout sizing on tab changes (specifically for Treemap resizing)
           if (activeTab === 'overview') {
             setTimeout(renderTreemap, 50);
+          } else if (activeTab === 'images') {
+            renderImagesView();
           }
         });
       });
@@ -1087,6 +1220,33 @@
         });
       });
 
+      // Wire images filters
+      const pageSelect = document.getElementById('images-page-select');
+      if (pageSelect) {
+        pageSelect.addEventListener('change', (e) => {
+          imagePageFilter = e.target.value;
+          renderImagesView();
+        });
+      }
+
+      const imgSeverityButtons = {
+        all: document.getElementById('btn-img-severity-all'),
+        error: document.getElementById('btn-img-severity-error'),
+        warning: document.getElementById('btn-img-severity-warning'),
+        info: document.getElementById('btn-img-severity-info'),
+      };
+
+      Object.entries(imgSeverityButtons).forEach(([sev, btn]) => {
+        if (btn) {
+          btn.addEventListener('click', () => {
+            imageSeverityFilter = sev;
+            Object.values(imgSeverityButtons).forEach(b => { if (b) b.classList.remove('active'); });
+            btn.classList.add('active');
+            renderImagesView();
+          });
+        }
+      });
+
       // Sort handlers
       document.querySelectorAll('#islands-table th').forEach(th => {
         th.addEventListener('click', () => {
@@ -1132,6 +1292,30 @@
         issuesBadge.style.color = 'var(--text-secondary)';
       }
 
+      if (imageReport) {
+        const navItemImages = document.getElementById('nav-item-images');
+        if (navItemImages) {
+          navItemImages.style.display = 'flex';
+          const totalImgIssues = imageReport.totals.totalIssues;
+          const imgBadge = document.getElementById('badge-images-issues-count');
+          if (imgBadge) {
+            imgBadge.textContent = totalImgIssues;
+            if (totalImgIssues > 0) {
+              imgBadge.style.background = 'var(--yellow-alpha)';
+              imgBadge.style.color = 'var(--yellow)';
+            } else {
+              imgBadge.style.background = 'var(--surface-hover)';
+              imgBadge.style.color = 'var(--text-secondary)';
+            }
+          }
+        }
+        renderImagesStats();
+        populateImagesPageSelect();
+        if (activeTab === 'images') {
+          renderImagesView();
+        }
+      }
+
       // Re-populate sections
       renderOverviewStats();
       renderTreemap();
@@ -1148,6 +1332,281 @@
       }
     }
 
+    // Populate the Images View Metrics cards
+    function renderImagesStats() {
+      const statsGrid = document.getElementById('images-stats');
+      if (!statsGrid || !imageReport) return;
+
+      const t = imageReport.totals;
+      const issuesClass = t.issuesBySeverity.error > 0 ? 'red' : t.issuesBySeverity.warning > 0 ? 'yellow' : 'green';
+
+      statsGrid.innerHTML = `
+        <div class="stat-card">
+          <div class="stat-label">Total Images</div>
+          <div class="stat-value">${t.totalImages}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Total Attachments</div>
+          <div class="stat-value">${t.totalAttachments}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Total Issues</div>
+          <div class="stat-value ${issuesClass}">${t.totalIssues}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Severity Breakdown</div>
+          <div style="margin-top: 0.5rem; display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; font-weight: 500;">
+            <div style="display:flex; justify-content:space-between; color: var(--red);">
+              <span>Errors:</span> <strong>${t.issuesBySeverity.error}</strong>
+            </div>
+            <div style="display:flex; justify-content:space-between; color: var(--yellow);">
+              <span>Warnings:</span> <strong>${t.issuesBySeverity.warning}</strong>
+            </div>
+            <div style="display:flex; justify-content:space-between; color: var(--blue);">
+              <span>Info:</span> <strong>${t.issuesBySeverity.info}</strong>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    // Populate the Images Page Select Dropdown
+    function populateImagesPageSelect() {
+      const pageSelect = document.getElementById('images-page-select');
+      if (!pageSelect || !imageReport) return;
+
+      const currentVal = pageSelect.value || 'all';
+
+      pageSelect.innerHTML = `<option value="all">All Pages (${imageReport.pages.length})</option>`;
+
+      for (const page of imageReport.pages) {
+        const opt = document.createElement('option');
+        opt.value = page.route;
+        const totalPageIssues = page.images.reduce((sum, img) => sum + img.issues.length, 0) + 
+                               page.attachments.reduce((sum, att) => sum + att.issues.length, 0);
+        opt.textContent = `${page.route} (${page.images.length} images, ${totalPageIssues} issues)`;
+        pageSelect.appendChild(opt);
+      }
+
+      if (Array.from(pageSelect.options).some(o => o.value === currentVal)) {
+        pageSelect.value = currentVal;
+        imagePageFilter = currentVal;
+      } else {
+        pageSelect.value = 'all';
+        imagePageFilter = 'all';
+      }
+    }
+
+    // Render list of audited images and attachments page-by-page
+    function renderImagesView() {
+      const container = document.getElementById('images-report-container');
+      if (!container || !imageReport) return;
+
+      let pagesToRender = imageReport.pages;
+      if (imagePageFilter !== 'all') {
+        pagesToRender = pagesToRender.filter(p => p.route === imagePageFilter);
+      }
+
+      let html = '';
+
+      for (const page of pagesToRender) {
+        const filteredImages = page.images.filter(img => {
+          if (imageSeverityFilter === 'all') return true;
+          return img.issues.some(iss => iss.severity === imageSeverityFilter);
+        });
+
+        const filteredAttachments = page.attachments.filter(att => {
+          if (imageSeverityFilter === 'all') return true;
+          return att.issues.some(iss => iss.severity === imageSeverityFilter);
+        });
+
+        if (filteredImages.length === 0 && filteredAttachments.length === 0) {
+          continue;
+        }
+
+        const totalIssuesOnPage = filteredImages.reduce((sum, img) => sum + img.issues.length, 0) +
+                                  filteredAttachments.reduce((sum, att) => sum + att.issues.length, 0);
+
+        const pageErrors = filteredImages.reduce((sum, img) => sum + img.issues.filter(i => i.severity === 'error').length, 0) +
+                           filteredAttachments.reduce((sum, att) => sum + att.issues.filter(i => i.severity === 'error').length, 0);
+
+        const pageWarnings = filteredImages.reduce((sum, img) => sum + img.issues.filter(i => i.severity === 'warning').length, 0) +
+                             filteredAttachments.reduce((sum, att) => sum + att.issues.filter(i => i.severity === 'warning').length, 0);
+
+        const pageBadgeClass = pageErrors > 0 ? 'error' : pageWarnings > 0 ? 'warn' : 'zero';
+
+        html += `
+          <div class="card" style="margin-bottom:1.5rem; gap:1rem;">
+            <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding-bottom:0.75rem;">
+              <div>
+                <h3 style="margin-bottom:0; font-size:1.15rem; color:var(--text);">${page.route}</h3>
+                <span style="font-size:0.8rem; color:var(--text-muted); font-family:'JetBrains Mono', monospace;">${page.htmlFile}</span>
+              </div>
+              <div style="display:flex; align-items:center; gap:0.5rem;">
+                <span style="font-size:0.8rem; color:var(--text-secondary);">${page.images.length} images, ${page.attachments.length} attachments</span>
+                <span class="issues-count ${pageBadgeClass}">${totalIssuesOnPage}</span>
+              </div>
+            </div>
+
+            ${filteredImages.length > 0 ? `
+              <div>
+                <h4 style="font-size:0.9rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.75rem; text-transform:uppercase; letter-spacing:0.05em;">Images</h4>
+                <div class="table-wrapper">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th style="width: 80px;">Preview</th>
+                        <th>Resource URL / tag</th>
+                        <th>File Size</th>
+                        <th>Dimensions (Natural / HTML)</th>
+                        <th>CDN</th>
+                        <th>Diagnostics</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${filteredImages.map(img => {
+                        const isBroken = img.isBroken;
+                        const isRemote = img.src.startsWith('http://') || img.src.startsWith('https://');
+
+                        let previewHtml = '';
+                        if (isBroken) {
+                          previewHtml = `<div class="img-preview-placeholder" style="color:var(--red); border-color:var(--red-alpha);">Broken</div>`;
+                        } else if (isRemote) {
+                          previewHtml = `<img src="${img.src}" class="img-preview-thumb" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+                                         <div class="img-preview-placeholder" style="display:none;">Remote</div>`;
+                        } else if (img.src.startsWith('data:')) {
+                          previewHtml = `<img src="${img.src}" class="img-preview-thumb" />`;
+                        } else {
+                          previewHtml = `<div class="img-preview-placeholder">Local</div>`;
+                        }
+
+                        const displaySize = img.fileSize ? formatBytes(img.fileSize) : 'Unknown';
+                        const sizeClass = img.fileSize && img.fileSize > 100 * 1024 ? 'color: var(--yellow); font-weight:600;' : '';
+
+                        const naturalDims = img.naturalWidth && img.naturalHeight ? `${img.naturalWidth}x${img.naturalHeight}` : 'Unknown';
+                        const displayDims = img.displayWidth && img.displayHeight ? `${img.displayWidth}x${img.displayHeight}` : 'Not set';
+                        
+                        let dimsClass = '';
+                        if (img.naturalWidth && img.displayWidth && img.naturalWidth > img.displayWidth * 1.5) {
+                          dimsClass = 'color: var(--yellow); font-weight:600;';
+                        }
+
+                        const issuesListHtml = img.issues.map(iss => `
+                          <div style="margin-top: 4px; display: flex; align-items: flex-start; gap: 4px;">
+                            <span class="issue-badge-inline ${iss.severity}">${iss.severity}</span>
+                            <div style="font-size:0.85rem;">
+                              <strong>${iss.message}</strong>
+                              <div style="color: var(--text-muted); font-size: 0.75rem; margin-top:2px;">Recommendation: ${iss.recommendation}</div>
+                            </div>
+                          </div>
+                        `).join('');
+
+                        return `
+                          <tr>
+                            <td>${previewHtml}</td>
+                            <td>
+                              <div style="font-weight:600; word-break:break-all; max-width:320px;" title="${img.src}">
+                                ${isRemote ? `<a href="${img.src}" target="_blank" style="color:var(--blue); text-decoration:none;">${pathBasename(img.src)}</a>` : pathBasename(img.src)}
+                              </div>
+                              <div style="font-size:0.75rem; color:var(--text-muted); font-family:'JetBrains Mono', monospace; margin-top:2px;">&lt;${img.tagName}&gt;</div>
+                              ${isRemote ? `<div style="font-size:0.75rem; color:var(--text-muted); max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${img.src}</div>` : `<div style="font-size:0.75rem; color:var(--text-muted);">${img.src}</div>`}
+                            </td>
+                            <td style="${sizeClass}">${displaySize}</td>
+                            <td style="${dimsClass}">
+                              <div>Nat: ${naturalDims}</div>
+                              <div style="font-size:0.75rem; color:var(--text-muted);">HTML: ${displayDims}</div>
+                            </td>
+                            <td>
+                              <span class="cdn-badge ${img.isCdn ? 'yes' : 'no'}">${img.isCdn ? 'CDN' : 'No CDN'}</span>
+                            </td>
+                            <td>
+                              ${img.issues.length === 0 
+                                ? `<span style="color:var(--green); font-size:0.85rem; font-weight:500;">✓ Healthy</span>` 
+                                : `<div style="display:flex; flex-direction:column; gap:6px;">${issuesListHtml}</div>`}
+                            </td>
+                          </tr>
+                        `;
+                      }).join('')}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            ` : ''}
+
+            ${filteredAttachments.length > 0 ? `
+              <div style="margin-top:0.75rem;">
+                <h4 style="font-size:0.9rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.75rem; text-transform:uppercase; letter-spacing:0.05em;">Media & File Attachments</h4>
+                <div class="table-wrapper">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>Resource URL / href</th>
+                        <th>Tag</th>
+                        <th>CDN</th>
+                        <th>Status</th>
+                        <th>Diagnostics</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      ${filteredAttachments.map(att => {
+                        const isRemote = att.href.startsWith('http://') || att.href.startsWith('https://');
+                        const isBroken = att.isBroken;
+
+                        const issuesListHtml = att.issues.map(iss => `
+                          <div style="margin-top: 4px; display: flex; align-items: flex-start; gap: 4px;">
+                            <span class="issue-badge-inline ${iss.severity}">${iss.severity}</span>
+                            <div style="font-size:0.85rem;">
+                              <strong>${iss.message}</strong>
+                              <div style="color: var(--text-muted); font-size: 0.75rem; margin-top:2px;">Recommendation: ${iss.recommendation}</div>
+                            </div>
+                          </div>
+                        `).join('');
+
+                        return `
+                          <tr>
+                            <td>
+                              <div style="font-weight:600; word-break:break-all; max-width:400px;" title="${att.href}">
+                                ${isRemote ? `<a href="${att.href}" target="_blank" style="color:var(--blue); text-decoration:none;">${pathBasename(att.href)}</a>` : pathBasename(att.href)}
+                              </div>
+                              <div style="font-size:0.75rem; color:var(--text-muted); word-break:break-all; max-width:400px; margin-top:2px;">${att.href}</div>
+                            </td>
+                            <td><span style="font-family:'JetBrains Mono', monospace; font-size:0.85rem;">&lt;${att.tagName}&gt;</span></td>
+                            <td>
+                              <span class="cdn-badge ${att.isCdn ? 'yes' : 'no'}">${att.isCdn ? 'CDN' : 'No CDN'}</span>
+                            </td>
+                            <td>
+                              ${isBroken 
+                                ? `<span style="color:var(--red); font-weight:600;">Broken Link</span>` 
+                                : `<span style="color:var(--green); font-weight:600;">Active</span>`}
+                            </td>
+                            <td>
+                              ${att.issues.length === 0 
+                                ? `<span style="color:var(--green); font-size:0.85rem; font-weight:500;">✓ Healthy</span>` 
+                                : `<div style="display:flex; flex-direction:column; gap:6px;">${issuesListHtml}</div>`}
+                            </td>
+                          </tr>
+                        `;
+                      }).join('')}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            ` : ''}
+          </div>
+        `;
+      }
+
+      if (!html) {
+        container.innerHTML = `
+          <div style="text-align:center; color:var(--text-muted); padding:4rem 0;">
+            No media assets found matching the filter criteria.
+          </div>
+        `;
+      } else {
+        container.innerHTML = html;
+      }
+    }
+
     // Populate the Overview Metrics cards
     function renderOverviewStats() {
       const statsGrid = document.getElementById('overview-stats');

package/dist/index.mjs

@@ -22,6 +22,41 @@ async function startDashboard(reportPath, port = 4173) {
   }
   const currentDir = path.dirname(fileURLToPath(import.meta.url));
   const staticDir = fs.existsSync(path.join(currentDir, "app")) ? path.join(currentDir, "app") : currentDir;
+  let currentImageReport = null;
+  const imageReportPath = path.join(path.dirname(absoluteReportPath), ".image-audit-report.json");
+  let imageWatcher = null;
+  const watchImageReport = () => {
+    if (imageWatcher) return;
+    try {
+      if (fs.existsSync(imageReportPath)) {
+        imageWatcher = fs.watch(imageReportPath, () => {
+          try {
+            tryReadImageReport();
+            for (const client of wss.clients) {
+              if (client.readyState === 1) {
+                client.send(JSON.stringify({ type: "image-update", report: currentImageReport }));
+              }
+            }
+          } catch {
+          }
+        });
+      }
+    } catch {
+    }
+  };
+  function tryReadImageReport() {
+    try {
+      if (fs.existsSync(imageReportPath)) {
+        const content = fs.readFileSync(imageReportPath, "utf-8");
+        currentImageReport = JSON.parse(content);
+        watchImageReport();
+      } else {
+        currentImageReport = null;
+      }
+    } catch {
+      currentImageReport = null;
+    }
+  }
   const server = http.createServer((req, res) => {
     const url = req.url ?? "/";
     if (url === "/api/report") {
@@ -29,6 +64,12 @@ async function startDashboard(reportPath, port = 4173) {
       res.end(JSON.stringify(currentReport ?? { error: "No report loaded" }));
       return;
     }
+    if (url === "/api/image-report") {
+      tryReadImageReport();
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(currentImageReport ?? { error: "No image report found" }));
+      return;
+    }
     let filePath = path.join(staticDir, url === "/" ? "index.html" : url);
     const ext = path.extname(filePath);
     if (!ext) {
@@ -62,6 +103,7 @@ async function startDashboard(reportPath, port = 4173) {
   } catch {
     console.warn("Could not watch report file for changes");
   }
+  tryReadImageReport();
   return new Promise((resolve) => {
     server.listen(port, () => {
       const url = `http://localhost:${port}`;

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const currentDir = path.dirname(fileURLToPath(import.meta.url));\n  const staticDir = fs.existsSync(path.join(currentDir, 'app'))\n    ? path.join(currentDir, 'app')\n    : currentDir;\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":";AAAA,OAAO,UAAU;AACjB,OAAO,QAAQ;AACf,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,IAAM,aAAqC;AAAA,EACzC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AACV;AAMA,eAAsB,eACpB,YACA,OAAO,MACsC;AAC7C,QAAM,qBAAqB,KAAK,QAAQ,UAAU;AAGlD,MAAI,gBAAuC;AAC3C,MAAI;AACF,UAAM,UAAU,GAAG,aAAa,oBAAoB,OAAO;AAC3D,oBAAgB,KAAK,MAAM,OAAO;AAAA,EACpC,QAAQ;AACN,YAAQ,KAAK,4BAA4B,kBAAkB,EAAE;AAAA,EAC/D;AAEA,QAAM,aAAa,KAAK,QAAQ,cAAc,YAAY,GAAG,CAAC;AAC9D,QAAM,YAAY,GAAG,WAAW,KAAK,KAAK,YAAY,KAAK,CAAC,IACxD,KAAK,KAAK,YAAY,KAAK,IAC3B;AAEJ,QAAM,SAAS,KAAK,aAAa,CAAC,KAAK,QAAQ;AAC7C,UAAM,MAAM,IAAI,OAAO;AAGvB,QAAI,QAAQ,eAAe;AACzB,UAAI,UAAU,KAAK,EAAE,gBAAgB,mBAAmB,CAAC;AACzD,UAAI,IAAI,KAAK,UAAU,iBAAiB,EAAE,OAAO,mBAAmB,CAAC,CAAC;AACtE;AAAA,IACF;AAGA,QAAI,WAAW,KAAK,KAAK,WAAW,QAAQ,MAAM,eAAe,GAAG;AACpE,UAAM,MAAM,KAAK,QAAQ,QAAQ;AAGjC,QAAI,CAAC,KAAK;AACR,iBAAW,KAAK,KAAK,WAAW,YAAY;AAAA,IAC9C;AAEA,QAAI;AACF,YAAM,UAAU,GAAG,aAAa,QAAQ;AACxC,YAAM,OAAO,WAAW,KAAK,QAAQ,QAAQ,CAAC,KAAK;AACnD,UAAI,UAAU,KAAK,EAAE,gBAAgB,KAAK,CAAC;AAC3C,UAAI,IAAI,OAAO;AAAA,IACjB,QAAQ;AACN,UAAI,UAAU,GAAG;AACjB,UAAI,IAAI,WAAW;AAAA,IACrB;AAAA,EACF,CAAC;AAGD,QAAM,MAAM,IAAI,gBAAgB,EAAE,OAAO,CAAC;AAG1C,MAAI,UAA+B;AACnC,MAAI;AACF,cAAU,GAAG,MAAM,oBAAoB,MAAM;AAC3C,UAAI;AACF,cAAM,UAAU,GAAG,aAAa,oBAAoB,OAAO;AAC3D,wBAAgB,KAAK,MAAM,OAAO;AAElC,mBAAW,UAAU,IAAI,SAAS;AAChC,cAAI,OAAO,eAAe,GAAG;AAC3B,mBAAO,KAAK,KAAK,UAAU,EAAE,MAAM,UAAU,QAAQ,cAAc,CAAC,CAAC;AAAA,UACvE;AAAA,QACF;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF,CAAC;AAAA,EACH,QAAQ;AACN,YAAQ,KAAK,yCAAyC;AAAA,EACxD;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,WAAO,OAAO,MAAM,MAAM;AACxB,YAAM,MAAM,oBAAoB,IAAI;AACpC,cAAQ,IAAI;AAAA,yBAA4B,GAAG;AAAA,CAAI;AAC/C,cAAQ;AAAA,QACN;AAAA,QACA,OAAO,MAAM;AACX,mBAAS,MAAM;AACf,cAAI,MAAM;AACV,iBAAO,MAAM;AAAA,QACf;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../src/server.ts"],"sourcesContent":["import http from 'node:http';\nimport fs from 'node:fs';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nimport { WebSocketServer } from 'ws';\nimport type { AnalysisReport } from '@hydration-audit/core';\n\nconst MIME_TYPES: Record<string, string> = {\n  '.html': 'text/html',\n  '.js': 'application/javascript',\n  '.css': 'text/css',\n  '.json': 'application/json',\n  '.svg': 'image/svg+xml',\n};\n\n/**\n * Start the dashboard server.\n * Serves a static SPA and provides a WebSocket for live report updates.\n */\nexport async function startDashboard(\n  reportPath: string,\n  port = 4173,\n): Promise<{ url: string; close: () => void }> {\n  const absoluteReportPath = path.resolve(reportPath);\n\n  // Read the initial report\n  let currentReport: AnalysisReport | null = null;\n  try {\n    const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n    currentReport = JSON.parse(content);\n  } catch {\n    console.warn(`Could not read report at ${absoluteReportPath}`);\n  }\n\n  const currentDir = path.dirname(fileURLToPath(import.meta.url));\n  const staticDir = fs.existsSync(path.join(currentDir, 'app'))\n    ? path.join(currentDir, 'app')\n    : currentDir;\n\n  let currentImageReport: any = null;\n  const imageReportPath = path.join(path.dirname(absoluteReportPath), '.image-audit-report.json');\n  let imageWatcher: fs.FSWatcher | null = null;\n\n  const watchImageReport = () => {\n    if (imageWatcher) return;\n    try {\n      if (fs.existsSync(imageReportPath)) {\n        imageWatcher = fs.watch(imageReportPath, () => {\n          try {\n            tryReadImageReport();\n            for (const client of wss.clients) {\n              if (client.readyState === 1) {\n                client.send(JSON.stringify({ type: 'image-update', report: currentImageReport }));\n              }\n            }\n          } catch {}\n        });\n      }\n    } catch {}\n  };\n\n  function tryReadImageReport() {\n    try {\n      if (fs.existsSync(imageReportPath)) {\n        const content = fs.readFileSync(imageReportPath, 'utf-8');\n        currentImageReport = JSON.parse(content);\n        watchImageReport();\n      } else {\n        currentImageReport = null;\n      }\n    } catch {\n      currentImageReport = null;\n    }\n  }\n\n  const server = http.createServer((req, res) => {\n    const url = req.url ?? '/';\n\n    // API endpoint for report data\n    if (url === '/api/report') {\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentReport ?? { error: 'No report loaded' }));\n      return;\n    }\n\n    if (url === '/api/image-report') {\n      tryReadImageReport();\n      res.writeHead(200, { 'Content-Type': 'application/json' });\n      res.end(JSON.stringify(currentImageReport ?? { error: 'No image report found' }));\n      return;\n    }\n\n    // Serve static files\n    let filePath = path.join(staticDir, url === '/' ? 'index.html' : url);\n    const ext = path.extname(filePath);\n\n    // SPA fallback — serve index.html for non-file routes\n    if (!ext) {\n      filePath = path.join(staticDir, 'index.html');\n    }\n\n    try {\n      const content = fs.readFileSync(filePath);\n      const mime = MIME_TYPES[path.extname(filePath)] ?? 'text/plain';\n      res.writeHead(200, { 'Content-Type': mime });\n      res.end(content);\n    } catch {\n      res.writeHead(404);\n      res.end('Not found');\n    }\n  });\n\n  // WebSocket for live reload\n  const wss = new WebSocketServer({ server });\n\n  // Watch report file for changes\n  let watcher: fs.FSWatcher | null = null;\n  try {\n    watcher = fs.watch(absoluteReportPath, () => {\n      try {\n        const content = fs.readFileSync(absoluteReportPath, 'utf-8');\n        currentReport = JSON.parse(content);\n        // Notify all connected clients\n        for (const client of wss.clients) {\n          if (client.readyState === 1) {\n            client.send(JSON.stringify({ type: 'update', report: currentReport }));\n          }\n        }\n      } catch {\n        // Ignore parse errors during write\n      }\n    });\n  } catch {\n    console.warn('Could not watch report file for changes');\n  }\n\n  tryReadImageReport();\n\n  return new Promise((resolve) => {\n    server.listen(port, () => {\n      const url = `http://localhost:${port}`;\n      console.log(`\\n  Dashboard running at ${url}\\n`);\n      resolve({\n        url,\n        close: () => {\n          watcher?.close();\n          wss.close();\n          server.close();\n        },\n      });\n    });\n  });\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydration-audit/dashboard",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Web dashboard for visualizing JavaScript hydration costs",
   "type": "module",
   "exports": {