@cat-factory/app 0.308.0 → 0.310.0

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,16 +333,17 @@ 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>
 
     <div class="max-h-56 space-y-0.5 overflow-y-auto">
       <!-- Already-imported issues (linked directly, no re-fetch). -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-for="row in importedRows"
         :key="`imp:${row.externalId}`"
-        type="button"
         class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
         @click="pickImported(row)"
       >
@@ -353,13 +352,14 @@ onMounted(() => {
         <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
           t('tasks.picker.imported')
         }}</UBadge>
-      </button>
+      </UButton>
 
       <!-- Tracker search hits (imported on add). -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-for="r in searchRows"
         :key="`hit:${r.externalId}`"
-        type="button"
         class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
         @click="pickSearch(r)"
       >
@@ -368,12 +368,13 @@ onMounted(() => {
         <UBadge v-if="r.status" color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
           {{ r.status }}
         </UBadge>
-      </button>
+      </UButton>
 
       <!-- Explicit URL/key reference (imported on add). -->
-      <button
+      <UButton
+        color="neutral"
+        variant="ghost"
         v-if="refRow"
-        type="button"
         class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-toned hover:bg-elevated/70"
         @click="pickRef(refRow)"
       >
@@ -385,7 +386,7 @@ onMounted(() => {
             </template>
           </i18n-t>
         </span>
-      </button>
+      </UButton>
 
       <EmptyState
         v-if="empty"

package/app/components/tasks/TaskContextIssues.vue

@@ -132,10 +132,11 @@ async function attach(item: PendingContext) {
     />
 
     <div v-if="linked.length" class="space-y-1">
-      <a
+      <ULink
+        raw
         v-for="issue in linked"
         :key="`${issue.source}:${issue.externalId}`"
-        :href="issue.url"
+        :to="issue.url"
         target="_blank"
         rel="noopener"
         class="flex items-center gap-1.5 rounded-md border border-default bg-default/60 px-2 py-1.5 text-xs text-toned hover:bg-elevated/60"
@@ -148,9 +149,9 @@ async function attach(item: PendingContext) {
         <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
           {{ issue.status }}
         </UBadge>
-      </a>
+      </ULink>
     </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

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -128,10 +128,10 @@ async function toggleEnabled(enabled: boolean) {
 
         <!-- Credentialless source (GitHub Issues): no form, just the on/off toggle. -->
         <template v-if="credentialless">
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('tasks.connect.credentialless') }}
           </p>
-          <p v-if="!available" class="text-[11px] text-app-warning-400">
+          <p v-if="!available" class="text-2xs text-app-warning-400">
             {{ t('tasks.connect.installAppHint', { label: descriptor.label }) }}
           </p>
         </template>
@@ -149,7 +149,7 @@ async function toggleEnabled(enabled: boolean) {
             >
               {{ t('tasks.connect.oauthButton', { label: descriptor.label }) }}
             </UButton>
-            <p class="text-center text-[11px] text-dimmed">
+            <p class="text-center text-2xs text-dimmed">
               {{ t('tasks.connect.oauthOr') }}
             </p>
           </template>
@@ -167,7 +167,7 @@ async function toggleEnabled(enabled: boolean) {
             />
           </UFormField>
         </div>
-        <p v-else class="text-[11px] text-dimmed">
+        <p v-else class="text-2xs text-dimmed">
           {{
             connection?.label
               ? t('tasks.connect.connectedTo', { label: connection.label })
@@ -184,7 +184,7 @@ async function toggleEnabled(enabled: boolean) {
             <div class="font-medium text-default">
               {{ t('tasks.connect.offerToWorkspace') }}
             </div>
-            <div class="text-[11px] text-dimmed">
+            <div class="text-2xs text-dimmed">
               {{ t('tasks.connect.offerHint', { label: descriptor.label }) }}
             </div>
           </div>

package/app/components/testing/TestReportWindow.vue

@@ -22,6 +22,7 @@ import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusP
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 import MarkdownProse from '~/components/common/MarkdownProse.vue'
 import { runIsActive } from '~/utils/pipelineRender'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -361,7 +362,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
       </UBadge>
       <span
         v-if="testState && testState.attempts > 0"
-        class="text-[11px] text-muted"
+        class="text-2xs text-muted"
         :title="t('testing.fixerAttempts')"
       >
         {{ t('testing.fixCount', { attempts: testState.attempts, max: testState.maxAttempts }) }}
@@ -384,9 +385,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           data-testid="tester-infrastructure"
           class="space-y-3"
         >
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3">
             {{ t('testing.infrastructure') }}
-          </h3>
+          </SectionLabel>
           <StepContainerStatus :step="step" :run-failed="runFailed" :run-active="runActive" />
           <EnvironmentStatusPanel
             v-if="stepEnvironment"
@@ -414,10 +415,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 class="h-3.5 w-3.5 shrink-0"
                 :class="infraSetup.started ? 'text-app-success-400' : 'text-app-error-400'"
               />
-              <span class="text-[13px] font-medium text-default">
+              <span class="text-sm font-medium text-default">
                 {{ standupHeadline }}
               </span>
-              <span v-if="infraSetup.durationMs != null" class="ms-auto text-[11px] text-dimmed">
+              <span v-if="infraSetup.durationMs != null" class="ms-auto text-2xs text-dimmed">
                 {{
                   t('testing.standup.took', {
                     seconds: n(infraSetup.durationMs / 1000, 'decimal'),
@@ -425,12 +426,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 }}
               </span>
             </div>
-            <p v-if="infraSetup.composePath" class="mt-1 font-mono text-[11px] text-dimmed">
+            <p v-if="infraSetup.composePath" class="mt-1 font-mono text-2xs text-dimmed">
               {{ infraSetup.composePath }}
             </p>
             <p
               v-if="infraSetup.error"
-              class="mt-1 text-[12px] leading-snug text-app-error-300"
+              class="mt-1 text-xs leading-snug text-app-error-300"
               data-testid="tester-infra-setup-error"
             >
               {{ infraSetup.error }}
@@ -455,7 +456,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               <pre
                 v-if="showInfraSetupLogs"
                 data-testid="tester-infra-setup-logs"
-                class="mt-2 max-h-64 overflow-auto rounded bg-app-950/70 p-2 font-mono text-[11px] leading-relaxed text-toned"
+                class="mt-2 max-h-64 overflow-auto rounded-sm bg-app-950/70 p-2 font-mono text-2xs leading-relaxed text-toned"
                 >{{ infraSetup.logs }}</pre>
             </template>
           </div>
@@ -467,7 +468,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           <div
             v-if="infraReady"
             data-testid="tester-env-ready"
-            class="flex items-center gap-2 rounded-lg border border-app-success-500/30 bg-app-success-500/10 px-3 py-2 text-[13px] text-app-success-200"
+            class="flex items-center gap-2 rounded-lg border border-app-success-500/30 bg-app-success-500/10 px-3 py-2 text-sm text-app-success-200"
           >
             <UIcon name="i-lucide-rocket" class="h-4 w-4 shrink-0 text-app-success-400" />
             <span>{{ t('testing.readyBanner') }}</span>
@@ -504,9 +505,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                  how it ended), so the otherwise-opaque fixer sub-jobs have a surface — the
                  analogue of the polling gate's attempt history. -->
         <section v-if="fixerAttempts.length" data-testid="tester-fixer-attempts" class="space-y-2">
-          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3">
             {{ t('testing.fixerAttempts') }}
-          </h3>
+          </SectionLabel>
           <ol class="space-y-2">
             <li
               v-for="a in fixerAttempts"
@@ -531,20 +532,20 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
               <MarkdownProse
                 v-if="a.summary"
                 :text="a.summary"
-                class="mt-1 max-w-3xl text-[12px] leading-snug text-muted"
+                class="mt-1 max-w-3xl text-xs leading-snug text-muted"
               />
               <div v-if="a.concerns && a.concerns.length" class="mt-1.5">
-                <p class="text-[11px] text-dimmed">
+                <p class="text-2xs text-dimmed">
                   {{ t('testing.fixerTimeline.addressed') }}
                 </p>
                 <ul class="mt-1 space-y-0.5">
                   <li
                     v-for="(c, ci) in a.concerns"
                     :key="`fa${a.attempt}-c${ci}`"
-                    class="flex items-center gap-1.5 text-[12px] text-toned"
+                    class="flex items-center gap-1.5 text-xs text-toned"
                   >
                     <span
-                      class="rounded px-1 text-[10px] uppercase"
+                      class="rounded-sm px-1 text-3xs uppercase"
                       :class="SEVERITY_META[c.severity].chip"
                       >{{ SEVERITY_LABELS[c.severity] }}</span
                     >
@@ -566,12 +567,12 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           class="space-y-2"
         >
           <div class="flex items-center gap-2">
-            <h3 class="text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3">
               {{ t('testing.quality.heading') }}
-            </h3>
+            </SectionLabel>
             <span
               v-if="quality.attempts"
-              class="text-[11px] text-muted"
+              class="text-2xs text-muted"
               :title="t('testing.quality.reruns')"
             >
               {{
@@ -604,30 +605,30 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   class="h-3.5 w-3.5 shrink-0"
                   :class="vd.adequate ? 'text-app-success-400' : 'text-app-warning-300'"
                 />
-                <span class="text-[13px] font-medium text-default">
+                <span class="text-sm font-medium text-default">
                   {{
                     vd.adequate ? t('testing.quality.adequate') : t('testing.quality.inadequate')
                   }}
                 </span>
-                <span v-if="vd.model" class="ms-auto font-mono text-[10px] text-dimmed">{{
+                <span v-if="vd.model" class="ms-auto font-mono text-3xs text-dimmed">{{
                   vd.model
                 }}</span>
-                <span class="text-[11px] text-dimmed" :class="{ 'ms-auto': !vd.model }">{{
+                <span class="text-2xs text-dimmed" :class="{ 'ms-auto': !vd.model }">{{
                   d(new Date(vd.at), 'short')
                 }}</span>
               </div>
               <MarkdownProse
                 v-if="vd.feedback"
                 :text="vd.feedback"
-                class="mt-1 text-[12px] leading-snug text-muted"
+                class="mt-1 text-xs leading-snug text-muted"
               />
               <div v-if="vd.gaps.length" class="mt-1.5">
-                <p class="text-[11px] text-dimmed">{{ t('testing.quality.gaps') }}</p>
+                <p class="text-2xs text-dimmed">{{ t('testing.quality.gaps') }}</p>
                 <ul class="mt-1 space-y-0.5">
                   <li
                     v-for="(gap, gi) in vd.gaps"
                     :key="`qc${vi}-g${gi}`"
-                    class="flex items-start gap-1.5 text-[12px] text-toned"
+                    class="flex items-start gap-1.5 text-xs text-toned"
                   >
                     <UIcon
                       name="i-lucide-dot"
@@ -647,7 +648,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         >
           <UIcon name="i-lucide-flask-conical" class="h-8 w-8 opacity-40" />
           <p class="text-sm">{{ t('testing.empty.title') }}</p>
-          <p class="max-w-sm text-[11px] text-dimmed">
+          <p class="max-w-sm text-2xs text-dimmed">
             {{ t('testing.empty.hint') }}
           </p>
         </div>
@@ -659,19 +660,21 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           <MarkdownProse
             v-if="report.summary"
             :text="report.summary"
-            class="mb-4 max-w-3xl text-[13px] leading-relaxed text-toned"
+            class="mb-4 max-w-3xl text-sm leading-relaxed text-toned"
           />
 
-          <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-2">
             {{ t('testing.scenariosOutcomes') }}
-          </h3>
+          </SectionLabel>
           <ul class="space-y-2">
             <li
               v-for="g in groups"
               :key="g.key"
               class="overflow-hidden rounded-lg border border-default bg-default/60"
             >
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 class="flex w-full items-center gap-2 px-3 py-2 text-start hover:bg-elevated/40"
                 @click="toggle(g.key)"
               >
@@ -685,7 +688,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   :class="GROUP_STATUS_META[g.status].text"
                 />
                 <span
-                  class="min-w-0 flex-1 truncate text-[13px]"
+                  class="min-w-0 flex-1 truncate text-sm"
                   :class="g.other ? 'text-muted' : 'font-medium text-default'"
                 >
                   {{ g.title }}
@@ -702,14 +705,14 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     )
                   "
                 />
-                <span class="shrink-0 text-[11px] text-dimmed">
+                <span class="shrink-0 text-2xs text-dimmed">
                   {{ t('testing.checkCount', { count: g.outcomes.length }, g.outcomes.length) }}
                   <template v-if="g.concerns.length">
                     ·
                     {{ t('testing.concernCount', { count: g.concerns.length }, g.concerns.length) }}
                   </template>
                 </span>
-              </button>
+              </UButton>
 
               <div v-if="!collapsed.has(g.key)" class="space-y-1 px-3 pb-3 ps-9">
                 <!-- Outcomes -->
@@ -724,15 +727,15 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     :class="STATUS_META[o.status].text"
                   />
                   <div class="min-w-0">
-                    <span class="text-[13px] text-default">{{ o.name }}</span>
+                    <span class="text-sm text-default">{{ o.name }}</span>
                     <MarkdownProse
                       v-if="o.detail"
                       :text="o.detail"
-                      class="max-w-3xl text-[12px] leading-snug text-muted"
+                      class="max-w-3xl text-xs leading-snug text-muted"
                     />
                   </div>
                 </div>
-                <p v-if="!g.outcomes.length" class="py-0.5 text-[12px] italic text-dimmed">
+                <p v-if="!g.outcomes.length" class="py-0.5 text-xs italic text-dimmed">
                   {{ t('testing.noDiscreteCheck') }}
                 </p>
 
@@ -749,9 +752,9 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   />
                   <div class="min-w-0">
                     <div class="flex items-center gap-1.5">
-                      <span class="text-[12px] font-medium text-default">{{ c.title }}</span>
+                      <span class="text-xs font-medium text-default">{{ c.title }}</span>
                       <span
-                        class="rounded px-1 text-[10px] uppercase"
+                        class="rounded-sm px-1 text-3xs uppercase"
                         :class="SEVERITY_META[c.severity].chip"
                       >
                         {{ SEVERITY_LABELS[c.severity] }}
@@ -760,18 +763,20 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     <MarkdownProse
                       v-if="c.detail"
                       :text="c.detail"
-                      class="max-w-3xl text-[12px] leading-snug text-muted"
+                      class="max-w-3xl text-xs leading-snug text-muted"
                     />
                   </div>
                 </div>
 
                 <!-- Screenshots captured for this scenario -->
                 <div v-if="g.screenshots.length" class="mt-2 flex flex-wrap gap-2">
-                  <button
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
                     v-for="(s, si) in g.screenshots"
                     :key="`shot${si}`"
                     data-testid="tester-screenshot"
-                    class="group relative h-20 w-28 shrink-0 overflow-hidden rounded border border-default bg-app-950/60 hover:border-app-600"
+                    class="group relative block h-20 w-28 shrink-0 overflow-hidden rounded-sm border border-default bg-app-950/60 hover:bg-app-950/60 focus-visible:bg-app-950/60 disabled:bg-app-950/60 p-0 hover:border-app-600"
                     :title="s.view"
                     @click="openShot(s.artifactId)"
                   >
@@ -783,7 +788,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     />
                     <span
                       v-else
-                      class="flex h-full w-full items-center justify-center text-[10px] text-app-600"
+                      class="flex h-full w-full items-center justify-center text-3xs text-app-600"
                     >
                       {{
                         blobs.statusFor(s.artifactId) === 'error'
@@ -792,10 +797,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                       }}
                     </span>
                     <span
-                      class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1 py-0.5 text-[9px] text-toned"
+                      class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1 py-0.5 text-3xs text-toned"
                       >{{ s.view }}</span
                     >
-                  </button>
+                  </UButton>
                 </div>
               </div>
             </li>
@@ -803,14 +808,16 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
           <!-- Standalone gallery: any captures not mapped to a scenario above -->
           <section v-if="ungroupedScreenshots.length" class="mt-5">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('testing.screenshots') }}
-            </h3>
+            </SectionLabel>
             <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
-              <button
+              <UButton
+                color="neutral"
+                variant="ghost"
                 v-for="(s, si) in ungroupedScreenshots"
                 :key="`gal${si}`"
-                class="group relative aspect-video overflow-hidden rounded-lg border border-default bg-app-950/60 hover:border-app-600"
+                class="group relative block aspect-video overflow-hidden rounded-lg border border-default bg-app-950/60 hover:bg-app-950/60 focus-visible:bg-app-950/60 disabled:bg-app-950/60 p-0 hover:border-app-600"
                 :title="s.view"
                 @click="openShot(s.artifactId)"
               >
@@ -822,7 +829,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                 />
                 <span
                   v-else
-                  class="flex h-full w-full items-center justify-center text-[11px] text-app-600"
+                  class="flex h-full w-full items-center justify-center text-2xs text-app-600"
                 >
                   {{
                     blobs.statusFor(s.artifactId) === 'error'
@@ -831,10 +838,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   }}
                 </span>
                 <span
-                  class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1.5 py-0.5 text-[10px] text-toned"
+                  class="absolute inset-x-0 bottom-0 truncate bg-app-950/80 px-1.5 py-0.5 text-3xs text-toned"
                   >{{ s.view }}</span
                 >
-              </button>
+              </UButton>
             </div>
           </section>
         </template>
@@ -845,10 +852,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="report">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-2">
             {{ t('testing.verdict.heading') }}
-          </h4>
-          <div class="flex items-center gap-2 text-[13px]">
+          </SectionLabel>
+          <div class="flex items-center gap-2 text-sm">
             <UIcon
               :name="report.greenlight ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
               class="h-4 w-4"
@@ -861,10 +868,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </div>
 
         <div v-if="report">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-2">
             {{ t('testing.outcomes.heading') }}
-          </h4>
-          <dl class="space-y-1 text-[12px]">
+          </SectionLabel>
+          <dl class="space-y-1 text-xs">
             <div class="flex items-center justify-between">
               <dt class="text-muted">{{ t('testing.outcomes.passed') }}</dt>
               <dd class="text-app-success-300">{{ counts.passed }}</dd>
@@ -892,10 +899,10 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
         </div>
 
         <div v-if="report?.environment">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('testing.environment') }}
-          </h4>
-          <p class="text-[12px] capitalize text-toned">{{ report.environment }}</p>
+          </SectionLabel>
+          <p class="text-xs capitalize text-toned">{{ report.environment }}</p>
         </div>
 
         <!-- Shared run metadata + embedded observability (model, run id, timing,
@@ -910,7 +917,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
           :failure-at="instance?.failure?.occurredAt"
         />
 
-        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
+        <p class="mt-auto text-3xs leading-relaxed text-app-600">
           {{ t('testing.footer') }}
         </p>
       </aside>

package/app/components/theme/ThemeImportModal.vue

@@ -66,7 +66,7 @@ async function submit() {
     :description="t('appearance.import.description')"
   >
     <template #body>
-      <form class="space-y-4" data-testid="theme-import-form" @submit.prevent="submit">
+      <UForm class="space-y-4" data-testid="theme-import-form" @submit="submit">
         <UFormField
           :label="t('appearance.import.linkLabel')"
           :error="error ? t(ERROR_KEYS[error]) : undefined"
@@ -109,7 +109,7 @@ async function submit() {
             {{ t('appearance.import.submit') }}
           </UButton>
         </div>
-      </form>
+      </UForm>
     </template>
   </UModal>
 </template>

package/app/components/tutorial/TutorialNudge.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The contextual offer's surface: one walkthrough, offered beside the work that just made it
 // relevant. Deliberately NOT a modal — the whole point is the moment, and a modal would
@@ -75,9 +76,9 @@ function take(tourId: string) {
           class="text-primary mt-0.5 h-4 w-4 shrink-0"
         />
         <div class="min-w-0 flex-1">
-          <p class="text-[11px] tracking-wide text-muted uppercase">
+          <SectionLabel as="p">
             {{ t('tutorial.nudge.label') }}
-          </p>
+          </SectionLabel>
           <p class="mt-0.5 text-sm font-medium text-app-100">{{ t(offered.titleKey) }}</p>
           <p class="mt-0.5 text-xs text-muted">{{ t(offered.descriptionKey) }}</p>
         </div>

package/app/components/tutorial/TutorialOverlay.vue

@@ -20,6 +20,7 @@ import {
   waitBudgetMs,
 } from './TutorialOverlay.logic'
 import type { TutorialAdvanceCause, TutorialDirection } from './TutorialOverlay.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The one shared tour runtime: resolves the running tour from the `tutorialTours` slot,
 // anchors a highlight ring + tooltip to the current step's `data-testid`, and advances
@@ -628,9 +629,9 @@ onUnmounted(() => {
           class="mt-3 rounded-lg border border-muted/70 bg-elevated/40 p-2.5"
           data-testid="tutorial-next-tour"
         >
-          <p class="text-[11px] tracking-wide text-muted uppercase">
+          <SectionLabel as="p">
             {{ t('tutorial.overlay.nextUp') }}
-          </p>
+          </SectionLabel>
           <p class="mt-0.5 text-sm font-medium text-app-100">{{ t(nextTour.titleKey) }}</p>
           <p class="mt-0.5 text-xs text-muted">{{ t(nextTour.descriptionKey) }}</p>
           <UButton

package/app/components/vcs/GitLabConnect.vue

@@ -67,7 +67,7 @@ async function connect() {
       />
     </UFormField>
 
-    <p class="text-[11px] text-dimmed">
+    <p class="text-2xs text-dimmed">
       <ULink :to="tokenUrl" target="_blank" class="text-primary hover:underline">
         {{ t('vcs.connect.gitlab.createToken') }}
       </ULink>