@cat-factory/app 0.185.0 → 0.187.0

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/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>

package/app/composables/useProseComments.ts

@@ -0,0 +1,126 @@
+import { computed, nextTick, ref, watch } from 'vue'
+import { sliceSource } from '~/utils/agentOutput'
+
+/** A draft per-block review comment, anchored to a source line range of the reviewed markdown. */
+export interface ProseComment {
+  srcStart: number
+  srcEnd: number
+  quotedSource: string
+  body: string
+}
+
+/**
+ * GitHub-style per-block commenting over a rendered markdown document — the anchoring half of a
+ * prose review, with no opinion about WHAT is being reviewed or how the review is submitted.
+ *
+ * Extracted from `useStepApproval` (which now builds on it) so a second surface can offer the
+ * same affordance: the initiative tracker's plan-approval rail reviews the planner's drafted plan,
+ * which the engine renders as markdown onto the gate's proposal. Both therefore anchor comments
+ * identically — a comment quotes the exact source lines of the block it targets, so a "request
+ * changes" re-run can hand the agent back its OWN text rather than a re-rendered approximation.
+ *
+ * The anchors are the `data-src-start`/`data-src-end` attributes `parseOutputOutline` stamps on
+ * every top-level block, so this works over any document that reader renders.
+ *
+ * @param output the raw markdown being reviewed (comments quote out of it by line range)
+ * @param root the element containing the rendered blocks, for the highlight sync
+ * @param enabled whether clicking a block should start a comment (review mode is on)
+ */
+export function useProseComments(opts: {
+  output: () => string
+  root: () => HTMLElement | null
+  enabled: () => boolean
+}) {
+  const comments = ref<ProseComment[]>([])
+  const draftTarget = ref<{ srcStart: number; srcEnd: number; quotedSource: string } | null>(null)
+  const draftBody = ref('')
+
+  const blockKey = (c: { srcStart: number; srcEnd: number }) => `${c.srcStart}:${c.srcEnd}`
+
+  /** Toggle the highlight classes on commented / selected blocks within the rendered document. */
+  function syncHighlights() {
+    const root = opts.root()
+    if (!root) return
+    const commented = new Set(comments.value.map(blockKey))
+    const selected = draftTarget.value ? blockKey(draftTarget.value) : null
+    for (const el of Array.from(root.querySelectorAll('[data-src-start]'))) {
+      const key = `${el.getAttribute('data-src-start')}:${el.getAttribute('data-src-end')}`
+      el.classList.toggle('cf-commented', commented.has(key))
+      el.classList.toggle('cf-selected', key === selected)
+    }
+  }
+
+  /** Click a rendered block to start commenting on it (links keep working). */
+  function onProseClick(e: MouseEvent) {
+    if (!opts.enabled()) return
+    const target = e.target as HTMLElement
+    if (target.closest('a')) return
+    const blockEl = target.closest('[data-src-start]') as HTMLElement | null
+    if (!blockEl) return
+    const srcStart = Number(blockEl.getAttribute('data-src-start'))
+    const srcEnd = Number(blockEl.getAttribute('data-src-end'))
+    if (Number.isNaN(srcStart) || Number.isNaN(srcEnd)) return
+    draftTarget.value = {
+      srcStart,
+      srcEnd,
+      quotedSource: sliceSource(opts.output(), srcStart, srcEnd),
+    }
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+
+  function addDraftComment() {
+    if (!draftTarget.value || !draftBody.value.trim()) return
+    comments.value.push({ ...draftTarget.value, body: draftBody.value.trim() })
+    draftTarget.value = null
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+  function cancelDraft() {
+    draftTarget.value = null
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+  function removeComment(idx: number) {
+    comments.value.splice(idx, 1)
+    void nextTick(syncHighlights)
+  }
+
+  /** Drop every draft — a different document (or a different subject) is being reviewed. */
+  function reset() {
+    comments.value = []
+    draftTarget.value = null
+    draftBody.value = ''
+    void nextTick(syncHighlights)
+  }
+
+  /** The wire shape `requestStepChanges` takes, or undefined when nothing was anchored. */
+  const wireComments = computed(() =>
+    comments.value.length
+      ? comments.value.map((c) => ({
+          quotedSource: c.quotedSource,
+          srcStart: c.srcStart,
+          srcEnd: c.srcEnd,
+          body: c.body,
+        }))
+      : undefined,
+  )
+
+  // Keep the in-document highlights in sync as the document renders or the drafts change.
+  watch([opts.enabled, opts.output, comments, draftTarget], () => void nextTick(syncHighlights), {
+    deep: true,
+  })
+
+  return {
+    comments,
+    wireComments,
+    draftTarget,
+    draftBody,
+    syncHighlights,
+    onProseClick,
+    addDraftComment,
+    cancelDraft,
+    removeComment,
+    reset,
+  }
+}

package/app/composables/useStepApproval.ts

@@ -1,23 +1,17 @@
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import type { PipelineStep } from '~/types/execution'
-import { sliceSource } from '~/utils/agentOutput'
-
-/** A draft per-block review comment, anchored to a source range of the output. */
-interface DraftComment {
-  srcStart: number
-  srcEnd: number
-  quotedSource: string
-  body: string
-}
+import { useProseComments } from '~/composables/useProseComments'
 
 /**
  * The GitHub-style approval/review state machine for a pending gate step. When the
  * step's gate is pending the prose reader doubles as a review surface: the human can
  * comment on individual source-mapped blocks, leave overall feedback, edit the
  * conclusions in place, then Approve / Request changes / Reject. This composable owns
- * all of that draft state + the in-document highlight syncing; the parent supplies the
- * live step, the scroll container (for highlight lookups), the run/approval ids, and a
- * `close` callback the actions invoke once they resolve.
+ * the approval-API half plus the edit/reject sub-states; the per-block comment drafts and
+ * their in-document highlighting live in {@link useProseComments}, which the initiative
+ * tracker's plan-approval rail shares. The parent supplies the live step, the scroll
+ * container (for highlight lookups), the run/approval ids, and a `close` callback the
+ * actions invoke once they resolve.
  */
 export function useStepApproval(opts: {
   step: () => PipelineStep | null
@@ -30,11 +24,8 @@ export function useStepApproval(opts: {
 }) {
   const execution = useExecutionStore()
 
-  const reviewComments = ref<DraftComment[]>([])
   const feedback = ref('')
   const submitting = ref(false)
-  const draftTarget = ref<{ srcStart: number; srcEnd: number; quotedSource: string } | null>(null)
-  const draftBody = ref('')
 
   // "Approve with corrections" mode: a deliberate state distinct from the read-only
   // review — the human edits the conclusions directly and those edits flow forward as
@@ -45,56 +36,25 @@ export function useStepApproval(opts: {
   // Reject stops the whole run, so it's a two-step inline confirm (no native dialog).
   const rejectArmed = ref(false)
 
-  const blockKey = (c: { srcStart: number; srcEnd: number }) => `${c.srcStart}:${c.srcEnd}`
-
-  /** Toggle the highlight classes on commented / selected blocks within the reader. */
-  function syncHighlights() {
-    const root = opts.scrollEl()
-    if (!root) return
-    const commented = new Set(reviewComments.value.map(blockKey))
-    const selected = draftTarget.value ? blockKey(draftTarget.value) : null
-    for (const el of Array.from(root.querySelectorAll('[data-src-start]'))) {
-      const key = `${el.getAttribute('data-src-start')}:${el.getAttribute('data-src-end')}`
-      el.classList.toggle('cf-commented', commented.has(key))
-      el.classList.toggle('cf-selected', key === selected)
-    }
-  }
-
-  /** Click a rendered block to start commenting on it (links keep working). */
-  function onProseClick(e: MouseEvent) {
-    if (!opts.approvalPending() || opts.companionExceeded() || editing.value) return
-    const target = e.target as HTMLElement
-    if (target.closest('a')) return
-    const blockEl = target.closest('[data-src-start]') as HTMLElement | null
-    if (!blockEl) return
-    const srcStart = Number(blockEl.getAttribute('data-src-start'))
-    const srcEnd = Number(blockEl.getAttribute('data-src-end'))
-    if (Number.isNaN(srcStart) || Number.isNaN(srcEnd)) return
-    draftTarget.value = {
-      srcStart,
-      srcEnd,
-      quotedSource: sliceSource(opts.step()?.output ?? '', srcStart, srcEnd),
-    }
-    draftBody.value = ''
-    void nextTick(syncHighlights)
-  }
-
-  function addDraftComment() {
-    if (!draftTarget.value || !draftBody.value.trim()) return
-    reviewComments.value.push({ ...draftTarget.value, body: draftBody.value.trim() })
-    draftTarget.value = null
-    draftBody.value = ''
-    void nextTick(syncHighlights)
-  }
-  function cancelDraft() {
-    draftTarget.value = null
-    draftBody.value = ''
-    void nextTick(syncHighlights)
-  }
-  function removeComment(idx: number) {
-    reviewComments.value.splice(idx, 1)
-    void nextTick(syncHighlights)
-  }
+  // The per-block comment drafts + their in-document highlights. Commenting is off while the
+  // human is in edit mode: the two paths are mutually exclusive, and the editor replaces the
+  // rendered document with a textarea, so there are no blocks to anchor to.
+  const prose = useProseComments({
+    output: () => opts.step()?.output ?? '',
+    root: () => opts.scrollEl(),
+    enabled: () => opts.approvalPending() && !opts.companionExceeded() && !editing.value,
+  })
+  const {
+    comments: reviewComments,
+    wireComments,
+    draftTarget,
+    draftBody,
+    syncHighlights,
+    onProseClick,
+    addDraftComment,
+    cancelDraft,
+    removeComment,
+  } = prose
 
   const canRequestChanges = computed(
     () => !!feedback.value.trim() || reviewComments.value.length > 0,
@@ -119,7 +79,7 @@ export function useStepApproval(opts: {
     editing.value = true
     // Editing and the review/reject path are mutually exclusive — clear the other.
     rejectArmed.value = false
-    draftTarget.value = null
+    prose.cancelDraft()
     void nextTick(syncHighlights)
   }
   function cancelEditing() {
@@ -143,14 +103,7 @@ export function useStepApproval(opts: {
     try {
       const ok = await execution.requestStepChanges(opts.instanceId()!, id, {
         feedback: feedback.value.trim() || undefined,
-        comments: reviewComments.value.length
-          ? reviewComments.value.map((c) => ({
-              quotedSource: c.quotedSource,
-              srcStart: c.srcStart,
-              srcEnd: c.srcEnd,
-              body: c.body,
-            }))
-          : undefined,
+        comments: wireComments.value,
       })
       if (ok) opts.close()
     } finally {
@@ -189,22 +142,13 @@ export function useStepApproval(opts: {
 
   /** Full reset of every draft when a different gate/step opens. */
   function resetForStep() {
-    reviewComments.value = []
+    prose.reset()
     feedback.value = ''
-    draftTarget.value = null
-    draftBody.value = ''
     rejectArmed.value = false
     editing.value = false
     draftProposal.value = ''
   }
 
-  // Keep the in-document highlights in sync as the output renders or comments change.
-  watch(
-    [opts.approvalPending, () => opts.step()?.output, reviewComments, draftTarget],
-    () => void nextTick(syncHighlights),
-    { deep: true },
-  )
-
   return {
     reviewComments,
     feedback,