@spunto/design-system 0.22.0 → 0.24.0

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
   /**