QuotaWallBanner on top-level pages reads /api/v1/usage/wall (U1)#41
Merged
Conversation
New component QuotaWallBanner — yellow banner above page content that appears when the caller's team is at ≥80% of any tier-limit axis (storage / connections / provisions). Reads GET /api/v1/usage/wall on mount and every 5 minutes; renders the metadata fields the worker attached to the audit row. Mounted on OverviewPage, ResourcesPage, and DeploymentsPage — the three surfaces where seeing the wall is most actionable for an upgrade decision. Dismiss state persists per-team in localStorage. Reappear rule: if percent_used climbs >= 5pp above the dismissed value, the banner shows again. Per-team key prevents one team's dismiss bleeding into another's view when two teams share a browser profile. shouldRender is exported as a pure function so the unit tests can exercise the decision logic directly without mounting a tree. 11 new tests; the full dashboard suite passes (220/220). api: new fetchQuotaWall() in src/api/index.ts. Types are explicit on the response shape so consumers don't drift if the backend adds fields.
…er-fresh # Conflicts: # src/pages/OverviewPage.tsx # src/pages/ResourcesPage.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Track U1 — usage-based upgrade banner on the dashboard.
<QuotaWallBanner />component (src/components/QuotaWallBanner.tsx). PollsGET /api/v1/usage/wallon mount and every 5 minutes; whennear_wall=truerenders an axis-aware banner with an Upgrade CTA pointing at/app/billing.fetchQuotaWall()API client insrc/api/index.tswith typedQuotaWallResponse.Dismissibility
instanode.quotaWallDismiss.<team_id>stores{percent, at}so dismiss state is per-team (two teams sharing a browser don't share dismisses).percent_usedclimbs ≥ 5pp above the dismissed value, the banner shows again. Encodes "I saw it at X%" instead of "ignore forever."Design
shouldRender(wall, dismiss)exported as a pure function — the unit tests exercise the decision matrix directly without mounting a tree.near_wall=false, when the API errors, or before the team id is known (loading state) so we never leak across teams.Test plan
QuotaWallBanner.test.tsxcover allshouldRenderbranches and the rendering / dismiss / reappear flows220 passed | 3 skipped (223)tsc --noEmitclean🤖 Generated with Claude Code