@cat-factory/app 0.143.1 → 0.144.0

package/app/components/board/AddTaskModal.vue

@@ -21,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()
@@ -37,7 +36,6 @@ const modelPresets = useModelPresetsStore()
 const pipelines = usePipelinesStore()
 const agentConfig = useAgentConfigStore()
 const fragments = useFragmentsStore()
-const accounts = useAccountsStore()
 const toast = useToast()
 const { t } = useI18n()
 
@@ -314,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
@@ -544,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 = ''
@@ -664,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) {
@@ -1058,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.143.1",
+  "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",