@shipfox/client-workflows 13.0.0 → 14.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "13.0.0",
+  "version": "14.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,15 +27,15 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "date-fns": "^4.1.0",
-    "@shipfox/api-workflows-dto": "12.0.0",
-    "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-logs": "13.0.0",
     "@shipfox/api-definitions-dto": "12.0.0",
-    "@shipfox/client-projects": "13.0.0",
-    "@shipfox/client-shell": "13.0.0",
-    "@shipfox/client-triggers": "13.0.0",
-    "@shipfox/react-ui": "0.4.0",
-    "@shipfox/client-ui": "13.0.0"
+    "@shipfox/api-workflows-dto": "12.1.0",
+    "@shipfox/client-logs": "14.0.0",
+    "@shipfox/client-api": "6.0.1",
+    "@shipfox/client-projects": "14.0.0",
+    "@shipfox/client-shell": "14.0.0",
+    "@shipfox/client-triggers": "14.0.0",
+    "@shipfox/client-ui": "14.0.0",
+    "@shipfox/react-ui": "0.5.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/job-graph/job-duration-label.tsx

@@ -22,7 +22,11 @@ function LiveDurationText({fromIso}: {fromIso: string}) {
 function DurationText({children}: {children: string}) {
   // The status icon names the state; the node aria-label carries the verb.
   return (
-    <Code as="span" variant="label" className="shrink-0 tabular-nums text-foreground-neutral-muted">
+    <Code
+      as="span"
+      variant="label"
+      className="shrink-0 tabular-nums text-foreground-neutral-subtle"
+    >
       {children}
     </Code>
   );

package/src/components/job-graph/job-graph-content.tsx

@@ -7,6 +7,7 @@ import type {WorkflowRunDetail} from '#core/workflow-run.js';
 import type {JobGraphModel, JobGraphNavigationKey} from './graph-model.js';
 import {nextJobGraphNodeId} from './graph-model.js';
 import {JobNode, TriggerNode} from './job-node.js';
+import type {JobGraphSelectionSource} from './types.js';
 
 const NODE_WIDTH = 208;
 const NODE_HEIGHT = 48;
@@ -27,7 +28,7 @@ export function JobGraphContent({
     'triggerDisplayLabel' | 'triggerLabel' | 'triggerProvider' | 'triggerSource'
   >;
   selectedJobId?: string | undefined;
-  onSelectJob: (jobId: string | undefined) => void;
+  onSelectJob: (jobId: string | undefined, source?: JobGraphSelectionSource) => void;
 }) {
   const nodeRefs = useRef(new Map<string, HTMLButtonElement>());
   const [hoveredJobId, setHoveredJobId] = useState<string | undefined>();
@@ -74,13 +75,13 @@ export function JobGraphContent({
     if (!nextNodeId) return;
 
     event.preventDefault();
-    onSelectJob(nextNodeId);
+    onSelectJob(nextNodeId, 'keyboard');
     nodeRefs.current.get(nextNodeId)?.focus();
   }
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <div className="min-h-0 overflow-auto bg-background-neutral-base">
+      <div className="min-h-0 overflow-auto bg-background-neutral-background">
         <div className="relative" style={{width: contentWidth, minHeight: contentHeight}}>
           <GraphEdges model={model} hoveredJobId={hoveredJobId} />
           <div
@@ -101,7 +102,9 @@ export function JobGraphContent({
                   node={node}
                   selected={node.id === selectedJobId}
                   ref={setNodeRef(node.id)}
-                  onSelect={() => onSelectJob(node.id === selectedJobId ? undefined : node.id)}
+                  onSelect={() =>
+                    onSelectJob(node.id === selectedJobId ? undefined : node.id, 'pointer')
+                  }
                   onKeyDown={handleKeyDown}
                   onHoverStart={() => setHoveredJobId(node.id)}
                   onHoverEnd={() =>

package/src/components/job-graph/job-graph-view.tsx

@@ -3,6 +3,7 @@ import {useState} from 'react';
 import type {WorkflowRunDetail} from '#core/workflow-run.js';
 import type {JobGraphModel} from './graph-model.js';
 import {JobGraphContent} from './job-graph-content.js';
+import type {JobGraphSelectionSource} from './types.js';
 
 export function JobGraphView({
   model,
@@ -19,7 +20,9 @@ export function JobGraphView({
   >;
   selectedJobId?: string | undefined;
   defaultSelectedJobId?: string | undefined;
-  onSelectedJobChange?: ((jobId: string | undefined) => void) | undefined;
+  onSelectedJobChange?:
+    | ((jobId: string | undefined, source?: JobGraphSelectionSource) => void)
+    | undefined;
   className?: string | undefined;
 }) {
   const [localSelectedJobId, setLocalSelectedJobId] = useState<string | undefined>(
@@ -27,9 +30,9 @@ export function JobGraphView({
   );
   const selected = selectedJobId ?? localSelectedJobId;
 
-  function selectJob(jobId: string | undefined) {
+  function selectJob(jobId: string | undefined, source?: JobGraphSelectionSource) {
     setLocalSelectedJobId(jobId);
-    onSelectedJobChange?.(jobId);
+    onSelectedJobChange?.(jobId, source);
   }
 
   return (

package/src/components/job-graph/job-graph.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="h-520 w-900 overflow-auto bg-background-neutral-base p-16">
+      <div className="h-520 w-900 overflow-auto bg-background-neutral-background p-16">
         <Story />
       </div>
     ),

package/src/components/job-graph/job-node.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="bg-background-neutral-base p-16">
+      <div className="bg-background-neutral-background p-16">
         <Story />
       </div>
     ),

package/src/components/job-graph/job-node.test.tsx

@@ -52,11 +52,14 @@ function makeNode(overrides: NodeOverrides): JobGraphNode {
   });
 }
 
-function renderNode(node: JobGraphNode, {live = false}: {live?: boolean} = {}) {
+function renderNode(
+  node: JobGraphNode,
+  {live = false, selected = false}: {live?: boolean; selected?: boolean} = {},
+) {
   const element = (
     <JobNode
       node={node}
-      selected={false}
+      selected={selected}
       onSelect={() => undefined}
       onKeyDown={() => undefined}
       onHoverStart={() => undefined}
@@ -91,6 +94,28 @@ function setVisibility(state: 'visible' | 'hidden') {
   Object.defineProperty(document, 'visibilityState', {configurable: true, value: state});
 }
 
+describe('JobNode interaction', () => {
+  test('presents the selectable node as an elevated interactive surface', () => {
+    renderNode(makeNode({name: 'build', status: 'pending'}));
+
+    expect(screen.getByRole('button', {name: 'build, Pending'})).toHaveClass(
+      'cursor-pointer',
+      'bg-background-neutral-base',
+      'shadow-button-neutral',
+      'hover:bg-background-components-hover',
+    );
+  });
+
+  test('uses a quiet neutral surface for the selected node', () => {
+    renderNode(makeNode({name: 'build', status: 'pending'}), {selected: true});
+
+    expect(screen.getByRole('button', {name: 'build, Pending'})).toHaveClass(
+      'bg-background-components-hover',
+      'hover:bg-background-components-pressed',
+    );
+  });
+});
+
 describe('JobNode duration', () => {
   beforeEach(() => {
     setMatchMedia(false);

package/src/components/job-graph/job-node.tsx

@@ -40,14 +40,14 @@ export function TriggerNode({
         <button
           type="button"
           aria-label={label}
-          className="flex items-center justify-center rounded-full border border-border-neutral-base bg-background-components-base transition-colors hover:bg-background-components-hover focus-visible:shadow-border-interactive-with-active focus-visible:outline-none"
+          className="flex cursor-help items-center justify-center rounded-full bg-background-neutral-base shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none"
           style={{width: TRIGGER_SIZE, height: TRIGGER_SIZE}}
         >
           <TriggerSourceIcon
             provider={trigger.triggerProvider}
             source={trigger.triggerSource}
             aria-hidden
-            className="size-14 shrink-0 text-foreground-neutral-muted"
+            className="size-14 shrink-0 text-foreground-neutral-subtle"
           />
         </button>
       </TooltipTrigger>
@@ -106,15 +106,15 @@ export function JobNode({
       onPointerEnter={onHoverStart}
       onPointerLeave={onHoverEnd}
       className={cn(
-        'group relative flex h-48 w-208 items-center gap-8 rounded-8 border border-border-neutral-base bg-background-components-base px-10 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',
+        'group relative flex h-48 w-208 cursor-pointer items-center gap-8 rounded-8 bg-background-neutral-base px-10 text-left shadow-button-neutral transition-colors hover:bg-background-components-hover focus-visible:shadow-button-neutral-focus focus-visible:outline-none',
+        selected && 'bg-background-components-hover hover:bg-background-components-pressed',
         node.carriedOver && 'opacity-[0.55]',
       )}
     >
       {selected ? (
         <span
           aria-hidden="true"
-          className="absolute inset-y-6 left-0 w-3 rounded-full bg-border-highlights-interactive"
+          className="absolute inset-y-6 left-0 w-px rounded-full bg-border-highlights-interactive"
         />
       ) : null}
       <div className="flex min-w-0 flex-1 items-center gap-8">
@@ -136,7 +136,7 @@ function ExecutionCountText({executions}: {executions: JobExecution[]}) {
       <TooltipTrigger asChild>
         <span
           aria-hidden="true"
-          className="inline-flex h-20 min-w-28 shrink-0 items-center justify-end gap-4 text-foreground-neutral-muted"
+          className="inline-flex h-20 min-w-28 shrink-0 items-center justify-end gap-4 text-foreground-neutral-subtle"
         >
           <Icon name="loopRightLine" className="size-12" />
           <Code as="span" variant="label" className="text-current">

package/src/components/job-graph/types.ts

@@ -1,9 +1,13 @@
 import type {WorkflowRunDetail} from '#core/workflow-run.js';
 
+export type JobGraphSelectionSource = 'pointer' | 'keyboard';
+
 export interface JobGraphProps {
   run: WorkflowRunDetail;
   selectedJobId?: string | undefined;
   defaultSelectedJobId?: string | undefined;
-  onSelectedJobChange?: ((jobId: string | undefined) => void) | undefined;
+  onSelectedJobChange?:
+    | ((jobId: string | undefined, source?: JobGraphSelectionSource) => void)
+    | undefined;
   className?: string | undefined;
 }

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

@@ -86,7 +86,7 @@ function DurationText({
       variant="label"
       aria-label={ariaLabel}
       className={cn(
-        'inline-flex shrink-0 items-center gap-4 tabular-nums text-foreground-neutral-muted',
+        'inline-flex shrink-0 items-center gap-4 tabular-nums text-foreground-neutral-subtle',
         className,
       )}
     >

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

@@ -32,7 +32,7 @@ export function WorkflowRunNumberLabel({run}: {run: WorkflowRunNumberLabelRun})
         <Code
           as="span"
           variant="label"
-          className="min-w-0 max-w-[240px] truncate text-foreground-neutral-muted"
+          className="min-w-0 max-w-[240px] truncate text-foreground-neutral-subtle"
         >
           {visibleLabel}
         </Code>

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

@@ -52,7 +52,7 @@ export function WorkflowRunAttemptSwitcher({
           size="2xs"
           iconRight="arrowDownSLine"
           aria-label={`Switch attempt, currently ${run.runAttempt.attempt} of ${maxAttempt}`}
-          className="h-20 px-4 text-foreground-neutral-muted hover:text-foreground-neutral-base"
+          className="h-20 px-4 text-foreground-neutral-subtle hover:text-foreground-neutral-base"
         >
           <Text as="span" size="xs" className="text-inherit">
             Attempt {run.runAttempt.attempt} of {maxAttempt}
@@ -139,7 +139,7 @@ function AttemptItem({
         </Code>
         <RelativeTime
           value={attempt.createdAt}
-          className="shrink-0 whitespace-nowrap font-code text-xs leading-20 text-foreground-neutral-muted"
+          className="shrink-0 whitespace-nowrap font-code text-xs leading-20 text-foreground-neutral-subtle"
         />
       </Link>
     </DropdownMenuItem>

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

@@ -56,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>
 );
@@ -160,30 +160,6 @@ const ATTEMPT_SUMMARY_ARGS = {
 
 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,
@@ -323,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) => (
@@ -333,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}
         />
       ))}
@@ -410,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

@@ -34,6 +34,8 @@ describe('WorkflowRunSummary', () => {
 
     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();
@@ -128,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',
@@ -193,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,7 +12,7 @@ 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 {
@@ -22,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';
@@ -36,11 +37,6 @@ export interface WorkflowRunSummaryProps {
   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;
@@ -52,11 +48,6 @@ export function WorkflowRunSummary({
   workspaceSlug,
   projectSlug,
   run,
-  sourceAvailable = false,
-  sourceOpen = false,
-  sourcePanelId,
-  sourceButtonRef,
-  onSourceToggle,
   cancelling = false,
   onCancel,
   rerunPending = false,
@@ -66,6 +57,7 @@ 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 && workspaceSlug && projectSlug
       ? {workspaceSlug, projectSlug, latestAttempt}
@@ -76,64 +68,77 @@ 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>
-            ) : null}
-          </div>
+                <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>
 
-          <div className="col-span-2 row-start-2 flex min-w-0 items-center gap-12 overflow-hidden text-foreground-neutral-muted">
+          {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} />
@@ -159,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}
@@ -187,7 +192,7 @@ export function WorkflowRunSummary({
             ) : 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 ? (
@@ -195,7 +200,7 @@ export function WorkflowRunSummary({
                 <MetadataSeparator />
                 <WorkflowRunDurationLabel
                   duration={displayDuration}
-                  className="text-foreground-neutral-muted"
+                  className="text-foreground-neutral-subtle"
                 />
               </>
             ) : null}
@@ -290,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;
 
@@ -300,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" />;
 }