Deployment Pipeline

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import { useReducedMotion, useVisibilityPause } from "@/lib/motiq";
8 
9/**
10 * DeploymentPipeline — an accessible, reduced-motion-safe visualization of a
11 * CI/CD deployment run: ordered stages, per-stage status, live emphasis on the
12 * running stage, expandable logs, durations, and a Retry affordance on
13 * failed/cancelled stages.
14 *
15 * This component is display-only: it never talks to a deployment provider. The
16 * host application owns the pipeline data and passes it in via `stages`, and
17 * decides what `onRetry` does. Clean-room original.
18 */
19 
20export type StageStatus =
21  | "queued"
22  | "running"
23  | "passed"
24  | "failed"
25  | "cancelled"
26  | "skipped";
27 
28export interface Stage {
29  /** Stable identifier, unique within the pipeline. */
30  id: string;
31  /** Human label, e.g. "Build". */
32  name: string;
33  status: StageStatus;
34  /** Wall-clock duration in milliseconds, if known. */
35  durationMs?: number;
36  /** Console lines for this stage, revealed when the row is expanded. */
37  logs?: string[];
38}
39 
40export interface DeploymentPipelineProps {
41  /** The ordered stages of the run (controlled by the host application). */
42  stages: Stage[];
43  /** Called with a stage id when its Retry control is activated. */
44  onRetry?: (stageId: string) => void;
45  /** Id of a stage whose logs start expanded. */
46  defaultExpandedId?: string;
47  /** Accessible name for the pipeline list. */
48  label?: string;
49  className?: string;
50}
51 
52interface StatusMeta {
53  /** Short text label, announced to assistive tech alongside the icon. */
54  label: string;
55  /** CSS custom property that tints this status. */
56  color: string;
57  /** Whether this status offers a Retry control. */
58  retryable: boolean;
59}
60 
61// Semantic status tokens (no obsolete fallbacks — the tokens exist). Status is
62// always icon + label, never color alone.
63const STATUS: Record<StageStatus, StatusMeta> = {
64  queued: { label: "Queued", color: "var(--color-neutral, var(--color-muted))", retryable: false },
65  running: { label: "Running", color: "var(--color-accent)", retryable: false },
66  passed: { label: "Passed", color: "var(--color-success)", retryable: false },
67  failed: { label: "Failed", color: "var(--color-error)", retryable: true },
68  cancelled: { label: "Cancelled", color: "var(--color-neutral, var(--color-muted))", retryable: true },
69// … truncated