[feat] Implement workflow_run for both start and completion events

- Updated pr-playwright-comment.yaml to trigger on both 'requested' and 'completed' events
- Updated pr-storybook-comment.yaml to trigger on both 'requested' and 'completed' events
- Added conditional logic to post different messages for workflow start vs completion
- Added "Tests are starting..." message when workflows begin
- Added "Build is starting..." message for Storybook builds
- Maintained existing completion logic with full test results and reports

This allows users to see immediate feedback when their workflows start running,
improving the user experience by providing real-time status updates.

🤖 Generated with [Claude Code](https://claude.ai/code)

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

Author: snomiao

.github/workflows/pr-playwright-comment.yaml

@@ -3,7 +3,7 @@ name: PR Playwright Comment
 on:
   workflow_run:
     workflows: ["Tests CI"]
-    types: [completed]
+    types: [requested, completed]
 
 env:
   DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
@@ -36,7 +36,7 @@ jobs:
             return pullRequests[0].number;
 
       - name: Download all deployment info
-        if: steps.pr.outputs.result != 'null'
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         uses: actions/download-artifact@v4
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -49,9 +49,29 @@ jobs:
         id: completion-time
         run: echo "time=$(date -u '${{ env.DATE_FORMAT }}')" >> $GITHUB_OUTPUT
 
-      - name: Generate comment body
-        if: steps.pr.outputs.result != 'null'
-        id: comment-body
+      - name: Generate comment body for start
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        id: comment-body-start
+        run: |
+          echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
+          echo "## 🎭 Playwright Test Results" >> comment.md
+          echo "" >> comment.md
+          echo "⏳ **Tests are starting...** " >> comment.md
+          echo "" >> comment.md
+          echo "⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC" >> comment.md
+          echo "" >> comment.md
+          echo "### 🚀 Running Tests" >> comment.md
+          echo "- 🧪 **chromium**: Running tests..." >> comment.md
+          echo "- 🧪 **chromium-0.5x**: Running tests..." >> comment.md
+          echo "- 🧪 **chromium-2x**: Running tests..." >> comment.md
+          echo "- 🧪 **mobile-chrome**: Running tests..." >> comment.md
+          echo "" >> comment.md
+          echo "---" >> comment.md
+          echo "⏱️ Please wait while tests are running across all browsers..." >> comment.md
+
+      - name: Generate comment body for completion
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
+        id: comment-body-completed
         run: |
           echo "<!-- PLAYWRIGHT_TEST_STATUS -->" > comment.md
           echo "## 🎭 Playwright Test Results" >> comment.md
@@ -107,8 +127,19 @@ jobs:
             echo "⚠️ Please check the test reports for details on failures." >> comment.md
           fi
 
+      - name: Comment PR - Tests Started
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        continue-on-error: true
+        uses: edumserrano/find-create-or-update-comment@v3
+        with:
+          issue-number: ${{ steps.pr.outputs.result }}
+          body-includes: '<!-- PLAYWRIGHT_TEST_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body-path: comment.md
+
       - name: Comment PR - Tests Complete
-        if: steps.pr.outputs.result != 'null'
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         continue-on-error: true
         uses: edumserrano/find-create-or-update-comment@v3
         with:

.github/workflows/pr-storybook-comment.yaml

@@ -3,7 +3,7 @@ name: PR Storybook Comment
 on:
   workflow_run:
     workflows: ["Chromatic"]
-    types: [completed]
+    types: [requested, completed]
 
 jobs:
   comment-storybook:
@@ -33,7 +33,7 @@ jobs:
             return pullRequests[0].number;
 
       - name: Get workflow run details
-        if: steps.pr.outputs.result != 'null'
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         id: workflow-run
         uses: actions/github-script@v7
         with:
@@ -53,8 +53,33 @@ jobs:
         id: completion-time
         run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
 
+      - name: Comment PR - Storybook Started
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'requested'
+        continue-on-error: true
+        uses: edumserrano/find-create-or-update-comment@v3
+        with:
+          issue-number: ${{ steps.pr.outputs.result }}
+          body-includes: '<!-- STORYBOOK_BUILD_STATUS -->'
+          comment-author: 'github-actions[bot]'
+          edit-mode: replace
+          body: |
+            <!-- STORYBOOK_BUILD_STATUS -->
+            ## 🎨 Storybook Build Status
+
+            ⏳ **Build is starting...** 
+
+            ⏰ Started at: ${{ steps.completion-time.outputs.time }} UTC
+
+            ### 🚀 Building Storybook
+            - 📦 Installing dependencies...
+            - 🔧 Building Storybook components...
+            - 🎨 Running Chromatic visual tests...
+
+            ---
+            ⏱️ Please wait while the Storybook build is in progress...
+
       - name: Comment PR - Storybook Complete
-        if: steps.pr.outputs.result != 'null'
+        if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'
         continue-on-error: true
         uses: edumserrano/find-create-or-update-comment@v3
         with: