@shipfox/client-workflows 0.2.0

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

@@ -0,0 +1,347 @@
+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 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;
+  job_executions?: WorkflowRunJobDetailDto['job_executions'];
+  queued_at?: string | null;
+  started_at?: string | null;
+  finished_at?: string | null;
+};
+
+function makeNode(overrides: NodeOverrides): JobGraphNode {
+  const {queued_at, started_at, finished_at, job_executions, ...jobOverrides} = overrides;
+  const shouldCreateExecution =
+    job_executions === undefined &&
+    (queued_at !== undefined || started_at !== undefined || finished_at !== undefined);
+  const jobOverrideWithExecutions: NodeOverrides = {...jobOverrides};
+  if (shouldCreateExecution) {
+    jobOverrideWithExecutions.job_executions = [
+      workflowJobExecutionDto({
+        ...(jobOverrides.id === undefined ? {} : {job_id: jobOverrides.id}),
+        ...(jobOverrides.status === undefined
+          ? {}
+          : {status: jobOverrides.status === 'skipped' ? 'cancelled' : jobOverrides.status}),
+        queued_at: queued_at ?? null,
+        started_at: started_at ?? null,
+        finished_at: finished_at ?? null,
+      }),
+    ];
+  } else if (job_executions !== undefined) {
+    jobOverrideWithExecutions.job_executions = job_executions;
+  }
+  const job = workflowJob(jobOverrideWithExecutions);
+  return Object.assign(Object.create(Object.getPrototypeOf(job)), job, {
+    column: 0,
+    row: 0,
+    currentDependencyCount: 0,
+  });
+}
+
+function renderNode(node: JobGraphNode, {live = false}: {live?: boolean} = {}) {
+  const element = (
+    <JobNode
+      node={node}
+      selected={false}
+      onSelect={() => undefined}
+      onKeyDown={() => undefined}
+      onHoverStart={() => undefined}
+      onHoverEnd={() => undefined}
+    />
+  );
+
+  if (live) {
+    return render(<TimeTickerProvider intervalMs={1000}>{element}</TimeTickerProvider>);
+  }
+
+  return render(element);
+}
+
+function setMatchMedia(reduced: boolean) {
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    value: (query: string) => ({
+      matches: query.includes('reduce') ? reduced : query.includes('min-width'),
+      media: query,
+      onchange: null,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      dispatchEvent: () => false,
+    }),
+  });
+}
+
+function setVisibility(state: 'visible' | 'hidden') {
+  Object.defineProperty(document, 'visibilityState', {configurable: true, value: state});
+}
+
+describe('JobNode duration', () => {
+  beforeEach(() => {
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  test('shows the static span for a finished job', () => {
+    const node = makeNode({
+      name: 'build',
+      status: 'succeeded',
+      started_at: '2026-06-26T11:57:46.000Z',
+      finished_at: '2026-06-26T12:00:00.000Z',
+    });
+
+    renderNode(node);
+
+    expect(screen.getByText('2m 14s')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'build, Succeeded, ran 2m 14s'})).toBeInTheDocument();
+  });
+
+  test('clamps a skewed finished span (finishedAt before startedAt) to 0s', () => {
+    const node = makeNode({
+      name: 'build',
+      status: 'succeeded',
+      started_at: '2026-06-26T12:00:00.000Z',
+      finished_at: '2026-06-26T11:59:55.000Z',
+    });
+
+    renderNode(node);
+
+    expect(screen.getByText('0s')).toBeInTheDocument();
+  });
+
+  test('shows no duration for a skipped job that never executed', () => {
+    const node = makeNode({name: 'lint', status: 'skipped'});
+
+    renderNode(node);
+
+    // Exact accessible name proves no duration phrase was appended.
+    expect(screen.getByRole('button', {name: 'lint, Skipped'})).toBeInTheDocument();
+  });
+
+  test('shows live elapsed from startedAt for a running job', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(NOW);
+    const node = makeNode({
+      name: 'test',
+      status: 'running',
+      queued_at: '2026-06-26T11:54:00.000Z',
+      started_at: '2026-06-26T11:57:46.000Z',
+    });
+
+    renderNode(node);
+
+    expect(screen.getByText('2m 14s')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'test, Running, running 2m 14s'})).toBeInTheDocument();
+  });
+
+  test('keeps live accessible duration in sync with visible duration', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(NOW);
+    const node = makeNode({
+      name: 'test',
+      status: 'running',
+      queued_at: '2026-06-26T11:54:00.000Z',
+      started_at: '2026-06-26T11:57:46.000Z',
+    });
+
+    renderNode(node, {live: true});
+
+    expect(screen.getByText('2m 14s')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'test, Running, running 2m 14s'})).toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(screen.getByText('2m 15s')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'test, Running, running 2m 15s'})).toBeInTheDocument();
+  });
+
+  test('shows live elapsed from queuedAt for a job waiting in the queue', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(NOW);
+    const node = makeNode({
+      name: 'deploy',
+      status: 'pending',
+      queued_at: '2026-06-26T11:54:00.000Z',
+      started_at: null,
+    });
+
+    renderNode(node);
+
+    expect(screen.getByText('6m 00s')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'deploy, Pending, queueing 6m 00s'}),
+    ).toBeInTheDocument();
+  });
+
+  test('does not show a duration for listening jobs', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(NOW);
+    const node = makeNode({
+      name: 'deploy-window',
+      mode: 'listening',
+      status: 'running',
+      listener_status: 'listening',
+    });
+
+    renderNode(node);
+
+    expect(screen.queryByText('2m 14s')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'deploy-window, Running'})).toBeInTheDocument();
+  });
+});
+
+describe('JobNode listening indicator', () => {
+  beforeEach(() => {
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  test('shows active listening jobs through the status icon', async () => {
+    const user = userEvent.setup();
+    const node = makeNode({
+      name: 'deploy-window',
+      mode: 'listening',
+      status: 'running',
+      listener_status: 'listening',
+    });
+
+    renderNode(node);
+
+    expect(screen.getByRole('button', {name: 'deploy-window, Running'})).toBeInTheDocument();
+    expect(screen.queryByLabelText('Waiting for events to start job')).not.toBeInTheDocument();
+
+    await user.hover(screen.getByRole('img', {name: 'Running'}));
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Running');
+  });
+
+  test('does not show the listener icon before the listener is armed or after it resolves', () => {
+    const pendingNode = makeNode({
+      name: 'release-gates',
+      mode: 'listening',
+      status: 'pending',
+      listener_status: 'inactive',
+    });
+    const resolvedNode = makeNode({
+      name: 'release-gates',
+      mode: 'listening',
+      status: 'succeeded',
+      listener_status: 'resolved',
+    });
+
+    const {unmount} = renderNode(pendingNode);
+    expect(screen.queryByLabelText('Waiting for events to start job')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'release-gates, Pending'})).toBeInTheDocument();
+    unmount();
+
+    renderNode(resolvedNode);
+    expect(screen.queryByLabelText('Waiting for events to start job')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'release-gates, Succeeded'})).toBeInTheDocument();
+  });
+});
+
+describe('JobNode status indicator', () => {
+  beforeEach(() => {
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  test('shows a tooltip with the human-readable job status', async () => {
+    const user = userEvent.setup();
+    const node = makeNode({
+      name: 'deploy',
+      status: 'running',
+    });
+
+    renderNode(node);
+
+    await user.hover(screen.getByRole('img', {name: 'Running'}));
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Running');
+  });
+});
+
+describe('JobNode execution count indicator', () => {
+  beforeEach(() => {
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    setMatchMedia(false);
+    setVisibility('visible');
+  });
+
+  test('shows a muted execution count with status tooltip', async () => {
+    const user = userEvent.setup();
+    const node = makeNode({
+      name: 'release-gates',
+      mode: 'listening',
+      status: 'running',
+      job_executions: [
+        workflowJobExecutionDto({status: 'pending'}),
+        workflowJobExecutionDto({status: 'running'}),
+        workflowJobExecutionDto({status: 'running'}),
+        workflowJobExecutionDto({status: 'succeeded'}),
+        workflowJobExecutionDto({status: 'succeeded'}),
+        workflowJobExecutionDto({status: 'succeeded'}),
+        workflowJobExecutionDto({status: 'failed'}),
+        workflowJobExecutionDto({status: 'cancelled'}),
+      ],
+    });
+
+    renderNode(node);
+
+    const button = screen.getByRole('button', {name: 'release-gates, Running, 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();
+
+    await user.hover(within(button).getByText('8'));
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(
+      '1 pending, 2 running, 3 succeeded, 1 failed, 1 cancelled',
+    );
+  });
+
+  test('hides the execution badge when there are no executions', () => {
+    const node = makeNode({
+      name: 'release-gates',
+      mode: 'listening',
+      status: 'pending',
+      job_executions: [],
+    });
+
+    renderNode(node);
+
+    const button = screen.getByRole('button', {name: 'release-gates, Pending'});
+    expect(within(button).queryByText('0')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,202 @@
+import {TriggerSourceIcon} from '@shipfox/client-triggers';
+import {Badge} from '@shipfox/react-ui/badge';
+import {useIsTextTruncated} from '@shipfox/react-ui/hooks';
+import {Icon} from '@shipfox/react-ui/icon';
+import {useTimeTick} from '@shipfox/react-ui/time-ticker';
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Code} from '@shipfox/react-ui/typography';
+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 type {JobGraphNode} from './graph-model.js';
+import {formatJobDurationAccessibleLabel} from './job-duration-format.js';
+import {JobDurationLabel} from './job-duration-label.js';
+
+const TRIGGER_SIZE = 36;
+
+export function TriggerNode({
+  trigger,
+}: {
+  trigger: Pick<
+    WorkflowRunDetail,
+    'triggerDisplayLabel' | 'triggerLabel' | 'triggerProvider' | 'triggerSource'
+  >;
+}) {
+  const label = trigger.triggerDisplayLabel || 'trigger';
+  const tooltip = trigger.triggerLabel || label;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <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"
+          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"
+          />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <span>{tooltip}</span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function JobNode({
+  node,
+  selected,
+  onSelect,
+  onKeyDown,
+  onHoverStart,
+  onHoverEnd,
+  ref,
+}: {
+  node: JobGraphNode;
+  selected: boolean;
+  onSelect: () => void;
+  onKeyDown: KeyboardEventHandler<HTMLButtonElement>;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  ref?: Ref<HTMLButtonElement>;
+}) {
+  useTimeTick();
+  const visual = getWorkflowStatusVisual(node.status);
+  const accessibleLabel = [
+    node.displayName,
+    visual.label,
+    formatJobDurationAccessibleLabel(node.displayDuration),
+    node.executionCountVisible
+      ? executionCountAccessibleLabel(node.jobExecutions.length)
+      : undefined,
+    node.carriedOver ? 'reused' : undefined,
+  ]
+    .filter((part): part is string => Boolean(part))
+    .join(', ');
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={selected}
+      aria-label={accessibleLabel}
+      data-job-id={node.id}
+      onClick={onSelect}
+      onKeyDown={onKeyDown}
+      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',
+        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"
+        />
+      ) : null}
+      <div className="flex min-w-0 flex-1 items-center gap-8">
+        <WorkflowStatusIcon status={node.status} jobMode={node.mode} size={14} />
+        <JobLabel label={node.displayName} />
+      </div>
+      <JobDurationLabel duration={node.displayDuration} />
+      {node.executionCountVisible ? <ExecutionCountText executions={node.jobExecutions} /> : null}
+      {node.carriedOver ? <CarriedOverBadge /> : null}
+    </button>
+  );
+}
+
+function ExecutionCountText({executions}: {executions: JobExecution[]}) {
+  const count = executions.length;
+
+  return (
+    <Tooltip>
+      <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"
+        >
+          <Icon name="loopRightLine" className="size-12" />
+          <Code as="span" variant="label" className="text-current">
+            {count}
+          </Code>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{executionCountTooltip(executions)}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function CarriedOverBadge() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="shrink-0">
+          <Badge variant="neutral" size="2xs">
+            reused
+          </Badge>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        Carried over from a previous attempt; did not run in this attempt
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function JobLabel({label}: {label: string}) {
+  const {ref: labelRef, isTruncated} = useIsTextTruncated<HTMLSpanElement>(label);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span ref={labelRef} className="block min-w-0 truncate">
+          <Code as="span" variant="label" bold className="text-foreground-neutral-base">
+            {label}
+          </Code>
+        </span>
+      </TooltipTrigger>
+      {isTruncated ? <TooltipContent>{label}</TooltipContent> : null}
+    </Tooltip>
+  );
+}
+
+function executionCountAccessibleLabel(count: number): string {
+  return `${count} ${count === 1 ? 'execution' : 'executions'}`;
+}
+
+function executionCountTooltip(executions: JobExecution[]): string {
+  const counts = executionStatusCounts(executions);
+  const parts = EXECUTION_STATUSES.map((status) =>
+    counts[status] > 0 ? `${counts[status]} ${status}` : undefined,
+  ).filter((part): part is string => part !== undefined);
+  return parts.length > 0 ? parts.join(', ') : 'No executions';
+}
+
+const EXECUTION_STATUSES = [
+  'pending',
+  'running',
+  'succeeded',
+  'failed',
+  'cancelled',
+] as const satisfies readonly JobExecutionStatus[];
+
+function executionStatusCounts(executions: JobExecution[]) {
+  return executions.reduce(
+    (counts, execution) => {
+      counts[execution.status] += 1;
+      return counts;
+    },
+    {pending: 0, running: 0, succeeded: 0, failed: 0, cancelled: 0},
+  );
+}

package/src/components/job-graph/types.ts

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

package/src/components/step-list/index.ts

@@ -0,0 +1,6 @@
+export type {
+  StepExpandedContext,
+  StepListEmptyState,
+  StepListProps,
+} from './step-list.js';
+export {StepList} from './step-list.js';