Deployment Control Hero

1"use client";
2 
3import * as React from "react";
4import { motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import { useControllableState, useReducedMotion } from "@/lib/motiq";
8 
9import {
10  EnvironmentSwitcher,
11  type Environment,
12} from "@/components/motiq/environment-switcher";
13import {
14  DeploymentPipeline,
15  type Stage,
16  type StageStatus,
17} from "@/components/motiq/deployment-pipeline";
18import {
19  LiveLogStream,
20  type LogEntry,
21  type LogLevel,
22  type LogStreamStatus,
23} from "@/components/motiq/live-log-stream";
24import {
25  ApiRequestInspector,
26  type ApiRequest,
27  type ApiResponse,
28  type AuthSummary,
29  type InspectorState,
30} from "@/components/motiq/api-request-inspector";
31 
32/**
33 * DeploymentControlHero — an editable hero for developer-tool and infrastructure
34 * products. A wide copy band (eyebrow + headline + copy + two CTAs + live status)
35 * sits above a full-width release-console window that composes four released
36 * developer-tools components — an EnvironmentSwitcher (the selected target), a
37 * DeploymentPipeline (four clear stages), one short LiveLogStream, and one
38 * ApiRequestInspector (the release request/result). Once the console is wide
39 * enough the surface tiles into two columns (target + pipeline + logs · release
40 * response) so the hero holds a calm height. It is a hero framing of a real
41 * workflow, not a crammed dashboard.
42 *
43 * Layout is driven by CONTAINER queries, not viewport breakpoints: the root
44 * declares `@container/hero`, the release console declares `@container/console`,
45 * and each composed component declares its own. A hero rendered in a 782px
46 * content column of a 1440px page therefore lays out like a 782px hero — the
47 * copy band stays stacked, the console stays single-column, and the panels get
48 * the full column width instead of two ~311px slivers.
49 *
50 * IMPORTANT — DEMO ONLY. Nothing here talks to a real provider. The repo,
51 * branch, commit, host, release id, headers, and timings are all fictional and
52 * provider-neutral (repo `orbit/checkout-web`, host `api.orbit-deploy.dev`,
53 * release `rel_4Xa9`). Credential headers are pre-masked placeholders
54 * (`Bearer ••••••`) and the inspector redacts them anyway.
55 *
56 * Determinism: no `Date.now()` / `Math.random()` / `new Date()` at module scope,
57 * during render, or in state initializers. Every timestamp derives from a fixed
58 * baseline, so the server- and client-rendered first paint are identical. The
59// … truncated