@shipfox/client-workflows 18.0.0 → 20.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "18.0.0",
+  "version": "20.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -29,7 +29,7 @@
     "date-fns": "^4.1.0",
     "@shipfox/annotations-dto": "12.3.0",
     "@shipfox/api-definitions-dto": "12.3.0",
-    "@shipfox/api-workflows-dto": "12.5.0",
+    "@shipfox/api-workflows-dto": "12.7.0",
     "@shipfox/client-api": "6.0.1",
     "@shipfox/client-logs": "17.0.0",
     "@shipfox/client-projects": "17.0.0",

package/src/components/job-graph/job-node.test.tsx

@@ -332,7 +332,7 @@ describe('JobNode status indicator', () => {
     expect(screen.getByRole('button', {name: 'deploy-prod, Succeeded'})).toBeInTheDocument();
   });
 
-  test('shows a running lifecycle without a running step as pending', () => {
+  test('shows a running lifecycle without a running step as running', () => {
     const node = makeNode({
       name: 'deploy',
       status: 'pending',
@@ -341,7 +341,7 @@ describe('JobNode status indicator', () => {
 
     renderNode(node);
 
-    expect(screen.getByRole('button', {name: 'deploy, Pending'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'deploy, Running'})).toBeInTheDocument();
   });
 
   test('shows a pending lifecycle as running while a step is active', () => {

package/src/components/workflow-run-duration-label.tsx

@@ -2,50 +2,37 @@ import {Icon} from '@shipfox/react-ui/icon';
 import {useTimeTick} from '@shipfox/react-ui/time-ticker';
 import {Code} from '@shipfox/react-ui/typography';
 import {cn, humanDuration} from '@shipfox/react-ui/utils';
-import type {
-  WorkflowRunAttemptDisplayDuration,
-  WorkflowRunDisplayDuration,
-} from '#core/workflow-run.js';
+import type {WorkflowRunAttemptDisplayDuration} from '#core/workflow-run.js';
 
 /**
- * The run list reads an attempt's own marks and cannot tell queue from run, so an unkinded
- * duration still renders as run time. Only surfaces holding the run's jobs pass a kind.
+ * A run reports one span: how long its attempt has been under way. Queueing is a job
+ * execution's own affair, and the job surfaces report it there.
  */
-export type WorkflowRunDurationDisplay =
-  | WorkflowRunAttemptDisplayDuration
-  | WorkflowRunDisplayDuration;
-
-type DurationKind = 'queue' | 'run';
-
-const GLYPH_BY_KIND = {queue: 'hourglassLine', run: 'timerLine'} as const;
-const LIVE_VERB_BY_KIND = {queue: 'queued', run: 'running'} as const;
-const FIXED_VERB_BY_KIND = {queue: 'queued', run: 'ran'} as const;
+export type WorkflowRunDurationDisplay = WorkflowRunAttemptDisplayDuration;
 
 export function WorkflowRunDurationLabel({
   duration,
+  hasStarted,
   className,
 }: {
   duration: WorkflowRunDurationDisplay | null;
+  hasStarted: boolean;
   className?: string | undefined;
 }) {
   if (duration === null) return null;
-  const kind = durationKind(duration);
 
   switch (duration.state) {
     case 'fixed': {
       const display = formatFixedDurationLabel(duration.elapsed);
+      const verb = hasStarted ? 'ran' : 'lasted';
       return (
-        <DurationText
-          className={className}
-          kind={kind}
-          ariaLabel={`${FIXED_VERB_BY_KIND[kind]} ${display}`}
-        >
+        <DurationText className={className} ariaLabel={`${verb} ${display}`}>
           {display}
         </DurationText>
       );
     }
     case 'live':
-      return <LiveDurationText duration={duration} kind={kind} className={className} />;
+      return <LiveDurationText duration={duration} className={className} />;
     default: {
       const exhaustive: never = duration;
       return exhaustive;
@@ -55,22 +42,25 @@ export function WorkflowRunDurationLabel({
 
 export function useWorkflowRunDurationAccessibleLabel(
   duration: WorkflowRunDurationDisplay | null,
+  hasStarted: boolean,
 ): string | undefined {
   useTimeTick();
-  return workflowRunDurationAccessibleLabel(duration);
+  return workflowRunDurationAccessibleLabel(duration, hasStarted);
 }
 
 export function workflowRunDurationAccessibleLabel(
   duration: WorkflowRunDurationDisplay | null,
+  hasStarted: boolean,
 ): string | undefined {
   if (duration === null) return undefined;
-  const kind = durationKind(duration);
 
   switch (duration.state) {
     case 'live':
-      return `${LIVE_VERB_BY_KIND[kind]} ${humanDuration(duration.fromIso)}`;
-    case 'fixed':
-      return `${FIXED_VERB_BY_KIND[kind]} ${formatFixedDurationLabel(duration.elapsed)}`;
+      return `running ${humanDuration(duration.fromIso)}`;
+    case 'fixed': {
+      const verb = hasStarted ? 'ran' : 'lasted';
+      return `${verb} ${formatFixedDurationLabel(duration.elapsed)}`;
+    }
     default: {
       const exhaustive: never = duration;
       return exhaustive;
@@ -78,27 +68,17 @@ export function workflowRunDurationAccessibleLabel(
   }
 }
 
-function durationKind(duration: WorkflowRunDurationDisplay): DurationKind {
-  return 'kind' in duration ? duration.kind : 'run';
-}
-
 function LiveDurationText({
   duration,
-  kind,
   className,
 }: {
   duration: Extract<WorkflowRunDurationDisplay, {state: 'live'}>;
-  kind: DurationKind;
   className?: string | undefined;
 }) {
   useTimeTick();
   const display = humanDuration(duration.fromIso);
   return (
-    <DurationText
-      className={className}
-      kind={kind}
-      ariaLabel={`${LIVE_VERB_BY_KIND[kind]} ${display}`}
-    >
+    <DurationText className={className} ariaLabel={`running ${display}`}>
       {display}
     </DurationText>
   );
@@ -107,12 +87,10 @@ function LiveDurationText({
 function DurationText({
   children,
   className,
-  kind,
   ariaLabel,
 }: {
   children: string;
   className?: string | undefined;
-  kind: DurationKind;
   ariaLabel?: string | undefined;
 }) {
   return (
@@ -125,10 +103,9 @@ function DurationText({
         className,
       )}
     >
-      {/* The glyph is the only visible mark of queue vs run: the status badge already writes
-          "Queued", and the numeric columns are fixed width. The verb rides the accessible
-          name instead. */}
-      <Icon name={GLYPH_BY_KIND[kind]} className="size-12 shrink-0" aria-hidden="true" />
+      {/* The verb rides the accessible name: the numeric columns are fixed width and the
+          status badge already says whether the run is still going. */}
+      <Icon name="timerLine" className="size-12 shrink-0" aria-hidden="true" />
       {children}
     </Code>
   );

package/src/components/workflow-run-list/job-status-strip.tsx

@@ -3,7 +3,8 @@ import {Code, Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
-import type {JobStatus, WorkflowRunJobSummary, WorkflowRunJobs} from '#core/workflow-run.js';
+import {deriveJobDisplayStatus, type JobDisplayStatus} from '#core/entities/job.js';
+import type {WorkflowRunJobSummary, WorkflowRunJobs} from '#core/workflow-run.js';
 
 /**
  * How many glyphs fit the strip's column before it starts costing the run name width.
@@ -33,16 +34,17 @@ const COMPACT_COUNT_FORMAT = new Intl.NumberFormat('en', {
 
 // Worst-first, so the overflow glyph reports the most alarming thing it is standing in for.
 // A strip that hides a failure behind eight green discs would be worse than no strip at all.
-const STATUS_SEVERITY: Record<JobStatus, number> = {
+const STATUS_SEVERITY: Record<JobDisplayStatus, number> = {
   failed: 5,
   running: 4,
+  listening: 4,
   pending: 3,
   cancelled: 2,
   skipped: 1,
   succeeded: 0,
 };
 
-const NOTABLE_STATUSES: readonly JobStatus[] = ['failed', 'running'];
+const NOTABLE_STATUSES: readonly JobDisplayStatus[] = ['failed', 'running', 'listening'];
 
 export interface JobStatusStripProps {
   jobs: WorkflowRunJobs;
@@ -80,7 +82,7 @@ export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
             {visible.map((job) => (
               <WorkflowStatusIcon
                 key={job.id}
-                status={job.status}
+                status={displayStatus(job)}
                 size={GLYPH_SIZE}
                 // One ripple per running job, on every row, would turn a calm list into a
                 // field of pulses. The run's own glyph already carries the live edge.
@@ -121,7 +123,7 @@ function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary:
   // can be named, but the count of those left over is read off the totals, so a failure past
   // the preview is still accounted for rather than silently missing.
   const named = jobs.preview
-    .filter((job) => NOTABLE_STATUSES.includes(job.status))
+    .filter((job) => NOTABLE_STATUSES.includes(displayStatus(job)))
     .slice(0, MAX_TOOLTIP_JOB_NAMES);
   const notableTotal = NOTABLE_STATUSES.reduce((total, status) => total + countOf(jobs, status), 0);
   const remaining = notableTotal - named.length;
@@ -133,7 +135,7 @@ function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary:
       </Text>
       {named.map((job) => (
         <Code as="span" variant="label" key={job.id} className="block truncate">
-          {getWorkflowStatusVisual(job.status).label.toLowerCase()} · {job.name ?? job.key}
+          {getWorkflowStatusVisual(displayStatus(job)).label.toLowerCase()} · {job.name ?? job.key}
         </Code>
       ))}
       {remaining > 0 ? (
@@ -162,15 +164,16 @@ export function jobStatusSummary(jobs: WorkflowRunJobs): string {
 function worstHiddenStatus(
   jobs: WorkflowRunJobs,
   visible: readonly WorkflowRunJobSummary[],
-): JobStatus | null {
+): JobDisplayStatus | null {
   const hidden = new Map(jobs.statusCounts.map(({status, count}) => [status, count]));
   for (const job of visible) {
-    const remaining = (hidden.get(job.status) ?? 0) - 1;
-    if (remaining > 0) hidden.set(job.status, remaining);
-    else hidden.delete(job.status);
+    const status = displayStatus(job);
+    const remaining = (hidden.get(status) ?? 0) - 1;
+    if (remaining > 0) hidden.set(status, remaining);
+    else hidden.delete(status);
   }
 
-  let worst: JobStatus | null = null;
+  let worst: JobDisplayStatus | null = null;
   for (const [status, count] of hidden) {
     if (count <= 0) continue;
     if (worst === null || STATUS_SEVERITY[status] > STATUS_SEVERITY[worst]) worst = status;
@@ -184,6 +187,16 @@ export function overflowCountLabel(hiddenCount: number): string {
     : COMPACT_COUNT_FORMAT.format(hiddenCount);
 }
 
-function countOf(jobs: WorkflowRunJobs, status: JobStatus): number {
+function countOf(jobs: WorkflowRunJobs, status: JobDisplayStatus): number {
   return jobs.statusCounts.find((entry) => entry.status === status)?.count ?? 0;
 }
+
+function displayStatus(job: WorkflowRunJobSummary): JobDisplayStatus {
+  return deriveJobDisplayStatus({
+    mode: job.mode,
+    status: job.status,
+    listenerStatus: job.listenerStatus,
+    executionStatus: job.executionStatus,
+    jobExecutions: [],
+  });
+}

package/src/components/workflow-run-list/workflow-run-list-view.test.tsx

@@ -307,6 +307,53 @@ describe('WorkflowRunListView', () => {
       ).toBeInTheDocument();
     });
 
+    test('shows an executing one-shot job instead of its pending verdict', async () => {
+      const {jobs} = workflowRunJobsFixture(['pending']);
+      renderListView([
+        run('running', 'deploy-web', 'run-1', {
+          jobs: jobs.map((job) => ({...job, execution_status: 'running'})),
+          job_status_counts: [{status: 'pending', count: 1}],
+          job_display_status_counts: [{status: 'running', count: 1}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '1 job: 1 running'});
+      expect(within(strip).getByLabelText('Running')).toBeInTheDocument();
+    });
+
+    test('shows an active listener as listening in the job strip', async () => {
+      const {jobs} = workflowRunJobsFixture(['running']);
+      renderListView([
+        run('running', 'event-driven', 'run-1', {
+          jobs: jobs.map((job) => ({
+            ...job,
+            mode: 'listening',
+            listener_status: 'listening',
+            execution_status: null,
+          })),
+          job_status_counts: [{status: 'running', count: 1}],
+          job_display_status_counts: [{status: 'listening', count: 1}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '1 job: 1 listening'});
+      expect(within(strip).getByLabelText('Listening')).toBeInTheDocument();
+    });
+
+    test('shows a failed execution when the job verdict is still pending', async () => {
+      const {jobs} = workflowRunJobsFixture(['pending']);
+      renderListView([
+        run('running', 'deploy-web', 'run-1', {
+          jobs: jobs.map((job) => ({...job, execution_status: 'failed'})),
+          job_status_counts: [{status: 'pending', count: 1}],
+          job_display_status_counts: [{status: 'failed', count: 1}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '1 job: 1 failed'});
+      expect(within(strip).getByLabelText('Failed')).toBeInTheDocument();
+    });
+
     // The link's aria-label replaces its contents, so the strip's own label is not spoken
     // when the row is announced as a link. Where a run failed has to survive that.
     test('carries the job breakdown into the row link name', async () => {
@@ -355,6 +402,32 @@ describe('WorkflowRunListView', () => {
       expect(within(strip).getByLabelText('Failed')).toBeInTheDocument();
     });
 
+    test('reports listening jobs in the overflow glyph and tooltip', async () => {
+      const {jobs} = workflowRunJobsFixture(
+        Array.from({length: 16}, () => 'pending') as JobStatusDto[],
+      );
+      renderListView([
+        run('running', 'event-driven', 'run-listener', {
+          jobs: jobs.map((job) => ({
+            ...job,
+            mode: 'listening',
+            listener_status: 'listening',
+            execution_status: null,
+          })),
+          job_status_counts: [{status: 'pending', count: 20}],
+          job_display_status_counts: [{status: 'listening', count: 20}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '20 jobs: 20 listening'});
+      expect(screen.getByText('+13')).toBeInTheDocument();
+      expect(within(strip).getAllByLabelText('Listening')).toHaveLength(8);
+
+      const user = userEvent.setup();
+      await user.hover(strip);
+      expect(await screen.findByRole('tooltip')).toHaveTextContent('and 14 more');
+    });
+
     // Nothing caps a workflow's job count, so an exact overflow count is unbounded in width
     // and would eventually paint over the duration column beside it.
     test('abbreviates an overflow count too wide to print exactly', async () => {
@@ -397,6 +470,7 @@ describe('WorkflowRunListView', () => {
         run('succeeded', 'build-image', 'run-build-image', {
           started_at: '2026-05-07T01:00:00.000Z',
           finished_at: '2026-05-07T01:02:14.000Z',
+          has_started_job_execution: true,
         }),
       ]);
 
@@ -423,6 +497,53 @@ describe('WorkflowRunListView', () => {
       expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
     });
 
+    test('uses the attempt status when all listed jobs are pending', async () => {
+      vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-05-07T01:02:14.000Z'));
+
+      renderListView([
+        run('running', 'waiting-for-runner', 'run-waiting-for-runner', {
+          ...workflowRunJobsFixture(['pending', 'pending']),
+          started_at: '2026-05-07T01:00:00.000Z',
+          finished_at: null,
+        }),
+      ]);
+
+      const duration = await screen.findByText('2m 14s');
+      expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
+      expect(
+        screen.getByRole('link', {
+          name: (name) => name.includes('Running') && name.includes('running 2m 14s'),
+        }),
+      ).toBeInTheDocument();
+    });
+
+    test('uses a neutral verb when no listed job execution started', async () => {
+      renderListView([
+        run('cancelled', 'cancelled-before-runner', 'run-cancelled-before-runner', {
+          ...workflowRunJobsFixture(['pending']),
+          started_at: '2026-05-07T01:00:00.000Z',
+          finished_at: '2026-05-07T01:02:14.000Z',
+        }),
+      ]);
+
+      const duration = await screen.findByText('2m 14s');
+      expect(duration).toHaveAttribute('aria-label', 'lasted 2m 14s');
+    });
+
+    test('uses the started-execution flag when a cancelled job reached a runner', async () => {
+      renderListView([
+        run('cancelled', 'cancelled-after-start', 'run-cancelled-after-start', {
+          ...workflowRunJobsFixture(['cancelled']),
+          has_started_job_execution: true,
+          started_at: '2026-05-07T01:00:00.000Z',
+          finished_at: '2026-05-07T01:02:14.000Z',
+        }),
+      ]);
+
+      const duration = await screen.findByText('2m 14s');
+      expect(duration).toHaveAttribute('aria-label', 'ran 2m 14s');
+    });
+
     test('renders the workflow name beside the run number', async () => {
       renderListView([
         run('succeeded', 'Deploy production', 'run-deploy-production', {

package/src/components/workflow-run-list/workflow-run-list.stories.tsx

@@ -101,6 +101,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {};
 
+export const ExecutionStates: Story = {
+  args: {
+    runs: [makeExecutionStateRun(), makeListeningStateRun()],
+  },
+};
+
 /**
  * The row under its one-line threshold, at the 720px a 768px viewport leaves the column.
  *
@@ -229,3 +235,28 @@ function StateExample({label, children}: {label: string; children: ReactNode}) {
     </div>
   );
 }
+
+function makeExecutionStateRun(): WorkflowRunListItem {
+  const fixture = workflowRunJobsFixture(['pending']);
+  return sequencedWorkflowRunListItem('running', 'one-shot-executing', 1, {
+    ...fixture,
+    jobs: fixture.jobs.map((job) => ({...job, execution_status: 'running'})),
+    job_status_counts: [{status: 'pending', count: 1}],
+    job_display_status_counts: [{status: 'running', count: 1}],
+  });
+}
+
+function makeListeningStateRun(): WorkflowRunListItem {
+  const fixture = workflowRunJobsFixture(['pending']);
+  return sequencedWorkflowRunListItem('running', 'event-driven-listener', 3, {
+    ...fixture,
+    jobs: fixture.jobs.map((job) => ({
+      ...job,
+      mode: 'listening',
+      listener_status: 'listening',
+      execution_status: null,
+    })),
+    job_status_counts: [{status: 'pending', count: 1}],
+    job_display_status_counts: [{status: 'listening', count: 1}],
+  });
+}

package/src/components/workflow-run-list/workflow-run-row.tsx

@@ -20,7 +20,6 @@ import {
   workflowRunActor,
   workflowRunBranchLabel,
   workflowRunCommitLabel,
-  workflowRunListItemDisplay,
 } from '#core/workflow-run.js';
 import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
 import {JobStatusStrip, jobStatusSummary} from './job-status-strip.js';
@@ -69,9 +68,11 @@ export function WorkflowRunRow({
   workspaceSlug?: string | undefined;
   projectSlug?: string | undefined;
 }) {
-  const display = workflowRunListItemDisplay(run);
-  const durationLabel = useWorkflowRunDurationAccessibleLabel(display.duration);
-  const statusLabel = getWorkflowStatusVisual(display.status).label;
+  const duration = run.runAttempt.displayDuration;
+  const hasStarted = run.jobs.hasStartedJobExecution;
+  const durationLabel = useWorkflowRunDurationAccessibleLabel(duration, hasStarted);
+  const status = run.runAttempt.status;
+  const statusLabel = getWorkflowStatusVisual(status).label;
   const runNumberLabel = formatWorkflowRunNumberLabel(run);
   const branch = workflowRunBranchLabel(run);
   const commit = workflowRunCommitLabel(run);
@@ -79,7 +80,7 @@ export function WorkflowRunRow({
 
   const body = (
     <>
-      <WorkflowStatusIcon status={display.status} size={14} className="shrink-0" />
+      <WorkflowStatusIcon status={status} size={14} className="shrink-0" />
 
       <div className="flex min-w-0 flex-1 flex-col gap-tight @min-[976px]:flex-row @min-[976px]:items-center @min-[976px]:gap-cluster">
         <span className="flex min-w-0 items-center gap-inline @min-[976px]:flex-1">
@@ -105,7 +106,7 @@ export function WorkflowRunRow({
           <JobStatusStrip jobs={run.jobs} />
         </span>
         <span className="flex w-64 justify-end">
-          <WorkflowRunDurationLabel duration={display.duration} />
+          <WorkflowRunDurationLabel duration={duration} hasStarted={hasStarted} />
         </span>
         <Code
           variant="label"

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

@@ -18,7 +18,6 @@ import {WorkflowRunAttempt, type WorkflowRunStatus} from '#core/workflow-run.js'
 import {
   runAttemptsResponseDto,
   workflowJobDto,
-  workflowJobExecutionDto,
   workflowRunAttemptDto,
   workflowRunDetail,
 } from '#test/fixtures/workflow-run.js';
@@ -203,19 +202,6 @@ export const Durations: Story = {
   ),
 };
 
-/**
- * A live attempt whose jobs have not started. The header reports the wait rather than a run
- * that never began, and names the job the run is blocked on once there is more than one.
- */
-export const Queued: Story = {
-  render: () => (
-    <div className="flex flex-col">
-      <WorkflowRunSummary run={queuedRun('release-queued', ['build'])} />
-      <WorkflowRunSummary run={queuedRun('release-queued-fan-out', ['build', 'lint', 'test'])} />
-    </div>
-  ),
-};
-
 export const Cancellable: Story = {
   args: {
     run: workflowRunDetail({status: 'running'}),
@@ -223,30 +209,6 @@ export const Cancellable: Story = {
   },
 };
 
-function queuedRun(name: string, jobNames: string[]) {
-  return workflowRunDetail({
-    status: 'running',
-    name,
-    run_attempt: workflowRunAttemptDto({
-      status: 'running',
-      created_at: RUN_STARTED_AT,
-      started_at: RUN_STARTED_AT,
-      finished_at: null,
-    }),
-    jobs: jobNames.map((jobName, index) =>
-      workflowJobDto({
-        name: jobName,
-        status: 'pending',
-        job_executions: [
-          workflowJobExecutionDto({
-            queued_at: new Date(Date.parse(RUN_STARTED_AT) + index * 1000).toISOString(),
-          }),
-        ],
-      }),
-    ),
-  });
-}
-
 export const Cancelling: Story = {
   args: {
     run: workflowRunDetail({status: 'running'}),