@cat-factory/app 0.47.0 → 0.47.2

package/app/components/providers/AiPresetMismatchDialog.vue

@@ -8,6 +8,7 @@
 // fixed (or all its models become available).
 import { computed } from 'vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const models = useModelsStore()
 const modelPresets = useModelPresetsStore()
@@ -18,7 +19,9 @@ const open = computed({
   set: (v: boolean) => (v ? ui.openAiPresetMismatch() : ui.closeAiPresetMismatch()),
 })
 
-const presetName = computed(() => modelPresets.defaultPreset?.name ?? 'default preset')
+const presetName = computed(
+  () => modelPresets.defaultPreset?.name ?? t('providers.presetMismatch.defaultPresetName'),
+)
 
 /** Readable labels for the unavailable model ids (catalog label, else the raw id). */
 const unavailableLabels = computed(() =>
@@ -32,19 +35,27 @@ function go(action: () => void) {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Preset uses unavailable models" :ui="{ content: 'max-w-xl' }">
+  <UModal
+    v-model:open="open"
+    :title="t('providers.presetMismatch.title')"
+    :ui="{ content: 'max-w-xl' }"
+  >
     <template #body>
       <div class="space-y-5">
-        <p class="text-sm text-slate-300">
-          The workspace default model preset
-          <span class="font-medium text-slate-100">“{{ presetName }}”</span>
-          assigns models that aren't available under the current configuration. Tasks that use this
-          preset would fail when they reach those steps.
-        </p>
+        <i18n-t
+          keypath="providers.presetMismatch.intro"
+          tag="p"
+          class="text-sm text-slate-300"
+          scope="global"
+        >
+          <template #name>
+            <span class="font-medium text-slate-100">{{ presetName }}</span>
+          </template>
+        </i18n-t>
 
         <div class="rounded-lg border border-slate-700 bg-slate-900/50 p-3">
           <p class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-            Unavailable
+            {{ t('providers.presetMismatch.unavailable') }}
           </p>
           <div class="flex flex-wrap gap-1.5">
             <UBadge
@@ -60,11 +71,13 @@ function go(action: () => void) {
         </div>
 
         <p class="text-[13px] text-slate-400">
-          Either repoint the preset at models you have configured, or add the missing provider.
+          {{ t('providers.presetMismatch.advice') }}
         </p>
 
         <div class="flex flex-wrap justify-end gap-2">
-          <UButton color="neutral" variant="ghost" size="sm" @click="open = false"> Later </UButton>
+          <UButton color="neutral" variant="ghost" size="sm" @click="open = false">
+            {{ t('providers.presetMismatch.later') }}
+          </UButton>
           <UButton
             color="neutral"
             variant="subtle"
@@ -72,10 +85,10 @@ function go(action: () => void) {
             icon="i-lucide-key-round"
             @click="go(ui.openVendorCredentials)"
           >
-            Configure vendors
+            {{ t('providers.presetMismatch.configureVendors') }}
           </UButton>
           <UButton color="primary" size="sm" icon="i-lucide-cpu" @click="go(ui.openModelConfig)">
-            Edit presets
+            {{ t('providers.presetMismatch.editPresets') }}
           </UButton>
         </div>
       </div>

package/app/components/providers/AiProviderOnboardingModal.vue

@@ -7,6 +7,7 @@
 // the banner, disappears automatically the moment a usable source exists.
 import { computed } from 'vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 
 const open = computed({
@@ -32,30 +33,34 @@ interface Route {
 const routes = computed<Route[]>(() => [
   {
     icon: 'i-lucide-key-round',
-    title: 'Provider keys & subscriptions',
-    body: 'Add a direct provider API key (OpenAI, Anthropic, Qwen, …) or connect a commercial coding-plan subscription (Kimi, DeepSeek) or a personal one (Claude, GLM, Codex).',
-    cta: 'Open LLM vendors',
+    title: t('providers.onboarding.routes.keys.title'),
+    body: t('providers.onboarding.routes.keys.body'),
+    cta: t('providers.onboarding.routes.keys.cta'),
     onSelect: () => go(ui.openVendorCredentials),
   },
   {
     icon: 'i-lucide-route',
-    title: 'OpenRouter gateway',
-    body: 'Enable models through the OpenRouter gateway with a single key — browse and turn on the models you want.',
-    cta: 'Browse OpenRouter models',
+    title: t('providers.onboarding.routes.openrouter.title'),
+    body: t('providers.onboarding.routes.openrouter.body'),
+    cta: t('providers.onboarding.routes.openrouter.cta'),
     onSelect: () => go(ui.openOpenRouter),
   },
   {
     icon: 'i-lucide-server',
-    title: 'My local runners',
-    body: 'Point cat-factory at a model you run yourself (Ollama, LM Studio, llama.cpp, vLLM, …). No API key, no spend.',
-    cta: 'Configure local runners',
+    title: t('providers.onboarding.routes.local.title'),
+    body: t('providers.onboarding.routes.local.body'),
+    cta: t('providers.onboarding.routes.local.cta'),
     onSelect: () => go(ui.openLocalModels),
   },
 ])
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Set up an AI model provider" :ui="{ content: 'max-w-2xl' }">
+  <UModal
+    v-model:open="open"
+    :title="t('providers.onboarding.title')"
+    :ui="{ content: 'max-w-2xl' }"
+  >
     <template #body>
       <div class="space-y-5">
         <div
@@ -64,11 +69,10 @@ const routes = computed<Route[]>(() => [
           <UIcon name="i-lucide-cpu" class="mt-0.5 h-6 w-6 shrink-0 text-amber-400" />
           <div class="min-w-0 text-sm text-amber-100/90">
             <p class="font-medium text-amber-100">
-              No AI model is available on this workspace yet.
+              {{ t('providers.onboarding.noModelTitle') }}
             </p>
             <p class="mt-1">
-              Agents need a model to run. AI works out of the box only on a Cloudflare deployment
-              with Workers AI enabled — otherwise connect at least one source below.
+              {{ t('providers.onboarding.noModelBody') }}
             </p>
           </div>
         </div>
@@ -97,8 +101,7 @@ const routes = computed<Route[]>(() => [
         </div>
 
         <p class="text-[11px] leading-relaxed text-slate-500">
-          AWS Bedrock and Cloudflare Workers AI are enabled by the deployment operator via
-          environment configuration, not from this screen.
+          {{ t('providers.onboarding.operatorNote') }}
         </p>
       </div>
     </template>

package/app/components/providers/ApiKeysSection.vue

@@ -21,12 +21,12 @@ const props = withDefaults(defineProps<{ accountId?: string; category?: 'direct'
   category: 'direct',
 })
 
+const { t, n } = useI18n()
 const workspace = useWorkspaceStore()
 const keys = useApiKeysStore()
 const models = useModelsStore()
 const auth = useAuthStore()
 const toast = useToast()
-const { t } = useI18n()
 
 /** Account-wide mode (single account scope) vs the default workspace/user toggle. */
 const isAccount = computed(() => !!props.accountId)
@@ -50,84 +50,89 @@ interface ProviderMeta {
   caches?: boolean
 }
 
+// Provider metadata. Labels + step instructions resolve through i18n (reactive to the
+// locale), so each `t(...)` uses a literal key (kept tier-1 typed-key checkable); only the
+// `value`/`url`/`caches` differentiators stay inline.
 /** Direct vendors: the key reaches that one vendor's own endpoint. */
-const DIRECT_PROVIDERS: ProviderMeta[] = [
+const DIRECT_PROVIDERS = computed<ProviderMeta[]>(() => [
   {
     value: 'openai',
-    label: 'OpenAI',
+    label: t('providers.apiKeys.providers.openai.label'),
     url: 'https://platform.openai.com/api-keys',
     steps: [
-      'Open platform.openai.com → API keys and create a new secret key.',
-      'Copy the key (starts with sk-…); it is shown only once.',
+      t('providers.apiKeys.providers.openai.step1'),
+      t('providers.apiKeys.providers.openai.step2'),
     ],
     caches: true,
   },
   {
     value: 'anthropic',
-    label: 'Anthropic (Claude API)',
+    label: t('providers.apiKeys.providers.anthropic.label'),
     url: 'https://console.anthropic.com/settings/keys',
     steps: [
-      'Open console.anthropic.com → Settings → API Keys and create a key.',
-      'Copy the key (starts with sk-ant-…).',
+      t('providers.apiKeys.providers.anthropic.step1'),
+      t('providers.apiKeys.providers.anthropic.step2'),
     ],
     caches: true,
   },
   {
     value: 'qwen',
-    label: 'Qwen (Alibaba DashScope)',
+    label: t('providers.apiKeys.providers.qwen.label'),
     url: 'https://dashscope.console.aliyun.com/apiKey',
     steps: [
-      'Open the DashScope console (international) → API-KEY and create a key.',
-      'Copy the key; it authenticates the OpenAI-compatible Qwen endpoint.',
+      t('providers.apiKeys.providers.qwen.step1'),
+      t('providers.apiKeys.providers.qwen.step2'),
     ],
     caches: true,
   },
   {
     value: 'deepseek',
-    label: 'DeepSeek',
+    label: t('providers.apiKeys.providers.deepseek.label'),
     url: 'https://platform.deepseek.com/api_keys',
     steps: [
-      'Open platform.deepseek.com → API keys and create a key.',
-      'Copy the key (starts with sk-…).',
+      t('providers.apiKeys.providers.deepseek.step1'),
+      t('providers.apiKeys.providers.deepseek.step2'),
     ],
     caches: true,
   },
   {
     value: 'moonshot',
-    label: 'Moonshot (Kimi API)',
+    label: t('providers.apiKeys.providers.moonshot.label'),
     url: 'https://platform.moonshot.ai/console/api-keys',
     steps: [
-      'Open platform.moonshot.ai → API Keys and create a key.',
-      'Copy the key; it authenticates the OpenAI-compatible Moonshot endpoint.',
+      t('providers.apiKeys.providers.moonshot.step1'),
+      t('providers.apiKeys.providers.moonshot.step2'),
     ],
   },
-]
+])
 
 /** Proxies / gateways: one key fronts many vendors. These are intermediaries, not vendors. */
-const PROXY_PROVIDERS: ProviderMeta[] = [
+const PROXY_PROVIDERS = computed<ProviderMeta[]>(() => [
   {
     value: 'openrouter',
-    label: 'OpenRouter',
+    label: t('providers.apiKeys.providers.openrouter.label'),
     url: 'https://openrouter.ai/keys',
     steps: [
-      'Open openrouter.ai → Keys and create an API key.',
-      'Copy the key (starts with sk-or-…); it reaches 300+ models through one gateway.',
+      t('providers.apiKeys.providers.openrouter.step1'),
+      t('providers.apiKeys.providers.openrouter.step2'),
     ],
   },
   {
     value: 'litellm',
-    label: 'LiteLLM (self-hosted gateway)',
+    label: t('providers.apiKeys.providers.litellm.label'),
     url: 'https://docs.litellm.ai/docs/proxy/virtual_keys',
     steps: [
-      'Generate a virtual key on your LiteLLM gateway (or use its master key).',
-      "The gateway's base URL is set by your deployment operator (LITELLM_BASE_URL), not here.",
+      t('providers.apiKeys.providers.litellm.step1'),
+      t('providers.apiKeys.providers.litellm.step2'),
     ],
   },
-]
+])
 
 /** Providers for the requested category; labels everywhere fall back to the full set. */
-const PROVIDERS = computed(() => (props.category === 'proxy' ? PROXY_PROVIDERS : DIRECT_PROVIDERS))
-const ALL_PROVIDERS = [...DIRECT_PROVIDERS, ...PROXY_PROVIDERS]
+const PROVIDERS = computed(() =>
+  props.category === 'proxy' ? PROXY_PROVIDERS.value : DIRECT_PROVIDERS.value,
+)
+const ALL_PROVIDERS = computed(() => [...DIRECT_PROVIDERS.value, ...PROXY_PROVIDERS.value])
 
 const scope = ref<'workspace' | 'user'>('workspace')
 const provider = ref<ApiKeyProvider>(props.category === 'proxy' ? 'openrouter' : 'openai')
@@ -167,7 +172,7 @@ const connected = computed<ApiKey[]>(() => {
 })
 
 function providerLabel(p: ApiKeyProvider): string {
-  return ALL_PROVIDERS.find((x) => x.value === p)?.label ?? p
+  return ALL_PROVIDERS.value.find((x) => x.value === p)?.label ?? p
 }
 
 async function add() {
@@ -176,7 +181,8 @@ async function add() {
   try {
     const input = {
       provider: provider.value,
-      label: label.value.trim() || `${provider.value} key`,
+      label:
+        label.value.trim() || t('providers.apiKeys.defaultLabel', { provider: provider.value }),
       key: key.value.trim(),
     }
     if (isAccount.value) await keys.addAccountKey(input)
@@ -186,10 +192,14 @@ async function add() {
     label.value = ''
     // The picker's selectability depends on configured keys — refresh it.
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
-    toast.add({ title: 'API key connected', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('providers.apiKeys.toast.connected'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not connect key',
+      title: t('providers.apiKeys.toast.connectFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -206,7 +216,7 @@ async function remove(k: ApiKey) {
     if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
   } catch (e) {
     toast.add({
-      title: 'Could not remove key',
+      title: t('providers.apiKeys.toast.removeFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -218,49 +228,49 @@ async function remove(k: ApiKey) {
   <div class="space-y-4">
     <div>
       <h4 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
-        {{ category === 'proxy' ? 'Proxy / gateway API keys' : 'Direct provider API keys' }}
+        {{
+          category === 'proxy'
+            ? t('providers.apiKeys.proxyHeading')
+            : t('providers.apiKeys.directHeading')
+        }}
       </h4>
       <template v-if="category === 'proxy'">
         <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
-          Connect a <strong>proxy</strong> key (OpenRouter, LiteLLM) shared by
-          <strong>every workspace</strong> in this account. A proxy is an intermediary that fronts
-          many vendors behind a single key. Keys are stored encrypted, pooled, and rotated by usage.
+          {{ t('providers.apiKeys.proxyAccountIntro') }}
         </p>
         <p v-else class="mt-1 text-sm text-slate-400">
-          Connect a <strong>proxy</strong> key (OpenRouter, LiteLLM). A proxy is an intermediary
-          that reaches many vendors' models through a single gateway, rather than one vendor
-          directly. Keys are stored encrypted, pooled, and rotated by usage. Scope a key to this
-          <strong>workspace</strong> (shared with the team) or to <strong>you</strong> (your own
-          pool, usable anywhere).
+          {{ t('providers.apiKeys.proxyIntro') }}
         </p>
       </template>
       <template v-else>
         <p v-if="isAccount" class="mt-1 text-sm text-slate-400">
-          Connect a vendor API key shared by <strong>every workspace</strong> in this account. Keys
-          are stored encrypted, pooled, and rotated by usage. Account keys are admin-managed.
+          {{ t('providers.apiKeys.directAccountIntro') }}
         </p>
         <p v-else class="mt-1 text-sm text-slate-400">
-          Connect a vendor API key so models run directly on that provider. Keys are stored
-          encrypted, pooled, and rotated by usage. Scope a key to this
-          <strong>workspace</strong> (shared with the team) or to <strong>you</strong> (your own
-          pool, usable anywhere).
+          {{ t('providers.apiKeys.directIntro') }}
         </p>
       </template>
     </div>
 
     <!-- scope + provider -->
     <div class="flex flex-wrap items-end gap-3">
-      <UFormField v-if="!isAccount" label="Scope">
+      <UFormField v-if="!isAccount" :label="t('providers.apiKeys.scopeField')">
         <USelect
           v-model="scope"
           :items="[
-            { label: 'This workspace', value: 'workspace' },
-            { label: 'My keys (only me)', value: 'user' },
+            { label: t('providers.apiKeys.scopeWorkspace'), value: 'workspace' },
+            { label: t('providers.apiKeys.scopeUser'), value: 'user' },
           ]"
           class="w-48"
         />
       </UFormField>
-      <UFormField :label="category === 'proxy' ? 'Proxy' : 'Provider'">
+      <UFormField
+        :label="
+          category === 'proxy'
+            ? t('providers.apiKeys.proxyField')
+            : t('providers.apiKeys.providerField')
+        "
+      >
         <USelect
           v-model="provider"
           :items="PROVIDERS.map((p) => ({ label: p.label, value: p.value }))"
@@ -287,7 +297,7 @@ async function remove(k: ApiKey) {
           rel="noopener noreferrer"
           class="text-primary-400 underline"
         >
-          Open {{ selected.label }} keys ↗
+          {{ t('providers.apiKeys.openKeys', { provider: selected.label }) }}
         </a>
       </li>
     </ol>
@@ -296,21 +306,24 @@ async function remove(k: ApiKey) {
          the caching flavour, so long agentic runs stop re-billing the whole prompt. -->
     <p v-if="selected.caches" class="flex items-center gap-1.5 text-[12px] text-emerald-400/90">
       <UIcon name="i-lucide-zap" class="h-3.5 w-3.5 shrink-0" />
-      Enables prompt caching for {{ selected.label }} models — a long multi-turn run reuses its
-      cached prompt prefix instead of re-sending it every turn.
+      {{ t('providers.apiKeys.cachingNote', { provider: selected.label }) }}
     </p>
 
     <!-- add form -->
     <div class="space-y-2">
-      <UFormField label="Label (optional)">
-        <UInput v-model="label" :disabled="needsSignIn" placeholder="e.g. team key" />
+      <UFormField :label="t('providers.apiKeys.labelField')">
+        <UInput
+          v-model="label"
+          :disabled="needsSignIn"
+          :placeholder="t('providers.apiKeys.labelPlaceholder')"
+        />
       </UFormField>
-      <UFormField label="API key">
+      <UFormField :label="t('providers.apiKeys.keyField')">
         <UTextarea
           v-model="key"
           :rows="2"
           :disabled="needsSignIn"
-          placeholder="paste the API key"
+          :placeholder="t('providers.apiKeys.keyPlaceholder')"
           class="font-mono"
         />
       </UFormField>
@@ -321,7 +334,7 @@ async function remove(k: ApiKey) {
           icon="i-lucide-plus"
           @click="add()"
         >
-          Connect
+          {{ t('providers.apiKeys.connect') }}
         </UButton>
       </div>
     </div>
@@ -329,7 +342,7 @@ async function remove(k: ApiKey) {
     <!-- connected keys for the selected scope -->
     <div v-if="connected.length" class="space-y-2">
       <h5 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
-        Connected ({{ connected.length }})
+        {{ t('providers.apiKeys.connected', { count: connected.length }) }}
       </h5>
       <div
         v-for="k in connected"
@@ -340,8 +353,13 @@ async function remove(k: ApiKey) {
           <span class="font-medium text-slate-200">{{ k.label }}</span>
           <span class="ml-2 text-xs text-slate-500">{{ providerLabel(k.provider) }}</span>
           <div class="text-[11px] tabular-nums text-slate-500">
-            {{ (k.inputTokens + k.outputTokens).toLocaleString() }} tok this window ·
-            {{ k.requestCount }} call{{ k.requestCount === 1 ? '' : 's' }}
+            {{
+              t(
+                'providers.apiKeys.usage',
+                { tokens: n(k.inputTokens + k.outputTokens, 'decimal'), count: k.requestCount },
+                k.requestCount,
+              )
+            }}
           </div>
         </div>
         <UButton

package/app/components/providers/PersonalCredentialModal.vue

@@ -5,8 +5,8 @@
 // credential_required. On submit it transparently retries the gated action and caches the
 // password. The copy follows the pending vendor (Claude / GLM / ChatGPT-Codex).
 import { computed, ref, watch } from 'vue'
-import type { SubscriptionVendor } from '~/types/domain'
 
+const { t } = useI18n()
 const personal = usePersonalSubscriptionsStore()
 const ui = useUiStore()
 const toast = useToast()
@@ -29,17 +29,18 @@ const needsConnect = computed(
     pending.value?.reason === 'no_subscription' || pending.value?.reason === 'subscription_expired',
 )
 
-const VENDOR_LABELS: Partial<Record<SubscriptionVendor, string>> = {
-  claude: 'Claude',
-  glm: 'GLM (Z.ai)',
-  codex: 'ChatGPT (Codex)',
-}
-
 /** Display label for the pending vendor (falls back to the raw vendor string). */
 const vendorLabel = computed(() => {
-  const v = pending.value?.vendor
-  if (!v) return 'subscription'
-  return VENDOR_LABELS[v] ?? v
+  switch (pending.value?.vendor) {
+    case 'claude':
+      return t('providers.personalCredential.vendors.claude')
+    case 'glm':
+      return t('providers.personalCredential.vendors.glm')
+    case 'codex':
+      return t('providers.personalCredential.vendors.codex')
+    default:
+      return pending.value?.vendor ?? t('providers.personalCredential.fallbackVendor')
+  }
 })
 
 watch(open, (isOpen) => {
@@ -49,13 +50,13 @@ watch(open, (isOpen) => {
 const title = computed(() => {
   switch (pending.value?.reason) {
     case 'wrong_password':
-      return 'Incorrect personal password'
+      return t('providers.personalCredential.titleWrongPassword')
     case 'no_subscription':
-      return `Connect your ${vendorLabel.value} subscription`
+      return t('providers.personalCredential.titleNoSubscription', { vendor: vendorLabel.value })
     case 'subscription_expired':
-      return `Your ${vendorLabel.value} subscription expired`
+      return t('providers.personalCredential.titleExpired', { vendor: vendorLabel.value })
     default:
-      return 'Enter your personal password'
+      return t('providers.personalCredential.titleDefault')
   }
 })
 
@@ -64,11 +65,15 @@ async function submit() {
   busy.value = true
   try {
     await pending.value.retry(password.value)
-    toast.add({ title: 'Run started', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('providers.personalCredential.toast.started'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     // A fresh 428 (e.g. still-wrong password) re-arms `pending`, keeping the modal open.
     toast.add({
-      title: 'Could not start the run',
+      title: t('providers.personalCredential.toast.startFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -89,36 +94,37 @@ function goConnect() {
       <div class="space-y-4">
         <template v-if="needsConnect">
           <p class="text-sm text-slate-400">
-            This task uses a {{ vendorLabel }} model, which runs on <strong>your own</strong>
-            {{ vendorLabel }} subscription. Connect (or renew) it first, then start the run again.
+            {{ t('providers.personalCredential.connectBody', { vendor: vendorLabel }) }}
           </p>
           <div class="flex justify-end gap-2">
-            <UButton color="neutral" variant="ghost" @click="open = false">Cancel</UButton>
-            <UButton icon="i-lucide-shield-check" @click="goConnect()"
-              >Connect subscription</UButton
-            >
+            <UButton color="neutral" variant="ghost" @click="open = false">
+              {{ t('providers.personalCredential.cancel') }}
+            </UButton>
+            <UButton icon="i-lucide-shield-check" @click="goConnect()">
+              {{ t('providers.personalCredential.connectCta') }}
+            </UButton>
           </div>
         </template>
 
         <template v-else>
           <p class="text-sm text-slate-400">
-            Enter the personal password that protects your {{ vendorLabel }} subscription. It
-            unlocks your credential for this run only and is cached in this browser so you won’t be
-            asked again for a while.
+            {{ t('providers.personalCredential.passwordBody', { vendor: vendorLabel }) }}
           </p>
-          <UFormField label="Personal password">
+          <UFormField :label="t('providers.personalCredential.passwordField')">
             <UInput
               v-model="password"
               type="password"
               autofocus
-              placeholder="your personal password"
+              :placeholder="t('providers.personalCredential.passwordPlaceholder')"
               @keydown.enter="submit()"
             />
           </UFormField>
           <div class="flex justify-end gap-2">
-            <UButton color="neutral" variant="ghost" @click="open = false">Cancel</UButton>
+            <UButton color="neutral" variant="ghost" @click="open = false">
+              {{ t('providers.personalCredential.cancel') }}
+            </UButton>
             <UButton :loading="busy" :disabled="password.length < 6" @click="submit()">
-              Unlock &amp; run
+              {{ t('providers.personalCredential.submit') }}
             </UButton>
           </div>
         </template>

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -9,6 +9,8 @@ import type { SubscriptionVendor } from '~/types/domain'
 
 const personal = usePersonalSubscriptionsStore()
 const auth = useAuthStore()
+const workspace = useWorkspaceStore()
+const models = useModelsStore()
 const toast = useToast()
 const { t, d } = useI18n()
 
@@ -117,6 +119,11 @@ async function connect() {
     password.value = ''
     label.value = ''
     expiresOn.value = ''
+    // A connected subscription makes its vendor's models usable, so refresh the catalog:
+    // this clears the "No AI model configured" banner and, if the default preset still
+    // points at models this subscription doesn't cover, reactively surfaces the
+    // preset-mismatch prompt (with its "pick a different preset" link).
+    if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
     toast.add({
       title: t('personalSubscriptions.toast.connected', { vendor: selectedMeta.value.label }),
       icon: 'i-lucide-check',
@@ -136,6 +143,9 @@ async function connect() {
 async function disconnect(v: SubscriptionVendor) {
   try {
     await personal.remove(v)
+    // Removing the subscription may drop the workspace's last usable model — refresh so the
+    // AI-readiness banners re-evaluate (mirrors the API-key flow).
+    if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
     toast.add({ title: t('personalSubscriptions.toast.disconnected'), icon: 'i-lucide-check' })
   } catch (e) {
     toast.add({