@cat-factory/app 0.308.0 → 0.310.0

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -64,6 +64,12 @@ const canChat = computed(() => awaiting.value && !chatBudgetSpent.value && !fork
 
 // The human's selection: a proposed fork id, or the sentinel 'custom' for the free-text path.
 const selected = ref<string | null>(null)
+// The proposed forks and "my own approach" are one choice, so they are one item list. `fork` is
+// null on the custom entry, which is what the label and description slots branch on.
+const forkItems = computed(() => [
+  ...forks.value.map((fork) => ({ value: fork.id, label: fork.title, fork })),
+  { value: 'custom', label: t('forkDecision.custom.title'), fork: null as ForkOption | null },
+])
 const customText = ref('')
 const note = ref('')
 const chatInput = ref('')
@@ -166,7 +172,7 @@ const { requestClose } = useUnsavedGuard({
       >
         <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
         <p class="text-sm">{{ t('forkDecision.proposing.title') }}</p>
-        <p class="max-w-sm text-[11px] text-dimmed">
+        <p class="max-w-sm text-2xs text-dimmed">
           {{ t('forkDecision.proposing.hint') }}
         </p>
       </div>
@@ -176,10 +182,10 @@ const { requestClose } = useUnsavedGuard({
         v-else-if="status === 'single_path'"
         class="rounded-xl border border-default bg-default/60 px-4 py-3 text-toned"
       >
-        <p class="text-[13px] font-medium text-app-100">
+        <p class="text-sm font-medium text-app-100">
           {{ t('forkDecision.singlePath.title') }}
         </p>
-        <p v-if="state?.singlePathReason" class="mt-1 text-[12px]">
+        <p v-if="state?.singlePathReason" class="mt-1 text-xs">
           {{ state.singlePathReason }}
         </p>
       </div>
@@ -189,16 +195,16 @@ const { requestClose } = useUnsavedGuard({
         v-else-if="status === 'chosen'"
         class="rounded-xl border border-app-secondary-500/40 bg-default/60 px-4 py-3 text-toned"
       >
-        <p class="text-[13px] font-medium text-app-secondary-200">
+        <p class="text-sm font-medium text-app-secondary-200">
           {{ t('forkDecision.chosen.title') }}
         </p>
-        <p v-if="state?.chosen?.custom" class="mt-1 whitespace-pre-wrap text-[12px]">
+        <p v-if="state?.chosen?.custom" class="mt-1 whitespace-pre-wrap text-xs">
           {{ state.chosen.custom }}
         </p>
-        <p v-else-if="state?.chosen?.forkId" class="mt-1 text-[12px]">
+        <p v-else-if="state?.chosen?.forkId" class="mt-1 text-xs">
           {{ forks.find((f) => f.id === state?.chosen?.forkId)?.title }}
         </p>
-        <p v-if="state?.chosen?.note" class="mt-1 text-[11px] text-muted">
+        <p v-if="state?.chosen?.note" class="mt-1 text-2xs text-muted">
           {{ t('forkDecision.chosen.note', { note: state.chosen.note }) }}
         </p>
       </div>
@@ -207,110 +213,90 @@ const { requestClose } = useUnsavedGuard({
       <div v-else-if="interactive" class="space-y-3">
         <p
           v-if="forkDecision.error"
-          class="rounded-md bg-app-error-500/10 px-3 py-2 text-[12px] text-app-error-300"
+          class="rounded-md bg-app-error-500/10 px-3 py-2 text-xs text-app-error-300"
         >
           {{ forkDecision.error }}
         </p>
 
-        <p
-          v-if="state?.seamSummary"
-          class="rounded-md bg-elevated/50 px-3 py-2 text-[12px] text-toned"
-        >
+        <p v-if="state?.seamSummary" class="rounded-md bg-elevated/50 px-3 py-2 text-xs text-toned">
           <span class="text-dimmed">{{ t('forkDecision.seam') }}</span>
           {{ state.seamSummary }}
         </p>
 
-        <!-- Proposed fork cards -->
-        <article
-          v-for="fork in forks"
-          :key="fork.id"
-          data-testid="fork-option-card"
-          class="cursor-pointer rounded-xl border px-4 py-3 transition"
-          :class="
-            selected === fork.id
-              ? 'border-app-secondary-500/70 bg-app-secondary-500/5'
-              : 'border-default bg-default/60 hover:border-muted'
-          "
-          @click="selected = fork.id"
+        <!-- The proposed forks and "my own approach" are ONE choice, so they are one radio
+             group rather than a set of cards each holding their own radio. `variant="card"`
+             is the shape these already had; the rich body rides the description slot. -->
+        <URadioGroup
+          :model-value="selected ?? undefined"
+          color="secondary"
+          variant="card"
+          :items="forkItems"
+          data-testid="fork-options"
+          :ui="{ item: 'px-4 py-3' }"
+          @update:model-value="selected = String($event)"
         >
-          <div class="flex items-start gap-2">
-            <input
-              type="radio"
-              class="mt-1 accent-app-secondary-500"
-              :checked="selected === fork.id"
-              @change="selected = fork.id"
-            />
-            <div class="min-w-0 flex-1">
-              <div class="flex items-center gap-2">
-                <h3 class="min-w-0 flex-1 text-[13px] font-medium text-app-100">
-                  {{ fork.title }}
-                </h3>
-                <UBadge v-if="fork.recommended" color="primary" variant="subtle" size="sm">
-                  {{ t('forkDecision.recommended') }}
-                </UBadge>
-              </div>
-              <p v-if="fork.summary" class="mt-0.5 text-[12px] text-muted">
-                {{ fork.summary }}
-              </p>
-              <p class="mt-1.5 whitespace-pre-wrap text-[12px] text-toned">
-                {{ fork.approach }}
-              </p>
-              <ul v-if="fork.tradeoffs.length" class="mt-1.5 space-y-0.5">
-                <li
-                  v-for="(tr, i) in fork.tradeoffs"
+          <template #label="{ item }">
+            <span class="flex items-center gap-2">
+              <span class="min-w-0 flex-1 text-sm font-medium text-app-100">{{ item.label }}</span>
+              <UBadge v-if="item.fork?.recommended" color="primary" variant="subtle" size="sm">
+                {{ t('forkDecision.recommended') }}
+              </UBadge>
+            </span>
+          </template>
+          <template #description="{ item }">
+            <template v-if="item.fork">
+              <span v-if="item.fork.summary" class="block text-xs text-muted">
+                {{ item.fork.summary }}
+              </span>
+              <span class="mt-1.5 block whitespace-pre-wrap text-xs text-toned">
+                {{ item.fork.approach }}
+              </span>
+              <span v-if="item.fork.tradeoffs.length" class="mt-1.5 block space-y-0.5">
+                <span
+                  v-for="(tr, i) in item.fork.tradeoffs"
                   :key="i"
-                  class="flex gap-1.5 text-[11px] text-muted"
+                  class="flex gap-1.5 text-2xs text-muted"
                 >
                   <span class="text-app-600">•</span>{{ tr }}
-                </li>
-              </ul>
-              <p v-if="fork.riskNotes" class="mt-1.5 text-[11px] text-app-warning-300/90">
+                </span>
+              </span>
+              <span
+                v-if="item.fork.riskNotes"
+                class="mt-1.5 block text-2xs text-app-warning-300/90"
+              >
                 <span class="text-app-warning-500/70">{{ t('forkDecision.riskNotes') }}</span>
-                {{ fork.riskNotes }}
-              </p>
-            </div>
-          </div>
-        </article>
-
-        <!-- Custom approach -->
-        <article
-          class="rounded-xl border px-4 py-3 transition"
-          :class="
-            selected === 'custom'
-              ? 'border-app-secondary-500/70 bg-app-secondary-500/5'
-              : 'border-default bg-default/60'
-          "
-        >
-          <label class="flex cursor-pointer items-center gap-2" @click="selected = 'custom'">
-            <input type="radio" class="accent-app-secondary-500" :checked="selected === 'custom'" />
-            <span class="text-[13px] font-medium text-app-100">{{
-              t('forkDecision.custom.title')
-            }}</span>
-          </label>
-          <textarea
-            v-model="customText"
-            data-testid="fork-custom-input"
-            rows="3"
-            :placeholder="t('forkDecision.custom.placeholder')"
-            class="mt-2 w-full resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-secondary-500/60"
-            @focus="selected = 'custom'"
-          />
-        </article>
+                {{ item.fork.riskNotes }}
+              </span>
+            </template>
+            <UTextarea
+              v-else
+              v-model="customText"
+              data-testid="fork-custom-input"
+              :rows="3"
+              size="xs"
+              class="mt-2 w-full"
+              :ui="{ base: 'resize-y' }"
+              :placeholder="t('forkDecision.custom.placeholder')"
+              @focus="selected = 'custom'"
+            />
+          </template>
+        </URadioGroup>
 
         <!-- Optional steering note -->
         <div>
-          <label class="mb-1 block text-[11px] text-muted">{{ t('forkDecision.noteLabel') }}</label>
-          <input
-            v-model="note"
-            type="text"
-            :placeholder="t('forkDecision.notePlaceholder')"
-            class="w-full rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none"
-          />
+          <UFormField size="xs" :label="t('forkDecision.noteLabel')">
+            <UInput
+              v-model="note"
+              size="xs"
+              class="w-full"
+              :placeholder="t('forkDecision.notePlaceholder')"
+            />
+          </UFormField>
         </div>
 
         <!-- Grounded chat: ask about the forks before deciding. -->
         <section class="rounded-xl border border-default bg-default/40 px-4 py-3">
-          <p class="text-[11px] font-medium text-muted">
+          <p class="text-2xs font-medium text-muted">
             {{ t('forkDecision.chat.title') }}
           </p>
           <div v-if="chat.length || answering" class="mt-2 max-h-64 space-y-2 overflow-y-auto pr-1">
@@ -322,7 +308,7 @@ const { requestClose } = useUnsavedGuard({
               :class="msg.role === 'human' ? 'justify-end' : 'justify-start'"
             >
               <p
-                class="max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-1.5 text-[12px]"
+                class="max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-1.5 text-xs"
                 :class="
                   msg.role === 'human'
                     ? 'bg-app-secondary-500/15 text-app-secondary-100'
@@ -334,29 +320,31 @@ const { requestClose } = useUnsavedGuard({
             </div>
             <div v-if="answering" class="flex justify-start">
               <p
-                class="flex items-center gap-1.5 rounded-lg bg-elevated/70 px-3 py-1.5 text-[12px] text-muted"
+                class="flex items-center gap-1.5 rounded-lg bg-elevated/70 px-3 py-1.5 text-xs text-muted"
               >
                 <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
                 {{ t('forkDecision.chat.thinking') }}
               </p>
             </div>
           </div>
-          <p v-else class="mt-1 text-[11px] text-dimmed">
+          <p v-else class="mt-1 text-2xs text-dimmed">
             {{ t('forkDecision.chat.hint') }}
           </p>
           <div class="mt-2 flex items-end gap-2">
-            <textarea
+            <UTextarea
               v-model="chatInput"
               data-testid="fork-chat-input"
-              rows="2"
+              :rows="2"
               :disabled="!canChat"
               :placeholder="
                 chatBudgetSpent
                   ? t('forkDecision.chat.budgetSpent')
                   : t('forkDecision.chat.placeholder')
               "
-              class="min-h-0 flex-1 resize-y rounded-md border border-muted bg-app-950/60 px-2.5 py-1.5 text-[12px] text-app-100 placeholder:text-app-600 focus:border-app-secondary-500 focus:outline-none disabled:opacity-50"
               @keydown.enter.exact.prevent="onSend"
+              size="xs"
+              class="min-h-0 flex-1"
+              :ui="{ base: 'resize-y' }"
             />
             <UButton
               data-testid="fork-chat-send"

package/app/components/foundational/FoundationalContractSummary.vue

@@ -25,7 +25,7 @@ const { t, n } = useI18n()
 
 <template>
   <div v-if="contracts.length" class="mt-1 flex flex-col gap-1">
-    <div v-for="c in contracts" :key="c.contractId" class="text-[11px] text-dimmed">
+    <div v-for="c in contracts" :key="c.contractId" class="text-2xs text-dimmed">
       <span class="text-muted">{{ c.title }}</span>
       <span class="ms-1">({{ formatLabel[c.format] }}, {{ n(c.size) }})</span>
       <span v-if="c.operations.length" class="ms-1 font-mono text-dimmed">
@@ -42,7 +42,7 @@ const { t, n } = useI18n()
       </span>
     </div>
   </div>
-  <p v-else class="mt-1 text-[11px] text-app-warning-500/80">
+  <p v-else class="mt-1 text-2xs text-app-warning-500/80">
     {{ t('foundational.contracts.none') }}
   </p>
 </template>

package/app/components/foundational/FoundationalServiceCatalogList.vue

@@ -19,6 +19,7 @@ import { useBusyRows } from '~/composables/useBusyRows'
 import type { ApiContractFormat, FoundationalServiceTier } from '~/types/domain'
 import { useFoundationalServicesStore } from '~/stores/foundationalServices'
 import FoundationalContractSummary from '~/components/foundational/FoundationalContractSummary.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const catalog = useFoundationalServicesStore()
 const toast = useToast()
@@ -92,7 +93,7 @@ async function suppress(serviceId: string) {
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm font-medium text-app-100">
             {{ s.name }}
-            <code class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
+            <code class="ms-1 text-2xs text-dimmed">{{ s.id }}</code>
           </p>
           <p class="text-xs text-muted">{{ s.summary }}</p>
           <div v-if="s.capabilities.length" class="mt-1 flex flex-wrap gap-1">
@@ -124,11 +125,11 @@ async function suppress(serviceId: string) {
               :key="doc.contractId"
               class="rounded-md border border-default bg-app-950/60 p-2"
             >
-              <p class="mb-1 text-[11px] text-muted">
+              <p class="mb-1 text-2xs text-muted">
                 {{ doc.title }}
                 <span v-if="doc.path" class="ms-1 font-mono text-app-600">{{ doc.path }}</span>
               </p>
-              <pre class="max-h-64 overflow-auto text-[11px] text-toned">{{ doc.body }}</pre>
+              <pre class="max-h-64 overflow-auto text-2xs text-toned">{{ doc.body }}</pre>
             </div>
           </div>
         </div>
@@ -139,13 +140,13 @@ async function suppress(serviceId: string) {
           <!-- Only an INHERITED entry can be suppressed — an account service or one the
                deployment registered in code; the board's own row is managed in the registry tab,
                where deleting it is the honest action. -->
-          <UButton
+          <IconButton
             v-if="s.tier !== 'workspace'"
             icon="i-lucide-eye-off"
             size="xs"
             variant="ghost"
             :loading="rowBusy(`suppress:${s.id}`)"
-            :title="t('foundational.catalog.suppress')"
+            :label="t('foundational.catalog.suppress')"
             :data-testid="`foundational-suppress-${s.id}`"
             @click="suppress(s.id)"
           />

package/app/components/foundational/FoundationalServiceRegistry.vue

@@ -20,6 +20,7 @@ import {
   useFoundationalServicesStore,
 } from '~/stores/foundationalServices'
 import FoundationalContractSummary from '~/components/foundational/FoundationalContractSummary.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ kind: FoundationalServiceOwnerKind; ownerId: string }>()
 
@@ -189,7 +190,7 @@ async function remove(service: FoundationalService) {
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm font-medium text-app-100">
             {{ s.name }}
-            <code class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
+            <code class="ms-1 text-2xs text-dimmed">{{ s.id }}</code>
           </p>
           <p class="text-xs text-muted">{{ s.summary }}</p>
           <div v-if="s.capabilities.length" class="mt-1 flex flex-wrap gap-1">
@@ -198,25 +199,25 @@ async function remove(service: FoundationalService) {
             </UBadge>
           </div>
           <FoundationalContractSummary :contracts="s.contracts" :format-label="formatLabel" />
-          <p v-if="s.sourceId" class="mt-1 text-[11px] text-dimmed">
+          <p v-if="s.sourceId" class="mt-1 text-2xs text-dimmed">
             {{ t('foundational.registry.fromSource', { path: s.sourcePath ?? '' }) }}
           </p>
         </div>
         <div class="flex shrink-0 gap-1">
-          <UButton
+          <IconButton
             v-if="!s.sourceId"
             icon="i-lucide-pencil"
             size="xs"
             variant="ghost"
-            :title="t('foundational.registry.edit')"
+            :label="t('foundational.registry.edit')"
             @click="openEdit(s)"
           />
-          <UButton
+          <IconButton
             icon="i-lucide-trash-2"
             size="xs"
             color="error"
             variant="ghost"
-            :title="t('foundational.registry.delete')"
+            :label="t('foundational.registry.delete')"
             @click="remove(s)"
           />
         </div>
@@ -274,7 +275,7 @@ async function remove(service: FoundationalService) {
           <p class="text-xs font-medium text-toned">
             {{ t('foundational.registry.contractsTitle') }}
           </p>
-          <p class="mb-2 text-[11px] text-dimmed">
+          <p class="mb-2 text-2xs text-dimmed">
             {{
               draft.contractsTouched
                 ? t('foundational.registry.contractsReplace')
@@ -289,12 +290,12 @@ async function remove(service: FoundationalService) {
                 class="flex-1"
               />
               <USelect v-model="c.format" :items="formatItems" class="w-56" />
-              <UButton
+              <IconButton
                 icon="i-lucide-x"
                 size="xs"
                 color="error"
                 variant="ghost"
-                :title="t('foundational.registry.removeContract')"
+                :label="t('foundational.registry.removeContract')"
                 @click="removeContract(i)"
               />
             </div>

package/app/components/foundational/FoundationalServiceSources.vue

@@ -27,6 +27,7 @@ import {
 } from '~/stores/foundationalServices'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ kind: FoundationalServiceOwnerKind; ownerId: string }>()
 
@@ -295,29 +296,29 @@ async function unlink(id: string) {
         {{ t('foundational.sources.changes') }}
       </UBadge>
       <div class="ms-auto flex gap-1">
-        <UButton
+        <IconButton
           icon="i-lucide-search-check"
           size="xs"
           variant="ghost"
           :loading="rowBusy(`check:${s.id}`)"
-          :title="t('foundational.sources.check')"
+          :label="t('foundational.sources.check')"
           @click="check(s.id)"
         />
-        <UButton
+        <IconButton
           icon="i-lucide-refresh-cw"
           size="xs"
           variant="ghost"
           :loading="rowBusy(`sync:${s.id}`)"
-          :title="t('foundational.sources.sync')"
+          :label="t('foundational.sources.sync')"
           @click="sync(s.id)"
         />
-        <UButton
+        <IconButton
           icon="i-lucide-unplug"
           size="xs"
           color="error"
           variant="ghost"
           :loading="rowBusy(`unlink:${s.id}`)"
-          :title="t('foundational.sources.unlink')"
+          :label="t('foundational.sources.unlink')"
           @click="unlink(s.id)"
         />
       </div>

package/app/components/foundational/FoundationalSuppressions.vue

@@ -73,10 +73,10 @@ async function restore(serviceId: string) {
       <div class="min-w-0 flex-1">
         <p class="truncate text-sm text-toned">
           {{ s.name || s.id }}
-          <code v-if="s.name" class="ms-1 text-[11px] text-dimmed">{{ s.id }}</code>
+          <code v-if="s.name" class="ms-1 text-2xs text-dimmed">{{ s.id }}</code>
         </p>
         <p v-if="s.summary" class="text-xs text-dimmed">{{ s.summary }}</p>
-        <p v-if="!s.inherited" class="text-[11px] text-dimmed">
+        <p v-if="!s.inherited" class="text-2xs text-dimmed">
           {{ t('foundational.suppressions.shadowsNothing') }}
         </p>
       </div>

package/app/components/fragments/FragmentLibraryManager.vue

@@ -19,6 +19,7 @@ import { showOverrideField } from '~/utils/uiMode'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import GitHubDocUrlImport from '~/components/fragments/GitHubDocUrlImport.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -654,7 +655,7 @@ async function unlinkSource(id: string) {
             >
               {{ t('fragments.catalog.live', { source: f.documentRef.source }) }}
             </UBadge>
-            <span class="ms-auto font-mono text-[11px] text-dimmed">{{ f.id }}</span>
+            <span class="ms-auto font-mono text-2xs text-dimmed">{{ f.id }}</span>
           </div>
           <p class="mt-1 text-sm text-muted">{{ f.summary }}</p>
           <div v-if="f.tags?.length" class="mt-1 flex flex-wrap gap-1">
@@ -750,12 +751,12 @@ async function unlinkSource(id: string) {
             <div class="ms-auto flex gap-1">
               <!-- Editing a repo-SOURCED fragment locally would be overwritten on the next sync,
                    so only hand-authored fragments are editable here. -->
-              <UButton
+              <IconButton
                 v-if="!f.source"
                 icon="i-lucide-pencil"
                 size="xs"
                 variant="ghost"
-                :title="t('common.edit')"
+                :label="t('common.edit')"
                 @click="startEdit(f)"
               />
               <UButton
@@ -859,19 +860,19 @@ async function unlinkSource(id: string) {
               </UBadge>
             </div>
             <p class="text-sm text-muted">{{ f.summary }}</p>
-            <p v-if="f.resolvedAt" class="text-[11px] text-dimmed">
+            <p v-if="f.resolvedAt" class="text-2xs text-dimmed">
               {{
                 t('fragments.documents.lastResolved', { date: d(new Date(f.resolvedAt), 'long') })
               }}
             </p>
           </div>
           <div class="ms-auto flex gap-1">
-            <UButton
+            <IconButton
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
               :loading="rowBusy(`refresh:${f.id}`)"
-              :title="t('fragments.documents.refreshTitle')"
+              :label="t('fragments.documents.refreshTitle')"
               @click="refreshFragment(f.id)"
             />
             <UButton
@@ -942,7 +943,7 @@ async function unlinkSource(id: string) {
                   <div
                     v-for="staged in stagedDocRefs"
                     :key="staged.path"
-                    class="flex items-center gap-1.5 rounded bg-elevated/60 px-2 py-1 text-xs text-toned"
+                    class="flex items-center gap-1.5 rounded-sm bg-elevated/60 px-2 py-1 text-xs text-toned"
                   >
                     <UIcon name="i-lucide-file-code-2" class="h-3.5 w-3.5 shrink-0 text-primary" />
                     <span class="truncate">{{ staged.path }}</span>

package/app/components/fragments/FragmentSelector.vue

@@ -10,6 +10,7 @@
 // (labelled by their raw id) so they stay visible and removable.
 import type { PromptFragment } from '~/types/domain'
 import { buildFragmentCategoryGroups } from '~/utils/fragmentPicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -76,9 +77,9 @@ function manageAccount() {
 <template>
   <div>
     <div class="mb-1 flex items-center justify-between gap-2">
-      <span v-if="label" class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel v-if="label" as="span">
         {{ label }}
-      </span>
+      </SectionLabel>
       <span v-else />
       <UPopover v-model:open="open" :content="{ align: 'end' }">
         <UButton
@@ -98,16 +99,15 @@ function manageAccount() {
             <div class="min-h-0 flex-1 overflow-y-auto p-1">
               <template v-if="categoryGroups.length">
                 <div v-for="group in categoryGroups" :key="group.category">
-                  <p
-                    class="px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
-                  >
+                  <SectionLabel as="p" class="px-2 pb-0.5 pt-1.5">
                     {{ group.category }}
-                  </p>
-                  <button
+                  </SectionLabel>
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
                     v-for="f in group.fragments"
                     :key="f.id"
-                    type="button"
-                    class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
+                    class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60"
                     :class="selectedSet.has(f.id) ? 'text-app-100' : 'text-toned'"
                     :title="f.summary"
                     :data-testid="`fragment-option-${f.id}`"
@@ -120,31 +120,33 @@ function manageAccount() {
                       :class="selectedSet.has(f.id) ? 'text-primary' : 'text-dimmed'"
                     />
                     <span class="flex-1 truncate">{{ f.title }}</span>
-                  </button>
+                  </UButton>
                 </div>
               </template>
-              <p v-else class="px-2 py-3 text-[12px] text-dimmed">
+              <p v-else class="px-2 py-3 text-xs text-dimmed">
                 {{ t('inspector.fragments.pickerEmpty') }}
               </p>
 
               <div class="mt-1 border-t border-default pt-1">
-                <button
-                  type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
                   @click="manageBoard"
                 >
                   <UIcon name="i-lucide-book-marked" class="h-4 w-4 shrink-0 text-muted" />
                   <span class="flex-1 truncate">{{ t('inspector.fragments.manageBoard') }}</span>
-                </button>
-                <button
+                </UButton>
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   v-if="accounts.enabled"
-                  type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
+                  class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm text-toned hover:bg-elevated/60"
                   @click="manageAccount"
                 >
                   <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-muted" />
                   <span class="flex-1 truncate">{{ t('inspector.fragments.manageAccount') }}</span>
-                </button>
+                </UButton>
               </div>
             </div>
 
@@ -178,7 +180,7 @@ function manageAccount() {
         {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <div v-else-if="emptyText" class="text-[11px] text-dimmed">
+    <div v-else-if="emptyText" class="text-2xs text-dimmed">
       {{ emptyText }}
     </div>
   </div>