@svelte-vitals/core 0.24.0 → 0.25.0

package/README.md

@@ -3,13 +3,13 @@
 [![npm](https://img.shields.io/npm/v/@svelte-vitals/core)](https://www.npmjs.com/package/@svelte-vitals/core)
 [![MIT](https://img.shields.io/npm/l/@svelte-vitals/core)](https://opensource.org/licenses/MIT)
 
-Runtime-agnostic core for [svelte-vitals](https://github.com/oekazuma/svelte-vitals): shared types, the rule engine, scorer, reporter, and the SEO rule set.
+Runtime-agnostic core for [svelte-vitals](https://github.com/oekazuma/svelte-vitals): shared types, the rule engine, scorer, and reporters, plus the full rule set across five categories — SEO, Performance, Correctness, Security, Architecture.
 
 This package is **mode-independent** and contains no I/O — it operates on a normalized `ResolvedHead[]` intermediate representation, so the same rules run unchanged whether heads come from static source analysis (the `svelte-vitals` CLI) or from prerendered HTML (the `@svelte-vitals/vite` plugin). It has zero runtime dependencies and no `node:` imports.
 
 > Most users don't depend on this directly — install [`svelte-vitals`](https://www.npmjs.com/package/svelte-vitals) instead. This package is for building tools on top of the shared engine.
 
-> **ESM-only** (Node 18+). Ships ES modules only; `require()` is unsupported by design.
+> **ESM-only** (Node 22.13+). Ships ES modules only; `require()` is unsupported by design.
 
 ## License
 

package/dist/index.d.ts

@@ -740,6 +740,57 @@ declare function formatMarkdownReport(results: Result[], config: Config, meta: {
     version: string;
 }): string;
 
+/** Provenance of a route's findings: real rendered page vs. source-only analysis. */
+type RouteBadge = 'measured' | 'static';
+interface AppSnapshot {
+    report: JsonReport;
+    badges: Record<string, RouteBadge>;
+    analyzing: boolean;
+    /** Monotonically increasing; lets the client discard an out-of-order /data.json response. */
+    sequence: number;
+    /** Whether a dev server is behind this page (SSE updates, /data.json refetch, connection dot). */
+    live: boolean;
+    meta: {
+        version: string;
+        coreVersion?: string;
+    };
+}
+/**
+ * Hand-authored CSS for the master/detail shell. Reuses the same design-token
+ * names/values as the rest of the project, and adds a dark theme via
+ * `:root[data-theme="dark"]` plus a `prefers-color-scheme` fallback for a
+ * first-ever visit with no stored preference.
+ */
+declare const APP_STYLE: string;
+/**
+ * Hand-authored client script for the shell — no bundler, no framework. Parses the
+ * AppSnapshot embedded by renderAppShell, then owns all rendering: sidebar
+ * (search/sort/route list) and detail pane (Overview or a selected route). When the
+ * snapshot says `live`, it additionally re-fetches /data.json on every SSE `update`
+ * and on the EventSource's `open` event (covers the initial connection and every
+ * auto-reconnect, since EventSource replays no missed events) — discarding any
+ * response whose `sequence` isn't newer than what's already rendered.
+ */
+declare const APP_SCRIPT: string;
+/** The shell HTML: empty sidebar/detail/topbar containers, the stylesheet, the
+ * client script, and the snapshot embedded as JSON for the client's first paint. */
+declare function renderAppShell(snapshot: AppSnapshot): string;
+/**
+ * Static (non-live) document over a prebuilt JsonReport — kept as the public name the
+ * html reporter has always exported. `routeBadges` preserves the old opts shape.
+ */
+declare function buildHtmlDocument(report: JsonReport, meta: {
+    version: string;
+    coreVersion?: string;
+}, opts?: {
+    routeBadges?: Record<string, RouteBadge>;
+}): string;
+/** Render results as the self-contained HTML report (the CLI's `--reporter html`). */
+declare function formatHtmlReport(results: Result[], config: Config, meta: {
+    version: string;
+    coreVersion?: string;
+}): string;
+
 type Band = 'good' | 'warn' | 'poor';
 declare const BAND_COLOR: Record<Band, string>;
 declare function scoreBand(score: number): Band;
@@ -754,20 +805,10 @@ declare function escapeHtml(s: string): string;
  * keeping core runtime-agnostic and lib-minimal.
  */
 declare function safeHref(url: string): string | null;
-declare function buildHtmlDocument(report: JsonReport, meta: {
-    version: string;
-    coreVersion?: string;
-}, opts?: {
-    routeBadges?: Record<string, 'measured' | 'static'>;
-}): string;
-declare function formatHtmlReport(results: Result[], config: Config, meta: {
-    version: string;
-    coreVersion?: string;
-}): string;
 
 /** Drop rules disabled via config (design §6). */
 declare function selectRules(rules: Rule[], config: Config): Rule[];
 /** Apply per-rule severity overrides to results (design §6). */
 declare function applyRuleSeverities(results: Result[], config: Config): Result[];
 
-export { BAND_COLOR, CHILD_NODE_KEYS, type Category, type Classification, type ComponentFacts, type Config, type ConsoleReportOptions, type Detection, type EachBlockFact, type EffectFact, type Fix, type HeadProvider, type HeadTag, type HeadingInfo, type HealthResult, type ImageInfo, type JsonReport, type Palette, type Presence, type Project, ROBOTS_SOURCE_PATHS, type ResolvedHead, type ResolvedHeadings, type ResolvedImages, type Result, type Rule, type RuleContext, type RuleInfo, type RuleSetting, type Runtime, SITEMAP_SOURCE_PATHS, type Scope, type ScoreModel, type ScoreOptions, type ScoreResult, type Severity, type SourceSpan, type Summary, type SuppressionDirective, type TreatDynamicAs, type Value, allRules, applyRuleSeverities, arch001ComponentSize, arch002PropCount, attrText, attrTextOf, attrValue, attrValueOf, buildHtmlDocument, buildJsonReport, classify, collectComponentFacts, computeHealth, computeScore, correct001EachKey, correct002EffectDerived, correct003EffectAsOnMount, correct004UnmutatedState, correct005PropMutation, defaultConfig, defaultProject, defineConfig, docsUrlFor, effectiveSeverity, emptyComponentFacts, escapeHtml, explainRule, findAttr, formatAgentReport, formatConsoleReport, formatGithubReport, formatHtmlReport, formatJsonReport, formatMarkdownReport, formatSarifReport, hasFailureAtOrAbove, headTagRule, imageRule, isPenalized, lineOf, linkRule, noColorPalette, parseComponentFacts, perf001ImageDimensions, perf002ImageLoading, perf003PreloadAs, perf004FontPreloadCrossorigin, perf005LcpImage, perf006ResponsiveImage, perf007RenderBlockingScript, perf008Preconnect, perf009HeavyImport, perf010NamespaceImport, runRules, safeHref, scoreBand, scoreColor, scoresByCategory, sec001Html, sec002JavascriptUrl, selectRules, seo001Title, seo002Description, seo003Canonical, seo004OgImage, seo005OgTitle, seo006Robots, seo007Sitemap, seo008JsonLd, seo009HtmlLang, seo010Indexability, seo011TwitterCard, seo012OgDescription, seo013OgUrl, seo014Viewport, seo015SitemapInRobots, seo016JsonLdValidity, seo017DeprecatedType, seo018RelativeUrl, seo019DateFormat, seo020Placeholder, seo021RequiredProps, seo022TitleLength, seo023DescriptionLength, seo024Charset, seo025ImageAlt, seo026Hreflang, seo027Heading, seo028TitleUnique, seo029DescriptionUnique, seo030HeadingOrder, summarize, textFromNodes, valueFromNodes };
+export { APP_SCRIPT, APP_STYLE, type AppSnapshot, BAND_COLOR, CHILD_NODE_KEYS, type Category, type Classification, type ComponentFacts, type Config, type ConsoleReportOptions, type Detection, type EachBlockFact, type EffectFact, type Fix, type HeadProvider, type HeadTag, type HeadingInfo, type HealthResult, type ImageInfo, type JsonReport, type Palette, type Presence, type Project, ROBOTS_SOURCE_PATHS, type ResolvedHead, type ResolvedHeadings, type ResolvedImages, type Result, type RouteBadge, type Rule, type RuleContext, type RuleInfo, type RuleSetting, type Runtime, SITEMAP_SOURCE_PATHS, type Scope, type ScoreModel, type ScoreOptions, type ScoreResult, type Severity, type SourceSpan, type Summary, type SuppressionDirective, type TreatDynamicAs, type Value, allRules, applyRuleSeverities, arch001ComponentSize, arch002PropCount, attrText, attrTextOf, attrValue, attrValueOf, buildHtmlDocument, buildJsonReport, classify, collectComponentFacts, computeHealth, computeScore, correct001EachKey, correct002EffectDerived, correct003EffectAsOnMount, correct004UnmutatedState, correct005PropMutation, defaultConfig, defaultProject, defineConfig, docsUrlFor, effectiveSeverity, emptyComponentFacts, escapeHtml, explainRule, findAttr, formatAgentReport, formatConsoleReport, formatGithubReport, formatHtmlReport, formatJsonReport, formatMarkdownReport, formatSarifReport, hasFailureAtOrAbove, headTagRule, imageRule, isPenalized, lineOf, linkRule, noColorPalette, parseComponentFacts, perf001ImageDimensions, perf002ImageLoading, perf003PreloadAs, perf004FontPreloadCrossorigin, perf005LcpImage, perf006ResponsiveImage, perf007RenderBlockingScript, perf008Preconnect, perf009HeavyImport, perf010NamespaceImport, renderAppShell, runRules, safeHref, scoreBand, scoreColor, scoresByCategory, sec001Html, sec002JavascriptUrl, selectRules, seo001Title, seo002Description, seo003Canonical, seo004OgImage, seo005OgTitle, seo006Robots, seo007Sitemap, seo008JsonLd, seo009HtmlLang, seo010Indexability, seo011TwitterCard, seo012OgDescription, seo013OgUrl, seo014Viewport, seo015SitemapInRobots, seo016JsonLdValidity, seo017DeprecatedType, seo018RelativeUrl, seo019DateFormat, seo020Placeholder, seo021RequiredProps, seo022TitleLength, seo023DescriptionLength, seo024Charset, seo025ImageAlt, seo026Hreflang, seo027Heading, seo028TitleUnique, seo029DescriptionUnique, seo030HeadingOrder, summarize, textFromNodes, valueFromNodes };

package/dist/index.js

@@ -2793,200 +2793,693 @@ function formatMarkdownReport(results, config, meta) {
   return lines.join("\n");
 }
 
-// src/reporter/html.ts
-var BAND_COLOR = {
-  good: "#2FA968",
-  warn: "#E8A317",
-  poor: "#E5484D"
-};
-function scoreBand(score) {
-  return score >= 90 ? "good" : score >= 50 ? "warn" : "poor";
+// src/reporter/app-shell.ts
+function embedJson(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
-function escapeHtml(s) {
-  return s.replace(
-    /[&<>"']/g,
-    (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;"
-  );
+function sanitizeDocsUrl(issue) {
+  if (issue.docsUrl === void 0) return issue;
+  if (safeHref(issue.docsUrl) !== null) return issue;
+  return { ...issue, docsUrl: void 0 };
 }
-function safeHref(url) {
-  const normalized = url.replace(/\s/g, "").toLowerCase();
-  return /^https?:\/\//.test(normalized) ? url : null;
+function sanitizeReport(report) {
+  return {
+    ...report,
+    routes: report.routes.map((route) => ({ ...route, issues: route.issues.map(sanitizeDocsUrl) })),
+    siteIssues: report.siteIssues.map(sanitizeDocsUrl)
+  };
 }
-var slug = (route) => "route-" + route.replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-|-$/g, "").toLowerCase();
-var categoryLabel = (cat) => cat === "seo" ? "SEO" : cat.charAt(0).toUpperCase() + cat.slice(1);
-var SEVERITIES = ["critical", "warning", "info"];
-function renderFinding(issue) {
-  const sev = SEVERITIES.includes(issue.severity) ? issue.severity : "info";
-  const dyn = issue.detection.value === "dynamic" ? ' <span class="dyn" title="set dynamically (verified at runtime)">\u21AF</span>' : "";
-  const line = issue.line !== void 0 ? `:${issue.line}` : "";
-  const fix = issue.fix?.snippet !== void 0 ? `<div class="fix"><div class="label">fix</div><pre><code>${escapeHtml(issue.fix.snippet)}</code></pre></div>` : "";
-  const href = issue.docsUrl ? safeHref(issue.docsUrl) : null;
-  const docs = href ? `<a class="f-link" href="${escapeHtml(href)}">Learn more</a>` : "";
-  return `<article class="finding sev-${sev}" data-severity="${sev}" data-category="${escapeHtml(issue.category)}"><div class="f-head"><span class="ruleid">${escapeHtml(issue.id)}</span><span class="f-title">${escapeHtml(issue.title)}</span><span class="sev-tag ${sev}">${sev}</span></div>` + (issue.location ? `<p class="f-loc">${escapeHtml(issue.location)}${line}${dyn}</p>` : "") + (issue.recommendation ? `<p class="f-rec">${escapeHtml(issue.recommendation)}</p>` : "") + fix + docs + `</article>`;
-}
-function renderTopbar(report, meta) {
-  const findings = report.routes.reduce((n, r) => n + r.issues.length, 0) + report.siteIssues.length;
-  const core = meta.coreVersion ? `<span title="@svelte-vitals/core version">core v${escapeHtml(meta.coreVersion)}</span>` : "";
-  return `<header class="topbar"><div class="brand"><span class="bolt">\u21AF</span>svelte-<span class="v">vitals</span></div><div class="meta"><span>v${escapeHtml(meta.version)}</span>` + core + `<span>${report.routes.length} routes</span><span>${findings} findings</span></div></header>`;
-}
-function renderHero(report) {
-  const C = 2 * Math.PI * 58;
-  const offset = (C * (1 - report.score / 100)).toFixed(1);
-  const hb = scoreBand(report.score);
-  const s = report.summary;
-  const dynNote = s.dynamic > 0 ? `<span class="tally"><span class="dot dyn-dot">\u21AF</span>Dynamic <span class="n">${s.dynamic}</span></span>` : "";
-  const cats = Object.entries(report.categories).map(([cat, { score }]) => {
-    const b = scoreBand(score);
-    const weight = report.weights[cat];
-    const w = weight !== void 0 ? `<span class="w">weight ${weight}</span>` : "";
-    const name = categoryLabel(cat);
-    return `<div class="cat"><div class="top"><span class="name">${escapeHtml(name)} ${w}</span><span class="sc" style="color:${BAND_COLOR[b]}">${score}</span></div><div class="bar"><i style="width:${score}%;background:${BAND_COLOR[b]}"></i></div></div>`;
-  }).join("");
-  return `<section class="hero"><div class="gauge"><svg width="132" height="132" viewBox="0 0 132 132" aria-hidden="true"><circle cx="66" cy="66" r="58" fill="none" stroke="#e4e7ec" stroke-width="11"></circle><circle id="arc" cx="66" cy="66" r="58" fill="none" stroke="${BAND_COLOR[hb]}" stroke-width="11" stroke-linecap="round" stroke-dasharray="${C.toFixed(1)}" stroke-dashoffset="${offset}"></circle></svg><div class="num"><strong id="hnum">${report.score}</strong><span>Health</span></div></div><div class="readout"><div class="eyebrow">SvelteKit \xB7 SEO &amp; Performance</div><div class="tallies"><span class="tally"><span class="dot crit"></span>Critical <span class="n">${s.critical}</span></span><span class="tally"><span class="dot warn"></span>Warning <span class="n">${s.warning}</span></span><span class="tally"><span class="dot info"></span>Info <span class="n">${s.info}</span></span><span class="tally"><span class="dot pass"></span>Passed <span class="n">${s.passed}</span></span>` + dynNote + `</div><div class="cats">${cats}</div></div></section>`;
-}
-var ROUTE_BADGES = ["measured", "static"];
-function renderRoutes(report, routeBadges) {
-  if (report.routes.length === 0) return "";
-  const rows = report.routes.map((r) => {
-    const b = scoreBand(r.score);
-    const crit = r.issues.filter((i) => i.severity === "critical").length;
-    const warn = r.issues.filter((i) => i.severity === "warning").length;
-    const info = r.issues.filter((i) => i.severity === "info").length;
-    const parts = [];
-    if (crit) parts.push(`${crit} critical`);
-    if (warn) parts.push(`${warn} warning${warn > 1 ? "s" : ""}`);
-    if (info) parts.push(`${info} info`);
-    const sum = parts.length ? parts.join(" \xB7 ") : '<span class="none">no issues</span>';
-    const body = r.issues.length ? r.issues.map(renderFinding).join("") : '<p class="empty">No issues found on this route.</p>';
-    const rawBadge = routeBadges?.[r.route];
-    const badge = rawBadge && ROUTE_BADGES.includes(rawBadge) ? rawBadge : void 0;
-    const badgeHtml = badge ? ` <span class="badge badge-${badge}">${escapeHtml(badge)}</span>` : "";
-    return `<details class="route" id="${slug(r.route)}" data-score="${r.score}"${r.issues.length ? " open" : ""}><summary><span class="route-name"><span class="path">${escapeHtml(r.route)}</span>${badgeHtml}</span><span class="issue-sum">${sum}</span><span class="score-chip"><span class="ring" style="background:${BAND_COLOR[b]}"></span>${r.score}</span><span class="chev">\u203A</span></summary><div class="route-body">${body}</div></details>`;
-  }).join("");
-  return `<section class="section"><h2>Routes</h2><div class="routes">${rows}</div></section>`;
-}
-function renderSiteChecks(report) {
-  if (report.siteIssues.length === 0) return "";
-  const cards = report.siteIssues.map(renderFinding).join("");
-  return `<section class="section"><h2>Site checks</h2>${cards}</section>`;
-}
-function renderFilters(report) {
-  const chip = (filter, label, pressed = false) => `<button class="chip" type="button" aria-pressed="${pressed}" data-filter="${escapeHtml(filter)}">${escapeHtml(label)}</button>`;
-  const catChips = Object.keys(report.categories).map((cat) => chip(cat, categoryLabel(cat))).join("");
-  return `<div class="filters" role="group" aria-label="Filter findings">` + chip("all", "All", true) + chip("critical", "Critical") + chip("warning", "Warning") + chip("info", "Info") + catChips + `</div>`;
-}
-var STYLE = `
-:root{--ground: #f6f7f9;--panel: #fff;--ink: #0c1322;--muted: #5a6472;--faint: #8c95a3;--line: #e4e7ec;--line-strong: #d3d8e0;--accent: #ff3e00;--good: #2fa968;--warn: #e8a317;--poor: #e5484d;--code-bg: #0e1525;--code-ink: #e7ecf4;--radius: 12px;--mono: ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;--sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
+var APP_STYLE = `
+:root{--ground:#f6f7f9;--panel:#fff;--ink:#0c1322;--muted:#5a6472;--faint:#8c95a3;--line:#e4e7ec;--line-strong:#d3d8e0;--accent:#ff3e00;--good:#2fa968;--warn:#e8a317;--poor:#e5484d;--code-bg:#0e1525;--code-ink:#e7ecf4;--active-bg:#0c1322;--active-ink:#fff;--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
+:root[data-theme="dark"]{--ground:#0b0e14;--panel:#12161f;--ink:#e7ecf4;--muted:#9aa4b2;--faint:#6b7484;--line:#232838;--line-strong:#2d3345;--code-bg:#05070c;--code-ink:#e7ecf4;--active-bg:#e7ecf4;--active-ink:#0b0e14}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#0b0e14;--panel:#12161f;--ink:#e7ecf4;--muted:#9aa4b2;--faint:#6b7484;--line:#232838;--line-strong:#2d3345;--code-bg:#05070c;--code-ink:#e7ecf4;--active-bg:#e7ecf4;--active-ink:#0b0e14}}
 *{box-sizing:border-box}
-body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
-.wrap{max-width:960px;margin:0 auto;padding:0 20px 96px}
-.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0 16px;border-bottom:1px solid var(--line)}
-.brand{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:18px;letter-spacing:-.02em}
-.brand .bolt{color:var(--accent);font-size:20px}.brand .v{color:var(--accent)}
-.meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
-.hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:30px 0 24px}
-.gauge{position:relative;width:132px;height:132px}.gauge svg{transform:rotate(-90deg);display:block}
-.gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
-.gauge .num strong{font-family:var(--mono);font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
-.gauge .num span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:6px}
-.readout{min-width:0}
-.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);font-weight:700}
-.eyebrow::before{content:"\u21AF "}
-.tallies{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 18px}
-.tally{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;background:var(--panel);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
-.tally .dot{width:9px;height:9px;border-radius:50%}.tally .n{font-family:var(--mono);font-variant-numeric:tabular-nums}
-.dot.crit{background:var(--poor)}.dot.warn{background:var(--warn)}.dot.info{background:var(--faint)}.dot.pass{background:var(--good)}
-.dot.dyn-dot{background:transparent;color:var(--accent);font-weight:700;width:auto;height:auto}
-.cats{display:flex;gap:22px;flex-wrap:wrap}
-.cat{min-width:190px;flex:1}.cat .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
-.cat .name{font-size:13px;font-weight:600}.cat .name .w{color:var(--faint);font-family:var(--mono);font-size:11px;font-weight:500;margin-left:6px}
-.cat .sc{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
-.bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden}.bar>i{display:block;height:100%;border-radius:999px}
-.section{margin-top:40px}
-.section>h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700;margin:0 0 14px}
-.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
-.chip{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--panel);border:1px solid var(--line-strong);color:var(--muted);padding:5px 12px;border-radius:999px}
-.chip:hover{border-color:var(--faint);color:var(--ink)}
-.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
-.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
-.routes{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
-.route{border-top:1px solid var(--line)}.route:first-child{border-top:0}
-.route>summary{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;padding:13px 16px;cursor:pointer;list-style:none}
-.route>summary::-webkit-details-marker{display:none}
-.route>summary:hover{background:#fbfcfd}
-.route-name{font-family:var(--mono);font-size:13.5px;min-width:0;display:flex;align-items:center;gap:8px}
-.route-name .path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.badge{font-family:var(--sans);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;flex-shrink:0}
-.badge-measured{background:rgba(47,169,104,.14);color:var(--good)}
-.badge-static{background:rgba(140,149,163,.18);color:var(--muted)}
-.issue-sum{font-size:12.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap}.issue-sum .none{color:var(--good)}
-.score-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;font-size:14px}
-.score-chip .ring{width:10px;height:10px;border-radius:50%}
-.chev{color:var(--faint);font-family:var(--mono);transition:transform .15s ease}
-.route[open]>summary .chev{transform:rotate(90deg)}
-.route-body{padding:4px 16px 16px}.empty{color:var(--muted);font-size:13px;margin:6px 0}
-.finding{background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:10px;padding:16px 18px;margin:0 0 12px}
-.finding.sev-critical{border-left-color:var(--poor)}.finding.sev-warning{border-left-color:var(--warn)}.finding.sev-info{border-left-color:var(--faint)}
-.f-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
-.ruleid{font-family:var(--mono);font-size:12px;font-weight:600;background:#eef1f5;padding:2px 8px;border-radius:6px}
-.f-title{font-weight:650;font-size:15px}
-.sev-tag{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
-.sev-tag.critical{color:var(--poor)}.sev-tag.warning{color:var(--warn)}.sev-tag.info{color:var(--faint)}
-.f-loc{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:8px 0 0}.dyn{color:var(--accent);font-weight:700}
-.f-rec{font-size:14px;color:#2b3340;margin:10px 0 0}
-.fix{margin:12px 0 0;background:var(--code-bg);border-radius:8px;overflow:hidden}
-.fix .label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8da0bd;padding:8px 14px 0}
-.fix pre{margin:0;padding:8px 14px 14px;overflow-x:auto}
-.fix code{font-family:var(--mono);font-size:12.5px;color:var(--code-ink);line-height:1.65;white-space:pre}
-.f-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
-.f-link:hover{text-decoration:underline}.f-link::after{content:" \u2192"}
-.foot{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
-.foot a{color:var(--accent);text-decoration:none}
-@media (max-width:640px){.hero{grid-template-columns:1fr;justify-items:start}.route>summary{grid-template-columns:1fr auto}.chev{display:none}}
+html,body{margin:0;height:100%}
+body{background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
+.dv-app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:280px 1fr;grid-template-areas:"top top" "side main";height:100vh}
+.dv-topbar{grid-area:top;border-bottom:1px solid var(--line);background:var(--panel)}
+.dv-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 20px}
+.dv-brand{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;border-radius:6px}
+.dv-brand svg{height:28px;width:auto;display:block}
+.dv-brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
+.dv-meta{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
+.dv-status{display:flex;align-items:center;gap:10px}
+.dv-analyzing{font-size:12px;color:var(--accent);font-weight:600}
+.dv-conn{width:8px;height:8px;border-radius:50%;background:var(--faint);display:inline-block}
+.dv-conn-connected{background:var(--good)}
+.dv-conn-reconnecting{background:var(--warn)}
+.dv-menu-toggle{display:none;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:8px;width:28px;height:28px;cursor:pointer}
+.dv-theme-toggle{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:999px;width:28px;height:28px;cursor:pointer}
+.dv-theme-toggle:focus-visible,.dv-menu-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.dv-sidebar{grid-area:side;border-right:1px solid var(--line);background:var(--panel);overflow-y:auto}
+.dv-sidebar-inner{display:flex;flex-direction:column;gap:10px;padding:14px}
+.dv-search{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--ground);color:var(--ink)}
+.dv-sort{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--ground);color:var(--ink)}
+.dv-nav{display:flex;flex-direction:column;gap:2px}
+.dv-nav-item{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:8px;cursor:pointer}
+.dv-nav-item:hover{background:var(--ground)}
+.dv-nav-item.active{background:var(--active-bg);color:var(--active-ink)}
+.dv-nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+.dv-nav-label{font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dv-nav-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
+.dv-nav-item.active .dv-nav-meta{color:inherit}
+.dv-nav-score{font-family:var(--mono);font-weight:700}
+.dv-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:999px}
+.dv-badge-measured{background:rgba(47,169,104,.16);color:var(--good)}
+.dv-badge-static{background:rgba(140,149,163,.2);color:var(--muted)}
+.dv-detail{grid-area:main;overflow-y:auto;padding:24px 28px 80px}
+.dv-gauge{position:relative;width:132px;height:132px;margin-bottom:20px}
+.dv-gauge svg{position:absolute;inset:0;transform:rotate(-90deg)}
+.dv-gauge-track{stroke:var(--line)}
+.dv-gauge-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
+.dv-gauge-num strong{font-family:var(--mono);font-size:36px;font-weight:600}
+.dv-gauge-num span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
+.dv-cats{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:20px}
+.dv-cat{min-width:180px;flex:1}
+.dv-cat-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
+.dv-bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
+.dv-bar>i{display:block;height:100%;border-radius:999px}
+.dv-filters{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
+.dv-chip{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--panel);border:1px solid var(--line-strong);color:var(--muted);padding:5px 12px;border-radius:999px}
+.dv-chip[aria-pressed="true"]{background:var(--active-bg);border-color:var(--active-bg);color:var(--active-ink)}
+.dv-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.dv-section h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:24px 0 12px}
+.dv-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
+.dv-route-path{font-family:var(--mono);font-size:16px;font-weight:600}
+.dv-score-chip{font-family:var(--mono);font-weight:700}
+.dv-finding{background:var(--panel);border:1px solid var(--line);border-left-width:3px;border-radius:10px;padding:16px 18px;margin:0 0 12px}
+.dv-finding-critical{border-left-color:var(--poor)}
+.dv-finding-warning{border-left-color:var(--warn)}
+.dv-finding-info{border-left-color:var(--faint)}
+.dv-f-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.dv-ruleid{font-family:var(--mono);font-size:12px;font-weight:600;background:var(--ground);padding:2px 8px;border-radius:6px}
+.dv-f-title{font-weight:650;font-size:15px}
+.dv-sev-tag{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
+.dv-sev-critical{color:var(--poor)}
+.dv-sev-warning{color:var(--warn)}
+.dv-sev-info{color:var(--faint)}
+.dv-f-route{display:block;font:inherit;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:none;padding:0;margin:8px 0 0;cursor:pointer;text-align:left}
+.dv-f-route:hover{text-decoration:underline}
+.dv-f-route:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.dv-f-loc{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:8px 0 0}
+.dv-f-rec{font-size:14px;margin:10px 0 0}
+.dv-fix{margin:12px 0 0;background:var(--code-bg);border-radius:8px;overflow:hidden}
+.dv-fix-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8da0bd;padding:8px 14px 0}
+.dv-fix pre{margin:0;padding:8px 14px 14px;overflow-x:auto}
+.dv-fix code{font-family:var(--mono);font-size:12.5px;color:var(--code-ink);line-height:1.65;white-space:pre}
+.tok-kw{color:#ff7ab8}
+.tok-str{color:#9ece6a}
+.tok-num{color:#ff9e64}
+.tok-cm{color:#6b7280;font-style:italic}
+.tok-id{color:var(--code-ink)}
+.tok-pn{color:#8da0bd}
+.dv-f-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
+.dv-f-link:hover{text-decoration:underline}
+.dv-ai-prompt{margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
+.dv-ai-prompt>summary{cursor:pointer;list-style:none;padding:8px 12px;font-size:12px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px;user-select:none}
+.dv-ai-prompt>summary::-webkit-details-marker{display:none}
+.dv-ai-prompt>summary::before{content:"\u25B8";display:inline-block;transition:transform .15s ease}
+.dv-ai-prompt[open]>summary::before{transform:rotate(90deg)}
+.dv-ai-prompt-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
+.dv-ai-prompt-pre{margin:0;padding:10px 12px;background:var(--code-bg);color:var(--code-ink);border-radius:8px;font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto}
+.dv-ai-copy-btn{align-self:flex-start;font:inherit;font-size:12px;font-weight:600;cursor:pointer;background:var(--panel);border:1px solid var(--line-strong);color:var(--ink);padding:5px 12px;border-radius:999px}
+.dv-ai-copy-btn:hover{border-color:var(--faint)}
+.dv-ai-copy-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.dv-empty{color:var(--muted);font-size:13px}
+@media (max-width:640px){.dv-app{grid-template-columns:1fr;grid-template-areas:"top" "main"}.dv-menu-toggle{display:inline-flex}.dv-sidebar{position:fixed;inset:0 20% 0 0;transform:translateX(-100%);transition:transform .2s ease;z-index:10}.dv-sidebar.open{transform:translateX(0)}}
 @media (prefers-reduced-motion:reduce){*{transition:none!important}}
 `;
-var SCRIPT = `
+var APP_SCRIPT = `
 (function(){
-  var arc=document.getElementById('arc'),num=document.getElementById('hnum');
-  if(arc&&num){
-    var C=2*Math.PI*58,score=parseInt(num.textContent,10)||0;
-    var reduce=window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    if(!reduce){
-      arc.style.transition='stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1)';
-      arc.style.strokeDashoffset=C.toFixed(1);
-      var start=null;
-      requestAnimationFrame(function step(t){
-        if(start===null)start=t;
-        var p=Math.min((t-start)/1100,1);
-        num.textContent=Math.round(score*(p<1?1-Math.pow(1-p,3):1));
-        if(p<1)requestAnimationFrame(step);
+  var BAND_COLOR = { good: '#2fa968', warn: '#e8a317', poor: '#e5484d' };
+  function scoreBand(score) { return score >= 90 ? 'good' : score >= 50 ? 'warn' : 'poor'; }
+
+  // Same mark as the docs site's hero wordmark (docs/public/wordmark.svg) \u2014 an inline
+  // copy, not an <img src>, since the dashboard is a single self-contained HTML response
+  // with no other static assets to serve alongside it. Fixed brand colors (not CSS custom
+  // properties), matching the docs usage: the wordmark reads the same in both themes.
+  var WORDMARK_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 56" role="img" aria-labelledby="dv-wordmark-title"><title id="dv-wordmark-title">svelte-vitals</title><defs><clipPath id="dv-wordmark-clip"><rect x="2" y="2" width="52" height="52" rx="14"/></clipPath></defs><rect x="2" y="2" width="52" height="52" rx="14" fill="#FF3E00"/><polyline clip-path="url(#dv-wordmark-clip)" points="4,28 15,28 17.5,23.5 20,28 23,28 26,7 29,49 32,28 35,28 37,24.5 39.5,28 52,28" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><text x="70" y="38" font-family="ui-sans-serif, system-ui, -apple-system, \\'Segoe UI\\', Roboto, sans-serif" font-size="30" font-weight="700" fill="#FF3E00">svelte-vitals</text></svg>';
+
+  function h(tag, attrs, kids) {
+    var n = document.createElement(tag);
+    if (attrs) {
+      for (var k in attrs) {
+        if (!Object.prototype.hasOwnProperty.call(attrs, k)) continue;
+        var v = attrs[k];
+        if (v === undefined || v === null || v === false) continue;
+        if (k === 'class') n.className = v;
+        else if (k === 'text') n.textContent = v;
+        else if (k.indexOf('on') === 0 && typeof v === 'function') n.addEventListener(k.slice(2), v);
+        else n.setAttribute(k, v === true ? '' : String(v));
+      }
+    }
+    (kids || []).forEach(function (c) {
+      if (c === undefined || c === null || c === false) return;
+      n.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
+    });
+    return n;
+  }
+  function clear(n) { while (n.firstChild) n.removeChild(n.firstChild); }
+  function mount(id, node) { var el = document.getElementById(id); clear(el); el.appendChild(node); }
+
+  var HL_KEYWORDS = ['import','export','from','const','let','var','function','return','if','else','for','while','class','new','await','async','default','type','interface','extends','implements','this','typeof','instanceof','of','in','true','false','null','undefined'];
+  var HL_LANGS = { js: 1, javascript: 1, ts: 1, typescript: 1, svelte: 1, html: 1, css: 1 };
+
+  function highlightTokens(code) {
+    var tokens = [];
+    var i = 0;
+    var n = code.length;
+    var reIdent = /[A-Za-z_$][A-Za-z0-9_$]*/y;
+    var reNum = /\\d+(\\.\\d+)?/y;
+    while (i < n) {
+      var ch = code[i];
+      if (ch === '/' && code[i + 1] === '/') {
+        var end = code.indexOf('\\n', i);
+        if (end === -1) end = n;
+        tokens.push({ text: code.slice(i, end), cls: 'cm' });
+        i = end;
+        continue;
+      }
+      if (ch === '/' && code[i + 1] === '*') {
+        var end2 = code.indexOf('*/', i + 2);
+        end2 = end2 === -1 ? n : end2 + 2;
+        tokens.push({ text: code.slice(i, end2), cls: 'cm' });
+        i = end2;
+        continue;
+      }
+      if (ch === '"' || ch === "'" || ch === '\`') {
+        var quote = ch;
+        var j = i + 1;
+        while (j < n && code[j] !== quote) {
+          if (code[j] === '\\\\') j++;
+          j++;
+        }
+        j = Math.min(j + 1, n);
+        tokens.push({ text: code.slice(i, j), cls: 'str' });
+        i = j;
+        continue;
+      }
+      reIdent.lastIndex = i;
+      var mIdent = reIdent.exec(code);
+      if (mIdent && mIdent.index === i) {
+        var word = mIdent[0];
+        tokens.push({ text: word, cls: HL_KEYWORDS.indexOf(word) !== -1 ? 'kw' : 'id' });
+        i += word.length;
+        continue;
+      }
+      reNum.lastIndex = i;
+      var mNum = reNum.exec(code);
+      if (mNum && mNum.index === i) {
+        tokens.push({ text: mNum[0], cls: 'num' });
+        i += mNum[0].length;
+        continue;
+      }
+      tokens.push({ text: ch, cls: 'pn' });
+      i += 1;
+    }
+    return tokens;
+  }
+
+  function renderFixSnippet(fix) {
+    var pre = h('pre', null, []);
+    var code = h('code', null, []);
+    var lang = (fix.lang || 'svelte').toLowerCase();
+    if (HL_LANGS[lang]) {
+      highlightTokens(fix.snippet).forEach(function (t) {
+        code.appendChild(h('span', { class: 'tok-' + t.cls, text: t.text }, []));
       });
-      requestAnimationFrame(function(){arc.style.strokeDashoffset=(C*(1-score/100)).toFixed(1);});
+    } else {
+      code.textContent = fix.snippet;
+    }
+    pre.appendChild(code);
+    return pre;
+  }
+
+  // Plain-text, copy-pasteable prompt for a single finding \u2014 same ingredients as the
+  // agent reporter's per-finding block (rule id, location, recommendation, fix, docs),
+  // reshaped for a standalone request rather than a whole-project remediation doc.
+  function buildAiPrompt(issue, route) {
+    var lines = ['Fix this svelte-vitals finding:', ''];
+    lines.push('- Rule: ' + issue.id + ' \u2014 ' + issue.title + ' (' + issue.severity + ')');
+    if (route) lines.push('- Route: ' + route);
+    if (issue.location) {
+      lines.push('- Location: ' + issue.location + (issue.line !== undefined ? ':' + issue.line : ''));
+    }
+    if (issue.recommendation) lines.push('- Recommendation: ' + issue.recommendation);
+    if (issue.fix) {
+      lines.push('- Fix: ' + issue.fix.description);
+      if (issue.fix.snippet) {
+        lines.push('', '\`\`\`' + (issue.fix.lang || 'svelte'), issue.fix.snippet, '\`\`\`');
+      }
+    }
+    if (issue.docsUrl) lines.push('- Docs: ' + issue.docsUrl);
+    lines.push(
+      '',
+      'After fixing, re-run \`svelte-vitals --diff\` (or revisit this route) to confirm ' +
+        issue.id +
+        ' passes' +
+        (route ? ' for ' + route : '') +
+        '.'
+    );
+    return lines.join('\\n');
+  }
+
+  function copyToClipboard(text, btn) {
+    var original = 'Copy';
+    function reset(label) {
+      btn.textContent = label;
+      setTimeout(function () { btn.textContent = original; }, 1500);
+    }
+    function done() { reset('Copied!'); }
+    function fail() { reset('Copy failed'); }
+    function fallbackCopy() {
+      var ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      var ok = false;
+      try { ok = document.execCommand('copy'); } catch (e) {}
+      document.body.removeChild(ta);
+      return ok;
+    }
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).then(done, function () { fallbackCopy() ? done() : fail(); });
+    } else {
+      fallbackCopy() ? done() : fail();
+    }
+  }
+
+  function renderAiPrompt(issue, route) {
+    var text = buildAiPrompt(issue, route);
+    var btn = h('button', { type: 'button', class: 'dv-ai-copy-btn', text: 'Copy' }, []);
+    btn.addEventListener('click', function () { copyToClipboard(text, btn); });
+    return h('details', { class: 'dv-ai-prompt' }, [
+      h('summary', { text: 'AI Prompt' }, []),
+      h('div', { class: 'dv-ai-prompt-body' }, [
+        h('pre', { class: 'dv-ai-prompt-pre', text: text }, []),
+        btn
+      ])
+    ]);
+  }
+
+  var state = {
+    snapshot: null,
+    selected: 'overview',
+    search: '',
+    sort: 'score-asc',
+    filter: 'all',
+    theme: initialTheme(),
+    connection: 'connecting',
+    routeBySlug: {}
+  };
+
+  function initialTheme() {
+    try {
+      var stored = localStorage.getItem('svelte-vitals-theme');
+      if (stored === 'dark' || stored === 'light') return stored;
+    } catch (e) {}
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  function applyTheme() { document.documentElement.setAttribute('data-theme', state.theme); }
+  function toggleTheme() {
+    state.theme = state.theme === 'dark' ? 'light' : 'dark';
+    try { localStorage.setItem('svelte-vitals-theme', state.theme); } catch (e) {}
+    applyTheme();
+    renderTopbar();
+  }
+  function toggleSidebar() {
+    var sb = document.getElementById('dv-sidebar');
+    if (sb) sb.classList.toggle('open');
+  }
+
+  function brandEl() {
+    var el = h('button', { type: 'button', class: 'dv-brand', 'aria-label': 'Go to Overview', onclick: function () { selectItem('overview'); } }, []);
+    el.innerHTML = WORDMARK_SVG;
+    return el;
+  }
+
+  function renderTopbar() {
+    var s = state.snapshot;
+    var findings = s.report.routes.reduce(function (n, r) { return n + r.issues.length; }, 0) + s.report.siteIssues.length;
+    var kids = [
+      h('button', { type: 'button', class: 'dv-menu-toggle', 'aria-label': 'Toggle route list', onclick: toggleSidebar, text: '\u2261' }, []),
+      brandEl(),
+      h('div', { class: 'dv-meta' }, [
+        h('span', { text: 'v' + s.meta.version }, []),
+        s.meta.coreVersion ? h('span', { title: '@svelte-vitals/core version', text: 'core v' + s.meta.coreVersion }, []) : null,
+        h('span', { text: s.report.routes.length + ' routes' }, []),
+        h('span', { text: findings + ' findings' }, [])
+      ].filter(Boolean)),
+      h('div', { class: 'dv-status' }, [
+        s.live && s.analyzing ? h('span', { class: 'dv-analyzing', text: 'Analyzing\u2026' }, []) : null,
+        s.live ? h('span', { class: 'dv-conn dv-conn-' + state.connection, title: state.connection }, []) : null,
+        h('button', { type: 'button', class: 'dv-theme-toggle', 'aria-label': 'Toggle dark mode', onclick: toggleTheme, text: state.theme === 'dark' ? '\u2600' : '\u263E' }, [])
+      ].filter(Boolean))
+    ];
+    mount('dv-topbar', h('div', { class: 'dv-topbar-inner' }, kids));
+  }
+
+  function slugify(route) {
+    return 'route-' + route.replace(/[^a-zA-Z0-9]+/g, '-').replace(/^-|-$/g, '').toLowerCase();
+  }
+
+  function matchesSearch(route, q) {
+    if (!q) return true;
+    q = q.toLowerCase();
+    if (route.route.toLowerCase().indexOf(q) !== -1) return true;
+    return route.issues.some(function (iss) {
+      return (iss.id + ' ' + iss.title + ' ' + (iss.location || '')).toLowerCase().indexOf(q) !== -1;
+    });
+  }
+
+  function sortedRoutes() {
+    var s = state.snapshot;
+    var q = state.search.trim();
+    var list = s.report.routes.filter(function (r) { return matchesSearch(r, q); }).slice();
+    var sort = state.sort;
+    if (sort === 'score-asc') list.sort(function (a, b) { return a.score - b.score; });
+    else if (sort === 'score-desc') list.sort(function (a, b) { return b.score - a.score; });
+    else if (sort === 'alpha') list.sort(function (a, b) { return a.route.localeCompare(b.route); });
+    else if (sort === 'most-findings') list.sort(function (a, b) { return b.issues.length - a.issues.length; });
+    return list;
+  }
+
+  function renderNavItem(label, key, route, active) {
+    var kids = [h('span', { class: 'dv-nav-label', text: label }, [])];
+    if (route) {
+      var band = scoreBand(route.score);
+      var crit = route.issues.filter(function (i) { return i.severity === 'critical'; }).length;
+      var warn = route.issues.filter(function (i) { return i.severity === 'warning'; }).length;
+      var info = route.issues.filter(function (i) { return i.severity === 'info'; }).length;
+      var summary = [];
+      if (crit) summary.push(crit + ' critical');
+      if (warn) summary.push(warn + ' warning' + (warn > 1 ? 's' : ''));
+      if (info) summary.push(info + ' info');
+      var badge = state.snapshot.badges[route.route];
+      kids.push(h('span', { class: 'dv-nav-meta' }, [
+        badge ? h('span', { class: 'dv-badge dv-badge-' + badge, text: badge }, []) : null,
+        h('span', { class: 'dv-nav-score', style: 'color:' + BAND_COLOR[band], text: String(route.score) }, []),
+        h('span', { class: 'dv-nav-sum', text: summary.length ? summary.join(' \xB7 ') : 'no issues' }, [])
+      ].filter(Boolean)));
+    }
+    return h('div', {
+      class: 'dv-nav-item' + (active ? ' active' : ''),
+      role: 'option',
+      'aria-selected': active ? 'true' : 'false',
+      tabindex: '0',
+      onclick: function () { selectItem(key); },
+      onkeydown: function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectItem(key); } }
+    }, kids);
+  }
+
+  function selectItem(key) {
+    state.selected = key;
+    location.hash = key === 'overview' ? 'overview' : 'route/' + slugify(key);
+    var sb = document.getElementById('dv-sidebar');
+    if (sb) sb.classList.remove('open');
+    renderSidebar();
+    renderDetail();
+  }
+
+  function renderSidebar() {
+    var s = state.snapshot;
+    state.routeBySlug = {};
+
+    // mount() clears and rebuilds the whole sidebar, including the <input> itself, so
+    // a naive re-render on every keystroke drops focus and cursor position \u2014 capture
+    // them before rebuilding and restore them on the freshly-created input afterward.
+    var prevSearch = document.querySelector('.dv-search');
+    var hadFocus = !!prevSearch && document.activeElement === prevSearch;
+    var selStart = hadFocus ? prevSearch.selectionStart : null;
+    var selEnd = hadFocus ? prevSearch.selectionEnd : null;
+
+    var searchInput = h('input', {
+      type: 'search',
+      class: 'dv-search',
+      placeholder: 'Search routes or rules\u2026',
+      value: state.search,
+      oninput: function (e) { state.search = e.target.value; renderSidebar(); }
+    }, []);
+
+    var sortSelect = h('select', { class: 'dv-sort', 'aria-label': 'Sort routes', onchange: function (e) { state.sort = e.target.value; renderSidebar(); } }, [
+      h('option', { value: 'score-asc', selected: state.sort === 'score-asc' || undefined, text: 'Score (worst first)' }, []),
+      h('option', { value: 'score-desc', selected: state.sort === 'score-desc' || undefined, text: 'Score (best first)' }, []),
+      h('option', { value: 'alpha', selected: state.sort === 'alpha' || undefined, text: 'Alphabetical' }, []),
+      h('option', { value: 'most-findings', selected: state.sort === 'most-findings' || undefined, text: 'Most findings' }, [])
+    ]);
+
+    var items = [renderNavItem('Overview', 'overview', null, state.selected === 'overview')];
+    sortedRoutes().forEach(function (r) {
+      var slug = slugify(r.route);
+      state.routeBySlug[slug] = r.route;
+      items.push(renderNavItem(r.route, r.route, r, state.selected === r.route));
+    });
+
+    var nav = h('div', { class: 'dv-nav', role: 'listbox', 'aria-label': 'Routes' }, items);
+    mount('dv-sidebar', h('div', { class: 'dv-sidebar-inner' }, [searchInput, sortSelect, nav]));
+
+    if (hadFocus) {
+      searchInput.focus();
+      if (selStart !== null && searchInput.setSelectionRange) {
+        searchInput.setSelectionRange(selStart, selEnd);
+      }
     }
   }
-  var chips=document.querySelectorAll('.chip'),findings=document.querySelectorAll('.finding');
-  function apply(f){
-    findings.forEach(function(el){
-      var ok=f==='all'||el.getAttribute('data-severity')===f||el.getAttribute('data-category')===f;
-      el.style.display=ok?'':'none';
+
+  function renderFilterChips(categories) {
+    var chip = function (filter, label) {
+      return h('button', {
+        type: 'button', class: 'dv-chip', 'aria-pressed': state.filter === filter ? 'true' : 'false',
+        onclick: function () { state.filter = filter; renderDetail(); },
+        text: label
+      }, []);
+    };
+    var catChips = Object.keys(categories).map(function (cat) {
+      var name = cat === 'seo' ? 'SEO' : cat.charAt(0).toUpperCase() + cat.slice(1);
+      return chip(cat, name);
     });
+    return h('div', { class: 'dv-filters', role: 'group', 'aria-label': 'Filter findings' },
+      [chip('all', 'All'), chip('critical', 'Critical'), chip('warning', 'Warning'), chip('info', 'Info')].concat(catChips));
+  }
+
+  function passesFilter(issue) {
+    var f = state.filter;
+    return f === 'all' || issue.severity === f || issue.category === f;
+  }
+
+  var SEVERITY_ORDER = { critical: 0, warning: 1, info: 2 };
+
+  function renderFinding(issue, route, promptRoute) {
+    var kids = [
+      h('div', { class: 'dv-f-head' }, [
+        h('span', { class: 'dv-ruleid', text: issue.id }, []),
+        h('span', { class: 'dv-f-title', text: issue.title }, []),
+        h('span', { class: 'dv-sev-tag dv-sev-' + issue.severity, text: issue.severity }, [])
+      ])
+    ];
+    if (route) {
+      kids.push(h('button', { type: 'button', class: 'dv-f-route', onclick: function () { selectItem(route); }, text: route }, []));
+    }
+    if (issue.location) {
+      kids.push(h('p', { class: 'dv-f-loc', text: issue.location + (issue.line !== undefined ? ':' + issue.line : '') }, []));
+    }
+    if (issue.recommendation) {
+      kids.push(h('p', { class: 'dv-f-rec', text: issue.recommendation }, []));
+    }
+    if (issue.fix && issue.fix.snippet) {
+      kids.push(h('div', { class: 'dv-fix' }, [h('div', { class: 'dv-fix-label', text: 'fix' }, []), renderFixSnippet(issue.fix)]));
+    }
+    if (issue.docsUrl) {
+      kids.push(h('a', { class: 'dv-f-link', href: issue.docsUrl, text: 'Learn more' }, []));
+    }
+    kids.push(renderAiPrompt(issue, promptRoute !== undefined ? promptRoute : route));
+    return h('article', { class: 'dv-finding dv-finding-' + issue.severity }, kids);
+  }
+
+  function renderGauge(score) {
+    var band = scoreBand(score);
+    var svgNs = 'http://www.w3.org/2000/svg';
+    var C = 2 * Math.PI * 58;
+    var offset = (C * (1 - score / 100)).toFixed(1);
+    var svg = document.createElementNS(svgNs, 'svg');
+    svg.setAttribute('width', '132');
+    svg.setAttribute('height', '132');
+    svg.setAttribute('viewBox', '0 0 132 132');
+    var bg = document.createElementNS(svgNs, 'circle');
+    bg.setAttribute('cx', '66'); bg.setAttribute('cy', '66'); bg.setAttribute('r', '58');
+    bg.setAttribute('fill', 'none'); bg.setAttribute('class', 'dv-gauge-track'); bg.setAttribute('stroke-width', '11');
+    var arc = document.createElementNS(svgNs, 'circle');
+    arc.setAttribute('cx', '66'); arc.setAttribute('cy', '66'); arc.setAttribute('r', '58');
+    arc.setAttribute('fill', 'none'); arc.setAttribute('stroke', BAND_COLOR[band]); arc.setAttribute('stroke-width', '11');
+    arc.setAttribute('stroke-linecap', 'round');
+    arc.setAttribute('stroke-dasharray', C.toFixed(1));
+    arc.setAttribute('stroke-dashoffset', offset);
+    svg.appendChild(bg);
+    svg.appendChild(arc);
+    var wrap = h('div', { class: 'dv-gauge' }, [h('div', { class: 'dv-gauge-num' }, [h('strong', { text: String(score) }, []), h('span', { text: 'Health' }, [])])]);
+    wrap.insertBefore(svg, wrap.firstChild);
+    return wrap;
   }
-  chips.forEach(function(c){
-    c.addEventListener('click',function(){
-      chips.forEach(function(o){o.setAttribute('aria-pressed','false');});
-      c.setAttribute('aria-pressed','true');
-      apply(c.getAttribute('data-filter')||'all');
+
+  function renderOverview(s) {
+    var gauge = renderGauge(s.report.score);
+    var cats = Object.keys(s.report.categories).map(function (cat) {
+      var c = s.report.categories[cat];
+      var band = scoreBand(c.score);
+      var weight = s.report.weights[cat];
+      var name = cat === 'seo' ? 'SEO' : cat.charAt(0).toUpperCase() + cat.slice(1);
+      return h('div', { class: 'dv-cat' }, [
+        h('div', { class: 'dv-cat-top' }, [
+          h('span', { text: name + (weight !== undefined ? ' (weight ' + weight + ')' : '') }, []),
+          h('span', { style: 'color:' + BAND_COLOR[band], text: String(c.score) }, [])
+        ]),
+        h('div', { class: 'dv-bar' }, [h('i', { style: 'width:' + c.score + '%;background:' + BAND_COLOR[band] }, [])])
+      ]);
     });
-  });
+    var chips = renderFilterChips(s.report.categories);
+    var totalCount = s.report.routes.reduce(function (n, r) { return n + r.issues.length; }, 0) + s.report.siteIssues.length;
+    var entries = [];
+    s.report.routes.forEach(function (r) {
+      r.issues.forEach(function (issue) { entries.push({ issue: issue, route: r.route }); });
+    });
+    s.report.siteIssues.forEach(function (issue) { entries.push({ issue: issue, route: null }); });
+    entries = entries.filter(function (e) { return passesFilter(e.issue); });
+    entries.sort(function (a, b) {
+      var sd = SEVERITY_ORDER[a.issue.severity] - SEVERITY_ORDER[b.issue.severity];
+      if (sd !== 0) return sd;
+      return (a.route || '').localeCompare(b.route || '');
+    });
+    var body = entries.length
+      ? entries.map(function (e) { return renderFinding(e.issue, e.route); })
+      : [h('p', { class: 'dv-empty', text: totalCount ? 'No issues match the current filter.' : 'No issues found \u2014 nice work!' }, [])];
+    var findings = h('section', { class: 'dv-section' }, [h('h2', { text: 'Findings' }, [])].concat(body));
+    return h('div', { class: 'dv-overview' }, [gauge, h('div', { class: 'dv-cats' }, cats), chips, findings].filter(Boolean));
+  }
+
+  function renderRouteDetail(route) {
+    var badge = state.snapshot.badges[route.route];
+    var band = scoreBand(route.score);
+    var header = h('div', { class: 'dv-detail-header' }, [
+      h('span', { class: 'dv-route-path', text: route.route }, []),
+      badge ? h('span', { class: 'dv-badge dv-badge-' + badge, text: badge }, []) : null,
+      h('span', { class: 'dv-score-chip', style: 'color:' + BAND_COLOR[band], text: String(route.score) }, [])
+    ].filter(Boolean));
+    var chips = renderFilterChips(state.snapshot.report.categories);
+    var findings = route.issues.filter(passesFilter);
+    var body = findings.length
+      ? findings.map(function (issue) { return renderFinding(issue, undefined, route.route); })
+      : [h('p', { class: 'dv-empty', text: 'No issues match the current filter.' }, [])];
+    return h('div', { class: 'dv-route-detail' }, [header, chips].concat(body));
+  }
+
+  function renderDetail() {
+    var s = state.snapshot;
+    if (state.selected === 'overview') {
+      mount('dv-detail', renderOverview(s));
+      return;
+    }
+    var route = s.report.routes.filter(function (r) { return r.route === state.selected; })[0];
+    if (!route) {
+      state.selected = 'overview';
+      mount('dv-detail', renderOverview(s));
+      return;
+    }
+    mount('dv-detail', renderRouteDetail(route));
+  }
+
+  function renderAll() {
+    renderTopbar();
+    renderSidebar();
+    renderDetail();
+  }
+
+  function restoreSelectionFromHash() {
+    var raw = location.hash.replace(/^#/, '');
+    if (!raw || raw === 'overview') { state.selected = 'overview'; return; }
+    var m = /^route\\/(.+)$/.exec(raw);
+    if (m && state.routeBySlug[m[1]]) state.selected = state.routeBySlug[m[1]];
+  }
+
+  function fetchSnapshot() {
+    fetch('/__svelte-vitals/data.json').then(function (r) { return r.json(); }).then(function (data) {
+      if (state.snapshot && data.sequence <= state.snapshot.sequence) return;
+      state.snapshot = data;
+      renderAll();
+    }).catch(function () {});
+  }
+
+  function boot() {
+    var raw = document.getElementById('svelte-vitals-data');
+    state.snapshot = JSON.parse(raw.textContent);
+    applyTheme();
+    renderSidebar(); // populates routeBySlug before the hash can be trusted
+    restoreSelectionFromHash();
+    renderAll();
+
+    window.addEventListener('hashchange', function () {
+      restoreSelectionFromHash();
+      renderSidebar();
+      renderDetail();
+    });
+
+    // Static export (the CLI's --reporter html): no dev server behind the page, so no
+    // SSE connection, no /data.json refetch, no connection indicator.
+    if (state.snapshot.live && typeof EventSource !== 'undefined') {
+      var es = new EventSource('/__svelte-vitals/events');
+      es.addEventListener('open', function () { state.connection = 'connected'; renderTopbar(); fetchSnapshot(); });
+      es.addEventListener('update', fetchSnapshot);
+      es.addEventListener('error', function () { state.connection = 'reconnecting'; renderTopbar(); });
+    }
+  }
+
+  boot();
 })();
 `;
+function renderAppShell(snapshot) {
+  const safe = { ...snapshot, report: sanitizeReport(snapshot.report) };
+  const title = snapshot.live ? "svelte-vitals dashboard" : "svelte-vitals report";
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title><style>${APP_STYLE}</style></head><body><div class="dv-app" id="dv-app"><header class="dv-topbar" id="dv-topbar"></header><nav class="dv-sidebar" id="dv-sidebar"></nav><main class="dv-detail" id="dv-detail"></main></div><script type="application/json" id="svelte-vitals-data">${embedJson(safe)}</script><script>${APP_SCRIPT}</script></body></html>`;
+}
 function buildHtmlDocument(report, meta, opts) {
-  return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>svelte-vitals report</title><style>${STYLE}</style></head><body><div class="wrap">` + renderTopbar(report, meta) + renderHero(report) + renderFilters(report) + renderRoutes(report, opts?.routeBadges) + renderSiteChecks(report) + `<footer class="foot"><span>Generated by svelte-vitals \xB7 static analysis, no browser</span><span>oekazuma.github.io/svelte-vitals</span></footer></div><script>${SCRIPT}</script></body></html>`;
+  const badges = Object.fromEntries(
+    Object.entries(opts?.routeBadges ?? {}).filter(([, b]) => b === "measured" || b === "static")
+  );
+  return renderAppShell({
+    report,
+    badges,
+    analyzing: false,
+    sequence: 0,
+    live: false,
+    meta
+  });
 }
 function formatHtmlReport(results, config, meta) {
   return buildHtmlDocument(buildJsonReport(results, config, meta), meta);
 }
 
+// src/reporter/html.ts
+var BAND_COLOR = {
+  good: "#2FA968",
+  warn: "#E8A317",
+  poor: "#E5484D"
+};
+function scoreBand(score) {
+  return score >= 90 ? "good" : score >= 50 ? "warn" : "poor";
+}
+function escapeHtml(s) {
+  return s.replace(
+    /[&<>"']/g,
+    (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : c === '"' ? "&quot;" : "&#39;"
+  );
+}
+function safeHref(url) {
+  const normalized = url.replace(/\s/g, "").toLowerCase();
+  return /^https?:\/\//.test(normalized) ? url : null;
+}
+
 // src/config-apply.ts
 function selectRules(rules, config) {
   return rules.filter((rule) => config.rules[rule.id] !== "off");
@@ -2998,6 +3491,8 @@ function applyRuleSeverities(results, config) {
   });
 }
 export {
+  APP_SCRIPT,
+  APP_STYLE,
   BAND_COLOR,
   CHILD_NODE_KEYS,
   ROBOTS_SOURCE_PATHS,
@@ -3055,6 +3550,7 @@ export {
   perf008Preconnect,
   perf009HeavyImport,
   perf010NamespaceImport,
+  renderAppShell,
   runRules,
   safeHref,
   scoreBand,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-vitals/core",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Shared, runtime-agnostic core for svelte-vitals (types, rule engine, scorer, reporter).",
   "type": "module",
   "license": "MIT",