Skip to content

feat: add keyboard navigation and URL state for virtual key detail sheet#3740

Merged
akshaydeo merged 4 commits into
devfrom
05-25-feat_virtual_key_sheet_navigation_with_the_keyboard
May 27, 2026
Merged

feat: add keyboard navigation and URL state for virtual key detail sheet#3740
akshaydeo merged 4 commits into
devfrom
05-25-feat_virtual_key_sheet_navigation_with_the_keyboard

Conversation

@impoiler

@impoiler impoiler commented May 25, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds keyboard and button-based navigation between virtual keys in the detail sheet, with support for navigating across page boundaries. The selected virtual key is now tracked in the URL via selected_vk, enabling deep-linking and preserving state on refresh. This mirrors the existing navigation pattern already present in the log details sheet.

Changes

  • selected_vk is now stored as a URL query parameter, replacing the local useState that previously tracked the selected virtual key and sheet visibility.
  • handleSelectedVkChange propagates selection and optional offset changes together, allowing cross-page navigation to update both the selected key and the current page in a single URL update.
  • handleDetailNavigate in VirtualKeysTable handles prev/next navigation: within the current page it selects adjacent rows; at page boundaries it fetches the adjacent page and selects the last or first key from the result.
  • VirtualKeyDetailSheet now accepts onNavigate, hasPrev, and hasNext props and renders SheetNavigationButtons alongside the sheet title, consistent with the log detail sheet.
  • The log detail sheet's inline navigation buttons and useHotkeys calls were replaced with the shared useSheetNavigation hook and SheetNavigationButtons component, reducing duplication.
  • Pagination controls in VirtualKeysTable were restyled to use ghost buttons with icon-only chevrons and a "Page X of Y" label, with entry counts formatted with toLocaleString.

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 Virtual Keys table.
  2. Click a row to open the detail sheet — the URL should update with selected_vk=<id>.
  3. Use the up/down navigation buttons or keyboard arrow keys to move between keys.
  4. At the last key on a page, pressing next should load the next page and open the first key's detail sheet automatically.
  5. At the first key on a page, pressing prev should load the previous page and open the last key's detail sheet.
  6. Reload the page with selected_vk in the URL — the sheet should reopen for that key.
  7. Verify the same keyboard navigation works in the log detail sheet.
cd ui
pnpm i
pnpm build

Screenshots/Recordings

Add before/after screenshots of the virtual key detail sheet navigation buttons and the updated pagination controls.

Breaking changes

  • Yes
  • No

Related issues

Security considerations

None. No auth, secrets, or PII are involved in this change.

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

@coderabbitai

coderabbitai Bot commented May 25, 2026

Copy link
Copy Markdown
Contributor

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 4 minutes and 22 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4f5282cc-c7ad-4be4-8549-5f80e0a13d84

📥 Commits

Reviewing files that changed from the base of the PR and between 1149f98 and d668988.

📒 Files selected for processing (4)
  • ui/app/workspace/governance/virtual-keys/page.tsx
  • ui/app/workspace/logs/sheets/logDetailsSheet.tsx
  • ui/app/workspace/virtual-keys/views/virtualKeyDetailsSheet.tsx
  • ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard

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

@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from 0235130 to 9973b3e Compare May 26, 2026 03:28
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch from 3e015cf to 2805368 Compare May 26, 2026 03:28
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from 9973b3e to b443ad2 Compare May 26, 2026 04:55
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch 2 times, most recently from 2cc22f9 to f31fed2 Compare May 26, 2026 05:53
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from b443ad2 to dd253f3 Compare May 26, 2026 05:53
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch 2 times, most recently from 302c57a to 070d607 Compare May 26, 2026 07:15
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch from 070d607 to b3a4f3e Compare May 26, 2026 07:50
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from dd253f3 to 7f467dd Compare May 26, 2026 07:50
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch from b3a4f3e to 2e4646e Compare May 26, 2026 09:44
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from 7f467dd to 23fe840 Compare May 26, 2026 09:44
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from 23fe840 to e3d7333 Compare May 26, 2026 17:00
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch from 2e4646e to a24e91e Compare May 26, 2026 17:00
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch from a24e91e to b82a902 Compare May 27, 2026 04:06
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from e3d7333 to 01edafd Compare May 27, 2026 04:06
@impoiler impoiler changed the title feat: Virtual key sheet navigation with the keyboard feat: add keyboard navigation and URL state for virtual key detail sheet May 27, 2026
@impoiler impoiler self-assigned this May 27, 2026
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch from b82a902 to ddb31ac Compare May 27, 2026 09:13
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from 01edafd to 8a0a3b7 Compare May 27, 2026 09:13
@impoiler impoiler marked this pull request as ready for review May 27, 2026 10:25
@greptile-apps

greptile-apps Bot commented May 27, 2026

Copy link
Copy Markdown
Contributor

Confidence Score: 3/5

Safe to merge with one fix: the shared lazy query between export and navigation incorrectly reflects navigation fetches as an export-in-progress.

The useLazyGetVirtualKeysQuery instance is reused for both the CSV export flow and the new cross-page navigation. Its isFetching flag is aliased as isExporting and drives the Export dialog's disabled state and loading spinner. Any cross-page key navigation while the Export dialog is open — or any export triggered while navigation is in progress — will show incorrect UI state. The fix is a one-line split into two separate hook instances.

ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx — the shared lazy query instance at line 295 needs to be split.

Important Files Changed

Filename Overview
ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx Adds URL-driven selected VK state, cross-page navigation via handleDetailNavigate, and restyled pagination. The lazy query shared between export and navigation creates a false isExporting state during navigation fetches.
ui/app/workspace/governance/virtual-keys/page.tsx Lifts selected VK state into the URL via nuqs, adds handleSelectedVkChange for atomic offset+key updates, and passes props down to VirtualKeysTable. Straightforward and correct.
ui/app/workspace/logs/sheets/logDetailsSheet.tsx Replaces inline useHotkeys calls and navigation buttons with shared useSheetNavigation hook and SheetNavigationButtons component — clean deduplication with no functional changes.
ui/app/workspace/virtual-keys/views/virtualKeyDetailsSheet.tsx Adds onNavigate, hasPrev, hasNext props and integrates useSheetNavigation + SheetNavigationButtons alongside the sheet title. Minor formatting-only diff to indentation.

Reviews (2): Last reviewed commit: "feat: Virtual key sheet navigation with ..." | Re-trigger Greptile

Comment thread ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx
Comment thread ui/app/workspace/virtual-keys/views/virtualKeysTable.tsx
coderabbitai[bot]
coderabbitai Bot previously approved these changes May 27, 2026
@impoiler impoiler force-pushed the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch from 1d20219 to d668988 Compare May 27, 2026 13:16
@impoiler impoiler force-pushed the 05-25-feat_added_usesheetnavigation_hook branch from e6a5076 to 1149f98 Compare May 27, 2026 13:16

akshaydeo commented May 27, 2026

Copy link
Copy Markdown
Contributor

Merge activity

  • May 27, 1:44 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • May 27, 1:48 PM UTC: @akshaydeo merged this pull request with Graphite.

@akshaydeo akshaydeo changed the base branch from 05-25-feat_added_usesheetnavigation_hook to graphite-base/3740 May 27, 2026 13:46
@akshaydeo akshaydeo changed the base branch from graphite-base/3740 to dev May 27, 2026 13:47
@akshaydeo akshaydeo dismissed coderabbitai[bot]’s stale review May 27, 2026 13:47

The base branch was changed.

@akshaydeo akshaydeo merged commit 5dd8042 into dev May 27, 2026
10 checks passed
@akshaydeo akshaydeo deleted the 05-25-feat_virtual_key_sheet_navigation_with_the_keyboard branch May 27, 2026 13:48
akshaydeo pushed a commit that referenced this pull request May 29, 2026
…eet (#3740)

## Summary

Adds keyboard and button-based navigation between virtual keys in the detail sheet, with support for navigating across page boundaries. The selected virtual key is now tracked in the URL via `selected_vk`, enabling deep-linking and preserving state on refresh. This mirrors the existing navigation pattern already present in the log details sheet.

## Changes

- `selected_vk` is now stored as a URL query parameter, replacing the local `useState` that previously tracked the selected virtual key and sheet visibility.
- `handleSelectedVkChange` propagates selection and optional offset changes together, allowing cross-page navigation to update both the selected key and the current page in a single URL update.
- `handleDetailNavigate` in `VirtualKeysTable` handles prev/next navigation: within the current page it selects adjacent rows; at page boundaries it fetches the adjacent page and selects the last or first key from the result.
- `VirtualKeyDetailSheet` now accepts `onNavigate`, `hasPrev`, and `hasNext` props and renders `SheetNavigationButtons` alongside the sheet title, consistent with the log detail sheet.
- The log detail sheet's inline navigation buttons and `useHotkeys` calls were replaced with the shared `useSheetNavigation` hook and `SheetNavigationButtons` component, reducing duplication.
- Pagination controls in `VirtualKeysTable` were restyled to use ghost buttons with icon-only chevrons and a "Page X of Y" label, with entry counts formatted with `toLocaleString`.

## Type of change

- [ ] Bug fix
- [x] Feature
- [x] Refactor
- [ ] Documentation
- [ ] Chore/CI

## Affected areas

- [ ] Core (Go)
- [ ] Transports (HTTP)
- [ ] Providers/Integrations
- [ ] Plugins
- [x] UI (React)
- [ ] Docs

## How to test

1. Navigate to the Virtual Keys table.
2. Click a row to open the detail sheet — the URL should update with `selected_vk=<id>`.
3. Use the up/down navigation buttons or keyboard arrow keys to move between keys.
4. At the last key on a page, pressing next should load the next page and open the first key's detail sheet automatically.
5. At the first key on a page, pressing prev should load the previous page and open the last key's detail sheet.
6. Reload the page with `selected_vk` in the URL — the sheet should reopen for that key.
7. Verify the same keyboard navigation works in the log detail sheet.

```sh
cd ui
pnpm i
pnpm build
```

## Screenshots/Recordings

_Add before/after screenshots of the virtual key detail sheet navigation buttons and the updated pagination controls._

## Breaking changes

- [ ] Yes
- [x] No

## Related issues

## Security considerations

None. No auth, secrets, or PII are involved in this change.

## 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
@akshaydeo akshaydeo mentioned this pull request May 29, 2026
18 tasks
akshaydeo added a commit that referenced this pull request May 29, 2026
## Summary

This PR releases **core v1.5.14**, **framework v1.3.14**, **transports v1.5.6**, and bumps all dependent plugins to their respective `.14` patch versions. It delivers a broad set of new capabilities across MCP authentication, key rotation, OTel metrics, Bedrock/Anthropic compatibility, and UI improvements, alongside a number of targeted bug fixes and refactors.

## Changes

- **Direct API Key Header** — Providers can now receive an API key passed directly via a request header (#3817)
- **MCP Per-User Auth** — Introduced `MCPCredentialStore` abstraction, per-user MCP credential reconciliation, and a new per-user header auth type with lazy-auth submission flow (#3656, #3702, #3703, #3704, #3705)
- **MCP TLS Configuration** — Added configurable TLS (`insecureSkipVerify`, `caCertPem`) for HTTP/SSE MCP client connections (#3779, #3783)
- **MCP Sessions Management** — Filter, search, and pagination on the MCP sessions list API and table, plus a `can_reauth` identity gate (#3823, #3824, #3825)
- **Key Rotation** — Keys now rotate on 401/402/403 responses; returns `502 upstream_credentials_exhausted` when all keys are permanently exhausted. Added `triggered_rotation` to `KeyAttemptRecord` and tightened `bifrost_key_rotation_events_total` semantics (#3430, #3491)
- **OTel Metrics** — Added OTel spec-compatible metrics (backward compatible) with provider cache and semantic cache attributes in metrics export (#3865, #3816)
- **Opus 4.8 Support** — System message handling and general compatibility for Opus 4.8 (#3868, #3878)
- **Dimension Rankings** — New `GetDimensionRankings` API and dashboard tabs for team, customer, BU, and user rankings (#3766)
- **Model Pricing Attributes** — `additional_attributes` field on model pricing rows with management API and UI editor (#3829)
- **Prompt Cache Retention** — Added prompt cache retention parameter on responses requests (#3810)
- **Tool Call Execution UI** — Inline tool-call execution, stop streaming, bulk execute/submit, and a redesigned tool-call UI (#3837, #3843)
- **Sheet Navigation** — Prev/next keyboard navigation and URL state across virtual key, MCP client, and routing rule sheets (#3739, #3740, #3744, #3745)
- **Bedrock Tool Name Truncation** — Truncate Bedrock function/tool names to the provider length limit
- **Bedrock Guardrails** — Set guardrail config in Bedrock requests built from responses (#3862)
- **Anthropic Tool Use** — Default `tool_use` input to `{}` when arguments are absent (#3880)
- **Responses Streaming** — Fixed responses stream events (#3838)
- **Compat Flow** — Fixed missing parameter parsing on the compat flow (#3881)
- **Passthrough API Version** — Set a default API version in passthrough requests as a fallback (#3853)
- **Virtual Key Updates** — Avoid overriding optional fields during virtual key update (#3855)
- **User-Mode Flows** — Gate user-mode flows on caller `user_id`, skip temp token mint, and unify flow/credential kind filtering for pending flows (#3841, #3859)
- **Partial Tool Calls** — Handle partial tool call execution failures and return successful results (#3849)
- **URL Query Escaping** — Support escaped characters in URL query parameters (#3826)
- **MCP Auth Errors** — Inline banner and retry support for MCP auth-required errors (#3856)
- **Renamed Resolvers** — `staticHeadersResolver`/`serverOAuthResolver` renamed to `sharedHeadersResolver`/`sharedOAuthResolver` (#3840)
- **Starlark Nested Tool Calls** — Exposed `RunWithPluginPipeline` on `ClientManager` and routed Starlark nested tool calls through the canonical plugin gate (#3794)
- **Deferred-Fill OAuth Removed** — Removed deferred-fill user-mode OAuth flow support (#3839)
- **Go 1.26.3** — Upgraded toolchain to Go 1.26.3 (#3782)

## Type of change

- [x] Bug fix
- [x] Feature
- [x] Refactor
- [ ] Documentation
- [x] Chore/CI

## Affected areas

- [x] Core (Go)
- [x] Transports (HTTP)
- [x] Providers/Integrations
- [x] Plugins
- [x] UI (React)
- [ ] Docs

## How to test

```sh
# Core/Transports
go version  # should report go1.26.3
go test ./...

# UI
cd ui
pnpm i || npm i
pnpm test || npm test
pnpm build || npm run build
```

- Validate MCP per-user auth by configuring a per-user header auth type and confirming credentials are stored and reconciled on virtual key and MCP client changes.
- Validate key rotation by triggering a 401/402/403 from an upstream provider and confirming rotation occurs; exhaust all keys and confirm a `502 upstream_credentials_exhausted` is returned.
- Validate OTel metrics output includes `provider_cache` and `semantic_cache` attributes.
- Validate Bedrock requests with tool names exceeding the provider limit are truncated correctly.
- Validate Opus 4.8 system message handling by sending a request with a system message to an Opus 4.8 endpoint.

## Breaking changes

- [x] Yes
- [ ] No

The deferred-fill user-mode OAuth flow has been removed (#3839). Any integrations relying on that flow must migrate to the new per-user credential store approach. The `staticHeadersResolver` and `serverOAuthResolver` identifiers have been renamed to `sharedHeadersResolver` and `sharedOAuthResolver` respectively (#3840); any direct references must be updated.

## Related issues

#3817, #3656, #3702, #3703, #3704, #3705, #3779, #3783, #3823, #3824, #3825, #3430, #3491, #3865, #3816, #3868, #3878, #3766, #3829, #3810, #3837, #3843, #3739, #3740, #3744, #3745, #3862, #3880, #3838, #3881, #3853, #3855, #3841, #3859, #3849, #3826, #3856, #3840, #3794, #3839, #3782, #3724, #3814, #3836, #3869, #3886

## Security considerations

- MCP per-user credentials are stored via the new `MCPCredentialStore` abstraction; ensure the backing store is appropriately access-controlled and that credential values are encrypted at rest.
- The direct API key header feature passes provider secrets via HTTP headers; ensure TLS is enforced on all ingress paths and that headers are not logged in plaintext.
- User-mode flows are now gated on `caller user_id` and temp token minting is skipped where appropriate, reducing the surface for privilege escalation.
- TLS configuration for MCP HTTP/SSE connections supports `insecureSkipVerify`; this should only be enabled in controlled environments.

## Checklist

- [x] I read `docs/contributing/README.md` and followed the guidelines
- [x] I added/updated tests where appropriate
- [x] I updated documentation where needed
- [x] I verified builds succeed (Go and UI)
- [x] I verified the CI pipeline passes locally if applicable
@akshaydeo akshaydeo mentioned this pull request May 29, 2026
akshaydeo added a commit that referenced this pull request May 29, 2026
## ✨ Features

- **Direct API Key Header** - Pass a provider API key directly via
request header (#3817)
- **MCP Per-User Authentication** - New per-user header auth type with
credential storage
  and lazy-auth submission flow (#3703, #3704, #3705)
- **MCP TLS Configuration** - Configurable TLS (insecureSkipVerify,
caCertPem) for HTTP/SSE
  MCP client connections (#3779, #3783)
- **MCP Sessions Management** - Filter, search, and pagination on the
MCP sessions list API
  and table, plus a can_reauth identity gate (#3823, #3824, #3825)
- **Tool Call Execution UI** - Inline tool-call execution, stop
streaming, bulk
  execute/submit, and a redesigned tool-call UI (#3837, #3843)
- **Dimension Rankings Dashboard** - New dashboard tabs for team,
customer, BU, and user
  rankings, backed by a GetDimensionRankings API (#3766)
- **Model Pricing Attributes** - additional_attributes on model pricing
rows with management
  API and UI editor (#3829)
- **Prompt Cache Retention** - Prompt cache retention parameter on
responses requests
  (#3810)
- **Opus 4.8 Support** - System message handling and compatibility for
Opus 4.8 (#3878,
  #3868)
  - **Key Rotation** - Rotate keys on 401/402/403 and return 502
upstream_credentials_exhausted when all keys are permanently dead
(#3491)
- **OTel Metrics** - OTel spec compatible metrics plus provider and
semantic cache
  attributes in metrics export (#3865, #3816)
- **Sheet Navigation** - Prev/next keyboard navigation and URL state
across virtual key, MCP
  client, and routing rule sheets (#3739, #3740, #3744, #3745)
  - **Go 1.26.3** - Upgraded toolchain to Go 1.26.3 (#3782)

  ## 🐞 Fixed

- **Bedrock Tool Names** - Truncate Bedrock function/tool names to the
provider length limit
- **Bedrock Guardrails** - Set guardrail config in Bedrock request built
from responses
  (#3862)
- **Anthropic Tool Use** - Default Anthropic tool_use input to {} when
arguments are absent
  (#3880)
  - **Responses Streaming** - Fixed responses stream events (#3838)
- **Compat Flow** - Fixed missing parameter parsing on the compat flow
(#3881)
- **Passthrough API Version** - Set a default API version in passthrough
requests as a
  fallback (#3853)
- **Virtual Key Updates** - Avoid overriding optional fields during
virtual key update
  (#3855)
- **User-Mode Flows** - Gate user-mode flows on caller user_id, skip
temp token mint, and
  unify flow/credential kind filtering for pending flows (#3841, #3859)
- **Partial Tool Calls** - Handle partial tool call execution failures
and return successful
  results (#3849)
- **URL Query Escaping** - Support escaped characters in URL query
parameters (#3826)
- **MCP Auth Errors** - Inline banner and retry support for MCP
auth-required errors (#3856)
- **JSON Editor Height** - Cap JSON editor max height at 400px in
message views (#3842)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants