@piwitests/server 0.18.1 → 0.19.0

package/.output/server/chunks/build/{_id_-B2yirIuA.mjs → _id_-B78ky13D.mjs}

@@ -1,36 +1,38 @@
-import { _ as _sfc_main$1$1, a as _sfc_main$g } from './DashboardNavbar-Bdp-OwTN.mjs';
-import { _ as _sfc_main$1$2 } from './Breadcrumb-C9ZPTLym.mjs';
-import { _ as __nuxt_component_3$1 } from './BreadcrumbNav-C3y42Vun.mjs';
-import { u as useRoute, k as useRouter, l as useHead, r as useRuntimeConfig, m as _sfc_main$k, p as __nuxt_component_12$1, n as _sfc_main$7$1, o as _sfc_main$p, w as __nuxt_component_7, j as useToast } from './server.mjs';
+import { _ as _sfc_main$1$1, a as _sfc_main$f } from './DashboardNavbar-BHmMSPX7.mjs';
+import { _ as _sfc_main$1$2 } from './Breadcrumb-Ak2Lg3oM.mjs';
+import { _ as __nuxt_component_3$2 } from './BreadcrumbNav-DO7I_z-n.mjs';
+import { u as useRoute, k as useRouter, l as useHead, r as useRuntimeConfig, m as _sfc_main$k, s as __nuxt_component_12, n as _sfc_main$7$1, o as _sfc_main$p, y as __nuxt_component_7, j as useToast } from './server.mjs';
+import { u as useCopyRich, n as __nuxt_component_23, a as __nuxt_component_18, b as __nuxt_component_19, c as __nuxt_component_20, _ as __nuxt_component_24, d as __nuxt_component_26, e as __nuxt_component_6$1, p as __nuxt_component_1$2, i as isImageFile, f as isVideoFile, q as __nuxt_component_3$2$1, r as __nuxt_component_4$2, l as __nuxt_component_3$4, m as __nuxt_component_4$3, g as __nuxt_component_1$1$1, h as __nuxt_component_2$2, j as __nuxt_component_3$1$1, k as __nuxt_component_4$1$1 } from './useCopyRich-BemRsKgv.mjs';
 import { _ as __nuxt_component_4$1 } from './NavbarActions-_YjrSUat.mjs';
-import { _ as __nuxt_component_8$1, a as __nuxt_component_1$4, b as __nuxt_component_13$1, c as __nuxt_component_12$2, d as __nuxt_component_14$1 } from './CiEnvCard-DXPOhdSG.mjs';
-import { u as useCopyRich, c as clusterSectionLocatorKey, b as __nuxt_component_24, e as useAiStatus, f as __nuxt_component_3$3, h as __nuxt_component_5, g as __nuxt_component_7$1, a as useDetailGrid, _ as __nuxt_component_0 } from './useAiStatus-ZO987RY7.mjs';
-import { _ as __nuxt_component_2$4 } from './BrowserBadge-DNCp9pF-.mjs';
-import { _ as _sfc_main$j } from './Card-BQP_oZkQ.mjs';
-import { a as __nuxt_component_9, _ as __nuxt_component_2$2 } from './HelpHint-YEMWtKu1.mjs';
-import { _ as __nuxt_component_16$1 } from './EntityLinks-DeOP13Kr.mjs';
-import { a as formatDuration, j as getStatusColor, c as renderAnsi, l as fileApiUrl, y as httpMethodColor, z as httpStatusColor, f as formatRelativeTime, g as clusterErrorTypeColor, q as formatBytes, e as errorMessage, A as splitDuration } from './index-CULN3-en.mjs';
+import { _ as __nuxt_component_8, a as __nuxt_component_1$5, b as __nuxt_component_14$2, c as __nuxt_component_13$1, d as __nuxt_component_15$1 } from './CiEnvCard-CrjOM17n.mjs';
+import { c as clusterSectionLocatorKey, a as __nuxt_component_25, d as useAiStatus, f as __nuxt_component_3$3, h as __nuxt_component_6, g as __nuxt_component_8$1, e as __nuxt_component_1$4, u as useDetailGrid, _ as __nuxt_component_0 } from './useAiStatus-CWvIo32Q.mjs';
+import { _ as __nuxt_component_14$1 } from './DurationValue-D20oGbnc.mjs';
+import { _ as __nuxt_component_3$5 } from './BrowserBadge-D33lqUcj.mjs';
+import { _ as _sfc_main$i } from './Card-BQP_oZkQ.mjs';
+import { _ as __nuxt_component_2$3 } from './TestMetaBadges-D5_yUtIP.mjs';
+import { a as __nuxt_component_9$2, _ as __nuxt_component_2$1 } from './HelpHint-DrcIv-Oj.mjs';
+import { _ as __nuxt_component_17$1 } from './EntityLinks-D3fp57pR.mjs';
+import { v as getStatusColor, g as renderAnsi, n as fileApiUrl, A as httpMethodColor, B as httpStatusColor, f as formatRelativeTime, i as clusterErrorTypeColor, C as isPiwiAnnotation, e as errorMessage, d as formatDuration } from './index-CU2nZhAa.mjs';
 import { defineComponent, withAsyncContext, ref, watch, computed, provide, mergeProps, withCtx, unref, isRef, createTextVNode, openBlock, createBlock, toDisplayString, createCommentVNode, createVNode, Fragment, renderList, createSlots, toValue, useSSRContext } from 'vue';
 import { ssrRenderComponent, ssrRenderAttr, ssrInterpolate, ssrRenderList, ssrRenderClass, ssrRenderStyle, ssrIncludeBooleanAttr, ssrRenderAttrs } from 'vue/server-renderer';
-import { _ as __nuxt_component_11 } from './SectionCard-COd9TuDq.mjs';
-import { _ as _sfc_main$f } from './Tooltip-7vwuDPrZ.mjs';
-import { _ as _sfc_main$i } from './Textarea-DrrqQUVG.mjs';
-import { dc as condenseErrorText, dd as hasSlowMark, d8 as extractCitedSectionIds } from '../nitro/nitro.mjs';
-import { u as useCopy } from './useCopy-BQQKcwlq.mjs';
-import { m as __nuxt_component_22, a as __nuxt_component_17, b as __nuxt_component_18, c as __nuxt_component_19, _ as __nuxt_component_23, d as __nuxt_component_25, o as __nuxt_component_1$2, i as isImageFile, e as isVideoFile, p as __nuxt_component_3$2, q as __nuxt_component_4$2, k as __nuxt_component_3$4, l as __nuxt_component_4$3, f as __nuxt_component_1$1$1, g as __nuxt_component_2$3, h as __nuxt_component_3$1$1, j as __nuxt_component_4$1$1 } from './PageStateCard-Bwee6JTk.mjs';
-import { _ as _sfc_main$h } from './Tabs-BV9XqjoO.mjs';
+import { _ as __nuxt_component_11 } from './SectionCard-CN-v0FZ_.mjs';
+import { _ as _sfc_main$e } from './Tooltip-BOazooWP.mjs';
+import { _ as _sfc_main$h } from './Textarea-Dv2-lOvW.mjs';
+import { dN as condenseErrorText, dO as hasSlowMark, dK as extractCitedSectionIds, cB as formatBytes } from '../nitro/nitro.mjs';
+import { _ as _sfc_main$g } from './Tabs-Bbsg9wag.mjs';
 import { _ as __nuxt_component_1$3 } from './LoadingState-C3pBSuOO.mjs';
-import { _ as __nuxt_component_8$2 } from './EmptyState-DV3oT_xz.mjs';
-import { _ as _sfc_main$l } from './Slideover-B95Rj237.mjs';
-import { _ as __nuxt_component_5$1 } from './CodeBlock-BGwNmJ8J.mjs';
-import { _ as __nuxt_component_3 } from './TableScroller-DMcdCVrH.mjs';
-import { _ as _sfc_main$e } from './Table-CPhhVzDv.mjs';
-import { _ as __nuxt_component_1$1 } from './OpenInIdeLink-B92wosXu.mjs';
-import { _ as __nuxt_component_1, a as __nuxt_component_2$1 } from './StatTile-D61Vzo6e.mjs';
-import { _ as __nuxt_component_36 } from './TestCaseHistoryChart-DMb-xSJa.mjs';
-import { b as buildRetryCommand } from './useOpenInIde-kMZ7Jw5c.mjs';
-import { u as useFetch } from './fetch-8kznMtBM.mjs';
-import './DashboardSidebarToggle-Ji6ADuqF.mjs';
+import { _ as __nuxt_component_9$1 } from './EmptyState-Dtlab7S9.mjs';
+import { _ as _sfc_main$j } from './Slideover-DgCa80mf.mjs';
+import { _ as __nuxt_component_5 } from './CodeBlock-BgE-NSmE.mjs';
+import { _ as __nuxt_component_3$1 } from './TableScroller-DMcdCVrH.mjs';
+import { _ as _sfc_main$d } from './Table-BRk04Hd2.mjs';
+import { _ as __nuxt_component_1$1 } from './OpenInIdeLink-C4MXA8ya.mjs';
+import { _ as __nuxt_component_1, a as __nuxt_component_2 } from './StatTile-D61Vzo6e.mjs';
+import { _ as __nuxt_component_38 } from './TestCaseHistoryChart-nMLPhdvD.mjs';
+import { b as buildRetryCommand } from './useOpenInIde-4GFf-kdi.mjs';
+import { u as useFetch } from './fetch-B4FwBOzu.mjs';
+import { u as useCopy } from './useCopy-CeKWgHyT.mjs';
+import './DashboardSidebarToggle-DCTnHiIv.mjs';
 import 'vue-router';
 import '@iconify/vue';
 import 'tailwindcss/colors';
@@ -51,6 +53,18 @@ import 'path';
 import 'fs/promises';
 import 'zlib';
 import 'util';
+import 'marked';
+import 'highlight.js/lib/core';
+import 'highlight.js/lib/languages/bash';
+import 'highlight.js/lib/languages/css';
+import 'highlight.js/lib/languages/diff';
+import 'highlight.js/lib/languages/javascript';
+import 'highlight.js/lib/languages/json';
+import 'highlight.js/lib/languages/python';
+import 'highlight.js/lib/languages/typescript';
+import 'highlight.js/lib/languages/xml';
+import 'highlight.js/lib/languages/yaml';
+import 'fflate';
 import 'pixelmatch';
 import 'sharp';
 import '@anthropic-ai/sdk';
@@ -74,26 +88,20 @@ import 'node:zlib';
 import 'consola';
 import 'node:url';
 import '@iconify/utils';
-import './Select-ppPz926C.mjs';
-import './useFormControl-BLpq1s4O.mjs';
+import './Separator-CR4WcEKD.mjs';
+import './useDesktopDownload-D49JRQSw.mjs';
+import './useIsDesktop-BS13spVj.mjs';
+import './useTauri-lRT8zkLv.mjs';
+import './Alert-C4xq8lao.mjs';
+import './Modal-Ck2XLt8d.mjs';
+import './Select-CUqj50wi.mjs';
+import './useFormControl-CZ9So7iX.mjs';
 import './handleAndDispatchCustomEvent-Bk_AVSSo.mjs';
-import './Modal-CfA78Hm1.mjs';
-import './Alert-Bp1Wz_sq.mjs';
-import 'highlight.js/lib/core';
-import 'highlight.js/lib/languages/javascript';
-import 'highlight.js/lib/languages/typescript';
-import 'highlight.js/lib/languages/python';
-import 'highlight.js/lib/languages/bash';
-import 'highlight.js/lib/languages/json';
-import 'highlight.js/lib/languages/css';
-import 'highlight.js/lib/languages/xml';
-import 'highlight.js/lib/languages/diff';
-import './help-content-DmFnuhNu.mjs';
+import './help-content-C876a9WD.mjs';
 import 'date-fns';
-import './RovingFocusItem-CxhHdNGo.mjs';
+import './RovingFocusItem-BJSzTBjy.mjs';
 import '@tanstack/vue-table';
 import '@tanstack/vue-virtual';
-import './Separator-CxZdx8kw.mjs';
 import './ChartMarkerTooltip-0DcMfD_6.mjs';
 import './MarkerBadge-D7meXy4u.mjs';
 import '../_/marker-categories.mjs';
@@ -102,7 +110,7 @@ import '@unovis/vue';
 import '@unovis/ts';
 import '@vue/shared';
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "TestCaseSummary",
   __ssrInlineRender: true,
   props: {
@@ -133,7 +141,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         out.push({ label: "Passed on retry", color: "warning", title: "This test failed then passed on a retry" });
       return out;
     });
-    const annotations = computed(() => props.testCase?.testAnnotations ?? []);
+    const annotations = computed(
+      () => (props.testCase?.testAnnotations ?? []).filter((ann) => !isPiwiAnnotation(ann.type))
+    );
     const startedAtMs = computed(() => props.testCase?.startedAt ?? null);
     const { summaryColSpanClass, blockColSpanClass } = useDetailGrid(() => {
       let count = 0;
@@ -144,17 +154,19 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _push, _parent, _attrs) => {
       const _component_FoldableSummary = __nuxt_component_0;
-      const _component_StatusBlock = __nuxt_component_1$4;
-      const _component_BrowserBadge = __nuxt_component_2$4;
-      const _component_UCard = _sfc_main$j;
+      const _component_StatusBlock = __nuxt_component_1$5;
+      const _component_DurationValue = __nuxt_component_14$1;
+      const _component_BrowserBadge = __nuxt_component_3$5;
+      const _component_UCard = _sfc_main$i;
       const _component_UBadge = _sfc_main$7$1;
+      const _component_TestMetaBadges = __nuxt_component_2$3;
       const _component_ClientOnly = __nuxt_component_7;
       const _component_UIcon = _sfc_main$p;
-      const _component_HelpHint = __nuxt_component_2$2;
-      const _component_SourceInfoCard = __nuxt_component_13$1;
-      const _component_CiEnvCard = __nuxt_component_12$2;
-      const _component_BlockCard = __nuxt_component_14$1;
-      const _component_EntityLinks = __nuxt_component_16$1;
+      const _component_HelpHint = __nuxt_component_2$1;
+      const _component_SourceInfoCard = __nuxt_component_14$2;
+      const _component_CiEnvCard = __nuxt_component_13$1;
+      const _component_BlockCard = __nuxt_component_15$1;
+      const _component_EntityLinks = __nuxt_component_17$1;
       _push(ssrRenderComponent(_component_FoldableSummary, mergeProps({ "storage-key": "test-case" }, _attrs), {
         folded: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
@@ -162,7 +174,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               status: __props.testCase?.status ?? "",
               size: "sm"
             }, null, _parent2, _scopeId));
-            _push2(`<span class="text-sm font-semibold truncate min-w-0"${_scopeId}>${ssrInterpolate(__props.testCase?.title)}</span><div class="flex items-center gap-3 ml-auto max-sm:hidden"${_scopeId}><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Dur: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.duration))}</strong></span><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Retries: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.testCase?.retries ?? 0)}</strong></span><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Steps: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.stepsCount)}</strong></span><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Worker: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.testCase?.workerIndex ?? "—")}</strong></span>`);
+            _push2(`<span class="text-sm font-semibold truncate min-w-0"${_scopeId}>${ssrInterpolate(__props.testCase?.title)}</span><div class="flex items-center gap-3 ml-auto max-sm:hidden"${_scopeId}><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Dur: `);
+            _push2(ssrRenderComponent(_component_DurationValue, {
+              ms: __props.testCase?.duration,
+              class: "font-bold text-gray-700 dark:text-gray-300"
+            }, null, _parent2, _scopeId));
+            _push2(`</span><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Retries: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.testCase?.retries ?? 0)}</strong></span><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Steps: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.stepsCount)}</strong></span><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Worker: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.testCase?.workerIndex ?? "—")}</strong></span>`);
             if (__props.testCase?.shardIndex != null) {
               _push2(`<span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> Shard: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.testCase.shardIndex)}</strong></span>`);
             } else {
@@ -188,7 +205,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               createVNode("div", { class: "flex items-center gap-3 ml-auto max-sm:hidden" }, [
                 createVNode("span", { class: "text-xs text-gray-500 tabular-nums whitespace-nowrap" }, [
                   createTextVNode(" Dur: "),
-                  createVNode("strong", { class: "text-gray-700 dark:text-gray-300" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.duration)), 1)
+                  createVNode(_component_DurationValue, {
+                    ms: __props.testCase?.duration,
+                    class: "font-bold text-gray-700 dark:text-gray-300"
+                  }, null, 8, ["ms"])
                 ]),
                 createVNode("span", { class: "text-xs text-gray-500 tabular-nums whitespace-nowrap" }, [
                   createTextVNode(" Retries: "),
@@ -273,7 +293,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                       _: 2
                     }, _parent3, _scopeId2));
                   });
-                  _push3(`<!--]--></div><p class="text-xs text-gray-500 mt-0.5"${_scopeId2}>`);
+                  _push3(`<!--]-->`);
+                  _push3(ssrRenderComponent(_component_TestMetaBadges, {
+                    tags: __props.testCase?.tags,
+                    meta: __props.testCase?.testMeta
+                  }, null, _parent3, _scopeId2));
+                  _push3(`</div><p class="text-xs text-gray-500 mt-0.5"${_scopeId2}>`);
                   if (__props.testCase?.location) {
                     _push3(`<span${_scopeId2}>${ssrInterpolate(__props.testCase.location)}</span>`);
                   } else {
@@ -281,11 +306,19 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   }
                   _push3(ssrRenderComponent(_component_ClientOnly, null, {}, _parent3, _scopeId2));
                   if (__props.historicalTiming) {
-                    _push3(`<span class="ml-2"${_scopeId2}> Avg ${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.historicalTiming.avg))} · <span class="${ssrRenderClass(__props.historicalTiming.diff > 0 ? "text-red-600" : "text-green-600")}"${_scopeId2}>${ssrInterpolate(__props.historicalTiming.diff > 0 ? "+" : "")}${ssrInterpolate(__props.historicalTiming.pct)}% </span></span>`);
+                    _push3(`<span class="ml-2"${_scopeId2}> Avg `);
+                    _push3(ssrRenderComponent(_component_DurationValue, {
+                      ms: __props.historicalTiming.avg
+                    }, null, _parent3, _scopeId2));
+                    _push3(` · <span class="${ssrRenderClass(__props.historicalTiming.diff > 0 ? "text-red-600" : "text-green-600")}"${_scopeId2}>${ssrInterpolate(__props.historicalTiming.diff > 0 ? "+" : "")}${ssrInterpolate(__props.historicalTiming.pct)}% </span></span>`);
                   } else {
                     _push3(`<!---->`);
                   }
-                  _push3(`</p></div></div><div class="grid grid-cols-2 sm:grid-cols-4 gap-2"${_scopeId2}><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Duration</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.duration))}</p></div><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Retries</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.testCase?.retries ?? 0)}</p></div><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Steps</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.stepsCount)}</p></div><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Worker</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.testCase?.workerIndex ?? "—")}</p></div></div>`);
+                  _push3(`</p></div></div><div class="grid grid-cols-2 sm:grid-cols-4 gap-2"${_scopeId2}><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Duration</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>`);
+                  _push3(ssrRenderComponent(_component_DurationValue, {
+                    ms: __props.testCase?.duration
+                  }, null, _parent3, _scopeId2));
+                  _push3(`</p></div><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Retries</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.testCase?.retries ?? 0)}</p></div><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Steps</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.stepsCount)}</p></div><div class="rounded-lg bg-gray-50 dark:bg-gray-900 p-3"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Worker</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.testCase?.workerIndex ?? "—")}</p></div></div>`);
                   if (__props.testCase?.slowestStep) {
                     _push3(`<div class="flex items-center gap-2 text-sm"${_scopeId2}>`);
                     _push3(ssrRenderComponent(_component_UIcon, {
@@ -294,7 +327,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     }, null, _parent3, _scopeId2));
                     _push3(`<span class="font-medium text-amber-700 dark:text-amber-300"${_scopeId2}>Slowest step:</span><span class="text-gray-700 dark:text-gray-300 truncate"${_scopeId2}>${ssrInterpolate(__props.testCase.slowestStep)}</span>`);
                     if (__props.testCase.slowestStepDuration) {
-                      _push3(`<span class="text-gray-500 shrink-0"${_scopeId2}>(${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase.slowestStepDuration))})</span>`);
+                      _push3(`<span class="text-gray-500 shrink-0"${_scopeId2}>(`);
+                      _push3(ssrRenderComponent(_component_DurationValue, {
+                        ms: __props.testCase.slowestStepDuration
+                      }, null, _parent3, _scopeId2));
+                      _push3(`)</span>`);
                     } else {
                       _push3(`<!---->`);
                     }
@@ -308,7 +345,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                       name: "i-lucide-hourglass",
                       class: "size-4 text-amber-500 shrink-0"
                     }, null, _parent3, _scopeId2));
-                    _push3(`<span class="font-medium text-amber-700 dark:text-amber-300"${_scopeId2}>Wasted in fixed waits:</span><span class="text-gray-700 dark:text-gray-300"${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.wastedTimeMs))}</span>`);
+                    _push3(`<span class="font-medium text-amber-700 dark:text-amber-300"${_scopeId2}>Wasted in fixed waits:</span>`);
+                    _push3(ssrRenderComponent(_component_DurationValue, {
+                      ms: __props.testCase?.wastedTimeMs,
+                      class: "text-gray-700 dark:text-gray-300"
+                    }, null, _parent3, _scopeId2));
                     _push3(ssrRenderComponent(_component_HelpHint, { topic: "case.wasted-time" }, null, _parent3, _scopeId2));
                     _push3(`</div>`);
                   } else {
@@ -354,7 +395,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                 ]),
                                 _: 2
                               }, 1032, ["title"]);
-                            }), 128))
+                            }), 128)),
+                            createVNode(_component_TestMetaBadges, {
+                              tags: __props.testCase?.tags,
+                              meta: __props.testCase?.testMeta
+                            }, null, 8, ["tags", "meta"])
                           ]),
                           createVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, [
                             __props.testCase?.location ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(__props.testCase.location), 1)) : createCommentVNode("", true),
@@ -372,7 +417,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               key: 1,
                               class: "ml-2"
                             }, [
-                              createTextVNode(" Avg " + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.historicalTiming.avg)) + " · ", 1),
+                              createTextVNode(" Avg "),
+                              createVNode(_component_DurationValue, {
+                                ms: __props.historicalTiming.avg
+                              }, null, 8, ["ms"]),
+                              createTextVNode(" · "),
                               createVNode("span", {
                                 class: __props.historicalTiming.diff > 0 ? "text-red-600" : "text-green-600"
                               }, toDisplayString(__props.historicalTiming.diff > 0 ? "+" : "") + toDisplayString(__props.historicalTiming.pct) + "% ", 3)
@@ -383,7 +432,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                       createVNode("div", { class: "grid grid-cols-2 sm:grid-cols-4 gap-2" }, [
                         createVNode("div", { class: "rounded-lg bg-gray-50 dark:bg-gray-900 p-3" }, [
                           createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Duration"),
-                          createVNode("p", { class: "text-xl font-bold mt-0.5" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.duration)), 1)
+                          createVNode("p", { class: "text-xl font-bold mt-0.5" }, [
+                            createVNode(_component_DurationValue, {
+                              ms: __props.testCase?.duration
+                            }, null, 8, ["ms"])
+                          ])
                         ]),
                         createVNode("div", { class: "rounded-lg bg-gray-50 dark:bg-gray-900 p-3" }, [
                           createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Retries"),
@@ -411,7 +464,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                         __props.testCase.slowestStepDuration ? (openBlock(), createBlock("span", {
                           key: 0,
                           class: "text-gray-500 shrink-0"
-                        }, "(" + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase.slowestStepDuration)) + ")", 1)) : createCommentVNode("", true)
+                        }, [
+                          createTextVNode("("),
+                          createVNode(_component_DurationValue, {
+                            ms: __props.testCase.slowestStepDuration
+                          }, null, 8, ["ms"]),
+                          createTextVNode(")")
+                        ])) : createCommentVNode("", true)
                       ])) : createCommentVNode("", true),
                       (__props.testCase?.wastedTimeMs ?? 0) > 0 ? (openBlock(), createBlock("div", {
                         key: 1,
@@ -422,7 +481,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           class: "size-4 text-amber-500 shrink-0"
                         }),
                         createVNode("span", { class: "font-medium text-amber-700 dark:text-amber-300" }, "Wasted in fixed waits:"),
-                        createVNode("span", { class: "text-gray-700 dark:text-gray-300" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.wastedTimeMs)), 1),
+                        createVNode(_component_DurationValue, {
+                          ms: __props.testCase?.wastedTimeMs,
+                          class: "text-gray-700 dark:text-gray-300"
+                        }, null, 8, ["ms"]),
                         createVNode(_component_HelpHint, { topic: "case.wasted-time" })
                       ])) : createCommentVNode("", true)
                     ])
@@ -523,7 +585,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                   ]),
                                   _: 2
                                 }, 1032, ["title"]);
-                              }), 128))
+                              }), 128)),
+                              createVNode(_component_TestMetaBadges, {
+                                tags: __props.testCase?.tags,
+                                meta: __props.testCase?.testMeta
+                              }, null, 8, ["tags", "meta"])
                             ]),
                             createVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, [
                               __props.testCase?.location ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(__props.testCase.location), 1)) : createCommentVNode("", true),
@@ -541,7 +607,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                                 key: 1,
                                 class: "ml-2"
                               }, [
-                                createTextVNode(" Avg " + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.historicalTiming.avg)) + " · ", 1),
+                                createTextVNode(" Avg "),
+                                createVNode(_component_DurationValue, {
+                                  ms: __props.historicalTiming.avg
+                                }, null, 8, ["ms"]),
+                                createTextVNode(" · "),
                                 createVNode("span", {
                                   class: __props.historicalTiming.diff > 0 ? "text-red-600" : "text-green-600"
                                 }, toDisplayString(__props.historicalTiming.diff > 0 ? "+" : "") + toDisplayString(__props.historicalTiming.pct) + "% ", 3)
@@ -552,7 +622,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                         createVNode("div", { class: "grid grid-cols-2 sm:grid-cols-4 gap-2" }, [
                           createVNode("div", { class: "rounded-lg bg-gray-50 dark:bg-gray-900 p-3" }, [
                             createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Duration"),
-                            createVNode("p", { class: "text-xl font-bold mt-0.5" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.duration)), 1)
+                            createVNode("p", { class: "text-xl font-bold mt-0.5" }, [
+                              createVNode(_component_DurationValue, {
+                                ms: __props.testCase?.duration
+                              }, null, 8, ["ms"])
+                            ])
                           ]),
                           createVNode("div", { class: "rounded-lg bg-gray-50 dark:bg-gray-900 p-3" }, [
                             createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Retries"),
@@ -580,7 +654,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           __props.testCase.slowestStepDuration ? (openBlock(), createBlock("span", {
                             key: 0,
                             class: "text-gray-500 shrink-0"
-                          }, "(" + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase.slowestStepDuration)) + ")", 1)) : createCommentVNode("", true)
+                          }, [
+                            createTextVNode("("),
+                            createVNode(_component_DurationValue, {
+                              ms: __props.testCase.slowestStepDuration
+                            }, null, 8, ["ms"]),
+                            createTextVNode(")")
+                          ])) : createCommentVNode("", true)
                         ])) : createCommentVNode("", true),
                         (__props.testCase?.wastedTimeMs ?? 0) > 0 ? (openBlock(), createBlock("div", {
                           key: 1,
@@ -591,7 +671,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                             class: "size-4 text-amber-500 shrink-0"
                           }),
                           createVNode("span", { class: "font-medium text-amber-700 dark:text-amber-300" }, "Wasted in fixed waits:"),
-                          createVNode("span", { class: "text-gray-700 dark:text-gray-300" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testCase?.wastedTimeMs)), 1),
+                          createVNode(_component_DurationValue, {
+                            ms: __props.testCase?.wastedTimeMs,
+                            class: "text-gray-700 dark:text-gray-300"
+                          }, null, 8, ["ms"]),
                           createVNode(_component_HelpHint, { topic: "case.wasted-time" })
                         ])) : createCommentVNode("", true)
                       ])
@@ -635,14 +718,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$d = _sfc_main$d.setup;
-_sfc_main$d.setup = (props, ctx) => {
+const _sfc_setup$c = _sfc_main$c.setup;
+_sfc_main$c.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseSummary.vue");
-  return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
+  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
 };
-const __nuxt_component_8 = Object.assign(_sfc_main$d, { __name: "TestCaseSummary" });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const __nuxt_component_9 = Object.assign(_sfc_main$c, { __name: "TestCaseSummary" });
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "TestCaseVerdictCard",
   __ssrInlineRender: true,
   props: {
@@ -720,8 +803,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       const _component_UBadge = _sfc_main$7$1;
       const _component_UIcon = _sfc_main$p;
       const _component_ClientOnly = __nuxt_component_7;
-      const _component_NuxtLink = __nuxt_component_12$1;
-      const _component_UTooltip = _sfc_main$f;
+      const _component_NuxtLink = __nuxt_component_12;
+      const _component_UTooltip = _sfc_main$e;
       _push(ssrRenderComponent(_component_SectionCard, mergeProps({
         icon: "i-lucide-clipboard-check",
         "icon-class": "text-amber-500",
@@ -857,14 +940,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$c = _sfc_main$c.setup;
-_sfc_main$c.setup = (props, ctx) => {
+const _sfc_setup$b = _sfc_main$b.setup;
+_sfc_main$b.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseVerdictCard.vue");
-  return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
+  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
 };
-const __nuxt_component_12 = Object.assign(_sfc_main$c, { __name: "TestCaseVerdictCard" });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const __nuxt_component_13 = Object.assign(_sfc_main$b, { __name: "TestCaseVerdictCard" });
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "FailureClusterCard",
   __ssrInlineRender: true,
   props: {
@@ -881,7 +964,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _push, _parent, _attrs) => {
       const _component_SectionCard = __nuxt_component_11;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_NuxtLink = __nuxt_component_12$1;
+      const _component_NuxtLink = __nuxt_component_12;
       const _component_UIcon = _sfc_main$p;
       const _component_UButton = _sfc_main$k;
       _push(ssrRenderComponent(_component_SectionCard, mergeProps({
@@ -1201,14 +1284,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$b = _sfc_main$b.setup;
-_sfc_main$b.setup = (props, ctx) => {
+const _sfc_setup$a = _sfc_main$a.setup;
+_sfc_main$a.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/FailureClusterCard.vue");
-  return _sfc_setup$b ? _sfc_setup$b(props, ctx) : void 0;
+  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
 };
-const __nuxt_component_13 = Object.assign(_sfc_main$b, { __name: "FailureClusterCard" });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const __nuxt_component_14 = Object.assign(_sfc_main$a, { __name: "FailureClusterCard" });
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TestCaseAiCard",
   __ssrInlineRender: true,
   props: {
@@ -1218,7 +1301,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { aiStatus } = useAiStatus();
     const toast = useToast();
-    const { copy: copyContext, copied: contextCopied } = useCopy();
     const diagnosis = ref(null);
     const posting = ref(false);
     const contextText = ref(null);
@@ -1280,9 +1362,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
 ${text}` : text;
       showAdditionalContext.value = true;
     }
-    function copyAiContext() {
-      if (contextText.value) copyContext(contextText.value, { toast: "AI context copied" });
-    }
     async function diagnose(force = false) {
       posting.value = true;
       try {
@@ -1317,14 +1396,15 @@ ${text}` : text;
     );
     return (_ctx, _push, _parent, _attrs) => {
       const _component_SectionCard = __nuxt_component_11;
-      const _component_UButton = _sfc_main$k;
+      const _component_CopyAiPromptButton = __nuxt_component_1$4;
       const _component_UIcon = _sfc_main$p;
       const _component_DiagnosisCoverageStrip = __nuxt_component_3$3;
-      const _component_UTextarea = _sfc_main$i;
-      const _component_DiagnosisResult = __nuxt_component_5;
-      const _component_HelpHint = __nuxt_component_2$2;
-      const _component_DiagnosisContextModal = __nuxt_component_7$1;
-      const _component_NuxtLink = __nuxt_component_12$1;
+      const _component_UTextarea = _sfc_main$h;
+      const _component_UButton = _sfc_main$k;
+      const _component_DiagnosisResult = __nuxt_component_6;
+      const _component_HelpHint = __nuxt_component_2$1;
+      const _component_DiagnosisContextModal = __nuxt_component_8$1;
+      const _component_NuxtLink = __nuxt_component_12;
       _push(ssrRenderComponent(_component_SectionCard, mergeProps({
         icon: "i-lucide-sparkles",
         "icon-class": "text-primary",
@@ -1333,44 +1413,14 @@ ${text}` : text;
       }, _attrs), {
         actions: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
-            _push2(ssrRenderComponent(_component_UButton, {
-              size: "xs",
-              color: "neutral",
-              variant: "outline",
-              icon: unref(contextCopied) ? "i-lucide-check" : "i-lucide-clipboard",
-              loading: unref(contextLoading),
-              disabled: !unref(contextText),
-              title: "Copy the full evidence context to paste into your own AI assistant",
-              onClick: copyAiContext
-            }, {
-              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
-                if (_push3) {
-                  _push3(`${ssrInterpolate(unref(contextCopied) ? "Copied" : "Copy AI context")}`);
-                } else {
-                  return [
-                    createTextVNode(toDisplayString(unref(contextCopied) ? "Copied" : "Copy AI context"), 1)
-                  ];
-                }
-              }),
-              _: 1
-            }, _parent2, _scopeId));
+            _push2(ssrRenderComponent(_component_CopyAiPromptButton, {
+              "context-endpoint": `/api/test-run-cases/${__props.testRunsCaseId}/diagnosis-context`
+            }, null, _parent2, _scopeId));
           } else {
             return [
-              createVNode(_component_UButton, {
-                size: "xs",
-                color: "neutral",
-                variant: "outline",
-                icon: unref(contextCopied) ? "i-lucide-check" : "i-lucide-clipboard",
-                loading: unref(contextLoading),
-                disabled: !unref(contextText),
-                title: "Copy the full evidence context to paste into your own AI assistant",
-                onClick: copyAiContext
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(contextCopied) ? "Copied" : "Copy AI context"), 1)
-                ]),
-                _: 1
-              }, 8, ["icon", "loading", "disabled"])
+              createVNode(_component_CopyAiPromptButton, {
+                "context-endpoint": `/api/test-run-cases/${__props.testRunsCaseId}/diagnosis-context`
+              }, null, 8, ["context-endpoint"])
             ];
           }
         }),
@@ -1506,7 +1556,7 @@ ${text}` : text;
             } else {
               _push2(`<div class="rounded-lg border border-dashed border-default p-4 text-center text-gray-400"${_scopeId}><p class="text-sm inline-flex items-center gap-1 justify-center"${_scopeId}> AI diagnosis is not configured `);
               _push2(ssrRenderComponent(_component_HelpHint, { topic: "cluster.ai-setup" }, null, _parent2, _scopeId));
-              _push2(`</p><p class="text-xs mt-2 max-w-xs mx-auto"${_scopeId}> Use <strong${_scopeId}>Copy AI context</strong> above to grab the full evidence bundle for your own AI tool, or configure a provider. </p>`);
+              _push2(`</p><p class="text-xs mt-2 max-w-xs mx-auto"${_scopeId}> Use <strong${_scopeId}>Export → AI context</strong> in the header to grab the full evidence bundle for your own AI tool, or configure a provider. </p>`);
               _push2(ssrRenderComponent(_component_UButton, {
                 to: "/settings/ai",
                 size: "xs",
@@ -1683,8 +1733,8 @@ ${text}` : text;
                   ]),
                   createVNode("p", { class: "text-xs mt-2 max-w-xs mx-auto" }, [
                     createTextVNode(" Use "),
-                    createVNode("strong", null, "Copy AI context"),
-                    createTextVNode(" above to grab the full evidence bundle for your own AI tool, or configure a provider. ")
+                    createVNode("strong", null, "Export → AI context"),
+                    createTextVNode(" in the header to grab the full evidence bundle for your own AI tool, or configure a provider. ")
                   ]),
                   createVNode(_component_UButton, {
                     to: "/settings/ai",
@@ -1738,13 +1788,13 @@ ${text}` : text;
     };
   }
 });
-const _sfc_setup$a = _sfc_main$a.setup;
-_sfc_main$a.setup = (props, ctx) => {
+const _sfc_setup$9 = _sfc_main$9.setup;
+_sfc_main$9.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseAiCard.vue");
-  return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
+  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
 };
-const __nuxt_component_14 = Object.assign(_sfc_main$a, { __name: "TestCaseAiCard" });
+const __nuxt_component_15 = Object.assign(_sfc_main$9, { __name: "TestCaseAiCard" });
 function useTraceEndpoint(path, enabled, auto) {
   const data = ref(null);
   const pending = ref(false);
@@ -1776,7 +1826,7 @@ function useTraceNetwork(runId, testRunsCaseId, enabled, options = {}) {
     options.auto ?? false
   );
 }
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "TestSourceCard",
   __ssrInlineRender: true,
   props: {
@@ -1818,14 +1868,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const card = ref(null);
     __expose({ reveal: () => card.value?.reveal() });
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_CollapsibleSectionCard = __nuxt_component_23;
-      const _component_UTabs = _sfc_main$h;
+      const _component_CollapsibleSectionCard = __nuxt_component_24;
+      const _component_UTabs = _sfc_main$g;
       const _component_UIcon = _sfc_main$p;
       const _component_TraceCallStack = __nuxt_component_3$4;
       const _component_TestSourceStack = __nuxt_component_4$3;
-      const _component_MarkdownPreview = __nuxt_component_24;
+      const _component_MarkdownPreview = __nuxt_component_25;
       const _component_LoadingState = __nuxt_component_1$3;
-      const _component_DocLink = __nuxt_component_9;
+      const _component_DocLink = __nuxt_component_9$2;
       _push(ssrRenderComponent(_component_CollapsibleSectionCard, mergeProps({
         ref_key: "card",
         ref: card,
@@ -2018,14 +2068,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$9 = _sfc_main$9.setup;
-_sfc_main$9.setup = (props, ctx) => {
+const _sfc_setup$8 = _sfc_main$8.setup;
+_sfc_main$8.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestSourceCard.vue");
-  return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
+  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
 };
-const __nuxt_component_15 = Object.assign(_sfc_main$9, { __name: "TestSourceCard" });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const __nuxt_component_16 = Object.assign(_sfc_main$8, { __name: "TestSourceCard" });
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "TestCaseEvidenceCard",
   __ssrInlineRender: true,
   props: {
@@ -2063,14 +2113,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const card = ref(null);
     __expose({ reveal: () => card.value?.reveal?.() });
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_CollapsibleSectionCard = __nuxt_component_23;
+      const _component_CollapsibleSectionCard = __nuxt_component_24;
       const _component_TestEvidenceScreenshots = __nuxt_component_1$1$1;
-      const _component_TestEvidenceVideos = __nuxt_component_2$3;
+      const _component_TestEvidenceVideos = __nuxt_component_2$2;
       const _component_TestEvidenceTraces = __nuxt_component_3$1$1;
       const _component_TestEvidenceSection = __nuxt_component_4$1$1;
       const _component_UIcon = _sfc_main$p;
       const _component_UButton = _sfc_main$k;
-      const _component_EmptyState = __nuxt_component_8$2;
+      const _component_EmptyState = __nuxt_component_9$1;
       _push(ssrRenderComponent(_component_CollapsibleSectionCard, mergeProps({
         ref_key: "card",
         ref: card,
@@ -2238,14 +2288,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$8 = _sfc_main$8.setup;
-_sfc_main$8.setup = (props, ctx) => {
+const _sfc_setup$7 = _sfc_main$7.setup;
+_sfc_main$7.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseEvidenceCard.vue");
-  return _sfc_setup$8 ? _sfc_setup$8(props, ctx) : void 0;
+  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
 };
-const __nuxt_component_16 = Object.assign(_sfc_main$8, { __name: "TestCaseEvidenceCard" });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const __nuxt_component_17 = Object.assign(_sfc_main$7, { __name: "TestCaseEvidenceCard" });
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "TestCaseConsoleCard",
   __ssrInlineRender: true,
   props: {
@@ -2376,14 +2426,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$7 = _sfc_main$7.setup;
-_sfc_main$7.setup = (props, ctx) => {
+const _sfc_setup$6 = _sfc_main$6.setup;
+_sfc_main$6.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseConsoleCard.vue");
-  return _sfc_setup$7 ? _sfc_setup$7(props, ctx) : void 0;
+  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
 };
-const __nuxt_component_20 = Object.assign(_sfc_main$7, { __name: "TestCaseConsoleCard" });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const __nuxt_component_21 = Object.assign(_sfc_main$6, { __name: "TestCaseConsoleCard" });
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "TraceNetworkDrawer",
   __ssrInlineRender: true,
   props: {
@@ -2446,9 +2496,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_USlideover = _sfc_main$l;
+      const _component_USlideover = _sfc_main$j;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_CodeBlock = __nuxt_component_5$1;
+      const _component_DurationValue = __nuxt_component_14$1;
+      const _component_CodeBlock = __nuxt_component_5;
       const _component_LoadingState = __nuxt_component_1$3;
       _push(ssrRenderComponent(_component_USlideover, mergeProps({
         open: __props.open,
@@ -2526,7 +2577,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               } else {
                 _push2(`<!---->`);
               }
-              _push2(`<span class="tabular-nums"${_scopeId}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.entry.duration))}</span>`);
+              _push2(ssrRenderComponent(_component_DurationValue, {
+                ms: __props.entry.duration
+              }, null, _parent2, _scopeId));
               if (__props.entry.duringFailure) {
                 _push2(ssrRenderComponent(_component_UBadge, {
                   color: "error",
@@ -2555,7 +2608,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 });
                 _push2(`<!--]--></div><div class="flex flex-wrap gap-x-3 gap-y-1 mt-1.5 text-xs text-gray-500"${_scopeId}><!--[-->`);
                 ssrRenderList(unref(phases), (p) => {
-                  _push2(`<span class="inline-flex items-center gap-1"${_scopeId}><span class="${ssrRenderClass([p.color, "size-2 rounded-full"])}"${_scopeId}></span> ${ssrInterpolate(p.label)} <span class="tabular-nums"${_scopeId}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(p.value))}</span></span>`);
+                  _push2(`<span class="inline-flex items-center gap-1"${_scopeId}><span class="${ssrRenderClass([p.color, "size-2 rounded-full"])}"${_scopeId}></span> ${ssrInterpolate(p.label)} `);
+                  _push2(ssrRenderComponent(_component_DurationValue, {
+                    ms: p.value,
+                    "no-title": ""
+                  }, null, _parent2, _scopeId));
+                  _push2(`</span>`);
                 });
                 _push2(`<!--]--></div></div>`);
               } else {
@@ -2675,7 +2733,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                       key: 3,
                       title: "Bytes on the wire"
                     }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(__props.entry.transferSize)) + " transferred", 1)) : createCommentVNode("", true),
-                    createVNode("span", { class: "tabular-nums" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.entry.duration)), 1),
+                    createVNode(_component_DurationValue, {
+                      ms: __props.entry.duration
+                    }, null, 8, ["ms"]),
                     __props.entry.duringFailure ? (openBlock(), createBlock(_component_UBadge, {
                       key: 4,
                       color: "error",
@@ -2711,7 +2771,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           class: ["size-2 rounded-full", p.color]
                         }, null, 2),
                         createTextVNode(" " + toDisplayString(p.label) + " ", 1),
-                        createVNode("span", { class: "tabular-nums" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(p.value)), 1)
+                        createVNode(_component_DurationValue, {
+                          ms: p.value,
+                          "no-title": ""
+                        }, null, 8, ["ms"])
                       ]);
                     }), 128))
                   ])
@@ -2791,14 +2854,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$6 = _sfc_main$6.setup;
-_sfc_main$6.setup = (props, ctx) => {
+const _sfc_setup$5 = _sfc_main$5.setup;
+_sfc_main$5.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TraceNetworkDrawer.vue");
-  return _sfc_setup$6 ? _sfc_setup$6(props, ctx) : void 0;
+  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
 };
-const __nuxt_component_2 = Object.assign(_sfc_main$6, { __name: "TraceNetworkDrawer" });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const __nuxt_component_3 = Object.assign(_sfc_main$5, { __name: "TraceNetworkDrawer" });
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "TraceNetworkList",
   __ssrInlineRender: true,
   props: {
@@ -2862,9 +2925,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const selected = ref(null);
     const drawerOpen = ref(false);
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_UTabs = _sfc_main$h;
+      const _component_UTabs = _sfc_main$g;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_TraceNetworkDrawer = __nuxt_component_2;
+      const _component_DurationValue = __nuxt_component_14$1;
+      const _component_TraceNetworkDrawer = __nuxt_component_3;
       _push(`<div${ssrRenderAttrs(_attrs)}><div class="flex items-center justify-between gap-2 mb-2">`);
       _push(ssrRenderComponent(_component_UTabs, {
         modelValue: unref(filter),
@@ -2931,7 +2995,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         _push(`<span class="${ssrRenderClass([
           entry.duration > 1e3 ? "text-red-600 font-medium" : entry.duration > 500 ? "text-orange-500" : "text-gray-500",
           "ml-1 shrink-0 text-xs tabular-nums"
-        ])}">${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(entry.duration))}</span></div><div class="relative h-1.5 mt-1 rounded bg-gray-100 dark:bg-gray-800 overflow-hidden">`);
+        ])}">`);
+        _push(ssrRenderComponent(_component_DurationValue, {
+          ms: entry.duration,
+          "unit-class": "opacity-60"
+        }, null, _parent));
+        _push(`</span></div><div class="relative h-1.5 mt-1 rounded bg-gray-100 dark:bg-gray-800 overflow-hidden">`);
         if (unref(windowStyle)) {
           _push(`<div class="absolute inset-y-0 bg-red-500/10 border-x border-red-300/60 dark:border-red-800/60" style="${ssrRenderStyle(unref(windowStyle))}"></div>`);
         } else {
@@ -2956,42 +3025,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$5 = _sfc_main$5.setup;
-_sfc_main$5.setup = (props, ctx) => {
-  const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TraceNetworkList.vue");
-  return _sfc_setup$5 ? _sfc_setup$5(props, ctx) : void 0;
-};
-const __nuxt_component_4 = Object.assign(_sfc_main$5, { __name: "TraceNetworkList" });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "DurationValue",
-  __ssrInlineRender: true,
-  props: {
-    ms: { default: null },
-    fallback: { default: "—" },
-    unitClass: { default: "text-gray-400/70 dark:text-gray-500/70" }
-  },
-  setup(__props) {
-    const props = __props;
-    const parts = computed(() => splitDuration(props.ms));
-    return (_ctx, _push, _parent, _attrs) => {
-      _push(`<span${ssrRenderAttrs(mergeProps({ class: "tabular-nums" }, _attrs))}>`);
-      if (unref(parts)) {
-        _push(`<!--[-->${ssrInterpolate(unref(parts).value)}<span class="${ssrRenderClass(__props.unitClass)}">${ssrInterpolate(unref(parts).unit)}</span><!--]-->`);
-      } else {
-        _push(`<!--[-->${ssrInterpolate(__props.fallback)}<!--]-->`);
-      }
-      _push(`</span>`);
-    };
-  }
-});
 const _sfc_setup$4 = _sfc_main$4.setup;
 _sfc_main$4.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/DurationValue.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TraceNetworkList.vue");
   return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
 };
-const __nuxt_component_6 = Object.assign(_sfc_main$4, { __name: "DurationValue" });
+const __nuxt_component_4 = Object.assign(_sfc_main$4, { __name: "TraceNetworkList" });
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "TestCaseNetworkRequests",
   __ssrInlineRender: true,
@@ -3178,12 +3218,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _push, _parent, _attrs) => {
       const _component_SectionCard = __nuxt_component_11;
       const _component_UIcon = _sfc_main$p;
-      const _component_UTabs = _sfc_main$h;
+      const _component_UTabs = _sfc_main$g;
       const _component_LoadingState = __nuxt_component_1$3;
       const _component_TraceNetworkList = __nuxt_component_4;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_DurationValue = __nuxt_component_6;
-      const _component_DocLink = __nuxt_component_9;
+      const _component_DurationValue = __nuxt_component_14$1;
+      const _component_DocLink = __nuxt_component_9$2;
       _push(ssrRenderComponent(_component_SectionCard, mergeProps({
         icon: "i-lucide-network",
         title: "Network & backend logs",
@@ -3391,7 +3431,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                     name: "i-lucide-server",
                     class: "size-3.5"
                   }, null, _parent2, _scopeId));
-                  _push2(`${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(req.serverMs))}</span>`);
+                  _push2(ssrRenderComponent(_component_DurationValue, {
+                    ms: req.serverMs,
+                    "no-title": ""
+                  }, null, _parent2, _scopeId));
+                  _push2(`</span>`);
                 } else {
                   _push2(`<!---->`);
                 }
@@ -3403,7 +3447,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 _push2(`<span class="${ssrRenderClass([
                   (req.duration ?? 0) > 1e3 ? "text-red-600 font-medium" : (req.duration ?? 0) > 500 ? "text-orange-500" : "text-gray-500",
                   "ml-1 shrink-0 text-xs tabular-nums"
-                ])}"${_scopeId}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(req.duration))}</span></button>`);
+                ])}"${_scopeId}>`);
+                _push2(ssrRenderComponent(_component_DurationValue, {
+                  ms: req.duration,
+                  "unit-class": "opacity-60"
+                }, null, _parent2, _scopeId));
+                _push2(`</span></button>`);
                 if (req.spans.length > 0 && unref(expanded).has(req._index)) {
                   _push2(`<div class="px-2 pt-1.5 pb-2 pl-7 space-y-1"${_scopeId}><div class="flex items-center gap-1.5 text-[11px] uppercase tracking-wide text-gray-400"${_scopeId}>`);
                   _push2(ssrRenderComponent(_component_UIcon, {
@@ -3642,7 +3691,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                           name: "i-lucide-server",
                           class: "size-3.5"
                         }),
-                        createTextVNode(toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(req.serverMs)), 1)
+                        createVNode(_component_DurationValue, {
+                          ms: req.serverMs,
+                          "no-title": ""
+                        }, null, 8, ["ms"])
                       ], 8, ["title"])) : createCommentVNode("", true),
                       req.startTime ? (openBlock(), createBlock("span", {
                         key: 6,
@@ -3654,7 +3706,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                           "ml-1 shrink-0 text-xs tabular-nums",
                           (req.duration ?? 0) > 1e3 ? "text-red-600 font-medium" : (req.duration ?? 0) > 500 ? "text-orange-500" : "text-gray-500"
                         ]
-                      }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(req.duration)), 3)
+                      }, [
+                        createVNode(_component_DurationValue, {
+                          ms: req.duration,
+                          "unit-class": "opacity-60"
+                        }, null, 8, ["ms"])
+                      ], 2)
                     ], 10, ["disabled", "onClick"]),
                     req.spans.length > 0 && unref(expanded).has(req._index) ? (openBlock(), createBlock("div", {
                       key: 0,
@@ -3815,7 +3872,7 @@ _sfc_main$3.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseNetworkRequests.vue");
   return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
 };
-const __nuxt_component_21 = Object.assign(_sfc_main$3, { __name: "TestCaseNetworkRequests" });
+const __nuxt_component_22 = Object.assign(_sfc_main$3, { __name: "TestCaseNetworkRequests" });
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "TestCaseTracesCard",
   __ssrInlineRender: true,
@@ -3872,7 +3929,7 @@ _sfc_main$2.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseTracesCard.vue");
   return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
 };
-const __nuxt_component_31 = Object.assign(_sfc_main$2, { __name: "TestCaseTracesCard" });
+const __nuxt_component_33 = Object.assign(_sfc_main$2, { __name: "TestCaseTracesCard" });
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TestCaseAttachmentsCard",
   __ssrInlineRender: true,
@@ -3946,7 +4003,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const _component_SectionCard = __nuxt_component_11;
       const _component_UIcon = _sfc_main$p;
       const _component_UButton = _sfc_main$k;
-      const _component_VideoPlayer = __nuxt_component_3$2;
+      const _component_VideoPlayer = __nuxt_component_3$2$1;
       const _component_ScreenshotLightbox = __nuxt_component_4$2;
       if (__props.attachments.length > 0) {
         _push(ssrRenderComponent(_component_SectionCard, mergeProps({
@@ -4134,7 +4191,7 @@ _sfc_main$1.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/TestCaseAttachmentsCard.vue");
   return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
 };
-const __nuxt_component_32 = Object.assign(_sfc_main$1, { __name: "TestCaseAttachmentsCard" });
+const __nuxt_component_34 = Object.assign(_sfc_main$1, { __name: "TestCaseAttachmentsCard" });
 function getPerformanceHints(testCase) {
   const hints = [];
   if (!testCase) return hints;
@@ -4504,42 +4561,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UDashboardPanel = _sfc_main$1$1;
-      const _component_UDashboardNavbar = _sfc_main$g;
+      const _component_UDashboardNavbar = _sfc_main$f;
       const _component_UDashboardSidebarCollapse = _sfc_main$1$2;
-      const _component_BreadcrumbNav = __nuxt_component_3$1;
-      const _component_NuxtLink = __nuxt_component_12$1;
+      const _component_BreadcrumbNav = __nuxt_component_3$2;
+      const _component_NuxtLink = __nuxt_component_12;
       const _component_UIcon = _sfc_main$p;
+      const _component_ExportMenu = __nuxt_component_6$1;
       const _component_NavbarActions = __nuxt_component_4$1;
-      const _component_DetailPageLayout = __nuxt_component_8$1;
-      const _component_TestCaseSummary = __nuxt_component_8;
+      const _component_DetailPageLayout = __nuxt_component_8;
+      const _component_TestCaseSummary = __nuxt_component_9;
       const _component_SectionCard = __nuxt_component_11;
-      const _component_UTooltip = _sfc_main$f;
+      const _component_UTooltip = _sfc_main$e;
       const _component_UButton = _sfc_main$k;
-      const _component_TestCaseVerdictCard = __nuxt_component_12;
-      const _component_FailureClusterCard = __nuxt_component_13;
-      const _component_TestCaseAiCard = __nuxt_component_14;
-      const _component_TestSourceCard = __nuxt_component_15;
-      const _component_TestCaseEvidenceCard = __nuxt_component_16;
-      const _component_LocatorHealingPanel = __nuxt_component_17;
-      const _component_EnvironmentDiffCard = __nuxt_component_18;
-      const _component_VisualDiffCard = __nuxt_component_19;
-      const _component_TestCaseConsoleCard = __nuxt_component_20;
-      const _component_TestCaseNetworkRequests = __nuxt_component_21;
-      const _component_PageStateCard = __nuxt_component_22;
-      const _component_CollapsibleSectionCard = __nuxt_component_23;
-      const _component_MarkdownPreview = __nuxt_component_24;
-      const _component_DomSnapshotCard = __nuxt_component_25;
+      const _component_TestCaseVerdictCard = __nuxt_component_13;
+      const _component_FailureClusterCard = __nuxt_component_14;
+      const _component_TestCaseAiCard = __nuxt_component_15;
+      const _component_TestSourceCard = __nuxt_component_16;
+      const _component_TestCaseEvidenceCard = __nuxt_component_17;
+      const _component_LocatorHealingPanel = __nuxt_component_18;
+      const _component_EnvironmentDiffCard = __nuxt_component_19;
+      const _component_VisualDiffCard = __nuxt_component_20;
+      const _component_TestCaseConsoleCard = __nuxt_component_21;
+      const _component_TestCaseNetworkRequests = __nuxt_component_22;
+      const _component_PageStateCard = __nuxt_component_23;
+      const _component_CollapsibleSectionCard = __nuxt_component_24;
+      const _component_MarkdownPreview = __nuxt_component_25;
+      const _component_DomSnapshotCard = __nuxt_component_26;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_TableScroller = __nuxt_component_3;
-      const _component_UTable = _sfc_main$e;
+      const _component_DurationValue = __nuxt_component_14$1;
+      const _component_TableScroller = __nuxt_component_3$1;
+      const _component_UTable = _sfc_main$d;
       const _component_OpenInIdeLink = __nuxt_component_1$1;
-      const _component_EmptyState = __nuxt_component_8$2;
-      const _component_TestCaseTracesCard = __nuxt_component_31;
-      const _component_TestCaseAttachmentsCard = __nuxt_component_32;
+      const _component_EmptyState = __nuxt_component_9$1;
+      const _component_TestCaseTracesCard = __nuxt_component_33;
+      const _component_TestCaseAttachmentsCard = __nuxt_component_34;
       const _component_StatTileGrid = __nuxt_component_1;
-      const _component_StatTile = __nuxt_component_2$1;
-      const _component_DocLink = __nuxt_component_9;
-      const _component_TestCaseHistoryChart = __nuxt_component_36;
+      const _component_StatTile = __nuxt_component_2;
+      const _component_DocLink = __nuxt_component_9$2;
+      const _component_TestCaseHistoryChart = __nuxt_component_38;
       _push(ssrRenderComponent(_component_UDashboardPanel, mergeProps({ id: "test-run-case-detail" }, _attrs), {
         header: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
@@ -4621,6 +4680,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   } else {
                     _push3(`<!---->`);
                   }
+                  if (unref(testCase)) {
+                    _push3(ssrRenderComponent(_component_ExportMenu, {
+                      endpoint: `/api/test-run-cases/${unref(testCase).id}/export`,
+                      "base-name": `piwi-execution-${unref(testCase).id}`,
+                      class: "mr-2"
+                    }, null, _parent3, _scopeId2));
+                  } else {
+                    _push3(`<!---->`);
+                  }
                   _push3(ssrRenderComponent(_component_NavbarActions, { actions: unref(navbarActions) }, null, _parent3, _scopeId2));
                 } else {
                   return [
@@ -4639,6 +4707,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 1
                     }, 8, ["to"])) : createCommentVNode("", true),
+                    unref(testCase) ? (openBlock(), createBlock(_component_ExportMenu, {
+                      key: 1,
+                      endpoint: `/api/test-run-cases/${unref(testCase).id}/export`,
+                      "base-name": `piwi-execution-${unref(testCase).id}`,
+                      class: "mr-2"
+                    }, null, 8, ["endpoint", "base-name"])) : createCommentVNode("", true),
                     createVNode(_component_NavbarActions, { actions: unref(navbarActions) }, null, 8, ["actions"])
                   ];
                 }
@@ -4686,6 +4760,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   }, 8, ["to"])) : createCommentVNode("", true),
+                  unref(testCase) ? (openBlock(), createBlock(_component_ExportMenu, {
+                    key: 1,
+                    endpoint: `/api/test-run-cases/${unref(testCase).id}/export`,
+                    "base-name": `piwi-execution-${unref(testCase).id}`,
+                    class: "mr-2"
+                  }, null, 8, ["endpoint", "base-name"])) : createCommentVNode("", true),
                   createVNode(_component_NavbarActions, { actions: unref(navbarActions) }, null, 8, ["actions"])
                 ]),
                 _: 1
@@ -5139,7 +5219,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         }),
                         _: 2
                       }, _parent3, _scopeId2));
-                      _push3(`<span class="tabular-nums text-gray-500 dark:text-gray-400"${_scopeId2}>×${ssrInterpolate(c.count)} · ${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(c.duration))}</span></span>`);
+                      _push3(`<span class="tabular-nums text-gray-500 dark:text-gray-400"${_scopeId2}>×${ssrInterpolate(c.count)} · `);
+                      _push3(ssrRenderComponent(_component_DurationValue, {
+                        ms: c.duration
+                      }, null, _parent3, _scopeId2));
+                      _push3(`</span></span>`);
                     });
                     _push3(`<!--]--></div>`);
                     _push3(ssrRenderComponent(_component_TableScroller, {
@@ -5299,7 +5383,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             }),
                             "duration-cell": withCtx(({ row }, _push5, _parent5, _scopeId4) => {
                               if (_push5) {
-                                _push5(`<div class="min-w-[6rem]"${_scopeId4}><div class="flex items-center justify-between gap-2"${_scopeId4}><span class="${ssrRenderClass(`text-sm tabular-nums ${stepDurationTextClass(row.original.duration)}`)}"${_scopeId4}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration))}</span>`);
+                                _push5(`<div class="min-w-[6rem]"${_scopeId4}><div class="flex items-center justify-between gap-2"${_scopeId4}>`);
+                                _push5(ssrRenderComponent(_component_DurationValue, {
+                                  ms: row.original.duration,
+                                  class: `text-sm ${stepDurationTextClass(row.original.duration)}`,
+                                  "unit-class": "opacity-60"
+                                }, null, _parent5, _scopeId4));
                                 if (stepPctOfTest(row.original.duration)) {
                                   _push5(`<span class="text-xs tabular-nums text-gray-400 dark:text-gray-500"${_scopeId4}>${ssrInterpolate(stepPctOfTest(row.original.duration))}</span>`);
                                 } else {
@@ -5310,9 +5399,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 return [
                                   createVNode("div", { class: "min-w-[6rem]" }, [
                                     createVNode("div", { class: "flex items-center justify-between gap-2" }, [
-                                      createVNode("span", {
-                                        class: `text-sm tabular-nums ${stepDurationTextClass(row.original.duration)}`
-                                      }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 3),
+                                      createVNode(_component_DurationValue, {
+                                        ms: row.original.duration,
+                                        class: `text-sm ${stepDurationTextClass(row.original.duration)}`,
+                                        "unit-class": "opacity-60"
+                                      }, null, 8, ["ms", "class"]),
                                       stepPctOfTest(row.original.duration) ? (openBlock(), createBlock("span", {
                                         key: 0,
                                         class: "text-xs tabular-nums text-gray-400 dark:text-gray-500"
@@ -5403,9 +5494,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "duration-cell": withCtx(({ row }) => [
                                 createVNode("div", { class: "min-w-[6rem]" }, [
                                   createVNode("div", { class: "flex items-center justify-between gap-2" }, [
-                                    createVNode("span", {
-                                      class: `text-sm tabular-nums ${stepDurationTextClass(row.original.duration)}`
-                                    }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 3),
+                                    createVNode(_component_DurationValue, {
+                                      ms: row.original.duration,
+                                      class: `text-sm ${stepDurationTextClass(row.original.duration)}`,
+                                      "unit-class": "opacity-60"
+                                    }, null, 8, ["ms", "class"]),
                                     stepPctOfTest(row.original.duration) ? (openBlock(), createBlock("span", {
                                       key: 0,
                                       class: "text-xs tabular-nums text-gray-400 dark:text-gray-500"
@@ -5456,7 +5549,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ]),
                                 _: 2
                               }, 1032, ["color"]),
-                              createVNode("span", { class: "tabular-nums text-gray-500 dark:text-gray-400" }, "×" + toDisplayString(c.count) + " · " + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(c.duration)), 1)
+                              createVNode("span", { class: "tabular-nums text-gray-500 dark:text-gray-400" }, [
+                                createTextVNode("×" + toDisplayString(c.count) + " · ", 1),
+                                createVNode(_component_DurationValue, {
+                                  ms: c.duration
+                                }, null, 8, ["ms"])
+                              ])
                             ]);
                           }), 128))
                         ]),
@@ -5536,9 +5634,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "duration-cell": withCtx(({ row }) => [
                                 createVNode("div", { class: "min-w-[6rem]" }, [
                                   createVNode("div", { class: "flex items-center justify-between gap-2" }, [
-                                    createVNode("span", {
-                                      class: `text-sm tabular-nums ${stepDurationTextClass(row.original.duration)}`
-                                    }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 3),
+                                    createVNode(_component_DurationValue, {
+                                      ms: row.original.duration,
+                                      class: `text-sm ${stepDurationTextClass(row.original.duration)}`,
+                                      "unit-class": "opacity-60"
+                                    }, null, 8, ["ms", "class"]),
                                     stepPctOfTest(row.original.duration) ? (openBlock(), createBlock("span", {
                                       key: 0,
                                       class: "text-xs tabular-nums text-gray-400 dark:text-gray-500"
@@ -5709,54 +5809,134 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 if (_push5) {
                                   _push5(ssrRenderComponent(_component_StatTile, {
                                     label: "TTFB",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.ttfb),
                                     hint: "Time to first byte",
                                     "value-class": unref(webVitals).navigation.ttfb > 600 ? "text-red-600" : unref(webVitals).navigation.ttfb > 200 ? "text-orange-500" : "text-green-600"
-                                  }, null, _parent5, _scopeId4));
+                                  }, {
+                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                      if (_push6) {
+                                        _push6(ssrRenderComponent(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.ttfb
+                                        }, null, _parent6, _scopeId5));
+                                      } else {
+                                        return [
+                                          createVNode(_component_DurationValue, {
+                                            ms: unref(webVitals).navigation.ttfb
+                                          }, null, 8, ["ms"])
+                                        ];
+                                      }
+                                    }),
+                                    _: 1
+                                  }, _parent5, _scopeId4));
                                   _push5(ssrRenderComponent(_component_StatTile, {
                                     label: "DOM Interactive",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domInteractive),
                                     hint: "DOM interactive",
                                     "value-class": unref(webVitals).navigation.domInteractive > 3e3 ? "text-red-600" : unref(webVitals).navigation.domInteractive > 1500 ? "text-orange-500" : "text-green-600"
-                                  }, null, _parent5, _scopeId4));
+                                  }, {
+                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                      if (_push6) {
+                                        _push6(ssrRenderComponent(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.domInteractive
+                                        }, null, _parent6, _scopeId5));
+                                      } else {
+                                        return [
+                                          createVNode(_component_DurationValue, {
+                                            ms: unref(webVitals).navigation.domInteractive
+                                          }, null, 8, ["ms"])
+                                        ];
+                                      }
+                                    }),
+                                    _: 1
+                                  }, _parent5, _scopeId4));
                                   _push5(ssrRenderComponent(_component_StatTile, {
                                     label: "DOMContentLoaded",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domContentLoaded),
                                     hint: "DOMContentLoaded",
                                     "value-class": unref(webVitals).navigation.domContentLoaded > 3e3 ? "text-red-600" : unref(webVitals).navigation.domContentLoaded > 1500 ? "text-orange-500" : "text-green-600"
-                                  }, null, _parent5, _scopeId4));
+                                  }, {
+                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                      if (_push6) {
+                                        _push6(ssrRenderComponent(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.domContentLoaded
+                                        }, null, _parent6, _scopeId5));
+                                      } else {
+                                        return [
+                                          createVNode(_component_DurationValue, {
+                                            ms: unref(webVitals).navigation.domContentLoaded
+                                          }, null, 8, ["ms"])
+                                        ];
+                                      }
+                                    }),
+                                    _: 1
+                                  }, _parent5, _scopeId4));
                                   _push5(ssrRenderComponent(_component_StatTile, {
                                     label: "Load Complete",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.loadComplete),
                                     hint: "Page fully loaded",
                                     "value-class": unref(webVitals).navigation.loadComplete > 5e3 ? "text-red-600" : unref(webVitals).navigation.loadComplete > 3e3 ? "text-orange-500" : "text-green-600"
-                                  }, null, _parent5, _scopeId4));
+                                  }, {
+                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                      if (_push6) {
+                                        _push6(ssrRenderComponent(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.loadComplete
+                                        }, null, _parent6, _scopeId5));
+                                      } else {
+                                        return [
+                                          createVNode(_component_DurationValue, {
+                                            ms: unref(webVitals).navigation.loadComplete
+                                          }, null, 8, ["ms"])
+                                        ];
+                                      }
+                                    }),
+                                    _: 1
+                                  }, _parent5, _scopeId4));
                                 } else {
                                   return [
                                     createVNode(_component_StatTile, {
                                       label: "TTFB",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.ttfb),
                                       hint: "Time to first byte",
                                       "value-class": unref(webVitals).navigation.ttfb > 600 ? "text-red-600" : unref(webVitals).navigation.ttfb > 200 ? "text-orange-500" : "text-green-600"
-                                    }, null, 8, ["value", "value-class"]),
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.ttfb
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    }, 8, ["value-class"]),
                                     createVNode(_component_StatTile, {
                                       label: "DOM Interactive",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domInteractive),
                                       hint: "DOM interactive",
                                       "value-class": unref(webVitals).navigation.domInteractive > 3e3 ? "text-red-600" : unref(webVitals).navigation.domInteractive > 1500 ? "text-orange-500" : "text-green-600"
-                                    }, null, 8, ["value", "value-class"]),
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.domInteractive
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    }, 8, ["value-class"]),
                                     createVNode(_component_StatTile, {
                                       label: "DOMContentLoaded",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domContentLoaded),
                                       hint: "DOMContentLoaded",
                                       "value-class": unref(webVitals).navigation.domContentLoaded > 3e3 ? "text-red-600" : unref(webVitals).navigation.domContentLoaded > 1500 ? "text-orange-500" : "text-green-600"
-                                    }, null, 8, ["value", "value-class"]),
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.domContentLoaded
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    }, 8, ["value-class"]),
                                     createVNode(_component_StatTile, {
                                       label: "Load Complete",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.loadComplete),
                                       hint: "Page fully loaded",
                                       "value-class": unref(webVitals).navigation.loadComplete > 5e3 ? "text-red-600" : unref(webVitals).navigation.loadComplete > 3e3 ? "text-orange-500" : "text-green-600"
-                                    }, null, 8, ["value", "value-class"])
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).navigation.loadComplete
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    }, 8, ["value-class"])
                                   ];
                                 }
                               }),
@@ -5773,19 +5953,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               default: withCtx((_4, _push5, _parent5, _scopeId4) => {
                                 if (_push5) {
                                   if (unref(webVitals).paint.firstPaint !== void 0) {
-                                    _push5(ssrRenderComponent(_component_StatTile, {
-                                      label: "First Paint (FP)",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstPaint)
-                                    }, null, _parent5, _scopeId4));
+                                    _push5(ssrRenderComponent(_component_StatTile, { label: "First Paint (FP)" }, {
+                                      default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                        if (_push6) {
+                                          _push6(ssrRenderComponent(_component_DurationValue, {
+                                            ms: unref(webVitals).paint.firstPaint
+                                          }, null, _parent6, _scopeId5));
+                                        } else {
+                                          return [
+                                            createVNode(_component_DurationValue, {
+                                              ms: unref(webVitals).paint.firstPaint
+                                            }, null, 8, ["ms"])
+                                          ];
+                                        }
+                                      }),
+                                      _: 1
+                                    }, _parent5, _scopeId4));
                                   } else {
                                     _push5(`<!---->`);
                                   }
                                   if (unref(webVitals).paint.firstContentfulPaint !== void 0) {
                                     _push5(ssrRenderComponent(_component_StatTile, {
                                       label: "First Contentful Paint (FCP)",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstContentfulPaint),
                                       "value-class": unref(webVitals).paint.firstContentfulPaint > 3e3 ? "text-red-600" : unref(webVitals).paint.firstContentfulPaint > 1800 ? "text-orange-500" : "text-green-600"
-                                    }, null, _parent5, _scopeId4));
+                                    }, {
+                                      default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                        if (_push6) {
+                                          _push6(ssrRenderComponent(_component_DurationValue, {
+                                            ms: unref(webVitals).paint.firstContentfulPaint
+                                          }, null, _parent6, _scopeId5));
+                                        } else {
+                                          return [
+                                            createVNode(_component_DurationValue, {
+                                              ms: unref(webVitals).paint.firstContentfulPaint
+                                            }, null, 8, ["ms"])
+                                          ];
+                                        }
+                                      }),
+                                      _: 1
+                                    }, _parent5, _scopeId4));
                                   } else {
                                     _push5(`<!---->`);
                                   }
@@ -5793,15 +5999,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   return [
                                     unref(webVitals).paint.firstPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                       key: 0,
-                                      label: "First Paint (FP)",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstPaint)
-                                    }, null, 8, ["value"])) : createCommentVNode("", true),
+                                      label: "First Paint (FP)"
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).paint.firstPaint
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    })) : createCommentVNode("", true),
                                     unref(webVitals).paint.firstContentfulPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                       key: 1,
                                       label: "First Contentful Paint (FCP)",
-                                      value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstContentfulPaint),
                                       "value-class": unref(webVitals).paint.firstContentfulPaint > 3e3 ? "text-red-600" : unref(webVitals).paint.firstContentfulPaint > 1800 ? "text-orange-500" : "text-green-600"
-                                    }, null, 8, ["value", "value-class"])) : createCommentVNode("", true)
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).paint.firstContentfulPaint
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    }, 8, ["value-class"])) : createCommentVNode("", true)
                                   ];
                                 }
                               }),
@@ -5819,9 +6037,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 if (_push5) {
                                   _push5(ssrRenderComponent(_component_StatTile, {
                                     label: "Largest Contentful Paint (LCP)",
-                                    value: unref(webVitals).vitals.lcp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.lcp) : "n/a",
                                     "value-class": unref(webVitals).vitals.lcp == null ? "text-gray-400" : unref(webVitals).vitals.lcp > 4e3 ? "text-red-600" : unref(webVitals).vitals.lcp > 2500 ? "text-orange-500" : "text-green-600"
-                                  }, null, _parent5, _scopeId4));
+                                  }, {
+                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                      if (_push6) {
+                                        _push6(ssrRenderComponent(_component_DurationValue, {
+                                          ms: unref(webVitals).vitals.lcp,
+                                          fallback: "n/a"
+                                        }, null, _parent6, _scopeId5));
+                                      } else {
+                                        return [
+                                          createVNode(_component_DurationValue, {
+                                            ms: unref(webVitals).vitals.lcp,
+                                            fallback: "n/a"
+                                          }, null, 8, ["ms"])
+                                        ];
+                                      }
+                                    }),
+                                    _: 1
+                                  }, _parent5, _scopeId4));
                                   _push5(ssrRenderComponent(_component_StatTile, {
                                     label: "Cumulative Layout Shift (CLS)",
                                     value: unref(webVitals).vitals.cls != null ? String(unref(webVitals).vitals.cls) : "n/a",
@@ -5829,16 +6063,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   }, null, _parent5, _scopeId4));
                                   _push5(ssrRenderComponent(_component_StatTile, {
                                     label: "Interaction to Next Paint (INP)",
-                                    value: unref(webVitals).vitals.inp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.inp) : "n/a",
                                     "value-class": unref(webVitals).vitals.inp == null ? "text-gray-400" : unref(webVitals).vitals.inp > 500 ? "text-red-600" : unref(webVitals).vitals.inp > 200 ? "text-orange-500" : "text-green-600"
-                                  }, null, _parent5, _scopeId4));
+                                  }, {
+                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                      if (_push6) {
+                                        _push6(ssrRenderComponent(_component_DurationValue, {
+                                          ms: unref(webVitals).vitals.inp,
+                                          fallback: "n/a"
+                                        }, null, _parent6, _scopeId5));
+                                      } else {
+                                        return [
+                                          createVNode(_component_DurationValue, {
+                                            ms: unref(webVitals).vitals.inp,
+                                            fallback: "n/a"
+                                          }, null, 8, ["ms"])
+                                        ];
+                                      }
+                                    }),
+                                    _: 1
+                                  }, _parent5, _scopeId4));
                                 } else {
                                   return [
                                     createVNode(_component_StatTile, {
                                       label: "Largest Contentful Paint (LCP)",
-                                      value: unref(webVitals).vitals.lcp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.lcp) : "n/a",
                                       "value-class": unref(webVitals).vitals.lcp == null ? "text-gray-400" : unref(webVitals).vitals.lcp > 4e3 ? "text-red-600" : unref(webVitals).vitals.lcp > 2500 ? "text-orange-500" : "text-green-600"
-                                    }, null, 8, ["value", "value-class"]),
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).vitals.lcp,
+                                          fallback: "n/a"
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    }, 8, ["value-class"]),
                                     createVNode(_component_StatTile, {
                                       label: "Cumulative Layout Shift (CLS)",
                                       value: unref(webVitals).vitals.cls != null ? String(unref(webVitals).vitals.cls) : "n/a",
@@ -5846,9 +6103,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     }, null, 8, ["value", "value-class"]),
                                     createVNode(_component_StatTile, {
                                       label: "Interaction to Next Paint (INP)",
-                                      value: unref(webVitals).vitals.inp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.inp) : "n/a",
                                       "value-class": unref(webVitals).vitals.inp == null ? "text-gray-400" : unref(webVitals).vitals.inp > 500 ? "text-red-600" : unref(webVitals).vitals.inp > 200 ? "text-orange-500" : "text-green-600"
-                                    }, null, 8, ["value", "value-class"])
+                                    }, {
+                                      default: withCtx(() => [
+                                        createVNode(_component_DurationValue, {
+                                          ms: unref(webVitals).vitals.inp,
+                                          fallback: "n/a"
+                                        }, null, 8, ["ms"])
+                                      ]),
+                                      _: 1
+                                    }, 8, ["value-class"])
                                   ];
                                 }
                               }),
@@ -5873,28 +6137,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 default: withCtx(() => [
                                   createVNode(_component_StatTile, {
                                     label: "TTFB",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.ttfb),
                                     hint: "Time to first byte",
                                     "value-class": unref(webVitals).navigation.ttfb > 600 ? "text-red-600" : unref(webVitals).navigation.ttfb > 200 ? "text-orange-500" : "text-green-600"
-                                  }, null, 8, ["value", "value-class"]),
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).navigation.ttfb
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  }, 8, ["value-class"]),
                                   createVNode(_component_StatTile, {
                                     label: "DOM Interactive",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domInteractive),
                                     hint: "DOM interactive",
                                     "value-class": unref(webVitals).navigation.domInteractive > 3e3 ? "text-red-600" : unref(webVitals).navigation.domInteractive > 1500 ? "text-orange-500" : "text-green-600"
-                                  }, null, 8, ["value", "value-class"]),
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).navigation.domInteractive
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  }, 8, ["value-class"]),
                                   createVNode(_component_StatTile, {
                                     label: "DOMContentLoaded",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domContentLoaded),
                                     hint: "DOMContentLoaded",
                                     "value-class": unref(webVitals).navigation.domContentLoaded > 3e3 ? "text-red-600" : unref(webVitals).navigation.domContentLoaded > 1500 ? "text-orange-500" : "text-green-600"
-                                  }, null, 8, ["value", "value-class"]),
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).navigation.domContentLoaded
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  }, 8, ["value-class"]),
                                   createVNode(_component_StatTile, {
                                     label: "Load Complete",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.loadComplete),
                                     hint: "Page fully loaded",
                                     "value-class": unref(webVitals).navigation.loadComplete > 5e3 ? "text-red-600" : unref(webVitals).navigation.loadComplete > 3e3 ? "text-orange-500" : "text-green-600"
-                                  }, null, 8, ["value", "value-class"])
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).navigation.loadComplete
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  }, 8, ["value-class"])
                                 ]),
                                 _: 1
                               })) : createCommentVNode("", true),
@@ -5906,15 +6194,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 default: withCtx(() => [
                                   unref(webVitals).paint.firstPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                     key: 0,
-                                    label: "First Paint (FP)",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstPaint)
-                                  }, null, 8, ["value"])) : createCommentVNode("", true),
+                                    label: "First Paint (FP)"
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).paint.firstPaint
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  })) : createCommentVNode("", true),
                                   unref(webVitals).paint.firstContentfulPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                     key: 1,
                                     label: "First Contentful Paint (FCP)",
-                                    value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstContentfulPaint),
                                     "value-class": unref(webVitals).paint.firstContentfulPaint > 3e3 ? "text-red-600" : unref(webVitals).paint.firstContentfulPaint > 1800 ? "text-orange-500" : "text-green-600"
-                                  }, null, 8, ["value", "value-class"])) : createCommentVNode("", true)
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).paint.firstContentfulPaint
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  }, 8, ["value-class"])) : createCommentVNode("", true)
                                 ]),
                                 _: 1
                               })) : createCommentVNode("", true),
@@ -5926,9 +6226,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 default: withCtx(() => [
                                   createVNode(_component_StatTile, {
                                     label: "Largest Contentful Paint (LCP)",
-                                    value: unref(webVitals).vitals.lcp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.lcp) : "n/a",
                                     "value-class": unref(webVitals).vitals.lcp == null ? "text-gray-400" : unref(webVitals).vitals.lcp > 4e3 ? "text-red-600" : unref(webVitals).vitals.lcp > 2500 ? "text-orange-500" : "text-green-600"
-                                  }, null, 8, ["value", "value-class"]),
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).vitals.lcp,
+                                        fallback: "n/a"
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  }, 8, ["value-class"]),
                                   createVNode(_component_StatTile, {
                                     label: "Cumulative Layout Shift (CLS)",
                                     value: unref(webVitals).vitals.cls != null ? String(unref(webVitals).vitals.cls) : "n/a",
@@ -5936,9 +6243,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   }, null, 8, ["value", "value-class"]),
                                   createVNode(_component_StatTile, {
                                     label: "Interaction to Next Paint (INP)",
-                                    value: unref(webVitals).vitals.inp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.inp) : "n/a",
                                     "value-class": unref(webVitals).vitals.inp == null ? "text-gray-400" : unref(webVitals).vitals.inp > 500 ? "text-red-600" : unref(webVitals).vitals.inp > 200 ? "text-orange-500" : "text-green-600"
-                                  }, null, 8, ["value", "value-class"])
+                                  }, {
+                                    default: withCtx(() => [
+                                      createVNode(_component_DurationValue, {
+                                        ms: unref(webVitals).vitals.inp,
+                                        fallback: "n/a"
+                                      }, null, 8, ["ms"])
+                                    ]),
+                                    _: 1
+                                  }, 8, ["value-class"])
                                 ]),
                                 _: 1
                               })) : createCommentVNode("", true),
@@ -6050,28 +6364,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               default: withCtx(() => [
                                 createVNode(_component_StatTile, {
                                   label: "TTFB",
-                                  value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.ttfb),
                                   hint: "Time to first byte",
                                   "value-class": unref(webVitals).navigation.ttfb > 600 ? "text-red-600" : unref(webVitals).navigation.ttfb > 200 ? "text-orange-500" : "text-green-600"
-                                }, null, 8, ["value", "value-class"]),
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).navigation.ttfb
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                }, 8, ["value-class"]),
                                 createVNode(_component_StatTile, {
                                   label: "DOM Interactive",
-                                  value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domInteractive),
                                   hint: "DOM interactive",
                                   "value-class": unref(webVitals).navigation.domInteractive > 3e3 ? "text-red-600" : unref(webVitals).navigation.domInteractive > 1500 ? "text-orange-500" : "text-green-600"
-                                }, null, 8, ["value", "value-class"]),
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).navigation.domInteractive
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                }, 8, ["value-class"]),
                                 createVNode(_component_StatTile, {
                                   label: "DOMContentLoaded",
-                                  value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domContentLoaded),
                                   hint: "DOMContentLoaded",
                                   "value-class": unref(webVitals).navigation.domContentLoaded > 3e3 ? "text-red-600" : unref(webVitals).navigation.domContentLoaded > 1500 ? "text-orange-500" : "text-green-600"
-                                }, null, 8, ["value", "value-class"]),
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).navigation.domContentLoaded
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                }, 8, ["value-class"]),
                                 createVNode(_component_StatTile, {
                                   label: "Load Complete",
-                                  value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.loadComplete),
                                   hint: "Page fully loaded",
                                   "value-class": unref(webVitals).navigation.loadComplete > 5e3 ? "text-red-600" : unref(webVitals).navigation.loadComplete > 3e3 ? "text-orange-500" : "text-green-600"
-                                }, null, 8, ["value", "value-class"])
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).navigation.loadComplete
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                }, 8, ["value-class"])
                               ]),
                               _: 1
                             })) : createCommentVNode("", true),
@@ -6083,15 +6421,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               default: withCtx(() => [
                                 unref(webVitals).paint.firstPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                   key: 0,
-                                  label: "First Paint (FP)",
-                                  value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstPaint)
-                                }, null, 8, ["value"])) : createCommentVNode("", true),
+                                  label: "First Paint (FP)"
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).paint.firstPaint
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                })) : createCommentVNode("", true),
                                 unref(webVitals).paint.firstContentfulPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                   key: 1,
                                   label: "First Contentful Paint (FCP)",
-                                  value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstContentfulPaint),
                                   "value-class": unref(webVitals).paint.firstContentfulPaint > 3e3 ? "text-red-600" : unref(webVitals).paint.firstContentfulPaint > 1800 ? "text-orange-500" : "text-green-600"
-                                }, null, 8, ["value", "value-class"])) : createCommentVNode("", true)
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).paint.firstContentfulPaint
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                }, 8, ["value-class"])) : createCommentVNode("", true)
                               ]),
                               _: 1
                             })) : createCommentVNode("", true),
@@ -6103,9 +6453,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               default: withCtx(() => [
                                 createVNode(_component_StatTile, {
                                   label: "Largest Contentful Paint (LCP)",
-                                  value: unref(webVitals).vitals.lcp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.lcp) : "n/a",
                                   "value-class": unref(webVitals).vitals.lcp == null ? "text-gray-400" : unref(webVitals).vitals.lcp > 4e3 ? "text-red-600" : unref(webVitals).vitals.lcp > 2500 ? "text-orange-500" : "text-green-600"
-                                }, null, 8, ["value", "value-class"]),
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).vitals.lcp,
+                                      fallback: "n/a"
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                }, 8, ["value-class"]),
                                 createVNode(_component_StatTile, {
                                   label: "Cumulative Layout Shift (CLS)",
                                   value: unref(webVitals).vitals.cls != null ? String(unref(webVitals).vitals.cls) : "n/a",
@@ -6113,9 +6470,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 }, null, 8, ["value", "value-class"]),
                                 createVNode(_component_StatTile, {
                                   label: "Interaction to Next Paint (INP)",
-                                  value: unref(webVitals).vitals.inp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.inp) : "n/a",
                                   "value-class": unref(webVitals).vitals.inp == null ? "text-gray-400" : unref(webVitals).vitals.inp > 500 ? "text-red-600" : unref(webVitals).vitals.inp > 200 ? "text-orange-500" : "text-green-600"
-                                }, null, 8, ["value", "value-class"])
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode(_component_DurationValue, {
+                                      ms: unref(webVitals).vitals.inp,
+                                      fallback: "n/a"
+                                    }, null, 8, ["ms"])
+                                  ]),
+                                  _: 1
+                                }, 8, ["value-class"])
                               ]),
                               _: 1
                             })) : createCommentVNode("", true),
@@ -6230,6 +6594,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               if (_push5) {
                                 _push5(ssrRenderComponent(_component_UBadge, {
                                   color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.status),
+                                  variant: "subtle",
                                   class: "capitalize"
                                 }, {
                                   default: withCtx((_4, _push6, _parent6, _scopeId5) => {
@@ -6247,6 +6612,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 return [
                                   createVNode(_component_UBadge, {
                                     color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.status),
+                                    variant: "subtle",
                                     class: "capitalize"
                                   }, {
                                     default: withCtx(() => [
@@ -6260,13 +6626,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "duration-cell": withCtx(({ row }, _push5, _parent5, _scopeId4) => {
                               if (_push5) {
                                 if (row.original.duration !== null) {
-                                  _push5(`<span${_scopeId4}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration))}</span>`);
+                                  _push5(ssrRenderComponent(_component_DurationValue, {
+                                    ms: row.original.duration
+                                  }, null, _parent5, _scopeId4));
                                 } else {
                                   _push5(`<span class="text-gray-400"${_scopeId4}>—</span>`);
                                 }
                               } else {
                                 return [
-                                  row.original.duration !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 1)) : (openBlock(), createBlock("span", {
+                                  row.original.duration !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                                    key: 0,
+                                    ms: row.original.duration
+                                  }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                                     key: 1,
                                     class: "text-gray-400"
                                   }, "—"))
@@ -6351,6 +6722,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "status-cell": withCtx(({ row }) => [
                                 createVNode(_component_UBadge, {
                                   color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.status),
+                                  variant: "subtle",
                                   class: "capitalize"
                                 }, {
                                   default: withCtx(() => [
@@ -6360,7 +6732,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 }, 1032, ["color"])
                               ]),
                               "duration-cell": withCtx(({ row }) => [
-                                row.original.duration !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 1)) : (openBlock(), createBlock("span", {
+                                row.original.duration !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                                  key: 0,
+                                  ms: row.original.duration
+                                }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                                   key: 1,
                                   class: "text-gray-400"
                                 }, "—"))
@@ -6466,6 +6841,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "status-cell": withCtx(({ row }) => [
                                 createVNode(_component_UBadge, {
                                   color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.status),
+                                  variant: "subtle",
                                   class: "capitalize"
                                 }, {
                                   default: withCtx(() => [
@@ -6475,7 +6851,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 }, 1032, ["color"])
                               ]),
                               "duration-cell": withCtx(({ row }) => [
-                                row.original.duration !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 1)) : (openBlock(), createBlock("span", {
+                                row.original.duration !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                                  key: 0,
+                                  ms: row.original.duration
+                                }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                                   key: 1,
                                   class: "text-gray-400"
                                 }, "—"))
@@ -6719,7 +7098,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               ]),
                               _: 2
                             }, 1032, ["color"]),
-                            createVNode("span", { class: "tabular-nums text-gray-500 dark:text-gray-400" }, "×" + toDisplayString(c.count) + " · " + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(c.duration)), 1)
+                            createVNode("span", { class: "tabular-nums text-gray-500 dark:text-gray-400" }, [
+                              createTextVNode("×" + toDisplayString(c.count) + " · ", 1),
+                              createVNode(_component_DurationValue, {
+                                ms: c.duration
+                              }, null, 8, ["ms"])
+                            ])
                           ]);
                         }), 128))
                       ]),
@@ -6799,9 +7183,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "duration-cell": withCtx(({ row }) => [
                               createVNode("div", { class: "min-w-[6rem]" }, [
                                 createVNode("div", { class: "flex items-center justify-between gap-2" }, [
-                                  createVNode("span", {
-                                    class: `text-sm tabular-nums ${stepDurationTextClass(row.original.duration)}`
-                                  }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 3),
+                                  createVNode(_component_DurationValue, {
+                                    ms: row.original.duration,
+                                    class: `text-sm ${stepDurationTextClass(row.original.duration)}`,
+                                    "unit-class": "opacity-60"
+                                  }, null, 8, ["ms", "class"]),
                                   stepPctOfTest(row.original.duration) ? (openBlock(), createBlock("span", {
                                     key: 0,
                                     class: "text-xs tabular-nums text-gray-400 dark:text-gray-500"
@@ -6920,28 +7306,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             default: withCtx(() => [
                               createVNode(_component_StatTile, {
                                 label: "TTFB",
-                                value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.ttfb),
                                 hint: "Time to first byte",
                                 "value-class": unref(webVitals).navigation.ttfb > 600 ? "text-red-600" : unref(webVitals).navigation.ttfb > 200 ? "text-orange-500" : "text-green-600"
-                              }, null, 8, ["value", "value-class"]),
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).navigation.ttfb
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              }, 8, ["value-class"]),
                               createVNode(_component_StatTile, {
                                 label: "DOM Interactive",
-                                value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domInteractive),
                                 hint: "DOM interactive",
                                 "value-class": unref(webVitals).navigation.domInteractive > 3e3 ? "text-red-600" : unref(webVitals).navigation.domInteractive > 1500 ? "text-orange-500" : "text-green-600"
-                              }, null, 8, ["value", "value-class"]),
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).navigation.domInteractive
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              }, 8, ["value-class"]),
                               createVNode(_component_StatTile, {
                                 label: "DOMContentLoaded",
-                                value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.domContentLoaded),
                                 hint: "DOMContentLoaded",
                                 "value-class": unref(webVitals).navigation.domContentLoaded > 3e3 ? "text-red-600" : unref(webVitals).navigation.domContentLoaded > 1500 ? "text-orange-500" : "text-green-600"
-                              }, null, 8, ["value", "value-class"]),
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).navigation.domContentLoaded
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              }, 8, ["value-class"]),
                               createVNode(_component_StatTile, {
                                 label: "Load Complete",
-                                value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).navigation.loadComplete),
                                 hint: "Page fully loaded",
                                 "value-class": unref(webVitals).navigation.loadComplete > 5e3 ? "text-red-600" : unref(webVitals).navigation.loadComplete > 3e3 ? "text-orange-500" : "text-green-600"
-                              }, null, 8, ["value", "value-class"])
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).navigation.loadComplete
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              }, 8, ["value-class"])
                             ]),
                             _: 1
                           })) : createCommentVNode("", true),
@@ -6953,15 +7363,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             default: withCtx(() => [
                               unref(webVitals).paint.firstPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                 key: 0,
-                                label: "First Paint (FP)",
-                                value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstPaint)
-                              }, null, 8, ["value"])) : createCommentVNode("", true),
+                                label: "First Paint (FP)"
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).paint.firstPaint
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              })) : createCommentVNode("", true),
                               unref(webVitals).paint.firstContentfulPaint !== void 0 ? (openBlock(), createBlock(_component_StatTile, {
                                 key: 1,
                                 label: "First Contentful Paint (FCP)",
-                                value: ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).paint.firstContentfulPaint),
                                 "value-class": unref(webVitals).paint.firstContentfulPaint > 3e3 ? "text-red-600" : unref(webVitals).paint.firstContentfulPaint > 1800 ? "text-orange-500" : "text-green-600"
-                              }, null, 8, ["value", "value-class"])) : createCommentVNode("", true)
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).paint.firstContentfulPaint
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              }, 8, ["value-class"])) : createCommentVNode("", true)
                             ]),
                             _: 1
                           })) : createCommentVNode("", true),
@@ -6973,9 +7395,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             default: withCtx(() => [
                               createVNode(_component_StatTile, {
                                 label: "Largest Contentful Paint (LCP)",
-                                value: unref(webVitals).vitals.lcp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.lcp) : "n/a",
                                 "value-class": unref(webVitals).vitals.lcp == null ? "text-gray-400" : unref(webVitals).vitals.lcp > 4e3 ? "text-red-600" : unref(webVitals).vitals.lcp > 2500 ? "text-orange-500" : "text-green-600"
-                              }, null, 8, ["value", "value-class"]),
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).vitals.lcp,
+                                    fallback: "n/a"
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              }, 8, ["value-class"]),
                               createVNode(_component_StatTile, {
                                 label: "Cumulative Layout Shift (CLS)",
                                 value: unref(webVitals).vitals.cls != null ? String(unref(webVitals).vitals.cls) : "n/a",
@@ -6983,9 +7412,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               }, null, 8, ["value", "value-class"]),
                               createVNode(_component_StatTile, {
                                 label: "Interaction to Next Paint (INP)",
-                                value: unref(webVitals).vitals.inp != null ? ("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(unref(webVitals).vitals.inp) : "n/a",
                                 "value-class": unref(webVitals).vitals.inp == null ? "text-gray-400" : unref(webVitals).vitals.inp > 500 ? "text-red-600" : unref(webVitals).vitals.inp > 200 ? "text-orange-500" : "text-green-600"
-                              }, null, 8, ["value", "value-class"])
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(_component_DurationValue, {
+                                    ms: unref(webVitals).vitals.inp,
+                                    fallback: "n/a"
+                                  }, null, 8, ["ms"])
+                                ]),
+                                _: 1
+                              }, 8, ["value-class"])
                             ]),
                             _: 1
                           })) : createCommentVNode("", true),
@@ -7077,6 +7513,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "status-cell": withCtx(({ row }) => [
                               createVNode(_component_UBadge, {
                                 color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.status),
+                                variant: "subtle",
                                 class: "capitalize"
                               }, {
                                 default: withCtx(() => [
@@ -7086,7 +7523,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               }, 1032, ["color"])
                             ]),
                             "duration-cell": withCtx(({ row }) => [
-                              row.original.duration !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.duration)), 1)) : (openBlock(), createBlock("span", {
+                              row.original.duration !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                                key: 0,
+                                ms: row.original.duration
+                              }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                                 key: 1,
                                 class: "text-gray-400"
                               }, "—"))
@@ -7144,4 +7584,4 @@ _sfc_main.setup = (props, ctx) => {
 };
 
 export { _sfc_main as default };
-//# sourceMappingURL=_id_-B2yirIuA.mjs.map
+//# sourceMappingURL=_id_-B78ky13D.mjs.map