@cat-factory/app 0.46.12 → 0.47.1

package/app/components/providers/ApiKeysSection.vue

@@ -21,14 +21,21 @@ 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()
 
 /** Account-wide mode (single account scope) vs the default workspace/user toggle. */
 const isAccount = computed(() => !!props.accountId)
 
+// "My keys" (user scope) are stored per-user, so they need a signed-in user. Block just
+// that scope when there's none (a deployment without sign-in); workspace/account keys are
+// unaffected. The scope toggle stays enabled so the user can switch back to a shared scope.
+const needsSignIn = computed(() => !isAccount.value && scope.value === 'user' && !auth.user)
+
 interface ProviderMeta {
   value: ApiKeyProvider
   label: string
@@ -43,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')
@@ -160,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() {
@@ -169,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)
@@ -179,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',
     })
@@ -199,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',
     })
@@ -211,57 +228,63 @@ 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 }))"
+          :disabled="needsSignIn"
           class="w-64"
         />
       </UFormField>
     </div>
 
+    <ProvidersSignInRequiredNotice
+      v-if="needsSignIn"
+      :message="t('auth.signInRequired.userApiKeys')"
+    />
+
     <!-- where to get the key -->
     <ol
       class="list-decimal space-y-1.5 rounded-lg border border-slate-700 bg-slate-900/60 p-4 pl-8 text-sm text-slate-300"
@@ -274,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>
@@ -283,21 +306,35 @@ 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" 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">
-        <UTextarea v-model="key" :rows="2" placeholder="paste the API key" class="font-mono" />
+      <UFormField :label="t('providers.apiKeys.keyField')">
+        <UTextarea
+          v-model="key"
+          :rows="2"
+          :disabled="needsSignIn"
+          :placeholder="t('providers.apiKeys.keyPlaceholder')"
+          class="font-mono"
+        />
       </UFormField>
       <div class="flex justify-end">
-        <UButton :loading="busy" :disabled="!key.trim()" icon="i-lucide-plus" @click="add()">
-          Connect
+        <UButton
+          :loading="busy"
+          :disabled="needsSignIn || !key.trim()"
+          icon="i-lucide-plus"
+          @click="add()"
+        >
+          {{ t('providers.apiKeys.connect') }}
         </UButton>
       </div>
     </div>
@@ -305,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"
@@ -316,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

@@ -8,9 +8,15 @@ import { computed, onMounted, ref } from 'vue'
 import type { SubscriptionVendor } from '~/types/domain'
 
 const personal = usePersonalSubscriptionsStore()
+const auth = useAuthStore()
 const toast = useToast()
 const { t, d } = useI18n()
 
+// Personal subscriptions are stored per-user, so they need a signed-in user. When there
+// isn't one (a deployment running without sign-in), block the form so the user doesn't
+// enter a token + password that can't be saved.
+const needsSignIn = computed(() => !auth.user)
+
 /**
  * Per-vendor metadata driving the connect form + connected-row labels. Reactive to the
  * locale (rebuilds on switch). The token placeholders for `claude`/`codex` are literal
@@ -150,6 +156,11 @@ async function disconnect(v: SubscriptionVendor) {
       <p class="mt-1 text-sm text-slate-400">{{ t('personalSubscriptions.intro') }}</p>
     </div>
 
+    <ProvidersSignInRequiredNotice
+      v-if="needsSignIn"
+      :message="t('auth.signInRequired.personalSubscriptions')"
+    />
+
     <!-- connected subscriptions -->
     <div
       v-for="sub in personal.subscriptions"
@@ -182,6 +193,7 @@ async function disconnect(v: SubscriptionVendor) {
       <USelect
         v-model="vendor"
         :items="PERSONAL_VENDORS.map((m) => ({ label: m.label, value: m.value }))"
+        :disabled="needsSignIn"
         class="w-64"
       />
     </UFormField>
@@ -197,6 +209,7 @@ async function disconnect(v: SubscriptionVendor) {
       <UFormField :label="t('personalSubscriptions.labelField')">
         <UInput
           v-model="label"
+          :disabled="needsSignIn"
           :placeholder="t('personalSubscriptions.labelPlaceholder', { vendor: selectedMeta.label })"
         />
       </UFormField>
@@ -204,6 +217,7 @@ async function disconnect(v: SubscriptionVendor) {
         <UTextarea
           v-model="token"
           :rows="2"
+          :disabled="needsSignIn"
           :placeholder="selectedMeta.tokenPlaceholder"
           class="font-mono"
         />
@@ -213,17 +227,18 @@ async function disconnect(v: SubscriptionVendor) {
           <UInput
             v-model="password"
             type="password"
+            :disabled="needsSignIn"
             :placeholder="t('personalSubscriptions.passwordPlaceholder')"
           />
         </UFormField>
         <UFormField :label="t('personalSubscriptions.renewsField')">
-          <UInput v-model="expiresOn" type="date" />
+          <UInput v-model="expiresOn" type="date" :disabled="needsSignIn" />
         </UFormField>
       </div>
       <div class="flex justify-end">
         <UButton
           :loading="busy"
-          :disabled="!token.trim() || password.length < 6"
+          :disabled="needsSignIn || !token.trim() || password.length < 6"
           icon="i-lucide-shield-check"
           @click="connect()"
         >

package/app/components/providers/SignInRequiredNotice.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// A guard banner for a per-USER credential form (personal subscriptions, your own API
+// keys) when there is no signed-in user to store it against. On auth-enabled deployments
+// and in local mode the app forces a login before these forms are reachable, so this only
+// surfaces on a deployment running WITHOUT sign-in (auth fully disabled, non-local) — where
+// storing would 401. It blocks the inputs and explains why, instead of letting the user
+// type a token that can't be saved.
+defineProps<{ message: string }>()
+</script>
+
+<template>
+  <div
+    class="flex items-start gap-2.5 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200"
+    role="alert"
+  >
+    <UIcon name="i-lucide-lock" class="mt-0.5 h-4 w-4 shrink-0" />
+    <p>{{ message }}</p>
+  </div>
+</template>