opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): request logs and sessions page UI consistency (#24163)

Browse Source 
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"
/>
This commit is contained in:
Jeremy Ruppel
2026-04-09 08:52:32 -04:00
committed by GitHub
parent 29ad2c6201
commit 2505f6245f
2 changed files with 26 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+18 -60
View File
@@ -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>
site/src/pages/AIBridgePage/SessionThreadsPage/SessionTimeline/SessionTimeline.tsx
+8 -11
View File
@@ -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>
);