@cat-factory/app 0.59.2 → 0.60.0

package/app/components/environments/EnvironmentStatusPanel.vue

@@ -3,12 +3,39 @@
 // the live URL, the TTL, and — when it failed/expired — the verbatim provider error.
 // Used in a run's details (AgentStepDetail) so the Tester (and any env-consuming step)
 // shows whether the env is spinning up / running / shut down / errored, with the error.
+import type { InfraEngine, ProvisionType } from '@cat-factory/contracts'
 import type { RunEnvironment, HumanTestEnvironmentStatus } from '~/types/execution'
 
-defineProps<{ environment: RunEnvironment | null; degradedReason?: string | null }>()
+const props = defineProps<{ environment: RunEnvironment | null; degradedReason?: string | null }>()
 
 const { t, d } = useI18n()
 
+// Exhaustive enum→key maps (keep the typed-key drift guard live) for the resolved
+// provision type + engine recorded on the handle, so run details state exactly what was
+// stood up and how. `infraless`/`none` are filtered out of the display below.
+const PROVISION_TYPE_KEYS: Record<ProvisionType, string> = {
+  kubernetes: 'environments.provisionType.kubernetes',
+  'docker-compose': 'environments.provisionType.docker-compose',
+  custom: 'environments.provisionType.custom',
+  infraless: 'environments.provisionType.infraless',
+}
+const ENGINE_KEYS: Record<InfraEngine, string> = {
+  'local-docker': 'environments.engine.local-docker',
+  'local-k3s': 'environments.engine.local-k3s',
+  'remote-kubernetes': 'environments.engine.remote-kubernetes',
+  'remote-custom': 'environments.engine.remote-custom',
+  none: 'environments.engine.none',
+}
+
+const provisionTypeLabel = computed(() => {
+  const pt = props.environment?.provisionType
+  return pt ? t(PROVISION_TYPE_KEYS[pt]) : null
+})
+const engineLabel = computed(() => {
+  const e = props.environment?.engine
+  return e && e !== 'none' ? t(ENGINE_KEYS[e]) : null
+})
+
 // Exhaustive enum→label map of literal `t(...)` keys (keeps the typed-key drift guard
 // live); the color/icon stay static, English-neutral styling.
 const ENV_STATUS_META = computed<
@@ -82,6 +109,18 @@ const ENV_STATUS_META = computed<
       <p v-if="environment.expiresAt" class="text-[11px] text-slate-500">
         {{ t('environments.expires', { date: d(new Date(environment.expiresAt), 'long') }) }}
       </p>
+      <!-- The resolved provision type + engine recorded at provision time, so a run states
+           exactly what was provisioned and how (the what/where ÷ how split). -->
+      <dl v-if="provisionTypeLabel || engineLabel" class="flex flex-wrap gap-x-4 gap-y-0.5">
+        <div v-if="provisionTypeLabel" class="flex items-center gap-1 text-[11px]">
+          <dt class="text-slate-500">{{ t('environments.provisionTypeLabel') }}</dt>
+          <dd class="text-slate-300">{{ provisionTypeLabel }}</dd>
+        </div>
+        <div v-if="engineLabel" class="flex items-center gap-1 text-[11px]">
+          <dt class="text-slate-500">{{ t('environments.engineLabel') }}</dt>
+          <dd class="text-slate-300">{{ engineLabel }}</dd>
+        </div>
+      </dl>
       <!-- The verbatim provider error when the environment failed/expired. -->
       <pre
         v-if="

package/app/components/panels/inspector/ServiceTestConfig.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import type { Block, CloudProvider, InstanceSize, ProvisionType } from '~/types/domain'
+import { computed, onMounted, ref, watch } from 'vue'
+import type {
+  Block,
+  CloudProvider,
+  InstanceSize,
+  ProvisionType,
+  ServiceProvisioning,
+} from '~/types/domain'
+import type { KubernetesManifestSource, KubernetesRenderer } from '@cat-factory/contracts'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 
 // Service-level (frame) configuration: the service-owned PROVISIONING — the provision
 // TYPE this service produces (`infraless` / `docker-compose` / `kubernetes` / `custom`)
-// plus, for docker-compose, the in-repo compose path the Tester stands up — and the
-// cloud provider + instance size the service's container jobs run on. The WORKSPACE
-// configures HOW each type is handled (the engine + connection), so this view only owns
-// the "what + where". Autodiscovery suggests a compose path when the service is added.
+// plus the in-repo specifics it owns (the "what + where"): where its kubernetes manifests
+// live (colocated path or a separate repo) + the renderer, its compose path, or the custom
+// manifest id it pins. The WORKSPACE configures HOW each type is handled (the engine +
+// connection); this view only owns the "what + where". Autodiscovery suggests a compose path
+// when the service is added.
 const props = defineProps<{
   block: Block
   // Repo backing this service, supplied by the add-service modal when the block is
@@ -20,13 +28,44 @@ const board = useBoardStore()
 const accounts = useAccountsStore()
 const github = useGitHubStore()
 const services = useServicesStore()
+const infra = useInfraConfigStore()
 const { t } = useI18n()
 
+// The custom-manifest-type catalog feeds the `custom` picker. Cheap + shared (coalesced).
+onMounted(() => void infra.ensureLoaded())
+
 // The service's declared provision type (absent ⇒ treated as `infraless`: no environment
-// is stood up for the Tester). Switching type preserves the compose path so toggling away
-// and back doesn't lose it.
+// is stood up for the Tester). Switching type MERGES onto the existing provisioning so each
+// type's in-repo specifics survive toggling away and back (only the branch matching the type
+// is meaningful — the others are ignored at provision time).
 const provisionType = computed<ProvisionType>(() => props.block.provisioning?.type ?? 'infraless')
 const composePath = computed(() => props.block.provisioning?.composePath ?? '')
+const localDevOnly = computed(() => props.block.provisioning?.localDevOnly === true)
+// Local kube manifest-source edit state, seeded once per block from the persisted (and
+// already-validated) source. Driving the inputs from local refs rather than the
+// discriminated persisted object keeps the repo/ref across a colocated<->separate toggle
+// and lets a half-entered source live in the form WITHOUT writing a value the server would
+// reject (the schema requires a non-empty repo for `separate` and a non-empty path for
+// both). We only persist the source once it's valid (see commitManifestSource).
+const kubeSourceType = ref<'colocated' | 'separate'>('colocated')
+const kubeRepo = ref('')
+const kubeRef = ref('')
+const kubePath = ref('')
+const kubeRenderer = ref<KubernetesRenderer>('raw')
+watch(
+  () => props.block.id,
+  () => {
+    const src = props.block.provisioning?.manifestSource
+    kubeSourceType.value = src?.type ?? 'colocated'
+    kubePath.value = src?.path ?? ''
+    kubeRenderer.value = src?.renderer ?? 'raw'
+    kubeRepo.value = src?.type === 'separate' ? src.repo : ''
+    kubeRef.value = src?.type === 'separate' ? (src.ref ?? '') : ''
+  },
+  { immediate: true },
+)
+const customManifestId = computed(() => props.block.provisioning?.manifestId ?? '')
+const customManifestPath = computed(() => props.block.provisioning?.manifestPath ?? '')
 
 const PROVISION_TYPES = computed<{ value: ProvisionType; label: string }[]>(() => [
   { value: 'infraless', label: t('inspector.testConfig.provisionTypes.infraless') },
@@ -35,20 +74,79 @@ const PROVISION_TYPES = computed<{ value: ProvisionType; label: string }[]>(() =
   { value: 'custom', label: t('inspector.testConfig.provisionTypes.custom') },
 ])
 
+const RENDERERS = computed<{ value: KubernetesRenderer; label: string }[]>(() => [
+  { value: 'raw', label: t('inspector.testConfig.renderers.raw') },
+  { value: 'kustomize', label: t('inspector.testConfig.renderers.kustomize') },
+])
+
+const customTypeItems = computed(() =>
+  infra.customTypes.map((c) => ({ label: `${c.label} (${c.manifestId})`, value: c.manifestId })),
+)
+
+// Merge a partial onto the current provisioning, preserving the other branches' fields.
+function patchProvisioning(patch: Partial<ServiceProvisioning>) {
+  const current: ServiceProvisioning = props.block.provisioning ?? { type: 'infraless' }
+  board.updateBlock(props.block.id, { provisioning: { ...current, ...patch } })
+}
+
 function setProvisionType(type: ProvisionType) {
-  // Carry the compose path across a switch so it isn't lost when toggling type.
-  board.updateBlock(props.block.id, {
-    provisioning: {
-      type,
-      ...(type === 'docker-compose' && composePath.value ? { composePath: composePath.value } : {}),
-    },
-  })
+  patchProvisioning({ type })
 }
 
 function setComposePath(value: string) {
-  board.updateBlock(props.block.id, {
-    provisioning: { type: 'docker-compose', composePath: value.trim() },
-  })
+  patchProvisioning({ type: 'docker-compose', composePath: value.trim() })
+}
+
+function setLocalDevOnly(value: boolean) {
+  patchProvisioning({ localDevOnly: value })
+}
+
+// Build the discriminated manifest source from the local edit state and persist it ONLY
+// when it satisfies the schema (a non-empty repo for `separate`, a non-empty path for both);
+// an incomplete edit sets the type but omits the source, so we never PATCH a value the
+// server would 422 on.
+function commitManifestSource() {
+  const path = kubePath.value.trim()
+  const rendererPart = kubeRenderer.value === 'kustomize' ? { renderer: kubeRenderer.value } : {}
+  let next: KubernetesManifestSource | undefined
+  if (kubeSourceType.value === 'separate') {
+    const repo = kubeRepo.value.trim()
+    const ref = kubeRef.value.trim()
+    if (repo && path)
+      next = { type: 'separate', repo, path, ...(ref ? { ref } : {}), ...rendererPart }
+  } else if (path) {
+    next = { type: 'colocated', path, ...rendererPart }
+  }
+  patchProvisioning(next ? { type: 'kubernetes', manifestSource: next } : { type: 'kubernetes' })
+}
+
+function setKubeSourceType(type: 'colocated' | 'separate') {
+  kubeSourceType.value = type
+  commitManifestSource()
+}
+function setKubeRepo(value: string) {
+  kubeRepo.value = value
+  commitManifestSource()
+}
+function setKubeRef(value: string) {
+  kubeRef.value = value
+  commitManifestSource()
+}
+function setKubePath(value: string) {
+  kubePath.value = value
+  commitManifestSource()
+}
+function setKubeRenderer(value: KubernetesRenderer) {
+  kubeRenderer.value = value
+  commitManifestSource()
+}
+
+function setCustomManifestId(value: string) {
+  patchProvisioning({ type: 'custom', manifestId: value || undefined })
+}
+
+function setCustomManifestPath(value: string) {
+  patchProvisioning({ type: 'custom', manifestPath: value.trim() || undefined })
 }
 
 // The provisioning hints (cloud provider + instance size) are advisory inputs to the
@@ -66,17 +164,22 @@ const repoContext = computed<{ githubId: number; directory?: string | null } | u
   return r ? { githubId: r.githubId } : undefined
 })
 
-// Compose-file picker: browse the repo and pin the compose file. The Tester runs
-// `docker compose -f <path>` from the CLONE ROOT, so the stored path is relative to
-// the repo root (the browser starts inside the service's subdirectory for convenience).
+// Repo-path picker, shared by the compose file (`docker compose -f <path>`) and the
+// kubernetes colocated manifests path. The stored path is relative to the repo root (the
+// browser starts inside the service's subdirectory for convenience).
 const browseOpen = ref(false)
+const browseTarget = ref<'compose' | 'k8s'>('compose')
 const pickedPath = ref<string | undefined>(undefined)
-function openBrowse() {
-  pickedPath.value = composePath.value || undefined
+function openBrowse(target: 'compose' | 'k8s') {
+  browseTarget.value = target
+  pickedPath.value = (target === 'compose' ? composePath.value : kubePath.value) || undefined
   browseOpen.value = true
 }
 function applyPicked() {
-  if (pickedPath.value) setComposePath(pickedPath.value)
+  if (pickedPath.value) {
+    if (browseTarget.value === 'compose') setComposePath(pickedPath.value)
+    else setKubePath(pickedPath.value)
+  }
   browseOpen.value = false
 }
 
@@ -134,39 +237,202 @@ function setSize(value: InstanceSize) {
       </p>
     </div>
 
-    <div v-if="provisionType === 'docker-compose'" class="space-y-1">
-      <label class="text-[11px] text-slate-400">{{ t('inspector.testConfig.composePath') }}</label>
-      <div class="flex items-center gap-1">
+    <div v-if="provisionType === 'docker-compose'" class="space-y-2">
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.composePath')
+        }}</label>
+        <div class="flex items-center gap-1">
+          <UInput
+            :model-value="composePath"
+            size="xs"
+            class="flex-1"
+            placeholder="docker-compose.yml"
+            @blur="(e: FocusEvent) => setComposePath((e.target as HTMLInputElement).value)"
+            @keydown.enter="
+              (e: KeyboardEvent) => setComposePath((e.target as HTMLInputElement).value)
+            "
+          />
+          <UButton
+            v-if="repoContext"
+            size="xs"
+            variant="soft"
+            color="neutral"
+            icon="i-lucide-folder-search"
+            :title="t('inspector.testConfig.browseRepo')"
+            @click="openBrowse('compose')"
+          />
+        </div>
+        <p class="text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.testConfig.composeHint') }}
+        </p>
+      </div>
+      <UCheckbox
+        :model-value="localDevOnly"
+        :label="t('inspector.testConfig.localDevOnly')"
+        size="xs"
+        @update:model-value="(v: boolean | 'indeterminate') => setLocalDevOnly(v === true)"
+      />
+    </div>
+
+    <!-- kubernetes: where the per-PR manifests live (the "what/where"). The engine + cluster
+         connection (the "how") is configured per-type in the Infrastructure window. -->
+    <div v-if="provisionType === 'kubernetes'" class="space-y-2">
+      <div class="space-y-1">
+        <span class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.manifestSourceLabel')
+        }}</span>
+        <div class="flex flex-wrap gap-1">
+          <UButton
+            :color="kubeSourceType === 'colocated' ? 'primary' : 'neutral'"
+            :variant="kubeSourceType === 'colocated' ? 'soft' : 'ghost'"
+            size="xs"
+            @click="setKubeSourceType('colocated')"
+          >
+            {{ t('inspector.testConfig.sourceColocated') }}
+          </UButton>
+          <UButton
+            :color="kubeSourceType === 'separate' ? 'primary' : 'neutral'"
+            :variant="kubeSourceType === 'separate' ? 'soft' : 'ghost'"
+            size="xs"
+            @click="setKubeSourceType('separate')"
+          >
+            {{ t('inspector.testConfig.sourceSeparate') }}
+          </UButton>
+        </div>
+      </div>
+
+      <div v-if="kubeSourceType === 'separate'" class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.manifestRepo')
+        }}</label>
+        <UInput
+          :model-value="kubeRepo"
+          size="xs"
+          class="font-mono"
+          placeholder="acme/preview-manifests"
+          @blur="(e: FocusEvent) => setKubeRepo((e.target as HTMLInputElement).value)"
+          @keydown.enter="(e: KeyboardEvent) => setKubeRepo((e.target as HTMLInputElement).value)"
+        />
+      </div>
+      <div v-if="kubeSourceType === 'separate'" class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.manifestRef')
+        }}</label>
+        <UInput
+          :model-value="kubeRef"
+          size="xs"
+          class="font-mono"
+          placeholder="main"
+          @blur="(e: FocusEvent) => setKubeRef((e.target as HTMLInputElement).value)"
+          @keydown.enter="(e: KeyboardEvent) => setKubeRef((e.target as HTMLInputElement).value)"
+        />
+      </div>
+
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.manifestPath')
+        }}</label>
+        <div class="flex items-center gap-1">
+          <UInput
+            :model-value="kubePath"
+            size="xs"
+            class="flex-1 font-mono"
+            placeholder="k8s/preview"
+            @blur="(e: FocusEvent) => setKubePath((e.target as HTMLInputElement).value)"
+            @keydown.enter="(e: KeyboardEvent) => setKubePath((e.target as HTMLInputElement).value)"
+          />
+          <UButton
+            v-if="repoContext && kubeSourceType === 'colocated'"
+            size="xs"
+            variant="soft"
+            color="neutral"
+            icon="i-lucide-folder-search"
+            :title="t('inspector.testConfig.browseRepo')"
+            @click="openBrowse('k8s')"
+          />
+        </div>
+        <p class="text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.testConfig.manifestPathHint') }}
+        </p>
+      </div>
+
+      <div class="space-y-1">
+        <span class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.rendererLabel')
+        }}</span>
+        <div class="flex flex-wrap gap-1">
+          <UButton
+            v-for="r in RENDERERS"
+            :key="r.value"
+            :color="kubeRenderer === r.value ? 'primary' : 'neutral'"
+            :variant="kubeRenderer === r.value ? 'soft' : 'ghost'"
+            size="xs"
+            @click="setKubeRenderer(r.value)"
+          >
+            {{ r.label }}
+          </UButton>
+        </div>
+        <p class="text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.testConfig.rendererHint') }}
+        </p>
+      </div>
+    </div>
+
+    <!-- custom: pin the custom manifest type this service produces (matched to a remote-custom
+         handler the workspace configures). -->
+    <div v-if="provisionType === 'custom'" class="space-y-2">
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.customManifestId')
+        }}</label>
+        <USelect
+          v-if="customTypeItems.length"
+          :model-value="customManifestId"
+          :items="customTypeItems"
+          size="xs"
+          :placeholder="t('inspector.testConfig.customManifestIdPlaceholder')"
+          @update:model-value="(v: string) => setCustomManifestId(v)"
+        />
+        <p v-else class="text-[11px] leading-snug text-amber-300/80">
+          {{ t('inspector.testConfig.customNoTypes') }}
+        </p>
+        <p class="text-[11px] leading-snug text-slate-500">
+          {{ t('inspector.testConfig.customManifestIdHint') }}
+        </p>
+      </div>
+      <div class="space-y-1">
+        <label class="text-[11px] text-slate-400">{{
+          t('inspector.testConfig.customManifestPath')
+        }}</label>
         <UInput
-          :model-value="composePath"
+          :model-value="customManifestPath"
           size="xs"
-          class="flex-1"
-          placeholder="docker-compose.yml"
-          @blur="(e: FocusEvent) => setComposePath((e.target as HTMLInputElement).value)"
+          class="font-mono"
+          @blur="(e: FocusEvent) => setCustomManifestPath((e.target as HTMLInputElement).value)"
           @keydown.enter="
-            (e: KeyboardEvent) => setComposePath((e.target as HTMLInputElement).value)
+            (e: KeyboardEvent) => setCustomManifestPath((e.target as HTMLInputElement).value)
           "
         />
-        <UButton
-          v-if="repoContext"
-          size="xs"
-          variant="soft"
-          color="neutral"
-          icon="i-lucide-folder-search"
-          :title="t('inspector.testConfig.browseRepo')"
-          @click="openBrowse"
-        />
       </div>
-      <p class="text-[11px] leading-snug text-slate-500">
-        {{ t('inspector.testConfig.composeHint') }}
-      </p>
     </div>
 
-    <UModal v-model:open="browseOpen" :title="t('inspector.testConfig.selectComposeTitle')">
+    <UModal
+      v-model:open="browseOpen"
+      :title="
+        browseTarget === 'compose'
+          ? t('inspector.testConfig.selectComposeTitle')
+          : t('inspector.testConfig.selectManifestTitle')
+      "
+    >
       <template #body>
         <div v-if="repoContext" class="space-y-3">
           <p class="text-xs text-slate-400">
-            {{ t('inspector.testConfig.selectComposeHint') }}
+            {{
+              browseTarget === 'compose'
+                ? t('inspector.testConfig.selectComposeHint')
+                : t('inspector.testConfig.selectManifestHint')
+            }}
           </p>
           <RepoTreeBrowser
             v-model="pickedPath"

package/app/components/settings/CustomManifestTypeEditor.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// The custom-manifest-type catalog editor: lists the open set of `custom` provision types —
+// the read-only programmatically-REGISTERED ones (from code providers) plus the WORKSPACE-
+// defined ones a user can add/edit/remove here. A service pins one of these (its `manifestId`)
+// and a `remote-custom` handler declares which it accepts. Writes the workspace entries via the
+// infraConfig store (`PUT|DELETE /environments/custom-types/:manifestId`).
+import { computed, reactive, ref } from 'vue'
+import type { CustomManifestType } from '@cat-factory/contracts'
+
+const { t } = useI18n()
+const infra = useInfraConfigStore()
+const toast = useToast()
+
+// A draft for the add/edit form. `manifestId` is locked on edit (it's the PK).
+const draft = reactive({ manifestId: '', label: '', acceptsInputHint: '', description: '' })
+const editing = ref(false)
+const busy = ref(false)
+
+const manifestIdValid = computed(() => /^[a-z0-9][a-z0-9-]*$/.test(draft.manifestId.trim()))
+const canSave = computed(
+  () => (editing.value || manifestIdValid.value) && !!draft.label.trim() && !busy.value,
+)
+
+function startAdd() {
+  Object.assign(draft, { manifestId: '', label: '', acceptsInputHint: '', description: '' })
+  editing.value = false
+}
+
+function startEdit(type: CustomManifestType) {
+  Object.assign(draft, {
+    manifestId: type.manifestId,
+    label: type.label,
+    acceptsInputHint: type.acceptsInputHint ?? '',
+    description: type.description ?? '',
+  })
+  editing.value = true
+}
+
+async function save() {
+  if (!canSave.value) return
+  busy.value = true
+  try {
+    await infra.upsertCustomType(draft.manifestId.trim(), {
+      label: draft.label.trim(),
+      ...(draft.acceptsInputHint.trim() ? { acceptsInputHint: draft.acceptsInputHint.trim() } : {}),
+      ...(draft.description.trim() ? { description: draft.description.trim() } : {}),
+    })
+    startAdd()
+  } catch (e) {
+    toast.add({
+      title: t('settings.infrastructure.customType.saveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+
+async function remove(type: CustomManifestType) {
+  busy.value = true
+  try {
+    await infra.removeCustomType(type.manifestId)
+    if (editing.value && draft.manifestId === type.manifestId) startAdd()
+  } catch (e) {
+    toast.add({
+      title: t('settings.infrastructure.customType.removeFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
+    <div>
+      <h3 class="text-sm font-semibold text-slate-200">
+        {{ t('settings.infrastructure.customType.title') }}
+      </h3>
+      <p class="text-[11px] text-slate-500">{{ t('settings.infrastructure.customType.hint') }}</p>
+    </div>
+
+    <!-- The catalog: registered (read-only) + workspace (editable). -->
+    <ul v-if="infra.customTypes.length" class="space-y-1.5">
+      <li
+        v-for="type in infra.customTypes"
+        :key="type.manifestId"
+        class="flex items-start justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/50 px-2.5 py-1.5"
+      >
+        <div class="min-w-0">
+          <div class="flex items-center gap-1.5">
+            <span class="truncate text-[13px] text-slate-200">{{ type.label }}</span>
+            <UBadge
+              :color="type.source === 'workspace' ? 'primary' : 'neutral'"
+              variant="subtle"
+              size="sm"
+            >
+              {{ t(`settings.infrastructure.customType.source.${type.source}`) }}
+            </UBadge>
+          </div>
+          <code class="text-[11px] text-slate-500">{{ type.manifestId }}</code>
+          <p v-if="type.description" class="text-[11px] text-slate-400">{{ type.description }}</p>
+        </div>
+        <div v-if="type.source === 'workspace'" class="flex shrink-0 items-center gap-0.5">
+          <UButton
+            icon="i-lucide-pencil"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            :disabled="busy"
+            @click="startEdit(type)"
+          />
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            size="xs"
+            :disabled="busy"
+            @click="remove(type)"
+          />
+        </div>
+      </li>
+    </ul>
+    <p v-else class="text-[11px] text-slate-500">
+      {{ t('settings.infrastructure.customType.empty') }}
+    </p>
+
+    <!-- Add / edit a workspace-defined type. -->
+    <div class="space-y-2 border-t border-slate-800 pt-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        {{
+          editing
+            ? t('settings.infrastructure.customType.editTitle', { id: draft.manifestId })
+            : t('settings.infrastructure.customType.addTitle')
+        }}
+      </p>
+      <UFormField
+        v-if="!editing"
+        :label="t('settings.infrastructure.customType.manifestId')"
+        :help="t('settings.infrastructure.customType.manifestIdHelp')"
+      >
+        <UInput v-model="draft.manifestId" class="font-mono" placeholder="my-kargo-template" />
+      </UFormField>
+      <UFormField :label="t('settings.infrastructure.customType.label')">
+        <UInput v-model="draft.label" />
+      </UFormField>
+      <UFormField
+        :label="t('settings.infrastructure.customType.acceptsInputHint')"
+        :help="t('settings.infrastructure.customType.acceptsInputHintHelp')"
+      >
+        <UInput v-model="draft.acceptsInputHint" />
+      </UFormField>
+      <UFormField :label="t('settings.infrastructure.customType.description')">
+        <UTextarea v-model="draft.description" :rows="2" />
+      </UFormField>
+      <div class="flex justify-end gap-2">
+        <UButton v-if="editing" color="neutral" variant="ghost" size="sm" @click="startAdd">
+          {{ t('common.cancel') }}
+        </UButton>
+        <UButton color="primary" size="sm" :loading="busy" :disabled="!canSave" @click="save">
+          {{ editing ? t('common.save') : t('settings.infrastructure.customType.add') }}
+        </UButton>
+      </div>
+    </div>
+  </section>
+</template>