@shipfox/client-workflows 0.2.0

package/src/components/workflow-run-view/job-execution-switcher.tsx

@@ -0,0 +1,170 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {Icon} from '@shipfox/react-ui/icon';
+import {Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+import {useMemo} from 'react';
+import {WorkflowStatusIcon} from '#components/workflow-status/workflow-status-icon.js';
+import type {Job, JobExecution} from '#core/workflow-run.js';
+import {JobExecutionTimeText} from './job-execution-time-text.js';
+
+export interface JobExecutionSwitcherProps {
+  job: Job;
+  selectedJobExecution: string | null;
+  onSelectedJobExecutionChange: (jobExecutionId: string) => void;
+  variant?: 'compact' | 'title' | undefined;
+  className?: string | undefined;
+}
+
+export function JobExecutionSwitcher({
+  job,
+  selectedJobExecution,
+  onSelectedJobExecutionChange,
+  variant = 'compact',
+  className,
+}: JobExecutionSwitcherProps) {
+  const executions = useMemo(
+    () => [...job.jobExecutions].sort((left, right) => right.sequence - left.sequence),
+    [job.jobExecutions],
+  );
+  const selected =
+    executions.find((jobExecution) => jobExecution.id === selectedJobExecution) ??
+    executions[0] ??
+    null;
+
+  if (selected === null) return null;
+
+  if (!job.executionCountVisible) {
+    return (
+      <div
+        className={cn(
+          'flex min-w-0 items-center gap-6 text-sm leading-20 text-foreground-neutral-subtle',
+          className,
+        )}
+      >
+        <ExecutionSummary execution={selected} />
+      </div>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={cn(
+          'inline-flex min-w-0 max-w-full items-center rounded-6 text-left transition-colors focus-visible:shadow-border-interactive-with-active focus-visible:outline-none',
+          variant === 'title'
+            ? '-mx-6 -my-4 gap-8 px-6 py-4 hover:bg-background-components-hover'
+            : 'min-h-28 gap-6 px-8 py-4 text-sm leading-20 text-foreground-neutral-subtle hover:bg-background-components-hover',
+          className,
+        )}
+        aria-label={`Switch job execution, currently execution ${selected.sequence}`}
+      >
+        {variant === 'title' ? (
+          <TitleExecutionSummary job={job} execution={selected} />
+        ) : (
+          <ExecutionSummary execution={selected} />
+        )}
+        <Icon name="arrowDownSLine" className="size-14 shrink-0 text-foreground-neutral-muted" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" size="lg" className="max-h-[320px] overflow-y-auto">
+        <DropdownMenuLabel>
+          {executions.length} execution{executions.length === 1 ? '' : 's'}
+        </DropdownMenuLabel>
+        {executions.map((jobExecution) => {
+          const isSelected = jobExecution.id === selected.id;
+
+          return (
+            <DropdownMenuItem
+              key={jobExecution.id}
+              asChild
+              onSelect={() => onSelectedJobExecutionChange(jobExecution.id)}
+            >
+              <button
+                type="button"
+                aria-current={isSelected ? 'true' : undefined}
+                className="w-full text-left"
+              >
+                <WorkflowStatusIcon status={jobExecution.status} size={14} tooltip={false} />
+                <span className="font-code text-xs leading-20 text-foreground-neutral-base tabular-nums">
+                  #{jobExecution.sequence}
+                </span>
+                <span className="min-w-0 truncate text-xs leading-20 text-foreground-neutral-base">
+                  {job.displayName}
+                </span>
+                {!isSelected && jobExecution.statusReason ? (
+                  <span className="min-w-0 flex-1 truncate text-xs leading-20 text-foreground-neutral-muted">
+                    {jobExecution.statusReason}
+                  </span>
+                ) : (
+                  <span className="min-w-0 flex-1" />
+                )}
+                {isSelected ? (
+                  <Icon name="check" className="size-14 shrink-0 text-foreground-neutral-base" />
+                ) : null}
+                <JobExecutionDuration
+                  execution={jobExecution}
+                  className="ml-auto shrink-0 font-code text-xs leading-20 text-foreground-neutral-muted tabular-nums"
+                />
+              </button>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function TitleExecutionSummary({job, execution}: {job: Job; execution: JobExecution}) {
+  return (
+    <span className="flex min-w-0 items-center gap-8">
+      <Text as="span" size="sm" bold className="shrink-0 text-foreground-neutral-base">
+        #{execution.sequence}
+      </Text>
+      <Text as="span" size="sm" bold className="min-w-0 truncate text-foreground-neutral-base">
+        {job.displayName}
+      </Text>
+    </span>
+  );
+}
+
+function ExecutionSummary({execution}: {execution: JobExecution}) {
+  return (
+    <span className="flex min-w-0 items-center gap-6">
+      <WorkflowStatusIcon status={execution.status} size={14} tooltip={false} />
+      <span className="shrink-0 font-code text-xs leading-20 text-foreground-neutral-base tabular-nums">
+        Execution #{execution.sequence}
+      </span>
+      {execution.statusReason ? (
+        <Text as="span" size="xs" className="min-w-0 truncate text-foreground-neutral-muted">
+          · {execution.statusReason}
+        </Text>
+      ) : null}
+      <JobExecutionDuration
+        execution={execution}
+        className="shrink-0 font-code text-xs leading-20 text-foreground-neutral-muted tabular-nums"
+      />
+    </span>
+  );
+}
+
+function JobExecutionDuration({
+  execution,
+  className,
+}: {
+  execution: JobExecution;
+  className?: string | undefined;
+}) {
+  const duration = execution.displayDuration;
+  if (!duration) return null;
+
+  return (
+    <span className={className}>
+      <JobExecutionTimeText time={duration} />
+    </span>
+  );
+}

package/src/components/workflow-run-view/job-execution-time-text.tsx

@@ -0,0 +1,34 @@
+import {useTimeTick} from '@shipfox/react-ui/time-ticker';
+import {formatDuration} from '@shipfox/react-ui/utils';
+import type {JobExecutionTime} from '#core/workflow-run.js';
+
+export function JobExecutionTimeText({time}: {time: JobExecutionTime}) {
+  useTimeTick();
+
+  return formatJobExecutionTime(time);
+}
+
+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`;
+}

package/src/components/workflow-run-view/step-attempt-log-panel.test.tsx

@@ -0,0 +1,290 @@
+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 type {ReactNode} from 'react';
+import {inlineLogBody, outputLine} from '#test/fixtures/logs.js';
+import {StepAttemptLogPanel} from './step-attempt-log-panel.js';
+
+const STEP_ID = '99999999-9999-4999-8999-999999999999';
+type TestLogRecord = StepLogSnapshot['records'][number];
+
+function jsonResponse(body: unknown, init: ResponseInit = {}): Response {
+  return new Response(JSON.stringify(body), {
+    headers: {'content-type': 'application/json'},
+    status: 200,
+    ...init,
+  });
+}
+
+const outputRecord = (data: string, ts = 1): TestLogRecord => ({
+  v: 1,
+  ts,
+  type: 'output',
+  stream: 'stdout',
+  data,
+});
+
+function snapshot(records: TestLogRecord[]): StepLogSnapshot {
+  return {
+    records,
+    nextCursor: records.length,
+    source: 'inline',
+    state: 'closed',
+    complete: true,
+    hasMore: false,
+    truncated: false,
+    totalBytes: null,
+    expiresAt: null,
+  };
+}
+
+function renderPanel(
+  props: Partial<Parameters<typeof StepAttemptLogPanel>[0]> = {},
+  options: {queryClient?: QueryClient} = {},
+) {
+  const queryClient =
+    options.queryClient ??
+    new QueryClient({
+      defaultOptions: {queries: {retry: false}},
+    });
+  const wrapper = ({children}: {children: ReactNode}) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  return {
+    queryClient,
+    ...render(
+      <StepAttemptLogPanel stepId={STEP_ID} attempt={1} attemptStatus="running" {...props} />,
+      {wrapper},
+    ),
+  };
+}
+
+describe('StepAttemptLogPanel', () => {
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+    configureApiClient({baseUrl: '', fetchImpl: undefined});
+  });
+
+  test('waits for missing logs while the attempt is running', async () => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(async () => jsonResponse({code: 'not-found'}, {status: 404})),
+    });
+
+    const {container} = renderPanel();
+
+    expect(await screen.findByRole('status', {name: 'Waiting for logs'})).toBeInTheDocument();
+    expect(screen.queryByRole('log')).not.toBeInTheDocument();
+    expect(container.querySelector('[data-slot="log-rows"]')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
+  });
+
+  test('waits for missing logs on a terminal attempt until the stream appears', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse({code: 'not-found'}, {status: 404}))
+      .mockResolvedValueOnce(
+        jsonResponse(inlineLogBody(outputLine('eventual terminal logs\n'), 1)),
+      );
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl,
+    });
+
+    const {queryClient} = renderPanel({
+      attemptStatus: 'succeeded',
+      initialErrorRetryCount: 2,
+      initialErrorRetryDelayMs: 60_000,
+    });
+
+    expect(await screen.findByRole('status', {name: 'Waiting for logs'})).toBeInTheDocument();
+    await act(async () => {
+      await queryClient.refetchQueries({queryKey: stepLogsQueryKeys.detail(STEP_ID, 1)});
+    });
+    expect(await screen.findByText('eventual terminal logs')).toBeInTheDocument();
+    expect(screen.queryByText('Could not load logs.')).not.toBeInTheDocument();
+  });
+
+  test('settles a terminal missing log stream to no output instead of an error', async () => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(async () => jsonResponse({code: 'not-found'}, {status: 404})),
+    });
+
+    const {queryClient} = renderPanel({
+      attemptStatus: 'succeeded',
+      initialErrorRetryCount: 1,
+      initialErrorRetryDelayMs: 60_000,
+    });
+
+    expect(await screen.findByRole('status', {name: 'Waiting for logs'})).toBeInTheDocument();
+    await act(async () => {
+      await queryClient.refetchQueries({queryKey: stepLogsQueryKeys.detail(STEP_ID, 1)});
+    });
+    expect(await screen.findByText('Step produced no output')).toBeInTheDocument();
+    expect(screen.queryByText('Could not load logs.')).not.toBeInTheDocument();
+  });
+
+  test('keeps the log loading surface through transient initial server errors', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse({code: 'server-error'}, {status: 500}))
+      .mockResolvedValueOnce(jsonResponse(inlineLogBody(outputLine('eventual logs\n'), 1)));
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl,
+    });
+
+    const {container} = renderPanel({
+      attemptStatus: 'failed',
+      initialErrorRetryCount: 1,
+      initialErrorRetryDelayMs: 10,
+    });
+    expect(screen.getByRole('status', {name: 'Loading logs'})).toBeInTheDocument();
+    expect(screen.queryByRole('log')).not.toBeInTheDocument();
+    expect(container.querySelector('[data-slot="log-rows"]')).toHaveAttribute(
+      'aria-hidden',
+      'true',
+    );
+
+    expect(await screen.findByText('eventual logs')).toBeInTheDocument();
+    expect(screen.getByRole('log')).toBeInTheDocument();
+  });
+
+  test('shows a compact retry state after the initial error retry budget is exhausted', async () => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(async () => jsonResponse({code: 'server-error'}, {status: 500})),
+    });
+
+    renderPanel({attemptStatus: 'failed', initialErrorRetryCount: 1, initialErrorRetryDelayMs: 10});
+    expect(screen.getByRole('status', {name: 'Loading logs'})).toBeInTheDocument();
+
+    expect(await screen.findByText('Could not load logs.')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Retry'})).toBeInTheDocument();
+  });
+
+  test('renders loaded logs inline', async () => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(async () => jsonResponse(inlineLogBody(outputLine('hello\n'), 1))),
+    });
+
+    renderPanel({attemptStatus: 'succeeded'});
+
+    expect(await screen.findByText('hello')).toBeInTheDocument();
+  });
+
+  test('renders a terminal closed empty stream as no output', async () => {
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(async () => jsonResponse(inlineLogBody('', 0))),
+    });
+
+    renderPanel({attemptStatus: 'succeeded'});
+
+    expect(await screen.findByText('Step produced no output')).toBeInTheDocument();
+    expect(
+      screen.getByText('This log stream closed without session entries or process output.'),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(screen.getByRole('log')).toBeInTheDocument();
+  });
+
+  test('keeps stale logs visible when a refresh fails', async () => {
+    const fetchImpl = vi
+      .fn()
+      .mockResolvedValueOnce(jsonResponse(inlineLogBody(outputLine('first\n'), 1)))
+      .mockResolvedValueOnce(jsonResponse({code: 'server-error'}, {status: 500}));
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl});
+    const {queryClient} = renderPanel({attemptStatus: 'running'});
+    await screen.findByText('first');
+
+    await act(async () => {
+      await queryClient.refetchQueries({queryKey: stepLogsQueryKeys.detail(STEP_ID, 1)});
+    });
+
+    expect(screen.getByText('first')).toBeInTheDocument();
+    expect(await screen.findByText('Could not refresh logs.')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Retry'})).toBeInTheDocument();
+  });
+
+  test('does not follow new log output after the user scrolls away from the tail', async () => {
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+    configureApiClient({baseUrl: 'https://api.example.test', fetchImpl: vi.fn()});
+    const queryClient = new QueryClient({
+      defaultOptions: {queries: {retry: false, staleTime: Number.POSITIVE_INFINITY}},
+    });
+    const queryKey = stepLogsQueryKeys.detail(STEP_ID, 1);
+    queryClient.setQueryData(queryKey, snapshot([outputRecord('first\n')]));
+    renderPanel({attemptStatus: 'succeeded'}, {queryClient});
+    const logRows = await screen.findByRole('log');
+    Object.defineProperty(logRows, 'scrollHeight', {configurable: true, value: 600});
+    Object.defineProperty(logRows, 'clientHeight', {configurable: true, value: 200});
+    logRows.scrollTop = 320;
+    fireEvent.scroll(logRows);
+
+    act(() => {
+      queryClient.setQueryData(
+        queryKey,
+        snapshot([outputRecord('first\n'), outputRecord('second\n', 2)]),
+      );
+    });
+
+    await waitFor(() => expect(screen.getByText('second')).toBeInTheDocument());
+    expect(logRows.scrollTop).toBe(320);
+  });
+
+  test('passes failure anchoring for failed attempts', async () => {
+    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+      callback(0);
+      return 1;
+    });
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+      configurable: true,
+      value: scrollIntoView,
+    });
+    configureApiClient({
+      baseUrl: 'https://api.example.test',
+      fetchImpl: vi.fn(async () =>
+        jsonResponse(
+          inlineLogBody(
+            JSON.stringify({
+              v: 1,
+              ts: 1,
+              type: 'agent_session',
+              row: {
+                kind: 'message',
+                timestamp: 1,
+                role: 'assistant',
+                label: 'assistant',
+                meta: [],
+                text: 'I cannot continue.',
+                terminalFailure: true,
+              },
+            }),
+            1,
+          ),
+        ),
+      ),
+    });
+
+    renderPanel({attemptStatus: 'failed'});
+
+    expect(await screen.findByText('I cannot continue.')).toBeInTheDocument();
+    await waitFor(() => expect(scrollIntoView).toHaveBeenCalledWith({block: 'center'}));
+  });
+});

package/src/components/workflow-run-view/step-attempt-log-panel.tsx

@@ -0,0 +1,152 @@
+import {
+  isMissingStepLogStreamError,
+  LogView,
+  LogViewSkeleton,
+  useStepAttemptLogsQuery,
+} from '@shipfox/client-logs';
+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';
+
+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]';
+
+export interface StepAttemptLogPanelProps {
+  stepId: string;
+  attempt: number;
+  attemptStatus: string;
+  initialErrorRetryCount?: number | undefined;
+  initialErrorRetryDelayMs?: number | undefined;
+}
+
+export function StepAttemptLogPanel({
+  stepId,
+  attempt,
+  attemptStatus,
+  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);
+  const query = useStepAttemptLogsQuery(stepId, attempt, {
+    retryMissingStream,
+    missingStreamRetryCount,
+    missingStreamRetryDelayMs: initialErrorRetryDelayMs,
+    initialErrorRetryCount,
+    initialErrorRetryDelayMs,
+  });
+  const records = query.data?.records ?? [];
+  const recordCount = records.length;
+  const anchorToFailure = attemptStatus === 'failed';
+  const missingActiveStream =
+    retryMissingStream && query.data === undefined && isMissingStepLogStreamError(query.error);
+  const initialError = query.isError && query.data === undefined && !missingActiveStream;
+  const staleError = query.isError && query.data !== undefined;
+
+  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"]');
+      if (!scrollElement) return;
+      scrollElement.scrollTop = scrollElement.scrollHeight;
+    });
+
+    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;
+  }
+
+  if (query.isPending) {
+    return <StepLogsLoadingSurface label="Loading logs" />;
+  }
+
+  if (missingActiveStream) {
+    return <StepLogsLoadingSurface label="Waiting for logs" />;
+  }
+
+  if (initialError) {
+    return <StepLogsError retrying={query.isFetching} onRetry={() => void query.refetch()} />;
+  }
+
+  return (
+    <div ref={panelRef} 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">
+            <Text size="xs">Could not refresh logs.</Text>
+            <Button
+              type="button"
+              size="2xs"
+              variant="secondary"
+              isLoading={query.isFetching}
+              onClick={() => void query.refetch()}
+            >
+              Retry
+            </Button>
+          </div>
+        </Callout>
+      ) : null}
+      <LogView
+        records={records}
+        emptyState={query.data?.complete ? 'complete' : 'pending'}
+        anchorToFailure={anchorToFailure}
+        className={logSurfaceClasses}
+        onScroll={handleLogScroll}
+      />
+    </div>
+  );
+}
+
+function StepLogsLoadingSurface({label}: {label: string}) {
+  return (
+    <div role="status" aria-label={label}>
+      <LogViewSkeleton className={logSurfaceClasses} />
+    </div>
+  );
+}
+
+function scheduleAnimationFrame(callback: FrameRequestCallback): number {
+  if (typeof globalThis.requestAnimationFrame === 'function') {
+    return globalThis.requestAnimationFrame(callback);
+  }
+  return window.setTimeout(() => callback(Date.now()), 0);
+}
+
+function cancelScheduledFrame(frame: number) {
+  if (typeof globalThis.cancelAnimationFrame === 'function') {
+    globalThis.cancelAnimationFrame(frame);
+    return;
+  }
+  window.clearTimeout(frame);
+}
+
+function isTerminalAttemptStatus(status: string): boolean {
+  return status === 'succeeded' || status === 'failed' || status === 'cancelled';
+}
+
+function StepLogsError({retrying, onRetry}: {retrying: boolean; onRetry: () => void}) {
+  return (
+    <Callout role="alert" type="error" className="px-10 py-8">
+      <div className="flex min-w-0 flex-1 items-center justify-between gap-8">
+        <Text size="xs">Could not load logs.</Text>
+        <Button type="button" size="2xs" variant="secondary" isLoading={retrying} onClick={onRetry}>
+          Retry
+        </Button>
+      </div>
+    </Callout>
+  );
+}