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(' ');
+}