@cat-factory/app 0.308.0 → 0.309.0

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>