@spunto/design-system 0.7.2 → 0.9.0

package/src/components/workers/git-branch-chips.tsx

@@ -0,0 +1,120 @@
+// "repo · branch +3" chips — what a worker is actually working on.
+//
+// The dashboard's version shows the modified count; Lite's also shows ahead /
+// behind. This is the union: every counter is rendered only when the caller
+// supplies it, so neither app has to send a field it doesn't have.
+
+import { ArrowDownIcon, ArrowUpIcon, ExternalLinkIcon, GitBranchIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+
+export interface GitRepoStatus {
+  /** Absolute path of the checkout inside the worker — also the React key. */
+  path: string
+  branch?: string | null
+  /** Display name; defaults to the last segment of `path`. */
+  name?: string
+  /** Uncommitted files. */
+  modified?: number
+  /** Commits ahead of / behind the upstream branch. */
+  ahead?: number
+  behind?: number
+}
+
+export interface GitBranchChipsProps {
+  repos: GitRepoStatus[]
+  /**
+   * Chip → URL. A slot, not a link component: the design system knows nothing
+   * about code-server URLs, and returning `undefined` renders a plain span.
+   */
+  repoHref?: (repo: GitRepoStatus) => string | undefined
+  className?: string
+}
+
+export function repoName(repo: GitRepoStatus): string {
+  return repo.name ?? repo.path.split("/").filter(Boolean).pop() ?? repo.path
+}
+
+/** One chip per checked-out repository, wrapping onto as many lines as needed. */
+export function GitBranchChips({ repos, repoHref, className }: GitBranchChipsProps) {
+  if (!repos.length) return null
+
+  return (
+    <div data-slot="git-branch-chips" className={cn("flex flex-wrap gap-1.5", className)}>
+      {repos.map((repo) => {
+        const href = repoHref?.(repo)
+        const Tag = href ? "a" : "span"
+        return (
+          <Tag
+            key={repo.path}
+            {...(href ? { href, target: "_blank", rel: "noopener noreferrer" } : {})}
+            title={repo.path}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md border border-border bg-muted/40 px-2 py-0.5 font-mono text-[11px] text-muted-foreground",
+              href && "transition-colors hover:border-border/80 hover:bg-muted/70"
+            )}
+          >
+            <span className="font-medium text-foreground/70">{repoName(repo)}</span>
+            <span className="mx-0.5 text-muted-foreground/40">·</span>
+            <GitBranchIcon className="h-2.5 w-2.5 shrink-0" />
+            <span className="max-w-[120px] truncate">{repo.branch || "—"}</span>
+            <RepoCounters repo={repo} />
+            {href && <ExternalLinkIcon className="ml-0.5 h-2.5 w-2.5 opacity-40" />}
+          </Tag>
+        )
+      })}
+    </div>
+  )
+}
+
+/** Amber for local work not yet committed/pushed, muted for what's merely behind. */
+function RepoCounters({ repo }: { repo: GitRepoStatus }) {
+  return (
+    <>
+      {!!repo.modified && <span className="ml-0.5 text-amber-500 dark:text-amber-400">+{repo.modified}</span>}
+      {!!repo.ahead && (
+        <span className="ml-0.5 inline-flex items-center text-amber-500 dark:text-amber-400">
+          <ArrowUpIcon className="h-2.5 w-2.5" />
+          {repo.ahead}
+        </span>
+      )}
+      {!!repo.behind && (
+        <span className="ml-0.5 inline-flex items-center text-muted-foreground/70">
+          <ArrowDownIcon className="h-2.5 w-2.5" />
+          {repo.behind}
+        </span>
+      )}
+    </>
+  )
+}
+
+export interface GitStatusSummaryProps {
+  repos: GitRepoStatus[]
+  /** Heading above the list — e.g. "Open in VS Code" inside a tooltip. */
+  title?: string
+  className?: string
+}
+
+/**
+ * The same information as the chips, stacked one repo per line. Meant for the
+ * inside of a tooltip or a popover, where chips would wrap badly — the tooltip
+ * itself stays the app's business (the design system doesn't decide what opens
+ * it).
+ */
+export function GitStatusSummary({ repos, title, className }: GitStatusSummaryProps) {
+  if (!repos.length) return null
+
+  return (
+    <span data-slot="git-status-summary" className={cn("flex flex-col gap-1", className)}>
+      {title && <span className="text-[10px] uppercase tracking-wide opacity-60">{title}</span>}
+      {repos.map((repo) => (
+        <span key={repo.path} className="flex items-center gap-1.5">
+          <span className="font-medium">{repoName(repo)}</span>
+          <GitBranchIcon className="h-3 w-3 opacity-60" />
+          <span className="font-mono">{repo.branch || "—"}</span>
+          <RepoCounters repo={repo} />
+        </span>
+      ))}
+    </span>
+  )
+}

package/src/components/workers/index.ts

@@ -0,0 +1,35 @@
+// @spunto/design-system/workers — Spunto's *domain* components.
+//
+// Deliberately a sub-export rather than part of the main entry: the root of the
+// package stays "primitives with no domain" (a Button knows nothing about a
+// worker), and a third party consuming the design system never has to carry the
+// notion of a worker. New business components go here — see the README's
+// "Domain components" section for the rule.
+
+export { WorkerCard } from "./worker-card"
+export type { WorkerCardProps, LinkRender } from "./worker-card"
+
+export { WorkerStatusDot, WorkerStatusPill, resolveWorkerStatus, workerStatusConfig } from "./worker-status"
+export type { WorkerStatus, WorkerStatusConfig, WorkerStatusKey } from "./worker-status"
+
+export { SetupProgress, StepIndicator, phaseLabel, setupProgress, setupTotalMs } from "./setup-progress"
+export type { SetupProgressProps, StepState } from "./setup-progress"
+
+export { ResourceBars } from "./resource-bars"
+export type { ResourceBarsProps, WorkerStats } from "./resource-bars"
+
+export { GitBranchChips, GitStatusSummary, repoName } from "./git-branch-chips"
+export type { GitBranchChipsProps, GitRepoStatus, GitStatusSummaryProps } from "./git-branch-chips"
+
+export { TagChips } from "./tag-chips"
+export type { TagChipsProps } from "./tag-chips"
+export { tagColor } from "./tag-color"
+export type { TagPalette } from "./tag-color"
+
+export { CreatorAvatar } from "./creator-avatar"
+
+export type { WorkerCardWorker, WorkerCreator, WorkerSetupStatus } from "./types"
+
+// Re-exported here too so a consumer of the worker surface doesn't have to
+// import the root entry just to format the timestamps it feeds these components.
+export { cn, formatDuration, formatRelativeTime } from "../../utils"

package/src/components/workers/resource-bars.tsx

@@ -0,0 +1,100 @@
+// CPU + memory of a running container, as two thin bars.
+//
+// Written identically in the dashboard's card and its table row — the `compact`
+// flag is the only thing that ever differed between the two copies.
+
+import type { ReactNode } from "react"
+import { CpuIcon, MemoryStickIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+
+export interface WorkerStats {
+  cpuPercent: number
+  memUsageMb: number
+  memLimitMb?: number
+  memPercent?: number
+}
+
+export interface ResourceBarsProps {
+  stats: WorkerStats
+  /** Drops the framed panel — just the two bars, for a table cell or a tooltip. */
+  compact?: boolean
+  className?: string
+}
+
+/** Past this, the bar turns red: the container is about to be the problem. */
+const DANGER = 80
+
+export function ResourceBars({ stats, compact = false, className }: ResourceBarsProps) {
+  const cpu = stats.cpuPercent ?? 0
+  const mem = stats.memPercent ?? 0
+
+  return (
+    <div
+      data-slot="resource-bars"
+      className={cn(
+        "grid grid-cols-2 gap-3",
+        !compact && "rounded-lg border border-border/40 bg-muted/20 px-3 py-2.5",
+        className
+      )}
+    >
+      <Metric
+        icon={<CpuIcon className="h-3 w-3" />}
+        label="CPU"
+        value={`${cpu.toFixed(1)}%`}
+        valueClass={cpu > DANGER ? "text-orange-500 dark:text-orange-400" : "text-foreground/70"}
+        percent={cpu}
+        // Flame for CPU, Build amber for memory: two bars side by side need to be
+        // told apart at a glance, and both hues already mean "compute" here.
+        barClass={cpu > DANGER ? "bg-destructive" : "bg-primary"}
+      />
+      <Metric
+        icon={<MemoryStickIcon className="h-3 w-3" />}
+        label="Memory"
+        value={
+          <>
+            {(stats.memUsageMb ?? 0).toFixed(0)}
+            <span className="text-muted-foreground/50"> MB</span>
+          </>
+        }
+        valueClass="text-foreground/70"
+        percent={mem}
+        barClass={mem > DANGER ? "bg-destructive" : "bg-build"}
+      />
+    </div>
+  )
+}
+
+function Metric({
+  icon,
+  label,
+  value,
+  valueClass,
+  percent,
+  barClass,
+}: {
+  icon: ReactNode
+  label: string
+  value: ReactNode
+  valueClass: string
+  percent: number
+  barClass: string
+}) {
+  return (
+    <div>
+      <div className="mb-1.5 flex items-center justify-between">
+        <span className="flex items-center gap-1 text-[11px] text-muted-foreground">
+          {icon}
+          {label}
+        </span>
+        <span className={cn("font-mono text-[11px] tabular-nums", valueClass)}>{value}</span>
+      </div>
+      <div className="h-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn("h-full rounded-full transition-all duration-500 motion-reduce:transition-none", barClass)}
+          style={{ width: `${Math.min(Math.max(percent, 0), 100)}%` }}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,130 @@
+// 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

@@ -0,0 +1,132 @@
+"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

@@ -0,0 +1,28 @@
+// 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

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