@cat-factory/app 0.87.4 → 0.87.5

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) {

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -6,6 +6,7 @@
 // services — each owns its selection from creation. Persisted via the
 // serviceFragmentDefaults store (the backend replaces the whole list on each change).
 import { onMounted, ref } from 'vue'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 const { t } = useI18n()
 const fragments = useFragmentsStore()
@@ -24,17 +25,10 @@ const selected = computed(() =>
   defaults.fragmentIds.map((id) => fragments.getFragment(id) ?? { id, title: id, summary: '' }),
 )
 
-// Pool fragments not already in the default set, grouped by category.
+// Pool fragments not already in the default set, grouped into labelled per-category sections.
 const menu = computed(() => {
   const chosen = new Set(defaults.fragmentIds)
-  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
-  for (const f of fragments.fragments) {
-    if (chosen.has(f.id)) continue
-    const items = groups.get(f.category) ?? []
-    items.push({ label: f.title, onSelect: () => add(f.id) })
-    groups.set(f.category, items)
-  }
-  return [...groups.values()]
+  return buildFragmentPickerGroups(fragments.fragments, (id) => chosen.has(id), add)
 })
 
 async function save(ids: string[]) {

package/app/utils/fragmentPicker.spec.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest'
+import type { PromptFragment } from '~/types/domain'
+import { buildFragmentPickerGroups } from './fragmentPicker'
+
+const frag = (id: string, category: string, title = id): PromptFragment =>
+  ({ id, version: '1.0.0', title, category, summary: '', body: '' }) as PromptFragment
+
+const pool: PromptFragment[] = [
+  frag('node.best-practices', 'Node', 'Node best practices'),
+  frag('node.performance', 'Node', 'Node performance'),
+  frag('style.anti-llmisms', 'Writing style', 'Avoid LLM tells'),
+  frag('style.concise-actionable', 'Writing style', 'Concise and actionable'),
+]
+
+describe('buildFragmentPickerGroups', () => {
+  it('buckets fragments into one labelled group per category (technical + writing-style tracks)', () => {
+    const groups = buildFragmentPickerGroups(
+      pool,
+      () => false,
+      () => {},
+    )
+    // One group per category, each led by a non-interactive `type: 'label'` heading.
+    expect(groups.map((g) => g[0])).toEqual([
+      { type: 'label', label: 'Node' },
+      { type: 'label', label: 'Writing style' },
+    ])
+    // The heading is followed by that category's item labels, in pool order.
+    expect(groups[0]!.slice(1).map((i) => i.label)).toEqual([
+      'Node best practices',
+      'Node performance',
+    ])
+    expect(groups[1]!.slice(1).map((i) => i.label)).toEqual([
+      'Avoid LLM tells',
+      'Concise and actionable',
+    ])
+  })
+
+  it('omits already-selected fragments, dropping a category that empties out', () => {
+    const selected = new Set(['style.anti-llmisms', 'style.concise-actionable'])
+    const groups = buildFragmentPickerGroups(
+      pool,
+      (id) => selected.has(id),
+      () => {},
+    )
+    // Writing style fully selected → its category disappears entirely (no empty labelled group).
+    expect(groups.map((g) => g[0])).toEqual([{ type: 'label', label: 'Node' }])
+  })
+
+  it('invokes onSelect with the fragment id when an item is chosen', () => {
+    const picked: string[] = []
+    const groups = buildFragmentPickerGroups(
+      pool,
+      () => false,
+      (id) => picked.push(id),
+    )
+    // Fire the first real item under the first category (index 1, past the label heading).
+    ;(groups[0]![1] as { onSelect: () => void }).onSelect()
+    expect(picked).toEqual(['node.best-practices'])
+  })
+})

package/app/utils/fragmentPicker.ts

@@ -0,0 +1,32 @@
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { PromptFragment } from '~/types/domain'
+
+/**
+ * Build the category-grouped groups for a fragment "add" dropdown: the pool fragments not
+ * already selected, bucketed by `category`, each bucket prefixed with a non-interactive
+ * `type: 'label'` heading so the catalog reads as labelled sections instead of one flat,
+ * undifferentiated list. This matters now that the catalog spans distinct tracks that a
+ * single block can pin together — the technical collections (Node / React / …) AND the
+ * document Writing-style fragments — so the headings keep the longer, mixed list navigable.
+ *
+ * Category order follows first appearance in `pool`; empty categories are dropped. Each
+ * inner array is one Nuxt UI menu group (rendered divider-separated); callers append their
+ * own trailing groups (e.g. the library-management links) after the returned groups.
+ */
+export function buildFragmentPickerGroups(
+  pool: PromptFragment[],
+  isSelected: (id: string) => boolean,
+  onSelect: (id: string) => void,
+): DropdownMenuItem[][] {
+  const groups = new Map<string, DropdownMenuItem[]>()
+  for (const f of pool) {
+    if (isSelected(f.id)) continue
+    const items = groups.get(f.category) ?? []
+    items.push({ label: f.title, onSelect: () => onSelect(f.id) })
+    groups.set(f.category, items)
+  }
+  return [...groups.entries()].map(([category, items]): DropdownMenuItem[] => [
+    { type: 'label', label: category },
+    ...items,
+  ])
+}

package/package.json

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