From f559e51d7f5dce823ac81da44153e03863d1dbcd Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Thu, 13 Nov 2025 12:29:03 +1100
Subject: [PATCH] feat: add `duration` to the Request Logs details (#20756)

This pull-request simply implements a new field within our `Request
Log`s details view where-in we describe back to the user how long their
request took based on the `end_date - start_date` in a human-like way.
Users can hover the value to see the `title=` for the true value.

<img width="2358" height="936" alt="CleanShot 2025-11-13 at 11 51 56@2x"
src="https://github.com/user-attachments/assets/f69c87cd-2735-4e03-9fc8-ae0f4d94b5d1"
/>
---
 .../RequestLogsRow/RequestLogsRow.tsx           | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
index 06f821ef88..4bdd2013a8 100644
--- a/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
+++ b/site/src/pages/AIGovernancePage/RequestLogsPage/RequestLogsRow/RequestLogsRow.tsx
@@ -15,6 +15,7 @@ import {
 } from "lucide-react";
 import { type FC, Fragment, useState } from "react";
 import { cn } from "utils/cn";
+import { humanDuration } from "utils/time";
 
 type RequestLogsRowProps = {
 	interception: AIBridgeInterception;
@@ -34,6 +35,13 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 		0,
 	);
 	const toolCalls = interception.tool_usages.length;
+	const duration =
+		interception.ended_at &&
+		Math.max(
+			0,
+			new Date(interception.ended_at).getTime() -
+				new Date(interception.started_at).getTime(),
+		);
 
 	return (
 		<>
@@ -123,6 +131,15 @@ export const RequestLogsRow: FC<RequestLogsRowProps> = ({ interception }) => {
 									</>
 								)}
 
+								{(duration || duration === 0) && (
+									<>
+										<dt>Duration:</dt>
+										<dd title={duration.toString()} data-chromatic="ignore">
+											{humanDuration(duration)}
+										</dd>
+									</>
+								)}
+
 								<dt>Initiator:</dt>
 								<dd data-chromatic="ignore">
 									{interception.initiator.username}