@cat-factory/app 0.87.4 → 0.88.0

package/app/components/board/RecurringPipelineModal.vue

@@ -5,7 +5,8 @@
 // task block inside the frame that the schedule re-runs. When the Tech-debt
 // pipeline is picked, the workspace issue-tracker choice is surfaced inline (it is
 // where that pipeline files its ticket) and saved alongside.
-import type { Recurrence, ScheduleTemplate } from '~/types/recurring'
+import type { IssueIntakeConfig, Recurrence, ScheduleTemplate } from '~/types/recurring'
+import type { TaskSourceKind } from '~/types/domain'
 import { pipelineAllowedForSchedule } from '~/utils/pipeline'
 
 const ui = useUiStore()
@@ -13,6 +14,7 @@ const board = useBoardStore()
 const pipelines = usePipelinesStore()
 const recurring = useRecurringPipelinesStore()
 const tracker = useTrackerStore()
+const tasks = useTasksStore()
 const toast = useToast()
 const { t } = useI18n()
 
@@ -41,6 +43,17 @@ const trackerKind = ref<'github' | 'jira' | 'linear' | null>(null)
 const jiraProjectKey = ref('')
 const linearTeamId = ref('')
 
+// Issue-intake config (only relevant when the picked pipeline has a `bug-intake` step). Which
+// tracker board + predicates a recurring bug-triage run pulls its one issue from, per-schedule.
+const intakeSource = ref<TaskSourceKind | null>(null)
+const intakeJiraProjectKey = ref('')
+const intakeLinearTeamId = ref('')
+const intakeGithubRepo = ref('')
+const intakeTitleFragment = ref('')
+const intakeLabels = ref('') // comma-separated in the UI, sent as an array
+const intakeIssueType = ref('')
+const intakeInProgressLabel = ref('')
+
 function defaultRecurrence(): Recurrence {
   return {
     intervalHours: 168, // weekly
@@ -77,6 +90,19 @@ const template = computed<ScheduleTemplate>(() => {
 })
 const isTechDebt = computed(() => template.value === 'tech-debt')
 
+// A pipeline whose ENABLED steps include `bug-intake` pulls its work from the tracker board, so
+// the intake config is surfaced + required. Mirrors the backend `pipelineHasEnabledBugIntake`
+// (a disabled step imposes nothing), so the modal doesn't demand config for a step that won't run.
+const isBugIntake = computed(() => {
+  const pipeline = selectedPipeline.value
+  if (!pipeline) return false
+  return pipeline.agentKinds.some(
+    (kind, i) => kind === 'bug-intake' && pipeline.enabled?.[i] !== false,
+  )
+})
+// Sources that can back intake right now (connected / App-installed AND enabled).
+const intakeSources = computed(() => tasks.offeredSources)
+
 watch(open, (isOpen) => {
   if (!isOpen) return
   name.value = ''
@@ -92,9 +118,62 @@ watch(open, (isOpen) => {
   trackerKind.value = tracker.settings.tracker
   jiraProjectKey.value = tracker.settings.jiraProjectKey ?? ''
   linearTeamId.value = tracker.settings.linearTeamId ?? ''
+  intakeSource.value = null
+  intakeJiraProjectKey.value = ''
+  intakeLinearTeamId.value = ''
+  intakeGithubRepo.value = ''
+  intakeTitleFragment.value = ''
+  intakeLabels.value = ''
+  intakeIssueType.value = ''
+  intakeInProgressLabel.value = ''
+  // Load the connected task sources so the intake source picker is populated.
+  void tasks.probe()
+})
+
+// The board field required for the picked source must be filled before a bug-intake schedule saves.
+const intakeReady = computed(() => {
+  if (!isBugIntake.value) return true
+  if (intakeSource.value === 'jira') return intakeJiraProjectKey.value.trim().length > 0
+  if (intakeSource.value === 'linear') return intakeLinearTeamId.value.trim().length > 0
+  if (intakeSource.value === 'github') return intakeGithubRepo.value.trim().length > 0
+  return false
 })
 
-const canAdd = computed(() => name.value.trim().length > 0 && pipelineId.value.length > 0)
+function buildIssueIntake(): IssueIntakeConfig {
+  const source = intakeSource.value as TaskSourceKind
+  const labels = intakeLabels.value
+    .split(',')
+    .map((l) => l.trim())
+    .filter(Boolean)
+  return {
+    source,
+    board: {
+      ...(source === 'jira' && intakeJiraProjectKey.value.trim()
+        ? { jiraProjectKey: intakeJiraProjectKey.value.trim() }
+        : {}),
+      ...(source === 'linear' && intakeLinearTeamId.value.trim()
+        ? { linearTeamId: intakeLinearTeamId.value.trim() }
+        : {}),
+      ...(source === 'github' && intakeGithubRepo.value.trim()
+        ? { githubRepo: intakeGithubRepo.value.trim() }
+        : {}),
+    },
+    predicates: {
+      ...(intakeTitleFragment.value.trim()
+        ? { titleFragment: intakeTitleFragment.value.trim() }
+        : {}),
+      ...(labels.length ? { labels } : {}),
+      ...(intakeIssueType.value.trim() ? { issueType: intakeIssueType.value.trim() } : {}),
+    },
+    ...(source === 'github' && intakeInProgressLabel.value.trim()
+      ? { inProgressLabel: intakeInProgressLabel.value.trim() }
+      : {}),
+  }
+}
+
+const canAdd = computed(
+  () => name.value.trim().length > 0 && pipelineId.value.length > 0 && intakeReady.value,
+)
 
 async function add() {
   const frameId = ui.addRecurringFrameId
@@ -119,6 +198,7 @@ async function add() {
       onDemand: onDemand.value,
       ...(onDemand.value ? {} : { recurrence: recurrence.value }),
       ...(description.value.trim() ? { description: description.value.trim() } : {}),
+      ...(isBugIntake.value ? { issueIntake: buildIssueIntake() } : {}),
     })
     ui.closeAddRecurring()
   } catch (e) {
@@ -238,6 +318,86 @@ async function add() {
           </UFormField>
         </div>
 
+        <div v-if="isBugIntake" class="space-y-3 rounded-lg border border-slate-800 p-3">
+          <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('board.recurring.intake') }}
+          </p>
+          <p class="text-[11px] text-slate-500">
+            {{ t('board.recurring.intakeHint') }}
+          </p>
+          <p v-if="intakeSources.length === 0" class="text-[11px] text-amber-500">
+            {{ t('board.recurring.intakeNoSources') }}
+          </p>
+          <div v-else class="flex flex-wrap gap-1">
+            <UButton
+              v-for="s in intakeSources"
+              :key="s.source"
+              size="xs"
+              :color="intakeSource === s.source ? 'primary' : 'neutral'"
+              :variant="intakeSource === s.source ? 'solid' : 'subtle'"
+              :icon="s.icon"
+              @click="intakeSource = s.source"
+            >
+              {{ s.label }}
+            </UButton>
+          </div>
+
+          <UFormField
+            v-if="intakeSource === 'jira'"
+            :label="t('board.recurring.jiraProjectKey')"
+            required
+          >
+            <UInput
+              v-model="intakeJiraProjectKey"
+              :placeholder="t('board.recurring.jiraProjectKeyPlaceholder')"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField
+            v-if="intakeSource === 'linear'"
+            :label="t('board.recurring.linearTeamId')"
+            required
+          >
+            <UInput v-model="intakeLinearTeamId" placeholder="team_…" class="w-full" />
+          </UFormField>
+          <UFormField
+            v-if="intakeSource === 'github'"
+            :label="t('board.recurring.intakeGithubRepo')"
+            required
+          >
+            <!-- A GitHub repo ref is always the literal `owner/name` path, never localized. -->
+            <UInput v-model="intakeGithubRepo" placeholder="owner/name" class="w-full" />
+          </UFormField>
+
+          <template v-if="intakeSource">
+            <UFormField :label="t('board.recurring.intakeTitleFragment')">
+              <UInput
+                v-model="intakeTitleFragment"
+                :placeholder="t('board.recurring.intakeTitleFragmentPlaceholder')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField :label="t('board.recurring.intakeLabels')">
+              <UInput
+                v-model="intakeLabels"
+                :placeholder="t('board.recurring.intakeLabelsPlaceholder')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField :label="t('board.recurring.intakeIssueType')">
+              <!-- A literal issue-type example (tracker vocabulary), kept verbatim across locales. -->
+              <UInput v-model="intakeIssueType" placeholder="bug" class="w-full" />
+            </UFormField>
+            <UFormField
+              v-if="intakeSource === 'github'"
+              :label="t('board.recurring.intakeInProgressLabel')"
+            >
+              <!-- A literal label example, kept verbatim across locales. -->
+              <UInput v-model="intakeInProgressLabel" placeholder="in-progress" class="w-full" />
+            </UFormField>
+          </template>
+        </div>
+
         <p class="text-[11px] text-slate-500">
           {{ t('board.recurring.footerHint') }}
         </p>

package/app/components/initiative/InitiativeTrackerWindow.vue

@@ -7,9 +7,11 @@
 // 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 { computed, reactive, ref } from 'vue'
+import type { InitiativeFollowUp, InitiativeItem } from '~/types/domain'
 import {
+  INITIATIVE_FOLLOWUP_STATUS_CHIPS,
+  INITIATIVE_FOLLOWUP_STATUS_LABEL_KEYS,
   INITIATIVE_ITEM_STATUS_CHIPS,
   INITIATIVE_ITEM_STATUS_LABEL_KEYS,
   INITIATIVE_STATUS_LABEL_KEYS,
@@ -19,6 +21,7 @@ import {
 const board = useBoardStore()
 const initiatives = useInitiativesStore()
 const { t } = useI18n()
+const toast = useToast()
 
 const { open, blockId, close } = useResultView('initiative-tracker', {
   onOpen: (id) => void initiatives.load(id),
@@ -52,6 +55,93 @@ function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?:
   ].filter((a): a is string => a !== null)
   return axes.length ? axes.join(' · ') : t('initiative.tracker.axisNever')
 }
+
+// ---- Curation (slice 4): only meaningful while the initiative is still executing ----
+const editable = computed(() => initiative.value?.status === 'executing')
+
+/** Report a failed curation call as a toast (a stale-rev CAS conflict, an illegal edit, …). */
+function reportError(error: unknown) {
+  const message = error instanceof Error ? error.message : t('initiative.curation.failed')
+  toast.add({ title: t('initiative.curation.failed'), description: message, color: 'error' })
+}
+
+// Follow-up promotion: an inline per-follow-up form (phase + optional title override).
+const promotingId = ref<string | null>(null)
+const promoteForm = reactive<{ phaseId: string; title: string }>({ phaseId: '', title: '' })
+
+function startPromote(followUp: InitiativeFollowUp) {
+  const sourcePhase = (initiative.value?.items ?? []).find(
+    (i) => i.id === followUp.sourceItemId,
+  )?.phaseId
+  promoteForm.phaseId = sourcePhase ?? phases.value[0]?.id ?? ''
+  promoteForm.title = followUp.title
+  promotingId.value = followUp.id
+}
+
+async function submitPromote(followUp: InitiativeFollowUp) {
+  if (!initiative.value || !promoteForm.phaseId) return
+  try {
+    await initiatives.promoteFollowUp(initiative.value.id, followUp.id, {
+      phaseId: promoteForm.phaseId,
+      ...(promoteForm.title.trim() && promoteForm.title.trim() !== followUp.title
+        ? { title: promoteForm.title.trim() }
+        : {}),
+    })
+    promotingId.value = null
+  } catch (error) {
+    reportError(error)
+  }
+}
+
+async function dismissFollowUp(followUp: InitiativeFollowUp) {
+  if (!initiative.value) return
+  try {
+    await initiatives.dismissFollowUp(initiative.value.id, followUp.id)
+  } catch (error) {
+    reportError(error)
+  }
+}
+
+// Item status control: retry a blocked item, or skip a pending/blocked one.
+async function itemAction(item: InitiativeItem, action: 'retry' | 'skip') {
+  if (!initiative.value) return
+  try {
+    await initiatives.updateItem(initiative.value.id, item.id, { action })
+  } catch (error) {
+    reportError(error)
+  }
+}
+
+// Policy editing: retune the two scalar knobs (concurrency + default pipeline) while preserving
+// the planner-authored rules. A full rule editor stays out of scope — re-plan to reshape rules.
+const editingPolicy = ref(false)
+const policyForm = reactive<{ maxConcurrent: number; defaultPipelineId: string }>({
+  maxConcurrent: 1,
+  defaultPipelineId: '',
+})
+
+function startEditPolicy() {
+  const policy = initiative.value?.policy
+  if (!policy) return
+  policyForm.maxConcurrent = policy.maxConcurrent
+  policyForm.defaultPipelineId = policy.defaultPipelineId
+  editingPolicy.value = true
+}
+
+async function savePolicy() {
+  const policy = initiative.value?.policy
+  if (!initiative.value || !policy) return
+  try {
+    await initiatives.updatePolicy(initiative.value.id, {
+      ...policy,
+      maxConcurrent: policyForm.maxConcurrent,
+      defaultPipelineId: policyForm.defaultPipelineId.trim() || policy.defaultPipelineId,
+    })
+    editingPolicy.value = false
+  } catch (error) {
+    reportError(error)
+  }
+}
 </script>
 
 <template>
@@ -193,10 +283,34 @@ function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?:
                         <div v-if="item.note" class="mt-0.5 text-[10px] text-amber-300/80">
                           {{ item.note }}
                         </div>
+                        <div
+                          v-if="
+                            editable && (item.status === 'blocked' || item.status === 'pending')
+                          "
+                          class="mt-1 flex gap-1.5"
+                        >
+                          <button
+                            v-if="item.status === 'blocked'"
+                            class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800 disabled:opacity-50"
+                            :disabled="initiatives.curating"
+                            :data-testid="`initiative-item-retry-${item.id}`"
+                            @click="itemAction(item, 'retry')"
+                          >
+                            {{ t('initiative.curation.retry') }}
+                          </button>
+                          <button
+                            class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800 disabled:opacity-50"
+                            :disabled="initiatives.curating"
+                            :data-testid="`initiative-item-skip-${item.id}`"
+                            @click="itemAction(item, 'skip')"
+                          >
+                            {{ t('initiative.curation.skip') }}
+                          </button>
+                        </div>
                       </td>
                       <td class="px-3 py-2 align-top">
                         <UBadge
-                          :color="INITIATIVE_ITEM_STATUS_CHIPS[item.status] as any"
+                          :color="INITIATIVE_ITEM_STATUS_CHIPS[item.status]"
                           variant="subtle"
                           size="sm"
                         >
@@ -225,10 +339,20 @@ function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?:
 
             <!-- 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">
+              <div class="mb-1 flex items-center gap-2">
+                <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  {{ t('initiative.tracker.policy') }}
+                </h3>
+                <button
+                  v-if="editable && !editingPolicy"
+                  class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800"
+                  data-testid="initiative-policy-edit"
+                  @click="startEditPolicy"
+                >
+                  {{ t('initiative.curation.edit') }}
+                </button>
+              </div>
+              <ul v-if="!editingPolicy" class="text-[12px] text-slate-300">
                 <li>
                   {{
                     t('initiative.tracker.maxConcurrent', {
@@ -245,6 +369,45 @@ function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?:
                   <code class="text-sky-300">{{ initiative.policy.defaultPipelineId }}</code>
                 </li>
               </ul>
+              <!-- Edit form: the two scalar knobs; planner-authored rules are preserved. -->
+              <div v-else class="flex flex-col gap-2 rounded-lg border border-slate-800 p-3">
+                <label class="flex items-center gap-2 text-[12px] text-slate-300">
+                  <span class="w-40">{{ t('initiative.curation.maxConcurrentField') }}</span>
+                  <input
+                    v-model.number="policyForm.maxConcurrent"
+                    type="number"
+                    min="1"
+                    max="20"
+                    class="w-20 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-slate-200"
+                    data-testid="initiative-policy-max-concurrent"
+                  />
+                </label>
+                <label class="flex items-center gap-2 text-[12px] text-slate-300">
+                  <span class="w-40">{{ t('initiative.curation.defaultPipelineField') }}</span>
+                  <input
+                    v-model="policyForm.defaultPipelineId"
+                    type="text"
+                    class="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 font-mono text-[11px] text-slate-200"
+                    data-testid="initiative-policy-default-pipeline"
+                  />
+                </label>
+                <div class="flex gap-2">
+                  <button
+                    class="rounded bg-indigo-600 px-2 py-1 text-[11px] text-white hover:bg-indigo-500 disabled:opacity-50"
+                    :disabled="initiatives.curating"
+                    data-testid="initiative-policy-save"
+                    @click="savePolicy"
+                  >
+                    {{ t('initiative.curation.save') }}
+                  </button>
+                  <button
+                    class="rounded border border-slate-700 px-2 py-1 text-[11px] text-slate-300 hover:bg-slate-800"
+                    @click="editingPolicy = false"
+                  >
+                    {{ t('initiative.curation.cancel') }}
+                  </button>
+                </div>
+              </div>
             </section>
 
             <!-- Logs -->
@@ -275,10 +438,85 @@ function ruleAxes(rule: { minComplexity?: number; minRisk?: number; minImpact?:
               <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>
+              <ul class="flex flex-col gap-2 text-[13px] text-slate-300">
+                <li
+                  v-for="f in initiative.followUps"
+                  :key="f.id"
+                  class="rounded-lg border border-slate-800 p-2.5"
+                  :data-testid="`initiative-followup-${f.id}`"
+                >
+                  <div class="flex items-start gap-2">
+                    <div class="min-w-0 flex-1">
+                      <span class="font-medium">{{ f.title }}</span>
+                      <span v-if="f.detail" class="text-slate-400"> — {{ f.detail }}</span>
+                    </div>
+                    <UBadge
+                      :color="INITIATIVE_FOLLOWUP_STATUS_CHIPS[f.status]"
+                      variant="subtle"
+                      size="sm"
+                    >
+                      {{ t(INITIATIVE_FOLLOWUP_STATUS_LABEL_KEYS[f.status]) }}
+                    </UBadge>
+                  </div>
+                  <!-- Triage actions for an open follow-up (only while executing) -->
+                  <div v-if="editable && f.status === 'open'" class="mt-2">
+                    <div v-if="promotingId === f.id" class="flex flex-col gap-2">
+                      <label class="flex items-center gap-2 text-[12px]">
+                        <span class="text-slate-400">{{
+                          t('initiative.curation.phaseField')
+                        }}</span>
+                        <select
+                          v-model="promoteForm.phaseId"
+                          class="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-slate-200"
+                          data-testid="initiative-promote-phase"
+                        >
+                          <option v-for="p in phases" :key="p.id" :value="p.id">
+                            {{ p.title }}
+                          </option>
+                        </select>
+                      </label>
+                      <input
+                        v-model="promoteForm.title"
+                        type="text"
+                        class="rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[12px] text-slate-200"
+                        :placeholder="t('initiative.curation.itemTitlePlaceholder')"
+                        data-testid="initiative-promote-title"
+                      />
+                      <div class="flex gap-2">
+                        <button
+                          class="rounded bg-indigo-600 px-2 py-1 text-[11px] text-white hover:bg-indigo-500 disabled:opacity-50"
+                          :disabled="initiatives.curating || !promoteForm.phaseId"
+                          data-testid="initiative-promote-submit"
+                          @click="submitPromote(f)"
+                        >
+                          {{ t('initiative.curation.promoteConfirm') }}
+                        </button>
+                        <button
+                          class="rounded border border-slate-700 px-2 py-1 text-[11px] text-slate-300 hover:bg-slate-800"
+                          @click="promotingId = null"
+                        >
+                          {{ t('initiative.curation.cancel') }}
+                        </button>
+                      </div>
+                    </div>
+                    <div v-else class="flex gap-1.5">
+                      <button
+                        class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800"
+                        data-testid="initiative-followup-promote"
+                        @click="startPromote(f)"
+                      >
+                        {{ t('initiative.curation.promote') }}
+                      </button>
+                      <button
+                        class="rounded border border-slate-700 px-1.5 py-0.5 text-[10px] text-slate-300 hover:bg-slate-800 disabled:opacity-50"
+                        :disabled="initiatives.curating"
+                        data-testid="initiative-followup-dismiss"
+                        @click="dismissFollowUp(f)"
+                      >
+                        {{ t('initiative.curation.dismiss') }}
+                      </button>
+                    </div>
+                  </div>
                 </li>
               </ul>
             </section>

package/app/components/panels/MergerResultView.vue

@@ -66,6 +66,7 @@ const REASON_KEYS: Record<MergeDecision['reason'], string> = {
   no_rationale: 'panels.mergerResult.reason.no_rationale',
   no_assessment: 'panels.mergerResult.reason.no_assessment',
   merge_failed: 'panels.mergerResult.reason.merge_failed',
+  merge_partial: 'panels.mergerResult.reason.merge_partial',
 }
 const OUTCOME_KEYS: Record<MergeDecision['outcome'], string> = {
   auto_merged: 'panels.mergerResult.outcome.auto_merged',

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 // Service-level best-practice fragments (frame blocks). These are the programming
 // standards/guidelines for the whole service; at run time their bodies are folded
@@ -19,8 +21,6 @@ const { t } = useI18n()
 
 onMounted(() => fragments.ensureLoaded())
 
-type MenuItem = { label: string; icon?: string; onSelect: () => void }
-
 // An id the catalog no longer resolves (removed/suppressed after selection) still
 // renders — labelled by its raw id — so it stays visible and removable.
 const selectedFragments = computed(() =>
@@ -32,8 +32,8 @@ const selectedFragments = computed(() =>
 // A trailing group that jumps from "attach a fragment" to authoring/editing the
 // library itself (board tier always; account tier when accounts are enabled).
 // Open to every member — managing fragments is not an admin-only action.
-const manageItems = computed<MenuItem[]>(() => {
-  const items: MenuItem[] = [
+const manageItems = computed<DropdownMenuItem[]>(() => {
+  const items: DropdownMenuItem[] = [
     {
       label: t('inspector.fragments.manageBoard'),
       icon: 'i-lucide-book-marked',
@@ -50,18 +50,14 @@ const manageItems = computed<MenuItem[]>(() => {
   return items
 })
 
-// Picker menu: every pool fragment not already selected, grouped by category, with
-// the management links appended as the final group.
-const fragmentMenu = computed<MenuItem[][]>(() => {
+// Picker menu: every pool fragment not already selected, grouped into labelled
+// per-category sections, with the management links appended as the final group.
+const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
   const selected = new Set(props.block.serviceFragmentIds ?? [])
-  const groups = new Map<string, MenuItem[]>()
-  for (const f of fragments.fragments) {
-    if (selected.has(f.id)) continue
-    const items = groups.get(f.category) ?? []
-    items.push({ label: f.title, onSelect: () => addFragment(f.id) })
-    groups.set(f.category, items)
-  }
-  return [...groups.values(), manageItems.value]
+  return [
+    ...buildFragmentPickerGroups(fragments.fragments, (id) => selected.has(id), addFragment),
+    manageItems.value,
+  ]
 })
 
 function addFragment(id: string) {

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 const props = defineProps<{ block: Block }>()
 
@@ -14,8 +16,6 @@ const { t } = useI18n()
 // task inspector mounts — mirrors ServiceFragments; ensureLoaded is a no-op while current.
 onMounted(() => fragments.ensureLoaded())
 
-type MenuItem = { label: string; icon?: string; onSelect: () => void }
-
 // ---- best-practice prompt fragments ----------------------------------------
 // Selected fragments, resolved against the catalog. An id the catalog no longer
 // resolves (removed/suppressed after selection) still renders — labelled by its
@@ -29,8 +29,8 @@ const selectedFragments = computed(() =>
 // A trailing group that jumps from "attach a fragment" to authoring/editing the
 // library itself (board tier always; account tier when accounts are enabled).
 // Open to every member — managing fragments is not an admin-only action.
-const manageItems = computed<MenuItem[]>(() => {
-  const items: MenuItem[] = [
+const manageItems = computed<DropdownMenuItem[]>(() => {
+  const items: DropdownMenuItem[] = [
     {
       label: t('inspector.fragments.manageBoard'),
       icon: 'i-lucide-book-marked',
@@ -48,18 +48,18 @@ const manageItems = computed<MenuItem[]>(() => {
 })
 
 // Picker menu: fragments suitable for this block's type, not already selected,
-// grouped by category so the dropdown reads like the catalog, with the management
-// links appended as the final group.
-const fragmentMenu = computed<MenuItem[][]>(() => {
+// grouped into labelled per-category sections so the dropdown reads like the catalog,
+// with the management links appended as the final group.
+const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
   const selected = new Set(props.block.fragmentIds ?? [])
-  const groups = new Map<string, MenuItem[]>()
-  for (const f of fragments.forBlockType(props.block.type)) {
-    if (selected.has(f.id)) continue
-    const items = groups.get(f.category) ?? []
-    items.push({ label: f.title, onSelect: () => addFragment(f.id) })
-    groups.set(f.category, items)
-  }
-  return [...groups.values(), manageItems.value]
+  return [
+    ...buildFragmentPickerGroups(
+      fragments.forBlockType(props.block.type),
+      (id) => selected.has(id),
+      addFragment,
+    ),
+    manageItems.value,
+  ]
 })
 
 function addFragment(id: string) {