@cat-factory/app 0.282.2 → 0.284.0

package/app/composables/useBlockDrag.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue'
+import { tryOnScopeDispose } from '@vueuse/core'
 import type { Block } from '~/types/domain'
 
 // Only one block is ever dragged at a time, so the dragged id is a module-level
@@ -27,6 +28,18 @@ export function useBlockDrag() {
   const ui = useUiStore()
   const access = useWorkspaceAccess()
 
+  /**
+   * Tear down the in-flight drag's window listeners.
+   *
+   * They used to be removed inside `onUp` alone, which covers only the drag that ENDS. A touch
+   * interruption (an incoming call, a system gesture) fires `pointercancel` and no `pointerup`,
+   * and unmounting the dragging component fires neither, so both stranded a `pointermove` and a
+   * `pointerup` on `window` plus a `draggingId` that never cleared, leaving the card dimmed and
+   * every frame's z-index elevated for the rest of the session.
+   */
+  let endDrag: (() => void) | null = null
+  tryOnScopeDispose(() => endDrag?.())
+
   function startDrag(
     block: Block,
     e: PointerEvent,
@@ -65,9 +78,32 @@ export function useBlockDrag() {
       // undoes. The `draggingId` state the card dims itself with is the whole feedback.
       if (positioned) board.previewMove(block.id, last)
     }
+    // What is currently bound to `window`, so the teardown below needs no forward reference to
+    // the handlers that call it.
+    const bound: Array<[string, (ev: PointerEvent) => void]> = []
+    /**
+     * Stop listening and clear the drag state, WITHOUT committing anything. The shared exit for
+     * every way a drag ends: the drop commits first and then calls this, and a cancel (a
+     * `pointercancel`, or the component unmounting mid-drag) calls it alone.
+     */
+    const detach = () => {
+      for (const [type, handler] of bound) {
+        window.removeEventListener(type, handler as EventListener)
+      }
+      bound.length = 0
+      endDrag = null
+      draggingId.value = null
+    }
+    /**
+     * A drag the pointer never finished. Nothing is persisted, so the local preview has to go
+     * back where it started: leaving it would show a position the server does not hold and the
+     * next refresh would silently snap the block back.
+     */
+    const onCancel = () => {
+      if (moved && positioned) board.previewMove(block.id, orig)
+      detach()
+    }
     const onUp = (ev: PointerEvent) => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
       if (moved) {
         // A successful reparent persists the move itself; otherwise commit the final
         // position in place. Either way it's a single write, not one per frame. Run
@@ -76,10 +112,20 @@ export function useBlockDrag() {
         const reparented = opts.reparent && reparentAt(block, ev.clientX, ev.clientY, positioned)
         if (!reparented && positioned) void board.moveBlock(block.id, last)
       }
-      draggingId.value = null
+      detach()
+    }
+    // A second drag can only start after the first released or cancelled, but a stale listener
+    // set would silently drive it; end whatever is still attached before attaching this one.
+    endDrag?.()
+    endDrag = onCancel
+    for (const binding of [
+      ['pointermove', onMove],
+      ['pointerup', onUp],
+      ['pointercancel', onCancel],
+    ] as Array<[string, (ev: PointerEvent) => void]>) {
+      bound.push(binding)
+      window.addEventListener(binding[0], binding[1] as EventListener)
     }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
   }
 
   /** Returns true when the block was dropped into a *different* container. */

package/app/composables/usePipelineDraftWarnings.ts

@@ -1,6 +1,7 @@
 import { computed, type ComputedRef } from 'vue'
 import {
   pipelineEnvironmentProblems,
+  producesTaskEstimate,
   purposeAllowsAgentCategory,
   type PipelineEnvironmentProblemReason,
 } from '@cat-factory/contracts'
@@ -60,13 +61,14 @@ export function usePipelineDraftWarnings(
 
   const enabled = (i: number) => pipelines.draftEnabled[i] !== false
 
-  // A gated step with no task-estimator before it (mirrors `assertValidGating`, which rejects the
-  // save and the start). Both the step's own estimate gate (`draftGating`) and the Tester QC
-  // companion's (`draftTesterQuality[i].gating`) count.
+  // A gated step with no estimate PRODUCER before it (mirrors `assertValidGating`, which rejects
+  // the save and the start). Both the step's own estimate gate (`draftGating`) and the Tester QC
+  // companion's (`draftTesterQuality[i].gating`) count, and either producer satisfies it: the
+  // estimator forecasts the estimate up front, the reassessor measures it once the change lands.
   const gatingNeedsEstimator = computed(() => {
     const kinds = pipelines.draft
     const hasEstimatorBefore = (i: number) =>
-      kinds.slice(0, i).some((k, j) => k === 'task-estimator' && enabled(j))
+      kinds.slice(0, i).some((k, j) => producesTaskEstimate(k) && enabled(j))
     return kinds.some((_, i) => {
       if (!enabled(i)) return false
       const gated =

package/app/composables/usePipelineHealth.spec.ts

@@ -133,7 +133,7 @@ describe('usePipelineHealth', () => {
     expect(invalid.value[0]!.problems.some((p) => p.type === 'shape')).toBe(true)
   })
 
-  it('flags an estimate-gated companion with no task-estimator before it (shape)', () => {
+  it('flags an estimate-gated companion with no estimate producer before it (shape)', () => {
     const gated = builtin(['coder', 'reviewer'], {
       gating: [null, { enabled: true, minComplexity: 0.5, onMissingEstimate: 'run' }],
     })
@@ -142,6 +142,18 @@ describe('usePipelineHealth', () => {
     expect(invalid.value[0]!.problems.some((p) => p.type === 'shape')).toBe(true)
   })
 
+  // The estimate has two producers, at opposite ends of a run, and this advisory reads the SAME
+  // `producesTaskEstimate` predicate the engine's `assertValidGating` does. A copy that knew only
+  // the estimator would call a perfectly saveable pipeline invalid, in the surface that auto-opens
+  // a modal over the board.
+  it('accepts a gated step preceded by a task-reassessor instead of an estimator', () => {
+    const measured = builtin(['coder', 'task-reassessor', 'human-review'], {
+      gating: [null, null, { enabled: true, minRisk: 0.6, onMissingEstimate: 'run' }],
+    })
+    const { hasIssues } = scan([measured])
+    expect(hasIssues.value).toBe(false)
+  })
+
   // The regression this pins: the advisory carried its own "only a companion may be gated" rule,
   // so when the engine generalised gating to `BUILTIN_GATABLE_KINDS` the shipped `pl_simple`
   // ("Adaptive build" — an estimate-gated `architect`) was reported invalid in EVERY workspace.

package/app/composables/usePipelineHealth.ts

@@ -1,13 +1,10 @@
 import { computed } from 'vue'
 import type { Pipeline } from '~/types/domain'
 import type { StepGating } from '~/types/consensus'
-import { isBuiltinGatableKind } from '@cat-factory/contracts'
+import { isBuiltinGatableKind, producesTaskEstimate } from '@cat-factory/contracts'
 import { COMPANION_FOR_PRODUCER, isKnownAgentKind, isProducerCompanion } from '~/utils/catalog'
 import { usePipelinesStore } from '~/stores/pipelines'
 
-/** Estimate-gating consults a `task-estimator` step (mirrors the backend constant). */
-const TASK_ESTIMATOR_KIND = 'task-estimator'
-
 export type PipelineProblemType = 'unknown-kind' | 'shape' | 'outdated' | 'retired'
 
 export interface PipelineProblem {
@@ -137,9 +134,11 @@ function skipAxisProblem(
 }
 
 /**
- * Estimate gating: the shared skip-axis rules, plus the two specific to an estimate — at least one
- * axis threshold (with none the step would ALWAYS skip) and an enabled task-estimator earlier in
- * the chain (or the gate has nothing to consult). Mirrors `assertValidGating`.
+ * Estimate gating: the shared skip-axis rules, plus the two specific to an estimate: at least one
+ * axis threshold (with none the step would ALWAYS skip) and an enabled step that PRODUCES an
+ * estimate earlier in the chain (or the gate has nothing to consult). Mirrors `assertValidGating`,
+ * through the same `producesTaskEstimate` predicate, so neither surface can drift from the other
+ * about which kinds count.
  */
 function gatingProblem(p: Pipeline): string | null {
   const gating = p.gating
@@ -161,9 +160,9 @@ function gatingProblem(p: Pipeline): string | null {
     }
     const hasEstimator = kinds
       .slice(0, i)
-      .some((k, j) => k === TASK_ESTIMATOR_KIND && isEnabledAt(p, j))
+      .some((k, j) => producesTaskEstimate(k) && isEnabledAt(p, j))
     if (!hasEstimator) {
-      return `Step '${kind}' is gated on the estimate but no enabled '${TASK_ESTIMATOR_KIND}' runs before it.`
+      return `Step '${kind}' is gated on the estimate but no step that produces one runs before it.`
     }
   }
   return null

package/app/composables/useSingleFlight.spec.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest'
+import { useSingleFlight } from '~/composables/useSingleFlight'
+
+describe('useSingleFlight', () => {
+  it('joins concurrent callers of one key onto a single call', async () => {
+    const fn = vi.fn(() => Promise.resolve('answer'))
+    const flight = useSingleFlight<string, string>()
+
+    const [a, b] = await Promise.all([flight.run('k', fn), flight.run('k', fn)])
+    expect(fn).toHaveBeenCalledTimes(1)
+    expect([a, b]).toEqual(['answer', 'answer'])
+  })
+
+  it('keeps different keys apart', async () => {
+    const fn = vi.fn((k: string) => Promise.resolve(k))
+    const flight = useSingleFlight<string, string>()
+
+    await Promise.all([flight.run('a', () => fn('a')), flight.run('b', () => fn('b'))])
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  it('coalesces rather than caches: a later call runs again', async () => {
+    const fn = vi.fn(() => Promise.resolve('answer'))
+    const flight = useSingleFlight<string, string>()
+
+    await flight.run('k', fn)
+    expect(flight.isRunning('k')).toBe(false)
+    await flight.run('k', fn)
+    expect(fn).toHaveBeenCalledTimes(2)
+  })
+
+  it('gives every joiner the same failure, and lets the next caller retry', async () => {
+    const fn = vi.fn(() => Promise.reject(new Error('boom')))
+    const flight = useSingleFlight<string, string>()
+
+    const results = await Promise.allSettled([flight.run('k', fn), flight.run('k', fn)])
+    expect(results.map((r) => r.status)).toEqual(['rejected', 'rejected'])
+    expect(fn).toHaveBeenCalledTimes(1)
+
+    await expect(flight.run('k', () => Promise.resolve('ok'))).resolves.toBe('ok')
+  })
+})

package/app/composables/useSingleFlight.ts

@@ -0,0 +1,37 @@
+/**
+ * Coalesce concurrent calls that ask for the SAME thing onto one request.
+ *
+ * Panel loads are the case this exists for: two openers routinely fire in the same tick (a window
+ * and the shell it mounts in, a deep link plus the click that follows it, a tab restoring its own
+ * state), and each fired its own fetch of the heaviest read on that surface. The second answer is
+ * byte-for-byte the first, so the only thing the duplicate adds is load and a second chance to
+ * land out of order.
+ *
+ * The in-flight entry is dropped when the promise SETTLES, so a later call re-fetches: this
+ * coalesces concurrent work, it does not cache the answer. A rejection propagates to every joiner,
+ * which is what makes joining equivalent to having asked.
+ *
+ * It does NOT replace a store's load-ordering ticket. Coalescing removes the duplicates a single
+ * key can produce; a ticket settles which of two loads issued at different times may commit.
+ */
+export function useSingleFlight<K, T>() {
+  const inFlight = new Map<K, Promise<T>>()
+
+  /** Run `fn` for `key`, or join the call already running for it. */
+  function run(key: K, fn: () => Promise<T>): Promise<T> {
+    const pending = inFlight.get(key)
+    if (pending) return pending
+    const promise = fn().finally(() => {
+      inFlight.delete(key)
+    })
+    inFlight.set(key, promise)
+    return promise
+  }
+
+  /** Whether a call for `key` is currently running. */
+  function isRunning(key: K): boolean {
+    return inFlight.has(key)
+  }
+
+  return { run, isRunning }
+}

package/app/composables/useStepApproval.ts

@@ -23,6 +23,11 @@ export function useStepApproval(opts: {
   approvalId: () => string | null
   approvalPending: () => boolean
   companionExceeded: () => boolean
+  /**
+   * Whether the cached run carries the step's captured prose rather than the board snapshot's
+   * projection of it (`ExecutionInstance.projected`). Gates {@link canEditProposal}: see there.
+   */
+  runIsWhole: () => boolean
   close: () => void
 }) {
   const execution = useExecutionStore()
@@ -138,7 +143,20 @@ export function useStepApproval(opts: {
     }
   }
 
+  /**
+   * Whether "approve with corrections" can be ENTERED. The editor seeds itself from the step's own
+   * prose, and the board snapshot WITHHOLDS that prose: an instance is a lean projection until the
+   * overlay's whole-run read lands (`projectExecutionForBoard`, `ExecutionStore.ensureFull`). Under
+   * a projection `step.output` is `undefined`, so entering edit mode would seed an EMPTY draft, and
+   * approving it would replace the agent's proposal with nothing. The reader states the fetch's
+   * pending/failed state on its own (`RunDetailLoadState`), so this withholds the verb rather than
+   * explaining itself twice.
+   */
+  const canEditProposal = computed(() => opts.runIsWhole())
+
   function startEditing() {
+    // Refused rather than clamped: seeding an empty draft is the data loss this guards.
+    if (!canEditProposal.value) return
     draftProposal.value = opts.step()?.output ?? ''
     editing.value = true
     // Editing and the review/reject path are mutually exclusive — clear the other.
@@ -226,6 +244,7 @@ export function useStepApproval(opts: {
     draftProposal,
     rejectArmed,
     canRequestChanges,
+    canEditProposal,
     quorum,
     viewerHasApproved,
     approvalWouldClearGate,

package/app/composables/useStepTimer.ts

@@ -1,4 +1,5 @@
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
+import type { Ref } from 'vue'
 import type { PipelineStep } from '~/types/execution'
 
 /**
@@ -55,21 +56,74 @@ export function stepActivityAgoMs(step: PipelineStep | null, nowMs: number): num
 }
 
 /**
- * A shared 1s wall-clock tick for surfaces that render many steps' live durations
- * at once (the pipeline timeline, the inspector run list). One interval drives every
- * step's elapsed label instead of a per-step timer. Stays `0` until mounted so the
+ * One wall-clock ticker per interval, shared by every caller and running only while at least one
+ * of them WANTS it. Keyed by interval because the surfaces genuinely differ (a 1s elapsed clock,
+ * the outcome card's 30s one) and two intervals cannot share a timer.
+ *
+ * Both halves were per-caller before, and both cost: `useStepTimer` creates a tick per invocation
+ * against its own one-interval intent, so N mounted `StepRunMeta`s meant N independent 1s timers;
+ * and the timer ran for the component's whole mounted lifetime whether or not anything was
+ * running, so a board of finished runs woke the main thread once a second to recompute labels that
+ * are frozen by definition.
+ */
+const tickers = new Map<
+  number,
+  { now: Ref<number>; users: number; timer?: ReturnType<typeof setInterval> }
+>()
+
+function tickerFor(intervalMs: number) {
+  let ticker = tickers.get(intervalMs)
+  if (!ticker) {
+    ticker = { now: ref(0), users: 0 }
+    tickers.set(intervalMs, ticker)
+  }
+  return ticker
+}
+
+function acquireTicker(intervalMs: number) {
+  const ticker = tickerFor(intervalMs)
+  if (++ticker.users === 1) {
+    // Stamp on the way in: a caller that subscribes between ticks must not read the stale
+    // value the last one left behind (or the 0 of a ticker nothing has ever run).
+    ticker.now.value = Date.now()
+    ticker.timer = setInterval(() => (ticker.now.value = Date.now()), intervalMs)
+  }
+  return ticker.now
+}
+
+function releaseTicker(intervalMs: number) {
+  const ticker = tickers.get(intervalMs)
+  if (!ticker || ticker.users === 0) return
+  if (--ticker.users === 0) {
+    clearInterval(ticker.timer)
+    ticker.timer = undefined
+  }
+}
+
+/**
+ * A shared wall-clock tick for surfaces that render live durations (the pipeline timeline, the
+ * inspector run list, a step's elapsed clock). Reads `0` until something is subscribed, so the
  * first paint never reads a stale time.
+ *
+ * `active` gates the SUBSCRIPTION: pass it when the surface only needs a clock some of the time
+ * (a step's timer needs one exactly while the step runs), and the shared timer stops as soon as
+ * the last interested caller stops asking. Omitted means "for as long as this component is
+ * mounted", which is what a surface rendering many steps at once wants.
  */
-export function useNowTick(intervalMs = 1000) {
-  const now = ref(0)
-  let timer: ReturnType<typeof setInterval> | undefined
+export function useNowTick(intervalMs = 1000, active?: () => boolean) {
+  const now = tickerFor(intervalMs).now
+  let subscribed = false
+  function want(on: boolean) {
+    if (on === subscribed) return
+    subscribed = on
+    if (on) acquireTicker(intervalMs)
+    else releaseTicker(intervalMs)
+  }
   onMounted(() => {
-    now.value = Date.now()
-    timer = setInterval(() => (now.value = Date.now()), intervalMs)
-  })
-  onUnmounted(() => {
-    if (timer) clearInterval(timer)
+    if (active) watchEffect(() => want(active()))
+    else want(true)
   })
+  onUnmounted(() => want(false))
   return now
 }
 
@@ -84,12 +138,14 @@ export function useStepTimer(opts: {
   runFailed: () => boolean
   failureAt: () => number | null | undefined
 }) {
-  const nowTick = useNowTick()
-
   // A step that is finished, failed, or parked on a human is not actively
   // executing — no ticking clock or spinner. `pausedAt` is the "waiting on input" freeze.
   const isRunning = computed(() => stepIsRunning(opts.step(), opts.runFailed()))
 
+  // Subscribe to the SHARED 1s clock, and only while this step is actually running: every value
+  // below freezes at the step's own end stamp otherwise, so a tick would recompute nothing.
+  const nowTick = useNowTick(1000, () => isRunning.value)
+
   /** Elapsed/total execution time in ms — null until the step has started. */
   const durationMs = computed(() =>
     stepDurationMs(opts.step(), nowTick.value, opts.runFailed(), opts.failureAt()),

package/app/composables/useUpsertList.spec.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { computed } from 'vue'
 import { useUpsertList } from '~/composables/useUpsertList'
 
 interface Item {
@@ -63,6 +64,78 @@ describe('useUpsertList', () => {
     expect(items.value).toHaveLength(2)
   })
 
+  // Lookups run off a lazily-rebuilt key -> position map. Every write that MOVES an existing
+  // position has to invalidate it, and so does a caller replacing `items` wholesale (which the
+  // returned ref deliberately allows). A stale index answers with the wrong row, so these assert
+  // the identity of what comes back, not just that something did.
+  describe('key index coherence', () => {
+    it('answers correctly after a prepend has shifted every later position', () => {
+      const { upsert, get, indexOf } = useUpsertList<Item>({ key: (x) => x.id, prepend: true })
+      upsert({ id: 'a', v: 1 })
+      expect(indexOf('a')).toBe(0)
+      upsert({ id: 'b', v: 2 })
+      expect(indexOf('a')).toBe(1)
+      expect(get('a')).toEqual({ id: 'a', v: 1 })
+    })
+
+    it('answers correctly after a removal has shifted every later position', () => {
+      const { upsert, remove, get, indexOf } = useUpsertList<Item>({ key: (x) => x.id })
+      upsert({ id: 'a', v: 1 })
+      upsert({ id: 'b', v: 2 })
+      upsert({ id: 'c', v: 3 })
+      expect(indexOf('c')).toBe(2)
+      remove('a')
+      expect(indexOf('c')).toBe(1)
+      expect(get('b')).toEqual({ id: 'b', v: 2 })
+      expect(get('a')).toBeUndefined()
+    })
+
+    it('answers correctly after the caller replaces the list wholesale', () => {
+      const { items, upsert, get } = useUpsertList<Item>({ key: (x) => x.id })
+      upsert({ id: 'a', v: 1 })
+      items.value = [
+        { id: 'b', v: 2 },
+        { id: 'a', v: 7 },
+      ]
+      expect(get('a')).toEqual({ id: 'a', v: 7 })
+      expect(get('b')).toEqual({ id: 'b', v: 2 })
+    })
+
+    // The index is a plain Map, so a reader answered out of an ALREADY-FRESH one depends on
+    // nothing the write it is waiting for touches: an append leaves `items.value` the same array,
+    // so a `computed` that missed on a key would never re-run. That is invisible in the store
+    // that has one reader per key today and a bug the moment a second appears, which is why it is
+    // pinned on the composable rather than on any caller.
+    it('re-runs a computed that MISSED on a key when that key is later appended', () => {
+      const { upsert, get } = useUpsertList<Item>({ key: (x) => x.id })
+      upsert({ id: 'a', v: 1 })
+      const wanted = computed(() => get('b'))
+      expect(wanted.value).toBeUndefined()
+
+      upsert({ id: 'b', v: 2 })
+      expect(wanted.value).toEqual({ id: 'b', v: 2 })
+    })
+
+    it('re-runs a computed whose item moved under a prepend', () => {
+      const { upsert, indexOf } = useUpsertList<Item>({ key: (x) => x.id, prepend: true })
+      upsert({ id: 'a', v: 1 })
+      const position = computed(() => indexOf('a'))
+      expect(position.value).toBe(0)
+
+      upsert({ id: 'b', v: 2 })
+      expect(position.value).toBe(1)
+    })
+
+    it('answers correctly after hydrate replaces the list', () => {
+      const { upsert, hydrate, get } = useUpsertList<Item>({ key: (x) => x.id })
+      upsert({ id: 'a', v: 1 })
+      expect(get('a')).toEqual({ id: 'a', v: 1 })
+      hydrate([{ id: 'b', v: 2 }])
+      expect(get('a')).toBeUndefined()
+      expect(get('b')).toEqual({ id: 'b', v: 2 })
+    })
+  })
+
   it('seeds from initial without aliasing the caller array', () => {
     const seed: Item[] = [{ id: 'a', v: 1 }]
     const { items, upsert } = useUpsertList<Item>({ key: (x) => x.id, initial: seed })

package/app/composables/useUpsertList.ts

@@ -28,20 +28,66 @@ export function useUpsertList<T>(opts: {
 } {
   const items = ref<T[]>(opts.initial ? [...opts.initial] : []) as Ref<T[]>
 
+  /**
+   * key -> position, rebuilt LAZILY.
+   *
+   * Every operation here was a `findIndex`, so a store's live-event path scanned its whole list
+   * per event and each `get` scanned it again. The map is invalidated rather than maintained
+   * because the two structural writes that move existing positions (a prepend, a removal) shift
+   * every later index, and a burst of them must not pay a rebuild each: whoever reads next pays
+   * for one. `indexedFor` also catches a caller REPLACING `items` wholesale, which the returned
+   * ref deliberately allows.
+   */
+  let index = new Map<unknown, number>()
+  let indexedFor: T[] | null = null
+
+  function reindex(): Map<unknown, number> {
+    // Track the array's LENGTH on every path, the fresh-index fast path included. The Map is
+    // plain, so a reader answered out of an already-fresh index would otherwise depend on nothing
+    // but the `items` ref, and an in-place append leaves that ref's value the same array: a
+    // computed that MISSED on a key would never re-run when the item it was waiting for arrives.
+    // `length` is the dependency the `findIndex` this replaced established, and it moves on every
+    // write that can turn a miss into a hit (push, unshift, splice) or shift a hit's position.
+    // A replace in place moves neither, and a reader that resolved an item already tracks its
+    // own index through the `items.value[i]` read below.
+    void items.value.length
+    if (indexedFor === items.value) return index
+    index = new Map(items.value.map((item, i) => [opts.key(item), i]))
+    indexedFor = items.value
+    return index
+  }
+
+  /** Mark the index stale after a write that moved existing positions. */
+  function invalidate() {
+    indexedFor = null
+  }
+
   function indexOf(keyValue: unknown): number {
-    return items.value.findIndex((x) => opts.key(x) === keyValue)
+    return reindex().get(keyValue) ?? -1
   }
 
   function upsert(item: T) {
-    const i = indexOf(opts.key(item))
-    if (i >= 0) items.value[i] = item
-    else if (opts.prepend) items.value.unshift(item)
-    else items.value.push(item)
+    const key = opts.key(item)
+    const i = indexOf(key)
+    if (i >= 0) {
+      // A replace in place moves nothing, so the index stays correct.
+      items.value[i] = item
+    } else if (opts.prepend) {
+      items.value.unshift(item)
+      invalidate()
+    } else {
+      // An append is the one structural write that moves nothing already indexed.
+      items.value.push(item)
+      if (indexedFor === items.value) index.set(key, items.value.length - 1)
+    }
   }
 
   function remove(keyValue: unknown) {
     const i = indexOf(keyValue)
-    if (i >= 0) items.value.splice(i, 1)
+    if (i >= 0) {
+      items.value.splice(i, 1)
+      invalidate()
+    }
   }
 
   function get(keyValue: unknown): T | undefined {

package/app/composables/useViewport.ts

@@ -1,4 +1,9 @@
-import { useBreakpoints, breakpointsTailwind, useMediaQuery } from '@vueuse/core'
+import {
+  breakpointsTailwind,
+  createSharedComposable,
+  useBreakpoints,
+  useMediaQuery,
+} from '@vueuse/core'
 
 /**
  * Single source of truth for responsive / input-modality decisions across the SPA.
@@ -18,11 +23,16 @@ import { useBreakpoints, breakpointsTailwind, useMediaQuery } from '@vueuse/core
  * but which can still be finger-panned. Use it for behaviour that must work the
  * moment a finger is on the glass (the board's one-finger pan); use `isTouch` for
  * the dominant-modality choices (hit-target sizing).
+ *
+ * SHARED, as the "single source of truth" above says: every caller gets the same three refs and
+ * the same three media-query listeners. Plain per-call composition attached a fresh listener set
+ * per calling component, so the layout shell, the board canvas and every responsive panel each
+ * registered their own copies of queries that can only ever agree.
  */
-export function useViewport() {
+export const useViewport = createSharedComposable(() => {
   const breakpoints = useBreakpoints(breakpointsTailwind)
   const isCompact = breakpoints.smaller('lg')
   const isTouch = useMediaQuery('(pointer: coarse)')
   const hasTouch = useMediaQuery('(any-pointer: coarse)')
   return { isCompact, isTouch, hasTouch }
-}
+})

package/app/stores/consensus.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { ConsensusSession } from '~/types/consensus'
 import { useWorkspaceStore } from '~/stores/workspace'
+import { useSingleFlight } from '~/composables/useSingleFlight'
 
 /**
  * Consensus session state. A consensus-enabled step runs a multi-model process (panel /
@@ -18,6 +19,8 @@ export const useConsensusStore = defineStore('consensus', () => {
   const sessions = ref<Record<string, ConsensusSession | null>>({})
   /** Block ids whose session is currently being fetched. */
   const loading = ref<Set<string>>(new Set())
+  /** One in-flight fetch per block: the window and its opener both load on open. */
+  const loads = useSingleFlight<string, void>()
 
   function sessionFor(blockId: string): ConsensusSession | null {
     return sessions.value[blockId] ?? null
@@ -40,7 +43,11 @@ export const useConsensusStore = defineStore('consensus', () => {
   }
 
   /** Load the latest session for a block (window open / reload). Best-effort. */
-  async function load(blockId: string): Promise<void> {
+  function load(blockId: string): Promise<void> {
+    return loads.run(blockId, () => fetchSession(blockId))
+  }
+
+  async function fetchSession(blockId: string): Promise<void> {
     const wsId = workspace.workspaceId
     if (!wsId) return
     loading.value = new Set(loading.value).add(blockId)

package/app/stores/docInterview.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { DocInterviewSession } from '~/types/domain'
 import { useWorkspaceStore } from '~/stores/workspace'
+import { useSingleFlight } from '~/composables/useSingleFlight'
 
 /**
  * Interactive document-interview sessions (WS5), keyed by their anchor BLOCK id. Loaded on
@@ -18,6 +19,8 @@ export const useDocInterviewStore = defineStore('docInterview', () => {
   const byBlock = ref<Record<string, DocInterviewSession>>({})
   /** True while a window action (continue/proceed) is resuming the run. */
   const resuming = ref(false)
+  /** One in-flight fetch per block: the window and its opener both load on open. */
+  const loads = useSingleFlight<string, void>()
 
   function forBlock(blockId: string): DocInterviewSession | null {
     return byBlock.value[blockId] ?? null
@@ -31,7 +34,13 @@ export const useDocInterviewStore = defineStore('docInterview', () => {
   }
 
   /** Re-fetch one block's session (the interview window's load path). */
-  async function load(blockId: string) {
+  function load(blockId: string): Promise<void> {
+    return loads.run(blockId, () => fetchSession(blockId))
+  }
+
+  // Out-of-order results need no ticket here: `upsert` is monotonic by the session's own
+  // `updatedAt`, so a slow fetch resolving after a live push (or after a newer load) is dropped.
+  async function fetchSession(blockId: string) {
     if (!workspace.workspaceId) return
     const session = await api.getDocInterview(workspace.workspaceId, blockId)
     if (session) upsert(session)