3 commits

Author	SHA1	Message	Date
yuneng-jiang	5bcced0187	feat(ui): redesign the playground chat around a single composer and inspector (#46934) ... * feat(ui): add clean-slate playground chat prototype * feat(ui): replace the playground chat with the redesigned composer and inspector * fix(ui): close the playground chat gaps found in self-review Resend only complete text exchanges, so empty replies, MCP direct calls and transcriptions no longer leak into chat history. A stopped request can no longer append output, attach its gateway trace to a newer reply or clear the newer request's loading state. MCP selections are only pruned once both the server and toolset lists load. The MCP tool picker lists toolsets again and calls the server that backs the chosen tool, and a saved model the current key cannot use is cleared when the model list loads, matching the old chat Also vendors the scroll-fade-x utility the attachment primitive uses * fix(ui): resolve playground toolset tools per server and drop late session ids A toolset now lists only its own tools, each resolved on the server the toolset names, so the args form and the call always target the same tool. A saved toolset no longer asks for tools with its own id while the toolset list loads, and a failed tool list says so instead of claiming the server has no tools A stopped request can no longer overwrite the Responses session id, starting a new chat drops a request that is still running, embeddings replies are no longer resent as chat history, and a saved model missing from an already cached model list is cleared too. A failing toolset list falls back right away instead of retrying while the MCP pickers show loading * fix(ui): guard playground sends and label inspector stats Pressing Enter twice no longer sends the same message twice, an attachment the new endpoint cannot take is dropped when the endpoint changes, a stopped Responses request can no longer show its code output on a newer reply, and a reply that broke mid-stream is no longer resent as history The inspector's speed, cost and routing stats get the same icons as the reply footer, and the footer's metrics now line up with its copy and Inspect buttons * fix(ui): write playground key settings only through the encoded storage path Key source, virtual key and custom headers now go through their own write loop, separate from the plain settings, so a key value can never take the plain sessionStorage branch * fix(ui): restore playground BYOK connect and reconnect Picking a BYOK server for a direct tool call now shows a key button next to the server picker, so the key can be connected without leaving the MCP endpoint. A connected BYOK server gets a Replace key action in the MCP dialog, also shown when its tools fail to load, and saving a key reloads that server's tool list * revert: restore the single playground settings storage loop Reverts ca4e742115. The CodeQL finding covers the same encoded sessionStorage handling the old chat used, so it is left as is * test(ui): type the BYOK credential mock without deep instantiation * fix(ui): let users back out of replacing a BYOK key The replace-key form in the MCP dialog now has Cancel, and it resets when another server is picked or the dialog closes, so a working key is never forced to be overwritten * refactor(ui): name the MCP dialog row focus handler * fix(ui): accept exact custom models, tags and decimal temperatures in the playground A typed model or tag that is a prefix of a listed one could not be used, because Enter picked the partial match and the custom action only showed when nothing matched. The custom value is now a list option whenever no exact match exists. Temperature gets an editable input beside the slider so values finer than the 0.1 step can be sent again. * fix(ui): stop claiming no guardrails ran when the gateway sent no headers Direct MCP calls, A2A agents and any request that fails before headers arrive built their trace from an empty header set, so the inspector said no guardrails or policies ran. The gateway fields are now left unset in that case and the inspector says the endpoint does not report them. * fix(ui): leave policies unknown when the gateway headers are hidden The proxy exposes x-litellm-applied-guardrails to other origins but not x-litellm-applied-policies, so a dashboard on another origin read every request as having run no policies. Policies are now unknown unless the call id header is readable, and the inspector says so.	2026-10-16 14:04:36 -07:00
Yuneng Jiang	edc1d65558	test(e2e/ui): address the migrated dashboard controls by role, not antd classes ... The playground, logs drawer and AI Hub modal moved off antd, so the specs that reached for .ant-select, .ant-drawer-content, .ant-modal and .ant-radio-button-wrapper no longer match anything and time out. Address the same controls through their accessible role and name instead, which holds across the component library swap and reads closer to what a user does.	2026-08-15 15:37:09 -07:00
yuneng-jiang	32a5259407	test(e2e-ui): verify UI mutations against the API instead of trusting the toast (#36632) ... * test(e2e-ui): cover the Playground, Logs and Usage manual-QA flows These three pages carried no e2e coverage, so the manual QA checklist was the only thing standing behind them. Playground: sends a chat from the UI for both configured models, and for both virtual-key sources (the logged-in session, and a key pasted into the panel). This is the only spec that drives the dashboard's own LLM call path rather than an admin CRUD endpoint. Logs: a request the proxy actually served appears in the table, its drawer expands to the real request and response bodies, both copy to the clipboard, the Input card collapses, the JSON view exposes Request/Response, and the End User filter narrows the table to one customer. Usage: traffic billed to a virtual key reaches Top Virtual Keys, the card toggles between table and chart, and the key opens its key-info panel. Router settings: the existing spec proved the UI can record a fallback; the new one proves the fallback is honoured, by pointing a model at an unreachable upstream and asserting the reply comes back anyway. It asserts the un-fallen-back call fails first, so a quietly-working primary cannot fake a pass. Supporting changes: - helpers/traffic.ts generates the traffic these pages render, rather than seeding rows no code produced. Its two wait helpers exist because the Logs and Usage pages read different stores: spend logs are flushed on a timer, and the Usage page reads a background rollup *and* fetches once on mount, so waiting on the DOM there can never converge. - helpers/playground.ts holds the playground controls, now shared with the fallback spec. Everything is scoped to the visible copy of the config panel, which is rendered twice for the docked and collapsed layouts. - run_e2e.sh gains E2E_KEEP_ALIVE=1, which brings the stack up and blocks so a spec can be re-run against it without paying for a UI rebuild each iteration. Verified with the full suite on a fresh stack: 89 passed, 0 failed, 5 skipped. * test(e2e-ui): cover listing and calling MCP tools Covers the two MCP manual-QA items the create-only spec cannot reach: opening a server's tool list, and calling a tool and seeing its result. Both need an MCP server that actually answers, so this points at DeepWiki's public MCP server -- Streamable HTTP, auth None, so there is no credential to hold and nothing to leak from a public repo. The call is made by the proxy, not the browser; nothing in the e2e chart restricts that egress. The external dependency is real and is left visible: an upstream outage turns these red rather than auto-skipping, because a spec that skips itself on connection trouble also skips when the proxy's MCP client is what broke. E2E_SKIP_EXTERNAL_MCP=1 is the explicit opt-out. Not yet executed against a live stack. * test(e2e-ui): verify key mutations round-trip instead of trusting the toast The recurring customer report is a form that says "Saved!" and then either no-ops or clobbers an unrelated field. A toast-only assertion passes in both cases, and outside three specs that is all this suite checks. Adds helpers/roundTrip.ts, factoring out the idiom clearCustomPricing, credentials and routerSettings already use: capture the outgoing request body, then read the resource back through the management API. Applies it to the keys spec: - create: the key is readable from /key/list and owns a team_id, rather than trusting a table row rendered from the create response the UI already held - update limits: TPM/RPM are on the wire AND persisted, and the key's models and team are unchanged -- bumping one field wiping another is the reported failure mode (PR #34452), not a hypothetical - delete: the key is gone from /key/list, not merely toasted as deleted - regenerate: the stored token actually changed /key/list shape is per KeyListResponseObject in litellm/proxy/_types.py. Not yet executed: ports 4000/8090 are held by a parallel run. * test(e2e-ui): let the local harness run on non-default ports Two checkouts cannot run run_e2e.sh at the same time: it hardcodes 4000/5432/ 8090, so the second aborts on "port 4000 is in use" and the only way forward is to stop someone else's stack. PROXY_PORT / POSTGRES_PORT / MOCK_LLM_PORT now override those, defaulting to the historical values so an unset environment behaves exactly as before -- CI, the CircleCI job and the chart's sidecar all keep working untouched. Two details that would otherwise make a relocated stack fail confusingly: - the suite resolves its target from E2E_UI_BASE_URL, which defaults to :4000 independently, so the run would build and boot correctly and then test whatever was on the default port. run_e2e.sh now derives it. - the mock server binds its port in server.py, so moving it needs MOCK_LLM_PORT there too. Its HOST stays loopback-only: 127.0.0.1:8090 from inside the proxy's own pod is the contract the e2e chart's sidecar is written against. * test(e2e-ui): cover MCP server edit and delete, verified via the API mcpServers.spec.ts only ever creates a server, and creation is the one MCP operation nobody has complained about. The reports are all on the other side: an alias rename that needs three or four saves to take, a delete that needs two attempts. Both produce a success toast on the failing attempt, so a toast-only assertion cannot tell them from working software. Rename asserts the new alias and the target server_id are on the PUT, then polls /v1/mcp/server until the stored alias matches -- one save has to be enough. Delete asserts the server is really gone from the list. Points at an unreachable URL: these exercise litellm's persistence, never the upstream, so a live MCP server would add a network dependency for nothing. mcpTools.spec.ts is where a real upstream is needed. Both pass against a local stack, as do the mcpTools specs from 5e189e9b1a. Neither reproduced the reported failures on this build -- they guard, they did not catch. * test(e2e-ui): verify team create, invite and delete against the API Three team mutations stopped at a toast, and one of those toasts is matched as loosely as /success/i -- almost any notification satisfied it. - create: the team is readable from /team/list and kept the models chosen in the modal, rather than trusting the UI's own "Team created" - invite: the invited address really appears in members_with_roles, which is the point of the flow - delete: the team is gone from /team/list. The existing assertion was that the row vanished, which is the client dropping it from local state and happens whether or not the delete reached the database. Shapes read off a live proxy: /team/list is a bare array; /team/info nests the record under team_info. All 6 tests pass locally. * test(e2e-ui): verify team-admin member and key mutations against the API The team-admin flows stopped at a success toast. A member add that lands on the wrong team, a remove that takes out the wrong row, and a key that comes back unscoped all produce the same toast as the working case, so the existing assertions could not tell them apart. Each mutation now pins what went on the wire and reads the result back: member add/remove assert team_id and the member identifier on the request, then poll /team/info's roster; the team key asserts team_id on /key/generate and reads /key/list back to confirm the key is owned by the admin's own team rather than orphaned. * test(e2e-ui): verify model add and limit edits against the stored deployment The Models specs checked the rendered result: the TPM/RPM edit asserted the new numbers were visible in view mode, and the two add flows asserted a row showed up in the table. Both render from state the UI already holds, so a save the backend dropped and a save it kept look the same. Each mutation now pins the request and reads the deployment back. The limits edit also asserts the fields it did not touch -- upstream model and team ownership -- are unchanged, because handleModelUpdate rebuilds and PATCHes the whole litellm_params blob, which is how an unrelated field gets clobbered by a save that reports success. The two add flows assert model_name, the routed model and custom_llm_provider on the wire and in storage; a deployment that loses its provider looks correct in the table and is unroutable. The Team-BYOK test is unchanged -- it is skipped without a license, so any change to it would be unverified. * test(e2e-ui): delete the MCP servers these specs create MCP servers outlive the test that made them, the MCP page contacts every server it lists, and most of the ones these specs create point at an unreachable host. They accumulate, and each one makes navigateToPage's networkidle wait a little slower to settle. Measured on a local stack: with eleven leaked servers the whole MCP suite failed on a 30s navigation timeout, including specs that leaked nothing. Deleting the leftovers made all five pass. With per-test cleanup added, a run from a clean slate leaves zero behind and takes 20s instead of 1m24s. mcpServers.spec.ts carried a note that no teardown was needed because the runner brings up a fresh database each time. That holds for CI and is why this went unnoticed; it does not hold for a local stack that is reused. * test(e2e-ui): say why the team-model setup call failed The setup that creates a team-scoped model asserted a bare `ok()`, so a failure read "expected true, received false" and pointed at the UI. The call is enterprise-gated -- creating a model with model_info.team_id returns 403 without LITELLM_LICENSE -- and that is invisible from the old message. It now carries the status and body, which names the cause immediately. The api_base also pointed at the mock's default port rather than the one the harness started; nothing in the test calls the model, but the two should not disagree. * test(e2e-ui): add a model through the UI and serve traffic with it Every existing Add Model test stops at "the row appears in the table", which a deployment that cannot serve a single request also does. The manual-QA item this replaces is the whole loop: fill the form, pass Test Connect, add it, confirm it works. The new test ends by calling the model it just created. That is the only assertion that rules out a dropped api_base, a mangled provider prefix, or a name the router never registers -- all of which look identical in the UI. No provider credential is involved. OpenAI-Compatible is the provider whose form exposes API Base, so the deployment points at the harness's own mock LLM. The mock speaks the OpenAI wire format, so Test Connect performs a real completion against a real endpoint and really succeeds. Also adds teardown for the deployment it creates. A local run throws its database away, but the deployed stack does not, and a leaked deployment shows up in every later Models table and /v2/model/info readback. Both new assertions were mutation-tested: pointing the traffic poll at a name that was never created fails the test, and the wire assertion fails when the typed name is not what reaches /model/new. * test(e2e-ui): print the proxy log when the proxy dies on its own In E2E_KEEP_ALIVE=1 mode the harness blocks until the proxy pid goes away, then printed a bare "Proxy exited." and fell straight into cleanup, which rm -f's the log. The proxy has now exited by itself twice, minutes after a run had finished, leaving nothing to look at. Both startup failure paths already tail -n 100 the log before giving up, so this was the one death that stayed silent Dump the same 100 lines before exiting. A normal Ctrl-C teardown still deletes the log and prints nothing, which is why INT and TERM now exit instead of running cleanup and falling back into the wait loop: under the single trap a SIGTERM deleted the log, resumed the loop, and would then report "tail: no such file", besides running cleanup twice * test(e2e-ui): split the log-drawer copy assertions off the expand test The copy assertions need `navigator.clipboard`, which the browser only exposes in a secure context. Locally the suite runs against http://127.0.0.1 and localhost is trustworthy, so it is there. In CI the run pod is pointed at a plain-HTTP cluster DNS name, where it is undefined -- and InputCard.handleCopy calls writeText unguarded, so the click throws before MessageManager.success and no toast ever renders. That failed all three attempts of litellm-e2e-ui build 10. Measured rather than inferred: on http://127.0.0.1:4100 isSecureContext/typeof navigator.clipboard are true/"object", and on a DNS name resolving to that same address they are false/"undefined", which reproduces the CI failure exactly. Splitting keeps the drawer-rendering coverage running everywhere and confines the skip to the part the browser has actually switched off. The copy assertions still run in full wherever the origin is trustworthy. The underlying product behaviour is left alone deliberately: any deployment served over plain HTTP on a hostname has a copy button that throws and gives no feedback, and that deserves its own fix rather than being papered over from a test. * test(e2e-ui): cut the added comments back to what the code cannot say itself Greptile flagged the helper commentary, and it was right: CLAUDE.md says not to write comments unless they explain very complex business logic, and much of what was added here narrated ordinary test setup and motivation instead. Trims 310 comment lines across the 14 files this branch touched. Kept only the notes that record something unrecoverable from the code: why the request listener is armed before the click, why a locator walks up the DOM, why an assertion exists beyond the toast. Pre-existing comments are left alone. No behaviour change. The only non-comment hunk is a prettier reformat.	2026-08-12 13:39:58 -07:00