@shipfox/client-workflows 17.0.0 → 19.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "19.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -29,7 +29,7 @@
     "date-fns": "^4.1.0",
     "@shipfox/annotations-dto": "12.3.0",
     "@shipfox/api-definitions-dto": "12.3.0",
-    "@shipfox/api-workflows-dto": "12.3.0",
+    "@shipfox/api-workflows-dto": "12.6.0",
     "@shipfox/client-api": "6.0.1",
     "@shipfox/client-logs": "17.0.0",
     "@shipfox/client-projects": "17.0.0",

package/src/components/job-detail/job-context-panel.tsx

@@ -27,6 +27,7 @@ export function JobContextPanel({job, execution}: {job: Job; execution: JobExecu
       execution.triggerEvents.length ||
       job.success ||
       statusReason ||
+      execution.statusReasonMessage ||
       trace?.length ||
       hasTiming,
   );
@@ -114,6 +115,9 @@ function JobContextSheet({
             {statusReason ? (
               <ContextValue label="Status reason" value={humanize(statusReason)} />
             ) : null}
+            {execution.statusReasonMessage ? (
+              <ContextValue label="Failure details" value={execution.statusReasonMessage} />
+            ) : null}
             {execution.triggerEvents.length ? (
               <JsonCode
                 title={`Trigger events (${execution.triggerEvents.length})`}

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

@@ -33,6 +33,7 @@ import {
   emptyStateForJob,
   emptyStateForMissingExecution,
   jobSucceededSummary,
+  MaterializedOutputFailureNotice,
 } from './job-empty-states.js';
 import {
   resolveWorkflowJobSelection,
@@ -258,39 +259,42 @@ export function JobDetailView({
                 Logs
               </Text>
               {selectedJobExecution ? (
-                <StepList
-                  job={job}
-                  jobExecution={selectedJobExecution}
-                  selectedAttemptId={selectedAttemptId}
-                  defaultSelectedAttemptId={landingSelection?.attemptId}
-                  onSelectedAttemptChange={selectAttempt}
-                  inspectorOpenAttemptId={inspectorOpenAttemptId}
-                  onInspectorOpenChange={onInspectorOpenChange}
-                  autoSelectActiveAttempt
-                  emptyState={emptyStateForJob(job, selectedJobExecution)}
-                  showHeader={false}
-                  className="rounded-none border-0 bg-transparent"
-                  renderExpandedStep={(context) => (
-                    <ExpandedStep context={context} pageScrollRef={pageScrollRef} />
-                  )}
-                  renderInspector={(entry) => (
-                    <StepInspectorSheet
-                      entry={entry}
-                      open
-                      onOpenChange={(open) => onInspectorOpenChange(open ? entry.id : null)}
-                      workspaceSlug={workspaceSlug}
-                      projectSlug={projectSlug}
-                      workflowRunId={run.id}
-                      runAttempt={run.runAttempt.attempt}
-                      jobId={job.id}
-                      annotationCount={annotationCountForStep(
-                        annotationSummaryQuery.data,
-                        entry.step.id,
-                        entry.attempt,
-                      )}
-                    />
-                  )}
-                />
+                <>
+                  <MaterializedOutputFailureNotice jobExecution={selectedJobExecution} />
+                  <StepList
+                    job={job}
+                    jobExecution={selectedJobExecution}
+                    selectedAttemptId={selectedAttemptId}
+                    defaultSelectedAttemptId={landingSelection?.attemptId}
+                    onSelectedAttemptChange={selectAttempt}
+                    inspectorOpenAttemptId={inspectorOpenAttemptId}
+                    onInspectorOpenChange={onInspectorOpenChange}
+                    autoSelectActiveAttempt
+                    emptyState={emptyStateForJob(job, selectedJobExecution)}
+                    showHeader={false}
+                    className="rounded-none border-0 bg-transparent"
+                    renderExpandedStep={(context) => (
+                      <ExpandedStep context={context} pageScrollRef={pageScrollRef} />
+                    )}
+                    renderInspector={(entry) => (
+                      <StepInspectorSheet
+                        entry={entry}
+                        open
+                        onOpenChange={(open) => onInspectorOpenChange(open ? entry.id : null)}
+                        workspaceSlug={workspaceSlug}
+                        projectSlug={projectSlug}
+                        workflowRunId={run.id}
+                        runAttempt={run.runAttempt.attempt}
+                        jobId={job.id}
+                        annotationCount={annotationCountForStep(
+                          annotationSummaryQuery.data,
+                          entry.step.id,
+                          entry.attempt,
+                        )}
+                      />
+                    )}
+                  />
+                </>
               ) : (
                 <EmptyStateForMissingExecution job={job} />
               )}

package/src/components/job-detail/job-empty-states.test.ts

@@ -3,7 +3,13 @@ import {
   workflowJobExecutionDto,
   workflowStepDto,
 } from '#test/fixtures/workflow-run.js';
-import {jobSucceededSummary} from './job-empty-states.js';
+import {
+  emptyStateForJob,
+  emptyStateForMissingExecution,
+  jobSucceededSummary,
+  outputFailureDescriptionForExecution,
+  skippedJobDescription,
+} from './job-empty-states.js';
 
 describe('jobSucceededSummary', () => {
   test('counts only succeeded steps when skipped steps are present', () => {
@@ -25,3 +31,101 @@ describe('jobSucceededSummary', () => {
     expect(jobSucceededSummary(job, execution)).toBe('1 step succeeded');
   });
 });
+
+describe('skippedJobDescription', () => {
+  test('explains when materialized output exceeds the configured size limit', () => {
+    expect(skippedJobDescription('output_too_large')).toBe(
+      'The materialized job output exceeded its configured size limit.',
+    );
+  });
+});
+
+describe('materialized output failure descriptions', () => {
+  const fallback =
+    'A materialized job output could not be persisted: it exceeded a size or entry cap, contained a non-JSON-safe value, or referenced an unresolved value. Check the output mapping and values before re-running the workflow.';
+
+  test('uses the server-authored message for an execution with recorded steps', () => {
+    const job = workflowJob({
+      status: 'failed',
+      status_reason: 'output_invalid',
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'failed',
+          status_reason: 'output_invalid',
+          status_reason_message: 'Job output "payload" cannot be persisted as JSON: undefined.',
+          steps: [workflowStepDto({status: 'succeeded'})],
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Expected a job execution');
+
+    expect(outputFailureDescriptionForExecution(execution)).toBe(
+      'Job output "payload" cannot be persisted as JSON: undefined.',
+    );
+  });
+
+  test('keeps the generic fallback for old output-invalid rows without a message', () => {
+    const job = workflowJob({
+      status: 'failed',
+      status_reason: 'output_invalid',
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'failed',
+          status_reason: 'output_invalid',
+          steps: [workflowStepDto({status: 'succeeded'})],
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Expected a job execution');
+
+    expect(outputFailureDescriptionForExecution(execution)).toBe(fallback);
+  });
+
+  test('uses the message in the empty state when output materialization failed before steps', () => {
+    const job = workflowJob({
+      status: 'failed',
+      status_reason: 'output_invalid',
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'failed',
+          status_reason: 'output_invalid',
+          status_reason_message: 'Job outputs cannot define more than 10 entries (found 11)',
+          steps: [],
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Expected a job execution');
+
+    expect(emptyStateForJob(job, execution)).toMatchObject({
+      description: 'Job outputs cannot define more than 10 entries (found 11)',
+    });
+  });
+
+  test('keeps output failures scoped to the selected execution', () => {
+    const job = workflowJob({
+      status: 'failed',
+      status_reason: 'output_invalid',
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'succeeded',
+          status_reason: null,
+          steps: [workflowStepDto({status: 'succeeded'})],
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Expected a job execution');
+
+    expect(outputFailureDescriptionForExecution(execution)).toBeUndefined();
+    expect(
+      emptyStateForMissingExecution(
+        workflowJob({status: 'failed', status_reason: 'output_invalid'}),
+      ),
+    ).toMatchObject({
+      description: fallback,
+    });
+  });
+});

package/src/components/job-detail/job-empty-states.tsx

@@ -1,3 +1,4 @@
+import {Callout, CalloutContent, CalloutDescription, CalloutTitle} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import type {Job, JobExecution, Step, StepError} from '#core/workflow-run.js';
 import {
@@ -9,6 +10,44 @@ import {
 import type {StepListEmptyState} from '../step-list/index.js';
 import {formatJobExecutionTime} from './job-execution-time-text.js';
 
+const MATERIALIZED_OUTPUT_FAILURE_DESCRIPTION =
+  'A materialized job output could not be persisted: it exceeded a size or entry cap, contained a non-JSON-safe value, or referenced an unresolved value. Check the output mapping and values before re-running the workflow.';
+const OUTPUT_TOO_LARGE_FAILURE_DESCRIPTION =
+  'The materialized job output exceeded its configured size limit. Review the failure details before re-running the workflow.';
+
+export function outputFailureDescriptionForExecution(
+  jobExecution: JobExecution,
+): string | undefined {
+  if (jobExecution.steps.length === 0) return undefined;
+
+  if (jobExecution.statusReason === 'output_invalid') {
+    return jobExecution.statusReasonMessage || MATERIALIZED_OUTPUT_FAILURE_DESCRIPTION;
+  }
+  if (jobExecution.statusReason === 'output_too_large') {
+    return jobExecution.statusReasonMessage || OUTPUT_TOO_LARGE_FAILURE_DESCRIPTION;
+  }
+  return undefined;
+}
+
+export function MaterializedOutputFailureNotice({jobExecution}: {jobExecution: JobExecution}) {
+  const description = outputFailureDescriptionForExecution(jobExecution);
+  if (!description) return null;
+
+  return (
+    <Callout
+      role="alert"
+      type="error"
+      variant="secondary"
+      className="border-b border-border-neutral-base px-row py-row"
+    >
+      <CalloutContent>
+        <CalloutTitle>Job output could not be persisted</CalloutTitle>
+        <CalloutDescription>{description}</CalloutDescription>
+      </CalloutContent>
+    </Callout>
+  );
+}
+
 export function emptyStateForJob(
   job: Job,
   jobExecution: JobExecution,
@@ -64,7 +103,11 @@ export function emptyStateForJob(
   if (displayStatus === 'failed') {
     return {
       title: 'Job failed before its first step started',
-      description: preStepFailureDescription(jobExecution.statusReason ?? job.statusReason, runner),
+      description: preStepFailureDescription(
+        jobExecution.statusReason ?? job.statusReason,
+        runner,
+        jobExecution.statusReasonMessage,
+      ),
       status: displayStatus,
     };
   }
@@ -159,14 +202,21 @@ export function skippedJobDescription(reason: Job['statusReason']): string {
     case 'run_cancelled':
     case 'timed_out':
     case 'runner_lost':
+    case 'output_invalid':
     case 'step_failed':
     case 'unknown':
     case null:
       return 'This job did not start.';
+    case 'output_too_large':
+      return 'The materialized job output exceeded its configured size limit.';
   }
 }
 
-function preStepFailureDescription(reason: string | null, runner: string[] | null = null): string {
+function preStepFailureDescription(
+  reason: string | null,
+  runner: string[] | null = null,
+  statusReasonMessage: string | null = null,
+): string {
   const runnerCopy = runner?.length ? ` Required runner labels: ${runner.join(', ')}.` : '';
 
   switch (reason) {
@@ -179,6 +229,10 @@ function preStepFailureDescription(reason: string | null, runner: string[] | nul
       return 'The execution ended while the run was being cancelled.';
     case 'step_failed':
       return `The execution failed before step details were recorded.${runnerCopy} Review run annotations before re-running the workflow.`;
+    case 'output_too_large':
+      return statusReasonMessage || OUTPUT_TOO_LARGE_FAILURE_DESCRIPTION;
+    case 'output_invalid':
+      return statusReasonMessage || MATERIALIZED_OUTPUT_FAILURE_DESCRIPTION;
     case 'condition_errored':
       return 'The job condition could not be evaluated. Review run annotations before re-running the workflow.';
     case 'dependency_not_completed':

package/src/components/job-detail/step-troubleshooting.tsx

@@ -442,6 +442,8 @@ function failureTitle(reason: string | JobStatusReason): string {
       return 'Agent harness was unavailable';
     case 'runner_lost':
       return 'Runner stopped responding';
+    case 'output_too_large':
+      return 'Job output exceeded its size limit';
     case 'timed_out':
       return 'Step timed out';
     case 'step_failed':
@@ -489,6 +491,8 @@ function failureDescription(reason: string | JobStatusReason): string {
       return 'The runner could not start the agent harness.';
     case 'runner_lost':
       return 'The runner stopped responding before the step completed.';
+    case 'output_too_large':
+      return 'The materialized job output exceeded its configured size limit.';
     case 'timed_out':
       return 'The step exceeded its configured time limit.';
     case 'dependency_not_completed':

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

@@ -332,7 +332,7 @@ describe('JobNode status indicator', () => {
     expect(screen.getByRole('button', {name: 'deploy-prod, Succeeded'})).toBeInTheDocument();
   });
 
-  test('shows a running lifecycle without a running step as pending', () => {
+  test('shows a running lifecycle without a running step as running', () => {
     const node = makeNode({
       name: 'deploy',
       status: 'pending',
@@ -341,7 +341,7 @@ describe('JobNode status indicator', () => {
 
     renderNode(node);
 
-    expect(screen.getByRole('button', {name: 'deploy, Pending'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'deploy, Running'})).toBeInTheDocument();
   });
 
   test('shows a pending lifecycle as running while a step is active', () => {

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

@@ -77,6 +77,7 @@ export function emptyJobExecutionForJob(job: Job): JobExecution {
     name: job.name ?? job.key,
     status: job.status === 'skipped' ? 'cancelled' : job.status,
     statusReason: job.statusReason,
+    statusReasonMessage: null,
     runner: job.runner,
     outputs: job.outputs,
     triggerEvents: [],

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

@@ -3,7 +3,8 @@ import {Code, Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
-import type {JobStatus, WorkflowRunJobSummary, WorkflowRunJobs} from '#core/workflow-run.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.
@@ -33,16 +34,17 @@ const COMPACT_COUNT_FORMAT = new Intl.NumberFormat('en', {
 
 // 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<JobStatus, number> = {
+const STATUS_SEVERITY: Record<JobDisplayStatus, number> = {
   failed: 5,
   running: 4,
+  listening: 4,
   pending: 3,
   cancelled: 2,
   skipped: 1,
   succeeded: 0,
 };
 
-const NOTABLE_STATUSES: readonly JobStatus[] = ['failed', 'running'];
+const NOTABLE_STATUSES: readonly JobDisplayStatus[] = ['failed', 'running', 'listening'];
 
 export interface JobStatusStripProps {
   jobs: WorkflowRunJobs;
@@ -80,7 +82,7 @@ export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
             {visible.map((job) => (
               <WorkflowStatusIcon
                 key={job.id}
-                status={job.status}
+                status={displayStatus(job)}
                 size={GLYPH_SIZE}
                 // One ripple per running job, on every row, would turn a calm list into a
                 // field of pulses. The run's own glyph already carries the live edge.
@@ -121,7 +123,7 @@ function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary:
   // can be named, but the count of those left over is read off the totals, so a failure past
   // the preview is still accounted for rather than silently missing.
   const named = jobs.preview
-    .filter((job) => NOTABLE_STATUSES.includes(job.status))
+    .filter((job) => NOTABLE_STATUSES.includes(displayStatus(job)))
     .slice(0, MAX_TOOLTIP_JOB_NAMES);
   const notableTotal = NOTABLE_STATUSES.reduce((total, status) => total + countOf(jobs, status), 0);
   const remaining = notableTotal - named.length;
@@ -133,7 +135,7 @@ function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary:
       </Text>
       {named.map((job) => (
         <Code as="span" variant="label" key={job.id} className="block truncate">
-          {getWorkflowStatusVisual(job.status).label.toLowerCase()} · {job.name ?? job.key}
+          {getWorkflowStatusVisual(displayStatus(job)).label.toLowerCase()} · {job.name ?? job.key}
         </Code>
       ))}
       {remaining > 0 ? (
@@ -162,15 +164,16 @@ export function jobStatusSummary(jobs: WorkflowRunJobs): string {
 function worstHiddenStatus(
   jobs: WorkflowRunJobs,
   visible: readonly WorkflowRunJobSummary[],
-): JobStatus | null {
+): JobDisplayStatus | null {
   const hidden = new Map(jobs.statusCounts.map(({status, count}) => [status, count]));
   for (const job of visible) {
-    const remaining = (hidden.get(job.status) ?? 0) - 1;
-    if (remaining > 0) hidden.set(job.status, remaining);
-    else hidden.delete(job.status);
+    const status = displayStatus(job);
+    const remaining = (hidden.get(status) ?? 0) - 1;
+    if (remaining > 0) hidden.set(status, remaining);
+    else hidden.delete(status);
   }
 
-  let worst: JobStatus | null = null;
+  let worst: JobDisplayStatus | null = null;
   for (const [status, count] of hidden) {
     if (count <= 0) continue;
     if (worst === null || STATUS_SEVERITY[status] > STATUS_SEVERITY[worst]) worst = status;
@@ -184,6 +187,16 @@ export function overflowCountLabel(hiddenCount: number): string {
     : COMPACT_COUNT_FORMAT.format(hiddenCount);
 }
 
-function countOf(jobs: WorkflowRunJobs, status: JobStatus): number {
+function countOf(jobs: WorkflowRunJobs, status: JobDisplayStatus): number {
   return jobs.statusCounts.find((entry) => entry.status === status)?.count ?? 0;
 }
+
+function displayStatus(job: WorkflowRunJobSummary): JobDisplayStatus {
+  return deriveJobDisplayStatus({
+    mode: job.mode,
+    status: job.status,
+    listenerStatus: job.listenerStatus,
+    executionStatus: job.executionStatus,
+    jobExecutions: [],
+  });
+}

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

@@ -307,6 +307,53 @@ describe('WorkflowRunListView', () => {
       ).toBeInTheDocument();
     });
 
+    test('shows an executing one-shot job instead of its pending verdict', async () => {
+      const {jobs} = workflowRunJobsFixture(['pending']);
+      renderListView([
+        run('running', 'deploy-web', 'run-1', {
+          jobs: jobs.map((job) => ({...job, execution_status: 'running'})),
+          job_status_counts: [{status: 'pending', count: 1}],
+          job_display_status_counts: [{status: 'running', count: 1}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '1 job: 1 running'});
+      expect(within(strip).getByLabelText('Running')).toBeInTheDocument();
+    });
+
+    test('shows an active listener as listening in the job strip', async () => {
+      const {jobs} = workflowRunJobsFixture(['running']);
+      renderListView([
+        run('running', 'event-driven', 'run-1', {
+          jobs: jobs.map((job) => ({
+            ...job,
+            mode: 'listening',
+            listener_status: 'listening',
+            execution_status: null,
+          })),
+          job_status_counts: [{status: 'running', count: 1}],
+          job_display_status_counts: [{status: 'listening', count: 1}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '1 job: 1 listening'});
+      expect(within(strip).getByLabelText('Listening')).toBeInTheDocument();
+    });
+
+    test('shows a failed execution when the job verdict is still pending', async () => {
+      const {jobs} = workflowRunJobsFixture(['pending']);
+      renderListView([
+        run('running', 'deploy-web', 'run-1', {
+          jobs: jobs.map((job) => ({...job, execution_status: 'failed'})),
+          job_status_counts: [{status: 'pending', count: 1}],
+          job_display_status_counts: [{status: 'failed', count: 1}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '1 job: 1 failed'});
+      expect(within(strip).getByLabelText('Failed')).toBeInTheDocument();
+    });
+
     // The link's aria-label replaces its contents, so the strip's own label is not spoken
     // when the row is announced as a link. Where a run failed has to survive that.
     test('carries the job breakdown into the row link name', async () => {
@@ -355,6 +402,32 @@ describe('WorkflowRunListView', () => {
       expect(within(strip).getByLabelText('Failed')).toBeInTheDocument();
     });
 
+    test('reports listening jobs in the overflow glyph and tooltip', async () => {
+      const {jobs} = workflowRunJobsFixture(
+        Array.from({length: 16}, () => 'pending') as JobStatusDto[],
+      );
+      renderListView([
+        run('running', 'event-driven', 'run-listener', {
+          jobs: jobs.map((job) => ({
+            ...job,
+            mode: 'listening',
+            listener_status: 'listening',
+            execution_status: null,
+          })),
+          job_status_counts: [{status: 'pending', count: 20}],
+          job_display_status_counts: [{status: 'listening', count: 20}],
+        }),
+      ]);
+
+      const strip = await screen.findByRole('img', {name: '20 jobs: 20 listening'});
+      expect(screen.getByText('+13')).toBeInTheDocument();
+      expect(within(strip).getAllByLabelText('Listening')).toHaveLength(8);
+
+      const user = userEvent.setup();
+      await user.hover(strip);
+      expect(await screen.findByRole('tooltip')).toHaveTextContent('and 14 more');
+    });
+
     // Nothing caps a workflow's job count, so an exact overflow count is unbounded in width
     // and would eventually paint over the duration column beside it.
     test('abbreviates an overflow count too wide to print exactly', async () => {

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

@@ -101,6 +101,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {};
 
+export const ExecutionStates: Story = {
+  args: {
+    runs: [makeExecutionStateRun(), makeListeningStateRun()],
+  },
+};
+
 /**
  * The row under its one-line threshold, at the 720px a 768px viewport leaves the column.
  *
@@ -229,3 +235,28 @@ function StateExample({label, children}: {label: string; children: ReactNode}) {
     </div>
   );
 }
+
+function makeExecutionStateRun(): WorkflowRunListItem {
+  const fixture = workflowRunJobsFixture(['pending']);
+  return sequencedWorkflowRunListItem('running', 'one-shot-executing', 1, {
+    ...fixture,
+    jobs: fixture.jobs.map((job) => ({...job, execution_status: 'running'})),
+    job_status_counts: [{status: 'pending', count: 1}],
+    job_display_status_counts: [{status: 'running', count: 1}],
+  });
+}
+
+function makeListeningStateRun(): WorkflowRunListItem {
+  const fixture = workflowRunJobsFixture(['pending']);
+  return sequencedWorkflowRunListItem('running', 'event-driven-listener', 3, {
+    ...fixture,
+    jobs: fixture.jobs.map((job) => ({
+      ...job,
+      mode: 'listening',
+      listener_status: 'listening',
+      execution_status: null,
+    })),
+    job_status_counts: [{status: 'pending', count: 1}],
+    job_display_status_counts: [{status: 'listening', count: 1}],
+  });
+}

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

@@ -53,8 +53,12 @@ export function RunWorkspaceNav({
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <aside className="w-full shrink-0 border-b border-border-neutral-base bg-background-neutral-background min-[768px]:w-240 min-[768px]:border-b-0 min-[768px]:border-r">
-        <Collapsible open={mobileOpen} onOpenChange={setMobileOpen}>
+      <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">
+        <Collapsible
+          open={mobileOpen}
+          onOpenChange={setMobileOpen}
+          className="flex min-h-0 flex-col min-[768px]:flex-1"
+        >
           <CollapsibleTrigger asChild>
             <button
               type="button"
@@ -82,7 +86,7 @@ export function RunWorkspaceNav({
           </CollapsibleTrigger>
           <div
             className={cn(
-              'max-h-[50vh] overflow-y-auto p-tight min-[768px]:block min-[768px]:max-h-none min-[768px]:p-[12px]',
+              'flex min-h-0 max-h-[50vh] flex-col overflow-y-auto p-tight scrollbar min-[768px]:min-h-0 min-[768px]:max-h-none min-[768px]:flex-1 min-[768px]:flex min-[768px]:overflow-hidden min-[768px]:p-[12px]',
               !mobileOpen && 'hidden',
             )}
           >
@@ -136,7 +140,7 @@ function RunWorkspaceNavContent({
   }, [currentJobId, mobileOpen]);
 
   return (
-    <nav aria-label="Run workspace" className="flex min-w-0 flex-col gap-group">
+    <nav aria-label="Run workspace" className="flex min-h-0 min-w-0 flex-1 flex-col gap-group">
       <ul>
         <li>
           <RunSectionLink
@@ -151,7 +155,10 @@ function RunWorkspaceNavContent({
         </li>
       </ul>
 
-      <section aria-labelledby="run-workspace-jobs-heading" className="min-w-0">
+      <section
+        aria-labelledby="run-workspace-jobs-heading"
+        className="flex min-h-0 min-w-0 flex-1 flex-col"
+      >
         <div className="flex items-center justify-between gap-inline px-tight pb-[6px]">
           <Text
             as="h2"
@@ -166,7 +173,7 @@ function RunWorkspaceNavContent({
             {jobs.length}
           </Text>
         </div>
-        <ol className="max-h-[320px] overflow-y-auto">
+        <ol className="min-h-0 flex-1 overflow-y-auto scrollbar">
           {jobs.map((job) => {
             const current = job.id === currentJobId;
             const execution = defaultJobExecution(job);