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"
/>

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}