@cat-factory/app 0.308.0 → 0.310.0

package/app/components/layout/AccountPlatformAlertSettings.vue

@@ -267,7 +267,7 @@ const hasOverrides = computed(
       <h4 class="text-sm font-semibold text-default">
         {{ t('settings.platformAlerts.title') }}
       </h4>
-      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.description') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.platformAlerts.description') }}</p>
     </div>
 
     <!--
@@ -282,11 +282,11 @@ const hasOverrides = computed(
         :label="t('settings.platformAlerts.muteLabel')"
         data-testid="platform-alerts-mute"
       />
-      <p class="ps-6 text-[11px] text-muted">{{ t('settings.platformAlerts.muteHint') }}</p>
+      <p class="ps-6 text-2xs text-muted">{{ t('settings.platformAlerts.muteHint') }}</p>
     </div>
 
     <div class="space-y-1">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{ t('settings.platformAlerts.windowLabel') }}
       </label>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -298,17 +298,17 @@ const hasOverrides = computed(
           data-testid="platform-alerts-window"
         />
       </div>
-      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.windowHint') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.platformAlerts.windowHint') }}</p>
     </div>
 
     <div class="space-y-2">
-      <label class="text-[11px] font-medium text-toned">
+      <label class="text-2xs font-medium text-toned">
         {{ t('settings.platformAlerts.thresholdsLabel') }}
       </label>
-      <p class="text-[11px] text-muted">{{ t('settings.platformAlerts.inheritHint') }}</p>
+      <p class="text-2xs text-muted">{{ t('settings.platformAlerts.inheritHint') }}</p>
       <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
         <div v-for="th in THRESHOLDS" :key="th.field" class="space-y-1">
-          <label class="block text-[11px] text-toned" :for="`platform-alert-${th.field}`">
+          <label class="block text-2xs text-toned" :for="`platform-alert-${th.field}`">
             {{ thresholdLabels[th.field] }}
           </label>
           <UInput
@@ -320,7 +320,7 @@ const hasOverrides = computed(
             :placeholder="t('settings.platformAlerts.inheritPlaceholder')"
             :data-testid="`platform-alert-${th.field}`"
           />
-          <p class="text-[11px] leading-snug text-dimmed">{{ thresholdHints[th.field] }}</p>
+          <p class="text-2xs leading-snug text-dimmed">{{ thresholdHints[th.field] }}</p>
         </div>
       </div>
     </div>

package/app/components/layout/AccountRiskPolicySettings.vue

@@ -99,9 +99,9 @@ async function create(input: CreateRiskPolicyInput) {
 
 <template>
   <div class="space-y-4 text-sm" data-testid="account-risk-policy-panel">
-    <p class="text-[11px] text-muted">{{ t('layout.accountRiskPolicies.intro') }}</p>
+    <p class="text-2xs text-muted">{{ t('layout.accountRiskPolicies.intro') }}</p>
 
-    <p v-if="!store.loading && policies.length === 0" class="text-[11px] text-dimmed">
+    <p v-if="!store.loading && policies.length === 0" class="text-2xs text-dimmed">
       {{ t('layout.accountRiskPolicies.empty') }}
     </p>
 

package/app/components/layout/AccountRunCredentialSettings.vue

@@ -62,7 +62,7 @@ async function save() {
     <h3 class="text-sm font-semibold text-default">
       {{ t('settings.runCredentialPolicy.heading') }}
     </h3>
-    <p class="text-[11px] text-muted">{{ t('settings.runCredentialPolicy.body') }}</p>
+    <p class="text-2xs text-muted">{{ t('settings.runCredentialPolicy.body') }}</p>
 
     <label class="flex items-center gap-2">
       <USwitch v-model="forbid" size="sm" data-testid="account-forbid-initiator-pat" />
@@ -71,10 +71,10 @@ async function save() {
 
     <!-- What the choice actually costs, stated at the point of choosing rather than discovered
          later: attribution is a real feature, and turning this on is what trades it away. -->
-    <p v-if="forbid" class="text-[11px] text-app-warning-300">
+    <p v-if="forbid" class="text-2xs text-app-warning-300">
       {{ t('settings.runCredentialPolicy.onHint') }}
     </p>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ t('settings.runCredentialPolicy.offHint') }}
     </p>
 

package/app/components/layout/AccountSkillSettings.vue

@@ -12,7 +12,7 @@ const { t } = useI18n()
 <template>
   <div class="space-y-6 text-sm">
     <section>
-      <p class="mb-3 text-[11px] text-muted">
+      <p class="mb-3 text-2xs text-muted">
         {{ t('layout.accountSkills.intro') }}
       </p>
       <SkillLibraryManager :account-id="props.accountId" />

package/app/components/layout/AccountTeamSettings.vue

@@ -8,6 +8,7 @@ import AccountModelPolicySettings from '~/components/layout/AccountModelPolicySe
 import AccountPlatformAlertSettings from '~/components/layout/AccountPlatformAlertSettings.vue'
 import AccountRunCredentialSettings from '~/components/layout/AccountRunCredentialSettings.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 // Team settings for an org account: the member roster (with combinable admin /
 // developer / product roles), pending email invitations, and the per-account
@@ -207,7 +208,7 @@ async function disconnectEmail() {
       <p class="mb-3 text-muted">
         {{ t('layout.accountTeam.org.ctaBody') }}
       </p>
-      <form class="flex gap-2" @submit.prevent="createOrganization">
+      <UForm class="flex gap-2" @submit="createOrganization">
         <UInput
           v-model="newOrgName"
           :placeholder="t('layout.accountTeam.org.namePlaceholder')"
@@ -216,7 +217,7 @@ async function disconnectEmail() {
         <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-plus">
           {{ t('layout.accountTeam.org.create') }}
         </UButton>
-      </form>
+      </UForm>
     </section>
 
     <!-- members -->
@@ -240,20 +241,22 @@ async function disconnectEmail() {
             class="w-44"
             @update:model-value="(r: AccountRole[]) => updateMemberRoles(m.userId, r)"
           />
+          <!-- The roles a member HOLDS, read-only where the select would be: the row's data, not
+               a heading over it, so it keeps its own classes rather than adopting the eyebrow
+               recipe (`common/SectionLabel.vue`). -->
           <span v-else class="text-xs uppercase tracking-wide text-muted">
             {{ m.roles.join(', ') }}
           </span>
           <!-- Offboarding: end every session this member holds, leaving their membership and
                roles alone. Confirmed, because it is not undoable from here (the person simply
                signs in again) and because it is the sort of thing a mis-click should not do. -->
-          <UButton
+          <IconButton
             v-if="isAdmin"
             size="xs"
             color="neutral"
             variant="ghost"
             icon="i-lucide-log-out"
-            :title="t('layout.accountTeam.members.revokeSessions')"
-            :aria-label="t('layout.accountTeam.members.revokeSessions')"
+            :label="t('layout.accountTeam.members.revokeSessions')"
             data-testid="revoke-member-sessions"
             @click="revokeSessions(m.userId, m.name || m.email || m.userId)"
           />
@@ -269,7 +272,7 @@ async function disconnectEmail() {
       <h3 class="mb-2 font-semibold text-highlighted">
         {{ t('layout.accountTeam.invite.title') }}
       </h3>
-      <form class="flex gap-2" @submit.prevent="sendInvite">
+      <UForm class="flex gap-2" @submit="sendInvite">
         <UInput
           v-model="inviteEmail"
           type="email"
@@ -280,7 +283,7 @@ async function disconnectEmail() {
         <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-send">
           {{ t('layout.accountTeam.invite.submit') }}
         </UButton>
-      </form>
+      </UForm>
 
       <ul v-if="accounts.invitations.length" class="mt-3 space-y-1">
         <li
@@ -290,6 +293,7 @@ async function disconnectEmail() {
         >
           <span class="truncate">{{ inv.email }}</span>
           <span class="flex items-center gap-2 text-xs">
+            <!-- The invitation's STATE, which is what this row is about. Not an eyebrow. -->
             <span class="uppercase tracking-wide text-muted">
               {{ invitationStatusLabel(inv.status) }}
             </span>
@@ -328,7 +332,7 @@ async function disconnectEmail() {
             {{ t('layout.accountTeam.email.disconnect') }}
           </UButton>
         </div>
-        <form v-else class="space-y-2" @submit.prevent="connectEmail">
+        <UForm v-else class="space-y-2" @submit="connectEmail">
           <USelect v-model="emailProvider" :items="EMAIL_PROVIDER_ITEMS" class="w-full" />
           <UInput
             v-model="emailFrom"
@@ -344,7 +348,7 @@ async function disconnectEmail() {
           <UButton type="submit" color="primary" :loading="busy">
             {{ t('layout.accountTeam.email.connect') }}
           </UButton>
-        </form>
+        </UForm>
       </template>
     </section>
 

package/app/components/layout/AiProvidersBanner.vue

@@ -85,7 +85,7 @@ const show = computed(() => showSetup.value || showPreset.value)
                 @click="ui.dismissAiPresetMismatch()"
               />
             </div>
-            <p class="mt-1 text-[13px] text-app-warning-200/90">
+            <p class="mt-1 text-sm text-app-warning-200/90">
               {{ t('layout.aiProvidersBanner.preset.body') }}
             </p>
             <div class="mt-3">

package/app/components/layout/AppearanceSwitcher.vue

@@ -86,8 +86,9 @@ const items = computed<DropdownMenuItem[][]>(() => [
 
 <template>
   <UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
-    <button
-      type="button"
+    <UButton
+      color="neutral"
+      variant="ghost"
       data-testid="appearance-switcher"
       :aria-label="t('appearance.switcher')"
       :title="collapsed ? `${t('appearance.switcher')}: ${summary}` : undefined"
@@ -96,13 +97,13 @@ const items = computed<DropdownMenuItem[][]>(() => [
     >
       <UIcon :name="MODE_ICONS[preference]" class="h-4 w-4 shrink-0 text-muted" />
       <div v-if="!collapsed" class="min-w-0 flex-1">
-        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+        <div class="truncate text-2xs uppercase tracking-wide text-muted">
           {{ t('appearance.switcher') }}
         </div>
         <div class="truncate text-xs font-medium text-highlighted">{{ summary }}</div>
       </div>
       <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
-    </button>
+    </UButton>
   </UDropdownMenu>
   <ThemeImportModal v-model:open="importOpen" />
 </template>

package/app/components/layout/BoardSwitcher.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { CloudProvider } from '~/types/domain'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // Account + board switching. Picks the active account (personal / org) and the
 // active board within it, and manages boards (new / rename / delete). The account
@@ -256,8 +257,9 @@ async function submitPrompt() {
       :content="{ align: 'start' }"
       class="w-full"
     >
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         class="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-start transition hover:bg-elevated/60"
         :disabled="busy"
       >
@@ -265,17 +267,18 @@ async function submitPrompt() {
           :name="accounts.activeAccount?.type === 'org' ? 'i-lucide-users' : 'i-lucide-user'"
           class="h-3.5 w-3.5 shrink-0 text-muted"
         />
-        <span class="truncate text-[11px] font-medium uppercase tracking-wide text-muted">
+        <SectionLabel as="span" class="truncate">
           {{ accounts.activeAccount?.name ?? t('layout.boardSwitcher.accountFallback') }}
-        </span>
+        </SectionLabel>
         <UIcon name="i-lucide-chevrons-up-down" class="ms-auto h-3.5 w-3.5 shrink-0 text-app-600" />
-      </button>
+      </UButton>
     </UDropdownMenu>
 
     <!-- board selector -->
     <UDropdownMenu :items="boardItems" :content="{ align: 'start' }" class="w-full">
-      <button
-        type="button"
+      <UButton
+        color="neutral"
+        variant="ghost"
         :title="
           collapsed
             ? (workspace.activeWorkspace?.name ?? t('layout.boardSwitcher.boardFallback'))
@@ -296,13 +299,13 @@ async function submitPrompt() {
           name="i-lucide-chevron-down"
           class="ms-auto h-4 w-4 shrink-0 text-dimmed"
         />
-      </button>
+      </UButton>
     </UDropdownMenu>
 
     <!-- create / rename prompt -->
     <UModal v-model:open="promptOpen" :title="prompt ? promptMeta[prompt].title : ''">
       <template #body>
-        <form class="space-y-3" @submit.prevent="submitPrompt">
+        <UForm class="space-y-3" @submit="submitPrompt">
           <UFormField :label="t('layout.boardSwitcher.prompt.nameLabel')">
             <UInput
               v-model="promptValue"
@@ -340,7 +343,7 @@ async function submitPrompt() {
               {{ prompt ? promptMeta[prompt].cta : '' }}
             </UButton>
           </div>
-        </form>
+        </UForm>
       </template>
     </UModal>
   </div>

package/app/components/layout/BoardToolbar.vue

@@ -151,19 +151,24 @@ const decisionItems = computed(() =>
     />
     <!-- Click the readout to snap back to 100%. Always visible (only the LOD sub-label
          drops on narrow viewports) so the zoom level is never a mystery. -->
-    <button
-      type="button"
-      class="w-16 rounded text-center text-xs tabular-nums text-toned hover:bg-elevated focus-visible:ring-2 focus-visible:ring-app-400/60 sm:w-20"
+    <UButton
+      color="neutral"
+      variant="ghost"
+      class="flex w-16 flex-col items-center gap-0 rounded-sm p-0 text-center text-xs tabular-nums text-toned hover:bg-elevated sm:w-20"
       :title="t('board.toolbar.resetZoom')"
       :aria-label="t('board.toolbar.resetZoom')"
       data-testid="board-zoom-reset"
       @click="resetZoom()"
     >
       {{ zoomPct }}%
-      <span class="hidden text-[9px] uppercase tracking-wide text-dimmed sm:block">{{
+      <!-- The zoom band this readout is currently in, under the percentage: a second VALUE
+           annotating the first, not a heading over what follows, so it is not a
+           `common/SectionLabel.vue`. It stays a step smaller and unweighted so it does not compete
+           with the percentage inside a `w-20` button. -->
+      <span class="hidden text-3xs uppercase tracking-wide text-dimmed sm:block">{{
         lodLabel
       }}</span>
-    </button>
+    </UButton>
     <IconButton
       :label="t('board.toolbar.zoomIn')"
       icon="i-lucide-zoom-in"

package/app/components/layout/CommandBar.vue

@@ -6,6 +6,8 @@
 // from the add-task flow.) Commands are assembled from the live stores so only
 // available actions (connected integrations, etc.) show.
 
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 interface Command {
   id: string
   label: string
@@ -276,13 +278,14 @@ function indexOf(cmd: Command) {
           </p>
 
           <div v-for="group in groups" :key="group.name" class="mb-1">
-            <p class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="p" class="px-2 pb-1 pt-2">
               {{ group.name }}
-            </p>
-            <button
+            </SectionLabel>
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="cmd in group.items"
               :key="cmd.id"
-              type="button"
               :data-testid="`command-${cmd.id}`"
               class="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-start text-sm transition"
               :class="
@@ -295,7 +298,7 @@ function indexOf(cmd: Command) {
             >
               <UIcon :name="cmd.icon" class="h-4 w-4 shrink-0 text-muted" />
               <span class="truncate">{{ cmd.label }}</span>
-            </button>
+            </UButton>
           </div>
         </div>
       </div>

package/app/components/layout/DefaultTestEnvBanner.vue

@@ -74,7 +74,7 @@ function openConfig(event: MouseEvent) {
               @click="ui.dismissDefaultProvision()"
             />
           </div>
-          <p class="mt-1 text-[13px] text-app-info-200/90">
+          <p class="mt-1 text-sm text-app-info-200/90">
             {{ t('layout.defaultTestEnvBanner.body') }}
           </p>
           <div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2">
@@ -90,14 +90,15 @@ function openConfig(event: MouseEvent) {
               {{ t('layout.defaultTestEnvBanner.action') }}
             </UButton>
             <!-- The URL itself, shown so it can be read and copied, not just clicked. -->
-            <a
-              :href="configUrl"
-              class="min-w-0 truncate font-mono text-[11px] text-app-info-300/80 underline decoration-dotted underline-offset-2 hover:text-app-info-200"
+            <ULink
+              raw
+              :to="configUrl"
+              class="min-w-0 truncate font-mono text-2xs text-app-info-300/80 underline decoration-dotted underline-offset-2 hover:text-app-info-200"
               data-testid="default-test-env-url"
               @click="openConfig"
             >
               {{ configUrl }}
-            </a>
+            </ULink>
           </div>
         </div>
       </div>

package/app/components/layout/IntegrationsHub.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { showOverrideField } from '~/utils/uiMode'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 // The Integrations hub: a single modal that lists the OPTIONAL external systems the WORKSPACE
 // can enable or link in — the ones that feed a run its context (source control, documents,
@@ -422,14 +423,15 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
         </p>
 
         <section v-for="group in filteredGroups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2 px-1">
             {{ group.title }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-1.5">
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="item in group.items"
               :key="item.key"
-              type="button"
               class="flex w-full items-center gap-3 rounded-lg border border-default bg-default/50 px-3 py-2.5 text-start transition hover:border-muted hover:bg-default"
               @click="item.onClick()"
             >
@@ -443,7 +445,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
                   <UBadge v-else-if="item.attention" color="warning" variant="subtle" size="sm">
                     {{ item.attentionLabel || t('layout.integrationsHub.status.needsAttention') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-dimmed">{{
+                  <span v-else class="text-2xs text-dimmed">{{
                     t('layout.integrationsHub.status.notConnected')
                   }}</span>
                   <UBadge
@@ -461,13 +463,14 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
                 name="i-lucide-chevron-right"
                 class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
-            </button>
+            </UButton>
           </div>
 
           <!-- De-emphasised workspace-config link (e.g. issue tracker settings). -->
-          <button
+          <UButton
+            color="neutral"
+            variant="ghost"
             v-if="group.footerLink"
-            type="button"
             class="mt-1.5 flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-start text-xs text-muted transition hover:bg-default/60 hover:text-default"
             @click="group.footerLink.onClick()"
           >
@@ -480,7 +483,7 @@ const filteredGroups = computed<IntegrationGroup[]>(() => {
               name="i-lucide-chevron-right"
               class="h-3.5 w-3.5 shrink-0 text-app-600 rtl:-scale-x-100"
             />
-          </button>
+          </UButton>
         </section>
       </div>
     </template>

package/app/components/layout/LanguageSwitcher.vue

@@ -40,8 +40,9 @@ const items = computed<DropdownMenuItem[][]>(() => [
 
 <template>
   <UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
-    <button
-      type="button"
+    <UButton
+      color="neutral"
+      variant="ghost"
       data-testid="language-switcher"
       :aria-label="t('language.switcher')"
       :title="collapsed ? `${t('language.switcher')}: ${current}` : undefined"
@@ -50,12 +51,12 @@ const items = computed<DropdownMenuItem[][]>(() => [
     >
       <UIcon name="i-lucide-languages" class="h-4 w-4 shrink-0 text-muted" />
       <div v-if="!collapsed" class="min-w-0 flex-1">
-        <div class="truncate text-[10px] uppercase tracking-wide text-dimmed">
+        <div class="truncate text-2xs uppercase tracking-wide text-muted">
           {{ t('language.switcher') }}
         </div>
         <div class="truncate text-xs font-medium text-highlighted">{{ current }}</div>
       </div>
       <UIcon v-if="!collapsed" name="i-lucide-chevron-up" class="h-4 w-4 shrink-0 text-dimmed" />
-    </button>
+    </UButton>
   </UDropdownMenu>
 </template>

package/app/components/layout/ModelProvidersHub.vue

@@ -12,6 +12,8 @@
 // `ui.openFromModelProviders(...)`, so opening one closes this hub and gives that panel a
 // "Back to Model providers" control (IntegrationBackTitle). Layout mirrors the Integrations
 // hub row-for-row so the two read as siblings.
+import SectionLabel from '~/components/common/SectionLabel.vue'
+
 const { t } = useI18n()
 const ui = useUiStore()
 const apiKeys = useApiKeysStore()
@@ -200,14 +202,15 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
         </p>
 
         <section v-for="group in filteredGroups" :key="group.title">
-          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="h3" class="mb-2 px-1">
             {{ group.title }}
-          </h3>
+          </SectionLabel>
           <div class="space-y-1.5">
-            <button
+            <UButton
+              color="neutral"
+              variant="ghost"
               v-for="item in group.items"
               :key="item.key"
-              type="button"
               class="flex w-full items-center gap-3 rounded-lg border border-default bg-default/50 px-3 py-2.5 text-start transition hover:border-muted hover:bg-default"
               :data-testid="`model-provider-${item.key}`"
               @click="item.onClick()"
@@ -219,7 +222,7 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
                   <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
                     {{ item.status || t('layout.modelProvidersHub.status.connected') }}
                   </UBadge>
-                  <span v-else class="text-[11px] text-dimmed">{{
+                  <span v-else class="text-2xs text-dimmed">{{
                     t('layout.modelProvidersHub.status.notConnected')
                   }}</span>
                   <UBadge
@@ -237,9 +240,9 @@ const filteredGroups = computed<ProviderGroup[]>(() => {
                 name="i-lucide-chevron-right"
                 class="h-4 w-4 shrink-0 text-dimmed rtl:-scale-x-100"
               />
-            </button>
+            </UButton>
           </div>
-          <p v-if="group.note" class="mt-1.5 px-1 text-[11px] text-dimmed">{{ group.note }}</p>
+          <p v-if="group.note" class="mt-1.5 px-1 text-2xs text-dimmed">{{ group.note }}</p>
         </section>
       </div>
     </template>