From 5ee1551b5b3008e83ee865bbfcb380176a028388 Mon Sep 17 00:00:00 2001 From: Alex Verkhovsky Date: Fri, 5 Dec 2025 19:35:46 -0800 Subject: [PATCH] fix(bmm): remove stale validate-prd references (fixes #1030) (#1038) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove validate-prd workflow references from all workflow path YAML files - Update Excalidraw diagram: remove Validate PRD box and zombie JSON elements - Re-export SVG at 1x scale - Standardize implementation-readiness descriptions across all docs - Add validation script (validate-svg-changes.sh) and README for SVG export process - Correct Excalidraw timestamps 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Co-authored-by: Brian --- src/modules/bmm/docs/agents-guide.md | 23 +- src/modules/bmm/docs/faq.md | 2 +- src/modules/bmm/docs/glossary.md | 2 +- src/modules/bmm/docs/images/README.md | 37 ++ .../workflow-method-greenfield.excalidraw | 264 +++---------- .../images/workflow-method-greenfield.svg | 4 +- .../paths/enterprise-brownfield.yaml | 7 +- .../paths/enterprise-greenfield.yaml | 7 +- .../paths/method-brownfield.yaml | 7 +- .../paths/method-greenfield.yaml | 8 +- tools/validate-svg-changes.sh | 356 ++++++++++++++++++ 11 files changed, 474 insertions(+), 243 deletions(-) create mode 100644 src/modules/bmm/docs/images/README.md create mode 100755 tools/validate-svg-changes.sh diff --git a/src/modules/bmm/docs/agents-guide.md b/src/modules/bmm/docs/agents-guide.md index 89010bb6..16e5d633 100644 --- a/src/modules/bmm/docs/agents-guide.md +++ b/src/modules/bmm/docs/agents-guide.md @@ -76,8 +76,7 @@ The BMad Method Module (BMM) provides a comprehensive team of specialized AI age - `create-prd` - Create PRD for Level 2-4 projects (creates FRs/NFRs only) - `tech-spec` - Quick spec for Level 0-1 projects - `create-epics-and-stories` - Break PRD into implementable pieces (runs AFTER architecture) -- `validate-prd` - Validate PRD completeness -- `validate-tech-spec` - Validate Technical Specification +- `implementation-readiness` - Validate PRD + Architecture + Epics + UX (optional) - `correct-course` - Handle mid-project changes - `workflow-init` - Initialize workflow tracking @@ -146,7 +145,7 @@ The BMad Method Module (BMM) provides a comprehensive team of specialized AI age - `workflow-status` - Check what to do next - `create-architecture` - Produce a Scale Adaptive Architecture - `validate-architecture` - Validate architecture document -- `implementation-readiness` - Validate readiness for Phase 4 +- `implementation-readiness` - Validate PRD + Architecture + Epics + UX (optional) **Communication Style:** Comprehensive yet pragmatic. Uses architectural metaphors. Balances technical depth with accessibility. Connects decisions to business value. @@ -642,13 +641,12 @@ Some workflows are available to multiple agents: Many workflows have optional validation workflows that perform independent review: -| Validation | Agent | Validates | -| ----------------------- | ----------- | -------------------------------- | -| `validate-prd` | PM | PRD completeness (FRs/NFRs only) | -| `validate-tech-spec` | PM | Technical specification quality | -| `validate-architecture` | Architect | Architecture document | -| `validate-design` | UX Designer | UX specification and artifacts | -| `validate-create-story` | SM | Story draft | +| Validation | Agent | Validates | +| -------------------------- | ----------- | ------------------------------------------ | +| `implementation-readiness` | Architect | PRD + Architecture + Epics + UX (optional) | +| `validate-architecture` | Architect | Architecture document | +| `validate-design` | UX Designer | UX specification and artifacts | +| `validate-create-story` | SM | Story draft | **When to use validation:** @@ -945,9 +943,8 @@ Agent analyzes project state → recommends next workflow ``` Each phase has validation gates: -- Phase 2 to 3: validate-prd, validate-tech-spec -- Phase 3 to 4: implementation-readiness -Run validation before advancing +- Phase 3 to 4: implementation-readiness (validates PRD + Architecture + Epics + UX (optional)) +Run validation before advancing to implementation ``` **Course correction:** diff --git a/src/modules/bmm/docs/faq.md b/src/modules/bmm/docs/faq.md index 7d041b87..3270f9c4 100644 --- a/src/modules/bmm/docs/faq.md +++ b/src/modules/bmm/docs/faq.md @@ -147,7 +147,7 @@ If status file exists, use workflow-status. If not, use workflow-init. ### Q: How do I know when Phase 3 is complete and I can start Phase 4? -**A:** For Level 3-4, run the implementation-readiness workflow. It validates that PRD (FRs/NFRs), architecture, epics+stories, and UX (if applicable) are cohesive before implementation. Pass the gate check = ready for Phase 4. +**A:** For Level 3-4, run the implementation-readiness workflow. It validates PRD + Architecture + Epics + UX (optional) are aligned before implementation. Pass the gate check = ready for Phase 4. ### Q: Can I run workflows in parallel or do they have to be sequential? diff --git a/src/modules/bmm/docs/glossary.md b/src/modules/bmm/docs/glossary.md index 813cdf72..62735532 100644 --- a/src/modules/bmm/docs/glossary.md +++ b/src/modules/bmm/docs/glossary.md @@ -246,7 +246,7 @@ Workflow that initializes Phase 4 implementation by creating sprint-status.yaml, ### Gate Check -Validation workflow (implementation-readiness) run before Phase 4 to ensure PRD, architecture, and UX documents are cohesive with no gaps or contradictions. Required for BMad Method and Enterprise Method tracks. +Validation workflow (implementation-readiness) run before Phase 4 to ensure PRD + Architecture + Epics + UX (optional) are aligned with no gaps or contradictions. Required for BMad Method and Enterprise Method tracks. ### DoD (Definition of Done) diff --git a/src/modules/bmm/docs/images/README.md b/src/modules/bmm/docs/images/README.md new file mode 100644 index 00000000..cc943e47 --- /dev/null +++ b/src/modules/bmm/docs/images/README.md @@ -0,0 +1,37 @@ +# Workflow Diagram Maintenance + +## Regenerating SVG from Excalidraw + +When you edit `workflow-method-greenfield.excalidraw`, regenerate the SVG: + +1. Open https://excalidraw.com/ +2. Load the `.excalidraw` file +3. Click menu (☰) → Export image → SVG +4. **Set "Scale" to 1x** (default is 2x) +5. Click "Export" +6. Save as `workflow-method-greenfield.svg` +7. **Validate the changes** (see below) +8. Commit both files together + +**Important:** + +- Always use **1x scale** to maintain consistent dimensions +- Automated export tools (`excalidraw-to-svg`) are broken - use manual export only + +## Visual Validation + +After regenerating the SVG, validate that it renders correctly: + +```bash +./tools/validate-svg-changes.sh src/modules/bmm/docs/images/workflow-method-greenfield.svg +``` + +This script: + +- Checks for required dependencies (Playwright, ImageMagick) +- Installs Playwright locally if needed (no package.json pollution) +- Renders old vs new SVG using browser-accurate rendering +- Compares pixel-by-pixel and generates a diff image +- Outputs a prompt for AI visual analysis (paste into Gemini/Claude) + +**Threshold**: <0.01% difference is acceptable (anti-aliasing variations) diff --git a/src/modules/bmm/docs/images/workflow-method-greenfield.excalidraw b/src/modules/bmm/docs/images/workflow-method-greenfield.excalidraw index de98315c..f4d2411f 100644 --- a/src/modules/bmm/docs/images/workflow-method-greenfield.excalidraw +++ b/src/modules/bmm/docs/images/workflow-method-greenfield.excalidraw @@ -1036,10 +1036,6 @@ "type": "arrow", "id": "arrow-discovery-no" }, - { - "type": "arrow", - "id": "arrow-prd-validate" - }, { "id": "arrow-phase1-to-phase2", "type": "arrow" @@ -1055,17 +1051,21 @@ { "id": "arrow-has-ui-no", "type": "arrow" + }, + { + "id": "arrow-prd-hasui", + "type": "arrow" } ], "locked": false, - "version": 107, - "versionNonce": 930129274, + "version": 108, + "versionNonce": 930129275, "index": "aN", "isDeleted": false, "strokeStyle": "solid", "seed": 1, "frameId": null, - "updated": 1764191563350, + "updated": 1764952855000, "link": null }, { @@ -1107,197 +1107,6 @@ "autoResize": true, "lineHeight": 1.25 }, - { - "id": "arrow-prd-validate", - "type": "arrow", - "x": 439.4640518625828, - "y": 331.0450590268819, - "width": 0.17283039375342923, - "height": 28.50332681186643, - "angle": 0, - "strokeColor": "#1976d2", - "backgroundColor": "transparent", - "fillStyle": "solid", - "strokeWidth": 2, - "roughness": 0, - "opacity": 100, - "groupIds": [], - "startBinding": { - "elementId": "proc-prd", - "focus": 0, - "gap": 1 - }, - "endBinding": { - "elementId": "proc-validate-prd", - "focus": 0, - "gap": 1 - }, - "points": [ - [ - 0, - 0 - ], - [ - 0.17283039375342923, - 28.50332681186643 - ] - ], - "lastCommittedPoint": null, - "version": 102, - "versionNonce": 1274591910, - "index": "aP", - "isDeleted": false, - "strokeStyle": "solid", - "seed": 1, - "frameId": null, - "roundness": null, - "boundElements": [], - "updated": 1764191023838, - "link": null, - "locked": false, - "startArrowhead": null, - "endArrowhead": "arrow" - }, - { - "id": "proc-validate-prd", - "type": "rectangle", - "x": 360, - "y": 360, - "width": 160, - "height": 80, - "angle": 0, - "strokeColor": "#43a047", - "backgroundColor": "#c8e6c9", - "fillStyle": "solid", - "strokeWidth": 2, - "roughness": 0, - "opacity": 100, - "roundness": { - "type": 3, - "value": 8 - }, - "groupIds": [ - "proc-validate-prd-group" - ], - "boundElements": [ - { - "type": "text", - "id": "proc-validate-prd-text" - }, - { - "type": "arrow", - "id": "arrow-prd-validate" - }, - { - "type": "arrow", - "id": "arrow-validate-prd-hasui" - }, - { - "id": "jv0rnlK2D9JKIGTO7pUtT", - "type": "arrow" - } - ], - "locked": false, - "version": 3, - "versionNonce": 894806650, - "index": "aQ", - "isDeleted": false, - "strokeStyle": "solid", - "seed": 1, - "frameId": null, - "updated": 1764191341774, - "link": null - }, - { - "id": "proc-validate-prd-text", - "type": "text", - "x": 370, - "y": 375, - "width": 140, - "height": 50, - "angle": 0, - "strokeColor": "#1e1e1e", - "backgroundColor": "transparent", - "fillStyle": "solid", - "strokeWidth": 2, - "roughness": 0, - "opacity": 100, - "groupIds": [ - "proc-validate-prd-group" - ], - "fontSize": 14, - "fontFamily": 1, - "text": "Validate PRD\n<>", - "textAlign": "center", - "verticalAlign": "middle", - "containerId": "proc-validate-prd", - "locked": false, - "version": 2, - "versionNonce": 944332155, - "index": "aR", - "isDeleted": false, - "strokeStyle": "solid", - "seed": 1, - "frameId": null, - "roundness": null, - "boundElements": [], - "updated": 1763522171080, - "link": null, - "originalText": "Validate PRD\n<>", - "autoResize": true, - "lineHeight": 1.7857142857142858 - }, - { - "id": "arrow-validate-prd-hasui", - "type": "arrow", - "x": 440, - "y": 440, - "width": 0, - "height": 30, - "angle": 0, - "strokeColor": "#1976d2", - "backgroundColor": "transparent", - "fillStyle": "solid", - "strokeWidth": 2, - "roughness": 0, - "opacity": 100, - "groupIds": [], - "startBinding": { - "elementId": "proc-validate-prd", - "focus": 0, - "gap": 1 - }, - "endBinding": { - "elementId": "decision-has-ui", - "focus": 0, - "gap": 1 - }, - "points": [ - [ - 0, - 0 - ], - [ - 0, - 30 - ] - ], - "lastCommittedPoint": null, - "version": 2, - "versionNonce": 1369541557, - "index": "aS", - "isDeleted": false, - "strokeStyle": "solid", - "seed": 1, - "frameId": null, - "roundness": null, - "boundElements": [], - "updated": 1763522171080, - "link": null, - "locked": false, - "startArrowhead": null, - "endArrowhead": "arrow" - }, { "id": "decision-has-ui", "type": "diamond", @@ -1322,7 +1131,7 @@ }, { "type": "arrow", - "id": "arrow-validate-prd-hasui" + "id": "arrow-prd-hasui" }, { "type": "arrow", @@ -1334,15 +1143,15 @@ } ], "locked": false, - "version": 2, - "versionNonce": 1003877915, + "version": 3, + "versionNonce": 1003877916, "index": "aT", "isDeleted": false, "strokeStyle": "solid", "seed": 1, "frameId": null, "roundness": null, - "updated": 1763522171080, + "updated": 1764952855000, "link": null }, { @@ -5162,6 +4971,57 @@ "startArrowhead": null, "endArrowhead": "arrow", "elbowed": false + }, + { + "id": "arrow-prd-hasui", + "type": "arrow", + "x": 440, + "y": 330, + "width": 0, + "height": 140, + "angle": 0, + "strokeColor": "#1976d2", + "backgroundColor": "transparent", + "fillStyle": "solid", + "strokeWidth": 2, + "roughness": 0, + "opacity": 100, + "groupIds": [], + "startBinding": { + "elementId": "proc-prd", + "focus": 0, + "gap": 1 + }, + "endBinding": { + "elementId": "decision-has-ui", + "focus": 0, + "gap": 1 + }, + "points": [ + [ + 0, + 0 + ], + [ + 0, + 140 + ] + ], + "lastCommittedPoint": null, + "version": 1, + "versionNonce": 1, + "index": "b1J", + "isDeleted": false, + "strokeStyle": "solid", + "seed": 1, + "frameId": null, + "roundness": null, + "boundElements": [], + "updated": 1764952855000, + "link": null, + "locked": false, + "startArrowhead": null, + "endArrowhead": "arrow" } ], "appState": { diff --git a/src/modules/bmm/docs/images/workflow-method-greenfield.svg b/src/modules/bmm/docs/images/workflow-method-greenfield.svg index 1b7dd76c..6522b695 100644 --- a/src/modules/bmm/docs/images/workflow-method-greenfield.svg +++ b/src/modules/bmm/docs/images/workflow-method-greenfield.svg @@ -1,2 +1,4 @@ + + BMad Method Workflow - Standard GreenfieldStartPHASE 1Discovery(Optional)IncludeDiscovery?YesBrainstorm<<optional>>Research<<optional>>Product Brief<<optional>>NoPHASE 2Planning (Required)PRDValidate PRD<<optional>>Has UI?YesCreate UXNoPHASE 3Solutioning (Required)ArchitectureEpics/StoriesTest Design<<optional>>Validate Arch<<optional>>ImplementationReadinessPHASE 4Implementation (Required)Sprint PlanSTORY LOOPCreate StoryValidate Story<<optional>>Develop StoryCode ReviewPass?FailPassCode Review<<use differentLLM>>More Storiesin Epic?YesNoRetrospectiveMore Epics?YesNoEndAgent LegendAnalystPMUX DesignerArchitectTEASMDEVDecision \ No newline at end of file + @font-face { font-family: Virgil; src: url(data:font/woff2;base64,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); }BMad Method Workflow - Standard GreenfieldStartPHASE 1Discovery(Optional)IncludeDiscovery?YesBrainstorm<<optional>>Research<<optional>>Product Brief<<optional>>NoPHASE 2Planning (Required)PRDHas UI?YesCreate UXNoPHASE 3Solutioning (Required)ArchitectureEpics/StoriesTest Design<<optional>>Validate Arch<<optional>>ImplementationReadinessPHASE 4Implementation (Required)Sprint PlanSTORY LOOPCreate StoryValidate Story<<optional>>Develop StoryCode ReviewPass?FailPassCode Review<<use differentLLM>>More Storiesin Epic?YesNoRetrospectiveMore Epics?YesNoEndAgent LegendAnalystPMUX DesignerArchitectTEASMDEVDecision \ No newline at end of file diff --git a/src/modules/bmm/workflows/workflow-status/paths/enterprise-brownfield.yaml b/src/modules/bmm/workflows/workflow-status/paths/enterprise-brownfield.yaml index 7ac0d490..5064030d 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/enterprise-brownfield.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/enterprise-brownfield.yaml @@ -56,11 +56,6 @@ phases: output: "Enterprise PRD with compliance requirements" note: "Must address existing system constraints and migration strategy" - - id: "validate-prd" - recommended: true - agent: "pm" - command: "validate-prd" - - id: "create-ux-design" recommended: true agent: "ux-designer" @@ -114,7 +109,7 @@ phases: required: true agent: "architect" command: "implementation-readiness" - note: "Critical gate - validates all planning + Epics before touching production system" + note: "Validates PRD + Architecture + Epics + UX (optional)" - phase: 3 name: "Implementation" diff --git a/src/modules/bmm/workflows/workflow-status/paths/enterprise-greenfield.yaml b/src/modules/bmm/workflows/workflow-status/paths/enterprise-greenfield.yaml index de15e3c3..94757114 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/enterprise-greenfield.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/enterprise-greenfield.yaml @@ -44,11 +44,6 @@ phases: output: "Comprehensive Product Requirements Document" note: "Enterprise-level requirements with compliance considerations" - - id: "validate-prd" - recommended: true - agent: "pm" - command: "validate-prd" - - id: "create-ux-design" recommended: true agent: "ux-designer" @@ -102,7 +97,7 @@ phases: required: true agent: "architect" command: "implementation-readiness" - note: "Validates all planning artifacts + Epics + testability align before implementation" + note: "Validates PRD + Architecture + Epics + UX (optional)" - phase: 3 name: "Implementation" diff --git a/src/modules/bmm/workflows/workflow-status/paths/method-brownfield.yaml b/src/modules/bmm/workflows/workflow-status/paths/method-brownfield.yaml index ed9cbd32..67ee6cd0 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/method-brownfield.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/method-brownfield.yaml @@ -55,11 +55,6 @@ phases: output: "PRD focused on new features/changes" note: "Must consider existing system constraints" - - id: "validate-prd" - optional: true - agent: "pm" - command: "validate-prd" - - id: "create-ux-design" conditional: "if_has_ui" agent: "ux-designer" @@ -98,7 +93,7 @@ phases: required: true agent: "architect" command: "implementation-readiness" - note: "Validates PRD + UX + Architecture + Epics cohesion before implementation" + note: "Validates PRD + Architecture + Epics + UX (optional)" - phase: 3 name: "Implementation" diff --git a/src/modules/bmm/workflows/workflow-status/paths/method-greenfield.yaml b/src/modules/bmm/workflows/workflow-status/paths/method-greenfield.yaml index bef2a839..aca183e9 100644 --- a/src/modules/bmm/workflows/workflow-status/paths/method-greenfield.yaml +++ b/src/modules/bmm/workflows/workflow-status/paths/method-greenfield.yaml @@ -43,12 +43,6 @@ phases: command: "prd" output: "Product Requirements Document with FRs and NFRs" - - id: "validate-prd" - optional: true - agent: "pm" - command: "validate-prd" - note: "Quality check for PRD completeness" - - id: "create-ux-design" conditional: "if_has_ui" agent: "ux-designer" @@ -89,7 +83,7 @@ phases: required: true agent: "architect" command: "implementation-readiness" - note: "Validates PRD + UX + Architecture + Epics + Testability cohesion before implementation" + note: "Validates PRD + Architecture + Epics + UX (optional)" - phase: 3 name: "Implementation" diff --git a/tools/validate-svg-changes.sh b/tools/validate-svg-changes.sh new file mode 100755 index 00000000..07c68375 --- /dev/null +++ b/tools/validate-svg-changes.sh @@ -0,0 +1,356 @@ +#!/bin/bash +# +# Visual SVG Validation Script +# +# Compares old vs new SVG files using browser-accurate rendering (Playwright) +# and pixel-level comparison (ImageMagick), then generates a prompt for AI analysis. +# +# Usage: ./tools/validate-svg-changes.sh +# + +set -e + +SVG_FILE="${1:-src/modules/bmm/docs/images/workflow-method-greenfield.svg}" +TMP_DIR="/tmp/svg-validation-$$" + +echo "🎨 Visual SVG Validation" +echo "" + +# Check if file exists +if [ ! -f "$SVG_FILE" ]; then + echo "❌ Error: SVG file not found: $SVG_FILE" + exit 1 +fi + +# Check for ImageMagick +if ! command -v magick &> /dev/null; then + echo "❌ ImageMagick not found" + echo "" + echo "Install with:" + echo " brew install imagemagick" + echo "" + exit 1 +fi + +echo "✓ ImageMagick found" + +# Check for Node.js +if ! command -v node &> /dev/null; then + echo "❌ Node.js not found" + exit 1 +fi + +echo "✓ Node.js found ($(node -v))" + +# Check for Playwright (local install) +if [ ! -d "node_modules/playwright" ]; then + echo "" + echo "📦 Playwright not found locally" + echo "Installing Playwright (local to this project, no package.json changes)..." + echo "" + npm install --no-save playwright + echo "" + echo "✓ Playwright installed" +else + echo "✓ Playwright found" +fi + +echo "" +echo "🔄 Rendering SVGs to PNG..." +echo "" + +# Create temp directory +mkdir -p "$TMP_DIR" + +# Extract old SVG from git +git show HEAD:"$SVG_FILE" > "$TMP_DIR/old.svg" 2>/dev/null || { + echo "❌ Could not extract old SVG from git HEAD" + echo " Make sure you have uncommitted changes to compare" + exit 1 +} + +# Copy new SVG +cp "$SVG_FILE" "$TMP_DIR/new.svg" + +# Create Node.js renderer script in project directory (so it can find node_modules) +cat > "tools/render-svg-temp.js" << 'EOJS' +const { chromium } = require('playwright'); +const fs = require('fs'); + +async function renderSVG(svgPath, pngPath) { + const browser = await chromium.launch({ headless: true }); + const page = await browser.newPage(); + + const svgContent = fs.readFileSync(svgPath, 'utf8'); + const widthMatch = svgContent.match(/width="([^"]+)"/); + const heightMatch = svgContent.match(/height="([^"]+)"/); + const width = Math.ceil(parseFloat(widthMatch[1])); + const height = Math.ceil(parseFloat(heightMatch[1])); + + const html = ` + + + + + + ${svgContent} + + `; + + await page.setContent(html); + await page.setViewportSize({ width, height }); + await page.waitForTimeout(1000); + await page.screenshot({ path: pngPath, fullPage: true }); + await browser.close(); + + console.log(`✓ Rendered ${pngPath}`); +} + +(async () => { + await renderSVG(process.argv[2], process.argv[3]); + await renderSVG(process.argv[4], process.argv[5]); +})(); +EOJS + +# Render both SVGs (run from project dir so node_modules is accessible) +node tools/render-svg-temp.js \ + "$TMP_DIR/old.svg" "$TMP_DIR/old.png" \ + "$TMP_DIR/new.svg" "$TMP_DIR/new.png" + +# Clean up temp script +rm tools/render-svg-temp.js + +echo "" +echo "🔍 Comparing pixels..." +echo "" + +# Compare using ImageMagick +DIFF_OUTPUT=$(magick compare -metric AE "$TMP_DIR/old.png" "$TMP_DIR/new.png" "$TMP_DIR/diff.png" 2>&1 || true) +DIFF_PIXELS=$(echo "$DIFF_OUTPUT" | awk '{print $1}') + +# Get image dimensions +DIMENSIONS=$(magick identify -format "%wx%h" "$TMP_DIR/old.png") +WIDTH=$(echo "$DIMENSIONS" | cut -d'x' -f1) +HEIGHT=$(echo "$DIMENSIONS" | cut -d'x' -f2) +TOTAL_PIXELS=$((WIDTH * HEIGHT)) + +# Calculate percentage +DIFF_PERCENT=$(echo "scale=4; $DIFF_PIXELS / $TOTAL_PIXELS * 100" | bc) + +echo "📊 Results:" +echo " Dimensions: ${WIDTH} × ${HEIGHT}" +echo " Total pixels: $(printf "%'d" $TOTAL_PIXELS)" +echo " Different pixels: $(printf "%'d" $DIFF_PIXELS)" +echo " Difference: ${DIFF_PERCENT}%" +echo "" + +if (( $(echo "$DIFF_PERCENT < 0.01" | bc -l) )); then + echo "✅ ESSENTIALLY IDENTICAL (< 0.01% difference)" + VERDICT="essentially identical" +elif (( $(echo "$DIFF_PERCENT < 0.1" | bc -l) )); then + echo "⚠️ MINOR DIFFERENCES (< 0.1%)" + VERDICT="minor differences detected" +else + echo "❌ SIGNIFICANT DIFFERENCES (≥ 0.1%)" + VERDICT="significant differences detected" +fi + +echo "" +echo "📁 Output files:" +echo " Old render: $TMP_DIR/old.png" +echo " New render: $TMP_DIR/new.png" +echo " Diff image: $TMP_DIR/diff.png" +echo "" + +# Generate HTML comparison page +cat > "$TMP_DIR/comparison.html" << 'EOHTML' + + + + SVG Comparison + + + +
+

🎨 SVG Visual Comparison

+

File: FILENAME_PLACEHOLDER

+
+
+
Dimensions
+
DIMENSIONS_PLACEHOLDER
+
+
+
Different Pixels
+
DIFF_PIXELS_PLACEHOLDER
+
+
+
Difference
+
DIFF_PERCENT_PLACEHOLDER%
+
+
+
Verdict
+
VERDICT_PLACEHOLDER
+
+
+
+ +
+
+

📄 Old (HEAD)

+
+ Old SVG +
+
+ +
+

📝 New (Working)

+
+ New SVG +
+
+ +
+

🔍 Diff (Red = Changes)

+
+ Diff +
+
+
+ + +EOHTML + +# Determine verdict class for styling +if (( $(echo "$DIFF_PERCENT < 0.01" | bc -l) )); then + VERDICT_CLASS="good" +elif (( $(echo "$DIFF_PERCENT < 0.1" | bc -l) )); then + VERDICT_CLASS="warning" +else + VERDICT_CLASS="bad" +fi + +# Replace placeholders in HTML +sed -i '' "s|FILENAME_PLACEHOLDER|$SVG_FILE|g" "$TMP_DIR/comparison.html" +sed -i '' "s|DIMENSIONS_PLACEHOLDER|${WIDTH} × ${HEIGHT}|g" "$TMP_DIR/comparison.html" +sed -i '' "s|DIFF_PIXELS_PLACEHOLDER|$(printf "%'d" $DIFF_PIXELS) / $(printf "%'d" $TOTAL_PIXELS)|g" "$TMP_DIR/comparison.html" +sed -i '' "s|DIFF_PERCENT_PLACEHOLDER|$DIFF_PERCENT|g" "$TMP_DIR/comparison.html" +sed -i '' "s|VERDICT_PLACEHOLDER|$VERDICT|g" "$TMP_DIR/comparison.html" +sed -i '' "s|VERDICT_CLASS_PLACEHOLDER|$VERDICT_CLASS|g" "$TMP_DIR/comparison.html" + +echo "✓ Generated comparison page: $TMP_DIR/comparison.html" +echo "" +echo "🌐 Opening comparison in browser..." +open "$TMP_DIR/comparison.html" +echo "" + +echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" +echo "" +echo "🤖 AI VISUAL ANALYSIS PROMPT" +echo "" +echo "Copy and paste this into Gemini/Claude with the diff image attached:" +echo "" +echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" +cat << PROMPT + +I've made changes to an Excalidraw diagram SVG file. Please analyze the visual differences between the old and new versions. + +**Automated Analysis:** +- Dimensions: ${WIDTH} × ${HEIGHT} pixels +- Different pixels: $(printf "%'d" $DIFF_PIXELS) out of $(printf "%'d" $TOTAL_PIXELS) +- Difference: ${DIFF_PERCENT}% +- Verdict: ${VERDICT} + +**Attached Image:** +The attached image shows the pixel-level diff (red = differences). + +**Questions:** +1. Are the differences purely anti-aliasing/rendering artifacts, or are there actual content changes? +2. If there are content changes, what specifically changed? +3. Do the changes align with the intent to remove zombie Excalidraw elements (elements marked as deleted but left in the JSON)? +4. Is this safe to commit? + +**Context:** +- File: $SVG_FILE +- Changes: Removed 191 lines of zombie JSON from Excalidraw source +- Expected: Visual output should be identical (zombie elements were already marked as deleted) + +PROMPT +echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" +echo "" +echo "📎 Attach this file to your AI prompt:" +echo " $TMP_DIR/diff.png" +echo "" +echo "💡 To open the diff image:" +echo " open $TMP_DIR/diff.png" +echo ""