DeployView

Code

import { DeployView } from "@fadymondy/nasaq/web";export function Deploy() {  return (    <DeployView      title="Deploy api to production"      meta="main · 4f2a91c"      steps={[        { id: "install", name: "Install", command: "pnpm install", status: "success", durationMs: 8200 },        { id: "build", name: "Build", command: "pnpm build", status: "running", startedAt: Date.now() - 4000, logs: "compiling..." },        { id: "ship", name: "Release", status: "pending" },      ]}      onRetry={async (id) => {}}    />  );}

Server Tools · stable

Live examples and controls: DeployView in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/deploy-view.json

Shows one deploy or pipeline run. The header has the title, meta (commit, branch, who), an overall status badge, the total duration and a progress bar. Under it, each step has a status icon that differs by shape (not just colour), the step name, its command, and a duration that counts up while it runs. A step opens to show its logs (ANSI colours allowed) which follow the newest line while it runs, and a failed step shows its error and a Retry button. Presentational: you update steps as the pipeline advances and handle onRetry and onCancel.

When to useCopy Anchor Link

• Deploys, CI runs, migrations, installs: any ordered list of steps with output.

When not to useCopy Anchor Link

• Free-form output: use Terminal.
• A searchable stream: use LogViewer.
• A user-facing checklist: use a stepper or CheckoutSteps.

ImportCopy Anchor Link

import { DeployView } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { DeployView } from "@fadymondy/nasaq/web";

export function Deploy() {
  return (
    <DeployView
      title="Deploy api to production"
      meta="main · 4f2a91c"
      steps={[
        { id: "install", name: "Install", command: "pnpm install", status: "success", durationMs: 8200 },
        { id: "build", name: "Build", command: "pnpm build", status: "running", startedAt: Date.now() - 4000, logs: "compiling..." },
        { id: "ship", name: "Release", status: "pending" },
      ]}
      onRetry={async (id) => {}}
    />
  );
}

AnatomyCopy Anchor Link

DeployView      data-slot="deploy-view"          <section>
├─ header       data-slot="deploy-view-header"   title, meta, status badge, duration, cancel, progress
└─ steps        data-slot="deploy-view-steps"    <ol>
   └─ step      data-slot="deploy-step"          <li> Collapsible: icon, name, command, duration, chevron
      ├─ error  (Alert)                          when failed
      ├─ logs   data-slot="deploy-step-logs"     ANSI text, follows the tail while running
      └─ retry  (Button)                         when failed and onRetry is set

APICopy Anchor Link

Helpers: deriveStatus, stepDuration, totalDuration, formatDuration, tailLines, completedCount.

ExamplesCopy Anchor Link

RetryCopy Anchor Link

<DeployView steps={steps} onRetry={async (id) => { const r = await api.retry(id); return r.ok ? undefined : { error: r.message }; }} />

AccessibilityCopy Anchor Link

• Each step trigger is a button with aria-expanded and a name that includes the status text.
• Status is text and shape, never colour alone. The overall status is a badge with text.
• The step list is an ordered list. Running durations update once a second, not through a live region.

RTL & i18nCopy Anchor Link

• Commands and logs are dir="ltr" inside Arabic pages; step names, status text and buttons follow the page.
• The chevron mirrors. Durations use Latin digits with translated units (1m 04s / 1د 04ث).
• Built-in Arabic strings; override with labels.

Styling & tokensCopy Anchor Link

• Status colours: text-nq-success-text, -danger-text, -warning-text, -info-text, text-muted-foreground. Logs on bg-nq-surface-soft.
• Slots: deploy-view, deploy-view-header, deploy-view-steps, deploy-step, deploy-step-logs. data-status on each step.

Do / Don'tCopy Anchor Link

• Do send startedAt for running steps so the duration is accurate after a refresh.
• Do return { error } from onRetry instead of throwing.
• Don't put secrets in logs; mask them at the source.
• Don't reorder steps while running.

RelatedCopy Anchor Link

• Terminal · LogViewer · Progress · Collapsible

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-server-tools-deploy-view--docs