@argus-vrt/cli 0.1.0

package/dist/index.js

@@ -0,0 +1,1029 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../shared/dist/types.js
+var require_types = __commonJS({
+  "../shared/dist/types.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  }
+});
+
+// ../shared/dist/constants.js
+var require_constants = __commonJS({
+  "../shared/dist/constants.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.SSIM_THRESHOLD = exports2.DIFF_THRESHOLD = exports2.IMAGE_FORMATS = exports2.STORYBOOK_CONNECTION_TIMEOUT = exports2.STORY_RENDER_TIMEOUT = exports2.SIMULATOR_WAIT_TIMEOUT = exports2.CONFIG_FILE_NAME = exports2.DEFAULT_CONFIG = void 0;
+    exports2.DEFAULT_CONFIG = {
+      storybook: {
+        port: 7007,
+        storiesPattern: "src/**/__stories__/**/*.stories.?(ts|tsx|js|jsx)"
+      },
+      simulator: {
+        device: "iPhone 15 Pro",
+        os: "iOS 17.0"
+      },
+      comparison: {
+        mode: "threshold",
+        threshold: 0.01,
+        includeMetrics: true
+      },
+      baselineDir: ".visual-baselines",
+      screenshotDir: ".visual-screenshots"
+    };
+    exports2.CONFIG_FILE_NAME = ".argus.json";
+    exports2.SIMULATOR_WAIT_TIMEOUT = 3e4;
+    exports2.STORY_RENDER_TIMEOUT = 5e3;
+    exports2.STORYBOOK_CONNECTION_TIMEOUT = 6e4;
+    exports2.IMAGE_FORMATS = {
+      screenshot: "png",
+      diff: "png"
+    };
+    exports2.DIFF_THRESHOLD = 0.01;
+    exports2.SSIM_THRESHOLD = 0.95;
+  }
+});
+
+// ../shared/dist/index.js
+var require_dist = __commonJS({
+  "../shared/dist/index.js"(exports2) {
+    "use strict";
+    var __createBinding = exports2 && exports2.__createBinding || (Object.create ? (function(o, m, k, k2) {
+      if (k2 === void 0) k2 = k;
+      var desc = Object.getOwnPropertyDescriptor(m, k);
+      if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+        desc = { enumerable: true, get: function() {
+          return m[k];
+        } };
+      }
+      Object.defineProperty(o, k2, desc);
+    }) : (function(o, m, k, k2) {
+      if (k2 === void 0) k2 = k;
+      o[k2] = m[k];
+    }));
+    var __exportStar = exports2 && exports2.__exportStar || function(m, exports3) {
+      for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports3, p)) __createBinding(exports3, m, p);
+    };
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    __exportStar(require_types(), exports2);
+    __exportStar(require_constants(), exports2);
+  }
+});
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  captureCommand: () => captureCommand,
+  compareCommand: () => compareCommand,
+  getChangedFiles: () => getChangedFiles,
+  getCommitMessage: () => getCommitMessage,
+  getCurrentBranch: () => getCurrentBranch,
+  getCurrentCommitHash: () => getCurrentCommitHash,
+  isWorkingDirectoryClean: () => isWorkingDirectoryClean,
+  loadConfig: () => loadConfig,
+  logger: () => logger,
+  validateConfig: () => validateConfig
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/commands/capture.ts
+var import_promises = require("fs/promises");
+var import_path2 = require("path");
+var import_ora = __toESM(require("ora"));
+
+// src/utils/config.ts
+var import_fs = require("fs");
+var import_path = require("path");
+var import_shared = __toESM(require_dist());
+function loadConfig(cwd = process.cwd()) {
+  const configPath = (0, import_path.join)(cwd, import_shared.CONFIG_FILE_NAME);
+  if (!(0, import_fs.existsSync)(configPath)) {
+    console.warn(`No ${import_shared.CONFIG_FILE_NAME} found, using defaults`);
+    return import_shared.DEFAULT_CONFIG;
+  }
+  try {
+    const configContent = (0, import_fs.readFileSync)(configPath, "utf-8");
+    const userConfig = JSON.parse(configContent);
+    return {
+      ...import_shared.DEFAULT_CONFIG,
+      ...userConfig,
+      storybook: {
+        ...import_shared.DEFAULT_CONFIG.storybook,
+        ...userConfig.storybook
+      },
+      simulator: {
+        ...import_shared.DEFAULT_CONFIG.simulator,
+        ...userConfig.simulator
+      },
+      comparison: {
+        ...import_shared.DEFAULT_CONFIG.comparison,
+        ...userConfig.comparison
+      }
+    };
+  } catch (error) {
+    throw new Error(`Failed to parse ${import_shared.CONFIG_FILE_NAME}: ${error}`);
+  }
+}
+function validateConfig(config) {
+  if (!config.storybook?.port) {
+    throw new Error("storybook.port is required");
+  }
+  if (!config.simulator?.device) {
+    throw new Error("simulator.device is required");
+  }
+  if (!config.comparison?.threshold || config.comparison.threshold < 0 || config.comparison.threshold > 1) {
+    throw new Error("comparison.threshold must be between 0 and 1");
+  }
+}
+
+// src/utils/git.ts
+var import_execa = require("execa");
+async function getCurrentBranch() {
+  try {
+    const { stdout } = await (0, import_execa.execaCommand)("git rev-parse --abbrev-ref HEAD");
+    return stdout.trim();
+  } catch (error) {
+    throw new Error("Failed to get current branch. Is this a git repository?");
+  }
+}
+async function getCurrentCommitHash() {
+  try {
+    const { stdout } = await (0, import_execa.execaCommand)("git rev-parse HEAD");
+    return stdout.trim();
+  } catch (error) {
+    throw new Error("Failed to get commit hash");
+  }
+}
+async function getCommitMessage(hash) {
+  try {
+    const cmd = hash ? `git log -1 --pretty=%B ${hash}` : "git log -1 --pretty=%B";
+    const { stdout } = await (0, import_execa.execaCommand)(cmd);
+    return stdout.trim();
+  } catch (error) {
+    return "";
+  }
+}
+async function isWorkingDirectoryClean() {
+  try {
+    const { stdout } = await (0, import_execa.execaCommand)("git status --porcelain");
+    return stdout.trim() === "";
+  } catch (error) {
+    return false;
+  }
+}
+async function getChangedFiles(baseBranch, currentBranch) {
+  try {
+    const { stdout } = await (0, import_execa.execaCommand)(`git diff ${baseBranch}...${currentBranch} --name-only`);
+    return stdout.split("\n").filter(Boolean);
+  } catch (error) {
+    return [];
+  }
+}
+
+// src/utils/logger.ts
+var import_chalk = __toESM(require("chalk"));
+var logger = {
+  info: (message) => {
+    console.log(import_chalk.default.blue("\u2139"), message);
+  },
+  success: (message) => {
+    console.log(import_chalk.default.green("\u2713"), message);
+  },
+  warn: (message) => {
+    console.log(import_chalk.default.yellow("\u26A0"), message);
+  },
+  error: (message) => {
+    console.log(import_chalk.default.red("\u2716"), message);
+  },
+  debug: (message) => {
+    if (process.env.DEBUG) {
+      console.log(import_chalk.default.gray("\u203A"), message);
+    }
+  }
+};
+
+// src/ios/simulator.ts
+var import_execa2 = require("execa");
+var import_shared2 = __toESM(require_dist());
+async function findSimulator(config) {
+  try {
+    const { stdout } = await (0, import_execa2.execaCommand)("xcrun simctl list devices --json");
+    const data = JSON.parse(stdout);
+    const matchingDevices = [];
+    for (const [runtime, devices] of Object.entries(data.devices)) {
+      for (const device of devices) {
+        if (device.name === config.device && device.isAvailable !== false) {
+          matchingDevices.push({
+            udid: device.udid,
+            name: device.name,
+            state: device.state,
+            isAvailable: device.isAvailable !== false
+          });
+        }
+      }
+    }
+    if (matchingDevices.length === 0) {
+      return null;
+    }
+    const bootedDevice = matchingDevices.find((d) => d.state === "Booted");
+    if (bootedDevice) {
+      return bootedDevice;
+    }
+    return matchingDevices[0];
+  } catch (error) {
+    logger.error(`Failed to find simulator: ${error}`);
+    return null;
+  }
+}
+async function bootSimulator(udid) {
+  try {
+    const { stdout } = await (0, import_execa2.execaCommand)(`xcrun simctl list devices --json`);
+    const data = JSON.parse(stdout);
+    let deviceState = "Shutdown";
+    for (const [runtime, devices] of Object.entries(data.devices)) {
+      for (const device of devices) {
+        if (device.udid === udid) {
+          deviceState = device.state;
+          break;
+        }
+      }
+    }
+    if (deviceState === "Booted") {
+      logger.info("Simulator already booted");
+      return;
+    }
+    logger.info("Booting simulator...");
+    await (0, import_execa2.execaCommand)(`xcrun simctl boot ${udid}`);
+    await waitForSimulator(udid, import_shared2.SIMULATOR_WAIT_TIMEOUT);
+    logger.success("Simulator booted");
+  } catch (error) {
+    if (error.message?.includes("current state: Booted")) {
+      logger.info("Simulator already booted");
+      return;
+    }
+    throw new Error(`Failed to boot simulator: ${error}`);
+  }
+}
+async function waitForSimulator(udid, timeout) {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    try {
+      const { stdout } = await (0, import_execa2.execaCommand)("xcrun simctl list devices --json");
+      const data = JSON.parse(stdout);
+      for (const [runtime, devices] of Object.entries(data.devices)) {
+        for (const device of devices) {
+          if (device.udid === udid && device.state === "Booted") {
+            return;
+          }
+        }
+      }
+    } catch (error) {
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1e3));
+  }
+  throw new Error("Simulator boot timeout");
+}
+async function shutdownSimulator(udid) {
+  try {
+    const { stdout } = await (0, import_execa2.execaCommand)("xcrun simctl list devices --json");
+    const data = JSON.parse(stdout);
+    let deviceState = "Shutdown";
+    for (const [runtime, devices] of Object.entries(data.devices)) {
+      for (const device of devices) {
+        if (device.udid === udid) {
+          deviceState = device.state;
+          break;
+        }
+      }
+    }
+    if (deviceState === "Shutdown") {
+      logger.info("Simulator already shutdown");
+      return;
+    }
+    logger.info("Shutting down simulator...");
+    await (0, import_execa2.execaCommand)(`xcrun simctl shutdown ${udid}`);
+    logger.success("Simulator shutdown");
+  } catch (error) {
+    logger.warn(`Failed to shutdown simulator: ${error}`);
+  }
+}
+async function launchApp(udid, bundleId) {
+  try {
+    logger.info(`Launching app: ${bundleId}`);
+    await (0, import_execa2.execaCommand)(`xcrun simctl launch ${udid} ${bundleId}`);
+    logger.success("App launched");
+    await new Promise((resolve) => setTimeout(resolve, 3e3));
+  } catch (error) {
+    throw new Error(`Failed to launch app: ${error}`);
+  }
+}
+async function terminateApp(udid, bundleId) {
+  try {
+    await (0, import_execa2.execaCommand)(`xcrun simctl terminate ${udid} ${bundleId}`);
+    logger.info("App terminated");
+  } catch (error) {
+    logger.debug(`Failed to terminate app: ${error}`);
+  }
+}
+async function captureScreenshot(udid, outputPath) {
+  try {
+    await (0, import_execa2.execa)("xcrun", ["simctl", "io", udid, "screenshot", outputPath]);
+    logger.debug(`Screenshot saved: ${outputPath}`);
+  } catch (error) {
+    throw new Error(`Failed to capture screenshot: ${error}`);
+  }
+}
+
+// src/ios/storybook.ts
+var import_ws = __toESM(require("ws"));
+var import_shared3 = __toESM(require_dist());
+function createStorybookClient(port) {
+  let ws = null;
+  const url = `ws://localhost:${port}`;
+  return {
+    async connect() {
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          reject(new Error("Storybook connection timeout"));
+        }, import_shared3.STORYBOOK_CONNECTION_TIMEOUT);
+        ws = new import_ws.default(url);
+        ws.on("open", () => {
+          clearTimeout(timeout);
+          logger.success("Connected to Storybook");
+          resolve();
+        });
+        ws.on("error", (error) => {
+          clearTimeout(timeout);
+          reject(new Error(`Storybook connection error: ${error.message}`));
+        });
+        ws.on("close", () => {
+          logger.debug("Storybook connection closed");
+        });
+      });
+    },
+    disconnect() {
+      if (ws) {
+        ws.close();
+        ws = null;
+      }
+    },
+    async getStories() {
+      if (!ws) {
+        throw new Error("Not connected to Storybook");
+      }
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          reject(new Error("Failed to get stories"));
+        }, 1e4);
+        const messageHandler = (data) => {
+          try {
+            const message = JSON.parse(data.toString());
+            if (message.type === "setStories") {
+              clearTimeout(timeout);
+              ws?.off("message", messageHandler);
+              const stories = Object.entries(message.stories || {}).map(([id, story]) => ({
+                id,
+                componentName: story.kind || story.title,
+                storyName: story.name || story.story,
+                title: story.title || story.kind,
+                kind: story.kind || story.title
+              }));
+              resolve(stories);
+            }
+          } catch (error) {
+          }
+        };
+        ws?.on("message", messageHandler);
+        ws?.send(JSON.stringify({ type: "getStories" }));
+      });
+    },
+    async navigateToStory(storyId) {
+      if (!ws) {
+        throw new Error("Not connected to Storybook");
+      }
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          reject(new Error("Story navigation timeout"));
+        }, import_shared3.STORY_RENDER_TIMEOUT);
+        const messageHandler = (data) => {
+          try {
+            const message = JSON.parse(data.toString());
+            if (message.type === "storyRendered" && message.storyId === storyId) {
+              clearTimeout(timeout);
+              ws?.off("message", messageHandler);
+              resolve();
+            }
+          } catch (error) {
+          }
+        };
+        ws?.on("message", messageHandler);
+        ws?.send(
+          JSON.stringify({
+            type: "selectStory",
+            storyId
+          })
+        );
+      });
+    },
+    async waitForStory(timeout = import_shared3.STORY_RENDER_TIMEOUT) {
+      await new Promise((resolve) => setTimeout(resolve, timeout));
+    }
+  };
+}
+async function waitForStorybookServer(port, timeout = 6e4) {
+  const startTime = Date.now();
+  while (Date.now() - startTime < timeout) {
+    try {
+      const response = await fetch(`http://localhost:${port}`);
+      if (response.ok) {
+        logger.success("Storybook server is ready");
+        return;
+      }
+    } catch (error) {
+    }
+    await new Promise((resolve) => setTimeout(resolve, 2e3));
+  }
+  throw new Error("Storybook server timeout");
+}
+function createStoryId(componentName, storyName) {
+  return `${componentName}-${storyName}`.replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-").toLowerCase();
+}
+
+// src/ios/metrics.ts
+async function measureRenderTime(fn) {
+  const startTime = performance.now();
+  const result = await fn();
+  const endTime = performance.now();
+  return {
+    result,
+    renderTime: Math.round(endTime - startTime)
+  };
+}
+function collectMetrics(renderTime) {
+  return {
+    renderTime,
+    timestamp: Date.now()
+  };
+}
+
+// src/commands/capture.ts
+async function captureCommand(options = {}) {
+  const spinner = (0, import_ora.default)("Loading configuration...").start();
+  try {
+    const config = loadConfig();
+    validateConfig(config);
+    const branch = options.branch || await getCurrentBranch();
+    const commitHash = await getCurrentCommitHash();
+    spinner.succeed("Configuration loaded");
+    logger.info(`Branch: ${branch}`);
+    logger.info(`Commit: ${commitHash.substring(0, 7)}`);
+    spinner.start("Finding simulator...");
+    const simulator = await findSimulator(config.simulator);
+    if (!simulator) {
+      throw new Error(`Simulator not found: ${config.simulator.device}`);
+    }
+    spinner.succeed(`Found simulator: ${simulator.name}`);
+    if (!options.skipBoot) {
+      spinner.start("Booting simulator...");
+      await bootSimulator(simulator.udid);
+      spinner.succeed("Simulator booted");
+    }
+    try {
+      const bundleId = config.simulator.bundleId || config.simulator.appScheme;
+      if (!bundleId) {
+        throw new Error("bundleId or appScheme must be specified in config");
+      }
+      spinner.start("Launching app...");
+      await launchApp(simulator.udid, bundleId);
+      spinner.succeed("App launched");
+      spinner.start("Waiting for Storybook...");
+      await waitForStorybookServer(config.storybook.port);
+      spinner.succeed("Storybook ready");
+      spinner.start("Connecting to Storybook...");
+      const storybookClient = createStorybookClient(config.storybook.port);
+      await storybookClient.connect();
+      spinner.succeed("Connected to Storybook");
+      try {
+        spinner.start("Loading stories...");
+        const stories = await storybookClient.getStories();
+        spinner.succeed(`Found ${stories.length} stories`);
+        if (stories.length === 0) {
+          logger.warn("No stories found");
+          return;
+        }
+        const outputDir = (0, import_path2.join)(process.cwd(), config.screenshotDir, branch);
+        await (0, import_promises.mkdir)(outputDir, { recursive: true });
+        const screenshots = [];
+        let capturedCount = 0;
+        for (const story of stories) {
+          spinner.start(`Capturing ${story.componentName}/${story.storyName} (${capturedCount + 1}/${stories.length})`);
+          try {
+            const { renderTime } = await measureRenderTime(async () => {
+              await storybookClient.navigateToStory(story.id);
+              await storybookClient.waitForStory();
+            });
+            const storyId = createStoryId(story.componentName, story.storyName);
+            const filename = `${storyId}.png`;
+            const filePath = (0, import_path2.join)(outputDir, filename);
+            await captureScreenshot(simulator.udid, filePath);
+            const metrics = collectMetrics(renderTime);
+            screenshots.push({
+              storyId,
+              kind: story.kind || story.title,
+              componentName: story.componentName,
+              storyName: story.storyName,
+              filePath,
+              branch,
+              commitHash,
+              timestamp: Date.now(),
+              renderTime: metrics.renderTime
+            });
+            capturedCount++;
+            spinner.succeed(
+              `Captured ${story.componentName}/${story.storyName} (${capturedCount}/${stories.length}) - ${renderTime}ms`
+            );
+          } catch (error) {
+            spinner.fail(`Failed to capture ${story.componentName}/${story.storyName}`);
+            logger.error(`${error}`);
+          }
+        }
+        const metadataPath = (0, import_path2.join)(outputDir, "metadata.json");
+        await (0, import_promises.writeFile)(
+          metadataPath,
+          JSON.stringify(
+            {
+              branch,
+              commitHash,
+              timestamp: Date.now(),
+              screenshots,
+              totalStories: stories.length,
+              capturedCount
+            },
+            null,
+            2
+          )
+        );
+        logger.success(`
+Captured ${capturedCount}/${stories.length} screenshots`);
+        logger.info(`Screenshots saved to: ${outputDir}`);
+      } finally {
+        storybookClient.disconnect();
+      }
+      await terminateApp(simulator.udid, bundleId);
+    } finally {
+      if (!options.skipShutdown) {
+        spinner.start("Shutting down simulator...");
+        await shutdownSimulator(simulator.udid);
+        spinner.succeed("Simulator shutdown");
+      }
+    }
+  } catch (error) {
+    spinner.fail("Capture failed");
+    throw error;
+  }
+}
+
+// src/commands/compare.ts
+var import_promises2 = require("fs/promises");
+var import_fs4 = require("fs");
+var import_path3 = require("path");
+var import_ora2 = __toESM(require("ora"));
+
+// src/comparison/odiff.ts
+var import_execa3 = require("execa");
+var import_fs2 = require("fs");
+async function compareWithODiff(baselinePath, currentPath, diffPath, threshold = 0.01) {
+  try {
+    try {
+      await (0, import_execa3.execaCommand)("which odiff");
+    } catch {
+      logger.debug("ODiff not found, skipping");
+      return null;
+    }
+    let cmd = `odiff "${baselinePath}" "${currentPath}" --threshold ${threshold}`;
+    if (diffPath) {
+      cmd += ` --diff-image "${diffPath}"`;
+    }
+    try {
+      const { stdout } = await (0, import_execa3.execaCommand)(cmd);
+      const diffMatch = stdout.match(/Difference: ([\d.]+)%/);
+      const diffPercentage = diffMatch ? parseFloat(diffMatch[1]) : 0;
+      return {
+        match: diffPercentage <= threshold * 100,
+        diffPercentage,
+        diffPixels: 0,
+        // ODiff doesn't provide this
+        diffImagePath: diffPath && diffPercentage > 0 ? diffPath : void 0
+      };
+    } catch (error) {
+      if (error.stdout) {
+        const diffMatch = error.stdout.match(/Difference: ([\d.]+)%/);
+        const diffPercentage = diffMatch ? parseFloat(diffMatch[1]) : 100;
+        return {
+          match: false,
+          diffPercentage,
+          diffPixels: 0,
+          diffImagePath: diffPath && (0, import_fs2.existsSync)(diffPath) ? diffPath : void 0
+        };
+      }
+      throw error;
+    }
+  } catch (error) {
+    logger.warn(`ODiff comparison failed: ${error}`);
+    return null;
+  }
+}
+async function isODiffInstalled() {
+  try {
+    await (0, import_execa3.execaCommand)("which odiff");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/comparison/pixelmatch.ts
+var import_pixelmatch = __toESM(require("pixelmatch"));
+var import_pngjs = require("pngjs");
+var import_fs3 = require("fs");
+async function compareWithPixelmatch(baselinePath, currentPath, diffPath, threshold = 0.1) {
+  try {
+    const baseline = import_pngjs.PNG.sync.read((0, import_fs3.readFileSync)(baselinePath));
+    const current = import_pngjs.PNG.sync.read((0, import_fs3.readFileSync)(currentPath));
+    if (baseline.width !== current.width || baseline.height !== current.height) {
+      throw new Error(
+        `Image dimensions don't match: ${baseline.width}x${baseline.height} vs ${current.width}x${current.height}`
+      );
+    }
+    const { width, height } = baseline;
+    const totalPixels = width * height;
+    const diff = new import_pngjs.PNG({ width, height });
+    const mismatchedPixels = (0, import_pixelmatch.default)(baseline.data, current.data, diff.data, width, height, {
+      threshold,
+      includeAA: false,
+      alpha: 0,
+      diffColor: [255, 0, 0],
+      diffColorAlt: [255, 0, 255]
+    });
+    const diffPercentage = mismatchedPixels / totalPixels * 100;
+    let diffImagePath;
+    if (diffPath && mismatchedPixels > 0) {
+      (0, import_fs3.writeFileSync)(diffPath, import_pngjs.PNG.sync.write(diff));
+      diffImagePath = diffPath;
+      logger.debug(`Diff image saved: ${diffPath}`);
+    }
+    return {
+      mismatchedPixels,
+      totalPixels,
+      diffPercentage,
+      diffImagePath
+    };
+  } catch (error) {
+    throw new Error(`Pixelmatch comparison failed: ${error}`);
+  }
+}
+
+// src/comparison/ssim.ts
+var import_sharp = __toESM(require("sharp"));
+var import_ssim = __toESM(require("ssim.js"));
+async function calculateSSIM(baselinePath, currentPath) {
+  try {
+    const [baselineBuffer, currentBuffer] = await Promise.all([
+      (0, import_sharp.default)(baselinePath).raw().toBuffer({ resolveWithObject: true }),
+      (0, import_sharp.default)(currentPath).raw().toBuffer({ resolveWithObject: true })
+    ]);
+    if (baselineBuffer.info.width !== currentBuffer.info.width || baselineBuffer.info.height !== currentBuffer.info.height) {
+      throw new Error("Image dimensions must match for SSIM calculation");
+    }
+    const result = (0, import_ssim.default)(
+      {
+        data: new Uint8ClampedArray(baselineBuffer.data),
+        width: baselineBuffer.info.width,
+        height: baselineBuffer.info.height
+      },
+      {
+        data: new Uint8ClampedArray(currentBuffer.data),
+        width: currentBuffer.info.width,
+        height: currentBuffer.info.height
+      }
+    );
+    return {
+      score: result.mssim,
+      mssim: result.mssim
+    };
+  } catch (error) {
+    throw new Error(`SSIM calculation failed: ${error}`);
+  }
+}
+
+// src/commands/compare.ts
+async function compareCommand(options = {}) {
+  const spinner = (0, import_ora2.default)("Loading configuration...").start();
+  try {
+    const config = loadConfig();
+    validateConfig(config);
+    const baseBranch = options.base || "main";
+    const currentBranch = options.current || await getCurrentBranch();
+    spinner.succeed("Configuration loaded");
+    logger.info(`Comparing ${currentBranch} against ${baseBranch}`);
+    const useODiff = await isODiffInstalled();
+    if (useODiff) {
+      logger.info("Using ODiff for fast comparison");
+    } else {
+      logger.info("Using Pixelmatch for comparison (install odiff for faster results)");
+    }
+    const baselineDir = (0, import_path3.join)(process.cwd(), config.baselineDir, "ios", config.simulator.device.replace(/\s+/g, ""));
+    const currentDir = (0, import_path3.join)(process.cwd(), config.screenshotDir, currentBranch);
+    if (!(0, import_fs4.existsSync)(baselineDir)) {
+      throw new Error(`Baseline directory not found: ${baselineDir}`);
+    }
+    if (!(0, import_fs4.existsSync)(currentDir)) {
+      throw new Error(`Screenshot directory not found: ${currentDir}`);
+    }
+    const metadataPath = (0, import_path3.join)(currentDir, "metadata.json");
+    let metadata = {};
+    if ((0, import_fs4.existsSync)(metadataPath)) {
+      const metadataContent = await (0, import_promises2.readFile)(metadataPath, "utf-8");
+      metadata = JSON.parse(metadataContent);
+    }
+    const currentFiles = (await (0, import_promises2.readdir)(currentDir)).filter((f) => f.endsWith(".png") && f !== "metadata.json");
+    const baselineFiles = (await (0, import_promises2.readdir)(baselineDir)).filter((f) => f.endsWith(".png"));
+    spinner.succeed(`Found ${currentFiles.length} current screenshots, ${baselineFiles.length} baselines`);
+    const diffDir = (0, import_path3.join)(currentDir, "diffs");
+    await (0, import_promises2.mkdir)(diffDir, { recursive: true });
+    const results = [];
+    const threshold = options.threshold ?? config.comparison.threshold;
+    let comparedCount = 0;
+    let changedCount = 0;
+    let passedCount = 0;
+    let failedCount = 0;
+    for (const filename of currentFiles) {
+      spinner.start(`Comparing ${filename} (${comparedCount + 1}/${currentFiles.length})`);
+      const currentPath = (0, import_path3.join)(currentDir, filename);
+      const baselinePath = (0, import_path3.join)(baselineDir, filename);
+      if (!(0, import_fs4.existsSync)(baselinePath)) {
+        logger.warn(`No baseline found for ${filename}`);
+        results.push({
+          storyId: filename.replace(".png", ""),
+          componentName: "",
+          storyName: "",
+          baselineUrl: "",
+          currentUrl: currentPath,
+          pixelDiff: 100,
+          ssimScore: 0,
+          hasDiff: true
+        });
+        failedCount++;
+        comparedCount++;
+        continue;
+      }
+      try {
+        const diffPath = (0, import_path3.join)(diffDir, filename);
+        let pixelDiff = 0;
+        let hasDiff = false;
+        if (useODiff) {
+          const odiffResult = await compareWithODiff(baselinePath, currentPath, diffPath, threshold);
+          if (odiffResult) {
+            pixelDiff = odiffResult.diffPercentage;
+            hasDiff = !odiffResult.match;
+          }
+        }
+        if (!useODiff) {
+          const pixelmatchResult = await compareWithPixelmatch(baselinePath, currentPath, diffPath, 0.1);
+          pixelDiff = pixelmatchResult.diffPercentage;
+          hasDiff = pixelDiff > threshold * 100;
+        }
+        const ssimResult = await calculateSSIM(baselinePath, currentPath);
+        const storyMetadata = metadata.screenshots?.find((s) => s.filePath.endsWith(filename));
+        results.push({
+          storyId: filename.replace(".png", ""),
+          kind: storyMetadata?.kind || "",
+          componentName: storyMetadata?.componentName || "",
+          storyName: storyMetadata?.storyName || "",
+          baselineUrl: baselinePath,
+          currentUrl: currentPath,
+          diffUrl: hasDiff ? diffPath : void 0,
+          pixelDiff,
+          ssimScore: ssimResult.score,
+          hasDiff,
+          renderTime: storyMetadata?.renderTime
+        });
+        if (hasDiff) {
+          changedCount++;
+          failedCount++;
+          spinner.warn(`${filename}: ${pixelDiff.toFixed(2)}% different`);
+        } else {
+          passedCount++;
+          spinner.succeed(`${filename}: passed`);
+        }
+        comparedCount++;
+      } catch (error) {
+        spinner.fail(`Failed to compare ${filename}`);
+        logger.error(`${error}`);
+        failedCount++;
+        comparedCount++;
+      }
+    }
+    const resultsPath = (0, import_path3.join)(currentDir, "comparison-results.json");
+    await (0, import_promises2.writeFile)(
+      resultsPath,
+      JSON.stringify(
+        {
+          baseBranch,
+          currentBranch,
+          timestamp: Date.now(),
+          totalStories: currentFiles.length,
+          comparedCount,
+          changedCount,
+          passedCount,
+          failedCount,
+          results
+        },
+        null,
+        2
+      )
+    );
+    if (options.generateReport !== false) {
+      spinner.start("Generating HTML report...");
+      await generateHTMLReport(results, currentDir, config);
+      spinner.succeed("HTML report generated");
+    }
+    console.log("\n" + "=".repeat(50));
+    logger.success(`Comparison complete: ${comparedCount} stories`);
+    logger.info(`  Passed: ${passedCount}`);
+    logger.info(`  Changed: ${changedCount}`);
+    logger.info(`  Failed: ${failedCount}`);
+    logger.info(`
+Results saved to: ${resultsPath}`);
+    if (options.generateReport !== false) {
+      logger.info(`HTML report: ${(0, import_path3.join)(currentDir, "report.html")}`);
+    }
+    console.log("=".repeat(50));
+    if (changedCount > 0) {
+      process.exit(1);
+    }
+  } catch (error) {
+    spinner.fail("Comparison failed");
+    throw error;
+  }
+}
+async function generateHTMLReport(results, outputDir, config) {
+  const changedResults = results.filter((r) => r.hasDiff);
+  const passedResults = results.filter((r) => !r.hasDiff);
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Visual Regression Test Report</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 20px; background: #f5f5f5; }
+    .container { max-width: 1400px; margin: 0 auto; }
+    h1 { margin-bottom: 20px; color: #333; }
+    .summary { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .stats { display: flex; gap: 20px; margin-top: 15px; }
+    .stat { flex: 1; padding: 15px; border-radius: 6px; text-align: center; }
+    .stat-passed { background: #d4edda; color: #155724; }
+    .stat-changed { background: #fff3cd; color: #856404; }
+    .stat-failed { background: #f8d7da; color: #721c24; }
+    .stat-value { font-size: 32px; font-weight: bold; }
+    .stat-label { font-size: 14px; margin-top: 5px; }
+    .tabs { display: flex; gap: 10px; margin-bottom: 20px; }
+    .tab { padding: 10px 20px; background: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
+    .tab.active { background: #007bff; color: white; }
+    .results { display: none; }
+    .results.active { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; }
+    .result { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .result-header { padding: 15px; border-bottom: 1px solid #eee; }
+    .result-title { font-weight: 600; color: #333; }
+    .result-diff { color: #856404; font-size: 12px; margin-top: 5px; }
+    .result-images { display: grid; grid-template-columns: repeat(3, 1fr); }
+    .result-image { position: relative; aspect-ratio: 1; overflow: hidden; }
+    .result-image img { width: 100%; height: 100%; object-fit: cover; }
+    .result-image-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: white; padding: 5px; font-size: 11px; text-align: center; }
+    .passed .result-header { border-left: 4px solid #28a745; }
+    .changed .result-header { border-left: 4px solid #ffc107; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Visual Regression Test Report</h1>
+
+    <div class="summary">
+      <div><strong>Branch:</strong> ${results[0]?.currentUrl.includes("/") ? results[0].currentUrl.split("/").slice(-2, -1)[0] : "unknown"}</div>
+      <div><strong>Total Stories:</strong> ${results.length}</div>
+      <div class="stats">
+        <div class="stat stat-passed">
+          <div class="stat-value">${passedResults.length}</div>
+          <div class="stat-label">Passed</div>
+        </div>
+        <div class="stat stat-changed">
+          <div class="stat-value">${changedResults.length}</div>
+          <div class="stat-label">Changed</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tabs">
+      <button class="tab active" onclick="showTab('changed')">Changed (${changedResults.length})</button>
+      <button class="tab" onclick="showTab('passed')">Passed (${passedResults.length})</button>
+      <button class="tab" onclick="showTab('all')">All (${results.length})</button>
+    </div>
+
+    <div id="changed-results" class="results active">
+      ${changedResults.map((r) => generateResultHTML(r, "changed")).join("")}
+    </div>
+
+    <div id="passed-results" class="results">
+      ${passedResults.map((r) => generateResultHTML(r, "passed")).join("")}
+    </div>
+
+    <div id="all-results" class="results">
+      ${results.map((r) => generateResultHTML(r, r.hasDiff ? "changed" : "passed")).join("")}
+    </div>
+  </div>
+
+  <script>
+    function showTab(tab) {
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('.results').forEach(r => r.classList.remove('active'));
+      event.target.classList.add('active');
+      document.getElementById(tab + '-results').classList.add('active');
+    }
+  </script>
+</body>
+</html>
+  `;
+  await (0, import_promises2.writeFile)((0, import_path3.join)(outputDir, "report.html"), html.trim());
+}
+function generateResultHTML(result, type) {
+  return `
+    <div class="result ${type}">
+      <div class="result-header">
+        <div class="result-title">${result.componentName || result.storyId} / ${result.storyName || ""}</div>
+        ${result.hasDiff ? `<div class="result-diff">${result.pixelDiff.toFixed(2)}% different | SSIM: ${result.ssimScore.toFixed(3)}</div>` : ""}
+      </div>
+      <div class="result-images">
+        <div class="result-image">
+          <img src="file://${result.baselineUrl}" alt="Baseline">
+          <div class="result-image-label">Baseline</div>
+        </div>
+        <div class="result-image">
+          <img src="file://${result.currentUrl}" alt="Current">
+          <div class="result-image-label">Current</div>
+        </div>
+        ${result.diffUrl ? `
+        <div class="result-image">
+          <img src="file://${result.diffUrl}" alt="Diff">
+          <div class="result-image-label">Diff</div>
+        </div>
+        ` : '<div class="result-image"><div class="result-image-label">No Diff</div></div>'}
+      </div>
+    </div>
+  `;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  captureCommand,
+  compareCommand,
+  getChangedFiles,
+  getCommitMessage,
+  getCurrentBranch,
+  getCurrentCommitHash,
+  isWorkingDirectoryClean,
+  loadConfig,
+  logger,
+  validateConfig
+});