@cat-factory/app 0.184.0 → 0.186.0

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -12,7 +12,7 @@
 // step's park routes (its archetype declares this result view), so the approve /
 // request-changes rail has to live here or the gate has no resolving surface at all —
 // which is exactly how an approved-only-over-REST plan gate shipped.
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import type { InitiativeFollowUp, InitiativeItem } from '~/types/domain'
 import { useInitiativePlanning } from '~/composables/useInitiativePlanning'
 import {
@@ -26,10 +26,10 @@ import {
 } from '~/utils/initiative'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import InitiativePlanReview from '~/components/initiative/InitiativePlanReview.vue'
 
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
-const execution = useExecutionStore()
 const access = useWorkspaceAccess()
 const { t } = useI18n()
 const toast = useToast()
@@ -106,52 +106,6 @@ async function checkpointControl(action: 'resume' | 'cancel') {
 // human parked on the gate actually uses. So the rail appears on every route into the window.
 const { planApproval } = useInitiativePlanning(() => blockId.value ?? '')
 
-/** Draft feedback for "request changes" (the planner re-runs with it), and the rail's in-flight
- *  state. Reset when a different initiative opens so a draft can't follow the window. */
-const planFeedback = ref('')
-const requestingChanges = ref(false)
-const resolvingPlan = ref(false)
-watch(blockId, () => {
-  planFeedback.value = ''
-  requestingChanges.value = false
-})
-
-const canRequestChanges = computed(() => planFeedback.value.trim().length > 0)
-
-/**
- * Accept the drafted plan: the run advances to the committer, which persists the initiative and
- * arms the execution loop. The window deliberately stays OPEN — the rail disappears with the
- * approval (live), and the tracker is where the plan then starts executing.
- */
-async function approvePlan() {
-  const parked = planApproval.value
-  if (!parked || resolvingPlan.value) return
-  resolvingPlan.value = true
-  try {
-    await execution.approveStep(parked.instanceId, parked.approval.id)
-  } finally {
-    resolvingPlan.value = false
-  }
-}
-
-/** Send the plan back to the planner with what to change; it re-plans and parks again. */
-async function submitPlanChanges() {
-  const parked = planApproval.value
-  if (!parked || resolvingPlan.value || !canRequestChanges.value) return
-  resolvingPlan.value = true
-  try {
-    const ok = await execution.requestStepChanges(parked.instanceId, parked.approval.id, {
-      feedback: planFeedback.value.trim(),
-    })
-    if (ok) {
-      planFeedback.value = ''
-      requestingChanges.value = false
-    }
-  } finally {
-    resolvingPlan.value = false
-  }
-}
-
 const policyRules = computed(() => initiative.value?.policy?.rules ?? [])
 function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?: number }): string {
   const axes = [
@@ -294,85 +248,17 @@ async function savePolicy() {
         </div>
 
         <template v-else>
-          <!-- The planner's human gate: the plan below is drafted but NOT yet committed. This
-               is the only surface that can resolve it (the generic approval panel is never
-               reached — the planner's archetype routes its park to this window), so approve /
-               request changes live here, beside the plan they judge. -->
-          <section
+          <!-- The planner's human gate. This window is where the park ROUTES (the planner's
+               archetype declares this result view), so it is the only surface that can resolve
+               it — and the plan it judges is rendered as a navigable document with per-block
+               commenting, the same tools the step reader gives the architect's prose. -->
+          <InitiativePlanReview
             v-if="planApproval"
-            class="mb-4 rounded-lg border border-amber-500/40 bg-amber-500/10 p-3.5"
-            data-testid="initiative-plan-review"
-          >
-            <div class="flex items-start gap-2.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 v-if="!requestingChanges" class="mt-2.5 flex flex-wrap gap-2">
-                  <button
-                    class="rounded bg-indigo-600 px-2.5 py-1 text-[11px] font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
-                    :disabled="resolvingPlan || !access.canExecuteRuns.value"
-                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                    data-testid="initiative-plan-approve"
-                    @click="approvePlan"
-                  >
-                    {{ t('initiative.planReview.approve') }}
-                  </button>
-                  <button
-                    class="rounded border border-amber-400/50 px-2.5 py-1 text-[11px] font-medium text-amber-200 hover:bg-amber-500/10 disabled:opacity-50"
-                    :disabled="resolvingPlan || !access.canExecuteRuns.value"
-                    :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                    data-testid="initiative-plan-request-changes"
-                    @click="requestingChanges = true"
-                  >
-                    {{ t('initiative.planReview.requestChanges') }}
-                  </button>
-                </div>
-                <!-- Request-changes composer: the feedback is what the planner re-plans FROM,
-                     so it is required — an empty send would re-run the planner with nothing
-                     to act on and park again on the same plan. -->
-                <div v-else class="mt-2.5">
-                  <UTextarea
-                    v-model="planFeedback"
-                    :rows="3"
-                    autoresize
-                    size="sm"
-                    class="w-full"
-                    data-testid="initiative-plan-feedback"
-                    :placeholder="t('initiative.planReview.feedbackPlaceholder')"
-                  />
-                  <div class="mt-2 flex flex-wrap gap-2">
-                    <button
-                      class="rounded bg-amber-500 px-2.5 py-1 text-[11px] font-medium text-slate-950 hover:bg-amber-400 disabled:opacity-50"
-                      :disabled="
-                        resolvingPlan || !canRequestChanges || !access.canExecuteRuns.value
-                      "
-                      :title="access.canExecuteRuns.value ? undefined : t('access.noRunExecute')"
-                      data-testid="initiative-plan-send-back"
-                      @click="submitPlanChanges"
-                    >
-                      {{ t('initiative.planReview.sendBack') }}
-                    </button>
-                    <button
-                      class="rounded border border-slate-600 px-2.5 py-1 text-[11px] font-medium text-slate-300 hover:bg-slate-800 disabled:opacity-50"
-                      :disabled="resolvingPlan"
-                      data-testid="initiative-plan-cancel-changes"
-                      @click="requestingChanges = false"
-                    >
-                      {{ t('common.cancel') }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
+            :approval="planApproval.approval"
+            :instance-id="planApproval.instanceId"
+            :can-execute="access.canExecuteRuns.value"
+            :output-is-rendered="planApproval.outputIsRendered"
+          />
 
           <!-- Paused at a phase checkpoint (D2): a completed checkpoint phase is awaiting
                    review before the next phase spawns. Read the phase's artifacts/PRs below,

package/app/components/panels/AgentStepDetail.vue

@@ -148,6 +148,14 @@ const {
 
 const approvalPending = computed(() => step.value?.approval?.status === 'pending')
 const approvalId = computed(() => step.value?.approval?.id ?? null)
+// Whether "approve with corrections" applies. A step whose output is a deterministic
+// RENDERING of an artifact it already produced (the initiative plan, the spec doc, the
+// blueprint tree — `step.outputIsRendered`, set by the engine's `reviewableArtifactOutput`
+// seam) has no editable proposal: the artifact was ingested into domain state before the gate
+// was raised, so an edit typed over the rendering would never reach it. The backend refuses
+// such an edit; hiding the affordance is what stops a reviewer typing corrections into a
+// dead end. Their route is "request changes", which re-runs the producer with the correction.
+const proposalEditable = computed(() => step.value?.outputIsRendered !== true)
 // A companion step parked at its automatic-rework cap: instead of the generic
 // approve/request-changes/reject rail, it shows the shared iteration-cap prompt
 // (one more round / proceed / stop & reset), resolved through its own endpoint.
@@ -261,6 +269,7 @@ async function copyOutput() {
         <!-- ToC sidebar (only meaningful when there are prose headings) -->
         <aside
           v-if="outline.hasToc"
+          data-testid="step-detail-toc"
           class="hidden w-72 shrink-0 flex-col border-e border-slate-800 bg-slate-900/60 md:flex"
         >
           <div class="border-b border-slate-800 px-4 py-3">
@@ -646,6 +655,7 @@ async function copyOutput() {
               <!-- composer for the block the human just clicked -->
               <div
                 v-if="draftTarget"
+                data-testid="step-review-composer"
                 class="rounded-lg border border-indigo-500/40 bg-indigo-500/5 p-3"
               >
                 <div class="mb-1 text-[10px] uppercase tracking-wide text-indigo-300">
@@ -656,6 +666,7 @@ async function copyOutput() {
                   >{{ draftTarget.quotedSource }}</pre>
                 <UTextarea
                   v-model="draftBody"
+                  data-testid="step-review-comment-body"
                   :rows="3"
                   autoresize
                   size="sm"
@@ -669,6 +680,7 @@ async function copyOutput() {
                   <UButton
                     color="primary"
                     size="xs"
+                    data-testid="step-review-comment-add"
                     :disabled="!draftBody.trim()"
                     @click="addDraftComment"
                   >
@@ -681,6 +693,7 @@ async function copyOutput() {
               <div
                 v-for="(c, idx) in reviewComments"
                 :key="idx"
+                data-testid="step-review-comment"
                 class="rounded-lg border border-slate-800 bg-slate-900/50 p-3"
               >
                 <div class="mb-1 flex items-start justify-between gap-2">
@@ -709,6 +722,7 @@ async function copyOutput() {
                 </label>
                 <UTextarea
                   v-model="feedback"
+                  data-testid="step-review-feedback"
                   :rows="3"
                   autoresize
                   size="sm"
@@ -763,6 +777,7 @@ async function copyOutput() {
               {{ t('panels.stepDetail.approveAndProceed') }}
             </UButton>
             <UButton
+              v-if="proposalEditable"
               color="primary"
               variant="soft"
               size="sm"
@@ -773,6 +788,9 @@ async function copyOutput() {
             >
               {{ t('panels.stepDetail.approveWithCorrections') }}
             </UButton>
+            <p v-else class="text-[10px] text-slate-500" data-testid="step-rendered-output-note">
+              {{ t('panels.stepDetail.renderedOutputNote') }}
+            </p>
 
             <!-- destructive: a two-step inline confirm instead of a native dialog -->
             <div
@@ -812,6 +830,7 @@ async function copyOutput() {
                 size="sm"
                 icon="i-lucide-rotate-ccw"
                 class="flex-1"
+                data-testid="step-request-changes"
                 :disabled="!canRequestChanges"
                 :loading="submitting"
                 @click="requestChanges"
@@ -849,126 +868,4 @@ async function copyOutput() {
 .reader-fade-leave-to {
   opacity: 0;
 }
-
-/* Approval mode: each source-mapped block becomes a comment target — a hover
-   highlight + a "+" gutter affordance, GitHub-review style. */
-.reader-prose.review-mode :deep([data-src-start]) {
-  position: relative;
-  cursor: pointer;
-  border-radius: 0.375rem;
-  transition: background 0.12s ease;
-}
-.reader-prose.review-mode :deep([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 :deep([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 :deep([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 :deep(.cf-commented) {
-  background: rgb(234 179 8 / 0.1);
-  box-shadow: inset 2px 0 0 rgb(234 179 8 / 0.6);
-}
-.reader-prose :deep(.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 :deep(p) {
-  margin: 0.5rem 0;
-}
-.reader-prose :deep(ul),
-.reader-prose :deep(ol) {
-  margin: 0.5rem 0;
-  padding-left: 1.25rem;
-}
-.reader-prose :deep(ul) {
-  list-style: disc;
-}
-.reader-prose :deep(ol) {
-  list-style: decimal;
-}
-.reader-prose :deep(li) {
-  margin: 0.2rem 0;
-}
-.reader-prose :deep(strong) {
-  font-weight: 600;
-  color: rgb(226 232 240);
-}
-.reader-prose :deep(em) {
-  font-style: italic;
-}
-.reader-prose :deep(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 :deep(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 :deep(pre code) {
-  background: transparent;
-  padding: 0;
-  color: rgb(203 213 225);
-}
-.reader-prose :deep(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 :deep(table) {
-  margin: 0.6rem 0;
-  border-collapse: collapse;
-  font-size: 0.95em;
-}
-.reader-prose :deep(th),
-.reader-prose :deep(td) {
-  border: 1px solid rgb(51 65 85);
-  padding: 0.3rem 0.6rem;
-}
-.reader-prose :deep(th) {
-  background: rgb(30 41 59 / 0.6);
-  font-weight: 600;
-}
-.reader-prose :deep(hr) {
-  margin: 1rem 0;
-  border: none;
-  border-top: 1px solid rgb(51 65 85);
-}
-.reader-prose :deep(h1),
-.reader-prose :deep(h2),
-.reader-prose :deep(h3),
-.reader-prose :deep(h4) {
-  margin: 0.6rem 0 0.3rem;
-  font-weight: 600;
-  color: rgb(226 232 240);
-}
 </style>

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

@@ -27,9 +27,15 @@ const busy = ref(false)
 const detecting = ref(false)
 const rows = ref<ValidationCheck[]>([])
 const maxAttempts = ref(VALIDATION_DEFAULT_MAX_ATTEMPTS)
+// DEPENDENCY PREPOPULATION: the install run BEFORE the agent's first turn, so it reads a tree
+// whose dependencies are present. Edited beside the checks because it comes from the same
+// per-service row, but it is independent of them — a service may declare only this.
+const dependencyInstall = ref('')
 
 const saved = computed(() => store.forBlock(props.block.id))
-const configured = computed(() => saved.value.checks.length > 0)
+const configured = computed(
+  () => saved.value.checks.length > 0 || Boolean(saved.value.dependencyInstall),
+)
 const canAdd = computed(() => rows.value.length < VALIDATION_MAX_CHECKS)
 /** A row is only submittable once it has a command; the label falls back to the command. */
 const submittable = computed(() =>
@@ -46,6 +52,7 @@ watch(
   (config) => {
     rows.value = config.checks.map((c) => ({ ...c }))
     maxAttempts.value = config.maxAttempts
+    dependencyInstall.value = config.dependencyInstall ?? ''
   },
   { immediate: true },
 )
@@ -114,7 +121,13 @@ async function detect() {
     }
     const merged = mergeDetectedChecks(rows.value, result.checks, VALIDATION_MAX_CHECKS)
     rows.value = merged.rows
-    if (merged.added === 0) {
+    // Fill the install only when the operator has not written one. Detection is assistive, and
+    // overwriting a hand-tuned install (a workspace filter, an offline flag) with the generic
+    // guess is the same failure `mergeDetectedChecks` refuses to make on the check rows.
+    const suggestedInstall = result.dependencyInstall?.trim() ?? ''
+    const filledInstall = suggestedInstall !== '' && dependencyInstall.value.trim() === ''
+    if (filledInstall) dependencyInstall.value = suggestedInstall
+    if (merged.added === 0 && !filledInstall) {
       toast.add({
         title: t('inspector.validationChecks.detect.nothingNew'),
         description:
@@ -128,7 +141,13 @@ async function detect() {
     }
     const names = result.ecosystems.map(ecosystemLabel).join(', ')
     toast.add({
-      title: t('inspector.validationChecks.detect.added', { count: merged.added }, merged.added),
+      // An install-only detection fills nothing but the install field, and reporting it as
+      // "0 checks added" would read as a failed press on the one repo shape prepopulation is
+      // most for (dependencies to install, nothing declared to verify).
+      title:
+        merged.added === 0
+          ? t('inspector.validationChecks.detect.installOnly')
+          : t('inspector.validationChecks.detect.added', { count: merged.added }, merged.added),
       // Name what was recognised AND what was left out: a cap that silently swallowed a
       // suggestion reads as "that is everything your repo has".
       description: [
@@ -152,7 +171,12 @@ async function detect() {
 async function save() {
   busy.value = true
   try {
-    await store.save(props.block.id, submittable.value, maxAttempts.value)
+    await store.save(
+      props.block.id,
+      submittable.value,
+      maxAttempts.value,
+      dependencyInstall.value.trim() || undefined,
+    )
     toast.add({
       title: t('inspector.validationChecks.savedToast'),
       icon: 'i-lucide-check',
@@ -172,6 +196,7 @@ async function clear() {
   try {
     await store.remove(props.block.id)
     rows.value = []
+    dependencyInstall.value = ''
     toastDone('clear', noun)
   } catch (e) {
     notifyError(t('inspector.validationChecks.clearFailed'), e)
@@ -204,6 +229,19 @@ async function clear() {
     </template>
 
     <div class="space-y-2">
+      <UFormField
+        :label="t('inspector.validationChecks.dependencyInstall')"
+        :hint="t('inspector.validationChecks.dependencyInstallHint')"
+      >
+        <UInput
+          v-model="dependencyInstall"
+          placeholder="pnpm install --frozen-lockfile"
+          size="sm"
+          class="w-full"
+          data-testid="validation-dependency-install"
+        />
+      </UFormField>
+
       <p class="text-[11px] text-slate-500">
         {{ t('inspector.validationChecks.hint') }}
       </p>

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

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// The pull request a `review` task is reviewing — its SUBJECT, not its output. Distinct from the
+// Execution panel's "Pull request", which links the PR a run PRODUCED: a review task produces no
+// PR at all, so without this the one thing identifying the task was buried in the folded
+// description text with nothing to click.
+//
+// Reads the task's own fields, so it is there from creation — before any run — and stays there
+// after one. The backend confirms the PR against the provider at create time and records that
+// provider's own link (`prUrl`), which is what makes a plain read enough here; a task created
+// while no VCS was connected keeps only the number, and then the reference reads as text rather
+// than pretending to be a link.
+import { computed } from 'vue'
+import type { Block } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+
+const props = defineProps<{ block: Block }>()
+const { t } = useI18n()
+
+const isReview = computed(() => props.block.taskType === 'review')
+const fields = computed(() => props.block.taskTypeFields ?? null)
+const url = computed(() => fields.value?.prUrl?.trim() || '')
+const focus = computed(() => fields.value?.reviewFocus?.trim() || '')
+
+/** `#123` when the number is known, else the raw link — never an empty affordance. */
+const label = computed(() => {
+  const number = fields.value?.prNumber
+  return number ? t('inspector.reviewTarget.prNumber', { number }) : url.value
+})
+
+/** Nothing to show when the task carries no reference at all (nothing to link or name). */
+const hasTarget = computed(() => Boolean(label.value))
+</script>
+
+<template>
+  <InspectorSection
+    v-if="isReview && hasTarget"
+    :title="t('inspector.reviewTarget.title')"
+    :hint="t('inspector.reviewTarget.hint')"
+    icon="i-lucide-git-pull-request-arrow"
+    default-open
+  >
+    <UButton
+      v-if="url"
+      :to="url"
+      target="_blank"
+      rel="noopener"
+      external
+      color="neutral"
+      variant="soft"
+      size="sm"
+      icon="i-lucide-git-pull-request"
+      trailing-icon="i-lucide-external-link"
+      block
+      data-testid="inspector-review-target-link"
+    >
+      <span class="w-full truncate text-start" :title="url">{{ label }}</span>
+    </UButton>
+    <p
+      v-else
+      class="rounded-lg border border-slate-800 bg-slate-900/40 p-2.5 text-xs text-slate-300"
+      data-testid="inspector-review-target-link"
+    >
+      {{ label }}
+    </p>
+    <p v-if="focus" class="text-xs leading-relaxed text-slate-500">
+      {{ t('inspector.reviewTarget.focus', { focus }) }}
+    </p>
+  </InspectorSection>
+</template>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -1228,41 +1228,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
 .pl-5\.5 {
   padding-left: 1.375rem;
 }
-/* Minimal CommonMark styling for the incorporated requirements 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>