@spunto/design-system 0.9.2 → 0.10.0

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

@@ -0,0 +1,139 @@
+"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[]
+  /**
+   * Both callbacks receive the tag *and* the resulting list. Persist `next` —
+   * recomputing it caller-side from a polled `worker.tags` silently drops any
+   * edit made since the last refetch (two tags added in a row, then one removed,
+   * and the second one disappears with it).
+   */
+  onAdd?: (tag: string, next: string[]) => void
+  onRemove?: (tag: string, next: 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)) {
+      const next = [...local, raw]
+      setLocal(next)
+      onAdd?.(raw, next)
+    }
+    setInput("")
+    setAdding(false)
+  }
+
+  function remove(tag: string) {
+    const next = local.filter((t) => t !== tag)
+    setLocal(next)
+    onRemove?.(tag, next)
+  }
+
+  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
+}

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

@@ -0,0 +1,345 @@
+"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. Both receive the
+   * tag *and* the resulting list — persist the list, don't recompute it from a
+   * polled `worker.tags` (see `TagChips`).
+   */
+  onAddTag?: (tag: string, next: string[]) => void
+  onRemoveTag?: (tag: string, next: 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"
+      // `@container`: every responsive rule below is a container query, never a
+      // viewport one. The same card is a half-width tile on a desktop grid and a
+      // full-width row on a phone — and a 290 px card in a sidebar on a 27"
+      // screen is exactly as cramped as a phone.
+      className={cn(
+        "@container 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">
+              {/* A worker name is one unbreakable token ("spunto-fix-tunnel-42"):
+                  without the cap it pushes the card wider than its column. */}
+              <span className="max-w-full truncate 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>
+
+            {/* Meta line. Each item carries its own leading separator instead of
+                the separators being siblings: this row wraps onto two lines as
+                soon as the card is narrow, and a sibling "·" then ends up
+                stranded at the end of a line, pointing at nothing. Attached to
+                the item, the worst case is a line that *starts* with "·", which
+                reads as a continuation. */}
+            <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
+              {creator && (
+                <MetaItem first>
+                  <CreatorAvatar creator={creator} />
+                  <span className="text-muted-foreground">{creator.name}</span>
+                </MetaItem>
+              )}
+              {nodeName && (
+                <MetaItem first={!creator}>
+                  <ServerIcon className="h-3 w-3 shrink-0" />
+                  <span className="truncate">{nodeName}</span>
+                </MetaItem>
+              )}
+              {worker.createdAt && (
+                <MetaItem first={!creator && !nodeName} title={new Date(worker.createdAt).toLocaleString()}>
+                  <ClockIcon className="h-3 w-3 shrink-0" />
+                  {formatRelativeTime(worker.createdAt)}
+                </MetaItem>
+              )}
+              {/* Only worth showing once it's over — during setup the live bar says it better. */}
+              {!status.settingUp && startupMs != null && (
+                <MetaItem title="Worker startup time (clone, features, postCreate…)">
+                  <TimerIcon className="h-3 w-3 shrink-0" />
+                  started in {formatDuration(startupMs)}
+                </MetaItem>
+              )}
+            </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">
+          {/* One span, not two children: the banner spreads its children apart,
+              and an icon pinned left with its own label pinned right reads as
+              two unrelated things. */}
+          <span className="flex min-w-0 items-center gap-2">
+            <WifiOffIcon className="h-3.5 w-3.5 shrink-0" />
+            Node offline
+          </span>
+        </Banner>
+      )}
+
+      {outdated && (
+        <Banner tone="warn">
+          <span className="flex min-w-0 flex-1 flex-wrap items-center gap-x-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">
+          {/* Two lines then ellipsis: on a phone a single truncated line of a
+              docker error is almost always cut before the useful part. */}
+          <span className="line-clamp-2 min-w-0 flex-1 font-mono break-words">{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>
+  )
+}
+
+/**
+ * One item of the meta line: creator, node, age, startup time.
+ *
+ * The separator is a `::before` on the item rather than a sibling element, so
+ * it can never be left behind at a line break. Below ~22 rem it disappears
+ * entirely: under ~26 rem the row is two lines deep anyway and the icons already tell
+ * the items apart, so the dots are pure noise there.
+ */
+function MetaItem({
+  first = false,
+  title,
+  children,
+}: {
+  first?: boolean
+  title?: string
+  children: ReactNode
+}) {
+  return (
+    <span
+      title={title}
+      className={cn(
+        "flex min-w-0 items-center gap-1 text-[11px] text-muted-foreground/60",
+        !first &&
+          "before:hidden before:text-muted-foreground/30 before:content-['·'] @min-[26rem]:before:mr-1 @min-[26rem]:before:inline"
+      )}
+    >
+      {children}
+    </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(
+        // No `flex-wrap`: the action (Rebuild, ✕) stays on the message's line
+        // whatever happens — wrapping it underneath reads as a second, unrelated
+        // control. The message shrinks and wraps internally instead.
+        "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>
+  )
+}