@shipfox/client-workflows 20.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workflows",
   "license": "MIT",
-  "version": "20.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -29,14 +29,14 @@
     "date-fns": "^4.1.0",
     "@shipfox/annotations-dto": "12.3.0",
     "@shipfox/api-definitions-dto": "12.3.0",
-    "@shipfox/api-workflows-dto": "12.7.0",
+    "@shipfox/api-workflows-dto": "13.0.0",
+    "@shipfox/client-logs": "22.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@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"
+    "@shipfox/client-projects": "22.0.0",
+    "@shipfox/client-shell": "22.0.0",
+    "@shipfox/client-triggers": "22.0.0",
+    "@shipfox/react-ui": "2.1.0",
+    "@shipfox/client-ui": "22.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

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

@@ -3,13 +3,24 @@
 
 import {ApiError} from '@shipfox/client-api';
 import {QueryLoadError} from '@shipfox/client-ui';
+import {Badge} from '@shipfox/react-ui/badge';
+import {IconButton} from '@shipfox/react-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
 import {Icon} from '@shipfox/react-ui/icon';
+import {Panel, PanelActions, PanelBody, PanelHeader} from '@shipfox/react-ui/panel';
+import {SearchInline} from '@shipfox/react-ui/search';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {TimeTickerProvider} from '@shipfox/react-ui/time-ticker';
 import {Text} from '@shipfox/react-ui/typography';
 import {Link} from '@tanstack/react-router';
-import {type RefObject, useEffect, useRef, useState} from 'react';
+import {type RefObject, useCallback, useEffect, useRef, useState} from 'react';
 import type {RunAnnotationSummary} from '#core/run-annotation.js';
 import {summarizeJobAnnotations} from '#core/run-annotation.js';
 import {isWorkflowRunTerminal, type Job, type JobExecution} from '#core/workflow-run.js';
@@ -22,6 +33,11 @@ import {
   workflowRunSearchParams,
 } from '#routes/inputs.js';
 import {type StepExpandedContext, StepList} from '../step-list/index.js';
+import {
+  buildStepListModel,
+  getStepStatusVisual,
+  type StepListModel,
+} from '../step-list/step-list-model.js';
 import {
   WorkflowRunNotFound,
   WorkflowRunStaleError,
@@ -71,6 +87,12 @@ export function JobDetailView({
   const rootRef = useRef<HTMLDivElement>(null);
   const pageScrollRef = useRef<HTMLDivElement>(null);
   const landingSelectionRef = useRef<FrozenLandingSelection | undefined>(undefined);
+  const [logSearch, setLogSearch] = useState('');
+  const [wrapLogs, setWrapLogs] = useState(false);
+  const [showLineNumbers, setShowLineNumbers] = useState(true);
+  const [expandedLogAttemptIds, setExpandedLogAttemptIds] = useState<readonly string[]>([]);
+  const [logRefreshTokens, setLogRefreshTokens] = useState<Record<string, number>>({});
+  const [logFetchingByAttemptId, setLogFetchingByAttemptId] = useState<Record<string, boolean>>({});
   const hasLoadedData = query.data !== undefined;
   // Reuse the run workspace's bounded annotation read for the job header chip. The separate
   // summary query below stays counts-only and is scoped to the inspector's selected execution.
@@ -112,6 +134,13 @@ export function JobDetailView({
     heading?.focus({preventScroll: true});
   }, [hasLoadedData, jobId]);
 
+  const handleLogFetchingChange = useCallback((attemptId: string, isFetching: boolean) => {
+    setLogFetchingByAttemptId((current) => {
+      if (current[attemptId] === isFetching) return current;
+      return {...current, [attemptId]: isFetching};
+    });
+  }, []);
+
   if (query.isPending) return <JobDetailSkeleton />;
 
   if (query.isError && query.data === undefined) {
@@ -139,6 +168,7 @@ export function JobDetailView({
   const resolvedSelection = resolveWorkflowJobSelection({job, selection: search});
   const selectedJobExecution = resolvedSelection.jobExecution;
   const hasExplicitStep = Boolean(search.stepId && resolvedSelection.step);
+  const stepListModel = buildStepListModel({job, jobExecution: selectedJobExecution});
   const currentLandingSelection = workflowJobLandingSelection(selectedJobExecution);
   if (selectedJobExecution) {
     const frozenLanding = landingSelectionRef.current;
@@ -165,11 +195,22 @@ export function JobDetailView({
   }
   const landingSelection = landingSelectionRef.current?.selection;
   const selectedAttemptId = hasExplicitStep ? resolvedSelection.selectedAttemptId : undefined;
-  const runningSelection = runningStepSelection(selectedJobExecution);
+  const runningSelection = runningStepSelection(selectedJobExecution, stepListModel);
   const selectedStepId = resolvedSelection.step?.id ?? landingSelection?.stepId;
   const selectedAttemptForNotice = hasExplicitStep
     ? resolvedSelection.selectedAttemptId
     : landingSelection?.attemptId;
+  const expandedLogSelection = findExpandedLogSelection(
+    selectedJobExecution,
+    expandedLogAttemptIds,
+    stepListModel,
+  );
+  const selectedLogStep = expandedLogSelection?.step;
+  const selectedLogAttempt = expandedLogSelection?.attempt;
+  const selectedLogStatus = selectedLogAttempt?.status ?? selectedLogStep?.status;
+  const logIsFetching = Boolean(
+    selectedLogAttempt && logFetchingByAttemptId[selectedLogAttempt.id],
+  );
   const showRetargetNotice =
     runningSelection !== undefined &&
     (selectedStepId !== runningSelection.stepId ||
@@ -224,6 +265,14 @@ export function JobDetailView({
     });
   }
 
+  function refreshLogs() {
+    if (!selectedLogAttempt) return;
+    setLogRefreshTokens((current) => ({
+      ...current,
+      [selectedLogAttempt.id]: (current[selectedLogAttempt.id] ?? 0) + 1,
+    }));
+  }
+
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
       <div ref={rootRef} className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
@@ -255,49 +304,77 @@ export function JobDetailView({
                   ) : undefined
                 }
               />
-              <Text as="h2" className="sr-only">
-                Logs
-              </Text>
-              {selectedJobExecution ? (
-                <>
-                  <MaterializedOutputFailureNotice jobExecution={selectedJobExecution} />
-                  <StepList
-                    job={job}
-                    jobExecution={selectedJobExecution}
-                    selectedAttemptId={selectedAttemptId}
-                    defaultSelectedAttemptId={landingSelection?.attemptId}
-                    onSelectedAttemptChange={selectAttempt}
-                    inspectorOpenAttemptId={inspectorOpenAttemptId}
-                    onInspectorOpenChange={onInspectorOpenChange}
-                    autoSelectActiveAttempt
-                    emptyState={emptyStateForJob(job, selectedJobExecution)}
-                    showHeader={false}
-                    className="rounded-none border-0 bg-transparent"
-                    renderExpandedStep={(context) => (
-                      <ExpandedStep context={context} pageScrollRef={pageScrollRef} />
-                    )}
-                    renderInspector={(entry) => (
-                      <StepInspectorSheet
-                        entry={entry}
-                        open
-                        onOpenChange={(open) => onInspectorOpenChange(open ? entry.id : null)}
-                        workspaceSlug={workspaceSlug}
-                        projectSlug={projectSlug}
-                        workflowRunId={run.id}
-                        runAttempt={run.runAttempt.attempt}
-                        jobId={job.id}
-                        annotationCount={annotationCountForStep(
-                          annotationSummaryQuery.data,
-                          entry.step.id,
-                          entry.attempt,
+              <Panel data-job-log-panel className="min-w-0">
+                <JobLogPanelHeader
+                  stepLabel={expandedLogSelection?.stepLabel}
+                  attempt={selectedLogAttempt?.attempt}
+                  status={selectedLogStatus}
+                  search={logSearch}
+                  onSearchChange={setLogSearch}
+                  onRefresh={refreshLogs}
+                  refreshing={logIsFetching}
+                  showLineNumbers={showLineNumbers}
+                  onShowLineNumbersChange={setShowLineNumbers}
+                  wrap={wrapLogs}
+                  onWrapChange={setWrapLogs}
+                  disabled={!selectedLogAttempt}
+                />
+                <PanelBody className="min-w-0 p-0">
+                  <Text as="h2" className="sr-only">
+                    Logs
+                  </Text>
+                  {selectedJobExecution ? (
+                    <>
+                      <MaterializedOutputFailureNotice jobExecution={selectedJobExecution} />
+                      <StepList
+                        job={job}
+                        jobExecution={selectedJobExecution}
+                        selectedAttemptId={selectedAttemptId}
+                        defaultSelectedAttemptId={landingSelection?.attemptId}
+                        onSelectedAttemptChange={selectAttempt}
+                        onExpandedAttemptIdsChange={setExpandedLogAttemptIds}
+                        inspectorOpenAttemptId={inspectorOpenAttemptId}
+                        onInspectorOpenChange={onInspectorOpenChange}
+                        autoSelectActiveAttempt
+                        emptyState={emptyStateForJob(job, selectedJobExecution)}
+                        showHeader={false}
+                        className="rounded-none border-0 bg-transparent shadow-none"
+                        renderExpandedStep={(context) => (
+                          <ExpandedStep
+                            context={context}
+                            pageScrollRef={pageScrollRef}
+                            search={logSearch}
+                            wrap={wrapLogs}
+                            showLineNumbers={showLineNumbers}
+                            attemptId={context.attemptId}
+                            refreshToken={logRefreshTokens[context.attemptId] ?? 0}
+                            onFetchingChange={handleLogFetchingChange}
+                          />
+                        )}
+                        renderInspector={(entry) => (
+                          <StepInspectorSheet
+                            entry={entry}
+                            open
+                            onOpenChange={(open) => onInspectorOpenChange(open ? entry.id : null)}
+                            workspaceSlug={workspaceSlug}
+                            projectSlug={projectSlug}
+                            workflowRunId={run.id}
+                            runAttempt={run.runAttempt.attempt}
+                            jobId={job.id}
+                            annotationCount={annotationCountForStep(
+                              annotationSummaryQuery.data,
+                              entry.step.id,
+                              entry.attempt,
+                            )}
+                          />
                         )}
                       />
-                    )}
-                  />
-                </>
-              ) : (
-                <EmptyStateForMissingExecution job={job} />
-              )}
+                    </>
+                  ) : (
+                    <EmptyStateForMissingExecution job={job} />
+                  )}
+                </PanelBody>
+              </Panel>
             </section>
             {showRetargetNotice && runningSelection ? (
               <div
@@ -336,9 +413,21 @@ export function JobDetailView({
 function ExpandedStep({
   context,
   pageScrollRef,
+  search,
+  wrap,
+  showLineNumbers,
+  attemptId,
+  refreshToken,
+  onFetchingChange,
 }: {
   context: StepExpandedContext;
   pageScrollRef: RefObject<HTMLDivElement | null>;
+  search: string;
+  wrap: boolean;
+  showLineNumbers: boolean;
+  attemptId: string;
+  refreshToken: number;
+  onFetchingChange: (attemptId: string, isFetching: boolean) => void;
 }) {
   if (context.carriedOver) return <CarriedOverStepPanel />;
 
@@ -347,7 +436,7 @@ function ExpandedStep({
       role="region"
       tabIndex={0}
       aria-label={`${context.stepLabel} output, attempt ${context.attempt}`}
-      className="flex min-w-0 flex-col border-t border-border-neutral-base bg-background-neutral-base outline-none focus-visible:shadow-border-interactive-with-active dark:bg-background-contrast-subtle"
+      className="flex min-w-0 flex-col border-t border-border-neutral-base bg-background-contrast-base outline-none focus-visible:shadow-border-interactive-with-active"
     >
       <StepAttemptLogPanel
         stepId={context.stepId}
@@ -355,21 +444,124 @@ function ExpandedStep({
         attemptStatus={context.attemptStatus}
         attemptStartedAt={context.attemptStartedAt}
         pageScrollRef={pageScrollRef}
-        surfaceClassName="rounded-none border-0 bg-transparent shadow-none"
+        search={search}
+        wrap={wrap}
+        showLineNumbers={showLineNumbers}
+        attemptId={attemptId}
+        refreshToken={refreshToken}
+        onFetchingChange={onFetchingChange}
       />
     </section>
   );
 }
 
+function JobLogPanelHeader({
+  stepLabel,
+  attempt,
+  status,
+  search,
+  onSearchChange,
+  onRefresh,
+  refreshing,
+  showLineNumbers,
+  onShowLineNumbersChange,
+  wrap,
+  onWrapChange,
+  disabled,
+}: {
+  stepLabel: string | undefined;
+  attempt: number | undefined;
+  status: string | undefined;
+  search: string;
+  onSearchChange: (value: string) => void;
+  onRefresh: () => void;
+  refreshing: boolean;
+  showLineNumbers: boolean;
+  onShowLineNumbersChange: (value: boolean) => void;
+  wrap: boolean;
+  onWrapChange: (value: boolean) => void;
+  disabled: boolean;
+}) {
+  const statusVisual = status ? getStepStatusVisual(status) : undefined;
+
+  return (
+    <PanelHeader className="flex flex-wrap items-center gap-group">
+      <div className="min-w-0 flex-1">
+        <Text size="sm" bold className="truncate text-foreground-neutral-base">
+          {stepLabel ?? 'Logs'}
+        </Text>
+        {statusVisual ? (
+          <div className="flex min-w-0 items-center gap-inline text-foreground-neutral-muted">
+            <Badge variant={statusVisual.badge} size="2xs" radius="rounded">
+              {statusVisual.label}
+            </Badge>
+            {attempt ? (
+              <span className="font-code text-xs leading-20 tabular-nums">attempt {attempt}</span>
+            ) : null}
+          </div>
+        ) : (
+          <Text size="xs" className="text-foreground-neutral-muted">
+            Select a step to view its logs.
+          </Text>
+        )}
+      </div>
+      <PanelActions className="min-w-0 flex-wrap justify-end">
+        <SearchInline
+          value={search}
+          onChange={(event) => onSearchChange(event.target.value)}
+          aria-label="Search logs"
+          placeholder="Search logs"
+          size="small"
+          className="w-180 max-w-full"
+          disabled={disabled}
+        />
+        <IconButton
+          type="button"
+          variant="transparent"
+          size="sm"
+          icon="refreshLine"
+          aria-label="Refresh logs"
+          onClick={onRefresh}
+          disabled={disabled || refreshing}
+          isLoading={refreshing}
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              type="button"
+              variant="transparent"
+              size="sm"
+              icon="settings3Line"
+              aria-label="Log settings"
+              disabled={disabled}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" size="sm">
+            <DropdownMenuLabel>Log display</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem
+              checked={showLineNumbers}
+              onCheckedChange={onShowLineNumbersChange}
+            >
+              Line numbers
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={wrap} onCheckedChange={onWrapChange}>
+              Wrap long lines
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </PanelActions>
+    </PanelHeader>
+  );
+}
+
 function EmptyStateForMissingExecution({job}: {job: Job}) {
   const emptyState = emptyStateForMissingExecution(job);
   return (
     <EmptyState
-      className="min-h-120 p-panel"
       icon="componentLine"
       title={emptyState.title}
       description={emptyState.description}
-      variant="compact"
+      variant="panel"
     />
   );
 }
@@ -442,7 +634,7 @@ function NewerAttemptNotice({
   );
 }
 
-function runningStepSelection(jobExecution: JobExecution | undefined) {
+function runningStepSelection(jobExecution: JobExecution | undefined, model: StepListModel) {
   if (!jobExecution) return undefined;
   const steps = [...jobExecution.steps].sort(
     (left, right) => left.position - right.position || left.id.localeCompare(right.id),
@@ -455,7 +647,11 @@ function runningStepSelection(jobExecution: JobExecution | undefined) {
       .reverse()
       .find((candidate) => candidate.status === 'running');
     if (attempt)
-      return {stepId: step.id, attemptId: attempt.id, stepLabel: step.name || step.key || step.id};
+      return {
+        stepId: step.id,
+        attemptId: attempt.id,
+        stepLabel: model.entries.find((entry) => entry.id === attempt.id)?.step.label ?? 'Step',
+      };
   }
   return undefined;
 }
@@ -468,6 +664,25 @@ function findAttempt(jobExecution: JobExecution, attemptId: string) {
   return undefined;
 }
 
+function findExpandedLogSelection(
+  jobExecution: JobExecution | undefined,
+  attemptIds: readonly string[],
+  model: StepListModel,
+) {
+  if (!jobExecution) return undefined;
+
+  for (let index = attemptIds.length - 1; index >= 0; index -= 1) {
+    const attemptId = attemptIds[index];
+    if (!attemptId) continue;
+    const match = findAttempt(jobExecution, attemptId);
+    const attempt = match?.step.attempts.find((candidate) => candidate.id === attemptId);
+    const entry = model.entries.find((candidate) => candidate.id === attemptId);
+    if (match && attempt && entry) return {step: match.step, attempt, stepLabel: entry.step.label};
+  }
+
+  return undefined;
+}
+
 function annotationCountForStep(
   summary: RunAnnotationSummary | undefined,
   stepId: string,

package/src/components/job-detail/job-empty-states.tsx

@@ -256,11 +256,11 @@ function humanizeFailureReason(reason: string): string {
 export function CarriedOverStepPanel() {
   return (
     <EmptyState
-      className="min-h-120 rounded-8 border border-border-neutral-base bg-background-components-base p-panel"
+      className="rounded-8 border border-border-neutral-base bg-background-components-base"
       icon="componentLine"
       title="Carried over from a previous attempt"
       description="Not executed in this run."
-      variant="compact"
+      variant="panel"
     />
   );
 }

package/src/components/job-detail/step-attempt-log-panel.test.tsx

@@ -2,7 +2,7 @@ import {configureApiClient} from '@shipfox/client-api';
 import {type StepLogSnapshot, stepLogsQueryKeys} from '@shipfox/client-logs';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {act, cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
-import {createRef, type ReactNode} from 'react';
+import {createRef} from 'react';
 import {inlineLogBody, outputLine} from '#test/fixtures/logs.js';
 import {StepAttemptLogPanel} from './step-attempt-log-panel.js';
 
@@ -49,25 +49,28 @@ function renderPanel(
     new QueryClient({
       defaultOptions: {queries: {retry: false}},
     });
-  const wrapper = ({children}: {children: ReactNode}) => (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
   const pageScrollRef = createRef<HTMLDivElement>();
-
-  return {
-    queryClient,
-    ...render(
+  const renderPanelUi = (panelProps: Partial<Parameters<typeof StepAttemptLogPanel>[0]>) => (
+    <QueryClientProvider client={queryClient}>
       <div ref={pageScrollRef}>
         <StepAttemptLogPanel
           stepId={STEP_ID}
           attempt={1}
           attemptStatus="running"
           pageScrollRef={pageScrollRef}
-          {...props}
+          {...panelProps}
         />
-      </div>,
-      {wrapper},
-    ),
+      </div>
+    </QueryClientProvider>
+  );
+  const rendered = render(renderPanelUi(props));
+
+  return {
+    queryClient,
+    ...rendered,
+    rerenderPanel: (nextProps: Partial<Parameters<typeof StepAttemptLogPanel>[0]> = {}) => {
+      rendered.rerender(renderPanelUi({...props, ...nextProps}));
+    },
   };
 }
 
@@ -240,6 +243,21 @@ describe('StepAttemptLogPanel', () => {
     expect(screen.getByRole('button', {name: 'Retry'})).toBeInTheDocument();
   });
 
+  test('refetches the expanded attempt when its refresh token changes', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(inlineLogBody(outputLine('first\n'), 1)))
+      .mockResolvedValueOnce(jsonResponse(inlineLogBody(outputLine('second\n'), 2)));
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+    const {rerenderPanel} = renderPanel({attemptStatus: 'succeeded', refreshToken: 0});
+
+    expect(await screen.findByText('first')).toBeInTheDocument();
+    rerenderPanel({refreshToken: 1});
+
+    expect(await screen.findByText('second')).toBeInTheDocument();
+    expect(fetchImpl).toHaveBeenCalledTimes(2);
+  });
+
   test('does not follow new log output after the user scrolls away from the tail', async () => {
     vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
       callback(0);