litellm/ui
tin-berri dca7ba18d4
feat(ui): show models under each tier in routing benchmark chart (#36291)
* feat(ui): show models under each tier in routing benchmark chart

- Add TierTurnsChart: donut chart showing turns per complexity tier with
  tier-assigned models listed below each tier name in the legend
- Only complexity routers show models; quality routers show tier name + %
  (quality tiers don't pin specific models)
- Change 'Estimated spend at highest-cost model' wording to 'highest-tier'
  to clarify it's the most capable tier's estimated cost, not just the
  single-highest model

Closes LIT-5302

* fix(ui): use categorical colors for tier donut, trim redundant turn count

- Tier donut chart now uses a dedicated categorical palette instead of
  SEQUENTIAL_COLOR_RAMP, which is a blue monochrome gradient meant for
  magnitude series, not distinct categories.
- Space out the tier legend rows (gap-3 -> gap-6) for readability.
- Drop the turn count from "avg saved per session" since Routing by
  tier already shows the total turns.

Co-Authored-By: Claude <noreply@anthropic.com>

* test(ui): drop prohibited explanatory comments in TierTurnsChart test

Per repo convention against source comments; the test name and
assertions already communicate the scenario. Addresses Greptile review.

Co-Authored-By: Claude <noreply@anthropic.com>

* Remove dead modulo from color index in TierTurnsChart

The colors array is built with length equal to slices.length, so idx % colors.length
is always a no-op in the render loop. Simplify to idx for clarity.

* fix(ui): wrap CostOptimizationView tests in QueryClientProvider

The tests render CostOptimizationView which uses useCan() → useIsOrgAdmin() →
useOrganizations() and useDailyActivityRange(), both of which call React Query's
useQuery(). Without QueryClientProvider wrapping the render, React Query throws
'No QueryClient set' error.

Also mock the required networking calls (organizationListCall, userDailyActivityCall)
to prevent spurious network errors in test runs.

All 7 tests now pass (CostOptimizationView + CostOptimizationView.activity).

* style(ui): format test files and extract object literal to fix linting

- Format CostOptimizationView.test.tsx with prettier
- Extract getToolSpend mock response to named variable to satisfy eslint
- Pass frontend-lint checks

* fix(ui): hoist mockToolSpendResponse into vi.hoisted to fix test initialization

Extracting the response object to a named variable violated hoisting rules:
vi.mock() factories are evaluated at hoisting time before regular const
declarations. Move mockToolSpendResponse into vi.hoisted() block.

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-08-11 09:41:55 -07:00
..
litellm-dashboard feat(ui): show models under each tier in routing benchmark chart (#36291) 2026-08-11 09:41:55 -07:00
Dockerfile chore(build): move the Admin UI toolchain to Node 24 (#35801) 2026-08-04 12:36:07 -07:00
nginx.conf fix(ui): serve /ui/assets from the nginx image instead of SPA fallback (#34066) 2026-07-21 09:22:02 -07:00