@cat-factory/app 0.46.11 → 0.47.0

package/app/components/layout/AccountDeploymentSettings.vue

@@ -1,16 +1,18 @@
 <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()
 const toast = useToast()
+const { t } = useI18n()
 
 const slack = reactive({ clientId: '', clientSecret: '', redirectUrl: '' })
 const web = reactive({ braveApiKey: '', searxngUrl: '', searxngApiKey: '' })
@@ -19,12 +21,57 @@ 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: 'Could not load deployment settings',
+      title: t('layout.accountDeployment.loadFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -32,9 +79,75 @@ 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: 'Enter the client id, secret and redirect URL', color: 'error' })
+    toast.add({ title: t('layout.accountDeployment.slack.validation'), color: 'error' })
     return
   }
   savingSlack.value = true
@@ -51,10 +164,14 @@ async function saveSlack() {
     slack.clientId = ''
     slack.clientSecret = ''
     slack.redirectUrl = ''
-    toast.add({ title: 'Slack OAuth saved', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.slack.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not save Slack OAuth',
+      title: t('layout.accountDeployment.slack.saveFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -67,10 +184,14 @@ async function clearSlack() {
   savingSlack.value = true
   try {
     await store.save(props.accountId, { secrets: { slackOAuth: null } })
-    toast.add({ title: 'Slack OAuth cleared', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.slack.cleared'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not clear Slack OAuth',
+      title: t('layout.accountDeployment.slack.clearFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -83,7 +204,7 @@ async function saveWeb() {
   const brave = web.braveApiKey.trim()
   const searxng = web.searxngUrl.trim()
   if (!brave && !searxng) {
-    toast.add({ title: 'Enter a Brave key or a SearXNG URL', color: 'error' })
+    toast.add({ title: t('layout.accountDeployment.web.validation'), color: 'error' })
     return
   }
   savingWeb.value = true
@@ -100,10 +221,14 @@ async function saveWeb() {
     web.braveApiKey = ''
     web.searxngUrl = ''
     web.searxngApiKey = ''
-    toast.add({ title: 'Web search keys saved', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.web.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not save web search keys',
+      title: t('layout.accountDeployment.web.saveFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -116,10 +241,14 @@ async function clearWeb() {
   savingWeb.value = true
   try {
     await store.save(props.accountId, { secrets: { webSearch: null } })
-    toast.add({ title: 'Web search keys cleared', icon: 'i-lucide-check', color: 'success' })
+    toast.add({
+      title: t('layout.accountDeployment.web.cleared'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
   } catch (e) {
     toast.add({
-      title: 'Could not clear web search keys',
+      title: t('layout.accountDeployment.web.clearFailed'),
       description: e instanceof Error ? e.message : String(e),
       color: 'error',
     })
@@ -132,38 +261,50 @@ async function clearWeb() {
 <template>
   <div v-if="store.available !== false" class="space-y-6">
     <div>
-      <h3 class="mb-1 font-semibold text-white">Deployment integrations</h3>
+      <h3 class="mb-1 font-semibold text-white">{{ t('layout.accountDeployment.title') }}</h3>
       <p class="text-[11px] text-slate-400">
-        Credentials shared by every workspace in this account, sealed at rest. Values are never
-        shown after saving; leave a field blank to keep the stored secret.
+        {{ t('layout.accountDeployment.intro') }}
       </p>
     </div>
 
     <!-- Slack app OAuth -->
     <section class="space-y-2">
       <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-slate-200">Slack app (OAuth)</h4>
+        <h4 class="text-sm font-semibold text-slate-200">
+          {{ t('layout.accountDeployment.slack.title') }}
+        </h4>
         <UBadge
           :color="summary?.slackOAuthConfigured ? 'success' : 'neutral'"
           variant="subtle"
           size="xs"
         >
-          {{ summary?.slackOAuthConfigured ? 'Configured' : 'Not set' }}
+          {{
+            summary?.slackOAuthConfigured
+              ? t('layout.accountDeployment.configured')
+              : t('layout.accountDeployment.notSet')
+          }}
         </UBadge>
       </div>
       <p class="text-[11px] text-slate-400">
-        Enables the "Add to Slack" OAuth flow. Without it, workspaces can still connect Slack by
-        pasting a bot token.
+        {{ t('layout.accountDeployment.slack.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-        <UInput v-model="slack.clientId" placeholder="Client ID" size="sm" />
+        <UInput
+          v-model="slack.clientId"
+          :placeholder="t('layout.accountDeployment.slack.clientId')"
+          size="sm"
+        />
         <UInput
           v-model="slack.clientSecret"
           type="password"
-          placeholder="Client secret"
+          :placeholder="t('layout.accountDeployment.slack.clientSecret')"
+          size="sm"
+        />
+        <UInput
+          v-model="slack.redirectUrl"
+          :placeholder="t('layout.accountDeployment.slack.redirectUrl')"
           size="sm"
         />
-        <UInput v-model="slack.redirectUrl" placeholder="Redirect URL" size="sm" />
       </div>
       <div class="flex gap-2">
         <UButton
@@ -173,7 +314,7 @@ async function clearWeb() {
           :loading="savingSlack"
           @click="saveSlack"
         >
-          Save
+          {{ t('common.save') }}
         </UButton>
         <UButton
           v-if="summary?.slackOAuthConfigured"
@@ -183,7 +324,7 @@ async function clearWeb() {
           :loading="savingSlack"
           @click="clearSlack"
         >
-          Clear
+          {{ t('layout.accountDeployment.clear') }}
         </UButton>
       </div>
     </section>
@@ -191,22 +332,36 @@ async function clearWeb() {
     <!-- Web search keys -->
     <section 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">Container web search</h4>
+        <h4 class="text-sm font-semibold text-slate-200">
+          {{ t('layout.accountDeployment.web.title') }}
+        </h4>
         <UBadge :color="summary?.webSearch ? 'success' : 'neutral'" variant="subtle" size="xs">
-          {{ summary?.webSearch ? `Configured (${summary.webSearch})` : 'Not set' }}
+          {{
+            summary?.webSearch
+              ? t('layout.accountDeployment.web.configured', { provider: summary.webSearch })
+              : t('layout.accountDeployment.notSet')
+          }}
         </UBadge>
       </div>
       <p class="text-[11px] text-slate-400">
-        The search upstream container agents reach through the backend proxy. Set a Brave key
-        (recommended), or a self-hosted SearXNG URL (with an optional bearer key).
+        {{ t('layout.accountDeployment.web.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-        <UInput v-model="web.braveApiKey" type="password" placeholder="Brave API key" size="sm" />
-        <UInput v-model="web.searxngUrl" placeholder="SearXNG URL" size="sm" />
+        <UInput
+          v-model="web.braveApiKey"
+          type="password"
+          :placeholder="t('layout.accountDeployment.web.braveKey')"
+          size="sm"
+        />
+        <UInput
+          v-model="web.searxngUrl"
+          :placeholder="t('layout.accountDeployment.web.searxngUrl')"
+          size="sm"
+        />
         <UInput
           v-model="web.searxngApiKey"
           type="password"
-          placeholder="SearXNG key (optional)"
+          :placeholder="t('layout.accountDeployment.web.searxngKey')"
           size="sm"
         />
       </div>
@@ -218,7 +373,7 @@ async function clearWeb() {
           :loading="savingWeb"
           @click="saveWeb"
         >
-          Save
+          {{ t('common.save') }}
         </UButton>
         <UButton
           v-if="summary?.webSearch"
@@ -228,7 +383,122 @@ async function clearWeb() {
           :loading="savingWeb"
           @click="clearWeb"
         >
-          Clear
+          {{ t('layout.accountDeployment.clear') }}
+        </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>

package/app/components/layout/AccountFragmentSettings.vue

@@ -8,6 +8,7 @@ import FragmentLibraryManager from '~/components/fragments/FragmentLibraryManage
 
 const props = defineProps<{ accountId: string }>()
 const workspace = useWorkspaceStore()
+const { t } = useI18n()
 
 // Account-tier document fragments are fetched through a board's stored
 // document-source connection (credentials are per-workspace). Prefer the active
@@ -22,9 +23,7 @@ const viaWorkspaceId = computed(() => {
   <div class="space-y-6 text-sm">
     <section>
       <p class="mb-3 text-[11px] text-slate-400">
-        Best-practice guidelines shared by every board in this account. Each board inherits these
-        and can override or add its own. Code-aware agents (coder, reviewer, architect, fixers) fold
-        the relevant ones into their prompt.
+        {{ t('layout.accountFragments.intro') }}
       </p>
       <FragmentLibraryManager
         kind="account"