@cat-factory/app 0.185.0 → 0.186.0

package/README.md

@@ -142,7 +142,10 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
   the board.
 - **Inspector** (`components/panels` + `panels/inspector`) — per-block tabs:
   structure, dependencies, model + fragment picker, live execution, and linked
-  docs/issues/scenarios. Decisions resolve via `DecisionModal`.
+  docs/issues/scenarios. Decisions resolve via `DecisionModal`. A `review` task
+  additionally leads with `TaskReviewTarget`, linking the pull request it reviews —
+  distinct from the execution panel's link to the PR a run PRODUCED, which a review
+  task never has.
 - **Pipeline builder** (`components/pipeline`) — assemble/edit agent chains and
   watch `PipelineProgress`. `PipelinePicker` (+ its `PipelinePreview` pane) is the
   single way a pipeline is chosen anywhere — add-task, run settings, the recurring

package/app/assets/css/main.css

@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @import '@nuxt/ui';
+/* The shared rendered-markdown reader presentation (see prose.css). */
+@import './prose.css';
 
 /* Toast text should be selectable. Reka UI sets `user-select: none` inline on
  * the toast root (to support swipe-to-dismiss); since `user-select` is

package/app/assets/css/prose.css

@@ -0,0 +1,135 @@
+/*
+ * The rendered-markdown reader's presentation, shared by EVERY surface that reviews an agent's
+ * prose: the step-detail overlay (`AgentStepDetail`), the initiative tracker's plan-approval
+ * rail, and the clarity / requirements / brainstorm review windows. Global rather than scoped
+ * because the markup is injected with `v-html`, so a scoped sheet would need `:deep()` in each
+ * consumer — which is exactly what those windows each used to carry, five near-identical copies
+ * diverging a property at a time. "Consistent in look and feel across review surfaces" is the
+ * whole point, so the copy lives here once and a new reader adds `.reader-prose` and nothing else.
+ *
+ * `.reader-prose` styles the document; `.review-mode` turns each source-mapped block into a
+ * comment target (hover highlight + a "+" gutter affordance, GitHub-review style); `.cf-commented`
+ * / `.cf-selected` are the persistent markers `useProseComments` toggles.
+ */
+
+/* Approval mode: each source-mapped block becomes a comment target — a hover
+   highlight + a "+" gutter affordance, GitHub-review style. */
+.reader-prose.review-mode [data-src-start] {
+  position: relative;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: background 0.12s ease;
+}
+.reader-prose.review-mode [data-src-start]:hover {
+  background: rgb(99 102 241 / 0.08);
+  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.5);
+}
+.reader-prose.review-mode [data-src-start]::before {
+  content: '+';
+  position: absolute;
+  left: -1.4rem;
+  top: 0.1rem;
+  display: none;
+  height: 1.1rem;
+  width: 1.1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  background: rgb(99 102 241);
+  color: white;
+  font-size: 0.8rem;
+  line-height: 1;
+}
+.reader-prose.review-mode [data-src-start]:hover::before {
+  display: flex;
+}
+/* Persistent markers: amber for a block that already has a comment, indigo for
+   the block whose composer is currently open. */
+.reader-prose .cf-commented {
+  background: rgb(234 179 8 / 0.1);
+  box-shadow: inset 2px 0 0 rgb(234 179 8 / 0.6);
+}
+.reader-prose .cf-selected {
+  background: rgb(99 102 241 / 0.12);
+  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.8);
+}
+
+/* Styling for the markdown HTML injected via v-html (out of scoped reach without
+   :deep), kept close to the inspector's existing prose styling. */
+.reader-prose p {
+  margin: 0.5rem 0;
+}
+.reader-prose ul,
+.reader-prose ol {
+  margin: 0.5rem 0;
+  padding-left: 1.25rem;
+}
+.reader-prose ul {
+  list-style: disc;
+}
+.reader-prose ol {
+  list-style: decimal;
+}
+.reader-prose li {
+  margin: 0.2rem 0;
+}
+.reader-prose strong {
+  font-weight: 600;
+  color: rgb(226 232 240);
+}
+.reader-prose em {
+  font-style: italic;
+}
+.reader-prose code {
+  border-radius: 0.25rem;
+  background: rgb(30 41 59 / 0.8);
+  padding: 0.1rem 0.3rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+  color: rgb(199 210 254);
+}
+.reader-prose pre {
+  margin: 0.6rem 0;
+  overflow: auto;
+  border-radius: 0.5rem;
+  background: rgb(2 6 23 / 0.6);
+  padding: 0.75rem 0.9rem;
+}
+.reader-prose pre code {
+  background: transparent;
+  padding: 0;
+  color: rgb(203 213 225);
+}
+.reader-prose blockquote {
+  margin: 0.6rem 0;
+  border-left: 3px solid rgb(99 102 241 / 0.5);
+  padding-left: 0.75rem;
+  color: rgb(148 163 184);
+}
+.reader-prose table {
+  margin: 0.6rem 0;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+.reader-prose th,
+.reader-prose td {
+  border: 1px solid rgb(51 65 85);
+  padding: 0.3rem 0.6rem;
+}
+.reader-prose th {
+  background: rgb(30 41 59 / 0.6);
+  font-weight: 600;
+}
+.reader-prose hr {
+  margin: 1rem 0;
+  border: none;
+  border-top: 1px solid rgb(51 65 85);
+}
+.reader-prose h1,
+.reader-prose h2,
+.reader-prose h3,
+.reader-prose h4 {
+  margin: 0.6rem 0 0.3rem;
+  font-weight: 600;
+  color: rgb(226 232 240);
+}

package/app/components/board/AddTaskModal.vue

@@ -28,6 +28,8 @@ import ContextAttachmentFields from '~/components/context/ContextAttachmentField
 import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import { parseConflict } from '~/composables/usePipelineErrorToast'
+import { apiErrorEnvelope } from '~/composables/api/errors'
+import type { ReviewTargetReason } from '@cat-factory/contracts'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 
 const ui = useUiStore()
@@ -680,7 +682,7 @@ async function submitCreate(acknowledgeReviewDebt: boolean) {
     }
     toast.add({
       title: t('board.addTask.addFailedTitle'),
-      description: e instanceof Error ? e.message : String(e),
+      description: reviewTargetMessage(e) ?? (e instanceof Error ? e.message : String(e)),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
     })
@@ -689,6 +691,34 @@ async function submitCreate(acknowledgeReviewDebt: boolean) {
   }
 }
 
+// The backend validates a review task's target PR against the service's repo before creating
+// anything, and refuses with a machine-readable reason. Map it to translated copy here (the
+// backend does not localize prose); an unrecognised failure keeps the raw message.
+// Exhaustive over the closed union, so a new reason fails the typecheck rather than silently
+// falling through to an English sentence from the server.
+// Each message names what the user got wrong, so a detail the backend didn't send would leave a
+// hole in the sentence: those cases return null and the server's own prose is shown instead.
+const REVIEW_TARGET_MESSAGES: Record<
+  ReviewTargetReason,
+  (details: Record<string, unknown>) => string | null
+> = {
+  review_pr_not_found: (d) =>
+    typeof d.prNumber === 'number'
+      ? t('board.addTask.review.prNotFound', { number: d.prNumber })
+      : null,
+  review_pr_repo_mismatch: (d) =>
+    typeof d.expected === 'string'
+      ? t('board.addTask.review.prRepoMismatch', { repo: d.expected })
+      : null,
+}
+
+function reviewTargetMessage(error: unknown): string | null {
+  const details = (apiErrorEnvelope(error)?.details ?? {}) as Record<string, unknown>
+  const reason = details.reason
+  if (typeof reason !== 'string') return null
+  return REVIEW_TARGET_MESSAGES[reason as ReviewTargetReason]?.(details) ?? null
+}
+
 /** Turn a parsed review-debt friction 409 into the dialog context (see ReviewFrictionDialog.vue). */
 function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseConflict>>) {
   const details = conflict.details

package/app/components/brainstorm/BrainstormWindow.vue

@@ -610,41 +610,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 .pl-5\.5 {
   padding-left: 1.375rem;
 }
-/* Minimal CommonMark styling for the converged-direction reader (mirrors the prose
-   review window's reader-prose). */
-.reader-prose :deep(p) {
-  margin: 0.4rem 0;
-}
-.reader-prose :deep(ul),
-.reader-prose :deep(ol) {
-  margin: 0.4rem 0;
-  padding-left: 1.25rem;
-  list-style: revert;
-}
-.reader-prose :deep(li) {
-  margin: 0.2rem 0;
-}
-.reader-prose :deep(strong) {
-  color: rgb(226 232 240);
-  font-weight: 600;
-}
-.reader-prose :deep(code) {
-  border-radius: 0.25rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.05rem 0.3rem;
-  font-size: 0.85em;
-}
-.reader-prose :deep(pre) {
-  margin: 0.5rem 0;
-  overflow-x: auto;
-  border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.75rem;
-}
-.reader-prose :deep(blockquote) {
-  margin: 0.5rem 0;
-  border-left: 2px solid rgb(51 65 85);
-  padding-left: 0.75rem;
-  color: rgb(148 163 184);
-}
+/* The rendered-markdown presentation is the SHARED global `.reader-prose` sheet
+   (`assets/css/prose.css`), not a local copy: this reader shows the same agent-authored
+   markdown the step reader does, and a per-window duplicate is how the review surfaces
+   drift apart one property at a time. */
 </style>

package/app/components/clarity/ClarityReviewWindow.vue

@@ -658,41 +658,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 .pl-5\.5 {
   padding-left: 1.375rem;
 }
-/* Minimal CommonMark styling for the clarified bug-report reader (mirrors the
-   prose review window's reader-prose). */
-.reader-prose :deep(p) {
-  margin: 0.4rem 0;
-}
-.reader-prose :deep(ul),
-.reader-prose :deep(ol) {
-  margin: 0.4rem 0;
-  padding-left: 1.25rem;
-  list-style: revert;
-}
-.reader-prose :deep(li) {
-  margin: 0.2rem 0;
-}
-.reader-prose :deep(strong) {
-  color: rgb(226 232 240);
-  font-weight: 600;
-}
-.reader-prose :deep(code) {
-  border-radius: 0.25rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.05rem 0.3rem;
-  font-size: 0.85em;
-}
-.reader-prose :deep(pre) {
-  margin: 0.5rem 0;
-  overflow-x: auto;
-  border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
-  padding: 0.75rem;
-}
-.reader-prose :deep(blockquote) {
-  margin: 0.5rem 0;
-  border-left: 2px solid rgb(51 65 85);
-  padding-left: 0.75rem;
-  color: rgb(148 163 184);
-}
+/* The rendered-markdown presentation is the SHARED global `.reader-prose` sheet
+   (`assets/css/prose.css`), not a local copy: this reader shows the same agent-authored
+   markdown the step reader does, and a per-window duplicate is how the review surfaces
+   drift apart one property at a time. */
 </style>

package/app/components/initiative/InitiativePlanReview.vue

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+// The planner's human gate, reviewed on the PLAN — the tracker window's plan-approval rail.
+//
+// The rail this replaces could approve or send back, but it judged nothing: the plan was a wall
+// of structured sections above it, with no way to navigate a long one and no way to say WHICH
+// part needed changing. So it renders the plan as the document it is — the engine puts a markdown
+// rendering of the INGESTED plan on the gate's proposal (`renderInitiativePlanForReview`, authored
+// by the planner's step resolver, which is the only thing that knows what ingest committed) — and
+// gives it the same three tools the step reader gives the architect's prose: an outline to
+// navigate by, click-to-comment on any block, and overall feedback. Everything here is shared with
+// that reader rather than re-implemented: `useStepProse` for the outline/collapse/scroll-spy,
+// `useProseComments` for the anchoring, and the global `.reader-prose` sheet for the presentation,
+// so the surfaces cannot drift.
+//
+// Deliberately NOT offered here: "approve with corrections". The plan was ingested into the
+// `initiatives` entity before this gate was raised, so the document is a VIEW of committed state
+// — an edit typed over it would reach nothing, and the engine refuses it outright
+// (`outputIsRendered` → 422). Requesting changes is the route for a correction, which is why a
+// comment is worth anchoring: it quotes the planner's own text back to it on the re-plan.
+import { computed, ref, watch } from 'vue'
+import type { StepApproval } from '~/types/execution'
+import { useStepProse } from '~/composables/useStepProse'
+import { useProseComments } from '~/composables/useProseComments'
+
+const props = defineProps<{
+  /** The parked gate: its `proposal` is the rendered plan document under review. */
+  approval: StepApproval
+  /** The run the gate belongs to, for the approve / request-changes commands. */
+  instanceId: string
+  /** Whether the viewer may resolve runs at all (RBAC); false renders the actions disabled. */
+  canExecute: boolean
+  /**
+   * Whether the proposal IS the plan rendering (the step's `outputIsRendered`). Read rather
+   * than inferred from the proposal being non-empty: a run planned before the engine rendered
+   * plans parks on the planner's transcript summary, which is a perfectly non-empty string —
+   * so an emptiness check would show that one sentence under a table of contents as if it were
+   * the plan, which is the failure this whole surface exists to end.
+   */
+  outputIsRendered: boolean
+}>()
+
+const execution = useExecutionStore()
+const { t } = useI18n()
+
+/**
+ * The plan document under review — the gate's proposal, but ONLY once the step says that
+ * proposal is the plan rendering. Not named `document`: that shadows the global in a template
+ * expression. Anything else (a run planned before the engine rendered plans, which parks on the
+ * planner's transcript summary) reads as no document, and the `noDocument` notice says so rather
+ * than dressing a stray sentence up as the plan.
+ */
+const planDocument = computed(() => (props.outputIsRendered ? (props.approval.proposal ?? '') : ''))
+
+// The outline + collapse + scroll-spy, exactly as the step reader resolves them — minus its
+// lead anchor: the reader renders a details card ahead of the prose and this rail renders the
+// document alone, and the spy stops at the first anchor it cannot measure.
+const prose = useStepProse(() => planDocument.value, { leadAnchorId: null })
+const {
+  outline,
+  tocSections,
+  hasOutput,
+  collapsed,
+  activeId,
+  // The reader's own scroll container, bound straight through so the shared scroll-spy and the
+  // comment-highlight sync read the same element the template scrolls.
+  scrollEl,
+  sectionEls,
+  toggle,
+  goTo,
+  onScroll,
+} = prose
+
+/**
+ * Per-block comment drafts over the plan, anchored to its source lines. Commenting follows the
+ * same RBAC gate as the actions: a viewer who cannot resolve the run cannot send the comments
+ * anywhere, so offering the composer would only invite work the Send-back button then refuses.
+ */
+const {
+  comments: planComments,
+  wireComments,
+  draftTarget,
+  draftBody,
+  onProseClick,
+  addDraftComment,
+  cancelDraft,
+  removeComment,
+  reset: resetComments,
+} = useProseComments({
+  output: () => planDocument.value,
+  root: () => scrollEl.value,
+  enabled: () => props.canExecute,
+})
+
+const feedback = ref('')
+const submitting = ref(false)
+
+/** Changes can only be requested with something to act on — an empty send would re-plan blind. */
+const canRequestChanges = computed(() => !!feedback.value.trim() || planComments.value.length > 0)
+
+/** A fresh gate (a re-plan parked again) drops the drafts rather than carrying them over. */
+watch(
+  () => props.approval.id,
+  () => {
+    resetComments()
+    feedback.value = ''
+    prose.reset()
+  },
+)
+
+/**
+ * Accept the plan: the run advances to the committer, which persists it and arms the execution
+ * loop. The window stays open — the rail disappears with the approval (live) and the tracker is
+ * where the plan then executes.
+ */
+async function approve() {
+  if (submitting.value || !props.canExecute) return
+  submitting.value = true
+  try {
+    await execution.approveStep(props.instanceId, props.approval.id)
+  } finally {
+    submitting.value = false
+  }
+}
+
+/** Send the plan back: the planner re-plans from the feedback + the anchored comments. */
+async function requestChanges() {
+  if (submitting.value || !canRequestChanges.value || !props.canExecute) return
+  submitting.value = true
+  try {
+    const ok = await execution.requestStepChanges(props.instanceId, props.approval.id, {
+      feedback: feedback.value.trim() || undefined,
+      comments: wireComments.value,
+    })
+    if (ok) {
+      feedback.value = ''
+      resetComments()
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+
+const disabledTitle = computed(() => (props.canExecute ? undefined : t('access.noRunExecute')))
+</script>
+
+<template>
+  <section
+    class="mb-4 rounded-lg border border-amber-500/40 bg-amber-500/10"
+    data-testid="initiative-plan-review"
+  >
+    <header class="flex items-start gap-2.5 px-3.5 pt-3.5">
+      <UIcon name="i-lucide-clipboard-check" class="mt-0.5 h-4 w-4 shrink-0 text-amber-300" />
+      <div class="min-w-0 flex-1">
+        <h3 class="text-[13px] font-semibold text-amber-200">
+          {{ t('initiative.planReview.title') }}
+        </h3>
+        <p class="mt-0.5 text-[12px] leading-relaxed text-amber-100/80">
+          {{ t('initiative.planReview.body') }}
+        </p>
+      </div>
+    </header>
+
+    <!-- The plan document, shown only when the gate's proposal actually IS the plan rendering
+         (`outputIsRendered`). A run planned before the engine rendered plans parks on the
+         planner's transcript summary instead, so it takes the notice below — the structured
+         sections further down are still the plan in that case. -->
+    <div v-if="hasOutput" class="mt-3 flex min-h-0 gap-3 px-3.5">
+      <!-- Outline: the navigation the rail had none of. Inline rather than a full sidebar — the
+           tracker window already spends its end-side column on run metadata. -->
+      <nav
+        v-if="outline.hasToc"
+        data-testid="initiative-plan-toc"
+        class="hidden max-h-80 w-48 shrink-0 space-y-0.5 overflow-y-auto border-e border-amber-500/20 pe-2 md:block"
+      >
+        <button
+          v-for="s in tocSections"
+          :key="s.id"
+          class="block w-full truncate rounded px-1.5 py-1 text-start text-[12px] transition"
+          :class="
+            activeId === s.id
+              ? 'bg-amber-500/20 font-medium text-amber-100'
+              : 'text-amber-200/60 hover:bg-amber-500/10 hover:text-amber-100'
+          "
+          :style="{ paddingLeft: `${(s.depth - outline.minDepth) * 0.7 + 0.4}rem` }"
+          :title="s.title"
+          @click="goTo(s.id)"
+        >
+          {{ s.title }}
+        </button>
+      </nav>
+
+      <div
+        ref="scrollEl"
+        data-testid="initiative-plan-document"
+        class="max-h-80 min-w-0 flex-1 overflow-y-auto rounded border border-amber-500/20 bg-slate-950/40 p-3"
+        @scroll="onScroll"
+      >
+        <section
+          v-for="s in outline.sections"
+          :id="s.id"
+          :key="s.id"
+          :ref="(el) => (sectionEls[s.id] = el as HTMLElement | null)"
+          class="scroll-mt-2"
+        >
+          <button
+            v-if="s.depth > 0"
+            class="group flex w-full items-center gap-1.5 rounded py-0.5 text-start transition hover:text-white"
+            @click="toggle(s.id)"
+          >
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform"
+              :class="collapsed[s.id] ? '' : 'rotate-90'"
+            />
+            <span
+              class="font-semibold text-slate-100"
+              :class="s.depth <= 1 ? 'text-sm' : 'text-[13px]'"
+              v-html="s.titleHtml"
+            />
+          </button>
+          <!-- `review-mode` carries the click-to-comment affordance, so it tracks the same RBAC
+               gate the composer does — a viewer gets the document, not hover targets that lead
+               nowhere. -->
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div
+            v-show="!collapsed[s.id]"
+            class="reader-prose mt-0.5 text-[12px] leading-relaxed text-slate-300"
+            :class="[s.depth > 0 ? 'ps-5' : '', canExecute ? 'review-mode' : '']"
+            @click="onProseClick"
+            v-html="s.bodyHtml"
+          />
+        </section>
+      </div>
+    </div>
+    <p v-else class="mt-2 px-3.5 text-[12px] text-amber-100/70">
+      {{ t('initiative.planReview.noDocument') }}
+    </p>
+
+    <!-- Comment composer for the block just clicked, then the anchored comments so far. -->
+    <div v-if="draftTarget" class="mt-3 px-3.5" data-testid="initiative-plan-composer">
+      <div class="rounded-lg border border-indigo-500/40 bg-indigo-500/5 p-2.5">
+        <div class="mb-1 text-[10px] uppercase tracking-wide text-indigo-300">
+          {{ t('panels.stepDetail.commentingOn') }}
+        </div>
+        <pre
+          class="mb-2 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-slate-950/60 p-1.5 text-[11px] text-slate-300"
+          >{{ draftTarget.quotedSource }}</pre>
+        <UTextarea
+          v-model="draftBody"
+          data-testid="initiative-plan-comment-body"
+          :rows="2"
+          autoresize
+          size="sm"
+          class="w-full"
+          :placeholder="t('panels.stepDetail.commentPlaceholder')"
+        />
+        <div class="mt-2 flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" size="xs" @click="cancelDraft">
+            {{ t('common.cancel') }}
+          </UButton>
+          <UButton
+            color="primary"
+            size="xs"
+            data-testid="initiative-plan-comment-add"
+            :disabled="!draftBody.trim()"
+            @click="addDraftComment"
+          >
+            {{ t('panels.stepDetail.addComment') }}
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <ul v-if="planComments.length" class="mt-3 space-y-2 px-3.5">
+      <li
+        v-for="(c, idx) in planComments"
+        :key="idx"
+        data-testid="initiative-plan-comment"
+        class="rounded-lg border border-slate-700 bg-slate-900/50 p-2.5"
+      >
+        <div class="mb-1 flex items-start justify-between gap-2">
+          <div class="text-[10px] uppercase tracking-wide text-slate-500">
+            {{ t('panels.stepDetail.commentN', { number: idx + 1 }) }}
+          </div>
+          <button
+            class="text-slate-500 transition hover:text-rose-400"
+            :title="t('panels.stepDetail.removeComment')"
+            @click="removeComment(idx)"
+          >
+            <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
+          </button>
+        </div>
+        <pre
+          class="mb-1 max-h-16 overflow-auto whitespace-pre-wrap rounded bg-slate-950/50 p-1.5 text-[10px] text-slate-400"
+          >{{ c.quotedSource }}</pre>
+        <p class="text-[12px] text-slate-200">{{ c.body }}</p>
+      </li>
+    </ul>
+
+    <!-- Overall feedback + the two actions. Feedback stays visible rather than hiding behind a
+         "request changes" step: with per-block comments in play the human is already composing a
+         review, and a hidden field reads as "there is nothing more to say". -->
+    <div class="mt-3 px-3.5 pb-3.5">
+      <UTextarea
+        v-model="feedback"
+        data-testid="initiative-plan-feedback"
+        :rows="2"
+        autoresize
+        size="sm"
+        class="w-full"
+        :placeholder="t('initiative.planReview.feedbackPlaceholder')"
+      />
+      <div class="mt-2 flex flex-wrap items-center gap-2">
+        <UButton
+          color="primary"
+          size="xs"
+          icon="i-lucide-check"
+          data-testid="initiative-plan-approve"
+          :loading="submitting"
+          :disabled="!canExecute"
+          :title="disabledTitle"
+          @click="approve"
+        >
+          {{ t('initiative.planReview.approve') }}
+        </UButton>
+        <UButton
+          color="warning"
+          variant="soft"
+          size="xs"
+          icon="i-lucide-rotate-ccw"
+          data-testid="initiative-plan-send-back"
+          :loading="submitting"
+          :disabled="!canRequestChanges || !canExecute"
+          :title="
+            canExecute && !canRequestChanges
+              ? t('initiative.planReview.needsFeedback')
+              : disabledTitle
+          "
+          @click="requestChanges"
+        >
+          {{ t('initiative.planReview.sendBack') }}
+        </UButton>
+        <!-- Only worth saying where clicking a block does something (a document + the RBAC to
+             act on it). -->
+        <p v-if="hasOutput && canExecute" class="text-[10px] text-amber-100/60">
+          {{ t('initiative.planReview.commentHint') }}
+        </p>
+      </div>
+    </div>
+  </section>
+</template>