feat: add GitHub Pages deployment for development tools and reports

- Add GitHub Pages workflow (release-pages.yml) to deploy Storybook, Knip reports, and Playwright test reports
- Create .pages directory structure for GitHub Pages content
- Add build scripts for generating pages artifacts (build-pages.sh, create-playwright-index.js)
- Update CI workflows to support pages deployment and artifact handling
- Configure Knip and TypeScript for new .pages structure
- Add HTML viewers for Knip and Playwright reports

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

.github/workflows/ci-tests-e2e.yaml

@@ -3,7 +3,7 @@ name: 'CI: Tests E2E'
 
 on:
   push:
-    branches: [main, master, core/*, desktop/*]
+    branches: [main, master, core/*, desktop/*, sno-deploy-ghpage]
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
   workflow_dispatch:

.github/workflows/ci-tests-storybook.yaml

@@ -1,9 +1,13 @@
-# Description: Builds Storybook and runs visual regression testing via Chromatic, deploys previews to Cloudflare Pages
-name: 'CI: Tests Storybook'
+name: Storybook and Chromatic CI
+
+# - [Automate Chromatic with GitHub Actions • Chromatic docs]( https://www.chromatic.com/docs/github-actions/ )
 
 on:
   workflow_dispatch: # Allow manual triggering
   pull_request:
+    branches: [main, sno-deploy-ghpage]
+  push:
+    branches: [sno-deploy-ghpage]
 
 jobs:
   # Post starting comment for non-forked PRs
@@ -14,7 +18,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Post starting comment
         env:
@@ -30,16 +34,40 @@ jobs:
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:
     runs-on: ubuntu-latest
-    if: github.event_name == 'pull_request'
+    if: github.event_name == 'pull_request' || github.event_name == 'push'
     outputs:
       conclusion: ${{ steps.job-status.outputs.conclusion }}
       workflow-url: ${{ steps.workflow-url.outputs.url }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build Storybook
         run: pnpm build-storybook
@@ -58,7 +86,7 @@ jobs:
 
       - name: Upload Storybook build
         if: success() && github.event.pull_request.head.repo.fork == false
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v4
         with:
           name: storybook-static
           path: storybook-static/
@@ -75,16 +103,40 @@ jobs:
       chromatic-storybook-url: ${{ steps.chromatic.outputs.storybookUrl }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0 # Required for Chromatic baseline
 
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build Storybook and run Chromatic
         id: chromatic
-        uses: chromaui/action@07791f8243f4cb2698bf4d00426baf4b2d1cb7e0 # v13.3.5
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: build-storybook
@@ -114,11 +166,11 @@ jobs:
       contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Download Storybook build
         if: needs.storybook-build.outputs.conclusion == 'success'
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v4
         with:
           name: storybook-static
           path: storybook-static
@@ -148,7 +200,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Update comment with Chromatic URLs
-        uses: actions/github-script@v8
+        uses: actions/github-script@v7
         with:
           script: |
             const buildUrl = '${{ needs.chromatic-deployment.outputs.chromatic-build-url }}';

.github/workflows/release-pages.yml

@@ -0,0 +1,186 @@
+name: Deploy to GitHub Pages
+description: Build and deploy to GitHub Pages and Vercel on successful completion of tests and builds
+
+on:
+  # Triggers when any of these workflows complete on main branch
+  # Runs ONCE per workflow completion (e.g., if "Vitest Tests" completes, this workflow runs once)
+  workflow_run:
+    workflows: ['Storybook and Chromatic CI', 'Vitest Tests', 'Tests CI']
+    types: [completed]
+  # Allow direct pushes to the debug branch to kick off the full pipeline
+  push:
+    branches: [sno-deploy-ghpage]
+  # Keep manual trigger for debugging
+  workflow_dispatch:
+
+jobs:
+  incremental-build:
+    runs-on: ubuntu-latest
+    # Only run if the triggering workflow succeeded (or manual dispatch/push)
+    if: github.event_name == 'workflow_dispatch' || github.event_name == 'push' || github.event.workflow_run.conclusion == 'success'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Cache build artifacts
+        uses: actions/cache@v4
+        with:
+          path: |
+            .pages
+            storybook-static
+            coverage
+          key: build-cache-${{ github.ref_name }}-${{ github.run_id }}-${{ hashFiles('pnpm-lock.yaml', 'package.json') }}
+          restore-keys: |
+            build-cache-${{ github.ref_name }}-
+            build-cache-main-
+
+      - name: Download Storybook artifact (source run)
+        id: fetch_storybook_trigger
+        continue-on-error: true
+        if: github.event_name == 'workflow_run' && github.event.workflow_run.name == 'Storybook and Chromatic CI'
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: storybook-and-chromatic-ci.yaml
+          name: storybook-static
+          run_id: ${{ github.event.workflow_run.id }}
+          path: storybook-static
+
+      - name: Download Storybook artifact (latest successful run on main)
+        continue-on-error: true
+        if: steps.fetch_storybook_trigger.outcome != 'success'
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: storybook-and-chromatic-ci.yaml
+          name: storybook-static
+          branch: main
+          workflow_conclusion: success
+          path: storybook-static
+
+      - name: Download Vitest reports (source run)
+        id: fetch_vitest_trigger
+        continue-on-error: true
+        if: github.event_name == 'workflow_run' && github.event.workflow_run.name == 'Vitest Tests'
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: vitest-tests.yaml
+          name: vitest-reports
+          run_id: ${{ github.event.workflow_run.id }}
+          path: ./.pages/vitest-reports
+
+      - name: Download Vitest reports (latest successful run on main)
+        continue-on-error: true
+        if: steps.fetch_vitest_trigger.outcome != 'success'
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: vitest-tests.yaml
+          name: vitest-reports
+          branch: main
+          workflow_conclusion: success
+          path: ./.pages/vitest-reports
+
+      - name: Download Playwright E2E reports (source run)
+        id: fetch_playwright_trigger
+        continue-on-error: true
+        if: github.event_name == 'workflow_run' && github.event.workflow_run.name == 'Tests CI'
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: ci-tests-e2e.yaml
+          name_is_regexp: true
+          name: playwright-report-.*
+          run_id: ${{ github.event.workflow_run.id }}
+          path: ./playwright-reports-temp
+
+      - name: Download Playwright E2E reports (latest successful run on main)
+        continue-on-error: true
+        if: steps.fetch_playwright_trigger.outcome != 'success'
+        uses: dawidd6/action-download-artifact@v6
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: ci-tests-e2e.yaml
+          name_is_regexp: true
+          name: playwright-report-.*
+          branch: main
+          workflow_conclusion: success
+          path: ./playwright-reports-temp
+
+      - name: Organize Playwright reports by browser
+        if: always()
+        run: |
+          mkdir -p ./.pages/playwright-reports
+
+          # Move each browser report to its own directory
+          if [ -d "./playwright-reports-temp" ]; then
+            for dir in ./playwright-reports-temp/playwright-report-*; do
+              if [ -d "$dir" ]; then
+                browser_name=$(basename "$dir" | sed 's/playwright-report-//')
+                mkdir -p "./.pages/playwright-reports/${browser_name}"
+                cp -r "$dir"/* "./.pages/playwright-reports/${browser_name}/"
+              fi
+            done
+          fi
+
+      - name: Build static assets (with artifact reuse)
+        run: ./scripts/build-pages.sh
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload built pages as cache
+        uses: actions/upload-pages-artifact@v4
+        with:
+          name: built-pages
+          path: '.pages'
+
+  deploy-vercel-app:
+    runs-on: ubuntu-latest
+    needs: incremental-build
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: download built pages
+        uses: actions/download-artifact@v4
+        with:
+          name: built-pages
+          path: ./artifact
+
+      - name: Extract artifact
+        run: |
+          mkdir -p ./.pages
+          cd ./artifact
+          tar -xf artifact.tar -C ../.pages
+
+      # debug ls of ./.pages
+      - name: List ./.pages contents
+        run: ls -la ./.pages
+
+      - name: Deploy to Vercel
+        uses: amondnet/vercel-action@v20
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          working-directory: .pages
+          vercel-args: ${{ github.ref_name == 'main' && '--prod' || '' }}
+          github-comment: true
+          alias-domains: |
+            ${{ github.ref_name }}-comfyui-frontend-reports.vercel.app