@cat-factory/app 0.55.0 → 0.57.0

package/app/components/layout/AccountDeploymentSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import type { ContentStorageBackend, ContentStorageConfig } from '~/types/accountSettings'
 
 // Deployment integration secrets for an account (admin only): the Slack app OAuth
@@ -11,9 +11,30 @@ import type { ContentStorageBackend, ContentStorageConfig } from '~/types/accoun
 const props = defineProps<{ accountId: string }>()
 
 const store = useAccountSettingsStore()
+const ui = useUiStore()
 const toast = useToast()
 const { t } = useI18n()
 
+// Deep-link anchor: the pipeline-start "configure storage" prompt opens this tab with the
+// ui store's scroll target set to `content-storage`, so we bring the storage section (which
+// sits at the bottom of a long tab) into view once rather than leaving the user to hunt for
+// it. Scrolls after the section actually renders (it is gated on the async settings load).
+const storageSection = ref<HTMLElement | null>(null)
+async function maybeScrollToStorage() {
+  if (ui.accountSettingsScrollTarget !== 'content-storage') return
+  await nextTick()
+  const el = storageSection.value
+  if (!el) return
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  ui.clearAccountSettingsScrollTarget()
+}
+watch(
+  () => ui.accountSettingsScrollTarget,
+  () => {
+    void maybeScrollToStorage()
+  },
+)
+
 const slack = reactive({ clientId: '', clientSecret: '', redirectUrl: '' })
 const linear = reactive({ clientId: '', clientSecret: '', redirectUrl: '' })
 const web = reactive({ braveApiKey: '', searxngUrl: '', searxngApiKey: '' })
@@ -71,6 +92,9 @@ onMounted(async () => {
   try {
     await store.load(props.accountId)
     hydrateStorage()
+    // The storage section only renders once the settings load resolves, so attempt the
+    // deep-link scroll here (the up-front watcher misses the target set before mount).
+    void maybeScrollToStorage()
   } catch (e) {
     toast.add({
       title: t('layout.accountDeployment.loadFailed'),
@@ -508,7 +532,12 @@ async function clearWeb() {
     </section>
 
     <!-- Content storage (binary artifacts / screenshots) -->
-    <section v-if="storageCapability" class="space-y-2 border-t border-slate-800 pt-6">
+    <section
+      v-if="storageCapability"
+      id="content-storage"
+      ref="storageSection"
+      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') }}

package/app/components/settings/InfrastructureBackendPicker.vue

@@ -82,6 +82,12 @@ const K3S_KEYS = {
   label: 'settings.infrastructure.executionBackend.k3s',
   desc: 'settings.infrastructure.executionBackend.k3sDesc',
 }
+// The Docker Compose env backend is test-env-only (it stands the app's own compose stack up as
+// a Tester target). Its desc carries the actionable "when to use this" + the local-only caveat.
+const COMPOSE_KEYS = {
+  label: 'settings.infrastructure.testEnvBackend.compose',
+  desc: 'settings.infrastructure.testEnvBackend.composeDesc',
+}
 
 const cap = computed<{ available: BackendKind[]; active: BackendKind } | null>(() => {
   const c = auth.infrastructure?.[props.axis]
@@ -136,6 +142,8 @@ const effectiveActive = computed<BackendKind | null>(() => {
 function backendKindKeys(kind: string): { label: string; desc: string } | null {
   if (kind === 'kubernetes') return KUBERNETES_KEYS[props.axis]
   if (kind === 'manifest') return BUILTIN_KEYS[delegatedKind.value]
+  // Docker Compose only ever registers on the test-env axis (it's an EnvironmentProvider).
+  if (kind === 'compose' && props.axis === 'testEnv') return COMPOSE_KEYS
   return null
 }
 

package/app/composables/usePipelineErrorToast.ts

@@ -28,10 +28,14 @@ interface ConflictDetails {
  * fails THIS typecheck until it is mapped here. (The typed-message-keys feature can't see the
  * `t()` lookup because the key is resolved at runtime via this map, not written as a literal —
  * so the exhaustiveness of the map, not `t()`, is what makes a missing reason a build error.)
- * `providers_unconfigured` is excluded: it has bespoke handling + its own `providersUnconfigured.*`
- * key namespace, so it never reaches the generic lookup below.
+ * `providers_unconfigured` and `binary_storage_unconfigured` are excluded: each has bespoke
+ * handling (a "configure X" action) + its own key namespace, so neither reaches the generic
+ * lookup below.
  */
-const CONFLICT_TITLE_KEYS: Record<Exclude<ConflictReason, 'providers_unconfigured'>, string> = {
+const CONFLICT_TITLE_KEYS: Record<
+  Exclude<ConflictReason, 'providers_unconfigured' | 'binary_storage_unconfigured'>,
+  string
+> = {
   dependencies_unmet: 'errors.conflict.title.dependencies_unmet',
   task_limit_reached: 'errors.conflict.title.task_limit_reached',
   tester_infra_unsupported: 'errors.conflict.title.tester_infra_unsupported',
@@ -97,12 +101,41 @@ export function usePipelineErrorToast() {
       return
     }
 
+    // A pipeline step relies on binary-artifact storage (the UI Tester uploads screenshots)
+    // but the account has none configured. Explain it and offer the jump to the content-storage
+    // settings — the same shape as the providers-unconfigured case above. Prefer the localized
+    // body (it carries no runtime interpolation) so non-English users see translated copy; the
+    // raw backend prose is only the last-resort fallback when the locale lacks the key.
+    if (conflict?.reason === 'binary_storage_unconfigured') {
+      toast.add({
+        title: t('errors.conflict.binaryStorageUnconfigured.title'),
+        description: te('errors.conflict.binaryStorageUnconfigured.body')
+          ? t('errors.conflict.binaryStorageUnconfigured.body')
+          : (conflict.message ?? t('errors.conflict.fallbackMessage')),
+        color: 'error',
+        icon: 'i-lucide-image',
+        actions: [
+          {
+            label: t('errors.conflict.binaryStorageUnconfigured.action'),
+            icon: 'i-lucide-settings',
+            onClick: () => ui.openContentStorageSettings(),
+          },
+        ],
+      })
+      return
+    }
+
     if (conflict) {
       // Per-reason title key from the exhaustive map; fall back to the caller's title key when
       // this reason has no mapped/translated copy (`te` = translation-exists, so a key missing
       // in the active locale never leaks as raw text). An unknown reason isn't in the map.
       const reasonKey =
-        CONFLICT_TITLE_KEYS[conflict.reason as Exclude<ConflictReason, 'providers_unconfigured'>]
+        CONFLICT_TITLE_KEYS[
+          conflict.reason as Exclude<
+            ConflictReason,
+            'providers_unconfigured' | 'binary_storage_unconfigured'
+          >
+        ]
       toast.add({
         title: reasonKey && te(reasonKey) ? t(reasonKey) : t(fallbackTitleKey),
         description: conflict.message ?? t('errors.conflict.fallbackMessage'),

package/app/stores/ui.ts

@@ -121,6 +121,11 @@ export const useUiStore = defineStore('ui', () => {
   // straight to a tab.
   const accountSettingsOpen = ref(false)
   const accountSettingsTab = ref('team')
+  // A one-shot deep-link anchor: when a surface opens account settings AND wants to land on a
+  // specific section within the (long) tab body, it sets this to that section's id. The owning
+  // panel scrolls the matching element into view once, then calls `clearAccountSettingsScrollTarget`
+  // so a later plain open doesn't re-scroll. Null when no section was requested.
+  const accountSettingsScrollTarget = ref<string | null>(null)
   // Observability integration: the post-release-health connection panel (Datadog
   // today, pluggable). NB: distinct from `observabilityInstanceId` below, which is the
   // LLM per-call observability panel.
@@ -464,8 +469,21 @@ export const useUiStore = defineStore('ui', () => {
     accountSettingsTab.value = tab
     accountSettingsOpen.value = true
   }
+  // Deep-link to the content (binary-artifact) storage configuration, which lives near the
+  // bottom of the account settings' team tab (`AccountDeploymentSettings`). Used by the
+  // pipeline-start error prompt when a storage-reliant agent (the UI Tester) has no storage
+  // configured. Sets a scroll anchor so the panel brings the storage section into view rather
+  // than dropping the user at the top of the long team tab to hunt for it.
+  function openContentStorageSettings() {
+    accountSettingsScrollTarget.value = 'content-storage'
+    openAccountSettings('team')
+  }
+  function clearAccountSettingsScrollTarget() {
+    accountSettingsScrollTarget.value = null
+  }
   function closeAccountSettings() {
     accountSettingsOpen.value = false
+    accountSettingsScrollTarget.value = null
   }
   function setAccountSettingsTab(tab: string) {
     accountSettingsTab.value = tab
@@ -664,6 +682,7 @@ export const useUiStore = defineStore('ui', () => {
     workspaceSettingsTab,
     accountSettingsOpen,
     accountSettingsTab,
+    accountSettingsScrollTarget,
     observabilityConnectionOpen,
     infrastructureOpen,
     infrastructureTab,
@@ -739,6 +758,8 @@ export const useUiStore = defineStore('ui', () => {
     closeWorkspaceSettings,
     setWorkspaceSettingsTab,
     openAccountSettings,
+    openContentStorageSettings,
+    clearAccountSettingsScrollTarget,
     closeAccountSettings,
     setAccountSettingsTab,
     openObservabilityConnection,

package/i18n/locales/en.json

@@ -292,6 +292,11 @@
           "description": "Keep the named placeholder for the model list intact (a comma-separated list of model ids is injected at runtime)."
         },
         "action": "Configure AI"
+      },
+      "binaryStorageUnconfigured": {
+        "title": "No storage for this pipeline",
+        "body": "This pipeline includes an agent that needs binary storage (the UI Tester uploads its screenshots), but this account has no content storage configured. Configure content storage to run it.",
+        "action": "Configure storage"
       }
     }
   },
@@ -1287,12 +1292,14 @@
       },
       "testEnvBackend": {
         "label": "Where test environments run",
-        "local-compose": "In-container docker-compose",
-        "local-composeDesc": "Stand the Tester's dependencies up with docker-compose inside the run's container.",
+        "local-compose": "In-container docker-compose (Tester deps)",
+        "local-composeDesc": "Stand the Tester's dependencies up with docker-compose inside the run's container. For a full app preview env, use the Docker Compose preview env option below.",
         "kubernetes": "Kubernetes cluster",
-        "kubernetesDesc": "Provision a per-PR namespace in a Kubernetes cluster you operate.",
+        "kubernetesDesc": "Provision a per-PR namespace in a Kubernetes cluster you operate. Best for Kubernetes-native apps or when you already run a cluster.",
         "environment-provider": "Custom HTTP provider",
-        "environment-providerDesc": "Provision ephemeral environments through your own HTTP management API."
+        "environment-providerDesc": "Provision ephemeral environments through your own HTTP management API. Best when you already have bespoke preview-env tooling.",
+        "compose": "Docker Compose preview env",
+        "composeDesc": "Stand the repo's own docker-compose.yml up on a local Docker daemon as the Tester's URL. Best for local Compose-based apps. Image-based stacks only; needs a Docker daemon, so local deployments only."
       }
     },
     "providerConnection": {

package/i18n/locales/es.json

@@ -259,6 +259,11 @@
         "title": "No hay proveedor de IA para este modelo",
         "body": "No hay ningún proveedor configurado para {models}. Añade una clave de proveedor, conecta una suscripción o activa Cloudflare AI para ejecutarlo.",
         "action": "Configurar IA"
+      },
+      "binaryStorageUnconfigured": {
+        "title": "No hay almacenamiento para esta canalización",
+        "body": "Esta canalización incluye un agente que necesita almacenamiento binario (el probador de UI sube sus capturas de pantalla), pero esta cuenta no tiene almacenamiento de contenido configurado. Configura el almacenamiento de contenido para ejecutarla.",
+        "action": "Configurar almacenamiento"
       }
     }
   },

package/i18n/locales/fr.json

@@ -259,6 +259,11 @@
         "title": "Aucun fournisseur d’IA pour ce modèle",
         "body": "Aucun fournisseur n’est configuré pour {models}. Ajoutez une clé de fournisseur, connectez un abonnement ou activez Cloudflare AI pour l’exécuter.",
         "action": "Configurer l’IA"
+      },
+      "binaryStorageUnconfigured": {
+        "title": "Aucun stockage pour ce pipeline",
+        "body": "Ce pipeline inclut un agent qui a besoin d’un stockage binaire (le testeur d’UI téléverse ses captures d’écran), mais aucun stockage de contenu n’est configuré pour ce compte. Configurez le stockage de contenu pour l’exécuter.",
+        "action": "Configurer le stockage"
       }
     }
   },

package/i18n/locales/he.json

@@ -259,6 +259,11 @@
         "title": "אין ספק AI למודל זה",
         "body": "לא מוגדר ספק עבור {models}. הוסף מפתח ספק, חבר מנוי, או הפעל את Cloudflare AI כדי להריץ אותו.",
         "action": "הגדר AI"
+      },
+      "binaryStorageUnconfigured": {
+        "title": "אין אחסון לצינור הזה",
+        "body": "צינור זה כולל סוכן שזקוק לאחסון בינארי (בודק ה-UI מעלה את צילומי המסך שלו), אך לחשבון זה לא מוגדר אחסון תוכן. הגדר אחסון תוכן כדי להריץ אותו.",
+        "action": "הגדר אחסון"
       }
     }
   },

package/i18n/locales/pl.json

@@ -259,6 +259,11 @@
         "title": "Brak dostawcy AI dla tego modelu",
         "body": "Dla {models} nie skonfigurowano żadnego dostawcy. Dodaj klucz dostawcy, połącz subskrypcję lub włącz Cloudflare AI, aby go uruchomić.",
         "action": "Skonfiguruj AI"
+      },
+      "binaryStorageUnconfigured": {
+        "title": "Brak magazynu dla tego potoku",
+        "body": "Ten potok zawiera agenta, który wymaga magazynu binarnego (tester UI przesyła swoje zrzuty ekranu), ale to konto nie ma skonfigurowanego magazynu treści. Skonfiguruj magazyn treści, aby go uruchomić.",
+        "action": "Skonfiguruj magazyn"
       }
     }
   },

package/i18n/locales/uk.json

@@ -259,6 +259,11 @@
         "title": "Немає постачальника ШІ для цієї моделі",
         "body": "Для {models} не налаштовано жодного постачальника. Додайте ключ постачальника, підключіть підписку або увімкніть Cloudflare AI, щоб запустити її.",
         "action": "Налаштувати ШІ"
+      },
+      "binaryStorageUnconfigured": {
+        "title": "Немає сховища для цього конвеєра",
+        "body": "Цей конвеєр містить агента, якому потрібне бінарне сховище (тестувальник інтерфейсу завантажує свої знімки екрана), але для цього облікового запису не налаштовано сховище вмісту. Налаштуйте сховище вмісту, щоб запустити його.",
+        "action": "Налаштувати сховище"
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "valibot": "^1.4.2",
     "vue": "^3.5.39",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.57.0"
+    "@cat-factory/contracts": "0.58.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",