@shipfox/client-workflows 12.0.2 → 14.0.0

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

@@ -26,8 +26,6 @@ import {WorkflowRunSummary} from './workflow-run-summary.js';
 const ROOT_RUN_ID = '11111111-1111-4111-8111-111111111111';
 const CURRENT_RUN_ID = '22222222-2222-4222-8222-222222222222';
 const NEXT_RUN_ID = '33333333-3333-4333-8333-333333333333';
-const WORKSPACE_ID = '44444444-4444-4444-8444-444444444444';
-const PROJECT_ID = '55555555-5555-4555-8555-555555555555';
 const SWITCH_ATTEMPT_PATTERN = /Switch attempt/;
 const ATTEMPT_3_PATTERN = /Attempt 3/;
 const STORYBOOK_NOW = '2026-06-26T12:00:00.000Z';
@@ -58,10 +56,10 @@ const RUN_ATTEMPTS_RESPONSE = runAttemptsResponseDto({
 });
 
 const withFrame: Decorator = (Story) => (
-  <div className="min-h-screen bg-background-neutral-base">
+  <div className="min-h-screen bg-background-neutral-background">
     <div className="mx-auto flex min-h-screen w-full max-w-[1120px] flex-col overflow-hidden border-x border-border-neutral-base bg-background-subtle-base">
       <Story />
-      <div className="min-h-0 flex-1 bg-background-neutral-base p-16" />
+      <div className="min-h-0 flex-1 bg-background-neutral-background p-16" />
     </div>
   </div>
 );
@@ -71,12 +69,12 @@ const withAttemptApi: Decorator = (Story) => {
   const rootRoute = createRootRoute({component: Outlet});
   const runRoute = createRoute({
     getParentRoute: () => rootRoute,
-    path: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
+    path: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
     component: () => <Story />,
   });
   const router = createRouter({
     history: createMemoryHistory({
-      initialEntries: [`/workspaces/${WORKSPACE_ID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}`],
+      initialEntries: [`/w/acme/p/project/runs/${CURRENT_RUN_ID}`],
     }),
     routeTree: rootRoute.addChildren([runRoute]),
   });
@@ -155,37 +153,13 @@ const ATTEMPT_SUMMARY_ARGS = {
     }),
     status: 'failed',
   }),
-  workspaceId: WORKSPACE_ID,
-  projectId: PROJECT_ID,
+  workspaceSlug: 'acme',
+  projectSlug: 'project',
   latestAttempt: 3,
 };
 
 export const Playground: Story = {};
 
-export const WithSourceButton: Story = {
-  args: {
-    run: workflowRunDetail({
-      status: 'succeeded',
-      source_snapshot: {format: 'yaml', content: 'jobs:\n  build:\n    steps: []'},
-    }),
-    sourceAvailable: true,
-    sourceOpen: false,
-    sourcePanelId: 'workflow-source-panel',
-  },
-};
-
-export const SourceOpen: Story = {
-  args: {
-    run: workflowRunDetail({
-      status: 'succeeded',
-      source_snapshot: {format: 'yaml', content: 'jobs:\n  build:\n    steps: []'},
-    }),
-    sourceAvailable: true,
-    sourceOpen: true,
-    sourcePanelId: 'workflow-source-panel',
-  },
-};
-
 export const WithAttempts: Story = {
   decorators: [withAttemptApi],
   args: ATTEMPT_SUMMARY_ARGS,
@@ -325,7 +299,7 @@ const ACTION_VARIANTS = [
   >;
 }>;
 
-export const ActionVariantsWithSource: Story = {
+export const ActionVariants: Story = {
   render: () => (
     <div className="flex flex-col">
       {ACTION_VARIANTS.map(({label, run, props}, index) => (
@@ -335,9 +309,6 @@ export const ActionVariantsWithSource: Story = {
             ...run,
             id: `22222222-2222-4222-8222-${String(index + 2).padStart(12, '0')}`,
           }}
-          sourceAvailable
-          sourceOpen={label === 'Running'}
-          sourcePanelId={`workflow-source-panel-${index}`}
           {...props}
         />
       ))}
@@ -352,8 +323,6 @@ export const ActionVariantsWithAttempts: Story = {
       {ACTION_VARIANTS.map(({label, run, props}, index) => (
         <WorkflowRunSummary
           key={label}
-          workspaceId={WORKSPACE_ID}
-          projectId={PROJECT_ID}
           run={{
             ...run,
             id: `22222222-2222-4222-8222-${String(index + 2).padStart(12, '0')}`,
@@ -369,6 +338,8 @@ export const ActionVariantsWithAttempts: Story = {
               rerunMode: null,
             }),
           }}
+          workspaceSlug="acme"
+          projectSlug="project"
           latestAttempt={3}
           {...props}
         />
@@ -412,3 +383,23 @@ export const LongTriggerMetadata: Story = {
     }),
   },
 };
+
+export const NarrowLongContent: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] max-w-full overflow-hidden border-x border-border-neutral-base">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    run: workflowRunDetail({
+      status: 'running',
+      name: 'release-production-multi-region-with-canary-and-post-deploy-validation',
+      trigger_provider: 'github',
+      trigger_source: 'github-enterprise-cloud-production-organization',
+      trigger_event: 'workflow_dispatch_with_release_candidate_payload',
+    }),
+    onCancel: noop,
+  },
+};

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

@@ -29,13 +29,16 @@ describe('WorkflowRunSummary', () => {
     restoreElementWidthDescriptors();
   });
 
-  test('renders status, trigger metadata, and trigger time', async () => {
-    renderSummary();
+  test('renders status, run number, trigger metadata, and trigger time', async () => {
+    renderSummary({workflow_name: 'CI', number: 5184});
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
+    expect(summary).toHaveClass('bg-background-neutral-background', 'px-16');
+    expect(summary.firstElementChild).not.toHaveClass('max-w-[1120px]');
     expect(within(summary).getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();
     expect(within(summary).getAllByText('Running')).not.toHaveLength(0);
+    expect(within(summary).getByText('CI #5184')).toBeInTheDocument();
     expect(within(summary).getByText('fire')).toBeInTheDocument();
     expect(within(summary).queryByText('manual')).not.toBeInTheDocument();
     expect(within(summary).getByText(RELATIVE_TIME_TEXT_PATTERN)).toBeInTheDocument();
@@ -46,6 +49,30 @@ describe('WorkflowRunSummary', () => {
     ).not.toBeInTheDocument();
   });
 
+  test('omits the run number before the server assigns one', async () => {
+    const run = {...workflowRunDetail({workflow_name: 'CI'}), number: null};
+    render(<WorkflowRunSummary run={run} />);
+
+    const summary = await screen.findByRole('region', {name: 'deploy-web'});
+
+    expect(within(summary).queryByText('CI #1')).not.toBeInTheDocument();
+  });
+
+  test('separates a standalone run number from the run timestamp', async () => {
+    const run = workflowRunDetail({
+      workflow_name: 'CI',
+      trigger_source: '',
+      trigger_event: '',
+    });
+    render(<WorkflowRunSummary run={run} />);
+
+    const summary = await screen.findByRole('region', {name: 'deploy-web'});
+
+    expect(within(summary).getByText('CI #1')).toBeInTheDocument();
+    const timestamp = within(summary).getByText(RELATIVE_TIME_TEXT_PATTERN);
+    expect(timestamp.previousElementSibling).toHaveAttribute('aria-hidden', 'true');
+  });
+
   test('uses the selected run attempt for summary status and trigger time', async () => {
     const rootCreatedAt = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString();
     const attemptCreatedAt = new Date(Date.now() - 5 * 60 * 1000).toISOString();
@@ -103,27 +130,6 @@ describe('WorkflowRunSummary', () => {
     );
   });
 
-  test('renders source control only when source is available', async () => {
-    const user = userEvent.setup();
-    const onSourceToggle = vi.fn();
-    renderSummary(
-      {source_snapshot: {format: 'yaml', content: 'name: deploy-web'}},
-      {
-        sourceAvailable: true,
-        sourceOpen: false,
-        sourcePanelId: 'workflow-source-panel',
-        onSourceToggle,
-      },
-    );
-
-    const sourceButton = await screen.findByRole('button', {name: 'View source'});
-    await user.click(sourceButton);
-
-    expect(sourceButton).toHaveAttribute('aria-controls', 'workflow-source-panel');
-    expect(sourceButton).toHaveAttribute('aria-expanded', 'false');
-    expect(onSourceToggle).toHaveBeenCalledTimes(1);
-  });
-
   test('shows the selected attempt duration, not the top-level run duration', async () => {
     renderSummary({
       started_at: '2026-05-07T00:00:00.000Z',
@@ -168,7 +174,7 @@ describe('WorkflowRunSummary', () => {
     expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
   });
 
-  test('omits source control when source is unavailable', async () => {
+  test('does not render a whole-run source control', async () => {
     renderSummary();
 
     await screen.findByRole('region', {name: 'deploy-web'});

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

@@ -12,8 +12,9 @@ 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 type {Ref} from 'react';
+import {Link} from '@tanstack/react-router';
 import {useId} from 'react';
+import {WorkflowRunNumberLabel} from '#components/workflow-run-number-label.js';
 import {
   isWorkflowRunTerminal,
   type Job,
@@ -21,6 +22,7 @@ import {
   type WorkflowRunDetail,
   type WorkflowRunRerunMode,
 } 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';
@@ -32,14 +34,9 @@ const STATUS_BADGE_LABEL_WIDTH_CH = Math.max(
 type WorkflowRunAction = 'cancel' | 'rerun-all' | 'rerun-menu' | 'none';
 
 export interface WorkflowRunSummaryProps {
-  workspaceId?: string | undefined;
-  projectId?: string | undefined;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
   run: WorkflowRunDetail;
-  sourceAvailable?: boolean | undefined;
-  sourceOpen?: boolean | undefined;
-  sourcePanelId?: string | undefined;
-  sourceButtonRef?: Ref<HTMLButtonElement> | undefined;
-  onSourceToggle?: (() => void) | undefined;
   cancelling?: boolean | undefined;
   onCancel?: (() => void) | undefined;
   rerunPending?: boolean | undefined;
@@ -48,14 +45,9 @@ export interface WorkflowRunSummaryProps {
 }
 
 export function WorkflowRunSummary({
-  workspaceId,
-  projectId,
+  workspaceSlug,
+  projectSlug,
   run,
-  sourceAvailable = false,
-  sourceOpen = false,
-  sourcePanelId,
-  sourceButtonRef,
-  onSourceToggle,
   cancelling = false,
   onCancel,
   rerunPending = false,
@@ -65,9 +57,10 @@ export function WorkflowRunSummary({
   const headingId = useId();
   const status = getWorkflowStatusVisual(run.runAttempt.status);
   const action = workflowRunActionForRun(run);
+  const hasAction = canRenderWorkflowRunAction(action, onCancel, onRerun);
   const attemptSwitcher =
-    latestAttempt && latestAttempt > 1 && workspaceId && projectId
-      ? {workspaceId, projectId, latestAttempt}
+    latestAttempt && latestAttempt > 1 && workspaceSlug && projectSlug
+      ? {workspaceSlug, projectSlug, latestAttempt}
       : null;
   const displayDuration = run.runAttempt.displayDuration;
   const {ref: headingTextRef, isTruncated: isHeadingTruncated} =
@@ -75,68 +68,88 @@ export function WorkflowRunSummary({
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <section
-        aria-labelledby={headingId}
-        className="border-b border-border-neutral-base bg-background-subtle-base px-16 py-8"
-      >
-        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-12 gap-y-4 overflow-hidden">
-          <div className="col-start-1 row-start-1 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"
+      <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"
                   >
-                    {run.name}
-                  </span>
-                </Header>
-              </TooltipTrigger>
-              {isHeadingTruncated ? (
-                <TooltipContent>
-                  <Text as="span" size="xs" className="max-w-[360px] break-words">
-                    {run.name}
-                  </Text>
-                </TooltipContent>
+                    Runs
+                  </Link>
+                </li>
               ) : null}
-            </Tooltip>
-          </div>
+              {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-2 row-start-1 flex min-w-max items-center gap-6 justify-self-end">
-            <WorkflowRunActionSlot
-              action={action}
-              cancelling={cancelling}
-              onCancel={onCancel}
-              rerunPending={rerunPending}
-              onRerun={onRerun}
-            />
-            {sourceAvailable ? (
-              <Button
-                ref={sourceButtonRef}
-                type="button"
-                variant="secondary"
-                size="xs"
-                aria-controls={sourcePanelId}
-                aria-expanded={sourceOpen}
-                onClick={onSourceToggle}
-              >
-                View source
-              </Button>
+                <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>
+
+          {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">
+              <WorkflowRunActionSlot
+                action={action}
+                cancelling={cancelling}
+                onCancel={onCancel}
+                rerunPending={rerunPending}
+                onRerun={onRerun}
+              />
+            </div>
+          ) : null}
+
+          <div className="col-span-2 row-start-2 flex min-w-0 items-center gap-12 overflow-hidden text-foreground-neutral-subtle max-[480px]:col-span-1 max-[480px]:row-start-auto">
+            {run.number !== null ? (
+              <>
+                <WorkflowRunNumberLabel run={run} />
+                {attemptSwitcher || run.triggerDisplayLabel ? <MetadataSeparator /> : null}
+              </>
             ) : null}
-          </div>
 
-          <div className="col-span-2 row-start-2 flex min-w-0 items-center gap-12 overflow-hidden text-foreground-neutral-muted">
             {attemptSwitcher ? (
               <WorkflowRunAttemptSwitcher
-                workspaceId={attemptSwitcher.workspaceId}
-                projectId={attemptSwitcher.projectId}
+                workspaceSlug={attemptSwitcher.workspaceSlug}
+                projectSlug={attemptSwitcher.projectSlug}
                 run={run}
                 latestAttempt={attemptSwitcher.latestAttempt}
               />
@@ -151,7 +164,7 @@ export function WorkflowRunSummary({
                       <button
                         type="button"
                         aria-label={run.triggerLabel}
-                        className="inline-flex max-w-full min-w-0 items-center gap-4 rounded-6 border-0 bg-transparent p-0 text-left text-foreground-neutral-muted outline-none focus-visible:shadow-button-neutral-focus"
+                        className="inline-flex max-w-full min-w-0 cursor-help items-center gap-4 rounded-6 border-0 bg-transparent p-0 text-left text-foreground-neutral-subtle outline-none focus-visible:shadow-button-neutral-focus"
                       >
                         <TriggerSourceIcon
                           provider={run.triggerProvider}
@@ -174,10 +187,12 @@ export function WorkflowRunSummary({
               </>
             ) : null}
 
-            {attemptSwitcher || run.triggerDisplayLabel ? <MetadataSeparator /> : null}
+            {run.number !== null || attemptSwitcher || run.triggerDisplayLabel ? (
+              <MetadataSeparator />
+            ) : null}
             <RelativeTime
               value={run.runAttempt.createdAt}
-              className="shrink-0 whitespace-nowrap text-xs leading-20 text-foreground-neutral-muted"
+              className="shrink-0 whitespace-nowrap text-xs leading-20 text-foreground-neutral-subtle"
             />
 
             {displayDuration ? (
@@ -185,7 +200,7 @@ export function WorkflowRunSummary({
                 <MetadataSeparator />
                 <WorkflowRunDurationLabel
                   duration={displayDuration}
-                  className="text-foreground-neutral-muted"
+                  className="text-foreground-neutral-subtle"
                 />
               </>
             ) : null}
@@ -280,6 +295,16 @@ function workflowRunActionForRun(run: WorkflowRunDetail): WorkflowRunAction {
   return 'rerun-menu';
 }
 
+function canRenderWorkflowRunAction(
+  action: WorkflowRunAction,
+  onCancel: (() => void) | undefined,
+  onRerun: ((mode: WorkflowRunRerunMode) => void) | undefined,
+): boolean {
+  if (action === 'cancel') return onCancel !== undefined;
+  if (action === 'rerun-all' || action === 'rerun-menu') return onRerun !== undefined;
+  return false;
+}
+
 function hasFailedOrCancelledJobs(run: WorkflowRunDetail): boolean {
   if (!workflowRunHasJobs(run)) return false;
 
@@ -290,6 +315,6 @@ function workflowRunHasJobs(run: WorkflowRunDetail): run is WorkflowRunDetail &
   return 'jobs' in run && Array.isArray(run.jobs);
 }
 
-function MetadataSeparator() {
+export function MetadataSeparator() {
   return <span aria-hidden="true" className="h-12 w-px shrink-0 bg-border-neutral-base" />;
 }

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

@@ -0,0 +1,5 @@
+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-summary-line.test.tsx

@@ -0,0 +1,69 @@
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  RouterProvider,
+} from '@tanstack/react-router';
+import {act, render, screen} from '@testing-library/react';
+import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import type {WorkflowRunsSearch} from '#routes/inputs.js';
+import {RunAnnotationSummaryLine} from './run-annotation-summary-line.js';
+
+const ANNOTATION_SUMMARY: RunAnnotationSummary = {
+  total: 5,
+  error: 2,
+  warning: 1,
+  info: 2,
+  success: 0,
+};
+
+describe('RunAnnotationSummaryLine', () => {
+  test('links the severity breakdown into the Annotations panel', async () => {
+    await renderSummaryLine();
+
+    expect(screen.getByText('5 annotations')).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: '2 errors'})).toHaveAttribute(
+      'href',
+      '/w/acme/p/project/runs/run-1?tab=annotations&severity=error',
+    );
+  });
+
+  test('clears a stale annotation when linking to a severity', async () => {
+    await renderSummaryLine({annotation: 'annotation-old'});
+
+    expect(screen.getByRole('link', {name: '2 errors'})).toHaveAttribute(
+      'href',
+      '/w/acme/p/project/runs/run-1?tab=annotations&severity=error',
+    );
+  });
+});
+
+async function renderSummaryLine(search: WorkflowRunsSearch = {}) {
+  const rootRoute = createRootRoute({component: Outlet});
+  const runRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
+    component: () => (
+      <RunAnnotationSummaryLine
+        summary={ANNOTATION_SUMMARY}
+        workspaceSlug="acme"
+        projectSlug="project"
+        workflowRunId="run-1"
+        search={search}
+      />
+    ),
+  });
+  const router = createRouter({
+    history: createMemoryHistory({initialEntries: ['/w/acme/p/project/runs/run-1']}),
+    routeTree: rootRoute.addChildren([runRoute]),
+  });
+  await router.load();
+  let result: ReturnType<typeof render> | undefined;
+  await act(() => {
+    result = render(<RouterProvider router={router} />);
+  });
+  if (!result) throw new Error('Run annotation summary did not render.');
+  return result;
+}

package/src/components/workflow-run-tabs/run-annotation-summary-line.tsx

@@ -0,0 +1,97 @@
+import {Text} from '@shipfox/react-ui/typography';
+import {Link} from '@tanstack/react-router';
+import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import {
+  WORKFLOW_RUN_ANNOTATION_SEVERITIES,
+  type WorkflowRunAnnotationSeverity,
+  type WorkflowRunsSearch,
+  workflowRunSearchParams,
+} from '#routes/inputs.js';
+import {MetadataSeparator} from '../workflow-run-summary/workflow-run-summary.js';
+
+export interface RunAnnotationSummaryLineProps {
+  summary?: RunAnnotationSummary | undefined;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
+  workflowRunId?: string | undefined;
+  search?: WorkflowRunsSearch | undefined;
+}
+
+export function RunAnnotationSummaryLine({
+  summary,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  search = {},
+}: RunAnnotationSummaryLineProps) {
+  if (!summary) return null;
+
+  const visibleSeverities = WORKFLOW_RUN_ANNOTATION_SEVERITIES.filter(
+    (severity) => summary[severity] > 0,
+  );
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-8 gap-y-4 text-foreground-neutral-subtle">
+      <Text as="span" size="xs" className="shrink-0 text-foreground-neutral-subtle">
+        {summary.total} {pluralize('annotation', summary.total)}
+      </Text>
+      {visibleSeverities.map((severity) => (
+        <span key={severity} className="inline-flex shrink-0 items-center gap-8">
+          <MetadataSeparator />
+          <SeverityLink
+            count={summary[severity]}
+            severity={severity}
+            workspaceSlug={workspaceSlug}
+            projectSlug={projectSlug}
+            workflowRunId={workflowRunId}
+            search={search}
+          />
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function SeverityLink({
+  count,
+  severity,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  search,
+}: {
+  count: number;
+  severity: WorkflowRunAnnotationSeverity;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
+  workflowRunId?: string | undefined;
+  search: WorkflowRunsSearch;
+}) {
+  const label = `${count} ${pluralize(severity, count)}`;
+  if (!workspaceSlug || !projectSlug || !workflowRunId) {
+    return <span className="text-foreground-highlight-interactive">{label}</span>;
+  }
+
+  const searchWithoutAnnotation = {...search};
+  delete searchWithoutAnnotation.annotation;
+
+  return (
+    <Link
+      to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
+      params={{workspaceSlug, projectSlug, workflowRunId}}
+      search={
+        workflowRunSearchParams(
+          {...searchWithoutAnnotation, tab: 'annotations', severity},
+          search,
+        ) as never
+      }
+      className="text-foreground-highlight-interactive outline-none hover:underline focus-visible:shadow-border-interactive-with-active"
+    >
+      {label}
+    </Link>
+  );
+}
+
+function pluralize(word: string, count: number): string {
+  return count === 1 ? word : `${word}s`;
+}

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

@@ -0,0 +1,11 @@
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+
+export function RunAnnotationsEmpty() {
+  return (
+    <EmptyState
+      icon="fileDamageLine"
+      title="No annotations"
+      description="This run has no annotations to show."
+    />
+  );
+}