@shipfox/client-workflows 12.0.2 → 13.0.0

package/src/components/workflow-run-summary/workflow-run-summary.tsx

@@ -14,6 +14,7 @@ import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip
 import {Header, Text} from '@shipfox/react-ui/typography';
 import type {Ref} from 'react';
 import {useId} from 'react';
+import {WorkflowRunNumberLabel} from '#components/workflow-run-number-label.js';
 import {
   isWorkflowRunTerminal,
   type Job,
@@ -32,8 +33,8 @@ const STATUS_BADGE_LABEL_WIDTH_CH = Math.max(
 type WorkflowRunAction = 'cancel' | 'rerun-all' | 'rerun-menu' | 'none';
 
 export interface WorkflowRunSummaryProps {
-  workspaceId?: string | undefined;
-  projectId?: string | undefined;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
   run: WorkflowRunDetail;
   sourceAvailable?: boolean | undefined;
   sourceOpen?: boolean | undefined;
@@ -48,8 +49,8 @@ export interface WorkflowRunSummaryProps {
 }
 
 export function WorkflowRunSummary({
-  workspaceId,
-  projectId,
+  workspaceSlug,
+  projectSlug,
   run,
   sourceAvailable = false,
   sourceOpen = false,
@@ -66,8 +67,8 @@ export function WorkflowRunSummary({
   const status = getWorkflowStatusVisual(run.runAttempt.status);
   const action = workflowRunActionForRun(run);
   const attemptSwitcher =
-    latestAttempt && latestAttempt > 1 && workspaceId && projectId
-      ? {workspaceId, projectId, latestAttempt}
+    latestAttempt && latestAttempt > 1 && workspaceSlug && projectSlug
+      ? {workspaceSlug, projectSlug, latestAttempt}
       : null;
   const displayDuration = run.runAttempt.displayDuration;
   const {ref: headingTextRef, isTruncated: isHeadingTruncated} =
@@ -133,10 +134,17 @@ export function WorkflowRunSummary({
           </div>
 
           <div className="col-span-2 row-start-2 flex min-w-0 items-center gap-12 overflow-hidden text-foreground-neutral-muted">
+            {run.number !== null ? (
+              <>
+                <WorkflowRunNumberLabel run={run} />
+                {attemptSwitcher || run.triggerDisplayLabel ? <MetadataSeparator /> : null}
+              </>
+            ) : null}
+
             {attemptSwitcher ? (
               <WorkflowRunAttemptSwitcher
-                workspaceId={attemptSwitcher.workspaceId}
-                projectId={attemptSwitcher.projectId}
+                workspaceSlug={attemptSwitcher.workspaceSlug}
+                projectSlug={attemptSwitcher.projectSlug}
                 run={run}
                 latestAttempt={attemptSwitcher.latestAttempt}
               />
@@ -174,7 +182,9 @@ export function WorkflowRunSummary({
               </>
             ) : null}
 
-            {attemptSwitcher || run.triggerDisplayLabel ? <MetadataSeparator /> : null}
+            {run.number !== null || attemptSwitcher || run.triggerDisplayLabel ? (
+              <MetadataSeparator />
+            ) : null}
             <RelativeTime
               value={run.runAttempt.createdAt}
               className="shrink-0 whitespace-nowrap text-xs leading-20 text-foreground-neutral-muted"

package/src/components/workflow-run-view/agent-config-failure-callout.stories.tsx

@@ -12,7 +12,6 @@ import {within} from 'storybook/test';
 import type {AgentStepConfig, StepError} from '#core/workflow-run.js';
 import {AgentConfigFailureCallout} from './agent-config-failure-callout.js';
 
-const WORKSPACE_ID = '44444444-4444-4444-8444-444444444444';
 const AGENTS_LINK_NAME = 'Configure Agents';
 
 const config: AgentStepConfig = {
@@ -42,7 +41,7 @@ const meta = {
       });
       const agentSettingsRoute = createRoute({
         getParentRoute: () => rootRoute,
-        path: '/workspaces/$wid/settings/agents',
+        path: '/w/$workspaceSlug/settings/agents',
         component: () => null,
       });
       const router = createRouter({
@@ -54,7 +53,7 @@ const meta = {
     },
   ],
   args: {
-    workspaceId: WORKSPACE_ID,
+    workspaceSlug: 'acme',
     config,
     error: makeError('provider_not_configured'),
   },

package/src/components/workflow-run-view/agent-config-failure-callout.tsx

@@ -10,11 +10,11 @@ import {Link} from '@tanstack/react-router';
 import type {AgentStepConfig, StepError} from '#core/workflow-run.js';
 
 export function AgentConfigFailureCallout({
-  workspaceId,
+  workspaceSlug,
   config,
   error,
 }: {
-  workspaceId: string;
+  workspaceSlug?: string | undefined;
   config: AgentStepConfig | null;
   error: StepError | null;
 }) {
@@ -25,10 +25,10 @@ export function AgentConfigFailureCallout({
       <AlertContent>
         <AlertTitle>{copy.title}</AlertTitle>
         <AlertDescription>{copy.description}</AlertDescription>
-        {copy.showProviderCta ? (
+        {copy.showProviderCta && workspaceSlug ? (
           <AlertActions>
             <Button asChild size="2xs" variant="secondary" iconRight="chevronRight">
-              <Link to="/workspaces/$wid/settings/agents" params={{wid: workspaceId}}>
+              <Link to="/w/$workspaceSlug/settings/agents" params={{workspaceSlug}}>
                 Configure Agents
               </Link>
             </Button>

package/src/components/workflow-run-view/job-card.stories.tsx

@@ -18,7 +18,6 @@ import {
 import type {StepExpandedContext} from '../step-list/index.js';
 import {JobCard} from './job-card.js';
 
-const WORKSPACE_ID = '44444444-4444-4444-8444-444444444444';
 const SWITCH_EXECUTION_PATTERN = /Switch job execution/;
 const EXECUTION_FIVE_PATTERN = /#5/;
 
@@ -41,7 +40,6 @@ const meta = {
     ),
   ],
   args: {
-    workspaceId: WORKSPACE_ID,
     job: singleExecutionJob(),
     selectedJobExecution: singleExecutionJob().jobExecutions[0],
     selectedAttemptId: null,
@@ -73,7 +71,7 @@ export const States: Story = {
       <StorySection label="single execution">
         <JobCardStory job={singleExecutionJob()} />
       </StorySection>
-      <StorySection label="display name fallback">
+      <StorySection label="execution name with missing job name">
         <JobCardStory job={keyFallbackJob()} />
       </StorySection>
       <StorySection label="queueing execution">
@@ -126,13 +124,13 @@ export const ListeningProgression: Story = {
       <StorySection label="pending, no executions">
         <JobCardStory job={listeningJobPending()} />
       </StorySection>
-      <StorySection label="running, 0 executions">
+      <StorySection label="listening, 0 executions">
         <JobCardStory job={listeningJobNoExecutions()} />
       </StorySection>
-      <StorySection label="running, 1 running execution">
+      <StorySection label="listening, 1 running execution">
         <JobCardStory job={listeningJobOneExecution()} initialJobExecutionId="exec-listen-one-1" />
       </StorySection>
-      <StorySection label="running, mixed executions">
+      <StorySection label="listening, mixed executions">
         <JobCardStory job={listeningJobMixedExecutions()} initialJobExecutionId="exec-listen-6" />
       </StorySection>
       <StorySection label="failed, resolved">
@@ -145,19 +143,19 @@ export const ListeningProgression: Story = {
 export const ManyExecutions: Story = {
   render: () => (
     <div className="flex flex-col gap-16">
-      <StorySection label="running, 64 executions, short name">
+      <StorySection label="listening, 64 executions, short name">
         <JobCardStory
           job={manyExecutionsListeningJob('gate', 'job-many-short')}
           initialJobExecutionId="exec-many-job-many-short-64"
         />
       </StorySection>
-      <StorySection label="running, 64 executions, medium name">
+      <StorySection label="listening, 64 executions, medium name">
         <JobCardStory
           job={manyExecutionsListeningJob('release-gates', 'job-many-medium')}
           initialJobExecutionId="exec-many-job-many-medium-64"
         />
       </StorySection>
-      <StorySection label="running, 64 executions, long name">
+      <StorySection label="listening, 64 executions, long name">
         <JobCardStory
           job={manyExecutionsListeningJob(
             'release-production-multi-region-with-canary-validation',
@@ -233,7 +231,6 @@ function JobCardStory({
 
   return (
     <JobCard
-      workspaceId={WORKSPACE_ID}
       job={job}
       selectedJobExecution={selectedJobExecution}
       selectedAttemptId={selectedAttemptId}
@@ -715,6 +712,10 @@ function makeTriggerEvent(
     event,
     delivery_id: `delivery-${sequence}`,
     received_at: listeningTimestamp(sequence, 1),
+    project: null,
+    repository: null,
+    ref: null,
+    commit: null,
     data: {sequence},
   };
 }

package/src/components/workflow-run-view/job-card.test.tsx

@@ -0,0 +1,115 @@
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {workflowJob, workflowJobExecutionDto} from '#test/fixtures/workflow-run.js';
+import {JobCard} from './job-card.js';
+import {JobExecutionSwitcher} from './job-execution-switcher.js';
+
+const FIRST_EXECUTION_ACCESSIBLE_NAME =
+  /Execution #1: Review PR #476, Failed, validation failed, duration 1m 55s/;
+const SECOND_EXECUTION_MENU_ITEM = /Execution #2: Review PR #479/;
+
+describe('JobCard execution names', () => {
+  test('shows only the resolved execution name', () => {
+    const job = workflowJob({
+      key: 'deploy',
+      name: 'Deploy application',
+      job_executions: [
+        workflowJobExecutionDto({
+          name: 'Deploy production',
+          sequence: 1,
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Expected a job execution');
+
+    render(
+      <JobCard
+        job={job}
+        selectedJobExecution={execution}
+        selectedAttemptId={null}
+        onSelectedJobExecutionChange={undefined}
+        onSelectedAttemptChange={undefined}
+      />,
+    );
+
+    expect(screen.getByRole('heading', {name: 'Deploy production'})).toBeInTheDocument();
+    expect(screen.queryByText('Deploy application')).not.toBeInTheDocument();
+    expect(screen.queryByText('Execution #1')).not.toBeInTheDocument();
+  });
+
+  test('uses the static job name only when no execution exists', () => {
+    const job = workflowJob({
+      key: 'deploy',
+      name: 'Deploy application',
+      job_executions: [],
+    });
+
+    render(
+      <JobCard
+        job={job}
+        selectedJobExecution={undefined}
+        selectedAttemptId={null}
+        onSelectedJobExecutionChange={undefined}
+        onSelectedAttemptChange={undefined}
+      />,
+    );
+
+    expect(screen.getByRole('heading', {name: 'Deploy application'})).toBeInTheDocument();
+    expect(screen.getByText('Waiting for this job to start')).toBeInTheDocument();
+  });
+});
+
+describe('JobExecutionSwitcher execution names', () => {
+  test('uses each listening execution name while keeping its sequence and status', async () => {
+    const user = userEvent.setup();
+    const job = workflowJob({
+      key: 'reviews',
+      name: 'Process review',
+      mode: 'listening',
+      status: 'running',
+      listener_status: 'listening',
+      job_executions: [
+        workflowJobExecutionDto({
+          sequence: 1,
+          name: 'Review PR #476',
+          status: 'failed',
+          status_reason: 'validation failed',
+          queued_at: '2026-06-21T12:00:00.000Z',
+          started_at: '2026-06-21T12:00:05.000Z',
+          finished_at: '2026-06-21T12:02:00.000Z',
+        }),
+        workflowJobExecutionDto({
+          sequence: 2,
+          name: 'Review PR #479',
+          status: 'running',
+        }),
+      ],
+    });
+    const selected = job.jobExecutions[1];
+    if (!selected) throw new Error('Expected a selected job execution');
+
+    render(
+      <JobExecutionSwitcher
+        job={job}
+        selectedJobExecution={selected.id}
+        onSelectedJobExecutionChange={() => undefined}
+        variant="title"
+      />,
+    );
+
+    const trigger = screen.getByRole('button', {
+      name: 'Switch job execution, currently execution 2: Review PR #479',
+    });
+    expect(trigger).toBeInTheDocument();
+
+    await user.click(trigger);
+
+    expect(
+      await screen.findByRole('menuitem', {
+        name: FIRST_EXECUTION_ACCESSIBLE_NAME,
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', {name: SECOND_EXECUTION_MENU_ITEM})).toBeInTheDocument();
+  });
+});

package/src/components/workflow-run-view/job-card.tsx

@@ -12,7 +12,11 @@ import {Fragment, useId, useRef, useState} from 'react';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {
   AGENT_CONFIG_ISSUES,
+  defaultJobExecution,
+  deriveJobDisplayStatus,
+  deriveJobExecutionDisplayStatus,
   type Job,
+  type JobDisplayStatus,
   type JobExecution,
   type JobExecutionTime,
   STEP_ERROR_REASONS,
@@ -30,7 +34,9 @@ import {formatJobExecutionTime, JobExecutionTimeText} from './job-execution-time
 import {StepAttemptLogPanel} from './step-attempt-log-panel.js';
 
 const STATUS_BADGE_LABEL_WIDTH_CH = Math.max(
-  ...WORKFLOW_JOB_STATUSES.map((status) => getWorkflowStatusVisual(status).label.length),
+  ...[...WORKFLOW_JOB_STATUSES, 'listening' as const].map(
+    (status) => getWorkflowStatusVisual(status).label.length,
+  ),
 );
 
 interface LocalSelectedAttempt {
@@ -39,7 +45,7 @@ interface LocalSelectedAttempt {
 }
 
 export function JobCard({
-  workspaceId,
+  workspaceSlug,
   job,
   selectedJobExecution,
   selectedAttemptId,
@@ -51,7 +57,7 @@ export function JobCard({
   focusedSourceStepId,
   onOpenStepSource,
 }: {
-  workspaceId: string;
+  workspaceSlug?: string | undefined;
   job: Job;
   selectedJobExecution: JobExecution | undefined;
   selectedAttemptId: string | null | undefined;
@@ -71,7 +77,12 @@ export function JobCard({
     jobExecutionId: undefined,
     attemptId: null,
   });
-  const selectedExecutionStatus = selectedJobExecution?.status ?? job.status;
+  const title = selectedJobExecution?.displayName ?? job.displayName;
+  const isNonDefaultExecutionSelected =
+    selectedJobExecution !== undefined && selectedJobExecution.id !== defaultJobExecution(job)?.id;
+  const selectedExecutionStatus = isNonDefaultExecutionSelected
+    ? deriveJobExecutionDisplayStatus(selectedJobExecution)
+    : deriveJobDisplayStatus(job);
   const effectiveSelectedAttemptId =
     selectedAttemptId === undefined &&
     localSelectedAttempt.jobExecutionId === selectedJobExecution?.id
@@ -93,7 +104,7 @@ export function JobCard({
       <CarriedOverStepPanel />
     ) : (
       <StepAttemptDetailPanel
-        workspaceId={workspaceId}
+        workspaceSlug={workspaceSlug}
         step={step}
         stepId={stepId}
         attempt={attempt}
@@ -125,7 +136,7 @@ export function JobCard({
           onSelectedJobExecutionChange ? (
             <>
               <Text as="h2" id={titleId} size="sm" bold className="sr-only">
-                {job.displayName}
+                {title}
               </Text>
               <div className="flex min-w-0 items-center gap-8">
                 <JobStatusBadge status={selectedExecutionStatus} />
@@ -140,15 +151,17 @@ export function JobCard({
           ) : (
             <div className="flex min-w-0 items-center gap-8">
               <JobStatusBadge status={selectedExecutionStatus} />
-              <Text
-                as="h2"
-                id={titleId}
-                size="sm"
-                bold
-                className="min-w-0 truncate text-foreground-neutral-base"
-              >
-                {job.displayName}
-              </Text>
+              <div className="flex min-w-0 items-center gap-8">
+                <Text
+                  as="h2"
+                  id={titleId}
+                  size="sm"
+                  bold
+                  className="min-w-0 truncate text-foreground-neutral-base"
+                >
+                  {title}
+                </Text>
+              </div>
             </div>
           )}
           {sourceAvailable && selectedSourceAction && sourcePanelId && onOpenStepSource ? (
@@ -196,7 +209,7 @@ export function JobCard({
   );
 }
 
-function JobStatusBadge({status}: {status: Job['status'] | JobExecution['status']}) {
+function JobStatusBadge({status}: {status: JobDisplayStatus}) {
   const visual = getWorkflowStatusVisual(status);
 
   return (
@@ -252,7 +265,12 @@ function JobExecutionMetadata({execution}: {execution: JobExecution | undefined}
           ) : item.kind === 'trigger' ? (
             <JobExecutionTriggerMetadata execution={execution} />
           ) : (
-            <JobExecutionMetadataItem icon={item.icon} kind={item.kind} time={item.time} />
+            <JobExecutionMetadataItem
+              icon={item.icon}
+              kind={item.kind}
+              time={item.time}
+              displayStatus={deriveJobExecutionDisplayStatus(execution)}
+            />
           )}
         </Fragment>
       ))}
@@ -309,14 +327,16 @@ function JobExecutionMetadataItem({
   icon,
   kind,
   time,
+  displayStatus,
 }: {
   icon: 'hourglassLine' | 'timerLine';
   kind: 'queue' | 'run';
   time: JobExecutionTime;
+  displayStatus: JobExecution['status'];
 }) {
   useTimeTick();
 
-  const tooltip = `${jobExecutionTimeVerb(kind, time)} for ${formatJobExecutionTime(time)}`;
+  const tooltip = `${jobExecutionTimeVerb(kind, time, displayStatus)} for ${formatJobExecutionTime(time)}`;
 
   return (
     <Tooltip>
@@ -341,9 +361,15 @@ function JobExecutionMetadataItem({
   );
 }
 
-function jobExecutionTimeVerb(kind: 'queue' | 'run', time: JobExecutionTime): string {
-  if (kind === 'queue') return time.state === 'live' ? 'Queuing' : 'Queued';
-  return time.state === 'live' ? 'Running' : 'Ran';
+function jobExecutionTimeVerb(
+  kind: 'queue' | 'run',
+  time: JobExecutionTime,
+  displayStatus: JobExecution['status'],
+): string {
+  if (kind === 'queue') return time.state === 'live' ? 'Queueing' : 'Queued';
+  if (time.state !== 'live') return 'Ran';
+  if (displayStatus === 'running') return 'Running';
+  return displayStatus === 'pending' ? 'Runner assigned' : 'Execution elapsed';
 }
 
 function MetadataSeparator() {
@@ -369,14 +395,14 @@ function selectedStepSourceAction(
 }
 
 function StepAttemptDetailPanel({
-  workspaceId,
+  workspaceSlug,
   step,
   stepId,
   attempt,
   attemptError,
   attemptStatus,
 }: {
-  workspaceId: string;
+  workspaceSlug?: string | undefined;
   step: Step;
   stepId: string;
   attempt: number;
@@ -389,7 +415,7 @@ function StepAttemptDetailPanel({
     <div className="flex min-w-0 flex-col gap-10">
       {isAgentConfigFailure(step, selectedAttemptError) ? (
         <AgentConfigFailureCallout
-          workspaceId={workspaceId}
+          workspaceSlug={workspaceSlug}
           config={step.agentConfig}
           error={selectedAttemptError}
         />
@@ -432,7 +458,7 @@ function toSelectedAttemptError(
     signal: typeof error.signal === 'string' ? error.signal : undefined,
     reason: resolvedReason,
     agentConfigIssue,
-    category: step.type === 'setup' ? 'setup' : 'user',
+    category: step.type === 'setup' || step.type === 'checkout' ? 'setup' : 'user',
   };
 }
 
@@ -449,35 +475,48 @@ function emptyStateForJob(job: Job, jobExecution: JobExecution): StepListEmptySt
     };
   }
 
-  if (jobExecution.status === 'pending') {
+  const displayStatus =
+    job.mode === 'listening'
+      ? deriveJobExecutionDisplayStatus(jobExecution)
+      : deriveJobDisplayStatus(job);
+
+  if (jobExecution.status === 'running' && displayStatus === 'pending') {
+    return {
+      title: 'Runner preparing job',
+      description: 'A runner is assigned. Steps will appear here when work begins.',
+      status: displayStatus,
+    };
+  }
+
+  if (displayStatus === 'pending') {
     return {
       title: 'Waiting for this job to start',
       description: 'Steps will appear here once the job starts.',
-      status: jobExecution.status,
+      status: displayStatus,
     };
   }
 
-  if (jobExecution.status === 'running') {
+  if (displayStatus === 'running') {
     return {
       title: 'Waiting for the first step',
-      description: 'This job is running, but no steps have started yet.',
-      status: jobExecution.status,
+      description: 'The first running step will appear here shortly.',
+      status: displayStatus,
     };
   }
 
-  if (jobExecution.status === 'cancelled') {
+  if (displayStatus === 'cancelled') {
     return {
       title: 'Cancelled before start',
       description: 'This job was cancelled before any step started.',
-      status: jobExecution.status,
+      status: displayStatus,
     };
   }
 
-  if (jobExecution.status === 'succeeded' || jobExecution.status === 'failed') {
+  if (displayStatus === 'succeeded' || displayStatus === 'failed') {
     return {
       title: 'No steps recorded',
       description: `Execution #${jobExecution.sequence} finished without recorded steps.`,
-      status: jobExecution.status,
+      status: displayStatus,
     };
   }
 
@@ -497,7 +536,7 @@ function emptyStateForMissingExecution(job: Job): StepListEmptyState {
     return {
       title: 'Waiting for trigger events',
       description: 'Matching trigger events will create job executions here.',
-      status: 'running',
+      status: deriveJobDisplayStatus(job),
     };
   }
 

package/src/components/workflow-run-view/job-execution-switcher.tsx

@@ -9,9 +9,10 @@ import {Icon} from '@shipfox/react-ui/icon';
 import {Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
 import {useMemo} from 'react';
+import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
-import type {Job, JobExecution} from '#core/workflow-run.js';
-import {JobExecutionTimeText} from './job-execution-time-text.js';
+import {deriveJobExecutionDisplayStatus, type Job, type JobExecution} from '#core/workflow-run.js';
+import {formatJobExecutionTime, JobExecutionTimeText} from './job-execution-time-text.js';
 
 export interface JobExecutionSwitcherProps {
   job: Job;
@@ -62,10 +63,10 @@ export function JobExecutionSwitcher({
             : 'min-h-28 gap-6 px-8 py-4 text-sm leading-20 text-foreground-neutral-subtle hover:bg-background-components-hover',
           className,
         )}
-        aria-label={`Switch job execution, currently execution ${selected.sequence}`}
+        aria-label={`Switch job execution, currently execution ${selected.sequence}: ${selected.displayName}`}
       >
         {variant === 'title' ? (
-          <TitleExecutionSummary job={job} execution={selected} />
+          <TitleExecutionSummary execution={selected} />
         ) : (
           <ExecutionSummary execution={selected} />
         )}
@@ -87,14 +88,19 @@ export function JobExecutionSwitcher({
               <button
                 type="button"
                 aria-current={isSelected ? 'true' : undefined}
+                aria-label={executionAccessibleLabel(jobExecution)}
                 className="w-full text-left"
               >
-                <WorkflowStatusIcon status={jobExecution.status} size={14} tooltip={false} />
+                <WorkflowStatusIcon
+                  status={deriveJobExecutionDisplayStatus(jobExecution)}
+                  size={14}
+                  tooltip={false}
+                />
                 <span className="font-code text-xs leading-20 text-foreground-neutral-base tabular-nums">
                   #{jobExecution.sequence}
                 </span>
                 <span className="min-w-0 truncate text-xs leading-20 text-foreground-neutral-base">
-                  {job.displayName}
+                  {jobExecution.displayName}
                 </span>
                 {!isSelected && jobExecution.statusReason ? (
                   <span className="min-w-0 flex-1 truncate text-xs leading-20 text-foreground-neutral-muted">
@@ -119,23 +125,39 @@ export function JobExecutionSwitcher({
   );
 }
 
-function TitleExecutionSummary({job, execution}: {job: Job; execution: JobExecution}) {
+function executionAccessibleLabel(execution: JobExecution): string {
+  const status = getWorkflowStatusVisual(deriveJobExecutionDisplayStatus(execution));
+  return [
+    `Execution #${execution.sequence}: ${execution.displayName}`,
+    status.label,
+    execution.statusReason ?? undefined,
+    execution.displayDuration
+      ? `duration ${formatJobExecutionTime(execution.displayDuration)}`
+      : undefined,
+  ]
+    .filter((part): part is string => Boolean(part))
+    .join(', ');
+}
+
+function TitleExecutionSummary({execution}: {execution: JobExecution}) {
   return (
     <span className="flex min-w-0 items-center gap-8">
       <Text as="span" size="sm" bold className="shrink-0 text-foreground-neutral-base">
         #{execution.sequence}
       </Text>
       <Text as="span" size="sm" bold className="min-w-0 truncate text-foreground-neutral-base">
-        {job.displayName}
+        {execution.displayName}
       </Text>
     </span>
   );
 }
 
 function ExecutionSummary({execution}: {execution: JobExecution}) {
+  const displayStatus = deriveJobExecutionDisplayStatus(execution);
+
   return (
     <span className="flex min-w-0 items-center gap-6">
-      <WorkflowStatusIcon status={execution.status} size={14} tooltip={false} />
+      <WorkflowStatusIcon status={displayStatus} size={14} tooltip={false} />
       <span className="shrink-0 font-code text-xs leading-20 text-foreground-neutral-base tabular-nums">
         Execution #{execution.sequence}
       </span>