@spunto/design-system 0.9.0 → 0.9.2

package/src/components/workers/worker-status.tsx

@@ -1,181 +0,0 @@
-// The single state → colours/label table both worker views read from.
-//
-// It used to live twice — `STATUS_CONFIG` in the dashboard and its hand-copied
-// twin in Spunto Lite — and the two had already drifted (different labels for
-// the same docker state, transient states handled in one and not the other).
-// This module is the union of both, plus the transient states (`pulling`,
-// `stopping`, `deleting`) that only ever existed as ad-hoc `if`s above the table.
-//
-// No "use client": pure functions and hookless components, so a React Server
-// Component can call them.
-
-import { cn } from "../../utils"
-import type { WorkerCardWorker } from "./types"
-
-export type WorkerStatusKey =
-  | "running"
-  | "stopped"
-  | "exited"
-  | "created"
-  | "not_found"
-  | "error"
-  | "pending"
-  | "setup"
-  | "pulling"
-  | "stopping"
-  | "deleting"
-
-export interface WorkerStatusConfig {
-  label: string
-  /** Class for the 8 px dot. */
-  dotClass: string
-  /** Classes for the rounded state pill (background + text + border). */
-  pillClass: string
-  /** Left border accent, for surfaces that stripe the card by state. */
-  accent: string
-}
-
-// Status semantics follow docs/design-system.md: green = running/healthy,
-// amber/yellow = in progress or warning, red = failure, neutral = idle. Errors
-// go through the `destructive` token rather than a raw red so they track the
-// theme; green/yellow have no token, so the Tailwind palette stays.
-const RUNNING: WorkerStatusConfig = {
-  label: "Running",
-  dotClass: "bg-green-500",
-  pillClass: "bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20",
-  accent: "border-l-green-500",
-}
-
-const IDLE: WorkerStatusConfig = {
-  label: "Stopped",
-  dotClass: "bg-muted-foreground/50",
-  pillClass: "bg-muted text-muted-foreground border-border",
-  accent: "border-l-border",
-}
-
-const BUSY: WorkerStatusConfig = {
-  label: "Starting…",
-  dotClass: "bg-yellow-400",
-  pillClass: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20",
-  accent: "border-l-yellow-400",
-}
-
-export const workerStatusConfig: Record<WorkerStatusKey, WorkerStatusConfig> = {
-  running: RUNNING,
-  stopped: IDLE,
-  exited: { ...IDLE, label: "Exited" },
-  created: { ...BUSY, label: "Created" },
-  not_found: {
-    label: "Not found",
-    dotClass: "bg-orange-400",
-    pillClass: "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20",
-    accent: "border-l-orange-400",
-  },
-  error: {
-    label: "Error",
-    dotClass: "bg-destructive",
-    pillClass: "bg-destructive/10 text-destructive border-destructive/20",
-    accent: "border-l-destructive",
-  },
-  pending: BUSY,
-  setup: { ...BUSY, label: "Setting up…" },
-  pulling: { ...BUSY, label: "Pulling image…" },
-  stopping: { ...BUSY, label: "Stopping…" },
-  deleting: { ...BUSY, label: "Deleting…" },
-}
-
-export interface WorkerStatus extends WorkerStatusConfig {
-  key: WorkerStatusKey
-  /** The worker is still being provisioned — the setup bar is the interesting part. */
-  settingUp: boolean
-  /** Container up and past its setup — stats, git chips and the pulsing dot apply. */
-  running: boolean
-}
-
-/** Lifecycle states that mean "not usable yet, a setup is in flight". */
-const SETUP_STATES = new Set(["provisioning", "starting", "setup"])
-
-/**
- * Worker snapshot → one status, tolerant of shapes it has never seen.
- *
- * Order matters: the *lifecycle* state wins whenever it describes an action in
- * flight (deleting, stopping, pulling, setting up), because docker still reports
- * the container as `running` throughout — showing "Running" while a worker is
- * being deleted is the bug this ordering exists to prevent. Past that, the
- * docker state is the truth. Apps with a single `state` field (Spunto Lite) fall
- * through to the last block, and anything unknown lands on `pending` rather than
- * throwing.
- */
-export function resolveWorkerStatus(worker: WorkerCardWorker): WorkerStatus {
-  const state = worker.state ?? null
-  const docker = worker.dockerState ?? null
-
-  const of = (key: WorkerStatusKey, flags?: Partial<Pick<WorkerStatus, "settingUp" | "running">>): WorkerStatus => ({
-    key,
-    ...workerStatusConfig[key],
-    settingUp: false,
-    running: key === "running",
-    ...flags,
-  })
-
-  if (state === "deleting") return of("deleting")
-  if (state === "stopping") return of("stopping")
-  if (state === "pulling") return of("pulling", { settingUp: true })
-  if (state && SETUP_STATES.has(state)) return of("setup", { settingUp: true })
-
-  if (docker && docker in workerStatusConfig) return of(docker as WorkerStatusKey)
-  if (docker) return of("pending")
-
-  // Single-`state` apps (Lite): no docker level to consult.
-  if (state === "ready") return of("running")
-  if (state === "error") return of("error")
-  if (state === "stopped") return of("stopped")
-  return of("pending")
-}
-
-/**
- * The 8 px state dot. It pings while the worker runs — the one animation on the
- * card, reserved for the one state where "it is alive right now" is the message.
- */
-export function WorkerStatusDot({
-  status,
-  className,
-}: {
-  status: WorkerStatus | WorkerStatusKey
-  className?: string
-}) {
-  const cfg = typeof status === "string" ? { ...workerStatusConfig[status], running: status === "running" } : status
-  return (
-    <span className={cn("relative flex h-2 w-2 shrink-0", className)}>
-      <span className={cn("h-2 w-2 rounded-full", cfg.dotClass)} />
-      {cfg.running && (
-        <span className="absolute inset-0 h-2 w-2 animate-ping rounded-full bg-green-500 opacity-50 motion-reduce:animate-none" />
-      )}
-    </span>
-  )
-}
-
-/** The state chip that sits next to the worker name. */
-export function WorkerStatusPill({
-  status,
-  label,
-  className,
-}: {
-  status: WorkerStatus | WorkerStatusKey
-  /** Overrides the table's label — e.g. a live setup phase instead of "Setting up…". */
-  label?: string
-  className?: string
-}) {
-  const cfg = typeof status === "string" ? workerStatusConfig[status] : status
-  return (
-    <span
-      className={cn(
-        "inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium leading-none",
-        cfg.pillClass,
-        className
-      )}
-    >
-      {label ?? cfg.label}
-    </span>
-  )
-}