Skip to content

feat(medium): Refactor SpotifyDisplay and fix API security #7674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
arii merged 2 commits into from
Feb 11, 2026
Merged

feat(medium): Refactor SpotifyDisplay and fix API security #7674

arii merged 2 commits into from
Feb 11, 2026
+103 −61

Conversation

@arii
Copy link
Owner

@arii arii commented Feb 10, 2026 •
edited by github-actions bot
Loading

Description

This PR refactors the Spotify integration components to consolidate logic and improve security.
It addresses the following directives:

  • Dead Code: Wires up DeviceRecommendation and useSpotifyCommand.
  • Logic Duplication: Moves command sending logic from SpotifyDisplay to useSpotifyCommand.
  • Security: Adds server-side volume clamping.

Changes:

  • components/SpotifyDisplay.tsx: Replaced manual WebSocket calls with useSpotifyCommand hook. Added DeviceRecommendation component.
  • hooks/useSpotifyCommand.ts: Exposed connectionStatus.
  • app/api/spotify/control/route.ts: Added volume clamping.
  • components/Spotify/DeviceRecommendation.tsx: Now used in SpotifyDisplay.
  • tests/unit/components/SpotifyDisplay.test.tsx: Added test case for DeviceRecommendation.

Fixes #

Change Type: 🏗️ Refactoring (code change that neither fixes bug nor adds feature)

PR Scope Checklist

This checklist is mandatory for all PRs.

  • PR has a clear, single purpose: The title and description of the PR clearly state the purpose of the change.
  • All changes relate to the stated objective: The code changes should be directly related to the purpose of the PR.
  • No unrelated cleanup or refactoring: The PR should not contain any changes that are not directly related to the stated objective.
  • Title and description match the actual changes: The title and description should accurately reflect the changes in the PR.
  • Tests cover the specific change scope: The tests should be focused on the changes in the PR and should not include unrelated tests.

Impact Assessment

  • Changes are backward compatible (or breaking changes are documented)
  • Tests are added/updated for new functionality
  • Documentation is updated if needed
  • ADR is created/updated for significant architectural changes
Original PR Body

This PR refactors the Spotify integration components to consolidate logic and improve security.
It addresses the following directives:

  • Dead Code: Wires up DeviceRecommendation and useSpotifyCommand.
  • Logic Duplication: Moves command sending logic from SpotifyDisplay to useSpotifyCommand.
  • Security: Adds server-side volume clamping.

Changes:

  • components/SpotifyDisplay.tsx: Replaced manual WebSocket calls with useSpotifyCommand hook. Added DeviceRecommendation component.
  • hooks/useSpotifyCommand.ts: Exposed connectionStatus.
  • app/api/spotify/control/route.ts: Added volume clamping.
  • components/Spotify/DeviceRecommendation.tsx: Now used in SpotifyDisplay.
  • tests/unit/components/SpotifyDisplay.test.tsx: Added test case for DeviceRecommendation.

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

@google-labs-jules @arii
Refactor SpotifyDisplay and fix API security
1d42914 
- Refactor `components/SpotifyDisplay.tsx` to use `hooks/useSpotifyCommand.ts`, reducing code duplication and dead code.
- Integrate `components/Spotify/DeviceRecommendation.tsx` into `SpotifyDisplay` to providing a fallback connection button.
- Enhance `app/api/spotify/control/route.ts` with volume clamping (0-100) to prevent API errors.
- Update `hooks/useSpotifyCommand.ts` to expose `connectionStatus` and support robust command execution.
- Added unit tests for new DeviceRecommendation logic in `SpotifyDisplay`.

Co-authored-by: arii <342438+arii@users.noreply.github.com>
@google-labs-jules
Copy link
Contributor

google-labs-jules bot commented Feb 10, 2026

👋 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!

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

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

@github-actions github-actions bot changed the title Refactor SpotifyDisplay and fix API security feat(medium): Refactor SpotifyDisplay and fix API security Feb 10, 2026
@arii
Copy link
Owner Author

arii commented Feb 10, 2026

📋 Quality Gate Results

Check Status
Knip ✅ success
Lint ❌ failure
Slop ✅ success
Build ✅ success
Infra Tests ❌ skipped
Unit Tests ❌ skipped
Component Tests ❌ skipped
Perf Tests ❌ skipped
Visual Tests ❌ skipped

❌ Lint Failure Details


> hrm@0.30.0 lint /home/runner/work/hrm/hrm
> eslint app/ components/ constants/ context/ hooks/ lib/ services/ tests/ types/ utils/ server.ts proxy.ts --cache


/home/runner/work/hrm/hrm/components/SpotifyDisplay.tsx
  107:10  error  Replace `·execute,·playback:·spotifyData,·connectionStatus` with `⏎····execute,⏎····playback:·spotifyData,⏎····connectionStatus,⏎·`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

 ELIFECYCLE  Command failed with exit code 1.

❌ Infrastructure Test Failure Details

Log file not found.

❌ Unit Test Failure Details

Log file not found.

❌ Component Test Failure Details

Log file not found.

❌ Visual Test Failure Details

Log file not found.

❌ Performance Test Failure Details

Log file not found.

⚠️ Some checks failed. Full logs available in workflow artifacts.

Report generated for commit: 1d4291446cc8d0539947b9d5b2fdf5a0cf12b9f9

@google-labs-jules
Copy link
Contributor

google-labs-jules bot commented Feb 10, 2026

📋 Quality Gate Results

Check Status
Knip ✅ success
Lint ❌ failure
Slop ✅ success
Build ✅ success
Infra Tests ❌ skipped
Unit Tests ❌ skipped
Component Tests ❌ skipped
Perf Tests ❌ skipped
Visual Tests ❌ skipped

❌ Lint Failure Details


> hrm@0.30.0 lint /home/runner/work/hrm/hrm
> eslint app/ components/ constants/ context/ hooks/ lib/ services/ tests/ types/ utils/ server.ts proxy.ts --cache


/home/runner/work/hrm/hrm/components/SpotifyDisplay.tsx
  107:10  error  Replace `·execute,·playback:·spotifyData,·connectionStatus` with `⏎····execute,⏎····playback:·spotifyData,⏎····connectionStatus,⏎·`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

 ELIFECYCLE  Command failed with exit code 1.

❌ Infrastructure Test Failure Details

Log file not found.

❌ Unit Test Failure Details

Log file not found.

❌ Component Test Failure Details

Log file not found.

❌ Visual Test Failure Details

Log file not found.

❌ Performance Test Failure Details

Log file not found.

⚠️ Some checks failed. Full logs available in workflow artifacts.

Report generated for commit: 1d4291446cc8d0539947b9d5b2fdf5a0cf12b9f9

Fixed the linting error in components/SpotifyDisplay.tsx using eslint --fix.

@arii
Copy link
Owner Author

arii commented Feb 11, 2026

Fix lint errors

@google-labs-jules
Copy link
Contributor

google-labs-jules bot commented Feb 11, 2026

Fix lint errors

Lint errors have been fixed using eslint --fix and verified with a subsequent lint check. Build and unit tests passed.

@google-labs-jules @arii
Fix Prettier formatting in SpotifyDisplay.tsx
4ae1c61 
- Ran `eslint --fix` to resolve the multiline object destructuring error reported by CI.
- Reformatted `components/SpotifyDisplay.tsx` to match Prettier rules.

Co-authored-by: arii <342438+arii@users.noreply.github.com>
@arii arii marked this pull request as ready for review February 11, 2026 05:51
@arii arii merged commit 8800a66 into feature/unified-spotify-service-bus-4213671119605971049-8815256103587655470 Feb 11, 2026
19 checks passed
@arii arii deleted the feature-unified-spotify-service-bus-4213671119605971049-8815256103587655470-6043082155756456736 branch February 11, 2026 05:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@arii