Deploy status

A deployment the agent started: each step with its duration, a live log tail for the running step, the URL once it is ready, and Cancel, Redeploy or a rollback confirmed in place. Includes a one-line variant for chat.

Markdown

On this page

Queued, then install, build, test and deploy with the running step's log tailing live, then the preview URL.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/deploy-status.json

Usage

tsx

import { DeployStatus } from "@/components/ui/chatcn/deploy-status"

<DeployStatus
  status="building"
  environment="preview"
  commit="8f3c2a91d4be07c5a2e6f13b9d0c7e44a1b5f290"
  branch="feat/runs-pagination"
  startedAt={deploy.createdAt}
  steps={[
    { id: "install", name: "Install dependencies", status: "done", durationMs: 14200, log },
    { id: "build", name: "Build", status: "running", startedAt: build.startedAt, log: build.log },
    { id: "test", name: "Run tests", status: "queued" },
    { id: "deploy", name: "Deploy", status: "queued" },
  ]}
  onCancel={() => cancelDeploy(deploy.id)}
/>

Every prop is plain data from your deploy provider or the agent's tool output. Pass the whole log so far on each update: the running step tails it through AnsiOutput, which parses incrementally and sticks to the bottom until the reader scrolls up. Times tick once per second from startedAt, and finished steps show durationMs.

In a chat reply, a whole pipeline is often too much. DeployStatusInline takes the same props and renders one line: the status, a live counter or the URL, and Open or Redeploy.

tsx

import { DeployStatusInline } from "@/components/ui/chatcn/deploy-status"

<DeployStatusInline status="ready" url={deploy.url} />

Examples

Failed build

A failed step opens its log on its own, and errorText says what broke and how to fix it. With previousDeploy and onRollback, a failed deploy offers to roll back. The rollback asks once more in place, in the same footer: Cancel takes focus, and Escape backs out.

A type error stops the build. The failed step opens on its own, with Redeploy and a confirmed rollback.

States

Production deploys that are ready offer a rollback; previews never do. rollingBack keeps the button in place with a spinner while it runs. Without steps, the card is just the status and the commit.

Queued, canceled, production ready with rollback, rolling back and a deploy with no step detail.

Inline in a reply

One line per deploy for chat: building with a live counter, ready with the URL, failed with Redeploy.

Status

Status	Glyph and label
`queued`	Dashed circle, gray, Preview deploy queued. Cancel deploy
`building`	Spinner, blue, Building preview with a live total. Cancel deploy
`ready`	Check, green, Preview ready or Deployed to production, with the URL
`failed`	Cross, red, named after the failed step: Build failed. Redeploy
`canceled`	Stop, gray, Deploy canceled. Redeploy

Steps use the same glyphs with running, done, failed, canceled, plus queued (no label) and skipped.

Props

Prop	Type	Notes
`status`	`"queued" \| "building" \| "ready" \| "failed" \| "canceled"`	Required
`environment`	`"preview" \| "production"`	Defaults to `preview`
`commit`, `commitMessage`, `branch`	`string`	The sha shows as seven characters
`steps`	`DeployStep[]`	`{ id, name, status, durationMs?, startedAt?, log? }`
`url`	`string`	Shown with copy and open once `ready`
`startedAt`	`number`	Epoch ms. Drives the total while building
`durationMs`	`number`	Total run time. Defaults to the sum of the step durations
`errorText`	`ReactNode`	Shown when `failed`. Say how to fix it
`previousDeploy`	`{ commit, label? }`	What a rollback returns to
`onRollback`	`(previous) => void`	Called after the confirm step
`rollingBack`	`boolean`	Spinner on the rollback button
`onCancel`	`() => void`	Cancel deploy while queued or building
`onRetry`	`() => void`	Redeploy after a failure or cancel
`title`	`ReactNode`	Replaces the header label
`logMaxHeight`	`number \| string`	Height cap of the log tail. Defaults to 168
`actions`	`ReactNode`	Extra controls at the start of the footer
`variant`	`"card" \| "plain"`	`plain` sits inside a surface you already have

DeployStatusInline

Prop	Type	Notes
`status`, `environment`, `steps`, `url`, `startedAt`, `durationMs`, `branch`	As above	The running step names the line while building
`onRetry`	`() => void`	Shows a Redeploy icon button on failures
`onOpenDetails`	`() => void`	Makes the label a button, for example to open the pipeline
`title`	`ReactNode`	Replaces the label

Keyboard

Key	Action
`Tab`	Steps with a log, the URL, copy, open and the footer actions
`Enter`, `Space`	Open or close a step's log
`Escape`	Back out of the rollback confirmation, focus returns to Roll back

Accessibility

Status never rides on color: each glyph has a distinct shape and the header says it in words.
Steps are an ordered list. Each step button is named with its state, for example Build, failed.
The outcome is announced once through a polite live region, such as Preview ready at console-git-feat-runs-pagination.brightwell.dev. Ticks and log lines are never announced.
Logs are keyboard-scrollable regions labelled with the step name. Times are set in tabular figures and keep their reading order in right to left layouts.
The rollback confirm moves focus to Cancel, the least destructive choice. Buttons grow to 44 px on touch screens.

Motion

Status glyphs swap with the kit's 150 ms blur crossfade, so queued to ready reads as one object changing.
Step logs open and close with a 200 ms height and opacity transition; the running step opens itself and folds when it finishes.
Building preview is the one shimmer. Log lines append without any effect.
Under reduced motion the crossfade and height transitions are dropped and the spinner slows down.