ci(medium): Implement Gemini Multimodal UI Review

.github/workflows/comment-ops.yml

@@ -28,26 +28,34 @@ jobs:
       is_coder: ${{ steps.route.outputs.is_coder || 'false' }}
       is_review_issues: ${{ steps.route.outputs.is_review_issues || 'false' }}
       is_enrich: ${{ steps.route.outputs.is_enrich || 'false' }}
+      is_ui_review: ${{ steps.route.outputs.is_ui_review || 'false' }}
       is_help: ${{ steps.route.outputs.is_help || 'false' }}
     steps:
       - id: route
         env:
           BODY: ${{ github.event.comment.body }}
         run: |
-          # Use case-insensitive grep and ensure outputs are always set if matched.
-          # We check for commands starting at the beginning of a line to avoid accidental triggers
-          # from quotes or descriptive text mentioning the bots.
-          if echo "$BODY" | grep -qiE "(^|\r?\n)@(gemini-bot|gemini-review)"; then echo "is_review=true" >> $GITHUB_OUTPUT; fi
-          if echo "$BODY" | grep -qiE "(^|\r?\n)@pr-squash"; then echo "is_squash=true" >> $GITHUB_OUTPUT; fi
-          if echo "$BODY" | grep -qiE "(^|\r?\n)@conflict-resolve"; then echo "is_resolve=true" >> $GITHUB_OUTPUT; fi
-          if echo "$BODY" | grep -qiE "^@gemini-triage"; then echo "is_triage=true" >> $GITHUB_OUTPUT; fi
-          if echo "$BODY" | grep -qiE "^@gemini-coder"; then echo "is_coder=true" >> $GITHUB_OUTPUT; fi
-          if echo "$BODY" | grep -qiE "^@create-review-issues"; then echo "is_review_issues=true" >> $GITHUB_OUTPUT; fi
-          if echo "$BODY" | grep -qiE "^@gemini-enrich"; then echo "is_enrich=true" >> $GITHUB_OUTPUT; fi
-          if echo "$BODY" | grep -qiE "^@gemini-help"; then echo "is_help=true" >> $GITHUB_OUTPUT; fi
-
-          # Set consolidated trigger flag for status jobs
-          if echo "$BODY" | grep -qiE "(^|\r?\n)@(gemini-bot|gemini-review|pr-squash|conflict-resolve|gemini-triage|gemini-coder|create-review-issues|gemini-enrich|gemini-help)"; then
+          COMMANDS=(
+            "(gemini-bot|gemini-review):review"
+            "pr-squash:squash"
+            "conflict-resolve:resolve"
+            "gemini-triage:triage"
+            "gemini-coder:coder"
+            "create-review-issues:review_issues"
+            "gemini-enrich:enrich"
+            "gemini-ui-review:ui_review"
+            "gemini-help:help"
+          )
+
+          for cmd in "${COMMANDS[@]}"; do
+            KEY=${cmd%%:*}
+            VAR=${cmd#*:}
+            if echo "$BODY" | grep -qiE "(^|\r?\n)@$KEY"; then
+              echo "is_$VAR=true" >> $GITHUB_OUTPUT
+            fi
+          done
+
+          if grep -q "true" "$GITHUB_OUTPUT"; then
             echo "is_command_triggered=true" >> $GITHUB_OUTPUT
           fi
 
@@ -100,6 +108,12 @@ jobs:
       manual_trigger: true
     secrets: inherit
 
+  execute-ui-review:
+    needs: [router]
+    if: github.event.issue.pull_request && needs.router.outputs.is_ui_review == 'true'
+    uses: ./.github/workflows/gemini-ui-review.yml
+    secrets: inherit
+
   prepare-coder:
     needs: [router]
     if: needs.router.outputs.is_coder == 'true'
@@ -225,6 +239,7 @@ jobs:
               '| :--- | :--- |\n' +
               '| `@gemini-bot` | Run AI Code Review (PR only) |\n' +
               '| `@gemini-enrich` | Run PR Enrichment (PR only) |\n' +
+              '| `@gemini-ui-review` | Run Multimodal UI Review (PR only) |\n' +
               '| `@gemini-triage` | Run Issue Triage |\n' +
               '| `@gemini-coder <task>` | Generate Code |\n' +
               '| `@create-review-issues` | Create issues from review (PR only) |\n' +
@@ -301,6 +316,7 @@ jobs:
       - init-status
       - execute-review
       - execute-triage
+      - execute-ui-review
       - execute-coder
       - execute-create-review-issues
       - execute-help
@@ -331,6 +347,7 @@ jobs:
 
           check_job "Review" "${{ needs.execute-review.result }}" "${{ needs.router.outputs.is_review }}"
           check_job "Triage" "${{ needs.execute-triage.result }}" "${{ needs.router.outputs.is_triage }}"
+          check_job "UI Review" "${{ needs.execute-ui-review.result }}" "${{ needs.router.outputs.is_ui_review }}"
           check_job "Coder" "${{ needs.execute-coder.result }}" "${{ needs.router.outputs.is_coder }}"
           check_job "Create Review Issues (Manual)" "${{ needs.execute-create-review-issues.result }}" "${{ needs.router.outputs.is_review_issues }}"
 

.github/workflows/gemini-ui-review.yml

@@ -0,0 +1,51 @@
+name: Gemini UI Review
+
+on:
+  workflow_call:
+  issue_comment:
+    types: [created]
+
+jobs:
+  ui-review:
+    if: |
+      (github.event_name == 'workflow_call') ||
+      (github.event.issue.pull_request && contains(github.event.comment.body, '@gemini-ui-review'))
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: read
+      issues: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Environment
+        uses: ./.github/actions/setup-env
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Get Deployment URL
+        id: deploy-url
+        run: |
+          PR_NUMBER=${{ github.event.issue.number || github.event.pull_request.number }}
+          BRANCH=$(gh pr view "$PR_NUMBER" --json headRefName --jq '.headRefName')
+
+          # Try to find target_url from the most recent deployment status for this branch
+          URL=$(gh api repos/${{ github.repository }}/deployments -q '.[] | select(.environment=="preview" and .ref=="'"$BRANCH"'") | .id' | head -n 1 | xargs -I {} gh api repos/${{ github.repository }}/deployments/{}/statuses -q 'map(select(.state == "success")) | .[0].target_url' 2>/dev/null || true)
+
+          if [ -z "$URL" ] || [ "$URL" == "null" ]; then
+            echo "::error::No successful deployment found for branch $BRANCH. UI Review requires a preview environment."
+            exit 1
+          fi
+
+          echo "url=$URL" >> $GITHUB_OUTPUT
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Run UI Review Script
+        env:
+          GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.issue.number || github.event.pull_request.number }}
+          DEPLOYMENT_URL: ${{ steps.deploy-url.outputs.url }}
+        run: npx tsx scripts/ci/run-ui-review.ts

package.json

@@ -104,6 +104,7 @@
     "@google/generative-ai": "0.24.1",
     "@jest/globals": "^30.2.0",
     "@next/bundle-analyzer": "^16.2.1",
+    "@octokit/rest": "^22.0.1",
     "@playwright/test": "^1.57.0",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-actions": "^8.6.14",