@cat-factory/app 0.308.0 → 0.310.0

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -24,6 +24,7 @@ import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import type { AppSlots } from '~/modular/slots'
 import { usePipelinesStore } from '~/stores/pipelines'
 import { pipelineAllowedForTaskType } from '~/utils/pipeline'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t, te } = useI18n()
 const ui = useUiStore()
@@ -360,7 +361,7 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.waiting.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 <i18n-t keypath="settings.workspaceSettings.waiting.body" tag="span" scope="global">
                   <template #overdue>
                     <span class="text-app-error-400">{{
@@ -369,11 +370,12 @@ async function save() {
                   </template>
                 </i18n-t>
               </p>
-              <label class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <label class="block">
+                <SectionLabel as="span" class="mb-1 block">
                   {{ t('settings.workspaceSettings.waiting.escalateAfter') }}
-                </span>
+                </SectionLabel>
                 <UInput
+                  class="w-48"
                   v-model.number="draft.waitingEscalationMinutes"
                   type="number"
                   :min="1"
@@ -387,34 +389,40 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.taskLimit.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.taskLimit.body') }}
               </p>
-              <label class="block w-64">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">{{
+              <label class="block">
+                <SectionLabel as="span" class="mb-1 block">{{
                   t('settings.workspaceSettings.taskLimit.mode')
-                }}</span>
+                }}</SectionLabel>
                 <USelect
                   v-model="draft.taskLimitMode"
                   :items="MODES"
                   value-key="value"
                   size="sm"
-                  class="w-full"
+                  class="w-64"
                 />
               </label>
 
-              <label v-if="draft.taskLimitMode === 'shared'" class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <label v-if="draft.taskLimitMode === 'shared'" class="block">
+                <SectionLabel as="span" class="mb-1 block">
                   {{ t('settings.workspaceSettings.taskLimit.maxRunning') }}
-                </span>
-                <UInput v-model.number="draft.taskLimitShared" type="number" :min="1" size="sm" />
+                </SectionLabel>
+                <UInput
+                  class="w-48"
+                  v-model.number="draft.taskLimitShared"
+                  type="number"
+                  :min="1"
+                  size="sm"
+                />
               </label>
 
               <div v-else-if="draft.taskLimitMode === 'per_type'" class="grid grid-cols-2 gap-3">
                 <label v-for="taskType in TASK_TYPES" :key="taskType" class="block">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+                  <SectionLabel as="span" class="mb-1 block">
                     {{ maxTaskTypeLabel(taskType) }}
-                  </span>
+                  </SectionLabel>
                   <UInput
                     v-model.number="draft.perType[taskType]"
                     type="number"
@@ -431,19 +439,19 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.inputGate.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.inputGate.body') }}
               </p>
-              <label class="block w-64">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">{{
+              <label class="block">
+                <SectionLabel as="span" class="mb-1 block">{{
                   t('settings.workspaceSettings.inputGate.mode')
-                }}</span>
+                }}</SectionLabel>
                 <USelect
                   v-model="draft.inputGateMode"
                   :items="INPUT_GATE_MODES"
                   value-key="value"
                   size="sm"
-                  class="w-full"
+                  class="w-64"
                   data-testid="input-gate-mode"
                 />
               </label>
@@ -454,27 +462,28 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.reviewFriction.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.reviewFriction.body') }}
               </p>
-              <label class="block w-64">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">{{
+              <label class="block">
+                <SectionLabel as="span" class="mb-1 block">{{
                   t('settings.workspaceSettings.reviewFriction.mode')
-                }}</span>
+                }}</SectionLabel>
                 <USelect
                   v-model="draft.reviewFrictionMode"
                   :items="REVIEW_FRICTION_MODES"
                   value-key="value"
                   size="sm"
-                  class="w-full"
+                  class="w-64"
                 />
               </label>
 
-              <label v-if="draft.reviewFrictionMode !== 'off'" class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <label v-if="draft.reviewFrictionMode !== 'off'" class="block">
+                <SectionLabel as="span" class="mb-1 block">
                   {{ t('settings.workspaceSettings.reviewFriction.warnCount') }}
-                </span>
+                </SectionLabel>
                 <UInput
+                  class="w-48"
                   v-model.number="draft.reviewFrictionWarnCount"
                   type="number"
                   :min="1"
@@ -483,20 +492,21 @@ async function save() {
               </label>
 
               <div v-if="draft.reviewFrictionMode === 'enforce'" class="space-y-2">
-                <p class="text-[11px] text-muted">
+                <p class="text-2xs text-muted">
                   {{ t('settings.workspaceSettings.reviewFriction.enforceHint') }}
                 </p>
                 <label class="flex items-center gap-2">
                   <USwitch v-model="draft.reviewFrictionBlockCountEnabled" size="sm" />
-                  <span class="text-[13px] text-toned">{{
+                  <span class="text-sm text-toned">{{
                     t('settings.workspaceSettings.reviewFriction.blockCountToggle')
                   }}</span>
                 </label>
-                <label v-if="draft.reviewFrictionBlockCountEnabled" class="block w-48">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+                <label v-if="draft.reviewFrictionBlockCountEnabled" class="block">
+                  <SectionLabel as="span" class="mb-1 block">
                     {{ t('settings.workspaceSettings.reviewFriction.blockCount') }}
-                  </span>
+                  </SectionLabel>
                   <UInput
+                    class="w-48"
                     v-model.number="draft.reviewFrictionBlockCount"
                     type="number"
                     :min="1"
@@ -505,15 +515,16 @@ async function save() {
                 </label>
                 <label class="flex items-center gap-2">
                   <USwitch v-model="draft.reviewFrictionBlockStuckEnabled" size="sm" />
-                  <span class="text-[13px] text-toned">{{
+                  <span class="text-sm text-toned">{{
                     t('settings.workspaceSettings.reviewFriction.blockStuckToggle')
                   }}</span>
                 </label>
-                <label v-if="draft.reviewFrictionBlockStuckEnabled" class="block w-48">
-                  <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+                <label v-if="draft.reviewFrictionBlockStuckEnabled" class="block">
+                  <SectionLabel as="span" class="mb-1 block">
                     {{ t('settings.workspaceSettings.reviewFriction.blockStuckMinutes') }}
-                  </span>
+                  </SectionLabel>
                   <UInput
+                    class="w-48"
                     v-model.number="draft.reviewFrictionBlockStuckMinutes"
                     type="number"
                     :min="1"
@@ -528,7 +539,7 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.observability.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.observability.body') }}
               </p>
               <label class="flex items-center gap-2">
@@ -544,7 +555,7 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.prReport.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.prReport.body') }}
               </p>
               <label class="flex items-center gap-2">
@@ -560,14 +571,15 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.retention.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.retention.body') }}
               </p>
-              <label class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <label class="block">
+                <SectionLabel as="span" class="mb-1 block">
                   {{ t('settings.workspaceSettings.retention.days') }}
-                </span>
+                </SectionLabel>
                 <UInput
+                  class="w-48"
                   v-model.number="draft.artifactRetentionDays"
                   type="number"
                   :min="1"
@@ -582,14 +594,15 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.doneLane.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.doneLane.body') }}
               </p>
-              <label class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <label class="block">
+                <SectionLabel as="span" class="mb-1 block">
                   {{ t('settings.workspaceSettings.doneLane.maxItems') }}
-                </span>
+                </SectionLabel>
                 <UInput
+                  class="w-48"
                   v-model.number="draft.doneLaneMaxItems"
                   type="number"
                   :min="0"
@@ -598,20 +611,21 @@ async function save() {
                   data-testid="done-lane-max-items"
                 />
               </label>
-              <p v-if="draft.doneLaneMaxItems === 0" class="text-[11px] text-dimmed">
+              <p v-if="draft.doneLaneMaxItems === 0" class="text-2xs text-dimmed">
                 {{ t('settings.workspaceSettings.doneLane.zeroHint') }}
               </p>
               <label class="flex items-center gap-2">
                 <UCheckbox v-model="draft.doneLaneRetentionEnabled" size="sm" />
-                <span class="text-[11px] text-toned">{{
+                <span class="text-2xs text-toned">{{
                   t('settings.workspaceSettings.doneLane.ageToggle')
                 }}</span>
               </label>
-              <label v-if="draft.doneLaneRetentionEnabled" class="block w-48">
-                <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+              <label v-if="draft.doneLaneRetentionEnabled" class="block">
+                <SectionLabel as="span" class="mb-1 block">
                   {{ t('settings.workspaceSettings.doneLane.days') }}
-                </span>
+                </SectionLabel>
                 <UInput
+                  class="w-48"
                   v-model.number="draft.doneLaneRetentionDays"
                   type="number"
                   :min="1"
@@ -620,7 +634,7 @@ async function save() {
                   data-testid="done-lane-retention-days"
                 />
               </label>
-              <p class="text-[11px] text-dimmed">
+              <p class="text-2xs text-dimmed">
                 {{ t('settings.workspaceSettings.doneLane.hidesOnlyHint') }}
               </p>
             </section>
@@ -630,7 +644,7 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.runCredential.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.runCredential.body') }}
               </p>
               <label class="flex items-center gap-2">
@@ -643,14 +657,14 @@ async function save() {
                   t('settings.workspaceSettings.runCredential.toggle')
                 }}</span>
               </label>
-              <p v-if="!draft.allowInitiatorPat" class="text-[11px] text-app-warning-300">
+              <p v-if="!draft.allowInitiatorPat" class="text-2xs text-app-warning-300">
                 {{ t('settings.workspaceSettings.runCredential.offHint') }}
               </p>
               <!-- Stated rather than read: the account floor lives behind an ACCOUNT-admin
                    endpoint, which a workspace admin may not hold, so probing it here would 403
                    for exactly the people this note is for. A static line sets the expectation
                    without pretending to report a value we cannot see. -->
-              <p v-if="draft.allowInitiatorPat" class="text-[11px] text-dimmed">
+              <p v-if="draft.allowInitiatorPat" class="text-2xs text-dimmed">
                 {{ t('settings.workspaceSettings.runCredential.accountFloorNote') }}
               </p>
             </section>
@@ -662,7 +676,7 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.bugFishing.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.bugFishing.body') }}
               </p>
               <USelectMenu
@@ -680,7 +694,7 @@ async function save() {
               <h3 class="text-sm font-semibold text-default">
                 {{ t('settings.workspaceSettings.kaizen.heading') }}
               </h3>
-              <p class="text-[11px] text-muted">
+              <p class="text-2xs text-muted">
                 {{ t('settings.workspaceSettings.kaizen.body') }}
               </p>
               <label class="flex items-center gap-2">

package/app/components/skills/ReviewSkillQueue.vue

@@ -17,6 +17,7 @@
 import { computed, ref } from 'vue'
 import { MAX_REVIEW_SKILLS } from '@cat-factory/contracts'
 import { useSkillsStore } from '~/stores/skills'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The queued skill ids, in the order the reviewer applies them (`v-model`). */
@@ -63,9 +64,9 @@ function toggle(id: string) {
 <template>
   <div>
     <div class="mb-1 flex items-center justify-between gap-2">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('skills.reviewQueue.label') }}
-      </span>
+      </SectionLabel>
       <UPopover v-model:open="open" :content="{ align: 'end' }">
         <UButton
           size="xs"
@@ -83,11 +84,12 @@ function toggle(id: string) {
           >
             <div class="min-h-0 flex-1 overflow-y-auto p-1">
               <template v-if="offered.length">
-                <button
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   v-for="s in offered"
                   :key="s.id"
-                  type="button"
-                  class="flex w-full items-start gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-elevated/60 disabled:cursor-not-allowed disabled:opacity-40"
+                  class="flex w-full items-start gap-2 rounded-sm px-2 py-1.5 text-start text-sm hover:bg-elevated/60 disabled:cursor-not-allowed disabled:opacity-40"
                   :class="selectedSet.has(s.id) ? 'text-app-100' : 'text-toned'"
                   :disabled="atCap && !selectedSet.has(s.id)"
                   :aria-pressed="selectedSet.has(s.id)"
@@ -101,20 +103,20 @@ function toggle(id: string) {
                   />
                   <span class="min-w-0 flex-1">
                     <span class="block truncate">{{ s.name }}</span>
-                    <span class="block truncate text-[11px] text-dimmed">
+                    <span class="block truncate text-2xs text-dimmed">
                       {{ s.description }}
                     </span>
                   </span>
-                </button>
+                </UButton>
               </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('skills.reviewQueue.pickerEmpty') }}
               </p>
             </div>
 
             <p
               v-if="atCap"
-              class="border-t border-default px-2 py-1.5 text-[11px] text-app-warning-400"
+              class="border-t border-default px-2 py-1.5 text-2xs text-app-warning-400"
             >
               {{ t('skills.reviewQueue.capped', { max: MAX_REVIEW_SKILLS }) }}
             </p>
@@ -149,7 +151,7 @@ function toggle(id: string) {
         {{ s.name }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ t('skills.reviewQueue.hint') }}
     </p>
   </div>

package/app/components/skills/SkillLibraryManager.vue

@@ -12,6 +12,7 @@ import { useSkillLibrary } from '~/stores/skillLibrary'
 import { SKILL_GROUP_LABEL_KEYS } from '~/utils/skills'
 import GitHubRepoSearchSelect from '~/components/github/GitHubRepoSearchSelect.vue'
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const props = defineProps<{ accountId: string }>()
 
@@ -181,10 +182,10 @@ async function unlinkSource(id: string) {
             <!-- The manifest declared a group this build does not know (a typo, or a member
                  retired since the sync). It is filed under Other, and saying which value was
                  declared is what lets the author fix their frontmatter. -->
-            <p v-if="s.declaredGroup" class="mt-1 text-[11px] text-app-warning-400">
+            <p v-if="s.declaredGroup" class="mt-1 text-2xs text-app-warning-400">
               {{ t('skills.catalog.groupUnknown', { group: s.declaredGroup }) }}
             </p>
-            <p class="mt-1 flex flex-wrap gap-x-3 text-[11px] text-dimmed">
+            <p class="mt-1 flex flex-wrap gap-x-3 text-2xs text-dimmed">
               <span v-if="s.resources.length">
                 {{ t('skills.catalog.resources', { count: s.resources.length }) }}
               </span>
@@ -234,29 +235,29 @@ async function unlinkSource(id: string) {
             {{ t('skills.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('skills.sources.check')"
+              :label="t('skills.sources.check')"
               @click="checkSource(s.id)"
             />
-            <UButton
+            <IconButton
               icon="i-lucide-refresh-cw"
               size="xs"
               variant="ghost"
               :loading="rowBusy(`sync:${s.id}`)"
-              :title="t('skills.sources.sync')"
+              :label="t('skills.sources.sync')"
               @click="syncSource(s.id)"
             />
-            <UButton
+            <IconButton
               icon="i-lucide-unplug"
               size="xs"
               color="error"
               variant="ghost"
               :loading="rowBusy(`unlink:${s.id}`)"
-              :title="t('skills.sources.unlink')"
+              :label="t('skills.sources.unlink')"
               @click="unlinkSource(s.id)"
             />
           </div>

package/app/components/slack/SlackPanel.vue

@@ -16,6 +16,7 @@ import {
 } from '~/utils/slackMemberMapping'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 const slack = useSlackStore()
@@ -55,6 +56,8 @@ const ROLE_OPTIONS = computed<{ label: string; value: SlackMemberRole }[]>(() =>
 ])
 
 // Local editable copies, synced from the store on load.
+const channelSuggestions = computed(() => slack.channels.map((ch) => `#${ch.name}`))
+
 const routes = reactive<Record<NotificationType, SlackRoute>>({
   merge_review: { enabled: false, channel: '' },
   pipeline_complete: { enabled: false, channel: '' },
@@ -224,9 +227,9 @@ async function saveMapping() {
             {{ t('slack.connect.addToSlack') }}
           </UButton>
           <div class="space-y-1">
-            <span class="block text-[10px] uppercase tracking-wide text-dimmed">
+            <SectionLabel as="span" class="block">
               {{ t('slack.connect.orPasteToken') }}
-            </span>
+            </SectionLabel>
             <div class="flex gap-2">
               <SecretInput v-model="tokenInput" size="sm" class="flex-1" placeholder="xoxb-…" />
               <UButton
@@ -267,9 +270,9 @@ async function saveMapping() {
 
           <!-- routing -->
           <div class="space-y-3">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="p">
               {{ t('slack.routing.heading') }}
-            </p>
+            </SectionLabel>
             <div
               v-for="row in ROUTABLE"
               :key="row.type"
@@ -277,18 +280,20 @@ async function saveMapping() {
             >
               <USwitch v-model="routes[row.type]!.enabled" size="sm" />
               <span class="w-32 text-sm text-toned">{{ row.label }}</span>
-              <UInput
+              <!-- The workspace's channels are suggestions, not a closed list: a route may name
+                   a channel the bot cannot enumerate yet. `mode="autocomplete"` is what makes the
+                   typed name the value: the DEFAULT combobox mode writes its model only when
+                   something is SELECTED, so a channel typed and then saved would be dropped. -->
+              <UInputMenu
                 v-model="routes[row.type]!.channel"
+                mode="autocomplete"
+                :items="channelSuggestions"
                 size="sm"
                 class="flex-1"
                 :placeholder="t('slack.routing.channelPlaceholder')"
                 :disabled="!routes[row.type]!.enabled"
-                list="slack-channels"
               />
             </div>
-            <datalist id="slack-channels">
-              <option v-for="ch in slack.channels" :key="ch.id" :value="`#${ch.name}`" />
-            </datalist>
 
             <label class="flex items-center gap-2">
               <USwitch v-model="mentionsEnabled" size="sm" />
@@ -311,10 +316,10 @@ async function saveMapping() {
 
           <!-- member mapping -->
           <div v-if="mentionsEnabled" class="space-y-2">
-            <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="p">
               {{ t('slack.members.heading') }}
-            </p>
-            <p class="text-[11px] leading-snug text-dimmed">
+            </SectionLabel>
+            <p class="text-2xs leading-snug text-dimmed">
               <i18n-t keypath="slack.members.hint" tag="span">
                 <template #product>
                   <span class="font-medium text-muted">{{ t('slack.members.productLabel') }}</span>

package/app/components/spec/ServiceSpecWindow.vue

@@ -22,6 +22,7 @@ import {
   type RequirementStateFilter,
 } from './ServiceSpecWindow.logic'
 import type { BadgeColor } from '~/utils/badge'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const board = useBoardStore()
@@ -285,14 +286,15 @@ function kindLabel(item: RequirementItem): string {
           {{ t('spec.overview') }}
         </UButton>
         <div v-for="(mod, mi) in modules" :key="mi" class="mb-3">
-          <div class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel class="px-2 pb-1">
             {{ mod.name }}
-          </div>
+          </SectionLabel>
           <ul class="space-y-0.5">
             <li v-for="(group, gi) in mod.groups ?? []" :key="gi">
-              <button
-                type="button"
-                class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-start text-[13px] transition"
+              <UButton
+                color="neutral"
+                variant="ghost"
+                class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-start text-sm transition"
                 :class="
                   selected?.m === mi && selected?.g === gi
                     ? 'bg-primary/15 text-primary'
@@ -301,12 +303,12 @@ function kindLabel(item: RequirementItem): string {
                 @click="selectGroup(mi, gi)"
               >
                 <span class="truncate">{{ group.name }}</span>
-                <span class="shrink-0 text-[10px] text-dimmed">{{ reqCount(group) }}</span>
-              </button>
+                <span class="shrink-0 text-3xs text-dimmed">{{ reqCount(group) }}</span>
+              </UButton>
             </li>
             <li
               v-if="(mod.groups?.length ?? 0) === 0"
-              class="px-2 py-1 text-[11px] italic text-app-600"
+              class="px-2 py-1 text-2xs italic text-app-600"
             >
               {{ t('spec.noFeatureGroups') }}
             </li>
@@ -352,9 +354,9 @@ function kindLabel(item: RequirementItem): string {
 
         <!-- selected feature group -->
         <template v-else-if="selectedGroup">
-          <div class="mb-1 text-[11px] uppercase tracking-wide text-dimmed">
+          <SectionLabel class="mb-1">
             {{ selectedModule?.name }}
-          </div>
+          </SectionLabel>
           <h2 class="text-lg font-semibold text-highlighted">{{ selectedGroup.name }}</h2>
           <p v-if="selectedGroup.summary" class="mt-1 max-w-3xl text-sm text-muted">
             {{ selectedGroup.summary }}
@@ -364,7 +366,7 @@ function kindLabel(item: RequirementItem): string {
           <template v-if="mode === 'gherkin'">
             <pre
               v-if="selectedFeature"
-              class="mt-4 overflow-x-auto rounded-lg border border-default bg-app-950/60 p-4 text-[12.5px] leading-relaxed text-default"
+              class="mt-4 overflow-x-auto rounded-lg border border-default bg-app-950/60 p-4 text-xs leading-relaxed text-default"
             ><code>{{ selectedFeature.content }}</code></pre>
             <div
               v-else
@@ -385,7 +387,7 @@ function kindLabel(item: RequirementItem): string {
               class="mt-4 flex flex-wrap items-center justify-between gap-2"
               data-testid="spec-state-filter"
             >
-              <div class="flex items-center gap-1.5 text-[11px] text-dimmed">
+              <div class="flex items-center gap-1.5 text-2xs text-dimmed">
                 <UIcon
                   :name="STATE_META.established.icon"
                   class="h-3.5 w-3.5 text-app-success-400"
@@ -466,7 +468,7 @@ function kindLabel(item: RequirementItem): string {
                     <UBadge color="neutral" variant="subtle" size="sm">{{ kindLabel(req) }}</UBadge>
                   </div>
                 </div>
-                <p class="mt-1.5 whitespace-pre-line text-[13px] leading-relaxed text-toned">
+                <p class="mt-1.5 whitespace-pre-line text-sm leading-relaxed text-toned">
                   {{ req.statement }}
                 </p>
                 <!-- acceptance criteria (Given/When/Then) -->
@@ -474,7 +476,7 @@ function kindLabel(item: RequirementItem): string {
                   <div
                     v-for="ac in req.acceptance ?? []"
                     :key="ac.id"
-                    class="rounded-md border border-default bg-app-950/50 px-3 py-2 text-[12.5px] leading-relaxed"
+                    class="rounded-md border border-default bg-app-950/50 px-3 py-2 text-xs leading-relaxed"
                   >
                     <p class="text-toned">
                       <span class="font-semibold text-app-success-400">{{
@@ -501,17 +503,15 @@ function kindLabel(item: RequirementItem): string {
 
             <!-- domain rules / invariants scoped to this group -->
             <div v-if="(selectedGroup.rules?.length ?? 0) > 0" class="mt-6">
-              <div
-                class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-              >
+              <SectionLabel class="mb-2 flex items-center gap-1.5">
                 <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5" />
                 {{ t('spec.domainRules') }}
-              </div>
+              </SectionLabel>
               <ul class="max-w-3xl space-y-1.5">
                 <li
                   v-for="rule in selectedGroup.rules ?? []"
                   :key="rule.id"
-                  class="rounded-md border border-default bg-default/60 px-3 py-2 text-[13px] text-toned"
+                  class="rounded-md border border-default bg-default/60 px-3 py-2 text-sm text-toned"
                 >
                   {{ rule.rule }}
                   <span v-if="rule.rationale" class="text-dimmed">{{