@cat-factory/app 0.53.0 → 0.54.1

package/app/components/settings/InfrastructureBackendPicker.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+// ONE flat radio list per infrastructure axis — the single picker that replaces the old
+// two-step "where it runs" radio + "runner/environment backend" dropdown. Each item is a
+// concrete destination with a one-line description, so there is no more hidden second list:
+//   - execution axis → where agent containers run: the facade built-in (local Docker /
+//     Cloudflare Containers), the registered backend kinds (Kubernetes, a custom HTTP runner
+//     pool, plus any deployment-registered CUSTOM kind), and — in local mode — a low-config
+//     "Local Kubernetes (k3s)" preset.
+//   - testEnv axis   → where the Tester's ephemeral environments run: the built-in
+//     (in-container docker-compose) + the registered backend kinds.
+//
+// The backend kinds come from the workspace snapshot (`providerConnections.backendKindsFor`),
+// so a custom kind a deployment registered shows up as a first-class radio item. Selecting a
+// pool/cluster item reveals its connect form inline (driven through ProviderConnectionTab). In
+// LOCAL MODE the choice is a real per-workspace toggle (the `delegate*` settings) — but we
+// DEFER writing `delegate=true` until a connection is actually registered, so a half-configured
+// pick never routes runs to a non-existent pool. Off-local (Worker/Node) the active backend is
+// deployment/registration-driven, so the radio doesn't write the toggle — it only reveals the
+// connect forms — and a read-only "Active: …" line states what's effectively routing.
+import { computed, ref, watch } from 'vue'
+import type { ExecutionBackendKind, TestEnvBackendKind } from '@cat-factory/contracts'
+import ProviderConnectionTab from '~/components/settings/ProviderConnectionTab.vue'
+
+const props = defineProps<{ axis: 'execution' | 'testEnv' }>()
+
+const { t } = useI18n()
+const auth = useAuthStore()
+const settings = useWorkspaceSettingsStore()
+const providerConnections = useProviderConnectionsStore()
+const toast = useToast()
+
+type BackendKind = ExecutionBackendKind | TestEnvBackendKind
+// A radio item: the built-in facade runtime, one per registered backend kind (built-in +
+// custom), or the synthetic local-k3s preset. `backendKind` is the slug passed to the connect
+// tab (absent on the built-in, which means "don't delegate"); `preset` prefills the k8s form.
+interface PickerItem {
+  id: string
+  backendKind?: string
+  preset?: 'k3s'
+  label: string
+  desc: string
+}
+
+// The built-in facade runtimes carry localized labels + descriptions. i18n leaf keys are
+// spelled as literals so the typed-message-keys check stays live.
+const BUILTIN_KEYS: Record<BackendKind, { label: string; desc: string }> = {
+  'local-docker': {
+    label: 'settings.infrastructure.executionBackend.local-docker',
+    desc: 'settings.infrastructure.executionBackend.local-dockerDesc',
+  },
+  'cloudflare-containers': {
+    label: 'settings.infrastructure.executionBackend.cloudflare-containers',
+    desc: 'settings.infrastructure.executionBackend.cloudflare-containersDesc',
+  },
+  'runner-pool': {
+    label: 'settings.infrastructure.executionBackend.runner-pool',
+    desc: 'settings.infrastructure.executionBackend.runner-poolDesc',
+  },
+  'local-compose': {
+    label: 'settings.infrastructure.testEnvBackend.local-compose',
+    desc: 'settings.infrastructure.testEnvBackend.local-composeDesc',
+  },
+  'environment-provider': {
+    label: 'settings.infrastructure.testEnvBackend.environment-provider',
+    desc: 'settings.infrastructure.testEnvBackend.environment-providerDesc',
+  },
+}
+// The built-in `kubernetes` backend kind's localized label/desc, per axis.
+const KUBERNETES_KEYS: Record<'execution' | 'testEnv', { label: string; desc: string }> = {
+  execution: {
+    label: 'settings.infrastructure.executionBackend.kubernetes',
+    desc: 'settings.infrastructure.executionBackend.kubernetesDesc',
+  },
+  testEnv: {
+    label: 'settings.infrastructure.testEnvBackend.kubernetes',
+    desc: 'settings.infrastructure.testEnvBackend.kubernetesDesc',
+  },
+}
+// k3s is an execution-only preset (the env k8s config can't be reduced to low-config), so a
+// single catalog key serves it — no dead test-env keys.
+const K3S_KEYS = {
+  label: 'settings.infrastructure.executionBackend.k3s',
+  desc: 'settings.infrastructure.executionBackend.k3sDesc',
+}
+
+const cap = computed<{ available: BackendKind[]; active: BackendKind } | null>(() => {
+  const c = auth.infrastructure?.[props.axis]
+  return c ? { available: c.available as BackendKind[], active: c.active as BackendKind } : null
+})
+const isLocal = computed(() => auth.localMode?.enabled === true)
+const suggestedImage = computed(() => auth.infrastructure?.execution.suggestedExecutorImage)
+
+// The kind reached by "delegating" away from the on-machine default + its connection kind.
+const delegatedKind = computed<BackendKind>(() =>
+  props.axis === 'execution' ? 'runner-pool' : 'environment-provider',
+)
+const connectionKind = computed<'runner-pool' | 'environment'>(() =>
+  props.axis === 'execution' ? 'runner-pool' : 'environment',
+)
+// The built-in (the available option that isn't the delegated one), if this facade has one.
+const builtinKind = computed<BackendKind | null>(
+  () => cap.value?.available.find((k) => k !== delegatedKind.value) ?? null,
+)
+const connection = computed(() => providerConnections.connectionFor(connectionKind.value))
+const connectionRegistered = computed(() => !!connection.value)
+// Pool/cluster items can be configured only when the deployment supports delegation AND the
+// connect integration is enabled (not 503).
+const poolConfigurable = computed(
+  () =>
+    (cap.value?.available.includes(delegatedKind.value) ?? false) &&
+    providerConnections.isAvailable(connectionKind.value),
+)
+
+// The delegation flag is a genuine per-workspace toggle ONLY in local mode.
+const writable = computed(() => isLocal.value && (cap.value?.available.length ?? 0) > 1)
+const delegated = computed(() =>
+  props.axis === 'execution'
+    ? settings.settings.delegateAgentsToRunnerPool
+    : settings.settings.delegateTestEnvToProvider,
+)
+
+// The effective active backend (matches the prior ExecutionBackendSelector logic): local
+// mode follows the toggle; off-local the delegated backend is active when its pool is
+// registered, else the deployment default.
+const effectiveActive = computed<BackendKind | null>(() => {
+  if (!cap.value) return builtinKind.value
+  if (writable.value) return delegated.value ? delegatedKind.value : builtinKind.value
+  if (cap.value.available.includes(delegatedKind.value) && connectionRegistered.value) {
+    return delegatedKind.value
+  }
+  return cap.value.active
+})
+
+// Localized label/desc for a built-in backend kind; null for a CUSTOM kind (which uses its
+// snapshot label and has no description).
+function backendKindKeys(kind: string): { label: string; desc: string } | null {
+  if (kind === 'kubernetes') return KUBERNETES_KEYS[props.axis]
+  if (kind === 'manifest') return BUILTIN_KEYS[delegatedKind.value]
+  return null
+}
+
+// The radio item the current state maps to (an item id). A stored connection reads back as its
+// own backend-kind slug; k3s is a one-shot prefill, never re-derived.
+const derivedItem = computed<string>(() => {
+  if (effectiveActive.value === delegatedKind.value) return connection.value?.kind ?? 'kubernetes'
+  return 'builtin'
+})
+
+const selected = ref<string>(derivedItem.value)
+// Re-sync when the derived state changes (e.g. after a save/remove or a settings flip
+// elsewhere). A pending pool/k3s pick before save doesn't move `derivedItem`, so the user's
+// selection survives until a connection is registered.
+watch(derivedItem, (v) => {
+  selected.value = v
+})
+
+const items = computed<PickerItem[]>(() => {
+  const out: PickerItem[] = []
+  if (builtinKind.value) {
+    const k = BUILTIN_KEYS[builtinKind.value]
+    out.push({ id: 'builtin', label: t(k.label), desc: t(k.desc) })
+  }
+  if (poolConfigurable.value) {
+    for (const opt of providerConnections.backendKindsFor(connectionKind.value)) {
+      const keys = backendKindKeys(opt.kind)
+      out.push({
+        id: opt.kind,
+        backendKind: opt.kind,
+        label: keys ? t(keys.label) : opt.label,
+        desc: keys ? t(keys.desc) : '',
+      })
+    }
+    // The k3s low-config preset prefills the RUNNER k8s form; the env k8s config (manifest
+    // source + URL derivation) can't be reduced to low-config, so it's execution-only.
+    if (isLocal.value && props.axis === 'execution') {
+      out.push({
+        id: 'k3s',
+        backendKind: 'kubernetes',
+        preset: 'k3s',
+        label: t(K3S_KEYS.label),
+        desc: t(K3S_KEYS.desc),
+      })
+    }
+  }
+  return out
+})
+
+// The active-line label: prefer the registered connection's concrete kind over the generic
+// "delegated" label so "Active: Kubernetes cluster" reads truthfully.
+const activeLabel = computed(() => {
+  const c = connection.value
+  if (effectiveActive.value === delegatedKind.value && c?.kind) {
+    const keys = backendKindKeys(c.kind)
+    if (keys) return t(keys.label)
+    const opt = providerConnections
+      .backendKindsFor(connectionKind.value)
+      .find((o) => o.kind === c.kind)
+    return opt?.label ?? c.kind
+  }
+  const kind = effectiveActive.value
+  return kind ? t(BUILTIN_KEYS[kind].label) : ''
+})
+
+const saving = ref(false)
+
+async function setDelegate(value: boolean) {
+  saving.value = true
+  try {
+    await settings.update(
+      props.axis === 'execution'
+        ? { delegateAgentsToRunnerPool: value }
+        : { delegateTestEnvToProvider: value },
+    )
+  } catch (e) {
+    toast.add({
+      title: t('settings.infrastructure.updateFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function select(id: string) {
+  selected.value = id
+  if (!writable.value) return // off-local: reveal the form, but don't flip a toggle.
+  if (id === 'builtin') {
+    await setDelegate(false)
+    return
+  }
+  // Pool/cluster pick: only commit delegation now if a pool is already registered; otherwise
+  // defer to onConnected so we never route to a non-existent pool (the amber hint nags).
+  if (connectionRegistered.value) await setDelegate(true)
+}
+
+// Emitted by ProviderConnectionTab after a connection is successfully registered: now it's
+// safe to activate delegation for the pending pick.
+async function onConnected() {
+  if (writable.value && selected.value !== 'builtin' && !delegated.value) await setDelegate(true)
+}
+
+// Which connect form ProviderConnectionTab should show, and the k3s prefill signal.
+const selectedItem = computed<PickerItem | undefined>(() =>
+  items.value.find((i) => i.id === selected.value),
+)
+const showConnectForm = computed(() => !!selectedItem.value?.backendKind && poolConfigurable.value)
+const selectedBackendKind = computed(() => selectedItem.value?.backendKind ?? 'manifest')
+const selectedPreset = computed(() => selectedItem.value?.preset)
+// Nag when a pool item is picked in local mode but no pool is registered to back it.
+const showRegisterHint = computed(
+  () => writable.value && selected.value !== 'builtin' && !connectionRegistered.value,
+)
+
+const labelKey = computed(() =>
+  props.axis === 'execution'
+    ? 'settings.infrastructure.executionBackend.label'
+    : 'settings.infrastructure.testEnvBackend.label',
+)
+</script>
+
+<template>
+  <section v-if="cap" class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
+    <h3 class="text-sm font-semibold text-slate-200">{{ t(labelKey) }}</h3>
+
+    <!-- Off-local: the active backend is deployment/registration-driven; state it plainly. -->
+    <p v-if="!writable" class="text-sm text-slate-300" :data-testid="`${axis}-backend-active`">
+      {{ t('settings.infrastructure.active', { backend: activeLabel }) }}
+    </p>
+
+    <div class="space-y-1.5" :data-testid="`${axis}-backend-options`">
+      <label v-for="item in items" :key="item.id" class="flex cursor-pointer items-start gap-2">
+        <input
+          type="radio"
+          class="mt-1"
+          :value="item.id"
+          :checked="item.id === selected"
+          :disabled="saving"
+          :data-testid="`${axis}-backend-${item.id}`"
+          @change="select(item.id)"
+        />
+        <span class="min-w-0">
+          <span class="text-sm text-slate-200">{{ item.label }}</span>
+          <span v-if="item.desc" class="block text-[11px] text-slate-400">{{ item.desc }}</span>
+        </span>
+      </label>
+    </div>
+
+    <p v-if="showRegisterHint" class="text-[11px] text-amber-300/80">
+      {{ t('settings.infrastructure.registerHint') }}
+    </p>
+
+    <!-- The connect form for the selected pool/cluster, driven through the shared tab. -->
+    <ProviderConnectionTab
+      v-if="showConnectForm"
+      :kind="connectionKind"
+      :backend-kind="selectedBackendKind"
+      :preset="selectedPreset"
+      :suggested-image="suggestedImage"
+      @connected="onConnected"
+    />
+  </section>
+</template>

package/app/components/settings/InfrastructureWindow.vue

@@ -11,8 +11,7 @@
 // backend integration is disabled (503) simply doesn't render.
 import { computed, ref, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
-import ProviderConnectionTab from '~/components/settings/ProviderConnectionTab.vue'
-import ExecutionBackendSelector from '~/components/settings/ExecutionBackendSelector.vue'
+import InfrastructureBackendPicker from '~/components/settings/InfrastructureBackendPicker.vue'
 import LocalContainerPoolSettings from '~/components/settings/LocalContainerPoolSettings.vue'
 
 const { t } = useI18n()
@@ -103,10 +102,9 @@ watch([tabs, () => store.loaded], () => {
         >
           <template #runner-pool>
             <div class="space-y-4">
-              <!-- Where agent containers run (writable in local mode; read-only elsewhere). -->
-              <ExecutionBackendSelector axis="execution" />
-              <!-- The runner-pool connect form only when that integration is enabled. -->
-              <ProviderConnectionTab v-if="store.isAvailable('runner-pool')" kind="runner-pool" />
+              <!-- One unified list of where agent containers run; the selected pool/cluster
+                   reveals its connect form inline. -->
+              <InfrastructureBackendPicker axis="execution" />
               <!-- Local mode: the warm-pool + checkout reuse ARE the host agent-container
                    runtime, so they live here rather than in a separate menu. -->
               <section v-if="isLocal" class="border-t border-slate-800 pt-4">
@@ -119,10 +117,8 @@ watch([tabs, () => store.loaded], () => {
           </template>
           <template #environment>
             <div class="space-y-4">
-              <!-- Where Tester environments run (writable in local mode; read-only elsewhere). -->
-              <ExecutionBackendSelector axis="testEnv" />
-              <!-- The environment-provider connect form only when that integration is enabled. -->
-              <ProviderConnectionTab v-if="store.isAvailable('environment')" kind="environment" />
+              <!-- One unified list of where the Tester's ephemeral environments run. -->
+              <InfrastructureBackendPicker axis="testEnv" />
             </div>
           </template>
         </UTabs>

package/app/components/settings/KubernetesRunnerForm.vue

@@ -9,6 +9,10 @@ import type { ProviderConnection } from '~/types/providerConnections'
 
 const props = defineProps<{
   connection: ProviderConnection | null
+  /** A low-config preset to seed the form with (today: local k3s). */
+  preset?: 'k3s'
+  /** The deployment's executor image, used to prefill the k3s preset's image field. */
+  suggestedImage?: string
   supportsTest: boolean
   testing: boolean
   busy: boolean
@@ -30,6 +34,7 @@ const form = reactive({
   imageUi: '',
   caCertPem: '',
   harnessPort: '',
+  insecureSkipTlsVerify: false,
 })
 const apiToken = ref('')
 
@@ -52,11 +57,28 @@ watch(
       form.imageUi = typeof k.imageUi === 'string' ? k.imageUi : ''
       form.caCertPem = typeof k.caCertPem === 'string' ? k.caCertPem : ''
       form.harnessPort = typeof k.harnessPort === 'number' ? String(k.harnessPort) : ''
+      form.insecureSkipTlsVerify = k.insecureSkipTlsVerify === true
     }
   },
   { immediate: true },
 )
 
+// Low-config k3s preset: seed the local-cluster defaults so the operator only pastes a
+// ServiceAccount token (and an image, unless the deployment surfaced one). Only seeds a
+// fresh form — never clobbers an existing connection's config on edit.
+watch(
+  () => props.preset,
+  (preset) => {
+    if (preset !== 'k3s' || props.connection) return
+    form.label = 'Local k3s'
+    form.apiServerUrl = 'https://127.0.0.1:6443'
+    form.namespace = 'cat-factory'
+    form.insecureSkipTlsVerify = true
+    if (props.suggestedImage) form.image = props.suggestedImage
+  },
+  { immediate: true },
+)
+
 const canSave = computed(
   () =>
     !!form.label.trim() &&
@@ -75,6 +97,7 @@ function buildPayload(): { config: Record<string, unknown>; secrets: Record<stri
   }
   if (form.imageUi.trim()) kubernetes.imageUi = form.imageUi.trim()
   if (form.caCertPem.trim()) kubernetes.caCertPem = form.caCertPem.trim()
+  if (form.insecureSkipTlsVerify) kubernetes.insecureSkipTlsVerify = true
   const port = Number(form.harnessPort)
   if (form.harnessPort.trim() && Number.isFinite(port)) kubernetes.harnessPort = port
   return {
@@ -156,6 +179,13 @@ function buildPayload(): { config: Record<string, unknown>; secrets: Record<stri
       />
     </UFormField>
 
+    <UFormField :help="t('settings.providerConnection.kubernetes.insecureSkipTlsVerifyHelp')">
+      <UCheckbox
+        v-model="form.insecureSkipTlsVerify"
+        :label="t('settings.providerConnection.kubernetes.insecureSkipTlsVerify')"
+      />
+    </UFormField>
+
     <UFormField
       :label="
         t('settings.providerConnection.form.optionalLabel', {

package/app/components/settings/ProviderConnectionTab.vue

@@ -13,7 +13,18 @@ import ProviderManifestEditor from '~/components/settings/ProviderManifestEditor
 import KubernetesRunnerForm from '~/components/settings/KubernetesRunnerForm.vue'
 import KubernetesEnvironmentForm from '~/components/settings/KubernetesEnvironmentForm.vue'
 
-const props = defineProps<{ kind: ProviderConnectionKind }>()
+const props = defineProps<{
+  kind: ProviderConnectionKind
+  /** The selected backend-kind slug — chosen by the parent picker's radio, not a local
+   *  dropdown. Built-in (`manifest`/`kubernetes`) or a deployment-registered custom kind. */
+  backendKind: string
+  /** A low-config preset to prefill the Kubernetes form (today: local k3s). */
+  preset?: 'k3s'
+  /** The deployment's executor image, used to prefill the k3s preset's image field. */
+  suggestedImage?: string
+}>()
+
+const emit = defineEmits<{ connected: [] }>()
 
 const { t } = useI18n()
 const store = useProviderConnectionsStore()
@@ -31,7 +42,7 @@ const title = computed(() => t(`settings.providerConnection.kind.${props.kind}.t
 
 watch(
   () => props.kind,
-  (k) => void store.loadKind(k).then(resetDraft),
+  (k) => void store.loadKind(k, props.backendKind).then(resetDraft),
   { immediate: true },
 )
 
@@ -109,7 +120,7 @@ function buildManifestPayload(): {
   if (Object.keys(providerConfig).length) manifest.providerConfig = providerConfig
   // 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 }
+  return { manifest, secrets, backendKind: props.backendKind }
 }
 
 function notifyError(title: string, e: unknown) {
@@ -149,6 +160,7 @@ async function saveNative() {
   try {
     const payload = buildManifestPayload()
     if (payload) await store.register(props.kind, payload)
+    emit('connected')
     resetDraft()
     toastSaved()
   } catch (e) {
@@ -168,7 +180,7 @@ async function testManifest(payload: {
   testing.value = true
   testResult.value = null
   try {
-    testResult.value = await store.test(props.kind, { ...payload, backendKind: backendKind.value })
+    testResult.value = await store.test(props.kind, { ...payload, backendKind: props.backendKind })
   } catch (e) {
     testResult.value = { ok: false, message: e instanceof Error ? e.message : String(e) }
   } finally {
@@ -182,7 +194,8 @@ async function saveManifest(payload: {
 }) {
   busy.value = true
   try {
-    await store.register(props.kind, { ...payload, backendKind: backendKind.value })
+    await store.register(props.kind, { ...payload, backendKind: props.backendKind })
+    emit('connected')
     toastSaved()
   } catch (e) {
     notifyError(t('settings.providerConnection.toast.saveFailed'), e)
@@ -191,54 +204,20 @@ async function saveManifest(payload: {
   }
 }
 
-// --- Backend selector -----------------------------------------------------------------
-// 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'
-      ? 'settings.providerConnection.backend.environmentSelectorLabel'
-      : 'settings.providerConnection.backend.selectorLabel',
-  ),
-)
-// 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(() =>
-  store.backendKindsFor(props.kind).map((o) => ({ label: backendKindLabel(o), value: o.kind })),
-)
+// --- Backend connect forms ------------------------------------------------------------
+// Which backend kind to configure (the built-in `manifest`/`kubernetes` backends or any
+// CUSTOM kind a deployment registered) is decided by the parent picker's unified radio and
+// passed in as `backendKind` — there is no longer a local dropdown here. The two K8s
+// backends have bespoke forms; every other kind (manifest + custom) uses the descriptor-
+// driven flat form / raw manifest editor. Switching the kind re-probes ONLY that kind's
+// descriptor (so a not-yet-connected custom kind's connect form renders) WITHOUT re-fetching
+// the stored connection — using `loadDescriptor` (not `loadKind`) avoids bouncing the
+// picker's selection back to the stored kind via a connection re-read.
 watch(
-  () => connection.value,
-  (c) => {
-    if (c?.kind) backendKind.value = c.kind
-  },
-  { immediate: true },
+  () => props.backendKind,
+  (k) => void store.loadDescriptor(props.kind, k).then(resetDraft),
 )
 
-// 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>
@@ -261,6 +240,7 @@ async function saveConfig(payload: {
   busy.value = true
   try {
     await store.register(props.kind, payload)
+    emit('connected')
     toastSaved()
   } catch (e) {
     notifyError(t('settings.providerConnection.toast.saveFailed'), e)
@@ -350,20 +330,12 @@ function fieldHelp(key: string): string | undefined {
       }}
     </div>
 
-    <!-- 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). -->
     <KubernetesRunnerForm
       v-if="kind === 'runner-pool' && backendKind === 'kubernetes'"
       :connection="connection"
+      :preset="preset"
+      :suggested-image="suggestedImage"
       :supports-test="descriptor.supportsTest"
       :testing="testing"
       :busy="busy"
@@ -463,31 +435,20 @@ function fieldHelp(key: string): string | undefined {
       </div>
     </div>
 
-    <!-- MANIFEST-driven provider: the raw JSON manifest editor. Collapsed by default — it's
-         the advanced path, needed ONLY to integrate a custom API-based scheduler. The common
-         backends (local Docker, Cloudflare Containers, Kubernetes) don't need it. -->
-    <details
+    <!-- MANIFEST-driven provider: the raw JSON manifest editor. The radio already selected
+         "custom HTTP" so it's shown expanded — no extra disclosure. -->
+    <ProviderManifestEditor
       v-else
-      class="rounded-lg border border-slate-700 bg-slate-900/40 p-3"
-      :open="!!connection"
-    >
-      <summary class="cursor-pointer text-sm font-medium text-slate-200">
-        {{ t('settings.providerConnection.advancedManifest.summary') }}
-      </summary>
-      <p class="mt-2 mb-3 text-[11px] text-slate-400">
-        {{ t('settings.providerConnection.advancedManifest.intro') }}
-      </p>
-      <ProviderManifestEditor
-        :kind="kind"
-        :saved-manifest="descriptor.savedManifest"
-        :connected="!!connection"
-        :supports-test="descriptor.supportsTest"
-        :testing="testing"
-        :busy="busy"
-        :test-result="testResult"
-        @test="testManifest"
-        @save="saveManifest"
-      />
-    </details>
+      :kind="kind"
+      :saved-manifest="descriptor.savedManifest"
+      :connected="!!connection"
+      :stored-secret-keys="connection?.secretKeys ?? []"
+      :supports-test="descriptor.supportsTest"
+      :testing="testing"
+      :busy="busy"
+      :test-result="testResult"
+      @test="testManifest"
+      @save="saveManifest"
+    />
   </div>
 </template>

package/app/components/settings/ProviderManifestEditor.vue

@@ -25,6 +25,9 @@ const props = defineProps<{
   savedManifest?: Record<string, unknown>
   /** Whether a connection already exists (drives the re-enter-secrets hint + button label). */
   connected: boolean
+  /** The secret keys already stored for this connection (names only) — shown next to the
+   *  write-only inputs so it's obvious what exists without scrolling to the summary. */
+  storedSecretKeys?: string[]
   /** Whether the provider exposes a connection test the UI can call. */
   supportsTest: boolean
   /** Bubbled-up busy state from the tab's store calls (so the editor shows loading). */
@@ -235,9 +238,22 @@ function onSave() {
       <p v-if="!secretKeys.length" class="text-[11px] text-slate-500">
         {{ t('settings.providerConnection.manifestEditor.noSecrets') }}
       </p>
-      <p v-else-if="connected" class="text-[11px] text-amber-300/80">
-        {{ t('settings.providerConnection.manifestEditor.reenterSecrets') }}
-      </p>
+      <template v-else-if="connected">
+        <p
+          v-if="storedSecretKeys && storedSecretKeys.length"
+          class="text-[11px] text-slate-400"
+          data-testid="manifest-editor-stored"
+        >
+          {{
+            t('settings.providerConnection.manifestEditor.stored', {
+              keys: storedSecretKeys.join(', '),
+            })
+          }}
+        </p>
+        <p class="text-[11px] text-amber-300/80">
+          {{ t('settings.providerConnection.manifestEditor.reenterSecrets') }}
+        </p>
+      </template>
       <UFormField v-for="key in secretKeys" :key="key" :label="key">
         <UInput
           v-model="secrets[key]"