@cat-factory/app 0.46.12 → 0.47.1

package/app/components/auth/AuthGate.vue

@@ -27,7 +27,7 @@ onMounted(() => auth.bootstrap())
 
   <slot v-else-if="isPublicRoute" />
 
-  <LoginScreen v-else-if="auth.required && !auth.user" />
+  <LoginScreen v-else-if="auth.needsLogin" />
 
   <slot v-else />
 </template>

package/app/components/auth/LoginScreen.vue

@@ -1,10 +1,74 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
 
 const auth = useAuthStore()
 const { t } = useI18n()
 
+// Local-mode source-control PAT login. GitHub/GitLab are brand names (kept verbatim across
+// locales), as are the token-settings URLs, so they're inline constants rather than catalog
+// keys — same convention as the provider descriptors in ApiKeysSection. The actual link
+// prefers the server's scopes-preselected deep link (`patLogin.setupUrls`); these are the
+// fallback when it's absent.
+type PatProvider = 'github' | 'gitlab'
+const PROVIDER_LABELS: Record<PatProvider, string> = { github: 'GitHub', gitlab: 'GitLab' }
+const PROVIDER_ICONS: Record<PatProvider, string> = {
+  github: 'i-lucide-github',
+  gitlab: 'i-lucide-gitlab',
+}
+// Fallback token-creation pages, used only if the server didn't advertise a deep link.
+const PROVIDER_TOKEN_URLS: Record<PatProvider, string> = {
+  github: 'https://github.com/settings/tokens/new',
+  gitlab: 'https://gitlab.com/-/user_settings/personal_access_tokens',
+}
+
+const patLoginCfg = computed(() => auth.localMode?.patLogin)
+const configuredProviders = computed<PatProvider[]>(
+  () => (patLoginCfg.value?.configured ?? []) as PatProvider[],
+)
+const availableProviders = computed<PatProvider[]>(
+  () => (patLoginCfg.value?.available ?? []) as PatProvider[],
+)
+const showLocalLogin = computed(() => availableProviders.value.length > 0)
+
+const patProvider = ref<PatProvider>('github')
+const patToken = ref('')
+const patBusy = ref(false)
+const patError = ref<string | null>(null)
+
+// Keep the picker on an actually-available provider.
+watch(
+  availableProviders,
+  (list) => {
+    if (list.length && !list.includes(patProvider.value)) patProvider.value = list[0]!
+  },
+  { immediate: true },
+)
+
+const patProviderItems = computed(() =>
+  availableProviders.value.map((p) => ({ label: PROVIDER_LABELS[p], value: p })),
+)
+
+// Prefer the server's scopes-preselected deep link (it owns the per-provider scopes);
+// fall back to the plain token page if it wasn't advertised.
+const tokenCreateUrl = computed(
+  () => patLoginCfg.value?.setupUrls?.[patProvider.value] ?? PROVIDER_TOKEN_URLS[patProvider.value],
+)
+
+/** One-click (configured PAT) or pasted-token sign-in; reloads so the app boots signed in. */
+async function submitPat(provider: PatProvider, token?: string) {
+  patError.value = null
+  patBusy.value = true
+  try {
+    await auth.patLogin(token ? { provider, token } : { provider })
+    if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
+  } catch (e) {
+    patError.value = apiErrorEnvelope(e)?.message ?? t('auth.localMode.failed')
+  } finally {
+    patBusy.value = false
+  }
+}
+
 // An invite token may ride in on the URL (?invite=…) — it flows through the OAuth
 // redirect and the password signup so a brand-new user can join the org on first login.
 const invite = computed(() => {
@@ -90,6 +154,72 @@ const showOAuthDivider = computed(
         </p>
       </div>
 
+      <!-- Local mode: sign in with a source-control PAT (no OAuth round-trip needed) -->
+      <div v-if="showLocalLogin && mode !== 'forgot'" class="space-y-3">
+        <!-- One-click: a PAT is already configured server-side -->
+        <UButton
+          v-for="p in configuredProviders"
+          :key="p"
+          block
+          size="lg"
+          color="primary"
+          :icon="PROVIDER_ICONS[p]"
+          :loading="patBusy"
+          @click="submitPat(p)"
+        >
+          {{ t('auth.localMode.continueWith', { provider: PROVIDER_LABELS[p] }) }}
+        </UButton>
+
+        <!-- Enter a PAT inline -->
+        <form class="space-y-2" @submit.prevent="submitPat(patProvider, patToken.trim())">
+          <p class="text-xs font-medium text-slate-400">{{ t('auth.localMode.enterPatTitle') }}</p>
+          <USelect
+            v-if="patProviderItems.length > 1"
+            v-model="patProvider"
+            :items="patProviderItems"
+            size="lg"
+            class="w-full"
+          />
+          <UTextarea
+            v-model="patToken"
+            :rows="2"
+            :placeholder="
+              t('auth.localMode.tokenPlaceholder', { provider: PROVIDER_LABELS[patProvider] })
+            "
+            class="w-full font-mono"
+          />
+          <div class="flex items-center justify-between gap-2">
+            <a
+              :href="tokenCreateUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-xs text-indigo-400 hover:underline"
+            >
+              {{ t('auth.localMode.createToken', { provider: PROVIDER_LABELS[patProvider] }) }}
+            </a>
+            <UButton
+              size="lg"
+              color="neutral"
+              variant="subtle"
+              type="submit"
+              :loading="patBusy"
+              :disabled="!patToken.trim()"
+            >
+              {{ t('auth.localMode.submit') }}
+            </UButton>
+          </div>
+        </form>
+        <p v-if="patError" class="text-sm text-rose-400">{{ patError }}</p>
+      </div>
+
+      <div
+        v-if="showLocalLogin && auth.providers.password && mode !== 'forgot'"
+        class="my-4 flex items-center gap-3 text-xs text-slate-500"
+      >
+        <span class="h-px flex-1 bg-slate-800" /> {{ t('auth.localMode.orDivider') }}
+        <span class="h-px flex-1 bg-slate-800" />
+      </div>
+
       <!-- OAuth providers -->
       <div v-if="mode !== 'forgot'" class="space-y-2">
         <UButton

package/app/components/layout/AccountDeploymentSettings.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
+import type { ContentStorageBackend, ContentStorageConfig } from '~/types/accountSettings'
 
 // Deployment integration secrets for an account (admin only): the Slack app OAuth
-// credentials and the container web-search upstream keys — both moved out of env into
-// the per-account settings store, sealed at rest. Secrets are write-only: the panel only
-// ever shows whether each integration is configured (the `summary`), never the values;
-// blank inputs leave a configured secret unchanged. Hidden when the settings store isn't
-// wired (no ENCRYPTION_KEY).
+// credentials, the container web-search upstream keys, and the binary-artifact (screenshot)
+// content-storage backend — all moved out of env into the per-account settings store, sealed
+// at rest. Secrets are write-only: the panel only ever shows whether each integration is
+// configured (the `summary`), never the values; blank inputs leave a configured secret
+// unchanged. Hidden when the settings store isn't wired (no ENCRYPTION_KEY).
 const props = defineProps<{ accountId: string }>()
 
 const store = useAccountSettingsStore()
@@ -20,9 +21,54 @@ const savingWeb = ref(false)
 
 const summary = computed(() => store.view?.summary ?? null)
 
+// ---- Content storage (binary artifacts / screenshots) --------------------
+// Exhaustive enum→key map (drift guard tier 2): every backend resolves to a static literal
+// `t()` key, so adding a backend without a label fails the typecheck on this Record.
+const contentBackendLabels = computed<Record<ContentStorageBackend, string>>(() => ({
+  off: t('layout.accountDeployment.contentStorage.backends.off'),
+  fs: t('layout.accountDeployment.contentStorage.backends.fs'),
+  s3: t('layout.accountDeployment.contentStorage.backends.s3'),
+  r2: t('layout.accountDeployment.contentStorage.backends.r2'),
+  db: t('layout.accountDeployment.contentStorage.backends.db'),
+}))
+const storageCapability = computed(() => store.view?.contentStorageCapability ?? null)
+const storageSummary = computed(() => summary.value?.contentStorage ?? null)
+const backendItems = computed(() =>
+  (storageCapability.value?.supportedBackends ?? []).map((b) => ({
+    label: contentBackendLabels.value[b],
+    value: b,
+  })),
+)
+const csBackend = ref<ContentStorageBackend>('off')
+const cs = reactive({
+  basePath: '',
+  region: '',
+  bucket: '',
+  prefix: '',
+  endpoint: '',
+  forcePathStyle: false,
+  accessKeyId: '',
+  secretAccessKey: '',
+})
+const savingStorage = ref(false)
+
+function hydrateStorage() {
+  const cfg = store.view?.config?.contentStorage
+  csBackend.value = cfg?.backend ?? storageCapability.value?.defaultBackend ?? 'off'
+  cs.basePath = cfg?.fs?.basePath ?? ''
+  cs.region = cfg?.s3?.region ?? ''
+  cs.bucket = cfg?.s3?.bucket ?? ''
+  cs.prefix = cfg?.s3?.prefix ?? ''
+  cs.endpoint = cfg?.s3?.endpoint ?? ''
+  cs.forcePathStyle = cfg?.s3?.forcePathStyle ?? false
+  cs.accessKeyId = ''
+  cs.secretAccessKey = ''
+}
+
 onMounted(async () => {
   try {
     await store.load(props.accountId)
+    hydrateStorage()
   } catch (e) {
     toast.add({
       title: t('layout.accountDeployment.loadFailed'),
@@ -33,6 +79,72 @@ onMounted(async () => {
   }
 })
 
+async function saveStorage() {
+  const backend = csBackend.value
+  const config: ContentStorageConfig = { backend }
+  if (backend === 'fs' && cs.basePath.trim()) {
+    config.fs = { basePath: cs.basePath.trim() }
+  }
+  if (backend === 's3') {
+    if (!cs.region.trim() || !cs.bucket.trim()) {
+      toast.add({
+        title: t('layout.accountDeployment.contentStorage.regionBucketValidation'),
+        color: 'error',
+      })
+      return
+    }
+    config.s3 = {
+      region: cs.region.trim(),
+      bucket: cs.bucket.trim(),
+      ...(cs.prefix.trim() ? { prefix: cs.prefix.trim() } : {}),
+      ...(cs.endpoint.trim() ? { endpoint: cs.endpoint.trim() } : {}),
+      ...(cs.forcePathStyle ? { forcePathStyle: true } : {}),
+    }
+  }
+  const input: Parameters<typeof store.save>[1] = { config: { contentStorage: config } }
+  if (backend === 's3') {
+    const id = cs.accessKeyId.trim()
+    const key = cs.secretAccessKey.trim()
+    if (id && key) {
+      input.secrets = { s3: { accessKeyId: id, secretAccessKey: key } }
+    } else if (id || key) {
+      toast.add({
+        title: t('layout.accountDeployment.contentStorage.bothKeysValidation'),
+        color: 'error',
+      })
+      return
+    } else if (!storageSummary.value?.s3CredentialsConfigured) {
+      toast.add({
+        title: t('layout.accountDeployment.contentStorage.keysValidation'),
+        color: 'error',
+      })
+      return
+    }
+    // else: keys already stored and none re-entered → leave them unchanged.
+  } else {
+    // Switching off S3: drop any stored S3 credentials.
+    input.secrets = { s3: null }
+  }
+  savingStorage.value = true
+  try {
+    await store.save(props.accountId, input)
+    hydrateStorage()
+    toast.add({
+      title: t('layout.accountDeployment.contentStorage.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    toast.add({
+      title: t('layout.accountDeployment.contentStorage.saveFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  } finally {
+    savingStorage.value = false
+  }
+}
+
 async function saveSlack() {
   if (!slack.clientId.trim() || !slack.clientSecret.trim() || !slack.redirectUrl.trim()) {
     toast.add({ title: t('layout.accountDeployment.slack.validation'), color: 'error' })
@@ -275,5 +387,120 @@ async function clearWeb() {
         </UButton>
       </div>
     </section>
+
+    <!-- Content storage (binary artifacts / screenshots) -->
+    <section v-if="storageCapability" class="space-y-2 border-t border-slate-800 pt-6">
+      <div class="flex items-center gap-2">
+        <h4 class="text-sm font-semibold text-slate-200">
+          {{ t('layout.accountDeployment.contentStorage.title') }}
+        </h4>
+        <UBadge
+          :color="
+            storageSummary?.backend && storageSummary.backend !== 'off' ? 'success' : 'neutral'
+          "
+          variant="subtle"
+          size="xs"
+        >
+          {{
+            storageSummary?.backend
+              ? contentBackendLabels[storageSummary.backend]
+              : t('layout.accountDeployment.contentStorage.default', {
+                  backend: contentBackendLabels[storageCapability.defaultBackend],
+                })
+          }}
+        </UBadge>
+      </div>
+      <p class="text-[11px] text-slate-400">
+        {{ t('layout.accountDeployment.contentStorage.description') }}
+      </p>
+      <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <USelect v-model="csBackend" :items="backendItems" value-key="value" size="sm" />
+      </div>
+
+      <!-- Filesystem -->
+      <div v-if="csBackend === 'fs'" class="grid grid-cols-1 gap-2">
+        <UInput
+          v-model="cs.basePath"
+          :placeholder="t('layout.accountDeployment.contentStorage.basePath')"
+          size="sm"
+        />
+      </div>
+
+      <!-- S3 / S3-compatible -->
+      <template v-if="csBackend === 's3'">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <UInput
+            v-model="cs.region"
+            :placeholder="t('layout.accountDeployment.contentStorage.region')"
+            size="sm"
+          />
+          <UInput
+            v-model="cs.bucket"
+            :placeholder="t('layout.accountDeployment.contentStorage.bucket')"
+            size="sm"
+          />
+          <UInput
+            v-model="cs.prefix"
+            :placeholder="t('layout.accountDeployment.contentStorage.prefix')"
+            size="sm"
+          />
+          <UInput
+            v-model="cs.endpoint"
+            :placeholder="t('layout.accountDeployment.contentStorage.endpoint')"
+            size="sm"
+          />
+        </div>
+        <UCheckbox
+          v-model="cs.forcePathStyle"
+          :label="t('layout.accountDeployment.contentStorage.forcePathStyle')"
+          size="sm"
+        />
+        <div class="flex items-center gap-2">
+          <span class="text-[11px] text-slate-400">
+            {{ t('layout.accountDeployment.contentStorage.accessKeys') }}
+          </span>
+          <UBadge
+            :color="storageSummary?.s3CredentialsConfigured ? 'success' : 'neutral'"
+            variant="subtle"
+            size="xs"
+          >
+            {{
+              storageSummary?.s3CredentialsConfigured
+                ? t('layout.accountDeployment.configured')
+                : t('layout.accountDeployment.notSet')
+            }}
+          </UBadge>
+        </div>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <UInput
+            v-model="cs.accessKeyId"
+            type="password"
+            :placeholder="t('layout.accountDeployment.contentStorage.accessKeyId')"
+            size="sm"
+          />
+          <UInput
+            v-model="cs.secretAccessKey"
+            type="password"
+            :placeholder="t('layout.accountDeployment.contentStorage.secretAccessKey')"
+            size="sm"
+          />
+        </div>
+        <p class="text-[11px] text-slate-400">
+          {{ t('layout.accountDeployment.contentStorage.keysHint') }}
+        </p>
+      </template>
+
+      <div class="flex gap-2">
+        <UButton
+          color="primary"
+          size="xs"
+          icon="i-lucide-save"
+          :loading="savingStorage"
+          @click="saveStorage"
+        >
+          {{ t('common.save') }}
+        </UButton>
+      </div>
+    </section>
   </div>
 </template>

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>