@cat-factory/app 0.171.0 → 0.173.0

package/README.md

@@ -133,6 +133,10 @@ example ships in [`deploy/frontend`](../../deploy/frontend) (the `acme:security`
   single way a pipeline is chosen anywhere — add-task, run settings, the recurring
   schedule, the focus view's Run menu — so every surface explains a pipeline by the
   ordered steps it will run rather than by its name alone.
+- **Context attachments** (`components/context`) — `ContextAttachmentFields`, the
+  shared staged-attachment form used by both the add-task and create-initiative
+  modals. Picks are held locally and import-and-linked once the block exists (see
+  `composables/useContextLinking`), because linking needs a block id.
 - **Integrations** — modals/panels for `github` (the source-control panel, shared
   by every VCS provider), `vcs` (the GitLab personal-access-token connect),
   `bootstrap`, `documents`, `tasks`, `requirements` (review), `scenarios`

package/app/components/board/AddTaskModal.vue

@@ -24,8 +24,7 @@ import { DOC_KINDS, DOC_KIND_FIELDS } from '~/types/domain'
 import { resolveComponentRegistry } from '@modular-vue/core'
 import { useReactiveSlots } from '@modular-vue/runtime'
 import type { AppSlots, ResultViewContribution } from '~/modular/slots'
-import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
-import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
+import ContextAttachmentFields from '~/components/context/ContextAttachmentFields.vue'
 import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import { parseConflict } from '~/composables/usePipelineErrorToast'
@@ -441,40 +440,6 @@ function setConfig(id: string, value: string) {
 // import flow), committed once the block exists (see add() → linkPending).
 const pendingContext = ref<PendingContext[]>([])
 
-// The Context documents / Context issues sections mirror the task inspector but are
-// always shown (ungated): when the relevant integration isn't connected the Attach
-// button becomes a "Connect a source" action instead. Connecting opens the source's
-// connect modal OVER this one (both are root-mounted with independent open flags), so
-// the user's in-progress task data is preserved rather than lost to a navigation away.
-const docsConnected = computed(() => documents.available && documents.anyConnected)
-const issuesConnected = computed(() => tasks.available && tasks.anyOffered)
-
-// Sources the user could connect right now to unlock the picker, when none is connected
-// yet: for documents, every configured source without a live connection (GitHub docs are
-// already implicitly connected via the App, so they never appear here); for issues, every
-// configured tracker not yet available (a connected credentialed source, or the installed
-// GitHub App). The connect modals are the same ones the Integrations hub opens.
-const connectableDocSources = computed(() =>
-  documents.available ? documents.sources.filter((s) => !documents.isConnected(s.source)) : [],
-)
-const connectableIssueSources = computed(() =>
-  tasks.available ? tasks.sources.filter((s) => !s.available) : [],
-)
-const connectDocMenu = computed(() => [
-  connectableDocSources.value.map((s) => ({
-    label: s.label,
-    icon: s.icon,
-    onSelect: () => ui.openDocumentConnect(s.source),
-  })),
-])
-const connectIssueMenu = computed(() => [
-  connectableIssueSources.value.map((s) => ({
-    label: s.label,
-    icon: s.icon,
-    onSelect: () => ui.openTaskConnect(s.source),
-  })),
-])
-const pendingDocs = computed(() => pendingContext.value.filter((c) => c.kind === 'document'))
 const pendingIssues = computed(() => pendingContext.value.filter((c) => c.kind === 'task'))
 
 // Linked issues whose body is in hand, surfaced read-only above the description so the
@@ -532,24 +497,6 @@ async function resolvePendingIssueBodies() {
   }
 }
 
-function addPending(item: PendingContext) {
-  if (pendingContext.value.some((c) => contextKey(c) === contextKey(item))) return
-  pendingContext.value = [...pendingContext.value, item]
-}
-function removePending(item: PendingContext) {
-  pendingContext.value = pendingContext.value.filter((c) => contextKey(c) !== contextKey(item))
-}
-
-// Context documents and issues are both picked through an inline search picker
-// (ContextDocumentPicker / ContextIssuePicker) rather than a dropdown that opens a
-// second modal — stacked page-level modals don't interact here, which is why the
-// old "Import a page…" / "Import an issue…" entries appeared to open something but
-// nothing was clickable. The "Attach" button toggles the relevant picker open.
-const showDocPicker = ref(false)
-const chosenDocKeys = computed(() => pendingDocs.value.map(contextKey))
-const showIssuePicker = ref(false)
-const chosenIssueKeys = computed(() => pendingIssues.value.map(contextKey))
-
 // Reset the form whenever the modal opens for a (new) container, and refresh the
 // imported docs/issues so the quick-pick list is current.
 watch(open, (isOpen) => {
@@ -591,8 +538,6 @@ watch(open, (isOpen) => {
   pipelineId.value = DEFAULT_PIPELINE_FOR_TYPE[taskType.value] ?? ''
   agentConfigValues.value = {}
   pendingContext.value = []
-  showDocPicker.value = false
-  showIssuePicker.value = false
   // Seed from a prefill when opened from another surface (e.g. "create task from
   // issue" sets the title + stages the issue as linked context). Pipeline / preset
   // are intentionally left at their defaults so the user confirms them here.
@@ -1211,202 +1156,15 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
             />
           </div>
 
-          <!-- Context documents (ungated; Attach disabled until a source is connected). -->
-          <div class="space-y-2">
-            <div class="flex items-center justify-between">
-              <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-                {{ t('board.addTask.contextDocuments') }}
-              </span>
-              <UButton
-                v-if="docsConnected"
-                color="neutral"
-                variant="soft"
-                size="xs"
-                :icon="showDocPicker ? 'i-lucide-x' : 'i-lucide-plus'"
-                @click="
-                  () => {
-                    showDocPicker = !showDocPicker
-                  }
-                "
-              >
-                {{ showDocPicker ? t('board.addTask.done') : t('board.addTask.attach') }}
-              </UButton>
-              <UDropdownMenu
-                v-else-if="connectableDocSources.length > 1"
-                :items="connectDocMenu"
-                :content="{ side: 'bottom', align: 'end' }"
-              >
-                <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plug">
-                  {{ t('board.addTask.connectSource') }}
-                </UButton>
-              </UDropdownMenu>
-              <UButton
-                v-else-if="connectableDocSources.length === 1"
-                color="neutral"
-                variant="soft"
-                size="xs"
-                icon="i-lucide-plug"
-                @click="ui.openDocumentConnect(connectableDocSources[0]!.source)"
-              >
-                {{
-                  t('board.addTask.connectSourceNamed', { source: connectableDocSources[0]!.label })
-                }}
-              </UButton>
-              <UButton
-                v-else
-                color="neutral"
-                variant="soft"
-                size="xs"
-                icon="i-lucide-plus"
-                disabled
-                :title="
-                  documents.available
-                    ? t('board.addTask.attachDocDisabledConnect')
-                    : t('board.addTask.attachDocDisabledEnable')
-                "
-              >
-                {{ t('board.addTask.attach') }}
-              </UButton>
-            </div>
-            <ContextDocumentPicker
-              v-if="showDocPicker && docsConnected"
-              :chosen-keys="chosenDocKeys"
-              @pick="addPending"
-            />
-            <div v-if="pendingDocs.length" class="space-y-1">
-              <div
-                v-for="item in pendingDocs"
-                :key="contextKey(item)"
-                class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300"
-              >
-                <UIcon
-                  :name="item.icon ?? 'i-lucide-file-text'"
-                  class="h-3.5 w-3.5 shrink-0 text-indigo-400"
-                />
-                <span class="truncate">{{ item.title }}</span>
-                <UBadge
-                  v-if="item.needsImport"
-                  color="neutral"
-                  variant="soft"
-                  size="xs"
-                  class="ms-1 shrink-0"
-                >
-                  {{ t('board.addTask.importsOnAdd') }}
-                </UBadge>
-                <button
-                  type="button"
-                  class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
-                  @click="removePending(item)"
-                >
-                  <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-                </button>
-              </div>
-            </div>
-            <p v-else class="text-[11px] text-slate-500">
-              {{ t('board.addTask.noDocsHint') }}
-            </p>
-          </div>
-
-          <!-- Context issues (ungated; Attach disabled until a tracker is connected). -->
-          <div class="space-y-2">
-            <div class="flex items-center justify-between">
-              <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-                {{ t('board.addTask.contextIssues') }}
-              </span>
-              <UButton
-                v-if="issuesConnected"
-                color="neutral"
-                variant="soft"
-                size="xs"
-                :icon="showIssuePicker ? 'i-lucide-x' : 'i-lucide-plus'"
-                @click="
-                  () => {
-                    showIssuePicker = !showIssuePicker
-                  }
-                "
-              >
-                {{ showIssuePicker ? t('board.addTask.done') : t('board.addTask.attach') }}
-              </UButton>
-              <UDropdownMenu
-                v-else-if="connectableIssueSources.length > 1"
-                :items="connectIssueMenu"
-                :content="{ side: 'bottom', align: 'end' }"
-              >
-                <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plug">
-                  {{ t('board.addTask.connectSource') }}
-                </UButton>
-              </UDropdownMenu>
-              <UButton
-                v-else-if="connectableIssueSources.length === 1"
-                color="neutral"
-                variant="soft"
-                size="xs"
-                icon="i-lucide-plug"
-                @click="ui.openTaskConnect(connectableIssueSources[0]!.source)"
-              >
-                {{
-                  t('board.addTask.connectSourceNamed', {
-                    source: connectableIssueSources[0]!.label,
-                  })
-                }}
-              </UButton>
-              <UButton
-                v-else
-                color="neutral"
-                variant="soft"
-                size="xs"
-                icon="i-lucide-plus"
-                disabled
-                :title="
-                  tasks.available
-                    ? t('board.addTask.attachIssueDisabledConnect')
-                    : t('board.addTask.attachIssueDisabledEnable')
-                "
-              >
-                {{ t('board.addTask.attach') }}
-              </UButton>
-            </div>
-            <!-- The container is what scopes the issue search to a repo, so the picker is
-                 only rendered once we have one (the modal is open, so we always do). -->
-            <ContextIssuePicker
-              v-if="showIssuePicker && issuesConnected && ui.addTaskContainerId"
-              :chosen-keys="chosenIssueKeys"
-              :scope-block-id="ui.addTaskContainerId"
-              @pick="addPending"
-            />
-            <div v-if="pendingIssues.length" class="space-y-1">
-              <div
-                v-for="item in pendingIssues"
-                :key="contextKey(item)"
-                class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300"
-              >
-                <UIcon
-                  :name="item.icon ?? 'i-lucide-square-check'"
-                  class="h-3.5 w-3.5 shrink-0 text-indigo-400"
-                />
-                <span class="truncate">{{ item.title }}</span>
-                <UBadge
-                  v-if="item.needsImport"
-                  color="neutral"
-                  variant="soft"
-                  size="xs"
-                  class="ms-1 shrink-0"
-                >
-                  {{ t('board.addTask.importsOnAdd') }}
-                </UBadge>
-                <button
-                  type="button"
-                  class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
-                  @click="removePending(item)"
-                >
-                  <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
-                </button>
-              </div>
-            </div>
-            <p v-else class="text-[11px] text-slate-500">
-              {{ t('board.addTask.noIssuesHint') }}
-            </p>
-          </div>
+          <!-- Context documents + issues, staged here and linked once the task exists.
+               Shared with the initiative create modal (ContextAttachmentFields). -->
+          <ContextAttachmentFields
+            v-if="ui.addTaskContainerId"
+            v-model="pendingContext"
+            :scope-block-id="ui.addTaskContainerId"
+            :docs-hint="t('board.addTask.noDocsHint')"
+            :issues-hint="t('board.addTask.noIssuesHint')"
+          />
 
           <p class="text-[11px] text-slate-500">
             {{ t('board.addTask.plannedHint') }}

package/app/components/board/CreateInitiativeModal.vue

@@ -9,6 +9,11 @@
 // The preset form is rendered GENERICALLY from `descriptor.fields` (InitiativePresetFields) — zero
 // per-preset frontend code. A preset with a repo-detection probe prefills its form from the frame's
 // repo on selection (best-effort; failures fall back to descriptor defaults and never block create).
+//
+// The user can also attach CONTEXT — requirements, RFCs, PRDs, tracker issues — which the whole
+// planning pipeline then reads: the interviewer stops asking what an attached document already
+// answers, and the analyst and planner ground the plan in it. Linking needs a block id, so picks
+// are staged and committed once the initiative exists (the add-task flow's shared orchestration).
 import { computed, ref, watch } from 'vue'
 import {
   sanitizeInitiativePresetInputs,
@@ -18,12 +23,15 @@ import type { InitiativePresetInputs, InitiativePresetInputValue } from '~/types
 import { defaultPresetInputs } from '~/utils/initiative'
 import { GENERIC_PRESET_ID } from '~/stores/initiative'
 import InitiativePresetFields from '~/components/board/InitiativePresetFields.vue'
+import ContextAttachmentFields from '~/components/context/ContextAttachmentFields.vue'
+import type { PendingContext } from '~/composables/useContextLinking'
 
 const ui = useUiStore()
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
 const toast = useToast()
 const { t } = useI18n()
+const { linkPending, presentLinkFailures } = useContextLinking()
 
 const open = computed({
   get: () => ui.createInitiativeFrameId !== null,
@@ -45,6 +53,8 @@ const selectedPreset = computed(() => initiatives.presetById(selectedPresetId.va
 const title = ref('')
 const description = ref('')
 const inputs = ref<InitiativePresetInputs>({})
+// Context the user chose to attach, committed once the initiative block exists (see create()).
+const pendingContext = ref<PendingContext[]>([])
 
 // Monotonic token so a slow probe response from a since-changed preset/frame is discarded.
 let probeSeq = 0
@@ -97,6 +107,7 @@ watch(open, (o) => {
   if (!o) return
   title.value = ''
   description.value = ''
+  pendingContext.value = []
   selectedPresetId.value = GENERIC_PRESET_ID
   applyPreset()
 })
@@ -123,6 +134,12 @@ async function create() {
         ? sanitizeInitiativePresetInputs(descriptor, inputs.value)
         : undefined,
     })
+    // Surface the SPECIFIC cause of any attachment that couldn't be linked (a GitHub
+    // permission/visibility error, a not-found doc, …) rather than a bare count. The initiative
+    // itself is already created, so a failed attachment never costs the user the form.
+    presentLinkFailures(await linkPending(block.id, pendingContext.value), block.id, {
+      title: (count) => t('initiative.create.linkFailed', { count }, count),
+    })
     ui.closeCreateInitiative()
     // Select the fresh block so the inspector offers "Run planning" right away.
     ui.select(block.id)
@@ -216,6 +233,16 @@ async function create() {
           :descriptor="selectedPreset"
         />
 
+        <!-- Attached requirements / issues, staged here and linked once the block exists. The
+             issue search is scoped to the service frame, which is what resolves its repo. -->
+        <ContextAttachmentFields
+          v-if="ui.createInitiativeFrameId"
+          v-model="pendingContext"
+          :scope-block-id="ui.createInitiativeFrameId"
+          :docs-hint="t('initiative.create.contextDocsHint')"
+          :issues-hint="t('initiative.create.contextIssuesHint')"
+        />
+
         <p class="text-[11px] text-slate-500">
           {{ t('initiative.create.hint') }}
         </p>

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

@@ -39,6 +39,7 @@ const {
   planningPipeline,
   running,
   awaitingAnswers,
+  interviewing,
   starting,
   runPlanning,
   openPlanning,
@@ -116,6 +117,19 @@ function onHandle(e: PointerEvent) {
         >
           {{ t('initiative.inspector.answerPlanning') }}
         </UButton>
+        <!-- Mid-pass: nothing to answer, but keep the route into the window (it shows the wait). -->
+        <UButton
+          v-else-if="interviewing"
+          data-testid="initiative-card-planning-in-progress"
+          size="xs"
+          variant="soft"
+          color="neutral"
+          icon="i-lucide-loader-circle"
+          :ui="{ leadingIcon: 'animate-spin' }"
+          @click.stop="openPlanning"
+        >
+          {{ t('initiative.inspector.planningInProgress') }}
+        </UButton>
         <UButton
           v-else
           data-testid="initiative-card-run-planning"

package/app/components/common/InterviewGateNotice.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// The shared "the interview is not waiting on you" panel, rendered by BOTH interview-gate windows
+// (initiative planning, document interview) in place of the question list. It exists because those
+// two states — a pass running, and a run that stopped before the interview settled — are the ones
+// a window keyed on the interview entity alone cannot show at all, which is what made continue /
+// proceed read as dead buttons. Copy is per-feature (passed in); the treatment is shared, so the
+// two windows can't drift on how a wait or a failure looks. See
+// `docs/initiatives/clarification-items.md`.
+defineProps<{
+  /** `working` = a pass is in flight (spinner); `failed` = the run stopped (error treatment). */
+  variant: 'working' | 'failed'
+  /** The headline, already localized by the calling window. */
+  title: string
+  /** The explanatory line under it, already localized. */
+  hint: string
+  /** The window's own `data-testid`, so each keeps a stable selector. */
+  testid: string
+}>()
+</script>
+
+<template>
+  <div
+    v-if="variant === 'working'"
+    class="flex flex-col items-center gap-2 rounded-lg border border-slate-800 bg-slate-950/40 p-6 text-center"
+    :data-testid="testid"
+  >
+    <UIcon name="i-lucide-loader-circle" class="h-5 w-5 animate-spin text-indigo-300" />
+    <p class="text-[13px] text-slate-200">{{ title }}</p>
+    <p class="text-[12px] text-slate-400">{{ hint }}</p>
+  </div>
+  <div
+    v-else
+    class="rounded-lg border border-red-900/60 bg-red-950/20 p-4 text-center"
+    :data-testid="testid"
+  >
+    <p class="text-[13px] text-red-200">{{ title }}</p>
+    <p class="mt-1 text-[12px] text-slate-400">{{ hint }}</p>
+  </div>
+</template>