feat: add filter sidebar with faceted filtering to MCP clients page

[impoiler]

Summary

Adds a collapsible filter sidebar to the MCP Registry page, enabling users to narrow down MCP clients by connection type, auth type, connection state, code mode, enabled/disabled status, and virtual key access. Filter state is persisted in the URL via query parameters so results are shareable and survive page refreshes.

Changes

• Introduced MCPClientsFilterSidebar with collapsible sections for Connection Type, Auth Type, State, Code Mode, Status, and VK Access filters. Collapse state is persisted to localStorage.
• Added a VKAccessFilterSection that fetches virtual keys server-side with a debounced search input, supporting both an "All virtual keys" pinned option and individual VK selection.
• Boolean facets (code_mode, status) are modeled as string arrays so all checkbox sections share a uniform data model; a single selection resolves to a concrete boolean filter, while zero or both selections produce no filter.
• Extended URL query state in page.tsx to include connection_types, auth_types, states, code_mode, status, only_all_vks, and virtual_keys array params.
• When no filters or search are active and totalCount === 0, the page renders full-width without the sidebar to preserve the onboarding empty-state CTA.
• Extended GetMCPClientsParams and the mcpApi query builder to forward the new filter params (connection_type, auth_type, state, virtual_keys, code_mode, disabled, all_virtual_keys) to the backend.
• Added filtersActive prop to MCPClientsTable so the empty-state logic correctly accounts for active sidebar filters.
• Applied fixed column widths and table-fixed layout to the MCP clients table to prevent layout shift when the sidebar is present, and added truncation to the Name cell.

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 MCP Registry page.
2. Confirm the filter sidebar renders on the left with collapsible sections for Connection Type, Auth Type, State, Code Mode, Status, and VK Access.
3. Select one or more filter options and verify the table updates to show only matching clients.
4. Confirm the active filter count badge appears on the sidebar toggle when filters are selected.
5. Collapse the sidebar using the hide button and confirm the collapsed icon strip appears with the count badge; expand it again and confirm filters are preserved.
6. Reload the page and confirm filter selections are restored from the URL.
7. Click Reset and confirm all filters clear and the URL params are removed.
8. With no clients and no filters active, confirm the full-width onboarding empty state renders without the sidebar.

cd ui
pnpm i || npm i
pnpm build || npm run build

Screenshots/Recordings

Breaking changes

• Yes
• No

Related issues

Link related issues here.

Security considerations

No new auth surfaces introduced. Virtual key data fetched through the existing authenticated useGetVirtualKeysQuery hook.

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]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a25fe6bd-4e85-459f-937e-57287f599b89

📥 Commits

Reviewing files that changed from the base of the PR and between 010a3aa and c0bb8c4.

📒 Files selected for processing (5)

• ui/app/workspace/mcp-registry/page.tsx
• ui/app/workspace/mcp-registry/views/mcpClientsFilterSidebar.tsx
• ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx
• ui/lib/store/apis/mcpApi.ts
• ui/lib/types/mcp.ts

---

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Added a richer MCP clients filter sidebar with connection/auth/state/code mode/status and a virtual-key picker, including an “All virtual keys” option and searchable, debounced VK selection.
  • Expanded shareable URL filtering to support multi-facet selections, with code mode/status translated into boolean query values only when unambiguous.
• Bug Fixes
  • Improved onboarding/empty-state rendering to differentiate “no servers at all” vs “no matches after filtering,” with more accurate active-filter detection.
  • Tightened the clients table layout and added truncated client names with tooltips.

Walkthrough

This PR adds multi-facet filtering to the MCP clients page, with sidebar controls, URL/query-state syncing, API parameter forwarding, and table updates for filter-aware empty states and layout.

Changes

MCP clients filtering

Layer / File(s)	Summary
Filter params contract and API request ui/lib/types/mcp.ts, ui/lib/store/apis/mcpApi.ts	GetMCPClientsParams adds facet fields, and getMCPClients forwards them into /mcp/clients when present.
Page filter state and query wiring ui/app/workspace/mcp-registry/page.tsx	URL query state expands to multiple facets; derived filter state is passed into the clients query.
Filter sidebar component ui/app/workspace/mcp-registry/views/mcpClientsFilterSidebar.tsx	Adds the filter model, reset baseline, collapsible sections, checkbox filters, and searchable virtual-key selection.
Page layout and empty state ui/app/workspace/mcp-registry/page.tsx	Builds a reusable table element, adds an onboarding empty state, and renders the sidebar next to the table.
Table filter-aware rendering ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx	Adds filtersActive handling, updates empty-state detection, tightens table layout, and truncates the Name cell.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant MCPServersPage
  participant MCPClientsFilterSidebar
  participant useGetMCPClientsQuery
  participant mcpApi

  User->>MCPServersPage: change URL-backed filter state
  MCPServersPage->>MCPClientsFilterSidebar: pass current filters and reset handler
  User->>MCPClientsFilterSidebar: select facets or virtual keys
  MCPClientsFilterSidebar->>MCPServersPage: onFiltersChange
  MCPServersPage->>useGetMCPClientsQuery: send filter-derived params
  useGetMCPClientsQuery->>mcpApi: request /mcp/clients
  mcpApi-->>MCPServersPage: filtered client list

Loading

Possibly related PRs

• maximhq/bifrost#3799: Both PRs modify the MCP clients table UI in ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx.
• maximhq/bifrost#4767: Both PRs extend MCP clients list filtering and propagate query state through page.tsx, mcpApi.ts, and GetMCPClientsParams.

Suggested reviewers: akshaydeo, danpiths

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a faceted filter sidebar to the MCP clients page.
Description check	✅ Passed	The description covers summary, changes, testing, screenshots, breaking changes, security, and checklist, with only related issues left as a placeholder.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 07-02-feat_mcp_clients_filters_support_frontend

---

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

[impoiler]

• feat: add pagination and filtering to MCP clients list endpoint #4841
• feat: add filter sidebar with faceted filtering to MCP clients page #4840 👈 (View in Graphite)
• feat: add connection_type, auth_type, state, and virtual_key filters to MCP clients list #4839
• dev

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

[greptile-apps]

Confidence Score: 5/5

Safe to merge; the filter sidebar is purely additive UI, all filter state flows through existing authenticated API endpoints, and no new auth surfaces are introduced.

The change is scoped to the MCP Registry UI — new URL state params, a new sidebar component, and minor table adjustments. All data fetching goes through existing RTK Query hooks and the authenticated mcpApi. The boolean-facet overcounting issue (when both code_mode or status options are selected) was already flagged in a previous review round, and the only new finding is a P2 UX gap where VK selections beyond the first page aren't visually reflected in the sidebar.

The VK pagination gap in mcpClientsFilterSidebar.tsx (VKAccessFilterSection) is worth a follow-up if shared filter URLs with large VK lists are expected.

Important Files Changed

Filename	Overview
ui/app/workspace/mcp-registry/page.tsx	Adds filter URL state and wires it to the API query; the onboarding empty-state guard correctly uses filtersActive but that flag overcounts boolean facets when both options are selected (pre-flagged in thread). New logic is otherwise sound.
ui/app/workspace/mcp-registry/views/mcpClientsFilterSidebar.tsx	New 466-line sidebar component with good data-testid coverage and localStorage collapse persistence. activeFilterCount correctly accounts for boolean facets. VK section only shows first 25 results, so shared-URL VK selections beyond page 1 won't appear as checked.
ui/app/workspace/mcp-registry/views/mcpClientsTable.tsx	Adds filtersActive prop, fixed column widths with table-fixed layout, and Name cell truncation. Changes are minimal and correct; data-testid on the table element is preserved.
ui/lib/store/apis/mcpApi.ts	Forwards new filter params to the backend; boolean params (code_mode, disabled, all_virtual_keys) use !== undefined guard to allow false values through. Correct.
ui/lib/types/mcp.ts	Extends GetMCPClientsParams with new filter fields; types are accurate and well-commented.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant URL as URL / nuqs
    participant Page as MCPServersPage
    participant Sidebar as MCPClientsFilterSidebar
    participant Table as MCPClientsTable
    participant API as mcpApi (RTK Query)

    URL->>Page: hydrate urlState (search, connection_types, auth_types, states, code_mode, status, only_all_vks, virtual_keys, offset)
    Page->>Page: build filters memo from urlState
    Page->>Page: compute filtersActive flag
    Page->>API: useGetMCPClientsQuery(limit, offset, search, connection_type, auth_type, state, virtual_keys, all_virtual_keys, code_mode, disabled)
    API-->>Page: "{ clients, total_count }"

    alt "totalCount === 0 and no filters/search"
        Page->>Table: render full-width (onboarding CTA)
    else
        Page->>Sidebar: render with filters + onFiltersChange
        Page->>Table: render with filtersActive prop
    end

    Sidebar->>Page: onFiltersChange(newFilters)
    Page->>URL: setUrlState(newFilters + offset:0)
    URL->>Page: re-hydrate triggers new API call

    Note over Sidebar: VKAccessFilterSection fetches VKs via useGetVirtualKeysQuery (first 25, debounced search)

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant URL as URL / nuqs
    participant Page as MCPServersPage
    participant Sidebar as MCPClientsFilterSidebar
    participant Table as MCPClientsTable
    participant API as mcpApi (RTK Query)

    URL->>Page: hydrate urlState (search, connection_types, auth_types, states, code_mode, status, only_all_vks, virtual_keys, offset)
    Page->>Page: build filters memo from urlState
    Page->>Page: compute filtersActive flag
    Page->>API: useGetMCPClientsQuery(limit, offset, search, connection_type, auth_type, state, virtual_keys, all_virtual_keys, code_mode, disabled)
    API-->>Page: "{ clients, total_count }"

    alt "totalCount === 0 and no filters/search"
        Page->>Table: render full-width (onboarding CTA)
    else
        Page->>Sidebar: render with filters + onFiltersChange
        Page->>Table: render with filtersActive prop
    end

    Sidebar->>Page: onFiltersChange(newFilters)
    Page->>URL: setUrlState(newFilters + offset:0)
    URL->>Page: re-hydrate triggers new API call

    Note over Sidebar: VKAccessFilterSection fetches VKs via useGetVirtualKeysQuery (first 25, debounced search)

Loading

_{Reviews (5): Last reviewed commit: "feat_mcp_clients_filters_support_fronten..." | Re-trigger Greptile}

[Pratham-Mishra04]

Merge activity

• Jul 2, 10:09 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jul 2, 10:11 AM UTC: Graphite rebased this pull request as part of a merge.
• Jul 2, 10:12 AM UTC: @Pratham-Mishra04 merged this pull request with Graphite.

The base branch was changed.