@shipfox/client-workflows 12.0.2 → 14.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "12.0.2",
+  "version": "14.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-definitions-dto": "12.0.0",
+    "@shipfox/api-workflows-dto": "12.1.0",
+    "@shipfox/client-logs": "14.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-projects": "14.0.0",
+    "@shipfox/client-shell": "14.0.0",
+    "@shipfox/client-triggers": "14.0.0",
+    "@shipfox/client-ui": "14.0.0",
+    "@shipfox/react-ui": "0.5.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-duration-label.tsx

@@ -22,7 +22,11 @@ function LiveDurationText({fromIso}: {fromIso: string}) {
 function DurationText({children}: {children: string}) {
   // The status icon names the state; the node aria-label carries the verb.
   return (
-    <Code as="span" variant="label" className="shrink-0 tabular-nums text-foreground-neutral-muted">
+    <Code
+      as="span"
+      variant="label"
+      className="shrink-0 tabular-nums text-foreground-neutral-subtle"
+    >
       {children}
     </Code>
   );

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

@@ -7,6 +7,7 @@ import type {WorkflowRunDetail} from '#core/workflow-run.js';
 import type {JobGraphModel, JobGraphNavigationKey} from './graph-model.js';
 import {nextJobGraphNodeId} from './graph-model.js';
 import {JobNode, TriggerNode} from './job-node.js';
+import type {JobGraphSelectionSource} from './types.js';
 
 const NODE_WIDTH = 208;
 const NODE_HEIGHT = 48;
@@ -27,7 +28,7 @@ export function JobGraphContent({
     'triggerDisplayLabel' | 'triggerLabel' | 'triggerProvider' | 'triggerSource'
   >;
   selectedJobId?: string | undefined;
-  onSelectJob: (jobId: string | undefined) => void;
+  onSelectJob: (jobId: string | undefined, source?: JobGraphSelectionSource) => void;
 }) {
   const nodeRefs = useRef(new Map<string, HTMLButtonElement>());
   const [hoveredJobId, setHoveredJobId] = useState<string | undefined>();
@@ -74,13 +75,13 @@ export function JobGraphContent({
     if (!nextNodeId) return;
 
     event.preventDefault();
-    onSelectJob(nextNodeId);
+    onSelectJob(nextNodeId, 'keyboard');
     nodeRefs.current.get(nextNodeId)?.focus();
   }
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <div className="min-h-0 overflow-auto bg-background-neutral-base">
+      <div className="min-h-0 overflow-auto bg-background-neutral-background">
         <div className="relative" style={{width: contentWidth, minHeight: contentHeight}}>
           <GraphEdges model={model} hoveredJobId={hoveredJobId} />
           <div
@@ -101,7 +102,9 @@ export function JobGraphContent({
                   node={node}
                   selected={node.id === selectedJobId}
                   ref={setNodeRef(node.id)}
-                  onSelect={() => onSelectJob(node.id === selectedJobId ? undefined : node.id)}
+                  onSelect={() =>
+                    onSelectJob(node.id === selectedJobId ? undefined : node.id, 'pointer')
+                  }
                   onKeyDown={handleKeyDown}
                   onHoverStart={() => setHoveredJobId(node.id)}
                   onHoverEnd={() =>

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-view.tsx

@@ -3,6 +3,7 @@ import {useState} from 'react';
 import type {WorkflowRunDetail} from '#core/workflow-run.js';
 import type {JobGraphModel} from './graph-model.js';
 import {JobGraphContent} from './job-graph-content.js';
+import type {JobGraphSelectionSource} from './types.js';
 
 export function JobGraphView({
   model,
@@ -19,7 +20,9 @@ export function JobGraphView({
   >;
   selectedJobId?: string | undefined;
   defaultSelectedJobId?: string | undefined;
-  onSelectedJobChange?: ((jobId: string | undefined) => void) | undefined;
+  onSelectedJobChange?:
+    | ((jobId: string | undefined, source?: JobGraphSelectionSource) => void)
+    | undefined;
   className?: string | undefined;
 }) {
   const [localSelectedJobId, setLocalSelectedJobId] = useState<string | undefined>(
@@ -27,9 +30,9 @@ export function JobGraphView({
   );
   const selected = selectedJobId ?? localSelectedJobId;
 
-  function selectJob(jobId: string | undefined) {
+  function selectJob(jobId: string | undefined, source?: JobGraphSelectionSource) {
     setLocalSelectedJobId(jobId);
-    onSelectedJobChange?.(jobId);
+    onSelectedJobChange?.(jobId, source);
   }
 
   return (

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 = {
@@ -11,7 +11,7 @@ const meta = {
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="h-520 w-900 overflow-auto bg-background-neutral-base p-16">
+      <div className="h-520 w-900 overflow-auto bg-background-neutral-background p-16">
         <Story />
       </div>
     ),
@@ -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';
 
@@ -16,7 +20,7 @@ const meta = {
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="bg-background-neutral-base p-16">
+      <div className="bg-background-neutral-background p-16">
         <Story />
       </div>
     ),
@@ -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) {
@@ -45,11 +52,14 @@ function makeNode(overrides: NodeOverrides): JobGraphNode {
   });
 }
 
-function renderNode(node: JobGraphNode, {live = false}: {live?: boolean} = {}) {
+function renderNode(
+  node: JobGraphNode,
+  {live = false, selected = false}: {live?: boolean; selected?: boolean} = {},
+) {
   const element = (
     <JobNode
       node={node}
-      selected={false}
+      selected={selected}
       onSelect={() => undefined}
       onKeyDown={() => undefined}
       onHoverStart={() => undefined}
@@ -84,6 +94,28 @@ function setVisibility(state: 'visible' | 'hidden') {
   Object.defineProperty(document, 'visibilityState', {configurable: true, value: state});
 }
 
+describe('JobNode interaction', () => {
+  test('presents the selectable node as an elevated interactive surface', () => {
+    renderNode(makeNode({name: 'build', status: 'pending'}));
+
+    expect(screen.getByRole('button', {name: 'build, Pending'})).toHaveClass(
+      'cursor-pointer',
+      'bg-background-neutral-base',
+      'shadow-button-neutral',
+      'hover:bg-background-components-hover',
+    );
+  });
+
+  test('uses a quiet neutral surface for the selected node', () => {
+    renderNode(makeNode({name: 'build', status: 'pending'}), {selected: true});
+
+    expect(screen.getByRole('button', {name: 'build, Pending'})).toHaveClass(
+      'bg-background-components-hover',
+      'hover:bg-background-components-pressed',
+    );
+  });
+});
+
 describe('JobNode duration', () => {
   beforeEach(() => {
     setMatchMedia(false);
@@ -200,7 +232,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 +259,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 +309,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 +324,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 +341,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 +380,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 +401,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';
@@ -33,14 +40,14 @@ export function TriggerNode({
         <button
           type="button"
           aria-label={label}
-          className="flex items-center justify-center rounded-full border border-border-neutral-base bg-background-components-base transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none"
+          className="flex cursor-help items-center justify-center rounded-full bg-background-neutral-base shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
           style={{width: TRIGGER_SIZE, height: TRIGGER_SIZE}}
         >
           <TriggerSourceIcon
             provider={trigger.triggerProvider}
             source={trigger.triggerSource}
             aria-hidden
-            className="size-14 shrink-0 text-foreground-neutral-muted"
+            className="size-14 shrink-0 text-foreground-neutral-subtle"
           />
         </button>
       </TooltipTrigger>
@@ -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,
@@ -99,19 +106,19 @@ export function JobNode({
       onPointerEnter={onHoverStart}
       onPointerLeave={onHoverEnd}
       className={cn(
-        'group relative flex h-48 w-208 items-center gap-8 rounded-8 border border-border-neutral-base bg-background-components-base px-10 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none',
-        selected && 'bg-background-components-hover',
+        'group relative flex h-48 w-208 cursor-pointer items-center gap-8 rounded-8 bg-background-neutral-base px-10 text-left shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none',
+        selected && 'bg-background-components-hover hover:bg-background-components-pressed',
         node.carriedOver && 'opacity-[0.55]',
       )}
     >
       {selected ? (
         <span
           aria-hidden="true"
-          className="absolute inset-y-6 left-0 w-3 rounded-full bg-border-highlights-interactive"
+          className="absolute inset-y-6 left-0 w-px rounded-full bg-border-highlights-interactive"
         />
       ) : 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} />
@@ -129,7 +136,7 @@ function ExecutionCountText({executions}: {executions: JobExecution[]}) {
       <TooltipTrigger asChild>
         <span
           aria-hidden="true"
-          className="inline-flex h-20 min-w-28 shrink-0 items-center justify-end gap-4 text-foreground-neutral-muted"
+          className="inline-flex h-20 min-w-28 shrink-0 items-center justify-end gap-4 text-foreground-neutral-subtle"
         >
           <Icon name="loopRightLine" className="size-12" />
           <Code as="span" variant="label" className="text-current">
@@ -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/job-graph/types.ts

@@ -1,9 +1,13 @@
 import type {WorkflowRunDetail} from '#core/workflow-run.js';
 
+export type JobGraphSelectionSource = 'pointer' | 'keyboard';
+
 export interface JobGraphProps {
   run: WorkflowRunDetail;
   selectedJobId?: string | undefined;
   defaultSelectedJobId?: string | undefined;
-  onSelectedJobChange?: ((jobId: string | undefined) => void) | undefined;
+  onSelectedJobChange?:
+    | ((jobId: string | undefined, source?: JobGraphSelectionSource) => void)
+    | undefined;
   className?: string | undefined;
 }