@duffcloudservices/cli 0.1.1 → 0.1.3

package/dist/index.js

@@ -5,7 +5,7 @@ import { Command } from "commander";
 import chalk8 from "chalk";
 
 // package.json
-var version = "0.1.1";
+var version = "0.1.3";
 
 // src/commands/auth.ts
 import chalk2 from "chalk";
@@ -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
@@ -2088,6 +2105,85 @@ import path4 from "path";
 import yaml3 from "js-yaml";
 import chalk7 from "chalk";
 import ora3 from "ora";
+var CARD_THUMBNAIL_ASPECT_RATIO = 16 / 9;
+var ASSET_WAIT_TIMEOUT_MS = 5e3;
+async function disableCaptureMotion(page) {
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after {
+        animation-delay: -1ms !important;
+        animation-duration: 1ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+        transition-delay: 0s !important;
+        transition-duration: 0s !important;
+      }
+    `
+  }).catch(() => {
+  });
+}
+async function waitForAboveFoldAssets(page) {
+  await page.evaluate(async (timeoutMs) => {
+    const waitForFonts = typeof document.fonts?.ready?.then === "function" ? document.fonts.ready.catch(() => void 0) : Promise.resolve();
+    const visibleImages = Array.from(document.images).filter((img) => {
+      const rect = img.getBoundingClientRect();
+      return rect.bottom >= -100 && rect.top <= window.innerHeight * 1.5;
+    });
+    const waitForImages = Promise.all(visibleImages.map((img) => {
+      if (img.complete && img.naturalWidth > 0) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        const done = () => resolve();
+        img.addEventListener("load", done, { once: true });
+        img.addEventListener("error", done, { once: true });
+      });
+    }));
+    await Promise.race([
+      Promise.all([waitForFonts, waitForImages]),
+      new Promise((resolve) => window.setTimeout(resolve, timeoutMs))
+    ]);
+  }, ASSET_WAIT_TIMEOUT_MS).catch((error) => {
+    console.warn(`    Warning: could not verify above-fold assets: ${error instanceof Error ? error.message : String(error)}`);
+  });
+}
+async function lazyLoadPage(page, viewportHeight) {
+  let pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+  const scrollStep = Math.max(viewportHeight, 1);
+  for (let scrollY = 0; scrollY < pageHeight; scrollY += scrollStep) {
+    await page.evaluate((y) => window.scrollTo(0, y), scrollY);
+    await page.waitForTimeout(100);
+  }
+  await page.waitForTimeout(200);
+  pageHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+  return pageHeight;
+}
+async function resetScrollForFullPageCapture(page) {
+  await page.evaluate(() => {
+    window.scrollTo(0, 0);
+    window.dispatchEvent(new Event("scroll"));
+  });
+  await page.waitForFunction(() => Math.abs(window.scrollY) < 1, void 0, { timeout: 1e3 }).catch(() => void 0);
+  await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))).catch(() => void 0);
+  await page.waitForTimeout(350);
+  await waitForAboveFoldAssets(page);
+}
+async function captureHeaderThumbnail(page, outputPath, viewport) {
+  await page.setViewportSize(viewport);
+  await page.evaluate(() => window.scrollTo(0, 0));
+  await page.waitForTimeout(200);
+  await waitForAboveFoldAssets(page);
+  const clip = await page.evaluate((aspectRatio) => {
+    const width = Math.max(document.documentElement.clientWidth, window.innerWidth, 1);
+    const pageHeight = Math.max(document.documentElement.scrollHeight, document.body?.scrollHeight ?? 0, 1);
+    const height = Math.min(Math.round(width / aspectRatio), pageHeight);
+    return { x: 0, y: 0, width, height };
+  }, CARD_THUMBNAIL_ASPECT_RATIO);
+  await page.screenshot({
+    path: outputPath,
+    clip
+  });
+}
 var SECTION_SELECTORS = {
   explicit: "[data-section]",
   header: 'header, [role="banner"], .header, #header',
@@ -2201,14 +2297,16 @@ async function generateSectionDisplayName(element, sectionType, index) {
 }
 async function detectTextKeys(_page, sectionElement, _pageSlug, _validTextKeys) {
   const textKeys = [];
-  const textKeyElements = await sectionElement.$$("[data-text-key]");
+  const textKeyElements = await sectionElement.$$("[data-text-key], [data-dcs-text], [data-dcs-image-key]");
   for (const element of textKeyElements) {
     const keyInfo = await element.evaluate((el) => {
       const rect = el.getBoundingClientRect();
+      const explicitImageUrl = el.getAttribute("data-dcs-image-url");
+      const imageUrl = el instanceof HTMLImageElement ? el.currentSrc || el.src : "";
       return {
-        key: el.getAttribute("data-text-key") || "",
+        key: el.getAttribute("data-text-key") || el.getAttribute("data-dcs-text") || el.getAttribute("data-dcs-image-key") || "",
         elementType: el.tagName.toLowerCase(),
-        currentValue: el.textContent?.trim().slice(0, 500) || "",
+        currentValue: (explicitImageUrl || imageUrl || el.textContent?.trim() || "").slice(0, 500),
         bounds: {
           x: rect.left + window.scrollX,
           y: rect.top + window.scrollY,
@@ -2217,7 +2315,7 @@ async function detectTextKeys(_page, sectionElement, _pageSlug, _validTextKeys)
         }
       };
     });
-    if (keyInfo.key) {
+    if (keyInfo.key && !textKeys.some((textKey) => textKey.key === keyInfo.key)) {
       const domPath = await getDomPath(element);
       textKeys.push({
         key: keyInfo.key,
@@ -2259,15 +2357,21 @@ async function detectFallbackContentSections(page, existingSections) {
 }
 async function capturePageSnapshot(browser, pageInfo, snapshotConfig, siteSlug, validTextKeys, outputDir, verbose) {
   const context = await browser.newContext({
-    viewport: snapshotConfig.viewport
+    viewport: snapshotConfig.viewport,
+    ignoreHTTPSErrors: true,
+    reducedMotion: "reduce"
   });
   const page = await context.newPage();
-  const url = pageInfo.path.startsWith("http") ? pageInfo.path : `${process.env.SITE_BASE_URL || "http://localhost:5173"}${pageInfo.path}`;
+  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 disableCaptureMotion(page);
     await page.waitForLoadState("networkidle", { timeout: 1e4 }).catch(() => {
       if (verbose) console.log(`    Note: networkidle timeout, continuing anyway`);
     });
@@ -2277,29 +2381,21 @@ async function capturePageSnapshot(browser, pageInfo, snapshotConfig, siteSlug,
     throw error;
   }
   await page.waitForTimeout(snapshotConfig.waitAfterLoad);
+  await waitForAboveFoldAssets(page);
   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})`);
-  }
+  let pageHeight = await lazyLoadPage(page, snapshotConfig.viewport.height);
+  await resetScrollForFullPageCapture(page);
   const fullPagePath = path4.join(pageOutputDir, "full-page.png");
   await page.screenshot({
     path: fullPagePath,
     fullPage: snapshotConfig.captureFullPage
   });
+  const thumbnailPath = path4.join(pageOutputDir, "thumbnail.png");
+  await captureHeaderThumbnail(page, thumbnailPath, snapshotConfig.viewport);
+  await page.evaluate(() => window.scrollTo(0, 0));
+  await page.waitForTimeout(100);
   const sections = [];
   const seenDomPaths = /* @__PURE__ */ new Set();
   const getAccurateBounds = async (el, sectionType) => {
@@ -2508,8 +2604,8 @@ async function capturePageSnapshot(browser, pageInfo, snapshotConfig, siteSlug,
   sections.sort((a, b) => a.bounds.y - b.bounds.y);
   return {
     pageSlug: pageInfo.slug,
-    pagePath: pageInfo.path,
-    pageType: pageInfo.config.type,
+    path: pageInfo.path,
+    type: pageInfo.config.type,
     deletable: pageInfo.config.deletable,
     title: title || pageInfo.config.title,
     capturedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -2544,6 +2640,9 @@ async function captureSnapshotsCommand(options) {
     console.log(chalk7.gray(`Content:  Loaded ${pageCount} pages, ${globalCount} global keys`));
   }
   const targetedConfig = loadTargetedSnapshotsConfig(targetDir);
+  const isTargetedCapture = Boolean(
+    targetedPages && targetedPages.length > 0 || targetedConfig?.mode === "targeted" && targetedConfig.pages.length > 0
+  );
   if (targetedConfig?.mode === "skip") {
     console.log("");
     console.log(chalk7.yellow("\u23ED\uFE0F  Skip mode activated!"));
@@ -2600,6 +2699,7 @@ async function captureSnapshotsCommand(options) {
   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 {
@@ -2618,34 +2718,45 @@ async function captureSnapshotsCommand(options) {
       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,
-    lastUpdated: (/* @__PURE__ */ new Date()).toISOString(),
+    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.pagePath,
-      pageType: s.pageType,
+      pagePath: s.path,
+      pageType: s.type,
       deletable: s.deletable,
       title: s.title,
       capturedAt: s.capturedAt,
-      sectionCount: s.sections.length
+      sectionCount: s.sections.length,
+      hasSnapshot: true
     }))
   };
   const manifestPath = path4.join(outputDir, config2.siteSlug, "manifest.json");
-  fs4.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+  if (isTargetedCapture) {
+    console.log(chalk7.gray("   Targeted capture: leaving the existing remote manifest intact"));
+  } else {
+    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(`   - 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