@cat-factory/app 0.6.0

package/app/composables/useBlockQueries.ts

@@ -0,0 +1,154 @@
+import { computed, type Ref } from 'vue'
+import type { Block, BlockStatus } from '~/types/domain'
+
+/**
+ * Pure, read-only queries over a board's blocks. Extracted from the board store
+ * so the (sizeable) derivation logic — hierarchy traversal, status/progress
+ * rollups and container sizing — lives in one focused, independently testable
+ * place. The store wires these against its reactive `blocks` cache and re-exposes
+ * them unchanged, so callers and tests are unaffected.
+ */
+export function useBlockQueries(blocks: Ref<Block[]>) {
+  const byId = computed(() => {
+    const map = new Map<string, Block>()
+    for (const b of blocks.value) map.set(b.id, b)
+    return map
+  })
+
+  function getBlock(id: string) {
+    return byId.value.get(id)
+  }
+
+  /** Top-level architecture blocks (the only ones drawn as Vue Flow nodes). */
+  const frames = computed(() => blocks.value.filter((b) => (b.level ?? 'frame') === 'frame'))
+
+  /** Direct children of a block, in insertion order. */
+  function childrenOf(parentId: string) {
+    return blocks.value.filter((b) => b.parentId === parentId)
+  }
+
+  /** Tasks directly inside a container (a service or a module). */
+  function tasksOf(containerId: string) {
+    return blocks.value.filter((b) => b.parentId === containerId && b.level === 'task')
+  }
+
+  /** Modules (sub-frames) inside a service. */
+  function modulesOf(serviceId: string) {
+    return blocks.value.filter((b) => b.parentId === serviceId && b.level === 'module')
+  }
+
+  /** Tasks anywhere under a container — directly, or nested inside its modules. */
+  function allTasksUnder(containerId: string): Block[] {
+    const direct = tasksOf(containerId)
+    const nested = modulesOf(containerId).flatMap((m) => tasksOf(m.id))
+    return [...direct, ...nested]
+  }
+
+  /** The top-level service a block ultimately belongs to. */
+  function serviceOf(block: Block): Block | undefined {
+    let cur: Block | undefined = block
+    while (cur && cur.level !== 'frame') {
+      cur = cur.parentId ? getBlock(cur.parentId) : undefined
+    }
+    return cur
+  }
+
+  /** All tasks across every service (used for the dependency picker). */
+  const allTasks = computed(() => blocks.value.filter((b) => b.level === 'task'))
+
+  /** A task's dependencies that are not yet merged (i.e. block it from running). */
+  function unmetDeps(taskId: string) {
+    const t = getBlock(taskId)
+    if (!t) return [] as Block[]
+    return t.dependsOn
+      .map((id) => getBlock(id))
+      .filter((b): b is Block => !!b && b.status !== 'done')
+  }
+
+  /** A task may run only once all of its dependencies have merged. */
+  function isRunnable(taskId: string) {
+    return unmetDeps(taskId).length === 0
+  }
+
+  /** Container status/progress are derived from the tasks under it (containers have no PR). */
+  function frameProgress(frameId: string) {
+    const tasks = allTasksUnder(frameId)
+    if (tasks.length === 0) return getBlock(frameId)?.progress ?? 0
+    const sum = tasks.reduce((n, t) => n + (t.status === 'done' ? 1 : t.progress), 0)
+    return sum / tasks.length
+  }
+
+  /**
+   * A frame is a long-lived service: it never reaches a terminal "done" —
+   * tasks keep appearing. So its status reflects current *activity*, mapped
+   * onto the shared status palette but capped below `done`:
+   *   planned       → no tasks yet (empty)
+   *   ready         → has tasks but nothing active (idle / caught up / "live")
+   *   in_progress   → at least one task running or with an open PR
+   *   blocked       → at least one task needs a decision
+   */
+  function frameStatus(frameId: string): BlockStatus {
+    const tasks = allTasksUnder(frameId)
+    if (tasks.length === 0) return 'planned'
+    if (tasks.some((t) => t.status === 'blocked')) return 'blocked'
+    if (tasks.some((t) => t.status === 'in_progress' || t.status === 'pr_ready'))
+      return 'in_progress'
+    return 'ready'
+  }
+
+  /**
+   * The natural extent of a container's inner 2D canvas — the smallest size that
+   * still fits all its children. This is the floor a resizable frame can never be
+   * dragged below (so tasks/modules are never clipped).
+   */
+  function contentSize(id: string): { w: number; h: number } {
+    const b = getBlock(id)
+    const isModule = b?.level === 'module'
+    const TASK_W = 180
+    const TASK_H = 160
+    const headerH = isModule ? 30 : 0
+    let w = isModule ? 200 : 360
+    let inner = isModule ? 60 : 220
+    for (const t of tasksOf(id)) {
+      w = Math.max(w, t.position.x + TASK_W + 12)
+      inner = Math.max(inner, t.position.y + TASK_H + 12)
+    }
+    for (const m of modulesOf(id)) {
+      const s = containerSize(m.id)
+      w = Math.max(w, m.position.x + s.w + 12)
+      inner = Math.max(inner, m.position.y + s.h + 12)
+    }
+    return { w, h: inner + headerH }
+  }
+
+  /**
+   * Pixel size of a container's inner 2D canvas. The content extent is the floor;
+   * a frame the user has resized (dragging its borders) uses its stored `size`
+   * when that is larger, so an explicit size grows the frame but never shrinks it
+   * below its contents.
+   */
+  function containerSize(id: string): { w: number; h: number } {
+    const content = contentSize(id)
+    const stored = getBlock(id)?.size
+    if (!stored) return content
+    return { w: Math.max(content.w, stored.w), h: Math.max(content.h, stored.h) }
+  }
+
+  return {
+    byId,
+    getBlock,
+    frames,
+    allTasks,
+    childrenOf,
+    tasksOf,
+    modulesOf,
+    allTasksUnder,
+    serviceOf,
+    unmetDeps,
+    isRunnable,
+    frameProgress,
+    frameStatus,
+    contentSize,
+    containerSize,
+  }
+}

package/app/composables/useBoardFlow.ts

@@ -0,0 +1,11 @@
+import { useVueFlow } from '@vue-flow/core'
+
+/** Stable id for the main board's Vue Flow instance. Passing this id to
+ * useVueFlow() from anywhere (e.g. the toolbar) accesses the same instance. */
+export const BOARD_FLOW_ID = 'board'
+
+/** Camera controls for the main board, usable outside the canvas component. */
+export function useBoardFlow() {
+  const { fitView, zoomIn, zoomOut, viewport } = useVueFlow(BOARD_FLOW_ID)
+  return { fitView, zoomIn, zoomOut, viewport }
+}

package/app/composables/useContextLinking.ts

@@ -0,0 +1,65 @@
+import type { DocumentSourceKind, TaskSourceKind } from '~/types/domain'
+
+// Shared model + orchestration for attaching external context (imported docs and
+// tracker issues) to a board block. A "pending" item is something the user has
+// chosen to attach but which is only linked once the block exists — so the task
+// creation popup can collect selections up front and commit them after the task
+// is created. Search hits and pasted URLs carry `needsImport: true`: they are not
+// yet projected locally, so they are imported (fetched + persisted) before being
+// linked; already-imported items are linked directly. Reused wherever context is
+// attached (the add-task popup today; the inspector can adopt it later).
+
+export interface PendingContext {
+  kind: 'document' | 'task'
+  source: DocumentSourceKind | TaskSourceKind
+  /** A canonical external id (already-imported / search hit) or a pasted URL/ref. */
+  externalId: string
+  title: string
+  /** Secondary line: an issue status, a source label, the raw URL, … */
+  subtitle?: string
+  /** Lucide icon for the row. */
+  icon?: string
+  /** True when the item must be imported before it can be linked. */
+  needsImport: boolean
+}
+
+/** Stable key for a pending item, used for dedupe + selection toggles. */
+export function contextKey(c: Pick<PendingContext, 'kind' | 'source' | 'externalId'>): string {
+  return `${c.kind}:${c.source}:${c.externalId}`
+}
+
+export function useContextLinking() {
+  const documents = useDocumentsStore()
+  const tasks = useTasksStore()
+
+  /**
+   * Import (when needed) then link every pending item to `blockId`. Each failure
+   * is counted rather than aborting the batch, so one bad attachment doesn't sink
+   * the rest; returns how many failed.
+   */
+  async function linkPending(blockId: string, items: PendingContext[]): Promise<number> {
+    let failed = 0
+    for (const item of items) {
+      try {
+        if (item.kind === 'document') {
+          const source = item.source as DocumentSourceKind
+          const externalId = item.needsImport
+            ? (await documents.importDocument(source, item.externalId)).externalId
+            : item.externalId
+          await documents.linkToBlock(blockId, source, externalId)
+        } else {
+          const source = item.source as TaskSourceKind
+          const externalId = item.needsImport
+            ? (await tasks.importTask(source, item.externalId)).externalId
+            : item.externalId
+          await tasks.linkToBlock(blockId, source, externalId)
+        }
+      } catch {
+        failed++
+      }
+    }
+    return failed
+  }
+
+  return { linkPending }
+}

package/app/composables/useDepLabels.ts

@@ -0,0 +1,26 @@
+import type { Block } from '~/types/domain'
+
+/**
+ * Labels a dependency block, qualifying it with its owning frame when it lives
+ * in a different container than the task depending on it (a "cross-frame" edge).
+ * Shared by the inspector and the task card so the two read identically.
+ */
+export function useDepLabels() {
+  const board = useBoardStore()
+
+  /** Title of a block's parent container, if any. */
+  function frameTitle(b: Block): string | undefined {
+    return b.parentId ? board.getBlock(b.parentId)?.title : undefined
+  }
+
+  /**
+   * `Parent / Title` when `dep` lives in a different container than
+   * `contextParentId`, otherwise just the dependency's own title.
+   */
+  function depLabel(dep: Block, contextParentId?: string | null): string {
+    const f = frameTitle(dep)
+    return f && dep.parentId !== contextParentId ? `${f} / ${dep.title}` : dep.title
+  }
+
+  return { frameTitle, depLabel }
+}

package/app/composables/useFrameResize.ts

@@ -0,0 +1,54 @@
+import { ref } from 'vue'
+import type { Block } from '~/types/domain'
+
+/**
+ * Pointer-driven resizing for service frames (Miro-style border drag). The drag
+ * delta is divided by the board zoom so the edge tracks the cursor, and the new
+ * size is clamped to the frame's content extent so dragging in never clips the
+ * tasks/modules inside. The frame grows live (the store block is mutated in place,
+ * which `containerSize` reads back), and the final size is persisted once on
+ * release rather than on every move.
+ */
+export function useFrameResize() {
+  const board = useBoardStore()
+  const ui = useUiStore()
+  /** Id of the frame currently being resized, for cursor/handle styling. */
+  const resizingId = ref<string | null>(null)
+
+  /**
+   * Begin a resize from one of the frame's edges/corner. `edge` selects which
+   * dimensions move: `'e'` width only, `'s'` height only, `'se'` both.
+   */
+  function startResize(block: Block, e: PointerEvent, edge: 'e' | 's' | 'se') {
+    if (e.button !== 0) return
+    e.preventDefault()
+    e.stopPropagation()
+    const startX = e.clientX
+    const startY = e.clientY
+    // The content extent is the floor — never shrink a frame below its tasks.
+    const min = board.contentSize(block.id)
+    // Seed from the current rendered size so the first move doesn't jump.
+    const start = board.containerSize(block.id)
+    resizingId.value = block.id
+
+    const onMove = (ev: PointerEvent) => {
+      const z = ui.zoom || 1
+      const w = edge === 's' ? start.w : Math.max(min.w, start.w + (ev.clientX - startX) / z)
+      const h = edge === 'e' ? start.h : Math.max(min.h, start.h + (ev.clientY - startY) / z)
+      // Optimistic, local-only: mutate the cached block so the frame grows live
+      // without a round-trip on every pointer move.
+      block.size = { w: Math.round(w), h: Math.round(h) }
+    }
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      resizingId.value = null
+      // Persist the final size once (also re-applies it as the authoritative block).
+      if (block.size) void board.updateBlock(block.id, { size: block.size })
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  return { resizingId, startResize }
+}

package/app/composables/useResultView.ts

@@ -0,0 +1,48 @@
+/**
+ * Shared contract for a dedicated result-view window (the `resultView` seam — see
+ * `~/utils/catalog`, `StepResultViewHost.vue`). Every such window resolves the same state
+ * from `ui.resultView`, closes the same way, and (when it loads data) must fetch on open.
+ *
+ * `StepResultViewHost` mounts each window FRESH every time it opens, so a per-window
+ * `watch` would have to be `immediate` to fetch on the initial mount — easy to forget, and
+ * forgetting it makes the window show an empty state for whichever navigation route didn't
+ * happen to warm a cache first. Centralising the contract here means a window can't drift:
+ * declare an `onOpen` loader and it fires immediately on mount AND on any later block switch,
+ * regardless of how the window was opened.
+ *
+ * A synchronous window (one that reads its data straight off the execution step, like the
+ * test report) simply omits `onOpen`.
+ */
+export function useResultView(viewId: string, opts?: { onOpen?: (blockId: string) => void }) {
+  const ui = useUiStore()
+
+  const open = computed(() => ui.resultView?.view === viewId)
+  // Null whenever this window isn't the active view, so a stale id from another window's
+  // open can never leak into this one.
+  const blockId = computed(() => (open.value ? ui.resultView!.blockId : null))
+  const instanceId = computed(() => (open.value ? ui.resultView!.instanceId : null))
+  const stepIndex = computed(() => (open.value ? ui.resultView!.stepIndex : null))
+
+  function close() {
+    ui.closeResultView()
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === 'Escape' && open.value) close()
+  }
+  onMounted(() => window.addEventListener('keydown', onKey))
+  onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
+
+  // The load-on-open contract: fire immediately on mount and on any later block switch.
+  if (opts?.onOpen) {
+    watch(
+      blockId,
+      (id) => {
+        if (id) opts.onOpen!(id)
+      },
+      { immediate: true },
+    )
+  }
+
+  return { open, blockId, instanceId, stepIndex, close }
+}

package/app/composables/useReviewStage.ts

@@ -0,0 +1,40 @@
+import { useRequirementsStore } from '~/stores/requirements'
+import { useClarityStore } from '~/stores/clarity'
+
+/** The async stage an iterative reviewer gate is mid-cycle in, or null. */
+export type ReviewStage = 'incorporating' | 'reviewing' | null
+
+// Both iterative reviewer gates (`requirements-review` over a feature brief and
+// `clarity-review` over a bug report) drive the same answer → incorporate → re-review
+// loop, and while a review is folding answers / re-reviewing in the durable driver it
+// needs NO human — so its parked approval must be SUPPRESSED on the board/inspector and a
+// working indicator shown instead. This composable maps a review gate to the store that
+// tracks its loop, so the board surfaces (BlockNode / TaskCard / TaskExecution) handle
+// both review kinds through one helper rather than special-casing each kind separately.
+
+export function useReviewStage() {
+  const requirements = useRequirementsStore()
+  const clarity = useClarityStore()
+
+  /**
+   * The background stage for a block regardless of which review kind drives it. A task is
+   * either a feature task (requirements review) or a bug task (clarity review), so at most
+   * one store has a live stage for it.
+   */
+  function stageForBlock(blockId: string): ReviewStage {
+    return requirements.backgroundStage(blockId) ?? clarity.backgroundStage(blockId)
+  }
+
+  /**
+   * Whether a specific review-gate approval is mid-cycle background work — keyed off the
+   * approval's own `agentKind` so a non-review approval on the same block is never
+   * suppressed by a coincidental review stage.
+   */
+  function isBackground(agentKind: string | undefined, blockId: string): boolean {
+    if (agentKind === 'requirements-review') return requirements.backgroundStage(blockId) != null
+    if (agentKind === 'clarity-review') return clarity.backgroundStage(blockId) != null
+    return false
+  }
+
+  return { stageForBlock, isBackground }
+}

package/app/composables/useSemanticZoom.ts

@@ -0,0 +1,31 @@
+import type { LodLevel } from '~/types/domain'
+
+/** The LOD scale, shallow → deep. Index order lets callers ask "is at least". */
+export const LOD_ORDER: LodLevel[] = ['far', 'mid', 'close', 'steps', 'subtasks']
+
+/** Map a raw zoom factor to a level-of-detail bucket. Shared by the main board
+ * and the drill-down focus view so both honour the same thresholds.
+ *
+ * Past `close` (where a frame opens to show its tasks) two deeper bands drill
+ * into an individual task: `steps` reveals its build-pipeline steps, `subtasks`
+ * expands each step's live todo breakdown — the spatial analogue of opening a
+ * task in the inspector. */
+export function zoomToLod(zoom: number): LodLevel {
+  if (zoom < 0.6) return 'far'
+  if (zoom < 1.2) return 'mid'
+  if (zoom < 1.8) return 'close'
+  if (zoom < 2.4) return 'steps'
+  return 'subtasks'
+}
+
+/** True when `lod` is at least as deep as `min` on the LOD scale. */
+export function lodAtLeast(lod: LodLevel, min: LodLevel): boolean {
+  return LOD_ORDER.indexOf(lod) >= LOD_ORDER.indexOf(min)
+}
+
+/** Reactive LOD bound to the global UI zoom (set by the board canvas). */
+export function useSemanticZoom() {
+  const ui = useUiStore()
+  const lod = computed<LodLevel>(() => zoomToLod(ui.zoom))
+  return { lod, zoom: computed(() => ui.zoom) }
+}

package/app/composables/useStepApproval.ts

@@ -0,0 +1,233 @@
+import { ref, computed, nextTick, watch } 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
+}
+
+/**
+ * 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.
+ */
+export function useStepApproval(opts: {
+  step: () => PipelineStep | null
+  scrollEl: () => HTMLElement | null
+  instanceId: () => string | undefined
+  approvalId: () => string | null
+  approvalPending: () => boolean
+  companionExceeded: () => boolean
+  close: () => void
+}) {
+  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
+  // the approved proposal. It CANNOT be mixed with the request-changes/comments path.
+  const editing = ref(false)
+  const draftProposal = ref('')
+
+  // 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)
+  }
+
+  const canRequestChanges = computed(
+    () => !!feedback.value.trim() || reviewComments.value.length > 0,
+  )
+
+  // Plain approve: accept the agent's proposal verbatim and advance.
+  async function approve() {
+    const id = opts.approvalId()
+    if (!opts.instanceId() || !id || submitting.value) return
+    submitting.value = true
+    try {
+      await execution.approveStep(opts.instanceId()!, id)
+      opts.close()
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  function startEditing() {
+    draftProposal.value = opts.step()?.output ?? ''
+    editing.value = true
+    // Editing and the review/reject path are mutually exclusive — clear the other.
+    rejectArmed.value = false
+    draftTarget.value = null
+    void nextTick(syncHighlights)
+  }
+  function cancelEditing() {
+    editing.value = false
+    draftProposal.value = ''
+  }
+  async function approveWithEdits() {
+    const id = opts.approvalId()
+    if (!opts.instanceId() || !id || submitting.value) return
+    submitting.value = true
+    try {
+      await execution.approveStep(opts.instanceId()!, id, draftProposal.value)
+      opts.close()
+    } finally {
+      submitting.value = false
+    }
+  }
+  async function requestChanges() {
+    const id = opts.approvalId()
+    if (!opts.instanceId() || !id || submitting.value || !canRequestChanges.value) return
+    submitting.value = true
+    try {
+      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,
+      })
+      opts.close()
+    } finally {
+      submitting.value = false
+    }
+  }
+  function armReject() {
+    rejectArmed.value = true
+  }
+  function disarmReject() {
+    rejectArmed.value = false
+  }
+  async function reject() {
+    const id = opts.approvalId()
+    if (!opts.instanceId() || !id || submitting.value) return
+    submitting.value = true
+    try {
+      await execution.rejectStep(opts.instanceId()!, id, feedback.value.trim() || undefined)
+      opts.close()
+    } finally {
+      submitting.value = false
+      rejectArmed.value = false
+    }
+  }
+
+  /**
+   * Reset the approve-with-edits / reject sub-states so reopening the same step is
+   * clean (the step-change watch only fires when the step key actually changes).
+   */
+  function resetForClose() {
+    editing.value = false
+    draftProposal.value = ''
+    rejectArmed.value = false
+  }
+
+  /** Full reset of every draft when a different gate/step opens. */
+  function resetForStep() {
+    reviewComments.value = []
+    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,
+    submitting,
+    draftTarget,
+    draftBody,
+    editing,
+    draftProposal,
+    rejectArmed,
+    canRequestChanges,
+    syncHighlights,
+    onProseClick,
+    addDraftComment,
+    cancelDraft,
+    removeComment,
+    approve,
+    startEditing,
+    cancelEditing,
+    approveWithEdits,
+    requestChanges,
+    armReject,
+    disarmReject,
+    reject,
+    resetForClose,
+    resetForStep,
+  }
+}