@cat-factory/app 0.26.0 → 0.26.2

package/app/components/board/BoardCanvas.vue

@@ -11,7 +11,7 @@ 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 { useFrameExpansion } from '~/composables/useFrameExpansion'
+import { computeDisplacement } from '~/utils/boardDisplacement'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -22,48 +22,97 @@ const toast = useToast()
 
 const { onNodeDragStop, onViewportChange, screenToFlowCoordinate } = useVueFlow(BOARD_FLOW_ID)
 
-// Gate which task cards expand their pipeline list on deep zoom: only on-screen
-// cards, and only the centre-most of any that would overlap (see useTaskExpansion).
-// The frame-level gate is the same idea one level up: which service frames may
-// auto-expand to their task canvas once zoomed in (see useFrameExpansion).
+// 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
+// such gate — they are always expanded to their task canvas (see frameOffsets below).
 const boardEl = ref<HTMLElement | null>(null)
 useTaskExpansion(boardEl)
-useFrameExpansion(boardEl)
 
 // Only frames are board nodes. Dependencies live on tasks (rendered inside the
 // frames), so there are no frame-to-frame edges on the canvas.
 //
 // Vue Flow tags every *draggable* node with the `nopan` class, which makes the
-// pane refuse to pan while the pointer is over it. An expanded frame fills much
-// of the viewport, so leaving it draggable turns the whole canvas into a dead
-// zone once tasks appear. We therefore make expanded frames non-draggable (the
-// pane pans straight through them) and move them via their header handle
-// instead — collapsed chips stay node-draggable since they're small.
-function frameExpanded(id: string) {
-  return ui.isFrameExpanded(id) && ui.lod !== 'far'
+// pane refuse to pan while the pointer is over it. Service frames are always expanded
+// and fill much of the viewport, so leaving them draggable would turn the whole canvas
+// into a dead zone. We therefore make every frame non-draggable (the pane pans straight
+// through it) and move it via its header handle instead.
+
+// Services are always expanded to their full task canvas. An expanded card grows
+// rightward / downward from its stored (chip-sized) top-left and would overlap its
+// neighbours, so compressed space pushes the neighbours away by that growth: the
+// footprint never overlaps a neighbour it wasn't already overlapping. Because the
+// expanded set never changes, the layout is fixed — panning never shifts it and there
+// is no expand/collapse transition to snap on. Render-only; stored positions untouched.
+const FRAME_COLLAPSED_W = 224 // the stored chip footprint (`w-56`) the layout reserves
+const FRAME_COLLAPSED_H = 150
+const FRAME_CHROME_W = 40 // border + padding around the inner task canvas
+const FRAME_CHROME_H = 120 // top bar + header row + paddings above the canvas
+
+const frameOffsets = computed(() => {
+  const boxes = [
+    ...board.frames.map((b) => {
+      const c = board.containerSize(b.id)
+      return {
+        id: b.id,
+        x: b.position.x,
+        y: b.position.y,
+        w: FRAME_COLLAPSED_W,
+        h: FRAME_COLLAPSED_H,
+        growX: Math.max(0, c.w + FRAME_CHROME_W - FRAME_COLLAPSED_W),
+        growY: Math.max(0, c.h + FRAME_CHROME_H - FRAME_COLLAPSED_H),
+      }
+    }),
+    // Epics never expand, but they're pushed aside like any other box so an expanded
+    // frame doesn't end up rendered on top of one.
+    ...board.epics.map((b) => ({
+      id: b.id,
+      x: b.position.x,
+      y: b.position.y,
+      w: FRAME_COLLAPSED_W,
+      h: FRAME_COLLAPSED_H,
+      growX: 0,
+      growY: 0,
+    })),
+  ]
+  return computeDisplacement(boxes)
+})
+
+function offsetOf(id: string) {
+  return frameOffsets.value.get(id) ?? { dx: 0, dy: 0 }
 }
 
 const nodes = computed(() => [
-  ...board.frames.map((b) => ({
-    id: b.id,
-    type: 'block',
-    position: b.position,
-    draggable: !frameExpanded(b.id),
-    data: {},
-  })),
+  ...board.frames.map((b) => {
+    const o = offsetOf(b.id)
+    return {
+      id: b.id,
+      type: 'block',
+      position: { x: b.position.x + o.dx, y: b.position.y + o.dy },
+      // Always-expanded frames fill the viewport; keep them non-draggable so the pane
+      // pans through them (they move via their header handle, see BlockNode).
+      draggable: false,
+      data: {},
+    }
+  }),
   // Epics are top-level grouping nodes (non-structural), drawn alongside frames and
   // linked to their member tasks by the dependency-edge overlay.
-  ...board.epics.map((b) => ({
-    id: b.id,
-    type: 'epic',
-    position: b.position,
-    draggable: true,
-    data: {},
-  })),
+  ...board.epics.map((b) => {
+    const o = offsetOf(b.id)
+    return {
+      id: b.id,
+      type: 'epic',
+      position: { x: b.position.x + o.dx, y: b.position.y + o.dy },
+      draggable: true,
+      data: {},
+    }
+  }),
 ])
 
 onNodeDragStop(({ node }) => {
-  board.moveBlock(node.id, { x: node.position.x, y: node.position.y })
+  // node.position carries the render offset (compressed space can have pushed this node
+  // aside); subtract it so we persist the un-displaced position.
+  const o = offsetOf(node.id)
+  board.moveBlock(node.id, { x: node.position.x - o.dx, y: node.position.y - o.dy })
 })
 
 onViewportChange((vp) => {

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

@@ -53,9 +53,11 @@ const FRAME_LABEL: Record<BlockStatus, string> = {
 const statusLabel = computed(() => FRAME_LABEL[frameStatus.value])
 
 const selected = computed(() => ui.selectedBlockId === props.id)
-const expanded = computed(() => ui.isFrameExpanded(props.id))
-// At far zoom we only ever show the chip; otherwise an expanded frame shows tasks.
-const showExpanded = computed(() => expanded.value && lod.value !== 'far')
+// Services are always expanded to their task canvas, at every zoom level: there is no
+// chip/compact collapse, so panning is a fixed layout and zooming has no expand/collapse
+// transition to snap on. The far-chip and compact-summary branches in the template are
+// kept (gated off) so the prior behaviour is one edit away if we want chips back.
+const showExpanded = computed(() => true)
 
 // Surface a pending decision from this frame OR any of its tasks.
 const blockDecisions = computed(() =>
@@ -179,8 +181,10 @@ const ITEM_ICON: Record<string, string> = {
     </div>
 
     <!-- ===================== FAR: glanceable chip ===================== -->
+    <!-- Inert while services are always expanded (showExpanded is always true); the
+         compact branch below is reached via v-else-if and is likewise inert. -->
     <div
-      v-if="lod === 'far'"
+      v-if="!showExpanded && lod === 'far'"
       class="flex w-44 items-center gap-2 rounded-xl border-2 px-3 py-3 shadow-lg backdrop-blur"
       :class="[selected ? 'border-white' : '', pulseClass]"
       :style="{ borderColor: accent, backgroundColor: accent + '26' }"

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

@@ -15,8 +15,8 @@ const block = computed<Block | undefined>(() => board.getBlock(props.id))
 const members = computed(() => board.epicMembers(props.id))
 const total = computed(() => members.value.length)
 const done = computed(() => members.value.filter((m) => m.status === 'done').length)
-const active = computed(() =>
-  members.value.filter((m) => m.status === 'in_progress' || m.status === 'pr_ready').length,
+const active = computed(
+  () => members.value.filter((m) => m.status === 'in_progress' || m.status === 'pr_ready').length,
 )
 const selected = computed(() => ui.selectedBlockId === props.id)
 </script>
@@ -26,9 +26,7 @@ const selected = computed(() => ui.selectedBlockId === props.id)
     v-if="block"
     :data-block-id="block.id"
     class="w-56 cursor-pointer rounded-lg border bg-slate-900/90 px-3 py-2 shadow-lg backdrop-blur transition-colors"
-    :class="
-      selected ? 'border-violet-400 ring-1 ring-violet-400/50' : 'border-violet-500/40'
-    "
+    :class="selected ? 'border-violet-400 ring-1 ring-violet-400/50' : 'border-violet-500/40'"
     @click="ui.select(block.id)"
   >
     <div class="flex items-center gap-1.5">

package/app/components/layout/ProviderConfigBanner.vue

@@ -42,7 +42,11 @@ const show = computed(() => pending.value.length > 0 && !dismissed.value)
           <div class="min-w-0 flex-1">
             <div class="flex items-start justify-between gap-3">
               <h2 class="text-lg font-semibold text-amber-100">
-                {{ pending.length > 1 ? 'Providers need configuration' : `${LABEL[pending[0]!]} needs configuration` }}
+                {{
+                  pending.length > 1
+                    ? 'Providers need configuration'
+                    : `${LABEL[pending[0]!]} needs configuration`
+                }}
               </h2>
               <UButton
                 color="neutral"

package/app/components/panels/inspector/EpicChildren.vue

@@ -18,7 +18,10 @@ const done = computed(() => members.value.filter((m) => m.status === 'done').len
 const groups = computed(() => {
   const byService = new Map<
     string,
-    { service: Block | undefined; modules: Map<string, { module: Block | undefined; tasks: Block[] }> }
+    {
+      service: Block | undefined
+      modules: Map<string, { module: Block | undefined; tasks: Block[] }>
+    }
   >()
   for (const task of members.value) {
     const service = board.serviceOf(task)
@@ -29,7 +32,10 @@ const groups = computed(() => {
     const parent = task.parentId ? board.getBlock(task.parentId) : undefined
     const moduleKey = parent && parent.level === 'module' ? parent.id : '—'
     if (!group.modules.has(moduleKey)) {
-      group.modules.set(moduleKey, { module: parent?.level === 'module' ? parent : undefined, tasks: [] })
+      group.modules.set(moduleKey, {
+        module: parent?.level === 'module' ? parent : undefined,
+        tasks: [],
+      })
     }
     group.modules.get(moduleKey)!.tasks.push(task)
   }
@@ -51,7 +57,11 @@ const groups = computed(() => {
     </div>
 
     <div v-else class="space-y-2">
-      <div v-for="(group, gi) in groups" :key="gi" class="rounded-md border border-slate-700/60 p-2">
+      <div
+        v-for="(group, gi) in groups"
+        :key="gi"
+        class="rounded-md border border-slate-700/60 p-2"
+      >
         <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-slate-300">
           <UIcon name="i-lucide-box" class="h-3 w-3 text-slate-500" />
           {{ group.service?.title ?? 'Unassigned' }}

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -444,8 +444,8 @@ const technicalLabel = computed(() => {
         />
       </div>
       <div class="mt-1 text-[11px] text-slate-500">
-        When this task merges, automatically start the tasks that depend on it (once their
-        other dependencies are also done).
+        When this task merges, automatically start the tasks that depend on it (once their other
+        dependencies are also done).
       </div>
     </div>
   </div>

package/app/components/settings/ProviderConnectionPanel.vue

@@ -107,13 +107,16 @@ const canSave = computed(() => {
  * `manifestTemplate` scaffold on a first connect. Native providers only (a manifest provider
  * has no template ⇒ null, and rotates secrets via the dedicated path instead).
  */
-function buildManifestPayload(): { manifest: Record<string, unknown>; secrets: Record<string, string> } | null {
+function buildManifestPayload(): {
+  manifest: Record<string, unknown>
+  secrets: Record<string, string>
+} | null {
   const template = descriptor.value?.manifestTemplate
   if (!template) return null
   const base = descriptor.value?.savedManifest ?? template
   const manifest: Record<string, unknown> = structuredClone(base)
   const providerConfig: Record<string, unknown> = {
-    ...((manifest.providerConfig as Record<string, unknown> | undefined) ?? {}),
+    ...(manifest.providerConfig as Record<string, unknown> | undefined),
   }
   const secrets: Record<string, string> = {}
   for (const f of descriptor.value?.configFields ?? []) {
@@ -249,7 +252,10 @@ function fieldHelp(key: string): string | undefined {
           </p>
           <!-- A native re-register replaces the whole manifest; secrets are write-only so they
                must be re-supplied. Non-secret config is prefilled, so it survives a save. -->
-          <p v-if="connection && canAuthor && hasSecretFields" class="text-[11px] text-amber-300/80">
+          <p
+            v-if="connection && canAuthor && hasSecretFields"
+            class="text-[11px] text-amber-300/80"
+          >
             Re-enter the secret field{{ secretFieldCount > 1 ? 's' : '' }} to save changes — stored
             secrets are write-only and aren't shown.
           </p>
@@ -257,7 +263,9 @@ function fieldHelp(key: string): string | undefined {
           <UFormField
             v-for="field in descriptor.configFields"
             :key="field.key"
-            :label="field.label + (field.required && field.default === undefined ? '' : ' (optional)')"
+            :label="
+              field.label + (field.required && field.default === undefined ? '' : ' (optional)')
+            "
             :help="fieldHelp(field.key)"
           >
             <USelect

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -117,7 +117,8 @@ async function toggleEnabled(enabled: boolean) {
             credentials to enter.
           </p>
           <p v-if="!available" class="text-[11px] text-amber-400">
-            Install the workspace's GitHub App (connect GitHub repos) to offer {{ descriptor.label }}.
+            Install the workspace's GitHub App (connect GitHub repos) to offer
+            {{ descriptor.label }}.
           </p>
         </template>
 

package/app/composables/api/reviews.ts

@@ -104,12 +104,7 @@ export function reviewsApi({ http, ws }: ApiContext) {
         { method: 'POST' },
       ),
 
-    reRequestRecommendation: (
-      workspaceId: string,
-      reviewId: string,
-      recId: string,
-      note: string,
-    ) =>
+    reRequestRecommendation: (workspaceId: string, reviewId: string, recId: string, note: string) =>
       http<RequirementReview>(
         `${ws(workspaceId)}/requirement-reviews/${encodeURIComponent(reviewId)}/recommendations/${encodeURIComponent(recId)}/re-request`,
         { method: 'POST', body: { note } },

package/app/composables/useTaskExpansion.ts

@@ -82,11 +82,16 @@ export function useTaskExpansion(container: Ref<HTMLElement | null>) {
         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
+      // 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 })
     }
     // Drop cached heights for cards that are gone, so the map can't grow unbounded.

package/app/stores/ui.ts

@@ -2,9 +2,8 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { DocumentSourceKind, TaskSourceKind, LodLevel } from '~/types/domain'
 import type { PendingContext } from '~/composables/useContextLinking'
-import { zoomToLod, lodAtLeast } from '~/composables/useSemanticZoom'
+import { zoomToLod } from '~/composables/useSemanticZoom'
 import { useExecutionStore } from '~/stores/execution'
-import { useFrameExpansionStore } from '~/stores/frameExpansion'
 import { agentKindMeta } from '~/utils/catalog'
 
 /** Values used to seed the add-task form when it is opened from another surface. */
@@ -163,15 +162,12 @@ export const useUiStore = defineStore('ui', () => {
     expandedFrames.value = new Set(expandedFrames.value).add(id)
   }
 
-  /** A frame shows its tasks when manually expanded OR once zoomed in to `close`
-   * or any deeper band (`steps`/`subtasks` drill further into those tasks). The
-   * zoom-driven branch is gated by the board's frame-expansion driver so only
-   * on-screen, centre-most frames open — a large off-centre or off-screen service
-   * no longer snaps out over the one the user is focused on. The gate degrades to
-   * "allowed" when no board driver is mounted (focus view / tests). */
-  function isFrameExpanded(id: string) {
-    if (expandedFrames.value.has(id)) return true
-    return lodAtLeast(lod.value, 'close') && useFrameExpansionStore().canExpand(id)
+  /** Services are always expanded to their task canvas, at every zoom level, so the
+   * board layout is fixed: panning never changes it and zooming has no expand/collapse
+   * transition to snap on. (`expandedFrames`/`toggleFrame` are retained for callers but
+   * no longer gate rendering.) */
+  function isFrameExpanded(_id: string) {
+    return true
   }
 
   function select(id: string | null) {

package/app/utils/boardDisplacement.spec.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { computeDisplacement, type DisplacementBox } from '~/utils/boardDisplacement'
+
+function box(p: Partial<DisplacementBox> & { id: string }): DisplacementBox {
+  return { x: 0, y: 0, w: 10, h: 10, growX: 0, growY: 0, ...p }
+}
+
+describe('computeDisplacement', () => {
+  it('pushes a right-hand neighbour by the expanded box growth, preserving the gap', () => {
+    // A at x=0 w=10 grows by 90; B sits 20 to the right (x=30) in the same row.
+    const offsets = computeDisplacement([
+      box({ id: 'A', x: 0, w: 10, growX: 90 }),
+      box({ id: 'B', x: 30 }),
+    ])
+    expect(offsets.get('A')).toEqual({ dx: 0, dy: 0 })
+    // B moves right by 90, so the 20px gap (A's new right edge 100 → B's new left 120) is kept.
+    expect(offsets.get('B')).toEqual({ dx: 90, dy: 0 })
+  })
+
+  it('does not push a neighbour that was already overlapping the box horizontally', () => {
+    // B starts inside A's collapsed extent (x=5 < A.right=10): already overlapping, left as-is.
+    const offsets = computeDisplacement([
+      box({ id: 'A', x: 0, w: 10, growX: 90 }),
+      box({ id: 'B', x: 5 }),
+    ])
+    expect(offsets.get('B')).toEqual({ dx: 0, dy: 0 })
+  })
+
+  it('accumulates the growth of every expanded box to the left (chains)', () => {
+    const offsets = computeDisplacement([
+      box({ id: 'A', x: 0, w: 10, growX: 90 }),
+      box({ id: 'B', x: 30, w: 10, growX: 50 }),
+      box({ id: 'C', x: 60 }),
+    ])
+    // C is right of both A and B → pushed by 90 + 50.
+    expect(offsets.get('C')!.dx).toBe(140)
+    // B is right of A only → pushed by 90.
+    expect(offsets.get('B')!.dx).toBe(90)
+  })
+
+  it('does not cross-push boxes that are disjoint on the other axis', () => {
+    // A grows rightward but B is far below it (no shared rows) → no horizontal push.
+    const offsets = computeDisplacement([
+      box({ id: 'A', x: 0, y: 0, w: 10, h: 10, growX: 90 }),
+      box({ id: 'B', x: 30, y: 500, w: 10, h: 10 }),
+    ])
+    expect(offsets.get('B')).toEqual({ dx: 0, dy: 0 })
+  })
+
+  it('pushes a box below an expanded box downward', () => {
+    const offsets = computeDisplacement([
+      box({ id: 'A', x: 0, y: 0, w: 10, h: 10, growY: 100 }),
+      box({ id: 'B', x: 0, y: 30, w: 10, h: 10 }),
+    ])
+    expect(offsets.get('B')).toEqual({ dx: 0, dy: 100 })
+  })
+
+  it('returns a zero offset for every box when nothing is expanded', () => {
+    const offsets = computeDisplacement([box({ id: 'A', x: 0 }), box({ id: 'B', x: 30 })])
+    expect(offsets.get('A')).toEqual({ dx: 0, dy: 0 })
+    expect(offsets.get('B')).toEqual({ dx: 0, dy: 0 })
+  })
+})

package/app/utils/boardDisplacement.ts

@@ -0,0 +1,62 @@
+/**
+ * Compressed-space layout for the board. When a box (a service frame, or a task
+ * card inside a frame) expands, it grows rightward / downward from its stored
+ * top-left. Rather than letting the expanded footprint overlap its neighbours —
+ * and then collapsing one of them to resolve the clash, which is what made a
+ * zoomed-in service "snap out" as you scrolled across it — we PUSH the neighbours
+ * away by the growth, so an expanded box never overlaps a neighbour it wasn't
+ * already overlapping. The box stays expanded; you just scroll a bit further to
+ * reach the next one.
+ *
+ * The result is a render-only offset per box; stored positions are never mutated.
+ */
+export type DisplacementBox = {
+  id: string
+  /** Stored top-left, in flow units. */
+  x: number
+  y: number
+  /** Collapsed size, in flow units. */
+  w: number
+  h: number
+  /** Extra size when expanded (0 for a collapsed box). */
+  growX: number
+  growY: number
+}
+
+export type Offset = { dx: number; dy: number }
+
+/** Do the two boxes' collapsed extents overlap on the y-axis? */
+function overlapsY(a: DisplacementBox, b: DisplacementBox) {
+  return a.y < b.y + b.h && b.y < a.y + a.h
+}
+
+/** Do the two boxes' collapsed extents overlap on the x-axis? */
+function overlapsX(a: DisplacementBox, b: DisplacementBox) {
+  return a.x < b.x + b.w && b.x < a.x + a.w
+}
+
+/**
+ * The render offset for every box. A box B is pushed right by the horizontal
+ * growth of each expanded box E that sits to B's left (B starts past E's collapsed
+ * right edge, so it isn't already overlapping E on x) and shares B's rows (their
+ * collapsed y-extents overlap, so E growing rightward would actually reach B).
+ * Symmetric for the downward push. Offsets only ever grow, so the function can
+ * never create a new overlap, preserves left-to-right / top-to-bottom order and
+ * the gaps between boxes, and chained expansions accumulate (the sum is taken from
+ * the stable stored positions, so it doesn't oscillate). O(N x expanded).
+ */
+export function computeDisplacement(boxes: DisplacementBox[]): Map<string, Offset> {
+  const expanded = boxes.filter((e) => e.growX > 0 || e.growY > 0)
+  const out = new Map<string, Offset>()
+  for (const b of boxes) {
+    let dx = 0
+    let dy = 0
+    for (const e of expanded) {
+      if (e.id === b.id) continue
+      if (e.growX > 0 && b.x >= e.x + e.w && overlapsY(e, b)) dx += e.growX
+      if (e.growY > 0 && b.y >= e.y + e.h && overlapsX(e, b)) dy += e.growY
+    }
+    out.set(b.id, { dx, dy })
+  }
+  return out
+}

package/package.json

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

package/app/composables/useFrameExpansion.ts

@@ -1,118 +0,0 @@
-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 }
-
-function intersects(a: Rect, b: Rect) {
-  return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
-}
-
-function sameSet(a: Set<string>, b: Set<string>) {
-  if (a.size !== b.size) return false
-  for (const id of a) if (!b.has(id)) return false
-  return true
-}
-
-/**
- * Board-level driver deciding which service frames may auto-expand to their task
- * canvas once zoomed past the `close` band. The frame analogue of
- * `useTaskExpansion`: two gates, recomputed every frame against live DOM rects so
- * they follow pan / zoom / drag / resize:
- *
- *  - visibility: a frame expands only while its card overlaps the board viewport,
- *    so a service that isn't on screen at all never expands when you zoom in.
- *  - overlap: walking the visible frames nearest-to-screen-centre first, a frame
- *    expands only if its (expanded) footprint doesn't collide with one already
- *    granted — so the small service the user centred on wins, and a larger
- *    neighbour can't "snap out" over it.
- *
- * Writes the permitted id set into the `frameExpansion` store; `ui.isFrameExpanded`
- * reads it. Manually-expanded frames bypass this gate entirely (see the store).
- */
-export function useFrameExpansion(container: Ref<HTMLElement | null>) {
-  const board = useBoardStore()
-  const ui = useUiStore()
-  const store = useFrameExpansionStore()
-
-  // Last-known expanded size per frame. A frame's card balloons from a chip to its
-  // full task canvas only while it's granted, so its live rect collapses the moment
-  // it's denied. Testing overlap with the collapsed chip is what would cause
-  // flashing: a denied frame no longer overlaps its neighbour, gets re-granted,
-  // expands, overlaps again, gets denied — every frame. We cache the expanded
-  // extent while a frame is granted and project the footprint with it, so a denied
-  // frame is still tested at its expanded size and stays denied. Stable.
-  const expandedSize = new Map<string, { w: number; h: number }>()
-
-  function rectOf(id: string): DOMRect | null {
-    const el = document.querySelector(`[data-block-id="${id}"]`) as HTMLElement | null
-    return el ? el.getBoundingClientRect() : null
-  }
-
-  function recompute() {
-    // Frames only auto-expand at the `close` band and deeper; clear otherwise.
-    if (!lodAtLeast(ui.lod, 'close')) {
-      if (store.allowed.size) store.setAllowed(new Set())
-      return
-    }
-    const view = container.value?.getBoundingClientRect()
-    if (!view) return
-    const cx = view.left + view.width / 2
-    const cy = view.top + view.height / 2
-
-    const candidates: { id: string; rect: Rect; dist: number }[] = []
-    const liveIds = new Set<string>()
-    for (const f of board.frames) {
-      const rect = rectOf(f.id)
-      if (!rect) continue
-      liveIds.add(f.id)
-      // While granted the frame is rendered expanded, so its live rect is its
-      // expanded footprint — cache it. A denied frame keeps its last cached value.
-      if (store.allowed.has(f.id)) expandedSize.set(f.id, { w: rect.width, h: rect.height })
-      // Visibility: the card must intersect the board viewport (live rect).
-      if (!intersects(rect, view)) continue
-      // Project to the cached expanded extent so the overlap test is independent of
-      // the card's current (possibly collapsed-chip) state. A frame grows rightward
-      // and downward from its top-left, which stays put as it expands.
-      const cached = expandedSize.get(f.id)
-      const width = Math.max(rect.width, cached?.w ?? 0)
-      const height = Math.max(rect.height, cached?.h ?? 0)
-      const footprint: Rect = {
-        left: rect.left,
-        right: rect.left + width,
-        top: rect.top,
-        bottom: rect.top + height,
-      }
-      // Stable anchor: the card's top-left. It doesn't move as the frame grows, so
-      // the ordering can't oscillate as frames expand / collapse.
-      const dist = (rect.left - cx) ** 2 + (rect.top - cy) ** 2
-      candidates.push({ id: f.id, rect: footprint, dist })
-    }
-    // Drop cached sizes for frames that are gone, so the map can't grow unbounded.
-    for (const id of expandedSize.keys()) if (!liveIds.has(id)) expandedSize.delete(id)
-    candidates.sort((a, b) => a.dist - b.dist)
-
-    // Greedy by distance to centre: a frame is granted only if its projected
-    // footprint clears every footprint already granted, so the centre-most frame
-    // 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
-      next.add(c.id)
-      claimed.push(c.rect)
-    }
-    if (!sameSet(next, store.allowed)) store.setAllowed(next)
-  }
-
-  const { pause, resume } = useRafFn(recompute, { immediate: false })
-  onMounted(() => {
-    store.setDriverActive(true)
-    resume()
-  })
-  onBeforeUnmount(() => {
-    pause()
-    store.setDriverActive(false)
-  })
-}

package/app/stores/frameExpansion.ts

@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-
-/**
- * Which service frames may auto-expand to reveal their tasks once zoomed in.
- *
- * Past the `close` band a frame opens from a chip to its full task canvas, which
- * can balloon across the viewport. Expanding *every* frame at once (the old
- * behaviour) made a large off-centre service "snap out" over the small one the
- * user was actually centred on, and expanded services that weren't even on screen.
- * The board driver (`useFrameExpansion`) recomputes a permitted set every frame —
- * only on-screen frames, and only the one closest to the screen centre when two
- * expanded footprints would overlap — and writes it here. `ui.isFrameExpanded`
- * reads `canExpand` to decide whether the zoom band may open a frame.
- *
- * `driverActive` lets the gate degrade gracefully: with no board driver mounted
- * (e.g. the focus view, or a frame rendered in isolation / tests) `canExpand`
- * falls back to "allowed", so the plain zoom behaviour is unchanged.
- */
-export const useFrameExpansionStore = defineStore('frameExpansion', () => {
-  const allowed = ref<Set<string>>(new Set())
-  const driverActive = ref(false)
-
-  function setAllowed(ids: Set<string>) {
-    allowed.value = ids
-  }
-
-  function setDriverActive(active: boolean) {
-    driverActive.value = active
-    if (!active) allowed.value = new Set()
-  }
-
-  function canExpand(id: string) {
-    return driverActive.value ? allowed.value.has(id) : true
-  }
-
-  return { allowed, driverActive, setAllowed, setDriverActive, canExpand }
-})