@cat-factory/app 0.54.4 → 0.56.0

package/app/components/tasks/ContextIssuePicker.vue

@@ -203,12 +203,12 @@ onMounted(() => {
         v-for="row in importedRows"
         :key="`imp:${row.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickImported(row)"
       >
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
         <span class="truncate">{{ row.externalId }} · {{ row.title }}</span>
-        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">{{
+        <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
           t('tasks.picker.imported')
         }}</UBadge>
       </button>
@@ -218,12 +218,12 @@ onMounted(() => {
         v-for="r in searchRows"
         :key="`hit:${r.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickSearch(r)"
       >
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
         <span class="truncate">{{ r.externalId }} · {{ r.title }}</span>
-        <UBadge v-if="r.status" color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">
+        <UBadge v-if="r.status" color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
           {{ r.status }}
         </UBadge>
       </button>
@@ -232,7 +232,7 @@ onMounted(() => {
       <button
         v-if="refRow"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickRef(refRow)"
       >
         <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />

package/app/components/tasks/TaskContextIssues.vue

@@ -79,7 +79,7 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
           class="h-3.5 w-3.5 shrink-0 text-indigo-400"
         />
         <span class="truncate">{{ task.externalId }} · {{ task.title }}</span>
-        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">
+        <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">
           {{ task.status }}
         </UBadge>
       </a>

package/app/components/tasks/TaskImportModal.vue

@@ -331,7 +331,7 @@ async function doSpawnEpic() {
           >
             <button
               type="button"
-              class="min-w-0 flex-1 text-left disabled:cursor-not-allowed disabled:opacity-60"
+              class="min-w-0 flex-1 text-start disabled:cursor-not-allowed disabled:opacity-60"
               :disabled="!containerId"
               :title="
                 containerId

package/app/components/testing/TestReportWindow.vue

@@ -381,7 +381,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   </span>
                   <span
                     v-if="infraSetup.durationMs != null"
-                    class="ml-auto text-[11px] text-slate-500"
+                    class="ms-auto text-[11px] text-slate-500"
                   >
                     {{
                       t('testing.standup.took', {
@@ -484,7 +484,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                           : t('testing.fixerTimeline.failed')
                       }}
                     </UBadge>
-                    <span class="ml-auto text-[11px] text-slate-500">{{
+                    <span class="ms-auto text-[11px] text-slate-500">{{
                       d(new Date(a.at), 'short')
                     }}</span>
                   </div>
@@ -541,7 +541,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   class="overflow-hidden rounded-lg border border-slate-800 bg-slate-900/60"
                 >
                   <button
-                    class="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-slate-800/40"
+                    class="flex w-full items-center gap-2 px-3 py-2 text-start hover:bg-slate-800/40"
                     @click="toggle(g.key)"
                   >
                     <UIcon
@@ -584,7 +584,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                     </span>
                   </button>
 
-                  <div v-if="!collapsed.has(g.key)" class="space-y-1 px-3 pb-3 pl-9">
+                  <div v-if="!collapsed.has(g.key)" class="space-y-1 px-3 pb-3 ps-9">
                     <!-- Outcomes -->
                     <div
                       v-for="(o, oi) in g.outcomes"
@@ -710,7 +710,7 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
 
           <!-- Sidebar: metadata -->
           <aside
-            class="hidden w-60 shrink-0 flex-col gap-4 border-l border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+            class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
           >
             <div v-if="report">
               <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -315,7 +315,7 @@ const canApprove = computed(
                   type="file"
                   accept="image/png,image/jpeg"
                   :disabled="busy || !uploadView.trim()"
-                  class="text-[12px] text-slate-300 file:mr-2 file:rounded file:border-0 file:bg-slate-800 file:px-2 file:py-1 file:text-slate-200 disabled:opacity-40"
+                  class="text-[12px] text-slate-300 file:me-2 file:rounded file:border-0 file:bg-slate-800 file:px-2 file:py-1 file:text-slate-200 disabled:opacity-40"
                   @change="onFilePicked"
                 />
               </div>
@@ -378,7 +378,7 @@ const canApprove = computed(
                       t('visualConfirm.history.fixRequested')
                     }}</span>
                     <span
-                      class="ml-1.5 rounded px-1 text-[10px] uppercase"
+                      class="ms-1.5 rounded px-1 text-[10px] uppercase"
                       :class="
                         r.outcome === 'completed'
                           ? 'bg-emerald-500/15 text-emerald-300'

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/pages/index.vue

@@ -243,7 +243,7 @@ watch(
         <!-- z-30 keeps the trigger above the centered BoardToolbar (z-20), whose
              max-width can otherwise reach this corner on the narrowest viewports. -->
         <UButton
-          class="absolute left-3 top-3 z-30 lg:hidden"
+          class="absolute start-3 top-3 z-30 lg:hidden"
           icon="i-lucide-menu"
           color="neutral"
           variant="soft"

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/i18n.config.ts

@@ -61,6 +61,11 @@ export default defineI18nConfig(() => ({
       currency: { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' },
       percent: { style: 'percent', maximumFractionDigits: 1 },
     },
+    he: {
+      decimal: { style: 'decimal' },
+      currency: { style: 'currency', currency: 'USD', currencyDisplay: 'narrowSymbol' },
+      percent: { style: 'percent', maximumFractionDigits: 1 },
+    },
   },
   datetimeFormats: {
     en: {
@@ -83,5 +88,9 @@ export default defineI18nConfig(() => ({
       short: { dateStyle: 'medium' },
       long: { dateStyle: 'long', timeStyle: 'short' },
     },
+    he: {
+      short: { dateStyle: 'medium' },
+      long: { dateStyle: 'long', timeStyle: 'short' },
+    },
   },
 }))

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"
       }
     }
   },

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"
       }
     }
   },