@cat-factory/app 0.307.1 → 0.309.0

package/app/components/humanTest/HumanTestWindow.vue

@@ -15,6 +15,7 @@ import type {
 type HumanTestRoundOutcome = NonNullable<HumanTestRound['outcome']>
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -168,11 +169,11 @@ const canDestroy = computed(
       <template v-else>
         <!-- Environment -->
         <section class="rounded-lg border border-default bg-default/60 p-4">
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('humanTest.environment.heading') }}
-          </h3>
+          </SectionLabel>
           <div v-if="env" class="space-y-2">
-            <div class="flex items-center gap-2 text-[13px]">
+            <div class="flex items-center gap-2 text-sm">
               <UIcon
                 name="i-lucide-circle-dot"
                 class="h-3.5 w-3.5"
@@ -187,22 +188,22 @@ const canDestroy = computed(
               :href="env.url"
               target="_blank"
               rel="noopener"
-              class="inline-flex items-center gap-1.5 break-all text-[13px] text-app-info-300 hover:underline"
+              class="inline-flex items-center gap-1.5 break-all text-sm text-app-info-300 hover:underline"
             >
               <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
               {{ env.url }}
             </a>
-            <p v-else class="text-[12px] italic text-dimmed">
+            <p v-else class="text-xs italic text-dimmed">
               {{ t('humanTest.environment.noUrl') }}
             </p>
-            <p v-if="env.expiresAt" class="text-[11px] text-dimmed">
+            <p v-if="env.expiresAt" class="text-2xs text-dimmed">
               {{ t('humanTest.environment.expires', { date: d(new Date(env.expiresAt), 'long') }) }}
             </p>
           </div>
-          <p v-else class="text-[12px] text-app-warning-300/90">
+          <p v-else class="text-xs text-app-warning-300/90">
             {{ ht.degradedReason ?? t('humanTest.environment.none') }}
           </p>
-          <p v-if="env && ht.degradedReason" class="mt-2 text-[12px] text-app-warning-300/90">
+          <p v-if="env && ht.degradedReason" class="mt-2 text-xs text-app-warning-300/90">
             {{ ht.degradedReason }}
           </p>
 
@@ -249,7 +250,7 @@ const canDestroy = computed(
         <!-- Working state -->
         <p
           v-if="working"
-          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-[12px] text-toned"
+          class="flex items-center gap-2 rounded-lg border border-default bg-app-950/40 px-3 py-2 text-xs text-toned"
         >
           <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-app-warning-300" />
           {{ phase ? t(PHASE_LABEL[phase]) : '' }}
@@ -258,11 +259,11 @@ const canDestroy = computed(
         <!-- Findings / fix -->
         <section v-if="awaitingHuman" class="rounded-lg border border-default bg-default/60 p-4">
           <div class="flex items-center justify-between">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3">
               {{ t('humanTest.fix.heading') }}
-            </h3>
+            </SectionLabel>
             <button
-              class="text-[12px] text-muted hover:text-default"
+              class="text-xs text-muted hover:text-default"
               @click="showFindings = !showFindings"
             >
               {{ showFindings ? t('humanTest.fix.cancel') : t('humanTest.fix.requestFix') }}
@@ -273,7 +274,7 @@ const canDestroy = computed(
               v-model="findings"
               rows="4"
               :placeholder="t('humanTest.fix.placeholder')"
-              class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-[13px] text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
+              class="w-full rounded-md border border-muted bg-app-950 px-3 py-2 text-sm text-default placeholder:text-app-600 focus:border-app-warning-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-app-warning-500/60"
             />
             <UButton
               size="sm"
@@ -294,11 +295,11 @@ const canDestroy = computed(
           v-if="ht.rounds && ht.rounds.length"
           class="rounded-lg border border-default bg-default/60 p-4"
         >
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('humanTest.history.heading', { count: ht.attempts }, ht.attempts) }}
-          </h3>
+          </SectionLabel>
           <ol class="space-y-2">
-            <li v-for="(r, i) in ht.rounds" :key="i" class="flex items-start gap-2 text-[12px]">
+            <li v-for="(r, i) in ht.rounds" :key="i" class="flex items-start gap-2 text-xs">
               <UIcon
                 :name="r.kind === 'fix' ? 'i-lucide-wrench' : 'i-lucide-git-merge'"
                 class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted"
@@ -310,7 +311,7 @@ const canDestroy = computed(
                     : t('humanTest.history.pulledMain')
                 }}</span>
                 <span
-                  class="ms-1.5 rounded px-1 text-[10px] uppercase"
+                  class="ms-1.5 rounded-sm px-1 text-3xs uppercase"
                   :class="
                     r.outcome === 'completed'
                       ? 'bg-app-success-500/15 text-app-success-300'

package/app/components/initiative/InitiativePlanNotice.vue

@@ -45,13 +45,13 @@ const { t } = useI18n()
     <header class="flex items-start gap-2.5">
       <UIcon name="i-lucide-clipboard-check" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-300" />
       <div class="min-w-0 flex-1">
-        <h3 class="text-[13px] font-semibold text-app-warning-200">
+        <h3 class="text-sm font-semibold text-app-warning-200">
           {{ t('initiative.planReview.title') }}
         </h3>
-        <p class="mt-0.5 text-[12px] leading-relaxed text-app-warning-100/80">
+        <p class="mt-0.5 text-xs leading-relaxed text-app-warning-100/80">
           {{ t('initiative.planReview.body') }}
         </p>
-        <p class="mt-2 text-[12px] leading-relaxed text-app-warning-100/70">
+        <p class="mt-2 text-xs leading-relaxed text-app-warning-100/70">
           {{ t('initiative.planReview.noDocument') }}
           <template v-if="hasSections">
             {{ t('initiative.planReview.noDocumentSections') }}

package/app/components/initiative/InitiativePlanReview.vue

@@ -30,6 +30,7 @@ import type { StepApproval } from '~/types/execution'
 import { useStepProse } from '~/composables/useStepProse'
 import { useProseComments } from '~/composables/useProseComments'
 import InitiativePlanDecision from '~/components/initiative/InitiativePlanDecision.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   /** The parked gate under review. */
@@ -150,12 +151,9 @@ async function copyPlan() {
       class="hidden w-52 shrink-0 flex-col border-e border-default bg-default/60 lg:flex"
     >
       <div class="flex items-center gap-0.5 border-b border-default px-3 py-2">
-        <span
-          v-if="outline.hasToc"
-          class="min-w-0 flex-1 truncate text-[11px] font-semibold uppercase tracking-wide text-dimmed"
-        >
+        <SectionLabel v-if="outline.hasToc" as="span" class="min-w-0 flex-1 truncate">
           {{ t('panels.stepDetail.contents') }}
-        </span>
+        </SectionLabel>
         <span v-else class="flex-1" />
         <!-- Collapse-all tracks the outline: with no headings the only section is the untitled
              preamble, which renders no toggle of its own, so collapsing it would hide the whole
@@ -190,7 +188,7 @@ async function copyPlan() {
         <button
           v-for="s in tocSections"
           :key="s.id"
-          class="block w-full truncate rounded-md px-2 py-1 text-start text-[12px] transition"
+          class="block w-full truncate rounded-md px-2 py-1 text-start text-xs transition"
           :class="
             activeId === s.id
               ? 'bg-app-warning-500/15 font-medium text-app-warning-100'
@@ -221,9 +219,9 @@ async function copyPlan() {
           :aria-expanded="runDetailsOpen"
           @click="runDetailsOpen = !runDetailsOpen"
         >
-          <span class="flex-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="flex-1">
             {{ t('panels.stepDetail.details') }}
-          </span>
+          </SectionLabel>
           <UIcon
             :name="runDetailsOpen ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'"
             class="h-3.5 w-3.5 shrink-0 text-dimmed"
@@ -251,7 +249,7 @@ async function copyPlan() {
            `5xl` shell), so a cap was dead markup and the comment here said so. On a window that now
            spans the viewport it is the only thing between the plan and 200-character lines, and it
            is the step reader's own measure (`AgentStepDetail`, `mx-auto max-w-3xl` over the same
-           13px `.reader-prose`) rather than a second opinion about how wide prose should be. The
+           `text-sm` `.reader-prose`) rather than a second opinion about how wide prose should be. The
            leftover width is the document's margins; the LAYOUT is what the extra space bought —
            outline and rail no longer competing with the plan for one 5xl card. -->
       <div class="mx-auto w-full max-w-3xl">
@@ -264,7 +262,7 @@ async function copyPlan() {
         >
           <button
             v-if="s.depth > 0"
-            class="group flex w-full items-center gap-1.5 rounded py-0.5 text-start transition hover:text-highlighted"
+            class="group flex w-full items-center gap-1.5 rounded-sm py-0.5 text-start transition hover:text-highlighted"
             :aria-expanded="!collapsed[s.id]"
             @click="toggle(s.id)"
           >
@@ -275,7 +273,7 @@ async function copyPlan() {
             />
             <span
               class="font-semibold text-app-100"
-              :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-[13px]'"
+              :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
               v-html="s.titleHtml"
             />
           </button>
@@ -285,7 +283,7 @@ async function copyPlan() {
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div
             v-show="!collapsed[s.id]"
-            class="reader-prose mt-0.5 text-[13px] leading-relaxed text-toned"
+            class="reader-prose mt-0.5 text-sm leading-relaxed text-toned"
             :class="[s.depth > 0 ? 'ps-5' : '', canExecute ? 'review-mode' : '']"
             @click="onProseClick"
             v-html="s.bodyHtml"
@@ -305,12 +303,12 @@ async function copyPlan() {
         <!-- A HEADING, not a styled div: this rail is what the window is now for, so the surface
              that asks the human for a decision has to be reachable as one. -->
         <h3
-          class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-app-warning-400"
+          class="flex items-center gap-1.5 text-2xs font-semibold uppercase tracking-wide text-app-warning-400"
         >
           <UIcon name="i-lucide-clipboard-check" class="h-3.5 w-3.5 shrink-0" />
           {{ t('initiative.planReview.title') }}
         </h3>
-        <p class="mt-1 text-[12px] leading-relaxed text-muted">
+        <p class="mt-1 text-xs leading-relaxed text-muted">
           {{ t('initiative.planReview.body') }}
         </p>
       </div>
@@ -322,11 +320,11 @@ async function copyPlan() {
           data-testid="initiative-plan-composer"
           class="rounded-lg border border-primary/40 bg-primary/5 p-2.5"
         >
-          <div class="mb-1 text-[10px] uppercase tracking-wide text-primary">
+          <div class="mb-1 text-3xs uppercase tracking-wide text-primary">
             {{ t('panels.stepDetail.commentingOn') }}
           </div>
           <pre
-            class="mb-2 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-app-950/60 p-1.5 text-[11px] text-toned"
+            class="mb-2 max-h-20 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/60 p-1.5 text-2xs text-toned"
             >{{ draftTarget.quotedSource }}</pre>
           <UTextarea
             v-model="draftBody"
@@ -361,9 +359,9 @@ async function copyPlan() {
           class="rounded-lg border border-default bg-default/50 p-2.5"
         >
           <div class="mb-1 flex items-start justify-between gap-2">
-            <div class="text-[10px] uppercase tracking-wide text-dimmed">
+            <SectionLabel>
               {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
-            </div>
+            </SectionLabel>
             <button
               class="text-dimmed transition hover:text-app-error-400"
               :title="t('panels.stepDetail.removeComment')"
@@ -373,16 +371,16 @@ async function copyPlan() {
             </button>
           </div>
           <pre
-            class="mb-1 max-h-16 overflow-auto whitespace-pre-wrap rounded bg-app-950/50 p-1.5 text-[10px] text-muted"
+            class="mb-1 max-h-16 overflow-auto whitespace-pre-wrap rounded-sm bg-app-950/50 p-1.5 text-3xs text-muted"
             >{{ c.quotedSource }}</pre>
-          <p class="text-[12px] text-default">{{ c.body }}</p>
+          <p class="text-xs text-default">{{ c.body }}</p>
         </div>
 
         <!-- Only worth saying where clicking a block does something (the RBAC to act on it) and
              where nothing has been said yet. -->
         <p
           v-if="canExecute && !draftTarget && !planComments.length"
-          class="text-[11px] leading-relaxed text-muted"
+          class="text-2xs leading-relaxed text-muted"
         >
           {{ t('initiative.planReview.commentHint') }}
         </p>

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -221,7 +221,7 @@ async function onDiscard() {
         </div>
 
         <template v-else>
-          <p class="mb-4 text-[13px] leading-relaxed text-toned">
+          <p class="mb-4 text-sm leading-relaxed text-toned">
             {{ t('initiative.planning.intro') }}
           </p>
 
@@ -259,7 +259,7 @@ async function onDiscard() {
                converged, which means the planner already has what it needs). -->
           <div
             v-else-if="phase === 'idle' && questions.length === 0"
-            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
+            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-sm text-muted"
             data-testid="initiative-planning-idle"
           >
             {{ t('initiative.planning.idle') }}
@@ -268,7 +268,7 @@ async function onDiscard() {
           <!-- Converged / no pending questions -->
           <div
             v-else-if="phase === 'converged' || questions.length === 0"
-            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-[13px] text-muted"
+            class="rounded-lg border border-default bg-app-950/40 p-4 text-center text-sm text-muted"
             data-testid="initiative-planning-converged"
           >
             {{ t('initiative.planning.converged') }}
@@ -301,7 +301,7 @@ async function onDiscard() {
                    flush could only drop. -->
               <p
                 v-if="!addressable(q)"
-                class="mt-1 text-[11px] text-app-warning-300"
+                class="mt-1 text-2xs text-app-warning-300"
                 data-testid="initiative-planning-unanswerable"
               >
                 {{ t('initiative.planning.unanswerable') }}
@@ -360,7 +360,7 @@ async function onDiscard() {
         v-if="phase === 'awaiting' && questions.length > 0"
         class="ms-auto flex items-center gap-2"
       >
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           <span
             v-if="unanswered > 0"
             class="text-app-warning-400/90"

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -29,6 +29,7 @@ import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import InitiativePlanReview from '~/components/initiative/InitiativePlanReview.vue'
 import InitiativePlanNotice from '~/components/initiative/InitiativePlanNotice.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
@@ -313,7 +314,7 @@ const { requestClose } = useUnsavedGuard({
             :style="{ width: `${progressPct}%` }"
           />
         </div>
-        <span class="text-[11px] tabular-nums text-muted">
+        <span class="text-2xs tabular-nums text-muted">
           {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
         </span>
       </div>
@@ -385,15 +386,15 @@ const { requestClose } = useUnsavedGuard({
                 class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-300"
               />
               <div class="min-w-0 flex-1">
-                <h3 class="text-[13px] font-semibold text-app-warning-200">
+                <h3 class="text-sm font-semibold text-app-warning-200">
                   {{ t('initiative.checkpoint.pausedTitle') }}
                 </h3>
-                <p class="mt-0.5 text-[12px] leading-relaxed text-app-warning-100/80">
+                <p class="mt-0.5 text-xs leading-relaxed text-app-warning-100/80">
                   {{ t('initiative.checkpoint.pausedBody', { phase: checkpointPhase!.title }) }}
                 </p>
                 <div class="mt-2.5 flex flex-wrap gap-2">
                   <button
-                    class="rounded bg-primary/90 px-2.5 py-1 text-[11px] font-medium text-inverted hover:bg-primary disabled:opacity-50"
+                    class="rounded-sm bg-primary/90 px-2.5 py-1 text-2xs font-medium text-inverted hover:bg-primary disabled:opacity-50"
                     :disabled="initiatives.controlling"
                     data-testid="initiative-checkpoint-resume"
                     @click="checkpointControl('resume')"
@@ -401,7 +402,7 @@ const { requestClose } = useUnsavedGuard({
                     {{ t('initiative.inspector.resume') }}
                   </button>
                   <button
-                    class="rounded border border-app-error-500/50 px-2.5 py-1 text-[11px] font-medium text-app-error-300 hover:bg-app-error-500/10 disabled:opacity-50"
+                    class="rounded-sm border border-app-error-500/50 px-2.5 py-1 text-2xs font-medium text-app-error-300 hover:bg-app-error-500/10 disabled:opacity-50"
                     :disabled="initiatives.controlling"
                     data-testid="initiative-checkpoint-cancel"
                     @click="checkpointControl('cancel')"
@@ -418,34 +419,34 @@ const { requestClose } = useUnsavedGuard({
                structure that reads better at the full span, but these are paragraphs and bullets
                of agent-written text that would otherwise run the width of the display. -->
           <section v-if="initiative.goal" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.goal') }}
-            </h3>
-            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-toned">
+            </SectionLabel>
+            <p class="max-w-3xl whitespace-pre-wrap text-sm leading-relaxed text-toned">
               {{ initiative.goal }}
             </p>
           </section>
           <section v-if="initiative.constraints?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.constraints') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="(c, i) in initiative.constraints" :key="i">{{ c }}</li>
             </ul>
           </section>
           <section v-if="initiative.nonGoals?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.nonGoals') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="(g, i) in initiative.nonGoals" :key="i">{{ g }}</li>
             </ul>
           </section>
           <section v-if="initiative.analysisSummary" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.analysis') }}
-            </h3>
-            <p class="max-w-3xl whitespace-pre-wrap text-[13px] leading-relaxed text-toned">
+            </SectionLabel>
+            <p class="max-w-3xl whitespace-pre-wrap text-sm leading-relaxed text-toned">
               {{ initiative.analysisSummary }}
             </p>
           </section>
@@ -453,7 +454,7 @@ const { requestClose } = useUnsavedGuard({
           <!-- Awaiting planning -->
           <div
             v-if="phases.length === 0"
-            class="mb-4 rounded-lg border border-dashed border-muted p-4 text-center text-[12px] text-muted"
+            class="mb-4 rounded-lg border border-dashed border-muted p-4 text-center text-xs text-muted"
           >
             {{ t('initiative.tracker.noPlan') }}
           </div>
@@ -488,9 +489,9 @@ const { requestClose } = useUnsavedGuard({
                 }}
               </UBadge>
             </h3>
-            <p v-if="phase.goal" class="mb-2 text-[12px] text-muted">{{ phase.goal }}</p>
+            <p v-if="phase.goal" class="mb-2 text-xs text-muted">{{ phase.goal }}</p>
             <div class="overflow-x-auto rounded-lg border border-default">
-              <table class="w-full text-[12px]">
+              <table class="w-full text-xs">
                 <thead>
                   <tr class="border-b border-default text-left text-dimmed">
                     <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colItem') }}</th>
@@ -506,7 +507,7 @@ const { requestClose } = useUnsavedGuard({
                   >
                     <td class="px-3 py-2 align-top">
                       <div class="font-medium text-default">{{ item.title }}</div>
-                      <div v-if="item.dependsOn?.length" class="mt-0.5 text-[10px] text-dimmed">
+                      <div v-if="item.dependsOn?.length" class="mt-0.5 text-3xs text-dimmed">
                         {{
                           t('initiative.tracker.dependsOn', {
                             items: item.dependsOn.join(', '),
@@ -515,7 +516,7 @@ const { requestClose } = useUnsavedGuard({
                       </div>
                       <div
                         v-if="item.note"
-                        class="mt-0.5 max-w-3xl text-[10px] text-app-warning-300/80"
+                        class="mt-0.5 max-w-3xl text-3xs text-app-warning-300/80"
                       >
                         {{ item.note }}
                       </div>
@@ -525,7 +526,7 @@ const { requestClose } = useUnsavedGuard({
                       >
                         <button
                           v-if="item.status === 'blocked'"
-                          class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
+                          class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated disabled:opacity-50"
                           :disabled="initiatives.curating"
                           :data-testid="`initiative-item-retry-${item.id}`"
                           @click="itemAction(item, 'retry')"
@@ -533,7 +534,7 @@ const { requestClose } = useUnsavedGuard({
                           {{ t('initiative.curation.retry') }}
                         </button>
                         <button
-                          class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
+                          class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated disabled:opacity-50"
                           :disabled="initiatives.curating"
                           :data-testid="`initiative-item-skip-${item.id}`"
                           @click="itemAction(item, 'skip')"
@@ -572,19 +573,19 @@ const { requestClose } = useUnsavedGuard({
           <!-- Execution policy -->
           <section v-if="initiative.policy" class="mb-4">
             <div class="mb-1 flex items-center gap-2">
-              <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+              <SectionLabel as="h3">
                 {{ t('initiative.tracker.policy') }}
-              </h3>
+              </SectionLabel>
               <button
                 v-if="editable && !editingPolicy"
-                class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated"
+                class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated"
                 data-testid="initiative-policy-edit"
                 @click="startEditPolicy"
               >
                 {{ t('initiative.curation.edit') }}
               </button>
             </div>
-            <ul v-if="!editingPolicy" class="text-[12px] text-toned">
+            <ul v-if="!editingPolicy" class="text-xs text-toned">
               <li>
                 {{
                   t('initiative.tracker.maxConcurrent', {
@@ -603,29 +604,29 @@ const { requestClose } = useUnsavedGuard({
             </ul>
             <!-- Edit form: the two scalar knobs; planner-authored rules are preserved. -->
             <div v-else class="flex flex-col gap-2 rounded-lg border border-default p-3">
-              <label class="flex items-center gap-2 text-[12px] text-toned">
+              <label class="flex items-center gap-2 text-xs text-toned">
                 <span class="w-40">{{ t('initiative.curation.maxConcurrentField') }}</span>
                 <input
                   v-model.number="policyForm.maxConcurrent"
                   type="number"
                   min="1"
                   max="20"
-                  class="w-20 rounded border border-muted bg-app-950 px-2 py-1 text-default"
+                  class="w-20 rounded-sm border border-muted bg-app-950 px-2 py-1 text-default"
                   data-testid="initiative-policy-max-concurrent"
                 />
               </label>
-              <label class="flex items-center gap-2 text-[12px] text-toned">
+              <label class="flex items-center gap-2 text-xs text-toned">
                 <span class="w-40">{{ t('initiative.curation.defaultPipelineField') }}</span>
                 <input
                   v-model="policyForm.defaultPipelineId"
                   type="text"
-                  class="flex-1 rounded border border-muted bg-app-950 px-2 py-1 font-mono text-[11px] text-default"
+                  class="flex-1 rounded-sm border border-muted bg-app-950 px-2 py-1 font-mono text-2xs text-default"
                   data-testid="initiative-policy-default-pipeline"
                 />
               </label>
               <div class="flex gap-2">
                 <button
-                  class="rounded bg-primary/90 px-2 py-1 text-[11px] text-inverted hover:bg-primary disabled:opacity-50"
+                  class="rounded-sm bg-primary/90 px-2 py-1 text-2xs text-inverted hover:bg-primary disabled:opacity-50"
                   :disabled="initiatives.curating"
                   data-testid="initiative-policy-save"
                   @click="savePolicy"
@@ -633,7 +634,7 @@ const { requestClose } = useUnsavedGuard({
                   {{ t('initiative.curation.save') }}
                 </button>
                 <button
-                  class="rounded border border-muted px-2 py-1 text-[11px] text-toned hover:bg-elevated"
+                  class="rounded-sm border border-muted px-2 py-1 text-2xs text-toned hover:bg-elevated"
                   @click="editingPolicy = false"
                 >
                   {{ t('initiative.curation.cancel') }}
@@ -644,10 +645,10 @@ const { requestClose } = useUnsavedGuard({
 
           <!-- Logs -->
           <section v-if="initiative.decisions?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.decisions') }}
-            </h3>
-            <ul class="list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="list-inside list-disc text-sm text-toned">
               <li v-for="d in initiative.decisions" :key="d.id">
                 <span class="font-medium">{{ d.title }}</span>
                 <span v-if="d.detail" class="text-muted"> — {{ d.detail }}</span>
@@ -655,10 +656,10 @@ const { requestClose } = useUnsavedGuard({
             </ul>
           </section>
           <section v-if="initiative.deviations?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.deviations') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="d in initiative.deviations" :key="d.id">
                 <code v-if="d.itemId" class="text-muted">{{ d.itemId }}</code>
                 {{ d.description }}
@@ -667,10 +668,10 @@ const { requestClose } = useUnsavedGuard({
             </ul>
           </section>
           <section v-if="initiative.followUps?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.followUps') }}
-            </h3>
-            <ul class="flex flex-col gap-2 text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="flex flex-col gap-2 text-sm text-toned">
               <li
                 v-for="f in initiative.followUps"
                 :key="f.id"
@@ -693,11 +694,11 @@ const { requestClose } = useUnsavedGuard({
                 <!-- Triage actions for an open follow-up (only while executing) -->
                 <div v-if="editable && f.status === 'open'" class="mt-2">
                   <div v-if="promotingId === f.id" class="flex flex-col gap-2">
-                    <label class="flex items-center gap-2 text-[12px]">
+                    <label class="flex items-center gap-2 text-xs">
                       <span class="text-muted">{{ t('initiative.curation.phaseField') }}</span>
                       <select
                         v-model="promoteForm.phaseId"
-                        class="flex-1 rounded border border-muted bg-app-950 px-2 py-1 text-default"
+                        class="flex-1 rounded-sm border border-muted bg-app-950 px-2 py-1 text-default"
                         data-testid="initiative-promote-phase"
                       >
                         <option v-for="p in phases" :key="p.id" :value="p.id">
@@ -708,13 +709,13 @@ const { requestClose } = useUnsavedGuard({
                     <input
                       v-model="promoteForm.title"
                       type="text"
-                      class="rounded border border-muted bg-app-950 px-2 py-1 text-[12px] text-default"
+                      class="rounded-sm border border-muted bg-app-950 px-2 py-1 text-xs text-default"
                       :placeholder="t('initiative.curation.itemTitlePlaceholder')"
                       data-testid="initiative-promote-title"
                     />
                     <div class="flex gap-2">
                       <button
-                        class="rounded bg-primary/90 px-2 py-1 text-[11px] text-inverted hover:bg-primary disabled:opacity-50"
+                        class="rounded-sm bg-primary/90 px-2 py-1 text-2xs text-inverted hover:bg-primary disabled:opacity-50"
                         :disabled="initiatives.curating || !promoteForm.phaseId"
                         data-testid="initiative-promote-submit"
                         @click="submitPromote(f)"
@@ -722,7 +723,7 @@ const { requestClose } = useUnsavedGuard({
                         {{ t('initiative.curation.promoteConfirm') }}
                       </button>
                       <button
-                        class="rounded border border-muted px-2 py-1 text-[11px] text-toned hover:bg-elevated"
+                        class="rounded-sm border border-muted px-2 py-1 text-2xs text-toned hover:bg-elevated"
                         @click="promotingId = null"
                       >
                         {{ t('initiative.curation.cancel') }}
@@ -731,14 +732,14 @@ const { requestClose } = useUnsavedGuard({
                   </div>
                   <div v-else class="flex gap-1.5">
                     <button
-                      class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated"
+                      class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated"
                       data-testid="initiative-followup-promote"
                       @click="startPromote(f)"
                     >
                       {{ t('initiative.curation.promote') }}
                     </button>
                     <button
-                      class="rounded border border-muted px-1.5 py-0.5 text-[10px] text-toned hover:bg-elevated disabled:opacity-50"
+                      class="rounded-sm border border-muted px-1.5 py-0.5 text-3xs text-toned hover:bg-elevated disabled:opacity-50"
                       :disabled="initiatives.curating"
                       data-testid="initiative-followup-dismiss"
                       @click="dismissFollowUp(f)"
@@ -751,10 +752,10 @@ const { requestClose } = useUnsavedGuard({
             </ul>
           </section>
           <section v-if="initiative.caveats?.length" class="mb-4">
-            <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1">
               {{ t('initiative.tracker.caveats') }}
-            </h3>
-            <ul class="max-w-3xl list-inside list-disc text-[13px] text-toned">
+            </SectionLabel>
+            <ul class="max-w-3xl list-inside list-disc text-sm text-toned">
               <li v-for="(c, i) in initiative.caveats" :key="i">{{ c }}</li>
             </ul>
           </section>