feat(ui): share trace drawer as a closable SidePanel and polish Lens

ui/litellm-dashboard/eslint.config.mjs

@@ -99,6 +99,11 @@ const eslintConfig = [
     ],
     rules: { "local/no-ad-hoc-z-index": ["error", { allowPopupLayer: true }] },
   },
+  {
+    files: ["src/components/view_logs/TraceView/**/*.tsx", "src/components/lens/**/*.tsx"],
+    ignores: ["src/**/*.test.tsx"],
+    rules: { "local/no-arbitrary-design-value": "error" },
+  },
   {
     files: ["tests/eslint-rules/**/*.{ts,tsx}"],
     rules: { "local/no-noop-hover-variant": "off", "local/no-ad-hoc-z-index": "off" },

ui/litellm-dashboard/next.config.mjs

@@ -12,7 +12,14 @@ const nextConfig = {
     ? {
         async rewrites() {
           return {
-            beforeFiles: [{ source: "/ui/:path*", destination: "/:path*" }],
+            beforeFiles: [
+              {
+                source: "/:path*",
+                has: [{ type: "header", key: "content-type", value: "application/json.*" }],
+                destination: `${devProxyUrl}/:path*`,
+              },
+              { source: "/ui/:path*", destination: "/:path*" },
+            ],
             fallback: [{ source: "/:path*", destination: `${devProxyUrl}/:path*` }],
           };
         },

ui/litellm-dashboard/package.json

@@ -27,13 +27,15 @@
   "dependencies": {
     "@anthropic-ai/sdk": "0.92.0",
     "@base-ui/react": "^1.6.0",
+    "@handlewithcare/react-prosemirror": "3.2.9",
     "@headlessui/tailwindcss": "0.2.2",
     "@heroicons/react": "1.0.6",
     "@hookform/resolvers": "5.4.0",
     "@shadcn/react": "0.3.1",
     "@tanstack/react-pacer": "0.22.1",
     "@tanstack/react-query": "5.100.7",
     "@tanstack/react-table": "8.21.3",
+    "@tanstack/react-virtual": "3.14.13",
     "@types/papaparse": "5.5.2",
     "class-variance-authority": "0.7.1",
     "clsx": "^2.1.1",
@@ -49,18 +51,24 @@
     "openapi-fetch": "^0.17.0",
     "openapi-react-query": "^0.5.4",
     "papaparse": "5.5.3",
+    "prosemirror-model": "1.25.12",
+    "prosemirror-state": "1.4.4",
+    "prosemirror-view": "1.42.3",
     "react": "19.2.8",
     "react-copy-to-clipboard": "5.1.1",
     "react-dom": "19.2.8",
+    "react-error-boundary": "6.1.6",
     "react-hook-form": "7.82.0",
     "react-intersection-observer": "11.0.1",
     "react-json-view-lite": "2.5.0",
     "react-markdown": "9.1.0",
+    "react-reconciler": "0.33.0",
     "react-syntax-highlighter": "15.6.6",
     "recharts": "3.9.2",
     "remark-gfm": "4.0.1",
     "sonner": "2.0.8",
     "tailwind-merge": "3.4.0",
+    "usehooks-ts": "3.1.1",
     "uuid": "14.0.0",
     "zod": "4.6.5"
   },

ui/litellm-dashboard/scripts/eslint-rules/index.mjs

@@ -4,6 +4,7 @@ import noComplexJsxArrow from "./no-complex-jsx-arrow.mjs";
 import filenamePascalCase from "./filename-pascal-case.mjs";
 import noNoopHoverVariant from "./no-noop-hover-variant.mjs";
 import noAdHocZIndex from "./no-ad-hoc-z-index.mjs";
+import noArbitraryDesignValue from "./no-arbitrary-design-value.mjs";
 
 const plugin = {
   rules: {
@@ -13,6 +14,7 @@ const plugin = {
     "filename-pascal-case": filenamePascalCase,
     "no-noop-hover-variant": noNoopHoverVariant,
     "no-ad-hoc-z-index": noAdHocZIndex,
+    "no-arbitrary-design-value": noArbitraryDesignValue,
   },
 };
 

ui/litellm-dashboard/scripts/eslint-rules/no-ad-hoc-z-index.mjs

@@ -1,25 +1,6 @@
-const AD_HOC_Z = /^-?z-(?:\d+|\[[^\]]*\]|\([^)]*\))$/;
-
-const OPENERS = { "[": "]", "(": ")" };
+import { utilityOf } from "./tailwind-utility.mjs";
 
-const utilityOf = (token) => {
-  const closers = [];
-  const lastTopLevelColon = [...token].reduce((found, ch, i) => {
-    if (closers.length > 0 && ch === closers[closers.length - 1]) {
-      closers.pop();
-      return found;
-    }
-    if (ch in OPENERS) {
-      closers.push(OPENERS[ch]);
-      return found;
-    }
-    return ch === ":" && closers.length === 0 ? i : found;
-  }, -1);
-  return token
-    .slice(lastTopLevelColon + 1)
-    .replace(/^!/, "")
-    .replace(/!$/, "");
-};
+const AD_HOC_Z = /^-?z-(?:\d+|\[[^\]]*\]|\([^)]*\))$/;
 
 const classify = (token, allowPopupLayer) => {
   const utility = utilityOf(token);