wip

* fix: tsconfig.jsonにskipLibCheck: trueを追加する

* skipLibCheckで抜けたチェックを自前でやる

.github/scripts/chrome.mts

@@ -0,0 +1,784 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { spawn, spawnSync, type ChildProcessWithoutNullStreams } from 'node:child_process';
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import * as util from './utility.mts';
+import type { HeapSnapshotData } from './heap-snapshot-util.mts';
+
+type ChromeHandle = {
+	process: ChildProcessWithoutNullStreams;
+	port: number;
+	userDataDir: string;
+};
+
+export type NetworkRequest = {
+	requestId: string;
+	url: string;
+	method: string;
+	resourceType: string;
+	startedAt: number;
+	documentUrl?: string;
+	requestHeaders?: Record<string, string>;
+	requestBody?: string;
+	hasRequestBody: boolean;
+	status?: number;
+	statusText?: string;
+	mimeType?: string;
+	responseHeaders?: Record<string, string>;
+	protocol?: string;
+	remoteIPAddress?: string;
+	remotePort?: number;
+	encodedDataLength: number;
+	decodedBodyLength: number;
+	fromDiskCache: boolean;
+	fromServiceWorker: boolean;
+	finished: boolean;
+	failed: boolean;
+	errorText?: string;
+};
+
+export type WebSocketConnection = {
+	requestId: string;
+	url: string;
+	createdAt: number;
+	handshakeRequestHeaders?: Record<string, string>;
+	handshakeResponseStatus?: number;
+	handshakeResponseStatusText?: string;
+	handshakeResponseHeaders?: Record<string, string>;
+	closedAt?: number;
+	sentFrameCount: number;
+	receivedFrameCount: number;
+	sentBytes: number;
+	receivedBytes: number;
+	errorCount: number;
+};
+
+export type NetworkSummary = {
+	requestCount: number;
+	webSocketConnectionCount: number;
+	webSocketSentBytes: number;
+	webSocketReceivedBytes: number;
+	finishedRequestCount: number;
+	failedRequestCount: number;
+	cachedRequestCount: number;
+	serviceWorkerRequestCount: number;
+	totalEncodedBytes: number;
+	totalDecodedBodyBytes: number;
+	sameOriginEncodedBytes: number;
+	thirdPartyEncodedBytes: number;
+	byResourceType: Record<string, {
+		requests: number;
+		encodedBytes: number;
+		decodedBodyBytes: number;
+	}>;
+	largestRequests: {
+		url: string;
+		method: string;
+		resourceType: string;
+		status?: number;
+		encodedBytes: number;
+		decodedBodyBytes: number;
+	}[];
+	failedRequests: {
+		url: string;
+		method: string;
+		resourceType: string;
+		errorText?: string;
+		status?: number;
+	}[];
+};
+
+export type TabMemory = {
+	totalBytes: number;
+};
+
+export type BrowserMeasurement = {
+	label: string;
+	timestamp: string;
+	url: string;
+	scenario: string;
+	durationMs: number;
+	network: NetworkSummary;
+	performance: {
+		cdpMetrics: Record<string, number>;
+		runtimeHeap?: {
+			usedSize: number;
+			totalSize: number;
+		};
+		tabMemory: TabMemory;
+		webVitals: {
+			firstPaintMs?: number;
+			firstContentfulPaintMs?: number;
+			domContentLoadedEventEndMs?: number;
+			loadEventEndMs?: number;
+			longTaskCount: number;
+			longTaskDurationMs: number;
+			maxLongTaskDurationMs: number;
+			resourceEntryCount: number;
+			domElements: number;
+		};
+	};
+	heapSnapshot: HeapSnapshotData;
+};
+
+async function waitForProcessExit(child: ChildProcessWithoutNullStreams) {
+	await new Promise<void>(resolvePromise => {
+		if (child.exitCode != null) {
+			resolvePromise();
+			return;
+		}
+		const killTimer = setTimeout(() => {
+			child.kill('SIGKILL');
+			resolvePromise();
+		}, 5_000).unref();
+		child.once('exit', () => {
+			clearTimeout(killTimer);
+			resolvePromise();
+		});
+	});
+}
+
+async function fetchJson<T>(url: string, options?: RequestInit) {
+	const response = await fetch(url, options);
+	if (!response.ok) {
+		throw new Error(`${url} returned ${response.status}: ${await response.text()}`);
+	}
+	return await response.json() as T;
+}
+
+function findChrome() {
+	const envChrome = process.env.CHROME_BIN ?? process.env.GOOGLE_CHROME_BIN;
+	if (envChrome != null && envChrome !== '') return envChrome;
+
+	const candidates = process.platform === 'win32'
+		? [
+			'chrome.exe',
+			'msedge.exe',
+		]
+		: [
+			'google-chrome',
+			'google-chrome-stable',
+			'chromium',
+			'chromium-browser',
+		];
+
+	for (const candidate of candidates) {
+		const result = spawnSync(candidate, ['--version'], {
+			stdio: 'ignore',
+			shell: process.platform === 'win32',
+		});
+		if (result.status === 0) return candidate;
+	}
+
+	throw new Error('Could not find Chrome or Chromium. Set CHROME_BIN to the browser executable.');
+}
+
+async function launchChrome(label: string): Promise<ChromeHandle> {
+	const chrome = findChrome();
+	const port = label === 'base' ? 9222 : 9223;
+	const userDataDir = await mkdtemp(join(tmpdir(), `misskey-browser-metrics-${label}-`));
+	const child = spawn(chrome, [
+		'--headless=new',
+		'--disable-gpu',
+		'--disable-dev-shm-usage',
+		'--disable-background-networking',
+		'--disable-default-apps',
+		'--disable-extensions',
+		'--disable-sync',
+		'--metrics-recording-only',
+		'--no-first-run',
+		'--no-default-browser-check',
+		'--no-sandbox',
+		`--remote-debugging-port=${port}`,
+		`--user-data-dir=${userDataDir}`,
+		'about:blank',
+	], {
+		stdio: ['ignore', 'pipe', 'pipe'],
+	});
+
+	child.stdout.on('data', data => process.stderr.write(`[chrome:${label}] ${data}`));
+	child.stderr.on('data', data => process.stderr.write(`[chrome:${label}] ${data}`));
+
+	try {
+		const startedAt = Date.now();
+		while (Date.now() - startedAt < 30_000) {
+			if (child.exitCode != null) throw new Error(`Chrome exited early with code ${child.exitCode}`);
+			try {
+				await fetchJson(`http://127.0.0.1:${port}/json/version`);
+				return {
+					process: child,
+					port,
+					userDataDir,
+				};
+			} catch {
+				await util.sleep(250);
+			}
+		}
+
+		throw new Error('Timed out waiting for Chrome DevTools Protocol');
+	} catch (err) {
+		await closeChrome({
+			process: child,
+			port,
+			userDataDir,
+		});
+		throw err;
+	}
+}
+
+async function closeChrome(handle: ChromeHandle) {
+	if (handle.process.exitCode == null) {
+		handle.process.kill();
+	}
+	await waitForProcessExit(handle.process);
+	await rm(handle.userDataDir, {
+		recursive: true,
+		force: true,
+		maxRetries: 10,
+		retryDelay: 200,
+	});
+}
+
+type CdpResponse<T = any> = {
+	id?: number;
+	method?: string;
+	params?: any;
+	result?: T;
+	error?: {
+		code: number;
+		message: string;
+	};
+};
+
+function selectorReadyExpression(selector: string, options: { visible?: boolean; enabled?: boolean } = {}) {
+	return `(() => {
+		const el = document.querySelector(${JSON.stringify(selector)});
+		if (el == null) return false;
+		const style = window.getComputedStyle(el);
+		const rect = el.getBoundingClientRect();
+		if (${options.visible === true ? 'true' : 'false'} && (style.visibility === 'hidden' || style.display === 'none' || rect.width === 0 || rect.height === 0)) return false;
+		if (${options.enabled === true ? 'true' : 'false'} && (el.disabled || el.getAttribute('aria-disabled') === 'true')) return false;
+		return true;
+	})()`;
+}
+
+function normalizeHeaders(headers: Record<string, unknown> | undefined) {
+	if (headers == null) return undefined;
+	const normalized = {} as Record<string, string>;
+	for (const [key, value] of Object.entries(headers)) {
+		normalized[key] = String(value);
+	}
+	return normalized;
+}
+
+function webSocketFramePayloadBytes(frame: { opcode?: number; payloadData?: string } | undefined) {
+	if (frame?.payloadData == null) return 0;
+	if (frame.opcode === 1) return Buffer.byteLength(frame.payloadData, 'utf8');
+	return Buffer.byteLength(frame.payloadData, 'base64');
+}
+
+class CdpClient {
+	private nextId = 1;
+	private callbacks = new Map<number, {
+		resolve: (value: any) => void;
+		reject: (error: Error) => void;
+	}>();
+	private eventHandlers = new Map<string, Set<(params: any) => void>>();
+	private ws: WebSocket;
+
+	private constructor(ws: WebSocket) {
+		this.ws = ws;
+		ws.addEventListener('message', event => {
+			const message = JSON.parse(String(event.data)) as CdpResponse;
+			if (message.id != null) {
+				const callback = this.callbacks.get(message.id);
+				if (callback == null) return;
+				this.callbacks.delete(message.id);
+				if (message.error != null) {
+					callback.reject(new Error(`${message.error.message} (${message.error.code})`));
+				} else {
+					callback.resolve(message.result);
+				}
+				return;
+			}
+
+			if (message.method != null) {
+				for (const handler of this.eventHandlers.get(message.method) ?? []) {
+					handler(message.params);
+				}
+			}
+		});
+
+		ws.addEventListener('close', () => {
+			for (const callback of this.callbacks.values()) {
+				callback.reject(new Error('CDP websocket closed'));
+			}
+			this.callbacks.clear();
+		});
+	}
+
+	static async connect(wsUrl: string) {
+		const ws = new WebSocket(wsUrl);
+		await new Promise<void>((resolvePromise, reject) => {
+			ws.addEventListener('open', () => resolvePromise(), { once: true });
+			ws.addEventListener('error', () => reject(new Error(`Failed to connect to ${wsUrl}`)), { once: true });
+		});
+		return new CdpClient(ws);
+	}
+
+	on(method: string, handler: (params: any) => void) {
+		const handlers = this.eventHandlers.get(method) ?? new Set();
+		handlers.add(handler);
+		this.eventHandlers.set(method, handlers);
+	}
+
+	send<T = any>(method: string, params: Record<string, unknown> = {}): Promise<T> {
+		const id = this.nextId++;
+		this.ws.send(JSON.stringify({ id, method, params }));
+
+		return new Promise<T>((resolvePromise, reject) => {
+			this.callbacks.set(id, {
+				resolve: resolvePromise,
+				reject,
+			});
+		});
+	}
+
+	close() {
+		this.ws.close();
+	}
+}
+
+type ChromeOptions = {
+	scenarioTimeoutMs: number;
+};
+
+export class Chrome {
+	private handle: ChromeHandle;
+	public cdp: CdpClient;
+	public networkRequests: NetworkRequest[] = [];
+	public webSocketConnections: WebSocketConnection[] = [];
+	private scenarioTimeoutMs: number;
+	private pendingNetworkDetailReads: Promise<void>[] = [];
+
+	constructor(handle: ChromeHandle, cdpClient: CdpClient, options: ChromeOptions) {
+		this.handle = handle;
+		this.cdp = cdpClient;
+		this.scenarioTimeoutMs = options.scenarioTimeoutMs;
+	}
+
+	static async create(label: string, options: ChromeOptions): Promise<Chrome> {
+		const chromeHandle = await launchChrome(label);
+		try {
+			const url = await fetchJson<{ webSocketDebuggerUrl: string }>(
+				`http://127.0.0.1:${chromeHandle.port}/json/new?${encodeURIComponent('about:blank')}`,
+				{ method: 'PUT' },
+			).catch(async () => await fetchJson<{ webSocketDebuggerUrl: string }>(
+				`http://127.0.0.1:${chromeHandle.port}/json/new?${encodeURIComponent('about:blank')}`,
+			));
+			const cdpClient = await CdpClient.connect(url.webSocketDebuggerUrl);
+			return new Chrome(chromeHandle, cdpClient, options);
+		} catch (err) {
+			await closeChrome(chromeHandle);
+			throw err;
+		}
+	}
+
+	static async with<T>(label: string, options: ChromeOptions, callback: (chrome: Chrome) => T | Promise<T>): Promise<T> {
+		const chrome = await Chrome.create(label, options);
+		try {
+			return await callback(chrome);
+		} finally {
+			await chrome.close();
+		}
+	}
+
+	public async enableNetworkTracking() {
+		const requests = new Map<string, NetworkRequest>();
+		const webSockets = new Map<string, WebSocketConnection>();
+
+		const readRequestBody = (row: NetworkRequest) => {
+			if (!row.hasRequestBody || row.requestBody != null) return;
+			const pending = this.cdp.send<{ postData: string }>('Network.getRequestPostData', {
+				requestId: row.requestId,
+			}).then(result => {
+				row.requestBody = result.postData;
+			}).catch(() => {
+				// Some requests expose hasPostData but no longer have retrievable body data.
+			});
+			this.pendingNetworkDetailReads.push(pending);
+		};
+
+		this.cdp.on('Network.requestWillBeSent', params => {
+			if (params.request?.url == null) return;
+			const row: NetworkRequest = {
+				requestId: params.requestId,
+				url: params.request.url,
+				method: params.request.method ?? 'GET',
+				resourceType: params.type ?? 'Other',
+				startedAt: params.timestamp ?? 0,
+				documentUrl: params.documentURL,
+				requestHeaders: normalizeHeaders(params.request.headers),
+				requestBody: typeof params.request.postData === 'string' ? params.request.postData : undefined,
+				hasRequestBody: params.request.hasPostData === true || typeof params.request.postData === 'string',
+				encodedDataLength: 0,
+				decodedBodyLength: 0,
+				fromDiskCache: false,
+				fromServiceWorker: false,
+				finished: false,
+				failed: false,
+			};
+			requests.set(params.requestId, row);
+			this.networkRequests.push(row);
+		});
+
+		this.cdp.on('Network.webSocketCreated', params => {
+			if (params.requestId == null || params.url == null) return;
+			const row: WebSocketConnection = {
+				requestId: params.requestId,
+				url: params.url,
+				createdAt: params.timestamp ?? 0,
+				sentFrameCount: 0,
+				receivedFrameCount: 0,
+				sentBytes: 0,
+				receivedBytes: 0,
+				errorCount: 0,
+			};
+			webSockets.set(params.requestId, row);
+			this.webSocketConnections.push(row);
+		});
+
+		this.cdp.on('Network.webSocketWillSendHandshakeRequest', params => {
+			const row = webSockets.get(params.requestId);
+			if (row == null) return;
+			row.handshakeRequestHeaders = normalizeHeaders(params.request?.headers);
+		});
+
+		this.cdp.on('Network.webSocketHandshakeResponseReceived', params => {
+			const row = webSockets.get(params.requestId);
+			if (row == null) return;
+			row.handshakeResponseStatus = params.response?.status;
+			row.handshakeResponseStatusText = params.response?.statusText;
+			row.handshakeResponseHeaders = normalizeHeaders(params.response?.headers);
+		});
+
+		this.cdp.on('Network.webSocketFrameSent', params => {
+			const row = webSockets.get(params.requestId);
+			if (row == null) return;
+			row.sentFrameCount += 1;
+			row.sentBytes += webSocketFramePayloadBytes(params.response);
+		});
+
+		this.cdp.on('Network.webSocketFrameReceived', params => {
+			const row = webSockets.get(params.requestId);
+			if (row == null) return;
+			row.receivedFrameCount += 1;
+			row.receivedBytes += webSocketFramePayloadBytes(params.response);
+		});
+
+		this.cdp.on('Network.webSocketFrameError', params => {
+			const row = webSockets.get(params.requestId);
+			if (row == null) return;
+			row.errorCount += 1;
+		});
+
+		this.cdp.on('Network.webSocketClosed', params => {
+			const row = webSockets.get(params.requestId);
+			if (row == null) return;
+			row.closedAt = params.timestamp ?? 0;
+		});
+
+		this.cdp.on('Network.responseReceived', params => {
+			const row = requests.get(params.requestId);
+			if (row == null) return;
+			row.status = params.response?.status;
+			row.statusText = params.response?.statusText;
+			row.mimeType = params.response?.mimeType;
+			row.responseHeaders = normalizeHeaders(params.response?.headers);
+			row.protocol = params.response?.protocol;
+			row.remoteIPAddress = params.response?.remoteIPAddress;
+			row.remotePort = params.response?.remotePort;
+			row.requestHeaders ??= normalizeHeaders(params.response?.requestHeaders);
+			row.fromDiskCache = params.response?.fromDiskCache === true;
+			row.fromServiceWorker = params.response?.fromServiceWorker === true;
+		});
+
+		this.cdp.on('Network.dataReceived', params => {
+			const row = requests.get(params.requestId);
+			if (row == null) return;
+			row.decodedBodyLength += params.dataLength ?? 0;
+			row.encodedDataLength += params.encodedDataLength ?? 0;
+		});
+
+		this.cdp.on('Network.loadingFinished', params => {
+			const row = requests.get(params.requestId);
+			if (row == null) return;
+			row.finished = true;
+			row.encodedDataLength = Math.max(row.encodedDataLength, params.encodedDataLength ?? 0);
+			readRequestBody(row);
+		});
+
+		this.cdp.on('Network.loadingFailed', params => {
+			const row = requests.get(params.requestId);
+			if (row == null) return;
+			row.failed = true;
+			row.finished = true;
+			row.errorText = params.errorText;
+			readRequestBody(row);
+		});
+
+		await this.cdp.send('Network.enable');
+		await this.cdp.send('Network.setCacheDisabled', { cacheDisabled: true });
+		await this.cdp.send('Network.setBypassServiceWorker', { bypass: true });
+		await this.cdp.send('Page.enable');
+		await this.cdp.send('Runtime.enable');
+		await this.cdp.send('Performance.enable');
+	}
+
+	public async waitForNetworkDetails() {
+		let settledCount = 0;
+		while (settledCount < this.pendingNetworkDetailReads.length) {
+			const pending = this.pendingNetworkDetailReads.slice(settledCount);
+			settledCount = this.pendingNetworkDetailReads.length;
+			await Promise.allSettled(pending);
+		}
+	}
+
+	public async evaluate<T>(expression: string, timeoutMs = 30_000): Promise<T> {
+		const result = await this.cdp.send<{
+			result: { value: T };
+			exceptionDetails?: unknown;
+		}>('Runtime.evaluate', {
+			expression,
+			awaitPromise: true,
+			returnByValue: true,
+			timeout: timeoutMs,
+		});
+
+		if (result.exceptionDetails != null) {
+			throw new Error(`Runtime.evaluate failed: ${JSON.stringify(result.exceptionDetails)}`);
+		}
+
+		return result.result.value;
+	}
+
+	public async waitForSelector(selector: string, options: { timeoutMs?: number; visible?: boolean; enabled?: boolean } = {}) {
+		const startedAt = Date.now();
+		const timeoutMs = options.timeoutMs ?? this.scenarioTimeoutMs;
+		while (Date.now() - startedAt < timeoutMs) {
+			const ready = await this.evaluate<boolean>(selectorReadyExpression(selector, options), 5_000);
+			if (ready) return true;
+			await util.sleep(250);
+		}
+		return false;
+	}
+
+	public async waitForAnySelector(selectors: string[], options: { timeoutMs?: number; visible?: boolean; enabled?: boolean } = {}) {
+		const startedAt = Date.now();
+		const timeoutMs = options.timeoutMs ?? this.scenarioTimeoutMs;
+		while (Date.now() - startedAt < timeoutMs) {
+			for (const selector of selectors) {
+				const ready = await this.evaluate<boolean>(selectorReadyExpression(selector, options), 5_000);
+				if (ready) return selector;
+			}
+			await util.sleep(250);
+		}
+		return null;
+	}
+
+	public async click(selector: string) {
+		const found = await this.waitForSelector(selector, { visible: true, enabled: true });
+		if (!found) throw new Error(`Selector was not clickable: ${selector}`);
+		await this.evaluate<void>(`(() => {
+			const el = document.querySelector(${JSON.stringify(selector)});
+			if (el == null) throw new Error('Element not found');
+			el.scrollIntoView({ block: 'center', inline: 'center' });
+			el.click();
+		})()`);
+	}
+
+	public async maybeClick(selector: string, timeoutMs = 3_000) {
+		if (await this.waitForSelector(selector, { visible: true, enabled: true, timeoutMs })) {
+			await this.click(selector);
+			return true;
+		}
+		return false;
+	}
+
+	public async setValue(selector: string, value: string) {
+		const found = await this.waitForSelector(selector, { visible: true, enabled: true });
+		if (!found) throw new Error(`Selector was not editable: ${selector}`);
+		await this.evaluate<void>(`(() => {
+			const el = document.querySelector(${JSON.stringify(selector)});
+			if (el == null) throw new Error('Element not found');
+			el.scrollIntoView({ block: 'center', inline: 'center' });
+			el.focus();
+			const proto = Object.getPrototypeOf(el);
+			const descriptor = Object.getOwnPropertyDescriptor(proto, 'value');
+			if (descriptor?.set != null) {
+				descriptor.set.call(el, ${JSON.stringify(value)});
+			} else {
+				el.value = ${JSON.stringify(value)};
+			}
+			el.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: ${JSON.stringify(value)} }));
+			el.dispatchEvent(new Event('change', { bubbles: true }));
+		})()`);
+	}
+
+	public async waitForText(text: string, timeoutMs = this.scenarioTimeoutMs) {
+		const startedAt = Date.now();
+		while (Date.now() - startedAt < timeoutMs) {
+			const found = await this.evaluate<boolean>(`document.body?.innerText?.includes(${JSON.stringify(text)}) === true`, 5_000);
+			if (found) return true;
+			await util.sleep(250);
+		}
+		return false;
+	}
+
+	public async collectPerformance(): Promise<BrowserMeasurement['performance']> {
+		const cdpMetricsResult = await this.cdp.send<{ metrics: { name: string; value: number }[] }>('Performance.getMetrics');
+		const cdpMetrics = Object.fromEntries(cdpMetricsResult.metrics.map(metric => [metric.name, metric.value]));
+		const runtimeHeap = await this.cdp.send<{ usedSize: number; totalSize: number }>('Runtime.getHeapUsage').catch(() => undefined);
+		const tabMemory = await this.collectTabMemory();
+		const webVitals = await this.evaluate<BrowserMeasurement['performance']['webVitals']>(`(() => {
+			const navigation = performance.getEntriesByType('navigation')[0];
+			const paintEntries = Object.fromEntries(performance.getEntriesByType('paint').map(entry => [entry.name, entry.startTime]));
+			const longTasks = performance.getEntriesByType('longtask');
+			const resourceEntries = performance.getEntriesByType('resource');
+			return {
+				firstPaintMs: paintEntries['first-paint'],
+				firstContentfulPaintMs: paintEntries['first-contentful-paint'],
+				domContentLoadedEventEndMs: navigation?.domContentLoadedEventEnd,
+				loadEventEndMs: navigation?.loadEventEnd,
+				longTaskCount: longTasks.length,
+				longTaskDurationMs: longTasks.reduce((sum, entry) => sum + entry.duration, 0),
+				maxLongTaskDurationMs: longTasks.reduce((max, entry) => Math.max(max, entry.duration), 0),
+				resourceEntryCount: resourceEntries.length,
+				domElements: document.getElementsByTagName('*').length,
+			};
+		})()`);
+
+		return {
+			cdpMetrics,
+			runtimeHeap,
+			tabMemory,
+			webVitals,
+		};
+	}
+
+	public async collectTabMemory(): Promise<TabMemory> {
+		const userAgentSpecificMemory = await this.evaluate<{ bytes?: number }>(`(async () => {
+			const result = await performance.measureUserAgentSpecificMemory();
+			return { bytes: result.bytes };
+		})()`, 10_000);
+
+		const userAgentSpecificBytes = userAgentSpecificMemory?.bytes;
+		if (!Number.isFinite(userAgentSpecificBytes)) {
+			throw new Error('performance.measureUserAgentSpecificMemory() did not return finite bytes');
+		}
+
+		return {
+			totalBytes: userAgentSpecificBytes as number,
+		};
+	}
+
+	public async takeHeapSnapshot(savePath?: string) {
+		const chunks: string[] = [];
+		this.cdp.on('HeapProfiler.addHeapSnapshotChunk', params => {
+			chunks.push(params.chunk);
+		});
+
+		await this.cdp.send('HeapProfiler.enable');
+		await this.cdp.send('HeapProfiler.collectGarbage');
+		await this.cdp.send('HeapProfiler.takeHeapSnapshot', { reportProgress: false });
+
+		const content = chunks.join('');
+		if (savePath != null) {
+			await writeFile(savePath, content);
+		}
+
+		return JSON.parse(content);
+	}
+
+	public async close() {
+		this.cdp.close();
+		await closeChrome(this.handle);
+	}
+}
+
+function isMeasurableRequest(row: NetworkRequest) {
+	return !row.url.startsWith('data:') && !row.url.startsWith('blob:') && !row.url.startsWith('devtools:');
+}
+
+export function summarizeNetwork(requestRows: NetworkRequest[], baseUrl: string, webSocketRows?: WebSocketConnection[]): NetworkSummary {
+	const origin = new URL(baseUrl).origin;
+	const rows = requestRows.filter(isMeasurableRequest);
+	const byResourceType = {} as NetworkSummary['byResourceType'];
+
+	for (const row of rows) {
+		const summary = byResourceType[row.resourceType] ?? {
+			requests: 0,
+			encodedBytes: 0,
+			decodedBodyBytes: 0,
+		};
+		summary.requests += 1;
+		summary.encodedBytes += row.encodedDataLength;
+		summary.decodedBodyBytes += row.decodedBodyLength;
+		byResourceType[row.resourceType] = summary;
+	}
+
+	function isSameOrigin(url: string) {
+		try {
+			return new URL(url).origin === origin;
+		} catch {
+			return false;
+		}
+	}
+
+	return {
+		requestCount: rows.length,
+		webSocketConnectionCount: webSocketRows == null
+			? rows.filter(row => row.resourceType === 'WebSocket').length
+			: webSocketRows.length,
+		webSocketSentBytes: webSocketRows?.reduce((sum, row) => sum + row.sentBytes, 0) ?? 0,
+		webSocketReceivedBytes: webSocketRows?.reduce((sum, row) => sum + row.receivedBytes, 0) ?? 0,
+		finishedRequestCount: rows.filter(row => row.finished).length,
+		failedRequestCount: rows.filter(row => row.failed).length,
+		cachedRequestCount: rows.filter(row => row.fromDiskCache).length,
+		serviceWorkerRequestCount: rows.filter(row => row.fromServiceWorker).length,
+		totalEncodedBytes: rows.reduce((sum, row) => sum + row.encodedDataLength, 0),
+		totalDecodedBodyBytes: rows.reduce((sum, row) => sum + row.decodedBodyLength, 0),
+		sameOriginEncodedBytes: rows
+			.filter(row => isSameOrigin(row.url))
+			.reduce((sum, row) => sum + row.encodedDataLength, 0),
+		thirdPartyEncodedBytes: rows
+			.filter(row => !isSameOrigin(row.url))
+			.reduce((sum, row) => sum + row.encodedDataLength, 0),
+		byResourceType,
+		largestRequests: rows
+			.toSorted((a, b) => b.encodedDataLength - a.encodedDataLength)
+			.slice(0, 15)
+			.map(row => ({
+				url: row.url,
+				method: row.method,
+				resourceType: row.resourceType,
+				status: row.status,
+				encodedBytes: row.encodedDataLength,
+				decodedBodyBytes: row.decodedBodyLength,
+			})),
+		failedRequests: rows
+			.filter(row => row.failed)
+			.map(row => ({
+				url: row.url,
+				method: row.method,
+				resourceType: row.resourceType,
+				errorText: row.errorText,
+				status: row.status,
+			})),
+	};
+}

.github/scripts/frontend-browser-detailed-html.mts

@@ -0,0 +1,448 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { pathToFileURL } from 'node:url';
+import * as util from './utility.mts';
+import type { BrowserMeasurementSample, BrowserMetricsReport } from './frontend-browser-report.mts';
+import type { NetworkRequest } from './chrome.mts';
+
+type DiffDirection = 'added' | 'removed';
+
+type RequestDiff = {
+	direction: DiffDirection;
+	round: number;
+	baseCount: number;
+	headCount: number;
+	request: NetworkRequest;
+};
+
+function escapeHtml(value: unknown) {
+	return String(value ?? '')
+		.replaceAll('&', '&')
+		.replaceAll('<', '&lt;')
+		.replaceAll('>', '&gt;')
+		.replaceAll('"', '&quot;')
+		.replaceAll("'", '&#39;');
+}
+
+function escapeAttribute(value: unknown) {
+	return escapeHtml(value);
+}
+
+function isHttpRequest(request: NetworkRequest) {
+	try {
+		const { protocol } = new URL(request.url);
+		return protocol === 'http:' || protocol === 'https:';
+	} catch {
+		return false;
+	}
+}
+
+function requestKey(request: NetworkRequest) {
+	return [
+		request.method,
+		request.resourceType,
+		request.url,
+	].join('\u0000');
+}
+
+function groupRequests(requests: NetworkRequest[] | undefined) {
+	const grouped = new Map<string, NetworkRequest[]>();
+	for (const request of requests ?? []) {
+		if (!isHttpRequest(request)) continue;
+		const key = requestKey(request);
+		const rows = grouped.get(key) ?? [];
+		rows.push(request);
+		grouped.set(key, rows);
+	}
+	return grouped;
+}
+
+function byRound(samples: BrowserMeasurementSample[]) {
+	return new Map(samples.map(sample => [sample.round, sample]));
+}
+
+function diffRound(round: number, baseSample: BrowserMeasurementSample | undefined, headSample: BrowserMeasurementSample | undefined) {
+	const baseRequests = groupRequests(baseSample?.networkRequests);
+	const headRequests = groupRequests(headSample?.networkRequests);
+	const keys = [...new Set([
+		...baseRequests.keys(),
+		...headRequests.keys(),
+	])].toSorted();
+	const diffs: RequestDiff[] = [];
+
+	for (const key of keys) {
+		const baseRows = baseRequests.get(key) ?? [];
+		const headRows = headRequests.get(key) ?? [];
+		if (headRows.length > baseRows.length) {
+			for (const request of headRows.slice(baseRows.length)) {
+				diffs.push({
+					direction: 'added',
+					round,
+					baseCount: baseRows.length,
+					headCount: headRows.length,
+					request,
+				});
+			}
+		} else if (baseRows.length > headRows.length) {
+			for (const request of baseRows.slice(headRows.length)) {
+				diffs.push({
+					direction: 'removed',
+					round,
+					baseCount: baseRows.length,
+					headCount: headRows.length,
+					request,
+				});
+			}
+		}
+	}
+
+	return diffs;
+}
+
+function diffReports(base: BrowserMetricsReport, head: BrowserMetricsReport) {
+	const baseSamples = byRound(base.samples);
+	const headSamples = byRound(head.samples);
+	const rounds = [...new Set([
+		...baseSamples.keys(),
+		...headSamples.keys(),
+	])].toSorted((a, b) => a - b);
+	return rounds.flatMap(round => diffRound(round, baseSamples.get(round), headSamples.get(round)));
+}
+
+function formatMaybeJson(value: string | undefined) {
+	if (value == null || value === '') return null;
+	try {
+		return JSON.stringify(JSON.parse(value), null, '\t');
+	} catch {
+		return value;
+	}
+}
+
+function formatHeaders(headers: Record<string, string> | undefined) {
+	if (headers == null || Object.keys(headers).length === 0) return null;
+	return JSON.stringify(headers, null, '\t');
+}
+
+function countBy<T extends string>(diffs: RequestDiff[], getKey: (diff: RequestDiff) => T) {
+	const counts = new Map<T, number>();
+	for (const diff of diffs) {
+		counts.set(getKey(diff), (counts.get(getKey(diff)) ?? 0) + 1);
+	}
+	return [...counts].toSorted((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+}
+
+function renderSummary(base: BrowserMetricsReport, head: BrowserMetricsReport, diffs: RequestDiff[]) {
+	const added = diffs.filter(diff => diff.direction === 'added').length;
+	const removed = diffs.filter(diff => diff.direction === 'removed').length;
+	const typeRows = countBy(diffs, diff => diff.request.resourceType).map(([type, count]) => `
+				<tr>
+					<td>${escapeHtml(type)}</td>
+					<td class="num">${util.formatNumber(count)}</td>
+				</tr>`).join('');
+
+	return `
+		<section class="summary">
+			<div>
+				<span class="label">Base samples</span>
+				<strong>${util.formatNumber(base.sampleCount)}</strong>
+			</div>
+			<div>
+				<span class="label">Head samples</span>
+				<strong>${util.formatNumber(head.sampleCount)}</strong>
+			</div>
+			<div>
+				<span class="label">Added in Head</span>
+				<strong class="added-text">${util.formatNumber(added)}</strong>
+			</div>
+			<div>
+				<span class="label">Removed in Head</span>
+				<strong class="removed-text">${util.formatNumber(removed)}</strong>
+			</div>
+		</section>
+		${typeRows === '' ? '' : `
+		<section>
+			<h2>Diffs by Resource Type</h2>
+			<table>
+				<thead><tr><th>Type</th><th>Diff requests</th></tr></thead>
+				<tbody>${typeRows}
+				</tbody>
+			</table>
+		</section>`}`;
+}
+
+function renderDetails(title: string, content: string | null, open = false) {
+	if (content == null || content === '') return '';
+	return `
+			<details${open ? ' open' : ''}>
+				<summary>${escapeHtml(title)}</summary>
+				<pre>${escapeHtml(content)}</pre>
+			</details>`;
+}
+
+function renderRequest(diff: RequestDiff) {
+	const { request } = diff;
+	const requestBody = formatMaybeJson(request.requestBody);
+	const requestHeaders = formatHeaders(request.requestHeaders);
+	const responseHeaders = formatHeaders(request.responseHeaders);
+	const bodyNote = requestBody == null && request.hasRequestBody === true
+		? '<p class="empty">Request body was present but could not be retrieved from CDP.</p>'
+		: '';
+
+	return `
+		<article class="request ${diff.direction}">
+			<header>
+				<span class="badge">${diff.direction === 'added' ? 'Added in Head' : 'Removed in Head'}</span>
+				<span class="method">${escapeHtml(request.method)}</span>
+				<span class="type">${escapeHtml(request.resourceType)}</span>
+				<span class="status">${escapeHtml(request.status ?? '-')}</span>
+			</header>
+			<a class="url" href="${escapeAttribute(request.url)}">${escapeHtml(request.url)}</a>
+			<dl>
+				<div><dt>Round</dt><dd>${util.formatNumber(diff.round)}</dd></div>
+				<div><dt>Base count</dt><dd>${util.formatNumber(diff.baseCount)}</dd></div>
+				<div><dt>Head count</dt><dd>${util.formatNumber(diff.headCount)}</dd></div>
+				<div><dt>Encoded</dt><dd>${util.formatBytes(request.encodedDataLength ?? 0)}</dd></div>
+				<div><dt>Decoded body</dt><dd>${util.formatBytes(request.decodedBodyLength ?? 0)}</dd></div>
+				<div><dt>MIME</dt><dd>${escapeHtml(request.mimeType ?? '-')}</dd></div>
+				<div><dt>Protocol</dt><dd>${escapeHtml(request.protocol ?? '-')}</dd></div>
+				<div><dt>Remote</dt><dd>${escapeHtml(request.remoteIPAddress == null ? '-' : `${request.remoteIPAddress}:${request.remotePort ?? ''}`)}</dd></div>
+				<div><dt>Failed</dt><dd>${request.failed ? escapeHtml(request.errorText ?? 'yes') : 'no'}</dd></div>
+			</dl>
+			${bodyNote}
+			${renderDetails('Request body', requestBody, requestBody != null)}
+			${renderDetails('Request headers', requestHeaders)}
+			${renderDetails('Response headers', responseHeaders)}
+		</article>`;
+}
+
+function renderRound(round: number, diffs: RequestDiff[]) {
+	const added = diffs.filter(diff => diff.direction === 'added').length;
+	const removed = diffs.filter(diff => diff.direction === 'removed').length;
+	return `
+		<section>
+			<h2>Round ${util.formatNumber(round)}</h2>
+			<p>${util.formatNumber(added)} added, ${util.formatNumber(removed)} removed</p>
+			<div class="requests">
+				${diffs.map(renderRequest).join('\n')}
+			</div>
+		</section>`;
+}
+
+function renderHtml(base: BrowserMetricsReport, head: BrowserMetricsReport) {
+	const diffs = diffReports(base, head);
+	const rounds = [...new Set(diffs.map(diff => diff.round))].toSorted((a, b) => a - b);
+	const generatedAt = new Date().toISOString();
+	const content = diffs.length === 0
+		? '<section><p>No added or removed HTTP(S) requests were found in paired samples.</p></section>'
+		: rounds.map(round => renderRound(round, diffs.filter(diff => diff.round === round))).join('\n');
+
+	return `<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Frontend Browser Network Request Diff</title>
+	<style>
+		:root {
+			color-scheme: light dark;
+			--bg: #f7f7f8;
+			--fg: #202124;
+			--muted: #5f6368;
+			--card: #ffffff;
+			--border: #dfe1e5;
+			--added: #137333;
+			--added-bg: #e6f4ea;
+			--removed: #a50e0e;
+			--removed-bg: #fce8e6;
+		}
+		@media (prefers-color-scheme: dark) {
+			:root {
+				--bg: #111315;
+				--fg: #e8eaed;
+				--muted: #bdc1c6;
+				--card: #1b1d20;
+				--border: #3c4043;
+				--added-bg: #17351f;
+				--removed-bg: #3c1f1d;
+			}
+		}
+		body {
+			margin: 0;
+			font: 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+			background: var(--bg);
+			color: var(--fg);
+		}
+		main {
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 24px;
+		}
+		h1 {
+			font-size: 24px;
+			margin: 0 0 8px;
+		}
+		h2 {
+			font-size: 18px;
+			margin: 32px 0 8px;
+		}
+		.meta {
+			color: var(--muted);
+			margin: 0 0 24px;
+		}
+		.summary {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+			gap: 12px;
+			margin: 24px 0;
+		}
+		.summary > div, .request, table {
+			background: var(--card);
+			border: 1px solid var(--border);
+			border-radius: 8px;
+		}
+		.summary > div {
+			padding: 14px;
+		}
+		.label {
+			display: block;
+			color: var(--muted);
+			font-size: 12px;
+		}
+		.summary strong {
+			display: block;
+			font-size: 24px;
+			margin-top: 4px;
+		}
+		.added-text {
+			color: var(--added);
+		}
+		.removed-text {
+			color: var(--removed);
+		}
+		table {
+			border-collapse: collapse;
+			width: 100%;
+			overflow: hidden;
+		}
+		th, td {
+			border-bottom: 1px solid var(--border);
+			padding: 8px 10px;
+			text-align: left;
+		}
+		th {
+			color: var(--muted);
+			font-weight: 600;
+		}
+		.num {
+			text-align: right;
+		}
+		.requests {
+			display: grid;
+			gap: 12px;
+		}
+		.request {
+			padding: 14px;
+			overflow-wrap: anywhere;
+		}
+		.request.added {
+			border-left: 4px solid var(--added);
+		}
+		.request.removed {
+			border-left: 4px solid var(--removed);
+		}
+		.request header {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 8px;
+			align-items: center;
+			margin-bottom: 8px;
+		}
+		.badge, .method, .type, .status {
+			border-radius: 999px;
+			padding: 2px 8px;
+			font-size: 12px;
+			font-weight: 600;
+		}
+		.added .badge {
+			background: var(--added-bg);
+			color: var(--added);
+		}
+		.removed .badge {
+			background: var(--removed-bg);
+			color: var(--removed);
+		}
+		.method, .type, .status {
+			background: color-mix(in srgb, var(--muted) 14%, transparent);
+			color: var(--fg);
+		}
+		.url {
+			display: block;
+			margin: 8px 0 12px;
+			color: inherit;
+			font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+		}
+		dl {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+			gap: 8px 16px;
+			margin: 0 0 12px;
+		}
+		dl div {
+			min-width: 0;
+		}
+		dt {
+			color: var(--muted);
+			font-size: 12px;
+		}
+		dd {
+			margin: 0;
+		}
+		details {
+			margin-top: 8px;
+		}
+		summary {
+			cursor: pointer;
+			color: var(--muted);
+		}
+		pre {
+			white-space: pre-wrap;
+			overflow-x: auto;
+			background: color-mix(in srgb, var(--muted) 10%, transparent);
+			border-radius: 6px;
+			padding: 10px;
+		}
+		.empty {
+			color: var(--muted);
+		}
+	</style>
+</head>
+<body>
+	<main>
+		<h1>Frontend Browser Network Request Diff</h1>
+		<p class="meta">Generated at ${escapeHtml(generatedAt)}. Requests are compared per paired round by method, resource type, and exact URL. Bodies are shown for added/removed request instances when CDP exposes them.</p>
+		${renderSummary(base, head, diffs)}
+		${content}
+	</main>
+</body>
+</html>
+`;
+}
+
+async function main() {
+	const [baseFile, headFile, outputFile] = process.argv.slice(2);
+	if (baseFile == null || headFile == null || outputFile == null) {
+		throw new Error('Usage: node frontend-browser-detailed-html.mts <base-browser.json> <head-browser.json> <output.html>');
+	}
+
+	const base = JSON.parse(await readFile(baseFile, 'utf8')) as BrowserMetricsReport;
+	const head = JSON.parse(await readFile(headFile, 'utf8')) as BrowserMetricsReport;
+	await writeFile(outputFile, renderHtml(base, head));
+}
+
+if (process.argv[1] != null && import.meta.url === pathToFileURL(process.argv[1]).href) {
+	await main();
+}

.github/scripts/frontend-browser-report.mts

@@ -0,0 +1,372 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { pathToFileURL } from 'node:url';
+import * as util from './utility.mts';
+import * as heapSnapshotUtil from './heap-snapshot-util.mts';
+import type { HeapSnapshotData, HeapSnapshotReport } from './heap-snapshot-util.mts';
+import type { NetworkRequest } from './chrome.mts';
+
+export type BrowserMeasurement = {
+	label: string;
+	timestamp: string;
+	url: string;
+	scenario: string;
+	durationMs: number;
+	network: {
+		requestCount: number;
+		webSocketConnectionCount: number;
+		webSocketSentBytes: number;
+		webSocketReceivedBytes: number;
+		finishedRequestCount: number;
+		failedRequestCount: number;
+		cachedRequestCount: number;
+		serviceWorkerRequestCount: number;
+		totalEncodedBytes: number;
+		totalDecodedBodyBytes: number;
+		sameOriginEncodedBytes: number;
+		thirdPartyEncodedBytes: number;
+		byResourceType: Record<string, {
+			requests: number;
+			encodedBytes: number;
+			decodedBodyBytes: number;
+		}>;
+		largestRequests: {
+			url: string;
+			method: string;
+			resourceType: string;
+			status?: number;
+			encodedBytes: number;
+			decodedBodyBytes: number;
+		}[];
+		failedRequests: {
+			url: string;
+			method: string;
+			resourceType: string;
+			errorText?: string;
+			status?: number;
+		}[];
+	};
+	performance: {
+		cdpMetrics: Record<string, number>;
+		runtimeHeap?: {
+			usedSize: number;
+			totalSize: number;
+		};
+		tabMemory: {
+			totalBytes: number;
+		};
+		webVitals: {
+			firstPaintMs?: number;
+			firstContentfulPaintMs?: number;
+			domContentLoadedEventEndMs?: number;
+			loadEventEndMs?: number;
+			longTaskCount: number;
+			longTaskDurationMs: number;
+			maxLongTaskDurationMs: number;
+			resourceEntryCount: number;
+			domElements: number;
+		};
+	};
+	heapSnapshot: HeapSnapshotData;
+};
+
+export type BrowserMeasurementSample = BrowserMeasurement & {
+	round: number;
+	networkRequests?: NetworkRequest[];
+};
+
+export type BrowserMetricsReport = {
+	label: string;
+	timestamp: string;
+	url: string;
+	scenario: string;
+	sampleCount: number;
+	aggregation: 'median';
+	summary: BrowserMeasurement;
+	samples: BrowserMeasurementSample[];
+};
+
+function escapeCell(value: string) {
+	return String(value).replaceAll('|', '\\|').replaceAll('\n', '<br>');
+}
+
+function truncate(value: string, maxLength = 140) {
+	if (value.length <= maxLength) return value;
+	return `${value.slice(0, maxLength - 3)}...`;
+}
+
+function formatMs(value: number | null | undefined) {
+	if (value == null || !Number.isFinite(value)) return '-';
+	if (value >= 1_000) return `${util.formatNumber(value / 1_000)} s`;
+	return `${util.formatNumber(value)} ms`;
+}
+
+function formatSecondsAsMs(value: number | null | undefined) {
+	if (value == null || !Number.isFinite(value)) return '-';
+	return formatMs(value * 1_000);
+}
+
+function formatDelta(delta: number, formatter: (value: number) => string, colorThreshold = 0) {
+	if (delta === 0) return formatter(0);
+	return util.formatColoredDelta(delta, v => formatter(v), colorThreshold);
+}
+
+function finiteValues(values: (number | null | undefined)[]) {
+	return values.filter(value => Number.isFinite(value)) as number[];
+}
+
+function sampleSpread(report: BrowserMetricsReport, getValue: (sample: BrowserMeasurementSample) => number | null | undefined) {
+	const values = finiteValues(report.samples.map(sample => getValue(sample)));
+	if (values.length < 2) return null;
+
+	const center = util.median(values);
+	return util.median(values.map(value => Math.abs(value - center)));
+}
+
+function formatValueWithSpread(report: BrowserMetricsReport, value: number, getSampleValue: (sample: BrowserMeasurementSample) => number | null | undefined, formatter: (value: number) => string) {
+	const spread = sampleSpread(report, getSampleValue);
+	if (spread == null) return formatter(value);
+	return `${formatter(value)}<br>± ${formatter(spread)}`;
+}
+
+function metricRow(
+	label: string,
+	base: BrowserMetricsReport,
+	head: BrowserMetricsReport,
+	getSummaryValue: (summary: BrowserMeasurement) => number,
+	getSampleValue: (sample: BrowserMeasurementSample) => number,
+	formatter: (value: number) => string,
+	colorThreshold = 0
+) {
+	const baseValue = getSummaryValue(base.summary);
+	const headValue = getSummaryValue(head.summary);
+	if (baseValue == null || headValue == null || !Number.isFinite(baseValue) || !Number.isFinite(headValue)) return null;
+
+	const summary = util.pairedDeltaSummary(base.samples, head.samples, sample => getSampleValue(sample));
+	const percent = baseValue === 0 ? null : summary.median * 100 / baseValue;
+	//const deltaMedian = `${formatDelta(summary.median, formatter, colorThreshold)}<br>${percent == null ? '-' : util.formatDeltaPercent(percent, 0.1).replaceAll('\\%', '\\\\%')}`;
+	const deltaMedian = formatDelta(summary.median, formatter, colorThreshold);
+
+	//return `| **${label}** | ${formatValueWithSpread(base, baseValue, getSampleValue, formatter)} | ${formatValueWithSpread(head, headValue, getSampleValue, formatter)} | ${deltaMedian} | ${summary == null ? '-' : formatter(summary.mad)} | ${summary == null ? '-' : formatDelta(summary.min, formatter)} | ${summary == null ? '-' : formatDelta(summary.max, formatter)} |`;
+	return `| **${label}** | ${formatter(baseValue)} | ${formatter(headValue)} | ${deltaMedian} | ${summary == null ? '-' : formatter(summary.mad)} | ${summary == null ? '-' : formatDelta(summary.min, formatter, colorThreshold)} | ${summary == null ? '-' : formatDelta(summary.max, formatter, colorThreshold)} |`;
+}
+
+function resourceTypeBytes(report: BrowserMeasurement, resourceTypes: string[]) {
+	return resourceTypes.reduce((sum, resourceType) => sum + (report.network.byResourceType[resourceType]?.encodedBytes ?? 0), 0);
+}
+
+function resourceTypeSampleBytes(sample: BrowserMeasurementSample, resourceTypes: string[]) {
+	return resourceTypeBytes(sample, resourceTypes);
+}
+
+function getMetric(report: BrowserMeasurement, key: string) {
+	return report.performance.cdpMetrics[key];
+}
+
+function renderSummaryTable(base: BrowserMetricsReport, head: BrowserMetricsReport) {
+	const rows = [
+		//metricRow('Scenario duration', base, head, summary => summary.durationMs, sample => sample.durationMs, formatMs),
+		metricRow('Requests', base, head, summary => summary.network.requestCount, sample => sample.network.requestCount, util.formatNumber),
+		//metricRow('Failed requests', base, head, summary => summary.network.failedRequestCount, sample => sample.network.failedRequestCount, util.formatNumber),
+		metricRow('Encoded network', base, head, summary => summary.network.totalEncodedBytes, sample => sample.network.totalEncodedBytes, util.formatBytes, 10000),
+		metricRow('Decoded body', base, head, summary => summary.network.totalDecodedBodyBytes, sample => sample.network.totalDecodedBodyBytes, util.formatBytes, 10000),
+		metricRow('Same-origin encoded', base, head, summary => summary.network.sameOriginEncodedBytes, sample => sample.network.sameOriginEncodedBytes, util.formatBytes, 10000),
+		metricRow('Third-party encoded', base, head, summary => summary.network.thirdPartyEncodedBytes, sample => sample.network.thirdPartyEncodedBytes, util.formatBytes, 10000),
+		metricRow('Script encoded', base, head, summary => resourceTypeBytes(summary, ['Script']), sample => resourceTypeSampleBytes(sample, ['Script']), util.formatBytes, 10000),
+		metricRow('Stylesheet encoded', base, head, summary => resourceTypeBytes(summary, ['Stylesheet']), sample => resourceTypeSampleBytes(sample, ['Stylesheet']), util.formatBytes, 10000),
+		metricRow('Fetch/XHR encoded', base, head, summary => resourceTypeBytes(summary, ['Fetch', 'XHR']), sample => resourceTypeSampleBytes(sample, ['Fetch', 'XHR']), util.formatBytes, 10000),
+		metricRow('Image encoded', base, head, summary => resourceTypeBytes(summary, ['Image']), sample => resourceTypeSampleBytes(sample, ['Image']), util.formatBytes, 10000),
+		metricRow('Font encoded', base, head, summary => resourceTypeBytes(summary, ['Font']), sample => resourceTypeSampleBytes(sample, ['Font']), util.formatBytes, 10000),
+		//metricRow('First contentful paint', base, head, summary => summary.performance.webVitals.firstContentfulPaintMs, sample => sample.performance.webVitals.firstContentfulPaintMs, formatMs),
+		//metricRow('Load event end', base, head, summary => summary.performance.webVitals.loadEventEndMs, sample => sample.performance.webVitals.loadEventEndMs, formatMs),
+		//metricRow('Long tasks', base, head, summary => summary.performance.webVitals.longTaskCount, sample => sample.performance.webVitals.longTaskCount, util.formatNumber),
+		//metricRow('Long task duration', base, head, summary => summary.performance.webVitals.longTaskDurationMs, sample => sample.performance.webVitals.longTaskDurationMs, formatMs),
+		//metricRow('Max long task', base, head, summary => summary.performance.webVitals.maxLongTaskDurationMs, sample => sample.performance.webVitals.maxLongTaskDurationMs, formatMs),
+		//metricRow('JS heap used', base, head, summary => summary.performance.runtimeHeap?.usedSize ?? getMetric(summary, 'JSHeapUsedSize'), sample => sample.performance.runtimeHeap?.usedSize ?? getMetric(sample, 'JSHeapUsedSize'), util.formatBytes),
+		//metricRow('JS heap total', base, head, summary => summary.performance.runtimeHeap?.totalSize ?? getMetric(summary, 'JSHeapTotalSize'), sample => sample.performance.runtimeHeap?.totalSize ?? getMetric(sample, 'JSHeapTotalSize'), util.formatBytes),
+		//metricRow('V8 heap snapshot total', base, head, summary => summary.heapSnapshot.categories.total, sample => sample.heapSnapshot.categories.total, util.formatBytes, 10000),
+		//metricRow('DOM elements', base, head, summary => summary.performance.webVitals.domElements, sample => sample.performance.webVitals.domElements, util.formatNumber),
+		//metricRow('CDP nodes', base, head, summary => getMetric(summary, 'Nodes'), sample => getMetric(sample, 'Nodes'), util.formatNumber),
+		//metricRow('JS event listeners', base, head, summary => getMetric(summary, 'JSEventListeners'), sample => getMetric(sample, 'JSEventListeners'), util.formatNumber),
+		//metricRow('Layout count', base, head, summary => getMetric(summary, 'LayoutCount'), sample => getMetric(sample, 'LayoutCount'), util.formatNumber),
+		//metricRow('Recalc style count', base, head, summary => getMetric(summary, 'RecalcStyleCount'), sample => getMetric(sample, 'RecalcStyleCount'), util.formatNumber),
+		//metricRow('Script duration', base, head, summary => getMetric(summary, 'ScriptDuration'), sample => getMetric(sample, 'ScriptDuration'), formatSecondsAsMs),
+		//metricRow('Task duration', base, head, summary => getMetric(summary, 'TaskDuration'), sample => getMetric(sample, 'TaskDuration'), formatSecondsAsMs),
+		metricRow('WebSocket connections', base, head, summary => summary.network.webSocketConnectionCount, sample => sample.network.webSocketConnectionCount, util.formatNumber),
+		metricRow('WebSocket sent', base, head, summary => summary.network.webSocketSentBytes, sample => sample.network.webSocketSentBytes, util.formatBytes, 10000),
+		metricRow('WebSocket received', base, head, summary => summary.network.webSocketReceivedBytes, sample => sample.network.webSocketReceivedBytes, util.formatBytes, 10000),
+		metricRow('Tab memory', base, head, summary => summary.performance.tabMemory.totalBytes, sample => sample.performance.tabMemory.totalBytes, util.formatBytes, 100000),
+	].filter(row => row != null);
+
+	return [
+		'| Metric | Base | Head | Δ median | Δ MAD | Δ min | Δ max |',
+		'| --- | ---: | ---: | ---: | ---: | ---: | ---: |',
+		...rows,
+	].join('\n');
+}
+
+function renderResourceTypeTable(base: BrowserMetricsReport, head: BrowserMetricsReport) {
+	const preferredOrder = ['Document', 'Script', 'Stylesheet', 'Fetch', 'XHR', 'Image', 'Font', 'Media', 'WebSocket', 'EventSource', 'Other'];
+	const keys = [...new Set([
+		...preferredOrder,
+		...Object.keys(base.summary.network.byResourceType),
+		...Object.keys(head.summary.network.byResourceType),
+	])].filter(key => base.summary.network.byResourceType[key] != null || head.summary.network.byResourceType[key] != null);
+
+	const lines = [
+		'<table>',
+		'<thead>',
+		'<tr>',
+		'<th rowspan="2">Type</th>',
+		'<th colspan="3">Requests</th>',
+		'<th colspan="3">Encoded bytes</th>',
+		'</tr>',
+		'<tr>',
+		'<th>Base</th>',
+		'<th>Head</th>',
+		'<th>Δ</th>',
+		'<th>Base</th>',
+		'<th>Head</th>',
+		'<th>Δ</th>',
+		'</tr>',
+		'</thead>',
+		'<tbody>',
+	];
+
+	for (const key of keys) {
+		const baseRow = base.summary.network.byResourceType[key] ?? { requests: 0, encodedBytes: 0 };
+		const headRow = head.summary.network.byResourceType[key] ?? { requests: 0, encodedBytes: 0 };
+		lines.push('<tr>');
+		lines.push(`<td><b>${key}</b></td>`);
+		lines.push(`<td align="right">${util.formatNumber(baseRow.requests)}</td>`);
+		lines.push(`<td align="right">${util.formatNumber(headRow.requests)}</td>`);
+		lines.push(`<td align="right">${formatDelta(headRow.requests - baseRow.requests, util.formatNumber)}</td>`);
+		lines.push(`<td align="right">${util.formatBytes(baseRow.encodedBytes)}</td>`);
+		lines.push(`<td align="right">${util.formatBytes(headRow.encodedBytes)}</td>`);
+		lines.push(`<td align="right">${formatDelta(headRow.encodedBytes - baseRow.encodedBytes, util.formatBytes)}</td>`);
+		lines.push('</tr>');
+	}
+
+	lines.push('</tbody>');
+	lines.push('</table>');
+
+	return lines.join('\n');
+}
+
+function renderLargestRequests(report: BrowserMetricsReport, title: string) {
+	if (report.summary.network.largestRequests.length === 0) return null;
+
+	const lines = [
+		`<details><summary>${title}</summary>`,
+		'',
+		'| Resource | Type | Status | Encoded | Decoded |',
+		'| --- | --- | ---: | ---: | ---: |',
+	];
+
+	for (const request of report.summary.network.largestRequests.slice(0, 10)) {
+		lines.push(`| \`${escapeCell(truncate(request.url))}\` | ${escapeCell(request.resourceType)} | ${request.status ?? '-'} | ${util.formatBytes(request.encodedBytes)} | ${util.formatBytes(request.decodedBodyBytes)} |`);
+	}
+
+	lines.push('', '</details>');
+	return lines.join('\n');
+}
+
+function renderFailedRequests(report: BrowserMetricsReport, title: string) {
+	if (report.summary.network.failedRequests.length === 0) return null;
+
+	const lines = [
+		`<details><summary>${title}</summary>`,
+		'',
+		'| Resource | Type | Status | Error |',
+		'| --- | --- | ---: | --- |',
+	];
+
+	for (const request of report.summary.network.failedRequests.slice(0, 20)) {
+		lines.push(`| \`${escapeCell(truncate(request.url))}\` | ${escapeCell(request.resourceType)} | ${request.status ?? '-'} | ${escapeCell(request.errorText ?? '')} |`);
+	}
+
+	lines.push('', '</details>');
+	return lines.join('\n');
+}
+
+function toHeapSnapshotReport(report: BrowserMetricsReport): HeapSnapshotReport {
+	return {
+		summary: report.summary.heapSnapshot,
+		samples: report.samples.map(sample => ({
+			round: sample.round,
+			data: sample.heapSnapshot,
+		})),
+	};
+}
+
+export function renderFrontendBrowserReport(base: BrowserMetricsReport, head: BrowserMetricsReport, options: {
+	headHeapSnapshotUrl?: string;
+	detailedHtmlUrl?: string;
+} = {}) {
+	const headHeapSnapshotUrl = options.headHeapSnapshotUrl;
+	const detailedHtmlUrl = options.detailedHtmlUrl;
+	const sampleSummary = base.sampleCount === head.sampleCount
+		? `${base.sampleCount} samples per side`
+		: `${base.sampleCount} base sample(s), ${head.sampleCount} head sample(s)`;
+	const heapSnapshotTable = heapSnapshotUtil.renderHeapSnapshotTable(toHeapSnapshotReport(base), toHeapSnapshotReport(head));
+	const lines = [
+		'## 🖥 Frontend Browser Metrics',
+		'',
+		renderSummaryTable(base, head),
+		'',
+		//`> Measured ${sampleSummary} with fresh headless Chrome profiles, browser cache disabled, service workers bypassed, and forced V8 GC before each heap snapshot. Base/Head values are medians; Δ median is the median of paired Head - Base sample deltas; percent uses Δ median / Base median; ± and Δ MAD are median absolute deviations. Scenario: sign up, dismiss the initial account setup dialog, create the first timeline note, then wait until that note is visible.`,
+		//'',
+		detailedHtmlUrl == null || detailedHtmlUrl === '' ? null : `[View details](${detailedHtmlUrl})`,
+		detailedHtmlUrl == null || detailedHtmlUrl === '' ? null : '',
+		'<details>',
+		'<summary>Requests by resource type</summary>',
+		'',
+		renderResourceTypeTable(base, head),
+		'',
+		'</details>',
+		'',
+		'<details>',
+		'<summary>V8 heap snapshot statistics</summary>',
+		'',
+		heapSnapshotTable ?? '_No V8 heap snapshot data._',
+		'',
+		heapSnapshotUtil.renderHeapSnapshotSankey(toHeapSnapshotReport(head), 'Head'),
+		'',
+		`[Download representative head heap snapshot](${headHeapSnapshotUrl})`,
+		'</details>',
+		'',
+	];
+
+	for (const section of [
+		//renderLargestRequests(head, 'Largest representative head requests'),
+		//renderFailedRequests(base, 'Failed representative base requests'),
+		//renderFailedRequests(head, 'Failed representative head requests'),
+	]) {
+		if (section == null) continue;
+		lines.push(section, '');
+	}
+
+	return lines.filter(line => line != null).join('\n').trimEnd() + '\n';
+}
+
+async function main() {
+	const [baseFile, headFile, outputFile] = process.argv.slice(2);
+	if (baseFile == null || headFile == null || outputFile == null) {
+		throw new Error('Usage: node frontend-browser-report.mts <base-browser.json> <head-browser.json> <output.md>');
+	}
+
+	const base = JSON.parse(await readFile(baseFile, 'utf8')) as BrowserMetricsReport;
+	const head = JSON.parse(await readFile(headFile, 'utf8')) as BrowserMetricsReport;
+	await writeFile(outputFile, renderFrontendBrowserReport(base, head, {
+		headHeapSnapshotUrl: process.env.FRONTEND_BROWSER_HEAD_HEAP_SNAPSHOT_ARTIFACT_URL,
+		detailedHtmlUrl: process.env.FRONTEND_BROWSER_DETAILED_HTML_ARTIFACT_URL,
+	}));
+}
+
+if (process.argv[1] != null && import.meta.url === pathToFileURL(process.argv[1]).href) {
+	await main();
+}

.github/scripts/heap-snapshot-util.mts

@@ -32,6 +32,326 @@ export type HeapSnapshotReport = {
 	}[];
 };
 
+export const defaultHeapSnapshotBreakdownTopN = 6;
+
+export function createEmptyHeapSnapshotData(): HeapSnapshotData {
+	const categories = {} as HeapSnapshotData['categories'];
+	const nodeCounts = {} as HeapSnapshotData['nodeCounts'];
+	for (const category of Object.keys(heapSnapshotCategory) as (keyof typeof heapSnapshotCategory)[]) {
+		categories[category] = 0;
+		nodeCounts[category] = 0;
+	}
+	return {
+		categories,
+		nodeCounts,
+		breakdowns: {} as HeapSnapshotData['breakdowns'],
+	};
+}
+
+function sanitizeHeapSnapshotBreakdownLabel(value: unknown, fallback = 'unknown') {
+	const label = String(value ?? '').replace(/\s+/g, ' ').trim();
+	if (label === '') return fallback;
+	if (label.length <= 80) return label;
+	return `${label.slice(0, 77)}...`;
+}
+
+function classifyHeapSnapshotBreakdown(category: keyof typeof heapSnapshotCategory, type: string, name: string) {
+	if (category === 'strings') return type;
+
+	if (category === 'jsArrays') {
+		if (type === 'array elements') return 'Array elements';
+		if (type === 'object' && name === 'Array') return 'Array objects';
+		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`);
+	}
+
+	if (category === 'typedArrays') {
+		if (name === 'system / JSArrayBufferData') return 'ArrayBuffer data';
+		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`);
+	}
+
+	if (category === 'systemObjects') {
+		if (name.startsWith('system /')) return sanitizeHeapSnapshotBreakdownLabel(name);
+		if (name.startsWith('(system ')) return sanitizeHeapSnapshotBreakdownLabel(name);
+		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`, type);
+	}
+
+	if (category === 'otherJsObjects') {
+		if (type === 'object') return sanitizeHeapSnapshotBreakdownLabel(`object: ${name}`, 'object: unknown');
+		return type;
+	}
+
+	if (category === 'otherNonJsObjects') {
+		if (type === 'extra native bytes') return 'Extra native bytes';
+		if (type === 'native') return sanitizeHeapSnapshotBreakdownLabel(`native: ${name}`, 'native: unknown');
+		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`, type);
+	}
+
+	if (category === 'code') {
+		const lowerName = name.toLowerCase();
+		if (lowerName.includes('bytecode')) return 'bytecode';
+		if (lowerName.includes('builtin')) return 'builtins';
+		if (lowerName.includes('regexp')) return 'regexp code';
+		if (lowerName.includes('stub')) return 'stubs';
+		return sanitizeHeapSnapshotBreakdownLabel(`code: ${name}`, 'code: unknown');
+	}
+
+	return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`, type);
+}
+
+export function collapseHeapSnapshotBreakdown(breakdown: Record<string, number>, topN = defaultHeapSnapshotBreakdownTopN) {
+	const entries = Object.entries(breakdown)
+		.filter(([, value]) => value > 0)
+		.toSorted((a, b) => b[1] - a[1]);
+
+	const topEntries = entries.slice(0, topN);
+	const otherValue = entries
+		.slice(topN)
+		.reduce((sum, [, value]) => sum + value, 0);
+
+	const collapsed = Object.fromEntries(topEntries);
+	if (otherValue > 0) collapsed.Other = otherValue;
+	return collapsed;
+}
+
+export function collapseHeapSnapshotBreakdowns(
+	breakdowns: Partial<Record<keyof typeof heapSnapshotCategory, Record<string, number>>>,
+	topN = defaultHeapSnapshotBreakdownTopN,
+) {
+	const collapsed = {} as NonNullable<HeapSnapshotData['breakdowns']>;
+	for (const category of Object.keys(heapSnapshotCategory) as (keyof typeof heapSnapshotCategory)[]) {
+		if (category === 'total') continue;
+
+		const categoryBreakdown = breakdowns[category];
+		if (categoryBreakdown == null) continue;
+
+		const collapsedCategory = collapseHeapSnapshotBreakdown(categoryBreakdown, topN);
+		if (Object.keys(collapsedCategory).length > 0) {
+			collapsed[category] = collapsedCategory;
+		}
+	}
+
+	return collapsed;
+}
+
+// Keep these buckets aligned with Chrome DevTools' heap snapshot Statistics view.
+export function analyzeHeapSnapshot(snapshot: any, options: { breakdownTopN?: number } = {}): HeapSnapshotData {
+	const meta = snapshot?.snapshot?.meta;
+	const nodes = snapshot?.nodes;
+	const edges = snapshot?.edges;
+	const strings = snapshot?.strings;
+	if (meta == null || !Array.isArray(nodes) || !Array.isArray(edges) || !Array.isArray(strings)) {
+		throw new Error('Invalid heap snapshot format');
+	}
+
+	const nodeFields = meta.node_fields;
+	if (!Array.isArray(nodeFields)) throw new Error('Invalid heap snapshot node fields');
+	const edgeFields = meta.edge_fields;
+	if (!Array.isArray(edgeFields)) throw new Error('Invalid heap snapshot edge fields');
+
+	const typeOffset = nodeFields.indexOf('type');
+	const nameOffset = nodeFields.indexOf('name');
+	const selfSizeOffset = nodeFields.indexOf('self_size');
+	const edgeCountOffset = nodeFields.indexOf('edge_count');
+	if (typeOffset < 0 || nameOffset < 0 || selfSizeOffset < 0 || edgeCountOffset < 0) {
+		throw new Error('Heap snapshot is missing required node fields');
+	}
+	const edgeTypeOffset = edgeFields.indexOf('type');
+	const edgeNameOffset = edgeFields.indexOf('name_or_index');
+	const edgeToNodeOffset = edgeFields.indexOf('to_node');
+	if (edgeTypeOffset < 0 || edgeNameOffset < 0 || edgeToNodeOffset < 0) {
+		throw new Error('Heap snapshot is missing required edge fields');
+	}
+
+	const nodeTypeNames = meta.node_types?.[typeOffset];
+	if (!Array.isArray(nodeTypeNames)) throw new Error('Invalid heap snapshot node types');
+	const edgeTypeNames = meta.edge_types?.[edgeTypeOffset];
+	if (!Array.isArray(edgeTypeNames)) throw new Error('Invalid heap snapshot edge types');
+
+	const nodeFieldCount = nodeFields.length;
+	const edgeFieldCount = edgeFields.length;
+	const nativeType = nodeTypeNames.indexOf('native');
+	const codeType = nodeTypeNames.indexOf('code');
+	const hiddenType = nodeTypeNames.indexOf('hidden');
+	const stringTypes = new Set([
+		nodeTypeNames.indexOf('string'),
+		nodeTypeNames.indexOf('concatenated string'),
+		nodeTypeNames.indexOf('sliced string'),
+	]);
+	const internalEdgeType = edgeTypeNames.indexOf('internal');
+	const extraNativeBytes = Number.isFinite(snapshot.snapshot.extra_native_bytes) ? snapshot.snapshot.extra_native_bytes : 0;
+	const { categories, nodeCounts } = createEmptyHeapSnapshotData();
+	const breakdowns = {} as Record<keyof typeof heapSnapshotCategory, Record<string, number>>;
+	for (const category of Object.keys(heapSnapshotCategory) as (keyof typeof heapSnapshotCategory)[]) {
+		if (category !== 'total') breakdowns[category] = {};
+	}
+
+	function addValue(map: Record<string, number>, key: string, value: number) {
+		map[key] = (map[key] ?? 0) + value;
+	}
+
+	const edgeStartIndexes = new Map<number, number>();
+	const retainerCounts = new Map<number, number>();
+	let edgeIndex = 0;
+	for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
+		edgeStartIndexes.set(nodeIndex, edgeIndex);
+		const edgeCount = nodes[nodeIndex + edgeCountOffset] ?? 0;
+		for (let i = 0; i < edgeCount; i++, edgeIndex += edgeFieldCount) {
+			const toNodeIndex = edges[edgeIndex + edgeToNodeOffset];
+			retainerCounts.set(toNodeIndex, (retainerCounts.get(toNodeIndex) ?? 0) + 1);
+		}
+	}
+
+	const jsArrayElementNodeIndexes = new Set<number>();
+
+	function addCategoryValue(category: keyof typeof heapSnapshotCategory, value: number, type: string, name: string, nodeIndex: number | null = null) {
+		if (value <= 0) return;
+		categories[category] += value;
+		addValue(breakdowns[category], classifyHeapSnapshotBreakdown(category, type, name), value);
+		if (nodeIndex != null) nodeCounts[category]++;
+	}
+
+	function addJsArrayElementSize(nodeIndex: number) {
+		const beginEdgeIndex = edgeStartIndexes.get(nodeIndex) ?? 0;
+		const edgeCount = nodes[nodeIndex + edgeCountOffset] ?? 0;
+		for (let i = 0, currentEdgeIndex = beginEdgeIndex; i < edgeCount; i++, currentEdgeIndex += edgeFieldCount) {
+			const edgeType = edges[currentEdgeIndex + edgeTypeOffset];
+			if (edgeType !== internalEdgeType) continue;
+
+			const edgeName = strings[edges[currentEdgeIndex + edgeNameOffset]];
+			if (edgeName !== 'elements') continue;
+
+			const elementsNodeIndex = edges[currentEdgeIndex + edgeToNodeOffset];
+			if ((retainerCounts.get(elementsNodeIndex) ?? 0) === 1) {
+				const elementsSize = nodes[elementsNodeIndex + selfSizeOffset] ?? 0;
+				addCategoryValue('jsArrays', elementsSize, 'array elements', 'Array elements', elementsNodeIndex);
+				jsArrayElementNodeIndexes.add(elementsNodeIndex);
+			}
+			break;
+		}
+	}
+
+	if (extraNativeBytes > 0) {
+		addCategoryValue('otherNonJsObjects', extraNativeBytes, 'extra native bytes', 'extra native bytes');
+	}
+
+	for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
+		const typeId = nodes[nodeIndex + typeOffset];
+		const type = nodeTypeNames[typeId] ?? 'unknown';
+		const name = strings[nodes[nodeIndex + nameOffset]] ?? '';
+		const selfSize = nodes[nodeIndex + selfSizeOffset] ?? 0;
+		categories.total += selfSize;
+		nodeCounts.total++;
+
+		if (typeId === hiddenType) {
+			addCategoryValue('systemObjects', selfSize, type, name, nodeIndex);
+			continue;
+		}
+
+		if (typeId === nativeType) {
+			if (name === 'system / JSArrayBufferData') {
+				addCategoryValue('typedArrays', selfSize, type, name, nodeIndex);
+			} else {
+				addCategoryValue('otherNonJsObjects', selfSize, type, name, nodeIndex);
+			}
+			continue;
+		}
+
+		if (typeId === codeType) {
+			addCategoryValue('code', selfSize, type, name, nodeIndex);
+			continue;
+		}
+
+		if (stringTypes.has(typeId)) {
+			addCategoryValue('strings', selfSize, type, name, nodeIndex);
+			continue;
+		}
+
+		if (name === 'Array') {
+			addCategoryValue('jsArrays', selfSize, type, name, nodeIndex);
+			addJsArrayElementSize(nodeIndex);
+			continue;
+		}
+	}
+
+	categories.total += extraNativeBytes;
+
+	for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
+		if (jsArrayElementNodeIndexes.has(nodeIndex)) continue;
+
+		const typeId = nodes[nodeIndex + typeOffset];
+		if (typeId === hiddenType || typeId === nativeType || typeId === codeType || stringTypes.has(typeId)) continue;
+
+		const name = strings[nodes[nodeIndex + nameOffset]] ?? '';
+		if (name === 'Array') continue;
+
+		const type = nodeTypeNames[typeId] ?? 'unknown';
+		const selfSize = nodes[nodeIndex + selfSizeOffset] ?? 0;
+		addCategoryValue('otherJsObjects', selfSize, type, name, nodeIndex);
+	}
+
+	return {
+		categories,
+		nodeCounts,
+		breakdowns: collapseHeapSnapshotBreakdowns(breakdowns, options.breakdownTopN),
+	};
+}
+
+function finiteMedian(values: (number | null | undefined)[]) {
+	const finiteValues = values.filter(value => Number.isFinite(value)) as number[];
+	if (finiteValues.length === 0) return null;
+	return util.median(finiteValues);
+}
+
+export function summarizeHeapSnapshotDataSamples<T>(
+	samples: T[],
+	getData: (sample: T) => HeapSnapshotData | null | undefined,
+	options: { breakdownTopN?: number } = {},
+) {
+	const data = samples.map(getData);
+	const categories = {} as HeapSnapshotData['categories'];
+	for (const category of Object.keys(heapSnapshotCategory) as (keyof typeof heapSnapshotCategory)[]) {
+		const value = finiteMedian(data.map(snapshot => snapshot?.categories?.[category]));
+		if (value != null) categories[category] = value;
+	}
+
+	const nodeCounts = {} as HeapSnapshotData['nodeCounts'];
+	for (const category of Object.keys(heapSnapshotCategory) as (keyof typeof heapSnapshotCategory)[]) {
+		const value = finiteMedian(data.map(snapshot => snapshot?.nodeCounts?.[category]));
+		if (value != null) nodeCounts[category] = value;
+	}
+
+	if (Object.keys(categories).length === 0) return null;
+
+	const breakdowns = {} as NonNullable<HeapSnapshotData['breakdowns']>;
+	for (const category of Object.keys(heapSnapshotCategory) as (keyof typeof heapSnapshotCategory)[]) {
+		if (category === 'total') continue;
+
+		const childKeys = new Set<string>();
+		for (const snapshot of data) {
+			for (const childKey of Object.keys(snapshot?.breakdowns?.[category] ?? {})) {
+				childKeys.add(childKey);
+			}
+		}
+
+		const categoryBreakdown = {} as Record<string, number>;
+		for (const childKey of childKeys) {
+			const value = finiteMedian(data.map(snapshot => snapshot?.breakdowns?.[category]?.[childKey]));
+			if (value != null) categoryBreakdown[childKey] = value;
+		}
+
+		const collapsed = collapseHeapSnapshotBreakdown(categoryBreakdown, options.breakdownTopN);
+		if (Object.keys(collapsed).length > 0) {
+			breakdowns[category] = collapsed;
+		}
+	}
+
+	return {
+		categories,
+		nodeCounts,
+		...(Object.keys(breakdowns).length > 0 ? { breakdowns } : {}),
+	};
+}
+
 function getHeapSnapshotCategoryValue(report: HeapSnapshotReport, category: keyof typeof heapSnapshotCategory) {
 	return report.summary.categories[category];
 }

.github/scripts/measure-backend-memory-comparison.mts

@@ -38,7 +38,7 @@ export type MemoryReport = {
 
 const [baseDirArg, headDirArg, baseOutputArg, headOutputArg] = process.argv.slice(2);
 
-const HEAP_SNAPSHOT_BREAKDOWN_TOP_N = util.readIntegerEnv('MK_MEMORY_HEAP_SNAPSHOT_BREAKDOWN_TOP_N', 6, 1);
+const HEAP_SNAPSHOT_BREAKDOWN_TOP_N = util.readIntegerEnv('MK_MEMORY_HEAP_SNAPSHOT_BREAKDOWN_TOP_N', heapSnapshotUtil.defaultHeapSnapshotBreakdownTopN, 1);
 const HEAD_HEAP_SNAPSHOT_WORK_DIR = resolve('head-heap-snapshots');
 const HEAD_HEAP_SNAPSHOT_OUTPUT_PATH = resolve('head-heap-snapshot.heapsnapshot');
 
@@ -70,51 +70,6 @@ async function resetState(repoDir: string) {
 	}
 }
 
-function summarizeHeapSnapshotBreakdowns(samples: MemoryReport['samples'], phase: typeof phases[number]) {
-	const breakdowns = {} as Record<keyof typeof heapSnapshotUtil.heapSnapshotCategory, Record<string, number>>;
-
-	for (const category of Object.keys(heapSnapshotUtil.heapSnapshotCategory) as (keyof typeof heapSnapshotUtil.heapSnapshotCategory)[]) {
-		if (category === 'total') continue;
-
-		const childKeys = new Set<string>();
-		for (const sample of samples) {
-			for (const childKey of Object.keys(sample.phases[phase].heapSnapshot?.breakdowns?.[category] ?? {})) {
-				childKeys.add(childKey);
-			}
-		}
-
-		const categoryBreakdown = {} as Record<string, number>;
-		for (const childKey of childKeys) {
-			const values = samples
-				.map(sample => sample.phases[phase].heapSnapshot?.breakdowns?.[category]?.[childKey])
-				.filter(value => Number.isFinite(value)) as number[];
-
-			if (values.length > 0) categoryBreakdown[childKey] = util.median(values);
-		}
-
-		if (Object.keys(categoryBreakdown).length > 0) {
-			breakdowns[category] = collapseHeapSnapshotBreakdown(categoryBreakdown);
-		}
-	}
-
-	return breakdowns;
-}
-
-function collapseHeapSnapshotBreakdown(breakdown: Record<string, number>) {
-	const entries = Object.entries(breakdown)
-		.filter(([, value]) => value > 0)
-		.toSorted((a, b) => b[1] - a[1]);
-
-	const topEntries = entries.slice(0, HEAP_SNAPSHOT_BREAKDOWN_TOP_N);
-	const otherValue = entries
-		.slice(HEAP_SNAPSHOT_BREAKDOWN_TOP_N)
-		.reduce((sum, [, value]) => sum + value, 0);
-
-	const collapsed = Object.fromEntries(topEntries);
-	if (otherValue > 0) collapsed.Other = otherValue;
-	return collapsed;
-}
-
 function summarizeSamples(samples: MemoryReport['samples']) {
 	const summary = {} as MemoryReport['summary'];
 
@@ -135,33 +90,12 @@ function summarizeSamples(samples: MemoryReport['samples']) {
 			summary[phase].memoryUsage[key] = util.median(values);
 		}
 
-		const heapSnapshotCategoryValues = {} as Record<keyof typeof heapSnapshotUtil.heapSnapshotCategory, number>;
-		for (const category of Object.keys(heapSnapshotUtil.heapSnapshotCategory) as (keyof typeof heapSnapshotUtil.heapSnapshotCategory)[]) {
-			const values = samples
-				.map(sample => sample.phases[phase].heapSnapshot?.categories?.[category])
-				.filter(value => Number.isFinite(value)) as number[];
-
-			if (values.length > 0) heapSnapshotCategoryValues[category] = util.median(values);
-		}
-
-		const heapSnapshotNodeCountValues = {} as Record<keyof typeof heapSnapshotUtil.heapSnapshotCategory, number>;
-		for (const category of Object.keys(heapSnapshotUtil.heapSnapshotCategory) as (keyof typeof heapSnapshotUtil.heapSnapshotCategory)[]) {
-			const values = samples
-				.map(sample => sample.phases[phase].heapSnapshot?.nodeCounts?.[category])
-				.filter(value => Number.isFinite(value)) as number[];
-
-			if (values.length > 0) heapSnapshotNodeCountValues[category] = util.median(values);
-		}
-
-		if (Object.keys(heapSnapshotCategoryValues).length > 0) {
-			const heapSnapshotBreakdowns = summarizeHeapSnapshotBreakdowns(samples, phase);
-
-			summary[phase].heapSnapshot = {
-				categories: heapSnapshotCategoryValues,
-				nodeCounts: heapSnapshotNodeCountValues,
-				...(Object.keys(heapSnapshotBreakdowns).length > 0 ? { breakdowns: heapSnapshotBreakdowns } : {}),
-			};
-		}
+		const heapSnapshot = heapSnapshotUtil.summarizeHeapSnapshotDataSamples(
+			samples,
+			sample => sample.phases[phase].heapSnapshot,
+			{ breakdownTopN: HEAP_SNAPSHOT_BREAKDOWN_TOP_N },
+		);
+		if (heapSnapshot != null) summary[phase].heapSnapshot = heapSnapshot;
 	}
 
 	return summary;

.github/scripts/measure-frontend-browser-comparison.mts

@@ -0,0 +1,311 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { spawn, type ChildProcessWithoutNullStreams } from 'node:child_process';
+import { copyFile, mkdir, rm, writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import * as util from './utility.mts';
+import * as heapSnapshotUtil from './heap-snapshot-util.mts';
+import { Chrome, summarizeNetwork } from './chrome.mts';
+import type { BrowserMeasurement, NetworkRequest, NetworkSummary } from './chrome.mts';
+
+const [baseDirArg, headDirArg, baseOutputArg, headOutputArg, headHeapSnapshotOutputArg] = process.argv.slice(2);
+
+const baseUrl = process.env.FRONTEND_BROWSER_METRICS_URL ?? 'http://127.0.0.1:61812';
+const scenarioTimeoutMs = util.readIntegerEnv('FRONTEND_BROWSER_METRICS_SCENARIO_TIMEOUT_MS', 90_000, 1);
+const settleMs = util.readIntegerEnv('FRONTEND_BROWSER_METRICS_SETTLE_MS', 1_000, 0);
+const sampleCount = util.readIntegerEnv('FRONTEND_BROWSER_METRICS_SAMPLE_COUNT', 5, 1);
+const heapSnapshotBreakdownTopN = util.readIntegerEnv('FRONTEND_BROWSER_HEAP_SNAPSHOT_BREAKDOWN_TOP_N', heapSnapshotUtil.defaultHeapSnapshotBreakdownTopN, 1);
+const headHeapSnapshotWorkDir = resolve('frontend-browser-head-heap-snapshots');
+
+type BrowserMeasurementSample = BrowserMeasurement & {
+	round: number;
+	networkRequests: NetworkRequest[];
+};
+
+type BrowserMetricsReport = {
+	label: string;
+	timestamp: string;
+	url: string;
+	scenario: string;
+	sampleCount: number;
+	aggregation: 'median';
+	summary: BrowserMeasurement;
+	samples: BrowserMeasurementSample[];
+};
+
+async function runSignupAndPostScenario(chrome: Chrome) {
+	const noteText = `Frontend browser metrics ${Date.now()}`;
+
+	await chrome.cdp.send('Page.navigate', { url: `${baseUrl}/` });
+	const initialSelector = await chrome.waitForAnySelector(['[data-cy-signup]', '[data-cy-open-post-form]'], { visible: true, timeoutMs: scenarioTimeoutMs });
+	if (initialSelector == null) throw new Error('Timed out waiting for the signup or timeline entry point');
+
+	if (await chrome.waitForSelector('[data-cy-signup]', { visible: true, enabled: true, timeoutMs: 5_000 })) {
+		await chrome.click('[data-cy-signup]');
+
+		if (await chrome.waitForSelector('[data-cy-signup-rules-continue]', { visible: true, timeoutMs: 5_000 })) {
+			await chrome.click('[data-cy-signup-rules-notes-agree] [data-cy-switch-toggle]');
+			await chrome.maybeClick('[data-cy-modal-dialog-ok]', 5_000);
+			await chrome.click('[data-cy-signup-rules-continue]');
+		}
+
+		await chrome.setValue('[data-cy-signup-username] input', 'alice');
+		await chrome.setValue('[data-cy-signup-password] input', 'alice1234');
+		await chrome.setValue('[data-cy-signup-password-retype] input', 'alice1234');
+		if (await chrome.waitForSelector('[data-cy-signup-invitation-code] input', { visible: true, enabled: true, timeoutMs: 2_000 })) {
+			await chrome.setValue('[data-cy-signup-invitation-code] input', 'test-invitation-code');
+		}
+		await chrome.click('[data-cy-signup-submit]');
+	}
+
+	const firstReadySelector = await chrome.waitForAnySelector([
+		'[data-cy-user-setup] [data-cy-modal-window-close]',
+		'[data-cy-open-post-form]',
+	], { visible: true, enabled: true, timeoutMs: scenarioTimeoutMs });
+	if (firstReadySelector == null) throw new Error('Timed out waiting for signed-in home timeline');
+
+	if (firstReadySelector === '[data-cy-user-setup] [data-cy-modal-window-close]') {
+		await chrome.click('[data-cy-user-setup] [data-cy-modal-window-close]');
+		await chrome.maybeClick('[data-cy-modal-dialog-ok]', 5_000);
+	}
+
+	await chrome.click('[data-cy-open-post-form]');
+	await chrome.setValue('[data-cy-post-form-text]', noteText);
+	await chrome.click('[data-cy-open-post-form-submit]');
+
+	if (!await chrome.waitForText(noteText, scenarioTimeoutMs)) {
+		throw new Error('The first timeline note did not appear');
+	}
+
+	await util.sleep(settleMs);
+}
+
+function finiteMedian(values: (number | null | undefined)[], defaultValue = 0) {
+	const finiteValues = values.filter(value => Number.isFinite(value)) as number[];
+	if (finiteValues.length === 0) return defaultValue;
+	return util.median(finiteValues);
+}
+
+function selectRepresentativeSample(samples: BrowserMeasurementSample[], getValue: (sample: BrowserMeasurementSample) => number) {
+	const medianValue = finiteMedian(samples.map(getValue));
+	let selected: { sample: BrowserMeasurementSample; distance: number } | null = null;
+
+	for (const sample of samples) {
+		const value = getValue(sample);
+		if (!Number.isFinite(value)) continue;
+		const distance = Math.abs(value - medianValue);
+		if (selected == null || distance < selected.distance || (distance === selected.distance && sample.round < selected.sample.round)) {
+			selected = {
+				sample,
+				distance,
+			};
+		}
+	}
+
+	return selected?.sample ?? samples[0];
+}
+
+function summarizeResourceType(samples: BrowserMeasurementSample[], resourceType: string) {
+	return {
+		requests: finiteMedian(samples.map(sample => sample.network.byResourceType[resourceType]?.requests)),
+		encodedBytes: finiteMedian(samples.map(sample => sample.network.byResourceType[resourceType]?.encodedBytes)),
+		decodedBodyBytes: finiteMedian(samples.map(sample => sample.network.byResourceType[resourceType]?.decodedBodyBytes)),
+	};
+}
+
+function summarizeNetworkSamples(samples: BrowserMeasurementSample[]): NetworkSummary {
+	const resourceTypes = new Set<string>();
+	for (const sample of samples) {
+		for (const resourceType of Object.keys(sample.network.byResourceType)) {
+			resourceTypes.add(resourceType);
+		}
+	}
+
+	const representative = selectRepresentativeSample(samples, sample => sample.network.totalEncodedBytes);
+	const byResourceType = {} as NetworkSummary['byResourceType'];
+	for (const resourceType of resourceTypes) {
+		byResourceType[resourceType] = summarizeResourceType(samples, resourceType);
+	}
+
+	return {
+		requestCount: finiteMedian(samples.map(sample => sample.network.requestCount)),
+		webSocketConnectionCount: finiteMedian(samples.map(sample => sample.network.webSocketConnectionCount)),
+		webSocketSentBytes: finiteMedian(samples.map(sample => sample.network.webSocketSentBytes)),
+		webSocketReceivedBytes: finiteMedian(samples.map(sample => sample.network.webSocketReceivedBytes)),
+		finishedRequestCount: finiteMedian(samples.map(sample => sample.network.finishedRequestCount)),
+		failedRequestCount: finiteMedian(samples.map(sample => sample.network.failedRequestCount)),
+		cachedRequestCount: finiteMedian(samples.map(sample => sample.network.cachedRequestCount)),
+		serviceWorkerRequestCount: finiteMedian(samples.map(sample => sample.network.serviceWorkerRequestCount)),
+		totalEncodedBytes: finiteMedian(samples.map(sample => sample.network.totalEncodedBytes)),
+		totalDecodedBodyBytes: finiteMedian(samples.map(sample => sample.network.totalDecodedBodyBytes)),
+		sameOriginEncodedBytes: finiteMedian(samples.map(sample => sample.network.sameOriginEncodedBytes)),
+		thirdPartyEncodedBytes: finiteMedian(samples.map(sample => sample.network.thirdPartyEncodedBytes)),
+		byResourceType,
+		largestRequests: representative.network.largestRequests,
+		failedRequests: representative.network.failedRequests,
+	};
+}
+
+function summarizePerformanceSamples(samples: BrowserMeasurementSample[]): BrowserMeasurement['performance'] {
+	const cdpMetricKeys = new Set<string>();
+	for (const sample of samples) {
+		for (const key of Object.keys(sample.performance.cdpMetrics)) {
+			cdpMetricKeys.add(key);
+		}
+	}
+
+	const cdpMetrics = {} as Record<string, number>;
+	for (const key of cdpMetricKeys) {
+		cdpMetrics[key] = finiteMedian(samples.map(sample => sample.performance.cdpMetrics[key]));
+	}
+
+	const webVitalKeys = [
+		'firstPaintMs',
+		'firstContentfulPaintMs',
+		'domContentLoadedEventEndMs',
+		'loadEventEndMs',
+		'longTaskCount',
+		'longTaskDurationMs',
+		'maxLongTaskDurationMs',
+		'resourceEntryCount',
+		'domElements',
+	] as const satisfies (keyof BrowserMeasurement['performance']['webVitals'])[];
+
+	const webVitals = {} as BrowserMeasurement['performance']['webVitals'];
+	for (const key of webVitalKeys) {
+		webVitals[key] = finiteMedian(samples.map(sample => sample.performance.webVitals[key]));
+	}
+
+	return {
+		cdpMetrics,
+		runtimeHeap: {
+			usedSize: finiteMedian(samples.map(sample => sample.performance.runtimeHeap?.usedSize)),
+			totalSize: finiteMedian(samples.map(sample => sample.performance.runtimeHeap?.totalSize)),
+		},
+		tabMemory: {
+			totalBytes: finiteMedian(samples.map(sample => sample.performance.tabMemory.totalBytes)),
+		},
+		webVitals,
+	};
+}
+
+function summarizeHeapSnapshotSamples(samples: BrowserMeasurementSample[]) {
+	const summary = heapSnapshotUtil.summarizeHeapSnapshotDataSamples(
+		samples,
+		sample => sample.heapSnapshot,
+		{ breakdownTopN: heapSnapshotBreakdownTopN },
+	);
+	if (summary == null) throw new Error('No heap snapshot samples');
+	return summary;
+}
+
+function summarizeSamples(label: 'base' | 'head', samples: BrowserMeasurementSample[]): BrowserMetricsReport {
+	if (samples.length === 0) throw new Error(`No browser metric samples for ${label}`);
+	const representative = selectRepresentativeSample(samples, sample => sample.network.totalEncodedBytes);
+	const summary: BrowserMeasurement = {
+		label,
+		timestamp: new Date().toISOString(),
+		url: baseUrl,
+		scenario: representative.scenario,
+		durationMs: finiteMedian(samples.map(sample => sample.durationMs)),
+		network: summarizeNetworkSamples(samples),
+		performance: summarizePerformanceSamples(samples),
+		heapSnapshot: summarizeHeapSnapshotSamples(samples),
+	};
+
+	return {
+		label,
+		timestamp: new Date().toISOString(),
+		url: baseUrl,
+		scenario: representative.scenario,
+		sampleCount: samples.length,
+		aggregation: 'median',
+		summary,
+		samples,
+	};
+}
+
+async function measureSample(label: 'base' | 'head', round: number, heapSnapshotSavePath?: string) {
+	await util.prepareInstance(baseUrl);
+
+	return await Chrome.with(label, { scenarioTimeoutMs }, async chrome => {
+		await chrome.enableNetworkTracking();
+
+		const startedAt = Date.now();
+		await runSignupAndPostScenario(chrome);
+		const durationMs = Date.now() - startedAt;
+		await chrome.waitForNetworkDetails();
+		const performance = await chrome.collectPerformance();
+		const heapSnapshotRaw = await chrome.takeHeapSnapshot(heapSnapshotSavePath);
+		const heapSnapshot = heapSnapshotUtil.analyzeHeapSnapshot(heapSnapshotRaw, { breakdownTopN: heapSnapshotBreakdownTopN });
+		const measurement: BrowserMeasurementSample = {
+			label,
+			round,
+			timestamp: new Date().toISOString(),
+			url: baseUrl,
+			scenario: 'fresh browser signup, first timeline note, after the note becomes visible',
+			durationMs,
+			network: summarizeNetwork(chrome.networkRequests, baseUrl, chrome.webSocketConnections),
+			networkRequests: chrome.networkRequests,
+			performance,
+			heapSnapshot,
+		};
+
+		return measurement;
+	});
+}
+
+function headHeapSnapshotPath(round: number) {
+	return join(headHeapSnapshotWorkDir, `round-${round}.heapsnapshot`);
+}
+
+async function saveRepresentativeHeadHeapSnapshot(report: BrowserMetricsReport, outputPath: string) {
+	const representative = selectRepresentativeSample(report.samples, sample => sample.heapSnapshot.categories.total);
+	await copyFile(headHeapSnapshotPath(representative.round), outputPath);
+	process.stderr.write(`[head] Selected round ${representative.round} heap snapshot for artifact\n`);
+	await rm(headHeapSnapshotWorkDir, { recursive: true, force: true });
+}
+
+async function measureRepo(label: 'base' | 'head', repoDir: string, outputPath: string, heapSnapshotSavePath?: string) {
+	let server: ChildProcessWithoutNullStreams | null = null;
+
+	try {
+		server = util.startServer(label, repoDir);
+		await util.waitForServer(baseUrl, server);
+
+		if (label === 'head' && heapSnapshotSavePath != null) {
+			await rm(headHeapSnapshotWorkDir, { recursive: true, force: true });
+			await mkdir(headHeapSnapshotWorkDir, { recursive: true });
+		}
+
+		const samples: BrowserMeasurementSample[] = [];
+		for (let round = 1; round <= sampleCount; round++) {
+			process.stderr.write(`[${label}] Measuring browser metrics sample ${round}/${sampleCount}\n`);
+			samples.push(await measureSample(
+				label,
+				round,
+				label === 'head' && heapSnapshotSavePath != null ? headHeapSnapshotPath(round) : undefined,
+			));
+		}
+
+		const report = summarizeSamples(label, samples);
+		await writeFile(outputPath, JSON.stringify(report, null, '\t'));
+		process.stderr.write(`[${label}] Wrote browser metrics report to ${outputPath}\n`);
+
+		if (label === 'head' && heapSnapshotSavePath != null) {
+			await saveRepresentativeHeadHeapSnapshot(report, heapSnapshotSavePath);
+		}
+	} finally {
+		if (server != null) await util.stopServer(server);
+	}
+}
+
+async function main() {
+	await measureRepo('base', resolve(baseDirArg), resolve(baseOutputArg));
+	await measureRepo('head', resolve(headDirArg), resolve(headOutputArg), headHeapSnapshotOutputArg == null ? undefined : resolve(headHeapSnapshotOutputArg));
+}
+
+await main();

.github/scripts/utility.mts

@@ -5,10 +5,14 @@
 
 // NOTE: このファイルはworkflow上でバックエンドからも参照されるため、side effectがあってはならない
 
-import { spawn } from 'node:child_process';
+import { spawn, spawnSync, type ChildProcessWithoutNullStreams } from 'node:child_process';
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
 
+export function sleep(ms: number) {
+	return new Promise(resolvePromise => setTimeout(resolvePromise, ms));
+}
+
 export function median(values: number[]) {
 	const sorted = values.toSorted((a, b) => a - b);
 	const center = Math.floor(sorted.length / 2);
@@ -202,3 +206,91 @@ export function run(command: string, args: string[], options: { cwd?: string; en
 		});
 	});
 }
+
+export function startServer(label: string, repoDir: string) {
+	process.stderr.write(`[${label}] Starting Misskey test server\n`);
+	const child = spawn(commandName('pnpm'), ['start:test'], {
+		cwd: repoDir,
+		env: process.env,
+		stdio: ['ignore', 'pipe', 'pipe'],
+		detached: process.platform !== 'win32',
+	});
+	child.stdout.on('data', data => process.stderr.write(`[server:${label}] ${data}`));
+	child.stderr.on('data', data => process.stderr.write(`[server:${label}] ${data}`));
+	return child;
+}
+
+export async function waitForServer(baseUrl: string, child: ChildProcessWithoutNullStreams) {
+	const startedAt = Date.now();
+	while (Date.now() - startedAt < 120_000) {
+		if (child.exitCode != null) throw new Error(`Misskey server exited early with code ${child.exitCode}`);
+		try {
+			const response = await fetch(`${baseUrl}/`, { redirect: 'manual' });
+			if (response.status < 500) return;
+		} catch {
+			// retry
+		}
+		await sleep(1_000);
+	}
+	throw new Error(`Timed out waiting for ${baseUrl}`);
+}
+
+export async function api(baseUrl: string, endpoint: string, body: Record<string, unknown>) {
+	const response = await fetch(`${baseUrl}/api/${endpoint}`, {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+		},
+		body: JSON.stringify(body),
+	});
+	if (!response.ok) {
+		throw new Error(`/api/${endpoint} returned ${response.status}: ${await response.text()}`);
+	}
+	if (response.status === 204) return null;
+	return await response.json();
+}
+
+export async function prepareInstance(baseUrl: string) {
+	await api(baseUrl, 'reset-db', {});
+	await api(baseUrl, 'admin/accounts/create', {
+		username: 'admin',
+		password: 'admin1234',
+		setupPassword: 'example_password_please_change_this_or_you_will_get_hacked',
+	});
+}
+
+export async function stopServer(child: ChildProcessWithoutNullStreams) {
+	if (child.exitCode != null) return;
+
+	if (process.platform === 'win32') {
+		spawnSync('taskkill', ['/pid', String(child.pid), '/t', '/f'], { stdio: 'ignore' });
+	} else if (child.pid != null) {
+		try {
+			process.kill(-child.pid, 'SIGTERM');
+		} catch {
+			child.kill('SIGTERM');
+		}
+	}
+
+	await new Promise<void>(resolvePromise => {
+		if (child.exitCode != null) {
+			resolvePromise();
+			return;
+		}
+		child.once('exit', () => resolvePromise());
+		setTimeout(() => {
+			if (child.pid != null) {
+				try {
+					if (process.platform === 'win32') {
+						spawnSync('taskkill', ['/pid', String(child.pid), '/t', '/f'], { stdio: 'ignore' });
+					} else {
+						process.kill(-child.pid, 'SIGKILL');
+					}
+				} catch {
+					child.kill('SIGKILL');
+				}
+			}
+			resolvePromise();
+		}, 10_000).unref();
+	});
+}

.github/workflows/frontend-browser-metrics-report-comment.yml

@@ -0,0 +1,44 @@
+name: frontend-browser-metrics-report-comment
+
+on:
+  workflow_run:
+    workflows:
+      - frontend-browser-metrics-report
+    types:
+      - completed
+
+permissions:
+  actions: read
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  comment:
+    name: Comment frontend browser metrics report
+    if: github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success'
+    runs-on: ubuntu-latest
+    concurrency:
+      group: frontend-browser-metrics-report-comment-${{ github.event.workflow_run.id }}
+      cancel-in-progress: true
+    steps:
+      - name: Download browser metrics report
+        uses: actions/download-artifact@v8
+        with:
+          name: frontend-browser-metrics-report
+          path: ${{ runner.temp }}/frontend-browser-metrics-report
+          github-token: ${{ github.token }}
+          repository: ${{ github.repository }}
+          run-id: ${{ github.event.workflow_run.id }}
+
+      - name: Load PR number
+        id: load-pr-number
+        shell: bash
+        run: echo "pr-number=$(cat "$RUNNER_TEMP/frontend-browser-metrics-report/pr-number.txt")" >> "$GITHUB_OUTPUT"
+
+      - name: Comment on pull request
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          pr-number: ${{ steps.load-pr-number.outputs.pr-number }}
+          comment-tag: frontend_browser_metrics_report
+          file-path: ${{ runner.temp }}/frontend-browser-metrics-report/frontend-browser-metrics-report.md

.github/workflows/frontend-browser-metrics-report.yml

@@ -0,0 +1,194 @@
+name: frontend-browser-metrics-report
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - ready_for_review
+    paths:
+      - packages/frontend/**
+      - packages/frontend-shared/**
+      - packages/frontend-builder/**
+      - packages/backend/**
+      - packages/i18n/**
+      - packages/icons-subsetter/**
+      - packages/misskey-js/**
+      - packages/misskey-reversi/**
+      - packages/misskey-bubble-game/**
+      - package.json
+      - pnpm-lock.yaml
+      - pnpm-workspace.yaml
+      - .node-version
+      - .github/misskey/test.yml
+      - .github/scripts/utility.mts
+      - .github/scripts/frontend-browser-detailed-html.mts
+      - .github/scripts/frontend-browser-report.mts
+      - .github/scripts/heap-snapshot-util.mts
+      - .github/scripts/measure-frontend-browser-comparison.mts
+      - .github/workflows/frontend-browser-metrics-report.yml
+      - .github/workflows/frontend-browser-metrics-report-comment.yml
+
+permissions:
+  contents: read
+  pull-requests: read
+
+concurrency:
+  group: frontend-browser-metrics-report-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  report:
+    name: Measure frontend browser metrics
+    runs-on: ubuntu-latest
+    timeout-minutes: 90
+
+    services:
+      postgres:
+        image: postgres:18
+        ports:
+          - 54312:5432
+        env:
+          POSTGRES_DB: test-misskey
+          POSTGRES_HOST_AUTH_METHOD: trust
+      redis:
+        image: redis:8
+        ports:
+          - 56312:6379
+
+    steps:
+      - name: Checkout base
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.event.pull_request.base.repo.full_name }}
+          ref: ${{ github.event.pull_request.base.sha }}
+          path: before
+          submodules: true
+
+      - name: Checkout pull request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: after
+          submodules: true
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v6.0.3
+        with:
+          package_json_file: after/package.json
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6.4.0
+        with:
+          node-version-file: after/.node-version
+          cache: pnpm
+          cache-dependency-path: |
+            before/pnpm-lock.yaml
+            after/pnpm-lock.yaml
+
+      - name: Install dependencies for base
+        working-directory: before
+        run: pnpm i --frozen-lockfile
+
+      - name: Configure base
+        working-directory: before
+        run: cp .github/misskey/test.yml .config
+
+      - name: Build base
+        working-directory: before
+        run: pnpm build
+
+      - name: Install dependencies for pull request
+        working-directory: after
+        run: pnpm i --frozen-lockfile
+
+      - name: Configure pull request
+        working-directory: after
+        run: cp .github/misskey/test.yml .config
+
+      - name: Build pull request
+        working-directory: after
+        run: pnpm build
+
+      - name: Measure frontend browser metrics
+        shell: bash
+        env:
+          FRONTEND_BROWSER_METRICS_SAMPLE_COUNT: 5
+          FRONTEND_BROWSER_METRICS_SCENARIO_TIMEOUT_MS: 120000
+          FRONTEND_BROWSER_METRICS_SETTLE_MS: 1000
+        run: |
+          REPORT_DIR="$RUNNER_TEMP/frontend-browser-metrics-report"
+          mkdir -p "$REPORT_DIR"
+          node after/.github/scripts/measure-frontend-browser-comparison.mts before after "$REPORT_DIR/before-browser.json" "$REPORT_DIR/after-browser.json" "$REPORT_DIR/head-heap-snapshot.heapsnapshot"
+
+      - name: Upload browser head heap snapshot
+        id: upload-browser-head-heap-snapshot
+        uses: actions/upload-artifact@v7
+        with:
+          name: frontend-browser-metrics-head-heap-snapshot
+          path: ${{ runner.temp }}/frontend-browser-metrics-report/head-heap-snapshot.heapsnapshot
+          if-no-files-found: error
+          retention-days: 7
+
+      - name: Generate browser detailed html
+        shell: bash
+        run: |
+          REPORT_DIR="$RUNNER_TEMP/frontend-browser-metrics-report"
+          test -s "$REPORT_DIR/before-browser.json"
+          test -s "$REPORT_DIR/after-browser.json"
+          node after/.github/scripts/frontend-browser-detailed-html.mts "$REPORT_DIR/before-browser.json" "$REPORT_DIR/after-browser.json" "$REPORT_DIR/frontend-browser-detailed-html.html"
+
+      - name: Upload browser detailed html
+        id: upload-browser-detailed-html
+        uses: actions/upload-artifact@v7
+        with:
+          name: frontend-browser-metrics-detailed-html
+          path: ${{ runner.temp }}/frontend-browser-metrics-report/frontend-browser-detailed-html.html
+          if-no-files-found: error
+          archive: false
+          retention-days: 7
+
+      - name: Generate browser metrics report
+        shell: bash
+        env:
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          FRONTEND_BROWSER_HEAD_HEAP_SNAPSHOT_ARTIFACT_URL: ${{ steps.upload-browser-head-heap-snapshot.outputs.artifact-url }}
+          FRONTEND_BROWSER_DETAILED_HTML_ARTIFACT_URL: ${{ steps.upload-browser-detailed-html.outputs.artifact-url }}
+        run: |
+          REPORT_DIR="$RUNNER_TEMP/frontend-browser-metrics-report"
+          test -s "$REPORT_DIR/before-browser.json"
+          test -s "$REPORT_DIR/after-browser.json"
+          node after/.github/scripts/frontend-browser-report.mts "$REPORT_DIR/before-browser.json" "$REPORT_DIR/after-browser.json" "$REPORT_DIR/frontend-browser-metrics-report.md"
+          printf '%s\n' "$PR_NUMBER" > "$REPORT_DIR/pr-number.txt"
+          printf '%s\n' "$BASE_SHA" > "$REPORT_DIR/base-sha.txt"
+          printf '%s\n' "$HEAD_SHA" > "$REPORT_DIR/head-sha.txt"
+          printf '%s\n' "${{ github.event.pull_request.html_url }}" > "$REPORT_DIR/pr-url.txt"
+
+      - name: Check browser metrics report
+        shell: bash
+        run: |
+          REPORT_DIR="$RUNNER_TEMP/frontend-browser-metrics-report"
+          test -s "$REPORT_DIR/frontend-browser-metrics-report.md"
+          test -s "$REPORT_DIR/frontend-browser-detailed-html.html"
+          test -s "$REPORT_DIR/pr-number.txt"
+          test -s "$REPORT_DIR/head-sha.txt"
+          cat "$REPORT_DIR/frontend-browser-metrics-report.md" >> "$GITHUB_STEP_SUMMARY"
+
+      - name: Upload browser metrics report
+        uses: actions/upload-artifact@v7
+        with:
+          name: frontend-browser-metrics-report
+          path: |
+            ${{ runner.temp }}/frontend-browser-metrics-report/before-browser.json
+            ${{ runner.temp }}/frontend-browser-metrics-report/after-browser.json
+            ${{ runner.temp }}/frontend-browser-metrics-report/frontend-browser-metrics-report.md
+            ${{ runner.temp }}/frontend-browser-metrics-report/pr-number.txt
+            ${{ runner.temp }}/frontend-browser-metrics-report/base-sha.txt
+            ${{ runner.temp }}/frontend-browser-metrics-report/head-sha.txt
+            ${{ runner.temp }}/frontend-browser-metrics-report/pr-url.txt
+          if-no-files-found: error
+          retention-days: 7

.github/workflows/lint.yml

@@ -17,7 +17,9 @@ on:
       - packages/misskey-bubble-game/**
       - packages/misskey-reversi/**
       - packages/shared/eslint.config.js
+      - scripts/check-dts*.mjs
       - .github/workflows/lint.yml
+      - package.json
   pull_request:
     paths:
       - packages/backend/**
@@ -31,7 +33,9 @@ on:
       - packages/misskey-bubble-game/**
       - packages/misskey-reversi/**
       - packages/shared/eslint.config.js
+      - scripts/check-dts*.mjs
       - .github/workflows/lint.yml
+      - package.json
 jobs:
   pnpm_install:
     runs-on: ubuntu-latest
@@ -113,3 +117,22 @@ jobs:
     - run: pnpm i --frozen-lockfile
     - run: pnpm --filter "${{ matrix.workspace }}^..." run build
     - run: pnpm --filter ${{ matrix.workspace }} run typecheck
+
+  check-dts:
+    needs: [pnpm_install]
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    steps:
+    - uses: actions/checkout@v6.0.2
+      with:
+        fetch-depth: 0
+        submodules: true
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v6.0.3
+    - uses: actions/setup-node@v6.4.0
+      with:
+        node-version-file: '.node-version'
+        cache: 'pnpm'
+    - run: pnpm i --frozen-lockfile
+    - run: node --test scripts/check-dts.test.mjs
+    - run: pnpm check-dts

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2026.6.1-alpha.1",
+	"version": "2026.7.0-alpha.0",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
@@ -39,7 +39,8 @@
 		"migrateandstart": "pnpm migrate && pnpm start",
 		"watch": "pnpm dev",
 		"dev": "node scripts/dev.mjs",
-		"lint": "pnpm --no-bail -r lint",
+		"check-dts": "node scripts/check-dts.mjs",
+		"lint": "pnpm --no-bail -r lint && pnpm check-dts",
 		"cy:open": "pnpm cypress open --config-file=cypress.config.ts",
 		"cy:run": "pnpm cypress run",
 		"e2e": "pnpm start-server-and-test start:test http://localhost:61812 cy:run",

packages/backend/scripts/measure-memory.mts

@@ -10,7 +10,7 @@ import { dirname, join } from 'node:path';
 import { tmpdir } from 'node:os';
 //import * as http from 'node:http';
 import * as fs from 'node:fs/promises';
-import { heapSnapshotCategory, type HeapSnapshotData } from '../../../.github/scripts/heap-snapshot-util.mts';
+import { analyzeHeapSnapshot, defaultHeapSnapshotBreakdownTopN, type HeapSnapshotData } from '../../../.github/scripts/heap-snapshot-util.mts';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -40,7 +40,7 @@ const IPC_TIMEOUT = readIntegerEnv('MK_MEMORY_IPC_TIMEOUT_MS', 30000, 1); // Tim
 const REQUEST_COUNT = readIntegerEnv('MK_MEMORY_REQUEST_COUNT', 10, 0);
 const HEAP_SNAPSHOT = readBooleanEnv('MK_MEMORY_HEAP_SNAPSHOT', false);
 const HEAP_SNAPSHOT_TIMEOUT = readIntegerEnv('MK_MEMORY_HEAP_SNAPSHOT_TIMEOUT_MS', 120000, 1);
-const HEAP_SNAPSHOT_BREAKDOWN_TOP_N = readIntegerEnv('MK_MEMORY_HEAP_SNAPSHOT_BREAKDOWN_TOP_N', 6, 1);
+const HEAP_SNAPSHOT_BREAKDOWN_TOP_N = readIntegerEnv('MK_MEMORY_HEAP_SNAPSHOT_BREAKDOWN_TOP_N', defaultHeapSnapshotBreakdownTopN, 1);
 const HEAP_SNAPSHOT_SAVE_PATH = process.env.MK_MEMORY_HEAP_SNAPSHOT_SAVE_PATH;
 
 const procStatusKeys = ['VmPeak', 'VmSize', 'VmHWM', 'VmRSS', 'VmData', 'VmStk', 'VmExe', 'VmLib', 'VmPTE', 'VmSwap'] as const;
@@ -79,246 +79,6 @@ function bytesToKiB(value: number) {
 	return Math.round(value / 1024);
 }
 
-function sanitizeHeapSnapshotBreakdownLabel(value, fallback = 'unknown') {
-	const label = String(value ?? '').replace(/\s+/g, ' ').trim();
-	if (label === '') return fallback;
-	if (label.length <= 80) return label;
-	return `${label.slice(0, 77)}...`;
-}
-
-function classifyHeapSnapshotBreakdown(category: keyof typeof heapSnapshotCategory, type, name) {
-	if (category === 'strings') return type;
-
-	if (category === 'jsArrays') {
-		if (type === 'array elements') return 'Array elements';
-		if (type === 'object' && name === 'Array') return 'Array objects';
-		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`);
-	}
-
-	if (category === 'typedArrays') {
-		if (name === 'system / JSArrayBufferData') return 'ArrayBuffer data';
-		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`);
-	}
-
-	if (category === 'systemObjects') {
-		if (name.startsWith('system /')) return sanitizeHeapSnapshotBreakdownLabel(name);
-		if (name.startsWith('(system ')) return sanitizeHeapSnapshotBreakdownLabel(name);
-		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`, type);
-	}
-
-	if (category === 'otherJsObjects') {
-		if (type === 'object') return sanitizeHeapSnapshotBreakdownLabel(`object: ${name}`, 'object: unknown');
-		return type;
-	}
-
-	if (category === 'otherNonJsObjects') {
-		if (type === 'extra native bytes') return 'Extra native bytes';
-		if (type === 'native') return sanitizeHeapSnapshotBreakdownLabel(`native: ${name}`, 'native: unknown');
-		return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`, type);
-	}
-
-	if (category === 'code') {
-		const lowerName = name.toLowerCase();
-		if (lowerName.includes('bytecode')) return 'bytecode';
-		if (lowerName.includes('builtin')) return 'builtins';
-		if (lowerName.includes('regexp')) return 'regexp code';
-		if (lowerName.includes('stub')) return 'stubs';
-		return sanitizeHeapSnapshotBreakdownLabel(`code: ${name}`, 'code: unknown');
-	}
-
-	return sanitizeHeapSnapshotBreakdownLabel(`${type}: ${name}`, type);
-}
-
-function collapseHeapSnapshotBreakdown(breakdowns: Record<string, Record<string, number>>) {
-	const collapsed = {} as Record<string, Record<string, number>>;
-
-	for (const [category, children] of Object.entries(breakdowns)) {
-		const entries = Object.entries(children)
-			.filter(([, value]) => value > 0)
-			.toSorted((a, b) => b[1] - a[1]);
-
-		const topEntries = entries.slice(0, HEAP_SNAPSHOT_BREAKDOWN_TOP_N);
-		const otherValue = entries
-			.slice(HEAP_SNAPSHOT_BREAKDOWN_TOP_N)
-			.reduce((sum, [, value]) => sum + value, 0);
-
-		const categoryBreakdown = Object.fromEntries(topEntries);
-		if (otherValue > 0) categoryBreakdown.Other = otherValue;
-		if (Object.keys(categoryBreakdown).length > 0) collapsed[category] = categoryBreakdown;
-	}
-
-	return collapsed;
-}
-
-// Keep these buckets aligned with Chrome DevTools' heap snapshot Statistics view.
-function analyzeHeapSnapshot(snapshot) {
-	const meta = snapshot?.snapshot?.meta;
-	const nodes = snapshot?.nodes;
-	const edges = snapshot?.edges;
-	const strings = snapshot?.strings;
-	if (meta == null || !Array.isArray(nodes) || !Array.isArray(edges) || !Array.isArray(strings)) {
-		throw new Error('Invalid heap snapshot format');
-	}
-
-	const nodeFields = meta.node_fields;
-	if (!Array.isArray(nodeFields)) throw new Error('Invalid heap snapshot node fields');
-	const edgeFields = meta.edge_fields;
-	if (!Array.isArray(edgeFields)) throw new Error('Invalid heap snapshot edge fields');
-
-	const typeOffset = nodeFields.indexOf('type');
-	const nameOffset = nodeFields.indexOf('name');
-	const selfSizeOffset = nodeFields.indexOf('self_size');
-	const edgeCountOffset = nodeFields.indexOf('edge_count');
-	if (typeOffset < 0 || nameOffset < 0 || selfSizeOffset < 0 || edgeCountOffset < 0) {
-		throw new Error('Heap snapshot is missing required node fields');
-	}
-	const edgeTypeOffset = edgeFields.indexOf('type');
-	const edgeNameOffset = edgeFields.indexOf('name_or_index');
-	const edgeToNodeOffset = edgeFields.indexOf('to_node');
-	if (edgeTypeOffset < 0 || edgeNameOffset < 0 || edgeToNodeOffset < 0) {
-		throw new Error('Heap snapshot is missing required edge fields');
-	}
-
-	const nodeTypeNames = meta.node_types?.[typeOffset];
-	if (!Array.isArray(nodeTypeNames)) throw new Error('Invalid heap snapshot node types');
-	const edgeTypeNames = meta.edge_types?.[edgeTypeOffset];
-	if (!Array.isArray(edgeTypeNames)) throw new Error('Invalid heap snapshot edge types');
-
-	function createEmptyHeapSnapshotCategoryMap() {
-		return Object.fromEntries(Object.keys(heapSnapshotCategory).map(category => [category, 0])) as Record<keyof typeof heapSnapshotCategory, number>;
-	}
-
-	const nodeFieldCount = nodeFields.length;
-	const edgeFieldCount = edgeFields.length;
-	const nativeType = nodeTypeNames.indexOf('native');
-	const codeType = nodeTypeNames.indexOf('code');
-	const hiddenType = nodeTypeNames.indexOf('hidden');
-	const stringTypes = new Set([
-		nodeTypeNames.indexOf('string'),
-		nodeTypeNames.indexOf('concatenated string'),
-		nodeTypeNames.indexOf('sliced string'),
-	]);
-	const internalEdgeType = edgeTypeNames.indexOf('internal');
-	const extraNativeBytes = Number.isFinite(snapshot.snapshot.extra_native_bytes) ? snapshot.snapshot.extra_native_bytes : 0;
-	const categories = createEmptyHeapSnapshotCategoryMap();
-	const nodeCounts = createEmptyHeapSnapshotCategoryMap();
-	const breakdowns = Object.fromEntries(
-		(Object.keys(heapSnapshotCategory) as (keyof typeof heapSnapshotCategory)[])
-			.filter(category => category !== 'total')
-			.map(category => [category, {}]),
-	);
-
-	function addValue(map: Record<string, number>, key: string, value: number) {
-		map[key] = (map[key] ?? 0) + value;
-	}
-
-	const edgeStartIndexes = new Map<number, number>();
-	const retainerCounts = new Map<number, number>();
-	let edgeIndex = 0;
-	for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
-		edgeStartIndexes.set(nodeIndex, edgeIndex);
-		const edgeCount = nodes[nodeIndex + edgeCountOffset] ?? 0;
-		for (let i = 0; i < edgeCount; i++, edgeIndex += edgeFieldCount) {
-			const toNodeIndex = edges[edgeIndex + edgeToNodeOffset];
-			retainerCounts.set(toNodeIndex, (retainerCounts.get(toNodeIndex) ?? 0) + 1);
-		}
-	}
-
-	const jsArrayElementNodeIndexes = new Set<number>();
-
-	function addCategoryValue(category: keyof typeof heapSnapshotCategory, value: number, type: string, name: string, nodeIndex: number | null = null) {
-		if (value <= 0) return;
-		categories[category] += value;
-		addValue(breakdowns[category], classifyHeapSnapshotBreakdown(category, type, name), value);
-		if (nodeIndex != null) nodeCounts[category]++;
-	}
-
-	function addJsArrayElementSize(nodeIndex: number) {
-		const beginEdgeIndex = edgeStartIndexes.get(nodeIndex) ?? 0;
-		const edgeCount = nodes[nodeIndex + edgeCountOffset] ?? 0;
-		for (let i = 0, currentEdgeIndex = beginEdgeIndex; i < edgeCount; i++, currentEdgeIndex += edgeFieldCount) {
-			const edgeType = edges[currentEdgeIndex + edgeTypeOffset];
-			if (edgeType !== internalEdgeType) continue;
-
-			const edgeName = strings[edges[currentEdgeIndex + edgeNameOffset]];
-			if (edgeName !== 'elements') continue;
-
-			const elementsNodeIndex = edges[currentEdgeIndex + edgeToNodeOffset];
-			if ((retainerCounts.get(elementsNodeIndex) ?? 0) === 1) {
-				const elementsSize = nodes[elementsNodeIndex + selfSizeOffset] ?? 0;
-				addCategoryValue('jsArrays', elementsSize, 'array elements', 'Array elements', elementsNodeIndex);
-				jsArrayElementNodeIndexes.add(elementsNodeIndex);
-			}
-			break;
-		}
-	}
-
-	if (extraNativeBytes > 0) {
-		addCategoryValue('otherNonJsObjects', extraNativeBytes, 'extra native bytes', 'extra native bytes');
-	}
-
-	for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
-		const typeId = nodes[nodeIndex + typeOffset];
-		const type = nodeTypeNames[typeId] ?? 'unknown';
-		const name = strings[nodes[nodeIndex + nameOffset]] ?? '';
-		const selfSize = nodes[nodeIndex + selfSizeOffset] ?? 0;
-		categories.total += selfSize;
-		nodeCounts.total++;
-
-		if (typeId === hiddenType) {
-			addCategoryValue('systemObjects', selfSize, type, name, nodeIndex);
-			continue;
-		}
-
-		if (typeId === nativeType) {
-			if (name === 'system / JSArrayBufferData') {
-				addCategoryValue('typedArrays', selfSize, type, name, nodeIndex);
-			} else {
-				addCategoryValue('otherNonJsObjects', selfSize, type, name, nodeIndex);
-			}
-			continue;
-		}
-
-		if (typeId === codeType) {
-			addCategoryValue('code', selfSize, type, name, nodeIndex);
-			continue;
-		}
-
-		if (stringTypes.has(typeId)) {
-			addCategoryValue('strings', selfSize, type, name, nodeIndex);
-			continue;
-		}
-
-		if (name === 'Array') {
-			addCategoryValue('jsArrays', selfSize, type, name, nodeIndex);
-			addJsArrayElementSize(nodeIndex);
-			continue;
-		}
-	}
-
-	categories.total += extraNativeBytes;
-
-	for (let nodeIndex = 0; nodeIndex < nodes.length; nodeIndex += nodeFieldCount) {
-		if (jsArrayElementNodeIndexes.has(nodeIndex)) continue;
-
-		const typeId = nodes[nodeIndex + typeOffset];
-		if (typeId === hiddenType || typeId === nativeType || typeId === codeType || stringTypes.has(typeId)) continue;
-
-		const name = strings[nodes[nodeIndex + nameOffset]] ?? '';
-		if (name === 'Array') continue;
-
-		const type = nodeTypeNames[typeId] ?? 'unknown';
-		const selfSize = nodes[nodeIndex + selfSizeOffset] ?? 0;
-		addCategoryValue('otherJsObjects', selfSize, type, name, nodeIndex);
-	}
-
-	return {
-		categories,
-		nodeCounts,
-		breakdowns: collapseHeapSnapshotBreakdown(breakdowns),
-	};
-}
-
 async function getMemoryUsage(pid: number) {
 	const path = `/proc/${pid}/status`;
 	const status = await fs.readFile(path, 'utf-8');
@@ -417,7 +177,7 @@ async function getHeapSnapshotStatistics(serverProcess: ChildProcess): Promise<H
 		}
 
 		const snapshot = JSON.parse(await fs.readFile(writtenPath, 'utf-8'));
-		return analyzeHeapSnapshot(snapshot);
+		return analyzeHeapSnapshot(snapshot, { breakdownTopN: HEAP_SNAPSHOT_BREAKDOWN_TOP_N });
 	} finally {
 		await fs.unlink(writtenPath).catch(err => {
 			process.stderr.write(`Failed to delete heap snapshot ${writtenPath}: ${err.message}\n`);

packages/backend/src/@types/probe-image-size.d.ts

@@ -26,7 +26,6 @@ declare module 'probe-image-size' {
 	function probeImageSize(src: string | ReadStream, callback: (err: Error | null, result?: ProbeResult) => void): void;
 	function probeImageSize(src: string | ReadStream, options: ProbeOptions, callback: (err: Error | null, result?: ProbeResult) => void): void;
 
-	namespace probeImageSize {} // Hack
-
-	export = probeImageSize;
+	// eslint-disable-next-line import/no-default-export
+	export { probeImageSize as default };
 }

packages/backend/test/setup.e2e.ts

@@ -7,6 +7,9 @@ import { beforeAll } from 'vitest';
 import { initTestDb, sendEnvResetRequest } from './utils.js';
 
 beforeAll(async () => {
-	await initTestDb(false);
+	// 前ファイルのNestJSアプリをdispose(env-reset)した後にスキーマをdrop & 再作成する。
+	// 逆順だと、前ファイルの最後のテストが投げっぱなしにした非同期処理(cacheServiceのrefresh等)が
+	// dispose前のdrop中に発火し、Unhandled Rejection (relation does not exist) でクラッシュしうる。
 	await sendEnvResetRequest();
+	await initTestDb(false);
 });

packages/frontend-builder/tsconfig.json

@@ -9,6 +9,7 @@
 		"sourceMap": false,
 		"noEmit": true,
 		"removeComments": true,
+		"skipLibCheck": true,
 		"resolveJsonModule": true,
 		"strict": true,
 		"strictFunctionTypes": true,

packages/frontend-embed/@types/theme.d.ts

@@ -4,7 +4,7 @@
  */
 
 declare module '@@/themes/*.json5' {
-	import { Theme } from '@/theme.js';
+	import { Theme } from '@@/js/theme.js';
 
 	const theme: Theme;
 

packages/frontend-embed/tsconfig.json

@@ -13,6 +13,7 @@
 		"module": "ES2022",
 		"moduleResolution": "Bundler",
 		"removeComments": false,
+		"skipLibCheck": true,
 		"noLib": false,
 		"strict": true,
 		"strictNullChecks": true,

packages/frontend-shared/tsconfig.json

@@ -9,6 +9,7 @@
 		"sourceMap": false,
 		"outDir": "./js-built",
 		"removeComments": true,
+		"skipLibCheck": true,
 		"resolveJsonModule": true,
 		"strict": true,
 		"strictFunctionTypes": true,

packages/frontend/@types/theme.d.ts

@@ -4,7 +4,7 @@
  */
 
 declare module '@@/themes/*.json5' {
-	import { Theme } from '@/theme.js';
+	import { Theme } from '@@/js/theme.js';
 
 	const theme: Theme;
 

packages/frontend/src/components/MkNote.vue

@@ -144,7 +144,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<button v-else :class="$style.footerButton" class="_button" disabled>
 					<i class="ti ti-ban"></i>
 				</button>
-				<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">
+				<button ref="reactButton" :class="$style.footerButton" class="_button" @click="handleToggleReact()">
 					<i v-if="appearNote.reactionAcceptance === 'likeOnly' && $appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
 					<i v-else-if="$appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
 					<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
@@ -192,58 +192,38 @@ SPDX-License-Identifier: AGPL-3.0-only
 		MkDateSeparatedList uses TransitionGroup which requires single element in the child elements
 		so MkNote create empty div instead of no elements
 	-->
-</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, useTemplateRef, provide } from 'vue';
-import * as mfm from 'mfm-js';
-import * as Misskey from 'misskey-js';
-import { isLink } from '@@/js/is-link.js';
-import { shouldCollapsed } from '@@/js/collapsed.js';
-import { host } from '@@/js/config.js';
+import { inject, ref, useTemplateRef, provide, computed } from 'vue';
 import type { Ref } from 'vue';
-import type { MenuItem } from '@/types/menu.js';
-import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
+import * as Misskey from 'misskey-js';
+import { $i } from '@/i.js';
+import { useNote } from '@/composables/use-note.js';
+import { prefer } from '@/preferences.js';
+import { i18n } from '@/i18n.js';
+import { userPage } from '@/filters/user.js';
+import { noteEvents } from '@/composables/use-note-capture.js';
+import { getNoteSummary } from '@/utility/get-note-summary.js';
+import { isEnabledUrlPreview } from '@/utility/url-preview.js';
+import { focusPrev, focusNext } from '@/utility/focus.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import number from '@/filters/number.js';
+import * as sound from '@/utility/sound.js';
+import { DI } from '@/di.js';
 import type { Keymap } from '@/utility/hotkey.js';
+
+// コンポーネント外部の依存関係
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
-import MkReactionsViewerDetails from '@/components/MkReactionsViewer.details.vue';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import MkPoll from '@/components/MkPoll.vue';
-import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import { pleaseLogin } from '@/utility/please-login.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
-import { notePage } from '@/filters/note.js';
-import { userPage } from '@/filters/user.js';
-import number from '@/filters/number.js';
-import * as os from '@/os.js';
-import * as sound from '@/utility/sound.js';
-import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
-import { reactionPicker } from '@/utility/reaction-picker.js';
-import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
-import { $i } from '@/i.js';
-import { i18n } from '@/i18n.js';
-import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
-import { noteEvents, useNoteCapture } from '@/composables/use-note-capture.js';
-import { deepClone } from '@/utility/clone.js';
-import { useTooltip } from '@/composables/use-tooltip.js';
-import { claimAchievement } from '@/utility/achievements.js';
-import { getNoteSummary } from '@/utility/get-note-summary.js';
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
-import { showMovedDialog } from '@/utility/show-moved-dialog.js';
-import { isEnabledUrlPreview } from '@/utility/url-preview.js';
-import { focusPrev, focusNext } from '@/utility/focus.js';
-import { getAppearNote } from '@/utility/get-appear-note.js';
-import { prefer } from '@/preferences.js';
-import { getPluginHandlers } from '@/plugin.js';
-import { DI } from '@/di.js';
-import { globalEvents } from '@/events.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -254,48 +234,21 @@ const props = withDefaults(defineProps<{
 	mock: false,
 });
 
-provide(DI.mock, props.mock);
-
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
 	(ev: 'removeReaction', emoji: string): void;
 }>();
 
+provide(DI.mock, props.mock);
+
+// 周辺コンテキストのインジェクト
 const inTimeline = inject<boolean>('inTimeline', false);
 const tl_withSensitive = inject<Ref<boolean>>('tl_withSensitive', ref(true));
 const inChannel = inject(DI.inChannel, null);
 const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
 const currentAntenna = inject<Ref<Misskey.entities.Antenna | null> | null>('currentAntenna', null);
 
-let note = deepClone(props.note);
-
-// plugin
-const noteViewInterruptors = getPluginHandlers('note_view_interruptor');
-const hideByPlugin = ref(false);
-if (noteViewInterruptors.length > 0) {
-	let result: Misskey.entities.Note | null = deepClone(note);
-	for (const interruptor of noteViewInterruptors) {
-		try {
-			result = interruptor.handler(result!) as Misskey.entities.Note | null;
-		} catch (err) {
-			console.error(err);
-		}
-	}
-	if (result == null) {
-		hideByPlugin.value = true;
-	} else {
-		note = result as Misskey.entities.Note;
-	}
-}
-
-const isRenote = Misskey.note.isPureRenote(note);
-const appearNote = getAppearNote(note) ?? note;
-const { $note: $appearNote, subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
-	note: appearNote,
-	parentNote: note,
-	mock: props.mock,
-});
-
+// Template Refsの定義
 const rootEl = useTemplateRef('rootEl');
 const menuButton = useTemplateRef('menuButton');
 const renoteButton = useTemplateRef('renoteButton');
@@ -303,64 +256,80 @@ const renoteTime = useTemplateRef('renoteTime');
 const reactButton = useTemplateRef('reactButton');
 const clipButton = useTemplateRef('clipButton');
 const galleryEl = useTemplateRef('galleryEl');
-const isMyRenote = $i && ($i.id === note.userId);
-const showContent = ref(false);
-const parsed = computed(() => appearNote.text ? mfm.parse(appearNote.text) : null);
-const urls = computed(() => parsed.value ? extractUrlFromMfm(parsed.value).filter((url) => appearNote.renote?.url !== url && appearNote.renote?.uri !== url) : null);
-const isLong = shouldCollapsed(appearNote, urls.value ?? []);
-const collapsed = ref(appearNote.cw == null && isLong);
-const muted = ref(checkMute(appearNote, $i?.mutedWords));
-const hardMuted = ref(props.withHardMute && checkMute(appearNote, $i?.hardMutedWords, true));
+
+// コンポーサブルの呼び出し
+const {
+	note,
+	appearNote,
+	$appearNote,
+	hideByPlugin,
+	isRenote,
+	showContent,
+	translating,
+	translation,
+	muted,
+	hardMuted,
+	collapsed,
+	renoteCollapsed,
+	parsed,
+	urls,
+	isLong,
+	showTicker,
+	canRenote,
+
+	renote,
+	reply,
+	react,
+	reactViaMfmEmoji,
+	toggleReact,
+	onContextmenu,
+	showMenu,
+	clip,
+	showRenoteMenu,
+	blur,
+} = useNote(props, {
+	rootEl,
+	menuButton,
+	renoteButton,
+	renoteTime,
+	reactButton,
+	clipButton,
+}, {
+	inTimeline,
+	tl_withSensitive,
+	inChannel,
+	currentClip,
+	currentAntenna,
+});
+
+// provide
+provide(DI.mfmEmojiReactCallback, reactViaMfmEmoji);
+
+// MkNote固有
 const showSoftWordMutedWord = computed(() => prefer.s.showSoftWordMutedWord);
-const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
-const translating = ref(false);
-const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.user.instance);
-const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || (appearNote.visibility === 'followers' && appearNote.userId === $i?.id));
-const renoteCollapsed = ref(
-	prefer.s.collapseRenotes && isRenote && (
-		($i && ($i.id === note.userId || $i.id === appearNote.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
-		($appearNote.myReaction != null)
-	),
-);
 
-const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
-	type: 'lookup',
-	url: `https://${host}/notes/${appearNote.id}`,
-}));
-
-/* eslint-disable no-redeclare */
-/** checkOnlyでは純粋なワードミュート結果をbooleanで返却する */
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean;
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly?: false): Array<string | string[]> | false | 'sensitiveMute';
-
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly = false): Array<string | string[]> | boolean | 'sensitiveMute' {
-	if (mutedWords != null) {
-		const result = checkWordMute(noteToCheck, $i, mutedWords);
-		if (Array.isArray(result)) {
-			return checkOnly ? (result.length > 0) : result;
+function handleToggleReact() {
+	toggleReact((reaction) => {
+		if ($appearNote.myReaction === reaction) {
+			emit('removeReaction', reaction);
+		} else {
+			emit('reaction', reaction);
+			$appearNote.reactions[reaction] = 1;
+			$appearNote.reactionCount++;
+			$appearNote.myReaction = reaction;
 		}
-
-		const replyResult = noteToCheck.reply && checkWordMute(noteToCheck.reply, $i, mutedWords);
-		if (Array.isArray(replyResult)) {
-			return checkOnly ? (replyResult.length > 0) : replyResult;
-		}
-
-		const renoteResult = noteToCheck.renote && checkWordMute(noteToCheck.renote, $i, mutedWords);
-		if (Array.isArray(renoteResult)) {
-			return checkOnly ? (renoteResult.length > 0) : renoteResult;
-		}
-	}
-
-	if (checkOnly) return false;
-
-	if (inTimeline && tl_withSensitive.value === false && noteToCheck.files?.some((v) => v.isSensitive)) {
-		return 'sensitiveMute';
-	}
-
-	return false;
+	});
 }
-/* eslint-enable no-redeclare */
 
+function emitUpdReaction(emoji: string, delta: number) {
+	if (delta < 0) {
+		emit('removeReaction', emoji);
+	} else if (delta > 0) {
+		emit('reaction', emoji);
+	}
+}
+
+// キーボードショートカットマップ
 const keymap = {
 	'r': () => {
 		if (renoteCollapsed.value) return;
@@ -392,7 +361,7 @@ const keymap = {
 			renoteCollapsed.value = false;
 		} else if (appearNote.cw != null) {
 			showContent.value = !showContent.value;
-		} else if (isLong) {
+		} else if (isLong.value) {
 			collapsed.value = !collapsed.value;
 		}
 	},
@@ -402,321 +371,13 @@ const keymap = {
 	},
 	'up|k|shift+tab': {
 		allowRepeat: true,
-		callback: () => focusBefore(),
+		callback: () => focusPrev(rootEl.value),
 	},
 	'down|j|tab': {
 		allowRepeat: true,
-		callback: () => focusAfter(),
+		callback: () => focusNext(rootEl.value),
 	},
 } as const satisfies Keymap;
-
-provide(DI.mfmEmojiReactCallback, (reaction) => {
-	sound.playMisskeySfx('reaction');
-	misskeyApi('notes/reactions/create', {
-		noteId: appearNote.id,
-		reaction: reaction,
-	}).then(() => {
-		noteEvents.emit(`reacted:${appearNote.id}`, {
-			userId: $i!.id,
-			reaction: reaction,
-		});
-	});
-});
-
-if (!props.mock) {
-	useTooltip(renoteButton, async (showing) => {
-		const renotes = await misskeyApi('notes/renotes', {
-			noteId: appearNote.id,
-			limit: 11,
-		});
-
-		const users = renotes.map(x => x.user);
-
-		if (users.length < 1 || renoteButton.value == null) return;
-
-		const { dispose } = os.popup(MkUsersTooltip, {
-			showing,
-			users,
-			count: appearNote.renoteCount,
-			anchorElement: renoteButton.value,
-		}, {
-			closed: () => dispose(),
-		});
-	});
-
-	if (appearNote.reactionAcceptance === 'likeOnly') {
-		useTooltip(reactButton, async (showing) => {
-			const reactions = await misskeyApiGet('notes/reactions', {
-				noteId: appearNote.id,
-				limit: 10,
-				_cacheKey_: $appearNote.reactionCount,
-			});
-
-			const users = reactions.map(x => x.user);
-
-			if (users.length < 1) return;
-
-			const { dispose } = os.popup(MkReactionsViewerDetails, {
-				showing,
-				reaction: '❤️',
-				users,
-				count: $appearNote.reactionCount,
-				anchorElement: reactButton.value!,
-			}, {
-				closed: () => dispose(),
-			});
-		});
-	}
-}
-
-async function renote() {
-	if (props.mock) return;
-
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	showMovedDialog();
-
-	const { menu } = getRenoteMenu({ note: note, renoteButton, mock: props.mock });
-	os.popupMenu(menu, renoteButton.value);
-
-	subscribeManuallyToNoteCapture();
-}
-
-async function reply() {
-	if (props.mock) return;
-
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	os.post({
-		reply: appearNote,
-		channel: appearNote.channel,
-	}).then(() => {
-		focus();
-	});
-}
-
-async function react() {
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	showMovedDialog();
-	if (appearNote.reactionAcceptance === 'likeOnly') {
-		sound.playMisskeySfx('reaction');
-
-		if (props.mock) {
-			return;
-		}
-
-		misskeyApi('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: '❤️',
-		}).then(() => {
-			noteEvents.emit(`reacted:${appearNote.id}`, {
-				userId: $i!.id,
-				reaction: '❤️',
-			});
-		});
-		const el = reactButton.value;
-		if (el && prefer.s.animation) {
-			const rect = el.getBoundingClientRect();
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
-			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
-				end: () => dispose(),
-			});
-		}
-	} else {
-		blur();
-		reactionPicker.show(reactButton.value ?? null, note, async (reaction) => {
-			if (prefer.s.confirmOnReact) {
-				const confirm = await os.confirm({
-					type: 'question',
-					text: i18n.tsx.reactAreYouSure({ emoji: reaction.replace('@.', '') }),
-				});
-
-				if (confirm.canceled) return;
-			}
-
-			sound.playMisskeySfx('reaction');
-
-			if (props.mock) {
-				emit('reaction', reaction);
-				$appearNote.reactions[reaction] = 1;
-				$appearNote.reactionCount++;
-				$appearNote.myReaction = reaction;
-				return;
-			}
-
-			misskeyApi('notes/reactions/create', {
-				noteId: appearNote.id,
-				reaction: reaction,
-			}).then(() => {
-				noteEvents.emit(`reacted:${appearNote.id}`, {
-					userId: $i!.id,
-					reaction: reaction,
-				});
-			});
-
-			if (appearNote.text && appearNote.text.length > 100 && (Date.now() - new Date(appearNote.createdAt).getTime() < 1000 * 3)) {
-				claimAchievement('reactWithoutRead');
-			}
-		}, () => {
-			focus();
-		});
-	}
-}
-
-function undoReact(): void {
-	const oldReaction = $appearNote.myReaction;
-	if (!oldReaction) return;
-
-	if (props.mock) {
-		emit('removeReaction', oldReaction);
-		return;
-	}
-
-	misskeyApi('notes/reactions/delete', {
-		noteId: appearNote.id,
-	}).then(() => {
-		noteEvents.emit(`unreacted:${appearNote.id}`, {
-			userId: $i!.id,
-			reaction: oldReaction,
-		});
-	});
-}
-
-function toggleReact() {
-	if ($appearNote.myReaction == null) {
-		react();
-	} else {
-		undoReact();
-	}
-}
-
-function onContextmenu(ev: PointerEvent): void {
-	if (props.mock) {
-		return;
-	}
-
-	if (ev.target && isLink(ev.target as HTMLElement)) return;
-	if (window.getSelection()?.toString() !== '') return;
-
-	if (prefer.s.useReactionPickerForContextMenu) {
-		ev.preventDefault();
-		react();
-	} else {
-		const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, currentClip: currentClip?.value, currentAntenna: currentAntenna?.value ?? undefined });
-		os.contextMenu(menu, ev).then(focus).finally(cleanup);
-	}
-}
-
-function showMenu(): void {
-	if (props.mock) {
-		return;
-	}
-
-	const { menu, cleanup } = getNoteMenu({ note: note, translating, translation, currentClip: currentClip?.value, currentAntenna: currentAntenna?.value ?? undefined });
-	os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup);
-}
-
-async function clip(): Promise<void> {
-	if (props.mock) {
-		return;
-	}
-
-	os.popupMenu(await getNoteClipMenu({ note: note, currentClip: currentClip?.value }), clipButton.value).then(focus);
-}
-
-async function showRenoteMenu() {
-	if (props.mock) {
-		return;
-	}
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	function getUnrenote(): MenuItem {
-		return {
-			text: i18n.ts.unrenote,
-			icon: 'ti ti-trash',
-			danger: true,
-			action: () => {
-				misskeyApi('notes/delete', {
-					noteId: note.id,
-				}).then(() => {
-					globalEvents.emit('noteDeleted', note.id);
-				});
-			},
-		};
-	}
-
-	const renoteDetailsMenu: MenuItem[] = [{
-		type: 'link',
-		text: i18n.ts.renoteDetails,
-		icon: 'ti ti-info-circle',
-		to: notePage(note),
-	}];
-
-	if (
-		props.note.channelId != null &&
-		(inChannel == null || props.note.channelId !== inChannel.value)
-	) {
-		renoteDetailsMenu.push({
-			type: 'link',
-			text: i18n.ts.viewRenotedChannel,
-			icon: 'ti ti-device-tv',
-			to: `/channels/${props.note.channelId}`,
-		});
-	}
-
-	if (isMyRenote) {
-		os.popupMenu([
-			...renoteDetailsMenu,
-			getCopyNoteLinkMenu(note, i18n.ts.copyLinkRenote),
-			{ type: 'divider' },
-			getUnrenote(),
-		], renoteTime.value);
-	} else {
-		os.popupMenu([
-			...renoteDetailsMenu,
-			getCopyNoteLinkMenu(note, i18n.ts.copyLinkRenote),
-			{ type: 'divider' },
-			getAbuseNoteMenu(note, i18n.ts.reportAbuseRenote),
-			...(($i?.isModerator || $i?.isAdmin) ? [getUnrenote()] : []),
-		], renoteTime.value);
-	}
-}
-
-function focus() {
-	rootEl.value?.focus();
-}
-
-function blur() {
-	rootEl.value?.blur();
-}
-
-function focusBefore() {
-	focusPrev(rootEl.value);
-}
-
-function focusAfter() {
-	focusNext(rootEl.value);
-}
-
-function readPromo() {
-	misskeyApi('promo/read', {
-		noteId: appearNote.id,
-	});
-}
-
-function emitUpdReaction(emoji: string, delta: number) {
-	if (delta < 0) {
-		emit('removeReaction', emoji);
-	} else if (delta > 0) {
-		emit('reaction', emoji);
-	}
-}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -239,92 +239,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw, provide, ref, useTemplateRef } from 'vue';
-import * as mfm from 'mfm-js';
+import { inject, provide, ref, useTemplateRef, markRaw, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import { isLink } from '@@/js/is-link.js';
-import { host } from '@@/js/config.js';
-import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
+import { useNote } from '@/composables/use-note.js';
+import { prefer } from '@/preferences.js';
+import { i18n } from '@/i18n.js';
+import { userPage } from '@/filters/user.js';
+import { notePage } from '@/filters/note.js';
+import { isEnabledUrlPreview } from '@/utility/url-preview.js';
+import { Paginator } from '@/utility/paginator.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import number from '@/filters/number.js';
+import { DI } from '@/di.js';
 import type { Keymap } from '@/utility/hotkey.js';
-import type { MenuItem } from '@/types/menu.js';
+
+// コンポーネント外部の依存関係
 import MkNoteSub from '@/components/MkNoteSub.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkReactionsViewer from '@/components/MkReactionsViewer.vue';
-import MkReactionsViewerDetails from '@/components/MkReactionsViewer.details.vue';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import MkPoll from '@/components/MkPoll.vue';
-import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import { pleaseLogin } from '@/utility/please-login.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
-import { userPage } from '@/filters/user.js';
-import { notePage } from '@/filters/note.js';
-import number from '@/filters/number.js';
-import * as os from '@/os.js';
-import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
-import * as sound from '@/utility/sound.js';
-import { reactionPicker } from '@/utility/reaction-picker.js';
-import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
-import { $i } from '@/i.js';
-import { i18n } from '@/i18n.js';
-import { getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
-import { noteEvents, useNoteCapture } from '@/composables/use-note-capture.js';
-import { deepClone } from '@/utility/clone.js';
-import { useTooltip } from '@/composables/use-tooltip.js';
-import { claimAchievement } from '@/utility/achievements.js';
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
-import { showMovedDialog } from '@/utility/show-moved-dialog.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
-import { isEnabledUrlPreview } from '@/utility/url-preview.js';
-import { getAppearNote } from '@/utility/get-appear-note.js';
-import { prefer } from '@/preferences.js';
-import { getPluginHandlers } from '@/plugin.js';
-import { DI } from '@/di.js';
-import { globalEvents, useGlobalEvent } from '@/events.js';
-import { Paginator } from '@/utility/paginator.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
-	initialTab?: string;
+	initialTab?: 'replies' | 'renotes' | 'reactions';
 }>(), {
 	initialTab: 'replies',
 });
 
+// 周辺コンテキストのインジェクト
 const inChannel = inject(DI.inChannel, null);
 
-let note = deepClone(props.note);
-
-// plugin
-const noteViewInterruptors = getPluginHandlers('note_view_interruptor');
-const hideByPlugin = ref(false);
-if (noteViewInterruptors.length > 0) {
-	let result: Misskey.entities.Note | null = deepClone(note);
-	for (const interruptor of noteViewInterruptors) {
-		try {
-			result = interruptor.handler(result!) as Misskey.entities.Note | null;
-		} catch (err) {
-			console.error(err);
-		}
-	}
-	if (result == null) {
-		hideByPlugin.value = true;
-	} else {
-		note = result as Misskey.entities.Note;
-	}
-}
-
-const isRenote = Misskey.note.isPureRenote(note);
-const appearNote = getAppearNote(note) ?? note;
-const { $note: $appearNote, subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
-	note: appearNote,
-	parentNote: note,
-});
-
+// Template Refsの定義
 const rootEl = useTemplateRef('rootEl');
 const menuButton = useTemplateRef('menuButton');
 const renoteButton = useTemplateRef('renoteButton');
@@ -332,30 +285,96 @@ const renoteTime = useTemplateRef('renoteTime');
 const reactButton = useTemplateRef('reactButton');
 const clipButton = useTemplateRef('clipButton');
 const galleryEl = useTemplateRef('galleryEl');
-const isMyRenote = $i && ($i.id === note.userId);
-const showContent = ref(false);
-const isDeleted = ref(false);
-const muted = ref($i ? checkWordMute(appearNote, $i, $i.mutedWords) : false);
-const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
-const translating = ref(false);
-const parsed = appearNote.text ? mfm.parse(appearNote.text) : null;
-const urls = parsed ? extractUrlFromMfm(parsed).filter((url) => appearNote.renote?.url !== url && appearNote.renote?.uri !== url) : null;
-const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.user.instance);
-const conversation = ref<Misskey.entities.Note[]>([]);
-const replies = ref<Misskey.entities.Note[]>([]);
-const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i?.id);
 
-useGlobalEvent('noteDeleted', (noteId) => {
-	if (noteId === note.id || noteId === appearNote.id) {
-		isDeleted.value = true;
-	}
+// コンポーサブルの呼び出し
+const {
+	note,
+	appearNote,
+	$appearNote,
+	hideByPlugin,
+	isRenote,
+	showContent,
+	isDeleted,
+	translating,
+	translation,
+	muted,
+	canRenote,
+	isMyRenote,
+	parsed,
+	urls,
+	showTicker,
+
+	// 関数群
+	renote,
+	reply,
+	react,
+	reactViaMfmEmoji,
+	toggleReact,
+	onContextmenu,
+	showMenu,
+	clip,
+	showRenoteMenu,
+	blur,
+} = useNote(props, {
+	rootEl,
+	menuButton,
+	renoteButton,
+	renoteTime,
+	reactButton,
+	clipButton,
+}, {
+	inChannel,
 });
 
-const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
-	type: 'lookup',
-	url: `https://${host}/notes/${appearNote.id}`,
+// provide
+provide(DI.mfmEmojiReactCallback, reactViaMfmEmoji);
+
+// MkNoteDetailed固有
+const tab = ref(props.initialTab);
+const reactionTabType = ref<string | null>(null);
+
+const renotesPaginator = markRaw(new Paginator('notes/renotes', {
+	limit: 10,
+	params: {
+		noteId: appearNote.id,
+	},
 }));
 
+const reactionsPaginator = markRaw(new Paginator('notes/reactions', {
+	limit: 10,
+	computedParams: computed(() => ({
+		noteId: appearNote.id,
+		type: reactionTabType.value,
+	})),
+}));
+
+const replies = ref<Misskey.entities.Note[]>([]);
+const repliesLoaded = ref(false);
+
+function loadReplies() {
+	repliesLoaded.value = true;
+	misskeyApi('notes/children', {
+		noteId: appearNote.id,
+		limit: 30,
+	}).then(res => {
+		replies.value = res;
+	});
+}
+
+const conversation = ref<Misskey.entities.Note[]>([]);
+const conversationLoaded = ref(false);
+
+function loadConversation() {
+	conversationLoaded.value = true;
+	if (appearNote.replyId == null) return;
+	misskeyApi('notes/conversation', {
+		noteId: appearNote.replyId,
+	}).then(res => {
+		conversation.value = res.reverse();
+	});
+}
+
+// キーボードショートカットマップ
 const keymap = {
 	'r': () => reply(),
 	'e|a|plus': () => react(),
@@ -378,281 +397,6 @@ const keymap = {
 		callback: () => blur(),
 	},
 } as const satisfies Keymap;
-
-provide(DI.mfmEmojiReactCallback, (reaction) => {
-	sound.playMisskeySfx('reaction');
-	misskeyApi('notes/reactions/create', {
-		noteId: appearNote.id,
-		reaction: reaction,
-	}).then(() => {
-		noteEvents.emit(`reacted:${appearNote.id}`, {
-			userId: $i!.id,
-			reaction: reaction,
-		});
-	});
-});
-
-const tab = ref(props.initialTab);
-const reactionTabType = ref<string | null>(null);
-
-const renotesPaginator = markRaw(new Paginator('notes/renotes', {
-	limit: 10,
-	params: {
-		noteId: appearNote.id,
-	},
-}));
-
-const reactionsPaginator = markRaw(new Paginator('notes/reactions', {
-	limit: 10,
-	computedParams: computed(() => ({
-		noteId: appearNote.id,
-		type: reactionTabType.value,
-	})),
-}));
-
-useTooltip(renoteButton, async (showing) => {
-	const anchorElement = renoteButton.value;
-	if (anchorElement == null) return;
-
-	const renotes = await misskeyApi('notes/renotes', {
-		noteId: appearNote.id,
-		limit: 11,
-	});
-
-	const users = renotes.map(x => x.user);
-
-	if (users.length < 1) return;
-
-	const { dispose } = os.popup(MkUsersTooltip, {
-		showing,
-		users,
-		count: appearNote.renoteCount,
-		anchorElement: anchorElement,
-	}, {
-		closed: () => dispose(),
-	});
-});
-
-if (appearNote.reactionAcceptance === 'likeOnly') {
-	useTooltip(reactButton, async (showing) => {
-		const reactions = await misskeyApiGet('notes/reactions', {
-			noteId: appearNote.id,
-			limit: 10,
-			_cacheKey_: $appearNote.reactionCount,
-		});
-
-		const users = reactions.map(x => x.user);
-
-		if (users.length < 1) return;
-
-		const { dispose } = os.popup(MkReactionsViewerDetails, {
-			showing,
-			reaction: '❤️',
-			users,
-			count: $appearNote.reactionCount,
-			anchorElement: reactButton.value!,
-		}, {
-			closed: () => dispose(),
-		});
-	});
-}
-
-async function renote() {
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	showMovedDialog();
-
-	const { menu } = getRenoteMenu({ note: note, renoteButton });
-	os.popupMenu(menu, renoteButton.value);
-
-	// リノート後は反応が来る可能性があるので手動で購読する
-	subscribeManuallyToNoteCapture();
-}
-
-async function reply() {
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	showMovedDialog();
-	os.post({
-		reply: appearNote,
-		channel: appearNote.channel,
-	}).then(() => {
-		focus();
-	});
-}
-
-async function react() {
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	showMovedDialog();
-	if (appearNote.reactionAcceptance === 'likeOnly') {
-		sound.playMisskeySfx('reaction');
-
-		misskeyApi('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: '❤️',
-		}).then(() => {
-			noteEvents.emit(`reacted:${appearNote.id}`, {
-				userId: $i!.id,
-				reaction: '❤️',
-			});
-		});
-		const el = reactButton.value;
-		if (el && prefer.s.animation) {
-			const rect = el.getBoundingClientRect();
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
-			const { dispose } = os.popup(MkRippleEffect, { x, y }, {
-				end: () => dispose(),
-			});
-		}
-	} else {
-		blur();
-		reactionPicker.show(reactButton.value ?? null, note, async (reaction) => {
-			if (prefer.s.confirmOnReact) {
-				const confirm = await os.confirm({
-					type: 'question',
-					text: i18n.tsx.reactAreYouSure({ emoji: reaction.replace('@.', '') }),
-				});
-
-				if (confirm.canceled) return;
-			}
-
-			sound.playMisskeySfx('reaction');
-
-			misskeyApi('notes/reactions/create', {
-				noteId: appearNote.id,
-				reaction: reaction,
-			}).then(() => {
-				noteEvents.emit(`reacted:${appearNote.id}`, {
-					userId: $i!.id,
-					reaction: reaction,
-				});
-			});
-			if (appearNote.text && appearNote.text.length > 100 && (Date.now() - new Date(appearNote.createdAt).getTime() < 1000 * 3)) {
-				claimAchievement('reactWithoutRead');
-			}
-		}, () => {
-			focus();
-		});
-	}
-}
-
-function undoReact(targetNote: Misskey.entities.Note): void {
-	const oldReaction = targetNote.myReaction;
-	if (!oldReaction) return;
-	misskeyApi('notes/reactions/delete', {
-		noteId: targetNote.id,
-	}).then(() => {
-		noteEvents.emit(`unreacted:${appearNote.id}`, {
-			userId: $i!.id,
-			reaction: oldReaction,
-		});
-	});
-}
-
-function toggleReact() {
-	if (appearNote.myReaction == null) {
-		react();
-	} else {
-		undoReact(appearNote);
-	}
-}
-
-function onContextmenu(ev: PointerEvent): void {
-	if (ev.target && isLink(ev.target as HTMLElement)) return;
-	if (window.getSelection()?.toString() !== '') return;
-
-	if (prefer.s.useReactionPickerForContextMenu) {
-		ev.preventDefault();
-		react();
-	} else {
-		const { menu, cleanup } = getNoteMenu({ note: note, translating, translation });
-		os.contextMenu(menu, ev).then(focus).finally(cleanup);
-	}
-}
-
-function showMenu(): void {
-	const { menu, cleanup } = getNoteMenu({ note: note, translating, translation });
-	os.popupMenu(menu, menuButton.value).then(focus).finally(cleanup);
-}
-
-async function clip(): Promise<void> {
-	os.popupMenu(await getNoteClipMenu({ note: note }), clipButton.value).then(focus);
-}
-
-async function showRenoteMenu() {
-	if (!isMyRenote) return;
-
-	const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
-	if (!isLoggedIn) return;
-
-	const menu: MenuItem[] = [];
-
-	if (isMyRenote) {
-		menu.push({
-			text: i18n.ts.unrenote,
-			icon: 'ti ti-trash',
-			danger: true,
-			action: () => {
-				misskeyApi('notes/delete', {
-					noteId: note.id,
-				}).then(() => {
-					globalEvents.emit('noteDeleted', note.id);
-				});
-			},
-		});
-	}
-
-	if (
-		props.note.channelId != null &&
-		(inChannel == null || props.note.channelId !== inChannel.value)
-	) {
-		menu.push({
-			type: 'link',
-			text: i18n.ts.viewRenotedChannel,
-			icon: 'ti ti-device-tv',
-			to: `/channels/${props.note.channelId}`,
-		});
-	}
-
-	os.popupMenu(menu, renoteTime.value);
-}
-
-function focus() {
-	rootEl.value?.focus();
-}
-
-function blur() {
-	rootEl.value?.blur();
-}
-
-const repliesLoaded = ref(false);
-
-function loadReplies() {
-	repliesLoaded.value = true;
-	misskeyApi('notes/children', {
-		noteId: appearNote.id,
-		limit: 30,
-	}).then(res => {
-		replies.value = res;
-	});
-}
-
-const conversationLoaded = ref(false);
-
-function loadConversation() {
-	conversationLoaded.value = true;
-	if (appearNote.replyId == null) return;
-	misskeyApi('notes/conversation', {
-		noteId: appearNote.replyId,
-	}).then(res => {
-		conversation.value = res.reverse();
-	});
-}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/composables/use-note.ts

@@ -0,0 +1,473 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { ref, computed } from 'vue';
+import type { Ref } from 'vue';
+import * as mfm from 'mfm-js';
+import * as Misskey from 'misskey-js';
+import { isLink } from '@@/js/is-link.js';
+import { shouldCollapsed } from '@@/js/collapsed.js';
+import { host } from '@@/js/config.js';
+import { pleaseLogin } from '@/utility/please-login.js';
+import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
+import { checkWordMute } from '@/utility/check-word-mute.js';
+import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
+import * as sound from '@/utility/sound.js';
+import * as os from '@/os.js';
+import { reactionPicker } from '@/utility/reaction-picker.js';
+import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
+import { getNoteClipMenu, getNoteMenu, getRenoteMenu, getAbuseNoteMenu, getCopyNoteLinkMenu } from '@/utility/get-note-menu.js';
+import { noteEvents, useNoteCapture } from '@/composables/use-note-capture.js';
+import { deepClone } from '@/utility/clone.js';
+import { useTooltip } from '@/composables/use-tooltip.js';
+import { claimAchievement } from '@/utility/achievements.js';
+import { showMovedDialog } from '@/utility/show-moved-dialog.js';
+import { getAppearNote } from '@/utility/get-appear-note.js';
+import { prefer } from '@/preferences.js';
+import { getPluginHandlers } from '@/plugin.js';
+import { $i } from '@/i.js';
+import { i18n } from '@/i18n.js';
+import { globalEvents, useGlobalEvent } from '@/events.js';
+import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
+import MkReactionsViewerDetails from '@/components/MkReactionsViewer.details.vue';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { notePage } from '@/filters/note.js';
+import type { DI as DIType } from '@/di.js';
+import type { ExtractInjectedType } from '@/types/misc.js';
+import type { MenuItem } from '@/types/menu.js';
+
+export interface UseNoteProps {
+	note: Misskey.entities.Note;
+	pinned?: boolean;
+	mock?: boolean;
+	withHardMute?: boolean;
+}
+
+export interface UseNoteElements {
+	rootEl?: Ref<HTMLElement | null>;
+	menuButton?: Ref<HTMLElement | null>;
+	renoteButton?: Ref<HTMLElement | null>;
+	renoteTime?: Ref<HTMLElement | null>;
+	reactButton?: Ref<HTMLElement | null>;
+	clipButton?: Ref<HTMLElement | null>;
+}
+
+export interface UseNoteOptions {
+	inTimeline?: boolean;
+	tl_withSensitive?: Ref<boolean>;
+	inChannel?: ExtractInjectedType<typeof DIType['inChannel']>;
+	currentClip?: Ref<Misskey.entities.Clip | null> | null;
+	currentAntenna?: Ref<Misskey.entities.Antenna | null> | null;
+}
+
+/* eslint-disable no-redeclare */
+export function calculateMuteStatus(
+	noteToCheck: Misskey.entities.Note,
+	user: typeof $i,
+	inTimeline: boolean,
+	tl_withSensitive: boolean,
+	checkOnly: true,
+): boolean;
+export function calculateMuteStatus(
+	noteToCheck: Misskey.entities.Note,
+	user: typeof $i,
+	inTimeline: boolean,
+	tl_withSensitive: boolean,
+	checkOnly?: false,
+): Array<string | string[]> | false | 'sensitiveMute';
+
+export function calculateMuteStatus(
+	noteToCheck: Misskey.entities.Note,
+	user: typeof $i,
+	inTimeline: boolean,
+	tl_withSensitive: boolean,
+	checkOnly = false
+): Array<string | string[]> | boolean | 'sensitiveMute' {
+	if (user?.mutedWords != null) {
+		const result = checkWordMute(noteToCheck, user, user.mutedWords);
+		if (Array.isArray(result)) return checkOnly ? (result.length > 0) : result;
+
+		const replyResult = noteToCheck.reply && checkWordMute(noteToCheck.reply, user, user.mutedWords);
+		if (Array.isArray(replyResult)) return checkOnly ? (replyResult.length > 0) : replyResult;
+
+		const renoteResult = noteToCheck.renote && checkWordMute(noteToCheck.renote, user, user.mutedWords);
+		if (Array.isArray(renoteResult)) return checkOnly ? (renoteResult.length > 0) : renoteResult;
+	}
+
+	if (checkOnly) return false;
+
+	if (inTimeline && tl_withSensitive === false && noteToCheck.files?.some((v) => v.isSensitive)) {
+		return 'sensitiveMute';
+	}
+
+	return false;
+}
+/* eslint-enable no-redeclare */
+
+/** MkNote, MkNoteDetailedの共通ロジック */
+export function useNote(
+	props: UseNoteProps,
+	els: UseNoteElements = {},
+	options: UseNoteOptions = {},
+) {
+	const inTimeline = options.inTimeline ?? false;
+	const tl_withSensitive = options.tl_withSensitive ?? ref(true);
+	const inChannel = options.inChannel ?? null;
+	const currentClip = options.currentClip ?? null;
+	const currentAntenna = options.currentAntenna ?? null;
+
+	// プラグインの割り込み処理
+	let rawNote = deepClone(props.note);
+	const hideByPlugin = ref(false);
+	const noteViewInterruptors = getPluginHandlers('note_view_interruptor');
+
+	if (noteViewInterruptors.length > 0) {
+		let result: Misskey.entities.Note | null = deepClone(rawNote);
+		for (const interruptor of noteViewInterruptors) {
+			try {
+				result = interruptor.handler(result!) as Misskey.entities.Note | null;
+			} catch (err) {
+				console.error(err);
+			}
+		}
+		if (result == null) {
+			hideByPlugin.value = true;
+		} else {
+			rawNote = result as Misskey.entities.Note;
+		}
+	}
+
+	// 基本状態
+	const isRenote = Misskey.note.isPureRenote(rawNote);
+	const appearNote = getAppearNote(rawNote) ?? rawNote;
+
+	// キャプチャ（ストリーム購読）
+	const { $note: $appearNote, subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
+		note: appearNote,
+		parentNote: rawNote,
+		mock: props.mock,
+	});
+
+	// 各種フラグ状態
+	const showContent = ref(false);
+	const isDeleted = ref(false);
+	const translating = ref(false);
+	const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
+
+	// ミュート判定
+	const muted = ref($i ? (options.inTimeline ? calculateMuteStatus(appearNote, $i, inTimeline, tl_withSensitive.value) : checkWordMute(appearNote, $i, $i.mutedWords)) : false);
+	const hardMuted = ref(props.withHardMute && $i && calculateMuteStatus(appearNote, $i, inTimeline, tl_withSensitive.value, true));
+
+	// 計算プロパティ (Computed)
+	const isMyRenote = computed(() => $i && ($i.id === rawNote.userId));
+	const parsed = computed(() => appearNote.text ? mfm.parse(appearNote.text) : null);
+	const urls = computed(() => parsed.value ? extractUrlFromMfm(parsed.value).filter((url) => appearNote.renote?.url !== url && appearNote.renote?.uri !== url) : null);
+	const isLong = computed(() => shouldCollapsed(appearNote, urls.value ?? []));
+	const collapsed = ref(appearNote.cw == null && isLong.value);
+	const showTicker = computed(() => (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.user.instance));
+	const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || (appearNote.visibility === 'followers' && appearNote.userId === $i?.id));
+	const renoteCollapsed = ref(prefer.s.collapseRenotes && isRenote && (($i && ($i.id === rawNote.userId || $i.id === appearNote.userId)) || ($appearNote.myReaction != null)));
+
+	const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
+		type: 'lookup',
+		url: `https://${host}/notes/${appearNote.id}`,
+	}));
+
+	// グローバルイベントの監視
+	useGlobalEvent('noteDeleted', (noteId) => {
+		if (noteId === rawNote.id || noteId === appearNote.id) {
+			isDeleted.value = true;
+		}
+	});
+
+	// ツールチップのセットアップ (Mockでない場合のみ)
+	if (!props.mock) {
+		if (els.renoteButton != null) {
+			useTooltip(els.renoteButton, async (showing) => {
+				const renotes = await misskeyApi('notes/renotes', {
+					noteId: appearNote.id,
+					limit: 11,
+				});
+				const users = renotes.map(x => x.user);
+				if (users.length < 1 || els.renoteButton!.value == null) return;
+				const { dispose } = os.popup(MkUsersTooltip, {
+					showing,
+					users,
+					count: appearNote.renoteCount,
+					anchorElement: els.renoteButton!.value,
+				}, {
+					closed: () => dispose(),
+				});
+			});
+		}
+
+		if (appearNote.reactionAcceptance === 'likeOnly' && els.reactButton != null) {
+			useTooltip(els.reactButton, async (showing) => {
+				const reactions = await misskeyApiGet('notes/reactions', {
+					noteId: appearNote.id,
+					limit: 10,
+					_cacheKey_: $appearNote.reactionCount,
+				});
+				const users = reactions.map(x => x.user);
+				if (users.length < 1 || els.reactButton!.value == null) return;
+				const { dispose } = os.popup(MkReactionsViewerDetails, {
+					showing,
+					reaction: '❤️',
+					users,
+					count: $appearNote.reactionCount,
+					anchorElement: els.reactButton!.value,
+				}, {
+					closed: () => dispose(),
+				});
+			});
+		}
+	}
+
+	// 共通アクション関数群
+	async function renote() {
+		if (props.mock) return;
+		const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
+		if (!isLoggedIn) return;
+		showMovedDialog();
+		if (els.renoteButton == null) return;
+		const { menu } = getRenoteMenu({
+			note: rawNote,
+			renoteButton: els.renoteButton,
+			mock: props.mock,
+		});
+		os.popupMenu(menu, els.renoteButton.value);
+		subscribeManuallyToNoteCapture();
+	}
+
+	async function reply() {
+		if (props.mock) return;
+		const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
+		if (!isLoggedIn) return;
+		os.post({
+			reply: appearNote,
+			channel: appearNote.channel,
+		}).then(() => {
+			focus();
+		});
+	}
+
+	async function react(customCallback?: (reaction: string) => void) {
+		const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
+		if (!isLoggedIn) return;
+		showMovedDialog();
+
+		if (appearNote.reactionAcceptance === 'likeOnly') {
+			sound.playMisskeySfx('reaction');
+			if (props.mock) return;
+			misskeyApi('notes/reactions/create', {
+				noteId: appearNote.id,
+				reaction: '❤️',
+			}).then(() => {
+				noteEvents.emit(`reacted:${appearNote.id}`, { userId: $i!.id, reaction: '❤️' });
+			});
+			if (els.reactButton != null && els.reactButton.value != null && prefer.s.animation) {
+				const rect = els.reactButton.value.getBoundingClientRect();
+				const { dispose } = os.popup(MkRippleEffect, {
+					x: rect.left + (els.reactButton.value.offsetWidth / 2),
+					y: rect.top + (els.reactButton.value.offsetHeight / 2),
+				}, {
+					end: () => dispose(),
+				});
+			}
+		} else {
+			blur();
+			reactionPicker.show(els.reactButton?.value ?? null, rawNote, async (reaction) => {
+				if (prefer.s.confirmOnReact) {
+					const confirm = await os.confirm({
+						type: 'question',
+						text: i18n.tsx.reactAreYouSure({ emoji: reaction.replace('@.', '') }),
+					});
+					if (confirm.canceled) return;
+				}
+				sound.playMisskeySfx('reaction');
+				if (props.mock) {
+					if (customCallback) customCallback(reaction);
+					return;
+				}
+				misskeyApi('notes/reactions/create', {
+					noteId: appearNote.id,
+					reaction: reaction,
+				}).then(() => {
+					noteEvents.emit(`reacted:${appearNote.id}`, { userId: $i!.id, reaction: reaction });
+				});
+				if (appearNote.text && appearNote.text.length > 100 && (Date.now() - new Date(appearNote.createdAt).getTime() < 1000 * 3)) {
+					claimAchievement('reactWithoutRead');
+				}
+			}, () => { focus(); });
+		}
+	}
+
+	async function reactViaMfmEmoji(reaction: string) {
+		if (props.mock) return;
+		const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
+		if (!isLoggedIn) return;
+		showMovedDialog();
+		sound.playMisskeySfx('reaction');
+		misskeyApi('notes/reactions/create', {
+			noteId: appearNote.id,
+			reaction: reaction,
+		}).then(() => {
+			noteEvents.emit(`reacted:${appearNote.id}`, {
+				userId: $i!.id,
+				reaction: reaction,
+			});
+		});
+	}
+
+	function undoReact(): void {
+		const oldReaction = $appearNote.myReaction;
+		if (!oldReaction) return;
+		if (props.mock) return;
+		misskeyApi('notes/reactions/delete', { noteId: appearNote.id }).then(() => {
+			noteEvents.emit(`unreacted:${appearNote.id}`, { userId: $i!.id, reaction: oldReaction });
+		});
+	}
+
+	function toggleReact(customMockCallback?: (reaction: string) => void) {
+		if ($appearNote.myReaction == null) {
+			react(customMockCallback);
+		} else {
+			if (props.mock && customMockCallback) {
+				customMockCallback($appearNote.myReaction);
+			} else {
+				undoReact();
+			}
+		}
+	}
+
+	function onContextmenu(ev: PointerEvent): void {
+		if (props.mock) return;
+		if (ev.target && isLink(ev.target as HTMLElement)) return;
+		if (window.getSelection()?.toString() !== '') return;
+
+		if (prefer.s.useReactionPickerForContextMenu) {
+			ev.preventDefault();
+			react();
+		} else {
+			const { menu, cleanup } = getNoteMenu({
+				note: rawNote,
+				translating,
+				translation,
+				currentClip: currentClip?.value,
+				currentAntenna: currentAntenna?.value ?? undefined,
+			});
+			os.contextMenu(menu, ev).then(focus).finally(cleanup);
+		}
+	}
+
+	function showMenu(): void {
+		if (props.mock || els.menuButton == null) return;
+		const { menu, cleanup } = getNoteMenu({
+			note: rawNote,
+			translating,
+			translation,
+			currentClip: currentClip?.value,
+			currentAntenna: currentAntenna?.value ?? undefined,
+		});
+		os.popupMenu(menu, els.menuButton.value).then(focus).finally(cleanup);
+	}
+
+	async function clip(): Promise<void> {
+		if (props.mock) return;
+		os.popupMenu(await getNoteClipMenu({
+			note: rawNote,
+			currentClip: currentClip?.value,
+		}), els.clipButton?.value).then(focus);
+	}
+
+	async function showRenoteMenu() {
+		if (props.mock) return;
+		const isLoggedIn = await pleaseLogin({ openOnRemote: pleaseLoginContext.value });
+		if (!isLoggedIn) return;
+
+		const getUnrenote = () => ({
+			text: i18n.ts.unrenote,
+			icon: 'ti ti-trash',
+			danger: true,
+			action: () => {
+				misskeyApi('notes/delete', { noteId: rawNote.id }).then(() => { globalEvents.emit('noteDeleted', rawNote.id); });
+			},
+		});
+
+		const menuItems: MenuItem[] = [{
+			type: 'link',
+			text: i18n.ts.renoteDetails,
+			icon: 'ti ti-info-circle',
+			to: notePage(rawNote),
+		}];
+
+		if (props.note.channelId != null && (inChannel == null || props.note.channelId !== inChannel.value)) {
+			menuItems.push({
+				type: 'link',
+				text: i18n.ts.viewRenotedChannel,
+				icon: 'ti ti-device-tv',
+				to: `/channels/${props.note.channelId}`,
+			});
+		}
+
+		menuItems.push(getCopyNoteLinkMenu(rawNote, i18n.ts.copyLinkRenote));
+		menuItems.push({ type: 'divider' });
+
+		if (isMyRenote.value) {
+			menuItems.push(getUnrenote());
+			os.popupMenu(menuItems, els.renoteTime?.value);
+		} else {
+			menuItems.push(getAbuseNoteMenu(rawNote, i18n.ts.reportAbuseRenote));
+			if ($i?.isModerator || $i?.isAdmin) {
+				menuItems.push(getUnrenote());
+			}
+
+			os.popupMenu(menuItems, els.renoteTime?.value);
+		}
+	}
+
+	// フォーカス制御
+	function focus() { els.rootEl?.value?.focus(); }
+
+	function blur() { els.rootEl?.value?.blur(); }
+
+	return {
+		// 状態・データ
+		note: rawNote,
+		appearNote,
+		$appearNote,
+		hideByPlugin,
+		isRenote,
+		showContent,
+		isDeleted,
+		translating,
+		translation,
+		muted,
+		hardMuted,
+		collapsed,
+		renoteCollapsed,
+
+		// 計算プロパティ
+		isMyRenote,
+		parsed,
+		urls,
+		isLong,
+		showTicker,
+		canRenote,
+
+		// アクション関数
+		renote,
+		reply,
+		react,
+		reactViaMfmEmoji,
+		toggleReact,
+		onContextmenu,
+		showMenu,
+		clip,
+		showRenoteMenu,
+		focus,
+		blur,
+	};
+}

packages/frontend/src/pages/note.vue

@@ -76,6 +76,12 @@ const note = ref<null | Misskey.entities.Note>(CTX_NOTE);
 const clips = ref<Misskey.entities.Clip[]>();
 const showPrev = ref<'user' | 'channel' | false>(false);
 const showNext = ref<'user' | 'channel' | false>(false);
+const initialTab = computed<'reactions' | 'replies' | 'renotes' | undefined>(() => {
+	if (['reactions', 'replies', 'renotes'].includes(props.initialTab ?? '')) {
+		return props.initialTab as 'reactions' | 'replies' | 'renotes';
+	}
+	return undefined;
+});
 const error = ref();
 
 const prevUserPaginator = markRaw(new Paginator('users/notes', {

packages/frontend/src/types/misc.ts

@@ -2,5 +2,8 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import type { InjectionKey } from 'vue';
 
-export type Awaitable <T> = T | Promise<T>;
+export type Awaitable<T> = T | Promise<T>;
+
+export type ExtractInjectedType<T extends InjectionKey<any>> = T extends InjectionKey<infer U> ? U : never;

packages/frontend/src/utility/get-note-menu.ts

@@ -33,7 +33,7 @@ const isInBrowserTranslationAvailable = (
 
 export async function getNoteClipMenu(props: {
 	note: Misskey.entities.Note;
-	currentClip?: Misskey.entities.Clip;
+	currentClip?: Misskey.entities.Clip | null;
 }) {
 	function getClipName(clip: Misskey.entities.Clip) {
 		if ($i && clip.userId === $i.id && clip.notesCount != null) {
@@ -181,8 +181,8 @@ export function getNoteMenu(props: {
 	note: Misskey.entities.Note;
 	translation: Ref<Misskey.entities.NotesTranslateResponse | null>;
 	translating: Ref<boolean>;
-	currentClip?: Misskey.entities.Clip;
-	currentAntenna?: Misskey.entities.Antenna;
+	currentClip?: Misskey.entities.Clip | null;
+	currentAntenna?: Misskey.entities.Antenna | null;
 }) {
 	const appearNote = getAppearNote(props.note) ?? props.note;
 	const link = appearNote.url ?? appearNote.uri;

packages/icons-subsetter/tsconfig.json

@@ -8,6 +8,7 @@
 		"strictFunctionTypes": true,
 		"strictNullChecks": true,
 		"esModuleInterop": true,
+		"skipLibCheck": true,
 		"lib": [
 			"esnext",
 			"dom"

packages/misskey-bubble-game/tsconfig.json

@@ -9,6 +9,7 @@
 		"sourceMap": false,
 		"outDir": "./built",
 		"removeComments": true,
+		"skipLibCheck": true,
 		"strict": true,
 		"strictFunctionTypes": true,
 		"strictNullChecks": true,

packages/misskey-js/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "misskey-js",
-	"version": "2026.6.1-alpha.1",
+	"version": "2026.7.0-alpha.0",
 	"description": "Misskey SDK for JavaScript",
 	"license": "MIT",
 	"main": "./built/index.js",

packages/misskey-js/tsconfig.json

@@ -9,6 +9,7 @@
 		"sourceMap": false,
 		"outDir": "./built",
 		"removeComments": true,
+		"skipLibCheck": true,
 		"strict": true,
 		"strictFunctionTypes": true,
 		"strictNullChecks": true,

packages/misskey-reversi/tsconfig.json

@@ -9,6 +9,7 @@
 		"sourceMap": false,
 		"outDir": "./built",
 		"removeComments": true,
+		"skipLibCheck": true,
 		"strict": true,
 		"strictFunctionTypes": true,
 		"strictNullChecks": true,

packages/sw/tsconfig.json

@@ -13,6 +13,7 @@
 		"module": "nodenext",
 		"moduleResolution": "nodenext",
 		"removeComments": false,
+		"skipLibCheck": true,
 		"noLib": false,
 		"strict": true,
 		"strictNullChecks": true,

scripts/check-dts.mjs

@@ -0,0 +1,198 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const defaultRootDir = path.resolve(scriptDir, '..');
+
+// パス判定は OS 差分を避けるため、必要なところだけ POSIX 形式へ寄せる。
+function toPosixPath(filePath) {
+	return filePath.split(path.sep).join('/');
+}
+
+function isInside(parentDir, filePath) {
+	const relative = path.relative(parentDir, filePath);
+	return relative !== '' && !relative.startsWith('..') && !path.isAbsolute(relative);
+}
+
+// skipLibCheck で隠したくない、リポジトリ管理下の手書き .d.ts だけを検査する。
+export function isCheckableDeclarationFile(filePath, rootDir = defaultRootDir) {
+	const absoluteRootDir = path.resolve(rootDir);
+	const absoluteFilePath = path.resolve(filePath);
+	if (!isInside(absoluteRootDir, absoluteFilePath)) return false;
+	if (!absoluteFilePath.endsWith('.d.ts')) return false;
+
+	const relativePath = toPosixPath(path.relative(absoluteRootDir, absoluteFilePath));
+	const segments = relativePath.split('/');
+	if (segments.includes('node_modules') || segments.includes('.pnpm')) return false;
+	if (segments.includes('built') || segments.includes('js-built')) return false;
+
+	return true;
+}
+
+// root package.json の workspaces を信頼して、検査対象 package を列挙する。
+function readJson(filePath) {
+	return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+}
+
+function getWorkspacePackageDirs(rootDir) {
+	const rootPackageJson = readJson(path.join(rootDir, 'package.json'));
+	return rootPackageJson.workspaces
+		.filter((workspace) => !workspace.includes('*'))
+		.map((workspace) => path.resolve(rootDir, workspace))
+		.filter((workspaceDir) => fs.existsSync(path.join(workspaceDir, 'package.json')));
+}
+
+function getTsconfigPaths(packageDir) {
+	return ts.sys.readDirectory(
+		packageDir,
+		['.json'],
+		['node_modules'],
+		['**/tsconfig.json'],
+		undefined,
+	);
+}
+
+// tsconfig の include から漏れる package 直下の shim も拾えるよう、補助的に探索する。
+function discoverDeclarationFiles(packageDir, rootDir) {
+	return ts.sys.readDirectory(
+		packageDir,
+		['.d.ts'],
+		undefined,
+		['**/*.d.ts'],
+		undefined,
+	).filter((filePath) => isCheckableDeclarationFile(filePath, rootDir));
+}
+
+// 各 package の設定をそのまま使い、検査時だけ skipLibCheck を後で上書きする。
+function readTsconfig(tsconfigPath) {
+	if (!fs.existsSync(tsconfigPath)) return undefined;
+
+	const config = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
+	if (config.error != null) {
+		throw new Error(ts.flattenDiagnosticMessageText(config.error.messageText, '\n'));
+	}
+
+	return ts.parseJsonConfigFileContent(config.config, ts.sys, path.dirname(tsconfigPath));
+}
+
+function createFormatHost(rootDir) {
+	return {
+		getCanonicalFileName: (fileName) => fileName,
+		getCurrentDirectory: () => rootDir,
+		getNewLine: () => ts.sys.newLine,
+	};
+}
+
+// 通常の tsconfig は include 対象を使い、root tsconfig だけ package 直下の shim を足す。
+function isRootTsconfig(packageDir, tsconfigPath) {
+	return path.resolve(packageDir, 'tsconfig.json') === path.resolve(tsconfigPath);
+}
+
+function getDeclarationFilesForTsconfig(packageDir, tsconfigPath, parsedConfig, rootDir) {
+	const declarationFiles = parsedConfig.fileNames
+		.filter((filePath) => isCheckableDeclarationFile(filePath, rootDir));
+
+	if (!isRootTsconfig(packageDir, tsconfigPath)) {
+		return declarationFiles;
+	}
+
+	const extraRootConfigDeclarationFiles = discoverDeclarationFiles(packageDir, rootDir)
+		.filter((filePath) => {
+			return path.dirname(filePath) === packageDir;
+		});
+
+	return [...new Set([...declarationFiles, ...extraRootConfigDeclarationFiles])];
+}
+
+// node_modules 側の診断は出さず、対象 .d.ts 自身に出た診断だけを失敗扱いにする。
+function checkTsconfigDeclarations(packageDir, tsconfigPath, rootDir) {
+	const parsedConfig = readTsconfig(tsconfigPath);
+	if (parsedConfig == null) {
+		return { declarationFiles: [], diagnostics: [] };
+	}
+
+	const declarationFiles = getDeclarationFilesForTsconfig(packageDir, tsconfigPath, parsedConfig, rootDir);
+	if (declarationFiles.length === 0) {
+		return { declarationFiles, diagnostics: [] };
+	}
+
+	const program = ts.createProgram({
+		rootNames: declarationFiles,
+		options: {
+			...parsedConfig.options,
+			noEmit: true,
+			skipLibCheck: false,
+		},
+	});
+
+	const diagnostics = ts.getPreEmitDiagnostics(program)
+		.filter((diagnostic) => diagnostic.file != null && isCheckableDeclarationFile(diagnostic.file.fileName, rootDir));
+
+	return { declarationFiles, diagnostics };
+}
+
+// 複数 tsconfig で同じ宣言を読むことがあるため、同一診断をまとめる。
+function deduplicateDiagnostics(diagnostics) {
+	const seen = new Set();
+	return diagnostics.filter((diagnostic) => {
+		const key = [
+			diagnostic.file?.fileName ?? '',
+			diagnostic.start ?? '',
+			diagnostic.code,
+			ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'),
+		].join('\0');
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+
+function checkPackageDeclarations(packageDir, rootDir) {
+	const results = getTsconfigPaths(packageDir)
+		.map((tsconfigPath) => checkTsconfigDeclarations(packageDir, tsconfigPath, rootDir));
+
+	return {
+		declarationFiles: [...new Set(results.flatMap((result) => result.declarationFiles))],
+		diagnostics: deduplicateDiagnostics(results.flatMap((result) => result.diagnostics)),
+	};
+}
+
+// workspace 全体を走査し、CI が扱いやすい件数と診断リストに集約する。
+export function checkDeclarations(rootDir = defaultRootDir) {
+	const workspacePackageDirs = getWorkspacePackageDirs(rootDir);
+	const results = workspacePackageDirs.map((packageDir) => ({
+		packageDir,
+		...checkPackageDeclarations(packageDir, rootDir),
+	}));
+
+	return {
+		results,
+		declarationFileCount: results.reduce((count, result) => count + result.declarationFiles.length, 0),
+		diagnostics: results.flatMap((result) => result.diagnostics),
+	};
+}
+
+// CLI 実行時は TypeScript 標準の formatter で、通常の tsc に近い形で表示する。
+function main() {
+	const { declarationFileCount, diagnostics } = checkDeclarations(defaultRootDir);
+
+	if (diagnostics.length === 0) {
+		console.log(`Checked ${declarationFileCount} repository declaration files.`);
+		return;
+	}
+
+	console.error(ts.formatDiagnosticsWithColorAndContext(diagnostics, createFormatHost(defaultRootDir)));
+	process.exitCode = 1;
+}
+
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+	main();
+}

scripts/check-dts.test.mjs

@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { isCheckableDeclarationFile } from './check-dts.mjs';
+
+const rootDir = '/repo';
+
+test('detects repository-owned declaration files that should be checked', () => {
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/packages/frontend/@types/theme.d.ts`, rootDir), true);
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/packages/frontend/src/utility/virtual.d.ts`, rootDir), true);
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/packages/backend/test/global.d.ts`, rootDir), true);
+});
+
+test('ignores declarations outside the repository-owned surface', () => {
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/node_modules/@types/node/index.d.ts`, rootDir), false);
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/packages/frontend/node_modules/@types/foo/index.d.ts`, rootDir), false);
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/node_modules/.pnpm/typescript/lib/lib.dom.d.ts`, rootDir), false);
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/packages/misskey-js/built/index.d.ts`, rootDir), false);
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/packages/frontend-shared/js-built/i18n.d.ts`, rootDir), false);
+	assert.equal(isCheckableDeclarationFile(`${rootDir}/packages/frontend/src/theme.ts`, rootDir), false);
+});