@shipfox/client-workflows 14.0.1 → 16.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "14.0.1",
+  "version": "16.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,15 +27,16 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "date-fns": "^4.1.0",
-    "@shipfox/api-definitions-dto": "12.0.0",
-    "@shipfox/api-workflows-dto": "12.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/client-api": "6.0.1",
-    "@shipfox/client-logs": "14.0.1",
-    "@shipfox/client-projects": "14.0.1",
-    "@shipfox/client-shell": "14.0.1",
-    "@shipfox/client-triggers": "14.0.1",
-    "@shipfox/client-ui": "14.0.1",
-    "@shipfox/react-ui": "1.0.0"
+    "@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"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/{workflow-run-view → job-detail}/agent-config-failure-callout.stories.tsx

@@ -21,7 +21,7 @@ const config: AgentStepConfig = {
 };
 
 const meta = {
-  title: 'Workflows/RunView/AgentConfigFailureCallout',
+  title: 'Workflows/JobDetail/AgentConfigFailureCallout',
   component: AgentConfigFailureCallout,
   parameters: {
     layout: 'centered',

package/src/components/{workflow-run-view → job-detail}/agent-config-failure-callout.tsx

@@ -61,13 +61,13 @@ function agentConfigFailureCopy(
       };
     case 'provider_unsupported':
       return {
-        title: `Choose a supported model provider`,
+        title: 'Choose a supported model provider',
         description: `This step references ${provider}, which is not available to the agent runner. Update the workflow to use a supported provider, then re-run it.`,
         showProviderCta: false,
       };
     case 'model_unavailable':
       return {
-        title: `Choose an available model`,
+        title: 'Choose an available model',
         description: `This step uses ${model} with ${provider}, but that model is not available for the provider. Update the model or provider in the workflow, then re-run it.`,
         showProviderCta: false,
       };

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

@@ -0,0 +1,34 @@
+import {render, screen} from '@testing-library/react';
+import {workflowJob, workflowJobExecutionDto} from '#test/fixtures/workflow-run.js';
+import {JobDetailHeader} from './job-detail-header.js';
+
+describe('JobDetailHeader', () => {
+  test('labels a live run duration as running', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-06-26T12:00:00.000Z'));
+    const job = workflowJob({
+      status: 'running',
+      job_executions: [
+        workflowJobExecutionDto({
+          status: 'running',
+          queued_at: '2026-06-26T11:54:00.000Z',
+          started_at: '2026-06-26T11:57:46.000Z',
+        }),
+      ],
+    });
+    const execution = job.jobExecutions[0];
+    if (!execution) throw new Error('Expected a job execution');
+
+    render(
+      <JobDetailHeader
+        job={job}
+        selectedJobExecution={execution}
+        onSelectedJobExecutionChange={vi.fn()}
+        workspaceSlug="acme"
+        projectSlug="project"
+        workflowRunId="run-1"
+      />,
+    );
+
+    expect(screen.getByText('running', {exact: true})).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,136 @@
+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 {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';
+import {
+  defaultJobExecution,
+  deriveJobDisplayStatus,
+  deriveJobExecutionDisplayStatus,
+  type Job,
+  type JobExecution,
+} from '#core/workflow-run.js';
+import {RunAnnotationCountChip} from '../workflow-run-tabs/index.js';
+import {JobExecutionSwitcher} from './job-execution-switcher.js';
+import {JobExecutionTimeText} from './job-execution-time-text.js';
+
+export interface JobDetailHeaderProps {
+  job: Job;
+  selectedJobExecution: JobExecution | undefined;
+  onSelectedJobExecutionChange: (jobExecutionId: string) => void;
+  workspaceSlug: string;
+  projectSlug: string;
+  workflowRunId: string;
+  runAttempt?: number | undefined;
+  /** Counts for this job only. Renders a link into the run's Annotations section, never a body. */
+  annotationSummary?: RunAnnotationSummary | undefined;
+}
+
+export function JobDetailHeader({
+  job,
+  selectedJobExecution,
+  onSelectedJobExecutionChange,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  runAttempt,
+  annotationSummary,
+}: 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}
+            />
+          </div>
+        ) : null}
+      </div>
+    </header>
+  );
+}
+
+function selectedExecutionStatus(job: Job, execution: JobExecution | undefined) {
+  if (!execution) return deriveJobDisplayStatus(job);
+  const defaultExecution = defaultJobExecution(job);
+  return execution.id === defaultExecution?.id
+    ? deriveJobDisplayStatus(job)
+    : deriveJobExecutionDisplayStatus(execution);
+}
+
+function JobDurationMeta({execution, kind}: {execution: JobExecution; kind: 'queue' | 'run'}) {
+  const time = kind === 'queue' ? execution.queueTime : execution.runTime;
+  const from = kind === 'queue' ? execution.queuedAt : execution.startedAt;
+  if (!time || !from) return null;
+
+  const to = kind === 'queue' ? execution.startedAt : execution.finishedAt;
+  const live = time.state === 'live';
+  const label = kind === 'queue' ? 'queued' : live ? 'running' : 'ran';
+  const tooltipLabel = kind === 'queue' ? 'Queued' : live ? 'Running' : 'Ran';
+  const tooltip = `${tooltipLabel} ${formatTimestamp(from)}${to ? ` – ${formatTimestamp(to)}` : ' – now'}`;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-flex items-center gap-4 whitespace-nowrap font-code text-xs leading-20 tabular-nums">
+          <Icon
+            name={kind === 'queue' ? 'hourglassLine' : 'timerLine'}
+            size={12}
+            aria-hidden="true"
+          />
+          <span>{label} </span>
+          <JobExecutionTimeText time={time} />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <Text as="span" size="xs">
+          {tooltip}
+        </Text>
+      </TooltipContent>
+    </Tooltip>
+  );
+}