Skip to content

feat(ui): rename the Playground System One tab to Decisions and give the JSON editor VS Code light and dark themes - #45729

Merged
kerrylu-berri merged 7 commits into
mainfrom
litellm_decisions_json_editor_theme
Oct 10, 2026
Merged

kerrylu-berri merged 7 commits into
mainfrom
litellm_decisions_json_editor_theme

Conversation

@devin-ai-integration

@devin-ai-integration devin-ai-integration Bot commented Oct 10, 2026 •

Copy link
Copy Markdown
Contributor

TLDR

Problem this solves:

  • The Playground tab for decision models is still called System One
  • The request JSON editor painted blue, green and orange bands over model, state and questions
  • Its hand picked token colors matched no editor people already know

How it solves it:

  • Renames the tab to Decisions, the ?tab=system-one deep link still works
  • The JSON editor follows the dashboard theme: the VS Code Light+ JSON palette on the light surface, the stock VS Code Dark+ theme on a dark pane in dark mode
  • Drops the root block bands, their line scanner, and the matching green and orange left borders on the Question breakdown card
  • Rounds the score pill in the results panel to two decimals (3.98 instead of 3.9809950180008897), the Raw response keeps the full value
  • Strips the background and backgroundColor keys from the two Prism block styles before the theme swap, so flipping light and dark no longer logs React's "Removing a style property during rerender" console error from JsonEditor

Intentional product change: the colored bands behind model, state and questions and the breakdown card's colored borders are gone

User Flow

Before: an admin trying a decision model reads the request JSON through colored bands and unfamiliar colors

  1. They open https://litellm-domain/ui/playground/?tab=system-one and the tab is labeled System One
  2. They click JSON above the editor
  3. The editor shows a blue band behind model, green behind state, orange behind questions, with sky blue keys and green strings

After: the same admin finds a Decisions tab and a JSON editor colored like VS Code in their theme

  1. They open https://litellm-domain/ui/playground/?tab=system-one and the tab is labeled Decisions
  2. They click JSON above the editor
  3. In light mode the editor shows blue keys, dark red strings and green numbers on the normal light surface, in dark mode a dark pane with Dark+ colors, no bands either way

Before

After, light mode

After, dark mode

Pre-Submission checklist

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

  • I have added meaningful tests (a UI rename and theme swap, the tab test was updated and the band scanner test removed with it)
  • The handful of test files covering my change pass locally, e.g. uv run pytest tests/unit/<your_test_file>.py -v. Leave the suites (make test-unit-*, make test-unit) to CI: it finishes in ~15 minutes where a laptop takes an hour or more
  • My PR passes all required CI/CD checks (e.g., lint, schema.d.ts sync check, etc.)
  • 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)

Screenshots / Proof of Fix

Both captures are the dashboard dev server on port 3000 against a live proxy on port 4000 with azure-microsoft-decision-1 loaded, at http://localhost:3000/playground/?tab=system-one with the JSON tab selected

Before (4f08cf2)

  1. Open http://localhost:3000/playground/?tab=system-one, the tab reads System One
  2. Click JSON, the editor shows the colored bands and sky blue keys, see the Before screenshot above

After (27f3b46)

  1. Open http://localhost:3000/playground/?tab=system-one, the tab reads Decisions
  2. Click JSON, the editor uses the Light+ palette on the light surface, see the first After screenshot
  3. Switch the dashboard to dark mode, the same editor becomes the Dark+ pane, see the second After screenshot
  4. Scroll down, the Question breakdown card has no colored left borders
  5. Send the example, the severity card's Score pill reads 3.98 and Raw response still shows the full float (77f1ff2)

Link to Devin session: https://app.devin.ai/sessions/f08f36d6b15149878bc762ca06e03409
Open in Devin Desktop: https://app.devin.ai/desktop/session/f08f36d6b15149878bc762ca06e03409?variant=devin
Requested by: @kerry-berri


Note

Devin errored when opening this Pull Request as kerry-berri.
As a fallback, Devin opened this PR as itself.


Note

Low Risk
Playground UI labeling and JSON editor styling only; no API or auth changes.

Overview
Renames the Playground System One tab to Decisions while keeping the ?tab=system-one deep link. Playground tests now assert the Decisions label.

The request JSON editor drops the custom root-key line bands (model / state / questions) and the findRootBlocks scanner (module and tests removed). Syntax highlighting now uses VS Code-style Prism themes (vscDarkPlus in dark mode, a light VS Code Light+-style palette otherwise), with a dark editor surface in dark mode and simplified line gutters—no per-block colored stripes.

Question breakdown no longer applies the colored left-border accents that matched those root blocks; layout is plain sections and bordered question cards.

Reviewed by Cursor Bugbot for commit 6b8fadc. Bugbot is set up for automated code reviews on this repo. Configure here.

Tutorial video recorded against the live rig, 15 numbered steps across Form and JSON, both inputs, Light+ and Dark+, and the Question breakdown: https://app.devin.ai/api/presigned_proxy?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjpudWxsLCJidWNrZXRfbmFtZSI6ImRldmluYXR0YWNobWVudHMiLCJidWNrZXRfa2V5IjoiYXR0YWNobWVudHNfcHJpdmF0ZS9vcmctNThkZGJiMTRjYzY5NDRiNjg0ZjgxZTk0MTlhZmU4YmUvZGJkYjlhY2MtOTRkYi00MjhkLWFiNWQtZDJkZWRkNWYzN2QzIiwiaWF0IjoxNzkxNjEyNzAyLCJvcmdfaWQiOiJvcmctNThkZGJiMTRjYzY5NDRiNjg0ZjgxZTk0MTlhZmU4YmUiLCJmaWxlbmFtZSI6ImRlY2lzaW9uc190dXRvcmlhbC5tcDQifQ.wE9AH-kSl3P5vMkeanwu3aWYGQ4vOPIc-cIvQHKHgXk


Note

Devin errored when opening this Pull Request as kerry-berri.
As a fallback, Devin opened this PR as itself.


Note

Low Risk
Playground UI-only changes (tab label, editor styling, score display formatting) with no API or auth impact; deep links still use system-one.

Overview
Renames the Playground System One tab to Decisions while keeping the ?tab=system-one deep link. Updates the related tab test expectations.

The request JSON editor now follows the dashboard theme with VS Code Light+ / Dark+ Prism themes (next-themes), a dark editor pane in dark mode, and transparent syntax backgrounds instead of custom Tailwind token colors. It removes the colored line bands for model / state / questions by deleting the rootBlocks scanner and simplifying the line renderer; Question breakdown drops the matching colored left borders.

Response score badges use Intl.NumberFormat (max 2 fraction digits) so values like 3.98 display cleanly; raw JSON is unchanged. Adds a unit test for score formatting.

Reviewed by Cursor Bugbot for commit 27f3b46. Bugbot is set up for automated code reviews on this repo. Configure here.

kerry and others added 2 commits October 10, 2026 04:11
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
…he VS Code Dark+ JSON theme

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

  • Disable automatic comment, CI, and merge conflict monitoring

@CLAassistant

Copy link
Copy Markdown

CLA assistant check
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.


kerry seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

@greptile-apps

greptile-apps Bot commented Oct 10, 2026 •

Copy link
Copy Markdown
Contributor

RetriggerConfidence Score: 5/5

[Medium impact] The PR appears safe to merge; no blocking issue remains.

Summary

Renames the Playground tab to Decisions while keeping ?tab=system-one. The JSON editor follows the dashboard theme and drops the colored bands. Score pills now show at most two decimal places.

  • The Playground tab now says Decisions.
  • The request editor follows the dashboard theme without colored block markers.
  • Score badges show at most two decimal places.

Reviews (6) · Last reviewed commit: "fix(ui): strip the Prism block backgroun..." · Reviewed by Greptile

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@kerrylu-berri

Copy link
Copy Markdown
Contributor

@greptileai

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@kerrylu-berri

Copy link
Copy Markdown
Contributor

@greptileai

@kerrylu-berri

Copy link
Copy Markdown
Contributor

bugbot run

@cursor cursor Bot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stale Bugbot comment from a previous run.

…breakdown accents

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@kerrylu-berri

Copy link
Copy Markdown
Contributor

@greptileai

@kerrylu-berri

Copy link
Copy Markdown
Contributor

bugbot run

@devin-ai-integration devin-ai-integration Bot changed the title feat(ui): rename the Playground System One tab to Decisions and use the VS Code Dark+ JSON theme feat(ui): rename the Playground System One tab to Decisions and give the JSON editor VS Code light and dark themes Oct 10, 2026

@cursor cursor Bot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stale Bugbot comment from a previous run.

@kerrylu-berri

Copy link
Copy Markdown
Contributor

@greptileai

kerry and others added 2 commits October 10, 2026 05:47
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
…wap stops the React style warning

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@kerrylu-berri

Copy link
Copy Markdown
Contributor

@greptileai

@kerrylu-berri

Copy link
Copy Markdown
Contributor

bugbot run

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 27f3b46. Configure here.

@kerrylu-berri kerrylu-berri left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@kerrylu-berri
kerrylu-berri merged commit 512692d into main Oct 10, 2026
80 checks passed
@kerrylu-berri
kerrylu-berri deleted the litellm_decisions_json_editor_theme branch October 10, 2026 06:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants