@shipfox/client-workflows 19.0.0 → 21.0.0

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

@@ -49,23 +49,54 @@ describe('WorkflowRunView', () => {
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
     expect(within(summary).getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();
     expect(screen.getByRole('navigation', {name: 'Run workspace'})).toBeInTheDocument();
-    expect(
-      screen
-        .getByRole('navigation', {name: 'Run workspace'})
-        .closest('[data-run-workspace-layout]'),
-    ).toHaveClass('border-t', 'border-border-neutral-base', 'min-[768px]:flex-row');
+    const workspaceLayout = screen
+      .getByRole('navigation', {name: 'Run workspace'})
+      .closest('[data-run-workspace-layout]');
+    expect(workspaceLayout).toHaveClass('border-t', 'border-border-neutral-base');
+    expect(workspaceLayout).not.toHaveClass('max-w-[1360px]');
+    expect(workspaceLayout?.querySelector('[data-run-workspace-frame]')).toHaveClass(
+      'mx-auto',
+      'w-full',
+      'max-w-[calc(240px_+_1120px)]',
+      'min-[768px]:flex-row',
+    );
     expect(screen.getByRole('link', {name: 'Summary'})).toHaveAttribute('aria-current', 'page');
     expect(screen.getByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'Run details'})).toBeInTheDocument();
     expect(screen.getByRole('region', {name: 'All jobs summary'})).toBeInTheDocument();
     expect(screen.getByRole('region', {name: 'Workflow jobs'})).toBeInTheDocument();
-    expect(container.querySelector('[data-run-workspace-content]')).toHaveClass(
+    expect(container.querySelector('[data-run-workspace-content]')).toHaveClass('flex-1');
+    expect(container.querySelector('[data-run-workspace-content]')).not.toHaveClass(
       'bg-background-neutral-base',
-      'flex-1',
     );
     expect(screen.queryByRole('tab', {name: 'Jobs'})).not.toBeInTheDocument();
   });
 
+  test.each([
+    {tab: undefined, region: 'All jobs summary'},
+    {tab: 'source', region: 'Workflow source'},
+    {tab: 'annotations', region: 'Run annotations'},
+  ] as const)('does not cap the $region section at 1120px', async ({tab, region}) => {
+    configureRunFetch();
+
+    renderView({tab});
+
+    const section = await screen.findByRole('region', {name: region});
+    expect(section.firstElementChild).not.toHaveClass('max-w-[1120px]');
+  });
+
+  test('keeps dedicated job content on the full-width data surface', async () => {
+    configureRunFetch();
+
+    renderView({jobContent: <div>Job logs</div>});
+
+    const jobContent = await screen.findByText('Job logs');
+    const workspaceFrame = jobContent.closest('[data-run-workspace-frame]');
+
+    expect(workspaceFrame).toHaveClass('w-full', 'min-[768px]:flex-row');
+    expect(workspaceFrame).not.toHaveClass('max-w-[calc(240px_+_1120px)]');
+  });
+
   test('treats the removed Jobs tab URL as the graph Summary', async () => {
     configureRunFetch();
 

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

@@ -11,6 +11,7 @@ import {
 } from '@shipfox/react-ui/select';
 import {toast} from '@shipfox/react-ui/toast';
 import {Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
 import {useNavigate} from '@tanstack/react-router';
 import {type ReactNode, useEffect, useMemo} from 'react';
 import {buildRunAnnotationList, type RunAnnotationSummary} from '#core/run-annotation.js';
@@ -53,6 +54,7 @@ import {
 } from './workflow-run-states.js';
 
 type RunWorkspaceSection = Exclude<WorkflowRunTab, 'jobs'>;
+const RUN_WORKSPACE_FRAME_CLASS_NAME = 'mx-auto w-full max-w-[calc(240px_+_1120px)]';
 
 export interface WorkflowRunViewProps {
   projectId: string;
@@ -157,6 +159,7 @@ function RunViewContent({
   const activeSection = runWorkspaceSection(tab);
   const cancelMutation = useCancelWorkflowRunMutation(runData);
   const sourceSnapshot = runData?.sourceSnapshot ?? null;
+  const hasJobContent = Boolean(jobContent);
   const resolvedSelection =
     runData && selection ? resolveWorkflowRunSelection({run: runData, selection}) : undefined;
   const highlightedLineRange = resolvedSelection?.step?.sourceLocation ?? null;
@@ -309,47 +312,52 @@ function RunViewContent({
 
       <div
         data-run-workspace-layout
-        className="flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base min-[768px]:flex-row"
+        className="flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base"
       >
-        {runData && workspaceSlug && projectSlug ? (
-          <RunWorkspaceNav
-            workspaceSlug={workspaceSlug}
-            projectSlug={projectSlug}
-            run={runData}
-            activeSection={activeSection}
-            currentJobId={activeJobId}
-            jobSearch={jobSearch}
-            annotationSummary={annotationSummary}
-          />
-        ) : (
-          <RunWorkspaceNavSkeleton />
-        )}
-
         <div
-          data-run-workspace-content
-          className="flex min-h-0 min-w-0 flex-1 flex-col bg-background-neutral-base"
+          data-run-workspace-frame
+          className={cn(
+            'flex min-h-0 min-w-0 w-full flex-1 flex-col min-[768px]:flex-row',
+            !hasJobContent && RUN_WORKSPACE_FRAME_CLASS_NAME,
+          )}
         >
-          {runData && jobContent ? (
-            jobContent
-          ) : runData ? (
-            <RunSectionContent
-              section={activeSection}
-              run={runData}
-              annotations={annotations}
-              annotationSummary={annotationSummary}
+          {runData && workspaceSlug && projectSlug ? (
+            <RunWorkspaceNav
               workspaceSlug={workspaceSlug}
               projectSlug={projectSlug}
-              selection={selection}
-              selectedJobId={selection?.jobId}
-              onSelectGraphJob={selectGraphJob}
-              onSelectAnnotationJob={selectAnnotationJob}
-              onClearAnnotationFilters={clearAnnotationFilters}
-              sourceSnapshot={sourceSnapshot}
-              highlightedLineRange={highlightedLineRange}
+              run={runData}
+              activeSection={activeSection}
+              currentJobId={activeJobId}
+              jobSearch={jobSearch}
+              annotationSummary={annotationSummary}
             />
           ) : (
-            <div className="min-h-0 flex-1 overflow-auto p-panel">{loadingOrError}</div>
+            <RunWorkspaceNavSkeleton />
           )}
+
+          <div data-run-workspace-content className="flex min-h-0 min-w-0 flex-1 flex-col">
+            {runData && jobContent ? (
+              jobContent
+            ) : runData ? (
+              <RunSectionContent
+                section={activeSection}
+                run={runData}
+                annotations={annotations}
+                annotationSummary={annotationSummary}
+                workspaceSlug={workspaceSlug}
+                projectSlug={projectSlug}
+                selection={selection}
+                selectedJobId={selection?.jobId}
+                onSelectGraphJob={selectGraphJob}
+                onSelectAnnotationJob={selectAnnotationJob}
+                onClearAnnotationFilters={clearAnnotationFilters}
+                sourceSnapshot={sourceSnapshot}
+                highlightedLineRange={highlightedLineRange}
+              />
+            ) : (
+              <div className="min-h-0 flex-1 overflow-auto p-panel">{loadingOrError}</div>
+            )}
+          </div>
         </div>
       </div>
     </div>
@@ -395,7 +403,7 @@ function RunSectionContent({
         aria-label="All jobs summary"
         className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
       >
-        <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-group px-frame">
+        <div className="mx-auto flex w-full flex-col gap-group px-frame">
           <Text as="h2" className="sr-only">
             All jobs summary
           </Text>
@@ -431,7 +439,7 @@ function RunSectionContent({
       aria-label="Workflow source"
       className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
     >
-      <div className="mx-auto flex min-h-full w-full max-w-[1120px] flex-col px-frame">
+      <div className="mx-auto flex min-h-full w-full flex-col px-frame">
         <Text as="h2" className="sr-only">
           Workflow source
         </Text>
@@ -526,7 +534,7 @@ function RunAnnotationsSection({
       aria-label="Run annotations"
       className="min-h-0 flex-1 overflow-auto pb-panel pt-[16px]"
     >
-      <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-group px-frame">
+      <div className="mx-auto flex w-full flex-col gap-group px-frame">
         <Text as="h2" className="sr-only">
           Annotations
         </Text>
@@ -666,7 +674,7 @@ function RunWorkspaceNavSkeleton() {
   return (
     <aside
       aria-label="Loading run navigation"
-      className="hidden w-240 shrink-0 border-r border-border-neutral-base bg-background-neutral-background p-panel-compact min-[768px]:block"
+      className="hidden w-240 shrink-0 border-r border-border-neutral-base p-panel-compact min-[768px]:block"
     >
       <div className="flex flex-col gap-group">
         <div className="h-32 rounded-4 bg-background-components-subtle" />

package/src/components/workflow-source-panel/workflow-source-content.tsx

@@ -63,8 +63,8 @@ export function WorkflowSourceContent({
             value={item.filename}
             className={cn(
               'min-h-full px-0 pb-0',
-              '[&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base',
-              '[&_code]:!text-sm [&_code]:!text-foreground-neutral-on-inverted [&_.line]:!text-sm [&_.line]:before:!text-sm [&_.line]:before:!text-foreground-neutral-muted',
+              '[&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base',
+              '[&_code]:!text-sm [&_code]:!text-foreground-contrast-primary [&_.line]:!text-sm [&_.line]:before:!text-sm [&_.line]:before:!text-foreground-contrast-secondary',
             )}
           >
             <CodeBlockContent

package/src/components/workflow-status/status-visuals.ts

@@ -18,10 +18,6 @@ export function getWorkflowStatusVisual(status: WorkflowDisplayStatus): Workflow
   switch (status) {
     case 'pending':
       return {kind: 'pending', label: 'Pending', dot: 'neutral', badge: 'neutral'};
-    // Waiting on a runner is the awaiting-* state the warning tone was held for: the run is
-    // live but nothing is executing, which is the operator's problem to see, not ours to hide.
-    case 'queued':
-      return {kind: 'queued', label: 'Queued', dot: 'warning', badge: 'warning'};
     case 'running':
       return {kind: 'running', label: 'Running', dot: 'info', badge: 'info'};
     case 'listening':

package/src/components/workflow-status/workflow-status-icon.stories.tsx

@@ -6,7 +6,6 @@ import {WorkflowStatusIcon} from './workflow-status-icon.js';
 
 const statuses: WorkflowDisplayStatus[] = [
   'pending',
-  'queued',
   'running',
   'listening',
   'succeeded',

package/src/components/workflow-status/workflow-status-icon.tsx

@@ -89,24 +89,6 @@ export function WorkflowStatusIcon({
         <Icon name="pulseLine" size={Math.max(8, Math.round(size * 0.7))} className="text-white" />
       </span>
     );
-  } else if (visual.kind === 'queued') {
-    // An hourglass in the same filled disc the listening state uses, so waiting reads as its
-    // own shape rather than as a pending ring that happens to be a different colour.
-    glyph = (
-      <span
-        className={cn(
-          'inline-flex shrink-0 items-center justify-center rounded-full bg-current',
-          box,
-          toneByVariant.warning,
-        )}
-      >
-        <Icon
-          name="hourglassLine"
-          size={Math.max(8, Math.round(size * 0.7))}
-          className="text-white"
-        />
-      </span>
-    );
   } else if (visual.kind === 'running') {
     glyph = <Dot variant="info" ripple={ripple} className={box} />;
   } else if (visual.kind === 'pending') {

package/src/core/entities/workflow-run.ts

@@ -6,21 +6,17 @@ import {
   type ListenerStatus,
   WORKFLOW_JOB_STATUSES,
 } from './job.js';
-import {
-  elapsedTimeFromTimestamps,
-  type JobExecutionDisplayDuration,
-  type JobExecutionStatus,
-} from './job-execution.js';
+import type {JobExecutionStatus} from './job-execution.js';
 import type {WorkflowRunAttempt, WorkflowRunAttemptSummary} from './workflow-run-attempt.js';
 
 export type WorkflowRunStatus = 'pending' | 'running' | 'succeeded' | 'failed' | 'cancelled';
 export type WorkflowRunRerunMode = 'all' | 'failed';
 export type WorkflowStatus = WorkflowRunStatus | (typeof WORKFLOW_JOB_STATUSES)[number];
 /**
- * `listening` and `queued` are display-only: the API never returns them, and both are derived
- * from the jobs a run already carries.
+ * `listening` is display-only: the API never returns it, and it is derived from the listener
+ * state a job already carries.
  */
-export type WorkflowDisplayStatus = WorkflowStatus | 'listening' | 'queued';
+export type WorkflowDisplayStatus = WorkflowStatus | 'listening';
 
 export const WORKFLOW_RUN_STATUSES = [
   'pending',
@@ -34,7 +30,6 @@ export const WORKFLOW_DISPLAY_STATUSES = [
   ...WORKFLOW_RUN_STATUSES,
   ...WORKFLOW_JOB_STATUSES,
   'listening',
-  'queued',
 ] as const satisfies readonly WorkflowDisplayStatus[];
 
 export const TERMINAL_WORKFLOW_RUN_STATUSES = [
@@ -87,11 +82,14 @@ export interface WorkflowRunJobStatusCount {
  * of them.
  *
  * `preview` is capped by the API, so `preview.length` is not the job count and the strip
- * reads `total` and `statusCounts` for anything it says rather than anything it draws.
+ * reads `total` and `statusCounts` for anything it says rather than anything it draws. The API
+ * also reports whether any job execution has started because a terminal `cancelled` job can have
+ * started work even though its job status does not preserve that distinction.
  */
 export interface WorkflowRunJobs {
   preview: WorkflowRunJobSummary[];
   statusCounts: WorkflowRunJobStatusCount[];
+  hasStartedJobExecution: boolean;
   total: number;
 }
 
@@ -132,6 +130,7 @@ export interface WorkflowRunDetail extends WorkflowRun {
   latestAttempt: number;
   runAttempt: WorkflowRunAttempt;
   jobs: Job[];
+  hasStartedJobExecution: boolean;
 }
 
 export interface WorkflowRunListPage {
@@ -198,129 +197,3 @@ export function isWorkflowRunTerminal(status: WorkflowRunStatus): boolean {
 export function isWorkflowStatus(status: string): status is WorkflowStatus {
   return WORKFLOW_STATUSES.has(status as WorkflowStatus);
 }
-
-/**
- * A run's headline duration, split the way a job's already is. An attempt's `startedAt` marks
- * when the orchestrator picked the run up, not when work began, so a run whose jobs are all
- * still waiting for a runner reads as queue time rather than as run time.
- */
-export type WorkflowRunDisplayDuration = JobExecutionDisplayDuration;
-
-/** What every surface shows for a run, derived together so status and duration cannot disagree. */
-export interface WorkflowRunDisplay {
-  status: WorkflowDisplayStatus;
-  duration: WorkflowRunDisplayDuration | null;
-}
-
-/**
- * The evidence a surface can offer about a run's progress.
- *
- * `jobStatuses` is what every surface has: the list carries status counts, the detail carries
- * whole jobs. `firstStartedAt` is the detail's extra precision, and where it is absent the
- * attempt's own mark stands in.
- */
-export interface WorkflowRunProgress {
-  runStatus: WorkflowRunStatus;
-  startedAt: string | null;
-  finishedAt: string | null;
-  jobStatuses: JobDisplayStatus[];
-  firstStartedAt?: string | null | undefined;
-}
-
-/** When the run's earliest execution began, or null while none of them has. */
-export function workflowRunFirstStartedAt(jobs: Job[]): string | null {
-  let earliest: string | null = null;
-  let earliestMs = Number.POSITIVE_INFINITY;
-
-  for (const job of jobs) {
-    for (const {startedAt} of job.jobExecutions) {
-      if (startedAt === null) continue;
-      const startedMs = new Date(startedAt).getTime();
-      if (!Number.isFinite(startedMs) || startedMs >= earliestMs) continue;
-      earliest = startedAt;
-      earliestMs = startedMs;
-    }
-  }
-
-  return earliest;
-}
-
-/**
- * Whether any work has begun. A run with no jobs on hand is a run whose jobs were not fetched,
- * which is no evidence that nothing started, so it counts as started rather than claiming a
- * queue this surface cannot see.
- */
-function workflowRunHasStarted({jobStatuses, firstStartedAt}: WorkflowRunProgress): boolean {
-  if (firstStartedAt != null) return true;
-  if (jobStatuses.length === 0) return true;
-  return jobStatuses.some((status) => status !== 'pending' && status !== 'skipped');
-}
-
-/**
- * The single rule behind every run readout. An attempt's `startedAt` marks when the
- * orchestrator picked the run up, not when work began, so a run whose jobs are all still
- * waiting reads as `Queued` for queue time. Calling that "running for 2h" sends an operator to
- * debug a build that never began.
- */
-export function deriveWorkflowRunDisplay(progress: WorkflowRunProgress): WorkflowRunDisplay {
-  const {runStatus, startedAt, finishedAt, firstStartedAt} = progress;
-  const hasStarted = workflowRunHasStarted(progress);
-  const status = runStatus === 'running' && !hasStarted ? 'queued' : runStatus;
-
-  if (startedAt === null) return {status, duration: null};
-
-  // A run cancelled before anything started keeps its queue reading rather than reporting a
-  // run that never was.
-  const time = elapsedTimeFromTimestamps({from: firstStartedAt ?? startedAt, to: finishedAt});
-  if (time === null) return {status, duration: null};
-
-  return {status, duration: {kind: hasStarted ? 'run' : 'queue', ...time}};
-}
-
-/** The run detail's reading: whole jobs, so queue and run time split on the first execution. */
-export function workflowRunDetailDisplay(run: {
-  runAttempt: Pick<WorkflowRunAttemptSummary, 'status' | 'startedAt' | 'finishedAt'>;
-  jobs: Job[];
-}): WorkflowRunDisplay {
-  return deriveWorkflowRunDisplay({
-    runStatus: run.runAttempt.status,
-    startedAt: run.runAttempt.startedAt,
-    finishedAt: run.runAttempt.finishedAt,
-    jobStatuses: run.jobs.map((job) => job.status),
-    firstStartedAt: workflowRunFirstStartedAt(run.jobs),
-  });
-}
-
-/**
- * The run list's reading: status counts cover every job, not just the drawn preview, so a row
- * reaches the same verdict as the detail page without fetching a single timestamp more.
- */
-export function workflowRunListItemDisplay(run: WorkflowRunListItem): WorkflowRunDisplay {
-  return deriveWorkflowRunDisplay({
-    runStatus: run.status,
-    startedAt: run.runAttempt.startedAt,
-    finishedAt: run.runAttempt.finishedAt,
-    jobStatuses: run.jobs.statusCounts.filter(({count}) => count > 0).map(({status}) => status),
-  });
-}
-
-/**
- * The job the run is waiting on: the one queued longest without starting. Named only so a
- * queued run says what it waits for instead of showing a number with no subject.
- */
-export function workflowRunBlockingJob(jobs: Job[]): Job | null {
-  let blocking: Job | null = null;
-  let queuedMs = Number.POSITIVE_INFINITY;
-
-  for (const job of jobs) {
-    for (const {queuedAt, startedAt, finishedAt} of job.jobExecutions) {
-      if (queuedAt === null || startedAt !== null || finishedAt !== null) continue;
-      const candidateMs = new Date(queuedAt).getTime();
-      if (!Number.isFinite(candidateMs) || candidateMs >= queuedMs) continue;
-      blocking = job;
-      queuedMs = candidateMs;
-    }
-  }
-
-  return blocking;
-}

package/src/core/workflow-run.test.ts

@@ -103,6 +103,7 @@ describe('workflow run model mapping', () => {
       latest_attempt: 4,
       started_at: '2026-05-07T01:01:10.000Z',
       finished_at: null,
+      has_started_job_execution: true,
     });
 
     const run = toWorkflowRunListItem(dto);
@@ -122,6 +123,7 @@ describe('workflow run model mapping', () => {
     expect(run).not.toHaveProperty('startedAt');
     expect(run).not.toHaveProperty('finishedAt');
     expect(run).not.toHaveProperty('displayDuration');
+    expect(run.jobs.hasStartedJobExecution).toBe(true);
     expect(run.runAttempt.displayDuration).toEqual({
       state: 'live',
       fromIso: '2026-05-07T01:01:10.000Z',

package/src/core/workflow-run.ts

@@ -59,14 +59,11 @@ export type {
   WorkflowDisplayStatus,
   WorkflowRun,
   WorkflowRunDetail,
-  WorkflowRunDisplay,
-  WorkflowRunDisplayDuration,
   WorkflowRunJobStatusCount,
   WorkflowRunJobSummary,
   WorkflowRunJobs,
   WorkflowRunListItem,
   WorkflowRunListPage,
-  WorkflowRunProgress,
   WorkflowRunRecord,
   WorkflowRunRerunMode,
   WorkflowRunStatus,
@@ -75,19 +72,14 @@ export type {
   WorkflowStatus,
 } from './entities/workflow-run.js';
 export {
-  deriveWorkflowRunDisplay,
   isWorkflowRunTerminal,
   isWorkflowStatus,
   TERMINAL_WORKFLOW_RUN_STATUSES,
   WORKFLOW_DISPLAY_STATUSES,
   WORKFLOW_RUN_STATUSES,
   workflowRunActor,
-  workflowRunBlockingJob,
   workflowRunBranchLabel,
   workflowRunCommitLabel,
-  workflowRunDetailDisplay,
-  workflowRunFirstStartedAt,
-  workflowRunListItemDisplay,
   workflowRunTriggerDisplayLabel,
   workflowRunTriggerLabel,
 } from './entities/workflow-run.js';

package/src/hooks/api/workflow-run-mapper.ts

@@ -119,6 +119,7 @@ export function toWorkflowRunListItem(dto: WorkflowRunListItemDto): WorkflowRunL
         position: job.position,
       })),
       statusCounts,
+      hasStartedJobExecution: dto.has_started_job_execution ?? true,
       // Derived rather than sent: the counts already cover every job, and a separate total
       // would be a second source of truth that could disagree with them.
       total: statusCounts.reduce((sum, entry) => sum + entry.count, 0),
@@ -146,6 +147,7 @@ export function toWorkflowRunDetail(dto: WorkflowRunDetailResponseDto): Workflow
     latestAttempt: dto.latest_attempt,
     runAttempt: toWorkflowRunAttempt(dto.run_attempt),
     jobs: dto.jobs.map(toJob),
+    hasStartedJobExecution: dto.has_started_job_execution ?? true,
   };
 }
 

package/src/hooks/api/workflow-runs.ts

@@ -358,7 +358,7 @@ function buildTempRun({
     updatedAt: createdAt,
     isTemporary: true,
     // The optimistic row genuinely has no jobs yet: the server has not planned the graph.
-    jobs: {preview: [], statusCounts: [], total: 0},
+    jobs: {preview: [], statusCounts: [], hasStartedJobExecution: false, total: 0},
     runAttempt: new WorkflowRunAttemptSummary({
       workflowRunId: id,
       attempt: 1,

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

@@ -12,6 +12,7 @@ import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Icon, type IconName} from '@shipfox/react-ui/icon';
 import {LoadErrorState} from '@shipfox/react-ui/load-error-state';
+import {Panel} from '@shipfox/react-ui/panel';
 import {RelativeTime, RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
 import {
   Sheet,
@@ -195,7 +196,7 @@ function WorkflowDefinitionsList({
 
   return (
     <>
-      <div className="hidden rounded-8 border border-border-neutral-base md:block">
+      <Panel className="hidden md:flex">
         <Table>
           <TableHeader>
             <TableRow>
@@ -265,7 +266,7 @@ function WorkflowDefinitionsList({
             })}
           </TableBody>
         </Table>
-      </div>
+      </Panel>
 
       <div className="flex flex-col rounded-8 border border-border-neutral-base md:hidden">
         {definitions.map((definition) => {

package/src/pages/workflow-job-detail-page.test.tsx

@@ -41,6 +41,19 @@ describe('WorkflowJobDetailPage', () => {
     jobAnnotations.value = [];
   });
 
+  test('lets the job detail route inherit its shell canvas', async () => {
+    configureApiClient({fetchImpl: vi.fn(() => new Promise<Response>(() => undefined))});
+
+    const {container} = renderJobPath();
+
+    expect(await screen.findByRole('region', {name: 'Loading workflow run'})).toBeInTheDocument();
+
+    const pageRoot = container.querySelector('[data-workflow-page-root="job-detail"]');
+
+    expect(pageRoot).not.toBeNull();
+    expect(pageRoot).not.toHaveClass('bg-background-subtle-base');
+  });
+
   test('links the job to its annotations without rendering one', async () => {
     jobAnnotations.value = [
       {
@@ -88,6 +101,7 @@ describe('WorkflowJobDetailPage', () => {
   });
 
   test('resolves an exact job execution and step attempt from a deep link', async () => {
+    const user = userEvent.setup();
     configureApiClient({fetchImpl: vi.fn(jobDetailFetch)});
 
     renderJobPath(
@@ -104,6 +118,24 @@ describe('WorkflowJobDetailPage', () => {
       await screen.findByRole('region', {name: 'tests output, attempt 2'}),
     ).toBeInTheDocument();
     expect(screen.getByRole('region', {name: 'release logs'})).toBeInTheDocument();
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Refresh logs'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Log settings'})).toBeInTheDocument();
+    const testsAttempt = screen.getByRole('button', {name: 'tests, Succeeded, attempt 2'});
+    await user.click(testsAttempt);
+    await waitFor(() =>
+      expect(
+        screen.queryByRole('region', {name: 'tests output, attempt 2'}),
+      ).not.toBeInTheDocument(),
+    );
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Refresh logs'})).toBeDisabled();
+
+    await user.click(testsAttempt);
+    expect(
+      await screen.findByRole('region', {name: 'tests output, attempt 2'}),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('textbox', {name: 'Search logs'})).not.toBeDisabled();
     expect(screen.queryByRole('tab')).not.toBeInTheDocument();
     expect(screen.getByRole('img', {name: 'Job status: Succeeded'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();

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

@@ -56,7 +56,10 @@ export function WorkflowJobDetailPage({
     [navigate],
   );
   return (
-    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-background">
+    <div
+      data-workflow-page-root="job-detail"
+      className="flex min-h-0 min-w-0 flex-1 overflow-hidden"
+    >
       <WorkflowRunView
         projectId={projectId}
         workspaceSlug={workspaceSlug}
@@ -67,6 +70,7 @@ export function WorkflowJobDetailPage({
         jobSearch={search}
         jobContent={
           <JobDetailView
+            key={jobId}
             workspaceSlug={workspaceSlug}
             projectSlug={projectSlug}
             workflowRunId={workflowRunId}

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

@@ -17,7 +17,7 @@ export function WorkflowRunDetailPage({
   search = {},
 }: WorkflowRunDetailPageProps) {
   return (
-    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-background">
+    <div data-workflow-page-root="run-detail" className="flex min-h-0 flex-1 overflow-hidden">
       <WorkflowRunView
         projectId={projectId}
         workspaceSlug={workspaceSlug}