@spunto/design-system 0.11.1 → 0.13.0

package/src/components/projects/repository-list.tsx

@@ -0,0 +1,108 @@
+// The repositories a worker gets cloned into its `/workspace`.
+
+import { GitBranchIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { PublisherAvatar } from "../devcontainer/publisher-badge"
+import { githubAvatarUrl } from "../devcontainer/registry"
+import type { ProjectPanelRepository } from "./panel-types"
+
+/**
+ * Short, human name of a project repository.
+ *
+ * Deliberately *not* the `repoName` of `@spunto/design-system/workers`: that one
+ * names a **checkout** (it shortens a filesystem path), this one names a
+ * **remote** (a slug or a clone URL). The dashboard used to do
+ * `repo.project.split("/").pop()`, which mangles a SSH remote
+ * (`git@host:org/repo.git` has no `/` before `org`) and keeps the `.git`
+ * suffix; Lite's version handled both, so Lite's version is the one that
+ * survived here.
+ */
+export function projectRepoName(repo: ProjectPanelRepository): string {
+  const source = repo.cloneUrl || repo.project || repo.workspacePath
+  return source.split(/[/:]/).filter(Boolean).pop()?.replace(/\.git$/, "") ?? source
+}
+
+/** Full remote as displayed under the name — URL when there is one, slug otherwise. */
+export function projectRepoSource(repo: ProjectPanelRepository): string {
+  return repo.cloneUrl || repo.project || ""
+}
+
+/**
+ * GitHub owner behind a repository, when there is one.
+ *
+ * Same idea as `derivePublisher` for OCI refs: nothing in the payload names an
+ * owner, but the remote already does — `owner/repo`, `git@github.com:owner/repo.git`
+ * and `https://github.com/owner/repo` all say it, and `github.com/<owner>.png`
+ * turns it into an avatar without an API call. Anything else (a Gitea host, a
+ * bare slug with no owner) returns `undefined`, and the row keeps its git glyph
+ * rather than showing a stranger's face.
+ */
+export function projectRepoOwner(repo: ProjectPanelRepository): string | undefined {
+  const url = repo.cloneUrl?.trim()
+  if (url) {
+    const match = /^(?:git@|(?:ssh|git|https?):\/\/(?:[^@/]*@)?)github\.com[:/]+([^/]+)\/[^/]+$/i.exec(
+      url.replace(/\.git$/, "")
+    )
+    return match?.[1]
+  }
+  const slug = repo.project?.trim()
+  if (slug && !slug.includes(":") && slug.split("/").filter(Boolean).length === 2) return slug.split("/")[0]
+  return undefined
+}
+
+export interface RepositoryListProps {
+  repositories: ProjectPanelRepository[]
+  className?: string
+}
+
+/**
+ * One block per repository: short name, full remote, destination folder. All
+ * three lines truncate — a clone URL is a single unbreakable token and the panel
+ * is 288 px wide, so the alternative is a card that grows past its column.
+ */
+export function RepositoryList({ repositories, className }: RepositoryListProps) {
+  if (!repositories.length) return null
+
+  return (
+    <div data-slot="repository-list" className={cn("space-y-1.5", className)}>
+      {repositories.map((repo) => {
+        const source = projectRepoSource(repo)
+        const owner = projectRepoOwner(repo)
+        return (
+          <div key={repo.id} className="min-w-0 rounded-lg bg-muted/50 px-3 py-2">
+            <div className="mb-0.5 flex min-w-0 items-center gap-1.5">
+              {/* One fixed 14 px box whatever it holds — the two lines below are
+                  indented by exactly its width + the gap (`pl-5`), so an avatar
+                  and a git glyph leave the block aligned the same way. */}
+              <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+                {owner ? (
+                  <PublisherAvatar
+                    publisher={{ name: owner, login: owner, avatarUrl: githubAvatarUrl(owner) }}
+                    className="h-3.5 w-3.5"
+                  />
+                ) : (
+                  <GitBranchIcon className="h-3 w-3 text-primary" />
+                )}
+              </span>
+              <span className="min-w-0 truncate font-mono text-xs font-medium text-foreground/90">
+                {projectRepoName(repo)}
+              </span>
+            </div>
+            {source && (
+              <p title={source} className="truncate pl-5 font-mono text-[11px] text-muted-foreground/70">
+                {source}
+              </p>
+            )}
+            <p
+              title={`/workspace/${repo.workspacePath}`}
+              className="truncate pl-5 font-mono text-[11px] text-muted-foreground/50"
+            >
+              → /workspace/{repo.workspacePath}
+            </p>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/projects/version-history.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronDownIcon, HistoryIcon, RotateCcwIcon } from "lucide-react"
+
+import { cn, formatShortDate } from "../../utils"
+import { RegistryRef } from "../devcontainer/registry-ref"
+import { Eyebrow } from "./panel-section"
+import type { ProjectVersionEntry } from "./panel-types"
+
+export interface VersionHistoryProps {
+  versions: ProjectVersionEntry[]
+  /** Which entry is the live config — gets the "current" badge, loses Restore. */
+  currentVersion?: number
+  /**
+   * Restoring is a mutation, so it stays the app's. The callback gets the whole
+   * entry because the two APIs address a version differently: the dashboard by
+   * `id`, Lite by `version`.
+   */
+  onRestore?: (version: ProjectVersionEntry) => void
+  /** Id of the entry being restored → spinner on that row, others disarmed. */
+  restoringVersionId?: string | null
+  /** Inline error above the list (the dashboard shows it here; Lite toasts). */
+  error?: string | null
+  defaultOpen?: boolean
+  title?: string
+  className?: string
+}
+
+/**
+ * Collapsed-by-default history of the project's config versions.
+ *
+ * The open/closed state is local on purpose: it is UX, not data — nothing
+ * outside needs to know, and hoisting it would make every consumer carry a
+ * `useState` for it. `defaultOpen` covers the one case where it matters (a
+ * showcase, a deep link).
+ */
+export function VersionHistory({
+  versions,
+  currentVersion,
+  onRestore,
+  restoringVersionId,
+  error,
+  defaultOpen = false,
+  title = "Version history",
+  className,
+}: VersionHistoryProps) {
+  const [open, setOpen] = useState(defaultOpen)
+  if (!versions.length) return null
+
+  const restoring = restoringVersionId != null
+
+  return (
+    <div data-slot="version-history" className={className}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="flex w-full cursor-pointer items-center justify-between gap-2 text-left"
+      >
+        <Eyebrow icon={<HistoryIcon className="h-3 w-3" />}>{title}</Eyebrow>
+        <ChevronDownIcon
+          className={cn("h-3 w-3 shrink-0 text-muted-foreground/50 transition-transform", open && "rotate-180")}
+        />
+      </button>
+
+      {open && (
+        <div className="mt-2 space-y-1">
+          {error && <p className="mb-2 text-xs text-destructive">{error}</p>}
+          {versions.map((v) => {
+            const isCurrent = currentVersion != null && v.version === currentVersion
+            return (
+              <div
+                key={v.id}
+                className={cn(
+                  "flex items-center justify-between gap-2 rounded-lg px-2.5 py-2",
+                  isCurrent ? "border border-primary/20 bg-primary/5" : "bg-muted/40"
+                )}
+              >
+                <div className="min-w-0">
+                  <div className="flex items-center gap-1.5">
+                    <span className="font-mono text-xs font-semibold">v{v.version}</span>
+                    {isCurrent && (
+                      <span className="inline-flex h-4 shrink-0 items-center rounded-full border border-primary/30 bg-primary/10 px-1.5 text-[9px] leading-none text-primary">
+                        current
+                      </span>
+                    )}
+                  </div>
+                  <p className="mt-0.5 truncate text-[10px] text-muted-foreground/60">
+                    {formatShortDate(v.createdAt, { time: true })}
+                  </p>
+                  {/* Same reference treatment as the Image section: registry
+                      dimmed, `name:tag` kept whole — that's the half that tells
+                      two versions apart. */}
+                  {v.image && <RegistryRef value={v.image} className="max-w-full" />}
+                </div>
+                {!isCurrent && onRestore && (
+                  <button
+                    type="button"
+                    title="Restore this version"
+                    disabled={restoring}
+                    onClick={() => onRestore(v)}
+                    className="ml-2 flex shrink-0 cursor-pointer items-center gap-1 text-[10px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
+                  >
+                    <RotateCcwIcon className={cn("h-3 w-3", restoringVersionId === v.id && "animate-spin")} />
+                    Restore
+                  </button>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -35,6 +35,14 @@ export function repoName(repo: GitRepoStatus): string {
   return repo.name ?? repo.path.split("/").filter(Boolean).pop() ?? repo.path
 }
 
+/**
+ * `max-w-full` is what keeps a chip inside the card: without it a long
+ * "repo · branch" is a single unbreakable row that runs under the card's
+ * rounded edge and gets clipped.
+ */
+const CHIP =
+  "inline-flex min-w-0 max-w-full items-center gap-1 rounded-md border border-border bg-muted/40 px-2 py-0.5 font-mono text-[11px] text-muted-foreground"
+
 /** 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
@@ -52,13 +60,7 @@ export function GitBranchChips({ repos, repoHref, className }: GitBranchChipsPro
             key={repo.path}
             {...(href ? { href, target: "_blank", rel: "noopener noreferrer" } : {})}
             title={repo.path}
-            // `max-w-full` is what keeps a chip inside the card: without it a
-            // long "repo · branch" is a single unbreakable row that runs under
-            // the card's rounded edge and gets clipped.
-            className={cn(
-              "inline-flex min-w-0 max-w-full 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"
-            )}
+            className={cn(CHIP, href && "transition-colors hover:border-border/80 hover:bg-muted/70")}
           >
             <span className="shrink-0 font-medium text-foreground/70">{repoName(repo)}</span>
             <span className="mx-0.5 shrink-0 text-muted-foreground/40">·</span>
@@ -75,6 +77,27 @@ export function GitBranchChips({ repos, repoHref, className }: GitBranchChipsPro
   )
 }
 
+export interface RequestedBranchChipProps {
+  branch: string
+  className?: string
+}
+
+/**
+ * The branch a worker was *asked* to check out, as a lone chip — no repo name,
+ * because at that point nothing is cloned yet and there is none to show. Same
+ * shell as the chips above on purpose: it's the placeholder they replace once
+ * the live status arrives, and a different-looking chip would read as a
+ * different kind of information.
+ */
+export function RequestedBranchChip({ branch, className }: RequestedBranchChipProps) {
+  return (
+    <span data-slot="requested-branch-chip" className={cn(CHIP, className)} title={`Requested branch: ${branch}`}>
+      <GitBranchIcon className="h-2.5 w-2.5 shrink-0" />
+      <span className="min-w-0 truncate">{branch}</span>
+    </span>
+  )
+}
+
 /** Amber for local work not yet committed/pushed, muted for what's merely behind. */
 function RepoCounters({ repo }: { repo: GitRepoStatus }) {
   return (

package/src/components/workers/index.ts

@@ -18,8 +18,8 @@ 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 { GitBranchChips, GitStatusSummary, RequestedBranchChip, repoName } from "./git-branch-chips"
+export type { GitBranchChipsProps, GitRepoStatus, GitStatusSummaryProps, RequestedBranchChipProps } from "./git-branch-chips"
 
 export { TagChips } from "./tag-chips"
 export type { TagChipsProps } from "./tag-chips"

package/src/components/workers/types.ts

@@ -31,6 +31,12 @@ export interface WorkerCardWorker {
   /** Docker-level state: `running` | `stopped` | `exited` | `created` | `not_found` | `error`. */
   dockerState?: string | null
   createdAt?: string | null
+  /**
+   * Branch asked for at creation — what the worker is *going to* check out. The
+   * live per-repo status (`gitStatus`) says what it *did* check out, and takes
+   * over as soon as it exists.
+   */
+  branch?: string | null
   projectVersion?: number | null
   tags?: string[] | null
   setupStatus?: WorkerSetupStatus | null

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

@@ -14,7 +14,7 @@ import {
 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 { GitBranchChips, RequestedBranchChip, type GitRepoStatus } from "./git-branch-chips"
 import { ResourceBars, type WorkerStats } from "./resource-bars"
 import { SetupProgress, setupTotalMs } from "./setup-progress"
 import { TagChips } from "./tag-chips"
@@ -209,10 +209,16 @@ export function WorkerCard({
         </div>
       )}
 
-      {repos.length > 0 && (
+      {repos.length > 0 ? (
         <div className="px-4 pb-3">
           <GitBranchChips repos={repos} repoHref={repoHref} />
         </div>
+      ) : (
+        worker.branch && (
+          <div className="px-4 pb-3">
+            <RequestedBranchChip branch={worker.branch} />
+          </div>
+        )
       )}
 
       {settled && stats && (

package/src/utils.ts

@@ -23,6 +23,28 @@ export function formatRelativeTime(date: string | number | Date): string {
   return `${Math.floor(hours / 24)}d ago`
 }
 
+/**
+ * Short absolute date, French style: "12 mars 2026", or "12 mars 14:03" with
+ * `time`.
+ *
+ * The one date formatter of the package — both project panels used to call
+ * `toLocaleDateString("fr-FR", …)` inline, in four places, with two different
+ * option sets that had to be kept in sync by hand. The rendering is unchanged;
+ * `locale` exists for the day the product stops being French-only.
+ */
+export function formatShortDate(
+  date: string | number | Date,
+  { time = false, locale = "fr-FR" }: { time?: boolean; locale?: string } = {}
+): string {
+  const ms = date instanceof Date ? date.getTime() : new Date(date).getTime()
+  if (!Number.isFinite(ms)) return ""
+  return new Date(ms).toLocaleDateString(locale, {
+    day: "numeric",
+    month: "short",
+    ...(time ? { hour: "2-digit", minute: "2-digit" } : { year: "numeric" }),
+  })
+}
+
 /** 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`