@cat-factory/app 0.307.1 → 0.309.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"
@@ -87,7 +88,7 @@ function toggle(id: string) {
                   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 +102,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>
               </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 +150,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

@@ -181,10 +181,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>

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()
@@ -224,9 +225,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 +268,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"
@@ -311,10 +312,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,14 @@ 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"
+                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 +302,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>
+                <span class="shrink-0 text-3xs text-dimmed">{{ reqCount(group) }}</span>
               </button>
             </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 +353,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 +365,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 +386,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 +467,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 +475,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 +502,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">{{

package/app/components/tasks/BugHuntModal.vue

@@ -549,7 +549,7 @@ const STATUS_KEYS: Record<BugHuntAnalysisStatus, string> = {
                 <p v-if="candidate.analysis?.rationale" class="text-xs text-toned">
                   {{ candidate.analysis.rationale }}
                 </p>
-                <div class="flex flex-wrap items-center gap-2 text-[11px] text-dimmed">
+                <div class="flex flex-wrap items-center gap-2 text-2xs text-dimmed">
                   <span v-if="candidate.priority">{{ candidate.priority }}</span>
                   <span v-for="label in candidate.labels" :key="label">{{ label }}</span>
                   <span v-if="createdAtDate(candidate.createdAt)">

package/app/components/tasks/ContextIssuePicker.vue

@@ -28,6 +28,7 @@ import {
   reconcileSource,
   sourceMenuItems,
 } from '~/utils/sourcePicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** contextKeys already staged by the caller, so they're filtered out / not re-offered. */
@@ -291,12 +292,9 @@ onMounted(() => {
          promises a choice that isn't there. `id` labels the trigger, whose own content is the
          tracker name rather than what that name means. -->
     <div class="flex items-center gap-1.5">
-      <span
-        :id="sourceLabelId"
-        class="shrink-0 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
-      >
+      <SectionLabel as="span" :id="sourceLabelId" class="shrink-0">
         {{ t('tasks.picker.sourceLabel') }}
-      </span>
+      </SectionLabel>
       <UDropdownMenu
         v-if="sourcePickable"
         :items="sourceMenu"
@@ -335,7 +333,7 @@ onMounted(() => {
       @keydown.enter="refRow && pickRef(refRow)"
     />
 
-    <p v-if="searchError" class="px-1 text-[11px] text-app-warning-400">
+    <p v-if="searchError" class="px-1 text-2xs text-app-warning-400">
       {{ searchError }}
     </p>
 

package/app/components/tasks/TaskContextIssues.vue

@@ -150,7 +150,7 @@ async function attach(item: PendingContext) {
         </UBadge>
       </a>
     </div>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ emptyHint }}
     </p>
   </InspectorSection>

package/app/components/tasks/TaskImportModal.vue

@@ -17,6 +17,7 @@ import type { PendingContext } from '~/composables/useContextLinking'
 import { type AddSourceLabels, addChoicesOf, buildSourceChoices } from '~/utils/sourcePicker'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -183,9 +184,9 @@ async function doSpawnEpic() {
 
         <!-- Secondary: spawn a parent/epic issue as a whole linked task group. -->
         <div class="space-y-2 border-t border-default pt-3">
-          <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="span">
             {{ t('tasks.import.asEpic') }}
-          </span>
+          </SectionLabel>
           <div class="flex items-end gap-2">
             <UFormField :label="descriptor?.refLabel ?? t('tasks.import.refLabel')" class="flex-1">
               <UInput