From 214a476c3e196812447060c68e6c7ca54679aab0 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Wed, 12 Aug 2026 22:10:39 -0700
Subject: [PATCH] refactor(ui): migrate TokenFlow and JsonViewer to shadcn

Drops the antd Typography import from both. TokenFlow renders inside an antd
Descriptions.Item that already sets the colour, font size, line height and
wrapping the Text wrapper restated, so a bare span is pixel-identical there.
JsonViewer's placeholder moves onto the muted-foreground token.

The characterisation tests from the previous commit are unchanged and stay
green, which is what shows the markup swap did not move behaviour.
---
 ui/litellm-dashboard/eslint-suppressions.json          | 10 ----------
 .../view_logs/LogDetailsDrawer/JsonViewer.tsx          |  5 +----
 .../view_logs/LogDetailsDrawer/TokenFlow.tsx           |  8 ++------
 3 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/ui/litellm-dashboard/eslint-suppressions.json b/ui/litellm-dashboard/eslint-suppressions.json
index 8a86305b4cb..8b067f79af6 100644
--- a/ui/litellm-dashboard/eslint-suppressions.json
+++ b/ui/litellm-dashboard/eslint-suppressions.json
@@ -3873,11 +3873,6 @@
       "count": 1
     }
   },
-  "src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/view_logs/LogDetailsDrawer/LogDetailContent.tsx": {
     "no-nested-ternary": {
       "count": 3
@@ -3927,11 +3922,6 @@
       "count": 1
     }
   },
-  "src/components/view_logs/LogDetailsDrawer/TokenFlow.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "src/components/view_logs/LogDetailsDrawer/TruncatedValue.tsx": {
     "no-restricted-imports": {
       "count": 1
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx
index 0a873a7e255..af99eee0d16 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/JsonViewer.tsx
@@ -1,10 +1,7 @@
-import { Typography } from "antd";
 import { JsonView, defaultStyles } from "react-json-view-lite";
 import "react-json-view-lite/dist/index.css";
 import { JSON_MAX_HEIGHT, COLOR_BG_LIGHT, SPACING_LARGE } from "./constants";
 
-const { Text } = Typography;
-
 interface JsonViewerProps {
   data: any;
   mode: "formatted";
@@ -15,7 +12,7 @@ interface JsonViewerProps {
  * Uses an interactive tree component for easy navigation.
  */
 export function JsonViewer({ data }: JsonViewerProps) {
-  if (!data) return <Text type="secondary">No data</Text>;
+  if (!data) return <span className="text-muted-foreground">No data</span>;
 
   return (
     <div
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/TokenFlow.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/TokenFlow.tsx
index 5eec3c0a5cb..2183ed53f35 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/TokenFlow.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/TokenFlow.tsx
@@ -1,7 +1,3 @@
-import { Typography } from "antd";
-
-const { Text } = Typography;
-
 interface TokenFlowProps {
   prompt?: number;
   completion?: number;
@@ -14,9 +10,9 @@ interface TokenFlowProps {
  */
 export function TokenFlow({ prompt = 0, completion = 0, total = 0 }: TokenFlowProps) {
   return (
-    <Text>
+    <span>
       {total.toLocaleString()} ({prompt.toLocaleString()} prompt tokens + {completion.toLocaleString()} completion
       tokens)
-    </Text>
+    </span>
   );
 }