@cat-factory/app 0.308.0 → 0.309.0

package/app/components/panels/inspector/ContainerSummary.vue

@@ -41,7 +41,7 @@ function addTask() {
       >
         <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-app-secondary-400" />
         <span class="truncate text-xs text-default">{{ m.title }}</span>
-        <span class="ms-auto text-[10px] text-dimmed">{{
+        <span class="ms-auto text-3xs text-dimmed">{{
           t(
             'inspector.container.taskCount',
             { count: board.tasksOf(m.id).length },
@@ -76,11 +76,11 @@ function addTask() {
           :style="{ backgroundColor: STATUS_META[task.status].color }"
         />
         <span class="truncate text-xs text-default">{{ task.title }}</span>
-        <span class="ms-auto text-[10px] text-dimmed">{{ STATUS_META[task.status].label }}</span>
+        <span class="ms-auto text-3xs text-dimmed">{{ STATUS_META[task.status].label }}</span>
       </li>
     </ul>
-    <div v-else class="text-[11px] text-dimmed">{{ t('inspector.container.noTasks') }}</div>
-    <p v-if="isFrame" class="text-[11px] text-dimmed">
+    <div v-else class="text-2xs text-dimmed">{{ t('inspector.container.noTasks') }}</div>
+    <p v-if="isFrame" class="text-2xs text-dimmed">
       {{ t('inspector.container.servicesHint') }}
     </p>
   </InspectorSection>

package/app/components/panels/inspector/DocReferenceRepos.vue

@@ -6,6 +6,7 @@
 // search as the add-service picker (`useRepoSearch`), not a filter over the synced projection.
 import type { Block, GitHubAvailableRepo, ReferenceRepo } from '~/types/domain'
 import RepoSearchEmpty from '~/components/github/RepoSearchEmpty.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -83,9 +84,9 @@ function detach(repoId: number) {
 <template>
   <div data-testid="doc-reference-repos">
     <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('inspector.referenceRepos.title') }}
-      </span>
+      </SectionLabel>
     </div>
 
     <!-- Attached reference repos: chips with a remove control. -->
@@ -133,11 +134,11 @@ function detach(repoId: number) {
         />
       </template>
     </UInputMenu>
-    <div v-else class="text-[11px] text-dimmed">
+    <div v-else class="text-2xs text-dimmed">
       {{ t('inspector.referenceRepos.connectFirst') }}
     </div>
 
-    <div class="mt-1 text-[11px] text-dimmed">
+    <div class="mt-1 text-2xs text-dimmed">
       {{ t('inspector.referenceRepos.hint') }}
     </div>
   </div>

package/app/components/panels/inspector/EnvProbeReport.vue

@@ -81,14 +81,17 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
 </script>
 
 <template>
-  <div class="space-y-2 rounded border border-default bg-muted p-2" data-testid="env-probe-report">
-    <p class="text-[11px] font-medium" :class="verdictClass" data-testid="env-probe-verdict">
+  <div
+    class="space-y-2 rounded-sm border border-default bg-muted p-2"
+    data-testid="env-probe-report"
+  >
+    <p class="text-2xs font-medium" :class="verdictClass" data-testid="env-probe-verdict">
       {{ verdictLabel }}
     </p>
 
     <!-- The tallies the PLATFORM computed from the agent's per-operation judgements, including
          how many successes were behind authentication: the count the verdict turns on. -->
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{
         t('inspector.testConfig.envProbe.counts', {
           succeeded: report.succeeded,
@@ -101,19 +104,19 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
     <!-- What the platform did not tell the agent: the actionable half of the report, so it comes
          before the evidence. -->
     <div v-if="report.missingContext.length" data-testid="env-probe-missing">
-      <p class="text-[11px] font-medium text-app-warning-300/90">
+      <p class="text-2xs font-medium text-app-warning-300/90">
         {{ t('inspector.testConfig.envProbe.missingContext') }}
       </p>
-      <ul class="mt-0.5 list-disc space-y-0.5 pl-4 text-[11px] text-toned">
+      <ul class="mt-0.5 list-disc space-y-0.5 pl-4 text-2xs text-toned">
         <li v-for="(line, i) in report.missingContext" :key="i">{{ line }}</li>
       </ul>
     </div>
 
     <div v-if="report.blockers.length" data-testid="env-probe-blockers">
-      <p class="text-[11px] font-medium text-app-error-300/90">
+      <p class="text-2xs font-medium text-app-error-300/90">
         {{ t('inspector.testConfig.envProbe.blockers') }}
       </p>
-      <ul class="mt-0.5 space-y-0.5 text-[11px] text-toned">
+      <ul class="mt-0.5 space-y-0.5 text-2xs text-toned">
         <li v-for="(blocker, i) in report.blockers" :key="i">
           <span class="text-muted">{{ failureLabel(blocker.kind) }}:</span>
           {{ blocker.detail }}
@@ -124,10 +127,10 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
     <!-- The operations, as evidence for the verdict above. This is the "what was attempted" a dry
          run exists to report: without it a verdict is an opinion. -->
     <div v-if="report.operations.length" data-testid="env-probe-operations">
-      <p class="text-[11px] font-medium text-toned">
+      <p class="text-2xs font-medium text-toned">
         {{ t('inspector.testConfig.envProbe.operations') }}
       </p>
-      <ul class="mt-0.5 space-y-1 text-[11px]">
+      <ul class="mt-0.5 space-y-1 text-2xs">
         <li v-for="(op, i) in report.operations" :key="i" class="flex items-start gap-1.5">
           <UIcon
             :name="outcomeIcon(op.outcome)"
@@ -151,12 +154,12 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
            whole attempt. The two ways an operation fails to reach the list are rendered SEPARATELY
            because they send a reader somewhere different: one says the agent reported more than is
            shown, the other says its reply was malformed. -->
-      <p v-if="report.operationsOmitted" class="mt-1 text-[11px] text-dimmed">
+      <p v-if="report.operationsOmitted" class="mt-1 text-2xs text-dimmed">
         {{
           t('inspector.testConfig.envProbe.operationsOmitted', { count: report.operationsOmitted })
         }}
       </p>
-      <p v-if="report.operationsUnreadable" class="mt-1 text-[11px] text-dimmed">
+      <p v-if="report.operationsUnreadable" class="mt-1 text-2xs text-dimmed">
         {{
           t('inspector.testConfig.envProbe.operationsUnreadable', {
             count: report.operationsUnreadable,
@@ -165,8 +168,8 @@ function outcomeClass(outcome: EnvironmentProbeReport['operations'][number]['out
       </p>
     </div>
 
-    <p v-if="report.summary" class="text-[11px] text-muted">{{ report.summary }}</p>
-    <p v-if="report.model" class="text-[11px] text-app-600">
+    <p v-if="report.summary" class="text-2xs text-muted">{{ report.summary }}</p>
+    <p v-if="report.model" class="text-2xs text-app-600">
       {{ t('inspector.testConfig.envProbe.model', { model: report.model }) }}
     </p>
   </div>

package/app/components/panels/inspector/EpicChildren.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import type { Block } from '~/types/domain'
 import { STATUS_META } from '~/utils/catalog'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The epic inspector body: the full tree of member tasks (which may live under different
 // services/modules), grouped service → module → task. Each task row selects it. Membership
@@ -52,30 +53,30 @@ const groups = computed(() => {
     default-open
   >
     <template #actions>
-      <span class="text-[11px] text-dimmed">{{
+      <span class="text-2xs text-dimmed">{{
         t('inspector.epicChildren.doneCount', { done, total: members.length })
       }}</span>
     </template>
 
-    <div v-if="members.length === 0" class="text-[11px] text-dimmed">
+    <div v-if="members.length === 0" class="text-2xs text-dimmed">
       {{ t('inspector.epicChildren.empty') }}
     </div>
 
     <div v-else class="space-y-2">
       <div v-for="(group, gi) in groups" :key="gi" class="rounded-md border border-muted/60 p-2">
-        <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-toned">
+        <div class="mb-1 flex items-center gap-1 text-2xs font-medium text-toned">
           <UIcon name="i-lucide-box" class="h-3 w-3 text-dimmed" />
           {{ group.service?.title ?? t('inspector.epicChildren.unassigned') }}
         </div>
         <div v-for="(mod, mi) in [...group.modules.values()]" :key="mi" class="ps-1">
-          <div v-if="mod.module" class="text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel v-if="mod.module">
             {{ mod.module.title }}
-          </div>
+          </SectionLabel>
           <button
             v-for="task in mod.tasks"
             :key="task.id"
             type="button"
-            class="flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-start text-xs text-default hover:bg-elevated"
+            class="flex w-full items-center gap-1.5 rounded-sm px-1 py-0.5 text-start text-xs text-default hover:bg-elevated"
             @click="ui.select(task.id)"
           >
             <span
@@ -83,7 +84,7 @@ const groups = computed(() => {
               :style="{ backgroundColor: STATUS_META[task.status].color }"
             />
             <span class="truncate">{{ task.title }}</span>
-            <span class="ms-auto shrink-0 text-[10px] text-dimmed">
+            <span class="ms-auto shrink-0 text-3xs text-dimmed">
               {{ STATUS_META[task.status].label }}
             </span>
           </button>

package/app/components/panels/inspector/FrontendBindingsResolved.vue

@@ -7,6 +7,7 @@ import {
   type FrontendConfig,
   type ResolvedFrontendBinding,
 } from '@cat-factory/contracts'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The resolution of a frontend frame's backend bindings — each env var → a bound service's live
 // ephemeral URL, or WireMock. Two modes, same view:
@@ -66,13 +67,13 @@ const rows = computed(() => {
 
 <template>
   <div v-if="rows.length || duplicates.length" class="space-y-1.5" data-testid="frontend-resolved">
-    <div class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+    <SectionLabel>
       {{ t('inspector.frontendConfig.resolved.title') }}
-    </div>
+    </SectionLabel>
 
     <p
       v-if="duplicates.length"
-      class="text-[11px] leading-snug text-app-warning-300/80"
+      class="text-2xs leading-snug text-app-warning-300/80"
       data-testid="frontend-resolved-duplicates"
     >
       {{ t('inspector.frontendConfig.resolved.duplicateWarning', { vars: duplicates.join(', ') }) }}
@@ -82,7 +83,7 @@ const rows = computed(() => {
       <li
         v-for="row in rows"
         :key="row.envVar"
-        class="flex items-baseline gap-1.5 text-[11px] leading-snug"
+        class="flex items-baseline gap-1.5 text-2xs leading-snug"
         data-testid="frontend-resolved-row"
       >
         <span

package/app/components/panels/inspector/FrontendConfig.vue

@@ -229,11 +229,11 @@ onUnmounted(() => preview.stopPolling(props.block.id))
          persisted until Apply. Only shown when the frame is linked to a repo. -->
     <div
       v-if="repoLink"
-      class="space-y-2 rounded border border-default bg-default/40 p-2"
+      class="space-y-2 rounded-sm border border-default bg-default/40 p-2"
       data-testid="frontend-detect"
     >
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] text-muted">{{ t('inspector.frontendConfig.detect.title') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.frontendConfig.detect.title') }}</span>
         <UButton
           size="xs"
           variant="soft"
@@ -246,16 +246,16 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           {{ t('inspector.frontendConfig.detect.button') }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">
+      <p class="text-2xs leading-snug text-dimmed">
         {{ t('inspector.frontendConfig.detect.hint') }}
       </p>
 
-      <p v-if="detectError" class="text-[11px] text-app-error-300/80">
+      <p v-if="detectError" class="text-2xs text-app-error-300/80">
         {{ detectError }}
       </p>
 
       <template v-if="detectResult && !detecting">
-        <p v-if="!detectResult.detected" class="text-[11px] text-app-warning-300/80">
+        <p v-if="!detectResult.detected" class="text-2xs text-app-warning-300/80">
           {{ t('inspector.frontendConfig.detect.none') }}
         </p>
 
@@ -263,7 +263,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           <li
             v-for="(n, i) in detectResult.notes"
             :key="i"
-            class="flex items-start gap-1.5 text-[11px] leading-snug text-dimmed"
+            class="flex items-start gap-1.5 text-2xs leading-snug text-dimmed"
           >
             <span
               :class="
@@ -310,9 +310,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
     <!-- Build: package manager + frontend directory + install command + build script + output dir -->
     <InspectorSection v-model:open="showBuild" :title="t('inspector.frontendConfig.groups.build')">
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{
-          t('inspector.frontendConfig.packageManager')
-        }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.frontendConfig.packageManager') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="pm in PACKAGE_MANAGERS"
@@ -328,7 +326,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.frontendConfig.directory') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.directory') }}</label>
         <UInput
           :model-value="config.directory ?? ''"
           size="xs"
@@ -340,13 +338,13 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             (e: KeyboardEvent) => saveText('directory', (e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.directoryHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('inspector.frontendConfig.installCommand')
         }}</label>
         <UInput
@@ -366,9 +364,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
       <div class="grid grid-cols-2 gap-2">
         <div class="space-y-1">
-          <label class="text-[11px] text-muted">{{
-            t('inspector.frontendConfig.buildScript')
-          }}</label>
+          <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.buildScript') }}</label>
           <UInput
             :model-value="config.buildScript ?? ''"
             size="xs"
@@ -382,9 +378,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           />
         </div>
         <div class="space-y-1">
-          <label class="text-[11px] text-muted">{{
-            t('inspector.frontendConfig.outputDir')
-          }}</label>
+          <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.outputDir') }}</label>
           <UInput
             :model-value="config.outputDir ?? ''"
             size="xs"
@@ -403,7 +397,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
     <!-- Serve: mode (static vs command) + serve script (command mode) + port -->
     <InspectorSection v-model:open="showServe" :title="t('inspector.frontendConfig.groups.serve')">
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.frontendConfig.serveMode') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.frontendConfig.serveMode') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             :color="serveMode === 'static' ? 'primary' : 'neutral'"
@@ -423,23 +417,21 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           </UButton>
         </div>
         <!-- Explain each mode, and disambiguate from the separate envInjection axis. -->
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           <span class="text-muted">{{ t('inspector.frontendConfig.serveStatic') }}:</span>
           {{ t('inspector.frontendConfig.serveStaticDesc') }}
         </p>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           <span class="text-muted">{{ t('inspector.frontendConfig.serveCommand') }}:</span>
           {{ t('inspector.frontendConfig.serveCommandDesc') }}
         </p>
-        <p class="text-[11px] leading-snug text-dimmed/80">
+        <p class="text-2xs leading-snug text-dimmed/80">
           {{ t('inspector.frontendConfig.serveEnvAxisNote') }}
         </p>
       </div>
 
       <div v-if="serveMode === 'command'" class="space-y-1">
-        <label class="text-[11px] text-muted">{{
-          t('inspector.frontendConfig.serveScript')
-        }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.serveScript') }}</label>
         <UInput
           :model-value="config.serveScript ?? ''"
           size="xs"
@@ -454,7 +446,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.frontendConfig.servePort') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.servePort') }}</label>
         <UInput
           :model-value="config.servePort != null ? String(config.servePort) : ''"
           type="number"
@@ -475,7 +467,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       :title="t('inspector.frontendConfig.groups.mocking')"
     >
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('inspector.frontendConfig.mockMappingsPath')
         }}</label>
         <UInput
@@ -491,7 +483,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.mockMappingsHint') }}
         </p>
       </div>
@@ -521,7 +513,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             {{ t('inspector.frontendConfig.envRuntime') }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.envInjectionHint') }}
         </p>
       </div>
@@ -574,7 +566,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             />
           </div>
         </div>
-        <div v-else class="text-[11px] text-dimmed">
+        <div v-else class="text-2xs text-dimmed">
           {{ t('inspector.frontendConfig.bindings.empty') }}
         </div>
 
@@ -603,7 +595,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
               save({ previewEnabled: v === true ? true : undefined })
           "
         />
-        <p class="mt-1 text-[11px] leading-snug text-dimmed">
+        <p class="mt-1 text-2xs leading-snug text-dimmed">
           {{
             previewSupported
               ? t('inspector.frontendConfig.previewHint')
@@ -615,7 +607,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
         <div v-if="previewActive" class="mt-2 space-y-1.5" data-testid="preview-panel">
           <div class="flex items-center gap-2">
             <span
-              class="text-[11px] font-medium"
+              class="text-2xs font-medium"
               :class="{
                 'text-app-success-400': previewStatus === 'ready',
                 'text-app-warning-400': previewStatus === 'starting',
@@ -671,7 +663,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
           <p
             v-if="previewStatus === 'failed' && previewState?.error"
-            class="text-[11px] leading-snug text-app-error-400"
+            class="text-2xs leading-snug text-app-error-400"
             data-testid="preview-error"
           >
             {{ previewState.error }}
@@ -679,7 +671,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
           <p
             v-if="previewRequestError"
-            class="text-[11px] leading-snug text-app-error-400"
+            class="text-2xs leading-snug text-app-error-400"
             data-testid="preview-request-error"
           >
             {{ previewRequestError }}

package/app/components/panels/inspector/InitiativeInspector.vue

@@ -52,12 +52,12 @@ function control(action: 'pause' | 'resume' | 'cancel') {
       <UBadge color="primary" variant="subtle" size="sm">
         {{ t(INITIATIVE_STATUS_LABEL_KEYS[status]) }}
       </UBadge>
-      <span v-if="progress" class="text-[11px] text-muted">
+      <span v-if="progress" class="text-2xs text-muted">
         {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
       </span>
     </div>
 
-    <p v-if="initiative?.goal" class="whitespace-pre-wrap text-[12px] text-toned">
+    <p v-if="initiative?.goal" class="whitespace-pre-wrap text-xs text-toned">
       {{ initiative.goal }}
     </p>
 
@@ -165,7 +165,7 @@ function control(action: 'pause' | 'resume' | 'cancel') {
       </UButton>
     </div>
 
-    <p class="text-[11px] text-dimmed">
+    <p class="text-2xs text-dimmed">
       {{ t('initiative.inspector.hint') }}
     </p>
   </div>

package/app/components/panels/inspector/InspectorSection.vue

@@ -10,6 +10,8 @@
 // FrontendConfig opening its Build group after a detect run) can bind `v-model:open`;
 // without a binding the model acts as local state and `defaultOpen` picks the initial
 // value (controlled callers should drive their own ref instead of passing it).
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const props = defineProps<{
   title: string
   icon?: string
@@ -26,9 +28,10 @@ if (props.defaultOpen) open.value = true
 <template>
   <section class="border-t border-default pt-2" data-testid="inspector-section">
     <div class="flex items-center gap-1.5">
-      <button
+      <SectionLabel
+        as="button"
         type="button"
-        class="flex min-w-0 flex-1 items-center gap-1.5 text-start text-[11px] font-semibold uppercase tracking-wide text-muted hover:text-default"
+        class="flex min-w-0 flex-1 items-center gap-1.5 text-start hover:text-default"
         :aria-expanded="open"
         data-testid="inspector-section-toggle"
         @click="open = !open"
@@ -45,7 +48,7 @@ if (props.defaultOpen) open.value = true
           name="i-lucide-triangle-alert"
           class="h-3.5 w-3.5 shrink-0 text-app-warning-400"
         />
-      </button>
+      </SectionLabel>
       <!-- An action ("+", attach, menu) mutates the body list, so expand (never collapse)
            on interaction — otherwise the new row lands inside the collapsed body. -->
       <div v-if="$slots.actions" class="contents" @click="open = true">
@@ -53,7 +56,7 @@ if (props.defaultOpen) open.value = true
       </div>
     </div>
     <div v-if="open" class="mt-2 space-y-3">
-      <p v-if="hint" class="text-[11px] leading-snug text-dimmed">{{ hint }}</p>
+      <p v-if="hint" class="text-2xs leading-snug text-dimmed">{{ hint }}</p>
       <slot />
     </div>
   </section>

package/app/components/panels/inspector/RecurringScheduleSettings.vue

@@ -4,6 +4,7 @@
 // (lazily loaded; retained ~1 week on the backend).
 import type { Block } from '~/types/domain'
 import type { Recurrence } from '~/types/recurring'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ block: Block }>()
 const recurring = useRecurringPipelinesStore()
@@ -126,7 +127,7 @@ function fmtTime(ms: number) {
   <div v-if="schedule" class="space-y-2 rounded-lg border border-primary/50 bg-primary/10 p-3">
     <div class="flex items-center justify-between">
       <span
-        class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-primary"
+        class="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wide text-primary"
       >
         <UIcon name="i-lucide-repeat" class="h-3.5 w-3.5" />
         {{ t('inspector.recurring.title') }}
@@ -146,13 +147,13 @@ function fmtTime(ms: number) {
       </UBadge>
     </div>
 
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       <span class="text-toned">{{ pipelineName }}</span>
     </p>
 
     <!-- On-demand: no cadence, no pause/resume — it fires only when a person triggers it. -->
     <template v-if="schedule.onDemand">
-      <p class="text-[11px] text-dimmed">{{ t('inspector.recurring.onDemandHint') }}</p>
+      <p class="text-2xs text-dimmed">{{ t('inspector.recurring.onDemandHint') }}</p>
       <div class="flex flex-wrap gap-1.5 pt-1">
         <UButton size="xs" variant="soft" icon="i-lucide-play" :loading="busy" @click="runNow">
           {{ t('inspector.recurring.runNow') }}
@@ -161,8 +162,8 @@ function fmtTime(ms: number) {
     </template>
 
     <template v-else-if="!editing">
-      <p class="text-[11px] text-muted">{{ describeCadence(schedule.recurrence) }}</p>
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-muted">{{ describeCadence(schedule.recurrence) }}</p>
+      <p class="text-2xs text-dimmed">
         {{ t('inspector.recurring.nextRun', { time: fmtTime(schedule.nextRunAt) }) }}
       </p>
       <div class="flex flex-wrap gap-1.5 pt-1">
@@ -213,10 +214,10 @@ function fmtTime(ms: number) {
 
     <!-- run history -->
     <div v-if="runs.length" class="space-y-1 border-t border-default pt-2">
-      <span class="text-[10px] font-semibold uppercase tracking-wide text-dimmed">
+      <SectionLabel as="span">
         {{ t('inspector.recurring.recentRuns') }}
-      </span>
-      <div v-for="run in runs" :key="run.id" class="flex items-center gap-2 text-[11px]">
+      </SectionLabel>
+      <div v-for="run in runs" :key="run.id" class="flex items-center gap-2 text-2xs">
         <span :class="RUN_COLOR[run.status] ?? 'text-muted'" class="w-14 shrink-0">
           {{ runStatusLabel(run.status) }}
         </span>

package/app/components/panels/inspector/ServiceConnections.vue

@@ -135,12 +135,12 @@ const usedBy = computed(() =>
         />
       </div>
     </div>
-    <div v-else class="text-[11px] text-dimmed">
+    <div v-else class="text-2xs text-dimmed">
       {{ t('inspector.serviceConnections.empty') }}
     </div>
 
     <div v-if="usedBy.length" class="space-y-1" data-testid="service-connections-used-by">
-      <span class="text-[11px] text-muted">{{ t('inspector.serviceConnections.usedBy') }}</span>
+      <span class="text-2xs text-muted">{{ t('inspector.serviceConnections.usedBy') }}</span>
       <div class="flex flex-wrap gap-1">
         <UBadge v-for="f in usedBy" :key="f.id" size="sm" variant="soft" color="neutral">
           {{ f.title || f.id }}

package/app/components/panels/inspector/ServiceReleaseHealthConfig.vue

@@ -114,7 +114,7 @@ async function clear() {
     <!-- Disabled affordance until an observability integration is connected. -->
     <div
       v-if="!connected"
-      class="flex items-center justify-between gap-2 rounded-md border border-default bg-default/60 px-2 py-1.5 text-[11px] text-muted"
+      class="flex items-center justify-between gap-2 rounded-md border border-default bg-default/60 px-2 py-1.5 text-2xs text-muted"
     >
       <span>{{ t('inspector.releaseHealth.connectPrompt') }}</span>
       <UButton
@@ -130,7 +130,7 @@ async function clear() {
     </div>
 
     <div v-else class="space-y-2">
-      <p class="text-[11px] text-dimmed">
+      <p class="text-2xs text-dimmed">
         {{ t('inspector.releaseHealth.hint') }}
       </p>
       <div class="grid grid-cols-2 gap-2">