@shipfox/client-workflows 19.0.0 → 20.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "19.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.6.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/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/workflow-run-list-view.test.tsx

@@ -470,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,
         }),
       ]);
 
@@ -496,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-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'}),

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

@@ -159,6 +159,17 @@ describe('WorkflowRunSummary', () => {
   test('shows a live selected attempt duration for running runs', async () => {
     vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-05-07T01:02:14.000Z'));
     renderSummary({
+      jobs: [
+        workflowJobDto({
+          status: 'running',
+          job_executions: [
+            workflowJobExecutionDto({
+              status: 'running',
+              started_at: '2026-05-07T01:02:00.000Z',
+            }),
+          ],
+        }),
+      ],
       run_attempt: {
         id: '11111111-1111-4111-8111-000000000001',
         workflow_run_id: RUN_ID,
@@ -178,7 +189,9 @@ describe('WorkflowRunSummary', () => {
     expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
   });
 
-  test('reads a running run whose jobs have not started as queued', async () => {
+  // The header reports the attempt the API returned. Whether a job has reached a runner yet is
+  // the job surfaces' business, so an attempt whose jobs are all pending still reads as running.
+  test('reads a running attempt as running whatever its jobs have reached', async () => {
     vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-05-07T01:02:14.000Z'));
     renderSummary({
       jobs: [workflowJobDto({status: 'pending'})],
@@ -187,50 +200,89 @@ describe('WorkflowRunSummary', () => {
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(within(summary).getAllByText('Queued')).not.toHaveLength(0);
-    expect(within(summary).queryByText('Running')).not.toBeInTheDocument();
-    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'queued 2m 14s');
+    expect(within(summary).getAllByText('Running')).not.toHaveLength(0);
+    expect(within(summary).queryByText('Queued')).not.toBeInTheDocument();
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'running 2m 14s');
   });
 
-  test('names the job a queued run is waiting on when there is more than one', async () => {
+  test('uses a neutral verb when an attempt finished before any job execution started', async () => {
     renderSummary({
+      status: 'cancelled',
       jobs: [
         workflowJobDto({
-          name: 'lint',
           status: 'pending',
           job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T01:00:00.000Z'})],
         }),
-        workflowJobDto({
-          name: 'build',
-          status: 'pending',
-          job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T00:59:00.000Z'})],
-        }),
       ],
-      run_attempt: runningAttemptDto(),
+      run_attempt: {
+        id: '11111111-1111-4111-8111-000000000001',
+        workflow_run_id: RUN_ID,
+        attempt: 1,
+        status: 'cancelled',
+        created_at: '2026-05-07T01:00:00.000Z',
+        started_at: '2026-05-07T01:00:00.000Z',
+        finished_at: '2026-05-07T01:02:14.000Z',
+        rerun_mode: null,
+      },
     });
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(within(summary).getByText('waiting on')).toBeInTheDocument();
-    expect(within(summary).getByText('build')).toBeInTheDocument();
+    expect(within(summary).getAllByText('Cancelled')).not.toHaveLength(0);
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'lasted 2m 14s');
   });
 
-  test('leaves the waiting job unnamed when the run has a single job', async () => {
+  test('uses the run verb when a cancelled job execution started', async () => {
     renderSummary({
+      status: 'cancelled',
       jobs: [
         workflowJobDto({
-          name: 'build',
-          status: 'pending',
-          job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T01:00:00.000Z'})],
+          status: 'cancelled',
+          job_executions: [
+            workflowJobExecutionDto({
+              status: 'cancelled',
+              started_at: '2026-05-07T01:00:05.000Z',
+            }),
+          ],
         }),
       ],
-      run_attempt: runningAttemptDto(),
+      run_attempt: {
+        id: '11111111-1111-4111-8111-000000000001',
+        workflow_run_id: RUN_ID,
+        attempt: 1,
+        status: 'cancelled',
+        created_at: '2026-05-07T01:00:00.000Z',
+        started_at: '2026-05-07T01:00:00.000Z',
+        finished_at: '2026-05-07T01:02:14.000Z',
+        rerun_mode: null,
+      },
+    });
+
+    const summary = await screen.findByRole('region', {name: 'deploy-web'});
+
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'ran 2m 14s');
+  });
+
+  test('uses a neutral verb when every job was skipped', async () => {
+    renderSummary({
+      status: 'succeeded',
+      jobs: [workflowJobDto({status: 'skipped'})],
+      run_attempt: {
+        id: '11111111-1111-4111-8111-000000000001',
+        workflow_run_id: RUN_ID,
+        attempt: 1,
+        status: 'succeeded',
+        created_at: '2026-05-07T01:00:00.000Z',
+        started_at: '2026-05-07T01:00:00.000Z',
+        finished_at: '2026-05-07T01:02:14.000Z',
+        rerun_mode: null,
+      },
     });
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(within(summary).getAllByText('Queued')).not.toHaveLength(0);
-    expect(within(summary).queryByText('waiting on')).not.toBeInTheDocument();
+    expect(within(summary).getAllByText('Succeeded')).not.toHaveLength(0);
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'lasted 2m 14s');
   });
 
   test('does not render a whole-run source control', async () => {

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

@@ -12,7 +12,7 @@ import {useIsTextTruncated} from '@shipfox/react-ui/hooks';
 import {RelativeTime} from '@shipfox/react-ui/relative-time';
 import {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
-import {Code, Header, Text} from '@shipfox/react-ui/typography';
+import {Header, Text} from '@shipfox/react-ui/typography';
 import {useId} from 'react';
 import {WorkflowRunNumberLabel} from '#components/workflow-run-number-label.js';
 import {
@@ -21,17 +21,13 @@ import {
   WORKFLOW_RUN_STATUSES,
   type WorkflowRunDetail,
   type WorkflowRunRerunMode,
-  workflowRunBlockingJob,
-  workflowRunDetailDisplay,
 } from '#core/workflow-run.js';
 import {WorkflowRunDurationLabel} from '../workflow-run-duration-label.js';
 import {getWorkflowStatusVisual} from '../workflow-status/status-visuals.js';
 import {WorkflowRunAttemptSwitcher} from './workflow-run-attempt-switcher.js';
 
 const STATUS_BADGE_LABEL_WIDTH_CH = Math.max(
-  ...[...WORKFLOW_RUN_STATUSES, 'queued' as const].map(
-    (status) => getWorkflowStatusVisual(status).label.length,
-  ),
+  ...WORKFLOW_RUN_STATUSES.map((status) => getWorkflowStatusVisual(status).label.length),
 );
 const RERUN_BUTTON_SURFACE_CLASS_NAME =
   'bg-background-neutral-base hover:bg-background-neutral-hover active:bg-background-neutral-pressed';
@@ -60,19 +56,15 @@ export function WorkflowRunSummary({
   latestAttempt,
 }: WorkflowRunSummaryProps) {
   const headingId = useId();
-  const display = workflowRunDetailDisplay(run);
-  const status = getWorkflowStatusVisual(display.status);
+  const status = getWorkflowStatusVisual(run.runAttempt.status);
   const action = workflowRunActionForRun(run);
   const hasAction = canRenderWorkflowRunAction(action, onCancel, onRerun);
   const attemptSwitcher =
     latestAttempt && latestAttempt > 1 && workspaceSlug && projectSlug
       ? {workspaceSlug, projectSlug, latestAttempt}
       : null;
-  const displayDuration = display.duration;
-  // Named only while the run is waiting and has more than one job: with a single job the rail
-  // and the graph already say which one it is.
-  const blockingJob =
-    display.status === 'queued' && run.jobs.length > 1 ? workflowRunBlockingJob(run.jobs) : null;
+  const displayDuration = run.runAttempt.displayDuration;
+  const hasStarted = run.hasStartedJobExecution;
   const {ref: headingTextRef, isTruncated: isHeadingTruncated} =
     useIsTextTruncated<HTMLSpanElement>(run.name);
 
@@ -184,24 +176,11 @@ export function WorkflowRunSummary({
                 <MetadataSeparator />
                 <WorkflowRunDurationLabel
                   duration={displayDuration}
+                  hasStarted={hasStarted}
                   className="text-foreground-neutral-subtle"
                 />
               </>
             ) : null}
-
-            {blockingJob ? (
-              <>
-                <MetadataSeparator />
-                <span className="flex min-w-0 items-center gap-tight">
-                  <Text as="span" size="xs" className="shrink-0">
-                    waiting on
-                  </Text>
-                  <Code as="span" variant="label" className="min-w-0 truncate">
-                    {blockingJob.displayName}
-                  </Code>
-                </span>
-              </>
-            ) : null}
           </div>
         </div>
       </section>

package/src/components/workflow-status/status-visuals.ts

@@ -18,10 +18,6 @@ export function getWorkflowStatusVisual(status: WorkflowDisplayStatus): Workflow
   switch (status) {
     case 'pending':
       return {kind: 'pending', label: 'Pending', dot: 'neutral', badge: 'neutral'};
-    // Waiting on a runner is the awaiting-* state the warning tone was held for: the run is
-    // live but nothing is executing, which is the operator's problem to see, not ours to hide.
-    case 'queued':
-      return {kind: 'queued', label: 'Queued', dot: 'warning', badge: 'warning'};
     case 'running':
       return {kind: 'running', label: 'Running', dot: 'info', badge: 'info'};
     case 'listening':

package/src/components/workflow-status/workflow-status-icon.stories.tsx

@@ -6,7 +6,6 @@ import {WorkflowStatusIcon} from './workflow-status-icon.js';
 
 const statuses: WorkflowDisplayStatus[] = [
   'pending',
-  'queued',
   'running',
   'listening',
   'succeeded',

package/src/components/workflow-status/workflow-status-icon.tsx

@@ -89,24 +89,6 @@ export function WorkflowStatusIcon({
         <Icon name="pulseLine" size={Math.max(8, Math.round(size * 0.7))} className="text-white" />
       </span>
     );
-  } else if (visual.kind === 'queued') {
-    // An hourglass in the same filled disc the listening state uses, so waiting reads as its
-    // own shape rather than as a pending ring that happens to be a different colour.
-    glyph = (
-      <span
-        className={cn(
-          'inline-flex shrink-0 items-center justify-center rounded-full bg-current',
-          box,
-          toneByVariant.warning,
-        )}
-      >
-        <Icon
-          name="hourglassLine"
-          size={Math.max(8, Math.round(size * 0.7))}
-          className="text-white"
-        />
-      </span>
-    );
   } else if (visual.kind === 'running') {
     glyph = <Dot variant="info" ripple={ripple} className={box} />;
   } else if (visual.kind === 'pending') {