chore: integrate parviz design tokens

.github/workflows/perf-budgets.yml

@@ -0,0 +1,80 @@
+name: Performance Budgets
+
+on:
+  pull_request:
+    branches: [ main ]
+    paths:
+      - 'frontend/**'
+      - '.github/workflows/perf-budgets.yml'
+
+jobs:
+  build-and-test-perf:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        working-directory: frontend
+        run: npx playwright install --with-deps chromium
+
+      - name: Cache Next.js build
+        uses: actions/cache@v4
+        with:
+          path: frontend/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('frontend/package-lock.json') }}-${{ hashFiles('frontend/**.[jt]s?(x)') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('frontend/package-lock.json') }}-
+
+      - name: Build Next.js app
+        working-directory: frontend
+        run: npm run build
+        env:
+          NEXT_PUBLIC_APP_VERSION: ${{ github.sha }}
+          NEXT_PUBLIC_ENV: ci
+
+      - name: Start Next.js server (background)
+        working-directory: frontend
+        run: npm run start &
+        env:
+          PORT: 3000
+
+      - name: Wait for server to be ready
+        run: npx wait-on tcp:3000
+
+      - name: Run Playwright Perf Tests
+        working-directory: frontend
+        env:
+          PERF_RESULTS_PATH: ../perf/perf-results.json
+        run: npx playwright test --grep "@perf"
+
+      - name: Validate Budgets
+        id: validate
+        run: node tools/scripts/validate-budgets.js
+        continue-on-error: true
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: perf-results
+          path: |
+            frontend/test-results/
+            perf/perf-results.json
+
+      - name: Enforce Budgets
+        if: steps.validate.outcome == 'failure'
+        run: exit 1
+

frontend/next.config.mjs

@@ -15,6 +15,9 @@ const nextConfig = {
     ],
   },
   assetPrefix: '',
+  experimental: {
+    instrumentationHook: true,
+  },
   async headers() {
     const corsHeaders = [
       { key: 'Access-Control-Allow-Origin', value: '*' },

frontend/package.json

@@ -24,7 +24,16 @@
     "@emotion/styled": "^11.13.0",
     "@graphql-codegen/cli": "^6.0.1",
     "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/context-zone": "^1.19.0",
+    "@opentelemetry/core": "^1.19.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.52.1",
+    "@opentelemetry/instrumentation": "^0.52.1",
+    "@opentelemetry/instrumentation-fetch": "^0.52.1",
+    "@opentelemetry/resources": "^1.19.0",
+    "@opentelemetry/sdk-trace-base": "^1.19.0",
+    "@opentelemetry/sdk-trace-node": "^1.19.0",
+    "@opentelemetry/sdk-trace-web": "^1.19.0",
+    "@opentelemetry/semantic-conventions": "^1.19.0",
     "@react-three/drei": "^9.97.3",
     "@react-three/fiber": "^8.15.14",
     "@shopify/hydrogen-react": "^2025.7.0",