@cat-factory/app 0.46.3 → 0.46.4

package/README.md

@@ -35,7 +35,7 @@ over the WebSocket. How that sync works is written up in
 
 - **Nuxt 4 / Vue 3** SPA — single route (`pages/index.vue`).
 - **Pinia** (+ `pinia-plugin-persistedstate`) — feature stores.
-- **Vue Flow** (`core`, `background`, `controls`, `minimap`, `node-resizer`) — the canvas.
+- **Vue Flow** (`core`, `background`, `controls`, `node-resizer`) — the canvas.
 - **Nuxt UI** + Tailwind — components and styling.
 - **VueUse** — composable utilities.
 - Lint/format via **oxlint** + **oxfmt**; tests via **vitest** + **happy-dom**.

package/app/assets/css/main.css

@@ -31,6 +31,16 @@ body {
   background-color: var(--board-bg);
 }
 
+/* Touch: let the pane own one-finger pan + pinch-zoom rather than the browser
+ * treating the drag as a page scroll (which fires `pointercancel` and aborts the
+ * gesture mid-flight). The board is full-screen with `body { overflow: hidden }`,
+ * so there is nothing to scroll away anyway. The custom drag/resize/connect handles
+ * set their own `touch-action: none` (Tailwind `touch-none`) so a handle drag is
+ * likewise never stolen by the browser. */
+.vue-flow__pane {
+  touch-action: none;
+}
+
 /* Status-pulse used by blocked / decision-needed blocks */
 @keyframes board-pulse {
   0%,

package/app/components/board/BoardCanvas.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { VueFlow, useVueFlow, type NodeMouseEvent } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
-import { MiniMap } from '@vue-flow/minimap'
 import BlockNode from './nodes/BlockNode.vue'
 import EpicNode from './nodes/EpicNode.vue'
 import TaskDependencyEdges from './TaskDependencyEdges.vue'
 import DependencyConnectOverlay from './DependencyConnectOverlay.vue'
-import { STATUS_META } from '~/utils/catalog'
 import { readDndPayload, blockIdFromEvent } from '~/utils/dnd'
 import { BOARD_FLOW_ID } from '~/composables/useBoardFlow'
 import { useTaskExpansion } from '~/composables/useTaskExpansion'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameStacking } from '~/composables/useFrameStacking'
+import { useViewport } from '~/composables/useViewport'
+import { boardPanMode } from '~/utils/boardPanMode'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -23,6 +23,17 @@ const toast = useToast()
 const { onNodeDragStop, onViewportChange, screenToFlowCoordinate } = useVueFlow(BOARD_FLOW_ID)
 const { draggingId } = useBlockDrag()
 const { hoveredFrameId } = useFrameStacking()
+// Touch drives the canvas gestures: a touch-capable surface needs one-finger pan.
+// We gate on `hasTouch` (any-pointer: coarse), not `isTouch` (the *primary* pointer),
+// so a touchscreen laptop / 2-in-1 — whose primary pointer is the trackpad — still
+// gets finger-panning.
+const { hasTouch } = useViewport()
+
+// See `boardPanMode`: the button-array form ([0, 2]) silently blocks one-finger
+// touch panning (a touch `touchstart` has no `event.button`), so we widen it to
+// `true` on any touch-capable surface and keep the precise-pointer restriction on
+// pure-mouse desktops. Extracted as a pure helper so the fix has a unit guard.
+const panOnDrag = computed<boolean | number[]>(() => boardPanMode(hasTouch.value))
 
 // Gate which task cards expand their pipeline list on deep zoom: on-screen, and the
 // centre-most of any that would overlap (see useTaskExpansion). Service frames have no
@@ -97,11 +108,6 @@ function onPaneClick() {
   ui.select(null)
 }
 
-function minimapColor(node: { id: string }) {
-  const b = board.getBlock(node.id)
-  return b ? STATUS_META[board.frameStatus(b.id)].color : '#475569'
-}
-
 // ---- palette drag & drop onto the canvas ----------------------------------
 function onDragOver(event: DragEvent) {
   event.preventDefault()
@@ -166,7 +172,7 @@ async function onDrop(event: DragEvent) {
       :min-zoom="0.2"
       :max-zoom="3"
       :default-viewport="{ x: 40, y: 20, zoom: 0.85 }"
-      :pan-on-drag="[0, 2]"
+      :pan-on-drag="panOnDrag"
       :elevate-nodes-on-select="false"
       fit-view-on-init
       @node-click="onNodeClick"
@@ -175,7 +181,10 @@ async function onDrop(event: DragEvent) {
       @contextmenu.prevent
     >
       <Background pattern-color="#1e293b" :gap="22" :size="1.4" />
-      <MiniMap pannable zoomable :node-color="minimapColor" class="!bg-slate-900/80" />
+      <!-- No minimap: it's a precise-pointer affordance (too small to hit on touch,
+           eats scarce width on narrow windows) that earned its keep on neither
+           desktop nor mobile. The toolbar's zoom-in/out + fit-view controls are the
+           camera navigation on every viewport. -->
 
       <template #node-block="props">
         <BlockNode :id="props.id" />

package/app/components/board/nodes/BlockNode.vue

@@ -388,7 +388,7 @@ const ITEM_ICON: Record<string, string> = {
              falls through to the pane (the parent drops `space-y-3` to avoid doubling
              the gap). -->
         <div
-          class="nopan cursor-grab space-y-3 pb-3 active:cursor-grabbing"
+          class="nopan cursor-grab touch-none space-y-3 pb-3 active:cursor-grabbing"
           title="Drag service"
           @pointerdown="onFrameHandle"
         >
@@ -485,17 +485,17 @@ const ITEM_ICON: Record<string, string> = {
                `nopan` (alongside `nodrag`) so the pane doesn't pan while resizing —
                same reason as the header handle above. -->
           <div
-            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20 pointer-coarse:w-4"
+            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-sky-400/20 pointer-coarse:w-4"
             title="Drag to resize"
             @pointerdown="onResize($event, 'e')"
           />
           <div
-            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20 pointer-coarse:h-4"
+            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize touch-none hover:bg-sky-400/20 pointer-coarse:h-4"
             title="Drag to resize"
             @pointerdown="onResize($event, 's')"
           />
           <div
-            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize pointer-coarse:h-11 pointer-coarse:w-11"
+            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize touch-none pointer-coarse:h-11 pointer-coarse:w-11"
             title="Drag to resize"
             @pointerdown="onResize($event, 'se')"
           >

package/app/components/board/nodes/DraggableTask.vue

@@ -41,7 +41,7 @@ function onHandle(e: PointerEvent) {
     >
       <!-- drag handle (`nopan` so the pane doesn't pan on a left-drag from here) -->
       <div
-        class="nodrag nopan flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
+        class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
         title="Drag task"
         @pointerdown="onHandle"
       >

package/app/components/board/nodes/ModuleFrame.vue

@@ -50,7 +50,7 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
   >
     <!-- module header / drag handle (`nopan` so a left-drag moves it, not the pane) -->
     <div
-      class="nodrag nopan flex h-[30px] cursor-grab items-center gap-1 rounded-t-xl bg-violet-500/15 px-2 active:cursor-grabbing"
+      class="nodrag nopan flex h-[30px] cursor-grab touch-none items-center gap-1 rounded-t-xl bg-violet-500/15 px-2 active:cursor-grabbing"
       @pointerdown="onHandle"
       @click.stop="ui.select(moduleId)"
     >
@@ -76,17 +76,17 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
     <!-- resize handles (drag the borders to resize the module, Miro-style).
          `nopan` (with `nodrag`) so resizing doesn't pan the pane. -->
     <div
-      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20 pointer-coarse:w-4"
+      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-violet-400/20 pointer-coarse:w-4"
       title="Drag to resize"
       @pointerdown="onResize($event, 'e')"
     />
     <div
-      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20 pointer-coarse:h-4"
+      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize touch-none hover:bg-violet-400/20 pointer-coarse:h-4"
       title="Drag to resize"
       @pointerdown="onResize($event, 's')"
     />
     <div
-      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize pointer-coarse:h-11 pointer-coarse:w-11"
+      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize touch-none pointer-coarse:h-11 pointer-coarse:w-11"
       title="Drag to resize"
       @pointerdown="onResize($event, 'se')"
     >

package/app/components/board/nodes/TaskCard.vue

@@ -210,7 +210,7 @@ function selectTask() {
       <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
       <button
         type="button"
-        class="nodrag shrink-0 cursor-crosshair rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400 pointer-coarse:p-2.5"
+        class="nodrag shrink-0 cursor-crosshair touch-none rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400 pointer-coarse:p-2.5"
         title="Drag onto another task to make it depend on this one"
         @pointerdown.stop="startConnect(task.id, $event)"
         @click.stop

package/app/components/layout/BoardToolbar.vue

@@ -89,6 +89,7 @@ const decisionItems = computed(() =>
       color="neutral"
       variant="ghost"
       size="sm"
+      data-testid="board-zoom-out"
       @click="zoomOut()"
     />
     <!-- The zoom %/LOD readout is the first thing to drop on narrow viewports. -->
@@ -96,12 +97,20 @@ const decisionItems = computed(() =>
       {{ zoomPct }}%
       <div class="text-[9px] uppercase tracking-wide text-slate-500">{{ lodLabel }}</div>
     </div>
-    <UButton icon="i-lucide-zoom-in" color="neutral" variant="ghost" size="sm" @click="zoomIn()" />
+    <UButton
+      icon="i-lucide-zoom-in"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      data-testid="board-zoom-in"
+      @click="zoomIn()"
+    />
     <UButton
       icon="i-lucide-maximize"
       color="neutral"
       variant="ghost"
       size="sm"
+      data-testid="board-fit-view"
       @click="fitView({ padding: 0.2 })"
     />
 

package/app/composables/useViewport.ts

@@ -7,13 +7,22 @@ import { useBreakpoints, breakpointsTailwind, useMediaQuery } from '@vueuse/core
  * (1024px), matching the breakpoint the already-responsive surfaces use
  * (`AgentStepDetail`, the review windows) so the whole shell stays consistent.
  *
- * `isTouch` reports a coarse pointer (phones/tablets) so a component can enlarge
- * hit targets without affecting precise-pointer (mouse) desktops — orthogonal to
- * width, since a small window on a desktop is compact but not touch.
+ * `isTouch` reports that the *primary* pointer is coarse (phones/tablets) so a
+ * component can enlarge hit targets without affecting precise-pointer (mouse)
+ * desktops — orthogonal to width, since a small window on a desktop is compact but
+ * not touch.
+ *
+ * `hasTouch` reports that *any* available pointer is coarse. It is the right check
+ * for "can this surface be touched at all" — e.g. a touchscreen laptop or a
+ * 2-in-1, whose *primary* pointer is the trackpad (`fine`, so `isTouch` is false)
+ * but which can still be finger-panned. Use it for behaviour that must work the
+ * moment a finger is on the glass (the board's one-finger pan); use `isTouch` for
+ * the dominant-modality choices (hit-target sizing).
  */
 export function useViewport() {
   const breakpoints = useBreakpoints(breakpointsTailwind)
   const isCompact = breakpoints.smaller('lg')
   const isTouch = useMediaQuery('(pointer: coarse)')
-  return { isCompact, isTouch }
+  const hasTouch = useMediaQuery('(any-pointer: coarse)')
+  return { isCompact, isTouch, hasTouch }
 }

package/app/utils/boardPanMode.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { boardPanMode } from './boardPanMode'
+
+describe('boardPanMode', () => {
+  it('widens to `true` when the surface can be touched (one-finger pan)', () => {
+    // The whole point of the fix: a touch `touchstart` has no `event.button`, so the
+    // `[0, 2]` button list rejects it and single-finger panning is dead. `true` is the
+    // only form Vue Flow's d3-zoom filter accepts for a button-less touch.
+    expect(boardPanMode(true)).toBe(true)
+  })
+
+  it('keeps the precise-pointer button list (left/right-drag, never middle) on mouse', () => {
+    expect(boardPanMode(false)).toEqual([0, 2])
+    // Middle-drag (button 1) must never pan.
+    expect(boardPanMode(false)).not.toContain(1)
+  })
+})

package/app/utils/boardPanMode.ts

@@ -0,0 +1,20 @@
+/**
+ * Pure decision for Vue Flow's `pan-on-drag` prop on the board canvas.
+ *
+ * Vue Flow's d3-zoom filter restricts panning to the mouse buttons listed in the
+ * array form: a `pointerdown`/`touchstart` whose `event.button` isn't in the list is
+ * rejected. A touch `touchstart` carries no `event.button` (it's `undefined`), so the
+ * precise-pointer button list `[0, 2]` (left/right-drag, never middle) silently blocks
+ * one-finger panning — the touchstart never matches a listed button.
+ *
+ * So when the surface can be touched at all we widen the prop to `true` (any pointer
+ * pans the pane; pinch-zoom stays on by default), and otherwise keep the
+ * precise-pointer button restriction for mouse desktops. This is split out as a pure
+ * function so the headline touch-pan fix has a non-flaky unit guard — driving real
+ * touch gestures through the canvas is explicitly out of scope for the e2e suite.
+ *
+ * @param canTouch whether any available pointer is coarse (see `useViewport().hasTouch`)
+ */
+export function boardPanMode(canTouch: boolean): true | number[] {
+  return canTouch ? true : [0, 2]
+}

package/nuxt.config.ts

@@ -77,7 +77,6 @@ export default defineNuxtConfig({
   css: [
     '@vue-flow/core/dist/style.css',
     '@vue-flow/core/dist/theme-default.css',
-    '@vue-flow/minimap/dist/style.css',
     '@vue-flow/node-resizer/dist/style.css',
     join(layerDir, 'app/assets/css/main.css'),
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.46.3",
+  "version": "0.46.4",
   "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",
@@ -26,7 +26,6 @@
     "@toad-contracts/valibot": "0.3.1",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/core": "^1.48.2",
-    "@vue-flow/minimap": "^1.5.4",
     "@vue-flow/node-resizer": "^1.5.1",
     "@vueuse/core": "^14.3.0",
     "markdown-it": "^14.2.0",