@spunto/design-system 0.13.0 → 0.14.0

package/README.md

@@ -120,14 +120,16 @@ panel are the same concept seen twice, so they share `/projects`.
   differently: `WorkerStatusDot`/`WorkerStatusPill` (+`resolveWorkerStatus`,
   `workerStatusConfig`), `SetupProgress` (+`setupProgress`, `phaseLabel`,
   `setupTotalMs`), `StepIndicator`, `ResourceBars`, `GitBranchChips`/
-  `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.
+  `GitStatusSummary`, `TagChips` (+`tagColor`), `CreatorAvatar`.
+- **One list of repositories, drawn as given.** `gitStatus` answers "what is
+  this worker working on", and the *tense* of that answer belongs to the caller:
+  the live checkout once it's known, the branches the worker was asked to check
+  out while it isn't (setup in flight, stopped worker). The card doesn't hold a
+  second, worker-level branch and doesn't decide when the list is meaningful —
+  only the caller knows whether its own data is still fresh. Keep the same
+  `path` for both tenses (Spunto clones into `/workspace/<workspacePath>`, which
+  is what `git-status` reports) and the transition is a value change on the same
+  chip.
 - **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.13.0",
+  "version": "0.14.0",
   "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

@@ -77,27 +77,6 @@ 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, RequestedBranchChip, repoName } from "./git-branch-chips"
-export type { GitBranchChipsProps, GitRepoStatus, GitStatusSummaryProps, RequestedBranchChipProps } from "./git-branch-chips"
+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"

package/src/components/workers/types.ts

@@ -31,12 +31,6 @@ 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, RequestedBranchChip, type GitRepoStatus } from "./git-branch-chips"
+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"
@@ -42,7 +42,14 @@ export interface WorkerCardProps {
   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. */
+  /**
+   * What this worker is working on, as one list of repositories — drawn as
+   * given. Which tense that list is in belongs to the caller: the live checkout
+   * once it's known, the branches the worker was *asked* to check out while it
+   * isn't (setup in flight, worker stopped). The card doesn't second-guess it,
+   * because only the caller knows whether its own data is still meaningful.
+   * 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
@@ -121,9 +128,10 @@ export function WorkerCard({
 
   // 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.
+  // that isn't usable yet. That guard is for `stats`, which the card reads as
+  // live-or-nothing; `gitStatus` is drawn as given (see the prop).
   const settled = status.running && !status.settingUp
-  const repos = settled ? (gitStatus ?? []) : []
+  const repos = gitStatus ?? []
   const outdated =
     !status.settingUp &&
     worker.projectVersion != null &&
@@ -209,16 +217,10 @@ 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 && (