@cat-factory/app 0.96.4 → 0.96.5

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

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

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

package/i18n/locales/he.json

@@ -108,7 +108,11 @@
       "spendTitle": "צריכת טוקנים החודש",
       "spendLimitReached": "הוגעה למגבלת הצריכה — הריצות הושהו",
       "serviceAdded": "{title} נוסף",
-      "serviceAddFailed": "לא ניתן היה להוסיף את השירות"
+      "serviceAddFailed": "לא ניתן היה להוסיף את השירות",
+      "zoomOut": "הקטנה",
+      "zoomIn": "הגדלה",
+      "fitView": "התאמה לתוכן",
+      "resetZoom": "איפוס התקריב ל-100%"
     },
     "canvas": {
       "emptyTitle": "הלוח שלך ריק",

package/i18n/locales/ja.json

@@ -108,7 +108,11 @@
       "spendTitle": "今月のトークン消費量",
       "spendLimitReached": "消費上限に達しました。実行を一時停止しています",
       "serviceAdded": "{title} を追加しました",
-      "serviceAddFailed": "サービスを追加できませんでした"
+      "serviceAddFailed": "サービスを追加できませんでした",
+      "zoomOut": "縮小",
+      "zoomIn": "拡大",
+      "fitView": "内容に合わせる",
+      "resetZoom": "ズームを100%にリセット"
     },
     "canvas": {
       "emptyTitle": "ボードが空です",

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

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

package/i18n/locales/uk.json

@@ -108,7 +108,11 @@
       "spendTitle": "Витрати на токени цього місяця",
       "spendLimitReached": "Досягнуто ліміт витрат: запуски призупинено",
       "serviceAdded": "Додано {title}",
-      "serviceAddFailed": "Не вдалося додати сервіс"
+      "serviceAddFailed": "Не вдалося додати сервіс",
+      "zoomOut": "Зменшити",
+      "zoomIn": "Збільшити",
+      "fitView": "Вписати в область",
+      "resetZoom": "Скинути масштаб до 100%"
     },
     "canvas": {
       "emptyTitle": "Ваша дошка порожня",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.96.4",
+  "version": "0.96.5",
   "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",