@cat-factory/app 0.46.12 → 0.47.0

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/ApiKeysSection.vue

@@ -24,11 +24,18 @@ const props = withDefaults(defineProps<{ accountId?: string; category?: 'direct'
 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)
 
+// "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
@@ -257,11 +264,17 @@ async function remove(k: ApiKey) {
         <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"
@@ -290,13 +303,24 @@ async function remove(k: ApiKey) {
     <!-- add form -->
     <div class="space-y-2">
       <UFormField label="Label (optional)">
-        <UInput v-model="label" placeholder="e.g. team key" />
+        <UInput v-model="label" :disabled="needsSignIn" placeholder="e.g. team key" />
       </UFormField>
       <UFormField label="API key">
-        <UTextarea v-model="key" :rows="2" placeholder="paste the API key" class="font-mono" />
+        <UTextarea
+          v-model="key"
+          :rows="2"
+          :disabled="needsSignIn"
+          placeholder="paste the API key"
+          class="font-mono"
+        />
       </UFormField>
       <div class="flex justify-end">
-        <UButton :loading="busy" :disabled="!key.trim()" icon="i-lucide-plus" @click="add()">
+        <UButton
+          :loading="busy"
+          :disabled="needsSignIn || !key.trim()"
+          icon="i-lucide-plus"
+          @click="add()"
+        >
           Connect
         </UButton>
       </div>

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>

package/app/components/settings/AccountSettingsPanel.vue

@@ -8,6 +8,7 @@
 import AccountTeamSettings from '~/components/layout/AccountTeamSettings.vue'
 import AccountFragmentSettings from '~/components/layout/AccountFragmentSettings.vue'
 
+const { t } = useI18n()
 const ui = useUiStore()
 const accounts = useAccountsStore()
 
@@ -23,21 +24,23 @@ const activeTab = computed({
   set: (v: string) => ui.setAccountSettingsTab(v),
 })
 
-const tabs = [
-  { value: 'team', label: 'Team & access', icon: 'i-lucide-users', slot: 'team' },
+const tabs = computed(() => [
+  { value: 'team', label: t('settings.account.tabs.team'), icon: 'i-lucide-users', slot: 'team' },
   {
     value: 'fragments',
-    label: 'Context fragments',
+    label: t('settings.account.tabs.fragments'),
     icon: 'i-lucide-book-marked',
     slot: 'fragments',
   },
-]
+])
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Account settings" :ui="{ content: 'max-w-3xl' }">
+  <UModal v-model:open="open" :title="t('settings.account.title')" :ui="{ content: 'max-w-3xl' }">
     <template #body>
-      <p v-if="!accounts.activeAccountId" class="text-sm text-slate-400">No account selected.</p>
+      <p v-if="!accounts.activeAccountId" class="text-sm text-slate-400">
+        {{ t('settings.account.noAccount') }}
+      </p>
       <UTabs
         v-else
         v-model="activeTab"