@cat-factory/app 0.308.0 → 0.310.0

package/app/components/settings/ComposeEnvironmentSetupSection.vue

@@ -13,6 +13,8 @@
 // is a five-minute flow that touches a repo and can trial-provision a stack, so "when you need
 // this / when you don't" has to be answerable BEFORE opening it — most services on most boards
 // never need it at all.
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const { t } = useI18n()
 const ui = useUiStore()
 
@@ -52,34 +54,34 @@ function start() {
       </p>
     </div>
 
-    <div class="rounded border border-default bg-default/40 p-3">
-      <p class="text-[11px] font-medium uppercase tracking-wide text-muted">
+    <div class="rounded-sm border border-default bg-default/40 p-3">
+      <SectionLabel as="p">
         {{ t('settings.composeEnvSetup.how.title') }}
-      </p>
-      <ol class="mt-2 list-decimal space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
+      </SectionLabel>
+      <ol class="mt-2 list-decimal space-y-1 ps-4 text-2xs leading-relaxed text-muted">
         <li v-for="(step, i) in steps" :key="`how-${i}`">{{ step }}</li>
       </ol>
-      <p class="mt-2 text-[11px] leading-relaxed text-dimmed">
+      <p class="mt-2 text-2xs leading-relaxed text-dimmed">
         {{ t('settings.composeEnvSetup.how.outcome') }}
       </p>
     </div>
 
     <div class="grid gap-2 sm:grid-cols-2">
-      <div class="rounded border border-app-success-900/50 bg-app-success-950/20 p-3">
-        <p class="flex items-center gap-1.5 text-[11px] font-medium text-app-success-200/90">
+      <div class="rounded-sm border border-app-success-900/50 bg-app-success-950/20 p-3">
+        <p class="flex items-center gap-1.5 text-2xs font-medium text-app-success-200/90">
           <UIcon name="i-lucide-check" class="h-3.5 w-3.5 shrink-0" />
           {{ t('settings.composeEnvSetup.needed.title') }}
         </p>
-        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-2xs leading-relaxed text-muted">
           <li v-for="(item, i) in needed" :key="`need-${i}`">{{ item }}</li>
         </ul>
       </div>
-      <div class="rounded border border-default bg-default/40 p-3">
-        <p class="flex items-center gap-1.5 text-[11px] font-medium text-toned">
+      <div class="rounded-sm border border-default bg-default/40 p-3">
+        <p class="flex items-center gap-1.5 text-2xs font-medium text-toned">
           <UIcon name="i-lucide-minus" class="h-3.5 w-3.5 shrink-0" />
           {{ t('settings.composeEnvSetup.notNeeded.title') }}
         </p>
-        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-[11px] leading-relaxed text-muted">
+        <ul class="mt-1.5 list-disc space-y-1 ps-4 text-2xs leading-relaxed text-muted">
           <li v-for="(item, i) in notNeeded" :key="`skip-${i}`">{{ item }}</li>
         </ul>
       </div>
@@ -96,7 +98,7 @@ function start() {
       >
         {{ t('settings.composeEnvSetup.start') }}
       </UButton>
-      <span class="text-[11px] text-dimmed">{{ t('settings.composeEnvSetup.rerunHint') }}</span>
+      <span class="text-2xs text-dimmed">{{ t('settings.composeEnvSetup.rerunHint') }}</span>
     </div>
   </section>
 </template>

package/app/components/settings/ConnectionTestVerdict.vue

@@ -57,6 +57,6 @@ const detail = computed(() => (causeKey.value ? (props.result?.message ?? '') :
   </p>
   <div v-else-if="result" class="space-y-0.5" data-testid="connection-test-result">
     <p class="text-xs text-app-error-400 break-words">{{ headline }}</p>
-    <p v-if="detail" class="text-[11px] text-muted break-words">{{ detail }}</p>
+    <p v-if="detail" class="text-2xs text-muted break-words">{{ detail }}</p>
   </div>
 </template>

package/app/components/settings/ConsensusGroupsSection.vue

@@ -13,6 +13,8 @@ import { computed, ref } from 'vue'
 import type { ConsensusGroup, ConsensusStrategy } from '~/types/consensus'
 import { isSelectable } from '~/stores/models'
 import { uid } from '~/utils/catalog'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 const groups = useConsensusGroupsStore()
@@ -115,6 +117,17 @@ const selectableModelIds = computed(() => {
     .map((m) => ({ id: m.id, label: m.label }))
 })
 
+// "Inherit the step's model" is a NAMED sentinel in the picker, never an empty string and never
+// `undefined`: a Select reserves both for "nothing selected", so an item carrying one either
+// throws (empty string) or renders the placeholder over its own label (undefined). One item list
+// serves both pickers; each binding below maps the sentinel to what its field holds on the wire,
+// which is `undefined` for a participant and an empty string for the synthesizer.
+const STEP_MODEL = '__step__'
+const modelItems = computed(() => [
+  { label: t('settings.consensusGroups.editor.stepModel'), value: STEP_MODEL },
+  ...selectableModelIds.value.map((m) => ({ label: m.label, value: m.id })),
+])
+
 /**
  * A threshold field's value as the contract wants it, or undefined when the author left it blank.
  *
@@ -245,27 +258,27 @@ async function remove(group: ConsensusGroup) {
             <span class="truncate text-sm font-semibold text-app-100">{{ g.name }}</span>
             <UBadge color="neutral" variant="subtle" size="xs">{{ barLabel(g) }}</UBadge>
             <div class="ms-auto flex items-center gap-1">
-              <UButton
+              <IconButton
                 size="xs"
                 variant="ghost"
                 color="neutral"
                 icon="i-lucide-pencil"
-                :title="t('settings.consensusGroups.list.editTitle')"
+                :label="t('settings.consensusGroups.list.editTitle')"
                 @click="startEdit(g)"
               />
-              <UButton
+              <IconButton
                 size="xs"
                 variant="ghost"
                 color="error"
                 icon="i-lucide-trash-2"
                 :loading="busy"
-                :title="t('settings.consensusGroups.list.deleteTitle')"
+                :label="t('settings.consensusGroups.list.deleteTitle')"
                 @click="remove(g)"
               />
             </div>
           </div>
-          <p v-if="g.description" class="mt-1 text-[11px] text-muted">{{ g.description }}</p>
-          <div class="mt-1.5 text-[11px] text-muted">
+          <p v-if="g.description" class="mt-1 text-2xs text-muted">{{ g.description }}</p>
+          <div class="mt-1.5 text-2xs text-muted">
             {{ t(`pipeline.builder.strategyOption.${g.strategy}`) }}
             ·
             {{
@@ -287,9 +300,9 @@ async function remove(group: ConsensusGroup) {
     <div v-else class="space-y-4 rounded-xl border border-default bg-default/50 p-4">
       <div class="grid gap-3 sm:grid-cols-2">
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.nameLabel') }}
-          </label>
+          </SectionLabel>
           <UInput
             v-model="editor.name"
             size="sm"
@@ -298,22 +311,17 @@ async function remove(group: ConsensusGroup) {
           />
         </div>
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.strategyLabel') }}
-          </label>
-          <select
-            v-model="editor.strategy"
-            class="w-full rounded border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
-          >
-            <option v-for="s in STRATEGIES" :key="s.value" :value="s.value">{{ s.label }}</option>
-          </select>
+          </SectionLabel>
+          <USelect v-model="editor.strategy" :items="STRATEGIES" size="sm" class="w-full" />
         </div>
       </div>
 
       <div>
-        <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="label" class="mb-1 block">
           {{ t('settings.consensusGroups.editor.descriptionLabel') }}
-        </label>
+        </SectionLabel>
         <UInput
           v-model="editor.description"
           size="sm"
@@ -325,9 +333,9 @@ async function remove(group: ConsensusGroup) {
       <!-- participants -->
       <div class="space-y-2">
         <div class="flex items-center justify-between">
-          <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="span">
             {{ t('settings.consensusGroups.editor.participantsLabel') }}
-          </span>
+          </SectionLabel>
           <UButton
             icon="i-lucide-plus"
             color="neutral"
@@ -337,7 +345,7 @@ async function remove(group: ConsensusGroup) {
             @click="addParticipant"
           />
         </div>
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.consensusGroups.editor.participantsHint') }}
         </p>
         <div
@@ -357,20 +365,20 @@ async function remove(group: ConsensusGroup) {
             class="min-w-40 flex-1"
             :placeholder="t('settings.consensusGroups.editor.framingPlaceholder')"
           />
-          <select
-            v-model="p.modelId"
-            class="w-44 rounded border border-muted bg-default px-1.5 py-1 text-xs text-toned"
-          >
-            <option :value="undefined">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
-            <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
-          </select>
-          <UButton
+          <USelect
+            :model-value="p.modelId || STEP_MODEL"
+            :items="modelItems"
+            size="xs"
+            class="w-44"
+            @update:model-value="p.modelId = $event === STEP_MODEL ? undefined : String($event)"
+          />
+          <IconButton
             icon="i-lucide-x"
             color="error"
             variant="ghost"
             size="xs"
             :disabled="editor.participants.length <= 2"
-            :title="t('pipeline.builder.removeParticipant')"
+            :label="t('pipeline.builder.removeParticipant')"
             @click="removeParticipant(index)"
           />
         </div>
@@ -378,32 +386,35 @@ async function remove(group: ConsensusGroup) {
 
       <div class="grid gap-3 sm:grid-cols-2">
         <div>
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('settings.consensusGroups.editor.synthesizerLabel') }}
-          </label>
-          <select
-            v-model="editor.synthesizerModelId"
-            class="w-full rounded border border-muted bg-default px-2 py-1.5 text-sm text-app-100"
-          >
-            <option value="">{{ t('settings.consensusGroups.editor.stepModel') }}</option>
-            <option v-for="m in selectableModelIds" :key="m.id" :value="m.id">{{ m.label }}</option>
-          </select>
+          </SectionLabel>
+          <USelect
+            :model-value="editor.synthesizerModelId || STEP_MODEL"
+            :items="modelItems"
+            size="sm"
+            class="w-full"
+            @update:model-value="
+              editor.synthesizerModelId = $event === STEP_MODEL ? '' : String($event)
+            "
+          />
         </div>
         <div v-if="editor.strategy === 'debate'">
-          <label class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="label" class="mb-1 block">
             {{ t('pipeline.builder.rounds') }}
-          </label>
+          </SectionLabel>
           <UInput v-model.number="editor.rounds" type="number" min="1" max="5" size="sm" />
         </div>
       </div>
 
       <!-- the estimate bar -->
       <div class="space-y-2 rounded-lg border border-default bg-app-950/40 p-3">
-        <label class="flex items-center gap-2 text-xs text-toned">
-          <input v-model="editor.gated" type="checkbox" class="accent-app-success-500" />
-          {{ t('settings.consensusGroups.editor.gatedLabel') }}
-        </label>
-        <p class="text-[11px] text-dimmed">
+        <UCheckbox
+          v-model="editor.gated"
+          size="xs"
+          :label="t('settings.consensusGroups.editor.gatedLabel')"
+        />
+        <p class="text-2xs text-dimmed">
           {{ t('settings.consensusGroups.editor.gatedHint') }}
         </p>
         <div v-if="editor.gated" class="flex flex-wrap items-center gap-3 text-xs">
@@ -453,7 +464,7 @@ async function remove(group: ConsensusGroup) {
             />
           </label>
         </div>
-        <p v-if="gatingIncomplete" class="text-[11px] text-app-warning-400">
+        <p v-if="gatingIncomplete" class="text-2xs text-app-warning-400">
           {{ t('settings.consensusGroups.editor.gatingIncomplete') }}
         </p>
       </div>

package/app/components/settings/CustomManifestTypeEditor.vue

@@ -6,6 +6,7 @@
 // infraConfig store (`PUT|DELETE /environments/custom-types/:manifestId`).
 import { computed, reactive, ref } from 'vue'
 import type { CustomManifestType } from '@cat-factory/contracts'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
@@ -95,7 +96,7 @@ async function remove(type: CustomManifestType) {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.infrastructure.customType.title') }}
       </h3>
-      <p class="text-[11px] text-dimmed">{{ t('settings.infrastructure.customType.hint') }}</p>
+      <p class="text-2xs text-dimmed">{{ t('settings.infrastructure.customType.hint') }}</p>
     </div>
 
     <!-- The catalog: registered (read-only) + workspace (editable). -->
@@ -107,7 +108,7 @@ async function remove(type: CustomManifestType) {
       >
         <div class="min-w-0">
           <div class="flex items-center gap-1.5">
-            <span class="truncate text-[13px] text-default">{{ type.label }}</span>
+            <span class="truncate text-sm text-default">{{ type.label }}</span>
             <UBadge
               :color="type.source === 'workspace' ? 'primary' : 'neutral'"
               variant="subtle"
@@ -116,8 +117,8 @@ async function remove(type: CustomManifestType) {
               {{ t(`settings.infrastructure.customType.source.${type.source}`) }}
             </UBadge>
           </div>
-          <code class="text-[11px] text-dimmed">{{ type.manifestId }}</code>
-          <p v-if="type.description" class="text-[11px] text-muted">{{ type.description }}</p>
+          <code class="text-2xs text-dimmed">{{ type.manifestId }}</code>
+          <p v-if="type.description" class="text-2xs text-muted">{{ type.description }}</p>
         </div>
         <div v-if="type.source === 'workspace'" class="flex shrink-0 items-center gap-0.5">
           <UButton
@@ -139,19 +140,19 @@ async function remove(type: CustomManifestType) {
         </div>
       </li>
     </ul>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ t('settings.infrastructure.customType.empty') }}
     </p>
 
     <!-- Add / edit a workspace-defined type. -->
     <div class="space-y-2 border-t border-default pt-3">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{
           editing
             ? t('settings.infrastructure.customType.editTitle', { id: draft.manifestId })
             : t('settings.infrastructure.customType.addTitle')
         }}
-      </p>
+      </SectionLabel>
       <UFormField
         v-if="!editing"
         :label="t('settings.infrastructure.customType.manifestId')"

package/app/components/settings/DefaultProvisionTypeSection.vue

@@ -105,7 +105,7 @@ async function save() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.defaultProvision.title') }}
       </h3>
-      <p class="mt-1 text-[11px] leading-snug text-dimmed">
+      <p class="mt-1 text-2xs leading-snug text-dimmed">
         {{ t('settings.defaultProvision.hint') }}
       </p>
     </div>
@@ -125,7 +125,7 @@ async function save() {
     </div>
 
     <div v-if="selection.type === 'custom'" class="space-y-1">
-      <label class="text-[11px] text-muted">
+      <label class="text-2xs text-muted">
         {{ t('inspector.testConfig.customManifestId') }}
       </label>
       <USelect
@@ -138,7 +138,7 @@ async function save() {
         :placeholder="t('inspector.testConfig.customManifestIdPlaceholder')"
         @update:model-value="(v: string) => setManifestId(v)"
       />
-      <p v-else class="text-[11px] leading-snug text-app-warning-300/80">
+      <p v-else class="text-2xs leading-snug text-app-warning-300/80">
         {{ t('inspector.testConfig.customNoTypes') }}
       </p>
     </div>
@@ -147,7 +147,7 @@ async function save() {
          the workspace still has nothing stored. -->
     <p
       v-if="unset && selection.type"
-      class="text-[11px] leading-snug text-app-warning-300/80"
+      class="text-2xs leading-snug text-app-warning-300/80"
       data-testid="default-provision-suggestion-hint"
     >
       {{ t('settings.defaultProvision.suggestionHint') }}
@@ -165,7 +165,7 @@ async function save() {
       >
         {{ t('settings.defaultProvision.save') }}
       </UButton>
-      <span v-if="!unset && !dirty" class="text-[11px] text-dimmed">
+      <span v-if="!unset && !dirty" class="text-2xs text-dimmed">
         {{ t('settings.defaultProvision.savedState') }}
       </span>
     </div>

package/app/components/settings/InfraHandlersConfigurator.vue

@@ -30,6 +30,7 @@ import CustomManifestTypeEditor from '~/components/settings/CustomManifestTypeEd
 import CloudflareHandlerSection from '~/components/settings/CloudflareHandlerSection.vue'
 import ConnectionTestVerdict from '~/components/settings/ConnectionTestVerdict.vue'
 import { consumeKubernetesScrollAnchor } from '~/components/settings/InfraHandlersConfigurator.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const infra = useInfraConfigStore()
@@ -442,7 +443,7 @@ function toastRemoved() {
             disabled
             size="lg"
             :label="t('settings.infrastructure.handler.connectionEstablished')"
-            :ui="{ label: 'text-[13px] font-semibold text-app-success-300' }"
+            :ui="{ label: 'text-sm font-semibold text-app-success-300' }"
           />
           <UButton
             icon="i-lucide-trash-2"
@@ -454,7 +455,7 @@ function toastRemoved() {
             @click="removeKube"
           />
         </div>
-        <p class="pl-7 text-[11px] text-toned">
+        <p class="pl-7 text-2xs text-toned">
           {{ t('settings.infrastructure.handler.activeEngine') }}
           <span class="text-default">{{ kubeHandlerEngineLabel }}</span>
         </p>
@@ -472,13 +473,13 @@ function toastRemoved() {
           <ConnectionTestVerdict :result="kubeSavedTestResult" />
         </div>
       </div>
-      <p v-else class="flex items-center gap-1.5 text-[12px] text-dimmed">
+      <p v-else class="flex items-center gap-1.5 text-xs text-dimmed">
         <UIcon name="i-lucide-circle-dashed" class="h-3.5 w-3.5" />
         {{ t('settings.infrastructure.handler.notConnected') }}
       </p>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{
+        <span class="text-2xs text-muted">{{
           t('settings.infrastructure.handler.engineLabel')
         }}</span>
         <div class="flex flex-wrap gap-1">
@@ -513,22 +514,26 @@ function toastRemoved() {
 
       <!-- Local mode: a personal override for THIS machine, layered over the workspace handler. -->
       <div v-if="userOverridesOn" class="border-t border-default pt-2">
-        <button
-          type="button"
-          class="flex w-full items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-dimmed hover:text-toned"
+        <UButton
+          color="neutral"
+          variant="link"
+          class="group w-full p-0"
+          :aria-expanded="showKubeOverride"
           @click="showKubeOverride = !showKubeOverride"
         >
-          <UIcon
-            :name="showKubeOverride ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-            class="h-3.5 w-3.5"
-          />
-          {{ t('settings.infrastructure.handler.personalOverride') }}
-          <UBadge v-if="kubeUserHandler" color="primary" variant="subtle" size="sm">
-            {{ t('settings.infrastructure.handler.overrideActive') }}
-          </UBadge>
-        </button>
+          <SectionLabel as="span" class="flex w-full items-center gap-1.5 group-hover:text-default">
+            <UIcon
+              :name="showKubeOverride ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+              class="h-3.5 w-3.5"
+            />
+            {{ t('settings.infrastructure.handler.personalOverride') }}
+            <UBadge v-if="kubeUserHandler" color="primary" variant="subtle" size="sm">
+              {{ t('settings.infrastructure.handler.overrideActive') }}
+            </UBadge>
+          </SectionLabel>
+        </UButton>
         <div v-if="showKubeOverride" class="mt-2 space-y-2">
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('settings.infrastructure.handler.personalOverrideHint') }}
           </p>
           <p v-if="kubeUserHandler" class="flex justify-end">
@@ -562,7 +567,7 @@ function toastRemoved() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('inspector.testConfig.provisionTypes.docker-compose') }}
       </h3>
-      <p class="text-[12px] text-muted">
+      <p class="text-xs text-muted">
         {{ t('settings.infrastructure.dockerComposeInfo') }}
       </p>
     </section>
@@ -580,9 +585,9 @@ function toastRemoved() {
       <CustomManifestTypeEditor />
 
       <div v-if="infra.customTypes.length" class="space-y-2 border-t border-default pt-3">
-        <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+        <SectionLabel as="p">
           {{ t('settings.infrastructure.handler.customHandlerTitle') }}
-        </p>
+        </SectionLabel>
         <UFormField :label="t('settings.infrastructure.handler.customTypeLabel')">
           <USelect v-model="selectedCustomId" :items="customTypeItems" />
         </UFormField>
@@ -595,10 +600,7 @@ function toastRemoved() {
         >
           <USelect v-model="selectedBackendKind" :items="customBackendOptions" />
         </UFormField>
-        <p
-          v-if="customHandler"
-          class="flex items-center justify-between gap-2 text-[12px] text-toned"
-        >
+        <p v-if="customHandler" class="flex items-center justify-between gap-2 text-xs text-toned">
           <span class="text-app-success-400">{{
             t('settings.infrastructure.handler.customConnected')
           }}</span>

package/app/components/settings/InfrastructureBackendPicker.vue

@@ -199,6 +199,16 @@ const items = computed<PickerItem[]>(() => {
   return out
 })
 
+// The same list in the shape URadioGroup reads. `desc` is optional on a PickerItem and an empty
+// string renders an empty description line, so it is dropped rather than passed through blank.
+const backendItems = computed(() =>
+  items.value.map((item) => ({
+    value: item.id,
+    label: item.label,
+    ...(item.desc ? { description: item.desc } : {}),
+  })),
+)
+
 // 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(() => {
@@ -275,25 +285,15 @@ const labelKey = computed(() =>
       {{ 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-default">{{ item.label }}</span>
-          <span v-if="item.desc" class="block text-[11px] text-muted">{{ item.desc }}</span>
-        </span>
-      </label>
-    </div>
+    <URadioGroup
+      :model-value="selected"
+      :items="backendItems"
+      :disabled="saving"
+      :data-testid="`${axis}-backend-options`"
+      @update:model-value="select(String($event))"
+    />
 
-    <p v-if="showRegisterHint" class="text-[11px] text-app-warning-300/80">
+    <p v-if="showRegisterHint" class="text-2xs text-app-warning-300/80">
       {{ t('settings.infrastructure.registerHint') }}
     </p>