Investigate lighthouse checks automatic pr comments see detail for ai first pass - doable but not needed yet

[Phil-NHS]

because https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/
https://technologyenhancedlearning.github.io/TELBlazor/
we should be able to automate a comparison of key features and not need manual checks
or could generate the html and do something to do it as a comparison or difference

compare-performance-prod-vs-dev-lighthouse:
runs-on: ubuntu-latest
steps:
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '18'

  - name: Install Lighthouse CI
    run: npm install -g @lhci/cli lighthouse

  - name: Run Lighthouse on both sites
    run: |
      echo "Testing production baseline..."
      lighthouse https://technologyenhancedlearning.github.io/TELBlazor/ \
        --output json --output-path ./prod-results.json --chrome-flags="--headless"
      
      echo "Testing dev showcase..."
      lighthouse https://technologyenhancedlearning.github.io/TELBlazor-DevShowCase/ \
        --output json --output-path ./dev-results.json --chrome-flags="--headless"

  - name: Compare and comment results
    uses: actions/github-script@v6
    with:
      script: |
        const fs = require('fs');
        
        // Read both results
        const prodData = JSON.parse(fs.readFileSync('./prod-results.json', 'utf8'));
        const devData = JSON.parse(fs.readFileSync('./dev-results.json', 'utf8'));
        
        // Extract key metrics
        const prodMetrics = {
          performance: Math.round(prodData.categories.performance.score * 100),
          lcp: Math.round(prodData.audits['largest-contentful-paint'].numericValue),
          tbt: Math.round(prodData.audits['total-blocking-time'].numericValue),
          cls: Math.round(prodData.audits['cumulative-layout-shift'].numericValue * 1000) / 1000
        };
        
        const devMetrics = {
          performance: Math.round(devData.categories.performance.score * 100),
          lcp: Math.round(devData.audits['largest-contentful-paint'].numericValue),
          tbt: Math.round(devData.audits['total-blocking-time'].numericValue),
          cls: Math.round(devData.audits['cumulative-layout-shift'].numericValue * 1000) / 1000
        };
        
        // Calculate differences
        const perfDiff = devMetrics.performance - prodMetrics.performance;
        const lcpDiff = devMetrics.lcp - prodMetrics.lcp;
        const tbtDiff = devMetrics.tbt - prodMetrics.tbt;
        
        // Determine status
        let status = '✅ Performance maintained';
        let alert = '';
        
        if (perfDiff < -10 || lcpDiff > 1000 || tbtDiff > 500) {
          status = '⚠️ Significant performance regression detected!';
          alert = '\n\n**Action needed:** Consider optimizing before merge.';
        } else if (perfDiff < -5 || lcpDiff > 500 || tbtDiff > 200) {
          status = '⚡ Minor performance impact detected';
          alert = '\n\n**Note:** Small performance difference - monitor if this trend continues.';
        } else if (perfDiff > 5 || lcpDiff < -500) {
          status = '🚀 Performance improvement detected!';
        }
        
        const comment = `## 📊 Performance Comparison Report

Metric	Production	Dev Showcase	Difference
Performance Score	${prodMetrics.performance}/100	${devMetrics.performance}/100	${perfDiff > 0 ? '+' : ''}${perfDiff}
LCP	${prodMetrics.lcp}ms	${devMetrics.lcp}ms	${lcpDiff > 0 ? '+' : ''}${lcpDiff}ms
TBT	${prodMetrics.tbt}ms	${devMetrics.tbt}ms	${tbtDiff > 0 ? '+' : ''}${tbtDiff}ms
CLS	${prodMetrics.cls}	${devMetrics.cls}	${(devMetrics.cls - prodMetrics.cls).toFixed(3)}

Status: ${status}${alert}

🔍 View detailed reports

• Production Lighthouse Report
• Dev Showcase Lighthouse Report

`;

        if (context.payload.pull_request) {
          github.rest.issues.createComment({
            issue_number: context.issue.number,
            owner: context.repo.owner,
            repo: context.repo.repo,
            body: comment
          });
        } else {
          console.log(comment);
        }