@cat-factory/app 0.280.0 → 0.280.2

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/binaryCandidates/BinaryCandidatesWindow.vue

@@ -22,6 +22,7 @@ import { useBoardStore } from '~/stores/board'
 import { useBinaryCandidatesStore } from '~/stores/binaryCandidates'
 import {
   BINARY_CANDIDATE_NO_CHOICE_KEYS,
+  binaryCandidateAbsence,
   binaryCandidateHasWarnings,
   binaryCandidateView,
 } from '~/utils/binaryCandidates'
@@ -45,6 +46,16 @@ const { open, blockId, instanceId, stepIndex, close } = useResultView('binary-ca
   },
 })
 
+/**
+ * Re-run the warm-up read after a failed one (the Retry beside the error state). Refuses while one
+ * is already in flight: the store sequences its attempts so a superseded settle can't write, and
+ * this is the authoritative half, so the refusal holds for any future caller.
+ */
+function retryLoad(): void {
+  const id = instanceId.value
+  if (id && !candidates.loading) void candidates.load(id)
+}
+
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const headerTitle = computed(() =>
   block.value
@@ -59,6 +70,14 @@ const step = computed(() => {
   return instance.value.steps[stepIndex.value] ?? null
 })
 const view = computed(() => binaryCandidateView(step.value))
+/**
+ * Which of the four no-comparison states the body renders; see `binaryCandidateAbsence`. The run id
+ * is part of the question: with no run there was no read, so neither the spinner nor "nothing to
+ * compare" would be about this window.
+ */
+const absence = computed(() =>
+  binaryCandidateAbsence(candidates.loading, candidates.error, instanceId.value),
+)
 const warnings = computed(() => (view.value ? binaryCandidateHasWarnings(view.value) : false))
 const noChoiceKey = computed(() => {
   const reason = view.value?.state.noChoiceReason
@@ -95,6 +114,15 @@ function toggle(id: string): void {
   selected.value = [id]
 }
 
+/**
+ * The accessible name for a candidate's select control. Ticking one is the ONLY way to keep an
+ * asset, so this control is the gate's critical path and cannot be an unlabelled input: falls back
+ * through what the agent actually declared, ending at the id, which is always present.
+ */
+function candidateLabel(row: { label?: string; subject?: string; generator?: string; id: string }) {
+  return row.label ?? row.subject ?? row.generator ?? row.id
+}
+
 /**
  * Whether the request would be accepted. Mirrors the backend's own refusals rather than only
  * disabling on emptiness: keeping several candidates under one name would store one artifact and
@@ -125,8 +153,37 @@ async function onKeep() {
     return alias ? { candidateId, storeAs: alias } : { candidateId }
   })
   const text = note.value.trim()
-  await candidates.keep(id, { keep, ...(text ? { note: text } : {}) }).catch(() => {})
+  const kept = await candidates
+    .keep(id, { keep, ...(text ? { note: text } : {}) })
+    .then(() => true)
+    // The store records the message; the inline error strip below renders it.
+    .catch(() => false)
+  // Drop the drafts only once they are actually recorded — the window stays open as the RECORD of
+  // the decision, and leaving a submitted note in the box would make the unsaved guard below prompt
+  // over text that is already saved.
+  if (kept) {
+    note.value = ''
+    aliases.value = {}
+  }
 }
+
+/**
+ * Confirm before discarding a typed rationale or a store-as alias (UX-79). The note is the only
+ * place the reasoning behind this choice is ever written down, and the aliases are what keeps two
+ * candidates from overwriting each other, so an Escape or a stray backdrop click used to cost work
+ * with no way to get it back. Nothing typed still closes straight through.
+ */
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => close(),
+  saving: () => candidates.keeping,
+  snapshot: () => ({
+    note: note.value.trim(),
+    // Only the aliases of candidates still ticked count: one left behind on an unticked candidate
+    // is not going anywhere on Keep either, so prompting over it would be a false alarm.
+    aliases: selected.value.map((id) => (aliases.value[id] ?? '').trim()).filter(Boolean),
+  }),
+})
 </script>
 
 <template>
@@ -138,7 +195,7 @@ async function onKeep() {
     :subtitle="t('binaryCandidates.subtitle')"
     width="5xl"
     testid="binary-candidates-window"
-    @close="close"
+    @close="requestClose"
   >
     <div v-if="view" class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
       <!-- Why there was nothing to choose between. Its own line per reason: a model that never
@@ -187,14 +244,44 @@ async function onKeep() {
             v-for="row in group.rows"
             :key="row.id"
             class="rounded border p-2 transition"
-            :class="
+            :class="[
               selected.includes(row.id) || row.kept
                 ? 'border-sky-400/60 bg-sky-500/5'
-                : 'border-slate-700/60'
-            "
+                : 'border-slate-700/60',
+              view.awaiting ? 'cursor-pointer' : '',
+            ]"
             data-testid="binary-candidate-card"
             @click="toggle(row.id)"
           >
+            <!-- The REAL control, not the card's click handler: ticking a candidate is the only
+                 way to keep an asset, so without a focusable input the gate could not be completed
+                 by keyboard at all (UX-80). The whole window is ONE radio group in single-select
+                 mode, because `toggle` replaces the selection across every subject rather than per
+                 group.
+
+                 `@click.stop` belongs on the LABEL, which is the element the card's own toggle has
+                 to be shielded from. On the input alone it stopped the wrong click: activating a
+                 label forwards a synthetic click to its input (which `.stop` there does not
+                 prevent, only its propagation), so a click on the label TEXT bubbled to the card
+                 and toggled, then the forwarded click toggled back. On a checkbox that nets to no
+                 change, which means no re-render, which leaves the box ticked over a candidate
+                 that is no longer selected. -->
+            <label
+              v-if="view.awaiting"
+              class="mb-1.5 flex cursor-pointer items-center gap-2 text-[11px] text-slate-400"
+              @click.stop
+            >
+              <input
+                :type="view.multiSelect ? 'checkbox' : 'radio'"
+                name="binary-candidate"
+                class="accent-sky-500"
+                :checked="selected.includes(row.id)"
+                :aria-label="candidateLabel(row)"
+                data-testid="binary-candidate-select"
+                @change="toggle(row.id)"
+              />
+              <span class="truncate">{{ candidateLabel(row) }}</span>
+            </label>
             <!-- Staged through the platform's OWN asset storage: we hold the bytes, so the card
                  renders them (and offers to open or save one) rather than waiting for a public
                  link the shipped storage never issues. Checked first because a candidate can
@@ -292,5 +379,55 @@ async function onKeep() {
         </div>
       </div>
     </div>
+
+    <!-- No state on the step. The four ways that happens need different reactions, so they render
+         as four different things rather than as the blank body this window used to leave behind
+         (UX-80): there is no run to read, the read is still in flight, the read FAILED (offer a
+         Retry), or the step genuinely compared nothing. Collapsing any of the first three into the
+         last would put "nothing to compare" in front of a person whose candidates exist and were
+         simply not fetched. -->
+    <div
+      v-else-if="absence === 'no_run'"
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      data-testid="binary-candidates-no-run"
+    >
+      <UIcon name="i-lucide-unlink" class="h-8 w-8 opacity-40" />
+      <p class="text-sm">{{ t('binaryCandidates.noRun.title') }}</p>
+      <p class="max-w-md text-[11px] text-slate-500">{{ t('binaryCandidates.noRun.hint') }}</p>
+    </div>
+    <div
+      v-else-if="absence === 'loading'"
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      data-testid="binary-candidates-loading"
+    >
+      <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
+    </div>
+    <div
+      v-else-if="absence === 'load_failed'"
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      data-testid="binary-candidates-load-error"
+    >
+      <UIcon name="i-lucide-triangle-alert" class="h-8 w-8 text-amber-400/70" />
+      <p class="text-sm">{{ t('binaryCandidates.loadFailed') }}</p>
+      <p class="max-w-md break-words text-[11px] text-slate-500">{{ candidates.error }}</p>
+      <UButton
+        size="xs"
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-refresh-cw"
+        data-testid="binary-candidates-retry"
+        @click="retryLoad"
+      >
+        {{ t('common.retry') }}
+      </UButton>
+    </div>
+    <div
+      v-else
+      class="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 px-5 py-10 text-center text-slate-400"
+      data-testid="binary-candidates-empty"
+    >
+      <UIcon name="i-lucide-images" class="h-8 w-8 opacity-40" />
+      <p class="text-sm">{{ t('binaryCandidates.empty.title') }}</p>
+    </div>
   </ResultWindowShell>
 </template>

package/app/components/board/AddTaskModal.vue

@@ -694,6 +694,12 @@ async function add() {
 async function submitCreate(acknowledgeReviewDebt: boolean) {
   const containerId = ui.addTaskContainerId
   if (!containerId) return
+  // Entry guard (UX-78). `saving` gates the form's own Add button, but the friction dialog's
+  // "Create anyway" is a SECOND entry point into this same function, and the first await below is
+  // a network round-trip per staged attachment — long enough for a second click to file a second
+  // task and start a second pipeline run. The dialog also disables its button; this is the
+  // authoritative half, since it holds for any future caller.
+  if (saving.value) return
   saving.value = true
   try {
     // Attachments are fetched BEFORE the task is written. A page that moved, a token without
@@ -825,6 +831,9 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
     threshold: typeof details.threshold === 'number' ? details.threshold : null,
     debt,
     onConfirm: isWarn ? () => void submitCreate(true) : null,
+    // A getter, not a snapshot: the dialog reads it inside a computed so its button spins and
+    // locks for as long as the retry actually runs (UX-78).
+    pending: () => saving.value,
   })
 }
 </script>

package/app/components/board/ReviewFrictionDialog.vue

@@ -12,10 +12,22 @@ const ui = useUiStore()
 
 const ctx = computed(() => ui.reviewFrictionContext)
 
+// True while the opener's create is actually in flight. Read through the context's getter inside a
+// computed so it tracks the opener's own `saving` ref (UX-78): the context object itself is
+// captured once at open, so a copied boolean would never update.
+//
+// While it holds, EVERY way out is closed, not just the buttons. Gating the two actions and leaving
+// Close, Escape and the backdrop live was the worse half of the asymmetry: it locked the safe exit
+// (go review the waiting tasks) and left open the one that tears the dialog down mid-create, so the
+// user could not tell whether a task had been filed.
+const pending = computed(() => ctx.value?.pending?.() ?? false)
+
 const open = computed({
   get: () => ctx.value !== null,
   set: (v: boolean) => {
-    if (!v) ui.closeReviewFriction()
+    // Refuse a USER dismissal while the create is in flight (see `pending`). The opener still closes
+    // this dialog directly through the store on success, so only the human's exits are gated.
+    if (!v && !pending.value) ui.closeReviewFriction()
   },
 })
 
@@ -54,12 +66,19 @@ function goReview() {
 }
 
 function createAnyway() {
+  if (pending.value) return
   ctx.value?.onConfirm?.()
 }
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="title" :ui="{ content: 'max-w-xl' }">
+  <UModal
+    v-model:open="open"
+    :title="title"
+    :dismissible="!pending"
+    :close="{ disabled: pending }"
+    :ui="{ content: 'max-w-xl' }"
+  >
     <template #body>
       <div v-if="ctx" class="space-y-5">
         <p class="text-sm text-slate-300">{{ body }}</p>
@@ -72,7 +91,8 @@ function createAnyway() {
             <li v-for="item in ctx.debt" :key="item.blockId">
               <button
                 type="button"
-                class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-slate-800/60"
+                class="flex w-full items-center justify-between gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-slate-800/60 disabled:opacity-50"
+                :disabled="pending"
                 @click="goToBlock(item.blockId)"
               >
                 <span class="truncate text-slate-200">
@@ -91,6 +111,8 @@ function createAnyway() {
             color="neutral"
             variant="ghost"
             size="sm"
+            :disabled="pending"
+            data-testid="review-friction-close"
             @click="
               () => {
                 open = false
@@ -104,11 +126,20 @@ function createAnyway() {
             color="neutral"
             variant="subtle"
             size="sm"
+            :loading="pending"
+            :disabled="pending"
+            data-testid="review-friction-create-anyway"
             @click="createAnyway"
           >
             {{ t('errors.reviewFriction.createAnyway') }}
           </UButton>
-          <UButton color="primary" size="sm" icon="i-lucide-list-checks" @click="goReview">
+          <UButton
+            color="primary"
+            size="sm"
+            icon="i-lucide-list-checks"
+            :disabled="pending"
+            @click="goReview"
+          >
             {{ t('errors.reviewFriction.goReview') }}
           </UButton>
         </div>

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/brainstorm/BrainstormWindow.vue

@@ -156,6 +156,24 @@ async function submitReply(item: BrainstormItem) {
   }
 }
 
+/**
+ * Confirm before discarding typed replies (UX-79). Each draft answers one of the brainstorm's open
+ * questions and the redo comment steers a re-run; both are held here until their own button is
+ * pressed, on a window Escape and a backdrop click both close. Sending them on close is not the
+ * fix: a reply RESOLVES an item and the redo comment starts another agent pass.
+ */
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => close(),
+  saving: () => acting.value || reworking.value,
+  snapshot: () => ({
+    replies: Object.values(drafts.value)
+      .map((text) => text.trim())
+      .filter(Boolean),
+    redo: redoComment.value.trim(),
+  }),
+})
+
 async function setStatus(item: BrainstormItem, itemStatus: BrainstormItemStatus) {
   if (!session.value) return
   try {
@@ -247,7 +265,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     :subtitle="block?.title"
     variant="centered"
     width="full"
-    @close="close"
+    @close="requestClose"
   >
     <template v-if="session" #header-extras>
       <UBadge color="neutral" variant="subtle" size="sm">

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>

package/app/components/common/ConfirmDialog.vue

@@ -4,10 +4,36 @@
 // rendering its own modal. UModal already provides the focus trap, Escape-to-close and
 // backdrop, so this component adds none of that — it only resolves the pending promise and,
 // crucially, resolves `false` whenever the modal closes without an explicit choice.
+import { computed, onUnmounted, watch } from 'vue'
+import { sharedOverlayStack, type OverlayStackTicket } from '@modular-vue/core'
 
 const { t } = useI18n()
 const { open, current, accept, cancel, dismissed } = useConfirm()
 
+// Register on the app's ONE overlay stack for as long as the dialog is up.
+//
+// The stack is what `useModalBehavior` (`ResultWindowShell`, the lightbox, every modular overlay)
+// asks before it handles Escape, and this dialog is a Nuxt UI modal, so without a registration it
+// is invisible to that question. A confirm opened FROM a result window then lost the race for its
+// own Escape key: the shell's capture-phase listener still believed it was topmost, so it
+// preventDefault-ed and re-entered its close request, which supersedes the confirm the user was
+// trying to cancel. Pushing a ticket makes the shell stand down while this is on top, which is
+// exactly the ordering the stack exists to state.
+let ticket: OverlayStackTicket | null = null
+function release(): void {
+  ticket?.release()
+  ticket = null
+}
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) ticket ??= sharedOverlayStack.push()
+    else release()
+  },
+  { immediate: true },
+)
+onUnmounted(release)
+
 const model = computed({
   get: () => open.value,
   set: (v: boolean) => {