@shipfox/client-workflows 14.0.1 → 16.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 as="h1" 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,5 @@
+export {RunAnnotationCountChip} from './run-annotation-count-chip.js';
+export {annotationElementId, RunAnnotationItem} from './run-annotation-item.js';
+export {RunAnnotationList, type RunAnnotationListQuery} from './run-annotation-list.js';
 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-annotation-count-chip.tsx

@@ -0,0 +1,63 @@
+import {Icon} from '@shipfox/react-ui/icon';
+import {cn} from '@shipfox/react-ui/utils';
+import {Link} from '@tanstack/react-router';
+import {highestRunAnnotationSeverity, type RunAnnotationSummary} from '#core/run-annotation.js';
+import {type WorkflowRunsSearch, workflowRunSearchParams} from '#routes/inputs.js';
+import {SEVERITY_CHIP_TONE, SEVERITY_ICON} from './severity-visuals.js';
+
+export interface RunAnnotationCountChipProps {
+  summary: RunAnnotationSummary | undefined;
+  workspaceSlug: string;
+  projectSlug: string;
+  workflowRunId: string;
+  runAttempt?: number | undefined;
+  /** Scopes the destination list to one job. */
+  jobId?: string | undefined;
+}
+
+/**
+ * A bounded reference into the run's Annotations section: a count, its highest severity, and one
+ * link. Never a body, so an annotation is rendered exactly once per page.
+ */
+export function RunAnnotationCountChip({
+  summary,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  runAttempt,
+  jobId,
+}: RunAnnotationCountChipProps) {
+  if (!summary || summary.total === 0) return null;
+
+  const severity = highestRunAnnotationSeverity(summary);
+  const count = `${summary.total}${summary.truncated ? '+' : ''}`;
+  const label = `${count} ${summary.total === 1 && !summary.truncated ? 'annotation' : 'annotations'}`;
+  const accessibleLabel = severity
+    ? `View ${label}, highest severity ${severity}`
+    : `View ${label}`;
+  const search: WorkflowRunsSearch = {tab: 'annotations', ...(runAttempt ? {runAttempt} : {})};
+  if (jobId) search.jobId = jobId;
+
+  return (
+    <Link
+      to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
+      params={{workspaceSlug, projectSlug, workflowRunId}}
+      search={workflowRunSearchParams(search, search) as never}
+      aria-label={accessibleLabel}
+      className={cn(
+        'inline-flex h-20 shrink-0 items-center gap-4 rounded-4 border px-6 font-code text-xs leading-16 tabular-nums outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active',
+        // The chip stays 20px optically so it sits level with the duration metadata beside it;
+        // the hit area grows to the 44px minimum only where the pointer is coarse.
+        '[@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:px-10',
+        severity ? SEVERITY_CHIP_TONE[severity] : 'border-border-neutral-base',
+      )}
+    >
+      <Icon
+        name={severity ? SEVERITY_ICON[severity] : 'fileTextLine'}
+        size={12}
+        aria-hidden="true"
+      />
+      <span className="text-foreground-neutral-base">{count}</span>
+    </Link>
+  );
+}

package/src/components/workflow-run-tabs/run-annotation-item.tsx

@@ -0,0 +1,123 @@
+import {AnnotationCard} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+import {Icon} from '@shipfox/react-ui/icon';
+import {Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+import {Link} from '@tanstack/react-router';
+import {useEffect, useRef} from 'react';
+import type {RunAnnotationEntry} from '#core/run-annotation.js';
+import {workflowJobSearchParams} from '#routes/inputs.js';
+
+export interface RunAnnotationItemProps {
+  entry: RunAnnotationEntry;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
+  workflowRunId: string;
+  runAttempt?: number | undefined;
+  /** Deep-link target from `?annotation=`, which takes focus rather than only being scrolled to. */
+  selected?: boolean | undefined;
+}
+
+/**
+ * One annotation, and the only place in the product that renders an annotation body.
+ *
+ * The title is the annotation's `context`, which is what the emitting step named the block.
+ * Everything below it exists so a reader can get from a diagnostic back to its cause.
+ */
+export function RunAnnotationItem({
+  entry,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  runAttempt,
+  selected = false,
+}: RunAnnotationItemProps) {
+  const {annotation, origin} = entry;
+  const canLink = Boolean(origin && workspaceSlug && projectSlug);
+  const itemRef = useRef<HTMLLIElement>(null);
+  const focusedRef = useRef(false);
+
+  useEffect(() => {
+    if (!selected) {
+      focusedRef.current = false;
+      return;
+    }
+    if (focusedRef.current) return;
+
+    // A deep link that only scrolls leaves a keyboard or screen-reader user at the document
+    // start while the page moves under them.
+    focusedRef.current = true;
+    itemRef.current?.focus({preventScroll: true});
+    itemRef.current?.scrollIntoView({block: 'nearest'});
+  }, [selected]);
+
+  return (
+    <li
+      ref={itemRef}
+      tabIndex={-1}
+      aria-current={selected ? 'true' : undefined}
+      className={cn(
+        'rounded-8 outline-none focus-visible:shadow-border-interactive-with-active',
+        selected && 'shadow-border-interactive-with-active',
+      )}
+    >
+      <AnnotationCard
+        id={annotationElementId(annotation.id)}
+        style={annotation.style}
+        title={annotation.context}
+        titleAs="h3"
+        provenance={<RunAnnotationProvenance entry={entry} />}
+        body={annotation.body}
+        action={
+          canLink && origin ? (
+            <Button
+              asChild
+              size="xs"
+              variant="transparent"
+              className="[@media(pointer:coarse)]:min-h-44"
+            >
+              <Link
+                to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId/jobs/$jobId"
+                params={{
+                  workspaceSlug: workspaceSlug ?? '',
+                  projectSlug: projectSlug ?? '',
+                  workflowRunId,
+                  jobId: origin.jobId,
+                }}
+                search={
+                  workflowJobSearchParams({
+                    jobExecutionId: origin.jobExecutionId,
+                    stepId: origin.stepId,
+                    stepAttemptId: origin.stepAttemptId,
+                    runAttempt,
+                  }) as never
+                }
+              >
+                Open step
+                <Icon name="arrowRightLine" size={12} aria-hidden="true" />
+              </Link>
+            </Button>
+          ) : null
+        }
+      />
+    </li>
+  );
+}
+
+/** `job · execution #2 · run tests · attempt 1`, dropping any part the run no longer resolves. */
+function RunAnnotationProvenance({entry}: {entry: RunAnnotationEntry}) {
+  const parts = [entry.jobName, entry.executionLabel, entry.stepLabel, entry.attemptLabel].filter(
+    (part): part is string => Boolean(part),
+  );
+
+  return (
+    <Text as="p" size="xs" className="min-w-0 break-words font-code text-foreground-neutral-subtle">
+      {parts.join(' · ')}
+    </Text>
+  );
+}
+
+/** Stable element id so `?annotation=<id>` can scroll to and highlight one annotation. */
+export function annotationElementId(annotationId: string): string {
+  return `run-annotation-${annotationId}`;
+}