@cat-factory/app 0.17.0 → 0.17.1

package/app/composables/useTaskExpansion.ts

@@ -35,6 +35,15 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
   const ui = useUiStore()
   const store = useTaskExpansionStore()
 
+  // Last-known expanded height per task. A card grows downward only while it's
+  // granted (its pipeline list is rendered), so its live height collapses the
+  // moment it's denied. Testing overlap with that collapsed height is what causes
+  // the flashing: a denied card no longer overlaps its neighbour, gets re-granted,
+  // expands, overlaps again, gets denied — every frame. We cache the expanded
+  // height while a card is granted and project the footprint with it, so a denied
+  // card is still tested at its expanded extent and stays denied. Stable.
+  const expandedHeight = new Map<string, number>()
+
   function rectOf(id: string): DOMRect | null {
     const el = document.querySelector(`[data-block-id="${id}"]`) as HTMLElement | null
     return el ? el.getBoundingClientRect() : null
@@ -51,26 +60,43 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
     const cx = view.left + view.width / 2
     const cy = view.top + view.height / 2
 
-    const candidates: { id: string; rect: DOMRect; dist: number }[] = []
+    const candidates: { id: string; rect: Rect; dist: number }[] = []
+    const liveIds = new Set<string>()
     for (const t of board.allTasks) {
       // Only tasks whose run actually has steps would expand a pipeline list.
       if (!execution.getByBlock(t.id)?.steps.length) continue
       const rect = rectOf(t.id)
       if (!rect) continue
-      // Visibility: the card must intersect the board viewport.
+      liveIds.add(t.id)
+      // While a card is granted it's rendered expanded, so its live height is its
+      // expanded footprint — cache it. A denied card keeps its last cached value.
+      if (store.allowed.has(t.id)) expandedHeight.set(t.id, rect.height)
+      // Visibility: the card must intersect the board viewport (live rect).
       if (!intersects(rect, view)) continue
+      // Project the footprint downward to the expanded extent so the overlap test
+      // is independent of the card's current (possibly collapsed) state.
+      const height = Math.max(rect.height, expandedHeight.get(t.id) ?? 0)
+      const footprint: Rect = {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + height,
+      }
       // Stable anchor: the card's top-centre. It doesn't move as the card grows
       // downward, so the ordering can't oscillate as cards expand / collapse.
       const ax = rect.left + rect.width / 2
       const ay = rect.top
       const dist = (ax - cx) ** 2 + (ay - cy) ** 2
-      candidates.push({ id: t.id, rect, dist })
+      candidates.push({ id: t.id, rect: footprint, dist })
     }
+    // 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 rect clears
-    // every rect already granted, so the centre-most card wins any overlap.
-    const claimed: DOMRect[] = []
+    // 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.
+    const claimed: Rect[] = []
     const next = new Set<string>()
     for (const c of candidates) {
       if (claimed.some((r) => intersects(c.rect, r))) continue

package/package.json

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