@duffcloudservices/cli 0.1.0 → 0.1.1

package/dist/index.js

@@ -2,10 +2,10 @@
 
 // src/index.ts
 import { Command } from "commander";
-import chalk7 from "chalk";
+import chalk8 from "chalk";
 
 // package.json
-var version = "0.1.0";
+var version = "0.1.1";
 
 // src/commands/auth.ts
 import chalk2 from "chalk";
@@ -251,7 +251,7 @@ var PortalClient = class {
   /**
    * Make an authenticated API request.
    */
-  async request(path4, options = {}) {
+  async request(path5, options = {}) {
     let accessToken = getAccessToken();
     if (!isAuthenticated() && getRefreshToken()) {
       const refreshToken = getRefreshToken();
@@ -268,7 +268,7 @@ var PortalClient = class {
     if (!accessToken) {
       throw new Error("Not authenticated. Please login with `dcs login`.");
     }
-    const response = await fetch(`${this.apiUrl}${path4}`, {
+    const response = await fetch(`${this.apiUrl}${path5}`, {
       ...options,
       headers: {
         ...options.headers,
@@ -2082,6 +2082,572 @@ Once verified:
 `;
 }
 
+// src/commands/capture-snapshots.ts
+import fs4 from "fs";
+import path4 from "path";
+import yaml3 from "js-yaml";
+import chalk7 from "chalk";
+import ora3 from "ora";
+var SECTION_SELECTORS = {
+  explicit: "[data-section]",
+  header: 'header, [role="banner"], .header, #header',
+  footer: 'footer, [role="contentinfo"], .footer, #footer',
+  hero: '[class*="hero"], [data-section-type="hero"], .hero-section, #hero',
+  content: 'main, [role="main"], article, .content, .main-content',
+  gallery: '[class*="gallery"], [data-section-type="gallery"]',
+  cta: '[class*="cta"], [data-section-type="cta"], .call-to-action'
+};
+function loadPagesConfig(targetDir) {
+  const configPath = path4.join(targetDir, ".dcs", "pages.yaml");
+  if (!fs4.existsSync(configPath)) {
+    throw new Error(`Configuration file not found: ${configPath}`);
+  }
+  const content = fs4.readFileSync(configPath, "utf-8");
+  return yaml3.load(content);
+}
+function loadContentConfig(targetDir) {
+  const contentPath = path4.join(targetDir, ".dcs", "content.yaml");
+  if (!fs4.existsSync(contentPath)) {
+    return null;
+  }
+  const content = fs4.readFileSync(contentPath, "utf-8");
+  return yaml3.load(content);
+}
+function loadTargetedSnapshotsConfig(targetDir) {
+  const targetedPath = path4.join(targetDir, ".dcs", "targeted-snapshots.yaml");
+  if (!fs4.existsSync(targetedPath)) {
+    return null;
+  }
+  const content = fs4.readFileSync(targetedPath, "utf-8");
+  return yaml3.load(content);
+}
+function getValidTextKeysForPage(contentConfig, pageSlug) {
+  const keys = /* @__PURE__ */ new Map();
+  if (!contentConfig) return keys;
+  if (contentConfig.global) {
+    for (const [key, value] of Object.entries(contentConfig.global)) {
+      keys.set(key, typeof value === "string" ? value : JSON.stringify(value));
+    }
+  }
+  const pageContent = contentConfig.pages?.[pageSlug];
+  if (pageContent) {
+    for (const [key, value] of Object.entries(pageContent)) {
+      const fullKey = `${pageSlug}.${key}`;
+      keys.set(fullKey, typeof value === "string" ? value : JSON.stringify(value));
+    }
+  }
+  return keys;
+}
+async function resolveAllPages(config2) {
+  const resolved = [];
+  for (const page of config2.pages) {
+    if (page.type === "dynamic" && page.instances) {
+      for (const instance of page.instances) {
+        const instancePath = page.pathTemplate ? page.pathTemplate.replace(/:[\w]+/, instance) : `${page.path}/${instance}`;
+        resolved.push({
+          slug: `${page.slug}-${instance}`,
+          path: instancePath,
+          config: { ...page, slug: `${page.slug}-${instance}` }
+        });
+      }
+    } else {
+      resolved.push({
+        slug: page.slug,
+        path: page.path,
+        config: page
+      });
+    }
+  }
+  return resolved;
+}
+async function getDomPath(element) {
+  return element.evaluate((el) => {
+    const parts = [];
+    let current = el;
+    while (current && current !== document.body) {
+      let selector = current.tagName.toLowerCase();
+      if (current.id) {
+        selector += `#${current.id}`;
+      } else {
+        const classes = Array.from(current.classList).filter((c) => !c.match(/^(v-|nuxt-|vue-|react-|ng-|_)/)).slice(0, 2).join(".");
+        if (classes) {
+          selector += `.${classes}`;
+        }
+      }
+      parts.unshift(selector);
+      current = current.parentElement;
+    }
+    return parts.join(" > ");
+  });
+}
+async function generateSectionDisplayName(element, sectionType, index) {
+  const headingText = await element.evaluate((el) => {
+    const heading = el.querySelector('h1, h2, h3, h4, [class*="title"], [class*="heading"]');
+    if (heading && heading.textContent) {
+      return heading.textContent.trim().slice(0, 50);
+    }
+    return null;
+  });
+  if (headingText) return headingText;
+  const typeLabels = {
+    header: "Header",
+    footer: "Footer",
+    hero: "Hero Section",
+    content: "Content Section",
+    gallery: "Gallery",
+    cta: "Call to Action"
+  };
+  return typeLabels[sectionType] || `Section ${index + 1}`;
+}
+async function detectTextKeys(_page, sectionElement, _pageSlug, _validTextKeys) {
+  const textKeys = [];
+  const textKeyElements = await sectionElement.$$("[data-text-key]");
+  for (const element of textKeyElements) {
+    const keyInfo = await element.evaluate((el) => {
+      const rect = el.getBoundingClientRect();
+      return {
+        key: el.getAttribute("data-text-key") || "",
+        elementType: el.tagName.toLowerCase(),
+        currentValue: el.textContent?.trim().slice(0, 500) || "",
+        bounds: {
+          x: rect.left + window.scrollX,
+          y: rect.top + window.scrollY,
+          width: rect.width,
+          height: rect.height
+        }
+      };
+    });
+    if (keyInfo.key) {
+      const domPath = await getDomPath(element);
+      textKeys.push({
+        key: keyInfo.key,
+        currentValue: keyInfo.currentValue,
+        elementType: keyInfo.elementType,
+        domPath,
+        bounds: {
+          x: Math.round(keyInfo.bounds.x),
+          y: Math.round(keyInfo.bounds.y),
+          width: Math.round(keyInfo.bounds.width),
+          height: Math.round(keyInfo.bounds.height)
+        }
+      });
+    }
+  }
+  return textKeys;
+}
+async function detectFallbackContentSections(page, existingSections) {
+  const candidates = await page.$$('section, article, div[class*="section"], div[class*="container"]');
+  const results = [];
+  const existingBounds = existingSections.map((s) => s.bounds);
+  for (const candidate of candidates) {
+    const bounds = await candidate.evaluate((el) => {
+      const rect = el.getBoundingClientRect();
+      return {
+        y: rect.top + window.scrollY,
+        height: rect.height
+      };
+    });
+    if (bounds.height < 100) continue;
+    const overlaps = existingBounds.some(
+      (eb) => bounds.y < eb.y + eb.height && bounds.y + bounds.height > eb.y
+    );
+    if (!overlaps) {
+      results.push(candidate);
+    }
+  }
+  return results;
+}
+async function capturePageSnapshot(browser, pageInfo, snapshotConfig, siteSlug, validTextKeys, outputDir, verbose) {
+  const context = await browser.newContext({
+    viewport: snapshotConfig.viewport
+  });
+  const page = await context.newPage();
+  const url = pageInfo.path.startsWith("http") ? pageInfo.path : `${process.env.SITE_BASE_URL || "http://localhost:5173"}${pageInfo.path}`;
+  if (verbose) {
+    console.log(`  Capturing: ${pageInfo.slug} (${url})`);
+  }
+  try {
+    await page.goto(url, { waitUntil: "domcontentloaded", timeout: 3e4 });
+    await page.waitForLoadState("networkidle", { timeout: 1e4 }).catch(() => {
+      if (verbose) console.log(`    Note: networkidle timeout, continuing anyway`);
+    });
+  } catch (error) {
+    console.error(`    Failed to load: ${error}`);
+    await context.close();
+    throw error;
+  }
+  await page.waitForTimeout(snapshotConfig.waitAfterLoad);
+  const pageOutputDir = path4.join(outputDir, siteSlug, pageInfo.slug);
+  fs4.mkdirSync(path4.join(pageOutputDir, "sections"), { recursive: true });
+  const title = await page.title();
+  let pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+  const scrollStep = snapshotConfig.viewport.height;
+  for (let scrollY2 = 0; scrollY2 < pageHeight; scrollY2 += scrollStep) {
+    await page.evaluate((y) => window.scrollTo(0, y), scrollY2);
+    await page.waitForTimeout(100);
+  }
+  await page.evaluate(() => window.scrollTo(0, 0));
+  await page.waitForTimeout(200);
+  pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+  await page.evaluate(() => window.scrollTo(0, 0));
+  await page.waitForTimeout(100);
+  const scrollY = await page.evaluate(() => window.scrollY);
+  if (scrollY !== 0) {
+    console.warn(`    Warning: Could not scroll to top (scrollY=${scrollY})`);
+  }
+  const fullPagePath = path4.join(pageOutputDir, "full-page.png");
+  await page.screenshot({
+    path: fullPagePath,
+    fullPage: snapshotConfig.captureFullPage
+  });
+  const sections = [];
+  const seenDomPaths = /* @__PURE__ */ new Set();
+  const getAccurateBounds = async (el, sectionType) => {
+    return el.evaluate((element, type) => {
+      const rect = element.getBoundingClientRect();
+      const style = window.getComputedStyle(element);
+      const position = style.position;
+      const isFixed = position === "fixed" || position === "sticky";
+      let y = rect.top + window.scrollY;
+      if (isFixed && (type === "header" || element.tagName.toLowerCase() === "header")) {
+        y = 0;
+      } else if (isFixed && (type === "footer" || element.tagName.toLowerCase() === "footer")) {
+        y = document.documentElement.scrollHeight - rect.height;
+      }
+      return {
+        x: rect.left + window.scrollX,
+        y,
+        width: rect.width,
+        height: rect.height,
+        isFixed
+      };
+    }, sectionType);
+  };
+  const explicitElements = await page.$$(SECTION_SELECTORS.explicit);
+  for (let i = 0; i < explicitElements.length; i++) {
+    const element = explicitElements[i];
+    const domPath = await getDomPath(element);
+    if (seenDomPaths.has(domPath)) continue;
+    seenDomPaths.add(domPath);
+    const basicMetadata = await element.evaluate((el) => {
+      return {
+        sectionId: el.getAttribute("data-section") || "",
+        sectionLabel: el.getAttribute("data-section-label") || "",
+        sectionType: el.getAttribute("data-section-type") || "",
+        isDynamic: el.hasAttribute("data-dynamic")
+      };
+    });
+    let resolvedType = "content";
+    if (basicMetadata.sectionType) {
+      resolvedType = basicMetadata.sectionType;
+    } else if (["header", "footer"].includes(basicMetadata.sectionId)) {
+      resolvedType = basicMetadata.sectionId;
+    } else if (basicMetadata.sectionId.includes("hero")) {
+      resolvedType = "hero";
+    } else if (basicMetadata.sectionId.includes("gallery")) {
+      resolvedType = "gallery";
+    }
+    const bounds = await getAccurateBounds(element, resolvedType);
+    if (!bounds || bounds.height < 10) continue;
+    const sectionId = basicMetadata.sectionId || `section-${i}`;
+    const sectionPath = path4.join(pageOutputDir, "sections", `${sectionId}.png`);
+    try {
+      await element.screenshot({ path: sectionPath });
+    } catch {
+      if (verbose) console.log(`    Skipped section screenshot: ${sectionId}`);
+    }
+    const isStructuralOnly = ["header", "footer"].includes(resolvedType);
+    let textKeys = [];
+    if (!isStructuralOnly) {
+      textKeys = await detectTextKeys(page, element, pageInfo.slug, validTextKeys);
+    }
+    const isEditable = !isStructuralOnly && textKeys.length > 0;
+    let displayName = basicMetadata.sectionLabel;
+    if (!displayName) {
+      displayName = await generateSectionDisplayName(element, resolvedType, i);
+    }
+    if (verbose) {
+      console.log(
+        `    Section: ${displayName} (${sectionId}) at y=${Math.round(bounds.y)}${basicMetadata.isDynamic ? " [dynamic]" : ""} - ${textKeys.length} text keys`
+      );
+    }
+    sections.push({
+      sectionId,
+      sectionType: resolvedType,
+      displayName,
+      domPath,
+      bounds: {
+        x: Math.round(bounds.x),
+        y: Math.round(bounds.y),
+        width: Math.round(bounds.width),
+        height: Math.round(bounds.height)
+      },
+      textKeys,
+      isEditable,
+      isStructuralOnly
+    });
+  }
+  for (const [sectionType, selector] of Object.entries(SECTION_SELECTORS)) {
+    if (sectionType === "explicit") continue;
+    const elements = await page.$$(selector);
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i];
+      const domPath = await getDomPath(element);
+      if (seenDomPaths.has(domPath)) continue;
+      const isInsideExplicitSection = await element.evaluate((el) => {
+        let current = el.parentElement;
+        while (current) {
+          if (current.dataset?.section) {
+            return true;
+          }
+          current = current.parentElement;
+        }
+        return false;
+      });
+      if (isInsideExplicitSection) {
+        continue;
+      }
+      const isAncestorOfExplicitSection = await element.evaluate((el) => {
+        const explicitSections = el.querySelectorAll("[data-section]");
+        return explicitSections.length > 0;
+      });
+      if (isAncestorOfExplicitSection) {
+        if (verbose) {
+          console.log(`    Skipping ${sectionType} container (contains explicit sections)`);
+        }
+        continue;
+      }
+      seenDomPaths.add(domPath);
+      const bounds = await getAccurateBounds(element, sectionType);
+      if (!bounds || bounds.height < 10) continue;
+      const sectionId = `${sectionType}-${i}`;
+      const sectionPath = path4.join(pageOutputDir, "sections", `${sectionId}.png`);
+      try {
+        await element.screenshot({ path: sectionPath });
+      } catch {
+        if (verbose) console.log(`    Skipped section screenshot: ${sectionId}`);
+      }
+      const isStructuralOnly = ["header", "footer"].includes(sectionType);
+      const textKeys = isStructuralOnly ? [] : await detectTextKeys(page, element, pageInfo.slug, validTextKeys);
+      if (sectionType === "content" && textKeys.length === 0) {
+        continue;
+      }
+      const isEditable = !isStructuralOnly && textKeys.length > 0;
+      const displayName = await generateSectionDisplayName(element, sectionType, i);
+      if (verbose) {
+        console.log(`    Section: ${displayName} at y=${Math.round(bounds.y)}${bounds.isFixed ? " [fixed]" : ""}`);
+      }
+      sections.push({
+        sectionId,
+        sectionType,
+        displayName,
+        domPath,
+        bounds: {
+          x: Math.round(bounds.x),
+          y: Math.round(bounds.y),
+          width: Math.round(bounds.width),
+          height: Math.round(bounds.height)
+        },
+        textKeys,
+        isEditable,
+        isStructuralOnly
+      });
+    }
+  }
+  const hasContentSection = sections.some((s) => s.sectionType === "content");
+  if (!hasContentSection) {
+    if (verbose) console.log(`    No content sections found, trying fallback detection...`);
+    const fallbackElements = await detectFallbackContentSections(page, sections);
+    for (let i = 0; i < fallbackElements.length; i++) {
+      const element = fallbackElements[i];
+      const domPath = await getDomPath(element);
+      if (seenDomPaths.has(domPath)) continue;
+      seenDomPaths.add(domPath);
+      const bounds = await element.evaluate((el) => {
+        const rect = el.getBoundingClientRect();
+        return {
+          x: rect.left + window.scrollX,
+          y: rect.top + window.scrollY,
+          width: rect.width,
+          height: rect.height
+        };
+      });
+      if (!bounds || bounds.height < 10) continue;
+      const sectionId = `content-fallback-${i}`;
+      const sectionPath = path4.join(pageOutputDir, "sections", `${sectionId}.png`);
+      try {
+        await element.screenshot({ path: sectionPath });
+      } catch {
+        if (verbose) console.log(`    Skipped fallback section screenshot: ${sectionId}`);
+      }
+      const textKeys = await detectTextKeys(page, element, pageInfo.slug, validTextKeys);
+      const displayName = await generateSectionDisplayName(element, "content", i);
+      if (verbose) {
+        console.log(
+          `    Fallback Section: ${displayName} at y=${Math.round(bounds.y)} (${textKeys.length} text keys)`
+        );
+      }
+      sections.push({
+        sectionId,
+        sectionType: "content",
+        displayName,
+        domPath,
+        bounds: {
+          x: Math.round(bounds.x),
+          y: Math.round(bounds.y),
+          width: Math.round(bounds.width),
+          height: Math.round(bounds.height)
+        },
+        textKeys,
+        isEditable: textKeys.length > 0,
+        isStructuralOnly: false
+      });
+    }
+  }
+  await context.close();
+  sections.sort((a, b) => a.bounds.y - b.bounds.y);
+  return {
+    pageSlug: pageInfo.slug,
+    pagePath: pageInfo.path,
+    pageType: pageInfo.config.type,
+    deletable: pageInfo.config.deletable,
+    title: title || pageInfo.config.title,
+    capturedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    previewUrl: url,
+    viewport: snapshotConfig.viewport,
+    pageHeight,
+    sections
+  };
+}
+async function captureSnapshotsCommand(options) {
+  const { target, baseUrl, dryRun, verbose, pages: targetedPages } = options;
+  const targetDir = path4.resolve(target);
+  console.log(chalk7.blue("\u{1F4F8} Page Snapshot Capture"));
+  console.log(chalk7.gray("========================"));
+  console.log(chalk7.gray(`Target:   ${targetDir}`));
+  console.log(chalk7.gray(`Base URL: ${baseUrl}`));
+  process.env.SITE_BASE_URL = baseUrl;
+  let config2;
+  try {
+    config2 = loadPagesConfig(targetDir);
+  } catch (error) {
+    console.error(chalk7.red("Error:"), error.message);
+    console.log(chalk7.yellow("\nMake sure .dcs/pages.yaml exists in the target directory."));
+    process.exit(1);
+  }
+  console.log(chalk7.gray(`Site:     ${config2.siteSlug}`));
+  const outputDir = path4.join(targetDir, config2.snapshot.outputDir || ".dcs/snapshots");
+  const contentConfig = loadContentConfig(targetDir);
+  if (contentConfig) {
+    const pageCount = Object.keys(contentConfig.pages || {}).length;
+    const globalCount = Object.keys(contentConfig.global || {}).length;
+    console.log(chalk7.gray(`Content:  Loaded ${pageCount} pages, ${globalCount} global keys`));
+  }
+  const targetedConfig = loadTargetedSnapshotsConfig(targetDir);
+  if (targetedConfig?.mode === "skip") {
+    console.log("");
+    console.log(chalk7.yellow("\u23ED\uFE0F  Skip mode activated!"));
+    console.log(chalk7.gray(`   Reason: ${targetedConfig.reason}`));
+    console.log(chalk7.gray("   No snapshots will be captured."));
+    if (!dryRun) {
+      fs4.mkdirSync(outputDir, { recursive: true });
+      const skipMarker = {
+        skipped: true,
+        reason: targetedConfig.reason,
+        triggeredBy: targetedConfig.triggeredBy,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      fs4.writeFileSync(path4.join(outputDir, "skipped.json"), JSON.stringify(skipMarker, null, 2));
+    }
+    console.log(chalk7.green("\n\u2705 Snapshot capture skipped (as requested)"));
+    return;
+  }
+  let pagesToCapture = await resolveAllPages(config2);
+  console.log(chalk7.gray(`Found ${pagesToCapture.length} total pages in configuration`));
+  if (targetedPages && targetedPages.length > 0) {
+    const targetedSlugs = new Set(targetedPages);
+    const originalCount = pagesToCapture.length;
+    pagesToCapture = pagesToCapture.filter((p) => targetedSlugs.has(p.slug));
+    console.log("");
+    console.log(chalk7.cyan(`\u{1F3AF} Targeted mode: Filtering to ${pagesToCapture.length} of ${originalCount} pages`));
+  } else if (targetedConfig?.mode === "targeted" && targetedConfig.pages.length > 0) {
+    const targetedSlugs = new Set(targetedConfig.pages);
+    const originalCount = pagesToCapture.length;
+    pagesToCapture = pagesToCapture.filter((p) => targetedSlugs.has(p.slug));
+    console.log("");
+    console.log(chalk7.cyan(`\u{1F3AF} Targeted mode: Filtering to ${pagesToCapture.length} of ${originalCount} pages`));
+    console.log(chalk7.gray(`   Reason: ${targetedConfig.reason}`));
+  }
+  console.log("");
+  console.log("Pages to capture:");
+  for (const p of pagesToCapture) {
+    console.log(chalk7.gray(`  - ${p.slug} (${p.config.type}) ${p.path}`));
+  }
+  if (pagesToCapture.length === 0) {
+    console.log(chalk7.yellow("\n\u26A0\uFE0F  No pages to capture!"));
+    return;
+  }
+  if (dryRun) {
+    console.log(chalk7.yellow("\n--dry-run: Stopping before browser launch"));
+    return;
+  }
+  const { chromium } = await import("playwright");
+  if (fs4.existsSync(outputDir)) {
+    fs4.rmSync(outputDir, { recursive: true });
+  }
+  fs4.mkdirSync(outputDir, { recursive: true });
+  const spinner = ora3("Launching browser...").start();
+  const browser = await chromium.launch();
+  spinner.succeed("Browser launched");
+  const snapshots = [];
+  for (const pageInfo of pagesToCapture) {
+    const pageSpinner = ora3(`Capturing ${pageInfo.slug}...`).start();
+    try {
+      const validTextKeys = getValidTextKeysForPage(contentConfig, pageInfo.slug);
+      const snapshot = await capturePageSnapshot(
+        browser,
+        pageInfo,
+        config2.snapshot,
+        config2.siteSlug,
+        validTextKeys,
+        outputDir,
+        verbose || false
+      );
+      snapshots.push(snapshot);
+      const snapshotPath = path4.join(outputDir, config2.siteSlug, pageInfo.slug, "snapshot.json");
+      fs4.writeFileSync(snapshotPath, JSON.stringify(snapshot, null, 2));
+      pageSpinner.succeed(`${pageInfo.slug}: ${snapshot.sections.length} sections captured`);
+    } catch (error) {
+      pageSpinner.fail(`${pageInfo.slug}: Failed - ${error.message}`);
+    }
+  }
+  await browser.close();
+  const manifest = {
+    siteSlug: config2.siteSlug,
+    lastUpdated: (/* @__PURE__ */ new Date()).toISOString(),
+    deploymentRef: process.env.GITHUB_REF || "local",
+    pagesConfigVersion: config2.version,
+    pages: snapshots.map((s) => ({
+      pageSlug: s.pageSlug,
+      pagePath: s.pagePath,
+      pageType: s.pageType,
+      deletable: s.deletable,
+      title: s.title,
+      capturedAt: s.capturedAt,
+      sectionCount: s.sections.length
+    }))
+  };
+  const manifestPath = path4.join(outputDir, config2.siteSlug, "manifest.json");
+  fs4.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+  console.log("");
+  console.log(chalk7.green("\u2705 Snapshot capture complete!"));
+  console.log(chalk7.gray(`   Captured ${snapshots.length} pages`));
+  console.log(chalk7.gray(`   - Static:  ${snapshots.filter((s) => s.pageType === "static").length}`));
+  console.log(chalk7.gray(`   - Index:   ${snapshots.filter((s) => s.pageType === "index").length}`));
+  console.log(chalk7.gray(`   - Dynamic: ${snapshots.filter((s) => s.pageType === "dynamic").length}`));
+  console.log(chalk7.gray(`   Output: ${outputDir}`));
+}
+
 // src/index.ts
 var program = new Command();
 program.name("dcs").description("DCS (Duff Cloud Services) CLI for customer site management").version(version);
@@ -2124,6 +2690,16 @@ program.command("plans").description("Generate DCS integration plan files for AI
     force: options.force
   });
 });
+program.command("capture-snapshots").description("Capture visual snapshots of site pages for the portal page editor").option("-t, --target <dir>", "Target directory containing .dcs/pages.yaml", ".").option("-u, --base-url <url>", "Base URL of the running site", "http://localhost:5173").option("-p, --pages <slugs>", "Comma-separated list of page slugs to capture").option("--dry-run", "Show what would be captured without launching browser").option("-v, --verbose", "Show detailed output").action(async (options) => {
+  const pages = options.pages ? options.pages.split(",").map((s) => s.trim()) : void 0;
+  await captureSnapshotsCommand({
+    target: options.target,
+    baseUrl: options.baseUrl,
+    dryRun: options.dryRun,
+    verbose: options.verbose,
+    pages
+  });
+});
 program.exitOverride();
 try {
   await program.parseAsync(process.argv);
@@ -2132,7 +2708,7 @@ try {
     if (error.code === "commander.helpDisplayed" || error.code === "commander.version") {
       process.exit(0);
     }
-    console.error(chalk7.red("Error:"), error.message);
+    console.error(chalk8.red("Error:"), error.message);
     process.exit(1);
   }
 }