feat: add duration to the Request Logs details (#20756)

jakehwll · web-flow · commit f559e51d7f5d · 2025-11-13T12:29:03.000+11:00
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" />
diff --git 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}
