@shipfox/client-workflows 12.0.2 → 14.0.0

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>

package/src/components/workflow-run-view/workflow-run-selection.test.ts

@@ -82,6 +82,29 @@ describe('resolveWorkflowRunSelection', () => {
     expect(resolved.selectedAttemptId).toBeNull();
   });
 
+  test('finds a job from a legacy job execution selection', () => {
+    const execution = workflowJobExecutionDto({id: 'execution-deploy', sequence: 1});
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({id: 'job-build', name: 'build'}),
+        workflowJobDto({
+          id: 'job-deploy',
+          name: 'deploy',
+          position: 1,
+          job_executions: [execution],
+        }),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {jobExecutionId: 'execution-deploy'},
+    });
+
+    expect(resolved.job?.id).toBe('job-deploy');
+    expect(resolved.jobExecution?.id).toBe('execution-deploy');
+  });
+
   test('falls back from an invalid job execution id to the running execution', () => {
     const run = workflowRunDetail({
       jobs: [
@@ -156,6 +179,31 @@ describe('resolveWorkflowRunSelection', () => {
     expect(resolved.selectedAttemptId).toBe('attempt-2');
   });
 
+  test('finds the step owner from a legacy step attempt selection', () => {
+    const attempt = workflowStepAttemptDto({id: 'attempt-deploy', step_id: 'step-deploy'});
+    const step = workflowStepDto({
+      id: 'step-deploy',
+      current_attempt: 1,
+      attempts: [attempt],
+    });
+    const run = workflowRunDetail({
+      jobs: [
+        workflowJobDto({id: 'job-build', name: 'build'}),
+        workflowJobDto({id: 'job-deploy', name: 'deploy', position: 1, steps: [step]}),
+      ],
+    });
+
+    const resolved = resolveWorkflowRunSelection({
+      run,
+      selection: {stepAttemptId: 'attempt-deploy'},
+    });
+
+    expect(resolved.job?.id).toBe('job-deploy');
+    expect(resolved.step?.id).toBe('step-deploy');
+    expect(resolved.attempt?.id).toBe('attempt-deploy');
+    expect(resolved.selectedAttemptId).toBe('attempt-deploy');
+  });
+
   test('lets a valid step override a mismatched job id', () => {
     const step = workflowStepDto({
       id: 'step-deploy',

package/src/components/workflow-run-view/workflow-run-selection.ts

@@ -25,6 +25,8 @@ export function resolveWorkflowRunSelection({
 }): ResolvedWorkflowRunSelection {
   const jobById = new Map(run.jobs.map((job) => [job.id, job]));
   const stepMatch = findStep(run, selection.stepId);
+  const jobExecutionMatch = findJobExecution(run, selection.jobExecutionId);
+  const stepAttemptMatch = findStepAttempt(run, selection.stepAttemptId);
 
   if (stepMatch) {
     const attempt = resolveStepAttempt(stepMatch.step, selection.stepAttemptId);
@@ -37,7 +39,20 @@ export function resolveWorkflowRunSelection({
     };
   }
 
-  const job = (selection.jobId ? jobById.get(selection.jobId) : undefined) ?? run.jobs.at(0);
+  if (stepAttemptMatch) {
+    return {
+      job: stepAttemptMatch.job,
+      jobExecution: stepAttemptMatch.jobExecution,
+      step: stepAttemptMatch.step,
+      attempt: stepAttemptMatch.attempt,
+      selectedAttemptId: stepAttemptMatch.attempt.id,
+    };
+  }
+
+  const job =
+    (selection.jobId ? jobById.get(selection.jobId) : undefined) ??
+    jobExecutionMatch?.job ??
+    run.jobs.at(0);
   const jobExecution = job ? resolveJobExecution(job, selection.jobExecutionId) : undefined;
 
   return {
@@ -49,6 +64,38 @@ export function resolveWorkflowRunSelection({
   };
 }
 
+function findJobExecution(
+  run: WorkflowRunDetail,
+  jobExecutionId: string | undefined,
+): {job: Job; jobExecution: JobExecution} | undefined {
+  if (!jobExecutionId) return undefined;
+
+  for (const job of run.jobs) {
+    const jobExecution = job.jobExecutions.find((candidate) => candidate.id === jobExecutionId);
+    if (jobExecution) return {job, jobExecution};
+  }
+
+  return undefined;
+}
+
+function findStepAttempt(
+  run: WorkflowRunDetail,
+  stepAttemptId: string | undefined,
+): {job: Job; jobExecution: JobExecution; step: Step; attempt: StepAttempt} | undefined {
+  if (!stepAttemptId) return undefined;
+
+  for (const job of run.jobs) {
+    for (const jobExecution of job.jobExecutions) {
+      for (const step of jobExecution.steps) {
+        const attempt = step.attempts.find((candidate) => candidate.id === stepAttemptId);
+        if (attempt) return {job, jobExecution, step, attempt};
+      }
+    }
+  }
+
+  return undefined;
+}
+
 function findStep(
   run: WorkflowRunDetail,
   stepId: string | undefined,

package/src/components/workflow-run-view/workflow-run-states.tsx

@@ -9,7 +9,7 @@ export function WorkflowRunSkeleton() {
   return (
     <section
       aria-label="Loading workflow run"
-      className="border-b border-border-neutral-base bg-background-subtle-base px-16 py-12"
+      className="bg-background-neutral-background px-16 py-12"
     >
       <div className="flex min-w-0 flex-wrap items-center gap-x-12 gap-y-8">
         <div className="flex min-w-0 items-center gap-8">
@@ -31,6 +31,17 @@ export function WorkflowRunSkeleton() {
   );
 }
 
+export function WorkflowRunContentSkeleton() {
+  return (
+    <section
+      aria-label="Loading workflow run content"
+      className="min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-16"
+    >
+      <Skeleton className="h-160 w-full rounded-6" />
+    </section>
+  );
+}
+
 export function WorkflowRunNotFound() {
   return (
     <EmptyState