@cat-factory/app 0.308.0 → 0.310.0

package/app/components/sandbox/SandboxPanel.vue

@@ -6,6 +6,7 @@
 // and Fixtures (the graded inputs each run is scored against). Loaded on demand when the
 // window opens; 503 (the deployment hasn't provisioned the Sandbox DB) shows a notice.
 import { computed, ref, watch } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
 import type {
   SandboxExperimentStatus,
   SandboxFixtureKind,
@@ -15,6 +16,8 @@ import type {
   SandboxRun,
   SandboxUnsupportedReason,
 } from '~/types/sandbox'
+import SectionLabel from '~/components/common/SectionLabel.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const ui = useUiStore()
 const store = useSandboxStore()
@@ -221,6 +224,16 @@ const detailRows = computed(() =>
 )
 const selectedRun = ref<SandboxRun | null>(null)
 
+// Column definitions rather than hand-written `<th>`s: the header typography then comes from the
+// table theme instead of a per-file recipe.
+const detailColumns = computed<TableColumn<(typeof detailRows.value)[number]>[]>(() => [
+  { id: 'prompt', header: t('sandbox.results.col.prompt') },
+  { id: 'model', header: t('sandbox.results.col.model') },
+  { id: 'fixture', header: t('sandbox.results.col.fixture') },
+  { id: 'score', header: t('sandbox.results.col.score') },
+  { id: 'objective', header: t('sandbox.results.col.objective') },
+])
+
 function scoreColor(score: number): string {
   if (score >= 4) return 'text-app-success-400'
   if (score >= 3) return 'text-app-warning-400'
@@ -317,9 +330,9 @@ async function archive(prompt: SandboxPromptVersion) {
         <div v-if="tab === 'experiments'" class="grid gap-4 lg:grid-cols-2">
           <!-- builder -->
           <div class="space-y-3 rounded-lg border border-muted bg-default/40 p-3">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="p">
               {{ t('sandbox.builder.title') }}
-            </p>
+            </SectionLabel>
 
             <UFormField :label="t('sandbox.builder.agent')">
               <USelect
@@ -331,7 +344,7 @@ async function archive(prompt: SandboxPromptVersion) {
               <p
                 v-for="excluded in unrunnableAgentKinds"
                 :key="excluded.agentKind"
-                class="mt-1 text-[11px] leading-snug text-dimmed"
+                class="mt-1 text-2xs leading-snug text-dimmed"
               >
                 <span class="font-medium text-muted">{{ excluded.label }}:</span>
                 {{
@@ -343,9 +356,9 @@ async function archive(prompt: SandboxPromptVersion) {
             </UFormField>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel as="span" class="mb-1 block">
                 {{ t('sandbox.builder.promptVersions') }}
-              </span>
+              </SectionLabel>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="p in kindPrompts"
@@ -375,9 +388,9 @@ async function archive(prompt: SandboxPromptVersion) {
             </div>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel as="span" class="mb-1 block">
                 {{ t('sandbox.builder.models') }}
-              </span>
+              </SectionLabel>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="m in store.selectableModels"
@@ -399,9 +412,9 @@ async function archive(prompt: SandboxPromptVersion) {
             </div>
 
             <div>
-              <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <SectionLabel as="span" class="mb-1 block">
                 {{ t('sandbox.builder.fixtures') }}
-              </span>
+              </SectionLabel>
               <div class="max-h-28 space-y-1 overflow-auto pe-1">
                 <label
                   v-for="f in kindFixtures"
@@ -468,74 +481,79 @@ async function archive(prompt: SandboxPromptVersion) {
                 }}</UBadge>
               </div>
               <div class="overflow-auto">
-                <table class="w-full text-start text-xs">
-                  <thead class="text-dimmed">
-                    <tr>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.prompt') }}</th>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.model') }}</th>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.fixture') }}</th>
-                      <th class="py-1 pe-2 font-medium">{{ t('sandbox.results.col.score') }}</th>
-                      <th class="py-1 font-medium">{{ t('sandbox.results.col.objective') }}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr
-                      v-for="{ run, grade, fixtureName } in detailRows"
-                      :key="run.id"
-                      class="cursor-pointer border-t border-default hover:bg-elevated/40"
-                      @click="selectedRun = run"
+                <UTable
+                  :data="detailRows"
+                  :columns="detailColumns"
+                  :ui="{
+                    base: 'text-xs',
+                    th: 'ps-0 pe-2 py-1',
+                    td: 'ps-0 pe-2 py-1 text-xs whitespace-normal',
+                    tbody: '[&>tr]:cursor-pointer',
+                    empty: 'py-0',
+                  }"
+                  @select="(_event, row) => (selectedRun = row.original.run)"
+                >
+                  <template #prompt-cell="{ row }">
+                    <span class="text-toned">{{ row.original.run.promptLabel }}</span>
+                  </template>
+                  <template #model-cell="{ row }">
+                    <span class="font-mono text-2xs text-muted">{{ row.original.run.model }}</span>
+                  </template>
+                  <template #fixture-cell="{ row }">
+                    <span class="text-muted">{{ row.original.fixtureName }}</span>
+                  </template>
+                  <template #score-cell="{ row }">
+                    <span
+                      v-if="row.original.grade"
+                      :class="scoreColor(row.original.grade.weightedTotal)"
+                      class="font-semibold"
+                    >
+                      {{ row.original.grade.weightedTotal.toFixed(2) }}
+                    </span>
+                    <span
+                      v-else-if="row.original.run.status === 'failed'"
+                      class="text-app-error-400"
+                      >{{ t('sandbox.results.failed') }}</span
+                    >
+                    <span v-else class="text-app-600">&mdash;</span>
+                  </template>
+                  <template #objective-cell="{ row }">
+                    <span
+                      v-if="row.original.grade?.objective"
+                      :class="
+                        row.original.grade.objective.pass
+                          ? 'text-app-success-400'
+                          : 'text-app-warning-400'
+                      "
                     >
-                      <td class="py-1 pe-2 text-toned">{{ run.promptLabel }}</td>
-                      <td class="py-1 pe-2 font-mono text-[11px] text-muted">
-                        {{ run.model }}
-                      </td>
-                      <td class="py-1 pe-2 text-muted">{{ fixtureName }}</td>
-                      <td class="py-1 pe-2">
-                        <span
-                          v-if="grade"
-                          :class="scoreColor(grade.weightedTotal)"
-                          class="font-semibold"
-                        >
-                          {{ grade.weightedTotal.toFixed(2) }}
-                        </span>
-                        <span v-else-if="run.status === 'failed'" class="text-app-error-400">{{
-                          t('sandbox.results.failed')
-                        }}</span>
-                        <span v-else class="text-app-600">—</span>
-                      </td>
-                      <td class="py-1">
-                        <span
-                          v-if="grade?.objective"
-                          :class="
-                            grade.objective.pass ? 'text-app-success-400' : 'text-app-warning-400'
-                          "
-                        >
-                          {{ grade.objective.caught }}/{{ grade.objective.total }}
-                        </span>
-                        <span v-else class="text-app-600">—</span>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
+                      {{ row.original.grade.objective.caught }}/{{
+                        row.original.grade.objective.total
+                      }}
+                    </span>
+                    <span v-else class="text-app-600">&mdash;</span>
+                  </template>
+                  <!-- See InitiativeTrackerWindow: the fallback copy is untranslated. -->
+                  <template #empty />
+                </UTable>
               </div>
 
               <!-- selected cell output -->
               <div v-if="selectedRun" class="mt-3 border-t border-default pt-2">
-                <p class="mb-1 text-[11px] uppercase tracking-wide text-dimmed">
+                <SectionLabel as="p" class="mb-1">
                   {{ selectedRun.promptLabel }} · {{ selectedRun.model }}
-                </p>
+                </SectionLabel>
                 <p v-if="selectedRun.error" class="text-xs text-app-error-400">
                   {{ selectedRun.error }}
                 </p>
                 <pre
                   v-if="selectedRun.outputText"
-                  class="max-h-48 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-2 text-[11px] text-toned"
+                  class="max-h-48 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/60 p-2 text-2xs text-toned"
                   >{{ selectedRun.outputText }}</pre>
                 <div v-if="gradeByRun.get(selectedRun.id)" class="mt-2 space-y-0.5">
                   <p
                     v-for="d in gradeByRun.get(selectedRun.id)!.scores"
                     :key="d.key"
-                    class="text-[11px] text-muted"
+                    class="text-2xs text-muted"
                   >
                     <span :class="scoreColor(d.score)" class="font-semibold">{{ d.score }}</span>
                     <span class="ms-1 text-toned">{{ d.key }}</span>
@@ -545,11 +563,13 @@ async function archive(prompt: SandboxPromptVersion) {
               </div>
             </div>
 
-            <p class="text-[11px] uppercase tracking-wide text-dimmed">
+            <SectionLabel as="p">
               {{ t('sandbox.results.past') }}
-            </p>
+            </SectionLabel>
             <div class="max-h-56 space-y-1 overflow-auto">
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-for="x in store.experiments"
                 :key="x.id"
                 class="flex w-full items-center justify-between rounded-md border border-default bg-default/40 px-2 py-1.5 text-start text-sm hover:bg-elevated/50"
@@ -557,7 +577,7 @@ async function archive(prompt: SandboxPromptVersion) {
               >
                 <span class="truncate text-toned">{{ x.name }}</span>
                 <UBadge variant="soft" size="xs">{{ EXPERIMENT_STATUS_LABEL[x.status] }}</UBadge>
-              </button>
+              </UButton>
               <p v-if="!store.experiments.length" class="text-xs text-dimmed">
                 {{ t('sandbox.results.empty') }}
               </p>
@@ -591,15 +611,15 @@ async function archive(prompt: SandboxPromptVersion) {
                     }}
                   </UBadge>
                 </div>
-                <span class="text-[11px] text-dimmed">{{ p.agentKind }}</span>
+                <span class="text-2xs text-dimmed">{{ p.agentKind }}</span>
               </div>
               <div class="flex items-center gap-1">
-                <UButton
+                <IconButton
                   icon="i-lucide-pencil"
                   color="neutral"
                   variant="ghost"
                   size="xs"
-                  :title="
+                  :label="
                     p.origin === 'baseline'
                       ? t('sandbox.prompts.forkTitle')
                       : t('sandbox.prompts.editTitle')
@@ -609,14 +629,14 @@ async function archive(prompt: SandboxPromptVersion) {
                 <!-- Deploy: make this version the workspace's live prompt for its agent kind.
                      Offered on a graded candidate and on an older workspace revision (rolling
                      back), but not on the one already live, where it would be a no-op. -->
-                <UButton
+                <IconButton
                   v-if="canPromote(p)"
                   icon="i-lucide-rocket"
                   color="primary"
                   variant="ghost"
                   size="xs"
                   :loading="promoting === p.id"
-                  :title="t('sandbox.prompts.promoteTitle')"
+                  :label="t('sandbox.prompts.promoteTitle')"
                   @click="promote(p)"
                 />
                 <UButton
@@ -632,13 +652,13 @@ async function archive(prompt: SandboxPromptVersion) {
           </div>
 
           <div v-if="editing" class="space-y-2 rounded-lg border border-muted bg-default/40 p-3">
-            <p class="text-[11px] uppercase tracking-wide text-dimmed">
+            <SectionLabel as="p">
               {{
                 editing.origin === 'baseline'
                   ? t('sandbox.prompts.forkOf', { name: editing.name })
                   : t('sandbox.prompts.newVersionOf', { name: editing.name })
               }}
-            </p>
+            </SectionLabel>
             <UTextarea v-model="editText" :rows="16" class="w-full font-mono text-xs" autoresize />
             <div class="flex justify-end gap-2">
               <UButton
@@ -690,7 +710,7 @@ async function archive(prompt: SandboxPromptVersion) {
                 </UBadge>
               </div>
             </div>
-            <p v-if="f.objective?.kind === 'findings'" class="mt-0.5 text-[11px] text-dimmed">
+            <p v-if="f.objective?.kind === 'findings'" class="mt-0.5 text-2xs text-dimmed">
               {{
                 t(
                   'sandbox.fixtures.expectations',

package/app/components/settings/ApiTokensPanel.vue

@@ -259,7 +259,7 @@ async function revokeToken(key: PublicApiKey) {
                   {{ boundLabel(key) }}
                 </UBadge>
               </div>
-              <div class="text-[11px] text-dimmed">
+              <div class="text-2xs text-dimmed">
                 {{
                   t('settings.apiTokens.list.created', {
                     date: d(new Date(key.createdAt), 'short'),

package/app/components/settings/BudgetSettings.vue

@@ -5,6 +5,7 @@
 // operator sets a hard cap env var, the account/user input cannot exceed it and the cap is
 // shown here. See docs/initiatives/tiered-budgets.md.
 import { computed, reactive, ref, watch, type Ref } from 'vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t, n } = useI18n()
 const toast = useToast()
@@ -122,7 +123,7 @@ function saveUser() {
 
 <template>
   <div class="space-y-8">
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{ t('settings.workspaceSettings.budget.body') }}
     </p>
 
@@ -133,9 +134,9 @@ function saveUser() {
       </h3>
       <div class="grid grid-cols-2 gap-3">
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
-          </span>
+          </SectionLabel>
           <UInput
             v-model="wsDraft.spendMonthlyLimit"
             type="number"
@@ -145,9 +146,9 @@ function saveUser() {
           />
         </label>
         <label class="block">
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ t('settings.workspaceSettings.budget.currency') }}
-          </span>
+          </SectionLabel>
           <UInput
             v-model="wsDraft.spendCurrency"
             placeholder="EUR"
@@ -157,7 +158,7 @@ function saveUser() {
           />
         </label>
       </div>
-      <div v-if="workspace.spend" class="text-[11px] text-muted">
+      <div v-if="workspace.spend" class="text-2xs text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.spend.costSpent, workspace.spend.currency),
@@ -183,13 +184,13 @@ function saveUser() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.budget.account') }}
       </h3>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('settings.workspaceSettings.budget.accountBody') }}
       </p>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model="accountDraft"
           type="number"
@@ -202,13 +203,13 @@ function saveUser() {
       </label>
       <p
         v-if="accountCap != null"
-        class="text-[11px]"
+        class="text-2xs"
         :class="accountOverCap ? 'text-app-error-400' : 'text-app-warning-400'"
       >
         {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(accountCap) }) }}
         <span class="text-dimmed">({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span>
       </p>
-      <div v-if="workspace.accountSpend" class="text-[11px] text-muted">
+      <div v-if="workspace.accountSpend" class="text-2xs text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.accountSpend.costSpent),
@@ -216,7 +217,7 @@ function saveUser() {
           })
         }}
       </div>
-      <p v-if="!canEditAccount" class="text-[11px] text-dimmed">
+      <p v-if="!canEditAccount" class="text-2xs text-dimmed">
         {{ t('settings.workspaceSettings.budget.adminOnly') }}
       </p>
       <div v-if="canEditAccount" class="flex justify-end">
@@ -238,13 +239,13 @@ function saveUser() {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.budget.user') }}
       </h3>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('settings.workspaceSettings.budget.userBody') }}
       </p>
       <label class="block">
-        <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+        <SectionLabel as="span" class="mb-1 block">
           {{ t('settings.workspaceSettings.budget.monthlyLimit') }}
-        </span>
+        </SectionLabel>
         <UInput
           v-model="userDraft"
           type="number"
@@ -256,13 +257,13 @@ function saveUser() {
       </label>
       <p
         v-if="userCap != null"
-        class="text-[11px]"
+        class="text-2xs"
         :class="userOverCap ? 'text-app-error-400' : 'text-app-warning-400'"
       >
         {{ t('settings.workspaceSettings.budget.hardCap', { amount: money(userCap) }) }}
         <span class="text-dimmed">({{ t('settings.workspaceSettings.budget.hardCapHint') }})</span>
       </p>
-      <div v-if="workspace.userSpend" class="text-[11px] text-muted">
+      <div v-if="workspace.userSpend" class="text-2xs text-muted">
         {{
           t('settings.workspaceSettings.budget.spent', {
             spent: money(workspace.userSpend.costSpent),

package/app/components/settings/CapabilityCredentialsPanel.vue

@@ -173,7 +173,7 @@ async function removeKey(key: string) {
         </li>
       </ul>
 
-      <p v-if="entry.stored && entry.updatedAt" class="text-[11px] text-dimmed">
+      <p v-if="entry.stored && entry.updatedAt" class="text-2xs text-dimmed">
         {{
           t('settings.capabilityCredentials.storedAt', {
             date: d(new Date(entry.updatedAt), 'short'),
@@ -191,13 +191,13 @@ async function removeKey(key: string) {
            usual one, but a facade that wired the store and dropped the flag lands here too, and
            blaming a custom resolver would make that wiring bug read as a deliberate configuration
            and send the operator to the one place that cannot explain it. -->
-      <p v-else-if="view?.environmentFallback === true" class="text-[11px] text-dimmed">
+      <p v-else-if="view?.environmentFallback === true" class="text-2xs text-dimmed">
         {{ t('settings.capabilityCredentials.notStoredWithFallback') }}
       </p>
-      <p v-else-if="view?.environmentFallback === false" class="text-[11px] text-app-warning-400">
+      <p v-else-if="view?.environmentFallback === false" class="text-2xs text-app-warning-400">
         {{ t('settings.capabilityCredentials.notStored') }}
       </p>
-      <p v-else class="text-[11px] text-dimmed">
+      <p v-else class="text-2xs text-dimmed">
         {{ t('settings.capabilityCredentials.notStoredUnknownFallback') }}
       </p>
 
@@ -268,7 +268,7 @@ async function removeKey(key: string) {
       >
         <div class="min-w-0">
           <code class="font-mono text-sm">{{ orphan.key }}</code>
-          <span class="block text-[11px] text-dimmed">
+          <span class="block text-2xs text-dimmed">
             {{
               t('settings.capabilityCredentials.storedAt', {
                 date: d(new Date(orphan.updatedAt), 'short'),

package/app/components/settings/CloudflareHandlerSection.vue

@@ -147,7 +147,7 @@ async function remove() {
     <h3 class="text-sm font-semibold text-default">
       {{ t('inspector.testConfig.provisionTypes.cloudflare') }}
     </h3>
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{ t('settings.infrastructure.cloudflare.intro') }}
     </p>
 
@@ -162,7 +162,7 @@ async function remove() {
           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' }"
         />
         <div class="flex items-center gap-1">
           <UButton
@@ -185,31 +185,31 @@ async function remove() {
           />
         </div>
       </div>
-      <p class="pl-7 text-[11px] text-toned">
+      <p class="pl-7 text-2xs text-toned">
         {{ t('settings.infrastructure.cloudflare.connectedAs', { subdomain: workersSubdomain }) }}
       </p>
     </div>
 
     <div v-else class="space-y-2" data-testid="cloudflare-handler-form">
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.label')
         }}</label>
         <UInput v-model="label" size="xs" />
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.subdomain')
         }}</label>
         <UInput v-model="workersSubdomain" size="xs" placeholder="my-account" />
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.infrastructure.cloudflare.subdomainHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.token')
         }}</label>
         <UInput
@@ -222,55 +222,58 @@ async function remove() {
               : t('settings.infrastructure.cloudflare.tokenPlaceholder')
           "
         />
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.infrastructure.cloudflare.tokenHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('settings.infrastructure.cloudflare.repo')
         }}</label>
         <UInput v-model="repo" size="xs" placeholder="owner/repo" />
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('settings.infrastructure.cloudflare.repoHint') }}
         </p>
       </div>
 
-      <details class="rounded-md border border-muted/70 p-2">
-        <summary class="cursor-pointer text-[11px] text-muted">
-          {{ t('settings.infrastructure.cloudflare.advanced') }}
-        </summary>
-        <div class="mt-2 space-y-2">
-          <div class="space-y-1">
-            <label class="text-[11px] text-muted">{{
-              t('settings.infrastructure.cloudflare.workerTemplate')
-            }}</label>
+      <UCollapsible class="rounded-md border border-muted/70 p-2">
+        <template #default="{ open }">
+          <UButton
+            variant="link"
+            color="neutral"
+            size="xs"
+            :icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            :label="t('settings.infrastructure.cloudflare.advanced')"
+            :ui="{ base: 'w-full justify-start gap-1 p-0 text-2xs text-muted' }"
+          />
+        </template>
+        <template #content>
+          <div class="mt-2 space-y-2">
             <!-- The placeholder is a FORMAT EXAMPLE containing vue-i18n metacharacters, so it
                  stays inline rather than becoming a catalog key. -->
-            <UInput
-              v-model="workerNameTemplate"
+            <UFormField size="xs" :label="t('settings.infrastructure.cloudflare.workerTemplate')">
+              <UInput
+                v-model="workerNameTemplate"
+                size="xs"
+                placeholder="cat-factory-pr-{{pullNumber}}"
+              />
+            </UFormField>
+            <UFormField
               size="xs"
-              placeholder="cat-factory-pr-{{pullNumber}}"
-            />
+              :label="t('settings.infrastructure.cloudflare.environmentTemplate')"
+            >
+              <UInput v-model="environmentNameTemplate" size="xs" placeholder="pr-{{pullNumber}}" />
+            </UFormField>
+            <p class="text-2xs text-dimmed">
+              {{ t('settings.infrastructure.cloudflare.templateHint') }}
+            </p>
+            <UFormField size="xs" :label="t('settings.infrastructure.cloudflare.apiBaseUrl')">
+              <UInput v-model="apiBaseUrl" size="xs" placeholder="https://api.github.com" />
+            </UFormField>
           </div>
-          <div class="space-y-1">
-            <label class="text-[11px] text-muted">{{
-              t('settings.infrastructure.cloudflare.environmentTemplate')
-            }}</label>
-            <UInput v-model="environmentNameTemplate" size="xs" placeholder="pr-{{pullNumber}}" />
-          </div>
-          <p class="text-[11px] text-dimmed">
-            {{ t('settings.infrastructure.cloudflare.templateHint') }}
-          </p>
-          <div class="space-y-1">
-            <label class="text-[11px] text-muted">{{
-              t('settings.infrastructure.cloudflare.apiBaseUrl')
-            }}</label>
-            <UInput v-model="apiBaseUrl" size="xs" placeholder="https://api.github.com" />
-          </div>
-        </div>
-      </details>
+        </template>
+      </UCollapsible>
 
       <div class="flex items-center gap-2">
         <UButton size="xs" :disabled="!canSave || busy" @click="save">
@@ -300,7 +303,7 @@ async function remove() {
 
       <p
         v-if="testResult"
-        class="text-[11px]"
+        class="text-2xs"
         :class="testResult.ok ? 'text-app-success-300' : 'text-app-error-300'"
       >
         {{ testResult.message }}