@shipfox/client-workflows 12.0.2 → 13.0.0

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

@@ -15,7 +15,7 @@ import {
   workflowStepAttemptDto,
   workflowStepDto,
 } from '#test/fixtures/workflow-run.js';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {jsonResponse, PROJECT_TEST_WSLUG, renderProjectPage} from '#test/pages.js';
 import {WorkflowRunView} from './workflow-run-view.js';
 
 const RUN_ID = '66666666-6666-4666-8666-666666666666';
@@ -29,6 +29,9 @@ const RERUN_BUTTON_NAME = /^Re-run/;
 const ATTEMPT_2_PATTERN = /Attempt 2/;
 const COPY_RUN_BUTTON_NAME = /Copy run/;
 const EXECUTION_ONE_MENU_ITEM_PATTERN = /#1/;
+const LISTENING_EXECUTION_SWITCHER_NAME =
+  'Switch job execution, currently execution 2: Deployment status event';
+const JOB_TEMPLATE_NAME = ['Implement $', '{{ event.issue.identifier }}'].join('');
 
 describe('WorkflowRunView', () => {
   test('renders the run summary, jobs graph, and selected job step attempts when a run loads', async () => {
@@ -55,6 +58,37 @@ describe('WorkflowRunView', () => {
     ).toBeInTheDocument();
   });
 
+  test('uses the selected job execution name as the job card title', async () => {
+    configureApiClient({
+      fetchImpl: vi.fn(() =>
+        Promise.resolve(
+          jsonResponse(
+            workflowRunViewDetailDto({
+              jobs: [
+                workflowJobDto({
+                  id: BUILD_JOB_ID,
+                  run_attempt_id: RUN_ID,
+                  name: JOB_TEMPLATE_NAME,
+                  job_executions: [
+                    workflowJobExecutionDto({
+                      job_id: BUILD_JOB_ID,
+                      name: 'Implement ENG-123',
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ),
+        ),
+      ),
+    });
+
+    renderView();
+
+    expect(await screen.findByRole('region', {name: 'Implement ENG-123'})).toBeInTheDocument();
+    expect(screen.queryByRole('region', {name: JOB_TEMPLATE_NAME})).not.toBeInTheDocument();
+  });
+
   test('renders active step attempt logs inline when the selected job is running', async () => {
     const stepId = '99999999-9999-4999-8999-000000000001';
     const fetchImpl = vi.fn((input: RequestInfo | URL) => {
@@ -125,6 +159,7 @@ describe('WorkflowRunView', () => {
                       id: '77777777-7777-4777-8777-000000000001',
                       job_id: BUILD_JOB_ID,
                       sequence: 1,
+                      name: 'Pull request event',
                       status: 'succeeded',
                       trigger_events: [
                         {
@@ -132,6 +167,10 @@ describe('WorkflowRunView', () => {
                           event: 'pull_request',
                           delivery_id: 'delivery-1',
                           received_at: '2026-05-07T01:00:00.000Z',
+                          project: null,
+                          repository: null,
+                          ref: null,
+                          commit: null,
                           data: {number: 12},
                         },
                       ],
@@ -155,6 +194,7 @@ describe('WorkflowRunView', () => {
                       id: '77777777-7777-4777-8777-000000000002',
                       job_id: BUILD_JOB_ID,
                       sequence: 2,
+                      name: 'Deployment status event',
                       status: 'failed',
                       status_reason: 'step_failed',
                       trigger_events: [
@@ -163,6 +203,10 @@ describe('WorkflowRunView', () => {
                           event: 'deployment_status',
                           delivery_id: 'delivery-2',
                           received_at: '2026-05-07T01:01:00.000Z',
+                          project: null,
+                          repository: null,
+                          ref: null,
+                          commit: null,
                           data: {state: 'success'},
                         },
                         {
@@ -170,6 +214,10 @@ describe('WorkflowRunView', () => {
                           event: 'check_run',
                           delivery_id: 'delivery-3',
                           received_at: '2026-05-07T01:01:10.000Z',
+                          project: null,
+                          repository: null,
+                          ref: null,
+                          commit: null,
                           data: {status: 'completed'},
                         },
                       ],
@@ -200,18 +248,20 @@ describe('WorkflowRunView', () => {
     });
 
     renderView();
+    expect(
+      await screen.findByRole('region', {name: 'Deployment status event'}),
+    ).toBeInTheDocument();
     expect(await screen.findByText('second-event')).toBeInTheDocument();
     expect(
       await screen.findByRole('button', {name: 'github · deployment_status (2 events)'}),
     ).toBeInTheDocument();
     expect(screen.getByText('deployment_status (2)')).toBeInTheDocument();
 
-    await user.click(
-      screen.getByRole('button', {name: 'Switch job execution, currently execution 2'}),
-    );
+    await user.click(screen.getByRole('button', {name: LISTENING_EXECUTION_SWITCHER_NAME}));
     await user.click(screen.getByRole('menuitem', {name: EXECUTION_ONE_MENU_ITEM_PATTERN}));
 
     expect(await screen.findByText('first-event')).toBeInTheDocument();
+    expect(screen.getByRole('region', {name: 'Pull request event'})).toBeInTheDocument();
     expect(screen.queryByText('second-event')).not.toBeInTheDocument();
     expect(await screen.findByRole('button', {name: 'github · pull_request'})).toBeInTheDocument();
     expect(screen.getByText('pull_request')).toBeInTheDocument();
@@ -301,7 +351,7 @@ describe('WorkflowRunView', () => {
     ).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Configure Agents'})).toHaveAttribute(
       'href',
-      `/workspaces/${PROJECT_TEST_WID}/settings/agents`,
+      `/w/${PROJECT_TEST_WSLUG}/settings/agents`,
     );
   });
 
@@ -378,7 +428,7 @@ describe('WorkflowRunView', () => {
     expect(screen.getByText('Configure credentials for anthropic')).toBeInTheDocument();
     expect(screen.getByRole('link', {name: 'Configure Agents'})).toHaveAttribute(
       'href',
-      `/workspaces/${PROJECT_TEST_WID}/settings/agents`,
+      `/w/${PROJECT_TEST_WSLUG}/settings/agents`,
     );
   });
 
@@ -413,7 +463,7 @@ describe('WorkflowRunView', () => {
     expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
   });
 
-  test('uses the selected execution status for zero-step execution states', async () => {
+  test('keeps a terminal job status over inconsistent zero-step execution activity', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() =>
         Promise.resolve(
@@ -445,11 +495,9 @@ describe('WorkflowRunView', () => {
 
     renderView();
 
-    expect(await screen.findByText('Waiting for the first step')).toBeInTheDocument();
-    expect(
-      screen.getByText('This job is running, but no steps have started yet.'),
-    ).toBeInTheDocument();
-    expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
+    expect(await screen.findByText('No steps recorded')).toBeInTheDocument();
+    expect(screen.getByText('Execution #2 finished without recorded steps.')).toBeInTheDocument();
+    expect(screen.queryByText('Waiting for the first step')).not.toBeInTheDocument();
   });
 
   test('renders pending zero-step jobs as waiting to start', async () => {
@@ -480,7 +528,7 @@ describe('WorkflowRunView', () => {
     expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
   });
 
-  test('renders running zero-step jobs as waiting for the first step', async () => {
+  test('renders claimed idle jobs as runner preparation', async () => {
     configureApiClient({
       fetchImpl: vi.fn(() =>
         Promise.resolve(
@@ -509,10 +557,13 @@ describe('WorkflowRunView', () => {
 
     renderView();
 
-    expect(await screen.findByText('Waiting for the first step')).toBeInTheDocument();
+    expect(await screen.findByText('Runner preparing job')).toBeInTheDocument();
     expect(
-      screen.getByText('This job is running, but no steps have started yet.'),
+      screen.getByText('A runner is assigned. Steps will appear here when work begins.'),
     ).toBeInTheDocument();
+    expect(
+      screen.queryByText('This job is running, but no steps have started yet.'),
+    ).not.toBeInTheDocument();
     expect(screen.queryByText('No steps recorded')).not.toBeInTheDocument();
   });
 
@@ -898,7 +949,7 @@ describe('WorkflowRunView', () => {
     expect(successSpy).toHaveBeenCalledWith('Re-run started');
     await waitFor(() =>
       expect(router.state.location.pathname).toBe(
-        `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${rerunId}`,
+        `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${rerunId}`,
       ),
     );
     expect((router.state.location.search as Record<string, unknown>).runAttempt).toBeUndefined();
@@ -1008,11 +1059,12 @@ describe('WorkflowRunView', () => {
     configureApiClient({fetchImpl: fetchImpl as typeof fetch});
 
     const {router} = renderProjectPage(
-      `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${RUN_ID}?job=${BUILD_JOB_ID}&step=${CHECKOUT_STEP_ID}&stepAttempt=${CHECKOUT_ATTEMPT_ID}`,
+      `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}?job=${BUILD_JOB_ID}&step=${CHECKOUT_STEP_ID}&stepAttempt=${CHECKOUT_ATTEMPT_ID}`,
       () => (
         <WorkflowRunView
-          workspaceId={PROJECT_TEST_WID}
           projectId={PROJECT_ID}
+          workspaceSlug={PROJECT_TEST_WSLUG}
+          projectSlug="project"
           workflowRunId={RUN_ID}
         />
       ),
@@ -1023,7 +1075,7 @@ describe('WorkflowRunView', () => {
 
     await waitFor(() =>
       expect(router.state.location.pathname).toBe(
-        `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${RUN_ID}`,
+        `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}`,
       ),
     );
     expect(router.state.location.search).toEqual({runAttempt: 2});
@@ -1086,17 +1138,15 @@ describe('WorkflowRunView', () => {
 });
 
 function renderView(props: Partial<Parameters<typeof WorkflowRunView>[0]> = {}, search = '') {
-  return renderProjectPage(
-    `/workspaces/${PROJECT_TEST_WID}/projects/x/runs/${RUN_ID}${search}`,
-    () => (
-      <WorkflowRunView
-        workspaceId={PROJECT_TEST_WID}
-        projectId={PROJECT_ID}
-        workflowRunId={RUN_ID}
-        {...props}
-      />
-    ),
-  );
+  return renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}${search}`, () => (
+    <WorkflowRunView
+      projectId={PROJECT_ID}
+      workspaceSlug={PROJECT_TEST_WSLUG}
+      projectSlug="project"
+      workflowRunId={RUN_ID}
+      {...props}
+    />
+  ));
 }
 
 function requestUrl(input: RequestInfo | URL): URL {
@@ -1207,6 +1257,14 @@ function workflowRunViewDetailDto(
         status: 'running',
         position: 1,
         dependencies: ['build'],
+        job_executions: [
+          workflowJobExecutionDto({
+            job_id: DEPLOY_JOB_ID,
+            name: 'deploy',
+            status: 'running',
+            steps: [workflowStepDto({status: 'running'})],
+          }),
+        ],
       }),
     ],
     ...overrides,

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

@@ -36,8 +36,9 @@ interface WorkflowSourceFocus {
 }
 
 export interface WorkflowRunViewProps {
-  workspaceId: string;
   projectId: string;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
   workflowRunId?: string | undefined;
   selection?: WorkflowRunSelectionInput | undefined;
   onSelectionChange?: ((selection: WorkflowRunSelectionInput) => void) | undefined;
@@ -49,8 +50,9 @@ export interface WorkflowRunViewProps {
  * loading state itself.
  */
 export function WorkflowRunView({
-  workspaceId,
   projectId,
+  workspaceSlug,
+  projectSlug,
   workflowRunId,
   selection,
   onSelectionChange,
@@ -62,8 +64,8 @@ export function WorkflowRunView({
     <RelativeTimeProvider>
       <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden">
         <RunViewContent
-          workspaceId={workspaceId}
-          projectId={projectId}
+          workspaceSlug={workspaceSlug}
+          projectSlug={projectSlug}
           query={runQuery}
           rerunMutation={rerunMutation}
           selection={selection}
@@ -75,15 +77,15 @@ export function WorkflowRunView({
 }
 
 function RunViewContent({
-  workspaceId,
-  projectId,
+  workspaceSlug,
+  projectSlug,
   query,
   rerunMutation,
   selection,
   onSelectionChange,
 }: {
-  workspaceId: string;
-  projectId: string;
+  workspaceSlug: string | undefined;
+  projectSlug: string | undefined;
   query: ReturnType<typeof useWorkflowRunAttemptQuery>;
   rerunMutation: ReturnType<typeof useRerunWorkflowRunMutation>;
   selection: WorkflowRunSelectionInput | undefined;
@@ -161,12 +163,20 @@ function RunViewContent({
     sourceFocus?.location ?? resolvedSelection?.step?.sourceLocation ?? null;
   const sourceSnapshot = runData.sourceSnapshot;
   async function rerun(mode: WorkflowRunRerunMode) {
+    if (!workspaceSlug || !projectSlug) {
+      toast.error('Could not start re-run from this route.');
+      return;
+    }
     try {
       const run = await rerunMutation.mutateAsync({workflowRunId: runData.id, mode});
       toast.success('Re-run started');
       await navigate({
-        to: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
-        params: {wid: workspaceId, pid: projectId, workflowRunId: run.id},
+        to: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+        params: {
+          workspaceSlug,
+          projectSlug,
+          workflowRunId: run.id,
+        },
         search: ((previous: Record<string, unknown>) =>
           withoutWorkflowRunSelectionSearch(previous)) as never,
       });
@@ -274,8 +284,8 @@ function RunViewContent({
     <>
       <div className="flex min-w-0 flex-1 flex-col">
         <WorkflowRunSummary
-          workspaceId={workspaceId}
-          projectId={projectId}
+          workspaceSlug={workspaceSlug}
+          projectSlug={projectSlug}
           run={runData}
           sourceAvailable={sourceAvailable}
           sourceOpen={sourcePanelOpen && sourceFocus === null}
@@ -290,7 +300,7 @@ function RunViewContent({
         />
         {query.isError ? <WorkflowRunStaleError query={query} /> : null}
         <div className="min-h-0 flex-1 overflow-auto bg-background-neutral-base p-16">
-          <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-16">
+          <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-16">
             <JobGraph
               run={runData}
               selectedJobId={selectedJob?.id}
@@ -298,7 +308,7 @@ function RunViewContent({
             />
             {selectedJob ? (
               <JobCard
-                workspaceId={workspaceId}
+                workspaceSlug={workspaceSlug}
                 job={selectedJob}
                 selectedJobExecution={selectedJobExecution}
                 selectedAttemptId={selectedJob.carriedOver ? undefined : selectedAttemptId}

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

@@ -35,4 +35,13 @@ describe('getWorkflowStatusVisual', () => {
 
     expect(visual).toEqual({kind: 'running', label: 'Running', dot: 'info', badge: 'info'});
   });
+
+  test('returns the active listener visual', () => {
+    expect(getWorkflowStatusVisual('listening')).toEqual({
+      kind: 'listening',
+      label: 'Listening',
+      dot: 'info',
+      badge: 'info',
+    });
+  });
 });

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

@@ -1,11 +1,11 @@
 import type {BadgeVariant} from '@shipfox/react-ui/badge';
 import type {DotVariant} from '@shipfox/react-ui/dot';
-import type {WorkflowStatus} from '#core/workflow-run.js';
+import type {WorkflowDisplayStatus} from '#core/workflow-run.js';
 
-export type {WorkflowStatus};
+export type {WorkflowDisplayStatus};
 
 export interface WorkflowStatusVisual {
-  kind: WorkflowStatus;
+  kind: WorkflowDisplayStatus;
   label: string;
   dot: DotVariant;
   badge: BadgeVariant;
@@ -15,12 +15,14 @@ export interface WorkflowStatusVisual {
 // WorkflowStatusIcon (which renders the glyph per kind). The exhaustive switch turns any new
 // status the API grows into (DESIGN.md section 9) into a compile error; reserve the `warning`
 // tone for the queued/awaiting-* states when they land.
-export function getWorkflowStatusVisual(status: WorkflowStatus): WorkflowStatusVisual {
+export function getWorkflowStatusVisual(status: WorkflowDisplayStatus): WorkflowStatusVisual {
   switch (status) {
     case 'pending':
       return {kind: 'pending', label: 'Pending', dot: 'neutral', badge: 'neutral'};
     case 'running':
       return {kind: 'running', label: 'Running', dot: 'info', badge: 'info'};
+    case 'listening':
+      return {kind: 'listening', label: 'Listening', dot: 'info', badge: 'info'};
     case 'succeeded':
       return {kind: 'succeeded', label: 'Succeeded', dot: 'success', badge: 'success'};
     case 'failed':

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

@@ -1,10 +1,18 @@
 import {Code, Text} from '@shipfox/react-ui/typography';
 import type {Meta, StoryObj} from '@storybook/react';
-import type {JobStatus} from '#core/workflow-run.js';
+import type {WorkflowDisplayStatus} from '#core/workflow-run.js';
 import {getWorkflowStatusVisual} from './status-visuals.js';
 import {WorkflowStatusIcon} from './workflow-status-icon.js';
 
-const statuses: JobStatus[] = ['pending', 'running', 'succeeded', 'failed', 'cancelled', 'skipped'];
+const statuses: WorkflowDisplayStatus[] = [
+  'pending',
+  'running',
+  'listening',
+  'succeeded',
+  'failed',
+  'cancelled',
+  'skipped',
+];
 
 const meta = {
   title: 'Workflows/StatusIcon',

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

@@ -0,0 +1,18 @@
+import {render, screen} from '@testing-library/react';
+import {WorkflowStatusIcon} from './workflow-status-icon.js';
+
+describe('WorkflowStatusIcon', () => {
+  test('keeps a running status as a dot', () => {
+    const {container} = render(<WorkflowStatusIcon status="running" tooltip={false} />);
+
+    expect(screen.getByRole('img', {name: 'Running'})).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeNull();
+  });
+
+  test('uses the pulse glyph for the listening status', () => {
+    const {container} = render(<WorkflowStatusIcon status="listening" tooltip={false} />);
+
+    expect(screen.getByRole('img', {name: 'Listening'})).toBeInTheDocument();
+    expect(container.querySelector('svg')).not.toBeNull();
+  });
+});

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

@@ -3,7 +3,7 @@ import {Icon, type IconName} from '@shipfox/react-ui/icon';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {cn} from '@shipfox/react-ui/utils';
 import type {ReactNode} from 'react';
-import {getWorkflowStatusVisual, type WorkflowStatus} from './status-visuals.js';
+import {getWorkflowStatusVisual, type WorkflowDisplayStatus} from './status-visuals.js';
 
 // Status glyphs use the same saturated accent tokens as IconBadge/StatusBadge.
 const toneByVariant: Record<DotVariant, string> = {
@@ -17,7 +17,7 @@ const toneByVariant: Record<DotVariant, string> = {
 
 // Terminal states are self-contained solid discs; the shape names the state. Running and
 // pending render their own shapes (the live Dot and a bold ring), so they aren't here.
-const glyphByKind: Partial<Record<WorkflowStatus, IconName>> = {
+const glyphByKind: Partial<Record<WorkflowDisplayStatus, IconName>> = {
   succeeded: 'checkCircleSolid',
   failed: 'xCircleSolid',
   cancelled: 'forbid2Fill',
@@ -45,8 +45,7 @@ const dotSizeClass: Record<number, string> = {
 const PENDING_RING_MASK = 'radial-gradient(circle closest-side, transparent 0 52%, #000 56%)';
 
 export interface WorkflowStatusIconProps {
-  status: WorkflowStatus;
-  jobMode?: 'one_shot' | 'listening';
+  status: WorkflowDisplayStatus;
   /** Optical diameter in px: 14 in the DAG node and run row. */
   size?: number;
   /** Pulsing halo for the running state. */
@@ -66,7 +65,6 @@ export interface WorkflowStatusIconProps {
  */
 export function WorkflowStatusIcon({
   status,
-  jobMode = 'one_shot',
   size = 14,
   ripple = true,
   tooltip = true,
@@ -76,25 +74,20 @@ export function WorkflowStatusIcon({
   const box = dotSizeClass[size] ?? 'size-14';
 
   let glyph: ReactNode;
-  if (visual.kind === 'running') {
-    glyph =
-      jobMode === 'listening' ? (
-        <span
-          className={cn(
-            'inline-flex shrink-0 items-center justify-center rounded-full bg-current',
-            box,
-            toneByVariant.info,
-          )}
-        >
-          <Icon
-            name="pulseLine"
-            size={Math.max(8, Math.round(size * 0.7))}
-            className="text-white"
-          />
-        </span>
-      ) : (
-        <Dot variant="info" ripple={ripple} className={box} />
-      );
+  if (visual.kind === 'listening') {
+    glyph = (
+      <span
+        className={cn(
+          'inline-flex shrink-0 items-center justify-center rounded-full bg-current',
+          box,
+          toneByVariant.info,
+        )}
+      >
+        <Icon name="pulseLine" 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') {
     glyph = (
       <span

package/src/core/entities/job-execution.ts

@@ -2,11 +2,16 @@ import {type Duration, intervalToDuration} from 'date-fns';
 import type {Step} from './step.js';
 
 export type JobExecutionStatus = 'pending' | 'running' | 'succeeded' | 'failed' | 'cancelled';
+export type JobExecutionDisplayStatus = JobExecutionStatus;
 export interface WorkflowExecutionEvent {
   source: string;
   event: string;
   deliveryId: string;
   receivedAt: string;
+  project: {id: string} | null;
+  repository: string | null;
+  ref: string | null;
+  commit: string | null;
   data: unknown;
 }
 export type JobExecutionTime =
@@ -53,6 +58,10 @@ export class JobExecution {
     Object.assign(this, fields);
   }
 
+  get displayName(): string {
+    return this.name;
+  }
+
   get queueTime(): JobExecutionTime | null {
     return jobExecutionQueueTimeFromTimestamps(this);
   }
@@ -66,6 +75,19 @@ export class JobExecution {
   }
 }
 
+export function deriveJobExecutionDisplayStatus({
+  status,
+  steps,
+}: Pick<JobExecution, 'status' | 'steps'>): JobExecutionDisplayStatus {
+  if (isTerminalJobExecutionStatus(status)) return status;
+  if (steps.some((step) => step.status === 'running')) return 'running';
+  return 'pending';
+}
+
+export function isTerminalJobExecutionStatus(status: JobExecutionStatus): boolean {
+  return status === 'succeeded' || status === 'failed' || status === 'cancelled';
+}
+
 export function jobExecutionQueueTimeFromTimestamps({
   queuedAt,
   startedAt,