@shipfox/client-workflows 0.2.0

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

@@ -0,0 +1,182 @@
+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 {JobGraph} from './job-graph.js';
+
+const meta = {
+  title: 'Workflows/JobGraph',
+  component: JobGraph,
+  parameters: {layout: 'centered'},
+  decorators: [
+    (Story) => (
+      <div className="h-520 w-900 overflow-auto bg-background-neutral-base p-16">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    className: 'h-full',
+  },
+} satisfies Meta<typeof JobGraph>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {run: makeRun({jobs: [makeJob({name: 'build'})]})},
+};
+
+export const LinearTenJobs: Story = {
+  args: {run: makeRun({jobs: linearJobs(10)})},
+};
+
+export const ParallelTenJobs: Story = {
+  args: {
+    run: makeRun({
+      jobs: Array.from({length: 10}, (_, index) =>
+        makeJob({name: `job-${String(index + 1).padStart(2, '0')}`, position: index}),
+      ),
+    }),
+  },
+};
+
+export const BranchAndJoin: Story = {
+  args: {
+    run: makeRun({
+      jobs: [
+        makeJob({name: 'build', position: 0, status: 'succeeded'}),
+        makeJob({name: 'lint', position: 1, dependencies: ['build'], status: 'succeeded'}),
+        makeJob({name: 'test', position: 2, dependencies: ['build'], status: 'running'}),
+        makeJob({name: 'deploy', position: 3, dependencies: ['lint', 'test']}),
+      ],
+    }),
+  },
+};
+
+export const UnevenJoinFromSharedTrigger: Story = {
+  args: {
+    run: unevenJoinRun(),
+  },
+};
+
+export const TwoRunningJobs: Story = {
+  args: {
+    run: makeRun({
+      jobs: [
+        makeJob({name: 'linux', position: 0, status: 'running'}),
+        makeJob({name: 'macos', position: 1, status: 'running'}),
+      ],
+    }),
+  },
+};
+
+export const UpstreamFailureSkipsDownstream: Story = {
+  args: {
+    run: makeRun({
+      jobs: [
+        makeJob({name: 'build', status: 'failed'}),
+        makeJob({
+          name: 'deploy',
+          position: 1,
+          dependencies: ['build'],
+          status: 'skipped',
+          status_reason: 'dependency_not_completed',
+        }),
+      ],
+    }),
+  },
+};
+
+export const Empty: Story = {
+  args: {run: makeRun({jobs: []})},
+};
+
+export const Selected: Story = {
+  args: {
+    run: makeRun({
+      jobs: [
+        makeJob({name: 'build', status: 'succeeded'}),
+        makeJob({name: 'deploy', position: 1, dependencies: ['build'], status: 'running'}),
+      ],
+    }),
+  },
+  play: async ({canvasElement}) => {
+    await within(canvasElement)
+      .getByRole('button', {
+        name: 'deploy, Running',
+      })
+      .click();
+  },
+};
+
+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({
+      name: `job-${String(index + 1).padStart(2, '0')}`,
+      position: index,
+      dependencies: index === 0 ? [] : [`job-${String(index).padStart(2, '0')}`],
+      status: index < count - 1 ? 'succeeded' : 'running',
+    }),
+  );
+}
+
+function unevenJoinRun(): WorkflowRunDetail {
+  const packageJob = makeJob({name: 'package', position: 0, status: 'succeeded'});
+  const securityScan = makeJob({name: 'security-scan', position: 1, status: 'succeeded'});
+  const smokeTests = makeJob({
+    name: 'smoke-tests',
+    position: 2,
+    dependencies: ['package'],
+    status: 'running',
+  });
+  const deploy = makeJob({
+    name: 'deploy',
+    position: 3,
+    dependencies: ['smoke-tests', 'security-scan'],
+  });
+
+  return makeRun({
+    jobs: [packageJob, securityScan, smokeTests, deploy],
+    triggerSource: 'manual',
+    triggerEvent: 'release',
+    triggerDisplayLabel: 'release',
+    triggerLabel: 'manual · release',
+  });
+}
+
+function makeRun(overrides: Partial<WorkflowRunDetail> = {}): WorkflowRunDetail {
+  return {
+    ...workflowRunDetail({
+      name: 'Deploy',
+      status: 'running',
+      trigger_source: 'manual',
+      trigger_event: 'fire',
+      started_at: '2026-06-21T12:00:10.000Z',
+      jobs: [],
+    }),
+    ...overrides,
+  };
+}
+
+function makeJob(overrides: Partial<WorkflowRunJobDetailDto> & {name: string}): Job {
+  return workflowJob(overrides);
+}

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

@@ -0,0 +1,24 @@
+import {useMemo} from 'react';
+import {buildJobGraphModel} from './graph-model.js';
+import {JobGraphView} from './job-graph-view.js';
+import type {JobGraphProps} from './types.js';
+
+export function JobGraph({
+  run,
+  selectedJobId,
+  defaultSelectedJobId,
+  onSelectedJobChange,
+  className,
+}: JobGraphProps) {
+  const model = useMemo(() => buildJobGraphModel({run}), [run]);
+  return (
+    <JobGraphView
+      model={model}
+      trigger={run}
+      selectedJobId={selectedJobId}
+      defaultSelectedJobId={defaultSelectedJobId}
+      onSelectedJobChange={onSelectedJobChange}
+      className={className}
+    />
+  );
+}

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

@@ -0,0 +1,364 @@
+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 type {JobGraphNode} from './graph-model.js';
+import {JobNode} from './job-node.js';
+
+const statuses: JobStatus[] = ['pending', 'running', 'succeeded', 'failed', 'cancelled', 'skipped'];
+const ignoreKeyDown: KeyboardEventHandler<HTMLButtonElement> = () => undefined;
+const statusModes: WorkflowRunJobDetailDto['mode'][] = ['one_shot', 'listening'];
+
+const meta = {
+  title: 'Workflows/JobNode',
+  component: JobNode,
+  parameters: {layout: 'centered'},
+  decorators: [
+    (Story) => (
+      <div className="bg-background-neutral-base p-16">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof JobNode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => (
+    <JobNode
+      node={makeNode({
+        id: 'job-build',
+        label: 'build',
+        status: 'running',
+        position: 0,
+        dependencies: [],
+      })}
+      selected
+      onSelect={() => undefined}
+      onKeyDown={ignoreKeyDown}
+    />
+  ),
+};
+
+export const Statuses: Story = {
+  render: () => (
+    <div className="grid w-440 grid-cols-2 gap-18">
+      {statusModes.map((mode) => (
+        <div key={mode} className="flex flex-col gap-12">
+          <span className="font-code text-xs text-foreground-neutral-muted">{mode}</span>
+          {statuses.map((status, row) => (
+            <JobNode
+              key={`${mode}-${status}`}
+              node={makeNode({
+                id: `job-${mode}-${status}`,
+                label: status,
+                mode,
+                status,
+                listenerStatus:
+                  mode === 'listening' && status === 'running' ? 'listening' : undefined,
+                position: row,
+                dependencies: [],
+              })}
+              selected={false}
+              onSelect={() => undefined}
+              onKeyDown={ignoreKeyDown}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+// Storybook freezes `Date.now()` at 2026-06-26T12:00:00Z (see `.storybook/preview.tsx`),
+// so anchors near that instant render deterministic live durations for Argos.
+const QUEUED_AT = '2026-06-26T11:54:00.000Z'; // queued 6m
+const STARTED_AT = '2026-06-26T11:57:46.000Z'; // running 2m 14s
+const FINISHED_AT = '2026-06-26T12:00:00.000Z'; // started→finished span 2m 14s
+
+const durationNodes = [
+  makeNode({
+    id: 'job-queueing',
+    label: 'queueing',
+    status: 'pending',
+    position: 0,
+    dependencies: [],
+    queuedAt: QUEUED_AT,
+  }),
+  makeNode({
+    id: 'job-running',
+    label: 'running',
+    status: 'running',
+    position: 1,
+    dependencies: [],
+    queuedAt: QUEUED_AT,
+    startedAt: STARTED_AT,
+  }),
+  makeNode({
+    id: 'job-ran',
+    label: 'ran',
+    status: 'succeeded',
+    position: 2,
+    dependencies: [],
+    queuedAt: QUEUED_AT,
+    startedAt: STARTED_AT,
+    finishedAt: FINISHED_AT,
+  }),
+  makeNode({
+    id: 'job-terminal-no-finish',
+    label: 'terminal no finish',
+    status: 'failed',
+    position: 3,
+    dependencies: [],
+    queuedAt: QUEUED_AT,
+    startedAt: STARTED_AT,
+  }),
+  makeNode({
+    id: 'job-skipped',
+    label: 'skipped',
+    status: 'skipped',
+    position: 4,
+    dependencies: [],
+  }),
+  makeNode({
+    id: 'job-cancelled-before-start',
+    label: 'cancelled before start',
+    status: 'cancelled',
+    position: 5,
+    dependencies: [],
+    queuedAt: QUEUED_AT,
+    finishedAt: FINISHED_AT,
+  }),
+];
+
+export const Durations: Story = {
+  render: () => (
+    <div className="grid w-440 grid-cols-1 gap-12">
+      {durationNodes.map((node) => (
+        <JobNode
+          key={node.id}
+          node={node}
+          selected={false}
+          onSelect={() => undefined}
+          onKeyDown={ignoreKeyDown}
+        />
+      ))}
+    </div>
+  ),
+};
+
+export const ListeningProgression: Story = {
+  render: () => (
+    <div className="grid w-440 grid-cols-1 gap-12">
+      <JobNode
+        node={makeNode({
+          id: 'job-completed-dependency',
+          label: 'completed dependency',
+          status: 'succeeded',
+          position: 0,
+          dependencies: [],
+        })}
+        selected={false}
+        onSelect={() => undefined}
+        onKeyDown={ignoreKeyDown}
+      />
+      <JobNode
+        node={makeNode({
+          id: 'job-listening-pending',
+          label: 'pending listener',
+          mode: 'listening',
+          status: 'pending',
+          position: 1,
+          dependencies: ['build'],
+          jobExecutions: [],
+          queuedAt: QUEUED_AT,
+        })}
+        selected={false}
+        onSelect={() => undefined}
+        onKeyDown={ignoreKeyDown}
+      />
+      <JobNode
+        node={makeNode({
+          id: 'job-listening-running',
+          label: 'running, 0 executions',
+          mode: 'listening',
+          status: 'running',
+          listenerStatus: 'listening',
+          position: 2,
+          dependencies: [],
+          jobExecutions: [],
+          queuedAt: QUEUED_AT,
+          startedAt: STARTED_AT,
+        })}
+        selected
+        onSelect={() => undefined}
+        onKeyDown={ignoreKeyDown}
+      />
+      <JobNode
+        node={makeNode({
+          id: 'job-one-running-execution',
+          label: 'running, 1 running execution',
+          mode: 'listening',
+          status: 'running',
+          listenerStatus: 'listening',
+          position: 3,
+          dependencies: [],
+          jobExecutions: makeExecutionsByStatus('job-one-running-execution', ['running']),
+          queuedAt: QUEUED_AT,
+          startedAt: STARTED_AT,
+        })}
+        selected={false}
+        onSelect={() => undefined}
+        onKeyDown={ignoreKeyDown}
+      />
+      <JobNode
+        node={makeNode({
+          id: 'job-mixed-executions',
+          label: 'running, mixed executions',
+          mode: 'listening',
+          status: 'running',
+          listenerStatus: 'listening',
+          position: 4,
+          dependencies: [],
+          jobExecutions: makeExecutionsByStatus('job-mixed-executions', [
+            'running',
+            'running',
+            'succeeded',
+            'succeeded',
+            'succeeded',
+            'failed',
+          ]),
+          queuedAt: QUEUED_AT,
+          startedAt: STARTED_AT,
+        })}
+        selected={false}
+        onSelect={() => undefined}
+        onKeyDown={ignoreKeyDown}
+      />
+      <JobNode
+        node={makeNode({
+          id: 'job-listener-succeeded',
+          label: 'resolved succeeded',
+          mode: 'listening',
+          status: 'succeeded',
+          listenerStatus: 'resolved',
+          position: 5,
+          dependencies: [],
+          jobExecutions: makeExecutionsByStatus('job-listener-succeeded', [
+            'succeeded',
+            'succeeded',
+            'succeeded',
+            'succeeded',
+          ]),
+          queuedAt: QUEUED_AT,
+          startedAt: STARTED_AT,
+          finishedAt: FINISHED_AT,
+        })}
+        selected={false}
+        onSelect={() => undefined}
+        onKeyDown={ignoreKeyDown}
+      />
+      <JobNode
+        node={makeNode({
+          id: 'job-listener-failed',
+          label: 'resolved failed',
+          mode: 'listening',
+          status: 'failed',
+          listenerStatus: 'resolved',
+          position: 6,
+          dependencies: [],
+          jobExecutions: makeExecutionsByStatus('job-listener-failed', [
+            'succeeded',
+            'failed',
+            'failed',
+          ]),
+          queuedAt: QUEUED_AT,
+          startedAt: STARTED_AT,
+          finishedAt: FINISHED_AT,
+        })}
+        selected={false}
+        onSelect={() => undefined}
+        onKeyDown={ignoreKeyDown}
+      />
+    </div>
+  ),
+};
+
+function makeNode({
+  id,
+  label,
+  status,
+  position,
+  dependencies,
+  mode = 'one_shot',
+  listenerStatus = 'inactive',
+  jobExecutions,
+  queuedAt = null,
+  startedAt = null,
+  finishedAt = null,
+}: {
+  id: string;
+  label: string;
+  status: JobStatus;
+  position: number;
+  dependencies: string[];
+  mode?: WorkflowRunJobDetailDto['mode'];
+  listenerStatus?: WorkflowRunJobDetailDto['listener_status'];
+  jobExecutions?: WorkflowRunJobDetailDto['job_executions'];
+  queuedAt?: string | null;
+  startedAt?: string | null;
+  finishedAt?: string | null;
+}): JobGraphNode {
+  const shouldCreateExecution =
+    jobExecutions === undefined && (queuedAt !== null || startedAt !== null || finishedAt !== null);
+  const overrides: Partial<WorkflowRunJobDetailDto> = {
+    id,
+    name: label,
+    mode,
+    status,
+    listener_status: listenerStatus,
+    position,
+    dependencies,
+    job_executions: shouldCreateExecution
+      ? [
+          workflowJobExecutionDto({
+            job_id: id,
+            status: status === 'skipped' ? 'cancelled' : status,
+            queued_at: queuedAt,
+            started_at: startedAt,
+            finished_at: finishedAt,
+          }),
+        ]
+      : jobExecutions,
+  };
+  const job = workflowJob(overrides);
+  return Object.assign(Object.create(Object.getPrototypeOf(job)), job, {
+    column: 0,
+    row: position,
+    currentDependencyCount: dependencies.length,
+  });
+}
+
+function makeExecutionsByStatus(
+  jobId: string,
+  statuses: readonly JobExecutionStatus[],
+): WorkflowRunJobDetailDto['job_executions'] {
+  return statuses.map((status, index) => ({
+    id: `exec-${index + 1}`,
+    job_id: jobId,
+    sequence: index + 1,
+    name: `execution-${index + 1}`,
+    status,
+    status_reason: status === 'failed' ? 'step_failed' : null,
+    queued_at: '2026-06-26T11:54:00.000Z',
+    started_at: '2026-06-26T11:57:46.000Z',
+    finished_at: status === 'running' ? null : '2026-06-26T12:00:00.000Z',
+    timed_out_at: null,
+    created_at: '2026-06-26T11:54:00.000Z',
+    updated_at: '2026-06-26T12:00:00.000Z',
+    steps: [],
+  }));
+}