@cat-factory/app 0.80.0 → 0.82.0

package/app/components/board/CreateInitiativeModal.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+// Create a new INITIATIVE under a service frame — the longer-running counterpart
+// to a task. The user names it and writes the rough goal statement; the server
+// materialises the initiative-level board block + its empty tracker entity in one
+// call. Nothing is planned here: the user then runs the Initiative Planning
+// pipeline (pl_initiative) on the block, which analyses the codebase, drafts the
+// multi-phase plan for approval, and commits the in-repo tracker.
+const ui = useUiStore()
+const board = useBoardStore()
+const initiatives = useInitiativesStore()
+const toast = useToast()
+const { t } = useI18n()
+
+const open = computed({
+  get: () => ui.createInitiativeFrameId !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeCreateInitiative()
+  },
+})
+
+const frame = computed(() =>
+  ui.createInitiativeFrameId ? board.getBlock(ui.createInitiativeFrameId) : undefined,
+)
+
+const title = ref('')
+const description = ref('')
+
+watch(open, (o) => {
+  if (o) {
+    title.value = ''
+    description.value = ''
+  }
+})
+
+async function create() {
+  const frameId = ui.createInitiativeFrameId
+  if (!frameId || !title.value.trim() || initiatives.creating) return
+  try {
+    const { block } = await initiatives.create(frameId, {
+      title: title.value.trim(),
+      description: description.value.trim() || undefined,
+    })
+    ui.closeCreateInitiative()
+    // Select the fresh block so the inspector offers "Run planning" right away.
+    ui.select(block.id)
+  } catch (e) {
+    toast.add({
+      title: t('initiative.create.failedTitle'),
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('initiative.create.title')">
+    <template #body>
+      <div class="space-y-4" data-testid="create-initiative-modal">
+        <p v-if="frame" class="text-xs text-slate-400">
+          <i18n-t keypath="initiative.create.inFrame" tag="span" scope="global">
+            <template #frame>
+              <span class="font-medium text-slate-200">{{ frame.title }}</span>
+            </template>
+          </i18n-t>
+        </p>
+
+        <UFormField :label="t('initiative.create.titleField')" required>
+          <UInput
+            v-model="title"
+            data-testid="create-initiative-title"
+            :placeholder="t('initiative.create.titlePlaceholder')"
+            autofocus
+            class="w-full"
+            @keydown.enter="create"
+          />
+        </UFormField>
+
+        <UFormField :label="t('initiative.create.goalField')">
+          <UTextarea
+            v-model="description"
+            data-testid="create-initiative-goal"
+            :rows="4"
+            autoresize
+            :placeholder="t('initiative.create.goalPlaceholder')"
+            class="w-full"
+          />
+        </UFormField>
+
+        <p class="text-[11px] text-slate-500">
+          {{ t('initiative.create.hint') }}
+        </p>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="open = false">
+          {{ t('common.cancel') }}
+        </UButton>
+        <UButton
+          data-testid="create-initiative-submit"
+          color="primary"
+          :loading="initiatives.creating"
+          :disabled="!title.trim()"
+          @click="create"
+        >
+          {{ t('initiative.create.submit') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

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

@@ -3,6 +3,7 @@ import type { Block, BlockStatus } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
 import DecisionBadge from './DecisionBadge.vue'
 import DraggableTask from './DraggableTask.vue'
+import InitiativeCard from './InitiativeCard.vue'
 import ModuleFrame from './ModuleFrame.vue'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
@@ -36,10 +37,13 @@ const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) :
 // ---- this service's children (tasks + modules) -----------------------------
 const directTasks = computed(() => board.tasksOf(props.id))
 const modules = computed(() => board.modulesOf(props.id))
+const initiativeBlocks = computed(() => board.initiativesOf(props.id))
 const allTasks = computed(() => board.allTasksUnder(props.id))
 const taskIds = computed(() => new Set(allTasks.value.map((t) => t.id)))
 const taskCount = computed(() => allTasks.value.length)
-const hasTasks = computed(() => taskCount.value > 0 || modules.value.length > 0)
+const hasTasks = computed(
+  () => taskCount.value > 0 || modules.value.length > 0 || initiativeBlocks.value.length > 0,
+)
 // Single pass over the tasks for both rollups (vs. one filter each).
 const taskStats = computed(() => {
   let merged = 0
@@ -156,6 +160,11 @@ function addRecurring() {
   ui.openAddRecurring(props.id)
 }
 
+function createInitiative() {
+  ui.expandFrame(props.id)
+  ui.openCreateInitiative(props.id)
+}
+
 // A task needs merging → green pulse; a task needs a decision → amber pulse.
 const pulseClass = computed(() => {
   if (frameStatus.value === 'blocked') return 'board-pulse'
@@ -462,6 +471,16 @@ const ITEM_ICON: Record<string, string> = {
                 :title="t('board.frame.addRecurringTitle')"
                 @click.stop="addRecurring"
               />
+              <UButton
+                class="nodrag"
+                data-testid="frame-add-initiative"
+                :size="isTouch ? 'sm' : 'xs'"
+                variant="ghost"
+                color="neutral"
+                icon="i-lucide-milestone"
+                :title="t('board.frame.createInitiativeTitle')"
+                @click.stop="createInitiative"
+              />
               <UButton
                 class="nodrag"
                 :size="isTouch ? 'sm' : 'xs'"
@@ -494,6 +513,7 @@ const ITEM_ICON: Record<string, string> = {
           :style="{ width: canvas.w + 'px', height: canvas.h + 'px' }"
         >
           <ModuleFrame v-for="m in modules" :key="m.id" :module-id="m.id" />
+          <InitiativeCard v-for="i in initiativeBlocks" :key="i.id" :block-id="i.id" />
           <DraggableTask v-for="t in directTasks" :key="t.id" :task-id="t.id" />
           <button
             v-if="!hasTasks"

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+// The board card for an `initiative`-level block (a frame child, like a module):
+// title, the initiative's lifecycle status, and — once a plan is ingested — the
+// item-completion progress. Clicking selects the block (the inspector offers
+// "Run planning" / "Open tracker"); the tracker button opens the dedicated
+// window directly. Draggable within its frame like a task card.
+import type { InitiativeStatus } from '~/types/domain'
+import { useBlockDrag } from '~/composables/useBlockDrag'
+import {
+  INITIATIVE_STATUS_CHIPS,
+  INITIATIVE_STATUS_LABEL_KEYS,
+  initiativeProgress,
+} from '~/utils/initiative'
+
+const props = defineProps<{ blockId: string }>()
+const board = useBoardStore()
+const initiatives = useInitiativesStore()
+const ui = useUiStore()
+const { t } = useI18n()
+const { draggingId, startDrag } = useBlockDrag()
+
+const block = computed(() => board.getBlock(props.blockId))
+const initiative = computed(() => initiatives.forBlock(props.blockId))
+
+const status = computed<InitiativeStatus>(() => initiative.value?.status ?? 'planning')
+const statusLabel = computed(() => t(INITIATIVE_STATUS_LABEL_KEYS[status.value]))
+
+const progress = computed(() => initiativeProgress(initiative.value?.items))
+
+const selected = computed(() => ui.selectedBlockId === props.blockId)
+
+function select() {
+  ui.select(props.blockId)
+}
+function openTracker() {
+  ui.select(props.blockId)
+  ui.openInitiativeTracker(props.blockId)
+}
+function onHandle(e: PointerEvent) {
+  if (block.value) startDrag(block.value, e)
+}
+</script>
+
+<template>
+  <div
+    v-if="block"
+    class="absolute w-[230px]"
+    :style="{
+      left: block.position.x + 'px',
+      top: block.position.y + 'px',
+      zIndex: draggingId === blockId ? 60 : 10,
+      pointerEvents: draggingId === blockId ? 'none' : undefined,
+    }"
+  >
+    <div
+      class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-indigo-800/60 bg-indigo-950/60 py-px active:cursor-grabbing pointer-coarse:py-2"
+      :title="t('board.frame.dragTask')"
+      @pointerdown="onHandle"
+    >
+      <UIcon
+        name="i-lucide-grip-horizontal"
+        class="h-3 w-3 text-indigo-400/60 pointer-coarse:h-5 pointer-coarse:w-5"
+      />
+    </div>
+    <div
+      data-testid="initiative-card"
+      class="cursor-pointer rounded-b-lg border border-indigo-800/60 bg-indigo-950/40 p-3 transition hover:border-indigo-600"
+      :class="selected ? 'ring-2 ring-indigo-400/60' : ''"
+      @click.stop="select"
+    >
+      <div class="flex items-start justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-lucide-milestone" class="h-4 w-4 shrink-0 text-indigo-400" />
+          <div class="text-xs font-semibold text-white">{{ block.title }}</div>
+        </div>
+        <UBadge :color="INITIATIVE_STATUS_CHIPS[status] as any" variant="subtle" size="sm">
+          {{ statusLabel }}
+        </UBadge>
+      </div>
+      <div class="mt-1 text-[10px] uppercase tracking-wide text-indigo-300/70">
+        {{ t('initiative.card.kind') }}
+      </div>
+      <div v-if="progress" class="mt-2 space-y-1">
+        <div class="h-1.5 overflow-hidden rounded bg-slate-800">
+          <div
+            class="h-full rounded bg-indigo-400"
+            :style="{ width: `${Math.round((progress.settled / progress.total) * 100)}%` }"
+          />
+        </div>
+        <div class="text-[10px] text-slate-400">
+          {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
+        </div>
+      </div>
+      <UButton
+        class="nodrag mt-2"
+        data-testid="initiative-open-tracker"
+        size="xs"
+        variant="soft"
+        color="primary"
+        icon="i-lucide-list-checks"
+        @click.stop="openTracker"
+      >
+        {{ t('initiative.card.openTracker') }}
+      </UButton>
+    </div>
+  </div>
+</template>

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+// The initiative tracker window — the dedicated read-only view of an initiative's
+// plan/tracker entity: goal + constraints, the phases with their per-item status +
+// PR links, the execution policy, and the decisions / deviations / follow-ups /
+// caveats logs. Renders the DB entity (the source of truth) — never the in-repo
+// mirror, which may not exist (GitHub-unwired workspaces). Opened via the universal
+// result-view host: from the board card / inspector (`ui.openInitiativeTracker`) or
+// as the planner step's result view. Live `initiative` stream events patch the
+// store, so an open window follows the plan as it is ingested and later executed.
+import { computed } from 'vue'
+import type { InitiativeItem } from '~/types/domain'
+import {
+  INITIATIVE_ITEM_STATUS_CHIPS,
+  INITIATIVE_ITEM_STATUS_LABEL_KEYS,
+  INITIATIVE_STATUS_LABEL_KEYS,
+} from '~/utils/initiative'
+
+const board = useBoardStore()
+const initiatives = useInitiativesStore()
+const { t } = useI18n()
+
+const { open, blockId, close } = useResultView('initiative-tracker', {
+  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))
+
+const phases = computed(() => initiative.value?.phases ?? [])
+function itemsOf(phaseId: string): InitiativeItem[] {
+  return (initiative.value?.items ?? []).filter((i) => i.phaseId === phaseId)
+}
+
+const policyRules = computed(() => initiative.value?.policy?.rules ?? [])
+function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?: number }): string {
+  const axes = [
+    rule.minComplexity !== undefined
+      ? t('initiative.tracker.axisComplexity', { value: rule.minComplexity })
+      : null,
+    rule.minRisk !== undefined ? t('initiative.tracker.axisRisk', { value: rule.minRisk }) : null,
+    rule.minImpact !== undefined
+      ? t('initiative.tracker.axisImpact', { value: rule.minImpact })
+      : null,
+  ].filter((a): a is string => a !== null)
+  return axes.length ? axes.join(' · ') : t('initiative.tracker.axisNever')
+}
+</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-4xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
+        data-testid="initiative-tracker-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-milestone" 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.tracker.title') }}
+            </h2>
+            <p class="truncate text-[11px] text-slate-400">
+              {{ t('initiative.tracker.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 (module unwired / still creating) -->
+          <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-milestone" class="h-8 w-8 opacity-40" />
+            <p class="text-sm">{{ t('initiative.tracker.empty') }}</p>
+          </div>
+
+          <template v-else>
+            <!-- Goal & constraints -->
+            <section v-if="initiative.goal" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.goal') }}
+              </h3>
+              <p class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
+                {{ initiative.goal }}
+              </p>
+            </section>
+            <section v-if="initiative.constraints?.length" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.constraints') }}
+              </h3>
+              <ul class="list-inside list-disc text-[13px] text-slate-300">
+                <li v-for="(c, i) in initiative.constraints" :key="i">{{ c }}</li>
+              </ul>
+            </section>
+            <section v-if="initiative.nonGoals?.length" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.nonGoals') }}
+              </h3>
+              <ul class="list-inside list-disc text-[13px] text-slate-300">
+                <li v-for="(g, i) in initiative.nonGoals" :key="i">{{ g }}</li>
+              </ul>
+            </section>
+            <section v-if="initiative.analysisSummary" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.analysis') }}
+              </h3>
+              <p class="whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300">
+                {{ initiative.analysisSummary }}
+              </p>
+            </section>
+
+            <!-- Awaiting planning -->
+            <div
+              v-if="phases.length === 0"
+              class="mb-4 rounded-lg border border-dashed border-slate-700 p-4 text-center text-[12px] text-slate-400"
+            >
+              {{ t('initiative.tracker.noPlan') }}
+            </div>
+
+            <!-- Phases + items -->
+            <section v-for="phase in phases" :key="phase.id" class="mb-5">
+              <h3 class="mb-1 text-sm font-semibold text-slate-200">
+                {{ t('initiative.tracker.phase', { title: phase.title }) }}
+              </h3>
+              <p v-if="phase.goal" class="mb-2 text-[12px] text-slate-400">{{ phase.goal }}</p>
+              <div class="overflow-x-auto rounded-lg border border-slate-800">
+                <table class="w-full text-[12px]">
+                  <thead>
+                    <tr class="border-b border-slate-800 text-left text-slate-500">
+                      <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colItem') }}</th>
+                      <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colStatus') }}</th>
+                      <th class="px-3 py-2 font-medium">{{ t('initiative.tracker.colPr') }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in itemsOf(phase.id)"
+                      :key="item.id"
+                      class="border-b border-slate-800/60 last:border-0"
+                    >
+                      <td class="px-3 py-2 align-top">
+                        <div class="font-medium text-slate-200">{{ item.title }}</div>
+                        <div
+                          v-if="item.dependsOn?.length"
+                          class="mt-0.5 text-[10px] text-slate-500"
+                        >
+                          {{
+                            t('initiative.tracker.dependsOn', {
+                              items: item.dependsOn.join(', '),
+                            })
+                          }}
+                        </div>
+                        <div v-if="item.note" class="mt-0.5 text-[10px] text-amber-300/80">
+                          {{ item.note }}
+                        </div>
+                      </td>
+                      <td class="px-3 py-2 align-top">
+                        <UBadge
+                          :color="INITIATIVE_ITEM_STATUS_CHIPS[item.status] as any"
+                          variant="subtle"
+                          size="sm"
+                        >
+                          {{ t(INITIATIVE_ITEM_STATUS_LABEL_KEYS[item.status]) }}
+                        </UBadge>
+                      </td>
+                      <td class="px-3 py-2 align-top">
+                        <a
+                          v-if="item.pr"
+                          :href="item.pr.url"
+                          target="_blank"
+                          rel="noopener"
+                          class="text-sky-400 hover:underline"
+                        >
+                          {{
+                            item.pr.number ? `#${item.pr.number}` : t('initiative.tracker.prLink')
+                          }}
+                        </a>
+                        <span v-else class="text-slate-600">—</span>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </section>
+
+            <!-- Execution policy -->
+            <section v-if="initiative.policy" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.policy') }}
+              </h3>
+              <ul class="text-[12px] text-slate-300">
+                <li>
+                  {{
+                    t('initiative.tracker.maxConcurrent', {
+                      count: initiative.policy.maxConcurrent,
+                    })
+                  }}
+                </li>
+                <li v-for="(rule, i) in policyRules" :key="i">
+                  <code class="text-sky-300">{{ rule.pipelineId }}</code>
+                  · {{ ruleAxes(rule) }}
+                </li>
+                <li>
+                  {{ t('initiative.tracker.defaultPipeline') }}
+                  <code class="text-sky-300">{{ initiative.policy.defaultPipelineId }}</code>
+                </li>
+              </ul>
+            </section>
+
+            <!-- Logs -->
+            <section v-if="initiative.decisions?.length" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.decisions') }}
+              </h3>
+              <ul class="list-inside list-disc text-[13px] text-slate-300">
+                <li v-for="d in initiative.decisions" :key="d.id">
+                  <span class="font-medium">{{ d.title }}</span>
+                  <span v-if="d.detail" class="text-slate-400"> — {{ d.detail }}</span>
+                </li>
+              </ul>
+            </section>
+            <section v-if="initiative.deviations?.length" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.deviations') }}
+              </h3>
+              <ul class="list-inside list-disc text-[13px] text-slate-300">
+                <li v-for="d in initiative.deviations" :key="d.id">
+                  <code v-if="d.itemId" class="text-slate-400">{{ d.itemId }}</code>
+                  {{ d.description }}
+                  <span v-if="d.resolution" class="text-slate-400"> → {{ d.resolution }}</span>
+                </li>
+              </ul>
+            </section>
+            <section v-if="initiative.followUps?.length" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.followUps') }}
+              </h3>
+              <ul class="list-inside list-disc text-[13px] text-slate-300">
+                <li v-for="f in initiative.followUps" :key="f.id">
+                  <span class="font-medium">{{ f.title }}</span>
+                  <span v-if="f.detail" class="text-slate-400"> — {{ f.detail }}</span>
+                </li>
+              </ul>
+            </section>
+            <section v-if="initiative.caveats?.length" class="mb-4">
+              <h3 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                {{ t('initiative.tracker.caveats') }}
+              </h3>
+              <ul class="list-inside list-disc text-[13px] text-slate-300">
+                <li v-for="(c, i) in initiative.caveats" :key="i">{{ c }}</li>
+              </ul>
+            </section>
+          </template>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/panels/InspectorPanel.vue

@@ -17,6 +17,7 @@ import TaskRunSettings from '~/components/panels/inspector/TaskRunSettings.vue'
 import TaskExecution from '~/components/panels/inspector/TaskExecution.vue'
 import TaskEstimateBadge from '~/components/panels/inspector/TaskEstimateBadge.vue'
 import EpicChildren from '~/components/panels/inspector/EpicChildren.vue'
+import InitiativeInspector from '~/components/panels/inspector/InitiativeInspector.vue'
 import RecurringScheduleSettings from '~/components/panels/inspector/RecurringScheduleSettings.vue'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
@@ -73,6 +74,7 @@ watch(
 const isContainer = computed(() => level.value === 'frame' || level.value === 'module')
 const isTask = computed(() => level.value === 'task')
 const isEpic = computed(() => level.value === 'epic')
+const isInitiative = computed(() => level.value === 'initiative')
 
 const instance = computed(() => execution.getInstance(block.value?.executionId))
 const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
@@ -509,6 +511,9 @@ const showOriginalDescription = ref(false)
       <!-- epic: the full tree of member tasks, grouped by service → module -->
       <EpicChildren v-else-if="isEpic" :key="`epic-${block.id}`" :block="block" />
 
+      <!-- initiative: status + goal, run-planning + tracker controls -->
+      <InitiativeInspector v-else-if="isInitiative" :block="block" />
+
       <!-- actions -->
       <div class="flex items-center gap-2">
         <UDropdownMenu v-if="isTask" :items="runMenu">

package/app/components/panels/StepResultViewHost.vue

@@ -23,6 +23,7 @@ import GenericStructuredResultView from '~/components/panels/GenericStructuredRe
 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'
 
 const ui = useUiStore()
 
@@ -52,6 +53,10 @@ const STEP_RESULT_VIEWS: Record<string, Component> = {
   // The merger's verdict: the PR's complexity/risk/impact scores + the engine's auto-merge
   // or awaiting-review decision (and why), instead of the agent's raw JSON.
   merger: MergerResultView,
+  // The initiative tracker: phases, per-item status + PR links, decisions, deviations,
+  // caveats. Opened from the initiative card / inspector (`ui.openInitiativeTracker`) and
+  // as the planner step's result view.
+  'initiative-tracker': InitiativeTrackerWindow,
 }
 
 const active = computed<Component | null>(() => {