@spunto/design-system 0.12.0 → 0.13.0

package/README.md

@@ -120,7 +120,14 @@ panel are the same concept seen twice, so they share `/projects`.
   differently: `WorkerStatusDot`/`WorkerStatusPill` (+`resolveWorkerStatus`,
   `workerStatusConfig`), `SetupProgress` (+`setupProgress`, `phaseLabel`,
   `setupTotalMs`), `StepIndicator`, `ResourceBars`, `GitBranchChips`/
-  `GitStatusSummary`, `TagChips` (+`tagColor`), `CreatorAvatar`.
+  `GitStatusSummary`/`RequestedBranchChip`, `TagChips` (+`tagColor`),
+  `CreatorAvatar`.
+- **What a worker is working on, in two tenses**: `gitStatus` is what it *did*
+  check out (a chip per repo) and `worker.branch` is what it was *asked* to
+  check out. The live status wins as soon as it exists; until then — during
+  setup, and on a stopped worker — the requested branch holds its place as a
+  lone chip (`RequestedBranchChip`), in the same shell so it reads as the same
+  kind of information.
 - **Types are structural**, never the apps' OpenAPI types: the dashboard and
   Spunto Lite model a worker differently, so `WorkerCardWorker` asks for the
   minimum, everything optional but `id`, and an unknown state falls back to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

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 && (