Update CI workflow files to start dev server and remove build step

Author: webstackdev

.github/workflows/build-and-test.yml

@@ -1,11 +1,13 @@
 # Runs build, unit tests, and E2E tests - gates deployment
-# @TODO: Push to a preview branch on Vercel, and run the E2E tests on that preview instead of from a dev server
-name: CI - Build & Test
+name: Build and Test
 
 on:
   push:
+    branches:
+      - main
   pull_request:
-    branches: [main]
+    branches:
+      - main
 
 jobs:
   build-and-test:
@@ -39,7 +41,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -50,7 +52,10 @@ jobs:
       - name: Install dependencies
         run: npm ci --legacy-peer-deps
 
-      - name: Run TypeScript check
+      - name: Sync Astro types
+        run: npm run sync
+
+      - name: Run Astro check
         run: npm run check
 
       - name: Run lint
@@ -61,7 +66,7 @@ jobs:
           # Run vitest with coverage. The built-in 'github-actions' reporter
           # (configured in vitest.config.ts) will create annotations.
           # Coverage reporters (json-summary, json) are configured in vitest.config.ts.
-          npx vitest run --coverage
+          npm run test:coverage
 
       - name: Report Coverage
         uses: davelosert/vitest-coverage-report-action@v2.9.0
@@ -70,11 +75,6 @@ jobs:
           json-summary-path: './coverage/coverage-summary.json'
           json-final-path: './coverage/coverage-final.json'
 
-      - name: Build project
-        run: npm run build
-        env:
-          NODE_ENV: production
-
       - name: Install Playwright browsers
         run: npx playwright install --with-deps
 
@@ -116,11 +116,41 @@ jobs:
       - name: Apply Supabase migrations
         run: npm run containers:supabase:db-push
 
+      - name: Start Astro dev server
+        run: |
+          npm run dev -- --host 0.0.0.0 > /tmp/astro-dev.log 2>&1 &
+          echo $! > /tmp/astro-dev.pid
+
+      - name: Wait for dev server
+        run: |
+          for attempt in $(seq 1 60); do
+            if curl -fsS http://127.0.0.1:4321 >/dev/null; then
+              echo "✅ Dev server is responding"
+              exit 0
+            fi
+            sleep 2
+          done
+          echo "❌ Dev server failed to start" >&2
+          if [ -f /tmp/astro-dev.log ]; then
+            echo '--- Astro dev server log ---'
+            cat /tmp/astro-dev.log
+          fi
+          exit 1
+
       - name: Run Playwright E2E tests
         run: npx playwright test
         env:
           CI: "1"
           FORCE_COLOR: "1"
+          E2E_MOCKS: "1"
+
+      - name: Stop Astro dev server
+        if: always()
+        run: |
+          if [ -f /tmp/astro-dev.pid ]; then
+            kill $(cat /tmp/astro-dev.pid) || true
+            rm /tmp/astro-dev.pid
+          fi
 
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
@@ -155,7 +185,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Deploy to Vercel (Preview)
         uses: amondnet/vercel-action@v41.1.4
@@ -201,7 +231,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Deploy to Vercel (Production)
         uses: amondnet/vercel-action@v41.1.4

.github/workflows/codeql.yml

@@ -3,9 +3,11 @@ name: CodeQL Advanced Security Scanning
 
 on:
   push:
-    branches: [main]
+    branches:
+      - main
   pull_request:
-    branches: [main]
+    branches:
+      - main
   schedule:
     # Run at 6 AM UTC every Monday
     - cron: '0 6 * * 1'
@@ -26,7 +28,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v3

.github/workflows/dependency-review.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Dependency Review
         uses: actions/dependency-review-action@v4

.github/workflows/type-check.yml

@@ -15,6 +15,7 @@
     "Bridgy",
     "bsky",
     "Btns",
+    "Buildx",
     "CASB",
     "Centricity",
     "cfduid",

.vscode/settings.json

@@ -0,0 +1,66 @@
+<!-- markdownlint-disable-file -->
+# E2E Stress Tests
+
+Our goal is to make the E2E test suite as deterministic as possible, so that we can use it as a gate for CI to make sure that commits and PRs on GitHub are not breaking existing code and can be merged to main. We've spent an entire day running the test cases and fixing errors. Each run, one or more new errors appear, we fix them, and do another run with the same result. The entire test suite seems very flaky.
+
+## Problems Areas
+
+### 1. Carousel / Testimonials Hydration Regressions
+
+- **Symptom:**
+
+`testimonials.spec.ts` consistently fails in WebKit because the target pagination dot never registers as selected (`Expected: 1 Received: 0`). Earlier stress runs also timed out waiting for `data-carousel-ready`, implying the custom element never finishes initialization.
+
+- **Diagnostics:**
+
+  - Inspect built HTML for `/testing/carousel` and the home page to confirm the inline `<script type="module">` blocks that call `register{Carousel,Testimonials}WebComponent()` survive bundling and execute under Playwright.
+
+  - Capture console output during a focused run (e.g., `testimonials.spec.ts` on Chromium) to see whether Embla throws inside `initialize()` or whether `handleScriptError` tears the element down before setting `data-carousel-ready`.
+
+### 2. Service Worker Enablement
+
+- **Symptom:**
+
+PWA specs intermittently wait more than 30 seconds for `navigator.serviceWorker.ready`, suggesting `window.__disableServiceWorkerForE2E` may remain `true` despite `PwaPage.enableServiceWorkerForE2E()`.
+
+- **Diagnostics:**
+
+  - Log the flag inside `registerServiceWorker()` to prove whether our init script overrides take effect before the registration guard runs.
+
+  - Audit `addInitScript` ordering to ensure no later script reverts the flag.
+
+### 3. Theme Picker Reload Policy
+
+- **Symptom:**
+
+`theme-picker.spec.ts` fails on WebKit with `page.reload: Navigation canceled by policy check` when `setupCleanTestPage()` forces a hard reload to reset cookies.
+
+- **Diagnostics:**
+
+  - Instrument `helpers/cookieHelper.ts` to capture the URL and policy state when the reload is blocked.
+
+  - Evaluate alternative reset flows (for example, `page.goto()` with a cache-busting query) so tests do not rely on reload semantics that WebKit disallows under our CSP/service-worker combo.
+
+## Coordinated Troubleshooting Plan
+
+1. **Isolate failures quickly:**
+
+Run the individual specs above in Chromium and WebKit to capture console logs, traces, and screenshots before applying fixes so we have solid before/after evidence.
+
+2. **Instrument before patching:**
+
+Add temporary logging hooks (build-script inspection, SW flag checks, reload diagnostics) to validate hypotheses with a single rerun, then remove or guard them once validated.
+
+3. **Apply targeted fixes sequentially:**
+
+Fix hydration/registration issues first because they affect multiple specs, then re-run only the impacted specs; once clean, fold in the PWA and theme-picker adjustments and repeat.
+
+4. **Re-run stress subset:**
+
+After each fix cluster, run a reduced but representative bundle (for example, `testimonials`, `theme-picker`, `pwa`) across browsers to catch regressions early.
+
+5. **Full-suite verification:**
+
+Once subsets are stable, kick off the full stress suite to confirm deterministic behavior, and keep this document updated with any new regressions instead of relying on scrollback.
+
+4. **Re-run stress subset**

E2E_STESS_TESTS.md

@@ -1,5 +1,19 @@
+<!-- markdownlint-disable-file -->
 # TODO
 
+Inspect the built HTML for /testing/carousel and the home page to confirm the inline `<script type="module">` blocks that call register{Carousel,Testimonials}WebComponent() are still present after bundling. If they're getting tree-shaken or deferred incorrectly, the custom elements would never hydrate, which matches the data-carousel-ready hang.
+
+Capture console output during one stress-run slice (e.g., testimonials.spec.ts in Chromium) to see if the Embla modules or our error handler are throwing—any runtime exception inside initialize() would tear down the element and prevent the ready flag. I'll focus on the [TestimonialsCarouselElement] initialize log path.
+
+For the service-worker suite, verify that PwaPage.enableServiceWorkerForE2E() actually overrides window.__disableServiceWorkerForE2E after each navigation by logging the flag inside registerServiceWorker() before the early-return, and make sure our init scripts run in the right order when multiple addInitScript calls are stacked.
+
+## Pause and Play
+
+Next, I'd like to add a "pause" and "play" icon to src/components/Animations/Computers
+There are icons with those names already configured for the Icon component.
+There are hooks for pause and play already setup in the component.
+The icon should be displayed in the low right hand corner of the animation, with 4px of padding from the bottom and right side. It should overlay the animation, not expand the bounding box of the animation.
+
 ## Performance
 
 Implement mitigations in test/e2e/specs/07-performance/PERFORMANCE.md