@spunto/design-system 0.7.2 → 0.9.0

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

@@ -0,0 +1,305 @@
+"use client"
+
+import type { ReactNode } from "react"
+import {
+  AlertTriangleIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  ServerIcon,
+  TimerIcon,
+  WifiOffIcon,
+  XIcon,
+} from "lucide-react"
+
+import { cn, formatDuration, formatRelativeTime } from "../../utils"
+import { buttonVariants } from "../button-variants"
+import { CreatorAvatar } from "./creator-avatar"
+import { GitBranchChips, type GitRepoStatus } from "./git-branch-chips"
+import { ResourceBars, type WorkerStats } from "./resource-bars"
+import { SetupProgress, setupTotalMs } from "./setup-progress"
+import { TagChips } from "./tag-chips"
+import type { WorkerCardWorker, WorkerCreator } from "./types"
+import { WorkerStatusDot, WorkerStatusPill, resolveWorkerStatus } from "./worker-status"
+
+/** Renders the "View" affordance. A slot, so the package never imports `next/link`. */
+export type LinkRender = (props: { href: string; className?: string; children: ReactNode }) => ReactNode
+
+export interface WorkerCardProps {
+  worker: WorkerCardWorker
+
+  /** Target of the title + footer button. Omitted → the card isn't a link. */
+  href?: string
+  /**
+   * Escape hatches for app-specific rendering. `link` receives `{ href, className,
+   * children }` and must return an anchor-ish node (`next/link`, a router link…);
+   * without it the card falls back to a plain `<a>`.
+   */
+  render?: { link?: LinkRender }
+
+  creator?: WorkerCreator
+  nodeName?: string
+  /** `false` draws the "Node offline" banner. `undefined` = unknown, no banner. */
+  nodeOnline?: boolean
+  /** Live container stats. Absent → no resource bars (the usual case for a stopped worker). */
+  stats?: WorkerStats | null
+  /** Checked-out repositories. Absent/empty → no chips. */
+  gitStatus?: GitRepoStatus[] | null
+  /** Chip → URL (e.g. code-server at that folder). Returning undefined renders a static chip. */
+  repoHref?: (repo: GitRepoStatus) => string | undefined
+
+  /** Tags are read-only unless at least one of these is given. */
+  onAddTag?: (tag: string) => void
+  onRemoveTag?: (tag: string) => void
+
+  /** Project's current config version — a worker below it gets the "Rebuild" banner. */
+  currentProjectVersion?: number
+  onRebuild?: () => void
+  rebuilding?: boolean
+
+  /** Error banner inside the card (a failed mutation, typically). */
+  error?: string | null
+  onDismissError?: () => void
+
+  /** The `⋯` menu, top-right. A slot: every entry in it calls the API. */
+  actions?: ReactNode
+  /** Replaces the default "View" footer entirely (extra buttons, a VS Code link…). */
+  footer?: ReactNode
+  /** Label of the default footer button. */
+  viewLabel?: string
+
+  className?: string
+}
+
+/**
+ * One worker, as a card: state, who spawned it, where it runs, what it's working
+ * on, and what you can do with it.
+ *
+ * **Purely presentational.** It receives a snapshot and draws it — no query, no
+ * mutation, no router. Everything that would talk to an API is a slot
+ * (`actions`, `footer`) or a callback (`onAddTag`, `onRebuild`…). That rule is
+ * what makes the same card renderable by the dashboard, by Spunto Lite, and by
+ * the showcase with hand-written fixtures. The card is the assembly; each brick
+ * (`WorkerStatusDot`, `SetupProgress`, `ResourceBars`, `GitBranchChips`,
+ * `TagChips`) is exported on its own because the table view needs them without
+ * the card.
+ *
+ * The layout is a fixed sequence of optional bands — header, setup bar, git
+ * chips, resource bars, banners, footer — and each band disappears when its data
+ * is absent, so a stopped worker collapses to a two-line card without any
+ * caller-side conditional.
+ */
+export function WorkerCard({
+  worker,
+  href,
+  render,
+  creator,
+  nodeName,
+  nodeOnline,
+  stats,
+  gitStatus,
+  repoHref,
+  onAddTag,
+  onRemoveTag,
+  currentProjectVersion,
+  onRebuild,
+  rebuilding = false,
+  error,
+  onDismissError,
+  actions,
+  footer,
+  viewLabel = "View",
+  className,
+}: WorkerCardProps) {
+  const status = resolveWorkerStatus(worker)
+  const setup = worker.setupStatus ?? null
+  const startupMs = setupTotalMs(setup)
+  const title = worker.name || (worker.index != null ? `Workspace #${worker.index}` : worker.id)
+
+  // Live detail is only meaningful once the container is up *and* done setting
+  // up: mid-setup a stale "running" from docker would show stats for a worker
+  // that isn't usable yet.
+  const settled = status.running && !status.settingUp
+  const repos = settled ? (gitStatus ?? []) : []
+  const outdated =
+    !status.settingUp &&
+    worker.projectVersion != null &&
+    currentProjectVersion != null &&
+    worker.projectVersion < currentProjectVersion
+
+  const Link: LinkRender =
+    render?.link ?? (({ href: to, className: cls, children }) => <a href={to} className={cls}>{children}</a>)
+
+  return (
+    <div
+      data-slot="worker-card"
+      className={cn("overflow-hidden rounded-xl border border-border bg-card transition-colors hover:shadow-sm", className)}
+    >
+      {/* ── Header : état, nom, pills, tags, méta ── */}
+      <div className="flex items-start justify-between gap-3 px-4 pt-3.5 pb-3">
+        <div className="flex min-w-0 items-start gap-3">
+          <WorkerStatusDot status={status} className="mt-1" />
+
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-sm leading-none font-semibold">{title}</span>
+              <WorkerStatusPill status={status} />
+              {worker.projectVersion != null && (
+                <span className="inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5 font-mono text-[10px] leading-none text-muted-foreground">
+                  v{worker.projectVersion}
+                </span>
+              )}
+              <TagChips tags={worker.tags ?? []} onAdd={onAddTag} onRemove={onRemoveTag} />
+            </div>
+
+            <div className="mt-1.5 flex flex-wrap items-center gap-2">
+              {creator && (
+                <span className="flex items-center gap-1.5">
+                  <CreatorAvatar creator={creator} />
+                  <span className="text-[11px] text-muted-foreground">{creator.name}</span>
+                </span>
+              )}
+              {nodeName && (
+                <>
+                  <Dot />
+                  <span className="flex items-center gap-1 text-[11px] text-muted-foreground/60">
+                    <ServerIcon className="h-3 w-3" />
+                    {nodeName}
+                  </span>
+                </>
+              )}
+              {worker.createdAt && (
+                <>
+                  {creator || nodeName ? <Dot /> : null}
+                  <span
+                    className="flex items-center gap-1 text-[11px] text-muted-foreground/60"
+                    title={new Date(worker.createdAt).toLocaleString()}
+                  >
+                    <ClockIcon className="h-3 w-3" />
+                    {formatRelativeTime(worker.createdAt)}
+                  </span>
+                </>
+              )}
+              {/* Only worth showing once it's over — during setup the live bar says it better. */}
+              {!status.settingUp && startupMs != null && (
+                <>
+                  <Dot />
+                  <span
+                    className="flex items-center gap-1 text-[11px] text-muted-foreground/60"
+                    title="Worker startup time (clone, features, postCreate…)"
+                  >
+                    <TimerIcon className="h-3 w-3" />
+                    started in {formatDuration(startupMs)}
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {actions}
+      </div>
+
+      {status.settingUp && (
+        <div className="px-4 pb-3">
+          <SetupProgress status={setup} />
+        </div>
+      )}
+
+      {repos.length > 0 && (
+        <div className="px-4 pb-3">
+          <GitBranchChips repos={repos} repoHref={repoHref} />
+        </div>
+      )}
+
+      {settled && stats && (
+        <div className="px-4 pb-3">
+          <ResourceBars stats={stats} />
+        </div>
+      )}
+
+      {nodeOnline === false && (
+        <Banner tone="offline">
+          <WifiOffIcon className="h-3.5 w-3.5 shrink-0" />
+          Node offline
+        </Banner>
+      )}
+
+      {outdated && (
+        <Banner tone="warn">
+          <span className="flex min-w-0 items-center gap-1.5">
+            <AlertTriangleIcon className="h-3.5 w-3.5 shrink-0" />
+            Config <span className="font-mono font-semibold">v{worker.projectVersion}</span> → project at{" "}
+            <span className="font-mono font-semibold">v{currentProjectVersion}</span>
+          </span>
+          {onRebuild && (
+            <button
+              type="button"
+              disabled={rebuilding}
+              onClick={onRebuild}
+              className="shrink-0 cursor-pointer text-[11px] font-medium hover:underline disabled:opacity-50"
+            >
+              {rebuilding ? "Rebuilding…" : "Rebuild"}
+            </button>
+          )}
+        </Banner>
+      )}
+
+      {error && (
+        <Banner tone="error">
+          <span className="truncate font-mono">{error}</span>
+          {onDismissError && (
+            <button
+              type="button"
+              onClick={onDismissError}
+              aria-label="Dismiss error"
+              className="shrink-0 cursor-pointer opacity-60 transition-opacity hover:opacity-100"
+            >
+              <XIcon className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </Banner>
+      )}
+
+      {(footer ?? href) && (
+        <div className="border-t border-border/50 bg-muted/20 px-3 py-2">
+          {footer ?? (
+            <Link href={href!} className={cn(buttonVariants({ variant: "default", size: "sm" }), "h-7 w-full gap-1.5 text-xs")}>
+              {viewLabel}
+              <ChevronRightIcon className="h-3.5 w-3.5" />
+            </Link>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** The faint separator between two meta items. */
+function Dot() {
+  return <span className="text-[11px] text-muted-foreground/30">·</span>
+}
+
+/**
+ * The card's inline bands. Warm tones = something to know (an unreachable node,
+ * a stale config), red = something went wrong. They keep the card's horizontal
+ * margin so they read as *inside* the card, not as a strip glued across it.
+ */
+const BANNER_TONES = {
+  /** Infrastructure problem — orange, one notch louder than a stale config. */
+  offline: "border-orange-500/25 bg-orange-500/5 text-orange-600 dark:text-orange-400",
+  warn: "border-amber-500/25 bg-amber-500/5 text-amber-600 dark:text-amber-400",
+  error: "border-destructive/25 bg-destructive/5 text-destructive",
+} as const
+
+function Banner({ tone, children }: { tone: keyof typeof BANNER_TONES; children: ReactNode }) {
+  return (
+    <div
+      className={cn(
+        "mx-4 mb-3 flex items-center justify-between gap-2 rounded-lg border px-3 py-2 text-xs",
+        BANNER_TONES[tone]
+      )}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,181 @@
+// 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>
+  )
+}

package/src/index.ts

@@ -1,9 +1,13 @@
 // @spunto/design-system — shared UI primitives, helpers, and color constants.
 // Tokens ship as a CSS file: `import "@spunto/design-system/styles.css"`.
 
-export { cn } from "./utils"
+export { cn, formatDuration, formatRelativeTime } from "./utils"
 export * from "./colors"
 
+// Domain (Spunto-specific) components live behind their own entry point —
+// `@spunto/design-system/workers` — so this root stays domain-free primitives.
+// See README § "Domain components".
+
 export { Button } from "./components/button"
 // `buttonVariants` is exported from its own directive-free module (not through the
 // "use client" button.tsx) so it stays callable from React Server Components.
@@ -26,6 +30,11 @@ export { Avatar, AvatarImage, AvatarFallback } from "./components/avatar"
 export { Terminal } from "./components/terminal"
 export type { TerminalHandle, TerminalProps, TerminalOptions } from "./components/terminal"
 
+// Docker image pull as a real UI (one segmented bar, one block per layer) —
+// presentational only: give it a snapshot, it draws it.
+export { ImagePull } from "./components/image-pull"
+export type { ImagePullProps, ImagePullState, PullLayer, PullLayerStatus } from "./components/image-pull"
+
 // Inline, declarative status banner (persistent) — the counterpart to `toast()`.
 // `alertVariants` ships from this directive-free module so it stays RSC-callable.
 export { Alert, AlertTitle, AlertDescription, alertVariants } from "./components/alert"

package/src/utils.ts

@@ -5,3 +5,26 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/**
+ * Coarse "3h ago" stamp — minutes, then hours, then days. Deliberately not a
+ * live-ticking relative time: every surface using it (worker cards, tables)
+ * already re-renders on its own polling cadence, and a second timer per row
+ * would cost more than the precision is worth.
+ */
+export function formatRelativeTime(date: string | number | Date): string {
+  const ms = date instanceof Date ? date.getTime() : new Date(date).getTime()
+  if (!Number.isFinite(ms)) return ""
+  const minutes = Math.floor((Date.now() - ms) / 60_000)
+  if (minutes < 1) return "just now"
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  return `${Math.floor(hours / 24)}d ago`
+}
+
+/** Short duration, one significant decimal under 10 s ("840ms", "4.2s", "38s"). */
+export function formatDuration(ms: number): string {
+  if (ms >= 1000) return `${(ms / 1000).toFixed(ms >= 10_000 ? 0 : 1)}s`
+  return `${Math.max(0, Math.round(ms))}ms`
+}

package/styles.css

@@ -493,3 +493,23 @@
 @media (prefers-reduced-motion: reduce) {
   [data-slot="toast"] { transition-duration: 0.01ms; }
 }
+
+/* ---------------------------------------------------------------------------
+   ImagePull — indeterminate sweep.
+   Used by the `starting` state (registry contacted, no layer announced yet) and
+   by any layer still moving without a known size: there's no honest fraction to
+   fill, so the surface sweeps instead of inventing one.
+--------------------------------------------------------------------------- */
+@keyframes spunto-pull-sweep {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(400%); }
+}
+[data-slot="image-pull-sweep"] {
+  animation: spunto-pull-sweep 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* No sweep, no gliding segment widths — the bar still reads, it just stops moving. */
+  [data-slot="image-pull-sweep"] { animation: none; opacity: 0.45; }
+  [data-slot="image-pull"] * { transition-duration: 0.01ms !important; }
+}