@cat-factory/app 0.283.0 → 0.284.0

package/README.md

@@ -1030,6 +1030,25 @@ event left to restore it.
   (`refreshMark()` / `hydratedSince()`) and stands down if so, which is what stops a mutation that
   refreshes directly AND raises a coarse event from paying for two snapshots. That skip rests on
   the server emitting a coarse `board` event only after committing what it announces.
+- **The board snapshot's runs are a LEAN PROJECTION, so a hydrate can WITHHOLD what it does not
+  clobber.** `projectExecutionForBoard` (contracts) strips each step's captured prose from the
+  snapshot's executions and stamps the instance `projected`; a live `execution` event still carries
+  the whole run. Two rules follow, and both are the clobber rule in a new shape. A step-detail
+  surface fetches the run before rendering (`execution.ensureFull`, asked by the two overlay HOSTS
+  so no window can forget) and reads `stepHasOutput`, never `step.output`, for the "there is prose
+  here" affordance. And the store's reconcile carries the withheld fields forward ONLY at an equal
+  `rev`: at the same revision the withheld prose IS what the cache holds, one revision later it may
+  not be, so a newer projection replaces and the open overlay re-fetches.
+- **`execution.instances` is a `shallowRef`, so a write must both TRIGGER and change IDENTITY.**
+  Nothing under the ref is a reactive proxy any more, so the only dependency a reader can hold is
+  the ref itself, and nearly every reader holds it through an identity-stable chain
+  (`computed(() => getInstance(id))` to `steps[i]` to one field). `triggerRef` re-runs the FIRST
+  computed in that chain, and Vue stops propagating when its recomputed value is `===` the previous
+  one, so a run patched in place reaches that computed and nothing below it. `upsert` replaces the
+  run object; `echoAfter` applies the action store's patch to a COPY of the run and its steps and
+  swaps that in. A missing trigger and an in-place patch are both SILENT, so
+  `stores/execution.spec.ts` pins each write shape twice: once on the array, once through the
+  `getInstance` chain a window actually reads.
 - **Pin it with a store-level unit test** (`stores/workspace.spec.ts` for refreshes,
   `stores/workspace/refreshFunnel.spec.ts` for the funnel's own rules, `stores/execution.spec.ts`
   for echoes): drive the two orderings and assert the fresher one wins.

package/app/components/board/BoardCanvas.logic.spec.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import {
+  createBoardNodeProjection,
+  frameZIndex,
+  type BoardNodeSource,
+} from '~/components/board/BoardCanvas.logic'
+
+const NO_STACK = { draggingId: null, hoveredFrameId: null }
+
+function at(id: string, x = 0, y = 0): BoardNodeSource {
+  return { id, position: { x, y } }
+}
+
+describe('frameZIndex', () => {
+  it('lifts the dragged frame above the hovered one, and both above the rest', () => {
+    const stacking = { draggingId: 'dragged', hoveredFrameId: 'hovered' }
+    expect(frameZIndex('dragged', stacking)).toBeGreaterThan(frameZIndex('hovered', stacking))
+    expect(frameZIndex('hovered', stacking)).toBeGreaterThan(frameZIndex('other', stacking))
+  })
+})
+
+describe('createBoardNodeProjection', () => {
+  it('projects frames and epics with the fields the canvas binds', () => {
+    const project = createBoardNodeProjection()
+    const [frame, epic] = project([at('f1', 10, 20)], [at('e1', 30, 40)], NO_STACK)
+    expect(frame).toMatchObject({
+      id: 'f1',
+      type: 'block',
+      position: { x: 10, y: 20 },
+      draggable: false,
+      zIndex: 1,
+    })
+    expect(epic).toMatchObject({
+      id: 'e1',
+      type: 'epic',
+      position: { x: 30, y: 40 },
+      draggable: true,
+    })
+  })
+
+  // The whole point of the memo: a hover changes two nodes, so it must allocate two nodes.
+  it('reuses every node a hover did not change', () => {
+    const project = createBoardNodeProjection()
+    const frames = [at('a'), at('b'), at('c')]
+    const before = project(frames, [], NO_STACK)
+    const after = project(frames, [], { draggingId: null, hoveredFrameId: 'b' })
+
+    expect(after[0]).toBe(before[0])
+    expect(after[2]).toBe(before[2])
+    expect(after[1]).not.toBe(before[1])
+    expect(after[1]!.zIndex).toBeGreaterThan(before[1]!.zIndex!)
+  })
+
+  it('rebuilds a node whose position moved', () => {
+    const project = createBoardNodeProjection()
+    const before = project([at('a', 0, 0)], [], NO_STACK)
+    const after = project([at('a', 5, 0)], [], NO_STACK)
+    expect(after[0]).not.toBe(before[0])
+    expect(after[0]!.position).toEqual({ x: 5, y: 0 })
+  })
+
+  it('does not keep a removed frame alive in the memo', () => {
+    const project = createBoardNodeProjection()
+    const first = project([at('a'), at('b')], [], NO_STACK)
+    project([at('b')], [], NO_STACK)
+    // 'a' is gone from the cache, so its return is a fresh object rather than the stale one.
+    const back = project([at('a'), at('b')], [], NO_STACK)
+    expect(back[0]).not.toBe(first[0])
+    expect(back.map((n) => n.id)).toEqual(['a', 'b'])
+  })
+})

package/app/components/board/BoardCanvas.logic.ts

@@ -0,0 +1,92 @@
+/**
+ * The board's Vue Flow node projection, and the memo that keeps a hover cheap.
+ *
+ * Only frames and epics are canvas nodes (tasks live inside their frame, laid out in swimlanes).
+ * The projection is trivial, but it is recomputed for a reason that has nothing to do with the
+ * board changing: a frame's `zIndex` encodes the STACKING state (which frame is being dragged,
+ * which is hovered), so every pointer move between two overlapping services re-derived the whole
+ * array, and Vue Flow re-diffed every node in it against a set of freshly allocated objects that
+ * were, for all but one or two, identical to the ones it already held.
+ *
+ * Memoising per node fixes that without changing what the array contains: the key carries every
+ * field the node has, so a node whose fields are unchanged comes back as the SAME object and a
+ * changed one is rebuilt. A hover then allocates two nodes instead of all of them, and Vue Flow's
+ * diff sees two changes instead of N.
+ *
+ * The cache is rebuilt from the hits of each pass, so a deleted frame's entry does not outlive it.
+ */
+export interface BoardNodeSource {
+  id: string
+  position: { x: number; y: number }
+}
+
+export interface BoardFlowNode {
+  id: string
+  type: 'block' | 'epic'
+  position: { x: number; y: number }
+  draggable: boolean
+  zIndex?: number
+  data: Record<string, never>
+}
+
+/** Where a frame sits in the stack: dragged on top, then hovered, then everything else. */
+export interface FrameStacking {
+  draggingId: string | null
+  hoveredFrameId: string | null
+}
+
+/**
+ * Vue Flow's `elevate-nodes-on-select` is OFF (see BoardCanvas), so stacking is driven purely by
+ * these two: the frame being dragged is lifted above all, then the hovered one (the un-obscured
+ * frame under the pointer), so overlapping services can always be reached and reordered.
+ */
+export function frameZIndex(id: string, stacking: FrameStacking): number {
+  if (stacking.draggingId === id) return 1000
+  if (stacking.hoveredFrameId === id) return 100
+  return 1
+}
+
+export function createBoardNodeProjection() {
+  let cache = new Map<string, BoardFlowNode>()
+
+  return function project(
+    frames: readonly BoardNodeSource[],
+    epics: readonly BoardNodeSource[],
+    stacking: FrameStacking,
+  ): BoardFlowNode[] {
+    const next = new Map<string, BoardFlowNode>()
+    const nodes: BoardFlowNode[] = []
+
+    const take = (key: string, build: () => BoardFlowNode) => {
+      const node = cache.get(key) ?? build()
+      next.set(key, node)
+      nodes.push(node)
+    }
+
+    for (const frame of frames) {
+      const zIndex = frameZIndex(frame.id, stacking)
+      take(`block|${frame.id}|${frame.position.x}|${frame.position.y}|${zIndex}`, () => ({
+        id: frame.id,
+        type: 'block',
+        position: { x: frame.position.x, y: frame.position.y },
+        // 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,
+        zIndex,
+        data: {},
+      }))
+    }
+    for (const epic of epics) {
+      take(`epic|${epic.id}|${epic.position.x}|${epic.position.y}`, () => ({
+        id: epic.id,
+        type: 'epic',
+        position: { x: epic.position.x, y: epic.position.y },
+        draggable: true,
+        data: {},
+      }))
+    }
+
+    cache = next
+    return nodes
+  }
+}

package/app/components/board/BoardCanvas.vue

@@ -14,6 +14,7 @@ import { useFrameStacking } from '~/composables/useFrameStacking'
 import { useFramePlacement } from '~/composables/useFramePlacement'
 import { useViewport } from '~/composables/useViewport'
 import { boardPanMode } from '~/utils/boardPanMode'
+import { createBoardNodeProjection } from './BoardCanvas.logic'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -70,33 +71,19 @@ useTaskExpansion(boardEl, boardActivity)
 // default adds +1000 to a selected node's z-index, so a frame stayed pinned on top
 // after a click and no amount of hovering another frame could surface it. Stacking
 // is driven purely by hover/drag here; the selection highlight is the ring, not z.
-function frameZIndex(id: string) {
-  if (draggingId.value === id) return 1000
-  if (hoveredFrameId.value === id) return 100
-  return 1
-}
-
-const nodes = computed(() => [
-  ...board.frames.map((b) => ({
-    id: b.id,
-    type: 'block',
-    position: { x: b.position.x, y: b.position.y },
-    // 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,
-    zIndex: frameZIndex(b.id),
-    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: { x: b.position.x, y: b.position.y },
-    draggable: true,
-    data: {},
-  })),
-])
+//
+// The projection is MEMOISED per node (`BoardCanvas.logic.ts`) because the stacking state is
+// what changes most often: a pointer moving between two overlapping services rebuilt every
+// node object on the board, for a change that concerns two of them. Epics are top-level
+// grouping nodes (non-structural), drawn alongside frames and linked to their member tasks by
+// the dependency-edge overlay.
+const projectNodes = createBoardNodeProjection()
+const nodes = computed(() =>
+  projectNodes(board.frames, board.epics, {
+    draggingId: draggingId.value,
+    hoveredFrameId: hoveredFrameId.value,
+  }),
+)
 
 onNodeDragStop(({ node }) => {
   board.moveBlock(node.id, node.position)

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AgentState, PipelineStep } from '~/types/domain'
+import { stepHasOutput } from '@cat-factory/contracts'
 import { agentKindMeta } from '~/utils/catalog'
 import {
   subtaskIconClass,
@@ -120,7 +121,7 @@ const ITEM_ICON: Record<string, string> = {
           {{ agentKindMeta(s.agentKind).label }}
         </span>
         <UIcon
-          v-if="s.output"
+          v-if="stepHasOutput(s)"
           name="i-lucide-file-text"
           class="h-2.5 w-2.5 shrink-0 text-slate-500"
         />

package/app/components/panels/AgentStepDetail.vue

@@ -28,6 +28,7 @@ import {
   runIsActive,
 } from '~/utils/pipelineRender'
 import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
+import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
 // inspector list (TaskExecution) or the focus-view pipeline (PipelineProgress) via
@@ -53,6 +54,24 @@ const instance = computed(() => execution.getInstance(ctx.value?.instanceId))
 const step = computed(() =>
   ctx.value ? (instance.value?.steps[ctx.value.stepIndex] ?? null) : null,
 )
+/**
+ * The run this overlay is about, and the fetch that makes it WHOLE. The board snapshot carries a
+ * lean projection (`projectExecutionForBoard`) whose steps withhold the very prose this reader
+ * renders, so opening a step asks for the run behind it. A run the store already holds whole (one
+ * a live `execution` event delivered, or one already fetched) costs nothing.
+ *
+ * Watched through `fullFetchKey` rather than the id, because the run does not stop being a
+ * projection once this overlay is open: any full refresh lands a lean projection over it, and at a
+ * NEWER revision the store cannot carry the cached prose forward. Keyed on the id, the reader
+ * would blank under an open overlay with nothing left to refill it.
+ */
+watch(
+  () => execution.fullFetchKey(ctx.value?.instanceId ?? null),
+  () => void execution.ensureFull(ctx.value?.instanceId ?? null),
+  {
+    immediate: true,
+  },
+)
 const block = computed(() => (instance.value ? board.getBlock(instance.value.blockId) : undefined))
 const agent = computed(() => (step.value ? agentKindMeta(step.value.agentKind) : null))
 const open = computed(() => !!ctx.value && !!step.value)
@@ -265,6 +284,9 @@ const approval = useStepApproval({
   approvalId: () => approvalId.value,
   approvalPending: () => approvalPending.value && !dedicatedPark.value,
   companionExceeded: () => companionExceeded.value,
+  // The editor seeds from the step's prose, which a board projection withholds until the
+  // whole-run read above lands.
+  runIsWhole: () => instance.value?.projected !== true,
   close,
 })
 const {
@@ -277,6 +299,7 @@ const {
   draftProposal,
   rejectArmed,
   canRequestChanges,
+  canEditProposal,
   quorum: gateQuorum,
   viewerHasApproved,
   approvalWouldClearGate,
@@ -487,6 +510,9 @@ async function copyOutput() {
         </div>
       </header>
 
+      <!-- Whether the whole-run fetch behind this reader's prose has landed. -->
+      <RunDetailLoadState :instance-id="ctx?.instanceId ?? null" />
+
       <div ref="scrollEl" class="flex-1 overflow-auto px-6 py-6" @scroll="onScroll">
         <div class="mx-auto max-w-3xl space-y-5">
           <!-- metadata card (always shown) -->
@@ -974,7 +1000,7 @@ async function copyOutput() {
           size="sm"
           icon="i-lucide-pencil"
           block
-          :disabled="rejectArmed || submitting || !!gateRefusal"
+          :disabled="rejectArmed || submitting || !!gateRefusal || !canEditProposal"
           @click="startEditing"
         >
           {{ t('panels.stepDetail.approveWithCorrections') }}

package/app/components/panels/ResultWindowShell.vue

@@ -23,6 +23,7 @@
 import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
+import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 import StepEffortReport from '~/components/panels/StepEffortReport.vue'
 import StepValidationReport from '~/components/panels/StepValidationReport.vue'
 import StepReproductionReport from '~/components/panels/StepReproductionReport.vue'
@@ -134,6 +135,22 @@ const activeStep = computed(() => {
   return execution.getInstance(view.instanceId)?.steps[view.stepIndex] ?? null
 })
 const effortReport = computed(() => activeStep.value?.effortReport ?? null)
+/**
+ * The run this window is about, and the fetch that makes it WHOLE. The board snapshot carries a
+ * lean projection (`projectExecutionForBoard`) whose steps withhold their captured prose, which is
+ * exactly what the windows mounted in this slot render. Asking here rather than in each window is
+ * the same reasoning as the trailing sections above: the host mounts exactly one window, so no
+ * window can forget to ask, and a run already held whole costs nothing (`ensureFull` returns).
+ */
+const activeInstanceId = computed(() => ui.resultView?.instanceId ?? null)
+// Watched through `fullFetchKey`, not the id: a full refresh lands a lean projection over an open
+// run, and at a newer revision the store cannot carry the cached prose forward, so the window has
+// to ask again rather than render the withheld fields as an absence.
+watch(
+  () => execution.fullFetchKey(activeInstanceId.value),
+  () => void execution.ensureFull(activeInstanceId.value),
+  { immediate: true },
+)
 // The step's PRE-PR VALIDATION report — the second universal trailing section, resolved the same
 // way and for the same reason: every window whose step ran a coding job can show whether the
 // checkout actually passed the service's checks before the PR opened (and, on a red run, exactly
@@ -291,6 +308,8 @@ const panelClass = computed(() => [
             <UIcon name="i-lucide-x" class="h-4 w-4" />
           </button>
         </header>
+        <!-- Whether the whole-run fetch behind this window's prose has landed. -->
+        <RunDetailLoadState :instance-id="activeInstanceId" />
         <!-- The window body. -->
         <slot />
 

package/app/components/panels/RunDetailLoadState.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * The one-line state of the WHOLE-RUN fetch a step-detail surface depends on.
+ *
+ * The board snapshot carries a lean projection of every run: each step's captured prose is
+ * WITHHELD, not absent (`projectExecutionForBoard`). A window that renders that prose asks the
+ * store for the whole run on open, and until that read lands (or when it fails) the surface has
+ * nothing to say about the prose. Both states have to be visible, because an empty reader and a
+ * failed fetch look identical and only one of them means "this step said nothing".
+ *
+ * Renders nothing for a run the store already holds whole, which is every run a live `execution`
+ * event delivered and every run already fetched once.
+ */
+import { computed } from 'vue'
+
+const props = defineProps<{ instanceId: string | null }>()
+
+const execution = useExecutionStore()
+const { t } = useI18n()
+
+const loading = computed(() => execution.isFullPending(props.instanceId))
+const error = computed(() => execution.fullError(props.instanceId))
+</script>
+
+<template>
+  <div
+    v-if="loading || error"
+    class="flex items-center gap-2 border-b border-slate-800 px-4 py-2 text-[11px]"
+    :class="error ? 'text-rose-300' : 'text-slate-400'"
+    data-testid="run-detail-load-state"
+  >
+    <UIcon
+      :name="error ? 'i-lucide-triangle-alert' : 'i-lucide-loader-circle'"
+      class="h-3.5 w-3.5 shrink-0"
+      :class="error ? '' : 'animate-spin'"
+    />
+    <span>{{
+      error ? t('panels.runDetail.loadFailed', { reason: error }) : t('panels.runDetail.loading')
+    }}</span>
+  </div>
+</template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDryRun } from '@cat-factory/contracts'
+import { isDryRun, stepHasOutput } from '@cat-factory/contracts'
 import type { Block } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
 import {
@@ -390,7 +390,7 @@ async function mergePr() {
               class="flex min-w-0 cursor-pointer items-center gap-2 text-start transition hover:text-white"
               data-testid="run-step-open"
               :title="
-                s.output
+                stepHasOutput(s)
                   ? t('inspector.execution.viewDetailsOutput')
                   : t('inspector.execution.viewDetails')
               "
@@ -412,7 +412,7 @@ async function mergePr() {
                 {{ t('inspector.execution.companion') }}
               </span>
               <UIcon
-                :name="s.output ? 'i-lucide-book-open-text' : 'i-lucide-info'"
+                :name="stepHasOutput(s) ? 'i-lucide-book-open-text' : 'i-lucide-info'"
                 class="h-3.5 w-3.5 shrink-0 text-slate-500"
               />
             </button>

package/app/components/pipeline/PipelineProgress.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AgentState, ExecutionInstance } from '~/types/domain'
 import type { PipelineStep } from '~/types/execution'
+import { stepHasOutput } from '@cat-factory/contracts'
 import { agentKindMeta, FOLLOW_UP_COMPANION_META, FORK_DECISION_META } from '~/utils/catalog'
 import {
   subtaskIconClass,
@@ -341,7 +342,7 @@ const ITEM_ICON: Record<string, string> = {
             data-testid="pipeline-step"
             :data-step-kind="s.agentKind"
             :title="
-              s.output
+              stepHasOutput(s)
                 ? t('pipeline.progress.viewDetailsOutput')
                 : t('pipeline.progress.viewDetails')
             "
@@ -441,7 +442,7 @@ const ITEM_ICON: Record<string, string> = {
             </template>
 
             <UIcon
-              :name="s.output ? 'i-lucide-book-open-text' : 'i-lucide-info'"
+              :name="stepHasOutput(s) ? 'i-lucide-book-open-text' : 'i-lucide-info'"
               class="h-4 w-4 shrink-0 text-slate-500 transition-colors group-hover:text-indigo-300"
             />
           </div>
@@ -555,7 +556,10 @@ const ITEM_ICON: Record<string, string> = {
 
           <!-- A one-line hint that the agent produced prose; the full output (and
                all step metadata) lives in the step-detail overlay opened by click. -->
-          <p v-if="s.output" class="mt-2 flex items-center gap-1 text-[11px] text-slate-500">
+          <p
+            v-if="stepHasOutput(s)"
+            class="mt-2 flex items-center gap-1 text-[11px] text-slate-500"
+          >
             <UIcon name="i-lucide-book-open-text" class="h-3 w-3 shrink-0" />
             {{ t('pipeline.progress.clickToRead') }}
           </p>

package/app/composables/api/execution.ts

@@ -3,6 +3,7 @@ import {
   cancelExecutionContract,
   exportExecutionLlmMetricsContract,
   getExecutionAgentContextContract,
+  getExecutionContract,
   getExecutionLlmMetricsContract,
   getExecutionSearchQueriesContract,
   getExecutionToolCallFailuresContract,
@@ -42,6 +43,17 @@ export function executionApi({ send, sendWith, ws, pwHeaders }: ApiContext) {
         body,
       }),
 
+    /**
+     * One run, WHOLE. The board snapshot serves a lean projection that withholds each step's
+     * captured prose, so a step-detail overlay fetches the run it is about through here before
+     * rendering. See `projectExecutionForBoard`.
+     */
+    getExecution: (workspaceId: string, executionId: string) =>
+      send(getExecutionContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { executionId },
+      }),
+
     /**
      * Start ONE agent kind against a block — a run with no pipeline behind it (the service
      * frame's "Map service" action, the environment wizard's deep analysis). Gated on the

package/app/composables/useBlockDrag.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+import { tryOnScopeDispose } from '@vueuse/core'
 import type { Block } from '~/types/domain'
 
 // Only one block is ever dragged at a time, so the dragged id is a module-level
@@ -27,6 +28,18 @@ export function useBlockDrag() {
   const ui = useUiStore()
   const access = useWorkspaceAccess()
 
+  /**
+   * Tear down the in-flight drag's window listeners.
+   *
+   * They used to be removed inside `onUp` alone, which covers only the drag that ENDS. A touch
+   * interruption (an incoming call, a system gesture) fires `pointercancel` and no `pointerup`,
+   * and unmounting the dragging component fires neither, so both stranded a `pointermove` and a
+   * `pointerup` on `window` plus a `draggingId` that never cleared, leaving the card dimmed and
+   * every frame's z-index elevated for the rest of the session.
+   */
+  let endDrag: (() => void) | null = null
+  tryOnScopeDispose(() => endDrag?.())
+
   function startDrag(
     block: Block,
     e: PointerEvent,
@@ -65,9 +78,32 @@ export function useBlockDrag() {
       // undoes. The `draggingId` state the card dims itself with is the whole feedback.
       if (positioned) board.previewMove(block.id, last)
     }
+    // What is currently bound to `window`, so the teardown below needs no forward reference to
+    // the handlers that call it.
+    const bound: Array<[string, (ev: PointerEvent) => void]> = []
+    /**
+     * Stop listening and clear the drag state, WITHOUT committing anything. The shared exit for
+     * every way a drag ends: the drop commits first and then calls this, and a cancel (a
+     * `pointercancel`, or the component unmounting mid-drag) calls it alone.
+     */
+    const detach = () => {
+      for (const [type, handler] of bound) {
+        window.removeEventListener(type, handler as EventListener)
+      }
+      bound.length = 0
+      endDrag = null
+      draggingId.value = null
+    }
+    /**
+     * A drag the pointer never finished. Nothing is persisted, so the local preview has to go
+     * back where it started: leaving it would show a position the server does not hold and the
+     * next refresh would silently snap the block back.
+     */
+    const onCancel = () => {
+      if (moved && positioned) board.previewMove(block.id, orig)
+      detach()
+    }
     const onUp = (ev: PointerEvent) => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
       if (moved) {
         // A successful reparent persists the move itself; otherwise commit the final
         // position in place. Either way it's a single write, not one per frame. Run
@@ -76,10 +112,20 @@ export function useBlockDrag() {
         const reparented = opts.reparent && reparentAt(block, ev.clientX, ev.clientY, positioned)
         if (!reparented && positioned) void board.moveBlock(block.id, last)
       }
-      draggingId.value = null
+      detach()
+    }
+    // A second drag can only start after the first released or cancelled, but a stale listener
+    // set would silently drive it; end whatever is still attached before attaching this one.
+    endDrag?.()
+    endDrag = onCancel
+    for (const binding of [
+      ['pointermove', onMove],
+      ['pointerup', onUp],
+      ['pointercancel', onCancel],
+    ] as Array<[string, (ev: PointerEvent) => void]>) {
+      bound.push(binding)
+      window.addEventListener(binding[0], binding[1] as EventListener)
     }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
   }
 
   /** Returns true when the block was dropped into a *different* container. */

package/app/composables/useSingleFlight.spec.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest'
+import { useSingleFlight } from '~/composables/useSingleFlight'
+
+describe('useSingleFlight', () => {
+  it('joins concurrent callers of one key onto a single call', async () => {
+    const fn = vi.fn(() => Promise.resolve('answer'))
+    const flight = useSingleFlight<string, string>()
+
+    const [a, b] = await Promise.all([flight.run('k', fn), flight.run('k', fn)])
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect([a, b]).toEqual(['answer', 'answer'])
+  })
+
+  it('keeps different keys apart', async () => {
+    const fn = vi.fn((k: string) => Promise.resolve(k))
+    const flight = useSingleFlight<string, string>()
+
+    await Promise.all([flight.run('a', () => fn('a')), flight.run('b', () => fn('b'))])
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  it('coalesces rather than caches: a later call runs again', async () => {
+    const fn = vi.fn(() => Promise.resolve('answer'))
+    const flight = useSingleFlight<string, string>()
+
+    await flight.run('k', fn)
+    expect(flight.isRunning('k')).toBe(false)
+    await flight.run('k', fn)
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  it('gives every joiner the same failure, and lets the next caller retry', async () => {
+    const fn = vi.fn(() => Promise.reject(new Error('boom')))
+    const flight = useSingleFlight<string, string>()
+
+    const results = await Promise.allSettled([flight.run('k', fn), flight.run('k', fn)])
+    expect(results.map((r) => r.status)).toEqual(['rejected', 'rejected'])
+    expect(fn).toHaveBeenCalledTimes(1)
+
+    await expect(flight.run('k', () => Promise.resolve('ok'))).resolves.toBe('ok')
+  })
+})

package/app/composables/useSingleFlight.ts

@@ -0,0 +1,37 @@
+/**
+ * Coalesce concurrent calls that ask for the SAME thing onto one request.
+ *
+ * Panel loads are the case this exists for: two openers routinely fire in the same tick (a window
+ * and the shell it mounts in, a deep link plus the click that follows it, a tab restoring its own
+ * state), and each fired its own fetch of the heaviest read on that surface. The second answer is
+ * byte-for-byte the first, so the only thing the duplicate adds is load and a second chance to
+ * land out of order.
+ *
+ * The in-flight entry is dropped when the promise SETTLES, so a later call re-fetches: this
+ * coalesces concurrent work, it does not cache the answer. A rejection propagates to every joiner,
+ * which is what makes joining equivalent to having asked.
+ *
+ * It does NOT replace a store's load-ordering ticket. Coalescing removes the duplicates a single
+ * key can produce; a ticket settles which of two loads issued at different times may commit.
+ */
+export function useSingleFlight<K, T>() {
+  const inFlight = new Map<K, Promise<T>>()
+
+  /** Run `fn` for `key`, or join the call already running for it. */
+  function run(key: K, fn: () => Promise<T>): Promise<T> {
+    const pending = inFlight.get(key)
+    if (pending) return pending
+    const promise = fn().finally(() => {
+      inFlight.delete(key)
+    })
+    inFlight.set(key, promise)
+    return promise
+  }
+
+  /** Whether a call for `key` is currently running. */
+  function isRunning(key: K): boolean {
+    return inFlight.has(key)
+  }
+
+  return { run, isRunning }
+}