@shipfox/client-workflows 20.0.0 → 22.0.0

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

@@ -13,7 +13,7 @@ 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 defaultLogSurfaceClasses = 'rounded-8';
+const defaultLogSurfaceClasses = 'rounded-none border-0 bg-background-contrast-base shadow-none';
 
 export interface StepAttemptLogPanelProps {
   stepId: string;
@@ -24,6 +24,12 @@ export interface StepAttemptLogPanelProps {
   /** The page scroll column used by the uncapped job-detail log surface. */
   pageScrollRef: RefObject<HTMLElement | null>;
   surfaceClassName?: string | undefined;
+  search?: string | undefined;
+  wrap?: boolean | undefined;
+  showLineNumbers?: boolean | undefined;
+  attemptId?: string | undefined;
+  refreshToken?: number | undefined;
+  onFetchingChange?: ((attemptId: string, isFetching: boolean) => void) | undefined;
   initialErrorRetryCount?: number | undefined;
   initialErrorRetryDelayMs?: number | undefined;
 }
@@ -35,6 +41,12 @@ export function StepAttemptLogPanel({
   attemptStartedAt,
   pageScrollRef,
   surfaceClassName = defaultLogSurfaceClasses,
+  search = '',
+  wrap = false,
+  showLineNumbers = true,
+  attemptId,
+  refreshToken = 0,
+  onFetchingChange,
   initialErrorRetryCount = INITIAL_LOG_ERROR_RETRY_COUNT,
   initialErrorRetryDelayMs = INITIAL_LOG_ERROR_RETRY_DELAY_MS,
 }: StepAttemptLogPanelProps) {
@@ -55,6 +67,18 @@ export function StepAttemptLogPanel({
     retryMissingStream && query.data === undefined && isMissingStepLogStreamError(query.error);
   const initialError = query.isError && query.data === undefined && !missingActiveStream;
   const staleError = query.isError && query.data !== undefined;
+  const lastRefreshTokenRef = useRef(refreshToken);
+
+  useEffect(() => {
+    if (refreshToken === lastRefreshTokenRef.current) return;
+    lastRefreshTokenRef.current = refreshToken;
+    void query.refetchLogs();
+  }, [query.refetchLogs, refreshToken]);
+
+  useEffect(() => {
+    if (!attemptId) return;
+    onFetchingChange?.(attemptId, query.isFetching);
+  }, [attemptId, onFetchingChange, query.isFetching]);
 
   useEffect(() => {
     const scrollElement = pageScrollRef.current;
@@ -85,18 +109,32 @@ export function StepAttemptLogPanel({
   }, [anchorToFailure, pageScrollRef, recordCount]);
 
   if (query.isPending) {
-    return <StepLogsLoadingSurface label="Loading logs" className={surfaceClassName} />;
+    return (
+      <StepLogsLoadingSurface
+        label="Loading logs"
+        className={surfaceClassName}
+        wrap={wrap}
+        showLineNumbers={showLineNumbers}
+      />
+    );
   }
 
   if (missingActiveStream) {
     if (attemptStatus === 'running' && attemptStartedAt) {
       return <StepLogsWaitingSurface startedAt={attemptStartedAt} className={surfaceClassName} />;
     }
-    return <StepLogsLoadingSurface label="Waiting for logs" className={surfaceClassName} />;
+    return (
+      <StepLogsLoadingSurface
+        label="Waiting for logs"
+        className={surfaceClassName}
+        wrap={wrap}
+        showLineNumbers={showLineNumbers}
+      />
+    );
   }
 
   if (initialError) {
-    return <StepLogsError retrying={query.isFetching} onRetry={() => void query.refetch()} />;
+    return <StepLogsError retrying={query.isFetching} onRetry={() => void query.refetchLogs()} />;
   }
 
   return (
@@ -115,7 +153,7 @@ export function StepAttemptLogPanel({
               size="2xs"
               variant="secondary"
               isLoading={query.isFetching}
-              onClick={() => void query.refetch()}
+              onClick={() => void query.refetchLogs()}
             >
               Retry
             </Button>
@@ -124,19 +162,32 @@ export function StepAttemptLogPanel({
       ) : null}
       <LogView
         records={records}
+        search={search}
+        wrap={wrap}
+        showLineNumbers={showLineNumbers}
         emptyState={query.data?.complete ? 'complete' : 'pending'}
         anchorToFailure={anchorToFailure}
-        ariaLive={attemptStatus === 'running' ? 'polite' : 'off'}
+        ariaLive={search.trim() ? 'off' : attemptStatus === 'running' ? 'polite' : 'off'}
         className={surfaceClassName}
       />
     </div>
   );
 }
 
-function StepLogsLoadingSurface({label, className}: {label: string; className: string}) {
+function StepLogsLoadingSurface({
+  label,
+  className,
+  wrap,
+  showLineNumbers,
+}: {
+  label: string;
+  className: string;
+  wrap: boolean;
+  showLineNumbers: boolean;
+}) {
   return (
     <div role="status" aria-label={label}>
-      <LogViewSkeleton className={className} />
+      <LogViewSkeleton className={className} wrap={wrap} showLineNumbers={showLineNumbers} />
     </div>
   );
 }
@@ -144,7 +195,7 @@ function StepLogsLoadingSurface({label, className}: {label: string; className: s
 function StepLogsWaitingSurface({startedAt, className}: {startedAt: string; className: string}) {
   return (
     <div role="status" aria-label="Waiting for logs" className={className}>
-      <Text size="xs" className="px-tight py-row text-foreground-neutral-muted">
+      <Text size="xs" className="px-tight py-row text-foreground-contrast-secondary">
         Waiting for output ·{' '}
         <span className="font-code tabular-nums" aria-hidden="true">
           <JobExecutionTimeText time={{state: 'live', fromIso: startedAt}} />
@@ -188,7 +239,14 @@ function StepLogsError({retrying, onRetry}: {retrying: boolean; onRetry: () => v
     >
       <div className="flex min-w-0 flex-1 items-center justify-between gap-inline">
         <Text size="xs">Could not load logs.</Text>
-        <Button type="button" size="2xs" variant="secondary" isLoading={retrying} onClick={onRetry}>
+        <Button
+          type="button"
+          size="2xs"
+          variant="secondary"
+          isLoading={retrying}
+          disabled={retrying}
+          onClick={onRetry}
+        >
           Retry
         </Button>
       </div>

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

@@ -37,11 +37,11 @@ export function JobGraphContent({
   if (model.nodes.length === 0) {
     return (
       <EmptyState
-        className="min-h-160 p-panel"
+        className="min-h-160"
         icon="componentLine"
         title="No jobs yet"
         description="This run has not materialized jobs."
-        variant="compact"
+        variant="panel"
       />
     );
   }

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

@@ -11,7 +11,7 @@ const meta = {
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="h-520 w-900 overflow-auto bg-background-neutral-background p-16">
+      <div className="h-520 w-900 overflow-auto bg-background-subtle-base p-16">
         <Story />
       </div>
     ),

package/src/components/job-graph/job-node.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
   parameters: {layout: 'centered'},
   decorators: [
     (Story) => (
-      <div className="bg-background-neutral-background p-16">
+      <div className="bg-background-subtle-base p-16">
         <Story />
       </div>
     ),

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

@@ -132,7 +132,7 @@ function toStepModel(step: Step, index: number): StepModel {
   };
 }
 
-function stepLabel(step: Step, index: number): string {
+export function stepLabel(step: Step, index: number): string {
   const name = step.name.trim();
   if (name) return name;
 

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

@@ -145,6 +145,34 @@ describe('StepList', () => {
     expect(screen.getByText(`logs for ${deployAttempt.id}`)).toBeInTheDocument();
   });
 
+  test('reports the expanded attempt ids as rows change', async () => {
+    const user = userEvent.setup();
+    const onExpandedAttemptIdsChange = vi.fn();
+    const buildAttempt = makeAttempt({status: 'succeeded'});
+    const deployAttempt = makeAttempt({status: 'running'});
+    const build = makeStep({name: 'build', attempts: [buildAttempt]});
+    const deploy = makeStep({name: 'deploy', position: 1, attempts: [deployAttempt]});
+    render(
+      <StepList
+        job={makeJob({steps: [build, deploy]})}
+        onExpandedAttemptIdsChange={onExpandedAttemptIdsChange}
+        renderExpandedStep={({attemptId}) => <Text size="sm">logs for {attemptId}</Text>}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', {name: 'build, Succeeded, attempt 1'}));
+    expect(onExpandedAttemptIdsChange).toHaveBeenLastCalledWith([buildAttempt.id]);
+
+    await user.click(screen.getByRole('button', {name: 'deploy, Running, attempt 1'}));
+    expect(onExpandedAttemptIdsChange).toHaveBeenLastCalledWith([
+      buildAttempt.id,
+      deployAttempt.id,
+    ]);
+
+    await user.click(screen.getByRole('button', {name: 'build, Succeeded, attempt 1'}));
+    expect(onExpandedAttemptIdsChange).toHaveBeenLastCalledWith([deployAttempt.id]);
+  });
+
   test('keeps multiple expanded rows open when external attempt selection is singular', async () => {
     const user = userEvent.setup();
     const buildAttempt = makeAttempt({status: 'succeeded'});
@@ -210,7 +238,7 @@ describe('StepList', () => {
     await user.click(deployRow);
 
     expect(buildRow.parentElement?.parentElement).not.toHaveClass('bg-background-components-hover');
-    expect(deployRow.parentElement?.parentElement).toHaveClass('bg-background-components-hover');
+    expect(deployRow.parentElement?.parentElement).toHaveClass('bg-background-neutral-hover');
   });
 
   test('opens a default selected attempt', () => {

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

@@ -58,6 +58,7 @@ export interface StepListProps {
   selectedAttemptId?: string | null | undefined;
   defaultSelectedAttemptId?: string | undefined;
   onSelectedAttemptChange?: ((attemptId: string | undefined) => void) | undefined;
+  onExpandedAttemptIdsChange?: ((attemptIds: readonly string[]) => void) | undefined;
   inspectorOpenAttemptId?: string | null | undefined;
   onInspectorOpenChange?: ((attemptId: string | null) => void) | undefined;
   autoSelectActiveAttempt?: boolean | undefined;
@@ -74,6 +75,7 @@ export function StepList({
   selectedAttemptId,
   defaultSelectedAttemptId,
   onSelectedAttemptChange,
+  onExpandedAttemptIdsChange,
   inspectorOpenAttemptId = null,
   onInspectorOpenChange,
   autoSelectActiveAttempt = false,
@@ -96,6 +98,7 @@ export function StepList({
       selectedAttemptId={selectedAttemptId}
       defaultSelectedAttemptId={defaultSelectedAttemptId}
       onSelectedAttemptChange={onSelectedAttemptChange}
+      onExpandedAttemptIdsChange={onExpandedAttemptIdsChange}
       inspectorOpenAttemptId={inspectorOpenAttemptId}
       onInspectorOpenChange={onInspectorOpenChange}
       autoSelectActiveAttempt={autoSelectActiveAttempt}
@@ -113,6 +116,7 @@ function StepListContent({
   selectedAttemptId,
   defaultSelectedAttemptId,
   onSelectedAttemptChange,
+  onExpandedAttemptIdsChange,
   inspectorOpenAttemptId = null,
   onInspectorOpenChange,
   autoSelectActiveAttempt,
@@ -134,20 +138,35 @@ function StepListContent({
   const lastNotifiedSelectedAttemptId = useRef<string | null>(null);
   const autoSelectedAttemptIdRef = useRef<string | undefined>(undefined);
   const previousSelectedAttemptIdRef = useRef<string | null | undefined>(selectedAttemptId);
+  const lastReportedExpandedAttemptIdsKeyRef = useRef<string | null>(null);
   const shouldUseControlledCollapsedState =
     selectedAttemptId === null && lastNotifiedSelectedAttemptId.current === null;
   const autoSelectedAttemptId =
     selectedAttemptId === undefined && autoSelectActiveAttempt && !userSelectedAttempt
       ? (autoSelectedAttemptIdRef.current ?? model.activeEntryId)
       : undefined;
-  const autoSelectedAttemptIds = autoSelectedAttemptId ? [autoSelectedAttemptId] : [];
-  const selectedAttemptIds = shouldUseControlledCollapsedState
-    ? []
-    : localSelectedAttemptIds.length > 0
-      ? localSelectedAttemptIds
-      : autoSelectedAttemptIds;
+  const autoSelectedAttemptIds = useMemo(
+    () => (autoSelectedAttemptId ? [autoSelectedAttemptId] : []),
+    [autoSelectedAttemptId],
+  );
+  const selectedAttemptIds = useMemo(
+    () =>
+      shouldUseControlledCollapsedState
+        ? []
+        : localSelectedAttemptIds.length > 0
+          ? localSelectedAttemptIds
+          : autoSelectedAttemptIds,
+    [autoSelectedAttemptIds, localSelectedAttemptIds, shouldUseControlledCollapsedState],
+  );
   const hasExpandedContent = renderExpandedStep !== undefined;
 
+  useEffect(() => {
+    const key = selectedAttemptIds.join('|');
+    if (lastReportedExpandedAttemptIdsKeyRef.current === key) return;
+    lastReportedExpandedAttemptIdsKeyRef.current = key;
+    onExpandedAttemptIdsChange?.(selectedAttemptIds);
+  }, [onExpandedAttemptIdsChange, selectedAttemptIds]);
+
   useEffect(() => {
     if (selectedAttemptId !== undefined) {
       previousSelectedAttemptIdRef.current = selectedAttemptId;
@@ -223,7 +242,7 @@ function StepListContent({
       <section
         aria-labelledby={showHeader ? titleId : undefined}
         className={cn(
-          'flex min-h-0 flex-col rounded-8 border border-border-neutral-base bg-background-components-base',
+          'flex min-h-0 flex-col rounded-8 border border-border-neutral-base bg-background-neutral-base',
           className,
         )}
       >
@@ -307,11 +326,10 @@ function StepListEmptyStateView({
   if (!emptyState.status) {
     return (
       <EmptyState
-        className="min-h-120 p-panel"
         icon="componentLine"
         title={emptyState.title}
         description={emptyState.description}
-        variant="compact"
+        variant="panel"
       />
     );
   }
@@ -425,8 +443,8 @@ function StepRow({
     <>
       <div
         className={cn(
-          'group flex min-w-0 items-center gap-inline pr-[8px] transition-colors hover:bg-background-components-hover active:bg-background-components-pressed',
-          selected && 'bg-background-components-hover',
+          'group flex min-w-0 items-center gap-inline bg-background-neutral-base pr-[8px] transition-colors hover:bg-background-neutral-hover active:bg-background-neutral-pressed',
+          selected && 'bg-background-neutral-hover',
           !hasExpandedContent && ['border-b border-border-neutral-base', isLast && 'border-b-0'],
         )}
       >

package/src/components/workflow-run-list/job-status-strip.tsx

@@ -1,21 +1,17 @@
+import {WORKFLOW_RUN_JOB_PREVIEW_LIMIT} from '@shipfox/api-workflows-dto';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
 import {Code, Text} from '@shipfox/react-ui/typography';
 import {cn} from '@shipfox/react-ui/utils';
+import {memo} from 'react';
 import {getWorkflowStatusVisual} from '#components/workflow-status/status-visuals.js';
 import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
 import {deriveJobDisplayStatus, type JobDisplayStatus} from '#core/entities/job.js';
 import type {WorkflowRunJobSummary, WorkflowRunJobs} from '#core/workflow-run.js';
 
-/**
- * How many glyphs fit the strip's column before it starts costing the run name width.
- *
- * Sized so the widest case still fits the row's 160px strip column: seven 12px glyphs with
- * 3px gaps is 102px, and the overflow indicator adds a glyph plus a count of at most five
- * monospace characters, about 56px. Overshooting does not wrap, it paints over the duration
- * column. This sits under the API's preview bound, so resizing the strip is a change here.
- */
-const MAX_VISIBLE_JOBS = 7;
 const GLYPH_SIZE = 12;
+const GLYPH_GAP = 3;
+const OVERFLOW_GAP = 2;
+const OVERFLOW_LABEL_WIDTH = 40;
 const MAX_TOOLTIP_JOB_NAMES = 6;
 
 /**
@@ -32,6 +28,20 @@ const COMPACT_COUNT_FORMAT = new Intl.NumberFormat('en', {
   maximumFractionDigits: 1,
 });
 
+/**
+ * Reserves one full API preview and its overflow marker in a run row.
+ *
+ * Keep this derived from the API preview bound so the row reservation grows with the payload
+ * contract instead of silently drifting into the duration and timestamp columns.
+ */
+export function jobStatusStripWidthForPreview(previewLimit: number): number {
+  const previewWidth = previewLimit * GLYPH_SIZE + Math.max(previewLimit - 1, 0) * GLYPH_GAP;
+  const overflowWidth = GLYPH_GAP + GLYPH_SIZE + OVERFLOW_GAP + OVERFLOW_LABEL_WIDTH;
+  return previewWidth + overflowWidth;
+}
+
+export const JOB_STATUS_STRIP_WIDTH = jobStatusStripWidthForPreview(WORKFLOW_RUN_JOB_PREVIEW_LIMIT);
+
 // Worst-first, so the overflow glyph reports the most alarming thing it is standing in for.
 // A strip that hides a failure behind eight green discs would be worse than no strip at all.
 const STATUS_SEVERITY: Record<JobDisplayStatus, number> = {
@@ -62,10 +72,13 @@ export interface JobStatusStripProps {
  * job including those the server never sent. That split is what lets the overflow glyph
  * report a failure sitting past the preview instead of quietly dropping it.
  */
-export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
+export const JobStatusStrip = memo(function JobStatusStrip({jobs, className}: JobStatusStripProps) {
   if (jobs.total === 0) return null;
 
-  const visible = jobs.preview.slice(0, MAX_VISIBLE_JOBS);
+  // The data frame gives the row enough room for the whole API preview. Only jobs beyond that
+  // server-side preview need an overflow marker; the old seven-glyph cap belonged to the
+  // previous 1120px page width.
+  const visible = jobs.preview;
   const hiddenCount = jobs.total - visible.length;
   const overflowStatus = worstHiddenStatus(jobs, visible);
   const summary = jobStatusSummary(jobs);
@@ -115,7 +128,7 @@ export function JobStatusStrip({jobs, className}: JobStatusStripProps) {
       </TooltipContent>
     </Tooltip>
   );
-}
+});
 
 function JobStatusStripTooltip({jobs, summary}: {jobs: WorkflowRunJobs; summary: string}) {
   // Naming the jobs that need attention is the whole point of hovering; succeeded jobs are

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

@@ -53,7 +53,7 @@ export function WorkflowRunFilters({
   const [sheetOpen, setSheetOpen] = useState(false);
 
   return (
-    <div className="flex flex-wrap items-center gap-inline">
+    <div className="flex w-full flex-wrap items-center gap-inline">
       <Input
         value={search.search ?? ''}
         onChange={(event) => onChange({search: event.target.value})}

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

@@ -1,4 +1,5 @@
 import {QueryLoadError} from '@shipfox/client-ui';
+import {Panel} from '@shipfox/react-ui/panel';
 import type {WorkflowRunListItem} from '#core/workflow-run.js';
 import type {WorkflowRunListQuery} from './types.js';
 import {
@@ -55,11 +56,15 @@ export function WorkflowRunListContent({
     <div className="min-h-0 flex-1 overflow-y-auto">
       {isPending ? <WorkflowRunListSkeleton /> : null}
       {!isPending ? (
-        <QueryLoadError query={query} subject="workflow runs" icon="pulseLine" />
+        <Panel>
+          <QueryLoadError query={query} subject="workflow runs" icon="pulseLine" variant="panel" />
+        </Panel>
       ) : null}
       {!isPending && refreshFailed ? <WorkflowRunListStaleError query={query} /> : null}
       {showEmptyState ? (
-        <WorkflowRunListEmpty workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
+        <Panel>
+          <WorkflowRunListEmpty workspaceSlug={workspaceSlug} projectSlug={projectSlug} />
+        </Panel>
       ) : null}
       {showNoMatches ? (
         <WorkflowRunListNoMatches

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

@@ -2,6 +2,7 @@ import type {QueryLoadErrorQuery} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {Text} from '@shipfox/react-ui/typography';
 import {Link} from '@tanstack/react-router';
@@ -15,25 +16,21 @@ const SKELETON_ROW_COUNT = 8;
  */
 export function WorkflowRunListSkeleton() {
   return (
-    <div
-      className="@container divide-y divide-border-neutral-base border-t border-border-neutral-base"
-      role="status"
-      aria-label="Loading runs"
-    >
+    <Panel role="status" aria-label="Loading runs" className="@container divide-y">
       {Array.from({length: SKELETON_ROW_COUNT}).map((_, index) => (
         <div
           // biome-ignore lint/suspicious/noArrayIndexKey: skeleton row, stable position
           key={index}
-          className="flex items-center gap-inline px-row py-row @min-[976px]:h-44 @min-[976px]:py-0"
+          className="flex min-h-44 items-center gap-inline px-row py-row @min-[976px]:h-44 @min-[976px]:py-0"
         >
           <Skeleton className="size-14 shrink-0 rounded-full" />
           <Skeleton className="h-12 w-[220px] max-w-[40%]" />
-          <Skeleton className="ml-auto hidden h-12 w-96 @min-[1040px]:block" />
+          <Skeleton className="ml-auto hidden h-12 w-96 @min-[1200px]:block" />
           <Skeleton className="h-12 w-48" />
           <Skeleton className="h-12 w-48" />
         </div>
       ))}
-    </div>
+    </Panel>
   );
 }
 
@@ -89,6 +86,7 @@ export function WorkflowRunListEmpty({
           </Button>
         ) : null
       }
+      variant="panel"
     />
   );
 }
@@ -116,40 +114,43 @@ export function WorkflowRunListNoMatches({
   onLoadMore?: () => void;
 }) {
   return (
-    <div className="flex flex-col gap-inline">
-      {isFetchNextPageError ? (
-        <Callout role="alert" type="error">
-          Could not load more workflow runs. Try again to continue searching older runs.
-        </Callout>
-      ) : null}
-      <EmptyState
-        icon="filterOffLine"
-        title={hasNextPage ? 'No matches in loaded history' : 'No matching runs'}
-        description={
-          hasNextPage
-            ? 'No loaded run matches these filters. Load more to search further back.'
-            : 'No run matches these filters.'
-        }
-        action={
-          <div className="flex flex-wrap justify-center gap-inline">
-            {hasNextPage && onLoadMore ? (
-              <Button
-                type="button"
-                size="sm"
-                variant="primary"
-                isLoading={isFetchingNextPage}
-                onClick={onLoadMore}
-              >
-                Load more runs
+    <Panel>
+      <div className="flex flex-col gap-inline">
+        {isFetchNextPageError ? (
+          <Callout role="alert" type="error">
+            Could not load more workflow runs. Try again to continue searching older runs.
+          </Callout>
+        ) : null}
+        <EmptyState
+          icon="filterOffLine"
+          title={hasNextPage ? 'No matches in loaded history' : 'No matching runs'}
+          description={
+            hasNextPage
+              ? 'No loaded run matches these filters. Load more to search further back.'
+              : 'No run matches these filters.'
+          }
+          action={
+            <div className="flex flex-wrap justify-center gap-inline">
+              {hasNextPage && onLoadMore ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="primary"
+                  isLoading={isFetchingNextPage}
+                  onClick={onLoadMore}
+                >
+                  Load more runs
+                </Button>
+              ) : null}
+              <Button type="button" size="sm" variant="secondary" onClick={onClear}>
+                Show all runs
               </Button>
-            ) : null}
-            <Button type="button" size="sm" variant="secondary" onClick={onClear}>
-              Show all runs
-            </Button>
-          </div>
-        }
-      />
-    </div>
+            </div>
+          }
+          variant="panel"
+        />
+      </div>
+    </Panel>
   );
 }