@shipfox/client-workflows 12.0.2 → 13.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "12.0.2",
+  "version": "13.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,15 +27,15 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "date-fns": "^4.1.0",
-    "@shipfox/api-definitions-dto": "11.0.0",
-    "@shipfox/api-workflows-dto": "10.0.0",
+    "@shipfox/api-workflows-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-logs": "12.0.1",
-    "@shipfox/client-projects": "12.0.2",
-    "@shipfox/client-shell": "12.0.2",
-    "@shipfox/client-triggers": "12.0.2",
-    "@shipfox/client-ui": "6.0.2",
-    "@shipfox/react-ui": "0.3.7"
+    "@shipfox/client-logs": "13.0.0",
+    "@shipfox/api-definitions-dto": "12.0.0",
+    "@shipfox/client-projects": "13.0.0",
+    "@shipfox/client-shell": "13.0.0",
+    "@shipfox/client-triggers": "13.0.0",
+    "@shipfox/react-ui": "0.4.0",
+    "@shipfox/client-ui": "13.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/job-graph/job-duration-format.ts

@@ -1,5 +1,9 @@
 import {humanDuration} from '@shipfox/react-ui/utils';
-import type {JobDisplayDuration, JobExecutionTime} from '#core/workflow-run.js';
+import type {
+  JobDisplayDuration,
+  JobExecutionDisplayStatus,
+  JobExecutionTime,
+} from '#core/workflow-run.js';
 
 export function formatJobExecutionTimeLabel(time: JobExecutionTime): string {
   switch (time.state) {
@@ -16,6 +20,7 @@ export function formatJobExecutionTimeLabel(time: JobExecutionTime): string {
 
 export function formatJobDurationAccessibleLabel(
   duration: JobDisplayDuration | null,
+  displayStatus?: JobExecutionDisplayStatus,
 ): string | undefined {
   if (duration === null) return undefined;
 
@@ -24,7 +29,11 @@ export function formatJobDurationAccessibleLabel(
     case 'queue':
       return duration.state === 'live' ? `queueing ${label}` : `queued ${label}`;
     case 'run':
-      return duration.state === 'live' ? `running ${label}` : `ran ${label}`;
+      if (duration.state !== 'live') return `ran ${label}`;
+      if (displayStatus === 'running') return `running ${label}`;
+      return displayStatus === 'pending'
+        ? `runner assigned ${label}`
+        : `execution elapsed ${label}`;
     default: {
       const exhaustive: never = duration;
       return exhaustive;

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

@@ -6,6 +6,7 @@ import {
   workflowJob,
   workflowJobExecutionDto,
   workflowRunDetail,
+  workflowStepDto,
 } from '#test/fixtures/workflow-run.js';
 import {JobGraph} from './job-graph.js';
 
@@ -46,10 +47,7 @@ describe('JobGraph', () => {
     render(
       <JobGraph
         run={makeRun({
-          jobs: [
-            makeJob({name: 'linux', status: 'running'}),
-            makeJob({name: 'macos', status: 'running', position: 1}),
-          ],
+          jobs: [makeRunningJob({name: 'linux'}), makeRunningJob({name: 'macos', position: 1})],
         })}
       />,
     );
@@ -99,7 +97,7 @@ describe('JobGraph', () => {
         run={makeRun({
           jobs: [
             makeJob({name: 'build'}),
-            makeJob({name: 'deploy', position: 1, dependencies: ['build'], status: 'running'}),
+            makeRunningJob({name: 'deploy', position: 1, dependencies: ['build']}),
           ],
         })}
       />,
@@ -161,7 +159,7 @@ describe('JobGraph', () => {
       />,
     );
 
-    const build = screen.getByRole('button', {name: 'build, Pending, 2 executions'});
+    const build = screen.getByRole('button', {name: 'build, Succeeded, 2 executions'});
     const deploy = screen.getByRole('button', {name: 'deploy, Pending'});
     expect(within(build).getByText('2')).toBeInTheDocument();
     expect(within(build).queryByText('2 exec')).not.toBeInTheDocument();
@@ -224,7 +222,7 @@ describe('JobGraph', () => {
       dependencies: ['build'],
       status: 'succeeded',
     });
-    const testJob = makeJob({
+    const testJob = makeRunningJob({
       name: 'test',
       position: 2,
       dependencies: ['build'],
@@ -257,7 +255,7 @@ describe('JobGraph', () => {
   test('routes skipped-column join edges away from intermediate nodes', () => {
     const packageJob = makeJob({name: 'package', position: 0, status: 'succeeded'});
     const securityScan = makeJob({name: 'security-scan', position: 1, status: 'succeeded'});
-    const smokeTests = makeJob({
+    const smokeTests = makeRunningJob({
       name: 'smoke-tests',
       position: 2,
       dependencies: ['package'],
@@ -296,3 +294,16 @@ function makeRun(overrides: Partial<WorkflowRunDetail> = {}): WorkflowRunDetail
 function makeJob(overrides: Partial<WorkflowRunJobDetailDto> & {name: string}): Job {
   return workflowJob(overrides);
 }
+
+function makeRunningJob(overrides: Partial<WorkflowRunJobDetailDto> & {name: string}): Job {
+  return makeJob({
+    ...overrides,
+    status: 'running',
+    job_executions: [
+      workflowJobExecutionDto({
+        status: 'running',
+        steps: [workflowStepDto({status: 'running'})],
+      }),
+    ],
+  });
+}

package/src/components/job-graph/job-graph.stories.tsx

@@ -2,7 +2,7 @@ import type {WorkflowRunJobDetailDto} from '@shipfox/api-workflows-dto';
 import type {Meta, StoryObj} from '@storybook/react';
 import {within} from 'storybook/test';
 import type {Job, WorkflowRunDetail} from '#core/workflow-run.js';
-import {workflowJob, workflowRunDetail} from '#test/fixtures/workflow-run.js';
+import {workflowJob, workflowRunDetail, workflowStepDto} from '#test/fixtures/workflow-run.js';
 import {JobGraph} from './job-graph.js';
 
 const meta = {
@@ -93,6 +93,23 @@ export const Empty: Story = {
   args: {run: makeRun({jobs: []})},
 };
 
+export const LargeWideAndTall: Story = {
+  args: {
+    run: makeRun({
+      jobs: [
+        ...linearJobs(10),
+        ...Array.from({length: 10}, (_, index) =>
+          makeJob({
+            name: `parallel-${String(index + 1).padStart(2, '0')}`,
+            position: 20 + index,
+            status: index < 2 ? 'running' : 'pending',
+          }),
+        ),
+      ],
+    }),
+  },
+};
+
 export const Selected: Story = {
   args: {
     run: makeRun({
@@ -111,23 +128,6 @@ export const Selected: Story = {
   },
 };
 
-export const LargeWideAndTall: Story = {
-  args: {
-    run: makeRun({
-      jobs: [
-        ...linearJobs(10),
-        ...Array.from({length: 10}, (_, index) =>
-          makeJob({
-            name: `parallel-${String(index + 1).padStart(2, '0')}`,
-            position: 20 + index,
-            status: index < 2 ? 'running' : 'pending',
-          }),
-        ),
-      ],
-    }),
-  },
-};
-
 function linearJobs(count: number): Job[] {
   return Array.from({length: count}, (_, index) =>
     makeJob({
@@ -178,5 +178,9 @@ function makeRun(overrides: Partial<WorkflowRunDetail> = {}): WorkflowRunDetail
 }
 
 function makeJob(overrides: Partial<WorkflowRunJobDetailDto> & {name: string}): Job {
-  return workflowJob(overrides);
+  const job = workflowJob(overrides);
+  if (overrides.status === 'running' && job.jobExecutions.length === 0) {
+    return workflowJob({...overrides, steps: [workflowStepDto({status: 'running'})]});
+  }
+  return job;
 }

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

@@ -2,7 +2,11 @@ import type {WorkflowRunJobDetailDto} from '@shipfox/api-workflows-dto';
 import type {Meta, StoryObj} from '@storybook/react';
 import type {KeyboardEventHandler} from 'react';
 import type {JobExecutionStatus, JobStatus} from '#core/workflow-run.js';
-import {workflowJob, workflowJobExecutionDto} from '#test/fixtures/workflow-run.js';
+import {
+  workflowJob,
+  workflowJobExecutionDto,
+  workflowStepDto,
+} from '#test/fixtures/workflow-run.js';
 import type {JobGraphNode} from './graph-model.js';
 import {JobNode} from './job-node.js';
 
@@ -183,7 +187,7 @@ export const ListeningProgression: Story = {
       <JobNode
         node={makeNode({
           id: 'job-listening-running',
-          label: 'running, 0 executions',
+          label: 'listening, 0 executions',
           mode: 'listening',
           status: 'running',
           listenerStatus: 'listening',
@@ -200,7 +204,7 @@ export const ListeningProgression: Story = {
       <JobNode
         node={makeNode({
           id: 'job-one-running-execution',
-          label: 'running, 1 running execution',
+          label: 'listening, 1 running execution',
           mode: 'listening',
           status: 'running',
           listenerStatus: 'listening',
@@ -217,7 +221,7 @@ export const ListeningProgression: Story = {
       <JobNode
         node={makeNode({
           id: 'job-mixed-executions',
-          label: 'running, mixed executions',
+          label: 'listening, mixed executions',
           mode: 'listening',
           status: 'running',
           listenerStatus: 'listening',
@@ -330,6 +334,7 @@ function makeNode({
             queued_at: queuedAt,
             started_at: startedAt,
             finished_at: finishedAt,
+            ...(status === 'running' ? {steps: [workflowStepDto({status: 'running'})]} : {}),
           }),
         ]
       : jobExecutions,
@@ -359,6 +364,6 @@ function makeExecutionsByStatus(
     timed_out_at: null,
     created_at: '2026-06-26T11:54:00.000Z',
     updated_at: '2026-06-26T12:00:00.000Z',
-    steps: [],
+    steps: status === 'running' ? [workflowStepDto({status: 'running'})] : [],
   }));
 }

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

@@ -2,14 +2,18 @@ import type {WorkflowRunJobDetailDto} from '@shipfox/api-workflows-dto';
 import {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';
 import {act, render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {workflowJob, workflowJobExecutionDto} from '#test/fixtures/workflow-run.js';
+import {
+  workflowJob,
+  workflowJobExecutionDto,
+  workflowStepDto,
+} from '#test/fixtures/workflow-run.js';
 import type {JobGraphNode} from './graph-model.js';
 import {JobNode} from './job-node.js';
 
 const NOW = Date.parse('2026-06-26T12:00:00.000Z');
 
 type NodeOverrides = Omit<Partial<WorkflowRunJobDetailDto>, 'job_executions'> & {
-  name: string;
+  name?: string | null;
   job_executions?: WorkflowRunJobDetailDto['job_executions'];
   queued_at?: string | null;
   started_at?: string | null;
@@ -32,6 +36,9 @@ function makeNode(overrides: NodeOverrides): JobGraphNode {
         queued_at: queued_at ?? null,
         started_at: started_at ?? null,
         finished_at: finished_at ?? null,
+        ...(jobOverrides.status === 'running'
+          ? {steps: [workflowStepDto({status: 'running'})]}
+          : {}),
       }),
     ];
   } else if (job_executions !== undefined) {
@@ -200,7 +207,7 @@ describe('JobNode duration', () => {
     renderNode(node);
 
     expect(screen.queryByText('2m 14s')).not.toBeInTheDocument();
-    expect(screen.getByRole('button', {name: 'deploy-window, Running'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'deploy-window, Listening'})).toBeInTheDocument();
   });
 });
 
@@ -227,12 +234,12 @@ describe('JobNode listening indicator', () => {
 
     renderNode(node);
 
-    expect(screen.getByRole('button', {name: 'deploy-window, Running'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'deploy-window, Listening'})).toBeInTheDocument();
     expect(screen.queryByLabelText('Waiting for events to start job')).not.toBeInTheDocument();
 
-    await user.hover(screen.getByRole('img', {name: 'Running'}));
+    await user.hover(screen.getByRole('img', {name: 'Listening'}));
 
-    expect(await screen.findByRole('tooltip')).toHaveTextContent('Running');
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Listening');
   });
 
   test('does not show the listener icon before the listener is armed or after it resolves', () => {
@@ -277,6 +284,12 @@ describe('JobNode status indicator', () => {
     const node = makeNode({
       name: 'deploy',
       status: 'running',
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'running',
+          steps: [workflowStepDto({status: 'running'})],
+        }),
+      ],
     });
 
     renderNode(node);
@@ -286,7 +299,15 @@ describe('JobNode status indicator', () => {
     expect(await screen.findByRole('tooltip')).toHaveTextContent('Running');
   });
 
-  test('shows a running execution as running while the job is still pending', () => {
+  test('uses the job key when the static name is missing', () => {
+    const node = makeNode({key: 'deploy-prod', name: null, status: 'succeeded'});
+
+    renderNode(node);
+
+    expect(screen.getByRole('button', {name: 'deploy-prod, Succeeded'})).toBeInTheDocument();
+  });
+
+  test('shows a running lifecycle without a running step as pending', () => {
     const node = makeNode({
       name: 'deploy',
       status: 'pending',
@@ -295,6 +316,23 @@ describe('JobNode status indicator', () => {
 
     renderNode(node);
 
+    expect(screen.getByRole('button', {name: 'deploy, Pending'})).toBeInTheDocument();
+  });
+
+  test('shows a pending lifecycle as running while a step is active', () => {
+    const node = makeNode({
+      name: 'deploy',
+      status: 'pending',
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'pending',
+          steps: [workflowStepDto({status: 'running'})],
+        }),
+      ],
+    });
+
+    renderNode(node);
+
     expect(screen.getByRole('button', {name: 'deploy, Running'})).toBeInTheDocument();
   });
 });
@@ -317,10 +355,17 @@ describe('JobNode execution count indicator', () => {
       name: 'release-gates',
       mode: 'listening',
       status: 'running',
+      listener_status: 'listening',
       job_executions: [
         workflowJobExecutionDto({status: 'pending'}),
-        workflowJobExecutionDto({status: 'running'}),
-        workflowJobExecutionDto({status: 'running'}),
+        workflowJobExecutionDto({
+          status: 'running',
+          steps: [workflowStepDto({status: 'running'})],
+        }),
+        workflowJobExecutionDto({
+          status: 'running',
+          steps: [workflowStepDto({status: 'running'})],
+        }),
         workflowJobExecutionDto({status: 'succeeded'}),
         workflowJobExecutionDto({status: 'succeeded'}),
         workflowJobExecutionDto({status: 'succeeded'}),
@@ -331,7 +376,7 @@ describe('JobNode execution count indicator', () => {
 
     renderNode(node);
 
-    const button = screen.getByRole('button', {name: 'release-gates, Running, 8 executions'});
+    const button = screen.getByRole('button', {name: 'release-gates, Listening, 8 executions'});
     expect(within(button).getByText('8')).toBeInTheDocument();
     expect(within(button).queryByText('8 exec')).not.toBeInTheDocument();
     expect(button.querySelector('[data-execution-status-segment]')).not.toBeInTheDocument();

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

@@ -9,7 +9,14 @@ import {cn} from '@shipfox/react-ui/utils';
 import type {KeyboardEventHandler, Ref} from 'react';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
-import type {JobExecution, JobExecutionStatus, WorkflowRunDetail} from '#core/workflow-run.js';
+import {
+  defaultJobExecution,
+  deriveJobDisplayStatus,
+  deriveJobExecutionDisplayStatus,
+  type JobExecution,
+  type JobExecutionStatus,
+  type WorkflowRunDetail,
+} from '#core/workflow-run.js';
 import type {JobGraphNode} from './graph-model.js';
 import {formatJobDurationAccessibleLabel} from './job-duration-format.js';
 import {JobDurationLabel} from './job-duration-label.js';
@@ -69,16 +76,16 @@ export function JobNode({
   ref?: Ref<HTMLButtonElement>;
 }) {
   useTimeTick();
-  const status =
-    node.status === 'pending' &&
-    node.jobExecutions.some((jobExecution) => jobExecution.status === 'running')
-      ? 'running'
-      : node.status;
+  const status = deriveJobDisplayStatus(node);
+  const execution = defaultJobExecution(node);
   const visual = getWorkflowStatusVisual(status);
   const accessibleLabel = [
     node.displayName,
     visual.label,
-    formatJobDurationAccessibleLabel(node.displayDuration),
+    formatJobDurationAccessibleLabel(
+      node.displayDuration,
+      execution ? deriveJobExecutionDisplayStatus(execution) : undefined,
+    ),
     node.executionCountVisible
       ? executionCountAccessibleLabel(node.jobExecutions.length)
       : undefined,
@@ -111,7 +118,7 @@ export function JobNode({
         />
       ) : null}
       <div className="flex min-w-0 flex-1 items-center gap-8">
-        <WorkflowStatusIcon status={status} jobMode={node.mode} size={14} />
+        <WorkflowStatusIcon status={status} size={14} />
         <JobLabel label={node.displayName} />
       </div>
       <JobDurationLabel duration={node.displayDuration} />
@@ -199,7 +206,7 @@ const EXECUTION_STATUSES = [
 function executionStatusCounts(executions: JobExecution[]) {
   return executions.reduce(
     (counts, execution) => {
-      counts[execution.status] += 1;
+      counts[deriveJobExecutionDisplayStatus(execution)] += 1;
       return counts;
     },
     {pending: 0, running: 0, succeeded: 0, failed: 0, cancelled: 0},

package/src/components/step-list/step-list.stories.tsx

@@ -21,7 +21,6 @@ import {
 import {AgentConfigFailureCallout as AgentConfigFailureCalloutView} from '../workflow-run-view/agent-config-failure-callout.js';
 import {StepList} from './step-list.js';
 
-const WORKSPACE_ID = '44444444-4444-4444-8444-444444444444';
 const AGENTS_LINK_NAME = 'Configure Agents';
 
 const meta = {
@@ -70,7 +69,7 @@ const withAgentSettingsRoute: Decorator = (Story) => {
   });
   const agentSettingsRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid/settings/agents',
+    path: '/w/$workspaceSlug/settings/agents',
     component: () => null,
   });
   const router = createRouter({
@@ -390,7 +389,7 @@ function renderAgentConfigFailureCallout() {
       defaultSelectedAttemptId={attempt.id}
       renderExpandedStep={() => (
         <AgentConfigFailureCalloutView
-          workspaceId={WORKSPACE_ID}
+          workspaceSlug="acme"
           config={{provider: 'anthropic', model: 'claude-opus-4-8', thinking: 'high'}}
           error={{
             message: 'Model provider credentials are not configured',

package/src/components/step-list/step-list.tsx

@@ -18,6 +18,7 @@ import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-ic
 import {
   isWorkflowStatus,
   type Job,
+  type JobDisplayStatus,
   type JobExecution,
   type Step,
   type StepSourceLocation,
@@ -47,7 +48,7 @@ export interface StepExpandedContext {
 export interface StepListEmptyState {
   title: string;
   description: string;
-  status?: Job['status'] | undefined;
+  status?: JobDisplayStatus | undefined;
 }
 
 export interface StepListProps {
@@ -267,7 +268,7 @@ function StepListEmptyStateView({
   );
 }
 
-function StepListEmptyStateIcon({status}: {status: Job['status']}) {
+function StepListEmptyStateIcon({status}: {status: JobDisplayStatus}) {
   if (status !== 'running') {
     return (
       <div className="flex size-32 items-center justify-center rounded-6 border border-border-neutral-strong bg-background-neutral-base p-8">