@spunto/design-system 0.9.0 → 0.9.2

package/src/components/workers/setup-progress.tsx

@@ -1,130 +0,0 @@
-// Worker setup, as a percentage and a sentence.
-//
-// The phase → percentage switch and the phase → label switch were written twice,
-// by hand, in two apps — and are the kind of thing that drifts silently (a phase
-// added on the agent side lands in one app's switch and not the other's). One
-// copy, here, plus the bar itself.
-//
-// Hookless, so it stays callable from a React Server Component.
-
-import { CheckIcon, CircleIcon, LoaderIcon } from "lucide-react"
-
-import { cn } from "../../utils"
-import type { WorkerSetupStatus } from "./types"
-
-/**
- * Setup completion, 0-100.
- *
- * The numbers are deliberately uneven: they're calibrated on how long each phase
- * actually takes, not on how many phases there are. Cloning gets a 30-point
- * span sub-divided by repository, because it's the phase where a user watches
- * the longest and the only one with real sub-progress to report.
- */
-export function setupProgress(status: WorkerSetupStatus | null | undefined): number {
-  if (!status) return 5
-  switch (status.phase) {
-    case "initializing": return 10
-    case "credentials": return 25
-    case "dotfiles": return 35
-    case "cloning": {
-      const repos = status.repos ?? []
-      const done = repos.filter((r) => r.state === "done").length
-      const total = repos.length || 1
-      return 40 + Math.round((done / total) * 30)
-    }
-    case "lifecycle": {
-      if (status.postCreate === "running") return 75
-      if (status.postCreate === "done" && status.postStart === "running") return 88
-      return 80
-    }
-    case "ready": return 100
-    case "error": return 100
-    default: return 5
-  }
-}
-
-/** Human phase label — the line printed above the bar. */
-export function phaseLabel(status: WorkerSetupStatus | null | undefined): string {
-  if (!status) return "Starting up…"
-  switch (status.phase) {
-    case "initializing": return "Starting up…"
-    case "credentials": return "Configuring credentials…"
-    case "dotfiles": return "Installing dotfiles…"
-    case "cloning": return "Cloning repositories…"
-    case "lifecycle":
-      if (status.postCreate === "running") return "Running post-create command…"
-      if (status.postStart === "running") return "Running post-start command…"
-      return "Running setup commands…"
-    case "ready": return "Ready"
-    case "error": return "Setup failed"
-    default: return "Setting up…"
-  }
-}
-
-/**
- * Total startup duration (ms) from the container-side phase timings, or null
- * when we can't bracket it — old or crashed workers have no `ready` stamp, and
- * an invented duration would be worse than no duration.
- */
-export function setupTotalMs(status: WorkerSetupStatus | null | undefined): number | null {
-  const t = status?.timings
-  if (!t || t.initializing == null || t.ready == null) return null
-  const d = t.ready - t.initializing
-  return d > 0 ? d : null
-}
-
-export interface SetupProgressProps {
-  status?: WorkerSetupStatus | null
-  /** Hides the phase line + percentage, keeping only the bar (table rows). */
-  barOnly?: boolean
-  className?: string
-}
-
-/** Phase label + percentage + the bar itself. Red as soon as the setup failed. */
-export function SetupProgress({ status, barOnly = false, className }: SetupProgressProps) {
-  const pct = setupProgress(status)
-  const failed = status?.phase === "error"
-
-  return (
-    <div className={cn("w-full", className)}>
-      {!barOnly && (
-        <div className="mb-1.5 flex items-center justify-between gap-2">
-          <span
-            className={cn(
-              "min-w-0 truncate font-mono text-[11px]",
-              failed ? "text-destructive" : "text-yellow-500 dark:text-yellow-400"
-            )}
-          >
-            {phaseLabel(status)}
-          </span>
-          <span className="shrink-0 font-mono text-[11px] tabular-nums text-muted-foreground">{pct}%</span>
-        </div>
-      )}
-      <div className="h-1 overflow-hidden rounded-full bg-muted">
-        <div
-          className={cn(
-            "h-full rounded-full transition-all duration-700 motion-reduce:transition-none",
-            failed ? "bg-destructive" : "bg-yellow-400"
-          )}
-          style={{ width: `${pct}%` }}
-        />
-      </div>
-    </div>
-  )
-}
-
-export type StepState = "pending" | "running" | "done" | "error"
-
-/**
- * The per-step bullet of a detailed setup view (one repository being cloned, a
- * lifecycle command running). Same four states, same four colours, everywhere.
- */
-export function StepIndicator({ state, className }: { state: StepState; className?: string }) {
-  const common = cn("h-3 w-3 shrink-0", className)
-
-  if (state === "running")
-    return <LoaderIcon className={cn(common, "animate-spin text-yellow-400 motion-reduce:animate-none")} />
-  if (state === "done") return <CheckIcon className={cn(common, "text-green-500")} />
-  if (state === "error") return <CircleIcon className={cn(common, "fill-destructive text-destructive")} />
-  return <CircleIcon className={cn(common, "text-muted-foreground/30")} />
-}

package/src/components/workers/tag-chips.tsx

@@ -1,132 +0,0 @@
-"use client"
-
-// Free-form worker tags, coloured by hash.
-//
-// Read-only by default (Spunto Lite's case). Pass `onAdd`/`onRemove` and the
-// chips grow a cross and a "+" button — the *persistence* stays with the caller,
-// this component only reports intent.
-
-import { useEffect, useRef, useState } from "react"
-import { PlusIcon, XIcon } from "lucide-react"
-
-import { cn } from "../../utils"
-import { tagColor } from "./tag-color"
-
-export interface TagChipsProps {
-  tags: string[]
-  /** Adding stays enabled while the caller persists — the chip is already there. */
-  onAdd?: (tag: string) => void
-  onRemove?: (tag: string) => void
-  /** Longest accepted tag; anything past it is truncated on commit. */
-  maxLength?: number
-  className?: string
-}
-
-export function TagChips({ tags, onAdd, onRemove, maxLength = 32, className }: TagChipsProps) {
-  const editable = !!(onAdd || onRemove)
-  // Local echo so a freshly typed tag appears instantly, resynced whenever the
-  // caller's list changes — the server's answer always wins in the end.
-  const [local, setLocal] = useState<string[]>(tags)
-  const [input, setInput] = useState("")
-  const [adding, setAdding] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // Compared by content, not by reference: callers routinely pass
-  // `worker.tags ?? []`, a fresh array on every poll, and swapping state for an
-  // identical list would re-render the whole card every few seconds.
-  useEffect(() => {
-    setLocal((prev) => (prev.length === tags.length && prev.every((t, i) => t === tags[i]) ? prev : tags))
-  }, [tags])
-
-  function commit() {
-    // Spaces and commas are the separators a user reflexively types; swallowing
-    // them here keeps "one chip = one word" true without an error message.
-    const raw = input.trim().replace(/,/g, "").slice(0, maxLength)
-    if (raw && !local.includes(raw)) {
-      setLocal([...local, raw])
-      onAdd?.(raw)
-    }
-    setInput("")
-    setAdding(false)
-  }
-
-  function remove(tag: string) {
-    setLocal(local.filter((t) => t !== tag))
-    onRemove?.(tag)
-  }
-
-  const shown = editable ? local : tags
-  if (!shown.length && !editable) return null
-
-  return (
-    <>
-      {shown.map((tag) => {
-        const c = tagColor(tag)
-        return (
-          <span
-            key={tag}
-            className={cn(
-              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium leading-none",
-              c.bg,
-              c.text,
-              c.border,
-              className
-            )}
-          >
-            {tag}
-            {onRemove && (
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  remove(tag)
-                }}
-                className="ml-0.5 cursor-pointer opacity-50 transition-opacity hover:opacity-100"
-                aria-label={`Remove tag ${tag}`}
-              >
-                <XIcon className="h-2.5 w-2.5" />
-              </button>
-            )}
-          </span>
-        )
-      })}
-
-      {onAdd &&
-        (adding ? (
-          <input
-            ref={inputRef}
-            autoFocus
-            value={input}
-            onChange={(e) => setInput(e.target.value.replace(/[\s,]/g, ""))}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault()
-                commit()
-              }
-              if (e.key === "Escape") {
-                setInput("")
-                setAdding(false)
-              }
-            }}
-            // Blur-commits rather than discards: clicking away after typing a
-            // tag reads as "done", never as "cancel".
-            onBlur={commit}
-            placeholder="tag…"
-            className="h-4 w-20 rounded-full border border-primary/40 bg-primary/5 px-2 text-[10px] text-primary outline-none focus:border-primary/60"
-          />
-        ) : (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation()
-              setAdding(true)
-            }}
-            className="inline-flex cursor-pointer items-center rounded-full border border-dashed border-border px-1.5 py-0.5 text-[10px] text-muted-foreground/50 transition-colors hover:border-border/80 hover:text-muted-foreground"
-            aria-label="Add tag"
-          >
-            <PlusIcon className="h-2.5 w-2.5" />
-          </button>
-        ))}
-    </>
-  )
-}

package/src/components/workers/tag-color.ts

@@ -1,28 +0,0 @@
-// Deterministic tag → pastel palette, split out of `tag-chips.tsx` (a "use client"
-// module) so it stays callable from a React Server Component and from plain
-// helpers — same reason `buttonVariants` has its own file.
-
-const TAG_PALETTES = [
-  { bg: "bg-orange-500/12", text: "text-orange-700 dark:text-orange-300", border: "border-orange-400/30" },
-  { bg: "bg-amber-500/12",  text: "text-amber-700 dark:text-amber-300",   border: "border-amber-400/30"  },
-  { bg: "bg-lime-500/12",   text: "text-lime-700 dark:text-lime-300",     border: "border-lime-400/30"   },
-  { bg: "bg-green-500/12",  text: "text-green-700 dark:text-green-300",   border: "border-green-400/30"  },
-  { bg: "bg-teal-500/12",   text: "text-teal-700 dark:text-teal-300",     border: "border-teal-400/30"   },
-  { bg: "bg-sky-500/12",    text: "text-sky-700 dark:text-sky-300",       border: "border-sky-400/30"    },
-  { bg: "bg-violet-500/12", text: "text-violet-700 dark:text-violet-300", border: "border-violet-400/30" },
-  { bg: "bg-pink-500/12",   text: "text-pink-700 dark:text-pink-300",     border: "border-pink-400/30"   },
-] as const
-
-export type TagPalette = (typeof TAG_PALETTES)[number]
-
-/**
- * Notion-style pastel picked from the tag's own characters, so the same tag is
- * the same colour on every card, in every app, forever — no palette state, no
- * assignment to persist. The classes are written out in full (never built by
- * string concatenation) so Tailwind's scanner can see them.
- */
-export function tagColor(tag: string): TagPalette {
-  let h = 0
-  for (let i = 0; i < tag.length; i++) h = (Math.imul(31, h) + tag.charCodeAt(i)) | 0
-  return TAG_PALETTES[Math.abs(h) % TAG_PALETTES.length]
-}

package/src/components/workers/types.ts

@@ -1,44 +0,0 @@
-// Structural, deliberately laxist shapes for everything worker-related.
-//
-// The design system must NOT import the OpenAPI-generated types of the Spunto
-// dashboard (nor Spunto Lite's): the two apps model a worker differently — the
-// dashboard has both a lifecycle `state` and a docker-level `dockerState`, Lite
-// has a single `state`; the dashboard's `name` is nullable and backed by an
-// `index`, Lite's is guaranteed. So the types below describe the *minimum* these
-// components read, every field optional, and the state resolution tolerates an
-// unknown value instead of crashing on it (see `resolveWorkerStatus`).
-
-/** Container-side setup progress, as reported by the worker agent. */
-export interface WorkerSetupStatus {
-  /** `initializing` | `credentials` | `dotfiles` | `cloning` | `lifecycle` | `ready` | `error`. */
-  phase?: string | null
-  repos?: { name?: string; state?: string | null }[] | null
-  postCreate?: string | null
-  postStart?: string | null
-  error?: string | null
-  /** Per-milestone start timestamps (epoch ms) — `initializing` → `ready` brackets the startup. */
-  timings?: Record<string, number> | null
-}
-
-/** The snapshot a `WorkerCard` draws. Everything but `id` is optional. */
-export interface WorkerCardWorker {
-  id: string
-  name?: string | null
-  /** Fallback identity when `name` is empty — renders as "Workspace #3". */
-  index?: number | null
-  /** Lifecycle state: `provisioning` | `pulling` | `starting` | `setup` | `ready` | `stopping` | `stopped` | `deleting` | `error`. */
-  state?: string | null
-  /** Docker-level state: `running` | `stopped` | `exited` | `created` | `not_found` | `error`. */
-  dockerState?: string | null
-  createdAt?: string | null
-  projectVersion?: number | null
-  tags?: string[] | null
-  setupStatus?: WorkerSetupStatus | null
-}
-
-/** Author of a worker — avatar + name, nothing else. */
-export interface WorkerCreator {
-  name: string
-  login?: string
-  avatarUrl?: string | null
-}

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

@@ -1,305 +0,0 @@
-"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>
-  )
-}