@zenuml/core 3.47.8 → 3.48.0

package/scripts/analyze-compare-case.mjs

@@ -1,149 +0,0 @@
-#!/usr/bin/env node
-
-/*
- * What this file does:
- * Runs the compare-case analyzer end to end from the command line.
- *
- * High-level flow:
- * 1. Parse CLI flags such as case name and diff tolerances.
- * 2. Open compare-case.html in Playwright.
- * 3. Extract semantic geometry from the live HTML and SVG renderers.
- * 4. Capture native screenshots of both sides and build the analyzer's local diff.
- * 5. Build a structured report and optionally write artifacts to disk.
- * 6. Print either JSON, summaries, or both.
- *
- * This file is intentionally thin. The detailed work lives in focused modules:
- * config, browser extraction, diffing, scoring, residual attribution, and output.
- *
- * Example input:
- * `node scripts/analyze-compare-case.mjs --case async-2a --user-data-dir "/Users/pengxiao/Library/Application Support/Google/Chrome" --profile-directory "Profile 8" --channel chrome --headed --json`
- *
- * Example output:
- * A report object printed as JSON, with top-level sections such as `labels`,
- * `numbers`, `arrows`, `participant_labels`, `participant_icons`,
- * `participant_boxes`, `residual_scopes`, `diff`, and `capture`.
- */
-
-import process from "node:process";
-import { resolve } from "node:path";
-import { pathToFileURL } from "node:url";
-
-import { chromium } from "playwright";
-
-import { parseArgs } from "./analyze-compare-case/config.mjs";
-import { collectLabelData } from "./analyze-compare-case/collect-data.mjs";
-import { maybeWriteArtifacts, writeReportOutput } from "./analyze-compare-case/output.mjs";
-import { renderAndReadDiffPanel } from "./analyze-compare-case/panel-diff.mjs";
-import { buildReport } from "./analyze-compare-case/report.mjs";
-
-export async function main(argv = process.argv.slice(2), stdout = process.stdout) {
-  const args = parseArgs(argv);
-  if (args.profileDirectory && !args.userDataDir) {
-    throw new Error("--profile-directory requires --user-data-dir");
-  }
-  const compareUrl = `${args.baseUrl.replace(/\/$/, "")}/e2e/tools/compare-case.html?case=${encodeURIComponent(args.caseName)}`;
-  const chromiumArgs = args.profileDirectory
-    ? [`--profile-directory=${args.profileDirectory}`]
-    : [];
-  const launchOptions = {
-    channel: args.browserChannel || undefined,
-    headless: args.headless,
-    viewport: args.viewport,
-    deviceScaleFactor: 2,
-    args: chromiumArgs,
-  };
-  const persistentContext = args.userDataDir
-    ? await chromium.launchPersistentContext(args.userDataDir, launchOptions)
-    : null;
-  const browser = persistentContext ? null : await chromium.launch({
-    channel: args.browserChannel || undefined,
-    headless: args.headless,
-    args: chromiumArgs,
-  });
-  const context = persistentContext || await browser.newContext({
-    viewport: args.viewport,
-    deviceScaleFactor: 2,
-  });
-  const page = persistentContext
-    ? context.pages()[0] || await context.newPage()
-    : await context.newPage();
-
-  try {
-    await page.goto(compareUrl, { waitUntil: "networkidle" });
-    await page.waitForSelector("#html-output .interaction, #html-output .frame, #html-output .sequence-diagram");
-    await page.waitForSelector("#svg-output svg");
-
-    const extracted = await collectLabelData(page);
-
-    // Use CDP screenshots to match native-diff-ext (source of truth).
-    // The extension uses DOM.getBoxModel border-box + Page.captureScreenshot
-    // with clip and scale:1. Playwright's locator.screenshot() differs subtly
-    // in how it clips elements, so we replicate the extension's exact logic.
-    const cdpSession = await page.context().newCDPSession(page);
-    async function cdpScreenshotElement(selector) {
-      const { root } = await cdpSession.send("DOM.getDocument", {});
-      const { nodeId } = await cdpSession.send("DOM.querySelector", {
-        nodeId: root.nodeId,
-        selector,
-      });
-      if (!nodeId) throw new Error(`Element not found: ${selector}`);
-      const { model } = await cdpSession.send("DOM.getBoxModel", { nodeId });
-      const border = model.border;
-      const x = border[0];
-      const y = border[1];
-      const width = Math.ceil(border[2] - border[0]);
-      const height = Math.ceil(border[5] - border[1]);
-      const { data } = await cdpSession.send("Page.captureScreenshot", {
-        format: "png",
-        clip: { x, y, width, height, scale: 1 },
-        captureBeyondViewport: true,
-      });
-      return Buffer.from(data, "base64");
-    }
-
-    const htmlBuffer = await cdpScreenshotElement(extracted.htmlRootSelector);
-    const svgBuffer = await cdpScreenshotElement(extracted.svgRootSelector);
-    await cdpSession.detach();
-
-    await page.evaluate(() => {
-      if (typeof window.restoreHtmlAfterCapture === "function") {
-        window.restoreHtmlAfterCapture();
-      }
-    });
-
-    const diffImage = await renderAndReadDiffPanel(page, htmlBuffer, svgBuffer);
-    const report = buildReport(extracted.caseName || args.caseName, extracted, diffImage);
-    report.diff = diffImage.stats;
-    report.capture = {
-      url: compareUrl,
-      html_root: extracted.htmlRoot,
-      svg_root: extracted.svgRoot,
-      diff_badge: diffImage.badgeText,
-      panel_stats: diffImage.panelStats,
-    };
-
-    const artifactPaths = await maybeWriteArtifacts(args.outputDir, htmlBuffer, svgBuffer, diffImage, report);
-    if (artifactPaths) {
-      report.artifacts = artifactPaths;
-    }
-
-    writeReportOutput(stdout, report, args);
-    return report;
-  } finally {
-    await context.close();
-    if (browser) {
-      await browser.close();
-    }
-  }
-}
-
-const isDirectRun = process.argv[1]
-  ? pathToFileURL(resolve(process.argv[1])).href === import.meta.url
-  : false;
-
-if (isDirectRun) {
-  main().catch((error) => {
-    console.error(error.stack || error.message || String(error));
-    process.exit(1);
-  });
-}

package/scripts/bump-version.js

@@ -1,117 +0,0 @@
-#!/usr/bin/env node
-const fs = require("fs");
-const { execSync } = require("child_process");
-const path = require("path");
-
-const getCurrentVersion = () => {
-  try {
-    const pkg = require("../package.json");
-    const npmVersion = execSync(`npm view ${pkg.name} version`, {
-      stdio: ["pipe", "pipe", "pipe"],
-    })
-      .toString()
-      .trim();
-    console.log(`Latest version on npm: ${npmVersion}`);
-    return npmVersion;
-  } catch (error) {
-    console.error(
-      "Failed to get npm version. Please ensure you have npm registry access.",
-    );
-    console.error("Error:", error.message);
-    process.exit(1);
-  }
-};
-
-const getCommitMessages = (currentVersion) => {
-  try {
-    // Try to fetch tags first
-    try {
-      execSync("git fetch --tags");
-    } catch (e) {
-      console.log("Warning: Could not fetch tags:", e.message);
-    }
-
-    // Get commits since the last version tag
-    const messages = execSync(
-      `git log v${currentVersion}..HEAD --pretty=format:%s%n%b`,
-    ).toString();
-    console.log("\nCommit messages since", `v${currentVersion}:`);
-    console.log(messages || "(no commits)");
-    return messages;
-  } catch (e) {
-    console.log(
-      "Warning: Could not get commits since last version, falling back to recent commits",
-    );
-    // Fallback to recent commits if tag not found
-    const messages = execSync("git log -10 --pretty=format:%s%n%b").toString();
-    console.log("\nRecent commit messages:");
-    console.log(messages || "(no commits)");
-    return messages;
-  }
-};
-
-const determineVersionBump = (messages) => {
-  const lines = messages.split("\n").filter(Boolean);
-  if (
-    lines.some((msg) => msg.includes("BREAKING CHANGE") || msg.includes("!:"))
-  ) {
-    return "major";
-  }
-  if (lines.some((msg) => msg.toLowerCase().startsWith("feat"))) {
-    return "minor";
-  }
-  return "patch";
-};
-
-const getNewVersion = (currentVersion, bump) => {
-  const [major, minor, patch] = currentVersion.split(".").map(Number);
-  switch (bump) {
-    case "major":
-      return `${major + 1}.0.0`;
-    case "minor":
-      return `${major}.${minor + 1}.0`;
-    case "patch":
-      return `${major}.${minor}.${patch + 1}`;
-    default:
-      throw new Error(`Invalid version bump type: ${bump}`);
-  }
-};
-
-const run = async () => {
-  const dryRun = process.argv.includes("--dry-run");
-  if (dryRun) {
-    console.log("DRY RUN: No changes will be made\n");
-  }
-
-  const currentVersion = getCurrentVersion();
-  console.log(`Current version: ${currentVersion}`);
-
-  const messages = getCommitMessages(currentVersion);
-  const versionBump = determineVersionBump(messages);
-  console.log(`\nDetermined version bump: ${versionBump}`);
-
-  const newVersion = getNewVersion(currentVersion, versionBump);
-  console.log(`New version will be: ${newVersion}`);
-
-  if (!dryRun) {
-    // Update package.json
-    const pkg = require("../package.json");
-    pkg.version = newVersion;
-    fs.writeFileSync(
-      path.join(__dirname, "../package.json"),
-      JSON.stringify(pkg, null, 2) + "\n",
-    );
-
-    // Set output for GitHub Actions
-    if (process.env.GITHUB_ACTIONS) {
-      fs.appendFileSync(process.env.GITHUB_OUTPUT, `version=${newVersion}\n`);
-    }
-  } else {
-    console.log("\nDRY RUN: No changes were made");
-  }
-};
-
-run().catch((err) => {
-  console.error("Error:", err.message);
-  process.exit(1);
-});

package/scripts/snapshot-dual.js

@@ -1,173 +0,0 @@
-#!/usr/bin/env node
-// Generate two sets of Playwright snapshots (html & legacy modes) and a diff overlay.
-// Usage: node scripts/snapshot-dual.js -- tests/creation.spec.ts
-
-const { spawnSync } = require("node:child_process");
-const fs = require("node:fs/promises");
-const path = require("node:path");
-const { PNG } = require("pngjs");
-const pixelmatchModule = require("pixelmatch");
-const pixelmatch = pixelmatchModule.default || pixelmatchModule;
-
-const repoRoot = path.resolve(__dirname, "..");
-const testsArg = process.argv.slice(2);
-const tmpRoot = path.join(repoRoot, "tmp", "snapshots-dual");
-const paths = {
-  original: path.join(tmpRoot, "original"),
-  html: path.join(tmpRoot, "html"),
-  legacy: path.join(tmpRoot, "legacy"),
-  diff: path.join(tmpRoot, "diff"),
-};
-
-function snapshotsDirToSpecPath(dirName) {
-  return path.join("tests", dirName.replace(/-snapshots$/, ""));
-}
-
-function fileNameToTestName(file) {
-  return file.replace(/\.png$/, "").replace(/-chromium.*$/, "");
-}
-
-async function ensureDir(dir) {
-  await fs.mkdir(dir, { recursive: true });
-}
-
-async function listSnapshotDirs() {
-  const testsDir = path.join(repoRoot, "tests");
-  const entries = await fs.readdir(testsDir, { withFileTypes: true });
-  return entries
-    .filter((e) => e.isDirectory() && e.name.endsWith("-snapshots"))
-    .map((e) => path.join(testsDir, e.name));
-}
-
-async function copySnapshotDirs(destRoot) {
-  const dirs = await listSnapshotDirs();
-  await ensureDir(destRoot);
-  for (const dir of dirs) {
-    const target = path.join(destRoot, path.basename(dir));
-    await fs.rm(target, { recursive: true, force: true });
-    await fs.cp(dir, target, { recursive: true });
-  }
-}
-
-function runPlaywright(mode) {
-  const env = { ...process.env, VERTICAL_MODE: mode };
-  const args = ["playwright", "test", "--update-snapshots", ...testsArg];
-  const result = spawnSync("npx", args, {
-    cwd: repoRoot,
-    env,
-    stdio: "inherit",
-  });
-  if (result.status !== 0) {
-    throw new Error(`Playwright failed in "${mode}" mode`);
-  }
-}
-
-async function diffImages() {
-  const differences = [];
-  await ensureDir(paths.diff);
-  const htmlDirs = await fs.readdir(paths.html, { withFileTypes: true });
-  for (const dirent of htmlDirs) {
-    if (!dirent.isDirectory()) continue;
-    const baseName = dirent.name;
-    const htmlDir = path.join(paths.html, baseName);
-    const legacyDir = path.join(paths.legacy, baseName);
-    const files = await fs.readdir(htmlDir);
-    for (const file of files) {
-      if (!file.endsWith(".png")) continue;
-      const htmlPngPath = path.join(htmlDir, file);
-      const legacyPngPath = path.join(legacyDir, file);
-      try {
-        const [htmlBuf, legacyBuf] = await Promise.all([
-          fs.readFile(htmlPngPath),
-          fs.readFile(legacyPngPath),
-        ]);
-        const htmlImg = PNG.sync.read(htmlBuf);
-        const legacyImg = PNG.sync.read(legacyBuf);
-        if (
-          htmlImg.width !== legacyImg.width ||
-          htmlImg.height !== legacyImg.height
-        ) {
-          console.warn(`Skipping ${file}: dimension mismatch`);
-          continue;
-        }
-        const diff = new PNG({
-          width: htmlImg.width,
-          height: htmlImg.height,
-        });
-        const diffPixels = pixelmatch(
-          htmlImg.data,
-          legacyImg.data,
-          diff.data,
-          htmlImg.width,
-          htmlImg.height,
-          { threshold: 0.1 },
-        );
-        const outDir = path.join(paths.diff, baseName);
-        await ensureDir(outDir);
-        const diffFileName = file.replace(/\.png$/, ".diff.png");
-        await fs.writeFile(
-          path.join(outDir, diffFileName),
-          PNG.sync.write(diff),
-        );
-        if (diffPixels > 0) {
-          differences.push({
-            snapshotDir: baseName,
-            file,
-            diffPixels,
-            specPath: snapshotsDirToSpecPath(baseName),
-            testName: fileNameToTestName(file),
-            diffPath: path.join(paths.diff, baseName, diffFileName),
-          });
-        }
-      } catch (err) {
-        console.warn(`Diff failed for ${baseName}/${file}: ${err.message}`);
-      }
-    }
-  }
-  return differences;
-}
-
-async function main() {
-  await ensureDir(tmpRoot);
-  // const snapshotDirs = await listSnapshotDirs();
-  // await fs.rm(paths.original, { recursive: true, force: true });
-  // await ensureDir(paths.original);
-  // backup existing snapshots
-  // await copySnapshotDirs(paths.original);
-
-  // legacy mode
-  runPlaywright("legacy");
-  await fs.rm(paths.legacy, { recursive: true, force: true });
-  await copySnapshotDirs(paths.legacy);
-
-  // html mode
-  runPlaywright("html");
-  await fs.rm(paths.html, { recursive: true, force: true });
-  await copySnapshotDirs(paths.html);
-
-  // generate diffs
-  const differences = await diffImages();
-  console.log(`Snapshots saved under ${paths.html} and ${paths.legacy}`);
-  console.log(`Diff overlays saved under ${paths.diff}`);
-  if (differences.length === 0) {
-    console.log("All snapshots match between html and legacy modes.");
-  } else {
-    console.log("Snapshots with differences:");
-    const sorted = differences.sort((a, b) => {
-      if (a.specPath === b.specPath)
-        return a.testName.localeCompare(b.testName);
-      return a.specPath.localeCompare(b.specPath);
-    });
-    for (const diff of sorted) {
-      const relDiffPath = path.relative(repoRoot, diff.diffPath);
-      console.log(
-        `- ${diff.specPath} (test \"${diff.testName}\"): ${diff.snapshotDir}/${diff.file} -> ${diff.diffPixels} differing pixels [${relDiffPath}]`,
-      );
-    }
-  }
-}
-
-main().catch((err) => {
-  console.error(err);
-  process.exit(1);
-});

package/scripts/update-snapshots.js

@@ -1,70 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Script to update Cypress image snapshots
- *
- * This script:
- * 1. Removes all .diff.png files
- * 2. Replaces .png files with their .actual.png counterparts
- * 3. Removes all .actual.png files
- */
-
-const fs = require("fs");
-const path = require("path");
-const { promisify } = require("util");
-const { exec } = require("child_process");
-
-const execAsync = promisify(exec);
-
-// Path to the image snapshots directory
-const SNAPSHOTS_DIR = path.resolve(
-  __dirname,
-  "../cypress/e2e/__image_snapshots__",
-);
-
-async function updateSnapshots() {
-  try {
-    console.log("Starting snapshot update process...");
-
-    // Check if the snapshots directory exists
-    if (!fs.existsSync(SNAPSHOTS_DIR)) {
-      console.error(`Error: Snapshots directory not found at ${SNAPSHOTS_DIR}`);
-      process.exit(1);
-    }
-
-    console.log("1. Removing .diff.png files...");
-    await execAsync(`find "${SNAPSHOTS_DIR}" -name "*.diff.png" -delete`);
-
-    console.log(
-      "2. Replacing .png files with their .actual.png counterparts...",
-    );
-    // Find all .actual.png files and replace their corresponding .png files
-    const files = await execAsync(
-      `find "${SNAPSHOTS_DIR}" -name "*.actual.png"`,
-    );
-    const actualFiles = files.stdout.trim().split("\n").filter(Boolean);
-
-    for (const actualFile of actualFiles) {
-      const targetFile = actualFile.replace(".actual.png", ".png");
-      console.log(
-        `   Replacing ${path.basename(targetFile)} with ${path.basename(
-          actualFile,
-        )}`,
-      );
-      fs.copyFileSync(actualFile, targetFile);
-    }
-
-    console.log("3. Removing .actual.png files...");
-    await execAsync(`find "${SNAPSHOTS_DIR}" -name "*.actual.png" -delete`);
-
-    console.log("Snapshot update completed successfully!");
-    console.log(
-      "Remember to commit and push these changes to update the reference snapshots.",
-    );
-  } catch (error) {
-    console.error("Error updating snapshots:", error);
-    process.exit(1);
-  }
-}
-
-updateSnapshots();

package/skills/dia-scoring/SKILL.md

@@ -1,129 +0,0 @@
----
-name: dia-scoring
-description: Score HTML-vs-SVG diagram parity in compare-case pages, including message labels, fragment labels, sequence numbers, arrows, participant headers, icons, stereotypes, participant colors, participant groups, comments, and residual diff scopes. Use Playwright for page inspection and semantic attribution; use the live `#diff-panel canvas` as the sole pixel-diff source of truth.
----
-
-# Dia Scoring
-
-Use this skill when the task is to measure **message labels, fragment labels, sequence numbers, message arrows, participant labels, participant boxes, participant icons, stereotypes, participant colors, participant groups, inline comments, and residual diff hotspots** between the HTML renderer and the native SVG renderer on `compare-case.html`. Use Playwright page inspection only to inspect the page and semantically attribute diffs to letters or elements. Use the live `#diff-panel canvas` as the sole pixel-diff source of truth.
-
-The workflow is browser-native:
-
-1. Open `http://localhost:8080/e2e/tools/compare-case.html?case=<name>`.
-2. Treat the `native-diff-ext` extension as required for pixel diff work: it generates the live `#diff-panel canvas` on page load.
-3. Use the analyzer script at [../../scripts/analyze-compare-case.mjs](../../scripts/analyze-compare-case.mjs).
-4. Prefer `--json` when the next step is automated processing.
-5. Prefer `--output-dir <dir>` when you need saved `html.png`, `svg.png`, `diff.png`, and `report.json`.
-6. Treat all pixel-diff comparison and residual scoping as live-panel work sourced from `#diff-panel canvas`.
-7. When recalibrating or correcting this skill itself, use the live `#diff-panel canvas` to calibrate the skill's measurement rules and reporting language.
-
-## Offset Anchor
-
-All reported offsets must use the **outermost frame's top-left corner** as the anchor.
-
-- HTML anchor: the compare-case HTML frame root
-- SVG anchor: the compare-case SVG root / outer frame root
-- Do not report alternate offset systems
-- Do not anchor offsets to participant boxes, label boxes, stereotype boxes, or local containers
-- If a local-container-relative reading differs from the frame-anchor reading, prefer the frame-anchor reading in all reporting
-
-## Browser Requirement
-
-Use **Playwright browser tools only** for browser interaction in this workflow.
-
-- Preferred tools: `browser_navigate`, `browser_snapshot`, `browser_evaluate`, `browser_take_screenshot`, `browser_click`, `browser_wait_for`
-- Do not use Chrome DevTools browser tools for scoring, DOM inspection, screenshot capture, or residual validation
-- Do not build your own pixel diff from HTML/SVG screenshots. For pixel comparison, use only the extension-rendered `#diff-panel canvas`
-
-## Rules
-
-- Do not use `html-to-image` for capture.
-- Use browser-native screenshots only.
-- Use Playwright for browser-native screenshots and page inspection.
-- Use the extension-generated live `#diff-panel canvas` as the sole source for pixel diff comparison and residual validation.
-- All offset calculations must be anchored to the outermost frame's top-left corner.
-- When re-checking, recalibrating, or correcting `dia-scoring` itself, calibrate the skill against the live `#diff-panel canvas`, not against a separately-built diff or memory of prior results.
-- If `#diff-panel canvas` is absent, do not recalibrate or correct `dia-scoring` itself.
-- Never build or trust a local screenshot-to-screenshot pixel diff when `#diff-panel canvas` is the question.
-- Do not use Chrome DevTools browser tools for this workflow.
-- Scope:
-  - normal messages
-  - self messages
-  - returns
-  - fragment conditions such as `[cond]`, `[else]`
-  - fragment section labels such as `catch`, `finally`
-  - participant label text and participant box geometry
-  - participant icons (actor, database, ec2, lambda, azurefunction, sqs, sns, iam, boundary, control, entity)
-  - participant stereotypes such as `«BFF»`, `«Interface»`
-  - participant background colors (`#FFEBE6`, `#0747A6`, etc.) and computed text contrast
-  - participant groups (dashed outline containers with title bar)
-  - inline comments (`// text`) above messages and fragments, including styled comments (`// [red] text`)
-  - residual `html-only` and `svg-only` diff clusters scoped back to nearby elements
-- For each supported message, include:
-  - label text
-  - fragment condition / section label text when present
-  - sequence number text, including fragment sequence numbers when present
-  - arrow geometry keyed by sequence number
-  - normal/return arrow endpoint deltas: `left_dx`, `right_dx`, `width_dx`
-  - self-arrow loop geometry from the painted loop path plus arrowhead, not the outer `svg` viewport
-  - self-arrow vertical deltas: `top_dy`, `bottom_dy`, `height_dy`
-- For participant icons, include:
-  - icon presence (HTML vs SVG)
-  - participant label text when the participant has an icon
-  - icon position relative to participant label
-  - icon visual match confirmation from diff image
-- For participant stereotypes, include:
-  - stereotype text presence (HTML vs SVG), e.g. `«BFF»`
-  - stereotype position relative to participant label (above label, smaller font)
-  - stereotype offset must be measured with per-letter glyph-box comparison relative to the outermost frame anchor
-  - do not use participant-box-relative or other local-container-relative deltas in final reporting
-  - do not mark a stereotype as clean from glyph boxes alone; also check the live `#diff-panel canvas` in the stereotype row
-  - if glyph-box deltas are `0/0` but the panel still shows localized red/blue pixels overlapping the stereotype glyph union, report the stereotype as `ambiguous` or `paint-level residual`, not clean
-  - stereotype text color matching participant background contrast
-- For participant colors, include:
-  - background fill color (hex value) on participant rect
-  - text color contrast (dark text on light bg, white text on dark bg)
-  - color application to both top and bottom participant boxes
-- For participant groups, include:
-  - group name text presence and position (centered title bar)
-  - dashed outline rect enclosing grouped participants
-  - group bounds: leftmost to rightmost participant with margin
-  - group height extending to diagram bottom
-- For inline comments, include:
-  - comment text presence and position (above the associated statement)
-  - comment Y offset from the message/fragment it belongs to
-  - fragment-level comments (e.g. `// comment 4` before `if(...)`) positioned above fragment header
-  - styled comment color application (e.g. `// [red] text`)
-- For participant boxes, include:
-  - `html_box` and `svg_box` with `x`, `y`, `w`, `h`
-  - box deltas `dx`, `dy`, `dw`, `dh`
-  - SVG measurement based on the painted outer bounds of the stroked box, not the inset rect geometry
-- For residual scopes, include:
-  - connected `html-only` and `svg-only` diff clusters from `#diff-panel canvas`
-  - cluster `size`, `bbox`, and `centroid`
-  - nearest scoped HTML and SVG targets at that position
-  - summaries that explain which element a remaining positional diff most likely belongs to
-  - live native diff panel confirmation before claiming a hotspot is real
-  - the largest confirmed live-panel `html-only` and `svg-only` clusters with approximate positions
-  - grouped summaries of where the panel's red and blue pixels are concentrated
-- Do not report a residual hotspot as real if it is absent from the live `#diff-panel canvas`.
-- Do not stop at totals like `HTML-only (44)` or `SVG-only (55)` when residuals matter; report where those pixels are.
-- Each reported letter must be backed by:
-  - direct HTML-vs-SVG browser layout positions
-  - pixel-panel confirmation from `#diff-panel canvas`
-- Participant stereotypes are first-class targets, not just part of `participant-box` or `participant-label`.
-- If the evidence is weak or contradictory, keep the letter `ambiguous`.
-
-## Commands
-
-Run from [../..](../..):
-
-```bash
-node scripts/analyze-compare-case.mjs --case async-2a
-node scripts/analyze-compare-case.mjs --case async-2a --json
-node scripts/analyze-compare-case.mjs --case async-2a --output-dir tmp/message-elements/async-2a
-```
-
-## References
-
-- Selector and pairing details: [references/selectors-and-keys.md](references/selectors-and-keys.md)

package/skills/dia-scoring/agents/openai.yaml

@@ -1,7 +0,0 @@
-interface:
-  display_name: "Dia Scoring"
-  short_description: "Diagram label, number, and arrow offsets"
-  default_prompt: "Use $dia-scoring to measure message label, sequence-number, and arrow parity for a compare-case page."
-
-policy:
-  allow_implicit_invocation: true