@cat-factory/app 0.280.0 → 0.280.2

package/app/components/panels/InspectorPanel.vue

@@ -332,9 +332,15 @@ const showOriginalDescription = ref(false)
        with the panel on top; the region now paints above at `z-40`, which only swaps which side
        loses). Sitting the panel below fixes it whichever way the stacking goes, and needs no
        left/right arithmetic to stay correct under RTL. -->
+  <!-- `data-inspector-block` names WHICH block the panel is showing, so a caller can tell a
+       panel left open on the previous selection from one that followed a new click. Deliberately
+       NOT `data-block-id`: that attribute is the board's card selector, which the canvas drivers
+       measure geometry through (`utils/blockRects.ts`), and a panel answering to it would offer
+       the arrows a rect that is not on the canvas at all. -->
   <div
     v-if="block && statusMeta && typeMeta"
     data-testid="inspector-panel"
+    :data-inspector-block="block.id"
     class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-16 lg:w-80 lg:rounded-2xl"
   >
     <div class="h-1.5 w-full" :style="{ backgroundColor: statusMeta.color }" />

package/app/components/panels/ResultWindowDrafts.logic.spec.ts

@@ -0,0 +1,233 @@
+import { readFileSync, readdirSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// UX-79: a result window that holds typed-but-unsubmitted input must not discard it when the user
+// dismisses the window. `ResultWindowShell` closes on the X, on Escape and on a backdrop click, and
+// a window wired `@close="close"` goes straight through all three — so a reviewer who tabbed away
+// mid-sentence lost the sentence, with nothing on screen having said so.
+//
+// The seams to fix it already existed and were used by exactly two of the fourteen windows that
+// needed them. That is the shape this file guards against: not a missing primitive, but a primitive the
+// next window silently doesn't reach for (the re-audit's cross-cutting theme 8). Nothing in the type
+// system can ask "does this window hold a draft?", so the table below is the answer, asserted
+// against what the components actually do.
+//
+// The two sanctioned dispositions, and the rule for picking:
+//
+//   'flush'   — `useResultView({ onClose })`, then `useInterviewDrafts` or the review windows' own
+//               flush. For a draft whose save is a PLAIN SAVE: recording it changes nothing else, so
+//               writing it on the way out is what the user meant. The review windows and the two
+//               interview windows persist one answer at a time.
+//   'confirm' — `useUnsavedGuard` in front of the shell's close. For a draft whose only submit
+//               button also DECIDES something — resolves a gate, spends a bounded chat turn, keeps
+//               an artifact, re-runs an agent. A stray Escape may not do that on the user's behalf,
+//               so the only honest options are to keep the draft or to ask.
+//
+// A window with no draft state is 'none' and closes straight through, as it always did.
+
+/** Anchored on the vitest root (`frontend/app`) — see the sibling width spec for why not `import.meta.url`. */
+const componentsDir = resolve(process.cwd(), 'app/components')
+
+type Disposition = 'none' | 'flush' | 'confirm'
+
+/**
+ * Every `ResultWindowShell` consumer and how it treats unsubmitted input. The `why` is the point for
+ * anything other than 'none': it has to name the draft, because "this window has no draft" is the
+ * claim that gets silently falsified when someone adds an input to it.
+ */
+const WINDOWS: Record<string, { drafts: Disposition; why: string }> = {
+  'binaryCandidates/BinaryCandidatesWindow.vue': {
+    drafts: 'confirm',
+    why: 'the keep rationale + per-candidate store-as aliases; Keep commits the artifacts',
+  },
+  'brainstorm/BrainstormWindow.vue': {
+    drafts: 'confirm',
+    why: 'per-item replies + the redo comment; a reply resolves an item and the redo starts a pass',
+  },
+  'clarity/ClarityReviewWindow.vue': {
+    drafts: 'flush',
+    why: 'per-finding answers, each recorded on its own',
+  },
+  'consensus/ConsensusSessionWindow.vue': { drafts: 'none', why: 'a read-only transcript' },
+  'docs/DocInterviewWindow.vue': {
+    drafts: 'flush',
+    why: 'per-question answers, each recorded on its own (Submit is a separate command)',
+  },
+  'followUp/FollowUpWindow.vue': {
+    drafts: 'confirm',
+    why: 'per-question answers; sending one decides the item and re-arms the run',
+  },
+  'forkDecision/ForkDecisionWindow.vue': {
+    drafts: 'confirm',
+    why: 'the custom approach, the steering note and the chat box; chat spends a bounded turn budget',
+  },
+  'gates/GateResultView.vue': {
+    drafts: 'confirm',
+    why: 'the human-review fix instructions; Request fix resolves the gate and dispatches a fixer',
+  },
+  'humanTest/HumanTestWindow.vue': {
+    drafts: 'confirm',
+    why: 'the tester findings, the only record of what went wrong; Request fix resolves the gate',
+  },
+  'initiative/InitiativePlanningWindow.vue': {
+    drafts: 'flush',
+    why: 'per-question answers, each recorded on its own (Submit / Plan now are separate commands)',
+  },
+  'initiative/InitiativeTrackerWindow.vue': {
+    drafts: 'confirm',
+    why: 'the plan review it hands its body to (anchored comments + feedback send back a re-plan), plus its own follow-up promotion and execution-policy forms',
+  },
+  'judge/JudgeResultView.vue': {
+    drafts: 'confirm',
+    why: 'the guidance box; every command carrying it also resolves the parked verdict',
+  },
+  'outcome/OutcomeSummaryWindow.vue': { drafts: 'none', why: 'a read-only run summary' },
+  'panels/GenericStructuredResultView.vue': {
+    drafts: 'none',
+    why: 'a read-only structured reader',
+  },
+  'panels/MergerResultView.vue': { drafts: 'none', why: 'a read-only merge verdict' },
+  'prReview/PrReviewWindow.vue': {
+    drafts: 'confirm',
+    why: 'the per-finding challenge box; sending it spends a reviewer turn',
+  },
+  'ralph/RalphLoopResultView.vue': { drafts: 'none', why: 'a loop status readout' },
+  'requirements/RequirementsReviewWindow.vue': {
+    drafts: 'flush',
+    why: 'per-finding answers, each recorded on its own',
+  },
+  'spec/ServiceSpecWindow.vue': { drafts: 'none', why: 'a read-only spec reader' },
+  'testing/TestReportWindow.vue': { drafts: 'none', why: 'a read-only test report' },
+  'visualConfirm/VisualConfirmationWindow.vue': {
+    drafts: 'confirm',
+    why: 'per-view notes anchored to a screenshot + the overall findings box; Request fix resolves the gate',
+  },
+}
+
+/**
+ * `v-model` bindings that are VIEW state rather than a draft, and may therefore appear in a window
+ * declared draft-free. Listed as EXACT bindings rather than matched by shape, because the point of
+ * the inverse assertion below is that a new binding is unknown until someone classifies it: the
+ * planning window's `v-model:answer="drafts[q.key]"` sat unnoticed in a 'none' row precisely because
+ * it looked enough like the lightbox pair to pass a shape test.
+ */
+const VIEW_STATE_BINDINGS = ['v-model:open="lightboxOpen"', 'v-model:index="lightboxIndex"']
+
+/** Every component that mounts the shell, keyed by its path relative to `app/components`. */
+function findConsumers(): Map<string, string> {
+  const found = new Map<string, string>()
+  for (const entry of readdirSync(componentsDir, { recursive: true, encoding: 'utf8' })) {
+    const rel = entry.replace(/\\/g, '/')
+    if (!rel.endsWith('.vue') || rel.endsWith('panels/ResultWindowShell.vue')) continue
+    const source = readFileSync(`${componentsDir}/${rel}`, 'utf8')
+    if (source.includes('<ResultWindowShell')) found.set(rel, source)
+  }
+  return found
+}
+
+/**
+ * The shell's OWN opening tag. Quote-aware, so a `>` inside an attribute value can't end it early,
+ * and bounded, so `@close` on a nested component further down the template can't be read as the
+ * shell's: an unbounded scan would let a window bypass the guard by binding its own close deeper in.
+ */
+function shellTag(source: string): string {
+  const start = source.indexOf('<ResultWindowShell')
+  if (start < 0) return ''
+  let quote: string | null = null
+  for (let i = start; i < source.length; i += 1) {
+    const char = source[i]!
+    if (quote) {
+      if (char === quote) quote = null
+      continue
+    }
+    if (char === '"' || char === "'") quote = char
+    else if (char === '>') return source.slice(start, i + 1)
+  }
+  return ''
+}
+
+/** What the component's `<ResultWindowShell>` binds its close to. */
+function closeBinding(source: string): string | null {
+  return /@close="([^"]+)"/.exec(shellTag(source))?.[1] ?? null
+}
+
+/** Whether the window registers the flush hook on its `useResultView` seam. */
+function registersFlushHook(source: string): boolean {
+  return /useResultView\([\s\S]*?onClose:/.test(source)
+}
+
+/**
+ * Every state binding in the source: `v-model` with or without an argument, plus the explicit
+ * `:model-value` + `@update:model-value` pair that a per-row control inside a `v-for` has to use
+ * (which is the shape `BinaryCandidatesWindow`'s store-as aliases already have).
+ */
+function stateBindings(source: string): string[] {
+  const pattern = /(?:v-model(?::[\w-]+)?|:?model-value|@update:model-value)="[^"]*"/g
+  return [...source.matchAll(pattern)].map((match) => match[0])
+}
+
+/** A native form control, which holds typed input whether or not it carries a `v-model`. */
+function hasNativeControl(source: string): boolean {
+  return /<(?:input|textarea|select)\b/.test(source)
+}
+
+/** What makes this window suspect for a 'none' row, or `null` when nothing does. */
+function draftEvidence(source: string): string | null {
+  const bound = stateBindings(source).filter((binding) => !VIEW_STATE_BINDINGS.includes(binding))
+  if (bound.length > 0) return bound[0]!
+  return hasNativeControl(source) ? 'a native input/textarea/select' : null
+}
+
+describe('result-window draft handling', () => {
+  const consumers = findConsumers()
+
+  it('covers every shell consumer, with no stale rows', () => {
+    expect(consumers.size).toBeGreaterThan(10)
+    expect([...consumers.keys()].sort()).toEqual(Object.keys(WINDOWS).sort())
+  })
+
+  // Every assertion below reads its row through this, so an UNLISTED consumer fails the coverage
+  // test above with a message that names it, instead of crashing the rest of the file on a
+  // `Cannot read properties of undefined` that names nothing.
+  const rows = () =>
+    [...consumers.entries()].flatMap(([file, source]) => {
+      const row = WINDOWS[file]
+      return row ? [{ file, source, row }] : []
+    })
+
+  // The defect UX-79 named: a window holding a draft whose close goes straight to `ui.closeResultView`.
+  // Asserted POSITIVELY — the disposition's own seam has to be present AND wired to the shell's own
+  // close. Merely checking that the binding is not the literal `close` passes a window that renamed
+  // its handler and still closed straight through.
+  it('wires every draft-holding window to the seam its disposition names', () => {
+    const offenders = rows().filter(({ source, row }) => {
+      if (row.drafts === 'flush') {
+        return !registersFlushHook(source) || closeBinding(source) !== 'close'
+      }
+      if (row.drafts === 'confirm') {
+        return !source.includes('useUnsavedGuard(') || closeBinding(source) !== 'requestClose'
+      }
+      return closeBinding(source) !== 'close'
+    })
+    expect(offenders.map(({ file }) => file)).toEqual([])
+  })
+
+  // The inverse, and the one that actually rots: a window declared draft-free that grew an input.
+  // Without this the table degrades into a list of what someone once believed. It reports WHAT it
+  // found, because "this file is suspect" alone sends the reader hunting.
+  it('finds no unsubmitted input in a window declared draft-free', () => {
+    const suspects = rows()
+      .filter(({ row }) => row.drafts === 'none')
+      .map(({ file, source }) => ({ file, evidence: draftEvidence(source) }))
+      .filter(({ evidence }) => evidence !== null)
+    expect(suspects).toEqual([])
+  })
+
+  // A row that says 'confirm'/'flush' but names no draft is a row nobody thought about.
+  it('makes every non-trivial row say what the draft is', () => {
+    for (const [file, row] of Object.entries(WINDOWS)) {
+      if (row.drafts !== 'none') expect(row.why.length, file).toBeGreaterThan(20)
+    }
+  })
+})

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

@@ -3,6 +3,7 @@ import { computed, reactive, ref, watch } from 'vue'
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import SecretInput from '~/components/common/SecretInput.vue'
+import { uid } from '~/utils/catalog'
 
 // Per-service (frame) SENSITIVE test credentials: a genuinely secret token a Tester needs
 // to exercise a third-party integration (e.g. a Stripe API key). Unlike the non-sensitive
@@ -25,6 +26,13 @@ const { confirmAction, toastDone } = useConfirmAction()
 const busy = ref(false)
 
 interface DraftRow {
+  /**
+   * Client-only stable row identity (UX-94, the UX-23 convention). The `v-for` MUST key on this
+   * rather than the array index: an index key rebinds a deleted row's inputs onto its neighbour,
+   * and because the value field is masked that rebind is invisible — so removing a middle row
+   * could save one secret's value under the next row's key.
+   */
+  uid: string
   key: string
   description: string
   value: string
@@ -34,7 +42,7 @@ const draft = reactive<{ rows: DraftRow[] }>({ rows: [] })
 const configured = computed(() => store.entriesForBlock(props.block.id))
 const available = computed(() => store.available !== false)
 
-const blankRow = (): DraftRow => ({ key: '', description: '', value: '' })
+const blankRow = (): DraftRow => ({ uid: uid('sec'), key: '', description: '', value: '' })
 
 // Load this frame's configured refs once, then (re)hydrate the editor from them. Runs again
 // after a save/clear (the store refs change) so the just-typed secret values don't linger in
@@ -46,7 +54,7 @@ watch(
   configured,
   (entries) => {
     draft.rows = entries.length
-      ? entries.map((e) => ({ key: e.key, description: e.description, value: '' }))
+      ? entries.map((e) => ({ uid: uid('sec'), key: e.key, description: e.description, value: '' }))
       : [blankRow()]
   },
   { immediate: true },
@@ -87,8 +95,10 @@ const canSave = computed(
 function addRow() {
   draft.rows.push(blankRow())
 }
-function removeRow(index: number) {
-  draft.rows.splice(index, 1)
+/** Remove by row identity, so it can never be read against a stale index. */
+function removeRow(rowUid: string) {
+  const at = draft.rows.findIndex((r) => r.uid === rowUid)
+  if (at >= 0) draft.rows.splice(at, 1)
 }
 
 async function save() {
@@ -166,9 +176,10 @@ async function clearAll() {
     </p>
 
     <div class="space-y-3">
+      <!-- Keyed by the row's own `uid`, never the index — see DraftRow.uid. -->
       <div
         v-for="(row, index) in draft.rows"
-        :key="index"
+        :key="row.uid"
         class="space-y-2 rounded-md border border-slate-800 p-2.5"
         :data-testid="`test-secret-row-${index}`"
       >
@@ -198,7 +209,7 @@ async function clearAll() {
             class="mt-5 shrink-0"
             :aria-label="t('inspector.testSecrets.removeRow')"
             :data-testid="`test-secret-remove-${index}`"
-            @click="removeRow(index)"
+            @click="removeRow(row.uid)"
           />
         </div>
 

package/app/components/pipeline/PipelineHealthModal.vue

@@ -19,6 +19,9 @@ const { invalid, outdated, newPipelines, retired, hasIssues } = usePipelineHealt
 // Dumping `error.message` instead would put untranslated backend prose in front of every non-English
 // user — on the one screen whose whole purpose is telling them what to do next.
 const { present } = usePipelineErrorToast()
+// Deleting is the one irreversible action on this screen (see the note above `reseedAll`), so it
+// routes through the shared destructive confirm rather than firing on first click.
+const { confirmAction, toastDone } = useConfirmAction()
 
 const open = computed({
   get: () => ui.pipelineHealthOpen,
@@ -31,15 +34,29 @@ const open = computed({
 const busy = ref<Set<string>>(new Set())
 const isBusy = (id: string) => busy.value.has(id)
 const anyBusy = computed(() => busy.value.size > 0)
+/**
+ * The pipeline whose confirm prompt is open, tracked apart from `busy` because a confirm is not work
+ * in flight: the row must not spin while the human reads the prompt.
+ *
+ * It still LOCKS every other control. `useConfirm` is a singleton, so a second Delete click
+ * supersedes the pending request and settles it `false`: the first pipeline was then silently not
+ * deleted, and nothing on screen said so.
+ */
+const confirmingId = ref<string | null>(null)
+/** True while any row is mid-action OR holding an open confirm. Every control here reads this. */
+const locked = computed(() => anyBusy.value || confirmingId.value !== null)
 
 /** `failTitleKey` is an i18n KEY (not resolved copy) — `present` uses it only when the failure has
- *  no mapped conflict reason of its own. */
+ *  no mapped conflict reason of its own. Resolves `true` only when the action actually settled, so
+ *  a caller can withhold its success toast on a refusal. */
 async function run(id: string, action: () => Promise<unknown>, failTitleKey: string) {
   busy.value = new Set(busy.value).add(id)
   try {
     await action()
+    return true
   } catch (e) {
     present(e, failTitleKey)
+    return false
   } finally {
     const next = new Set(busy.value)
     next.delete(id)
@@ -49,18 +66,39 @@ async function run(id: string, action: () => Promise<unknown>, failTitleKey: str
 
 const reseed = (id: string) =>
   run(id, () => pipelines.reseed(id), 'pipeline.health.toast.reseedFailed')
-const remove = (id: string) =>
-  run(id, () => pipelines.removePipeline(id), 'pipeline.health.toast.deleteFailed')
+
+/**
+ * Confirm, then delete. Both removal buttons land here (UX-93): a reseed restores what the catalog
+ * says, but a delete is the one irreversible action on this screen — a built-in the catalog no
+ * longer defines cannot be reseeded back — and it used to fire on first click, one stray Enter away
+ * from destroying a workspace's pipeline. The confirm NAMES the pipeline, because the two sections
+ * render several rows of near-identical buttons and "which one did I just delete" is unanswerable
+ * afterwards.
+ */
+async function confirmRemove(pipeline: { id: string; name: string }, failTitleKey: string) {
+  // The entry guard is the authoritative half of the lock the buttons show: it holds for any future
+  // caller, and it is what makes "one confirmed click per pipeline" true rather than aspirational.
+  if (locked.value) return
+  confirmingId.value = pipeline.id
+  const confirmed = await confirmAction('remove', pipeline.name).finally(() => {
+    confirmingId.value = null
+  })
+  if (!confirmed) return
+  if (await run(pipeline.id, () => pipelines.removePipeline(pipeline.id), failTitleKey))
+    toastDone('remove', pipeline.name)
+}
+
+const remove = (pipeline: { id: string; name: string }) =>
+  confirmRemove(pipeline, 'pipeline.health.toast.deleteFailed')
 // Same call as `remove`, different failure copy: the retired section says "Remove" (the pipeline is
 // gone from the catalog), so a failure toast reading "could not DELETE" would name an action the
 // user was never offered. This is only the FALLBACK title — the likely failure here is a recurring
 // schedule still pointing at the pipeline, which arrives as a 409 the presenter words itself.
-const removeRetired = (id: string) =>
-  run(id, () => pipelines.removePipeline(id), 'pipeline.health.toast.removeFailed')
+const removeRetired = (pipeline: { id: string; name: string }) =>
+  confirmRemove(pipeline, 'pipeline.health.toast.removeFailed')
 
-// Removals are deliberately per-row with no bulk twin, unlike the reseeds below: a reseed restores
-// what the catalog says, while a delete is the one irreversible action on this screen (a built-in
-// the catalog no longer defines cannot be reseeded back). One click per pipeline is the point.
+// Removals are deliberately per-row with no bulk twin, unlike the reseeds below: one confirmed
+// click per pipeline is the point.
 
 /** Reseed every reseedable pipeline (new + outdated built-ins + invalid built-ins) in one go. */
 async function reseedAll() {
@@ -117,7 +155,7 @@ const reseedableCount = computed(
                 variant="subtle"
                 icon="i-lucide-plus"
                 :loading="isBusy(p.id)"
-                :disabled="anyBusy"
+                :disabled="locked"
                 @click="reseed(p.id)"
               >
                 {{ t('pipeline.health.add') }}
@@ -171,7 +209,7 @@ const reseedableCount = computed(
                   variant="subtle"
                   icon="i-lucide-rotate-ccw"
                   :loading="isBusy(h.pipeline.id)"
-                  :disabled="anyBusy"
+                  :disabled="locked"
                   @click="reseed(h.pipeline.id)"
                 >
                   {{ t('pipeline.health.reseed') }}
@@ -183,8 +221,8 @@ const reseedableCount = computed(
                   variant="subtle"
                   icon="i-lucide-trash-2"
                   :loading="isBusy(h.pipeline.id)"
-                  :disabled="anyBusy"
-                  @click="remove(h.pipeline.id)"
+                  :disabled="locked"
+                  @click="remove(h.pipeline)"
                 >
                   {{ t('pipeline.health.delete') }}
                 </UButton>
@@ -226,8 +264,8 @@ const reseedableCount = computed(
                 variant="subtle"
                 icon="i-lucide-trash-2"
                 :loading="isBusy(r.pipeline.id)"
-                :disabled="anyBusy"
-                @click="removeRetired(r.pipeline.id)"
+                :disabled="locked"
+                @click="removeRetired(r.pipeline)"
               >
                 {{ t('pipeline.health.remove') }}
               </UButton>
@@ -264,7 +302,7 @@ const reseedableCount = computed(
                 variant="subtle"
                 icon="i-lucide-rotate-ccw"
                 :loading="isBusy(h.pipeline.id)"
-                :disabled="anyBusy"
+                :disabled="locked"
                 @click="reseed(h.pipeline.id)"
               >
                 {{ t('pipeline.health.reseed') }}
@@ -283,6 +321,7 @@ const reseedableCount = computed(
           variant="ghost"
           icon="i-lucide-rotate-ccw"
           :loading="anyBusy"
+          :disabled="locked"
           @click="reseedAll"
         >
           {{ t('pipeline.health.reseedAll', { count: reseedableCount }) }}
@@ -291,7 +330,7 @@ const reseedableCount = computed(
         <UButton
           color="neutral"
           variant="ghost"
-          :disabled="anyBusy"
+          :disabled="locked"
           @click="ui.closePipelineHealth()"
         >
           {{ hasIssues ? t('pipeline.health.dismiss') : t('pipeline.health.done') }}

package/app/components/prReview/PrReviewWindow.vue

@@ -248,9 +248,16 @@ async function submitChallenge(id: string): Promise<void> {
   const inst = instanceId.value
   if (!inst || !canResolve.value) return
   const question = challengeText.value.trim()
-  challengeForId.value = null
-  challengeText.value = ''
-  await prReview.challenge(inst, id, question || undefined).catch(() => {})
+  // Close the box only once the turn is actually recorded (UX-83): clearing first made a failed
+  // dispatch cost the typed concern, and left the guard below with nothing to protect.
+  await prReview
+    .challenge(inst, id, question || undefined)
+    .then(() => {
+      challengeForId.value = null
+      challengeText.value = ''
+    })
+    // The store records the message; the inline error strip renders it.
+    .catch(() => {})
 }
 async function onDismiss(id: string): Promise<void> {
   const inst = instanceId.value
@@ -258,6 +265,18 @@ async function onDismiss(id: string): Promise<void> {
   if (challengeForId.value === id) cancelChallenge()
   await prReview.dismiss(inst, id).catch(() => {})
 }
+
+/**
+ * Confirm before discarding a drafted challenge (UX-79). The concern box is open against exactly
+ * one finding, its text is held here until Send, and this window closes on Escape and on a backdrop
+ * click. Auto-sending it instead would spend a reviewer turn on the user's behalf.
+ */
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => close(),
+  saving: () => working.value,
+  snapshot: () => challengeText.value.trim(),
+})
 </script>
 
 <template>
@@ -269,7 +288,7 @@ async function onDismiss(id: string): Promise<void> {
     :subtitle="t('prReview.subtitle')"
     width="full"
     testid="pr-review-window"
-    @close="close"
+    @close="requestClose"
   >
     <template v-if="state?.prUrl" #header-extras>
       <a

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -128,6 +128,24 @@ const hasFindings = computed(
   () => globalFindings.value.trim() !== '' || pairs.value.some((p) => perViewNotes[p.view]?.trim()),
 )
 
+/**
+ * Confirm before discarding the drafted findings (UX-79). Both halves count: the per-view notes are
+ * anchored to a specific screenshot and cannot be reconstructed from memory, and the freeform box is
+ * the overall verdict. They are composed into one findings string only when Request fix is pressed,
+ * which resolves the gate and dispatches a fixer, so a stray Escape may not send them.
+ *
+ * The snapshot is exactly what Request fix WOULD send, read off `buildFindings` rather than off the
+ * note map. A recapture returns a different pair set and never prunes `perViewNotes`, so a note left
+ * behind against a view that is gone is unsendable, and reporting it here would prompt to discard
+ * something the button could not have submitted anyway.
+ */
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => close(),
+  saving: () => busy.value,
+  snapshot: () => buildFindings().structured,
+})
+
 /** Compose the per-view notes + freeform text into the fixer's findings (and a structured
  * mirror, so a future structured-findings contract is a one-line swap). */
 function buildFindings(): { text: string; structured: { view?: string; note: string }[] } {
@@ -210,7 +228,7 @@ async function onFilePicked(e: Event) {
     :title="headerTitle"
     :subtitle="phase ? PHASE_LABEL[phase] : t('visualConfirm.subtitle')"
     width="5xl"
-    @close="close"
+    @close="requestClose"
   >
     <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4">
       <div