scopes them so they don't stack as siblings of
// the TopBar at the MainApp root.
- switch (tabStore.activeTabId) {
+ switch (activeTabId) {
case "3D":
return
;
case "APPS":
diff --git a/frontend/apps/artcraft/app/src/pages/Stores/TabState.spec.ts b/frontend/apps/artcraft/app/src/pages/Stores/TabState.spec.ts
new file mode 100644
index 0000000000..62f2bdc427
--- /dev/null
+++ b/frontend/apps/artcraft/app/src/pages/Stores/TabState.spec.ts
@@ -0,0 +1,84 @@
+import { beforeEach, expect, it } from "vitest";
+import { useTabStore } from "./TabState";
+import { useSceneStore } from "../../../../../../libs/components/pagedraw/src/lib/stores/SceneState";
+import { Node } from "../../../../../../libs/components/pagedraw/src/lib/Node";
+
+const initialScene = useSceneStore.getInitialState();
+const initialTabs = useTabStore.getInitialState();
+
+beforeEach(() => {
+ useSceneStore.setState(initialScene, true);
+ useTabStore.setState(initialTabs, true);
+});
+
+it("retains decoded images, selection, model metadata, and history across tab changes", async () => {
+ const image = new Node({
+ id: "image", type: "image", x: 10, y: 20, width: 512, height: 512,
+ fill: "transparent", imageFile: new File(["pixels"], "artwork.png"),
+ imageElement: new Image(), modelUrl: "blob:model",
+ });
+ useSceneStore.setState({ drawNodes: [image], selectedNodeIds: [image.id] });
+ useSceneStore.getState().saveState();
+ const before = useSceneStore.getState();
+
+ await useTabStore.getState().setActiveTab("2D");
+ await useTabStore.getState().setActiveTab("APPS");
+ await useTabStore.getState().setActiveTab("2D");
+
+ const after = useSceneStore.getState();
+ expect(after.drawNodes).toBe(before.drawNodes);
+ expect(after.drawNodes[0]).toBe(image);
+ expect(after.selectedNodeIds).toEqual([image.id]);
+ expect(after.history).toBe(before.history);
+ expect(after.historyIndex).toBe(before.historyIndex);
+});
+
+it("keeps redo available when navigating away after undo", async () => {
+ const scene = useSceneStore.getState();
+ useSceneStore.setState({ drawNodes: [rectangle("first")] });
+ scene.saveState();
+ useSceneStore.setState({ drawNodes: [rectangle("first"), rectangle("second")] });
+ scene.saveState();
+ await scene.undo();
+
+ await useTabStore.getState().setActiveTab("2D");
+ await useTabStore.getState().setActiveTab("IMAGE");
+ await useTabStore.getState().setActiveTab("2D");
+ await useSceneStore.getState().redo();
+
+ expect(useSceneStore.getState().drawNodes.map((node) => node.id)).toEqual(["first", "second"]);
+});
+
+it("keeps edits made while away and does not restore an old scene after a gallery reset", async () => {
+ useSceneStore.setState({ drawNodes: [rectangle("old")] });
+ await useTabStore.getState().setActiveTab("2D");
+ await useTabStore.getState().setActiveTab("APPS");
+ useSceneStore.getState().RESET();
+ useSceneStore.setState({ drawNodes: [rectangle("new")] });
+ await useTabStore.getState().setActiveTab("2D");
+ expect(useSceneStore.getState().drawNodes.map((node) => node.id)).toEqual(["new"]);
+});
+
+it("honors the latest rapid navigation request", async () => {
+ await useTabStore.getState().setActiveTab("2D");
+ const results = await Promise.all([
+ useTabStore.getState().setActiveTab("IMAGE"),
+ useTabStore.getState().setActiveTab("VIDEO"),
+ ]);
+ expect(results).toEqual([true, true]);
+ expect(useTabStore.getState().activeTabId).toBe("VIDEO");
+});
+
+it("still exports a portable scene when explicitly requested", async () => {
+ const image = new Node({
+ id: "image", type: "image", x: 0, y: 0, width: 1, height: 1,
+ fill: "transparent", imageFile: new File(["pixels"], "image.png", { type: "image/png" }),
+ });
+ useSceneStore.setState({ drawNodes: [image] });
+ const exported = JSON.parse(await useSceneStore.getState().exportSceneAsJson());
+ expect(exported.drawNodes[0].imageDataUrl).toBe("data:image/png;base64,cGl4ZWxz");
+});
+
+function rectangle(id: string) {
+ return new Node({ id, type: "rectangle", x: 0, y: 0, width: 100, height: 100, fill: "red" });
+}
diff --git a/frontend/apps/artcraft/app/src/pages/Stores/TabState.ts b/frontend/apps/artcraft/app/src/pages/Stores/TabState.ts
index d7c2652a3f..e42a04fff3 100644
--- a/frontend/apps/artcraft/app/src/pages/Stores/TabState.ts
+++ b/frontend/apps/artcraft/app/src/pages/Stores/TabState.ts
@@ -1,5 +1,4 @@
import { create } from "zustand";
-import { useSceneStore } from "@storyteller/ui-pagedraw";
export type TabId =
| "2D"
@@ -42,40 +41,14 @@ export const useTabStore = create
((set, get) => ({
tabData: {},
setActiveTab: async (newTabId) => {
- const currentTabId = get().activeTabId;
-
// Don't do anything if we're already on this tab
- if (currentTabId === newTabId) return true;
+ if (get().activeTabId === newTabId) return true;
- try {
- // Save current 2D state if we're leaving 2D tab
- if (currentTabId === "2D") {
- const sceneStore = useSceneStore.getState();
- const sceneState = await sceneStore.serializeSceneToString();
- set((state) => ({
- tabData: {
- ...state.tabData,
- "2D": sceneState,
- },
- }));
- }
-
- // Load 2D state if we're entering 2D tab
- if (newTabId === "2D") {
- const savedState = get().tabData["2D"];
- if (savedState) {
- const sceneStore = useSceneStore.getState();
- sceneStore.loadSceneFromString(savedState);
- }
- }
-
- // Update active tab
- set({ activeTabId: newTabId });
- return true;
- } catch (error) {
- console.error("Error during tab change:", error);
- return false;
- }
+ // The drawing store outlives its React page. Keep its live image objects,
+ // selection, and undo history when switching tabs. Export/import is for
+ // files; round-tripping here reread every image and rebuilt the scene.
+ set({ activeTabId: newTabId });
+ return true;
},
updateTabData: (tabId, data) => {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index bdd555656c..18561a8b56 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -79,6 +79,7 @@
"@nx/vite": "21.2.3",
"@nx/web": "21.2.3",
"@nx/workspace": "21.2.3",
+ "@playwright/test": "1.63.0",
"@remix-run/node": "^2.16.5",
"@swc-node/register": "~1.9.1",
"@swc/core": "~1.5.7",
@@ -5602,6 +5603,22 @@
"node": ">=14"
}
},
+ "node_modules/@playwright/test": {
+ "version": "1.63.0",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.63.0.tgz",
+ "integrity": "sha512-oxMK4vllB9RK5NQ2l1pq1IfOf2AvnEuj/vYGDj0H2nMtmtZpKtCwt/l00GEO6xjGfpBNAvjovvYdCm50dRQkpQ==",
+ "dev": true,
+ "license": "Apache-2.0",
+ "dependencies": {
+ "playwright": "1.63.0"
+ },
+ "bin": {
+ "playwright": "cli.js"
+ },
+ "engines": {
+ "node": ">=20"
+ }
+ },
"node_modules/@polka/url": {
"version": "1.0.0-next.29",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -19977,6 +19994,35 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/playwright": {
+ "version": "1.63.0",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
+ "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
+ "dev": true,
+ "license": "Apache-2.0",
+ "dependencies": {
+ "playwright-core": "1.63.0"
+ },
+ "bin": {
+ "playwright": "cli.js"
+ },
+ "engines": {
+ "node": ">=20"
+ }
+ },
+ "node_modules/playwright-core": {
+ "version": "1.63.0",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
+ "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
+ "dev": true,
+ "license": "Apache-2.0",
+ "bin": {
+ "playwright-core": "cli.js"
+ },
+ "engines": {
+ "node": ">=20"
+ }
+ },
"node_modules/portfinder": {
"version": "1.0.38",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 331f036e43..d2839da1a8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -2,7 +2,9 @@
"name": "@frontend/source",
"version": "0.0.0",
"license": "MIT",
- "scripts": {},
+ "scripts": {
+ "perf:desktop": "node tools/performance/run.mjs"
+ },
"private": true,
"dependencies": {
"@dnd-kit/core": "^6.3.1",
@@ -68,6 +70,7 @@
"@nx/vite": "21.2.3",
"@nx/web": "21.2.3",
"@nx/workspace": "21.2.3",
+ "@playwright/test": "1.63.0",
"@remix-run/node": "^2.16.5",
"@swc-node/register": "~1.9.1",
"@swc/core": "~1.5.7",
diff --git a/frontend/tools/performance/benchmark-plugin.mjs b/frontend/tools/performance/benchmark-plugin.mjs
new file mode 100644
index 0000000000..6ea67b52b9
--- /dev/null
+++ b/frontend/tools/performance/benchmark-plugin.mjs
@@ -0,0 +1,54 @@
+import { execFileSync } from "node:child_process";
+import { relative } from "node:path";
+
+// Benchmark-only instrumentation. The normal desktop build never uses this plugin.
+export function benchmarkPlugin({ baselineRef, frontend } = {}) {
+ // Reproduce this experiment without checking out over local work. This is a
+ // two-module overlay, not a build of an entire historical repository.
+ const baseline = new Map();
+ if (baselineRef) {
+ for (const path of ["pages/MainApp.tsx", "pages/Stores/TabState.ts"]) {
+ baseline.set(`/apps/artcraft/app/src/${path}`, execFileSync("git", ["show", `${baselineRef}:frontend/apps/artcraft/app/src/${path}`], { cwd: frontend, encoding: "utf8" }));
+ }
+ }
+ const exports = new Map([
+ ["/pages/Stores/TabState.ts", ["tabs", "useTabStore"]],
+ ["/pagedraw/src/lib/stores/SceneState.ts", ["scene", "useSceneStore"]],
+ ["/pagedraw/src/lib/Node.ts", ["Node", "Node"]],
+ ]);
+ return {
+ name: "artcraft-performance-fixtures",
+ enforce: "pre",
+ transform(code, id) {
+ const source = [...baseline].find(([suffix]) => id.endsWith(suffix));
+ if (source) code = source[1];
+ for (const [suffix, [key, value]] of exports) {
+ if (id.endsWith(suffix)) {
+ return `${code}\nwindow.__ARTCRAFT_BENCH__ ??= {};\nwindow.__ARTCRAFT_BENCH__.${key} = ${value};\n`;
+ }
+ }
+ if (source) return code;
+ },
+ generateBundle: {
+ order: "post",
+ handler(_options, bundle) {
+ const chunks = Object.values(bundle).filter((item) => item.type === "chunk");
+ this.emitFile({
+ type: "asset",
+ fileName: "performance-bundle.json",
+ source: JSON.stringify(chunks.map((chunk) => ({
+ file: chunk.fileName,
+ entry: chunk.isEntry,
+ dynamicEntry: chunk.isDynamicEntry,
+ bytes: Buffer.byteLength(chunk.code),
+ imports: chunk.imports,
+ largestModules: Object.entries(chunk.modules)
+ .sort((a, b) => b[1].renderedLength - a[1].renderedLength)
+ .slice(0, 25)
+ .map(([id, module]) => ({ module: relative(frontend, id), renderedBytes: module.renderedLength })),
+ })), null, 2),
+ });
+ },
+ },
+ };
+}
diff --git a/frontend/tools/performance/browser-fixture.mjs b/frontend/tools/performance/browser-fixture.mjs
new file mode 100644
index 0000000000..7f8025866f
--- /dev/null
+++ b/frontend/tools/performance/browser-fixture.mjs
@@ -0,0 +1,103 @@
+// Runs before any application script. No real account, Rust IPC, or remote API.
+export function installBrowserFixture() {
+ const counters = { commands: {}, fileReads: 0, webglContexts: 0, longTasks: [] };
+ window.__ARTCRAFT_COUNTERS__ = counters;
+ const getContext = HTMLCanvasElement.prototype.getContext;
+ HTMLCanvasElement.prototype.getContext = function (type, ...args) {
+ if (type === "webgl" || type === "webgl2" || type === "experimental-webgl") counters.webglContexts++;
+ return getContext.call(this, type, ...args);
+ };
+ const readAsDataURL = FileReader.prototype.readAsDataURL;
+ FileReader.prototype.readAsDataURL = function (...args) {
+ counters.fileReads++;
+ return readAsDataURL.apply(this, args);
+ };
+ if (PerformanceObserver.supportedEntryTypes.includes("longtask")) {
+ new PerformanceObserver((list) => {
+ counters.longTasks.push(...list.getEntries().map(({ startTime, duration }) => ({ startTime, duration })));
+ }).observe({ type: "longtask", buffered: true });
+ }
+ let callbackId = 0;
+ const callbacks = new Map();
+ window.__TAURI_INTERNALS__ = {
+ metadata: { currentWindow: { label: "main" }, currentWebview: { label: "main" } },
+ transformCallback(callback) { callbacks.set(++callbackId, callback); return callbackId; },
+ unregisterCallback(id) { callbacks.delete(id); },
+ convertFileSrc(path) { return path; },
+ async invoke(command, args) {
+ counters.commands[command] = (counters.commands[command] ?? 0) + 1;
+ if (command === "plugin:event|listen") return args.handler;
+ if (command === "plugin:window|inner_size") return { width: 1440, height: 1000 };
+ if (command === "plugin:window|scale_factor") return 1;
+ if (command === "storyteller_get_login_session_command") return {
+ username: "performance_fixture", user_token: "u_performance_fixture",
+ };
+ if (command === "get_task_queue_command") return { payload: { tasks: [] } };
+ // Use the bundled model overlay, as the app does when the listing is unavailable.
+ if (command === "list_image_models_command" || command === "list_video_models_command") throw new Error("Offline model listing fixture");
+ if (command === "plugin:app|version") return "0.0.0-benchmark";
+ if (command === "plugin:app|name") return "ArtCraft Benchmark";
+ if (command === "plugin:os|platform") return "macos";
+ if (command.startsWith("plugin:http|")) throw new Error("Network disabled in performance fixture");
+ return { success: true, payload: {} };
+ },
+ };
+ window.__TAURI_EVENT_PLUGIN_INTERNALS__ = { unregisterListener() {} };
+}
+
+export async function seedDrawingScene() {
+ const { scene, Node } = window.__ARTCRAFT_BENCH__;
+ scene.getState().RESET();
+ scene.getState().setBaseImageInfo({ url: "", mediaToken: "fixture-blank", isBlankCanvas: true, blankCanvasWidth: 1024, blankCanvasHeight: 1024 });
+ // Deterministic noisy pixels resist PNG compression, like imported artwork.
+ const canvas = document.createElement("canvas");
+ canvas.width = canvas.height = 1024;
+ const context = canvas.getContext("2d");
+ const pixels = context.createImageData(1024, 1024);
+ let random = 12345;
+ for (let i = 0; i < pixels.data.length; i += 4) {
+ random = (Math.imul(random, 1664525) + 1013904223) >>> 0;
+ pixels.data[i] = random & 255;
+ pixels.data[i + 1] = (random >>> 8) & 255;
+ pixels.data[i + 2] = (random >>> 16) & 255;
+ pixels.data[i + 3] = 255;
+ }
+ context.putImageData(pixels, 0, 0);
+ const blob = await new Promise((resolve) => canvas.toBlob(resolve));
+ const drawNodes = [];
+ for (let i = 0; i < 4; i++) {
+ const node = new Node({ id: `fixture-image-${i}`, type: "image", x: i * 220, y: i * 100, width: 400, height: 400, fill: "transparent" });
+ await node.setImageFromFile(new File([blob], `fixture-${i}.png`, { type: "image/png" }));
+ drawNodes.push(node);
+ }
+ for (let i = 0; i < 80; i++) {
+ drawNodes.push({
+ id: `fixture-line-${i}`, type: "line", draggable: true, stroke: "#7766ee", strokeWidth: 3,
+ points: Array.from({ length: 200 }, (_, j) => j % 2 === 0 ? j * 4 : i * 10 + Math.sin(j) * 30),
+ });
+ }
+ scene.setState({ drawNodes, selectedNodeIds: [drawNodes[0].id] });
+ scene.getState().saveState();
+ return { images: 4, imageSize: 1024, imageBytesEach: blob.size, strokes: 80, coordinatesPerStroke: 200 };
+}
+
+export async function measureTabChange(target) {
+ const counters = window.__ARTCRAFT_COUNTERS__;
+ const readsBefore = counters.fileReads;
+ const start = performance.now();
+ const success = await window.__ARTCRAFT_BENCH__.tabs.getState().setActiveTab(target);
+ if (!success) throw new Error(`Tab change to ${target} failed`);
+ const stateReadyMs = performance.now() - start;
+ const ready = () => target === "2D"
+ ? !!document.querySelector(".konvajs-content canvas")
+ : !!Array.from(document.querySelectorAll("h1")).find((h) => h.textContent.includes("craft"));
+ while (!ready()) {
+ if (performance.now() - start > 15000) throw new Error(`Tab ${target} never rendered`);
+ await new Promise(requestAnimationFrame);
+ }
+ // A rendering opportunity after the target DOM committed, not GPU completion.
+ await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+ const paintMs = performance.now() - start;
+ performance.measure(`artcraft:tab:${target}`, { start, end: performance.now() });
+ return { stateReadyMs, paintMs, fileReads: counters.fileReads - readsBefore };
+}
diff --git a/frontend/tools/performance/compare.mjs b/frontend/tools/performance/compare.mjs
new file mode 100644
index 0000000000..aaf8970127
--- /dev/null
+++ b/frontend/tools/performance/compare.mjs
@@ -0,0 +1,33 @@
+import { readFile } from "node:fs/promises";
+
+const [beforePath, afterPath] = process.argv.slice(2);
+if (!beforePath || !afterPath) throw new Error("Usage: node tools/performance/compare.mjs before.json after.json");
+const before = JSON.parse(await readFile(beforePath, "utf8"));
+const after = JSON.parse(await readFile(afterPath, "utf8"));
+for (const field of ["platform", "arch", "cpu", "browser", "viewport", "ipc", "network", "runs"]) {
+ if (before.environment[field] !== after.environment[field]) throw new Error(`Different ${field}; do not compare these runs`);
+}
+if (before.errors.length || after.errors.length) throw new Error("A run contains browser errors");
+if (JSON.stringify(before.samples[0].fixture) !== JSON.stringify(after.samples[0].fixture)) throw new Error("Different scene fixtures");
+
+const rows = [["Measurement", "Before", "After", "Reduction"]];
+for (const [label, event, metric, unit, scale] of [
+ ["Startup to frame", "startup", "readyMs", "ms", 1],
+ ["Refresh to frame", "refresh", "readyMs", "ms", 1],
+ ["Startup JavaScript", "startup", "jsBytes", "MB", 1e6],
+ ["Startup long tasks (sum)", "startup", "longTaskMs", "ms", 1],
+ ["First drawing page to frame", "firstDraw", "paintMs", "ms", 1],
+ ["Drawing to home: dispatch", "leaveDraw", "stateReadyMs", "ms", 1],
+ ["Drawing to home: frame", "leaveDraw", "paintMs", "ms", 1],
+ ["Home to drawing: dispatch", "returnDraw", "stateReadyMs", "ms", 1],
+ ["Home to drawing: frame", "returnDraw", "paintMs", "ms", 1],
+]) {
+ const a = before.summary[event][metric].median;
+ const b = after.summary[event][metric].median;
+ rows.push([label, `${(a / scale).toFixed(2)} ${unit}`, `${(b / scale).toFixed(2)} ${unit}`, `${((a - b) / a * 100).toFixed(1)}%`]);
+}
+const widths = rows[0].map((_, col) => Math.max(...rows.map((row) => row[col].length)));
+const format = (row) => `| ${row.map((cell, col) => cell.padEnd(widths[col])).join(" | ")} |`;
+console.log(format(rows[0]));
+console.log(`|-${widths.map((w) => "-".repeat(w)).join("-|-")}-|`);
+for (const row of rows.slice(1)) console.log(format(row));
diff --git a/frontend/tools/performance/run.mjs b/frontend/tools/performance/run.mjs
new file mode 100644
index 0000000000..444b52c796
--- /dev/null
+++ b/frontend/tools/performance/run.mjs
@@ -0,0 +1,125 @@
+import { build, preview } from "vite";
+import { chromium } from "@playwright/test";
+import { readFile, writeFile, mkdir } from "node:fs/promises";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import os from "node:os";
+import { execFileSync } from "node:child_process";
+import { parseArgs } from "node:util";
+import { benchmarkPlugin } from "./benchmark-plugin.mjs";
+import { installBrowserFixture, seedDrawingScene, measureTabChange } from "./browser-fixture.mjs";
+
+const frontend = resolve(dirname(fileURLToPath(import.meta.url)), "../..");
+const { values } = parseArgs({ options: {
+ output: { type: "string", default: process.env.ARTCRAFT_PERF_DIR || "/tmp/artcraft-performance" },
+ runs: { type: "string", default: process.env.ARTCRAFT_PERF_RUNS || "7" },
+ "skip-build": { type: "boolean", default: !!process.env.ARTCRAFT_PERF_SKIP_BUILD },
+ "build-only": { type: "boolean", default: false },
+ channel: { type: "string", default: "chrome" },
+ "baseline-ref": { type: "string" },
+ "smoke-imports": { type: "boolean", default: false },
+} });
+const output = resolve(values.output);
+const runs = Number(values.runs);
+if (!Number.isInteger(runs) || runs < 1) throw new Error("--runs must be a positive integer");
+const configFile = resolve(frontend, "apps/artcraft/vite.config.ts");
+// Match `npm run build` in the app: Tailwind resolves its config/content from cwd.
+process.chdir(dirname(configFile));
+await mkdir(output, { recursive: true });
+if (!values["skip-build"]) {
+ await build({ configFile, plugins: [benchmarkPlugin({ baselineRef: values["baseline-ref"], frontend })], build: { outDir: resolve(output, "dist"), manifest: true } });
+ await writeFile(resolve(output, "build-info.json"), JSON.stringify({
+ builtAt: new Date().toISOString(),
+ revision: execFileSync("git", ["rev-parse", "HEAD"], { cwd: frontend, encoding: "utf8" }).trim(),
+ baselineOverlay: values["baseline-ref"] || null,
+ changedFiles: execFileSync("git", ["diff", "--name-only"], { cwd: frontend, encoding: "utf8" }).trim().split("\n"),
+ }, null, 2));
+}
+if (values["build-only"]) process.exit(0);
+const server = await preview({ configFile, build: { outDir: resolve(output, "dist") }, preview: { host: "127.0.0.1", port: 0, strictPort: false } });
+let browser;
+try {
+ browser = await chromium.launch({ channel: values.channel, headless: true });
+ const url = server.resolvedUrls.local[0];
+ const samples = [];
+ const errors = [];
+ const importedPages = [];
+ for (let run = 0; run < runs; run++) {
+ const context = await browser.newContext({ viewport: { width: 1440, height: 1000 }, deviceScaleFactor: 1 });
+ await context.addInitScript(installBrowserFixture);
+ const page = await context.newPage();
+ page.on("pageerror", (error) => { errors.push(error.message); console.error("Browser error:", error.message); });
+ // No analytics, external media, or authenticated API traffic in this fixture.
+ await context.route("**/*", (route) => route.request().url().startsWith(url) || route.request().url().startsWith("blob:")
+ ? route.continue() : route.abort());
+ const cdp = await context.newCDPSession(page);
+ await cdp.send("Network.enable");
+ await cdp.send("Network.setCacheDisabled", { cacheDisabled: true });
+ await page.goto(url, { waitUntil: "domcontentloaded" });
+ await page.getByRole("heading", { name: "What will you craft today?" }).waitFor();
+ await page.waitForFunction(() => !document.querySelector("video"));
+ if (!await page.evaluate(() => getComputedStyle(document.querySelector(".fixed")).position === "fixed")) {
+ throw new Error("Tailwind styles are missing; benchmark layout is invalid");
+ }
+ const collectStartup = async () => page.evaluate(async () => {
+ await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+ return {
+ readyMs: performance.now(),
+ jsBytes: performance.getEntriesByType("resource").filter((r) => r.name.endsWith(".js")).reduce((sum, r) => sum + r.decodedBodySize, 0),
+ longTaskMs: window.__ARTCRAFT_COUNTERS__.longTasks.reduce((sum, t) => sum + t.duration, 0),
+ webglContexts: window.__ARTCRAFT_COUNTERS__.webglContexts,
+ };
+ });
+ const startup = await collectStartup();
+ await page.reload({ waitUntil: "domcontentloaded" });
+ await page.getByRole("heading", { name: "What will you craft today?" }).waitFor();
+ await page.waitForFunction(() => !document.querySelector("video"));
+ const refresh = await collectStartup();
+ const fixture = await page.evaluate(seedDrawingScene);
+ const firstDraw = await page.evaluate(measureTabChange, "2D");
+ // Allow image decoding and the canvas bake debounce to settle outside timing.
+ await page.waitForTimeout(1000);
+ const leaveDraw = await page.evaluate(measureTabChange, "APPS");
+ const returnDraw = await page.evaluate(measureTabChange, "2D");
+ await page.waitForTimeout(1000);
+ const afterReturn = await page.evaluate(() => ({
+ nodeCount: window.__ARTCRAFT_BENCH__.scene.getState().drawNodes.length,
+ selectedCount: window.__ARTCRAFT_BENCH__.scene.getState().selectedNodeIds.length,
+ historyLength: window.__ARTCRAFT_BENCH__.scene.getState().history.length,
+ commands: window.__ARTCRAFT_COUNTERS__.commands,
+ }));
+ if (run === 0) await page.screenshot({ path: resolve(output, "drawing.png") });
+ samples.push({ startup, refresh, firstDraw, leaveDraw, returnDraw, fixture, afterReturn });
+ console.log(JSON.stringify({ run: run + 1, startup, refresh, firstDraw, leaveDraw, returnDraw }));
+ // Validate deferred module evaluation separately from all timed operations.
+ if (values["smoke-imports"] && run === runs - 1) {
+ const manifest = JSON.parse(await readFile(resolve(output, "dist/.vite/manifest.json"), "utf8"));
+ for (const [source, chunk] of Object.entries(manifest)) {
+ if (source.startsWith("src/pages/") && chunk.isDynamicEntry) {
+ await page.evaluate(async (file) => { await import(/* @vite-ignore */ `/${file}`); }, chunk.file);
+ importedPages.push(source);
+ }
+ }
+ }
+ await context.close();
+ }
+ const summary = {};
+ for (const event of ["startup", "refresh", "firstDraw", "leaveDraw", "returnDraw"]) {
+ summary[event] = {};
+ for (const metric of Object.keys(samples[0][event])) {
+ const values = samples.map((s) => s[event][metric]).sort((a, b) => a - b);
+ summary[event][metric] = { median: values[Math.floor(values.length / 2)], min: values[0], max: values.at(-1) };
+ }
+ }
+ const result = {
+ timestamp: new Date().toISOString(), build: JSON.parse(await readFile(resolve(output, "build-info.json"), "utf8")),
+ environment: { platform: os.platform(), arch: os.arch(), cpu: os.cpus()[0].model, browser: browser.version(), node: process.version, runs, viewport: "1440x1000@1", ipc: "mocked", network: "local assets only, browser cache disabled" },
+ summary, samples, importedPages, errors: [...new Set(errors)],
+ };
+ await writeFile(resolve(output, "results.json"), `${JSON.stringify(result, null, 2)}\n`);
+ console.log(JSON.stringify({ summary, errors: result.errors, output }, null, 2));
+ if (errors.length) throw new Error("Browser errors invalidate this run; see results.json");
+} finally {
+ await browser?.close();
+ await new Promise((resolve, reject) => server.httpServer.close((error) => error ? reject(error) : resolve()));
+}