Update backend-memory-report.mjs

.github/scripts/backend-js-footprint-loader.mjs

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { appendFileSync, statSync } from 'node:fs';
+import { extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const traceFile = process.env.MK_BACKEND_JS_FOOTPRINT_TRACE;
+const jsExtensions = new Set(['.js', '.mjs', '.cjs']);
+
+function recordLoadedFile(kind, url, format) {
+	if (traceFile == null || !url.startsWith('file:')) return;
+
+	let filePath;
+	try {
+		filePath = fileURLToPath(url);
+	} catch {
+		return;
+	}
+
+	const extension = extname(filePath);
+	if (!jsExtensions.has(extension)) return;
+
+	let size = null;
+	try {
+		size = statSync(filePath).size;
+	} catch {
+		return;
+	}
+
+	appendFileSync(traceFile, `${JSON.stringify({
+		kind,
+		format,
+		path: filePath,
+		size,
+		timestamp: Date.now(),
+	})}\n`);
+}
+
+export async function load(url, context, nextLoad) {
+	const result = await nextLoad(url, context);
+	recordLoadedFile('esm', url, result.format ?? context.format ?? null);
+	return result;
+}

.github/scripts/backend-js-footprint-require.cjs

@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+'use strict';
+
+const { appendFileSync, statSync } = require('node:fs');
+const Module = require('node:module');
+const { extname } = require('node:path');
+
+const traceFile = process.env.MK_BACKEND_JS_FOOTPRINT_TRACE;
+const jsExtensions = new Set(['.js', '.mjs', '.cjs']);
+
+function recordLoadedFile(kind, filePath, request) {
+	if (traceFile == null || typeof filePath !== 'string') return;
+
+	const extension = extname(filePath);
+	if (!jsExtensions.has(extension) && extension !== '.node') return;
+
+	let size = null;
+	try {
+		size = statSync(filePath).size;
+	} catch {
+		return;
+	}
+
+	appendFileSync(traceFile, `${JSON.stringify({
+		kind,
+		format: extension === '.node' ? 'native' : 'commonjs',
+		path: filePath,
+		request,
+		size,
+		timestamp: Date.now(),
+	})}\n`);
+}
+
+const originalLoad = Module._load;
+const originalResolveFilename = Module._resolveFilename;
+
+Module._load = function load(request, parent, isMain) {
+	const resolved = originalResolveFilename.call(this, request, parent, isMain);
+	const result = originalLoad.apply(this, arguments);
+	recordLoadedFile('cjs', resolved, request);
+	return result;
+};

.github/scripts/backend-js-footprint.mjs

@@ -0,0 +1,530 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { fork, spawn } from 'node:child_process';
+import { createRequire } from 'node:module';
+import { cpus, tmpdir } from 'node:os';
+import { dirname, extname, join, relative, resolve, sep } from 'node:path';
+import { setTimeout } from 'node:timers/promises';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { gzipSync } from 'node:zlib';
+import * as fs from 'node:fs/promises';
+import * as fsSync from 'node:fs';
+import * as http from 'node:http';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const [repoDirArg, outputFileArg] = process.argv.slice(2);
+
+if (repoDirArg == null || outputFileArg == null) {
+	console.error('Usage: node .github/scripts/backend-js-footprint.mjs <repo-dir> <output.json>');
+	process.exit(1);
+}
+
+const STARTUP_TIMEOUT = readIntegerEnv('MK_JS_FOOTPRINT_STARTUP_TIMEOUT_MS', 120000, 1);
+const SETTLE_TIME = readIntegerEnv('MK_JS_FOOTPRINT_SETTLE_TIME_MS', 10000, 0);
+const REQUEST_COUNT = readIntegerEnv('MK_JS_FOOTPRINT_REQUEST_COUNT', 10, 0);
+const MAX_TABLE_ITEMS = readIntegerEnv('MK_JS_FOOTPRINT_MAX_ITEMS', 20, 1);
+
+const repoDir = resolve(repoDirArg);
+const outputFile = resolve(outputFileArg);
+const backendDir = join(repoDir, 'packages/backend');
+const backendBuiltDir = join(backendDir, 'built');
+const traceFile = join(tmpdir(), `misskey-backend-js-footprint-${process.pid}-${Date.now()}.jsonl`);
+const require = createRequire(join(repoDir, 'package.json'));
+const ts = require('typescript');
+const jsExtensions = new Set(['.js', '.mjs', '.cjs']);
+const fileMetricCache = new Map();
+const packageInfoCache = new Map();
+const nativePackageNames = new Set();
+
+function readIntegerEnv(name, defaultValue, min) {
+	const rawValue = process.env[name];
+	if (rawValue == null || rawValue === '') return defaultValue;
+	if (!/^\d+$/.test(rawValue)) throw new Error(`${name} must be an integer`);
+
+	const value = Number(rawValue);
+	if (!Number.isSafeInteger(value) || value < min) throw new Error(`${name} must be >= ${min}`);
+	return value;
+}
+
+function commandName(command) {
+	if (process.platform !== 'win32') return command;
+	if (command === 'pnpm') return 'pnpm.cmd';
+	return command;
+}
+
+function isInside(parent, child) {
+	const rel = relative(parent, child);
+	return rel === '' || (!rel.startsWith('..') && !rel.includes(`..${sep}`));
+}
+
+function normalizePath(filePath) {
+	return filePath.split(sep).join('/');
+}
+
+function bytesToKiB(value) {
+	return Math.round(value / 1024);
+}
+
+function run(command, args, options = {}) {
+	return new Promise((resolvePromise, reject) => {
+		const child = spawn(commandName(command), args, {
+			cwd: options.cwd,
+			env: options.env,
+			stdio: ['ignore', 'pipe', 'pipe'],
+		});
+
+		let stdout = '';
+		let stderr = '';
+
+		child.stdout.on('data', data => {
+			stdout += data;
+			if (options.logStdout) process.stderr.write(data);
+		});
+
+		child.stderr.on('data', data => {
+			stderr += data;
+			process.stderr.write(data);
+		});
+
+		child.on('error', reject);
+
+		child.on('close', code => {
+			if (code === 0) {
+				resolvePromise(stdout);
+			} else {
+				reject(new Error(`${command} ${args.join(' ')} failed with exit code ${code}\n${stderr}`));
+			}
+		});
+	});
+}
+
+async function resetState() {
+	const backendRequire = createRequire(join(backendDir, 'package.json'));
+	const pg = backendRequire('pg');
+	const Redis = backendRequire('ioredis');
+
+	const postgres = new pg.Client({
+		host: '127.0.0.1',
+		port: 54312,
+		database: 'postgres',
+		user: 'postgres',
+	});
+
+	await postgres.connect();
+	try {
+		await postgres.query('DROP DATABASE IF EXISTS "test-misskey" WITH (FORCE)');
+		await postgres.query('CREATE DATABASE "test-misskey"');
+	} finally {
+		await postgres.end();
+	}
+
+	const redis = new Redis({ host: '127.0.0.1', port: 56312 });
+	try {
+		await redis.flushall();
+	} finally {
+		redis.disconnect();
+	}
+}
+
+function createRequest() {
+	return new Promise((resolvePromise, reject) => {
+		const req = http.request({
+			host: 'localhost',
+			port: 61812,
+			path: '/api/meta',
+			method: 'POST',
+		}, res => {
+			res.on('data', () => { });
+			res.on('end', () => resolvePromise());
+		});
+		req.on('error', reject);
+		req.end();
+	});
+}
+
+async function waitForServerReady(serverProcess) {
+	let serverReady = false;
+	serverProcess.on('message', message => {
+		if (message === 'ok') serverReady = true;
+	});
+
+	const startupStartTime = Date.now();
+	while (!serverReady) {
+		if (Date.now() - startupStartTime > STARTUP_TIMEOUT) {
+			serverProcess.kill('SIGTERM');
+			throw new Error('Server startup timeout');
+		}
+		await setTimeout(100);
+	}
+}
+
+async function stopServer(serverProcess) {
+	serverProcess.kill('SIGTERM');
+
+	let exited = false;
+	await new Promise(resolvePromise => {
+		serverProcess.on('exit', () => {
+			exited = true;
+			resolvePromise(undefined);
+		});
+
+		setTimeout(10000).then(() => {
+			if (!exited) serverProcess.kill('SIGKILL');
+			resolvePromise(undefined);
+		});
+	});
+}
+
+function getPackageNameFromPath(filePath) {
+	const normalized = normalizePath(filePath);
+	const marker = '/node_modules/';
+	const index = normalized.lastIndexOf(marker);
+	if (index === -1) return null;
+
+	const rest = normalized.slice(index + marker.length).split('/');
+	if (rest[0] === '.pnpm') {
+		const nestedNodeModulesIndex = rest.indexOf('node_modules');
+		if (nestedNodeModulesIndex === -1) return null;
+		const packageParts = rest.slice(nestedNodeModulesIndex + 1);
+		if (packageParts.length === 0) return null;
+		return packageParts[0].startsWith('@') ? packageParts.slice(0, 2).join('/') : packageParts[0];
+	}
+
+	return rest[0]?.startsWith('@') ? rest.slice(0, 2).join('/') : rest[0] ?? null;
+}
+
+function findPackageDir(filePath, packageName) {
+	const normalizedPackageName = packageName.split('/').join(sep);
+	let current = dirname(filePath);
+
+	while (current !== dirname(current)) {
+		if (current.endsWith(`${sep}${normalizedPackageName}`) && fsSync.existsSync(join(current, 'package.json'))) {
+			return current;
+		}
+
+		const parent = dirname(current);
+		if (parent === current) break;
+		current = parent;
+	}
+
+	return null;
+}
+
+function readPackageInfo(filePath) {
+	const externalPackageName = getPackageNameFromPath(filePath);
+	if (externalPackageName != null) {
+		const packageDir = findPackageDir(filePath, externalPackageName);
+		const cacheKey = packageDir ?? externalPackageName;
+		if (packageInfoCache.has(cacheKey)) return packageInfoCache.get(cacheKey);
+
+		let version = null;
+		if (packageDir != null) {
+			try {
+				const packageJson = JSON.parse(fsSync.readFileSync(join(packageDir, 'package.json'), 'utf8'));
+				version = typeof packageJson.version === 'string' ? packageJson.version : null;
+			} catch { }
+		}
+
+		const info = {
+			category: 'external',
+			name: externalPackageName,
+			version,
+			dir: packageDir,
+		};
+		packageInfoCache.set(cacheKey, info);
+		return info;
+	}
+
+	if (isInside(backendBuiltDir, filePath)) {
+		return {
+			category: 'internal',
+			name: 'backend',
+			version: null,
+			dir: backendDir,
+		};
+	}
+
+	return {
+		category: 'internal',
+		name: 'workspace',
+		version: null,
+		dir: repoDir,
+	};
+}
+
+function analyzeSource(filePath, source) {
+	const sourceFile = ts.createSourceFile(filePath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.JS);
+	const metrics = {
+		astNodeCount: 0,
+		functionCount: 0,
+		classCount: 0,
+		stringLiteralBytes: 0,
+	};
+
+	function visit(node) {
+		metrics.astNodeCount += 1;
+
+		if (
+			ts.isFunctionDeclaration(node) ||
+			ts.isFunctionExpression(node) ||
+			ts.isArrowFunction(node) ||
+			ts.isMethodDeclaration(node) ||
+			ts.isConstructorDeclaration(node) ||
+			ts.isGetAccessorDeclaration(node) ||
+			ts.isSetAccessorDeclaration(node)
+		) {
+			metrics.functionCount += 1;
+		} else if (ts.isClassDeclaration(node) || ts.isClassExpression(node)) {
+			metrics.classCount += 1;
+		} else if (ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node)) {
+			metrics.stringLiteralBytes += Buffer.byteLength(node.text);
+		}
+
+		ts.forEachChild(node, visit);
+	}
+
+	visit(sourceFile);
+	return metrics;
+}
+
+function readFileMetrics(filePath) {
+	if (fileMetricCache.has(filePath)) return fileMetricCache.get(filePath);
+
+	const source = fsSync.readFileSync(filePath);
+	const sourceText = source.toString('utf8');
+	const astMetrics = analyzeSource(filePath, sourceText);
+	const packageInfo = readPackageInfo(filePath);
+	const metric = {
+		path: filePath,
+		displayPath: normalizePath(relative(repoDir, filePath)),
+		sourceBytes: source.byteLength,
+		gzipBytes: gzipSync(source).byteLength,
+		...astMetrics,
+		package: packageInfo,
+	};
+
+	fileMetricCache.set(filePath, metric);
+	return metric;
+}
+
+async function readTraceRecords() {
+	let content = '';
+	try {
+		content = await fs.readFile(traceFile, 'utf8');
+	} catch (err) {
+		if (err.code === 'ENOENT') return [];
+		throw err;
+	}
+
+	const records = [];
+	for (const line of content.split('\n')) {
+		if (line.trim() === '') continue;
+		try {
+			records.push(JSON.parse(line));
+		} catch { }
+	}
+	return records;
+}
+
+function emptyTotals() {
+	return {
+		loadedJsModules: 0,
+		loadedJsSourceBytes: 0,
+		loadedJsGzipBytes: 0,
+		astNodeCount: 0,
+		functionCount: 0,
+		classCount: 0,
+		stringLiteralBytes: 0,
+		externalPackageCount: 0,
+		nativeAddonPackageCount: 0,
+	};
+}
+
+function addFileMetrics(target, metric) {
+	target.loadedJsModules += 1;
+	target.loadedJsSourceBytes += metric.sourceBytes;
+	target.loadedJsGzipBytes += metric.gzipBytes;
+	target.astNodeCount += metric.astNodeCount;
+	target.functionCount += metric.functionCount;
+	target.classCount += metric.classCount;
+	target.stringLiteralBytes += metric.stringLiteralBytes;
+}
+
+function summarizeRecords(records, phase) {
+	const jsPaths = new Set();
+	const nativePaths = new Set();
+
+	for (const record of records) {
+		if (typeof record.path !== 'string') continue;
+
+		const extension = extname(record.path);
+		if (jsExtensions.has(extension)) {
+			jsPaths.add(resolve(record.path));
+		} else if (extension === '.node') {
+			nativePaths.add(resolve(record.path));
+		}
+	}
+
+	for (const nativePath of nativePaths) {
+		const packageInfo = readPackageInfo(nativePath);
+		if (packageInfo.category === 'external') nativePackageNames.add(packageInfo.name);
+	}
+
+	const totals = emptyTotals();
+	const packages = new Map();
+	const modules = [];
+
+	for (const filePath of [...jsPaths].toSorted()) {
+		let metric;
+		try {
+			metric = readFileMetrics(filePath);
+		} catch (err) {
+			process.stderr.write(`Failed to analyze ${filePath}: ${err.message}\n`);
+			continue;
+		}
+
+		addFileMetrics(totals, metric);
+
+		const packageKey = metric.package.name;
+		if (!packages.has(packageKey)) {
+			packages.set(packageKey, {
+				name: metric.package.name,
+				version: metric.package.version,
+				category: metric.package.category,
+				sourceBytes: 0,
+				gzipBytes: 0,
+				modules: 0,
+				astNodeCount: 0,
+				functionCount: 0,
+				classCount: 0,
+				stringLiteralBytes: 0,
+				nativeAddon: false,
+			});
+		}
+
+		const packageSummary = packages.get(packageKey);
+		packageSummary.sourceBytes += metric.sourceBytes;
+		packageSummary.gzipBytes += metric.gzipBytes;
+		packageSummary.modules += 1;
+		packageSummary.astNodeCount += metric.astNodeCount;
+		packageSummary.functionCount += metric.functionCount;
+		packageSummary.classCount += metric.classCount;
+		packageSummary.stringLiteralBytes += metric.stringLiteralBytes;
+
+		modules.push({
+			path: metric.displayPath,
+			package: metric.package.name,
+			category: metric.package.category,
+			sourceBytes: metric.sourceBytes,
+			gzipBytes: metric.gzipBytes,
+			astNodeCount: metric.astNodeCount,
+			functionCount: metric.functionCount,
+			classCount: metric.classCount,
+			stringLiteralBytes: metric.stringLiteralBytes,
+		});
+	}
+
+	for (const packageName of nativePackageNames) {
+		const packageSummary = packages.get(packageName);
+		if (packageSummary != null) packageSummary.nativeAddon = true;
+	}
+
+	const externalPackages = [...packages.values()].filter(packageSummary => packageSummary.category === 'external');
+	totals.externalPackageCount = externalPackages.length;
+	totals.nativeAddonPackageCount = externalPackages.filter(packageSummary => packageSummary.nativeAddon).length;
+
+	return {
+		phase,
+		totals: {
+			...totals,
+			loadedJsSourceKiB: bytesToKiB(totals.loadedJsSourceBytes),
+			loadedJsGzipKiB: bytesToKiB(totals.loadedJsGzipBytes),
+			stringLiteralKiB: bytesToKiB(totals.stringLiteralBytes),
+		},
+		packages: [...packages.values()].toSorted((a, b) => b.sourceBytes - a.sourceBytes),
+		modules: modules.toSorted((a, b) => b.sourceBytes - a.sourceBytes).slice(0, MAX_TABLE_ITEMS),
+	};
+}
+
+async function measureFootprint() {
+	await fs.writeFile(traceFile, '');
+
+	process.stderr.write('Resetting database and Redis\n');
+	await resetState();
+
+	process.stderr.write('Running migrations\n');
+	await run('pnpm', ['--filter', 'backend', 'migrate'], {
+		cwd: repoDir,
+		env: process.env,
+		logStdout: true,
+	});
+
+	const serverProcess = fork(join(backendBuiltDir, 'entry.js'), [], {
+		cwd: backendDir,
+		env: {
+			...process.env,
+			NODE_ENV: 'production',
+			MK_DISABLE_CLUSTERING: '1',
+			MK_ONLY_SERVER: '1',
+			MK_NO_DAEMONS: '1',
+			MK_BACKEND_JS_FOOTPRINT_TRACE: traceFile,
+		},
+		stdio: ['pipe', 'pipe', 'pipe', 'ipc'],
+		execArgv: [
+			'--require',
+			join(__dirname, 'backend-js-footprint-require.cjs'),
+			'--experimental-loader',
+			pathToFileURL(join(__dirname, 'backend-js-footprint-loader.mjs')).href,
+		],
+	});
+
+	serverProcess.stdout?.on('data', data => {
+		process.stderr.write(`[server stdout] ${data}`);
+	});
+
+	serverProcess.stderr?.on('data', data => {
+		process.stderr.write(`[server stderr] ${data}`);
+	});
+
+	serverProcess.on('error', err => {
+		process.stderr.write(`[server error] ${err}\n`);
+	});
+
+	try {
+		await waitForServerReady(serverProcess);
+		await setTimeout(SETTLE_TIME);
+
+		const startup = summarizeRecords(await readTraceRecords(), 'startup');
+
+		await Promise.all(
+			Array.from({ length: REQUEST_COUNT }).map(() => createRequest()),
+		);
+		await setTimeout(1000);
+
+		const afterRequest = summarizeRecords(await readTraceRecords(), 'afterRequest');
+
+		return {
+			timestamp: new Date().toISOString(),
+			measurement: {
+				strategy: 'runtime-loader-trace',
+				startupTimeoutMs: STARTUP_TIMEOUT,
+				settleTimeMs: SETTLE_TIME,
+				requestCount: REQUEST_COUNT,
+				cpus: cpus().length,
+			},
+			startup,
+			afterRequest,
+		};
+	} finally {
+		await stopServer(serverProcess);
+		await fs.rm(traceFile, { force: true });
+	}
+}
+
+const result = await measureFootprint();
+await fs.writeFile(outputFile, `${JSON.stringify(result, null, 2)}\n`);

.github/scripts/backend-memory-report.mjs

@@ -1,9 +1,9 @@
 import { readFile, writeFile } from 'node:fs/promises';
 
-const [baseFile, headFile, outputFile] = process.argv.slice(2);
+const [baseFile, headFile, outputFile, baseJsFootprintFile, headJsFootprintFile] = process.argv.slice(2);
 
 if (baseFile == null || headFile == null || outputFile == null) {
-	console.error('Usage: node .github/scripts/backend-memory-report.mjs <base-memory.json> <head-memory.json> <report.md>');
+	console.error('Usage: node .github/scripts/backend-memory-report.mjs <base-memory.json> <head-memory.json> <report.md> [base-js-footprint.json head-js-footprint.json]');
 	process.exit(1);
 }
 
@@ -34,6 +34,13 @@ function formatMemory(valueKiB) {
 	return `${formatNumber(valueKiB / 1024)} MB`;
 }
 
+function formatBytes(value) {
+	if (!Number.isFinite(value)) return '-';
+	if (value < 1024) return `${formatNumber(value)} B`;
+	if (value < 1024 * 1024) return `${formatNumber(value / 1024)} KiB`;
+	return `${formatNumber(value / 1024 / 1024)} MiB`;
+}
+
 function formatPercent(value) {
 	return `${formatNumber(value)}%`;
 }
@@ -174,8 +181,214 @@ function measurementSummary(base, head) {
 	return `_Sample count: base ${baseCount}, head ${headCount}. Values are medians; ± is median absolute deviation._`;
 }
 
+function formatPlainDiff(baseValue, headValue, formatter = formatNumber) {
+	const diff = headValue - baseValue;
+	if (diff === 0) return formatter(0);
+
+	const sign = diff > 0 ? '+' : '-';
+	return `${sign}${formatter(Math.abs(diff))}`;
+}
+
+function formatPlainDiffPercent(baseValue, headValue) {
+	const diff = headValue - baseValue;
+	if (diff === 0) return '0%';
+	if (baseValue <= 0) return '-';
+
+	const sign = diff > 0 ? '+' : '-';
+	return `${sign}${formatPercent(Math.abs((diff * 100) / baseValue))}`;
+}
+
+function getJsFootprintValue(report, phase, key) {
+	const value = report?.[phase]?.totals?.[key];
+	return Number.isFinite(value) ? value : null;
+}
+
+function renderJsFootprintMetricTable(base, head) {
+	const metricRows = [
+		['Loaded JS modules', 'loadedJsModules', formatNumber],
+		['Loaded JS source', 'loadedJsSourceBytes', formatBytes],
+		//['Loaded JS gzip estimate', 'loadedJsGzipBytes', formatBytes],
+		//['AST nodes', 'astNodeCount', formatNumber],
+		//['Functions', 'functionCount', formatNumber],
+		//['Classes', 'classCount', formatNumber],
+		//['String literals', 'stringLiteralBytes', formatBytes],
+		['External packages loaded', 'externalPackageCount', formatNumber],
+		['Native addon packages', 'nativeAddonPackageCount', formatNumber],
+	];
+
+	const lines = [
+		'| Metric | Base | Head | Δ | Δ (%) |',
+		'| --- | ---: | ---: | ---: | ---: |',
+	];
+
+	for (const [title, key, formatter] of metricRows) {
+		const baseValue = getJsFootprintValue(base, 'afterRequest', key);
+		const headValue = getJsFootprintValue(head, 'afterRequest', key);
+		if (baseValue == null || headValue == null) continue;
+
+		lines.push(`| ${title} | ${formatter(baseValue)} | ${formatter(headValue)} | ${formatPlainDiff(baseValue, headValue, formatter)} | ${formatPlainDiffPercent(baseValue, headValue)} |`);
+	}
+
+	return lines.join('\n');
+}
+
+function renderJsFootprintPhaseTable(base, head) {
+	const lines = [
+		'| Phase | Base modules | Head modules | Δ modules | Base source | Head source | Δ source |',
+		'| --- | ---: | ---: | ---: | ---: | ---: | ---: |',
+	];
+
+	for (const [phase, title] of [['startup', 'Startup'], ['afterRequest', 'After warmup requests']]) {
+		const baseModules = getJsFootprintValue(base, phase, 'loadedJsModules');
+		const headModules = getJsFootprintValue(head, phase, 'loadedJsModules');
+		const baseSource = getJsFootprintValue(base, phase, 'loadedJsSourceBytes');
+		const headSource = getJsFootprintValue(head, phase, 'loadedJsSourceBytes');
+		if (baseModules == null || headModules == null || baseSource == null || headSource == null) continue;
+
+		lines.push(`| ${title} | ${formatNumber(baseModules)} | ${formatNumber(headModules)} | ${formatPlainDiff(baseModules, headModules)} | ${formatBytes(baseSource)} | ${formatBytes(headSource)} | ${formatPlainDiff(baseSource, headSource, formatBytes)} |`);
+	}
+
+	return lines.join('\n');
+}
+
+function packageMap(report) {
+	const map = new Map();
+	for (const packageSummary of report?.afterRequest?.packages ?? []) {
+		if (packageSummary?.category !== 'external' || typeof packageSummary.name !== 'string') continue;
+		map.set(packageSummary.name, packageSummary);
+	}
+	return map;
+}
+
+function packageDisplayName(packageSummary) {
+	if (packageSummary.version == null) return packageSummary.name;
+	return `${packageSummary.name} ${packageSummary.version}`;
+}
+
+function renderNewExternalPackages(base, head) {
+	const basePackages = packageMap(base);
+	const headPackages = packageMap(head);
+	const newPackages = [...headPackages.values()]
+		.filter(packageSummary => !basePackages.has(packageSummary.name))
+		.toSorted((a, b) => b.sourceBytes - a.sourceBytes)
+		.slice(0, 10);
+
+	if (newPackages.length === 0) return null;
+
+	const lines = [
+		'#### Newly Loaded External Packages',
+		'',
+		'| Package | Loaded JS | Modules | Notes |',
+		'| --- | ---: | ---: | --- |',
+	];
+
+	for (const packageSummary of newPackages) {
+		lines.push(`| ${packageDisplayName(packageSummary)} | ${formatBytes(packageSummary.sourceBytes)} | ${formatNumber(packageSummary.modules)} | ${packageSummary.nativeAddon ? 'native addon' : ''} |`);
+	}
+
+	return lines.join('\n');
+}
+
+function renderLargestPackageIncreases(base, head) {
+	const basePackages = packageMap(base);
+	const headPackages = packageMap(head);
+	const increases = [...headPackages.values()]
+		.map(headPackage => {
+			const basePackage = basePackages.get(headPackage.name);
+			const baseSourceBytes = basePackage?.sourceBytes ?? 0;
+			const baseModules = basePackage?.modules ?? 0;
+			return {
+				...headPackage,
+				baseSourceBytes,
+				baseModules,
+				sourceDiff: headPackage.sourceBytes - baseSourceBytes,
+				moduleDiff: headPackage.modules - baseModules,
+			};
+		})
+		.filter(packageSummary => packageSummary.sourceDiff > 0)
+		.toSorted((a, b) => b.sourceDiff - a.sourceDiff)
+		.slice(0, 10);
+
+	if (increases.length === 0) return null;
+
+	const lines = [
+		'#### Largest Package Increases',
+		'',
+		'| Package | Base | Head | Δ | Modules Δ |',
+		'| --- | ---: | ---: | ---: | ---: |',
+	];
+
+	for (const packageSummary of increases) {
+		lines.push(`| ${packageDisplayName(packageSummary)} | ${formatBytes(packageSummary.baseSourceBytes)} | ${formatBytes(packageSummary.sourceBytes)} | ${formatPlainDiff(packageSummary.baseSourceBytes, packageSummary.sourceBytes, formatBytes)} | ${formatPlainDiff(packageSummary.baseModules, packageSummary.modules)} |`);
+	}
+
+	return lines.join('\n');
+}
+
+function moduleMap(report) {
+	const map = new Map();
+	for (const moduleSummary of report?.afterRequest?.modules ?? []) {
+		if (typeof moduleSummary.path !== 'string') continue;
+		map.set(moduleSummary.path, moduleSummary);
+	}
+	return map;
+}
+
+function renderNewLoadedModules(base, head) {
+	const baseModules = moduleMap(base);
+	const headModules = moduleMap(head);
+	const newModules = [...headModules.values()]
+		.filter(moduleSummary => !baseModules.has(moduleSummary.path))
+		.toSorted((a, b) => b.sourceBytes - a.sourceBytes)
+		.slice(0, 10);
+
+	if (newModules.length === 0) return null;
+
+	const lines = [
+		'#### Largest Newly Loaded Modules',
+		'',
+		'| Module | Package | Loaded JS |',
+		'| --- | --- | ---: |',
+	];
+
+	for (const moduleSummary of newModules) {
+		lines.push(`| \`${moduleSummary.path}\` | ${moduleSummary.package} | ${formatBytes(moduleSummary.sourceBytes)} |`);
+	}
+
+	return lines.join('\n');
+}
+
+function renderJsFootprintSection(base, head) {
+	if (base == null || head == null) return null;
+
+	const lines = [
+		'### Runtime Loaded JS Footprint',
+		'',
+		renderJsFootprintMetricTable(base, head),
+		'',
+		'#### Load Phase Breakdown',
+		'',
+		renderJsFootprintPhaseTable(base, head),
+		'',
+	];
+
+	for (const block of [
+		renderNewExternalPackages(base, head),
+		renderLargestPackageIncreases(base, head),
+		renderNewLoadedModules(base, head),
+	]) {
+		if (block == null) continue;
+		lines.push(block);
+		lines.push('');
+	}
+
+	return lines.join('\n');
+}
+
 const base = JSON.parse(await readFile(baseFile, 'utf8'));
 const head = JSON.parse(await readFile(headFile, 'utf8'));
+const baseJsFootprint = baseJsFootprintFile == null ? null : JSON.parse(await readFile(baseJsFootprintFile, 'utf8'));
+const headJsFootprint = headJsFootprintFile == null ? null : JSON.parse(await readFile(headJsFootprintFile, 'utf8'));
 const lines = [
 	'## Backend Memory Usage Report',
 	'',
@@ -193,6 +406,12 @@ for (const phase of phases) {
 	lines.push('');
 }
 
+const jsFootprintSection = renderJsFootprintSection(baseJsFootprint, headJsFootprint);
+if (jsFootprintSection != null) {
+	lines.push(jsFootprintSection);
+	lines.push('');
+}
+
 const warningMetric = getWarningMetric(base, head);
 const warningDiffPercent = warningMetric == null ? null : getDiffPercent(base, head, 'afterGc', warningMetric);
 if (warningMetric != null && warningDiffPercent != null && warningDiffPercent > 5 && isBeyondSampleNoise(base, head, 'afterGc', warningMetric)) {

.github/scripts/frontend-bundle-visualizer-report.mjs

@@ -0,0 +1,276 @@
+import { readFile, writeFile } from 'node:fs/promises';
+
+const [beforeFile, afterFile, outputFile] = process.argv.slice(2);
+
+if (beforeFile == null || afterFile == null || outputFile == null) {
+	console.error('Usage: node .github/scripts/frontend-bundle-visualizer-report.mjs <before-stats.json> <after-stats.json> <report.md>');
+	process.exit(1);
+}
+
+const byteFormatter = new Intl.NumberFormat('en-US');
+const numberFormatter = new Intl.NumberFormat('en-US');
+
+function formatBytes(value) {
+	if (!Number.isFinite(value) || value <= 0) return '0 B';
+
+	const units = ['B', 'KiB', 'MiB', 'GiB'];
+	let unitIndex = 0;
+	let size = value;
+	while (size >= 1024 && unitIndex < units.length - 1) {
+		size /= 1024;
+		unitIndex += 1;
+	}
+
+	const maximumFractionDigits = size >= 10 || unitIndex === 0 ? 0 : 1;
+	return `${byteFormatter.format(Number(size.toFixed(maximumFractionDigits)))} ${units[unitIndex]}`;
+}
+
+function formatNumber(value) {
+	return numberFormatter.format(value);
+}
+
+function formatPercent(value) {
+	return `${Math.round(value)}%`;
+}
+
+function sharePercent(value, total) {
+	if (total === 0) return '0%';
+	return formatPercent((value / total) * 100);
+}
+
+function formatMathText(text) {
+	return text
+		.replaceAll('\\', '\\\\')
+		.replaceAll('{', '\\{')
+		.replaceAll('}', '\\}')
+		.replaceAll('%', '\\%');
+}
+
+function formatColoredDiff(text, diff) {
+	const color = diff > 0 ? 'orange' : 'green';
+	return `$\\color{${color}}{\\text{${formatMathText(text)}}}$`;
+}
+
+function formatDiff(before, after, formatter) {
+	const diff = after - before;
+	if (diff === 0) return formatter(0);
+
+	const sign = diff > 0 ? '+' : '-';
+	return formatColoredDiff(`${sign}${formatter(Math.abs(diff))}`, diff);
+}
+
+function formatDiffPercent(before, after) {
+	if (before === 0 && after === 0) return '0%';
+	if (before === 0) return '-';
+
+	const diff = after - before;
+	if (diff === 0) return '0%';
+
+	const sign = diff > 0 ? '+' : '-';
+	return formatColoredDiff(`${sign}${formatPercent(Math.abs(diff / before) * 100)}`, diff);
+}
+
+function tableCell(value) {
+	return String(value).replaceAll('|', '\\|').replaceAll('\r', ' ').replaceAll('\n', ' ');
+}
+
+function code(value) {
+	const sanitized = String(value).replaceAll('\r', ' ').replaceAll('\n', ' ');
+	const backtickRuns = sanitized.match(/`+/g) ?? [];
+	const fenceLength = Math.max(1, ...backtickRuns.map((run) => run.length + 1));
+	const fence = '`'.repeat(fenceLength);
+	const padding = sanitized.startsWith('`') || sanitized.endsWith('`') ? ' ' : '';
+
+	return `${fence}${padding}${sanitized}${padding}${fence}`;
+}
+
+function tableCode(value) {
+	return tableCell(code(value));
+}
+
+function collectReport(data) {
+	const nodeParts = data.nodeParts ?? {};
+	const nodeMetas = Object.values(data.nodeMetas ?? {});
+	const moduleRows = [];
+	const bundleMap = new Map();
+
+	for (const meta of nodeMetas) {
+		const row = {
+			id: meta.id,
+			bundles: 0,
+			renderedLength: 0,
+			gzipLength: 0,
+			brotliLength: 0,
+			importedByCount: meta.importedBy?.length ?? 0,
+			importedCount: meta.imported?.length ?? 0,
+		};
+
+		for (const [bundleId, partUid] of Object.entries(meta.moduleParts ?? {})) {
+			const part = nodeParts[partUid];
+			if (part == null) continue;
+
+			row.bundles += 1;
+			row.renderedLength += part.renderedLength;
+			row.gzipLength += part.gzipLength;
+			row.brotliLength += part.brotliLength;
+
+			const bundle = bundleMap.get(bundleId) ?? {
+				id: bundleId,
+				modules: 0,
+				renderedLength: 0,
+				gzipLength: 0,
+				brotliLength: 0,
+			};
+			bundle.modules += 1;
+			bundle.renderedLength += part.renderedLength;
+			bundle.gzipLength += part.gzipLength;
+			bundle.brotliLength += part.brotliLength;
+			bundleMap.set(bundleId, bundle);
+		}
+
+		if (row.bundles > 0) {
+			moduleRows.push(row);
+		}
+	}
+
+	let staticImports = 0;
+	let dynamicImports = 0;
+	for (const meta of nodeMetas) {
+		for (const imported of meta.imported ?? []) {
+			if (imported.dynamic) {
+				dynamicImports += 1;
+			} else {
+				staticImports += 1;
+			}
+		}
+	}
+
+	const bundleRows = [...bundleMap.values()].sort((a, b) => b.renderedLength - a.renderedLength);
+	const hotModules = [...moduleRows].sort((a, b) => b.renderedLength - a.renderedLength);
+	const totalRendered = moduleRows.reduce((sum, row) => sum + row.renderedLength, 0);
+	const totalGzip = moduleRows.reduce((sum, row) => sum + row.gzipLength, 0);
+	const totalBrotli = moduleRows.reduce((sum, row) => sum + row.brotliLength, 0);
+
+	return {
+		options: data.options ?? {},
+		summary: {
+			bundles: bundleRows.length,
+			modules: moduleRows.length,
+			entries: nodeMetas.filter((meta) => meta.isEntry).length,
+			externals: nodeMetas.filter((meta) => meta.isExternal).length,
+			staticImports,
+			dynamicImports,
+		},
+		metrics: {
+			renderedLength: totalRendered,
+			gzipLength: totalGzip,
+			brotliLength: totalBrotli,
+		},
+		hotModules,
+	};
+}
+
+function renderSummaryTable(before, after) {
+	const summary = [
+		'bundles',
+		'modules',
+		'entries',
+		//'externals',
+		'staticImports',
+		'dynamicImports',
+	];
+
+	const metrics = [
+		'renderedLength',
+		'gzipLength',
+		'brotliLength',
+	];
+
+	return [
+		`<table>`,
+		`<thead>`,
+		`<tr>`,
+		`<th rowspan="2"></th>`,
+		`<th rowspan="2">Bundles</th>`,
+		`<th rowspan="2">Modules</th>`,
+		`<th rowspan="2">Entries</th>`,
+		`<th colspan="2">Imports</th>`,
+		`<th colspan="3">Size</th>`,
+		`</tr>`,
+		`<tr>`,
+		`<th>Static</th>`,
+		`<th>Dynamic</th>`,
+		`<th>Rendered</th>`,
+		`<th>Gzip</th>`,
+		`<th>Brotli</th>`,
+		`</tr>`,
+		`</thead>`,
+		`<tbody>`,
+		`<tr>`,
+		`<th><b>Before</b></th>`,
+		...summary.map((key) => `<td>${formatNumber(before.summary[key])}</td>`),
+		...metrics.map((key) => `<td>${formatBytes(before.metrics[key])}</td>`),
+		`</tr>`,
+		`<tr>`,
+		`<th><b>After</b></th>`,
+		...summary.map((key) => `<td>${formatNumber(after.summary[key])}</td>`),
+		...metrics.map((key) => `<td>${formatBytes(after.metrics[key])}</td>`),
+		`</tr>`,
+		`<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>`,
+		`<tr>`,
+		`<th><b>Δ</b></th>`,
+		...summary.map((key) => `<td>${formatDiff(before.summary[key], after.summary[key], formatNumber)}</td>`),
+		...metrics.map((key) => `<td>${formatDiff(before.metrics[key], after.metrics[key], formatBytes)}</td>`),
+		`</tr>`,
+		`<tr>`,
+		`<th><b>Δ (%)</b></th>`,
+		...summary.map((key) => `<td>${formatDiffPercent(before.summary[key], after.summary[key])}</td>`),
+		...metrics.map((key) => `<td>${formatDiffPercent(before.metrics[key], after.metrics[key])}</td>`),
+		`</tr>`,
+		`</tbody>`,
+		`</table>`,
+	];
+}
+
+const beforeData = JSON.parse(await readFile(beforeFile, 'utf8'));
+const afterData = JSON.parse(await readFile(afterFile, 'utf8'));
+const before = collectReport(beforeData);
+const after = collectReport(afterData);
+const lines = [
+	'## Frontend Bundle Report',
+	'',
+	...renderSummaryTable(before, after),
+	'',
+	'<details>',
+	'<summary>Top 10</summary>',
+	'',
+];
+
+for (const row of after.hotModules.slice(0, 10)) {
+	lines.push(`- ${code(row.id)}: ${sharePercent(row.renderedLength, after.metrics.renderedLength)} (${formatBytes(row.renderedLength)})`);
+}
+
+lines.push(
+	'',
+	'</details>',
+);
+
+lines.push(
+	'',
+	'<details>',
+	'<summary>Hot Modules (Self Size)</summary>',
+	'',
+	'| Module | Bundles | Rendered | Share | Gzip | Brotli | Imports | Imported By |',
+	'|---|---:|---:|---:|---:|---:|---:|---:|',
+);
+
+for (const row of after.hotModules.slice(0, 15)) {
+	lines.push(`| ${tableCode(row.id)} | ${row.bundles} | ${formatBytes(row.renderedLength)} | ${sharePercent(row.renderedLength, after.metrics.renderedLength)} | ${formatBytes(row.gzipLength)} | ${formatBytes(row.brotliLength)} | ${row.importedCount} | ${row.importedByCount} |`);
+}
+
+lines.push(
+	'',
+	'</details>',
+);
+
+await writeFile(outputFile, `${lines.join('\n')}\n`);

.github/scripts/frontend-js-size.mjs

@@ -1,15 +1,8 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
 
 const marker = '<!-- misskey-frontend-js-size -->';
 const locale = process.env.FRONTEND_JS_SIZE_LOCALE || 'ja-JP';
-const byteFormatter = new Intl.NumberFormat('en-US');
-const numberFormatter = new Intl.NumberFormat('en-US');
 
 function normalizePath(filePath) {
 	return filePath.split(path.sep).join('/');
@@ -40,88 +33,47 @@ async function* walk(dir) {
 	}
 }
 
-function formatNumber(value) {
-	return numberFormatter.format(value);
+function formatBytes(size) {
+	if (size == null) return '-';
+	if (size < 1024) return `${size} B`;
+	if (size < 1024 * 1024) return `${stripTrailingZeros((size / 1024).toFixed(1))} KiB`;
+	return `${stripTrailingZeros((size / 1024 / 1024).toFixed(2))} MiB`;
 }
 
-function formatBytes(value) {
-	if (!Number.isFinite(value) || value <= 0) return '0 B';
-
-	const units = ['B', 'KiB', 'MiB', 'GiB'];
-	let unitIndex = 0;
-	let size = value;
-	while (size >= 1024 && unitIndex < units.length - 1) {
-		size /= 1024;
-		unitIndex += 1;
-	}
-
-	const maximumFractionDigits = size >= 10 || unitIndex === 0 ? 0 : 1;
-	return `${byteFormatter.format(Number(size.toFixed(maximumFractionDigits)))} ${units[unitIndex]}`;
+function stripTrailingZeros(value) {
+	return value.replace(/\.0+$/, '').replace(/(\.\d*?)0+$/, '$1');
 }
 
-function escapeLatex(text) {
+function formatMathText(text) {
 	return text
 		.replaceAll('\\', '\\\\')
 		.replaceAll('{', '\\{')
 		.replaceAll('}', '\\}')
-		.replaceAll('%', '\\%');
+		.replaceAll('%', '\\\\%');
 }
 
-function formatColoredDiff(text, diff) {
-	if (diff === 0) return text;
-	const color = diff > 0 ? 'orange' : 'green';
-	const sign = diff > 0 ? '+' : '-';
-	return `$\\color{${color}}{\\text{${sign}${escapeLatex(text)}}}$`;
-}
-
-function formatNumberDiff(before, after) {
-	if (before == null || after == null) return '-';
-	const diff = after - before;
-	return formatColoredDiff(formatNumber(Math.abs(diff)), diff);
-}
-
-function formatBytesDiff(before, after) {
-	if (before == null || after == null) return '-';
-	const diff = after - before;
+function formatDiff(diff) {
+	if (diff == null) return '-';
 	if (diff === 0) return '0 B';
-	return formatColoredDiff(formatBytes(Math.abs(diff)), diff);
+	const sign = diff > 0 ? '+' : '-';
+	const text = `${sign}${formatBytes(Math.abs(diff))}`;
+	const color = diff > 0 ? 'orange' : 'green';
+	return `$\\color{${color}}{\\text{${formatMathText(text)}}}$`;
 }
 
-function formatDiffPercent(before, after) {
-	if (before == null || before === 0 || after == null || after === 0) return '-';
-	const diff = after - before;
+function formatDiffPercent(beforeSize, afterSize) {
+	if (beforeSize == null || beforeSize === 0 || afterSize == null || afterSize === 0) return '-';
+	const diff = afterSize - beforeSize;
 	if (diff === 0) return `0%`;
-	const percent = Math.round(diff / before * 100);
-	return formatColoredDiff(`${percent}%`, diff);
-}
-
-function sharePercent(value, total) {
-	if (total === 0) return '0%';
-	return Math.round((value / total) * 100) + '%';
+	const percent = Math.round(diff / beforeSize * 100);
+	const color = diff > 0 ? 'orange' : 'green';
+	return `$\\color{${color}}{\\text{${formatMathText(percent.toString() + '%')}}}$`;
 }
 
 function escapeCell(value) {
 	return String(value).replaceAll('|', '\\|').replaceAll('\n', '<br>');
 }
 
-function tableCell(value) {
-	return String(value).replaceAll('|', '\\|').replaceAll('\r', ' ').replaceAll('\n', ' ');
-}
-
-function code(value) {
-	const sanitized = String(value).replaceAll('\r', ' ').replaceAll('\n', ' ');
-	const backtickRuns = sanitized.match(/`+/g) ?? [];
-	const fenceLength = Math.max(1, ...backtickRuns.map((run) => run.length + 1));
-	const fence = '`'.repeat(fenceLength);
-	const padding = sanitized.startsWith('`') || sanitized.endsWith('`') ? ' ' : '';
-
-	return `${fence}${padding}${sanitized}${padding}${fence}`;
-}
-
-function tableCode(value) {
-	return tableCell(code(value));
-}
-
 function entryDisplayName(entry) {
 	if (!entry) return '';
 	return entry.displayName || entry.file;
@@ -222,148 +174,26 @@ async function collectReport(repoDir) {
 	};
 }
 
-function collectVisualizerReport(data) {
-	const nodeParts = data.nodeParts ?? {};
-	const nodeMetas = Object.values(data.nodeMetas ?? {});
-	const moduleRows = [];
-	const bundleMap = new Map();
-
-	for (const meta of nodeMetas) {
-		const row = {
-			id: meta.id,
-			bundles: 0,
-			renderedLength: 0,
-			gzipLength: 0,
-			brotliLength: 0,
-			importedByCount: meta.importedBy?.length ?? 0,
-			importedCount: meta.imported?.length ?? 0,
-		};
-
-		for (const [bundleId, partUid] of Object.entries(meta.moduleParts ?? {})) {
-			const part = nodeParts[partUid];
-			if (part == null) continue;
-
-			row.bundles += 1;
-			row.renderedLength += part.renderedLength;
-			row.gzipLength += part.gzipLength;
-			row.brotliLength += part.brotliLength;
-
-			const bundle = bundleMap.get(bundleId) ?? {
-				id: bundleId,
-				modules: 0,
-				renderedLength: 0,
-				gzipLength: 0,
-				brotliLength: 0,
-			};
-			bundle.modules += 1;
-			bundle.renderedLength += part.renderedLength;
-			bundle.gzipLength += part.gzipLength;
-			bundle.brotliLength += part.brotliLength;
-			bundleMap.set(bundleId, bundle);
-		}
-
-		if (row.bundles > 0) {
-			moduleRows.push(row);
-		}
-	}
-
-	let staticImports = 0;
-	let dynamicImports = 0;
-	for (const meta of nodeMetas) {
-		for (const imported of meta.imported ?? []) {
-			if (imported.dynamic) {
-				dynamicImports += 1;
-			} else {
-				staticImports += 1;
-			}
-		}
-	}
-
-	const bundleRows = [...bundleMap.values()].sort((a, b) => b.renderedLength - a.renderedLength);
-	const hotModules = [...moduleRows].sort((a, b) => b.renderedLength - a.renderedLength);
-	const totalRendered = moduleRows.reduce((sum, row) => sum + row.renderedLength, 0);
-	const totalGzip = moduleRows.reduce((sum, row) => sum + row.gzipLength, 0);
-	const totalBrotli = moduleRows.reduce((sum, row) => sum + row.brotliLength, 0);
-
-	return {
-		options: data.options ?? {},
-		summary: {
-			bundles: bundleRows.length,
-			modules: moduleRows.length,
-			entries: nodeMetas.filter((meta) => meta.isEntry).length,
-			externals: nodeMetas.filter((meta) => meta.isExternal).length,
-			staticImports,
-			dynamicImports,
-		},
-		metrics: {
-			renderedLength: totalRendered,
-			gzipLength: totalGzip,
-			brotliLength: totalBrotli,
-		},
-		hotModules,
-	};
+function commonKeys(before, after) {
+	return Object.keys(before.chunks)
+		.filter((key) => after.chunks[key] != null);
 }
 
-function renderVisualizerSummaryTable(before, after) {
-	const summary = [
-		'bundles',
-		'modules',
-		'entries',
-		//'externals',
-		'staticImports',
-		'dynamicImports',
-	];
+function addedKeys(before, after) {
+	return Object.keys(after.chunks)
+		.filter((key) => before.chunks[key] == null);
+}
 
-	const metrics = [
-		'renderedLength',
-		'gzipLength',
-		'brotliLength',
-	];
+function removedKeys(before, after) {
+	return Object.keys(before.chunks)
+		.filter((key) => after.chunks[key] == null);
+}
 
-	return [
-		`<table>`,
-		`<thead>`,
-		`<tr>`,
-		`<th rowspan="2"></th>`,
-		`<th rowspan="2">Bundles</th>`,
-		`<th rowspan="2">Modules</th>`,
-		`<th rowspan="2">Entries</th>`,
-		`<th colspan="2">Imports</th>`,
-		`<th colspan="3">Size</th>`,
-		`</tr>`,
-		`<tr>`,
-		`<th>Static</th>`,
-		`<th>Dynamic</th>`,
-		`<th>Rendered</th>`,
-		`<th>Gzip</th>`,
-		`<th>Brotli</th>`,
-		`</tr>`,
-		`</thead>`,
-		`<tbody>`,
-		`<tr>`,
-		`<th><b>Before</b></th>`,
-		...summary.map((key) => `<td>${formatNumber(before.summary[key])}</td>`),
-		...metrics.map((key) => `<td>${formatBytes(before.metrics[key])}</td>`),
-		`</tr>`,
-		`<tr>`,
-		`<th><b>After</b></th>`,
-		...summary.map((key) => `<td>${formatNumber(after.summary[key])}</td>`),
-		...metrics.map((key) => `<td>${formatBytes(after.metrics[key])}</td>`),
-		`</tr>`,
-		`<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>`,
-		`<tr>`,
-		`<th><b>Δ</b></th>`,
-		...summary.map((key) => `<td>${formatNumberDiff(before.summary[key], after.summary[key])}</td>`),
-		...metrics.map((key) => `<td>${formatBytesDiff(before.metrics[key], after.metrics[key])}</td>`),
-		`</tr>`,
-		`<tr>`,
-		`<th><b>Δ (%)</b></th>`,
-		...summary.map((key) => `<td>${formatDiffPercent(before.summary[key], after.summary[key])}</td>`),
-		...metrics.map((key) => `<td>${formatDiffPercent(before.metrics[key], after.metrics[key])}</td>`),
-		`</tr>`,
-		`</tbody>`,
-		`</table>`,
-	];
+function rowChangeType(beforeEntry, afterEntry, beforeSize, afterSize) {
+	if (beforeEntry == null) return 'added';
+	if (afterEntry == null) return 'removed';
+	if (beforeSize !== afterSize) return 'updated';
+	return 'unchanged';
 }
 
 function getChunkComparisonRows(keys, before, after) {
@@ -378,13 +208,13 @@ function getChunkComparisonRows(keys, before, after) {
 			chunkFile: beforeEntry?.file ?? afterEntry?.file,
 			beforeSize,
 			afterSize,
-			changeType: beforeEntry == null ? 'added' : afterEntry == null ? 'removed' : beforeSize !== afterSize ? 'updated' : 'unchanged',
+			changeType: rowChangeType(beforeEntry, afterEntry, beforeSize, afterSize),
 			sortSize: Math.max(beforeSize, afterSize),
 		};
 	});
 }
 
-function summarizeChunkChanges(rows) {
+function summarizeChanges(rows) {
 	return {
 		updated: rows.filter((row) => row.changeType === 'updated').length,
 		added: rows.filter((row) => row.changeType === 'added').length,
@@ -392,18 +222,18 @@ function summarizeChunkChanges(rows) {
 	};
 }
 
-function formatChunkChangeSummary(label, summary) {
+function formatChangeSummary(label, summary) {
 	return `${label} (${summary.updated} updated, ${summary.added} added, ${summary.removed} removed)`;
 }
 
-function compareChunkComparisonRows(a, b) {
+function compareComparisonRows(a, b) {
 	return Math.abs(b.afterSize - b.beforeSize) - Math.abs(a.afterSize - a.beforeSize)
 		|| (b.afterSize - b.beforeSize) - (a.afterSize - a.beforeSize)
 		|| b.sortSize - a.sortSize
 		|| a.name.localeCompare(b.name);
 }
 
-function chunkMarkdownTable(rows, total) {
+function markdownTable(rows, total) {
 	if (rows.length === 0) return '_No data_';
 
 	const lines = [
@@ -411,142 +241,91 @@ function chunkMarkdownTable(rows, total) {
 		'| --- | ---: | ---: | ---: | ---: |',
 	];
 	if (total != null) {
-		lines.push(`| (total) | ${formatBytes(total.beforeSize)} | ${formatBytes(total.afterSize)} | ${formatBytesDiff(total.beforeSize, total.afterSize)} | ${formatDiffPercent(total.beforeSize, total.afterSize).replaceAll('\\%', '\\\\%')} |`);
+		lines.push(`| (total) | ${formatBytes(total.beforeSize)} | ${formatBytes(total.afterSize)} | ${formatDiff(total.afterSize - total.beforeSize)} | ${formatDiffPercent(total.beforeSize, total.afterSize)} |`);
 		lines.push('| | | | | |');
 	}
 	for (const row of rows) {
 		if (row.changeType === 'added') {
-			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(row.chunkFile)}\` </details> | ${formatBytes(row.beforeSize)} | ${formatBytes(row.afterSize)} | ${formatBytesDiff(row.beforeSize, row.afterSize)} | $\\color{orange}{\\text{(+)}}$ |`);
+			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(row.chunkFile)}\` </details> | ${formatBytes(row.beforeSize)} | ${formatBytes(row.afterSize)} | ${formatDiff(row.afterSize - row.beforeSize)} | $\\color{orange}{\\text{(+)}}$ |`);
 		} else if (row.changeType === 'removed') {
-			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(row.chunkFile)}\` </details> | ${formatBytes(row.beforeSize)} | ${formatBytes(row.afterSize)} | ${formatBytesDiff(row.beforeSize, row.afterSize)} | $\\color{green}{\\text{(-)}}$ |`);
+			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(row.chunkFile)}\` </details> | ${formatBytes(row.beforeSize)} | ${formatBytes(row.afterSize)} | ${formatDiff(row.afterSize - row.beforeSize)} | $\\color{green}{\\text{(-)}}$ |`);
 		} else {
-			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(row.chunkFile)}\` </details> | ${formatBytes(row.beforeSize)} | ${formatBytes(row.afterSize)} | ${formatBytesDiff(row.beforeSize, row.afterSize)} | ${formatDiffPercent(row.beforeSize, row.afterSize).replaceAll('\\%', '\\\\%')} |`);
+			lines.push(`| <details><summary>\`${escapeCell(row.name)}\`</summary> \`${escapeCell(row.chunkFile)}\` </details> | ${formatBytes(row.beforeSize)} | ${formatBytes(row.afterSize)} | ${formatDiff(row.afterSize - row.beforeSize)} | ${formatDiffPercent(row.beforeSize, row.afterSize)} |`);
 		}
 	}
 	return lines.join('\n');
 }
 
-function renderFrontendChunkReport(before, after) {
-	const commonChunkKeys = Object.keys(before.chunks).filter((key) => after.chunks[key] != null);
-	const addedChunkKeys = Object.keys(after.chunks).filter((key) => before.chunks[key] == null);
-	const removedChunkKeys = Object.keys(before.chunks).filter((key) => after.chunks[key] == null);
-	const allChunkKeys = [
-		...commonChunkKeys,
-		...addedChunkKeys,
-		...removedChunkKeys,
-	];
-	//const comparisonRows = getChunkComparisonRows(commonChunkKeys, before, after);
-	const allComparisonRows = getChunkComparisonRows(allChunkKeys, before, after);
+const beforeDir = process.argv[2];
+const afterDir = process.argv[3];
+const outFile = process.argv[4];
+const beforeSha = process.env.BASE_SHA;
+const afterSha = process.env.HEAD_SHA;
 
-	const changedRows = allComparisonRows.filter((row) => row.changeType !== 'unchanged');
-	const diffSummary = summarizeChunkChanges(changedRows);
-	const diffTotal = {
-		beforeSize: allComparisonRows.reduce((sum, row) => sum + row.beforeSize, 0),
-		afterSize: allComparisonRows.reduce((sum, row) => sum + row.afterSize, 0),
-	};
-	const diffRows = changedRows.sort(compareChunkComparisonRows).slice(0, 30); // TODO: 実際に30を超えて切り捨てられたrowがあった場合はその旨をmarkdown内に表示するようにする
-
-	const startupKeys = new Set([
-		...before.startupKeys,
-		...after.startupKeys,
-	]);
-	const startupComparisonRows = getChunkComparisonRows([...startupKeys], before, after);
-	const startupRows = startupComparisonRows.sort(compareChunkComparisonRows);
-	const startupSummary = summarizeChunkChanges(startupComparisonRows);
-	const startupTotal = {
-		beforeSize: startupComparisonRows.reduce((sum, row) => sum + row.beforeSize, 0),
-		afterSize: startupComparisonRows.reduce((sum, row) => sum + row.afterSize, 0),
-	};
-
-	//const largeRows = comparisonRows
-	//	.sort((a, b) => b.sortSize - a.sortSize || a.name.localeCompare(b.name))
-	//	.slice(0, 30);
-
-	return [
-		'<details open>',
-		`<summary>${formatChunkChangeSummary('Chunk size diff', diffSummary)}</summary>`,
-		'',
-		chunkMarkdownTable(diffRows, diffTotal),
-		'',
-		'</details>',
-		'',
-		'<details>',
-		`<summary>${formatChunkChangeSummary('Startup chunk size', startupSummary)}</summary>`,
-		'',
-		chunkMarkdownTable(startupRows, startupTotal),
-		'',
-		`_Startup chunks are the Vite entry for \`src/_boot_.ts\` and its static imports._`,
-		'',
-		'</details>',
-		'',
-		//'<details>',
-		//`<summary>Largest</summary>`,
-		//'',
-		//markdownTable(largeRows),
-		//'',
-		//'</details>',
-		//'',
-	].join('\n');
-}
-
-function renderFrontendBundleReport(before, after) {
-	const lines = [
-		...renderVisualizerSummaryTable(before, after),
-		'',
-		//'<details>',
-		//'<summary>Top 10</summary>',
-		//'',
-	];
-
-	/*
-	for (const row of after.hotModules.slice(0, 10)) {
-		lines.push(`- ${code(row.id)}: ${sharePercent(row.renderedLength, after.metrics.renderedLength)} (${formatBytes(row.renderedLength)})`);
-	}
-
-	lines.push(
-		'',
-		'</details>',
-	);
-
-	lines.push(
-		'',
-		'<details>',
-		'<summary>Hot Modules (Self Size)</summary>',
-		'',
-		'| Module | Bundles | Rendered | Share | Gzip | Brotli | Imports | Imported By |',
-		'|---|---:|---:|---:|---:|---:|---:|---:|',
-	);
-
-	for (const row of after.hotModules.slice(0, 15)) {
-		lines.push(`| ${tableCode(row.id)} | ${row.bundles} | ${formatBytes(row.renderedLength)} | ${sharePercent(row.renderedLength, after.metrics.renderedLength)} | ${formatBytes(row.gzipLength)} | ${formatBytes(row.brotliLength)} | ${row.importedCount} | ${row.importedByCount} |`);
-	}
-
-	lines.push(
-		'',
-		'</details>',
-	);
-	*/
-
-	return lines.join('\n');
-}
-
-const args = process.argv.slice(2);
-const [beforeDir, afterDir, beforeStatsFile, afterStatsFile, outFile] = args;
 const before = await collectReport(beforeDir);
 const after = await collectReport(afterDir);
-const beforeStats = JSON.parse(await fs.readFile(beforeStatsFile, 'utf8'));
-const afterStats = JSON.parse(await fs.readFile(afterStatsFile, 'utf8'));
+
+const commonChunkKeys = commonKeys(before, after);
+const allChunkKeys = [
+	...commonChunkKeys,
+	...addedKeys(before, after),
+	...removedKeys(before, after),
+];
+//const comparisonRows = getChunkComparisonRows(commonChunkKeys, before, after);
+const allComparisonRows = getChunkComparisonRows(allChunkKeys, before, after);
+
+const changedRows = allComparisonRows.filter((row) => row.changeType !== 'unchanged');
+const diffSummary = summarizeChanges(changedRows);
+const diffTotal = {
+	beforeSize: allComparisonRows.reduce((sum, row) => sum + row.beforeSize, 0),
+	afterSize: allComparisonRows.reduce((sum, row) => sum + row.afterSize, 0),
+};
+const diffRows = changedRows.sort(compareComparisonRows).slice(0, 30); // TODO: 実際に30を超えて切り捨てられたrowがあった場合はその旨をmarkdown内に表示するようにする
+
+const startupKeys = new Set([
+	...before.startupKeys,
+	...after.startupKeys,
+]);
+const startupComparisonRows = getChunkComparisonRows([...startupKeys], before, after);
+const startupRows = startupComparisonRows
+	.sort(compareComparisonRows);
+const startupSummary = summarizeChanges(startupComparisonRows);
+const startupTotal = {
+	beforeSize: startupComparisonRows.reduce((sum, row) => sum + row.beforeSize, 0),
+	afterSize: startupComparisonRows.reduce((sum, row) => sum + row.afterSize, 0),
+};
+
+//const largeRows = comparisonRows
+//	.sort((a, b) => b.sortSize - a.sortSize || a.name.localeCompare(b.name))
+//	.slice(0, 30);
 
 const body = [
 	marker,
+	`## Frontend Chunk Report`,
 	'',
-	`## Frontend Bundle Report`,
+	'<details open>',
+	`<summary>${formatChangeSummary('Diffs', diffSummary)}</summary>`,
 	'',
-	renderFrontendChunkReport(before, after),
+	markdownTable(diffRows, diffTotal),
 	'',
-	'## Bundle Stats',
+	'</details>',
 	'',
-	renderFrontendBundleReport(collectVisualizerReport(beforeStats), collectVisualizerReport(afterStats)),
+	'<details>',
+	`<summary>${formatChangeSummary('Startup', startupSummary)}</summary>`,
+	'',
+	markdownTable(startupRows, startupTotal),
+	'',
+	`_Startup chunks are the Vite entry for \`src/_boot_.ts\` and its static imports._`,
+	'',
+	'</details>',
+	'',
+	//'<details>',
+	//`<summary>Largest</summary>`,
+	//'',
+	//markdownTable(largeRows),
+	//'',
+	//'</details>',
+	//'',
 ].join('\n');
 
 await fs.writeFile(outFile, body);

.github/workflows/frontend-bundle-report-comment.yml

@@ -26,6 +26,7 @@ on:
       - pnpm-workspace.yaml
       - .node-version
       - .github/scripts/frontend-js-size.mjs
+      - .github/scripts/frontend-bundle-visualizer-report.mjs
       - .github/workflows/frontend-bundle-report.yml
       - .github/workflows/frontend-bundle-report-comment.yml
 
@@ -184,6 +185,7 @@ jobs:
             const reportMarkers = [jsSizeMarker, visualizerMarker];
             const reportDir = path.join(process.env.RUNNER_TEMP, 'frontend-bundle-report');
             const jsSizeReportPath = path.join(reportDir, 'frontend-js-size-report.md');
+            const visualizerReportPath = path.join(reportDir, 'frontend-bundle-visualizer-report.md');
             const prNumberPath = path.join(reportDir, 'pr-number.txt');
             const headShaPath = path.join(reportDir, 'head-sha.txt');
             const workflowRun = context.payload.workflow_run;
@@ -195,6 +197,10 @@ jobs:
               core.setFailed('The frontend bundle report artifact does not contain frontend-js-size-report.md.');
               return;
             }
+            if (!fs.existsSync(visualizerReportPath)) {
+              core.setFailed('The frontend bundle report artifact does not contain frontend-bundle-visualizer-report.md.');
+              return;
+            }
 
             const artifactHeadSha = fs.existsSync(headShaPath)
               ? fs.readFileSync(headShaPath, 'utf8').trim()
@@ -268,7 +274,11 @@ jobs:
               core.setFailed('The frontend JS size report is missing the expected marker.');
               return;
             }
-            let body = `${jsSizeReport}\n`;
+            const visualizerReport = fs.readFileSync(visualizerReportPath, 'utf8').trim();
+            let body = [
+              jsSizeReport,
+              visualizerReport,
+            ].join('\n\n') + '\n';
 
             const maxCommentLength = 65_000;
             if (body.length > maxCommentLength) {

.github/workflows/frontend-bundle-report.yml

@@ -21,6 +21,7 @@ on:
       - pnpm-workspace.yaml
       - .node-version
       - .github/scripts/frontend-js-size.mjs
+      - .github/scripts/frontend-bundle-visualizer-report.mjs
       - .github/workflows/frontend-bundle-report.yml
       - .github/workflows/frontend-bundle-report-comment.yml
 
@@ -133,7 +134,8 @@ jobs:
           PR_NUMBER: ${{ github.event.pull_request.number }}
         run: |
           REPORT_DIR="$RUNNER_TEMP/frontend-bundle-report"
-          node after/.github/scripts/frontend-js-size.mjs before after "$REPORT_DIR/before-stats.json" "$REPORT_DIR/after-stats.json" "$REPORT_DIR/frontend-js-size-report.md"
+          node after/.github/scripts/frontend-js-size.mjs before after "$REPORT_DIR/frontend-js-size-report.md"
+          node after/.github/scripts/frontend-bundle-visualizer-report.mjs "$REPORT_DIR/before-stats.json" "$REPORT_DIR/after-stats.json" "$REPORT_DIR/frontend-bundle-visualizer-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"
@@ -146,7 +148,10 @@ jobs:
           test -s "$REPORT_DIR/before-stats.json"
           test -s "$REPORT_DIR/after-stats.json"
           test -s "$REPORT_DIR/frontend-js-size-report.md"
+          test -s "$REPORT_DIR/frontend-bundle-visualizer-report.md"
           cat "$REPORT_DIR/frontend-js-size-report.md" >> "$GITHUB_STEP_SUMMARY"
+          printf '\n\n' >> "$GITHUB_STEP_SUMMARY"
+          cat "$REPORT_DIR/frontend-bundle-visualizer-report.md" >> "$GITHUB_STEP_SUMMARY"
 
       - name: Upload bundle report
         if: steps.check-base-visualizer.outputs.supported == 'true'

.github/workflows/get-backend-memory.yml

@@ -10,6 +10,10 @@ on:
       - packages/backend/**
       - packages/misskey-js/**
       - .github/scripts/backend-memory-report.mjs
+      - .github/scripts/measure-backend-memory-comparison.mjs
+      - .github/scripts/backend-js-footprint.mjs
+      - .github/scripts/backend-js-footprint-loader.mjs
+      - .github/scripts/backend-js-footprint-require.cjs
       - .github/workflows/get-backend-memory.yml
       - .github/workflows/report-backend-memory.yml
 
@@ -90,6 +94,10 @@ jobs:
         MK_MEMORY_COMPARE_ROUNDS: 5
         MK_MEMORY_COMPARE_WARMUP_ROUNDS: 1
       run: node head/.github/scripts/measure-backend-memory-comparison.mjs base head memory-base.json memory-head.json
+    - name: Measure backend loaded JS footprint
+      run: |
+        node head/.github/scripts/backend-js-footprint.mjs base js-footprint-base.json
+        node head/.github/scripts/backend-js-footprint.mjs head js-footprint-head.json
     - name: Upload Artifact
       uses: actions/upload-artifact@v7
       with:
@@ -97,6 +105,8 @@ jobs:
         path: |
           memory-base.json
           memory-head.json
+          js-footprint-base.json
+          js-footprint-head.json
 
   save-pr-number:
     runs-on: ubuntu-latest

.github/workflows/report-backend-memory.yml

@@ -53,9 +53,13 @@ jobs:
         run: cat ./artifacts/memory-base.json
       - name: Output head
         run: cat ./artifacts/memory-head.json
+      - name: Output base JS footprint
+        run: cat ./artifacts/js-footprint-base.json
+      - name: Output head JS footprint
+        run: cat ./artifacts/js-footprint-head.json
       - id: build-comment
         name: Build memory comment
-        run: node .github/scripts/backend-memory-report.mjs ./artifacts/memory-base.json ./artifacts/memory-head.json ./output.md
+        run: node .github/scripts/backend-memory-report.mjs ./artifacts/memory-base.json ./artifacts/memory-head.json ./output.md ./artifacts/js-footprint-base.json ./artifacts/js-footprint-head.json
       - uses: thollander/actions-comment-pull-request@v3
         with:
           pr-number: ${{ steps.load-pr-num.outputs.pr-number }}

CHANGELOG.md

@@ -4,8 +4,7 @@
 -
 
 ### Client
-- 2025.4.0 以前の設定情報の移行処理が削除されました
-	- 2025.4.0 から直接 2026.6.0 以上にアップデートする場合は設定が移行されませんので注意してください。移行したい場合は一度 2026.5.1 を経由してください。
+-
 
 ### Server
 -

locales/ja-JP.yml

@@ -1361,11 +1361,14 @@ information: "情報"
 chat: "チャット"
 directMessage: "ダイレクトメッセージ"
 directMessage_short: "メッセージ"
+migrateOldSettings: "旧設定情報を移行"
+migrateOldSettings_description: "通常これは自動で行われていますが、何らかの理由により上手く移行されなかった場合は手動で移行処理をトリガーできます。現在の設定情報は上書きされます。"
 compress: "圧縮"
 right: "右"
 bottom: "下"
 top: "上"
 embed: "埋め込み"
+settingsMigrating: "設定を移行しています。しばらくお待ちください... (後ほど、設定→その他→旧設定情報を移行 で手動で移行することもできます)"
 readonly: "読み取り専用"
 goToDeck: "デッキへ戻る"
 federationJobs: "連合ジョブ"

packages/frontend/src/boot/main-boot.ts

@@ -27,6 +27,7 @@ import { makeHotkey } from '@/utility/hotkey.js';
 import { addCustomEmoji, removeCustomEmojis, updateCustomEmojis } from '@/custom-emojis.js';
 import { prefer } from '@/preferences.js';
 import { updateCurrentAccountPartial } from '@/accounts.js';
+import { migrateOldSettings } from '@/pref-migrate.js';
 import { unisonReload } from '@/utility/unison-reload.js';
 import { isBirthday } from '@/utility/is-birthday.js';
 
@@ -68,6 +69,14 @@ export async function mainBoot() {
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {
 			closed: () => dispose(),
 		});
+
+		// prefereces migration
+		// TODO: そのうち消す
+		if (lastVersion && (compareVersions('2025.3.2-alpha.0', lastVersion) === 1)) {
+			console.log('Preferences migration');
+
+			migrateOldSettings();
+		}
 	}
 
 	try {

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

@@ -145,6 +145,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkButton v-if="storagePersistenceSupported && !storagePersisted" @click="enableStoragePersistence">{{ i18n.ts._settings.settingsPersistence_title }}</MkButton>
 
 		<MkButton @click="forceCloudBackup">{{ i18n.ts._preferencesBackup.forceBackup }}</MkButton>
+
+		<FormSlot>
+			<MkButton danger @click="migrate"><i class="ti ti-refresh"></i> {{ i18n.ts.migrateOldSettings }}</MkButton>
+			<template #caption>{{ i18n.ts.migrateOldSettings_description }}</template>
+		</FormSlot>
 	</div>
 </SearchMarker>
 </template>
@@ -168,6 +173,7 @@ import FormSection from '@/components/form/section.vue';
 import { prefer } from '@/preferences.js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
 import { signout } from '@/signout.js';
+import { migrateOldSettings } from '@/pref-migrate.js';
 import { hideAllTips as _hideAllTips, resetAllTips as _resetAllTips } from '@/tips.js';
 import { suggestReload } from '@/utility/reload-suggest.js';
 import { cloudBackup } from '@/preferences/utility.js';
@@ -213,6 +219,10 @@ async function deleteAccount() {
 	await signout();
 }
 
+function migrate() {
+	migrateOldSettings();
+}
+
 function resetAllTips() {
 	_resetAllTips();
 	os.success();

packages/frontend/src/pref-migrate.ts

@@ -0,0 +1,141 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { DeckProfile } from '@/deck.js';
+import { genId } from '@/utility/id.js';
+import { store } from '@/store.js';
+import { prefer } from '@/preferences.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { deckStore } from '@/ui/deck/deck-store.js';
+import { unisonReload } from '@/utility/unison-reload.js';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
+import type { SoundStore } from '@/preferences/def.js';
+
+// TODO: そのうち消す
+export function migrateOldSettings() {
+	os.waiting({ text: i18n.ts.settingsMigrating });
+
+	store.loaded.then(async () => {
+		misskeyApi('i/registry/get', { scope: ['client'], key: 'themes' }).catch(() => []).then((themes: any) => {
+			if (themes.length > 0) {
+				prefer.commit('themes', themes);
+			}
+		});
+
+		prefer.commit('deck.profile', deckStore.s.profile);
+		misskeyApi('i/registry/keys', {
+			scope: ['client', 'deck', 'profiles'],
+		}).then(async keys => {
+			const profiles: DeckProfile[] = [];
+			for (const key of keys) {
+				const deck = await misskeyApi('i/registry/get', {
+					scope: ['client', 'deck', 'profiles'],
+					key: key,
+				});
+				profiles.push({
+					id: genId(),
+					name: key,
+					columns: deck.columns,
+					layout: deck.layout,
+				});
+			}
+			prefer.commit('deck.profiles', profiles);
+		});
+
+		prefer.commit('emojiPalettes', [{
+			id: 'reactions',
+			name: '',
+			emojis: store.s.reactions,
+		}, {
+			id: 'pinnedEmojis',
+			name: '',
+			emojis: store.s.pinnedEmojis,
+		}]);
+		prefer.commit('emojiPaletteForMain', 'pinnedEmojis');
+		prefer.commit('emojiPaletteForReaction', 'reactions');
+		prefer.commit('overridedDeviceKind', store.s.overridedDeviceKind);
+		prefer.commit('widgets', store.s.widgets);
+		prefer.commit('keepCw', store.s.keepCw);
+		prefer.commit('collapseRenotes', store.s.collapseRenotes);
+		prefer.commit('rememberNoteVisibility', store.s.rememberNoteVisibility);
+		prefer.commit('uploadFolder', store.s.uploadFolder);
+		prefer.commit('menu', [...store.s.menu, 'chat']);
+		prefer.commit('statusbars', store.s.statusbars);
+		prefer.commit('pinnedUserLists', store.s.pinnedUserLists);
+		prefer.commit('serverDisconnectedBehavior', store.s.serverDisconnectedBehavior);
+		prefer.commit('nsfw', store.s.nsfw);
+		prefer.commit('highlightSensitiveMedia', store.s.highlightSensitiveMedia);
+		prefer.commit('animation', store.s.animation);
+		prefer.commit('animatedMfm', store.s.animatedMfm);
+		prefer.commit('advancedMfm', store.s.advancedMfm);
+		prefer.commit('showReactionsCount', store.s.showReactionsCount);
+		prefer.commit('enableQuickAddMfmFunction', store.s.enableQuickAddMfmFunction);
+		prefer.commit('loadRawImages', store.s.loadRawImages);
+		prefer.commit('imageNewTab', store.s.imageNewTab);
+		prefer.commit('disableShowingAnimatedImages', store.s.disableShowingAnimatedImages);
+		prefer.commit('emojiStyle', store.s.emojiStyle);
+		prefer.commit('menuStyle', store.s.menuStyle);
+		prefer.commit('useBlurEffectForModal', store.s.useBlurEffectForModal);
+		prefer.commit('useBlurEffect', store.s.useBlurEffect);
+		prefer.commit('showFixedPostForm', store.s.showFixedPostForm);
+		prefer.commit('showFixedPostFormInChannel', store.s.showFixedPostFormInChannel);
+		prefer.commit('enableInfiniteScroll', store.s.enableInfiniteScroll);
+		prefer.commit('useReactionPickerForContextMenu', store.s.useReactionPickerForContextMenu);
+		prefer.commit('instanceTicker', store.s.instanceTicker);
+		prefer.commit('emojiPickerScale', store.s.emojiPickerScale);
+		prefer.commit('emojiPickerWidth', store.s.emojiPickerWidth);
+		prefer.commit('emojiPickerHeight', store.s.emojiPickerHeight);
+		prefer.commit('emojiPickerStyle', store.s.emojiPickerStyle);
+		prefer.commit('reportError', store.s.reportError);
+		prefer.commit('squareAvatars', store.s.squareAvatars);
+		prefer.commit('showAvatarDecorations', store.s.showAvatarDecorations);
+		prefer.commit('numberOfPageCache', store.s.numberOfPageCache);
+		prefer.commit('showNoteActionsOnlyHover', store.s.showNoteActionsOnlyHover);
+		prefer.commit('showClipButtonInNoteFooter', store.s.showClipButtonInNoteFooter);
+		prefer.commit('reactionsDisplaySize', store.s.reactionsDisplaySize);
+		prefer.commit('limitWidthOfReaction', store.s.limitWidthOfReaction);
+		prefer.commit('forceShowAds', store.s.forceShowAds);
+		prefer.commit('aiChanMode', store.s.aiChanMode);
+		prefer.commit('devMode', store.s.devMode);
+		prefer.commit('mediaListWithOneImageAppearance', store.s.mediaListWithOneImageAppearance);
+		prefer.commit('notificationPosition', store.s.notificationPosition);
+		prefer.commit('notificationStackAxis', store.s.notificationStackAxis);
+		prefer.commit('enableCondensedLine', store.s.enableCondensedLine);
+		prefer.commit('keepScreenOn', store.s.keepScreenOn);
+		prefer.commit('useGroupedNotifications', store.s.useGroupedNotifications);
+		prefer.commit('dataSaver', {
+			...prefer.s.dataSaver,
+			media: store.s.dataSaver.media,
+			avatar: store.s.dataSaver.avatar,
+			urlPreviewThumbnail: store.s.dataSaver.urlPreview,
+			code: store.s.dataSaver.code,
+		});
+		prefer.commit('enableSeasonalScreenEffect', store.s.enableSeasonalScreenEffect);
+		prefer.commit('enableHorizontalSwipe', store.s.enableHorizontalSwipe);
+		prefer.commit('useNativeUiForVideoAudioPlayer', store.s.useNativeUIForVideoAudioPlayer);
+		prefer.commit('keepOriginalFilename', store.s.keepOriginalFilename);
+		prefer.commit('alwaysConfirmFollow', store.s.alwaysConfirmFollow);
+		prefer.commit('confirmWhenRevealingSensitiveMedia', store.s.confirmWhenRevealingSensitiveMedia);
+		prefer.commit('contextMenu', store.s.contextMenu);
+		prefer.commit('skipNoteRender', store.s.skipNoteRender);
+		prefer.commit('showSoftWordMutedWord', store.s.showSoftWordMutedWord);
+		prefer.commit('confirmOnReact', store.s.confirmOnReact);
+		prefer.commit('defaultFollowWithReplies', store.s.defaultWithReplies);
+		prefer.commit('sound.masterVolume', store.s.sound_masterVolume);
+		prefer.commit('sound.notUseSound', store.s.sound_notUseSound);
+		prefer.commit('sound.useSoundOnlyWhenActive', store.s.sound_useSoundOnlyWhenActive);
+		prefer.commit('sound.on.note', store.s.sound_note as SoundStore);
+		prefer.commit('sound.on.noteMy', store.s.sound_noteMy as SoundStore);
+		prefer.commit('sound.on.notification', store.s.sound_notification as SoundStore);
+		prefer.commit('sound.on.reaction', store.s.sound_reaction as SoundStore);
+		prefer.commit('defaultNoteVisibility', store.s.defaultNoteVisibility);
+		prefer.commit('defaultNoteLocalOnly', store.s.defaultNoteLocalOnly);
+
+		window.setTimeout(() => {
+			unisonReload();
+		}, 10000);
+	});
+}

packages/frontend/src/store.ts

@@ -118,6 +118,352 @@ export const store = markRaw(new Pizzax('base', {
 		where: 'device',
 		default: true,
 	},
+
+	//#region TODO: そのうち消す (preferに移行済み)
+	defaultWithReplies: {
+		where: 'account',
+		default: false,
+	},
+	reactions: {
+		where: 'account',
+		default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
+	},
+	pinnedEmojis: {
+		where: 'account',
+		default: [],
+	},
+	widgets: {
+		where: 'account',
+		default: [] as {
+			name: string;
+			id: string;
+			place: string | null;
+			data: Record<string, any>;
+		}[],
+	},
+	overridedDeviceKind: {
+		where: 'device',
+		default: null as DeviceKind | null,
+	},
+	defaultSideView: {
+		where: 'device',
+		default: false,
+	},
+	defaultNoteVisibility: {
+		where: 'account',
+		default: 'public' as (typeof Misskey.noteVisibilities)[number],
+	},
+	defaultNoteLocalOnly: {
+		where: 'account',
+		default: false,
+	},
+	keepCw: {
+		where: 'account',
+		default: true,
+	},
+	collapseRenotes: {
+		where: 'account',
+		default: true,
+	},
+	rememberNoteVisibility: {
+		where: 'account',
+		default: false,
+	},
+	uploadFolder: {
+		where: 'account',
+		default: null as string | null,
+	},
+	keepOriginalUploading: {
+		where: 'account',
+		default: false,
+	},
+	menu: {
+		where: 'deviceAccount',
+		default: [
+			'notifications',
+			'clips',
+			'drive',
+			'followRequests',
+			'-',
+			'explore',
+			'announcements',
+			'search',
+			'-',
+			'ui',
+		],
+	},
+	statusbars: {
+		where: 'deviceAccount',
+		default: [] as {
+			name: string;
+			id: string;
+			type: string;
+			size: 'verySmall' | 'small' | 'medium' | 'large' | 'veryLarge';
+			black: boolean;
+			props: Record<string, any>;
+		}[],
+	},
+	pinnedUserLists: {
+		where: 'deviceAccount',
+		default: [] as Misskey.entities.UserList[],
+	},
+	serverDisconnectedBehavior: {
+		where: 'device',
+		default: 'quiet' as 'quiet' | 'reload' | 'dialog',
+	},
+	nsfw: {
+		where: 'device',
+		default: 'respect' as 'respect' | 'force' | 'ignore',
+	},
+	highlightSensitiveMedia: {
+		where: 'device',
+		default: false,
+	},
+	animation: {
+		where: 'device',
+		default: !prefersReducedMotion,
+	},
+	animatedMfm: {
+		where: 'device',
+		default: !prefersReducedMotion,
+	},
+	advancedMfm: {
+		where: 'device',
+		default: true,
+	},
+	showReactionsCount: {
+		where: 'device',
+		default: false,
+	},
+	enableQuickAddMfmFunction: {
+		where: 'device',
+		default: false,
+	},
+	loadRawImages: {
+		where: 'device',
+		default: false,
+	},
+	imageNewTab: {
+		where: 'device',
+		default: false,
+	},
+	disableShowingAnimatedImages: {
+		where: 'device',
+		default: prefersReducedMotion,
+	},
+	emojiStyle: {
+		where: 'device',
+		default: 'twemoji' as 'twemoji' | 'fluentEmoji' | 'native',
+	},
+	menuStyle: {
+		where: 'device',
+		default: 'auto' as 'auto' | 'popup' | 'drawer',
+	},
+	useBlurEffectForModal: {
+		where: 'device',
+		default: DEFAULT_DEVICE_KIND === 'desktop',
+	},
+	useBlurEffect: {
+		where: 'device',
+		default: DEFAULT_DEVICE_KIND === 'desktop',
+	},
+	showFixedPostForm: {
+		where: 'device',
+		default: false,
+	},
+	showFixedPostFormInChannel: {
+		where: 'device',
+		default: false,
+	},
+	enableInfiniteScroll: {
+		where: 'device',
+		default: true,
+	},
+	useReactionPickerForContextMenu: {
+		where: 'device',
+		default: false,
+	},
+	showGapBetweenNotesInTimeline: {
+		where: 'device',
+		default: false,
+	},
+	instanceTicker: {
+		where: 'device',
+		default: 'remote' as 'none' | 'remote' | 'always',
+	},
+	emojiPickerScale: {
+		where: 'device',
+		default: 1,
+	},
+	emojiPickerWidth: {
+		where: 'device',
+		default: 1,
+	},
+	emojiPickerHeight: {
+		where: 'device',
+		default: 2,
+	},
+	emojiPickerStyle: {
+		where: 'device',
+		default: 'auto' as 'auto' | 'popup' | 'drawer',
+	},
+	reportError: {
+		where: 'device',
+		default: false,
+	},
+	squareAvatars: {
+		where: 'device',
+		default: false,
+	},
+	showAvatarDecorations: {
+		where: 'device',
+		default: true,
+	},
+	numberOfPageCache: {
+		where: 'device',
+		default: 3,
+	},
+	showNoteActionsOnlyHover: {
+		where: 'device',
+		default: false,
+	},
+	showClipButtonInNoteFooter: {
+		where: 'device',
+		default: false,
+	},
+	reactionsDisplaySize: {
+		where: 'device',
+		default: 'medium' as 'small' | 'medium' | 'large',
+	},
+	limitWidthOfReaction: {
+		where: 'device',
+		default: true,
+	},
+	forceShowAds: {
+		where: 'device',
+		default: false,
+	},
+	aiChanMode: {
+		where: 'device',
+		default: false,
+	},
+	devMode: {
+		where: 'device',
+		default: false,
+	},
+	mediaListWithOneImageAppearance: {
+		where: 'device',
+		default: 'expand' as 'expand' | '16_9' | '1_1' | '2_3',
+	},
+	notificationPosition: {
+		where: 'device',
+		default: 'rightBottom' as 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom',
+	},
+	notificationStackAxis: {
+		where: 'device',
+		default: 'horizontal' as 'vertical' | 'horizontal',
+	},
+	enableCondensedLine: {
+		where: 'device',
+		default: true,
+	},
+	keepScreenOn: {
+		where: 'device',
+		default: false,
+	},
+	useGroupedNotifications: {
+		where: 'device',
+		default: true,
+	},
+	dataSaver: {
+		where: 'device',
+		default: {
+			media: false,
+			avatar: false,
+			urlPreview: false,
+			code: false,
+		},
+	},
+	enableSeasonalScreenEffect: {
+		where: 'device',
+		default: false,
+	},
+	enableHorizontalSwipe: {
+		where: 'device',
+		default: true,
+	},
+	useNativeUIForVideoAudioPlayer: {
+		where: 'device',
+		default: false,
+	},
+	keepOriginalFilename: {
+		where: 'device',
+		default: true,
+	},
+	alwaysConfirmFollow: {
+		where: 'device',
+		default: true,
+	},
+	confirmWhenRevealingSensitiveMedia: {
+		where: 'device',
+		default: false,
+	},
+	contextMenu: {
+		where: 'device',
+		default: 'app' as 'app' | 'appWithShift' | 'native',
+	},
+	skipNoteRender: {
+		where: 'device',
+		default: true,
+	},
+	showSoftWordMutedWord: {
+		where: 'device',
+		default: false,
+	},
+	confirmOnReact: {
+		where: 'device',
+		default: false,
+	},
+	hemisphere: {
+		where: 'device',
+		default: hemisphere as 'N' | 'S',
+	},
+	sound_masterVolume: {
+		where: 'device',
+		default: 0.3,
+	},
+	sound_notUseSound: {
+		where: 'device',
+		default: false,
+	},
+	sound_useSoundOnlyWhenActive: {
+		where: 'device',
+		default: false,
+	},
+	sound_note: {
+		where: 'device',
+		default: { type: 'syuilo/n-aec', volume: 1 },
+	},
+	sound_noteMy: {
+		where: 'device',
+		default: { type: 'syuilo/n-cea-4va', volume: 1 },
+	},
+	sound_notification: {
+		where: 'device',
+		default: { type: 'syuilo/n-ea', volume: 1 },
+	},
+	sound_reaction: {
+		where: 'device',
+		default: { type: 'syuilo/bubble2', volume: 1 },
+	},
+	dropAndFusion: {
+		where: 'device',
+		default: {
+			bgmVolume: 0.25,
+			sfxVolume: 1,
+		},
+	},
+	//#endregion
 }));
 
 // TODO: 他のタブと永続化されたstateを同期

packages/i18n/src/autogen/locale.ts

@@ -5456,6 +5456,14 @@ export interface Locale extends ILocale {
      * メッセージ
      */
     "directMessage_short": string;
+    /**
+     * 旧設定情報を移行
+     */
+    "migrateOldSettings": string;
+    /**
+     * 通常これは自動で行われていますが、何らかの理由により上手く移行されなかった場合は手動で移行処理をトリガーできます。現在の設定情報は上書きされます。
+     */
+    "migrateOldSettings_description": string;
     /**
      * 圧縮
      */
@@ -5476,6 +5484,10 @@ export interface Locale extends ILocale {
      * 埋め込み
      */
     "embed": string;
+    /**
+     * 設定を移行しています。しばらくお待ちください... (後ほど、設定→その他→旧設定情報を移行 で手動で移行することもできます)
+     */
+    "settingsMigrating": string;
     /**
      * 読み取り専用
      */