@cat-factory/app 0.308.0 → 0.310.0

package/app/components/panels/StepToolServers.vue

@@ -32,6 +32,7 @@ import {
   unattributedObservations,
 } from '~/components/panels/StepToolServers.logic'
 import { agentKindMeta } from '~/utils/catalog'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   toolServers: StepToolServers
@@ -109,17 +110,15 @@ const drops = computed(() =>
     data-testid="step-tool-servers"
     class="scroll-mt-4 rounded-xl border border-default bg-default/50 p-4"
   >
-    <div
-      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-    >
+    <SectionLabel class="mb-2 flex items-center gap-1.5">
       <UIcon name="i-lucide-plug" class="h-3.5 w-3.5" />
       <span>{{ t('panels.stepDetail.toolServers.heading') }}</span>
-    </div>
+    </SectionLabel>
 
     <p
       v-if="dispatchedAs"
       data-testid="step-tool-servers-dispatched-as"
-      class="mb-2 text-[12px] text-muted"
+      class="mb-2 text-xs text-muted"
     >
       {{ t('panels.stepDetail.toolServers.dispatchedAs', { agent: dispatchedAs }) }}
     </p>
@@ -130,7 +129,7 @@ const drops = computed(() =>
         :key="server.id"
         data-testid="step-tool-server-wired"
         :data-observed-fault="server.isFault ? 'true' : undefined"
-        class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[12px]"
+        class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs"
         :class="
           server.isFault
             ? 'border-app-warning-500/30 bg-app-warning-500/10 text-app-warning-200'
@@ -171,7 +170,7 @@ const drops = computed(() =>
         v-for="server in unattributed"
         :key="server.id"
         data-testid="step-tool-server-unattributed"
-        class="flex items-start gap-1.5 text-[12px] text-muted"
+        class="flex items-start gap-1.5 text-xs text-muted"
       >
         <UIcon name="i-lucide-circle-help" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
         <span>{{
@@ -185,7 +184,7 @@ const drops = computed(() =>
         v-for="server in drops"
         :key="server.id"
         data-testid="step-tool-server-unavailable"
-        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-plug-zap"

package/app/components/panels/StepValidationReport.vue

@@ -15,7 +15,7 @@ const failed = computed(() => props.report.outcomes.filter((o) => !o.passed))
 
 <template>
   <div class="space-y-2" data-testid="step-validation-report">
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{
         report.passed
           ? t('panels.stepDetail.validation.passedSummary', {
@@ -43,11 +43,11 @@ const failed = computed(() => props.report.outcomes.filter((o) => !o.passed))
           class="h-3.5 w-3.5 shrink-0"
           :class="outcome.passed ? 'text-app-success-400' : 'text-app-error-400'"
         />
-        <span class="text-[12px] font-medium text-default">{{ outcome.label }}</span>
-        <span class="truncate font-mono text-[11px] text-dimmed">{{ outcome.command }}</span>
+        <span class="text-xs font-medium text-default">{{ outcome.label }}</span>
+        <span class="truncate font-mono text-2xs text-dimmed">{{ outcome.command }}</span>
         <span
           v-if="!outcome.passed"
-          class="ms-auto shrink-0 rounded bg-app-error-500/15 px-1.5 py-0.5 text-[11px] tabular-nums text-app-error-300"
+          class="ms-auto shrink-0 rounded-sm bg-app-error-500/15 px-1.5 py-0.5 text-2xs tabular-nums text-app-error-300"
         >
           {{
             outcome.timedOut
@@ -58,7 +58,7 @@ const failed = computed(() => props.report.outcomes.filter((o) => !o.passed))
       </div>
       <pre
         v-if="outcome.outputTail"
-        class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-app-950 p-2 font-mono text-[11px] text-muted"
+        class="mt-1.5 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-sm bg-app-950 p-2 font-mono text-2xs text-muted"
         data-testid="validation-output"
         >{{ outcome.outputTail }}</pre>
     </div>

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

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

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

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

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

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

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

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

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

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

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

@@ -12,6 +12,7 @@ import type {
 } from '~/types/domain'
 import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 
 // Frontend-frame (`type: 'frontend'`) configuration: how to build, serve, and mock this
@@ -229,11 +230,11 @@ onUnmounted(() => preview.stopPolling(props.block.id))
          persisted until Apply. Only shown when the frame is linked to a repo. -->
     <div
       v-if="repoLink"
-      class="space-y-2 rounded border border-default bg-default/40 p-2"
+      class="space-y-2 rounded-sm border border-default bg-default/40 p-2"
       data-testid="frontend-detect"
     >
       <div class="flex items-center justify-between gap-2">
-        <span class="text-[11px] text-muted">{{ t('inspector.frontendConfig.detect.title') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.frontendConfig.detect.title') }}</span>
         <UButton
           size="xs"
           variant="soft"
@@ -246,16 +247,16 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           {{ t('inspector.frontendConfig.detect.button') }}
         </UButton>
       </div>
-      <p class="text-[11px] leading-snug text-dimmed">
+      <p class="text-2xs leading-snug text-dimmed">
         {{ t('inspector.frontendConfig.detect.hint') }}
       </p>
 
-      <p v-if="detectError" class="text-[11px] text-app-error-300/80">
+      <p v-if="detectError" class="text-2xs text-app-error-300/80">
         {{ detectError }}
       </p>
 
       <template v-if="detectResult && !detecting">
-        <p v-if="!detectResult.detected" class="text-[11px] text-app-warning-300/80">
+        <p v-if="!detectResult.detected" class="text-2xs text-app-warning-300/80">
           {{ t('inspector.frontendConfig.detect.none') }}
         </p>
 
@@ -263,7 +264,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           <li
             v-for="(n, i) in detectResult.notes"
             :key="i"
-            class="flex items-start gap-1.5 text-[11px] leading-snug text-dimmed"
+            class="flex items-start gap-1.5 text-2xs leading-snug text-dimmed"
           >
             <span
               :class="
@@ -310,9 +311,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
     <!-- Build: package manager + frontend directory + install command + build script + output dir -->
     <InspectorSection v-model:open="showBuild" :title="t('inspector.frontendConfig.groups.build')">
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{
-          t('inspector.frontendConfig.packageManager')
-        }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.frontendConfig.packageManager') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             v-for="pm in PACKAGE_MANAGERS"
@@ -328,7 +327,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.frontendConfig.directory') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.directory') }}</label>
         <UInput
           :model-value="config.directory ?? ''"
           size="xs"
@@ -340,13 +339,13 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             (e: KeyboardEvent) => saveText('directory', (e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.directoryHint') }}
         </p>
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('inspector.frontendConfig.installCommand')
         }}</label>
         <UInput
@@ -366,9 +365,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
       <div class="grid grid-cols-2 gap-2">
         <div class="space-y-1">
-          <label class="text-[11px] text-muted">{{
-            t('inspector.frontendConfig.buildScript')
-          }}</label>
+          <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.buildScript') }}</label>
           <UInput
             :model-value="config.buildScript ?? ''"
             size="xs"
@@ -382,9 +379,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           />
         </div>
         <div class="space-y-1">
-          <label class="text-[11px] text-muted">{{
-            t('inspector.frontendConfig.outputDir')
-          }}</label>
+          <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.outputDir') }}</label>
           <UInput
             :model-value="config.outputDir ?? ''"
             size="xs"
@@ -403,7 +398,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
     <!-- Serve: mode (static vs command) + serve script (command mode) + port -->
     <InspectorSection v-model:open="showServe" :title="t('inspector.frontendConfig.groups.serve')">
       <div class="space-y-1">
-        <span class="text-[11px] text-muted">{{ t('inspector.frontendConfig.serveMode') }}</span>
+        <span class="text-2xs text-muted">{{ t('inspector.frontendConfig.serveMode') }}</span>
         <div class="flex flex-wrap gap-1">
           <UButton
             :color="serveMode === 'static' ? 'primary' : 'neutral'"
@@ -423,23 +418,21 @@ onUnmounted(() => preview.stopPolling(props.block.id))
           </UButton>
         </div>
         <!-- Explain each mode, and disambiguate from the separate envInjection axis. -->
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           <span class="text-muted">{{ t('inspector.frontendConfig.serveStatic') }}:</span>
           {{ t('inspector.frontendConfig.serveStaticDesc') }}
         </p>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           <span class="text-muted">{{ t('inspector.frontendConfig.serveCommand') }}:</span>
           {{ t('inspector.frontendConfig.serveCommandDesc') }}
         </p>
-        <p class="text-[11px] leading-snug text-dimmed/80">
+        <p class="text-2xs leading-snug text-dimmed/80">
           {{ t('inspector.frontendConfig.serveEnvAxisNote') }}
         </p>
       </div>
 
       <div v-if="serveMode === 'command'" class="space-y-1">
-        <label class="text-[11px] text-muted">{{
-          t('inspector.frontendConfig.serveScript')
-        }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.serveScript') }}</label>
         <UInput
           :model-value="config.serveScript ?? ''"
           size="xs"
@@ -454,7 +447,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       </div>
 
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{ t('inspector.frontendConfig.servePort') }}</label>
+        <label class="text-2xs text-muted">{{ t('inspector.frontendConfig.servePort') }}</label>
         <UInput
           :model-value="config.servePort != null ? String(config.servePort) : ''"
           type="number"
@@ -475,7 +468,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
       :title="t('inspector.frontendConfig.groups.mocking')"
     >
       <div class="space-y-1">
-        <label class="text-[11px] text-muted">{{
+        <label class="text-2xs text-muted">{{
           t('inspector.frontendConfig.mockMappingsPath')
         }}</label>
         <UInput
@@ -491,7 +484,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             (e: KeyboardEvent) => saveText('mockMappingsPath', (e.target as HTMLInputElement).value)
           "
         />
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.mockMappingsHint') }}
         </p>
       </div>
@@ -521,7 +514,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
             {{ t('inspector.frontendConfig.envRuntime') }}
           </UButton>
         </div>
-        <p class="text-[11px] leading-snug text-dimmed">
+        <p class="text-2xs leading-snug text-dimmed">
           {{ t('inspector.frontendConfig.envInjectionHint') }}
         </p>
       </div>
@@ -564,17 +557,17 @@ onUnmounted(() => preview.stopPolling(props.block.id))
               class="flex-1"
               @update:model-value="(v: string) => setBindingSource(i, v)"
             />
-            <UButton
+            <IconButton
               size="xs"
               variant="ghost"
               color="neutral"
               icon="i-lucide-x"
-              :title="t('inspector.frontendConfig.bindings.remove')"
+              :label="t('inspector.frontendConfig.bindings.remove')"
               @click="removeBinding(i)"
             />
           </div>
         </div>
-        <div v-else class="text-[11px] text-dimmed">
+        <div v-else class="text-2xs text-dimmed">
           {{ t('inspector.frontendConfig.bindings.empty') }}
         </div>
 
@@ -603,7 +596,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
               save({ previewEnabled: v === true ? true : undefined })
           "
         />
-        <p class="mt-1 text-[11px] leading-snug text-dimmed">
+        <p class="mt-1 text-2xs leading-snug text-dimmed">
           {{
             previewSupported
               ? t('inspector.frontendConfig.previewHint')
@@ -615,7 +608,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
         <div v-if="previewActive" class="mt-2 space-y-1.5" data-testid="preview-panel">
           <div class="flex items-center gap-2">
             <span
-              class="text-[11px] font-medium"
+              class="text-2xs font-medium"
               :class="{
                 'text-app-success-400': previewStatus === 'ready',
                 'text-app-warning-400': previewStatus === 'starting',
@@ -671,7 +664,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
           <p
             v-if="previewStatus === 'failed' && previewState?.error"
-            class="text-[11px] leading-snug text-app-error-400"
+            class="text-2xs leading-snug text-app-error-400"
             data-testid="preview-error"
           >
             {{ previewState.error }}
@@ -679,7 +672,7 @@ onUnmounted(() => preview.stopPolling(props.block.id))
 
           <p
             v-if="previewRequestError"
-            class="text-[11px] leading-snug text-app-error-400"
+            class="text-2xs leading-snug text-app-error-400"
             data-testid="preview-request-error"
           >
             {{ previewRequestError }}

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

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