@shipfox/client-workflows 16.0.0 → 18.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "16.0.0",
+  "version": "18.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,16 +27,16 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "date-fns": "^4.1.0",
-    "@shipfox/annotations-dto": "12.0.0",
-    "@shipfox/api-definitions-dto": "12.2.0",
-    "@shipfox/api-workflows-dto": "12.2.0",
-    "@shipfox/client-logs": "16.0.0",
+    "@shipfox/annotations-dto": "12.3.0",
+    "@shipfox/api-definitions-dto": "12.3.0",
+    "@shipfox/api-workflows-dto": "12.5.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "16.0.0",
-    "@shipfox/react-ui": "1.1.0",
-    "@shipfox/client-ui": "16.0.0",
-    "@shipfox/client-triggers": "16.0.0",
-    "@shipfox/client-projects": "16.0.0"
+    "@shipfox/client-logs": "17.0.0",
+    "@shipfox/client-projects": "17.0.0",
+    "@shipfox/client-shell": "17.0.0",
+    "@shipfox/client-triggers": "17.0.0",
+    "@shipfox/client-ui": "17.0.0",
+    "@shipfox/react-ui": "1.2.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/identifier/identifier.tsx

@@ -112,7 +112,7 @@ export function Identifier({
             onClick={() => {
               void handleCopy();
             }}
-            className="inline-flex h-20 min-w-0 shrink-0 items-center gap-4 rounded-4 px-2 text-foreground-neutral-muted outline-none transition-colors hover:bg-background-components-hover hover:text-foreground-neutral-base focus-visible:shadow-border-interactive-with-active"
+            className="inline-flex h-20 min-w-0 shrink-0 items-center gap-tight rounded-4 px-[var(--pad-menu-surface)] text-foreground-neutral-muted outline-none transition-colors hover:bg-background-components-hover hover:text-foreground-neutral-base focus-visible:shadow-border-interactive-with-active"
           >
             <Icon name="copy" aria-hidden="true" className="size-12 shrink-0" />
             <Code as="span" variant="label" className="truncate">
@@ -167,7 +167,7 @@ function CopyFeedbackPortal({
             : `translate(-50%, ${COPY_FEEDBACK_OFFSET_PX}px)`,
       }}
       className={cn(
-        'pointer-events-none fixed z-50 whitespace-nowrap rounded-8 bg-background-components-base px-8 py-4 text-xs font-display font-medium leading-20 shadow-tooltip',
+        'pointer-events-none fixed z-50 whitespace-nowrap rounded-8 bg-background-components-base px-tight py-[4px] text-xs font-display font-medium leading-20 shadow-tooltip',
         kind === 'failed' ? 'text-foreground-highlight-error' : 'text-foreground-neutral-base',
       )}
     >

package/src/components/job-detail/agent-config-failure-callout.tsx

@@ -21,7 +21,11 @@ export function AgentConfigFailureCallout({
   const copy = agentConfigFailureCopy(config, error);
 
   return (
-    <Alert variant="warning" animated={false} className="px-10 py-8">
+    <Alert
+      variant="warning"
+      animated={false}
+      className="rounded-none border-x-0 border-t-0 border-b border-tag-warning-border bg-transparent px-0 py-row"
+    >
       <AlertContent>
         <AlertTitle>{copy.title}</AlertTitle>
         <AlertDescription>{copy.description}</AlertDescription>

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

@@ -0,0 +1,72 @@
+import {render, screen, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {workflowJob, workflowJobExecutionDto} from '#test/fixtures/workflow-run.js';
+import {JobContextPanel} from './job-context-panel.js';
+
+describe('JobContextPanel', () => {
+  test('opens job details in a labelled sheet from the info action', async () => {
+    const user = userEvent.setup();
+    const job = workflowJob({
+      name: 'build',
+      runner: ['runner-linux-x64'],
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'succeeded',
+          outputs: {failed_tests: 4},
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Test fixture is missing a job execution.');
+
+    render(<JobContextPanel job={job} execution={execution} />);
+
+    expect(screen.queryByRole('dialog', {name: 'build'})).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', {name: 'Inspect job details'}));
+
+    const dialog = await screen.findByRole('dialog', {name: 'build'});
+    expect(within(dialog).getByText('Runner')).toBeInTheDocument();
+    expect(within(dialog).getAllByText('Outputs')).not.toHaveLength(0);
+  });
+
+  test('separates execution-name traces from job condition traces', async () => {
+    const user = userEvent.setup();
+    const job = workflowJob({
+      name: 'build',
+      evaluation_trace: [
+        {
+          expression: 'inputs.environment == "production"',
+          roots: ['inputs.environment'],
+          fill_target: 'job-activation',
+          evaluated_at: '2026-08-05T12:00:00.000Z',
+          field: 'job.if',
+          value: 'true',
+        },
+      ],
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'succeeded',
+          evaluation_trace: [
+            {
+              expression: 'inputs.environment',
+              roots: ['inputs.environment'],
+              fill_target: 'execution-creation',
+              evaluated_at: '2026-08-05T12:00:00.000Z',
+              field: 'job.execution_name',
+              value: 'production',
+            },
+          ],
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Test fixture is missing a job execution.');
+
+    render(<JobContextPanel job={job} execution={execution} />);
+    await user.click(screen.getByRole('button', {name: 'Inspect job details'}));
+
+    const dialog = await screen.findByRole('dialog', {name: 'build'});
+    expect(within(dialog).getByText('Execution name evaluation (1)')).toBeInTheDocument();
+    expect(within(dialog).getByText('Condition evaluation (1)')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,241 @@
+import {Icon} from '@shipfox/react-ui/icon';
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@shipfox/react-ui/sheet';
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {useState} from 'react';
+import type {EvaluationTraceEntry, Job, JobExecution} from '#core/workflow-run.js';
+import {formatJobExecutionTime} from './job-execution-time-text.js';
+import {JsonCode} from './json-code.js';
+import {EvaluationTrace} from './step-troubleshooting.js';
+
+export function JobContextPanel({job, execution}: {job: Job; execution: JobExecution}) {
+  const runner = execution.runner?.length ? execution.runner : job.runner;
+  const outputs = execution.outputs ?? job.outputs;
+  const trace = [...(job.evaluationTrace ?? []), ...(execution.evaluationTrace ?? [])];
+  const statusReason = execution.statusReason ?? job.statusReason;
+  const hasTiming = Boolean(execution.queueTime || execution.runTime);
+  const hasContext = Boolean(
+    runner?.length ||
+      outputs ||
+      execution.triggerEvents.length ||
+      job.success ||
+      statusReason ||
+      execution.statusReasonMessage ||
+      trace?.length ||
+      hasTiming,
+  );
+
+  if (!hasContext) return null;
+
+  return (
+    <JobContextSheet
+      job={job}
+      execution={execution}
+      runner={runner}
+      outputs={outputs}
+      trace={trace}
+      statusReason={statusReason}
+    />
+  );
+}
+
+function JobContextSheet({
+  job,
+  execution,
+  runner,
+  outputs,
+  trace,
+  statusReason,
+}: {
+  job: Job;
+  execution: JobExecution;
+  runner: string[] | null;
+  outputs: Record<string, unknown> | null;
+  trace: EvaluationTraceEntry[];
+  statusReason: JobExecution['statusReason'];
+}) {
+  const [open, setOpen] = useState(false);
+  const {conditionTrace, executionNameTrace} = splitJobEvaluationTrace(trace);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            aria-label="Inspect job details"
+            onClick={() => setOpen(true)}
+            className="flex size-28 shrink-0 items-center justify-center rounded-4 bg-transparent text-foreground-neutral-muted outline-none transition-colors hover:bg-transparent hover:text-foreground-neutral-base active:bg-transparent focus-visible:shadow-button-neutral-focus"
+          >
+            <Icon name="informationLine" size={14} aria-hidden="true" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>Inspect job details</TooltipContent>
+      </Tooltip>
+      <SheetContent side="right" className="w-full sm:max-w-[560px]">
+        <SheetHeader>
+          <SheetTitle>{job.displayName}</SheetTitle>
+          <SheetDescription>
+            Execution #{execution.sequence} · {execution.displayName}
+          </SheetDescription>
+        </SheetHeader>
+        <SheetBody className="gap-section">
+          <div className="grid w-full min-w-0 gap-group min-[640px]:grid-cols-2">
+            {runner?.length ? <ContextList label="Runner" values={runner} mono /> : null}
+            {execution.queueTime || execution.runTime ? (
+              <div className="flex min-w-0 flex-col gap-tight">
+                <Text size="xs" bold className="text-foreground-neutral-base">
+                  Timing
+                </Text>
+                <div className="flex flex-wrap gap-inline text-xs text-foreground-neutral-muted">
+                  {execution.queueTime ? (
+                    <span>Queue {formatJobExecutionTime(execution.queueTime)}</span>
+                  ) : null}
+                  {execution.runTime ? (
+                    <span>Run {formatJobExecutionTime(execution.runTime)}</span>
+                  ) : null}
+                </div>
+              </div>
+            ) : null}
+            {outputs ? (
+              <JsonCode
+                title="Outputs"
+                value={outputs}
+                emptyMessage="No outputs declared; the `outputs:` mapping is empty."
+              />
+            ) : null}
+            {job.success ? <ContextValue label="Condition" value={job.success} mono /> : null}
+            {statusReason ? (
+              <ContextValue label="Status reason" value={humanize(statusReason)} />
+            ) : null}
+            {execution.statusReasonMessage ? (
+              <ContextValue label="Failure details" value={execution.statusReasonMessage} />
+            ) : null}
+            {execution.triggerEvents.length ? (
+              <JsonCode
+                title={`Trigger events (${execution.triggerEvents.length})`}
+                value={execution.triggerEvents}
+              />
+            ) : null}
+            {executionNameTrace.length ? (
+              <EvaluationTraceSection
+                title={`Execution name evaluation (${executionNameTrace.length})`}
+                trace={executionNameTrace}
+              />
+            ) : null}
+            {conditionTrace.length ? (
+              <EvaluationTraceSection
+                title={`Condition evaluation (${conditionTrace.length})`}
+                trace={conditionTrace}
+              />
+            ) : null}
+          </div>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function EvaluationTraceSection({
+  title,
+  trace,
+}: {
+  title: string;
+  trace: readonly EvaluationTraceEntry[];
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-tight">
+      <Text size="xs" bold className="text-foreground-neutral-base">
+        {title}
+      </Text>
+      <EvaluationTrace trace={trace} />
+    </div>
+  );
+}
+
+function ContextValue({
+  label,
+  value,
+  mono = false,
+}: {
+  label: string;
+  value: string;
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-tight">
+      <Text size="xs" bold className="text-foreground-neutral-base">
+        {label}
+      </Text>
+      <Text
+        size="xs"
+        className={
+          mono
+            ? 'break-words font-code text-foreground-neutral-muted'
+            : 'text-foreground-neutral-muted'
+        }
+      >
+        {value}
+      </Text>
+    </div>
+  );
+}
+
+function ContextList({
+  label,
+  values,
+  mono = false,
+}: {
+  label: string;
+  values: string[];
+  mono?: boolean;
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-tight">
+      <Text size="xs" bold className="text-foreground-neutral-base">
+        {label}
+      </Text>
+      <div className="flex min-w-0 flex-wrap gap-tight">
+        {values.map((value) => (
+          <Code
+            key={value}
+            as="span"
+            variant="label"
+            className={mono ? 'text-foreground-neutral-muted' : 'text-foreground-neutral-base'}
+          >
+            {value}
+          </Code>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function humanize(value: string): string {
+  return value.replaceAll('_', ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function splitJobEvaluationTrace(trace: readonly EvaluationTraceEntry[]): {
+  conditionTrace: EvaluationTraceEntry[];
+  executionNameTrace: EvaluationTraceEntry[];
+} {
+  const conditionTrace: EvaluationTraceEntry[] = [];
+  const executionNameTrace: EvaluationTraceEntry[] = [];
+
+  for (const entry of trace) {
+    if (!('dropped' in entry) && entry.field === 'job.execution_name') {
+      executionNameTrace.push(entry);
+    } else {
+      conditionTrace.push(entry);
+    }
+  }
+
+  return {conditionTrace, executionNameTrace};
+}

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

@@ -2,6 +2,7 @@ import {Icon} from '@shipfox/react-ui/icon';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Code, Text} from '@shipfox/react-ui/typography';
 import {formatTimestamp} from '@shipfox/react-ui/utils';
+import type {ReactNode} from 'react';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
 import type {RunAnnotationSummary} from '#core/run-annotation.js';
@@ -26,6 +27,7 @@ export interface JobDetailHeaderProps {
   runAttempt?: number | undefined;
   /** Counts for this job only. Renders a link into the run's Annotations section, never a body. */
   annotationSummary?: RunAnnotationSummary | undefined;
+  jobContext?: ReactNode;
 }
 
 export function JobDetailHeader({
@@ -37,58 +39,62 @@ export function JobDetailHeader({
   workflowRunId,
   runAttempt,
   annotationSummary,
+  jobContext,
 }: JobDetailHeaderProps) {
   const selectedStatus = selectedExecutionStatus(job, selectedJobExecution);
   const jobStatus = getWorkflowStatusVisual(selectedStatus);
 
   return (
-    <header className="border-b border-border-neutral-base px-16 py-12">
-      <div className="flex min-w-0 flex-col gap-8">
-        <div className="flex min-w-0 items-center gap-8">
-          <WorkflowStatusIcon
-            status={selectedStatus}
-            size={14}
-            tooltip
-            ariaLabel={`Job status: ${jobStatus.label}`}
-          />
-          <Code
-            as="h2"
-            variant="paragraph"
-            bold
-            tabIndex={-1}
-            className="min-w-0 truncate text-lg leading-24 text-foreground-neutral-base outline-none"
-            data-job-heading
-          >
-            {job.displayName}
-          </Code>
-        </div>
-
-        {selectedJobExecution || annotationSummary?.total ? (
-          <div className="flex min-w-0 flex-wrap items-center gap-10 text-foreground-neutral-muted">
-            {selectedJobExecution && job.executionCountVisible ? (
-              <JobExecutionSwitcher
-                job={job}
-                selectedJobExecution={selectedJobExecution.id}
-                onSelectedJobExecutionChange={onSelectedJobExecutionChange}
-                variant="title"
-              />
-            ) : null}
-            {selectedJobExecution ? (
-              <>
-                <JobDurationMeta execution={selectedJobExecution} kind="queue" />
-                <JobDurationMeta execution={selectedJobExecution} kind="run" />
-              </>
-            ) : null}
-            <RunAnnotationCountChip
-              summary={annotationSummary}
-              workspaceSlug={workspaceSlug}
-              projectSlug={projectSlug}
-              workflowRunId={workflowRunId}
-              runAttempt={runAttempt}
-              jobId={job.id}
+    <header className="border-b border-border-neutral-base px-row py-row">
+      <div className="flex min-w-0 items-start justify-between gap-cluster">
+        <div className="flex min-w-0 flex-col gap-inline">
+          <div className="flex min-w-0 items-center gap-inline">
+            <WorkflowStatusIcon
+              status={selectedStatus}
+              size={14}
+              tooltip
+              ariaLabel={`Job status: ${jobStatus.label}`}
             />
+            <Code
+              as="h1"
+              variant="paragraph"
+              bold
+              tabIndex={-1}
+              className="min-w-0 truncate text-lg leading-24 text-foreground-neutral-base outline-none"
+              data-job-heading
+            >
+              {job.displayName}
+            </Code>
           </div>
-        ) : null}
+
+          {selectedJobExecution || annotationSummary?.total ? (
+            <div className="flex min-w-0 flex-wrap items-center gap-inline text-foreground-neutral-muted">
+              {selectedJobExecution && job.executionCountVisible ? (
+                <JobExecutionSwitcher
+                  job={job}
+                  selectedJobExecution={selectedJobExecution.id}
+                  onSelectedJobExecutionChange={onSelectedJobExecutionChange}
+                  variant="title"
+                />
+              ) : null}
+              {selectedJobExecution ? (
+                <>
+                  <JobDurationMeta execution={selectedJobExecution} kind="queue" />
+                  <JobDurationMeta execution={selectedJobExecution} kind="run" />
+                </>
+              ) : null}
+              <RunAnnotationCountChip
+                summary={annotationSummary}
+                workspaceSlug={workspaceSlug}
+                projectSlug={projectSlug}
+                workflowRunId={workflowRunId}
+                runAttempt={runAttempt}
+                jobId={job.id}
+              />
+            </div>
+          ) : null}
+        </div>
+        {jobContext}
       </div>
     </header>
   );
@@ -116,7 +122,7 @@ function JobDurationMeta({execution, kind}: {execution: JobExecution; kind: 'que
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <span className="inline-flex items-center gap-4 whitespace-nowrap font-code text-xs leading-20 tabular-nums">
+        <span className="inline-flex items-center gap-tight whitespace-nowrap font-code text-xs leading-20 tabular-nums">
           <Icon
             name={kind === 'queue' ? 'hourglassLine' : 'timerLine'}
             size={12}