@zkmake/three-meter 0.3.2 → 0.5.0

package/README.md

@@ -16,7 +16,7 @@ load the scene up.
   <img
     src="https://raw.githubusercontent.com/zkmake/three-meter/main/docs/hud-full.png"
     width="320"
-    alt="The HUD in full mode, dark theme: a theme row (light, system, dark), a dim-on-leave toggle, FPS, CPU and GPU sparklines with live values, and a checkbox list of counters (FPS, calls, CPU, GPU, triangles, lines, points, render passes, geometries, textures, shaders) choosing what the compact card shows. Two discs beside it: a drag grip and the compact/full toggle."
+    alt="The HUD in full mode, dark theme: a theme row (light, system, dark), a dim-on-leave toggle, FPS, CPU and GPU sparklines with live values, and a checkbox list of counters (FPS, calls, CPU, GPU, triangles, lines, points, render passes, geometries, textures, shaders) choosing what the compact card shows, then a footer with the three-meter version, the three revision, a WebGL2 backend badge and the GPU name. Two discs beside it: a drag grip and the compact/full toggle."
   />
 </p>
 
@@ -90,8 +90,8 @@ Canvas is its own React root. To run two canvases on one page, pass the same `st
 | `injectStyles`     | `true`             | Append the stylesheet once per document.                                                      |
 | `refreshHz`        | `10`               | Repaint rate.                                                                                 |
 
-`PerformanceMonitor` and `PerfSampler` take `trackGPU` (default true), `gpuQueryPoolSize` (default 5)
-and `historySize` (default 120).
+`PerformanceMonitor` and `PerfSampler` take `trackGPU` (default true), `gpuQueryPoolSize` (default 5),
+`historySize` (default 120) and `frameStatsSize` (default 1000).
 
 ## Theme
 
@@ -127,6 +127,55 @@ and Firefox don't, so the GPU row shows `—` and `sample.gpu.available` is `fal
 
 On WebGPU, construct the renderer with `trackTimestamp: true`. Timings resolve a frame or two late.
 
+## Environment
+
+The full view's footer has two rows: the three-meter version (linked to its release notes) and the
+three revision, then the backend and the GPU name. An amber `WebGL2 fallback` badge means
+`WebGPURenderer` couldn't get WebGPU. Its checkbox (off by default) shows the footer in the compact
+HUD too. The same data is on the monitor:
+
+```ts
+monitor.getEnvironment();
+// { three: "186", backend: "webgpu", fallback: false, gpu: "Apple metal-3" }
+```
+
+`backend` is `null` until `WebGPURenderer.init()` settles. `gpu` comes from WebGPU's adapter info or
+WebGL's unmasked renderer string, and is `null` where the browser hides it. Chrome's WebGPU gives
+vendor and architecture, not the model.
+
+## Stutter
+
+Average FPS hides a hitch every few seconds. Three rows in the full view catch it, and any of them
+can be ticked into the compact HUD:
+
+- **1% low**: mean FPS across the slowest 1% of frames.
+- **Frame p99**: 99% of frames finish within this many ms.
+- **Hitches**: frames over twice the median frame time.
+
+They cover the last `frameStatsSize` frames (1000 by default, about 16 s at 60 Hz). Gaps over a
+second, like a hidden tab, are left out. Read them with `monitor.getFrameStats()`:
+
+```ts
+monitor.getFrameStats();
+// { frames: 1000, lowFps: 97.6, p99Ms: 10.2, hitches: 3 }
+```
+
+## Bug reports
+
+The **report** row's copy button puts a Markdown snapshot on the clipboard: versions, backend, GPU,
+the current metrics, the stutter stats, the viewport and the user agent. Paste it into an issue.
+`formatReport(monitor)` from `@zkmake/three-meter/ui` returns the same text.
+
+```text
+three-meter v0.5.0 · three r186 · WebGL2 · Apple M4 Max
+FPS 120 · 1% low 98 · p99 10.2 ms · hitches 3 / 1,000 frames
+CPU 0.2 ms · GPU 0.7 ms
+Calls 1 · passes 1 · triangles 24,000 · lines 0 · points 0
+Geometries 1 · textures 1 · shaders 1
+Viewport 1280×720 @2x
+Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) …
+```
+
 ## Examples
 
 [`examples/site`](examples/site) is what runs at [three-meter.pages.dev](https://three-meter.pages.dev/):

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { a as RenderCounts, c as TimingMetric, i as PerformanceMonitorOptions, n as GpuTiming, o as ResourceCounts, r as PerfRenderer, s as Sample, t as PerformanceMonitor } from "./performance-monitor-CdaU8Dsv.js";
+import { a as PerfRenderer, c as RenderCounts, d as TimingMetric, i as GpuTiming, l as ResourceCounts, n as Environment, o as PerformanceMonitorOptions, r as FrameStats, s as RenderBackend, t as PerformanceMonitor, u as Sample } from "./performance-monitor-CBN05_BC.js";
 //#region src/core/ring-buffer.d.ts
 /**
  * Fixed-capacity numeric ring buffer. Backs the per-frame timing history the
@@ -32,5 +32,5 @@ type AnimationLoop<Args extends unknown[]> = (...args: Args) => void;
  */
 declare function wrapAnimationLoop<Args extends unknown[]>(monitor: PerformanceMonitor, loop: AnimationLoop<Args>): AnimationLoop<Args>;
 //#endregion
-export { type GpuTiming, type PerfRenderer, PerformanceMonitor, type PerformanceMonitorOptions, type RenderCounts, type ResourceCounts, RingBuffer, type Sample, type TimingMetric, wrapAnimationLoop };
+export { type Environment, type FrameStats, type GpuTiming, type PerfRenderer, PerformanceMonitor, type PerformanceMonitorOptions, type RenderBackend, type RenderCounts, type ResourceCounts, RingBuffer, type Sample, type TimingMetric, wrapAnimationLoop };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { n as RingBuffer, t as PerformanceMonitor } from "./performance-monitor-D_v7W312.js";
+import { n as RingBuffer, t as PerformanceMonitor } from "./performance-monitor-yxsxs57v.js";
 //#region src/core/wrap-animation-loop.ts
 /**
 * Wrap a `renderer.setAnimationLoop` callback so each tick is one frame:

package/dist/{mount-perf-hud-CX9DrxjA.js → mount-perf-hud-BLs1jkwM.js}

@@ -88,6 +88,7 @@ const applyTheme = (element, theme) => {
 //#region src/ui/hud-settings.ts
 const DEFAULT_STORAGE_KEY = "three-meter";
 const DEFAULT_DIM = false;
+const DEFAULT_INFO = false;
 const DEFAULT_NUMBERS = [
 	"fps",
 	"calls",
@@ -111,6 +112,7 @@ var HudSettings = class {
 		this.defaults = {
 			dim: options.defaults?.dim ?? DEFAULT_DIM,
 			graphs: options.defaults?.graphs ?? DEFAULT_GRAPHS,
+			info: options.defaults?.info ?? DEFAULT_INFO,
 			numbers: options.defaults?.numbers ?? DEFAULT_NUMBERS
 		};
 		this.state = this.load();
@@ -125,6 +127,13 @@ var HudSettings = class {
 		this.state.dim = enabled;
 		this.persistAndNotify();
 	}
+	get info() {
+		return this.state.info;
+	}
+	setInfo(enabled) {
+		this.state.info = enabled;
+		this.persistAndNotify();
+	}
 	/** The user's pick in the panel; `null` means none, so the consumer's option applies. */
 	get theme() {
 		return this.state.theme;
@@ -159,6 +168,7 @@ var HudSettings = class {
 		const fallback = () => ({
 			dim: this.defaults.dim,
 			graphs: new Set(this.defaults.graphs),
+			info: this.defaults.info,
 			numbers: new Set(this.defaults.numbers),
 			theme: null
 		});
@@ -170,6 +180,7 @@ var HudSettings = class {
 			return {
 				dim: parsed.dim ?? this.defaults.dim,
 				graphs: new Set((parsed.graphs ?? this.defaults.graphs).filter(isTimingMetric)),
+				info: parsed.info ?? this.defaults.info,
 				numbers: new Set(parsed.numbers ?? this.defaults.numbers),
 				theme: isThemeMode(parsed.theme) ? parsed.theme : null
 			};
@@ -182,6 +193,7 @@ var HudSettings = class {
 			localStorage.setItem(this.storageKey, JSON.stringify({
 				dim: this.state.dim,
 				graphs: [...this.state.graphs],
+				info: this.state.info,
 				numbers: [...this.state.numbers],
 				theme: this.state.theme ?? void 0
 			}));
@@ -442,6 +454,7 @@ const dockPanel = (element, options = {}) => {
 //#region src/ui/icons.ts
 const ICON_MARKUP = {
 	blend: "<circle cx=\"9\" cy=\"9\" r=\"7\"/><circle cx=\"15\" cy=\"15\" r=\"7\"/>",
+	clipboard: "<rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"/>",
 	contrast: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 18a6 6 0 0 0 0-12v12z\"/>",
 	grip: "<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>",
 	monitor: "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"/><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"/>",
@@ -463,6 +476,44 @@ const createIcon = (name, className) => {
 	return svg;
 };
 //#endregion
+//#region package.json
+var version = "0.5.0";
+//#endregion
+//#region src/ui/clipboard.ts
+/**
+* Copy text from a click handler. The async Clipboard API needs a secure
+* context and the `clipboard-write` permission; a dev server opened over a LAN
+* IP has neither, and some embeds deny the permission. The fallback is the old
+* select-a-textarea `execCommand("copy")`, still honoured inside a user gesture.
+*/
+const copyWithSelection = (text) => {
+	const textarea = document.createElement("textarea");
+	textarea.value = text;
+	textarea.setAttribute("readonly", "");
+	textarea.style.position = "fixed";
+	textarea.style.opacity = "0";
+	textarea.style.pointerEvents = "none";
+	const previous = document.activeElement;
+	document.body.append(textarea);
+	textarea.select();
+	try {
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		textarea.remove();
+		previous?.focus?.();
+	}
+};
+const copyText = async (text) => {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return copyWithSelection(text);
+	}
+};
+//#endregion
 //#region src/ui/format.ts
 /**
 * Number formatting for the card. Counts stay exact with thousands separators
@@ -478,6 +529,76 @@ const compact = new Intl.NumberFormat("en-US", {
 });
 const formatCount = (value) => Math.abs(value) < COMPACT_FROM ? exact.format(value) : compact.format(value);
 //#endregion
+//#region src/ui/report.ts
+/**
+* A plain-text snapshot of the monitor for bug reports: versions, backend and
+* GPU, the current sample, stutter stats and the page. Fenced as a `text`
+* code block so GitHub and Slack keep the line breaks.
+*/
+const BACKEND_LABELS = {
+	webgl: "WebGL",
+	webgl2: "WebGL2",
+	webgpu: "WebGPU"
+};
+/** `WebGPU`, `WebGL2`, `WebGL2 fallback`, or `""` before the backend settles. */
+const backendLabel = (environment) => {
+	if (!environment.backend) return "";
+	const label = BACKEND_LABELS[environment.backend];
+	return environment.fallback ? `${label} fallback` : label;
+};
+const ms = (value) => `${value.toFixed(1)} ms`;
+const renderReport = ({ environment, page, sample, stats }) => {
+	const { render, resources } = sample;
+	const heading = [
+		`three-meter v${version}`,
+		environment.three ? `three r${environment.three}` : "",
+		backendLabel(environment),
+		environment.gpu ?? ""
+	].filter(Boolean);
+	const frames = stats.frames === 0 ? `FPS ${Math.round(sample.fps)}` : [
+		`FPS ${Math.round(sample.fps)}`,
+		`1% low ${Math.round(stats.lowFps)}`,
+		`p99 ${ms(stats.p99Ms)}`,
+		`hitches ${formatCount(stats.hitches)} / ${formatCount(stats.frames)} frames`
+	].join(" · ");
+	const lines = [
+		heading.join(" · "),
+		frames,
+		`CPU ${ms(sample.cpu)} · GPU ${sample.gpu.available ? ms(sample.gpu.ms) : "unavailable"}`,
+		[
+			`Calls ${formatCount(render.calls)}`,
+			`passes ${formatCount(render.passes)}`,
+			`triangles ${formatCount(render.triangles)}`,
+			`lines ${formatCount(render.lines)}`,
+			`points ${formatCount(render.points)}`
+		].join(" · "),
+		[
+			`Geometries ${formatCount(resources.geometries)}`,
+			`textures ${formatCount(resources.textures)}`,
+			`shaders ${formatCount(resources.programs)}`
+		].join(" · ")
+	];
+	if (page) lines.push(`Viewport ${page.width}×${page.height} @${page.dpr}x`, page.userAgent);
+	return [
+		"```text",
+		...lines,
+		"```"
+	].join("\n");
+};
+const readPage = () => typeof window === "undefined" ? null : {
+	dpr: window.devicePixelRatio || 1,
+	height: window.innerHeight,
+	userAgent: navigator.userAgent,
+	width: window.innerWidth
+};
+/** The report for `monitor` right now, as Markdown ready to paste into an issue. */
+const formatReport = (monitor) => renderReport({
+	environment: monitor.getEnvironment(),
+	page: readPage(),
+	sample: monitor.getSample(),
+	stats: monitor.getFrameStats()
+});
+//#endregion
 //#region src/ui/sparkline.ts
 function drawSparkline(ctx, width, height, values, style) {
 	ctx.clearRect(0, 0, width, height);
@@ -568,6 +689,9 @@ const THEME_OPTIONS = [
 		mode: "dark"
 	}
 ];
+const RELEASE_URL = `https://github.com/zkmake/three-meter/releases/tag/v${version}`;
+/** How long the report button says `copied` / `failed` before reading `copy` again. */
+const COPY_FEEDBACK_MS = 1500;
 const readTiming = (sample, metric) => {
 	switch (metric) {
 		case "fps": return sample.fps;
@@ -597,6 +721,21 @@ const NUMBERS = [
 		label: "GPU",
 		read: (sample) => sample.gpu.available ? sample.gpu.ms.toFixed(1) : "—"
 	},
+	{
+		key: "low",
+		label: "1% low",
+		read: (_sample, stats) => stats.frames ? Math.round(stats.lowFps).toString() : "—"
+	},
+	{
+		key: "p99",
+		label: "Frame p99",
+		read: (_sample, stats) => stats.frames ? stats.p99Ms.toFixed(1) : "—"
+	},
+	{
+		key: "hitches",
+		label: "Hitches",
+		read: (_sample, stats) => stats.frames ? formatCount(stats.hitches) : "—"
+	},
 	{
 		key: "triangles",
 		label: "Triangles",
@@ -654,7 +793,13 @@ var PerformanceView = class {
 	statValueEls = /* @__PURE__ */ new Map();
 	statCheckboxes = /* @__PURE__ */ new Map();
 	dimCheckbox;
+	infoCheckbox;
 	themeRadios = /* @__PURE__ */ new Map();
+	footerThreeEl;
+	footerHardwareEl;
+	footerBackendEl;
+	footerGpuEl;
+	lastEnvironmentKey = "";
 	hudGraphsEl;
 	hudGridEl;
 	hudGraphs = /* @__PURE__ */ new Map();
@@ -676,6 +821,7 @@ var PerformanceView = class {
 		this.applyModeClass();
 		this.resizeObserver = new ResizeObserver(() => this.resizeCanvases());
 		this.build();
+		this.applyInfoClass();
 		this.rebuildHud();
 		this.onThemeChanged();
 		this.unsubscribe = this.settings.subscribe(() => this.onSelectionChanged());
@@ -717,6 +863,7 @@ var PerformanceView = class {
 		const sample = this.monitor.getSample();
 		if (this.mode === "compact") {
 			this.renderHud(sample);
+			if (this.settings.info) this.renderFooter();
 			return;
 		}
 		for (const config of TIMINGS) {
@@ -726,12 +873,33 @@ var PerformanceView = class {
 			const graph = this.graphCanvases.get(config.metric);
 			drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(config.metric) : [], config.style[this.theme.resolved]);
 		}
-		for (const config of NUMBERS) this.statValueEls.get(config.key).textContent = config.read(sample);
+		const stats = this.monitor.getFrameStats();
+		for (const config of NUMBERS) this.statValueEls.get(config.key).textContent = config.read(sample, stats);
+		this.renderFooter();
+	}
+	/** The monitor caches the environment once its backend settles; until then this re-reads. */
+	renderFooter() {
+		const environment = this.monitor.getEnvironment();
+		const three = environment.three ? `three r${environment.three}` : "";
+		const backend = backendLabel(environment);
+		const gpu = environment.gpu ?? "";
+		const key = `${three}\n${backend}\n${gpu}`;
+		if (key === this.lastEnvironmentKey) return;
+		this.lastEnvironmentKey = key;
+		this.footerThreeEl.textContent = three;
+		this.footerBackendEl.textContent = backend;
+		this.footerBackendEl.hidden = backend === "";
+		this.footerBackendEl.title = environment.fallback ? "WebGPURenderer couldn't get WebGPU and fell back to WebGL2" : "";
+		this.footerBackendEl.classList.toggle("is-fallback", environment.fallback);
+		this.footerGpuEl.textContent = gpu;
+		this.footerGpuEl.title = gpu;
+		this.footerHardwareEl.hidden = backend === "" && gpu === "";
 	}
 	renderHud(sample) {
+		const stats = this.hudNumberEls.size > 0 ? this.monitor.getFrameStats() : null;
 		for (const [key, element] of this.hudNumberEls) {
 			const config = NUMBERS.find((number) => number.key === key);
-			if (config) element.textContent = config.read(sample);
+			if (config && stats) element.textContent = config.read(sample, stats);
 		}
 		for (const [metric, graph] of this.hudGraphs) {
 			const config = TIMINGS.find((timing) => timing.metric === metric);
@@ -783,7 +951,7 @@ var PerformanceView = class {
 		dimLabel.className = "perf-monitor__label";
 		dimLabel.textContent = "dim on leave";
 		dimRow.append(createIcon("blend", "perf-monitor__icon"), dimLabel, this.dimCheckbox);
-		options.append(themeRow, dimRow);
+		options.append(themeRow, dimRow, this.buildReportRow());
 		const graphs = document.createElement("div");
 		graphs.className = "perf-monitor__graphs";
 		for (const config of TIMINGS) {
@@ -836,7 +1004,33 @@ var PerformanceView = class {
 			rowEl.append(checkbox, label, value);
 			stats.append(rowEl);
 		}
-		this.element.append(hud, options, graphs, stats);
+		const footer = document.createElement("div");
+		footer.className = "perf-monitor__footer";
+		this.infoCheckbox = this.buildCheckbox(this.settings.info, "Show version and environment in HUD", (on) => this.settings.setInfo(on));
+		const footerBody = document.createElement("div");
+		footerBody.className = "perf-monitor__footer-body";
+		const softwareRow = document.createElement("div");
+		softwareRow.className = "perf-monitor__footer-row";
+		const release = document.createElement("a");
+		release.className = "perf-monitor__link";
+		release.href = RELEASE_URL;
+		release.target = "_blank";
+		release.rel = "noopener noreferrer";
+		release.title = `Release notes for v${version}`;
+		release.textContent = `three-meter v${version}`;
+		this.footerThreeEl = document.createElement("span");
+		softwareRow.append(release, this.footerThreeEl);
+		this.footerHardwareEl = document.createElement("div");
+		this.footerHardwareEl.className = "perf-monitor__footer-row";
+		this.footerHardwareEl.hidden = true;
+		this.footerBackendEl = document.createElement("span");
+		this.footerBackendEl.className = "perf-monitor__badge";
+		this.footerGpuEl = document.createElement("span");
+		this.footerGpuEl.className = "perf-monitor__footer-gpu";
+		this.footerHardwareEl.append(this.footerBackendEl, this.footerGpuEl);
+		footerBody.append(softwareRow, this.footerHardwareEl);
+		footer.append(this.infoCheckbox, footerBody);
+		this.element.append(hud, options, graphs, stats, footer);
 	}
 	rebuildHud() {
 		const { selection } = this.settings;
@@ -894,6 +1088,8 @@ var PerformanceView = class {
 		for (const [metric, checkbox] of this.graphCheckboxes) checkbox.checked = this.settings.isGraphEnabled(metric);
 		for (const [key, checkbox] of this.statCheckboxes) checkbox.checked = this.settings.isNumberEnabled(key);
 		this.dimCheckbox.checked = this.settings.dim;
+		this.infoCheckbox.checked = this.settings.info;
+		this.applyInfoClass();
 		this.theme.setOverride(this.settings.theme);
 		this.rebuildHud();
 	}
@@ -902,6 +1098,31 @@ var PerformanceView = class {
 		applyTheme(this.element, this.theme);
 		for (const [mode, radio] of this.themeRadios) radio.setAttribute("aria-checked", String(mode === this.theme.effective));
 	}
+	buildReportRow() {
+		const row = document.createElement("div");
+		row.className = "perf-monitor__row perf-monitor__row--static";
+		const label = document.createElement("span");
+		label.className = "perf-monitor__label";
+		label.textContent = "report";
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "perf-monitor__button";
+		button.title = "Copy versions, GPU and current metrics as Markdown for a bug report";
+		button.textContent = "copy";
+		let resetTimer = 0;
+		const flash = (text) => {
+			button.textContent = text;
+			window.clearTimeout(resetTimer);
+			resetTimer = window.setTimeout(() => {
+				button.textContent = "copy";
+			}, COPY_FEEDBACK_MS);
+		};
+		button.addEventListener("click", () => {
+			copyText(formatReport(this.monitor)).then((copied) => flash(copied ? "copied" : "failed"));
+		});
+		row.append(createIcon("clipboard", "perf-monitor__icon"), label, button);
+		return row;
+	}
 	buildCheckbox(checked, title, onChange) {
 		const checkbox = document.createElement("input");
 		checkbox.type = "checkbox";
@@ -912,6 +1133,9 @@ var PerformanceView = class {
 		checkbox.addEventListener("change", () => onChange(checkbox.checked));
 		return checkbox;
 	}
+	applyInfoClass() {
+		this.element.classList.toggle("perf-monitor--info", this.settings.info);
+	}
 	applyModeClass() {
 		this.element.classList.toggle("perf-monitor--compact", this.mode === "compact");
 		this.element.classList.toggle("perf-monitor--full", this.mode === "full");
@@ -1127,6 +1351,27 @@ const PERF_HUD_STYLES = `
   color: inherit;
 }
 
+.perf-monitor__button {
+  flex: none;
+  min-width: 7ch;
+  padding: 0 6px;
+  border: 1px solid var(--perf-border);
+  border-radius: 3px;
+  background: var(--perf-row);
+  color: var(--perf-fg-dim);
+  font: inherit;
+  cursor: pointer;
+}
+
+.perf-monitor__button:hover {
+  color: var(--perf-fg);
+}
+
+.perf-monitor__button:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
+  outline-offset: 1px;
+}
+
 .perf-monitor__checkbox {
   flex: none;
   margin: 0;
@@ -1193,15 +1438,90 @@ const PERF_HUD_STYLES = `
   text-align: right;
 }
 
+.perf-monitor__footer {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 8px 6px 0;
+  border-top: 1px solid var(--perf-border);
+  color: var(--perf-muted);
+  font-size: 10px;
+}
+
+.perf-monitor__footer-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.perf-monitor__footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.perf-monitor__footer-row[hidden],
+.perf-monitor__badge[hidden] {
+  display: none;
+}
+
+.perf-monitor__footer-gpu {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--perf-fg-dim);
+}
+
+.perf-monitor__badge {
+  flex: none;
+  padding: 0 5px;
+  border: 1px solid var(--perf-border);
+  border-radius: 3px;
+  color: var(--perf-fg-dim);
+  letter-spacing: 0.04em;
+}
+
+.perf-monitor__badge.is-fallback {
+  border-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.perf-monitor[data-theme="light"] .perf-monitor__badge.is-fallback {
+  border-color: #d97706;
+  color: #b45309;
+}
+
+.perf-monitor__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.perf-monitor__link:hover,
+.perf-monitor__link:focus-visible {
+  color: var(--perf-accent);
+  text-decoration: underline;
+}
+
 .perf-monitor--full .perf-monitor__hud {
   display: none;
 }
 
 .perf-monitor--compact .perf-monitor__graphs,
-.perf-monitor--compact .perf-monitor__section {
+.perf-monitor--compact .perf-monitor__section,
+.perf-monitor--compact:not(.perf-monitor--info) .perf-monitor__footer,
+.perf-monitor--compact .perf-monitor__footer > .perf-monitor__checkbox {
   display: none;
 }
 
+.perf-monitor--compact .perf-monitor__footer {
+  padding: 6px 2px 2px;
+}
+
 .perf-monitor--compact {
   padding: 4px 8px;
 }
@@ -1446,6 +1766,6 @@ const mountPerfHud = (monitor, options = {}) => {
 	};
 };
 //#endregion
-export { dockPanel as a, HudTheme as c, PerformanceView as i, THEME_MODES as l, PERF_HUD_STYLES as n, DEFAULT_STORAGE_KEY as o, injectStyles as r, HudSettings as s, mountPerfHud as t, isThemeMode as u };
+export { formatReport as a, HudSettings as c, isThemeMode as d, PerformanceView as i, HudTheme as l, PERF_HUD_STYLES as n, dockPanel as o, injectStyles as r, DEFAULT_STORAGE_KEY as s, mountPerfHud as t, THEME_MODES as u };
 
-//# sourceMappingURL=mount-perf-hud-CX9DrxjA.js.map
+//# sourceMappingURL=mount-perf-hud-BLs1jkwM.js.map