@shipfox/client-workflows 12.0.2 → 13.0.0

package/src/components/workflow-run-list/workflow-run-row.tsx

@@ -1,4 +1,5 @@
 import {TriggerSourceIcon} from '@shipfox/client-triggers';
+import {Icon, type IconName} from '@shipfox/react-ui/icon';
 import {RelativeTime} from '@shipfox/react-ui/relative-time';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Code, Text} from '@shipfox/react-ui/typography';
@@ -8,169 +9,235 @@ import {
   useWorkflowRunDurationAccessibleLabel,
   WorkflowRunDurationLabel,
 } from '#components/workflow-run-duration-label.js';
+import {
+  formatWorkflowRunNumberLabel,
+  WorkflowRunNumberLabel,
+} from '#components/workflow-run-number-label.js';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
-import type {WorkflowRunListItem} from '#core/workflow-run.js';
+import {
+  type WorkflowRunListItem,
+  workflowRunActor,
+  workflowRunBranchLabel,
+  workflowRunCommitLabel,
+} from '#core/workflow-run.js';
 import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
+import {JobStatusStrip, jobStatusSummary} from './job-status-strip.js';
 
 export function WorkflowRunRowList({
   runs,
-  workspaceId,
-  projectId,
-  selectedWorkflowRunId,
+  workspaceSlug,
+  projectSlug,
 }: {
   runs: WorkflowRunListItem[];
-  workspaceId: string;
-  projectId: string;
-  selectedWorkflowRunId?: string | undefined;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
 }) {
   return (
-    <nav aria-label="Run history">
-      <ul className="flex flex-col gap-4 p-8">
-        {runs.map((run) => (
-          <li key={run.id}>
-            <WorkflowRunRow
-              run={run}
-              workspaceId={workspaceId}
-              projectId={projectId}
-              selected={run.id === selectedWorkflowRunId}
-            />
-          </li>
-        ))}
-      </ul>
-    </nav>
+    // A container, not the viewport, drives the row's breakpoints. The list is capped at
+    // 1120px inside a wider page, so what a row can afford is its own width; keying off the
+    // viewport would keep the job strip hidden on a wide screen or crush it on a narrow one.
+    <ul className="@container divide-y divide-border-neutral-base border-t border-border-neutral-base">
+      {runs.map((run) => (
+        <li key={run.id}>
+          <WorkflowRunRow run={run} workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
+        </li>
+      ))}
+    </ul>
   );
 }
 
+/**
+ * One run at full width.
+ *
+ * A single 44px line once the list is at least 976px wide, reflowing to two lines below that:
+ * the identity and the numerics keep their places on line one, and the provenance metadata
+ * drops beneath. The numeric columns are fixed-width so duration and time form real columns
+ * down the list rather than tracking each row's name length.
+ *
+ * The thresholds are the container widths the spec's viewport breakpoints produce, given a
+ * column capped at 1120px with 24px of page padding on each side: a 1280px viewport leaves
+ * the row 1072px, and a 1024px viewport leaves it 976px.
+ */
 export function WorkflowRunRow({
   run,
-  workspaceId,
-  projectId,
-  selected,
+  workspaceSlug,
+  projectSlug,
 }: {
   run: WorkflowRunListItem;
-  workspaceId: string;
-  projectId: string;
-  selected: boolean;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
 }) {
   const durationLabel = useWorkflowRunDurationAccessibleLabel(run.runAttempt.displayDuration);
   const statusLabel = getWorkflowStatusVisual(run.status).label;
+  const runNumberLabel = formatWorkflowRunNumberLabel(run);
+  const branch = workflowRunBranchLabel(run);
+  const commit = workflowRunCommitLabel(run);
+  const actor = workflowRunActor(run);
+
   const body = (
     <>
-      {selected ? (
-        <span
-          aria-hidden="true"
-          className="absolute inset-y-8 left-0 w-3 rounded-full bg-border-highlights-interactive"
-        />
-      ) : null}
-
-      <div className="flex min-w-0 items-center gap-8">
-        <WorkflowStatusIcon status={run.status} size={14} />
-        <Code variant="label" bold className="truncate text-foreground-neutral-base">
-          {run.name}
-        </Code>
-      </div>
+      <WorkflowStatusIcon status={run.status} size={14} className="shrink-0" />
 
-      <div className="flex min-w-0 items-center gap-8">
-        {run.triggerDisplayLabel ? (
-          <TriggerLabel run={run} />
-        ) : (
-          <span className="flex min-w-0 flex-1 items-center gap-8 truncate text-foreground-neutral-muted">
-            <span aria-hidden="true" className="size-14 shrink-0" />
-            <span className="sr-only">Run updated </span>
-          </span>
-        )}
-        <span className="ml-auto flex shrink-0 items-center gap-6">
-          <WorkflowRunDurationLabel
-            duration={run.runAttempt.displayDuration}
-            className="text-foreground-neutral-disabled"
-          />
-          {durationLabel ? <RunMetadataSeparator /> : null}
-          <Code variant="label" className="shrink-0 text-foreground-neutral-disabled">
-            <RelativeTime value={run.updatedAt} />
+      <div className="flex min-w-0 flex-1 flex-col gap-2 @min-[976px]:flex-row @min-[976px]:items-center @min-[976px]:gap-12">
+        <span className="flex min-w-0 items-center gap-8 @min-[976px]:flex-1">
+          <Code variant="label" bold className="truncate text-foreground-neutral-base">
+            {run.name}
           </Code>
+          {run.number !== null ? <WorkflowRunNumberLabel run={run} /> : null}
+        </span>
+
+        <span className="flex min-w-0 flex-wrap items-center gap-10 text-foreground-neutral-subtle @min-[976px]:flex-nowrap @min-[976px]:shrink-0">
+          {run.triggerDisplayLabel ? <TriggerLabel run={run} /> : null}
+          {branch ? <BranchLabel branch={branch} isPullRequest={branch.startsWith('#')} /> : null}
+          {commit ? <CommitLabel commit={commit} /> : null}
+          {actor ? <ActorLabel actor={actor} /> : null}
         </span>
       </div>
+
+      <span className="flex shrink-0 items-center gap-12">
+        {/* Fixed at the strip's worst case (see MAX_VISIBLE_JOBS) so the overflow count cannot
+            paint over the duration, and kept even when a run has no jobs planned yet, so the
+            numerics stay in line down the list instead of stepping in and out. */}
+        <span className="hidden w-160 @min-[1040px]:flex">
+          <JobStatusStrip jobs={run.jobs} />
+        </span>
+        <span className="flex w-64 justify-end">
+          <WorkflowRunDurationLabel duration={run.runAttempt.displayDuration} />
+        </span>
+        <Code
+          variant="label"
+          className="w-64 shrink-0 text-right tabular-nums text-foreground-neutral-muted"
+        >
+          <RelativeTime value={run.createdAt} />
+        </Code>
+      </span>
     </>
   );
 
+  // Rows run edge to edge inside the list's scroll container, which would clip the standard
+  // outset focus ring, so this one is inset per the design system's focus-ring rule.
+  const rowClassName =
+    'flex w-full min-w-0 items-center gap-10 px-12 py-8 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-[inset_0_0_0_2px_var(--color-primary-500)] focus-visible:outline-none @min-[976px]:h-44 @min-[976px]:py-0';
+
   // Optimistic manual runs (temp-<uuid>) have no detail page until the canonical row
   // replaces them on the next poll, so they render non-interactively instead of as a link
   // that would navigate to a workflow run id the detail route rejects.
-  if (run.isTemporary) {
-    return (
-      <div className="relative flex w-full flex-col gap-4 rounded-8 border border-transparent px-10 py-8 text-left">
-        {body}
-      </div>
-    );
+  if (run.isTemporary || !workspaceSlug || !projectSlug) {
+    return <div className={rowClassName}>{body}</div>;
   }
 
-  const runLink = (
+  return (
     <Link
-      to="/workspaces/$wid/projects/$pid/runs/$workflowRunId"
-      params={{wid: workspaceId, pid: projectId, workflowRunId: run.id}}
+      to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
+      params={{workspaceSlug, projectSlug, workflowRunId: run.id}}
       search={
         ((previous: Record<string, unknown>) =>
           withoutWorkflowRunSelectionSearch(previous)) as never
       }
-      aria-current={selected ? 'page' : undefined}
-      aria-label={[run.name, statusLabel, durationLabel, run.triggerLabel]
+      // An aria-label is the link's whole accessible name, so anything inside the row that
+      // carries its own label (the status glyph, the job strip) goes unspoken unless it is
+      // curated in here. The job breakdown is the reason this list is worth its width, so it
+      // belongs in what a tabbing user hears, not only in browse mode.
+      aria-label={[
+        run.name,
+        runNumberLabel,
+        statusLabel,
+        durationLabel,
+        run.triggerLabel,
+        branch ? `branch ${branch}` : undefined,
+        actor ? `by ${actor}` : undefined,
+        run.jobs.total > 0 ? jobStatusSummary(run.jobs) : undefined,
+      ]
         .filter((part): part is string => Boolean(part))
         .join(', ')}
-      className={cn(
-        'group relative flex w-full flex-col gap-4 rounded-8 border border-transparent px-10 py-8 text-left transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none',
-        selected && 'bg-background-components-hover',
-      )}
+      className={rowClassName}
     >
       {body}
     </Link>
   );
-
-  return runLink;
 }
 
 function TriggerLabel({run}: {run: WorkflowRunListItem}) {
   return (
-    <span className="flex min-w-0 flex-1 items-center">
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className="flex w-fit max-w-full min-w-0 items-center gap-8 rounded-6 outline-none">
-            <TriggerSourceIcon
-              provider={run.triggerProvider}
-              source={run.triggerSource}
-              aria-hidden
-              className="size-14 shrink-0 text-foreground-neutral-muted"
-            />
-            <Text as="span" size="xs" className="min-w-0 truncate text-foreground-neutral-subtle">
-              {run.triggerDisplayLabel}
-            </Text>
-          </span>
-        </TooltipTrigger>
-        <TriggerTooltip label={run.triggerLabel} />
-      </Tooltip>
-    </span>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="flex min-w-0 max-w-[140px] items-center gap-6 outline-none">
+          <TriggerSourceIcon
+            provider={run.triggerProvider}
+            source={run.triggerSource}
+            aria-hidden="true"
+            className="size-12 shrink-0 text-foreground-neutral-muted"
+          />
+          <Text as="span" size="xs" className="min-w-0 truncate">
+            {run.triggerDisplayLabel}
+          </Text>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <Text as="span" size="xs" className="block max-w-[360px] break-words">
+          {run.triggerLabel}
+        </Text>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function BranchLabel({branch, isPullRequest}: {branch: string; isPullRequest: boolean}) {
+  return (
+    <MetadataChip
+      icon={isPullRequest ? 'gitPullRequestLine' : 'gitBranchLine'}
+      title={isPullRequest ? `Pull request ${branch}` : `Branch ${branch}`}
+      className="max-w-[180px]"
+    >
+      {branch}
+    </MetadataChip>
   );
 }
 
-function TriggerTooltip({label}: {label: string}) {
+function CommitLabel({commit}: {commit: string}) {
   return (
-    <TooltipContent>
-      <Text as="span" size="xs" className="block max-w-[360px] break-words">
-        {label}
-      </Text>
-    </TooltipContent>
+    <MetadataChip icon="gitCommitLine" title={`Commit ${commit}`}>
+      {commit}
+    </MetadataChip>
   );
 }
 
-function RunMetadataSeparator() {
+function ActorLabel({actor}: {actor: string}) {
   return (
-    <Code
-      as="span"
-      variant="label"
-      aria-hidden="true"
-      className="shrink-0 text-foreground-neutral-disabled"
+    <MetadataChip
+      icon="userLine"
+      title={`Triggered by ${actor}`}
+      // Dropped once the row is two lines, where the provenance line has to stay readable on
+      // a phone.
+      className="hidden max-w-[120px] @min-[976px]:flex"
     >
-      ·
-    </Code>
+      {actor}
+    </MetadataChip>
+  );
+}
+
+/**
+ * A ref, SHA, or handle: monospace because it is content a user copies or pattern-matches,
+ * with the icon carrying the kind so the value itself never needs a written label.
+ */
+function MetadataChip({
+  icon,
+  title,
+  className,
+  children,
+}: {
+  icon: IconName;
+  title: string;
+  className?: string | undefined;
+  children: string;
+}) {
+  return (
+    <span className={cn('flex min-w-0 shrink-0 items-center gap-4', className)} title={title}>
+      <Icon name={icon} className="size-12 shrink-0 text-foreground-neutral-muted" aria-hidden />
+      <Code as="span" variant="label" className="min-w-0 truncate">
+        {children}
+      </Code>
+    </span>
   );
 }

package/src/components/workflow-run-number-label.test.tsx

@@ -0,0 +1,45 @@
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {formatWorkflowRunNumberLabel, WorkflowRunNumberLabel} from './workflow-run-number-label.js';
+
+describe('WorkflowRunNumberLabel', () => {
+  test('formats the workflow name and run number together', () => {
+    expect(formatWorkflowRunNumberLabel({workflowName: 'CI', number: 5184})).toBe('CI #5184');
+  });
+
+  test('shows the bare number when the run name already says the workflow name', () => {
+    render(<WorkflowRunNumberLabel run={{name: 'CI', workflowName: 'CI', number: 5184}} />);
+
+    expect(screen.getByText('#5184')).toBeInTheDocument();
+    expect(screen.queryByText('CI #5184')).not.toBeInTheDocument();
+  });
+
+  test('keeps the workflow name when the run carries a different one', () => {
+    render(
+      <WorkflowRunNumberLabel
+        run={{name: 'Deploy production', workflowName: 'CI', number: 5184}}
+      />,
+    );
+
+    expect(screen.getByText('CI #5184')).toBeInTheDocument();
+  });
+
+  test('does not render before a server run number is available', () => {
+    const {container} = render(<WorkflowRunNumberLabel run={{workflowName: 'CI', number: null}} />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('provides a tooltip for long workflow labels', async () => {
+    const user = userEvent.setup();
+    const label = 'release-production-multi-region-with-canary-and-smoke-tests #5184';
+    render(<WorkflowRunNumberLabel run={{workflowName: label.slice(0, -6), number: 5184}} />);
+
+    const visibleLabel = screen.getByText(label);
+    expect(visibleLabel).toHaveClass('max-w-[240px]', 'truncate');
+
+    await user.hover(visibleLabel);
+
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(label);
+  });
+});

package/src/components/workflow-run-number-label.tsx

@@ -0,0 +1,47 @@
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Code} from '@shipfox/react-ui/typography';
+import type {WorkflowRun} from '#core/workflow-run.js';
+
+type WorkflowRunNumberLabelRun = Pick<WorkflowRun, 'number' | 'workflowName'> &
+  Partial<Pick<WorkflowRun, 'name'>>;
+
+export function formatWorkflowRunNumberLabel({
+  number,
+  workflowName,
+}: WorkflowRunNumberLabelRun): string | undefined {
+  return number === null ? undefined : `${workflowName} #${number}`;
+}
+
+/**
+ * The run's identity beside its name.
+ *
+ * A run whose name was never overridden carries its workflow name twice on one line, so the
+ * visible label drops to the bare number in that case. The full label stays in the tooltip
+ * and in `formatWorkflowRunNumberLabel`, which feeds accessible names.
+ */
+export function WorkflowRunNumberLabel({run}: {run: WorkflowRunNumberLabelRun}) {
+  const label = formatWorkflowRunNumberLabel(run);
+  if (label === undefined) return null;
+
+  const namesTheWorkflowTwice = run.name === run.workflowName;
+  const visibleLabel = namesTheWorkflowTwice ? `#${run.number}` : label;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Code
+          as="span"
+          variant="label"
+          className="min-w-0 max-w-[240px] truncate text-foreground-neutral-muted"
+        >
+          {visibleLabel}
+        </Code>
+      </TooltipTrigger>
+      <TooltipContent>
+        <Code as="span" variant="label" className="block max-w-[360px] break-words">
+          {label}
+        </Code>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

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

@@ -8,13 +8,12 @@ import {
   workflowRunAttemptDto,
   workflowRunDetail,
 } from '#test/fixtures/workflow-run.js';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {jsonResponse, PROJECT_TEST_WSLUG, renderProjectPage} from '#test/pages.js';
 import {WorkflowRunAttemptSwitcher} from './workflow-run-attempt-switcher.js';
 
 const ROOT_RUN_ID = '11111111-1111-4111-8111-111111111111';
 const CURRENT_RUN_ID = '22222222-2222-4222-8222-222222222222';
 const THIRD_RUN_ID = '33333333-3333-4333-8333-333333333333';
-const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
 const SWITCH_ATTEMPT_PATTERN = /Switch attempt/;
 const ATTEMPT_1_PATTERN = /Attempt 1/;
 const ATTEMPT_2_PATTERN = /Attempt 2/;
@@ -176,7 +175,7 @@ describe('WorkflowRunAttemptSwitcher', () => {
       ),
     });
     const {router} = renderSwitcher({
-      path: `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}?job=job-1&step=step-1&stepAttempt=attempt-1`,
+      path: `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${CURRENT_RUN_ID}?job=job-1&step=step-1&stepAttempt=attempt-1`,
     });
 
     await user.click(await screen.findByRole('button', {name: 'Switch attempt, currently 2 of 4'}));
@@ -184,14 +183,14 @@ describe('WorkflowRunAttemptSwitcher', () => {
 
     expect(attemptLink).toHaveAttribute(
       'href',
-      `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}?runAttempt=1`,
+      `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${CURRENT_RUN_ID}?runAttempt=1`,
     );
 
     await user.click(attemptLink);
 
     await waitFor(() =>
       expect(router.state.location.pathname).toBe(
-        `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}`,
+        `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${CURRENT_RUN_ID}`,
       ),
     );
     expect(router.state.location.search).toEqual({runAttempt: 1});
@@ -200,7 +199,7 @@ describe('WorkflowRunAttemptSwitcher', () => {
 
 function renderSwitcher({
   latestAttempt = 4,
-  path = `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${CURRENT_RUN_ID}`,
+  path = `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${CURRENT_RUN_ID}`,
 }: {
   latestAttempt?: number | undefined;
   path?: string | undefined;
@@ -219,8 +218,8 @@ function renderSwitcher({
   return renderProjectPage(path, () => (
     <div data-testid="attempt-switcher-test-mount">
       <WorkflowRunAttemptSwitcher
-        workspaceId={PROJECT_TEST_WID}
-        projectId={PROJECT_ID}
+        workspaceSlug={PROJECT_TEST_WSLUG}
+        projectSlug="project"
         run={run}
         latestAttempt={latestAttempt}
       />

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

@@ -16,15 +16,15 @@ import {useWorkflowRunAttemptsQuery} from '#hooks/api/workflow-runs.js';
 import {WorkflowStatusIcon} from '../workflow-status/workflow-status-icon.js';
 
 export interface WorkflowRunAttemptSwitcherProps {
-  workspaceId: string;
-  projectId: string;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
   run: WorkflowRunDetail;
   latestAttempt: number;
 }
 
 export function WorkflowRunAttemptSwitcher({
-  workspaceId,
-  projectId,
+  workspaceSlug,
+  projectSlug,
   run,
   latestAttempt,
 }: WorkflowRunAttemptSwitcherProps) {
@@ -35,6 +35,7 @@ export function WorkflowRunAttemptSwitcher({
   });
 
   if (latestAttempt <= 1) return null;
+  if (!workspaceSlug || !projectSlug) return null;
 
   const attempts = attemptsQuery.data ?? [];
   const latestLoadedAttempt = Math.max(0, ...attempts.map((attempt) => attempt.attempt));
@@ -73,8 +74,8 @@ export function WorkflowRunAttemptSwitcher({
                   attempt={attempt}
                   current={attempt.id === run.runAttempt.id}
                   workflowRunId={run.id}
-                  workspaceId={workspaceId}
-                  projectId={projectId}
+                  workspaceSlug={workspaceSlug}
+                  projectSlug={projectSlug}
                 />
               ))
           : null}
@@ -107,20 +108,20 @@ function AttemptItem({
   attempt,
   current,
   workflowRunId,
-  workspaceId,
-  projectId,
+  workspaceSlug,
+  projectSlug,
 }: {
   attempt: WorkflowRunAttempt;
   current: boolean;
   workflowRunId: string;
-  workspaceId: string;
-  projectId: string;
+  workspaceSlug?: string | undefined;
+  projectSlug?: string | undefined;
 }) {
   return (
     <DropdownMenuItem asChild className={cn(current && 'text-foreground-neutral-base')}>
       <Link
-        to="/workspaces/$wid/projects/$pid/runs/$workflowRunId"
-        params={{wid: workspaceId, pid: projectId, workflowRunId}}
+        to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId"
+        params={{workspaceSlug, projectSlug, workflowRunId}}
         search={
           ((previous: Record<string, unknown>) => {
             if (current) return previous;

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';
@@ -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,8 +153,8 @@ const ATTEMPT_SUMMARY_ARGS = {
     }),
     status: 'failed',
   }),
-  workspaceId: WORKSPACE_ID,
-  projectId: PROJECT_ID,
+  workspaceSlug: 'acme',
+  projectSlug: 'project',
   latestAttempt: 3,
 };
 
@@ -352,8 +350,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 +365,8 @@ export const ActionVariantsWithAttempts: Story = {
               rerunMode: null,
             }),
           }}
+          workspaceSlug="acme"
+          projectSlug="project"
           latestAttempt={3}
           {...props}
         />

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

@@ -29,13 +29,14 @@ 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(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 +47,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();