@cat-factory/app 0.20.0 → 0.22.0

package/app/components/board/BoardCanvas.vue

@@ -4,7 +4,9 @@ import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import BlockNode from './nodes/BlockNode.vue'
+import EpicNode from './nodes/EpicNode.vue'
 import TaskDependencyEdges from './TaskDependencyEdges.vue'
+import DependencyConnectOverlay from './DependencyConnectOverlay.vue'
 import { STATUS_META } from '~/utils/catalog'
 import { readDndPayload, blockIdFromEvent } from '~/utils/dnd'
 import { BOARD_FLOW_ID } from '~/composables/useBoardFlow'
@@ -41,15 +43,24 @@ function frameExpanded(id: string) {
   return ui.isFrameExpanded(id) && ui.lod !== 'far'
 }
 
-const nodes = computed(() =>
-  board.frames.map((b) => ({
+const nodes = computed(() => [
+  ...board.frames.map((b) => ({
     id: b.id,
     type: 'block',
     position: b.position,
     draggable: !frameExpanded(b.id),
     data: {},
   })),
-)
+  // Epics are top-level grouping nodes (non-structural), drawn alongside frames and
+  // linked to their member tasks by the dependency-edge overlay.
+  ...board.epics.map((b) => ({
+    id: b.id,
+    type: 'epic',
+    position: b.position,
+    draggable: true,
+    data: {},
+  })),
+])
 
 onNodeDragStop(({ node }) => {
   board.moveBlock(node.id, { x: node.position.x, y: node.position.y })
@@ -149,6 +160,10 @@ async function onDrop(event: DragEvent) {
       <template #node-block="props">
         <BlockNode :id="props.id" />
       </template>
+
+      <template #node-epic="props">
+        <EpicNode :id="props.id" />
+      </template>
     </VueFlow>
 
     <!-- An empty board reads as broken; invite the user to add a service. The
@@ -183,5 +198,8 @@ async function onDrop(event: DragEvent) {
 
     <!-- task dependency arrows, overlaid in screen space -->
     <TaskDependencyEdges />
+
+    <!-- live preview line while drag-to-connecting a dependency -->
+    <DependencyConnectOverlay />
   </div>
 </template>

package/app/components/board/DependencyConnectOverlay.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useDependencyConnect } from '~/composables/useDependencyConnect'
+
+// Draws the live preview line while a dependency drag-to-connect is in progress. Mounted
+// once on the board; reads the shared connect state. Fixed, full-viewport, click-through.
+const { connecting } = useDependencyConnect()
+</script>
+
+<template>
+  <svg
+    v-if="connecting"
+    class="pointer-events-none fixed inset-0 z-50 h-full w-full overflow-visible"
+  >
+    <line
+      :x1="connecting.x1"
+      :y1="connecting.y1"
+      :x2="connecting.x2"
+      :y2="connecting.y2"
+      stroke="#f59e0b"
+      :stroke-width="2"
+      stroke-dasharray="5 4"
+      stroke-opacity="0.9"
+    />
+  </svg>
+</template>

package/app/components/board/TaskDependencyEdges.vue

@@ -15,6 +15,9 @@ const svg = ref<SVGSVGElement | null>(null)
 
 type Seg = { id: string; x1: number; y1: number; x2: number; y2: number; done: boolean }
 const segments = ref<Seg[]>([])
+// Epic→member membership links (distinct style from dependency edges).
+type MemberSeg = { id: string; x1: number; y1: number; x2: number; y2: number }
+const memberSegments = ref<MemberSeg[]>([])
 
 // task → its dependencies, both ends being tasks
 const taskDeps = computed(() => {
@@ -29,6 +32,17 @@ const taskDeps = computed(() => {
   return out
 })
 
+// epic → each of its member tasks (membership, drawn as a soft violet link).
+const epicLinks = computed(() => {
+  const out: { id: string; source: string; target: string }[] = []
+  for (const e of board.epics) {
+    for (const m of board.epicMembers(e.id)) {
+      out.push({ id: `${e.id}__${m.id}`, source: e.id, target: m.id })
+    }
+  }
+  return out
+})
+
 /** Resolve a task's anchor: walk up task → module → service to the first card
  * that's actually rendered (a container may be collapsed). */
 function anchorEl(taskId: string): HTMLElement | null {
@@ -81,6 +95,23 @@ function recompute() {
     })
   }
   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 { pause, resume } = useRafFn(recompute, { immediate: false })
@@ -115,6 +146,20 @@ onBeforeUnmount(pause)
       </marker>
     </defs>
 
+    <!-- epic → member membership links (soft violet, no arrowhead) -->
+    <line
+      v-for="s in memberSegments"
+      :key="s.id"
+      :x1="s.x1"
+      :y1="s.y1"
+      :x2="s.x2"
+      :y2="s.y2"
+      stroke="#8b5cf6"
+      :stroke-width="1.5"
+      stroke-dasharray="2 5"
+      :stroke-opacity="0.5"
+    />
+
     <line
       v-for="s in segments"
       :key="s.id"

package/app/components/board/nodes/EpicNode.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Block } from '~/types/domain'
+
+// Vue Flow passes the node's `id` as a prop. An epic is a NON-structural grouping node:
+// it has no children of its own (tasks join it via their `epicId`), so it renders as a
+// compact card showing the epic title + a roll-up of its member tasks. The dependency-edge
+// overlay draws the links from this card to each member (anchored by `data-block-id`).
+const props = defineProps<{ id: string }>()
+
+const board = useBoardStore()
+const ui = useUiStore()
+
+const block = computed<Block | undefined>(() => board.getBlock(props.id))
+const members = computed(() => board.epicMembers(props.id))
+const total = computed(() => members.value.length)
+const done = computed(() => members.value.filter((m) => m.status === 'done').length)
+const active = computed(() =>
+  members.value.filter((m) => m.status === 'in_progress' || m.status === 'pr_ready').length,
+)
+const selected = computed(() => ui.selectedBlockId === props.id)
+</script>
+
+<template>
+  <div
+    v-if="block"
+    :data-block-id="block.id"
+    class="w-56 cursor-pointer rounded-lg border bg-slate-900/90 px-3 py-2 shadow-lg backdrop-blur transition-colors"
+    :class="
+      selected ? 'border-violet-400 ring-1 ring-violet-400/50' : 'border-violet-500/40'
+    "
+    @click="ui.select(block.id)"
+  >
+    <div class="flex items-center gap-1.5">
+      <UIcon name="i-lucide-layers" class="h-3.5 w-3.5 shrink-0 text-violet-400" />
+      <span class="text-[10px] font-semibold uppercase tracking-wide text-violet-300">Epic</span>
+      <span class="ml-auto text-[10px] text-slate-400">{{ done }}/{{ total }}</span>
+    </div>
+    <div class="mt-1 truncate text-sm font-medium text-slate-100" :title="block.title">
+      {{ block.title }}
+    </div>
+    <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-700/60">
+      <div
+        class="h-full rounded-full bg-violet-500"
+        :style="{ width: total ? `${Math.round((done / total) * 100)}%` : '0%' }"
+      />
+    </div>
+    <div v-if="active" class="mt-1 text-[10px] text-slate-400">{{ active }} active</div>
+    <div v-else-if="total === 0" class="mt-1 text-[10px] text-slate-500">No tasks yet</div>
+  </div>
+</template>

package/app/components/board/nodes/TaskCard.vue

@@ -18,6 +18,10 @@ const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
 const selected = computed(() => ui.selectedBlockId === props.taskId)
 
+// Drag-to-connect: dragging from this card's handle onto another task makes THAT task
+// depend on this one (this is the prerequisite). The composable tracks the gesture.
+const { start: startConnect } = useDependencyConnect()
+
 // ---- dependencies (gate execution order; may point across frames) ----------
 const deps = computed(() =>
   (task.value?.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
@@ -196,6 +200,16 @@ function selectTask() {
         :title="schedule.enabled ? 'Recurring pipeline' : 'Recurring pipeline (paused)'"
       />
       <span class="truncate text-[11px] font-semibold text-slate-100">{{ task.title }}</span>
+      <!-- drag-to-connect handle: drag onto another task to make it depend on this one -->
+      <button
+        type="button"
+        class="nodrag ml-1 shrink-0 cursor-crosshair rounded-full p-0.5 text-slate-500 hover:bg-slate-800 hover:text-amber-400"
+        title="Drag onto another task to make it depend on this one"
+        @pointerdown.stop="startConnect(task.id, $event)"
+        @click.stop
+      >
+        <UIcon name="i-lucide-spline" class="h-3 w-3" />
+      </button>
       <span
         class="ml-auto shrink-0 text-[9px] uppercase tracking-wide"
         :class="

package/app/components/humanTest/HumanTestWindow.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+// Human-testing gate window — the dedicated surface for a `human-test` step (opened via the
+// universal result-view host, the same seam the tester / requirements review use). It reads
+// the gate's live state straight off the execution step (`step.humanTest`, pushed over the
+// stream), surfaces the ephemeral environment URL, and drives the human actions: confirm
+// (pass + tear down + advance), request a fix from findings (the Tester's fixer), pull latest
+// main into the branch + redeploy (conflict → conflict-resolver), recreate, or destroy the env.
+import type { HumanTestEnvironmentStatus, HumanTestStepState } from '~/types/execution'
+import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+
+const board = useBoardStore()
+const execution = useExecutionStore()
+const humanTest = useHumanTestStore()
+
+// Shared seam contract (open/blockId/close + Escape). No `onOpen` loader: the gate state
+// rides on the execution step, pushed over the stream.
+const { open, blockId, instanceId, stepIndex, close } = useResultView('human-test')
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+
+const instance = computed(() =>
+  instanceId.value === null ? null : (execution.getInstance(instanceId.value) ?? null),
+)
+const step = computed(() => {
+  if (instance.value === null || stepIndex.value === null) return null
+  return instance.value.steps[stepIndex.value] ?? null
+})
+const ht = computed<HumanTestStepState | null>(() => step.value?.humanTest ?? null)
+const env = computed(() => ht.value?.environment ?? null)
+const phase = computed(() => ht.value?.phase ?? null)
+const busy = computed(() => (blockId.value ? humanTest.isBusy(blockId.value) : false))
+
+/** Whether the human can act right now (parked awaiting their input, not mid-helper/provision). */
+const awaitingHuman = computed(() => phase.value === 'awaiting_human')
+const working = computed(
+  () =>
+    phase.value === 'provisioning' ||
+    phase.value === 'fixing' ||
+    phase.value === 'resolving_conflicts',
+)
+
+const ENV_STATUS_META: Record<HumanTestEnvironmentStatus, { label: string; color: string }> = {
+  provisioning: { label: 'Provisioning…', color: 'text-amber-300' },
+  ready: { label: 'Ready', color: 'text-emerald-300' },
+  failed: { label: 'Failed', color: 'text-rose-300' },
+  expired: { label: 'Expired', color: 'text-slate-400' },
+  tearing_down: { label: 'Tearing down…', color: 'text-slate-400' },
+  torn_down: { label: 'Destroyed', color: 'text-slate-400' },
+}
+
+const PHASE_LABEL: Record<NonNullable<HumanTestStepState['phase']>, string> = {
+  provisioning: 'Provisioning environment…',
+  awaiting_human: 'Awaiting your validation',
+  fixing: 'Fixer is addressing your findings…',
+  resolving_conflicts: 'Resolving conflicts with main…',
+  passed: 'Passed',
+}
+
+const findings = ref('')
+const showFindings = ref(false)
+
+async function confirm() {
+  if (!blockId.value) return
+  await humanTest.confirm(blockId.value)
+  close()
+}
+async function submitFix() {
+  if (!blockId.value || !findings.value.trim()) return
+  await humanTest.requestFix(blockId.value, findings.value.trim())
+  findings.value = ''
+  showFindings.value = false
+}
+async function pullMain() {
+  if (!blockId.value) return
+  await humanTest.pullMain(blockId.value)
+}
+async function recreate() {
+  if (!blockId.value) return
+  await humanTest.recreateEnv(blockId.value)
+}
+async function destroy() {
+  if (!blockId.value) return
+  await humanTest.destroyEnv(blockId.value)
+}
+
+/** Env actions need a provider (an env is/was present, or it's provisioning) — disabled in degraded mode. */
+const envActionsEnabled = computed(() => env.value !== null && env.value !== undefined)
+
+// The env-management actions are only valid in specific phases; mirror the backend's preconditions
+// so the UI never dispatches an action that would 409 ("No human-test gate is currently awaiting
+// input"). Recreate / pull-main route through `findParked` (parked awaiting the human); destroy
+// routes through `findActive`, which also tolerates an in-flight `provisioning` env so a human can
+// cancel a slow/stuck provision.
+const canManageEnv = computed(() => awaitingHuman.value)
+const canDestroy = computed(
+  () => envActionsEnabled.value && (awaitingHuman.value || phase.value === 'provisioning'),
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex 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"
+      >
+        <!-- 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-amber-500/15 text-amber-300"
+          >
+            <UIcon name="i-lucide-user-check" class="h-4 w-4" />
+          </span>
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-sm font-semibold text-slate-100">
+              Human testing{{ block ? ` — ${block.title}` : '' }}
+            </h2>
+            <p class="truncate text-[11px] text-slate-400">
+              {{ phase ? PHASE_LABEL[phase] : 'Validate the change in a live environment' }}
+            </p>
+          </div>
+          <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="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-4">
+          <div
+            v-if="!ht"
+            class="flex flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+          >
+            <UIcon name="i-lucide-user-check" class="h-8 w-8 opacity-40" />
+            <p class="text-sm">This step hasn't started yet.</p>
+          </div>
+
+          <template v-else>
+            <!-- Environment -->
+            <section class="rounded-lg border border-slate-800 bg-slate-900/60 p-4">
+              <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                Ephemeral environment
+              </h3>
+              <div v-if="env" class="space-y-2">
+                <div class="flex items-center gap-2 text-[13px]">
+                  <UIcon
+                    name="i-lucide-circle-dot"
+                    class="h-3.5 w-3.5"
+                    :class="ENV_STATUS_META[env.status].color"
+                  />
+                  <span :class="ENV_STATUS_META[env.status].color">{{
+                    ENV_STATUS_META[env.status].label
+                  }}</span>
+                </div>
+                <a
+                  v-if="env.url"
+                  :href="env.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="inline-flex items-center gap-1.5 break-all text-[13px] text-sky-300 hover:underline"
+                >
+                  <UIcon name="i-lucide-external-link" class="h-3.5 w-3.5 shrink-0" />
+                  {{ env.url }}
+                </a>
+                <p v-else class="text-[12px] italic text-slate-500">No URL yet.</p>
+                <p v-if="env.expiresAt" class="text-[11px] text-slate-500">
+                  Expires {{ new Date(env.expiresAt).toLocaleString() }}
+                </p>
+              </div>
+              <p v-else class="text-[12px] text-amber-300/90">
+                {{ ht.degradedReason ?? 'No live environment.' }}
+              </p>
+              <p v-if="env && ht.degradedReason" class="mt-2 text-[12px] text-amber-300/90">
+                {{ ht.degradedReason }}
+              </p>
+
+              <!-- Env management -->
+              <div class="mt-3 flex flex-wrap gap-2">
+                <UButton
+                  size="xs"
+                  variant="soft"
+                  color="neutral"
+                  icon="i-lucide-refresh-cw"
+                  :loading="busy"
+                  :disabled="busy || !canManageEnv"
+                  @click="recreate"
+                >
+                  Recreate
+                </UButton>
+                <UButton
+                  size="xs"
+                  variant="soft"
+                  color="neutral"
+                  icon="i-lucide-trash-2"
+                  :disabled="busy || !canDestroy"
+                  @click="destroy"
+                >
+                  Destroy
+                </UButton>
+                <UButton
+                  size="xs"
+                  variant="soft"
+                  color="neutral"
+                  icon="i-lucide-git-merge"
+                  :loading="busy"
+                  :disabled="busy || !canManageEnv"
+                  @click="pullMain"
+                >
+                  Pull main + redeploy
+                </UButton>
+              </div>
+            </section>
+
+            <!-- Working state -->
+            <p
+              v-if="working"
+              class="flex items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] text-slate-300"
+            >
+              <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin text-amber-300" />
+              {{ phase ? PHASE_LABEL[phase] : '' }}
+            </p>
+
+            <!-- Findings / fix -->
+            <section
+              v-if="awaitingHuman"
+              class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+            >
+              <div class="flex items-center justify-between">
+                <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  Found a problem?
+                </h3>
+                <button
+                  class="text-[12px] text-slate-400 hover:text-slate-200"
+                  @click="showFindings = !showFindings"
+                >
+                  {{ showFindings ? 'Cancel' : 'Request a fix' }}
+                </button>
+              </div>
+              <div v-if="showFindings" class="mt-2 space-y-2">
+                <textarea
+                  v-model="findings"
+                  rows="4"
+                  placeholder="Describe what went wrong — the Fixer agent gets this as context, then the environment is rebuilt for re-testing."
+                  class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none"
+                />
+                <UButton
+                  size="sm"
+                  color="warning"
+                  icon="i-lucide-wrench"
+                  :loading="busy"
+                  :disabled="busy || !findings.trim()"
+                  @click="submitFix"
+                >
+                  Send to Fixer
+                </UButton>
+              </div>
+            </section>
+
+            <!-- Rounds history -->
+            <section
+              v-if="ht.rounds && ht.rounds.length"
+              class="rounded-lg border border-slate-800 bg-slate-900/60 p-4"
+            >
+              <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                History ({{ ht.attempts }} round{{ ht.attempts === 1 ? '' : 's' }})
+              </h3>
+              <ol class="space-y-2">
+                <li v-for="(r, i) in ht.rounds" :key="i" class="flex items-start gap-2 text-[12px]">
+                  <UIcon
+                    :name="r.kind === 'fix' ? 'i-lucide-wrench' : 'i-lucide-git-merge'"
+                    class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-400"
+                  />
+                  <div class="min-w-0 flex-1">
+                    <span class="text-slate-200">{{
+                      r.kind === 'fix' ? 'Fix requested' : 'Pulled main'
+                    }}</span>
+                    <span
+                      class="ml-1.5 rounded px-1 text-[10px] uppercase"
+                      :class="
+                        r.outcome === 'completed'
+                          ? 'bg-emerald-500/15 text-emerald-300'
+                          : r.outcome === 'failed'
+                            ? 'bg-rose-500/15 text-rose-300'
+                            : 'bg-slate-500/15 text-slate-300'
+                      "
+                    >
+                      {{ r.outcome ?? 'in progress' }}
+                    </span>
+                    <p v-if="r.findings" class="leading-snug text-slate-400">{{ r.findings }}</p>
+                  </div>
+                </li>
+              </ol>
+            </section>
+          </template>
+        </div>
+
+        <!-- Footer: the primary confirm action -->
+        <footer
+          v-if="ht"
+          class="flex items-center justify-between gap-3 border-t border-slate-800 px-5 py-3"
+        >
+          <StepRunMeta
+            v-if="step"
+            :step="step"
+            :instance-id="instanceId ?? undefined"
+            :step-number="stepIndex === null ? undefined : stepIndex + 1"
+            :total-steps="instance?.steps.length"
+            :run-failed="instance?.status === 'failed'"
+            :failure-at="instance?.failure?.occurredAt"
+          />
+          <UButton
+            color="primary"
+            icon="i-lucide-circle-check"
+            :loading="busy"
+            :disabled="busy || !awaitingHuman"
+            @click="confirm"
+          >
+            Looks good — continue
+          </UButton>
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/layout/NotificationsInbox.vue

@@ -33,6 +33,9 @@ const META: Record<Notification['type'], { icon: string; color: Accent; action:
   // with the iteration-cap prompt; requirements → the review window); "act" just marks it
   // read (the decision itself is resolved in that surface, not here).
   decision_required: { icon: 'i-lucide-circle-help', color: 'warning', action: 'Mark read' },
+  // Clicking the title opens the human-testing window for the task (see `reveal`); "act" just
+  // marks it read (the gate is resolved in that window — confirm / request a fix — not here).
+  human_test_ready: { icon: 'i-lucide-user-check', color: 'primary', action: 'Mark read' },
 }
 
 /** A notification the escalation sweep has flagged as overdue (waited past the threshold). */
@@ -77,9 +80,25 @@ function reveal(n: Notification) {
   if (n.type === 'requirement_review') ui.openRequirementReview(n.blockId)
   else if (n.type === 'clarity_review') ui.openClarityReview(n.blockId)
   else if (n.type === 'decision_required') revealDecision(n)
+  else if (n.type === 'human_test_ready') revealHumanTest(n)
   else ui.select(n.blockId)
 }
 
+/**
+ * Open the human-testing window for a parked `human-test` gate: find the run's parked
+ * human-test step and open it through the universal step dispatch (its archetype declares
+ * the `human-test` result view). Falls back to focusing the block.
+ */
+function revealHumanTest(n: Notification) {
+  const instance = n.executionId ? execution.getInstance(n.executionId) : undefined
+  const idx =
+    instance?.steps.findIndex(
+      (s) => s.agentKind === 'human-test' && s.state === 'waiting_decision',
+    ) ?? -1
+  if (instance && idx >= 0) ui.openStepDetail(instance.id, idx)
+  else if (n.blockId) ui.select(n.blockId)
+}
+
 /**
  * Open the decision surface for a parked iteration-cap run: find the run's step that is
  * waiting on a human and open it through the universal step dispatch — which routes a

package/app/components/panels/InspectorPanel.vue

@@ -12,6 +12,7 @@ import TaskDependencies from '~/components/panels/inspector/TaskDependencies.vue
 import TaskStructure from '~/components/panels/inspector/TaskStructure.vue'
 import TaskRunSettings from '~/components/panels/inspector/TaskRunSettings.vue'
 import TaskExecution from '~/components/panels/inspector/TaskExecution.vue'
+import EpicChildren from '~/components/panels/inspector/EpicChildren.vue'
 import RecurringScheduleSettings from '~/components/panels/inspector/RecurringScheduleSettings.vue'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
@@ -51,6 +52,7 @@ const level = computed(() => block.value?.level ?? 'frame')
 const isFrame = computed(() => level.value === 'frame')
 const isContainer = computed(() => level.value === 'frame' || level.value === 'module')
 const isTask = computed(() => level.value === 'task')
+const isEpic = computed(() => level.value === 'epic')
 
 const instance = computed(() => execution.getInstance(block.value?.executionId))
 const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
@@ -442,6 +444,9 @@ const showOriginalDescription = ref(false)
         <TaskExecution :block="block" />
       </template>
 
+      <!-- epic: the full tree of member tasks, grouped by service → module -->
+      <EpicChildren v-else-if="isEpic" :block="block" />
+
       <!-- actions -->
       <div class="flex items-center gap-2">
         <UDropdownMenu v-if="isTask" :items="runMenu">

package/app/components/panels/StepResultViewHost.vue

@@ -14,6 +14,7 @@ import { computed, type Component } from 'vue'
 import RequirementsReviewWindow from '~/components/requirements/RequirementsReviewWindow.vue'
 import ClarityReviewWindow from '~/components/clarity/ClarityReviewWindow.vue'
 import TestReportWindow from '~/components/testing/TestReportWindow.vue'
+import HumanTestWindow from '~/components/humanTest/HumanTestWindow.vue'
 import GateResultView from '~/components/gates/GateResultView.vue'
 import ConsensusSessionWindow from '~/components/consensus/ConsensusSessionWindow.vue'
 import GenericStructuredResultView from '~/components/panels/GenericStructuredResultView.vue'
@@ -25,6 +26,8 @@ const STEP_RESULT_VIEWS: Record<string, Component> = {
   'requirements-review': RequirementsReviewWindow,
   'clarity-review': ClarityReviewWindow,
   tester: TestReportWindow,
+  // The human-testing gate: env URL + confirm / request-fix / pull-main / recreate / destroy.
+  'human-test': HumanTestWindow,
   // Shared by both polling gates (`ci` + `conflicts`); the window branches on agentKind.
   gate: GateResultView,
   // Opened for any step that ran the consensus mechanism (routed in `ui.dispatchStepView`).