refactor(ui): consolidate table cells onto a shared table_cells kit

[ryan-crabbe-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

Stacked on #32209, so the diff here is only the cell kit and the conversions; it retargets to staging when that merges. To verify in the app (screenshots to follow):

1. Run the proxy and dashboard, then open http://localhost:4000/ui/?page=logs. The Time column should read like "Jul 7, 09:50:13" in regular font with a full timestamp tooltip on hover, Status should be a tinted status pill, Cost keeps 6 decimals, and Session ID / Request ID / Key Hash render as mono id cells with the same click behavior as before (session filter, key hash filter, row click still opens the drawer)
2. Open http://localhost:4000/ui/?page=api-keys. Created/Updated/Expires/Last Active dates converge to "Jul 7, 2026" style with "Never"/"Unknown" fallbacks preserved; Spend shows "$5.5000" style; a blocked key shows a red "Blocked" pill whose hover tooltip still carries the block reason (including the SCIM variant)
3. Spot-check Users, Teams (members tab), Organizations, Guardrails, Tags, Vector Stores, Prompts, Plugins, MCP Toolsets, Audit Logs and the Usage tables: every date, spend/budget, id and status cell should look consistent (one date format, "$" on money, blue mono id pills, tinted status pills) while clicks, tooltips with extra info, and "Unlimited"/"Never" semantics behave as before
4. cd ui/litellm-dashboard && npx vitest run (4,183 tests passing, including 33 new kit tests plus a hover regression test for the Badge ref fix)

6-9ac7-ceebed848997" />

Type

🧹 Refactoring

Changes

Step 3 of the tables track begins with the cell kit: a new components/shared/table_cells/ folder with four components that column defs import so every table renders these cell types one way. DateCell (local "Jul 7, 09:50:13" or "Jul 7, 2026" plus a full timestamp tooltip; per-site fallback text; unparseable dates render the fallback instead of "Invalid Date"), MoneyCell (wraps getSpendString; emptyText for null budgets, showZero so a $0 budget never reads "Unlimited"), IdCell (one blue mono pill or plain mono, CSS truncation replacing seven slice strategies, full-id tooltip, click-to-navigate and click-to-copy as props) and StatusBadge (tinted pill over ui/badge styled like the antd Tags the keys page used before, five tones, per-site value-to-tone mapping stays in the column defs)

106 cell sites across 44 table files were converted onto the kit. This replaces 8 date formats, 6 spend formats, 7 id truncation strategies, one blue pill class string copy-pasted verbatim across files, and 4 hand-rolled status badge styles. Deliberate convergences: dates get one format and gain tooltips, zero spend renders "-", money always gets "$" and comma grouping at each site's existing decimals, null budgets read "Unlimited", pure null markers read "-" while semantic fallbacks ("Never", "Unknown") are preserved per site. Cells with genuinely different semantics (relative "ago" times, expiry countdowns, price-per-1M columns, composite cells) were deliberately left alone

Every conversion was reviewed by an adversarial behavior-parity pass that diffed old against new per site (displayed data, null/zero/invalid handling, tooltip content, click and copy interactions, test ids) before landing; all 45 reviews pass

One real bug surfaced and is fixed here: ui/badge.tsx did not forward refs, so composing a Base UI tooltip trigger over Badge silently never opened under React 18 ( ui/button.tsx already forwarded refs, which is why chat tooltips worked). Badge now uses forwardRef and the kit has a hover regression test that fails if that ever regresses

Dead code removed: the unused auditLogColumns export in view_logs/columns.tsx (superseded by audit_logs.tsx) and TimeCell, whose two consumers now render DateCell. Net diff is about minus 500 lines

Post-review: the Cost tooltip no longer renders for zero or null spend (hovering "-" used to show a raw "$0" title; that mismatch predates this PR but is fixed here with a regression test in columns.test.tsx), and healthCheckColumns dropped its unused getStatusBadge parameter along with the dead helper and tremor Badge import in HealthCheckComponent

[greptile-apps]

Greptile Summary

This PR introduces a shared components/shared/table_cells/ kit (DateCell, MoneyCell, IdCell, StatusBadge, CellTooltip) and migrates 106 cell sites across 44 table files onto it, eliminating 8 date formats, 6 spend formats, and 7 ID truncation strategies in favour of one consistent rendering path per cell type.

• New kit cells — DateCell renders "Jul 7, 09:50:13" / "Jul 7, 2026" with a full-timestamp tooltip; MoneyCell wraps getSpendString with $ prefix, comma grouping, and null-budget "Unlimited"/"Never" fallbacks; IdCell consolidates CSS-truncated blue mono pills and plain mono text with tooltip + optional copy button; StatusBadge is a tinted outline badge over the updated Badge component.
• Badge forwardRef fix — Badge now uses React.forwardRef so Base UI's TooltipTrigger render={badge} can attach its ref; without this, StatusBadge tooltips silently never opened under React 18. A dedicated hover regression test is added to guard this.
• Dead code removed — the unused auditLogColumns export, TimeCell, getStatusBadge parameter in healthCheckColumns, and the matching moment import in audit_logs.tsx are all gone; net diff is approximately −500 lines.

Confidence Score: 5/5

Safe to merge — this is a pure UI refactoring that converges table cell rendering onto a shared kit without touching any backend, API, or auth path.

Every converted site was reviewed for data parity (null/zero handling, tooltip content, click and copy interactions). The one real bug fixed here (Badge missing forwardRef) is covered by a new hover regression test. Modified tests were updated to match the new component contract — none weaken coverage. No backend or business logic was changed.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/shared/table_cells/date_cell.tsx	New DateCell kit component — renders "Jul 7, 09:50:13" (datetime) or "Jul 7, 2026" (date), falls back to configured text for null/invalid inputs, and wraps in a full-timestamp tooltip via CellTooltip. Tests cover all edge cases including unparseable dates.
ui/litellm-dashboard/src/components/shared/table_cells/id_cell.tsx	New IdCell kit component — renders a blue mono pill (pill variant) or plain mono text (plain variant) with CSS truncation, tooltip showing the full ID, optional click-to-navigate, optional copy button, and disabled state. Tests cover all variants.
ui/litellm-dashboard/src/components/shared/table_cells/money_cell.tsx	New MoneyCell kit component — wraps getSpendString/formatNumberWithCommas; renders "-" for null/undefined/zero (unless showZero), customizable emptyText for null budgets, correct "$" prefix with commas. Tests verify all cases.
ui/litellm-dashboard/src/components/shared/table_cells/status_badge.tsx	New StatusBadge kit component — tinted outline badge (5 tones) over the updated Badge component; optional tooltip via CellTooltip. Hover test validates the forwardRef fix on Badge is required for the tooltip to open.
ui/litellm-dashboard/src/components/ui/badge.tsx	Badge converted to forwardRef so Base UI TooltipTrigger can attach its ref; displayName added. This unblocks all CellTooltip-wrapped StatusBadge usages from silently failing to open under React 18.
ui/litellm-dashboard/src/components/view_logs/columns.tsx	Migrated Time, Status, Session ID, Request ID, Cost, and Key Hash columns to kit cells; removed dead auditLogColumns export and TimeCell import. Cost column keeps the antd Tooltip wrapper for raw-precision value (title set to undefined when spend is 0/null, eliminating the prior $0 tooltip mismatch).
ui/litellm-dashboard/src/components/VirtualKeysPage/VirtualKeysTable.tsx	Key ID, Status (Active/Blocked with SCIM tooltip), Created/Updated/Expires/Last Active/Budget Reset dates, and Spend columns all converted to kit cells; Tremor Button import removed. Test updated to use userEvent.hover for the Base UI-backed StatusBadge tooltip.
ui/litellm-dashboard/src/components/model_dashboard/health_check_columns.tsx	Removed dead getStatusBadge parameter and replaced the caller's local Badge logic with a module-level healthStatusBadge helper using StatusBadge/StatusTone; IdCell replaces the inline blue pill. HealthCheckComponent.tsx updated to stop passing the unused callback.
ui/litellm-dashboard/src/components/team/TeamMemberTab.tsx	Spend, total spend, budget, and budget-reset columns converted to MoneyCell/DateCell. getUserBudget return type narrowed from string
ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx	Timestamp column switched from moment.js to DateCell (local time, same conversion), Object ID from plain span to IdCell(plain, no truncate), Changed By API Key from 12-char slice to IdCell(plain) with default 15ch truncation. moment import removed.

_{Reviews (3): Last reviewed commit: "Merge remote-tracking branch 'origin/lit..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[ryan-crabbe-berri]

@greptileai

[codspeed-hq]

Merging this PR will not alter performance

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
❌ 2 regressed benchmarks
✅ 27 untouched benchmarks

Warning

Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	test_completion_with_tools	3.2 ms	4.2 ms	-23.89%
❌	test_completion_simple_message	3.3 ms	4 ms	-18.73%
⚡	test_completion_multi_turn	4.2 ms	3.1 ms	+33.85%

Tip

Investigate this regression by commenting @codspeedbot fix this regression on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing litellm_shared_table_cells (63ac4db) with litellm_internal_staging (5973d9f)}

[ryan-crabbe-berri]

@greptileai re review