From 3f82cfaee8c9133ce78f2ab2bfd34b1f9b8ff4d6 Mon Sep 17 00:00:00 2001
From: kerry <kerry@berri.ai>
Date: Sat, 10 Oct 2026 04:11:50 +0000
Subject: [PATCH 1/7] fix(ui): render the System One JSON editor with the stock
 One Dark theme

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/systemOneUI/JsonEditor.tsx     | 68 ++++++-------------
 .../systemOneUI/lib/rootBlocks.test.ts        | 53 ---------------
 .../components/systemOneUI/lib/rootBlocks.ts  | 52 --------------
 3 files changed, 21 insertions(+), 152 deletions(-)
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
index fce617b4c476..d7608e4ce436 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
@@ -1,11 +1,11 @@
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/cva.config";
 import { CircleAlert, CircleCheck, TriangleAlert } from "lucide-react";
-import { useId, useMemo, useRef } from "react";
+import { useId, useRef } from "react";
 import { createElement, PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
 import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
-import { findRootBlocks, ROOT_BLOCK_STYLES, type RootBlock } from "./lib/rootBlocks";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import type { SystemOnePayloadValidation } from "./lib/validatePayload";
 
 SyntaxHighlighter.registerLanguage("json", json);
@@ -16,14 +16,7 @@ type LineRendererProps = Parameters<NonNullable<SyntaxHighlighterProps["renderer
 const CONTENT_INSET = "pl-14 pr-3";
 const CODE_TAG_PROPS = { className: "language-json", style: { whiteSpace: "pre-wrap" } } as const;
 
-const TOKEN_COLORS = [
-  "[&_.token.property]:text-sky-700 dark:[&_.token.property]:text-sky-300",
-  "[&_.token.string]:text-emerald-700 dark:[&_.token.string]:text-emerald-300",
-  "[&_.token.number]:text-amber-700 dark:[&_.token.number]:text-amber-300",
-  "[&_.token.boolean]:text-violet-700 dark:[&_.token.boolean]:text-violet-300",
-  "[&_.token.null]:text-violet-700 dark:[&_.token.null]:text-violet-300",
-  "[&_.token.punctuation]:text-muted-foreground [&_.token.operator]:text-muted-foreground",
-].join(" ");
+const TRANSPARENT_PRE = { background: "transparent", margin: 0, padding: 0 } as const;
 
 interface JsonEditorProps {
   value: string;
@@ -69,46 +62,28 @@ export function IssueList({ id, validation }: { id: string; validation: SystemOn
   );
 }
 
-function renderLines(rootBlocks: readonly RootBlock[]) {
-  return function LineRows({ rows, stylesheet, useInlineStyles }: LineRendererProps) {
-    return rows.map((row, line) => {
-      const lineElement = { node: row, stylesheet, useInlineStyles, key: line };
-      const block = rootBlocks.find(({ startLine, endLine }) => line >= startLine && line <= endLine);
-      return (
-        <div key={line} className="flex">
-          <span className={cn(GUTTER_WIDTH, "shrink-0 select-none pr-3 text-right text-muted-foreground")}>
-            {line + 1}
-          </span>
-          <span
-            className={cn(
-              "relative min-h-5 min-w-0 flex-1 px-3",
-              block && [
-                "before:absolute before:inset-y-0 before:left-0 before:w-0.5",
-                ROOT_BLOCK_STYLES[block.key].band,
-                line === block.startLine && "rounded-t-sm before:rounded-t-sm",
-                line === block.endLine && "rounded-b-sm before:rounded-b-sm",
-              ],
-            )}
-          >
-            {createElement(lineElement)}
-          </span>
-        </div>
-      );
-    });
-  };
+function LineRows({ rows, stylesheet, useInlineStyles }: LineRendererProps) {
+  return rows.map((row, line) => {
+    const lineElement = { node: row, stylesheet, useInlineStyles, key: line };
+    return (
+      <div key={line} className="flex">
+        <span className={cn(GUTTER_WIDTH, "shrink-0 select-none pr-3 text-right text-zinc-500")}>{line + 1}</span>
+        <span className="min-h-5 min-w-0 flex-1 px-3">{createElement(lineElement)}</span>
+      </div>
+    );
+  });
 }
 
 export default function JsonEditor({ value, onChange, validation }: JsonEditorProps) {
   const issuesId = useId();
   const highlightRef = useRef<HTMLDivElement>(null);
-  const renderer = useMemo(() => renderLines(findRootBlocks(value)), [value]);
   const lineCount = value.split("\n").length;
   const hasErrors = !validation.isValid;
 
   return (
     <div
       className={cn(
-        "flex min-h-96 flex-1 flex-col overflow-hidden rounded-md border bg-background",
+        "flex min-h-96 flex-1 flex-col overflow-hidden rounded-md border bg-[#282c34]",
         hasErrors && "border-destructive/60",
       )}
     >
@@ -122,19 +97,18 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
         </span>
       </div>
       <div className="relative min-h-80 flex-1">
-        <div aria-hidden="true" className={cn(GUTTER_WIDTH, "absolute inset-y-0 left-0 border-r bg-muted/50")} />
         <div
-          ref={highlightRef}
           aria-hidden="true"
-          className={cn("absolute inset-0 overflow-hidden", EDITOR_TEXT, TOKEN_COLORS)}
-        >
+          className={cn(GUTTER_WIDTH, "absolute inset-y-0 left-0 border-r border-zinc-700 bg-zinc-800/60")}
+        />
+        <div ref={highlightRef} aria-hidden="true" className={cn("absolute inset-0 overflow-hidden", EDITOR_TEXT)}>
           <SyntaxHighlighter
             language="json"
-            style={{}}
-            useInlineStyles={false}
+            style={oneDark}
+            customStyle={TRANSPARENT_PRE}
             PreTag="div"
             codeTagProps={CODE_TAG_PROPS}
-            renderer={renderer}
+            renderer={LineRows}
           >
             {value}
           </SyntaxHighlighter>
@@ -157,7 +131,7 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
           className={cn(
             EDITOR_TEXT,
             CONTENT_INSET,
-            "absolute inset-0 size-full resize-none overflow-y-auto bg-transparent text-transparent caret-foreground outline-none selection:bg-primary/20 placeholder:text-muted-foreground",
+            "absolute inset-0 size-full resize-none overflow-y-auto bg-transparent text-transparent caret-zinc-100 outline-none selection:bg-zinc-100/20 placeholder:text-zinc-500",
           )}
         />
       </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts
deleted file mode 100644
index 51707bd6bb0b..000000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { findRootBlocks } from "./rootBlocks";
-
-describe("findRootBlocks", () => {
-  it("maps each top-level request key to the lines its value spans", () => {
-    const text = JSON.stringify(
-      {
-        model: "jev-latest",
-        state: { message: "Hi" },
-        questions: { escalate: { type: "noul", instructions: "Escalate?" } },
-      },
-      null,
-      2,
-    );
-
-    expect(findRootBlocks(text)).toEqual([
-      { key: "model", startLine: 1, endLine: 1 },
-      { key: "state", startLine: 2, endLine: 4 },
-      { key: "questions", startLine: 5, endLine: 10 },
-    ]);
-  });
-
-  it("ignores nested keys, unrelated root keys and braces or quotes inside strings", () => {
-    const text = [
-      "{",
-      '  "temperature": 0,',
-      '  "state": "a } tricky \\" { string",',
-      '  "questions": {',
-      '    "model": { "state": "nested" }',
-      "  }",
-      "}",
-    ].join("\n");
-
-    expect(findRootBlocks(text)).toEqual([
-      { key: "state", startLine: 2, endLine: 2 },
-      { key: "questions", startLine: 3, endLine: 5 },
-    ]);
-  });
-
-  it("finds every block on a single minified line", () => {
-    expect(findRootBlocks('{"state":"Hi","questions":{"a":{"type":"noul"}}}')).toEqual([
-      { key: "state", startLine: 0, endLine: 0 },
-      { key: "questions", startLine: 0, endLine: 0 },
-    ]);
-  });
-
-  it("keeps highlighting an unfinished block while the user is typing", () => {
-    expect(findRootBlocks('{\n  "state": "Hi",\n  "questions": {\n    "a": {')).toEqual([
-      { key: "state", startLine: 1, endLine: 1 },
-      { key: "questions", startLine: 2, endLine: 3 },
-    ]);
-  });
-});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
index 7109d9231357..1bfaa3bf63d1 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
@@ -11,55 +11,3 @@ export const ROOT_BLOCK_STYLES: Readonly<Record<RootBlockKey, { band: string; ac
   state: { band: "bg-green-500/10 before:bg-green-500/60", accent: "border-l-green-500/60" },
   questions: { band: "bg-orange-500/10 before:bg-orange-500/60", accent: "border-l-orange-500/60" },
 };
-
-interface Token {
-  readonly text: string;
-  readonly line: number;
-}
-
-interface ScanState {
-  readonly depth: number;
-  readonly previous?: Token;
-  readonly open?: { readonly key: RootBlockKey; readonly startLine: number };
-  readonly blocks: readonly RootBlock[];
-}
-
-const JSON_TOKEN = /"(?:[^"\\\n]|\\.)*"?|[{}[\],:]|[^\s{}[\],:"]+/g;
-
-const isRootBlockKey = (key: string): key is RootBlockKey => Object.hasOwn(ROOT_BLOCK_STYLES, key);
-
-const tokenize = (text: string): Token[] =>
-  text
-    .split("\n")
-    .flatMap((lineText, line) => Array.from(lineText.matchAll(JSON_TOKEN), ([match]) => ({ text: match, line })));
-
-const closeOpenBlock = ({ open, previous, blocks }: ScanState): readonly RootBlock[] =>
-  open && previous ? [...blocks, { ...open, endLine: previous.line }] : blocks;
-
-function step(state: ScanState, token: Token): ScanState {
-  const next = { ...state, previous: token };
-  switch (token.text) {
-    case "{":
-    case "[":
-      return { ...next, depth: state.depth + 1 };
-    case "}":
-    case "]":
-      return state.depth === 1
-        ? { ...next, depth: 0, open: undefined, blocks: closeOpenBlock(state) }
-        : { ...next, depth: state.depth - 1 };
-    case ",":
-      return state.depth === 1 ? { ...next, open: undefined, blocks: closeOpenBlock(state) } : next;
-    case ":": {
-      const key = state.previous?.text.slice(1, -1) ?? "";
-      return state.depth === 1 && state.previous?.text.startsWith('"') && isRootBlockKey(key)
-        ? { ...next, open: { key, startLine: state.previous.line } }
-        : next;
-    }
-    default:
-      return next;
-  }
-}
-
-export function findRootBlocks(text: string): readonly RootBlock[] {
-  return closeOpenBlock(tokenize(text).reduce(step, { depth: 0, blocks: [] }));
-}

From 02e2cff282b9e0cea6c721090a2f00b231ce1fef Mon Sep 17 00:00:00 2001
From: kerry <kerry@berri.ai>
Date: Sat, 10 Oct 2026 04:13:45 +0000
Subject: [PATCH 2/7] feat(ui): rename the Playground System One tab to
 Decisions and use the VS Code Dark+ JSON theme

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../playground/components/systemOneUI/JsonEditor.tsx        | 6 +++---
 .../src/app/(dashboard)/playground/page.test.tsx            | 4 ++--
 .../src/app/(dashboard)/playground/page.tsx                 | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
index d7608e4ce436..4b8a213eaba4 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
@@ -5,7 +5,7 @@ import { useId, useRef } from "react";
 import { createElement, PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
 import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
 import type { SystemOnePayloadValidation } from "./lib/validatePayload";
 
 SyntaxHighlighter.registerLanguage("json", json);
@@ -83,7 +83,7 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
   return (
     <div
       className={cn(
-        "flex min-h-96 flex-1 flex-col overflow-hidden rounded-md border bg-[#282c34]",
+        "flex min-h-96 flex-1 flex-col overflow-hidden rounded-md border bg-[#1e1e1e]",
         hasErrors && "border-destructive/60",
       )}
     >
@@ -104,7 +104,7 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
         <div ref={highlightRef} aria-hidden="true" className={cn("absolute inset-0 overflow-hidden", EDITOR_TEXT)}>
           <SyntaxHighlighter
             language="json"
-            style={oneDark}
+            style={vscDarkPlus}
             customStyle={TRANSPARENT_PRE}
             PreTag="div"
             codeTagProps={CODE_TAG_PROPS}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.test.tsx
index 7011bf54a1a8..9d6d43de4d92 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.test.tsx
@@ -87,10 +87,10 @@ describe("PlaygroundPage ?tab= deep link", () => {
     expect(screen.getByRole("tab", { name: "Chat" })).toHaveAttribute("aria-selected", "false");
   });
 
-  it("activates System One from ?tab=system-one", () => {
+  it("activates Decisions from ?tab=system-one", () => {
     renderWithProviders(<PlaygroundPage />, { searchParams: { tab: "system-one" } });
 
-    const tab = screen.getByRole("tab", { name: /^System One/ });
+    const tab = screen.getByRole("tab", { name: /^Decisions/ });
     expect(tab).toHaveAttribute("aria-selected", "true");
     expect(tab).toHaveTextContent("Beta");
     expect(screen.getByTestId("system-one-ui")).toBeInTheDocument();
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx
index 001dd392f56a..bb5612e7367b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/page.tsx
@@ -70,7 +70,7 @@ export default function PlaygroundPage() {
             Compliance
           </TabsTrigger>
           <TabsTrigger value="system-one" className="flex-none">
-            <BetaBadge>System One</BetaBadge>
+            <BetaBadge>Decisions</BetaBadge>
           </TabsTrigger>
           <TabsTrigger value="agent-builder" className="flex-none">
             Agent Builder (Experimental)

From 1d547c74e450a404460990e8d3930cca92b01a39 Mon Sep 17 00:00:00 2001
From: kerry <kerry@berri.ai>
Date: Sat, 10 Oct 2026 04:20:10 +0000
Subject: [PATCH 3/7] fix(ui): keep the JSON editor header and issue list on
 the light surface

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/systemOneUI/JsonEditor.tsx     |  4 +-
 .../systemOneUI/lib/rootBlocks.test.ts        | 53 +++++++++++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
index 4b8a213eaba4..4131b84665bf 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
@@ -83,7 +83,7 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
   return (
     <div
       className={cn(
-        "flex min-h-96 flex-1 flex-col overflow-hidden rounded-md border bg-[#1e1e1e]",
+        "flex min-h-96 flex-1 flex-col overflow-hidden rounded-md border bg-background",
         hasErrors && "border-destructive/60",
       )}
     >
@@ -96,7 +96,7 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
           {lineCount} {lineCount === 1 ? "line" : "lines"}
         </span>
       </div>
-      <div className="relative min-h-80 flex-1">
+      <div className="relative min-h-80 flex-1 bg-[#1e1e1e]">
         <div
           aria-hidden="true"
           className={cn(GUTTER_WIDTH, "absolute inset-y-0 left-0 border-r border-zinc-700 bg-zinc-800/60")}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts
new file mode 100644
index 000000000000..51707bd6bb0b
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { findRootBlocks } from "./rootBlocks";
+
+describe("findRootBlocks", () => {
+  it("maps each top-level request key to the lines its value spans", () => {
+    const text = JSON.stringify(
+      {
+        model: "jev-latest",
+        state: { message: "Hi" },
+        questions: { escalate: { type: "noul", instructions: "Escalate?" } },
+      },
+      null,
+      2,
+    );
+
+    expect(findRootBlocks(text)).toEqual([
+      { key: "model", startLine: 1, endLine: 1 },
+      { key: "state", startLine: 2, endLine: 4 },
+      { key: "questions", startLine: 5, endLine: 10 },
+    ]);
+  });
+
+  it("ignores nested keys, unrelated root keys and braces or quotes inside strings", () => {
+    const text = [
+      "{",
+      '  "temperature": 0,',
+      '  "state": "a } tricky \\" { string",',
+      '  "questions": {',
+      '    "model": { "state": "nested" }',
+      "  }",
+      "}",
+    ].join("\n");
+
+    expect(findRootBlocks(text)).toEqual([
+      { key: "state", startLine: 2, endLine: 2 },
+      { key: "questions", startLine: 3, endLine: 5 },
+    ]);
+  });
+
+  it("finds every block on a single minified line", () => {
+    expect(findRootBlocks('{"state":"Hi","questions":{"a":{"type":"noul"}}}')).toEqual([
+      { key: "state", startLine: 0, endLine: 0 },
+      { key: "questions", startLine: 0, endLine: 0 },
+    ]);
+  });
+
+  it("keeps highlighting an unfinished block while the user is typing", () => {
+    expect(findRootBlocks('{\n  "state": "Hi",\n  "questions": {\n    "a": {')).toEqual([
+      { key: "state", startLine: 1, endLine: 1 },
+      { key: "questions", startLine: 2, endLine: 3 },
+    ]);
+  });
+});

From c42811e500654397f8b17becb44d9e55124bab52 Mon Sep 17 00:00:00 2001
From: kerry <kerry@berri.ai>
Date: Sat, 10 Oct 2026 04:22:54 +0000
Subject: [PATCH 4/7] chore(ui): drop the root block scanner test and the
 unused band styles

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../systemOneUI/lib/rootBlocks.test.ts        | 53 -------------------
 .../components/systemOneUI/lib/rootBlocks.ts  | 15 ++----
 2 files changed, 4 insertions(+), 64 deletions(-)
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts
deleted file mode 100644
index 51707bd6bb0b..000000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.test.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { findRootBlocks } from "./rootBlocks";
-
-describe("findRootBlocks", () => {
-  it("maps each top-level request key to the lines its value spans", () => {
-    const text = JSON.stringify(
-      {
-        model: "jev-latest",
-        state: { message: "Hi" },
-        questions: { escalate: { type: "noul", instructions: "Escalate?" } },
-      },
-      null,
-      2,
-    );
-
-    expect(findRootBlocks(text)).toEqual([
-      { key: "model", startLine: 1, endLine: 1 },
-      { key: "state", startLine: 2, endLine: 4 },
-      { key: "questions", startLine: 5, endLine: 10 },
-    ]);
-  });
-
-  it("ignores nested keys, unrelated root keys and braces or quotes inside strings", () => {
-    const text = [
-      "{",
-      '  "temperature": 0,',
-      '  "state": "a } tricky \\" { string",',
-      '  "questions": {',
-      '    "model": { "state": "nested" }',
-      "  }",
-      "}",
-    ].join("\n");
-
-    expect(findRootBlocks(text)).toEqual([
-      { key: "state", startLine: 2, endLine: 2 },
-      { key: "questions", startLine: 3, endLine: 5 },
-    ]);
-  });
-
-  it("finds every block on a single minified line", () => {
-    expect(findRootBlocks('{"state":"Hi","questions":{"a":{"type":"noul"}}}')).toEqual([
-      { key: "state", startLine: 0, endLine: 0 },
-      { key: "questions", startLine: 0, endLine: 0 },
-    ]);
-  });
-
-  it("keeps highlighting an unfinished block while the user is typing", () => {
-    expect(findRootBlocks('{\n  "state": "Hi",\n  "questions": {\n    "a": {')).toEqual([
-      { key: "state", startLine: 1, endLine: 1 },
-      { key: "questions", startLine: 2, endLine: 3 },
-    ]);
-  });
-});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
index 1bfaa3bf63d1..813e9ab28ae7 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
@@ -1,13 +1,6 @@
-export type RootBlockKey = "model" | "state" | "questions";
+export type RootBlockKey = "state" | "questions";
 
-export interface RootBlock {
-  readonly key: RootBlockKey;
-  readonly startLine: number;
-  readonly endLine: number;
-}
-
-export const ROOT_BLOCK_STYLES: Readonly<Record<RootBlockKey, { band: string; accent: string }>> = {
-  model: { band: "bg-blue-500/10 before:bg-blue-500/60", accent: "border-l-blue-500/60" },
-  state: { band: "bg-green-500/10 before:bg-green-500/60", accent: "border-l-green-500/60" },
-  questions: { band: "bg-orange-500/10 before:bg-orange-500/60", accent: "border-l-orange-500/60" },
+export const ROOT_BLOCK_STYLES: Readonly<Record<RootBlockKey, { accent: string }>> = {
+  state: { accent: "border-l-green-500/60" },
+  questions: { accent: "border-l-orange-500/60" },
 };

From 6b8fadc230147fff878af6bffcf0fdf19330340d Mon Sep 17 00:00:00 2001
From: kerry <kerry@berri.ai>
Date: Sat, 10 Oct 2026 04:36:12 +0000
Subject: [PATCH 5/7] feat(ui): follow the dashboard theme in the JSON editor
 and drop the breakdown accents

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/systemOneUI/JsonEditor.tsx     | 48 +++++++++++++++----
 .../systemOneUI/QuestionBreakdown.tsx         |  9 +---
 .../components/systemOneUI/lib/rootBlocks.ts  |  6 ---
 3 files changed, 41 insertions(+), 22 deletions(-)
 delete mode 100644 ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
index 4131b84665bf..1ff7e22f2a54 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
@@ -1,11 +1,12 @@
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/cva.config";
 import { CircleAlert, CircleCheck, TriangleAlert } from "lucide-react";
+import { useTheme } from "next-themes";
 import { useId, useRef } from "react";
 import { createElement, PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
 import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
-import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { vs, vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
 import type { SystemOnePayloadValidation } from "./lib/validatePayload";
 
 SyntaxHighlighter.registerLanguage("json", json);
@@ -14,9 +15,32 @@ const EDITOR_TEXT = "m-0 whitespace-pre-wrap wrap-anywhere py-3 font-mono text-x
 const GUTTER_WIDTH = "w-11";
 type LineRendererProps = Parameters<NonNullable<SyntaxHighlighterProps["renderer"]>>[0];
 const CONTENT_INSET = "pl-14 pr-3";
-const CODE_TAG_PROPS = { className: "language-json", style: { whiteSpace: "pre-wrap" } } as const;
-
-const TRANSPARENT_PRE = { background: "transparent", margin: 0, padding: 0 } as const;
+const VS_CODE_LIGHT_PLUS = {
+  ...vs,
+  property: { color: "#0451a5" },
+  string: { color: "#a31515" },
+  number: { color: "#098658" },
+  boolean: { color: "#0000ff" },
+  punctuation: { color: "#000000" },
+  operator: { color: "#000000" },
+} as const;
+const INHERIT_TEXT = {
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  lineHeight: "inherit",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "anywhere",
+  textShadow: "none",
+} as const;
+const CODE_TAG_PROPS = { className: "language-json", style: INHERIT_TEXT } as const;
+const TRANSPARENT_PRE = {
+  ...INHERIT_TEXT,
+  background: "transparent",
+  border: 0,
+  margin: 0,
+  padding: 0,
+  overflow: "visible",
+} as const;
 
 interface JsonEditorProps {
   value: string;
@@ -67,7 +91,9 @@ function LineRows({ rows, stylesheet, useInlineStyles }: LineRendererProps) {
     const lineElement = { node: row, stylesheet, useInlineStyles, key: line };
     return (
       <div key={line} className="flex">
-        <span className={cn(GUTTER_WIDTH, "shrink-0 select-none pr-3 text-right text-zinc-500")}>{line + 1}</span>
+        <span className={cn(GUTTER_WIDTH, "shrink-0 select-none pr-3 text-right text-zinc-400 dark:text-zinc-500")}>
+          {line + 1}
+        </span>
         <span className="min-h-5 min-w-0 flex-1 px-3">{createElement(lineElement)}</span>
       </div>
     );
@@ -77,6 +103,7 @@ function LineRows({ rows, stylesheet, useInlineStyles }: LineRendererProps) {
 export default function JsonEditor({ value, onChange, validation }: JsonEditorProps) {
   const issuesId = useId();
   const highlightRef = useRef<HTMLDivElement>(null);
+  const syntaxTheme = useTheme().resolvedTheme === "dark" ? vscDarkPlus : VS_CODE_LIGHT_PLUS;
   const lineCount = value.split("\n").length;
   const hasErrors = !validation.isValid;
 
@@ -96,15 +123,18 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
           {lineCount} {lineCount === 1 ? "line" : "lines"}
         </span>
       </div>
-      <div className="relative min-h-80 flex-1 bg-[#1e1e1e]">
+      <div className="relative min-h-80 flex-1 bg-background dark:bg-[#1e1e1e]">
         <div
           aria-hidden="true"
-          className={cn(GUTTER_WIDTH, "absolute inset-y-0 left-0 border-r border-zinc-700 bg-zinc-800/60")}
+          className={cn(
+            GUTTER_WIDTH,
+            "absolute inset-y-0 left-0 border-r bg-muted/50 dark:border-zinc-700 dark:bg-zinc-800/60",
+          )}
         />
         <div ref={highlightRef} aria-hidden="true" className={cn("absolute inset-0 overflow-hidden", EDITOR_TEXT)}>
           <SyntaxHighlighter
             language="json"
-            style={vscDarkPlus}
+            style={syntaxTheme}
             customStyle={TRANSPARENT_PRE}
             PreTag="div"
             codeTagProps={CODE_TAG_PROPS}
@@ -131,7 +161,7 @@ export default function JsonEditor({ value, onChange, validation }: JsonEditorPr
           className={cn(
             EDITOR_TEXT,
             CONTENT_INSET,
-            "absolute inset-0 size-full resize-none overflow-y-auto bg-transparent text-transparent caret-zinc-100 outline-none selection:bg-zinc-100/20 placeholder:text-zinc-500",
+            "absolute inset-0 size-full resize-none overflow-y-auto bg-transparent text-transparent caret-foreground outline-none selection:bg-primary/20 placeholder:text-muted-foreground",
           )}
         />
       </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/QuestionBreakdown.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/QuestionBreakdown.tsx
index 66f7f4118864..8fc061017837 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/QuestionBreakdown.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/QuestionBreakdown.tsx
@@ -1,7 +1,5 @@
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { cn } from "@/lib/cva.config";
-import { ROOT_BLOCK_STYLES } from "./lib/rootBlocks";
 import type { PlaygroundQuestion, PlaygroundRequest } from "./lib/schemas";
 
 function formatState(state: unknown): string {
@@ -74,10 +72,7 @@ export default function QuestionBreakdown({ payload }: { payload?: PlaygroundReq
         <CardDescription>Review the state and criteria that will be sent.</CardDescription>
       </CardHeader>
       <CardContent className="grid gap-4 wrap-anywhere">
-        <section
-          aria-labelledby="system-one-state-heading"
-          className={cn("grid gap-2 border-l-2 pl-3", ROOT_BLOCK_STYLES.state.accent)}
-        >
+        <section aria-labelledby="system-one-state-heading" className="grid gap-2">
           <h3 id="system-one-state-heading" className="text-sm font-medium">
             State
           </h3>
@@ -85,7 +80,7 @@ export default function QuestionBreakdown({ payload }: { payload?: PlaygroundReq
             {formatState(payload.state)}
           </pre>
         </section>
-        <div className={cn("grid gap-3 border-l-2 pl-3", ROOT_BLOCK_STYLES.questions.accent)}>
+        <div className="grid gap-3">
           {Object.entries(payload.questions).map(([id, question]) => (
             <section key={id} className="grid gap-3 rounded-md border p-3" aria-labelledby={`question-${id}`}>
               <div className="flex flex-wrap items-center justify-between gap-2">
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
deleted file mode 100644
index 813e9ab28ae7..000000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/rootBlocks.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type RootBlockKey = "state" | "questions";
-
-export const ROOT_BLOCK_STYLES: Readonly<Record<RootBlockKey, { accent: string }>> = {
-  state: { accent: "border-l-green-500/60" },
-  questions: { accent: "border-l-orange-500/60" },
-};

From 77f1ff2a0607a44f1677b3adc3864f71c084070a Mon Sep 17 00:00:00 2001
From: kerry <kerry@berri.ai>
Date: Sat, 10 Oct 2026 05:47:40 +0000
Subject: [PATCH 6/7] fix(ui): round the Decisions score pill to two decimals

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/systemOneUI/ResponseView.test.tsx   | 14 ++++++++++++++
 .../components/systemOneUI/ResponseView.tsx        |  4 +++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.test.tsx
index 6cde78fbaf32..a64af1dc3434 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.test.tsx
@@ -59,6 +59,20 @@ describe("ResponseView", () => {
     expect(screen.getByRole("meter", { name: "1 probability" })).toHaveAttribute("aria-valuetext", "0%");
   });
 
+  it("rounds the calibrated score pill to two decimals and leaves integers bare", () => {
+    const precise: SystemOneResponse = {
+      answers: {
+        severity: { type: "score", score: 3.9809950180008897, probabilities: { "3": 0.02, "4": 0.98 } },
+        clarity: { type: "score", score: 2, probabilities: { "2": 1 }, legend: { "2": "Clear enough" } },
+      },
+    };
+    render(<ResponseView response={precise} isLoading={false} />);
+
+    expect(screen.getByText("3.98")).toBeInTheDocument();
+    expect(screen.queryByText("3.9809950180008897")).not.toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+
   it("renders structured decision score legends without coercing objects to strings", () => {
     const response: SystemOneResponse = {
       answers: {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.tsx
index fe58d565772d..d440fd616d8a 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/ResponseView.tsx
@@ -7,6 +7,8 @@ import { ChevronDown, LoaderCircle } from "lucide-react";
 import { useState } from "react";
 import type { SystemOneAnswer, SystemOneResponse } from "./lib/schemas";
 
+const SCORE_FORMAT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+
 interface ResponseViewProps {
   response?: SystemOneResponse;
   fallbackModel?: string;
@@ -85,7 +87,7 @@ function AnswerDetails({ answer }: { answer: SystemOneAnswer }) {
     <div className="grid gap-4">
       <div className="flex flex-wrap items-center gap-2">
         <span className="text-xs text-muted-foreground">Score</span>
-        <Badge>{answer.score}</Badge>
+        <Badge>{SCORE_FORMAT.format(answer.score)}</Badge>
         {answer.confidence !== undefined && (
           <Badge variant="outline">{Math.round(answer.confidence * 100)}% confidence</Badge>
         )}

From 27f3b461ab2a112c232a35b01cff6972c3d9afdf Mon Sep 17 00:00:00 2001
From: kerry <kerry@berri.ai>
Date: Sat, 10 Oct 2026 05:56:40 +0000
Subject: [PATCH 7/7] fix(ui): strip the Prism block backgrounds so the JSON
 editor theme swap stops the React style warning

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../components/systemOneUI/JsonEditor.tsx        | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
index 1ff7e22f2a54..cc7bebb0bb82 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/JsonEditor.tsx
@@ -15,8 +15,20 @@ const EDITOR_TEXT = "m-0 whitespace-pre-wrap wrap-anywhere py-3 font-mono text-x
 const GUTTER_WIDTH = "w-11";
 type LineRendererProps = Parameters<NonNullable<SyntaxHighlighterProps["renderer"]>>[0];
 const CONTENT_INSET = "pl-14 pr-3";
+type SyntaxTheme = NonNullable<SyntaxHighlighterProps["style"]>;
+const THEME_BLOCKS = ['pre[class*="language-"]', 'code[class*="language-"]'] as const;
+
+function withoutBlockBackground(theme: SyntaxTheme): SyntaxTheme {
+  const stripped = THEME_BLOCKS.map((block) => {
+    const { background: _background, backgroundColor: _backgroundColor, ...rest } = theme[block] ?? {};
+    return [block, rest] as const;
+  });
+  return { ...theme, ...Object.fromEntries(stripped) };
+}
+
+const VS_CODE_DARK_PLUS = withoutBlockBackground(vscDarkPlus);
 const VS_CODE_LIGHT_PLUS = {
-  ...vs,
+  ...withoutBlockBackground(vs),
   property: { color: "#0451a5" },
   string: { color: "#a31515" },
   number: { color: "#098658" },
@@ -103,7 +115,7 @@ function LineRows({ rows, stylesheet, useInlineStyles }: LineRendererProps) {
 export default function JsonEditor({ value, onChange, validation }: JsonEditorProps) {
   const issuesId = useId();
   const highlightRef = useRef<HTMLDivElement>(null);
-  const syntaxTheme = useTheme().resolvedTheme === "dark" ? vscDarkPlus : VS_CODE_LIGHT_PLUS;
+  const syntaxTheme = useTheme().resolvedTheme === "dark" ? VS_CODE_DARK_PLUS : VS_CODE_LIGHT_PLUS;
   const lineCount = value.split("\n").length;
   const hasErrors = !validation.isValid;