@shipfox/client-workflows 16.0.0 → 18.0.0

package/src/components/workflow-run-tabs/index.ts

@@ -1,5 +1,9 @@
 export {RunAnnotationCountChip} from './run-annotation-count-chip.js';
 export {annotationElementId, RunAnnotationItem} from './run-annotation-item.js';
-export {RunAnnotationList, type RunAnnotationListQuery} from './run-annotation-list.js';
+export {
+  type DerivedRunAnnotation,
+  RunAnnotationList,
+  type RunAnnotationListQuery,
+} from './run-annotation-list.js';
 export {RunAnnotationSummaryLine} from './run-annotation-summary-line.js';
 export {RunAnnotationsEmpty} from './run-annotations-empty.js';

package/src/components/workflow-run-tabs/run-annotation-count-chip.tsx

@@ -45,10 +45,10 @@ export function RunAnnotationCountChip({
       search={workflowRunSearchParams(search, search) as never}
       aria-label={accessibleLabel}
       className={cn(
-        'inline-flex h-20 shrink-0 items-center gap-4 rounded-4 border px-6 font-code text-xs leading-16 tabular-nums outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active',
+        'inline-flex h-20 shrink-0 items-center gap-tight rounded-4 border px-tight font-code text-xs leading-16 tabular-nums outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active',
         // The chip stays 20px optically so it sits level with the duration metadata beside it;
         // the hit area grows to the 44px minimum only where the pointer is coarse.
-        '[@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:px-10',
+        '[@media(pointer:coarse)]:h-44 [@media(pointer:coarse)]:px-[10px]',
         severity ? SEVERITY_CHIP_TONE[severity] : 'border-border-neutral-base',
       )}
     >

package/src/components/workflow-run-tabs/run-annotation-list.tsx

@@ -1,11 +1,11 @@
-import {QueryLoadError, type QueryLoadErrorQuery} from '@shipfox/client-ui';
+import {AnnotationCard, QueryLoadError, type QueryLoadErrorQuery} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Text} from '@shipfox/react-ui/typography';
 import {useState} from 'react';
-import type {RunAnnotationEntry} from '#core/run-annotation.js';
+import type {RunAnnotationEntry, RunAnnotationStyle} from '#core/run-annotation.js';
 import {RunAnnotationItem} from './run-annotation-item.js';
 import {RunAnnotationsEmpty} from './run-annotations-empty.js';
 
@@ -19,6 +19,8 @@ export interface RunAnnotationListQuery extends QueryLoadErrorQuery {
 export interface RunAnnotationListProps {
   query: RunAnnotationListQuery;
   entries: RunAnnotationEntry[] | undefined;
+  /** Synthetic terminal-job diagnostics for jobs that never created an execution record. */
+  derivedAnnotations?: readonly DerivedRunAnnotation[] | undefined;
   workflowRunId: string;
   workspaceSlug?: string | undefined;
   projectSlug?: string | undefined;
@@ -33,6 +35,12 @@ export interface RunAnnotationListProps {
   selectedAnnotationId?: string | undefined;
 }
 
+export interface DerivedRunAnnotation {
+  id: string;
+  style: RunAnnotationStyle;
+  body: string;
+}
+
 /**
  * How many annotations render at once.
  *
@@ -51,6 +59,7 @@ const RENDER_WINDOW = 25;
 export function RunAnnotationList({
   query,
   entries,
+  derivedAnnotations = [],
   workflowRunId,
   workspaceSlug,
   projectSlug,
@@ -80,12 +89,13 @@ export function RunAnnotationList({
 
   const visible = entries.slice(0, renderCount);
   const hiddenCount = entries.length - visible.length;
+  const hasContent = entries.length > 0 || derivedAnnotations.length > 0;
 
   return (
-    <div className="flex min-w-0 flex-col gap-12">
+    <div className="flex min-w-0 flex-col gap-cluster">
       {query.isError ? <RunAnnotationStaleError query={query} /> : null}
 
-      {entries.length === 0 ? (
+      {!hasContent ? (
         filtered ? (
           <RunAnnotationsFilteredEmpty
             jobName={filteredJobName}
@@ -97,7 +107,7 @@ export function RunAnnotationList({
           <RunAnnotationsEmpty />
         )
       ) : (
-        <ol className="flex min-w-0 flex-col gap-12">
+        <ol className="flex min-w-0 flex-col gap-cluster">
           {visible.map((entry) => (
             <RunAnnotationItem
               key={entry.annotation.id}
@@ -109,6 +119,11 @@ export function RunAnnotationList({
               selected={entry.annotation.id === selectedAnnotationId}
             />
           ))}
+          {derivedAnnotations.map((annotation) => (
+            <li key={annotation.id}>
+              <AnnotationCard style={annotation.style} body={annotation.body} />
+            </li>
+          ))}
         </ol>
       )}
 
@@ -187,7 +202,7 @@ function RunAnnotationsFilteredEmpty({
   onClearFilters: (() => void) | undefined;
 }) {
   return (
-    <div className="flex flex-col items-center gap-12">
+    <div className="flex flex-col items-center gap-cluster">
       <EmptyState
         icon="fileDamageLine"
         title={incomplete ? 'No matches in loaded annotations' : 'No matching annotations'}
@@ -216,7 +231,7 @@ function RunAnnotationsFilteredEmpty({
 function RunAnnotationStaleError({query}: {query: QueryLoadErrorQuery}) {
   return (
     <Callout role="status" aria-live="polite" type="error">
-      <div className="flex w-full items-center justify-between gap-8">
+      <div className="flex w-full items-center justify-between gap-inline">
         <Text size="xs">Could not refresh annotations.</Text>
         <Button
           type="button"
@@ -239,14 +254,14 @@ const ANNOTATION_SKELETON_ROWS = ['first', 'second', 'third'];
 
 function RunAnnotationListSkeleton() {
   return (
-    <section aria-label="Loading annotations" className="flex flex-col gap-12">
+    <section aria-label="Loading annotations" className="flex flex-col gap-cluster">
       {ANNOTATION_SKELETON_ROWS.map((row) => (
         <div
           key={row}
-          className="flex gap-12 rounded-8 border border-border-neutral-base bg-background-components-base px-12 py-8"
+          className="flex gap-cluster rounded-8 border border-border-neutral-base bg-background-components-base px-[12px] py-[8px]"
         >
           <Skeleton className="h-40 w-4 rounded-full" />
-          <div className="flex min-w-0 flex-1 flex-col gap-6">
+          <div className="flex min-w-0 flex-1 flex-col gap-inline">
             <Skeleton className="h-20 w-160 rounded-4" />
             <Skeleton className="h-16 w-240 rounded-4" />
             <Skeleton className="h-40 w-full rounded-4" />

package/src/components/workflow-run-tabs/run-annotation-summary-line.tsx

@@ -1,3 +1,4 @@
+import {MetadataSeparator} from '@shipfox/client-ui';
 import {Icon} from '@shipfox/react-ui/icon';
 import {Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
@@ -8,7 +9,6 @@ import {
   type WorkflowRunsSearch,
   workflowRunSearchParams,
 } from '#routes/inputs.js';
-import {MetadataSeparator} from '../workflow-run-summary/workflow-run-summary.js';
 import {SEVERITY_ICON, SEVERITY_ICON_TONE} from './severity-visuals.js';
 
 /**
@@ -48,7 +48,7 @@ export function RunAnnotationSummaryLine({
   const totalLabel = countLabel(summary.total, 'annotation', summary.truncated);
 
   return (
-    <div className="flex flex-wrap items-center gap-x-8 gap-y-4 text-foreground-neutral-subtle">
+    <div className="flex flex-wrap items-center gap-x-inline gap-y-tight text-foreground-neutral-subtle">
       {search.severity && workspaceSlug && projectSlug && workflowRunId ? (
         // The severity filter has no control of its own, so while one is active the total is
         // the way back out. Unfiltered it stays plain text: a link to where you already are
@@ -77,7 +77,7 @@ export function RunAnnotationSummaryLine({
         </Text>
       )}
       {visibleSeverities.map((severity) => (
-        <span key={severity} className="inline-flex shrink-0 items-center gap-8">
+        <span key={severity} className="inline-flex shrink-0 items-center gap-inline">
           <MetadataSeparator />
           <SeverityLink
             count={summary[severity]}
@@ -127,7 +127,7 @@ function SeverityLink({
   );
 
   if (!workspaceSlug || !projectSlug || !workflowRunId) {
-    return <span className="inline-flex items-center gap-4">{content}</span>;
+    return <span className="inline-flex items-center gap-tight">{content}</span>;
   }
 
   const searchWithoutAnnotation = withoutAnnotation(search);
@@ -142,7 +142,7 @@ function SeverityLink({
           search,
         ) as never
       }
-      className="inline-flex items-center gap-4 rounded-4 outline-none hover:underline focus-visible:shadow-border-interactive-with-active"
+      className="inline-flex items-center gap-tight rounded-4 outline-none hover:underline focus-visible:shadow-border-interactive-with-active"
     >
       {content}
     </Link>

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

@@ -53,12 +53,16 @@ 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"
-              className="flex min-h-44 w-full items-center justify-between gap-12 px-16 text-left outline-none focus-visible:shadow-border-interactive-with-active min-[768px]:hidden"
+              className="flex min-h-44 w-full items-center justify-between gap-cluster px-row text-left outline-none focus-visible:shadow-border-interactive-with-active min-[768px]:hidden"
               aria-label="Toggle run navigation"
             >
               <span className="min-w-0">
@@ -82,7 +86,7 @@ export function RunWorkspaceNav({
           </CollapsibleTrigger>
           <div
             className={cn(
-              'max-h-[50vh] overflow-y-auto p-8 min-[768px]:block min-[768px]:max-h-none min-[768px]:p-12',
+              '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-16">
+    <nav aria-label="Run workspace" className="flex min-h-0 min-w-0 flex-1 flex-col gap-group">
       <ul>
         <li>
           <RunSectionLink
@@ -151,8 +155,11 @@ function RunWorkspaceNavContent({
         </li>
       </ul>
 
-      <section aria-labelledby="run-workspace-jobs-heading" className="min-w-0">
-        <div className="flex items-center justify-between gap-8 px-8 pb-6">
+      <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"
             id="run-workspace-jobs-heading"
@@ -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);
@@ -182,7 +189,7 @@ function RunWorkspaceNavContent({
                   onClick={onNavigate}
                   aria-current={current ? 'page' : undefined}
                   className={cn(
-                    'flex min-h-32 min-w-0 items-center gap-8 rounded-4 px-8 text-left outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
+                    'flex min-h-32 min-w-0 items-center gap-inline rounded-4 px-tight text-left outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
                     current && 'bg-background-neutral-hover',
                   )}
                 >
@@ -210,7 +217,7 @@ function RunWorkspaceNavContent({
           id="run-workspace-details-heading"
           size="xs"
           bold
-          className="px-8 pb-6 text-foreground-neutral-muted"
+          className="px-tight pb-[6px] text-foreground-neutral-muted"
         >
           Run details
         </Text>
@@ -285,7 +292,7 @@ function RunSectionLink({
           : undefined
       }
       className={cn(
-        'flex min-h-32 items-center gap-8 rounded-4 px-8 text-xs font-medium text-foreground-neutral-base outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
+        'flex min-h-32 items-center gap-inline rounded-4 px-tight text-xs font-medium text-foreground-neutral-base outline-none transition-colors hover:bg-background-neutral-hover focus-visible:shadow-border-interactive-with-active @max-[767px]:min-h-44 [@media(pointer:coarse)]:min-h-44',
         current && 'bg-background-neutral-hover',
       )}
     >

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

@@ -9,10 +9,10 @@ export function WorkflowRunSkeleton() {
   return (
     <section
       aria-label="Loading workflow run"
-      className="bg-background-neutral-background px-16 py-12"
+      className="bg-background-neutral-background px-row py-row"
     >
-      <div className="flex min-w-0 flex-wrap items-center gap-x-12 gap-y-8">
-        <div className="flex min-w-0 items-center gap-8">
+      <div className="flex min-w-0 flex-wrap items-center gap-x-cluster gap-y-inline">
+        <div className="flex min-w-0 items-center gap-inline">
           <Skeleton className="size-8 rounded-full" />
           <Skeleton className="h-24 w-180 rounded-6" />
         </div>
@@ -35,7 +35,7 @@ export function WorkflowRunContentSkeleton() {
   return (
     <section
       aria-label="Loading workflow run content"
-      className="min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-16"
+      className="min-h-160 rounded-8 border border-border-neutral-base bg-background-components-base p-panel-compact"
     >
       <Skeleton className="h-160 w-full rounded-6" />
     </section>
@@ -59,9 +59,9 @@ export function WorkflowRunNotFound() {
  */
 export function WorkflowRunStaleError({query}: {query: QueryLoadErrorQuery}) {
   return (
-    <div className="border-b border-border-neutral-base p-8">
+    <div className="border-b border-border-neutral-base p-tight">
       <Callout role="alert" type="error">
-        <div className="flex items-center justify-between gap-8">
+        <div className="flex items-center justify-between gap-inline">
           <Text size="xs">Could not refresh this run.</Text>
           <Button
             type="button"

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

@@ -14,7 +14,12 @@ import {Text} from '@shipfox/react-ui/typography';
 import {useNavigate} from '@tanstack/react-router';
 import {type ReactNode, useEffect, useMemo} from 'react';
 import {buildRunAnnotationList, type RunAnnotationSummary} from '#core/run-annotation.js';
-import {isWorkflowRunTerminal, type Job, type WorkflowRunRerunMode} from '#core/workflow-run.js';
+import {
+  type EvaluationTraceEntry,
+  isWorkflowRunTerminal,
+  type Job,
+  type WorkflowRunRerunMode,
+} from '#core/workflow-run.js';
 import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
 import {useRunAnnotationsQuery} from '#hooks/api/run-annotations.js';
 import {
@@ -32,7 +37,11 @@ import {
 import {JobGraph} from '../job-graph/index.js';
 import type {JobGraphSelectionSource} from '../job-graph/types.js';
 import {WorkflowRunSummary} from '../workflow-run-summary/index.js';
-import {RunAnnotationList, RunAnnotationSummaryLine} from '../workflow-run-tabs/index.js';
+import {
+  type DerivedRunAnnotation,
+  RunAnnotationList,
+  RunAnnotationSummaryLine,
+} from '../workflow-run-tabs/index.js';
 import {WorkflowSourceContent} from '../workflow-source-panel/index.js';
 import {RunWorkspaceNav} from './run-workspace-nav.js';
 import {resolveWorkflowRunSelection} from './workflow-run-selection.js';
@@ -339,7 +348,7 @@ function RunViewContent({
               highlightedLineRange={highlightedLineRange}
             />
           ) : (
-            <div className="min-h-0 flex-1 overflow-auto p-24">{loadingOrError}</div>
+            <div className="min-h-0 flex-1 overflow-auto p-panel">{loadingOrError}</div>
           )}
         </div>
       </div>
@@ -382,8 +391,11 @@ function RunSectionContent({
 }) {
   if (section === 'summary') {
     return (
-      <section aria-label="All jobs summary" className="min-h-0 flex-1 overflow-auto pb-24 pt-16">
-        <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24">
+      <section
+        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">
           <Text as="h2" className="sr-only">
             All jobs summary
           </Text>
@@ -415,8 +427,11 @@ function RunSectionContent({
   }
 
   return (
-    <section aria-label="Workflow source" className="min-h-0 flex-1 overflow-auto pb-24 pt-16">
-      <div className="mx-auto flex min-h-full w-full max-w-[1120px] flex-col px-24">
+    <section
+      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">
         <Text as="h2" className="sr-only">
           Workflow source
         </Text>
@@ -480,14 +495,42 @@ function RunAnnotationsSection({
         : undefined,
     [records, run.jobs, selectedJob?.id, severity],
   );
+  const derivedAnnotations = useMemo<readonly DerivedRunAnnotation[] | undefined>(() => {
+    if (!records) return undefined;
+    const jobsWithAnnotations = new Set(records.map((annotation) => annotation.jobId));
+
+    return run.jobs
+      .filter((job) => {
+        const style = job.status === 'failed' ? 'error' : 'warning';
+        return (
+          (!selectedJob || selectedJob.id === job.id) &&
+          !jobsWithAnnotations.has(job.id) &&
+          (job.status === 'failed' || job.status === 'skipped') &&
+          job.jobExecutions.length === 0 &&
+          matchesDerivedAnnotationFilters(style, selection)
+        );
+      })
+      .map((job) => ({
+        id: `derived-${job.id}`,
+        style: job.status === 'failed' ? 'error' : 'warning',
+        body: derivedJobAnnotation(job),
+      }));
+  }, [records, run.jobs, selectedJob, selection]);
+  const hasSynthesizedJobAnnotations = run.jobs.some(
+    (job) =>
+      (job.status === 'failed' || job.status === 'skipped') && job.jobExecutions.length === 0,
+  );
 
   return (
-    <section aria-label="Run annotations" className="min-h-0 flex-1 overflow-auto pb-24 pt-16">
-      <div className="mx-auto flex w-full max-w-[1120px] flex-col gap-16 px-24">
+    <section
+      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">
         <Text as="h2" className="sr-only">
           Annotations
         </Text>
-        <div className="flex flex-wrap items-center justify-between gap-8">
+        <div className="flex flex-wrap items-center justify-between gap-inline">
           <RunAnnotationSummaryLine
             summary={annotationSummary}
             workspaceSlug={workspaceSlug}
@@ -507,12 +550,16 @@ function RunAnnotationsSection({
           key={`${run.id}:${run.runAttempt.attempt}:${severity ?? 'all'}:${selectedJob?.id ?? 'all'}`}
           query={annotations.query}
           entries={entries}
+          derivedAnnotations={derivedAnnotations}
           workspaceSlug={workspaceSlug}
           projectSlug={projectSlug}
           workflowRunId={run.id}
           runAttempt={run.runAttempt.attempt}
           // A run with no annotations at all offers no filter to clear, whatever the URL says.
-          filtered={Boolean((severity || selectedJob) && (annotationSummary?.total ?? 0) > 0)}
+          filtered={Boolean(
+            (severity || selectedJob || selection?.annotation) &&
+              ((annotationSummary?.total ?? 0) > 0 || hasSynthesizedJobAnnotations),
+          )}
           filteredJobName={selectedJob?.displayName}
           filteredSeverity={severity}
           onClearFilters={onClearAnnotationFilters}
@@ -523,6 +570,59 @@ function RunAnnotationsSection({
   );
 }
 
+function matchesDerivedAnnotationFilters(
+  style: 'warning' | 'error',
+  selection: WorkflowRunsSearch | undefined,
+): boolean {
+  if (selection?.severity && style !== selection.severity) return false;
+  // A selected annotation is a deep-link to a real annotation record. Synthetic diagnostics
+  // have no id or context, so they must not remain visible behind that selection.
+  return !selection?.annotation;
+}
+
+function derivedJobAnnotation(job: Job): string {
+  const reason = job.statusReason ? `Reason: \`${job.statusReason}\`` : null;
+  const traceSummary = formatConditionEvaluation(job.evaluationTrace);
+  const details = [reason, traceSummary].filter(Boolean).join('\n');
+
+  if (job.status === 'skipped') {
+    return [
+      `**${job.displayName}** was skipped before an execution was created.`,
+      '',
+      'Review its dependencies or condition before re-running.',
+      details,
+    ]
+      .filter(Boolean)
+      .join('\n');
+  }
+  return [
+    `**${job.displayName}** failed before an execution was created.`,
+    '',
+    'Check runner availability and workflow configuration before re-running.',
+    details,
+  ]
+    .filter(Boolean)
+    .join('\n');
+}
+
+function formatConditionEvaluation(
+  trace: readonly EvaluationTraceEntry[] | null | undefined,
+): string | null {
+  if (!trace?.length) return null;
+
+  return [
+    'Condition evaluation:',
+    ...trace.map((entry) => {
+      if ('dropped' in entry) {
+        return `- ${entry.dropped} additional evaluation${entry.dropped === 1 ? '' : 's'} not recorded`;
+      }
+      const value =
+        entry.value === undefined || entry.value === '' ? '(empty)' : `\`${entry.value}\``;
+      return `- \`${entry.field}\` evaluated \`${entry.expression}\` to ${value}${entry.degraded ? ' (degraded)' : ''}`;
+    }),
+  ].join('\n');
+}
+
 const ALL_ANNOTATION_JOBS = 'all-jobs';
 
 function AnnotationJobFilter({
@@ -566,11 +666,11 @@ 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-12 min-[768px]:block"
+      className="hidden w-240 shrink-0 border-r border-border-neutral-base bg-background-neutral-background p-panel-compact min-[768px]:block"
     >
-      <div className="flex flex-col gap-16">
+      <div className="flex flex-col gap-group">
         <div className="h-32 rounded-4 bg-background-components-subtle" />
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-inline">
           <div className="h-16 w-64 rounded-4 bg-background-components-subtle" />
           <div className="h-32 rounded-4 bg-background-components-subtle" />
           <div className="h-32 rounded-4 bg-background-components-subtle" />

package/src/core/entities/job-execution.ts

@@ -1,5 +1,6 @@
 import {type Duration, intervalToDuration} from 'date-fns';
 import type {Step} from './step.js';
+import type {EvaluationTraceEntry} from './step-attempt.js';
 
 export type JobExecutionStatus = 'pending' | 'running' | 'succeeded' | 'failed' | 'cancelled';
 export type JobExecutionDisplayStatus = JobExecutionStatus;
@@ -28,11 +29,15 @@ interface JobExecutionFields {
   name: string;
   status: JobExecutionStatus;
   statusReason: string | null;
+  statusReasonMessage: string | null;
+  runner: string[] | null;
+  outputs: Record<string, unknown> | null;
   triggerEvents: WorkflowExecutionEvent[];
   queuedAt: string | null;
   startedAt: string | null;
   finishedAt: string | null;
   timedOutAt: string | null;
+  evaluationTrace: EvaluationTraceEntry[] | null;
   createdAt: string;
   updatedAt: string;
   steps: Step[];
@@ -45,11 +50,15 @@ export class JobExecution {
   name!: string;
   status!: JobExecutionStatus;
   statusReason!: string | null;
+  statusReasonMessage!: string | null;
+  runner!: string[] | null;
+  outputs!: Record<string, unknown> | null;
   triggerEvents!: WorkflowExecutionEvent[];
   queuedAt!: string | null;
   startedAt!: string | null;
   finishedAt!: string | null;
   timedOutAt!: string | null;
+  evaluationTrace!: EvaluationTraceEntry[] | null;
   createdAt!: string;
   updatedAt!: string;
   steps!: Step[];

package/src/core/entities/job.ts

@@ -3,6 +3,7 @@ import {
   type JobExecution,
   type JobExecutionDisplayDuration,
 } from './job-execution.js';
+import type {EvaluationTraceEntry} from './step-attempt.js';
 
 export type JobStatus = 'pending' | 'running' | 'succeeded' | 'failed' | 'cancelled' | 'skipped';
 export type JobDisplayStatus = JobStatus | 'listening';
@@ -19,8 +20,10 @@ export type JobStatusReason =
   | 'run_cancelled'
   | 'timed_out'
   | 'runner_lost'
+  | 'output_too_large'
   | 'step_failed'
-  | 'unknown';
+  | 'unknown'
+  | 'output_invalid';
 export interface JobListening {
   on: Array<{
     source: string;
@@ -75,6 +78,10 @@ interface JobFields {
   status: JobStatus;
   statusReason: JobStatusReason | null;
   carriedOver: boolean;
+  outputs: Record<string, unknown> | null;
+  success: string | null;
+  runner: string[] | null;
+  evaluationTrace: EvaluationTraceEntry[] | null;
   listening: JobListening | null;
   listenerStatus: ListenerStatus;
   resolutionReason: ResolutionReason | null;
@@ -94,6 +101,10 @@ export class Job {
   status!: JobStatus;
   statusReason!: JobStatusReason | null;
   carriedOver!: boolean;
+  outputs!: Record<string, unknown> | null;
+  success!: string | null;
+  runner!: string[] | null;
+  evaluationTrace!: EvaluationTraceEntry[] | null;
   listening!: JobListening | null;
   listenerStatus!: ListenerStatus;
   resolutionReason!: ResolutionReason | null;

package/src/core/entities/step-attempt.ts

@@ -13,6 +13,27 @@ export type StepAttemptDisplayDuration =
   | {state: 'fixed'; elapsed: Duration}
   | {state: 'live'; fromIso: string};
 
+export interface EvaluationTraceValueEntry {
+  expression: string;
+  roots: string[];
+  fillTarget: string;
+  evaluatedAt: string;
+  field: string;
+  value?: string;
+  truncated?: boolean;
+  exprTruncated?: boolean;
+  reference?: boolean;
+  degraded?: boolean;
+  envKey?: string;
+}
+
+export interface EvaluationTraceLimitEntry {
+  truncated: true;
+  dropped: number;
+}
+
+export type EvaluationTraceEntry = EvaluationTraceValueEntry | EvaluationTraceLimitEntry;
+
 interface StepAttemptFields {
   id: string;
   stepId: string;
@@ -22,6 +43,8 @@ interface StepAttemptFields {
   status: string;
   exitCode: number | null;
   output: Record<string, unknown> | null;
+  outputs: Record<string, unknown> | null;
+  response: string | null;
   error: Record<string, unknown> | null;
   gateResult: StepGateResult;
   restartFeedback: string | null;
@@ -38,6 +61,8 @@ export class StepAttempt {
   status!: string;
   exitCode!: number | null;
   output!: Record<string, unknown> | null;
+  outputs!: Record<string, unknown> | null;
+  response!: string | null;
   error!: Record<string, unknown> | null;
   gateResult!: StepGateResult;
   restartFeedback!: string | null;
@@ -53,6 +78,14 @@ export class StepAttempt {
   }
 }
 
+export interface StepAttemptDetail {
+  stepId: string;
+  attempt: number;
+  authoredConfig: Record<string, unknown> | null;
+  config: Record<string, unknown> | null;
+  evaluationTrace: EvaluationTraceEntry[] | null;
+}
+
 export function stepAttemptDisplayDurationFromTimestamps({
   startedAt,
   finishedAt,

package/src/core/entities/step.ts

@@ -1,4 +1,4 @@
-import type {StepAttempt} from './step-attempt.js';
+import type {EvaluationTraceEntry, StepAttempt} from './step-attempt.js';
 
 export type StepErrorReason =
   | 'checkout_failed'
@@ -71,8 +71,10 @@ export interface Step {
   name: string;
   sourceLocation: StepSourceLocation | null;
   status: string;
+  statusReason: string | null;
   type: string;
   config: Record<string, unknown>;
+  evaluationTrace: EvaluationTraceEntry[] | null;
   agentConfig: AgentStepConfig | null;
   error: StepError | null;
   position: number;