@cat-factory/app 0.26.1 → 0.26.3

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/settings/OpenRouterCatalogPanel.vue

@@ -30,6 +30,7 @@ const RECOMMENDED_SLUGS = [
   'openai/gpt-5.5',
   'google/gemini-3-pro',
   'deepseek/deepseek-chat',
+  'moonshotai/kimi-k2.7-code',
 ]
 
 // Whether the workspace/user has an OpenRouter key connected at any reachable scope.
@@ -105,18 +106,35 @@ async function connectKey() {
   if (!keyValue.value.trim() || !workspace.workspaceId) return
   connectingKey.value = true
   try {
+    const scope = keyScope.value
     const input = {
       provider: 'openrouter' as const,
       label: keyLabel.value.trim() || 'openrouter key',
       key: keyValue.value.trim(),
     }
-    if (keyScope.value === 'workspace') await apiKeys.addWorkspaceKey(input)
-    else await apiKeys.addUserKey(input)
+    // The save endpoint stores the key WITHOUT validating it, so a wrong/expired key
+    // would otherwise be reported as "connected". Probe OpenRouter with the freshly
+    // stored key and only announce success when it's actually reachable; on rejection
+    // roll the key back so `keyConnected` stays false and the form remains for a retry.
+    const created =
+      scope === 'workspace' ? await apiKeys.addWorkspaceKey(input) : await apiKeys.addUserKey(input)
+    const result = await store.refresh(workspace.workspaceId)
+    if (!result.reachable) {
+      if (created) {
+        if (scope === 'workspace') await apiKeys.removeWorkspaceKey(created.id).catch(() => {})
+        else await apiKeys.removeUserKey(created.id).catch(() => {})
+      }
+      toast.add({
+        title: 'Could not connect key',
+        description: store.refreshError ?? 'OpenRouter rejected the key.',
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+      return
+    }
     keyValue.value = ''
     keyLabel.value = ''
     toast.add({ title: 'OpenRouter key connected', icon: 'i-lucide-check', color: 'success' })
-    // Now that a key exists, load the live catalog automatically.
-    await refresh()
   } catch (e) {
     toast.add({
       title: 'Could not connect key',

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/apiKeys.ts

@@ -39,6 +39,7 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
     if (!workspaceId.value) return
     const created = await api.addWorkspaceApiKey(workspaceId.value, input)
     workspaceKeys.value = [...workspaceKeys.value, created]
+    return created
   }
 
   async function removeWorkspaceKey(id: string) {
@@ -50,6 +51,7 @@ export const useApiKeysStore = defineStore('apiKeys', () => {
   async function addUserKey(input: AddApiKeyInput) {
     const created = await api.addMyApiKey(input)
     userKeys.value = [...userKeys.value, created]
+    return created
   }
 
   async function removeUserKey(id: string) {

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.1",
+  "version": "0.26.3",
   "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 }
-})