@stati/core 1.29.2 → 2.0.1

package/dist/metrics/utils/html-report.utils.js

@@ -2,9 +2,11 @@
  * HTML Metrics Report Generator
  *
  * Generates a self-contained HTML file for visualizing build performance metrics.
- * Handles both standard and detailed (with pageTimings) metrics files.
+ * Handles both standard and detailed (with pageTimings) metrics files. The page shares its
+ * look with the Stati documentation site and the development error overlay.
  */
 import { writeFile } from 'node:fs/promises';
+import { STATI_FAVICON_HREF, STATI_MARK_PATH, STATI_PRINT_STYLES, STATI_THEME_STYLES, } from '../../core/utils/theme.utils.js';
 /**
  * Format bytes to human-readable string
  */
@@ -14,6 +16,8 @@ function formatBytes(bytes) {
     const k = 1024;
     const sizes = ['B', 'KB', 'MB', 'GB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
+    if (i === 0)
+        return `${bytes} B`;
     return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
 }
 /**
@@ -32,36 +36,57 @@ function formatDuration(ms) {
 function formatPercent(value) {
     return `${(value * 100).toFixed(1)}%`;
 }
+/**
+ * Format a count with thousands separators
+ */
+function formatCount(value) {
+    return value.toLocaleString('en-US');
+}
+/**
+ * Escapes text for HTML content and attribute values.
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
 /**
  * Get human-readable phase name
  */
 function getPhaseLabel(key) {
     const labels = {
-        configLoadMs: 'Config Loading',
-        contentDiscoveryMs: 'Content Discovery',
-        navigationBuildMs: 'Navigation Build',
-        cacheManifestLoadMs: 'Cache Manifest Load',
-        typescriptCompileMs: 'TypeScript Compile',
-        pageRenderingMs: 'Page Rendering',
-        shouldRebuildTotalMs: 'Rebuild Checks',
-        renderPageTotalMs: 'Render Pages',
-        fileWriteTotalMs: 'File Writing',
-        cacheEntryTotalMs: 'Cache Entry Updates',
-        searchIndexGenerationMs: 'Search Index Generation',
-        searchIndexWriteMs: 'Search Index Write',
-        assetCopyMs: 'Asset Copying',
-        cacheManifestSaveMs: 'Cache Manifest Save',
-        sitemapGenerationMs: 'Sitemap Generation',
-        rssGenerationMs: 'RSS Generation',
-        tailwindInitMs: 'Tailwind Init',
-        tailwindInventoryMs: 'Tailwind Inventory',
-        getDirectorySizeMs: 'Directory Size Calc',
-        lockAcquireMs: 'Lock Acquire',
-        lockReleaseMs: 'Lock Release',
-        hookBeforeAllMs: 'Hook: beforeAll',
-        hookAfterAllMs: 'Hook: afterAll',
-        hookBeforeRenderTotalMs: 'Hook: beforeRender (total)',
-        hookAfterRenderTotalMs: 'Hook: afterRender (total)',
+        configLoadMs: 'Config loading',
+        contentDiscoveryMs: 'Content discovery',
+        navigationBuildMs: 'Navigation build',
+        cacheManifestLoadMs: 'Cache manifest load',
+        typescriptCompileMs: 'TypeScript compile',
+        templateIndexMs: 'Template index',
+        pageRenderingMs: 'Page rendering',
+        shouldRebuildTotalMs: 'Rebuild checks',
+        markdownRenderTotalMs: 'Markdown',
+        renderPageTotalMs: 'Render pages',
+        postRenderTotalMs: 'After rendering',
+        fileWriteTotalMs: 'File writing',
+        cacheEntryTotalMs: 'Cache entry updates',
+        searchIndexGenerationMs: 'Search index generation',
+        searchIndexWriteMs: 'Search index write',
+        assetCopyMs: 'Asset copying',
+        cacheManifestSaveMs: 'Cache manifest save',
+        sitemapGenerationMs: 'Sitemap generation',
+        rssGenerationMs: 'RSS generation',
+        tailwindInitMs: 'Tailwind init',
+        tailwindInventoryMs: 'Tailwind inventory',
+        getDirectorySizeMs: 'Directory size',
+        lockAcquireMs: 'Lock acquire',
+        lockReleaseMs: 'Lock release',
+        hookBeforeAllMs: 'beforeAll hook',
+        hookAfterAllMs: 'afterAll hook',
+        hookBeforeRenderTotalMs: 'beforeRender hooks',
+        hookAfterRenderTotalMs: 'afterRender hooks',
+        imageSettleMs: 'Image generation',
     };
     return (labels[key] ||
         key
@@ -79,12 +104,15 @@ function getPhaseDescription(key) {
         navigationBuildMs: 'Time spent constructing the navigation tree from discovered pages. This includes sorting pages, building parent-child relationships, and generating breadcrumbs. Complex nested structures may increase this time.',
         cacheManifestLoadMs: 'Time spent reading the ISG cache manifest from disk. The manifest tracks which pages are cached and their dependencies. A large manifest or slow disk I/O can increase this time.',
         typescriptCompileMs: 'Time spent compiling TypeScript bundles using esbuild. This includes bundling client-side scripts defined in the config. More bundles or larger codebases will increase compile time.',
-        pageRenderingMs: 'Total time spent in the page rendering pipeline, including rebuild checks, template rendering, file writing, and cache updates. This is typically the largest phase in a build.',
-        shouldRebuildTotalMs: 'Aggregate time spent checking if each page needs to be rebuilt. This includes computing content hashes and comparing dependencies. Fast hash comparisons keep this time low.',
-        renderPageTotalMs: 'Aggregate time spent actually rendering pages through the Eta template engine. Complex templates with many partials or heavy computations will increase this time.',
+        templateIndexMs: 'Time spent listing every .eta file in the source directory, once per build. Template names resolve against this list, so neither rendering nor the cache checks search folders page by page. A dev server keeps the list between rebuilds.',
+        pageRenderingMs: 'Total time spent in the page pipeline: the beforeAll hook, the search index, and for every page the rebuild check, rendering, hooks, file writing and cache update. The steps listed under it are its parts; the per-page ones are summed over all pages. This is typically the largest phase in a build.',
+        shouldRebuildTotalMs: 'Aggregate time spent checking if each page needs to be rebuilt. This includes computing content hashes, hashing the templates each page rendered, and checking the template names it looked up against the template index.',
+        markdownRenderTotalMs: "Aggregate time spent rendering each rendered page's Markdown to HTML with markdown-it, including its plugins, heading anchors, the table of contents and image sizing. Long pages and heavy plugins increase this time.",
+        renderPageTotalMs: 'Aggregate time spent actually rendering pages through the Eta template engine: each layout, the parents it names and the templates it includes. Templates a page does not use are never rendered. Complex templates with many includes or heavy computations will increase this time.',
+        postRenderTotalMs: 'Aggregate time spent on each rendered page between its templates and the file write: injecting SEO, search and bundle tags, registering the images the HTML uses, and hashing the data the page read for the cache.',
         fileWriteTotalMs: 'Aggregate time spent writing rendered HTML files to the dist directory. Slow disk I/O or antivirus scanning can increase this time significantly.',
         cacheEntryTotalMs: 'Aggregate time spent updating the ISG cache manifest with new page entries. This includes serializing page metadata and dependency information.',
-        searchIndexGenerationMs: 'Time spent generating the search index from rendered page content. This includes extracting text, building the index structure, and computing relevance scores.',
+        searchIndexGenerationMs: 'Time spent generating the search index from page content before the pages render. This includes extracting text and headings and building the index structure.',
         searchIndexWriteMs: 'Time spent writing the search index JSON file to disk. Large indices with many documents will take longer to serialize and write.',
         assetCopyMs: 'Time spent copying static assets from the public directory to dist. Many files or large files will increase copy time. File watching may add overhead in dev mode.',
         cacheManifestSaveMs: 'Time spent persisting the updated cache manifest to disk. This happens at the end of every build to preserve ISG state for subsequent builds.',
@@ -99,11 +127,12 @@ function getPhaseDescription(key) {
         hookAfterAllMs: 'Time spent executing the afterAll hook defined in your config. Post-build processing like compression or uploads will show here.',
         hookBeforeRenderTotalMs: 'Aggregate time spent in beforeRender hooks across all pages. Per-page setup logic accumulates here.',
         hookAfterRenderTotalMs: 'Aggregate time spent in afterRender hooks across all pages. Per-page post-processing accumulates here.',
+        imageSettleMs: 'Time spent waiting for the responsive image variants and Open Graph cards the written pages use, and saving the images manifest. Reused files make this fast.',
     };
     return descriptions[key] || 'No description available for this phase.';
 }
 /**
- * Define the canonical execution order of phases
+ * Phases in the order a build runs them. The phases measured inside page rendering follow it.
  */
 const PHASE_EXECUTION_ORDER = [
     'lockAcquireMs',
@@ -112,17 +141,21 @@ const PHASE_EXECUTION_ORDER = [
     'cacheManifestLoadMs',
     'contentDiscoveryMs',
     'navigationBuildMs',
-    'hookBeforeAllMs',
     'typescriptCompileMs',
+    'templateIndexMs',
+    'pageRenderingMs',
+    'hookBeforeAllMs',
+    'searchIndexGenerationMs',
+    'searchIndexWriteMs',
     'shouldRebuildTotalMs',
     'hookBeforeRenderTotalMs',
+    'markdownRenderTotalMs',
     'renderPageTotalMs',
-    'hookAfterRenderTotalMs',
+    'postRenderTotalMs',
     'fileWriteTotalMs',
     'cacheEntryTotalMs',
-    'pageRenderingMs',
-    'searchIndexGenerationMs',
-    'searchIndexWriteMs',
+    'hookAfterRenderTotalMs',
+    'imageSettleMs',
     'tailwindInventoryMs',
     'cacheManifestSaveMs',
     'assetCopyMs',
@@ -133,1396 +166,1342 @@ const PHASE_EXECUTION_ORDER = [
     'lockReleaseMs',
 ];
 /**
- * Generate phase breakdown data sorted by duration
+ * Phases measured inside page rendering, so its time includes theirs. The per-page ones are
+ * sums over all pages.
  */
-function generatePhaseData(phases) {
-    return Object.entries(phases)
-        .filter(([, value]) => value !== undefined && value > 0)
-        .map(([key, value]) => ({
-        name: key,
-        value: value,
-        label: getPhaseLabel(key),
-        description: getPhaseDescription(key),
-    }))
-        .sort((a, b) => b.value - a.value);
+const PAGE_RENDERING_STEPS = new Set([
+    'hookBeforeAllMs',
+    'searchIndexGenerationMs',
+    'searchIndexWriteMs',
+    'shouldRebuildTotalMs',
+    'hookBeforeRenderTotalMs',
+    'markdownRenderTotalMs',
+    'renderPageTotalMs',
+    'postRenderTotalMs',
+    'fileWriteTotalMs',
+    'cacheEntryTotalMs',
+    'hookAfterRenderTotalMs',
+]);
+function executionIndex(key) {
+    const index = PHASE_EXECUTION_ORDER.indexOf(key);
+    return index === -1 ? PHASE_EXECUTION_ORDER.length : index;
 }
 /**
- * Generate phase data in execution order for timeline view
+ * The recorded phases in the order the build runs them, each with its share of the build and
+ * where its bar starts on the timeline: where the phase before it ended. The phases measured
+ * inside page rendering are nested under it, so no time is counted twice.
  */
-function generateTimelineData(phases) {
-    const activePhases = Object.entries(phases)
-        .filter(([, value]) => value !== undefined && value > 0)
-        .map(([key, value]) => ({
-        name: key,
-        value: value,
+function generatePhaseRows(phases, durationMs) {
+    const recorded = Object.entries(phases)
+        .filter((entry) => entry[1] !== undefined && entry[1] > 0)
+        .sort(([a], [b]) => executionIndex(a) - executionIndex(b));
+    const nested = recorded.some(([key]) => key === 'pageRenderingMs');
+    const isStep = (key) => nested && PAGE_RENDERING_STEPS.has(key);
+    const topLevel = recorded.filter(([key]) => !isStep(key));
+    const scale = Math.max(durationMs, topLevel.reduce((sum, [, value]) => sum + value, 0));
+    const toRow = ([key, value], start) => ({
+        key,
         label: getPhaseLabel(key),
         description: getPhaseDescription(key),
-        order: PHASE_EXECUTION_ORDER.indexOf(key),
-    }));
-    // Sort by execution order, unknown phases go to the end
-    return activePhases.sort((a, b) => {
-        const orderA = a.order === -1 ? 999 : a.order;
-        const orderB = b.order === -1 ? 999 : b.order;
-        return orderA - orderB;
+        value,
+        share: (value / scale) * 100,
+        start,
+        steps: [],
+    });
+    let elapsed = 0;
+    return topLevel.map((entry) => {
+        const row = toRow(entry, (elapsed / scale) * 100);
+        elapsed += entry[1];
+        if (entry[0] === 'pageRenderingMs') {
+            let stepStart = row.start;
+            row.steps = recorded
+                .filter(([key]) => isStep(key))
+                .map((step) => {
+                const stepRow = toRow(step, stepStart);
+                stepStart += stepRow.share;
+                return stepRow;
+            });
+        }
+        return row;
     });
 }
 /**
- * Generate the HTML report content
+ * The same phases, slowest first, and the steps inside a phase slowest first as well.
  */
-export function generateMetricsHtml(metrics) {
-    const { meta, totals, phases, counts, isg, pageTimings, incremental } = metrics;
-    const phaseData = generatePhaseData(phases);
-    const timelineData = generateTimelineData(phases);
-    const totalPhaseTime = phaseData.reduce((sum, p) => sum + p.value, 0);
-    const hasDetailedTimings = pageTimings && pageTimings.length > 0;
-    const hasIncremental = !!incremental;
-    // Calculate phase percentages for the chart
-    const phaseChartData = phaseData.map((p) => ({
-        ...p,
-        percent: (p.value / totals.durationMs) * 100,
-    }));
-    // Calculate timeline data with cumulative offsets for visualization
-    let cumulativeTime = 0;
-    const timelineChartData = timelineData.map((p) => {
-        const item = {
-            ...p,
-            percent: (p.value / totals.durationMs) * 100,
-            startOffset: (cumulativeTime / totals.durationMs) * 100,
-        };
-        cumulativeTime += p.value;
-        return item;
-    });
-    // Sort page timings by duration for detailed view
-    const sortedPageTimings = hasDetailedTimings
-        ? [...pageTimings].sort((a, b) => b.durationMs - a.durationMs)
-        : [];
-    // Generate JSON for embedding
-    const jsonData = JSON.stringify(metrics, null, 2);
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Stati Build Metrics Report - ${meta.timestamp}</title>
-  <style>
-    :root {
-      --bg-primary: #0d1117;
-      --bg-secondary: #161b22;
-      --bg-tertiary: #21262d;
-      --border-color: #30363d;
-      --text-primary: #e6edf3;
-      --text-secondary: #8b949e;
-      --text-muted: #6e7681;
-      --accent-blue: #58a6ff;
-      --accent-green: #3fb950;
-      --accent-yellow: #d29922;
-      --accent-red: #f85149;
-      --accent-purple: #a371f7;
-      --accent-cyan: #39c5cf;
-      --accent-orange: #db6d28;
-      --shadow: 0 3px 6px rgba(0,0,0,0.4);
-      --radius: 8px;
-    }
-
-    * {
+function sortByDuration(rows) {
+    return [...rows]
+        .sort((a, b) => b.value - a.value)
+        .map((row) => ({ ...row, steps: [...row.steps].sort((a, b) => b.value - a.value) }));
+}
+const CHEVRON_ICON = `<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>`;
+/**
+ * A horizontal bar. Thin values stay visible, and a bar never runs past the end of its track.
+ */
+function renderMeter(start, share) {
+    const width = Math.min(Math.max(share, 0.4), 100 - start);
+    return `<span class="meter" aria-hidden="true"><span class="meter-fill" style="left: ${start.toFixed(2)}%; width: ${width.toFixed(2)}%"></span></span>`;
+}
+/**
+ * Phase rows that open to describe what the phase measures. The timeline numbers the phases and
+ * starts each bar where the phase began.
+ */
+function renderPhaseRows(rows, view, isStep = false) {
+    return rows
+        .map((row, index) => {
+        const order = view === 'timeline' && !isStep
+            ? `
+                <span class="phase-order">${String(index + 1).padStart(2, '0')}</span>`
+            : '';
+        const steps = row.steps.length > 0
+            ? `
+            <ol class="phase-steps" aria-label="${escapeHtml(`Parts of ${row.label.toLowerCase()}`)}">${renderPhaseRows(row.steps, view, true)}
+            </ol>`
+            : '';
+        return `
+          <li class="${isStep ? 'phase phase-step' : 'phase'}">
+            <details>
+              <summary class="phase-row" title="${escapeHtml(row.key)}">${order}
+                <span class="phase-name">${escapeHtml(row.label)}</span>
+                ${renderMeter(view === 'timeline' ? row.start : 0, row.share)}
+                <span class="phase-time">${formatDuration(row.value)}</span>
+                <span class="phase-share">${row.share.toFixed(1)}%</span>
+                ${CHEVRON_ICON}
+              </summary>
+              <p class="phase-description">${escapeHtml(row.description)}</p>
+            </details>${steps}
+          </li>`;
+    })
+        .join('');
+}
+/**
+ * The phases, slowest first or in the order the build runs them.
+ */
+function renderPhasesSection(rows) {
+    const count = rows.reduce((sum, row) => sum + 1 + row.steps.length, 0);
+    const body = rows.length === 0
+        ? `
+      <p class="empty">No phases were recorded for this build.</p>`
+        : `
+      <div class="tabs" role="tablist" aria-label="Phase order">
+        <button type="button" class="tab" role="tab" id="phases-tab-duration" aria-controls="phases-duration" aria-selected="true">By duration</button>
+        <button type="button" class="tab" role="tab" id="phases-tab-timeline" aria-controls="phases-timeline" aria-selected="false" tabindex="-1">Timeline</button>
+      </div>
+
+      <div class="tab-panel" role="tabpanel" id="phases-duration" aria-labelledby="phases-tab-duration">
+        <p class="view-intro">Slowest first, as a share of the build. Open a phase to see what it measures.</p>
+        <ol class="phases" data-view="duration">${renderPhaseRows(sortByDuration(rows), 'duration')}
+        </ol>
+      </div>
+
+      <div class="tab-panel" role="tabpanel" id="phases-timeline" aria-labelledby="phases-tab-timeline" hidden>
+        <p class="view-intro">In the order the build runs them. Steps inside page rendering are totals over all pages, so their bars show how long they took, not when.</p>
+        <ol class="phases" data-view="timeline">${renderPhaseRows(rows, 'timeline')}
+        </ol>
+      </div>`;
+    return `
+    <section class="section" id="phases" aria-labelledby="phases-title">
+      <div class="section-head">
+        <h2 class="section-title" id="phases-title">Phase breakdown</h2>${count > 0
+        ? `
+        <span class="section-note">${count} ${count === 1 ? 'phase' : 'phases'}</span>`
+        : ''}
+      </div>${body}
+    </section>`;
+}
+/**
+ * One group of counts, headed by a rule, with a value per row.
+ */
+function renderCountGroup(title, items, status) {
+    const rows = items
+        .filter((item) => item !== null)
+        .map(([label, value]) => `
+            <div class="count"><dt>${label}</dt><dd>${value}</dd></div>`)
+        .join('');
+    return `
+        <div class="group">
+          <h3 class="group-title">${title}${status ? `<span class="group-status">${status}</span>` : ''}</h3>
+          <dl class="counts">${rows}
+          </dl>
+        </div>`;
+}
+/**
+ * Every count of the build, grouped.
+ */
+function renderCountsSection(metrics) {
+    const { counts, isg } = metrics;
+    const optional = (label, value) => value === undefined ? null : [label, formatCount(value)];
+    const perPage = counts.renderedPages > 0 ? (counts.templatesLoaded / counts.renderedPages).toFixed(1) : '0';
+    return `
+    <section class="section" id="counts" aria-labelledby="counts-title">
+      <h2 class="section-title" id="counts-title">Counts</h2>
+      <div class="groups">${renderCountGroup('Pages', [
+        ['Total', formatCount(counts.totalPages)],
+        ['Rendered', formatCount(counts.renderedPages)],
+        ['From cache', formatCount(counts.cachedPages)],
+        ['Markdown files', formatCount(counts.markdownFilesProcessed)],
+    ])}${renderCountGroup('Templates', [
+        optional('Indexed', counts.templatesIndexed),
+        ['Loaded', formatCount(counts.templatesLoaded)],
+        ['Per rendered page', perPage],
+        optional('Renders', counts.templateRenders),
+        optional('Cached includes', counts.includeCacheHits),
+    ])}${renderCountGroup('ISG cache', [
+        ['Hit rate', formatPercent(isg.cacheHitRate)],
+        ['Manifest entries', formatCount(isg.manifestEntries)],
+        ['Invalidated', formatCount(isg.invalidatedEntries)],
+    ], isg.enabled ? 'Enabled' : 'Disabled')}${renderCountGroup('Assets', [
+        ['Copied', formatCount(counts.assetsCopied)],
+        optional('Images generated', counts.imagesGenerated),
+        optional('Images reused', counts.imagesCached),
+        optional('Images failed', counts.imagesFailed),
+    ])}
+      </div>
+    </section>`;
+}
+/**
+ * What triggered a dev server rebuild and what it did.
+ */
+function renderIncrementalSection(incremental) {
+    return `
+    <section class="section" id="rebuild" aria-labelledby="rebuild-title">
+      <h2 class="section-title" id="rebuild-title">Incremental rebuild</h2>
+      <dl class="facts">
+        <div class="fact">
+          <dt>Changed file</dt>
+          <dd>${escapeHtml(incremental.triggerFile)}</dd>
+        </div>
+        <div class="fact">
+          <dt>Type</dt>
+          <dd>${escapeHtml(incremental.triggerType)}</dd>
+        </div>
+        <div class="fact">
+          <dt>Duration</dt>
+          <dd>${formatDuration(incremental.durationMs)}</dd>
+        </div>
+        <div class="fact">
+          <dt>Pages</dt>
+          <dd>${formatCount(incremental.renderedPages)} rendered, ${formatCount(incremental.cachedPages)} cached</dd>
+        </div>
+      </dl>
+    </section>`;
+}
+/**
+ * Every page, slowest first: rendered (solid square) or served from cache (hollow circle),
+ * with its duration against the slowest page and the templates it rendered.
+ */
+function renderPagesSection(pageTimings) {
+    const pages = [...pageTimings].sort((a, b) => b.durationMs - a.durationMs);
+    const slowest = pages.reduce((max, page) => Math.max(max, page.durationMs), 0);
+    const rendered = pages.filter((page) => !page.cached).length;
+    const rows = pages
+        .map((page) => {
+        const status = page.cached ? 'cached' : 'rendered';
+        const meter = slowest > 0 && page.durationMs > 0
+            ? renderMeter(0, (page.durationMs / slowest) * 100)
+            : '<span class="meter meter-empty" aria-hidden="true"></span>';
+        // A page served from cache did not render, so it has no render time
+        const duration = page.cached && page.durationMs === 0 ? '–' : formatDuration(page.durationMs);
+        return `
+              <tr>
+                <td class="page-url"><span title="${escapeHtml(page.url)}">${escapeHtml(page.url)}</span></td>
+                <td><span class="status status-${status}"><span class="marker" aria-hidden="true"></span>${status}</span></td>
+                <td class="page-duration"><span class="duration">${meter}<span class="num">${duration}</span></span></td>
+                <td class="num">${page.templatesLoaded ?? '–'}</td>
+                <td class="num">${page.templateRenders ?? '–'}</td>
+              </tr>`;
+    })
+        .join('');
+    return `
+    <section class="section" id="pages" aria-labelledby="pages-title">
+      <h2 class="section-title" id="pages-title">Page timings</h2>
+      <figure class="panel">
+        <figcaption class="panel-bar">
+          <span>${formatCount(pages.length)} ${pages.length === 1 ? 'page' : 'pages'}, slowest first</span>
+          <span class="panel-summary">${formatCount(rendered)} rendered · ${formatCount(pages.length - rendered)} cached</span>
+        </figcaption>
+        <div class="table-scroll" tabindex="0" role="region" aria-labelledby="pages-title">
+          <table class="pages">
+            <thead>
+              <tr>
+                <th scope="col">Page</th>
+                <th scope="col">Result</th>
+                <th scope="col" class="page-duration">Duration</th>
+                <th scope="col" class="num">Templates</th>
+                <th scope="col" class="num">Renders</th>
+              </tr>
+            </thead>
+            <tbody>${rows}
+            </tbody>
+          </table>
+        </div>
+      </figure>
+    </section>`;
+}
+const REPORT_STYLES = `
+    *,
+    *::before,
+    *::after {
       box-sizing: border-box;
-      margin: 0;
-      padding: 0;
+    }
+
+    html {
+      background-color: rgb(var(--canvas));
+      scrollbar-color: rgb(var(--line-strong)) transparent;
+      scroll-padding-top: 1.5rem;
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      line-height: 1.5;
+      margin: 0;
       min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      background-color: rgb(var(--canvas));
+      color: rgb(var(--ink));
+      font-family: var(--font-sans);
+      font-size: 16px;
+      line-height: 1.6;
+      font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'cv11' 1;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
 
-    .container {
-      max-width: 1400px;
-      margin: 0 auto;
-      padding: 24px;
+    ::selection {
+      background-color: rgb(var(--accent) / 0.25);
     }
 
-    /* Header */
-    header {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border-color);
-      border-radius: var(--radius);
-      padding: 24px;
-      margin-bottom: 24px;
-      box-shadow: var(--shadow);
+    :focus-visible {
+      outline: 2px solid rgb(var(--accent));
+      outline-offset: 2px;
     }
 
-    header h1 {
-      font-size: 24px;
-      font-weight: 600;
-      margin-bottom: 8px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
+    h1,
+    h2,
+    h3,
+    p,
+    pre,
+    dl,
+    dd,
+    ol,
+    figure {
+      margin: 0;
+    }
+
+    ol {
+      padding: 0;
+      list-style: none;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .meta-time,
+    .fact dd,
+    .stat-value,
+    .section-note,
+    .phase-order,
+    .phase-time,
+    .phase-share,
+    .counts dd,
+    .panel-bar,
+    .page-url,
+    .num,
+    .code {
+      font-family: var(--font-mono);
+      font-feature-settings: normal;
+      font-variant-ligatures: none;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .shell {
+      width: 100%;
+      max-width: 72rem;
+      margin: 0 auto;
+      padding-left: 1rem;
+      padding-right: 1rem;
     }
 
-    header h1 svg {
-      width: 32px;
-      height: 32px;
-      color: var(--accent-blue);
+    /* Header bar */
+
+    .bar {
+      border-bottom: 1px solid rgb(var(--line));
     }
 
-    .meta-info {
+    .bar .shell {
+      min-height: 3.5rem;
       display: flex;
       flex-wrap: wrap;
-      gap: 16px 32px;
-      margin-top: 16px;
-      font-size: 13px;
-      color: var(--text-secondary);
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem 1.5rem;
+      padding-top: 0.625rem;
+      padding-bottom: 0.625rem;
     }
 
-    .meta-info span {
+    .brand {
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: 0.625rem;
+      min-width: 0;
     }
 
-    .meta-info svg {
-      width: 14px;
-      height: 14px;
-      opacity: 0.7;
+    .brand-mark {
+      width: 1.25rem;
+      height: 1.25rem;
+      flex: none;
+      color: rgb(var(--accent));
     }
 
-    /* Summary Cards */
-    .summary-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 16px;
-      margin-bottom: 24px;
+    .brand-name {
+      font-family: var(--font-display);
+      font-size: 1.125rem;
+      font-weight: 800;
+      font-stretch: 112%;
+      letter-spacing: -0.02em;
+      line-height: 1;
     }
 
-    .summary-card {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border-color);
-      border-radius: var(--radius);
-      padding: 20px;
-      box-shadow: var(--shadow);
+    .brand-rule {
+      width: 1px;
+      height: 1rem;
+      background-color: rgb(var(--line-strong));
     }
 
-    .summary-card .label {
-      font-size: 12px;
+    .brand-context {
+      font-size: 0.875rem;
       font-weight: 500;
-      color: var(--text-secondary);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 8px;
+      color: rgb(var(--muted));
+      white-space: nowrap;
     }
 
-    .summary-card .value {
-      font-size: 28px;
-      font-weight: 600;
-      color: var(--text-primary);
+    .bar-nav {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+      margin: 0 -0.5rem;
     }
 
-    .summary-card .subtext {
-      font-size: 12px;
-      color: var(--text-muted);
-      margin-top: 4px;
+    .bar-nav a {
+      padding: 0.375rem 0.5rem;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1.25;
+      color: rgb(var(--muted));
+      text-decoration: none;
+      transition: color 150ms, background-color 150ms;
     }
 
-    .summary-card.highlight {
-      border-color: var(--accent-blue);
-      background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(88, 166, 255, 0.1) 100%);
+    .bar-nav a:hover {
+      background-color: rgb(var(--raised));
+      color: rgb(var(--ink));
     }
 
-    .summary-card.success .value {
-      color: var(--accent-green);
-    }
+    /* Summary */
 
-    .summary-card.warning .value {
-      color: var(--accent-yellow);
+    .main {
+      flex: 1;
+      padding-top: 2.5rem;
+      padding-bottom: 4rem;
     }
 
-    /* Section */
-    .section {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border-color);
-      border-radius: var(--radius);
-      margin-bottom: 24px;
-      box-shadow: var(--shadow);
-      overflow: hidden;
+    .headline {
+      font-family: var(--font-display);
+      font-size: 1.875rem;
+      font-weight: 800;
+      font-stretch: 108%;
+      letter-spacing: -0.015em;
+      line-height: 1.1;
+      text-wrap: balance;
     }
 
-    .section-header {
+    .meta {
       display: flex;
+      flex-wrap: wrap;
       align-items: center;
-      justify-content: space-between;
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--border-color);
-      background: var(--bg-tertiary);
+      gap: 0.5rem 0.75rem;
+      margin-top: 0.875rem;
+      font-size: 0.875rem;
+      color: rgb(var(--muted));
     }
 
-    .section-header h2 {
-      font-size: 16px;
-      font-weight: 600;
-      display: flex;
+    .type-badge {
+      display: inline-flex;
       align-items: center;
-      gap: 10px;
-    }
-
-    .section-header svg {
-      width: 18px;
-      height: 18px;
-      color: var(--accent-blue);
-    }
-
-    .section-content {
-      padding: 20px;
+      padding: 0.125rem 0.5rem;
+      border: 1px solid rgb(var(--line-strong));
+      border-radius: 4px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      line-height: 1.5;
+      color: rgb(var(--ink));
+      text-transform: capitalize;
     }
 
-    /* Phase Breakdown */
-    .phase-list {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
+    .meta-time {
+      font-size: 0.75rem;
+      color: rgb(var(--faint));
     }
 
-    .phase-item {
+    .stats {
       display: grid;
-      grid-template-columns: 200px 1fr 100px 80px 32px;
-      align-items: center;
-      gap: 16px;
-      padding: 12px 16px;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 1px;
+      margin-top: 1.75rem;
+      overflow: hidden;
+      border: 1px solid rgb(var(--line));
       border-radius: 8px;
-      background: var(--bg-tertiary);
-      cursor: pointer;
-      transition: all 0.2s ease;
+      background-color: rgb(var(--line));
     }
 
-    .phase-item:hover {
-      background: var(--bg-secondary);
-      box-shadow: 0 0 0 1px var(--border-color);
+    .stat {
+      min-width: 0;
+      padding: 1rem 1.25rem;
+      background-color: rgb(var(--canvas));
     }
 
-    .phase-item.expanded {
-      background: var(--bg-secondary);
-      box-shadow: 0 0 0 1px var(--accent-blue);
+    .stat dt {
+      font-size: 0.8125rem;
+      color: rgb(var(--muted));
     }
 
-    .phase-name {
-      font-size: 14px;
+    .stat-value {
+      margin-top: 0.25rem;
+      font-size: 1.5rem;
       font-weight: 500;
-      color: var(--text-primary);
+      line-height: 1.25;
+      letter-spacing: -0.02em;
+      color: rgb(var(--ink));
+      overflow-wrap: anywhere;
     }
 
-    .phase-bar-container {
-      height: 24px;
-      background: rgba(0,0,0,0.3);
-      border-radius: 4px;
-      overflow: hidden;
-      position: relative;
+    .stat-note {
+      margin-top: 0.25rem;
+      font-size: 0.8125rem;
+      line-height: 1.5;
+      color: rgb(var(--faint));
     }
 
-    .phase-bar {
-      height: 100%;
-      background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
-      border-radius: 4px;
-      transition: width 0.3s ease;
-      min-width: 2px;
+    .facts {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem 2.5rem;
+      margin-top: 1.25rem;
     }
 
-    .phase-duration {
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--text-primary);
-      text-align: right;
-      font-variant-numeric: tabular-nums;
+    .fact {
+      min-width: 0;
     }
 
-    .phase-percent {
-      font-size: 13px;
-      color: var(--text-secondary);
-      text-align: right;
-      font-variant-numeric: tabular-nums;
+    .fact dt {
+      font-size: 0.8125rem;
+      color: rgb(var(--faint));
     }
 
-    .phase-expand-icon {
-      width: 20px;
-      height: 20px;
-      color: var(--text-muted);
-      transition: transform 0.2s ease;
+    .fact dd {
+      margin-top: 0.125rem;
+      font-size: 0.8125rem;
+      overflow-wrap: anywhere;
+      color: rgb(var(--ink));
     }
 
-    .phase-item.expanded .phase-expand-icon {
-      transform: rotate(180deg);
-      color: var(--accent-blue);
+    /* Sections */
+
+    .section {
+      margin-top: 2.5rem;
+      padding-top: 1.75rem;
+      border-top: 1px solid rgb(var(--line));
     }
 
-    .phase-description {
-      grid-column: 1 / -1;
-      padding: 16px;
-      margin-top: 8px;
-      background: var(--bg-primary);
-      border-radius: 6px;
-      font-size: 13px;
-      line-height: 1.6;
-      color: var(--text-secondary);
-      display: none;
+    .section-head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 0.25rem 1rem;
     }
 
-    .phase-item.expanded .phase-description {
-      display: block;
+    .section-title {
+      font-family: var(--font-display);
+      font-size: 1.125rem;
+      font-weight: 700;
+      font-stretch: 108%;
+      letter-spacing: -0.01em;
+      line-height: 1.25;
     }
 
-    .phase-description code {
-      background: var(--bg-tertiary);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 12px;
-      color: var(--accent-cyan);
+    .section-note {
+      font-size: 0.75rem;
+      color: rgb(var(--faint));
     }
 
-    /* Timeline View */
-    .timeline-container {
-      position: relative;
-      padding: 20px 0;
+    .section > .section-title + * {
+      margin-top: 1rem;
     }
 
-    .timeline-track {
-      height: 40px;
-      background: var(--bg-tertiary);
-      border-radius: 8px;
-      position: relative;
-      overflow: hidden;
-      margin-bottom: 16px;
+    .empty {
+      margin-top: 1rem;
+      font-size: 0.875rem;
+      color: rgb(var(--muted));
     }
 
-    .timeline-segment {
-      position: absolute;
-      height: 100%;
+    /* Tabs */
+
+    .tabs {
       display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 10px;
+      gap: 1.5rem;
+      margin-top: 1rem;
+      border-bottom: 1px solid rgb(var(--line));
+    }
+
+    .tab {
+      margin-bottom: -1px;
+      padding: 0.5rem 0;
+      border: 0;
+      border-radius: 0;
+      background: none;
+      font: inherit;
+      font-size: 0.875rem;
       font-weight: 500;
-      color: white;
-      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
-      overflow: hidden;
+      line-height: 1.5;
+      color: rgb(var(--muted));
       cursor: pointer;
-      transition: filter 0.2s ease;
-      min-width: 2px;
+      transition: color 150ms;
     }
 
-    .timeline-segment:hover {
-      filter: brightness(1.2);
-      z-index: 10;
+    .tab:hover {
+      color: rgb(var(--ink));
     }
 
-    .timeline-segment span {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding: 0 4px;
+    .tab[aria-selected='true'] {
+      color: rgb(var(--ink));
+      box-shadow: inset 0 -2px 0 rgb(var(--accent));
     }
 
-    .timeline-list {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
+    .view-intro {
+      max-width: 40rem;
+      margin-top: 1rem;
+      font-size: 0.875rem;
+      color: rgb(var(--muted));
+    }
+
+    /* Phases */
+
+    .phases {
+      --order: 0rem;
+      margin-top: 1rem;
+      border-bottom: 1px solid rgb(var(--line));
     }
 
-    .timeline-item {
+    .phases[data-view='timeline'] {
+      --order: 2.75rem;
+    }
+
+    .phase-row {
       display: grid;
-      grid-template-columns: 32px 180px 1fr 100px;
+      grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 5.5rem 3.25rem 1rem;
+      grid-template-areas: 'name meter time share icon';
       align-items: center;
-      gap: 12px;
-      padding: 10px 12px;
-      border-radius: 6px;
-      background: var(--bg-tertiary);
+      column-gap: 1rem;
+      padding: 0.625rem 0;
+      border-top: 1px solid rgb(var(--line));
       cursor: pointer;
-      transition: all 0.2s ease;
+      list-style: none;
     }
 
-    .timeline-item:hover {
-      background: var(--bg-secondary);
+    .phase-row::-webkit-details-marker {
+      display: none;
     }
 
-    .timeline-item.expanded {
-      background: var(--bg-secondary);
-      box-shadow: 0 0 0 1px var(--accent-blue);
+    .phases > .phase:first-child > details > .phase-row {
+      border-top-color: rgb(var(--ink));
     }
 
-    .timeline-order {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      background: var(--bg-primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 11px;
-      font-weight: 600;
-      color: var(--text-secondary);
+    .phases[data-view='timeline'] .phase-row {
+      grid-template-columns: 1.75rem minmax(0, 13rem) minmax(0, 1fr) 5.5rem 3.25rem 1rem;
+      grid-template-areas: 'order name meter time share icon';
     }
 
-    .timeline-item:nth-child(1) .timeline-order { background: var(--accent-blue); color: white; }
-    .timeline-item:nth-child(2) .timeline-order { background: var(--accent-cyan); color: white; }
-    .timeline-item:nth-child(3) .timeline-order { background: var(--accent-green); color: white; }
+    .phase-order {
+      grid-area: order;
+      font-size: 0.75rem;
+      color: rgb(var(--faint));
+    }
 
-    .timeline-name {
-      font-size: 13px;
+    .phase-name {
+      grid-area: name;
+      min-width: 0;
+      font-size: 0.875rem;
       font-weight: 500;
-      color: var(--text-primary);
+      line-height: 1.4;
+      overflow-wrap: anywhere;
+      transition: color 150ms;
     }
 
-    .timeline-bar-container {
-      height: 20px;
-      background: rgba(0,0,0,0.3);
-      border-radius: 4px;
-      overflow: hidden;
-      position: relative;
+    .phase-row:hover .phase-name {
+      color: rgb(var(--accent-ink));
     }
 
-    .timeline-bar {
-      height: 100%;
-      border-radius: 4px;
-      min-width: 2px;
+    .phase-row .meter {
+      grid-area: meter;
     }
 
-    .timeline-time {
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-primary);
+    .phase-time {
+      grid-area: time;
+      font-size: 0.8125rem;
       text-align: right;
-      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
     }
 
-    .timeline-description {
-      grid-column: 1 / -1;
-      padding: 12px;
-      margin-top: 8px;
-      background: var(--bg-primary);
-      border-radius: 6px;
-      font-size: 12px;
-      line-height: 1.6;
-      color: var(--text-secondary);
-      display: none;
+    .phase-share {
+      grid-area: share;
+      font-size: 0.75rem;
+      text-align: right;
+      color: rgb(var(--faint));
     }
 
-    .timeline-item.expanded .timeline-description {
-      display: block;
+    .chevron {
+      grid-area: icon;
+      width: 1rem;
+      height: 1rem;
+      color: rgb(var(--faint));
+      transition: transform 150ms, color 150ms;
     }
 
-    /* Phase colors for timeline */
-    .phase-color-0 { background: linear-gradient(90deg, #58a6ff, #388bfd); }
-    .phase-color-1 { background: linear-gradient(90deg, #39c5cf, #2ea9b3); }
-    .phase-color-2 { background: linear-gradient(90deg, #3fb950, #2ea043); }
-    .phase-color-3 { background: linear-gradient(90deg, #a371f7, #8957e5); }
-    .phase-color-4 { background: linear-gradient(90deg, #d29922, #bb8009); }
-    .phase-color-5 { background: linear-gradient(90deg, #f85149, #da3633); }
-    .phase-color-6 { background: linear-gradient(90deg, #db6d28, #bd561d); }
-    .phase-color-7 { background: linear-gradient(90deg, #8b949e, #6e7681); }
+    .phase-row:hover .chevron {
+      color: rgb(var(--ink));
+    }
 
-    /* Waterfall Chart */
-    .waterfall-container {
-      overflow-x: auto;
-      margin-top: 16px;
+    details[open] > .phase-row .chevron {
+      transform: rotate(90deg);
     }
 
-    .waterfall {
-      min-width: 600px;
+    .phase-description {
+      max-width: 42rem;
+      padding: 0 0 1rem var(--order);
+      font-size: 0.875rem;
+      line-height: 1.65;
+      color: rgb(var(--muted));
+    }
+
+    .phase-step {
       position: relative;
     }
 
-    .waterfall-row {
-      display: flex;
-      align-items: center;
-      height: 32px;
-      gap: 12px;
-      border-bottom: 1px solid var(--border-color);
+    .phase-step::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: var(--order);
+      width: 1px;
+      background-color: rgb(var(--line-strong));
     }
 
-    .waterfall-row:last-child {
-      border-bottom: none;
+    .phase-step .phase-row {
+      border-top: 0;
     }
 
-    .waterfall-label {
-      width: 160px;
-      flex-shrink: 0;
-      font-size: 12px;
-      color: var(--text-secondary);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .phase-step .phase-name {
+      padding-left: 0.875rem;
+      font-weight: 400;
+      color: rgb(var(--muted));
     }
 
-    .waterfall-track {
-      flex: 1;
-      height: 16px;
-      background: var(--bg-tertiary);
-      border-radius: 2px;
+    .phase-step .phase-description {
+      padding-left: calc(var(--order) + 0.875rem);
+    }
+
+    /* Bars */
+
+    .meter {
       position: relative;
+      display: block;
+      height: 0.375rem;
+      overflow: hidden;
+      border-radius: 2px;
+      background-color: rgb(var(--line));
     }
 
-    .waterfall-bar {
+    .meter-fill {
       position: absolute;
-      height: 100%;
+      top: 0;
+      bottom: 0;
+      min-width: 2px;
       border-radius: 2px;
-      min-width: 3px;
+      background-color: rgb(var(--ink));
     }
 
-    .waterfall-bar.cached {
-      background: var(--accent-green);
-      opacity: 0.6;
+    .phase-step .meter-fill {
+      background-color: rgb(var(--muted));
     }
 
-    .waterfall-bar.rendered {
-      background: var(--accent-blue);
-    }
+    /* Counts */
 
-    .waterfall-time {
-      width: 80px;
-      flex-shrink: 0;
-      font-size: 12px;
-      color: var(--text-secondary);
-      text-align: right;
-      font-variant-numeric: tabular-nums;
-    }
-
-    /* Stats Grid */
-    .stats-grid {
+    .groups {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-      gap: 16px;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 2rem 2.5rem;
+      margin-top: 1.25rem;
     }
 
-    .stat-item {
+    .group-title {
       display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-
-    .stat-label {
-      font-size: 12px;
-      color: var(--text-secondary);
-    }
-
-    .stat-value {
-      font-size: 18px;
+      justify-content: space-between;
+      gap: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid rgb(var(--ink));
+      font-size: 0.875rem;
       font-weight: 600;
-      color: var(--text-primary);
-      font-variant-numeric: tabular-nums;
+      line-height: 1.25;
     }
 
-    /* ISG Section */
-    .isg-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
+    .group-status {
+      font-weight: 400;
+      color: rgb(var(--muted));
     }
 
-    .isg-stat {
-      text-align: center;
-      padding: 20px;
-      background: var(--bg-tertiary);
-      border-radius: var(--radius);
+    .count {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.5rem 0;
+      border-bottom: 1px solid rgb(var(--line));
+      font-size: 0.875rem;
     }
 
-    .isg-stat .value {
-      font-size: 32px;
-      font-weight: 700;
+    .count dt {
+      color: rgb(var(--muted));
     }
 
-    .isg-stat .label {
-      font-size: 13px;
-      color: var(--text-secondary);
-      margin-top: 4px;
+    .counts dd {
+      font-size: 0.8125rem;
+      color: rgb(var(--ink));
     }
 
-    .isg-stat.hit .value {
-      color: var(--accent-green);
-    }
+    /* Panels */
 
-    .isg-stat.miss .value {
-      color: var(--accent-yellow);
+    .panel {
+      overflow: hidden;
+      border: 1px solid rgb(var(--line));
+      border-radius: 8px;
+      background-color: rgb(var(--sunken));
     }
 
-    /* Cache Hit Rate Ring */
-    .cache-ring-container {
+    .panel-bar {
       display: flex;
-      justify-content: center;
+      flex-wrap: wrap;
       align-items: center;
-      padding: 20px;
+      justify-content: space-between;
+      gap: 0.25rem 1rem;
+      min-height: 2.5rem;
+      padding: 0.375rem 1rem;
+      border-bottom: 1px solid rgb(var(--line));
+      background-color: rgb(var(--canvas));
+      font-size: 0.75rem;
+      line-height: 1.5;
+      color: rgb(var(--faint));
     }
 
-    .cache-ring {
-      position: relative;
-      width: 150px;
-      height: 150px;
+    .panel-summary {
+      font-family: var(--font-sans);
     }
 
-    .cache-ring svg {
-      transform: rotate(-90deg);
+    .table-scroll {
+      max-height: 32rem;
+      overflow: auto;
     }
 
-    .cache-ring-bg {
-      fill: none;
-      stroke: var(--bg-tertiary);
-      stroke-width: 12;
+    .pages {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.8125rem;
     }
 
-    .cache-ring-progress {
-      fill: none;
-      stroke: var(--accent-green);
-      stroke-width: 12;
-      stroke-linecap: round;
-      transition: stroke-dashoffset 0.5s ease;
+    .pages th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      padding: 0.5rem 1rem;
+      border-bottom: 1px solid rgb(var(--line));
+      background-color: rgb(var(--sunken));
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-align: left;
+      white-space: nowrap;
+      color: rgb(var(--muted));
     }
 
-    .cache-ring-text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
+    .pages td {
+      padding: 0.5rem 1rem;
+      border-top: 1px solid rgb(var(--line));
+      vertical-align: middle;
+      white-space: nowrap;
     }
 
-    .cache-ring-value {
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--accent-green);
+    .pages tbody tr:first-child td {
+      border-top: 0;
     }
 
-    .cache-ring-label {
-      font-size: 11px;
-      color: var(--text-secondary);
+    .pages .num {
+      text-align: right;
     }
 
-    /* Page Timings Table */
-    .page-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 13px;
+    .page-url {
+      color: rgb(var(--ink));
     }
 
-    .page-table th {
-      text-align: left;
-      padding: 12px 16px;
-      background: var(--bg-tertiary);
-      color: var(--text-secondary);
-      font-weight: 500;
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      border-bottom: 1px solid var(--border-color);
+    .page-url span {
+      display: block;
+      max-width: 26rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .page-table td {
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--border-color);
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
       vertical-align: middle;
     }
 
-    .page-table tr:hover {
-      background: var(--bg-tertiary);
+    .status-rendered {
+      color: rgb(var(--ink));
     }
 
-    .page-table .url {
-      font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 12px;
-      color: var(--accent-blue);
-      max-width: 400px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    .status-cached {
+      color: rgb(var(--faint));
     }
 
-    .page-table .duration {
-      font-variant-numeric: tabular-nums;
-      font-weight: 500;
+    .marker {
+      width: 0.375rem;
+      height: 0.375rem;
+      flex: none;
     }
 
-    .page-table .status {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 10px;
-      border-radius: 20px;
-      font-size: 11px;
-      font-weight: 500;
+    .status-rendered .marker {
+      background-color: rgb(var(--ink));
     }
 
-    .page-table .status.cached {
-      background: rgba(63, 185, 80, 0.15);
-      color: var(--accent-green);
+    .status-cached .marker {
+      border: 1px solid currentColor;
+      border-radius: 50%;
     }
 
-    .page-table .status.rendered {
-      background: rgba(88, 166, 255, 0.15);
-      color: var(--accent-blue);
+    .page-duration {
+      width: 40%;
+      text-align: right;
     }
 
-    /* Tabs */
-    .tabs {
+    .duration {
       display: flex;
-      gap: 4px;
-      padding: 8px;
-      background: var(--bg-tertiary);
-      border-radius: var(--radius);
-      margin-bottom: 16px;
+      align-items: center;
+      gap: 0.75rem;
     }
 
-    .tab {
-      padding: 8px 16px;
-      border-radius: 6px;
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-secondary);
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      transition: all 0.2s ease;
+    .duration .meter {
+      flex: 1;
+      min-width: 6rem;
     }
 
-    .tab:hover {
-      color: var(--text-primary);
-      background: var(--bg-secondary);
+    .duration .num {
+      min-width: 4.75rem;
+      text-align: right;
     }
 
-    .tab.active {
-      color: var(--text-primary);
-      background: var(--bg-secondary);
-      box-shadow: var(--shadow);
+    .meter-empty {
+      background-color: transparent;
     }
 
-    .tab-content {
-      display: none;
-    }
+    /* Raw JSON */
 
-    .tab-content.active {
-      display: block;
+    .disclosure summary {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      width: fit-content;
+      cursor: pointer;
+      list-style: none;
+      border-radius: 4px;
     }
 
-    .phase-view {
+    .disclosure summary::-webkit-details-marker {
       display: none;
     }
 
-    .phase-view.active {
-      display: block;
-    }
-
-    /* JSON View */
-    .json-view {
-      background: var(--bg-tertiary);
-      border-radius: var(--radius);
-      padding: 16px;
-      overflow-x: auto;
-    }
-
-    .json-view pre {
-      font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 12px;
-      line-height: 1.6;
-      color: var(--text-primary);
-      margin: 0;
+    .disclosure summary:hover .section-title {
+      color: rgb(var(--accent-ink));
     }
 
-    /* Incremental Section */
-    .incremental-info {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
+    .disclosure[open] summary .chevron {
+      transform: rotate(90deg);
     }
 
-    .trigger-file {
-      font-family: 'SF Mono', Monaco, Consolas, monospace;
-      font-size: 12px;
-      color: var(--accent-yellow);
-      background: rgba(210, 153, 34, 0.1);
-      padding: 8px 12px;
-      border-radius: 4px;
-      word-break: break-all;
+    .disclosure .panel {
+      margin-top: 1rem;
     }
 
-    /* Badges */
-    .badge {
+    .copy-button {
       display: inline-flex;
       align-items: center;
-      gap: 4px;
-      padding: 2px 8px;
-      border-radius: 12px;
-      font-size: 11px;
+      padding: 0.25rem 0.5rem;
+      margin-right: -0.5rem;
+      border: 0;
+      border-radius: 6px;
+      background: none;
+      font: inherit;
+      font-family: var(--font-sans);
+      font-size: 0.75rem;
       font-weight: 500;
+      color: rgb(var(--muted));
+      cursor: pointer;
+      transition: color 150ms, background-color 150ms;
     }
 
-    .badge.ci {
-      background: rgba(163, 113, 247, 0.15);
-      color: var(--accent-purple);
+    .copy-button:hover {
+      background-color: rgb(var(--raised));
+      color: rgb(var(--ink));
     }
 
-    .badge.local {
-      background: rgba(88, 166, 255, 0.15);
-      color: var(--accent-blue);
+    .copy-button[data-copied='true'] {
+      color: rgb(var(--accent-ink));
     }
 
-    .badge.detailed {
-      background: rgba(57, 197, 207, 0.15);
-      color: var(--accent-cyan);
+    .code {
+      max-height: 36rem;
+      overflow: auto;
+      padding: 1rem 1.25rem;
+      font-size: 0.8125rem;
+      line-height: 1.65;
+      tab-size: 2;
+      color: rgb(var(--ink));
     }
 
-    /* Flags */
-    .flags {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-    }
+    /* Footer */
 
-    .flag {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 10px;
-      background: var(--bg-tertiary);
-      border-radius: 4px;
-      font-size: 12px;
-      color: var(--text-secondary);
+    .footer {
+      border-top: 1px solid rgb(var(--line));
+      font-size: 0.8125rem;
+      color: rgb(var(--faint));
     }
 
-    .flag.enabled {
-      color: var(--accent-green);
+    .footer .shell {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem 0.75rem;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
     }
 
-    .flag.disabled {
-      color: var(--text-muted);
+    .footer-name {
+      font-weight: 600;
+      color: rgb(var(--muted));
     }
 
-    /* Tooltip */
-    [data-tooltip] {
-      position: relative;
-      cursor: help;
-    }
+    @media (prefers-reduced-motion: no-preference) {
+      .main {
+        animation: report-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
+      }
 
-    [data-tooltip]:hover::after {
-      content: attr(data-tooltip);
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      padding: 6px 10px;
-      background: var(--bg-tertiary);
-      color: var(--text-primary);
-      font-size: 12px;
-      border-radius: 4px;
-      white-space: nowrap;
-      z-index: 100;
-      box-shadow: var(--shadow);
-      border: 1px solid var(--border-color);
+      @keyframes report-in {
+        from {
+          opacity: 0;
+          transform: translateY(6px);
+        }
+      }
     }
 
-    /* Responsive */
-    @media (max-width: 768px) {
-      .container {
-        padding: 16px;
+    @media (max-width: 639px) {
+      .phase-row {
+        grid-template-columns: minmax(0, 1fr) auto auto 1rem;
+        grid-template-areas:
+          'name time share icon'
+          'meter meter meter meter';
+        row-gap: 0.5rem;
       }
 
-      .phase-item {
-        grid-template-columns: 1fr;
-        gap: 8px;
+      .phases[data-view='timeline'] .phase-row {
+        grid-template-columns: 1.75rem minmax(0, 1fr) auto auto 1rem;
+        grid-template-areas:
+          'order name time share icon'
+          '. meter meter meter meter';
       }
 
-      .phase-duration,
-      .phase-percent {
-        text-align: left;
+      .phase-step .meter {
+        margin-left: 0.875rem;
       }
 
-      .meta-info {
-        flex-direction: column;
-        gap: 8px;
+      .duration .meter {
+        display: none;
+      }
+
+      .page-duration {
+        width: auto;
       }
     }
 
-    /* Print styles */
-    @media print {
-      body {
-        background: white;
-        color: black;
+    @media (min-width: 640px) {
+      .shell {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
       }
 
-      .section {
-        break-inside: avoid;
+      .main {
+        padding-top: 3.5rem;
       }
 
-      .tab {
-        display: none !important;
+      .headline {
+        font-size: 2.25rem;
       }
 
-      .tab-content {
-        display: block !important;
+      .groups {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
       }
     }
 
-    /* Animations */
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
+    @media (min-width: 1024px) {
+      .shell {
+        padding-left: 3rem;
+        padding-right: 3rem;
+      }
 
-    .section {
-      animation: fadeIn 0.3s ease-out;
-    }
+      .headline {
+        font-size: 2.75rem;
+      }
 
-    .summary-card {
-      animation: fadeIn 0.3s ease-out;
+      .stats,
+      .groups {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
     }
 
-    .summary-card:nth-child(2) { animation-delay: 0.05s; }
-    .summary-card:nth-child(3) { animation-delay: 0.1s; }
-    .summary-card:nth-child(4) { animation-delay: 0.15s; }
-    .summary-card:nth-child(5) { animation-delay: 0.2s; }
-    .summary-card:nth-child(6) { animation-delay: 0.25s; }
+    @media print {
+      .bar-nav,
+      .copy-button {
+        display: none;
+      }
+
+      .table-scroll,
+      .code {
+        max-height: none;
+        overflow: visible;
+      }
+    }`;
+/**
+ * Tabs that switch the phase views, with the arrow keys moving between them, and copying the
+ * raw JSON.
+ */
+const REPORT_SCRIPT = `
+    (function () {
+      document.querySelectorAll('[role="tablist"]').forEach(function (list) {
+        var tabs = Array.prototype.slice.call(list.querySelectorAll('[role="tab"]'));
+
+        function select(tab) {
+          tabs.forEach(function (other) {
+            var selected = other === tab;
+            other.setAttribute('aria-selected', selected ? 'true' : 'false');
+            other.tabIndex = selected ? 0 : -1;
+            document.getElementById(other.getAttribute('aria-controls')).hidden = !selected;
+          });
+        }
+
+        tabs.forEach(function (tab, index) {
+          tab.addEventListener('click', function () {
+            select(tab);
+          });
+          tab.addEventListener('keydown', function (event) {
+            var step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            if (!step) return;
+            event.preventDefault();
+            var next = tabs[(index + step + tabs.length) % tabs.length];
+            select(next);
+            next.focus();
+          });
+        });
+      });
+
+      // The JSON section starts closed; following a link to it opens it
+      var json = document.getElementById('raw-json-data');
+      document.querySelectorAll('a[href="#raw-json"]').forEach(function (link) {
+        link.addEventListener('click', function () {
+          json.open = true;
+        });
+      });
+
+      var copyButton = document.getElementById('copy-json');
+      var copyStatus = document.getElementById('copy-status');
+      if (!navigator.clipboard) {
+        copyButton.hidden = true;
+        return;
+      }
+      copyButton.addEventListener('click', function () {
+        var text = document.getElementById('json-content').textContent;
+        navigator.clipboard.writeText(text).then(function () {
+          copyButton.setAttribute('data-copied', 'true');
+          copyButton.textContent = 'Copied';
+          copyStatus.textContent = 'JSON copied to the clipboard';
+          setTimeout(function () {
+            copyButton.removeAttribute('data-copied');
+            copyButton.textContent = 'Copy';
+            copyStatus.textContent = '';
+          }, 2000);
+        });
+      });
+    })();`;
+/**
+ * Generate the HTML report content
+ */
+export function generateMetricsHtml(metrics) {
+    const { meta, totals, phases, counts, isg, pageTimings, incremental } = metrics;
+    const phaseRows = generatePhaseRows(phases, totals.durationMs);
+    const hasDetailedTimings = pageTimings !== undefined && pageTimings.length > 0;
+    const enabledFlags = [
+        meta.flags.force ? '--force' : null,
+        meta.flags.clean ? '--clean' : null,
+        meta.flags.includeDrafts ? '--include-drafts' : null,
+    ].filter((flag) => flag !== null);
+    const commit = meta.gitCommit ? meta.gitCommit.substring(0, 7) : undefined;
+    const source = meta.gitBranch ? `${meta.gitBranch}${commit ? ` (${commit})` : ''}` : commit;
+    const perPage = counts.renderedPages > 0 ? (counts.templatesLoaded / counts.renderedPages).toFixed(1) : '0';
+    const navigation = [
+        ['phases', 'Phases'],
+        ['counts', 'Counts'],
+        incremental ? ['rebuild', 'Rebuild'] : null,
+        hasDetailedTimings ? ['pages', 'Pages'] : null,
+        ['raw-json', 'JSON'],
+    ]
+        .filter((link) => link !== null)
+        .map(([id, label]) => `<a href="#${id}">${label}</a>`)
+        .join('\n        ');
+    // Escaped for the <pre>: the JSON stays readable in the page source and copies unchanged
+    const json = JSON.stringify(metrics, null, 2);
+    const jsonData = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
+  <link rel="icon" href="${STATI_FAVICON_HREF}">
+  <title>Stati Build Metrics Report - ${escapeHtml(meta.timestamp)}</title>
+  <style>${STATI_THEME_STYLES}
+${REPORT_STYLES}
+${STATI_PRINT_STYLES}
   </style>
 </head>
 <body>
-  <div class="container">
-    <!-- Header -->
-    <header>
-      <h1>
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M12 20V10M18 20V4M6 20v-4"/>
-        </svg>
-        Stati Build Metrics Report
-        ${hasDetailedTimings ? '<span class="badge detailed">Detailed</span>' : ''}
-        ${meta.ci ? '<span class="badge ci">CI</span>' : '<span class="badge local">Local</span>'}
-      </h1>
-      <div class="meta-info">
-        <span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
-          </svg>
-          ${new Date(meta.timestamp).toLocaleString()}
-        </span>
-        <span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M4 19.5A2.5 2.5 0 016.5 17H20"/>
-            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/>
-          </svg>
-          Command: ${meta.command}
-        </span>
-        <span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
-          </svg>
-          ${meta.platform} / ${meta.arch}
-        </span>
-        <span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
-          </svg>
-          Node ${meta.nodeVersion}
-        </span>
-        <span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M20 7h-9M14 17H5M17 17a3 3 0 100-6 3 3 0 000 6zM7 7a3 3 0 100-6 3 3 0 000 6z"/>
-          </svg>
-          CLI v${meta.cliVersion} / Core v${meta.coreVersion}
-        </span>
-        ${meta.gitBranch
-        ? `
-        <span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>
-            <path d="M18 9a9 9 0 01-9 9"/>
-          </svg>
-          ${meta.gitBranch}${meta.gitCommit ? ` (${meta.gitCommit.substring(0, 7)})` : ''}
-        </span>`
-        : ''}
-      </div>
-      ${Object.keys(meta.flags).length > 0
-        ? `
-      <div class="flags" style="margin-top: 12px;">
-        ${meta.flags.force !== undefined ? `<span class="flag ${meta.flags.force ? 'enabled' : 'disabled'}">--force: ${meta.flags.force}</span>` : ''}
-        ${meta.flags.clean !== undefined ? `<span class="flag ${meta.flags.clean ? 'enabled' : 'disabled'}">--clean: ${meta.flags.clean}</span>` : ''}
-        ${meta.flags.includeDrafts !== undefined ? `<span class="flag ${meta.flags.includeDrafts ? 'enabled' : 'disabled'}">--include-drafts: ${meta.flags.includeDrafts}</span>` : ''}
-      </div>`
-        : ''}
-    </header>
-
-    <!-- Summary Cards -->
-    <div class="summary-grid">
-      <div class="summary-card highlight">
-        <div class="label">Total Duration</div>
-        <div class="value">${formatDuration(totals.durationMs)}</div>
-        <div class="subtext">${(totals.durationMs / 1000).toFixed(3)} seconds</div>
-      </div>
-      <div class="summary-card ${counts.cachedPages > 0 ? 'success' : ''}">
-        <div class="label">Pages</div>
-        <div class="value">${counts.totalPages}</div>
-        <div class="subtext">${counts.renderedPages} rendered, ${counts.cachedPages} cached</div>
-      </div>
-      <div class="summary-card">
-        <div class="label">Cache Hit Rate</div>
-        <div class="value" style="color: ${isg.cacheHitRate > 0.5 ? 'var(--accent-green)' : isg.cacheHitRate > 0 ? 'var(--accent-yellow)' : 'var(--text-secondary)'}">${formatPercent(isg.cacheHitRate)}</div>
-        <div class="subtext">${isg.manifestEntries} manifest entries</div>
-      </div>
-      <div class="summary-card">
-        <div class="label">Peak Memory</div>
-        <div class="value">${formatBytes(totals.peakRssBytes)}</div>
-        <div class="subtext">Heap: ${formatBytes(totals.heapUsedBytes)}</div>
-      </div>
-      <div class="summary-card">
-        <div class="label">Templates Loaded</div>
-        <div class="value">${counts.templatesLoaded}</div>
-        <div class="subtext">${(counts.templatesLoaded / counts.totalPages).toFixed(1)} avg per page</div>
-      </div>
-      <div class="summary-card">
-        <div class="label">Assets Copied</div>
-        <div class="value">${counts.assetsCopied}</div>
-        <div class="subtext">${counts.markdownFilesProcessed} markdown files</div>
+  <header class="bar">
+    <div class="shell">
+      <div class="brand">
+        <svg class="brand-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${STATI_MARK_PATH}"/></svg>
+        <span class="brand-name">Stati</span>
+        <span class="brand-rule" aria-hidden="true"></span>
+        <span class="brand-context">Build metrics</span>
       </div>
+      <nav class="bar-nav" aria-label="Report sections">
+        ${navigation}
+      </nav>
     </div>
-
-    <!-- Phase Breakdown -->
-    <div class="section">
-      <div class="section-header">
-        <h2>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
-          </svg>
-          Phase Breakdown
-        </h2>
-        <span style="font-size: 13px; color: var(--text-secondary);">
-          ${phaseData.length} phases tracked • ${formatDuration(totalPhaseTime)} total
-        </span>
-      </div>
-      <div class="section-content">
-        <!-- View Tabs -->
-        <div class="tabs" style="margin-bottom: 20px;">
-          <button class="tab active" onclick="switchPhaseView('duration')">
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
-              <path d="M3 3v18h18"/><path d="M18 9l-5 5-4-4-3 3"/>
-            </svg>
-            By Duration
-          </button>
-          <button class="tab" onclick="switchPhaseView('timeline')">
-            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 6px;">
-              <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
-            </svg>
-            Timeline
-          </button>
+  </header>
+
+  <main class="main shell">
+    <section class="summary" aria-labelledby="report-title">
+      <h1 class="headline" id="report-title">Built ${formatCount(counts.totalPages)} ${counts.totalPages === 1 ? 'page' : 'pages'} in ${formatDuration(totals.durationMs)}</h1>
+      <p class="meta">
+        <span class="type-badge">${escapeHtml(meta.command)}</span>
+        <span class="type-badge">${meta.ci ? 'CI' : 'Local'}</span>
+        ${hasDetailedTimings ? '<span class="type-badge">Detailed</span>' : ''}
+        <time class="meta-time" datetime="${escapeHtml(meta.timestamp)}">${escapeHtml(new Date(meta.timestamp).toLocaleString())}</time>
+      </p>
+
+      <dl class="stats">
+        <div class="stat">
+          <dt>Pages rendered</dt>
+          <dd class="stat-value">${formatCount(counts.renderedPages)}</dd>
+          <dd class="stat-note">of ${formatCount(counts.totalPages)}, ${formatCount(counts.cachedPages)} from cache</dd>
         </div>
-
-        <!-- Duration View (sorted by duration) -->
-        <div id="duration-view" class="phase-view active">
-          <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 16px;">
-            Click on any phase to see a detailed description of what happens during that phase.
-          </p>
-          <div class="phase-list">
-            ${phaseChartData
-        .map((phase) => `
-            <div class="phase-item" onclick="togglePhase(this)">
-              <div class="phase-name" title="${phase.name}">${phase.label}</div>
-              <div class="phase-bar-container">
-                <div class="phase-bar" style="width: ${Math.max(phase.percent, 0.5)}%"></div>
-              </div>
-              <div class="phase-duration">${formatDuration(phase.value)}</div>
-              <div class="phase-percent">${phase.percent.toFixed(1)}%</div>
-              <svg class="phase-expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="6,9 12,15 18,9"/>
-              </svg>
-              <div class="phase-description">${phase.description}</div>
-            </div>`)
-        .join('')}
-          </div>
+        <div class="stat">
+          <dt>Cache hit rate</dt>
+          <dd class="stat-value">${formatPercent(isg.cacheHitRate)}</dd>
+          <dd class="stat-note">${formatCount(isg.manifestEntries)} manifest entries</dd>
         </div>
-
-        <!-- Timeline View (in execution order) -->
-        <div id="timeline-view" class="phase-view" style="display: none;">
-          <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 16px;">
-            Phases shown in their approximate execution order during the build process.
-          </p>
-
-          <!-- Visual Timeline Track -->
-          <div class="timeline-track">
-            ${timelineChartData
-        .map((phase, i) => `
-            <div class="timeline-segment phase-color-${i % 8}"
-                 style="left: ${phase.startOffset}%; width: ${Math.max(phase.percent, 0.5)}%;"
-                 title="${phase.label}: ${formatDuration(phase.value)} (${phase.percent.toFixed(1)}%)"
-                 onclick="expandTimelineItem(${i})">
-              <span>${phase.percent > 8 ? phase.label : ''}</span>
-            </div>`)
-        .join('')}
-          </div>
-
-          <!-- Timeline List -->
-          <div class="timeline-list">
-            ${timelineChartData
-        .map((phase, i) => `
-            <div class="timeline-item" id="timeline-item-${i}" onclick="toggleTimeline(this)">
-              <div class="timeline-order">${i + 1}</div>
-              <div class="timeline-name">${phase.label}</div>
-              <div class="timeline-bar-container">
-                <div class="timeline-bar phase-color-${i % 8}" style="width: ${Math.max(phase.percent, 0.5)}%"></div>
-              </div>
-              <div class="timeline-time">${formatDuration(phase.value)}</div>
-              <div class="timeline-description">${phase.description}</div>
-            </div>`)
-        .join('')}
-          </div>
+        <div class="stat">
+          <dt>Templates loaded</dt>
+          <dd class="stat-value">${formatCount(counts.templatesLoaded)}</dd>
+          <dd class="stat-note">${perPage} per rendered page</dd>
         </div>
-      </div>
-    </div>
-
-    <!-- ISG Cache Details -->
-    <div class="section">
-      <div class="section-header">
-        <h2>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
-          </svg>
-          ISG Cache Performance
-        </h2>
-        <span style="font-size: 13px; color: ${isg.enabled ? 'var(--accent-green)' : 'var(--text-muted)'};">
-          ${isg.enabled ? '● Enabled' : '○ Disabled'}
-        </span>
-      </div>
-      <div class="section-content">
-        <div style="display: flex; gap: 40px; align-items: center; flex-wrap: wrap;">
-          <div class="cache-ring-container">
-            <div class="cache-ring">
-              <svg width="150" height="150" viewBox="0 0 150 150">
-                <circle class="cache-ring-bg" cx="75" cy="75" r="60"/>
-                <circle class="cache-ring-progress" cx="75" cy="75" r="60"
-                  stroke-dasharray="${2 * Math.PI * 60}"
-                  stroke-dashoffset="${2 * Math.PI * 60 * (1 - isg.cacheHitRate)}"/>
-              </svg>
-              <div class="cache-ring-text">
-                <div class="cache-ring-value">${formatPercent(isg.cacheHitRate)}</div>
-                <div class="cache-ring-label">Cache Hit Rate</div>
-              </div>
-            </div>
-          </div>
-          <div class="isg-grid" style="flex: 1;">
-            <div class="isg-stat hit">
-              <div class="value">${counts.cachedPages}</div>
-              <div class="label">Pages from Cache</div>
-            </div>
-            <div class="isg-stat miss">
-              <div class="value">${counts.renderedPages}</div>
-              <div class="label">Pages Rendered</div>
-            </div>
-            <div class="isg-stat">
-              <div class="value" style="color: var(--accent-purple)">${isg.manifestEntries}</div>
-              <div class="label">Manifest Entries</div>
-            </div>
-            <div class="isg-stat">
-              <div class="value" style="color: var(--accent-orange)">${isg.invalidatedEntries}</div>
-              <div class="label">Invalidated</div>
-            </div>
-          </div>
+        <div class="stat">
+          <dt>Peak memory</dt>
+          <dd class="stat-value">${formatBytes(totals.peakRssBytes)}</dd>
+          <dd class="stat-note">Heap ${formatBytes(totals.heapUsedBytes)}</dd>
         </div>
-      </div>
-    </div>
+      </dl>
 
-    ${hasIncremental
-        ? `
-    <!-- Incremental Rebuild -->
-    <div class="section">
-      <div class="section-header">
-        <h2>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M23 4v6h-6M1 20v-6h6"/>
-            <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
-          </svg>
-          Incremental Rebuild
-        </h2>
-      </div>
-      <div class="section-content">
-        <div class="incremental-info">
-          <div class="stat-item">
-            <div class="stat-label">Trigger File</div>
-            <div class="trigger-file">${incremental.triggerFile}</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-label">Trigger Type</div>
-            <div class="stat-value">${incremental.triggerType}</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-label">Rebuild Duration</div>
-            <div class="stat-value">${formatDuration(incremental.durationMs)}</div>
-          </div>
-          <div class="stat-item">
-            <div class="stat-label">Pages Affected</div>
-            <div class="stat-value">${incremental.renderedPages} rendered / ${incremental.cachedPages} cached</div>
-          </div>
+      <dl class="facts">
+        <div class="fact">
+          <dt>Flags</dt>
+          <dd>${enabledFlags.length > 0 ? enabledFlags.join(' ') : 'none'}</dd>
         </div>
-      </div>
-    </div>`
+        ${source
+        ? `<div class="fact">
+          <dt>${meta.gitBranch ? 'Branch' : 'Commit'}</dt>
+          <dd>${escapeHtml(source)}</dd>
+        </div>`
         : ''}
-
-    ${hasDetailedTimings
-        ? `
-    <!-- Detailed Page Timings -->
-    <div class="section">
-      <div class="section-header">
-        <h2>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
-            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
-          </svg>
-          Page Timings
-        </h2>
-        <span style="font-size: 13px; color: var(--text-secondary);">
-          ${sortedPageTimings.length} pages • Sorted by duration
-        </span>
-      </div>
-      <div class="section-content">
-        <div class="tabs">
-          <button class="tab active" onclick="switchTab('table')">Table View</button>
-          <button class="tab" onclick="switchTab('waterfall')">Waterfall View</button>
+        <div class="fact">
+          <dt>Stati</dt>
+          <dd>CLI ${escapeHtml(meta.cliVersion)}, core ${escapeHtml(meta.coreVersion)}</dd>
         </div>
-
-        <div id="tab-table" class="tab-content active">
-          <div style="overflow-x: auto;">
-            <table class="page-table">
-              <thead>
-                <tr>
-                  <th>URL</th>
-                  <th>Duration</th>
-                  <th>Status</th>
-                  <th>Templates</th>
-                </tr>
-              </thead>
-              <tbody>
-                ${sortedPageTimings
-            .map((page) => `
-                <tr>
-                  <td class="url" title="${page.url}">${page.url}</td>
-                  <td class="duration">${formatDuration(page.durationMs)}</td>
-                  <td><span class="status ${page.cached ? 'cached' : 'rendered'}">${page.cached ? '● Cached' : '◐ Rendered'}</span></td>
-                  <td>${page.templatesLoaded !== undefined ? page.templatesLoaded : '-'}</td>
-                </tr>`)
-            .join('')}
-              </tbody>
-            </table>
-          </div>
+        <div class="fact">
+          <dt>Node</dt>
+          <dd>${escapeHtml(meta.nodeVersion)}</dd>
         </div>
-
-        <div id="tab-waterfall" class="tab-content">
-          <div class="waterfall-container">
-            <div class="waterfall">
-              ${(() => {
-            const maxDuration = Math.max(...sortedPageTimings.map((p) => p.durationMs));
-            return sortedPageTimings
-                .slice(0, 50)
-                .map((page) => {
-                const widthPercent = (page.durationMs / maxDuration) * 100;
-                return `
-                  <div class="waterfall-row">
-                    <div class="waterfall-label" title="${page.url}">${page.url.split('/').pop() || page.url}</div>
-                    <div class="waterfall-track">
-                      <div class="waterfall-bar ${page.cached ? 'cached' : 'rendered'}" style="width: ${Math.max(widthPercent, 1)}%"></div>
-                    </div>
-                    <div class="waterfall-time">${formatDuration(page.durationMs)}</div>
-                  </div>`;
-            })
-                .join('');
-        })()}
-              ${sortedPageTimings.length > 50
-            ? `
-              <div style="text-align: center; padding: 12px; color: var(--text-muted); font-size: 12px;">
-                Showing 50 of ${sortedPageTimings.length} pages
-              </div>`
-            : ''}
-            </div>
-          </div>
+        <div class="fact">
+          <dt>Platform</dt>
+          <dd>${escapeHtml(`${meta.platform} ${meta.arch}`)}, ${meta.cpuCount} ${meta.cpuCount === 1 ? 'CPU' : 'CPUs'}</dd>
         </div>
-      </div>
-    </div>`
-        : ''}
-
-    <!-- Raw JSON -->
-    <div class="section">
-      <div class="section-header">
-        <h2>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/>
-          </svg>
-          Raw JSON Data
-        </h2>
-        <button onclick="copyJson()" style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;">
-          Copy to Clipboard
-        </button>
-      </div>
-      <div class="section-content">
-        <div class="json-view">
-          <pre id="json-content">${jsonData.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
-        </div>
-      </div>
+      </dl>
+    </section>
+${renderPhasesSection(phaseRows)}
+${renderCountsSection(metrics)}
+${incremental ? renderIncrementalSection(incremental) : ''}
+${pageTimings && pageTimings.length > 0 ? renderPagesSection(pageTimings) : ''}
+    <section class="section" id="raw-json" aria-labelledby="raw-json-title">
+      <details class="disclosure" id="raw-json-data">
+        <summary>
+          ${CHEVRON_ICON}
+          <h2 class="section-title" id="raw-json-title">Raw JSON data</h2>
+          <span class="section-note">${formatBytes(Buffer.byteLength(json))}</span>
+        </summary>
+        <figure class="panel">
+          <figcaption class="panel-bar">
+            <span>Schema version ${escapeHtml(metrics.schemaVersion)}</span>
+            <button type="button" class="copy-button" id="copy-json">Copy</button>
+          </figcaption>
+          <pre class="code" id="json-content" tabindex="0">${jsonData}</pre>
+        </figure>
+        <span class="sr-only" id="copy-status" role="status"></span>
+      </details>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <div class="shell">
+      <span class="footer-name">Stati build metrics</span>
+      <span>Generated ${escapeHtml(new Date().toISOString())}</span>
     </div>
+  </footer>
 
-    <!-- Footer -->
-    <footer style="text-align: center; padding: 24px; color: var(--text-muted); font-size: 12px;">
-      Generated by Stati Build Metrics • ${new Date().toISOString()}
-    </footer>
-  </div>
-
-  <script>
-    function switchTab(tabName) {
-      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-      document.querySelector(\`[onclick="switchTab('\${tabName}')"]\`).classList.add('active');
-      document.getElementById(\`tab-\${tabName}\`).classList.add('active');
-    }
-
-    function switchPhaseView(viewName) {
-      // Update tabs
-      document.querySelectorAll('.tabs .tab').forEach(t => t.classList.remove('active'));
-      document.querySelector(\`[onclick="switchPhaseView('\${viewName}')"]\`).classList.add('active');
-
-      // Update views
-      document.querySelectorAll('.phase-view').forEach(v => {
-        v.style.display = 'none';
-        v.classList.remove('active');
-      });
-      const activeView = document.getElementById(\`\${viewName}-view\`);
-      if (activeView) {
-        activeView.style.display = 'block';
-        activeView.classList.add('active');
-      }
-    }
-
-    function togglePhase(element) {
-      element.classList.toggle('expanded');
-    }
-
-    function toggleTimeline(element) {
-      element.classList.toggle('expanded');
-    }
-
-    function expandTimelineItem(index) {
-      const item = document.getElementById(\`timeline-item-\${index}\`);
-      if (item) {
-        // Collapse others first
-        document.querySelectorAll('.timeline-item.expanded').forEach(el => {
-          if (el !== item) el.classList.remove('expanded');
-        });
-        item.classList.add('expanded');
-        item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      }
-    }
-
-    function copyJson() {
-      const json = document.getElementById('json-content').textContent;
-      navigator.clipboard.writeText(json).then(() => {
-        const btn = event.target;
-        const originalText = btn.textContent;
-        btn.textContent = 'Copied!';
-        btn.style.color = 'var(--accent-green)';
-        setTimeout(() => {
-          btn.textContent = originalText;
-          btn.style.color = '';
-        }, 2000);
-      });
-    }
+  <script>${REPORT_SCRIPT}
   </script>
 </body>
 </html>`;