From 2505f6245f160f0a60367140aa43066b8eabecb5 Mon Sep 17 00:00:00 2001
From: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
Date: Thu, 9 Apr 2026 08:52:32 -0400
Subject: [PATCH] fix(site): request logs and sessions page UI consistency
 (#24163)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

couple of little design tweaks to make the UI of the Request Logs page
and Sessions pages more consistent:

- decrease size of Request Logs page chevron
- copy Request Logs page chevron animation for Sessions expandable
sections
- use TokenBadges component in RequestLogsRow
- wrap tool call counts in badges

<img width="1393" height="210" alt="Screenshot 2026-04-08 at 1 56 10 PM"
src="https://github.com/user-attachments/assets/97e7acb6-71c7-48d6-b0df-a102c7602cc0"
/>
---
 .../RequestLogsRow/RequestLogsRow.tsx         | 78 +++++--------------
 .../SessionTimeline/SessionTimeline.tsx       | 19 ++---
 2 files changed, 26 insertions(+), 71 deletions(-)

diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index eff41f9784..d21513bcb9 100644
--- a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -1,4 +1,4 @@
-import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
 import { type FC, Fragment, useState } from "react";
 import type { AIBridgeInterception } from "#/api/typesGenerated";
 import { Avatar } from "#/components/Avatar/Avatar";
@@ -12,6 +12,7 @@ import {
 } from "#/components/Tooltip/Tooltip";
 import { cn } from "#/utils/cn";
 import { formatDate, humanDuration } from "#/utils/time";
+import { TokenBadges } from "../../TokenBadges";
 import { AIBridgeClientIcon } from "../icons/AIBridgeClientIcon";
 import { AIBridgeModelIcon } from "../icons/AIBridgeModelIcon";
 
@@ -140,7 +141,10 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 						])}
 					>
 						<ChevronRightIcon
-							className={cn("mr-4 transition-transform", isOpen && "rotate-90")}
+							className={cn(
+								"mr-4 transition-transform size-3.5",
+								isOpen && "rotate-90",
+							)}
 						/>
 						<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 						{formatDate(new Date(interception.started_at))}
@@ -163,32 +167,10 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 				</TableCell>
 				<TableCell className="w-32">
 					<div className="flex items-center">
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Badge className="gap-0 rounded-e-none">
-										<ArrowDownIcon className="size-icon-lg flex-shrink-0" />
-										<span className="truncate min-w-0 w-full">
-											{inputTokens}
-										</span>
-									</Badge>
-								</TooltipTrigger>
-								<TooltipContent>{inputTokens} Input Tokens</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
-						<TooltipProvider>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Badge className="gap-0 bg-surface-tertiary rounded-s-none">
-										<ArrowUpIcon className="size-icon-lg flex-shrink-0" />
-										<span className="truncate min-w-0 w-full">
-											{outputTokens}
-										</span>
-									</Badge>
-								</TooltipTrigger>
-								<TooltipContent>{outputTokens} Output Tokens</TooltipContent>
-							</Tooltip>
-						</TooltipProvider>
+						<TokenBadges
+							inputTokens={inputTokens}
+							outputTokens={outputTokens}
+						/>
 					</div>
 				</TableCell>
 				<TableCell className="w-40 max-w-40">
@@ -235,7 +217,9 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 						</TooltipProvider>
 					</div>
 				</TableCell>
-				<TableCell className="w-32 text-center">{toolCalls}</TableCell>
+				<TableCell className="w-32 text-center">
+					<Badge>{toolCalls}</Badge>
+				</TableCell>
 			</TableRow>
 			{isOpen && (
 				<TableRow>
@@ -323,42 +307,16 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 
 								<dt>Tool Calls:</dt>
 								<dd data-chromatic="ignore">
-									{interception.tool_usages.length}
+									<Badge>{interception.tool_usages.length}</Badge>
 								</dd>
 
 								<dt>Input/Output Tokens:</dt>
 								<dd data-chromatic="ignore">
 									<div className="flex items-center">
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<Badge className="gap-0 rounded-e-none">
-														<ArrowDownIcon className="size-icon-lg flex-shrink-0" />
-														<span className="truncate min-w-0 w-full">
-															{inputTokens}
-														</span>
-													</Badge>
-												</TooltipTrigger>
-												<TooltipContent>
-													{inputTokens} Input Tokens
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<Badge className="gap-0 bg-surface-tertiary rounded-s-none">
-														<ArrowUpIcon className="size-icon-lg flex-shrink-0" />
-														<span className="truncate min-w-0 w-full">
-															{outputTokens}
-														</span>
-													</Badge>
-												</TooltipTrigger>
-												<TooltipContent>
-													{outputTokens} Output Tokens
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
+										<TokenBadges
+											inputTokens={inputTokens}
+											outputTokens={outputTokens}
+										/>
 									</div>
 								</dd>
 							</dl>
diff --git a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionTimeline/SessionTimeline.tsx b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionTimeline/SessionTimeline.tsx
index 8cb91b1a15..e6de9da9bb 100644
--- a/site/src/pages/AIBridgePage/SessionThreadsPage/SessionTimeline/SessionTimeline.tsx
+++ b/site/src/pages/AIBridgePage/SessionThreadsPage/SessionTimeline/SessionTimeline.tsx
@@ -1,9 +1,4 @@
-import {
-	ChevronDownIcon,
-	ChevronRightIcon,
-	InfoIcon,
-	LoaderIcon,
-} from "lucide-react";
+import { ChevronRightIcon, InfoIcon, LoaderIcon } from "lucide-react";
 import { type FC, useEffect, useRef, useState } from "react";
 import type {
 	AIBridgeAgenticAction,
@@ -118,11 +113,13 @@ const CollapseButton: FC<CollapseButtonProps> = ({
 		className="border-none bg-transparent text-content-secondary flex items-center"
 		size="sm"
 	>
-		{isOpen ? (
-			<ChevronDownIcon className="size-3.5 flex-shrink-0" />
-		) : (
-			<ChevronRightIcon className="size-3.5 flex-shrink-0" />
-		)}
+		<ChevronRightIcon
+			className={cn(
+				"mr-4 transition-transform size-3.5",
+				isOpen && "rotate-90",
+			)}
+		/>
+		<span className="sr-only">({isOpen ? "Hide" : "Show more"})</span>
 		{children}
 	</Button>
 );