@shipfox/client-workflows 14.0.0 → 15.0.0

package/src/components/{workflow-run-view → job-detail}/step-attempt-log-panel.tsx

@@ -7,17 +7,23 @@ import {
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {Text} from '@shipfox/react-ui/typography';
-import {type UIEvent, useEffect, useRef} from 'react';
+import {type RefObject, useEffect, useRef} from 'react';
+import {JobExecutionTimeText} from './job-execution-time-text.js';
 
 const TAIL_FOLLOW_THRESHOLD_PX = 24;
 const INITIAL_LOG_ERROR_RETRY_COUNT = 5;
 const INITIAL_LOG_ERROR_RETRY_DELAY_MS = 1_500;
-const logSurfaceClasses = 'max-h-[40vh] rounded-8 md:max-h-[280px]';
+const defaultLogSurfaceClasses = 'rounded-8';
 
 export interface StepAttemptLogPanelProps {
   stepId: string;
   attempt: number;
   attemptStatus: string;
+  /** The start time used by the page's quiet waiting-for-output state. */
+  attemptStartedAt?: string | undefined;
+  /** The page scroll column used by the uncapped job-detail log surface. */
+  pageScrollRef: RefObject<HTMLElement | null>;
+  surfaceClassName?: string | undefined;
   initialErrorRetryCount?: number | undefined;
   initialErrorRetryDelayMs?: number | undefined;
 }
@@ -26,10 +32,12 @@ export function StepAttemptLogPanel({
   stepId,
   attempt,
   attemptStatus,
+  attemptStartedAt,
+  pageScrollRef,
+  surfaceClassName = defaultLogSurfaceClasses,
   initialErrorRetryCount = INITIAL_LOG_ERROR_RETRY_COUNT,
   initialErrorRetryDelayMs = INITIAL_LOG_ERROR_RETRY_DELAY_MS,
 }: StepAttemptLogPanelProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
   const shouldFollowTailRef = useRef(true);
   const missingStreamRetryCount = attemptStatus === 'running' ? undefined : initialErrorRetryCount;
   const retryMissingStream = attemptStatus === 'running' || isTerminalAttemptStatus(attemptStatus);
@@ -48,13 +56,25 @@ export function StepAttemptLogPanel({
   const initialError = query.isError && query.data === undefined && !missingActiveStream;
   const staleError = query.isError && query.data !== undefined;
 
+  useEffect(() => {
+    const scrollElement = pageScrollRef.current;
+    if (!scrollElement) return undefined;
+
+    const onScroll = () => {
+      shouldFollowTailRef.current = isNearPageBottom(scrollElement);
+    };
+    scrollElement.addEventListener('scroll', onScroll, {passive: true});
+    onScroll();
+    return () => scrollElement.removeEventListener('scroll', onScroll);
+  }, [pageScrollRef]);
+
   useEffect(() => {
     if (recordCount === 0) return undefined;
     if (anchorToFailure) return undefined;
     if (!shouldFollowTailRef.current) return undefined;
 
     const frame = scheduleAnimationFrame(() => {
-      const scrollElement = panelRef.current?.querySelector<HTMLElement>('[data-slot="log-rows"]');
+      const scrollElement = pageScrollRef.current;
       if (!scrollElement) return;
       scrollElement.scrollTop = scrollElement.scrollHeight;
     });
@@ -62,20 +82,17 @@ export function StepAttemptLogPanel({
     return () => {
       cancelScheduledFrame(frame);
     };
-  }, [anchorToFailure, recordCount]);
-
-  function handleLogScroll(event: UIEvent<HTMLDivElement>) {
-    const element = event.currentTarget;
-    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
-    shouldFollowTailRef.current = distanceFromBottom <= TAIL_FOLLOW_THRESHOLD_PX;
-  }
+  }, [anchorToFailure, pageScrollRef, recordCount]);
 
   if (query.isPending) {
-    return <StepLogsLoadingSurface label="Loading logs" />;
+    return <StepLogsLoadingSurface label="Loading logs" className={surfaceClassName} />;
   }
 
   if (missingActiveStream) {
-    return <StepLogsLoadingSurface label="Waiting for logs" />;
+    if (attemptStatus === 'running' && attemptStartedAt) {
+      return <StepLogsWaitingSurface startedAt={attemptStartedAt} className={surfaceClassName} />;
+    }
+    return <StepLogsLoadingSurface label="Waiting for logs" className={surfaceClassName} />;
   }
 
   if (initialError) {
@@ -83,7 +100,7 @@ export function StepAttemptLogPanel({
   }
 
   return (
-    <div ref={panelRef} className="flex min-w-0 flex-col gap-8">
+    <div className="flex min-w-0 flex-col gap-8">
       {staleError ? (
         <Callout role="alert" type="warning" className="px-10 py-8">
           <div className="flex min-w-0 flex-1 items-center justify-between gap-8">
@@ -104,17 +121,29 @@ export function StepAttemptLogPanel({
         records={records}
         emptyState={query.data?.complete ? 'complete' : 'pending'}
         anchorToFailure={anchorToFailure}
-        className={logSurfaceClasses}
-        onScroll={handleLogScroll}
+        className={surfaceClassName}
       />
     </div>
   );
 }
 
-function StepLogsLoadingSurface({label}: {label: string}) {
+function StepLogsLoadingSurface({label, className}: {label: string; className: string}) {
   return (
     <div role="status" aria-label={label}>
-      <LogViewSkeleton className={logSurfaceClasses} />
+      <LogViewSkeleton className={className} />
+    </div>
+  );
+}
+
+function StepLogsWaitingSurface({startedAt, className}: {startedAt: string; className: string}) {
+  return (
+    <div role="status" aria-label="Waiting for logs" className={className}>
+      <Text size="xs" className="px-10 py-12 text-foreground-neutral-muted">
+        Waiting for output ·{' '}
+        <span className="font-code tabular-nums" aria-hidden="true">
+          <JobExecutionTimeText time={{state: 'live', fromIso: startedAt}} />
+        </span>
+      </Text>
     </div>
   );
 }
@@ -134,6 +163,11 @@ function cancelScheduledFrame(frame: number) {
   window.clearTimeout(frame);
 }
 
+function isNearPageBottom(element: HTMLElement): boolean {
+  const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+  return distanceFromBottom <= TAIL_FOLLOW_THRESHOLD_PX;
+}
+
 function isTerminalAttemptStatus(status: string): boolean {
   return status === 'succeeded' || status === 'failed' || status === 'cancelled';
 }

package/src/components/job-graph/job-graph-content.tsx

@@ -81,7 +81,7 @@ export function JobGraphContent({
 
   return (
     <TimeTickerProvider intervalMs={1000} reducedMotionIntervalMs={10_000}>
-      <div className="min-h-0 overflow-auto bg-background-neutral-background">
+      <div className="min-h-0 overflow-auto bg-transparent">
         <div className="relative" style={{width: contentWidth, minHeight: contentHeight}}>
           <GraphEdges model={model} hoveredJobId={hoveredJobId} />
           <div

package/src/components/step-list/step-list-model.test.ts

@@ -108,7 +108,7 @@ describe('buildStepListModel', () => {
     expect(result.entries.map((entry) => entry.step.label)).toEqual(['build']);
   });
 
-  test('has no active entry when no attempt is running', () => {
+  test('does not land on a failed entry when no attempt is running', () => {
     const step = makeStep({
       attempts: [
         makeAttempt({attempt: 1, status: 'failed'}),

package/src/components/step-list/step-list-model.ts

@@ -60,7 +60,7 @@ export function buildStepListModel({
     jobName: job.name ?? job.key,
     jobExecutionId: selectedJobExecution.id,
     stepCount: steps.length,
-    activeEntryId: latestRunningEntryId(entries),
+    activeEntryId: landingEntryId(entries),
     entries,
   };
 }
@@ -192,7 +192,7 @@ function compareEntries(left: StepListEntryModel, right: StepListEntryModel): nu
   );
 }
 
-function latestRunningEntryId(entries: readonly StepListEntryModel[]): string | undefined {
+function landingEntryId(entries: readonly StepListEntryModel[]): string | undefined {
   for (let index = entries.length - 1; index >= 0; index -= 1) {
     const entry = entries[index];
     if (entry?.statusVisual.kind === 'running') return entry.id;

package/src/components/step-list/step-list.stories.tsx

@@ -18,7 +18,7 @@ import {
   workflowStepAttemptDto,
   workflowStepDto,
 } from '#test/fixtures/workflow-run.js';
-import {AgentConfigFailureCallout as AgentConfigFailureCalloutView} from '../workflow-run-view/agent-config-failure-callout.js';
+import {AgentConfigFailureCallout as AgentConfigFailureCalloutView} from '../job-detail/agent-config-failure-callout.js';
 import {StepList} from './step-list.js';
 
 const AGENTS_LINK_NAME = 'Configure Agents';

package/src/components/step-list/step-list.test.tsx

@@ -280,6 +280,39 @@ describe('StepList', () => {
     expect(screen.getByText(`logs for ${deployAttempt.id}`)).toBeInTheDocument();
   });
 
+  test('does not replace the landing selection when a live job reports a new candidate', () => {
+    const firstAttempt = makeAttempt({status: 'running'});
+    const secondAttempt = makeAttempt({status: 'running'});
+    const firstStep = makeStep({name: 'build', status: 'running', attempts: [firstAttempt]});
+    const secondStep = makeStep({
+      name: 'deploy',
+      position: 1,
+      status: 'running',
+      attempts: [secondAttempt],
+    });
+    const job = makeJob({steps: [firstStep, secondStep]});
+    const {rerender} = render(
+      <StepList
+        job={job}
+        autoSelectActiveAttempt
+        defaultSelectedAttemptId={firstAttempt.id}
+        renderExpandedStep={({attemptId}) => <Text size="sm">logs for {attemptId}</Text>}
+      />,
+    );
+
+    rerender(
+      <StepList
+        job={job}
+        autoSelectActiveAttempt
+        defaultSelectedAttemptId={secondAttempt.id}
+        renderExpandedStep={({attemptId}) => <Text size="sm">logs for {attemptId}</Text>}
+      />,
+    );
+
+    expect(screen.getByText(`logs for ${firstAttempt.id}`)).toBeInTheDocument();
+    expect(screen.queryByText(`logs for ${secondAttempt.id}`)).not.toBeInTheDocument();
+  });
+
   test('does not auto-open when no attempt is running', () => {
     render(
       <StepList

package/src/components/step-list/step-list.tsx

@@ -40,6 +40,7 @@ export interface StepExpandedContext {
   sourceLocation: StepSourceLocation | null;
   attempt: number;
   attemptId: string;
+  attemptStartedAt: string;
   attemptError: Record<string, unknown> | null;
   attemptStatus: string;
   carriedOver: boolean;
@@ -119,15 +120,15 @@ function StepListContent({
   );
   const [userSelectedAttempt, setUserSelectedAttempt] = useState(false);
   const lastNotifiedSelectedAttemptId = useRef<string | null>(null);
+  const autoSelectedAttemptIdRef = useRef<string | undefined>(undefined);
+  const previousSelectedAttemptIdRef = useRef<string | null | undefined>(selectedAttemptId);
   const shouldUseControlledCollapsedState =
     selectedAttemptId === null && lastNotifiedSelectedAttemptId.current === null;
-  const autoSelectedAttemptIds =
-    selectedAttemptId === undefined &&
-    autoSelectActiveAttempt &&
-    !userSelectedAttempt &&
-    model.activeEntryId
-      ? [model.activeEntryId]
-      : [];
+  const autoSelectedAttemptId =
+    selectedAttemptId === undefined && autoSelectActiveAttempt && !userSelectedAttempt
+      ? (autoSelectedAttemptIdRef.current ?? model.activeEntryId)
+      : undefined;
+  const autoSelectedAttemptIds = autoSelectedAttemptId ? [autoSelectedAttemptId] : [];
   const selectedAttemptIds = shouldUseControlledCollapsedState
     ? []
     : localSelectedAttemptIds.length > 0
@@ -136,12 +137,41 @@ function StepListContent({
   const hasExpandedContent = renderExpandedStep !== undefined;
 
   useEffect(() => {
-    if (selectedAttemptId !== undefined) return;
+    if (selectedAttemptId !== undefined) {
+      previousSelectedAttemptIdRef.current = selectedAttemptId;
+      return;
+    }
+
+    // A changing landing candidate is normal while a live job polls. Only reset the local
+    // accordion when the parent has just cleared a previously controlled URL selection.
+    const wasControlled = previousSelectedAttemptIdRef.current !== undefined;
+    previousSelectedAttemptIdRef.current = undefined;
+    if (!wasControlled) return;
 
     setLocalSelectedAttemptIds(defaultSelectedAttemptId ? [defaultSelectedAttemptId] : []);
     setUserSelectedAttempt(false);
+    autoSelectedAttemptIdRef.current = undefined;
   }, [defaultSelectedAttemptId, selectedAttemptId]);
 
+  useEffect(() => {
+    if (
+      selectedAttemptId !== undefined ||
+      !autoSelectActiveAttempt ||
+      userSelectedAttempt ||
+      localSelectedAttemptIds.length > 0 ||
+      autoSelectedAttemptIdRef.current !== undefined
+    ) {
+      return;
+    }
+    if (model.activeEntryId) autoSelectedAttemptIdRef.current = model.activeEntryId;
+  }, [
+    autoSelectActiveAttempt,
+    localSelectedAttemptIds.length,
+    model.activeEntryId,
+    selectedAttemptId,
+    userSelectedAttempt,
+  ]);
+
   useEffect(() => {
     if (selectedAttemptId === undefined) return;
 
@@ -216,6 +246,7 @@ function StepListContent({
                             sourceLocation: entry.step.sourceLocation,
                             attempt: entry.attempt,
                             attemptId: entry.id,
+                            attemptStartedAt: entry.startedAt,
                             attemptError: entry.error,
                             attemptStatus: entry.statusVisual.kind,
                             carriedOver: entry.carriedOver,
@@ -454,7 +485,7 @@ function StepAttemptChip({attempt}: {attempt: StepAttemptModel}) {
     <div className="flex shrink-0 items-center gap-4" aria-hidden="true">
       <span
         className={cn(
-          'inline-flex h-18 min-w-24 items-center justify-center rounded-4 border px-5 font-code text-xs leading-16 text-foreground-neutral-base',
+          'inline-flex h-18 min-w-24 items-center justify-center rounded-4 border px-6 font-code text-xs leading-16 text-foreground-neutral-base',
           attemptChipClasses[attempt.statusVisual.badge ?? 'neutral'],
         )}
       >

package/src/components/workflow-run-duration-label.tsx

@@ -2,28 +2,50 @@ import {Icon} from '@shipfox/react-ui/icon';
 import {useTimeTick} from '@shipfox/react-ui/time-ticker';
 import {Code} from '@shipfox/react-ui/typography';
 import {cn, humanDuration} from '@shipfox/react-ui/utils';
-import type {WorkflowRunAttemptDisplayDuration} from '#core/workflow-run.js';
+import type {
+  WorkflowRunAttemptDisplayDuration,
+  WorkflowRunDisplayDuration,
+} from '#core/workflow-run.js';
+
+/**
+ * The run list reads an attempt's own marks and cannot tell queue from run, so an unkinded
+ * duration still renders as run time. Only surfaces holding the run's jobs pass a kind.
+ */
+export type WorkflowRunDurationDisplay =
+  | WorkflowRunAttemptDisplayDuration
+  | WorkflowRunDisplayDuration;
+
+type DurationKind = 'queue' | 'run';
+
+const GLYPH_BY_KIND = {queue: 'hourglassLine', run: 'timerLine'} as const;
+const LIVE_VERB_BY_KIND = {queue: 'queued', run: 'running'} as const;
+const FIXED_VERB_BY_KIND = {queue: 'queued', run: 'ran'} as const;
 
 export function WorkflowRunDurationLabel({
   duration,
   className,
 }: {
-  duration: WorkflowRunAttemptDisplayDuration | null;
+  duration: WorkflowRunDurationDisplay | null;
   className?: string | undefined;
 }) {
   if (duration === null) return null;
+  const kind = durationKind(duration);
 
   switch (duration.state) {
     case 'fixed': {
       const display = formatFixedDurationLabel(duration.elapsed);
       return (
-        <DurationText className={className} ariaLabel={`ran ${display}`}>
+        <DurationText
+          className={className}
+          kind={kind}
+          ariaLabel={`${FIXED_VERB_BY_KIND[kind]} ${display}`}
+        >
           {display}
         </DurationText>
       );
     }
     case 'live':
-      return <LiveDurationText duration={duration} className={className} />;
+      return <LiveDurationText duration={duration} kind={kind} className={className} />;
     default: {
       const exhaustive: never = duration;
       return exhaustive;
@@ -32,22 +54,23 @@ export function WorkflowRunDurationLabel({
 }
 
 export function useWorkflowRunDurationAccessibleLabel(
-  duration: WorkflowRunAttemptDisplayDuration | null,
+  duration: WorkflowRunDurationDisplay | null,
 ): string | undefined {
   useTimeTick();
   return workflowRunDurationAccessibleLabel(duration);
 }
 
 export function workflowRunDurationAccessibleLabel(
-  duration: WorkflowRunAttemptDisplayDuration | null,
+  duration: WorkflowRunDurationDisplay | null,
 ): string | undefined {
   if (duration === null) return undefined;
+  const kind = durationKind(duration);
 
   switch (duration.state) {
     case 'live':
-      return `running ${humanDuration(duration.fromIso)}`;
+      return `${LIVE_VERB_BY_KIND[kind]} ${humanDuration(duration.fromIso)}`;
     case 'fixed':
-      return `ran ${formatFixedDurationLabel(duration.elapsed)}`;
+      return `${FIXED_VERB_BY_KIND[kind]} ${formatFixedDurationLabel(duration.elapsed)}`;
     default: {
       const exhaustive: never = duration;
       return exhaustive;
@@ -55,17 +78,27 @@ export function workflowRunDurationAccessibleLabel(
   }
 }
 
+function durationKind(duration: WorkflowRunDurationDisplay): DurationKind {
+  return 'kind' in duration ? duration.kind : 'run';
+}
+
 function LiveDurationText({
   duration,
+  kind,
   className,
 }: {
-  duration: Extract<WorkflowRunAttemptDisplayDuration, {state: 'live'}>;
+  duration: Extract<WorkflowRunDurationDisplay, {state: 'live'}>;
+  kind: DurationKind;
   className?: string | undefined;
 }) {
   useTimeTick();
   const display = humanDuration(duration.fromIso);
   return (
-    <DurationText className={className} ariaLabel={`running ${display}`}>
+    <DurationText
+      className={className}
+      kind={kind}
+      ariaLabel={`${LIVE_VERB_BY_KIND[kind]} ${display}`}
+    >
       {display}
     </DurationText>
   );
@@ -74,10 +107,12 @@ function LiveDurationText({
 function DurationText({
   children,
   className,
+  kind,
   ariaLabel,
 }: {
   children: string;
   className?: string | undefined;
+  kind: DurationKind;
   ariaLabel?: string | undefined;
 }) {
   return (
@@ -90,7 +125,10 @@ function DurationText({
         className,
       )}
     >
-      <Icon name="timerLine" className="size-12 shrink-0" aria-hidden="true" />
+      {/* The glyph is the only visible mark of queue vs run: the status badge already writes
+          "Queued", and the numeric columns are fixed width. The verb rides the accessible
+          name instead. */}
+      <Icon name={GLYPH_BY_KIND[kind]} className="size-12 shrink-0" aria-hidden="true" />
       {children}
     </Code>
   );
@@ -104,7 +142,7 @@ function formatFixedDurationLabel({
   hours = 0,
   minutes = 0,
   seconds = 0,
-}: Extract<WorkflowRunAttemptDisplayDuration, {state: 'fixed'}>['elapsed']): string {
+}: Extract<WorkflowRunDurationDisplay, {state: 'fixed'}>['elapsed']): string {
   const totalDays = years * 365 + months * 30 + weeks * 7 + days;
   const totalHours = totalDays * 24 + hours;
 

package/src/components/workflow-run-list/workflow-run-row.tsx

@@ -20,6 +20,7 @@ import {
   workflowRunActor,
   workflowRunBranchLabel,
   workflowRunCommitLabel,
+  workflowRunListItemDisplay,
 } from '#core/workflow-run.js';
 import {withoutWorkflowRunSelectionSearch} from '#core/workflow-run-url-state.js';
 import {JobStatusStrip, jobStatusSummary} from './job-status-strip.js';
@@ -68,8 +69,9 @@ export function WorkflowRunRow({
   workspaceSlug?: string | undefined;
   projectSlug?: string | undefined;
 }) {
-  const durationLabel = useWorkflowRunDurationAccessibleLabel(run.runAttempt.displayDuration);
-  const statusLabel = getWorkflowStatusVisual(run.status).label;
+  const display = workflowRunListItemDisplay(run);
+  const durationLabel = useWorkflowRunDurationAccessibleLabel(display.duration);
+  const statusLabel = getWorkflowStatusVisual(display.status).label;
   const runNumberLabel = formatWorkflowRunNumberLabel(run);
   const branch = workflowRunBranchLabel(run);
   const commit = workflowRunCommitLabel(run);
@@ -77,7 +79,7 @@ export function WorkflowRunRow({
 
   const body = (
     <>
-      <WorkflowStatusIcon status={run.status} size={14} className="shrink-0" />
+      <WorkflowStatusIcon status={display.status} size={14} className="shrink-0" />
 
       <div className="flex min-w-0 flex-1 flex-col gap-2 @min-[976px]:flex-row @min-[976px]:items-center @min-[976px]:gap-12">
         <span className="flex min-w-0 items-center gap-8 @min-[976px]:flex-1">
@@ -103,7 +105,7 @@ export function WorkflowRunRow({
           <JobStatusStrip jobs={run.jobs} />
         </span>
         <span className="flex w-64 justify-end">
-          <WorkflowRunDurationLabel duration={run.runAttempt.displayDuration} />
+          <WorkflowRunDurationLabel duration={display.duration} />
         </span>
         <Code
           variant="label"

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

@@ -18,6 +18,7 @@ import {WorkflowRunAttempt, type WorkflowRunStatus} from '#core/workflow-run.js'
 import {
   runAttemptsResponseDto,
   workflowJobDto,
+  workflowJobExecutionDto,
   workflowRunAttemptDto,
   workflowRunDetail,
 } from '#test/fixtures/workflow-run.js';
@@ -202,6 +203,19 @@ export const Durations: Story = {
   ),
 };
 
+/**
+ * A live attempt whose jobs have not started. The header reports the wait rather than a run
+ * that never began, and names the job the run is blocked on once there is more than one.
+ */
+export const Queued: Story = {
+  render: () => (
+    <div className="flex flex-col">
+      <WorkflowRunSummary run={queuedRun('release-queued', ['build'])} />
+      <WorkflowRunSummary run={queuedRun('release-queued-fan-out', ['build', 'lint', 'test'])} />
+    </div>
+  ),
+};
+
 export const Cancellable: Story = {
   args: {
     run: workflowRunDetail({status: 'running'}),
@@ -209,6 +223,30 @@ export const Cancellable: Story = {
   },
 };
 
+function queuedRun(name: string, jobNames: string[]) {
+  return workflowRunDetail({
+    status: 'running',
+    name,
+    run_attempt: workflowRunAttemptDto({
+      status: 'running',
+      created_at: RUN_STARTED_AT,
+      started_at: RUN_STARTED_AT,
+      finished_at: null,
+    }),
+    jobs: jobNames.map((jobName, index) =>
+      workflowJobDto({
+        name: jobName,
+        status: 'pending',
+        job_executions: [
+          workflowJobExecutionDto({
+            queued_at: new Date(Date.parse(RUN_STARTED_AT) + index * 1000).toISOString(),
+          }),
+        ],
+      }),
+    ),
+  });
+}
+
 export const Cancelling: Story = {
   args: {
     run: workflowRunDetail({status: 'running'}),