@cat-factory/app 0.280.1 → 0.280.2

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/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/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) => {

package/app/components/docs/DocInterviewWindow.vue

@@ -16,7 +16,7 @@
 // identically before and after the click, which reads as the button having done nothing. The
 // phase below folds the document RUN's status in, so the wait is visible and a failed pass says
 // so instead of leaving the human staring at questions they already submitted.
-import { computed, reactive, watch } from 'vue'
+import { computed } from 'vue'
 import InterviewGateNotice from '~/components/common/InterviewGateNotice.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import {
@@ -33,6 +33,11 @@ const access = useWorkspaceAccess()
 
 const { open, blockId, close } = useResultView('doc-interview', {
   onOpen: ({ blockId }) => void docInterview.load(blockId),
+  // Persist any typed-but-unsubmitted answer before the view tears down (X, backdrop, Escape), so
+  // closing the window never silently drops it (UX-79). The flush seam is right here rather than a
+  // discard prompt because saving ONE answer is a plain save: it records the reply without
+  // resolving the interview, which is what the window's own two commands do.
+  onClose: () => flushOnClose(),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
@@ -45,18 +50,25 @@ const questions = computed(() =>
 )
 const pending = computed(() => questions.value.filter((q) => !(q.answer ?? '').trim()))
 
-// Per-question answer drafts, seeded from the entity and refreshed as new rounds arrive without
-// clobbering an answer the human is mid-edit on.
-const drafts = reactive<Record<string, string>>({})
-watch(
-  questions,
-  (list) => {
-    for (const q of list) {
-      if (!(q.key in drafts)) drafts[q.key] = q.answer ?? ''
-    }
-  },
-  { immediate: true },
-)
+// Per-question answer drafts, plus the two ways they leave the browser: one on blur, all of them on
+// the way out. The shared seam with the initiative planner's interviewer, which holds the same kind
+// of draft for the same reason; `useInterviewDrafts` records what a per-window copy kept getting
+// wrong, including the flush that used to abandon every answer after the first failed write.
+const { drafts, addressable, unanswered, saveAnswer, flushDrafts, flushThen } = useInterviewDrafts({
+  blockId: () => blockId.value,
+  questions: () => questions.value,
+  pending: () => pending.value,
+  write: (block, questionId, answer) => docInterview.answerQuestion(block, questionId, answer),
+  failureTitleKeys: { one: 'docInterview.saveFailed', many: 'docInterview.saveFailedCount' },
+})
+
+/**
+ * A hoisted indirection for the close hook above. The seam that owns `flushDrafts` needs the
+ * `blockId` this very `useResultView` call produces, so the hook cannot name the const directly.
+ */
+function flushOnClose(): void {
+  flushDrafts()
+}
 
 const resuming = computed(() => docInterview.resuming)
 
@@ -78,12 +90,6 @@ const phase = computed(() =>
 /** The interview converged: the synthesized authoring brief is what the window shows. */
 const converged = computed(() => phase.value === 'converged')
 
-/**
- * Questions still missing a drafted answer. Submit is only meaningful once this is empty — but a
- * disabled button with no stated reason is itself a "nothing happened", so the count is rendered.
- */
-const unanswered = computed(() => pending.value.filter((q) => !drafts[q.key]?.trim()).length)
-
 /** Why Submit is unavailable, or undefined when it is. RBAC first: it outranks a draft gap. */
 const continueBlockedReason = computed(() => {
   if (!access.canExecuteRuns.value) return t('access.noRunExecute')
@@ -91,24 +97,10 @@ const continueBlockedReason = computed(() => {
   return undefined
 })
 
-/** Persist one answer if its draft differs from what's recorded. */
-async function persist(q: { id?: string; key: string; answer?: string }) {
-  const id = q.id
-  if (!id || !blockId.value) return
-  const next = (drafts[q.key] ?? '').trim()
-  if (!next || next === (q.answer ?? '').trim()) return
-  await docInterview.answerQuestion(blockId.value, id, next)
-}
-
-/** Flush all dirty drafts, then run a window action (continue / proceed). */
-async function flushThen(action: (id: string) => Promise<unknown>) {
-  if (!blockId.value) return
-  for (const q of questions.value) await persist(q)
-  await action(blockId.value)
-}
-
-const onContinue = () => flushThen((id) => docInterview.continueInterview(id))
-const onProceed = () => flushThen((id) => docInterview.proceedInterview(id))
+const onContinue = () =>
+  flushThen((id) => docInterview.continueInterview(id), 'docInterview.continueFailed')
+const onProceed = () =>
+  flushThen((id) => docInterview.proceedInterview(id), 'docInterview.proceedFailed')
 </script>
 
 <template>
@@ -210,11 +202,21 @@ const onProceed = () => flushThen((id) => docInterview.proceedInterview(id))
               v-model="drafts[q.key]"
               :rows="2"
               autoresize
+              :disabled="!addressable(q)"
               :placeholder="t('docInterview.answerPlaceholder')"
               class="w-full"
               data-testid="doc-interview-answer"
-              @blur="persist(q)"
+              @blur="saveAnswer(q)"
             />
+            <!-- The answer write addresses a question by id, so an exchange without one has nowhere
+                 for an answer to go. Saying so beats taking text the flush could only drop. -->
+            <p
+              v-if="!addressable(q)"
+              class="mt-1 text-[11px] text-amber-300"
+              data-testid="doc-interview-unanswerable"
+            >
+              {{ t('docInterview.unanswerable') }}
+            </p>
           </li>
         </ul>
       </template>

package/app/components/followUp/FollowUpWindow.vue

@@ -59,13 +59,43 @@ async function onQueue(item: FollowUpItem) {
 async function onAnswer(item: FollowUpItem) {
   const id = execId()
   const answer = (drafts[item.id] ?? '').trim()
-  if (id && answer) await followUps.answerItem(id, item.id, answer).catch(() => {})
+  if (!id || !answer) return
+  // Clear the draft only once the answer is actually recorded: clearing first would make a failed
+  // send cost the typed answer, and would also leave the unsaved guard below with nothing to protect.
+  await followUps
+    .answerItem(id, item.id, answer)
+    .then(() => {
+      delete drafts[item.id]
+    })
+    // The store records the message; the inline error strip renders it.
+    .catch(() => {})
 }
 async function onDismiss(item: FollowUpItem) {
   const id = execId()
   if (id) await followUps.dismissItem(id, item.id).catch(() => {})
 }
 
+/**
+ * Confirm before discarding typed answers (UX-79). Each draft answers a question the Coder is
+ * blocked on, is held only in this component until "Answer & send" is pressed, and the window is
+ * dismissible by Escape and by a backdrop click. Auto-sending them on close is deliberately NOT
+ * the fix: sending an answer DECIDES the item and re-arms the run, which is not something a stray
+ * Escape may do on the user's behalf.
+ */
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => close(),
+  // Any item mid-action is about to rewrite the list; don't interrupt it with a prompt.
+  saving: () => followUps.acting.size > 0,
+  // Only drafts against items still awaiting a decision count: one left over from an item that has
+  // since been filed or dismissed elsewhere can no longer be sent anywhere.
+  snapshot: () =>
+    items.value
+      .filter((item) => item.status === 'pending')
+      .map((item) => (drafts[item.id] ?? '').trim())
+      .filter(Boolean),
+})
+
 // Exhaustive map of the item status enum → label key (literal keys keep the typed-key
 // drift guard live, vs a runtime-built `followUp.status.${status}`).
 const STATUS_LABEL_KEYS: Record<FollowUpItem['status'], string> = {
@@ -96,7 +126,7 @@ const STATUS_META: Record<
     :title="headerTitle"
     :subtitle="t('followUp.subtitle')"
     width="3xl"
-    @close="close"
+    @close="requestClose"
   >
     <template #header-extras>
       <UBadge :color="pendingCount > 0 ? 'warning' : 'success'" variant="subtle" size="sm">

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -96,16 +96,55 @@ async function onChoose() {
     selected.value === 'custom'
       ? { custom: customText.value.trim(), note: noteText }
       : { forkId: selected.value!, note: noteText }
-  await forkDecision.choose(id, choice).catch(() => {})
+  const chosen = await forkDecision
+    .choose(id, choice)
+    .then(() => true)
+    // The store records the message; the inline error strip above renders it.
+    .catch(() => false)
+  // Drop the drafts once the decision is committed. The window stays open as the RECORD of what was
+  // chosen, so leaving the approach and the steering note in their boxes would have the unsaved
+  // guard below prompt to discard work that was submitted seconds ago.
+  if (chosen) {
+    customText.value = ''
+    note.value = ''
+  }
 }
 
 async function onSend() {
   const id = instanceId.value
   const text = chatInput.value.trim()
   if (!id || !text || !canChat.value) return
-  chatInput.value = ''
-  await forkDecision.chat(id, text).catch(() => {})
+  // Clear the box only once the turn is actually recorded: clearing first made a failed send cost
+  // the typed question, with nothing on screen saying the send had failed.
+  await forkDecision
+    .chat(id, text)
+    .then(() => {
+      chatInput.value = ''
+    })
+    // The store records the message; the inline error strip above renders it.
+    .catch(() => {})
 }
+
+/**
+ * Confirm before discarding typed input (UX-79). A custom approach, a steering note and an
+ * unsent chat question are all things the human WROTE, none of them are persisted anywhere until
+ * the matching button is pressed, and this window is dismissible by Escape and by a backdrop
+ * click. Flushing them instead is not an option: sending a chat turn spends the run's bounded
+ * human-turn budget and choosing a fork commits the whole decision, so an accidental dismissal
+ * must never do either on the user's behalf. A window with nothing typed closes as before.
+ */
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => close(),
+  saving: () => forkDecision.choosing,
+  snapshot: () => ({
+    // Only counts while the custom path is actually selected — text left in the box under a
+    // proposed fork is not part of the decision being made and would prompt for nothing.
+    custom: selected.value === 'custom' ? customText.value.trim() : '',
+    note: note.value.trim(),
+    chat: chatInput.value.trim(),
+  }),
+})
 </script>
 
 <template>
@@ -117,7 +156,7 @@ async function onSend() {
     :subtitle="t('forkDecision.subtitle')"
     width="3xl"
     testid="fork-decision-window"
-    @close="close"
+    @close="requestClose"
   >
     <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
       <!-- Proposing: the read-only proposer is still working. -->
@@ -352,7 +391,7 @@ async function onSend() {
       v-if="interactive"
       class="flex items-center justify-end gap-2 border-t border-slate-800 px-5 py-3"
     >
-      <UButton color="neutral" variant="ghost" size="sm" @click="close">
+      <UButton color="neutral" variant="ghost" size="sm" @click="requestClose">
         {{ t('common.cancel') }}
       </UButton>
       <UButton

package/app/components/gates/GateResultView.vue

@@ -75,6 +75,19 @@ async function submitFix() {
   fixInstructions.value = ''
 }
 
+/**
+ * Confirm before discarding drafted fix instructions (UX-79). The box is the only thing that tells
+ * the fixer WHAT to change, it is held here until Request fix is pressed, and this window closes on
+ * Escape and on a backdrop click. Sending it on close is not the fix: it resolves the human-review
+ * gate and dispatches an agent.
+ */
+const { requestClose } = useUnsavedGuard({
+  open,
+  close: () => close(),
+  saving: () => fixBusy.value,
+  snapshot: () => fixInstructions.value.trim(),
+})
+
 // The displayed "required approvals" is derived from the cached branch-protection count via
 // the gate's effective floor (`max(1, …)`, see review.logic.ts) rather than persisted twice.
 const requiredApprovals = computed(() => Math.max(1, gate.value?.requiredApprovingReviewCount ?? 1))
@@ -183,7 +196,7 @@ const conflictVerdict = computed(() => {
     :subtitle="subtitle"
     :step-ref="{ instanceId, stepIndex }"
     width="3xl"
-    @close="close"
+    @close="requestClose"
   >
     <template #header-extras>
       <UBadge