@cat-factory/app 0.164.0 → 0.165.0

package/app/components/requirements/RequirementsReviewWindow.logic.spec.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from 'vitest'
+import {
+  findingAttention,
+  orderFindings,
+  reconcileFindingOrder,
+  type FindingRecommendationState,
+  type OrderedFinding,
+} from './RequirementsReviewWindow.logic'
+import type { RequirementReviewItem } from '~/types/requirements'
+
+/**
+ * The findings list's floating order. The point of the feature is that a human working a long
+ * review never has to hunt for what is still on them, so these pin the bucketing (including the
+ * cases where the recommendation state disagrees with the finding's own status), the tie-breaking
+ * that keeps the sort stable, and the pinning rule that stops the list re-sorting under a cursor
+ * without ever letting a stale pin hide a newly-raised finding.
+ */
+const NO_REC: FindingRecommendationState = { pending: false, ready: false }
+
+const item = (
+  id: string,
+  status: RequirementReviewItem['status'],
+  severity: RequirementReviewItem['severity'] = 'medium',
+): RequirementReviewItem => ({
+  id,
+  category: 'question',
+  severity,
+  title: id,
+  detail: `detail for ${id}`,
+  status,
+  reply: null,
+  createdAt: 0,
+  updatedAt: 0,
+})
+
+const order = (
+  items: RequirementReviewItem[],
+  recs: Record<string, FindingRecommendationState> = {},
+) => orderFindings(items, (i) => recs[i.id] ?? NO_REC)
+
+describe('findingAttention', () => {
+  it('puts an unanswered finding on the human', () => {
+    expect(findingAttention(item('a', 'open'), NO_REC)).toBe('action')
+  })
+
+  it('settles a finding the human already reacted to', () => {
+    expect(findingAttention(item('a', 'answered'), NO_REC)).toBe('settled')
+    expect(findingAttention(item('a', 'dismissed'), NO_REC)).toBe('settled')
+    expect(findingAttention(item('a', 'resolved'), NO_REC)).toBe('settled')
+  })
+
+  it('parks a finding whose suggestion is still being generated', () => {
+    expect(
+      findingAttention(item('a', 'recommend_requested'), { pending: true, ready: false }),
+    ).toBe('waiting')
+    // Even one the human never settled: there is nothing to react to until the Writer lands.
+    expect(findingAttention(item('a', 'open'), { pending: true, ready: false })).toBe('waiting')
+  })
+
+  it('returns a finding to the human the moment its suggestion is ready to accept or reject', () => {
+    expect(
+      findingAttention(item('a', 'recommend_requested'), { pending: false, ready: true }),
+    ).toBe('action')
+    // A ready suggestion outranks even an answer already recorded — accept/reject is still owed.
+    expect(findingAttention(item('a', 'answered'), { pending: false, ready: true })).toBe('action')
+  })
+
+  it('returns a recommend-requested finding with nothing in flight to the human', () => {
+    // The suggestion was rejected / never landed: nothing more is coming, so it is back on them.
+    expect(findingAttention(item('a', 'recommend_requested'), NO_REC)).toBe('action')
+  })
+})
+
+describe('orderFindings', () => {
+  it('floats what needs a reaction above what is waiting, above what is handled', () => {
+    const items = [
+      item('handled', 'answered'),
+      item('waiting', 'recommend_requested'),
+      item('needs-me', 'open'),
+    ]
+    expect(
+      order(items, { waiting: { pending: true, ready: false } }).map((entry) => entry.id),
+    ).toEqual(['needs-me', 'waiting', 'handled'])
+  })
+
+  it('keeps severity as the order within a bucket', () => {
+    const items = [item('low', 'open', 'low'), item('high', 'open', 'high'), item('mid', 'open')]
+    expect(order(items).map((entry) => entry.id)).toEqual(['high', 'mid', 'low'])
+  })
+
+  it('breaks ties on the reviewer ordering, so the sort is stable', () => {
+    const items = [item('first', 'open'), item('second', 'open'), item('third', 'open')]
+    expect(order(items).map((entry) => entry.id)).toEqual(['first', 'second', 'third'])
+  })
+
+  it('outranks severity by attention, so a low open finding beats a high handled one', () => {
+    const items = [item('high-handled', 'dismissed', 'high'), item('low-open', 'open', 'low')]
+    expect(order(items).map((entry) => entry.id)).toEqual(['low-open', 'high-handled'])
+  })
+
+  it('tags each entry with the bucket its position came from', () => {
+    const items = [item('a', 'open'), item('b', 'dismissed')]
+    expect(order(items)).toEqual([
+      { id: 'a', attention: 'action' },
+      { id: 'b', attention: 'settled' },
+    ])
+  })
+
+  it('handles an empty review', () => {
+    expect(order([])).toEqual([])
+  })
+})
+
+describe('reconcileFindingOrder', () => {
+  const desired: OrderedFinding[] = [
+    { id: 'a', attention: 'action' },
+    { id: 'b', attention: 'settled' },
+  ]
+
+  it('falls back to the computed order when nothing is pinned', () => {
+    expect(reconcileFindingOrder(desired, null)).toEqual(desired)
+  })
+
+  it('holds the pinned order while it covers the same findings', () => {
+    // `b` has since been answered and would now sink, but the pin keeps the list still.
+    const pinned: OrderedFinding[] = [
+      { id: 'b', attention: 'action' },
+      { id: 'a', attention: 'action' },
+    ]
+    expect(reconcileFindingOrder(desired, pinned)).toBe(pinned)
+  })
+
+  it('drops a pin that no longer covers every finding, so a new one can never be hidden', () => {
+    const pinned: OrderedFinding[] = [{ id: 'a', attention: 'action' }]
+    expect(reconcileFindingOrder(desired, pinned)).toEqual(desired)
+  })
+
+  it('drops a pin naming a finding the review no longer has', () => {
+    const pinned: OrderedFinding[] = [
+      { id: 'a', attention: 'action' },
+      { id: 'gone', attention: 'action' },
+    ]
+    expect(reconcileFindingOrder(desired, pinned)).toEqual(desired)
+  })
+})

package/app/components/requirements/RequirementsReviewWindow.logic.ts

@@ -0,0 +1,105 @@
+// Pure ordering for the requirements-review window's findings list.
+//
+// A reviewer pass raises its findings in whatever order it produced them, and the human then
+// works down the list answering, dismissing or handing findings to the Requirement Writer. A
+// finding they have dealt with keeps its slot, so on a long review (and on every re-review, which
+// re-raises what is still unresolved alongside what is new) the ones still waiting on a reaction
+// end up scattered between settled ones. This floats what still needs the human to the top and
+// sinks what is already handled, so "what is left for me?" is answered by looking at the top of
+// the list instead of scrolling it end to end.
+//
+// Kept out of the SFC so the bucketing, the comparator and the pinning rule are unit-testable
+// without mounting Nuxt.
+import type { RequirementReviewItem, ReviewItemSeverity } from '~/types/requirements'
+
+/**
+ * How much of the human's attention a finding still wants.
+ * - `action` — the ball is in THEIR court: an unanswered finding, or a Writer suggestion sitting
+ *   there awaiting accept/reject.
+ * - `waiting` — the ball is in the MACHINE's court: the Requirement Writer is still producing a
+ *   suggestion for this finding, so there is nothing to react to yet.
+ * - `settled` — answered, dismissed or resolved; nothing further is owed per-finding (the review
+ *   as a whole still needs the incorporate/proceed decision, which lives in the action rail).
+ */
+export type FindingAttention = 'action' | 'waiting' | 'settled'
+
+/** What the review's recommendation collection currently holds for one finding. */
+export interface FindingRecommendationState {
+  /** A requested suggestion is still being generated by the Writer. */
+  pending: boolean
+  /** A generated suggestion is waiting on the human's accept/reject. */
+  ready: boolean
+}
+
+/** One finding in the rendered order, tagged with the bucket its position came from. */
+export interface OrderedFinding {
+  id: string
+  attention: FindingAttention
+}
+
+const ATTENTION_RANK: Record<FindingAttention, number> = { action: 0, waiting: 1, settled: 2 }
+const SEVERITY_RANK: Record<ReviewItemSeverity, number> = { high: 0, medium: 1, low: 2 }
+
+/**
+ * Which bucket a finding belongs in. The recommendation state OUTRANKS the finding's own status,
+ * because that is where the actionability actually moved: a finding parked in
+ * `recommend_requested` is the human's problem again the moment a suggestion lands (accept or
+ * reject), and is nobody's problem while the Writer is still thinking. A `recommend_requested`
+ * finding with NEITHER a pending nor a ready suggestion has had its recommendation declined or
+ * lost, so nothing more is coming and it is back on the human — the opposite of what its status
+ * alone would suggest.
+ */
+export function findingAttention(
+  item: Pick<RequirementReviewItem, 'status'>,
+  recommendation: FindingRecommendationState,
+): FindingAttention {
+  if (recommendation.ready) return 'action'
+  if (recommendation.pending) return 'waiting'
+  if (item.status === 'open' || item.status === 'recommend_requested') return 'action'
+  return 'settled'
+}
+
+/**
+ * The findings in the order the window should render them: unreacted-to first, then whatever the
+ * Writer is still working on, then everything already handled. Severity stays the secondary key
+ * (the order the window has always used within a bucket), and the reviewer's own ordering breaks
+ * the remaining ties so the sort is total and stable.
+ */
+export function orderFindings(
+  items: readonly RequirementReviewItem[],
+  recommendationFor: (item: RequirementReviewItem) => FindingRecommendationState,
+): OrderedFinding[] {
+  return items
+    .map((item, index) => ({
+      id: item.id,
+      attention: findingAttention(item, recommendationFor(item)),
+      severity: item.severity,
+      index,
+    }))
+    .sort(
+      (a, b) =>
+        ATTENTION_RANK[a.attention] - ATTENTION_RANK[b.attention] ||
+        SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity] ||
+        a.index - b.index,
+    )
+    .map(({ id, attention }) => ({ id, attention }))
+}
+
+/**
+ * Which order to actually render: the PINNED one while it still covers exactly the same findings,
+ * otherwise the freshly computed one.
+ *
+ * The window pins the order while the human is typing in a finding's box and re-pins once they
+ * leave it, because an answer auto-saves on blur: re-sorting at that exact moment would slide the
+ * card they just clicked into out from under the cursor. Pinning is only ever allowed to hold a
+ * position STALE, never to hide a finding — a reviewer pass that adds or drops findings therefore
+ * invalidates the pin outright rather than rendering a list missing the new ones.
+ */
+export function reconcileFindingOrder(
+  desired: readonly OrderedFinding[],
+  pinned: readonly OrderedFinding[] | null,
+): readonly OrderedFinding[] {
+  if (!pinned || pinned.length !== desired.length) return desired
+  const ids = new Set(desired.map((entry) => entry.id))
+  return pinned.every((entry) => ids.has(entry.id)) ? pinned : desired
+}

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -10,6 +10,12 @@
 import { parseOutputOutline } from '~/utils/agentOutput'
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
+import {
+  orderFindings,
+  reconcileFindingOrder,
+  type FindingAttention,
+  type OrderedFinding,
+} from './RequirementsReviewWindow.logic'
 import type {
   RequirementRecommendation,
   RequirementReview,
@@ -48,6 +54,11 @@ const showRedo = ref(false)
 // Human's explicit collapse choice for the whole incorporated-requirements section; null = follow
 // the default (collapse it while there's still work to do so it doesn't dominate the window).
 const docCollapsedOverride = ref<boolean | null>(null)
+// State of the floating findings order (the section that computes it, further down, explains the
+// pinning rule). Declared up here because `onOpen` fires SYNCHRONOUSLY during setup and resets
+// them — a ref declared below would be in its temporal dead zone at that point.
+const pinnedOrder = ref<OrderedFinding[] | null>(null)
+const editingFinding = ref(false)
 
 // The seam contract (open/blockId/close + Escape handling + load-on-open) lives in
 // `useResultView`, so this window can't drift from the others. Declaring `onOpen` makes the
@@ -64,6 +75,10 @@ const { open, blockId, instanceId, stepIndex, close } = useResultView('requireme
     redoComment.value = ''
     showRedo.value = false
     docCollapsedOverride.value = null
+    // Re-open is the settle point that matters most: whatever is still outstanding floats back to
+    // the top rather than inheriting the order the previous session was pinned to.
+    pinnedOrder.value = null
+    editingFinding.value = false
     void requirements.load(blockId)
   },
   // Closing the window (X, backdrop, Escape) must not silently drop an answer the user typed
@@ -84,14 +99,6 @@ const reworking = computed(() =>
 )
 const acting = ref(false)
 
-const SEVERITY_RANK: Record<ReviewItemSeverity, number> = { high: 0, medium: 1, low: 2 }
-const sortedItems = computed<RequirementReviewItem[]>(() => {
-  if (!review.value) return []
-  return [...review.value.items].sort(
-    (a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity],
-  )
-})
-
 const openCount = computed(() => (review.value ? requirements.openCount(review.value) : 0))
 const answeredCount = computed(() => (review.value ? requirements.answeredCount(review.value) : 0))
 const status = computed(() => review.value?.status ?? null)
@@ -312,6 +319,71 @@ function readyRecFor(item: RequirementReviewItem) {
 function pendingRecFor(item: RequirementReviewItem) {
   return recFor(item, 'pending')
 }
+
+// --- Floating findings order ------------------------------------------------
+// Findings the human still owes a reaction float to the top, then the ones the Writer is still
+// thinking about, then everything already handled — so a long review (or a re-review, which
+// re-raises unresolved findings alongside new ones) doesn't leave the outstanding work scattered
+// between settled cards. Severity remains the order WITHIN a bucket. Ranking is pure
+// (`RequirementsReviewWindow.logic.ts`); the window only decides WHEN to apply it.
+const desiredOrder = computed<OrderedFinding[]>(() =>
+  orderFindings(review.value?.items ?? [], (item) => ({
+    pending: !!pendingRecFor(item),
+    ready: !!readyRecFor(item),
+  })),
+)
+// `pinnedOrder` (declared at the top of the script, since `onOpen` resets it) holds the order
+// actually rendered; null means "use the computed one". It is pinned while `editingFinding` — focus
+// inside one of a finding's text boxes — is true, because an answer auto-saves on BLUR, which
+// re-buckets that finding: re-sorting right then would slide the card the user just clicked into
+// out from under their cursor. Focus moving straight from one box to the next never lets the flag
+// settle to `false`, so the list holds still for a whole editing burst and the remaining work
+// floats back up the moment they leave it.
+function isTextEntry(target: EventTarget | null): boolean {
+  return target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement
+}
+function onFindingFocusIn(event: FocusEvent) {
+  if (isTextEntry(event.target)) editingFinding.value = true
+}
+function onFindingFocusOut(event: FocusEvent) {
+  if (isTextEntry(event.target)) editingFinding.value = false
+}
+watch(
+  [desiredOrder, editingFinding],
+  () => {
+    if (!editingFinding.value) pinnedOrder.value = desiredOrder.value
+  },
+  { immediate: true },
+)
+const orderedFindings = computed<{ item: RequirementReviewItem; attention: FindingAttention }[]>(
+  () => {
+    const byId = new Map((review.value?.items ?? []).map((item) => [item.id, item]))
+    return reconcileFindingOrder(desiredOrder.value, pinnedOrder.value).flatMap((entry) => {
+      const item = byId.get(entry.id)
+      return item ? [{ item, attention: entry.attention }] : []
+    })
+  },
+)
+// Label the buckets only once the list actually spans more than one — on a fresh review every
+// finding is outstanding, and a lone "Needs your reaction" heading over all of them is noise.
+const attentionGroupsShown = computed(
+  () => new Set(orderedFindings.value.map((entry) => entry.attention)).size > 1,
+)
+function startsAttentionGroup(index: number): boolean {
+  if (!attentionGroupsShown.value) return false
+  const entries = orderedFindings.value
+  return index === 0 || entries[index - 1]?.attention !== entries[index]?.attention
+}
+const ATTENTION_LABELS = computed<Record<FindingAttention, string>>(() => ({
+  action: t('requirements.group.action'),
+  waiting: t('requirements.group.waiting'),
+  settled: t('requirements.group.settled'),
+}))
+const ATTENTION_LABEL_COLOR = {
+  action: 'text-amber-300',
+  waiting: 'text-indigo-300',
+  settled: 'text-slate-500',
+} as const satisfies Record<FindingAttention, string>
 // Whether a finding's recorded reply is the human's OWN answer (vs an untouched auto-generated
 // recommended default). Drives the "User answered" marker on the Answer option.
 function isUserAnswered(item: RequirementReviewItem): boolean {
@@ -643,249 +715,265 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </span>
           </div>
 
-          <!-- findings to react to -->
-          <div v-if="review.items.length" class="flex flex-col gap-3">
-            <div
-              v-for="item in sortedItems"
-              :key="item.id"
-              class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
-              :class="{ 'opacity-60': item.status === 'dismissed' }"
-            >
-              <div class="flex items-start gap-2">
-                <UIcon
-                  :name="CATEGORY_ICON[item.category]"
-                  class="mt-0.5 h-4 w-4 shrink-0 text-slate-400"
-                />
-                <div class="min-w-0 flex-1">
-                  <div class="flex flex-wrap items-center gap-1.5">
-                    <span class="text-sm font-medium text-white">{{ item.title }}</span>
-                    <UBadge size="xs" variant="subtle" :color="SEVERITY_COLOR[item.severity]">
-                      {{ SEVERITY_LABELS[item.severity] }}
-                    </UBadge>
-                    <UBadge size="xs" variant="outline" color="neutral">
-                      {{ CATEGORY_LABELS[item.category] }}
-                    </UBadge>
-                    <!-- Once the automation has pre-answered some findings, flag the ones it
+          <!-- findings to react to — ordered so anything still owed a reaction sits at the
+                   top (see the floating-order section in the script), with the buckets labelled
+                   once the list spans more than one of them -->
+          <div
+            v-if="review.items.length"
+            class="flex flex-col gap-3"
+            @focusin="onFindingFocusIn"
+            @focusout="onFindingFocusOut"
+          >
+            <template v-for="({ item, attention }, index) in orderedFindings" :key="item.id">
+              <div v-if="startsAttentionGroup(index)" class="flex items-center gap-2 pt-1">
+                <span
+                  class="text-[11px] font-semibold uppercase tracking-wide"
+                  :class="ATTENTION_LABEL_COLOR[attention]"
+                >
+                  {{ ATTENTION_LABELS[attention] }}
+                </span>
+                <span class="h-px flex-1 bg-slate-800" />
+              </div>
+              <div
+                class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+                :class="{ 'opacity-60': item.status === 'dismissed' }"
+              >
+                <div class="flex items-start gap-2">
+                  <UIcon
+                    :name="CATEGORY_ICON[item.category]"
+                    class="mt-0.5 h-4 w-4 shrink-0 text-slate-400"
+                  />
+                  <div class="min-w-0 flex-1">
+                    <div class="flex flex-wrap items-center gap-1.5">
+                      <span class="text-sm font-medium text-white">{{ item.title }}</span>
+                      <UBadge size="xs" variant="subtle" :color="SEVERITY_COLOR[item.severity]">
+                        {{ SEVERITY_LABELS[item.severity] }}
+                      </UBadge>
+                      <UBadge size="xs" variant="outline" color="neutral">
+                        {{ CATEGORY_LABELS[item.category] }}
+                      </UBadge>
+                      <!-- Once the automation has pre-answered some findings, flag the ones it
                              left open as the genuine business decisions that need the human. -->
-                    <UBadge
-                      v-if="
-                        hasAutoDefaults && item.status === 'open' && item.autoAnswerable === false
-                      "
-                      size="xs"
-                      variant="subtle"
-                      color="warning"
-                    >
-                      {{ t('requirements.needsYourInput') }}
-                    </UBadge>
-                    <UBadge
-                      size="xs"
-                      variant="soft"
-                      :color="STATUS_COLOR[item.status]"
-                      class="ms-auto"
-                    >
-                      {{ STATUS_LABELS[item.status] }}
-                    </UBadge>
-                  </div>
-                  <p class="mt-1 whitespace-pre-line text-sm text-slate-400">
-                    {{ item.detail }}
-                  </p>
+                      <UBadge
+                        v-if="
+                          hasAutoDefaults && item.status === 'open' && item.autoAnswerable === false
+                        "
+                        size="xs"
+                        variant="subtle"
+                        color="warning"
+                      >
+                        {{ t('requirements.needsYourInput') }}
+                      </UBadge>
+                      <UBadge
+                        size="xs"
+                        variant="soft"
+                        :color="STATUS_COLOR[item.status]"
+                        class="ms-auto"
+                      >
+                        {{ STATUS_LABELS[item.status] }}
+                      </UBadge>
+                    </div>
+                    <p class="mt-1 whitespace-pre-line text-sm text-slate-400">
+                      {{ item.detail }}
+                    </p>
 
-                  <!-- recorded answer (only for non-editable findings — for editable
+                    <!-- recorded answer (only for non-editable findings — for editable
                            ones the answer lives in the textarea below, seeded from the reply) -->
-                  <div
-                    v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
-                    class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
-                  >
-                    <span class="text-[10px] uppercase tracking-wide text-slate-500">
-                      {{ t('requirements.answerLabel') }}
-                    </span>
-                    <p class="whitespace-pre-line">{{ item.reply }}</p>
-                  </div>
+                    <div
+                      v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
+                      class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                    >
+                      <span class="text-[10px] uppercase tracking-wide text-slate-500">
+                        {{ t('requirements.answerLabel') }}
+                      </span>
+                      <p class="whitespace-pre-line">{{ item.reply }}</p>
+                    </div>
 
-                  <!-- per-finding 3-way selector: Answer (write it) / Dismiss (irrelevant) /
+                    <!-- per-finding 3-way selector: Answer (write it) / Dismiss (irrelevant) /
                            Recommend (let the Requirement Writer suggest one). The active mode
                            drives the content below, IN PLACE — no separate section. Disabled once
                            the requirements are settled / a cycle is running; hidden for a
                            `resolved` finding (its recorded answer shows above). -->
-                  <template v-if="item.status !== 'resolved'">
-                    <div class="mt-2 flex flex-wrap items-center gap-1">
-                      <UButton
-                        v-for="opt in FINDING_MODES"
-                        :key="opt.mode"
-                        :color="modeFor(item) === opt.mode ? 'primary' : 'neutral'"
-                        :variant="modeFor(item) === opt.mode ? 'soft' : 'ghost'"
-                        size="xs"
-                        :icon="opt.icon"
-                        :disabled="frozen"
-                        @click="setMode(item, opt.mode)"
-                      >
-                        {{ t(opt.labelKey) }}
-                        <UIcon
-                          v-if="opt.mode === 'answer' && isUserAnswered(item)"
-                          name="i-lucide-check"
-                          class="h-3.5 w-3.5 text-emerald-400"
-                        />
-                      </UButton>
-                    </div>
-
-                    <!-- ANSWER: type the answer directly (auto-saves on blur) -->
-                    <template v-if="modeFor(item) === 'answer'">
-                      <!-- Auto-generated recommended default: the automation pre-filled this
-                               answer; the human can keep it, edit it, or switch modes. -->
-                      <div
-                        v-if="autoDefaults.get(item.id)"
-                        class="mt-2 flex flex-wrap items-center gap-1.5 text-xs text-indigo-300"
-                      >
-                        <UIcon name="i-lucide-sparkles" class="h-3.5 w-3.5 shrink-0" />
-                        <span>{{ t('requirements.recommendedDefault') }}</span>
-                        <UBadge
-                          v-if="autoDefaults.get(item.id)!.groundedInFragment"
+                    <template v-if="item.status !== 'resolved'">
+                      <div class="mt-2 flex flex-wrap items-center gap-1">
+                        <UButton
+                          v-for="opt in FINDING_MODES"
+                          :key="opt.mode"
+                          :color="modeFor(item) === opt.mode ? 'primary' : 'neutral'"
+                          :variant="modeFor(item) === opt.mode ? 'soft' : 'ghost'"
                           size="xs"
-                          variant="subtle"
-                          color="primary"
+                          :icon="opt.icon"
+                          :disabled="frozen"
+                          @click="setMode(item, opt.mode)"
                         >
-                          {{
-                            t('requirements.currentStandard', {
-                              title: autoDefaults.get(item.id)!.groundedInFragment!.title,
-                            })
-                          }}
-                        </UBadge>
+                          {{ t(opt.labelKey) }}
+                          <UIcon
+                            v-if="opt.mode === 'answer' && isUserAnswered(item)"
+                            name="i-lucide-check"
+                            class="h-3.5 w-3.5 text-emerald-400"
+                          />
+                        </UButton>
                       </div>
-                      <UTextarea
-                        v-model="drafts[item.id]"
-                        :rows="2"
-                        autoresize
-                        size="sm"
-                        class="mt-2 w-full"
-                        :placeholder="t('requirements.answerPlaceholder')"
-                        :disabled="frozen"
-                        @blur="persistDraft(item)"
-                      />
-                      <p
-                        v-if="isUserAnswered(item)"
-                        class="mt-1 flex items-center gap-1 text-[11px] text-emerald-400"
-                      >
-                        <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
-                        {{ t('requirements.userAnswered') }}
-                      </p>
-                    </template>
 
-                    <!-- RECOMMEND: generating / the ready suggestion / a guidance box, all
-                             rendered inline where the question was asked. -->
-                    <template v-else-if="modeFor(item) === 'recommend'">
-                      <div
-                        v-if="pendingRecFor(item)"
-                        class="mt-2 flex items-center gap-1.5 text-xs text-indigo-300"
-                      >
-                        <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
-                        {{ t('requirements.generatingSuggestion') }}
-                      </div>
-                      <template v-else-if="readyRecFor(item)">
+                      <!-- ANSWER: type the answer directly (auto-saves on blur) -->
+                      <template v-if="modeFor(item) === 'answer'">
+                        <!-- Auto-generated recommended default: the automation pre-filled this
+                               answer; the human can keep it, edit it, or switch modes. -->
                         <div
-                          v-for="rec in [readyRecFor(item)!]"
-                          :key="rec.id"
-                          class="mt-2 rounded-lg border border-indigo-900/50 bg-indigo-950/20 p-3"
+                          v-if="autoDefaults.get(item.id)"
+                          class="mt-2 flex flex-wrap items-center gap-1.5 text-xs text-indigo-300"
                         >
+                          <UIcon name="i-lucide-sparkles" class="h-3.5 w-3.5 shrink-0" />
+                          <span>{{ t('requirements.recommendedDefault') }}</span>
                           <UBadge
-                            v-if="rec.groundedInFragment"
+                            v-if="autoDefaults.get(item.id)!.groundedInFragment"
                             size="xs"
                             variant="subtle"
-                            color="success"
-                            icon="i-lucide-badge-check"
+                            color="primary"
                           >
                             {{
                               t('requirements.currentStandard', {
-                                title: rec.groundedInFragment.title,
+                                title: autoDefaults.get(item.id)!.groundedInFragment!.title,
                               })
                             }}
                           </UBadge>
-                          <p class="mt-1 whitespace-pre-line text-sm text-slate-300">
-                            {{ rec.recommendedText }}
-                          </p>
-                          <div class="mt-2 flex flex-wrap items-center gap-2">
-                            <UButton
-                              color="primary"
-                              variant="soft"
-                              size="xs"
-                              icon="i-lucide-check"
-                              :disabled="frozen || !access.canExecuteRuns.value"
-                              :title="
-                                access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                              "
-                              @click="acceptRecommendation(rec)"
-                            >
-                              {{ t('requirements.accept') }}
-                            </UButton>
-                            <UButton
-                              color="neutral"
-                              variant="ghost"
-                              size="xs"
-                              icon="i-lucide-x"
-                              :disabled="frozen || !access.canExecuteRuns.value"
-                              :title="
-                                access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                              "
-                              @click="rejectRecommendation(rec)"
-                            >
-                              {{ t('requirements.reject') }}
-                            </UButton>
-                          </div>
-                          <div class="mt-2 flex items-start gap-2">
-                            <UTextarea
-                              v-model="reRequestNotes[rec.id]"
-                              :rows="1"
-                              autoresize
-                              size="sm"
-                              class="flex-1"
-                              :placeholder="t('requirements.reRequestPlaceholder')"
-                              :disabled="frozen || recommending"
-                            />
-                            <UButton
-                              color="neutral"
-                              variant="soft"
-                              size="xs"
-                              icon="i-lucide-rotate-cw"
-                              :loading="recommending"
-                              :disabled="
-                                !(reRequestNotes[rec.id] ?? '').trim() ||
-                                frozen ||
-                                !access.canExecuteRuns.value
-                              "
-                              :title="
-                                access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
-                              "
-                              @click="reRequestRecommendation(rec)"
-                            >
-                              {{ t('requirements.reRequest') }}
-                            </UButton>
-                          </div>
                         </div>
-                      </template>
-                      <template v-else>
                         <UTextarea
-                          v-model="guidanceDrafts[item.id]"
+                          v-model="drafts[item.id]"
                           :rows="2"
                           autoresize
                           size="sm"
                           class="mt-2 w-full"
-                          :placeholder="t('requirements.guidancePlaceholder')"
+                          :placeholder="t('requirements.answerPlaceholder')"
                           :disabled="frozen"
+                          @blur="persistDraft(item)"
                         />
-                        <p class="mt-1 flex items-center gap-1 text-[11px] text-indigo-300/80">
-                          <UIcon name="i-lucide-wand-2" class="h-3 w-3 shrink-0" />
-                          {{ t('requirements.guidanceHint') }}
+                        <p
+                          v-if="isUserAnswered(item)"
+                          class="mt-1 flex items-center gap-1 text-[11px] text-emerald-400"
+                        >
+                          <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
+                          {{ t('requirements.userAnswered') }}
                         </p>
                       </template>
-                    </template>
 
-                    <!-- DISMISS: nothing to fill in — a short note explains the effect -->
-                    <p v-else class="mt-2 text-[11px] text-slate-500">
-                      {{ t('requirements.dismissedHint') }}
-                    </p>
-                  </template>
+                      <!-- RECOMMEND: generating / the ready suggestion / a guidance box, all
+                             rendered inline where the question was asked. -->
+                      <template v-else-if="modeFor(item) === 'recommend'">
+                        <div
+                          v-if="pendingRecFor(item)"
+                          class="mt-2 flex items-center gap-1.5 text-xs text-indigo-300"
+                        >
+                          <UIcon name="i-lucide-loader-circle" class="h-3.5 w-3.5 animate-spin" />
+                          {{ t('requirements.generatingSuggestion') }}
+                        </div>
+                        <template v-else-if="readyRecFor(item)">
+                          <div
+                            v-for="rec in [readyRecFor(item)!]"
+                            :key="rec.id"
+                            class="mt-2 rounded-lg border border-indigo-900/50 bg-indigo-950/20 p-3"
+                          >
+                            <UBadge
+                              v-if="rec.groundedInFragment"
+                              size="xs"
+                              variant="subtle"
+                              color="success"
+                              icon="i-lucide-badge-check"
+                            >
+                              {{
+                                t('requirements.currentStandard', {
+                                  title: rec.groundedInFragment.title,
+                                })
+                              }}
+                            </UBadge>
+                            <p class="mt-1 whitespace-pre-line text-sm text-slate-300">
+                              {{ rec.recommendedText }}
+                            </p>
+                            <div class="mt-2 flex flex-wrap items-center gap-2">
+                              <UButton
+                                color="primary"
+                                variant="soft"
+                                size="xs"
+                                icon="i-lucide-check"
+                                :disabled="frozen || !access.canExecuteRuns.value"
+                                :title="
+                                  access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
+                                "
+                                @click="acceptRecommendation(rec)"
+                              >
+                                {{ t('requirements.accept') }}
+                              </UButton>
+                              <UButton
+                                color="neutral"
+                                variant="ghost"
+                                size="xs"
+                                icon="i-lucide-x"
+                                :disabled="frozen || !access.canExecuteRuns.value"
+                                :title="
+                                  access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
+                                "
+                                @click="rejectRecommendation(rec)"
+                              >
+                                {{ t('requirements.reject') }}
+                              </UButton>
+                            </div>
+                            <div class="mt-2 flex items-start gap-2">
+                              <UTextarea
+                                v-model="reRequestNotes[rec.id]"
+                                :rows="1"
+                                autoresize
+                                size="sm"
+                                class="flex-1"
+                                :placeholder="t('requirements.reRequestPlaceholder')"
+                                :disabled="frozen || recommending"
+                              />
+                              <UButton
+                                color="neutral"
+                                variant="soft"
+                                size="xs"
+                                icon="i-lucide-rotate-cw"
+                                :loading="recommending"
+                                :disabled="
+                                  !(reRequestNotes[rec.id] ?? '').trim() ||
+                                  frozen ||
+                                  !access.canExecuteRuns.value
+                                "
+                                :title="
+                                  access.canExecuteRuns.value ? undefined : t('access.noRunExecute')
+                                "
+                                @click="reRequestRecommendation(rec)"
+                              >
+                                {{ t('requirements.reRequest') }}
+                              </UButton>
+                            </div>
+                          </div>
+                        </template>
+                        <template v-else>
+                          <UTextarea
+                            v-model="guidanceDrafts[item.id]"
+                            :rows="2"
+                            autoresize
+                            size="sm"
+                            class="mt-2 w-full"
+                            :placeholder="t('requirements.guidancePlaceholder')"
+                            :disabled="frozen"
+                          />
+                          <p class="mt-1 flex items-center gap-1 text-[11px] text-indigo-300/80">
+                            <UIcon name="i-lucide-wand-2" class="h-3 w-3 shrink-0" />
+                            {{ t('requirements.guidanceHint') }}
+                          </p>
+                        </template>
+                      </template>
+
+                      <!-- DISMISS: nothing to fill in — a short note explains the effect -->
+                      <p v-else class="mt-2 text-[11px] text-slate-500">
+                        {{ t('requirements.dismissedHint') }}
+                      </p>
+                    </template>
+                  </div>
                 </div>
               </div>
-            </div>
+            </template>
           </div>
 
           <!-- incorporated document: the standard-format requirements. The whole section

package/i18n/locales/de.json

@@ -3592,6 +3592,11 @@
     "recommendationRequested": "Empfehlung angefordert — prüfen Sie den Vorschlag unten.",
     "recommendedDefault": "Empfohlene Vorgabe: behalten, bearbeiten oder die Feststellung verwerfen.",
     "needsYourInput": "Benötigt Ihre Eingabe",
+    "group": {
+      "action": "Benötigt Ihre Reaktion",
+      "waiting": "Warten auf Vorschläge",
+      "settled": "Erledigt"
+    },
     "mode": {
       "answer": "Beantworten",
       "dismiss": "Verwerfen",

package/i18n/locales/en.json

@@ -4145,6 +4145,11 @@
     "recommendationRequested": "Recommendation requested — review the suggestion below.",
     "recommendedDefault": "Recommended default — keep it, edit it, or dismiss the finding.",
     "needsYourInput": "Needs your input",
+    "group": {
+      "action": "Needs your reaction",
+      "waiting": "Waiting on suggestions",
+      "settled": "Handled"
+    },
     "mode": {
       "answer": "Answer",
       "dismiss": "Dismiss",

package/i18n/locales/es.json

@@ -3996,6 +3996,11 @@
     "recommendationRequested": "Recomendación solicitada — revisa la sugerencia más abajo.",
     "recommendedDefault": "Valor recomendado por defecto: consérvalo, edítalo o descarta el hallazgo.",
     "needsYourInput": "Necesita tu intervención",
+    "group": {
+      "action": "Necesita tu reacción",
+      "waiting": "Esperando sugerencias",
+      "settled": "Gestionados"
+    },
     "mode": {
       "answer": "Responder",
       "dismiss": "Descartar",

package/i18n/locales/fr.json

@@ -3996,6 +3996,11 @@
     "recommendationRequested": "Recommandation demandée — consultez la suggestion ci-dessous.",
     "recommendedDefault": "Valeur recommandée par défaut : conservez-la, modifiez-la ou rejetez la constatation.",
     "needsYourInput": "Nécessite votre intervention",
+    "group": {
+      "action": "Nécessite votre réaction",
+      "waiting": "En attente de suggestions",
+      "settled": "Traitées"
+    },
     "mode": {
       "answer": "Répondre",
       "dismiss": "Ignorer",

package/i18n/locales/he.json

@@ -4007,6 +4007,11 @@
     "recommendationRequested": "התבקשה המלצה — סקור את ההצעה שלהלן.",
     "recommendedDefault": "ברירת מחדל מומלצת: השאר אותה, ערוך אותה או דחה את הממצא.",
     "needsYourInput": "דורש את הקלט שלך",
+    "group": {
+      "action": "דורש את תגובתך",
+      "waiting": "ממתין להצעות",
+      "settled": "טופלו"
+    },
     "mode": {
       "answer": "ענה",
       "dismiss": "דחה",

package/i18n/locales/it.json

@@ -3592,6 +3592,11 @@
     "recommendationRequested": "Raccomandazione richiesta — rivedi il suggerimento qui sotto.",
     "recommendedDefault": "Valore predefinito consigliato: mantienilo, modificalo o ignora il rilievo.",
     "needsYourInput": "Richiede il tuo intervento",
+    "group": {
+      "action": "Richiede la tua reazione",
+      "waiting": "In attesa di suggerimenti",
+      "settled": "Gestiti"
+    },
     "mode": {
       "answer": "Rispondi",
       "dismiss": "Ignora",

package/i18n/locales/ja.json

@@ -4008,6 +4008,11 @@
     "recommendationRequested": "推奨をリクエストしました。下記の提案を確認してください。",
     "recommendedDefault": "推奨される既定値です。そのまま使うか、編集するか、指摘を破棄してください。",
     "needsYourInput": "あなたの入力が必要です",
+    "group": {
+      "action": "対応が必要",
+      "waiting": "提案を待機中",
+      "settled": "対応済み"
+    },
     "mode": {
       "answer": "回答する",
       "dismiss": "破棄",

package/i18n/locales/pl.json

@@ -3996,6 +3996,11 @@
     "recommendationRequested": "Poproszono o rekomendację — sprawdź sugestię poniżej.",
     "recommendedDefault": "Zalecana wartość domyślna: zachowaj ją, edytuj lub odrzuć uwagę.",
     "needsYourInput": "Wymaga Twojej reakcji",
+    "group": {
+      "action": "Wymaga Twojej reakcji",
+      "waiting": "Oczekują na sugestie",
+      "settled": "Rozpatrzone"
+    },
     "mode": {
       "answer": "Odpowiedz",
       "dismiss": "Odrzuć",

package/i18n/locales/tr.json

@@ -4008,6 +4008,11 @@
     "recommendationRequested": "Öneri istendi — aşağıdaki öneriyi inceleyin.",
     "recommendedDefault": "Önerilen varsayılan: koruyun, düzenleyin ya da bulguyu yok sayın.",
     "needsYourInput": "Sizin girdiniz gerekiyor",
+    "group": {
+      "action": "Tepkinizi bekliyor",
+      "waiting": "Öneriler bekleniyor",
+      "settled": "Ele alındı"
+    },
     "mode": {
       "answer": "Yanıtla",
       "dismiss": "Yok say",

package/i18n/locales/uk.json

@@ -3996,6 +3996,11 @@
     "recommendationRequested": "Запитано рекомендацію — перегляньте пропозицію нижче.",
     "recommendedDefault": "Рекомендоване значення за замовчуванням: залиште його, відредагуйте або відхиліть зауваження.",
     "needsYourInput": "Потрібен ваш внесок",
+    "group": {
+      "action": "Потрібна ваша реакція",
+      "waiting": "Очікують на пропозиції",
+      "settled": "Опрацьовані"
+    },
     "mode": {
       "answer": "Відповісти",
       "dismiss": "Відхилити",

package/package.json

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