From c0f34e9f4da968a52d081497bbc739dd8cda8415 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 18 Dec 2025 13:15:01 +0000
Subject: [PATCH 1/2] feat: pretty print "Token Usage Metadata" codeblock

---
 .../RequestLogsRow/RequestLogsRow.tsx               | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index cbb338ab40fb1..6a99f4ceca691 100644
--- a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -19,6 +19,8 @@ import {
 	ChevronUpIcon,
 } from "lucide-react";
 import { type FC, useLayoutEffect, useRef, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { cn } from "utils/cn";
 import { humanDuration } from "utils/time";
 import { AIBridgeProviderIcon } from "../AIBridgeProviderIcon";
@@ -477,7 +479,16 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<div className="flex flex-col gap-2 w-[800px]">
 									<div>Token Usage Metadata</div>
 									<div className="bg-surface-secondary rounded-md p-4">
-										<pre>{JSON.stringify(tokenUsagesMetadata, null, 2)}</pre>
+										<SyntaxHighlighter
+											language="json"
+											style={dracula}
+											customStyle={{
+												padding: 0,
+												background: "transparent",
+											}}
+										>
+											{JSON.stringify(tokenUsagesMetadata, null, 2)}
+										</SyntaxHighlighter>
 									</div>
 								</div>
 							)}

From d90a6caf00d12bcfba83a23e1583b164f1f33cfd Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 18 Dec 2025 13:56:03 +0000
Subject: [PATCH 2/2] feat: implement `<Codeblock />` component

---
 site/src/components/Codeblock/Codeblock.tsx   | 49 +++++++++++++++++++
 .../RequestLogsRow/RequestLogsRow.tsx         | 15 ++----
 2 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 site/src/components/Codeblock/Codeblock.tsx

diff --git a/site/src/components/Codeblock/Codeblock.tsx b/site/src/components/Codeblock/Codeblock.tsx
new file mode 100644
index 0000000000000..5ce87777c82aa
--- /dev/null
+++ b/site/src/components/Codeblock/Codeblock.tsx
@@ -0,0 +1,49 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+	darcula,
+	dracula,
+} from "react-syntax-highlighter/dist/cjs/styles/prism";
+
+export const Codeblock = ({
+	children,
+	...props
+}: React.ComponentProps<typeof SyntaxHighlighter>) => {
+	const [isDark, setIsDark] = useState(() => {
+		if (typeof document === "undefined") {
+			return true;
+		}
+		return document.documentElement.classList.contains("dark");
+	});
+
+	useEffect(() => {
+		if (typeof document === "undefined") {
+			return;
+		}
+		const root = document.documentElement;
+		const update = () => setIsDark(root.classList.contains("dark"));
+		update();
+
+		const mo = new MutationObserver(update);
+		mo.observe(root, { attributes: true, attributeFilter: ["class"] });
+		return () => {
+			mo.disconnect();
+		};
+	}, []);
+
+	return (
+		<SyntaxHighlighter
+			language="json"
+			style={isDark ? dracula : darcula}
+			customStyle={{
+				padding: 0,
+				border: "none",
+				background: "transparent",
+			}}
+			{...props}
+		>
+			{children}
+		</SyntaxHighlighter>
+	);
+};
diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 6a99f4ceca691..d1308f735d69d 100644
--- a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -4,6 +4,7 @@ import type {
 } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Badge } from "components/Badge/Badge";
+import { Codeblock } from "components/Codeblock/Codeblock";
 import { TableCell, TableRow } from "components/Table/Table";
 import {
 	Tooltip,
@@ -19,8 +20,6 @@ import {
 	ChevronUpIcon,
 } from "lucide-react";
 import { type FC, useLayoutEffect, useRef, useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { cn } from "utils/cn";
 import { humanDuration } from "utils/time";
 import { AIBridgeProviderIcon } from "../AIBridgeProviderIcon";
@@ -180,7 +179,6 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 	const [isOpen, setIsOpen] = useState(false);
 
 	const [firstPrompt] = interception.user_prompts;
-
 	const inputTokens = interception.token_usages.reduce(
 		(acc, tokenUsage) => acc + tokenUsage.input_tokens,
 		0,
@@ -479,16 +477,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 								<div className="flex flex-col gap-2 w-[800px]">
 									<div>Token Usage Metadata</div>
 									<div className="bg-surface-secondary rounded-md p-4">
-										<SyntaxHighlighter
-											language="json"
-											style={dracula}
-											customStyle={{
-												padding: 0,
-												background: "transparent",
-											}}
-										>
+										<Codeblock>
 											{JSON.stringify(tokenUsagesMetadata, null, 2)}
-										</SyntaxHighlighter>
+										</Codeblock>
 									</div>
 								</div>
 							)}