@cat-factory/app 0.138.1 → 0.139.0

package/app/components/spec/ServiceSpecWindow.vue

@@ -12,7 +12,7 @@ import type {
   RequirementPriority,
   SpecModule,
 } from '~/types/spec'
-import IconButton from '~/components/common/IconButton.vue'
+import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 
 const { t } = useI18n()
 const board = useBoardStore()
@@ -121,291 +121,260 @@ function kindLabel(item: RequirementItem): string {
 </script>
 
 <template>
-  <Teleport to="body">
+  <ResultWindowShell
+    :open="open"
+    icon="i-lucide-scroll-text"
+    icon-class="bg-indigo-500/15 text-indigo-300"
+    :title="t('spec.title')"
+    :subtitle="block ? spec?.service || block.title : undefined"
+    variant="centered"
+    width="5xl"
+    @close="close"
+  >
+    <!-- view toggle: Gherkin only when the spec (and its feature files) are on main -->
+    <template v-if="present" #header-extras>
+      <div class="flex items-center rounded-lg border border-slate-700 p-0.5">
+        <UButton
+          :color="mode === 'structured' ? 'primary' : 'neutral'"
+          :variant="mode === 'structured' ? 'soft' : 'ghost'"
+          size="xs"
+          icon="i-lucide-list-tree"
+          @click="
+            () => {
+              mode = 'structured'
+            }
+          "
+        >
+          {{ t('spec.mode.structured') }}
+        </UButton>
+        <UButton
+          :color="mode === 'gherkin' ? 'primary' : 'neutral'"
+          :variant="mode === 'gherkin' ? 'soft' : 'ghost'"
+          size="xs"
+          icon="i-lucide-square-check-big"
+          :disabled="!hasGherkin"
+          :title="hasGherkin ? t('spec.mode.gherkinTooltip') : t('spec.mode.gherkinNone')"
+          @click="
+            () => {
+              mode = 'gherkin'
+            }
+          "
+        >
+          {{ t('spec.mode.gherkin') }}
+        </UButton>
+      </div>
+    </template>
+
+    <!-- loading -->
     <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex max-h-[100dvh] items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
-      @click.self="close"
+      v-if="loading && !view"
+      class="flex flex-1 items-center justify-center gap-2 text-sm text-slate-400"
     >
-      <div
-        class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
-        role="dialog"
-        aria-modal="true"
+      <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
+      {{ t('spec.loading') }}
+    </div>
+
+    <!-- error -->
+    <div
+      v-else-if="errored"
+      class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center text-sm text-slate-400"
+    >
+      <UIcon name="i-lucide-triangle-alert" class="h-6 w-6 text-amber-400" />
+      {{ t('spec.error') }}
+      <UButton
+        icon="i-lucide-rotate-cw"
+        color="neutral"
+        variant="soft"
+        size="xs"
+        :loading="loading"
+        @click="retry"
       >
-        <!-- header -->
-        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
-          <div
-            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-500/15"
-          >
-            <UIcon name="i-lucide-scroll-text" class="h-5 w-5 text-indigo-300" />
-          </div>
-          <div class="min-w-0">
-            <h1 class="truncate text-base font-semibold text-white">{{ t('spec.title') }}</h1>
-            <p v-if="block" class="truncate text-xs text-slate-500">
-              {{ spec?.service || block.title }}
-            </p>
+        {{ t('common.retry') }}
+      </UButton>
+    </div>
+
+    <!-- empty: no spec on the repo's default branch yet -->
+    <div
+      v-else-if="!present"
+      class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center"
+    >
+      <UIcon name="i-lucide-scroll-text" class="h-8 w-8 text-slate-600" />
+      <div>
+        <p class="text-sm font-medium text-slate-300">{{ t('spec.empty.title') }}</p>
+        <p class="mx-auto mt-1 max-w-md text-xs text-slate-500">
+          {{ t('spec.empty.description') }}
+        </p>
+      </div>
+    </div>
+
+    <!-- spec body: navigable tree + detail -->
+    <div v-else class="flex min-h-0 flex-1">
+      <!-- nav: modules → feature groups -->
+      <nav class="w-64 shrink-0 overflow-y-auto border-e border-slate-800 px-3 py-4">
+        <UButton
+          block
+          class="mb-2 justify-start"
+          :color="selected === null ? 'primary' : 'neutral'"
+          :variant="selected === null ? 'soft' : 'ghost'"
+          size="xs"
+          icon="i-lucide-info"
+          @click="
+            () => {
+              selected = null
+            }
+          "
+        >
+          {{ t('spec.overview') }}
+        </UButton>
+        <div v-for="(mod, mi) in modules" :key="mi" class="mb-3">
+          <div class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+            {{ mod.name }}
           </div>
-          <div class="ms-auto flex items-center gap-1.5">
-            <!-- view toggle: Gherkin only when the spec (and its feature files) are on main -->
-            <div v-if="present" class="flex items-center rounded-lg border border-slate-700 p-0.5">
-              <UButton
-                :color="mode === 'structured' ? 'primary' : 'neutral'"
-                :variant="mode === 'structured' ? 'soft' : 'ghost'"
-                size="xs"
-                icon="i-lucide-list-tree"
-                @click="
-                  () => {
-                    mode = 'structured'
-                  }
+          <ul class="space-y-0.5">
+            <li v-for="(group, gi) in mod.groups ?? []" :key="gi">
+              <button
+                type="button"
+                class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-start text-[13px] transition"
+                :class="
+                  selected?.m === mi && selected?.g === gi
+                    ? 'bg-indigo-500/15 text-indigo-200'
+                    : 'text-slate-300 hover:bg-slate-800'
                 "
+                @click="selectGroup(mi, gi)"
               >
-                {{ t('spec.mode.structured') }}
-              </UButton>
-              <UButton
-                :color="mode === 'gherkin' ? 'primary' : 'neutral'"
-                :variant="mode === 'gherkin' ? 'soft' : 'ghost'"
-                size="xs"
-                icon="i-lucide-square-check-big"
-                :disabled="!hasGherkin"
-                :title="hasGherkin ? t('spec.mode.gherkinTooltip') : t('spec.mode.gherkinNone')"
-                @click="
-                  () => {
-                    mode = 'gherkin'
-                  }
-                "
-              >
-                {{ t('spec.mode.gherkin') }}
-              </UButton>
-            </div>
-            <IconButton
-              icon="i-lucide-x"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              :label="t('common.close')"
-              @click="close"
-            />
-          </div>
-        </header>
-
-        <!-- loading -->
-        <div
-          v-if="loading && !view"
-          class="flex flex-1 items-center justify-center gap-2 text-sm text-slate-400"
-        >
-          <UIcon name="i-lucide-loader-circle" class="h-4 w-4 animate-spin" />
-          {{ t('spec.loading') }}
+                <span class="truncate">{{ group.name }}</span>
+                <span class="shrink-0 text-[10px] text-slate-500">{{ reqCount(group) }}</span>
+              </button>
+            </li>
+            <li
+              v-if="(mod.groups?.length ?? 0) === 0"
+              class="px-2 py-1 text-[11px] italic text-slate-600"
+            >
+              {{ t('spec.noFeatureGroups') }}
+            </li>
+          </ul>
         </div>
+      </nav>
 
-        <!-- error -->
-        <div
-          v-else-if="errored"
-          class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center text-sm text-slate-400"
-        >
-          <UIcon name="i-lucide-triangle-alert" class="h-6 w-6 text-amber-400" />
-          {{ t('spec.error') }}
-          <UButton
-            icon="i-lucide-rotate-cw"
-            color="neutral"
-            variant="soft"
-            size="xs"
-            :loading="loading"
-            @click="retry"
-          >
-            {{ t('common.retry') }}
-          </UButton>
-        </div>
+      <!-- detail -->
+      <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
+        <!-- service overview -->
+        <template v-if="selected === null">
+          <h2 class="text-lg font-semibold text-white">{{ spec?.service }}</h2>
+          <p v-if="spec?.summary" class="mt-2 whitespace-pre-line text-sm text-slate-300">
+            {{ spec.summary }}
+          </p>
+          <p v-else class="mt-2 text-sm text-slate-500">{{ t('spec.noSummary') }}</p>
+          <p class="mt-4 text-xs text-slate-500">
+            {{
+              hasGherkin
+                ? t('spec.moduleHintGherkin', { count: modules.length }, modules.length)
+                : t('spec.moduleHint', { count: modules.length }, modules.length)
+            }}
+          </p>
+        </template>
 
-        <!-- empty: no spec on the repo's default branch yet -->
-        <div
-          v-else-if="!present"
-          class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center"
-        >
-          <UIcon name="i-lucide-scroll-text" class="h-8 w-8 text-slate-600" />
-          <div>
-            <p class="text-sm font-medium text-slate-300">{{ t('spec.empty.title') }}</p>
-            <p class="mx-auto mt-1 max-w-md text-xs text-slate-500">
-              {{ t('spec.empty.description') }}
-            </p>
+        <!-- selected feature group -->
+        <template v-else-if="selectedGroup">
+          <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
+            {{ selectedModule?.name }}
           </div>
-        </div>
+          <h2 class="text-lg font-semibold text-white">{{ selectedGroup.name }}</h2>
+          <p v-if="selectedGroup.summary" class="mt-1 text-sm text-slate-400">
+            {{ selectedGroup.summary }}
+          </p>
 
-        <!-- spec body: navigable tree + detail -->
-        <div v-else class="flex min-h-0 flex-1">
-          <!-- nav: modules → feature groups -->
-          <nav class="w-64 shrink-0 overflow-y-auto border-e border-slate-800 px-3 py-4">
-            <UButton
-              block
-              class="mb-2 justify-start"
-              :color="selected === null ? 'primary' : 'neutral'"
-              :variant="selected === null ? 'soft' : 'ghost'"
-              size="xs"
-              icon="i-lucide-info"
-              @click="
-                () => {
-                  selected = null
-                }
-              "
+          <!-- GHERKIN view: the rendered .feature file for this group -->
+          <template v-if="mode === 'gherkin'">
+            <pre
+              v-if="selectedFeature"
+              class="mt-4 overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-4 text-[12.5px] leading-relaxed text-slate-200"
+            ><code>{{ selectedFeature.content }}</code></pre>
+            <div
+              v-else
+              class="mt-4 rounded-lg border border-dashed border-slate-700 p-6 text-center text-sm text-slate-500"
             >
-              {{ t('spec.overview') }}
-            </UButton>
-            <div v-for="(mod, mi) in modules" :key="mi" class="mb-3">
+              {{ t('spec.noGherkinForGroup') }}
+            </div>
+          </template>
+
+          <!-- STRUCTURED view: requirements + acceptance + domain rules -->
+          <template v-else>
+            <div v-if="reqCount(selectedGroup) === 0" class="mt-4 text-sm text-slate-500">
+              {{ t('spec.noRequirements') }}
+            </div>
+            <ul class="mt-4 space-y-4">
+              <li
+                v-for="req in selectedGroup.requirements ?? []"
+                :key="req.id"
+                class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <h3 class="text-sm font-semibold text-slate-100">{{ req.title }}</h3>
+                  <div class="flex shrink-0 items-center gap-1.5">
+                    <UBadge :color="priorityMeta(req).chip as any" variant="subtle" size="sm">
+                      {{ priorityMeta(req).label }}
+                    </UBadge>
+                    <UBadge color="neutral" variant="subtle" size="sm">{{ kindLabel(req) }}</UBadge>
+                  </div>
+                </div>
+                <p class="mt-1.5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300">
+                  {{ req.statement }}
+                </p>
+                <!-- acceptance criteria (Given/When/Then) -->
+                <div v-if="(req.acceptance?.length ?? 0) > 0" class="mt-3 space-y-1.5">
+                  <div
+                    v-for="ac in req.acceptance ?? []"
+                    :key="ac.id"
+                    class="rounded-md border border-slate-800 bg-slate-950/50 px-3 py-2 text-[12.5px] leading-relaxed"
+                  >
+                    <p class="text-slate-300">
+                      <span class="font-semibold text-emerald-400">{{
+                        t('spec.acceptance.given')
+                      }}</span>
+                      {{ ac.given }}
+                    </p>
+                    <p class="text-slate-300">
+                      <span class="font-semibold text-sky-400">{{
+                        t('spec.acceptance.when')
+                      }}</span>
+                      {{ ac.when }}
+                    </p>
+                    <p class="text-slate-300">
+                      <span class="font-semibold text-violet-400">{{
+                        t('spec.acceptance.then')
+                      }}</span>
+                      {{ ac.outcome }}
+                    </p>
+                  </div>
+                </div>
+              </li>
+            </ul>
+
+            <!-- domain rules / invariants scoped to this group -->
+            <div v-if="(selectedGroup.rules?.length ?? 0) > 0" class="mt-6">
               <div
-                class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+                class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
               >
-                {{ mod.name }}
+                <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5" />
+                {{ t('spec.domainRules') }}
               </div>
-              <ul class="space-y-0.5">
-                <li v-for="(group, gi) in mod.groups ?? []" :key="gi">
-                  <button
-                    type="button"
-                    class="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-start text-[13px] transition"
-                    :class="
-                      selected?.m === mi && selected?.g === gi
-                        ? 'bg-indigo-500/15 text-indigo-200'
-                        : 'text-slate-300 hover:bg-slate-800'
-                    "
-                    @click="selectGroup(mi, gi)"
-                  >
-                    <span class="truncate">{{ group.name }}</span>
-                    <span class="shrink-0 text-[10px] text-slate-500">{{ reqCount(group) }}</span>
-                  </button>
-                </li>
+              <ul class="space-y-1.5">
                 <li
-                  v-if="(mod.groups?.length ?? 0) === 0"
-                  class="px-2 py-1 text-[11px] italic text-slate-600"
+                  v-for="rule in selectedGroup.rules ?? []"
+                  :key="rule.id"
+                  class="rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2 text-[13px] text-slate-300"
                 >
-                  {{ t('spec.noFeatureGroups') }}
+                  {{ rule.rule }}
+                  <span v-if="rule.rationale" class="text-slate-500">{{
+                    t('spec.ruleRationale', { rationale: rule.rationale })
+                  }}</span>
                 </li>
               </ul>
             </div>
-          </nav>
-
-          <!-- detail -->
-          <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
-            <!-- service overview -->
-            <template v-if="selected === null">
-              <h2 class="text-lg font-semibold text-white">{{ spec?.service }}</h2>
-              <p v-if="spec?.summary" class="mt-2 whitespace-pre-line text-sm text-slate-300">
-                {{ spec.summary }}
-              </p>
-              <p v-else class="mt-2 text-sm text-slate-500">{{ t('spec.noSummary') }}</p>
-              <p class="mt-4 text-xs text-slate-500">
-                {{
-                  hasGherkin
-                    ? t('spec.moduleHintGherkin', { count: modules.length }, modules.length)
-                    : t('spec.moduleHint', { count: modules.length }, modules.length)
-                }}
-              </p>
-            </template>
-
-            <!-- selected feature group -->
-            <template v-else-if="selectedGroup">
-              <div class="mb-1 text-[11px] uppercase tracking-wide text-slate-500">
-                {{ selectedModule?.name }}
-              </div>
-              <h2 class="text-lg font-semibold text-white">{{ selectedGroup.name }}</h2>
-              <p v-if="selectedGroup.summary" class="mt-1 text-sm text-slate-400">
-                {{ selectedGroup.summary }}
-              </p>
-
-              <!-- GHERKIN view: the rendered .feature file for this group -->
-              <template v-if="mode === 'gherkin'">
-                <pre
-                  v-if="selectedFeature"
-                  class="mt-4 overflow-x-auto rounded-lg border border-slate-800 bg-slate-950/60 p-4 text-[12.5px] leading-relaxed text-slate-200"
-                ><code>{{ selectedFeature.content }}</code></pre>
-                <div
-                  v-else
-                  class="mt-4 rounded-lg border border-dashed border-slate-700 p-6 text-center text-sm text-slate-500"
-                >
-                  {{ t('spec.noGherkinForGroup') }}
-                </div>
-              </template>
-
-              <!-- STRUCTURED view: requirements + acceptance + domain rules -->
-              <template v-else>
-                <div v-if="reqCount(selectedGroup) === 0" class="mt-4 text-sm text-slate-500">
-                  {{ t('spec.noRequirements') }}
-                </div>
-                <ul class="mt-4 space-y-4">
-                  <li
-                    v-for="req in selectedGroup.requirements ?? []"
-                    :key="req.id"
-                    class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
-                  >
-                    <div class="flex items-start justify-between gap-3">
-                      <h3 class="text-sm font-semibold text-slate-100">{{ req.title }}</h3>
-                      <div class="flex shrink-0 items-center gap-1.5">
-                        <UBadge :color="priorityMeta(req).chip as any" variant="subtle" size="sm">
-                          {{ priorityMeta(req).label }}
-                        </UBadge>
-                        <UBadge color="neutral" variant="subtle" size="sm">{{
-                          kindLabel(req)
-                        }}</UBadge>
-                      </div>
-                    </div>
-                    <p
-                      class="mt-1.5 whitespace-pre-line text-[13px] leading-relaxed text-slate-300"
-                    >
-                      {{ req.statement }}
-                    </p>
-                    <!-- acceptance criteria (Given/When/Then) -->
-                    <div v-if="(req.acceptance?.length ?? 0) > 0" class="mt-3 space-y-1.5">
-                      <div
-                        v-for="ac in req.acceptance ?? []"
-                        :key="ac.id"
-                        class="rounded-md border border-slate-800 bg-slate-950/50 px-3 py-2 text-[12.5px] leading-relaxed"
-                      >
-                        <p class="text-slate-300">
-                          <span class="font-semibold text-emerald-400">{{
-                            t('spec.acceptance.given')
-                          }}</span>
-                          {{ ac.given }}
-                        </p>
-                        <p class="text-slate-300">
-                          <span class="font-semibold text-sky-400">{{
-                            t('spec.acceptance.when')
-                          }}</span>
-                          {{ ac.when }}
-                        </p>
-                        <p class="text-slate-300">
-                          <span class="font-semibold text-violet-400">{{
-                            t('spec.acceptance.then')
-                          }}</span>
-                          {{ ac.outcome }}
-                        </p>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-
-                <!-- domain rules / invariants scoped to this group -->
-                <div v-if="(selectedGroup.rules?.length ?? 0) > 0" class="mt-6">
-                  <div
-                    class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
-                  >
-                    <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5" />
-                    {{ t('spec.domainRules') }}
-                  </div>
-                  <ul class="space-y-1.5">
-                    <li
-                      v-for="rule in selectedGroup.rules ?? []"
-                      :key="rule.id"
-                      class="rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2 text-[13px] text-slate-300"
-                    >
-                      {{ rule.rule }}
-                      <span v-if="rule.rationale" class="text-slate-500">{{
-                        t('spec.ruleRationale', { rationale: rule.rationale })
-                      }}</span>
-                    </li>
-                  </ul>
-                </div>
-              </template>
-            </template>
-          </div>
-        </div>
+          </template>
+        </template>
       </div>
     </div>
-  </Teleport>
+  </ResultWindowShell>
 </template>

package/app/components/testing/TestReportWindow.vue

@@ -30,12 +30,10 @@ const blobs = useArtifactBlobs()
 onUnmounted(() => blobs.revokeAll())
 
 // Shared seam contract (open/blockId/close). No `onOpen` loader: this window reads its report
-// straight off the execution step, so there's nothing to fetch on open. `manageEscape: false`
-// — `ResultWindowShell` owns Escape (and the focus trap + scroll lock + stacking) via the
-// shared overlay behaviour; the nested lightbox layers above it on the same stack.
-const { open, blockId, instanceId, stepIndex, close } = useResultView('tester', {
-  manageEscape: false,
-})
+// straight off the execution step, so there's nothing to fetch on open. `ResultWindowShell`
+// owns Escape (and the focus trap + scroll lock + stacking) via the shared overlay behaviour;
+// the nested lightbox layers above it on the same stack.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('tester')
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const headerTitle = computed(
   () => `${t('testing.title')}${block.value ? ` — ${block.value.title}` : ''}`,

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -26,11 +26,9 @@ const access = useWorkspaceAccess()
 const blobs = useArtifactBlobs()
 onUnmounted(() => blobs.revokeAll())
 
-// `manageEscape: false` — `ResultWindowShell` owns Escape (and the focus trap + scroll lock +
-// stacking); the nested lightbox layers above it on the same shared overlay stack.
-const { open, blockId, instanceId, stepIndex, close } = useResultView('visual-confirm', {
-  manageEscape: false,
-})
+// `ResultWindowShell` owns Escape (and the focus trap + scroll lock + stacking); the nested
+// lightbox layers above it on the same shared overlay stack.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('visual-confirm')
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const headerTitle = computed(() =>
   block.value

package/app/composables/useResultView.ts

@@ -13,23 +13,20 @@
  * A synchronous window (one that reads its data straight off the execution step, like the
  * test report) simply omits `onOpen`.
  *
- * `onClose` runs on EVERY close path — the X button, backdrop click, and the Escape key
- * handled here — BEFORE the view is torn down, so a window with unsaved draft input (the
- * review windows) can flush it in one place instead of every caller having to remember to.
- * It runs synchronously; if it kicks off async work it must capture whatever it needs first,
- * because `blockId`/the derived state go null the moment the view closes.
+ * `onClose` runs on EVERY close path — the X button, backdrop click, and the Escape key —
+ * BEFORE the view is torn down, so a window with unsaved draft input (the review windows) can
+ * flush it in one place instead of every caller having to remember to. It runs synchronously;
+ * if it kicks off async work it must capture whatever it needs first, because `blockId`/the
+ * derived state go null the moment the view closes.
  *
- * `manageEscape` (default `true`) owns the global Escape-to-close listener. A window that
- * renders through `ResultWindowShell` (slice 5 of the modular-vue adoption) passes `false`:
- * the shell's `useModalBehavior` owns Escape via the shared overlay stack (so the top
- * overlay closes first, and focus/scroll are managed too), and a second listener here would
- * double-fire `close`. Un-converted windows keep the default so they still close on Escape.
- * Remove this option once every result window is on the shell (the listener moves out
- * entirely).
+ * Escape-to-close is NOT owned here: every result window renders through `ResultWindowShell`
+ * (slice 5 of the modular-vue adoption), whose `useModalBehavior` owns Escape via the shared
+ * overlay stack (top overlay closes first, focus/scroll managed too). A listener here would
+ * double-fire `close`, so it was removed once the last window converted onto the shell.
  */
 export function useResultView(
   viewId: string,
-  opts?: { onOpen?: (blockId: string) => void; onClose?: () => void; manageEscape?: boolean },
+  opts?: { onOpen?: (blockId: string) => void; onClose?: () => void },
 ) {
   const ui = useUiStore()
 
@@ -47,14 +44,6 @@ export function useResultView(
     ui.closeResultView()
   }
 
-  function onKey(e: KeyboardEvent) {
-    if (e.key === 'Escape' && open.value) close()
-  }
-  if (opts?.manageEscape !== false) {
-    onMounted(() => window.addEventListener('keydown', onKey))
-    onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
-  }
-
   // The load-on-open contract: fire immediately on mount and on any later block switch.
   if (opts?.onOpen) {
     watch(

package/package.json

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