@cat-factory/app 0.80.0 → 0.82.0

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+// Inspector body for an `initiative`-level block: the entity's status + goal, the
+// "Run planning" control (pinned to the Initiative Planning pipeline — the engine
+// refuses any other on this block), and the tracker window opener. Read-only in
+// this slice; plan/policy editing lands with the execution loop.
+import type { Block, InitiativeStatus } from '~/types/domain'
+import { INITIATIVE_STATUS_LABEL_KEYS, initiativeProgress } from '~/utils/initiative'
+
+const props = defineProps<{ block: Block }>()
+
+const initiatives = useInitiativesStore()
+const pipelines = usePipelinesStore()
+const execution = useExecutionStore()
+const ui = useUiStore()
+const { t } = useI18n()
+
+const initiative = computed(() => initiatives.forBlock(props.block.id))
+
+const status = computed<InitiativeStatus>(() => initiative.value?.status ?? 'planning')
+
+// The ONLY pipeline runnable on an initiative block (see the engine's runnable guard).
+const planningPipeline = computed(() => pipelines.pipelines.find((p) => p.id === 'pl_initiative'))
+const running = computed(() => !!props.block.executionId)
+
+function runPlanning() {
+  if (planningPipeline.value) void execution.start(props.block.id, planningPipeline.value)
+}
+function openTracker() {
+  ui.openInitiativeTracker(props.block.id)
+}
+
+const progress = computed(() => initiativeProgress(initiative.value?.items))
+</script>
+
+<template>
+  <div class="space-y-3" data-testid="initiative-inspector">
+    <div class="flex items-center gap-2">
+      <UBadge color="primary" variant="subtle" size="sm">
+        {{ t(INITIATIVE_STATUS_LABEL_KEYS[status]) }}
+      </UBadge>
+      <span v-if="progress" class="text-[11px] text-slate-400">
+        {{ t('initiative.card.progress', { done: progress.settled, total: progress.total }) }}
+      </span>
+    </div>
+
+    <p v-if="initiative?.goal" class="whitespace-pre-wrap text-[12px] text-slate-300">
+      {{ initiative.goal }}
+    </p>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <UButton
+        data-testid="initiative-run-planning"
+        color="primary"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-play"
+        :disabled="!planningPipeline || running"
+        @click="runPlanning"
+      >
+        {{ t('initiative.inspector.runPlanning') }}
+      </UButton>
+      <UButton
+        data-testid="initiative-inspector-tracker"
+        color="neutral"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-list-checks"
+        @click="openTracker"
+      >
+        {{ t('initiative.card.openTracker') }}
+      </UButton>
+    </div>
+
+    <p class="text-[11px] text-slate-500">
+      {{ t('initiative.inspector.hint') }}
+    </p>
+  </div>
+</template>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -38,6 +38,9 @@ const reRequestNotes = ref<Record<string, string>>({})
 // Freeform "do it differently" comment when redoing a merge the human was unhappy with.
 const redoComment = ref('')
 const showRedo = ref(false)
+// Human's explicit collapse choice for the whole incorporated-requirements section; null = follow
+// the default (collapse it while there's still work to do so it doesn't dominate the window).
+const docCollapsedOverride = ref<boolean | null>(null)
 
 // The seam contract (open/blockId/close + Escape handling + load-on-open) lives in
 // `useResultView`, so this window can't drift from the others. Declaring `onOpen` makes the
@@ -52,6 +55,7 @@ const { open, blockId, instanceId, stepIndex, close } = useResultView('requireme
     reRequestNotes.value = {}
     redoComment.value = ''
     showRedo.value = false
+    docCollapsedOverride.value = null
     void requirements.load(id)
   },
 })
@@ -256,6 +260,41 @@ const recommendationProgress = computed(() => {
   const ready = readyRecommendations.value.filter((r) => batchTimes.has(r.createdAt)).length
   return { ready, total: ready + generating.length }
 })
+// Whether the human still has something to act on (findings to answer/dismiss or recommendations
+// to decide). Drives the incorporated-document default collapse so the reference doc doesn't push
+// the actionable findings/recommendations off-screen while there's still work.
+const hasActionableWork = computed(() => {
+  if (!review.value) return false
+  const findingWork = review.value.items.some(
+    (i) => i.status === 'open' || i.status === 'answered' || i.status === 'recommend_requested',
+  )
+  return (
+    findingWork ||
+    readyRecommendations.value.length > 0 ||
+    generatingRecommendations.value.length > 0
+  )
+})
+// The whole incorporated-requirements section collapses as a unit (independent of the per-heading
+// collapse below). Default: collapsed only in the pre-incorporation `ready`-style phase while
+// there's still actionable work — so the (potentially long) reference doc stays out of the way of
+// the findings the human is working through. In `merged` (inspect the draft to decide re-review vs
+// redo) and `incorporated` (the settled deliverable) the document IS the thing to read, so it
+// defaults expanded. The human's explicit toggle wins within a phase; a status change (below)
+// clears it so a collapse from one phase doesn't leak into the next.
+const docCollapsed = computed(
+  () =>
+    docCollapsedOverride.value ?? (!incorporated.value && !merged.value && hasActionableWork.value),
+)
+function toggleDoc() {
+  docCollapsedOverride.value = !docCollapsed.value
+}
+// Reset the manual collapse on every status transition so a collapse chosen in one phase doesn't
+// persist into the next (e.g. a `ready` collapse leaking into `merged`, or surviving convergence to
+// `incorporated` and hiding the final requirements) — each phase then falls back to its own default.
+watch(status, () => {
+  docCollapsedOverride.value = null
+})
+
 function isMarkedForRecommend(item: RequirementReviewItem): boolean {
   return markedForRecommend.value.has(item.id)
 }
@@ -751,9 +790,19 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 </div>
               </section>
 
-              <!-- incorporated document: the standard-format requirements -->
+              <!-- incorporated document: the standard-format requirements. The whole section
+                   collapses as a unit (a long doc otherwise pushes the findings/recommendations
+                   off-screen); the per-heading toggles below still work when it's expanded. -->
               <section v-if="outline" class="mt-6 border-t border-slate-800 pt-5">
-                <div class="mb-3 flex items-center gap-1.5 text-[11px] text-emerald-400">
+                <button
+                  class="mb-3 flex w-full items-center gap-1.5 text-[11px] text-emerald-400"
+                  @click="toggleDoc"
+                >
+                  <UIcon
+                    name="i-lucide-chevron-right"
+                    class="h-3.5 w-3.5 shrink-0 transition-transform"
+                    :class="docCollapsed ? '' : 'rotate-90'"
+                  />
                   <UIcon name="i-lucide-file-check-2" class="h-3.5 w-3.5" />
                   <span class="font-semibold uppercase tracking-wide">
                     {{
@@ -762,29 +811,31 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                         : t('requirements.incorporatedDraft')
                     }}
                   </span>
-                </div>
-                <div v-for="s in outline.sections" :key="s.id" class="mb-2">
-                  <button
-                    v-if="s.title"
-                    class="group flex w-full items-center gap-2 text-start"
-                    @click="toggle(s.id)"
-                  >
-                    <UIcon
-                      name="i-lucide-chevron-right"
-                      class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform"
-                      :class="collapsed[s.id] ? '' : 'rotate-90'"
-                    />
-                    <span
-                      class="font-semibold text-white"
-                      :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
-                      v-html="s.titleHtml"
+                </button>
+                <div v-show="!docCollapsed">
+                  <div v-for="s in outline.sections" :key="s.id" class="mb-2">
+                    <button
+                      v-if="s.title"
+                      class="group flex w-full items-center gap-2 text-start"
+                      @click="toggle(s.id)"
+                    >
+                      <UIcon
+                        name="i-lucide-chevron-right"
+                        class="h-3.5 w-3.5 shrink-0 text-slate-500 transition-transform"
+                        :class="collapsed[s.id] ? '' : 'rotate-90'"
+                      />
+                      <span
+                        class="font-semibold text-white"
+                        :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
+                        v-html="s.titleHtml"
+                      />
+                    </button>
+                    <div
+                      v-show="!s.title || !collapsed[s.id]"
+                      class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
+                      v-html="s.bodyHtml"
                     />
-                  </button>
-                  <div
-                    v-show="!s.title || !collapsed[s.id]"
-                    class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
-                    v-html="s.bodyHtml"
-                  />
+                  </div>
                 </div>
               </section>
             </template>
@@ -806,12 +857,63 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   <span>{{ t('requirements.stats.answered') }}</span>
                   <span class="text-slate-300">{{ answeredCount }}</span>
                 </div>
+                <!-- awaited recommendations — kept here (always visible) so the human can see what
+                     the Writer is still producing / what's waiting on them even while reading the
+                     incorporated document or acting elsewhere in the window. -->
+                <template v-if="generatingRecommendations.length || readyRecommendations.length">
+                  <div
+                    class="flex items-center gap-1.5 border-t border-slate-800/60 pt-2 text-indigo-300"
+                  >
+                    <UIcon name="i-lucide-wand-2" class="h-3 w-3" />
+                    <span class="font-medium">{{ t('requirements.stats.recommendations') }}</span>
+                  </div>
+                  <div
+                    v-if="generatingRecommendations.length"
+                    class="flex items-center justify-between"
+                  >
+                    <span>{{ t('requirements.stats.recsGenerating') }}</span>
+                    <span class="text-indigo-300">{{ generatingRecommendations.length }}</span>
+                  </div>
+                  <div v-if="readyRecommendations.length" class="flex items-center justify-between">
+                    <span>{{ t('requirements.stats.recsToReview') }}</span>
+                    <span class="text-indigo-300">{{ readyRecommendations.length }}</span>
+                  </div>
+                </template>
                 <div v-if="review.model" class="flex items-center justify-between">
                   <span>{{ t('requirements.stats.model') }}</span>
                   <span class="truncate ps-2 text-slate-500">{{ review.model }}</span>
                 </div>
               </div>
 
+              <!-- Request the Requirement Writer for the marked findings. Kept OUT of the
+                   status-scoped blocks below so it's available whenever the review is still
+                   editable — the `ready` first pass AND a `merged` review being reworked — not
+                   only when status is exactly `ready`. Scoped to exactly those two states (NOT a
+                   bare `!frozen`, which would also expose it in `exceeded`, where the run is parked
+                   on the cap decision and a fresh recommendation batch has no path to settle). -->
+              <div
+                v-if="review && markedForRecommend.size > 0 && (status === 'ready' || merged)"
+                class="border-t border-slate-800 pt-4"
+              >
+                <UButton
+                  color="primary"
+                  variant="soft"
+                  size="sm"
+                  block
+                  icon="i-lucide-wand-2"
+                  :loading="recommending"
+                  @click="requestRecommendations"
+                >
+                  {{
+                    t(
+                      'requirements.actions.requestRecommendations',
+                      { count: markedForRecommend.size },
+                      markedForRecommend.size,
+                    )
+                  }}
+                </UButton>
+              </div>
+
               <!-- action: ready (answer → incorporate / proceed) -->
               <div
                 v-if="review && status === 'ready'"
@@ -841,24 +943,6 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 >
                   {{ t('requirements.actions.incorporateAnswers') }}
                 </UButton>
-                <UButton
-                  v-if="markedForRecommend.size > 0"
-                  color="primary"
-                  variant="soft"
-                  size="sm"
-                  block
-                  icon="i-lucide-wand-2"
-                  :loading="recommending"
-                  @click="requestRecommendations"
-                >
-                  {{
-                    t(
-                      'requirements.actions.requestRecommendations',
-                      { count: markedForRecommend.size },
-                      markedForRecommend.size,
-                    )
-                  }}
-                </UButton>
                 <p class="text-[11px] leading-relaxed text-slate-500">
                   <template v-if="canProceed">
                     {{ t('requirements.help.canProceed') }}

package/app/composables/api/initiative.ts

@@ -0,0 +1,28 @@
+import {
+  createInitiativeContract,
+  getInitiativeByBlockContract,
+  getInitiativeContract,
+  listInitiativesContract,
+} from '@cat-factory/contracts'
+import type { ApiContext } from './context'
+
+/** Initiatives: the long-running multi-task work containers (create + tracker reads). */
+export function initiativeApi({ send, ws }: ApiContext) {
+  return {
+    // Create the initiative-level board block AND its empty entity in one call.
+    createInitiative: (
+      workspaceId: string,
+      body: { frameId: string; title: string; description?: string },
+    ) => send(createInitiativeContract, { pathPrefix: ws(workspaceId), body }),
+
+    listInitiatives: (workspaceId: string) =>
+      send(listInitiativesContract, { pathPrefix: ws(workspaceId) }),
+
+    getInitiative: (workspaceId: string, initiativeId: string) =>
+      send(getInitiativeContract, { pathPrefix: ws(workspaceId), pathParams: { initiativeId } }),
+
+    // 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 } }),
+  }
+}

package/app/composables/useApi.ts

@@ -13,6 +13,7 @@ import { githubApi } from './api/github'
 import { humanReviewApi } from './api/humanReview'
 import { humanTestApi } from './api/humanTest'
 import { infraHandlersApi } from './api/infraHandlers'
+import { initiativeApi } from './api/initiative'
 import { visualConfirmApi } from './api/visualConfirm'
 import { kaizenApi } from './api/kaizen'
 import { localSettingsApi } from './api/localSettings'
@@ -112,6 +113,7 @@ export function useApi() {
     ...presetsApi(ctx),
     ...providerConnectionsApi(ctx),
     ...infraHandlersApi(ctx),
+    ...initiativeApi(ctx),
     ...provisioningLogsApi(ctx),
     ...releaseHealthApi(ctx),
     ...packageRegistriesApi(ctx),

package/app/composables/useBlockQueries.ts

@@ -59,6 +59,11 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
     return childrenOf(serviceId).filter((b) => b.level === 'module')
   }
 
+  /** Initiative containers inside a service (frame children, like modules). */
+  function initiativesOf(serviceId: string) {
+    return childrenOf(serviceId).filter((b) => b.level === 'initiative')
+  }
+
   /** Tasks anywhere under a container — directly, or nested inside its modules. */
   function allTasksUnder(containerId: string): Block[] {
     const direct = tasksOf(containerId)
@@ -124,9 +129,17 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
    */
   function frameStatus(frameId: string): BlockStatus {
     const tasks = allTasksUnder(frameId)
-    if (tasks.length === 0) return 'planned'
-    if (tasks.some((t) => t.status === 'blocked')) return 'blocked'
-    if (tasks.some((t) => t.status === 'in_progress' || t.status === 'pr_ready'))
+    // Initiative containers are frame children too: a frame holding only an initiative
+    // is NOT empty, and an active (planning/executing → block `in_progress`) or blocked
+    // initiative drives the frame's activity dot just like a task does.
+    const inits = initiativesOf(frameId)
+    if (tasks.length === 0 && inits.length === 0) return 'planned'
+    if (tasks.some((t) => t.status === 'blocked') || inits.some((i) => i.status === 'blocked'))
+      return 'blocked'
+    if (
+      tasks.some((t) => t.status === 'in_progress' || t.status === 'pr_ready') ||
+      inits.some((i) => i.status === 'in_progress')
+    )
       return 'in_progress'
     return 'ready'
   }
@@ -153,6 +166,11 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
       w = Math.max(w, m.position.x + s.w + 12)
       inner = Math.max(inner, m.position.y + s.h + 12)
     }
+    // Initiative cards render inside the frame's drop zone like tasks (230×~170).
+    for (const i of initiativesOf(id)) {
+      w = Math.max(w, i.position.x + 230 + 12)
+      inner = Math.max(inner, i.position.y + 170 + 12)
+    }
     return { w, h: inner + headerH }
   }
 
@@ -180,6 +198,7 @@ export function useBlockQueries(blocks: Ref<Block[]>) {
     childrenOf,
     tasksOf,
     modulesOf,
+    initiativesOf,
     allTasksUnder,
     serviceOf,
     unmetDeps,

package/app/composables/useWorkspaceStream.ts

@@ -25,6 +25,7 @@ export function useWorkspaceStream() {
   const clarity = useClarityStore()
   const brainstorm = useBrainstormStore()
   const kaizen = useKaizenStore()
+  const initiatives = useInitiativesStore()
   const api = useApi()
   const apiBase = useRuntimeConfig().public.apiBase
 
@@ -103,6 +104,10 @@ export function useWorkspaceStream() {
       // run cache (so an open run window shows scheduled→running→complete live) and the
       // Kaizen screen history. Never surfaced on the board.
       kaizen.upsert(event.grading)
+    } else if (event.type === 'initiative') {
+      // An initiative changed (created, plan ingested, an item settled) — patch the cache
+      // so an open tracker window / the board card reflects the transition live.
+      initiatives.upsert(event.initiative)
     }
   }
 

package/app/pages/index.vue

@@ -332,6 +332,7 @@ watch(
       <AgentStepDetail />
       <StepResultViewHost />
       <AddTaskModal />
+      <CreateInitiativeModal />
       <CommandBar />
       <PersonalCredentialModal />
       <ConfirmDialog />

package/app/stores/board.ts

@@ -22,8 +22,11 @@ import { useBlockQueries } from '~/composables/useBlockQueries'
 interface RemovalSnapshot {
   /** The removed block + all its descendants, in their original order. */
   removed: Block[]
-  /** Survivors whose `dependsOn`/`epicId` lost an edge to a removed block (originals to restore). */
-  edges: { id: string; dependsOn: string[]; epicId: string | null }[]
+  /**
+   * Survivors whose `dependsOn`/`epicId`/`initiativeId` lost an edge to a removed block
+   * (originals to restore on rollback).
+   */
+  edges: { id: string; dependsOn: string[]; epicId: string | null; initiativeId: string | null }[]
 }
 
 export const useBoardStore = defineStore('board', () => {
@@ -255,15 +258,23 @@ export const useBoardStore = defineStore('board', () => {
       }
     }
     const removed = blocks.value.filter((b) => doomed.has(b.id))
-    // 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.
+    // Survivors that pointed at a doomed block (dependency edge, epic membership, or initiative
+    // membership) lose that link — snapshot the originals so a failed delete restores them
+    // faithfully. Mirrors the backend `pruneDanglingEdges` detach.
     const edges = blocks.value
       .filter(
         (b) =>
           !doomed.has(b.id) &&
-          (b.dependsOn.some((d) => doomed.has(d)) || (b.epicId != null && doomed.has(b.epicId))),
+          (b.dependsOn.some((d) => doomed.has(d)) ||
+            (b.epicId != null && doomed.has(b.epicId)) ||
+            (b.initiativeId != null && doomed.has(b.initiativeId))),
       )
-      .map((b) => ({ id: b.id, dependsOn: [...b.dependsOn], epicId: b.epicId ?? null }))
+      .map((b) => ({
+        id: b.id,
+        dependsOn: [...b.dependsOn],
+        epicId: b.epicId ?? null,
+        initiativeId: b.initiativeId ?? 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))) {
@@ -271,6 +282,8 @@ export const useBoardStore = defineStore('board', () => {
       }
       // A member of a deleted epic loses its membership (the task itself survives).
       if (b.epicId != null && doomed.has(b.epicId)) b.epicId = null
+      // Likewise a task spawned by a deleted initiative loses its (non-structural) membership.
+      if (b.initiativeId != null && doomed.has(b.initiativeId)) b.initiativeId = null
     }
     return { removed, edges }
   }
@@ -283,6 +296,7 @@ export const useBoardStore = defineStore('board', () => {
       if (b) {
         b.dependsOn = e.dependsOn
         b.epicId = e.epicId
+        b.initiativeId = e.initiativeId
       }
     }
   }

package/app/stores/initiative.ts

@@ -0,0 +1,98 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import type { Initiative } from '~/types/domain'
+import { useWorkspaceStore } from '~/stores/workspace'
+import { useBoardStore } from '~/stores/board'
+
+/**
+ * Initiative state — the long-running multi-task work containers, keyed by their
+ * anchor BLOCK id (the id everything on the board navigates by). Hydrated from the
+ * workspace snapshot (`snapshot.initiatives`) and patched live from `initiative`
+ * stream events; `create` calls the API and applies the authoritative entity +
+ * block the server returns. `available` mirrors the backend's opt-in module (a 503
+ * hides the UI). Per-workspace; nothing is persisted client-side.
+ *
+ * NOTE: distinct from `useTrackerStore` (the workspace's ISSUE-tracker selection) —
+ * "tracker" in initiative-land means the initiative's plan/tracker document.
+ */
+export const useInitiativesStore = defineStore('initiatives', () => {
+  const api = useApi()
+  const workspace = useWorkspaceStore()
+
+  /** null = unknown (not probed), true/false = feature on/off. */
+  const available = ref<boolean | null>(null)
+  /** The entities keyed by their anchor block id. */
+  const byBlock = ref<Record<string, Initiative>>({})
+  /** True while a create call is in flight (the modal's submit spinner). */
+  const creating = ref(false)
+
+  const all = computed(() => Object.values(byBlock.value))
+
+  function forBlock(blockId: string): Initiative | null {
+    return byBlock.value[blockId] ?? null
+  }
+
+  /**
+   * Rebuild the cache from a snapshot (the hydrate fan-out). The snapshot is authoritative
+   * for EXISTENCE (entities it omits are dropped — they were deleted), but NOT for freshness:
+   * a stale snapshot captured before a live `initiative` event must not regress a newer entity
+   * already patched into the store. So for a blockId present in both, keep whichever `rev` is
+   * higher — the same live-event-vs-resync race guard `upsert` applies, mirroring the fix the
+   * repo's flake note describes for `agentRuns.hydrate`.
+   */
+  function hydrate(next: Initiative[] | undefined) {
+    if (next === undefined) return
+    available.value = true
+    const map: Record<string, Initiative> = {}
+    for (const initiative of next) {
+      const existing = byBlock.value[initiative.blockId]
+      map[initiative.blockId] = existing && existing.rev > initiative.rev ? existing : initiative
+    }
+    byBlock.value = map
+  }
+
+  /** Patch from a live `initiative` stream event or a call response (newest rev wins). */
+  function upsert(initiative: Initiative) {
+    const existing = byBlock.value[initiative.blockId]
+    if (existing && existing.rev > initiative.rev) return
+    byBlock.value = { ...byBlock.value, [initiative.blockId]: initiative }
+  }
+
+  /** Create an initiative under a service frame (block + entity in one call). */
+  async function create(frameId: string, input: { title: string; description?: string }) {
+    if (!workspace.workspaceId) throw new Error('No active workspace')
+    creating.value = true
+    try {
+      const created = await api.createInitiative(workspace.workspaceId, {
+        frameId,
+        title: input.title,
+        ...(input.description ? { description: input.description } : {}),
+      })
+      useBoardStore().upsert(created.block)
+      upsert(created.initiative)
+      return created
+    } finally {
+      creating.value = false
+    }
+  }
+
+  /** Re-fetch one block's initiative (the tracker window's load path). */
+  async function load(blockId: string) {
+    if (!workspace.workspaceId) return
+    try {
+      const initiative = await api.getInitiativeByBlock(workspace.workspaceId, blockId)
+      available.value = true
+      if (initiative) upsert(initiative)
+    } catch (error) {
+      const status = (error as { status?: number } | null)?.status
+      if (status === 503) available.value = false
+      else throw error
+    }
+  }
+
+  function reset() {
+    byBlock.value = {}
+  }
+
+  return { available, byBlock, all, creating, forBlock, hydrate, upsert, create, load, reset }
+})

package/app/stores/ui.ts

@@ -86,6 +86,10 @@ export const useUiStore = defineStore('ui', () => {
   // the frame opens it, scoped to that frame).
   const addRecurringFrameId = ref<string | null>(null)
 
+  // Create-initiative modal: the service frame a new initiative is being created
+  // under, or null when closed (mirrors the add-task flow).
+  const createInitiativeFrameId = ref<string | null>(null)
+
   // Repo-bootstrap modal (manage reference architectures + launch a bootstrap).
   const bootstrapOpen = ref(false)
 
@@ -424,6 +428,12 @@ export const useUiStore = defineStore('ui', () => {
   function closeAddRecurring() {
     addRecurringFrameId.value = null
   }
+  function openCreateInitiative(frameId: string) {
+    createInitiativeFrameId.value = frameId
+  }
+  function closeCreateInitiative() {
+    createInitiativeFrameId.value = null
+  }
   function openBootstrap() {
     bootstrapOpen.value = true
   }
@@ -714,6 +724,10 @@ export const useUiStore = defineStore('ui', () => {
   function openServiceSpec(blockId: string) {
     resultView.value = { view: 'service-spec', blockId, instanceId: null, stepIndex: null }
   }
+  // Open the initiative tracker window for an initiative block (board card / inspector).
+  function openInitiativeTracker(blockId: string) {
+    resultView.value = { view: 'initiative-tracker', blockId, instanceId: null, stepIndex: null }
+  }
   // Open the Follow-up companion window for a run's Coder step (the blinking chip + the
   // `followup_pending` notification). Resolves the Coder step index from the run when not
   // given, so callers that only know the run can still open it.
@@ -783,6 +797,7 @@ export const useUiStore = defineStore('ui', () => {
     addTaskContainerId,
     addTaskPrefill,
     addRecurringFrameId,
+    createInitiativeFrameId,
     bootstrapOpen,
     addServiceOpen,
     githubOpen,
@@ -856,6 +871,8 @@ export const useUiStore = defineStore('ui', () => {
     closeAddTask,
     openAddRecurring,
     closeAddRecurring,
+    openCreateInitiative,
+    closeCreateInitiative,
     openBootstrap,
     closeBootstrap,
     openAddService,
@@ -921,6 +938,7 @@ export const useUiStore = defineStore('ui', () => {
     openClarityReview,
     openBrainstorm,
     openServiceSpec,
+    openInitiativeTracker,
     openFollowUps,
     closeRequirementReview,
     openStepDetail,