@shipfox/client-workflows 20.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-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);

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>
   );

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

@@ -75,15 +75,15 @@ const SAMPLE_RUNS: WorkflowRunListItem[] = [
 
 // One story on the full-width page. The data states (loading / empty / errors / runs) are
 // driven by args; search, the filter menus, "clear filters" and "no matches" are live in the
-// rendered toolbar since the view owns that state. The decorator gives the list the 1120px
-// content cap and a real height, so `flex-1` scrolls the way it does in the app shell.
+// rendered toolbar since the view owns that state. The decorator gives the list a full-width
+// subtle canvas and a real height, so `flex-1` scrolls the way it does in the app shell.
 const meta = {
   title: 'Workflows/WorkflowRunList',
   component: WorkflowRunListView,
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="flex h-600 w-[1120px] max-w-full bg-background-neutral-base p-24">
+      <div className="flex h-600 w-full bg-background-subtle-base p-24">
         <Story />
       </div>
     ),
@@ -137,27 +137,18 @@ export const NarrowLayout: Story = {
 };
 
 /**
- * Row density against the three strip sizes the threshold has to survive: comfortably under
- * it, comfortably over it, and far enough over that the overflow count carries the failure.
+ * Row density against the three strip sizes the preview bound has to survive: comfortably under
+ * it, just over it, and far enough over that the overflow count carries the failure.
  */
 export const JobStripDensity: Story = {
   args: {
     runs: [
       makeRun('succeeded', 'two-jobs', 2, {jobs: ['succeeded', 'succeeded']}),
-      makeRun('failed', 'twelve-jobs', 6, {
+      makeRun('failed', 'seventeen-jobs', 6, {
         jobs: [
-          'succeeded',
-          'succeeded',
-          'succeeded',
+          ...(Array.from({length: 12}, () => 'succeeded') as JobStatusDto[]),
           'failed',
-          'succeeded',
-          'succeeded',
-          'skipped',
-          'skipped',
-          'succeeded',
-          'succeeded',
-          'succeeded',
-          'succeeded',
+          ...(Array.from({length: 4}, () => 'skipped') as JobStatusDto[]),
         ],
       }),
       makeRun('running', 'forty-jobs', 9, {
@@ -229,9 +220,7 @@ function StateExample({label, children}: {label: string; children: ReactNode}) {
       <Code variant="label" className="text-foreground-neutral-subtle">
         {label}
       </Code>
-      <div className="flex h-560 rounded-8 border border-border-neutral-base bg-background-neutral-base p-16">
-        {children}
-      </div>
+      <div className="flex h-560 min-w-0 bg-background-subtle-base p-16">{children}</div>
     </div>
   );
 }

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

@@ -22,7 +22,7 @@ import {
   workflowRunCommitLabel,
 } from '#core/workflow-run.js';
 import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
-import {JobStatusStrip, jobStatusSummary} from './job-status-strip.js';
+import {JOB_STATUS_STRIP_WIDTH, JobStatusStrip, jobStatusSummary} from './job-status-strip.js';
 
 export function WorkflowRunRowList({
   runs,
@@ -34,10 +34,10 @@ export function WorkflowRunRowList({
   projectSlug?: string | undefined;
 }) {
   return (
-    // 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">
+    // A container, not the viewport, drives the row's breakpoints. 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">
       {runs.map((run) => (
         <li key={run.id}>
           <WorkflowRunRow run={run} workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
@@ -55,9 +55,9 @@ export function WorkflowRunRowList({
  * 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.
+ * The 976px threshold keeps identity and provenance on one line; below it, provenance drops
+ * beneath the identity. The 1200px threshold keeps the full job preview and numeric columns
+ * readable together; below it, the strip is hidden so the numeric columns remain aligned.
  */
 export function WorkflowRunRow({
   run,
@@ -99,10 +99,14 @@ export function WorkflowRunRow({
       </div>
 
       <span className="flex shrink-0 items-center gap-cluster">
-        {/* 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">
+        {/* Reserve the API preview's full width so the overflow count cannot paint over the
+            duration, and keep it even when a run has no jobs planned yet so the numerics stay in
+            line down the list instead of stepping in and out. The max-content width expands if
+            the payload ever exceeds the current API preview bound. */}
+        <span
+          className="hidden w-max shrink-0 @min-[1200px]:flex"
+          style={{minWidth: JOB_STATUS_STRIP_WIDTH}}
+        >
           <JobStatusStrip jobs={run.jobs} />
         </span>
         <span className="flex w-64 justify-end">
@@ -121,7 +125,7 @@ export function WorkflowRunRow({
   // 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-inline px-row py-row 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';
+    'flex w-full min-w-0 items-center gap-inline px-row py-row text-left transition-colors hover:bg-background-neutral-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

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-background">
+  <div className="min-h-screen bg-background-subtle-base">
     <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-background p-16" />
+      <div className="min-h-0 flex-1 bg-background-subtle-base p-16" />
     </div>
   </div>
 );

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

@@ -38,7 +38,8 @@ describe('WorkflowRunSummary', () => {
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(summary).toHaveClass('bg-background-neutral-background', 'px-row', 'py-row');
+    expect(summary).toHaveClass('px-row', 'py-row');
+    expect(summary).not.toHaveClass('bg-background-subtle-base');
     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);

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

@@ -70,10 +70,7 @@ export function WorkflowRunSummary({
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <section
-        aria-labelledby={headingId}
-        className="bg-background-neutral-background px-row py-row"
-      >
+      <section aria-labelledby={headingId} className="px-row py-row">
         <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-cluster gap-y-inline overflow-hidden max-[480px]:grid-cols-1">
           <div className="col-start-1 row-start-1 min-w-0 max-[480px]:col-start-auto max-[480px]:row-start-auto">
             <div className="flex min-w-0 items-center gap-inline">

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

@@ -53,7 +53,7 @@ export function RunWorkspaceNav({
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <aside className="flex min-h-0 w-full shrink-0 flex-col border-b border-border-neutral-base bg-background-neutral-background min-[768px]:w-240 min-[768px]:border-b-0 min-[768px]:border-r">
+      <aside className="flex min-h-0 w-full shrink-0 flex-col border-b border-border-neutral-base min-[768px]:w-240 min-[768px]:border-b-0 min-[768px]:border-r">
         <Collapsible
           open={mobileOpen}
           onOpenChange={setMobileOpen}

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

@@ -7,10 +7,7 @@ import {Text} from '@shipfox/react-ui/typography';
 
 export function WorkflowRunSkeleton() {
   return (
-    <section
-      aria-label="Loading workflow run"
-      className="bg-background-neutral-background px-row py-row"
-    >
+    <section aria-label="Loading workflow run" className="px-row py-row">
       <div className="flex min-w-0 flex-wrap items-center gap-x-cluster gap-y-inline">
         <div className="flex min-w-0 items-center gap-inline">
           <Skeleton className="size-8 rounded-full" />