@shipfox/client-workflows 19.0.0 → 21.0.0

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

@@ -20,10 +20,9 @@ import {
   workflowRunActor,
   workflowRunBranchLabel,
   workflowRunCommitLabel,
-  workflowRunListItemDisplay,
 } 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,
@@ -35,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} />
@@ -56,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,
@@ -69,9 +68,11 @@ export function WorkflowRunRow({
   workspaceSlug?: string | undefined;
   projectSlug?: string | undefined;
 }) {
-  const display = workflowRunListItemDisplay(run);
-  const durationLabel = useWorkflowRunDurationAccessibleLabel(display.duration);
-  const statusLabel = getWorkflowStatusVisual(display.status).label;
+  const duration = run.runAttempt.displayDuration;
+  const hasStarted = run.jobs.hasStartedJobExecution;
+  const durationLabel = useWorkflowRunDurationAccessibleLabel(duration, hasStarted);
+  const status = run.runAttempt.status;
+  const statusLabel = getWorkflowStatusVisual(status).label;
   const runNumberLabel = formatWorkflowRunNumberLabel(run);
   const branch = workflowRunBranchLabel(run);
   const commit = workflowRunCommitLabel(run);
@@ -79,7 +80,7 @@ export function WorkflowRunRow({
 
   const body = (
     <>
-      <WorkflowStatusIcon status={display.status} size={14} className="shrink-0" />
+      <WorkflowStatusIcon status={status} size={14} className="shrink-0" />
 
       <div className="flex min-w-0 flex-1 flex-col gap-tight @min-[976px]:flex-row @min-[976px]:items-center @min-[976px]:gap-cluster">
         <span className="flex min-w-0 items-center gap-inline @min-[976px]:flex-1">
@@ -98,14 +99,18 @@ 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">
-          <WorkflowRunDurationLabel duration={display.duration} />
+          <WorkflowRunDurationLabel duration={duration} hasStarted={hasStarted} />
         </span>
         <Code
           variant="label"
@@ -120,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

@@ -18,7 +18,6 @@ import {WorkflowRunAttempt, type WorkflowRunStatus} from '#core/workflow-run.js'
 import {
   runAttemptsResponseDto,
   workflowJobDto,
-  workflowJobExecutionDto,
   workflowRunAttemptDto,
   workflowRunDetail,
 } from '#test/fixtures/workflow-run.js';
@@ -57,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>
 );
@@ -203,19 +202,6 @@ export const Durations: Story = {
   ),
 };
 
-/**
- * A live attempt whose jobs have not started. The header reports the wait rather than a run
- * that never began, and names the job the run is blocked on once there is more than one.
- */
-export const Queued: Story = {
-  render: () => (
-    <div className="flex flex-col">
-      <WorkflowRunSummary run={queuedRun('release-queued', ['build'])} />
-      <WorkflowRunSummary run={queuedRun('release-queued-fan-out', ['build', 'lint', 'test'])} />
-    </div>
-  ),
-};
-
 export const Cancellable: Story = {
   args: {
     run: workflowRunDetail({status: 'running'}),
@@ -223,30 +209,6 @@ export const Cancellable: Story = {
   },
 };
 
-function queuedRun(name: string, jobNames: string[]) {
-  return workflowRunDetail({
-    status: 'running',
-    name,
-    run_attempt: workflowRunAttemptDto({
-      status: 'running',
-      created_at: RUN_STARTED_AT,
-      started_at: RUN_STARTED_AT,
-      finished_at: null,
-    }),
-    jobs: jobNames.map((jobName, index) =>
-      workflowJobDto({
-        name: jobName,
-        status: 'pending',
-        job_executions: [
-          workflowJobExecutionDto({
-            queued_at: new Date(Date.parse(RUN_STARTED_AT) + index * 1000).toISOString(),
-          }),
-        ],
-      }),
-    ),
-  });
-}
-
 export const Cancelling: Story = {
   args: {
     run: workflowRunDetail({status: 'running'}),

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);
@@ -159,6 +160,17 @@ describe('WorkflowRunSummary', () => {
   test('shows a live selected attempt duration for running runs', async () => {
     vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-05-07T01:02:14.000Z'));
     renderSummary({
+      jobs: [
+        workflowJobDto({
+          status: 'running',
+          job_executions: [
+            workflowJobExecutionDto({
+              status: 'running',
+              started_at: '2026-05-07T01:02:00.000Z',
+            }),
+          ],
+        }),
+      ],
       run_attempt: {
         id: '11111111-1111-4111-8111-000000000001',
         workflow_run_id: RUN_ID,
@@ -178,7 +190,9 @@ describe('WorkflowRunSummary', () => {
     expect(duration).toHaveAttribute('aria-label', 'running 2m 14s');
   });
 
-  test('reads a running run whose jobs have not started as queued', async () => {
+  // The header reports the attempt the API returned. Whether a job has reached a runner yet is
+  // the job surfaces' business, so an attempt whose jobs are all pending still reads as running.
+  test('reads a running attempt as running whatever its jobs have reached', async () => {
     vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-05-07T01:02:14.000Z'));
     renderSummary({
       jobs: [workflowJobDto({status: 'pending'})],
@@ -187,50 +201,89 @@ describe('WorkflowRunSummary', () => {
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(within(summary).getAllByText('Queued')).not.toHaveLength(0);
-    expect(within(summary).queryByText('Running')).not.toBeInTheDocument();
-    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'queued 2m 14s');
+    expect(within(summary).getAllByText('Running')).not.toHaveLength(0);
+    expect(within(summary).queryByText('Queued')).not.toBeInTheDocument();
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'running 2m 14s');
   });
 
-  test('names the job a queued run is waiting on when there is more than one', async () => {
+  test('uses a neutral verb when an attempt finished before any job execution started', async () => {
     renderSummary({
+      status: 'cancelled',
       jobs: [
         workflowJobDto({
-          name: 'lint',
           status: 'pending',
           job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T01:00:00.000Z'})],
         }),
-        workflowJobDto({
-          name: 'build',
-          status: 'pending',
-          job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T00:59:00.000Z'})],
-        }),
       ],
-      run_attempt: runningAttemptDto(),
+      run_attempt: {
+        id: '11111111-1111-4111-8111-000000000001',
+        workflow_run_id: RUN_ID,
+        attempt: 1,
+        status: 'cancelled',
+        created_at: '2026-05-07T01:00:00.000Z',
+        started_at: '2026-05-07T01:00:00.000Z',
+        finished_at: '2026-05-07T01:02:14.000Z',
+        rerun_mode: null,
+      },
     });
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(within(summary).getByText('waiting on')).toBeInTheDocument();
-    expect(within(summary).getByText('build')).toBeInTheDocument();
+    expect(within(summary).getAllByText('Cancelled')).not.toHaveLength(0);
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'lasted 2m 14s');
   });
 
-  test('leaves the waiting job unnamed when the run has a single job', async () => {
+  test('uses the run verb when a cancelled job execution started', async () => {
     renderSummary({
+      status: 'cancelled',
       jobs: [
         workflowJobDto({
-          name: 'build',
-          status: 'pending',
-          job_executions: [workflowJobExecutionDto({queued_at: '2026-05-07T01:00:00.000Z'})],
+          status: 'cancelled',
+          job_executions: [
+            workflowJobExecutionDto({
+              status: 'cancelled',
+              started_at: '2026-05-07T01:00:05.000Z',
+            }),
+          ],
         }),
       ],
-      run_attempt: runningAttemptDto(),
+      run_attempt: {
+        id: '11111111-1111-4111-8111-000000000001',
+        workflow_run_id: RUN_ID,
+        attempt: 1,
+        status: 'cancelled',
+        created_at: '2026-05-07T01:00:00.000Z',
+        started_at: '2026-05-07T01:00:00.000Z',
+        finished_at: '2026-05-07T01:02:14.000Z',
+        rerun_mode: null,
+      },
+    });
+
+    const summary = await screen.findByRole('region', {name: 'deploy-web'});
+
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'ran 2m 14s');
+  });
+
+  test('uses a neutral verb when every job was skipped', async () => {
+    renderSummary({
+      status: 'succeeded',
+      jobs: [workflowJobDto({status: 'skipped'})],
+      run_attempt: {
+        id: '11111111-1111-4111-8111-000000000001',
+        workflow_run_id: RUN_ID,
+        attempt: 1,
+        status: 'succeeded',
+        created_at: '2026-05-07T01:00:00.000Z',
+        started_at: '2026-05-07T01:00:00.000Z',
+        finished_at: '2026-05-07T01:02:14.000Z',
+        rerun_mode: null,
+      },
     });
 
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
 
-    expect(within(summary).getAllByText('Queued')).not.toHaveLength(0);
-    expect(within(summary).queryByText('waiting on')).not.toBeInTheDocument();
+    expect(within(summary).getAllByText('Succeeded')).not.toHaveLength(0);
+    expect(within(summary).getByText('2m 14s')).toHaveAttribute('aria-label', 'lasted 2m 14s');
   });
 
   test('does not render a whole-run source control', async () => {

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

@@ -12,7 +12,7 @@ import {useIsTextTruncated} from '@shipfox/react-ui/hooks';
 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 {Code, Header, Text} from '@shipfox/react-ui/typography';
+import {Header, Text} from '@shipfox/react-ui/typography';
 import {useId} from 'react';
 import {WorkflowRunNumberLabel} from '#components/workflow-run-number-label.js';
 import {
@@ -21,17 +21,13 @@ import {
   WORKFLOW_RUN_STATUSES,
   type WorkflowRunDetail,
   type WorkflowRunRerunMode,
-  workflowRunBlockingJob,
-  workflowRunDetailDisplay,
 } from '#core/workflow-run.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';
 
 const STATUS_BADGE_LABEL_WIDTH_CH = Math.max(
-  ...[...WORKFLOW_RUN_STATUSES, 'queued' as const].map(
-    (status) => getWorkflowStatusVisual(status).label.length,
-  ),
+  ...WORKFLOW_RUN_STATUSES.map((status) => getWorkflowStatusVisual(status).label.length),
 );
 const RERUN_BUTTON_SURFACE_CLASS_NAME =
   'bg-background-neutral-base hover:bg-background-neutral-hover active:bg-background-neutral-pressed';
@@ -60,28 +56,21 @@ export function WorkflowRunSummary({
   latestAttempt,
 }: WorkflowRunSummaryProps) {
   const headingId = useId();
-  const display = workflowRunDetailDisplay(run);
-  const status = getWorkflowStatusVisual(display.status);
+  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}
       : null;
-  const displayDuration = display.duration;
-  // Named only while the run is waiting and has more than one job: with a single job the rail
-  // and the graph already say which one it is.
-  const blockingJob =
-    display.status === 'queued' && run.jobs.length > 1 ? workflowRunBlockingJob(run.jobs) : null;
+  const displayDuration = run.runAttempt.displayDuration;
+  const hasStarted = run.hasStartedJobExecution;
   const {ref: headingTextRef, isTruncated: isHeadingTruncated} =
     useIsTextTruncated<HTMLSpanElement>(run.name);
 
   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">
@@ -184,24 +173,11 @@ export function WorkflowRunSummary({
                 <MetadataSeparator />
                 <WorkflowRunDurationLabel
                   duration={displayDuration}
+                  hasStarted={hasStarted}
                   className="text-foreground-neutral-subtle"
                 />
               </>
             ) : null}
-
-            {blockingJob ? (
-              <>
-                <MetadataSeparator />
-                <span className="flex min-w-0 items-center gap-tight">
-                  <Text as="span" size="xs" className="shrink-0">
-                    waiting on
-                  </Text>
-                  <Code as="span" variant="label" className="min-w-0 truncate">
-                    {blockingJob.displayName}
-                  </Code>
-                </span>
-              </>
-            ) : null}
           </div>
         </div>
       </section>

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" />

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

@@ -0,0 +1,140 @@
+import type {WorkflowRunDetailResponseDto} from '@shipfox/api-workflows-dto';
+import {configureApiClient} from '@shipfox/client-api';
+import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {type ReactNode, useEffect, useState} from 'react';
+import {
+  runAttemptsResponseDto,
+  workflowJobDto,
+  workflowRunDetailDto,
+} from '#test/fixtures/workflow-run.js';
+import {WorkflowRunView} from './workflow-run-view.js';
+
+const PROJECT_ID = '22222222-2222-4222-8222-222222222222';
+const RUN_ID = '11111111-1111-4111-8111-111111111111';
+const RUN_STARTED_AT = '2026-06-26T11:57:00.000Z';
+const RUN_FINISHED_AT = '2026-06-26T11:59:00.000Z';
+
+const RUN_RESPONSE: WorkflowRunDetailResponseDto = workflowRunDetailDto({
+  id: RUN_ID,
+  project_id: PROJECT_ID,
+  name: 'deploy-web',
+  status: 'succeeded',
+  started_at: RUN_STARTED_AT,
+  finished_at: RUN_FINISHED_AT,
+  has_started_job_execution: true,
+  jobs: [
+    workflowJobDto({
+      key: 'build',
+      name: 'build',
+      status: 'succeeded',
+      position: 0,
+    }),
+    workflowJobDto({
+      key: 'deploy',
+      name: 'deploy',
+      status: 'succeeded',
+      position: 1,
+      dependencies: ['build'],
+    }),
+    workflowJobDto({
+      key: 'notify',
+      name: 'notify',
+      status: 'succeeded',
+      position: 2,
+      dependencies: ['deploy'],
+    }),
+  ],
+});
+const RUN_ATTEMPTS_RESPONSE = runAttemptsResponseDto({attempts: []});
+
+const withRunApi: Decorator = (Story) => (
+  <RunWorkspaceStoryProviders>
+    <Story />
+  </RunWorkspaceStoryProviders>
+);
+
+const meta = {
+  title: 'Workflows/WorkflowRunView',
+  component: WorkflowRunView,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'wide',
+      options: {
+        wide: {
+          name: 'Wide',
+          styles: {width: '1440px', height: '720px'},
+          type: 'desktop',
+        },
+      },
+    },
+    globals: {
+      viewport: {value: 'wide'},
+    },
+    argos: {
+      modes: {dark: {theme: 'dark'}},
+      fitToContent: false,
+    },
+  },
+  decorators: [withRunApi],
+  args: {
+    projectId: PROJECT_ID,
+    workspaceSlug: 'acme',
+    projectSlug: 'platform',
+    workflowRunId: RUN_ID,
+  },
+} satisfies Meta<typeof WorkflowRunView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WideViewport: Story = {};
+
+function RunWorkspaceStoryProviders({children}: {children: ReactNode}) {
+  const [queryClient] = useState(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+  );
+  const [configured, setConfigured] = useState(false);
+
+  useEffect(() => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: (input) => {
+        const url =
+          input instanceof Request ? input.url : input instanceof URL ? input.href : String(input);
+        const path = new URL(url, 'https://api.example.test').pathname;
+        const response =
+          path === '/annotations'
+            ? {
+                body: {annotations: [], has_more: false, next_cursor: null},
+                status: 200,
+              }
+            : path === `/workflows/runs/${RUN_ID}/attempts`
+              ? {body: RUN_ATTEMPTS_RESPONSE, status: 200}
+              : path === `/workflows/runs/${RUN_ID}`
+                ? {body: RUN_RESPONSE, status: 200}
+                : {body: {code: 'not-found'}, status: 404};
+        return new Response(JSON.stringify(response.body), {
+          status: response.status,
+          headers: {'content-type': 'application/json'},
+        });
+      },
+    });
+    setConfigured(true);
+
+    return () => {
+      configureApiClient({baseUrl: '', fetchImpl: undefined});
+    };
+  }, []);
+
+  if (!configured) return null;
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="flex h-[720px] min-w-[1440px] w-[1440px] bg-background-subtle-base">
+        {children}
+      </div>
+    </QueryClientProvider>
+  );
+}