nilometer 0.0.0-stage → 0.1.0

package/dist/viewer/html.js

@@ -0,0 +1,1654 @@
+/**
+ * @file The HTML report's page (step G1.3, D-070): one self-contained document that frames the
+ * charts from `viewer/html-charts.ts` in the text report's order, with a table view of every chart
+ * and one small inline script that lists the events behind a selected element.
+ *
+ * Implements README section Measurement Principles as a page: observed sections sit above a
+ * visible seam labeled as projected and the monthly repricing below it (principle 2), every chart
+ * section states the span it covers (principle 5), and every drawn element and table cell with a
+ * number carries the raw line IDs behind it, which the script resolves to `file:line` and time the
+ * way `nilometer explain` does (principle 4). README section Privacy: the page embeds session log
+ * paths, so it says so in its header. See D-070, D-012 (wording), D-030 (saved copies), D-063
+ * (ASCII only: every symbol is an HTML entity and user text outside ASCII becomes a character
+ * reference), and D-066 (plain, factual tone in what the page tells the reader).
+ *
+ * Nothing here fetches or links anything: no external script, stylesheet, font, or image, so the
+ * README's "makes no network requests" promise holds for a file opened in any browser.
+ */
+import { formatCoverage, formatInstant, formatNumber, printable } from "./format.js";
+import { REPO_BARS, burnSentence, renderBurnRate, renderCoverage, renderGauge, renderLockouts, renderModelBars, renderMonthBars, renderRepoBars, renderWindowSeries, } from "./html-charts.js";
+import { LABELS, displayPath, planPeriodMonths, planPeriodName, plural, repoKindName, windowName, } from "./render.js";
+/** The `viewBox` width every chart is drawn at; CSS scales the SVG to its container. */
+const CHART_WIDTH = 960;
+/** The most events one selection lists; the rest are counted, as `explain` does without `--all`. */
+export const EVENT_LIST_LIMIT = 200;
+/**
+ * Visible text that is new with the HTML report. The text report's wording stays in `LABELS`; these
+ * follow the add-metric skill's section 2, and the banned-phrase guard reads the whole page.
+ */
+export const HTML_LABELS = {
+    privacy: "Privacy: this file holds session IDs and the paths of your session logs, like nilometer explain output, and it makes no network requests. Think before sharing it.",
+    // 2026-10-22 click-through: "What each number covers" with two bars didn't say why they differ.
+    coverage: "Where the numbers come from",
+    coverageWhy: "Session logs give tokens, models and limit hits. Usage percentages come only from status line readings, so they start later: when the collector was installed.",
+    sessionLogsHold: "tokens, models, limit hits",
+    statusLineHolds: "usage windows",
+    source: "Source",
+    holds: "What it holds",
+    tableView: "Table view",
+    legendPeak: "Peak usage in the window",
+    legendLast: "Last observed usage (a lower bound)",
+    legendHit: "Locked out in this window",
+    over100: "Readings above 100% are shown as recorded.",
+    // D-087 (step G3.2): the section's heading and table columns; its sentences are the text report's.
+    crossingsHeading: "Weekly windows at 75% and 90%",
+    level: "Level",
+    firstReading: "First reading at or above",
+    usageAtReading: "Usage at that reading",
+    timeLeft: "Time left before the reset",
+    seriesHint: "Select a column to show that window's readings over time and list the events behind it. Select any bar, point, count, or table cell with a number to list its events.",
+    peakAt: "Peak reading at",
+    limitHits: "Limit hits",
+    time: "Time",
+    event: "Event",
+    usage: "Observed usage",
+    reading: "Status line reading",
+    hit: "Limit hit",
+    lockoutFrom: "First limit hit",
+    lockoutUntil: "Reset",
+    lockoutElapsed: "Elapsed lockout time",
+    lockoutDefinition: "Each lockout runs from its first limit hit to the window's reset; overlapping lockouts are counted once.",
+    hits: "Limit hits",
+    lockoutCaveat: "Each lockout runs from its first limit hit to the window's reset. What happened during it isn't observed.",
+    noLockouts: "No lockouts in the covered span.",
+    noRequestAfter: "no request after the reset in the logs",
+    resetAfterLogs: "reset came after the logs end",
+    models: "Claude Code output tokens by model",
+    noRequests: "No Claude Code requests in the logs yet.",
+    projectedTag: "Projected",
+    legendPrice: "Observed tokens at API list price",
+    legendPlan: "Plan price entered for that month",
+    repricing: "Only the plan price is a price. The bars reprice the tokens observed at API list rates; they aren't a bill, because paying per token changes how people work.",
+    // D-091: the caveat that stays beside the bars; the reasoning above is behind the section's "i".
+    notABill: "Only the plan price is a price: the bars aren't a bill.",
+    unpricedNote: "Unpriced requests have no verified rate and are left out of the amounts, not counted as $0.",
+    planHint: "To show a plan price beside these amounts: plan-price set <YYYY-MM> <usd> --name <plan>",
+    // Step G2.1 (D-084): the tabs, the overview, and the two charts new to the page.
+    tabsLabel: "Report views",
+    observedGroup: "Observed",
+    projectedGroup: "Projected: estimates, not observations",
+    tabOverview: "Overview",
+    tabWindows: "Usage windows",
+    tabInterruptions: "Interruptions",
+    tabModels: "By model",
+    tabRepos: "By repository",
+    tabBurn: "Burn rate",
+    tabPrice: "API list price",
+    openTab: "Open tab",
+    weeklyNow: "Weekly window, last observed usage",
+    weeklyPeak: "Highest weekly peak observed",
+    mostModel: "Most output tokens, by model",
+    mostRepo: "Most output tokens, by repository",
+    repos: "Claude Code output tokens by repository",
+    repoCaveat: "Worktrees and subfolders count as their repository. A directory that no longer exists keeps its last known repository and is drawn faded.",
+    legendRepo: "Repository or folder",
+    legendGone: "Directory no longer exists",
+    legendOther: "The rest, in one bar",
+    burnObserved: "Observed readings",
+    burnProjected: "Projected at the window's average rate",
+    noOpenWindow: "No open usage window in the status line readings.",
+    lastFrom: "Last observed usage the projection starts from",
+    byPlanCaption: "Lockouts by plan period",
+    legendResumed: "Resumed by Claude Code after the reset (logged auto-continuation)",
+    resumedColumn: "Resumed by Claude Code",
+    limitProjectedFor: "Limit projected for",
+};
+/** Which character each HTML-special character becomes. */
+const ENTITIES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+/**
+ * Makes text from the logs or a label safe to place in HTML text or a quoted attribute.
+ *
+ * Model names and paths come from data an attacker can influence (D-050), so the five special
+ * characters become entities. Control characters are first written as visible escapes, as the text
+ * report does, and anything outside printable ASCII becomes a numeric character reference, so the
+ * file stays ASCII whatever the logs hold (D-063).
+ * @param value - Any text.
+ * @returns The escaped text; never throws.
+ * @example
+ * escapeHtml('a<b & "c"'); // "a&lt;b &amp; &quot;c&quot;"
+ * escapeHtml("caf\u00e9"); // "caf&#xe9;"
+ */
+export function escapeHtml(value) {
+    // `u` so an astral character is one code point and one reference, not two broken surrogates.
+    return printable(value).replace(/[&<>"']|[^ -~]/gu, 
+    // A regex match is never empty, so the first code point always exists.
+    (char) => ENTITIES[char] ?? `&#x${char.codePointAt(0).toString(16)};`);
+}
+/**
+ * Serializes data for a `<script type="application/json">` block.
+ *
+ * A `<` inside the JSON could close the tag early (`</script>` in a path) or open a comment, so it
+ * is written as the six-character JSON escape backslash-u-003c, which JSON.parse reads back as the
+ * same character. `>` and `&` become their escapes (u003e, u0026) the same way for good measure,
+ * and every character outside printable ASCII is escaped as well, one UTF-16 unit at a time, which
+ * is valid JSON and keeps the file ASCII (D-063).
+ * @param value - Any JSON-serializable value.
+ * @returns JSON text safe to place between the script tags; never throws for plain data.
+ */
+export function embedJson(value) {
+    // No `u` flag: an astral character must become its two surrogate escapes, which JSON requires.
+    return JSON.stringify(value).replace(/[<>&]|[^ -~]/g, (char) => `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}`);
+}
+/**
+ * Merges event lists into one, each ID once, in ascending raw line order.
+ * @param lists - Event lists, possibly overlapping.
+ * @returns The union, sorted.
+ */
+export function mergeEvents(...lists) {
+    return [...new Set(lists.flat())].sort((a, b) => a - b);
+}
+/**
+ * Builds the `data-events` attribute the page script reads (principle 4).
+ * @param events - Raw line IDs.
+ * @returns ` data-events="1 2 3"`, with a leading space so it can follow a tag name.
+ */
+function eventsAttr(events) {
+    return ` data-events="${events.join(" ")}"`;
+}
+/**
+ * States a span with the source it comes from.
+ * @param source - `session logs` or `status line`, as the text report writes it.
+ * @param span - The span; nulls mean no data yet.
+ * @param timeZone - Display zone.
+ * @returns E.g. `session logs 2026-09-03 10:00 to 13:05 (UTC)`.
+ */
+function sourceSpan(source, span, timeZone) {
+    return `${source} ${formatCoverage(span.from, span.to, timeZone)}`;
+}
+/**
+ * Finds one source's coverage.
+ * @param data - Report data.
+ * @param source - Which source.
+ * @returns Its span, or an empty span when the source has no row.
+ */
+function coverageOf(data, source) {
+    return data.coverage.find((row) => row.source === source)?.span ?? { from: null, to: null };
+}
+/**
+ * Builds a plain text cell.
+ * @param text - Display text.
+ * @returns The cell.
+ */
+function textCell(text) {
+    return { text };
+}
+/**
+ * Builds a number cell that resolves to its events.
+ * @param text - The formatted number.
+ * @param events - Raw line IDs behind it.
+ * @returns The cell.
+ */
+function numberCell(text, events) {
+    return { text, events, numeric: true };
+}
+/**
+ * Renders a chart's table view, readable without JavaScript and by a screen reader (D-070).
+ *
+ * Built here from the same data as the chart, so the table and the picture can't disagree. A cell
+ * with events carries `data-events` and a label naming its column and row, so a keyboard user can
+ * list the events behind any number from the table too.
+ * @param caption - What the table shows.
+ * @param headers - Column names.
+ * @param rows - The rows.
+ * @param open - True to show the table expanded, for a split a tab exists to show (D-075).
+ * @returns A `<details>` holding the table, closed unless `open`.
+ */
+function tableView(caption, headers, rows, open = false) {
+    // A column of numbers has its header right-aligned too, over the numbers it names.
+    const head = headers
+        .map((header, column) => {
+        const numeric = rows.some((row) => row.cells[column]?.numeric === true);
+        return `<th scope="col"${numeric ? ' class="num"' : ""}>${escapeHtml(header)}</th>`;
+    })
+        .join("");
+    const body = rows
+        .map((row) => {
+        const cells = row.cells
+            .map((cell, column) => {
+            const numeric = cell.numeric === true ? ' class="num"' : "";
+            const events = cell.events === undefined
+                ? ""
+                : // Rows are built beside their headers, one cell per column, so the header exists.
+                    `${eventsAttr(cell.events)} data-label="${escapeHtml(`${String(headers[column])}, ${row.name}`)}"`;
+            return `<td${numeric}${events}>${escapeHtml(cell.text)}</td>`;
+        })
+            .join("");
+        return `<tr>${cells}</tr>`;
+    })
+        .join("\n");
+    return [
+        `<details class="nm-table"${open ? " open" : ""}><summary>${escapeHtml(`${HTML_LABELS.tableView}: ${caption}`)}</summary>`,
+        `<div class="table-scroll"><table><caption>${escapeHtml(caption)}</caption>`,
+        `<thead><tr>${head}</tr></thead>`,
+        `<tbody>\n${body}\n</tbody></table></div></details>`,
+    ].join("\n");
+}
+/**
+ * Renders an explanation behind a small "i" button (D-091). It opens on hover, keyboard focus, or a
+ * tap, works without the script through CSS, and prints in full. Its text is in the page either
+ * way, so the banned-phrase guard reads it.
+ * @param id - Unique among the page's disclosures; the text's element takes `${id}-info`.
+ * @param about - What it explains, for the button's accessible name.
+ * @param paragraphs - The explanation, one paragraph each, unescaped.
+ * @returns The disclosure's HTML, inline.
+ */
+function info(id, about, paragraphs) {
+    const text = paragraphs.map((p) => `<span>${escapeHtml(p)}</span>`).join("");
+    return `<span class="nm-info"><button type="button" class="nm-info-btn" aria-expanded="false" aria-controls="${id}-info" aria-label="${escapeHtml(`About: ${about}`)}">i</button><span class="nm-info-text" id="${id}-info" role="note">${text}</span></span>`;
+}
+/**
+ * Wraps a chart in its section: heading, span, body, and a hidden panel the script fills with the
+ * events behind a selected element.
+ * @param parts - The section's parts.
+ * @returns The section HTML.
+ */
+function chartSection(parts) {
+    const tag = parts.tag === undefined ? "" : `<p class="eyebrow projected">${escapeHtml(parts.tag)}</p>\n`;
+    return [
+        `<section class="panel nm-chart" id="${parts.id}" aria-labelledby="${parts.id}-h">`,
+        `${tag}<div class="panel-title"><h3 id="${parts.id}-h">${escapeHtml(parts.heading)}${parts.info === undefined ? "" : info(parts.id, parts.heading, parts.info)}</h3>`,
+        `<p class="span">${escapeHtml(parts.span)}</p></div>`,
+        parts.body,
+        // Hidden until the script fills it: without JavaScript it would be an empty box.
+        '<div class="nm-events" aria-live="polite" hidden></div>',
+        "</section>",
+    ].join("\n");
+}
+/**
+ * Wraps chart SVG so CSS can scale it.
+ * @param svg - SVG text from a chart function.
+ * @returns The wrapped chart.
+ */
+function plot(svg) {
+    return `<div class="plot">${svg}</div>`;
+}
+/**
+ * Renders a paragraph of escaped text.
+ * @param text - Text, unescaped.
+ * @param className - CSS class.
+ * @returns The paragraph.
+ */
+function para(text, className = "caveat") {
+    return `<p class="${className}">${escapeHtml(text)}</p>`;
+}
+/**
+ * Renders a paragraph stating a count, which resolves to the events behind it like any drawn
+ * element (principle 4): the script lists them when the paragraph is selected.
+ * @param text - The line, unescaped, with the count in it.
+ * @param events - Raw line IDs behind the count.
+ * @param label - Names the count at the head of its events list.
+ * @param className - CSS class.
+ * @returns The paragraph.
+ */
+function countPara(text, events, label, className = "caveat") {
+    return `<p class="${className}"${eventsAttr(events)} data-label="${escapeHtml(label)}">${escapeHtml(text)}</p>`;
+}
+/**
+ * Renders a line of split counts in the text report's phrasing, each count its own element with
+ * its own events, so every number on the line resolves to exactly the hits behind it (principle 4).
+ * @param parts - Each split: its phrase before the count, the count, its events, and its name at
+ *   the head of an events list.
+ * @returns The paragraph, with the visible text `a: 1 | b: 2`.
+ */
+function splitPara(parts) {
+    // Only the parts that happened: a zero says nothing, and a split with one part left is the total
+    // above it again. The text report keeps every part (2026-10-22 click-through, D-091).
+    const shown = parts.filter((part) => part.count > 0);
+    if (shown.length <= 1) {
+        return "";
+    }
+    const counts = shown.map((part) => `${escapeHtml(part.phrase)}: <span class="num"${eventsAttr(part.events)} data-label="${escapeHtml(part.name)}">${escapeHtml(formatNumber(part.count, "count"))}</span>`);
+    return `<p class="sub">${counts.join(" | ")}</p>`;
+}
+/**
+ * Says how many limit hits no gauge column holds (D-023's membership rule in the contract), in the
+ * same plain terms as the other caveats. Singular and plural differ past the count itself.
+ * @param count - Hits in no column; above zero.
+ * @returns The line, unescaped.
+ */
+function noColumnText(count) {
+    const one = count === 1;
+    // The three ways a hit misses every column, as the contract's membership rule defines them.
+    return one
+        ? "1 limit hit isn't in any column: its window is unknown, it has no time, or no counted window of its kind holds its time."
+        : `${plural(count, "limit hit", "limit hits")} aren't in any column: their windows are unknown, they have no time, or no counted window of their kind holds their time.`;
+}
+/**
+ * Finds the span of a list of instants.
+ * @param instants - ISO-8601 UTC text, in any order.
+ * @returns The earliest and latest; nulls when the list is empty.
+ */
+function spanOf(instants) {
+    // ISO-8601 UTC text sorts chronologically, so a string sort finds both ends without parsing.
+    const sorted = [...instants].sort();
+    return { from: sorted[0] ?? null, to: sorted.at(-1) ?? null };
+}
+/**
+ * Renders a legend of color keys.
+ * @param entries - Key class and label pairs.
+ * @returns The legend.
+ */
+function legend(entries) {
+    const items = entries
+        .map(([key, label]) => `<span><i class="${key}"></i>${escapeHtml(label)}</span>`)
+        .join("");
+    return `<div class="legend">${items}</div>`;
+}
+/**
+ * Renders the header: title, zone, last ingest, and the privacy note (README section Privacy).
+ * @param data - Report data.
+ * @returns The header HTML.
+ */
+function renderHeader(data) {
+    const zone = data.timeZone;
+    const ingest = data.lastIngestAt === null ? "none yet" : formatInstant(data.lastIngestAt, zone);
+    const meta = `Times are in ${zone}. Last ingest: ${ingest}. Report produced: ${formatInstant(data.generatedAtUtc, zone)}.`;
+    // The text report's wording, above the privacy note: readings stop until it's fixed (D-081).
+    const hook = data.missingHookPath === null
+        ? []
+        : [
+            '<div class="hook-warning" role="note">',
+            para(LABELS.hookMissing),
+            para(`${LABELS.hookMissingPath}: ${displayPath(data.missingHookPath, data.home)}`, "meta"),
+            "</div>",
+        ];
+    return [
+        '<header class="nm-head">',
+        `<h1>${escapeHtml(LABELS.title)}</h1>`,
+        para(meta, "meta"),
+        ...hook,
+        para(HTML_LABELS.privacy, "privacy"),
+        "</header>",
+    ].join("\n");
+}
+/**
+ * Renders the coverage section: how far back each source reaches.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The section.
+ */
+function renderCoverageSection(data, options) {
+    const zone = data.timeZone;
+    const logs = coverageOf(data, "session_logs");
+    const status = coverageOf(data, "status_line");
+    const rows = [
+        {
+            name: "Session logs",
+            cells: [
+                textCell("Session logs"),
+                textCell(HTML_LABELS.sessionLogsHold),
+                textCell(formatCoverage(logs.from, logs.to, zone)),
+            ],
+        },
+        {
+            name: "Status line",
+            cells: [
+                textCell("Status line"),
+                textCell(HTML_LABELS.statusLineHolds),
+                textCell(formatCoverage(status.from, status.to, zone)),
+            ],
+        },
+    ];
+    return chartSection({
+        id: "nm-coverage",
+        heading: HTML_LABELS.coverage,
+        span: `Covers: ${sourceSpan("session logs", logs, zone)}; ${sourceSpan("status line", status, zone)}`,
+        body: [
+            para(HTML_LABELS.coverageWhy),
+            plot(renderCoverage(data.coverage, options)),
+            tableView(HTML_LABELS.coverage, [HTML_LABELS.source, HTML_LABELS.holds, LABELS.columns.covers], rows),
+        ].join("\n"),
+    });
+}
+/**
+ * Names a usage window instance for headings and table rows.
+ * @param window - Window key.
+ * @param resetAtUtc - Reset instant.
+ * @param timeZone - Display zone.
+ * @returns E.g. `5-hour window resetting 2026-09-03 13:00`.
+ */
+function windowTitle(window, resetAtUtc, timeZone) {
+    return `${windowName(window)} window resetting ${formatInstant(resetAtUtc, timeZone)}`;
+}
+/**
+ * Renders one window's readings over time inside a closed `<details>`, which the script opens when
+ * its gauge column is selected; without JavaScript it opens by hand (D-070).
+ *
+ * Its span line states the readings' span as the status line's, and the drawn hits' span apart
+ * under their own name: a hit's time can come from a session log, so folding it into the status
+ * line's span would claim that source covers a time it doesn't (principle 5). When the column
+ * counts hits the series can't draw, a line says how many, with their events.
+ * @param series - The window's readings and hits.
+ * @param options - Chart options.
+ * @returns The series container.
+ */
+function renderSeries(series, options) {
+    const zone = options.timeZone;
+    const readingSpan = spanOf(series.points.map((p) => p.atUtc));
+    const hitSpan = spanOf(series.hits.map((h) => h.atUtc));
+    const covers = `Covers: ${sourceSpan("status line", readingSpan, zone)}` +
+        (series.hits.length > 0 ? `; ${sourceSpan("limit hits", hitSpan, zone)}` : "");
+    const title = windowTitle(series.window, series.resetAtUtc, zone);
+    const rows = [
+        ...series.points.map((p) => ({
+            at: p.atUtc,
+            cells: [
+                textCell(formatInstant(p.atUtc, zone)),
+                textCell(HTML_LABELS.reading),
+                numberCell(formatNumber(p.used, "percent"), [p.event]),
+            ],
+        })),
+        ...series.hits.map((h) => ({
+            at: h.atUtc,
+            cells: [
+                textCell(formatInstant(h.atUtc, zone)),
+                // A hit has no usage value; its event hangs on the "Limit hit" cell instead.
+                { text: HTML_LABELS.hit, events: [h.event] },
+                { text: "", numeric: true },
+            ],
+        })),
+    ];
+    // Readings and hits interleaved in time order, as the chart draws them.
+    rows.sort((a, b) => (a.at < b.at ? -1 : a.at > b.at ? 1 : 0));
+    const key = `${series.window}|${series.resetAtUtc}`;
+    return [
+        `<details class="nm-series" data-series="${escapeHtml(key)}">`,
+        `<summary>${escapeHtml(`${title}: readings over time`)}</summary>`,
+        para(covers, "span"),
+        plot(renderWindowSeries(series, options)),
+        tableView(`${title}: readings over time`, [HTML_LABELS.time, HTML_LABELS.event, HTML_LABELS.usage], rows.map((row) => ({ name: `${title}, ${formatInstant(row.at, zone)}`, cells: row.cells }))),
+        "</details>",
+    ]
+        .filter((part) => part !== "")
+        .join("\n");
+}
+/**
+ * Finds a gauge column's series by the window's identity (D-024), not by position, so a
+ * reordering in the data can't pair a column with another window's readings.
+ * @param data - Report data.
+ * @param window - Window key.
+ * @param resetAtUtc - Reset instant.
+ * @returns The series; undefined when the data has none for that window.
+ */
+function seriesOf(data, window, resetAtUtc) {
+    return data.series.find((s) => s.window === window && s.resetAtUtc === resetAtUtc);
+}
+/**
+ * Renders the lines under the gauge that count what no column shows: readings captured after
+ * their window's reset (D-024) and limit hits in no column. Each appears only when its count is
+ * above zero, as the text report prints the first, and each resolves to its events.
+ * @param data - Report data.
+ * @returns Paragraphs, possibly none.
+ */
+function gaugeNotes(data) {
+    const lines = [];
+    const after = data.afterReset;
+    if (after.count > 0) {
+        lines.push(countPara(`Readings captured after their window's reset, not counted: ${formatNumber(after.count, "count")}`, after.events, "Readings captured after their window's reset"));
+    }
+    // The stale points, as the text report counts readings_stale: counted readings below an earlier
+    // one in their window (D-089).
+    const stale = data.series.flatMap((s) => s.points.filter((p) => p.stale).map((p) => p.event));
+    if (stale.length > 0) {
+        lines.push(countPara(`${LABELS.staleReadings}: ${formatNumber(stale.length, "count")}`, stale, LABELS.staleReadings));
+    }
+    const totals = data.interruptions;
+    if (totals.hitsInNoColumn > 0) {
+        lines.push(countPara(noColumnText(totals.hitsInNoColumn), totals.hitsInNoColumnEvents, "Limit hits in no column"));
+    }
+    return lines;
+}
+/**
+ * Renders the weekly windows' first readings at or above 75% and 90% (D-087, step G3.2), in the
+ * text report's words, with each value and time left resolving to the reading behind it.
+ * @param data - Report data.
+ * @returns The section.
+ */
+function renderCrossingsSection(data) {
+    const zone = data.timeZone;
+    const span = `Covers: ${sourceSpan("status line", coverageOf(data, "status_line"), zone)}`;
+    if (data.crossings.length === 0) {
+        return chartSection({
+            id: "nm-crossings",
+            heading: HTML_LABELS.crossingsHeading,
+            span,
+            body: para(LABELS.noCrossings),
+        });
+    }
+    const c = LABELS.columns;
+    const rows = data.crossings.map((x) => ({
+        name: `${windowTitle("seven_day", x.resetAtUtc, zone)}, ${String(x.threshold)}%`,
+        cells: [
+            textCell(formatInstant(x.resetAtUtc, zone)),
+            textCell(`${String(x.threshold)}%`),
+            textCell(formatInstant(x.firstAtUtc, zone)),
+            numberCell(formatNumber(x.usedPercentage, "percent"), x.events),
+            numberCell(formatNumber(x.secondsBeforeReset, "duration"), x.events),
+        ],
+    }));
+    return chartSection({
+        id: "nm-crossings",
+        heading: HTML_LABELS.crossingsHeading,
+        span,
+        info: [LABELS.crossingsWhat],
+        body: [
+            para(LABELS.crossingsCaveat),
+            tableView(HTML_LABELS.crossingsHeading, [
+                c.resets,
+                HTML_LABELS.level,
+                HTML_LABELS.firstReading,
+                HTML_LABELS.usageAtReading,
+                HTML_LABELS.timeLeft,
+            ], rows, true),
+        ].join("\n"),
+    });
+}
+/**
+ * Renders the gauge section: one column per window, each window's series, and the gauge's table.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The section.
+ */
+function renderGaugeSection(data, options) {
+    const zone = data.timeZone;
+    const status = coverageOf(data, "status_line");
+    const span = `Covers: ${sourceSpan("status line", status, zone)}. Readings start when the collector is installed.`;
+    const notes = gaugeNotes(data);
+    if (data.gauge.length === 0) {
+        return chartSection({
+            id: "nm-gauge",
+            heading: LABELS.windows,
+            span,
+            body: [para(LABELS.noReadings), ...notes].join("\n"),
+        });
+    }
+    const c = LABELS.columns;
+    const rows = data.gauge.map((w) => ({
+        name: windowTitle(w.window, w.resetAtUtc, zone),
+        cells: [
+            textCell(windowName(w.window)),
+            textCell(formatInstant(w.resetAtUtc, zone)),
+            numberCell(formatNumber(w.peak, "percent"), w.peakEvents),
+            textCell(formatInstant(w.peakAtUtc, zone)),
+            numberCell(formatNumber(w.last, "percent"), w.lastEvents),
+            textCell(formatInstant(w.lastAtUtc, zone)),
+            // The counted readings are the window's series points, one event each.
+            numberCell(formatNumber(w.readings, "count"), (seriesOf(data, w.window, w.resetAtUtc)?.points ?? []).map((p) => p.event)),
+            numberCell(formatNumber(w.limitHits, "count"), w.hitEvents),
+            textCell(w.open ? "open" : "reset"),
+        ],
+    }));
+    return chartSection({
+        id: "nm-gauge",
+        heading: LABELS.windows,
+        span,
+        // D-091: how to read the chart, behind the heading's "i". "A lower bound" stays in the legend.
+        info: [
+            `${LABELS.windowsCaveat} ${HTML_LABELS.over100}`,
+            LABELS.openNote,
+            HTML_LABELS.seriesHint,
+        ],
+        body: [
+            legend([
+                ["k-fill", HTML_LABELS.legendPeak],
+                ["k-tick", HTML_LABELS.legendLast],
+                ["k-hit", HTML_LABELS.legendHit],
+            ]),
+            plot(renderGauge(data.gauge, options)),
+            // The counts behind the chart stay visible: each lists its readings or hits (principle 4).
+            ...notes,
+            `<div class="nm-series-list">\n${data.series.map((s) => renderSeries(s, options)).join("\n")}\n</div>`,
+            tableView(LABELS.windows, [
+                c.window,
+                c.resets,
+                c.peak,
+                HTML_LABELS.peakAt,
+                c.lastUsage,
+                c.readingAt,
+                c.readings,
+                HTML_LABELS.limitHits,
+                c.status,
+            ], rows),
+        ].join("\n"),
+    });
+}
+/**
+ * Builds the cell for what followed a lockout's reset: a duration that resolves to the request
+ * that ended it, or, when no request followed, the reason as plain text with no events.
+ * @param bar - The lockout.
+ * @returns The cell.
+ */
+function nextRequestCell(bar) {
+    if (bar.resetToNextRequestSeconds !== null) {
+        return numberCell(formatNumber(bar.resetToNextRequestSeconds, "duration"), bar.nextRequestEvents);
+    }
+    return textCell(bar.resetAfterCoverage ? HTML_LABELS.resetAfterLogs : HTML_LABELS.noRequestAfter);
+}
+/**
+ * Renders the counts the text report prints beside the lockouts (renderObserved), in its exact
+ * phrases, each resolving to its events. Each split count by window and by source has its own
+ * event list, so selecting one lists only the hits behind that number.
+ * @param data - Report data.
+ * @returns The total line and the count lines.
+ */
+function interruptionCounts(data) {
+    const t = data.interruptions;
+    /**
+     * Formats a count as the text report does.
+     * @param value - The count.
+     * @returns E.g. `1,204`.
+     */
+    const n = (value) => formatNumber(value, "count");
+    // The intervals' hits are exactly the events behind the total; hits with an unknown reset aren't.
+    const inIntervals = mergeEvents(...data.lockouts.map((bar) => bar.events));
+    const total = `<p class="total"><span class="num"${eventsAttr(inIntervals)} data-label="${escapeHtml(HTML_LABELS.lockoutElapsed)}">${escapeHtml(formatNumber(t.lockoutSeconds, "duration"))}</span> ${escapeHtml(`across ${plural(t.lockoutIntervals, "lockout", "lockouts")}`)}</p>`;
+    return [
+        '<div class="nm-counts">',
+        total,
+        // Only when there are some: "…: 0" says nothing (2026-10-22 click-through).
+        t.hitsWithUnknownReset === 0
+            ? ""
+            : countPara(`Limit hits with an unknown reset time, in no lockout: ${n(t.hitsWithUnknownReset)}`, t.unknownResetEvents, "Limit hits with an unknown reset time", "sub"),
+        countPara(`${LABELS.limitHits}: ${n(t.hits)} in ${plural(t.lockoutIntervals, "lockout", "lockouts")}`, t.events, LABELS.limitHits, "count"),
+        splitPara([
+            {
+                phrase: "5-hour window",
+                count: t.fiveHourHits,
+                events: t.fiveHourEvents,
+                name: `${LABELS.limitHits}, 5-hour window`,
+            },
+            {
+                phrase: "weekly window",
+                count: t.sevenDayHits,
+                events: t.sevenDayEvents,
+                name: `${LABELS.limitHits}, weekly window`,
+            },
+            {
+                phrase: "window unknown",
+                count: t.unknownWindowHits,
+                events: t.unknownWindowEvents,
+                name: `${LABELS.limitHits}, window unknown`,
+            },
+        ]),
+        splitPara([
+            {
+                phrase: "From the session logs",
+                count: t.loggedHits,
+                events: t.loggedEvents,
+                name: `${LABELS.limitHits}, from the session logs`,
+            },
+            {
+                phrase: "seen only in the status line",
+                count: t.statusLineOnlyHits,
+                events: t.statusLineOnlyEvents,
+                name: `${LABELS.limitHits}, seen only in the status line`,
+            },
+        ]),
+        "</div>",
+    ]
+        .filter((line) => line !== "")
+        .join("\n");
+}
+/**
+ * Counts the sessions Claude Code resumed by itself across every lockout (D-077).
+ * @param data - Report data.
+ * @returns The sum of each lockout's count from obs_lockout_intervals.
+ */
+function resumedCount(data) {
+    return data.lockouts.reduce((sum, bar) => sum + bar.autoContinuations, 0);
+}
+/**
+ * Names a plan period as the text report's per-plan table does (D-075).
+ * @param period - The period.
+ * @returns Its name and its months, e.g. `["Max 5x", "2026-08 onward"]`.
+ */
+function periodText(period) {
+    const row = {
+        period_kind: period.kind,
+        plan_name: period.planName,
+        from_month: period.fromMonth,
+        to_month: period.toMonth,
+        until_month: period.untilMonth,
+    };
+    return [planPeriodName(row), planPeriodMonths(row)];
+}
+/**
+ * Renders the interruptions per plan period (D-075): the note the text report prints, and the
+ * table open, since it's the split this tab exists to show. Nothing until a plan has been entered.
+ * @param data - Report data.
+ * @returns Lines of HTML, or none.
+ */
+function byPlanBlock(data) {
+    const periods = data.interruptions.byPlan;
+    if (periods.length === 0) {
+        return [];
+    }
+    const zone = data.timeZone;
+    const c = LABELS.columns;
+    const rows = periods.map((p) => {
+        const [name, months] = periodText(p.period);
+        return {
+            name: `${name}, ${months}`,
+            cells: [
+                textCell(name),
+                textCell(months),
+                numberCell(formatNumber(p.hits, "count"), p.hitEvents),
+                numberCell(formatNumber(p.lockouts, "count"), p.lockoutEvents),
+                numberCell(formatNumber(p.lockoutSeconds, "duration"), p.lockoutEvents),
+                // Without the zone, as the month table's span cells: the section's "i" names it.
+                textCell(p.period.kind === "unknown"
+                    ? ""
+                    : `${formatInstant(p.span.from, zone)} to ${formatInstant(p.span.to, zone)}`),
+            ],
+        };
+    });
+    // The by-plan rule is in the section's "i" (D-091); the table stays open, as the split it shows.
+    return [
+        tableView(HTML_LABELS.byPlanCaption, [c.plan, c.months, c.hits, c.lockouts, c.elapsed, c.covers], rows, true),
+    ];
+}
+/**
+ * Renders the elapsed lockout time section, with the interruption counts and caveats next to the
+ * number. The total is the view's own (`obs_lockout_time` through the data), not a sum of the
+ * drawn bars, so the page and the text report print the same figure.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The section.
+ */
+function renderLockoutSection(data, options) {
+    const zone = data.timeZone;
+    // The counts' own span, as the text report states it beside them.
+    const span = `Covers: ${sourceSpan("session logs", data.interruptions.span, zone)}; ${sourceSpan("status line", coverageOf(data, "status_line"), zone)}`;
+    const bars = data.lockouts;
+    const summary = [interruptionCounts(data), ...byPlanBlock(data)].join("\n");
+    // D-091: the heading's definition, the hits note and the by-plan rule, behind the heading's "i".
+    const explained = [
+        HTML_LABELS.lockoutDefinition,
+        LABELS.limitHitsNote,
+        ...(data.interruptions.byPlan.length === 0
+            ? []
+            : [`${LABELS.byPlan}: ${LABELS.byPlanNote} (months in ${zone}).`]),
+    ];
+    // The text report's auto-resume caveat qualifies the not-resumed counts, which the page doesn't
+    // print, so it stays with them in the text report rather than seeming to qualify the hits here.
+    const caveats = para(HTML_LABELS.lockoutCaveat);
+    if (bars.length === 0) {
+        return chartSection({
+            id: "nm-lockouts",
+            heading: HTML_LABELS.lockoutElapsed,
+            span,
+            info: explained,
+            body: [summary, para(HTML_LABELS.noLockouts), caveats].join("\n"),
+        });
+    }
+    const resetHeader = LABELS.resetToNextRequest.charAt(0).toUpperCase() + LABELS.resetToNextRequest.slice(1);
+    const rows = bars.map((bar) => ({
+        name: `Lockout from ${formatInstant(bar.lockedFromUtc, zone)}`,
+        cells: [
+            textCell(formatInstant(bar.lockedFromUtc, zone)),
+            textCell(formatInstant(bar.lockedUntilUtc, zone)),
+            numberCell(formatNumber(bar.seconds, "duration"), bar.events),
+            numberCell(formatNumber(bar.hits, "count"), bar.events),
+            nextRequestCell(bar),
+            // D-077: sessions Claude Code resumed by itself after the reset, as logged.
+            numberCell(formatNumber(bar.autoContinuations, "count"), bar.autoContinuationEvents),
+        ],
+    }));
+    const resumed = bars.some((bar) => bar.autoContinuations > 0);
+    return chartSection({
+        id: "nm-lockouts",
+        heading: HTML_LABELS.lockoutElapsed,
+        span,
+        info: explained,
+        body: [
+            summary,
+            caveats,
+            // The ring is the one shape on this chart that isn't a lockout, so it gets a key.
+            ...(resumed ? [legend([["k-resumed", HTML_LABELS.legendResumed]])] : []),
+            plot(renderLockouts(bars, options)),
+            tableView(LABELS.lockout, [
+                HTML_LABELS.lockoutFrom,
+                HTML_LABELS.lockoutUntil,
+                HTML_LABELS.lockoutElapsed,
+                HTML_LABELS.hits,
+                resetHeader,
+                HTML_LABELS.resumedColumn,
+            ], rows),
+        ].join("\n"),
+    });
+}
+/**
+ * Renders output tokens by model.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The section.
+ */
+function renderModelSection(data, options) {
+    const span = `Covers: ${sourceSpan("session logs", coverageOf(data, "session_logs"), data.timeZone)}`;
+    if (data.models.length === 0) {
+        return chartSection({
+            id: "nm-models",
+            heading: HTML_LABELS.models,
+            span,
+            body: para(HTML_LABELS.noRequests),
+        });
+    }
+    const c = LABELS.columns;
+    const rows = data.models.map((m) => ({
+        name: m.model,
+        cells: [
+            textCell(m.model),
+            numberCell(formatNumber(m.requests, "count"), m.events),
+            numberCell(formatNumber(m.outputTokens, "tokens"), m.events),
+        ],
+    }));
+    return chartSection({
+        id: "nm-models",
+        heading: HTML_LABELS.models,
+        span,
+        body: [
+            plot(renderModelBars(data.models, options)),
+            tableView(HTML_LABELS.models, [c.model, c.requests, c.output], rows),
+        ].join("\n"),
+    });
+}
+/**
+ * Shows a repository as the text report does: `~/...` under the home directory, and a name for a
+ * request with no working directory.
+ * @param bar - The repository.
+ * @param home - Home directory, or "".
+ * @returns The display text, unescaped.
+ */
+function repoName(bar, home) {
+    return bar.repository === null
+        ? "unknown (no working directory)"
+        : displayPath(bar.repository, home);
+}
+/**
+ * Renders output tokens by repository (step G2.1, D-084), new to the page: until now only the
+ * text report showed it.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The section.
+ */
+function renderRepoSection(data, options) {
+    const span = `Covers: ${sourceSpan("session logs", coverageOf(data, "session_logs"), data.timeZone)}`;
+    if (data.repos.length === 0) {
+        return chartSection({
+            id: "nm-repos",
+            heading: HTML_LABELS.repos,
+            // D-091: how paths count, behind the heading's "i".
+            info: [HTML_LABELS.repoCaveat],
+            span,
+            body: para(HTML_LABELS.noRequests),
+        });
+    }
+    const c = LABELS.columns;
+    const rows = data.repos.map((r) => ({
+        name: repoName(r, data.home),
+        cells: [
+            textCell(repoName(r, data.home)),
+            textCell(repoKindName(r.kind)),
+            numberCell(formatNumber(r.requests, "count"), r.events),
+            numberCell(formatNumber(r.outputTokens, "tokens"), r.events),
+        ],
+    }));
+    const keys = [["k-fill", HTML_LABELS.legendRepo]];
+    if (data.repos.some((r) => r.kind === "missing")) {
+        keys.push(["k-faded", HTML_LABELS.legendGone]);
+    }
+    if (data.repos.length > REPO_BARS) {
+        keys.push(["k-other", HTML_LABELS.legendOther]);
+    }
+    return chartSection({
+        id: "nm-repos",
+        heading: HTML_LABELS.repos,
+        // D-091: how paths count, behind the heading's "i".
+        info: [HTML_LABELS.repoCaveat],
+        span,
+        body: [
+            legend(keys),
+            // D-092: each alias the user entered, beside the bars it moves, in the text report's words.
+            ...data.repositoryAliases.map((a) => para(`${LABELS.alias}: ${displayPath(a.from, data.home)} counts under ${displayPath(a.to, data.home)}`, "sub")),
+            plot(renderRepoBars({ bars: data.repos, home: data.home }, options)),
+            tableView(HTML_LABELS.repos, [c.repository, c.kind, c.requests, c.output], rows),
+        ].join("\n"),
+    });
+}
+/**
+ * Renders the burn rate of every open window (step G2.1, D-026, D-084), new to the page, below the
+ * seam: the premise next to the numbers, and each window's sentence exactly as the text report
+ * prints it.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The section.
+ */
+function renderBurnSection(data, options) {
+    const zone = data.timeZone;
+    // proj_burn_rate carries the status line's span on every row, as the text report prints it.
+    const first = data.burn[0];
+    const span = `Covers: ${sourceSpan("status line", first?.span ?? coverageOf(data, "status_line"), zone)}`;
+    const heading = { id: "nm-burn", heading: LABELS.burnRate, tag: HTML_LABELS.projectedTag };
+    const premise = para(LABELS.burnRatePremise);
+    if (data.burn.length === 0) {
+        return chartSection({
+            ...heading,
+            span,
+            body: [premise, para(HTML_LABELS.noOpenWindow)].join("\n"),
+        });
+    }
+    const c = LABELS.columns;
+    const windows = data.burn.map((burn) => {
+        const name = windowTitle(burn.window, burn.resetAtUtc, zone);
+        return [
+            countPara(burnSentence(burn, zone), burn.events, `${LABELS.burnRate}, ${name}`),
+            plot(renderBurnRate({ burn, series: seriesOf(data, burn.window, burn.resetAtUtc) }, options)),
+        ].join("\n");
+    });
+    const rows = data.burn.map((burn) => ({
+        name: windowTitle(burn.window, burn.resetAtUtc, zone),
+        cells: [
+            textCell(windowName(burn.window)),
+            textCell(formatInstant(burn.resetAtUtc, zone)),
+            numberCell(formatNumber(burn.last, "percent"), burn.events),
+            textCell(formatInstant(burn.lastAtUtc, zone)),
+            numberCell(formatNumber(burn.ratePerHour, "rate"), burn.events),
+            textCell(burn.limitReached
+                ? "limit reached at the last reading"
+                : formatInstant(burn.projectedLimitAtUtc, zone)),
+        ],
+    }));
+    return chartSection({
+        ...heading,
+        span,
+        body: [
+            legend([
+                ["k-fill", HTML_LABELS.burnObserved],
+                ["k-proj", HTML_LABELS.burnProjected],
+            ]),
+            premise,
+            ...windows,
+            tableView(LABELS.burnRate, [
+                c.window,
+                c.resets,
+                HTML_LABELS.lastFrom,
+                c.readingAt,
+                LABELS.burnRate,
+                HTML_LABELS.limitProjectedFor,
+            ], rows),
+        ].join("\n"),
+    });
+}
+/**
+ * Renders one overview card. It is a chart section of its own, so a number on it lists its events
+ * in the card itself (principle 4). The thumbnail is `inert`: a picture of the tab's chart, with
+ * its events still on every bar, but no extra keyboard stops and no clicks.
+ * @param card - The card's parts.
+ * @returns The card HTML.
+ */
+function overviewCard(card) {
+    const id = `nm-card-${card.tab}`;
+    return [
+        `<section class="panel nm-card nm-chart" id="${id}" aria-labelledby="${id}-h">`,
+        `<div class="panel-title"><h3 id="${id}-h">${escapeHtml(card.heading)}</h3>`,
+        `<button type="button" class="nm-goto" data-goto="${card.tab}">${escapeHtml(HTML_LABELS.openTab)}</button></div>`,
+        `<div class="nm-card-body">${card.lines.join("\n")}</div>`,
+        card.thumbnail === ""
+            ? ""
+            : `<div class="nm-thumb" inert aria-hidden="true">${plot(card.thumbnail)}</div>`,
+        para(card.span, "span"),
+        '<div class="nm-events" aria-live="polite" hidden></div>',
+        "</section>",
+    ]
+        .filter((part) => part !== "")
+        .join("\n");
+}
+/**
+ * Renders the overview tab's cards (step G2.1, D-084): one per observed tab, never a projection
+ * (principle 2), each with the numbers a reader looks for first.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The cards, in a grid.
+ */
+function renderOverviewCards(data, options) {
+    const zone = data.timeZone;
+    // A thumbnail is a picture of its tab's chart: drawn compact, and its text hidden by CSS, since at
+    // half size it can't be read and the card's own lines give the numbers.
+    const thumb = { ...options, compact: true };
+    const status = `Covers: ${sourceSpan("status line", coverageOf(data, "status_line"), zone)}`;
+    const logs = `Covers: ${sourceSpan("session logs", coverageOf(data, "session_logs"), zone)}`;
+    const weekly = data.gauge.filter((w) => w.window === "seven_day");
+    // The open weekly window is the current one; with several (resets jittered), the latest reset.
+    const current = weekly.filter((w) => w.open).at(-1);
+    const highest = weekly.reduce((best, w) => (w.peak !== null && (best?.peak ?? -1) < w.peak ? w : best), undefined);
+    const windowLines = data.gauge.length === 0
+        ? [para(LABELS.noReadings)]
+        : [
+            ...(current === undefined
+                ? []
+                : [
+                    countPara(`${HTML_LABELS.weeklyNow}: ${formatNumber(current.last, "percent")} at ${formatInstant(current.lastAtUtc, zone)}; resets ${formatInstant(current.resetAtUtc, zone)}`, current.lastEvents, HTML_LABELS.weeklyNow, "count"),
+                ]),
+            ...(highest === undefined
+                ? []
+                : [
+                    countPara(`${HTML_LABELS.weeklyPeak}: ${formatNumber(highest.peak, "percent")}, in the ${windowTitle(highest.window, highest.resetAtUtc, zone)}`, highest.peakEvents, HTML_LABELS.weeklyPeak, "count"),
+                ]),
+        ];
+    const t = data.interruptions;
+    const inIntervals = mergeEvents(...data.lockouts.map((bar) => bar.events));
+    const model = data.models[0];
+    const repo = data.repos[0];
+    const cards = [
+        {
+            tab: "windows",
+            heading: HTML_LABELS.tabWindows,
+            lines: windowLines,
+            thumbnail: data.gauge.length === 0 ? "" : renderGauge(data.gauge, thumb),
+            span: status,
+        },
+        {
+            tab: "interruptions",
+            heading: HTML_LABELS.tabInterruptions,
+            lines: [
+                // Lockouts lead: one is one limit reached, however many requests it refused (D-090).
+                countPara(`${HTML_LABELS.lockoutElapsed}: ${formatNumber(t.lockoutSeconds, "duration")} across ${plural(t.lockoutIntervals, "lockout", "lockouts")}`, inIntervals, HTML_LABELS.lockoutElapsed, "count"),
+                // One line per plan period once a plan is entered (D-075), each with its own lockouts.
+                ...t.byPlan.map((p) => {
+                    const [name, months] = periodText(p.period);
+                    return countPara(`${name}, ${months}: ${plural(p.lockouts, "lockout", "lockouts")}`, p.lockoutEvents, `${LABELS.columns.lockouts}, ${name}`, "sub");
+                }),
+                countPara(`${LABELS.limitHits}: ${formatNumber(t.hits, "count")} in ${plural(t.lockoutIntervals, "lockout", "lockouts")}`, t.events, LABELS.limitHits, "sub"),
+                // D-077: the sessions Claude Code resumed by itself, once any lockout has one.
+                ...(resumedCount(data) === 0
+                    ? []
+                    : [
+                        countPara(`${HTML_LABELS.resumedColumn} after a lockout: ${plural(resumedCount(data), "session", "sessions")}`, mergeEvents(...data.lockouts.map((bar) => bar.autoContinuationEvents)), HTML_LABELS.resumedColumn, "sub"),
+                    ]),
+            ],
+            thumbnail: data.lockouts.length === 0 ? "" : renderLockouts(data.lockouts, thumb),
+            span: `Covers: ${sourceSpan("session logs", t.span, zone)}`,
+        },
+        {
+            tab: "models",
+            heading: HTML_LABELS.tabModels,
+            lines: model === undefined
+                ? [para(HTML_LABELS.noRequests)]
+                : [
+                    countPara(`${HTML_LABELS.mostModel}: ${model.model}, ${formatNumber(model.outputTokens, "tokens")} output tokens`, model.events, HTML_LABELS.mostModel, "count"),
+                ],
+            thumbnail: data.models.length === 0 ? "" : renderModelBars(data.models, thumb),
+            span: logs,
+        },
+        {
+            tab: "repos",
+            heading: HTML_LABELS.tabRepos,
+            lines: repo === undefined
+                ? [para(HTML_LABELS.noRequests)]
+                : [
+                    countPara(`${HTML_LABELS.mostRepo}: ${repoName(repo, data.home)}, ${formatNumber(repo.outputTokens, "tokens")} output tokens`, repo.events, HTML_LABELS.mostRepo, "count"),
+                ],
+            // The first five are enough for a picture; the tab draws them all.
+            thumbnail: data.repos.length === 0
+                ? ""
+                : renderRepoBars({ bars: data.repos.slice(0, 5), home: data.home }, thumb),
+            span: logs,
+        },
+    ];
+    return `<div class="nm-cards">\n${cards.map(overviewCard).join("\n")}\n</div>`;
+}
+/** The page's tabs, in order: observed first, then projected after a visible gap (D-084). */
+const TABS = [
+    { key: "overview", label: HTML_LABELS.tabOverview, group: "observed" },
+    { key: "windows", label: HTML_LABELS.tabWindows, group: "observed" },
+    { key: "interruptions", label: HTML_LABELS.tabInterruptions, group: "observed" },
+    { key: "models", label: HTML_LABELS.tabModels, group: "observed" },
+    { key: "repos", label: HTML_LABELS.tabRepos, group: "observed" },
+    { key: "burn", label: HTML_LABELS.tabBurn, group: "projected" },
+    { key: "price", label: HTML_LABELS.tabPrice, group: "projected" },
+];
+/**
+ * Renders the tab bar (D-084): two tab lists, observed and projected, apart and labeled. Shown only
+ * when the script runs; without it the page reads top to bottom, seam included.
+ * @returns The navigation HTML. The overview tab starts selected.
+ */
+function renderTabBar() {
+    /**
+     * Renders one group's tab list.
+     * @param group - Which group.
+     * @param label - The group's visible label.
+     * @returns The group HTML.
+     */
+    const group = (group, label) => {
+        const tabs = TABS.filter((tab) => tab.group === group)
+            .map((tab) => {
+            const selected = tab.key === "overview";
+            return `<button type="button" role="tab" class="nm-tab" id="nm-tabbtn-${tab.key}" aria-controls="nm-tab-${tab.key}" aria-selected="${String(selected)}" tabindex="${selected ? 0 : -1}" data-tab="${tab.key}">${escapeHtml(tab.label)}</button>`;
+        })
+            .join("");
+        return `<div class="nm-tabgroup nm-tabgroup-${group}"><span class="nm-group-label">${escapeHtml(label)}</span><div role="tablist" class="nm-tablist" aria-label="${escapeHtml(label)}">${tabs}</div></div>`;
+    };
+    return [
+        `<nav class="nm-tabbar" aria-label="${escapeHtml(HTML_LABELS.tabsLabel)}">`,
+        group("observed", HTML_LABELS.observedGroup),
+        group("projected", HTML_LABELS.projectedGroup),
+        "</nav>",
+    ].join("\n");
+}
+/**
+ * Wraps a tab's content in its panel.
+ * @param key - The tab.
+ * @param content - The panel's HTML.
+ * @returns The panel; the overview's starts active.
+ */
+function tabPanel(key, content) {
+    const active = key === "overview" ? " nm-active" : "";
+    return `<div class="nm-tabpanel${active}" role="tabpanel" id="nm-tab-${key}" aria-labelledby="nm-tabbtn-${key}" data-tab="${key}">\n${content}\n</div>`;
+}
+/**
+ * Formats the plan price cell, as the text report does.
+ * @param month - A month.
+ * @returns Name and price, or "none entered".
+ */
+function planText(month) {
+    return month.planName === null
+        ? "none entered"
+        : `${month.planName}, ${formatNumber(month.planUsdPerMonth, "usd")} per month`;
+}
+/**
+ * Renders the notes the text report prints under the monthly table. The two counts resolve to
+ * their requests like any other number on the page (principle 4); the plain notes don't count.
+ * @param months - The months shown.
+ * @param notes - Rate readings and the lower-bound count, with their requests.
+ * @returns Paragraphs, escaped.
+ */
+function monthNotes(months, notes) {
+    const lines = [];
+    // One line per reading date, each with its own count, as renderProjected prints them.
+    for (const reading of notes.rateReadings) {
+        lines.push(countPara(`Rates were read from Anthropic's pricing page on ${reading.verifiedOn}; ${formatNumber(reading.pricedBeforeVerifiedRequests, "count")} requests dated before that are priced at those rates.`, reading.events, `Requests priced at the rate read on ${reading.verifiedOn}`, "note"));
+    }
+    if (notes.lowerBoundRequests > 0) {
+        lines.push(countPara(`Requests with cache writes of unrecorded duration, priced at the 5-minute rate (their cost is a lower bound): ${formatNumber(notes.lowerBoundRequests, "count")}`, notes.lowerBoundEvents, "Requests priced as a lower bound", "note"));
+    }
+    if (months.some((month) => month.unpricedRequests > 0)) {
+        lines.push(para(HTML_LABELS.unpricedNote, "note"));
+    }
+    if (months.every((month) => month.planName === null)) {
+        lines.push(para(HTML_LABELS.planHint, "note"));
+    }
+    return lines;
+}
+/**
+ * Renders observed tokens at API list price by month, the projected section below the seam.
+ * @param data - Report data.
+ * @param options - Chart options.
+ * @returns The section.
+ */
+function renderMonthSection(data, options) {
+    const zone = data.timeZone;
+    const months = data.months;
+    // Months come in order, so the first starts the span and the last ends it.
+    const span = { from: months[0]?.span.from ?? null, to: months.at(-1)?.span.to ?? null };
+    // D-091: the month zone and the reasoning behind "not a bill" are behind the heading's "i".
+    const heading = {
+        id: "nm-months",
+        heading: LABELS.apiListPrice,
+        tag: HTML_LABELS.projectedTag,
+        info: [`Months in ${zone}.`, HTML_LABELS.repricing],
+    };
+    const spanText = `Covers: ${sourceSpan("session logs", span, zone)}`;
+    // The Claude Code-only scope and "not a bill" change what the amounts mean, so they stay beside them.
+    const scope = para(`${LABELS.apiListPriceScope} ${HTML_LABELS.notABill}`);
+    if (months.length === 0) {
+        return chartSection({
+            ...heading,
+            span: spanText,
+            body: [scope, para(HTML_LABELS.noRequests)].join("\n"),
+        });
+    }
+    const c = LABELS.columns;
+    const rows = months.map((m) => ({
+        name: m.month,
+        cells: [
+            textCell(m.month),
+            numberCell(formatNumber(m.apiListPriceUsd, "usd"), m.events),
+            textCell(planText(m)),
+            numberCell(formatNumber(m.pricedRequests, "count"), m.events),
+            numberCell(formatNumber(m.unpricedRequests, "count"), m.unpricedEvents),
+            textCell(`${formatInstant(m.span.from, zone)} to ${formatInstant(m.span.to, zone)}`),
+        ],
+    }));
+    return chartSection({
+        ...heading,
+        span: spanText,
+        body: [
+            legend([
+                ["k-price", HTML_LABELS.legendPrice],
+                ["k-plan", HTML_LABELS.legendPlan],
+            ]),
+            scope,
+            plot(renderMonthBars(months, options)),
+            tableView(LABELS.apiListPrice, [c.month, c.apiListPrice, c.planPrice, c.priced, c.unpriced, c.covers], rows),
+            ...monthNotes(months, data.priceNotes),
+        ].join("\n"),
+    });
+}
+/**
+ * The page's styles. Theme tokens are shared with the chart SVG (G1.2), which fills and strokes
+ * with `var(--...)`, so one redefinition under `prefers-color-scheme: dark` switches both. System
+ * font stacks only: a web font would be a network request.
+ */
+const PAGE_STYLE = `
+:root {
+  color-scheme: light dark;
+  --page: #eef1f1; --surface: #fbfcfc; --sunken: #e3e8e8; --ink: #13212a; --ink-2: #44535c;
+  --muted: #6f7d85; --grid: #d9e0e1; --axis: #b6c1c3; --water: #1f7a8c; --water-deep: #155e6c;
+  --silt: #a8793a; --limit: #c2412d;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --page: #0c1417; --surface: #121c20; --sunken: #0f181b; --ink: #eef3f4; --ink-2: #b9c6ca;
+    --muted: #8a999e; --grid: #223035; --axis: #33454b; --water: #3aa7b8; --water-deep: #7cc9d5;
+    --silt: #d1a563; --limit: #e5604b;
+  }
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
+main { max-width: 1040px; margin: 0 auto; padding: 32px 20px 64px; display: grid; gap: 28px; }
+@media (max-width: 520px) { main { padding: 20px 16px 48px; } }
+h1 { font-size: clamp(24px, 4vw, 32px); line-height: 1.15; font-weight: 600; margin: 0; }
+h2, h3 { margin: 0; }
+h3 { font-size: 16px; font-weight: 600; }
+p { margin: 0; }
+.nm-head { display: grid; gap: 6px; }
+.meta, .span, .note { font-family: var(--mono); font-size: 12px; color: var(--muted); }
+.privacy { font-size: 13px; color: var(--ink-2); }
+.hook-warning { display: grid; gap: 4px; border-left: 3px solid var(--ink); padding: 8px 12px; background: var(--surface); font-weight: 600; }
+.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--water); font-weight: 600; }
+.eyebrow.projected { color: var(--silt); }
+/* D-091: an explanation behind a small "i" beside a heading. Hover, keyboard focus, or a tap (the
+   script's .nm-open) shows it; without the script, hover and focus still do. */
+.nm-info { position: relative; display: inline-block; margin-left: 8px; vertical-align: 2px; }
+.nm-info-btn { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); background: transparent; color: var(--muted); font: italic 600 12px/1 Georgia, "Times New Roman", serif; padding: 0; cursor: help; }
+.nm-info-btn:hover, .nm-info-btn:focus-visible, .nm-info.nm-open .nm-info-btn { border-color: var(--ink); color: var(--ink); }
+.nm-info-text { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 10; width: max-content; max-width: min(420px, 80vw); padding: 10px 12px; background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--ink-2); white-space: normal; letter-spacing: normal; text-transform: none; }
+.nm-info-text > span { display: block; }
+.nm-info-text > span + span { margin-top: 6px; }
+.nm-info:hover .nm-info-text, .nm-info:focus-within .nm-info-text, .nm-info.nm-open .nm-info-text { display: block; }
+/* On a narrow screen a popover beside the heading would run off the right edge: it opens as a sheet
+   along the bottom of the screen instead. */
+@media (max-width: 600px) {
+  .nm-info-text { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; z-index: 20; }
+}
+/* Read by screen readers, not drawn. */
+.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; }
+/* An empty column's full-height track, faint: in light mode it drew a grey stripe per window. */
+.nm-track { fill-opacity: 0.5; }
+.nm-part { display: grid; gap: 28px; }
+.panel { display: grid; gap: 10px; background: var(--surface); border-radius: 10px; padding: 18px 20px; min-width: 0; }
+@media (max-width: 520px) { .panel { padding: 14px 12px; } }
+.panel-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
+.caveat { font-size: 13px; color: var(--ink-2); }
+.total { font-size: 15px; }
+.total .num { font-weight: 600; }
+.nm-counts { display: grid; gap: 2px; }
+.nm-counts .count { font-size: 14px; margin-top: 6px; }
+.nm-counts .sub { font-size: 13px; color: var(--ink-2); padding-left: 16px; }
+.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); }
+.legend span { display: inline-flex; align-items: center; gap: 6px; }
+.legend i { display: inline-block; }
+.k-fill { width: 12px; height: 12px; border-radius: 2px; background: var(--water); }
+.k-tick { width: 14px; height: 2px; background: var(--ink); }
+.k-hit { width: 12px; height: 12px; border-radius: 2px; background: var(--limit); }
+.k-price { width: 12px; height: 12px; border-radius: 2px; background: var(--silt); opacity: 0.55; }
+.k-plan { width: 14px; height: 0; border-top: 2px dashed var(--silt); }
+.plot svg { display: block; width: 100%; height: auto; overflow: visible; }
+svg text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
+.nm-js [data-events], .nm-js .nm-col { cursor: pointer; }
+[data-events]:focus-visible, .nm-col:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.nm-sel { outline: 2px solid var(--ink); outline-offset: 1px; }
+.nm-hint { display: none; font-size: 13px; color: var(--muted); }
+.nm-js .nm-hint { display: block; }
+.nm-series-list { display: grid; gap: 6px; }
+.nm-js .nm-series:not([open]) { display: none; }
+.nm-series { background: var(--sunken); border-radius: 8px; padding: 10px 12px; }
+.nm-series > summary { font-weight: 600; cursor: pointer; }
+.nm-series[open] > * + * { margin-top: 8px; }
+.seam { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--silt); }
+.seam::before, .seam::after { content: ""; flex: 1; border-top: 2px dashed var(--silt); opacity: 0.7; }
+#nm-observed-h { color: var(--water); }
+.nm-events { background: var(--sunken); border-radius: 8px; padding: 10px 12px; font-size: 13px; display: grid; gap: 6px; }
+.nm-events[hidden] { display: none; }
+.nm-events ol { margin: 0; padding-left: 22px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
+details.nm-table > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
+details.nm-table, .nm-series { min-width: 0; max-width: 100%; }
+.table-scroll { overflow-x: auto; max-width: 100%; margin-top: 8px; }
+table { border-collapse: collapse; width: 100%; font-size: 13px; }
+caption { text-align: left; font-size: 12px; color: var(--muted); padding-bottom: 4px; }
+th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
+th { font-weight: 500; color: var(--muted); background: var(--sunken); white-space: nowrap; }
+td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
+/* One line per cell: a narrow screen scrolls the table in its box rather than stacking its text. */
+td { white-space: nowrap; }
+code { font-family: var(--mono); }
+.k-faded { width: 12px; height: 12px; border-radius: 2px; background: var(--water); opacity: 0.5; }
+.k-other { width: 12px; height: 12px; border-radius: 2px; background: var(--axis); }
+.k-proj { width: 16px; height: 0; border-top: 2px dotted var(--ink-2); }
+.k-resumed { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); }
+.nm-tabpanel { display: grid; gap: 28px; min-width: 0; }
+.nm-tabbar { display: none; }
+.nm-tabs .nm-tabbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 36px; background: var(--page); padding-top: 10px; border-bottom: 1px solid var(--grid); }
+.nm-tabgroup { display: grid; gap: 4px; }
+.nm-group-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: var(--water); }
+.nm-tabgroup-projected { padding-left: 20px; border-left: 2px dashed var(--silt); }
+.nm-tabgroup-projected .nm-group-label { color: var(--silt); }
+.nm-tablist { display: flex; flex-wrap: wrap; gap: 2px; }
+.nm-tab { font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; padding: 8px 12px 9px; cursor: pointer; }
+.nm-tab:hover { background: var(--sunken); color: var(--ink); }
+.nm-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--water); }
+.nm-tabgroup-projected .nm-tab[aria-selected="true"] { border-bottom: 3px dashed var(--silt); }
+.nm-tab:focus-visible, .nm-goto:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+.nm-tabs .nm-tabpanel:not(.nm-active) { display: none; }
+.nm-tabs .nm-part:not(.nm-has-active) { display: none; }
+.nm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
+@media (max-width: 720px) { .nm-cards { grid-template-columns: 1fr; } }
+.nm-card { align-content: start; }
+.nm-card-body { display: grid; gap: 2px; }
+.nm-goto { font: inherit; font-size: 13px; color: var(--water-deep); background: var(--sunken); border: 0; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
+.nm-thumb { max-height: 160px; overflow: hidden; border-radius: 6px; background: var(--sunken); padding: 6px; }
+/* A thumbnail's text would print at about 5 px; the card's lines carry its numbers instead. */
+.nm-thumb text { display: none; }
+@media print {
+  .nm-tabs .nm-tabbar, .nm-goto { display: none; }
+  /* Every explanation in full on paper, where nothing can be hovered (D-091). */
+  .nm-info-btn { display: none; }
+  .nm-info { display: block; margin: 4px 0 0; }
+  .nm-info-text { display: block; position: static; width: auto; max-width: none; padding: 0; border: 0; box-shadow: none; }
+  /* Paper can't scroll a table's box, so cells wrap there again (screens keep one line per cell). */
+  td { white-space: normal; }
+  .table-scroll { overflow-x: visible; }
+  /* The same selectors as the hiding rules, later in the sheet, so printing shows every tab. */
+  .nm-tabs .nm-tabpanel:not(.nm-active), .nm-tabs .nm-part:not(.nm-has-active) { display: grid; }
+}
+`;
+/**
+ * The page's one script. Plain ES2015 in a string, with no imports and no network: it reads the
+ * embedded event table and, on a click or on Enter or Space, lists the events behind the selected
+ * element in its section's panel, formatted as `nilometer explain` prints them (time, then
+ * `file:line`), and opens a gauge column's series. Its pure helpers sit on a global `NM` object so
+ * the unit tests can run them in Node; the DOM wiring runs only in a browser. Every value from the
+ * data reaches the page through `textContent`, never `innerHTML`, so a crafted path can't inject
+ * elements. It must never contain a closing-tag sequence, which a test checks.
+ */
+const PAGE_SCRIPT = `
+"use strict";
+var NM = (function () {
+  /* Formats an ISO instant as the text report does: YYYY-MM-DD HH:MM in the report's zone. */
+  function formatAt(iso, zone) {
+    if (iso === null || iso === undefined) { return "unknown"; }
+    var parts = new Intl.DateTimeFormat("en-US", {
+      timeZone: zone, year: "numeric", month: "2-digit", day: "2-digit",
+      hour: "2-digit", minute: "2-digit", hourCycle: "h23"
+    }).formatToParts(new Date(iso));
+    function part(type) {
+      for (var i = 0; i < parts.length; i++) { if (parts[i].type === type) { return parts[i].value; } }
+      return "";
+    }
+    return part("year") + "-" + part("month") + "-" + part("day") + " " + part("hour") + ":" + part("minute");
+  }
+  /* Reads a data-events value: raw line IDs separated by spaces. */
+  function parseIds(text) {
+    return String(text || "").split(/\\s+/).filter(function (s) { return s !== ""; })
+      .map(Number).filter(function (n) { return isFinite(n); });
+  }
+  /* Merges ID lists, each ID once, ascending, the order the data layer uses. */
+  function union(lists) {
+    var seen = {}, out = [];
+    lists.forEach(function (list) { list.forEach(function (id) { if (!seen[id]) { seen[id] = true; out.push(id); } }); });
+    return out.sort(function (a, b) { return a - b; });
+  }
+  /* One line per event, as explain prints it: time, two spaces, file:line. Capped at limit. */
+  function eventLines(ids, data, limit) {
+    var lines = [];
+    ids.slice(0, limit).forEach(function (id) {
+      var e = data.events[id];
+      if (!e) { lines.push("unknown  raw line " + id + ": not in this file"); return; }
+      var file = data.files[e.file];
+      var where = file === undefined ? "unknown location" : file + ":" + e.line;
+      lines.push(formatAt(e.atUtc, data.timeZone) + "  " + where);
+    });
+    return { lines: lines, more: Math.max(0, ids.length - limit) };
+  }
+  /* Names a selected element at the head of its list: its data-label, else its SVG title, else
+     its aria-label, which is how a gauge column names its window when opened by Enter. */
+  function labelOf(el) {
+    if (el.hasAttribute("data-label")) { return el.getAttribute("data-label"); }
+    for (var i = 0; i < el.children.length; i++) {
+      if (el.children[i].tagName.toLowerCase() === "title") { return el.children[i].textContent; }
+    }
+    if (el.hasAttribute("aria-label")) { return el.getAttribute("aria-label"); }
+    return "";
+  }
+  /* Picks the tab a page address names ("#repos"), or the first tab when it names none (D-084). */
+  function tabFromHash(hash, keys) {
+    var key = String(hash || "").replace(/^#/, "");
+    return keys.indexOf(key) >= 0 ? key : keys[0];
+  }
+  /* The tab an arrow, Home, or End key moves to, wrapping at both ends; -1 for any other key. */
+  function nextTab(index, key, count) {
+    if (key === "ArrowRight") { return (index + 1) % count; }
+    if (key === "ArrowLeft") { return (index - 1 + count) % count; }
+    if (key === "Home") { return 0; }
+    if (key === "End") { return count - 1; }
+    return -1;
+  }
+  return { formatAt: formatAt, parseIds: parseIds, union: union, eventLines: eventLines, labelOf: labelOf,
+    tabFromHash: tabFromHash, nextTab: nextTab };
+})();
+if (typeof document !== "undefined") {
+  (function () {
+    /* Tabs (D-084): one panel at a time, and the part holding it, so the seam shows above a
+       projected panel. Without this script every panel shows, top to bottom. */
+    var tabs = Array.prototype.slice.call(document.querySelectorAll(".nm-tab"));
+    if (tabs.length === 0) { return; }
+    var keys = tabs.map(function (t) { return t.getAttribute("data-tab"); });
+    document.documentElement.classList.add("nm-tabs");
+    function select(key, focus) {
+      tabs.forEach(function (t) {
+        var on = t.getAttribute("data-tab") === key;
+        t.setAttribute("aria-selected", on ? "true" : "false");
+        t.tabIndex = on ? 0 : -1;
+        if (on && focus) { t.focus(); }
+      });
+      Array.prototype.forEach.call(document.querySelectorAll(".nm-tabpanel"), function (p) {
+        p.classList.toggle("nm-active", p.getAttribute("data-tab") === key);
+      });
+      Array.prototype.forEach.call(document.querySelectorAll(".nm-part"), function (part) {
+        part.classList.toggle("nm-has-active", part.querySelector(".nm-tabpanel.nm-active") !== null);
+      });
+      if (window.history && window.history.replaceState) { window.history.replaceState(null, "", "#" + key); }
+    }
+    tabs.forEach(function (t, i) {
+      t.addEventListener("click", function () { select(t.getAttribute("data-tab"), false); });
+      t.addEventListener("keydown", function (e) {
+        var n = NM.nextTab(i, e.key, tabs.length);
+        if (n >= 0) { e.preventDefault(); select(keys[n], true); }
+      });
+    });
+    document.addEventListener("click", function (e) {
+      var go = e.target instanceof Element ? e.target.closest(".nm-goto") : null;
+      if (go) { select(go.getAttribute("data-goto"), true); window.scrollTo(0, 0); }
+    });
+    select(NM.tabFromHash(window.location.hash, keys), false);
+  })();
+}
+if (typeof document !== "undefined") {
+  (function () {
+    var LIMIT = ${EVENT_LIST_LIMIT};
+    var source = document.getElementById("nm-data");
+    if (!source) { return; }
+    var data = JSON.parse(source.textContent);
+    document.documentElement.classList.add("nm-js");
+    var selected = null;
+    /* Every element with events becomes reachable by keyboard; a gauge column is one stop. */
+    Array.prototype.forEach.call(document.querySelectorAll("[data-events], .nm-col"), function (el) {
+      var col = el.closest(".nm-col");
+      if (col && col !== el) { return; }
+      if (!el.hasAttribute("tabindex")) { el.setAttribute("tabindex", "0"); }
+      if (el instanceof SVGElement && !el.hasAttribute("role")) { el.setAttribute("role", "button"); }
+    });
+    function collect(el) {
+      var lists = [];
+      if (el.hasAttribute("data-events")) { lists.push(NM.parseIds(el.getAttribute("data-events"))); }
+      Array.prototype.forEach.call(el.querySelectorAll("[data-events]"), function (child) {
+        lists.push(NM.parseIds(child.getAttribute("data-events")));
+      });
+      return NM.union(lists);
+    }
+    function show(panel, ids, label) {
+      var listed = NM.eventLines(ids, data, LIMIT);
+      panel.textContent = "";
+      if (label) { var head = document.createElement("p"); head.className = "nm-events-label"; head.textContent = label; panel.appendChild(head); }
+      var count = document.createElement("p");
+      count.textContent = ids.length + (ids.length === 1 ? " event" : " events") + " behind it, each as time (" + data.timeZone + ") and file:line:";
+      panel.appendChild(count);
+      var list = document.createElement("ol");
+      listed.lines.forEach(function (line) { var li = document.createElement("li"); li.textContent = line; list.appendChild(li); });
+      panel.appendChild(list);
+      if (listed.more > 0) {
+        var more = document.createElement("p");
+        more.textContent = listed.more + " more events not listed; nilometer explain lists every event.";
+        panel.appendChild(more);
+      }
+      panel.hidden = false;
+    }
+    function openSeries(key) {
+      Array.prototype.forEach.call(document.querySelectorAll("details.nm-series"), function (d) {
+        d.open = d.getAttribute("data-series") === key;
+      });
+    }
+    function activate(target) {
+      var col = target.closest(".nm-col");
+      var el = target.closest("[data-events]");
+      /* An element inside the column lists its own events; the column itself lists them all. */
+      var chosen = el && (!col || col.contains(el)) ? el : col;
+      if (!chosen) { return; }
+      if (col) { openSeries(col.getAttribute("data-series")); }
+      var ids = chosen === el ? NM.parseIds(el.getAttribute("data-events")) : collect(col);
+      var section = chosen.closest("section.nm-chart");
+      var panel = section ? section.querySelector(".nm-events") : null;
+      if (panel) { show(panel, ids, NM.labelOf(chosen)); }
+      if (selected) { selected.classList.remove("nm-sel"); }
+      selected = chosen;
+      selected.classList.add("nm-sel");
+    }
+    /* D-091: a tap or click toggles an explanation; a click elsewhere or Escape closes them. */
+    function closeInfo(except) {
+      var open = document.querySelectorAll(".nm-info.nm-open");
+      for (var i = 0; i < open.length; i += 1) {
+        if (open[i] !== except) {
+          open[i].classList.remove("nm-open");
+          open[i].querySelector(".nm-info-btn").setAttribute("aria-expanded", "false");
+        }
+      }
+    }
+    document.addEventListener("click", function (e) {
+      var button = e.target instanceof Element ? e.target.closest(".nm-info-btn") : null;
+      if (button) {
+        var box = button.parentElement;
+        closeInfo(box);
+        var opening = !box.classList.contains("nm-open");
+        box.classList.toggle("nm-open", opening);
+        button.setAttribute("aria-expanded", String(opening));
+        return;
+      }
+      closeInfo(null);
+      if (e.target instanceof Element) { activate(e.target); }
+    });
+    document.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") { closeInfo(null); }
+      var t = e.target;
+      if ((e.key === "Enter" || e.key === " ") && t instanceof Element && t.matches("[data-events], .nm-col")) {
+        e.preventDefault();
+        activate(t);
+      }
+    });
+  })();
+}
+`;
+/**
+ * Renders the whole page (step G1.3, D-070): header, coverage, the observed sections, the seam,
+ * and the projected monthly section, in the text report's order, with the event table embedded for
+ * the script and a table view under every chart.
+ * @param data - Everything the report draws, from `loadHtmlData`.
+ * @returns One self-contained, ASCII-only HTML document; never throws for well-formed data.
+ * @see D-070
+ */
+function renderPage(data) {
+    const options = { timeZone: data.timeZone, width: CHART_WIDTH };
+    const embedded = embedJson({ timeZone: data.timeZone, files: data.files, events: data.events });
+    return [
+        "<!doctype html>",
+        '<html lang="en">',
+        "<head>",
+        '<meta charset="utf-8">',
+        '<meta name="viewport" content="width=device-width, initial-scale=1">',
+        `<title>${escapeHtml(`${LABELS.title} | Nilometer`)}</title>`,
+        `<style>${PAGE_STYLE}</style>`,
+        "</head>",
+        "<body>",
+        "<main>",
+        renderHeader(data),
+        // Navigation only: its labels name the tabs, so the projected group's label sits above the
+        // seam, while every projected panel stays below it in the document (principle 2, D-084).
+        renderTabBar(),
+        '<section class="nm-part" id="nm-observed" aria-labelledby="nm-observed-h">',
+        // The tab group's label already shows OBSERVED; the section keeps its heading for screen readers.
+        `<h2 class="eyebrow sr-only" id="nm-observed-h">${escapeHtml(LABELS.observed)}</h2>`,
+        tabPanel("overview", [renderCoverageSection(data, options), renderOverviewCards(data, options)].join("\n")),
+        tabPanel("windows", [renderGaugeSection(data, options), renderCrossingsSection(data)].join("\n")),
+        tabPanel("interruptions", renderLockoutSection(data, options)),
+        tabPanel("models", renderModelSection(data, options)),
+        tabPanel("repos", renderRepoSection(data, options)),
+        "</section>",
+        // The seam: everything below it is derived from the observations above (principle 2).
+        '<section class="nm-part" id="nm-projected" aria-labelledby="nm-seam">',
+        `<h2 class="seam" id="nm-seam">${escapeHtml(LABELS.projected)}</h2>`,
+        tabPanel("burn", renderBurnSection(data, options)),
+        tabPanel("price", renderMonthSection(data, options)),
+        "</section>",
+        "</main>",
+        `<script type="application/json" id="nm-data">${embedded}</script>`,
+        `<script>${PAGE_SCRIPT}</script>`,
+        "</body>",
+        "</html>",
+        "",
+    ].join("\n");
+}
+/**
+ * Renders the HTML report, typed by the contract so a signature change fails the typecheck.
+ * @param data - Everything the report draws.
+ * @returns The page.
+ * @see D-070
+ */
+export const renderHtmlReport = renderPage;
+//# sourceMappingURL=html.js.map