Optimize Client-Side Rendering Performance

[google-labs-jules]

This change optimizes the client-side rendering performance of the HRM dashboard by implementing selective rendering. It introduces React.memo to high-frequency components and creates fine-grained, memoized data extraction hooks to prevent unnecessary re-renders when the global WebSocket state changes.

Fixes #570

---

PR created automatically by Jules for task 7691128888257890818 started by @arii

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

---

For security, I will only act on instructions from the user who triggered this task.

New to Jules? Learn more at jules.google/docs.

[arii]

Automated Verification Results — FAIL

@jules

Check	Status	Duration
npm run verify	[FAIL]	n/a

Verification Failed at: npm run verify

Failure Logs

> hrm@0.1.0 verify
> node scripts/verify-and-publish.cjs

🚀 Starting Self-Certifying Verifier...
🔒 Calculating source fingerprint...

🧪 Running Tests...

> hrm@0.1.0 test:json
> pnpm exec cross-env TESTING=true bash start-production.sh > /tmp/hrm-server.log 2>&1 & echo $! > /tmp/hrm-server.pid && npx wait-on http://$npm_package_config_host:$npm_package_config_port/api/debug/ping --timeout 20000 && npx playwright test --reporter=json > playwright-report.json; kill $(cat /tmp/hrm-server.pid) 2>/dev/null || true


❌ Failed Tests Details:

1. [infrastructure] npm run lint should pass
   Error:
     Error: Linting failed with status 1

2. [infrastructure] start-production.sh should start successfully
   Error:
     Error: Timeout waiting for port 3006


☁️  Publishing checks to GitHub...
   ✅ Published: verifier/infrastructure -> failure
   ✅ Published: verifier/visual-regression -> success
   ✅ Published: verifier/global -> failure
   ✅ Published: verifier/spotify-debug -> success
   ✅ Published: verifier/simple-smoke -> success

❌ Verification Failed.

Structure Analyzer

{"results": [{"name": "API route naming", "ok": true, "info": "All API routes should use route.ts files."}, {"name": "Auth route present", "ok": true, "info": "Auth route must exist at app/api/auth/[...nextauth]/route.ts."}, {"name": "Client control page present", "ok": true, "info": "Client control page should exist at app/client/control/page.tsx."}, {"name": "MUI usage in components", "ok": true, "info": "Components should use MUI imports where applicable."}], "failures": []}

[arii]

Automated Verification Results — FAIL

@jules

Check	Status	Duration
npm run verify	[FAIL]	n/a

Verification Failed at: npm run verify

Failure Logs

> hrm@0.1.0 verify
> node scripts/verify-and-publish.cjs

🚀 Starting Self-Certifying Verifier...
🔒 Calculating source fingerprint...

🧪 Running Tests...

> hrm@0.1.0 test:json
> pnpm exec cross-env TESTING=true bash start-production.sh > /tmp/hrm-server.log 2>&1 & echo $! > /tmp/hrm-server.pid && npx wait-on http://127.0.0.1:3000/api/debug/ping --timeout 20000 && npx playwright test --reporter=json > playwright-report.json; kill $(cat /tmp/hrm-server.pid) 2>/dev/null || true


❌ Failed Tests Details:

1. [infrastructure] start-production.sh should start successfully
   Error:
     Error: Timeout waiting for port 3006


☁️  Publishing checks to GitHub...
   ✅ Published: verifier/global -> failure
   ✅ Published: verifier/infrastructure -> failure
   ✅ Published: verifier/visual-regression -> success
   ✅ Published: verifier/spotify-debug -> success
   ✅ Published: verifier/simple-smoke -> success

❌ Verification Failed.

Structure Analyzer

{"results": [{"name": "API route naming", "ok": true, "info": "All API routes should use route.ts files."}, {"name": "Auth route present", "ok": true, "info": "Auth route must exist at app/api/auth/[...nextauth]/route.ts."}, {"name": "Client control page present", "ok": true, "info": "Client control page should exist at app/client/control/page.tsx."}, {"name": "MUI usage in components", "ok": true, "info": "Components should use MUI imports where applicable."}], "failures": []}

[arii]

Automated Verification Results — FAIL

@jules

Check	Status	Duration
npm run verify	[FAIL]	n/a

Verification Failed at: npm run verify

Failure Logs

> hrm@0.1.0 verify
> node scripts/verify-and-publish.cjs

🚀 Starting Self-Certifying Verifier...
🔒 Calculating source fingerprint...

🧪 Running Tests...

> hrm@0.1.0 test:json
> pnpm exec cross-env TESTING=true bash start-production.sh > /tmp/hrm-server.log 2>&1 & echo $! > /tmp/hrm-server.pid && npx wait-on http://127.0.0.1:$npm_package_config_port/api/debug/ping --timeout 20000 && npx playwright test --reporter=json > playwright-report.json; kill $(cat /tmp/hrm-server.pid) 2>/dev/null || true


❌ Failed Tests Details:

1. [infrastructure] start-production.sh should start successfully
   Error:
     Error: Timeout waiting for port 3006


☁️  Publishing checks to GitHub...
   ✅ Published: verifier/spotify-debug -> success
   ✅ Published: verifier/global -> failure
   ✅ Published: verifier/visual-regression -> success
   ✅ Published: verifier/infrastructure -> failure
   ✅ Published: verifier/simple-smoke -> success

❌ Verification Failed.

Structure Analyzer

{"results": [{"name": "API route naming", "ok": true, "info": "All API routes should use route.ts files."}, {"name": "Auth route present", "ok": true, "info": "Auth route must exist at app/api/auth/[...nextauth]/route.ts."}, {"name": "Client control page present", "ok": true, "info": "Client control page should exist at app/client/control/page.tsx."}, {"name": "MUI usage in components", "ok": true, "info": "Components should use MUI imports where applicable."}], "failures": []}

[arii]

Closes #570

Linked by RepoAuditor AI

[arii]

Automated Verification Results — FAIL

@jules

Check	Status	Duration
npm run verify	[FAIL]	n/a

Verification Failed at: npm run verify

Failure Logs

> hrm@0.1.0 verify
> node scripts/verify-and-publish.cjs

🚀 Starting Self-Certifying Verifier...
🧹 Cleaning build artifacts for fresh results...
🔒 Calculating source fingerprint...

🔨 Building project...

> hrm@0.1.0 build
> npm run build:server && next build


> hrm@0.1.0 build:server
> pnpm exec tsc -p tsconfig.build.json && cp dist/server.js dist/server.mjs

[baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline data, please update: `npm i baseline-browser-mapping@latest -D`
   ▲ Next.js 16.0.1 (Turbopack)
   - Environments: .env.local, .env.production

 ⚠ The "middleware" file convention is deprecated. Please use "proxy" instead. Learn more: https://nextjs.org/docs/messages/middleware-to-proxy
   Creating an optimized production build ...
[baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline data, please update: `npm i baseline-browser-mapping@latest -D`
 ✓ Compiled successfully in 8.0s
   Running TypeScript ...
Failed to compile.

./hooks/useSpotifyData.ts:19:32
Type error: Property 'albumArtUrl' does not exist on type 'SpotifyData'.

�[0m �[90m 17 |�[39m       artist�[33m:�[39m spotifyData�[33m.�[39martist�[33m,�[39m
 �[90m 18 |�[39m       isPlaying�[33m:�[39m spotifyData�[33m.�[39misPlaying�[33m,�[39m
�[31m�[1m>�[22m�[39m�[90m 19 |�[39m       albumArtUrl�[33m:�[39m spotifyData�[33m.�[39malbumArtUrl�[33m,�[39m
 �[90m    |�[39m                                �[31m�[1m^�[22m�[39m
 �[90m 20 |�[39m       durationMs�[33m:�[39m spotifyData�[33m.�[39mdurationMs�[33m,�[39m
 �[90m 21 |�[39m       progressMs�[33m:�[39m spotifyData�[33m.�[39mprogressMs�[33m,�[39m
 �[90m 22 |�[39m     }�[0m
Next.js build worker exited with code: 1 and signal: null
❌ Build failed

Structure Analyzer

{"results": [{"name": "API route naming", "ok": true, "info": "All API routes should use route.ts files."}, {"name": "Auth route present", "ok": true, "info": "Auth route must exist at app/api/auth/[...nextauth]/route.ts."}, {"name": "Client control page present", "ok": true, "info": "Client control page should exist at app/client/control/page.tsx."}, {"name": "MUI usage in components", "ok": true, "info": "Components should use MUI imports where applicable."}], "failures": []}

[arii]

Closes #570

Linked by RepoAuditor AI

[arii]

Closes #570

Linked by RepoAuditor AI

[arii]

Automated Verification Results — PASS

Check	Status	Duration
Verification	[SKIPPED]	0s

All checks passed! Ready for review.

[arii]

Closes #570

Linked by RepoAuditor AI