@cat-factory/app 0.280.0 → 0.280.1

package/README.md

@@ -86,6 +86,29 @@ the animation that follows, parking once the output has held still for a few fra
 half works alone: a signal fires one frame BEFORE the transition it starts has any geometry, and
 a bare frame loop never stops.
 
+**The pulse does not treat its signals alike, and a driver must not assume it does.** What the
+user is moving (pointer, wheel, scroll, resize, the camera's own `pulse()`) wakes the loops
+immediately, because a lagging arrow under a drag is the bug this whole design exists to fix.
+RENDERS do not: a live board re-renders its cards on every execution event, and admitting each
+one kept the loops awake forever on exactly the board where measuring costs most, so mutations
+go through a rate limit (`utils/boardWakeGate.ts`, one wake led in immediately and then at most
+one per 250ms while the stream lasts). The cost is stated rather than hidden: a geometry change
+caused purely by a re-render, a badge appearing and growing a card, can take up to that interval
+to be followed. A driver that needs a signal the DOM cannot show, a link set changing with no
+card moving, watches its own reactive source and pokes, the way `TaskDependencyEdges` watches
+its four link lists.
+
+The gesture listeners are on the WINDOW, not on the canvas element. A drag does not stop at the
+canvas's edge (`useBlockDrag` tracks the pointer on the window for exactly that reason) and the
+top overlay region and the inspector are siblings painted OVER the canvas, so a canvas-bound
+listener went quiet for as long as the cursor crossed one of them.
+
+**Measure through `utils/blockRects.ts`, never a `querySelector` per card.** `measureBlocks()`
+hands a pass one snapshot: the cards resolved in one query, first-in-document-order per id, and
+each rect read at most once. It is what makes a wake cheap enough for the rate limit above to be
+a saving rather than a way of hiding an expensive pass, and it is lazy, so a pass that resolves
+nothing (a board with no links at all) touches no DOM.
+
 Two things this cost, both worth knowing before adding a third driver. `compute` returning
 `true` unconditionally silently restores the old behaviour, which is why the loop's contract is
 stated in terms of what the user can see rather than what the function did. And the pulse
@@ -102,7 +125,9 @@ font resizing a card. That leaves an arrow stale until the next pulse of any kin
 deliberate trade: firing too often costs a handful of frames, and the alternative is the loop
 that never sleeps.
 
-`app/utils/settlingLoop.spec.ts` pins the loop against a hand-driven frame clock.
+`app/utils/settlingLoop.spec.ts` pins the loop against a hand-driven frame clock;
+`boardWakeGate.spec.ts` pins that the rate limit delivers every suppressed wake rather than
+dropping it, and `blockRects.spec.ts` that a snapshot resolves and measures each card once.
 
 ### A store must be instantiable outside a component `setup`
 

package/app/components/board/TaskDependencyEdges.vue

@@ -3,6 +3,7 @@ import { ref, shallowRef, computed, watch } from 'vue'
 import { useBoardActivity } from '~/composables/useBoardActivity'
 import { useSettlingRaf } from '~/composables/useSettlingRaf'
 import { commitSegments, type EdgeSegment } from '~/utils/edgeSegments'
+import { measureBlocks, type BlockMeasurements } from '~/utils/blockRects'
 
 /**
  * Draws dependency arrows between task cards as an SVG overlay on top of the
@@ -11,9 +12,11 @@ import { commitSegments, type EdgeSegment } from '~/utils/edgeSegments'
  * zoom / drag / expand for free. When a task's frame is collapsed (its card
  * isn't rendered), the arrow anchors to the frame card instead.
  *
- * Measuring is O(edges) `querySelector` + forced layout reads, so it runs only
- * while something is actually moving: the board's activity pulse wakes it and
- * `useSettlingRaf` parks it again once the resolved segments hold still.
+ * Measuring costs forced layout reads, so it runs only while something is actually
+ * moving: the board's activity pulse wakes it and `useSettlingRaf` parks it again
+ * once the resolved segments hold still. Within one pass the cards are resolved and
+ * measured through a single shared snapshot (`measureBlocks`), so a task with five
+ * dependencies is found and measured once rather than five times.
  */
 const board = useBoardStore()
 
@@ -91,10 +94,10 @@ const connectionLinks = computed(() => {
 
 /** Resolve a task's anchor: walk up task → module → service to the first card
  * that's actually rendered (a container may be collapsed). */
-function anchorEl(taskId: string): HTMLElement | null {
+function anchorEl(taskId: string, blocks: BlockMeasurements): HTMLElement | null {
   let cur = board.getBlock(taskId)
   while (cur) {
-    const el = document.querySelector(`[data-block-id="${cur.id}"]`) as HTMLElement | null
+    const el = blocks.elementFor(cur.id)
     if (el) return el
     cur = cur.parentId ? board.getBlock(cur.parentId) : undefined
   }
@@ -112,12 +115,17 @@ function border(cx: number, cy: number, hw: number, hh: number, tx: number, ty:
 
 /** Resolve the on-screen, origin-relative border-to-border segment between two blocks,
  * or null when either end is missing or both collapsed into the same frame. */
-function segmentBetween(sourceId: string, targetId: string, origin: DOMRect) {
-  const a = anchorEl(sourceId)
-  const b = anchorEl(targetId)
+function segmentBetween(
+  sourceId: string,
+  targetId: string,
+  origin: DOMRect,
+  blocks: BlockMeasurements,
+) {
+  const a = anchorEl(sourceId, blocks)
+  const b = anchorEl(targetId, blocks)
   if (!a || !b || a === b) return null // missing, or both collapsed into the same frame
-  const ra = a.getBoundingClientRect()
-  const rb = b.getBoundingClientRect()
+  const ra = blocks.rectFor(a)
+  const rb = blocks.rectFor(b)
   const ax = ra.left + ra.width / 2 - origin.left
   const ay = ra.top + ra.height / 2 - origin.top
   const bx = rb.left + rb.width / 2 - origin.left
@@ -131,10 +139,11 @@ function segmentBetween(sourceId: string, targetId: string, origin: DOMRect) {
 function linkSegments(
   links: { id: string; source: string; target: string }[],
   origin: DOMRect,
+  blocks: BlockMeasurements,
 ): EdgeSegment[] {
   const out: EdgeSegment[] = []
   for (const link of links) {
-    const seg = segmentBetween(link.source, link.target, origin)
+    const seg = segmentBetween(link.source, link.target, origin, blocks)
     if (seg) out.push({ id: link.id, ...seg })
   }
   return out
@@ -145,10 +154,12 @@ function recompute(): boolean {
   const el = svg.value
   if (!el) return false
   const origin = el.getBoundingClientRect()
+  // One snapshot for the whole pass: every overlay below resolves and measures through it.
+  const blocks = measureBlocks()
 
   const deps: EdgeSegment[] = []
   for (const d of taskDeps.value) {
-    const seg = segmentBetween(d.source, d.target, origin)
+    const seg = segmentBetween(d.source, d.target, origin, blocks)
     if (!seg) continue
     deps.push({ id: d.id, ...seg, done: board.getBlock(d.source)?.status === 'done' })
   }
@@ -157,9 +168,9 @@ function recompute(): boolean {
   // would short-circuit and leave the later overlays drawn at stale coordinates.
   return [
     commitSegments(segments, deps),
-    commitSegments(memberSegments, linkSegments(epicLinks.value, origin)),
-    commitSegments(frontendSegments, linkSegments(frontendLinks.value, origin)),
-    commitSegments(connectionSegments, linkSegments(connectionLinks.value, origin)),
+    commitSegments(memberSegments, linkSegments(epicLinks.value, origin, blocks)),
+    commitSegments(frontendSegments, linkSegments(frontendLinks.value, origin, blocks)),
+    commitSegments(connectionSegments, linkSegments(connectionLinks.value, origin, blocks)),
   ].some(Boolean)
 }
 

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

@@ -372,8 +372,13 @@ function selectTask() {
     </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. -->
+         truncating to an unreadable stub; the full text stays available on hover.
+
+         It is also the card's SELECTION affordance for tests: every action button below stops
+         propagation, so a click resolved to one of them never reaches `selectTask`, and the
+         title is the one always-rendered part of the body that no control can occupy. -->
     <div
+      data-testid="task-title"
       class="mt-1 line-clamp-2 break-words text-[11px] font-semibold leading-snug text-slate-100"
       :title="task.title"
     >

package/app/components/common/AsyncViewError.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// Shown in place of a code-split surface whose chunk failed to load. See `utils/asyncView.ts`
+// for why every async surface gets one.
+const { t } = useI18n()
+
+function reload() {
+  window.location.reload()
+}
+</script>
+
+<template>
+  <div
+    data-testid="async-view-error"
+    class="fixed inset-0 z-50 grid place-items-center bg-slate-950/80 p-6 backdrop-blur-sm"
+    role="alert"
+  >
+    <div class="max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl">
+      <div class="flex items-center gap-2 text-sm font-semibold text-slate-100">
+        <UIcon name="i-lucide-unplug" class="h-4 w-4 shrink-0 text-amber-400" />
+        {{ t('errors.asyncView.title') }}
+      </div>
+      <p class="mt-2 text-[12px] leading-relaxed text-slate-400">
+        {{ t('errors.asyncView.body') }}
+      </p>
+      <UButton class="mt-4" color="primary" variant="soft" size="xs" @click="reload">
+        {{ t('errors.asyncView.reload') }}
+      </UButton>
+    </div>
+  </div>
+</template>