@cat-factory/app 0.308.0 → 0.310.0

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,26 +28,32 @@ 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
-        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"
+      <UButton
+        color="neutral"
+        variant="link"
+        class="group min-w-0 flex-1 p-0"
         :aria-expanded="open"
         data-testid="inspector-section-toggle"
         @click="open = !open"
       >
-        <UIcon
-          :name="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-          class="h-3.5 w-3.5 shrink-0 text-dimmed"
-        />
-        <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" />
-        <span class="truncate">{{ title }}</span>
-        <span v-if="count" class="font-normal normal-case text-dimmed">({{ count }})</span>
-        <UIcon
-          v-if="warning"
-          name="i-lucide-triangle-alert"
-          class="h-3.5 w-3.5 shrink-0 text-app-warning-400"
-        />
-      </button>
+        <SectionLabel
+          as="span"
+          class="flex min-w-0 flex-1 items-center gap-1.5 group-hover:text-default"
+        >
+          <UIcon
+            :name="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            class="h-3.5 w-3.5 shrink-0 text-dimmed"
+          />
+          <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" />
+          <span class="truncate">{{ title }}</span>
+          <span v-if="count" class="font-normal normal-case text-dimmed">({{ count }})</span>
+          <UIcon
+            v-if="warning"
+            name="i-lucide-triangle-alert"
+            class="h-3.5 w-3.5 shrink-0 text-app-warning-400"
+          />
+        </SectionLabel>
+      </UButton>
       <!-- 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 +61,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

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { Block, ServiceConnection } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Service-frame (`type: 'service'`) connections: the other services this one USES
 // (consumer→provider edges, stored on this frame — the consumer end). Each row picks a
@@ -124,23 +125,23 @@ const usedBy = computed(() =>
             (e: KeyboardEvent) => setDescription(i, (e.target as HTMLInputElement).value)
           "
         />
-        <UButton
+        <IconButton
           size="xs"
           variant="ghost"
           color="neutral"
           icon="i-lucide-x"
-          :title="t('inspector.serviceConnections.remove')"
+          :label="t('inspector.serviceConnections.remove')"
           data-testid="service-connection-remove"
           @click="removeConnection(i)"
         />
       </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">

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

@@ -188,17 +188,17 @@ async function stop(mode: EnvironmentTestMode) {
   <div class="mt-3 space-y-3 border-t border-default pt-3" data-testid="env-test-section">
     <!-- The precondition both self-tests share, stated once at the top: with no provision type
          there is no environment to stand up and therefore nothing for an agent to drive either. -->
-    <p v-if="!canTest" class="text-[11px] text-dimmed">
+    <p v-if="!canTest" class="text-2xs text-dimmed">
       {{ t('inspector.testConfig.envTest.infraless') }}
     </p>
 
     <!-- 1. The provisioning self-test: the whole lifecycle against a throwaway branch. -->
     <div class="flex items-center justify-between gap-2">
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-toned">
+        <p class="text-2xs font-medium text-toned">
           {{ t('inspector.testConfig.envTest.title') }}
         </p>
-        <p class="text-[11px] text-muted">{{ t('inspector.testConfig.envTest.hint') }}</p>
+        <p class="text-2xs text-muted">{{ t('inspector.testConfig.envTest.hint') }}</p>
       </div>
       <UButton
         v-if="!isRunning('provision')"
@@ -228,7 +228,7 @@ async function stop(mode: EnvironmentTestMode) {
 
     <p
       v-if="provisionRun"
-      class="text-[11px]"
+      class="text-2xs"
       :class="{
         'text-app-info-300/80': provisionRun.status === 'running',
         'text-app-success-300/80': provisionRun.status === 'succeeded',
@@ -253,11 +253,7 @@ async function stop(mode: EnvironmentTestMode) {
       </template>
     </p>
 
-    <div
-      v-if="errors.provision"
-      class="text-[11px] text-app-error-400"
-      data-testid="env-test-error"
-    >
+    <div v-if="errors.provision" class="text-2xs text-app-error-400" data-testid="env-test-error">
       <p>{{ errors.provision.text }}</p>
       <!-- Only the not-provisionable handler case is one-click fixable: jump to Infrastructure →
            Test environments, where the workspace's per-type environment handler is registered. -->
@@ -279,10 +275,10 @@ async function stop(mode: EnvironmentTestMode) {
          and could not do with the environment it was handed. -->
     <div class="flex items-center justify-between gap-2 border-t border-default pt-3">
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-toned">
+        <p class="text-2xs font-medium text-toned">
           {{ t('inspector.testConfig.envProbe.title') }}
         </p>
-        <p class="text-[11px] text-muted">
+        <p class="text-2xs text-muted">
           {{ t('inspector.testConfig.envProbe.hint') }}
           {{
             probeSurface === 'ui'
@@ -319,7 +315,7 @@ async function stop(mode: EnvironmentTestMode) {
 
     <p
       v-if="probeRun"
-      class="text-[11px]"
+      class="text-2xs"
       :class="{
         'text-app-info-300/80': probeRun.status === 'running',
         'text-app-success-300/80': probeRun.status === 'succeeded',
@@ -355,7 +351,7 @@ async function stop(mode: EnvironmentTestMode) {
 
     <div
       v-if="errors['agent-probe']"
-      class="text-[11px] text-app-error-400"
+      class="text-2xs text-app-error-400"
       data-testid="env-probe-error"
     >
       <p>{{ errors['agent-probe']!.text }}</p>

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

@@ -19,6 +19,7 @@ import type {
 import RepoTreeBrowser from '~/components/github/RepoTreeBrowser.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import ServiceSelfTests from '~/components/panels/inspector/ServiceSelfTests.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 
 // Service-level (frame) configuration: the service-owned PROVISIONING — the provision
@@ -429,7 +430,7 @@ function setSize(value: InstanceSize) {
     :default-open="props.defaultOpen"
   >
     <div class="space-y-1">
-      <span class="text-[11px] text-muted">{{ t('inspector.testConfig.provisionType') }}</span>
+      <span class="text-2xs text-muted">{{ t('inspector.testConfig.provisionType') }}</span>
       <div class="flex flex-wrap gap-1">
         <UButton
           v-for="p in PROVISION_TYPES"
@@ -442,7 +443,7 @@ function setSize(value: InstanceSize) {
           {{ p.label }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">
+      <p class="text-2xs leading-snug text-dimmed">
         {{ t('inspector.testConfig.provisionTypeHint') }}
       </p>
     </div>
@@ -452,14 +453,14 @@ function setSize(value: InstanceSize) {
          provisions the compose stack, rather than editing the raw path inline. -->
     <div
       v-if="provisionType === 'docker-compose'"
-      class="flex items-center justify-between gap-2 rounded border border-primary/40 bg-primary/10 p-2"
+      class="flex items-center justify-between gap-2 rounded-sm border border-primary/40 bg-primary/10 p-2"
       data-testid="env-setup-nudge"
     >
       <div class="min-w-0">
-        <p class="text-[11px] font-medium text-primary/90">
+        <p class="text-2xs font-medium text-primary/90">
           {{ t('inspector.testConfig.envWizard.title') }}
         </p>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.envWizard.hint') }}
         </p>
       </div>
@@ -477,9 +478,9 @@ function setSize(value: InstanceSize) {
 
     <!-- Auto-detect a recommended provisioning config from the repo (slice 11). Non-binding:
          it prefills the form below + the kube edit refs; the user confirms/edits everything. -->
-    <div v-if="repoContext" class="space-y-2 rounded border border-default bg-default/40 p-2">
+    <div v-if="repoContext" class="space-y-2 rounded-sm border border-default bg-default/40 p-2">
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.detect.title') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.detect.title') }}</span>
         <UButton
           size="xs"
           variant="soft"
@@ -491,23 +492,23 @@ function setSize(value: InstanceSize) {
           {{ t('inspector.testConfig.detect.button') }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">
+      <p class="text-2xs leading-snug text-dimmed">
         {{ t('inspector.testConfig.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 && detectResult.provisioning.type !== 'custom'"
-          class="text-[11px] text-app-warning-300/80"
+          class="text-2xs text-app-warning-300/80"
         >
           {{ t('inspector.testConfig.detect.none') }}
         </p>
         <template v-else>
-          <p class="text-[11px] text-app-success-300/80">
+          <p class="text-2xs text-app-success-300/80">
             {{
               t('inspector.testConfig.detect.applied', {
                 type: provisionTypeLabel(detectResult.provisioning.type),
@@ -516,7 +517,7 @@ function setSize(value: InstanceSize) {
           </p>
 
           <div v-if="detectResult.serviceDirCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.serviceDirTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -534,7 +535,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.manifestRootCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.manifestRootTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -552,7 +553,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.overlayCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.overlayTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -570,7 +571,7 @@ function setSize(value: InstanceSize) {
           </div>
 
           <div v-if="detectResult.composeServiceCandidates?.length" class="space-y-1">
-            <span class="text-[11px] text-muted">{{
+            <span class="text-2xs text-muted">{{
               t('inspector.testConfig.detect.composeServiceTitle')
             }}</span>
             <div class="flex flex-wrap gap-1">
@@ -587,12 +588,12 @@ function setSize(value: InstanceSize) {
             </div>
           </div>
 
-          <p v-if="detectResult.urlSource" class="text-[11px] text-dimmed">
+          <p v-if="detectResult.urlSource" class="text-2xs text-dimmed">
             {{
               t('inspector.testConfig.detect.urlSource', { source: detectResult.urlSource.source })
             }}
           </p>
-          <p v-if="detectResult.namespace" class="text-[11px] text-dimmed">
+          <p v-if="detectResult.namespace" class="text-2xs text-dimmed">
             {{ t('inspector.testConfig.detect.namespace', { namespace: detectResult.namespace }) }}
           </p>
 
@@ -600,7 +601,7 @@ function setSize(value: InstanceSize) {
             <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="
@@ -622,7 +623,7 @@ function setSize(value: InstanceSize) {
 
     <div v-if="provisionType === 'docker-compose'" class="space-y-2">
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.composePath') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.composePath') }}</label>
         <div class="flex items-center gap-1">
           <UInput
             :model-value="composePath"
@@ -634,17 +635,17 @@ function setSize(value: InstanceSize) {
               (e: KeyboardEvent) => setComposePath((e.target as HTMLInputElement).value)
             "
           />
-          <UButton
+          <IconButton
             v-if="repoContext"
             size="xs"
             variant="soft"
             color="neutral"
             icon="i-lucide-folder-search"
-            :title="t('inspector.testConfig.browseRepo')"
+            :label="t('inspector.testConfig.browseRepo')"
             @click="openBrowse('compose')"
           />
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.composeHint') }}
         </p>
       </div>
@@ -660,9 +661,7 @@ function setSize(value: InstanceSize) {
          connection (the "how") is configured per-type in the Infrastructure window. -->
     <div v-if="provisionType === 'kubernetes'" class="space-y-2">
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{
-          t('inspector.testConfig.manifestSourceLabel')
-        }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.manifestSourceLabel') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             :color="kubeSourceType === 'colocated' ? 'primary' : 'neutral'"
@@ -684,7 +683,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div v-if="kubeSourceType === 'separate'" class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestRepo') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.manifestRepo') }}</label>
         <UInput
           :model-value="kubeRepo"
           size="xs"
@@ -695,7 +694,7 @@ function setSize(value: InstanceSize) {
         />
       </div>
       <div v-if="kubeSourceType === 'separate'" class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestRef') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.manifestRef') }}</label>
         <UInput
           :model-value="kubeRef"
           size="xs"
@@ -707,7 +706,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.testConfig.manifestPath') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.manifestPath') }}</label>
         <div class="flex items-center gap-1">
           <UInput
             :model-value="kubePath"
@@ -717,23 +716,23 @@ function setSize(value: InstanceSize) {
             @blur="(e: FocusEvent) => setKubePath((e.target as HTMLInputElement).value)"
             @keydown.enter="(e: KeyboardEvent) => setKubePath((e.target as HTMLInputElement).value)"
           />
-          <UButton
+          <IconButton
             v-if="repoContext && kubeSourceType === 'colocated'"
             size="xs"
             variant="soft"
             color="neutral"
             icon="i-lucide-folder-search"
-            :title="t('inspector.testConfig.browseRepo')"
+            :label="t('inspector.testConfig.browseRepo')"
             @click="openBrowse('k8s')"
           />
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.manifestPathHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.rendererLabel') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.rendererLabel') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="r in RENDERERS"
@@ -746,7 +745,7 @@ function setSize(value: InstanceSize) {
             {{ r.label }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.rendererHint') }}
         </p>
       </div>
@@ -756,7 +755,7 @@ function setSize(value: InstanceSize) {
          source), the per-PR recipe lives in the target repository's own preview workflow, so
          declaring the type IS the whole service-side configuration. Say so explicitly rather
          than rendering an empty panel that reads like something failed to load. -->
-    <p v-if="provisionType === 'cloudflare'" class="text-[11px] text-dimmed">
+    <p v-if="provisionType === 'cloudflare'" class="text-2xs text-dimmed">
       {{ t('inspector.testConfig.cloudflareHint') }}
     </p>
 
@@ -764,9 +763,7 @@ function setSize(value: InstanceSize) {
          handler the workspace configures). -->
     <div v-if="provisionType === 'custom'" class="space-y-2">
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
-          t('inspector.testConfig.customManifestId')
-        }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.testConfig.customManifestId') }}</label>
         <USelect
           v-if="customTypeItems.length"
           :model-value="customManifestId"
@@ -776,15 +773,15 @@ function setSize(value: InstanceSize) {
           :placeholder="t('inspector.testConfig.customManifestIdPlaceholder')"
           @update:model-value="(v: string) => setCustomManifestId(v)"
         />
-        <p v-else class="text-[11px] leading-snug text-app-warning-300/80">
+        <p v-else class="text-2xs leading-snug text-app-warning-300/80">
           {{ t('inspector.testConfig.customNoTypes') }}
         </p>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.customManifestIdHint') }}
         </p>
       </div>
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('inspector.testConfig.customManifestPath')
         }}</label>
         <UInput
@@ -796,7 +793,7 @@ function setSize(value: InstanceSize) {
             (e: KeyboardEvent) => setCustomManifestPath((e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.customManifestPathHint') }}
         </p>
       </div>
@@ -805,10 +802,10 @@ function setSize(value: InstanceSize) {
            shown when the selected type declares a fixer prompt. -->
       <div
         v-if="manifestFixerAvailable && repoContext"
-        class="space-y-1.5 rounded border border-default bg-default/40 p-2"
+        class="space-y-1.5 rounded-sm border border-default bg-default/40 p-2"
       >
         <div class="flex items-center justify-between gap-2">
-          <span class="text-[11px] text-muted">{{
+          <span class="text-2xs text-muted">{{
             t('inspector.testConfig.generateManifest.title')
           }}</span>
           <UButton
@@ -823,15 +820,15 @@ function setSize(value: InstanceSize) {
             {{ t('inspector.testConfig.generateManifest.button') }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.testConfig.generateManifest.hint') }}
         </p>
-        <p v-if="manifestRepairError" class="text-[11px] text-app-error-300/80">
+        <p v-if="manifestRepairError" class="text-2xs text-app-error-300/80">
           {{ t('inspector.testConfig.generateManifest.error') }}
         </p>
         <p
           v-else-if="manifestRepairJob"
-          class="text-[11px]"
+          class="text-2xs"
           :class="{
             'text-app-info-300/80': manifestRepairJob.status === 'running',
             'text-app-success-300/80': manifestRepairJob.status === 'succeeded',
@@ -840,7 +837,7 @@ function setSize(value: InstanceSize) {
         >
           {{ t(`inspector.testConfig.generateManifest.status.${manifestRepairJob.status}`) }}
         </p>
-        <p v-else-if="manifestRepairJobId" class="text-[11px] text-app-info-300/80">
+        <p v-else-if="manifestRepairJobId" class="text-2xs text-app-info-300/80">
           {{ t('inspector.testConfig.generateManifest.dispatched') }}
         </p>
       </div>
@@ -896,7 +893,7 @@ function setSize(value: InstanceSize) {
       :hint="t('inspector.testConfig.provisioningHint')"
     >
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.cloudProvider') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.cloudProvider') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="p in PROVIDERS"
@@ -912,7 +909,7 @@ function setSize(value: InstanceSize) {
       </div>
 
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.testConfig.instanceSize') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.testConfig.instanceSize') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="s in SIZES"

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

@@ -165,13 +165,13 @@ async function clearAll() {
 
     <!-- These are REAL secrets: an unmistakable sensitivity + replace-all warning. -->
     <div
-      class="flex items-start gap-2 rounded-md border border-app-warning-500/40 bg-app-warning-500/10 px-2.5 py-2 text-[11px] leading-snug text-app-warning-200"
+      class="flex items-start gap-2 rounded-md border border-app-warning-500/40 bg-app-warning-500/10 px-2.5 py-2 text-2xs leading-snug text-app-warning-200"
     >
       <UIcon name="i-lucide-shield-alert" class="mt-0.5 h-4 w-4 shrink-0 text-app-warning-400" />
       <span>{{ t('inspector.testSecrets.warning') }}</span>
     </div>
 
-    <p class="text-[11px] leading-snug text-dimmed">
+    <p class="text-2xs leading-snug text-dimmed">
       {{ t('inspector.testSecrets.replaceNote') }}
     </p>
 
@@ -234,7 +234,7 @@ async function clearAll() {
         </UFormField>
       </div>
 
-      <p v-if="duplicateKeys.size" class="text-[11px] text-app-error-400">
+      <p v-if="duplicateKeys.size" class="text-2xs text-app-error-400">
         {{ t('inspector.testSecrets.duplicateKey') }}
       </p>
 

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

@@ -89,7 +89,7 @@ function revert() {
   >
     <!-- This text reaches the model in the prompt, so it must never hold a real secret. -->
     <div
-      class="flex items-start gap-2 rounded-md border border-muted bg-elevated/40 px-2.5 py-2 text-[11px] leading-snug text-toned"
+      class="flex items-start gap-2 rounded-md border border-muted bg-elevated/40 px-2.5 py-2 text-2xs leading-snug text-toned"
     >
       <UIcon name="i-lucide-info" class="mt-0.5 h-4 w-4 shrink-0 text-muted" />
       <span>{{ t('inspector.testingContext.notSecret') }}</span>
@@ -104,7 +104,7 @@ function revert() {
     />
 
     <div class="flex items-center justify-between gap-2">
-      <p class="text-[11px] text-dimmed" :class="{ 'text-app-error-400': tooLong }">
+      <p class="text-2xs text-dimmed" :class="{ 'text-app-error-400': tooLong }">
         {{
           t('inspector.testingContext.length', {
             count: outgoing.length,