@cat-factory/app 0.215.0 → 0.215.2

package/app/components/bootstrap/BootstrapModal.vue

@@ -5,9 +5,8 @@
 // architecture, or from scratch following a freeform prompt. The modal pairs the
 // launch form with the managed base list.
 import type { BootstrapStatus, FrameRepoType, ReferenceArchitecture } from '~/types/domain'
-// Explicit import (see GitHubPanel): the auto-import name for github/GitHubConnect
-// doesn't match the `<GitHubConnect>` tag, so bind it directly.
-import GitHubConnect from '~/components/github/GitHubConnect.vue'
+import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
+import { appInstallationManageUrl, newRepoUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
 const ui = useUiStore()
 const bootstrap = useBootstrapStore()
@@ -137,35 +136,42 @@ watch(
   { immediate: true },
 )
 
-// A bootstrap run pushes into a GitHub repo, so the workspace must be connected
-// first (the backend pre-flights the same and 409s otherwise). When the
-// integration is on but unconnected, surface the discover-and-link prompt inline
-// and block launch until it's bound.
-const needsGitHub = computed(() => github.available === true && !github.connected)
-
-// The account the repo must live under — the connected installation's account. The
-// run pushes into an existing repo here (cat-factory doesn't create it: a GitHub App
-// can't create repos under a personal account, and we'd rather not hold the broad
-// Administration permission). The repo must be empty or hold only a prepopulated
-// README/.gitignore/license — the push force-overwrites that boilerplate. The
-// convenience link opens GitHub's new-repo page prefilled so the user can create it
-// in one click.
+// A bootstrap run pushes into a repo on the connected host, so the workspace must be
+// connected first (the backend pre-flights the same and 409s otherwise). When the
+// integration is on but unconnected, surface the connect prompt inline and block launch
+// until it's bound.
+const needsConnection = computed(() => github.available === true && !github.connected)
+
+// The host this modal is about: the connected one, or the only one the deployment could
+// connect while nothing is bound. Null where it offers several and none is connected, so
+// `provider`'s own "what is connected" default can never send a GitLab deployment to github.com.
+const hostProvider = computed(() => github.surfaceProvider)
+const providerLabel = computed(() =>
+  hostProvider.value ? VCS_PROVIDER_LABELS[hostProvider.value] : '',
+)
+
+// The account the repo must live under — the connected account. The run pushes into an
+// existing repo here (cat-factory doesn't create it: a GitHub App can't create repos under a
+// personal account, and we'd rather not hold the broad Administration permission). The repo
+// must be empty or hold only a prepopulated README/.gitignore/license — the push
+// force-overwrites that boilerplate. The convenience link opens the host's own new-repo page,
+// prefilled, and is ABSENT for any host `~/utils/vcs` can't name (an unresolved provider, or a
+// GitLab whose instance nothing on the wire states); the copy and the button both key off it,
+// so what the intro promises and what renders cannot disagree.
 const repoOwner = computed(() => github.connection?.accountLogin ?? '')
-const createRepoUrl = computed(() => {
-  const params = new URLSearchParams()
-  if (repoOwner.value) params.set('owner', repoOwner.value)
-  const name = repoName.value.trim()
-  if (name) params.set('name', name)
-  const desc = description.value.trim()
-  if (desc) params.set('description', desc)
-  params.set('visibility', isPrivate.value ? 'private' : 'public')
-  return `https://github.com/new?${params.toString()}`
-})
+const createRepoUrl = computed(() =>
+  newRepoUrl(hostProvider.value, {
+    owner: repoOwner.value,
+    name: repoName.value.trim(),
+    description: description.value.trim(),
+    private: isPrivate.value,
+  }),
+)
 
 const creatingRepo = ref(false)
 
 // The "create repository" button behaves differently per tier. Restricted orgs
-// (the default) open GitHub's new-repo page prefilled — cat-factory needs no
+// (the default) open the host's new-repo page — cat-factory needs no
 // repo-creation permission. Privileged orgs (the connection reports
 // `canCreateRepos`) create it programmatically via the backend, with no page.
 async function openCreateRepo() {
@@ -173,7 +179,9 @@ async function openCreateRepo() {
   if (!name || repoNameError.value) return
 
   if (!github.canCreateRepos) {
-    window.open(createRepoUrl.value, '_blank', 'noopener')
+    // The button is hidden without a resolved host, so there is always a URL here; the guard
+    // keeps that a local fact rather than an assumption about the template.
+    if (createRepoUrl.value) window.open(createRepoUrl.value, '_blank', 'noopener')
     return
   }
 
@@ -207,20 +215,15 @@ async function openCreateRepo() {
 // "not accessible to the GitHub App". Link straight to the connected
 // installation's settings page, where the user adds the repo to its access list
 // in one click — no install/connect round-trip (the workspace is already bound).
-const manageInstallUrl = computed(() => {
-  const conn = github.connection
-  if (!conn) return undefined
-  return conn.targetType === 'Organization'
-    ? `https://github.com/organizations/${conn.accountLogin}/settings/installations/${conn.installationId}`
-    : `https://github.com/settings/installations/${conn.installationId}`
-})
+// Absent on a PAT connection, which grants no per-installation access (see `~/utils/vcs`).
+const manageInstallUrl = computed(() => appInstallationManageUrl(github.connection))
 
 function openManageInstall() {
   if (manageInstallUrl.value) window.open(manageInstallUrl.value, '_blank', 'noopener')
 }
 
 const canLaunch = computed(() => {
-  if (needsGitHub.value) return false
+  if (needsConnection.value) return false
   if (!repoName.value.trim() || repoNameError.value) return false
   return usingReference.value ? !!selectedArchId.value : instructions.value.trim().length > 0
 })
@@ -420,22 +423,34 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
   <UModal v-model:open="open" :title="t('bootstrap.title')" :ui="{ content: 'max-w-2xl' }">
     <template #body>
       <div class="space-y-6">
+        <!-- Three states, because each promises the user something different about the repo.
+             cat-factory creates it (privileged App tier, so a provider is always resolved);
+             the user creates it in one click on a host we can name; or the user creates it
+             themselves somewhere we cannot name, where promising a click below would be a lie
+             (the button is absent for exactly the same reason). -->
         <p class="text-sm text-slate-400">
-          {{ github.canCreateRepos ? t('bootstrap.intro.canCreate') : t('bootstrap.intro.manual') }}
+          {{
+            github.canCreateRepos
+              ? t('vcs.bootstrap.introCanCreate', { provider: providerLabel })
+              : createRepoUrl
+                ? t('vcs.bootstrap.introManual', { provider: providerLabel })
+                : t('vcs.bootstrap.introManualAny')
+          }}
         </p>
 
-        <!-- not connected: a run needs GitHub, so discover & link before launching -->
+        <!-- not connected: a run pushes to the host, so connect before launching. Offer
+             whichever methods the deployment serves, never just the GitHub App. -->
         <div
-          v-if="needsGitHub"
+          v-if="needsConnection"
           class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
         >
           <div class="flex items-start gap-2">
             <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
             <p class="text-sm text-amber-200/90">
-              {{ t('bootstrap.github.prompt') }}
+              {{ t('vcs.bootstrap.connectPrompt') }}
             </p>
           </div>
-          <GitHubConnect />
+          <VcsConnectSurfaces />
         </div>
 
         <!-- launch -->
@@ -484,7 +499,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                   :placeholder="t('bootstrap.targetRepo.namePlaceholder')"
                   class="w-full"
                 />
+                <!-- Creating the repo for the user needs no host name; sending them to the
+                     host's own form needs one, so that variant waits until a host is
+                     resolved rather than guessing which page to open. -->
                 <UButton
+                  v-if="github.canCreateRepos || createRepoUrl"
                   color="neutral"
                   variant="subtle"
                   :icon="github.canCreateRepos ? 'i-lucide-plus' : 'i-lucide-external-link'"
@@ -493,14 +512,14 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
                   :title="
                     github.canCreateRepos
                       ? t('bootstrap.createRepo.titleNow')
-                      : t('bootstrap.createRepo.titleGitHub')
+                      : t('vcs.bootstrap.createRepoTitle', { provider: providerLabel })
                   "
                   @click="openCreateRepo"
                 >
                   {{
                     github.canCreateRepos
                       ? t('bootstrap.createRepo.now')
-                      : t('bootstrap.createRepo.onGitHub')
+                      : t('vcs.bootstrap.createRepoOn', { provider: providerLabel })
                   }}
                 </UButton>
               </div>
@@ -671,9 +690,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
             v-if="showArchForm"
             class="space-y-3 rounded-md border border-slate-700 bg-slate-900/80 p-3"
           >
+            <!-- The options come from the connected projection, so a repo to pick means a
+                 connection exists and `providerLabel` names it rather than guessing. -->
             <UFormField
               v-if="hasRepoOptions"
-              :label="t('bootstrap.arch.pickRepo.label')"
+              :label="t('vcs.bootstrap.archPickRepo', { provider: providerLabel })"
               :description="t('bootstrap.arch.pickRepo.description')"
             >
               <USelect

package/app/components/github/AddServiceFromRepoModal.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-// Add a board service backed by an EXISTING GitHub repository — no bootstrap
-// run. Unlike the bootstrap modal (which creates a repo and has an agent adapt
-// it in a container), this just links a repo the App can access to a fresh,
-// `ready` service frame. The workspace need not track the repo yet: the backend
-// links + syncs it on import. If the App can't see the wanted repo, the user
-// grants it access from here, then searches for it again.
+// Add a board service backed by an EXISTING repository — no bootstrap run. Unlike the
+// bootstrap modal (which creates a repo and has an agent adapt it in a container), this
+// just links a repo the workspace's connection can reach to a fresh, `ready` service
+// frame. The workspace need not track the repo yet: the backend links + syncs it on
+// import. On a GitHub App connection, a repo the App can't see yet is granted from here
+// and searched for again; a PAT connection has no such page (see `~/utils/vcs`), so what
+// is listed follows the token's own access.
 //
 // MONOREPO support: a repo flagged a monorepo can back SEVERAL services, each
 // pinned to a subdirectory. When the selected repo is a monorepo, the user
@@ -12,11 +13,12 @@
 // parent folder, in one pass — then adds them all at once. Directories that
 // already back a service on this board are shown but not selectable.
 import type { FrameRepoType, GitHubAvailableRepo } from '~/types/domain'
-import GitHubConnect from '~/components/github/GitHubConnect.vue'
 import RepoSearchEmpty from '~/components/github/RepoSearchEmpty.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import ServiceTestConfig from '~/components/panels/inspector/ServiceTestConfig.vue'
 import ServiceFragments from '~/components/panels/inspector/ServiceFragments.vue'
+import { appInstallationManageUrl, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
 const { t } = useI18n()
 
@@ -64,7 +66,22 @@ watch(
 )
 
 // The integration is on but this workspace isn't bound yet — connect first.
-const needsGitHub = computed(() => github.available === true && !github.connected)
+const needsConnection = computed(() => github.available === true && !github.connected)
+
+// Brand name of whatever the workspace connected, for the hint that names it. Only read where
+// a connection exists (the hints below the picker), so `provider` is the right question there.
+const providerLabel = computed(() => VCS_PROVIDER_LABELS[github.provider])
+
+// Which remedy the picker's hint offers: an App installation sends the user to its repo-access
+// list, a pasted token to the token's own scope. Asked of the CONNECTION rather than of the
+// manage URL below, so a host whose settings page we could not build (an Enterprise install,
+// say) never tells an App-connected user to go check their token's scope.
+const isAppConnection = computed(() => github.connection?.method === 'app')
+
+// The intro renders BEFORE a connection may exist, so it asks `surfaceProvider` instead and
+// stays neutral where the deployment offers several and none is bound: naming one would be a
+// guess, and `provider`'s own default would name GitHub on a GitLab-only deployment.
+const introProvider = computed(() => github.surfaceProvider)
 
 // Repos whose service is ALREADY mounted on THIS board can't be added again — adding here would
 // be a no-op. A repo whose service lives on ANOTHER board in the org stays addable: adding it
@@ -201,15 +218,10 @@ function clearSelection() {
   resetSelection()
 }
 
-// The App's installation settings page — where the user grants it access to a
-// repo it can't see yet (mirrors the bootstrap modal's "grant access" link).
-const manageInstallUrl = computed(() => {
-  const conn = github.connection
-  if (!conn) return undefined
-  return conn.targetType === 'Organization'
-    ? `https://github.com/organizations/${conn.accountLogin}/settings/installations/${conn.installationId}`
-    : `https://github.com/settings/installations/${conn.installationId}`
-})
+// The App's installation settings page — where the user grants it access to a repo it can't
+// see yet (mirrors the bootstrap modal's "grant access" link). Absent on a PAT connection,
+// which has no installation to manage, so the affordance and its hint both drop out.
+const manageInstallUrl = computed(() => appInstallationManageUrl(github.connection))
 
 function openManageInstall() {
   if (manageInstallUrl.value) window.open(manageInstallUrl.value, '_blank', 'noopener')
@@ -242,14 +254,14 @@ watch(
 // multi-selects directories and adds them together via `addServices`.
 const canAdd = computed(
   () =>
-    !needsGitHub.value &&
+    !needsConnection.value &&
     selectedRepoId.value !== undefined &&
     !isMonorepo.value &&
     !configuredBlockId.value,
 )
 const canAddServices = computed(
   () =>
-    !needsGitHub.value &&
+    !needsConnection.value &&
     selectedRepoId.value !== undefined &&
     isMonorepo.value &&
     selectedDirectories.value.length > 0,
@@ -357,27 +369,36 @@ function done() {
     <template #body>
       <div class="space-y-6">
         <p class="text-sm text-slate-400">
-          {{ t('github.addService.intro') }}
+          {{
+            introProvider
+              ? t('vcs.addService.intro', { provider: VCS_PROVIDER_LABELS[introProvider] })
+              : t('vcs.addService.introAny')
+          }}
         </p>
 
-        <!-- not connected: linking a repo needs the App bound to this workspace -->
+        <!-- not connected: linking a repo needs a connection bound to this workspace, so
+             offer whichever connect methods the deployment serves (never just the App) -->
         <div
-          v-if="needsGitHub"
+          v-if="needsConnection"
           class="space-y-3 rounded-md border border-amber-500/30 bg-amber-500/5 p-3"
         >
           <div class="flex items-start gap-2">
             <UIcon name="i-lucide-plug-zap" class="mt-0.5 h-4 w-4 shrink-0 text-amber-400" />
             <p class="text-sm text-amber-200/90">
-              {{ t('github.addService.connectFirst') }}
+              {{ t('vcs.addService.connectFirst') }}
             </p>
           </div>
-          <GitHubConnect />
+          <VcsConnectSurfaces />
         </div>
 
         <template v-else>
           <UFormField
             :label="t('github.addService.repository')"
-            :description="t('github.addService.repositoryHint')"
+            :description="
+              isAppConnection
+                ? t('vcs.addService.repositoryHintApp')
+                : t('vcs.addService.repositoryHintToken', { provider: providerLabel })
+            "
             required
           >
             <!-- The wrapper, not the UInputMenu itself, carries the anchor: a tutorial tour
@@ -521,9 +542,10 @@ function done() {
             <ServiceFragments :block="configuredBlock" default-open />
           </div>
 
-          <div class="flex flex-wrap items-center gap-2">
+          <!-- App connections only: a pasted token has no installation whose repo access
+               could be edited, so there is no page to send the user to. -->
+          <div v-if="manageInstallUrl" class="flex flex-wrap items-center gap-2">
             <UButton
-              v-if="manageInstallUrl"
               color="neutral"
               variant="subtle"
               size="sm"

package/app/components/github/GitHubOnboarding.vue

@@ -2,13 +2,9 @@
 // Hard onboarding gate shown after login when the VCS integration is enabled but the workspace
 // has no connection yet. cat-factory's whole flow runs on a connected repository host (agents
 // open pull/merge requests on the user's repos), so the board is withheld until the workspace
-// connects one. Renders the connect surfaces the deployment can actually serve: <GitHubConnect>
-// drives the account-level App install (https://github.com/apps/<slug>/installations/new — the
-// user picks the account/org and grants all or a subset of repos) plus the
-// pick-an-existing-installation path, and <GitLabConnect> takes a pasted GitLab PAT. A "Sign
-// out" escape hatch avoids trapping a user who needs to switch accounts.
-import GitHubConnect from '~/components/github/GitHubConnect.vue'
-import GitLabConnect from '~/components/vcs/GitLabConnect.vue'
+// connects one. <VcsConnectSurfaces> renders whichever connect methods the deployment serves; a
+// "Sign out" escape hatch avoids trapping a user who needs to switch accounts.
+import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
 const { t } = useI18n()
@@ -41,22 +37,7 @@ const title = computed(() =>
         </p>
       </div>
 
-      <template v-if="github.canConnectGitHubApp">
-        <p class="mb-3 text-sm text-slate-400">{{ t('github.onboarding.appIntro') }}</p>
-        <GitHubConnect />
-      </template>
-      <USeparator
-        v-if="github.canConnectGitHubApp && github.canConnectGitLabPat"
-        class="my-4"
-        :label="t('vcs.connect.or')"
-      />
-      <GitLabConnect v-if="github.canConnectGitLabPat" />
-      <p
-        v-if="!github.canConnectGitHubApp && !github.canConnectGitLabPat"
-        class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
-      >
-        {{ t('vcs.connect.noneConfigured') }}
-      </p>
+      <VcsConnectSurfaces :app-intro="t('github.onboarding.appIntro')" />
 
       <p
         v-if="auth.required && auth.user"

package/app/components/github/GitHubPanel.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-// GitHub integration panel: connect the workspace's App installation, manage the
-// connection (disconnect / resync), and browse the projected repos, branches,
-// pull requests and issues the backend caches in D1. Mirrors the document-source
-// connect/import surface, but for GitHub. Writes (new branch, open/merge PR,
-// comment) go straight to the repo via the backend's installation token.
+// Source-control panel: connect the workspace, manage the connection (disconnect / resync),
+// and browse the projected repos, branches, pull requests and issues the backend caches.
+// Mirrors the document-source connect/import surface. Writes (new branch, open/merge PR,
+// comment) go straight to the repo via the backend's connection credential.
 import type { GitHubPullRequest, GitHubRepo, VcsProvider } from '~/types/domain'
-// Explicit import: the auto-import name for a component nested under a
-// like-named directory (github/GitHubConnect) doesn't match the `<GitHubConnect>`
-// tag, so it silently renders as an empty element. Importing it directly binds
-// the tag unambiguously.
-import GitHubConnect from './GitHubConnect.vue'
+// Explicit imports: the auto-import name for a component nested under a like-named directory
+// (github/BranchProtectionPreflight) doesn't match the tag used below, so it would silently
+// render as an empty element. Importing by path binds each tag unambiguously.
 import BranchProtectionPreflight from './BranchProtectionPreflight.vue'
-import GitLabConnect from '~/components/vcs/GitLabConnect.vue'
+import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
@@ -33,9 +30,7 @@ const back = useIntegrationBack(open)
 // Provider-aware chrome: once connected, the panel is titled for the provider the workspace
 // actually connected; before that it names the sole connectable provider, or stays neutral when
 // the deployment serves several. Brand names are verbatim in every locale (see `~/utils/vcs`).
-const chromeProvider = computed(() =>
-  github.connected ? github.provider : github.soleConnectProvider,
-)
+const chromeProvider = computed(() => github.surfaceProvider)
 const panelTitle = computed(() =>
   chromeProvider.value ? VCS_PROVIDER_LABELS[chromeProvider.value] : t('vcs.panel.title'),
 )
@@ -283,26 +278,7 @@ async function merge(pr: GitHubPullRequest) {
     <template #body>
       <div class="space-y-5">
         <!-- not connected: connect -->
-        <template v-if="!github.connected">
-          <!-- One connect surface per method the deployment actually serves: the App
-               installation picker only where a GitHub App is configured, the PAT box only
-               where the per-workspace GitLab connect is wired. -->
-          <template v-if="github.canConnectGitHubApp">
-            <p class="text-sm text-slate-400">{{ t('github.panel.connectIntro') }}</p>
-            <GitHubConnect />
-          </template>
-          <USeparator
-            v-if="github.canConnectGitHubApp && github.canConnectGitLabPat"
-            :label="t('vcs.connect.or')"
-          />
-          <GitLabConnect v-if="github.canConnectGitLabPat" />
-          <p
-            v-if="!github.canConnectGitHubApp && !github.canConnectGitLabPat"
-            class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
-          >
-            {{ t('vcs.connect.noneConfigured') }}
-          </p>
-        </template>
+        <VcsConnectSurfaces v-if="!github.connected" :app-intro="t('github.panel.connectIntro')" />
 
         <!-- connected: manage + browse -->
         <template v-else>

package/app/components/vcs/VcsConnectSurfaces.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// The connect surfaces a deployment can actually serve, in one place. A deployment wires a
+// GitHub App, a per-workspace GitLab PAT connect, both, or neither, and only
+// `GET /vcs/connect-options` (via the store's `canConnect*`) can say which — a connection
+// READ says nothing, because the `github` module builds for either provider.
+//
+// Every surface that can strand a user on "not connected yet" renders this: the source-control
+// panel, the onboarding gate, and the two modals that need a connection before they can do
+// anything (add-service-from-repo, bootstrap). They had diverged — both modals hardcoded the
+// GitHub App picker, so a GitLab-only deployment offered an installation flow it cannot serve
+// and no way to connect at all — which is why the fan-out lives here rather than being copied
+// a fourth time.
+//
+// Explicit imports: the auto-import name for `github/GitHubConnect` doesn't match the
+// `<GitHubConnect>` tag (see GitHubPanel), so both children are bound by path.
+import GitHubConnect from '~/components/github/GitHubConnect.vue'
+import GitLabConnect from '~/components/vcs/GitLabConnect.vue'
+
+const props = defineProps<{
+  /**
+   * Copy shown above the GitHub App picker only, since it is the one surface whose flow needs
+   * explaining (pick an account, grant repo access). Omitted ⇒ no intro, which is what the
+   * modals want: their own prompt already said why a connection is needed.
+   */
+  appIntro?: string
+}>()
+
+const { t } = useI18n()
+const github = useGitHubStore()
+
+// Whether the deployment serves neither surface. Rendered as a statement rather than an empty
+// box: "nothing is configured" and "we couldn't read what is configured" both land here, and a
+// blank space would read as the connect UI still loading.
+const nothingConfigured = computed(() => !github.canConnectGitHubApp && !github.canConnectGitLabPat)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <template v-if="github.canConnectGitHubApp">
+      <p v-if="props.appIntro" class="text-sm text-slate-400">{{ props.appIntro }}</p>
+      <GitHubConnect />
+    </template>
+
+    <USeparator
+      v-if="github.canConnectGitHubApp && github.canConnectGitLabPat"
+      :label="t('vcs.connect.or')"
+    />
+
+    <GitLabConnect v-if="github.canConnectGitLabPat" />
+
+    <p
+      v-if="nothingConfigured"
+      class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
+    >
+      {{ t('vcs.connect.noneConfigured') }}
+    </p>
+  </div>
+</template>

package/app/stores/github/vcsConnect.ts

@@ -1,5 +1,67 @@
+import { computed, type ComputedRef } from 'vue'
+import type { VcsProvider } from '~/types/domain'
 import type { GitHubStoreContext } from './context'
 
+/**
+ * Everything a component needs to know about WHICH provider it is dealing with. Kept here,
+ * beside the connect actions that populate the state it reads, so the three questions stay
+ * answered in one place: what is connected, what could be connected, and what a given surface
+ * should therefore call itself.
+ */
+export interface VcsProviderViews {
+  /** The provider backing the current connection; a connection predating the discriminator is App-era GitHub. */
+  provider: ComputedRef<VcsProvider>
+  canConnectGitHubApp: ComputedRef<boolean>
+  canConnectGitLabPat: ComputedRef<boolean>
+  soleConnectProvider: ComputedRef<VcsProvider | null>
+  surfaceProvider: ComputedRef<VcsProvider | null>
+}
+
+/** The derived provider questions above, off the probed connection + capability state. */
+export function createVcsProviderViews(ctx: GitHubStoreContext): VcsProviderViews {
+  const { connection, connectOptions } = ctx
+
+  const provider = computed<VcsProvider>(() => connection.value?.provider ?? 'github')
+
+  /** Whether the deployment can serve a GitHub App connect / a per-workspace GitLab PAT connect. */
+  const canConnectGitHubApp = computed(() =>
+    connectOptions.value.some((o) => o.provider === 'github' && o.method === 'app'),
+  )
+  const canConnectGitLabPat = computed(() =>
+    connectOptions.value.some((o) => o.provider === 'gitlab' && o.method === 'pat'),
+  )
+
+  /**
+   * The single provider this deployment can connect, or null when it offers several (or none) —
+   * what the connect copy keys off so a one-provider deployment never says "choose a provider".
+   */
+  const soleConnectProvider = computed<VcsProvider | null>(() => {
+    const providers = new Set(connectOptions.value.map((o) => o.provider))
+    return providers.size === 1 ? [...providers][0]! : null
+  })
+
+  /**
+   * The provider a repo-facing surface is ABOUT: the connected one, or (with nothing bound yet)
+   * the only one this deployment could connect. Null when it offers several and none is
+   * connected, because naming one there would be a guess — such a surface says something neutral
+   * instead (`vcs.onboarding.titleAny` is the pattern). Distinct from {@link provider}, which
+   * answers "what is connected" and therefore defaults to `github`: reading THAT before a
+   * connection exists is what puts "Pick an existing GitHub repository" in front of a
+   * GitLab-only deployment.
+   */
+  const surfaceProvider = computed<VcsProvider | null>(() =>
+    connection.value !== null ? provider.value : soleConnectProvider.value,
+  )
+
+  return {
+    provider,
+    canConnectGitHubApp,
+    canConnectGitLabPat,
+    soleConnectProvider,
+    surfaceProvider,
+  }
+}
+
 /**
  * The provider-neutral half of the connection lifecycle: which connect surfaces the deployment
  * serves, and the per-workspace **PAT** connect (GitLab today). The GitHub-App installation

package/app/stores/github.spec.ts

@@ -15,6 +15,7 @@ function connection(overrides: Partial<GitHubConnection> = {}): GitHubConnection
     targetType: 'User',
     connectedAt: 1,
     provider: 'github',
+    method: 'app',
     canCreateRepos: false,
     canManageWorkflows: true,
     ...overrides,
@@ -56,6 +57,33 @@ describe('github store — VCS connect capability', () => {
     expect(github.canConnectGitLabPat).toBe(true)
     // A single-provider deployment names its provider, so the connect copy never says "choose".
     expect(github.soleConnectProvider).toBe('gitlab')
+    // …and the repo-facing surfaces name it too, BEFORE anything is connected. `provider`
+    // answers "what is connected" and so defaults to github; a surface reading that one is how
+    // "Pick an existing GitHub repository" ends up on a GitLab-only deployment.
+    expect(github.provider).toBe('github')
+    expect(github.surfaceProvider).toBe('gitlab')
+  })
+
+  it('names the connected provider once bound, whatever the deployment could connect', async () => {
+    stubApi({
+      getGitHubConnection: vi
+        .fn()
+        .mockResolvedValue({ connection: connection({ provider: 'gitlab', method: 'pat' }) }),
+      listVcsConnectOptions: vi.fn().mockResolvedValue({
+        options: [
+          { provider: 'github', method: 'app' },
+          { provider: 'gitlab', method: 'pat' },
+        ] satisfies VcsConnectOption[],
+      }),
+    })
+    const github = storeWithWorkspace()
+
+    await github.probe()
+
+    // Several connectable, so there is no sole provider — but one IS connected, and that is
+    // what every repo-facing surface is about.
+    expect(github.soleConnectProvider).toBeNull()
+    expect(github.surfaceProvider).toBe('gitlab')
   })
 
   it('reports no connect surface when the capability read fails, without hiding the integration', async () => {
@@ -91,6 +119,9 @@ describe('github store — VCS connect capability', () => {
     expect(github.canConnectGitHubApp).toBe(true)
     expect(github.canConnectGitLabPat).toBe(true)
     expect(github.soleConnectProvider).toBeNull()
+    // Nothing connected and several on offer: naming one would be a guess, so the surfaces
+    // fall back to their neutral copy rather than picking a brand.
+    expect(github.surfaceProvider).toBeNull()
   })
 
   it('connects GitLab with a trimmed PAT and loads the projection', async () => {