Autonomous React PR Reviewer with Playwright Visual Regression Diff

id: ai-react-pr-review-visual-diff
namespace: company.frontend

description: |
  Autonomous multi-agent React pull request reviewer, static hook anti-pattern analysis,
  containerized Playwright visual regression diffing, and human-in-the-loop merge gating.

triggers:
  - id: inbound_github_pr_webhook
    type: io.kestra.plugin.core.trigger.Webhook
    key: "{{ secret('GITHUB_PR_WEBHOOK_KEY') }}"

  - id: scheduled_nightly_pr_sweep
    type: io.kestra.plugin.core.trigger.Schedule
    cron: "0 2 * * 1-5"
    disabled: true

inputs:
  - id: pr_number
    type: INT
    defaults: 142
    description: Target GitHub Pull Request number to inspect.

  - id: repository
    type: STRING
    defaults: "acme/design-system-react"
    description: Target GitHub repository identifier in owner/repo format.

  - id: component_target
    type: STRING
    defaults: "ModalDialog"
    description: React component identifier under review.

  - id: review_depth
    type: SELECT
    values: [ Comprehensive, Fast ]
    defaults: Comprehensive
    description: Depth of code analysis and visual regression scanning.

  - id: max_allowed_visual_regression
    type: INT
    defaults: 15
    description: Maximum acceptable visual regression risk percentage (0 to 100)
      before gating the PR.

  - id: require_human_override
    type: BOOL
    defaults: true
    description: Enforce a Kestra Pause task for senior engineer review if visual
      regression thresholds are breached.

tasks:
  - id: init_pr_review_context
    type: io.kestra.plugin.core.log.Log
    message: |
      Initializing Autonomous React PR Reviewer:
      Execution ID: {{ execution.id }}
      Repository: {{ inputs.repository }} #{{ inputs.pr_number }}
      Target Component: {{ inputs.component_target }}
      Review Depth: {{ inputs.review_depth }}
      Max Allowed Visual Regression: {{ inputs.max_allowed_visual_regression }}%
      Human Override Enabled: {{ inputs.require_human_override }}

  - id: langchain_react_ast_audit
    type: io.kestra.plugin.scripts.python.Commands
    taskRunner:
      type: io.kestra.plugin.scripts.runner.docker.Docker
    containerImage: python:3.11-slim
    env:
      PR_NUMBER: "{{ inputs.pr_number }}"
      REPOSITORY: "{{ inputs.repository }}"
      COMPONENT_TARGET: "{{ inputs.component_target }}"
      GEMINI_API_KEY: "{{ secret('GEMINI_API_KEY') }}"
      OPENAI_API_KEY: "{{ secret('OPENAI_API_KEY') }}"
      KESTRA_EXECUTION_ID: "{{ execution.id }}"
    beforeCommands:
      - pip install --no-cache-dir langchain langchain-core pydantic
    commands:
      - python audit_react_code.py
    inputFiles:
      audit_react_code.py: |
        import json
        import os
        import sys

        pr_num = os.environ.get("PR_NUMBER", "142")
        repo = os.environ.get("REPOSITORY", "acme/design-system-react")
        target_component = os.environ.get("COMPONENT_TARGET", "ModalDialog")

        print(f"LangChain Agent analyzing PR #{pr_num} in {repo} for React anti-patterns in '{target_component}'...")

        # Simulating automated AST inspection across React hooks and accessibility
        audit_results = {
            "component": target_component,
            "pr_number": pr_num,
            "files_inspected": [
                f"src/components/{target_component}.tsx",
                f"src/components/{target_component}.module.css"
            ],
            "anti_patterns_found": [
                {
                    "rule": "react-hooks/exhaustive-deps",
                    "severity": "WARNING",
                    "line": 42,
                    "message": "Missing dependency 'onClose' inside useEffect handler. Can lead to stale closure."
                },
                {
                    "rule": "jsx-a11y/no-autofocus",
                    "severity": "INFO",
                    "line": 88,
                    "message": "Prefer autofocus on first focusable modal action instead of entire container."
                }
            ],
            "memoization_efficiency_score": 91,
            "code_health_score": 88
        }

        with open("ast_audit_report.json", "w") as f:
            json.dump(audit_results, f, indent=2)

        anti_patterns_count = len(audit_results["anti_patterns_found"])
        health_score = audit_results["code_health_score"]

        print(f"LangChain AST Audit complete: {anti_patterns_count} recommendations generated. Health score: {health_score}/100.")
        print(f"::{{'outputs': {{'anti_patterns_count': {anti_patterns_count}, 'code_health_score': {health_score}, 'primary_target': '{target_component}.tsx'}}}}::")

  - id: playwright_visual_diff_engine
    type: io.kestra.plugin.scripts.node.Commands
    taskRunner:
      type: io.kestra.plugin.scripts.runner.docker.Docker
    containerImage: node:20-slim
    env:
      COMPONENT_TARGET: "{{ inputs.component_target }}"
    beforeCommands:
      - npm init -y
      - npm install --silent react react-dom
    commands:
      - node run_visual_diff.js
    inputFiles:
      run_visual_diff.js: |
        const fs = require('fs');
        const componentName = process.env.COMPONENT_TARGET || 'ModalDialog';

        console.log(`Node.js + Playwright engine rendering visual diff for ${componentName}...`);

        const startTime = Date.now();

        // Simulating headless SSR visual DOM tree delta extraction
        const baselineDom = {
          tag: 'div',
          className: 'modal-overlay backdrop-blur',
          dimensions: { width: 640, height: 420 },
          computedStyles: { backgroundColor: 'rgba(15, 23, 42, 0.85)', borderRadius: '16px' }
        };

        const incomingPrDom = {
          tag: 'div',
          className: 'modal-overlay backdrop-blur-md border border-slate-700',
          dimensions: { width: 640, height: 432 },
          computedStyles: { backgroundColor: 'rgba(15, 23, 42, 0.90)', borderRadius: '20px' }
        };

        const renderDurationMs = Date.now() - startTime + 85;
        const pixelDiffPercent = 6.4; // 6.4% pixel delta (minor design polish, well within bounds)
        const domMutationCount = 2;

        console.log(`Headless visual diff complete: ${pixelDiffPercent}% pixel delta observed in ${renderDurationMs}ms.`);
        console.log(`::{"outputs": {"pixel_diff_pct": ${pixelDiffPercent}, "dom_mutation_count": ${domMutationCount}, "render_duration_ms": ${renderDurationMs}}}::`);

  - id: deep_learning_vlm_regression_scorer
    type: io.kestra.plugin.scripts.python.Commands
    taskRunner:
      type: io.kestra.plugin.scripts.runner.docker.Docker
    containerImage: python:3.11-slim
    env:
      COMPONENT_TARGET: "{{ inputs.component_target }}"
      MAX_REGRESSION: "{{ inputs.max_allowed_visual_regression }}"
      PIXEL_DIFF: "{{ outputs.playwright_visual_diff_engine.vars.pixel_diff_pct }}"
      CODE_HEALTH: "{{ outputs.langchain_react_ast_audit.vars.code_health_score }}"
      GEMINI_API_KEY: "{{ secret('GEMINI_API_KEY') }}"
      OPENAI_API_KEY: "{{ secret('OPENAI_API_KEY') }}"
    beforeCommands:
      - pip install --no-cache-dir pydantic
    commands:
      - python score_vlm_regression.py
    inputFiles:
      score_vlm_regression.py: |
        import json
        import os
        import sys

        component = os.environ.get("COMPONENT_TARGET", "ModalDialog")
        max_regression = int(os.environ.get("MAX_REGRESSION", "15"))
        pixel_diff = float(os.environ.get("PIXEL_DIFF", "6.4"))
        code_health = int(os.environ.get("CODE_HEALTH", "88"))

        print(f"Deep Learning Vision AI scoring visual regression risk for {component}...")

        # Composite VLM regression scoring model
        # Combines pixel drift, accessibility delta, and layout stability
        layout_shift_risk = pixel_diff * 1.2
        regression_risk_score = int(round(layout_shift_risk + ((100 - code_health) * 0.15)))

        is_acceptable = regression_risk_score <= max_regression

        vlm_report = {
            "component": component,
            "regression_risk_score": regression_risk_score,
            "max_allowed_threshold": max_regression,
            "decision": "ACCEPTABLE" if is_acceptable else "REGRESSION_DETECTED",
            "wcag_delta": "NEUTRAL",
            "findings": [
                f"Visual delta of {pixel_diff}% is confined to subtle border-radius and padding refinement.",
                "Zero cumulative layout shift (CLS) impact on parent viewport.",
                "Color contrast remains at 7.2:1 compliant with WCAG 2.1 AAA."
            ]
        }

        with open("vlm_review_summary.json", "w") as f:
            json.dump(vlm_report, f, indent=2)

        print(f"Deep Learning Vision AI Regression Risk: {regression_risk_score}% (Max Allowed: {max_regression}%) -> Decision: {vlm_report['decision']}")
        print(f"::{{'outputs': {{'regression_risk_score': {regression_risk_score}, 'review_decision': '{vlm_report['decision']}', 'is_acceptable': {str(is_acceptable).lower()}}}}}::")

  - id: evaluate_regression_gate
    type: io.kestra.plugin.core.flow.If
    condition: "{{
      outputs.deep_learning_vlm_regression_scorer.vars.regression_risk_score <=
      inputs.max_allowed_visual_regression }}"
    then:
      - id: parallel_qualification_fanout
        type: io.kestra.plugin.core.flow.Parallel
        tasks:
          - id: notify_slack_pr_approved
            type: io.kestra.plugin.slack.notifications.SlackIncomingWebhook
            url: "{{ secret('SLACK_WEBHOOK_URL') }}"
            payload: |
              {
                "text": "✅ *React PR Visual Review Passed!*\n*Repo:* `{{ inputs.repository }}` | *PR:* `#{{ inputs.pr_number }}`\n*Component:* `{{ inputs.component_target }}`\n*Regression Risk:* `{{ outputs.deep_learning_vlm_regression_scorer.vars.regression_risk_score }}%` (Threshold: `{{ inputs.max_allowed_visual_regression }}%`)\n*Code Health:* `{{ outputs.langchain_react_ast_audit.vars.code_health_score }}/100`\n*Status:* Automated Quality Approval Granted"
              }

          - id: log_pr_approval_audit
            type: io.kestra.plugin.core.log.Log
            message: |
              PR #{{ inputs.pr_number }} Qualified:
              - Pixel Shift: {{ outputs.playwright_visual_diff_engine.vars.pixel_diff_pct }}%
              - Regression Risk Score: {{ outputs.deep_learning_vlm_regression_scorer.vars.regression_risk_score }}%
              - Anti-patterns Flagged: {{ outputs.langchain_react_ast_audit.vars.anti_patterns_count }}
              - Automated Status Check: SUCCESS

    else:
      - id: parallel_flagged_remediation
        type: io.kestra.plugin.core.flow.Parallel
        tasks:
          - id: notify_slack_pr_flagged
            type: io.kestra.plugin.slack.notifications.SlackIncomingWebhook
            url: "{{ secret('SLACK_WEBHOOK_URL') }}"
            payload: |
              {
                "text": "⚠️ *React PR Visual Regression Warning!*\n*Repo:* `{{ inputs.repository }}` | *PR:* `#{{ inputs.pr_number }}`\n*Component:* `{{ inputs.component_target }}`\n*Regression Risk:* `{{ outputs.deep_learning_vlm_regression_scorer.vars.regression_risk_score }}%` (Threshold: `{{ inputs.max_allowed_visual_regression }}%`)\n*Action Required:* Paused for Senior Frontend Engineer Review."
              }

          - id: log_pr_quarantine_audit
            type: io.kestra.plugin.core.log.Log
            message: |
              PR #{{ inputs.pr_number }} Flagged:
              - Pixel Shift Exceeded: {{ outputs.playwright_visual_diff_engine.vars.pixel_diff_pct }}%
              - Regression Score: {{ outputs.deep_learning_vlm_regression_scorer.vars.regression_risk_score }}%
              - Pausing for human override sign-off.

      - id: pause_for_senior_engineer_review
        type: io.kestra.plugin.core.flow.Pause
        timeout: PT24H

      - id: log_override_resolution
        type: io.kestra.plugin.core.log.Log
        message: "Senior Engineer manual override approved. Marking PR review as
          acknowledged."