fix: improve AI Bridge request logs UI/UX #21252

jakehwll · 2025-12-12T14:49:25Z

Closes #21052 and is related to #21218

This pull request implements a bunch of changes the team requested to improve the overall user experience when navigating to the Request Logs page. Since these are mostly UI changes, screenshots do a much better job of showing what's different than me trying to explain everything in words, so I've included them below.

Warning

More globally we've changed how we're rendering <PaginationHeader />, therefore we've renamed it to <PaginationAmount />. This will effect multiple layouts however its a global improvement we're intentionally looking to make.

Preview

Changes

Date formatting set to a standardised way including the month as a MMM (i.e Dec)
Names and avatars are now rendered larger, furthermore they render the .name field falling back on .username.
Font-size increased from text-xs to text-sm to increase overall legibility globally.
Initiator is now rendered inside of a <Badge /> and gives longer names a chance to render.
Models are now rendered in a <Badge /> alongside their icons.
Input/Output tokens are in a shared <Badge />-group alongside truncation (when necessary).
Badge from 5 is rendered with the proper name being visible on hover (for use if truncated).
Move globally the Showing X of X counts to the bottom of the tables (effects other components outside of AI Bridge).
Icons are now included within the dropdown for the Provider filter.
Truncation of elements is now handled so larger prompts don't cause the table to require further scrolling.
New merged Input/Output <dt> element with the badge

Position	Pull-request
✅	fix: improve AI Bridge request logs UI/UX
	feat: add AI Bridge request logs model filter
	fix: promote AIBridge from `ExperimentalHandler`

site/src/components/Icons/OpenAIIcon.tsx

site/src/components/PaginationWidget/PaginationAmount.tsx

site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx

site/src/pages/AIBridgePage/AIBridgeLayout.tsx

site/src/components/Icons/OpenAIIcon.tsx

site/src/components/Icons/AnthropicIcon.tsx

site/src/components/PaginationWidget/PaginationContainer.tsx

site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx

…uestLogsRow.tsx Co-authored-by: ケイラ <mckayla@hey.com>

site/src/pages/AIBridgePage/RequestLogsPage/filter/filter.tsx

site/static/icon/claude-device.svg

github-actions · 2025-12-16T20:20:42Z

Task created: https://dev.coder.com/tasks/bpmct/c56b5a95-770a-4422-b9e1-12fa823dbf80

bpmct · 2025-12-16T20:23:54Z

📚 Documentation Check

✨ Suggested Enhancement (Optional)

The UI improvements in this PR (provider icons, token badges, improved layout) could benefit the user-facing documentation:

docs/ai-coder/ai-bridge/monitoring.md - Currently shows only Grafana dashboards. Consider adding a screenshot showing the improved Request Logs UI in the Coder dashboard, which now includes:
- Provider icons (OpenAI, Anthropic)
- Token usage badges with visual indicators
- Improved date formatting and column layout
- Model display with provider branding

This would help users understand they can monitor AI Bridge usage directly in Coder's UI, not just through Grafana.

Note: This is purely a visual enhancement to existing functionality - no new features or behavior changes, so documentation updates are optional.

This comment was generated by an AI Agent through Coder Tasks

github-actions · 2025-12-17T01:54:22Z

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

Addressing feedback found in #21252 > [!IMPORTANT] > This pull-request removes endpoints from `ExperimentalHandler` from `coderd.go` and promotes the endpoints within the frontend. This means that we will no longer be serving AI Bridge under the `/api/experimental/` prefix now that things reached release in [`v2.29.0`](https://github.com/coder/coder/releases/tag/v2.29.0). > > ### Migration > > The `/api/experimental/aibridge` prefix has been removed. Any clients, scripts, or integrations that previously called AI Bridge endpoints under `/api/experimental/aibridge` must be updated to use the `/api/v2/aibridge` stable API routes introduced in v2.29.0. | Position | Pull-request | | -------- | ------------ | | | [fix: improve AI Bridge request logs UI/UX](#21252) | | | [feat: add AI Bridge request logs model filter](#21259) | | ✅ | [fix: promote AIBridge from `ExperimentalHandler`](#21278) | --------- Co-authored-by: Susana Ferreira <susana@coder.com>

aslilac · 2025-12-17T17:31:31Z

site/static/icon/claude-device.svg

I hate to keep blocking this over icons, but do we really need a second claude svg? 😅

jakehwll added 21 commits December 11, 2025 10:00

feat: update header content

65dbb72

fix: resolve table layout

f708a74

feat: add model content

0b2ab86

feat: implement badges for input/output

476030a

feat: add customised date (ew)

c69c5dd

chore: remove hover effect

375be8b

fix: truncate content correctly in <RequestLogsRow />

7d1fdc7

feat: add provider iconography

0798036

feat: enforce truncation of usernames

d3ce38a

feat: extend icons into <ProviderFilter />

fd91c72

feat: restore tooltips

10328b6

fix: resolve location of X of X

1ad186f

fix: rename user to initiator

6413524

fix: resolve padding on tablecell

306cef3

fix: resolve date rendering on interception

939a343

feat: implement interception model truncation

dabd9db

fix: resolve initiator truncation

9c79649

fix: resolve content leading and size

8295422

fix: prefer name instead of username

af9767d

fix: resolve pagination amount position

742a0ec

Merge branch 'main' into jakehwll/ai-bridge-request-logs-improvements

0e5e705

github-actions bot assigned jakehwll Dec 12, 2025

jakehwll changed the title ~~fix: AI Bridge request logs UI/UX improvements~~ fix: improve AI Bridge request logs UI/UX Dec 12, 2025

jakehwll commented Dec 12, 2025

View reviewed changes

site/src/components/Icons/OpenAIIcon.tsx Outdated Show resolved Hide resolved

jakehwll commented Dec 12, 2025

View reviewed changes

site/src/components/PaginationWidget/PaginationAmount.tsx Show resolved Hide resolved

jakehwll commented Dec 12, 2025

View reviewed changes

site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx Show resolved Hide resolved

chore: lint

8cfd5af

jakehwll commented Dec 13, 2025

View reviewed changes

site/src/pages/AIBridgePage/AIBridgeLayout.tsx Outdated Show resolved Hide resolved

jakehwll requested a review from matifali December 13, 2025 09:56

matifali reviewed Dec 13, 2025

View reviewed changes

site/src/components/Icons/OpenAIIcon.tsx Outdated Show resolved Hide resolved

jakehwll mentioned this pull request Dec 15, 2025

chore!: promote AIBridge from ExperimentalHandler #21278

Merged

aslilac reviewed Dec 15, 2025

View reviewed changes

jakehwll and others added 6 commits December 16, 2025 11:17

Update site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsRow/Req…

ac6af6a

…uestLogsRow.tsx Co-authored-by: ケイラ <mckayla@hey.com>

fix: remove emotion styles

ee2f961

fix: ensure we show date in customisedDateLocale

19bdefd

fix: update comment to describe mobile better

f4eba46

fix: resolve icons

f076c5d

fix: add anthropic.svg to icons.json

4941f85

aslilac reviewed Dec 16, 2025

View reviewed changes

site/src/pages/AIBridgePage/RequestLogsPage/filter/filter.tsx Outdated Show resolved Hide resolved

site/static/icon/claude-device.svg Show resolved Hide resolved

bpmct added the doc-check Assign this label to PRs to check for any doc changes. label Dec 16, 2025

jakehwll requested review from jdomeracki-coder, johnstcn and spikecurtis as code owners December 17, 2025 01:54

jakehwll force-pushed the jakehwll/ai-bridge-request-logs-improvements branch from 0a75b0c to 4941f85 Compare December 17, 2025 01:55

jakehwll removed request for jdomeracki-coder, johnstcn and spikecurtis December 17, 2025 01:55

jakehwll added 6 commits December 17, 2025 12:56

Merge branch 'main' into jakehwll/ai-bridge-request-logs-improvements

7392a1f

fix: rename anthropic.svg to claude-device.svg

0de9cb9

fix: refactor to <AIBridgeProviderIcon />

89a5b8f

fix: reorder "claude-device.svg" and "claude.svg"

3ce0d11

fix: add missing icon size class

37cda01

fix: dont enforce hour12 time

a1979d2

jakehwll mentioned this pull request Dec 17, 2025

Standardise time rendering across Date().toLocaleString() #21301

Open

feat: add hover effect

1f9aac6

aslilac approved these changes Dec 17, 2025

View reviewed changes

site/static/icon/claude-device.svg

Copy link

Member

aslilac Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to keep blocking this over icons, but do we really need a second claude svg? 😅

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: improve AI Bridge request logs UI/UX #21252

fix: improve AI Bridge request logs UI/UX #21252

Uh oh!

jakehwll commented Dec 12, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 16, 2025

Uh oh!

bpmct commented Dec 16, 2025

Uh oh!

github-actions bot commented Dec 17, 2025 •

edited

Loading

Uh oh!

aslilac Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

fix: improve AI Bridge request logs UI/UX #21252

Are you sure you want to change the base?

fix: improve AI Bridge request logs UI/UX #21252

Uh oh!

Conversation

jakehwll commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview

Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 16, 2025

Uh oh!

bpmct commented Dec 16, 2025

📚 Documentation Check

✨ Suggested Enhancement (Optional)

Uh oh!

github-actions bot commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aslilac Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

jakehwll commented Dec 12, 2025 •

edited

Loading

github-actions bot commented Dec 17, 2025 •

edited

Loading