@cat-factory/app 0.96.4 → 0.97.0

package/app/components/board/BoardCanvas.vue

@@ -6,7 +6,7 @@ import EpicNode from './nodes/EpicNode.vue'
 import TaskDependencyEdges from './TaskDependencyEdges.vue'
 import DependencyConnectOverlay from './DependencyConnectOverlay.vue'
 import { readDndPayload, blockIdFromEvent } from '~/utils/dnd'
-import { BOARD_FLOW_ID } from '~/composables/useBoardFlow'
+import { BOARD_FLOW_ID, BOARD_MIN_ZOOM, BOARD_MAX_ZOOM } from '~/composables/useBoardFlow'
 import { useTaskExpansion } from '~/composables/useTaskExpansion'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameStacking } from '~/composables/useFrameStacking'
@@ -102,9 +102,20 @@ function onNodeClick({ node }: NodeMouseEvent) {
   ui.select(node.id)
 }
 
-function onNodeDoubleClick({ node }: NodeMouseEvent) {
-  // Frames are containers: double-click expands to reveal their tasks.
-  ui.toggleFrame(node.id)
+function onNodeDoubleClick({ event, node }: NodeMouseEvent) {
+  // Task cards live *inside* their frame node, so Vue Flow reports the frame here even
+  // when the double-click landed on a task. Resolve the real target from the DOM: a
+  // double-click on a task opens its focus view (the same "open this task" gesture as the
+  // card's review action), while a double-click on frame chrome centres the camera on the
+  // frame and zooms it in. Epics aren't containers, so their double-click stays a no-op.
+  const targetId = blockIdFromEvent(event)
+  const target = targetId ? board.getBlock(targetId) : undefined
+  if (target?.level === 'task') {
+    ui.select(target.id)
+    ui.focus(target.id)
+    return
+  }
+  if (node.type === 'block') void focusFrame(node.id)
 }
 
 function onPaneClick() {
@@ -147,7 +158,17 @@ async function onDrop(event: DragEvent) {
     const blockId = blockIdFromEvent(event)
     const target = blockId ? board.getBlock(blockId) : undefined
     const pipeline = pipelines.getPipeline(payload.pipelineId)
-    if (!target || !pipeline) return
+    // Unknown pipeline id is an internal glitch (nothing the user can act on); a drop
+    // onto blank canvas / a non-block, though, needs the same "aim at a task" nudge the
+    // wrong-level path gives — otherwise the drop just vanishes (UX-07).
+    if (!pipeline) return
+    if (!target) {
+      toast.add({
+        title: t('board.canvas.dropOntoTaskTitle'),
+        description: t('board.canvas.dropOntoTaskBody'),
+      })
+      return
+    }
     if (target.level !== 'task') {
       toast.add({
         title: t('board.canvas.dropOntoTaskTitle'),
@@ -179,8 +200,8 @@ async function onDrop(event: DragEvent) {
     <VueFlow
       :id="BOARD_FLOW_ID"
       :nodes="nodes"
-      :min-zoom="0.2"
-      :max-zoom="3"
+      :min-zoom="BOARD_MIN_ZOOM"
+      :max-zoom="BOARD_MAX_ZOOM"
       :default-viewport="{ x: 40, y: 20, zoom: 0.85 }"
       :pan-on-drag="panOnDrag"
       :elevate-nodes-on-select="false"

package/app/components/layout/BoardToolbar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useBoardFlow } from '~/composables/useBoardFlow'
+import { useBoardFlow, BOARD_MIN_ZOOM, BOARD_MAX_ZOOM } from '~/composables/useBoardFlow'
 import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -10,7 +11,7 @@ const workspaceSettings = useWorkspaceSettingsStore()
 const services = useServicesStore()
 const toast = useToast()
 const { t, n } = useI18n()
-const { fitView, zoomIn, zoomOut } = useBoardFlow()
+const { fitView, zoomIn, zoomOut, resetZoom } = useBoardFlow()
 
 async function mountService(serviceId: string, title: string) {
   try {
@@ -44,6 +45,10 @@ const mountableItems = computed(() =>
 )
 
 const zoomPct = computed(() => Math.round(ui.zoom * 100))
+// Disable the zoom buttons once the camera hits a clamp (Vue Flow pins the zoom exactly
+// at the limit, so a small epsilon guards against float drift). UX-16.
+const atMinZoom = computed(() => ui.zoom <= BOARD_MIN_ZOOM + 0.001)
+const atMaxZoom = computed(() => ui.zoom >= BOARD_MAX_ZOOM - 0.001)
 // Exhaustive (tier-2) map from level-of-detail → its label key, so adding an LOD
 // without a label fails the typecheck rather than leaking a raw key.
 const LOD_LABEL_KEYS = {
@@ -99,11 +104,13 @@ const decisionItems = computed(() =>
     class="absolute left-1/2 top-3 z-20 flex max-w-[calc(100vw-1rem)] -translate-x-1/2 items-center gap-1 overflow-x-auto rounded-full border border-slate-700 bg-slate-900/90 px-2 py-1.5 shadow-xl backdrop-blur"
   >
     <!-- zoom controls -->
-    <UButton
+    <IconButton
+      :label="t('board.toolbar.zoomOut')"
       icon="i-lucide-zoom-out"
       color="neutral"
       variant="ghost"
       size="sm"
+      :disabled="atMinZoom"
       data-testid="board-zoom-out"
       @click="
         () => {
@@ -111,16 +118,28 @@ const decisionItems = computed(() =>
         }
       "
     />
-    <!-- The zoom %/LOD readout is the first thing to drop on narrow viewports. -->
-    <div class="hidden w-20 text-center text-xs tabular-nums text-slate-300 sm:block">
+    <!-- Click the readout to snap back to 100%. Always visible (only the LOD sub-label
+         drops on narrow viewports) so the zoom level is never a mystery. -->
+    <button
+      type="button"
+      class="w-16 rounded text-center text-xs tabular-nums text-slate-300 hover:bg-slate-800 focus-visible:ring-2 focus-visible:ring-slate-400/60 sm:w-20"
+      :title="t('board.toolbar.resetZoom')"
+      :aria-label="t('board.toolbar.resetZoom')"
+      data-testid="board-zoom-reset"
+      @click="resetZoom()"
+    >
       {{ zoomPct }}%
-      <div class="text-[9px] uppercase tracking-wide text-slate-500">{{ lodLabel }}</div>
-    </div>
-    <UButton
+      <span class="hidden text-[9px] uppercase tracking-wide text-slate-500 sm:block">{{
+        lodLabel
+      }}</span>
+    </button>
+    <IconButton
+      :label="t('board.toolbar.zoomIn')"
       icon="i-lucide-zoom-in"
       color="neutral"
       variant="ghost"
       size="sm"
+      :disabled="atMaxZoom"
       data-testid="board-zoom-in"
       @click="
         () => {
@@ -128,7 +147,8 @@ const decisionItems = computed(() =>
         }
       "
     />
-    <UButton
+    <IconButton
+      :label="t('board.toolbar.fitView')"
       icon="i-lucide-maximize"
       color="neutral"
       variant="ghost"

package/app/composables/useBoardFlow.ts

@@ -4,8 +4,15 @@ import { useVueFlow } from '@vue-flow/core'
  * useVueFlow() from anywhere (e.g. the toolbar) accesses the same instance. */
 export const BOARD_FLOW_ID = 'board'
 
+/** Camera zoom clamps — the single source of truth shared by the canvas (which passes
+ * them to <VueFlow>) and the toolbar (which disables its zoom buttons at the limits). */
+export const BOARD_MIN_ZOOM = 0.2
+export const BOARD_MAX_ZOOM = 3
+
 /** Camera controls for the main board, usable outside the canvas component. */
 export function useBoardFlow() {
-  const { fitView, zoomIn, zoomOut, viewport } = useVueFlow(BOARD_FLOW_ID)
-  return { fitView, zoomIn, zoomOut, viewport }
+  const { fitView, zoomIn, zoomOut, zoomTo, viewport } = useVueFlow(BOARD_FLOW_ID)
+  /** Snap the camera back to 100% zoom (keeps the current centre). */
+  const resetZoom = () => zoomTo(1, { duration: 250 })
+  return { fitView, zoomIn, zoomOut, zoomTo, resetZoom, viewport }
 }

package/app/composables/usePipelineErrorToast.ts

@@ -48,6 +48,7 @@ const CONFLICT_TITLE_KEYS: Record<
   provision_type_unhandled: 'errors.conflict.title.provision_type_unhandled',
   preset_unsatisfiable: 'errors.conflict.title.preset_unsatisfiable',
   visual_pipeline_no_frontend: 'errors.conflict.title.visual_pipeline_no_frontend',
+  deployer_required_before_tester: 'errors.conflict.title.deployer_required_before_tester',
 }
 
 /**

package/app/utils/catalog.ts

@@ -346,6 +346,18 @@ export const SYSTEM_AGENT_META: Record<string, AgentArchetype> = {
     color: '#22d3ee',
     description: 'Maps the repository into the service → modules blueprint.',
   },
+  // The single environment provisioner: an operational (non-LLM) step that stands up the ephemeral
+  // environment the tester / human-test gate run against for a kubernetes/custom service, and is a
+  // fast no-op for docker-compose / infraless. Seeded before the first tester/human-test step in the
+  // built-in pipelines, so it needs display metadata (else it renders as a generic gray "Agent").
+  deployer: {
+    kind: 'deployer',
+    label: 'Deployer',
+    icon: 'i-lucide-cloud-upload',
+    color: '#34d399',
+    description:
+      'Provisions the ephemeral environment the tester and human-test gate run against (kubernetes / custom services); a no-op for docker-compose / infraless.',
+  },
   // The Initiative Planning pipeline's two steps. Only runnable on an initiative
   // block (pl_initiative — enforced by the engine), so they are display-metadata
   // system kinds, never palette archetypes.

package/app/utils/dnd.ts

@@ -22,8 +22,9 @@ export function readDndPayload(event: DragEvent): DndPayload | null {
   }
 }
 
-/** Walk up from the drop target to find the block it landed on, if any. */
-export function blockIdFromEvent(event: DragEvent): string | null {
+/** Walk up from an event's target to find the block it landed on, if any. Works for any
+ * DOM event (drop, double-click, …) — only `event.target` is read. */
+export function blockIdFromEvent(event: Event): string | null {
   const el = (event.target as HTMLElement | null)?.closest('[data-block-id]')
   return el?.getAttribute('data-block-id') ?? null
 }

package/i18n/locales/en.json

@@ -126,7 +126,11 @@
       "spendTitle": "Token spend this month",
       "spendLimitReached": "Spend limit reached — runs paused",
       "serviceAdded": "Added {title}",
-      "serviceAddFailed": "Could not add service"
+      "serviceAddFailed": "Could not add service",
+      "zoomOut": "Zoom out",
+      "zoomIn": "Zoom in",
+      "fitView": "Fit board to content",
+      "resetZoom": "Reset zoom to 100%"
     },
     "canvas": {
       "emptyTitle": "Your board is empty",
@@ -424,7 +428,8 @@
         "bootstrap_reference_missing": "Reference architecture is gone",
         "provision_type_unhandled": "No handler for this provision type",
         "preset_unsatisfiable": "Model preset can't run this pipeline",
-        "visual_pipeline_no_frontend": "No frontend to test"
+        "visual_pipeline_no_frontend": "No frontend to test",
+        "deployer_required_before_tester": "Add a Deployer before the Tester"
       },
       "fallbackMessage": "This action conflicts with the current state.",
       "providersUnconfigured": {

package/i18n/locales/es.json

@@ -108,7 +108,11 @@
       "spendTitle": "Gasto de tokens este mes",
       "spendLimitReached": "Límite de gasto alcanzado: ejecuciones en pausa",
       "serviceAdded": "Se añadió {title}",
-      "serviceAddFailed": "No se pudo añadir el servicio"
+      "serviceAddFailed": "No se pudo añadir el servicio",
+      "zoomOut": "Alejar",
+      "zoomIn": "Acercar",
+      "fitView": "Ajustar al contenido",
+      "resetZoom": "Restablecer zoom al 100%"
     },
     "canvas": {
       "emptyTitle": "Tu tablero está vacío",
@@ -387,7 +391,8 @@
         "bootstrap_not_retryable": "La inicialización no se puede reintentar",
         "bootstrap_reference_missing": "La arquitectura de referencia ha desaparecido",
         "preset_unsatisfiable": "El preajuste de modelo no puede ejecutar esta canalización",
-        "visual_pipeline_no_frontend": "No hay frontend que probar"
+        "visual_pipeline_no_frontend": "No hay frontend que probar",
+        "deployer_required_before_tester": "Añade un Deployer antes del Tester"
       },
       "fallbackMessage": "Esta acción entra en conflicto con el estado actual.",
       "providersUnconfigured": {

package/i18n/locales/fr.json

@@ -108,7 +108,11 @@
       "spendTitle": "Dépense de tokens ce mois-ci",
       "spendLimitReached": "Limite de dépense atteinte : exécutions en pause",
       "serviceAdded": "{title} ajouté",
-      "serviceAddFailed": "Impossible d’ajouter le service"
+      "serviceAddFailed": "Impossible d’ajouter le service",
+      "zoomOut": "Dézoomer",
+      "zoomIn": "Zoomer",
+      "fitView": "Ajuster au contenu",
+      "resetZoom": "Réinitialiser le zoom à 100 %"
     },
     "canvas": {
       "emptyTitle": "Votre tableau est vide",
@@ -387,7 +391,8 @@
         "bootstrap_not_retryable": "L’initialisation ne peut pas être relancée",
         "bootstrap_reference_missing": "L’architecture de référence a disparu",
         "preset_unsatisfiable": "Le préréglage de modèle ne peut pas exécuter ce pipeline",
-        "visual_pipeline_no_frontend": "Aucun frontend à tester"
+        "visual_pipeline_no_frontend": "Aucun frontend à tester",
+        "deployer_required_before_tester": "Ajoutez un Deployer avant le Testeur"
       },
       "fallbackMessage": "Cette action est en conflit avec l’état actuel.",
       "providersUnconfigured": {

package/i18n/locales/he.json

@@ -108,7 +108,11 @@
       "spendTitle": "צריכת טוקנים החודש",
       "spendLimitReached": "הוגעה למגבלת הצריכה — הריצות הושהו",
       "serviceAdded": "{title} נוסף",
-      "serviceAddFailed": "לא ניתן היה להוסיף את השירות"
+      "serviceAddFailed": "לא ניתן היה להוסיף את השירות",
+      "zoomOut": "הקטנה",
+      "zoomIn": "הגדלה",
+      "fitView": "התאמה לתוכן",
+      "resetZoom": "איפוס התקריב ל-100%"
     },
     "canvas": {
       "emptyTitle": "הלוח שלך ריק",
@@ -387,7 +391,8 @@
         "bootstrap_not_retryable": "לא ניתן להריץ מחדש את האתחול",
         "bootstrap_reference_missing": "ארכיטקטורת ההפניה נעלמה",
         "preset_unsatisfiable": "קדם‑הגדרת המודל אינה יכולה להריץ צנרת זו",
-        "visual_pipeline_no_frontend": "אין frontend לבדיקה"
+        "visual_pipeline_no_frontend": "אין frontend לבדיקה",
+        "deployer_required_before_tester": "הוסף Deployer לפני ה-Tester"
       },
       "fallbackMessage": "פעולה זו מתנגשת עם המצב הנוכחי.",
       "providersUnconfigured": {

package/i18n/locales/ja.json

@@ -108,7 +108,11 @@
       "spendTitle": "今月のトークン消費量",
       "spendLimitReached": "消費上限に達しました。実行を一時停止しています",
       "serviceAdded": "{title} を追加しました",
-      "serviceAddFailed": "サービスを追加できませんでした"
+      "serviceAddFailed": "サービスを追加できませんでした",
+      "zoomOut": "縮小",
+      "zoomIn": "拡大",
+      "fitView": "内容に合わせる",
+      "resetZoom": "ズームを100%にリセット"
     },
     "canvas": {
       "emptyTitle": "ボードが空です",
@@ -387,7 +391,8 @@
         "bootstrap_not_retryable": "ブートストラップは再試行できません",
         "bootstrap_reference_missing": "リファレンスアーキテクチャが見つかりません",
         "preset_unsatisfiable": "モデルプリセットではこのパイプラインを実行できません",
-        "visual_pipeline_no_frontend": "テスト対象のフロントエンドがありません"
+        "visual_pipeline_no_frontend": "テスト対象のフロントエンドがありません",
+        "deployer_required_before_tester": "テスターの前にDeployerを追加してください"
       },
       "fallbackMessage": "この操作は現在の状態と競合します。",
       "providersUnconfigured": {

package/i18n/locales/pl.json

@@ -108,7 +108,11 @@
       "spendTitle": "Wydatki na tokeny w tym miesiącu",
       "spendLimitReached": "Osiągnięto limit wydatków: uruchomienia wstrzymane",
       "serviceAdded": "Dodano {title}",
-      "serviceAddFailed": "Nie udało się dodać usługi"
+      "serviceAddFailed": "Nie udało się dodać usługi",
+      "zoomOut": "Pomniejsz",
+      "zoomIn": "Powiększ",
+      "fitView": "Dopasuj do zawartości",
+      "resetZoom": "Zresetuj powiększenie do 100%"
     },
     "canvas": {
       "emptyTitle": "Twoja tablica jest pusta",
@@ -387,7 +391,8 @@
         "bootstrap_not_retryable": "Inicjalizacji nie można ponowić",
         "bootstrap_reference_missing": "Architektura referencyjna zniknęła",
         "preset_unsatisfiable": "Ten zestaw modeli nie może uruchomić tego potoku",
-        "visual_pipeline_no_frontend": "Brak frontendu do przetestowania"
+        "visual_pipeline_no_frontend": "Brak frontendu do przetestowania",
+        "deployer_required_before_tester": "Dodaj Deployer przed Testerem"
       },
       "fallbackMessage": "Ta akcja jest sprzeczna z bieżącym stanem.",
       "providersUnconfigured": {

package/i18n/locales/tr.json

@@ -108,7 +108,11 @@
       "spendTitle": "Bu ayki token harcaması",
       "spendLimitReached": "Harcama limitine ulaşıldı, çalıştırmalar duraklatıldı",
       "serviceAdded": "{title} eklendi",
-      "serviceAddFailed": "Servis eklenemedi"
+      "serviceAddFailed": "Servis eklenemedi",
+      "zoomOut": "Uzaklaştır",
+      "zoomIn": "Yakınlaştır",
+      "fitView": "İçeriğe sığdır",
+      "resetZoom": "Yakınlaştırmayı %100'e sıfırla"
     },
     "canvas": {
       "emptyTitle": "Panonuz boş",
@@ -387,7 +391,8 @@
         "bootstrap_not_retryable": "Bootstrap yeniden denenemiyor",
         "bootstrap_reference_missing": "Referans mimari kayıp",
         "preset_unsatisfiable": "Model ön ayarı bu ardışık düzeni çalıştıramıyor",
-        "visual_pipeline_no_frontend": "Test edilecek bir frontend yok"
+        "visual_pipeline_no_frontend": "Test edilecek bir frontend yok",
+        "deployer_required_before_tester": "Tester’dan önce bir Deployer ekleyin"
       },
       "fallbackMessage": "Bu eylem mevcut durumla çelişiyor.",
       "providersUnconfigured": {

package/i18n/locales/uk.json

@@ -108,7 +108,11 @@
       "spendTitle": "Витрати на токени цього місяця",
       "spendLimitReached": "Досягнуто ліміт витрат: запуски призупинено",
       "serviceAdded": "Додано {title}",
-      "serviceAddFailed": "Не вдалося додати сервіс"
+      "serviceAddFailed": "Не вдалося додати сервіс",
+      "zoomOut": "Зменшити",
+      "zoomIn": "Збільшити",
+      "fitView": "Вписати в область",
+      "resetZoom": "Скинути масштаб до 100%"
     },
     "canvas": {
       "emptyTitle": "Ваша дошка порожня",
@@ -387,7 +391,8 @@
         "bootstrap_not_retryable": "Ініціалізацію неможливо повторити",
         "bootstrap_reference_missing": "Еталонна архітектура зникла",
         "preset_unsatisfiable": "Пресет моделі не може запустити цей конвеєр",
-        "visual_pipeline_no_frontend": "Немає фронтенду для тестування"
+        "visual_pipeline_no_frontend": "Немає фронтенду для тестування",
+        "deployer_required_before_tester": "Додайте Deployer перед Tester"
       },
       "fallbackMessage": "Ця дія суперечить поточному стану.",
       "providersUnconfigured": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.96.4",
+  "version": "0.97.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.107.0"
+    "@cat-factory/contracts": "0.108.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",