@shipfox/client-workflows 22.0.0 → 22.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "22.0.0",
+  "version": "22.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -30,11 +30,11 @@
     "@shipfox/annotations-dto": "12.3.0",
     "@shipfox/api-definitions-dto": "12.3.0",
     "@shipfox/api-workflows-dto": "13.0.0",
-    "@shipfox/client-logs": "22.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-projects": "22.0.0",
-    "@shipfox/client-shell": "22.0.0",
-    "@shipfox/client-triggers": "22.0.0",
+    "@shipfox/client-logs": "22.0.0",
+    "@shipfox/client-projects": "22.0.1",
+    "@shipfox/client-shell": "22.0.1",
+    "@shipfox/client-triggers": "22.0.1",
     "@shipfox/react-ui": "2.1.0",
     "@shipfox/client-ui": "22.0.0"
   },

package/src/components/job-detail/job-execution-time-text.test.ts

@@ -0,0 +1,46 @@
+import {formatJobExecutionTime} from './job-execution-time-text.js';
+
+const FROM_ISO = '2026-08-15T08:51:00.000Z';
+const FROM_MS = Date.parse(FROM_ISO);
+
+describe('formatJobExecutionTime', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test.each([
+    [999, '0s'],
+    [37_999, '37s'],
+    [60_000, '1m 00s'],
+    [124_999, '2m 04s'],
+    [3_780_999, '1h 03m'],
+  ])('formats a live %i ms timer as %s', (elapsedMs, expected) => {
+    vi.useFakeTimers();
+    vi.setSystemTime(FROM_MS + elapsedMs);
+
+    const result = formatJobExecutionTime({
+      state: 'live',
+      fromIso: FROM_ISO,
+    });
+
+    expect(result).toBe(expected);
+  });
+
+  test('falls back to zero seconds for an invalid live timestamp', () => {
+    const result = formatJobExecutionTime({state: 'live', fromIso: 'not-a-date'});
+
+    expect(result).toBe('0s');
+  });
+
+  test.each([
+    [{seconds: 37}, '37s'],
+    [{minutes: 1}, '1m 00s'],
+    [{minutes: 2, seconds: 4}, '2m 04s'],
+    [{hours: 1}, '1h 00m'],
+    [{hours: 1, minutes: 3}, '1h 03m'],
+  ])('formats a fixed timer consistently as %s', (elapsed, expected) => {
+    const result = formatJobExecutionTime({state: 'fixed', elapsed});
+
+    expect(result).toBe(expected);
+  });
+});

package/src/components/job-detail/job-execution-time-text.tsx

@@ -1,6 +1,6 @@
 import {useTimeTick} from '@shipfox/react-ui/time-ticker';
-import {formatDuration} from '@shipfox/react-ui/utils';
 import type {JobExecutionTime} from '#core/workflow-run.js';
+import {formatJobExecutionTimeLabel} from '../job-graph/job-duration-format.js';
 
 export function JobExecutionTimeText({time}: {time: JobExecutionTime}) {
   useTimeTick();
@@ -9,26 +9,5 @@ export function JobExecutionTimeText({time}: {time: JobExecutionTime}) {
 }
 
 export function formatJobExecutionTime(time: JobExecutionTime): string {
-  if (time.state === 'live') {
-    return formatDuration(Date.now() - Date.parse(time.fromIso));
-  }
-
-  return formatElapsedDuration(time.elapsed);
-}
-
-function formatElapsedDuration(duration: {
-  days?: number | undefined;
-  hours?: number | undefined;
-  minutes?: number | undefined;
-  seconds?: number | undefined;
-}): string {
-  const days = duration.days ?? 0;
-  const hours = duration.hours ?? 0;
-  const minutes = duration.minutes ?? 0;
-  const seconds = duration.seconds ?? 0;
-
-  if (days > 0) return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
-  if (hours > 0) return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
-  if (minutes > 0) return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
-  return `${seconds}s`;
+  return formatJobExecutionTimeLabel(time);
 }

package/src/components/job-graph/job-duration-format.ts

@@ -8,7 +8,7 @@ import type {
 export function formatJobExecutionTimeLabel(time: JobExecutionTime): string {
   switch (time.state) {
     case 'live':
-      return humanDuration(time.fromIso);
+      return humanDuration(time.fromIso) || '0s';
     case 'fixed':
       return formatFixedDurationLabel(time.elapsed);
     default: {

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

@@ -12,15 +12,25 @@ const PROJECT_ID = '44444444-4444-4444-8444-444444444444';
 const CONNECTION_ID = '33333333-3333-4333-8333-333333333333';
 
 describe('ProjectWorkflowsPage', () => {
-  test('renders workflow definitions and the source strip', async () => {
+  test('renders workflow definitions and their panel regions', async () => {
     configureApiClient({fetchImpl: createProjectDetailFetch()});
 
     renderWorkflowsPage();
 
-    expect(await screen.findByRole('heading', {name: 'Workflows'})).toBeInTheDocument();
-    expect(screen.getAllByText('Deploy production')[0]).toBeInTheDocument();
+    expect((await screen.findAllByText('Deploy production'))[0]).toBeInTheDocument();
+    expect(screen.getByRole('heading', {name: 'Workflows'})).toHaveClass('sr-only');
+    expect(
+      screen.queryByText('Synced workflow definitions for this project source.'),
+    ).not.toBeInTheDocument();
     expect(screen.getAllByText('.shipfox/workflows/deploy.yml')[0]).toBeInTheDocument();
-    expect(screen.getByRole('region', {name: 'Project source'})).toBeInTheDocument();
+    const sourcePanel = screen
+      .getByRole('region', {name: 'Project source'})
+      .closest('[data-slot="panel"]');
+    const definitionsPanel = screen.getByRole('region', {name: 'Workflow definitions'});
+    expect(sourcePanel).toBeInTheDocument();
+    expect(definitionsPanel).toBeInTheDocument();
+    expect(sourcePanel).not.toBe(definitionsPanel);
+    expect(screen.getByRole('table').closest('[data-slot="panel"]')).toBe(definitionsPanel);
     // Source strip resolves connection display_name from the integrations
     // workspace cache; external_repository_id renders as a Code chip.
     expect(await screen.findByText('Acme GitHub')).toBeInTheDocument();

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

@@ -68,6 +68,10 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
 
   return (
     <div className="flex w-full flex-col gap-section">
+      <Header variant="h1" className="sr-only">
+        Workflows
+      </Header>
+
       {projectQuery.isPending ? (
         <div className="flex flex-col gap-cluster">
           <Skeleton className="h-28 w-1/3" />
@@ -89,13 +93,6 @@ function ProjectWorkflowsPageInner({projectId}: {projectId: string}) {
 
       {projectQuery.data ? (
         <>
-          <header className="flex flex-col gap-tight">
-            <Header variant="h2">Workflows</Header>
-            <Text size="sm" className="text-foreground-neutral-muted">
-              Synced workflow definitions for this project source.
-            </Text>
-          </header>
-
           <SourceStrip
             connectionId={projectQuery.data.source.connectionId}
             externalRepositoryId={projectQuery.data.source.externalRepositoryId}
@@ -181,7 +178,7 @@ function WorkflowDefinitionsList({
 
   if (isError && definitions.length === 0) {
     return (
-      <Panel>
+      <Panel role="region" aria-label="Workflow definitions">
         <LoadErrorState
           title="Couldn't load workflows"
           description="Definitions could not be loaded. Source metadata remains visible."
@@ -195,7 +192,7 @@ function WorkflowDefinitionsList({
 
   if (definitions.length === 0) {
     return (
-      <Panel>
+      <Panel role="region" aria-label="Workflow definitions">
         <WorkflowEmptyState sync={sync} />
       </Panel>
     );
@@ -203,7 +200,7 @@ function WorkflowDefinitionsList({
 
   return (
     <>
-      <Panel>
+      <Panel role="region" aria-label="Workflow definitions">
         <div className="hidden md:block">
           <Table>
             <TableHeader>