@shipfox/client-workflows 15.0.0 → 17.0.0

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

@@ -1,13 +1,28 @@
+import {MetadataSeparator} from '@shipfox/client-ui';
+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 type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
+import type {RunAnnotationSummary} from '#core/run-annotation.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';
+import {SEVERITY_ICON, SEVERITY_ICON_TONE} from './severity-visuals.js';
+
+/**
+ * The severities this line names.
+ *
+ * The line exists so a failing run cannot look clean while the explanation sits behind an
+ * inactive section, which makes its subject "what needs attention", not "what happened".
+ * `info` and `success` are already inside the total, and repeating them gives "nothing is
+ * wrong" the same weight and the same accent as "something failed".
+ */
+const ATTENTION_SEVERITIES = [
+  'error',
+  'warning',
+] as const satisfies readonly WorkflowRunAnnotationSeverity[];
 
 export interface RunAnnotationSummaryLineProps {
   summary?: RunAnnotationSummary | undefined;
@@ -24,22 +39,49 @@ export function RunAnnotationSummaryLine({
   workflowRunId,
   search = {},
 }: RunAnnotationSummaryLineProps) {
-  if (!summary) return null;
+  // A run with no annotations says so in its empty state; a "0 annotations" line beside it is
+  // the same fact twice.
+  if (!summary || summary.total === 0) return null;
 
-  const visibleSeverities = WORKFLOW_RUN_ANNOTATION_SEVERITIES.filter(
-    (severity) => summary[severity] > 0,
-  );
+  const visibleSeverities = ATTENTION_SEVERITIES.filter((severity) => summary[severity] > 0);
+
+  const totalLabel = countLabel(summary.total, 'annotation', summary.truncated);
 
   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>
+    <div className="flex flex-wrap items-center gap-x-inline gap-y-tight text-foreground-neutral-subtle">
+      {search.severity && workspaceSlug && projectSlug && workflowRunId ? (
+        // The severity filter has no control of its own, so while one is active the total is
+        // the way back out. Unfiltered it stays plain text: a link to where you already are
+        // is noise.
+        <Link
+          to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
+          params={{workspaceSlug, projectSlug, workflowRunId}}
+          search={
+            workflowRunSearchParams(
+              {...withoutSeverity(search), tab: 'annotations'},
+              search,
+            ) as never
+          }
+          aria-label={`Show all ${totalLabel}`}
+          className="shrink-0 rounded-4 outline-none focus-visible:shadow-border-interactive-with-active"
+        >
+          {/* Underlined rather than accented: the escape hatch has to read as a link without
+              becoming the loudest thing on a line whose job is to be scannable. */}
+          <Text as="span" size="xs" className="text-foreground-neutral-subtle underline">
+            {totalLabel}
+          </Text>
+        </Link>
+      ) : (
+        <Text as="span" size="xs" className="shrink-0 text-foreground-neutral-subtle">
+          {totalLabel}
+        </Text>
+      )}
       {visibleSeverities.map((severity) => (
-        <span key={severity} className="inline-flex shrink-0 items-center gap-8">
+        <span key={severity} className="inline-flex shrink-0 items-center gap-inline">
           <MetadataSeparator />
           <SeverityLink
             count={summary[severity]}
+            truncated={summary.truncated}
             severity={severity}
             workspaceSlug={workspaceSlug}
             projectSlug={projectSlug}
@@ -54,6 +96,7 @@ export function RunAnnotationSummaryLine({
 
 function SeverityLink({
   count,
+  truncated,
   severity,
   workspaceSlug,
   projectSlug,
@@ -61,19 +104,33 @@ function SeverityLink({
   search,
 }: {
   count: number;
+  truncated: boolean;
   severity: WorkflowRunAnnotationSeverity;
   workspaceSlug?: string | undefined;
   projectSlug?: string | undefined;
   workflowRunId?: string | undefined;
   search: WorkflowRunsSearch;
 }) {
-  const label = `${count} ${pluralize(severity, count)}`;
+  const label = countLabel(count, severity, truncated);
+  const content = (
+    <>
+      <Icon
+        name={SEVERITY_ICON[severity]}
+        size={12}
+        aria-hidden="true"
+        className={cn('shrink-0', SEVERITY_ICON_TONE[severity])}
+      />
+      <Text as="span" size="xs" className="text-foreground-neutral-subtle">
+        {label}
+      </Text>
+    </>
+  );
+
   if (!workspaceSlug || !projectSlug || !workflowRunId) {
-    return <span className="text-foreground-highlight-interactive">{label}</span>;
+    return <span className="inline-flex items-center gap-tight">{content}</span>;
   }
 
-  const searchWithoutAnnotation = {...search};
-  delete searchWithoutAnnotation.annotation;
+  const searchWithoutAnnotation = withoutAnnotation(search);
 
   return (
     <Link
@@ -85,13 +142,31 @@ function SeverityLink({
           search,
         ) as never
       }
-      className="text-foreground-highlight-interactive outline-none hover:underline focus-visible:shadow-border-interactive-with-active"
+      className="inline-flex items-center gap-tight rounded-4 outline-none hover:underline focus-visible:shadow-border-interactive-with-active"
     >
-      {label}
+      {content}
     </Link>
   );
 }
 
-function pluralize(word: string, count: number): string {
-  return count === 1 ? word : `${word}s`;
+/** A selected annotation is stale the moment the list it was chosen from is refiltered. */
+function withoutAnnotation(search: WorkflowRunsSearch): WorkflowRunsSearch {
+  const next = {...search};
+  delete next.annotation;
+  return next;
+}
+
+function withoutSeverity(search: WorkflowRunsSearch): WorkflowRunsSearch {
+  const next = withoutAnnotation(search);
+  delete next.severity;
+  return next;
+}
+
+/**
+ * A truncated read renders `500+ annotations`: the counts are a lower bound once the page budget
+ * is hit, and presenting them as exact would understate a run the reader is trying to trust.
+ */
+function countLabel(count: number, word: string, truncated: boolean): string {
+  const plural = count === 1 && !truncated ? word : `${word}s`;
+  return `${count}${truncated ? '+' : ''} ${plural}`;
 }

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

@@ -0,0 +1,293 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import type {ReactNode} from 'react';
+import {
+  buildRunAnnotationList,
+  type RunAnnotationRecord,
+  type RunAnnotationStyle,
+  summarizeRunAnnotations,
+} from '#core/run-annotation.js';
+import type {Job} from '#core/workflow-run.js';
+import {
+  workflowJob,
+  workflowJobExecutionDto,
+  workflowStepAttemptDto,
+  workflowStepDto,
+} from '#test/fixtures/workflow-run.js';
+import {RunAnnotationCountChip} from './run-annotation-count-chip.js';
+import {RunAnnotationList, type RunAnnotationListQuery} from './run-annotation-list.js';
+import {RunAnnotationSummaryLine} from './run-annotation-summary-line.js';
+
+const WORKSPACE_SLUG = 'acme';
+const PROJECT_SLUG = 'platform';
+const RUN_ID = '11111111-1111-4111-8111-111111111111';
+const BUILD_JOB_ID = '44444444-4444-4444-8444-00000000000b';
+const TEST_JOB_ID = '44444444-4444-4444-8444-00000000000c';
+const BUILD_EXECUTION_ID = '77777777-7777-4777-8777-00000000000b';
+const TEST_EXECUTION_ID = '77777777-7777-4777-8777-00000000000c';
+const BUILD_STEP_ID = '55555555-5555-4555-8555-00000000000b';
+const TEST_STEP_ID = '55555555-5555-4555-8555-00000000000c';
+const BUILD_ATTEMPT_ID = '66666666-6666-4666-8666-00000000000b';
+const TEST_ATTEMPT_ID = '66666666-6666-4666-8666-00000000000c';
+
+const LONG_BODY = [
+  '### Failing specs',
+  '',
+  ...Array.from(
+    {length: 40},
+    (_unused, index) => `- \`packages/web/src/route-${index}.test.ts\` expected 200, received 503`,
+  ),
+].join('\n');
+
+const meta = {
+  title: 'Workflows/RunAnnotations',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => {
+    const annotations = [
+      annotation({
+        id: 'a1',
+        context: 'smoke check',
+        style: 'error',
+        sequence: 3,
+        body: 'Task nine failed the smoke check against `https://preview.example.com`.\n\n```sh\ncurl -sSf https://preview.example.com/healthz\n```',
+      }),
+      annotation({
+        id: 'a2',
+        context: 'flaky tests',
+        style: 'warning',
+        sequence: 1,
+        jobId: TEST_JOB_ID,
+        jobExecutionId: TEST_EXECUTION_ID,
+        originStepId: TEST_STEP_ID,
+        body: '2 specs retried before passing.\n\n| Spec | Retries |\n| --- | --- |\n| `checkout.spec.ts` | 1 |\n| `billing.spec.ts` | 2 |',
+      }),
+      annotation({
+        id: 'a3',
+        context: 'deploy',
+        style: 'success',
+        sequence: 2,
+        body: 'Deployed **v42** to staging: [preview](https://preview.example.com)',
+      }),
+      annotation({
+        id: 'a4',
+        context: 'coverage',
+        style: 'info',
+        sequence: 4,
+        body: 'Line coverage held at 87.4%.',
+      }),
+    ];
+
+    return <AnnotationsFrame annotations={annotations} />;
+  },
+};
+
+export const BoundedBody: Story = {
+  // The only story in this package that earns a second Argos mode. The clamp's fade is the one
+  // gradient in the client, and it blends a surface token that flips with the theme, so a
+  // dark-only capture would never catch it breaking on a light card.
+  parameters: {
+    argos: {modes: {dark: {theme: 'dark'}, light: {theme: 'light'}}},
+  },
+  render: () => (
+    <AnnotationsFrame
+      annotations={[
+        annotation({id: 'long', context: 'test results', style: 'error', body: LONG_BODY}),
+      ]}
+    />
+  ),
+};
+
+export const DataStates: Story = {
+  render: () => {
+    const loaded = [annotation({id: 'a1', context: 'deploy', style: 'success'})];
+    return (
+      <div className="grid max-w-[1120px] gap-16 p-16 md:grid-cols-2">
+        <StateExample label="Loading">
+          <AnnotationsList annotations={[]} query={storyQuery({isPending: true})} />
+        </StateExample>
+        <StateExample label="Empty">
+          <AnnotationsList annotations={[]} />
+        </StateExample>
+        <StateExample label="Error">
+          <AnnotationsList
+            annotations={[]}
+            query={storyQuery({isError: true, data: undefined, error: new Error('Storybook')})}
+          />
+        </StateExample>
+        <StateExample label="Stale">
+          <AnnotationsList
+            annotations={loaded}
+            query={storyQuery({isError: true, error: new Error('Storybook')})}
+          />
+        </StateExample>
+        <StateExample label="Filtered miss">
+          <AnnotationsList annotations={[]} filtered filteredJobName="build" />
+        </StateExample>
+        <StateExample label="Truncated counts">
+          <RunAnnotationSummaryLine
+            summary={{...summarizeRunAnnotations(loaded), total: 500, error: 12, truncated: true}}
+            workspaceSlug={WORKSPACE_SLUG}
+            projectSlug={PROJECT_SLUG}
+            workflowRunId={RUN_ID}
+          />
+        </StateExample>
+      </div>
+    );
+  },
+};
+
+export const CountChips: Story = {
+  render: () => (
+    <div className="flex max-w-[1120px] flex-wrap items-center gap-12 p-16">
+      {(['error', 'warning', 'info', 'success'] as const).map((style) => (
+        <RunAnnotationCountChip
+          key={style}
+          summary={summarizeRunAnnotations([annotation({id: style, context: style, style})])}
+          workspaceSlug={WORKSPACE_SLUG}
+          projectSlug={PROJECT_SLUG}
+          workflowRunId={RUN_ID}
+          jobId={BUILD_JOB_ID}
+        />
+      ))}
+      <RunAnnotationCountChip
+        summary={{total: 500, error: 12, warning: 3, info: 0, success: 0, truncated: true}}
+        workspaceSlug={WORKSPACE_SLUG}
+        projectSlug={PROJECT_SLUG}
+        workflowRunId={RUN_ID}
+      />
+    </div>
+  ),
+};
+
+function AnnotationsFrame({annotations}: {annotations: RunAnnotationRecord[]}) {
+  return (
+    <div className="min-h-screen bg-background-neutral-base py-16">
+      <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24">
+        <RunAnnotationSummaryLine
+          summary={summarizeRunAnnotations(annotations)}
+          workspaceSlug={WORKSPACE_SLUG}
+          projectSlug={PROJECT_SLUG}
+          workflowRunId={RUN_ID}
+        />
+        <AnnotationsList annotations={annotations} />
+      </div>
+    </div>
+  );
+}
+
+function AnnotationsList({
+  annotations,
+  query = storyQuery(),
+  filtered = false,
+  filteredJobName,
+}: {
+  annotations: RunAnnotationRecord[];
+  query?: RunAnnotationListQuery;
+  filtered?: boolean;
+  filteredJobName?: string;
+}) {
+  return (
+    <RunAnnotationList
+      query={query}
+      entries={query.data === undefined ? undefined : buildRunAnnotationList({annotations, jobs})}
+      workspaceSlug={WORKSPACE_SLUG}
+      projectSlug={PROJECT_SLUG}
+      workflowRunId={RUN_ID}
+      runAttempt={1}
+      filtered={filtered}
+      filteredJobName={filteredJobName}
+      onClearFilters={() => undefined}
+    />
+  );
+}
+
+function StateExample({label, children}: {label: string; children: ReactNode}) {
+  return (
+    <div className="flex flex-col gap-8">
+      <span className="text-xs font-medium text-foreground-neutral-muted">{label}</span>
+      {children}
+    </div>
+  );
+}
+
+function storyQuery(overrides: Partial<RunAnnotationListQuery> = {}): RunAnnotationListQuery {
+  return {
+    isPending: false,
+    isError: false,
+    isFetching: false,
+    data: {pages: []},
+    error: null,
+    refetch: () => undefined,
+    hasNextPage: false,
+    isFetchingNextPage: false,
+    fetchNextPage: () => undefined,
+    ...overrides,
+  };
+}
+
+function annotation(
+  overrides: Partial<RunAnnotationRecord> & {id: string; style: RunAnnotationStyle},
+): RunAnnotationRecord {
+  return {
+    jobId: BUILD_JOB_ID,
+    jobExecutionId: BUILD_EXECUTION_ID,
+    originStepId: BUILD_STEP_ID,
+    originStepAttempt: 1,
+    context: 'default',
+    sequence: 1,
+    body: 'Body',
+    ...overrides,
+  };
+}
+
+const jobs: Job[] = [
+  workflowJob({
+    id: BUILD_JOB_ID,
+    key: 'build',
+    name: 'build',
+    position: 0,
+    job_executions: [
+      workflowJobExecutionDto({
+        id: BUILD_EXECUTION_ID,
+        job_id: BUILD_JOB_ID,
+        steps: [
+          workflowStepDto({
+            id: BUILD_STEP_ID,
+            name: 'run smoke checks',
+            attempts: [
+              workflowStepAttemptDto({id: BUILD_ATTEMPT_ID, step_id: BUILD_STEP_ID, attempt: 1}),
+            ],
+          }),
+        ],
+      }),
+    ],
+  }),
+  workflowJob({
+    id: TEST_JOB_ID,
+    key: 'test',
+    name: 'test',
+    position: 1,
+    job_executions: [
+      workflowJobExecutionDto({
+        id: TEST_EXECUTION_ID,
+        job_id: TEST_JOB_ID,
+        steps: [
+          workflowStepDto({
+            id: TEST_STEP_ID,
+            name: 'vitest',
+            attempts: [
+              workflowStepAttemptDto({id: TEST_ATTEMPT_ID, step_id: TEST_STEP_ID, attempt: 1}),
+            ],
+          }),
+        ],
+      }),
+    ],
+  }),
+];

package/src/components/workflow-run-tabs/severity-visuals.ts

@@ -0,0 +1,37 @@
+import type {IconName} from '@shipfox/react-ui/icon';
+import type {RunAnnotationSeverity} from '#core/run-annotation.js';
+
+/**
+ * The glyph vocabulary for annotation severity, shared by every count surface.
+ *
+ * Deliberately the same marks the `Callout` uses on the cards themselves, so the glyph beside
+ * `1 error` in the summary is the glyph on the error card below it.
+ */
+export const SEVERITY_ICON: Record<RunAnnotationSeverity, IconName> = {
+  error: 'closeCircleFill',
+  warning: 'errorWarningFill',
+  info: 'info',
+  success: 'checkboxCircleFill',
+};
+
+/**
+ * Severity tone lives in the glyph, never in the label.
+ *
+ * Coloring the text would make severity compete with the brand accent, which this system
+ * reserves for links, focus, and "you are here". Shape plus tone in a 12px mark distinguishes
+ * an error from a warning without either of them shouting.
+ */
+export const SEVERITY_ICON_TONE: Record<RunAnnotationSeverity, string> = {
+  error: 'text-tag-error-icon',
+  warning: 'text-tag-warning-icon',
+  info: 'text-tag-blue-icon',
+  success: 'text-tag-success-icon',
+};
+
+/** Hairline tone for a bordered count chip, matching the glyph it sits beside. */
+export const SEVERITY_CHIP_TONE: Record<RunAnnotationSeverity, string> = {
+  error: 'border-tag-error-border text-tag-error-icon',
+  warning: 'border-tag-warning-border text-tag-warning-icon',
+  info: 'border-tag-blue-border text-tag-blue-icon',
+  success: 'border-tag-success-border text-tag-success-icon',
+};

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

@@ -27,6 +27,50 @@ describe('RunWorkspaceNav', () => {
     vi.useRealTimers();
   });
 
+  test('announces the annotation count with its unit and marks a truncated read', async () => {
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [workflowJobDto({id: CURRENT_JOB_ID, name: 'build', position: 0})],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+        annotationSummary={{
+          total: 500,
+          error: 12,
+          warning: 3,
+          info: 0,
+          success: 0,
+          truncated: true,
+        }}
+      />,
+    );
+
+    expect(await screen.findByRole('link', {name: 'Annotations, 500 or more'})).toBeVisible();
+  });
+
+  test('omits the annotation count until the read resolves', async () => {
+    const run = workflowRunDetail({
+      id: RUN_ID,
+      jobs: [workflowJobDto({id: CURRENT_JOB_ID, name: 'build', position: 0})],
+    });
+
+    renderWithRouter(
+      <RunWorkspaceNav
+        workspaceSlug="acme"
+        projectSlug="project"
+        run={run}
+        activeSection="summary"
+      />,
+    );
+
+    expect(await screen.findByRole('link', {name: 'Annotations'})).toBeVisible();
+  });
+
   test('shows the complete run hierarchy and marks the current job', async () => {
     const run = workflowRunDetail({
       id: RUN_ID,

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

@@ -6,13 +6,13 @@ import {cn} from '@shipfox/react-ui/utils';
 import {Link} from '@tanstack/react-router';
 import {useEffect, useMemo, useRef, useState} from 'react';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
+import type {RunAnnotationSummary} from '#core/run-annotation.js';
 import {
   defaultJobExecution,
   deriveJobDisplayStatus,
   type Job,
   type WorkflowRunDetail,
 } from '#core/workflow-run.js';
-import type {RunAnnotationSummary} from '#core/workflow-run-tabs.js';
 import {
   type WorkflowJobSearch,
   type WorkflowRunTab,
@@ -58,7 +58,7 @@ export function RunWorkspaceNav({
           <CollapsibleTrigger asChild>
             <button
               type="button"
-              className="flex min-h-44 w-full items-center justify-between gap-12 px-16 text-left outline-none focus-visible:shadow-border-interactive-with-active min-[768px]:hidden"
+              className="flex min-h-44 w-full items-center justify-between gap-cluster px-row text-left outline-none focus-visible:shadow-border-interactive-with-active min-[768px]:hidden"
               aria-label="Toggle run navigation"
             >
               <span className="min-w-0">
@@ -82,7 +82,7 @@ export function RunWorkspaceNav({
           </CollapsibleTrigger>
           <div
             className={cn(
-              'max-h-[50vh] overflow-y-auto p-8 min-[768px]:block min-[768px]:max-h-none min-[768px]:p-12',
+              'max-h-[50vh] overflow-y-auto p-tight min-[768px]:block min-[768px]:max-h-none min-[768px]:p-[12px]',
               !mobileOpen && 'hidden',
             )}
           >
@@ -136,7 +136,7 @@ function RunWorkspaceNavContent({
   }, [currentJobId, mobileOpen]);
 
   return (
-    <nav aria-label="Run workspace" className="flex min-w-0 flex-col gap-16">
+    <nav aria-label="Run workspace" className="flex min-w-0 flex-col gap-group">
       <ul>
         <li>
           <RunSectionLink
@@ -152,7 +152,7 @@ function RunWorkspaceNavContent({
       </ul>
 
       <section aria-labelledby="run-workspace-jobs-heading" className="min-w-0">
-        <div className="flex items-center justify-between gap-8 px-8 pb-6">
+        <div className="flex items-center justify-between gap-inline px-tight pb-[6px]">
           <Text
             as="h2"
             id="run-workspace-jobs-heading"
@@ -182,7 +182,7 @@ function RunWorkspaceNavContent({
                   onClick={onNavigate}
                   aria-current={current ? 'page' : undefined}
                   className={cn(
-                    'flex min-h-32 min-w-0 items-center gap-8 rounded-4 px-8 text-left outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
+                    'flex min-h-32 min-w-0 items-center gap-inline rounded-4 px-tight text-left outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
                     current && 'bg-background-neutral-hover',
                   )}
                 >
@@ -210,7 +210,7 @@ function RunWorkspaceNavContent({
           id="run-workspace-details-heading"
           size="xs"
           bold
-          className="px-8 pb-6 text-foreground-neutral-muted"
+          className="px-tight pb-[6px] text-foreground-neutral-muted"
         >
           Run details
         </Text>
@@ -224,6 +224,7 @@ function RunWorkspaceNavContent({
               section="annotations"
               current={!currentJobId && activeSection === 'annotations'}
               count={annotationSummary?.total}
+              countTruncated={annotationSummary?.truncated}
               onNavigate={onNavigate}
             />
           </li>
@@ -252,6 +253,7 @@ function RunSectionLink({
   section,
   current,
   count,
+  countTruncated = false,
   onNavigate,
 }: {
   workspaceSlug: string;
@@ -261,6 +263,8 @@ function RunSectionLink({
   section: RunWorkspaceSection;
   current: boolean;
   count?: number | undefined;
+  /** The read hit its page budget, so the count is a lower bound and renders as `N+`. */
+  countTruncated?: boolean | undefined;
   onNavigate?: (() => void) | undefined;
 }) {
   return (
@@ -275,15 +279,24 @@ function RunSectionLink({
       }
       onClick={onNavigate}
       aria-current={current ? 'page' : undefined}
+      aria-label={
+        count
+          ? `${sectionLabel(section)}, ${countTruncated ? `${count} or more` : count}`
+          : undefined
+      }
       className={cn(
-        'flex min-h-32 items-center gap-8 rounded-4 px-8 text-xs font-medium text-foreground-neutral-base outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
+        'flex min-h-32 items-center gap-inline rounded-4 px-tight text-xs font-medium text-foreground-neutral-base outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
         current && 'bg-background-neutral-hover',
       )}
     >
       {sectionLabel(section)}
       {count ? (
-        <span className="ml-auto font-code text-xs text-foreground-neutral-muted tabular-nums">
+        <span
+          aria-hidden="true"
+          className="ml-auto font-code text-xs text-foreground-neutral-muted tabular-nums"
+        >
           {count}
+          {countTruncated ? '+' : ''}
         </span>
       ) : null}
     </Link>