@shipfox/client-workflows 15.0.0 → 17.0.0

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

@@ -9,8 +9,12 @@ 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 {Job, JobExecution} from '#core/workflow-run.js';
+import {type RefObject, useEffect, useRef, useState} from 'react';
+import type {RunAnnotationSummary} from '#core/run-annotation.js';
+import {summarizeJobAnnotations} from '#core/run-annotation.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 {
   type WorkflowJobSearch,
@@ -22,15 +26,13 @@ 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,
 } from './job-empty-states.js';
 import {
   resolveWorkflowJobSelection,
@@ -38,6 +40,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;
@@ -66,6 +71,37 @@ export function JobDetailView({
   const pageScrollRef = useRef<HTMLDivElement>(null);
   const landingSelectionRef = useRef<FrozenLandingSelection | undefined>(undefined);
   const hasLoadedData = query.data !== undefined;
+  // 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,
+  });
+  const jobAnnotationSummary = annotations.annotations
+    ? summarizeJobAnnotations(annotations.annotations, jobId, {
+        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;
@@ -173,6 +209,10 @@ export function JobDetailView({
     });
   }
 
+  function onInspectorOpenChange(attemptId: string | null) {
+    setInspectorState({key: inspectorResetKey, attemptId});
+  }
+
   function retargetToRunningStep() {
     if (!runningSelection || !selectedJobExecution) return;
     onSelectionChange({
@@ -196,16 +236,23 @@ 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}
                 selectedJobExecution={selectedJobExecution}
                 onSelectedJobExecutionChange={selectExecution}
+                workspaceSlug={workspaceSlug}
+                projectSlug={projectSlug}
+                workflowRunId={run.id}
+                runAttempt={run.runAttempt.attempt}
+                annotationSummary={jobAnnotationSummary}
+                jobContext={
+                  selectedJobExecution ? (
+                    <JobContextPanel job={job} execution={selectedJobExecution} />
+                  ) : undefined
+                }
               />
               <Text as="h2" className="sr-only">
                 Logs
@@ -217,15 +264,30 @@ export function JobDetailView({
                   selectedAttemptId={selectedAttemptId}
                   defaultSelectedAttemptId={landingSelection?.attemptId}
                   onSelectedAttemptChange={selectAttempt}
+                  inspectorOpenAttemptId={inspectorOpenAttemptId}
+                  onInspectorOpenChange={onInspectorOpenChange}
                   autoSelectActiveAttempt
                   emptyState={emptyStateForJob(job, selectedJobExecution)}
                   showHeader={false}
-                  className="rounded-none border-0"
+                  className="rounded-none border-0 bg-transparent"
                   renderExpandedStep={(context) => (
-                    <ExpandedStep
-                      context={context}
+                    <ExpandedStep context={context} pageScrollRef={pageScrollRef} />
+                  )}
+                  renderInspector={(entry) => (
+                    <StepInspectorSheet
+                      entry={entry}
+                      open
+                      onOpenChange={(open) => onInspectorOpenChange(open ? entry.id : null)}
                       workspaceSlug={workspaceSlug}
-                      pageScrollRef={pageScrollRef}
+                      projectSlug={projectSlug}
+                      workflowRunId={run.id}
+                      runAttempt={run.runAttempt.attempt}
+                      jobId={job.id}
+                      annotationCount={annotationCountForStep(
+                        annotationSummaryQuery.data,
+                        entry.step.id,
+                        entry.attempt,
+                      )}
                     />
                   )}
                 />
@@ -237,7 +299,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{' '}
@@ -248,7 +310,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
@@ -256,7 +318,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}
@@ -269,39 +331,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>
   );
@@ -311,7 +361,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}
@@ -332,7 +382,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"
@@ -347,7 +397,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
@@ -370,8 +420,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>
@@ -379,7 +429,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>
@@ -414,21 +464,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.tsx

@@ -25,11 +25,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 +64,7 @@ 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),
       status: displayStatus,
     };
   }
@@ -126,6 +129,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.',
@@ -155,17 +166,19 @@ export function skippedJobDescription(reason: Job['statusReason']): string {
   }
 }
 
-function preStepFailureDescription(reason: string | null): string {
+function preStepFailureDescription(reason: string | null, runner: 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 'condition_errored':
       return 'The job condition could not be evaluated. Review run annotations before re-running the workflow.';
     case 'dependency_not_completed':
@@ -176,9 +189,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 +202,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}

package/src/components/job-detail/json-code.tsx

@@ -0,0 +1,120 @@
+import {
+  CodeBlock,
+  CodeBlockBody,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockFilename,
+  CodeBlockFiles,
+  CodeBlockHeader,
+  CodeBlockItem,
+  CodeTabs,
+} from '@shipfox/react-ui/code-block';
+import {Text} from '@shipfox/react-ui/typography';
+import {useState} from 'react';
+
+export interface JsonCodeEntry {
+  filename: string;
+  label?: string | undefined;
+  value: unknown;
+}
+
+export function JsonCode({
+  title,
+  value,
+  emptyMessage,
+}: {
+  title?: string | undefined;
+  value: unknown;
+  emptyMessage?: string | undefined;
+}) {
+  const filename = title ?? 'value.json';
+
+  return (
+    <div className="flex min-w-0 flex-col gap-tight">
+      {title ? (
+        <Text size="xs" className="text-foreground-neutral-muted">
+          {title}
+        </Text>
+      ) : null}
+      {emptyMessage && isEmptyObject(value) ? (
+        <Text size="xs" className="text-foreground-neutral-muted">
+          {emptyMessage}
+        </Text>
+      ) : (
+        <JsonCodeBlock entries={[{filename, value}]} />
+      )}
+    </div>
+  );
+}
+
+export function JsonCodeTabs({entries}: {entries: readonly JsonCodeEntry[]}) {
+  const entryKeys = entries.map((entry) => entry.label ?? entry.filename);
+  const [activeKey, setActiveKey] = useState(entryKeys[0] ?? '');
+  const activeValue = entryKeys.includes(activeKey) ? activeKey : (entryKeys[0] ?? '');
+  const codes = Object.fromEntries(
+    entries.map((entry) => [entry.label ?? entry.filename, stringifyJson(entry.value)]),
+  );
+
+  return (
+    <CodeTabs
+      value={activeValue}
+      onValueChange={setActiveKey}
+      codes={codes}
+      lang="json"
+      syntaxHighlighting={false}
+      className="h-auto min-h-0 rounded-8 bg-background-contrast-base shadow-button-neutral"
+    />
+  );
+}
+
+function JsonCodeBlock({entries}: {entries: readonly JsonCodeEntry[]}) {
+  const data = entries.map((entry) => ({
+    filename: entry.filename,
+    language: 'json',
+    code: stringifyJson(entry.value),
+  }));
+
+  return (
+    <CodeBlock
+      data={data}
+      className="h-auto min-h-0 rounded-6 bg-background-contrast-base shadow-button-neutral"
+    >
+      <CodeBlockHeader className="bg-background-contrast-base p-tight">
+        <CodeBlockFiles>
+          {(item) => {
+            const entry = entries.find((candidate) => candidate.filename === item.filename);
+            return (
+              <CodeBlockFilename value={item.filename}>
+                {entry?.label ?? item.filename}
+              </CodeBlockFilename>
+            );
+          }}
+        </CodeBlockFiles>
+        <CodeBlockCopyButton />
+      </CodeBlockHeader>
+      <CodeBlockBody>
+        {(item) => (
+          <CodeBlockItem value={item.filename}>
+            <CodeBlockContent language="json" syntaxHighlighting={false}>
+              {item.code}
+            </CodeBlockContent>
+          </CodeBlockItem>
+        )}
+      </CodeBlockBody>
+    </CodeBlock>
+  );
+}
+
+function isEmptyObject(value: unknown): boolean {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.keys(value).length === 0
+  );
+}
+
+function stringifyJson(value: unknown): string {
+  const serialized = JSON.stringify(value, null, 2);
+  return serialized === undefined ? String(value) : serialized;
+}

package/src/components/job-detail/step-attempt-log-panel.test.tsx

@@ -203,6 +203,7 @@ describe('StepAttemptLogPanel', () => {
     renderPanel({attemptStatus: 'succeeded'});
 
     expect(await screen.findByText('hello')).toBeInTheDocument();
+    expect(screen.getByRole('log')).toHaveAttribute('aria-live', 'off');
   });
 
   test('renders a terminal closed empty stream as no output', async () => {

package/src/components/job-detail/step-attempt-log-panel.tsx

@@ -100,10 +100,15 @@ export function StepAttemptLogPanel({
   }
 
   return (
-    <div className="flex min-w-0 flex-col gap-8">
+    <div className="flex min-w-0 flex-col gap-inline">
       {staleError ? (
-        <Callout role="alert" type="warning" className="px-10 py-8">
-          <div className="flex min-w-0 flex-1 items-center justify-between gap-8">
+        <Callout
+          role="alert"
+          type="warning"
+          variant="secondary"
+          className="rounded-none border-b border-border-neutral-base px-0 py-row shadow-none"
+        >
+          <div className="flex min-w-0 flex-1 items-center justify-between gap-inline">
             <Text size="xs">Could not refresh logs.</Text>
             <Button
               type="button"
@@ -121,6 +126,7 @@ export function StepAttemptLogPanel({
         records={records}
         emptyState={query.data?.complete ? 'complete' : 'pending'}
         anchorToFailure={anchorToFailure}
+        ariaLive={attemptStatus === 'running' ? 'polite' : 'off'}
         className={surfaceClassName}
       />
     </div>
@@ -138,7 +144,7 @@ function StepLogsLoadingSurface({label, className}: {label: string; className: s
 function StepLogsWaitingSurface({startedAt, className}: {startedAt: string; className: string}) {
   return (
     <div role="status" aria-label="Waiting for logs" className={className}>
-      <Text size="xs" className="px-10 py-12 text-foreground-neutral-muted">
+      <Text size="xs" className="px-tight py-row text-foreground-neutral-muted">
         Waiting for output ·{' '}
         <span className="font-code tabular-nums" aria-hidden="true">
           <JobExecutionTimeText time={{state: 'live', fromIso: startedAt}} />
@@ -174,8 +180,13 @@ function isTerminalAttemptStatus(status: string): boolean {
 
 function StepLogsError({retrying, onRetry}: {retrying: boolean; onRetry: () => void}) {
   return (
-    <Callout role="alert" type="error" className="px-10 py-8">
-      <div className="flex min-w-0 flex-1 items-center justify-between gap-8">
+    <Callout
+      role="alert"
+      type="error"
+      variant="secondary"
+      className="rounded-none border-b border-border-neutral-base px-0 py-row shadow-none"
+    >
+      <div className="flex min-w-0 flex-1 items-center justify-between gap-inline">
         <Text size="xs">Could not load logs.</Text>
         <Button type="button" size="2xs" variant="secondary" isLoading={retrying} onClick={onRetry}>
           Retry