@piwitests/server 0.18.2 → 0.19.0

package/.output/server/chunks/build/{_id_-bWcP2xFl.mjs → _id_-BHh65pfg.mjs}

@@ -1,41 +1,44 @@
-import { _ as _sfc_main$1$1, a as _sfc_main$f } 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, r as useRuntimeConfig, l as useHead, j as useToast, n as _sfc_main$7$1, m as _sfc_main$k, p as __nuxt_component_12$1, o as _sfc_main$p, w as __nuxt_component_7, _ as _sfc_main$d$1, q as _sfc_main$8$1, G as _sfc_main$j$1 } from './server.mjs';
-import { _ as _sfc_main$g } from './Tooltip-7vwuDPrZ.mjs';
+import { _ as _sfc_main$1$1, a as _sfc_main$g } from './DashboardNavbar-BHmMSPX7.mjs';
+import { _ as _sfc_main$1$2 } from './Breadcrumb-Ak2Lg3oM.mjs';
+import { _ as __nuxt_component_3$1 } from './BreadcrumbNav-DO7I_z-n.mjs';
+import { u as useRoute, k as useRouter, r as useRuntimeConfig, l as useHead, j as useToast, n as _sfc_main$7$1, m as _sfc_main$k, s as __nuxt_component_12$1, o as _sfc_main$p, y as __nuxt_component_7$1, _ as _sfc_main$d$1, v as _sfc_main$8$1, p as _sfc_main$j$1 } from './server.mjs';
+import { _ as _sfc_main$h } from './Tooltip-BOazooWP.mjs';
 import { _ as __nuxt_component_4 } from './NavbarActions-_YjrSUat.mjs';
-import { _ as __nuxt_component_8, a as __nuxt_component_1$2, c as __nuxt_component_12$2, b as __nuxt_component_13$3, d as __nuxt_component_14$1 } from './CiEnvCard-DXPOhdSG.mjs';
-import { a as useDetailGrid, _ as __nuxt_component_0$1 } from './useAiStatus-ZO987RY7.mjs';
-import { _ as __nuxt_component_13$2 } from './TestStatusBar-CEzt76wk.mjs';
-import { _ as _sfc_main$l } from './Card-BQP_oZkQ.mjs';
-import { _ as __nuxt_component_2$1 } from './HelpHint-YEMWtKu1.mjs';
+import { _ as __nuxt_component_8, a as __nuxt_component_1$2, c as __nuxt_component_13$2, b as __nuxt_component_14$3, d as __nuxt_component_15$1 } from './CiEnvCard-CrjOM17n.mjs';
+import { u as useDetailGrid, _ as __nuxt_component_0$1 } from './useAiStatus-CWvIo32Q.mjs';
+import { _ as __nuxt_component_14$2 } from './TestStatusBar-j6h2Jp6A.mjs';
+import { _ as __nuxt_component_14$1 } from './DurationValue-D20oGbnc.mjs';
+import { _ as _sfc_main$m } from './Card-BQP_oZkQ.mjs';
+import { _ as __nuxt_component_2$2 } from './HelpHint-DrcIv-Oj.mjs';
 import { _ as __nuxt_component_5 } from './MarkerBadge-D7meXy4u.mjs';
-import { _ as __nuxt_component_16$1 } from './EntityLinks-DeOP13Kr.mjs';
-import { a as formatDuration, p as prettyDateFormat, j as getStatusColor, f as formatRelativeTime, d as copyPreview, h as clusterStatusColor, g as clusterErrorTypeColor, q as formatBytes, x as reportIcon, o as getFileApiPath, u as createSortHeader, b as formatStatusLabel } from './index-CULN3-en.mjs';
+import { _ as __nuxt_component_17$1 } from './EntityLinks-D3fp57pR.mjs';
+import { p as prettyDateFormat, v as getStatusColor, f as formatRelativeTime, c as copyPreview, j as clusterStatusColor, i as clusterErrorTypeColor, z as reportIcon, n as fileApiUrl, w as createSortHeader, d as formatDuration, F as getStatusTextClass, E as getStatusIcon, a as formatStatusLabel, D as isStatusInFlight, C as isPiwiAnnotation } from './index-CU2nZhAa.mjs';
+import { cB as formatBytes, bI as DEFAULT_WASTED_WAIT_PATTERNS, dP as isWastedWait } from '../nitro/nitro.mjs';
 import { defineComponent, withAsyncContext, ref, computed, watch, withCtx, isRef, unref, createVNode, createTextVNode, openBlock, createBlock, createCommentVNode, toDisplayString, nextTick, mergeProps, Fragment, renderList, useModel, mergeModels, withDirectives, vModelText, useSSRContext } from 'vue';
 import { ssrRenderComponent, ssrInterpolate, ssrRenderAttrs, ssrRenderClass, ssrRenderList, ssrRenderStyle, ssrRenderAttr, ssrRenderTeleport, ssrIncludeBooleanAttr } from 'vue/server-renderer';
-import { b as buildRetryCommand } from './useOpenInIde-kMZ7Jw5c.mjs';
-import { u as useCopy } from './useCopy-BQQKcwlq.mjs';
+import { b as buildRetryCommand } from './useOpenInIde-4GFf-kdi.mjs';
+import { u as useCopy } from './useCopy-CeKWgHyT.mjs';
 import { _ as __nuxt_component_4$1 } from './FilterToolbar-BwXy8xSk.mjs';
-import { _ as _sfc_main$n } from './Select-ppPz926C.mjs';
-import { _ as _sfc_main$o } from './Checkbox-cVOSIY93.mjs';
-import { _ as __nuxt_component_1$3 } from './OpenInIdeLink-B92wosXu.mjs';
-import { u as useTreeViewCookie } from './useTreeViewCookie-DVYpxW-p.mjs';
+import { _ as _sfc_main$o } from './Select-CUqj50wi.mjs';
+import { _ as _sfc_main$q } from './Checkbox-DvUBGagc.mjs';
+import { _ as __nuxt_component_1$3 } from './OpenInIdeLink-C4MXA8ya.mjs';
+import { _ as __nuxt_component_2$3 } from './TestMetaBadges-D5_yUtIP.mjs';
+import { _ as __nuxt_component_3$3 } from './BrowserBadge-D33lqUcj.mjs';
+import { u as useTreeViewCookie } from './useTreeViewCookie-CQjQdTkH.mjs';
 import { _ as __nuxt_component_5$1 } from './ErrorState-CktYyeEZ.mjs';
 import { _ as __nuxt_component_1$1 } from './LoadingState-C3pBSuOO.mjs';
-import { _ as __nuxt_component_8$1 } from './EmptyState-DV3oT_xz.mjs';
-import { _ as __nuxt_component_11 } from './SectionCard-COd9TuDq.mjs';
+import { _ as __nuxt_component_9$2 } from './EmptyState-Dtlab7S9.mjs';
+import { _ as __nuxt_component_11 } from './SectionCard-CN-v0FZ_.mjs';
 import { _ as __nuxt_component_3$2 } from './TableScroller-DMcdCVrH.mjs';
-import { _ as _sfc_main$h } from './Table-CPhhVzDv.mjs';
-import { _ as _sfc_main$m } from './Modal-CfA78Hm1.mjs';
-import { _ as __nuxt_component_0$2 } from './DiagnosisPanel-DV1xwGu4.mjs';
-import { u as useFetch } from './fetch-8kznMtBM.mjs';
-import { bm as DEFAULT_WASTED_WAIT_PATTERNS, de as isWastedWait } from '../nitro/nitro.mjs';
-import { _ as _sfc_main$i } from './SelectMenu-799c_Ils.mjs';
-import { _ as __nuxt_component_13$1 } from './RunStatusBadge-BhmJ_RKM.mjs';
-import { _ as _sfc_main$j } from './Alert-Bp1Wz_sq.mjs';
+import { _ as _sfc_main$i } from './Table-BRk04Hd2.mjs';
+import { _ as _sfc_main$n } from './Modal-Ck2XLt8d.mjs';
+import { _ as __nuxt_component_0$2 } from './DiagnosisPanel-B646dK4p.mjs';
+import { u as useFetch } from './fetch-B4FwBOzu.mjs';
+import { _ as _sfc_main$j } from './SelectMenu-Db7osY7J.mjs';
+import { _ as __nuxt_component_13$1 } from './RunStatusBadge-FfGb6bkW.mjs';
+import { _ as _sfc_main$l } from './Alert-C4xq8lao.mjs';
 import { u as useRunComparison } from './useRunComparison-CiMBLpe2.mjs';
-import './DashboardSidebarToggle-Ji6ADuqF.mjs';
+import './DashboardSidebarToggle-DCTnHiIv.mjs';
 import 'vue-router';
 import '@iconify/vue';
 import 'tailwindcss/colors';
@@ -56,6 +59,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';
@@ -79,36 +94,26 @@ import 'node:zlib';
 import 'consola';
 import 'node:url';
 import '@iconify/utils';
-import './Tabs-BV9XqjoO.mjs';
-import './RovingFocusItem-CxhHdNGo.mjs';
-import './BrowserBadge-DNCp9pF-.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 './CodeBlock-BGwNmJ8J.mjs';
-import './Textarea-DrrqQUVG.mjs';
-import './help-content-DmFnuhNu.mjs';
+import './Tabs-Bbsg9wag.mjs';
+import './RovingFocusItem-BJSzTBjy.mjs';
+import './CodeBlock-BgE-NSmE.mjs';
+import './Textarea-Dv2-lOvW.mjs';
+import './help-content-C876a9WD.mjs';
 import '../_/marker-categories.mjs';
 import 'date-fns';
-import './useFormControl-BLpq1s4O.mjs';
+import './useFormControl-CZ9So7iX.mjs';
 import './handleAndDispatchCustomEvent-Bk_AVSSo.mjs';
-import './isValueEqualOrExist-DBZjbD_3.mjs';
+import './isValueEqualOrExist-D2qw9YEr.mjs';
 import './useForwardScopeId-D0ameaSU.mjs';
-import './VisuallyHiddenInput-C9eJVpPW.mjs';
-import './Label-DBvbHd3A.mjs';
-import './Separator-CxZdx8kw.mjs';
+import './VisuallyHiddenInput-D6kBJxVd.mjs';
+import './Label-DYDR1Oeh.mjs';
+import './Separator-CR4WcEKD.mjs';
 import '@tanstack/vue-table';
 import '@tanstack/vue-virtual';
 import '@vue/shared';
-import './virtualizer-ZaqK4guJ.mjs';
+import './virtualizer-Cd1hhlxC.mjs';
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "RunSummary",
   __ssrInlineRender: true,
   props: {
@@ -125,6 +130,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const toast = useToast();
+    const config = useRuntimeConfig();
     const storageStats = computed(() => props.testRun?.storageStats);
     const showCiEnv = computed(
       () => !!(props.testRun?.metadata?.ci || props.testRun?.environment || props.testRun?.playwrightVersion || props.testRun?.reporterVersion)
@@ -234,19 +240,20 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       const _component_StatusBlock = __nuxt_component_1$2;
       const _component_UIcon = _sfc_main$p;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_TestStatusBar = __nuxt_component_13$2;
-      const _component_UCard = _sfc_main$l;
-      const _component_HelpHint = __nuxt_component_2$1;
-      const _component_UTooltip = _sfc_main$g;
+      const _component_TestStatusBar = __nuxt_component_14$2;
+      const _component_DurationValue = __nuxt_component_14$1;
+      const _component_UCard = _sfc_main$m;
+      const _component_HelpHint = __nuxt_component_2$2;
+      const _component_UTooltip = _sfc_main$h;
       const _component_NuxtLink = __nuxt_component_12$1;
       const _component_MarkerBadge = __nuxt_component_5;
       const _component_UButton = _sfc_main$k;
       const _component_UPopover = _sfc_main$8$1;
-      const _component_CiEnvCard = __nuxt_component_12$2;
-      const _component_SourceInfoCard = __nuxt_component_13$3;
-      const _component_BlockCard = __nuxt_component_14$1;
+      const _component_CiEnvCard = __nuxt_component_13$2;
+      const _component_SourceInfoCard = __nuxt_component_14$3;
+      const _component_BlockCard = __nuxt_component_15$1;
       const _component_UProgress = _sfc_main$j$1;
-      const _component_EntityLinks = __nuxt_component_16$1;
+      const _component_EntityLinks = __nuxt_component_17$1;
       _push(ssrRenderComponent(_component_FoldableSummary, mergeProps({ "storage-key": "test-run" }, _attrs), {
         folded: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
@@ -257,11 +264,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             }, null, _parent2, _scopeId));
             _push2(`<span class="text-sm font-semibold truncate flex items-center gap-1"${_scopeId}> Run #${ssrInterpolate(__props.testRun?.id)} `);
             if (unref(editingLabel)) {
-              _push2(`<!--[--><input${ssrRenderAttr("value", unref(labelInput))} type="text" placeholder="Add a label..." class="inline-block w-40 text-sm font-normal border-b border-dashed border-gray-400 bg-transparent outline-none focus:border-primary px-0.5 py-0"${_scopeId}>`);
+              _push2(`<!--[--><input${ssrRenderAttr("value", unref(labelInput))} type="text" placeholder="Add a label..." class="inline-block w-40 text-sm font-normal border-b border-dashed border-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0"${_scopeId}>`);
               if (unref(savingLabel)) {
                 _push2(ssrRenderComponent(_component_UIcon, {
                   name: "i-lucide-loader-circle",
-                  class: "size-3.5 text-gray-400 animate-spin shrink-0"
+                  class: "size-3.5 text-zinc-400 animate-spin shrink-0"
                 }, null, _parent2, _scopeId));
               } else {
                 _push2(`<!---->`);
@@ -270,9 +277,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             } else {
               _push2(`<!--[-->`);
               if (__props.testRun?.label) {
-                _push2(`<span class="font-normal text-gray-500 ml-1.5 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400"${_scopeId}>— ${ssrInterpolate(__props.testRun.label)}</span>`);
+                _push2(`<span class="font-normal text-zinc-500 ml-1.5 cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400"${_scopeId}>— ${ssrInterpolate(__props.testRun.label)}</span>`);
               } else {
-                _push2(`<button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400 ml-1" title="Add a label"${_scopeId}> + label </button>`);
+                _push2(`<button class="text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400 ml-1" title="Add a label"${_scopeId}> + label </button>`);
               }
               _push2(`<!--]-->`);
             }
@@ -307,7 +314,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             } else {
               _push2(`<!---->`);
             }
-            _push2(`</div><div class="flex items-center gap-3 shrink-0 max-sm:hidden"${_scopeId}><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> T: <strong class="text-gray-700 dark:text-gray-300"${_scopeId}>${ssrInterpolate(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0)}</strong></span><span class="text-xs text-green-600 dark:text-green-400 tabular-nums whitespace-nowrap"${_scopeId}> P: <strong${_scopeId}>${ssrInterpolate(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0)}</strong></span><span class="text-xs text-red-600 dark:text-red-400 tabular-nums whitespace-nowrap"${_scopeId}> F: <strong${_scopeId}>${ssrInterpolate(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0)}</strong></span><span class="text-xs text-gray-500 tabular-nums whitespace-nowrap"${_scopeId}> S: <strong${_scopeId}>${ssrInterpolate(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0)}</strong></span><span class="text-xs text-amber-600 dark:text-amber-400 tabular-nums whitespace-nowrap" title="Tests that never ran (maxFailures cutoff or a serial-group failure)"${_scopeId}> DNR: <strong${_scopeId}>${ssrInterpolate(__props.testRun?.didNotRunTests ?? 0)}</strong></span><span class="text-xs text-orange-600 dark:text-orange-400 tabular-nums whitespace-nowrap"${_scopeId}> Fl: <strong${_scopeId}>${ssrInterpolate(__props.testRun?.flakyTests ?? 0)}</strong></span>`);
+            _push2(`</div><div class="flex items-center gap-3 shrink-0 max-sm:hidden"${_scopeId}><span class="text-xs text-zinc-500 tabular-nums whitespace-nowrap"${_scopeId}> T: <strong class="text-zinc-700 dark:text-zinc-300"${_scopeId}>${ssrInterpolate(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0)}</strong></span><span class="text-xs text-emerald-600 dark:text-emerald-400 tabular-nums whitespace-nowrap"${_scopeId}> P: <strong${_scopeId}>${ssrInterpolate(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0)}</strong></span><span class="text-xs text-rose-600 dark:text-rose-400 tabular-nums whitespace-nowrap"${_scopeId}> F: <strong${_scopeId}>${ssrInterpolate(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0)}</strong></span><span class="text-xs text-zinc-500 tabular-nums whitespace-nowrap"${_scopeId}> S: <strong${_scopeId}>${ssrInterpolate(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0)}</strong></span><span class="text-xs text-amber-600 dark:text-amber-400 tabular-nums whitespace-nowrap" title="Tests that never ran (maxFailures cutoff or a serial-group failure)"${_scopeId}> DNR: <strong${_scopeId}>${ssrInterpolate(__props.testRun?.didNotRunTests ?? 0)}</strong></span><span class="text-xs text-orange-600 dark:text-orange-400 tabular-nums whitespace-nowrap"${_scopeId}> Fl: <strong${_scopeId}>${ssrInterpolate(__props.testRun?.flakyTests ?? 0)}</strong></span>`);
             _push2(ssrRenderComponent(_component_TestStatusBar, {
               passed: __props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0,
               failed: __props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0,
@@ -316,7 +323,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               "did-not-run": __props.testRun?.didNotRunTests ?? 0,
               total: __props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0
             }, null, _parent2, _scopeId));
-            _push2(`<span class="text-xs text-gray-400 tabular-nums whitespace-nowrap"${_scopeId}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun?.duration))}</span></div></div>`);
+            _push2(ssrRenderComponent(_component_DurationValue, {
+              ms: __props.testRun?.duration,
+              class: "text-xs text-zinc-400"
+            }, null, _parent2, _scopeId));
+            _push2(`</div></div>`);
           } else {
             return [
               createVNode("div", { class: "flex items-center gap-3 flex-1 min-w-0 justify-between" }, [
@@ -334,7 +345,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         "onUpdate:modelValue": ($event) => isRef(labelInput) ? labelInput.value = $event : null,
                         type: "text",
                         placeholder: "Add a label...",
-                        class: "inline-block w-40 text-sm font-normal border-b border-dashed border-gray-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
+                        class: "inline-block w-40 text-sm font-normal border-b border-dashed border-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
                         onKeydown: onLabelKeydown,
                         onBlur: saveLabel
                       }, null, 40, ["onUpdate:modelValue"]), [
@@ -343,16 +354,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       unref(savingLabel) ? (openBlock(), createBlock(_component_UIcon, {
                         key: 0,
                         name: "i-lucide-loader-circle",
-                        class: "size-3.5 text-gray-400 animate-spin shrink-0"
+                        class: "size-3.5 text-zinc-400 animate-spin shrink-0"
                       })) : createCommentVNode("", true)
                     ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
                       __props.testRun?.label ? (openBlock(), createBlock("span", {
                         key: 0,
-                        class: "font-normal text-gray-500 ml-1.5 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400",
+                        class: "font-normal text-zinc-500 ml-1.5 cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400",
                         onClick: startEditLabel
                       }, "— " + toDisplayString(__props.testRun.label), 1)) : (openBlock(), createBlock("button", {
                         key: 1,
-                        class: "text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400 ml-1",
+                        class: "text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400 ml-1",
                         title: "Add a label",
                         onClick: startEditLabel
                       }, " + label "))
@@ -377,19 +388,19 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   }, 8, ["title"])) : createCommentVNode("", true)
                 ]),
                 createVNode("div", { class: "flex items-center gap-3 shrink-0 max-sm:hidden" }, [
-                  createVNode("span", { class: "text-xs text-gray-500 tabular-nums whitespace-nowrap" }, [
+                  createVNode("span", { class: "text-xs text-zinc-500 tabular-nums whitespace-nowrap" }, [
                     createTextVNode(" T: "),
-                    createVNode("strong", { class: "text-gray-700 dark:text-gray-300" }, toDisplayString(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0), 1)
+                    createVNode("strong", { class: "text-zinc-700 dark:text-zinc-300" }, toDisplayString(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0), 1)
                   ]),
-                  createVNode("span", { class: "text-xs text-green-600 dark:text-green-400 tabular-nums whitespace-nowrap" }, [
+                  createVNode("span", { class: "text-xs text-emerald-600 dark:text-emerald-400 tabular-nums whitespace-nowrap" }, [
                     createTextVNode(" P: "),
                     createVNode("strong", null, toDisplayString(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0), 1)
                   ]),
-                  createVNode("span", { class: "text-xs text-red-600 dark:text-red-400 tabular-nums whitespace-nowrap" }, [
+                  createVNode("span", { class: "text-xs text-rose-600 dark:text-rose-400 tabular-nums whitespace-nowrap" }, [
                     createTextVNode(" F: "),
                     createVNode("strong", null, toDisplayString(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0), 1)
                   ]),
-                  createVNode("span", { class: "text-xs text-gray-500 tabular-nums whitespace-nowrap" }, [
+                  createVNode("span", { class: "text-xs text-zinc-500 tabular-nums whitespace-nowrap" }, [
                     createTextVNode(" S: "),
                     createVNode("strong", null, toDisplayString(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0), 1)
                   ]),
@@ -412,7 +423,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     "did-not-run": __props.testRun?.didNotRunTests ?? 0,
                     total: __props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0
                   }, null, 8, ["passed", "failed", "skipped", "flaky", "did-not-run", "total"]),
-                  createVNode("span", { class: "text-xs text-gray-400 tabular-nums whitespace-nowrap" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun?.duration)), 1)
+                  createVNode(_component_DurationValue, {
+                    ms: __props.testRun?.duration,
+                    class: "text-xs text-zinc-400"
+                  }, null, 8, ["ms"])
                 ])
               ])
             ];
@@ -431,11 +445,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   }, null, _parent3, _scopeId2));
                   _push3(`<div class="min-w-0 flex-1"${_scopeId2}><div class="flex items-center gap-2"${_scopeId2}><h2 class="text-base font-bold shrink-0 flex items-center gap-1"${_scopeId2}> Run #${ssrInterpolate(__props.testRun?.id)} `);
                   if (unref(editingLabel)) {
-                    _push3(`<!--[--><input${ssrRenderAttr("value", unref(labelInput))} type="text" placeholder="Add a label..." class="inline-block w-48 text-sm font-normal border-b border-dashed border-gray-400 bg-transparent outline-none focus:border-primary px-0.5 py-0"${_scopeId2}>`);
+                    _push3(`<!--[--><input${ssrRenderAttr("value", unref(labelInput))} type="text" placeholder="Add a label..." class="inline-block w-48 text-sm font-normal border-b border-dashed border-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0"${_scopeId2}>`);
                     if (unref(savingLabel)) {
                       _push3(ssrRenderComponent(_component_UIcon, {
                         name: "i-lucide-loader-circle",
-                        class: "size-3.5 text-gray-400 animate-spin shrink-0"
+                        class: "size-3.5 text-zinc-400 animate-spin shrink-0"
                       }, null, _parent3, _scopeId2));
                     } else {
                       _push3(`<!---->`);
@@ -444,9 +458,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   } else {
                     _push3(`<!--[-->`);
                     if (__props.testRun?.label) {
-                      _push3(`<span class="font-normal text-gray-500 ml-1.5 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400"${_scopeId2}>— ${ssrInterpolate(__props.testRun.label)}</span>`);
+                      _push3(`<span class="font-normal text-zinc-500 ml-1.5 cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400"${_scopeId2}>— ${ssrInterpolate(__props.testRun.label)}</span>`);
                     } else {
-                      _push3(`<button class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400 ml-1.5" title="Add a label"${_scopeId2}> + label </button>`);
+                      _push3(`<button class="text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400 ml-1.5" title="Add a label"${_scopeId2}> + label </button>`);
                     }
                     _push3(`<!--]-->`);
                   }
@@ -534,7 +548,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   } else {
                     _push3(`<!---->`);
                   }
-                  _push3(`<span class="text-xs text-gray-500 ml-auto whitespace-nowrap"${_scopeId2}>${ssrInterpolate(__props.testRun?.project?.label ?? __props.testRun?.project?.name)} · Started ${ssrInterpolate(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime))}</span>`);
+                  _push3(`<span class="text-xs text-zinc-500 ml-auto whitespace-nowrap"${_scopeId2}>${ssrInterpolate(__props.testRun?.project?.label ?? __props.testRun?.project?.name)} · Started ${ssrInterpolate(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime))}</span>`);
                   _push3(ssrRenderComponent(_component_UTooltip, {
                     text: unref(copied) ? "Copied!" : "Copy run summary"
                   }, {
@@ -545,7 +559,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           variant: "ghost",
                           color: "neutral",
                           icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                          class: "shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+                          class: "shrink-0 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
                           onClick: ($event) => unref(copy)(buildRunSummary(), { toast: "Run summary copied" })
                         }, null, _parent4, _scopeId3));
                       } else {
@@ -555,7 +569,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             variant: "ghost",
                             color: "neutral",
                             icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                            class: "shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+                            class: "shrink-0 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
                             onClick: ($event) => unref(copy)(buildRunSummary(), { toast: "Run summary copied" })
                           }, null, 8, ["icon", "onClick"])
                         ];
@@ -567,19 +581,19 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     _push3(ssrRenderComponent(_component_UPopover, null, {
                       content: withCtx((_3, _push4, _parent4, _scopeId3) => {
                         if (_push4) {
-                          _push4(`<div class="p-2 space-y-1 min-w-32"${_scopeId3}><p class="text-xs font-medium text-gray-500 px-2 py-1"${_scopeId3}>Mode</p><!--[-->`);
+                          _push4(`<div class="p-2 space-y-1 min-w-32"${_scopeId3}><p class="text-xs font-medium text-zinc-500 px-2 py-1"${_scopeId3}>Mode</p><!--[-->`);
                           ssrRenderList(["file-line", "grep", "file"], (m) => {
-                            _push4(`<button class="${ssrRenderClass([unref(retryMode) === m ? "bg-primary/10 text-primary" : "", "w-full text-left px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-800"])}"${_scopeId3}>${ssrInterpolate(m === "file-line" ? "File:line" : m === "grep" ? "Title (grep)" : "File only")}</button>`);
+                            _push4(`<button class="${ssrRenderClass([unref(retryMode) === m ? "bg-primary/10 text-primary" : "", "w-full text-left px-2 py-1 text-sm rounded hover:bg-zinc-100 dark:hover:bg-zinc-800"])}"${_scopeId3}>${ssrInterpolate(m === "file-line" ? "File:line" : m === "grep" ? "Title (grep)" : "File only")}</button>`);
                           });
                           _push4(`<!--]--></div>`);
                         } else {
                           return [
                             createVNode("div", { class: "p-2 space-y-1 min-w-32" }, [
-                              createVNode("p", { class: "text-xs font-medium text-gray-500 px-2 py-1" }, "Mode"),
+                              createVNode("p", { class: "text-xs font-medium text-zinc-500 px-2 py-1" }, "Mode"),
                               (openBlock(), createBlock(Fragment, null, renderList(["file-line", "grep", "file"], (m) => {
                                 return createVNode("button", {
                                   key: m,
-                                  class: ["w-full text-left px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-800", unref(retryMode) === m ? "bg-primary/10 text-primary" : ""],
+                                  class: ["w-full text-left px-2 py-1 text-sm rounded hover:bg-zinc-100 dark:hover:bg-zinc-800", unref(retryMode) === m ? "bg-primary/10 text-primary" : ""],
                                   onClick: ($event) => retryMode.value = m
                                 }, toDisplayString(m === "file-line" ? "File:line" : m === "grep" ? "Title (grep)" : "File only"), 11, ["onClick"]);
                               }), 64))
@@ -632,12 +646,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     _push3(`<!---->`);
                   }
                   _push3(`</div></div></div></div><div class="grid grid-cols-3 sm:grid-cols-5 gap-2"${_scopeId2}><button class="${ssrRenderClass([
-                    __props.activeFilter === "all" ? "bg-gray-200 dark:bg-gray-700 ring-2 ring-gray-400 dark:ring-gray-500" : "bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800",
+                    __props.activeFilter === "all" ? "bg-accented ring-2 ring-zinc-400 dark:ring-zinc-500" : "bg-elevated/60 hover:bg-elevated",
                     "rounded-lg p-3 text-left w-full transition-colors cursor-pointer"
-                  ])}"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Total</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0)}</p></button><div class="relative"${_scopeId2}><button class="${ssrRenderClass([
-                    __props.activeFilter === "passed" ? "bg-green-100 dark:bg-green-900/30 ring-2 ring-green-400 dark:ring-green-600" : "bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30",
+                  ])}"${_scopeId2}><p class="text-xs font-medium text-zinc-500 uppercase tracking-wider"${_scopeId2}>Total</p><p class="text-xl font-bold mt-0.5"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0)}</p></button><div class="relative"${_scopeId2}><button class="${ssrRenderClass([
+                    __props.activeFilter === "passed" ? "bg-emerald-100 dark:bg-emerald-900/30 ring-2 ring-emerald-400 dark:ring-emerald-600" : "bg-emerald-50 dark:bg-emerald-900/20 hover:bg-emerald-100 dark:hover:bg-emerald-900/30",
                     "rounded-lg p-3 text-left w-full h-full transition-colors cursor-pointer"
-                  ])}"${_scopeId2}><p class="text-xs font-medium text-green-700 dark:text-green-400 uppercase tracking-wider"${_scopeId2}>Passed</p><p class="text-xl font-bold mt-0.5 text-green-600 dark:text-green-400"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0)}</p></button>`);
+                  ])}"${_scopeId2}><p class="text-xs font-medium text-emerald-700 dark:text-emerald-400 uppercase tracking-wider"${_scopeId2}> Passed </p><p class="text-xl font-bold mt-0.5 text-emerald-600 dark:text-emerald-400"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0)}</p></button>`);
                   if ((__props.testRun?.flakyTests ?? 0) > 0) {
                     _push3(`<button class="${ssrRenderClass([
                       __props.activeFilter === "flaky" ? "bg-orange-200 dark:bg-orange-800/60 text-orange-800 dark:text-orange-200 ring-2 ring-orange-400 dark:ring-orange-600" : "bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-800/60",
@@ -652,12 +666,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     _push3(`<!---->`);
                   }
                   _push3(`</div><button class="${ssrRenderClass([
-                    __props.activeFilter === "failed" ? "bg-red-100 dark:bg-red-900/30 ring-2 ring-red-400 dark:ring-red-600" : "bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30",
+                    __props.activeFilter === "failed" ? "bg-rose-100 dark:bg-rose-900/30 ring-2 ring-rose-400 dark:ring-rose-600" : "bg-rose-50 dark:bg-rose-900/20 hover:bg-rose-100 dark:hover:bg-rose-900/30",
                     "rounded-lg p-3 text-left w-full transition-colors cursor-pointer"
-                  ])}"${_scopeId2}><p class="text-xs font-medium text-red-700 dark:text-red-400 uppercase tracking-wider"${_scopeId2}>Failed</p><p class="text-xl font-bold mt-0.5 text-red-600 dark:text-red-400"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0)}</p></button><button class="${ssrRenderClass([
-                    __props.activeFilter === "skipped" ? "bg-gray-200 dark:bg-gray-700 ring-2 ring-gray-400 dark:ring-gray-500" : "bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800",
+                  ])}"${_scopeId2}><p class="text-xs font-medium text-rose-700 dark:text-rose-400 uppercase tracking-wider"${_scopeId2}>Failed</p><p class="text-xl font-bold mt-0.5 text-rose-600 dark:text-rose-400"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0)}</p></button><button class="${ssrRenderClass([
+                    __props.activeFilter === "skipped" ? "bg-accented ring-2 ring-zinc-400 dark:ring-zinc-500" : "bg-elevated/60 hover:bg-elevated",
                     "rounded-lg p-3 text-left w-full transition-colors cursor-pointer"
-                  ])}"${_scopeId2}><p class="text-xs font-medium text-gray-500 uppercase tracking-wider"${_scopeId2}>Skipped</p><p class="text-xl font-bold mt-0.5 text-gray-600 dark:text-gray-400"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0)}</p></button><button class="${ssrRenderClass([
+                  ])}"${_scopeId2}><p class="text-xs font-medium text-zinc-500 uppercase tracking-wider"${_scopeId2}>Skipped</p><p class="text-xl font-bold mt-0.5 text-zinc-600 dark:text-zinc-400"${_scopeId2}>${ssrInterpolate(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0)}</p></button><button class="${ssrRenderClass([
                     __props.activeFilter === "didnotrun" ? "bg-amber-100 dark:bg-amber-900/30 ring-2 ring-amber-400 dark:ring-amber-600" : "bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/30",
                     "rounded-lg p-3 text-left w-full transition-colors cursor-pointer"
                   ])}" title="Tests that never ran (maxFailures cutoff or a serial-group failure)"${_scopeId2}><p class="text-xs font-medium text-amber-700 dark:text-amber-400 uppercase tracking-wider"${_scopeId2}> Didn&#39;t run </p><p class="text-xl font-bold mt-0.5 text-amber-600 dark:text-amber-400"${_scopeId2}>${ssrInterpolate(__props.testRun?.didNotRunTests ?? 0)}</p></button></div><div${_scopeId2}>`);
@@ -674,16 +688,25 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     _push3(`</div><div class="flex items-center gap-3 text-xs shrink-0"${_scopeId2}><div class="flex items-center gap-1"${_scopeId2}>`);
                     _push3(ssrRenderComponent(_component_UIcon, {
                       name: "i-lucide-clock",
-                      class: "size-3.5 text-gray-400"
+                      class: "size-3.5 text-zinc-400"
+                    }, null, _parent3, _scopeId2));
+                    _push3(ssrRenderComponent(_component_DurationValue, {
+                      ms: __props.testRun?.duration,
+                      class: "font-medium"
                     }, null, _parent3, _scopeId2));
-                    _push3(`<span class="font-medium tabular-nums"${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun?.duration))}</span></div>`);
+                    _push3(`</div>`);
                     if (__props.testRun?.avgTestDuration) {
                       _push3(`<div class="flex items-center gap-1"${_scopeId2}>`);
                       _push3(ssrRenderComponent(_component_UIcon, {
                         name: "i-lucide-gauge",
-                        class: "size-3.5 text-gray-400"
+                        class: "size-3.5 text-zinc-400"
+                      }, null, _parent3, _scopeId2));
+                      _push3(`<span class="text-zinc-500 hidden sm:inline"${_scopeId2}>Avg</span>`);
+                      _push3(ssrRenderComponent(_component_DurationValue, {
+                        ms: __props.testRun.avgTestDuration,
+                        class: "font-medium"
                       }, null, _parent3, _scopeId2));
-                      _push3(`<span class="text-gray-500 hidden sm:inline"${_scopeId2}>Avg</span><span class="font-medium tabular-nums"${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun.avgTestDuration))}</span></div>`);
+                      _push3(`</div>`);
                     } else {
                       _push3(`<!---->`);
                     }
@@ -693,7 +716,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         name: "i-lucide-arrow-up-right",
                         class: "size-3.5 text-orange-500"
                       }, null, _parent3, _scopeId2));
-                      _push3(`<span class="text-gray-500 hidden sm:inline"${_scopeId2}>P90</span><span class="font-medium tabular-nums text-orange-600 dark:text-orange-400"${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun.p90TestDuration))}</span></div>`);
+                      _push3(`<span class="text-zinc-500 hidden sm:inline"${_scopeId2}>P90</span>`);
+                      _push3(ssrRenderComponent(_component_DurationValue, {
+                        ms: __props.testRun.p90TestDuration,
+                        class: "font-medium text-orange-600 dark:text-orange-400",
+                        "unit-class": "opacity-60"
+                      }, null, _parent3, _scopeId2));
+                      _push3(`</div>`);
                     } else {
                       _push3(`<!---->`);
                     }
@@ -703,7 +732,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         name: "i-lucide-clock",
                         class: "size-3.5 text-amber-500"
                       }, null, _parent3, _scopeId2));
-                      _push3(`<span class="text-gray-500 hidden sm:inline"${_scopeId2}>Wasted</span><span class="font-medium tabular-nums text-amber-600 dark:text-amber-400"${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.totalWastedTime))}</span></div>`);
+                      _push3(`<span class="text-zinc-500 hidden sm:inline"${_scopeId2}>Wasted</span>`);
+                      _push3(ssrRenderComponent(_component_DurationValue, {
+                        ms: __props.totalWastedTime,
+                        class: "font-medium text-amber-600 dark:text-amber-400",
+                        "unit-class": "opacity-60"
+                      }, null, _parent3, _scopeId2));
+                      _push3(`</div>`);
                     } else {
                       _push3(`<!---->`);
                     }
@@ -732,7 +767,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                     "onUpdate:modelValue": ($event) => isRef(labelInput) ? labelInput.value = $event : null,
                                     type: "text",
                                     placeholder: "Add a label...",
-                                    class: "inline-block w-48 text-sm font-normal border-b border-dashed border-gray-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
+                                    class: "inline-block w-48 text-sm font-normal border-b border-dashed border-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
                                     onKeydown: onLabelKeydown,
                                     onBlur: saveLabel
                                   }, null, 40, ["onUpdate:modelValue"]), [
@@ -741,16 +776,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                   unref(savingLabel) ? (openBlock(), createBlock(_component_UIcon, {
                                     key: 0,
                                     name: "i-lucide-loader-circle",
-                                    class: "size-3.5 text-gray-400 animate-spin shrink-0"
+                                    class: "size-3.5 text-zinc-400 animate-spin shrink-0"
                                   })) : createCommentVNode("", true)
                                 ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
                                   __props.testRun?.label ? (openBlock(), createBlock("span", {
                                     key: 0,
-                                    class: "font-normal text-gray-500 ml-1.5 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400",
+                                    class: "font-normal text-zinc-500 ml-1.5 cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400",
                                     onClick: startEditLabel
                                   }, "— " + toDisplayString(__props.testRun.label), 1)) : (openBlock(), createBlock("button", {
                                     key: 1,
-                                    class: "text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400 ml-1.5",
+                                    class: "text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400 ml-1.5",
                                     title: "Add a label",
                                     onClick: startEditLabel
                                   }, " + label "))
@@ -795,7 +830,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                 ]),
                                 _: 1
                               }, 8, ["text"])) : createCommentVNode("", true),
-                              createVNode("span", { class: "text-xs text-gray-500 ml-auto whitespace-nowrap" }, toDisplayString(__props.testRun?.project?.label ?? __props.testRun?.project?.name) + " · Started " + toDisplayString(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime)), 1),
+                              createVNode("span", { class: "text-xs text-zinc-500 ml-auto whitespace-nowrap" }, toDisplayString(__props.testRun?.project?.label ?? __props.testRun?.project?.name) + " · Started " + toDisplayString(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime)), 1),
                               createVNode(_component_UTooltip, {
                                 text: unref(copied) ? "Copied!" : "Copy run summary"
                               }, {
@@ -805,7 +840,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                     variant: "ghost",
                                     color: "neutral",
                                     icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                                    class: "shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+                                    class: "shrink-0 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
                                     onClick: ($event) => unref(copy)(buildRunSummary(), { toast: "Run summary copied" })
                                   }, null, 8, ["icon", "onClick"])
                                 ]),
@@ -814,11 +849,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                               unref(failedCases).length > 0 ? (openBlock(), createBlock(_component_UPopover, { key: 2 }, {
                                 content: withCtx(() => [
                                   createVNode("div", { class: "p-2 space-y-1 min-w-32" }, [
-                                    createVNode("p", { class: "text-xs font-medium text-gray-500 px-2 py-1" }, "Mode"),
+                                    createVNode("p", { class: "text-xs font-medium text-zinc-500 px-2 py-1" }, "Mode"),
                                     (openBlock(), createBlock(Fragment, null, renderList(["file-line", "grep", "file"], (m) => {
                                       return createVNode("button", {
                                         key: m,
-                                        class: ["w-full text-left px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-800", unref(retryMode) === m ? "bg-primary/10 text-primary" : ""],
+                                        class: ["w-full text-left px-2 py-1 text-sm rounded hover:bg-zinc-100 dark:hover:bg-zinc-800", unref(retryMode) === m ? "bg-primary/10 text-primary" : ""],
                                         onClick: ($event) => retryMode.value = m
                                       }, toDisplayString(m === "file-line" ? "File:line" : m === "grep" ? "Title (grep)" : "File only"), 11, ["onClick"]);
                                     }), 64))
@@ -849,23 +884,23 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         createVNode("button", {
                           class: [
                             "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                            __props.activeFilter === "all" ? "bg-gray-200 dark:bg-gray-700 ring-2 ring-gray-400 dark:ring-gray-500" : "bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800"
+                            __props.activeFilter === "all" ? "bg-accented ring-2 ring-zinc-400 dark:ring-zinc-500" : "bg-elevated/60 hover:bg-elevated"
                           ],
                           onClick: ($event) => emit("filter-status", "all")
                         }, [
-                          createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Total"),
+                          createVNode("p", { class: "text-xs font-medium text-zinc-500 uppercase tracking-wider" }, "Total"),
                           createVNode("p", { class: "text-xl font-bold mt-0.5" }, toDisplayString(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0), 1)
                         ], 10, ["onClick"]),
                         createVNode("div", { class: "relative" }, [
                           createVNode("button", {
                             class: [
                               "rounded-lg p-3 text-left w-full h-full transition-colors cursor-pointer",
-                              __props.activeFilter === "passed" ? "bg-green-100 dark:bg-green-900/30 ring-2 ring-green-400 dark:ring-green-600" : "bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30"
+                              __props.activeFilter === "passed" ? "bg-emerald-100 dark:bg-emerald-900/30 ring-2 ring-emerald-400 dark:ring-emerald-600" : "bg-emerald-50 dark:bg-emerald-900/20 hover:bg-emerald-100 dark:hover:bg-emerald-900/30"
                             ],
                             onClick: ($event) => emit("filter-status", "passed")
                           }, [
-                            createVNode("p", { class: "text-xs font-medium text-green-700 dark:text-green-400 uppercase tracking-wider" }, "Passed"),
-                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-green-600 dark:text-green-400" }, toDisplayString(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0), 1)
+                            createVNode("p", { class: "text-xs font-medium text-emerald-700 dark:text-emerald-400 uppercase tracking-wider" }, " Passed "),
+                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-emerald-600 dark:text-emerald-400" }, toDisplayString(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0), 1)
                           ], 10, ["onClick"]),
                           (__props.testRun?.flakyTests ?? 0) > 0 ? (openBlock(), createBlock("button", {
                             key: 0,
@@ -886,22 +921,22 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         createVNode("button", {
                           class: [
                             "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                            __props.activeFilter === "failed" ? "bg-red-100 dark:bg-red-900/30 ring-2 ring-red-400 dark:ring-red-600" : "bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30"
+                            __props.activeFilter === "failed" ? "bg-rose-100 dark:bg-rose-900/30 ring-2 ring-rose-400 dark:ring-rose-600" : "bg-rose-50 dark:bg-rose-900/20 hover:bg-rose-100 dark:hover:bg-rose-900/30"
                           ],
                           onClick: ($event) => emit("filter-status", "failed")
                         }, [
-                          createVNode("p", { class: "text-xs font-medium text-red-700 dark:text-red-400 uppercase tracking-wider" }, "Failed"),
-                          createVNode("p", { class: "text-xl font-bold mt-0.5 text-red-600 dark:text-red-400" }, toDisplayString(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0), 1)
+                          createVNode("p", { class: "text-xs font-medium text-rose-700 dark:text-rose-400 uppercase tracking-wider" }, "Failed"),
+                          createVNode("p", { class: "text-xl font-bold mt-0.5 text-rose-600 dark:text-rose-400" }, toDisplayString(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0), 1)
                         ], 10, ["onClick"]),
                         createVNode("button", {
                           class: [
                             "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                            __props.activeFilter === "skipped" ? "bg-gray-200 dark:bg-gray-700 ring-2 ring-gray-400 dark:ring-gray-500" : "bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800"
+                            __props.activeFilter === "skipped" ? "bg-accented ring-2 ring-zinc-400 dark:ring-zinc-500" : "bg-elevated/60 hover:bg-elevated"
                           ],
                           onClick: ($event) => emit("filter-status", "skipped")
                         }, [
-                          createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Skipped"),
-                          createVNode("p", { class: "text-xl font-bold mt-0.5 text-gray-600 dark:text-gray-400" }, toDisplayString(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0), 1)
+                          createVNode("p", { class: "text-xs font-medium text-zinc-500 uppercase tracking-wider" }, "Skipped"),
+                          createVNode("p", { class: "text-xl font-bold mt-0.5 text-zinc-600 dark:text-zinc-400" }, toDisplayString(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0), 1)
                         ], 10, ["onClick"]),
                         createVNode("button", {
                           class: [
@@ -934,9 +969,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             createVNode("div", { class: "flex items-center gap-1" }, [
                               createVNode(_component_UIcon, {
                                 name: "i-lucide-clock",
-                                class: "size-3.5 text-gray-400"
+                                class: "size-3.5 text-zinc-400"
                               }),
-                              createVNode("span", { class: "font-medium tabular-nums" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun?.duration)), 1)
+                              createVNode(_component_DurationValue, {
+                                ms: __props.testRun?.duration,
+                                class: "font-medium"
+                              }, null, 8, ["ms"])
                             ]),
                             __props.testRun?.avgTestDuration ? (openBlock(), createBlock("div", {
                               key: 0,
@@ -944,10 +982,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             }, [
                               createVNode(_component_UIcon, {
                                 name: "i-lucide-gauge",
-                                class: "size-3.5 text-gray-400"
+                                class: "size-3.5 text-zinc-400"
                               }),
-                              createVNode("span", { class: "text-gray-500 hidden sm:inline" }, "Avg"),
-                              createVNode("span", { class: "font-medium tabular-nums" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun.avgTestDuration)), 1)
+                              createVNode("span", { class: "text-zinc-500 hidden sm:inline" }, "Avg"),
+                              createVNode(_component_DurationValue, {
+                                ms: __props.testRun.avgTestDuration,
+                                class: "font-medium"
+                              }, null, 8, ["ms"])
                             ])) : createCommentVNode("", true),
                             __props.testRun?.p90TestDuration ? (openBlock(), createBlock("div", {
                               key: 1,
@@ -957,8 +998,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                 name: "i-lucide-arrow-up-right",
                                 class: "size-3.5 text-orange-500"
                               }),
-                              createVNode("span", { class: "text-gray-500 hidden sm:inline" }, "P90"),
-                              createVNode("span", { class: "font-medium tabular-nums text-orange-600 dark:text-orange-400" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun.p90TestDuration)), 1)
+                              createVNode("span", { class: "text-zinc-500 hidden sm:inline" }, "P90"),
+                              createVNode(_component_DurationValue, {
+                                ms: __props.testRun.p90TestDuration,
+                                class: "font-medium text-orange-600 dark:text-orange-400",
+                                "unit-class": "opacity-60"
+                              }, null, 8, ["ms"])
                             ])) : createCommentVNode("", true),
                             __props.totalWastedTime && __props.totalWastedTime > 0 ? (openBlock(), createBlock("div", {
                               key: 2,
@@ -968,8 +1013,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                 name: "i-lucide-clock",
                                 class: "size-3.5 text-amber-500"
                               }),
-                              createVNode("span", { class: "text-gray-500 hidden sm:inline" }, "Wasted"),
-                              createVNode("span", { class: "font-medium tabular-nums text-amber-600 dark:text-amber-400" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.totalWastedTime)), 1)
+                              createVNode("span", { class: "text-zinc-500 hidden sm:inline" }, "Wasted"),
+                              createVNode(_component_DurationValue, {
+                                ms: __props.totalWastedTime,
+                                class: "font-medium text-amber-600 dark:text-amber-400",
+                                "unit-class": "opacity-60"
+                              }, null, 8, ["ms"])
                             ])) : createCommentVNode("", true)
                           ])
                         ])) : createCommentVNode("", true)
@@ -1016,7 +1065,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         name: "i-lucide-upload",
                         class: "size-5 text-info shrink-0 animate-pulse"
                       }, null, _parent3, _scopeId2));
-                      _push3(`<div class="flex-1 min-w-0"${_scopeId2}><div class="flex items-center justify-between mb-1"${_scopeId2}><span class="text-sm font-medium"${_scopeId2}>Finalizing test run</span><span class="text-xs text-gray-500"${_scopeId2}>Uploading reports &amp; traces…</span></div>`);
+                      _push3(`<div class="flex-1 min-w-0"${_scopeId2}><div class="flex items-center justify-between mb-1"${_scopeId2}><span class="text-sm font-medium"${_scopeId2}>Finalizing test run</span><span class="text-xs text-zinc-500"${_scopeId2}>Uploading reports &amp; traces…</span></div>`);
                       _push3(ssrRenderComponent(_component_UProgress, {
                         value: null,
                         size: "sm",
@@ -1032,7 +1081,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       ssrRenderList(__props.allReports, (report) => {
                         _push3(`<div class="flex items-center justify-between gap-2 min-w-0"${_scopeId2}>`);
                         _push3(ssrRenderComponent(_component_UButton, {
-                          href: `/api/files/${("getFileApiPath" in _ctx ? _ctx.getFileApiPath : unref(getFileApiPath))(report.path)}`,
+                          href: ("fileApiUrl" in _ctx ? _ctx.fileApiUrl : unref(fileApiUrl))(report.path, null, unref(config).app?.baseURL),
                           icon: ("reportIcon" in _ctx ? _ctx.reportIcon : unref(reportIcon))(report.type),
                           target: "_blank",
                           size: "xs",
@@ -1051,11 +1100,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           }),
                           _: 2
                         }, _parent3, _scopeId2));
-                        _push3(`<span class="text-xs tabular-nums text-gray-400 dark:text-gray-500 shrink-0"${_scopeId2}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size))}</span></div>`);
+                        _push3(`<span class="text-xs tabular-nums text-zinc-400 dark:text-zinc-500 shrink-0"${_scopeId2}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size))}</span></div>`);
                       });
                       _push3(`<!--]-->`);
                       if (unref(storageStats).testCaseFilesCount > 0) {
-                        _push3(`<div class="flex items-center justify-between gap-2 min-w-0"${_scopeId2}><span class="truncate"${_scopeId2}>Test files (${ssrInterpolate(unref(storageStats).testCaseFilesCount)})</span><span class="text-xs tabular-nums text-gray-400 dark:text-gray-500 shrink-0"${_scopeId2}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize))}</span></div>`);
+                        _push3(`<div class="flex items-center justify-between gap-2 min-w-0"${_scopeId2}><span class="truncate"${_scopeId2}>Test files (${ssrInterpolate(unref(storageStats).testCaseFilesCount)})</span><span class="text-xs tabular-nums text-zinc-400 dark:text-zinc-500 shrink-0"${_scopeId2}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize))}</span></div>`);
                       } else {
                         _push3(`<!---->`);
                       }
@@ -1076,7 +1125,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         createVNode("div", { class: "flex-1 min-w-0" }, [
                           createVNode("div", { class: "flex items-center justify-between mb-1" }, [
                             createVNode("span", { class: "text-sm font-medium" }, "Finalizing test run"),
-                            createVNode("span", { class: "text-xs text-gray-500" }, "Uploading reports & traces…")
+                            createVNode("span", { class: "text-xs text-zinc-500" }, "Uploading reports & traces…")
                           ]),
                           createVNode(_component_UProgress, {
                             value: null,
@@ -1096,7 +1145,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             class: "flex items-center justify-between gap-2 min-w-0"
                           }, [
                             createVNode(_component_UButton, {
-                              href: `/api/files/${("getFileApiPath" in _ctx ? _ctx.getFileApiPath : unref(getFileApiPath))(report.path)}`,
+                              href: ("fileApiUrl" in _ctx ? _ctx.fileApiUrl : unref(fileApiUrl))(report.path, null, unref(config).app?.baseURL),
                               icon: ("reportIcon" in _ctx ? _ctx.reportIcon : unref(reportIcon))(report.type),
                               target: "_blank",
                               size: "xs",
@@ -1109,7 +1158,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                               ]),
                               _: 2
                             }, 1032, ["href", "icon"]),
-                            createVNode("span", { class: "text-xs tabular-nums text-gray-400 dark:text-gray-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size)), 1)
+                            createVNode("span", { class: "text-xs tabular-nums text-zinc-400 dark:text-zinc-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size)), 1)
                           ]);
                         }), 128)),
                         unref(storageStats).testCaseFilesCount > 0 ? (openBlock(), createBlock("div", {
@@ -1117,7 +1166,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           class: "flex items-center justify-between gap-2 min-w-0"
                         }, [
                           createVNode("span", { class: "truncate" }, "Test files (" + toDisplayString(unref(storageStats).testCaseFilesCount) + ")", 1),
-                          createVNode("span", { class: "text-xs tabular-nums text-gray-400 dark:text-gray-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize)), 1)
+                          createVNode("span", { class: "text-xs tabular-nums text-zinc-400 dark:text-zinc-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize)), 1)
                         ])) : createCommentVNode("", true)
                       ])) : createCommentVNode("", true)
                     ];
@@ -1167,7 +1216,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       _push3(`<p class="flex items-center gap-1"${_scopeId2}>`);
                       _push3(ssrRenderComponent(_component_UIcon, {
                         name: "i-lucide-link",
-                        class: "w-3.5 h-3.5 text-gray-400 shrink-0"
+                        class: "w-3.5 h-3.5 text-zinc-400 shrink-0"
                       }, null, _parent3, _scopeId2));
                       _push3(`<span${_scopeId2}>${ssrInterpolate(__props.testRun.metadata.relatedIssue)}</span></p>`);
                     } else {
@@ -1202,7 +1251,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       _push3(`<!---->`);
                     }
                     if (__props.showCustomData && __props.testRun.metadata.customData) {
-                      _push3(`<div${_scopeId2}><div class="bg-gray-50 dark:bg-gray-900 p-2.5 rounded text-xs font-mono overflow-x-auto max-h-48 overflow-y-auto"${_scopeId2}><pre class="m-0"${_scopeId2}>${ssrInterpolate(JSON.stringify(__props.testRun.metadata.customData, null, 2))}</pre></div></div>`);
+                      _push3(`<div${_scopeId2}><div class="bg-zinc-50 dark:bg-zinc-900 p-2.5 rounded text-xs font-mono overflow-x-auto max-h-48 overflow-y-auto"${_scopeId2}><pre class="m-0"${_scopeId2}>${ssrInterpolate(JSON.stringify(__props.testRun.metadata.customData, null, 2))}</pre></div></div>`);
                     } else {
                       _push3(`<!---->`);
                     }
@@ -1233,7 +1282,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         }, [
                           createVNode(_component_UIcon, {
                             name: "i-lucide-link",
-                            class: "w-3.5 h-3.5 text-gray-400 shrink-0"
+                            class: "w-3.5 h-3.5 text-zinc-400 shrink-0"
                           }),
                           createVNode("span", null, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
                         ])) : createCommentVNode("", true),
@@ -1257,7 +1306,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           _: 1
                         }, 8, ["icon", "onClick"])) : createCommentVNode("", true),
                         __props.showCustomData && __props.testRun.metadata.customData ? (openBlock(), createBlock("div", { key: 3 }, [
-                          createVNode("div", { class: "bg-gray-50 dark:bg-gray-900 p-2.5 rounded text-xs font-mono overflow-x-auto max-h-48 overflow-y-auto" }, [
+                          createVNode("div", { class: "bg-zinc-50 dark:bg-zinc-900 p-2.5 rounded text-xs font-mono overflow-x-auto max-h-48 overflow-y-auto" }, [
                             createVNode("pre", { class: "m-0" }, toDisplayString(JSON.stringify(__props.testRun.metadata.customData, null, 2)), 1)
                           ])
                         ])) : createCommentVNode("", true)
@@ -1295,7 +1344,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                       "onUpdate:modelValue": ($event) => isRef(labelInput) ? labelInput.value = $event : null,
                                       type: "text",
                                       placeholder: "Add a label...",
-                                      class: "inline-block w-48 text-sm font-normal border-b border-dashed border-gray-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
+                                      class: "inline-block w-48 text-sm font-normal border-b border-dashed border-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
                                       onKeydown: onLabelKeydown,
                                       onBlur: saveLabel
                                     }, null, 40, ["onUpdate:modelValue"]), [
@@ -1304,16 +1353,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                     unref(savingLabel) ? (openBlock(), createBlock(_component_UIcon, {
                                       key: 0,
                                       name: "i-lucide-loader-circle",
-                                      class: "size-3.5 text-gray-400 animate-spin shrink-0"
+                                      class: "size-3.5 text-zinc-400 animate-spin shrink-0"
                                     })) : createCommentVNode("", true)
                                   ], 64)) : (openBlock(), createBlock(Fragment, { key: 1 }, [
                                     __props.testRun?.label ? (openBlock(), createBlock("span", {
                                       key: 0,
-                                      class: "font-normal text-gray-500 ml-1.5 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400",
+                                      class: "font-normal text-zinc-500 ml-1.5 cursor-pointer hover:text-zinc-700 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400",
                                       onClick: startEditLabel
                                     }, "— " + toDisplayString(__props.testRun.label), 1)) : (openBlock(), createBlock("button", {
                                       key: 1,
-                                      class: "text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b border-dashed border-transparent hover:border-gray-400 ml-1.5",
+                                      class: "text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 border-b border-dashed border-transparent hover:border-zinc-400 ml-1.5",
                                       title: "Add a label",
                                       onClick: startEditLabel
                                     }, " + label "))
@@ -1358,7 +1407,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                   ]),
                                   _: 1
                                 }, 8, ["text"])) : createCommentVNode("", true),
-                                createVNode("span", { class: "text-xs text-gray-500 ml-auto whitespace-nowrap" }, toDisplayString(__props.testRun?.project?.label ?? __props.testRun?.project?.name) + " · Started " + toDisplayString(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime)), 1),
+                                createVNode("span", { class: "text-xs text-zinc-500 ml-auto whitespace-nowrap" }, toDisplayString(__props.testRun?.project?.label ?? __props.testRun?.project?.name) + " · Started " + toDisplayString(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime)), 1),
                                 createVNode(_component_UTooltip, {
                                   text: unref(copied) ? "Copied!" : "Copy run summary"
                                 }, {
@@ -1368,7 +1417,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                       variant: "ghost",
                                       color: "neutral",
                                       icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                                      class: "shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+                                      class: "shrink-0 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
                                       onClick: ($event) => unref(copy)(buildRunSummary(), { toast: "Run summary copied" })
                                     }, null, 8, ["icon", "onClick"])
                                   ]),
@@ -1377,11 +1426,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                 unref(failedCases).length > 0 ? (openBlock(), createBlock(_component_UPopover, { key: 2 }, {
                                   content: withCtx(() => [
                                     createVNode("div", { class: "p-2 space-y-1 min-w-32" }, [
-                                      createVNode("p", { class: "text-xs font-medium text-gray-500 px-2 py-1" }, "Mode"),
+                                      createVNode("p", { class: "text-xs font-medium text-zinc-500 px-2 py-1" }, "Mode"),
                                       (openBlock(), createBlock(Fragment, null, renderList(["file-line", "grep", "file"], (m) => {
                                         return createVNode("button", {
                                           key: m,
-                                          class: ["w-full text-left px-2 py-1 text-sm rounded hover:bg-gray-100 dark:hover:bg-gray-800", unref(retryMode) === m ? "bg-primary/10 text-primary" : ""],
+                                          class: ["w-full text-left px-2 py-1 text-sm rounded hover:bg-zinc-100 dark:hover:bg-zinc-800", unref(retryMode) === m ? "bg-primary/10 text-primary" : ""],
                                           onClick: ($event) => retryMode.value = m
                                         }, toDisplayString(m === "file-line" ? "File:line" : m === "grep" ? "Title (grep)" : "File only"), 11, ["onClick"]);
                                       }), 64))
@@ -1412,23 +1461,23 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           createVNode("button", {
                             class: [
                               "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                              __props.activeFilter === "all" ? "bg-gray-200 dark:bg-gray-700 ring-2 ring-gray-400 dark:ring-gray-500" : "bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800"
+                              __props.activeFilter === "all" ? "bg-accented ring-2 ring-zinc-400 dark:ring-zinc-500" : "bg-elevated/60 hover:bg-elevated"
                             ],
                             onClick: ($event) => emit("filter-status", "all")
                           }, [
-                            createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Total"),
+                            createVNode("p", { class: "text-xs font-medium text-zinc-500 uppercase tracking-wider" }, "Total"),
                             createVNode("p", { class: "text-xl font-bold mt-0.5" }, toDisplayString(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0), 1)
                           ], 10, ["onClick"]),
                           createVNode("div", { class: "relative" }, [
                             createVNode("button", {
                               class: [
                                 "rounded-lg p-3 text-left w-full h-full transition-colors cursor-pointer",
-                                __props.activeFilter === "passed" ? "bg-green-100 dark:bg-green-900/30 ring-2 ring-green-400 dark:ring-green-600" : "bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/30"
+                                __props.activeFilter === "passed" ? "bg-emerald-100 dark:bg-emerald-900/30 ring-2 ring-emerald-400 dark:ring-emerald-600" : "bg-emerald-50 dark:bg-emerald-900/20 hover:bg-emerald-100 dark:hover:bg-emerald-900/30"
                               ],
                               onClick: ($event) => emit("filter-status", "passed")
                             }, [
-                              createVNode("p", { class: "text-xs font-medium text-green-700 dark:text-green-400 uppercase tracking-wider" }, "Passed"),
-                              createVNode("p", { class: "text-xl font-bold mt-0.5 text-green-600 dark:text-green-400" }, toDisplayString(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0), 1)
+                              createVNode("p", { class: "text-xs font-medium text-emerald-700 dark:text-emerald-400 uppercase tracking-wider" }, " Passed "),
+                              createVNode("p", { class: "text-xl font-bold mt-0.5 text-emerald-600 dark:text-emerald-400" }, toDisplayString(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0), 1)
                             ], 10, ["onClick"]),
                             (__props.testRun?.flakyTests ?? 0) > 0 ? (openBlock(), createBlock("button", {
                               key: 0,
@@ -1449,22 +1498,22 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           createVNode("button", {
                             class: [
                               "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                              __props.activeFilter === "failed" ? "bg-red-100 dark:bg-red-900/30 ring-2 ring-red-400 dark:ring-red-600" : "bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30"
+                              __props.activeFilter === "failed" ? "bg-rose-100 dark:bg-rose-900/30 ring-2 ring-rose-400 dark:ring-rose-600" : "bg-rose-50 dark:bg-rose-900/20 hover:bg-rose-100 dark:hover:bg-rose-900/30"
                             ],
                             onClick: ($event) => emit("filter-status", "failed")
                           }, [
-                            createVNode("p", { class: "text-xs font-medium text-red-700 dark:text-red-400 uppercase tracking-wider" }, "Failed"),
-                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-red-600 dark:text-red-400" }, toDisplayString(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0), 1)
+                            createVNode("p", { class: "text-xs font-medium text-rose-700 dark:text-rose-400 uppercase tracking-wider" }, "Failed"),
+                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-rose-600 dark:text-rose-400" }, toDisplayString(__props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0), 1)
                           ], 10, ["onClick"]),
                           createVNode("button", {
                             class: [
                               "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                              __props.activeFilter === "skipped" ? "bg-gray-200 dark:bg-gray-700 ring-2 ring-gray-400 dark:ring-gray-500" : "bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800"
+                              __props.activeFilter === "skipped" ? "bg-accented ring-2 ring-zinc-400 dark:ring-zinc-500" : "bg-elevated/60 hover:bg-elevated"
                             ],
                             onClick: ($event) => emit("filter-status", "skipped")
                           }, [
-                            createVNode("p", { class: "text-xs font-medium text-gray-500 uppercase tracking-wider" }, "Skipped"),
-                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-gray-600 dark:text-gray-400" }, toDisplayString(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0), 1)
+                            createVNode("p", { class: "text-xs font-medium text-zinc-500 uppercase tracking-wider" }, "Skipped"),
+                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-zinc-600 dark:text-zinc-400" }, toDisplayString(__props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0), 1)
                           ], 10, ["onClick"]),
                           createVNode("button", {
                             class: [
@@ -1497,9 +1546,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                               createVNode("div", { class: "flex items-center gap-1" }, [
                                 createVNode(_component_UIcon, {
                                   name: "i-lucide-clock",
-                                  class: "size-3.5 text-gray-400"
+                                  class: "size-3.5 text-zinc-400"
                                 }),
-                                createVNode("span", { class: "font-medium tabular-nums" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun?.duration)), 1)
+                                createVNode(_component_DurationValue, {
+                                  ms: __props.testRun?.duration,
+                                  class: "font-medium"
+                                }, null, 8, ["ms"])
                               ]),
                               __props.testRun?.avgTestDuration ? (openBlock(), createBlock("div", {
                                 key: 0,
@@ -1507,10 +1559,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                               }, [
                                 createVNode(_component_UIcon, {
                                   name: "i-lucide-gauge",
-                                  class: "size-3.5 text-gray-400"
+                                  class: "size-3.5 text-zinc-400"
                                 }),
-                                createVNode("span", { class: "text-gray-500 hidden sm:inline" }, "Avg"),
-                                createVNode("span", { class: "font-medium tabular-nums" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun.avgTestDuration)), 1)
+                                createVNode("span", { class: "text-zinc-500 hidden sm:inline" }, "Avg"),
+                                createVNode(_component_DurationValue, {
+                                  ms: __props.testRun.avgTestDuration,
+                                  class: "font-medium"
+                                }, null, 8, ["ms"])
                               ])) : createCommentVNode("", true),
                               __props.testRun?.p90TestDuration ? (openBlock(), createBlock("div", {
                                 key: 1,
@@ -1520,8 +1575,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                   name: "i-lucide-arrow-up-right",
                                   class: "size-3.5 text-orange-500"
                                 }),
-                                createVNode("span", { class: "text-gray-500 hidden sm:inline" }, "P90"),
-                                createVNode("span", { class: "font-medium tabular-nums text-orange-600 dark:text-orange-400" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.testRun.p90TestDuration)), 1)
+                                createVNode("span", { class: "text-zinc-500 hidden sm:inline" }, "P90"),
+                                createVNode(_component_DurationValue, {
+                                  ms: __props.testRun.p90TestDuration,
+                                  class: "font-medium text-orange-600 dark:text-orange-400",
+                                  "unit-class": "opacity-60"
+                                }, null, 8, ["ms"])
                               ])) : createCommentVNode("", true),
                               __props.totalWastedTime && __props.totalWastedTime > 0 ? (openBlock(), createBlock("div", {
                                 key: 2,
@@ -1531,8 +1590,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                                   name: "i-lucide-clock",
                                   class: "size-3.5 text-amber-500"
                                 }),
-                                createVNode("span", { class: "text-gray-500 hidden sm:inline" }, "Wasted"),
-                                createVNode("span", { class: "font-medium tabular-nums text-amber-600 dark:text-amber-400" }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(__props.totalWastedTime)), 1)
+                                createVNode("span", { class: "text-zinc-500 hidden sm:inline" }, "Wasted"),
+                                createVNode(_component_DurationValue, {
+                                  ms: __props.totalWastedTime,
+                                  class: "font-medium text-amber-600 dark:text-amber-400",
+                                  "unit-class": "opacity-60"
+                                }, null, 8, ["ms"])
                               ])) : createCommentVNode("", true)
                             ])
                           ])) : createCommentVNode("", true)
@@ -1575,7 +1638,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       createVNode("div", { class: "flex-1 min-w-0" }, [
                         createVNode("div", { class: "flex items-center justify-between mb-1" }, [
                           createVNode("span", { class: "text-sm font-medium" }, "Finalizing test run"),
-                          createVNode("span", { class: "text-xs text-gray-500" }, "Uploading reports & traces…")
+                          createVNode("span", { class: "text-xs text-zinc-500" }, "Uploading reports & traces…")
                         ]),
                         createVNode(_component_UProgress, {
                           value: null,
@@ -1595,7 +1658,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                           class: "flex items-center justify-between gap-2 min-w-0"
                         }, [
                           createVNode(_component_UButton, {
-                            href: `/api/files/${("getFileApiPath" in _ctx ? _ctx.getFileApiPath : unref(getFileApiPath))(report.path)}`,
+                            href: ("fileApiUrl" in _ctx ? _ctx.fileApiUrl : unref(fileApiUrl))(report.path, null, unref(config).app?.baseURL),
                             icon: ("reportIcon" in _ctx ? _ctx.reportIcon : unref(reportIcon))(report.type),
                             target: "_blank",
                             size: "xs",
@@ -1608,7 +1671,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                             ]),
                             _: 2
                           }, 1032, ["href", "icon"]),
-                          createVNode("span", { class: "text-xs tabular-nums text-gray-400 dark:text-gray-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size)), 1)
+                          createVNode("span", { class: "text-xs tabular-nums text-zinc-400 dark:text-zinc-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size)), 1)
                         ]);
                       }), 128)),
                       unref(storageStats).testCaseFilesCount > 0 ? (openBlock(), createBlock("div", {
@@ -1616,7 +1679,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         class: "flex items-center justify-between gap-2 min-w-0"
                       }, [
                         createVNode("span", { class: "truncate" }, "Test files (" + toDisplayString(unref(storageStats).testCaseFilesCount) + ")", 1),
-                        createVNode("span", { class: "text-xs tabular-nums text-gray-400 dark:text-gray-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize)), 1)
+                        createVNode("span", { class: "text-xs tabular-nums text-zinc-400 dark:text-zinc-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize)), 1)
                       ])) : createCommentVNode("", true)
                     ])) : createCommentVNode("", true)
                   ]),
@@ -1654,7 +1717,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       }, [
                         createVNode(_component_UIcon, {
                           name: "i-lucide-link",
-                          class: "w-3.5 h-3.5 text-gray-400 shrink-0"
+                          class: "w-3.5 h-3.5 text-zinc-400 shrink-0"
                         }),
                         createVNode("span", null, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
                       ])) : createCommentVNode("", true),
@@ -1678,7 +1741,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                         _: 1
                       }, 8, ["icon", "onClick"])) : createCommentVNode("", true),
                       __props.showCustomData && __props.testRun.metadata.customData ? (openBlock(), createBlock("div", { key: 3 }, [
-                        createVNode("div", { class: "bg-gray-50 dark:bg-gray-900 p-2.5 rounded text-xs font-mono overflow-x-auto max-h-48 overflow-y-auto" }, [
+                        createVNode("div", { class: "bg-zinc-50 dark:bg-zinc-900 p-2.5 rounded text-xs font-mono overflow-x-auto max-h-48 overflow-y-auto" }, [
                           createVNode("pre", { class: "m-0" }, toDisplayString(JSON.stringify(__props.testRun.metadata.customData, null, 2)), 1)
                         ])
                       ])) : createCommentVNode("", true)
@@ -1695,36 +1758,27 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$e = _sfc_main$e.setup;
-_sfc_main$e.setup = (props, ctx) => {
+const _sfc_setup$f = _sfc_main$f.setup;
+_sfc_main$f.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/run/RunSummary.vue");
-  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
+  return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
 };
-const __nuxt_component_9$1 = Object.assign(_sfc_main$e, { __name: "RunSummary" });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "TestCasesTree",
+const __nuxt_component_9$1 = Object.assign(_sfc_main$f, { __name: "RunSummary" });
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "TestRowBadges",
   __ssrInlineRender: true,
   props: {
-    testCases: {},
-    suites: {},
-    hasFilter: { type: Boolean },
-    highlightedCaseId: {},
-    projectKey: {},
-    projectName: {}
+    mode: { default: null },
+    isNewRegression: { type: [Boolean, null], default: false },
+    isNewFlaky: { type: [Boolean, null], default: false },
+    annotations: { default: null },
+    tags: { default: null },
+    meta: { default: null },
+    maxTags: { default: 0 }
   },
   setup(__props) {
     const props = __props;
-    const suiteLookup = computed(() => {
-      const map = /* @__PURE__ */ new Map();
-      for (const s of props.suites) {
-        map.set(`${s.filePath}${s.suitePath.join("")}`, s);
-      }
-      return map;
-    });
-    function normalizeStatus(s) {
-      return s === "timedOut" || s === "timedout" ? "failed" : s;
-    }
     function annotationColor(type) {
       if (type === "fixme" || type === "slow") return "warning";
       if (type === "fail") return "error";
@@ -1751,6 +1805,193 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     function annotationLabel(ann) {
       return ann.type === "tag" ? ann.description ?? ann.type : ann.type;
     }
+    const marks = computed(() => (props.annotations ?? []).filter((ann) => !isPiwiAnnotation(ann.type)));
+    const hasMeta = computed(
+      () => Boolean(
+        (props.tags?.length ?? 0) > 0 || props.meta?.owner || props.meta?.priority || props.meta?.feature || props.meta?.link
+      )
+    );
+    const hasAnything = computed(
+      () => props.mode === "parallel" || props.mode === "serial" || Boolean(props.isNewRegression) || Boolean(props.isNewFlaky) || marks.value.length > 0 || hasMeta.value
+    );
+    return (_ctx, _push, _parent, _attrs) => {
+      const _component_UBadge = _sfc_main$7$1;
+      const _component_UIcon = _sfc_main$p;
+      const _component_TestMetaBadges = __nuxt_component_2$3;
+      if (unref(hasAnything)) {
+        _push(`<div${ssrRenderAttrs(mergeProps({ class: "inline-flex items-center gap-1 flex-wrap" }, _attrs))}>`);
+        if (__props.mode === "parallel") {
+          _push(ssrRenderComponent(_component_UBadge, {
+            color: "success",
+            variant: "soft",
+            size: "xs",
+            class: "shrink-0"
+          }, {
+            default: withCtx((_, _push2, _parent2, _scopeId) => {
+              if (_push2) {
+                _push2(`parallel`);
+              } else {
+                return [
+                  createTextVNode("parallel")
+                ];
+              }
+            }),
+            _: 1
+          }, _parent));
+        } else {
+          _push(`<!---->`);
+        }
+        if (__props.mode === "serial") {
+          _push(ssrRenderComponent(_component_UBadge, {
+            color: "warning",
+            variant: "soft",
+            size: "xs",
+            class: "shrink-0"
+          }, {
+            default: withCtx((_, _push2, _parent2, _scopeId) => {
+              if (_push2) {
+                _push2(`serial`);
+              } else {
+                return [
+                  createTextVNode("serial")
+                ];
+              }
+            }),
+            _: 1
+          }, _parent));
+        } else {
+          _push(`<!---->`);
+        }
+        if (__props.isNewRegression) {
+          _push(ssrRenderComponent(_component_UBadge, {
+            color: "error",
+            variant: "solid",
+            size: "xs",
+            class: "uppercase tracking-wider shrink-0",
+            title: "First run in which this test failed"
+          }, {
+            default: withCtx((_, _push2, _parent2, _scopeId) => {
+              if (_push2) {
+                _push2(` NEW `);
+              } else {
+                return [
+                  createTextVNode(" NEW ")
+                ];
+              }
+            }),
+            _: 1
+          }, _parent));
+        } else {
+          _push(`<!---->`);
+        }
+        if (__props.isNewFlaky) {
+          _push(ssrRenderComponent(_component_UBadge, {
+            color: "info",
+            variant: "solid",
+            size: "xs",
+            class: "uppercase tracking-wider shrink-0",
+            title: "First run in which this test was flaky"
+          }, {
+            default: withCtx((_, _push2, _parent2, _scopeId) => {
+              if (_push2) {
+                _push2(` FLAKY `);
+              } else {
+                return [
+                  createTextVNode(" FLAKY ")
+                ];
+              }
+            }),
+            _: 1
+          }, _parent));
+        } else {
+          _push(`<!---->`);
+        }
+        _push(`<!--[-->`);
+        ssrRenderList(unref(marks), (ann) => {
+          _push(ssrRenderComponent(_component_UBadge, {
+            key: `${ann.type}:${ann.description ?? ""}`,
+            color: annotationColor(ann.type),
+            variant: "soft",
+            size: "xs",
+            title: ann.type !== "tag" ? ann.description ?? void 0 : void 0,
+            class: "shrink-0 gap-1"
+          }, {
+            default: withCtx((_, _push2, _parent2, _scopeId) => {
+              if (_push2) {
+                if (annotationIcon(ann.type)) {
+                  _push2(ssrRenderComponent(_component_UIcon, {
+                    name: annotationIcon(ann.type),
+                    class: "size-2.5 shrink-0"
+                  }, null, _parent2, _scopeId));
+                } else {
+                  _push2(`<!---->`);
+                }
+                _push2(` ${ssrInterpolate(annotationLabel(ann))}`);
+              } else {
+                return [
+                  annotationIcon(ann.type) ? (openBlock(), createBlock(_component_UIcon, {
+                    key: 0,
+                    name: annotationIcon(ann.type),
+                    class: "size-2.5 shrink-0"
+                  }, null, 8, ["name"])) : createCommentVNode("", true),
+                  createTextVNode(" " + toDisplayString(annotationLabel(ann)), 1)
+                ];
+              }
+            }),
+            _: 2
+          }, _parent));
+        });
+        _push(`<!--]-->`);
+        _push(ssrRenderComponent(_component_TestMetaBadges, {
+          tags: __props.tags,
+          meta: __props.meta,
+          "max-tags": __props.maxTags
+        }, null, _parent));
+        _push(`</div>`);
+      } else {
+        _push(`<!---->`);
+      }
+    };
+  }
+});
+const _sfc_setup$e = _sfc_main$e.setup;
+_sfc_main$e.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/TestRowBadges.vue");
+  return _sfc_setup$e ? _sfc_setup$e(props, ctx) : void 0;
+};
+const __nuxt_component_2$1 = Object.assign(_sfc_main$e, { __name: "TestRowBadges" });
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "TestCasesTree",
+  __ssrInlineRender: true,
+  props: {
+    testCases: {},
+    suites: {},
+    hasFilter: { type: Boolean },
+    highlightedCaseId: {},
+    projectKey: {},
+    projectName: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const suiteLookup = computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const s of props.suites) {
+        map.set(`${s.filePath}${s.suitePath.join("")}`, s);
+      }
+      return map;
+    });
+    function normalizeStatus(s) {
+      return s === "timedOut" || s === "timedout" ? "failed" : s;
+    }
+    const GROUP_STAT_KEYS = ["failed", "passed", "skipped", "didnotrun", "running"];
+    function visibleStats(stats) {
+      return GROUP_STAT_KEYS.filter((key) => stats[key] > 0).map((key) => ({
+        key,
+        count: stats[key],
+        label: formatStatusLabel(key)
+      }));
+    }
     function computeStats(tests) {
       const stats = { passed: 0, failed: 0, skipped: 0, didnotrun: 0, running: 0, total: 0 };
       for (const t of tests) {
@@ -1816,9 +2057,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UIcon = _sfc_main$p;
       const _component_OpenInIdeLink = __nuxt_component_1$3;
+      const _component_TestRowBadges = __nuxt_component_2$1;
+      const _component_BrowserBadge = __nuxt_component_3$3;
+      const _component_DurationValue = __nuxt_component_14$1;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_UButton = _sfc_main$k;
-      _push(`<div${ssrRenderAttrs(mergeProps({ class: "rounded-lg border border-default text-sm flex flex-col flex-1 min-h-0" }, _attrs))}><div class="flex items-center justify-end px-3 py-1.5 border-b border-default bg-elevated shrink-0"><button class="${ssrRenderClass([__props.hasFilter ? "text-muted cursor-not-allowed opacity-50" : "text-muted hover:text-default", "flex items-center gap-1 text-xs transition-colors"])}"${ssrIncludeBooleanAttr(__props.hasFilter) ? " disabled" : ""}${ssrRenderAttr("title", __props.hasFilter ? "Clear filters to collapse/expand" : isAllExpanded.value ? "Collapse all" : "Expand all")}>`);
+      _push(`<div${ssrRenderAttrs(mergeProps({ class: "rounded-lg border border-default bg-default text-sm flex flex-col flex-1 min-h-0" }, _attrs))}><div class="flex items-center justify-end px-3 py-1.5 border-b border-default bg-elevated shrink-0"><button class="${ssrRenderClass([__props.hasFilter ? "text-muted cursor-not-allowed opacity-50" : "text-muted hover:text-default", "flex items-center gap-1 text-xs transition-colors"])}"${ssrIncludeBooleanAttr(__props.hasFilter) ? " disabled" : ""}${ssrRenderAttr("title", __props.hasFilter ? "Clear filters to collapse/expand" : isAllExpanded.value ? "Collapse all" : "Expand all")}>`);
       _push(ssrRenderComponent(_component_UIcon, {
         name: isAllExpanded.value ? "i-lucide-fold-vertical" : "i-lucide-unfold-vertical",
         class: "size-3.5"
@@ -1853,177 +2096,55 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             _push(`<span class="font-medium truncate min-w-0 text-muted">${ssrInterpolate(row.label)}</span>`);
           }
           if (row.depth > 0) {
-            _push(`<div class="flex items-center gap-1 shrink-0">`);
-            if (row.mode === "parallel") {
-              _push(ssrRenderComponent(_component_UBadge, {
-                color: "success",
-                variant: "soft",
-                size: "xs"
-              }, {
-                default: withCtx((_, _push2, _parent2, _scopeId) => {
-                  if (_push2) {
-                    _push2(`parallel`);
-                  } else {
-                    return [
-                      createTextVNode("parallel")
-                    ];
-                  }
-                }),
-                _: 2
-              }, _parent));
-            } else {
-              _push(`<!---->`);
-            }
-            if (row.mode === "serial") {
-              _push(ssrRenderComponent(_component_UBadge, {
-                color: "warning",
-                variant: "soft",
-                size: "xs"
-              }, {
-                default: withCtx((_, _push2, _parent2, _scopeId) => {
-                  if (_push2) {
-                    _push2(`serial`);
-                  } else {
-                    return [
-                      createTextVNode("serial")
-                    ];
-                  }
-                }),
-                _: 2
-              }, _parent));
-            } else {
-              _push(`<!---->`);
-            }
-            _push(`<!--[-->`);
-            ssrRenderList(row.annotations, (ann) => {
-              _push(ssrRenderComponent(_component_UBadge, {
-                key: `${ann.type}:${ann.description ?? ""}`,
-                color: annotationColor(ann.type),
-                variant: "soft",
-                size: "xs",
-                title: ann.type !== "tag" ? ann.description ?? void 0 : void 0,
-                class: "gap-1"
-              }, {
-                default: withCtx((_, _push2, _parent2, _scopeId) => {
-                  if (_push2) {
-                    if (annotationIcon(ann.type)) {
-                      _push2(ssrRenderComponent(_component_UIcon, {
-                        name: annotationIcon(ann.type),
-                        class: "size-2.5 shrink-0"
-                      }, null, _parent2, _scopeId));
-                    } else {
-                      _push2(`<!---->`);
-                    }
-                    _push2(` ${ssrInterpolate(annotationLabel(ann))}`);
-                  } else {
-                    return [
-                      annotationIcon(ann.type) ? (openBlock(), createBlock(_component_UIcon, {
-                        key: 0,
-                        name: annotationIcon(ann.type),
-                        class: "size-2.5 shrink-0"
-                      }, null, 8, ["name"])) : createCommentVNode("", true),
-                      createTextVNode(" " + toDisplayString(annotationLabel(ann)), 1)
-                    ];
-                  }
-                }),
-                _: 2
-              }, _parent));
-            });
-            _push(`<!--]--></div>`);
-          } else {
-            _push(`<!---->`);
-          }
-          _push(`<div class="flex-1"></div><div class="flex items-center gap-2 shrink-0 tabular-nums">`);
-          if (row.stats.failed > 0) {
-            _push(`<span class="text-xs text-red-600 dark:text-red-400 font-medium">${ssrInterpolate(row.stats.failed)} failed </span>`);
-          } else {
-            _push(`<!---->`);
-          }
-          if (row.stats.passed > 0) {
-            _push(`<span class="text-xs text-green-600 dark:text-green-400">${ssrInterpolate(row.stats.passed)} passed </span>`);
-          } else {
-            _push(`<!---->`);
-          }
-          if (row.stats.skipped > 0) {
-            _push(`<span class="text-xs text-muted">${ssrInterpolate(row.stats.skipped)} skipped</span>`);
-          } else {
-            _push(`<!---->`);
-          }
-          if (row.stats.didnotrun > 0) {
-            _push(`<span class="text-xs text-amber-600 dark:text-amber-400">${ssrInterpolate(row.stats.didnotrun)} didn&#39;t run </span>`);
-          } else {
-            _push(`<!---->`);
-          }
-          if (row.stats.running > 0) {
-            _push(`<span class="text-xs text-info">${ssrInterpolate(row.stats.running)} running</span>`);
+            _push(ssrRenderComponent(_component_TestRowBadges, {
+              mode: row.mode,
+              annotations: row.annotations,
+              class: "shrink-0"
+            }, null, _parent));
           } else {
             _push(`<!---->`);
           }
-          _push(`</div></div>`);
+          _push(`<div class="flex-1"></div><div class="flex items-center gap-1.5 sm:gap-2 shrink-0 tabular-nums"><!--[-->`);
+          ssrRenderList(visibleStats(row.stats), (stat) => {
+            _push(`<span class="${ssrRenderClass([[("getStatusTextClass" in _ctx ? _ctx.getStatusTextClass : unref(getStatusTextClass))(stat.key), stat.key === "failed" ? "font-medium" : ""], "text-xs inline-flex items-center gap-0.5"])}"${ssrRenderAttr("title", `${stat.count} ${stat.label}`)}>`);
+            _push(ssrRenderComponent(_component_UIcon, {
+              name: ("getStatusIcon" in _ctx ? _ctx.getStatusIcon : unref(getStatusIcon))(stat.key),
+              class: "size-3 shrink-0 sm:hidden"
+            }, null, _parent));
+            _push(` ${ssrInterpolate(stat.count)}<span class="max-sm:sr-only">${ssrInterpolate(stat.label)}</span></span>`);
+          });
+          _push(`<!--]--></div></div>`);
         } else {
-          _push(`<div class="${ssrRenderClass([__props.highlightedCaseId === row.test.id ? "animate-pulse bg-yellow-100 dark:bg-yellow-900/30" : "", "flex items-center gap-2 pr-3 py-1.5 border-b border-default last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-900/40 transition-colors"])}" style="${ssrRenderStyle({ paddingLeft: `${row.depth * 20 + 12}px` })}">`);
+          _push(`<div class="${ssrRenderClass([__props.highlightedCaseId === row.test.id ? "animate-pulse bg-yellow-100 dark:bg-yellow-900/30" : "", "flex flex-wrap items-center gap-x-2 gap-y-1 pr-3 py-2 sm:py-1.5 border-b border-default last:border-b-0 hover:bg-zinc-50 dark:hover:bg-zinc-900/40 transition-colors"])}" style="${ssrRenderStyle({ paddingLeft: `${row.depth * 20 + 12}px` })}">`);
+          _push(ssrRenderComponent(_component_BrowserBadge, {
+            browser: row.test.browser,
+            size: "sm"
+          }, null, _parent));
           _push(ssrRenderComponent(_component_UIcon, {
-            name: "i-lucide-flask-conical",
-            class: "size-3.5 text-muted shrink-0"
+            name: ("getStatusIcon" in _ctx ? _ctx.getStatusIcon : unref(getStatusIcon))(row.test.status),
+            class: ["size-4 shrink-0", [("getStatusTextClass" in _ctx ? _ctx.getStatusTextClass : unref(getStatusTextClass))(row.test.status), ("isStatusInFlight" in _ctx ? _ctx.isStatusInFlight : unref(isStatusInFlight))(row.test.status) ? "animate-spin" : ""]],
+            role: "img",
+            "aria-label": `Status: ${("formatStatusLabel" in _ctx ? _ctx.formatStatusLabel : unref(formatStatusLabel))(row.test.status)}`,
+            title: ("formatStatusLabel" in _ctx ? _ctx.formatStatusLabel : unref(formatStatusLabel))(row.test.status)
           }, null, _parent));
-          _push(ssrRenderComponent(_component_UBadge, {
-            color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(
-              row.test.status === "timedOut" || row.test.status === "timedout" ? "failed" : row.test.status
-            ),
-            size: "xs",
-            class: "capitalize shrink-0"
-          }, {
-            default: withCtx((_, _push2, _parent2, _scopeId) => {
-              if (_push2) {
-                _push2(`${ssrInterpolate(("formatStatusLabel" in _ctx ? _ctx.formatStatusLabel : unref(formatStatusLabel))(row.test.status))}`);
-              } else {
-                return [
-                  createTextVNode(toDisplayString(("formatStatusLabel" in _ctx ? _ctx.formatStatusLabel : unref(formatStatusLabel))(row.test.status)), 1)
-                ];
-              }
-            }),
-            _: 2
-          }, _parent));
-          _push(`<!--[-->`);
-          ssrRenderList(row.test.testAnnotations ?? [], (ann) => {
-            _push(ssrRenderComponent(_component_UBadge, {
-              key: `${ann.type}:${ann.description ?? ""}`,
-              color: annotationColor(ann.type),
-              variant: "soft",
-              size: "xs",
-              title: ann.type !== "tag" ? ann.description ?? void 0 : void 0,
-              class: "shrink-0 gap-1"
-            }, {
-              default: withCtx((_, _push2, _parent2, _scopeId) => {
-                if (_push2) {
-                  if (annotationIcon(ann.type)) {
-                    _push2(ssrRenderComponent(_component_UIcon, {
-                      name: annotationIcon(ann.type),
-                      class: "size-2.5 shrink-0"
-                    }, null, _parent2, _scopeId));
-                  } else {
-                    _push2(`<!---->`);
-                  }
-                  _push2(` ${ssrInterpolate(annotationLabel(ann))}`);
-                } else {
-                  return [
-                    annotationIcon(ann.type) ? (openBlock(), createBlock(_component_UIcon, {
-                      key: 0,
-                      name: annotationIcon(ann.type),
-                      class: "size-2.5 shrink-0"
-                    }, null, 8, ["name"])) : createCommentVNode("", true),
-                    createTextVNode(" " + toDisplayString(annotationLabel(ann)), 1)
-                  ];
-                }
-              }),
-              _: 2
-            }, _parent));
-          });
-          _push(`<!--]--><a${ssrRenderAttr("href", `/test-run-cases/${row.test.id}`)} class="text-primary hover:underline truncate flex-1 min-w-0">${ssrInterpolate(row.test.title)}</a><div class="flex items-center gap-2 shrink-0">`);
+          _push(`<a${ssrRenderAttr("href", `/test-run-cases/${row.test.id}`)} class="text-highlighted hover:text-primary hover:underline min-w-32 self-stretch flex items-center"${ssrRenderAttr("title", row.test.title)}><span class="truncate">${ssrInterpolate(row.test.title)}</span></a>`);
+          _push(ssrRenderComponent(_component_TestRowBadges, {
+            "is-new-regression": Boolean(row.test.isNewRegression),
+            "is-new-flaky": Boolean(row.test.isNewFlaky),
+            annotations: row.test.testAnnotations,
+            tags: row.test.tags,
+            meta: row.test.testMeta,
+            "max-tags": 3,
+            class: "shrink-0"
+          }, null, _parent));
+          _push(`<div class="flex items-center gap-1.5 sm:gap-2 shrink-0 ml-auto">`);
           if (row.test.status === "running") {
             _push(`<span class="text-xs text-info">In progress...</span>`);
           } else if (row.test.duration) {
-            _push(`<span class="text-xs text-muted tabular-nums">${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.test.duration))}</span>`);
+            _push(ssrRenderComponent(_component_DurationValue, {
+              ms: row.test.duration,
+              class: "text-xs text-muted"
+            }, null, _parent));
           } else {
             _push(`<!---->`);
           }
@@ -2069,22 +2190,21 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           } else {
             _push(`<!---->`);
           }
-          _push(ssrRenderComponent(_component_UButton, {
-            to: `/test-run-cases/${row.test.id}`,
-            size: "xs",
-            variant: "outline"
-          }, {
-            default: withCtx((_, _push2, _parent2, _scopeId) => {
-              if (_push2) {
-                _push2(` View `);
-              } else {
-                return [
-                  createTextVNode(" View ")
-                ];
-              }
-            }),
-            _: 2
-          }, _parent));
+          if (row.test.wastedTimeMs) {
+            _push(`<span class="inline-flex items-center gap-0.5 text-xs text-amber-600 dark:text-amber-400" title="Wasted in fixed waits">`);
+            _push(ssrRenderComponent(_component_UIcon, {
+              name: "i-lucide-hourglass",
+              class: "size-3 shrink-0"
+            }, null, _parent));
+            _push(ssrRenderComponent(_component_DurationValue, {
+              ms: row.test.wastedTimeMs,
+              "unit-class": "opacity-60",
+              "no-title": ""
+            }, null, _parent));
+            _push(`</span>`);
+          } else {
+            _push(`<!---->`);
+          }
           _push(`</div></div>`);
         }
         _push(`<!--]-->`);
@@ -2094,7 +2214,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         _push(`<div class="text-center py-8 text-muted">`);
         _push(ssrRenderComponent(_component_UIcon, {
           name: "i-lucide-search-x",
-          class: "size-6 mx-auto mb-2 text-gray-300 dark:text-gray-600"
+          class: "size-6 mx-auto mb-2 text-zinc-300 dark:text-zinc-600"
         }, null, _parent));
         _push(`<p class="text-sm">No test cases match your filters.</p></div>`);
       } else {
@@ -2110,7 +2230,8 @@ _sfc_main$d.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/run/TestCasesTree.vue");
   return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
 };
-const __nuxt_component_6 = Object.assign(_sfc_main$d, { __name: "TestCasesTree" });
+const __nuxt_component_7 = Object.assign(_sfc_main$d, { __name: "TestCasesTree" });
+const NATURAL_ORDER = "natural";
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "TestCasesList",
   __ssrInlineRender: true,
@@ -2246,11 +2367,21 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       if (hasWastedTime.value) {
         cols.push({ key: "wastedTimeMs", label: "Wasted", sortable: true, width: "6rem", align: "left" });
       }
-      cols.push({ key: "actions", label: "Actions", sortable: false, width: "7.5rem", align: "right" });
       return cols;
     });
+    const sortOptions = computed(() => [
+      { label: "Run order", value: NATURAL_ORDER },
+      ...columns.value.map((c) => ({ label: c.label, value: c.key }))
+    ]);
+    const mobileSortKey = computed({
+      get: () => sortKey.value ?? NATURAL_ORDER,
+      set: (value) => {
+        sortKey.value = value === NATURAL_ORDER ? null : value;
+        if (value !== NATURAL_ORDER) sortDir.value = "asc";
+      }
+    });
     const gridTemplate = computed(() => columns.value.map((c) => c.width).join(" "));
-    const gridMinWidth = computed(() => hasWastedTime.value ? "55rem" : "49rem");
+    const gridMinWidth = computed(() => hasWastedTime.value ? "47.5rem" : "41.5rem");
     const hasFilter = computed(
       () => testCaseSearch.value !== "" || activeStatuses.value.length > 0 || testCaseBrowserFilter.value !== "all" || props.failureClusterFilter != null
     );
@@ -2289,12 +2420,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return (_ctx, _push, _parent, _attrs) => {
       const _component_FilterToolbar = __nuxt_component_4$1;
       const _component_UIcon = _sfc_main$p;
-      const _component_HelpHint = __nuxt_component_2$1;
+      const _component_HelpHint = __nuxt_component_2$2;
       const _component_UInput = _sfc_main$d$1;
-      const _component_USelect = _sfc_main$n;
-      const _component_UCheckbox = _sfc_main$o;
-      const _component_TestCasesTree = __nuxt_component_6;
-      const _component_ClientOnly = __nuxt_component_7;
+      const _component_USelect = _sfc_main$o;
+      const _component_UCheckbox = _sfc_main$q;
+      const _component_UButton = _sfc_main$k;
+      const _component_TestCasesTree = __nuxt_component_7;
+      const _component_ClientOnly = __nuxt_component_7$1;
       _push(`<div${ssrRenderAttrs(mergeProps({ class: "flex flex-col min-h-0" }, _attrs))}>`);
       _push(ssrRenderComponent(_component_FilterToolbar, { class: "mb-4 shrink-0" }, {
         start: withCtx((_, _push2, _parent2, _scopeId) => {
@@ -2311,11 +2443,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             }, null, _parent2, _scopeId));
             _push2(`</button></div>`);
             if (__props.isLive) {
-              _push2(`<span class="text-sm text-gray-500 tabular-nums inline-flex items-center gap-1"${_scopeId}>${ssrInterpolate(__props.testCases.length)} completed `);
+              _push2(`<span class="text-sm text-zinc-500 tabular-nums inline-flex items-center gap-1"${_scopeId}>${ssrInterpolate(__props.testCases.length)} completed `);
               _push2(ssrRenderComponent(_component_HelpHint, { topic: "run.live" }, null, _parent2, _scopeId));
               _push2(`</span>`);
             } else {
-              _push2(`<span class="text-sm text-gray-500 tabular-nums inline-flex items-center gap-1"${_scopeId}>${ssrInterpolate(sortedTestCases.value.length)}${ssrInterpolate(sortedTestCases.value.length !== __props.testCases.length ? ` / ${__props.testCases.length}` : "")} cases `);
+              _push2(`<span class="text-sm text-zinc-500 tabular-nums inline-flex items-center gap-1"${_scopeId}>${ssrInterpolate(sortedTestCases.value.length)}${ssrInterpolate(sortedTestCases.value.length !== __props.testCases.length ? ` / ${__props.testCases.length}` : "")} cases `);
               _push2(ssrRenderComponent(_component_HelpHint, { topic: "run.test-cases" }, null, _parent2, _scopeId));
               _push2(`</span>`);
             }
@@ -2345,13 +2477,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               ]),
               __props.isLive ? (openBlock(), createBlock("span", {
                 key: 0,
-                class: "text-sm text-gray-500 tabular-nums inline-flex items-center gap-1"
+                class: "text-sm text-zinc-500 tabular-nums inline-flex items-center gap-1"
               }, [
                 createTextVNode(toDisplayString(__props.testCases.length) + " completed ", 1),
                 createVNode(_component_HelpHint, { topic: "run.live" })
               ])) : (openBlock(), createBlock("span", {
                 key: 1,
-                class: "text-sm text-gray-500 tabular-nums inline-flex items-center gap-1"
+                class: "text-sm text-zinc-500 tabular-nums inline-flex items-center gap-1"
               }, [
                 createTextVNode(toDisplayString(sortedTestCases.value.length) + toDisplayString(sortedTestCases.value.length !== __props.testCases.length ? ` / ${__props.testCases.length}` : "") + " cases ", 1),
                 createVNode(_component_HelpHint, { topic: "run.test-cases" })
@@ -2372,10 +2504,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             _push2(`<div class="flex flex-wrap items-center gap-1"${_scopeId}><!--[-->`);
             ssrRenderList(STATUS_OPTIONS, (opt) => {
               _push2(`<button class="${ssrRenderClass([
-                activeStatuses.value.includes(opt.value) ? opt.color === "green" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : opt.color === "red" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : opt.color === "orange" ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300" : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700",
+                activeStatuses.value.includes(opt.value) ? opt.color === "green" ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : opt.color === "red" ? "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400" : opt.color === "orange" ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300" : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700",
                 "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-colors whitespace-nowrap"
               ])}"${_scopeId}><span class="${ssrRenderClass([
-                opt.color === "green" ? "bg-green-500" : opt.color === "red" ? "bg-red-500" : opt.color === "orange" ? "bg-orange-500" : "bg-gray-400",
+                opt.color === "green" ? "bg-emerald-500" : opt.color === "red" ? "bg-rose-500" : opt.color === "orange" ? "bg-orange-500" : "bg-zinc-400",
                 "size-2 rounded-full shrink-0"
               ])}"${_scopeId}></span> ${ssrInterpolate(opt.label)}</button>`);
             });
@@ -2407,6 +2539,30 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             } else {
               _push2(`<!---->`);
             }
+            if (!unref(treeView)) {
+              _push2(`<div class="flex items-center gap-1 md:hidden"${_scopeId}>`);
+              _push2(ssrRenderComponent(_component_USelect, {
+                modelValue: mobileSortKey.value,
+                "onUpdate:modelValue": ($event) => mobileSortKey.value = $event,
+                items: sortOptions.value,
+                size: "sm",
+                class: "w-32",
+                "aria-label": "Sort cases by"
+              }, null, _parent2, _scopeId));
+              _push2(ssrRenderComponent(_component_UButton, {
+                size: "sm",
+                variant: "outline",
+                color: "neutral",
+                disabled: sortKey.value === null,
+                icon: sortDir.value === "asc" ? "i-lucide-arrow-up-narrow-wide" : "i-lucide-arrow-down-wide-narrow",
+                title: sortDir.value === "asc" ? "Sorted ascending" : "Sorted descending",
+                "aria-label": sortDir.value === "asc" ? "Sorted ascending" : "Sorted descending",
+                onClick: ($event) => sortDir.value = sortDir.value === "asc" ? "desc" : "asc"
+              }, null, _parent2, _scopeId));
+              _push2(`</div>`);
+            } else {
+              _push2(`<!---->`);
+            }
           } else {
             return [
               createVNode(_component_UInput, {
@@ -2423,14 +2579,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                     key: opt.value,
                     class: [
                       "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-colors whitespace-nowrap",
-                      activeStatuses.value.includes(opt.value) ? opt.color === "green" ? "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400" : opt.color === "red" ? "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400" : opt.color === "orange" ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300" : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                      activeStatuses.value.includes(opt.value) ? opt.color === "green" ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : opt.color === "red" ? "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400" : opt.color === "orange" ? "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400" : "bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300" : "bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700"
                     ],
                     onClick: ($event) => toggleStatus(opt.value)
                   }, [
                     createVNode("span", {
                       class: [
                         "size-2 rounded-full shrink-0",
-                        opt.color === "green" ? "bg-green-500" : opt.color === "red" ? "bg-red-500" : opt.color === "orange" ? "bg-orange-500" : "bg-gray-400"
+                        opt.color === "green" ? "bg-emerald-500" : opt.color === "red" ? "bg-rose-500" : opt.color === "orange" ? "bg-orange-500" : "bg-zinc-400"
                       ]
                     }, null, 2),
                     createTextVNode(" " + toDisplayString(opt.label), 1)
@@ -2457,7 +2613,30 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": ($event) => showNewFlakyOnly.value = $event,
                 label: "New flaky",
                 size: "sm"
-              }, null, 8, ["modelValue", "onUpdate:modelValue"])) : createCommentVNode("", true)
+              }, null, 8, ["modelValue", "onUpdate:modelValue"])) : createCommentVNode("", true),
+              !unref(treeView) ? (openBlock(), createBlock("div", {
+                key: 2,
+                class: "flex items-center gap-1 md:hidden"
+              }, [
+                createVNode(_component_USelect, {
+                  modelValue: mobileSortKey.value,
+                  "onUpdate:modelValue": ($event) => mobileSortKey.value = $event,
+                  items: sortOptions.value,
+                  size: "sm",
+                  class: "w-32",
+                  "aria-label": "Sort cases by"
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "items"]),
+                createVNode(_component_UButton, {
+                  size: "sm",
+                  variant: "outline",
+                  color: "neutral",
+                  disabled: sortKey.value === null,
+                  icon: sortDir.value === "asc" ? "i-lucide-arrow-up-narrow-wide" : "i-lucide-arrow-down-wide-narrow",
+                  title: sortDir.value === "asc" ? "Sorted ascending" : "Sorted descending",
+                  "aria-label": sortDir.value === "asc" ? "Sorted ascending" : "Sorted descending",
+                  onClick: ($event) => sortDir.value = sortDir.value === "asc" ? "desc" : "asc"
+                }, null, 8, ["disabled", "icon", "title", "aria-label", "onClick"])
+              ])) : createCommentVNode("", true)
             ];
           }
         }),
@@ -2476,7 +2655,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       } else if (!unref(treeView)) {
         _push(`<!--[-->`);
         if (sortedTestCases.value.length > 0) {
-          _push(`<div class="flex-1 min-h-0 max-lg:h-[70dvh] overflow-x-auto overflow-y-hidden rounded-lg border border-default"><div class="flex flex-col h-full" role="table" aria-label="Test cases"${ssrRenderAttr("aria-rowcount", sortedTestCases.value.length + 1)} style="${ssrRenderStyle({ minWidth: gridMinWidth.value })}"><div class="grid shrink-0 bg-elevated/50 border-b border-default" role="row" style="${ssrRenderStyle({ gridTemplateColumns: gridTemplate.value })}"><!--[-->`);
+          _push(`<div class="flex-1 min-h-0 max-lg:h-[70dvh] md:overflow-x-auto overflow-y-hidden rounded-lg border border-default bg-default"><div class="flex flex-col h-full md:min-w-(--grid-min-width)" role="table" aria-label="Test cases"${ssrRenderAttr("aria-rowcount", sortedTestCases.value.length + 1)} style="${ssrRenderStyle({ "--grid-min-width": gridMinWidth.value })}"><div class="hidden md:grid shrink-0 bg-elevated/50 border-b border-default" role="row" style="${ssrRenderStyle({ gridTemplateColumns: gridTemplate.value })}"><!--[-->`);
           ssrRenderList(columns.value, (col) => {
             _push(`<!--[-->`);
             if (col.sortable) {
@@ -2503,7 +2682,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           _push(ssrRenderComponent(_component_ClientOnly, null, {
             fallback: withCtx((_, _push2, _parent2, _scopeId) => {
               if (_push2) {
-                _push2(`<div class="flex-1 min-h-0 flex items-center justify-center py-10 text-sm text-gray-500"${_scopeId}>`);
+                _push2(`<div class="flex-1 min-h-0 flex items-center justify-center py-10 text-sm text-zinc-500"${_scopeId}>`);
                 _push2(ssrRenderComponent(_component_UIcon, {
                   name: "i-lucide-loader-circle",
                   class: "size-4 mr-2 animate-spin"
@@ -2511,7 +2690,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 _push2(` Loading test cases… </div>`);
               } else {
                 return [
-                  createVNode("div", { class: "flex-1 min-h-0 flex items-center justify-center py-10 text-sm text-gray-500" }, [
+                  createVNode("div", { class: "flex-1 min-h-0 flex items-center justify-center py-10 text-sm text-zinc-500" }, [
                     createVNode(_component_UIcon, {
                       name: "i-lucide-loader-circle",
                       class: "size-4 mr-2 animate-spin"
@@ -2524,17 +2703,17 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           }, _parent));
           _push(`</div></div>`);
         } else if (__props.testCases.length === 0) {
-          _push(`<div class="text-center py-10 text-gray-500">`);
+          _push(`<div class="text-center py-10 text-zinc-500">`);
           _push(ssrRenderComponent(_component_UIcon, {
             name: "i-lucide-beaker",
-            class: "size-8 mx-auto mb-2 text-gray-300 dark:text-gray-600"
+            class: "size-8 mx-auto mb-2 text-zinc-300 dark:text-zinc-600"
           }, null, _parent));
           _push(`<p>No test cases recorded for this run.</p></div>`);
         } else {
-          _push(`<div class="text-center py-10 text-gray-500">`);
+          _push(`<div class="text-center py-10 text-zinc-500">`);
           _push(ssrRenderComponent(_component_UIcon, {
             name: "i-lucide-search-x",
-            class: "size-8 mx-auto mb-2 text-gray-300 dark:text-gray-600"
+            class: "size-8 mx-auto mb-2 text-zinc-300 dark:text-zinc-600"
           }, null, _parent));
           _push(`<p>No test cases match your filters.</p></div>`);
         }
@@ -2624,9 +2803,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       const _component_ErrorState = __nuxt_component_5$1;
       const _component_UButton = _sfc_main$k;
       const _component_LoadingState = __nuxt_component_1$1;
-      const _component_EmptyState = __nuxt_component_8$1;
+      const _component_EmptyState = __nuxt_component_9$2;
       const _component_UIcon = _sfc_main$p;
-      const _component_HelpHint = __nuxt_component_2$1;
+      const _component_HelpHint = __nuxt_component_2$2;
       const _component_SectionCard = __nuxt_component_11;
       const _component_NuxtLink = __nuxt_component_12$1;
       const _component_UBadge = _sfc_main$7$1;
@@ -3649,14 +3828,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const totalCases = computed(() => groups.value?.reduce((sum, g) => sum + g.caseCount, 0) ?? 0);
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UIcon = _sfc_main$p;
-      const _component_HelpHint = __nuxt_component_2$1;
+      const _component_HelpHint = __nuxt_component_2$2;
       const _component_UButton = _sfc_main$k;
-      const _component_UCard = _sfc_main$l;
+      const _component_UCard = _sfc_main$m;
       const _component_TableScroller = __nuxt_component_3$2;
-      const _component_UTable = _sfc_main$h;
+      const _component_UTable = _sfc_main$i;
       const _component_UBadge = _sfc_main$7$1;
       const _component_NuxtLink = __nuxt_component_12$1;
-      const _component_UModal = _sfc_main$m;
+      const _component_UModal = _sfc_main$n;
       const _component_ClusterDiagnosis = __nuxt_component_9;
       _push(`<!--[--><div class="pt-4 space-y-3">`);
       if (unref(loading)) {
@@ -4780,12 +4959,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _push, _parent, _attrs) => {
       const _component_LoadingState = __nuxt_component_1$1;
-      const _component_EmptyState = __nuxt_component_8$1;
+      const _component_EmptyState = __nuxt_component_9$2;
       const _component_UIcon = _sfc_main$p;
-      const _component_HelpHint = __nuxt_component_2$1;
+      const _component_HelpHint = __nuxt_component_2$2;
       const _component_NuxtLink = __nuxt_component_12$1;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_UCard = _sfc_main$l;
+      const _component_UCard = _sfc_main$m;
       const _component_UButton = _sfc_main$k;
       _push(`<div${ssrRenderAttrs(mergeProps({ class: "pt-4" }, _attrs))}>`);
       if (unref(loading)) {
@@ -5144,10 +5323,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   emits: ["reset", "toggleSpan"],
   setup(__props) {
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_HelpHint = __nuxt_component_2$1;
+      const _component_HelpHint = __nuxt_component_2$2;
       const _component_UPopover = _sfc_main$8$1;
       const _component_UButton = _sfc_main$k;
-      const _component_UCheckbox = _sfc_main$o;
+      const _component_UCheckbox = _sfc_main$q;
       _push(`<div${ssrRenderAttrs(mergeProps({ class: "flex items-center justify-between mb-2" }, _attrs))}><span class="text-xs text-gray-500 inline-flex items-center gap-1"><span>${ssrInterpolate(__props.workerCount)} worker${ssrInterpolate(__props.workerCount > 1 ? "s" : "")} `);
       if (__props.shardTotal && __props.shardTotal > 1) {
         _push(`<!--[--> · ${ssrInterpolate(__props.shardTotal)} shard${ssrInterpolate(__props.shardTotal > 1 ? "s" : "")}<!--]-->`);
@@ -6048,15 +6227,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_USelectMenu = _sfc_main$i;
+      const _component_USelectMenu = _sfc_main$j;
       const _component_RunStatusBadge = __nuxt_component_13$1;
       const _component_UButton = _sfc_main$k;
       const _component_UIcon = _sfc_main$p;
-      const _component_UAlert = _sfc_main$j;
+      const _component_UAlert = _sfc_main$l;
       const _component_MarkerBadge = __nuxt_component_5;
       const _component_UBadge = _sfc_main$7$1;
       const _component_TableScroller = __nuxt_component_3$2;
-      const _component_UTable = _sfc_main$h;
+      const _component_UTable = _sfc_main$i;
+      const _component_DurationValue = __nuxt_component_14$1;
       _push(`<div${ssrRenderAttrs(_attrs)}>`);
       if (__props.testRun && !isLive.value) {
         _push(`<div class="space-y-4"><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div><label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Run A (baseline)</label>`);
@@ -6274,6 +6454,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       } else {
                         _push3(ssrRenderComponent(_component_UBadge, {
                           color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.statusA),
+                          variant: "subtle",
                           class: "capitalize"
                         }, {
                           default: withCtx((_2, _push4, _parent4, _scopeId3) => {
@@ -6296,6 +6477,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                         }, "—")) : (openBlock(), createBlock(_component_UBadge, {
                           key: 1,
                           color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.statusA),
+                          variant: "subtle",
                           class: "capitalize"
                         }, {
                           default: withCtx(() => [
@@ -6313,6 +6495,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       } else {
                         _push3(ssrRenderComponent(_component_UBadge, {
                           color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.statusB),
+                          variant: "subtle",
                           class: "capitalize"
                         }, {
                           default: withCtx((_2, _push4, _parent4, _scopeId3) => {
@@ -6335,6 +6518,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                         }, "—")) : (openBlock(), createBlock(_component_UBadge, {
                           key: 1,
                           color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.statusB),
+                          variant: "subtle",
                           class: "capitalize"
                         }, {
                           default: withCtx(() => [
@@ -6348,13 +6532,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   "durationA-cell": withCtx(({ row }, _push3, _parent3, _scopeId2) => {
                     if (_push3) {
                       if (row.original.durationA !== null) {
-                        _push3(`<span${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.durationA))}</span>`);
+                        _push3(ssrRenderComponent(_component_DurationValue, {
+                          ms: row.original.durationA
+                        }, null, _parent3, _scopeId2));
                       } else {
                         _push3(`<span class="text-gray-400"${_scopeId2}>—</span>`);
                       }
                     } else {
                       return [
-                        row.original.durationA !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.durationA)), 1)) : (openBlock(), createBlock("span", {
+                        row.original.durationA !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                          key: 0,
+                          ms: row.original.durationA
+                        }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                           key: 1,
                           class: "text-gray-400"
                         }, "—"))
@@ -6364,13 +6553,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   "durationB-cell": withCtx(({ row }, _push3, _parent3, _scopeId2) => {
                     if (_push3) {
                       if (row.original.durationB !== null) {
-                        _push3(`<span${_scopeId2}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.durationB))}</span>`);
+                        _push3(ssrRenderComponent(_component_DurationValue, {
+                          ms: row.original.durationB
+                        }, null, _parent3, _scopeId2));
                       } else {
                         _push3(`<span class="text-gray-400"${_scopeId2}>—</span>`);
                       }
                     } else {
                       return [
-                        row.original.durationB !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.durationB)), 1)) : (openBlock(), createBlock("span", {
+                        row.original.durationB !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                          key: 0,
+                          ms: row.original.durationB
+                        }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                           key: 1,
                           class: "text-gray-400"
                         }, "—"))
@@ -6384,7 +6578,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       } else {
                         _push3(`<span class="${ssrRenderClass(
                           row.original.delta > 0 ? "text-red-600" : row.original.delta < 0 ? "text-green-600" : "text-gray-500"
-                        )}"${_scopeId2}>${ssrInterpolate(row.original.delta > 0 ? "+" : "")}${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.delta))}</span>`);
+                        )}"${_scopeId2}>${ssrInterpolate(row.original.delta > 0 ? "+" : "")}`);
+                        _push3(ssrRenderComponent(_component_DurationValue, {
+                          ms: row.original.delta,
+                          "unit-class": "opacity-60"
+                        }, null, _parent3, _scopeId2));
+                        _push3(`</span>`);
                       }
                     } else {
                       return [
@@ -6394,7 +6593,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                         }, "—")) : (openBlock(), createBlock("span", {
                           key: 1,
                           class: row.original.delta > 0 ? "text-red-600" : row.original.delta < 0 ? "text-green-600" : "text-gray-500"
-                        }, toDisplayString(row.original.delta > 0 ? "+" : "") + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.delta)), 3))
+                        }, [
+                          createTextVNode(toDisplayString(row.original.delta > 0 ? "+" : ""), 1),
+                          createVNode(_component_DurationValue, {
+                            ms: row.original.delta,
+                            "unit-class": "opacity-60"
+                          }, null, 8, ["ms"])
+                        ], 2))
                       ];
                     }
                   }),
@@ -6441,6 +6646,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       }, "—")) : (openBlock(), createBlock(_component_UBadge, {
                         key: 1,
                         color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.statusA),
+                        variant: "subtle",
                         class: "capitalize"
                       }, {
                         default: withCtx(() => [
@@ -6456,6 +6662,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       }, "—")) : (openBlock(), createBlock(_component_UBadge, {
                         key: 1,
                         color: ("getStatusColor" in _ctx ? _ctx.getStatusColor : unref(getStatusColor))(row.original.statusB),
+                        variant: "subtle",
                         class: "capitalize"
                       }, {
                         default: withCtx(() => [
@@ -6465,13 +6672,19 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       }, 1032, ["color"]))
                     ]),
                     "durationA-cell": withCtx(({ row }) => [
-                      row.original.durationA !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.durationA)), 1)) : (openBlock(), createBlock("span", {
+                      row.original.durationA !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                        key: 0,
+                        ms: row.original.durationA
+                      }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                         key: 1,
                         class: "text-gray-400"
                       }, "—"))
                     ]),
                     "durationB-cell": withCtx(({ row }) => [
-                      row.original.durationB !== null ? (openBlock(), createBlock("span", { key: 0 }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.durationB)), 1)) : (openBlock(), createBlock("span", {
+                      row.original.durationB !== null ? (openBlock(), createBlock(_component_DurationValue, {
+                        key: 0,
+                        ms: row.original.durationB
+                      }, null, 8, ["ms"])) : (openBlock(), createBlock("span", {
                         key: 1,
                         class: "text-gray-400"
                       }, "—"))
@@ -6483,7 +6696,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       }, "—")) : (openBlock(), createBlock("span", {
                         key: 1,
                         class: row.original.delta > 0 ? "text-red-600" : row.original.delta < 0 ? "text-green-600" : "text-gray-500"
-                      }, toDisplayString(row.original.delta > 0 ? "+" : "") + toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.delta)), 3))
+                      }, [
+                        createTextVNode(toDisplayString(row.original.delta > 0 ? "+" : ""), 1),
+                        createVNode(_component_DurationValue, {
+                          ms: row.original.delta,
+                          "unit-class": "opacity-60"
+                        }, null, 8, ["ms"])
+                      ], 2))
                     ]),
                     "percentChange-cell": withCtx(({ row }) => [
                       row.original.percentChange === null ? (openBlock(), createBlock("span", {
@@ -6603,8 +6822,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     ];
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UIcon = _sfc_main$p;
-      const _component_UTable = _sfc_main$h;
+      const _component_UTable = _sfc_main$i;
       const _component_UBadge = _sfc_main$7$1;
+      const _component_DurationValue = __nuxt_component_14$1;
       _push(`<div${ssrRenderAttrs(mergeProps({ class: "flex flex-col overflow-hidden" }, _attrs))}>`);
       if (unref(loading)) {
         _push(`<div class="flex-1 flex items-center justify-center text-gray-500 gap-2">`);
@@ -6673,12 +6893,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             if (_push2) {
               _push2(`<span class="${ssrRenderClass(
                 row.original.avgDuration > 1e3 ? "text-red-600 font-medium" : row.original.avgDuration > 500 ? "text-orange-500 font-medium" : ""
-              )}"${_scopeId}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.avgDuration))}</span>`);
+              )}"${_scopeId}>`);
+              _push2(ssrRenderComponent(_component_DurationValue, {
+                ms: row.original.avgDuration,
+                "unit-class": "opacity-60"
+              }, null, _parent2, _scopeId));
+              _push2(`</span>`);
             } else {
               return [
                 createVNode("span", {
                   class: row.original.avgDuration > 1e3 ? "text-red-600 font-medium" : row.original.avgDuration > 500 ? "text-orange-500 font-medium" : ""
-                }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.avgDuration)), 3)
+                }, [
+                  createVNode(_component_DurationValue, {
+                    ms: row.original.avgDuration,
+                    "unit-class": "opacity-60"
+                  }, null, 8, ["ms"])
+                ], 2)
               ];
             }
           }),
@@ -6686,12 +6916,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             if (_push2) {
               _push2(`<span class="${ssrRenderClass(
                 row.original.p90Duration > 2e3 ? "text-red-600 font-medium" : row.original.p90Duration > 1e3 ? "text-orange-500" : ""
-              )}"${_scopeId}>${ssrInterpolate(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.p90Duration))}</span>`);
+              )}"${_scopeId}>`);
+              _push2(ssrRenderComponent(_component_DurationValue, {
+                ms: row.original.p90Duration,
+                "unit-class": "opacity-60"
+              }, null, _parent2, _scopeId));
+              _push2(`</span>`);
             } else {
               return [
                 createVNode("span", {
                   class: row.original.p90Duration > 2e3 ? "text-red-600 font-medium" : row.original.p90Duration > 1e3 ? "text-orange-500" : ""
-                }, toDisplayString(("formatDuration" in _ctx ? _ctx.formatDuration : unref(formatDuration))(row.original.p90Duration)), 3)
+                }, [
+                  createVNode(_component_DurationValue, {
+                    ms: row.original.p90Duration,
+                    "unit-class": "opacity-60"
+                  }, null, 8, ["ms"])
+                ], 2)
               ];
             }
           }),
@@ -6872,15 +7112,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         value: "insights",
         slot: "insights"
       },
-      ...hasFailures.value ? [
-        {
-          label: `Failure groups (${failureGroupCount.value})`,
-          icon: "i-lucide-layers",
-          value: "failure-groups",
-          slot: "failure-groups"
-        }
-      ] : [],
-      ...hasFailures.value ? [{ label: "Regression", icon: "i-lucide-git-pull-request-arrow", value: "regression", slot: "regression" }] : [],
+      // Failure-only tabs stay visible but disabled on a green run: tabs that
+      // appear and disappear shift every other tab's position between runs.
+      {
+        label: hasFailures.value ? `Failure groups (${failureGroupCount.value})` : "Failure groups",
+        icon: "i-lucide-layers",
+        value: "failure-groups",
+        slot: "failure-groups",
+        disabled: !hasFailures.value
+      },
+      {
+        label: "Regression",
+        icon: "i-lucide-git-pull-request-arrow",
+        value: "regression",
+        slot: "regression",
+        disabled: !hasFailures.value
+      },
       {
         label: `Timeline${uniqueWorkerCount.value > 0 ? ` (${uniqueWorkerCount.value})` : ""}`,
         icon: "i-lucide-timeline",
@@ -6899,7 +7146,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "test-cases": "overflow-hidden flex flex-col",
       endpoints: "overflow-hidden flex flex-col"
     };
-    const runTabValues = computed(() => tabItems.value.map((t) => t.value));
+    const runTabValues = computed(() => tabItems.value.filter((t) => !t.disabled).map((t) => t.value));
     if (typeof route.query.tab === "string" && runTabValues.value.includes(route.query.tab)) {
       activeTab.value = route.query.tab;
     }
@@ -6923,11 +7170,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UDashboardPanel = _sfc_main$1$1;
-      const _component_UDashboardNavbar = _sfc_main$f;
+      const _component_UDashboardNavbar = _sfc_main$g;
       const _component_UDashboardSidebarCollapse = _sfc_main$1$2;
       const _component_BreadcrumbNav = __nuxt_component_3$1;
       const _component_NuxtLink = __nuxt_component_12$1;
-      const _component_UTooltip = _sfc_main$g;
+      const _component_UTooltip = _sfc_main$h;
       const _component_UIcon = _sfc_main$p;
       const _component_NavbarActions = __nuxt_component_4;
       const _component_DetailPageLayout = __nuxt_component_8;
@@ -6941,7 +7188,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_WorkersTimeline = __nuxt_component_16;
       const _component_RunCompare = __nuxt_component_17;
       const _component_SlowEndpoints = __nuxt_component_18;
-      const _component_ClientOnly = __nuxt_component_7;
+      const _component_ClientOnly = __nuxt_component_7$1;
       _push(`<!--[-->`);
       _push(ssrRenderComponent(_component_UDashboardPanel, { id: "test-run-detail" }, {
         header: withCtx((_, _push2, _parent2, _scopeId) => {
@@ -7588,4 +7835,4 @@ _sfc_main.setup = (props, ctx) => {
 };
 
 export { _sfc_main as default };
-//# sourceMappingURL=_id_-bWcP2xFl.mjs.map
+//# sourceMappingURL=_id_-BHh65pfg.mjs.map