@cat-factory/app 0.146.1 → 0.146.3

package/app/components/fragments/FragmentSelector.vue

@@ -1,14 +1,15 @@
 <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.
+// Shared best-practice prompt-fragment picker: a category-grouped MULTI-SELECT popover (with links
+// out to the fragment library) plus the currently-selected fragments as removable badges.
+// Selecting a row TOGGLES it and leaves the list open, so several fragments can be picked (and
+// unpicked) in one visit; a dedicated "Done" button closes the panel.
 // 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'
+import { buildFragmentCategoryGroups } from '~/utils/fragmentPicker'
 
 const props = withDefaults(
   defineProps<{
@@ -30,6 +31,8 @@ const ui = useUiStore()
 const accounts = useAccountsStore()
 const { t } = useI18n()
 
+const open = ref(false)
+
 // The catalog is per-board and invalidated on a workspace switch; (re)load it lazily — a no-op
 // while current.
 onMounted(() => fragments.ensureLoaded())
@@ -38,39 +41,18 @@ 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
-})
+const selectedSet = computed(() => new Set(props.modelValue))
 
-// 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,
-  ]
-})
+// Pool fragments bucketed into labelled per-category sections. Selected rows stay in the list so
+// they can be unpicked in place (a check marks the current selection).
+const categoryGroups = computed(() => buildFragmentCategoryGroups(props.pool))
 
-function addFragment(id: string) {
-  if (props.modelValue.includes(id)) return
-  emit('update:modelValue', [...props.modelValue, id])
+function toggleFragment(id: string) {
+  if (props.modelValue.includes(id)) {
+    removeFragment(id)
+  } else {
+    emit('update:modelValue', [...props.modelValue, id])
+  }
 }
 
 function removeFragment(id: string) {
@@ -79,6 +61,16 @@ function removeFragment(id: string) {
     props.modelValue.filter((x) => x !== id),
   )
 }
+
+function manageBoard() {
+  open.value = false
+  ui.openFragmentLibrary()
+}
+
+function manageAccount() {
+  open.value = false
+  ui.openAccountSettings('fragments')
+}
 </script>
 
 <template>
@@ -88,7 +80,7 @@ function removeFragment(id: string) {
         {{ label }}
       </span>
       <span v-else />
-      <UDropdownMenu :items="fragmentMenu">
+      <UPopover v-model:open="open" :content="{ align: 'end' }">
         <UButton
           size="xs"
           variant="ghost"
@@ -97,7 +89,79 @@ function removeFragment(id: string) {
           trailing-icon="i-lucide-chevron-down"
           data-testid="fragment-add"
         />
-      </UDropdownMenu>
+
+        <template #content>
+          <div
+            class="flex max-h-[24rem] w-[min(22rem,92vw)] flex-col"
+            data-testid="fragment-picker-panel"
+          >
+            <div class="min-h-0 flex-1 overflow-y-auto p-1">
+              <template v-if="categoryGroups.length">
+                <div v-for="group in categoryGroups" :key="group.category">
+                  <p
+                    class="px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+                  >
+                    {{ group.category }}
+                  </p>
+                  <button
+                    v-for="f in group.fragments"
+                    :key="f.id"
+                    type="button"
+                    class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-slate-800/60"
+                    :class="selectedSet.has(f.id) ? 'text-slate-100' : 'text-slate-300'"
+                    :title="f.summary"
+                    :data-testid="`fragment-option-${f.id}`"
+                    :aria-pressed="selectedSet.has(f.id)"
+                    @click="toggleFragment(f.id)"
+                  >
+                    <UIcon
+                      :name="selectedSet.has(f.id) ? 'i-lucide-check' : 'i-lucide-plus'"
+                      class="h-4 w-4 shrink-0"
+                      :class="selectedSet.has(f.id) ? 'text-primary-400' : 'text-slate-500'"
+                    />
+                    <span class="flex-1 truncate">{{ f.title }}</span>
+                  </button>
+                </div>
+              </template>
+              <p v-else class="px-2 py-3 text-[12px] text-slate-500">
+                {{ t('inspector.fragments.pickerEmpty') }}
+              </p>
+
+              <div class="mt-1 border-t border-slate-800 pt-1">
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-slate-300 hover:bg-slate-800/60"
+                  @click="manageBoard"
+                >
+                  <UIcon name="i-lucide-book-marked" class="h-4 w-4 shrink-0 text-slate-400" />
+                  <span class="flex-1 truncate">{{ t('inspector.fragments.manageBoard') }}</span>
+                </button>
+                <button
+                  v-if="accounts.enabled"
+                  type="button"
+                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm text-slate-300 hover:bg-slate-800/60"
+                  @click="manageAccount"
+                >
+                  <UIcon name="i-lucide-users" class="h-4 w-4 shrink-0 text-slate-400" />
+                  <span class="flex-1 truncate">{{ t('inspector.fragments.manageAccount') }}</span>
+                </button>
+              </div>
+            </div>
+
+            <div class="flex justify-end border-t border-slate-800 p-1.5">
+              <UButton
+                size="xs"
+                color="neutral"
+                variant="soft"
+                data-testid="fragment-picker-done"
+                @click="open = false"
+              >
+                {{ t('inspector.fragments.done') }}
+              </UButton>
+            </div>
+          </div>
+        </template>
+      </UPopover>
     </div>
     <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
       <UBadge

package/app/utils/fragmentPicker.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import type { PromptFragment } from '~/types/domain'
-import { buildFragmentPickerGroups } from './fragmentPicker'
+import { buildFragmentCategoryGroups, buildFragmentPickerGroups } from './fragmentPicker'
 
 const frag = (id: string, category: string, title = id): PromptFragment =>
   ({ id, version: '1.0.0', title, category, summary: '', body: '' }) as PromptFragment
@@ -58,3 +58,24 @@ describe('buildFragmentPickerGroups', () => {
     expect(picked).toEqual(['node.best-practices'])
   })
 })
+
+describe('buildFragmentCategoryGroups', () => {
+  it('buckets every fragment by category in first-appearance order, keeping pool order within', () => {
+    const groups = buildFragmentCategoryGroups(pool)
+    expect(groups.map((g) => g.category)).toEqual(['Node', 'Writing style'])
+    expect(groups[0]!.fragments.map((f) => f.id)).toEqual([
+      'node.best-practices',
+      'node.performance',
+    ])
+    expect(groups[1]!.fragments.map((f) => f.id)).toEqual([
+      'style.anti-llmisms',
+      'style.concise-actionable',
+    ])
+  })
+
+  it('keeps selected fragments in their bucket (multi-select toggles in place, never hides)', () => {
+    // Unlike the dropdown builder, the category grouping does no selection filtering.
+    const groups = buildFragmentCategoryGroups(pool)
+    expect(groups.flatMap((g) => g.fragments)).toHaveLength(pool.length)
+  })
+})

package/app/utils/fragmentPicker.ts

@@ -1,6 +1,28 @@
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { PromptFragment } from '~/types/domain'
 
+/** One category bucket: its heading plus the pool fragments that fall under it, in pool order. */
+export interface FragmentCategoryGroup {
+  category: string
+  fragments: PromptFragment[]
+}
+
+/**
+ * Bucket the pool fragments by `category`, preserving first-appearance category order and
+ * per-category pool order. Unlike {@link buildFragmentPickerGroups} this keeps ALL fragments
+ * (selected included) and returns the raw fragments, so a multi-select surface can render each
+ * as a toggle that stays visible whether or not it is currently picked.
+ */
+export function buildFragmentCategoryGroups(pool: PromptFragment[]): FragmentCategoryGroup[] {
+  const groups = new Map<string, PromptFragment[]>()
+  for (const f of pool) {
+    const items = groups.get(f.category) ?? []
+    items.push(f)
+    groups.set(f.category, items)
+  }
+  return [...groups.entries()].map(([category, fragments]) => ({ category, fragments }))
+}
+
 /**
  * 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
@@ -18,15 +40,12 @@ export function buildFragmentPickerGroups(
   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,
-  ])
+  return buildFragmentCategoryGroups(pool)
+    .map(({ category, fragments }): DropdownMenuItem[] => {
+      const items = fragments
+        .filter((f) => !isSelected(f.id))
+        .map((f): DropdownMenuItem => ({ label: f.title, onSelect: () => onSelect(f.id) }))
+      return items.length ? [{ type: 'label', label: category }, ...items] : []
+    })
+    .filter((group) => group.length > 0)
 }

package/i18n/locales/de.json

@@ -931,7 +931,9 @@
       "serviceHint": "Programmierstandards für den gesamten Service. Der Inhalt jedes ausgewählten Fragments wird dem Prompt jedes code-bewussten Agents hinzugefügt, der an Aufgaben unter diesem Service arbeitet.",
       "serviceEmpty": "Keine. Code-bewusste Agents dieses Service folgen ihren Standardvorgaben.",
       "manageBoard": "Fragment-Bibliothek dieses Boards verwalten…",
-      "manageAccount": "Konto-Fragmente verwalten…"
+      "manageAccount": "Konto-Fragmente verwalten…",
+      "done": "Fertig",
+      "pickerEmpty": "Keine Fragmente verfügbar."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/en.json

@@ -706,7 +706,9 @@
       "serviceHint": "Programming standards for the whole service. The content of each selected fragment is added to the prompt of every code-aware agent working on tasks under this service.",
       "serviceEmpty": "None. Code-aware agents on this service follow their default guidance.",
       "manageBoard": "Manage this board's fragment library…",
-      "manageAccount": "Manage account fragments…"
+      "manageAccount": "Manage account fragments…",
+      "done": "Done",
+      "pickerEmpty": "No fragments available."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/es.json

@@ -649,7 +649,9 @@
       "serviceHint": "Estándares de programación para todo el servicio. El contenido de cada fragmento seleccionado se añade al prompt de cada agente que conoce el código y trabaja en tareas de este servicio.",
       "serviceEmpty": "Ninguna. Los agentes que conocen el código en este servicio siguen su guía predeterminada.",
       "manageBoard": "Gestionar la biblioteca de fragmentos de este tablero…",
-      "manageAccount": "Gestionar los fragmentos de la cuenta…"
+      "manageAccount": "Gestionar los fragmentos de la cuenta…",
+      "done": "Listo",
+      "pickerEmpty": "No hay fragmentos disponibles."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/fr.json

@@ -649,7 +649,9 @@
       "serviceHint": "Normes de programmation pour tout le service. Le contenu de chaque fragment sélectionné est ajouté au prompt de chaque agent conscient du code travaillant sur les tâches de ce service.",
       "serviceEmpty": "Aucune. Les agents conscients du code sur ce service suivent leurs consignes par défaut.",
       "manageBoard": "Gérer la bibliothèque de fragments de ce tableau…",
-      "manageAccount": "Gérer les fragments du compte…"
+      "manageAccount": "Gérer les fragments du compte…",
+      "done": "Terminé",
+      "pickerEmpty": "Aucun fragment disponible."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/he.json

@@ -649,7 +649,9 @@
       "serviceHint": "תקני תכנות לכל השירות. התוכן של כל פרגמנט שנבחר מתווסף לפרומפט של כל סוכן מודע-קוד שעובד על משימות תחת שירות זה.",
       "serviceEmpty": "אין. סוכנים מודעי-קוד בשירות זה פועלים לפי ההנחיות המוגדרות כברירת מחדל.",
       "manageBoard": "נהל את ספריית הקטעים של לוח זה…",
-      "manageAccount": "נהל קטעי חשבון…"
+      "manageAccount": "נהל קטעי חשבון…",
+      "done": "סיום",
+      "pickerEmpty": "אין קטעים זמינים."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/it.json

@@ -931,7 +931,9 @@
       "serviceHint": "Standard di programmazione per l'intero servizio. Il contenuto di ogni frammento selezionato viene aggiunto al prompt di ogni agente code-aware che lavora sulle attivita' di questo servizio.",
       "serviceEmpty": "Nessuno. Gli agenti code-aware su questo servizio seguono le loro linee guida predefinite.",
       "manageBoard": "Gestisci la libreria di frammenti di questa board…",
-      "manageAccount": "Gestisci i frammenti dell'account…"
+      "manageAccount": "Gestisci i frammenti dell'account…",
+      "done": "Fatto",
+      "pickerEmpty": "Nessun frammento disponibile."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/ja.json

@@ -649,7 +649,9 @@
       "serviceHint": "サービス全体のプログラミング標準です。選択した各フラグメントの内容は、このサービスのタスクに取り組むコード対応エージェントすべてのプロンプトに追加されます。",
       "serviceEmpty": "なし。このサービスのコード対応エージェントはデフォルトのガイダンスに従います。",
       "manageBoard": "このボードのフラグメントライブラリを管理…",
-      "manageAccount": "アカウントのフラグメントを管理…"
+      "manageAccount": "アカウントのフラグメントを管理…",
+      "done": "完了",
+      "pickerEmpty": "利用可能なフラグメントがありません。"
     },
     "frontendConfig": {
       "title": "フロントエンド",

package/i18n/locales/pl.json

@@ -649,7 +649,9 @@
       "serviceHint": "Standardy programowania dla całej usługi. Treść każdego wybranego fragmentu jest dodawana do promptu każdego agenta świadomego kodu pracującego nad zadaniami tej usługi.",
       "serviceEmpty": "Brak. Agenci świadomi kodu w tej usłudze stosują swoje domyślne wytyczne.",
       "manageBoard": "Zarządzaj biblioteką fragmentów tej tablicy…",
-      "manageAccount": "Zarządzaj fragmentami konta…"
+      "manageAccount": "Zarządzaj fragmentami konta…",
+      "done": "Gotowe",
+      "pickerEmpty": "Brak dostępnych fragmentów."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/tr.json

@@ -649,7 +649,9 @@
       "serviceHint": "Tüm servis için programlama standartları. Seçilen her parçanın içeriği, bu servisin görevlerinde çalışan kod farkında her ajanın prompt'una eklenir.",
       "serviceEmpty": "Yok. Bu servisteki kod farkında ajanlar varsayılan yönergelerini izler.",
       "manageBoard": "Bu pano'nun fragman kütüphanesini yönet…",
-      "manageAccount": "Hesap fragmanlarını yönet…"
+      "manageAccount": "Hesap fragmanlarını yönet…",
+      "done": "Tamam",
+      "pickerEmpty": "Kullanılabilir parça yok."
     },
     "frontendConfig": {
       "title": "Frontend",

package/i18n/locales/uk.json

@@ -649,7 +649,9 @@
       "serviceHint": "Стандарти програмування для всього сервісу. Вміст кожного вибраного фрагмента додається до промпту кожного агента, що працює з кодом завдань цього сервісу.",
       "serviceEmpty": "Немає. Агенти, що працюють з кодом цього сервісу, дотримуються типових інструкцій.",
       "manageBoard": "Керувати бібліотекою фрагментів цієї дошки…",
-      "manageAccount": "Керувати фрагментами облікового запису…"
+      "manageAccount": "Керувати фрагментами облікового запису…",
+      "done": "Готово",
+      "pickerEmpty": "Немає доступних фрагментів."
     },
     "frontendConfig": {
       "title": "Frontend",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.146.1",
+  "version": "0.146.3",
   "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.2"
+    "@cat-factory/contracts": "0.153.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",