feat: extract BudgetDisplay component with progress bar and tooltip - #4055
Merged
akshaydeo merged 15 commits intoJun 5, 2026
Merged
Conversation
Contributor
|
Warning Review limit reached
More reviews will be available in 8 minutes and 52 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a new ChangesBudget Display Component Extraction
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
This was referenced Jun 4, 2026
Contributor
Author
18 tasks
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 4, 2026 12:07
f49ad9d to
dd1027f
Compare
impoiler
force-pushed
the
06-04-chore_make_the_filterable_entity_in_log_detail_sheets_clickable_for_filters
branch
from
June 4, 2026 12:07
bf03ec6 to
6bc8c5f
Compare
This was referenced Jun 4, 2026
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 4, 2026 13:11
dd1027f to
f267909
Compare
impoiler
force-pushed
the
06-04-chore_make_the_filterable_entity_in_log_detail_sheets_clickable_for_filters
branch
from
June 4, 2026 13:11
6bc8c5f to
75b9000
Compare
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 4, 2026 14:31
f267909 to
5eb0446
Compare
impoiler
force-pushed
the
06-04-chore_make_the_filterable_entity_in_log_detail_sheets_clickable_for_filters
branch
2 times, most recently
from
June 5, 2026 04:53
03716d7 to
b5e111e
Compare
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 5, 2026 04:53
5eb0446 to
b95d788
Compare
impoiler
force-pushed
the
06-04-chore_make_the_filterable_entity_in_log_detail_sheets_clickable_for_filters
branch
from
June 5, 2026 04:54
b5e111e to
5ac2b1e
Compare
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 5, 2026 04:54
b95d788 to
46aada1
Compare
This was referenced Jun 5, 2026
roroghost17
marked this pull request as ready for review
June 5, 2026 09:50
Contributor
Confidence Score: 5/5Clean UI refactor with no logic regressions; safe to merge. The change is a pure extraction refactor — the new component reproduces the same percentage, exhaustion, and calendar-alignment logic faithfully, and the tooltip now also carries the "(calendar)" suffix which is a consistent improvement. No data-testid attributes are touched, no browser crypto APIs are introduced, and the existing import of resetDurationLabels in virtualKeysTable.tsx remains valid because the local formatResetDuration on line 66 still uses it. No files require special attention. Important Files Changed
Reviews (4): Last reviewed commit: "chore: uniform view of budget and limits..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Merged
18 tasks
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 5, 2026 13:48
46aada1 to
de5a5c7
Compare
18 tasks
impoiler
force-pushed
the
06-04-chore_make_the_filterable_entity_in_log_detail_sheets_clickable_for_filters
branch
from
June 5, 2026 13:51
45487db to
f239b91
Compare
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 5, 2026 13:51
de5a5c7 to
7084c24
Compare
impoiler
force-pushed
the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
from
June 5, 2026 13:53
7084c24 to
880609d
Compare
impoiler
force-pushed
the
06-04-chore_make_the_filterable_entity_in_log_detail_sheets_clickable_for_filters
branch
from
June 5, 2026 13:53
f239b91 to
748d230
Compare
|
|
Contributor
Merge activity
|
akshaydeo
changed the base branch from
06-04-chore_make_the_filterable_entity_in_log_detail_sheets_clickable_for_filters
to
graphite-base/4055
June 5, 2026 14:14
akshaydeo
deleted the
06-04-chore_uniform_view_of_budget_and_limits_for_virtual_keys_table
branch
June 5, 2026 14:15
This was referenced Jun 5, 2026
Merged
akshaydeo
pushed a commit
that referenced
this pull request
Jun 7, 2026
…#4055) ## Summary Extracts the inline budget rendering logic from the virtual keys table into a reusable `BudgetDisplay` component, and upgrades the visual presentation from plain text to a color-coded progress bar with tooltips — matching the style of `RateLimitDisplay`. ## Changes - Created `ui/components/budgetDisplay.tsx` with a new `BudgetDisplay` component that renders each budget line as a progress bar (emerald < 80% < amber < exhausted = red), with the max limit and reset period shown above and a tooltip displaying the exact current/max spend. - Replaced the inline budget rendering in `VKBudgetCell` with a call to `<BudgetDisplay />`, passing `displayBudgets` and `calendarAligned`. - Moved `supportsCalendarAlignment` usage and `formatResetDuration` logic into `BudgetDisplay`, keeping the calendar-aligned label suffix behavior intact. ## Type of change - [ ] Bug fix - [ ] Feature - [x] Refactor - [ ] Documentation - [ ] Chore/CI ## Affected areas - [ ] Core (Go) - [ ] Transports (HTTP) - [ ] Providers/Integrations - [ ] Plugins - [x] UI (React) - [ ] Docs ## How to test ```sh cd ui pnpm i || npm i pnpm build || npm run build ``` Navigate to the Virtual Keys table and verify that budget cells now display a progress bar with color coding (green, amber, red) and a tooltip showing current/max spend. Confirm calendar-aligned keys still show the `(calendar)` suffix. ## Screenshots/Recordings Before: Budget displayed as plain `current / max` text with a reset duration label below. After: Budget displayed as a labeled progress bar with color thresholds and a hover tooltip for exact spend values. ## Breaking changes - [ ] Yes - [x] No ## Related issues ## Security considerations None. ## Checklist - [ ] I read `docs/contributing/README.md` and followed the guidelines - [ ] I added/updated tests where appropriate - [ ] I updated documentation where needed - [ ] I verified builds succeed (Go and UI) - [ ] I verified the CI pipeline passes locally if applicable <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Virtual key budget display now uses a unified visual component showing progress bars with color-coded usage levels, clearer capped percentages, and exhaustion indicators. * Tooltips now include exact usage vs. limit and reset timelines; empty budgets display a muted dash. Reset duration formatting and optional “(calendar)” annotation improved for clearer timelines. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
akshaydeo
added a commit
that referenced
this pull request
Jun 7, 2026
## ✨ Features - **OpenAI Compaction** — Added OpenAI conversation compaction support across core, framework, logging, and the API surface (#4053) - **Multi-Customer & Org Hierarchy** — Logs and usage tracking now support multiple customers, teams, and business units, including business unit CRUD, team assignment, and governance endpoints in the OpenAPI spec (#4066, #4041, #4082) - **Provider-Level Governance** — Budgets & limits are now scope-aware and can be applied at the virtual-key top level and per provider, wired from the model configs table, with UI filters for scope and providers (#3938, #3937, #3939, #3981, #3962) - **Customer Budgets** — Customers support multiple budgets and `calendar_aligned` budget windows (#3998, #3997) - **Virtual Key Attribution & Controls** — Added a `created_by` user attribution column and a `blacklisted_models` column for virtual key provider configs (#3672, #3653) - **Request Header Capture** — OTel and Maxim observability plugins capture `request_headers` by pattern, with wildcard support (e.g. `x-custom-*`); logging gained the same wildcard header capture (#4012, #3958) - **OTel Content Controls & Collectors** — New `disable_content_logging` option drops message/tool content from exported spans, plus support for multiple OTel collectors (#4064, #3894) - **xAI x_search** — Added xAI `x_search` tool support (#3976) - **URL Validation** — Added fetch URL validation with private-network configuration and link-local blocking (#3947, #3991) - **File Scheme Pricing URLs** — Pricing source URLs now accept the `file://` scheme for air-gapped and self-hosted deployments (#4045) - **Paginated Virtual Keys** — Virtual key fetching is paginated to handle deployments with very large numbers of keys (#3957) - **Client IP Resolution** — Resolve client IP from `X-Forwarded-For`/`X-Real-IP` headers - **SCIM Provisioning** — Added `attributeType`/`attributeValue` SCIM provisioning fields - **Helm/Config Schema** — Added `roles` RBAC governance config and `per_user_oauth` MCP auth to the Helm chart and config schema (#4004, #4009) - **Log Navigation UI** — Added a "View logs" menu item to customer, team, and virtual key tables, clickable links in log detail views, a customer detail sheet, and a reusable `BudgetDisplay` component (#4073, #4054, #4026, #4055) - **Faster First Paint** — Added an inline loading shell to `#root` before React mounts (#4063) - **Materialized View Alias** — Added an `alias` column to the materialized view with filter support (#4078) ## 🐞 Fixed - **Fetch URL IP Checks** — Hardened fetch URL IP checks against SSRF (#4092) - **Mantle Model Matching** — Broadened Mantle model matching to all `gpt` variants (#4091) - **Empty Thinking Blocks** — Strip thinking blocks when the signature is empty (#4079) - **OpenAI Stream Usage** — Removed usage from the `responses.created` event in the OpenAI stream (#4080) - **Prompt Cache Key** — Set the prompt cache key from the Anthropic integration (#4086) - **Upstream Failure Status** — Map upstream connection failures to 502 instead of 400 (#3929) (thanks [@chris-colinsky](https://github.com/chris-colinsky)!) - **Gemini Schema Constraints** — Accept numeric schema integer constraints for Gemini (#3994) (thanks [@yanhao98](https://github.com/yanhao98)!) - **Files Provider Param** — Accept the `?provider=` query param on `GET /v1/files` (#3971) (thanks [@alexef](https://github.com/alexef)!) - **Optional Batch Model** — Made the `model` field optional on `POST /v1/batches` (#3973) (thanks [@alexef](https://github.com/alexef)!) - **Helm Azure Config** — Added missing `azure_key_config` fields to the Helm schema (#3996) (thanks [@axelray-dev](https://github.com/axelray-dev)!) - **Text Completion Chunk Model** — Added the missing `Model` field to `TextCompletionChunkResponse` (#3970) (thanks [@kuishou68](https://github.com/kuishou68)!) - **MCP Inline stdio Env** — MCP stdio server configs accept inline environment variable assignments (#3861) (thanks [@Shushmitaaaa](https://github.com/Shushmitaaaa)!) - **Orphaned Tool Results** — Orphaned tool results in the OpenAI to Anthropic conversion flow are no longer rejected by the Anthropic API (#3919) - **Node Usage Reconciliation** — Added a monotonic `inc_number` log cursor so node usage reconciliation does not skip late async log writes (#3664) - **Bedrock Output Assessments** — Corrected the type of `outputAssessments` in Bedrock responses (#4028) - **Model Pool Pricing Reloads** — Preserve non-pricing model pool entries across pricing reloads (#3999) - **Ghost Node Reconciliation** — Replicate the VK hierarchy flow for ghost node reconciliation (#4088) - **VK Double Usage Counting** — Fixed double usage counting when creating a virtual key (#4070) - **Model Config Lifecycle** — Cascade deletes for model configs and removal of stale in-memory model configs (#4051, #4043) - **FTS Index Cap** — Reduced the FTS index `left()` cap from 800k to 250k chars to stay within the tsvector limit (#4057) - **Sync Worker Drift** — Reduced the sync worker ticker period to 5m to prevent threshold drift (#4023) - **Passthrough** — Fixed passthrough budgets, gated passthrough models per VK, model extraction for Azure passthrough, and restricted fallbacks/provider selection to the VK boundary (#3941, #3988, #3983, #3924) - **Provider Response Headers** — Strip provider response headers and add a content-type filter (#3955, #4024) - **Stream Handling** — Drain non-SSE stream readers and retry stale connections (#3956, #3967) - **Azure Claude** — Strip Azure diagnostic property for Claude models (#3925) - **Compat max_tokens** — Preserve chat `max_tokens` during param filtering (#3992) - **Raw Request Flag** — Removed the raw request flag from providers that don't support it (#4058) - **UI Fixes** — Standardized page container layout, virtual key model configs UI, and dashboard chart tooltips (#4046, #4052, #4044) ## 🔧 Maintenance - **Dependency Upgrades** — Bumped transitive `golang.org/x` dependencies (crypto, net, sys, text) for Docker Scout CVE remediation and `recharts` to 3.8.1; cascaded version bumps across all modules (#3900, #4003)
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
4 participants
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
Extracts the inline budget rendering logic from the virtual keys table into a reusable
BudgetDisplaycomponent, and upgrades the visual presentation from plain text to a color-coded progress bar with tooltips — matching the style ofRateLimitDisplay.Changes
ui/components/budgetDisplay.tsxwith a newBudgetDisplaycomponent that renders each budget line as a progress bar (emerald < 80% < amber < exhausted = red), with the max limit and reset period shown above and a tooltip displaying the exact current/max spend.VKBudgetCellwith a call to<BudgetDisplay />, passingdisplayBudgetsandcalendarAligned.supportsCalendarAlignmentusage andformatResetDurationlogic intoBudgetDisplay, keeping the calendar-aligned label suffix behavior intact.Type of change
Affected areas
How to test
Navigate to the Virtual Keys table and verify that budget cells now display a progress bar with color coding (green, amber, red) and a tooltip showing current/max spend. Confirm calendar-aligned keys still show the
(calendar)suffix.Screenshots/Recordings
Before: Budget displayed as plain
current / maxtext with a reset duration label below.After: Budget displayed as a labeled progress bar with color thresholds and a hover tooltip for exact spend values.
Breaking changes
Related issues
Security considerations
None.
Checklist
docs/contributing/README.mdand followed the guidelinesSummary by CodeRabbit