@cat-factory/app 0.52.0 → 0.53.0

package/app/components/settings/ProviderConnectionTab.vue

@@ -88,6 +88,7 @@ const canSave = computed(() => {
 function buildManifestPayload(): {
   manifest: Record<string, unknown>
   secrets: Record<string, string>
+  backendKind: string
 } | null {
   const template = descriptor.value?.manifestTemplate
   if (!template) return null
@@ -106,7 +107,9 @@ function buildManifestPayload(): {
     else providerConfig[f.key] = val
   }
   if (Object.keys(providerConfig).length) manifest.providerConfig = providerConfig
-  return { manifest, secrets }
+  // Carry the selected kind so a CUSTOM backend's flat-form save is tagged with its slug
+  // (not silently wrapped into the built-in `manifest` backend).
+  return { manifest, secrets, backendKind: backendKind.value }
 }
 
 function notifyError(title: string, e: unknown) {
@@ -156,6 +159,8 @@ async function saveNative() {
 }
 
 // --- Manifest-editor actions (emitted from ProviderManifestEditor) ------------------
+// Tag the raw-manifest save/test with the selected backend kind too, so a CUSTOM kind that
+// ships no flat-form template (and thus uses the raw editor) isn't mis-tagged as `manifest`.
 async function testManifest(payload: {
   manifest: Record<string, unknown>
   secrets: Record<string, string>
@@ -163,7 +168,7 @@ async function testManifest(payload: {
   testing.value = true
   testResult.value = null
   try {
-    testResult.value = await store.test(props.kind, payload)
+    testResult.value = await store.test(props.kind, { ...payload, backendKind: backendKind.value })
   } catch (e) {
     testResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
   } finally {
@@ -177,7 +182,7 @@ async function saveManifest(payload: {
 }) {
   busy.value = true
   try {
-    await store.register(props.kind, payload)
+    await store.register(props.kind, { ...payload, backendKind: backendKind.value })
     toastSaved()
   } catch (e) {
     notifyError(t('settings.providerConnection.toast.saveFailed'), e)
@@ -187,14 +192,12 @@ async function saveManifest(payload: {
 }
 
 // --- Backend selector -----------------------------------------------------------------
-// Both infrastructure tabs can configure either the BYO manifest backend OR a native
-// Kubernetes backend (a runner cluster for runner-pool, per-PR namespaces for environment).
-// The two K8s backends have different config shapes, so each kind renders its own form.
-// Defaults to the saved connection's kind.
-const BACKEND_KINDS = ['manifest', 'kubernetes'] as const
-type BackendKind = (typeof BACKEND_KINDS)[number]
-const backendKind = ref<BackendKind>('manifest')
-const showBackendSelector = computed(() => true)
+// Each infrastructure tab configures one of the backend KINDS registered for its subsystem:
+// the built-in BYO `manifest` backend, the native `kubernetes` backend, or any CUSTOM kind a
+// deployment registered programmatically. The list is snapshot-driven (built-in fallback in
+// the store until it loads); the two K8s backends have bespoke forms, every other kind
+// (manifest + custom) uses the descriptor-driven flat form. Defaults to the saved kind.
+const backendKind = ref<string>('manifest')
 const backendSelectorLabel = computed(() =>
   t(
     props.kind === 'environment'
@@ -202,25 +205,40 @@ const backendSelectorLabel = computed(() =>
       : 'settings.providerConnection.backend.selectorLabel',
   ),
 )
-function backendKindLabel(k: BackendKind): string {
-  if (k === 'kubernetes') return t('settings.providerConnection.backend.kubernetes')
-  return t(
-    props.kind === 'environment'
-      ? 'settings.providerConnection.backend.environmentManifest'
-      : 'settings.providerConnection.backend.manifest',
-  )
+// Built-in kinds keep their localized labels; a custom kind shows its snapshot displayLabel.
+function backendKindLabel(option: { kind: string; label: string }): string {
+  if (option.kind === 'kubernetes') return t('settings.providerConnection.backend.kubernetes')
+  if (option.kind === 'manifest') {
+    return t(
+      props.kind === 'environment'
+        ? 'settings.providerConnection.backend.environmentManifest'
+        : 'settings.providerConnection.backend.manifest',
+    )
+  }
+  return option.label
 }
 const backendKindItems = computed(() =>
-  BACKEND_KINDS.map((k) => ({ label: backendKindLabel(k), value: k })),
+  store.backendKindsFor(props.kind).map((o) => ({ label: backendKindLabel(o), value: o.kind })),
 )
 watch(
   () => connection.value,
   (c) => {
-    if (c?.kind === 'kubernetes' || c?.kind === 'manifest') backendKind.value = c.kind
+    if (c?.kind) backendKind.value = c.kind
   },
   { immediate: true },
 )
 
+// Switching the backend kind re-probes ONLY that kind's descriptor (so a not-yet-connected
+// custom kind's connect form renders). Always pass the explicit kind — including `manifest`,
+// so picking it describes the manifest backend rather than falling back to the stored kind —
+// and use `loadDescriptor` (not `loadKind`) so the stored connection isn't re-fetched and the
+// selector isn't bounced back to the stored kind by the `connection` watch.
+async function onBackendKindChange(k: string) {
+  backendKind.value = k
+  await store.loadDescriptor(props.kind, k)
+  resetDraft()
+}
+
 async function testConfig(payload: {
   config: Record<string, unknown>
   secrets: Record<string, string>
@@ -332,9 +350,14 @@ function fieldHelp(key: string): string | undefined {
       }}
     </div>
 
-    <!-- Backend selector: the BYO manifest backend or a native Kubernetes backend. -->
-    <UFormField v-if="showBackendSelector" :label="backendSelectorLabel">
-      <USelect v-model="backendKind" :items="backendKindItems" />
+    <!-- Backend selector: the BYO manifest backend, a native Kubernetes backend, or a
+         programmatically-registered custom kind. -->
+    <UFormField :label="backendSelectorLabel">
+      <USelect
+        v-model="backendKind"
+        :items="backendKindItems"
+        @update:model-value="onBackendKindChange(String($event))"
+      />
     </UFormField>
 
     <!-- Native Kubernetes runner backend (runner-pool). -->

package/app/composables/api/providerConnections.ts

@@ -51,8 +51,20 @@ const CONTRACTS = {
 /** Environment-provider + runner-pool connection endpoints (self-describe + register/test). */
 export function providerConnectionsApi({ send, ws }: ApiContext) {
   return {
-    describeProvider: (workspaceId: string, kind: ProviderConnectionKind) =>
-      send(CONTRACTS[kind].describe, { pathPrefix: ws(workspaceId) }),
+    // `backendKind` (optional) describes a REGISTERED backend that isn't connected yet, so a
+    // custom kind's connect form renders before the first connect. Omitted ⇒ the stored kind.
+    // Branch on the kind so `send` sees a single concrete contract (a union contract can't
+    // type-check the optional `queryParams`).
+    describeProvider: (workspaceId: string, kind: ProviderConnectionKind, backendKind?: string) =>
+      kind === 'environment'
+        ? send(CONTRACTS.environment.describe, {
+            pathPrefix: ws(workspaceId),
+            queryParams: { kind: backendKind },
+          })
+        : send(CONTRACTS['runner-pool'].describe, {
+            pathPrefix: ws(workspaceId),
+            queryParams: { kind: backendKind },
+          }),
 
     getProviderConnection: (workspaceId: string, kind: ProviderConnectionKind) =>
       send(CONTRACTS[kind].get, { pathPrefix: ws(workspaceId) }),
@@ -118,10 +130,11 @@ export function providerConnectionsApi({ send, ws }: ApiContext) {
 /**
  * Resolve the discriminated backend config (runner-pool OR environment) from a connect-form
  * payload: an explicit `config` (the Kubernetes form) wins; otherwise a bare `manifest` (the
- * manifest editor) is wrapped into the `manifest` backend kind. Both subsystems now take a
- * discriminated `config`, so the same shape serves each.
+ * flat form / manifest editor) is wrapped into the selected backend kind — `body.backendKind`
+ * (a built-in `manifest` or a registered CUSTOM slug), defaulting to `manifest`. A custom kind
+ * MUST carry its slug here, else its flat-form save would be mis-tagged as the manifest backend.
  */
 function backendConfig(body: RegisterProviderInput | TestProviderInput): Record<string, unknown> {
   if (body.config) return body.config
-  return { kind: 'manifest', manifest: body.manifest ?? {} }
+  return { kind: body.backendKind ?? 'manifest', manifest: body.manifest ?? {} }
 }

package/app/stores/providerConnections.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { computed, reactive, ref } from 'vue'
+import type { BackendKindOption } from '@cat-factory/contracts'
 import type {
   ProviderConnection,
   ProviderConnectionKind,
@@ -11,6 +12,21 @@ import { useWorkspaceStore } from '~/stores/workspace'
 
 const KINDS: ProviderConnectionKind[] = ['environment', 'runner-pool']
 
+// Built-in fallback so the connect form's backend selector works before the snapshot
+// loads (or on an older backend that doesn't advertise the kinds). The live lists come
+// from the workspace snapshot (`environmentBackendKinds` / `runnerBackendKinds`) and may
+// additionally carry a deployment's programmatically-registered CUSTOM kinds.
+const BUILTIN_BACKEND_KINDS: Record<ProviderConnectionKind, BackendKindOption[]> = {
+  environment: [
+    { kind: 'manifest', label: 'HTTP manifest' },
+    { kind: 'kubernetes', label: 'Kubernetes' },
+  ],
+  'runner-pool': [
+    { kind: 'manifest', label: 'HTTP manifest pool' },
+    { kind: 'kubernetes', label: 'Kubernetes' },
+  ],
+}
+
 interface ProviderState {
   /** null until first probed; false ⇒ integration disabled on the backend (hide it). */
   available: boolean | null
@@ -38,13 +54,35 @@ export const useProviderConnectionsStore = defineStore('providerConnections', ()
   })
   const loaded = ref(false)
   let inFlight: Promise<void> | null = null
+  // The selectable backend kinds per subsystem, fed from the workspace snapshot.
+  const backendKinds = reactive<Record<ProviderConnectionKind, BackendKindOption[]>>({
+    environment: BUILTIN_BACKEND_KINDS.environment,
+    'runner-pool': BUILTIN_BACKEND_KINDS['runner-pool'],
+  })
+
+  /** Seed the backend-kind selector lists from the workspace snapshot (built-in + custom). */
+  function registerBackendKinds(
+    payload: Partial<Record<ProviderConnectionKind, BackendKindOption[]>>,
+  ) {
+    for (const kind of KINDS) {
+      const list = payload[kind]
+      if (list && list.length > 0) backendKinds[kind] = list
+    }
+  }
+
+  /** The selectable backend kinds for a subsystem (built-in fallback until the snapshot loads). */
+  function backendKindsFor(kind: ProviderConnectionKind): BackendKindOption[] {
+    return backendKinds[kind]
+  }
 
-  async function loadKind(kind: ProviderConnectionKind) {
+  // `backendKind` (optional) re-probes the descriptor for a specific (e.g. not-yet-connected
+  // custom) backend kind, so its connect form renders before the first connect.
+  async function loadKind(kind: ProviderConnectionKind, backendKind?: string) {
     const ws = useWorkspaceStore()
     const s = state[kind]
     try {
       const [descriptor, { connection }] = await Promise.all([
-        api.describeProvider(ws.requireId(), kind),
+        api.describeProvider(ws.requireId(), kind, backendKind),
         api.getProviderConnection(ws.requireId(), kind),
       ])
       s.descriptor = descriptor
@@ -58,9 +96,24 @@ export const useProviderConnectionsStore = defineStore('providerConnections', ()
     }
   }
 
+  /**
+   * Re-probe ONLY the descriptor for a specific backend kind (e.g. a not-yet-connected
+   * custom kind the user just picked), leaving the stored connection untouched. Switching
+   * the selector must NOT re-fetch the connection: that would reassign `state.connection`
+   * and bounce the selector back to the stored kind via the component's `connection` watch.
+   */
+  async function loadDescriptor(kind: ProviderConnectionKind, backendKind?: string) {
+    const ws = useWorkspaceStore()
+    try {
+      state[kind].descriptor = await api.describeProvider(ws.requireId(), kind, backendKind)
+    } catch {
+      // Keep the existing descriptor/availability on a transient describe failure.
+    }
+  }
+
   /** Refresh both providers (used by the banner + after a save/remove). */
   async function load() {
-    await Promise.all(KINDS.map(loadKind))
+    await Promise.all(KINDS.map((k) => loadKind(k)))
     loaded.value = true
   }
 
@@ -123,11 +176,14 @@ export const useProviderConnectionsStore = defineStore('providerConnections', ()
     loaded,
     load,
     loadKind,
+    loadDescriptor,
     ensureLoaded,
     descriptorFor,
     connectionFor,
     isAvailable,
     needingConfig,
+    backendKindsFor,
+    registerBackendKinds,
     register,
     updateSecrets,
     test,

package/app/stores/workspace.ts

@@ -21,6 +21,7 @@ import { useClarityStore } from '~/stores/clarity'
 import { useBrainstormStore } from '~/stores/brainstorm'
 import { useConsensusStore } from '~/stores/consensus'
 import { useGitHubStore } from '~/stores/github'
+import { useProviderConnectionsStore } from '~/stores/providerConnections'
 
 /**
  * Owns the active workspace and bootstraps the app against the backend. On load
@@ -98,6 +99,13 @@ export const useWorkspaceStore = defineStore(
       // Merge the deployment's registered custom agent kinds into the palette catalog so a
       // proprietary kind renders as a first-class block + result view (idempotent on reload).
       useAgentsStore().registerCustomKinds(snapshot.customAgentKinds ?? [])
+      // Seed the connect form's backend-kind selectors (built-in + any custom backend a
+      // deployment registered), so a programmatically-registered env/runner backend is a
+      // first-class connect option instead of a hardcoded manifest/kubernetes list.
+      useProviderConnectionsStore().registerBackendKinds({
+        environment: snapshot.environmentBackendKinds,
+        'runner-pool': snapshot.runnerBackendKinds,
+      })
     }
 
     /** Resolve accounts + boards, then open the right board for the active account. */

package/app/types/providerConnections.ts

@@ -50,8 +50,14 @@ export interface ProviderConnection {
  */
 export interface RegisterProviderInput {
   manifest?: Record<string, unknown>
-  /** The discriminated runner-backend config (manifest pool or kubernetes). */
+  /** The discriminated runner-backend config (manifest pool, kubernetes, or a custom kind). */
   config?: Record<string, unknown>
+  /**
+   * The selected backend kind, used to wrap a bare `manifest` into the discriminated config
+   * (`{ kind, manifest }`). Defaults to `manifest`. A CUSTOM registered kind passes its slug
+   * here so the flat-form save isn't mis-tagged as the built-in manifest backend.
+   */
+  backendKind?: string
   secrets: Record<string, string>
 }
 
@@ -59,5 +65,6 @@ export interface RegisterProviderInput {
 export interface TestProviderInput {
   manifest?: Record<string, unknown>
   config?: Record<string, unknown>
+  backendKind?: string
   secrets?: Record<string, string>
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "valibot": "^1.4.2",
     "vue": "^3.5.39",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.54.0"
+    "@cat-factory/contracts": "0.55.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",