From 4a53bbd1fb1fc1851778c9d5de59f97f99141bdb Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 20:10:16 +0000
Subject: [PATCH 1/9] fix(ui): surface failure evidence first on the execution
 page

The Diagnosis tab opened with the screenshot folded away while console and
network were always expanded. The test source and failure evidence cards
now start expanded, and console/network become foldable cards with a peek
line (entry count plus the first entry). Fold choices still persist per
user through the existing cookie.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 .../test-case/TestCaseConsoleCard.vue         | 45 ++++++++++++++++---
 .../test-case/TestCaseEvidenceCard.vue        |  3 ++
 .../test-case/TestCaseNetworkRequests.vue     | 36 +++++++++++++--
 .../components/test-case/TestSourceCard.vue   |  3 ++
 .../app/pages/test-run-cases/[id].vue         | 42 +++++++++--------
 apps/docs/evidence.md                         |  6 +--
 6 files changed, 105 insertions(+), 30 deletions(-)

diff --git a/apps/application/app/components/test-case/TestCaseConsoleCard.vue b/apps/application/app/components/test-case/TestCaseConsoleCard.vue
index dbdfd317..3e9d6d2f 100644
--- a/apps/application/app/components/test-case/TestCaseConsoleCard.vue
+++ b/apps/application/app/components/test-case/TestCaseConsoleCard.vue
@@ -1,15 +1,46 @@
 <script setup lang="ts">
-defineProps<{
+/**
+ * Browser console output captured while the test ran. With a `storageKey` the
+ * card folds to its header with a one-line peek (entry count plus the first
+ * entry, ANSI-stripped) and the fold state persists per user; without one it is
+ * a plain always-open card.
+ */
+import { stripAnsi } from '~/utils/text-format';
+import SectionCard from '../shared/SectionCard.vue';
+import CollapsibleSectionCard from '../shared/CollapsibleSectionCard.vue';
+
+const props = defineProps<{
   entries: Array<{
     type: string;
     text: string;
     timestamp?: number;
     location?: string | null;
   }>;
+  /** When set, the card folds to a header with a peek (persisted per user). */
+  storageKey?: string;
+  /** Whether the card starts folded on first visit (no stored cookie). */
+  defaultFolded?: boolean;
 }>();
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const expanded = ref(false);
+const cardComponent = computed(() => (props.storageKey ? CollapsibleSectionCard : SectionCard));
+const cardBind = computed(() =>
+  props.storageKey ? { storageKey: props.storageKey, defaultFolded: props.defaultFolded } : {},
+);
+
+const peek = computed(() => {
+  const n = props.entries.length;
+  const first = props.entries[0];
+  const head = `${n} entr${n === 1 ? 'y' : 'ies'}`;
+  return first ? `${head} · ${first.type}: ${stripAnsi(first.text).trim()}` : head;
+});
+
+// Forward reveal so a jump chip or diagnosis citation can unfold + scroll to this card.
+const card = ref<{ reveal?: () => void; $el?: HTMLElement } | null>(null);
+function reveal() {
+  if (card.value?.reveal) card.value.reveal();
+  else card.value?.$el?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
+}
+defineExpose({ reveal });
 
 function consoleTypeColor(type: string): 'error' | 'warning' | 'neutral' {
   switch (type) {
@@ -39,13 +70,17 @@ function consoleTypeIcon(type: string): string {
 </script>
 
 <template>
-  <SectionCard
+  <component
+    :is="cardComponent"
     v-if="entries.length > 0"
+    ref="card"
+    v-bind="cardBind"
     icon="i-lucide-terminal"
     title="Console output"
     :count="entries.length"
     help="case.console"
   >
+    <template v-if="storageKey" #folded>{{ peek }}</template>
     <div class="space-y-1 max-h-80 overflow-y-auto">
       <div
         v-for="(entry, index) in entries"
@@ -76,5 +111,5 @@ function consoleTypeIcon(type: string): string {
         </div>
       </div>
     </div>
-  </SectionCard>
+  </component>
 </template>
diff --git a/apps/application/app/components/test-case/TestCaseEvidenceCard.vue b/apps/application/app/components/test-case/TestCaseEvidenceCard.vue
index 7a8181c2..cceac4e9 100644
--- a/apps/application/app/components/test-case/TestCaseEvidenceCard.vue
+++ b/apps/application/app/components/test-case/TestCaseEvidenceCard.vue
@@ -12,6 +12,8 @@ const props = defineProps<{
   attachments: AttachmentInfo[];
   traces: TraceInfo[];
   storageKey: string;
+  /** Whether the card starts folded on first visit (no stored cookie). */
+  defaultFolded?: boolean;
 }>();
 
 const config = useRuntimeConfig();
@@ -60,6 +62,7 @@ defineExpose({ reveal: () => card.value?.reveal?.() });
   <CollapsibleSectionCard
     ref="card"
     :storage-key="storageKey"
+    :default-folded="defaultFolded"
     icon="i-lucide-camera"
     title="Failure evidence"
     :count="totalCount"
diff --git a/apps/application/app/components/test-case/TestCaseNetworkRequests.vue b/apps/application/app/components/test-case/TestCaseNetworkRequests.vue
index cf1a67ef..b8f8c859 100644
--- a/apps/application/app/components/test-case/TestCaseNetworkRequests.vue
+++ b/apps/application/app/components/test-case/TestCaseNetworkRequests.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { NetworkRequest, ServerLogEntry, ServerSpanEntry } from '~~/types/api';
+import SectionCard from '../shared/SectionCard.vue';
+import CollapsibleSectionCard from '../shared/CollapsibleSectionCard.vue';
 
 const props = defineProps<{
   requests: NetworkRequest[];
@@ -7,8 +9,17 @@ const props = defineProps<{
   runId?: number | null;
   testRunsCaseId?: number | null;
   hasTrace?: boolean;
+  /** When set, the card folds to a header with a peek (persisted per user). */
+  storageKey?: string;
+  /** Whether the card starts folded on first visit (no stored cookie). */
+  defaultFolded?: boolean;
 }>();
 
+const cardComponent = computed(() => (props.storageKey ? CollapsibleSectionCard : SectionCard));
+const cardBind = computed(() =>
+  props.storageKey ? { storageKey: props.storageKey, defaultFolded: props.defaultFolded } : {},
+);
+
 type Filter = 'all' | 'failed' | 'logs';
 const filter = ref<Filter>('all');
 
@@ -55,7 +66,22 @@ const viewItems = computed(() => [
 function showTraceMode() {
   if (props.hasTrace) manualView.value = 'trace';
 }
-defineExpose({ showTraceMode });
+
+// Forward reveal so a jump chip or diagnosis citation can unfold + scroll to this card.
+const card = ref<{ reveal?: () => void; $el?: HTMLElement } | null>(null);
+function reveal() {
+  if (card.value?.reveal) card.value.reveal();
+  else card.value?.$el?.scrollIntoView?.({ behavior: 'smooth', block: 'start' });
+}
+defineExpose({ showTraceMode, reveal });
+
+/** Folded peek: the captured request count and the first request, or the trace-only hint. */
+const peek = computed(() => {
+  const n = props.requests.length;
+  if (n === 0) return 'Full network activity from the trace';
+  const first = props.requests[0]!;
+  return `${n} request${n === 1 ? '' : 's'} · ${first.method} ${toPath(first.url)} → ${first.status}`;
+});
 
 /** Per-request expansion state (keyed by stable index). */
 const expanded = ref<Set<number>>(new Set());
@@ -246,12 +272,16 @@ function rowAccent(r: DecoratedRequest): string {
 </script>
 
 <template>
-  <SectionCard
+  <component
+    :is="cardComponent"
+    ref="card"
+    v-bind="cardBind"
     icon="i-lucide-network"
     title="Network requests"
     :count="view === 'trace' ? traceCount : totals.total"
     help="case.network"
   >
+    <template v-if="storageKey" #folded>{{ peek }}</template>
     <template #actions>
       <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
         <template v-if="view === 'captured'">
@@ -472,5 +502,5 @@ function rowAccent(r: DecoratedRequest): string {
         <DocLink to="evidence#trace-powered-deep-views" no-icon class="underline">Learn more</DocLink>
       </span>
     </p>
-  </SectionCard>
+  </component>
 </template>
diff --git a/apps/application/app/components/test-case/TestSourceCard.vue b/apps/application/app/components/test-case/TestSourceCard.vue
index 90e8613d..9b244b8b 100644
--- a/apps/application/app/components/test-case/TestSourceCard.vue
+++ b/apps/application/app/components/test-case/TestSourceCard.vue
@@ -18,6 +18,8 @@ const props = defineProps<{
   projectKey?: string | number | null;
   projectName?: string | null;
   storageKey: string;
+  /** Whether the card starts folded on first visit (no stored cookie). */
+  defaultFolded?: boolean;
 }>();
 
 const { data: stack, pending: stackPending } = useTraceCallStack(
@@ -58,6 +60,7 @@ defineExpose({ reveal: () => card.value?.reveal() });
   <CollapsibleSectionCard
     ref="card"
     :storage-key="storageKey"
+    :default-folded="defaultFolded"
     icon="i-lucide-code"
     :count="count"
     title="Test source"
diff --git a/apps/application/app/pages/test-run-cases/[id].vue b/apps/application/app/pages/test-run-cases/[id].vue
index 0dce5fca..2b866622 100644
--- a/apps/application/app/pages/test-run-cases/[id].vue
+++ b/apps/application/app/pages/test-run-cases/[id].vue
@@ -471,10 +471,9 @@ function copyFailure() {
 // Lets an AI-diagnosis evidence citation (in TestCaseAiCard → DiagnosisResult)
 // unfold and scroll to the matching evidence section on this page.
 const errorEl = ref<HTMLElement | null>(null);
-const consoleEl = ref<HTMLElement | null>(null);
-const networkEl = ref<HTMLElement | null>(null);
 const testSourceCard = ref<{ reveal: () => void } | null>(null);
-const networkCard = ref<{ showTraceMode: () => void } | null>(null);
+const consoleCard = ref<{ reveal: () => void } | null>(null);
+const networkCard = ref<{ showTraceMode: () => void; reveal: () => void } | null>(null);
 const evidenceCard = ref<{ reveal: () => void } | null>(null);
 const envDiffCard = ref<{ reveal: () => void } | null>(null);
 const visualDiffCard = ref<{ reveal: () => void } | null>(null);
@@ -497,13 +496,13 @@ const sectionToAction: Record<string, () => void> = {
   screenshots: () => evidenceCard.value?.reveal(),
   tracePointers: () => evidenceCard.value?.reveal(),
   artifacts: () => evidenceCard.value?.reveal(),
-  console: () => scrollToEl(consoleEl.value),
-  networkRequests: () => scrollToEl(networkEl.value),
-  serverTraces: () => scrollToEl(networkEl.value),
+  console: () => consoleCard.value?.reveal(),
+  networkRequests: () => networkCard.value?.reveal(),
+  serverTraces: () => networkCard.value?.reveal(),
   traceCallStack: () => testSourceCard.value?.reveal(),
   traceNetwork: () => {
     networkCard.value?.showTraceMode();
-    scrollToEl(networkEl.value);
+    networkCard.value?.reveal();
   },
   steps: () => {
     activeTab.value = 'steps';
@@ -685,6 +684,7 @@ provide(clusterSectionLocatorKey, {
                   v-if="testCase?.testSourceFrames?.length || testCase?.testSource || hasTrace"
                   ref="testSourceCard"
                   storage-key="case-test-source"
+                  :default-folded="false"
                   :frames="testCase?.testSourceFrames ?? null"
                   :test-source="testCase?.testSource ?? null"
                   :run-id="testCase?.testRun?.id ?? null"
@@ -698,6 +698,7 @@ provide(clusterSectionLocatorKey, {
                 <TestCaseEvidenceCard
                   ref="evidenceCard"
                   storage-key="case-evidence"
+                  :default-folded="false"
                   :attachments="(testCase as any)?.attachments ?? []"
                   :traces="(traceData as any[]) ?? []"
                 />
@@ -730,20 +731,23 @@ provide(clusterSectionLocatorKey, {
                 />
 
                 <!-- Console output -->
-                <div v-if="(testCase as any)?.consoleLogs?.length" ref="consoleEl" class="scroll-mt-4">
-                  <TestCaseConsoleCard :entries="(testCase as any)?.consoleLogs ?? []" />
-                </div>
+                <TestCaseConsoleCard
+                  v-if="(testCase as any)?.consoleLogs?.length"
+                  ref="consoleCard"
+                  storage-key="case-console"
+                  :entries="(testCase as any)?.consoleLogs ?? []"
+                />
 
                 <!-- Network requests + backend logs; full trace network when available -->
-                <div v-if="networkRequests.length > 0 || hasTrace" ref="networkEl" class="scroll-mt-4">
-                  <TestCaseNetworkRequests
-                    ref="networkCard"
-                    :requests="networkRequests"
-                    :run-id="testCase?.testRun?.id ?? null"
-                    :test-runs-case-id="Number(testCaseId)"
-                    :has-trace="hasTrace"
-                  />
-                </div>
+                <TestCaseNetworkRequests
+                  v-if="networkRequests.length > 0 || hasTrace"
+                  ref="networkCard"
+                  storage-key="case-network"
+                  :requests="networkRequests"
+                  :run-id="testCase?.testRun?.id ?? null"
+                  :test-runs-case-id="Number(testCaseId)"
+                  :has-trace="hasTrace"
+                />
 
                 <!-- App state at test end -->
                 <PageStateCard
diff --git a/apps/docs/evidence.md b/apps/docs/evidence.md
index 130df015..ae408dc2 100644
--- a/apps/docs/evidence.md
+++ b/apps/docs/evidence.md
@@ -23,8 +23,8 @@ Most links from a run land on an execution; the test's title links to the test c
 Everything about a single test execution, laid out **diagnosis-first**. A pinned **summary** carries the status, title, copyable location, duration, worker, retries and duration-vs-average, plus at-a-glance **signal badges** (new regression, new flaky, passed-on-retry), any test annotations (`@fixme`, `@slow`, …), the **wasted time** spent in fixed waits, and metadata cards (environment, CI, branch, commit, author, browser, storage). Traces stream in live while the parent run is still running.
 
 <figure>
-  <img src="/screenshots/gather-evidence.png" alt="A failing execution's Diagnosis tab: the pinned summary, the error and call log, and the folded evidence sections (test source, failure evidence, alternative locators, environment diff, visual diff, console)">
-  <figcaption>A failing execution, diagnosis-first — the summary with its wasted-time readout, the error, and the captured evidence folded into one screen.</figcaption>
+  <img src="/screenshots/gather-evidence.png" alt="A failing execution's Diagnosis tab: the pinned summary, the error and call log, the test source and failure evidence open, and the remaining evidence sections folded (alternative locators, environment diff, visual diff, console, network)">
+  <figcaption>A failing execution, diagnosis-first — the summary with its wasted-time readout, the error, the test source and screenshots open, and the rest of the captured evidence folded into one screen.</figcaption>
 </figure>
 
 The tabs adapt to the result.
@@ -34,7 +34,7 @@ The tabs adapt to the result.
 - **Verdict** — is this a new regression or flaky, how many times it retried, and how long the test has been failing, with a clickable recent-runs strip to jump between executions.
 - **Failure cluster** *(when the failure is clustered)* — signature, error type, how many tests it hit, the cluster's own AI verdict, and a hand-off to the full cross-test investigation.
 - **AI diagnosis** — diagnose *this execution* with one click, or **Copy AI context** to paste the full evidence bundle into your own assistant (works even with no provider configured). Cited evidence links jump to the matching section on the page.
-- **Evidence funnel** — the **test source** as a call stack (the line that actually threw plus the callers above it, so a failure inside a helper is visible, not just the test line that invoked it — and, [with a trace](#trace-powered-deep-views), the complete stack with real source), grouped **failure evidence** (screenshots, video, traces, attachments), [alternative locators](./reporter#locator-healing) for a broken locator, an **environment diff** and **visual diff** against the last green run, **console** output, **network requests** with inline [backend logs](./backend-logs) and a [Full trace](#trace-powered-deep-views) network view, **app state**, the failure-time **ARIA snapshot**, and the reconstructed **DOM snapshot**.
+- **Evidence funnel** — every section is a card that folds to a one-line peek and remembers your choice; the test source and the failure evidence open expanded so the failing line and the screenshot are on the first screen, the rest starts folded. It runs from the **test source** as a call stack (the line that actually threw plus the callers above it, so a failure inside a helper is visible, not just the test line that invoked it — and, [with a trace](#trace-powered-deep-views), the complete stack with real source), grouped **failure evidence** (screenshots, video, traces, attachments), [alternative locators](./reporter#locator-healing) for a broken locator, an **environment diff** and **visual diff** against the last green run, **console** output, **network requests** with inline [backend logs](./backend-logs) and a [Full trace](#trace-powered-deep-views) network view, **app state**, the failure-time **ARIA snapshot**, and the reconstructed **DOM snapshot**.
 
 **A passing execution opens on Steps**, with an **Artifacts** tab for its traces, attachments, console and network.
 

From cbc65581641f4a108523657f38e08fe0e501bc11 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 1 Sep 2026 20:11:00 +0000
Subject: [PATCH 2/9] fix(ui): align the diagnosis rail breakpoint and gate
 jump chips on rendered sections

The Diagnosis grid splits into two columns at xl while the column order
flipped at lg, which pushed the verdict/cluster/AI rail under the whole
evidence funnel between 1024 and 1279 px. Both now switch at xl. The
environment-diff, visual-diff and DOM-snapshot cards report whether they
rendered anything, so their jump chips only appear when there is a section
to scroll to.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 .../components/shared/EnvironmentDiffCard.vue |  8 ++++++-
 .../components/test-case/DomSnapshotCard.vue  | 10 ++++++++-
 .../components/test-case/VisualDiffCard.vue   |  8 ++++++-
 .../app/pages/test-run-cases/[id].vue         | 21 +++++++++++++------
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/apps/application/app/components/shared/EnvironmentDiffCard.vue b/apps/application/app/components/shared/EnvironmentDiffCard.vue
index c03fd25d..b10f4875 100644
--- a/apps/application/app/components/shared/EnvironmentDiffCard.vue
+++ b/apps/application/app/components/shared/EnvironmentDiffCard.vue
@@ -34,6 +34,12 @@ const {
   lazy: true,
 });
 
+// The card renders only for a usable diff; the page reads `available` to show
+// its jump chip for exactly the same condition.
+const emit = defineEmits<{ available: [value: boolean] }>();
+const available = computed(() => !pending.value && !error.value && diff.value?.status === 'ok');
+watch(available, (value) => emit('available', value), { immediate: true });
+
 const entries = computed<EnvironmentDiffEntry[]>(() => diff.value?.entries ?? []);
 const meaningful = computed(() => entries.value.filter((e) => !e.informational));
 const informational = computed(() => entries.value.filter((e) => e.informational));
@@ -60,7 +66,7 @@ defineExpose({ reveal: () => card.value?.reveal?.() });
 <template>
   <component
     :is="cardComponent"
-    v-if="!pending && !error && diff?.status === 'ok'"
+    v-if="available && diff"
     ref="card"
     v-bind="cardBind"
     icon="i-lucide-git-compare-arrows"
diff --git a/apps/application/app/components/test-case/DomSnapshotCard.vue b/apps/application/app/components/test-case/DomSnapshotCard.vue
index b7f37004..86ec0015 100644
--- a/apps/application/app/components/test-case/DomSnapshotCard.vue
+++ b/apps/application/app/components/test-case/DomSnapshotCard.vue
@@ -35,6 +35,14 @@ const {
   lazy: true,
 });
 
+// The card renders only for a usable snapshot; the page reads `available` to show
+// its jump chip for exactly the same condition.
+const emit = defineEmits<{ available: [value: boolean] }>();
+const available = computed(
+  () => !pending.value && !error.value && snapshot.value?.status === 'ok' && !!snapshot.value.html,
+);
+watch(available, (value) => emit('available', value), { immediate: true });
+
 // Highlighting hundreds of KB of HTML would freeze the tab — show a capped
 // excerpt inline and offer the full document via copy.
 const DISPLAY_CAP = 20_000;
@@ -58,7 +66,7 @@ defineExpose({ reveal: () => card.value?.reveal?.() });
 <template>
   <component
     :is="cardComponent"
-    v-if="!pending && !error && snapshot?.status === 'ok' && snapshot.html"
+    v-if="available && snapshot?.html"
     ref="card"
     v-bind="cardBind"
     icon="i-lucide-file-code"
diff --git a/apps/application/app/components/test-case/VisualDiffCard.vue b/apps/application/app/components/test-case/VisualDiffCard.vue
index 7692842b..79e61176 100644
--- a/apps/application/app/components/test-case/VisualDiffCard.vue
+++ b/apps/application/app/components/test-case/VisualDiffCard.vue
@@ -47,6 +47,12 @@ const {
 
 const diff = computed(() => (result.value?.status === 'ok' ? (result.value.diff ?? null) : null));
 
+// The card renders only for a usable diff; the page reads `available` to show
+// its jump chip for exactly the same condition.
+const emit = defineEmits<{ available: [value: boolean] }>();
+const available = computed(() => !pending.value && !error.value && !!diff.value);
+watch(available, (value) => emit('available', value), { immediate: true });
+
 const view = ref<'overlay' | 'side-by-side'>('overlay');
 const viewItems = [
   { label: 'Overlay', value: 'overlay' as const },
@@ -92,7 +98,7 @@ defineExpose({ reveal: () => card.value?.reveal?.() });
 <template>
   <component
     :is="cardComponent"
-    v-if="!pending && !error && diff"
+    v-if="available && diff"
     ref="card"
     v-bind="cardBind"
     icon="i-lucide-images"
diff --git a/apps/application/app/pages/test-run-cases/[id].vue b/apps/application/app/pages/test-run-cases/[id].vue
index 2b866622..595928ef 100644
--- a/apps/application/app/pages/test-run-cases/[id].vue
+++ b/apps/application/app/pages/test-run-cases/[id].vue
@@ -512,6 +512,12 @@ const sectionToAction: Record<string, () => void> = {
   },
 };
 
+// The lazily fetched cards report whether they rendered anything (no baseline,
+// no screenshot or no trace leaves them empty), so their chips follow the card.
+const envDiffAvailable = ref(false);
+const visualDiffAvailable = ref(false);
+const domSnapshotAvailable = ref(false);
+
 // The jump-chip row under the error — the same section map the AI citations
 // use, so the funnel has a map even when no AI is configured. Each chip is
 // gated by the same availability condition as the section it targets: a chip
@@ -523,9 +529,9 @@ const sectionChips = computed(() =>
       label: 'Test source',
       available: Boolean(testCase.value?.testSourceFrames?.length || testCase.value?.testSource || hasTrace.value),
     },
-    { id: 'environmentDiff', label: 'Environment diff', available: Boolean(testCase.value?.testRun?.id) },
-    { id: 'visualDiff', label: 'Visual diff', available: Boolean(testCase.value?.testRun?.id) },
-    { id: 'domSnapshot', label: 'DOM snapshot', available: Boolean(testCase.value?.testRun?.id) },
+    { id: 'environmentDiff', label: 'Environment diff', available: envDiffAvailable.value },
+    { id: 'visualDiff', label: 'Visual diff', available: visualDiffAvailable.value },
+    { id: 'domSnapshot', label: 'DOM snapshot', available: domSnapshotAvailable.value },
     { id: 'ariaSnapshot', label: 'ARIA snapshot', available: Boolean(testCase.value?.ariaSnapshot) },
     { id: 'screenshots', label: 'Screenshots', available: true },
     { id: 'console', label: 'Console', available: Boolean((testCase.value as any)?.consoleLogs?.length) },
@@ -664,8 +670,8 @@ provide(clusterSectionLocatorKey, {
               />
             </div>
             <div class="grid grid-cols-1 xl:grid-cols-[3fr_2fr] gap-4">
-              <!-- Right rail (DOM-first so it follows the error on mobile) -->
-              <div class="space-y-4 lg:order-2">
+              <!-- Right rail (DOM-first so it follows the error below the xl split) -->
+              <div class="space-y-4 xl:order-2">
                 <TestCaseVerdictCard
                   :test-case="(testCase as any) ?? null"
                   :history="historyData"
@@ -678,7 +684,7 @@ provide(clusterSectionLocatorKey, {
               </div>
 
               <!-- Left column: evidence funnel -->
-              <div class="space-y-4 lg:order-1 min-w-0">
+              <div class="space-y-4 xl:order-1 min-w-0">
                 <!-- Test source: the failing line and its callers; full trace call stack when available -->
                 <TestSourceCard
                   v-if="testCase?.testSourceFrames?.length || testCase?.testSource || hasTrace"
@@ -719,6 +725,7 @@ provide(clusterSectionLocatorKey, {
                   storage-key="case-env-diff"
                   :run-id="testCase.testRun.id"
                   :test-runs-case-id="Number(testCaseId)"
+                  @available="envDiffAvailable = $event"
                 />
 
                 <!-- What changed visually since the last pass -->
@@ -728,6 +735,7 @@ provide(clusterSectionLocatorKey, {
                   storage-key="case-visual-diff"
                   :run-id="testCase.testRun.id"
                   :test-runs-case-id="Number(testCaseId)"
+                  @available="visualDiffAvailable = $event"
                 />
 
                 <!-- Console output -->
@@ -778,6 +786,7 @@ provide(clusterSectionLocatorKey, {
                   storage-key="case-dom-snapshot"
                   :run-id="testCase.testRun.id"
                   :test-runs-case-id="Number(testCaseId)"
+                  @available="domSnapshotAvailable = $event"
                 />
               </div>
             </div>

From 0158b950b3d0553030dbf2ab958e43616689c742 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 04:10:09 +0000
Subject: [PATCH 3/9] fix(ui): render the failing locator as code and label the
 environment diff sides

The alternative-locators panel printed the failing locator as a serialized
object (getByRole({"role":"row"})) while every alternative rendered as
Playwright source. A shared locatorExpression() formatter turns the parsed
{ method, args } back into the expression a developer writes, highlighted
through LocatorCode and used for the copy and fix-prompt text too. The
environment diff now captions its two sides as this run and the last pass.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 .../components/shared/EnvironmentDiffCard.vue |  7 +++
 .../components/shared/LocatorHealingPanel.vue | 13 ++---
 apps/application/shared/locator-healing.ts    | 49 +++++++++++++++++++
 .../tests/unit/locator-healing.test.ts        | 26 ++++++++++
 4 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/apps/application/app/components/shared/EnvironmentDiffCard.vue b/apps/application/app/components/shared/EnvironmentDiffCard.vue
index b10f4875..7b67deae 100644
--- a/apps/application/app/components/shared/EnvironmentDiffCard.vue
+++ b/apps/application/app/components/shared/EnvironmentDiffCard.vue
@@ -89,6 +89,13 @@ defineExpose({ reveal: () => card.value?.reveal?.() });
     />
 
     <div v-else class="space-y-2">
+      <!-- Which side is which: the failing run on the left, its last pass on the right -->
+      <div class="flex items-center gap-1.5 text-xs font-medium px-3">
+        <span class="hidden sm:block sm:w-40 shrink-0" aria-hidden="true" />
+        <span class="text-red-700 dark:text-red-400">This run</span>
+        <UIcon name="i-lucide-arrow-left" class="size-3 shrink-0 text-gray-400" />
+        <span class="text-green-700 dark:text-green-400">Last pass, run #{{ diff?.baseline?.runId }}</span>
+      </div>
       <div
         v-for="entry in meaningful"
         :key="entry.key"
diff --git a/apps/application/app/components/shared/LocatorHealingPanel.vue b/apps/application/app/components/shared/LocatorHealingPanel.vue
index 0be4afc3..64490cad 100644
--- a/apps/application/app/components/shared/LocatorHealingPanel.vue
+++ b/apps/application/app/components/shared/LocatorHealingPanel.vue
@@ -5,7 +5,7 @@
  * note. Used on both the cluster detail page and the test-case detail page.
  */
 
-import { recommendLocatorFix } from '#shared/locator-healing';
+import { recommendLocatorFix, locatorExpression } from '#shared/locator-healing';
 import type { RankedLocator, LocatorFixRecommendation, LocatorHealingResult } from '#shared/locator-healing.types';
 import type { AiStepIntent, TraceInfo } from '~~/types/api';
 import SectionCard from './SectionCard.vue';
@@ -142,15 +142,16 @@ const sourceClass = computed(() => {
   }
 });
 
+/** The failing locator as Playwright source, the same form every alternative renders in. */
 const failingLocatorText = computed(() => {
   const f = healing.value?.failingLocator;
-  return f ? `${f.method}(${JSON.stringify(f.args)})` : '';
+  return f ? locatorExpression(f.method, f.args) : '';
 });
 
 /**
- * Quote/whitespace/bracket-insensitive form so the failing locator (JSON-ish
- * rendering) can be compared against an AI-step intent locator (Playwright
- * source style) — both collapse to `getbyrole(textbox,name:email)`.
+ * Quote/whitespace/bracket-insensitive form so the failing locator can be
+ * compared against an AI-step intent locator regardless of quoting or spacing
+ * — both collapse to `getbyrole(textbox,name:email)`.
  */
 function normalizeLocator(text: string): string {
   return text.toLowerCase().replace(/[\s'"`{}[\]]/g, '');
@@ -403,7 +404,7 @@ const visibleAlternatives = computed<RankedLocator[]>(() =>
     <div v-if="healing?.failingLocator" class="bg-elevated rounded p-2 mb-3 border border-red-200 dark:border-red-800">
       <div class="flex items-center gap-2">
         <UIcon name="i-lucide-x-circle" class="size-4 text-red-500 shrink-0" />
-        <code class="text-xs font-mono text-red-600 dark:text-red-400 flex-1 truncate">{{ failingLocatorText }}</code>
+        <LocatorCode :locator="failingLocatorText" truncate class="text-xs flex-1 min-w-0" />
         <UButton
           size="xs"
           variant="ghost"
diff --git a/apps/application/shared/locator-healing.ts b/apps/application/shared/locator-healing.ts
index 367ffe1b..2d8094b1 100644
--- a/apps/application/shared/locator-healing.ts
+++ b/apps/application/shared/locator-healing.ts
@@ -204,3 +204,52 @@ export async function locatorSignatureFromExpression(expr: string): Promise<stri
   const method = locatorExpressionMethod(expr) ?? '';
   return sha256Hex(`${method} ${JSON.stringify(locatorExpressionStrings(expr))}`);
 }
+
+/**
+ * The positional first argument of each Playwright locator method, as keyed by
+ * the parsed failing locator (`{ method, args }`); every other arg key is an
+ * option. `getByAltText` shares the `text` key with `getByText`.
+ */
+const LOCATOR_PRIMARY_ARG: Record<string, string> = {
+  getByTestId: 'testId',
+  getByRole: 'role',
+  getByText: 'text',
+  getByLabel: 'label',
+  getByPlaceholder: 'placeholder',
+  getByAltText: 'text',
+  getByTitle: 'title',
+  locator: 'selector',
+  'page.locator': 'selector',
+};
+
+/** A parsed arg value as Playwright source: quoted string, bare literal, or regex text as-is. */
+function locatorArgLiteral(value: unknown): string {
+  if (typeof value === 'string') {
+    if (value.startsWith('/') && /\/[a-z]*$/.test(value) && value.length > 1) return value;
+    return `'${value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (value == null) return 'undefined';
+  return JSON.stringify(value);
+}
+
+/**
+ * Render a parsed locator back to the Playwright expression a developer would
+ * write, e.g. `{ method: 'getByRole', args: { role: 'row', name: 'Total' } }`
+ * → `getByRole('row', { name: 'Total' })`. The inverse of the server-side
+ * expression parser, so the failing locator reads like every alternative.
+ */
+export function locatorExpression(method: string, args: Record<string, unknown> | null | undefined): string {
+  const a = args ?? {};
+  const parts: string[] = [];
+  if (Array.isArray(a.args) && !(method in LOCATOR_PRIMARY_ARG)) {
+    return `${method}(${a.args.map(locatorArgLiteral).join(', ')})`;
+  }
+  const primary = LOCATOR_PRIMARY_ARG[method];
+  if (primary && a[primary] !== undefined) parts.push(locatorArgLiteral(a[primary]));
+  const options = Object.entries(a).filter(([key, value]) => key !== primary && value !== undefined);
+  if (options.length) {
+    parts.push(`{ ${options.map(([key, value]) => `${key}: ${locatorArgLiteral(value)}`).join(', ')} }`);
+  }
+  return `${method}(${parts.join(', ')})`;
+}
diff --git a/apps/application/tests/unit/locator-healing.test.ts b/apps/application/tests/unit/locator-healing.test.ts
index 26905391..a8c52a2d 100644
--- a/apps/application/tests/unit/locator-healing.test.ts
+++ b/apps/application/tests/unit/locator-healing.test.ts
@@ -6,6 +6,7 @@ import {
   locatorIdentityEquals,
   alternativeUsesName,
   CONVENTION_STABILITY_FLOOR,
+  locatorExpression,
 } from '#shared/locator-healing';
 import type { RankedLocator } from '#shared/locator-healing.types';
 import { extractLeafSelector } from '#shared/error-fingerprint';
@@ -296,3 +297,28 @@ describe('alternativeUsesName', () => {
     expect(alternativeUsesName(alt('getByLabel', { label: 'Email' }), '  ')).toBe(false);
   });
 });
+
+describe('locatorExpression', () => {
+  test('renders the positional arg and options as Playwright source', () => {
+    expect(locatorExpression('getByRole', { role: 'row' })).toBe("getByRole('row')");
+    expect(locatorExpression('getByRole', { role: 'button', name: 'Pay now', exact: true })).toBe(
+      "getByRole('button', { name: 'Pay now', exact: true })",
+    );
+    expect(locatorExpression('getByRole', { role: 'heading', level: 2 })).toBe("getByRole('heading', { level: 2 })");
+    expect(locatorExpression('getByLabel', { label: 'Email address' })).toBe("getByLabel('Email address')");
+    expect(locatorExpression('getByTestId', { testId: 'submit' })).toBe("getByTestId('submit')");
+    expect(locatorExpression('locator', { selector: '.btn-primary' })).toBe("locator('.btn-primary')");
+  });
+
+  test('keeps regex options verbatim and escapes quotes', () => {
+    expect(locatorExpression('getByText', { text: "it's here" })).toBe("getByText('it\\'s here')");
+    expect(locatorExpression('getByRole', { role: 'link', name: '/^Docs/i' })).toBe(
+      "getByRole('link', { name: /^Docs/i })",
+    );
+  });
+
+  test('falls back to positional args for an unknown method', () => {
+    expect(locatorExpression('frameLocator', { args: ['#frame'] })).toBe("frameLocator('#frame')");
+    expect(locatorExpression('getByRole', {})).toBe('getByRole()');
+  });
+});

From 01f696dd18c43dd8b371cfcdc99335d4ea607db1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 04:11:19 +0000
Subject: [PATCH 4/9] feat(ui): link attempt chips to their sibling executions

Every attempt is its own execution row, but the Attempts tile only showed
badges with a title. The execution detail now carries the sibling execution
id per attempt (server and demo share the handler), so each chip links to
that attempt while the viewed one stays a ringed, non-link chip. The
recent-executions strip on the verdict card gets a group label and a
visible keyboard focus on each square.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 .../components/test-case/TestCaseSummary.vue  | 68 ++++++++++++++-----
 .../test-case/TestCaseVerdictCard.vue         |  9 ++-
 .../application/shared/handlers/test-cases.ts | 22 +++++-
 apps/application/types/api.ts                 | 21 ++++--
 apps/docs/ui-overview.md                      |  4 +-
 5 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/apps/application/app/components/test-case/TestCaseSummary.vue b/apps/application/app/components/test-case/TestCaseSummary.vue
index 786bf4e3..0ba6a7bd 100644
--- a/apps/application/app/components/test-case/TestCaseSummary.vue
+++ b/apps/application/app/components/test-case/TestCaseSummary.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { isPiwiAnnotation } from '@piwitests/core/test-meta';
-import type { TestCaseResult, EntityLinkInfo, TestRunScmMetadata, TestRunCiMetadata } from '~~/types/api';
+import type {
+  AttemptOutcome,
+  TestCaseResult,
+  EntityLinkInfo,
+  TestRunScmMetadata,
+  TestRunCiMetadata,
+} from '~~/types/api';
 import type { BrowserConfig } from '#shared/types';
 
 interface HistoricalTiming {
@@ -64,7 +70,7 @@ const startedAtMs = computed<number | null>(() => props.testCase?.startedAt ?? n
 
 const showCiGroup = computed(() => !!(props.ciInfo || props.environment));
 
-/** Per-attempt outcomes `{ retry, status, duration, startedAt }`, oldest first. */
+/** Per-attempt outcomes, oldest first. */
 const attempts = computed(() => props.testCase?.attempts ?? null);
 
 function attemptColor(status: string): 'success' | 'error' | 'neutral' {
@@ -73,10 +79,20 @@ function attemptColor(status: string): 'success' | 'error' | 'neutral' {
   return 'neutral';
 }
 
-function attemptTitle(a: { retry: number; status: string; duration: number; startedAt: number | null }): string {
+function attemptTitle(a: AttemptOutcome): string {
   const when = a.startedAt ? ` at ${new Date(a.startedAt).toLocaleString()}` : '';
   return `Attempt ${a.retry + 1}: ${a.status} (${Math.round(a.duration)} ms)${when}`;
 }
+
+// The execution being viewed is the row whose `retries` equals the attempt's
+// retry index; every other attempt links to its own sibling execution row.
+function isCurrentAttempt(a: AttemptOutcome): boolean {
+  return a.retry === (props.testCase?.retries ?? 0);
+}
+
+function attemptLink(a: AttemptOutcome): string | null {
+  return !isCurrentAttempt(a) && a.executionId ? `/test-run-cases/${a.executionId}` : null;
+}
 </script>
 
 <template>
@@ -175,19 +191,39 @@ function attemptTitle(a: { retry: number; status: string; duration: number; star
             <StatTile label="Attempts" size="sm">
               <span v-if="testCase?.status === 'didnotrun'" class="text-gray-400">—</span>
               <template v-else-if="attempts && attempts.length > 1">
-                <div class="flex items-center gap-1 flex-wrap">
-                  <UBadge
-                    v-for="a in attempts"
-                    :key="a.retry"
-                    :color="attemptColor(a.status)"
-                    variant="soft"
-                    size="sm"
-                    class="font-mono"
-                    :title="attemptTitle(a)"
-                  >
-                    {{ a.retry + 1 }}/{{ attempts.length }}
-                    <UIcon :name="a.status === 'passed' ? 'i-lucide-check' : 'i-lucide-x'" class="w-3 h-3" />
-                  </UBadge>
+                <div
+                  class="flex items-center gap-1 flex-wrap"
+                  role="group"
+                  aria-label="Attempts of this test in this run"
+                >
+                  <template v-for="a in attempts" :key="a.retry">
+                    <!-- A sibling attempt links to its own execution; the viewed one is the ringed, non-link chip -->
+                    <NuxtLink
+                      v-if="attemptLink(a)"
+                      :to="attemptLink(a)!"
+                      :title="`${attemptTitle(a)} — open this attempt`"
+                      :aria-label="`Open attempt ${a.retry + 1} of ${attempts.length}: ${a.status}`"
+                      class="inline-flex rounded-md outline-none focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary hover:opacity-80"
+                    >
+                      <UBadge :color="attemptColor(a.status)" variant="soft" size="sm" class="font-mono">
+                        {{ a.retry + 1 }}/{{ attempts.length }}
+                        <UIcon :name="a.status === 'passed' ? 'i-lucide-check' : 'i-lucide-x'" class="w-3 h-3" />
+                      </UBadge>
+                    </NuxtLink>
+                    <UBadge
+                      v-else
+                      :color="attemptColor(a.status)"
+                      variant="soft"
+                      size="sm"
+                      class="font-mono"
+                      :class="isCurrentAttempt(a) ? 'ring-2 ring-offset-1 ring-primary' : ''"
+                      :title="isCurrentAttempt(a) ? `${attemptTitle(a)} — this execution` : attemptTitle(a)"
+                      :aria-current="isCurrentAttempt(a) ? 'true' : undefined"
+                    >
+                      {{ a.retry + 1 }}/{{ attempts.length }}
+                      <UIcon :name="a.status === 'passed' ? 'i-lucide-check' : 'i-lucide-x'" class="w-3 h-3" />
+                    </UBadge>
+                  </template>
                 </div>
               </template>
               <!-- One attempt, or a row recorded before attempts were stored:
diff --git a/apps/application/app/components/test-case/TestCaseVerdictCard.vue b/apps/application/app/components/test-case/TestCaseVerdictCard.vue
index c62084d4..d3235f6b 100644
--- a/apps/application/app/components/test-case/TestCaseVerdictCard.vue
+++ b/apps/application/app/components/test-case/TestCaseVerdictCard.vue
@@ -95,6 +95,9 @@ const verdict = computed(() => {
   return { streak, lastPass, total: h.length, anchorFailing: isFail(h[anchor]?.status) };
 });
 
+// Names the strip for assistive tech: the visible caption labels the group of links.
+const stripLabelId = useId();
+
 const squareClass = (status: string) => ({
   'bg-red-500 hover:bg-red-600': isFail(status),
   'bg-green-500 hover:bg-green-600': status === 'passed',
@@ -156,8 +159,8 @@ const squareClass = (status: string) => ({
 
         <!-- Clickable recent-status strip -->
         <div v-if="strip.length > 1">
-          <p class="text-xs text-gray-400 mb-1">Recent executions of this test (oldest → newest)</p>
-          <div class="flex items-center gap-1 flex-wrap">
+          <p :id="stripLabelId" class="text-xs text-gray-400 mb-1">Recent executions of this test (oldest → newest)</p>
+          <div class="flex items-center gap-1 flex-wrap" role="group" :aria-labelledby="stripLabelId">
             <UTooltip
               v-for="point in strip"
               :key="point.id"
@@ -167,7 +170,7 @@ const squareClass = (status: string) => ({
                 :to="`/test-run-cases/${point.id}`"
                 :aria-label="`Execution in run #${point.runId}: ${formatStatusLabel(point.status)}`"
                 :aria-current="point.id === currentId ? 'true' : undefined"
-                class="size-3.5 rounded-sm inline-block transition-colors"
+                class="size-3.5 rounded-sm inline-block transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
                 :class="[squareClass(point.status), point.id === currentId ? 'ring-2 ring-offset-1 ring-primary' : '']"
               />
             </UTooltip>
diff --git a/apps/application/shared/handlers/test-cases.ts b/apps/application/shared/handlers/test-cases.ts
index 1ef958fb..76647e74 100644
--- a/apps/application/shared/handlers/test-cases.ts
+++ b/apps/application/shared/handlers/test-cases.ts
@@ -158,6 +158,26 @@ export async function getTestRunCase(
   // Large evidence payloads are content-addressed; legacy rows keep them inline.
   const evidence = await inlineCasePayloads(db, trc);
 
+  // Every attempt is its own execution row (unique on run + test case + retries
+  // + browser), so each stored attempt maps to the sibling row that holds it.
+  const siblingRows = await db
+    .select({ id: testRunsCases.id, retries: testRunsCases.retries })
+    .from(testRunsCases)
+    .where(
+      and(
+        eq(testRunsCases.testRunId, trc.testRunId),
+        eq(testRunsCases.testCaseId, trc.testCaseId),
+        trc.browserName ? eq(testRunsCases.browserName, trc.browserName) : sql`${testRunsCases.browserName} IS NULL`,
+      ),
+    );
+  const executionByRetry = new Map(siblingRows.map((r: any) => [r.retries ?? 0, r.id as number]));
+  const attempts = Array.isArray(trc.attempts)
+    ? (trc.attempts as Array<{ retry: number }>).map((a) => ({
+        ...a,
+        executionId: executionByRetry.get(a.retry) ?? null,
+      }))
+    : null;
+
   const [[testCase], [testRun], reportList, attachmentList] = await Promise.all([
     db
       .select()
@@ -342,7 +362,7 @@ export async function getTestRunCase(
     duration: trc.duration,
     error: trc.error,
     retries: trc.retries,
-    attempts: trc.attempts ?? null,
+    attempts,
     steps: trc.steps,
     testSource: evidence.testSource,
     testSourceFrames: evidence.testSourceFrames,
diff --git a/apps/application/types/api.ts b/apps/application/types/api.ts
index 2a042eea..e538a94b 100644
--- a/apps/application/types/api.ts
+++ b/apps/application/types/api.ts
@@ -701,6 +701,19 @@ export interface AiStepIntent {
 /**
  * Test case result (for a specific test run)
  */
+/**
+ * One attempt of a test within a run. Every attempt is its own execution row;
+ * `executionId` is that sibling row's id (null when the row is not stored,
+ * e.g. rows recorded before attempts were kept).
+ */
+export interface AttemptOutcome {
+  retry: number;
+  status: string;
+  duration: number;
+  startedAt: number | null;
+  executionId?: number | null;
+}
+
 export interface TestCaseResult {
   /** The execution id (a test_runs_cases row): this test case run within this run. */
   executionId: number;
@@ -722,8 +735,8 @@ export interface TestCaseResult {
   testSourceFrames?: TestSourceFrame[] | null;
   failureClusterId?: number | null;
   retries?: number | null;
-  /** Per-attempt outcomes `{ retry, status, duration, startedAt }`, oldest first. */
-  attempts?: Array<{ retry: number; status: string; duration: number; startedAt: number | null }> | null;
+  /** Per-attempt outcomes, oldest first. */
+  attempts?: AttemptOutcome[] | null;
   steps?: PerformanceStep[] | null;
   stepEvents?: TestStepEvent[] | null;
   slowestStep?: string | null;
@@ -1082,8 +1095,8 @@ export interface TestCaseHistoryPoint {
   duration: number | null;
   error: string | null;
   retries: number | null;
-  /** Per-attempt outcomes `{ retry, status, duration, startedAt }`, oldest first. */
-  attempts?: Array<{ retry: number; status: string; duration: number; startedAt: number | null }> | null;
+  /** Per-attempt outcomes, oldest first. */
+  attempts?: AttemptOutcome[] | null;
   startTime: string | Date;
   runStatus: string;
 }
diff --git a/apps/docs/ui-overview.md b/apps/docs/ui-overview.md
index 44867527..2502a400 100644
--- a/apps/docs/ui-overview.md
+++ b/apps/docs/ui-overview.md
@@ -116,7 +116,9 @@ A failing execution opens diagnosis-first: the error, a verdict, the cluster it
 evidence funnel running from the call stack down to the ARIA snapshot — deeper still when a trace is
 attached. All of it, plus the bundled trace viewer, is described in
 [Failure evidence](./evidence). The summary shows one chip per **attempt** (with its outcome and
-duration) when a test retried, so "how did this execution get here" is answerable at a glance.
+duration) when a test retried, so "how did this execution get here" is answerable at a glance; every
+attempt is its own execution, and each chip links to that attempt's page while the one you are viewing
+is ringed.
 
 ## Failure cluster detail
 

From 67b37c4c3f5aa2a12179e024dc226ede7be104d7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 04:12:25 +0000
Subject: [PATCH 5/9] fix(ui): fix the AI card copy, the missing-cluster state
 and the demo Share button

The AI card's not-configured copy named an Export menu item that does not
exist; it now points at the card's own Copy prompt button. A missing
cluster renders through the shared ErrorState like every other detail
page. The Share button is hidden in demo mode, where the share-link routes
are not mirrored.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 .../app/components/test-case/TestCaseAiCard.vue     |  2 +-
 .../application/app/pages/failure-clusters/[id].vue | 13 +++++++++++--
 apps/application/app/pages/test-run-cases/[id].vue  |  5 ++++-
 apps/docs/share-links.md                            |  3 +++
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/application/app/components/test-case/TestCaseAiCard.vue b/apps/application/app/components/test-case/TestCaseAiCard.vue
index 9afbb3f5..5a4b9fdb 100644
--- a/apps/application/app/components/test-case/TestCaseAiCard.vue
+++ b/apps/application/app/components/test-case/TestCaseAiCard.vue
@@ -254,7 +254,7 @@ const showRunning = computed(
             AI diagnosis is not configured <HelpHint topic="cluster.ai-setup" />
           </p>
           <p class="text-xs mt-2 max-w-xs mx-auto">
-            Use <strong>Export → AI context</strong> in the header to grab the full evidence bundle for your own AI
+            Use <strong>Copy prompt</strong> in this card's header to grab the full evidence bundle for your own AI
             tool, or configure a provider.
           </p>
           <UButton to="/settings/ai" size="xs" color="neutral" variant="outline" class="mt-3">
diff --git a/apps/application/app/pages/failure-clusters/[id].vue b/apps/application/app/pages/failure-clusters/[id].vue
index dd80a0c0..8e0d4f92 100644
--- a/apps/application/app/pages/failure-clusters/[id].vue
+++ b/apps/application/app/pages/failure-clusters/[id].vue
@@ -6,6 +6,8 @@ import { buildRetryCommand } from '~/utils/retry-command';
 
 const route = useRoute();
 const clusterId = parseInt(String(route.params.id));
+// Share links need the server; the public demo has no share-link routes.
+const isDemoMode = Boolean(useRuntimeConfig().public.demoMode);
 
 // Provide shared diagnosis/investigation state (consumed by ClusterInvestigation
 // and ClusterDiagnosis). Must run before the top-level await below so provide()
@@ -194,7 +196,10 @@ const breadcrumbItems = computed(() => [
           <BreadcrumbNav :items="breadcrumbItems" />
         </template>
         <template #right>
-          <ShareLinksModal v-if="cluster" :endpoint="`/api/failure-clusters/${cluster.id}/share-links`" />
+          <ShareLinksModal
+            v-if="cluster && !isDemoMode"
+            :endpoint="`/api/failure-clusters/${cluster.id}/share-links`"
+          />
           <ExportMenu
             v-if="cluster"
             :endpoint="`/api/failure-clusters/${cluster.id}/export`"
@@ -381,7 +386,11 @@ const breadcrumbItems = computed(() => [
         </div>
       </div>
 
-      <div v-else class="flex items-center justify-center h-64 text-gray-500">Cluster not found.</div>
+      <ErrorState v-else text="Cluster not found." icon="i-lucide-search-x" class="h-64">
+        <template #action>
+          <UButton to="/projects" size="xs" color="neutral" variant="outline">Back to projects</UButton>
+        </template>
+      </ErrorState>
     </template>
   </UDashboardPanel>
 
diff --git a/apps/application/app/pages/test-run-cases/[id].vue b/apps/application/app/pages/test-run-cases/[id].vue
index 595928ef..fc31784f 100644
--- a/apps/application/app/pages/test-run-cases/[id].vue
+++ b/apps/application/app/pages/test-run-cases/[id].vue
@@ -588,7 +588,10 @@ provide(clusterSectionLocatorKey, {
               <UIcon name="i-lucide-trending-up" class="size-3.5" />
               <span class="hidden sm:inline">Test case</span>
             </NuxtLink>
-            <ShareLinksModal v-if="testCase" :endpoint="`/api/test-run-cases/${testCase.id}/share-links`" />
+            <ShareLinksModal
+              v-if="testCase && !isDemoMode"
+              :endpoint="`/api/test-run-cases/${testCase.id}/share-links`"
+            />
             <ExportMenu
               v-if="testCase"
               :endpoint="`/api/test-run-cases/${testCase.id}/export`"
diff --git a/apps/docs/share-links.md b/apps/docs/share-links.md
index 0dd95cbb..b06d2e89 100644
--- a/apps/docs/share-links.md
+++ b/apps/docs/share-links.md
@@ -12,6 +12,9 @@ export time, the link renders the investigation as it stands when it is opened.
 Share links are **off by default**. Set `PIWI_SHARE_LINKS_ENABLED=true` to allow them — see the
 [configuration reference](./configuration#authentication).
 
+The [live demo](https://piwitests.dev/demo/) runs without a server, so it has no share links and hides the **Share**
+button.
+
 ## Creating a link
 
 On an execution page or a failure-cluster page, open **Share** (next to **Export**):

From 9ae98eb0b28c7736c1106935724bb68026a7cd12 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 04:13:14 +0000
Subject: [PATCH 6/9] refactor(ui): build the run retry command from one shared
 composable

The run summary and the failure-clusters tab each built their own retry
command, one with file:line and Playwright project and one without, so the
two buttons on the same run copied different commands. useRunRetryCommand
derives the failing set once from the run's execution rows (final attempt
per test and project) and shares the mode, so both buttons agree.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 apps/application/ARCHITECTURE.md              |  3 +-
 .../app/components/run/FailureGroups.vue      | 37 +++++----------
 .../app/components/run/RunSummary.vue         | 41 +++--------------
 .../app/composables/useRunRetryCommand.ts     | 46 +++++++++++++++++++
 apps/application/app/pages/test-runs/[id].vue |  6 ++-
 5 files changed, 71 insertions(+), 62 deletions(-)
 create mode 100644 apps/application/app/composables/useRunRetryCommand.ts

diff --git a/apps/application/ARCHITECTURE.md b/apps/application/ARCHITECTURE.md
index 648fa2c6..3a395e77 100644
--- a/apps/application/ARCHITECTURE.md
+++ b/apps/application/ARCHITECTURE.md
@@ -184,7 +184,8 @@ Shared building blocks worth knowing before writing new markup (`AGENTS.md` make
 (`useRunStream`, `useNotificationStream`), diagnosis (`useClusterDiagnosis`, `useStreamingDiagnosis`,
 `useDiagnosisNotification`), timeline (`useTimelineModel`, `useTimelineViewport`), fold/tree state
 (`useFoldedState`, `useFoldableSummary`, `useTreeViewCookie`), settings derivation (`useSettingsNav`,
-`useSettingsEnvState`), analytics scope, IDE preferences (`useOpenInIde`), desktop detection (`useIsDesktop`,
+`useSettingsEnvState`), analytics scope, the run page's retry command (`useRunRetryCommand` — one failing set and one
+shared mode for every copy button on the page), IDE preferences (`useOpenInIde`), desktop detection (`useIsDesktop`,
 `useTauri`), demo helpers, and small utilities (`useCopy` / `useCopyRich` — use these instead of hand-rolling
 `navigator.clipboard`, `useAiStatus`, `useChartTooltip`).
 
diff --git a/apps/application/app/components/run/FailureGroups.vue b/apps/application/app/components/run/FailureGroups.vue
index 03948a13..40c77f8a 100644
--- a/apps/application/app/components/run/FailureGroups.vue
+++ b/apps/application/app/components/run/FailureGroups.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TableColumn } from '@nuxt/ui';
-import type { FailureGroup } from '~~/types/api';
-import { buildRetryCommand } from '~/utils/retry-command';
+import type { FailureGroup, TestCaseResult } from '~~/types/api';
 
 const emit = defineEmits<{
   selectCluster: [clusterId: number];
@@ -10,6 +9,8 @@ const emit = defineEmits<{
 const props = defineProps<{
   /** Increments when the run finishes so this tab can refetch. */
   refreshKey?: number;
+  /** The run's execution rows — the retry command is built from these, same as the summary's. */
+  testCases: TestCaseResult[];
 }>();
 
 const route = useRoute();
@@ -34,28 +35,12 @@ watch(
 );
 
 const diagnosisClusterId = ref<number | null>(null);
-const { copy, copied } = useCopy();
-
-const allFailedCases = computed(() => {
-  if (!groups.value) return [];
-  return groups.value.flatMap((g) =>
-    g.cases
-      .filter((c) => !c.passedOnRetry)
-      .map((c) => ({
-        filePath: c.filePath,
-        title: c.title,
-        line: null,
-        projectName: null,
-      })),
-  );
-});
-
-const retryCommand = computed(() => buildRetryCommand(allFailedCases.value));
-
-function copyRetryCommand() {
-  const cmd = retryCommand.value;
-  if (cmd) copy(cmd, { toast: 'Retry command copied' });
-}
+const {
+  failedCases,
+  copyCommand: copyRetryCommand,
+  copied,
+  title: retryTitle,
+} = useRunRetryCommand(() => props.testCases);
 
 const columns: TableColumn<FailureGroup>[] = [
   { accessorKey: 'signature', header: createSortHeader<FailureGroup>('Signature') },
@@ -86,12 +71,12 @@ const totalCases = computed(() => groups.value?.reduce((sum, g) => sum + g.caseC
           <HelpHint topic="cluster.concept" />
         </p>
         <UButton
-          v-if="allFailedCases.length > 0"
+          v-if="failedCases.length > 0"
           size="xs"
           variant="outline"
           color="neutral"
           :icon="copied ? 'i-lucide-check' : 'i-lucide-play'"
-          :title="copied ? 'Copied!' : copyPreview(retryCommand)"
+          :title="retryTitle"
           @click="copyRetryCommand()"
         >
           Copy retry command
diff --git a/apps/application/app/components/run/RunSummary.vue b/apps/application/app/components/run/RunSummary.vue
index a0e48ff9..b1d163d5 100644
--- a/apps/application/app/components/run/RunSummary.vue
+++ b/apps/application/app/components/run/RunSummary.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TestRunDetails, ReportInfo } from '~~/types/api';
 import type { RetryMode } from '~/utils/retry-command';
-import { buildRetryCommand } from '~/utils/retry-command';
 
 const props = defineProps<{
   testRun: TestRunDetails;
@@ -38,8 +37,13 @@ const showStorage = computed(() => !!(storageStats.value?.totalFiles || props.fi
 const primaryReport = computed(() => props.allReports[0] ?? null);
 
 const { copy, copied } = useCopy();
-const retryMode = ref<RetryMode>('file-line');
-const retryCopied = ref(false);
+const {
+  mode: retryMode,
+  failedCases,
+  copyCommand: copyRetryCommand,
+  copied: retryCopied,
+  title: retryTitle,
+} = useRunRetryCommand(() => props.testRun?.testCases);
 
 // Inside the desktop shell the run-locally split button covers copying the
 // command ("Copy as command"), so the copy-only Retry button stays web-only.
@@ -48,37 +52,6 @@ onMounted(() => {
   desktopBridge.value = !!tauriCore();
 });
 
-const failedCases = computed(() => {
-  if (!props.testRun?.testCases) return [];
-  return props.testRun.testCases
-    .filter((tc) => tc.status === 'failed' || tc.status === 'timedout')
-    .map((tc) => ({
-      filePath: (tc.filePath || tc.location?.split(':')[0]) ?? '',
-      title: tc.title,
-      line: tc.location ? parseInt(tc.location.split(':')[1] ?? '', 10) || null : null,
-      projectName: (tc.browser as { projectName?: string } | null)?.projectName || null,
-    }));
-});
-
-function buildRetry() {
-  return buildRetryCommand(failedCases.value, { mode: retryMode.value });
-}
-
-async function copyRetryCommand() {
-  const cmd = buildRetry();
-  if (!cmd) return;
-  retryCopied.value = true;
-  await copy(cmd, { toast: 'Retry command copied' });
-  setTimeout(() => {
-    retryCopied.value = false;
-  }, 2000);
-}
-
-const retryTitle = computed(() => {
-  if (retryCopied.value) return 'Copied!';
-  return copyPreview(buildRetry());
-});
-
 function buildRunSummary() {
   const run = props.testRun;
   if (!run) return '';
diff --git a/apps/application/app/composables/useRunRetryCommand.ts b/apps/application/app/composables/useRunRetryCommand.ts
new file mode 100644
index 00000000..b761fcc9
--- /dev/null
+++ b/apps/application/app/composables/useRunRetryCommand.ts
@@ -0,0 +1,46 @@
+import type { TestCaseResult } from '~~/types/api';
+import type { RetryCase, RetryMode } from '~/utils/retry-command';
+import { buildRetryCommand } from '~/utils/retry-command';
+
+/**
+ * The run page's retry command, derived once from the run's execution rows so
+ * every "Copy retry command" button on the page copies the same command for the
+ * same failing set. The mode is page-level state shared by all callers.
+ *
+ * The failing set is one row per test and Playwright project: the final
+ * attempt (highest retry index) when its status is failed or timed out, so a
+ * test that passed on retry is never re-run. File, line and project come from
+ * the row itself, which makes the command exact.
+ */
+export function useRunRetryCommand(testCases: MaybeRefOrGetter<TestCaseResult[] | null | undefined>) {
+  const mode = useState<RetryMode>('run-retry-mode', () => 'file-line');
+
+  const failedCases = computed<RetryCase[]>(() => {
+    const finalAttempt = new Map<string, TestCaseResult>();
+    for (const tc of toValue(testCases) ?? []) {
+      const projectName = (tc.browser as { projectName?: string } | null)?.projectName ?? '';
+      const key = `${tc.testCaseId ?? tc.location ?? tc.title}|${projectName}`;
+      const prev = finalAttempt.get(key);
+      if (!prev || (tc.retries ?? 0) > (prev.retries ?? 0)) finalAttempt.set(key, tc);
+    }
+    return [...finalAttempt.values()]
+      .filter((tc) => tc.status === 'failed' || tc.status === 'timedout' || tc.status === 'timedOut')
+      .map((tc) => ({
+        filePath: (tc.filePath || tc.location?.split(':')[0]) ?? '',
+        title: tc.title,
+        line: tc.location ? parseInt(tc.location.split(':')[1] ?? '', 10) || null : null,
+        projectName: (tc.browser as { projectName?: string } | null)?.projectName || null,
+      }));
+  });
+
+  const command = computed(() => buildRetryCommand(failedCases.value, { mode: mode.value }));
+
+  const { copy, copied } = useCopy();
+  function copyCommand() {
+    if (command.value) copy(command.value, { toast: 'Retry command copied' });
+  }
+
+  const title = computed(() => (copied.value ? 'Copied!' : copyPreview(command.value)));
+
+  return { mode, failedCases, command, copyCommand, copied, title };
+}
diff --git a/apps/application/app/pages/test-runs/[id].vue b/apps/application/app/pages/test-runs/[id].vue
index d11edff7..350ac6c9 100644
--- a/apps/application/app/pages/test-runs/[id].vue
+++ b/apps/application/app/pages/test-runs/[id].vue
@@ -791,7 +791,11 @@ function handleSelectCluster(clusterId: number) {
         </template>
 
         <template #tab-failure-groups>
-          <FailureGroups :refresh-key="runRefreshKey" @select-cluster="handleSelectCluster" />
+          <FailureGroups
+            :refresh-key="runRefreshKey"
+            :test-cases="testRun?.testCases ?? []"
+            @select-cluster="handleSelectCluster"
+          />
         </template>
 
         <template #tab-regression>

From e59297e6904c998140bcfe100a2cb9c5d263b2a5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 05:26:34 +0000
Subject: [PATCH 7/9] feat(ui): show the error line and cluster badge on
 failing tree-view rows

The run page's tree view dropped the one-line error and the cluster badge
the flat list shows on failing rows, so switching views lost the very
information a failing run is opened for. Both now render on failing tree
rows with the same markup as the list.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 .../app/components/run/TestCasesList.vue      |  1 +
 .../app/components/run/TestCasesTree.vue      | 25 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/apps/application/app/components/run/TestCasesList.vue b/apps/application/app/components/run/TestCasesList.vue
index b96218d7..b4e2f0d6 100644
--- a/apps/application/app/components/run/TestCasesList.vue
+++ b/apps/application/app/components/run/TestCasesList.vue
@@ -435,6 +435,7 @@ defineExpose({ scrollToCase });
       :live-steps="liveSteps"
       :project-key="projectKey"
       :project-name="projectName"
+      :cluster-names="clusterNames"
       class="flex-1 min-h-0"
     />
 
diff --git a/apps/application/app/components/run/TestCasesTree.vue b/apps/application/app/components/run/TestCasesTree.vue
index 5d8e6af9..e394f593 100644
--- a/apps/application/app/components/run/TestCasesTree.vue
+++ b/apps/application/app/components/run/TestCasesTree.vue
@@ -13,8 +13,16 @@ const props = defineProps<{
   /** Piwi project id + name, threaded so the IDE opener can resolve a workspace root. */
   projectKey?: string | number | null;
   projectName?: string | null;
+  /** Failure-cluster id → display name, for the cluster badges on failing rows. */
+  clusterNames?: Record<number, string> | null;
 }>();
 
+// A failing row always identifies its cluster from `failureClusterId` alone —
+// a name the page has not resolved yet falls back to the id, never to no badge.
+function clusterLabel(id: number): string {
+  return props.clusterNames?.[id] ?? `Cluster #${id}`;
+}
+
 const suiteLookup = computed(() => {
   const map = new Map<string, { mode: string; annotations: Array<{ type: string; description?: string }> }>();
   for (const s of props.suites) {
@@ -326,6 +334,15 @@ const flatRows = computed<FlatRow[]>(() => {
             :max-tags="3"
             class="shrink-0"
           />
+          <NuxtLink
+            v-if="row.test.failureClusterId"
+            :to="`/failure-clusters/${row.test.failureClusterId}`"
+            class="shrink-0"
+          >
+            <UBadge color="info" variant="subtle" size="xs" class="max-w-44">
+              <span class="truncate">{{ clusterLabel(row.test.failureClusterId) }}</span>
+            </UBadge>
+          </NuxtLink>
           <div class="flex items-center gap-1.5 sm:gap-2 shrink-0 ml-auto">
             <template v-if="row.test.status === 'running'">
               <TestRowLiveStep
@@ -358,6 +375,14 @@ const flatRows = computed<FlatRow[]>(() => {
               <DurationValue :ms="row.test.wastedTimeMs" unit-class="opacity-60" no-title />
             </span>
           </div>
+          <!-- The one-line error under a failing row, the same as the flat list shows -->
+          <p
+            v-if="isFailedStatus(row.test.status) && row.test.error"
+            class="basis-full min-w-0 pl-6 text-xs text-rose-600 dark:text-rose-400 truncate"
+            :title="row.test.error"
+          >
+            {{ row.test.error }}
+          </p>
         </div>
       </template>
 

From 697dc418d8ca68cdb8ccad0e54abf90b4866e111 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 16:54:17 +0000
Subject: [PATCH 8/9] fix(ui): render error text with its ANSI colors instead
 of raw escape codes

Lists, history cells and step messages printed the stored error verbatim,
so Playwright's ANSI codes showed up as [2m and [31m fragments, in a red
that competed with the status itself. A shared ErrorText component renders
the codes as colors on a muted base: one collapsed, truncated line for
lists and cells, the full block for a step's message.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 apps/application/AGENTS.md                    |  2 +-
 apps/application/ARCHITECTURE.md              |  7 ++-
 .../cluster/ClusterTestEvidence.vue           |  4 +-
 .../app/components/run/TestCasesList.vue      | 16 +-----
 .../app/components/run/TestCasesTree.vue      | 10 ++--
 .../app/components/shared/ErrorText.vue       | 37 +++++++++++++
 .../application/app/pages/test-cases/[id].vue |  8 +--
 .../app/pages/test-run-cases/[id].vue         | 54 ++++++-------------
 8 files changed, 66 insertions(+), 72 deletions(-)
 create mode 100644 apps/application/app/components/shared/ErrorText.vue

diff --git a/apps/application/AGENTS.md b/apps/application/AGENTS.md
index 3c1225b2..172187ab 100644
--- a/apps/application/AGENTS.md
+++ b/apps/application/AGENTS.md
@@ -100,7 +100,7 @@ those fields — intentional).
 `app/components/shared/` holds the building blocks — **prefer them over re-implementing**. `SectionCard` /
 `CollapsibleSectionCard` (headers + folding), `EmptyState` / `LoadingState` / `ErrorState`, `StatTile` + `StatTileGrid`
 (never hand-rolled tile markup), `FilterToolbar`, `TableScroller`, `NavbarActions`, `BreadcrumbNav`, `ChartCard`,
-`DurationValue`, `DiffPatch` / `DiffFile`, `HelpHint`, `DocLink`, `EnvManagedBadge` / `EnvManagedAlert`,
+`DurationValue`, `ErrorText` (never print a raw error string — it carries ANSI codes), `DiffPatch` / `DiffFile`, `HelpHint`, `DocLink`, `EnvManagedBadge` / `EnvManagedAlert`,
 `SettingsField`, `OpenInIdeLink`. See [`ARCHITECTURE.md`](ARCHITECTURE.md) for what each one does.
 
 ### Responsive / mobile (MUST follow)
diff --git a/apps/application/ARCHITECTURE.md b/apps/application/ARCHITECTURE.md
index 3a395e77..bc78abea 100644
--- a/apps/application/ARCHITECTURE.md
+++ b/apps/application/ARCHITECTURE.md
@@ -167,9 +167,12 @@ Shared building blocks worth knowing before writing new markup (`AGENTS.md` make
   y-axis) / `ChartTooltip` / `ChartMarkerLines` / `ChartLegend` / `ChartMarkerTooltip`, `MiniRunBars`,
   `DurationValue` (tight `210ms` via
   the pure `splitDuration`), `CodeBlock`, `MarkdownPreview`, `DiffPatch` / `DiffFile`, `LocatorCode` (a locator
-  expression syntax-highlighted through `@piwitests/picker-dom`'s `tokenizeLocator`).
+  expression syntax-highlighted through `@piwitests/picker-dom`'s `tokenizeLocator`), `ErrorText` (error text with
+  its ANSI colors rendered — a one-line `line` preview for lists and cells, or the full `block`).
 - **Navigation & actions** — `NavbarActions` (every `UDashboardNavbar` `#right` group; labels collapse to icons below
-  `sm`), `BreadcrumbNav` (drop-in for `UBreadcrumb`, collapses ancestors below `sm`), `OpenInIdeLink` +
+  `xl`), `BreadcrumbNav` (drop-in for `UBreadcrumb` and the page title of every detail page — the navbar never
+  repeats it; only the current crumb truncates, middle levels hide below `2xl`, ancestors collapse into a dropdown
+  below `sm`), `OpenInIdeLink` +
   `OpenInIdeSettingsModal`, `DocLink`, `LinkChip` / `EntityLinks`.
 - **Help & settings** — `HelpHint` (topic keys from `app/utils/help-content.ts`), `SettingsField`, `EnvManagedBadge`,
   `EnvManagedAlert`.
diff --git a/apps/application/app/components/cluster/ClusterTestEvidence.vue b/apps/application/app/components/cluster/ClusterTestEvidence.vue
index 56bc6c72..4c35162a 100644
--- a/apps/application/app/components/cluster/ClusterTestEvidence.vue
+++ b/apps/application/app/components/cluster/ClusterTestEvidence.vue
@@ -243,9 +243,7 @@ const evidenceChips = computed(() => {
         <div class="divide-y divide-default">
           <div v-for="(step, idx) in failingSteps" :key="idx" class="px-3 py-2 space-y-0.5">
             <p class="text-xs font-medium text-gray-700 dark:text-gray-300">{{ idx + 1 }}. {{ step.title }}</p>
-            <p v-if="step.error?.message" class="text-xs font-mono text-red-500 whitespace-pre-wrap break-all">
-              {{ step.error.message }}
-            </p>
+            <ErrorText v-if="step.error?.message" mode="block" :text="step.error.message" />
           </div>
         </div>
       </TestEvidenceSection>
diff --git a/apps/application/app/components/run/TestCasesList.vue b/apps/application/app/components/run/TestCasesList.vue
index b4e2f0d6..6a40d389 100644
--- a/apps/application/app/components/run/TestCasesList.vue
+++ b/apps/application/app/components/run/TestCasesList.vue
@@ -566,13 +566,7 @@ defineExpose({ scrollToCase });
                       <BrowserBadge :browser="item.browser" size="sm" class="mt-0.5" />
                     </div>
 
-                    <p
-                      v-if="isFailedStatus(item.status) && item.error"
-                      class="pl-6 text-xs text-rose-600 dark:text-rose-400 truncate"
-                      :title="item.error"
-                    >
-                      {{ item.error }}
-                    </p>
+                    <ErrorText v-if="isFailedStatus(item.status) && item.error" :text="item.error" class="pl-6" />
 
                     <OpenInIdeLink
                       v-if="item.location"
@@ -666,13 +660,7 @@ defineExpose({ scrollToCase });
                           </UBadge>
                         </NuxtLink>
                       </div>
-                      <p
-                        v-if="isFailedStatus(item.status) && item.error"
-                        class="text-xs text-rose-600 dark:text-rose-400 truncate"
-                        :title="item.error"
-                      >
-                        {{ item.error }}
-                      </p>
+                      <ErrorText v-if="isFailedStatus(item.status) && item.error" :text="item.error" />
                       <OpenInIdeLink
                         v-if="item.location"
                         :location="item.location"
diff --git a/apps/application/app/components/run/TestCasesTree.vue b/apps/application/app/components/run/TestCasesTree.vue
index e394f593..6163f1f3 100644
--- a/apps/application/app/components/run/TestCasesTree.vue
+++ b/apps/application/app/components/run/TestCasesTree.vue
@@ -376,13 +376,11 @@ const flatRows = computed<FlatRow[]>(() => {
             </span>
           </div>
           <!-- The one-line error under a failing row, the same as the flat list shows -->
-          <p
+          <ErrorText
             v-if="isFailedStatus(row.test.status) && row.test.error"
-            class="basis-full min-w-0 pl-6 text-xs text-rose-600 dark:text-rose-400 truncate"
-            :title="row.test.error"
-          >
-            {{ row.test.error }}
-          </p>
+            :text="row.test.error"
+            class="basis-full pl-6"
+          />
         </div>
       </template>
 
diff --git a/apps/application/app/components/shared/ErrorText.vue b/apps/application/app/components/shared/ErrorText.vue
new file mode 100644
index 00000000..ef19a8c3
--- /dev/null
+++ b/apps/application/app/components/shared/ErrorText.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * Error text as Playwright printed it, with its ANSI colors rendered instead
+ * of leaking as `[31m` fragments. The base color is muted — the status icon
+ * next to it already says "failed" — and the ANSI highlights (received in red,
+ * expected in green, dimmed punctuation) carry the emphasis.
+ *
+ * `line` (default) is the one-line preview for lists and table cells: the
+ * whole message collapsed onto one line and truncated, so the locator or the
+ * received value that follows the first line still shows, with the plain full
+ * text as a tooltip. `block` keeps every line for a step's or an error card's
+ * full message.
+ */
+import { renderAnsi } from '~/utils';
+import { stripAnsi } from '~/utils/text-format';
+
+const props = withDefaults(defineProps<{ text: string; mode?: 'line' | 'block' }>(), { mode: 'line' });
+
+const html = computed(() => renderAnsi(props.text));
+const plain = computed(() => stripAnsi(props.text).trim());
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html — renderAnsi escapes the text before wrapping it in styled spans -->
+  <p
+    v-if="mode === 'line'"
+    class="font-mono text-xs text-gray-600 dark:text-gray-400 truncate min-w-0"
+    :title="plain"
+    v-html="html"
+  />
+  <div
+    v-else
+    class="font-mono text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap break-words"
+    v-html="html"
+  />
+  <!-- eslint-enable vue/no-v-html -->
+</template>
diff --git a/apps/application/app/pages/test-cases/[id].vue b/apps/application/app/pages/test-cases/[id].vue
index 6a1a87c2..2044e911 100644
--- a/apps/application/app/pages/test-cases/[id].vue
+++ b/apps/application/app/pages/test-cases/[id].vue
@@ -287,13 +287,7 @@ const executionColumns: TableColumn<ExecutionRow>[] = [
               </NuxtLink>
             </template>
             <template #error-cell="{ row }">
-              <span
-                v-if="row.original.error"
-                class="text-red-600 text-xs truncate max-w-xs block"
-                :title="row.original.error"
-              >
-                {{ row.original.error.length > 80 ? `${row.original.error.substring(0, 80)}…` : row.original.error }}
-              </span>
+              <ErrorText v-if="row.original.error" :text="row.original.error" class="max-w-xs" />
             </template>
             <template #actions-header>
               <div class="text-right">Actions</div>
diff --git a/apps/application/app/pages/test-run-cases/[id].vue b/apps/application/app/pages/test-run-cases/[id].vue
index fc31784f..917c4eb5 100644
--- a/apps/application/app/pages/test-run-cases/[id].vue
+++ b/apps/application/app/pages/test-run-cases/[id].vue
@@ -13,7 +13,6 @@ import { getPerformanceHints } from '~/utils/performance-hints';
 import { renderAnsi } from '~/utils';
 import type { NavbarAction } from '~/components/shared/NavbarActions.vue';
 import type { HelpTopicKey } from '~/utils/help-content';
-import { buildRetryCommand } from '~/utils/retry-command';
 import { condenseErrorText } from '#shared/error-fingerprint';
 import { clusterSectionLocatorKey } from '~/composables/useClusterSectionLocator';
 
@@ -358,6 +357,8 @@ function stepBarColorClass(duration: number): string {
 const environment = computed(() => testCase.value?.testRun?.environment);
 
 // ── Retry command ─────────────────────────────────────────────────────────
+// The summary card owns the copy and run-locally controls (as the run page's
+// summary does); the navbar keeps only the page-level actions.
 const retryCases = computed(() => [
   {
     filePath: testCase.value?.filePath ?? '',
@@ -366,17 +367,8 @@ const retryCases = computed(() => [
     projectName: (testCase.value?.browser as { projectName?: string } | null)?.projectName ?? null,
   },
 ]);
-const retryCommand = computed(() => buildRetryCommand(retryCases.value));
-const { copy: copyRetry, copied: retryCopied } = useCopy();
 
 const navbarActions = computed<NavbarAction[]>(() => [
-  {
-    label: retryCopied.value ? 'Copied' : 'Copy retry command',
-    icon: retryCopied.value ? 'i-lucide-check' : 'i-lucide-clipboard',
-    variant: 'outline',
-    title: retryCopied.value ? 'Copied!' : copyPreview(retryCommand.value),
-    onClick: () => copyRetry(retryCommand.value, { toast: 'Retry command copied' }),
-  },
   { label: 'Refresh', icon: 'i-lucide-refresh-cw', onClick: () => refresh() },
 ]);
 
@@ -549,7 +541,8 @@ provide(clusterSectionLocatorKey, {
 <template>
   <UDashboardPanel id="test-run-case-detail">
     <template #header>
-      <UDashboardNavbar :title="testCase?.title ?? `Execution #${testCaseId}`">
+      <!-- The breadcrumb's current crumb is the page title; a navbar title would repeat it. -->
+      <UDashboardNavbar>
         <template #leading>
           <UDashboardSidebarCollapse />
           <BreadcrumbNav
@@ -565,13 +558,7 @@ provide(clusterSectionLocatorKey, {
                   ]
                 : [{ label: 'Project' }]),
               ...(testCase?.testRun?.id
-                ? [
-                    {
-                      label:
-                        `Run #${testCase.testRun.id}` + (testCase.testRun.label ? ` — ${testCase.testRun.label}` : ''),
-                      to: `/test-runs/${testCase.testRun.id}`,
-                    },
-                  ]
+                ? [{ label: `Run #${testCase.testRun.id}`, to: `/test-runs/${testCase.testRun.id}` }]
                 : [{ label: 'Test run' }]),
               { label: testCase?.title || `Execution #${testCaseId}` },
             ]"
@@ -584,9 +571,10 @@ provide(clusterSectionLocatorKey, {
               :to="`/test-cases/${testCase.testCaseId}`"
               class="text-xs text-gray-500 hover:text-primary mr-2 flex items-center gap-1 shrink-0"
               title="View test case history"
+              aria-label="Test case history"
             >
               <UIcon name="i-lucide-trending-up" class="size-3.5" />
-              <span class="hidden sm:inline">Test case</span>
+              <span class="hidden xl:inline">Test case</span>
             </NuxtLink>
             <ShareLinksModal
               v-if="testCase && !isDemoMode"
@@ -598,12 +586,6 @@ provide(clusterSectionLocatorKey, {
               :base-name="`piwi-execution-${testCase.id}`"
               class="mr-2"
             />
-            <DesktopRunLocallyButton
-              :project-id="testCase?.testRun?.project?.id"
-              :project-label="testCase?.testRun?.project?.label ?? testCase?.testRun?.project?.name"
-              :cases="retryCases"
-              class="mr-2"
-            />
             <NavbarActions :actions="navbarActions" />
           </div>
         </template>
@@ -624,6 +606,8 @@ provide(clusterSectionLocatorKey, {
             :stable-links="(testCase as any)?.stableLinks ?? null"
             :project-key="testCase?.testRun?.project?.id"
             :project-name="testCase?.testRun?.project?.name"
+            :project-label="testCase?.testRun?.project?.label ?? testCase?.testRun?.project?.name"
+            :retry-cases="retryCases"
             @refresh="refresh()"
           />
           <DidNotRunCard
@@ -878,12 +862,12 @@ provide(clusterSectionLocatorKey, {
                         slowest
                       </UBadge>
                     </div>
-                    <p
+                    <ErrorText
                       v-if="row.original.failed && row.original.error?.message"
-                      class="text-xs text-red-500 mt-1 whitespace-pre-wrap break-words font-mono"
-                    >
-                      {{ row.original.error.message }}
-                    </p>
+                      mode="block"
+                      :text="row.original.error.message"
+                      class="mt-1"
+                    />
                     <OpenInIdeLink
                       v-if="row.original.location"
                       :location="row.original.location"
@@ -1209,15 +1193,7 @@ provide(clusterSectionLocatorKey, {
                     </NuxtLink>
                   </template>
                   <template #error-cell="{ row }">
-                    <span
-                      v-if="row.original.error"
-                      class="text-red-600 text-xs truncate max-w-xs block"
-                      :title="row.original.error"
-                    >
-                      {{
-                        row.original.error.length > 80 ? `${row.original.error.substring(0, 80)}…` : row.original.error
-                      }}
-                    </span>
+                    <ErrorText v-if="row.original.error" :text="row.original.error" class="max-w-xs" />
                   </template>
                 </UTable>
               </TableScroller>

From 753beafe1dd4af164d8e015921389793cdc6a3a8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 2 Sep 2026 16:54:22 +0000
Subject: [PATCH 9/9] fix(ui): stop the navbar repeating the breadcrumb and
 keep the trail readable

The run and execution navbars set a title that repeated the last crumb, and
the trail was squeezed to fragments next to five labeled buttons. The
breadcrumb is now the page title: ancestors keep a capped natural width,
only the current crumb truncates, the middle levels hide below 2xl and the
root keeps its icon. Navbar button labels collapse to icons below xl, and
the execution page's retry and run-locally controls move into the summary
card, where the run page already keeps its own.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0122WucKkRwT2weCog4xDZ3w
---
 .../app/components/shared/BreadcrumbNav.vue   | 50 +++++++++++++------
 .../app/components/shared/ExportMenu.vue      | 11 +++-
 .../app/components/shared/NavbarActions.vue   |  4 +-
 .../app/components/shared/ShareLinksModal.vue |  3 +-
 .../components/test-case/TestCaseSummary.vue  | 37 ++++++++++++++
 apps/application/app/pages/test-runs/[id].vue | 14 ++----
 .../tests/test-run-case-page.spec.ts          |  4 +-
 apps/docs/evidence.md                         |  2 +-
 8 files changed, 92 insertions(+), 33 deletions(-)

diff --git a/apps/application/app/components/shared/BreadcrumbNav.vue b/apps/application/app/components/shared/BreadcrumbNav.vue
index bd928d5f..6975914a 100644
--- a/apps/application/app/components/shared/BreadcrumbNav.vue
+++ b/apps/application/app/components/shared/BreadcrumbNav.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 /**
- * Responsive breadcrumb. From `sm` up it renders the standard `UBreadcrumb`
- * (all levels, any custom item slots forwarded). Below `sm`, where a deep
- * path is unreadable, it collapses the ancestor levels into a dropdown and
- * shows only the current page label — tapping the leading chip reveals the
- * full path. Drop-in replacement for `<UBreadcrumb :items>`.
+ * Responsive breadcrumb — the page title of every detail page, so the navbar
+ * never repeats it. From `sm` up it renders the standard `UBreadcrumb` (any
+ * custom item slots forwarded) and takes the room the navbar actions leave:
+ * ancestors keep their natural width (capped) and the current page label
+ * takes the rest, down to a readable floor. Below `2xl` the root keeps just
+ * its icon and the middle levels beyond the nearest two ancestors are hidden,
+ * so a deep path still reads on a laptop next to the actions. Below `sm` the ancestors collapse into a
+ * dropdown and only the current page label shows — tapping the leading chip
+ * reveals the full path. Drop-in replacement for `<UBreadcrumb :items>`.
  */
 import type { BreadcrumbItem, DropdownMenuItem } from '@nuxt/ui';
 
@@ -23,22 +27,38 @@ const ancestorItems = computed<DropdownMenuItem[]>(() =>
 
 const hasAncestors = computed(() => ancestorItems.value.length > 0);
 
-// The leaf truncates so a long page title never collides with the navbar
-// actions; every level needs `min-w-0` for the truncation to take effect.
-const truncatingItems = computed(() => {
-  const items = props.items.map((item) => ({ ...item }));
-  const last = items[items.length - 1];
-  if (last) last.class = 'truncate';
-  return items;
+// The ancestors are the path and stay readable: natural width, capped so a
+// long project name ellipsizes (an item with a custom slot sizes itself).
+// The current page label is the title and takes the remaining room, down to
+// a floor, truncating from the end. Below `2xl` the root keeps its icon only
+// and the middle levels hide, together with the separator each one owns.
+// Every level needs `min-w-0` for the truncation to take effect.
+const desktopItems = computed(() => {
+  const count = props.items.length;
+  return props.items.map((item, index) => {
+    if (index === count - 1) return { ...item, class: 'truncate', ui: { ...item.ui, item: 'min-w-40' } };
+    const rootIconOnly = index === 0 && item.icon ? 'max-2xl:sr-only' : '';
+    const hidden = index > 0 && index < count - 3 ? 'max-2xl:hidden' : '';
+    return {
+      ...item,
+      class: item.slot ? undefined : 'max-w-48',
+      ui: {
+        ...item.ui,
+        item: ['shrink-0', hidden].join(' ').trim(),
+        separator: hidden,
+        linkLabel: ['truncate', rootIconOnly].join(' ').trim(),
+      },
+    };
+  });
 });
 </script>
 
 <template>
   <!-- Desktop: full breadcrumb, forwarding any custom per-item slots (e.g. #project). -->
   <UBreadcrumb
-    :items="truncatingItems"
-    class="hidden min-w-0 sm:flex"
-    :ui="{ root: 'min-w-0', list: 'min-w-0', item: 'min-w-0', link: 'min-w-0' }"
+    :items="desktopItems"
+    class="hidden min-w-0 flex-1 overflow-hidden sm:flex"
+    :ui="{ root: 'min-w-0', list: 'min-w-0', item: 'min-w-0', link: 'min-w-0', separator: 'shrink-0' }"
   >
     <template v-for="(_, name) in $slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData ?? {}" />
diff --git a/apps/application/app/components/shared/ExportMenu.vue b/apps/application/app/components/shared/ExportMenu.vue
index 3568a189..4b71793c 100644
--- a/apps/application/app/components/shared/ExportMenu.vue
+++ b/apps/application/app/components/shared/ExportMenu.vue
@@ -67,8 +67,15 @@ function copyReport() {
 
 <template>
   <UPopover v-model:open="open">
-    <UButton icon="i-lucide-share" size="xs" color="neutral" variant="outline" title="Take this investigation away">
-      Export
+    <UButton
+      icon="i-lucide-share"
+      size="xs"
+      color="neutral"
+      variant="outline"
+      title="Take this investigation away"
+      aria-label="Export"
+    >
+      <span class="hidden xl:inline">Export</span>
     </UButton>
 
     <template #content>
diff --git a/apps/application/app/components/shared/NavbarActions.vue b/apps/application/app/components/shared/NavbarActions.vue
index f0dfeed8..69fbd8f5 100644
--- a/apps/application/app/components/shared/NavbarActions.vue
+++ b/apps/application/app/components/shared/NavbarActions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * Responsive action row for `UDashboardNavbar` `#right` slots. Renders each
- * action as a `UButton` whose text label collapses below the `sm` breakpoint
+ * action as a `UButton` whose text label collapses below the `xl` breakpoint
  * (icon-only, `aria-label`/`title` preserved), so page actions never crowd
  * the breadcrumb on phones. Extra custom controls can be placed in the
  * `leading` (before) and default (after) slots.
@@ -46,7 +46,7 @@ withDefaults(
       :title="action.title ?? action.label"
       @click="action.onClick?.()"
     >
-      <span class="hidden sm:inline">{{ action.label }}</span>
+      <span class="hidden xl:inline">{{ action.label }}</span>
     </UButton>
     <slot />
   </div>
diff --git a/apps/application/app/components/shared/ShareLinksModal.vue b/apps/application/app/components/shared/ShareLinksModal.vue
index 3926b5ef..938019cd 100644
--- a/apps/application/app/components/shared/ShareLinksModal.vue
+++ b/apps/application/app/components/shared/ShareLinksModal.vue
@@ -113,9 +113,10 @@ function linkState(link: ShareLinkSummary): { label: string; color: 'success' |
     color="neutral"
     variant="outline"
     title="Hand this investigation to someone without an account"
+    aria-label="Share"
     @click="open = true"
   >
-    Share
+    <span class="hidden xl:inline">Share</span>
   </UButton>
 
   <UModal v-model:open="open" title="Share links" description="Read-only links anyone can open — no account needed.">
diff --git a/apps/application/app/components/test-case/TestCaseSummary.vue b/apps/application/app/components/test-case/TestCaseSummary.vue
index 0ba6a7bd..68c71715 100644
--- a/apps/application/app/components/test-case/TestCaseSummary.vue
+++ b/apps/application/app/components/test-case/TestCaseSummary.vue
@@ -8,6 +8,8 @@ import type {
   TestRunCiMetadata,
 } from '~~/types/api';
 import type { BrowserConfig } from '#shared/types';
+import type { RetryCase } from '~/utils/retry-command';
+import { buildRetryCommand } from '~/utils/retry-command';
 
 interface HistoricalTiming {
   avg: number;
@@ -28,6 +30,10 @@ const props = defineProps<{
   /** Piwi project id/name, threaded into `OpenInIdeLink` for workspace overrides. */
   projectKey?: number | string;
   projectName?: string;
+  /** Display label of the project, for the desktop run-locally button. */
+  projectLabel?: string;
+  /** The execution as a retry target — powers the copy and run-locally controls. */
+  retryCases?: RetryCase[];
 }>();
 
 defineEmits<{
@@ -68,6 +74,17 @@ const annotations = computed(() =>
 
 const startedAtMs = computed<number | null>(() => props.testCase?.startedAt ?? null);
 
+// Inside the desktop shell the run-locally split button covers copying the
+// command ("Copy as command"), so the copy-only button stays web-only.
+const desktopBridge = ref(false);
+onMounted(() => {
+  desktopBridge.value = !!tauriCore();
+});
+
+const retryCommand = computed(() => buildRetryCommand(props.retryCases ?? []));
+const { copy: copyRetry, copied: retryCopied } = useCopy();
+const retryTitle = computed(() => (retryCopied.value ? 'Copied!' : copyPreview(retryCommand.value)));
+
 const showCiGroup = computed(() => !!(props.ciInfo || props.environment));
 
 /** Per-attempt outcomes, oldest first. */
@@ -178,6 +195,26 @@ function attemptLink(a: AttemptOutcome): string | null {
                 </span>
               </p>
             </div>
+            <!-- Re-run controls sit with the execution they target, as on the run summary -->
+            <div v-if="retryCommand" class="flex items-center gap-1.5 shrink-0">
+              <UButton
+                v-if="!desktopBridge"
+                size="xs"
+                color="warning"
+                variant="subtle"
+                :icon="retryCopied ? 'i-lucide-check' : 'i-lucide-clipboard'"
+                :title="retryTitle"
+                aria-label="Copy retry command"
+                @click="copyRetry(retryCommand, { toast: 'Retry command copied' })"
+              >
+                <span class="hidden @2xl:inline">Copy retry command</span>
+              </UButton>
+              <DesktopRunLocallyButton
+                :project-id="projectKey"
+                :project-label="projectLabel ?? projectName"
+                :cases="retryCases ?? []"
+              />
+            </div>
           </div>
 
           <StatTileGrid>
diff --git a/apps/application/app/pages/test-runs/[id].vue b/apps/application/app/pages/test-runs/[id].vue
index 350ac6c9..c6e1f412 100644
--- a/apps/application/app/pages/test-runs/[id].vue
+++ b/apps/application/app/pages/test-runs/[id].vue
@@ -24,17 +24,10 @@ const latestRunId = computed(() => latestRunInfo.value?.id ?? testRun.value?.pro
 const latestRunStatus = computed(() => latestRunInfo.value?.status ?? testRun.value?.project?.latestRunStatus ?? null);
 const isLatestRunActive = computed(() => latestRunStatus.value === 'running' || latestRunStatus.value === 'finalizing');
 
-const navbarTitle = computed(() => {
-  // The page heading must name this specific run — the breadcrumb and the
-  // URL carry the project identity.
-  const project = testRun.value?.project?.label || testRun.value?.project?.name;
-  return project ? `Run #${runId} — ${project}` : `Run #${runId}`;
-});
-
 useHead(
   computed(() => {
-    // Match the on-page heading: prefer the project's display label so a
-    // labeled project reads the same in the tab title and the navbar.
+    // The tab title names the run and its project (display label first); on
+    // the page the breadcrumb carries the project.
     const project = testRun.value?.project?.label || testRun.value?.project?.name;
     return {
       title: `Test run #${runId}${project ? ` — ${project}` : ''} — Piwi Dashboard`,
@@ -667,7 +660,8 @@ function handleSelectCluster(clusterId: number) {
 <template>
   <UDashboardPanel id="test-run-detail">
     <template #header>
-      <UDashboardNavbar :title="navbarTitle">
+      <!-- The breadcrumb's current crumb is the page title; a navbar title would repeat it. -->
+      <UDashboardNavbar>
         <template #leading>
           <UDashboardSidebarCollapse />
           <BreadcrumbNav
diff --git a/apps/application/tests/test-run-case-page.spec.ts b/apps/application/tests/test-run-case-page.spec.ts
index 5a71f279..afb47f14 100644
--- a/apps/application/tests/test-run-case-page.spec.ts
+++ b/apps/application/tests/test-run-case-page.spec.ts
@@ -96,10 +96,10 @@ test.describe('Test-run-case page', () => {
     await expect(page.getByRole('button', { name: /^Steps/ })).toBeVisible();
   });
 
-  test('the header offers a Copy retry command action', async ({ page }) => {
+  test('the summary offers a Copy retry command action', async ({ page }) => {
     await page.goto(`/test-run-cases/${failedCaseId}`);
     await waitForHydration(page);
-    // NavbarActions keeps the label as accessible name even when icon-only on mobile.
+    // The button keeps its label as accessible name even when icon-only in a narrow card.
     await expect(page.getByRole('button', { name: /Copy retry command/ })).toBeVisible();
   });
 
diff --git a/apps/docs/evidence.md b/apps/docs/evidence.md
index ae408dc2..26757387 100644
--- a/apps/docs/evidence.md
+++ b/apps/docs/evidence.md
@@ -38,7 +38,7 @@ The tabs adapt to the result.
 
 **A passing execution opens on Steps**, with an **Artifacts** tab for its traces, attachments, console and network.
 
-Both keep a **Performance** tab (performance hints plus color-coded **Web Vitals**) and a **History** tab (this test's status and duration trend over recent runs, linking through to the full test history). A **Copy retry command** button in the header gives you the exact Playwright command to re-run just this test. The Web Vitals, network, console, ARIA-snapshot and alternative-locator data all come from the [capture fixtures](./capture-fixtures).
+Both keep a **Performance** tab (performance hints plus color-coded **Web Vitals**) and a **History** tab (this test's status and duration trend over recent runs, linking through to the full test history). A **Copy retry command** button in the summary gives you the exact Playwright command to re-run just this test. The Web Vitals, network, console, ARIA-snapshot and alternative-locator data all come from the [capture fixtures](./capture-fixtures).
 
 ## Trace-powered deep views