@cat-factory/app 0.308.0 → 0.309.0

package/README.md

@@ -300,6 +300,27 @@ Every colour in the SPA is a token that follows the THEME and the colour MODE. T
 - **Never** a raw Tailwind hue (`bg-slate-900`, `text-amber-300`, `text-pink-300`) nor a fixed numbered alias (`text-primary-400`, `bg-warning-950/40`): the first is welded to one palette and one mode, the second follows the palette but not the mode. `scripts/check-frontend-palette.mjs` (CI) bans both. `red` and `rose` both mean `error`.
 - **Never** a fixed `white` / `black` utility (`bg-white`, `text-black`, `border-white/5`, `bg-white/[0.02]`): invisible or wrong in light mode. Use `border-inverted` (a selection ring), `border-default` / `bg-muted` (faint chrome) or `text-inverted` (text over a filled surface). A line that genuinely needs a fixed value says why with a `fixed-colour-ok:` comment, on that line or the one above it.
 
+### Type through named steps, never a pixel literal
+
+Every font size in the SPA is a NAMED step, so it scales with the theme and lines up with the sizes Nuxt UI gives its own components. Two sources of steps:
+
+- **Tailwind's own** from `text-xs` up (`text-xs`, `text-sm`, `text-base`, ...), each paired with a line height.
+- **The app's two steps below them** (`app/assets/css/type.css`), for the dense surfaces Tailwind's scale bottoms out above: `text-2xs` (0.6875rem, 11px at the default root) for the dense body size that panel rows, node metadata and inline detail are written at, and `text-3xs` (0.625rem, 10px) for the caption tier below it: pill and badge text on a board node, a quoted source excerpt, an axis or legend caption. The section eyebrow is `text-2xs`, not `text-3xs`, and is not written by hand at all (see the last bullet). Neither declares a paired LINE HEIGHT: dense text inherits its rhythm from the surrounding block, and a block that wants a specific rhythm says `leading-*`, which wins over a step's paired value anyway.
+- **Never** a literal size (`text-[11px]`, `text-[0.6875rem]`). A theme document's `fontSize` is applied as a root `font-size` (`utils/theme/css.ts`), so every rem step follows it and a pixel literal does not: raising the font size would grow Nuxt UI's components while the app's own text sat still. A literal is also unnameable, so a `UBadge size="sm"` beside one is sized by a system the label cannot refer to. `scripts/check-frontend-type-scale.mjs` (CI) bans the utility forms (`text-[length:11px]`, `[font-size:11px]`, `[font:…]`), a px declaration in CSS (`font-size: 11px`, the `font:` shorthand) and a px JS style property (`fontSize: '11px'`, `style.fontSize = …`); its header lists exactly what it matches. A line that genuinely needs one says why with a `type-literal-ok:` comment, on that line or the one above.
+- **A section eyebrow is [`common/SectionLabel.vue`](./app/components/common/SectionLabel.vue)**, not a hand-written class list. The label that titles a group inside a panel, window, inspector section or dropdown is one recipe, `text-2xs font-semibold uppercase tracking-wide text-muted`, and the component owns all five: they are not overridable, because a caller wanting a different size or colour wants a different thing. The caller picks the ELEMENT with `as` (`div` by default; `h3` / `h4` for a real heading, `label` with an `:id` for a field; a collapsing section is a `UButton` around `as="span"`) and owns SPACING through the ordinary `class` attribute. An ACCENT-coloured uppercase label (`text-primary`, `text-app-info-400`) is not this component: it is signalling state or category rather than titling a section, so it keeps its own classes. Nor is a pill, a chip, a metadata row that merely shares the uppercase styling (`BlockNode.vue`'s composition line), or a caption inside a control (a switcher trigger's label line, a slider's end labels): the test is whether the text TITLES the block after it. The colour is `text-muted` and not the fainter `text-dimmed` for contrast: at 11px `text-dimmed` is 2.63:1 on a light surface, under WCAG AA, where `text-muted` is 4.76:1. (The SPA's wider use of `text-dimmed` outside this component is a separate problem.)
+
+### Radius through the theme scale
+
+Every `rounded-*` utility in the SPA derives from `--ui-radius`, so a theme document's `radius` reaches all of them. Nuxt UI rebuilds seven of Tailwind's steps on it (`rounded-xs` is half it, `rounded-sm` is it, then 1.5x, 2x, 3x, 4x and 6x), and [`main.css`](./app/assets/css/main.css) binds the two spellings that sat outside that: `--radius`, which the bare `rounded` alias and its side and corner forms resolve through, and `--radius-4xl`. Tailwind declares both `@theme default`, so the app's own `@theme inline` block wins, and `inline` is what makes the utility compile to `var(--ui-radius)` rather than to a value frozen at build time. Neither number moves on the default theme.
+
+That is the whole mechanism, and it is why there is no rule here about WHICH step to pick. Two things still name a number instead of the scale:
+
+- **Never an arbitrary value**: `rounded-[10px]`, `rounded-t-[0.6rem]`, or Tailwind v4's CSS-variable shorthand `rounded-(--x)`. Welded to one number the way a pixel font size is, and unnameable besides, so a `UBadge` beside one is shaped by a system the box cannot refer to. The SPA has none.
+- **In CSS, reach the scale through `var(--ui-radius)`**, on its own or inside a `calc()`: `calc(var(--ui-radius) * 2)` is the `rounded-lg` step, and `calc(var(--ui-radius) - 1px)` is an inner box kept concentric with its parent, which follows the theme just as well. **Never a `--radius-*` theme variable**, even though one works today: Tailwind declares that scale in a `@theme default inline` block and emits a variable only where the COMPILED stylesheet graph references it, so `var(--radius-lg)` is correct until the last other reference is deleted and then silently computes to 0. `--ui-radius` is an ordinary custom property on `:root`, so it is there in a scoped SFC `<style>` block too, where the `--radius-*` scale never is. **Never a raw literal** in px, pt, rem or em, the per-corner longhands (`border-top-left-radius`, the logical `border-start-start-radius`) and the JS `borderRadius` / `'border-radius'` spelling a `:style` binding uses included. The pill spellings (`9999px`, `50%`) and `0` are exempt, and a shorthand is read value by value, so `50% 50% 8px 8px` is still caught on the `8px`.
+- `scripts/check-frontend-radius.mjs` (CI) bans both. It needs no notion of where a class list lives, because `rounded-[` and `rounded-(` are not English words. A line that genuinely needs a fixed radius says why with a `radius-literal-ok:` comment, on that line or the one above.
+
+The default `radius` lives on the `Cat Factory` document in `app/utils/theme/builtins.ts`. It equals `THEME_DEFAULTS.radius` and so writes no CSS, which is the point: changing the number there is the whole edit.
+
 ### Themes and colour mode
 
 A **theme** is a Nuxt UI theme editor document (https://ui.nuxt.com/theme): the sparse `ThemeDoc` the editor edits and shares as a `?doc=` link, decoded by `utils/theme/link.ts` and typed in `utils/theme/doc.ts` (a port of the editor engine's tables). The app speaks THAT format rather than one of its own, so a theme built in the editor imports as-is and a built-in theme is a document a user could have exported. `utils/theme/builtins.ts` ships `Cat Factory` (the default; its `colors` MUST equal `app.config.ts`'s `ui.colors`, which paints the first frame) and the editor's own `Mono` preset, referenced from the preset table rather than copied. The `theme` store persists the pick and the user's imported documents in this browser; `plugins/theme.client.ts` applies the active document at runtime: aliases onto `appConfig.ui.colors` (Nuxt UI's own colours plugin re-emits the ramps), default variants and component overrides onto `appConfig.ui.<component>` merged INTO the layer's own overrides, and tokens / radius / fonts onto one `<style id="app-theme">` whose selectors anchor on the `data-theme` attribute on `<html>` (`utils/theme/css.ts`, which is also the write boundary for untrusted values). The faces the built-in themes name (Geist, Geist Mono) are self-hosted through `@nuxt/fonts` (`fonts.families` in `nuxt.config.ts`, pinned by `builtins.spec.ts`); a font an IMPORTED theme names is applied as a family name only, so it renders when the device or the deployment provides it. A editor link whose document equals one of the editor's presets collapses to `{ preset: 'mono' }`; `utils/theme/presets.ts` is a copy of the editor's preset table so such a link rebuilds (a decode table, not menu entries).

package/app/assets/css/main.css

@@ -6,6 +6,28 @@
 /* The app's own mode-adaptive colour tokens (`app-*`), layered on Nuxt UI's. */
 @import './tokens.css';
 
+/* The app's own type steps below `text-xs` (`text-2xs`, `text-3xs`). */
+@import './type.css';
+
+/* Bind the last two radius steps Nuxt UI leaves alone onto `--ui-radius`, so EVERY `rounded-*`
+ * utility follows a theme document's `radius` (issue #2251).
+ *
+ * Nuxt UI rebuilds seven of Tailwind's steps on `--ui-radius` (`--radius-sm` is it, `--radius-lg`
+ * is twice it, and so on), which is why a hand-written box on a named step already lines up with
+ * the Nuxt UI component beside it. Two spellings sat outside that: the bare `rounded` alias, whose
+ * `--radius` Tailwind declares `@theme default inline reference` and so inlines as a literal
+ * 0.25rem, and `rounded-4xl`, whose `--radius-4xl` keeps Tailwind's own 2rem. Both are `default`,
+ * so declaring them here wins, and `inline` is what lets `rounded` compile to `var(--ui-radius)`
+ * rather than to a value frozen at build time.
+ *
+ * Neither number moves on the default theme: `--ui-radius` is 0.25rem, and 8x it is the 2rem
+ * `--radius-4xl` already held. Declaring them here also EMITS both as ordinary custom properties,
+ * where Tailwind's `reference` kept `--radius` out of the stylesheet entirely. */
+@theme inline {
+  --radius: var(--ui-radius);
+  --radius-4xl: calc(var(--ui-radius) * 8);
+}
+
 /* The two toaster rules below are scoped by the `app-toaster` marker class that
  * `app.config.ts` puts on the toaster's viewport slot, NOT by `[data-slot='viewport']`.
  * That attribute is Nuxt UI's name for the scroll region of ELEVEN components

package/app/assets/css/prose.css

@@ -17,7 +17,7 @@
 .reader-prose.review-mode [data-src-start] {
   position: relative;
   cursor: pointer;
-  border-radius: 0.375rem;
+  border-radius: calc(var(--ui-radius) * 1.5);
   transition: background 0.12s ease;
 }
 .reader-prose.review-mode [data-src-start]:hover {
@@ -34,7 +34,7 @@
   width: 1.1rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  border-radius: var(--ui-radius);
   background: var(--ui-primary);
   color: var(--ui-text-inverted);
   font-size: 0.8rem;
@@ -81,7 +81,7 @@
   font-style: italic;
 }
 .reader-prose code {
-  border-radius: 0.25rem;
+  border-radius: var(--ui-radius);
   background: var(--ui-bg-elevated);
   padding: 0.1rem 0.3rem;
   font-family: var(--font-mono);
@@ -91,7 +91,7 @@
 .reader-prose pre {
   margin: 0.6rem 0;
   overflow: auto;
-  border-radius: 0.5rem;
+  border-radius: calc(var(--ui-radius) * 2);
   background: var(--app-bg-canvas);
   padding: 0.75rem 0.9rem;
 }

package/app/assets/css/type.css

@@ -0,0 +1,24 @@
+/* The app's own type steps below Tailwind's `text-xs` (issue #2248).
+ *
+ * Both are rem, so both scale with a theme document's `fontSize`, which `utils/theme/css.ts` applies
+ * as the root `font-size`:
+ *
+ *   --text-2xs  0.6875rem  (11px at the 16px default)  the dense body size: panel rows, node
+ *                                                      metadata, inline detail, and the section
+ *                                                      eyebrow (`common/SectionLabel.vue`).
+ *   --text-3xs  0.625rem   (10px)                      the caption tier below the eyebrow: pill and
+ *                                                      badge text on a board node, a quoted source
+ *                                                      excerpt, axis and legend captions.
+ *
+ * Neither step declares a line height. Tailwind pairs `--text-<n>` with an optional
+ * `--text-<n>--line-height`, and when one exists the utility sets both properties. Dense text here
+ * inherits its rhythm from the surrounding block; a block that wants a specific rhythm says so with
+ * `leading-*`.
+ *
+ * `scripts/check-frontend-type-scale.mjs` bans font-size literals, so these two and Tailwind's own
+ * steps are the whole scale. */
+
+@theme {
+  --text-2xs: 0.6875rem;
+  --text-3xs: 0.625rem;
+}

package/app/components/assistant/AssistantModal.vue

@@ -22,6 +22,7 @@
 // the retry belongs.
 import type { AssistantActionId, AssistantOutcome } from '~/types/domain'
 import { answerFor, assistantSurface, revealTarget, submitGate } from './AssistantModal.logic'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -254,9 +255,9 @@ function reveal(blockId: string): void {
 
           <!-- What it can do, always visible: the catalog is the affordance. -->
           <div v-if="examples.length" class="space-y-2">
-            <p class="text-xs font-medium uppercase tracking-wide text-dimmed">
+            <SectionLabel as="p">
               {{ t('assistant.examplesTitle') }}
-            </p>
+            </SectionLabel>
             <div class="flex flex-col gap-1">
               <button
                 v-for="entry in examples"

package/app/components/auth/UserMenu.vue

@@ -50,7 +50,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
         <div class="truncate text-xs font-medium text-highlighted">
           {{ auth.user.name || auth.user.login }}
         </div>
-        <div class="truncate text-[10px] text-dimmed">@{{ auth.user.login }}</div>
+        <div class="truncate text-3xs text-dimmed">@{{ auth.user.login }}</div>
       </div>
       <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
     </button>

package/app/components/binaryCandidates/BinaryCandidatesWindow.vue

@@ -202,7 +202,7 @@ const { requestClose } = useUnsavedGuard({
            declared its candidates and one whose block was unreadable need different fixes. -->
       <p
         v-if="noChoiceKey"
-        class="mb-3 rounded border border-app-warning-500/30 bg-app-warning-500/5 px-3 py-2 text-xs text-app-warning-200"
+        class="mb-3 rounded-sm border border-app-warning-500/30 bg-app-warning-500/5 px-3 py-2 text-xs text-app-warning-200"
         data-testid="binary-candidates-no-choice"
       >
         {{ t(noChoiceKey) }}
@@ -211,7 +211,7 @@ const { requestClose } = useUnsavedGuard({
       <!-- An automatic keep is NOT a review, and must never render as one. -->
       <p
         v-if="view.automatic"
-        class="mb-3 rounded border border-app-600/40 bg-elevated/40 px-3 py-2 text-xs text-toned"
+        class="mb-3 rounded-sm border border-app-600/40 bg-elevated/40 px-3 py-2 text-xs text-toned"
         data-testid="binary-candidates-automatic"
       >
         {{ t('binaryCandidates.automatic') }}
@@ -243,7 +243,7 @@ const { requestClose } = useUnsavedGuard({
           <div
             v-for="row in group.rows"
             :key="row.id"
-            class="rounded border p-2 transition"
+            class="rounded-sm border p-2 transition"
             :class="[
               selected.includes(row.id) || row.kept
                 ? 'border-app-info-400/60 bg-app-info-500/5'
@@ -268,7 +268,7 @@ const { requestClose } = useUnsavedGuard({
                  that is no longer selected. -->
             <label
               v-if="view.awaiting"
-              class="mb-1.5 flex cursor-pointer items-center gap-2 text-[11px] text-muted"
+              class="mb-1.5 flex cursor-pointer items-center gap-2 text-2xs text-muted"
               @click.stop
             >
               <input
@@ -297,14 +297,14 @@ const { requestClose } = useUnsavedGuard({
               v-else-if="row.previewUrl"
               :src="row.previewUrl"
               :alt="row.label ?? row.id"
-              class="mb-2 max-h-56 w-full rounded object-contain"
+              class="mb-2 max-h-56 w-full rounded-sm object-contain"
               data-testid="binary-candidate-preview"
             />
             <!-- No preview is ORDINARY (a private asset store issues no link), so it is stated
                  rather than left as an empty frame the reader reads as a failed generation. -->
             <p
               v-else
-              class="mb-2 flex h-24 items-center justify-center rounded bg-elevated/60 px-2 text-center text-[10px] text-muted"
+              class="mb-2 flex h-24 items-center justify-center rounded-sm bg-elevated/60 px-2 text-center text-3xs text-muted"
               data-testid="binary-candidate-no-preview"
             >
               {{ t('binaryCandidates.noPreview') }}
@@ -316,10 +316,10 @@ const { requestClose } = useUnsavedGuard({
                   : t('binaryCandidates.unattributed')
               }}
             </p>
-            <p v-if="row.note" class="mt-1 text-[11px] text-muted">{{ row.note }}</p>
-            <p class="mt-1 break-all text-[10px] text-dimmed">{{ row.location }}</p>
-            <p v-if="row.contentType" class="text-[10px] text-dimmed">{{ row.contentType }}</p>
-            <p v-if="row.kept" class="mt-1 text-[11px] text-app-success-300">
+            <p v-if="row.note" class="mt-1 text-2xs text-muted">{{ row.note }}</p>
+            <p class="mt-1 break-all text-3xs text-dimmed">{{ row.location }}</p>
+            <p v-if="row.contentType" class="text-3xs text-dimmed">{{ row.contentType }}</p>
+            <p v-if="row.kept" class="mt-1 text-2xs text-app-success-300">
               {{
                 row.storeAs
                   ? t('binaryCandidates.keptAs', { id: row.storeAs })
@@ -352,19 +352,19 @@ const { requestClose } = useUnsavedGuard({
         />
         <p
           v-if="missingAliases.length"
-          class="mt-1 text-[11px] text-app-warning-300"
+          class="mt-1 text-2xs text-app-warning-300"
           data-testid="binary-candidates-missing-alias"
         >
           {{ t('binaryCandidates.missingAlias') }}
         </p>
         <p
           v-else-if="duplicateAliases"
-          class="mt-1 text-[11px] text-app-warning-300"
+          class="mt-1 text-2xs text-app-warning-300"
           data-testid="binary-candidates-duplicate-alias"
         >
           {{ t('binaryCandidates.duplicateAlias') }}
         </p>
-        <p v-if="candidates.error" class="mt-1 text-[11px] text-app-error-300">
+        <p v-if="candidates.error" class="mt-1 text-2xs text-app-error-300">
           {{ candidates.error }}
         </p>
         <div class="mt-2 flex justify-end">
@@ -395,7 +395,7 @@ const { requestClose } = useUnsavedGuard({
     >
       <UIcon name="i-lucide-unlink" class="h-8 w-8 opacity-40" />
       <p class="text-sm">{{ t('binaryCandidates.noRun.title') }}</p>
-      <p class="max-w-md text-[11px] text-dimmed">{{ t('binaryCandidates.noRun.hint') }}</p>
+      <p class="max-w-md text-2xs text-dimmed">{{ t('binaryCandidates.noRun.hint') }}</p>
     </div>
     <div
       v-else-if="absence === 'loading'"
@@ -411,7 +411,7 @@ const { requestClose } = useUnsavedGuard({
     >
       <UIcon name="i-lucide-triangle-alert" class="h-8 w-8 text-app-warning-400/70" />
       <p class="text-sm">{{ t('binaryCandidates.loadFailed') }}</p>
-      <p class="max-w-md break-words text-[11px] text-dimmed">{{ candidates.error }}</p>
+      <p class="max-w-md break-words text-2xs text-dimmed">{{ candidates.error }}</p>
       <UButton
         size="xs"
         color="neutral"

package/app/components/binaryOutput/BinaryOutputReport.vue

@@ -17,6 +17,7 @@ import { BINARY_OUTPUT_STATE_KEYS, binaryOutputView } from '~/utils/binaryOutput
 import { binaryCandidateView } from '~/utils/binaryCandidates'
 import CopyButton from '~/components/common/CopyButton.vue'
 import StoredAssetView from '~/components/binaryOutput/StoredAssetView.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Two callers, one renderer — the same split `StepEffortReport` makes: the generic step-detail
 // panel drops it in as a `card` (its own heading + border, among the other detail sections),
@@ -59,20 +60,17 @@ const state = computed(() => {
     "
     data-testid="binary-output-report"
   >
-    <div
-      v-if="variant === 'card'"
-      class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted"
-    >
+    <SectionLabel v-if="variant === 'card'" class="flex items-center gap-1.5">
       <UIcon name="i-lucide-image" class="h-3.5 w-3.5" />
       <span>{{ t('binaryOutput.heading') }}</span>
-    </div>
+    </SectionLabel>
 
     <!-- The CANDIDATE decision, when this step compared before delivering. It sits ABOVE the
          delivery outcome because it happened first, and because "which of four was this" is the
          question the artifacts below cannot answer. An AUTOMATIC keep says so: nobody looked. -->
     <p
       v-if="candidates && candidates.state.candidates.length > 0"
-      class="text-[12px] leading-relaxed text-toned"
+      class="text-xs leading-relaxed text-toned"
       data-testid="binary-output-candidate-decision"
     >
       {{
@@ -92,7 +90,7 @@ const state = computed(() => {
     <!-- What happened, in one sentence, before any list. Four of the five states have no list
          at all, and the fifth still needs its qualifications read alongside it. -->
     <p
-      class="flex items-start gap-2 text-[12px] leading-relaxed"
+      class="flex items-start gap-2 text-xs leading-relaxed"
       :class="state.tone"
       data-testid="binary-output-state"
       :data-state="view.state"
@@ -106,7 +104,7 @@ const state = computed(() => {
          so — it is a real state (a trait-carrying kind dispatched under an overriding kind
          records a declaration against a step that never held one), and rendering a blank
          would read as a missing value rather than an absent comparison. -->
-    <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[11px]">
+    <dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-2xs">
       <dt class="text-dimmed">{{ t('binaryOutput.target') }}</dt>
       <dd
         v-if="view.target"
@@ -158,10 +156,8 @@ const state = computed(() => {
           :label="row.entity ?? row.description"
           class="mb-2 pe-8"
         />
-        <code class="block break-all pe-8 font-mono text-[11px] text-default">{{
-          row.location
-        }}</code>
-        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[10px] text-dimmed">
+        <code class="block break-all pe-8 font-mono text-2xs text-default">{{ row.location }}</code>
+        <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-3xs text-dimmed">
           <span class="font-mono">{{ row.service }}</span>
           <!-- The join the report cannot make on its own, and the question a human opens this
                for: did it go where the step pointed it? -->
@@ -225,7 +221,7 @@ const state = computed(() => {
             {{ t('binaryOutput.missizedBadge') }}
           </UBadge>
         </div>
-        <p v-if="row.description" class="mt-1 text-[11px] leading-relaxed text-muted">
+        <p v-if="row.description" class="mt-1 text-2xs leading-relaxed text-muted">
           {{ row.description }}
         </p>
       </li>
@@ -234,7 +230,7 @@ const state = computed(() => {
     <!-- Every qualification the report counted, each naming its own number. Never folded into
          one "some entries were dropped": the fix for an unknown service id is not the fix for
          a malformed entry, and neither is the fix for a list that stops short of the tail. -->
-    <ul class="space-y-1 text-[11px] text-app-warning-400">
+    <ul class="space-y-1 text-2xs text-app-warning-400">
       <!-- The step's OWN target went missing from the catalog, and an id the AGENT invented,
            are two different failures with two different fixes (re-register it, versus correct
            the declaration). `binaryOutputView` returns them as DISJOINT fields precisely so

package/app/components/binaryOutput/StoredAssetView.vue

@@ -80,7 +80,7 @@ const filename = computed(() => {
       v-if="isImage && url"
       :src="url"
       :alt="label ?? assetId"
-      class="w-full rounded object-contain"
+      class="w-full rounded-sm object-contain"
       :class="previewClass"
       data-testid="stored-asset-preview"
     />
@@ -89,7 +89,7 @@ const filename = computed(() => {
          frame. -->
     <p
       v-else-if="!isImage && url"
-      class="flex items-center gap-1.5 rounded bg-elevated/60 px-2 py-1.5 text-[11px] text-toned"
+      class="flex items-center gap-1.5 rounded-sm bg-elevated/60 px-2 py-1.5 text-2xs text-toned"
       data-testid="stored-asset-file"
     >
       <UIcon name="i-lucide-file" class="h-3.5 w-3.5 shrink-0" />
@@ -97,7 +97,7 @@ const filename = computed(() => {
     </p>
     <p
       v-else-if="status === 'error'"
-      class="flex items-center gap-1.5 text-[11px] text-app-warning-300"
+      class="flex items-center gap-1.5 text-2xs text-app-warning-300"
       data-testid="stored-asset-error"
     >
       <span>{{ t('binaryOutput.asset.loadFailed') }}</span>
@@ -105,13 +105,13 @@ const filename = computed(() => {
         {{ t('binaryOutput.asset.retry') }}
       </UButton>
     </p>
-    <p v-else class="text-[11px] text-dimmed" data-testid="stored-asset-loading">
+    <p v-else class="text-2xs text-dimmed" data-testid="stored-asset-loading">
       {{ t('binaryOutput.asset.loading') }}
     </p>
 
     <!-- The two things a person does with a delivered asset. Both hang off the object URL, so
          they appear only once the bytes are in hand. -->
-    <div v-if="url" class="flex items-center gap-3 text-[11px]">
+    <div v-if="url" class="flex items-center gap-3 text-2xs">
       <a
         :href="url"
         target="_blank"

package/app/components/board/AddTaskModal.vue

@@ -46,6 +46,7 @@ import {
 import { descriptorFieldDefaults } from '@cat-factory/contracts'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import { buildTaskTypePickerRows } from '~/utils/taskTypePicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const ui = useUiStore()
 // Interface tier. In BASIC mode this form asks for the task itself (type, title,
@@ -938,13 +939,14 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
               data-testid="task-type-row"
               :data-task-type-row="row.id"
             >
-              <p
+              <SectionLabel
                 v-if="row.caption"
-                class="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed"
+                as="p"
+                class="mb-1 px-1"
                 data-testid="task-type-category"
               >
                 {{ row.caption }}
-              </p>
+              </SectionLabel>
               <div class="flex flex-wrap gap-1">
                 <UButton
                   v-for="ty in row.choices"
@@ -981,7 +983,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
         </UFormField>
 
         <!-- Recurring tasks are configured as a schedule on the service frame. -->
-        <div v-if="isRecurring" class="rounded-lg border border-default p-3 text-[11px] text-muted">
+        <div v-if="isRecurring" class="rounded-lg border border-default p-3 text-2xs text-muted">
           <template v-if="recurringFrameId">
             {{ t('board.addTask.recurringWithFrame') }}
           </template>
@@ -1023,7 +1025,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 :ui="{ base: 'cursor-default text-toned' }"
               />
             </UFormField>
-            <p v-if="resolvingIssueBodies" class="text-[11px] text-dimmed">
+            <p v-if="resolvingIssueBodies" class="text-2xs text-dimmed">
               {{ t('board.addTask.loadingIssue') }}
             </p>
 
@@ -1054,7 +1056,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
               <span class="text-sm text-default">{{ t('board.addTask.technical') }}</span>
             </template>
             <template #description>
-              <span class="text-[11px] text-dimmed">
+              <span class="text-2xs text-dimmed">
                 {{ t('board.addTask.technicalHint') }}
               </span>
             </template>
@@ -1106,7 +1108,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 <label
                   v-for="phase in BUG_FISHING_PHASES"
                   :key="phase.id"
-                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-[12px] hover:bg-elevated/40"
+                  class="flex items-start gap-2 rounded-md px-1.5 py-1 text-xs hover:bg-elevated/40"
                 >
                   <input
                     v-model="fishingPhaseIds"
@@ -1117,11 +1119,11 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                   />
                   <span class="min-w-0">
                     <span class="block text-default">{{ phase.title }}</span>
-                    <span class="block text-[11px] text-dimmed">{{ phase.goal }}</span>
+                    <span class="block text-2xs text-dimmed">{{ phase.goal }}</span>
                   </span>
                 </label>
               </div>
-              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-[11px] text-dimmed">
+              <p v-if="fishingPhaseIds.length === 0" class="mt-1.5 text-2xs text-dimmed">
                 {{ t('board.addTask.bugFishingFields.angles.allSelected') }}
               </p>
             </UFormField>
@@ -1385,11 +1387,11 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
           </div>
 
           <div v-if="configDescriptors.length" class="space-y-3">
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+            <SectionLabel as="span">
               {{ t('board.addTask.agentConfiguration') }}
-            </span>
+            </SectionLabel>
             <div v-for="d in configDescriptors" :key="d.id" class="space-y-1">
-              <div class="text-[11px] text-muted">{{ d.label }}</div>
+              <div class="text-2xs text-muted">{{ d.label }}</div>
               <div v-if="d.type === 'select'" class="flex flex-wrap gap-1">
                 <UButton
                   v-for="opt in d.options"
@@ -1411,7 +1413,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
                 :data-testid="`agent-config-${d.id}`"
                 @update:model-value="(v: string | number) => setConfig(d.id, String(v))"
               />
-              <p class="text-[11px] leading-snug text-dimmed">{{ d.description }}</p>
+              <p class="text-2xs leading-snug text-dimmed">{{ d.description }}</p>
             </div>
           </div>
 
@@ -1440,7 +1442,7 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
             :issues-hint="t('board.addTask.noIssuesHint')"
           />
 
-          <p class="text-[11px] text-dimmed">
+          <p class="text-2xs text-dimmed">
             {{ t('board.addTask.plannedHint') }}
           </p>
         </template>

package/app/components/board/AgentFailureCard.vue

@@ -138,7 +138,7 @@ async function retry() {
     data-testid="agent-failure-banner"
     :data-run-kind="run.kind"
   >
-    <div class="flex items-center gap-1.5" :class="compact ? 'text-[11px]' : 'text-xs'">
+    <div class="flex items-center gap-1.5" :class="compact ? 'text-2xs' : 'text-xs'">
       <UIcon
         name="i-lucide-alert-triangle"
         class="shrink-0 text-app-error-400"
@@ -150,7 +150,7 @@ async function retry() {
     <p
       v-if="failure?.message"
       class="mt-1 leading-snug text-app-error-300/90"
-      :class="compact ? 'line-clamp-2 text-[10px]' : 'text-[11px]'"
+      :class="compact ? 'line-clamp-2 text-3xs' : 'text-2xs'"
       :title="failure.message"
     >
       {{ failure.message }}
@@ -159,7 +159,7 @@ async function retry() {
     <p
       v-if="failure?.hint"
       class="mt-1 leading-snug text-app-error-400/70"
-      :class="compact ? 'text-[10px]' : 'text-[11px]'"
+      :class="compact ? 'text-3xs' : 'text-2xs'"
     >
       {{ failure.hint }}
     </p>
@@ -168,7 +168,7 @@ async function retry() {
          name the concrete .env fix rather than only pointing at the (unhelpful-here) tab. -->
     <p
       v-if="showEnvironmentLocalHint && !compact"
-      class="mt-1 text-[11px] leading-snug text-app-error-400/70"
+      class="mt-1 text-2xs leading-snug text-app-error-400/70"
       data-testid="agent-failure-environment-local-hint"
     >
       {{
@@ -192,15 +192,15 @@ async function retry() {
       v-if="!compact && failure"
       :detail="failure.detail"
       :message="failure.message"
-      summary-class="text-[10px] text-app-error-400/60 hover:text-app-error-300"
-      pre-class="bg-app-error-950/60 text-[10px] text-app-error-200/80"
+      summary-class="text-3xs text-app-error-400/60 hover:text-app-error-300"
+      pre-class="bg-app-error-950/60 text-3xs text-app-error-200/80"
     />
 
     <div class="mt-2 flex flex-wrap items-center gap-2">
       <button
         type="button"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/40 text-app-error-200 hover:bg-app-error-900/70 disabled:opacity-60"
-        :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
+        :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         :disabled="retrying || !access.canExecuteRuns.value"
         :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
         data-testid="agent-failure-retry"
@@ -217,7 +217,7 @@ async function retry() {
         v-if="run.kind === 'bootstrap'"
         type="button"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
-        :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
+        :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         data-testid="agent-failure-inspect"
         @click.stop="inspectRun"
       >
@@ -234,7 +234,7 @@ async function retry() {
         v-if="isEnvironmentFailure"
         type="button"
         class="nodrag flex items-center gap-1 rounded-md bg-app-error-900/20 text-app-error-300 hover:bg-app-error-900/50"
-        :class="compact ? 'px-2 py-0.5 text-[10px]' : 'px-2 py-1 text-[11px]'"
+        :class="compact ? 'px-2 py-0.5 text-3xs' : 'px-2 py-1 text-2xs'"
         data-testid="agent-failure-configure-environment"
         @click.stop="openFailureSetup"
       >

package/app/components/board/AgentFailureHistory.vue

@@ -19,7 +19,7 @@ const { t } = useI18n()
     data-testid="agent-failure-history"
   >
     <summary
-      class="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted hover:text-default"
+      class="flex cursor-pointer items-center gap-1.5 text-2xs text-muted hover:text-default"
     >
       <UIcon name="i-lucide-history" class="h-3.5 w-3.5 shrink-0" />
       {{ t('board.failure.history.previousErrors', { count: failures.length }, failures.length) }}

package/app/components/board/CreateInitiativeModal.vue

@@ -216,7 +216,7 @@ async function create() {
                 <span class="block text-sm font-medium text-default">
                   {{ p.presentation.label }}
                 </span>
-                <span class="block text-[11px] text-muted">
+                <span class="block text-2xs text-muted">
                   {{ p.presentation.description }}
                 </span>
               </span>
@@ -264,7 +264,7 @@ async function create() {
           :issues-hint="t('initiative.create.contextIssuesHint')"
         />
 
-        <p class="text-[11px] text-dimmed">
+        <p class="text-2xs text-dimmed">
           {{ t('initiative.create.hint') }}
         </p>
       </div>

package/app/components/board/FailureDetail.vue

@@ -27,7 +27,7 @@ const { t } = useI18n()
     <div class="relative mt-1">
       <CopyButton :text="detail" class="absolute end-1 top-1 z-10" />
       <pre
-        class="max-h-32 overflow-auto whitespace-pre-wrap rounded p-1.5 pe-9"
+        class="max-h-32 overflow-auto whitespace-pre-wrap rounded-sm p-1.5 pe-9"
         :class="preClass"
         >{{ detail }}</pre>
     </div>