@shipfox/client-workflows 16.0.0 → 18.0.0

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

@@ -9,9 +9,11 @@ import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';
 import {Text} from '@shipfox/react-ui/typography';
 import {Link} from '@tanstack/react-router';
-import {type RefObject, useEffect, useRef} from 'react';
+import {type RefObject, useEffect, useRef, useState} from 'react';
+import type {RunAnnotationSummary} from '#core/run-annotation.js';
 import {summarizeJobAnnotations} from '#core/run-annotation.js';
-import type {Job, JobExecution} from '#core/workflow-run.js';
+import {isWorkflowRunTerminal, type Job, type JobExecution} from '#core/workflow-run.js';
+import {useWorkflowRunAnnotationSummaryQuery} from '#hooks/api/annotations.js';
 import {useRunAnnotationsQuery} from '#hooks/api/run-annotations.js';
 import type {useWorkflowRunAttemptQuery} from '#hooks/api/workflow-runs.js';
 import {
@@ -24,15 +26,14 @@ import {
   WorkflowRunNotFound,
   WorkflowRunStaleError,
 } from '../workflow-run-view/workflow-run-states.js';
-import {AgentConfigFailureCallout} from './agent-config-failure-callout.js';
+import {JobContextPanel} from './job-context-panel.js';
 import {JobDetailHeader} from './job-detail-header.js';
 import {
   CarriedOverStepPanel,
   emptyStateForJob,
   emptyStateForMissingExecution,
-  isAgentConfigFailure,
   jobSucceededSummary,
-  toSelectedAttemptError,
+  MaterializedOutputFailureNotice,
 } from './job-empty-states.js';
 import {
   resolveWorkflowJobSelection,
@@ -40,6 +41,9 @@ import {
   workflowJobLandingSelection,
 } from './job-selection.js';
 import {StepAttemptLogPanel} from './step-attempt-log-panel.js';
+import {StepInspectorSheet} from './step-troubleshooting.js';
+
+type InspectorState = {key: string; attemptId: string | null};
 
 export interface JobDetailViewProps {
   workspaceSlug: string;
@@ -68,7 +72,8 @@ export function JobDetailView({
   const pageScrollRef = useRef<HTMLDivElement>(null);
   const landingSelectionRef = useRef<FrozenLandingSelection | undefined>(undefined);
   const hasLoadedData = query.data !== undefined;
-  // Same query key as the run workspace, so this reads the cache instead of fetching again.
+  // Reuse the run workspace's bounded annotation read for the job header chip. The separate
+  // summary query below stays counts-only and is scoped to the inspector's selected execution.
   const annotations = useRunAnnotationsQuery({
     workflowRunId,
     runAttempt: query.data?.runAttempt.attempt,
@@ -78,6 +83,26 @@ export function JobDetailView({
         truncated: annotations.summary?.truncated ?? false,
       })
     : undefined;
+  const inspectorResetKey = `${jobId}:${search.jobExecutionId ?? ''}`;
+  const [inspectorState, setInspectorState] = useState<InspectorState>(() => ({
+    key: inspectorResetKey,
+    attemptId: null,
+  }));
+  const inspectorOpenAttemptId =
+    inspectorState.key === inspectorResetKey ? inspectorState.attemptId : null;
+  const annotationJob = query.data?.jobs.find((candidate) => candidate.id === jobId);
+  const annotationExecutionId = annotationJob
+    ? resolveWorkflowJobSelection({job: annotationJob, selection: search}).jobExecution?.id
+    : search.jobExecutionId;
+  const annotationPolling = query.data
+    ? !isWorkflowRunTerminal(query.data.runAttempt.status)
+    : true;
+  const annotationSummaryQuery = useWorkflowRunAnnotationSummaryQuery(
+    query.data?.id,
+    query.data?.runAttempt.attempt,
+    annotationExecutionId,
+    {polling: annotationPolling},
+  );
 
   useEffect(() => {
     if (!jobId || !hasLoadedData) return;
@@ -185,6 +210,10 @@ export function JobDetailView({
     });
   }
 
+  function onInspectorOpenChange(attemptId: string | null) {
+    setInspectorState({key: inspectorResetKey, attemptId});
+  }
+
   function retargetToRunningStep() {
     if (!runningSelection || !selectedJobExecution) return;
     onSelectionChange({
@@ -208,11 +237,8 @@ export function JobDetailView({
             attempt={newerAttempt}
           />
         ) : null}
-        <div ref={pageScrollRef} className="@container min-h-0 flex-1 overflow-auto pb-24">
-          <section
-            aria-label={`${job.displayName} logs`}
-            className="mx-auto flex w-full max-w-[1120px] flex-col gap-8 px-24"
-          >
+        <div ref={pageScrollRef} className="@container min-h-0 flex-1 overflow-auto pb-panel">
+          <section aria-label={`${job.displayName} logs`} className="flex w-full flex-col">
             <section className="min-w-0 overflow-hidden">
               <JobDetailHeader
                 job={job}
@@ -220,32 +246,55 @@ export function JobDetailView({
                 onSelectedJobExecutionChange={selectExecution}
                 workspaceSlug={workspaceSlug}
                 projectSlug={projectSlug}
-                workflowRunId={workflowRunId}
+                workflowRunId={run.id}
                 runAttempt={run.runAttempt.attempt}
                 annotationSummary={jobAnnotationSummary}
+                jobContext={
+                  selectedJobExecution ? (
+                    <JobContextPanel job={job} execution={selectedJobExecution} />
+                  ) : undefined
+                }
               />
-              <Text as="h3" className="sr-only">
+              <Text as="h2" className="sr-only">
                 Logs
               </Text>
               {selectedJobExecution ? (
-                <StepList
-                  job={job}
-                  jobExecution={selectedJobExecution}
-                  selectedAttemptId={selectedAttemptId}
-                  defaultSelectedAttemptId={landingSelection?.attemptId}
-                  onSelectedAttemptChange={selectAttempt}
-                  autoSelectActiveAttempt
-                  emptyState={emptyStateForJob(job, selectedJobExecution)}
-                  showHeader={false}
-                  className="rounded-none border-0"
-                  renderExpandedStep={(context) => (
-                    <ExpandedStep
-                      context={context}
-                      workspaceSlug={workspaceSlug}
-                      pageScrollRef={pageScrollRef}
-                    />
-                  )}
-                />
+                <>
+                  <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} />
               )}
@@ -254,7 +303,7 @@ export function JobDetailView({
               <div
                 role="status"
                 aria-live="polite"
-                className="flex min-w-0 items-center justify-between gap-8 rounded-8 border border-border-neutral-base bg-background-components-base px-10 py-8"
+                className="flex min-w-0 items-center justify-between gap-inline border-t border-border-neutral-base px-row py-row"
               >
                 <Text size="xs" className="min-w-0 text-foreground-neutral-muted">
                   Run moved on to{' '}
@@ -265,7 +314,7 @@ export function JobDetailView({
                 </Text>
                 <button
                   type="button"
-                  className="shrink-0 rounded-4 px-6 py-4 text-xs font-medium text-foreground-highlight-interactive outline-none focus-visible:shadow-border-interactive-with-active"
+                  className="shrink-0 rounded-4 px-tight py-[4px] text-xs font-medium text-foreground-highlight-interactive outline-none focus-visible:shadow-border-interactive-with-active"
                   onClick={retargetToRunningStep}
                 >
                   Jump to it
@@ -273,7 +322,7 @@ export function JobDetailView({
               </div>
             ) : null}
             {succeededSummary ? (
-              <Text size="xs" className="px-8 text-foreground-neutral-muted">
+              <Text size="xs" className="px-row py-row text-foreground-neutral-muted">
                 {succeededSummary}
               </Text>
             ) : null}
@@ -286,39 +335,27 @@ export function JobDetailView({
 
 function ExpandedStep({
   context,
-  workspaceSlug,
   pageScrollRef,
 }: {
   context: StepExpandedContext;
-  workspaceSlug: string;
   pageScrollRef: RefObject<HTMLDivElement | null>;
 }) {
   if (context.carriedOver) return <CarriedOverStepPanel />;
 
-  const selectedAttemptError =
-    toSelectedAttemptError(context.step, context.attemptError) ?? context.step.error;
-
   return (
     <section
       role="region"
       tabIndex={0}
       aria-label={`${context.stepLabel} output, attempt ${context.attempt}`}
-      className="flex min-w-0 flex-col gap-10 border-t border-border-neutral-base bg-background-neutral-subtle px-16 py-12 outline-none focus-visible:shadow-border-interactive-with-active"
+      className="flex min-w-0 flex-col border-t border-border-neutral-base bg-background-neutral-base outline-none focus-visible:shadow-border-interactive-with-active dark:bg-background-contrast-subtle"
     >
-      {isAgentConfigFailure(context.step, selectedAttemptError) ? (
-        <AgentConfigFailureCallout
-          workspaceSlug={workspaceSlug}
-          config={context.step.agentConfig}
-          error={selectedAttemptError}
-        />
-      ) : null}
       <StepAttemptLogPanel
         stepId={context.stepId}
         attempt={context.attempt}
         attemptStatus={context.attemptStatus}
         attemptStartedAt={context.attemptStartedAt}
         pageScrollRef={pageScrollRef}
-        surfaceClassName="rounded-8"
+        surfaceClassName="rounded-none border-0 bg-transparent shadow-none"
       />
     </section>
   );
@@ -328,7 +365,7 @@ function EmptyStateForMissingExecution({job}: {job: Job}) {
   const emptyState = emptyStateForMissingExecution(job);
   return (
     <EmptyState
-      className="min-h-120 px-16 py-20"
+      className="min-h-120 p-panel"
       icon="componentLine"
       title={emptyState.title}
       description={emptyState.description}
@@ -349,7 +386,7 @@ function JobNotFoundState({
   search: WorkflowJobSearch;
 }) {
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 flex-col items-center justify-center gap-12 p-24">
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col items-center justify-center gap-cluster p-panel">
       <EmptyState
         icon="componentLine"
         title="Job not found"
@@ -364,7 +401,7 @@ function JobNotFoundState({
             {runAttempt: search.runAttempt},
           ) as never
         }
-        className="inline-flex items-center gap-6 rounded-6 px-8 py-6 text-sm text-foreground-highlight-interactive outline-none focus-visible:shadow-border-interactive-with-active"
+        className="inline-flex items-center gap-inline rounded-6 px-tight py-[6px] text-sm text-foreground-highlight-interactive outline-none focus-visible:shadow-border-interactive-with-active"
       >
         <Icon name="arrowLeftLine" size={14} aria-hidden="true" />
         Back to run summary
@@ -387,8 +424,8 @@ function NewerAttemptNotice({
   attempt: number;
 }) {
   return (
-    <div role="status" className="border-b border-border-neutral-base px-16 py-8">
-      <div className="mx-auto flex max-w-[1120px] items-center justify-between gap-8 rounded-8 border border-border-neutral-base bg-background-components-base px-10 py-8">
+    <div role="status" className="border-b border-border-neutral-base px-row py-row">
+      <div className="flex items-center justify-between gap-inline">
         <Text size="xs" className="text-foreground-neutral-muted">
           A newer run attempt is available.
         </Text>
@@ -396,7 +433,7 @@ function NewerAttemptNotice({
           to="/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId/jobs/$jobId"
           params={{workspaceSlug, projectSlug, workflowRunId: runId, jobId}}
           search={workflowJobSearchParams({runAttempt: attempt}) as never}
-          className="shrink-0 rounded-4 px-6 py-4 text-xs font-medium text-foreground-highlight-interactive outline-none focus-visible:shadow-border-interactive-with-active"
+          className="shrink-0 rounded-4 px-tight py-[4px] text-xs font-medium text-foreground-highlight-interactive outline-none focus-visible:shadow-border-interactive-with-active"
         >
           View attempt #{attempt}
         </Link>
@@ -431,21 +468,30 @@ function findAttempt(jobExecution: JobExecution, attemptId: string) {
   return undefined;
 }
 
+function annotationCountForStep(
+  summary: RunAnnotationSummary | undefined,
+  stepId: string,
+  attempt: number,
+): number | undefined {
+  return summary?.stepCounts?.find((entry) => entry.stepId === stepId && entry.attempt === attempt)
+    ?.total;
+}
+
 function JobDetailSkeleton() {
   return (
-    <div className="min-h-0 min-w-0 flex-1 overflow-auto px-24 pb-24">
-      <div className="mx-auto max-w-[1120px] overflow-hidden">
-        <header className="flex items-center gap-12 border-b border-border-neutral-base px-16 py-12">
+    <div className="min-h-0 min-w-0 flex-1 overflow-auto pb-panel">
+      <div className="w-full">
+        <header className="flex items-center gap-cluster border-b border-border-neutral-base px-row py-row">
           <Skeleton className="size-20 rounded-full" />
           <Skeleton className="h-20 w-160 rounded-4" />
           <Skeleton className="h-24 w-72 rounded-6" />
           <Skeleton className="h-24 w-180 rounded-4" />
         </header>
-        <div className="p-16">
+        <div className="p-panel-compact">
           {JOB_DETAIL_SKELETON_ROWS.map((row) => (
             <div
               key={row}
-              className="flex min-h-44 items-center gap-8 border-b border-border-neutral-base last:border-b-0"
+              className="flex min-h-44 items-center gap-inline border-b border-border-neutral-base last:border-b-0"
             >
               <Skeleton className="size-14 rounded-full" />
               <Skeleton className="h-16 w-180 rounded-4" />

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,
@@ -25,11 +64,14 @@ export function emptyStateForJob(
     job.mode === 'listening'
       ? deriveJobExecutionDisplayStatus(jobExecution)
       : deriveJobDisplayStatus(job);
+  const runner = jobExecution.runner?.length ? jobExecution.runner : job.runner;
 
   if (jobExecution.status === 'running' && displayStatus === 'pending') {
     return {
-      title: 'Runner preparing job',
-      description: 'A runner is assigned. Steps will appear here when work begins.',
+      title: runner?.length ? 'Runner preparing job' : 'Waiting for a runner',
+      description: runner?.length
+        ? `Runner ${runner.join(', ')} is preparing the job. Steps will appear here when work begins.`
+        : 'No runner has claimed this job yet. Steps will appear here when a runner starts work.',
       status: displayStatus,
     };
   }
@@ -61,7 +103,11 @@ export function emptyStateForJob(
   if (displayStatus === 'failed') {
     return {
       title: 'Job failed before its first step started',
-      description: preStepFailureDescription(jobExecution.statusReason ?? job.statusReason),
+      description: preStepFailureDescription(
+        jobExecution.statusReason ?? job.statusReason,
+        runner,
+        jobExecution.statusReasonMessage,
+      ),
       status: displayStatus,
     };
   }
@@ -126,6 +172,14 @@ export function emptyStateForMissingExecution(job: Job): StepListEmptyState {
     };
   }
 
+  if (job.status === 'failed') {
+    return {
+      title: 'Job failed before an execution was created',
+      description: preStepFailureDescription(job.statusReason, job.runner),
+      status: 'failed',
+    };
+  }
+
   return {
     title: 'Execution details unavailable',
     description: 'This job finished, but no job execution record is available.',
@@ -148,24 +202,37 @@ 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): 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) {
     case 'runner_lost':
-      return 'The runner stopped responding before work began. Check runner availability before re-running the workflow.';
+      return `The runner stopped responding before work began.${runnerCopy} Check runner availability before re-running the workflow.`;
     case 'timed_out':
-      return 'The job timed out before work began. Check runner capacity and timeout configuration before re-running the workflow.';
+      return `The job timed out before work began.${runnerCopy} Check runner capacity and timeout configuration before re-running the workflow.`;
     case 'user_cancelled':
     case 'run_cancelled':
       return 'The execution ended while the run was being cancelled.';
     case 'step_failed':
-      return 'The execution failed before step details were recorded. Review run annotations before re-running the workflow.';
+      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':
@@ -176,9 +243,9 @@ function preStepFailureDescription(reason: string | null): string {
       return 'The job condition did not match, so no work started.';
     case 'unknown':
     case null:
-      return 'Shipfox did not record a failure reason. Re-run only after checking the runner and workflow configuration.';
+      return `Shipfox did not record a failure reason.${runnerCopy} Re-run only after checking the runner and workflow configuration.`;
     default:
-      return `The execution ended because ${humanizeFailureReason(reason)}. Resolve that condition before re-running the workflow.`;
+      return `The execution ended because ${humanizeFailureReason(reason)}.${runnerCopy} Resolve that condition before re-running the workflow.`;
   }
 }
 
@@ -189,7 +256,7 @@ function humanizeFailureReason(reason: string): string {
 export function CarriedOverStepPanel() {
   return (
     <EmptyState
-      className="min-h-120 rounded-8 border border-border-neutral-base bg-background-components-base px-16 py-20"
+      className="min-h-120 rounded-8 border border-border-neutral-base bg-background-components-base p-panel"
       icon="componentLine"
       title="Carried over from a previous attempt"
       description="Not executed in this run."

package/src/components/job-detail/job-execution-switcher.tsx

@@ -44,7 +44,7 @@ export function JobExecutionSwitcher({
     return (
       <div
         className={cn(
-          'flex min-w-0 items-center gap-6 text-sm leading-20 text-foreground-neutral-subtle',
+          'flex min-w-0 items-center gap-inline text-sm leading-20 text-foreground-neutral-subtle',
           className,
         )}
       >
@@ -59,8 +59,8 @@ export function JobExecutionSwitcher({
         className={cn(
           'inline-flex min-w-0 max-w-full items-center rounded-6 text-left transition-colors focus-visible:shadow-border-interactive-with-active focus-visible:outline-none',
           variant === 'title'
-            ? '-mx-6 -my-4 gap-8 px-6 py-4 hover:bg-background-components-hover'
-            : 'min-h-28 gap-6 px-8 py-4 text-sm leading-20 text-foreground-neutral-subtle hover:bg-background-components-hover',
+            ? '-mx-inline -my-[4px] gap-inline px-tight py-[4px] hover:bg-background-components-hover'
+            : 'min-h-28 gap-inline px-tight py-[4px] text-sm leading-20 text-foreground-neutral-subtle hover:bg-background-components-hover',
           className,
         )}
         aria-label={`Switch job execution, currently execution ${selected.sequence}: ${selected.displayName}`}
@@ -141,7 +141,7 @@ function executionAccessibleLabel(execution: JobExecution): string {
 
 function TitleExecutionSummary({execution}: {execution: JobExecution}) {
   return (
-    <span className="flex min-w-0 items-center gap-8">
+    <span className="flex min-w-0 items-center gap-inline">
       <Text as="span" size="sm" bold className="shrink-0 text-foreground-neutral-base">
         #{execution.sequence}
       </Text>
@@ -156,7 +156,7 @@ function ExecutionSummary({execution}: {execution: JobExecution}) {
   const displayStatus = deriveJobExecutionDisplayStatus(execution);
 
   return (
-    <span className="flex min-w-0 items-center gap-6">
+    <span className="flex min-w-0 items-center gap-inline">
       <WorkflowStatusIcon status={displayStatus} size={14} tooltip={false} />
       <span className="shrink-0 font-code text-xs leading-20 text-foreground-neutral-base tabular-nums">
         Execution #{execution.sequence}