@shipfox/client-workflows 12.0.1 → 13.0.0

package/src/page-harness-budget.test.ts

@@ -8,7 +8,7 @@ const PAGE_HARNESS_ALLOWLIST = [
   'src/components/workflow-run-summary/workflow-run-attempt-switcher.test.tsx',
   'src/components/workflow-run-view/workflow-run-view.test.tsx',
   'src/pages/project-workflows-page.test.tsx',
-  'src/pages/workflow-run-page.test.tsx',
+  'src/pages/workflow-run-pages.test.tsx',
 ];
 
 const srcDir = dirname(fileURLToPath(import.meta.url));

package/src/pages/project-workflows-page.test.tsx

@@ -1,6 +1,11 @@
 import {configureApiClient} from '@shipfox/client-api';
 import {fireEvent, screen, waitFor} from '@testing-library/react';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {
+  jsonResponse,
+  PROJECT_TEST_WID,
+  PROJECT_TEST_WSLUG,
+  renderProjectPage,
+} from '#test/pages.js';
 import {ProjectWorkflowsPage} from './project-workflows-page.js';
 
 const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
@@ -54,6 +59,13 @@ describe('ProjectWorkflowsPage', () => {
               finished_at: null,
               last_error_code: 'no-workflow-files',
               last_error_message: 'No workflow files found',
+              warnings: [
+                {
+                  code: 're-evaluating-command',
+                  message: 'Workflow data is re-executed as shell code.',
+                  path: 'jobs.build.steps.0.run',
+                },
+              ],
             },
           }),
         ),
@@ -66,6 +78,47 @@ describe('ProjectWorkflowsPage', () => {
       await screen.findByText('No workflow files found under .shipfox/workflows/.'),
     ).toBeInTheDocument();
     expect(screen.getByText('Workflow sync failed')).toBeInTheDocument();
+    expect(screen.queryByText('Workflow definition warnings')).not.toBeInTheDocument();
+  });
+
+  test('shows definition warnings without rendering a sync failure', async () => {
+    configureApiClient({
+      fetchImpl: createProjectDetailFetch({
+        definitions: jsonResponse(
+          definitionsDto({
+            sync: {
+              ref: 'main',
+              status: 'succeeded',
+              last_sync_at: '2026-05-07T01:00:00.000Z',
+              started_at: '2026-05-07T00:59:55.000Z',
+              finished_at: '2026-05-07T01:00:00.000Z',
+              last_error_code: null,
+              last_error_message: null,
+              warnings: [
+                {
+                  code: 're-evaluating-command',
+                  message: 'Workflow data is re-executed as shell code.',
+                  path: 'jobs.build.steps.0.run',
+                },
+                {
+                  code: 're-evaluating-command',
+                  message: 'Workflow data is re-executed as shell code.',
+                  path: 'jobs.build.steps.0.run',
+                },
+              ],
+            },
+          }),
+        ),
+      }),
+    });
+
+    renderWorkflowsPage();
+
+    expect(await screen.findByText('Workflow definition warnings')).toBeInTheDocument();
+    expect(screen.getAllByText('Workflow data is re-executed as shell code.')).toHaveLength(2);
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getAllByText('jobs.build.steps.0.run')).toHaveLength(2);
+    expect(screen.queryByText('Workflow sync failed')).not.toBeInTheDocument();
   });
 
   test('opens and closes the definition drawer by clicking the row', async () => {
@@ -123,10 +176,9 @@ describe('ProjectWorkflowsPage', () => {
 });
 
 function renderWorkflowsPage() {
-  return renderProjectPage(
-    `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/workflows`,
-    () => <ProjectWorkflowsPage projectId={PROJECT_ID} />,
-  );
+  return renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/p/project/workflows`, () => (
+    <ProjectWorkflowsPage projectId={PROJECT_ID} />
+  ));
 }
 
 function createProjectDetailFetch({
@@ -174,6 +226,7 @@ function projectDto() {
     id: PROJECT_ID,
     workspace_id: PROJECT_TEST_WID,
     name: 'Platform',
+    slug: 'platform',
     source: {
       connection_id: CONNECTION_ID,
       external_repository_id: 'platform',
@@ -238,6 +291,7 @@ function baseDefinitionsDto() {
       finished_at: '2026-05-07T01:00:00.000Z',
       last_error_code: null,
       last_error_message: null,
+      warnings: [],
     },
   };
 }

package/src/pages/project-workflows-page.tsx

@@ -103,6 +103,7 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
           />
 
           <WorkflowSyncAlert sync={sync} />
+          <WorkflowSyncWarnings sync={sync} />
 
           <WorkflowDefinitionsList
             definitions={definitions}
@@ -214,7 +215,7 @@ function WorkflowDefinitionsList({
                 // The workflow-name cell holds a `<button>` so the row is
                 // keyboard-reachable (Tab focuses, Enter/Space activates
                 // via native button semantics). The TableRow itself is no
-                // longer clickable — a row-level onClick would be invisible
+                // longer clickable: a row-level onClick would be invisible
                 // to keyboard users and require custom keydown handling.
                 // The `group` class on the row still drives the Run button
                 // reveal on hover or focus-within.
@@ -374,6 +375,38 @@ function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummary | null | undefin
   );
 }
 
+function WorkflowSyncWarnings({sync}: {sync: DefinitionSyncSummary | null | undefined}) {
+  if (sync?.status !== 'succeeded' || sync.warnings.length === 0) return null;
+
+  const seenKeys = new Map<string, number>();
+  const warningItems = sync.warnings.map((warning) => {
+    const baseKey = `${warning.code}-${warning.path ?? 'workflow'}-${warning.message}`;
+    const occurrence = seenKeys.get(baseKey) ?? 0;
+    seenKeys.set(baseKey, occurrence + 1);
+    return {key: `${baseKey}-${occurrence}`, warning};
+  });
+
+  return (
+    <Callout role="status" type="warning">
+      <div className="flex flex-col gap-6">
+        <Text size="sm" bold>
+          Workflow definition warnings
+        </Text>
+        <ul className="flex flex-col gap-4">
+          {warningItems.map(({key, warning}) => (
+            <li key={key}>
+              <Text size="sm">{warning.message}</Text>
+              {warning.path ? (
+                <Code className="text-foreground-neutral-muted">{warning.path}</Code>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Callout>
+  );
+}
+
 function DefinitionSheet({
   definition,
   onOpenChange,

package/src/pages/workflow-run-detail-page.tsx

@@ -0,0 +1,45 @@
+import {useNavigate} from '@tanstack/react-router';
+import {useCallback} from 'react';
+import {WorkflowRunView} from '#components/workflow-run-view/index.js';
+import type {WorkflowRunSelectionInput} from '#core/workflow-run-url-state.js';
+import {type WorkflowRunsSearch, workflowRunSearchParams} from '#routes/inputs.js';
+
+interface WorkflowRunDetailPageProps {
+  projectId: string;
+  workspaceSlug: string;
+  projectSlug: string;
+  workflowRunId?: string | undefined;
+  search?: WorkflowRunsSearch;
+}
+
+export function WorkflowRunDetailPage({
+  projectId,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  search = {},
+}: WorkflowRunDetailPageProps) {
+  const navigate = useNavigate();
+  const selection: WorkflowRunSelectionInput = search;
+  const onSelectionChange = useCallback(
+    (nextSelection: WorkflowRunSelectionInput) => {
+      navigate({
+        search: workflowRunSearchParams(search, nextSelection) as never,
+      });
+    },
+    [navigate, search],
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-base">
+      <WorkflowRunView
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+        projectSlug={projectSlug}
+        workflowRunId={workflowRunId}
+        selection={selection}
+        onSelectionChange={onSelectionChange}
+      />
+    </div>
+  );
+}

package/src/pages/workflow-run-list-page.tsx

@@ -0,0 +1,65 @@
+import {useNavigate} from '@tanstack/react-router';
+import {useCallback} from 'react';
+import {WorkflowRunList} from '#components/workflow-run-list/workflow-run-list.js';
+import {
+  applyWorkflowRunFilterPatch,
+  clearWorkflowRunFilters,
+  type WorkflowRunFilterPatch,
+  type WorkflowRunsSearch,
+  workflowRunSearchParams,
+} from '#routes/inputs.js';
+
+interface WorkflowRunsPageProps {
+  projectId: string;
+  workspaceSlug: string;
+  projectSlug: string;
+  search?: WorkflowRunsSearch;
+}
+
+const EMPTY_SEARCH: WorkflowRunsSearch = {};
+
+export function WorkflowRunsPage({
+  projectId,
+  workspaceSlug,
+  projectSlug,
+  search = EMPTY_SEARCH,
+}: WorkflowRunsPageProps) {
+  const navigate = useNavigate();
+
+  // Filter changes replace history instead of pushing it, so Back leaves the list rather than
+  // walking every keystroke of a search box.
+  const commitSearch = useCallback(
+    (next: WorkflowRunsSearch) => {
+      navigate({
+        search: workflowRunSearchParams(next, {}) as never,
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  const onFiltersChange = useCallback(
+    (patch: WorkflowRunFilterPatch) => commitSearch(applyWorkflowRunFilterPatch(search, patch)),
+    [commitSearch, search],
+  );
+
+  const onClearFilters = useCallback(
+    () => commitSearch(clearWorkflowRunFilters(search)),
+    [commitSearch, search],
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-base">
+      <div className="mx-auto flex min-h-0 w-full max-w-[1120px] flex-1 flex-col px-24 py-24">
+        <WorkflowRunList
+          projectId={projectId}
+          workspaceSlug={workspaceSlug}
+          projectSlug={projectSlug}
+          search={search}
+          onFiltersChange={onFiltersChange}
+          onClearFilters={onClearFilters}
+        />
+      </div>
+    </div>
+  );
+}

package/src/pages/{workflow-run-page.test.tsx → workflow-run-pages.test.tsx}

@@ -14,13 +14,15 @@ import {
   workflowStepAttemptDto,
   workflowStepDto,
 } from '#test/fixtures/workflow-run.js';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
-import {WorkflowRunPage} from './workflow-run-page.js';
+import {jsonResponse, PROJECT_TEST_WSLUG, renderProjectPage} from '#test/pages.js';
+import {WorkflowRunDetailPage} from './workflow-run-detail-page.js';
+import {WorkflowRunsPage} from './workflow-run-list-page.js';
 
 const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
 const DEFINITION_ID = '55555555-5555-4555-8555-555555555555';
 const RUN_ID = '66666666-6666-4666-8666-666666666666';
 const SECOND_RUN_ID = '66666666-6666-4666-8666-000000000002';
+const OLDER_RUN_ID = '66666666-6666-4666-8666-000000000003';
 const BUILD_JOB_ID = '77777777-7777-4777-8777-777777777777';
 const BUILD_STEP_ID = '99999999-9999-4999-8999-000000000000';
 const BUILD_ATTEMPT_ID = 'aaaaaaaa-aaaa-4aaa-8aaa-000000000000';
@@ -32,7 +34,12 @@ const DEPLOY_ATTEMPT_TWO_ID = 'aaaaaaaa-aaaa-4aaa-8aaa-000000000002';
 const DEPLOY_EXECUTION_ONE_ID = 'bbbbbbbb-bbbb-4bbb-8bbb-000000000001';
 const DEPLOY_EXECUTION_TWO_ID = 'bbbbbbbb-bbbb-4bbb-8bbb-000000000002';
 const SMOKE_WEB_RE = /smoke-web/u;
-const EXECUTION_ONE_MENU_ITEM_PATTERN = /#1/;
+const DEPLOY_WEB_RE = /deploy-web/u;
+const OLDER_RUN_RE = /older-run/u;
+const INTEGRATION_TESTS_RE = /integration-tests/u;
+const BUILD_IMAGE_RE = /build-image/u;
+const STATUS_FILTER_RE = /^Status\b.*filter$/u;
+const EXECUTION_ONE_MENU_ITEM = /Execution #1: deploy review #1/u;
 const RUN_DETAIL_PATH_RE = /^\/workflows\/runs\/([^/]+)$/u;
 const RUN_OVERRIDES = {
   id: RUN_ID,
@@ -47,47 +54,129 @@ const SECOND_RUN_OVERRIDES = {
   id: SECOND_RUN_ID,
   name: 'smoke-web',
 } satisfies Partial<WorkflowRunResponseDto>;
+const OLDER_RUN_OVERRIDES = {
+  ...RUN_OVERRIDES,
+  id: OLDER_RUN_ID,
+  name: 'older-run',
+} satisfies Partial<WorkflowRunResponseDto>;
 
-describe('WorkflowRunPage', () => {
-  test('keeps the runs list mounted and only skeletons the run view until a run is selected', async () => {
+describe('WorkflowRunPages', () => {
+  test('renders the list route without mounting run detail', async () => {
     configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
 
     renderRunsPath();
 
-    // The run view has nothing to show until a run is selected, so it skeletons...
-    expect(await screen.findByLabelText('Loading workflow run')).toBeInTheDocument();
-    // ...but the runs list itself stays mounted; it is never replaced by a page skeleton.
+    expect(await screen.findByLabelText('Loading runs')).toBeInTheDocument();
     expect(screen.getByLabelText('Workflow runs')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Loading workflow run')).not.toBeInTheDocument();
   });
 
-  test('redirects to the most recent run when opened without a workflow run id', async () => {
+  test('keeps the list route and filters in place instead of redirecting to a run', async () => {
     configureApiClient({fetchImpl: createRunsListFetch()});
 
-    const {router} = renderRunsPath(
-      `?job=${DEPLOY_JOB_ID}&step=${DEPLOY_STEP_ID}&stepAttempt=${DEPLOY_ATTEMPT_TWO_ID}&runAttempt=1`,
-    );
+    const {router} = renderRunsPath('?search=deploy-web&status=running');
 
-    // Landing on /runs with runs present redirects to the newest run, so its row becomes the
-    // selected (current) row in the rail even though the opened URL carried no workflow run id.
-    const selectedRow = await screen.findByRole('link', {current: 'page'});
-    expect(selectedRow).toHaveTextContent('deploy-web');
-    expect(currentSearch(router).job).toBeUndefined();
-    expect(currentSearch(router).step).toBeUndefined();
-    expect(currentSearch(router).stepAttempt).toBeUndefined();
-    expect(currentSearch(router).runAttempt).toBeUndefined();
+    expect(await screen.findByRole('link', {name: DEPLOY_WEB_RE})).toBeInTheDocument();
+    expect(router.state.location.pathname).toBe(`/w/${PROJECT_TEST_WSLUG}/p/project/runs`);
+    expect(currentSearch(router)).toMatchObject({search: 'deploy-web', status: 'running'});
+    expect(screen.queryByLabelText('Loading workflow run')).not.toBeInTheDocument();
+  });
+
+  test('clearing filters on the list route resets search and status in the URL', async () => {
+    const user = userEvent.setup();
+    configureApiClient({fetchImpl: createRunsListFetch()});
+
+    const {router} = renderRunsPath('?search=no-such-run&status=failed');
+
+    expect(await screen.findByText('No matching runs')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', {name: 'Clear filters'}));
+
+    await waitFor(() => {
+      expect(currentSearch(router).search).toBeUndefined();
+    });
+    expect(currentSearch(router).status).toBeUndefined();
+    expect(await screen.findByRole('link', {name: DEPLOY_WEB_RE})).toBeInTheDocument();
   });
 
-  test('shows the first-time-use surface when the project has no runs', async () => {
+  test('honors a deep link that repeats a filter key', async () => {
+    configureApiClient({fetchImpl: createMixedStatusRunsFetch()});
+
+    renderRunsPath('?status=failed&status=running');
+
+    expect(await screen.findByRole('link', {name: DEPLOY_WEB_RE})).toBeInTheDocument();
+    expect(await screen.findByRole('link', {name: INTEGRATION_TESTS_RE})).toBeInTheDocument();
+    expect(screen.queryByRole('link', {name: BUILD_IMAGE_RE})).not.toBeInTheDocument();
+  });
+
+  test('writes a multi-select as repeated keys rather than one joined value', async () => {
+    const user = userEvent.setup();
+    configureApiClient({fetchImpl: createMixedStatusRunsFetch()});
+
+    const {router} = renderRunsPath('?status=failed');
+
+    await user.click(await screen.findByRole('button', {name: STATUS_FILTER_RE}));
+    await user.click(await screen.findByRole('menuitemcheckbox', {name: 'Running'}));
+
+    await waitFor(() => {
+      expect(currentSearch(router).status).toEqual(['failed', 'running']);
+    });
+    expect(router.state.location.searchStr).toBe('?status=failed&status=running');
+  });
+
+  test('replaces history on a filter change so back leaves the list', async () => {
+    const user = userEvent.setup();
+    configureApiClient({fetchImpl: createMixedStatusRunsFetch()});
+
+    const {router} = renderRunsPath();
+    const initialLength = router.history.length;
+
+    await user.type(await screen.findByLabelText('Search runs'), 'deploy');
+
+    await waitFor(() => {
+      expect(currentSearch(router).search).toBe('deploy');
+    });
+    expect(router.history.length).toBe(initialLength);
+  });
+
+  test('loads older pages before reporting that a search has no matches', async () => {
+    const user = userEvent.setup();
+    const fetchImpl = createPaginatedRunsFetch();
+    configureApiClient({fetchImpl});
+
+    renderRunsPath('?search=older-run');
+
+    expect(await screen.findByText('No matches in loaded history')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', {name: 'Load more runs'}));
+
+    expect(await screen.findByRole('link', {name: OLDER_RUN_RE})).toBeInTheDocument();
+    expect(
+      fetchImpl.mock.calls.some((call) => {
+        const url = new URL(requestInputUrl(call[0]));
+        return url.searchParams.get('cursor') === 'cursor-2';
+      }),
+    ).toBe(true);
+  });
+
+  test('shows the list empty state without mounting run detail', async () => {
     configureApiClient({fetchImpl: createEmptyRunsFetch()});
 
     renderRunsPath();
 
-    expect(await screen.findByText('No workflow runs yet')).toBeInTheDocument();
-    // The rail and the perpetual detail skeleton give way to the onboarding surface entirely.
-    expect(screen.queryByLabelText('Workflow runs')).not.toBeInTheDocument();
+    expect(await screen.findByText('No runs yet')).toBeInTheDocument();
+    expect(screen.getByLabelText('Workflow runs')).toBeInTheDocument();
     expect(screen.queryByLabelText('Loading workflow run')).not.toBeInTheDocument();
   });
 
+  test('renders the detail route without mounting the run list', async () => {
+    configureApiClient({fetchImpl: createRunDetailFetch()});
+
+    renderRunPath();
+
+    expect(await screen.findByRole('button', {name: 'deploy, Running'})).toBeInTheDocument();
+    expect(screen.queryByLabelText('Workflow runs')).not.toBeInTheDocument();
+  });
+
   test('restores a deep-linked job and exact attempt after data loads', async () => {
     configureApiClient({fetchImpl: createRunDetailFetch()});
 
@@ -150,10 +239,14 @@ describe('WorkflowRunPage', () => {
 
     await user.click(
       await screen.findByRole('button', {
-        name: 'Switch job execution, currently execution 2',
+        name: 'Switch job execution, currently execution 2: deploy review #2',
+      }),
+    );
+    await user.click(
+      screen.getByRole('menuitem', {
+        name: EXECUTION_ONE_MENU_ITEM,
       }),
     );
-    await user.click(screen.getByRole('menuitem', {name: EXECUTION_ONE_MENU_ITEM_PATTERN}));
 
     await waitFor(() => {
       expect(currentSearch(router)).toMatchObject({
@@ -162,6 +255,7 @@ describe('WorkflowRunPage', () => {
       });
     });
     expect(screen.getByRole('button', {name: 'deploy, Failed, attempt 1'})).toBeInTheDocument();
+    expect(screen.getAllByText('deploy review #1')).not.toHaveLength(0);
 
     await user.click(screen.getByRole('button', {name: 'deploy, Failed, attempt 1'}));
 
@@ -229,7 +323,7 @@ describe('WorkflowRunPage', () => {
     );
   });
 
-  test('run rail links clear job, step, and attempt when switching runs', async () => {
+  test('run list links navigate to detail and back restores list filters', async () => {
     const user = userEvent.setup();
     configureApiClient({
       fetchImpl: createRunDetailFetch({
@@ -240,41 +334,62 @@ describe('WorkflowRunPage', () => {
         },
       }),
     });
-    const {router} = renderRunPath(`?step=${DEPLOY_STEP_ID}&stepAttempt=${DEPLOY_ATTEMPT_TWO_ID}`);
+    const {router} = renderRunsPath('?search=smoke&status=running');
 
     await user.click(await screen.findByRole('link', {name: SMOKE_WEB_RE}));
 
     await waitFor(() => {
-      expect(router.state.location.pathname).toContain(SECOND_RUN_ID);
+      expect(router.state.location.pathname).toBe(
+        `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${SECOND_RUN_ID}`,
+      );
     });
-    expect(currentSearch(router).job).toBeUndefined();
-    expect(currentSearch(router).step).toBeUndefined();
-    expect(currentSearch(router).stepAttempt).toBeUndefined();
-    expect(currentSearch(router).runAttempt).toBeUndefined();
+    expect(screen.queryByLabelText('Workflow runs')).not.toBeInTheDocument();
+    expect(currentSearch(router)).toMatchObject({search: 'smoke', status: 'running'});
+
+    await act(() => {
+      router.history.back();
+    });
+
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe(`/w/${PROJECT_TEST_WSLUG}/p/project/runs`);
+    });
+    expect(currentSearch(router)).toMatchObject({search: 'smoke', status: 'running'});
+    expect(screen.getByLabelText('Workflow runs')).toBeInTheDocument();
+    expect(screen.getByRole('link', {name: SMOKE_WEB_RE})).toBeInTheDocument();
   });
 });
 
 function renderRunsPath(search = '') {
   return renderProjectPage(
-    `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs${search}`,
-    ({workflowRunId, search}) => (
-      <WorkflowRunPage
-        workspaceId={PROJECT_TEST_WID}
-        projectId={PROJECT_ID}
-        workflowRunId={workflowRunId}
-        search={search}
-      />
-    ),
+    `/w/${PROJECT_TEST_WSLUG}/p/project/runs${search}`,
+    ({workflowRunId, search}) =>
+      workflowRunId ? (
+        <WorkflowRunDetailPage
+          projectId={PROJECT_ID}
+          workspaceSlug={PROJECT_TEST_WSLUG}
+          projectSlug="project"
+          workflowRunId={workflowRunId}
+          search={search}
+        />
+      ) : (
+        <WorkflowRunsPage
+          projectId={PROJECT_ID}
+          workspaceSlug={PROJECT_TEST_WSLUG}
+          projectSlug="project"
+          search={search}
+        />
+      ),
   );
 }
 
 function renderRunPath(search = '') {
   return renderProjectPage(
-    `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/runs/${RUN_ID}${search}`,
+    `/w/${PROJECT_TEST_WSLUG}/p/project/runs/${RUN_ID}${search}`,
     ({workflowRunId, search}) => (
-      <WorkflowRunPage
-        workspaceId={PROJECT_TEST_WID}
+      <WorkflowRunDetailPage
         projectId={PROJECT_ID}
+        workspaceSlug={PROJECT_TEST_WSLUG}
+        projectSlug="project"
         workflowRunId={workflowRunId}
         search={search}
       />
@@ -303,6 +418,55 @@ function createRunsListFetch() {
   });
 }
 
+function createMixedStatusRunsFetch() {
+  const runs = [
+    workflowRunDto({...RUN_OVERRIDES, status: 'running'}),
+    workflowRunDto({
+      ...RUN_OVERRIDES,
+      id: SECOND_RUN_ID,
+      name: 'integration-tests',
+      workflow_name: 'integration-tests',
+      status: 'failed',
+    }),
+    workflowRunDto({
+      ...RUN_OVERRIDES,
+      id: OLDER_RUN_ID,
+      name: 'build-image',
+      workflow_name: 'build-image',
+      status: 'succeeded',
+    }),
+  ];
+
+  return vi.fn((input: RequestInfo | URL) => {
+    const url = new URL(requestInputUrl(input));
+
+    if (url.pathname === '/workflows/runs') {
+      return Promise.resolve(jsonResponse({runs, next_cursor: null, filtered_total_count: 3}));
+    }
+
+    return Promise.resolve(jsonResponse({code: 'not-found'}, {status: 404}));
+  });
+}
+
+function createPaginatedRunsFetch() {
+  return vi.fn((input: RequestInfo | URL) => {
+    const url = new URL(requestInputUrl(input));
+
+    if (url.pathname === '/workflows/runs') {
+      const isSecondPage = url.searchParams.get('cursor') === 'cursor-2';
+      return Promise.resolve(
+        jsonResponse({
+          runs: [workflowRunDto(isSecondPage ? OLDER_RUN_OVERRIDES : RUN_OVERRIDES)],
+          next_cursor: isSecondPage ? null : 'cursor-2',
+          filtered_total_count: isSecondPage ? null : 2,
+        }),
+      );
+    }
+
+    return Promise.resolve(jsonResponse({code: 'not-found'}, {status: 404}));
+  });
+}
+
 function createRunDetailFetch({
   runs = [workflowRunDto(RUN_OVERRIDES)],
   details = {[RUN_ID]: defaultRunDetailDto()},
@@ -464,7 +628,7 @@ function retryRunDetailDto(): WorkflowRunDetailResponseDto {
             id: DEPLOY_EXECUTION_ONE_ID,
             job_id: DEPLOY_JOB_ID,
             sequence: 1,
-            name: 'deploy',
+            name: 'deploy review #1',
             status: 'failed',
             started_at: '2026-05-07T01:01:00.000Z',
             finished_at: '2026-05-07T01:02:00.000Z',
@@ -488,7 +652,7 @@ function retryRunDetailDto(): WorkflowRunDetailResponseDto {
             id: DEPLOY_EXECUTION_TWO_ID,
             job_id: DEPLOY_JOB_ID,
             sequence: 2,
-            name: 'deploy',
+            name: 'deploy review #2',
             status: 'running',
             started_at: '2026-05-07T01:03:00.000Z',
             steps: [