@shipfox/client-workflows 19.0.0 → 21.0.0

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-background p-16">
+      <div className="h-520 w-900 overflow-auto bg-background-subtle-base 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-background p-16">
+      <div className="bg-background-subtle-base p-16">
         <Story />
       </div>
     ),

package/src/components/step-list/step-list-model.ts

@@ -132,7 +132,7 @@ function toStepModel(step: Step, index: number): StepModel {
   };
 }
 
-function stepLabel(step: Step, index: number): string {
+export function stepLabel(step: Step, index: number): string {
   const name = step.name.trim();
   if (name) return name;
 

package/src/components/step-list/step-list.test.tsx

@@ -145,6 +145,34 @@ describe('StepList', () => {
     expect(screen.getByText(`logs for ${deployAttempt.id}`)).toBeInTheDocument();
   });
 
+  test('reports the expanded attempt ids as rows change', async () => {
+    const user = userEvent.setup();
+    const onExpandedAttemptIdsChange = vi.fn();
+    const buildAttempt = makeAttempt({status: 'succeeded'});
+    const deployAttempt = makeAttempt({status: 'running'});
+    const build = makeStep({name: 'build', attempts: [buildAttempt]});
+    const deploy = makeStep({name: 'deploy', position: 1, attempts: [deployAttempt]});
+    render(
+      <StepList
+        job={makeJob({steps: [build, deploy]})}
+        onExpandedAttemptIdsChange={onExpandedAttemptIdsChange}
+        renderExpandedStep={({attemptId}) => <Text size="sm">logs for {attemptId}</Text>}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', {name: 'build, Succeeded, attempt 1'}));
+    expect(onExpandedAttemptIdsChange).toHaveBeenLastCalledWith([buildAttempt.id]);
+
+    await user.click(screen.getByRole('button', {name: 'deploy, Running, attempt 1'}));
+    expect(onExpandedAttemptIdsChange).toHaveBeenLastCalledWith([
+      buildAttempt.id,
+      deployAttempt.id,
+    ]);
+
+    await user.click(screen.getByRole('button', {name: 'build, Succeeded, attempt 1'}));
+    expect(onExpandedAttemptIdsChange).toHaveBeenLastCalledWith([deployAttempt.id]);
+  });
+
   test('keeps multiple expanded rows open when external attempt selection is singular', async () => {
     const user = userEvent.setup();
     const buildAttempt = makeAttempt({status: 'succeeded'});
@@ -210,7 +238,7 @@ describe('StepList', () => {
     await user.click(deployRow);
 
     expect(buildRow.parentElement?.parentElement).not.toHaveClass('bg-background-components-hover');
-    expect(deployRow.parentElement?.parentElement).toHaveClass('bg-background-components-hover');
+    expect(deployRow.parentElement?.parentElement).toHaveClass('bg-background-neutral-hover');
   });
 
   test('opens a default selected attempt', () => {

package/src/components/step-list/step-list.tsx

@@ -58,6 +58,7 @@ export interface StepListProps {
   selectedAttemptId?: string | null | undefined;
   defaultSelectedAttemptId?: string | undefined;
   onSelectedAttemptChange?: ((attemptId: string | undefined) => void) | undefined;
+  onExpandedAttemptIdsChange?: ((attemptIds: readonly string[]) => void) | undefined;
   inspectorOpenAttemptId?: string | null | undefined;
   onInspectorOpenChange?: ((attemptId: string | null) => void) | undefined;
   autoSelectActiveAttempt?: boolean | undefined;
@@ -74,6 +75,7 @@ export function StepList({
   selectedAttemptId,
   defaultSelectedAttemptId,
   onSelectedAttemptChange,
+  onExpandedAttemptIdsChange,
   inspectorOpenAttemptId = null,
   onInspectorOpenChange,
   autoSelectActiveAttempt = false,
@@ -96,6 +98,7 @@ export function StepList({
       selectedAttemptId={selectedAttemptId}
       defaultSelectedAttemptId={defaultSelectedAttemptId}
       onSelectedAttemptChange={onSelectedAttemptChange}
+      onExpandedAttemptIdsChange={onExpandedAttemptIdsChange}
       inspectorOpenAttemptId={inspectorOpenAttemptId}
       onInspectorOpenChange={onInspectorOpenChange}
       autoSelectActiveAttempt={autoSelectActiveAttempt}
@@ -113,6 +116,7 @@ function StepListContent({
   selectedAttemptId,
   defaultSelectedAttemptId,
   onSelectedAttemptChange,
+  onExpandedAttemptIdsChange,
   inspectorOpenAttemptId = null,
   onInspectorOpenChange,
   autoSelectActiveAttempt,
@@ -134,20 +138,35 @@ function StepListContent({
   const lastNotifiedSelectedAttemptId = useRef<string | null>(null);
   const autoSelectedAttemptIdRef = useRef<string | undefined>(undefined);
   const previousSelectedAttemptIdRef = useRef<string | null | undefined>(selectedAttemptId);
+  const lastReportedExpandedAttemptIdsKeyRef = useRef<string | null>(null);
   const shouldUseControlledCollapsedState =
     selectedAttemptId === null && lastNotifiedSelectedAttemptId.current === null;
   const autoSelectedAttemptId =
     selectedAttemptId === undefined && autoSelectActiveAttempt && !userSelectedAttempt
       ? (autoSelectedAttemptIdRef.current ?? model.activeEntryId)
       : undefined;
-  const autoSelectedAttemptIds = autoSelectedAttemptId ? [autoSelectedAttemptId] : [];
-  const selectedAttemptIds = shouldUseControlledCollapsedState
-    ? []
-    : localSelectedAttemptIds.length > 0
-      ? localSelectedAttemptIds
-      : autoSelectedAttemptIds;
+  const autoSelectedAttemptIds = useMemo(
+    () => (autoSelectedAttemptId ? [autoSelectedAttemptId] : []),
+    [autoSelectedAttemptId],
+  );
+  const selectedAttemptIds = useMemo(
+    () =>
+      shouldUseControlledCollapsedState
+        ? []
+        : localSelectedAttemptIds.length > 0
+          ? localSelectedAttemptIds
+          : autoSelectedAttemptIds,
+    [autoSelectedAttemptIds, localSelectedAttemptIds, shouldUseControlledCollapsedState],
+  );
   const hasExpandedContent = renderExpandedStep !== undefined;
 
+  useEffect(() => {
+    const key = selectedAttemptIds.join('|');
+    if (lastReportedExpandedAttemptIdsKeyRef.current === key) return;
+    lastReportedExpandedAttemptIdsKeyRef.current = key;
+    onExpandedAttemptIdsChange?.(selectedAttemptIds);
+  }, [onExpandedAttemptIdsChange, selectedAttemptIds]);
+
   useEffect(() => {
     if (selectedAttemptId !== undefined) {
       previousSelectedAttemptIdRef.current = selectedAttemptId;
@@ -223,7 +242,7 @@ function StepListContent({
       <section
         aria-labelledby={showHeader ? titleId : undefined}
         className={cn(
-          'flex min-h-0 flex-col rounded-8 border border-border-neutral-base bg-background-components-base',
+          'flex min-h-0 flex-col rounded-8 border border-border-neutral-base bg-background-neutral-base',
           className,
         )}
       >
@@ -425,8 +444,8 @@ function StepRow({
     <>
       <div
         className={cn(
-          'group flex min-w-0 items-center gap-inline pr-[8px] transition-colors hover:bg-background-components-hover active:bg-background-components-pressed',
-          selected && 'bg-background-components-hover',
+          'group flex min-w-0 items-center gap-inline bg-background-neutral-base pr-[8px] transition-colors hover:bg-background-neutral-hover active:bg-background-neutral-pressed',
+          selected && 'bg-background-neutral-hover',
           !hasExpandedContent && ['border-b border-border-neutral-base', isLast && 'border-b-0'],
         )}
       >

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

@@ -2,50 +2,37 @@ import {Icon} from '@shipfox/react-ui/icon';
 import {useTimeTick} from '@shipfox/react-ui/time-ticker';
 import {Code} from '@shipfox/react-ui/typography';
 import {cn, humanDuration} from '@shipfox/react-ui/utils';
-import type {
-  WorkflowRunAttemptDisplayDuration,
-  WorkflowRunDisplayDuration,
-} from '#core/workflow-run.js';
+import type {WorkflowRunAttemptDisplayDuration} from '#core/workflow-run.js';
 
 /**
- * The run list reads an attempt's own marks and cannot tell queue from run, so an unkinded
- * duration still renders as run time. Only surfaces holding the run's jobs pass a kind.
+ * A run reports one span: how long its attempt has been under way. Queueing is a job
+ * execution's own affair, and the job surfaces report it there.
  */
-export type WorkflowRunDurationDisplay =
-  | WorkflowRunAttemptDisplayDuration
-  | WorkflowRunDisplayDuration;
-
-type DurationKind = 'queue' | 'run';
-
-const GLYPH_BY_KIND = {queue: 'hourglassLine', run: 'timerLine'} as const;
-const LIVE_VERB_BY_KIND = {queue: 'queued', run: 'running'} as const;
-const FIXED_VERB_BY_KIND = {queue: 'queued', run: 'ran'} as const;
+export type WorkflowRunDurationDisplay = WorkflowRunAttemptDisplayDuration;
 
 export function WorkflowRunDurationLabel({
   duration,
+  hasStarted,
   className,
 }: {
   duration: WorkflowRunDurationDisplay | null;
+  hasStarted: boolean;
   className?: string | undefined;
 }) {
   if (duration === null) return null;
-  const kind = durationKind(duration);
 
   switch (duration.state) {
     case 'fixed': {
       const display = formatFixedDurationLabel(duration.elapsed);
+      const verb = hasStarted ? 'ran' : 'lasted';
       return (
-        <DurationText
-          className={className}
-          kind={kind}
-          ariaLabel={`${FIXED_VERB_BY_KIND[kind]} ${display}`}
-        >
+        <DurationText className={className} ariaLabel={`${verb} ${display}`}>
           {display}
         </DurationText>
       );
     }
     case 'live':
-      return <LiveDurationText duration={duration} kind={kind} className={className} />;
+      return <LiveDurationText duration={duration} className={className} />;
     default: {
       const exhaustive: never = duration;
       return exhaustive;
@@ -55,22 +42,25 @@ export function WorkflowRunDurationLabel({
 
 export function useWorkflowRunDurationAccessibleLabel(
   duration: WorkflowRunDurationDisplay | null,
+  hasStarted: boolean,
 ): string | undefined {
   useTimeTick();
-  return workflowRunDurationAccessibleLabel(duration);
+  return workflowRunDurationAccessibleLabel(duration, hasStarted);
 }
 
 export function workflowRunDurationAccessibleLabel(
   duration: WorkflowRunDurationDisplay | null,
+  hasStarted: boolean,
 ): string | undefined {
   if (duration === null) return undefined;
-  const kind = durationKind(duration);
 
   switch (duration.state) {
     case 'live':
-      return `${LIVE_VERB_BY_KIND[kind]} ${humanDuration(duration.fromIso)}`;
-    case 'fixed':
-      return `${FIXED_VERB_BY_KIND[kind]} ${formatFixedDurationLabel(duration.elapsed)}`;
+      return `running ${humanDuration(duration.fromIso)}`;
+    case 'fixed': {
+      const verb = hasStarted ? 'ran' : 'lasted';
+      return `${verb} ${formatFixedDurationLabel(duration.elapsed)}`;
+    }
     default: {
       const exhaustive: never = duration;
       return exhaustive;
@@ -78,27 +68,17 @@ export function workflowRunDurationAccessibleLabel(
   }
 }
 
-function durationKind(duration: WorkflowRunDurationDisplay): DurationKind {
-  return 'kind' in duration ? duration.kind : 'run';
-}
-
 function LiveDurationText({
   duration,
-  kind,
   className,
 }: {
   duration: Extract<WorkflowRunDurationDisplay, {state: 'live'}>;
-  kind: DurationKind;
   className?: string | undefined;
 }) {
   useTimeTick();
   const display = humanDuration(duration.fromIso);
   return (
-    <DurationText
-      className={className}
-      kind={kind}
-      ariaLabel={`${LIVE_VERB_BY_KIND[kind]} ${display}`}
-    >
+    <DurationText className={className} ariaLabel={`running ${display}`}>
       {display}
     </DurationText>
   );
@@ -107,12 +87,10 @@ function LiveDurationText({
 function DurationText({
   children,
   className,
-  kind,
   ariaLabel,
 }: {
   children: string;
   className?: string | undefined;
-  kind: DurationKind;
   ariaLabel?: string | undefined;
 }) {
   return (
@@ -125,10 +103,9 @@ function DurationText({
         className,
       )}
     >
-      {/* The glyph is the only visible mark of queue vs run: the status badge already writes
-          "Queued", and the numeric columns are fixed width. The verb rides the accessible
-          name instead. */}
-      <Icon name={GLYPH_BY_KIND[kind]} className="size-12 shrink-0" aria-hidden="true" />
+      {/* The verb rides the accessible name: the numeric columns are fixed width and the
+          status badge already says whether the run is still going. */}
+      <Icon name="timerLine" className="size-12 shrink-0" aria-hidden="true" />
       {children}
     </Code>
   );

package/src/components/workflow-run-list/job-status-strip.tsx

@@ -1,21 +1,17 @@
+import {WORKFLOW_RUN_JOB_PREVIEW_LIMIT} from '@shipfox/api-workflows-dto';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Code, Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
+import {memo} from 'react';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
 import {deriveJobDisplayStatus, type JobDisplayStatus} from '#core/entities/job.js';
 import type {WorkflowRunJobSummary, WorkflowRunJobs} from '#core/workflow-run.js';
 
-/**
- * How many glyphs fit the strip's column before it starts costing the run name width.
- *
- * Sized so the widest case still fits the row's 160px strip column: seven 12px glyphs with
- * 3px gaps is 102px, and the overflow indicator adds a glyph plus a count of at most five
- * monospace characters, about 56px. Overshooting does not wrap, it paints over the duration
- * column. This sits under the API's preview bound, so resizing the strip is a change here.
- */
-const MAX_VISIBLE_JOBS = 7;
 const GLYPH_SIZE = 12;
+const GLYPH_GAP = 3;
+const OVERFLOW_GAP = 2;
+const OVERFLOW_LABEL_WIDTH = 40;
 const MAX_TOOLTIP_JOB_NAMES = 6;
 
 /**
@@ -32,6 +28,20 @@ const COMPACT_COUNT_FORMAT = new Intl.NumberFormat('en', {
   maximumFractionDigits: 1,
 });
 
+/**
+ * Reserves one full API preview and its overflow marker in a run row.
+ *
+ * Keep this derived from the API preview bound so the row reservation grows with the payload
+ * contract instead of silently drifting into the duration and timestamp columns.
+ */
+export function jobStatusStripWidthForPreview(previewLimit: number): number {
+  const previewWidth = previewLimit * GLYPH_SIZE + Math.max(previewLimit - 1, 0) * GLYPH_GAP;
+  const overflowWidth = GLYPH_GAP + GLYPH_SIZE + OVERFLOW_GAP + OVERFLOW_LABEL_WIDTH;
+  return previewWidth + overflowWidth;
+}
+
+export const JOB_STATUS_STRIP_WIDTH = jobStatusStripWidthForPreview(WORKFLOW_RUN_JOB_PREVIEW_LIMIT);
+
 // Worst-first, so the overflow glyph reports the most alarming thing it is standing in for.
 // A strip that hides a failure behind eight green discs would be worse than no strip at all.
 const STATUS_SEVERITY: Record<JobDisplayStatus, number> = {
@@ -62,10 +72,13 @@ export interface JobStatusStripProps {
  * job including those the server never sent. That split is what lets the overflow glyph
  * report a failure sitting past the preview instead of quietly dropping it.
  */
-export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
+export const JobStatusStrip = memo(function JobStatusStrip({jobs, className}: JobStatusStripProps) {
   if (jobs.total === 0) return null;
 
-  const visible = jobs.preview.slice(0, MAX_VISIBLE_JOBS);
+  // The data frame gives the row enough room for the whole API preview. Only jobs beyond that
+  // server-side preview need an overflow marker; the old seven-glyph cap belonged to the
+  // previous 1120px page width.
+  const visible = jobs.preview;
   const hiddenCount = jobs.total - visible.length;
   const overflowStatus = worstHiddenStatus(jobs, visible);
   const summary = jobStatusSummary(jobs);
@@ -115,7 +128,7 @@ export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
       </TooltipContent>
     </Tooltip>
   );
-}
+});
 
 function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary: string}) {
   // Naming the jobs that need attention is the whole point of hovering; succeeded jobs are

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

@@ -53,7 +53,7 @@ export function WorkflowRunFilters({
   const [sheetOpen, setSheetOpen] = useState(false);
 
   return (
-    <div className="flex flex-wrap items-center gap-inline">
+    <div className="flex w-full flex-wrap items-center gap-inline">
       <Input
         value={search.search ?? ''}
         onChange={(event) => onChange({search: event.target.value})}

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

@@ -16,7 +16,7 @@ const SKELETON_ROW_COUNT = 8;
 export function WorkflowRunListSkeleton() {
   return (
     <div
-      className="@container divide-y divide-border-neutral-base border-t border-border-neutral-base"
+      className="@container divide-y divide-border-neutral-base"
       role="status"
       aria-label="Loading runs"
     >
@@ -28,7 +28,7 @@ export function WorkflowRunListSkeleton() {
         >
           <Skeleton className="size-14 shrink-0 rounded-full" />
           <Skeleton className="h-12 w-[220px] max-w-[40%]" />
-          <Skeleton className="ml-auto hidden h-12 w-96 @min-[1040px]:block" />
+          <Skeleton className="ml-auto hidden h-12 w-96 @min-[1200px]:block" />
           <Skeleton className="h-12 w-48" />
           <Skeleton className="h-12 w-48" />
         </div>

package/src/components/workflow-run-list/workflow-run-list-view.test.tsx

@@ -1,4 +1,5 @@
 import type {JobStatusDto} from '@shipfox/api-workflows-dto';
+import {WORKFLOW_RUN_JOB_PREVIEW_LIMIT} from '@shipfox/api-workflows-dto';
 import {screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type {WorkflowRunListItem, WorkflowRunStatus} from '#core/workflow-run.js';
@@ -8,12 +9,14 @@ import {
   workflowRunListItem,
 } from '#test/fixtures/workflow-run.js';
 import {renderWithRouter} from '#test/render.js';
+import {JOB_STATUS_STRIP_WIDTH, jobStatusStripWidthForPreview} from './job-status-strip.js';
 import type {WorkflowRunListQuery, WorkflowRunListViewProps} from './types.js';
 import {WorkflowRunListView} from './workflow-run-list-view.js';
 
 const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
 const JOB_STRIP_LABEL_RE = /jobs:/u;
 const JOB_SUMMARY_NAME_RE = /queued-build/u;
+const OVERFLOW_COUNT_RE = /^\+/u;
 const WORKSPACE_SLUG = 'acme';
 const PROJECT_SLUG = 'checkout-api';
 
@@ -35,6 +38,38 @@ describe('WorkflowRunListView', () => {
     vi.restoreAllMocks();
   });
 
+  describe('panel composition', () => {
+    test('keeps the controls in the panel header and states in its body', async () => {
+      renderListView([run('succeeded', 'build-image')]);
+      await screen.findByText('build-image');
+
+      const panel = document.querySelector<HTMLElement>('[data-slot="panel"]');
+      const header = panel?.querySelector<HTMLElement>('[data-slot="panel-header"]');
+      const body = panel?.querySelector<HTMLElement>('[data-slot="panel-body"]');
+
+      expect(panel).not.toBeNull();
+      expect(header).not.toBeNull();
+      expect(body).not.toBeNull();
+      expect(within(header as HTMLElement).getByLabelText('Search runs')).toBeInTheDocument();
+      expect(
+        within(header as HTMLElement).getByRole('button', {name: filterTrigger('Status')}),
+      ).toBeInTheDocument();
+      expect(
+        within(header as HTMLElement).getByRole('button', {name: filterTrigger('Branch')}),
+      ).toBeInTheDocument();
+      expect(
+        within(header as HTMLElement).getByRole('button', {name: filterTrigger('Actor')}),
+      ).toBeInTheDocument();
+      expect(
+        within(header as HTMLElement).getByRole('button', {name: filterTrigger('Event')}),
+      ).toBeInTheDocument();
+      expect(
+        within(header as HTMLElement).getByLabelText('Filter runs by creation date'),
+      ).toBeInTheDocument();
+      expect(within(body as HTMLElement).getByText('build-image')).toBeInTheDocument();
+    });
+  });
+
   describe('filtering', () => {
     test('narrows the list to the selected status', async () => {
       const user = userEvent.setup();
@@ -380,10 +415,24 @@ describe('WorkflowRunListView', () => {
     test('counts the jobs it had to hide beyond the strip threshold', async () => {
       renderListView([run('running', 'deploy-web', 'run-1', {...workflowRunJobsOfStatus(40)})]);
 
-      expect(await screen.findByText('+33')).toBeInTheDocument();
+      expect(await screen.findByText('+24')).toBeInTheDocument();
       expect(screen.getByRole('img', {name: '40 jobs: 40 succeeded'})).toBeInTheDocument();
     });
 
+    test('renders every job in the API preview without a client-side cap', async () => {
+      renderListView([run('running', 'deploy-web', 'run-1', {...workflowRunJobsOfStatus(16)})]);
+
+      const strip = await screen.findByRole('img', {name: '16 jobs: 16 succeeded'});
+
+      expect(within(strip).getAllByLabelText('Succeeded')).toHaveLength(16);
+      expect(within(strip).queryByText(OVERFLOW_COUNT_RE)).not.toBeInTheDocument();
+    });
+
+    test('reserves the full API preview and overflow marker width', () => {
+      expect(jobStatusStripWidthForPreview(WORKFLOW_RUN_JOB_PREVIEW_LIMIT)).toBe(294);
+      expect(JOB_STATUS_STRIP_WIDTH).toBe(294);
+    });
+
     // The API sends a bounded preview, so a run whose only failure sits past it has no failed
     // job in the payload at all. The counts still carry it, and the overflow glyph has to say
     // so rather than showing an unbroken row of green.
@@ -398,7 +447,7 @@ describe('WorkflowRunListView', () => {
         name: '21 jobs: 1 failed, 20 succeeded',
       });
       expect(strip).toBeInTheDocument();
-      expect(screen.getByText('+14')).toBeInTheDocument();
+      expect(screen.getByText('+5')).toBeInTheDocument();
       expect(within(strip).getByLabelText('Failed')).toBeInTheDocument();
     });
 
@@ -420,8 +469,8 @@ describe('WorkflowRunListView', () => {
       ]);
 
       const strip = await screen.findByRole('img', {name: '20 jobs: 20 listening'});
-      expect(screen.getByText('+13')).toBeInTheDocument();
-      expect(within(strip).getAllByLabelText('Listening')).toHaveLength(8);
+      expect(screen.getByText('+4')).toBeInTheDocument();
+      expect(within(strip).getAllByLabelText('Listening')).toHaveLength(17);
 
       const user = userEvent.setup();
       await user.hover(strip);
@@ -470,6 +519,7 @@ describe('WorkflowRunListView', () => {
         run('succeeded', 'build-image', 'run-build-image', {
           started_at: '2026-05-07T01:00:00.000Z',
           finished_at: '2026-05-07T01:02:14.000Z',
+          has_started_job_execution: true,
         }),
       ]);
 
@@ -496,6 +546,53 @@ describe('WorkflowRunListView', () => {
       expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
     });
 
+    test('uses the attempt status when all listed jobs are pending', async () => {
+      vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-05-07T01:02:14.000Z'));
+
+      renderListView([
+        run('running', 'waiting-for-runner', 'run-waiting-for-runner', {
+          ...workflowRunJobsFixture(['pending', 'pending']),
+          started_at: '2026-05-07T01:00:00.000Z',
+          finished_at: null,
+        }),
+      ]);
+
+      const duration = await screen.findByText('2m 14s');
+      expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
+      expect(
+        screen.getByRole('link', {
+          name: (name) => name.includes('Running') && name.includes('running 2m 14s'),
+        }),
+      ).toBeInTheDocument();
+    });
+
+    test('uses a neutral verb when no listed job execution started', async () => {
+      renderListView([
+        run('cancelled', 'cancelled-before-runner', 'run-cancelled-before-runner', {
+          ...workflowRunJobsFixture(['pending']),
+          started_at: '2026-05-07T01:00:00.000Z',
+          finished_at: '2026-05-07T01:02:14.000Z',
+        }),
+      ]);
+
+      const duration = await screen.findByText('2m 14s');
+      expect(duration).toHaveAttribute('aria-label', 'lasted 2m 14s');
+    });
+
+    test('uses the started-execution flag when a cancelled job reached a runner', async () => {
+      renderListView([
+        run('cancelled', 'cancelled-after-start', 'run-cancelled-after-start', {
+          ...workflowRunJobsFixture(['cancelled']),
+          has_started_job_execution: true,
+          started_at: '2026-05-07T01:00:00.000Z',
+          finished_at: '2026-05-07T01:02:14.000Z',
+        }),
+      ]);
+
+      const duration = await screen.findByText('2m 14s');
+      expect(duration).toHaveAttribute('aria-label', 'ran 2m 14s');
+    });
+
     test('renders the workflow name beside the run number', async () => {
       renderListView([
         run('succeeded', 'Deploy production', 'run-deploy-production', {

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

@@ -1,3 +1,4 @@
+import {Panel, PanelBody, PanelHeader} from '@shipfox/react-ui/panel';
 import {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';
 import {Header} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
@@ -58,7 +59,7 @@ export function WorkflowRunListView({
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
       <section
         aria-labelledby={headingId}
-        className={cn('flex min-h-0 min-w-0 flex-1 flex-col gap-cluster', className)}
+        className={cn('flex min-h-0 min-w-0 flex-1 flex-col', className)}
       >
         {/* The tab strip above already reads "Runs", so the page heading is for structure and
             assistive tech rather than a second visible title competing with it. */}
@@ -66,27 +67,32 @@ export function WorkflowRunListView({
           Workflow runs
         </Header>
 
-        <WorkflowRunFilters
-          search={currentSearch}
-          facets={facets}
-          onChange={handleFiltersChange}
-          onClear={handleClearFilters}
-          hasActiveFilters={hasActiveFilters}
-        />
-
-        <WorkflowRunListContent
-          query={query}
-          totalRuns={runs.length}
-          runs={filteredRuns}
-          workspaceSlug={workspaceSlug}
-          projectSlug={projectSlug}
-          hasActiveFilters={hasActiveFilters}
-          onClearFilters={handleClearFilters}
-          hasNextPage={hasNextPage}
-          isFetchingNextPage={isFetchingNextPage}
-          isFetchNextPageError={isFetchNextPageError}
-          {...(onLoadMore ? {onLoadMore} : {})}
-        />
+        <Panel className="min-h-0 flex-1">
+          <PanelHeader className="flex-wrap">
+            <WorkflowRunFilters
+              search={currentSearch}
+              facets={facets}
+              onChange={handleFiltersChange}
+              onClear={handleClearFilters}
+              hasActiveFilters={hasActiveFilters}
+            />
+          </PanelHeader>
+          <PanelBody className="min-h-0 flex-1">
+            <WorkflowRunListContent
+              query={query}
+              totalRuns={runs.length}
+              runs={filteredRuns}
+              workspaceSlug={workspaceSlug}
+              projectSlug={projectSlug}
+              hasActiveFilters={hasActiveFilters}
+              onClearFilters={handleClearFilters}
+              hasNextPage={hasNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              isFetchNextPageError={isFetchNextPageError}
+              {...(onLoadMore ? {onLoadMore} : {})}
+            />
+          </PanelBody>
+        </Panel>
       </section>
     </TimeTickerProvider>
   );