@cat-factory/app 0.82.1 → 0.83.0

package/app/components/initiative/InitiativePlanningWindow.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+// The interactive-planning Q&A window (slice 2) — the dedicated view of the initiative
+// INTERVIEWER gate. While the planning run is parked, the interviewer's clarifying questions
+// (pending `qa` entries with an empty answer) are shown here; the human answers them, then
+// either CONTINUES (the interviewer re-runs and may ask follow-ups) or PROCEEDS (skip
+// remaining questions — the interviewer converges and the run advances to the analyst/planner).
+// Opened via the universal result-view host: from the inspector / card
+// (`ui.openInitiativePlanning`) or as the interviewer step's result view. Live `initiative`
+// stream events patch the store, so an open window follows the interview as it progresses.
+import { computed, reactive, watch } from 'vue'
+import { INITIATIVE_STATUS_LABEL_KEYS } from '~/utils/initiative'
+
+const board = useBoardStore()
+const initiatives = useInitiativesStore()
+const { t } = useI18n()
+
+const { open, blockId, close } = useResultView('initiative-planning', {
+  onOpen: (id) => void initiatives.load(id),
+})
+
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+const initiative = computed(() => (blockId.value ? initiatives.forBlock(blockId.value) : null))
+
+/** Every interview exchange, with a stable key for the list + draft map. */
+const questions = computed(() =>
+  (initiative.value?.qa ?? []).map((q, i) => ({ ...q, key: q.id ?? `q-${i}` })),
+)
+const pending = computed(() => questions.value.filter((q) => !(q.answer ?? '').trim()))
+/** The interview converged (or never started with a model): nothing left to answer. */
+const converged = computed(() => initiative.value?.interview?.status === 'done')
+
+// Per-question answer drafts, seeded from the entity and refreshed as new rounds arrive
+// without clobbering an answer the human is mid-edit on.
+const drafts = reactive<Record<string, string>>({})
+watch(
+  questions,
+  (list) => {
+    for (const q of list) {
+      if (!(q.key in drafts)) drafts[q.key] = q.answer ?? ''
+    }
+  },
+  { immediate: true },
+)
+
+const resuming = computed(() => initiatives.resuming)
+/** Continue is meaningful once every pending question has a drafted answer. */
+const allAnswered = computed(() => pending.value.every((q) => drafts[q.key]?.trim()))
+
+/** Persist one answer if its draft differs from what's recorded. */
+async function persist(q: { id?: string; key: string; answer?: string }) {
+  const id = q.id
+  if (!id || !blockId.value) return
+  const next = (drafts[q.key] ?? '').trim()
+  if (!next || next === (q.answer ?? '').trim()) return
+  await initiatives.answerQuestion(blockId.value, id, next)
+}
+
+/** Flush all dirty drafts, then run a window action (continue / proceed). */
+async function flushThen(action: (id: string) => Promise<unknown>) {
+  if (!blockId.value) return
+  for (const q of questions.value) await persist(q)
+  await action(blockId.value)
+}
+
+const onContinue = () => flushThen((id) => initiatives.continuePlanning(id))
+const onProceed = () => flushThen((id) => initiatives.proceedPlanning(id))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex max-h-[100dvh] items-stretch justify-center bg-slate-950/70 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div
+        class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
+        data-testid="initiative-planning-window"
+      >
+        <!-- Header -->
+        <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">
+          <span
+            class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-500/15 text-indigo-300"
+          >
+            <UIcon name="i-lucide-messages-square" class="h-4 w-4" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-sm font-semibold text-slate-100">
+              {{ initiative?.title ?? block?.title ?? t('initiative.planning.title') }}
+            </h2>
+            <p class="truncate text-[11px] text-slate-400">
+              {{ t('initiative.planning.subtitle') }}
+            </p>
+          </div>
+          <UBadge v-if="initiative" color="primary" variant="subtle" size="sm">
+            {{ t(INITIATIVE_STATUS_LABEL_KEYS[initiative.status]) }}
+          </UBadge>
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            @click="close"
+          >
+            <UIcon name="i-lucide-x" class="h-4 w-4" />
+          </button>
+        </header>
+
+        <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+          <!-- No entity yet -->
+          <div
+            v-if="!initiative"
+            class="flex h-full flex-col items-center justify-center gap-2 text-center text-slate-400"
+          >
+            <UIcon name="i-lucide-messages-square" class="h-8 w-8 opacity-40" />
+            <p class="text-sm">{{ t('initiative.planning.empty') }}</p>
+          </div>
+
+          <template v-else>
+            <p class="mb-4 text-[13px] leading-relaxed text-slate-300">
+              {{ t('initiative.planning.intro') }}
+            </p>
+
+            <!-- Converged / no pending questions -->
+            <div
+              v-if="converged || questions.length === 0"
+              class="rounded-lg border border-slate-800 bg-slate-950/40 p-4 text-center text-[13px] text-slate-400"
+              data-testid="initiative-planning-converged"
+            >
+              {{ t('initiative.planning.converged') }}
+            </div>
+
+            <!-- Interview questions -->
+            <ul v-else class="space-y-4">
+              <li
+                v-for="q in questions"
+                :key="q.key"
+                class="rounded-lg border border-slate-800 bg-slate-950/40 p-3"
+                data-testid="initiative-planning-question"
+              >
+                <p class="mb-2 text-[13px] font-medium text-slate-200">{{ q.question }}</p>
+                <UTextarea
+                  v-model="drafts[q.key]"
+                  :rows="2"
+                  autoresize
+                  :placeholder="t('initiative.planning.answerPlaceholder')"
+                  class="w-full"
+                  data-testid="initiative-planning-answer"
+                  @blur="persist(q)"
+                />
+              </li>
+            </ul>
+          </template>
+        </div>
+
+        <!-- Action rail -->
+        <footer
+          v-if="initiative && !converged && questions.length > 0"
+          class="flex items-center justify-between gap-3 border-t border-slate-800 px-5 py-3"
+        >
+          <p class="text-[11px] text-slate-500">
+            {{ t('initiative.planning.hint') }}
+          </p>
+          <div class="flex items-center gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :loading="resuming"
+              data-testid="initiative-planning-proceed"
+              @click="onProceed"
+            >
+              {{ t('initiative.planning.proceed') }}
+            </UButton>
+            <UButton
+              color="primary"
+              size="sm"
+              :loading="resuming"
+              :disabled="!allAnswered"
+              data-testid="initiative-planning-continue"
+              @click="onContinue"
+            >
+              {{ t('initiative.planning.continue') }}
+            </UButton>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/panels/StepResultViewHost.vue

@@ -24,6 +24,7 @@ import ServiceSpecWindow from '~/components/spec/ServiceSpecWindow.vue'
 import FollowUpWindow from '~/components/followUp/FollowUpWindow.vue'
 import MergerResultView from '~/components/panels/MergerResultView.vue'
 import InitiativeTrackerWindow from '~/components/initiative/InitiativeTrackerWindow.vue'
+import InitiativePlanningWindow from '~/components/initiative/InitiativePlanningWindow.vue'
 
 const ui = useUiStore()
 
@@ -57,6 +58,7 @@ const STEP_RESULT_VIEWS: Record<string, Component> = {
   // caveats. Opened from the initiative card / inspector (`ui.openInitiativeTracker`) and
   // as the planner step's result view.
   'initiative-tracker': InitiativeTrackerWindow,
+  'initiative-planning': InitiativePlanningWindow,
 }
 
 const active = computed<Component | null>(() => {

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

@@ -22,12 +22,22 @@ const status = computed<InitiativeStatus>(() => initiative.value?.status ?? 'pla
 const planningPipeline = computed(() => pipelines.pipelines.find((p) => p.id === 'pl_initiative'))
 const running = computed(() => !!props.block.executionId)
 
+// The interviewer has parked the planning run with questions awaiting answers.
+const awaitingAnswers = computed(
+  () =>
+    initiative.value?.interview?.status === 'awaiting' &&
+    (initiative.value?.qa ?? []).some((q) => !(q.answer ?? '').trim()),
+)
+
 function runPlanning() {
   if (planningPipeline.value) void execution.start(props.block.id, planningPipeline.value)
 }
 function openTracker() {
   ui.openInitiativeTracker(props.block.id)
 }
+function openPlanning() {
+  ui.openInitiativePlanning(props.block.id)
+}
 
 const progress = computed(() => initiativeProgress(initiative.value?.items))
 </script>
@@ -48,6 +58,17 @@ const progress = computed(() => initiativeProgress(initiative.value?.items))
     </p>
 
     <div class="flex flex-wrap items-center gap-2">
+      <UButton
+        v-if="awaitingAnswers"
+        data-testid="initiative-answer-planning"
+        color="primary"
+        variant="solid"
+        size="sm"
+        icon="i-lucide-messages-square"
+        @click="openPlanning"
+      >
+        {{ t('initiative.inspector.answerPlanning') }}
+      </UButton>
       <UButton
         data-testid="initiative-run-planning"
         color="primary"

package/app/composables/api/initiative.ts

@@ -1,8 +1,11 @@
 import {
+  answerInitiativeQuestionContract,
+  continueInitiativePlanningContract,
   createInitiativeContract,
   getInitiativeByBlockContract,
   getInitiativeContract,
   listInitiativesContract,
+  proceedInitiativePlanningContract,
 } from '@cat-factory/contracts'
 import type { ApiContext } from './context'
 
@@ -24,5 +27,31 @@ export function initiativeApi({ send, ws }: ApiContext) {
     // The tracker window's load path: the initiative anchored to a board block.
     getInitiativeByBlock: (workspaceId: string, blockId: string) =>
       send(getInitiativeByBlockContract, { pathPrefix: ws(workspaceId), pathParams: { blockId } }),
+
+    // Interactive planning (slice 2): answer one interview question (no run resume), then
+    // continue (interviewer re-runs, may ask more) or proceed (skip remaining, plan now).
+    answerInitiativeQuestion: (
+      workspaceId: string,
+      blockId: string,
+      questionId: string,
+      answer: string,
+    ) =>
+      send(answerInitiativeQuestionContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { blockId },
+        body: { questionId, answer },
+      }),
+
+    continueInitiativePlanning: (workspaceId: string, blockId: string) =>
+      send(continueInitiativePlanningContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { blockId },
+      }),
+
+    proceedInitiativePlanning: (workspaceId: string, blockId: string) =>
+      send(proceedInitiativePlanningContract, {
+        pathPrefix: ws(workspaceId),
+        pathParams: { blockId },
+      }),
   }
 }

package/app/composables/useBlockDeletion.ts

@@ -28,10 +28,23 @@ export function useBlockDeletion() {
         : block.level === 'module'
           ? 'module'
           : 'service'
-    return {
-      title: t(`panels.inspector.confirmDelete.${kind}.title`),
-      body: t(`panels.inspector.confirmDelete.${kind}.body`, { name: block.title }),
+    const title = t(`panels.inspector.confirmDelete.${kind}.title`)
+    // For a container (service/module) state the exact cascade size so the blast radius is
+    // explicit — "and everything inside it" hides how many tasks/modules go with it.
+    if (kind === 'module' || kind === 'service') {
+      const count = board.descendantsOf(block.id).length
+      if (count > 0) {
+        return {
+          title,
+          body: t(
+            'panels.inspector.confirmDelete.containerBodyWithCount',
+            { name: block.title, count },
+            count,
+          ),
+        }
+      }
     }
+    return { title, body: t(`panels.inspector.confirmDelete.${kind}.body`, { name: block.title }) }
   }
 
   async function deleteBlock(block: Block | undefined | null): Promise<boolean> {
@@ -54,8 +67,11 @@ export function useBlockDeletion() {
       void recurring.remove(schedule.id)
       return true
     }
-    execution.cancel(block.id)
-    void board.removeBlock(block.id)
+    // Cancelling the run is irreversible, so defer it into the delete's commit: it fires only
+    // once the (deferred) delete actually lands, so an undo within the window leaves a running
+    // pipeline intact rather than restoring a block whose run was already torn down. Target the
+    // workspace the block was deleted from in case the user switched mid-window.
+    void board.removeBlock(block.id, { onCommit: (wsId) => execution.cancel(block.id, wsId) })
     return true
   }
 

package/app/composables/useBlockQueries.ts

@@ -71,6 +71,23 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
     return [...direct, ...nested]
   }
 
+  /**
+   * Every block nested under a container (transitive), excluding the container
+   * itself — the exact set a delete cascades over. Used to state the blast radius
+   * in the delete confirmation. Structural children only (via `parentId`), so a
+   * non-structural epic membership is not counted.
+   */
+  function descendantsOf(id: string): Block[] {
+    const out: Block[] = []
+    const stack = [...childrenOf(id)]
+    while (stack.length > 0) {
+      const b = stack.pop()!
+      out.push(b)
+      stack.push(...childrenOf(b.id))
+    }
+    return out
+  }
+
   /** The top-level service a block ultimately belongs to. */
   function serviceOf(block: Block): Block | undefined {
     let cur: Block | undefined = block
@@ -200,6 +217,7 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
     modulesOf,
     initiativesOf,
     allTasksUnder,
+    descendantsOf,
     serviceOf,
     unmetDeps,
     isRunnable,

package/app/stores/board.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { setActivePinia, createPinia } from 'pinia'
 import type { Block, BlockStatus } from '~/types/domain'
 import { useBoardStore } from '~/stores/board'
@@ -89,6 +89,26 @@ describe('board store read getters', () => {
     ).toEqual(['t2', 't3'])
   })
 
+  it('descendantsOf returns the transitive structural subtree, excluding the root', () => {
+    store.hydrate([
+      frame('f1'),
+      moduleBlock('m1', 'f1'),
+      task('t1', 'f1'),
+      task('t2', 'm1'),
+      frame('f2'),
+      task('t3', 'f2'),
+    ])
+    expect(
+      store
+        .descendantsOf('f1')
+        .map((b) => b.id)
+        .sort(),
+    ).toEqual(['m1', 't1', 't2'])
+    // a leaf task has no descendants; unknown ids are a safe empty
+    expect(store.descendantsOf('t1')).toEqual([])
+    expect(store.descendantsOf('missing')).toEqual([])
+  })
+
   it('epicMembers groups blocks by their epicId (indexed lookup)', () => {
     store.hydrate([
       frame('f1'),
@@ -289,4 +309,179 @@ describe('board store optimistic rollback', () => {
     expect(store.getBlock('t1')?.title).toBe('orig')
     expect(store.getBlock('t1')?.description).toBe('keep')
   })
+
+  it('reparentBlock offers an undo that moves the block back to its previous home', async () => {
+    vi.stubGlobal('useApi', () => ({
+      reparentBlock: async (
+        _ws: string,
+        id: string,
+        body: { parentId: string; position: unknown },
+      ) => task(id, body.parentId, { position: body.position as { x: number; y: number } }),
+    }))
+    interface ToastAction {
+      onClick: () => void
+    }
+    const actions: ToastAction[] = []
+    vi.stubGlobal('useToast', () => ({
+      add: (t: { actions?: ToastAction[] }) => {
+        if (t.actions) actions.push(...t.actions)
+      },
+    }))
+    setActivePinia(createPinia())
+    useWorkspaceStore().workspaceId = 'ws1'
+    const store = useBoardStore()
+    store.hydrate([
+      frame('f1'),
+      moduleBlock('m1', 'f1'),
+      task('t1', 'f1', { position: { x: 1, y: 2 } }),
+    ])
+    await store.reparentBlock('t1', 'm1', { x: 5, y: 6 })
+    expect(store.getBlock('t1')?.parentId).toBe('m1')
+    // the undo action returns the block to its original parent + position
+    expect(actions).toHaveLength(1)
+    actions[0]!.onClick()
+    await vi.waitFor(() => {
+      expect(store.getBlock('t1')?.parentId).toBe('f1')
+      expect(store.getBlock('t1')?.position).toEqual({ x: 1, y: 2 })
+    })
+    // the undo move is itself non-undoable, so no second toast is queued
+    expect(actions).toHaveLength(1)
+  })
+})
+
+describe('board store deferred delete + undo', () => {
+  interface ToastAction {
+    onClick: () => void
+  }
+  /** Build a store with a stubbed api/toast, capturing the undo action offered on delete. */
+  function setup(removeImpl: () => Promise<void>) {
+    const removeSpy = vi.fn(removeImpl)
+    const addSpy = vi.fn()
+    const actions: ToastAction[] = []
+    vi.stubGlobal('useApi', () => ({ removeBlock: removeSpy }))
+    vi.stubGlobal('useToast', () => ({
+      add: (t: { actions?: ToastAction[] }) => {
+        addSpy(t)
+        if (t.actions) actions.push(...t.actions)
+      },
+    }))
+    setActivePinia(createPinia())
+    useWorkspaceStore().workspaceId = 'ws1'
+    return { store: useBoardStore(), removeSpy, addSpy, actions }
+  }
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('hides the subtree immediately but defers the backend delete', () => {
+    const { store, removeSpy } = setup(async () => {})
+    store.hydrate([frame('f1'), moduleBlock('m1', 'f1'), task('t1', 'm1')])
+    store.removeBlock('f1')
+    // the whole subtree disappears at once…
+    expect(store.getBlock('f1')).toBeUndefined()
+    expect(store.getBlock('m1')).toBeUndefined()
+    expect(store.getBlock('t1')).toBeUndefined()
+    // …but nothing is deleted server-side yet.
+    expect(removeSpy).not.toHaveBeenCalled()
+  })
+
+  it('keeps a pending-delete subtree hidden across a coarse refresh, and prunes its edges', () => {
+    const { store } = setup(async () => {})
+    store.hydrate([frame('f1'), task('t1', 'f1'), task('t2', 'f1', { dependsOn: ['t1'] })])
+    store.removeBlock('t1')
+    // A full re-hydrate (e.g. a `board` live event) that still carries the deleted block and
+    // the now-dangling dependency edge must not resurrect either.
+    store.hydrate([frame('f1'), task('t1', 'f1'), task('t2', 'f1', { dependsOn: ['t1'] })])
+    expect(store.getBlock('t1')).toBeUndefined()
+    expect(store.getBlock('t2')?.dependsOn).toEqual([])
+  })
+
+  it('ignores a live upsert for a block awaiting its deferred delete', () => {
+    const { store } = setup(async () => {})
+    store.hydrate([frame('f1'), task('t1', 'f1')])
+    store.removeBlock('t1')
+    store.upsert(task('t1', 'f1', { title: 'resurrected' }))
+    expect(store.getBlock('t1')).toBeUndefined()
+  })
+
+  it('undo cancels the pending delete and restores the subtree', async () => {
+    const { store, removeSpy, actions } = setup(async () => {})
+    store.hydrate([frame('f1'), moduleBlock('m1', 'f1'), task('t1', 'm1')])
+    store.removeBlock('f1')
+    expect(actions).toHaveLength(1)
+    actions[0]!.onClick()
+    expect(store.getBlock('f1')?.id).toBe('f1')
+    expect(store.getBlock('t1')?.id).toBe('t1')
+    // the deferred delete never fires after an undo
+    await vi.runAllTimersAsync()
+    expect(removeSpy).not.toHaveBeenCalled()
+  })
+
+  it('fires the backend delete for the captured workspace once the window elapses', async () => {
+    const { store, removeSpy } = setup(async () => {})
+    store.hydrate([frame('f1')])
+    store.removeBlock('f1')
+    await vi.runAllTimersAsync()
+    expect(removeSpy).toHaveBeenCalledWith('ws1', 'f1')
+  })
+
+  it('restores the subtree and toasts an error if the deferred delete fails', async () => {
+    const { store, addSpy } = setup(() => Promise.reject(new Error('boom')))
+    store.hydrate([frame('f1'), task('t1', 'f1')])
+    store.removeBlock('f1')
+    await vi.runAllTimersAsync()
+    expect(store.getBlock('f1')?.id).toBe('f1')
+    expect(store.getBlock('t1')?.id).toBe('t1')
+    expect(addSpy).toHaveBeenCalledWith(expect.objectContaining({ color: 'error' }))
+  })
+
+  it('does not reattach a failed deferred delete onto a different workspace', async () => {
+    const { store } = setup(() => Promise.reject(new Error('boom')))
+    store.hydrate([frame('f1'), task('t1', 'f1')])
+    store.removeBlock('f1')
+    // The user switches workspace during the undo window; when the delete then fails, the
+    // ws1 subtree must NOT be injected onto the ws2 board now on screen.
+    useWorkspaceStore().workspaceId = 'ws2'
+    await vi.runAllTimersAsync()
+    expect(store.getBlock('f1')).toBeUndefined()
+    expect(store.getBlock('t1')).toBeUndefined()
+  })
+
+  it('runs onCommit with the captured workspace only when the window elapses', async () => {
+    const { store } = setup(async () => {})
+    const onCommit = vi.fn(async () => {})
+    store.hydrate([frame('f1')])
+    store.removeBlock('f1', { onCommit })
+    await vi.runAllTimersAsync()
+    expect(onCommit).toHaveBeenCalledWith('ws1')
+  })
+
+  it('skips onCommit (the irreversible side effect) when the delete is undone', async () => {
+    const { store, actions } = setup(async () => {})
+    const onCommit = vi.fn(async () => {})
+    store.hydrate([frame('f1')])
+    store.removeBlock('f1', { onCommit })
+    actions[0]!.onClick() // undo before the window elapses
+    await vi.runAllTimersAsync()
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('undo re-adds pruned edges without clobbering ones gained during the window', () => {
+    const { store, actions } = setup(async () => {})
+    store.hydrate([
+      frame('f1'),
+      task('t1', 'f1'),
+      task('t2', 'f1', { dependsOn: ['t1'] }),
+      task('t3', 'f1'),
+    ])
+    store.removeBlock('t1')
+    // A live event adds a new dependency to the survivor mid-window (t1's edge was pruned).
+    store.upsert(task('t2', 'f1', { dependsOn: ['t3'] }))
+    actions[0]!.onClick() // undo restores t1 and its edge, keeping the newly-added t3 edge
+    expect(store.getBlock('t2')?.dependsOn.slice().sort()).toEqual(['t1', 't3'])
+  })
 })