refactor(ui): migrate AI Hub, public hub, and MCP Toolsets tables onto shared DataTable

[yuneng-berri]

Relevant issues

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

All surfaces were exercised on a live proxy plus npm run dev at commit 9052fe4. Steps to reproduce and screenshot, with the proxy on localhost:4000 and the dev server on localhost:3000:

1. Go to http://localhost:3000/model-hub-table and scroll to the tabs. The Model Hub tab shows the migrated table: sortable Public Model Name / Provider / Mode / Tokens / Cost/1M / Public headers, provider and feature badges, and a per-row overflow menu with "View details" and "Copy model name". Clicking a model name or "View details" opens the existing details modal
2. Switch to the Agent Hub and MCP Hub tabs; same shape (name click opens the modal, copy moved into the overflow menu). With no rows, each tab shows an inbox empty state instead of a bare "No models found" line
3. Switch to the Skill Hub tab: stats row and domain/search filters are unchanged, the table below is on the shared DataTable, and loading now renders skeleton rows instead of a "Loading skills..." text swap
4. Go to MCP Servers, Toolsets tab. The table shows Toolset ID (copy pill), Name with the endpoint URL as a mono subtitle, prefixed tool chips capped at 4 with "+N more", and Created. The overflow menu has "Copy endpoint URL" and "Copy toolset ID" for everyone; Edit and Delete append for admins only, and the name click opens the edit modal for admins only
5. Open the public page at http://localhost:3000/model_hub_table (models must be marked public first). The Available Models table keeps provider logos, mode icons, cost columns, the features overflow tooltip, and the health status tooltip, now rendered by the shared DataTable

Type

🧹 Refactoring

Changes

Migrates the last five simple admin tables onto the shared DataTable + table_cells library, continuing #33128 / #33303 / #33314 / #33343 / #33357 / #33548: the four AI Hub tabs (Model, Agent, MCP, Skill), the three tables inside the public model hub page, and MCP Toolsets. The hub columns files move to PascalCase homes under components/AIHub/ (ModelHubTableColumns, AgentHubTableColumns, MCPHubTableColumns, SkillHubTableColumns), the public hub's three inline column sets extract to PublicModelHubTableColumns.tsx, and MCP Toolsets gets MCPToolsetTableColumns.tsx

Interaction affordances unify to the established pattern: the name cell and a per-row overflow menu act on a row, inline copy icons become "Copy ..." menu items, and the legacy per-row "Details" buttons become both a clickable name cell and a "View details" item. Detail modals stay in the containers. For MCP Toolsets, the admin-gated pencil/trash inline buttons move into the menu with copy actions available to all roles, preserving the legacy permission split

This removes three of the five consumers of the legacy model_dashboard/table.tsx renderer (only HealthCheckComponent, a complex-batch table, still uses it) and takes MCP Toolsets off the view_logs/table.tsx clone. Loading flags now resolve on every exit path, so a null access token lands on the empty state instead of an infinite loading row, pinned by a parent-level test. Column tests cover the URL non-exposure invariants for MCP hub tables, menu actions, clipboard writes, and the toolset admin gating. Stale eslint suppressions for the rewritten files are pruned

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

This PR completes the migration of the five remaining hub tables (Model Hub, Agent Hub, MCP Hub, Skill Hub, and MCP Toolsets) and the three public model hub tables onto the shared DataTable + table_cells component library, following the pattern established in earlier PRs (#33128–#33548).

• Column definitions are extracted to dedicated PascalCase files under components/AIHub/ and a new PublicModelHubTableColumns.tsx, keeping public-surface and admin-surface columns properly separated.
• A genuine bug is fixed: when accessToken is null on the admin page, the model, agent, and MCP loading flags now call setLoading(false) on their early-return paths, resolving the infinite-loading state that a new regression test pins.
• The previously-missing skillHubPublicCall mock in public_model_hub.test.tsx is added, and the agent hub test suite is strengthened from a presence-of-button check to click+callback assertions.

Confidence Score: 5/5

Safe to merge — the change is a mechanical table migration with no backend mutations, and the loading-state fix is pinned by an explicit regression test.

All changed files are UI-only. The refactoring follows the established DataTable pattern used across the codebase, the loading-state bug that was fixed is covered by a new test, and the previously-flagged missing mock is now present. No test coverage was weakened; the agent hub suite is strictly stronger after the rewrite.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/AIHub/ModelHubTable.tsx	Migrates Model, Agent, and MCP hub tables to shared DataTable; adds loading-state early-return when accessToken is null, fixing the infinite-loading bug on auth-less admin views
ui/litellm-dashboard/src/components/AIHub/ModelHubTableColumns.tsx	New file: column definitions for the admin-side Model Hub table with sortable headers, overflow actions menu, and model capability chips
ui/litellm-dashboard/src/components/AIHub/MCPHubTableColumns.tsx	New file: column definitions for admin MCP Hub; deliberately omits a URL column and keeps the server URL out of rendered cells, with tests confirming this invariant
ui/litellm-dashboard/src/components/AIHub/AgentHubTableColumns.tsx	Rewrites column definitions to use shared DataTable components and an overflow actions menu; removes the publicPage parameter (now handled by a separate PublicModelHubTableColumns file)
ui/litellm-dashboard/src/components/PublicModelHubTableColumns.tsx	New file: column definitions for the public-facing model, agent, and MCP hub tables; correctly separates public surface columns from admin columns and preserves provider logos and health-status tooltips
ui/litellm-dashboard/src/components/public_model_hub.tsx	Migrates three public tables to shared DataTable; adds skillHubPublicCall for the Skill Hub tab; the pre-existing JSON.stringify(mcp_info) in the MCP details modal remains but was already flagged in prior review
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetsTab.tsx	Migrates toolsets table to shared DataTable and extracts column definitions to MCPToolsetTableColumns.tsx; loading and empty states are properly handled
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetTableColumns.tsx	New file: column definitions for MCP Toolsets table; admin-gated edit/delete actions in overflow menu, copy actions available to all roles, server-prefixed tool chip rendering
ui/litellm-dashboard/src/components/AIHub/SkillHubDashboard.tsx	Migrates Skill Hub table to shared DataTable with proper empty state and loading skeleton; removes inline copyToClipboard helper in favour of the shared utility
ui/litellm-dashboard/src/components/AIHub/AgentHubTableColumns.test.tsx	Test suite updated to use DataTable harness; old 'renders a Details button' test replaced with click+callback assertions that are strictly stronger
ui/litellm-dashboard/src/components/public_model_hub.test.tsx	Mock updated to include the previously-missing skillHubPublicCall stub; health-status assertions simplified to within() which is cleaner and equivalent
ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPToolsetTableColumns.test.tsx	New test file; covers admin-gating, copy actions, tool chip overflow, name click, and empty non-admin menu items
ui/litellm-dashboard/src/components/AIHub/ModelHubTable.test.tsx	Adds regression test confirming null accessToken resolves to empty state instead of infinite loading; adds getClaudeCodePluginsList mock to match component's new call
ui/litellm-dashboard/eslint-suppressions.json	Stale ESLint suppressions for the rewritten files are correctly removed

_{Reviews (2): Last reviewed commit: "test(ui): stub skillHubPublicCall in the..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[yuneng-berri]

@greptile

[devin-ai-integration]

QA: 5 tables migrated onto the shared DataTable

QA'd this branch end to end against a live proxy (localhost:4000) plus npm run dev (localhost:3000). All five surfaces render on the shared DataTable with sortable headers, the unified per-row overflow menu, and rich empty states; no functional regressions found. Note that a fresh npm install is required since the branch pulls in the openapi-fetch / openapi-react-query deps

AI Hub, Model Hub tab

Sortable Public Model Name / Provider / Mode / Tokens / Cost/1M / Public headers, provider and feature badges, and a per-row overflow with "View details" and "Copy model name". "View details" (and clicking the model name) opens the existing model overview modal

AI Hub, Agent Hub and MCP Hub tabs

With no rows, each tab renders the inbox empty state ("No agents yet" / "No MCP servers yet") instead of a bare "No models found" line

AI Hub, Skill Hub tab

Stats row and domain/search filters are unchanged, and the table below is on the shared DataTable with a category badge, source link, and Public status

MCP Servers, Toolsets tab

Toolset ID copy pill, Name with the endpoint URL as a mono subtitle, prefixed tool chips capped at 4 with "+N more", and Created. The overflow menu exposes "Copy endpoint URL" and "Copy toolset ID" for everyone, with Edit and Delete appended for admins. Seeded a toolset with 6 tools via POST /v1/mcp/toolset to exercise the populated row

Public model hub (/model_hub_table)

Marked 3 model groups public, then loaded the public page. The Available Models table keeps provider logos, mode icons, cost columns, the features overflow ("+2"), and the health status column, now rendered by the shared DataTable

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_/migrate-simple-tables-652ff2 (5011cbc) with litellm_internal_staging (224fe67)¹}

Footnotes

1. No successful run was found on litellm_internal_staging (ac29a6a) during the generation of this report, so 224fe67 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩