fix(ux/opportunities): re-query on filter change and persist to URL

[cristim]

Summary

The Opportunities page captured global provider/account filter changes in state but never re-queried the list. The only way to see filtered results was to navigate away and back. A hard refresh also wiped the filter back to "All".

Root cause: setupRecommendationsHandlers() was a no-op left over from Bundle B's removal of the legacy per-section filter <select>s; the matching state.subscribeProvider / state.subscribeAccount wiring (used by dashboard.ts) never landed for Opportunities.

Fix in two parts:

• Re-query on filter change: recommendations.ts subscribes to provider/account state changes and re-fires loadRecommendations() when the Opportunities tab is active, mirroring the dashboard pattern. Active-tab guard avoids burning an API call for a section the user isn't looking at.
• Persist filter state via URL query params: topbar-filters.ts hydrates provider + account from ?provider= / ?account= on init (before chip mount, so chip seeds pick up the persisted state), and writes back via history.replaceState on each chip change. Invalid provider values fall back to "" so a hand-crafted URL can't poison state. Empty selections omit the param entirely.

URL preferred over localStorage per the issue body — filter state is shareable via copy-paste link and avoids the cross-tab confusion shared localStorage would create.

Test plan

• recommendations.test.ts: subscriber wiring fires loadRecommendations when opportunities-tab is active, skips when inactive, mirrors for account changes
• topbar-filters.test.ts: URL hydration of provider + account, invalid-provider sanitisation, writeback on account change, "All Accounts" removes the query param, provider change clears account in the URL
• npm test — 1749 passed, 1 skipped (pre-existing)
• npm run typecheck — clean
• npm run build — clean
• Manual verification post-merge: change provider/account on Opportunities and confirm the list re-renders; reload with ?provider=aws&account=… and confirm filters survive

Closes #477.

Summary by CodeRabbit

• New Features
  • Topbar filter selections (Provider and Account) now persist in the browser URL, enabling easy sharing and bookmarking of filtered views
  • Filters are automatically restored when accessing the page via previously saved URLs
  • Recommendations update dynamically when filter selections change on the Opportunities tab

[coderabbitai]

Warning

Rate limit exceeded

@cristim has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 8 minutes and 12 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bf53601d-d72e-4ab1-be0c-8407cf4e34ee

📥 Commits

Reviewing files that changed from the base of the PR and between 97b9558 and 4df23b5.

📒 Files selected for processing (2)

• frontend/src/__tests__/recommendations.test.ts
• frontend/src/recommendations.ts

📝 Walkthrough

Walkthrough

The PR extends topbar filter functionality with URL persistence and live recommendations refresh. Filter selections (provider and account) now persist in query parameters and are restored on page load; when users change filters, the URL updates and state subscriptions trigger immediate recommendations refetch if the Opportunities tab is active.

Changes

Filter Persistence and Live Refresh

Layer / File(s)	Summary
URL query parameter persistence and hydration frontend/src/topbar-filters.ts, frontend/src/__tests__/topbar-filters.test.ts	URL helpers read and validate provider/account from query parameters. initTopbarFilters() hydrates state from the URL before mounting chips. Provider and account change handlers now write updated selections back to the URL, keeping it clean by omitting empty values. Tests verify hydration with invalid provider fallback and interactive URL writeback on chip selection.
Subscription-based recommendations refetch on filter change frontend/src/recommendations.ts, frontend/src/__tests__/recommendations.test.ts	setupRecommendationsHandlers() subscribes to provider and account state changes via state.subscribeProvider/state.subscribeAccount. Callbacks trigger loadRecommendations() only when #opportunities-tab has the .active class, ensuring refetch works only when the tab is visible. Tests verify the subscription wiring and the tab-active guard.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Chip as Provider/Account Chip
  participant state
  participant URL as URL Query Params
  participant Subscription as setupRecommendationsHandlers
  participant api
  User->>Chip: Change filter (on Opportunities page)
  Chip->>state: Update provider/account in state
  Chip->>URL: Write to query params
  state->>Subscription: Trigger subscribeProvider/subscribeAccount callback
  Subscription->>Subscription: Check if opportunities-tab is active
  alt Tab is active
    Subscription->>api: loadRecommendations()
    api-->>Subscription: Return updated data
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• LeanerCloud/CUDly#345: Previously updated provider/account chip behavior and state integration in the same topbar filter files, making it a natural point of reference for understanding the filter wiring changes.

Poem

🐰 Filters now persist through the morning dew,
State changes bloom and refresh on cue,
The URL remembers what users choose,
No lost filters here—just gains, never lose! 🌱

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: re-querying on filter changes and persisting filters to URL, which are the two core fixes for issue #477.
Linked Issues check	✅ Passed	The PR fully addresses all requirements from issue #477: re-querying on provider/account filter changes via subscriptions with active-tab guard, persisting filters to URL with hydration and writeback logic, and comprehensive test coverage.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the linked issue: two source files implement the filter subscription and URL persistence logic, and two test files validate the new behavior; no unrelated changes detected.
Docstring Coverage	✅ Passed	Docstring coverage is 85.71% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/issue-477-opportunities-filter

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cristim]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/recommendations.ts`:
- Around line 171-176: A single provider change can trigger both
state.subscribeProvider and state.subscribeAccount callbacks and call
loadRecommendations() twice; to fix, implement a microtask-coalescing scheduler
(e.g., scheduleLoadRecommendations) that sets a single "scheduled" flag and uses
queueMicrotask or setTimeout(...,0) to call loadRecommendations once; replace
the direct calls in the subscribeProvider and subscribeAccount callbacks with
scheduleLoadRecommendations(), and inside the scheduled task check
isOpportunitiesTabActive() before invoking loadRecommendations() and clear the
scheduled flag so subsequent changes can schedule again.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0e2c4c66-0ea8-4d25-a1d6-8f63d6ef54f6

📥 Commits

Reviewing files that changed from the base of the PR and between 90f37e4 and 97b9558.

📒 Files selected for processing (4)

• frontend/src/__tests__/recommendations.test.ts
• frontend/src/__tests__/topbar-filters.test.ts
• frontend/src/recommendations.ts
• frontend/src/topbar-filters.ts

[cristim]

CR pass 1 addressed:

• Actionable (1/1) — Coalesce filter-change reloads: applied as suggested. The topbar's provider-change handler clears accounts then sets provider (the fix(dashboard): account dropdown change doesn't reliably refresh dashboard data #185 ordering rule), so both subscribers fire from one user action. Coalescing via queueMicrotask collapses them into one reload and closes the stale-overwrite race. Active-tab is re-checked inside the microtask in case the tab switched during the microtask delay. Regression test added: back-to-back accountCb() + providerCb() triggers exactly one getRecommendations call.

@coderabbitai review

[coderabbitai]

@cristim Great work on the coalescing fix! Using queueMicrotask is a clean, low-overhead choice here — it naturally flushes after the synchronous burst from the provider-change handler (clear account → set provider) without introducing any arbitrary timer. Re-checking the active-tab guard inside the microtask is a solid defensive touch for the race window. Triggering a fresh review on the updated commits now.

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.