@cat-factory/app 0.144.1 → 0.145.2

package/app/components/board/TaskDependencyEdges.vue

@@ -108,88 +108,52 @@ function border(cx: number, cy: number, hw: number, hh: number, tx: number, ty:
   return { x: cx + dx * t, y: cy + dy * t }
 }
 
+/** Resolve the on-screen, origin-relative border-to-border segment between two blocks,
+ * or null when either end is missing or both collapsed into the same frame. */
+function segmentBetween(sourceId: string, targetId: string, origin: DOMRect) {
+  const a = anchorEl(sourceId)
+  const b = anchorEl(targetId)
+  if (!a || !b || a === b) return null // missing, or both collapsed into the same frame
+  const ra = a.getBoundingClientRect()
+  const rb = b.getBoundingClientRect()
+  const ax = ra.left + ra.width / 2 - origin.left
+  const ay = ra.top + ra.height / 2 - origin.top
+  const bx = rb.left + rb.width / 2 - origin.left
+  const by = rb.top + rb.height / 2 - origin.top
+  const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
+  const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
+  return { x1: start.x, y1: start.y, x2: end.x, y2: end.y }
+}
+
+/** Map a list of {id, source, target} links to their drawable (arrowhead-agnostic) segments. */
+function linkSegments(
+  links: { id: string; source: string; target: string }[],
+  origin: DOMRect,
+): { id: string; x1: number; y1: number; x2: number; y2: number }[] {
+  const out: { id: string; x1: number; y1: number; x2: number; y2: number }[] = []
+  for (const link of links) {
+    const seg = segmentBetween(link.source, link.target, origin)
+    if (seg) out.push({ id: link.id, ...seg })
+  }
+  return out
+}
+
 function recompute() {
   const el = svg.value
   if (!el) return
   const origin = el.getBoundingClientRect()
-  const next: Seg[] = []
 
+  const next: Seg[] = []
   for (const d of taskDeps.value) {
-    const a = anchorEl(d.source)
-    const b = anchorEl(d.target)
-    if (!a || !b || a === b) continue // missing, or both collapsed into the same frame
-
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-
-    next.push({
-      id: d.id,
-      x1: start.x,
-      y1: start.y,
-      x2: end.x,
-      y2: end.y,
-      done: board.getBlock(d.source)?.status === 'done',
-    })
+    const seg = segmentBetween(d.source, d.target, origin)
+    if (!seg) continue
+    next.push({ id: d.id, ...seg, done: board.getBlock(d.source)?.status === 'done' })
   }
   segments.value = next
 
-  const members: MemberSeg[] = []
-  for (const link of epicLinks.value) {
-    const a = anchorEl(link.source)
-    const b = anchorEl(link.target)
-    if (!a || !b || a === b) continue
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-    members.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
-  }
-  memberSegments.value = members
-
-  const fes: FrontendSeg[] = []
-  for (const link of frontendLinks.value) {
-    const a = anchorEl(link.source)
-    const b = anchorEl(link.target)
-    if (!a || !b || a === b) continue
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-    fes.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
-  }
-  frontendSegments.value = fes
-
-  const conns: ConnectionSeg[] = []
-  for (const link of connectionLinks.value) {
-    const a = anchorEl(link.source)
-    const b = anchorEl(link.target)
-    if (!a || !b || a === b) continue
-    const ra = a.getBoundingClientRect()
-    const rb = b.getBoundingClientRect()
-    const ax = ra.left + ra.width / 2 - origin.left
-    const ay = ra.top + ra.height / 2 - origin.top
-    const bx = rb.left + rb.width / 2 - origin.left
-    const by = rb.top + rb.height / 2 - origin.top
-    const start = border(ax, ay, ra.width / 2, ra.height / 2, bx, by)
-    const end = border(bx, by, rb.width / 2, rb.height / 2, ax, ay)
-    conns.push({ id: link.id, x1: start.x, y1: start.y, x2: end.x, y2: end.y })
-  }
-  connectionSegments.value = conns
+  memberSegments.value = linkSegments(epicLinks.value, origin)
+  frontendSegments.value = linkSegments(frontendLinks.value, origin)
+  connectionSegments.value = linkSegments(connectionLinks.value, origin)
 }
 
 const { pause, resume } = useRafFn(recompute, { immediate: false })

package/app/components/brainstorm/BrainstormWindow.vue

@@ -22,7 +22,6 @@ import type {
 
 const board = useBoardStore()
 const brainstorm = useBrainstormStore()
-const ui = useUiStore()
 const toast = useToast()
 const { t } = useI18n()
 const access = useWorkspaceAccess()
@@ -32,15 +31,11 @@ const redoComment = ref('')
 const showRedo = ref(false)
 
 const { open, blockId, stage, close } = useResultView('brainstorm', {
-  // `onOpen` fires synchronously from `useResultView`'s immediate watch, BEFORE the `stage`
-  // const below is initialised — so read the stage straight off the store here (referencing
-  // `stage.value` would hit its temporal dead zone and throw on every open).
-  onOpen: (id) => {
+  onOpen: ({ blockId, stage }) => {
     drafts.value = {}
     redoComment.value = ''
     showRedo.value = false
-    const openStage = ui.resultView?.stage
-    if (openStage) void brainstorm.load(id, openStage)
+    if (stage) void brainstorm.load(blockId, stage)
   },
 })
 const activeStage = computed<BrainstormStage>(() => stage.value ?? 'requirements')

package/app/components/clarity/ClarityReviewWindow.vue

@@ -43,12 +43,12 @@ const showRedo = ref(false)
 // fresh each open, so a non-immediate per-window watch used to leave it empty for whichever
 // route (a pipeline step / "Review & approve") didn't warm the cache by selecting the block.
 const { open, blockId, close } = useResultView('clarity-review', {
-  onOpen: (id) => {
+  onOpen: ({ blockId }) => {
     drafts.value = {}
     seededReply.value = {}
     redoComment.value = ''
     showRedo.value = false
-    void clarity.load(id)
+    void clarity.load(blockId)
   },
   // Flush any typed-but-unblurred answer before the view tears down (X, backdrop, Escape) so
   // closing the window never silently drops it (UX-33).

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -20,8 +20,8 @@ const consensus = useConsensusStore()
 const models = useModelsStore()
 
 const { open, blockId, close } = useResultView('consensus-session', {
-  onOpen: (id) => {
-    void consensus.load(id)
+  onOpen: ({ blockId }) => {
+    void consensus.load(blockId)
   },
 })
 

package/app/components/docs/DocInterviewWindow.vue

@@ -16,7 +16,7 @@ const { t } = useI18n()
 const access = useWorkspaceAccess()
 
 const { open, blockId, close } = useResultView('doc-interview', {
-  onOpen: (id) => void docInterview.load(id),
+  onOpen: ({ blockId }) => void docInterview.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/forkDecision/ForkDecisionWindow.vue

@@ -26,7 +26,7 @@ const { t } = useI18n()
 // Hybrid: state rides the coder step (like follow-ups), but warm it from the GET on open too.
 // No `stepRef`: this is a pre-run decision, so there's no "restart from here".
 const { open, blockId, instanceId, stepIndex, close } = useResultView('fork-decision', {
-  onOpen: (id) => void forkDecision.load(id),
+  onOpen: ({ blockId }) => void forkDecision.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -17,7 +17,7 @@ const initiatives = useInitiativesStore()
 const { t } = useI18n()
 
 const { open, blockId, close } = useResultView('initiative-planning', {
-  onOpen: (id) => void initiatives.load(id),
+  onOpen: ({ blockId }) => void initiatives.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -26,7 +26,7 @@ const { t } = useI18n()
 const toast = useToast()
 
 const { open, blockId, close } = useResultView('initiative-tracker', {
-  onOpen: (id) => void initiatives.load(id),
+  onOpen: ({ blockId }) => void initiatives.load(blockId),
 })
 
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))

package/app/components/observability/StepMetricsBar.vue

@@ -4,6 +4,7 @@ import type { StepMetrics } from '~/types/execution'
 import {
   formatMs,
   formatTokens,
+  freshPromptTokens,
   headroomColor,
   headroomRatio,
   pct,
@@ -22,6 +23,12 @@ defineEmits<{ inspect: [] }>()
 const { t } = useI18n()
 
 const m = computed(() => props.metrics)
+// The headline "↑" is FRESH (uncached) input, not the raw prompt-token sum: a long agentic
+// run re-sends its whole transcript every turn, so the raw sum is ~all cache reads and reads
+// as a blow-up. The cached prefix is shown separately (the green chip) so the two are distinct.
+const freshPrompt = computed(() =>
+  freshPromptTokens(m.value.promptTokens, m.value.cachedPromptTokens ?? 0),
+)
 const headroom = computed(() => headroomRatio(m.value))
 const transport = computed(() => transportRatio(m.value))
 const headroomTone = computed(() => headroomColor(headroom.value, m.value.truncatedCalls > 0))
@@ -48,7 +55,7 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
         class="tabular-nums text-slate-400"
         :title="t('observability.metricsBar.promptCompletionTokens')"
       >
-        {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
+        {{ formatTokens(freshPrompt) }}↑ {{ formatTokens(m.completionTokens) }}↓
       </span>
       <span
         v-if="(m.cachedPromptTokens ?? 0) > 0"

package/app/components/panels/ObservabilityPanel.vue

@@ -8,7 +8,7 @@ import type {
   WebSearchProvider,
 } from '~/types/execution'
 import { agentKindMeta } from '~/utils/catalog'
-import { formatMs, formatTokens, pct } from '~/utils/observability'
+import { formatMs, formatTokens, freshPromptTokens, pct } from '~/utils/observability'
 
 // Drill-down overlay for a run's LLM activity. Opened via
 // `ui.openObservability(instanceId)` from a step surface; loads the full per-call
@@ -126,9 +126,15 @@ const totals = computed(() => {
   const upstreamMs = sum(c, (x) => x.upstreamMs)
   const overheadMs = sum(c, (x) => x.overheadMs)
   const total = upstreamMs + overheadMs
+  const promptTokens = sum(c, (x) => x.promptTokens)
+  const cachedPromptTokens = sum(c, (x) => x.cachedPromptTokens)
   return {
     calls: c.length,
-    promptTokens: sum(c, (x) => x.promptTokens),
+    promptTokens,
+    cachedPromptTokens,
+    // Fresh (uncached) input — the raw prompt-token sum is dominated by per-turn cache reads
+    // on a long agentic run, so surface fresh vs cached rather than the misleading raw total.
+    freshPromptTokens: freshPromptTokens(promptTokens, cachedPromptTokens),
     completionTokens: sum(c, (x) => x.completionTokens),
     upstreamMs,
     overheadMs,
@@ -284,8 +290,19 @@ function exportJson() {
                     {{ t('observability.summary.tokensInOut') }}
                   </dt>
                   <dd class="mt-0.5 tabular-nums text-slate-200">
-                    {{ formatTokens(totals.promptTokens) }} /
+                    {{ formatTokens(totals.freshPromptTokens) }} /
                     {{ formatTokens(totals.completionTokens) }}
+                    <span
+                      v-if="totals.cachedPromptTokens > 0"
+                      class="ms-1 text-[11px] text-emerald-400/80"
+                    >
+                      ·
+                      {{
+                        t('observability.summary.cached', {
+                          tokens: formatTokens(totals.cachedPromptTokens),
+                        })
+                      }}
+                    </span>
                   </dd>
                 </div>
                 <div>

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

@@ -151,6 +151,12 @@ function openForkFor(i: number) {
   if (instance.value) ui.openForkDecision(instance.value.id, i)
 }
 
+// Open the PR deep-review findings-selection window for a pr-reviewer step parked awaiting
+// a selection (its dedicated chip, mirroring the fork-decision one above).
+function openPrReviewFor(i: number) {
+  if (instance.value) ui.openPrReview(instance.value.id, i)
+}
+
 // Stop the run WITHOUT deleting it: halts the container + driver and records a
 // `cancelled` failure, leaving the run readable + retryable (the block goes
 // `blocked`). The destructive reset (delete the run, return the task to `planned`)
@@ -393,6 +399,23 @@ async function mergePr() {
             >
               {{ t('inspector.execution.chooseApproach') }}
             </UButton>
+            <!-- A pr-reviewer step parked awaiting a finding selection: open the dedicated
+                 findings-selection window, not the generic approval gate. -->
+            <UButton
+              v-else-if="
+                s.approval &&
+                s.approval.status === 'pending' &&
+                s.prReview?.status === 'awaiting_selection'
+              "
+              color="primary"
+              variant="soft"
+              size="xs"
+              icon="i-lucide-clipboard-check"
+              data-testid="pr-review-open"
+              @click="openPrReviewFor(i)"
+            >
+              {{ t('inspector.execution.reviewFindings') }}
+            </UButton>
             <UButton
               v-else-if="s.approval && s.approval.status === 'pending'"
               color="warning"

package/app/components/pipeline/PipelineProgress.vue

@@ -75,6 +75,15 @@ function forkPhase(step: PipelineStep): 'proposing' | 'awaiting_choice' | null {
   return status === 'proposing' || status === 'awaiting_choice' ? status : null
 }
 
+/**
+ * Whether a `pr-reviewer` step is parked awaiting a human finding-selection — it carries a
+ * pending approval too, so we render a purpose-built "Review findings" chip (opening the
+ * PR-review window) ahead of the generic approval gate, mirroring the fork-decision chip.
+ */
+function prReviewAwaiting(step: PipelineStep): boolean {
+  return step.prReview?.status === 'awaiting_selection'
+}
+
 // --- restart from a step -----------------------------------------------------
 // Re-run the pipeline from a chosen step onward: the server resets that step +
 // every later step's iteration counters and re-drives a fresh run, keeping the
@@ -607,6 +616,26 @@ const ITEM_ICON: Record<string, string> = {
             </span>
           </button>
 
+          <!-- PR deep-review parked for a human to select which findings matter: a
+               purpose-built chip opening the findings-selection window, ahead of the
+               generic approval gate (mirrors the fork-decision chip above). -->
+          <button
+            v-if="prReviewAwaiting(s)"
+            type="button"
+            data-testid="pr-review-open"
+            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed border-indigo-500/50 bg-indigo-500/10 px-2.5 py-1.5 text-start transition followup-blink hover:border-indigo-400/60"
+            @click="ui.openPrReview(instance.id, i)"
+          >
+            <span
+              class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-indigo-500/40 bg-indigo-500/15"
+            >
+              <UIcon name="i-lucide-clipboard-check" class="h-3 w-3 text-indigo-300" />
+            </span>
+            <span class="min-w-0 flex-1 truncate text-[12px] text-slate-300">
+              {{ t('pipeline.progress.prReview.review') }}
+            </span>
+          </button>
+
           <!-- reviewer gate folding/re-reviewing in the background: a working indicator,
                NOT a "Review & approve" gate (the human is summoned only if needed) -->
           <div
@@ -618,7 +647,10 @@ const ITEM_ICON: Record<string, string> = {
           </div>
 
           <!-- approval gate: review (and edit) the proposal before continuing -->
-          <div v-else-if="s.approval && s.approval.status === 'pending'" class="mt-3">
+          <div
+            v-else-if="s.approval && s.approval.status === 'pending' && !prReviewAwaiting(s)"
+            class="mt-3"
+          >
             <UButton
               color="warning"
               variant="soft"

package/app/components/prReview/PrReviewWindow.vue

@@ -30,8 +30,8 @@ const access = useWorkspaceAccess()
 const { t } = useI18n()
 
 const { open, blockId, instanceId, stepIndex, close } = useResultView('pr-review', {
-  onOpen: (_id) => {
-    if (instanceId.value) void prReview.load(instanceId.value)
+  onOpen: ({ instanceId }) => {
+    if (instanceId) void prReview.load(instanceId)
   },
 })
 

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -55,7 +55,7 @@ const docCollapsedOverride = ref<boolean | null>(null)
 // fresh each open, so a non-immediate per-window watch used to leave it empty for whichever
 // route (a pipeline step / "Review & approve") didn't warm the cache by selecting the block.
 const { open, blockId, instanceId, stepIndex, close } = useResultView('requirements-review', {
-  onOpen: (id) => {
+  onOpen: ({ blockId }) => {
     drafts.value = {}
     seededReply.value = {}
     recommendMode.value = new Set()
@@ -64,7 +64,7 @@ const { open, blockId, instanceId, stepIndex, close } = useResultView('requireme
     redoComment.value = ''
     showRedo.value = false
     docCollapsedOverride.value = null
-    void requirements.load(id)
+    void requirements.load(blockId)
   },
   // Closing the window (X, backdrop, Escape) must not silently drop an answer the user typed
   // but never blurred out of. Flush before the view tears down; flushDrafts captures the

package/app/components/spec/ServiceSpecWindow.vue

@@ -25,10 +25,10 @@ const mode = ref<ViewMode>('structured')
 const selected = ref<{ m: number; g: number } | null>(null)
 
 const { open, blockId, close } = useResultView('service-spec', {
-  onOpen: (id) => {
+  onOpen: ({ blockId }) => {
     mode.value = 'structured'
     selected.value = null
-    void serviceSpec.load(id)
+    void serviceSpec.load(blockId)
   },
 })
 

package/app/composables/useResultView.ts

@@ -24,9 +24,24 @@
  * overlay stack (top overlay closes first, focus/scroll managed too). A listener here would
  * double-fire `close`, so it was removed once the last window converted onto the shell.
  */
+/**
+ * The fully-resolved view context handed to `onOpen`. Every field is already initialised by
+ * the time `onOpen` fires, so a loader takes exactly what it needs from here and never reaches
+ * back into the store or the composable's own return refs. That matters because `onOpen` fires
+ * synchronously from the `immediate` watch below — DURING the caller's `setup`, before the
+ * `const { … } = useResultView(…)` destructure has been assigned — so any callback that closed
+ * over those refs would hit their temporal dead zone and throw on every open.
+ */
+export interface OpenResultView {
+  blockId: string
+  instanceId: string | null
+  stepIndex: number | null
+  stage: 'requirements' | 'architecture' | null
+}
+
 export function useResultView(
   viewId: string,
-  opts?: { onOpen?: (blockId: string) => void; onClose?: () => void },
+  opts?: { onOpen?: (view: OpenResultView) => void; onClose?: () => void },
 ) {
   const ui = useUiStore()
 
@@ -44,12 +59,20 @@ export function useResultView(
     ui.closeResultView()
   }
 
-  // The load-on-open contract: fire immediately on mount and on any later block switch.
+  // The load-on-open contract: fire immediately on mount and on any later block switch. The
+  // callback receives the fully-resolved context (see OpenResultView) rather than the return
+  // refs, which aren't assigned yet at the initial synchronous fire.
   if (opts?.onOpen) {
     watch(
       blockId,
       (id) => {
-        if (id) opts.onOpen!(id)
+        if (id)
+          opts.onOpen!({
+            blockId: id,
+            instanceId: instanceId.value,
+            stepIndex: stepIndex.value,
+            stage: stage.value,
+          })
       },
       { immediate: true },
     )

package/app/stores/pipelines.ts

@@ -24,26 +24,11 @@ function defaultConsensusConfig(): ConsensusStepConfig {
 }
 
 /**
- * Saved, reusable pipelines (the pipeline palette) plus the in-progress draft
- * being assembled in the pipeline builder. Saved pipelines live on the backend;
- * the draft is transient client state. The draft doubles as the EDIT surface: a
- * custom pipeline can be loaded into it (`loadForEdit`) and saved back in place,
- * while a built-in is cloned first (`clonePipeline`) into an editable copy.
+ * The per-step, index-aligned draft arrays. Every one is kept the same length as `draft` and
+ * spliced/reordered in lockstep (see `insertAt` / `removeFromDraft` / `moveUnit`), so grouping
+ * their construction keeps that alignment contract — and its documentation — in one place.
  */
-export const usePipelinesStore = defineStore('pipelines', () => {
-  const api = useApi()
-  const {
-    items: pipelines,
-    upsert: upsertPipeline,
-    remove: dropPipeline,
-  } = useUpsertList<Pipeline>({ key: (p) => p.id })
-  /**
-   * Current built-in catalog versions (`seedPipelines()`), keyed by pipeline id, from the
-   * workspace snapshot. A built-in whose stored `version` is below its catalog value here has
-   * a newer definition available (see `usePipelineHealth`).
-   */
-  const catalogVersions = ref<Record<string, number>>({})
-
+function createDraftStepState() {
   /** The chain currently being assembled in the builder. */
   const draft = ref<AgentKind[]>([])
   /** Per-step approval gates, kept index-aligned with `draft`. */
@@ -79,6 +64,52 @@ export const usePipelinesStore = defineStore('pipelines', () => {
    * default, so an entry exists only when a step opts out of something.
    */
   const draftStepOptions = ref<(StepOptions | null)[]>([])
+  return {
+    draft,
+    draftGates,
+    draftEnabled,
+    draftThresholds,
+    draftConsensus,
+    draftGating,
+    draftFollowUps,
+    draftTesterQuality,
+    draftStepOptions,
+  }
+}
+
+/**
+ * Saved, reusable pipelines (the pipeline palette) plus the in-progress draft
+ * being assembled in the pipeline builder. Saved pipelines live on the backend;
+ * the draft is transient client state. The draft doubles as the EDIT surface: a
+ * custom pipeline can be loaded into it (`loadForEdit`) and saved back in place,
+ * while a built-in is cloned first (`clonePipeline`) into an editable copy.
+ */
+export const usePipelinesStore = defineStore('pipelines', () => {
+  const api = useApi()
+  const {
+    items: pipelines,
+    upsert: upsertPipeline,
+    remove: dropPipeline,
+  } = useUpsertList<Pipeline>({ key: (p) => p.id })
+  /**
+   * Current built-in catalog versions (`seedPipelines()`), keyed by pipeline id, from the
+   * workspace snapshot. A built-in whose stored `version` is below its catalog value here has
+   * a newer definition available (see `usePipelineHealth`).
+   */
+  const catalogVersions = ref<Record<string, number>>({})
+
+  // The per-step, index-aligned draft arrays (kept in lockstep — see `createDraftStepState`).
+  const {
+    draft,
+    draftGates,
+    draftEnabled,
+    draftThresholds,
+    draftConsensus,
+    draftGating,
+    draftFollowUps,
+    draftTesterQuality,
+    draftStepOptions,
+  } = createDraftStepState()
   /** Organizational labels for the pipeline being assembled/edited. */
   const draftLabels = ref<string[]>([])
   /**