@cat-factory/app 0.280.1 → 0.280.2

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

package/app/composables/useConfirm.spec.ts

@@ -0,0 +1,62 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { useConfirm } from '~/composables/useConfirm'
+
+// The confirm singleton's state lives at module scope so every caller and the one mounted
+// `<ConfirmDialog />` share ONE request queue. That is also why each test starts by cancelling
+// whatever the previous one left pending.
+describe('useConfirm', () => {
+  beforeEach(() => {
+    useConfirm().cancel()
+  })
+
+  it('opens on request and resolves the choice the user made', async () => {
+    const { open, current, confirm, accept } = useConfirm()
+
+    const pending = confirm({ title: 'Delete it?' })
+    expect(open.value).toBe(true)
+    expect(current.value?.title).toBe('Delete it?')
+
+    accept()
+    await expect(pending).resolves.toBe(true)
+    expect(open.value).toBe(false)
+  })
+
+  // The dismissal path (backdrop, Escape, unmount): the dialog is CONTROLLED, so settling the
+  // promise without writing `open` left it on screen with no resolver behind it — a dialog whose
+  // buttons resolve nothing, on what is now the primary dismissal path of eleven result windows.
+  it('closes the dialog as well as settling the promise when it is dismissed', async () => {
+    const { open, confirm, dismissed } = useConfirm()
+
+    const pending = confirm({ title: 'Discard your changes?' })
+    dismissed()
+
+    await expect(pending).resolves.toBe(false)
+    expect(open.value).toBe(false)
+  })
+
+  // A second dismissal with nothing pending must stay a no-op rather than closing a request that
+  // arrived in between.
+  it('leaves a fresh request alone when a stale dismissal arrives', async () => {
+    const { open, confirm, dismissed, accept } = useConfirm()
+
+    dismissed()
+    const pending = confirm({ title: 'Remove the pipeline?' })
+    expect(open.value).toBe(true)
+
+    accept()
+    await expect(pending).resolves.toBe(true)
+  })
+
+  // Load-bearing for every surface that can raise two confirms: the superseded awaiter resolves
+  // `false`, so its caller treats the choice as declined rather than hanging forever.
+  it('settles a superseded request false instead of leaving it pending', async () => {
+    const { confirm, accept } = useConfirm()
+
+    const first = confirm({ title: 'Delete A?' })
+    const second = confirm({ title: 'Delete B?' })
+
+    await expect(first).resolves.toBe(false)
+    accept()
+    await expect(second).resolves.toBe(true)
+  })
+})

package/app/composables/useConfirm.ts

@@ -55,8 +55,13 @@ export function useConfirm() {
 
   // Called by the dialog when `open` flips to false without an explicit accept/cancel
   // (backdrop, Escape, unmount). Any still-pending promise resolves `false`.
+  //
+  // It also has to write `open` itself, exactly as `cancel` does: the dialog is CONTROLLED (its
+  // `v-model:open` reads this ref), so a dismissal that only settled the promise left a visible
+  // modal behind with no pending resolver, whose buttons then resolve nothing.
   function dismissed(): void {
-    if (resolver) settle(false)
+    open.value = false
+    settle(false)
   }
 
   return { open, current: readonly(current), confirm, accept, cancel, dismissed }

package/app/composables/useInterviewDrafts.spec.ts

@@ -0,0 +1,198 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+import { useInterviewDrafts } from '~/composables/useInterviewDrafts'
+
+interface Q {
+  id?: string
+  key: string
+  answer?: string
+  status?: 'open' | 'dismissed'
+}
+
+const TITLES = { one: 'interview.saveFailed', many: 'interview.saveFailedCount' }
+
+let present: ReturnType<typeof vi.fn>
+
+beforeEach(() => {
+  present = vi.fn()
+  vi.stubGlobal('usePipelineErrorToast', () => ({ present }))
+})
+
+function harness(questions: Q[], write: (id: string, answer: string) => Promise<unknown>) {
+  const list = ref<Q[]>(questions)
+  const blockId = ref<string | null>('blk_1')
+  const seam = useInterviewDrafts<Q>({
+    blockId: () => blockId.value,
+    questions: () => list.value,
+    pending: () => list.value.filter((q) => !(q.answer ?? '').trim()),
+    write: (_block, questionId, answer) => write(questionId, answer),
+    writable: (q) => q.status !== 'dismissed',
+    failureTitleKeys: TITLES,
+  })
+  return { ...seam, list, blockId }
+}
+
+describe('useInterviewDrafts', () => {
+  it('seeds each draft from the entity and leaves an edit alone across rounds', async () => {
+    const { drafts, list } = harness([{ id: 'q1', key: 'q1', answer: 'recorded' }], async () => {})
+    expect(drafts.q1).toBe('recorded')
+
+    drafts.q1 = 'the human is mid-edit'
+    list.value = [
+      { id: 'q1', key: 'q1', answer: 'recorded' },
+      { id: 'q2', key: 'q2' },
+    ]
+    await nextTick()
+
+    expect(drafts.q1).toBe('the human is mid-edit')
+    expect(drafts.q2).toBe('')
+  })
+
+  it('writes only the drafts that changed, and never a question set aside', async () => {
+    const written: string[] = []
+    const { drafts, flushDrafts } = harness(
+      [
+        { id: 'q1', key: 'q1', answer: 'already this' },
+        { id: 'q2', key: 'q2' },
+        { id: 'q3', key: 'q3', status: 'dismissed' },
+      ],
+      async (id) => {
+        written.push(id)
+      },
+    )
+
+    drafts.q1 = 'already this'
+    drafts.q2 = 'a new answer'
+    drafts.q3 = 'a stale draft on a not-relevant question'
+    flushDrafts()
+    await vi.waitFor(() => expect(written).toEqual(['q2']))
+    expect(present).not.toHaveBeenCalled()
+  })
+
+  // The defect: a sequential loop that awaited straight through abandoned every answer after the
+  // first rejection, with the window already torn down and nothing left on screen to say so.
+  it('keeps flushing after a failed write, then reports how many were lost', async () => {
+    const attempted: string[] = []
+    const { drafts, flushDrafts } = harness(
+      [
+        { id: 'q1', key: 'q1' },
+        { id: 'q2', key: 'q2' },
+        { id: 'q3', key: 'q3' },
+      ],
+      async (id) => {
+        attempted.push(id)
+        if (id !== 'q2') throw new Error(`boom ${id}`)
+      },
+    )
+
+    drafts.q1 = 'one'
+    drafts.q2 = 'two'
+    drafts.q3 = 'three'
+    flushDrafts()
+
+    await vi.waitFor(() => expect(present).toHaveBeenCalled())
+    expect(attempted).toEqual(['q1', 'q2', 'q3'])
+    // The plural title, carrying the count, plus the FIRST cause so the toast's detail names a real
+    // failure rather than a synthesised summary.
+    expect(present).toHaveBeenCalledWith(expect.any(Error), TITLES.many, { count: 2 })
+    expect((present.mock.calls[0]![0] as Error).message).toBe('boom q1')
+  })
+
+  it('reports a single lost answer with the singular title', async () => {
+    const { drafts, flushDrafts } = harness([{ id: 'q1', key: 'q1' }], async () => {
+      throw new Error('nope')
+    })
+    drafts.q1 = 'one'
+    flushDrafts()
+
+    await vi.waitFor(() => expect(present).toHaveBeenCalled())
+    expect(present).toHaveBeenCalledWith(expect.any(Error), TITLES.one, { count: 1 })
+  })
+
+  it('reports a failed single save from the blur path', async () => {
+    const { drafts, saveAnswer } = harness([{ id: 'q1', key: 'q1' }], async () => {
+      throw new Error('nope')
+    })
+    drafts.q1 = 'one'
+    saveAnswer({ id: 'q1', key: 'q1' })
+
+    await vi.waitFor(() =>
+      expect(present).toHaveBeenCalledWith(expect.any(Error), TITLES.one, {
+        count: 1,
+      }),
+    )
+  })
+
+  // A missing answer may not be submitted as if it were there, and the window has to stay put so the
+  // same button is still on screen with the text still in its box.
+  it('withholds the action when a draft could not be written', async () => {
+    const action = vi.fn().mockResolvedValue(undefined)
+    const { drafts, flushThen } = harness([{ id: 'q1', key: 'q1' }], async () => {
+      throw new Error('nope')
+    })
+    drafts.q1 = 'one'
+
+    await flushThen(action, 'interview.continueFailed')
+
+    expect(action).not.toHaveBeenCalled()
+    expect(present).toHaveBeenCalledWith(expect.any(Error), TITLES.one, { count: 1 })
+  })
+
+  it('runs the action once every draft is written, and reports the action itself failing', async () => {
+    const written: string[] = []
+    const { drafts, flushThen } = harness([{ id: 'q1', key: 'q1' }], async (id) => {
+      written.push(id)
+    })
+    drafts.q1 = 'one'
+
+    const ok = vi.fn().mockResolvedValue(undefined)
+    await flushThen(ok, 'interview.continueFailed')
+    expect(written).toEqual(['q1'])
+    expect(ok).toHaveBeenCalledWith('blk_1')
+    expect(present).not.toHaveBeenCalled()
+
+    // The backing stores rethrow and Vue discards a click handler's promise, so the action's own
+    // failure is reported here or nowhere.
+    await flushThen(
+      vi.fn().mockRejectedValue(new Error('resume failed')),
+      'interview.continueFailed',
+    )
+    expect(present).toHaveBeenCalledWith(expect.any(Error), 'interview.continueFailed')
+  })
+
+  it('writes nothing once the view has torn down and the block id is gone', async () => {
+    const written: string[] = []
+    const { drafts, flushDrafts, flushThen, blockId } = harness(
+      [{ id: 'q1', key: 'q1' }],
+      async (id) => {
+        written.push(id)
+      },
+    )
+    drafts.q1 = 'one'
+    blockId.value = null
+
+    flushDrafts()
+    const action = vi.fn()
+    await flushThen(action, 'interview.continueFailed')
+    await nextTick()
+
+    expect(written).toEqual([])
+    expect(action).not.toHaveBeenCalled()
+  })
+
+  // An exchange with no id cannot be addressed by the answer write at all. It must not hold the
+  // submit button hostage, since nothing the human types would ever clear it.
+  it('excludes an unaddressable question from the unanswered count', () => {
+    const { drafts, addressable, unanswered } = harness(
+      [{ id: 'q1', key: 'q1' }, { key: 'q-1' }],
+      async () => {},
+    )
+
+    expect(addressable({ id: 'q1', key: 'q1' })).toBe(true)
+    expect(addressable({ key: 'q-1' })).toBe(false)
+    expect(unanswered.value).toBe(1)
+
+    drafts.q1 = 'answered'
+    expect(unanswered.value).toBe(0)
+  })
+})