@shipfox/client-workflows 12.0.2 → 14.0.0

package/src/feature.ts

@@ -5,14 +5,14 @@ export const workflowsNavigation = [
     id: 'nav.runs',
     scope: 'project',
     label: 'Runs',
-    to: '/workspaces/$wid/projects/$pid/runs',
+    to: '/w/$workspaceSlug/p/$projectSlug/runs',
     order: 100,
   },
   {
     id: 'nav.workflows',
     scope: 'project',
     label: 'Workflows',
-    to: '/workspaces/$wid/projects/$pid/workflows',
+    to: '/w/$workspaceSlug/p/$projectSlug/workflows',
     order: 200,
   },
 ] as const satisfies readonly NavTabEntry[];
@@ -21,17 +21,17 @@ export const workflowsFeature = defineClientFeature({
   id: 'shipfox.workflows',
   routes: [
     {
-      path: '/workspaces/$wid/projects/$pid/workflows',
+      path: '/w/$workspaceSlug/p/$projectSlug/workflows',
       parent: 'projectLayout',
       impl: '@shipfox/client-workflows/routes/workflows',
     },
     {
-      path: '/workspaces/$wid/projects/$pid/runs',
+      path: '/w/$workspaceSlug/p/$projectSlug/runs',
       parent: 'projectLayout',
       impl: '@shipfox/client-workflows/routes/runs',
     },
     {
-      path: '/workspaces/$wid/projects/$pid/runs/$workflowRunId',
+      path: '/w/$workspaceSlug/p/$projectSlug/runs/$workflowRunId',
       parent: 'projectLayout',
       impl: '@shipfox/client-workflows/routes/run-detail',
     },

package/src/hooks/api/workflow-run-mapper.ts

@@ -7,6 +7,7 @@ import type {
   WorkflowRunDetailResponseDto,
   WorkflowRunJobDetailDto,
   WorkflowRunJobExecutionDetailDto,
+  WorkflowRunListItemDto,
   WorkflowRunListResponseDto,
   WorkflowRunResponseDto,
   WorkflowRunStepDetailDto,
@@ -25,7 +26,7 @@ import {
   type WorkflowRunDetail,
   type WorkflowRunListItem,
   type WorkflowRunListPage,
-  workflowRunShortId,
+  type WorkflowRunRecord,
   workflowRunTriggerDisplayLabel,
   workflowRunTriggerLabel,
 } from '#core/workflow-run.js';
@@ -35,7 +36,9 @@ export function toWorkflowRun(dto: WorkflowRunResponseDto): WorkflowRun {
     id: dto.id,
     projectId: dto.project_id,
     definitionId: dto.definition_id,
+    number: dto.number,
     name: dto.name,
+    workflowName: dto.workflow_name,
     currentAttempt: dto.current_attempt,
     triggerProvider: dto.trigger_provider,
     triggerSource: dto.trigger_source,
@@ -49,13 +52,13 @@ export function toWorkflowRun(dto: WorkflowRunResponseDto): WorkflowRun {
       triggerEvent: dto.trigger_event,
     }),
     triggerPayload: dto.trigger_payload,
+    triggerReference: dto.trigger_reference,
     inputs: dto.inputs ?? null,
     sourceSnapshot: dto.source_snapshot
       ? {content: dto.source_snapshot.content, format: dto.source_snapshot.format}
       : null,
     createdAt: dto.created_at,
     updatedAt: dto.updated_at,
-    shortId: workflowRunShortId(dto.id),
     isTemporary: dto.id.startsWith('temp-'),
   };
 }
@@ -73,7 +76,7 @@ export function toWorkflowRunAttempt(dto: WorkflowRunAttemptDto): WorkflowRunAtt
   });
 }
 
-export function toWorkflowRunListItem(dto: WorkflowRunResponseDto): WorkflowRunListItem {
+export function toWorkflowRunRecord(dto: WorkflowRunResponseDto): WorkflowRunRecord {
   return {
     ...toWorkflowRun(dto),
     status: dto.status,
@@ -89,6 +92,26 @@ export function toWorkflowRunListItem(dto: WorkflowRunResponseDto): WorkflowRunL
   };
 }
 
+export function toWorkflowRunListItem(dto: WorkflowRunListItemDto): WorkflowRunListItem {
+  const statusCounts = dto.job_status_counts.map(({status, count}) => ({status, count}));
+  return {
+    ...toWorkflowRunRecord(dto),
+    jobs: {
+      preview: dto.jobs.map((job) => ({
+        id: job.id,
+        key: job.key,
+        name: job.name,
+        status: job.status,
+        position: job.position,
+      })),
+      statusCounts,
+      // Derived rather than sent: the counts already cover every job, and a separate total
+      // would be a second source of truth that could disagree with them.
+      total: statusCounts.reduce((sum, entry) => sum + entry.count, 0),
+    },
+  };
+}
+
 export function toWorkflowRunListPage(dto: WorkflowRunListResponseDto): WorkflowRunListPage {
   return {
     runs: dto.runs.map(toWorkflowRunListItem),
@@ -220,6 +243,10 @@ function toWorkflowExecutionEvent(dto: WorkflowExecutionEventDto): WorkflowExecu
     event: dto.event,
     deliveryId: dto.delivery_id,
     receivedAt: dto.received_at,
+    project: dto.project,
+    repository: dto.repository,
+    ref: dto.ref,
+    commit: dto.commit,
     data: dto.data,
   };
 }

package/src/hooks/api/workflow-runs.test.tsx

@@ -240,6 +240,8 @@ describe('workflow run API hooks', () => {
       expect(cached?.pages[0]?.runs[0]).toMatchObject({
         projectId: PROJECT_ID,
         definitionId: DEFINITION_ID,
+        number: null,
+        workflowName: 'New run',
         status: 'pending',
         triggerSource: 'manual',
         triggerProvider: null,

package/src/hooks/api/workflow-runs.ts

@@ -29,13 +29,14 @@ import {
   type WorkflowRunDetail,
   type WorkflowRunListItem,
   type WorkflowRunListPage,
+  type WorkflowRunRecord,
   type WorkflowRunStatus,
 } from '#core/workflow-run.js';
 import {
   toWorkflowRunAttempt,
   toWorkflowRunDetail,
-  toWorkflowRunListItem,
   toWorkflowRunListPage,
+  toWorkflowRunRecord,
 } from './workflow-run-mapper.js';
 
 export interface WorkflowRunFilters {
@@ -250,8 +251,8 @@ async function cancelWorkflowRun({
   workflowRunId,
 }: {
   workflowRunId: string;
-}): Promise<WorkflowRunListItem> {
-  return toWorkflowRunListItem(
+}): Promise<WorkflowRunRecord> {
+  return toWorkflowRunRecord(
     await checkedApiRequest(workflowRunDtoSchema, `/workflows/runs/${workflowRunId}/cancel`, {
       method: 'POST',
     }),
@@ -264,8 +265,8 @@ export async function rerunWorkflowRun({
 }: {
   workflowRunId: string;
   mode: WorkflowRunRerunModeDto;
-}): Promise<WorkflowRunListItem> {
-  return toWorkflowRunListItem(
+}): Promise<WorkflowRunRecord> {
+  return toWorkflowRunRecord(
     await checkedApiRequest(workflowRunResponseSchema, `/workflows/runs/${workflowRunId}/rerun`, {
       method: 'POST',
       body: {mode} satisfies RerunWorkflowRunBodyDto,
@@ -338,7 +339,9 @@ function buildTempRun({
     id,
     projectId,
     definitionId,
+    number: null,
     name,
+    workflowName: name,
     status: 'pending',
     currentAttempt: 1,
     latestAttempt: 1,
@@ -348,12 +351,14 @@ function buildTempRun({
     triggerPayload: {source: 'manual', event: 'fire'},
     triggerDisplayLabel: 'fire',
     triggerLabel: 'manual · fire',
+    triggerReference: null,
     inputs: null,
     sourceSnapshot: null,
     createdAt,
     updatedAt: createdAt,
-    shortId: id.slice(0, 8),
     isTemporary: true,
+    // The optimistic row genuinely has no jobs yet: the server has not planned the graph.
+    jobs: {preview: [], statusCounts: [], total: 0},
     runAttempt: new WorkflowRunAttemptSummary({
       workflowRunId: id,
       attempt: 1,
@@ -568,7 +573,7 @@ export function workflowRunAttemptsQueryOptions({
 export function useCancelWorkflowRunMutation(run: WorkflowRun | undefined) {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (): Promise<WorkflowRunListItem> => {
+    mutationFn: async (): Promise<WorkflowRunRecord> => {
       if (!run) throw new Error('Workflow run is not loaded');
       return await cancelWorkflowRun({workflowRunId: run.id});
     },

package/src/index.ts

@@ -1,7 +1,9 @@
 export type {
   AgentConfigIssue,
   JobDisplayDuration,
+  JobDisplayStatus,
   JobExecutionDisplayDuration,
+  JobExecutionDisplayStatus,
   JobExecutionStatus,
   JobExecutionTime,
   JobStatus,
@@ -14,6 +16,7 @@ export type {
   StepErrorReason,
   StepGateResult,
   StepSourceLocation,
+  WorkflowDisplayStatus,
   WorkflowRun,
   WorkflowRunAttempt,
   WorkflowRunDetail,
@@ -23,13 +26,14 @@ export type {
   WorkflowStatus,
 } from '#core/workflow-run.js';
 export {
+  deriveJobDisplayStatus,
+  deriveJobExecutionDisplayStatus,
   isWorkflowRunTerminal,
   isWorkflowStatus,
   Job,
   JobExecution,
   TERMINAL_WORKFLOW_RUN_STATUSES,
   WORKFLOW_RUN_STATUSES,
-  workflowRunShortId,
   workflowRunTriggerLabel,
 } from '#core/workflow-run.js';
 export {
@@ -47,4 +51,5 @@ export {
   workflowRunsQueryKeys,
 } from './hooks/api/workflow-runs.js';
 export {ProjectWorkflowsPage} from './pages/project-workflows-page.js';
-export {WorkflowRunPage} from './pages/workflow-run-page.js';
+export {WorkflowRunDetailPage} from './pages/workflow-run-detail-page.js';
+export {WorkflowRunsPage} from './pages/workflow-run-list-page.js';

package/src/page-harness-budget.test.ts

@@ -8,7 +8,7 @@ const PAGE_HARNESS_ALLOWLIST = [
   'src/components/workflow-run-summary/workflow-run-attempt-switcher.test.tsx',
   'src/components/workflow-run-view/workflow-run-view.test.tsx',
   'src/pages/project-workflows-page.test.tsx',
-  'src/pages/workflow-run-page.test.tsx',
+  'src/pages/workflow-run-pages.test.tsx',
 ];
 
 const srcDir = dirname(fileURLToPath(import.meta.url));

package/src/pages/project-workflows-page.test.tsx

@@ -1,6 +1,11 @@
 import {configureApiClient} from '@shipfox/client-api';
 import {fireEvent, screen, waitFor} from '@testing-library/react';
-import {jsonResponse, PROJECT_TEST_WID, renderProjectPage} from '#test/pages.js';
+import {
+  jsonResponse,
+  PROJECT_TEST_WID,
+  PROJECT_TEST_WSLUG,
+  renderProjectPage,
+} from '#test/pages.js';
 import {ProjectWorkflowsPage} from './project-workflows-page.js';
 
 const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
@@ -54,6 +59,13 @@ describe('ProjectWorkflowsPage', () => {
               finished_at: null,
               last_error_code: 'no-workflow-files',
               last_error_message: 'No workflow files found',
+              warnings: [
+                {
+                  code: 're-evaluating-command',
+                  message: 'Workflow data is re-executed as shell code.',
+                  path: 'jobs.build.steps.0.run',
+                },
+              ],
             },
           }),
         ),
@@ -66,6 +78,47 @@ describe('ProjectWorkflowsPage', () => {
       await screen.findByText('No workflow files found under .shipfox/workflows/.'),
     ).toBeInTheDocument();
     expect(screen.getByText('Workflow sync failed')).toBeInTheDocument();
+    expect(screen.queryByText('Workflow definition warnings')).not.toBeInTheDocument();
+  });
+
+  test('shows definition warnings without rendering a sync failure', async () => {
+    configureApiClient({
+      fetchImpl: createProjectDetailFetch({
+        definitions: jsonResponse(
+          definitionsDto({
+            sync: {
+              ref: 'main',
+              status: 'succeeded',
+              last_sync_at: '2026-05-07T01:00:00.000Z',
+              started_at: '2026-05-07T00:59:55.000Z',
+              finished_at: '2026-05-07T01:00:00.000Z',
+              last_error_code: null,
+              last_error_message: null,
+              warnings: [
+                {
+                  code: 're-evaluating-command',
+                  message: 'Workflow data is re-executed as shell code.',
+                  path: 'jobs.build.steps.0.run',
+                },
+                {
+                  code: 're-evaluating-command',
+                  message: 'Workflow data is re-executed as shell code.',
+                  path: 'jobs.build.steps.0.run',
+                },
+              ],
+            },
+          }),
+        ),
+      }),
+    });
+
+    renderWorkflowsPage();
+
+    expect(await screen.findByText('Workflow definition warnings')).toBeInTheDocument();
+    expect(screen.getAllByText('Workflow data is re-executed as shell code.')).toHaveLength(2);
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getAllByText('jobs.build.steps.0.run')).toHaveLength(2);
+    expect(screen.queryByText('Workflow sync failed')).not.toBeInTheDocument();
   });
 
   test('opens and closes the definition drawer by clicking the row', async () => {
@@ -123,10 +176,9 @@ describe('ProjectWorkflowsPage', () => {
 });
 
 function renderWorkflowsPage() {
-  return renderProjectPage(
-    `/workspaces/${PROJECT_TEST_WID}/projects/${PROJECT_ID}/workflows`,
-    () => <ProjectWorkflowsPage projectId={PROJECT_ID} />,
-  );
+  return renderProjectPage(`/w/${PROJECT_TEST_WSLUG}/p/project/workflows`, () => (
+    <ProjectWorkflowsPage projectId={PROJECT_ID} />
+  ));
 }
 
 function createProjectDetailFetch({
@@ -174,6 +226,7 @@ function projectDto() {
     id: PROJECT_ID,
     workspace_id: PROJECT_TEST_WID,
     name: 'Platform',
+    slug: 'platform',
     source: {
       connection_id: CONNECTION_ID,
       external_repository_id: 'platform',
@@ -238,6 +291,7 @@ function baseDefinitionsDto() {
       finished_at: '2026-05-07T01:00:00.000Z',
       last_error_code: null,
       last_error_message: null,
+      warnings: [],
     },
   };
 }

package/src/pages/project-workflows-page.tsx

@@ -103,6 +103,7 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
           />
 
           <WorkflowSyncAlert sync={sync} />
+          <WorkflowSyncWarnings sync={sync} />
 
           <WorkflowDefinitionsList
             definitions={definitions}
@@ -214,7 +215,7 @@ function WorkflowDefinitionsList({
                 // The workflow-name cell holds a `<button>` so the row is
                 // keyboard-reachable (Tab focuses, Enter/Space activates
                 // via native button semantics). The TableRow itself is no
-                // longer clickable — a row-level onClick would be invisible
+                // longer clickable: a row-level onClick would be invisible
                 // to keyboard users and require custom keydown handling.
                 // The `group` class on the row still drives the Run button
                 // reveal on hover or focus-within.
@@ -374,6 +375,38 @@ function WorkflowSyncAlert({sync}: {sync: DefinitionSyncSummary | null | undefin
   );
 }
 
+function WorkflowSyncWarnings({sync}: {sync: DefinitionSyncSummary | null | undefined}) {
+  if (sync?.status !== 'succeeded' || sync.warnings.length === 0) return null;
+
+  const seenKeys = new Map<string, number>();
+  const warningItems = sync.warnings.map((warning) => {
+    const baseKey = `${warning.code}-${warning.path ?? 'workflow'}-${warning.message}`;
+    const occurrence = seenKeys.get(baseKey) ?? 0;
+    seenKeys.set(baseKey, occurrence + 1);
+    return {key: `${baseKey}-${occurrence}`, warning};
+  });
+
+  return (
+    <Callout role="status" type="warning">
+      <div className="flex flex-col gap-6">
+        <Text size="sm" bold>
+          Workflow definition warnings
+        </Text>
+        <ul className="flex flex-col gap-4">
+          {warningItems.map(({key, warning}) => (
+            <li key={key}>
+              <Text size="sm">{warning.message}</Text>
+              {warning.path ? (
+                <Code className="text-foreground-neutral-muted">{warning.path}</Code>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Callout>
+  );
+}
+
 function DefinitionSheet({
   definition,
   onOpenChange,

package/src/pages/workflow-run-detail-page.tsx

@@ -0,0 +1,72 @@
+import {useNavigate} from '@tanstack/react-router';
+import {useCallback} from 'react';
+import {WorkflowRunView} from '#components/workflow-run-view/index.js';
+import type {WorkflowRunSelectionInput} from '#core/workflow-run-url-state.js';
+import {
+  validateWorkflowRunsSearch,
+  type WorkflowRunsSearch,
+  type WorkflowRunTab,
+  workflowRunSearchParams,
+  workflowRunTab,
+} from '#routes/inputs.js';
+
+interface WorkflowRunDetailPageProps {
+  projectId: string;
+  workspaceSlug: string;
+  projectSlug: string;
+  workflowRunId?: string | undefined;
+  search?: WorkflowRunsSearch;
+}
+
+export function WorkflowRunDetailPage({
+  projectId,
+  workspaceSlug,
+  projectSlug,
+  workflowRunId,
+  search = {},
+}: WorkflowRunDetailPageProps) {
+  const navigate = useNavigate();
+  const selection: WorkflowRunSelectionInput = search;
+  const onSelectionChange = useCallback(
+    (nextSelection: WorkflowRunSelectionInput) => {
+      navigate({
+        search: ((previous: Record<string, unknown>) => {
+          const current = validateWorkflowRunsSearch(previous);
+          return workflowRunSearchParams(current, nextSelection);
+        }) as never,
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+  const onTabChange = useCallback(
+    (nextTab: WorkflowRunTab) => {
+      navigate({
+        search: ((previous: Record<string, unknown>) => {
+          const current = validateWorkflowRunsSearch(previous);
+          const nextSearch = workflowRunSearchParams({...current, tab: nextTab}, current);
+          return nextTab === 'summary' &&
+            (current.jobId || current.jobExecutionId || current.stepId || current.stepAttemptId)
+            ? {...nextSearch, tab: nextTab}
+            : nextSearch;
+        }) as never,
+      });
+    },
+    [navigate],
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-background">
+      <WorkflowRunView
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+        projectSlug={projectSlug}
+        workflowRunId={workflowRunId}
+        selection={selection}
+        onSelectionChange={onSelectionChange}
+        tab={workflowRunTab(search)}
+        onTabChange={onTabChange}
+      />
+    </div>
+  );
+}

package/src/pages/workflow-run-list-page.tsx

@@ -0,0 +1,65 @@
+import {useNavigate} from '@tanstack/react-router';
+import {useCallback} from 'react';
+import {WorkflowRunList} from '#components/workflow-run-list/workflow-run-list.js';
+import {
+  applyWorkflowRunFilterPatch,
+  clearWorkflowRunFilters,
+  type WorkflowRunFilterPatch,
+  type WorkflowRunsSearch,
+  workflowRunSearchParams,
+} from '#routes/inputs.js';
+
+interface WorkflowRunsPageProps {
+  projectId: string;
+  workspaceSlug: string;
+  projectSlug: string;
+  search?: WorkflowRunsSearch;
+}
+
+const EMPTY_SEARCH: WorkflowRunsSearch = {};
+
+export function WorkflowRunsPage({
+  projectId,
+  workspaceSlug,
+  projectSlug,
+  search = EMPTY_SEARCH,
+}: WorkflowRunsPageProps) {
+  const navigate = useNavigate();
+
+  // Filter changes replace history instead of pushing it, so Back leaves the list rather than
+  // walking every keystroke of a search box.
+  const commitSearch = useCallback(
+    (next: WorkflowRunsSearch) => {
+      navigate({
+        search: workflowRunSearchParams(next, {}) as never,
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  const onFiltersChange = useCallback(
+    (patch: WorkflowRunFilterPatch) => commitSearch(applyWorkflowRunFilterPatch(search, patch)),
+    [commitSearch, search],
+  );
+
+  const onClearFilters = useCallback(
+    () => commitSearch(clearWorkflowRunFilters(search)),
+    [commitSearch, search],
+  );
+
+  return (
+    <div className="flex min-h-0 flex-1 overflow-hidden bg-background-neutral-base">
+      <div className="mx-auto flex min-h-0 w-full max-w-[1120px] flex-1 flex-col px-24 py-24">
+        <WorkflowRunList
+          projectId={projectId}
+          workspaceSlug={workspaceSlug}
+          projectSlug={projectSlug}
+          search={search}
+          onFiltersChange={onFiltersChange}
+          onClearFilters={onClearFilters}
+        />
+      </div>
+    </div>
+  );
+}