Async job / Run detail

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Distinguish queued, running, cancel requested, canceled, partially failed, and completed states. Show progress as the count of finished checks. Don't promise an estimated duration. Pair each step's status in the List with explicit actions to open and copy logs. Deliver updates manually in the example to inspect each state.

• Don't present a cancel request as a finished cancellation or a rollback. Report canceled only after the worker acknowledges it.
• Don't report a partial failure as success. Reuse a successful result only after checking its expiry and permissions.
• Don't expect the primitives to start the job or handle server permissions, idempotency, event ordering, reconnection, or persistence. The product owns them.
• The example uses fixed samples and sends no product requests.

Anatomy

Preview inputs → start / cancel / deliver controls → run identity + environment snapshot + status → completed check count → step list → selected logs

Keyboard and accessibility

• Starting the job moves focus to the cancel request button. Requesting cancellation moves focus to the confirm button.
• When the job ends, focus moves to the summary heading. Intermediate updates and opening logs don't move focus.
• A separate button copies the logs.
• Status is announced as text in role=status.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Progress, StatusBadge, List } from '@surflane/ui'

<Progress.Root value={finishedChecks} max={totalChecks}>
  <Progress.Label>Finished checks</Progress.Label>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress.Root>
<StatusBadge tone='caution'>Cancellation requested</StatusBadge>

// Accept updates only for the current run and delivery version.
// Cancellation is acknowledged by the worker before reporting canceled.
// Retry creates a new run; reused results retain their original identity.

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens