Developer Tools Pack

1"use client";
2 
3import * as React from "react";
4import { motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import { 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 InspectorState,
29  type AuthSummary,
30} from "@/components/motiq/api-request-inspector";
31 
32/**
33 * DeploymentCommandCenter — a composed, app-controlled "deploy console" block
34 * that wires four presentation-only developer-tools components together behind a
35 * single small demo state machine: an EnvironmentSwitcher in the top bar, a
36 * DeploymentPipeline as the main column, a LiveLogStream beneath it, and an
37 * ApiRequestInspector in the side panel.
38 *
39 * IMPORTANT — DEMO ONLY. Nothing here talks to a real deployment provider. Every
40 * repo, endpoint, id, header, and timing is fictional and provider-neutral
41 * (repo `acme/ledger-web`, host `api.acme-deploy.dev`). Credential headers are
42 * pre-masked placeholders (`Bearer ••••••`) and the inspector redacts them
43 * anyway. The block only feeds the components a scripted request/response/log
44 * timeline in response to its own controls — it is a copy-paste starting point
45 * you rewire to your real backend.
46 *
47 * Determinism: no `Date.now()` / `Math.random()` / `new Date()` runs during
48 * render, initializers, or module scope. Timestamps derive from a fixed
49 * baseline; the run only advances inside timers/handlers. Clean-room original.
50 */
51 
52/* -------------------------------------------------------------------------- */
53/* Fixed, deterministic demo timeline                                          */
54/* -------------------------------------------------------------------------- */
55 
56// A fixed baseline so the server-rendered first paint is deterministic. Handlers
57// advance a step counter from here — never wall-clock now().
58const BASE_TS = 1_700_000_000_000;
59 
60type StageId = "build" | "test" | "deploy" | "promote";
61 
62const STAGE_PLAN: { id: StageId; name: string; durationMs: number }[] = [
63  { id: "build", name: "Build", durationMs: 42_100 },
64  { id: "test", name: "Test", durationMs: 18_400 },
65// … truncated