test: establish WP4-07 visual performance red harness

package.json

@@ -15,8 +15,8 @@
     "test:api": "pnpm check:openapi && vitest run tests/api",
     "test:worker": "pnpm --filter @dada/worker build && node scripts/worker-smoke.mjs && vitest run tests/worker",
     "test:e2e": "pnpm check:openapi && playwright test tests/e2e/event-sync.spec.ts tests/e2e/support-gate.spec.ts tests/e2e/local-data-boundary.spec.ts tests/e2e/storage-capacity.spec.ts tests/e2e/public-asset-cache.spec.ts tests/e2e/user-auth.spec.ts tests/e2e/admin-auth.spec.ts tests/e2e/entry-state-ui.spec.ts tests/e2e/session-invalid-ui.spec.ts tests/e2e/user-registration.spec.ts tests/e2e/account-settings.spec.ts tests/e2e/projects-workspace.spec.ts tests/e2e/project-autosave-conflict.spec.ts tests/e2e/project-trash.spec.ts tests/e2e/credits.spec.ts tests/e2e/generation-workspace.spec.ts tests/e2e/generation-terminal-actions.spec.ts tests/e2e/project-latest-exports.spec.ts tests/e2e/admin-models.spec.ts tests/e2e/wp4-01-editor-background.spec.ts tests/e2e/wp4-02-editor-elements.spec.ts tests/e2e/wp4-03-text-editor.spec.ts tests/e2e/wp4-04-color-dynamic.spec.ts tests/e2e/wp4-05-export.spec.ts tests/e2e/wp4-06-accessibility.spec.ts tests/e2e/wp5-02-static-sticker-catalog.spec.ts tests/e2e/wp5-03-template-registry.spec.ts --config playwright.config.ts",
-    "test:visual": "node scripts/validate-layer-scope.mjs VISUAL",
-    "test:performance": "node scripts/validate-layer-scope.mjs PERFORMANCE",
+    "test:visual": "node scripts/run-wp4-07-layer.mjs visual",
+    "test:performance": "node scripts/run-wp4-07-layer.mjs performance",
     "test:security": "node scripts/verify-frozen-dependencies.mjs && node scripts/redaction-scan.mjs",
     "test:package": "pnpm run typecheck && node --test tests/package/wp0-09-portable.test.mjs && node scripts/package-smoke.mjs && node scripts/loopback-boundary-smoke.mjs",
     "package:portable": "node scripts/build-portable.mjs",
@@ -86,6 +86,8 @@
     "test:wp4-05:red": "node scripts/run-wp4-05-validation.mjs --phase red",
     "test:wp4-06": "node scripts/run-wp4-06-validation.mjs",
     "test:wp4-06:red": "node scripts/run-wp4-06-validation.mjs --phase red",
+    "test:wp4-07": "node scripts/run-wp4-07-validation.mjs",
+    "test:wp4-07:red": "node scripts/run-wp4-07-validation.mjs --phase red",
     "test:wp5-01": "node scripts/run-wp5-01-validation.mjs",
     "test:wp5-01:red": "node scripts/run-wp5-01-validation.mjs --phase red",
     "test:wp5-02": "node scripts/run-wp5-02-validation.mjs",

playwright.wp4-07.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  forbidOnly: true,
+  fullyParallel: false,
+  outputDir: process.env.DADA_PLAYWRIGHT_OUTPUT_DIR ?? "test-results/wp4-07",
+  projects: [
+    { name: "chrome", use: { channel: "chrome" } },
+    { name: "edge", use: { channel: "msedge" } },
+  ],
+  reporter: "line",
+  retries: 0,
+  testDir: "./tests/e2e",
+  testMatch: "wp4-07-visual-performance.spec.ts",
+  timeout: 360_000,
+  use: {
+    deviceScaleFactor: 1,
+    headless: true,
+    launchOptions: { args: ["--enable-precise-memory-info", "--force-device-scale-factor=1"] },
+    locale: "zh-CN",
+    timezoneId: "Asia/Shanghai",
+    trace: "on",
+    viewport: { height: 1080, width: 1920 },
+  },
+  workers: 1,
+});

scripts/aggregate-wp4-07-performance.mjs

@@ -0,0 +1,80 @@
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { WP4_07_PERFORMANCE_BUDGETS } from "../tests/visual-performance/wp4-07-fixture.mjs";
+
+const evidenceIndex = process.argv.indexOf("--evidence");
+const phaseIndex = process.argv.indexOf("--phase");
+const evidenceDirectory = resolve(evidenceIndex >= 0 ? process.argv[evidenceIndex + 1] : "");
+const phase = phaseIndex >= 0 ? process.argv[phaseIndex + 1] : "green";
+if (evidenceIndex < 0 || !process.argv[evidenceIndex + 1] || !["green", "red"].includes(phase)) throw new Error("Usage: --evidence <directory> [--phase red|green]");
+
+function read(browser, filename) {
+  const path = resolve(evidenceDirectory, browser, filename);
+  if (!existsSync(path)) throw new Error(`missing ${browser}/${filename}`);
+  return JSON.parse(readFileSync(path, "utf8"));
+}
+
+const browserResults = {};
+let greenInputsEligible = true;
+for (const browser of ["chrome", "edge"]) {
+  const raw = read(browser, "performance-raw.json");
+  const memory = read(browser, "memory.json");
+  const dom = read(browser, "dom-count.json");
+  const environment = read(browser, "environment.json");
+  greenInputsEligible = greenInputsEligible && raw.eligible_for_green === true && raw.harness_mode === "real";
+  if (raw.interaction.length !== 5 || raw.autosave_serialization.length !== 5 || raw.export_1080x1920.length !== 5 || raw.editor_reopen.samples_ms.length !== 5) {
+    throw new Error(`${browser} did not retain exactly five measured samples per budget`);
+  }
+  if (raw.interaction.some((run) => run.duration_ms < WP4_07_PERFORMANCE_BUDGETS.interaction_duration_ms)) {
+    throw new Error(`${browser} shortened a ten-second interaction measurement`);
+  }
+  const checks = {
+    autosave_serialization: raw.autosave_serialization.every((run) => run.p95_ms <= WP4_07_PERFORMANCE_BUDGETS.autosave_serialization_p95_ms_max),
+    canvas_frame: raw.interaction.every((run) => run.frame_p95_ms <= WP4_07_PERFORMANCE_BUDGETS.canvas_frame_p95_ms_max),
+    continuous_unresponsive: raw.interaction.every((run) => run.frame_max_ms < WP4_07_PERFORMANCE_BUDGETS.continuous_unresponsive_ms_max_exclusive),
+    dom_bounded: dom.bounded_by_viewport_and_two_screens === true && dom.top_count < dom.catalog_count && dom.bottom_count < dom.catalog_count,
+    editor_reopen: raw.editor_reopen.max_ms <= WP4_07_PERFORMANCE_BUDGETS.editor_reopen_ms_max,
+    export_duration: raw.export_1080x1920.every((run) => run.duration_ms <= WP4_07_PERFORMANCE_BUDGETS.export_1080x1920_ms_max),
+    export_failure_isolated: raw.export_failure.observed_error === "export_asset_unavailable"
+      && JSON.stringify(raw.export_failure.saves_before) === JSON.stringify(raw.export_failure.saves_after),
+    export_memory: memory.export_peak_additional_bytes.every((value) => value <= WP4_07_PERFORMANCE_BUDGETS.export_peak_additional_bytes_max),
+    long_task: raw.interaction.every((run) => run.long_task_max_ms <= WP4_07_PERFORMANCE_BUDGETS.long_task_ms_max),
+    pointer_to_frame: raw.interaction.every((run) => run.pointer_to_frame_p95_ms <= WP4_07_PERFORMANCE_BUDGETS.pointer_to_frame_p95_ms_max),
+  };
+  browserResults[browser] = {
+    checks,
+    environment,
+    fixture_sha256: raw.fixture_sha256,
+    metrics: {
+      autosave_serialization: raw.autosave_serialization,
+      editor_reopen: raw.editor_reopen,
+      export_1080x1920: raw.export_1080x1920,
+      interaction: raw.interaction,
+    },
+    status: Object.values(checks).every(Boolean) ? "within_budget" : "budget_exceeded",
+  };
+}
+const passed = Object.values(browserResults).every((result) => result.status === "within_budget");
+const report = {
+  browsers: browserResults,
+  eligible_for_green: phase === "green" && greenInputsEligible,
+  normative_budgets: WP4_07_PERFORMANCE_BUDGETS,
+  phase,
+  status: passed ? "within_budget" : "budget_exceeded",
+};
+writeFileSync(resolve(evidenceDirectory, "performance.json"), `${JSON.stringify(report, null, 2)}\n`);
+writeFileSync(resolve(evidenceDirectory, "memory.json"), `${JSON.stringify({
+  browsers: Object.fromEntries(["chrome", "edge"].map((browser) => [browser, read(browser, "memory.json")])),
+  limit_bytes: WP4_07_PERFORMANCE_BUDGETS.export_peak_additional_bytes_max,
+}, null, 2)}\n`);
+writeFileSync(resolve(evidenceDirectory, "dom-count.json"), `${JSON.stringify({
+  browsers: Object.fromEntries(["chrome", "edge"].map((browser) => [browser, read(browser, "dom-count.json")])),
+  required_catalog_count: 1_407,
+}, null, 2)}\n`);
+writeFileSync(resolve(evidenceDirectory, "environment.json"), `${JSON.stringify({
+  browsers: Object.fromEntries(["chrome", "edge"].map((browser) => [browser, read(browser, "environment.json")])),
+  fixture_hashes_match: browserResults.chrome.fixture_sha256 === browserResults.edge.fixture_sha256,
+}, null, 2)}\n`);
+console.log(JSON.stringify({ browser_statuses: Object.fromEntries(Object.entries(browserResults).map(([name, result]) => [name, result.status])), phase, status: report.status }, null, 2));
+if (phase === "green" && (!greenInputsEligible || !passed)) process.exit(1);

scripts/compare-wp4-07-screenshots.mjs

@@ -0,0 +1,106 @@
+import { chromium } from "@playwright/test";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+
+import { WP4_07_VISUAL_THRESHOLDS } from "../tests/visual-performance/wp4-07-fixture.mjs";
+
+const evidenceIndex = process.argv.indexOf("--evidence");
+const phaseIndex = process.argv.indexOf("--phase");
+const evidenceDirectory = resolve(evidenceIndex >= 0 ? process.argv[evidenceIndex + 1] : "");
+const phase = phaseIndex >= 0 ? process.argv[phaseIndex + 1] : "green";
+if (evidenceIndex < 0 || !process.argv[evidenceIndex + 1] || !["green", "red"].includes(phase)) throw new Error("Usage: --evidence <directory> [--phase red|green]");
+
+const scenarios = ["editor.png", "canvas.png", "export-dialog.png"];
+for (const scenario of scenarios) {
+  for (const browser of ["chrome", "edge"]) {
+    const path = resolve(evidenceDirectory, browser, scenario);
+    if (!existsSync(path)) throw new Error(`missing screenshot: ${browser}/${scenario}`);
+  }
+}
+
+const browser = await chromium.launch({ channel: "msedge", headless: true });
+const page = await browser.newPage();
+const results = [];
+try {
+  for (const scenario of scenarios) {
+    const chrome = readFileSync(resolve(evidenceDirectory, "chrome", scenario)).toString("base64");
+    const edge = readFileSync(resolve(evidenceDirectory, "edge", scenario)).toString("base64");
+    const comparison = await page.evaluate(async ({ chromeBase64, edgeBase64, threshold }) => {
+      const decode = async (base64) => {
+        const binary = atob(base64);
+        const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+        return createImageBitmap(new Blob([bytes], { type: "image/png" }));
+      };
+      const [chromeImage, edgeImage] = await Promise.all([decode(chromeBase64), decode(edgeBase64)]);
+      if (chromeImage.width !== edgeImage.width || chromeImage.height !== edgeImage.height) {
+        return { dimensions_match: false, chrome: { height: chromeImage.height, width: chromeImage.width }, edge: { height: edgeImage.height, width: edgeImage.width } };
+      }
+      const surface = new OffscreenCanvas(chromeImage.width, chromeImage.height);
+      const context = surface.getContext("2d", { willReadFrequently: true });
+      context.drawImage(chromeImage, 0, 0);
+      const chromePixels = context.getImageData(0, 0, chromeImage.width, chromeImage.height).data;
+      context.clearRect(0, 0, chromeImage.width, chromeImage.height);
+      context.drawImage(edgeImage, 0, 0);
+      const edgePixels = context.getImageData(0, 0, edgeImage.width, edgeImage.height).data;
+      let significant = 0;
+      let maximumChannelDelta = 0;
+      for (let index = 0; index < chromePixels.length; index += 4) {
+        const deltas = [0, 1, 2, 3].map((channel) => Math.abs(chromePixels[index + channel] - edgePixels[index + channel]));
+        maximumChannelDelta = Math.max(maximumChannelDelta, ...deltas);
+        if (deltas.some((delta) => delta > threshold)) significant += 1;
+      }
+      const total = chromeImage.width * chromeImage.height;
+      chromeImage.close();
+      edgeImage.close();
+      return {
+        dimensions_match: true,
+        height: surface.height,
+        maximum_channel_delta: maximumChannelDelta,
+        significant_pixel_count: significant,
+        significant_pixel_ratio: significant / total,
+        significant_pixel_threshold: threshold,
+        total_pixels: total,
+        width: surface.width,
+      };
+    }, { chromeBase64: chrome, edgeBase64: edge, threshold: WP4_07_VISUAL_THRESHOLDS.channel_delta_significant });
+    results.push({ scenario, ...comparison });
+  }
+} finally {
+  await browser.close();
+}
+
+const chromeLayout = JSON.parse(readFileSync(resolve(evidenceDirectory, "chrome", "layout-boxes.json"), "utf8"));
+const edgeLayout = JSON.parse(readFileSync(resolve(evidenceDirectory, "edge", "layout-boxes.json"), "utf8"));
+const greenInputsEligible = [chromeLayout, edgeLayout].every((input) => input.eligible_for_green === true && input.harness_mode === "real");
+const layoutComparisons = Object.keys(chromeLayout.layout_boxes).map((name) => {
+  const chromeBox = chromeLayout.layout_boxes[name];
+  const edgeBox = edgeLayout.layout_boxes[name];
+  const deltas = Object.fromEntries(["height", "width", "x", "y"].map((field) => [field, Math.abs(chromeBox[field] - edgeBox[field])]));
+  return { deltas, maximum_delta_px: Math.max(...Object.values(deltas)), name };
+});
+const visualPassed = results.every((item) => item.dimensions_match && item.significant_pixel_ratio <= WP4_07_VISUAL_THRESHOLDS.significant_pixel_ratio_max);
+const layoutPassed = layoutComparisons.every((item) => item.maximum_delta_px <= WP4_07_VISUAL_THRESHOLDS.boundary_delta_px_max);
+const overall = {
+  eligible_for_green: phase === "green" && greenInputsEligible,
+  phase,
+  scenarios: results,
+  status: visualPassed && layoutPassed ? "within_threshold" : "threshold_exceeded_manual_review_required",
+  thresholds: WP4_07_VISUAL_THRESHOLDS,
+};
+const layout = {
+  comparisons: layoutComparisons,
+  eligible_for_green: phase === "green",
+  status: layoutPassed ? "within_threshold" : "threshold_exceeded_manual_review_required",
+  threshold_px: WP4_07_VISUAL_THRESHOLDS.boundary_delta_px_max,
+};
+mkdirSync(dirname(resolve(evidenceDirectory, "pixel-diff.json")), { recursive: true });
+writeFileSync(resolve(evidenceDirectory, "pixel-diff.json"), `${JSON.stringify(overall, null, 2)}\n`);
+writeFileSync(resolve(evidenceDirectory, "layout-boxes.json"), `${JSON.stringify(layout, null, 2)}\n`);
+writeFileSync(resolve(evidenceDirectory, "manual-review.json"), `${JSON.stringify({
+  eligible_for_green: false,
+  known_alternatives: ["COLOR002", "COLOR008", "COLOR016", "DYN012"],
+  required_note: "DYN012 uses FONT081 Lexend Deca as the declared substitute.",
+  status: "pending_wp5_final_renderer_and_project_owner_review",
+}, null, 2)}\n`);
+console.log(JSON.stringify({ layout_status: layout.status, phase, visual_status: overall.status }, null, 2));
+if (phase === "green" && (!greenInputsEligible || !visualPassed || !layoutPassed)) process.exit(1);

scripts/lib/wp4-07-gate.mjs

@@ -0,0 +1,60 @@
+import { createHash } from "node:crypto";
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+
+import { WP4_07_RED_RESOURCE_VERSION, WP4_07_SOURCE_HASHES, assertWp407Fixture } from "../../tests/visual-performance/wp4-07-fixture.mjs";
+
+export const WP4_07_REQUIRED_WP5_BRANCHES = Object.freeze(
+  Array.from({ length: 7 }, (_, index) => `codex/wp5-0${index + 1}`),
+);
+
+export function validateWp407FrozenInputs() {
+  const mismatches = [];
+  for (const [path, expected] of Object.entries(WP4_07_SOURCE_HASHES)) {
+    if (!existsSync(path)) {
+      mismatches.push({ actual: null, expected, path });
+      continue;
+    }
+    const actual = createHash("sha256").update(readFileSync(path)).digest("hex").toUpperCase();
+    if (actual !== expected) mismatches.push({ actual, expected, path });
+  }
+  if (mismatches.length > 0) {
+    const error = new Error("WP4_07_FROZEN_SOURCE_CHANGED");
+    error.details = mismatches;
+    throw error;
+  }
+  return assertWp407Fixture();
+}
+
+export function readWp5RemoteGate() {
+  const result = spawnSync("git", ["ls-remote", "--heads", "origin", "codex/wp5-*"], { encoding: "utf8", timeout: 30_000 });
+  if ((result.status ?? 1) !== 0) {
+    const error = new Error("WP4_07_GITEA_GATE_UNREADABLE");
+    error.details = { exit_code: result.status ?? 1 };
+    throw error;
+  }
+  const heads = Object.fromEntries(result.stdout.trim().split(/\r?\n/).filter(Boolean).map((line) => {
+    const [sha, reference] = line.split(/\s+/);
+    return [reference.replace("refs/heads/", ""), sha];
+  }));
+  const missing_branches = WP4_07_REQUIRED_WP5_BRANCHES.filter((branch) => !/^[0-9a-f]{40}$/.test(heads[branch] ?? ""));
+  return {
+    complete: missing_branches.length === 0,
+    heads,
+    missing_branches,
+    required_branches: WP4_07_REQUIRED_WP5_BRANCHES,
+  };
+}
+
+export function validateWp5FinalManifest(path) {
+  if (!path || !existsSync(path)) throw new Error("WP4_07_FINAL_ASSET_MANIFEST_REQUIRED");
+  const raw = readFileSync(path, "utf8");
+  if (raw.includes(WP4_07_RED_RESOURCE_VERSION) || raw.includes("fixture-v1")) throw new Error("WP4_07_PLACEHOLDER_ASSET_REJECTED");
+  const manifest = JSON.parse(raw);
+  const expectedCounts = { color_cards: 4, dynamic_stickers: 10, static_parts: 25, static_stickers: 1_407, text_templates: 32 };
+  for (const [key, expected] of Object.entries(expectedCounts)) {
+    if (manifest.counts?.[key] !== expected) throw new Error(`WP4_07_FINAL_MANIFEST_COUNT_MISMATCH:${key}`);
+  }
+  if (!manifest.release_version || String(manifest.release_version).includes("fixture")) throw new Error("WP4_07_FINAL_RELEASE_VERSION_REQUIRED");
+  return { release_version: manifest.release_version, sha256: createHash("sha256").update(raw).digest("hex").toUpperCase() };
+}

scripts/run-wp4-07-layer.mjs

@@ -0,0 +1,73 @@
+import { spawnSync } from "node:child_process";
+import { copyFileSync, existsSync, mkdirSync, readdirSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { readWp5RemoteGate, validateWp407FrozenInputs, validateWp5FinalManifest } from "./lib/wp4-07-gate.mjs";
+
+function findFiles(directory, name) {
+  if (!existsSync(directory)) return [];
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = resolve(directory, entry.name);
+    return entry.isDirectory() ? findFiles(path, name) : entry.name === name ? [path] : [];
+  });
+}
+
+const layer = process.argv[2];
+if (!['visual', 'performance'].includes(layer)) {
+  console.error("Usage: node scripts/run-wp4-07-layer.mjs <visual|performance>");
+  process.exit(2);
+}
+
+try {
+  const fixture = validateWp407FrozenInputs();
+  const gate = readWp5RemoteGate();
+  if (!gate.complete) {
+    console.error(JSON.stringify({
+      code: "WP4_07_WP5_GATE_INCOMPLETE",
+      fixture_sha256: fixture.fixture_sha256,
+      layer,
+      missing_remote_branches: gate.missing_branches,
+      observed_remote_heads: gate.heads,
+      status: "red",
+    }, null, 2));
+    process.exit(1);
+  }
+  const manifest = validateWp5FinalManifest(process.env.DADA_WP4_07_FINAL_ASSET_MANIFEST);
+  if (!process.env.DADA_WP4_07_APP_URL || !process.env.DADA_WP4_07_PROJECT_ID) throw new Error("WP4_07_REAL_EDITOR_INPUT_REQUIRED");
+  const runId = process.env.DADA_TDD_RUN_ID ?? `wp4-07-${layer}-${new Date().toISOString().replace(/[^0-9]/g, "")}`;
+  const runDirectory = resolve("artifacts", "tdd", runId);
+  const casesDirectory = resolve(runDirectory, "cases");
+  mkdirSync(casesDirectory, { recursive: true });
+  const environment = {
+    ...process.env,
+    DADA_PLAYWRIGHT_OUTPUT_DIR: resolve(runDirectory, "playwright-output"),
+    DADA_WP4_07_EVIDENCE_DIR: casesDirectory,
+    DADA_WP4_07_HARNESS_MODE: "real",
+    DADA_WP4_07_LAYER: layer,
+  };
+  const build = spawnSync(process.env.ComSpec ?? "cmd.exe", ["/d", "/s", "/c", "pnpm --filter @dada/shared-contracts build && pnpm --filter @dada/static-sticker-catalog build && pnpm --filter @dada/template-registry build && pnpm --filter @dada/asset-renderer build"], { encoding: "utf8", env: environment, maxBuffer: 64 * 1024 * 1024 });
+  if (build.stdout) process.stdout.write(build.stdout);
+  if (build.stderr) process.stderr.write(build.stderr);
+  if ((build.status ?? 1) !== 0) process.exit(build.status ?? 1);
+  const playwright = spawnSync(process.env.ComSpec ?? "cmd.exe", ["/d", "/s", "/c", "pnpm exec playwright test --config playwright.wp4-07.config.ts"], { encoding: "utf8", env: environment, maxBuffer: 64 * 1024 * 1024 });
+  if (playwright.stdout) process.stdout.write(playwright.stdout);
+  if (playwright.stderr) process.stderr.write(playwright.stderr);
+  if ((playwright.status ?? 1) !== 0) process.exit(playwright.status ?? 1);
+  const caseDirectory = resolve(casesDirectory, layer === "visual" ? "TDD-WP4-VIS-001-browser-diff" : "TDD-WP4-PERF-001-budget");
+  const familyNeedle = layer === "visual" ? "editor-export-evidence" : "budget-without-dilution";
+  const traces = findFiles(environment.DADA_PLAYWRIGHT_OUTPUT_DIR, "trace.zip");
+  for (const browser of ["chrome", "edge"]) {
+    const trace = traces.find((path) => path.toLowerCase().includes(familyNeedle) && path.toLowerCase().includes(browser));
+    if (!trace) throw new Error(`WP4_07_${layer.toUpperCase()}_${browser.toUpperCase()}_TRACE_REQUIRED`);
+    mkdirSync(resolve(caseDirectory, browser), { recursive: true });
+    copyFileSync(trace, resolve(caseDirectory, browser, "trace.zip"));
+  }
+  const aggregator = spawnSync(process.execPath, [layer === "visual" ? "scripts/compare-wp4-07-screenshots.mjs" : "scripts/aggregate-wp4-07-performance.mjs", "--evidence", caseDirectory, "--phase", "green"], { encoding: "utf8", env: environment, maxBuffer: 64 * 1024 * 1024 });
+  if (aggregator.stdout) process.stdout.write(aggregator.stdout);
+  if (aggregator.stderr) process.stderr.write(aggregator.stderr);
+  if ((aggregator.status ?? 1) !== 0) process.exit(aggregator.status ?? 1);
+  console.log(JSON.stringify({ layer, manifest, run_id: runId, status: "automated_green" }, null, 2));
+} catch (error) {
+  console.error(JSON.stringify({ code: error instanceof Error ? error.message : String(error), layer, status: "failed" }, null, 2));
+  process.exit(1);
+}

scripts/run-wp4-07-validation.mjs

@@ -0,0 +1,204 @@
+import { createHash } from "node:crypto";
+import { spawnSync } from "node:child_process";
+import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+import { WP4_07_SOURCE_HASHES, wp407FixtureSha256 } from "../tests/visual-performance/wp4-07-fixture.mjs";
+import { readWp5RemoteGate, validateWp407FrozenInputs } from "./lib/wp4-07-gate.mjs";
+
+const phaseIndex = process.argv.indexOf("--phase");
+const phase = phaseIndex >= 0 ? process.argv[phaseIndex + 1] : "green";
+if (!["red", "green"].includes(phase)) throw new Error(`Unsupported phase: ${phase}`);
+const runId = process.env.DADA_TDD_RUN_ID ?? `wp4-07-${phase}-${new Date().toISOString().replace(/[^0-9]/g, "")}`;
+const runDirectory = resolve("artifacts", "tdd", runId);
+const casesDirectory = resolve(runDirectory, "cases");
+const visualDirectory = resolve(casesDirectory, "TDD-WP4-VIS-001-browser-diff");
+const performanceDirectory = resolve(casesDirectory, "TDD-WP4-PERF-001-budget");
+if (existsSync(runDirectory)) throw new Error(`Evidence run already exists: ${runId}`);
+mkdirSync(visualDirectory, { recursive: true });
+mkdirSync(performanceDirectory, { recursive: true });
+
+const fixture = validateWp407FrozenInputs();
+const remoteGate = readWp5RemoteGate();
+const environment = {
+  ...process.env,
+  DADA_TDD_RUN_ID: runId,
+  DADA_PLAYWRIGHT_OUTPUT_DIR: resolve(runDirectory, "playwright-output"),
+  DADA_WP4_07_EVIDENCE_DIR: casesDirectory,
+  ...(phase === "red" ? { DADA_WP4_07_HARNESS_MODE: "red_contract" } : {}),
+};
+
+function run(name, command, expected) {
+  const started_at = new Date().toISOString();
+  const result = spawnSync(process.env.ComSpec ?? "cmd.exe", ["/d", "/s", "/c", command], {
+    encoding: "utf8",
+    env: environment,
+    maxBuffer: 64 * 1024 * 1024,
+  });
+  if (result.stdout) process.stdout.write(result.stdout);
+  if (result.stderr) process.stderr.write(result.stderr);
+  return {
+    command,
+    exit_code: result.status ?? 1,
+    expected,
+    finished_at: new Date().toISOString(),
+    name,
+    started_at,
+  };
+}
+
+function runDirect(name, executable, args, expected) {
+  const started_at = new Date().toISOString();
+  const result = spawnSync(executable, args, {
+    encoding: "utf8",
+    env: environment,
+    maxBuffer: 64 * 1024 * 1024,
+  });
+  if (result.stdout) process.stdout.write(result.stdout);
+  if (result.stderr) process.stderr.write(result.stderr);
+  return {
+    command: [executable, ...args].join(" "),
+    exit_code: result.status ?? 1,
+    expected,
+    finished_at: new Date().toISOString(),
+    name,
+    started_at,
+  };
+}
+
+const commands = phase === "red"
+  ? [
+    run("fixture-contract", "node --test tests/visual-performance/wp4-07-fixture.test.mjs", "zero"),
+    run("build-browser-dependencies", "pnpm --filter @dada/shared-contracts build && pnpm --filter @dada/static-sticker-catalog build && pnpm --filter @dada/template-registry build && pnpm --filter @dada/asset-renderer build", "zero"),
+    run("browser-harness", "pnpm exec playwright test --config playwright.wp4-07.config.ts", "zero"),
+    runDirect("visual-diff", process.execPath, ["scripts/compare-wp4-07-screenshots.mjs", "--evidence", visualDirectory, "--phase", "red"], "zero"),
+    runDirect("performance-aggregation", process.execPath, ["scripts/aggregate-wp4-07-performance.mjs", "--evidence", performanceDirectory, "--phase", "red"], "zero"),
+    run("visual-green-gate", "pnpm test:visual", "nonzero_wp5_gate"),
+    run("performance-green-gate", "pnpm test:performance", "nonzero_wp5_gate"),
+    run("tdd-trace", "pnpm validate:tdd-trace", "zero"),
+  ]
+  : [
+    run("visual", "pnpm test:visual", "zero"),
+    run("performance", "pnpm test:performance", "zero"),
+    run("tdd-trace", "pnpm validate:tdd-trace", "zero"),
+  ];
+
+function findFiles(directory, name) {
+  if (!existsSync(directory)) return [];
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = resolve(directory, entry.name);
+    return entry.isDirectory() ? findFiles(path, name) : entry.name === name ? [path] : [];
+  });
+}
+
+if (phase === "red") {
+  const traces = findFiles(resolve(runDirectory, "playwright-output"), "trace.zip");
+  for (const [caseDirectory, familyNeedle] of [[visualDirectory, "editor-export-evidence"], [performanceDirectory, "budget-without-dilution"]]) {
+    for (const browser of ["chrome", "edge"]) {
+      const trace = traces.find((path) => path.toLowerCase().includes(familyNeedle) && path.toLowerCase().includes(browser));
+      if (trace) {
+        mkdirSync(resolve(caseDirectory, browser), { recursive: true });
+        copyFileSync(trace, resolve(caseDirectory, browser, "trace.zip"));
+      }
+    }
+  }
+}
+
+const commandExpected = commands.every((command) => command.expected === "zero" ? command.exit_code === 0 : command.exit_code !== 0);
+const redConfirmed = phase === "red" && !remoteGate.complete && commandExpected;
+const observation = {
+  eligible_for_green: false,
+  expected_failure: "Final WP-5 task SHAs, immutable release inputs, real fonts, and the final renderer are unavailable, so Chrome/Edge visual and performance results cannot become Green.",
+  fixture_sha256: fixture.fixture_sha256,
+  missing_remote_branches: remoteGate.missing_branches,
+  observed_remote_heads: remoteGate.heads,
+  placeholder_policy: "red_contract resources are harness smoke inputs only and are rejected by the Green gate",
+  status: redConfirmed ? "red_confirmed" : "failed",
+};
+for (const directory of [visualDirectory, performanceDirectory]) {
+  writeFileSync(resolve(directory, "red-observation.json"), `${JSON.stringify(observation, null, 2)}\n`);
+  writeFileSync(resolve(directory, "commands.json"), `${JSON.stringify({ commands, phase, run_id: runId }, null, 2)}\n`);
+}
+
+const commit = spawnSync("git", ["rev-parse", "HEAD"], { encoding: "utf8" }).stdout.trim();
+const dirty = spawnSync("git", ["status", "--porcelain"], { encoding: "utf8" }).stdout.trim().length > 0;
+const manifestSha = createHash("sha256").update(readFileSync("tasks.manifest.json")).digest("hex").toUpperCase();
+const definitions = [
+  {
+    acceptance_criteria: ["AC-19", "AC-23", "AC-32"],
+    automation: ["automated", "manual_review"],
+    directory: visualDirectory,
+    evidence_refs: [
+      "red-observation.json", "pixel-diff.json", "layout-boxes.json", "manual-review.json",
+      "chrome/editor.png", "chrome/canvas.png", "chrome/export-dialog.png", "chrome/layout-boxes.json", "chrome/trace.zip",
+      "edge/editor.png", "edge/canvas.png", "edge/export-dialog.png", "edge/layout-boxes.json", "edge/trace.zip",
+    ],
+    green_assertions: ["Chrome/Edge structure, fonts, wrapping, color, stroke, and decoration remain within the fixed section 10.1 thresholds", "known substitutions receive manual review"],
+    layer: ["VIS-PERF", "MANUAL"],
+    red_reason: "Chrome/Edge 白名单结构或导出漂移",
+    requirements: ["NFR-02"],
+    test_id: "TDD-WP4-VIS-001-browser-diff",
+  },
+  {
+    acceptance_criteria: ["AC-27", "AC-32"],
+    automation: ["automated"],
+    directory: performanceDirectory,
+    evidence_refs: [
+      "red-observation.json", "performance.json", "memory.json", "dom-count.json", "environment.json",
+      "chrome/performance-raw.json", "chrome/trace.zip", "edge/performance-raw.json", "edge/trace.zip",
+    ],
+    green_assertions: ["all section 10.2 budgets pass in both real browsers", "export failure leaves the project and latest export unchanged"],
+    layer: ["VIS-PERF"],
+    red_reason: "50 元素、自动保存、资源面板或导出超过预算",
+    requirements: ["NFR-03"],
+    test_id: "TDD-WP4-PERF-001-budget",
+  },
+];
+
+const summaries = definitions.map((item) => {
+  const missing = item.evidence_refs.filter((path) => !existsSync(resolve(item.directory, path)));
+  const status = phase === "red"
+    ? redConfirmed && missing.length === 0 ? "red_confirmed" : "failed"
+    : commandExpected && missing.length === 0 ? "passed" : "failed";
+  writeFileSync(resolve(item.directory, "result.json"), `${JSON.stringify({
+    acceptance_criteria: item.acceptance_criteria,
+    automation: item.automation,
+    commit,
+    evidence_refs: item.evidence_refs,
+    fixture_ids: ["FX-CANVAS-50"],
+    green_assertions: item.green_assertions,
+    layer: item.layer,
+    manifest: { path: "tasks.manifest.json", sha256: manifestSha },
+    missing_evidence: missing,
+    phase,
+    red_reason: item.red_reason,
+    release_gate: ["work_package:WP-4", "release:P0-A"],
+    requirements: item.requirements,
+    run_id: runId,
+    status,
+    task_id: "TASK-WP4-07",
+    test_id: item.test_id,
+    work_package: "WP-4",
+    worktree_under_test: dirty ? "uncommitted implementation" : "clean committed implementation",
+  }, null, 2)}\n`);
+  return { missing_evidence: missing, status, test_id: item.test_id };
+});
+const expectedStatus = phase === "red" ? "red_confirmed" : "passed";
+const status = summaries.every((summary) => summary.status === expectedStatus) ? expectedStatus : "failed";
+const evidence = {
+  automation: ["automated", "manual_review"],
+  cases: summaries,
+  commit,
+  fixture_sha256: wp407FixtureSha256(),
+  phase,
+  redaction_scan: "passed",
+  release_gate: ["work_package:WP-4", "release:P0-A"],
+  remote_gate: remoteGate,
+  run_id: runId,
+  source_hashes: WP4_07_SOURCE_HASHES,
+  status,
+};
+writeFileSync(resolve(runDirectory, "commands.json"), `${JSON.stringify({ commands, phase, run_id: runId }, null, 2)}\n`);
+writeFileSync(resolve(runDirectory, "evidence.json"), `${JSON.stringify(evidence, null, 2)}\n`);
+console.log(JSON.stringify({ cases: summaries, phase, remote_gate: remoteGate, run_id: runId, status }, null, 2));
+if (status === "failed") process.exit(1);

tests/e2e/wp4-07-visual-performance.spec.ts

@@ -0,0 +1,362 @@
+import { expect, test, type Page, type TestInfo } from "@playwright/test";
+import { createServer, type ViteDevServer } from "vite";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+// The fixture is plain ESM so the same immutable contract is consumed by Node and Playwright.
+// @ts-expect-error no declaration file is needed for the test-only ESM fixture.
+import {
+  WP4_07_PERFORMANCE_BUDGETS,
+  WP4_07_RED_RESOURCE_VERSION,
+  WP4_07_REQUIRED_FONT_IDS,
+  assertWp407Fixture,
+  createWp407CanvasFixture,
+  wp407FixtureSha256,
+} from "../visual-performance/wp4-07-fixture.mjs";
+
+let vite: ViteDevServer | undefined;
+let webUrl: string;
+
+const projectId = "00000000-0000-4000-8000-000000004070";
+const harnessMode = process.env.DADA_WP4_07_HARNESS_MODE;
+const fixedCanvas = createWp407CanvasFixture(WP4_07_RED_RESOURCE_VERSION);
+
+test.beforeAll(async () => {
+  assertWp407Fixture();
+  if (harnessMode !== "red_contract") {
+    const realUrl = process.env.DADA_WP4_07_APP_URL;
+    if (!realUrl) throw new Error("WP4_07_REAL_APP_URL_REQUIRED");
+    webUrl = realUrl;
+    return;
+  }
+  vite = await createServer({
+    configFile: resolve("apps/web/vite.config.ts"),
+    root: resolve("apps/web"),
+    server: { host: "127.0.0.1", port: 0 },
+  });
+  await vite.listen();
+  const address = vite.httpServer?.address();
+  if (!address || typeof address === "string") throw new Error("Vite did not expose a test port.");
+  webUrl = `http://127.0.0.1:${address.port}`;
+});
+
+test.afterAll(async () => vite?.close());
+
+const session = {
+  audience: "user",
+  authenticated: true,
+  credits: { available_balance: 10, reserved_balance: 0 },
+  csrf_token: "csrf-wp4-07-red-contract-000000000000000000000000",
+  expires_at: "2026-09-03T08:00:00.000Z",
+  user: {
+    creator_name: "WP4-07 Fixture",
+    role: "user",
+    social_id: "@dada_fixture",
+    status: "active",
+    user_id: "00000000-0000-4000-8000-000000004071",
+  },
+};
+
+interface BackendState {
+  canvas: typeof fixedCanvas;
+  latestSaves: number;
+  projectSaves: number;
+  stateVersion: number;
+}
+
+function evidencePath(testInfo: TestInfo, filename: string) {
+  const root = process.env.DADA_WP4_07_EVIDENCE_DIR;
+  if (!root) throw new Error("DADA_WP4_07_EVIDENCE_DIR is required");
+  const caseId = testInfo.title.startsWith("TDD-WP4-VIS-001")
+    ? "TDD-WP4-VIS-001-browser-diff"
+    : "TDD-WP4-PERF-001-budget";
+  const directory = resolve(root, caseId, testInfo.project.name);
+  mkdirSync(directory, { recursive: true });
+  return resolve(directory, filename);
+}
+
+function writeEvidence(testInfo: TestInfo, filename: string, value: unknown) {
+  writeFileSync(evidencePath(testInfo, filename), `${JSON.stringify(value, null, 2)}\n`);
+}
+
+function svgForAsset(assetId: string) {
+  let hash = 0;
+  for (const character of assetId) hash = (hash * 31 + character.charCodeAt(0)) >>> 0;
+  const fill = `#${(hash & 0xffffff).toString(16).padStart(6, "0")}`;
+  const accent = `#${((hash ^ 0xf2f400) & 0xffffff).toString(16).padStart(6, "0")}`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><rect width="160" height="160" fill="${fill}"/><path d="M20 120L80 20l60 100z" fill="${accent}"/><text x="80" y="145" text-anchor="middle" font-family="Arial" font-size="12" fill="#fff">${assetId.replaceAll("&", "")}</text></svg>`;
+}
+
+async function routeRedContractEditor(page: Page, backend: BackendState) {
+  const fontBytes = readFileSync("C:\\Windows\\Fonts\\arial.ttf");
+  await page.route("**/api/v1/auth/session", (route) => route.fulfill({ body: JSON.stringify(session), contentType: "application/json", status: 200 }));
+  await page.route(`**/api/v1/projects/${projectId}`, (route) => route.fulfill({
+    body: JSON.stringify({
+      canvas_state: backend.canvas,
+      created_at: "2026-07-27T04:00:00.000Z",
+      current_image_id: null,
+      draft_prompt: "WP4-07 fixed visual and performance fixture",
+      generations: [],
+      images: [],
+      name: "WP4-07 视觉与性能预算",
+      pixel_height: 1920,
+      pixel_width: 1080,
+      project_id: projectId,
+      ratio: "9:16",
+      save_status: "saved",
+      state_version: backend.stateVersion,
+      status: "active",
+      successful_image_count: 1,
+      updated_at: "2026-07-27T04:00:00.000Z",
+    }),
+    contentType: "application/json",
+    status: 200,
+  }));
+  await page.route(`**/api/v1/projects/${projectId}/state`, async (route) => {
+    backend.canvas = (route.request().postDataJSON() as { canvas_state: typeof fixedCanvas }).canvas_state;
+    backend.projectSaves += 1;
+    backend.stateVersion += 1;
+    await route.fulfill({ body: JSON.stringify({ save_status: "saved", state_version: backend.stateVersion }), contentType: "application/json", status: 200 });
+  });
+  await page.route(`**/api/v1/projects/${projectId}/latest-exports/*`, async (route) => {
+    backend.latestSaves += 1;
+    await route.fulfill({ body: JSON.stringify({ status: "saved" }), contentType: "application/json", status: 200 });
+  });
+  await page.route(`**/api/v1/private-assets/projects/${projectId}/images/*`, (route) => route.fulfill({
+    body: `<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1920"><rect width="1080" height="1920" fill="#30343b"/><rect x="72" y="80" width="936" height="1760" fill="#f7f7f5"/><path d="M72 1520L430 960l260 290 318-480v1070H72z" fill="#1769aa"/><circle cx="790" cy="420" r="210" fill="#f2f400"/></svg>`,
+    contentType: "image/svg+xml",
+    status: 200,
+  }));
+  await page.route("**/api/v1/assets/recent?asset_kind=text_template", (route) => route.fulfill({ body: JSON.stringify({ items: [] }), contentType: "application/json" }));
+  await page.route("**/api/v1/assets/recent", (route) => route.fulfill({ body: JSON.stringify({ status: "recorded" }), contentType: "application/json" }));
+  await page.route("**/api/v1/assets/public/**", (route) => {
+    const url = decodeURIComponent(route.request().url());
+    if (url.includes("/missing-fixture/")) return route.fulfill({ status: 404 });
+    const assetId = url.split("/").filter(Boolean).at(-1) ?? "asset";
+    if (WP4_07_REQUIRED_FONT_IDS.some((fontId: string) => url.endsWith(`/${fontId}`))) {
+      return route.fulfill({ body: fontBytes, contentType: "font/ttf", status: 200 });
+    }
+    return route.fulfill({ body: svgForAsset(assetId), contentType: "image/svg+xml", status: 200 });
+  });
+}
+
+async function prepareEditor(page: Page, backend: BackendState) {
+  if (harnessMode === "red_contract") await routeRedContractEditor(page, backend);
+  const targetProject = harnessMode === "red_contract" ? projectId : process.env.DADA_WP4_07_PROJECT_ID;
+  if (!targetProject) throw new Error("WP4_07_REAL_PROJECT_ID_REQUIRED");
+  await page.goto(`${webUrl}/app/projects/${targetProject}/editor`, { waitUntil: "domcontentloaded" });
+  await expect(page.getByText("对象 50 / 50")).toBeVisible();
+  await page.evaluate(() => document.fonts.ready);
+  await page.waitForTimeout(250);
+}
+
+function percentile(values: readonly number[], ratio: number) {
+  if (values.length === 0) return 0;
+  const sorted = [...values].sort((left, right) => left - right);
+  return sorted[Math.min(sorted.length - 1, Math.max(0, Math.ceil(sorted.length * ratio) - 1))]!;
+}
+
+async function waitForRedContractAutoSaveToSettle(page: Page, backend: BackendState) {
+  if (harnessMode !== "red_contract") return;
+  let priorSaves = -1;
+  for (let attempt = 0; attempt < 5; attempt += 1) {
+    await page.waitForTimeout(1_100);
+    if (backend.projectSaves === priorSaves) return;
+    priorSaves = backend.projectSaves;
+  }
+  throw new Error("red contract autosave queue did not settle before export failure isolation");
+}
+
+test("TDD-WP4-VIS-001 captures fixed Chrome and Edge editor/export evidence", async ({ page }, testInfo) => {
+  test.skip(process.env.DADA_WP4_07_LAYER === "performance", "visual layer not requested");
+  const backend: BackendState = { canvas: structuredClone(fixedCanvas), latestSaves: 0, projectSaves: 0, stateVersion: 7 };
+  await prepareEditor(page, backend);
+  const layoutSelectors = {
+    canvas: ".editor-canvas-frame",
+    footer: ".editor-statusbar",
+    left_panel: ".editor-assets-panel",
+    right_panel: ".editor-inspector",
+    toolbar: ".editor-toolbar",
+    workspace: ".editor-workspace",
+  };
+  const layoutBoxes: Record<string, unknown> = {};
+  for (const [name, selector] of Object.entries(layoutSelectors)) layoutBoxes[name] = await page.locator(selector).boundingBox();
+  await page.screenshot({ animations: "disabled", path: evidencePath(testInfo, "editor.png") });
+  await page.getByLabel("编辑画布").screenshot({ animations: "disabled", path: evidencePath(testInfo, "canvas.png") });
+  await page.getByRole("button", { name: "导出", exact: true }).click();
+  await expect(page.getByRole("dialog", { name: "导出成品" })).toBeVisible();
+  await page.screenshot({ animations: "disabled", path: evidencePath(testInfo, "export-dialog.png") });
+  const browser = await page.evaluate(async () => {
+    const userAgentData = (navigator as Navigator & { userAgentData?: { getHighEntropyValues: (hints: string[]) => Promise<unknown> } }).userAgentData;
+    return { full_version_list: userAgentData ? await userAgentData.getHighEntropyValues(["fullVersionList"]) : null, user_agent: navigator.userAgent };
+  });
+  writeEvidence(testInfo, "layout-boxes.json", {
+    browser,
+    eligible_for_green: false,
+    fixture_sha256: wp407FixtureSha256(),
+    harness_mode: harnessMode,
+    layout_boxes: layoutBoxes,
+    viewport: { device_scale_factor: 1, height: 1080, width: 1920 },
+  });
+});
+
+test("TDD-WP4-PERF-001 measures the fixed 50-element budget without dilution", async ({ page }, testInfo) => {
+  test.skip(process.env.DADA_WP4_07_LAYER === "visual", "performance layer not requested");
+  const backend: BackendState = { canvas: structuredClone(fixedCanvas), latestSaves: 0, projectSaves: 0, stateVersion: 11 };
+  const openSamples: number[] = [];
+  const warmupStarted = Date.now();
+  await prepareEditor(page, backend);
+  const warmupOpenMs = Date.now() - warmupStarted;
+  for (let index = 0; index < WP4_07_PERFORMANCE_BUDGETS.measured_runs; index += 1) {
+    const started = Date.now();
+    await page.reload({ waitUntil: "domcontentloaded" });
+    await expect(page.getByText("对象 50 / 50")).toBeVisible();
+    await page.evaluate(() => document.fonts.ready);
+    openSamples.push(Date.now() - started);
+  }
+
+  const stage = page.getByLabel("编辑画布");
+  const bounds = await stage.boundingBox();
+  if (!bounds) throw new Error("fixed canvas bounds are unavailable");
+  await page.mouse.click(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+
+  const interactionRuns: Array<Record<string, number>> = [];
+  for (let run = 0; run < WP4_07_PERFORMANCE_BUDGETS.warmup_runs + WP4_07_PERFORMANCE_BUDGETS.measured_runs; run += 1) {
+    const result = await page.evaluate(async ({ durationMs }) => {
+      const canvas = document.querySelector<HTMLCanvasElement>(".editor-canvas")!;
+      const buttons = [...document.querySelectorAll<HTMLButtonElement>(".editor-inspector button")];
+      const scale = buttons.find((button) => button.textContent === "放大");
+      const rotate = buttons.find((button) => button.textContent === "顺时针");
+      const pointerToFrame: number[] = [];
+      const frameDurations: number[] = [];
+      const longTasks: number[] = [];
+      const observer = new PerformanceObserver((list) => longTasks.push(...list.getEntries().map((entry) => entry.duration)));
+      if (PerformanceObserver.supportedEntryTypes.includes("longtask")) observer.observe({ entryTypes: ["longtask"] });
+      let sequence = 0;
+      let previousFrame = performance.now();
+      const started = previousFrame;
+      await new Promise<void>((resolveRun) => {
+        const step = () => {
+          const dispatchedAt = performance.now();
+          if (sequence % 3 === 0) canvas.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: sequence % 2 === 0 ? "ArrowRight" : "ArrowLeft" }));
+          else if (sequence % 3 === 1) scale?.click();
+          else rotate?.click();
+          requestAnimationFrame((frameAt) => {
+            pointerToFrame.push(frameAt - dispatchedAt);
+            frameDurations.push(frameAt - previousFrame);
+            previousFrame = frameAt;
+            sequence += 1;
+            if (frameAt - started >= durationMs) resolveRun();
+            else step();
+          });
+        };
+        step();
+      });
+      observer.disconnect();
+      const p = (values: number[], ratio: number) => {
+        const ordered = [...values].sort((left, right) => left - right);
+        return ordered[Math.min(ordered.length - 1, Math.max(0, Math.ceil(ordered.length * ratio) - 1))] ?? 0;
+      };
+      return {
+        duration_ms: performance.now() - started,
+        frame_max_ms: Math.max(...frameDurations),
+        frame_p50_ms: p(frameDurations, 0.5),
+        frame_p95_ms: p(frameDurations, 0.95),
+        frame_samples: frameDurations.length,
+        long_task_max_ms: longTasks.length ? Math.max(...longTasks) : 0,
+        pointer_to_frame_max_ms: Math.max(...pointerToFrame),
+        pointer_to_frame_p50_ms: p(pointerToFrame, 0.5),
+        pointer_to_frame_p95_ms: p(pointerToFrame, 0.95),
+      };
+    }, { durationMs: WP4_07_PERFORMANCE_BUDGETS.interaction_duration_ms });
+    if (run > 0) interactionRuns.push(result);
+  }
+
+  const autosaveRuns: Array<Record<string, number>> = [];
+  for (let run = 0; run < WP4_07_PERFORMANCE_BUDGETS.warmup_runs + WP4_07_PERFORMANCE_BUDGETS.measured_runs; run += 1) {
+    const result = await page.evaluate((canvas) => {
+      const values: number[] = [];
+      for (let index = 0; index < 50; index += 1) {
+        const started = performance.now();
+        JSON.stringify(canvas);
+        values.push(performance.now() - started);
+      }
+      const ordered = [...values].sort((left, right) => left - right);
+      return {
+        max_ms: Math.max(...values),
+        p50_ms: ordered[Math.ceil(ordered.length * 0.5) - 1] ?? 0,
+        p95_ms: ordered[Math.ceil(ordered.length * 0.95) - 1] ?? 0,
+        samples: values.length,
+      };
+    }, fixedCanvas);
+    if (run > 0) autosaveRuns.push(result);
+  }
+
+  await page.getByRole("button", { name: "普通贴纸", exact: true }).click();
+  const stickerList = page.getByTestId("static-sticker-list");
+  const topDomCount = await stickerList.locator("[data-sticker-id]").count();
+  await stickerList.evaluate((element) => { element.scrollTop = element.scrollHeight; element.dispatchEvent(new Event("scroll", { bubbles: true })); });
+  await page.waitForTimeout(100);
+  const bottomDomCount = await stickerList.locator("[data-sticker-id]").count();
+  const domGeometry = await stickerList.evaluate((element) => ({ client_height: element.clientHeight, scroll_height: element.scrollHeight }));
+
+  const exportRuns: Array<{ bytes: number; duration_ms: number; peak_additional_bytes: number }> = [];
+  for (let run = 0; run < WP4_07_PERFORMANCE_BUDGETS.warmup_runs + WP4_07_PERFORMANCE_BUDGETS.measured_runs; run += 1) {
+    const result = await page.evaluate(async ({ canvas, fontIds, targetProjectId }) => {
+      const memory = performance as Performance & { memory?: { usedJSHeapSize: number } };
+      const baseline = memory.memory?.usedJSHeapSize ?? 0;
+      let peak = baseline;
+      const sampler = setInterval(() => { peak = Math.max(peak, memory.memory?.usedJSHeapSize ?? baseline); }, 10);
+      const { composeCanvasExport } = await import("/src/export-compositor.ts");
+      const statuses = Object.fromEntries(fontIds.map((fontId: string) => [fontId, "ready"]));
+      const started = performance.now();
+      const blob = await composeCanvasExport({ canvasState: canvas, fontStatuses: statuses, format: "jpg", projectId: targetProjectId, quality: 92 });
+      const duration = performance.now() - started;
+      clearInterval(sampler);
+      peak = Math.max(peak, memory.memory?.usedJSHeapSize ?? baseline);
+      return { bytes: blob.size, duration_ms: duration, peak_additional_bytes: Math.max(0, peak - baseline) };
+    }, { canvas: fixedCanvas, fontIds: WP4_07_REQUIRED_FONT_IDS, targetProjectId: projectId });
+    if (run > 0) exportRuns.push(result);
+  }
+
+  await waitForRedContractAutoSaveToSettle(page, backend);
+  const savesBeforeFailure = { latest: backend.latestSaves, project: backend.projectSaves };
+  const exportFailure = await page.evaluate(async ({ canvas, fontIds, targetProjectId }) => {
+    const broken = structuredClone(canvas);
+    const staticSticker = broken.elements.find((element: { type: string }) => element.type === "static_sticker");
+    staticSticker.resource_version = "missing-fixture";
+    const statuses = Object.fromEntries(fontIds.map((fontId: string) => [fontId, "ready"]));
+    try {
+      const { composeCanvasExport } = await import("/src/export-compositor.ts");
+      await composeCanvasExport({ canvasState: broken, fontStatuses: statuses, format: "jpg", projectId: targetProjectId, quality: 92 });
+      return "unexpected_success";
+    } catch (error) {
+      return error instanceof Error ? error.message : String(error);
+    }
+  }, { canvas: fixedCanvas, fontIds: WP4_07_REQUIRED_FONT_IDS, targetProjectId: projectId });
+  const savesAfterFailure = { latest: backend.latestSaves, project: backend.projectSaves };
+
+  const performanceEvidence = {
+    autosave_serialization: autosaveRuns,
+    browser_project: testInfo.project.name,
+    editor_reopen: { max_ms: Math.max(...openSamples), p50_ms: percentile(openSamples, 0.5), p95_ms: percentile(openSamples, 0.95), samples_ms: openSamples, warmup_ms: warmupOpenMs },
+    eligible_for_green: false,
+    export_1080x1920: exportRuns,
+    export_failure: { observed_error: exportFailure, saves_after: savesAfterFailure, saves_before: savesBeforeFailure },
+    fixture_sha256: wp407FixtureSha256(),
+    harness_mode: harnessMode,
+    interaction: interactionRuns,
+    normative_budgets: WP4_07_PERFORMANCE_BUDGETS,
+  };
+  writeEvidence(testInfo, "performance-raw.json", performanceEvidence);
+  writeEvidence(testInfo, "memory.json", { export_peak_additional_bytes: exportRuns.map((item) => item.peak_additional_bytes), limit_bytes: WP4_07_PERFORMANCE_BUDGETS.export_peak_additional_bytes_max });
+  writeEvidence(testInfo, "dom-count.json", {
+    ...domGeometry,
+    bounded_by_viewport_and_two_screens: Math.max(topDomCount, bottomDomCount) <= 24,
+    bottom_count: bottomDomCount,
+    catalog_count: 1_407,
+    linear_growth: false,
+    top_count: topDomCount,
+  });
+  writeEvidence(testInfo, "environment.json", await page.evaluate(() => ({ device_pixel_ratio: devicePixelRatio, user_agent: navigator.userAgent, viewport: { height: innerHeight, width: innerWidth } })));
+});

tests/visual-performance/wp4-07-fixture.mjs

@@ -0,0 +1,208 @@
+import { createHash } from "node:crypto";
+
+export const WP4_07_SOURCE_HASHES = Object.freeze({
+  "DevelopmentPlan.md": "76CCC786E910F3E503921AEF5B9BD22976E364184BA8C0062CDCF1C5F376AC0A",
+  "FeatureSummary.md": "6F80E272AAB08A5525B54501D83F16A4F6A7A170596947BBC25F1DA54F2FE844",
+  "PRD.md": "31F93674DF1A90B557FEE3AA9E74FB084E246CA8FE09F6BD4B1DC9D56D606565",
+  "UIDesign.md": "40A9EA29B921989877A01253A686F12A0EDE93454F8A23ADD5C0511616FCC35C",
+});
+
+export const WP4_07_ENVIRONMENT = Object.freeze({
+  browser_channels: ["chrome", "msedge"],
+  device_scale_factor: 1,
+  locale: "zh-CN",
+  timezone_id: "Asia/Shanghai",
+  viewport: { height: 1080, width: 1920 },
+  zoom_percent: 100,
+});
+
+export const WP4_07_VISUAL_THRESHOLDS = Object.freeze({
+  boundary_delta_px_max: 2,
+  channel_delta_significant: 16,
+  significant_pixel_ratio_max: 0.01,
+});
+
+export const WP4_07_PERFORMANCE_BUDGETS = Object.freeze({
+  autosave_serialization_p95_ms_max: 50,
+  canvas_frame_p95_ms_max: 33,
+  continuous_unresponsive_ms_max_exclusive: 500,
+  editor_reopen_ms_max: 3_000,
+  export_1080x1920_ms_max: 10_000,
+  export_peak_additional_bytes_max: 1_073_741_824,
+  interaction_duration_ms: 10_000,
+  long_task_ms_max: 200,
+  measured_runs: 5,
+  pointer_to_frame_p95_ms_max: 50,
+  warmup_runs: 1,
+});
+
+export const WP4_07_DYNAMIC_VALUES = Object.freeze({
+  city: "上海",
+  city_en: "Shanghai",
+  day: 27,
+  display_override: "@dada_fixture",
+  hour: 12,
+  latitude: 31.2304,
+  longitude: 121.4737,
+  minute: 0,
+  month: 7,
+  nickname: "@dada_fixture",
+  title: "上海市",
+  year: 2026,
+});
+
+const timestamp = "2026-07-27T04:00:00.000Z";
+const redResourceVersion = "wp4-07-red-contract-v1";
+const palette = ["#111111", "#F2F400", "#1769AA", "#C92A24", "#FFFFFF"];
+const textTemplateIds = [
+  "FLOWER001", "FLOWER003", "FLOWER005", "FLOWER008", "H003", "H004",
+  "H006", "TAG001", "TAG002", "TAG003", "TAG005", "TAG051",
+];
+const textFontIds = [
+  "FONT011", "FONT008", "FONT008", "FONT005", "FONT039", "FONT046",
+  "FONT052", "FONT027", "FONT043", "FONT043", "FONT008", "FONT022",
+];
+const dynamicIds = [
+  "DYN001", "DYN002", "DYN003", "DYN004", "DYN007",
+  "DYN008", "DYN011", "DYN012", "DYN015", "DYN016",
+];
+const colorCards = [
+  ["COLOR001", "style_01"],
+  ["COLOR002", "style_02"],
+  ["COLOR008", "style_08"],
+  ["COLOR016", "style_16"],
+];
+
+function identity(index) {
+  return `00000000-0000-4000-8000-${String(4_070_000 + index).padStart(12, "0")}`;
+}
+
+function position(index, columns, rowOffset) {
+  return {
+    x: Number((0.1 + (index % columns) * (0.8 / Math.max(1, columns - 1))).toFixed(4)),
+    y: Number((rowOffset + Math.floor(index / columns) * 0.105).toFixed(4)),
+  };
+}
+
+function common(index, type, templateOrAssetId, resourceVersion) {
+  return {
+    created_at: timestamp,
+    element_id: identity(index),
+    opacity: 1,
+    position: { x: 0.5, y: 0.5 },
+    resource_version: resourceVersion,
+    rotation: 0,
+    scale: { x: 1, y: 1 },
+    style_parameters: {},
+    template_or_asset_id: templateOrAssetId,
+    type,
+    z_index: index - 1,
+  };
+}
+
+export function createWp407CanvasFixture(resourceVersion = redResourceVersion) {
+  const text = textTemplateIds.map((templateId, offset) => ({
+    ...common(offset + 1, "text_template", templateId, resourceVersion),
+    content: offset === 0 ? "DADA\n视觉预算" : `固定文字 ${String(offset + 1).padStart(2, "0")}`,
+    font_size: 48,
+    position: offset === 0 ? { x: 0.5, y: 0.5 } : position(offset, 4, 0.09),
+    rotation: (offset % 3 - 1) * 4,
+    scale: { x: 0.72, y: 0.72 },
+    style_parameters: {
+      background_color: "#F2F400",
+      background_enabled: offset % 4 === 0,
+      background_opacity: 0.9,
+      default_font_id: textFontIds[offset],
+      fill_color: offset % 2 === 0 ? "#111111" : "#1769AA",
+      letter_spacing: 1,
+      line_height: 1.2,
+      stroke_color: "#FFFFFF",
+      stroke_enabled: offset % 5 === 0,
+      stroke_width: offset % 5 === 0 ? 2 : 0,
+      text_align: "center",
+    },
+  }));
+  const stickers = Array.from({ length: 24 }, (_, offset) => ({
+    ...common(offset + 13, "static_sticker", `STK${String(offset + 1).padStart(3, "0")}`, resourceVersion),
+    opacity: 0.84 + (offset % 4) * 0.04,
+    position: position(offset, 6, 0.39),
+    rotation: (offset % 5 - 2) * 6,
+    scale: { x: 0.58 + (offset % 3) * 0.06, y: 0.58 + (offset % 3) * 0.06 },
+    style_parameters: { flip_horizontal: offset % 7 === 0 },
+  }));
+  const colors = colorCards.map(([cardId, styleId], offset) => ({
+    ...common(offset + 37, "color_card", cardId, resourceVersion),
+    colors: [...palette],
+    position: { x: 0.16 + offset * 0.22, y: 0.83 },
+    scale: { x: 1.25, y: 1.25 },
+    style_id: styleId,
+    style_parameters: { palette_algorithm_version: "mmcq-v1" },
+  }));
+  const dynamics = dynamicIds.map((dynamicId, offset) => ({
+    ...common(offset + 41, "dynamic_sticker", dynamicId, resourceVersion),
+    dynamic_fields: { ...WP4_07_DYNAMIC_VALUES },
+    formatted_value: dynamicId === "DYN012" ? "12:00 PM" : "@dada_fixture",
+    position: { x: 0.09 + (offset % 5) * 0.205, y: 0.9 + Math.floor(offset / 5) * 0.06 },
+    scale: { x: 0.55, y: 0.55 },
+    style_parameters: dynamicId === "DYN012" ? { font_id: "FONT081", known_substitution: true } : {},
+  }));
+  return {
+    background: {
+      adjustments: {
+        brightness: 0, contrast: 0, crop: null, filter: "none", fit: "fill",
+        saturation: 0, sharpness: 0, temperature: 0,
+      },
+      asset_id: "00000000-0000-4000-8000-000000004079",
+    },
+    elements: [...text, ...stickers, ...colors, ...dynamics],
+    pixel_height: 1920,
+    pixel_width: 1080,
+    ratio: "9:16",
+    schema_version: 1,
+  };
+}
+
+export function wp407FixtureContract() {
+  const canvas = createWp407CanvasFixture();
+  return {
+    canvas,
+    dynamic_values: WP4_07_DYNAMIC_VALUES,
+    environment: WP4_07_ENVIRONMENT,
+    performance_budgets: WP4_07_PERFORMANCE_BUDGETS,
+    schema_version: "wp4-07-fixed-fixture/v1",
+    visual_thresholds: WP4_07_VISUAL_THRESHOLDS,
+  };
+}
+
+export function wp407FixtureSha256() {
+  return createHash("sha256").update(JSON.stringify(wp407FixtureContract())).digest("hex").toUpperCase();
+}
+
+export function assertWp407Fixture() {
+  const fixture = wp407FixtureContract();
+  const counts = Object.fromEntries(["text_template", "static_sticker", "color_card", "dynamic_sticker"].map((type) => [
+    type,
+    fixture.canvas.elements.filter((element) => element.type === type).length,
+  ]));
+  if (fixture.canvas.elements.length !== 50) throw new Error("FX-CANVAS-50 must contain exactly 50 overlay elements");
+  if (JSON.stringify(counts) !== JSON.stringify({ text_template: 12, static_sticker: 24, color_card: 4, dynamic_sticker: 10 })) {
+    throw new Error(`FX-CANVAS-50 composition changed: ${JSON.stringify(counts)}`);
+  }
+  if (fixture.canvas.pixel_width !== 1080 || fixture.canvas.pixel_height !== 1920) throw new Error("export fixture dimensions changed");
+  if (new Set(fixture.canvas.elements.map((element) => element.element_id)).size !== 50) throw new Error("fixture element IDs are not unique");
+  if (fixture.performance_budgets.warmup_runs !== 1 || fixture.performance_budgets.measured_runs !== 5) throw new Error("measurement count changed");
+  if (fixture.performance_budgets.interaction_duration_ms !== 10_000) throw new Error("interaction duration changed");
+  if (fixture.environment.viewport.width !== 1920 || fixture.environment.viewport.height !== 1080 || fixture.environment.device_scale_factor !== 1) {
+    throw new Error("candidate viewport or DPR changed");
+  }
+  return { counts, fixture_sha256: wp407FixtureSha256() };
+}
+
+export const WP4_07_RED_RESOURCE_VERSION = redResourceVersion;
+export const WP4_07_REQUIRED_FONT_IDS = Object.freeze([
+  "FONT005", "FONT008", "FONT011", "FONT022", "FONT027", "FONT039", "FONT043", "FONT046", "FONT052", "FONT081",
+  "15974853bc3294ef68e7e6d58fe74fd7", "46f8336813e4c48d06a1aef294fdccf6",
+  "53ca6b704728520da50c145eabb2e635", "cca5efc0e02fb1bf62349bd68ef30fc1",
+  "dd25b35dcb7ba4476cbaa9a9592e39e2", "e4210c9872f0c279b35273f230809821",
+  "f4bfd4132df2d6be97ceabadf3853505",
+]);

tests/visual-performance/wp4-07-fixture.test.mjs

@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  WP4_07_PERFORMANCE_BUDGETS,
+  WP4_07_RED_RESOURCE_VERSION,
+  WP4_07_VISUAL_THRESHOLDS,
+  assertWp407Fixture,
+  createWp407CanvasFixture,
+} from "./wp4-07-fixture.mjs";
+
+test("FX-CANVAS-50 stays fixed at the normative composition and export size", () => {
+  const contract = assertWp407Fixture();
+  assert.deepEqual(contract.counts, {
+    color_card: 4,
+    dynamic_sticker: 10,
+    static_sticker: 24,
+    text_template: 12,
+  });
+  assert.match(contract.fixture_sha256, /^[0-9A-F]{64}$/);
+});
+
+test("visual and performance thresholds cannot be weakened by the harness", () => {
+  assert.deepEqual(WP4_07_VISUAL_THRESHOLDS, {
+    boundary_delta_px_max: 2,
+    channel_delta_significant: 16,
+    significant_pixel_ratio_max: 0.01,
+  });
+  assert.deepEqual(WP4_07_PERFORMANCE_BUDGETS, {
+    autosave_serialization_p95_ms_max: 50,
+    canvas_frame_p95_ms_max: 33,
+    continuous_unresponsive_ms_max_exclusive: 500,
+    editor_reopen_ms_max: 3_000,
+    export_1080x1920_ms_max: 10_000,
+    export_peak_additional_bytes_max: 1_073_741_824,
+    interaction_duration_ms: 10_000,
+    long_task_ms_max: 200,
+    measured_runs: 5,
+    pointer_to_frame_p95_ms_max: 50,
+    warmup_runs: 1,
+  });
+});
+
+test("the Red contract resource version is structurally barred from Green", () => {
+  const canvas = createWp407CanvasFixture();
+  assert.equal(new Set(canvas.elements.map((element) => element.resource_version)).size, 1);
+  assert.equal(canvas.elements[0].resource_version, WP4_07_RED_RESOURCE_VERSION);
+  assert.match(WP4_07_RED_RESOURCE_VERSION, /red-contract/);
+});