@cat-factory/app 0.308.0 → 0.310.0

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -7,6 +7,7 @@
 // serviceFragmentDefaults store (the backend replaces the whole list on each change).
 import { onMounted, ref } from 'vue'
 import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const fragments = useFragmentsStore()
@@ -59,9 +60,9 @@ function remove(id: string) {
     </p>
 
     <div class="flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="span">
         {{ t('settings.serviceFragmentDefaults.defaultFragments') }}
-      </span>
+      </SectionLabel>
       <UDropdownMenu v-if="menu.length" :items="menu" :ui="{ content: 'max-h-72 overflow-y-auto' }">
         <UButton
           size="xs"
@@ -90,28 +91,30 @@ function remove(id: string) {
         {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
       </UBadge>
     </div>
-    <p v-else class="text-[11px] text-dimmed">
+    <p v-else class="text-2xs text-dimmed">
       {{ t('settings.serviceFragmentDefaults.empty') }}
     </p>
 
-    <div class="flex flex-wrap gap-x-4 gap-y-1 border-t border-default pt-3 text-[11px]">
+    <div class="flex flex-wrap gap-x-4 gap-y-1 border-t border-default pt-3 text-2xs">
       <span class="text-dimmed">
         {{ t('settings.serviceFragmentDefaults.footer.question') }}
       </span>
-      <button
-        type="button"
-        class="font-medium text-primary hover:underline"
+      <UButton
+        color="primary"
+        variant="link"
+        class="p-0 text-2xs font-medium text-primary hover:underline"
         @click="ui.openFragmentLibrary()"
       >
         {{ t('settings.serviceFragmentDefaults.footer.manageBoard') }}
-      </button>
-      <button
-        type="button"
-        class="font-medium text-primary hover:underline"
+      </UButton>
+      <UButton
+        color="primary"
+        variant="link"
+        class="p-0 text-2xs font-medium text-primary hover:underline"
         @click="ui.openAccountSettings('fragments')"
       >
         {{ t('settings.serviceFragmentDefaults.footer.manageAccount') }}
-      </button>
+      </UButton>
     </div>
   </div>
 </template>

package/app/components/settings/SharedStacksPanel.vue

@@ -288,7 +288,7 @@ async function remove(stack: SharedStack) {
                 {{ statusLabel(stack.status) }}
               </UBadge>
             </div>
-            <p class="truncate text-[11px] text-dimmed">{{ stack.cloneUrl }}</p>
+            <p class="truncate text-2xs text-dimmed">{{ stack.cloneUrl }}</p>
             <div v-if="stack.managedNetworks.length" class="flex flex-wrap gap-1">
               <UBadge
                 v-for="net in stack.managedNetworks"
@@ -347,7 +347,7 @@ async function remove(stack: SharedStack) {
             />
           </div>
         </div>
-        <p v-if="stack.lastError" class="text-[11px] text-app-error-400">{{ stack.lastError }}</p>
+        <p v-if="stack.lastError" class="text-2xs text-app-error-400">{{ stack.lastError }}</p>
       </div>
     </section>
 
@@ -407,12 +407,12 @@ async function remove(stack: SharedStack) {
         >
           {{ t('settings.sharedStacks.detect.button') }}
         </UButton>
-        <span class="text-[11px] text-dimmed">{{ t('settings.sharedStacks.detect.hint') }}</span>
+        <span class="text-2xs text-dimmed">{{ t('settings.sharedStacks.detect.hint') }}</span>
       </div>
 
       <p
         v-if="detectedEnvFiles.length"
-        class="text-[11px] text-dimmed"
+        class="text-2xs text-dimmed"
         data-testid="shared-stack-env-files"
       >
         {{ t('settings.sharedStacks.detect.envFiles') }}
@@ -428,7 +428,7 @@ async function remove(stack: SharedStack) {
           <li
             v-for="(label, index) in layerLabels"
             :key="index"
-            class="font-mono text-[11px] text-dimmed"
+            class="font-mono text-2xs text-dimmed"
           >
             {{ label }}
           </li>

package/app/components/settings/TaskSourceCard.vue

@@ -95,7 +95,7 @@ const STATUS_UI: Record<
         <UIcon :name="state.icon" class="h-5 w-5 shrink-0 text-toned" />
         <div class="min-w-0">
           <div class="text-sm font-medium text-default">{{ state.label }}</div>
-          <div class="text-[11px] text-dimmed">{{ subtitle }}</div>
+          <div class="text-2xs text-dimmed">{{ subtitle }}</div>
         </div>
       </div>
       <div class="flex shrink-0 items-center gap-2">
@@ -139,7 +139,7 @@ const STATUS_UI: Record<
       variant="subtle"
       :icon="STATUS_UI[diagnostic.status].icon"
       :description="diagnostic.message + (diagnostic.detail ? ` ${diagnostic.detail}` : '')"
-      :ui="{ description: 'text-[11px]' }"
+      :ui="{ description: 'text-2xs' }"
     />
   </div>
 </template>

package/app/components/settings/TaskTypeSuppressionsPanel.vue

@@ -65,17 +65,17 @@ async function toggle(row: TaskTypeSuppression, offered: boolean) {
       {{ t('settings.taskTypeSuppressions.intro') }}
     </p>
 
-    <p v-if="loading" class="text-[11px] text-dimmed">
+    <p v-if="loading" class="text-2xs text-dimmed">
       {{ t('settings.taskTypeSuppressions.loading') }}
     </p>
-    <p v-else-if="!rows.length" class="text-[11px] text-dimmed">
+    <p v-else-if="!rows.length" class="text-2xs text-dimmed">
       {{ t('settings.taskTypeSuppressions.empty') }}
     </p>
     <ul v-else class="space-y-2" data-testid="task-type-suppressions">
       <li
         v-for="row in rows"
         :key="row.taskType.taskType"
-        class="flex items-start justify-between gap-3 rounded border border-default px-3 py-2"
+        class="flex items-start justify-between gap-3 rounded-sm border border-default px-3 py-2"
         data-testid="task-type-suppression"
         :data-task-type="row.taskType.taskType"
       >
@@ -94,7 +94,7 @@ async function toggle(row: TaskTypeSuppression, offered: boolean) {
               {{ row.taskType.presentation.category }}
             </UBadge>
           </div>
-          <p class="mt-0.5 text-[11px] text-dimmed">
+          <p class="mt-0.5 text-2xs text-dimmed">
             {{ row.taskType.presentation.description }}
           </p>
         </div>

package/app/components/settings/ToolServerChecklist.vue

@@ -128,10 +128,10 @@ async function runProbe(id: string) {
         <UBadge color="neutral" variant="soft" size="sm">
           {{ TRANSPORT_LABELS[server.transport] }}
         </UBadge>
-        <code class="font-mono text-[11px] text-dimmed">{{ server.id }}</code>
+        <code class="font-mono text-2xs text-dimmed">{{ server.id }}</code>
       </div>
 
-      <p class="truncate font-mono text-[11px] text-dimmed" :title="server.target">
+      <p class="truncate font-mono text-2xs text-dimmed" :title="server.target">
         {{ server.target }}
       </p>
       <p v-if="server.guidance" class="text-xs text-muted">{{ server.guidance }}</p>
@@ -139,12 +139,12 @@ async function runProbe(id: string) {
       <!-- Which agents get it. An EMPTY list is a registration attached to nothing: it never reaches
            a dispatch, so the credentials it asks for are keys an operator fills in for no run. Said
            out loud, because no other surface in the platform can see that state. -->
-      <p v-if="server.declaredBy.length" class="text-[11px] text-muted">
+      <p v-if="server.declaredBy.length" class="text-2xs text-muted">
         {{ t('settings.toolServers.declaredBy', { kinds: server.declaredBy.join(', ') }) }}
       </p>
       <p
         v-else
-        class="text-[11px] text-app-warning-400"
+        class="text-2xs text-app-warning-400"
         :data-testid="`tool-server-orphan-${server.id}`"
       >
         {{ t('settings.toolServers.declaredByNone') }}
@@ -153,21 +153,21 @@ async function runProbe(id: string) {
       <!-- Which harnesses could serve it. EMPTY means the declaration can never run anywhere (an
            `http` server narrowed to Codex, whose MCP client is stdio-only): it is never dropped FOR
            A REASON on any run, so no prompt and no log line ever mentions it. -->
-      <p v-if="server.servableHarnesses.length" class="text-[11px] text-muted">
+      <p v-if="server.servableHarnesses.length" class="text-2xs text-muted">
         {{
           t('settings.toolServers.servableHarnesses', {
             harnesses: server.servableHarnesses.join(', '),
           })
         }}
       </p>
-      <p v-else class="text-[11px] text-app-warning-400">
+      <p v-else class="text-2xs text-app-warning-400">
         {{ t('settings.toolServers.servableHarnessesNone') }}
       </p>
 
-      <p v-if="server.allowedTools?.length" class="text-[11px] text-muted">
+      <p v-if="server.allowedTools?.length" class="text-2xs text-muted">
         {{ t('settings.toolServers.allowedTools', { tools: server.allowedTools.join(', ') }) }}
       </p>
-      <p v-if="server.credentials.length" class="text-[11px] text-muted">
+      <p v-if="server.credentials.length" class="text-2xs text-muted">
         {{
           t('settings.toolServers.credentials', {
             keys: server.credentials.map((c) => c.key).join(', '),
@@ -199,25 +199,25 @@ async function runProbe(id: string) {
                   : t('settings.toolServers.oauth.machineGrant')
             }}
           </UBadge>
-          <span v-if="server.oauth.connectedBy" class="text-[11px] text-muted">
+          <span v-if="server.oauth.connectedBy" class="text-2xs text-muted">
             {{ t('settings.toolServers.oauth.connectedBy', { user: server.oauth.connectedBy }) }}
           </span>
         </div>
 
-        <p v-if="server.oauth.scopes?.length" class="text-[11px] text-muted">
+        <p v-if="server.oauth.scopes?.length" class="text-2xs text-muted">
           {{ t('settings.toolServers.oauth.scopes', { scopes: server.oauth.scopes.join(', ') }) }}
         </p>
         <!-- A grant with no refresh token works until its access token expires and then needs
              granting again by hand. Said BEFORE it happens, which is the only time it is useful. -->
         <p
           v-if="server.oauth.connected && server.oauth.refreshable === false"
-          class="text-[11px] text-app-warning-400"
+          class="text-2xs text-app-warning-400"
         >
           {{ t('settings.toolServers.oauth.notRefreshable') }}
         </p>
         <p
           v-if="server.oauth.lastError"
-          class="text-[11px] text-app-error-400"
+          class="text-2xs text-app-error-400"
           :data-testid="`tool-server-oauth-error-${server.id}`"
         >
           {{ t('settings.toolServers.oauth.lastError', { detail: server.oauth.lastError }) }}
@@ -272,7 +272,7 @@ async function runProbe(id: string) {
              verify it from a run, or change the declaration. -->
         <p
           v-else-if="server.notProbeableReason"
-          class="text-[11px] text-dimmed"
+          class="text-2xs text-dimmed"
           :data-testid="`tool-server-unprobeable-${server.id}`"
         >
           {{ NOT_PROBEABLE_LABELS[server.notProbeableReason] }}
@@ -293,12 +293,12 @@ async function runProbe(id: string) {
           >
             {{ STATUS_LABELS[resultFor(server.id)!.status] }}
           </UBadge>
-          <span v-if="resultFor(server.id)!.httpStatus" class="text-[11px] text-muted">
+          <span v-if="resultFor(server.id)!.httpStatus" class="text-2xs text-muted">
             {{ t('settings.toolServers.httpStatus', { status: resultFor(server.id)!.httpStatus }) }}
           </span>
         </div>
 
-        <p v-if="resultFor(server.id)!.status === 'ok'" class="text-[11px] text-toned">
+        <p v-if="resultFor(server.id)!.status === 'ok'" class="text-2xs text-toned">
           {{
             t('settings.toolServers.okDetail', {
               name: resultFor(server.id)!.serverName || server.id,
@@ -310,7 +310,7 @@ async function runProbe(id: string) {
         </p>
         <!-- A count off a truncated read is a FLOOR, not a total, and the difference decides whether
              the allowedTools verdict below means anything. -->
-        <p v-if="resultFor(server.id)!.toolsComplete === false" class="text-[11px] text-dimmed">
+        <p v-if="resultFor(server.id)!.toolsComplete === false" class="text-2xs text-dimmed">
           {{ t('settings.toolServers.toolsIncomplete') }}
         </p>
 
@@ -319,7 +319,7 @@ async function runProbe(id: string) {
              advertising the tool. Withheld entirely when the tool list was a prefix. -->
         <p
           v-if="resultFor(server.id)!.allowedTools?.unmatched?.length"
-          class="text-[11px] text-app-warning-400"
+          class="text-2xs text-app-warning-400"
           :data-testid="`tool-server-unmatched-${server.id}`"
         >
           {{
@@ -330,14 +330,14 @@ async function runProbe(id: string) {
         </p>
         <p
           v-else-if="resultFor(server.id)!.allowedTools?.checked === false"
-          class="text-[11px] text-dimmed"
+          class="text-2xs text-dimmed"
         >
           {{ t('settings.toolServers.allowedToolsUnchecked') }}
         </p>
 
         <p
           v-if="resultFor(server.id)!.unresolvedCredentials?.length"
-          class="text-[11px] text-app-warning-400"
+          class="text-2xs text-app-warning-400"
         >
           {{
             t('settings.toolServers.unresolvedCredentials', {
@@ -347,7 +347,7 @@ async function runProbe(id: string) {
         </p>
         <p
           v-if="resultFor(server.id)!.refusedCredentials?.length"
-          class="text-[11px] text-app-error-400"
+          class="text-2xs text-app-error-400"
         >
           {{
             t('settings.toolServers.refusedCredentials', {
@@ -357,7 +357,7 @@ async function runProbe(id: string) {
         </p>
         <p
           v-if="resultFor(server.id)!.unusableCredentials?.length"
-          class="text-[11px] text-app-error-400"
+          class="text-2xs text-app-error-400"
         >
           {{
             t('settings.toolServers.unusableCredentials', {
@@ -384,7 +384,7 @@ async function runProbe(id: string) {
           </UButton>
           <pre
             v-if="expanded[server.id]"
-            class="overflow-x-auto rounded bg-app-950 p-2 font-mono text-[10px] text-muted"
+            class="overflow-x-auto rounded-sm bg-app-950 p-2 font-mono text-3xs text-muted"
             >{{ resultFor(server.id)!.error }}</pre>
         </template>
       </div>

package/app/components/settings/UsageSettings.vue

@@ -38,17 +38,17 @@ const hasAny = computed(() => usage.rows.length > 0)
 
 <template>
   <div class="space-y-6">
-    <p class="text-[11px] text-muted">
+    <p class="text-2xs text-muted">
       {{ t('settings.usage.body') }}
     </p>
 
-    <p v-if="usage.report" class="text-[11px] text-dimmed">
+    <p v-if="usage.report" class="text-2xs text-dimmed">
       {{ t('settings.usage.period', { date: d(new Date(usage.report.periodStart), 'short') }) }}
     </p>
 
-    <p v-if="usage.loading" class="text-[11px] text-dimmed">{{ t('common.loading') }}</p>
-    <p v-else-if="usage.error" class="text-[11px] text-app-error-400">{{ usage.error }}</p>
-    <p v-else-if="!hasAny" class="text-[11px] text-dimmed">{{ t('settings.usage.empty') }}</p>
+    <p v-if="usage.loading" class="text-2xs text-dimmed">{{ t('common.loading') }}</p>
+    <p v-else-if="usage.error" class="text-2xs text-app-error-400">{{ usage.error }}</p>
+    <p v-else-if="!hasAny" class="text-2xs text-dimmed">{{ t('settings.usage.empty') }}</p>
 
     <template v-else>
       <!-- Subscriptions (flat-rate quota harnesses) -->
@@ -57,7 +57,7 @@ const hasAny = computed(() => usage.rows.length > 0)
           <h3 class="text-sm font-semibold text-default">
             {{ t('settings.usage.subscription') }}
           </h3>
-          <span class="text-[11px] text-muted">
+          <span class="text-2xs text-muted">
             {{
               t('settings.usage.tokens', {
                 input: formatTokens(usage.subscriptionTotal.inputTokens),
@@ -66,21 +66,21 @@ const hasAny = computed(() => usage.rows.length > 0)
             }}
           </span>
         </div>
-        <p class="text-[10px] text-dimmed">{{ t('settings.usage.illustrative') }}</p>
+        <p class="text-3xs text-dimmed">{{ t('settings.usage.illustrative') }}</p>
         <div
           v-for="row in usage.subscription"
           :key="`sub-${row.vendor}-${row.provider}-${row.model}`"
           class="space-y-1"
           :data-testid="'usage-row-subscription'"
         >
-          <div class="flex items-center justify-between gap-2 text-[11px]">
+          <div class="flex items-center justify-between gap-2 text-2xs">
             <span class="min-w-0 truncate font-medium text-toned">{{ row.model }}</span>
-            <span class="shrink-0 rounded bg-accented/60 px-1.5 py-0.5 text-[10px] text-toned">
+            <span class="shrink-0 rounded-sm bg-accented/60 px-1.5 py-0.5 text-3xs text-toned">
               {{ row.vendor ?? row.provider }}
             </span>
           </div>
           <UProgress :model-value="pctOf(row, usage.subscription)" size="xs" color="primary" />
-          <div class="flex justify-between text-[10px] text-dimmed">
+          <div class="flex justify-between text-3xs text-dimmed">
             <span>
               {{
                 t('settings.usage.tokens', {
@@ -101,7 +101,7 @@ const hasAny = computed(() => usage.rows.length > 0)
           <h3 class="text-sm font-semibold text-default">
             {{ t('settings.usage.metered') }}
           </h3>
-          <span class="text-[11px] text-muted">
+          <span class="text-2xs text-muted">
             {{
               t('settings.usage.tokens', {
                 input: formatTokens(usage.meteredTotal.inputTokens),
@@ -117,13 +117,13 @@ const hasAny = computed(() => usage.rows.length > 0)
           class="space-y-1"
           :data-testid="'usage-row-metered'"
         >
-          <div class="flex items-center justify-between gap-2 text-[11px]">
+          <div class="flex items-center justify-between gap-2 text-2xs">
             <span class="min-w-0 truncate font-medium text-toned">
               {{ row.provider }}:{{ row.model }}
             </span>
           </div>
           <UProgress :model-value="pctOf(row, usage.metered)" size="xs" color="neutral" />
-          <div class="flex justify-between text-[10px] text-dimmed">
+          <div class="flex justify-between text-3xs text-dimmed">
             <span>
               {{
                 t('settings.usage.tokens', {

package/app/components/settings/UserSecretsSection.vue

@@ -10,6 +10,7 @@ import type { ProviderConfigField, UserSecretKind } from '~/types/userSecrets'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
 import ConnectionWarnings from '~/components/settings/ConnectionWarnings.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -170,7 +171,7 @@ async function remove() {
         >
           <div>
             <span class="font-medium text-default">{{ status.label }}</span>
-            <div class="text-[11px] text-app-success-400">
+            <div class="text-2xs text-app-success-400">
               {{ t('settings.userSecrets.connectedStored') }}
             </div>
           </div>
@@ -185,11 +186,11 @@ async function remove() {
         </div>
 
         <div v-if="descriptor" class="rounded-lg border border-dashed border-muted p-3 space-y-3">
-          <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+          <SectionLabel as="p">
             {{
               status ? t('settings.userSecrets.replaceToken') : t('settings.userSecrets.addToken')
             }}
-          </p>
+          </SectionLabel>
 
           <UFormField :label="t('settings.userSecrets.labelField')">
             <UInput v-model="labelDraft" :placeholder="descriptor.label" />

package/app/components/settings/WorkspaceMetadataSettings.vue

@@ -17,6 +17,7 @@ import {
 } from '~/modular/workspace-metadata'
 import type { WorkspaceMetadataFieldDefinition } from '~/modular/workspace-metadata'
 import type { AppSlots } from '~/modular/slots'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const { t } = useI18n()
 const slots = useReactiveSlots<AppSlots>()
@@ -93,12 +94,12 @@ function selectItems(field: WorkspaceMetadataFieldDefinition) {
       <h3 class="text-sm font-semibold text-default">
         {{ t('settings.workspaceSettings.metadata.heading') }}
       </h3>
-      <p class="text-[11px] text-muted">
+      <p class="text-2xs text-muted">
         {{ t('settings.workspaceSettings.metadata.body') }}
       </p>
     </section>
 
-    <p v-if="fields.length === 0" class="text-[11px] text-dimmed">
+    <p v-if="fields.length === 0" class="text-2xs text-dimmed">
       {{ t('settings.workspaceSettings.metadata.empty') }}
     </p>
 
@@ -106,9 +107,9 @@ function selectItems(field: WorkspaceMetadataFieldDefinition) {
       <div class="space-y-4">
         <label v-for="field in fields" :key="field.key" class="block">
           <!-- Field labels are deployment DATA, rendered verbatim (see the module docs). -->
-          <span class="mb-1 block text-[10px] uppercase tracking-wide text-dimmed">
+          <SectionLabel as="span" class="mb-1 block">
             {{ field.label }}
-          </span>
+          </SectionLabel>
           <USelect
             v-if="field.type === 'select'"
             v-model="draft[field.key]"
@@ -124,7 +125,7 @@ function selectItems(field: WorkspaceMetadataFieldDefinition) {
             size="sm"
             :data-testid="`workspace-metadata-${field.key}`"
           />
-          <span v-if="field.description" class="mt-1 block text-[11px] text-dimmed">
+          <span v-if="field.description" class="mt-1 block text-2xs text-dimmed">
             {{ field.description }}
           </span>
         </label>