diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte index a87d879c20..b4b1042257 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte @@ -4,6 +4,7 @@ import * as Tooltip from '$lib/components/ui/tooltip'; import { ChatMessageStatsView } from '$lib/enums'; import type { ChatMessageAgenticTimings } from '$lib/types/chat'; + import { formatPerformanceTime } from '$lib/utils/formatters'; interface Props { predictedTokens?: number; @@ -89,8 +90,8 @@ : 0 ); - let agenticToolsTimeInSeconds = $derived( - hasAgenticStats ? (agenticTimings!.toolsMs / 1000).toFixed(2) : '0.00' + let formattedAgenticToolsTime = $derived( + hasAgenticStats ? formatPerformanceTime(agenticTimings!.toolsMs) : '0s' ); let agenticTotalTimeMs = $derived( @@ -99,7 +100,7 @@ : 0 ); - let agenticTotalTimeInSeconds = $derived((agenticTotalTimeMs / 1000).toFixed(2)); + let formattedAgenticTotalTime = $derived(formatPerformanceTime(agenticTotalTimeMs));
@@ -219,7 +220,7 @@ {:else if hasPromptStats} diff --git a/tools/server/webui/src/lib/utils/formatters.ts b/tools/server/webui/src/lib/utils/formatters.ts index 5885a23305..bdf2ca26fd 100644 --- a/tools/server/webui/src/lib/utils/formatters.ts +++ b/tools/server/webui/src/lib/utils/formatters.ts @@ -82,3 +82,44 @@ export function formatTime(date: Date): string { second: '2-digit' }); } + +/** + * Formats milliseconds to a human-readable time string for performance metrics. + * Examples: "4h 12min 54s", "12min 34s", "45s", "0.5s" + * + * @param ms - Time in milliseconds + * @returns Formatted time string + */ +export function formatPerformanceTime(ms: number): string { + if (ms < 0) return '0s'; + + const totalSeconds = ms / 1000; + + if (totalSeconds < 1) { + return `${totalSeconds.toFixed(1)}s`; + } + + if (totalSeconds < 10) { + return `${totalSeconds.toFixed(1)}s`; + } + + const hours = Math.floor(totalSeconds / 3600); + const minutes = Math.floor((totalSeconds % 3600) / 60); + const seconds = Math.floor(totalSeconds % 60); + + const parts: string[] = []; + + if (hours > 0) { + parts.push(`${hours}h`); + } + + if (minutes > 0) { + parts.push(`${minutes}min`); + } + + if (seconds > 0 || parts.length === 0) { + parts.push(`${seconds}s`); + } + + return parts.join(' '); +}