@cat-factory/app 0.30.2 → 0.30.4

package/app/components/board/AddTaskModal.vue

@@ -372,7 +372,7 @@ async function add() {
 <template>
   <UModal v-model:open="open" title="Add a task">
     <template #body>
-      <div class="space-y-4">
+      <div class="space-y-4" data-testid="add-task-modal">
         <p v-if="container" class="text-xs text-slate-400">
           New task in <span class="font-medium text-slate-200">{{ container.title }}</span>
         </p>
@@ -411,6 +411,7 @@ async function add() {
           <UFormField label="Title" required>
             <UInput
               v-model="title"
+              data-testid="add-task-title"
               placeholder="What needs to be done?"
               autofocus
               class="w-full"
@@ -746,6 +747,7 @@ async function add() {
         <UButton color="neutral" variant="ghost" @click="ui.closeAddTask()">Cancel</UButton>
         <UButton
           color="primary"
+          data-testid="add-task-submit"
           :icon="isRecurring ? 'i-lucide-arrow-right' : 'i-lucide-plus'"
           :loading="saving"
           :disabled="!canAdd"

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

@@ -368,6 +368,7 @@ const ITEM_ICON: Record<string, string> = {
             }}</UBadge>
             <UButton
               class="nodrag"
+              data-testid="frame-add-task"
               size="xs"
               variant="ghost"
               color="neutral"
@@ -425,6 +426,7 @@ const ITEM_ICON: Record<string, string> = {
           <button
             v-if="!hasTasks"
             type="button"
+            data-testid="frame-add-task"
             class="absolute inset-4 flex items-center justify-center gap-1 rounded-lg border border-dashed border-slate-700 text-[11px] text-slate-500 hover:border-slate-500 hover:text-slate-300"
             @click.stop="addTask"
           >

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

@@ -4,9 +4,14 @@ import { useBlockDrag } from '~/composables/useBlockDrag'
 
 const props = defineProps<{ taskId: string }>()
 const board = useBoardStore()
+const expansion = useTaskExpansionStore()
 const task = computed(() => board.getBlock(props.taskId))
 const { draggingId, startDrag } = useBlockDrag()
 
+// An expanded pipeline grows downward over its neighbours, so it must stack above the
+// other (compact) task cards — never let a neighbour render on top of the pipeline.
+const expanded = computed(() => expansion.allowed.has(props.taskId))
+
 // Once a task is merged it stops being a unit of work and becomes part of the
 // architecture: it no longer renders as a draggable card (arrows fall back to its
 // container), so we never leave a zero-size anchor behind.
@@ -22,11 +27,11 @@ function onHandle(e: PointerEvent) {
     <!-- in-flight task → draggable work card (merged tasks render nothing) -->
     <div
       v-if="!merged"
-      class="absolute w-[180px]"
+      class="absolute w-[210px]"
       :style="{
         left: task.position.x + 'px',
         top: task.position.y + 'px',
-        zIndex: draggingId === taskId ? 60 : 10,
+        zIndex: draggingId === taskId ? 60 : expanded ? 20 : 10,
         // While this task is being dragged it must not capture hit-tests, so the
         // drop-zone (service or module) beneath the cursor can be resolved on
         // release — including the drag handle, which lives in this wrapper above

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

@@ -182,7 +182,9 @@ function selectTask() {
     ]"
     @click.stop="selectTask"
   >
-    <!-- header row -->
+    <!-- meta row: status dot, recurring icon, status label + connect handle. The
+         status label is a fixed-width-ish stub ("APPROVAL NEEDED" etc.), so it sits
+         on its own row rather than stealing horizontal space from the title. -->
     <div class="flex items-center gap-1.5">
       <span class="h-2 w-2 shrink-0 rounded-full" :style="{ backgroundColor: statusMeta.color }" />
       <UIcon
@@ -191,19 +193,8 @@ function selectTask() {
         class="h-3 w-3 shrink-0 text-indigo-400"
         :title="schedule.enabled ? 'Recurring pipeline' : 'Recurring pipeline (paused)'"
       />
-      <span class="truncate text-[11px] font-semibold text-slate-100">{{ task.title }}</span>
-      <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
-      <button
-        type="button"
-        class="nodrag ml-1 shrink-0 cursor-crosshair rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400"
-        title="Drag onto another task to make it depend on this one"
-        @pointerdown.stop="startConnect(task.id, $event)"
-        @click.stop
-      >
-        <UIcon name="i-lucide-spline" class="h-3 w-3" />
-      </button>
       <span
-        class="ml-auto shrink-0 text-[9px] uppercase tracking-wide"
+        class="ml-auto truncate text-[9px] uppercase tracking-wide"
         :class="
           runFailed
             ? 'text-rose-400'
@@ -216,6 +207,25 @@ function selectTask() {
       >
         {{ statusText }}
       </span>
+      <!-- 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"
+        title="Drag onto another task to make it depend on this one"
+        @pointerdown.stop="startConnect(task.id, $event)"
+        @click.stop
+      >
+        <UIcon name="i-lucide-spline" class="h-3 w-3" />
+      </button>
+    </div>
+
+    <!-- title gets a full-width row so long titles wrap to two lines rather than
+         truncating to an unreadable stub; the full text stays available on hover. -->
+    <div
+      class="mt-1 line-clamp-2 break-words text-[11px] font-semibold leading-snug text-slate-100"
+      :title="task.title"
+    >
+      {{ task.title }}
     </div>
 
     <!-- a failed run: the shared failure banner + retry, never a stuck bar -->

package/app/components/layout/NotificationsInbox.vue

@@ -115,7 +115,13 @@ function revealDecision(n: Notification) {
 
 <template>
   <UPopover v-if="notifications.count" :content="{ align: 'end' }">
-    <UButton :color="hasUrgent ? 'error' : 'warning'" variant="soft" size="sm" icon="i-lucide-bell">
+    <UButton
+      data-testid="notifications-bell"
+      :color="hasUrgent ? 'error' : 'warning'"
+      variant="soft"
+      size="sm"
+      icon="i-lucide-bell"
+    >
       {{ notifications.count }}
     </UButton>
 
@@ -127,6 +133,8 @@ function revealDecision(n: Notification) {
         <div
           v-for="n in notifications.open"
           :key="n.id"
+          data-testid="notification-item"
+          :data-notification-type="n.type"
           class="rounded-lg border p-2.5 mt-1.5"
           :class="
             isUrgent(n)
@@ -167,6 +175,7 @@ function revealDecision(n: Notification) {
               </a>
               <div class="mt-2 flex items-center gap-1.5">
                 <UButton
+                  data-testid="notification-act"
                   :color="accent(n)"
                   variant="soft"
                   size="xs"
@@ -176,6 +185,7 @@ function revealDecision(n: Notification) {
                   {{ META[n.type].action }}
                 </UButton>
                 <UButton
+                  data-testid="notification-dismiss"
                   color="neutral"
                   variant="ghost"
                   size="xs"

package/app/components/panels/AgentStepDetail.vue

@@ -175,6 +175,7 @@ async function copyOutput() {
     <Transition name="reader-fade">
       <div
         v-if="open && step && agent"
+        data-testid="step-detail"
         class="fixed inset-0 z-50 flex bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"
@@ -552,6 +553,7 @@ async function copyOutput() {
           <div v-else class="space-y-2 border-t border-slate-800 px-4 py-3">
             <UButton
               color="primary"
+              data-testid="step-approve"
               size="sm"
               icon="i-lucide-check"
               block

package/app/composables/useBlockQueries.ts

@@ -117,7 +117,7 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
   function contentSize(id: string): { w: number; h: number } {
     const b = getBlock(id)
     const isModule = b?.level === 'module'
-    const TASK_W = 180
+    const TASK_W = 210
     const TASK_H = 160
     const headerH = isModule ? 30 : 0
     let w = isModule ? 200 : 360

package/app/composables/useTaskExpansion.ts

@@ -2,8 +2,7 @@ import type { Ref } from 'vue'
 import { onMounted, onBeforeUnmount } from 'vue'
 import { useRafFn } from '@vueuse/core'
 import { lodAtLeast } from '~/composables/useSemanticZoom'
-
-type Rect = { left: number; right: number; top: number; bottom: number }
+import { headerDistanceSq, type Rect } from '~/utils/taskExpansionRanking'
 
 function intersects(a: Rect, b: Rect) {
   return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
@@ -21,9 +20,13 @@ function sameSet(a: Set<string>, b: Set<string>) {
  * frame against live DOM rects so they follow pan / zoom / drag / resize:
  *
  *  - visibility: a task expands only while its card overlaps the board viewport.
- *  - overlap: walking the visible candidates nearest-to-screen-centre first, a task
- *    expands only if its footprint doesn't collide with one already granted, so the
- *    centre-most task wins an overlap and the rest stay compact.
+ *  - overlap: walking the visible candidates nearest-header-to-screen-centre first, a
+ *    task expands only if its footprint doesn't collide with one already granted, so the
+ *    card you're looking at wins an overlap and the rest stay compact.
+ *  - hover: the task directly under the pointer is granted first, so hovering any card
+ *    expands its pipeline regardless of its position on screen. "Under the pointer" is
+ *    the TOPMOST card at the cursor (document.elementFromPoint), so hovering a region
+ *    already covered by another open pipeline keeps that pipeline, not the card beneath.
  *
  * Writes the permitted id set into the `taskExpansion` store; `TaskPipelineMini` reads it.
  * Only tasks with a running pipeline (steps to show) are candidates — a task that
@@ -44,11 +47,30 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
   // card is still tested at its expanded extent and stays denied. Stable.
   const expandedHeight = new Map<string, number>()
 
+  // Last pointer position over the board (viewport coords), or null when the pointer has
+  // left it. The card under the pointer is expanded on hover (see `hoveredTaskId`).
+  let pointer: { x: number; y: number } | null = null
+  function onPointerMove(e: PointerEvent) {
+    pointer = { x: e.clientX, y: e.clientY }
+  }
+  function onPointerLeave() {
+    pointer = null
+  }
+
   function rectOf(id: string): DOMRect | null {
     const el = document.querySelector(`[data-block-id="${id}"]`) as HTMLElement | null
     return el ? el.getBoundingClientRect() : null
   }
 
+  // The task whose card is topmost at the pointer, or null. Using elementFromPoint (not a
+  // rect test) means an open pipeline stacked above a neighbour wins the hit, so hovering
+  // a region obscured by another pipeline doesn't switch to the card hidden beneath it.
+  function hoveredTaskId(): string | null {
+    if (!pointer) return null
+    const hit = document.elementFromPoint(pointer.x, pointer.y)
+    return hit?.closest('[data-block-id]')?.getAttribute('data-block-id') ?? null
+  }
+
   function recompute() {
     // Task cards only expand at the deep zoom bands; clear everything otherwise.
     if (!lodAtLeast(ui.lod, 'steps')) {
@@ -82,28 +104,29 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
         top: rect.top,
         bottom: rect.top + height,
       }
-      // Rank by the screen centre's distance to the card's projected footprint — 0
-      // whenever the centre sits over the card. So a tall card the viewport is parked
-      // inside wins over a shorter neighbour whose top edge merely happens to be nearer
-      // the centre line (the old top-centre anchor penalised a card you'd scrolled into
-      // once its top scrolled above the viewport). The footprint is the stable expanded
-      // extent — its top doesn't move and its bottom uses the cached expanded height —
-      // so the ranking can't oscillate as cards expand / collapse.
-      const ddx = Math.max(footprint.left - cx, 0, cx - footprint.right)
-      const ddy = Math.max(footprint.top - cy, 0, cy - footprint.bottom)
-      const dist = ddx * ddx + ddy * ddy
-      candidates.push({ id: t.id, rect: footprint, dist })
+      // Rank by the screen centre's distance to the card's stable header (top edge),
+      // so the card you're looking at wins and a tall card's expanded body can't claim
+      // the centre just by covering it. See utils/taskExpansionRanking.ts.
+      candidates.push({ id: t.id, rect: footprint, dist: headerDistanceSq(footprint, cx, cy) })
     }
     // Drop cached heights for cards that are gone, so the map can't grow unbounded.
     for (const id of expandedHeight.keys()) if (!liveIds.has(id)) expandedHeight.delete(id)
     candidates.sort((a, b) => a.dist - b.dist)
 
-    // Greedy by distance to centre: a candidate is granted only if its projected
-    // footprint clears every footprint already granted, so the centre-most card
-    // wins any overlap.
+    // Greedy by header distance: a candidate is granted only if its projected footprint
+    // clears every footprint already granted, so the centre-most card wins any overlap.
+    // The hovered card is granted FIRST, so hovering a card expands it regardless of its
+    // distance from the centre (and a centre-most neighbour it overlaps yields to it).
+    const hovered = hoveredTaskId()
     const claimed: Rect[] = []
     const next = new Set<string>()
+    const hoveredCard = hovered ? candidates.find((c) => c.id === hovered) : undefined
+    if (hoveredCard) {
+      next.add(hoveredCard.id)
+      claimed.push(hoveredCard.rect)
+    }
     for (const c of candidates) {
+      if (c.id === hoveredCard?.id) continue
       if (claimed.some((r) => intersects(c.rect, r))) continue
       next.add(c.id)
       claimed.push(c.rect)
@@ -114,10 +137,16 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
   const { pause, resume } = useRafFn(recompute, { immediate: false })
   onMounted(() => {
     store.setDriverActive(true)
+    const el = container.value
+    el?.addEventListener('pointermove', onPointerMove)
+    el?.addEventListener('pointerleave', onPointerLeave)
     resume()
   })
   onBeforeUnmount(() => {
     pause()
+    const el = container.value
+    el?.removeEventListener('pointermove', onPointerMove)
+    el?.removeEventListener('pointerleave', onPointerLeave)
     store.setDriverActive(false)
   })
 }

package/app/stores/board.spec.ts

@@ -173,7 +173,7 @@ describe('board store read getters', () => {
       ])
       // module inner width/height fit the task, plus the 30px module header.
       const size = store.containerSize('m1')
-      expect(size.w).toBe(300 + 180 + 12)
+      expect(size.w).toBe(300 + 210 + 12)
       expect(size.h).toBe(200 + 160 + 12 + 30)
     })
 

package/app/stores/taskExpansion.ts

@@ -7,8 +7,9 @@ import { ref } from 'vue'
  * Deep-zoom (`steps`/`subtasks`) grows a task card downward, and cards are
  * absolutely positioned in their frame, so several expanded cards stacked
  * vertically pile on top of each other. The board driver (`useTaskExpansion`)
- * recomputes a permitted set every frame — only on-screen cards, and only the
- * one closest to the screen centre when two would overlap — and writes it here.
+ * recomputes a permitted set every frame — only on-screen cards, the one closest to
+ * the screen centre when two would overlap, plus whichever card the pointer is hovering
+ * (hover expands a card regardless of position) — and writes it here.
  * `TaskPipelineMini` reads `canExpand` to decide whether to expand or stay compact.
  *
  * `driverActive` lets the gate degrade gracefully: with no board driver mounted

package/app/utils/taskExpansionRanking.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { headerDistanceSq, type Rect } from './taskExpansionRanking'
+
+/** Rank a set of cards against a screen centre, best (would-expand) first. */
+function rank(cards: Record<string, Rect>, cx: number, cy: number): string[] {
+  return Object.entries(cards)
+    .map(([id, rect]) => ({ id, dist: headerDistanceSq(rect, cx, cy) }))
+    .sort((a, b) => a.dist - b.dist)
+    .map((c) => c.id)
+}
+
+describe('headerDistanceSq', () => {
+  it('measures from the centre of the card top edge', () => {
+    const r: Rect = { left: 0, right: 100, top: 200, bottom: 600 }
+    // top-centre is (50, 200); centre (50, 240) → dy 40 → 40² = 1600
+    expect(headerDistanceSq(r, 50, 240)).toBe(1600)
+    // 30px to the right of the top-centre, level with the top → 30² = 900
+    expect(headerDistanceSq(r, 80, 200)).toBe(900)
+  })
+
+  it('ignores the expanded height — only the top edge counts', () => {
+    const short: Rect = { left: 0, right: 100, top: 200, bottom: 260 }
+    const tall: Rect = { left: 0, right: 100, top: 200, bottom: 2000 }
+    expect(headerDistanceSq(short, 50, 240)).toBe(headerDistanceSq(tall, 50, 240))
+  })
+})
+
+describe('ranking', () => {
+  // The regression from the screenshot: a tall card parked at the top of the screen
+  // expands its pipeline down past the centre, so its body covers the centre. A compact
+  // card whose header sits right at the centre must still win — the one you're looking at.
+  it('prefers the card whose header is at the centre over a tall card bleeding down from the top', () => {
+    const top: Rect = { left: 0, right: 200, top: 30, bottom: 700 } // header far up, body covers centre
+    const here: Rect = { left: 0, right: 200, top: 320, bottom: 520 } // header at the centre
+    expect(rank({ top, here }, 100, 340)).toEqual(['here', 'top'])
+    // document order can't flip the winner
+    expect(rank({ here, top }, 100, 340)).toEqual(['here', 'top'])
+  })
+
+  it('ranks by the header nearest the centre regardless of expansion state', () => {
+    const above: Rect = { left: 0, right: 200, top: 100, bottom: 800 }
+    const below: Rect = { left: 0, right: 200, top: 360, bottom: 420 }
+    expect(rank({ above, below }, 100, 320)).toEqual(['below', 'above'])
+  })
+
+  it('uses horizontal offset to break a vertical tie', () => {
+    const near: Rect = { left: 0, right: 100, top: 100, bottom: 200 }
+    const far: Rect = { left: 400, right: 500, top: 100, bottom: 200 }
+    expect(rank({ far, near }, 80, 100)).toEqual(['near', 'far'])
+  })
+})

package/app/utils/taskExpansionRanking.ts

@@ -0,0 +1,28 @@
+/**
+ * Pure ranking for the task-expansion gate (see `composables/useTaskExpansion.ts`).
+ *
+ * A task card grows DOWNWARD when it expands its pipeline, so its `top`/`left`/`right`
+ * never move — only its height does. We rank candidates by the screen centre's distance
+ * to each card's stable HEADER anchor (the top edge), which is what the user reads as
+ * "the card I'm looking at". Ranking on the header (not the expanded footprint) is what
+ * stops a tall card from winning just because its expanded body happens to cover the
+ * centre: a compact card whose header sits right at the centre beats a neighbour whose
+ * header is parked at the top of the screen, even when both bodies overlap the centre.
+ *
+ * Because the anchor uses only top/left/right (all stable as the card expands and
+ * collapses), the ordering can't oscillate. A tall card you've scrolled past the top of
+ * is no longer kept expanded by the ranking itself — the hover "pin" in the driver keeps
+ * the pipeline you're pointing at from collapsing while you scroll.
+ */
+export type Rect = { left: number; right: number; top: number; bottom: number }
+
+/**
+ * Squared distance from the screen centre `(cx, cy)` to a card's stable header anchor
+ * (the centre of its top edge). Smaller = nearer the centre = ranks first.
+ */
+export function headerDistanceSq(card: Rect, cx: number, cy: number): number {
+  const ax = (card.left + card.right) / 2
+  const dx = ax - cx
+  const dy = card.top - cy
+  return dx * dx + dy * dy
+}

package/package.json

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