@spunto/design-system 0.12.0 → 0.13.1

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.1",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

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

@@ -130,10 +130,15 @@ export function RepoList({
   return (
     <div className={cn("@container/repos space-y-2", className)}>
       {repos.length > 0 && (
-        <div className="mb-1 hidden grid-cols-[1fr_1fr_auto] gap-2 px-1 text-xs text-muted-foreground @min-[30rem]/repos:grid">
-          <span>Repository</span>
-          <span>Workspace path</span>
-          <span />
+        // The header mirrors the ROW's flex rules rather than being a grid of
+        // its own — the rows stopped being a grid when they had to wrap on a
+        // phone, and a grid header over flex rows puts every label next to the
+        // wrong field. `size-8` spacer = the width of the row's icon button.
+        <div className="mb-1 hidden gap-2 px-1 text-xs text-muted-foreground @min-[34rem]/repos:flex">
+          <span className="min-w-0 flex-1">Repository</span>
+          <span className="min-w-0 flex-1">Workspace path</span>
+          <span className="min-w-0 flex-1 @min-[30rem]/repos:max-w-[9rem]">Branch</span>
+          <span className="size-8 shrink-0" />
         </div>
       )}
 
@@ -194,6 +199,17 @@ export function RepoList({
             onChange={(e) => patch(repo.id, { workspacePath: e.target.value, workspacePathTouched: true })}
           />
 
+          <Input
+            placeholder="default"
+            aria-label="Branch"
+            title="Branch checked out when a worker clones this repo — empty for the remote's default branch"
+            // Narrower than the other two and last to get space: a branch name
+            // is short, and "default" is the answer most rows keep.
+            className="min-w-0 flex-1 font-mono text-xs @min-[30rem]/repos:max-w-[9rem]"
+            value={repo.branch ?? ""}
+            onChange={(e) => patch(repo.id, { branch: e.target.value })}
+          />
+
           <Button
             type="button"
             variant="ghost"
@@ -235,7 +251,8 @@ export function RepoList({
       </div>
 
       <p className="text-xs text-muted-foreground">
-        Cloned into <code>/workspace/&lt;path&gt;</code> at worker startup.{" "}
+        Cloned into <code>/workspace/&lt;path&gt;</code> at worker startup, on the branch set here (empty = the
+        remote&apos;s default).{" "}
         {connectUrl &&
           (github?.connected ? (
             <a href={connectUrl} className="underline underline-offset-2">

package/src/components/projects/types.ts

@@ -27,6 +27,13 @@ export interface ProjectRepo {
   installationId?: number
   /** Raw clone URL, `git` provider only. */
   cloneUrl?: string
+  /**
+   * Branch checked out when a worker clones this repo. Empty/absent = the
+   * remote's default — which is why it's a plain optional string and not a
+   * required field with a magic "main" default: we don't know the remote's
+   * default, and guessing it wrong is worse than deferring to it.
+   */
+  branch?: string
 }
 
 /** A devcontainer feature, as the form carries it. */

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