fix: move changelog entries to latest release

Created by IntelliJ Git plugin for drop selected changes operation

.github/scripts/chrome.mts

@@ -1,673 +0,0 @@
-/*
- * 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 NetworkSummary = {
-	requestCount: 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 BrowserMeasurement = {
-	label: string;
-	timestamp: string;
-	url: string;
-	scenario: string;
-	durationMs: number;
-	network: NetworkSummary;
-	performance: {
-		cdpMetrics: Record<string, number>;
-		runtimeHeap?: {
-			usedSize: number;
-			totalSize: number;
-		};
-		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;
-}
-
-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[] = [];
-	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 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.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 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,
-			webVitals,
-		};
-	}
-
-	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): 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,
-		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

@@ -1,448 +0,0 @@
-/*
- * 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

@@ -1,362 +0,0 @@
-/*
- * 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;
-		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;
-		};
-		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)} | ${summary == null ? '-' : formatDelta(summary.max, formatter)} |`;
-}
-
-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),
-	].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,326 +32,6 @@ 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', heapSnapshotUtil.defaultHeapSnapshotBreakdownTopN, 1);
+const HEAP_SNAPSHOT_BREAKDOWN_TOP_N = util.readIntegerEnv('MK_MEMORY_HEAP_SNAPSHOT_BREAKDOWN_TOP_N', 6, 1);
 const HEAD_HEAP_SNAPSHOT_WORK_DIR = resolve('head-heap-snapshots');
 const HEAD_HEAP_SNAPSHOT_OUTPUT_PATH = resolve('head-heap-snapshot.heapsnapshot');
 
@@ -70,6 +70,51 @@ 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'];
 
@@ -90,12 +135,33 @@ function summarizeSamples(samples: MemoryReport['samples']) {
 			summary[phase].memoryUsage[key] = util.median(values);
 		}
 
-		const heapSnapshot = heapSnapshotUtil.summarizeHeapSnapshotDataSamples(
-			samples,
-			sample => sample.phases[phase].heapSnapshot,
-			{ breakdownTopN: HEAP_SNAPSHOT_BREAKDOWN_TOP_N },
-		);
-		if (heapSnapshot != null) summary[phase].heapSnapshot = heapSnapshot;
+		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 } : {}),
+			};
+		}
 	}
 
 	return summary;

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

@@ -1,394 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { spawn, spawnSync, 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 serverReadyTimeoutMs = util.readIntegerEnv('FRONTEND_BROWSER_METRICS_SERVER_READY_TIMEOUT_MS', 120_000, 1);
-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[];
-};
-
-function startServer(label: string, repoDir: string) {
-	process.stderr.write(`[${label}] Starting Misskey test server\n`);
-	const child = spawn(util.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;
-}
-
-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();
-	});
-}
-
-async function waitForServer(child: ChildProcessWithoutNullStreams) {
-	const startedAt = Date.now();
-	while (Date.now() - startedAt < serverReadyTimeoutMs) {
-		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 util.sleep(1_000);
-	}
-	throw new Error(`Timed out waiting for ${baseUrl}`);
-}
-
-async function api(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();
-}
-
-async function prepareInstance() {
-	await api('reset-db', {});
-	await api('admin/accounts/create', {
-		username: 'admin',
-		password: 'admin1234',
-		setupPassword: 'example_password_please_change_this_or_you_will_get_hacked',
-	});
-}
-
-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)),
-		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)),
-		},
-		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 prepareInstance();
-
-	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),
-			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 = startServer(label, repoDir);
-		await waitForServer(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 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

@@ -9,10 +9,6 @@ import { spawn } 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);

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

@@ -1,44 +0,0 @@
-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

@@ -1,194 +0,0 @@
-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

CHANGELOG.md

@@ -14,6 +14,8 @@
 - バックエンドで画像処理に用いているライブラリ sharp のシステム要件の変更により、**SSE4.2 命令セットをサポートしていない x86_64 CPU では Misskey が正しく動作しなくなります**。仮想マシンに Misskey をデプロイしている場合や、古いハードウェアをお使いの場合は、アップデート前にお使いの環境をご確認ください。なお、ARM64 など x86_64 ではない環境においてはこの変更による影響はありません。
 
 ### General
+- Feat: 公開ロールとロールバッジを個別に非表示にできるようにしました
+- Feat: 公開ロール/ロールバッジを常に表示する管理者設定を追加しました
 - Feat: コントロールパネルから二要素認証を解除できるように
 
 ### Client

locales/ja-JP.yml

@@ -1098,6 +1098,7 @@ likeOnlyForRemote: "全て (リモートはいいねのみ)"
 nonSensitiveOnly: "非センシティブのみ"
 nonSensitiveOnlyForLocalLikeOnlyForRemote: "非センシティブのみ (リモートはいいねのみ)"
 rolesAssignedToMe: "自分に割り当てられたロール"
+roleSettings: "ロール設定"
 resetPasswordConfirm: "パスワードリセットしますか？"
 sensitiveWords: "センシティブワード"
 sensitiveWordsDescription: "設定したワードが含まれるノートの公開範囲をホームにします。改行で区切って複数設定できます。"
@@ -2081,6 +2082,8 @@ _role:
   isConditionalRole: "これはコンディショナルロールです。"
   isPublic: "公開ロール"
   descriptionOfIsPublic: "ユーザーのプロフィールでこのロールが表示されます。"
+  isPublicDisplayRequired: "非表示を許可しない（常に表示）"
+  descriptionOfIsPublicDisplayRequired: "有効にすると、ユーザーはこの公開ロール/ロールバッジを非表示にできません。"
   options: "オプション"
   policies: "ポリシー"
   baseRole: "ベースロール"
@@ -3243,6 +3246,12 @@ _gridComponent:
     patternNotMatch: "この値は{pattern}のパターンに一致しません"
     notUnique: "この値は一意である必要があります"
 
+_roleDisplay:
+  title: "表示するロール/ロールバッジ"
+  description: "自分のプロフィールやノートに表示する公開ロールを選択します。"
+  alwaysShownByAdmin: "管理者により常に表示するよう設定されています。"
+  noRoles: "表示できる公開ロールはありません。"
+
 _roleSelectDialog:
   notSelected: "選択されていません"
 

packages/backend/migration/1779035944722-RoleDisplayVisibility.js

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class RoleDisplayVisibility1779035944722 {
+    name = 'RoleDisplayVisibility1779035944722';
+
+    /**
+     * @param {QueryRunner} queryRunner
+     */
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "user" ADD "hiddenRoleIds" character varying(32) array NOT NULL DEFAULT '{}'`);
+        await queryRunner.query(`ALTER TABLE "role" ADD "isPublicDisplayRequired" boolean NOT NULL DEFAULT false`);
+    }
+
+    /**
+     * @param {QueryRunner} queryRunner
+     */
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "role" DROP COLUMN "isPublicDisplayRequired"`);
+        await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "hiddenRoleIds"`);
+    }
+}

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 { analyzeHeapSnapshot, defaultHeapSnapshotBreakdownTopN, type HeapSnapshotData } from '../../../.github/scripts/heap-snapshot-util.mts';
+import { heapSnapshotCategory, 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', defaultHeapSnapshotBreakdownTopN, 1);
+const HEAP_SNAPSHOT_BREAKDOWN_TOP_N = readIntegerEnv('MK_MEMORY_HEAP_SNAPSHOT_BREAKDOWN_TOP_N', 6, 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,6 +79,246 @@ 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');
@@ -177,7 +417,7 @@ async function getHeapSnapshotStatistics(serverProcess: ChildProcess): Promise<H
 		}
 
 		const snapshot = JSON.parse(await fs.readFile(writtenPath, 'utf-8'));
-		return analyzeHeapSnapshot(snapshot, { breakdownTopN: HEAP_SNAPSHOT_BREAKDOWN_TOP_N });
+		return analyzeHeapSnapshot(snapshot);
 	} finally {
 		await fs.unlink(writtenPath).catch(err => {
 			process.stderr.write(`Failed to delete heap snapshot ${writtenPath}: ${err.message}\n`);

packages/backend/src/core/RoleService.ts

@@ -676,6 +676,7 @@ export class RoleService implements OnApplicationShutdown, OnModuleInit {
 			target: values.target,
 			condFormula: values.condFormula,
 			isPublic: values.isPublic,
+			isPublicDisplayRequired: values.isPublicDisplayRequired ?? false,
 			isAdministrator: values.isAdministrator,
 			isModerator: values.isModerator,
 			isExplorable: values.isExplorable,

packages/backend/src/core/WebhookTestService.ts

@@ -55,6 +55,7 @@ function generateDummyUser(override?: Partial<MiUser>): MiUser {
 		makeNotesHiddenBefore: null,
 		chatScope: 'mutual',
 		emojis: [],
+		hiddenRoleIds: [],
 		score: 0,
 		host: null,
 		inbox: null,

packages/backend/src/core/entities/RoleEntityService.ts

@@ -64,6 +64,7 @@ export class RoleEntityService {
 			target: role.target,
 			condFormula: role.condFormula,
 			isPublic: role.isPublic,
+			isPublicDisplayRequired: role.isPublicDisplayRequired,
 			isAdministrator: role.isAdministrator,
 			isModerator: role.isModerator,
 			isExplorable: role.isExplorable,
@@ -84,4 +85,3 @@ export class RoleEntityService {
 		return Promise.all(roles.map(x => this.pack(x, me)));
 	}
 }
-

packages/backend/src/core/entities/UserEntityService.ts

@@ -14,6 +14,7 @@ import type { Packed } from '@/misc/json-schema.js';
 import type { Promiseable } from '@/misc/prelude/await-all.js';
 import { awaitAll } from '@/misc/prelude/await-all.js';
 import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
+import type { MiRole } from '@/models/Role.js';
 import type { MiLocalUser, MiPartialLocalUser, MiPartialRemoteUser, MiRemoteUser, MiUser } from '@/models/User.js';
 import {
 	birthdaySchema,
@@ -402,6 +403,37 @@ export class UserEntityService implements OnModuleInit {
 		return `${this.config.url}/users/${userId}`;
 	}
 
+	@bindThis
+	private filterHiddenDisplayRoles<T extends Pick<MiRole, 'id' | 'isPublicDisplayRequired'>>(
+		roles: T[],
+		user: MiUser,
+		iAmModerator: boolean,
+		shouldFilterHidden: boolean,
+	): T[] {
+		if (iAmModerator || !shouldFilterHidden || user.hiddenRoleIds.length === 0) return roles;
+
+		const hiddenRoleIds = new Set(user.hiddenRoleIds);
+		return roles.filter(role => role.isPublicDisplayRequired || !hiddenRoleIds.has(role.id));
+	}
+
+	@bindThis
+	private sanitizeHiddenRoleIds(roles: Pick<MiRole, 'id' | 'isPublic' | 'isPublicDisplayRequired'>[], user: MiUser): MiRole['id'][] {
+		const hideableRoleIds = new Set(roles
+			.filter(role => role.isPublic && !role.isPublicDisplayRequired)
+			.map(role => role.id));
+		const sanitizedRoleIds: MiRole['id'][] = [];
+		const seenRoleIds = new Set<MiRole['id']>();
+
+		for (const roleId of user.hiddenRoleIds) {
+			if (!hideableRoleIds.has(roleId) || seenRoleIds.has(roleId)) continue;
+
+			sanitizedRoleIds.push(roleId);
+			seenRoleIds.add(roleId);
+		}
+
+		return sanitizedRoleIds;
+	}
+
 	public async pack<S extends 'MeDetailed' | 'UserDetailedNotMe' | 'UserDetailed' | 'UserLite' = 'UserLite'>(
 		src: MiUser['id'] | MiUser,
 		me?: { id: MiUser['id']; } | null | undefined,
@@ -425,6 +457,7 @@ export class UserEntityService implements OnModuleInit {
 		const meId = me ? me.id : null;
 		const isMe = meId === user.id;
 		const iAmModerator = me ? await this.roleService.isModerator(me as MiUser) : false;
+		const userRoles = isDetailed ? this.roleService.getUserRoles(user.id) : null;
 
 		const profile = isDetailed
 			? (opts.userProfile ?? await this.userProfilesRepository.findOneByOrFail({ userId: user.id }))
@@ -514,10 +547,10 @@ export class UserEntityService implements OnModuleInit {
 			emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
 			onlineStatus: this.getOnlineStatus(user),
 			// パフォーマンス上の理由で、明示的に設定しない場合はローカルユーザーのみ取得
-			badgeRoles: (this.meta.showRoleBadgesOfRemoteUsers || user.host == null) ? this.roleService.getUserBadgeRoles(user.id).then((rs) => rs
-				.filter((r) => r.isPublic || iAmModerator)
+			badgeRoles: (this.meta.showRoleBadgesOfRemoteUsers || user.host == null) ? this.roleService.getUserBadgeRoles(user.id).then((rs) => this.filterHiddenDisplayRoles(rs.filter((r) => r.isPublic || iAmModerator), user, iAmModerator, true)
 				.sort((a, b) => b.displayOrder - a.displayOrder)
 				.map((r) => ({
+					id: r.id,
 					name: r.name,
 					iconUrl: r.iconUrl,
 					displayOrder: r.displayOrder,
@@ -560,7 +593,7 @@ export class UserEntityService implements OnModuleInit {
 				followingVisibility: profile!.followingVisibility,
 				chatScope: user.chatScope,
 				canChat: this.roleService.getUserPolicies(user.id).then(r => r.chatAvailability === 'available'),
-				roles: this.roleService.getUserRoles(user.id).then(roles => roles.filter(role => role.isPublic).sort((a, b) => b.displayOrder - a.displayOrder).map(role => ({
+				roles: userRoles!.then(roles => this.filterHiddenDisplayRoles(roles.filter(role => role.isPublic), user, iAmModerator, !isMe).sort((a, b) => b.displayOrder - a.displayOrder).map(role => ({
 					id: role.id,
 					name: role.name,
 					color: role.color,
@@ -568,6 +601,8 @@ export class UserEntityService implements OnModuleInit {
 					description: role.description,
 					isModerator: role.isModerator,
 					isAdministrator: role.isAdministrator,
+					asBadge: role.asBadge,
+					isPublicDisplayRequired: role.isPublicDisplayRequired,
 					displayOrder: role.displayOrder,
 				}))),
 				memo: memo,
@@ -598,6 +633,7 @@ export class UserEntityService implements OnModuleInit {
 				preventAiLearning: profile!.preventAiLearning,
 				isExplorable: user.isExplorable,
 				isDeleted: user.isDeleted,
+				hiddenRoleIds: userRoles!.then(roles => this.sanitizeHiddenRoleIds(roles, user)),
 				twoFactorBackupCodesStock: profile?.twoFactorBackupSecret?.length === 5 ? 'full' : (profile?.twoFactorBackupSecret?.length ?? 0) > 0 ? 'partial' : 'none',
 				hideOnlineStatus: user.hideOnlineStatus,
 				hasUnreadSpecifiedNotes: false, // 後方互換性のため

packages/backend/src/models/Role.ts

@@ -227,6 +227,11 @@ export class MiRole {
 	})
 	public isPublic: boolean;
 
+	@Column('boolean', {
+		default: false,
+	})
+	public isPublicDisplayRequired: boolean;
+
 	// trueの場合ユーザー名の横にバッジとして表示
 	@Column('boolean', {
 		default: false,

packages/backend/src/models/User.ts

@@ -6,6 +6,7 @@
 import { Entity, Column, Index, OneToOne, JoinColumn, PrimaryColumn } from 'typeorm';
 import { id } from './util/id.js';
 import { MiDriveFile } from './DriveFile.js';
+import type { MiRole } from './Role.js';
 
 @Entity('user')
 @Index(['usernameLower', 'host'], { unique: true })
@@ -229,6 +230,11 @@ export class MiUser {
 	})
 	public emojis: string[];
 
+	@Column('varchar', {
+		length: 32, array: true, default: '{}',
+	})
+	public hiddenRoleIds: MiRole['id'][];
+
 	// チャットを許可する相手
 	// everyone: 誰からでも
 	// followers: フォロワーのみ

packages/backend/src/models/json-schema/role.ts

@@ -369,6 +369,16 @@ export const packedRoleLiteSchema = {
 			optional: false, nullable: false,
 			example: false,
 		},
+		asBadge: {
+			type: 'boolean',
+			optional: false, nullable: false,
+			example: false,
+		},
+		isPublicDisplayRequired: {
+			type: 'boolean',
+			optional: false, nullable: false,
+			example: false,
+		},
 		displayOrder: {
 			type: 'integer',
 			optional: false, nullable: false,
@@ -412,6 +422,11 @@ export const packedRoleSchema = {
 					optional: false, nullable: false,
 					example: false,
 				},
+				isPublicDisplayRequired: {
+					type: 'boolean',
+					optional: false, nullable: false,
+					example: false,
+				},
 				isExplorable: {
 					type: 'boolean',
 					optional: false, nullable: false,

packages/backend/src/models/json-schema/user.ts

@@ -176,6 +176,11 @@ export const packedUserLiteSchema = {
 				type: 'object',
 				nullable: false, optional: false,
 				properties: {
+					id: {
+						type: 'string',
+						nullable: false, optional: false,
+						format: 'id',
+					},
 					name: {
 						type: 'string',
 						nullable: false, optional: false,
@@ -511,6 +516,15 @@ export const packedMeDetailedOnlySchema = {
 			type: 'boolean',
 			nullable: false, optional: false,
 		},
+		hiddenRoleIds: {
+			type: 'array',
+			nullable: false, optional: false,
+			items: {
+				type: 'string',
+				nullable: false, optional: false,
+				format: 'id',
+			},
+		},
 		twoFactorBackupCodesStock: {
 			type: 'string',
 			enum: ['full', 'partial', 'none'],

packages/backend/src/server/api/endpoints/admin/roles/create.ts

@@ -32,6 +32,7 @@ export const paramDef = {
 		target: { type: 'string', enum: ['manual', 'conditional'] },
 		condFormula: { type: 'object' },
 		isPublic: { type: 'boolean' },
+		isPublicDisplayRequired: { type: 'boolean', default: false },
 		isModerator: { type: 'boolean' },
 		isAdministrator: { type: 'boolean' },
 		isExplorable: { type: 'boolean', default: false }, // optional for backward compatibility

packages/backend/src/server/api/endpoints/admin/roles/update.ts

@@ -37,6 +37,7 @@ export const paramDef = {
 		target: { type: 'string', enum: ['manual', 'conditional'] },
 		condFormula: { type: 'object' },
 		isPublic: { type: 'boolean' },
+		isPublicDisplayRequired: { type: 'boolean' },
 		isModerator: { type: 'boolean' },
 		isAdministrator: { type: 'boolean' },
 		isExplorable: { type: 'boolean' },
@@ -75,6 +76,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				target: ps.target,
 				condFormula: ps.condFormula,
 				isPublic: ps.isPublic,
+				isPublicDisplayRequired: ps.isPublicDisplayRequired,
 				isModerator: ps.isModerator,
 				isAdministrator: ps.isAdministrator,
 				isExplorable: ps.isExplorable,

packages/backend/src/server/api/endpoints/i/update.ts

@@ -191,6 +191,12 @@ export const paramDef = {
 		followingVisibility: { type: 'string', enum: ['public', 'followers', 'private'] },
 		followersVisibility: { type: 'string', enum: ['public', 'followers', 'private'] },
 		chatScope: { type: 'string', enum: ['everyone', 'followers', 'following', 'mutual', 'none'] },
+		hiddenRoleIds: {
+			type: 'array',
+			maxItems: 256,
+			uniqueItems: true,
+			items: { type: 'string', format: 'misskey:id' },
+		},
 		pinnedPageId: { type: 'string', format: 'misskey:id', nullable: true },
 		mutedWords: muteWords,
 		hardMutedWords: muteWords,
@@ -293,6 +299,20 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			if (ps.followingVisibility !== undefined) profileUpdates.followingVisibility = ps.followingVisibility;
 			if (ps.followersVisibility !== undefined) profileUpdates.followersVisibility = ps.followersVisibility;
 			if (ps.chatScope !== undefined) updates.chatScope = ps.chatScope;
+			if (ps.hiddenRoleIds !== undefined) {
+				const roles = await this.roleService.getUserRoles(user.id);
+				const allowedRoleIds = new Set(roles.filter(role => role.isPublic && !role.isPublicDisplayRequired).map(role => role.id));
+				const hiddenRoleIds: string[] = [];
+				const seenRoleIds = new Set<string>();
+
+				for (const roleId of ps.hiddenRoleIds) {
+					if (seenRoleIds.has(roleId) || !allowedRoleIds.has(roleId)) continue;
+					seenRoleIds.add(roleId);
+					hiddenRoleIds.push(roleId);
+				}
+
+				updates.hiddenRoleIds = hiddenRoleIds;
+			}
 
 			function checkMuteWordCount(mutedWords: (string[] | string)[], limit: number) {
 				const count = (arr: (string[] | string)[]) => {

packages/backend/test/e2e/users.ts

@@ -128,6 +128,7 @@ describe('ユーザー', () => {
 			preventAiLearning: user.preventAiLearning,
 			isExplorable: user.isExplorable,
 			isDeleted: user.isDeleted,
+			hiddenRoleIds: user.hiddenRoleIds ?? [],
 			twoFactorBackupCodesStock: user.twoFactorBackupCodesStock,
 			hideOnlineStatus: user.hideOnlineStatus,
 			hasUnreadSpecifiedNotes: user.hasUnreadSpecifiedNotes,
@@ -660,12 +661,15 @@ describe('ユーザー', () => {
 			description: rolePublic.description,
 			isModerator: rolePublic.isModerator,
 			isAdministrator: rolePublic.isAdministrator,
+			asBadge: rolePublic.asBadge,
+			isPublicDisplayRequired: rolePublic.isPublicDisplayRequired,
 			displayOrder: rolePublic.displayOrder,
 		}]);
 	});
 	test('を取得することができ、バッヂロールがセットされていること', async () => {
 		const response = await successfulApiCall({ endpoint: 'users/show', parameters: { userId: userRoleBadge.id }, user: alice });
 		assert.deepStrictEqual(response.badgeRoles, [{
+			id: roleBadge.id,
 			name: roleBadge.name,
 			iconUrl: roleBadge.iconUrl,
 			displayOrder: roleBadge.displayOrder,
@@ -678,9 +682,41 @@ describe('ユーザー', () => {
 			description: roleBadge.description,
 			isModerator: roleBadge.isModerator,
 			isAdministrator: roleBadge.isAdministrator,
+			asBadge: roleBadge.asBadge,
+			isPublicDisplayRequired: roleBadge.isPublicDisplayRequired,
 			displayOrder: roleBadge.displayOrder,
 		}]);
 	});
+	test('i/updateでhiddenRoleIdsが保存時に表示可能な割り当て済みロールだけへsanitizeされること', async () => {
+		const user = await signup({ username: 'userHiddenRoles' });
+		const visibleRole = await role(root, { isPublic: true, name: 'Hideable Role' });
+		const secondVisibleRole = await role(root, { isPublic: true, name: 'Second Hideable Role' });
+		const privateRole = await role(root, { isPublic: false, name: 'Private Role' });
+		const forcedRole = await role(root, { isPublic: true, isPublicDisplayRequired: true, name: 'Forced Role' });
+		const unassignedRole = await role(root, { isPublic: true, name: 'Unassigned Role' });
+
+		await api('admin/roles/assign', { userId: user.id, roleId: visibleRole.id }, root);
+		await api('admin/roles/assign', { userId: user.id, roleId: secondVisibleRole.id }, root);
+		await api('admin/roles/assign', { userId: user.id, roleId: privateRole.id }, root);
+		await api('admin/roles/assign', { userId: user.id, roleId: forcedRole.id }, root);
+
+		const response = await successfulApiCall({
+			endpoint: 'i/update',
+			parameters: {
+				hiddenRoleIds: [
+					secondVisibleRole.id,
+					'unknownroleid',
+					unassignedRole.id,
+					privateRole.id,
+					forcedRole.id,
+					visibleRole.id,
+				],
+			},
+			user,
+		});
+
+		assert.deepStrictEqual(response.hiddenRoleIds, [secondVisibleRole.id, visibleRole.id]);
+	});
 	test('をID指定のリスト形式で取得することができる（空）', async () => {
 		const parameters = { userIds: [] };
 		const response = await successfulApiCall({ endpoint: 'users/show', parameters, user: alice });

packages/backend/test/unit/entities/UserEntityService.ts

@@ -14,7 +14,10 @@ import { genAidx } from '@/misc/id/aidx.js';
 import {
 	BlockingsRepository,
 	FollowingsRepository, FollowRequestsRepository,
+	MiRole,
 	MiUserProfile, MutingsRepository, RenoteMutingsRepository,
+	RoleAssignmentsRepository,
+	RolesRepository,
 	UserMemoRepository,
 	UserProfilesRepository,
 	UsersRepository,
@@ -67,6 +70,13 @@ describe('UserEntityService', () => {
 		let blockingRepository: BlockingsRepository;
 		let mutingRepository: MutingsRepository;
 		let renoteMutingsRepository: RenoteMutingsRepository;
+		let rolesRepository: RolesRepository;
+		let roleAssignmentsRepository: RoleAssignmentsRepository;
+		let roleService: RoleService;
+		type RoleServiceCacheController = {
+			rolesCache: { delete(): void };
+			roleAssignmentByUserIdCache: { delete(userId: MiUser['id']): void };
+		};
 
 		async function createUser(userData: Partial<MiUser> = {}, profileData: Partial<MiUserProfile> = {}) {
 			const un = secureRndstr(16);
@@ -87,6 +97,32 @@ describe('UserEntityService', () => {
 			return user;
 		}
 
+		async function createRole(roleData: Partial<MiRole> = {}) {
+			const role = await rolesRepository
+				.insert({
+					id: genAidx(Date.now()),
+					updatedAt: new Date(),
+					lastUsedAt: new Date(),
+					name: '',
+					description: '',
+					...roleData,
+				})
+				.then(x => rolesRepository.findOneByOrFail(x.identifiers[0]));
+
+			(roleService as unknown as RoleServiceCacheController).rolesCache.delete();
+			return role;
+		}
+
+		async function assignRole(user: MiUser, role: MiRole) {
+			await roleAssignmentsRepository.insert({
+				id: genAidx(Date.now()),
+				userId: user.id,
+				roleId: role.id,
+			});
+
+			(roleService as unknown as RoleServiceCacheController).roleAssignmentByUserIdCache.delete(user.id);
+		}
+
 		async function memo(writer: MiUser, target: MiUser, memo: string) {
 			await userMemosRepository.insert({
 				id: genAidx(Date.now()),
@@ -196,6 +232,9 @@ describe('UserEntityService', () => {
 			blockingRepository = app.get<BlockingsRepository>(DI.blockingsRepository);
 			mutingRepository = app.get<MutingsRepository>(DI.mutingsRepository);
 			renoteMutingsRepository = app.get<RenoteMutingsRepository>(DI.renoteMutingsRepository);
+			rolesRepository = app.get<RolesRepository>(DI.rolesRepository);
+			roleAssignmentsRepository = app.get<RoleAssignmentsRepository>(DI.roleAssignmentsRepository);
+			roleService = app.get<RoleService>(RoleService);
 		});
 
 		afterAll(async () => {
@@ -249,6 +288,60 @@ describe('UserEntityService', () => {
 			expect(actual.achievements).toEqual(achievements);
 		});
 
+		test('MeDetailed hiddenRoleIds are sanitized to assigned public non-forced roles in stored order', async() => {
+			const me = await createUser();
+			const visibleRole = await createRole({ name: 'visible', isPublic: true });
+			const secondVisibleRole = await createRole({ name: 'visible2', isPublic: true });
+			const privateRole = await createRole({ name: 'private', isPublic: false });
+			const forcedRole = await createRole({ name: 'forced', isPublic: true, isPublicDisplayRequired: true });
+			const unassignedRole = await createRole({ name: 'unassigned', isPublic: true });
+
+			await assignRole(me, visibleRole);
+			await assignRole(me, secondVisibleRole);
+			await assignRole(me, privateRole);
+			await assignRole(me, forcedRole);
+			await usersRepository.update(me.id, {
+				hiddenRoleIds: [
+					secondVisibleRole.id,
+					'unknownroleid',
+					unassignedRole.id,
+					privateRole.id,
+					forcedRole.id,
+					visibleRole.id,
+					secondVisibleRole.id,
+				],
+			});
+			const updatedMe = await usersRepository.findOneByOrFail({ id: me.id });
+
+			const actual = await service.pack(updatedMe, updatedMe, { schema: 'MeDetailed' });
+
+			expect(actual.hiddenRoleIds).toEqual([secondVisibleRole.id, visibleRole.id]);
+		});
+
+		test('UserDetailed filters hidden display roles for normal viewers, preserves forced roles, and bypasses for moderators', async() => {
+			const [viewer, moderator, target] = await Promise.all([createUser(), createUser(), createUser()]);
+			const hiddenRole = await createRole({ name: 'hidden', isPublic: true, asBadge: true, displayOrder: 30 });
+			const visibleRole = await createRole({ name: 'visible', isPublic: true, asBadge: true, displayOrder: 20 });
+			const forcedRole = await createRole({ name: 'forced', isPublic: true, isPublicDisplayRequired: true, asBadge: true, displayOrder: 10 });
+			const moderatorRole = await createRole({ name: 'moderator', isModerator: true });
+
+			await assignRole(target, hiddenRole);
+			await assignRole(target, visibleRole);
+			await assignRole(target, forcedRole);
+			await assignRole(moderator, moderatorRole);
+			await usersRepository.update(target.id, { hiddenRoleIds: [hiddenRole.id, forcedRole.id] });
+			const updatedTarget = await usersRepository.findOneByOrFail({ id: target.id });
+
+			const normalView = await service.pack(updatedTarget, viewer, { schema: 'UserDetailed' });
+			const moderatorView = await service.pack(updatedTarget, moderator, { schema: 'UserDetailed' });
+
+			expect(normalView.roles.map(role => role.id)).toEqual([visibleRole.id, forcedRole.id]);
+			expect(normalView.badgeRoles?.map(role => role.id)).toEqual([visibleRole.id, forcedRole.id]);
+			expect(normalView.badgeRoles?.every(role => typeof role.id === 'string')).toBe(true);
+			expect(moderatorView.roles.map(role => role.id)).toEqual([hiddenRole.id, visibleRole.id, forcedRole.id]);
+			expect(moderatorView.badgeRoles?.map(role => role.id)).toEqual([hiddenRole.id, visibleRole.id, forcedRole.id]);
+		});
+
 		test('alsoKnownAs as string does not throw', async () => {
 			const me = await createUser();
 			const who = await createUser();

packages/frontend/.storybook/fakes.ts

@@ -357,6 +357,7 @@ export function role(params: {
 	isPublic?: boolean,
 	isExplorable?: boolean,
 	asBadge?: boolean,
+	isPublicDisplayRequired?: boolean,
 	canEditMembersByModerator?: boolean,
 	usersCount?: number,
 }, seed?: string): entities.Role {
@@ -380,6 +381,7 @@ export function role(params: {
 		isPublic: params.isPublic ?? true,
 		isExplorable: params.isExplorable ?? true,
 		asBadge: params.asBadge ?? true,
+		isPublicDisplayRequired: params.isPublicDisplayRequired ?? false,
 		canEditMembersByModerator: params.canEditMembersByModerator ?? false,
 		usersCount: params.usersCount ?? 10,
 		preserveAssignmentOnMoveAccount: false,

packages/frontend/src/components/MkNoteHeader.vue

@@ -13,8 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</MkA>
 	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
 	<div :class="$style.username"><MkAcct :user="note.user"/></div>
-	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
-		<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
+	<div v-if="badgeRoles" :class="$style.badgeRoles">
+		<img v-for="role in badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
 	</div>
 	<div :class="$style.info">
 		<div v-if="mock">
@@ -35,17 +35,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { DI } from '@/di.js';
 
-defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note;
 }>();
 
+type BadgeRoleWithId = NonNullable<Misskey.entities.Note['user']['badgeRoles']>[number] & {
+	id: string;
+};
+
+const badgeRoles = computed(() => props.note.user.badgeRoles as BadgeRoleWithId[] | undefined);
 const mock = inject(DI.mock, false);
 </script>
 

packages/frontend/src/pages/admin/roles.edit.vue

@@ -37,7 +37,7 @@ const props = defineProps<{
 	id?: string;
 }>();
 
-type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
+type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isPublicDisplayRequired' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
 	condFormula: any;
 	policies: any;
 };
@@ -62,6 +62,7 @@ if (props.id) {
 		target: 'manual',
 		condFormula: { id: genId(), type: 'isRemote' },
 		isPublic: false,
+		isPublicDisplayRequired: false,
 		isExplorable: false,
 		asBadge: false,
 		canEditMembersByModerator: false,

packages/frontend/src/pages/admin/roles.editor.vue

@@ -62,6 +62,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #caption>{{ i18n.ts._role.descriptionOfIsPublic }}</template>
 	</MkSwitch>
 
+	<MkSwitch v-if="role.isPublic" v-model="role.isPublicDisplayRequired" :readonly="readonly">
+		<template #label>{{ i18n.ts._role.isPublicDisplayRequired }}</template>
+		<template #caption>{{ i18n.ts._role.descriptionOfIsPublicDisplayRequired }}</template>
+	</MkSwitch>
+
 	<MkSwitch v-model="role.asBadge" :readonly="readonly">
 		<template #label>{{ i18n.ts._role.asBadge }}</template>
 		<template #caption>{{ i18n.ts._role.descriptionOfAsBadge }}</template>
@@ -110,7 +115,7 @@ import { instance } from '@/instance.js';
 import { deepClone } from '@/utility/clone.js';
 import type { PolicyMeta } from './roles.policy-editor.vue';
 
-type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
+type RoleLike = Pick<Misskey.entities.Role, 'name' | 'description' | 'isAdministrator' | 'isModerator' | 'color' | 'iconUrl' | 'target' | 'isPublic' | 'isPublicDisplayRequired' | 'isExplorable' | 'asBadge' | 'canEditMembersByModerator' | 'displayOrder' | 'preserveAssignmentOnMoveAccount'> & {
 	id?: Misskey.entities.Role['id'] | null;
 	condFormula: any;
 	policies: any;
@@ -200,6 +205,7 @@ const save = throttle(100, () => {
 		isAdministrator: role.value.isAdministrator,
 		isModerator: role.value.isModerator,
 		isPublic: role.value.isPublic,
+		isPublicDisplayRequired: role.value.isPublicDisplayRequired,
 		isExplorable: role.value.isExplorable,
 		asBadge: role.value.asBadge,
 		canEditMembersByModerator: role.value.canEditMembersByModerator,

packages/frontend/src/pages/settings/index.vue

@@ -93,6 +93,11 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
 		text: i18n.ts.privacy,
 		to: '/settings/privacy',
 		active: currentPage.value?.route.name === 'privacy',
+	}, {
+		icon: 'ti ti-badges',
+		text: i18n.ts.roleSettings,
+		to: '/settings/roles',
+		active: currentPage.value?.route.name === 'roles',
 	}, {
 		icon: 'ti ti-bell',
 		text: i18n.ts.notifications,

packages/frontend/src/pages/settings/other.vue

@@ -49,17 +49,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['roles']">
-				<MkFolder>
-					<template #icon><SearchIcon><i class="ti ti-badges"></i></SearchIcon></template>
-					<template #label><SearchLabel>{{ i18n.ts.rolesAssignedToMe }}</SearchLabel></template>
-
-					<div class="_gaps_s">
-						<MkRolePreview v-for="role in $i.roles" :key="role.id" :role="role" :forModeration="false"/>
-					</div>
-				</MkFolder>
-			</SearchMarker>
-
 			<SearchMarker :keywords="['account', 'move', 'migration']">
 				<MkFolder>
 					<template #icon><SearchIcon><i class="ti ti-plane"></i></SearchIcon></template>
@@ -166,7 +155,6 @@ import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import FormSection from '@/components/form/section.vue';
 import { prefer } from '@/preferences.js';
-import MkRolePreview from '@/components/MkRolePreview.vue';
 import { signout } from '@/signout.js';
 import { hideAllTips as _hideAllTips, resetAllTips as _resetAllTips } from '@/tips.js';
 import { suggestReload } from '@/utility/reload-suggest.js';

packages/frontend/src/pages/settings/roles.vue

@@ -0,0 +1,100 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<SearchMarker path="/settings/roles" :label="i18n.ts.roleSettings" :keywords="['role', 'badge']" icon="ti ti-badges">
+	<div class="_gaps_m">
+		<SearchMarker :keywords="['roles']">
+			<div class="_gaps_s">
+				<MkInfo v-if="roleDisplayRoles.length === 0">{{ i18n.ts._roleDisplay.noRoles }}</MkInfo>
+				<div v-for="role in roleDisplayRoles" :key="role.id" :class="$style.roleItem">
+					<MkRolePreview :role="role" :forModeration="false"/>
+					<MkSwitch
+						:modelValue="isRoleDisplayShown(role)"
+						:disabled="role.isPublicDisplayRequired"
+						@update:modelValue="value => updateRoleDisplay(role, value)"
+					>
+						<template #label>{{ i18n.ts._roleDisplay.title }}</template>
+						<template v-if="role.isPublicDisplayRequired" #caption>{{ i18n.ts._roleDisplay.alwaysShownByAdmin }}</template>
+					</MkSwitch>
+				</div>
+			</div>
+		</SearchMarker>
+	</div>
+</SearchMarker>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import type * as Misskey from 'misskey-js';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkRolePreview from '@/components/MkRolePreview.vue';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { i18n } from '@/i18n.js';
+import { ensureSignin } from '@/i.js';
+import { definePage } from '@/page.js';
+import { updateCurrentAccount } from '@/accounts.js';
+
+const $i = ensureSignin();
+
+type RoleDisplayRole = Misskey.entities.IResponse['roles'][number] & {
+	isPublicDisplayRequired?: boolean;
+};
+type MeDetailedWithRoleDisplay = Misskey.entities.MeDetailed & {
+	hiddenRoleIds?: string[];
+	roles: RoleDisplayRole[];
+};
+type IUpdateWithHiddenRoleIdsRequest = Misskey.Endpoints['i/update']['req'] & {
+	hiddenRoleIds: string[];
+};
+
+const me = $i as MeDetailedWithRoleDisplay;
+
+const hiddenRoleIds = ref([...getHiddenRoleIds(me)]);
+const roleDisplayRoles = computed(() => me.roles);
+
+function getHiddenRoleIds(user: { hiddenRoleIds?: string[] }): string[] {
+	return user.hiddenRoleIds ?? [];
+}
+
+function isRoleDisplayShown(role: RoleDisplayRole): boolean {
+	return role.isPublicDisplayRequired === true || !hiddenRoleIds.value.includes(role.id);
+}
+
+async function updateRoleDisplay(role: RoleDisplayRole, visible: boolean) {
+	if (role.isPublicDisplayRequired === true) return;
+
+	const nextHiddenRoleIds = new Set(hiddenRoleIds.value);
+	if (visible) {
+		nextHiddenRoleIds.delete(role.id);
+	} else {
+		nextHiddenRoleIds.add(role.id);
+	}
+
+	const nextIds = roleDisplayRoles.value
+		.filter(role => role.isPublicDisplayRequired !== true && nextHiddenRoleIds.has(role.id))
+		.map(role => role.id);
+	const updated = await misskeyApi<MeDetailedWithRoleDisplay, 'i/update', IUpdateWithHiddenRoleIdsRequest>('i/update', {
+		hiddenRoleIds: nextIds,
+	});
+
+	updateCurrentAccount(updated);
+	hiddenRoleIds.value = [...getHiddenRoleIds(updated)];
+}
+
+definePage(() => ({
+	title: i18n.ts.roleSettings,
+	icon: 'ti ti-badges',
+}));
+</script>
+
+<style lang="scss" module>
+.roleItem {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+</style>

packages/frontend/src/pages/user/home.stories.impl.ts

@@ -3,32 +3,82 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import type { StoryObj } from '@storybook/vue3';
+import { expect, waitFor, within } from '@storybook/test';
 import { HttpResponse, http } from 'msw';
 import { userDetailed } from '../../../.storybook/fakes.js';
 import { commonHandlers } from '../../../.storybook/mocks.js';
 import home_ from './home.vue';
+import type { StoryObj } from '@storybook/vue3';
+import { $i } from '@/i.js';
+
+type UserDetailed = ReturnType<typeof userDetailed>;
+type ProfileRole = UserDetailed['roles'][number] & {
+	isPublicDisplayRequired?: boolean;
+};
+type MeRoleDisplay = NonNullable<typeof $i> & {
+	hiddenRoleIds?: string[];
+};
+
+function createProfileRole(id: string, name: string, color: string, isPublicDisplayRequired = false): ProfileRole {
+	return {
+		id,
+		name,
+		color,
+		iconUrl: null,
+		description: `${name} description`,
+		isModerator: false,
+		isAdministrator: false,
+		asBadge: false,
+		displayOrder: 0,
+		isPublicDisplayRequired,
+	};
+}
+
+const visibleRole = createProfileRole('role-display-visible', 'Visible Role', '#3b82f6');
+const hiddenRole = createProfileRole('role-display-hidden', 'Hidden Role', '#ef4444');
+const forcedRole = createProfileRole('role-display-forced', 'Forced Role', '#22c55e', true);
+
+const roleDisplayUser = {
+	...userDetailed(),
+	roles: [visibleRole, hiddenRole, forcedRole],
+};
+
+function setStoryAccount(user: UserDetailed, hiddenRoleIds: string[]): void {
+	if ($i == null) return;
+
+	Object.assign($i as MeRoleDisplay, {
+		id: user.id,
+		username: user.username,
+		host: user.host,
+		name: user.name,
+		hiddenRoleIds,
+	});
+}
+
+function renderHome(args: UserDetailedHomeArgs, hiddenRoleIds: string[] = []) {
+	return {
+		components: {
+			home_,
+		},
+		setup() {
+			setStoryAccount(args.user, hiddenRoleIds);
+
+			return {
+				props: args,
+			};
+		},
+		template: '<home_ v-bind="props" />',
+	};
+}
+
+type UserDetailedHomeArgs = {
+	user: UserDetailed;
+	disableNotes?: boolean;
+};
+
 export const Default = {
 	render(args) {
-		return {
-			components: {
-				home_,
-			},
-			setup() {
-				return {
-					args,
-				};
-			},
-			computed: {
-				props() {
-					return {
-						...this.args,
-					};
-				},
-			},
-			template: '<home_ v-bind="props" />',
-		};
+		return renderHome(args);
 	},
 	args: {
 		user: userDetailed(),
@@ -79,3 +129,21 @@ export const Default = {
 		},
 	},
 } satisfies StoryObj<typeof home_>;
+
+export const RoleDisplayVisibility = {
+	...Default,
+	render(args) {
+		return renderHome(args, [hiddenRole.id]);
+	},
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+
+		await expect(await canvas.findByText(visibleRole.name)).toBeInTheDocument();
+		await expect(await canvas.findByText(forcedRole.name)).toBeInTheDocument();
+		await waitFor(() => expect(canvas.queryByText(hiddenRole.name)).not.toBeInTheDocument());
+	},
+	args: {
+		...Default.args,
+		user: roleDisplayUser,
+	},
+} satisfies StoryObj<typeof home_>;

packages/frontend/src/pages/user/home.vue

@@ -53,8 +53,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<div><MkSparkle><Mfm :plain="true" :text="user.followedMessage" :author="user" class="_selectable"/></MkSparkle></div>
 							</MkFukidashi>
 						</div>
-						<div v-if="user.roles.length > 0" class="roles">
-							<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color ?? '' }">
+						<div v-if="visibleProfileRoles.length > 0" class="roles">
+							<span v-for="role in visibleProfileRoles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color ?? '' }">
 								<MkA v-adaptive-bg :to="`/roles/${role.id}`">
 									<img v-if="role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="role.iconUrl"/>
 									{{ role.name }}
@@ -215,6 +215,13 @@ const props = withDefaults(defineProps<{
 	disableNotes: false,
 });
 
+type ProfileRole = Misskey.entities.UserDetailed['roles'][number] & {
+	isPublicDisplayRequired?: boolean;
+};
+type MeDetailedWithRoleDisplay = Misskey.entities.MeDetailed & {
+	hiddenRoleIds?: string[];
+};
+
 const emit = defineEmits<{
 	(ev: 'showMoreFiles'): void;
 }>();
@@ -222,6 +229,13 @@ const emit = defineEmits<{
 const router = useRouter();
 
 const user = ref(props.user);
+const visibleProfileRoles = computed(() => {
+	const roles = user.value.roles as ProfileRole[];
+	if ($i == null || $i.id !== user.value.id) return roles;
+
+	const hiddenRoleIds = new Set((($i as MeDetailedWithRoleDisplay).hiddenRoleIds) ?? []);
+	return roles.filter(role => role.isPublicDisplayRequired === true || !hiddenRoleIds.has(role.id));
+});
 const narrow = ref<null | boolean>(null);
 const rootEl = useTemplateRef('rootEl');
 const bannerEl = useTemplateRef('bannerEl');

packages/frontend/src/router.definition.ts

@@ -88,6 +88,10 @@ export const ROUTE_DEF = [{
 		path: '/privacy',
 		name: 'privacy',
 		component: page(() => import('@/pages/settings/privacy.vue')),
+	}, {
+		path: '/roles',
+		name: 'roles',
+		component: page(() => import('@/pages/settings/roles.vue')),
 	}, {
 		path: '/emoji-palette',
 		name: 'emoji-palette',

packages/i18n/src/autogen/locale.ts

@@ -4404,6 +4404,10 @@ export interface Locale extends ILocale {
      * 自分に割り当てられたロール
      */
     "rolesAssignedToMe": string;
+    /**
+     * ロール設定
+     */
+    "roleSettings": string;
     /**
      * パスワードリセットしますか？
      */
@@ -8018,6 +8022,14 @@ export interface Locale extends ILocale {
          * ユーザーのプロフィールでこのロールが表示されます。
          */
         "descriptionOfIsPublic": string;
+        /**
+         * 非表示を許可しない（常に表示）
+         */
+        "isPublicDisplayRequired": string;
+        /**
+         * 有効にすると、ユーザーはこの公開ロール/ロールバッジを非表示にできません。
+         */
+        "descriptionOfIsPublicDisplayRequired": string;
         /**
          * オプション
          */
@@ -12171,6 +12183,24 @@ export interface Locale extends ILocale {
             "notUnique": string;
         };
     };
+    "_roleDisplay": {
+        /**
+         * 表示するロール/ロールバッジ
+         */
+        "title": string;
+        /**
+         * 自分のプロフィールやノートに表示する公開ロールを選択します。
+         */
+        "description": string;
+        /**
+         * 管理者により常に表示するよう設定されています。
+         */
+        "alwaysShownByAdmin": string;
+        /**
+         * 表示できる公開ロールはありません。
+         */
+        "noRoles": string;
+    };
     "_roleSelectDialog": {
         /**
          * 選択されていません

packages/misskey-js/src/autogen/types.ts

@@ -4061,6 +4061,8 @@ export type components = {
             /** @enum {string} */
             onlineStatus: 'unknown' | 'online' | 'active' | 'offline';
             badgeRoles?: {
+                /** Format: id */
+                id: string;
                 name: string;
                 iconUrl: string | null;
                 displayOrder: number;
@@ -4151,6 +4153,7 @@ export type components = {
             preventAiLearning: boolean;
             isExplorable: boolean;
             isDeleted: boolean;
+            hiddenRoleIds: string[];
             /** @enum {string} */
             twoFactorBackupCodesStock: 'full' | 'partial' | 'none';
             hideOnlineStatus: boolean;
@@ -5322,6 +5325,10 @@ export type components = {
             isModerator: boolean;
             /** @example false */
             isAdministrator: boolean;
+            /** @example false */
+            asBadge: boolean;
+            /** @example false */
+            isPublicDisplayRequired: boolean;
             /** @example 0 */
             displayOrder: number;
         };
@@ -5336,6 +5343,8 @@ export type components = {
             /** @example false */
             isPublic: boolean;
             /** @example false */
+            isPublicDisplayRequired: boolean;
+            /** @example false */
             isExplorable: boolean;
             /** @example false */
             asBadge: boolean;
@@ -11040,6 +11049,8 @@ export interface operations {
                     target: 'manual' | 'conditional';
                     condFormula: Record<string, never>;
                     isPublic: boolean;
+                    /** @default false */
+                    isPublicDisplayRequired?: boolean;
                     isModerator: boolean;
                     isAdministrator: boolean;
                     /** @default false */
@@ -11375,6 +11386,7 @@ export interface operations {
                     target?: 'manual' | 'conditional';
                     condFormula?: Record<string, never>;
                     isPublic?: boolean;
+                    isPublicDisplayRequired?: boolean;
                     isModerator?: boolean;
                     isAdministrator?: boolean;
                     isExplorable?: boolean;
@@ -27887,6 +27899,7 @@ export interface operations {
                     followersVisibility?: 'public' | 'followers' | 'private';
                     /** @enum {string} */
                     chatScope?: 'everyone' | 'followers' | 'following' | 'mutual' | 'none';
+                    hiddenRoleIds?: string[];
                     /** Format: misskey:id */
                     pinnedPageId?: string | null;
                     mutedWords?: (string[] | string)[];