@cat-factory/app 0.145.0 → 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/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[]>([])
   /**