feat(ui): add configuration tabs to the Cost Optimization page

[devin-ai-integration]

Relevant issues

Follow-up to the Cost Optimization dashboard (#33810). Adds configuration tabs so the mechanisms that drive savings can be managed from the same page.

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

Screenshots / Proof of Fix

UI-only change. To exercise it against a live proxy (bundled UI at http://localhost:4000/ui):

1. Open http://localhost:4000/ui/?page=cost-optimization. The page shows four tabs: Usage, Prompt Compression, Autorouter, Prompt Caching
2. Usage tab renders the existing savings dashboard unchanged (cards, savings-over-time, driver donut)
3. Prompt Compression tab explains the native Headroom integration, links the setup doc, lists existing Headroom guardrails, and on submit creates one via the same /guardrails endpoint as the standalone Guardrails page
4. Autorouter tab renders the same Auto-Router v2 flow used on Models + Endpoints and creates a router via /model/new; confirm it also appears on http://localhost:4000/ui/?page=models
5. Prompt Caching tab renders the Router Settings "Automatic Anthropic prompt caching" panel; toggling it persists via the same config-field endpoint, so the change is reflected on Router Settings too

Type

🆕 New Feature

Changes

Turns the Cost Optimization page (/ui/cost-optimization) into a tabbed hub. An info banner marks the page as an experimental dashboard and links the feedback discussion. The existing dashboard becomes the Usage tab, and three configuration tabs are added alongside it. Per review feedback, the config tabs reuse the existing mature components rather than reimplementing them, so there is a single source of truth for each config:

• Usage — the existing savings dashboard (cards + savings-over-time + driver donut), unchanged behavior, extracted into UsageTab. Adds a collapsible "How savings are calculated" note documenting the per-request pricing methodology and the daily-rollup source.
• Prompt Compression — a focused form over the shared guardrails API that creates the native headroom guardrail. Copy now names Headroom explicitly, explains that it compresses prompts before they reach the model (savings shown on the Usage tab), clarifies that "API base" is the Headroom service URL, and links the setup docs. Adds a callout clarifying that enabling compression selectively per key or team is a LiteLLM Enterprise feature while applying it to all requests is available to everyone.
• Autorouter — reuses AddAutoRouterTab (the Auto-Router v2 flow from Models + Endpoints): complexity-tier routing, optional keyword/semantic matching, model access groups, connection test, same /model/new submit path.
• Prompt Caching — reuses the Router Settings PromptCachingPanel (automatic Anthropic prompt caching toggle + cache-lifetime TTL). The Redis global-cache form was removed; this panel writes through the same updateConfigFieldSetting / deleteConfigFieldSetting calls as Router Settings.

Design notes:

• Additive only. No existing page/route is removed. Guardrails, Models + Endpoints / Autorouter, and Router Settings are untouched. PromptCachingPanel is now exported from the Router Settings component and mounted here with a thin loader; AddAutoRouterTab is mounted with a local antd form instance. Both hit the exact backend contract as their standalone pages.
• Compression payload building/filtering stays in a small pure helpers.ts and is unit-tested; tab wiring and switching are covered by component tests.
• Secrets are never persisted to localStorage.

Files:

• cost-optimization/_components/CostOptimizationView.tsx — antd Tabs shell
• cost-optimization/_components/UsageTab.tsx (+ test) — extracted dashboard
• cost-optimization/_components/PromptCompressionTab.tsx — Headroom copy + doc link
• cost-optimization/_components/AutorouterTab.tsx — wraps AddAutoRouterTab
• cost-optimization/_components/PromptCachingTab.tsx — wraps PromptCachingPanel
• cost-optimization/_components/helpers.ts (+ test) — compression payload/filter helpers
• router-settings/_components/general_settings.tsx — export PromptCachingPanel for reuse

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

Link to Devin session: https://app.devin.ai/sessions/2d6b95b424a047c4b6d177b6ddcd7f46
Requested by: @krrish-berri-2

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[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.}

[greptile-apps]

Greptile Summary

Turns the Cost Optimization page into a four-tab hub (Usage, Prompt Compression, Autorouter, Prompt Caching) without removing any existing pages or routes. Each configuration tab reuses a mature existing component (AddAutoRouterTab, PromptCachingPanel) or a new focused form, so there is a single source of truth for each feature.

• Usage tab — existing savings dashboard extracted verbatim into UsageTab.tsx, plus a collapsible "How savings are calculated" methodology note; all prior logic tests migrated to UsageTab.test.tsx with full coverage preserved.
• Prompt Compression tab — new Headroom guardrail creation form backed by the existing /guardrails API; helpers extracted to helpers.ts with unit tests.
• Autorouter / Prompt Caching tabs — thin wrappers around AddAutoRouterTab and PromptCachingPanel; PromptCachingPanel and generalSettingsItem are now exported from general_settings.tsx (additive only). Both previously flagged issues (port-field NaN validation, vacuous tab-switch test) are resolved — the Redis form was removed entirely, and the tab-switch test now asserts aria-selected before and after the click.

Confidence Score: 5/5

UI-only additive change; no existing routes or backend contracts are modified.

Both issues raised in the previous review are addressed: the Redis port form is gone (along with the NaN-validation gap), and the tab-switch test now asserts aria-selected state rather than mere DOM presence. The remaining no-op await in PromptCompressionTab was already surfaced as a style note in the prior round. No new logic defects are introduced; backend calls reuse the same endpoints as the standalone pages they mirror.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CostOptimizationView.tsx	Refactored into a tabbed shell using antd Tabs; previous dashboard logic extracted to UsageTab, three new config tabs added alongside it
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CostOptimizationView.test.tsx	Tests updated to focus on tab structure; now properly asserts active tab via aria-selected before and after a click (previous vacuous pane-presence assertion resolved)
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.tsx	Dashboard content extracted verbatim from CostOptimizationView; adds a collapsible methodology note; logic and rendering unchanged
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/UsageTab.test.tsx	Previous CostOptimizationView logic tests (savings sums, time series, donut slices) moved here and now correctly target UsageTab; coverage is fully preserved
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCompressionTab.tsx	New Headroom guardrail creation form; loadGuardrails does not return its promise so await loadGuardrails() in handleAdd is a no-op (flagged previously as P2, still present)
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/PromptCachingTab.tsx	Wraps PromptCachingPanel from router-settings; previous P1 (port NaN validation) is fully resolved — the Redis form was removed entirely
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/AutorouterTab.tsx	Thin wrapper around AddAutoRouterTab with a local antd form instance; userId is accepted in the interface but intentionally unused by this adapter layer
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/helpers.ts	Pure helper functions for filtering headroom guardrails and building the create-guardrail payload; well-typed and straightforward
ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/helpers.test.ts	Unit tests for compressionGuardrailsOf (filtering) and buildCompressionGuardrailPayload (payload shape including trim); covers the meaningful edge cases
ui/litellm-dashboard/src/app/(dashboard)/router-settings/_components/general_settings.tsx	Minimal additive change: exports generalSettingsItem interface and PromptCachingPanel for reuse in PromptCachingTab; no behaviour change

_{Reviews (2): Last reviewed commit: "test(ui): assert active tab state in Cos..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_cost_optimization_config_hub (5e06809) with litellm_internal_staging (ac1b4b3)}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[devin-ai-integration]

Screenshots of the four tabs, captured against a live proxy on this branch. The experimental-dashboard banner (with the feedback discussion link) sits above the tabs, so it shows on every tab.

Usage

Prompt Compression (Headroom copy + setup docs link)

Autorouter (Auto-Router v2, reused from Models + Endpoints)

Prompt Caching (Router Settings automatic Anthropic prompt-caching panel)

[devin-ai-integration]

Follow-up: added a savings methodology note and an Enterprise callout.

Usage tab now has a collapsible "How savings are calculated" note explaining that savings are priced per request at log time from the provider's reported usage and the model's pricing, then summed into the daily rollup (no raw-log scan), with the compression and prompt-caching formulas spelled out.

Prompt Compression tab now clarifies that applying compression to all requests is available to everyone, while enabling it selectively per key or team is a LiteLLM Enterprise feature.

[devin-ai-integration]

Both findings from the 3/5 review are addressed:

1. Port field NaN validation (PromptCachingTab): resolved by a design change. The Redis connection form was removed entirely; the Prompt Caching tab now reuses the Router Settings "Automatic Anthropic prompt caching" panel (a toggle plus a TTL selector), so there is no free-text port field to mis-validate.

2. Vacuous tab-switch test (CostOptimizationView.test.tsx): the assertion now checks the active tab via aria-selected before and after the click (Usage selected by default, then Prompt Compression selected after clicking it), instead of relying on pane presence, which was always true since antd keeps all panes mounted.

@greptileai please re-review.