@spunto/design-system 0.23.0 → 0.25.0

package/README.md

@@ -312,9 +312,24 @@ hand-typed reference that degrades cleanly.
   secrets") instead of showing a bare chevron, and the form opens it by itself
   when any of those sections already has a value — so editing a project never
   hides a setting you made earlier.
+- **Git hosting is a list of providers, not GitHub** (0.21.0). `gitProviders`
+  (id, name, `connected`, `accounts`, `installUrl`, `operations`, `icon`) and
+  `gitRepos` (each tagged with its `provider`) replace `githubRepos` / `github` /
+  `connectUrl` / `githubIcon`, and `ProjectRepo.provider` widens from
+  `"github" | "git"` to a `string` — the set of forges belongs to the deployment,
+  not to this package. The component reads `operations` to decide what to offer
+  rather than branching on a provider id, so a second forge needs no change here.
+  `"git"` (exported as `RAW_GIT`) still means "a raw clone URL", which is the
+  *absence* of a provider rather than one more of them.
+- **One "Add repository" button, with no brand on it.** The forge is a property
+  of the repository you pick, not a decision to make before you know which
+  repository you want — so the field offers every connected provider's repos at
+  once and `renderRepoField`'s `onChange(value, option?)` hands back the chosen
+  entry, which is how the row learns its provider. A brand glyph on a generic
+  button is wrong as soon as two providers are connected.
 - **Nothing fetches.** Catalogs come in as data, the marketplace search is
-  `onSearchExtensions`, the GitHub combobox is `renderRepoField` (without it: a
-  plain `<input list>` + `<datalist>`, no dependency, keyboard-friendly), and
+  `onSearchExtensions`, the repository combobox is `renderRepoField` (without it:
+  a plain `<input list>` + `<datalist>`, no dependency, keyboard-friendly), and
   `extras` slips app-specific content *inside* a section — the deploy key card,
   a warning — without forking the component.
 - **Its bricks, exported individually**: `FormSection`, `Field`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",
@@ -61,7 +61,8 @@
     "README.md"
   ],
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
     "@xterm/addon-fit": "^0.11.0",
@@ -81,8 +82,13 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "typescript": "^5"
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^28.0.0",
+    "typescript": "^5",
+    "vitest": "^4.1.11"
   }
 }

package/src/components/projects/index.ts

@@ -39,7 +39,7 @@ export { BuildManifest } from "./build-manifest"
 export type { BuildManifestProps, ManifestRow } from "./build-manifest"
 
 export { RepoList, deriveFromGitUrl } from "./repo-list"
-export type { RepoListProps, GithubRepoOption, GithubConnection, RepoFieldRender } from "./repo-list"
+export type { RepoListProps, GitRepoOption, GitProvider, RepoFieldRender } from "./repo-list"
 
 export { SecretList } from "./secret-list"
 export type { SecretListProps } from "./secret-list"

package/src/components/projects/project-form.tsx

@@ -23,7 +23,7 @@ import { ImagePicker, type ImagePickerProps } from "./image-picker"
 import { AdvancedDisclosure, advancedSummary } from "./advanced-sections"
 import { BuildManifest, type ManifestRow } from "./build-manifest"
 import { Field, FormSection, type SectionAccent } from "./form-section"
-import { RepoList, type GithubConnection, type GithubRepoOption, type RepoFieldRender } from "./repo-list"
+import { RepoList, type GitProvider, type GitRepoOption, type RepoFieldRender } from "./repo-list"
 import { SecretList } from "./secret-list"
 import {
   CREATE_SECTIONS,
@@ -115,12 +115,12 @@ export interface ProjectFormProps<TValue extends ProjectFormValue = ProjectFormV
   /** Same passthrough for the feature catalog. */
   featurePicker?: Pick<FeaturePickerProps, "layout" | "detail">
 
-  githubRepos?: GithubRepoOption[]
-  github?: GithubConnection
-  connectUrl?: string
+  /** Providers that can host repositories for this org (RFC 0023 — whatever implements git). */
+  gitProviders?: GitProvider[]
+  /** Repositories reachable across every connected provider, each tagged with its provider. */
+  gitRepos?: GitRepoOption[]
   /** App-level combobox for the repo field; without it, a plain input + datalist. */
   renderRepoField?: RepoFieldRender
-  githubIcon?: ReactNode
 
   /** Searches Open VSX (or any marketplace). Absent → extensions are typed by hand. */
   onSearchExtensions?: (query: string) => Promise<VscodeExtensionEntry[]>
@@ -194,11 +194,9 @@ export function ProjectForm<TValue extends ProjectFormValue = ProjectFormValue>(
   features = [],
   imagePicker,
   featurePicker,
-  githubRepos,
-  github,
-  connectUrl,
+  gitProviders,
+  gitRepos,
   renderRepoField,
-  githubIcon,
   onSearchExtensions,
   savedSecrets,
   extras,
@@ -370,11 +368,9 @@ export function ProjectForm<TValue extends ProjectFormValue = ProjectFormValue>(
           <RepoList
             repos={value.repositories}
             onChange={(repositories) => patch({ repositories })}
-            githubRepos={githubRepos}
-            github={github}
-            connectUrl={connectUrl}
+            gitProviders={gitProviders}
+            gitRepos={gitRepos}
             renderRepoField={renderRepoField}
-            githubIcon={githubIcon}
           />
         )
 

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

@@ -0,0 +1,192 @@
+/**
+ * Row identity in the repository list.
+ *
+ * The bug this exists for: adding two repositories and picking one made **both** rows change.
+ * Every field in this list is addressed by row id, so anything that lets two rows share one — or
+ * that re-keys a row mid-edit — silently edits the wrong repository. jsdom is enough to catch it,
+ * which matters because the browser path needs a Chrome this sandbox cannot always start.
+ */
+import { describe, it, expect } from "vitest"
+import { useState } from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { RepoList } from "./repo-list"
+import type { ProjectRepo } from "./types"
+
+const PROVIDERS = [
+  { id: "github", name: "GitHub", connected: true, operations: ["listRepos", "cloneCredential"] },
+  { id: "gitlab", name: "GitLab", connected: true, operations: ["listRepos", "cloneCredential"] },
+]
+const REPOS = [
+  { provider: "github", fullName: "acme/alpha" },
+  { provider: "github", fullName: "acme/beta" },
+  { provider: "gitlab", fullName: "group/gamma" },
+]
+
+/**
+ * The list as an app drives it: controlled, with the parent owning the array.
+ *
+ * `renderRepoField` mirrors what the dashboard supplies — a real combobox whose options span every
+ * connected provider — because the plain `<input list>` fallback and a combobox exercise different
+ * code paths, and it was the combobox one that broke.
+ */
+function Harness({
+  onRepos,
+  withCombobox = false,
+  initial = [],
+}: {
+  onRepos?: (r: ProjectRepo[]) => void
+  withCombobox?: boolean
+  initial?: ProjectRepo[]
+}) {
+  const [repos, setRepos] = useState<ProjectRepo[]>(initial)
+  return (
+    <RepoList
+      repos={repos}
+      onChange={(next) => {
+        setRepos(next)
+        onRepos?.(next)
+      }}
+      gitProviders={PROVIDERS}
+      gitRepos={REPOS}
+      renderRepoField={
+        withCombobox
+          ? ({ value, onChange, options, placeholder, id }) => (
+              <div>
+                <input
+                  placeholder={placeholder}
+                  value={value}
+                  aria-label={`repo-field-${id}`}
+                  onChange={(e) => onChange(e.target.value)}
+                />
+                {options.map((option) => (
+                  <button
+                    key={`${option.provider}:${option.fullName}`}
+                    type="button"
+                    aria-label={`pick-${id}-${option.fullName}`}
+                    onClick={() => onChange(option.fullName, option)}
+                  />
+                ))}
+              </div>
+            )
+          : undefined
+      }
+    />
+  )
+}
+
+/** The repository field of each row, in document order. */
+function repoInputs(): HTMLInputElement[] {
+  return Array.from(document.querySelectorAll("input")).filter((i) =>
+    /owner\/repo|Search or type/.test(i.placeholder),
+  )
+}
+
+describe("RepoList row identity", () => {
+  it("does not reuse an id already held by a stored row", () => {
+    // The edit page's case, and the bug users actually hit: ids are **persisted**, so a project
+    // saved with `repo-1` comes back as `repo-1` — while the counter restarts at 0 on each page
+    // load and handed out `repo-1` again. Two rows, one id, both edited at once.
+    const stored: ProjectRepo[] = [
+      { id: "repo-1", provider: "github", project: "acme/alpha", workspacePath: "alpha", workspacePathTouched: true },
+    ]
+    let latest: ProjectRepo[] = []
+    render(<Harness withCombobox initial={stored} onRepos={(r) => (latest = r)} />)
+
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    expect(new Set(latest.map((r) => r.id)).size).toBe(2)
+
+    // …and the stored row keeps its value when the new one is filled.
+    fireEvent.click(screen.getByLabelText(`pick-${latest[1].id}-acme/beta`))
+    expect(latest.map((r) => r.project)).toEqual(["acme/alpha", "acme/beta"])
+  })
+
+  it("stays unique when stored rows are named out of order", () => {
+    const stored: ProjectRepo[] = [
+      { id: "repo-2", provider: "github", project: "acme/alpha", workspacePath: "a" },
+      { id: "repo-5", provider: "github", project: "acme/beta", workspacePath: "b" },
+    ]
+    let latest: ProjectRepo[] = []
+    render(<Harness withCombobox initial={stored} onRepos={(r) => (latest = r)} />)
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    expect(new Set(latest.map((r) => r.id)).size).toBe(latest.length)
+  })
+
+  it("keeps rows independent through a combobox slot, the path the dashboard uses", () => {
+    let latest: ProjectRepo[] = []
+    render(<Harness withCombobox onRepos={(r) => (latest = r)} />)
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+
+    const ids = latest.map((r) => r.id)
+    fireEvent.click(screen.getByLabelText(`pick-${ids[0]}-acme/alpha`))
+    fireEvent.click(screen.getByLabelText(`pick-${ids[1]}-group/gamma`))
+
+    expect(latest.map((r) => r.project)).toEqual(["acme/alpha", "group/gamma"])
+  })
+
+  it("takes each row's provider from the repository picked, not from a button", () => {
+    // Two forges connected: the row starts with no provider and learns it from the choice.
+    let latest: ProjectRepo[] = []
+    render(<Harness withCombobox onRepos={(r) => (latest = r)} />)
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    expect(latest[0].provider).toBe("")
+
+    fireEvent.click(screen.getByLabelText(`pick-${latest[0].id}-group/gamma`))
+    expect(latest[0]).toMatchObject({ provider: "gitlab", project: "group/gamma" })
+  })
+
+  it("offers every connected provider's repositories to an unresolved row", () => {
+    let latest: ProjectRepo[] = []
+    render(<Harness withCombobox onRepos={(r) => (latest = r)} />)
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    const id = latest[0].id
+    // All three, across both forges — you look for a repository, not for a host.
+    expect(screen.getByLabelText(`pick-${id}-acme/alpha`)).toBeTruthy()
+    expect(screen.getByLabelText(`pick-${id}-group/gamma`)).toBeTruthy()
+  })
+
+  it("offers a single Add button, with no provider brand on it", () => {
+    render(<Harness withCombobox />)
+    expect(screen.getAllByRole("button", { name: /^add repository$/i })).toHaveLength(1)
+    expect(screen.queryByRole("button", { name: /add github/i })).toBeNull()
+    expect(screen.queryByRole("button", { name: /add gitlab/i })).toBeNull()
+  })
+
+  it("edits only the row that was typed in", () => {
+    let latest: ProjectRepo[] = []
+    render(<Harness onRepos={(r) => (latest = r)} />)
+
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+
+    const inputs = repoInputs()
+    expect(inputs).toHaveLength(2)
+
+    fireEvent.change(inputs[0], { target: { value: "acme/alpha" } })
+    expect(latest.map((r) => r.project)).toEqual(["acme/alpha", ""])
+
+    fireEvent.change(repoInputs()[1], { target: { value: "acme/beta" } })
+    expect(latest.map((r) => r.project)).toEqual(["acme/alpha", "acme/beta"])
+  })
+
+  it("gives every added row a distinct id", () => {
+    let latest: ProjectRepo[] = []
+    render(<Harness onRepos={(r) => (latest = r)} />)
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    fireEvent.click(screen.getByRole("button", { name: /add git url/i }))
+    expect(new Set(latest.map((r) => r.id)).size).toBe(latest.length)
+  })
+
+  it("keeps rows independent when a raw git URL sits between two provider rows", () => {
+    let latest: ProjectRepo[] = []
+    render(<Harness onRepos={(r) => (latest = r)} />)
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+    fireEvent.click(screen.getByRole("button", { name: /add git url/i }))
+    fireEvent.click(screen.getByRole("button", { name: /add repository/i }))
+
+    fireEvent.change(repoInputs()[1], { target: { value: "acme/beta" } })
+    expect(latest.map((r) => r.project)).toEqual(["", "", "acme/beta"])
+  })
+})

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

@@ -8,30 +8,51 @@ import { Button } from "../button"
 import { Input } from "../input"
 import type { ProjectRepo } from "./types"
 
-/** A repository the user can pick from a connected GitHub account. */
-export interface GithubRepoOption {
+/** A repository the user can pick, and which provider can reach it. */
+export interface GitRepoOption {
+  /** Id of the provider that hosts it — matches `GitProvider.id` and `ProjectRepo.provider`. */
+  provider: string
   fullName: string
   private?: boolean
-  installationId?: number
 }
 
-/** State of the org's GitHub App connection, as far as this list needs it. */
-export interface GithubConnection {
+/**
+ * A git hosting provider available to the org.
+ *
+ * Deliberately not "the GitHub connection": this list used to model exactly one forge, so every
+ * screen built on it had GitHub in its vocabulary and a second provider could not appear without
+ * new props and a new branch. Here a provider is data — the app derives it from whatever
+ * implements git hosting — and the component only reads `operations` to decide what to offer.
+ */
+export interface GitProvider {
+  id: string
+  name: string
   connected?: boolean
-  appSlug?: string
-  installedAccounts?: { login: string; avatarUrl?: string | null }[]
+  /** Accounts/namespaces reachable through it, shown so the user can tell two connections apart. */
+  accounts?: { login: string; avatarUrl?: string | null }[]
+  /** Where to send the user to connect it. The package knows no route of its own. */
+  installUrl?: string | null
+  /** What it can do, e.g. `["listRepos", "cloneCredential"]`. Read, never assumed from `id`. */
+  operations?: string[]
+  /** Brand glyph, supplied by the app. Defaults to a git branch. */
+  icon?: ReactNode
 }
 
 /**
- * Renders the GitHub repository field. A slot, because a real combobox is an
+ * Renders the repository field. A slot, because a real combobox is an
  * app-level dependency (the dashboard has a Base UI one): without it the list
  * falls back to an `<input list>` + `<datalist>`, which needs nothing, works
  * with a keyboard, and is honest about being a plain text field.
  */
 export type RepoFieldRender = (props: {
   value: string
-  onChange: (value: string) => void
-  options: GithubRepoOption[]
+  /**
+   * `option` is set when the user **picked** an entry rather than typing free text. It carries the
+   * provider, which is how a row learns who hosts it: the choice of forge is a consequence of the
+   * repository you picked, not a decision you make first in a separate button.
+   */
+  onChange: (value: string, option?: GitRepoOption) => void
+  options: GitRepoOption[]
   placeholder: string
   id: string
 }) => ReactNode
@@ -39,17 +60,21 @@ export type RepoFieldRender = (props: {
 export interface RepoListProps {
   repos: ProjectRepo[]
   onChange: (repos: ProjectRepo[]) => void
-  /** Repositories reachable through the connected GitHub App. */
-  githubRepos?: GithubRepoOption[]
-  github?: GithubConnection
-  /** Where "Connect GitHub" points. The package knows no route of its own. */
-  connectUrl?: string
+  /** Providers that can host repositories for this org, connected or not. */
+  gitProviders?: GitProvider[]
+  /** Repositories reachable across every connected provider. */
+  gitRepos?: GitRepoOption[]
   renderRepoField?: RepoFieldRender
-  /** Icon for GitHub rows — the app passes its brand glyph; defaults to a git branch. */
-  githubIcon?: ReactNode
   className?: string
 }
 
+/**
+ * The pseudo-provider for a repository given as a raw clone URL: no app hosts it, the project's
+ * deploy key opens it. Kept as a literal rather than an app id because it is the *absence* of a
+ * provider, which is a different thing from a provider that happens to be missing.
+ */
+export const RAW_GIT = "git"
+
 /** Human label + default workspace dir out of a raw clone URL. */
 export function deriveFromGitUrl(url: string): { label: string; repoName: string } {
   const path = url
@@ -72,13 +97,24 @@ const ROW_LEAD = "relative min-w-0 basis-full @min-[30rem]/repos:basis-0 @min-[3
 
 let seq = 0
 /**
- * Identity for a row that doesn't exist server-side yet. A counter rather than
- * `crypto.randomUUID()`: it only has to be unique among the rows of one form,
- * and a counter is stable under SSR, where `randomUUID` would hand the server
- * and the client two different keys.
+ * Identity for a row that doesn't exist server-side yet.
+ *
+ * A counter rather than `crypto.randomUUID()`: it only has to be unique among the rows of one
+ * form, and a counter is stable under SSR, where `randomUUID` would hand the server and the client
+ * two different keys.
+ *
+ * **Checked against the rows already present**, which the counter alone cannot do. These ids get
+ * *persisted*: a project saved with `repo-1` comes back as `repo-1` when it is edited, while the
+ * counter restarts at 0 on every page load — so the first row added on an edit page was handed
+ * `repo-1` again. Two rows, one id, and since every field is addressed by id, editing either one
+ * edited both. It looked like the picker leaking state between rows; it was a name collision
+ * between a stored row and a new one.
  */
-function localRepoId(): string {
-  seq += 1
+function localRepoId(existing: readonly ProjectRepo[]): string {
+  const taken = new Set(existing.map((r) => r.id))
+  do {
+    seq += 1
+  } while (taken.has(`repo-${seq}`))
   return `repo-${seq}`
 }
 
@@ -94,26 +130,37 @@ function localRepoId(): string {
 export function RepoList({
   repos,
   onChange,
-  githubRepos = [],
-  github,
-  connectUrl,
+  gitProviders = [],
+  gitRepos = [],
   renderRepoField,
-  githubIcon,
   className,
 }: RepoListProps) {
-  const hasGithubRepos = githubRepos.length > 0
-  const hasGitRepos = repos.some((r) => r.provider === "git")
+  // A provider is only offerable if it can actually list or clone. Read from `operations` rather
+  // than from a provider id, so a forge added tomorrow shows up here with no change to this file.
+  const pickable = gitProviders.filter((p) => p.operations?.includes("cloneCredential") ?? true)
+  const connected = pickable.filter((p) => p.connected)
+  const hasRawGitRepos = repos.some((r) => r.provider === RAW_GIT)
+
+  const providerOf = (repo: ProjectRepo) => pickable.find((p) => p.id === repo.provider)
+  /**
+   * What a row can pick from. A row that hasn't been resolved to a provider yet offers **every**
+   * connected provider's repositories at once — that is the point of choosing the repository
+   * first: you look for `acme/web`, not for "which forge was that on again".
+   */
+  const reposFor = (repo: ProjectRepo) =>
+    repo.provider ? gitRepos.filter((r) => r.provider === repo.provider) : gitRepos
 
   const patch = (id: string, next: Partial<ProjectRepo>) =>
     onChange(repos.map((r) => (r.id === id ? { ...r, ...next } : r)))
 
-  function setProject(repo: ProjectRepo, value: string) {
+  function setProject(repo: ProjectRepo, value: string, option?: GitRepoOption) {
     const repoName = value.split("/")[1] ?? value
     patch(repo.id, {
       project: value,
-      // Tag the row with the installation that grants access, so a worker clones
-      // it with the right token when the org connected several GitHub accounts.
-      installationId: githubRepos.find((r) => r.fullName === value)?.installationId,
+      // A picked repository says who hosts it. Typed free text does not, so the row keeps whatever
+      // provider it had — re-deriving it from a half-typed string would flip the host under the
+      // user mid-keystroke.
+      ...(option ? { provider: option.provider } : {}),
       ...(repo.workspacePathTouched ? {} : { workspacePath: repoName }),
     })
   }
@@ -149,7 +196,7 @@ export function RepoList({
         // the repository takes a full row of its own until there's room, and the
         // path + bin share the next one.
         <div key={repo.id} className="flex flex-wrap items-center gap-2">
-          {repo.provider === "git" ? (
+          {repo.provider === RAW_GIT ? (
             <div className={ROW_LEAD}>
               <GitBranchIcon className="absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
               <Input
@@ -159,12 +206,12 @@ export function RepoList({
                 onChange={(e) => setCloneUrl(repo, e.target.value)}
               />
             </div>
-          ) : renderRepoField && hasGithubRepos ? (
+          ) : renderRepoField && reposFor(repo).length > 0 ? (
             <div className={ROW_LEAD}>
               {renderRepoField({
-              value: repo.project,
-              onChange: (value) => setProject(repo, value),
-              options: githubRepos,
+                value: repo.project,
+                onChange: (value, option) => setProject(repo, value, option),
+                options: reposFor(repo),
                 placeholder: "Search or type owner/repo…",
                 id: repo.id,
               })}
@@ -172,18 +219,18 @@ export function RepoList({
           ) : (
             <div className={cn(ROW_LEAD, "relative")}>
               <span className="absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground">
-                {githubIcon ?? <GitBranchIcon className="h-3.5 w-3.5" />}
+                {providerOf(repo)?.icon ?? <GitBranchIcon className="h-3.5 w-3.5" />}
               </span>
               <Input
                 className="pl-8"
-                list={hasGithubRepos ? `repos-${repo.id}` : undefined}
+                list={reposFor(repo).length > 0 ? `repos-${repo.id}` : undefined}
                 placeholder="owner/repo"
                 value={repo.project}
                 onChange={(e) => setProject(repo, e.target.value)}
               />
-              {hasGithubRepos && (
+              {reposFor(repo).length > 0 && (
                 <datalist id={`repos-${repo.id}`}>
-                  {githubRepos.map((r) => (
+                  {reposFor(repo).map((r) => (
                     <option key={r.fullName} value={r.fullName} />
                   ))}
                 </datalist>
@@ -223,26 +270,42 @@ export function RepoList({
         </div>
       ))}
 
+      {/* **One** button, and a neutral glyph on it.
+          Not one per provider: the forge is a property of the repository you pick, not a decision
+          to make before you know which repository you want. And a brand glyph on a generic button
+          claims a host the row may not end up having — with two providers connected, "Add
+          repository" under a GitHub mark is simply wrong half the time. The row picks up its
+          provider, and its icon, from the entry chosen in the field. */}
       <div className="flex flex-wrap gap-2">
+        {connected.length > 0 && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              onChange([
+                ...repos,
+                {
+                  id: localRepoId(repos),
+                  // Left empty when several providers are connected, so the field offers all of
+                  // them; pre-filled when there is only one, because there is nothing to choose.
+                  provider: connected.length === 1 ? connected[0].id : "",
+                  project: "",
+                  workspacePath: "",
+                },
+              ])
+            }
+          >
+            <GitBranchIcon className="mr-1 h-4 w-4" />
+            Add repository
+          </Button>
+        )}
         <Button
           type="button"
           variant="outline"
           size="sm"
           onClick={() =>
-            onChange([...repos, { id: localRepoId(), provider: "github", project: "", workspacePath: "" }])
-          }
-        >
-          <span className="mr-1 flex h-4 w-4 items-center justify-center">
-            {githubIcon ?? <GitBranchIcon className="h-4 w-4" />}
-          </span>
-          Add GitHub repo
-        </Button>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() =>
-            onChange([...repos, { id: localRepoId(), provider: "git", project: "", workspacePath: "", cloneUrl: "" }])
+            onChange([...repos, { id: localRepoId(repos), provider: RAW_GIT, project: "", workspacePath: "", cloneUrl: "" }])
           }
         >
           <GitBranchIcon className="mr-1 h-4 w-4" />
@@ -252,23 +315,29 @@ export function RepoList({
 
       <p className="text-xs text-muted-foreground">
         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">
-              Reconnect GitHub
-            </a>
-          ) : (
-            <>
-              <a href={connectUrl} className="underline underline-offset-2">
-                Connect GitHub
-              </a>{" "}
-              to enable private repos for this organization.
-            </>
-          ))}
+        remote&apos;s default).
       </p>
 
-      {hasGitRepos && (
+      {/* Providers the org could connect but hasn't. Named, so the offer is "connect GitLab",
+          not a generic prompt that leaves the user guessing what is even available. */}
+      {pickable.some((p) => !p.connected && p.installUrl) && (
+        <p className="text-xs text-muted-foreground">
+          Connect{" "}
+          {pickable
+            .filter((p) => !p.connected && p.installUrl)
+            .map((provider, index, list) => (
+              <span key={provider.id}>
+                {index > 0 && (index === list.length - 1 ? " or " : ", ")}
+                <a href={provider.installUrl!} className="underline underline-offset-2">
+                  {provider.name}
+                </a>
+              </span>
+            ))}{" "}
+          to use private repositories in this organization.
+        </p>
+      )}
+
+      {hasRawGitRepos && (
         <p className="rounded-md border border-dashed p-3 text-xs text-muted-foreground">
           Git URL repos (GitLab, Gitea, Bitbucket, self-hosted…) are cloned with this project&apos;s SSH{" "}
           <strong>deploy key</strong>. After saving, register the public key shown on the project page as a{" "}
@@ -277,39 +346,37 @@ export function RepoList({
         </p>
       )}
 
-      {github?.connected && github.installedAccounts && github.installedAccounts.length > 0 && (
+      {connected.some((p) => p.accounts?.length) && (
         <div className="space-y-2 rounded-md border border-dashed p-3">
-          <p className="text-xs font-medium">GitHub App installed on:</p>
+          <p className="text-xs font-medium">Reachable accounts:</p>
           <div className="flex flex-wrap gap-2">
-            {github.installedAccounts.map((account) => (
-              <span key={account.login} className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs">
+            {connected.flatMap((provider) =>
+              (provider.accounts ?? []).map((account) => (
+              <span key={`${provider.id}:${account.login}`} className="inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs">
                 {account.avatarUrl && (
                   <img src={account.avatarUrl} alt="" className="h-4 w-4 rounded-sm" />
                 )}
                 {account.login}
               </span>
-            ))}
+              )),
+            )}
           </div>
-          {github.appSlug && (
+          {/* "Add another account" points at the provider's own install flow — the package no
+              longer builds a github.com URL out of an app slug it had no business knowing. */}
+          {connected.filter((p) => p.installUrl).length > 0 && (
             <p className="text-xs text-muted-foreground">
-              <a
-                href={`https://github.com/apps/${github.appSlug}/installations/new`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="underline underline-offset-2"
-              >
-                Install on another account
-              </a>{" "}
-              to access more repos
-              {connectUrl && (
-                <>
-                  , then{" "}
-                  <a href={connectUrl} className="underline underline-offset-2">
-                    reconnect
-                  </a>
-                </>
-              )}
-              .
+              Add another account on{" "}
+              {connected
+                .filter((p) => p.installUrl)
+                .map((provider, index, list) => (
+                  <span key={provider.id}>
+                    {index > 0 && (index === list.length - 1 ? " or " : ", ")}
+                    <a href={provider.installUrl!} className="underline underline-offset-2">
+                      {provider.name}
+                    </a>
+                  </span>
+                ))}{" "}
+              to reach more repositories.
             </p>
           )}
         </div>

package/src/components/projects/types.ts

@@ -17,8 +17,13 @@ import type { SectionAccent } from "./form-section"
 export interface ProjectRepo {
   /** Client-side identity, stable across re-renders. Not the API's id. */
   id: string
-  /** `github` resolves through the connected GitHub App; `git` clones a raw URL with the deploy key. */
-  provider: "github" | "git"
+  /**
+   * Which git provider hosts this repo — the id of an integration that implements git hosting
+   * (`"github"`, `"gitlab"`, …), or `"git"` for a raw clone URL opened with the project's deploy
+   * key. A `string` rather than a union: the set of forges is the *deployment's*, not this
+   * package's, and hardcoding it here is what kept a second one from ever appearing.
+   */
+  provider: string
   /** `owner/repo` for GitHub, a human label for a raw URL. */
   project: string
   /** Directory under `/workspace`. Auto-derived from the repo name until the user edits it. */
@@ -28,8 +33,6 @@ export interface ProjectRepo {
    * Without it, picking a repo silently overwrites a path the user had set.
    */
   workspacePathTouched?: boolean
-  /** Which GitHub App installation grants access (an org can connect several). */
-  installationId?: number
   /** Raw clone URL, `git` provider only. */
   cloneUrl?: string
   /**

package/src/components/workers/types.ts

@@ -26,7 +26,7 @@ export interface WorkerCardWorker {
   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`. */
+  /** Lifecycle state: `provisioning` | `building` | `pulling` | `starting` | `setup` | `ready` | `stopping` | `stopped` | `deleting` | `error`. */
   state?: string | null
   /** Docker-level state: `running` | `stopped` | `exited` | `created` | `not_found` | `error`. */
   dockerState?: string | null

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

@@ -6,6 +6,14 @@
 // This module is the union of both, plus the transient states (`pulling`,
 // `stopping`, `deleting`) that only ever existed as ad-hoc `if`s above the table.
 //
+// `building` is the odd one out: it is the state a *control plane* reports, and
+// the only one here that Spunto Lite names and the dashboard does not. Both wait
+// for a project image before a container exists — Cloud does it inside
+// `provisioning` and rebuilds the fact client-side by joining the project's image
+// builds, Lite says it in the field. It is deliberately not folded into
+// `pulling`: building an image and pulling one are different waits, and only one
+// of them has a log worth opening.
+//
 // No "use client": pure functions and hookless components, so a React Server
 // Component can call them.
 
@@ -21,6 +29,7 @@ export type WorkerStatusKey =
   | "error"
   | "pending"
   | "setup"
+  | "building"
   | "pulling"
   | "stopping"
   | "deleting"
@@ -79,6 +88,7 @@ export const workerStatusConfig: Record<WorkerStatusKey, WorkerStatusConfig> = {
   },
   pending: BUSY,
   setup: { ...BUSY, label: "Setting up…" },
+  building: { ...BUSY, label: "Building image…" },
   pulling: { ...BUSY, label: "Pulling image…" },
   stopping: { ...BUSY, label: "Stopping…" },
   deleting: { ...BUSY, label: "Deleting…" },
@@ -99,7 +109,7 @@ const SETUP_STATES = new Set(["provisioning", "starting", "setup"])
  * Worker snapshot → one status, tolerant of shapes it has never seen.
  *
  * Order matters: the *lifecycle* state wins whenever it describes an action in
- * flight (deleting, stopping, pulling, setting up), because docker still reports
+ * flight (deleting, stopping, building, pulling, setting up), because docker still reports
  * the container as `running` throughout — showing "Running" while a worker is
  * being deleted is the bug this ordering exists to prevent. Past that, the
  * docker state is the truth. Apps with a single `state` field (Spunto Lite) fall
@@ -120,6 +130,7 @@ export function resolveWorkerStatus(worker: WorkerCardWorker): WorkerStatus {
 
   if (state === "deleting") return of("deleting")
   if (state === "stopping") return of("stopping")
+  if (state === "building") return of("building", { settingUp: true })
   if (state === "pulling") return of("pulling", { settingUp: true })
   if (state && SETUP_STATES.has(state)) return of("setup", { settingUp: true })