feat: add customer detail sheet and remove inline usage section from customer sheet

[impoiler]

Summary

Introduces a dedicated read-only CustomerDetailSheet that opens when clicking a customer row, separating the "view usage details" concern from the edit sheet. The "Current Usage" section previously embedded in the edit sheet has been removed and will live in this new detail view instead.

Changes

• Removed the "Current Usage" block (budget and rate limit usage stats with badges) from CustomerSheet, along with the now-unused Badge, formatCurrency, and formatDistanceToNow imports.
• Made the CustomerSheet header sticky and the footer sticky so they remain visible while scrolling long forms.
• Added CustomerDetailSheet (from the enterprise components library) to CustomerTable, wired to a new viewingCustomer state.
• Made each customer table row clickable (mouse and keyboard accessible) to open the CustomerDetailSheet.
• Added stopPropagation to the Edit and Delete action menu items so clicking those actions no longer also triggers the row click handler.
• Normalized Token Limits and Request Limits label font size to text-sm in VirtualKeyDetailSheet for visual consistency.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

1. Navigate to the Governance → Customers page.
2. Click any customer row — the CustomerDetailSheet should open showing that customer's details.
3. Open the action menu (⋯) on a row and select Edit — the edit sheet should open without also triggering the detail sheet.
4. Open the action menu and select Delete — the delete confirmation should appear without triggering the detail sheet.
5. Open the edit sheet for a customer that has budgets or rate limits configured and confirm the "Current Usage" section is no longer present there.
6. Verify the sheet header and footer remain visible (sticky) when the edit form is long enough to scroll.

cd ui
pnpm i
pnpm build

Screenshots/Recordings

Add before/after screenshots showing the new clickable row behavior and the detail sheet.

Breaking changes

• No

Related issues

Security considerations

No new auth surfaces introduced. The detail sheet respects existing RBAC checks inherited from the customer data already loaded in the table.

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

Summary by CodeRabbit

• New Features

  • Added customer detail view accessible by clicking customer rows in the table

• Improvements

  • Restructured customer sheet dialog layout with optimized scrolling behavior
  • Removed usage information display from customer sheet
  • Enhanced event handling for customer actions
  • Updated styling for virtual key detail section headers

[coderabbitai]

Warning

Review limit reached

@impoiler, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 10 minutes and 29 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 @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 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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6ea854c3-6d31-4fba-a2d4-a436cd68fc90

📥 Commits

Reviewing files that changed from the base of the PR and between bd91e3f and f120472.

📒 Files selected for processing (4)

• ui/app/_fallbacks/enterprise/components/user-groups/sheets/customerDetailSheet.tsx
• ui/app/workspace/governance/views/customerSheet.tsx
• ui/app/workspace/governance/views/customerTable.tsx
• ui/app/workspace/virtual-keys/views/virtualKeyDetailsSheet.tsx

📝 Walkthrough

Walkthrough

The PR refactors the customer management UI by separating view and edit flows. CustomerSheet is restructured to remove "Current Usage" and simplify styling, while CustomersTable integrates a read-only detail view via CustomerDetailSheet. Dropdown menu event handling is refined. Virtual key detail headers receive minor styling updates.

Changes

Customer Detail View Refactor

Layer / File(s)	Summary
Customer Detail Sheet Structure ui/app/workspace/governance/views/customerSheet.tsx	SheetContent styling and padding are updated, the form container layout is adjusted, and SheetFooter becomes sticky at the bottom. The "Current Usage" section is removed. Imports for Badge, formatCurrency, and formatDistanceToNow are removed; Validator and RBAC types are added.
Table Detail View Integration ui/app/workspace/governance/views/customerTable.tsx	CustomersTable introduces viewingCustomer state and renders a read-only CustomerDetailSheet. Clicking a customer row or pressing Enter/Space opens the detail sheet; closing it resets the state. Row styling is updated with group cursor/transition classes.
Dropdown Menu Event Handling Refinement ui/app/workspace/governance/views/customerTable.tsx	Event handlers in the Edit and Delete dropdown menu items are refined to stop propagation, preventing unintended row interactions when menu items are activated.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• maximhq/bifrost#3487: Overlaps on customerTable.tsx changes including dropdown action menus, event propagation handling, and confirmation dialogs.
• maximhq/bifrost#3751: Also modifies ui/app/workspace/governance/views/customerTable.tsx with table interaction and layout changes.

Suggested reviewers

• akshaydeo
• danpiths

Poem

A rabbit hops through governance halls,
Splitting views from edits in customer calls,
Now details peek in a side-sliding sheet,
While dropdowns stop their clicks from fleet,
And virtual keys wear smaller hats—neat! 🐰

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely summarizes the main changes: adding a customer detail sheet and removing the inline usage section from the customer sheet.
Description check	✅ Passed	The PR description is comprehensive and addresses all required template sections including summary, changes, type of change, affected areas, testing instructions, and security considerations.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 06-03-feat_governance_views_fixes

---

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

[impoiler]

• fix: broaden Mantle model matching to all gpt variants #4091
• test: remove TestCollectApplicableGovernanceIDs_UserScopedModelConfigs #4090
• feat: add business unit CRUD, team assignment, and governance endpoints to OpenAPI spec #4082
• feat: add inline loading shell to #root before React mounts #4063
• fix: reduce FTS index left() cap from 800k to 250k chars to stay within tsvector limit #4057
• feat: add alias column to materialized view and filter support #4078
• feat: add "View logs" menu item to customer, team, and virtual key tables #4073
• feat: extract BudgetDisplay component with progress bar and tooltip #4055
• feat: add clickable links for routing rule, selected key, virtual key, and prompt in log detail views #4054
• fix: standardize page container layout with no-padding-parent and 100dvh sizing #4046
• fix: add colored tooltip values and subtle cursor highlight to dashboard charts #4044
• feat: add customer detail sheet and remove inline usage section from customer sheet #4026 👈 (View in Graphite)
• fix: replicates vk hierarchy flow for ghost nodes reconcilation #4088
• feat: supports multiple customers logs and usage tracking #4066
• fix: fixes virtual key model configs UI #4052
• fix: fixes cascade deletes for model configs #4051
• feat: adds support for multiple team and bu units in logstore #4041
• feat: adds team budget and rl collection exporters #4040
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[coderabbitai]

Actionable comments posted: 2

🤖 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 `@ui/app/workspace/governance/views/customerTable.tsx`:
- Around line 301-309: The row-level onKeyDown handler (the onKeyDown prop that
calls setViewingCustomer) is reacting to Enter/Space events bubbled from child
controls; update that handler to ignore events not originating on the row itself
by checking that the event target equals the event currentTarget (i.e., only
proceed when e.target === e.currentTarget), and only then preventDefault and
call setViewingCustomer(customer); keep the existing role="button" and tabIndex
handling unchanged.
- Line 24: Replace the unresolved import of CustomerDetailSheet by importing the
correct exported component (or creating a local fallback) instead of
"`@enterprise/components/user-groups/sheets/customerDetailSheet`" so module
resolution/TS2307 is fixed; locate where CustomerDetailSheet is referenced in
the CustomerTable component and point the import at the real module export (or
add an exported wrapper in this repo). Also prevent row activation when focus is
inside the actions menu by updating the table row onKeyDown handler in the
CustomerTable component to ignore Enter/Space when the event originates from a
descendant (add guard like e.target !== e.currentTarget) or alternatively stop
propagation on the CustomerActionsMenu trigger element (handle keydown in
CustomerActionsMenu to e.stopPropagation() for Enter/Space). Ensure changes
reference the CustomerTable onKeyDown handler and the CustomerActionsMenu
trigger to locate the edits.

🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: eb007a48-d7d5-4e78-ac7c-a8e3f91117c1

📥 Commits

Reviewing files that changed from the base of the PR and between a1e0933 and bd91e3f.

📒 Files selected for processing (3)

• ui/app/workspace/governance/views/customerSheet.tsx
• ui/app/workspace/governance/views/customerTable.tsx
• ui/app/workspace/virtual-keys/views/virtualKeyDetailsSheet.tsx

[greptile-apps]

Confidence Score: 5/5

Safe to merge; changes are confined to UI presentation and event-handling wiring with no impact on data or backend logic

All four changed files touch only React rendering and event handling. Existing data-testid attributes are preserved, stopPropagation is correctly placed, and the onKeyDown guard prevents the detail sheet from opening when buttons inside the row are keyboard-activated. The one noted issue is a cosmetic missing label in BudgetLineBar.

ui/app/_fallbacks/enterprise/components/user-groups/sheets/customerDetailSheet.tsx — the BudgetLineBar empty label span

Important Files Changed

Filename	Overview
ui/app/_fallbacks/enterprise/components/user-groups/sheets/customerDetailSheet.tsx	New OSS fallback for CustomerDetailSheet with Info, Budgets, and Rate Limits sections; BudgetLineBar has an empty label span
ui/app/workspace/governance/views/customerSheet.tsx	Removes Current Usage block and makes header/footer sticky via SheetContent built-in overflow:auto; layout change looks correct
ui/app/workspace/governance/views/customerTable.tsx	Adds clickable rows with CustomerDetailSheet, stopPropagation on action menu items, and a target-guard in onKeyDown; data-testid attributes preserved
ui/app/workspace/virtual-keys/views/virtualKeyDetailsSheet.tsx	Minor cosmetic change: adds text-sm to Token Limits and Request Limits headings for visual consistency

_{Reviews (3): Last reviewed commit: "feat: governance views fixes" | Re-trigger Greptile}

[akshaydeo]

Merge activity

• Jun 5, 2:00 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 5, 2:08 PM UTC: @akshaydeo merged this pull request with Graphite.