@shipfox/client-workflows 14.0.1 → 15.0.0

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

@@ -1,7 +1,11 @@
 import {render, screen, waitFor, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type {workflowRunDetailDto} from '#test/fixtures/workflow-run.js';
-import {workflowJobDto, workflowRunDetail} from '#test/fixtures/workflow-run.js';
+import {
+  workflowJobDto,
+  workflowJobExecutionDto,
+  workflowRunDetail,
+} from '#test/fixtures/workflow-run.js';
 import {WorkflowRunSummary} from './workflow-run-summary.js';
 
 const RUN_ID = '66666666-6666-4666-8666-666666666666';
@@ -125,9 +129,9 @@ describe('WorkflowRunSummary', () => {
     const heading = await screen.findByRole('heading', {name: runName});
 
     expect(heading).toHaveAttribute('data-slot', 'tooltip-trigger');
-    await waitFor(() =>
-      expect(within(heading).getByText(runName)).toHaveAttribute('title', runName),
-    );
+    // The Radix tooltip is the only name affordance: a native `title` beside it would fire a
+    // second, unstyled OS tooltip with the same text.
+    await waitFor(() => expect(within(heading).getByText(runName)).not.toHaveAttribute('title'));
   });
 
   test('shows the selected attempt duration, not the top-level run duration', async () => {
@@ -174,6 +178,61 @@ describe('WorkflowRunSummary', () => {
     expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
   });
 
+  test('reads a running run whose jobs have not started as queued', async () => {
+    vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-05-07T01:02:14.000Z'));
+    renderSummary({
+      jobs: [workflowJobDto({status: 'pending'})],
+      run_attempt: runningAttemptDto(),
+    });
+
+    const summary = await screen.findByRole('region', {name: 'deploy-web'});
+
+    expect(within(summary).getAllByText('Queued')).not.toHaveLength(0);
+    expect(within(summary).queryByText('Running')).not.toBeInTheDocument();
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'queued 2m 14s');
+  });
+
+  test('names the job a queued run is waiting on when there is more than one', async () => {
+    renderSummary({
+      jobs: [
+        workflowJobDto({
+          name: 'lint',
+          status: 'pending',
+          job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T01:00:00.000Z'})],
+        }),
+        workflowJobDto({
+          name: 'build',
+          status: 'pending',
+          job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T00:59:00.000Z'})],
+        }),
+      ],
+      run_attempt: runningAttemptDto(),
+    });
+
+    const summary = await screen.findByRole('region', {name: 'deploy-web'});
+
+    expect(within(summary).getByText('waiting on')).toBeInTheDocument();
+    expect(within(summary).getByText('build')).toBeInTheDocument();
+  });
+
+  test('leaves the waiting job unnamed when the run has a single job', async () => {
+    renderSummary({
+      jobs: [
+        workflowJobDto({
+          name: 'build',
+          status: 'pending',
+          job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T01:00:00.000Z'})],
+        }),
+      ],
+      run_attempt: runningAttemptDto(),
+    });
+
+    const summary = await screen.findByRole('region', {name: 'deploy-web'});
+
+    expect(within(summary).getAllByText('Queued')).not.toHaveLength(0);
+    expect(within(summary).queryByText('waiting on')).not.toBeInTheDocument();
+  });
+
   test('does not render a whole-run source control', async () => {
     renderSummary();
 
@@ -250,7 +309,9 @@ describe('WorkflowRunSummary', () => {
     const onRerun = vi.fn();
     renderSummary({status: 'failed', jobs: [workflowJobDto({status: 'failed'})]}, {onRerun});
 
-    await user.click(await screen.findByRole('button', {name: 'Re-run jobs'}));
+    const rerunButton = await screen.findByRole('button', {name: 'Re-run jobs'});
+    expect(rerunButton).toHaveClass('bg-background-neutral-base');
+    await user.click(rerunButton);
     expect(await screen.findByRole('menuitem', {name: 'Re-run all jobs'})).toBeInTheDocument();
     await user.click(await screen.findByRole('menuitem', {name: 'Re-run failed jobs'}));
 
@@ -328,6 +389,19 @@ function renderSummary(
   render(<WorkflowRunSummary run={run} {...props} />);
 }
 
+function runningAttemptDto() {
+  return {
+    id: '11111111-1111-4111-8111-000000000001',
+    workflow_run_id: RUN_ID,
+    attempt: 1,
+    status: 'running' as const,
+    created_at: '2026-05-07T01:01:00.000Z',
+    started_at: '2026-05-07T01:00:00.000Z',
+    finished_at: null,
+    rerun_mode: null,
+  };
+}
+
 function setElementWidths({scrollWidth, clientWidth}: {scrollWidth: number; clientWidth: number}) {
   Object.defineProperty(window.HTMLElement.prototype, 'scrollWidth', {
     configurable: true,

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

@@ -11,8 +11,7 @@ import {useIsTextTruncated} from '@shipfox/react-ui/hooks';
 import {RelativeTime} from '@shipfox/react-ui/relative-time';
 import {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
-import {Header, Text} from '@shipfox/react-ui/typography';
-import {Link} from '@tanstack/react-router';
+import {Code, Header, Text} from '@shipfox/react-ui/typography';
 import {useId} from 'react';
 import {WorkflowRunNumberLabel} from '#components/workflow-run-number-label.js';
 import {
@@ -21,15 +20,20 @@ import {
   WORKFLOW_RUN_STATUSES,
   type WorkflowRunDetail,
   type WorkflowRunRerunMode,
+  workflowRunBlockingJob,
+  workflowRunDetailDisplay,
 } from '#core/workflow-run.js';
-import {validateWorkflowRunsSearch, workflowRunListSearchParams} from '#routes/inputs.js';
 import {WorkflowRunDurationLabel} from '../workflow-run-duration-label.js';
 import {getWorkflowStatusVisual} from '../workflow-status/status-visuals.js';
 import {WorkflowRunAttemptSwitcher} from './workflow-run-attempt-switcher.js';
 
 const STATUS_BADGE_LABEL_WIDTH_CH = Math.max(
-  ...WORKFLOW_RUN_STATUSES.map((status) => getWorkflowStatusVisual(status).label.length),
+  ...[...WORKFLOW_RUN_STATUSES, 'queued' as const].map(
+    (status) => getWorkflowStatusVisual(status).label.length,
+  ),
 );
+const RERUN_BUTTON_SURFACE_CLASS_NAME =
+  'bg-background-neutral-base hover:bg-background-neutral-hover active:bg-background-neutral-pressed';
 
 type WorkflowRunAction = 'cancel' | 'rerun-all' | 'rerun-menu' | 'none';
 
@@ -55,14 +59,19 @@ export function WorkflowRunSummary({
   latestAttempt,
 }: WorkflowRunSummaryProps) {
   const headingId = useId();
-  const status = getWorkflowStatusVisual(run.runAttempt.status);
+  const display = workflowRunDetailDisplay(run);
+  const status = getWorkflowStatusVisual(display.status);
   const action = workflowRunActionForRun(run);
   const hasAction = canRenderWorkflowRunAction(action, onCancel, onRerun);
   const attemptSwitcher =
     latestAttempt && latestAttempt > 1 && workspaceSlug && projectSlug
       ? {workspaceSlug, projectSlug, latestAttempt}
       : null;
-  const displayDuration = run.runAttempt.displayDuration;
+  const displayDuration = display.duration;
+  // Named only while the run is waiting and has more than one job: with a single job the rail
+  // and the graph already say which one it is.
+  const blockingJob =
+    display.status === 'queued' && run.jobs.length > 1 ? workflowRunBlockingJob(run.jobs) : null;
   const {ref: headingTextRef, isTruncated: isHeadingTruncated} =
     useIsTextTruncated<HTMLSpanElement>(run.name);
 
@@ -70,61 +79,32 @@ export function WorkflowRunSummary({
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
       <section aria-labelledby={headingId} className="bg-background-neutral-background px-16 py-12">
         <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-12 gap-y-8 overflow-hidden max-[480px]:grid-cols-1">
-          <nav
-            aria-label="Breadcrumb"
-            className="col-start-1 row-start-1 min-w-0 max-[480px]:col-start-auto max-[480px]:row-start-auto"
-          >
-            <ol className="flex min-w-0 items-center gap-8">
-              {workspaceSlug && projectSlug ? (
-                <li className="shrink-0">
-                  <Link
-                    to="/w/$workspaceSlug/p/$projectSlug/runs"
-                    params={{workspaceSlug, projectSlug}}
-                    search={
-                      ((previous: Record<string, unknown>) =>
-                        workflowRunListSearchParams(validateWorkflowRunsSearch(previous))) as never
-                    }
-                    className="rounded-4 text-xs font-medium text-foreground-neutral-subtle underline decoration-border-neutral-strong underline-offset-4 outline-none hover:text-foreground-neutral-base focus-visible:shadow-border-interactive-with-active"
-                  >
-                    Runs
-                  </Link>
-                </li>
-              ) : null}
-              {workspaceSlug && projectSlug ? (
-                <li aria-hidden="true" className="shrink-0 text-xs text-foreground-neutral-subtle">
-                  /
-                </li>
-              ) : null}
-              <li aria-current="page" className="flex min-w-0 items-center gap-8">
-                <Badge variant={status.badge} size="xs">
-                  <span className="text-center" style={{width: `${STATUS_BADGE_LABEL_WIDTH_CH}ch`}}>
-                    {status.label}
-                  </span>
-                </Badge>
+          <div className="col-start-1 row-start-1 min-w-0 max-[480px]:col-start-auto max-[480px]:row-start-auto">
+            <div className="flex min-w-0 items-center gap-8">
+              <Badge variant={status.badge} size="xs">
+                <span className="text-center" style={{width: `${STATUS_BADGE_LABEL_WIDTH_CH}ch`}}>
+                  {status.label}
+                </span>
+              </Badge>
 
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Header id={headingId} variant="h3" className="min-w-0 truncate">
-                      <span
-                        ref={headingTextRef}
-                        title={isHeadingTruncated ? run.name : undefined}
-                        className="block min-w-0 truncate"
-                      >
-                        {run.name}
-                      </span>
-                    </Header>
-                  </TooltipTrigger>
-                  {isHeadingTruncated ? (
-                    <TooltipContent>
-                      <Text as="span" size="xs" className="max-w-[360px] break-words">
-                        {run.name}
-                      </Text>
-                    </TooltipContent>
-                  ) : null}
-                </Tooltip>
-              </li>
-            </ol>
-          </nav>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Header id={headingId} variant="h3" className="min-w-0 truncate">
+                    <span ref={headingTextRef} className="block min-w-0 truncate">
+                      {run.name}
+                    </span>
+                  </Header>
+                </TooltipTrigger>
+                {isHeadingTruncated ? (
+                  <TooltipContent>
+                    <Text as="span" size="xs" className="max-w-[360px] break-words">
+                      {run.name}
+                    </Text>
+                  </TooltipContent>
+                ) : null}
+              </Tooltip>
+            </div>
+          </div>
 
           {hasAction ? (
             <div className="col-start-2 row-start-1 flex min-w-max items-center gap-6 justify-self-end max-[480px]:col-start-auto max-[480px]:row-start-auto max-[480px]:justify-self-start">
@@ -204,6 +184,20 @@ export function WorkflowRunSummary({
                 />
               </>
             ) : null}
+
+            {blockingJob ? (
+              <>
+                <MetadataSeparator />
+                <span className="flex min-w-0 items-center gap-4">
+                  <Text as="span" size="xs" className="shrink-0">
+                    waiting on
+                  </Text>
+                  <Code as="span" variant="label" className="min-w-0 truncate">
+                    {blockingJob.displayName}
+                  </Code>
+                </span>
+              </>
+            ) : null}
           </div>
         </div>
       </section>
@@ -251,6 +245,7 @@ function WorkflowRunActionSlot({
         type="button"
         variant="secondary"
         size="xs"
+        className={RERUN_BUTTON_SURFACE_CLASS_NAME}
         isLoading={rerunPending}
         disabled={rerunPending}
         onClick={() => onRerun('all')}
@@ -269,6 +264,7 @@ function WorkflowRunActionSlot({
           type="button"
           variant="secondary"
           size="xs"
+          className={RERUN_BUTTON_SURFACE_CLASS_NAME}
           iconRight="arrowDownSLine"
           isLoading={rerunPending}
           disabled={rerunPending}

package/src/components/workflow-run-tabs/index.ts

@@ -1,5 +1,2 @@
 export {RunAnnotationSummaryLine} from './run-annotation-summary-line.js';
 export {RunAnnotationsEmpty} from './run-annotations-empty.js';
-export {RunJobsList} from './run-jobs-list.js';
-export {RunTabCount} from './run-tab-count.js';
-export {RunTabStrip} from './run-tab-strip.js';

package/src/components/workflow-run-tabs/run-annotations-empty.tsx

@@ -1,11 +1,15 @@
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 
-export function RunAnnotationsEmpty() {
+export function RunAnnotationsEmpty({jobName}: {jobName?: string | undefined} = {}) {
   return (
     <EmptyState
       icon="fileDamageLine"
       title="No annotations"
-      description="This run has no annotations to show."
+      description={
+        jobName
+          ? `${jobName} has no annotations to show in this run.`
+          : 'This run has no annotations to show.'
+      }
     />
   );
 }

package/src/components/workflow-run-view/index.ts

@@ -1,2 +1 @@
-export {JobCard} from './job-card.js';
 export {WorkflowRunView} from './workflow-run-view.js';

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

@@ -0,0 +1,242 @@
+import {act, screen, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {useState} from 'react';
+import {
+  workflowJobDto,
+  workflowJobExecutionDto,
+  workflowRunDetail,
+} from '#test/fixtures/workflow-run.js';
+import {renderWithRouter} from '#test/render.js';
+import {RunWorkspaceNav} from './run-workspace-nav.js';
+
+const RUN_ID = '66666666-6666-4666-8666-666666666666';
+const CURRENT_JOB_ID = '88888888-8888-4888-8888-888888888888';
+const BUILD_LINK_PATTERN = /build/;
+const DEPLOY_LINK_PATTERN = /deploy/;
+const NOW = Date.parse('2026-06-26T12:00:00.000Z');
+
+describe('RunWorkspaceNav', () => {
+  beforeEach(() => {
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('shows the complete run hierarchy and marks the current job', async () => {
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [
+        workflowJobDto({id: 'job-deploy', name: 'deploy', position: 2, status: 'failed'}),
+        workflowJobDto({id: CURRENT_JOB_ID, name: 'build', position: 1, status: 'running'}),
+        workflowJobDto({id: 'job-setup', name: 'setup', position: 0, status: 'succeeded'}),
+      ],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+        currentJobId={CURRENT_JOB_ID}
+        jobSearch={{runAttempt: 2}}
+      />,
+    );
+
+    expect(await screen.findByRole('link', {name: 'Summary'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Run details'})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: 'Annotations'})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: 'Source'})).toBeInTheDocument();
+
+    const jobs = screen.getByRole('heading', {name: 'Jobs'}).closest('section');
+    if (!jobs) throw new Error('Missing jobs section');
+    expect(
+      within(jobs)
+        .getAllByRole('link')
+        .map((link) => link.textContent?.trim()),
+    ).toEqual([
+      expect.stringContaining('setup'),
+      expect.stringContaining('build'),
+      expect.stringContaining('deploy'),
+    ]);
+
+    const current = within(jobs).getByRole('link', {name: BUILD_LINK_PATTERN});
+    expect(current).toHaveAttribute('aria-current', 'page');
+    expect(current).toHaveAttribute(
+      'href',
+      expect.stringContaining(`/runs/${RUN_ID}/jobs/${CURRENT_JOB_ID}`),
+    );
+    expect(current).not.toHaveAttribute('href', expect.stringContaining('tab='));
+    expect(current).toHaveAttribute('href', expect.stringContaining('runAttempt=%222%22'));
+  });
+
+  test('keeps the job index visible for a single-job run', async () => {
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [workflowJobDto({id: CURRENT_JOB_ID, name: 'build', status: 'succeeded'})],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+      />,
+    );
+
+    expect(await screen.findByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: BUILD_LINK_PATTERN})).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: 'Summary'})).toHaveAttribute('aria-current', 'page');
+  });
+
+  test('scrolls the current job into view when the mobile rail opens', async () => {
+    const user = userEvent.setup();
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: scrollIntoView,
+    });
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [workflowJobDto({id: CURRENT_JOB_ID, name: 'build', status: 'running'})],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+        currentJobId={CURRENT_JOB_ID}
+      />,
+    );
+
+    await screen.findByRole('link', {name: BUILD_LINK_PATTERN});
+    await user.click(await screen.findByRole('button', {name: 'Toggle run navigation'}));
+
+    expect(scrollIntoView).toHaveBeenCalledTimes(2);
+  });
+
+  test('closes the mobile rail after navigating to a job', async () => {
+    const user = userEvent.setup();
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [
+        workflowJobDto({id: CURRENT_JOB_ID, name: 'build', status: 'running'}),
+        workflowJobDto({id: 'job-deploy', name: 'deploy', position: 1, status: 'succeeded'}),
+      ],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+        currentJobId={CURRENT_JOB_ID}
+      />,
+    );
+
+    const trigger = await screen.findByRole('button', {name: 'Toggle run navigation'});
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(screen.getByRole('link', {name: DEPLOY_LINK_PATTERN}));
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('scrolls once when the active job changes while the rail is open', async () => {
+    const user = userEvent.setup();
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: scrollIntoView,
+    });
+    const firstJob = workflowJobDto({id: CURRENT_JOB_ID, name: 'build', status: 'running'});
+    const secondJob = workflowJobDto({
+      id: 'job-deploy',
+      name: 'deploy',
+      position: 1,
+      status: 'running',
+    });
+    const initialRun = workflowRunDetail({id: RUN_ID, jobs: [firstJob, secondJob]});
+    renderWithRouter(<ActiveJobHarness run={initialRun} />);
+
+    await screen.findByRole('link', {name: BUILD_LINK_PATTERN});
+    await user.click(await screen.findByRole('button', {name: 'Toggle run navigation'}));
+    const callsBeforeJobChange = scrollIntoView.mock.calls.length;
+
+    await user.click(screen.getByRole('button', {name: 'Activate deploy'}));
+
+    expect(scrollIntoView).toHaveBeenCalledTimes(callsBeforeJobChange + 1);
+  });
+
+  test('updates live job durations on the ticker cadence', async () => {
+    vi.useFakeTimers({shouldAdvanceTime: true});
+    vi.setSystemTime(NOW);
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [
+        workflowJobDto({
+          id: CURRENT_JOB_ID,
+          name: 'build',
+          status: 'running',
+          job_executions: [
+            workflowJobExecutionDto({
+              job_id: CURRENT_JOB_ID,
+              status: 'running',
+              queued_at: '2026-06-26T11:54:00.000Z',
+              started_at: '2026-06-26T11:57:46.000Z',
+            }),
+          ],
+        }),
+      ],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+        currentJobId={CURRENT_JOB_ID}
+      />,
+    );
+
+    const jobLink = await screen.findByRole('link', {name: BUILD_LINK_PATTERN});
+    expect(jobLink).toHaveTextContent('2m 14s');
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(jobLink).toHaveTextContent('2m 15s');
+  });
+});
+
+function ActiveJobHarness({run}: {run: ReturnType<typeof workflowRunDetail>}) {
+  const [currentJobId, setCurrentJobId] = useState(CURRENT_JOB_ID);
+
+  return (
+    <>
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+        currentJobId={currentJobId}
+      />
+      <button type="button" onClick={() => setCurrentJobId('job-deploy')}>
+        Activate deploy
+      </button>
+    </>
+  );
+}