Improve benchmark dashboard UI (#4427)

## Changes

### Benchmark data pipeline
(`packages/benchmark/src/generate-history.ts`)
- Added `specMetrics` per-entry and `specNames` to `HistoryData` for
per-spec drill-down

### Dashboard UI (`website/src/components/benchmarks/`)
- **Per-spec filtering** — dropdown to view individual spec or averaged
data
- **Time range filter** — Last 30 days / 90 days / All time
- **Dark mode support** — replaced hardcoded inline styles with CSS
using Fluent UI variables
- **Better x-axis** — shows dates instead of commit SHAs; commit hash +
GitHub link in tooltips
- **Loading/error UX** — CSS spinner, retry button, improved error
messages
- **URL state sync** — tab, spec, and time range reflected in URL params
for shareable links

### Files changed
- `packages/benchmark/src/generate-history.ts` — per-spec metrics in
history.json
- `website/src/components/benchmarks/benchmark-dashboard.tsx` — full UI
rewrite
- `website/src/components/benchmarks/benchmark-dashboard.css` — new
stylesheet (Fluent UI tokens)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: timotheeguerin

.github/workflows/benchmark.yml

@@ -8,6 +8,17 @@ on:
     branches:
       - main
       - release/*
+  workflow_dispatch:
+    inputs:
+      backfill_from:
+        description: "Backfill from: commit SHA or number of recent commits. Leave empty to run a normal benchmark."
+        required: false
+        type: string
+      branch:
+        description: "Data branch to store results (default: benchmark-data)"
+        required: false
+        type: string
+        default: "benchmark-data"
 
 permissions:
   contents: write
@@ -37,7 +48,19 @@ jobs:
       - name: Build
         run: pnpm -r --filter "@azure-tools/typespec-benchmark..." build
 
+      - name: Run backfill
+        if: ${{ github.event_name == 'workflow_dispatch' && inputs.backfill_from }}
+        run: |
+          node packages/benchmark/dist/src/cli.js backfill \
+            --from ${{ inputs.backfill_from }} \
+            --specs-dir packages/benchmark/specs \
+            --iterations 15 \
+            --warmup 1 \
+            --branch ${{ inputs.branch }} \
+            --push
+
       - name: Run benchmarks
+        if: ${{ github.event_name != 'workflow_dispatch' || !inputs.backfill_from }}
         run: |
           node packages/benchmark/dist/src/cli.js run \
             --specs-dir packages/benchmark/specs \
@@ -50,95 +73,23 @@ jobs:
       - name: Store benchmark results
         if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         run: |
-          COMMIT_SHA=${{ github.sha }}
-          RESULTS_FILE="/tmp/benchmark-results.json"
-
-          # Configure git
-          git config user.name "github-actions[bot]"
-          git config user.email "github-actions[bot]@users.noreply.github.com"
-
-          # Check if benchmark-data branch exists
-          if git ls-remote --exit-code --heads origin benchmark-data > /dev/null 2>&1; then
-            git fetch origin benchmark-data
-            git worktree add /tmp/bench-data origin/benchmark-data
-          else
-            # Create orphan branch
-            git worktree add --detach /tmp/bench-data
-            cd /tmp/bench-data
-            git checkout --orphan benchmark-data
-            git rm -rf . 2>/dev/null || true
-            mkdir -p results
-            echo "# Benchmark Data" > README.md
-            echo "" >> README.md
-            echo "This branch stores TypeSpec benchmark results. Do not merge into main." >> README.md
-            git add README.md
-            git commit -m "Initialize benchmark-data branch"
-            cd -
-          fi
-
-          # Copy results
-          mkdir -p /tmp/bench-data/results
-          cp "$RESULTS_FILE" "/tmp/bench-data/results/${COMMIT_SHA}.json"
-          cp "$RESULTS_FILE" "/tmp/bench-data/results/latest.json"
-
-          # Generate aggregated history.json for the website
-          cd "$GITHUB_WORKSPACE"
-          node packages/benchmark/dist/src/cli.js generate-history /tmp/bench-data/results/history.json --dir /tmp/bench-data/results
-
-          # Commit and push
-          cd /tmp/bench-data
-          git add results/
-          git commit -m "Benchmark results for ${COMMIT_SHA}"
-          git push origin HEAD:benchmark-data
+          node packages/benchmark/dist/src/cli.js store-results \
+            --results /tmp/benchmark-results.json \
+            --commit ${{ github.sha }}
 
       # On PR: fetch baseline, compare, and upload as artifact for the comment workflow
-      - name: Fetch baseline
+      - name: Generate PR comment
         if: github.event_name == 'pull_request'
-        id: fetch-baseline
-        run: |
-          if git ls-remote --exit-code --heads origin benchmark-data > /dev/null 2>&1; then
-            git fetch origin benchmark-data
-            git show origin/benchmark-data:results/latest.json > /tmp/benchmark-baseline.json 2>/dev/null && \
-              echo "has_baseline=true" >> "$GITHUB_OUTPUT" || \
-              echo "has_baseline=false" >> "$GITHUB_OUTPUT"
-          else
-            echo "has_baseline=false" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Compare benchmarks
-        if: github.event_name == 'pull_request' && steps.fetch-baseline.outputs.has_baseline == 'true'
         run: |
-          # Generate markdown comment
-          node packages/benchmark/dist/src/cli.js compare \
-            --baseline /tmp/benchmark-baseline.json \
-            --current /tmp/benchmark-results.json \
-            --format markdown \
-            --output /tmp/benchmark-comment.md
-
-          # Print console summary
-          node packages/benchmark/dist/src/cli.js compare \
-            --baseline /tmp/benchmark-baseline.json \
-            --current /tmp/benchmark-results.json
-
-      - name: Generate no-baseline comment
-        if: github.event_name == 'pull_request' && steps.fetch-baseline.outputs.has_baseline != 'true'
-        run: |
-          cat > /tmp/benchmark-comment.md << 'EOF'
-          ## ⚡ Benchmark Results
-
-          No baseline found on the `benchmark-data` branch. Benchmark results will be stored after merging to `main`.
-          EOF
-
-      - name: Save PR number
-        if: github.event_name == 'pull_request'
-        run: echo "${{ github.event.number }}" > /tmp/benchmark-pr-number.txt
+          node packages/benchmark/dist/src/cli.js upload-pr-comment \
+            --results /tmp/benchmark-results.json \
+            --pr-number ${{ github.event.number }} \
+            --output-dir /tmp/benchmark-artifacts
 
       - name: Upload benchmark comment
         if: github.event_name == 'pull_request'
         uses: actions/upload-artifact@v7
         with:
           name: benchmark-comment
-          path: |
-            /tmp/benchmark-comment.md
-            /tmp/benchmark-pr-number.txt
+          path: /tmp/benchmark-artifacts/
           retention-days: 1

packages/benchmark/README.md

@@ -76,15 +76,41 @@ Located in `specs/`:
 
 The `.github/workflows/benchmark.yml` workflow:
 
-- **On push to `main`**: Runs benchmarks and stores results to the `benchmark-data` branch
-- **On pull requests**: Runs benchmarks, compares with the latest `main` baseline, and posts a sticky PR comment with the comparison table
+- **On push to `main`**: Runs benchmarks and stores results to the `benchmark-data` branch via the `store-results` CLI command
+- **On pull requests**: Runs benchmarks, fetches the baseline, compares, and generates a PR comment via the `upload-pr-comment` CLI command
 
 ### Data storage
 
 Results are stored on the `benchmark-data` orphan branch:
 
 - `results/<commit-sha>.json` — per-commit results
 - `results/latest.json` — latest main baseline
+- `results/history.json` — aggregated history for the website
+
+### Backfill historical data
+
+To backfill benchmark results for past commits:
+
+```bash
+# Backfill last 100 commits (default)
+node packages/benchmark/dist/src/cli.js backfill
+
+# Backfill last 50 commits, then push
+node packages/benchmark/dist/src/cli.js backfill --from 50 --push
+
+# Backfill from a specific commit to HEAD of main
+node packages/benchmark/dist/src/cli.js backfill --from abc1234
+
+# Backfill a specific commit range
+node packages/benchmark/dist/src/cli.js backfill --from abc1234 --to def5678
+```
+
+The backfill command:
+
+1. Builds and saves the current benchmark CLI
+2. Checks out each historical commit, builds its dependencies, and runs benchmarks using the saved CLI
+3. Skips commits that already have results on the `benchmark-data` branch
+4. Commits all new results to the `benchmark-data` branch
 
 ## What gets measured