@hyperpuncher/pi-ui 0.38.2

package/package.json

@@ -0,0 +1,77 @@
+{
+	"name": "@hyperpuncher/pi-ui",
+	"version": "0.38.2",
+	"description": "keyboard-first minimal gui for pi",
+	"homepage": "https://pi-ui.app",
+	"bugs": "https://github.com/hyperpuncher/pi-ui/issues",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/hyperpuncher/pi-ui.git"
+	},
+	"bin": {
+		"pi-ui": "dist/npm/server-main.js"
+	},
+	"files": [
+		"dist/npm",
+		"static"
+	],
+	"type": "module",
+	"imports": {
+		"#testing/assertions": "./src/testing/assertions.ts",
+		"#testing/files": "./src/testing/files.ts",
+		"#testing/temp": "./src/testing/temp.ts"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "concurrently -r \"bun run css:watch\" \"bun run client:watch\" \"bun --watch src/server-main.ts\"",
+		"server": "bun run assets:build && bun --watch src/server-main.ts",
+		"assets:build": "bun run client:build && bun run css:build",
+		"client:build": "bun -e 'await (await import(\"node:fs/promises\")).rm(\"static/build\", { recursive: true, force: true })' && bun build static/app/main.js --outdir static/build --target browser --format esm --splitting --entry-naming '[name].js' --chunk-naming 'chunks/[name]-[hash].js' --asset-naming 'assets/[name]-[hash].[ext]' --define process.env.NODE_ENV=\"production\" --ignore-dce-annotations --minify && bun build src/client/pierre-worker.ts --outfile static/build/pierre-worker.js --target browser --format esm --define process.env.NODE_ENV=\"production\" --ignore-dce-annotations --minify",
+		"client:watch": "bun -e 'await (await import(\"node:fs/promises\")).rm(\"static/build\", { recursive: true, force: true })' && bun build src/client/pierre-worker.ts --outfile static/build/pierre-worker.js --target browser --format esm --define process.env.NODE_ENV=\"development\" --ignore-dce-annotations --sourcemap=inline && bun build static/app/main.js --outdir static/build --target browser --format esm --splitting --entry-naming '[name].js' --chunk-naming 'chunks/[name]-[hash].js' --asset-naming 'assets/[name]-[hash].[ext]' --define process.env.NODE_ENV=\"development\" --ignore-dce-annotations --sourcemap=inline --watch --no-clear-screen",
+		"css:build": "bun scripts/generate-basecoat-css.ts && bunx tailwindcss -i src/ui/styles.css -o static/app.css --minify",
+		"css:watch": "bun scripts/generate-basecoat-css.ts && bunx tailwindcss -i src/ui/styles.css -o static/app.css --watch --silent",
+		"build": "bun run assets:build && bun scripts/build.ts",
+		"npm:build": "bun run assets:build && bun scripts/build-npm.ts",
+		"prepack": "bun run npm:build",
+		"run": "./dist/pi-ui",
+		"release": "bun scripts/release.ts",
+		"schema:build": "bun scripts/generate-config-schema.ts",
+		"schema:check": "bun scripts/generate-config-schema.ts --check",
+		"fmt": "bun run schema:build && ~/projects/dsfmt/target/release/dsfmt --write . && bunx oxfmt",
+		"lint": "bunx oxlint",
+		"lint:fix": "bunx oxlint --fix",
+		"check": "bun run schema:check && bunx tsc --noEmit",
+		"test": "bun test",
+		"audit": "bunx fallow audit"
+	},
+	"dependencies": {
+		"@earendil-works/pi-ai": "^0.84.3",
+		"@earendil-works/pi-coding-agent": "^0.84.3",
+		"@earendil-works/pi-tui": "^0.84.3",
+		"@iconify-json/lucide": "^1.2.126",
+		"@kitajs/html": "5.0.0-next.1",
+		"@pierre/diffs": "^1.3.6",
+		"@pierre/trees": "^1.0.0-beta.6",
+		"@starfederation/datastar-sdk": "^1.0.0",
+		"typebox": "^1.3.19"
+	},
+	"devDependencies": {
+		"@oxlint/plugins": "^1.80.0",
+		"@tailwindcss/cli": "^4.3.3",
+		"@types/bun": "^1.4.0",
+		"basecoat-css": "^1.0.2",
+		"concurrently": "^10.0.5",
+		"oxfmt": "^0.65.0",
+		"oxlint": "^1.80.0",
+		"oxlint-tailwindcss": "^1.10.0",
+		"tailwindcss": "^4.3.3",
+		"typescript": "^7.0.2"
+	},
+	"engines": {
+		"bun": ">=1.4.0"
+	},
+	"packageManager": "bun@1.4.0"
+}

package/static/app/attachment-file.js

@@ -0,0 +1,99 @@
+export const attachmentFileIcons = {
+	archive: {
+		paths: [
+			"M13.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v11.5",
+			"M14 2v5a1 1 0 0 0 1 1h5M8 12v-1m0 7v-2m0-9V6",
+		],
+		circle: { cx: 8, cy: 20, r: 2 },
+	},
+	audio: {
+		paths: [
+			"M17.5 22h.5a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3",
+			"M14 2v4a2 2 0 0 0 2 2h4M2 19a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 1 1-4 0v-1a2 2 0 1 1 4 0",
+		],
+	},
+	code: {
+		paths: [
+			"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4",
+			"M14 2v4a2 2 0 0 0 2 2h4M5 12l-3 3l3 3m4 0l3-3l-3-3",
+		],
+	},
+	file: {
+		paths: [
+			"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+			"M14 2v5a1 1 0 0 0 1 1h5",
+		],
+	},
+	pdf: {
+		paths: [
+			"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4",
+			"M14 2v4a2 2 0 0 0 2 2h4M2 13v-1h6v1m-3-1v6m-1 0h2",
+		],
+	},
+	text: {
+		paths: [
+			"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+			"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8",
+		],
+	},
+	video: {
+		paths: [
+			"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+			"M14 2v5a1 1 0 0 0 1 1h5m-4.967 5.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .967-.56z",
+		],
+	},
+};
+
+export function attachmentFileKind(name, mimeType) {
+	const extension = name.split(".").at(-1)?.toLowerCase() ?? "";
+	if (mimeType === "application/pdf" || extension === "pdf") return "pdf";
+	if (
+		mimeType?.startsWith("audio/") ||
+		["aac", "flac", "m4a", "mp3", "ogg", "wav"].includes(extension)
+	)
+		return "audio";
+	if (
+		mimeType?.startsWith("video/") ||
+		["avi", "m4v", "mkv", "mov", "mp4", "webm"].includes(extension)
+	)
+		return "video";
+	if (
+		mimeType?.includes("zip") ||
+		["7z", "bz2", "gz", "rar", "tar", "xz", "zip"].includes(extension)
+	)
+		return "archive";
+	if (
+		[
+			"c",
+			"cpp",
+			"css",
+			"go",
+			"h",
+			"html",
+			"java",
+			"js",
+			"json",
+			"jsx",
+			"py",
+			"rs",
+			"sh",
+			"sql",
+			"toml",
+			"ts",
+			"tsx",
+			"xml",
+			"yaml",
+			"yml",
+		].includes(extension) ||
+		mimeType === "application/json" ||
+		mimeType?.includes("javascript") ||
+		mimeType?.includes("xml")
+	)
+		return "code";
+	if (
+		mimeType?.startsWith("text/") ||
+		["csv", "log", "md", "rst", "txt"].includes(extension)
+	)
+		return "text";
+	return "file";
+}

package/static/app/basecoat.js

@@ -0,0 +1,57 @@
+const pending = new Set();
+let scheduled = false;
+
+export function refresh(root = document) {
+	if (!root) return;
+	for (const component of componentsIn(root)) pending.add(component);
+	if (scheduled || pending.size === 0) return;
+	scheduled = true;
+	queueMicrotask(() => {
+		scheduled = false;
+		for (const component of pending) {
+			const state = captureOpenSessionCommand(component);
+			component.refresh?.();
+			restoreOpenSessionCommand(component, state);
+		}
+		pending.clear();
+	});
+}
+
+function captureOpenSessionCommand(component) {
+	const dialog = component.closest?.("#session-dialog");
+	if (!(dialog instanceof HTMLDialogElement) || !dialog.open) return;
+	const input = component.querySelector("#session-input");
+	const menu = component.querySelector("#session-menu");
+	if (!(input instanceof HTMLInputElement) || !(menu instanceof HTMLElement)) return;
+	return {
+		activeId: input.getAttribute("aria-activedescendant"),
+	};
+}
+
+function restoreOpenSessionCommand(component, state) {
+	if (!state) return;
+	const menu = component.querySelector("#session-menu");
+	const active = state.activeId && document.getElementById(state.activeId);
+	if (
+		menu instanceof HTMLElement &&
+		active instanceof HTMLElement &&
+		component.contains(active) &&
+		active.getAttribute("aria-hidden") !== "true"
+	) {
+		active.dispatchEvent(new MouseEvent("mousemove", { bubbles: true }));
+	}
+	if (menu instanceof HTMLElement) menu.scrollTop = 0;
+}
+
+function componentsIn(root) {
+	const components = [];
+	if (root instanceof Element && isRefreshable(root)) components.push(root);
+	for (const element of root.querySelectorAll?.(".command, .dropdown-menu") ?? []) {
+		if (isRefreshable(element)) components.push(element);
+	}
+	return components;
+}
+
+function isRefreshable(value) {
+	return value.refresh instanceof Function;
+}

package/static/app/code-copy.js

@@ -0,0 +1,32 @@
+export function bindCodeCopy() {
+	document.addEventListener("click", async (event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		const button = target.closest("[data-copy-code]");
+		if (!(button instanceof HTMLButtonElement)) return;
+		const block = button.closest("[data-code-block]");
+		const source = block?.querySelector("[data-code-source]");
+		const code = block?.querySelector("code");
+		const text = source?.textContent
+			? decodeHtmlEntities(source.textContent)
+			: code?.textContent;
+		if (!text) return;
+		try {
+			await navigator.clipboard.writeText(text);
+			button.dataset.copyState = "copied";
+			button.setAttribute("aria-label", "Copied");
+			setTimeout(() => {
+				delete button.dataset.copyState;
+				button.setAttribute("aria-label", "Copy code");
+			}, 1200);
+		} catch {
+			button.setAttribute("aria-label", "Copy failed");
+		}
+	});
+}
+
+function decodeHtmlEntities(text) {
+	const textarea = document.createElement("textarea");
+	textarea.innerHTML = text;
+	return textarea.value;
+}

package/static/app/dialogs.js

@@ -0,0 +1,153 @@
+import { refresh } from "./basecoat.js";
+
+function openAndFocus(dialogId, inputId, options = {}) {
+	const dialog = document.getElementById(dialogId);
+	if (!(dialog instanceof HTMLDialogElement)) return;
+	if (!dialog.open) {
+		restoreFocusWhenDialogCloses(dialog, document.activeElement);
+		resetSearchInput(document.getElementById(inputId));
+		dialog.showModal();
+	}
+	refresh(dialog);
+	requestAnimationFrame(() => {
+		const activeItem = options.activeSelector
+			? dialog.querySelector(options.activeSelector)
+			: undefined;
+		activeItem?.dispatchEvent(new MouseEvent("mousemove", { bubbles: true }));
+		activeItem?.scrollIntoView({ block: "center" });
+		const input = document.getElementById(inputId);
+		if (input instanceof HTMLInputElement) input.focus({ preventScroll: true });
+	});
+}
+
+function restoreFocusWhenDialogCloses(dialog, origin) {
+	dialog.addEventListener(
+		"close",
+		() => {
+			setTimeout(() => restoreFocus(origin), 0);
+		},
+		{ once: true },
+	);
+}
+
+function restoreFocus(origin) {
+	if (!(origin instanceof HTMLElement)) return;
+	const target = origin.isConnected
+		? origin
+		: origin.id
+			? document.getElementById(origin.id)
+			: undefined;
+	if (!(target instanceof HTMLElement)) return;
+	if (document.activeElement === target) target.blur();
+	target.focus({ preventScroll: true });
+}
+
+export function toggleSession() {
+	const dialog = document.getElementById("session-dialog");
+	if (!(dialog instanceof HTMLDialogElement)) return false;
+	if (dialog.open) {
+		dialog.close();
+		return false;
+	}
+	openAndFocus("session-dialog", "session-input");
+	return true;
+}
+
+export function openTree() {
+	resetBoundInput(document.getElementById("tree-selected-id"));
+	openAndFocus("tree-dialog", "tree-input", {
+		activeSelector: "[data-active-tree-row]",
+	});
+}
+
+export function openCommand() {
+	openAndFocus("command-dialog", "command-input");
+}
+
+export function toggleCommand() {
+	const dialog = document.getElementById("command-dialog");
+	if (!(dialog instanceof HTMLDialogElement)) return false;
+	if (dialog.open) {
+		dialog.close();
+		return false;
+	}
+	openCommand();
+	return true;
+}
+
+export function bindDialogs() {
+	document.addEventListener(
+		"click",
+		(event) => {
+			const trigger =
+				event.target instanceof Element
+					? event.target.closest("button[aria-haspopup][aria-expanded]")
+					: undefined;
+			if (!(trigger instanceof HTMLButtonElement)) return;
+			if (trigger.getAttribute("aria-expanded") === "true") return;
+			const picker = trigger.closest(".popover, .dropdown-menu");
+			resetSearchInput(
+				picker?.querySelector("input[role='combobox'], input[type='search']"),
+			);
+		},
+		{ capture: true },
+	);
+}
+
+export function togglePopover(triggerId) {
+	const trigger = document.getElementById(triggerId);
+	if (!(trigger instanceof HTMLButtonElement)) return false;
+	const opening = trigger.getAttribute("aria-expanded") !== "true";
+	if (opening) restoreFocusWhenPopoverCloses(trigger, document.activeElement);
+	trigger.click();
+	return opening;
+}
+
+function restoreFocusWhenPopoverCloses(trigger, origin) {
+	const observer = new MutationObserver(() => {
+		if (trigger.getAttribute("aria-expanded") === "true") return;
+		observer.disconnect();
+		restoreFocus(origin);
+	});
+	observer.observe(trigger, { attributeFilter: ["aria-expanded"] });
+}
+
+export function openWorkspace() {
+	openAndFocus("workspace-dialog", "workspace-input");
+}
+
+export function openWorkspaceBrowser() {
+	const dialog = document.getElementById("workspace-browser-dialog");
+	if (!(dialog instanceof HTMLDialogElement)) return;
+	if (!dialog.open) {
+		document.getElementById("workspace-dialog")?.close();
+		restoreFocusWhenDialogCloses(dialog, document.getElementById("workspace-picker"));
+		dialog.showModal();
+	}
+	refresh(dialog);
+}
+
+export function toggleWorkspace() {
+	const dialog = document.getElementById("workspace-dialog");
+	if (!(dialog instanceof HTMLDialogElement)) return false;
+	if (dialog.open) {
+		dialog.close();
+		return false;
+	}
+	openWorkspace();
+	return true;
+}
+
+function resetBoundInput(input) {
+	if (!(input instanceof HTMLInputElement)) return;
+	input.value = "";
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function resetSearchInput(input) {
+	if (!(input instanceof HTMLInputElement)) return;
+	resetBoundInput(input);
+	const menuId = input.getAttribute("aria-controls");
+	const menu = menuId ? document.getElementById(menuId) : undefined;
+	if (menu instanceof HTMLElement) menu.scrollTop = 0;
+}

package/static/app/display-refresh.js

@@ -0,0 +1,125 @@
+const COMMON_DISPLAY_RATES = [60, 75, 90, 100, 120, 144, 165, 240];
+const DISPLAY_HZ_MIN = 30;
+const DISPLAY_HZ_MAX = 240;
+
+const WARMUP_FRAMES = 6;
+const SAMPLE_FRAMES = 48;
+const UPDATE_DEBOUNCE_MS = 250;
+
+/** Robustly estimates fixed refresh and uses a stable upper rate for variable refresh. */
+export function estimateDisplayHz(timestamps) {
+	if (timestamps.length < WARMUP_FRAMES + 3) return undefined;
+	const samples = timestamps.slice(WARMUP_FRAMES);
+	const deltas = [];
+	for (let index = 1; index < samples.length; index += 1) {
+		const delta = samples[index] - samples[index - 1];
+		if (delta >= 1000 / DISPLAY_HZ_MAX - 0.5 && delta <= 1000 / DISPLAY_HZ_MIN) {
+			deltas.push(delta);
+		}
+	}
+	if (deltas.length < 3) return undefined;
+	const medianDelta = percentile(deltas, 0.5);
+	const deviations = deltas.map((delta) => Math.abs(delta - medianDelta));
+	const variable = percentile(deviations, 0.5) / medianDelta > 0.06;
+	const presentationDelta = variable ? percentile(deltas, 0.25) : medianDelta;
+	const measured = clamp(1000 / presentationDelta, DISPLAY_HZ_MIN, DISPLAY_HZ_MAX);
+	return classifyCommonRate(measured);
+}
+
+function classifyCommonRate(measuredHz) {
+	const nearest = COMMON_DISPLAY_RATES.reduce((best, rate) =>
+		Math.abs(rate - measuredHz) < Math.abs(best - measuredHz) ? rate : best,
+	);
+	return Math.abs(nearest - measuredHz) / nearest <= 0.08
+		? nearest
+		: Math.round(clamp(measuredHz, DISPLAY_HZ_MIN, DISPLAY_HZ_MAX));
+}
+
+export function createDisplayRefreshMonitor(options) {
+	const sampleFrames = options.sampleFrames ?? SAMPLE_FRAMES;
+	let frame;
+	let updateTimer;
+	let timestamps = [];
+	let lastSentHz;
+	let pendingHz;
+
+	const sample = (timestamp) => {
+		frame = undefined;
+		if (!options.isEligible()) return;
+		timestamps.push(timestamp);
+		if (timestamps.length >= sampleFrames) {
+			const hz = estimateDisplayHz(timestamps);
+			timestamps = [];
+			if (hz !== undefined) queueUpdate(hz);
+			return;
+		}
+		frame = options.requestFrame(sample);
+	};
+
+	const queueUpdate = (hz) => {
+		if (
+			lastSentHz !== undefined &&
+			(Math.abs(lastSentHz - hz) < 1 ||
+				Math.abs(lastSentHz - hz) / lastSentHz < 0.02)
+		) {
+			return;
+		}
+		pendingHz = hz;
+		if (updateTimer !== undefined) options.clearTimer(updateTimer);
+		updateTimer = options.setTimer(() => {
+			updateTimer = undefined;
+			if (!options.isEligible() || pendingHz === undefined) return;
+			lastSentHz = pendingHz;
+			options.send(pendingHz);
+			pendingHz = undefined;
+		}, UPDATE_DEBOUNCE_MS);
+	};
+
+	const restart = () => {
+		if (frame !== undefined) options.cancelFrame(frame);
+		frame = undefined;
+		timestamps = [];
+		if (options.isEligible()) frame = options.requestFrame(sample);
+	};
+
+	const stop = () => {
+		if (frame !== undefined) options.cancelFrame(frame);
+		if (updateTimer !== undefined) options.clearTimer(updateTimer);
+		frame = undefined;
+		updateTimer = undefined;
+		timestamps = [];
+		pendingHz = undefined;
+	};
+
+	return { restart, stop };
+}
+
+export function bindDisplayRefreshMeasurement() {
+	const monitor = createDisplayRefreshMonitor({
+		requestFrame: (callback) => requestAnimationFrame(callback),
+		cancelFrame: (id) => cancelAnimationFrame(id),
+		isEligible: () => document.visibilityState === "visible" && document.hasFocus(),
+		setTimer: (callback, delay) => setTimeout(callback, delay),
+		clearTimer: (id) => clearTimeout(id),
+		send: (hz) => {
+			document.body.dispatchEvent(
+				new CustomEvent("pi-ui-display-refresh", { detail: { hz } }),
+			);
+		},
+	});
+	monitor.restart();
+	document.addEventListener("visibilitychange", monitor.restart);
+	window.addEventListener("focus", monitor.restart);
+	window.addEventListener("pagehide", monitor.stop, { once: true });
+}
+
+function percentile(values, fraction) {
+	const sorted = [...values].sort((left, right) => left - right);
+	return sorted[
+		Math.min(sorted.length - 1, Math.floor((sorted.length - 1) * fraction))
+	];
+}
+
+function clamp(value, minimum, maximum) {
+	return Math.min(maximum, Math.max(minimum, value));
+}

package/static/app/display-refresh_test.ts

@@ -0,0 +1,86 @@
+import { test } from "bun:test";
+
+import { assertEquals } from "#testing/assertions";
+
+import { createDisplayRefreshMonitor, estimateDisplayHz } from "./display-refresh.js";
+
+test("RAF samples classify common 60 through 240 Hz displays", () => {
+	for (const hz of [60, 75, 90, 100, 120, 144, 165, 240]) {
+		assertEquals(estimateDisplayHz(timestamps(hz, 60)), hz);
+	}
+});
+
+test("RAF estimator ignores warm-up and throttled outliers", () => {
+	const samples = timestamps(144, 60);
+	samples[1] += 80;
+	for (let index = 2; index < samples.length; index += 1) samples[index] += 80;
+	samples[20] += 100;
+	for (let index = 21; index < samples.length; index += 1) samples[index] += 100;
+	assertEquals(estimateDisplayHz(samples), 144);
+});
+
+test("variable RAF samples choose a stable recent upper presentation rate", () => {
+	const samples = [0];
+	for (let index = 1; index < 60; index += 1) {
+		const hz = index % 3 === 0 ? 90 : 120;
+		samples.push(samples.at(-1)! + 1000 / hz);
+	}
+	assertEquals(estimateDisplayHz(samples), 120);
+});
+
+test("hidden samples do not overwrite the last good display rate", () => {
+	let eligible = true;
+	let now = 0;
+	let frameCallback: ((timestamp: number) => void) | undefined;
+	let timerCallback: (() => void) | undefined;
+	const sent: number[] = [];
+	const monitor = createDisplayRefreshMonitor({
+		sampleFrames: 12,
+		isEligible: () => eligible,
+		requestFrame: (callback: (timestamp: number) => void) => {
+			frameCallback = callback;
+			return 1;
+		},
+		cancelFrame: () => {
+			frameCallback = undefined;
+		},
+		setTimer: (callback: () => void) => {
+			timerCallback = callback;
+			return 1;
+		},
+		clearTimer: () => {
+			timerCallback = undefined;
+		},
+		send: (hz: number) => sent.push(hz),
+	});
+	const runFrames = (hz: number) => {
+		for (let index = 0; index < 12; index += 1) {
+			now += 1000 / hz;
+			const callback = frameCallback;
+			callback?.(now);
+		}
+		timerCallback?.();
+	};
+	monitor.restart();
+	runFrames(60);
+	assertEquals(sent, [60]);
+
+	eligible = false;
+	monitor.restart();
+	// A stale callback, if delivered by a test/browser race, is ignored while hidden.
+	frameCallback?.(now + 1000 / 240);
+	timerCallback?.();
+	assertEquals(sent, [60]);
+
+	eligible = true;
+	monitor.restart();
+	runFrames(120);
+	assertEquals(sent, [60, 120]);
+	monitor.restart();
+	runFrames(120);
+	assertEquals(sent, [60, 120]);
+});
+
+function timestamps(hz: number, count: number): number[] {
+	return Array.from({ length: count }, (_, index) => (index * 1000) / hz);
+}