npm - bmad-elsabro - Versions diffs - 1.0.0 - Mend

bmad-elsabro 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (572) hide show

package/tools/validate-svg-changes.sh ADDED Viewed

@@ -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 <path-to-svg>
+#
+set -e
+SVG_FILE="${1:-src/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 = `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <style>
+        body { margin: 0; padding: 0; background: white; }
+        svg { display: block; }
+      </style>
+    </head>
+    <body>${svgContent}</body>
+    </html>
+  `;
+  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'
+<!DOCTYPE html>
+<html>
+<head>
+    <title>SVG Comparison</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background: #f5f5f5;
+            padding: 20px;
+        }
+        .header {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 { margin-bottom: 10px; color: #333; }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .stat {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 4px;
+        }
+        .stat-label { font-size: 12px; color: #666; text-transform: uppercase; }
+        .stat-value { font-size: 18px; font-weight: 600; color: #333; margin-top: 4px; }
+        .container {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .panel {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h2 {
+            margin: 0 0 15px 0;
+            color: #333;
+            font-size: 18px;
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: 10px;
+        }
+        .image-container {
+            border: 1px solid #ddd;
+            background: white;
+            overflow: auto;
+            max-height: 600px;
+        }
+        img {
+            display: block;
+            max-width: 100%;
+            height: auto;
+        }
+        .verdict {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+        .verdict.good { background: #d4edda; color: #155724; }
+        .verdict.warning { background: #fff3cd; color: #856404; }
+        .verdict.bad { background: #f8d7da; color: #721c24; }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>🎨 SVG Visual Comparison</h1>
+        <p><strong>File:</strong> FILENAME_PLACEHOLDER</p>
+        <div class="stats">
+            <div class="stat">
+                <div class="stat-label">Dimensions</div>
+                <div class="stat-value">DIMENSIONS_PLACEHOLDER</div>
+            </div>
+            <div class="stat">
+                <div class="stat-label">Different Pixels</div>
+                <div class="stat-value">DIFF_PIXELS_PLACEHOLDER</div>
+            </div>
+            <div class="stat">
+                <div class="stat-label">Difference</div>
+                <div class="stat-value">DIFF_PERCENT_PLACEHOLDER%</div>
+            </div>
+            <div class="stat">
+                <div class="stat-label">Verdict</div>
+                <div class="stat-value"><span class="verdict VERDICT_CLASS_PLACEHOLDER">VERDICT_PLACEHOLDER</span></div>
+            </div>
+        </div>
+    </div>
+    <div class="container">
+        <div class="panel">
+            <h2>📄 Old (HEAD)</h2>
+            <div class="image-container">
+                <img src="old.png" alt="Old SVG">
+            </div>
+        </div>
+        <div class="panel">
+            <h2>📝 New (Working)</h2>
+            <div class="image-container">
+                <img src="new.png" alt="New SVG">
+            </div>
+        </div>
+        <div class="panel">
+            <h2>🔍 Diff (Red = Changes)</h2>
+            <div class="image-container">
+                <img src="diff.png" alt="Diff">
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+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 ""

package/vite-plugin-monaco-editor.ts ADDED Viewed

@@ -0,0 +1,108 @@
+/**
+ * Vite Plugin for Monaco Editor Offline Support
+ *
+ * This plugin ensures Monaco Editor workers are properly bundled for offline
+ * usage in Electron. It copies worker files from node_modules to the build
+ * output directory, maintaining the correct directory structure.
+ */
+import type { Plugin } from 'vite';
+import * as path from 'path';
+import * as fs from 'fs';
+export interface MonacoEditorPluginOptions {
+  /**
+   * Languages to include (default: all)
+   */
+  languages?: string[];
+  /**
+   * Custom output directory for workers (default: 'monacoeditorwork')
+   */
+  outputDir?: string;
+}
+/**
+ * Create Vite plugin for Monaco Editor offline support
+ */
+export function monacoEditorPlugin(
+  options: MonacoEditorPluginOptions = {}
+): Plugin {
+  const { outputDir = 'monacoeditorwork' } = options;
+  return {
+    name: 'vite-plugin-monaco-editor-offline',
+    apply: 'build', // Only apply during build, not dev
+    /**
+     * Post-build hook to copy Monaco workers to output directory
+     */
+    closeBundle: async () => {
+      try {
+        // Path to Monaco Editor in node_modules
+        const monacoEditorPath = path.resolve(
+          process.cwd(),
+          'node_modules/monaco-editor'
+        );
+        // Check if Monaco Editor is installed
+        if (!fs.existsSync(monacoEditorPath)) {
+          console.warn(
+            '[monaco-plugin] Monaco Editor not found in node_modules'
+          );
+          return;
+        }
+        // Output directory for workers
+        const distPath = path.resolve(process.cwd(), 'dist/renderer');
+        const outputPath = path.resolve(distPath, outputDir);
+        // Create output directory
+        fs.mkdirSync(outputPath, { recursive: true });
+        // Copy worker files from Monaco Editor ESM distribution
+        const esmPath = path.join(monacoEditorPath, 'esm/vs');
+        // Worker directories to copy
+        const workerDirs = [
+          'editor',
+          'language/json',
+          'language/css',
+          'language/html',
+          'language/typescript',
+        ];
+        let copiedFiles = 0;
+        for (const dir of workerDirs) {
+          const srcDir = path.join(esmPath, dir);
+          const destDir = path.join(outputPath, dir);
+          // Create destination directory
+          fs.mkdirSync(destDir, { recursive: true });
+          // Copy worker files
+          if (fs.existsSync(srcDir)) {
+            const files = fs.readdirSync(srcDir);
+            for (const file of files) {
+              if (file.endsWith('.worker.js')) {
+                const srcFile = path.join(srcDir, file);
+                const destFile = path.join(destDir, file);
+                fs.copyFileSync(srcFile, destFile);
+                copiedFiles++;
+              }
+            }
+          }
+        }
+        console.log(
+          `[monaco-plugin] Copied ${copiedFiles} Monaco worker files to ${outputDir}`
+        );
+      } catch (error) {
+        console.error('[monaco-plugin] Error copying Monaco workers:', error);
+        // Don't fail the build if worker copying fails
+      }
+    },
+  };
+}
+export default monacoEditorPlugin;