@cat-factory/app 0.20.0 → 0.22.0

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Block } from '~/types/domain'
+import { STATUS_META } from '~/utils/catalog'
+
+// The epic inspector body: the full tree of member tasks (which may live under different
+// services/modules), grouped service → module → task. Each task row selects it. Membership
+// is the task's `epicId`; the epic is non-structural, so this reads across the whole board.
+const props = defineProps<{ block: Block }>()
+
+const board = useBoardStore()
+const ui = useUiStore()
+
+const members = computed(() => board.epicMembers(props.block.id))
+const done = computed(() => members.value.filter((m) => m.status === 'done').length)
+
+/** Member tasks grouped by their owning service, then by module (or "direct"). */
+const groups = computed(() => {
+  const byService = new Map<
+    string,
+    { service: Block | undefined; modules: Map<string, { module: Block | undefined; tasks: Block[] }> }
+  >()
+  for (const task of members.value) {
+    const service = board.serviceOf(task)
+    const serviceKey = service?.id ?? '—'
+    if (!byService.has(serviceKey)) byService.set(serviceKey, { service, modules: new Map() })
+    const group = byService.get(serviceKey)!
+    // The task's structural container: a module when its parent is a module, else "direct".
+    const parent = task.parentId ? board.getBlock(task.parentId) : undefined
+    const moduleKey = parent && parent.level === 'module' ? parent.id : '—'
+    if (!group.modules.has(moduleKey)) {
+      group.modules.set(moduleKey, { module: parent?.level === 'module' ? parent : undefined, tasks: [] })
+    }
+    group.modules.get(moduleKey)!.tasks.push(task)
+  }
+  return [...byService.values()]
+})
+</script>
+
+<template>
+  <div>
+    <div class="mb-1 flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Epic tasks
+      </span>
+      <span class="text-[11px] text-slate-500">{{ done }}/{{ members.length }} done</span>
+    </div>
+
+    <div v-if="members.length === 0" class="text-[11px] text-slate-500">
+      No tasks belong to this epic yet. Import an epic's children, or set a task's epic.
+    </div>
+
+    <div v-else class="space-y-2">
+      <div v-for="(group, gi) in groups" :key="gi" class="rounded-md border border-slate-700/60 p-2">
+        <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-slate-300">
+          <UIcon name="i-lucide-box" class="h-3 w-3 text-slate-500" />
+          {{ group.service?.title ?? 'Unassigned' }}
+        </div>
+        <div v-for="(mod, mi) in [...group.modules.values()]" :key="mi" class="pl-1">
+          <div v-if="mod.module" class="text-[10px] uppercase tracking-wide text-slate-500">
+            {{ mod.module.title }}
+          </div>
+          <button
+            v-for="task in mod.tasks"
+            :key="task.id"
+            type="button"
+            class="flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-xs text-slate-200 hover:bg-slate-800"
+            @click="ui.select(task.id)"
+          >
+            <span
+              class="h-2 w-2 shrink-0 rounded-full"
+              :style="{ backgroundColor: STATUS_META[task.status].color }"
+            />
+            <span class="truncate">{{ task.title }}</span>
+            <span class="ml-auto shrink-0 text-[10px] text-slate-500">
+              {{ STATUS_META[task.status].label }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -45,6 +45,13 @@ function setResponsible(userId: string) {
   board.updateBlock(props.block.id, { responsibleProductUserId: userId })
 }
 
+// ---- auto-start dependents -------------------------------------------------
+// Preceding-task toggle: when this task merges, the engine auto-starts the tasks that
+// depend on it (skipping any on an individual-usage model, which can't unlock unattended).
+function setAutoStartDependents(value: boolean) {
+  board.updateBlock(props.block.id, { autoStartDependents: value })
+}
+
 // ---- merge policy preset ---------------------------------------------------
 // Which merge threshold preset governs this task's auto-merge decision + CI-fixer
 // budget. None selected → the workspace default preset. (The old confidence-based
@@ -365,5 +372,23 @@ const resolveOnMergeLabel = computed(() =>
         Unassigned — set a product owner to notify them when requirement review flags this task.
       </div>
     </div>
+
+    <!-- auto-start dependents: when this task merges, start the tasks that depend on it -->
+    <div>
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Auto-start dependents
+        </span>
+        <USwitch
+          size="sm"
+          :model-value="block.autoStartDependents ?? false"
+          @update:model-value="setAutoStartDependents"
+        />
+      </div>
+      <div class="mt-1 text-[11px] text-slate-500">
+        When this task merges, automatically start the tasks that depend on it (once their
+        other dependencies are also done).
+      </div>
+    </div>
   </div>
 </template>

package/app/components/slack/SlackPanel.vue

@@ -25,6 +25,7 @@ const ROUTABLE: { type: NotificationType; label: string }[] = [
   { type: 'requirement_review', label: 'Requirement review' },
   { type: 'clarity_review', label: 'Clarity review' },
   { type: 'release_regression', label: 'Release regression' },
+  { type: 'human_test_ready', label: 'Ready for human testing' },
 ]
 
 /** Notification-role options for a mapped member (drives who gets @-mentioned). */
@@ -41,6 +42,7 @@ const routes = reactive<Record<NotificationType, SlackRoute>>({
   release_regression: { enabled: false, channel: '' },
   // In-app only (not in ROUTABLE), but the map is exhaustive over the type.
   decision_required: { enabled: false, channel: '' },
+  human_test_ready: { enabled: false, channel: '' },
 })
 const mentionsEnabled = ref(false)
 const mapping = ref<SlackMemberMappingEntry[]>([])

package/app/components/tasks/TaskImportModal.vue

@@ -162,6 +162,35 @@ async function doImport() {
     importing.value = false
   }
 }
+
+// Spawn the referenced issue as an EPIC: an epic node + a task per child issue (into the
+// chosen container), with dependency edges seeded from the issues' blocked-by/depends-on
+// links. Needs a container for the child tasks.
+async function doSpawnEpic() {
+  const value = ref_.value.trim()
+  if (!value || !source.value || !containerId.value) return
+  importing.value = true
+  try {
+    const { epic, tasks: spawned } = await tasks.spawnEpic(source.value, value, containerId.value)
+    ref_.value = ''
+    ui.closeTaskImport()
+    ui.select(epic.id)
+    toast.add({
+      title: `Spawned epic "${epic.title}"`,
+      description: `${spawned.length} child task(s) created`,
+      icon: 'i-lucide-layers',
+    })
+  } catch (e) {
+    toast.add({
+      title: 'Could not spawn epic',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    importing.value = false
+  }
+}
 </script>
 
 <template>
@@ -209,8 +238,38 @@ async function doImport() {
           >
             Import
           </UButton>
+          <UButton
+            color="primary"
+            variant="soft"
+            icon="i-lucide-layers"
+            :loading="importing"
+            :disabled="!ref_.trim() || !containerId"
+            :title="
+              containerId
+                ? 'Spawn this epic + its children as a linked task group'
+                : 'Pick a container for the child tasks first'
+            "
+            @click="doSpawnEpic"
+          >
+            As epic
+          </UButton>
         </div>
 
+        <!-- Container for epic children when spawning from a pasted ref (the shared
+             "Create tasks in" selector below covers the search-results case). -->
+        <UFormField
+          v-if="containerItems.length && !freshHits.length && !sourceTasks.length"
+          label="Epic children container"
+          class="w-72"
+        >
+          <USelect
+            v-model="containerId"
+            :items="containerItems"
+            placeholder="Pick a frame or module"
+            class="w-full"
+          />
+        </UFormField>
+
         <!-- Browse: search the tracker by title so an issue can be turned into a
              task without knowing its key. -->
         <UFormField v-if="searchable" label="Search issues">

package/app/composables/api/board.ts

@@ -51,6 +51,16 @@ export function boardApi({ http, ws }: ApiContext) {
       body: { name: string; position?: Position },
     ) => http<Block>(`${ws(workspaceId)}/blocks/${blockId}/modules`, { method: 'POST', body }),
 
+    // Create an epic grouping node (optionally placed under a service/module).
+    addEpic: (
+      workspaceId: string,
+      body: { title: string; description?: string; position: Position; parentId?: string },
+    ) => http<Block>(`${ws(workspaceId)}/epics`, { method: 'POST', body }),
+
+    // Assign a task to an epic, or detach it (epicId: null).
+    assignToEpic: (workspaceId: string, blockId: string, body: { epicId: string | null }) =>
+      http<Block>(`${ws(workspaceId)}/blocks/${blockId}/epic`, { method: 'POST', body }),
+
     updateBlock: (workspaceId: string, blockId: string, body: Partial<Block>) =>
       http<Block>(`${ws(workspaceId)}/blocks/${blockId}`, { method: 'PATCH', body }),
 

package/app/composables/api/humanTest.ts

@@ -0,0 +1,37 @@
+import type { ExecutionInstance } from '~/types/domain'
+import type { ApiContext } from './context'
+
+/**
+ * The human-testing gate's run-driving actions. Each acts on the block's parked `human-test`
+ * step and returns the updated execution instance (the gate state rides on its current step,
+ * and also arrives live via the execution stream).
+ */
+export function humanTestApi({ http, ws }: ApiContext) {
+  const base = (workspaceId: string, blockId: string) =>
+    `${ws(workspaceId)}/blocks/${encodeURIComponent(blockId)}/human-test`
+
+  return {
+    // Confirm the change works: tear the env down and advance the pipeline.
+    confirmHumanTest: (workspaceId: string, blockId: string) =>
+      http<ExecutionInstance>(`${base(workspaceId, blockId)}/confirm`, { method: 'POST' }),
+
+    // Submit findings and request a fix (dispatches the Tester's fixer, then rebuilds the env).
+    requestHumanTestFix: (workspaceId: string, blockId: string, findings: string) =>
+      http<ExecutionInstance>(`${base(workspaceId, blockId)}/request-fix`, {
+        method: 'POST',
+        body: { findings },
+      }),
+
+    // Pull latest main into the PR branch + redeploy (conflict → conflict-resolver).
+    pullMainHumanTest: (workspaceId: string, blockId: string) =>
+      http<ExecutionInstance>(`${base(workspaceId, blockId)}/pull-main`, { method: 'POST' }),
+
+    // Rebuild the ephemeral environment on demand.
+    recreateHumanTestEnv: (workspaceId: string, blockId: string) =>
+      http<ExecutionInstance>(`${base(workspaceId, blockId)}/recreate-env`, { method: 'POST' }),
+
+    // Destroy the ephemeral environment on demand (the run stays parked).
+    destroyHumanTestEnv: (workspaceId: string, blockId: string) =>
+      http<ExecutionInstance>(`${base(workspaceId, blockId)}/destroy-env`, { method: 'POST' }),
+  }
+}

package/app/composables/api/tasks.ts

@@ -82,6 +82,18 @@ export function tasksApi({ http, ws }: ApiContext) {
         body,
       }),
 
+    // Spawn an epic + its children as an epic node + child tasks, with dependency edges
+    // seeded from the issues' blocked-by/depends-on links.
+    spawnEpic: (
+      workspaceId: string,
+      source: TaskSourceKind,
+      body: { ref: string; containerId: string; position?: { x: number; y: number } },
+    ) =>
+      http<{ epic: Block; tasks: Block[] }>(
+        `${ws(workspaceId)}/task-sources/${source}/epics/spawn`,
+        { method: 'POST', body },
+      ),
+
     // ---- issue-tracker selection (workspace-level) ------------------------
     getTrackerSettings: (workspaceId: string) =>
       http<TrackerSettings>(`${ws(workspaceId)}/tracker-settings`),

package/app/composables/useApi.ts

@@ -8,6 +8,7 @@ import { documentsApi } from './api/documents'
 import { executionApi } from './api/execution'
 import { fragmentsApi } from './api/fragments'
 import { githubApi } from './api/github'
+import { humanTestApi } from './api/humanTest'
 import { modelsApi } from './api/models'
 import { notificationsApi } from './api/notifications'
 import { presetsApi } from './api/presets'
@@ -80,6 +81,7 @@ export function useApi() {
     ...documentsApi(ctx),
     ...tasksApi(ctx),
     ...reviewsApi(ctx),
+    ...humanTestApi(ctx),
     ...specApi(ctx),
     ...notificationsApi(ctx),
     ...presetsApi(ctx),

package/app/composables/useBlockQueries.ts

@@ -56,6 +56,19 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
   /** All tasks across every service (used for the dependency picker). */
   const allTasks = computed(() => blocks.value.filter((b) => b.level === 'task'))
 
+  /** Epic grouping nodes (non-structural; group tasks via their `epicId`). */
+  const epics = computed(() => blocks.value.filter((b) => b.level === 'epic'))
+
+  /** The tasks that belong to an epic (anywhere on the board) via their `epicId`. */
+  function epicMembers(epicId: string): Block[] {
+    return blocks.value.filter((b) => b.epicId === epicId)
+  }
+
+  /** The epic a task belongs to, if any. */
+  function epicOf(task: Block): Block | undefined {
+    return task.epicId ? getBlock(task.epicId) : undefined
+  }
+
   /** A task's dependencies that are not yet merged (i.e. block it from running). */
   function unmetDeps(taskId: string) {
     const t = getBlock(taskId)
@@ -139,6 +152,9 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
     getBlock,
     frames,
     allTasks,
+    epics,
+    epicMembers,
+    epicOf,
     childrenOf,
     tasksOf,
     modulesOf,

package/app/composables/useDependencyConnect.ts

@@ -0,0 +1,61 @@
+import { ref } from 'vue'
+
+/**
+ * Drag-to-connect for board dependencies. A small connector handle on a task card calls
+ * {@link start} on pointerdown; we then track the pointer (a live preview line drawn by
+ * `DependencyConnectOverlay`) and, on release over another task card, create the edge
+ * "dropped-on dependsOn dragged-from" — i.e. you drag from the prerequisite onto the task
+ * that should wait for it. Module-level state so the handle and the overlay share one drag.
+ *
+ * Coordinates are client (screen) space, so the overlay is a fixed full-viewport SVG and
+ * the gesture follows pan/zoom for free (the cards move under the cursor, the line tracks
+ * the cursor). Target resolution uses `elementFromPoint` → nearest `[data-block-id]`.
+ */
+export interface ConnectState {
+  sourceId: string
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+const connecting = ref<ConnectState | null>(null)
+
+export function useDependencyConnect() {
+  const board = useBoardStore()
+
+  function onMove(ev: PointerEvent) {
+    if (!connecting.value) return
+    connecting.value.x2 = ev.clientX
+    connecting.value.y2 = ev.clientY
+  }
+
+  async function onUp(ev: PointerEvent) {
+    const state = connecting.value
+    window.removeEventListener('pointermove', onMove)
+    window.removeEventListener('pointerup', onUp)
+    connecting.value = null
+    if (!state) return
+    // Resolve the task under the cursor on release.
+    const el = document.elementFromPoint(ev.clientX, ev.clientY)
+    const card = el?.closest('[data-block-id]') as HTMLElement | null
+    const targetId = card?.getAttribute('data-block-id') ?? null
+    if (!targetId || targetId === state.sourceId) return
+    const target = board.getBlock(targetId)
+    const source = board.getBlock(state.sourceId)
+    if (!target || target.level !== 'task' || !source || source.level !== 'task') return
+    // Dropped-on task depends on the dragged-from (prerequisite) task.
+    await board.toggleDependency(targetId, state.sourceId)
+  }
+
+  /** Begin a connect drag from `sourceId`'s handle. */
+  function start(sourceId: string, ev: PointerEvent) {
+    ev.preventDefault()
+    ev.stopPropagation()
+    connecting.value = { sourceId, x1: ev.clientX, y1: ev.clientY, x2: ev.clientX, y2: ev.clientY }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  return { connecting, start }
+}

package/app/stores/board.ts

@@ -15,8 +15,8 @@ import { useBlockQueries } from '~/composables/useBlockQueries'
 interface RemovalSnapshot {
   /** The removed block + all its descendants, in their original order. */
   removed: Block[]
-  /** Survivors whose `dependsOn` lost an edge to a removed block (originals to restore). */
-  edges: { id: string; dependsOn: string[] }[]
+  /** Survivors whose `dependsOn`/`epicId` lost an edge to a removed block (originals to restore). */
+  edges: { id: string; dependsOn: string[]; epicId: string | null }[]
 }
 
 export const useBoardStore = defineStore('board', () => {
@@ -97,6 +97,44 @@ export const useBoardStore = defineStore('board', () => {
     return block
   }
 
+  /**
+   * Add an epic grouping node. Epics are non-structural: they group tasks via the tasks'
+   * `epicId`, so this just drops a new `epic`-level block on the board.
+   */
+  async function addEpic(
+    title: string,
+    position: { x: number; y: number },
+    options?: { description?: string; parentId?: string },
+  ): Promise<Block> {
+    const block = await api.addEpic(useWorkspaceStore().requireId(), {
+      title,
+      position,
+      ...(options?.description ? { description: options.description } : {}),
+      ...(options?.parentId ? { parentId: options.parentId } : {}),
+    })
+    upsert(block)
+    return block
+  }
+
+  /** Assign a task to an epic, or detach it (epicId: null). */
+  async function assignToEpic(taskId: string, epicId: string | null) {
+    const t = getBlock(taskId)
+    if (!t) return
+    const prev = t.epicId ?? null
+    t.epicId = epicId // optimistic
+    try {
+      upsert(await api.assignToEpic(useWorkspaceStore().requireId(), taskId, { epicId }))
+    } catch (e) {
+      t.epicId = prev
+      toast.add({
+        title: 'Could not change epic',
+        description: e instanceof Error ? e.message : String(e),
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+    }
+  }
+
   /** Add a module (sub-frame) inside a service. */
   async function addModule(
     serviceId: string,
@@ -171,15 +209,22 @@ export const useBoardStore = defineStore('board', () => {
       }
     }
     const removed = blocks.value.filter((b) => doomed.has(b.id))
-    // Survivors that pointed at a doomed block lose that edge — snapshot the originals.
+    // Survivors that pointed at a doomed block (dependency edge or epic membership) lose
+    // that link — snapshot the originals so a failed delete restores them faithfully.
     const edges = blocks.value
-      .filter((b) => !doomed.has(b.id) && b.dependsOn.some((d) => doomed.has(d)))
-      .map((b) => ({ id: b.id, dependsOn: [...b.dependsOn] }))
+      .filter(
+        (b) =>
+          !doomed.has(b.id) &&
+          (b.dependsOn.some((d) => doomed.has(d)) || (b.epicId != null && doomed.has(b.epicId))),
+      )
+      .map((b) => ({ id: b.id, dependsOn: [...b.dependsOn], epicId: b.epicId ?? null }))
     blocks.value = blocks.value.filter((b) => !doomed.has(b.id))
     for (const b of blocks.value) {
       if (b.dependsOn.some((d) => doomed.has(d))) {
         b.dependsOn = b.dependsOn.filter((d) => !doomed.has(d))
       }
+      // A member of a deleted epic loses its membership (the task itself survives).
+      if (b.epicId != null && doomed.has(b.epicId)) b.epicId = null
     }
     return { removed, edges }
   }
@@ -189,7 +234,10 @@ export const useBoardStore = defineStore('board', () => {
     for (const b of snap.removed) if (!getBlock(b.id)) blocks.value.push(b)
     for (const e of snap.edges) {
       const b = getBlock(e.id)
-      if (b) b.dependsOn = e.dependsOn
+      if (b) {
+        b.dependsOn = e.dependsOn
+        b.epicId = e.epicId
+      }
     }
   }
 
@@ -252,10 +300,23 @@ export const useBoardStore = defineStore('board', () => {
     upsert(await api.updateBlock(useWorkspaceStore().requireId(), id, patch))
   }
 
-  /** Toggle a dependency edge target -> source (target dependsOn source). */
+  /**
+   * Toggle a dependency edge target -> source (target dependsOn source). The backend
+   * rejects an edge that would close a cycle (422) — surface that as a toast rather than
+   * letting it throw unhandled out of a board gesture.
+   */
   async function toggleDependency(targetId: string, sourceId: string) {
     if (targetId === sourceId || !getBlock(targetId)) return
-    upsert(await api.toggleDependency(useWorkspaceStore().requireId(), targetId, { sourceId }))
+    try {
+      upsert(await api.toggleDependency(useWorkspaceStore().requireId(), targetId, { sourceId }))
+    } catch (e) {
+      toast.add({
+        title: 'Could not link tasks',
+        description: e instanceof Error ? e.message : String(e),
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+    }
   }
 
   /** Remove a dependency edge target -> source if it exists. */
@@ -275,6 +336,8 @@ export const useBoardStore = defineStore('board', () => {
     addServiceFromRepo,
     addTask,
     addModule,
+    addEpic,
+    assignToEpic,
     reparentBlock,
     detach,
     reattach,

package/app/stores/humanTest.ts

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { useExecutionStore } from '~/stores/execution'
+import { useWorkspaceStore } from '~/stores/workspace'
+
+/**
+ * Human-testing gate actions. The gate's live state rides on its execution step
+ * (`step.humanTest`) and arrives via the execution stream, so this store holds NO gate
+ * state — it only drives the actions (confirm / request a fix / pull main / recreate /
+ * destroy) and patches the execution store from each response. A per-block `busy` flag lets
+ * the window disable its controls while an action is in flight. Per-workspace; nothing
+ * persisted client-side.
+ */
+export const useHumanTestStore = defineStore('humanTest', () => {
+  const api = useApi()
+  const ws = useWorkspaceStore()
+  const execution = useExecutionStore()
+
+  /** Block ids with an action currently in flight (the window disables its buttons). */
+  const busy = ref<Set<string>>(new Set())
+
+  function isBusy(blockId: string): boolean {
+    return busy.value.has(blockId)
+  }
+
+  async function run(blockId: string, action: () => Promise<unknown>): Promise<void> {
+    const next = new Set(busy.value)
+    next.add(blockId)
+    busy.value = next
+    try {
+      const instance = await action()
+      // The action returns the updated run; patch the store so the window reflects it
+      // immediately (the stream also pushes it, but this avoids a flash of stale state).
+      if (instance && typeof instance === 'object' && 'steps' in instance) {
+        execution.upsert(instance as Parameters<typeof execution.upsert>[0])
+      }
+    } finally {
+      const after = new Set(busy.value)
+      after.delete(blockId)
+      busy.value = after
+    }
+  }
+
+  /** Confirm the change works: tear the env down and advance the pipeline. */
+  function confirm(blockId: string): Promise<void> {
+    return run(blockId, () => api.confirmHumanTest(ws.requireId(), blockId))
+  }
+
+  /** Submit findings and request a fix. */
+  function requestFix(blockId: string, findings: string): Promise<void> {
+    return run(blockId, () => api.requestHumanTestFix(ws.requireId(), blockId, findings))
+  }
+
+  /** Pull latest main into the branch + redeploy. */
+  function pullMain(blockId: string): Promise<void> {
+    return run(blockId, () => api.pullMainHumanTest(ws.requireId(), blockId))
+  }
+
+  /** Rebuild the ephemeral environment. */
+  function recreateEnv(blockId: string): Promise<void> {
+    return run(blockId, () => api.recreateHumanTestEnv(ws.requireId(), blockId))
+  }
+
+  /** Destroy the ephemeral environment (the run stays parked). */
+  function destroyEnv(blockId: string): Promise<void> {
+    return run(blockId, () => api.destroyHumanTestEnv(ws.requireId(), blockId))
+  }
+
+  return { isBusy, confirm, requestFix, pullMain, recreateEnv, destroyEnv }
+})

package/app/stores/tasks.ts

@@ -9,6 +9,7 @@ import type {
   TaskSourceState,
 } from '~/types/domain'
 import { useWorkspaceStore } from '~/stores/workspace'
+import { useBoardStore } from '~/stores/board'
 
 /**
  * Task-source integration state: the trackers the backend offers (and their
@@ -210,6 +211,29 @@ export const useTasksStore = defineStore('tasks', () => {
     return result
   }
 
+  /**
+   * Spawn an epic and its children onto the board: an epic node + a task per child issue
+   * (joined to the epic), with dependency edges seeded from the issues' links. Upserts the
+   * created blocks so the board reflects them immediately (the stream also re-broadcasts).
+   */
+  async function spawnEpic(
+    source: TaskSourceKind,
+    ref: string,
+    containerId: string,
+    position?: { x: number; y: number },
+  ) {
+    const board = useBoardStore()
+    const result = await api.spawnEpic(workspace.requireId(), source, {
+      ref,
+      containerId,
+      ...(position ? { position } : {}),
+    })
+    board.upsert(result.epic)
+    for (const t of result.tasks) board.upsert(t)
+    await loadTasks().catch(() => {})
+    return result
+  }
+
   return {
     available,
     probeError,
@@ -237,5 +261,6 @@ export const useTasksStore = defineStore('tasks', () => {
     search,
     linkToBlock,
     createTaskFromIssue,
+    spawnEpic,
   }
 })