feat: add filtering and pagination to MCP sessions table

[Pratham-Mishra04]

Summary

Adds server-side filtering and pagination to the MCP Sessions page. Previously the page fetched all sessions in a single unfiltered request. This PR introduces a filter bar with search, type, status, and identity-mode dropdowns, plus previous/next pagination, all synced to the URL via query string so filters survive navigation and can be shared as links.

Changes

• Added a SessionsFilterBar component with a search input and three multi-select dropdowns (type, status, identity mode). Filter values are URL-synced via nuqs with history: "push" so the back button restores previous filter state.
• Debounced the search input (300 ms) to avoid firing a request on every keystroke.
• Wired getMCPSessions to accept MCPSessionsQueryParams (search, kind, status, auth_mode, mcp_client_id, limit, offset). Array filters are CSV-joined to match the backend's parseCommaSeparated convention. Empty values are dropped so RTK Query's cache key doesn't fragment unnecessarily.
• Added a total_count-based pagination footer with Previous/Next buttons. The offset snaps back to the last valid page if a revoke removes the final row on the current page (same pattern used by the virtual keys page).
• Replaced the optimistic patch on revokeMCPSession with invalidatesTags: ["MCPSessions"]. The optimistic approach only worked with a singleton cache key; with per-filter cache entries, invalidating all keyed entries via a tag refetch is simpler and correct.
• Added an icon prop to ComboboxSelectOption and a compactTrigger prop to ComboboxSelect. compactTrigger renders "N selected" instead of a row of badges, preventing overflow in narrow filter-bar dropdowns.
• Added MCPSessionsQueryParams and pagination fields to MCPSessionsListResponse in the type definitions.
• Page size is set to 50 (larger than the governance default of 25) since session rows are denser than virtual key rows.

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 Sessions page.
2. Verify the filter bar appears above the table with a search input and Type, Status, and Identity dropdowns.
3. Enter a search term and confirm the table updates after ~300 ms with matching sessions.
4. Select one or more values in each dropdown and confirm the table filters accordingly.
5. Confirm filter state is reflected in the URL and survives a page refresh.
6. With more than 50 sessions, confirm the pagination footer shows the correct range and that Previous/Next navigate correctly.
7. Revoke a session on the last page (when it is the only row) and confirm the page snaps back to the previous page rather than showing an empty paginated view.
8. Confirm the "Clear filters" button appears only when a filter is active and resets all filters and offset.

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

Screenshots/Recordings

Add before/after screenshots of the MCP Sessions page showing the filter bar and pagination footer.

Breaking changes

• Yes
• No

Related issues

Security considerations

Filter values are passed as query parameters to the existing authenticated /api/mcp/sessions endpoint. No new auth surface is introduced. Filter state stored in the URL does not include secrets.

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

[Pratham-Mishra04]

• feat: add filtering and pagination to MCP sessions table #3825 👈 (View in Graphite)
• feat: add filter/search/pagination to MCP sessions list API #3824
• feat: add can_reauth identity gate for user-mode MCP session rows #3823
• fix: mcp auth session UI improvements #3822
• dev

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

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Warning

Review limit reached

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

More reviews will be available in 22 minutes and 36 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: c5975624-d1ca-4a15-9353-531f9b30d250

📥 Commits

Reviewing files that changed from the base of the PR and between ff0276e and 61ff2b5.

📒 Files selected for processing (7)

• ui/app/workspace/mcp-sessions/page.tsx
• ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx
• ui/app/workspace/mcp-sessions/views/sessionsTable.tsx
• ui/components/ui/combobox.tsx
• ui/lib/store/apis/mcpSessionsApi.ts
• ui/lib/types/mcpSessions.ts
• ui/next-env.d.ts

📝 Walkthrough

Walkthrough

This PR upgrades the MCP sessions page from a basic unfiltered list to a fully featured filterable and paginated experience. The changes flow backward from UI components through state management to the backend API contract: new type definitions support parameterized queries, the combobox gains rendering features needed by filters, a new filter bar provides the UI, the sessions table grows to host filters and pagination controls, and the page component orchestrates everything with URL-driven state and debouncing.

Changes

MCP Sessions Filtering and Pagination

Layer / File(s)	Summary
Type contracts and API layer ui/lib/types/mcpSessions.ts, ui/lib/store/apis/mcpSessionsApi.ts, ui/next-env.d.ts	MCPSessionsListResponse gains optional pagination fields (count, total_count, limit, offset). New MCPSessionsQueryParams type documents the GET /api/mcp/sessions query string shape with optional filters and pagination. getMCPSessions now accepts parameterized filters and pagination, building query strings with selective inclusion and CSV-joined arrays. revokeMCPSession refactored to invalidate keyed list queries. Minor next-env triple-slash reference removed.
Combobox component enhancements ui/components/ui/combobox.tsx	ComboboxSelectOption adds optional icon field for rendering in dropdown lists. Multi-select variant gains compactTrigger prop to collapse selected badges into "N selected" text, and dropdown items now render icons when present. data-testid is passed through to trigger buttons.
Filter bar component ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx	New SessionsFilterBar component renders search input and three multi-select filters (kind, status, auth mode) with in-file option definitions and lucide icons. Conditionally shows "Clear filters" button when any filter is active. Fully controlled via props.
Sessions table with filters and pagination ui/app/workspace/mcp-sessions/views/sessionsTable.tsx	SessionsTableProps expanded to accept search, filter arrays with change handlers, clear handler, pagination state (offset, limit, totalCount), and loading indicator. Integrates SessionsFilterBar above the table and applies opacity transition when fetching. Empty state now distinguishes "no matches for filters" vs "no sessions yet". Pagination footer shows "Showing X–Y of Z" and Previous/Next controls when totalCount > 0.
Page component orchestration and URL state ui/app/workspace/mcp-sessions/page.tsx	MCPSessionsPage now uses useQueryStates to parse filter and pagination parameters from URL (q, kind, status, auth_mode, mcp_client_id, offset) and useDebouncedValue to debounce search before querying. Implements filter change handlers that update query state and reset offset, and a clear-filters handler. Effect snaps offset backward when total count shrinks. All state and handlers wired to SessionsTable.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

• akshaydeo
• danpiths

🐰 With icons and filters in place,
Sessions rows align with grace,
Debounced queries hum along,
Pages flip where results belong,
URL keeps every trace.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.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 clearly and concisely summarizes the main changes: adding filtering and pagination functionality to the MCP sessions table, which is the primary purpose of this PR.
Description check	✅ Passed	The description covers all key sections with comprehensive detail: purpose, implementation changes, type of change, affected areas, testing instructions, security considerations, and a completed checklist. All required template sections are addressed.
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 05-27-feat_adds_mcp_session_ui_filters

---

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

[greptile-apps]

Confidence Score: 4/5

Safe to merge after the isLoading full-page-flash regression (noted in the prior review) is addressed; everything else is well-structured.

The isLoading guard in page.tsx shows a full-screen spinner on every first visit to a new filter combination, replacing the intended opacity overlay. This is a visible regression from the previous behaviour where a single cache entry meant transitions never triggered isLoading. The rest of the change — URL-synced state, sorted-CSV cache keys, tag invalidation, snap-back logic, and the combobox additions — is solid.

ui/app/workspace/mcp-sessions/page.tsx — the isLoading guard needs to be tightened to !data && isLoading so stale-data transitions use the opacity overlay instead of replacing the page.

Important Files Changed

Filename	Overview
ui/app/workspace/mcp-sessions/page.tsx	Adds nuqs URL state for filters and pagination; isLoading guard still triggers full-page loader on every uncached filter combination (noted in prior review)
ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx	New filter-bar component with search, kind, status, and identity-mode multi-selects; clean and self-contained
ui/app/workspace/mcp-sessions/views/sessionsTable.tsx	Integrates SessionsFilterBar and adds a Previous/Next pagination footer; isFetching opacity overlay applied correctly
ui/components/ui/combobox.tsx	Adds icon prop to options, compactTrigger mode for narrow dropdowns, and properly forwards data-testid to both single- and multi-select trigger buttons
ui/lib/store/apis/mcpSessionsApi.ts	Parameterises getMCPSessions with sorted CSV array encoding; switches revokeMCPSession from optimistic patch to invalidatesTags for correctness with per-filter cache keys
ui/lib/types/mcpSessions.ts	Adds MCPSessionsQueryParams and pagination envelope to MCPSessionsListResponse; count field is declared but unused alongside total_count
ui/next-env.d.ts	Removes stale reference to ./out/types/routes.d.ts and adds trailing newline; cosmetic generated-file cleanup

_{Reviews (7): Last reviewed commit: "feat: adds mcp session ui filters" | Re-trigger Greptile}

[coderabbitai]

🧹 Nitpick comments (1)

ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx (1)

52-52: ⚡ Quick win

Rename file to PascalCase to match component-file convention.

SessionsFilterBar export is PascalCase, but the filename sessionsFilterBar.tsx is not. Please rename the file to SessionsFilterBar.tsx and update imports to keep convention consistent.

As per coding guidelines: “ui/**/*.tsx: React component files must use PascalCase for component exports and filenames”.

🤖 Prompt for 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.

In `@ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx` at line 52, The
component export SessionsFilterBar uses PascalCase but the filename
sessionsFilterBar.tsx does not; rename the file to SessionsFilterBar.tsx and
update all imports that reference the old filename to the new one (e.g., import
{ SessionsFilterBar } from './SessionsFilterBar' or default imports pointing to
'./SessionsFilterBar') so the file and export follow the PascalCase
component-file convention used for React components in ui/**/*.tsx.

🤖 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.

Nitpick comments:
In `@ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx`:
- Line 52: The component export SessionsFilterBar uses PascalCase but the
filename sessionsFilterBar.tsx does not; rename the file to
SessionsFilterBar.tsx and update all imports that reference the old filename to
the new one (e.g., import { SessionsFilterBar } from './SessionsFilterBar' or
default imports pointing to './SessionsFilterBar') so the file and export follow
the PascalCase component-file convention used for React components in
ui/**/*.tsx.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 94d2ee77-c50e-4e3c-b47d-683b3a78ee5a

📥 Commits

Reviewing files that changed from the base of the PR and between f16dc9a and 0c43360.

📒 Files selected for processing (7)

• ui/app/workspace/mcp-sessions/page.tsx
• ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx
• ui/app/workspace/mcp-sessions/views/sessionsTable.tsx
• ui/components/ui/combobox.tsx
• ui/lib/store/apis/mcpSessionsApi.ts
• ui/lib/types/mcpSessions.ts
• ui/next-env.d.ts

[coderabbitai]

Actionable comments posted: 1

🤖 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/lib/store/apis/mcpSessionsApi.ts`:
- Around line 21-24: The serialization of
params.kind/status/auth_mode/mcp_client_id uses the incoming array order,
causing different cache keys for the same filter set; update the code that
builds out (the block referencing params and out) to normalize each array before
joining by sorting (e.g., sort a copy of
params.kind/status/auth_mode/mcp_client_id) and then join with "," so the CSV is
stable regardless of selection order.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dec6d322-f904-4852-86d5-30cca7fdcedc

📥 Commits

Reviewing files that changed from the base of the PR and between 0c43360 and 18dd115.

📒 Files selected for processing (7)

• ui/app/workspace/mcp-sessions/page.tsx
• ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx
• ui/app/workspace/mcp-sessions/views/sessionsTable.tsx
• ui/components/ui/combobox.tsx
• ui/lib/store/apis/mcpSessionsApi.ts
• ui/lib/types/mcpSessions.ts
• ui/next-env.d.ts

✅ Files skipped from review due to trivial changes (1)

• ui/next-env.d.ts

🚧 Files skipped from review as they are similar to previous changes (5)

• ui/lib/types/mcpSessions.ts
• ui/app/workspace/mcp-sessions/page.tsx
• ui/app/workspace/mcp-sessions/views/sessionsFilterBar.tsx
• ui/app/workspace/mcp-sessions/views/sessionsTable.tsx
• ui/components/ui/combobox.tsx

[Pratham-Mishra04]

Merge activity

• May 28, 7:29 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 28, 7:37 AM UTC: Graphite rebased this pull request as part of a merge.
• May 28, 7:38 AM UTC: @Pratham-Mishra04 merged this pull request with Graphite.

The base branch was changed.