@duffcloudservices/cli 0.1.0 → 0.1.2

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.2";
 
 // 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,
@@ -441,181 +441,198 @@ import chalk4 from "chalk";
 import ora2 from "ora";
 
 // src/templates/site-deploy.yml
-var site_deploy_default = `# Site Deployment Workflow\r
-# Generated by @duffcloudservices/cli\r
-# This workflow deploys the site to Azure Static Web Apps using OIDC authentication.\r
-\r
-name: Site Deployment\r
-\r
-on:\r
-  push:\r
-    branches:\r
-      - 'release/**'\r
-      - 'master'\r
-  workflow_dispatch:\r
-    inputs:\r
-      trigger_reason:\r
-        description: 'Reason for manual deployment'\r
-        required: false\r
-        type: string\r
-        default: 'Manual deployment'\r
-\r
-# Prevent concurrent deployments for the same branch\r
-concurrency:\r
-  group: site-deploy-\${{ github.ref }}\r
-  cancel-in-progress: false\r
-\r
-permissions:\r
-  contents: read\r
-  issues: write\r
-  pull-requests: read\r
-  id-token: write  # Required for Azure OIDC authentication\r
-\r
-jobs:\r
-  deploy:\r
-    name: Deploy to Azure Static Web App\r
-    runs-on: ubuntu-latest\r
-    # Skip deployment on branch creation events\r
-    if: github.event.before != '0000000000000000000000000000000000000000'\r
-\r
-    steps:\r
-      - name: Determine deployment environment\r
-        id: environment\r
-        run: |\r
-          BRANCH="\${{ github.ref_name }}"\r
-          echo "Branch: $BRANCH"\r
-          \r
-          if [ "$BRANCH" == "master" ]; then\r
-            echo "environment=Production" >> $GITHUB_OUTPUT\r
-            echo "environment_name=Production" >> $GITHUB_OUTPUT\r
-            echo "swa_environment=" >> $GITHUB_OUTPUT\r
-          else\r
-            echo "environment=preview" >> $GITHUB_OUTPUT\r
-            echo "environment_name=Preview" >> $GITHUB_OUTPUT\r
-            echo "swa_environment=preview" >> $GITHUB_OUTPUT\r
-          fi\r
-\r
-      - name: Checkout repository\r
-        uses: actions/checkout@v4\r
-\r
-      - name: Read site configuration\r
-        id: config\r
-        run: |\r
-          CONFIG_FILE=".dcs/site.yaml"\r
-          \r
-          if [ ! -f "$CONFIG_FILE" ]; then\r
-            echo "::error::Missing DCS site configuration file: $CONFIG_FILE"\r
-            exit 1\r
-          fi\r
-          \r
-          SITE_NAME=$(grep -E '^site_name:' "$CONFIG_FILE" | sed 's/site_name:\\s*//' | tr -d '"' | tr -d "'")\r
-          SITE_SLUG=$(grep -E '^site_slug:' "$CONFIG_FILE" | sed 's/site_slug:\\s*//' | tr -d '"' | tr -d "'")\r
-          SWA_RESOURCE_ID=$(grep -E '^swa_resource_id:' "$CONFIG_FILE" | sed 's/swa_resource_id:\\s*//' | tr -d '"' | tr -d "'")\r
-          PORTAL_API_URL=$(grep -E '^portal_api_url:' "$CONFIG_FILE" | sed 's/portal_api_url:\\s*//' | tr -d '"' | tr -d "'")\r
-          PORTAL_API_URL="\${PORTAL_API_URL:-https://portal.duffcloudservices.com}"\r
-          GOOGLE_ANALYTICS_ID=$(grep -E '^google_analytics_id:' "$CONFIG_FILE" | sed 's/google_analytics_id:\\s*//' | tr -d '"' | tr -d "'")\r
-          \r
-          # Azure Authentication\r
-          AZURE_CLIENT_ID=$(grep -E '^\\s*client_id:' "$CONFIG_FILE" | sed 's/.*client_id:\\s*//' | tr -d '"' | tr -d "'")\r
-          AZURE_TENANT_ID=$(grep -E '^\\s*tenant_id:' "$CONFIG_FILE" | sed 's/.*tenant_id:\\s*//' | tr -d '"' | tr -d "'")\r
-          AZURE_SUBSCRIPTION_ID=$(grep -E '^\\s*subscription_id:' "$CONFIG_FILE" | sed 's/.*subscription_id:\\s*//' | tr -d '"' | tr -d "'")\r
-          \r
-          # Build Configuration\r
-          APP_LOCATION=$(grep -E '^\\s*app_location:' "$CONFIG_FILE" | sed 's/.*app_location:\\s*//' | tr -d '"' | tr -d "'")\r
-          OUTPUT_LOCATION=$(grep -E '^\\s*output_location:' "$CONFIG_FILE" | sed 's/.*output_location:\\s*//' | tr -d '"' | tr -d "'")\r
-          \r
-          APP_LOCATION="\${APP_LOCATION:-dist}"\r
-          OUTPUT_LOCATION="\${OUTPUT_LOCATION:-.}"\r
-\r
-          if [ -z "$SWA_RESOURCE_ID" ]; then\r
-            echo "::error::Missing swa_resource_id in $CONFIG_FILE"\r
-            exit 1\r
-          fi\r
-          \r
-          echo "site_name=$SITE_NAME" >> $GITHUB_OUTPUT\r
-          echo "site_slug=$SITE_SLUG" >> $GITHUB_OUTPUT\r
-          echo "swa_resource_id=$SWA_RESOURCE_ID" >> $GITHUB_OUTPUT\r
-          echo "app_location=$APP_LOCATION" >> $GITHUB_OUTPUT\r
-          echo "output_location=$OUTPUT_LOCATION" >> $GITHUB_OUTPUT\r
-          echo "azure_client_id=$AZURE_CLIENT_ID" >> $GITHUB_OUTPUT\r
-          echo "azure_tenant_id=$AZURE_TENANT_ID" >> $GITHUB_OUTPUT\r
-          echo "azure_subscription_id=$AZURE_SUBSCRIPTION_ID" >> $GITHUB_OUTPUT\r
-          echo "portal_api_url=$PORTAL_API_URL" >> $GITHUB_OUTPUT\r
-          echo "google_analytics_id=$GOOGLE_ANALYTICS_ID" >> $GITHUB_OUTPUT\r
-\r
-      - name: Azure login via OIDC\r
-        uses: azure/login@v2\r
-        with:\r
-          client-id: \${{ steps.config.outputs.azure_client_id || vars.AZURE_CLIENT_ID }}\r
-          tenant-id: \${{ steps.config.outputs.azure_tenant_id || vars.AZURE_TENANT_ID }}\r
-          subscription-id: \${{ steps.config.outputs.azure_subscription_id || vars.AZURE_SUBSCRIPTION_ID }}\r
-\r
-      - name: Get deployment tokens\r
-        id: tokens\r
-        run: |\r
-          # Get access token for DCS API\r
-          ACCESS_TOKEN=$(az account get-access-token --resource "api://304711b9-8532-4659-beb7-c85726de9ae5" --query accessToken -o tsv)\r
-          \r
-          SITE_NAME="\${{ steps.config.outputs.site_name }}"\r
-          SITE_SLUG="\${{ steps.config.outputs.site_slug }}"\r
-          PORTAL_API_URL="\${{ steps.config.outputs.portal_api_url }}"\r
-          \r
-          RESPONSE=$(curl -s -X POST "\${PORTAL_API_URL}/api/v1/sites/deployment-tokens" \\\r
-            -H "Authorization: Bearer $ACCESS_TOKEN" \\\r
-            -H "Content-Type: application/json" \\\r
-            -d "{\\"siteName\\": \\"$SITE_NAME\\", \\"siteSlug\\": \\"$SITE_SLUG\\"}")\r
-          \r
-          SWA_TOKEN=$(echo $RESPONSE | jq -r .swaToken)\r
-          \r
-          if [ -z "$SWA_TOKEN" ] || [ "$SWA_TOKEN" == "null" ]; then\r
-            echo "::error::Failed to retrieve SWA token from DCS API"\r
-            echo "Response: $RESPONSE"\r
-            exit 1\r
-          fi\r
-          \r
-          echo "::add-mask::$SWA_TOKEN"\r
-          echo "swa_token=$SWA_TOKEN" >> $GITHUB_OUTPUT\r
-\r
-      - name: Setup Node.js\r
-        uses: actions/setup-node@v4\r
-        with:\r
-          node-version: "22"\r
-\r
-      - name: Install pnpm\r
-        uses: pnpm/action-setup@v4\r
-\r
-      - name: Setup pnpm cache\r
-        uses: actions/cache@v4\r
-        with:\r
-          path: ~/.pnpm-store\r
-          key: \${{ runner.os }}-pnpm-\${{ hashFiles('**/pnpm-lock.yaml') }}\r
-          restore-keys: |\r
-            \${{ runner.os }}-pnpm-\r
-\r
-      - name: Install dependencies\r
-        run: pnpm install --frozen-lockfile\r
-\r
-      - name: Create environment file\r
-        run: |\r
-          cat > .env << EOF\r
-          VITE_BACKEND_URI="\${{ steps.config.outputs.portal_api_url }}"\r
-          VITE_SITE_SLUG="\${{ steps.config.outputs.site_slug }}"\r
-          VITE_GOOGLE_ANALYTICS_ID="\${{ steps.config.outputs.google_analytics_id }}"\r
-          EOF\r
-\r
-      - name: Build site\r
-        run: pnpm run build\r
-\r
-      - name: Deploy to Azure Static Web Apps\r
-        uses: Azure/static-web-apps-deploy@v1\r
-        with:\r
-          azure_static_web_apps_api_token: \${{ steps.tokens.outputs.swa_token }}\r
-          repo_token: \${{ secrets.GITHUB_TOKEN }}\r
-          action: "upload"\r
-          app_location: \${{ steps.config.outputs.app_location }}\r
-          output_location: \${{ steps.config.outputs.output_location }}\r
-          skip_app_build: true\r
-          deployment_environment: \${{ steps.environment.outputs.swa_environment != '' && steps.environment.outputs.swa_environment || '' }}\r
+var site_deploy_default = `# Site Deployment Workflow
+# Generated by @duffcloudservices/cli
+# This workflow deploys the site to Azure Static Web Apps using OIDC authentication.
+
+name: Site Deployment
+
+on:
+  push:
+    branches:
+      - 'release/**'
+      - 'master'
+  workflow_dispatch:
+    inputs:
+      trigger_reason:
+        description: 'Reason for manual deployment'
+        required: false
+        type: string
+        default: 'Manual deployment'
+
+# Prevent concurrent deployments for the same branch
+concurrency:
+  group: site-deploy-\${{ github.ref }}
+  cancel-in-progress: false
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: read
+  id-token: write  # Required for Azure OIDC authentication
+
+jobs:
+  deploy:
+    name: Deploy to Azure Static Web App
+    runs-on: ubuntu-latest
+    # Skip deployment on branch creation events
+    if: github.event.before != '0000000000000000000000000000000000000000'
+
+    steps:
+      - name: Determine deployment environment
+        id: environment
+        run: |
+          BRANCH="\${{ github.ref_name }}"
+          echo "Branch: $BRANCH"
+          
+          if [ "$BRANCH" == "master" ]; then
+            echo "environment=Production" >> $GITHUB_OUTPUT
+            echo "environment_name=Production" >> $GITHUB_OUTPUT
+            echo "swa_environment=" >> $GITHUB_OUTPUT
+          else
+            echo "environment=preview" >> $GITHUB_OUTPUT
+            echo "environment_name=Preview" >> $GITHUB_OUTPUT
+            echo "swa_environment=preview" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Read site configuration
+        id: config
+        run: |
+          CONFIG_FILE=".dcs/site.yaml"
+          
+          if [ ! -f "$CONFIG_FILE" ]; then
+            echo "::error::Missing DCS site configuration file: $CONFIG_FILE"
+            exit 1
+          fi
+          
+          SITE_NAME=$(grep -E '^site_name:' "$CONFIG_FILE" | sed 's/site_name:\\s*//' | tr -d '"' | tr -d "'")
+          SITE_SLUG=$(grep -E '^site_slug:' "$CONFIG_FILE" | sed 's/site_slug:\\s*//' | tr -d '"' | tr -d "'")
+          SWA_RESOURCE_ID=$(grep -E '^swa_resource_id:' "$CONFIG_FILE" | sed 's/swa_resource_id:\\s*//' | tr -d '"' | tr -d "'")
+          PORTAL_API_URL=$(grep -E '^portal_api_url:' "$CONFIG_FILE" | sed 's/portal_api_url:\\s*//' | tr -d '"' | tr -d "'")
+          PORTAL_API_URL="\${PORTAL_API_URL:-https://portal.duffcloudservices.com}"
+          GOOGLE_ANALYTICS_ID=$(grep -E '^google_analytics_id:' "$CONFIG_FILE" | sed 's/google_analytics_id:\\s*//' | tr -d '"' | tr -d "'")
+          PROD_APPINSIGHTS_CONNECTION_STRING=$(grep -E '^prod_appinsights_connection_string:' "$CONFIG_FILE" | sed 's/prod_appinsights_connection_string:\\s*//' | tr -d '"' | tr -d "'" || true)
+          DEV_APPINSIGHTS_CONNECTION_STRING=$(grep -E '^dev_appinsights_connection_string:' "$CONFIG_FILE" | sed 's/dev_appinsights_connection_string:\\s*//' | tr -d '"' | tr -d "'" || true)
+          
+          # Azure Authentication
+          AZURE_CLIENT_ID=$(grep -E '^\\s*client_id:' "$CONFIG_FILE" | sed 's/.*client_id:\\s*//' | tr -d '"' | tr -d "'")
+          AZURE_TENANT_ID=$(grep -E '^\\s*tenant_id:' "$CONFIG_FILE" | sed 's/.*tenant_id:\\s*//' | tr -d '"' | tr -d "'")
+          AZURE_SUBSCRIPTION_ID=$(grep -E '^\\s*subscription_id:' "$CONFIG_FILE" | sed 's/.*subscription_id:\\s*//' | tr -d '"' | tr -d "'")
+          
+          # Build Configuration
+          APP_LOCATION=$(grep -E '^\\s*app_location:' "$CONFIG_FILE" | sed 's/.*app_location:\\s*//' | tr -d '"' | tr -d "'")
+          OUTPUT_LOCATION=$(grep -E '^\\s*output_location:' "$CONFIG_FILE" | sed 's/.*output_location:\\s*//' | tr -d '"' | tr -d "'")
+          
+          APP_LOCATION="\${APP_LOCATION:-dist}"
+          OUTPUT_LOCATION="\${OUTPUT_LOCATION:-.}"
+
+          if [ -z "$SWA_RESOURCE_ID" ]; then
+            echo "::error::Missing swa_resource_id in $CONFIG_FILE"
+            exit 1
+          fi
+          
+          echo "site_name=$SITE_NAME" >> $GITHUB_OUTPUT
+          echo "site_slug=$SITE_SLUG" >> $GITHUB_OUTPUT
+          echo "swa_resource_id=$SWA_RESOURCE_ID" >> $GITHUB_OUTPUT
+          echo "app_location=$APP_LOCATION" >> $GITHUB_OUTPUT
+          echo "output_location=$OUTPUT_LOCATION" >> $GITHUB_OUTPUT
+          echo "azure_client_id=$AZURE_CLIENT_ID" >> $GITHUB_OUTPUT
+          echo "azure_tenant_id=$AZURE_TENANT_ID" >> $GITHUB_OUTPUT
+          echo "azure_subscription_id=$AZURE_SUBSCRIPTION_ID" >> $GITHUB_OUTPUT
+          echo "portal_api_url=$PORTAL_API_URL" >> $GITHUB_OUTPUT
+          echo "google_analytics_id=$GOOGLE_ANALYTICS_ID" >> $GITHUB_OUTPUT
+          echo "prod_appinsights_connection_string=$PROD_APPINSIGHTS_CONNECTION_STRING" >> $GITHUB_OUTPUT
+          echo "dev_appinsights_connection_string=$DEV_APPINSIGHTS_CONNECTION_STRING" >> $GITHUB_OUTPUT
+
+      - name: Azure login via OIDC
+        uses: azure/login@v2
+        with:
+          client-id: \${{ steps.config.outputs.azure_client_id || vars.AZURE_CLIENT_ID }}
+          tenant-id: \${{ steps.config.outputs.azure_tenant_id || vars.AZURE_TENANT_ID }}
+          subscription-id: \${{ steps.config.outputs.azure_subscription_id || vars.AZURE_SUBSCRIPTION_ID }}
+
+      - name: Get deployment tokens
+        id: tokens
+        run: |
+          # Get access token for DCS API
+          ACCESS_TOKEN=$(az account get-access-token --resource "api://304711b9-8532-4659-beb7-c85726de9ae5" --query accessToken -o tsv)
+          
+          SITE_NAME="\${{ steps.config.outputs.site_name }}"
+          SITE_SLUG="\${{ steps.config.outputs.site_slug }}"
+          PORTAL_API_URL="\${{ steps.config.outputs.portal_api_url }}"
+          
+          RESPONSE=$(curl -s -X POST "\${PORTAL_API_URL}/api/v1/sites/deployment-tokens" \\
+            -H "Authorization: Bearer $ACCESS_TOKEN" \\
+            -H "Content-Type: application/json" \\
+            -d "{\\"siteName\\": \\"$SITE_NAME\\", \\"siteSlug\\": \\"$SITE_SLUG\\"}")
+          
+          SWA_TOKEN=$(echo $RESPONSE | jq -r .swaToken)
+          
+          if [ -z "$SWA_TOKEN" ] || [ "$SWA_TOKEN" == "null" ]; then
+            echo "::error::Failed to retrieve SWA token from DCS API"
+            echo "Response: $RESPONSE"
+            exit 1
+          fi
+          
+          echo "::add-mask::$SWA_TOKEN"
+          echo "swa_token=$SWA_TOKEN" >> $GITHUB_OUTPUT
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: \${{ runner.os }}-pnpm-\${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            \${{ runner.os }}-pnpm-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Create environment file
+        run: |
+          cat > .env << EOF
+          VITE_APP_VERSION="\${{ github.sha }}"
+          VITE_BACKEND_URI="\${{ steps.config.outputs.portal_api_url }}"
+          VITE_SITE_SLUG="\${{ steps.config.outputs.site_slug }}"
+          VITE_GOOGLE_ANALYTICS_ID="\${{ steps.config.outputs.google_analytics_id }}"
+          VITE_PROD_APPINSIGHTS_CONNECTION_STRING="\${{ steps.config.outputs.prod_appinsights_connection_string }}"
+          VITE_DEV_APPINSIGHTS_CONNECTION_STRING="\${{ steps.config.outputs.dev_appinsights_connection_string }}"
+          EOF
+
+      - name: Build site
+        run: pnpm run build
+
+      - name: Inject Google Analytics
+        if: steps.config.outputs.google_analytics_id != ''
+        run: |
+          GA_ID="\${{ steps.config.outputs.google_analytics_id }}"
+          OUTPUT_DIR="\${{ steps.config.outputs.app_location }}"
+          echo "Injecting Google Analytics tag \${GA_ID} into \${OUTPUT_DIR}..."
+          find "$OUTPUT_DIR" -name "*.html" -exec sed -i "s|</head>|<script async src=\\"https://www.googletagmanager.com/gtag/js?id=\${GA_ID}\\"></script><script>window.dataLayer=window.dataLayer\\|\\|[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','\${GA_ID}')</script>\\n</head>|" {} +
+          INJECTED=$(grep -rl "googletagmanager" "$OUTPUT_DIR" --include="*.html" | wc -l)
+          echo "Injected GA tag into \${INJECTED} HTML file(s)"
+
+      - name: Deploy to Azure Static Web Apps
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: \${{ steps.tokens.outputs.swa_token }}
+          repo_token: \${{ secrets.GITHUB_TOKEN }}
+          action: "upload"
+          app_location: \${{ steps.config.outputs.app_location }}
+          output_location: \${{ steps.config.outputs.output_location }}
+          skip_app_build: true
+          deployment_environment: \${{ steps.environment.outputs.swa_environment != '' && steps.environment.outputs.swa_environment || '' }}
 `;
 
 // src/commands/init.ts
@@ -2082,6 +2099,594 @@ 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,
+    ignoreHTTPSErrors: true
+  });
+  const page = await context.newPage();
+  const rawUrl = pageInfo.path.startsWith("http") ? pageInfo.path : `${process.env.SITE_BASE_URL || "http://localhost:5173"}${pageInfo.path}`;
+  const pageUrl = new URL(rawUrl);
+  pageUrl.searchParams.set("dcs-hide-ribbon", "");
+  const url = pageUrl.toString();
+  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 thumbnailViewport = { width: 640, height: 360 };
+  await page.setViewportSize(thumbnailViewport);
+  await page.waitForTimeout(200);
+  const thumbnailPath = path4.join(pageOutputDir, "thumbnail.png");
+  await page.screenshot({
+    path: thumbnailPath,
+    fullPage: false
+  });
+  await page.setViewportSize(snapshotConfig.viewport);
+  await page.waitForTimeout(100);
+  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,
+    path: pageInfo.path,
+    type: 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 = [];
+  const failures = [];
+  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) {
+      const message = `${pageInfo.slug}: ${error.message}`;
+      failures.push(message);
+      pageSpinner.fail(`${pageInfo.slug}: Failed - ${error.message}`);
+    }
+  }
+  await browser.close();
+  const manifest = {
+    siteSlug: config2.siteSlug,
+    capturedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    capturedVersion: process.env.GITHUB_SHA,
+    deploymentRef: process.env.GITHUB_REF || "local",
+    pagesConfigVersion: config2.version,
+    pages: snapshots.map((s) => ({
+      pageSlug: s.pageSlug,
+      pagePath: s.path,
+      pageType: s.type,
+      deletable: s.deletable,
+      title: s.title,
+      capturedAt: s.capturedAt,
+      sectionCount: s.sections.length,
+      hasSnapshot: true
+    }))
+  };
+  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.type === "static").length}`));
+  console.log(chalk7.gray(`   - Index:   ${snapshots.filter((s) => s.type === "index").length}`));
+  console.log(chalk7.gray(`   - Dynamic: ${snapshots.filter((s) => s.type === "dynamic").length}`));
+  console.log(chalk7.gray(`   Output: ${outputDir}`));
+  if (failures.length > 0) {
+    throw new Error(`Snapshot capture failed for ${failures.length} page(s): ${failures.join("; ")}`);
+  }
+}
+
 // src/index.ts
 var program = new Command();
 program.name("dcs").description("DCS (Duff Cloud Services) CLI for customer site management").version(version);
@@ -2124,6 +2729,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 +2747,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);
   }
 }