@shipfox/client-workflows 20.0.0 → 22.0.0

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

@@ -0,0 +1,142 @@
+import type {WorkflowRunDetailResponseDto} from '@shipfox/api-workflows-dto';
+import {configureApiClient} from '@shipfox/client-api';
+import type {Decorator, Meta, StoryObj} from '@storybook/react';
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
+import {type ReactNode, useEffect, useState} from 'react';
+import {
+  runAttemptsResponseDto,
+  workflowJobDto,
+  workflowRunDetailDto,
+} from '#test/fixtures/workflow-run.js';
+import {WorkflowRunView} from './workflow-run-view.js';
+
+const PROJECT_ID = '22222222-2222-4222-8222-222222222222';
+const RUN_ID = '11111111-1111-4111-8111-111111111111';
+const RUN_STARTED_AT = '2026-06-26T11:57:00.000Z';
+const RUN_FINISHED_AT = '2026-06-26T11:59:00.000Z';
+
+const RUN_RESPONSE: WorkflowRunDetailResponseDto = workflowRunDetailDto({
+  id: RUN_ID,
+  project_id: PROJECT_ID,
+  name: 'deploy-web',
+  status: 'succeeded',
+  started_at: RUN_STARTED_AT,
+  finished_at: RUN_FINISHED_AT,
+  has_started_job_execution: true,
+  jobs: [
+    workflowJobDto({
+      key: 'build',
+      name: 'build',
+      status: 'succeeded',
+      position: 0,
+    }),
+    workflowJobDto({
+      key: 'deploy',
+      name: 'deploy',
+      status: 'succeeded',
+      position: 1,
+      dependencies: ['build'],
+    }),
+    workflowJobDto({
+      key: 'notify',
+      name: 'notify',
+      status: 'succeeded',
+      position: 2,
+      dependencies: ['deploy'],
+    }),
+  ],
+});
+const RUN_ATTEMPTS_RESPONSE = runAttemptsResponseDto({attempts: []});
+
+const withRunApi: Decorator = (Story) => (
+  <RunWorkspaceStoryProviders>
+    <Story />
+  </RunWorkspaceStoryProviders>
+);
+
+const meta = {
+  title: 'Workflows/WorkflowRunView',
+  component: WorkflowRunView,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'wide',
+      options: {
+        wide: {
+          name: 'Wide',
+          styles: {width: '1440px', height: '720px'},
+          type: 'desktop',
+        },
+      },
+    },
+    globals: {
+      viewport: {value: 'wide'},
+    },
+    argos: {
+      modes: {dark: {theme: 'dark'}},
+      fitToContent: false,
+    },
+  },
+  decorators: [withRunApi],
+  args: {
+    projectId: PROJECT_ID,
+    workspaceSlug: 'acme',
+    projectSlug: 'platform',
+    workflowRunId: RUN_ID,
+  },
+} satisfies Meta<typeof WorkflowRunView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WideViewport: Story = {};
+
+function RunWorkspaceStoryProviders({children}: {children: ReactNode}) {
+  const [queryClient] = useState(
+    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),
+  );
+  const [configured, setConfigured] = useState(false);
+
+  useEffect(() => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: (input) => {
+        const url =
+          input instanceof Request ? input.url : input instanceof URL ? input.href : String(input);
+        const path = new URL(url, 'https://api.example.test').pathname;
+        const response =
+          path === '/annotations'
+            ? {
+                body: {annotations: [], has_more: false, next_cursor: null},
+                status: 200,
+              }
+            : path === `/workflows/runs/${RUN_ID}/attempts`
+              ? {body: RUN_ATTEMPTS_RESPONSE, status: 200}
+              : path === `/workflows/runs/${RUN_ID}`
+                ? {body: RUN_RESPONSE, status: 200}
+                : {body: {code: 'not-found'}, status: 404};
+        return new Response(JSON.stringify(response.body), {
+          status: response.status,
+          headers: {'content-type': 'application/json'},
+        });
+      },
+    });
+    setConfigured(true);
+
+    return () => {
+      configureApiClient({baseUrl: '', fetchImpl: undefined});
+    };
+  }, []);
+
+  if (!configured) return null;
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="flex h-[720px] min-w-[1440px] w-[1440px] bg-background-subtle-base">
+        <div className="flex min-h-0 min-w-0 w-full flex-1 flex-col px-frame py-frame">
+          {children}
+        </div>
+      </div>
+    </QueryClientProvider>
+  );
+}

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

@@ -49,23 +49,57 @@ describe('WorkflowRunView', () => {
     const summary = await screen.findByRole('region', {name: 'deploy-web'});
     expect(within(summary).getByRole('heading', {name: 'deploy-web'})).toBeInTheDocument();
     expect(screen.getByRole('navigation', {name: 'Run workspace'})).toBeInTheDocument();
-    expect(
-      screen
-        .getByRole('navigation', {name: 'Run workspace'})
-        .closest('[data-run-workspace-layout]'),
-    ).toHaveClass('border-t', 'border-border-neutral-base', 'min-[768px]:flex-row');
+    const workspaceLayout = screen
+      .getByRole('navigation', {name: 'Run workspace'})
+      .closest('[data-run-workspace-layout]');
+    expect(workspaceLayout).toHaveClass('border-t', 'border-border-neutral-base');
+    expect(workspaceLayout).not.toHaveClass('max-w-[1360px]');
+    const workspaceFrame = workspaceLayout?.querySelector('[data-run-workspace-frame]');
+    expect(workspaceFrame).toHaveClass('w-full', 'min-[768px]:flex-row');
+    expect(workspaceFrame).not.toHaveClass('mx-auto', 'max-w-[calc(240px_+_1120px)]');
     expect(screen.getByRole('link', {name: 'Summary'})).toHaveAttribute('aria-current', 'page');
     expect(screen.getByRole('heading', {name: 'Jobs'})).toBeInTheDocument();
     expect(screen.getByRole('heading', {name: 'Run details'})).toBeInTheDocument();
-    expect(screen.getByRole('region', {name: 'All jobs summary'})).toBeInTheDocument();
+    const allJobsSummary = screen.getByRole('region', {name: 'All jobs summary'});
+    expect(allJobsSummary).toBeInTheDocument();
+    expect(allJobsSummary.querySelector('[data-slot="panel"]')).not.toBeNull();
+    expect(allJobsSummary.querySelector('[data-slot="panel-body"]')).toHaveClass(
+      'bg-background-components-base',
+    );
     expect(screen.getByRole('region', {name: 'Workflow jobs'})).toBeInTheDocument();
-    expect(container.querySelector('[data-run-workspace-content]')).toHaveClass(
+    expect(container.querySelector('[data-run-workspace-content]')).toHaveClass('flex-1');
+    expect(container.querySelector('[data-run-workspace-content]')).not.toHaveClass(
       'bg-background-neutral-base',
-      'flex-1',
     );
     expect(screen.queryByRole('tab', {name: 'Jobs'})).not.toBeInTheDocument();
   });
 
+  test.each([
+    {tab: undefined, region: 'All jobs summary'},
+    {tab: 'source', region: 'Workflow source'},
+    {tab: 'annotations', region: 'Run annotations'},
+  ] as const)('does not cap the $region section at 1120px', async ({tab, region}) => {
+    configureRunFetch();
+
+    renderView({tab});
+
+    const section = await screen.findByRole('region', {name: region});
+    expect(section.firstElementChild).not.toHaveClass('mx-auto', 'px-frame', 'max-w-[1120px]');
+    expect(section.querySelector('[data-slot="panel"]')).not.toBeNull();
+  });
+
+  test('keeps dedicated job content on the full-width data surface', async () => {
+    configureRunFetch();
+
+    renderView({jobContent: <div>Job logs</div>});
+
+    const jobContent = await screen.findByText('Job logs');
+    const workspaceFrame = jobContent.closest('[data-run-workspace-frame]');
+
+    expect(workspaceFrame).toHaveClass('w-full', 'min-[768px]:flex-row');
+    expect(workspaceFrame).not.toHaveClass('max-w-[calc(240px_+_1120px)]');
+  });
+
   test('treats the removed Jobs tab URL as the graph Summary', async () => {
     configureRunFetch();
 

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

@@ -1,6 +1,7 @@
 import {ApiError} from '@shipfox/client-api';
 import {QueryLoadError} from '@shipfox/client-ui';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Panel, PanelBody, PanelHeader} from '@shipfox/react-ui/panel';
 import {RelativeTimeProvider} from '@shipfox/react-ui/relative-time';
 import {
   Select,
@@ -309,47 +310,49 @@ function RunViewContent({
 
       <div
         data-run-workspace-layout
-        className="flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base min-[768px]:flex-row"
+        className="flex min-h-0 min-w-0 flex-1 flex-col border-t border-border-neutral-base"
       >
-        {runData && workspaceSlug && projectSlug ? (
-          <RunWorkspaceNav
-            workspaceSlug={workspaceSlug}
-            projectSlug={projectSlug}
-            run={runData}
-            activeSection={activeSection}
-            currentJobId={activeJobId}
-            jobSearch={jobSearch}
-            annotationSummary={annotationSummary}
-          />
-        ) : (
-          <RunWorkspaceNavSkeleton />
-        )}
-
         <div
-          data-run-workspace-content
-          className="flex min-h-0 min-w-0 flex-1 flex-col bg-background-neutral-base"
+          data-run-workspace-frame
+          className="flex min-h-0 min-w-0 w-full flex-1 flex-col min-[768px]:flex-row"
         >
-          {runData && jobContent ? (
-            jobContent
-          ) : runData ? (
-            <RunSectionContent
-              section={activeSection}
-              run={runData}
-              annotations={annotations}
-              annotationSummary={annotationSummary}
+          {runData && workspaceSlug && projectSlug ? (
+            <RunWorkspaceNav
               workspaceSlug={workspaceSlug}
               projectSlug={projectSlug}
-              selection={selection}
-              selectedJobId={selection?.jobId}
-              onSelectGraphJob={selectGraphJob}
-              onSelectAnnotationJob={selectAnnotationJob}
-              onClearAnnotationFilters={clearAnnotationFilters}
-              sourceSnapshot={sourceSnapshot}
-              highlightedLineRange={highlightedLineRange}
+              run={runData}
+              activeSection={activeSection}
+              currentJobId={activeJobId}
+              jobSearch={jobSearch}
+              annotationSummary={annotationSummary}
             />
           ) : (
-            <div className="min-h-0 flex-1 overflow-auto p-panel">{loadingOrError}</div>
+            <RunWorkspaceNavSkeleton />
           )}
+
+          <div data-run-workspace-content className="flex min-h-0 min-w-0 flex-1 flex-col">
+            {runData && jobContent ? (
+              jobContent
+            ) : runData ? (
+              <RunSectionContent
+                section={activeSection}
+                run={runData}
+                annotations={annotations}
+                annotationSummary={annotationSummary}
+                workspaceSlug={workspaceSlug}
+                projectSlug={projectSlug}
+                selection={selection}
+                selectedJobId={selection?.jobId}
+                onSelectGraphJob={selectGraphJob}
+                onSelectAnnotationJob={selectAnnotationJob}
+                onClearAnnotationFilters={clearAnnotationFilters}
+                sourceSnapshot={sourceSnapshot}
+                highlightedLineRange={highlightedLineRange}
+              />
+            ) : (
+              <div className="min-h-0 flex-1 overflow-auto p-panel">{loadingOrError}</div>
+            )}
+          </div>
         </div>
       </div>
     </div>
@@ -395,16 +398,20 @@ function RunSectionContent({
         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">
+        <div className="flex w-full flex-col gap-group">
           <Text as="h2" className="sr-only">
             All jobs summary
           </Text>
-          <JobGraph
-            run={run}
-            selectedJobId={selectedJobId}
-            onSelectedJobChange={onSelectGraphJob}
-            className="min-h-160 overflow-hidden"
-          />
+          <Panel className="min-h-160">
+            <PanelBody className="min-h-160 bg-background-components-base p-0">
+              <JobGraph
+                run={run}
+                selectedJobId={selectedJobId}
+                onSelectedJobChange={onSelectGraphJob}
+                className="min-h-160 overflow-hidden"
+              />
+            </PanelBody>
+          </Panel>
         </div>
       </section>
     );
@@ -431,28 +438,33 @@ function RunSectionContent({
       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">
+      <div className="flex min-h-full w-full flex-col">
         <Text as="h2" className="sr-only">
           Workflow source
         </Text>
-        {sourceSnapshot ? (
-          <WorkflowSourceContent
-            source={sourceSnapshot}
-            highlightedLineRange={highlightedLineRange}
-            scrollHighlightedIntoView
-          />
-        ) : (
-          <EmptyState
-            className="min-h-160 w-full"
-            icon="fileDamageLine"
-            title="Source snapshot unavailable"
-            description={
-              run.isTemporary
-                ? 'Temporary runs do not capture workflow source.'
-                : 'This run was created before workflow source snapshots were captured.'
-            }
-          />
-        )}
+        <Panel className="min-h-160 flex-1">
+          <PanelBody className="min-h-160 flex-1 p-0">
+            {sourceSnapshot ? (
+              <WorkflowSourceContent
+                source={sourceSnapshot}
+                highlightedLineRange={highlightedLineRange}
+                scrollHighlightedIntoView
+              />
+            ) : (
+              <EmptyState
+                variant="panel"
+                className="min-h-160"
+                icon="fileDamageLine"
+                title="Source snapshot unavailable"
+                description={
+                  run.isTemporary
+                    ? 'Temporary runs do not capture workflow source.'
+                    : 'This run was created before workflow source snapshots were captured.'
+                }
+              />
+            )}
+          </PanelBody>
+        </Panel>
       </div>
     </section>
   );
@@ -526,45 +538,49 @@ function RunAnnotationsSection({
       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">
+      <div className="flex w-full flex-col">
         <Text as="h2" className="sr-only">
           Annotations
         </Text>
-        <div className="flex flex-wrap items-center justify-between gap-inline">
-          <RunAnnotationSummaryLine
-            summary={annotationSummary}
-            workspaceSlug={workspaceSlug}
-            projectSlug={projectSlug}
-            workflowRunId={run.id}
-            search={selection}
-          />
-          <AnnotationJobFilter
-            jobs={run.jobs}
-            selectedJobId={selectedJob?.id}
-            onSelect={onSelectAnnotationJob}
-          />
-        </div>
-        <RunAnnotationList
-          // Remounting on a filter or run-attempt change resets the render window, so the next
-          // list never inherits a "show more" position from different data.
-          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 || selection?.annotation) &&
-              ((annotationSummary?.total ?? 0) > 0 || hasSynthesizedJobAnnotations),
-          )}
-          filteredJobName={selectedJob?.displayName}
-          filteredSeverity={severity}
-          onClearFilters={onClearAnnotationFilters}
-          selectedAnnotationId={selection?.annotation}
-        />
+        <Panel>
+          <PanelHeader className="flex-wrap">
+            <RunAnnotationSummaryLine
+              summary={annotationSummary}
+              workspaceSlug={workspaceSlug}
+              projectSlug={projectSlug}
+              workflowRunId={run.id}
+              search={selection}
+            />
+            <AnnotationJobFilter
+              jobs={run.jobs}
+              selectedJobId={selectedJob?.id}
+              onSelect={onSelectAnnotationJob}
+            />
+          </PanelHeader>
+          <PanelBody className="gap-group p-panel">
+            <RunAnnotationList
+              // Remounting on a filter or run-attempt change resets the render window, so the next
+              // list never inherits a "show more" position from different data.
+              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 || selection?.annotation) &&
+                  ((annotationSummary?.total ?? 0) > 0 || hasSynthesizedJobAnnotations),
+              )}
+              filteredJobName={selectedJob?.displayName}
+              filteredSeverity={severity}
+              onClearFilters={onClearAnnotationFilters}
+              selectedAnnotationId={selection?.annotation}
+            />
+          </PanelBody>
+        </Panel>
       </div>
     </section>
   );
@@ -666,7 +682,7 @@ 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-panel-compact min-[768px]:block"
+      className="hidden w-240 shrink-0 p-panel-compact min-[768px]:block"
     >
       <div className="flex flex-col gap-group">
         <div className="h-32 rounded-4 bg-background-components-subtle" />

package/src/components/workflow-source-panel/workflow-source-content.tsx

@@ -63,8 +63,8 @@ export function WorkflowSourceContent({
             value={item.filename}
             className={cn(
               'min-h-full px-0 pb-0',
-              '[&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base [&>div]:dark:bg-background-contrast-base',
-              '[&_code]:!text-sm [&_code]:!text-foreground-neutral-on-inverted [&_.line]:!text-sm [&_.line]:before:!text-sm [&_.line]:before:!text-foreground-neutral-muted',
+              '[&>div]:rounded-none [&>div]:border-0 [&>div]:bg-background-contrast-base',
+              '[&_code]:!text-sm [&_code]:!text-foreground-contrast-primary [&_.line]:!text-sm [&_.line]:before:!text-sm [&_.line]:before:!text-foreground-contrast-secondary',
             )}
           >
             <CodeBlockContent