@cat-factory/app 0.143.0 → 0.144.0

package/app/components/board/AddTaskModal.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 // Create a new task on the board. The user names the task and writes its
-// description themselves (a REVIEW task is the one exception — its title is optional
-// and derived from the target PR when left blank, since the PR is the subject). The
-// task lands in `planned` state; it is never launched here. The user starts a
-// pipeline on it explicitly (and can keep editing it until they do).
+// description themselves (a REVIEW task is the one exception — it shows neither Title
+// nor Description: the target PR IS the subject, so the title is derived from the PR
+// reference and any notes go in the dedicated "Review focus" field). The task lands in
+// `planned` state; it is never launched here. The user starts a pipeline on it
+// explicitly (and can keep editing it until they do).
 //
 // The form also shows ungated "Context documents" / "Context issues" sections
 // (mirroring the task inspector): an inline search picker (ContextDocumentPicker /
@@ -20,12 +21,11 @@ import type {
   TaskTypeFields,
 } from '~/types/domain'
 import { DOC_KINDS, DOC_KIND_FIELDS } from '~/types/domain'
-import type { DropdownMenuItem } from '@nuxt/ui'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
+import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 import { riskPolicyOptionLabel, riskPolicySummary } from '~/utils/riskPolicy'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
-import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -36,7 +36,6 @@ const modelPresets = useModelPresetsStore()
 const pipelines = usePipelinesStore()
 const agentConfig = useAgentConfigStore()
 const fragments = useFragmentsStore()
-const accounts = useAccountsStore()
 const toast = useToast()
 const { t } = useI18n()
 
@@ -313,50 +312,10 @@ const selectedModelPresetLabel = computed(() => {
 })
 
 // ---- best-practice prompt fragments (pinned at creation) -------------------
-// The fragments already chosen, resolved against the catalog. An id the catalog no longer
-// resolves still renders (labelled by its raw id) so it stays visible and removable — mirrors
-// the inspector's TaskStructure picker.
-const selectedFragments = computed(() =>
-  fragmentIds.value.map((id) => fragments.getFragment(id) ?? { id, title: id, summary: '' }),
-)
-// A trailing group linking out to the fragment library (board tier always; account tier when
-// enabled) — managing fragments is open to every member, exactly like the inspector picker.
-const fragmentManageItems = computed<DropdownMenuItem[]>(() => {
-  const items: DropdownMenuItem[] = [
-    {
-      label: t('inspector.fragments.manageBoard'),
-      icon: 'i-lucide-book-marked',
-      onSelect: () => ui.openFragmentLibrary(),
-    },
-  ]
-  if (accounts.enabled) {
-    items.push({
-      label: t('inspector.fragments.manageAccount'),
-      icon: 'i-lucide-users',
-      onSelect: () => ui.openAccountSettings('fragments'),
-    })
-  }
-  return items
-})
-// Picker menu: fragments appropriate to the enclosing frame's block type (the "scope"), not
-// already selected, grouped by category, with the management links appended as the final group.
-// Falls back to `service` before a frame resolves so the catalog is still browsable.
-const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
-  const selected = new Set(fragmentIds.value)
-  return [
-    ...buildFragmentPickerGroups(
-      fragments.forBlockType(frame.value?.type ?? 'service'),
-      (id) => selected.has(id),
-      (id) => {
-        if (!fragmentIds.value.includes(id)) fragmentIds.value = [...fragmentIds.value, id]
-      },
-    ),
-    fragmentManageItems.value,
-  ]
-})
-function removeFragment(id: string) {
-  fragmentIds.value = fragmentIds.value.filter((x) => x !== id)
-}
+// The pool the shared <FragmentSelector> offers: fragments appropriate to the enclosing frame's
+// block type (the "scope"). Falls back to `service` before a frame resolves so the catalog is
+// still browsable.
+const fragmentPool = computed(() => fragments.forBlockType(frame.value?.type ?? 'service'))
 
 // Hide UI-testing pipelines (`tester-ui` / `visual-confirmation`) when the target frame has no
 // UI to exercise — they'd be refused server-side (see utils/pipeline + the backend gate). Also
@@ -543,7 +502,11 @@ watch(open, (isOpen) => {
   docOutlineHints.value = ''
   reviewPrRef.value = ''
   reviewFocus.value = ''
-  fragmentIds.value = []
+  // Pre-seed the best-practice fragments from the enclosing service's standards, so a new task
+  // ships with its service's fragments already selected (and freely add/removable here). The task
+  // OWNS this selection from creation — the engine folds exactly these, without re-unioning the
+  // service's set, so removing one here actually drops it for this task.
+  fragmentIds.value = [...(frame.value?.serviceFragmentIds ?? [])]
   for (const key of Object.keys(docKindFieldValues) as DocKindFieldKey[])
     delete docKindFieldValues[key]
   riskPolicyId.value = ''
@@ -663,7 +626,10 @@ async function add() {
       ...(Object.keys(agentConfigValues.value).length
         ? { agentConfig: agentConfigValues.value }
         : {}),
-      ...(fragmentIds.value.length ? { fragmentIds: [...fragmentIds.value] } : {}),
+      // Always send the (service-seeded, then user-edited) selection — including an empty list,
+      // which means "the user cleared the inherited picks" and must be honoured rather than
+      // re-seeded from the service. The task owns its fragments from here.
+      fragmentIds: [...fragmentIds.value],
       ...(technical.value ? { technical: true } : {}),
     })
     if (block) {
@@ -732,65 +698,62 @@ async function add() {
         </div>
 
         <template v-if="!isRecurring">
-          <UFormField
-            :label="t('board.addTask.titleField')"
-            :required="!isReview"
-            :hint="isReview ? t('board.addTask.optional') : undefined"
-          >
+          <!-- A review task shows neither Title nor Description: the target PR is the
+               subject (the title is derived from the PR reference), and any notes go in
+               the dedicated "Review focus" field below. -->
+          <UFormField v-if="!isReview" :label="t('board.addTask.titleField')" required>
             <UInput
               v-model="title"
               data-testid="add-task-title"
-              :placeholder="
-                isReview
-                  ? t('board.addTask.titlePlaceholderReview')
-                  : t('board.addTask.titlePlaceholder')
-              "
+              :placeholder="t('board.addTask.titlePlaceholder')"
               autofocus
               class="w-full"
               @keydown.enter="add"
             />
           </UFormField>
 
-          <!-- Linked issue description(s), read-only: shown so the user sees the original
-               issue description is included in the task. It's folded into the saved
-               description (before their notes) on add. -->
-          <UFormField
-            v-for="issue in linkedIssueBodies"
-            :key="issue.key"
-            :label="t('board.addTask.issueIncluded', { title: issue.title })"
-          >
-            <UTextarea
-              :model-value="issue.body"
-              :rows="4"
-              autoresize
-              readonly
-              class="w-full"
-              :ui="{ base: 'cursor-default text-slate-300' }"
-            />
-          </UFormField>
-          <p v-if="resolvingIssueBodies" class="text-[11px] text-slate-500">
-            {{ t('board.addTask.loadingIssue') }}
-          </p>
+          <template v-if="!isReview">
+            <!-- Linked issue description(s), read-only: shown so the user sees the original
+                 issue description is included in the task. It's folded into the saved
+                 description (before their notes) on add. -->
+            <UFormField
+              v-for="issue in linkedIssueBodies"
+              :key="issue.key"
+              :label="t('board.addTask.issueIncluded', { title: issue.title })"
+            >
+              <UTextarea
+                :model-value="issue.body"
+                :rows="4"
+                autoresize
+                readonly
+                class="w-full"
+                :ui="{ base: 'cursor-default text-slate-300' }"
+              />
+            </UFormField>
+            <p v-if="resolvingIssueBodies" class="text-[11px] text-slate-500">
+              {{ t('board.addTask.loadingIssue') }}
+            </p>
 
-          <UFormField
-            :label="
-              hasLinkedIssueBody
-                ? t('board.addTask.additionalNotes')
-                : t('board.addTask.description')
-            "
-          >
-            <UTextarea
-              v-model="description"
-              :rows="4"
-              autoresize
-              :placeholder="
+            <UFormField
+              :label="
                 hasLinkedIssueBody
-                  ? t('board.addTask.notesPlaceholder')
-                  : t('board.addTask.descriptionPlaceholder')
+                  ? t('board.addTask.additionalNotes')
+                  : t('board.addTask.description')
               "
-              class="w-full"
-            />
-          </UFormField>
+            >
+              <UTextarea
+                v-model="description"
+                :rows="4"
+                autoresize
+                :placeholder="
+                  hasLinkedIssueBody
+                    ? t('board.addTask.notesPlaceholder')
+                    : t('board.addTask.descriptionPlaceholder')
+                "
+                class="w-full"
+              />
+            </UFormField>
+          </template>
 
           <UCheckbox v-model="technical" name="technical">
             <template #label>
@@ -1060,41 +1023,15 @@ async function add() {
             </div>
           </div>
 
-          <!-- Best-practice fragments pinned on the task at creation, scoped to the frame's type. -->
+          <!-- Best-practice fragments pinned on the task at creation, scoped to the frame's type.
+               Pre-seeded from the enclosing service's standards; the task owns them from here. -->
           <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.bestPractices') }}
-              </span>
-              <UDropdownMenu :items="fragmentMenu">
-                <UButton
-                  color="neutral"
-                  variant="soft"
-                  size="xs"
-                  icon="i-lucide-plus"
-                  trailing-icon="i-lucide-chevron-down"
-                >
-                  {{ t('board.addTask.attach') }}
-                </UButton>
-              </UDropdownMenu>
-            </div>
-            <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
-              <UBadge
-                v-for="f in selectedFragments"
-                :key="f.id"
-                color="primary"
-                variant="subtle"
-                size="sm"
-                class="cursor-pointer"
-                :title="f.summary"
-                @click="removeFragment(f.id)"
-              >
-                {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
-              </UBadge>
-            </div>
-            <p v-else class="text-[11px] text-slate-500">
-              {{ t('board.addTask.bestPracticesHint') }}
-            </p>
+            <FragmentSelector
+              v-model="fragmentIds"
+              :pool="fragmentPool"
+              :label="t('board.addTask.bestPractices')"
+              :empty-text="t('board.addTask.bestPracticesHint')"
+            />
           </div>
 
           <!-- Context documents (ungated; Attach disabled until a source is connected). -->

package/app/components/fragments/FragmentSelector.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+// Shared best-practice prompt-fragment picker: a category-grouped "add" dropdown (with links out
+// to the fragment library) plus the currently-selected fragments as removable badges.
+// Presentational + `v-model`-driven — the caller owns WHERE the selection lives (a task's
+// `fragmentIds`, a service's `serviceFragmentIds`, or a not-yet-created task's local draft) and
+// binds the id list. Authored once and reused by the create-task form and the task/service
+// inspectors so the three pickers can't drift. Ids the catalog no longer resolves still render
+// (labelled by their raw id) so they stay visible and removable.
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { PromptFragment } from '~/types/domain'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
+
+const props = withDefaults(
+  defineProps<{
+    /** The selected fragment ids (`v-model`). */
+    modelValue: string[]
+    /** Candidate pool to offer — e.g. `fragments.forBlockType(type)` or the whole catalog. */
+    pool: PromptFragment[]
+    /** Optional label rendered to the left of the add button (omit when a section supplies it). */
+    label?: string
+    /** Optional text shown when nothing is selected. */
+    emptyText?: string
+  }>(),
+  { label: '', emptyText: '' },
+)
+const emit = defineEmits<{ 'update:modelValue': [string[]] }>()
+
+const fragments = useFragmentsStore()
+const ui = useUiStore()
+const accounts = useAccountsStore()
+const { t } = useI18n()
+
+// The catalog is per-board and invalidated on a workspace switch; (re)load it lazily — a no-op
+// while current.
+onMounted(() => fragments.ensureLoaded())
+
+const selectedFragments = computed(() =>
+  props.modelValue.map((id) => fragments.getFragment(id) ?? { id, title: id, summary: '' }),
+)
+
+// 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.
+const manageItems = computed<DropdownMenuItem[]>(() => {
+  const items: DropdownMenuItem[] = [
+    {
+      label: t('inspector.fragments.manageBoard'),
+      icon: 'i-lucide-book-marked',
+      onSelect: () => ui.openFragmentLibrary(),
+    },
+  ]
+  if (accounts.enabled) {
+    items.push({
+      label: t('inspector.fragments.manageAccount'),
+      icon: 'i-lucide-users',
+      onSelect: () => ui.openAccountSettings('fragments'),
+    })
+  }
+  return items
+})
+
+// Picker menu: pool fragments 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.modelValue)
+  return [
+    ...buildFragmentPickerGroups(props.pool, (id) => selected.has(id), addFragment),
+    manageItems.value,
+  ]
+})
+
+function addFragment(id: string) {
+  if (props.modelValue.includes(id)) return
+  emit('update:modelValue', [...props.modelValue, id])
+}
+
+function removeFragment(id: string) {
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((x) => x !== id),
+  )
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-1 flex items-center justify-between gap-2">
+      <span v-if="label" class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        {{ label }}
+      </span>
+      <span v-else />
+      <UDropdownMenu :items="fragmentMenu">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-plus"
+          trailing-icon="i-lucide-chevron-down"
+          data-testid="fragment-add"
+        />
+      </UDropdownMenu>
+    </div>
+    <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
+      <UBadge
+        v-for="f in selectedFragments"
+        :key="f.id"
+        color="primary"
+        variant="subtle"
+        size="sm"
+        class="cursor-pointer"
+        :title="f.summary"
+        data-testid="fragment-badge"
+        @click="removeFragment(f.id)"
+      >
+        {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
+      </UBadge>
+    </div>
+    <div v-else-if="emptyText" class="text-[11px] text-slate-500">
+      {{ emptyText }}
+    </div>
+  </div>
+</template>

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

@@ -1,76 +1,22 @@
 <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'
+import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 
 // Service-level best-practice fragments (frame blocks). These are the programming
-// standards/guidelines for the whole service; at run time their bodies are folded
-// into the prompt of every `code-aware` agent on tasks under this service. Drawn from
-// the board's merged fragment catalog (built-in ∪ registered ∪ account ∪ workspace,
-// via the fragments store; static pool when the library is off), grouped by category.
-// `defaultOpen` expands the section on surfaces that embed this as the primary content
-// (the add-service modal); the inspector leaves it collapsed.
+// standards/guidelines for the whole service: they SEED a new task's own selection at creation,
+// and at run time their bodies fold into the frame's own `code-aware` runs. Drawn from the
+// board's merged fragment catalog (built-in ∪ registered ∪ account ∪ workspace). `defaultOpen`
+// expands the section on surfaces that embed this as the primary content (the add-service
+// modal); the inspector leaves it collapsed. The shared <FragmentSelector> renders the picker.
 const props = defineProps<{ block: Block; defaultOpen?: boolean }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
-const ui = useUiStore()
-const accounts = useAccountsStore()
 const { t } = useI18n()
 
-onMounted(() => fragments.ensureLoaded())
-
-// 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(() =>
-  (props.block.serviceFragmentIds ?? []).map(
-    (id) => fragments.getFragment(id) ?? { id, title: id, summary: '' },
-  ),
-)
-
-// 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<DropdownMenuItem[]>(() => {
-  const items: DropdownMenuItem[] = [
-    {
-      label: t('inspector.fragments.manageBoard'),
-      icon: 'i-lucide-book-marked',
-      onSelect: () => ui.openFragmentLibrary(),
-    },
-  ]
-  if (accounts.enabled) {
-    items.push({
-      label: t('inspector.fragments.manageAccount'),
-      icon: 'i-lucide-users',
-      onSelect: () => ui.openAccountSettings('fragments'),
-    })
-  }
-  return items
-})
-
-// 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 ?? [])
-  return [
-    ...buildFragmentPickerGroups(fragments.fragments, (id) => selected.has(id), addFragment),
-    manageItems.value,
-  ]
-})
-
-function addFragment(id: string) {
-  const list = props.block.serviceFragmentIds ? [...props.block.serviceFragmentIds] : []
-  if (!list.includes(id)) list.push(id)
-  board.updateBlock(props.block.id, { serviceFragmentIds: list })
-}
-
-function removeFragment(id: string) {
-  if (!props.block.serviceFragmentIds) return
-  board.updateBlock(props.block.id, {
-    serviceFragmentIds: props.block.serviceFragmentIds.filter((x) => x !== id),
-  })
+function setFragments(ids: string[]) {
+  board.updateBlock(props.block.id, { serviceFragmentIds: ids })
 }
 </script>
 
@@ -78,36 +24,14 @@ function removeFragment(id: string) {
   <InspectorSection
     :title="t('inspector.fragments.serviceTitle')"
     :hint="t('inspector.fragments.serviceHint')"
-    :count="selectedFragments.length"
+    :count="(block.serviceFragmentIds ?? []).length"
     :default-open="props.defaultOpen"
   >
-    <template #actions>
-      <UDropdownMenu :items="fragmentMenu">
-        <UButton
-          size="xs"
-          variant="ghost"
-          color="neutral"
-          icon="i-lucide-plus"
-          trailing-icon="i-lucide-chevron-down"
-        />
-      </UDropdownMenu>
-    </template>
-    <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
-      <UBadge
-        v-for="f in selectedFragments"
-        :key="f.id"
-        color="primary"
-        variant="subtle"
-        size="sm"
-        class="cursor-pointer"
-        :title="f.summary"
-        @click="removeFragment(f.id)"
-      >
-        {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
-      </UBadge>
-    </div>
-    <div v-else class="text-[11px] text-slate-500">
-      {{ t('inspector.fragments.serviceEmpty') }}
-    </div>
+    <FragmentSelector
+      :model-value="block.serviceFragmentIds ?? []"
+      :pool="fragments.fragments"
+      :empty-text="t('inspector.fragments.serviceEmpty')"
+      @update:model-value="setFragments"
+    />
   </InspectorSection>
 </template>

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

@@ -1,78 +1,20 @@
 <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'
+import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 
 const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
-const ui = useUiStore()
-const accounts = useAccountsStore()
 const { t } = useI18n()
 
-// The catalog is per-board and invalidated on a workspace switch, so (re)load it when the
-// task inspector mounts — mirrors ServiceFragments; ensureLoaded is a no-op while current.
-onMounted(() => fragments.ensureLoaded())
-
 // ---- 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
-// raw id — so it stays visible and removable.
-const selectedFragments = computed(() =>
-  (props.block.fragmentIds ?? []).map(
-    (id) => fragments.getFragment(id) ?? { id, title: id, summary: '' },
-  ),
-)
-
-// 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<DropdownMenuItem[]>(() => {
-  const items: DropdownMenuItem[] = [
-    {
-      label: t('inspector.fragments.manageBoard'),
-      icon: 'i-lucide-book-marked',
-      onSelect: () => ui.openFragmentLibrary(),
-    },
-  ]
-  if (accounts.enabled) {
-    items.push({
-      label: t('inspector.fragments.manageAccount'),
-      icon: 'i-lucide-users',
-      onSelect: () => ui.openAccountSettings('fragments'),
-    })
-  }
-  return items
-})
-
-// Picker menu: fragments suitable for this block's type, not already selected,
-// 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 ?? [])
-  return [
-    ...buildFragmentPickerGroups(
-      fragments.forBlockType(props.block.type),
-      (id) => selected.has(id),
-      addFragment,
-    ),
-    manageItems.value,
-  ]
-})
-
-function addFragment(id: string) {
-  const list = props.block.fragmentIds ? [...props.block.fragmentIds] : []
-  if (!list.includes(id)) list.push(id)
-  board.updateBlock(props.block.id, { fragmentIds: list })
-}
-
-function removeFragment(id: string) {
-  if (!props.block.fragmentIds) return
-  board.updateBlock(props.block.id, {
-    fragmentIds: props.block.fragmentIds.filter((x) => x !== id),
-  })
+// The task's OWN selection (seeded from its service at creation, then editable per task). The
+// shared <FragmentSelector> renders the picker; a change persists via updateBlock.
+const fragmentPool = computed(() => fragments.forBlockType(props.block.type))
+function setFragments(ids: string[]) {
+  board.updateBlock(props.block.id, { fragmentIds: ids })
 }
 </script>
 
@@ -97,37 +39,13 @@ function removeFragment(id: string) {
 
     <!-- best practices (prompt fragments) -->
     <div>
-      <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('inspector.structure.bestPractices') }}
-        </span>
-        <UDropdownMenu :items="fragmentMenu">
-          <UButton
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-plus"
-            trailing-icon="i-lucide-chevron-down"
-          />
-        </UDropdownMenu>
-      </div>
-      <div v-if="selectedFragments.length" class="mb-1 flex flex-wrap gap-1">
-        <UBadge
-          v-for="f in selectedFragments"
-          :key="f.id"
-          color="primary"
-          variant="subtle"
-          size="sm"
-          class="cursor-pointer"
-          :title="f.summary"
-          @click="removeFragment(f.id)"
-        >
-          {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
-        </UBadge>
-      </div>
-      <div v-else class="text-[11px] text-slate-500">
-        {{ t('inspector.structure.bestPracticesEmpty') }}
-      </div>
+      <FragmentSelector
+        :model-value="block.fragmentIds ?? []"
+        :pool="fragmentPool"
+        :label="t('inspector.structure.bestPractices')"
+        :empty-text="t('inspector.structure.bestPracticesEmpty')"
+        @update:model-value="setFragments"
+      />
       <p class="mt-1 text-[11px] leading-snug text-slate-500">
         {{ t('inspector.structure.bestPracticesHint') }}
       </p>

package/app/stores/board.ts

@@ -241,7 +241,10 @@ export const useBoardStore = defineStore('board', () => {
       ...(options?.modelPresetId ? { modelPresetId: options.modelPresetId } : {}),
       ...(options?.pipelineId ? { pipelineId: options.pipelineId } : {}),
       ...(options?.agentConfig ? { agentConfig: options.agentConfig } : {}),
-      ...(options?.fragmentIds?.length ? { fragmentIds: options.fragmentIds } : {}),
+      // Forward the selection when the caller provides one (the create form always does, even
+      // when empty — an explicit clear the backend must honour rather than re-seed); omit only
+      // when a caller doesn't manage fragments at all (then the backend seeds from the service).
+      ...(options?.fragmentIds !== undefined ? { fragmentIds: options.fragmentIds } : {}),
       ...(options?.technical ? { technical: true } : {}),
     })
     upsert(block)

package/i18n/locales/de.json

@@ -2084,7 +2084,6 @@
       "recurringNoFrame": "Eine wiederkehrende Aufgabe muss auf einem Service liegen. Fügen Sie sie aus einem Service-Frame (oder einem darin enthaltenen Modul) hinzu.",
       "titleField": "Titel",
       "titlePlaceholder": "Was muss getan werden?",
-      "titlePlaceholderReview": "Optional – wird aus dem Pull Request abgeleitet",
       "issueIncluded": "{title} (aus Issue, enthalten)",
       "loadingIssue": "Beschreibung des verknüpften Issues wird geladen…",
       "additionalNotes": "Zusätzliche Notizen",

package/i18n/locales/en.json

@@ -203,7 +203,6 @@
       "recurringNoFrame": "A recurring task must live on a service. Add it from a service frame (or a module inside one).",
       "titleField": "Title",
       "titlePlaceholder": "What needs to be done?",
-      "titlePlaceholderReview": "Optional — derived from the pull request",
       "issueIncluded": "{title} (from issue, included)",
       "loadingIssue": "Loading the linked issue's description…",
       "additionalNotes": "Additional notes",

package/i18n/locales/es.json

@@ -182,7 +182,6 @@
       "recurringNoFrame": "Una tarea recurrente debe vivir en un servicio. Añádela desde un marco de servicio (o un módulo dentro de él).",
       "titleField": "Título",
       "titlePlaceholder": "¿Qué hay que hacer?",
-      "titlePlaceholderReview": "Opcional: se deriva de la pull request",
       "issueIncluded": "{title} (de la incidencia, incluida)",
       "loadingIssue": "Cargando la descripción de la incidencia vinculada…",
       "additionalNotes": "Notas adicionales",

package/i18n/locales/fr.json

@@ -182,7 +182,6 @@
       "recurringNoFrame": "Une tâche récurrente doit appartenir à un service. Ajoutez-la depuis un cadre de service (ou un module à l’intérieur).",
       "titleField": "Titre",
       "titlePlaceholder": "Que faut-il faire ?",
-      "titlePlaceholderReview": "Facultatif — dérivé de la pull request",
       "issueIncluded": "{title} (depuis le ticket, incluse)",
       "loadingIssue": "Chargement de la description du ticket lié…",
       "additionalNotes": "Notes supplémentaires",

package/i18n/locales/he.json

@@ -182,7 +182,6 @@
       "recurringNoFrame": "משימה מחזורית חייבת להתקיים על שירות. הוסף אותה ממסגרת שירות (או ממודול בתוכה).",
       "titleField": "כותרת",
       "titlePlaceholder": "מה צריך לעשות?",
-      "titlePlaceholderReview": "אופציונלי — נגזר מבקשת המשיכה",
       "issueIncluded": "{title} (מהאישיו, כלול)",
       "loadingIssue": "טוען את תיאור האישיו המקושר…",
       "additionalNotes": "הערות נוספות",

package/i18n/locales/it.json

@@ -2084,7 +2084,6 @@
       "recurringNoFrame": "Un'attività ricorrente deve risiedere su un servizio. Aggiungila da un frame di servizio (o da un modulo al suo interno).",
       "titleField": "Titolo",
       "titlePlaceholder": "Cosa bisogna fare?",
-      "titlePlaceholderReview": "Facoltativo — derivato dalla pull request",
       "issueIncluded": "{title} (dall'issue, incluso)",
       "loadingIssue": "Caricamento della descrizione dell'issue collegata…",
       "additionalNotes": "Note aggiuntive",

package/i18n/locales/ja.json

@@ -182,7 +182,6 @@
       "recurringNoFrame": "繰り返しタスクはサービス上に配置する必要があります。サービスフレーム（またはその中のモジュール）から追加してください。",
       "titleField": "タイトル",
       "titlePlaceholder": "何を実施する必要がありますか？",
-      "titlePlaceholderReview": "任意 — プルリクエストから生成されます",
       "issueIncluded": "{title}（issue から、含む）",
       "loadingIssue": "リンクされた issue の説明を読み込み中…",
       "additionalNotes": "追加メモ",

package/i18n/locales/pl.json

@@ -182,7 +182,6 @@
       "recurringNoFrame": "Zadanie cykliczne musi należeć do usługi. Dodaj je z ramki usługi (lub modułu w jej obrębie).",
       "titleField": "Tytuł",
       "titlePlaceholder": "Co trzeba zrobić?",
-      "titlePlaceholderReview": "Opcjonalnie — tworzony na podstawie pull requesta",
       "issueIncluded": "{title} (ze zgłoszenia, dołączone)",
       "loadingIssue": "Wczytywanie opisu powiązanego zgłoszenia…",
       "additionalNotes": "Dodatkowe uwagi",

package/i18n/locales/tr.json

@@ -182,7 +182,6 @@
       "recurringNoFrame": "Yinelenen bir görev bir serviste bulunmalıdır. Bir servis çerçevesinden (veya içindeki bir modülden) ekleyin.",
       "titleField": "Başlık",
       "titlePlaceholder": "Ne yapılması gerekiyor?",
-      "titlePlaceholderReview": "İsteğe bağlı — pull request'ten türetilir",
       "issueIncluded": "{title} (sorundan, dahil edildi)",
       "loadingIssue": "Bağlantılı sorunun açıklaması yükleniyor…",
       "additionalNotes": "Ek notlar",

package/i18n/locales/uk.json

@@ -182,7 +182,6 @@
       "recurringNoFrame": "Періодичне завдання має належати сервісу. Додайте його з рамки сервісу (або модуля всередині неї).",
       "titleField": "Назва",
       "titlePlaceholder": "Що потрібно зробити?",
-      "titlePlaceholderReview": "Необов’язково — формується з pull request",
       "issueIncluded": "{title} (зі звернення, включено)",
       "loadingIssue": "Завантаження опису пов’язаного звернення…",
       "additionalNotes": "Додаткові примітки",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.143.0",
+  "version": "0.144.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "valibot": "^1.4.2",
     "vue": "3.5.40",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.152.0"
+    "@cat-factory/contracts": "0.152.1"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",