@piwitests/server 0.19.0 → 0.21.0

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

@@ -1,44 +1,45 @@
-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 _sfc_main$1$1, a as _sfc_main$h } from './DashboardNavbar-DCr10nxL.mjs';
+import { _ as _sfc_main$1$2 } from './Breadcrumb-3itRZ1uz.mjs';
+import { _ as __nuxt_component_3$1 } from './BreadcrumbNav-GnjBvXuT.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, v as __nuxt_component_12$1, o as _sfc_main$p, s as __nuxt_component_7$1, _ as _sfc_main$d$1, w as _sfc_main$8$1, p as _sfc_main$j$1 } from './server.mjs';
+import { _ as _sfc_main$i } from './Tooltip-Dv4htNP6.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_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_8, b as __nuxt_component_1$1, a as __nuxt_component_14$2, c as __nuxt_component_16$1, d as __nuxt_component_17$1 } from './MetaStripGroup-dXXa_MzF.mjs';
+import { _ as __nuxt_component_0$1 } from './DiagnosisResult-Br3qBLXe.mjs';
+import { _ as __nuxt_component_14$3 } from './TestStatusBar-DhbrM_rQ.mjs';
+import { _ as __nuxt_component_14$1 } from './DurationValue-CWKfjIF2.mjs';
+import { _ as _sfc_main$n } from './Card-BQP_oZkQ.mjs';
+import { _ as __nuxt_component_2$2 } from './HelpHint-DjGrGFA7.mjs';
 import { _ as __nuxt_component_5 } from './MarkerBadge-D7meXy4u.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 { _ as __nuxt_component_1$2 } from './StatTileGrid-7zOFUQ6j.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-BOK1aJk9.mjs';
+import { aa as formatBytes, bR as DEFAULT_WASTED_WAIT_PATTERNS, dX 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-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$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 { _ as __nuxt_component_19 } from './EntityLinks-CF0xG3Y8.mjs';
+import { b as buildRetryCommand } from './useOpenInIde-DolN3bZ5.mjs';
+import { u as useFetch, a as useCopy } from './fetch-BQg_fhX0.mjs';
+import { _ as __nuxt_component_4$3 } from './FilterToolbar-BwXy8xSk.mjs';
+import { _ as _sfc_main$q } from './Select-CVctwpib.mjs';
+import { _ as _sfc_main$r } from './Checkbox-DmRKG-0s.mjs';
+import { _ as __nuxt_component_1$3 } from './OpenInIdeLink-B9wvQkhy.mjs';
+import { _ as __nuxt_component_2$3 } from './TestMetaBadges-BlyKmfeP.mjs';
+import { _ as __nuxt_component_3$3 } from './BrowserBadge-DQqJS9CV.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_9$2 } from './EmptyState-Dtlab7S9.mjs';
-import { _ as __nuxt_component_11 } from './SectionCard-CN-v0FZ_.mjs';
+import { _ as __nuxt_component_12$2 } from './LoadingState-B8v1nWJt.mjs';
+import { _ as __nuxt_component_4$2 } from './EmptyState-DC2q_7TD.mjs';
+import { _ as __nuxt_component_11 } from './SectionCard-BW5Lynrr.mjs';
 import { _ as __nuxt_component_3$2 } from './TableScroller-DMcdCVrH.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 { _ as _sfc_main$j } from './Table-BRk04Hd2.mjs';
+import { _ as _sfc_main$o } from './Modal-pSDlXzT3.mjs';
+import { _ as __nuxt_component_0$2 } from './DiagnosisPanel-BWTpoCKy.mjs';
+import { _ as _sfc_main$l } from './SelectMenu-XLVBEa11.mjs';
+import { _ as __nuxt_component_13$1 } from './RunStatusBadge-CuTDknRJ.mjs';
+import { _ as _sfc_main$m } from './Alert-C4xq8lao.mjs';
 import { u as useRunComparison } from './useRunComparison-CiMBLpe2.mjs';
-import './DashboardSidebarToggle-DCTnHiIv.mjs';
+import { _ as __nuxt_component_4$1 } from './FeatureUnavailable-CwPms6X_.mjs';
+import './DashboardSidebarToggle-8EpBhX0R.mjs';
 import 'vue-router';
 import '@iconify/vue';
 import 'tailwindcss/colors';
@@ -71,6 +72,7 @@ import 'highlight.js/lib/languages/typescript';
 import 'highlight.js/lib/languages/xml';
 import 'highlight.js/lib/languages/yaml';
 import 'fflate';
+import 'zod';
 import 'pixelmatch';
 import 'sharp';
 import '@anthropic-ai/sdk';
@@ -94,25 +96,187 @@ import 'node:zlib';
 import 'consola';
 import 'node:url';
 import '@iconify/utils';
-import './Tabs-Bbsg9wag.mjs';
-import './RovingFocusItem-BJSzTBjy.mjs';
-import './CodeBlock-BgE-NSmE.mjs';
-import './Textarea-Dv2-lOvW.mjs';
+import './FormField-e7OnSKPM.mjs';
+import './Label-DYDR1Oeh.mjs';
+import './Switch-8zWfwI5B.mjs';
+import './useFormControl-CZ9So7iX.mjs';
+import './useForwardScopeId-D0ameaSU.mjs';
+import './VisuallyHiddenInput-BHvzNumK.mjs';
+import './CodeBlock-DGhKVFad.mjs';
+import './useTauri-Kf3HE_42.mjs';
+import './Tabs-BkSOnbaB.mjs';
+import './RovingFocusItem--OEHI2P3.mjs';
+import './Textarea-vkMKVQTJ.mjs';
 import './help-content-C876a9WD.mjs';
 import '../_/marker-categories.mjs';
 import 'date-fns';
-import './useFormControl-CZ9So7iX.mjs';
+import '@vue/shared';
 import './handleAndDispatchCustomEvent-Bk_AVSSo.mjs';
 import './isValueEqualOrExist-D2qw9YEr.mjs';
-import './useForwardScopeId-D0ameaSU.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-Cd1hhlxC.mjs';
+import './useAiStatus-UR8x-feE.mjs';
 
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "RunStorageChip",
+  __ssrInlineRender: true,
+  props: {
+    storageStats: {},
+    reports: {},
+    finalizing: { type: Boolean }
+  },
+  setup(__props) {
+    const config = useRuntimeConfig();
+    return (_ctx, _push, _parent, _attrs) => {
+      const _component_UIcon = _sfc_main$p;
+      const _component_UProgress = _sfc_main$j$1;
+      const _component_UPopover = _sfc_main$8$1;
+      const _component_HelpHint = __nuxt_component_2$2;
+      const _component_UButton = _sfc_main$k;
+      if (__props.finalizing) {
+        _push(`<div${ssrRenderAttrs(mergeProps({ class: "inline-flex items-center gap-2 text-info" }, _attrs))}>`);
+        _push(ssrRenderComponent(_component_UIcon, {
+          name: "i-lucide-upload",
+          class: "size-3.5 shrink-0 animate-pulse"
+        }, null, _parent));
+        _push(`<span class="text-xs font-medium whitespace-nowrap">Uploading reports &amp; traces…</span>`);
+        _push(ssrRenderComponent(_component_UProgress, {
+          value: null,
+          size: "sm",
+          color: "info",
+          class: "w-24 rounded-full animate-pulse"
+        }, null, _parent));
+        _push(`</div>`);
+      } else if (__props.storageStats?.totalFiles) {
+        _push(ssrRenderComponent(_component_UPopover, _attrs, {
+          content: withCtx((_, _push2, _parent2, _scopeId) => {
+            if (_push2) {
+              _push2(`<div class="p-3 w-72 space-y-2"${_scopeId}><p class="text-xs font-medium text-muted inline-flex items-center gap-1"${_scopeId}> Stored artifacts `);
+              _push2(ssrRenderComponent(_component_HelpHint, { topic: "run.reports" }, null, _parent2, _scopeId));
+              _push2(`</p><!--[-->`);
+              ssrRenderList(__props.reports, (report) => {
+                _push2(`<div class="flex items-center justify-between gap-2 min-w-0"${_scopeId}>`);
+                _push2(ssrRenderComponent(_component_UButton, {
+                  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",
+                  variant: "outline",
+                  class: "min-w-0",
+                  ui: { label: "truncate" }
+                }, {
+                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                    if (_push3) {
+                      _push3(`${ssrInterpolate(report.label)}`);
+                    } else {
+                      return [
+                        createTextVNode(toDisplayString(report.label), 1)
+                      ];
+                    }
+                  }),
+                  _: 2
+                }, _parent2, _scopeId));
+                _push2(`<span class="text-xs tabular-nums text-dimmed shrink-0"${_scopeId}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size))}</span></div>`);
+              });
+              _push2(`<!--]-->`);
+              if (__props.storageStats.testCaseFilesCount > 0) {
+                _push2(`<div class="flex items-center justify-between gap-2 text-sm border-t border-default pt-2"${_scopeId}><span class="truncate"${_scopeId}>Test files (${ssrInterpolate(__props.storageStats.testCaseFilesCount)})</span><span class="text-xs tabular-nums text-dimmed shrink-0"${_scopeId}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(__props.storageStats.testCaseFilesSize))}</span></div>`);
+              } else {
+                _push2(`<!---->`);
+              }
+              _push2(`</div>`);
+            } else {
+              return [
+                createVNode("div", { class: "p-3 w-72 space-y-2" }, [
+                  createVNode("p", { class: "text-xs font-medium text-muted inline-flex items-center gap-1" }, [
+                    createTextVNode(" Stored artifacts "),
+                    createVNode(_component_HelpHint, { topic: "run.reports" })
+                  ]),
+                  (openBlock(true), createBlock(Fragment, null, renderList(__props.reports, (report) => {
+                    return openBlock(), createBlock("div", {
+                      key: `${report.type}-${report.path}`,
+                      class: "flex items-center justify-between gap-2 min-w-0"
+                    }, [
+                      createVNode(_component_UButton, {
+                        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",
+                        variant: "outline",
+                        class: "min-w-0",
+                        ui: { label: "truncate" }
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(report.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["href", "icon"]),
+                      createVNode("span", { class: "text-xs tabular-nums text-dimmed shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(report.size)), 1)
+                    ]);
+                  }), 128)),
+                  __props.storageStats.testCaseFilesCount > 0 ? (openBlock(), createBlock("div", {
+                    key: 0,
+                    class: "flex items-center justify-between gap-2 text-sm border-t border-default pt-2"
+                  }, [
+                    createVNode("span", { class: "truncate" }, "Test files (" + toDisplayString(__props.storageStats.testCaseFilesCount) + ")", 1),
+                    createVNode("span", { class: "text-xs tabular-nums text-dimmed shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(__props.storageStats.testCaseFilesSize)), 1)
+                  ])) : createCommentVNode("", true)
+                ])
+              ];
+            }
+          }),
+          default: withCtx((_, _push2, _parent2, _scopeId) => {
+            if (_push2) {
+              _push2(`<button type="button" class="inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 -my-0.5 -ml-1.5 text-muted hover:text-default hover:bg-elevated/60 transition-colors cursor-pointer" title="Stored reports &amp; artifacts"${_scopeId}>`);
+              _push2(ssrRenderComponent(_component_UIcon, {
+                name: "i-lucide-database",
+                class: "size-3.5 text-dimmed shrink-0"
+              }, null, _parent2, _scopeId));
+              _push2(`<span class="tabular-nums whitespace-nowrap"${_scopeId}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(__props.storageStats.totalSize))} <span class="text-dimmed"${_scopeId}>· ${ssrInterpolate(__props.storageStats.totalFiles)} file${ssrInterpolate(__props.storageStats.totalFiles === 1 ? "" : "s")}</span></span>`);
+              _push2(ssrRenderComponent(_component_UIcon, {
+                name: "i-lucide-chevron-down",
+                class: "size-3 text-dimmed shrink-0"
+              }, null, _parent2, _scopeId));
+              _push2(`</button>`);
+            } else {
+              return [
+                createVNode("button", {
+                  type: "button",
+                  class: "inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 -my-0.5 -ml-1.5 text-muted hover:text-default hover:bg-elevated/60 transition-colors cursor-pointer",
+                  title: "Stored reports & artifacts"
+                }, [
+                  createVNode(_component_UIcon, {
+                    name: "i-lucide-database",
+                    class: "size-3.5 text-dimmed shrink-0"
+                  }),
+                  createVNode("span", { class: "tabular-nums whitespace-nowrap" }, [
+                    createTextVNode(toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(__props.storageStats.totalSize)) + " ", 1),
+                    createVNode("span", { class: "text-dimmed" }, "· " + toDisplayString(__props.storageStats.totalFiles) + " file" + toDisplayString(__props.storageStats.totalFiles === 1 ? "" : "s"), 1)
+                  ]),
+                  createVNode(_component_UIcon, {
+                    name: "i-lucide-chevron-down",
+                    class: "size-3 text-dimmed shrink-0"
+                  })
+                ])
+              ];
+            }
+          }),
+          _: 1
+        }, _parent));
+      } else {
+        _push(`<!---->`);
+      }
+    };
+  }
+});
+const _sfc_setup$g = _sfc_main$g.setup;
+_sfc_main$g.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/run/RunStorageChip.vue");
+  return _sfc_setup$g ? _sfc_setup$g(props, ctx) : void 0;
+};
+const __nuxt_component_18$1 = Object.assign(_sfc_main$g, { __name: "RunStorageChip" });
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "RunSummary",
   __ssrInlineRender: true,
@@ -132,17 +296,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     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)
-    );
-    const showSource = computed(() => !!props.testRun?.metadata?.scm);
+    const ci = computed(() => props.testRun?.metadata?.ci);
+    const scm = computed(() => props.testRun?.metadata?.scm);
+    const tags = computed(() => props.testRun?.metadata?.tags);
+    const customData = computed(() => props.testRun?.metadata?.customData);
+    const showCiGroup = computed(() => !!(ci.value || props.testRun?.environment));
+    const showVersions = computed(() => !!(props.testRun?.playwrightVersion || props.testRun?.reporterVersion));
     const showStorage = computed(() => !!(storageStats.value?.totalFiles || props.finalizing));
-    const showOther = computed(
-      () => !!(props.testRun?.metadata?.tags?.length || props.testRun?.metadata?.projectDescription || props.testRun?.metadata?.relatedIssue || props.testRun?.metadata?.customData || props.testRun?.links?.length)
-    );
-    const { summaryColSpanClass, blockColSpanClass } = useDetailGrid(
-      () => [showCiEnv, showSource, showStorage, showOther].filter((b) => b.value).length
-    );
+    const primaryReport = computed(() => props.allReports[0] ?? null);
     const { copy, copied } = useCopy();
     const retryMode = ref("file-line");
     const retryCopied = ref(false);
@@ -237,28 +398,30 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _push, _parent, _attrs) => {
       const _component_FoldableSummary = __nuxt_component_0$1;
-      const _component_StatusBlock = __nuxt_component_1$2;
+      const _component_StatusChip = __nuxt_component_1$1;
       const _component_UIcon = _sfc_main$p;
       const _component_UBadge = _sfc_main$7$1;
-      const _component_TestStatusBar = __nuxt_component_14$2;
+      const _component_TestStatusBar = __nuxt_component_14$3;
       const _component_DurationValue = __nuxt_component_14$1;
-      const _component_UCard = _sfc_main$m;
+      const _component_UCard = _sfc_main$n;
       const _component_HelpHint = __nuxt_component_2$2;
-      const _component_UTooltip = _sfc_main$h;
+      const _component_UTooltip = _sfc_main$i;
       const _component_NuxtLink = __nuxt_component_12$1;
       const _component_MarkerBadge = __nuxt_component_5;
+      const _component_ClientOnly = __nuxt_component_7$1;
       const _component_UButton = _sfc_main$k;
       const _component_UPopover = _sfc_main$8$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_17$1;
+      const _component_DesktopRunLocallyButton = __nuxt_component_14$2;
+      const _component_StatTileGrid = __nuxt_component_1$2;
+      const _component_SummaryMetaStrip = __nuxt_component_16$1;
+      const _component_MetaStripGroup = __nuxt_component_17$1;
+      const _component_RunStorageChip = __nuxt_component_18$1;
+      const _component_EntityLinks = __nuxt_component_19;
       _push(ssrRenderComponent(_component_FoldableSummary, mergeProps({ "storage-key": "test-run" }, _attrs), {
         folded: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
             _push2(`<div class="flex items-center gap-3 flex-1 min-w-0 justify-between"${_scopeId}><div class="flex items-center gap-3 min-w-0"${_scopeId}>`);
-            _push2(ssrRenderComponent(_component_StatusBlock, {
+            _push2(ssrRenderComponent(_component_StatusChip, {
               status: __props.testRun?.status ?? "",
               size: "sm"
             }, null, _parent2, _scopeId));
@@ -332,7 +495,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             return [
               createVNode("div", { class: "flex items-center gap-3 flex-1 min-w-0 justify-between" }, [
                 createVNode("div", { class: "flex items-center gap-3 min-w-0" }, [
-                  createVNode(_component_StatusBlock, {
+                  createVNode(_component_StatusChip, {
                     status: __props.testRun?.status ?? "",
                     size: "sm"
                   }, null, 8, ["status"]),
@@ -434,132 +597,854 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }),
         default: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
-            _push2(`<div class="grid grid-cols-1 lg:grid-cols-12 gap-4"${_scopeId}><div class="${ssrRenderClass(unref(summaryColSpanClass))}"${_scopeId}>`);
-            _push2(ssrRenderComponent(_component_UCard, { class: "shadow-xs h-full" }, {
-              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+            _push2(`<div class="@container"${_scopeId}>`);
+            _push2(ssrRenderComponent(_component_UCard, {
+              class: "shadow-xs",
+              ui: { footer: "px-4 py-2.5 sm:px-4 bg-muted/30" }
+            }, {
+              footer: withCtx((_2, _push3, _parent3, _scopeId2) => {
                 if (_push3) {
-                  _push3(`<div class="space-y-3"${_scopeId2}><div class="flex items-start gap-3"${_scopeId2}><div class="flex items-center gap-2.5 min-w-0 flex-1"${_scopeId2}>`);
-                  _push3(ssrRenderComponent(_component_StatusBlock, {
-                    status: __props.testRun?.status ?? "",
-                    size: "md"
-                  }, 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-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-zinc-400 animate-spin shrink-0"
-                      }, null, _parent3, _scopeId2));
-                    } else {
-                      _push3(`<!---->`);
-                    }
-                    _push3(`<!--]-->`);
-                  } else {
-                    _push3(`<!--[-->`);
-                    if (__props.testRun?.label) {
-                      _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-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(`<!--]-->`);
-                  }
-                  _push3(ssrRenderComponent(_component_HelpHint, { topic: "run.summary" }, null, _parent3, _scopeId2));
-                  _push3(`</h2>`);
-                  if (__props.testRun?.shardTotal && __props.testRun.shardTotal > 1) {
-                    _push3(ssrRenderComponent(_component_UBadge, {
-                      color: "neutral",
-                      variant: "soft",
-                      size: "sm",
-                      class: "shrink-0",
-                      title: `Shard ${__props.testRun.shardsFinished ?? 0}/${__props.testRun.shardTotal}`
-                    }, {
-                      default: withCtx((_3, _push4, _parent4, _scopeId3) => {
-                        if (_push4) {
-                          _push4(ssrRenderComponent(_component_UIcon, {
-                            name: "i-lucide-layout-grid",
-                            class: "size-3 mr-1"
-                          }, null, _parent4, _scopeId3));
-                          _push4(` ${ssrInterpolate(__props.testRun.shardsFinished ?? 0)}/${ssrInterpolate(__props.testRun.shardTotal)}`);
+                  _push3(ssrRenderComponent(_component_SummaryMetaStrip, null, {
+                    default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                      if (_push4) {
+                        if (unref(showCiGroup)) {
+                          _push4(ssrRenderComponent(_component_MetaStripGroup, {
+                            label: "CI & environment",
+                            icon: "i-lucide-cloud",
+                            help: "run.ci-env"
+                          }, {
+                            default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                              if (_push5) {
+                                if (__props.testRun?.environment) {
+                                  _push5(`<span class="rounded-full border border-default px-2 py-0.5 text-xs bg-elevated/60"${_scopeId4}>${ssrInterpolate(__props.testRun.environment)}</span>`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (unref(ci)?.provider) {
+                                  _push5(`<span${_scopeId4}>${ssrInterpolate(unref(ci).provider)}</span>`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (unref(ci)?.buildNumber || unref(ci)?.buildUrl) {
+                                  _push5(`<!--[--><span class="text-dimmed"${_scopeId4}>·</span>`);
+                                  if (unref(ci)?.buildUrl) {
+                                    _push5(`<a${ssrRenderAttr("href", unref(ci).buildUrl)} target="_blank" class="text-primary hover:underline"${_scopeId4}>${ssrInterpolate(unref(ci)?.buildNumber ? `Build #${unref(ci).buildNumber}` : "View build")}</a>`);
+                                  } else {
+                                    _push5(`<span${_scopeId4}>Build #${ssrInterpolate(unref(ci).buildNumber)}</span>`);
+                                  }
+                                  _push5(`<!--]-->`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (unref(ci)?.workflow || unref(ci)?.jobName) {
+                                  _push5(`<!--[--><span class="text-dimmed"${_scopeId4}>·</span><span class="text-muted"${_scopeId4}>`);
+                                  if (unref(ci)?.workflow) {
+                                    _push5(`<!--[-->${ssrInterpolate(unref(ci).workflow)}<!--]-->`);
+                                  } else {
+                                    _push5(`<!---->`);
+                                  }
+                                  if (unref(ci)?.workflow && unref(ci)?.jobName) {
+                                    _push5(`<!--[--> · <!--]-->`);
+                                  } else {
+                                    _push5(`<!---->`);
+                                  }
+                                  if (unref(ci)?.jobName) {
+                                    _push5(`<!--[-->${ssrInterpolate(unref(ci).jobName)}<!--]-->`);
+                                  } else {
+                                    _push5(`<!---->`);
+                                  }
+                                  _push5(`</span><!--]-->`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                              } else {
+                                return [
+                                  __props.testRun?.environment ? (openBlock(), createBlock("span", {
+                                    key: 0,
+                                    class: "rounded-full border border-default px-2 py-0.5 text-xs bg-elevated/60"
+                                  }, toDisplayString(__props.testRun.environment), 1)) : createCommentVNode("", true),
+                                  unref(ci)?.provider ? (openBlock(), createBlock("span", { key: 1 }, toDisplayString(unref(ci).provider), 1)) : createCommentVNode("", true),
+                                  unref(ci)?.buildNumber || unref(ci)?.buildUrl ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                    createVNode("span", { class: "text-dimmed" }, "·"),
+                                    unref(ci)?.buildUrl ? (openBlock(), createBlock("a", {
+                                      key: 0,
+                                      href: unref(ci).buildUrl,
+                                      target: "_blank",
+                                      class: "text-primary hover:underline"
+                                    }, toDisplayString(unref(ci)?.buildNumber ? `Build #${unref(ci).buildNumber}` : "View build"), 9, ["href"])) : (openBlock(), createBlock("span", { key: 1 }, "Build #" + toDisplayString(unref(ci).buildNumber), 1))
+                                  ], 64)) : createCommentVNode("", true),
+                                  unref(ci)?.workflow || unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 3 }, [
+                                    createVNode("span", { class: "text-dimmed" }, "·"),
+                                    createVNode("span", { class: "text-muted" }, [
+                                      unref(ci)?.workflow ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                        createTextVNode(toDisplayString(unref(ci).workflow), 1)
+                                      ], 64)) : createCommentVNode("", true),
+                                      unref(ci)?.workflow && unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                        createTextVNode(" · ")
+                                      ], 64)) : createCommentVNode("", true),
+                                      unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                        createTextVNode(toDisplayString(unref(ci).jobName), 1)
+                                      ], 64)) : createCommentVNode("", true)
+                                    ])
+                                  ], 64)) : createCommentVNode("", true)
+                                ];
+                              }
+                            }),
+                            _: 1
+                          }, _parent4, _scopeId3));
                         } else {
-                          return [
-                            createVNode(_component_UIcon, {
-                              name: "i-lucide-layout-grid",
-                              class: "size-3 mr-1"
+                          _push4(`<!---->`);
+                        }
+                        if (unref(scm)) {
+                          _push4(ssrRenderComponent(_component_MetaStripGroup, {
+                            label: "Source",
+                            icon: "i-lucide-git-branch"
+                          }, {
+                            default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                              if (_push5) {
+                                if (unref(scm).branch) {
+                                  _push5(`<span class="font-medium"${_scopeId4}>${ssrInterpolate(unref(scm).branch)}</span>`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (unref(scm).commit) {
+                                  _push5(`<code class="text-xs font-mono bg-zinc-100 dark:bg-zinc-800 px-1 py-0.5 rounded"${ssrRenderAttr("title", unref(scm).commit)}${_scopeId4}>${ssrInterpolate(unref(scm).commit.length >= 8 ? unref(scm).commit.substring(0, 8) : unref(scm).commit)}</code>`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (unref(scm).author) {
+                                  _push5(`<span class="text-muted"${_scopeId4}>${ssrInterpolate(unref(scm).author)}</span>`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (unref(scm).commitMessage) {
+                                  _push5(`<span class="text-xs text-dimmed truncate max-w-[40ch]"${ssrRenderAttr("title", unref(scm).commitMessage)}${_scopeId4}>${ssrInterpolate(unref(scm).commitMessage)}</span>`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                              } else {
+                                return [
+                                  unref(scm).branch ? (openBlock(), createBlock("span", {
+                                    key: 0,
+                                    class: "font-medium"
+                                  }, toDisplayString(unref(scm).branch), 1)) : createCommentVNode("", true),
+                                  unref(scm).commit ? (openBlock(), createBlock("code", {
+                                    key: 1,
+                                    class: "text-xs font-mono bg-zinc-100 dark:bg-zinc-800 px-1 py-0.5 rounded",
+                                    title: unref(scm).commit
+                                  }, toDisplayString(unref(scm).commit.length >= 8 ? unref(scm).commit.substring(0, 8) : unref(scm).commit), 9, ["title"])) : createCommentVNode("", true),
+                                  unref(scm).author ? (openBlock(), createBlock("span", {
+                                    key: 2,
+                                    class: "text-muted"
+                                  }, toDisplayString(unref(scm).author), 1)) : createCommentVNode("", true),
+                                  unref(scm).commitMessage ? (openBlock(), createBlock("span", {
+                                    key: 3,
+                                    class: "text-xs text-dimmed truncate max-w-[40ch]",
+                                    title: unref(scm).commitMessage
+                                  }, toDisplayString(unref(scm).commitMessage), 9, ["title"])) : createCommentVNode("", true)
+                                ];
+                              }
                             }),
-                            createTextVNode(" " + toDisplayString(__props.testRun.shardsFinished ?? 0) + "/" + toDisplayString(__props.testRun.shardTotal), 1)
-                          ];
+                            _: 1
+                          }, _parent4, _scopeId3));
+                        } else {
+                          _push4(`<!---->`);
                         }
-                      }),
-                      _: 1
-                    }, _parent3, _scopeId2));
-                  } else {
-                    _push3(`<!---->`);
-                  }
-                  if (__props.testRun?.precedingMarker) {
-                    _push3(ssrRenderComponent(_component_UTooltip, {
-                      text: `This run started after: ${__props.testRun.precedingMarker.label}`
-                    }, {
-                      default: withCtx((_3, _push4, _parent4, _scopeId3) => {
-                        if (_push4) {
-                          _push4(ssrRenderComponent(_component_NuxtLink, {
-                            to: `/projects/${__props.testRun.projectId}?tab=timeline`,
-                            class: "shrink-0 inline-flex items-center gap-1"
+                        if (unref(showVersions)) {
+                          _push4(ssrRenderComponent(_component_MetaStripGroup, {
+                            label: "Tooling versions",
+                            icon: "i-lucide-tag"
                           }, {
                             default: withCtx((_4, _push5, _parent5, _scopeId4) => {
                               if (_push5) {
-                                _push5(`<span class="text-xs text-muted"${_scopeId4}>After</span>`);
-                                _push5(ssrRenderComponent(_component_MarkerBadge, {
-                                  marker: __props.testRun.precedingMarker,
-                                  size: "xs"
-                                }, null, _parent5, _scopeId4));
+                                _push5(`<span class="text-muted whitespace-nowrap"${_scopeId4}>`);
+                                if (__props.testRun?.playwrightVersion) {
+                                  _push5(`<!--[-->Playwright v${ssrInterpolate(__props.testRun.playwrightVersion)}<!--]-->`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (__props.testRun?.playwrightVersion && __props.testRun?.reporterVersion) {
+                                  _push5(`<!--[--> · <!--]-->`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                if (__props.testRun?.reporterVersion) {
+                                  _push5(`<!--[-->Piwi v${ssrInterpolate(__props.testRun.reporterVersion)}<!--]-->`);
+                                } else {
+                                  _push5(`<!---->`);
+                                }
+                                _push5(`</span>`);
                               } else {
                                 return [
-                                  createVNode("span", { class: "text-xs text-muted" }, "After"),
-                                  createVNode(_component_MarkerBadge, {
-                                    marker: __props.testRun.precedingMarker,
-                                    size: "xs"
-                                  }, null, 8, ["marker"])
+                                  createVNode("span", { class: "text-muted whitespace-nowrap" }, [
+                                    __props.testRun?.playwrightVersion ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                      createTextVNode("Playwright v" + toDisplayString(__props.testRun.playwrightVersion), 1)
+                                    ], 64)) : createCommentVNode("", true),
+                                    __props.testRun?.playwrightVersion && __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                      createTextVNode(" · ")
+                                    ], 64)) : createCommentVNode("", true),
+                                    __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                      createTextVNode("Piwi v" + toDisplayString(__props.testRun.reporterVersion), 1)
+                                    ], 64)) : createCommentVNode("", true)
+                                  ])
                                 ];
                               }
                             }),
                             _: 1
                           }, _parent4, _scopeId3));
                         } else {
-                          return [
-                            createVNode(_component_NuxtLink, {
-                              to: `/projects/${__props.testRun.projectId}?tab=timeline`,
-                              class: "shrink-0 inline-flex items-center gap-1"
-                            }, {
-                              default: withCtx(() => [
-                                createVNode("span", { class: "text-xs text-muted" }, "After"),
-                                createVNode(_component_MarkerBadge, {
-                                  marker: __props.testRun.precedingMarker,
-                                  size: "xs"
-                                }, null, 8, ["marker"])
-                              ]),
-                              _: 1
-                            }, 8, ["to"])
-                          ];
+                          _push4(`<!---->`);
                         }
-                      }),
-                      _: 1
-                    }, _parent3, _scopeId2));
-                  } else {
-                    _push3(`<!---->`);
-                  }
-                  _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"
-                  }, {
-                    default: withCtx((_3, _push4, _parent4, _scopeId3) => {
-                      if (_push4) {
-                        _push4(ssrRenderComponent(_component_UButton, {
+                        if (unref(tags)?.length) {
+                          _push4(ssrRenderComponent(_component_MetaStripGroup, {
+                            label: "Tags",
+                            icon: "i-lucide-tags"
+                          }, {
+                            default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                              if (_push5) {
+                                _push5(`<!--[-->`);
+                                ssrRenderList(unref(tags), (tag) => {
+                                  _push5(ssrRenderComponent(_component_UBadge, {
+                                    key: tag,
+                                    color: "neutral",
+                                    variant: "soft",
+                                    size: "sm"
+                                  }, {
+                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                      if (_push6) {
+                                        _push6(`${ssrInterpolate(tag)}`);
+                                      } else {
+                                        return [
+                                          createTextVNode(toDisplayString(tag), 1)
+                                        ];
+                                      }
+                                    }),
+                                    _: 2
+                                  }, _parent5, _scopeId4));
+                                });
+                                _push5(`<!--]-->`);
+                              } else {
+                                return [
+                                  (openBlock(true), createBlock(Fragment, null, renderList(unref(tags), (tag) => {
+                                    return openBlock(), createBlock(_component_UBadge, {
+                                      key: tag,
+                                      color: "neutral",
+                                      variant: "soft",
+                                      size: "sm"
+                                    }, {
+                                      default: withCtx(() => [
+                                        createTextVNode(toDisplayString(tag), 1)
+                                      ]),
+                                      _: 2
+                                    }, 1024);
+                                  }), 128))
+                                ];
+                              }
+                            }),
+                            _: 1
+                          }, _parent4, _scopeId3));
+                        } else {
+                          _push4(`<!---->`);
+                        }
+                        if (__props.testRun?.metadata?.relatedIssue) {
+                          _push4(ssrRenderComponent(_component_MetaStripGroup, {
+                            label: "Related issue",
+                            icon: "i-lucide-bookmark"
+                          }, {
+                            default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                              if (_push5) {
+                                _push5(`<span class="text-muted"${_scopeId4}>${ssrInterpolate(__props.testRun.metadata.relatedIssue)}</span>`);
+                              } else {
+                                return [
+                                  createVNode("span", { class: "text-muted" }, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
+                                ];
+                              }
+                            }),
+                            _: 1
+                          }, _parent4, _scopeId3));
+                        } else {
+                          _push4(`<!---->`);
+                        }
+                        if (unref(showStorage)) {
+                          _push4(ssrRenderComponent(_component_MetaStripGroup, { label: "Storage" }, {
+                            default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                              if (_push5) {
+                                _push5(ssrRenderComponent(_component_RunStorageChip, {
+                                  "storage-stats": unref(storageStats),
+                                  reports: __props.allReports,
+                                  finalizing: __props.finalizing
+                                }, null, _parent5, _scopeId4));
+                              } else {
+                                return [
+                                  createVNode(_component_RunStorageChip, {
+                                    "storage-stats": unref(storageStats),
+                                    reports: __props.allReports,
+                                    finalizing: __props.finalizing
+                                  }, null, 8, ["storage-stats", "reports", "finalizing"])
+                                ];
+                              }
+                            }),
+                            _: 1
+                          }, _parent4, _scopeId3));
+                        } else {
+                          _push4(`<!---->`);
+                        }
+                        _push4(ssrRenderComponent(_component_MetaStripGroup, {
+                          label: "Links",
+                          icon: "i-lucide-link",
+                          help: "run.metadata"
+                        }, {
+                          default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                            if (_push5) {
+                              _push5(ssrRenderComponent(_component_EntityLinks, {
+                                "entity-type": "test_run",
+                                "entity-id": __props.testRun.id,
+                                links: __props.testRun.links ?? null,
+                                onUpdated: ($event) => _ctx.$emit("label-updated")
+                              }, null, _parent5, _scopeId4));
+                            } else {
+                              return [
+                                createVNode(_component_EntityLinks, {
+                                  "entity-type": "test_run",
+                                  "entity-id": __props.testRun.id,
+                                  links: __props.testRun.links ?? null,
+                                  onUpdated: ($event) => _ctx.$emit("label-updated")
+                                }, null, 8, ["entity-id", "links", "onUpdated"])
+                              ];
+                            }
+                          }),
+                          _: 1
+                        }, _parent4, _scopeId3));
+                        if (unref(customData)) {
+                          _push4(ssrRenderComponent(_component_MetaStripGroup, { label: "Custom data" }, {
+                            default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                              if (_push5) {
+                                _push5(ssrRenderComponent(_component_UButton, {
+                                  size: "xs",
+                                  variant: "ghost",
+                                  color: "neutral",
+                                  icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
+                                  onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
+                                }, {
+                                  default: withCtx((_5, _push6, _parent6, _scopeId5) => {
+                                    if (_push6) {
+                                      _push6(` Custom data `);
+                                    } else {
+                                      return [
+                                        createTextVNode(" Custom data ")
+                                      ];
+                                    }
+                                  }),
+                                  _: 1
+                                }, _parent5, _scopeId4));
+                              } else {
+                                return [
+                                  createVNode(_component_UButton, {
+                                    size: "xs",
+                                    variant: "ghost",
+                                    color: "neutral",
+                                    icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
+                                    onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
+                                  }, {
+                                    default: withCtx(() => [
+                                      createTextVNode(" Custom data ")
+                                    ]),
+                                    _: 1
+                                  }, 8, ["icon", "onClick"])
+                                ];
+                              }
+                            }),
+                            _: 1
+                          }, _parent4, _scopeId3));
+                        } else {
+                          _push4(`<!---->`);
+                        }
+                      } else {
+                        return [
+                          unref(showCiGroup) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                            key: 0,
+                            label: "CI & environment",
+                            icon: "i-lucide-cloud",
+                            help: "run.ci-env"
+                          }, {
+                            default: withCtx(() => [
+                              __props.testRun?.environment ? (openBlock(), createBlock("span", {
+                                key: 0,
+                                class: "rounded-full border border-default px-2 py-0.5 text-xs bg-elevated/60"
+                              }, toDisplayString(__props.testRun.environment), 1)) : createCommentVNode("", true),
+                              unref(ci)?.provider ? (openBlock(), createBlock("span", { key: 1 }, toDisplayString(unref(ci).provider), 1)) : createCommentVNode("", true),
+                              unref(ci)?.buildNumber || unref(ci)?.buildUrl ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                createVNode("span", { class: "text-dimmed" }, "·"),
+                                unref(ci)?.buildUrl ? (openBlock(), createBlock("a", {
+                                  key: 0,
+                                  href: unref(ci).buildUrl,
+                                  target: "_blank",
+                                  class: "text-primary hover:underline"
+                                }, toDisplayString(unref(ci)?.buildNumber ? `Build #${unref(ci).buildNumber}` : "View build"), 9, ["href"])) : (openBlock(), createBlock("span", { key: 1 }, "Build #" + toDisplayString(unref(ci).buildNumber), 1))
+                              ], 64)) : createCommentVNode("", true),
+                              unref(ci)?.workflow || unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 3 }, [
+                                createVNode("span", { class: "text-dimmed" }, "·"),
+                                createVNode("span", { class: "text-muted" }, [
+                                  unref(ci)?.workflow ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                    createTextVNode(toDisplayString(unref(ci).workflow), 1)
+                                  ], 64)) : createCommentVNode("", true),
+                                  unref(ci)?.workflow && unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                    createTextVNode(" · ")
+                                  ], 64)) : createCommentVNode("", true),
+                                  unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                    createTextVNode(toDisplayString(unref(ci).jobName), 1)
+                                  ], 64)) : createCommentVNode("", true)
+                                ])
+                              ], 64)) : createCommentVNode("", true)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          unref(scm) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                            key: 1,
+                            label: "Source",
+                            icon: "i-lucide-git-branch"
+                          }, {
+                            default: withCtx(() => [
+                              unref(scm).branch ? (openBlock(), createBlock("span", {
+                                key: 0,
+                                class: "font-medium"
+                              }, toDisplayString(unref(scm).branch), 1)) : createCommentVNode("", true),
+                              unref(scm).commit ? (openBlock(), createBlock("code", {
+                                key: 1,
+                                class: "text-xs font-mono bg-zinc-100 dark:bg-zinc-800 px-1 py-0.5 rounded",
+                                title: unref(scm).commit
+                              }, toDisplayString(unref(scm).commit.length >= 8 ? unref(scm).commit.substring(0, 8) : unref(scm).commit), 9, ["title"])) : createCommentVNode("", true),
+                              unref(scm).author ? (openBlock(), createBlock("span", {
+                                key: 2,
+                                class: "text-muted"
+                              }, toDisplayString(unref(scm).author), 1)) : createCommentVNode("", true),
+                              unref(scm).commitMessage ? (openBlock(), createBlock("span", {
+                                key: 3,
+                                class: "text-xs text-dimmed truncate max-w-[40ch]",
+                                title: unref(scm).commitMessage
+                              }, toDisplayString(unref(scm).commitMessage), 9, ["title"])) : createCommentVNode("", true)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          unref(showVersions) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                            key: 2,
+                            label: "Tooling versions",
+                            icon: "i-lucide-tag"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode("span", { class: "text-muted whitespace-nowrap" }, [
+                                __props.testRun?.playwrightVersion ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                  createTextVNode("Playwright v" + toDisplayString(__props.testRun.playwrightVersion), 1)
+                                ], 64)) : createCommentVNode("", true),
+                                __props.testRun?.playwrightVersion && __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                  createTextVNode(" · ")
+                                ], 64)) : createCommentVNode("", true),
+                                __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                  createTextVNode("Piwi v" + toDisplayString(__props.testRun.reporterVersion), 1)
+                                ], 64)) : createCommentVNode("", true)
+                              ])
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          unref(tags)?.length ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                            key: 3,
+                            label: "Tags",
+                            icon: "i-lucide-tags"
+                          }, {
+                            default: withCtx(() => [
+                              (openBlock(true), createBlock(Fragment, null, renderList(unref(tags), (tag) => {
+                                return openBlock(), createBlock(_component_UBadge, {
+                                  key: tag,
+                                  color: "neutral",
+                                  variant: "soft",
+                                  size: "sm"
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode(toDisplayString(tag), 1)
+                                  ]),
+                                  _: 2
+                                }, 1024);
+                              }), 128))
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          __props.testRun?.metadata?.relatedIssue ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                            key: 4,
+                            label: "Related issue",
+                            icon: "i-lucide-bookmark"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode("span", { class: "text-muted" }, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          unref(showStorage) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                            key: 5,
+                            label: "Storage"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_RunStorageChip, {
+                                "storage-stats": unref(storageStats),
+                                reports: __props.allReports,
+                                finalizing: __props.finalizing
+                              }, null, 8, ["storage-stats", "reports", "finalizing"])
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          createVNode(_component_MetaStripGroup, {
+                            label: "Links",
+                            icon: "i-lucide-link",
+                            help: "run.metadata"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_EntityLinks, {
+                                "entity-type": "test_run",
+                                "entity-id": __props.testRun.id,
+                                links: __props.testRun.links ?? null,
+                                onUpdated: ($event) => _ctx.$emit("label-updated")
+                              }, null, 8, ["entity-id", "links", "onUpdated"])
+                            ]),
+                            _: 1
+                          }),
+                          unref(customData) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                            key: 6,
+                            label: "Custom data"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_UButton, {
+                                size: "xs",
+                                variant: "ghost",
+                                color: "neutral",
+                                icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
+                                onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(" Custom data ")
+                                ]),
+                                _: 1
+                              }, 8, ["icon", "onClick"])
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true)
+                        ];
+                      }
+                    }),
+                    _: 1
+                  }, _parent3, _scopeId2));
+                  if (__props.showCustomData && unref(customData)) {
+                    _push3(`<div class="mt-2"${_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(unref(customData), null, 2))}</pre></div></div>`);
+                  } else {
+                    _push3(`<!---->`);
+                  }
+                } else {
+                  return [
+                    createVNode(_component_SummaryMetaStrip, null, {
+                      default: withCtx(() => [
+                        unref(showCiGroup) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 0,
+                          label: "CI & environment",
+                          icon: "i-lucide-cloud",
+                          help: "run.ci-env"
+                        }, {
+                          default: withCtx(() => [
+                            __props.testRun?.environment ? (openBlock(), createBlock("span", {
+                              key: 0,
+                              class: "rounded-full border border-default px-2 py-0.5 text-xs bg-elevated/60"
+                            }, toDisplayString(__props.testRun.environment), 1)) : createCommentVNode("", true),
+                            unref(ci)?.provider ? (openBlock(), createBlock("span", { key: 1 }, toDisplayString(unref(ci).provider), 1)) : createCommentVNode("", true),
+                            unref(ci)?.buildNumber || unref(ci)?.buildUrl ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                              createVNode("span", { class: "text-dimmed" }, "·"),
+                              unref(ci)?.buildUrl ? (openBlock(), createBlock("a", {
+                                key: 0,
+                                href: unref(ci).buildUrl,
+                                target: "_blank",
+                                class: "text-primary hover:underline"
+                              }, toDisplayString(unref(ci)?.buildNumber ? `Build #${unref(ci).buildNumber}` : "View build"), 9, ["href"])) : (openBlock(), createBlock("span", { key: 1 }, "Build #" + toDisplayString(unref(ci).buildNumber), 1))
+                            ], 64)) : createCommentVNode("", true),
+                            unref(ci)?.workflow || unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 3 }, [
+                              createVNode("span", { class: "text-dimmed" }, "·"),
+                              createVNode("span", { class: "text-muted" }, [
+                                unref(ci)?.workflow ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                  createTextVNode(toDisplayString(unref(ci).workflow), 1)
+                                ], 64)) : createCommentVNode("", true),
+                                unref(ci)?.workflow && unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                  createTextVNode(" · ")
+                                ], 64)) : createCommentVNode("", true),
+                                unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                  createTextVNode(toDisplayString(unref(ci).jobName), 1)
+                                ], 64)) : createCommentVNode("", true)
+                              ])
+                            ], 64)) : createCommentVNode("", true)
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        unref(scm) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 1,
+                          label: "Source",
+                          icon: "i-lucide-git-branch"
+                        }, {
+                          default: withCtx(() => [
+                            unref(scm).branch ? (openBlock(), createBlock("span", {
+                              key: 0,
+                              class: "font-medium"
+                            }, toDisplayString(unref(scm).branch), 1)) : createCommentVNode("", true),
+                            unref(scm).commit ? (openBlock(), createBlock("code", {
+                              key: 1,
+                              class: "text-xs font-mono bg-zinc-100 dark:bg-zinc-800 px-1 py-0.5 rounded",
+                              title: unref(scm).commit
+                            }, toDisplayString(unref(scm).commit.length >= 8 ? unref(scm).commit.substring(0, 8) : unref(scm).commit), 9, ["title"])) : createCommentVNode("", true),
+                            unref(scm).author ? (openBlock(), createBlock("span", {
+                              key: 2,
+                              class: "text-muted"
+                            }, toDisplayString(unref(scm).author), 1)) : createCommentVNode("", true),
+                            unref(scm).commitMessage ? (openBlock(), createBlock("span", {
+                              key: 3,
+                              class: "text-xs text-dimmed truncate max-w-[40ch]",
+                              title: unref(scm).commitMessage
+                            }, toDisplayString(unref(scm).commitMessage), 9, ["title"])) : createCommentVNode("", true)
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        unref(showVersions) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 2,
+                          label: "Tooling versions",
+                          icon: "i-lucide-tag"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode("span", { class: "text-muted whitespace-nowrap" }, [
+                              __props.testRun?.playwrightVersion ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                createTextVNode("Playwright v" + toDisplayString(__props.testRun.playwrightVersion), 1)
+                              ], 64)) : createCommentVNode("", true),
+                              __props.testRun?.playwrightVersion && __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                createTextVNode(" · ")
+                              ], 64)) : createCommentVNode("", true),
+                              __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                createTextVNode("Piwi v" + toDisplayString(__props.testRun.reporterVersion), 1)
+                              ], 64)) : createCommentVNode("", true)
+                            ])
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        unref(tags)?.length ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 3,
+                          label: "Tags",
+                          icon: "i-lucide-tags"
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createBlock(Fragment, null, renderList(unref(tags), (tag) => {
+                              return openBlock(), createBlock(_component_UBadge, {
+                                key: tag,
+                                color: "neutral",
+                                variant: "soft",
+                                size: "sm"
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(tag), 1)
+                                ]),
+                                _: 2
+                              }, 1024);
+                            }), 128))
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        __props.testRun?.metadata?.relatedIssue ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 4,
+                          label: "Related issue",
+                          icon: "i-lucide-bookmark"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode("span", { class: "text-muted" }, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        unref(showStorage) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 5,
+                          label: "Storage"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_RunStorageChip, {
+                              "storage-stats": unref(storageStats),
+                              reports: __props.allReports,
+                              finalizing: __props.finalizing
+                            }, null, 8, ["storage-stats", "reports", "finalizing"])
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        createVNode(_component_MetaStripGroup, {
+                          label: "Links",
+                          icon: "i-lucide-link",
+                          help: "run.metadata"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_EntityLinks, {
+                              "entity-type": "test_run",
+                              "entity-id": __props.testRun.id,
+                              links: __props.testRun.links ?? null,
+                              onUpdated: ($event) => _ctx.$emit("label-updated")
+                            }, null, 8, ["entity-id", "links", "onUpdated"])
+                          ]),
+                          _: 1
+                        }),
+                        unref(customData) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 6,
+                          label: "Custom data"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_UButton, {
+                              size: "xs",
+                              variant: "ghost",
+                              color: "neutral",
+                              icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
+                              onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(" Custom data ")
+                              ]),
+                              _: 1
+                            }, 8, ["icon", "onClick"])
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }),
+                    __props.showCustomData && unref(customData) ? (openBlock(), createBlock("div", {
+                      key: 0,
+                      class: "mt-2"
+                    }, [
+                      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(unref(customData), null, 2)), 1)
+                      ])
+                    ])) : createCommentVNode("", true)
+                  ];
+                }
+              }),
+              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
+                if (_push3) {
+                  _push3(`<div class="space-y-3"${_scopeId2}><div class="flex items-start justify-between gap-x-3 gap-y-2 flex-wrap pr-8"${_scopeId2}><div class="min-w-0 flex-1 basis-64"${_scopeId2}><div class="flex items-center gap-2 flex-wrap"${_scopeId2}>`);
+                  _push3(ssrRenderComponent(_component_StatusChip, {
+                    status: __props.testRun?.status ?? ""
+                  }, null, _parent3, _scopeId2));
+                  _push3(`<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-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-zinc-400 animate-spin shrink-0"
+                      }, null, _parent3, _scopeId2));
+                    } else {
+                      _push3(`<!---->`);
+                    }
+                    _push3(`<!--]-->`);
+                  } else {
+                    _push3(`<!--[-->`);
+                    if (__props.testRun?.label) {
+                      _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-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(`<!--]-->`);
+                  }
+                  _push3(ssrRenderComponent(_component_HelpHint, { topic: "run.summary" }, null, _parent3, _scopeId2));
+                  _push3(`</h2>`);
+                  if (__props.testRun?.shardTotal && __props.testRun.shardTotal > 1) {
+                    _push3(ssrRenderComponent(_component_UBadge, {
+                      color: "neutral",
+                      variant: "soft",
+                      size: "sm",
+                      class: "shrink-0",
+                      title: `Shard ${__props.testRun.shardsFinished ?? 0}/${__props.testRun.shardTotal}`
+                    }, {
+                      default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                        if (_push4) {
+                          _push4(ssrRenderComponent(_component_UIcon, {
+                            name: "i-lucide-layout-grid",
+                            class: "size-3 mr-1"
+                          }, null, _parent4, _scopeId3));
+                          _push4(` ${ssrInterpolate(__props.testRun.shardsFinished ?? 0)}/${ssrInterpolate(__props.testRun.shardTotal)}`);
+                        } else {
+                          return [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-layout-grid",
+                              class: "size-3 mr-1"
+                            }),
+                            createTextVNode(" " + toDisplayString(__props.testRun.shardsFinished ?? 0) + "/" + toDisplayString(__props.testRun.shardTotal), 1)
+                          ];
+                        }
+                      }),
+                      _: 1
+                    }, _parent3, _scopeId2));
+                  } else {
+                    _push3(`<!---->`);
+                  }
+                  if (__props.testRun?.precedingMarker) {
+                    _push3(ssrRenderComponent(_component_UTooltip, {
+                      text: `This run started after: ${__props.testRun.precedingMarker.label}`
+                    }, {
+                      default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                        if (_push4) {
+                          _push4(ssrRenderComponent(_component_NuxtLink, {
+                            to: `/projects/${__props.testRun.projectId}?tab=timeline`,
+                            class: "shrink-0 inline-flex items-center gap-1"
+                          }, {
+                            default: withCtx((_4, _push5, _parent5, _scopeId4) => {
+                              if (_push5) {
+                                _push5(`<span class="text-xs text-muted"${_scopeId4}>After</span>`);
+                                _push5(ssrRenderComponent(_component_MarkerBadge, {
+                                  marker: __props.testRun.precedingMarker,
+                                  size: "xs"
+                                }, null, _parent5, _scopeId4));
+                              } else {
+                                return [
+                                  createVNode("span", { class: "text-xs text-muted" }, "After"),
+                                  createVNode(_component_MarkerBadge, {
+                                    marker: __props.testRun.precedingMarker,
+                                    size: "xs"
+                                  }, null, 8, ["marker"])
+                                ];
+                              }
+                            }),
+                            _: 1
+                          }, _parent4, _scopeId3));
+                        } else {
+                          return [
+                            createVNode(_component_NuxtLink, {
+                              to: `/projects/${__props.testRun.projectId}?tab=timeline`,
+                              class: "shrink-0 inline-flex items-center gap-1"
+                            }, {
+                              default: withCtx(() => [
+                                createVNode("span", { class: "text-xs text-muted" }, "After"),
+                                createVNode(_component_MarkerBadge, {
+                                  marker: __props.testRun.precedingMarker,
+                                  size: "xs"
+                                }, null, 8, ["marker"])
+                              ]),
+                              _: 1
+                            }, 8, ["to"])
+                          ];
+                        }
+                      }),
+                      _: 1
+                    }, _parent3, _scopeId2));
+                  } else {
+                    _push3(`<!---->`);
+                  }
+                  _push3(`</div><p class="mt-1 text-xs text-muted flex items-center gap-1.5 flex-wrap"${_scopeId2}><span${_scopeId2}>Started ${ssrInterpolate(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime))}</span>`);
+                  _push3(ssrRenderComponent(_component_ClientOnly, null, {}, _parent3, _scopeId2));
+                  _push3(`</p></div><div class="flex items-center gap-1.5 shrink-0"${_scopeId2}>`);
+                  _push3(ssrRenderComponent(_component_UTooltip, {
+                    text: unref(copied) ? "Copied!" : "Copy run summary"
+                  }, {
+                    default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                      if (_push4) {
+                        _push4(ssrRenderComponent(_component_UButton, {
                           size: "xs",
                           variant: "ghost",
                           color: "neutral",
                           icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                          class: "shrink-0 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
+                          "aria-label": "Copy run summary",
+                          class: "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 {
@@ -569,7 +1454,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                             variant: "ghost",
                             color: "neutral",
                             icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                            class: "shrink-0 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300",
+                            "aria-label": "Copy run summary",
+                            class: "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"])
                         ];
@@ -609,14 +1495,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                             variant: "subtle",
                             icon: unref(retryCopied) ? "i-lucide-check" : "i-lucide-play",
                             title: unref(retryTitle),
+                            "aria-label": "Retry",
                             onClick: ($event) => copyRetryCommand()
                           }, {
                             default: withCtx((_4, _push5, _parent5, _scopeId4) => {
                               if (_push5) {
-                                _push5(` Retry `);
+                                _push5(`<span class="hidden @2xl:inline"${_scopeId4}>Retry</span>`);
                               } else {
                                 return [
-                                  createTextVNode(" Retry ")
+                                  createVNode("span", { class: "hidden @2xl:inline" }, "Retry")
                                 ];
                               }
                             }),
@@ -630,10 +1517,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                               variant: "subtle",
                               icon: unref(retryCopied) ? "i-lucide-check" : "i-lucide-play",
                               title: unref(retryTitle),
+                              "aria-label": "Retry",
                               onClick: ($event) => copyRetryCommand()
                             }, {
                               default: withCtx(() => [
-                                createTextVNode(" Retry ")
+                                createVNode("span", { class: "hidden @2xl:inline" }, "Retry")
                               ]),
                               _: 1
                             }, 8, ["icon", "title", "onClick"])
@@ -645,38 +1533,151 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   } else {
                     _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-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-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-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",
-                      "absolute top-1.5 right-1.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none tabular-nums transition-colors cursor-pointer"
-                    ])}" title="Flaky — passed only after a retry (a subset of passed). Click to filter."${_scopeId2}>`);
-                    _push3(ssrRenderComponent(_component_UIcon, {
-                      name: "i-lucide-shuffle",
-                      class: "size-3"
+                  if (unref(failedCases).length > 0) {
+                    _push3(ssrRenderComponent(_component_DesktopRunLocallyButton, {
+                      "project-id": __props.testRun?.project?.id,
+                      "project-label": __props.testRun?.project?.label ?? __props.testRun?.project?.name,
+                      cases: unref(failedCases)
                     }, null, _parent3, _scopeId2));
-                    _push3(` ${ssrInterpolate(__props.testRun?.flakyTests ?? 0)}</button>`);
                   } else {
                     _push3(`<!---->`);
                   }
-                  _push3(`</div><button class="${ssrRenderClass([
-                    __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-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-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}>`);
+                  if (unref(primaryReport)) {
+                    _push3(ssrRenderComponent(_component_UButton, {
+                      href: ("fileApiUrl" in _ctx ? _ctx.fileApiUrl : unref(fileApiUrl))(unref(primaryReport).path, null, unref(config).app?.baseURL),
+                      icon: ("reportIcon" in _ctx ? _ctx.reportIcon : unref(reportIcon))(unref(primaryReport).type),
+                      target: "_blank",
+                      size: "xs",
+                      color: "primary",
+                      variant: "outline",
+                      "aria-label": unref(primaryReport).label,
+                      title: unref(primaryReport).size ? `${unref(primaryReport).label} · ${("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(primaryReport).size)}` : unref(primaryReport).label
+                    }, {
+                      default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                        if (_push4) {
+                          _push4(`<span class="hidden @2xl:inline"${_scopeId3}>${ssrInterpolate(unref(primaryReport).label)}</span>`);
+                        } else {
+                          return [
+                            createVNode("span", { class: "hidden @2xl:inline" }, toDisplayString(unref(primaryReport).label), 1)
+                          ];
+                        }
+                      }),
+                      _: 1
+                    }, _parent3, _scopeId2));
+                  } else {
+                    _push3(`<!---->`);
+                  }
+                  _push3(`</div></div>`);
+                  _push3(ssrRenderComponent(_component_StatTileGrid, { "min-tile-width": "7.5rem" }, {
+                    default: withCtx((_3, _push4, _parent4, _scopeId3) => {
+                      if (_push4) {
+                        _push4(`<button class="${ssrRenderClass([
+                          __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"
+                        ])}"${_scopeId3}><p class="text-xs font-medium text-zinc-500 uppercase tracking-wider"${_scopeId3}>Total</p><p class="text-xl font-bold mt-0.5"${_scopeId3}>${ssrInterpolate(__props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0)}</p></button><div class="relative"${_scopeId3}><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"
+                        ])}"${_scopeId3}><p class="text-xs font-medium text-emerald-700 dark:text-emerald-400 uppercase tracking-wider"${_scopeId3}> Passed </p><p class="text-xl font-bold mt-0.5 text-emerald-600 dark:text-emerald-400"${_scopeId3}>${ssrInterpolate(__props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0)}</p></button>`);
+                        if ((__props.testRun?.flakyTests ?? 0) > 0) {
+                          _push4(`<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",
+                            "absolute top-1.5 right-1.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none tabular-nums transition-colors cursor-pointer"
+                          ])}" title="Flaky — passed only after a retry (a subset of passed). Click to filter."${_scopeId3}>`);
+                          _push4(ssrRenderComponent(_component_UIcon, {
+                            name: "i-lucide-shuffle",
+                            class: "size-3"
+                          }, null, _parent4, _scopeId3));
+                          _push4(` ${ssrInterpolate(__props.testRun?.flakyTests ?? 0)}</button>`);
+                        } else {
+                          _push4(`<!---->`);
+                        }
+                        _push4(`</div><button class="${ssrRenderClass([
+                          __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"
+                        ])}"${_scopeId3}><p class="text-xs font-medium text-rose-700 dark:text-rose-400 uppercase tracking-wider"${_scopeId3}>Failed</p><p class="text-xl font-bold mt-0.5 text-rose-600 dark:text-rose-400"${_scopeId3}>${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"
+                        ])}"${_scopeId3}><p class="text-xs font-medium text-zinc-500 uppercase tracking-wider"${_scopeId3}>Skipped</p><p class="text-xl font-bold mt-0.5 text-zinc-600 dark:text-zinc-400"${_scopeId3}>${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)"${_scopeId3}><p class="text-xs font-medium text-amber-700 dark:text-amber-400 uppercase tracking-wider"${_scopeId3}>Didn&#39;t run</p><p class="text-xl font-bold mt-0.5 text-amber-600 dark:text-amber-400"${_scopeId3}>${ssrInterpolate(__props.testRun?.didNotRunTests ?? 0)}</p></button>`);
+                      } else {
+                        return [
+                          createVNode("button", {
+                            class: [
+                              "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
+                              __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-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-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-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,
+                              class: [
+                                "absolute top-1.5 right-1.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none tabular-nums transition-colors cursor-pointer",
+                                __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"
+                              ],
+                              title: "Flaky — passed only after a retry (a subset of passed). Click to filter.",
+                              onClick: ($event) => emit("filter-status", "flaky")
+                            }, [
+                              createVNode(_component_UIcon, {
+                                name: "i-lucide-shuffle",
+                                class: "size-3"
+                              }),
+                              createTextVNode(" " + toDisplayString(__props.testRun?.flakyTests ?? 0), 1)
+                            ], 10, ["onClick"])) : createCommentVNode("", true)
+                          ]),
+                          createVNode("button", {
+                            class: [
+                              "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
+                              __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-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-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-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: [
+                              "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
+                              __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"
+                            ],
+                            title: "Tests that never ran (maxFailures cutoff or a serial-group failure)",
+                            onClick: ($event) => emit("filter-status", "didnotrun")
+                          }, [
+                            createVNode("p", { class: "text-xs font-medium text-amber-700 dark:text-amber-400 uppercase tracking-wider" }, "Didn't run"),
+                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-amber-600 dark:text-amber-400" }, toDisplayString(__props.testRun?.didNotRunTests ?? 0), 1)
+                          ], 10, ["onClick"])
+                        ];
+                      }
+                    }),
+                    _: 1
+                  }, _parent3, _scopeId2));
                   if (__props.testRun) {
-                    _push3(`<div class="flex items-center gap-3"${_scopeId2}><div class="flex-1 max-w-md"${_scopeId2}>`);
+                    _push3(`<div class="flex items-center gap-x-4 gap-y-1.5 flex-wrap"${_scopeId2}><div class="flex-1 basis-60 min-w-44 max-w-xl"${_scopeId2}>`);
                     _push3(ssrRenderComponent(_component_TestStatusBar, {
                       passed: __props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0,
                       failed: __props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0,
@@ -685,7 +1686,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                       "did-not-run": __props.testRun?.didNotRunTests ?? 0,
                       total: __props.displayProgress?.totalTests ?? __props.testRun?.totalTests ?? 0
                     }, null, _parent3, _scopeId2));
-                    _push3(`</div><div class="flex items-center gap-3 text-xs shrink-0"${_scopeId2}><div class="flex items-center gap-1"${_scopeId2}>`);
+                    _push3(`</div><div class="flex items-center flex-wrap gap-x-3 gap-y-1 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-zinc-400"
@@ -701,7 +1702,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                         name: "i-lucide-gauge",
                         class: "size-3.5 text-zinc-400"
                       }, null, _parent3, _scopeId2));
-                      _push3(`<span class="text-zinc-500 hidden sm:inline"${_scopeId2}>Avg</span>`);
+                      _push3(`<span class="text-zinc-500"${_scopeId2}>Avg</span>`);
                       _push3(ssrRenderComponent(_component_DurationValue, {
                         ms: __props.testRun.avgTestDuration,
                         class: "font-medium"
@@ -716,7 +1717,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                         name: "i-lucide-arrow-up-right",
                         class: "size-3.5 text-orange-500"
                       }, null, _parent3, _scopeId2));
-                      _push3(`<span class="text-zinc-500 hidden sm:inline"${_scopeId2}>P90</span>`);
+                      _push3(`<span class="text-zinc-500"${_scopeId2}>P90</span>`);
                       _push3(ssrRenderComponent(_component_DurationValue, {
                         ms: __props.testRun.p90TestDuration,
                         class: "font-medium text-orange-600 dark:text-orange-400",
@@ -732,7 +1733,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                         name: "i-lucide-clock",
                         class: "size-3.5 text-amber-500"
                       }, null, _parent3, _scopeId2));
-                      _push3(`<span class="text-zinc-500 hidden sm:inline"${_scopeId2}>Wasted</span>`);
+                      _push3(`<span class="text-zinc-500"${_scopeId2}>Wasted</span>`);
                       _push3(ssrRenderComponent(_component_DurationValue, {
                         ms: __props.totalWastedTime,
                         class: "font-medium text-amber-600 dark:text-amber-400",
@@ -746,283 +1747,315 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   } else {
                     _push3(`<!---->`);
                   }
-                  _push3(`</div></div>`);
+                  _push3(`</div>`);
                 } else {
                   return [
                     createVNode("div", { class: "space-y-3" }, [
-                      createVNode("div", { class: "flex items-start gap-3" }, [
-                        createVNode("div", { class: "flex items-center gap-2.5 min-w-0 flex-1" }, [
-                          createVNode(_component_StatusBlock, {
-                            status: __props.testRun?.status ?? "",
-                            size: "md"
-                          }, null, 8, ["status"]),
-                          createVNode("div", { class: "min-w-0 flex-1" }, [
-                            createVNode("div", { class: "flex items-center gap-2" }, [
-                              createVNode("h2", { class: "text-base font-bold shrink-0 flex items-center gap-1" }, [
-                                createTextVNode(" Run #" + toDisplayString(__props.testRun?.id) + " ", 1),
-                                unref(editingLabel) ? (openBlock(), createBlock(Fragment, { key: 0 }, [
-                                  withDirectives(createVNode("input", {
-                                    ref_key: "labelInputRef",
-                                    ref: labelInputRef,
-                                    "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-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
-                                    onKeydown: onLabelKeydown,
-                                    onBlur: saveLabel
-                                  }, null, 40, ["onUpdate:modelValue"]), [
-                                    [vModelText, unref(labelInput)]
+                      createVNode("div", { class: "flex items-start justify-between gap-x-3 gap-y-2 flex-wrap pr-8" }, [
+                        createVNode("div", { class: "min-w-0 flex-1 basis-64" }, [
+                          createVNode("div", { class: "flex items-center gap-2 flex-wrap" }, [
+                            createVNode(_component_StatusChip, {
+                              status: __props.testRun?.status ?? ""
+                            }, null, 8, ["status"]),
+                            createVNode("h2", { class: "text-base font-bold shrink-0 flex items-center gap-1" }, [
+                              createTextVNode(" Run #" + toDisplayString(__props.testRun?.id) + " ", 1),
+                              unref(editingLabel) ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                withDirectives(createVNode("input", {
+                                  ref_key: "labelInputRef",
+                                  ref: labelInputRef,
+                                  "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-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
+                                  onKeydown: onLabelKeydown,
+                                  onBlur: saveLabel
+                                }, null, 40, ["onUpdate:modelValue"]), [
+                                  [vModelText, unref(labelInput)]
+                                ]),
+                                unref(savingLabel) ? (openBlock(), createBlock(_component_UIcon, {
+                                  key: 0,
+                                  name: "i-lucide-loader-circle",
+                                  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-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-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 "))
+                              ], 64)),
+                              createVNode(_component_HelpHint, { topic: "run.summary" })
+                            ]),
+                            __props.testRun?.shardTotal && __props.testRun.shardTotal > 1 ? (openBlock(), createBlock(_component_UBadge, {
+                              key: 0,
+                              color: "neutral",
+                              variant: "soft",
+                              size: "sm",
+                              class: "shrink-0",
+                              title: `Shard ${__props.testRun.shardsFinished ?? 0}/${__props.testRun.shardTotal}`
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_component_UIcon, {
+                                  name: "i-lucide-layout-grid",
+                                  class: "size-3 mr-1"
+                                }),
+                                createTextVNode(" " + toDisplayString(__props.testRun.shardsFinished ?? 0) + "/" + toDisplayString(__props.testRun.shardTotal), 1)
+                              ]),
+                              _: 1
+                            }, 8, ["title"])) : createCommentVNode("", true),
+                            __props.testRun?.precedingMarker ? (openBlock(), createBlock(_component_UTooltip, {
+                              key: 1,
+                              text: `This run started after: ${__props.testRun.precedingMarker.label}`
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_component_NuxtLink, {
+                                  to: `/projects/${__props.testRun.projectId}?tab=timeline`,
+                                  class: "shrink-0 inline-flex items-center gap-1"
+                                }, {
+                                  default: withCtx(() => [
+                                    createVNode("span", { class: "text-xs text-muted" }, "After"),
+                                    createVNode(_component_MarkerBadge, {
+                                      marker: __props.testRun.precedingMarker,
+                                      size: "xs"
+                                    }, null, 8, ["marker"])
                                   ]),
-                                  unref(savingLabel) ? (openBlock(), createBlock(_component_UIcon, {
-                                    key: 0,
-                                    name: "i-lucide-loader-circle",
-                                    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-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-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 "))
-                                ], 64)),
-                                createVNode(_component_HelpHint, { topic: "run.summary" })
+                                  _: 1
+                                }, 8, ["to"])
                               ]),
-                              __props.testRun?.shardTotal && __props.testRun.shardTotal > 1 ? (openBlock(), createBlock(_component_UBadge, {
-                                key: 0,
+                              _: 1
+                            }, 8, ["text"])) : createCommentVNode("", true)
+                          ]),
+                          createVNode("p", { class: "mt-1 text-xs text-muted flex items-center gap-1.5 flex-wrap" }, [
+                            createVNode("span", null, "Started " + toDisplayString(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime)), 1),
+                            createVNode(_component_ClientOnly, null, {
+                              default: withCtx(() => [
+                                createVNode("span", { class: "text-dimmed" }, "· " + toDisplayString(("formatRelativeTime" in _ctx ? _ctx.formatRelativeTime : unref(formatRelativeTime))(__props.testRun?.startTime)), 1)
+                              ]),
+                              _: 1
+                            })
+                          ])
+                        ]),
+                        createVNode("div", { class: "flex items-center gap-1.5 shrink-0" }, [
+                          createVNode(_component_UTooltip, {
+                            text: unref(copied) ? "Copied!" : "Copy run summary"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_UButton, {
+                                size: "xs",
+                                variant: "ghost",
                                 color: "neutral",
-                                variant: "soft",
-                                size: "sm",
-                                class: "shrink-0",
-                                title: `Shard ${__props.testRun.shardsFinished ?? 0}/${__props.testRun.shardTotal}`
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(_component_UIcon, {
-                                    name: "i-lucide-layout-grid",
-                                    class: "size-3 mr-1"
-                                  }),
-                                  createTextVNode(" " + toDisplayString(__props.testRun.shardsFinished ?? 0) + "/" + toDisplayString(__props.testRun.shardTotal), 1)
-                                ]),
-                                _: 1
-                              }, 8, ["title"])) : createCommentVNode("", true),
-                              __props.testRun?.precedingMarker ? (openBlock(), createBlock(_component_UTooltip, {
-                                key: 1,
-                                text: `This run started after: ${__props.testRun.precedingMarker.label}`
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(_component_NuxtLink, {
-                                    to: `/projects/${__props.testRun.projectId}?tab=timeline`,
-                                    class: "shrink-0 inline-flex items-center gap-1"
-                                  }, {
-                                    default: withCtx(() => [
-                                      createVNode("span", { class: "text-xs text-muted" }, "After"),
-                                      createVNode(_component_MarkerBadge, {
-                                        marker: __props.testRun.precedingMarker,
-                                        size: "xs"
-                                      }, null, 8, ["marker"])
-                                    ]),
-                                    _: 1
-                                  }, 8, ["to"])
-                                ]),
-                                _: 1
-                              }, 8, ["text"])) : createCommentVNode("", true),
-                              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"
+                                icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
+                                "aria-label": "Copy run summary",
+                                class: "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"])
+                            ]),
+                            _: 1
+                          }, 8, ["text"]),
+                          unref(failedCases).length > 0 ? (openBlock(), createBlock(_component_UPopover, { key: 0 }, {
+                            content: withCtx(() => [
+                              createVNode("div", { class: "p-2 space-y-1 min-w-32" }, [
+                                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-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))
+                              ])
+                            ]),
+                            default: withCtx(() => [
+                              createVNode(_component_UButton, {
+                                size: "xs",
+                                color: "warning",
+                                variant: "subtle",
+                                icon: unref(retryCopied) ? "i-lucide-check" : "i-lucide-play",
+                                title: unref(retryTitle),
+                                "aria-label": "Retry",
+                                onClick: ($event) => copyRetryCommand()
                               }, {
                                 default: withCtx(() => [
-                                  createVNode(_component_UButton, {
-                                    size: "xs",
-                                    variant: "ghost",
-                                    color: "neutral",
-                                    icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                                    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"])
-                                ]),
-                                _: 1
-                              }, 8, ["text"]),
-                              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-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-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))
-                                  ])
-                                ]),
-                                default: withCtx(() => [
-                                  createVNode(_component_UButton, {
-                                    size: "xs",
-                                    color: "warning",
-                                    variant: "subtle",
-                                    icon: unref(retryCopied) ? "i-lucide-check" : "i-lucide-play",
-                                    title: unref(retryTitle),
-                                    onClick: ($event) => copyRetryCommand()
-                                  }, {
-                                    default: withCtx(() => [
-                                      createTextVNode(" Retry ")
-                                    ]),
-                                    _: 1
-                                  }, 8, ["icon", "title", "onClick"])
+                                  createVNode("span", { class: "hidden @2xl:inline" }, "Retry")
                                 ]),
                                 _: 1
-                              })) : createCommentVNode("", true)
-                            ])
-                          ])
+                              }, 8, ["icon", "title", "onClick"])
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          unref(failedCases).length > 0 ? (openBlock(), createBlock(_component_DesktopRunLocallyButton, {
+                            key: 1,
+                            "project-id": __props.testRun?.project?.id,
+                            "project-label": __props.testRun?.project?.label ?? __props.testRun?.project?.name,
+                            cases: unref(failedCases)
+                          }, null, 8, ["project-id", "project-label", "cases"])) : createCommentVNode("", true),
+                          unref(primaryReport) ? (openBlock(), createBlock(_component_UButton, {
+                            key: 2,
+                            href: ("fileApiUrl" in _ctx ? _ctx.fileApiUrl : unref(fileApiUrl))(unref(primaryReport).path, null, unref(config).app?.baseURL),
+                            icon: ("reportIcon" in _ctx ? _ctx.reportIcon : unref(reportIcon))(unref(primaryReport).type),
+                            target: "_blank",
+                            size: "xs",
+                            color: "primary",
+                            variant: "outline",
+                            "aria-label": unref(primaryReport).label,
+                            title: unref(primaryReport).size ? `${unref(primaryReport).label} · ${("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(primaryReport).size)}` : unref(primaryReport).label
+                          }, {
+                            default: withCtx(() => [
+                              createVNode("span", { class: "hidden @2xl:inline" }, toDisplayString(unref(primaryReport).label), 1)
+                            ]),
+                            _: 1
+                          }, 8, ["href", "icon", "aria-label", "title"])) : createCommentVNode("", true)
                         ])
                       ]),
-                      createVNode("div", { class: "grid grid-cols-3 sm:grid-cols-5 gap-2" }, [
-                        createVNode("button", {
-                          class: [
-                            "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                            __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-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(_component_StatTileGrid, { "min-tile-width": "7.5rem" }, {
+                        default: withCtx(() => [
                           createVNode("button", {
                             class: [
-                              "rounded-lg p-3 text-left w-full h-full transition-colors cursor-pointer",
-                              __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 transition-colors cursor-pointer",
+                              __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", "passed")
+                            onClick: ($event) => emit("filter-status", "all")
                           }, [
-                            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)
+                            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"]),
-                          (__props.testRun?.flakyTests ?? 0) > 0 ? (openBlock(), createBlock("button", {
-                            key: 0,
+                          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-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-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,
+                              class: [
+                                "absolute top-1.5 right-1.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none tabular-nums transition-colors cursor-pointer",
+                                __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"
+                              ],
+                              title: "Flaky — passed only after a retry (a subset of passed). Click to filter.",
+                              onClick: ($event) => emit("filter-status", "flaky")
+                            }, [
+                              createVNode(_component_UIcon, {
+                                name: "i-lucide-shuffle",
+                                class: "size-3"
+                              }),
+                              createTextVNode(" " + toDisplayString(__props.testRun?.flakyTests ?? 0), 1)
+                            ], 10, ["onClick"])) : createCommentVNode("", true)
+                          ]),
+                          createVNode("button", {
+                            class: [
+                              "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
+                              __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-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-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-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: [
-                              "absolute top-1.5 right-1.5 inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-xs font-semibold leading-none tabular-nums transition-colors cursor-pointer",
-                              __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"
+                              "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
+                              __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"
                             ],
-                            title: "Flaky — passed only after a retry (a subset of passed). Click to filter.",
-                            onClick: ($event) => emit("filter-status", "flaky")
+                            title: "Tests that never ran (maxFailures cutoff or a serial-group failure)",
+                            onClick: ($event) => emit("filter-status", "didnotrun")
                           }, [
+                            createVNode("p", { class: "text-xs font-medium text-amber-700 dark:text-amber-400 uppercase tracking-wider" }, "Didn't run"),
+                            createVNode("p", { class: "text-xl font-bold mt-0.5 text-amber-600 dark:text-amber-400" }, toDisplayString(__props.testRun?.didNotRunTests ?? 0), 1)
+                          ], 10, ["onClick"])
+                        ]),
+                        _: 1
+                      }),
+                      __props.testRun ? (openBlock(), createBlock("div", {
+                        key: 0,
+                        class: "flex items-center gap-x-4 gap-y-1.5 flex-wrap"
+                      }, [
+                        createVNode("div", { class: "flex-1 basis-60 min-w-44 max-w-xl" }, [
+                          createVNode(_component_TestStatusBar, {
+                            passed: __props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0,
+                            failed: __props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0,
+                            skipped: __props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0,
+                            flaky: __props.testRun?.flakyTests ?? 0,
+                            "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("div", { class: "flex items-center flex-wrap gap-x-3 gap-y-1 text-xs shrink-0" }, [
+                          createVNode("div", { class: "flex items-center gap-1" }, [
                             createVNode(_component_UIcon, {
-                              name: "i-lucide-shuffle",
-                              class: "size-3"
+                              name: "i-lucide-clock",
+                              class: "size-3.5 text-zinc-400"
                             }),
-                            createTextVNode(" " + toDisplayString(__props.testRun?.flakyTests ?? 0), 1)
-                          ], 10, ["onClick"])) : createCommentVNode("", true)
-                        ]),
-                        createVNode("button", {
-                          class: [
-                            "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                            __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-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-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-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: [
-                            "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
-                            __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"
-                          ],
-                          title: "Tests that never ran (maxFailures cutoff or a serial-group failure)",
-                          onClick: ($event) => emit("filter-status", "didnotrun")
-                        }, [
-                          createVNode("p", { class: "text-xs font-medium text-amber-700 dark:text-amber-400 uppercase tracking-wider" }, " Didn't run "),
-                          createVNode("p", { class: "text-xl font-bold mt-0.5 text-amber-600 dark:text-amber-400" }, toDisplayString(__props.testRun?.didNotRunTests ?? 0), 1)
-                        ], 10, ["onClick"])
-                      ]),
-                      createVNode("div", null, [
-                        __props.testRun ? (openBlock(), createBlock("div", {
-                          key: 0,
-                          class: "flex items-center gap-3"
-                        }, [
-                          createVNode("div", { class: "flex-1 max-w-md" }, [
-                            createVNode(_component_TestStatusBar, {
-                              passed: __props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0,
-                              failed: __props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0,
-                              skipped: __props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0,
-                              flaky: __props.testRun?.flakyTests ?? 0,
-                              "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(_component_DurationValue, {
+                              ms: __props.testRun?.duration,
+                              class: "font-medium"
+                            }, null, 8, ["ms"])
                           ]),
-                          createVNode("div", { class: "flex items-center gap-3 text-xs shrink-0" }, [
-                            createVNode("div", { class: "flex items-center gap-1" }, [
-                              createVNode(_component_UIcon, {
-                                name: "i-lucide-clock",
-                                class: "size-3.5 text-zinc-400"
-                              }),
-                              createVNode(_component_DurationValue, {
-                                ms: __props.testRun?.duration,
-                                class: "font-medium"
-                              }, null, 8, ["ms"])
-                            ]),
-                            __props.testRun?.avgTestDuration ? (openBlock(), createBlock("div", {
-                              key: 0,
-                              class: "flex items-center gap-1"
-                            }, [
-                              createVNode(_component_UIcon, {
-                                name: "i-lucide-gauge",
-                                class: "size-3.5 text-zinc-400"
-                              }),
-                              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,
-                              class: "flex items-center gap-1"
-                            }, [
-                              createVNode(_component_UIcon, {
-                                name: "i-lucide-arrow-up-right",
-                                class: "size-3.5 text-orange-500"
-                              }),
-                              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,
-                              class: "flex items-center gap-1"
-                            }, [
-                              createVNode(_component_UIcon, {
-                                name: "i-lucide-clock",
-                                class: "size-3.5 text-amber-500"
-                              }),
-                              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)
-                      ])
+                          __props.testRun?.avgTestDuration ? (openBlock(), createBlock("div", {
+                            key: 0,
+                            class: "flex items-center gap-1"
+                          }, [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-gauge",
+                              class: "size-3.5 text-zinc-400"
+                            }),
+                            createVNode("span", { class: "text-zinc-500" }, "Avg"),
+                            createVNode(_component_DurationValue, {
+                              ms: __props.testRun.avgTestDuration,
+                              class: "font-medium"
+                            }, null, 8, ["ms"])
+                          ])) : createCommentVNode("", true),
+                          __props.testRun?.p90TestDuration ? (openBlock(), createBlock("div", {
+                            key: 1,
+                            class: "flex items-center gap-1"
+                          }, [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-arrow-up-right",
+                              class: "size-3.5 text-orange-500"
+                            }),
+                            createVNode("span", { class: "text-zinc-500" }, "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,
+                            class: "flex items-center gap-1"
+                          }, [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-clock",
+                              class: "size-3.5 text-amber-500"
+                            }),
+                            createVNode("span", { class: "text-zinc-500" }, "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)
                     ])
                   ];
                 }
@@ -1030,238 +2063,108 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               _: 1
             }, _parent2, _scopeId));
             _push2(`</div>`);
-            if (unref(showCiEnv)) {
-              _push2(ssrRenderComponent(_component_CiEnvCard, {
-                ci: __props.testRun?.metadata?.ci,
-                environment: __props.testRun?.environment,
-                "playwright-version": __props.testRun?.playwrightVersion,
-                "reporter-version": __props.testRun?.reporterVersion,
-                class: unref(blockColSpanClass)
-              }, null, _parent2, _scopeId));
-            } else {
-              _push2(`<!---->`);
-            }
-            if (unref(showSource)) {
-              _push2(ssrRenderComponent(_component_SourceInfoCard, {
-                scm: __props.testRun.metadata.scm,
-                class: unref(blockColSpanClass)
-              }, null, _parent2, _scopeId));
-            } else {
-              _push2(`<!---->`);
-            }
-            if (unref(showStorage)) {
-              _push2(ssrRenderComponent(_component_BlockCard, {
-                class: unref(blockColSpanClass),
-                title: "Storage",
-                icon: "i-lucide-database",
-                help: "run.reports",
-                subtitle: unref(storageStats)?.totalFiles ? `${unref(storageStats).totalFiles} files · ${("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).totalSize)}` : void 0
-              }, {
-                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
-                  if (_push3) {
-                    if (__props.finalizing) {
-                      _push3(`<div class="flex items-center gap-3"${_scopeId2}>`);
-                      _push3(ssrRenderComponent(_component_UIcon, {
-                        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-zinc-500"${_scopeId2}>Uploading reports &amp; traces…</span></div>`);
-                      _push3(ssrRenderComponent(_component_UProgress, {
-                        value: null,
-                        size: "sm",
-                        color: "info",
-                        class: "rounded-full animate-pulse"
-                      }, null, _parent3, _scopeId2));
-                      _push3(`</div></div>`);
-                    } else {
-                      _push3(`<!---->`);
-                    }
-                    if (unref(storageStats)?.totalFiles) {
-                      _push3(`<div class="space-y-1.5 text-sm"${_scopeId2}><!--[-->`);
-                      ssrRenderList(__props.allReports, (report) => {
-                        _push3(`<div class="flex items-center justify-between gap-2 min-w-0"${_scopeId2}>`);
-                        _push3(ssrRenderComponent(_component_UButton, {
-                          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",
-                          variant: "outline",
-                          class: "min-w-0",
-                          ui: { label: "truncate" }
-                        }, {
-                          default: withCtx((_3, _push4, _parent4, _scopeId3) => {
-                            if (_push4) {
-                              _push4(`${ssrInterpolate(report.label)}`);
-                            } else {
-                              return [
-                                createTextVNode(toDisplayString(report.label), 1)
-                              ];
-                            }
-                          }),
-                          _: 2
-                        }, _parent3, _scopeId2));
-                        _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-zinc-400 dark:text-zinc-500 shrink-0"${_scopeId2}>${ssrInterpolate(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize))}</span></div>`);
-                      } else {
-                        _push3(`<!---->`);
-                      }
-                      _push3(`</div>`);
-                    } else {
-                      _push3(`<!---->`);
-                    }
-                  } else {
-                    return [
-                      __props.finalizing ? (openBlock(), createBlock("div", {
-                        key: 0,
-                        class: "flex items-center gap-3"
-                      }, [
-                        createVNode(_component_UIcon, {
-                          name: "i-lucide-upload",
-                          class: "size-5 text-info shrink-0 animate-pulse"
-                        }),
-                        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-zinc-500" }, "Uploading reports & traces…")
-                          ]),
-                          createVNode(_component_UProgress, {
-                            value: null,
-                            size: "sm",
-                            color: "info",
-                            class: "rounded-full animate-pulse"
-                          })
-                        ])
-                      ])) : createCommentVNode("", true),
-                      unref(storageStats)?.totalFiles ? (openBlock(), createBlock("div", {
-                        key: 1,
-                        class: "space-y-1.5 text-sm"
-                      }, [
-                        (openBlock(true), createBlock(Fragment, null, renderList(__props.allReports, (report) => {
-                          return openBlock(), createBlock("div", {
-                            key: report.label,
-                            class: "flex items-center justify-between gap-2 min-w-0"
-                          }, [
-                            createVNode(_component_UButton, {
-                              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",
-                              variant: "outline",
-                              class: "min-w-0",
-                              ui: { label: "truncate" }
-                            }, {
-                              default: withCtx(() => [
-                                createTextVNode(toDisplayString(report.label), 1)
-                              ]),
-                              _: 2
-                            }, 1032, ["href", "icon"]),
-                            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", {
-                          key: 0,
-                          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-zinc-400 dark:text-zinc-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize)), 1)
-                        ])) : createCommentVNode("", true)
-                      ])) : createCommentVNode("", true)
-                    ];
-                  }
-                }),
-                _: 1
-              }, _parent2, _scopeId));
-            } else {
-              _push2(`<!---->`);
-            }
-            if (unref(showOther)) {
-              _push2(ssrRenderComponent(_component_BlockCard, {
-                class: unref(blockColSpanClass),
-                title: "Other",
-                icon: "i-lucide-tags",
-                help: "run.metadata"
-              }, {
-                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
-                  if (_push3) {
-                    _push3(`<div class="space-y-3 text-sm"${_scopeId2}>`);
-                    if (__props.testRun.metadata.tags && __props.testRun.metadata.tags.length > 0) {
-                      _push3(`<div${_scopeId2}><div class="flex flex-wrap gap-1.5"${_scopeId2}><!--[-->`);
-                      ssrRenderList(__props.testRun.metadata.tags, (tag) => {
-                        _push3(ssrRenderComponent(_component_UBadge, {
-                          key: tag,
-                          color: "neutral",
-                          variant: "soft",
-                          size: "sm"
-                        }, {
-                          default: withCtx((_3, _push4, _parent4, _scopeId3) => {
-                            if (_push4) {
-                              _push4(`${ssrInterpolate(tag)}`);
-                            } else {
-                              return [
-                                createTextVNode(toDisplayString(tag), 1)
-                              ];
-                            }
-                          }),
-                          _: 2
-                        }, _parent3, _scopeId2));
-                      });
-                      _push3(`<!--]--></div></div>`);
-                    } else {
-                      _push3(`<!---->`);
-                    }
-                    if (__props.testRun.metadata.relatedIssue) {
-                      _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-zinc-400 shrink-0"
-                      }, null, _parent3, _scopeId2));
-                      _push3(`<span${_scopeId2}>${ssrInterpolate(__props.testRun.metadata.relatedIssue)}</span></p>`);
-                    } else {
-                      _push3(`<!---->`);
-                    }
-                    _push3(ssrRenderComponent(_component_EntityLinks, {
-                      "entity-type": "test_run",
-                      "entity-id": __props.testRun.id,
-                      links: __props.testRun.links ?? null,
-                      onUpdated: ($event) => _ctx.$emit("label-updated")
-                    }, null, _parent3, _scopeId2));
-                    if (__props.testRun.metadata.customData) {
-                      _push3(ssrRenderComponent(_component_UButton, {
-                        size: "xs",
-                        variant: "ghost",
-                        color: "neutral",
-                        icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
-                        onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
-                      }, {
-                        default: withCtx((_3, _push4, _parent4, _scopeId3) => {
-                          if (_push4) {
-                            _push4(` Custom data `);
-                          } else {
-                            return [
-                              createTextVNode(" Custom data ")
-                            ];
-                          }
-                        }),
-                        _: 1
-                      }, _parent3, _scopeId2));
-                    } else {
-                      _push3(`<!---->`);
-                    }
-                    if (__props.showCustomData && __props.testRun.metadata.customData) {
-                      _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(`<!---->`);
-                    }
-                    _push3(`</div>`);
-                  } else {
-                    return [
-                      createVNode("div", { class: "space-y-3 text-sm" }, [
-                        __props.testRun.metadata.tags && __props.testRun.metadata.tags.length > 0 ? (openBlock(), createBlock("div", { key: 0 }, [
-                          createVNode("div", { class: "flex flex-wrap gap-1.5" }, [
-                            (openBlock(true), createBlock(Fragment, null, renderList(__props.testRun.metadata.tags, (tag) => {
+          } else {
+            return [
+              createVNode("div", { class: "@container" }, [
+                createVNode(_component_UCard, {
+                  class: "shadow-xs",
+                  ui: { footer: "px-4 py-2.5 sm:px-4 bg-muted/30" }
+                }, {
+                  footer: withCtx(() => [
+                    createVNode(_component_SummaryMetaStrip, null, {
+                      default: withCtx(() => [
+                        unref(showCiGroup) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 0,
+                          label: "CI & environment",
+                          icon: "i-lucide-cloud",
+                          help: "run.ci-env"
+                        }, {
+                          default: withCtx(() => [
+                            __props.testRun?.environment ? (openBlock(), createBlock("span", {
+                              key: 0,
+                              class: "rounded-full border border-default px-2 py-0.5 text-xs bg-elevated/60"
+                            }, toDisplayString(__props.testRun.environment), 1)) : createCommentVNode("", true),
+                            unref(ci)?.provider ? (openBlock(), createBlock("span", { key: 1 }, toDisplayString(unref(ci).provider), 1)) : createCommentVNode("", true),
+                            unref(ci)?.buildNumber || unref(ci)?.buildUrl ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                              createVNode("span", { class: "text-dimmed" }, "·"),
+                              unref(ci)?.buildUrl ? (openBlock(), createBlock("a", {
+                                key: 0,
+                                href: unref(ci).buildUrl,
+                                target: "_blank",
+                                class: "text-primary hover:underline"
+                              }, toDisplayString(unref(ci)?.buildNumber ? `Build #${unref(ci).buildNumber}` : "View build"), 9, ["href"])) : (openBlock(), createBlock("span", { key: 1 }, "Build #" + toDisplayString(unref(ci).buildNumber), 1))
+                            ], 64)) : createCommentVNode("", true),
+                            unref(ci)?.workflow || unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 3 }, [
+                              createVNode("span", { class: "text-dimmed" }, "·"),
+                              createVNode("span", { class: "text-muted" }, [
+                                unref(ci)?.workflow ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                  createTextVNode(toDisplayString(unref(ci).workflow), 1)
+                                ], 64)) : createCommentVNode("", true),
+                                unref(ci)?.workflow && unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                  createTextVNode(" · ")
+                                ], 64)) : createCommentVNode("", true),
+                                unref(ci)?.jobName ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                  createTextVNode(toDisplayString(unref(ci).jobName), 1)
+                                ], 64)) : createCommentVNode("", true)
+                              ])
+                            ], 64)) : createCommentVNode("", true)
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        unref(scm) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 1,
+                          label: "Source",
+                          icon: "i-lucide-git-branch"
+                        }, {
+                          default: withCtx(() => [
+                            unref(scm).branch ? (openBlock(), createBlock("span", {
+                              key: 0,
+                              class: "font-medium"
+                            }, toDisplayString(unref(scm).branch), 1)) : createCommentVNode("", true),
+                            unref(scm).commit ? (openBlock(), createBlock("code", {
+                              key: 1,
+                              class: "text-xs font-mono bg-zinc-100 dark:bg-zinc-800 px-1 py-0.5 rounded",
+                              title: unref(scm).commit
+                            }, toDisplayString(unref(scm).commit.length >= 8 ? unref(scm).commit.substring(0, 8) : unref(scm).commit), 9, ["title"])) : createCommentVNode("", true),
+                            unref(scm).author ? (openBlock(), createBlock("span", {
+                              key: 2,
+                              class: "text-muted"
+                            }, toDisplayString(unref(scm).author), 1)) : createCommentVNode("", true),
+                            unref(scm).commitMessage ? (openBlock(), createBlock("span", {
+                              key: 3,
+                              class: "text-xs text-dimmed truncate max-w-[40ch]",
+                              title: unref(scm).commitMessage
+                            }, toDisplayString(unref(scm).commitMessage), 9, ["title"])) : createCommentVNode("", true)
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        unref(showVersions) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 2,
+                          label: "Tooling versions",
+                          icon: "i-lucide-tag"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode("span", { class: "text-muted whitespace-nowrap" }, [
+                              __props.testRun?.playwrightVersion ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                createTextVNode("Playwright v" + toDisplayString(__props.testRun.playwrightVersion), 1)
+                              ], 64)) : createCommentVNode("", true),
+                              __props.testRun?.playwrightVersion && __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 1 }, [
+                                createTextVNode(" · ")
+                              ], 64)) : createCommentVNode("", true),
+                              __props.testRun?.reporterVersion ? (openBlock(), createBlock(Fragment, { key: 2 }, [
+                                createTextVNode("Piwi v" + toDisplayString(__props.testRun.reporterVersion), 1)
+                              ], 64)) : createCommentVNode("", true)
+                            ])
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        unref(tags)?.length ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 3,
+                          label: "Tags",
+                          icon: "i-lucide-tags"
+                        }, {
+                          default: withCtx(() => [
+                            (openBlock(true), createBlock(Fragment, null, renderList(unref(tags), (tag) => {
                               return openBlock(), createBlock(_component_UBadge, {
                                 key: tag,
                                 color: "neutral",
@@ -1274,190 +2177,244 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                                 _: 2
                               }, 1024);
                             }), 128))
-                          ])
-                        ])) : createCommentVNode("", true),
-                        __props.testRun.metadata.relatedIssue ? (openBlock(), createBlock("p", {
-                          key: 1,
-                          class: "flex items-center gap-1"
-                        }, [
-                          createVNode(_component_UIcon, {
-                            name: "i-lucide-link",
-                            class: "w-3.5 h-3.5 text-zinc-400 shrink-0"
-                          }),
-                          createVNode("span", null, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
-                        ])) : createCommentVNode("", true),
-                        createVNode(_component_EntityLinks, {
-                          "entity-type": "test_run",
-                          "entity-id": __props.testRun.id,
-                          links: __props.testRun.links ?? null,
-                          onUpdated: ($event) => _ctx.$emit("label-updated")
-                        }, null, 8, ["entity-id", "links", "onUpdated"]),
-                        __props.testRun.metadata.customData ? (openBlock(), createBlock(_component_UButton, {
-                          key: 2,
-                          size: "xs",
-                          variant: "ghost",
-                          color: "neutral",
-                          icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
-                          onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        __props.testRun?.metadata?.relatedIssue ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 4,
+                          label: "Related issue",
+                          icon: "i-lucide-bookmark"
                         }, {
                           default: withCtx(() => [
-                            createTextVNode(" Custom data ")
+                            createVNode("span", { class: "text-muted" }, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
                           ]),
                           _: 1
-                        }, 8, ["icon", "onClick"])) : createCommentVNode("", true),
-                        __props.showCustomData && __props.testRun.metadata.customData ? (openBlock(), createBlock("div", { key: 3 }, [
-                          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)
+                        })) : createCommentVNode("", true),
+                        unref(showStorage) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 5,
+                          label: "Storage"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_RunStorageChip, {
+                              "storage-stats": unref(storageStats),
+                              reports: __props.allReports,
+                              finalizing: __props.finalizing
+                            }, null, 8, ["storage-stats", "reports", "finalizing"])
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true),
+                        createVNode(_component_MetaStripGroup, {
+                          label: "Links",
+                          icon: "i-lucide-link",
+                          help: "run.metadata"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_EntityLinks, {
+                              "entity-type": "test_run",
+                              "entity-id": __props.testRun.id,
+                              links: __props.testRun.links ?? null,
+                              onUpdated: ($event) => _ctx.$emit("label-updated")
+                            }, null, 8, ["entity-id", "links", "onUpdated"])
+                          ]),
+                          _: 1
+                        }),
+                        unref(customData) ? (openBlock(), createBlock(_component_MetaStripGroup, {
+                          key: 6,
+                          label: "Custom data"
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(_component_UButton, {
+                              size: "xs",
+                              variant: "ghost",
+                              color: "neutral",
+                              icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
+                              onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(" Custom data ")
+                              ]),
+                              _: 1
+                            }, 8, ["icon", "onClick"])
+                          ]),
+                          _: 1
+                        })) : createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    }),
+                    __props.showCustomData && unref(customData) ? (openBlock(), createBlock("div", {
+                      key: 0,
+                      class: "mt-2"
+                    }, [
+                      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(unref(customData), null, 2)), 1)
                       ])
-                    ];
-                  }
-                }),
-                _: 1
-              }, _parent2, _scopeId));
-            } else {
-              _push2(`<!---->`);
-            }
-            _push2(`</div>`);
-          } else {
-            return [
-              createVNode("div", { class: "grid grid-cols-1 lg:grid-cols-12 gap-4" }, [
-                createVNode("div", { class: unref(summaryColSpanClass) }, [
-                  createVNode(_component_UCard, { class: "shadow-xs h-full" }, {
-                    default: withCtx(() => [
-                      createVNode("div", { class: "space-y-3" }, [
-                        createVNode("div", { class: "flex items-start gap-3" }, [
-                          createVNode("div", { class: "flex items-center gap-2.5 min-w-0 flex-1" }, [
-                            createVNode(_component_StatusBlock, {
-                              status: __props.testRun?.status ?? "",
-                              size: "md"
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  default: withCtx(() => [
+                    createVNode("div", { class: "space-y-3" }, [
+                      createVNode("div", { class: "flex items-start justify-between gap-x-3 gap-y-2 flex-wrap pr-8" }, [
+                        createVNode("div", { class: "min-w-0 flex-1 basis-64" }, [
+                          createVNode("div", { class: "flex items-center gap-2 flex-wrap" }, [
+                            createVNode(_component_StatusChip, {
+                              status: __props.testRun?.status ?? ""
                             }, null, 8, ["status"]),
-                            createVNode("div", { class: "min-w-0 flex-1" }, [
-                              createVNode("div", { class: "flex items-center gap-2" }, [
-                                createVNode("h2", { class: "text-base font-bold shrink-0 flex items-center gap-1" }, [
-                                  createTextVNode(" Run #" + toDisplayString(__props.testRun?.id) + " ", 1),
-                                  unref(editingLabel) ? (openBlock(), createBlock(Fragment, { key: 0 }, [
-                                    withDirectives(createVNode("input", {
-                                      ref_key: "labelInputRef",
-                                      ref: labelInputRef,
-                                      "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-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
-                                      onKeydown: onLabelKeydown,
-                                      onBlur: saveLabel
-                                    }, null, 40, ["onUpdate:modelValue"]), [
-                                      [vModelText, unref(labelInput)]
-                                    ]),
-                                    unref(savingLabel) ? (openBlock(), createBlock(_component_UIcon, {
-                                      key: 0,
-                                      name: "i-lucide-loader-circle",
-                                      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-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-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 "))
-                                  ], 64)),
-                                  createVNode(_component_HelpHint, { topic: "run.summary" })
+                            createVNode("h2", { class: "text-base font-bold shrink-0 flex items-center gap-1" }, [
+                              createTextVNode(" Run #" + toDisplayString(__props.testRun?.id) + " ", 1),
+                              unref(editingLabel) ? (openBlock(), createBlock(Fragment, { key: 0 }, [
+                                withDirectives(createVNode("input", {
+                                  ref_key: "labelInputRef",
+                                  ref: labelInputRef,
+                                  "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-zinc-400 bg-transparent outline-none focus:border-primary px-0.5 py-0",
+                                  onKeydown: onLabelKeydown,
+                                  onBlur: saveLabel
+                                }, null, 40, ["onUpdate:modelValue"]), [
+                                  [vModelText, unref(labelInput)]
                                 ]),
-                                __props.testRun?.shardTotal && __props.testRun.shardTotal > 1 ? (openBlock(), createBlock(_component_UBadge, {
+                                unref(savingLabel) ? (openBlock(), createBlock(_component_UIcon, {
                                   key: 0,
-                                  color: "neutral",
-                                  variant: "soft",
-                                  size: "sm",
-                                  class: "shrink-0",
-                                  title: `Shard ${__props.testRun.shardsFinished ?? 0}/${__props.testRun.shardTotal}`
-                                }, {
-                                  default: withCtx(() => [
-                                    createVNode(_component_UIcon, {
-                                      name: "i-lucide-layout-grid",
-                                      class: "size-3 mr-1"
-                                    }),
-                                    createTextVNode(" " + toDisplayString(__props.testRun.shardsFinished ?? 0) + "/" + toDisplayString(__props.testRun.shardTotal), 1)
-                                  ]),
-                                  _: 1
-                                }, 8, ["title"])) : createCommentVNode("", true),
-                                __props.testRun?.precedingMarker ? (openBlock(), createBlock(_component_UTooltip, {
+                                  name: "i-lucide-loader-circle",
+                                  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-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,
-                                  text: `This run started after: ${__props.testRun.precedingMarker.label}`
-                                }, {
-                                  default: withCtx(() => [
-                                    createVNode(_component_NuxtLink, {
-                                      to: `/projects/${__props.testRun.projectId}?tab=timeline`,
-                                      class: "shrink-0 inline-flex items-center gap-1"
-                                    }, {
-                                      default: withCtx(() => [
-                                        createVNode("span", { class: "text-xs text-muted" }, "After"),
-                                        createVNode(_component_MarkerBadge, {
-                                          marker: __props.testRun.precedingMarker,
-                                          size: "xs"
-                                        }, null, 8, ["marker"])
-                                      ]),
-                                      _: 1
-                                    }, 8, ["to"])
-                                  ]),
-                                  _: 1
-                                }, 8, ["text"])) : createCommentVNode("", true),
-                                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"
+                                  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 "))
+                              ], 64)),
+                              createVNode(_component_HelpHint, { topic: "run.summary" })
+                            ]),
+                            __props.testRun?.shardTotal && __props.testRun.shardTotal > 1 ? (openBlock(), createBlock(_component_UBadge, {
+                              key: 0,
+                              color: "neutral",
+                              variant: "soft",
+                              size: "sm",
+                              class: "shrink-0",
+                              title: `Shard ${__props.testRun.shardsFinished ?? 0}/${__props.testRun.shardTotal}`
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_component_UIcon, {
+                                  name: "i-lucide-layout-grid",
+                                  class: "size-3 mr-1"
+                                }),
+                                createTextVNode(" " + toDisplayString(__props.testRun.shardsFinished ?? 0) + "/" + toDisplayString(__props.testRun.shardTotal), 1)
+                              ]),
+                              _: 1
+                            }, 8, ["title"])) : createCommentVNode("", true),
+                            __props.testRun?.precedingMarker ? (openBlock(), createBlock(_component_UTooltip, {
+                              key: 1,
+                              text: `This run started after: ${__props.testRun.precedingMarker.label}`
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(_component_NuxtLink, {
+                                  to: `/projects/${__props.testRun.projectId}?tab=timeline`,
+                                  class: "shrink-0 inline-flex items-center gap-1"
                                 }, {
                                   default: withCtx(() => [
-                                    createVNode(_component_UButton, {
-                                      size: "xs",
-                                      variant: "ghost",
-                                      color: "neutral",
-                                      icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
-                                      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"])
-                                  ]),
-                                  _: 1
-                                }, 8, ["text"]),
-                                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-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-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))
-                                    ])
-                                  ]),
-                                  default: withCtx(() => [
-                                    createVNode(_component_UButton, {
-                                      size: "xs",
-                                      color: "warning",
-                                      variant: "subtle",
-                                      icon: unref(retryCopied) ? "i-lucide-check" : "i-lucide-play",
-                                      title: unref(retryTitle),
-                                      onClick: ($event) => copyRetryCommand()
-                                    }, {
-                                      default: withCtx(() => [
-                                        createTextVNode(" Retry ")
-                                      ]),
-                                      _: 1
-                                    }, 8, ["icon", "title", "onClick"])
+                                    createVNode("span", { class: "text-xs text-muted" }, "After"),
+                                    createVNode(_component_MarkerBadge, {
+                                      marker: __props.testRun.precedingMarker,
+                                      size: "xs"
+                                    }, null, 8, ["marker"])
                                   ]),
                                   _: 1
-                                })) : createCommentVNode("", true)
-                              ])
-                            ])
+                                }, 8, ["to"])
+                              ]),
+                              _: 1
+                            }, 8, ["text"])) : createCommentVNode("", true)
+                          ]),
+                          createVNode("p", { class: "mt-1 text-xs text-muted flex items-center gap-1.5 flex-wrap" }, [
+                            createVNode("span", null, "Started " + toDisplayString(("prettyDateFormat" in _ctx ? _ctx.prettyDateFormat : unref(prettyDateFormat))(__props.testRun?.startTime)), 1),
+                            createVNode(_component_ClientOnly, null, {
+                              default: withCtx(() => [
+                                createVNode("span", { class: "text-dimmed" }, "· " + toDisplayString(("formatRelativeTime" in _ctx ? _ctx.formatRelativeTime : unref(formatRelativeTime))(__props.testRun?.startTime)), 1)
+                              ]),
+                              _: 1
+                            })
                           ])
                         ]),
-                        createVNode("div", { class: "grid grid-cols-3 sm:grid-cols-5 gap-2" }, [
+                        createVNode("div", { class: "flex items-center gap-1.5 shrink-0" }, [
+                          createVNode(_component_UTooltip, {
+                            text: unref(copied) ? "Copied!" : "Copy run summary"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_UButton, {
+                                size: "xs",
+                                variant: "ghost",
+                                color: "neutral",
+                                icon: unref(copied) ? "i-lucide-check" : "i-lucide-clipboard",
+                                "aria-label": "Copy run summary",
+                                class: "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"])
+                            ]),
+                            _: 1
+                          }, 8, ["text"]),
+                          unref(failedCases).length > 0 ? (openBlock(), createBlock(_component_UPopover, { key: 0 }, {
+                            content: withCtx(() => [
+                              createVNode("div", { class: "p-2 space-y-1 min-w-32" }, [
+                                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-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))
+                              ])
+                            ]),
+                            default: withCtx(() => [
+                              createVNode(_component_UButton, {
+                                size: "xs",
+                                color: "warning",
+                                variant: "subtle",
+                                icon: unref(retryCopied) ? "i-lucide-check" : "i-lucide-play",
+                                title: unref(retryTitle),
+                                "aria-label": "Retry",
+                                onClick: ($event) => copyRetryCommand()
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode("span", { class: "hidden @2xl:inline" }, "Retry")
+                                ]),
+                                _: 1
+                              }, 8, ["icon", "title", "onClick"])
+                            ]),
+                            _: 1
+                          })) : createCommentVNode("", true),
+                          unref(failedCases).length > 0 ? (openBlock(), createBlock(_component_DesktopRunLocallyButton, {
+                            key: 1,
+                            "project-id": __props.testRun?.project?.id,
+                            "project-label": __props.testRun?.project?.label ?? __props.testRun?.project?.name,
+                            cases: unref(failedCases)
+                          }, null, 8, ["project-id", "project-label", "cases"])) : createCommentVNode("", true),
+                          unref(primaryReport) ? (openBlock(), createBlock(_component_UButton, {
+                            key: 2,
+                            href: ("fileApiUrl" in _ctx ? _ctx.fileApiUrl : unref(fileApiUrl))(unref(primaryReport).path, null, unref(config).app?.baseURL),
+                            icon: ("reportIcon" in _ctx ? _ctx.reportIcon : unref(reportIcon))(unref(primaryReport).type),
+                            target: "_blank",
+                            size: "xs",
+                            color: "primary",
+                            variant: "outline",
+                            "aria-label": unref(primaryReport).label,
+                            title: unref(primaryReport).size ? `${unref(primaryReport).label} · ${("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(primaryReport).size)}` : unref(primaryReport).label
+                          }, {
+                            default: withCtx(() => [
+                              createVNode("span", { class: "hidden @2xl:inline" }, toDisplayString(unref(primaryReport).label), 1)
+                            ]),
+                            _: 1
+                          }, 8, ["href", "icon", "aria-label", "title"])) : createCommentVNode("", true)
+                        ])
+                      ]),
+                      createVNode(_component_StatTileGrid, { "min-tile-width": "7.5rem" }, {
+                        default: withCtx(() => [
                           createVNode("button", {
                             class: [
                               "rounded-lg p-3 text-left w-full transition-colors cursor-pointer",
@@ -1523,232 +2480,87 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                             title: "Tests that never ran (maxFailures cutoff or a serial-group failure)",
                             onClick: ($event) => emit("filter-status", "didnotrun")
                           }, [
-                            createVNode("p", { class: "text-xs font-medium text-amber-700 dark:text-amber-400 uppercase tracking-wider" }, " Didn't run "),
+                            createVNode("p", { class: "text-xs font-medium text-amber-700 dark:text-amber-400 uppercase tracking-wider" }, "Didn't run"),
                             createVNode("p", { class: "text-xl font-bold mt-0.5 text-amber-600 dark:text-amber-400" }, toDisplayString(__props.testRun?.didNotRunTests ?? 0), 1)
                           ], 10, ["onClick"])
                         ]),
-                        createVNode("div", null, [
-                          __props.testRun ? (openBlock(), createBlock("div", {
-                            key: 0,
-                            class: "flex items-center gap-3"
-                          }, [
-                            createVNode("div", { class: "flex-1 max-w-md" }, [
-                              createVNode(_component_TestStatusBar, {
-                                passed: __props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0,
-                                failed: __props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0,
-                                skipped: __props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0,
-                                flaky: __props.testRun?.flakyTests ?? 0,
-                                "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("div", { class: "flex items-center gap-3 text-xs shrink-0" }, [
-                              createVNode("div", { class: "flex items-center gap-1" }, [
-                                createVNode(_component_UIcon, {
-                                  name: "i-lucide-clock",
-                                  class: "size-3.5 text-zinc-400"
-                                }),
-                                createVNode(_component_DurationValue, {
-                                  ms: __props.testRun?.duration,
-                                  class: "font-medium"
-                                }, null, 8, ["ms"])
-                              ]),
-                              __props.testRun?.avgTestDuration ? (openBlock(), createBlock("div", {
-                                key: 0,
-                                class: "flex items-center gap-1"
-                              }, [
-                                createVNode(_component_UIcon, {
-                                  name: "i-lucide-gauge",
-                                  class: "size-3.5 text-zinc-400"
-                                }),
-                                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,
-                                class: "flex items-center gap-1"
-                              }, [
-                                createVNode(_component_UIcon, {
-                                  name: "i-lucide-arrow-up-right",
-                                  class: "size-3.5 text-orange-500"
-                                }),
-                                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,
-                                class: "flex items-center gap-1"
-                              }, [
-                                createVNode(_component_UIcon, {
-                                  name: "i-lucide-clock",
-                                  class: "size-3.5 text-amber-500"
-                                }),
-                                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)
-                        ])
-                      ])
-                    ]),
-                    _: 1
-                  })
-                ], 2),
-                unref(showCiEnv) ? (openBlock(), createBlock(_component_CiEnvCard, {
-                  key: 0,
-                  ci: __props.testRun?.metadata?.ci,
-                  environment: __props.testRun?.environment,
-                  "playwright-version": __props.testRun?.playwrightVersion,
-                  "reporter-version": __props.testRun?.reporterVersion,
-                  class: unref(blockColSpanClass)
-                }, null, 8, ["ci", "environment", "playwright-version", "reporter-version", "class"])) : createCommentVNode("", true),
-                unref(showSource) ? (openBlock(), createBlock(_component_SourceInfoCard, {
-                  key: 1,
-                  scm: __props.testRun.metadata.scm,
-                  class: unref(blockColSpanClass)
-                }, null, 8, ["scm", "class"])) : createCommentVNode("", true),
-                unref(showStorage) ? (openBlock(), createBlock(_component_BlockCard, {
-                  key: 2,
-                  class: unref(blockColSpanClass),
-                  title: "Storage",
-                  icon: "i-lucide-database",
-                  help: "run.reports",
-                  subtitle: unref(storageStats)?.totalFiles ? `${unref(storageStats).totalFiles} files · ${("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).totalSize)}` : void 0
-                }, {
-                  default: withCtx(() => [
-                    __props.finalizing ? (openBlock(), createBlock("div", {
-                      key: 0,
-                      class: "flex items-center gap-3"
-                    }, [
-                      createVNode(_component_UIcon, {
-                        name: "i-lucide-upload",
-                        class: "size-5 text-info shrink-0 animate-pulse"
+                        _: 1
                       }),
-                      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-zinc-500" }, "Uploading reports & traces…")
-                        ]),
-                        createVNode(_component_UProgress, {
-                          value: null,
-                          size: "sm",
-                          color: "info",
-                          class: "rounded-full animate-pulse"
-                        })
-                      ])
-                    ])) : createCommentVNode("", true),
-                    unref(storageStats)?.totalFiles ? (openBlock(), createBlock("div", {
-                      key: 1,
-                      class: "space-y-1.5 text-sm"
-                    }, [
-                      (openBlock(true), createBlock(Fragment, null, renderList(__props.allReports, (report) => {
-                        return openBlock(), createBlock("div", {
-                          key: report.label,
-                          class: "flex items-center justify-between gap-2 min-w-0"
-                        }, [
-                          createVNode(_component_UButton, {
-                            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",
-                            variant: "outline",
-                            class: "min-w-0",
-                            ui: { label: "truncate" }
-                          }, {
-                            default: withCtx(() => [
-                              createTextVNode(toDisplayString(report.label), 1)
-                            ]),
-                            _: 2
-                          }, 1032, ["href", "icon"]),
-                          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", {
+                      __props.testRun ? (openBlock(), createBlock("div", {
                         key: 0,
-                        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-zinc-400 dark:text-zinc-500 shrink-0" }, toDisplayString(("formatBytes" in _ctx ? _ctx.formatBytes : unref(formatBytes))(unref(storageStats).testCaseFilesSize)), 1)
-                      ])) : createCommentVNode("", true)
-                    ])) : createCommentVNode("", true)
-                  ]),
-                  _: 1
-                }, 8, ["class", "subtitle"])) : createCommentVNode("", true),
-                unref(showOther) ? (openBlock(), createBlock(_component_BlockCard, {
-                  key: 3,
-                  class: unref(blockColSpanClass),
-                  title: "Other",
-                  icon: "i-lucide-tags",
-                  help: "run.metadata"
-                }, {
-                  default: withCtx(() => [
-                    createVNode("div", { class: "space-y-3 text-sm" }, [
-                      __props.testRun.metadata.tags && __props.testRun.metadata.tags.length > 0 ? (openBlock(), createBlock("div", { key: 0 }, [
-                        createVNode("div", { class: "flex flex-wrap gap-1.5" }, [
-                          (openBlock(true), createBlock(Fragment, null, renderList(__props.testRun.metadata.tags, (tag) => {
-                            return openBlock(), createBlock(_component_UBadge, {
-                              key: tag,
-                              color: "neutral",
-                              variant: "soft",
-                              size: "sm"
-                            }, {
-                              default: withCtx(() => [
-                                createTextVNode(toDisplayString(tag), 1)
-                              ]),
-                              _: 2
-                            }, 1024);
-                          }), 128))
-                        ])
-                      ])) : createCommentVNode("", true),
-                      __props.testRun.metadata.relatedIssue ? (openBlock(), createBlock("p", {
-                        key: 1,
-                        class: "flex items-center gap-1"
+                        class: "flex items-center gap-x-4 gap-y-1.5 flex-wrap"
                       }, [
-                        createVNode(_component_UIcon, {
-                          name: "i-lucide-link",
-                          class: "w-3.5 h-3.5 text-zinc-400 shrink-0"
-                        }),
-                        createVNode("span", null, toDisplayString(__props.testRun.metadata.relatedIssue), 1)
-                      ])) : createCommentVNode("", true),
-                      createVNode(_component_EntityLinks, {
-                        "entity-type": "test_run",
-                        "entity-id": __props.testRun.id,
-                        links: __props.testRun.links ?? null,
-                        onUpdated: ($event) => _ctx.$emit("label-updated")
-                      }, null, 8, ["entity-id", "links", "onUpdated"]),
-                      __props.testRun.metadata.customData ? (openBlock(), createBlock(_component_UButton, {
-                        key: 2,
-                        size: "xs",
-                        variant: "ghost",
-                        color: "neutral",
-                        icon: __props.showCustomData ? "i-lucide-chevron-up" : "i-lucide-chevron-down",
-                        onClick: ($event) => emit("update:showCustomData", !__props.showCustomData)
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(" Custom data ")
+                        createVNode("div", { class: "flex-1 basis-60 min-w-44 max-w-xl" }, [
+                          createVNode(_component_TestStatusBar, {
+                            passed: __props.displayProgress?.passedTests ?? __props.testRun?.passedTests ?? 0,
+                            failed: __props.displayProgress?.failedTests ?? __props.testRun?.failedTests ?? 0,
+                            skipped: __props.displayProgress?.skippedTests ?? __props.testRun?.skippedTests ?? 0,
+                            flaky: __props.testRun?.flakyTests ?? 0,
+                            "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"])
                         ]),
-                        _: 1
-                      }, 8, ["icon", "onClick"])) : createCommentVNode("", true),
-                      __props.showCustomData && __props.testRun.metadata.customData ? (openBlock(), createBlock("div", { key: 3 }, [
-                        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)
+                        createVNode("div", { class: "flex items-center flex-wrap gap-x-3 gap-y-1 text-xs shrink-0" }, [
+                          createVNode("div", { class: "flex items-center gap-1" }, [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-clock",
+                              class: "size-3.5 text-zinc-400"
+                            }),
+                            createVNode(_component_DurationValue, {
+                              ms: __props.testRun?.duration,
+                              class: "font-medium"
+                            }, null, 8, ["ms"])
+                          ]),
+                          __props.testRun?.avgTestDuration ? (openBlock(), createBlock("div", {
+                            key: 0,
+                            class: "flex items-center gap-1"
+                          }, [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-gauge",
+                              class: "size-3.5 text-zinc-400"
+                            }),
+                            createVNode("span", { class: "text-zinc-500" }, "Avg"),
+                            createVNode(_component_DurationValue, {
+                              ms: __props.testRun.avgTestDuration,
+                              class: "font-medium"
+                            }, null, 8, ["ms"])
+                          ])) : createCommentVNode("", true),
+                          __props.testRun?.p90TestDuration ? (openBlock(), createBlock("div", {
+                            key: 1,
+                            class: "flex items-center gap-1"
+                          }, [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-arrow-up-right",
+                              class: "size-3.5 text-orange-500"
+                            }),
+                            createVNode("span", { class: "text-zinc-500" }, "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,
+                            class: "flex items-center gap-1"
+                          }, [
+                            createVNode(_component_UIcon, {
+                              name: "i-lucide-clock",
+                              class: "size-3.5 text-amber-500"
+                            }),
+                            createVNode("span", { class: "text-zinc-500" }, "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)
                     ])
                   ]),
                   _: 1
-                }, 8, ["class"])) : createCommentVNode("", true)
+                })
               ])
             ];
           }
@@ -2418,12 +3230,12 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     }
     __expose({ scrollToCase });
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_FilterToolbar = __nuxt_component_4$1;
+      const _component_FilterToolbar = __nuxt_component_4$3;
       const _component_UIcon = _sfc_main$p;
       const _component_HelpHint = __nuxt_component_2$2;
       const _component_UInput = _sfc_main$d$1;
-      const _component_USelect = _sfc_main$o;
-      const _component_UCheckbox = _sfc_main$q;
+      const _component_USelect = _sfc_main$q;
+      const _component_UCheckbox = _sfc_main$r;
       const _component_UButton = _sfc_main$k;
       const _component_TestCasesTree = __nuxt_component_7;
       const _component_ClientOnly = __nuxt_component_7$1;
@@ -2802,8 +3614,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     return (_ctx, _push, _parent, _attrs) => {
       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_9$2;
+      const _component_LoadingState = __nuxt_component_12$2;
+      const _component_EmptyState = __nuxt_component_4$2;
       const _component_UIcon = _sfc_main$p;
       const _component_HelpHint = __nuxt_component_2$2;
       const _component_SectionCard = __nuxt_component_11;
@@ -3830,12 +4642,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const _component_UIcon = _sfc_main$p;
       const _component_HelpHint = __nuxt_component_2$2;
       const _component_UButton = _sfc_main$k;
-      const _component_UCard = _sfc_main$m;
+      const _component_UCard = _sfc_main$n;
       const _component_TableScroller = __nuxt_component_3$2;
-      const _component_UTable = _sfc_main$i;
+      const _component_UTable = _sfc_main$j;
       const _component_UBadge = _sfc_main$7$1;
       const _component_NuxtLink = __nuxt_component_12$1;
-      const _component_UModal = _sfc_main$n;
+      const _component_UModal = _sfc_main$o;
       const _component_ClusterDiagnosis = __nuxt_component_9;
       _push(`<!--[--><div class="pt-4 space-y-3">`);
       if (unref(loading)) {
@@ -4958,13 +5770,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       copy(context.value?.commitRange?.gitCommand);
     }
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_LoadingState = __nuxt_component_1$1;
-      const _component_EmptyState = __nuxt_component_9$2;
+      const _component_LoadingState = __nuxt_component_12$2;
+      const _component_EmptyState = __nuxt_component_4$2;
       const _component_UIcon = _sfc_main$p;
       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$m;
+      const _component_UCard = _sfc_main$n;
       const _component_UButton = _sfc_main$k;
       _push(`<div${ssrRenderAttrs(mergeProps({ class: "pt-4" }, _attrs))}>`);
       if (unref(loading)) {
@@ -5326,7 +6138,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       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$q;
+      const _component_UCheckbox = _sfc_main$r;
       _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" : "")}<!--]-->`);
@@ -6227,15 +7039,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_USelectMenu = _sfc_main$j;
+      const _component_USelectMenu = _sfc_main$l;
       const _component_RunStatusBadge = __nuxt_component_13$1;
       const _component_UButton = _sfc_main$k;
       const _component_UIcon = _sfc_main$p;
-      const _component_UAlert = _sfc_main$l;
+      const _component_UAlert = _sfc_main$m;
       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$i;
+      const _component_UTable = _sfc_main$j;
       const _component_DurationValue = __nuxt_component_14$1;
       _push(`<div${ssrRenderAttrs(_attrs)}>`);
       if (__props.testRun && !isLive.value) {
@@ -6822,9 +7634,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     ];
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UIcon = _sfc_main$p;
-      const _component_UTable = _sfc_main$i;
+      const _component_UTable = _sfc_main$j;
       const _component_UBadge = _sfc_main$7$1;
       const _component_DurationValue = __nuxt_component_14$1;
+      const _component_FeatureUnavailable = __nuxt_component_4$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">`);
@@ -6957,12 +7770,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           _: 1
         }, _parent));
       } else {
-        _push(`<div class="flex-1 flex items-center justify-center text-center text-gray-500">`);
-        _push(ssrRenderComponent(_component_UIcon, {
-          name: "i-lucide-wifi-off",
-          class: "size-8 mx-auto mb-2 text-gray-300 dark:text-gray-600"
+        _push(ssrRenderComponent(_component_FeatureUnavailable, {
+          class: "flex-1",
+          icon: "i-lucide-wifi-off",
+          title: "No network requests captured",
+          text: "Slow endpoints need the Piwi capture fixtures — extend your Playwright test with piwiFixtures and request timing rides along with every run.",
+          doc: "capture-fixtures"
         }, null, _parent));
-        _push(`<p> No network request data. Add the <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded font-mono">@piwitests/reporter</code> fixtures to your test setup. </p></div>`);
       }
       _push(`</div>`);
     };
@@ -7170,11 +7984,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UDashboardPanel = _sfc_main$1$1;
-      const _component_UDashboardNavbar = _sfc_main$g;
+      const _component_UDashboardNavbar = _sfc_main$h;
       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$h;
+      const _component_UTooltip = _sfc_main$i;
       const _component_UIcon = _sfc_main$p;
       const _component_NavbarActions = __nuxt_component_4;
       const _component_DetailPageLayout = __nuxt_component_8;
@@ -7835,4 +8649,4 @@ _sfc_main.setup = (props, ctx) => {
 };
 
 export { _sfc_main as default };
-//# sourceMappingURL=_id_-BHh65pfg.mjs.map
+//# sourceMappingURL=_id_-8cGIgeg6.mjs.map