@cat-factory/app 0.219.1 → 0.220.0

package/app/components/board/AddTaskModal.vue

@@ -35,6 +35,7 @@ import type { ReviewTargetReason } from '@cat-factory/contracts'
 import { sanitizeDescriptorFields, validateDescriptorFields } from '@cat-factory/contracts'
 import { defaultDescriptorValues } from '~/utils/descriptorFields'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
+import { buildTaskTypePickerRows } from '~/utils/taskTypePicker'
 
 const ui = useUiStore()
 // Interface tier. In BASIC mode this form asks for the task itself (type, title,
@@ -183,15 +184,15 @@ const customFieldProblems = computed(() => {
   if (!custom || customFormPanel.value) return []
   return validateDescriptorFields(custom.fields ?? [], customFieldValues.value)
 })
-// The type picker: the built-in choices (i18n labels) + the custom types (their wire presentation).
-const typeChoices = computed<{ value: TaskTypeChoice; label: string; icon: string }[]>(() => [
-  ...TASK_TYPES.value,
-  ...customTaskTypes.value.map((tt) => ({
-    value: tt.taskType as TaskTypeChoice,
-    label: tt.presentation.label,
-    icon: tt.presentation.icon,
-  })),
-])
+// The type picker, laid out as rows (see `buildTaskTypePickerRows`): the built-in choices (i18n
+// labels) first, then the deployment's registered types under their declared `presentation.category`
+// captions, so a catalog of reusable operations reads as sections instead of one wall of buttons.
+// Only the leftovers row's heading is CHROME, so it is the one caption the layer supplies.
+const typeRows = computed(() =>
+  buildTaskTypePickerRows(TASK_TYPES.value, customTaskTypes.value, {
+    other: t('board.addTask.typeOther'),
+  }),
+)
 
 // Parse the PR-reference input into the contract fields: a bare positive integer (optionally
 // `#`-prefixed) becomes `prNumber` (a PR on the service's linked repo); anything else is taken
@@ -768,24 +769,59 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
         </p>
 
         <UFormField :label="t('board.addTask.typeLabel')">
-          <div class="flex flex-wrap gap-1">
-            <UButton
-              v-for="ty in typeChoices"
-              :key="ty.value"
-              :color="taskType === ty.value ? 'primary' : 'neutral'"
-              :variant="taskType === ty.value ? 'soft' : 'ghost'"
-              :icon="ty.icon"
-              size="xs"
-              :data-testid="`task-type-${ty.value}`"
-              @click="
-                () => {
-                  taskType = ty.value
-                }
-              "
+          <!-- One row per picker group: the built-ins uncaptioned, then a caption per registered
+               category, then the leftovers. Category captions are deployment-authored English
+               rendered verbatim (as are the custom labels and their hover descriptions); only the
+               leftovers heading is chrome, so only it is i18n. The row gap must stay WIDER than a
+               caption's `mb-1`, or a heading sits equidistant between the group above it and its
+               own buttons and the grouping stops reading. -->
+          <div class="space-y-3">
+            <div
+              v-for="row in typeRows"
+              :key="row.id"
+              data-testid="task-type-row"
+              :data-task-type-row="row.id"
             >
-              {{ ty.label }}
-            </UButton>
+              <p
+                v-if="row.caption"
+                class="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+                data-testid="task-type-category"
+              >
+                {{ row.caption }}
+              </p>
+              <div class="flex flex-wrap gap-1">
+                <UButton
+                  v-for="ty in row.choices"
+                  :key="ty.value"
+                  :color="taskType === ty.value ? 'primary' : 'neutral'"
+                  :variant="taskType === ty.value ? 'soft' : 'ghost'"
+                  :icon="ty.icon"
+                  size="xs"
+                  :title="ty.description"
+                  :data-testid="`task-type-${ty.value}`"
+                  @click="
+                    () => {
+                      taskType = ty.value
+                    }
+                  "
+                >
+                  {{ ty.label }}
+                </UButton>
+              </div>
+            </div>
           </div>
+
+          <!-- What the selected operation is for, in the deployment's own words, in the field's OWN
+               help slot (the `:help` seam every other field here uses) rather than a paragraph
+               beside it fighting the modal's spacing. The hover title above helps you choose; this
+               states the choice you made, which is the half a touch device can reach. Built-in
+               types carry no description (their labels are localized and their meaning is fixed),
+               so only a custom type is described here. -->
+          <template v-if="selectedCustomType?.presentation.description" #help>
+            <span data-testid="task-type-description">
+              {{ selectedCustomType.presentation.description }}
+            </span>
+          </template>
         </UFormField>
 
         <!-- Recurring tasks are configured as a schedule on the service frame. -->

package/app/docs/consumer-extensions.md

@@ -56,18 +56,18 @@ export default defineNuxtPlugin(() => {
 
 ## The landed seams
 
-| Seam                                | Slot key                  | Entry shape                                                                                      | Host                                                                      |
-| ----------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
-| Run-detail windows                  | `resultViews`             | `{ id: '<ns>:<name>', component }`                                                               | `StepResultViewHost` via `dispatchStepView`                               |
-| Agent kinds (palette data)          | `agentKinds`              | `{ kind, container, presentation: { label, icon, color, description, category?, resultView? } }` | agents store merge → `agentKindMeta`                                      |
-| Custom task types                   | `taskTypes`               | `{ taskType: '<ns>:<name>', presentation, fields?, defaultPipelineId?, formPanel? }`             | `AddTaskModal` picker/fields + `TaskCard` badge (via `taskTypeMeta`)      |
-| Sidebar / command-palette / toolbar | `nav`                     | `{ id, labelKey, icon, surfaces, gate?, advanced?, run, sidebar?, command?, toolbar? }`          | the three shells via `useNavContributions`                                |
-| Inspector body panels               | `inspectorPanels`         | `{ id, component, when(block), order }` (`PanelEntry<Block>`)                                    | `<PanelsOutlet>` in `InspectorPanel`                                      |
-| Top-level overlays                  | `appOverlays`             | `{ id: '<ns>:<name>', component }`                                                               | `<AppOverlayHost>` via `useAppOverlays().open(id)`                        |
-| External tools                      | `externalTools`           | `{ id, title, icon, url, description?, requiredMetadata?, gate?, advanced?, order? }`            | the "External tools" sidebar section + palette, via `useNavContributions` |
-| Custom workspace metadata fields    | `workspaceMetadataFields` | `{ key, label, description?, placeholder?, type?, options?, order? }`                            | the Metadata tab of Workspace settings                                    |
-| Multi-step wizards                  | (journeys)                | `registerJourney` + step modules                                                                 | `<JourneyHost>` / `<JourneyOutlet>`                                       |
-| Locale strings                      | (i18n)                    | `i18n/locales/*.json` in the deployment                                                          | `@nuxtjs/i18n` layer deep-merge                                           |
+| Seam                                | Slot key                  | Entry shape                                                                                               | Host                                                                      |
+| ----------------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| Run-detail windows                  | `resultViews`             | `{ id: '<ns>:<name>', component }`                                                                        | `StepResultViewHost` via `dispatchStepView`                               |
+| Agent kinds (palette data)          | `agentKinds`              | `{ kind, container, presentation: { label, icon, color, description, category?, resultView? } }`          | agents store merge → `agentKindMeta`                                      |
+| Custom task types                   | `taskTypes`               | `{ taskType: '<ns>:<name>', presentation, fields?, defaultPipelineId?, defaultFragmentIds?, formPanel? }` | `AddTaskModal` picker/fields + `TaskCard` badge (via `taskTypeMeta`)      |
+| Sidebar / command-palette / toolbar | `nav`                     | `{ id, labelKey, icon, surfaces, gate?, advanced?, run, sidebar?, command?, toolbar? }`                   | the three shells via `useNavContributions`                                |
+| Inspector body panels               | `inspectorPanels`         | `{ id, component, when(block), order }` (`PanelEntry<Block>`)                                             | `<PanelsOutlet>` in `InspectorPanel`                                      |
+| Top-level overlays                  | `appOverlays`             | `{ id: '<ns>:<name>', component }`                                                                        | `<AppOverlayHost>` via `useAppOverlays().open(id)`                        |
+| External tools                      | `externalTools`           | `{ id, title, icon, url, description?, requiredMetadata?, gate?, advanced?, order? }`                     | the "External tools" sidebar section + palette, via `useNavContributions` |
+| Custom workspace metadata fields    | `workspaceMetadataFields` | `{ key, label, description?, placeholder?, type?, options?, order? }`                                     | the Metadata tab of Workspace settings                                    |
+| Multi-step wizards                  | (journeys)                | `registerJourney` + step modules                                                                          | `<JourneyHost>` / `<JourneyOutlet>`                                       |
+| Locale strings                      | (i18n)                    | `i18n/locales/*.json` in the deployment                                                                   | `@nuxtjs/i18n` layer deep-merge                                           |
 
 A `nav` entry may also declare `advanced: true`, which hides it in **basic** interface mode
 (the shipped default) exactly as it does for the first-party destinations: see
@@ -173,20 +173,48 @@ Values are readable anywhere in the SPA via `useWorkspaceSettingsStore().setting
 
 Model a proprietary work item (an "incident", "pentest", "compliance-audit") as a first-class
 task type, the create-task twin of an agent kind. Contribute `{ taskType: '<ns>:<name>',
-presentation: { label, icon, color, description }, fields?, defaultPipelineId?, formPanel? }` to
-the `taskTypes` slot (see `acme:incident` in the example module). The SPA merges it into the
-create-task picker and the card-badge catalog:
+presentation: { label, icon, color, description, category? }, fields?, defaultPipelineId?,
+defaultFragmentIds?, formPanel? }` to the `taskTypes` slot (see `acme:incident` in the example
+module). The SPA merges it into the create-task picker and the card-badge catalog:
 
 - **`presentation`** drives the create-task picker entry and the `TaskCard` type badge (resolved
   through the pure `taskTypeMeta` read-model: the `agentKindMeta` twin). An UNREGISTERED
   namespaced type (a stale row after your extension is removed) degrades to the `feature`
-  presentation, so a leftover string never breaks a card.
-- **`fields`** are descriptor-driven create-form inputs (`text` / `textarea` / `number` /
-  `select`); their values land in the task's sparse `taskTypeFields.custom` bag (no migration).
+  presentation, so a leftover string never breaks a card. `description` is rendered verbatim as
+  the picker button's tooltip and, once the type is selected, as the type field's help text;
+  `category` groups the picker (below).
+- **`fields`** are descriptor-driven create-form inputs over the shared descriptor-form vocabulary
+  (`text` / `textarea` / `number` / `select` / `checkbox` / `checkbox-group` / `path`, with
+  defaults and `showWhen` visibility; `password` is excluded by construction because a task field
+  value reaches prompts and telemetry). Their values land in the task's sparse
+  `taskTypeFields.custom` bag (no migration). A BACKEND-registered descriptor is enforced
+  server-side on create as well (required answers, option lists, lengths); a code-shipped one is
+  known only to the SPA, so the create form is its only check (see the Validation note below).
 - **`formPanel`** optionally names a bespoke create-form section component you contribute to the
   `taskTypeFormPanels` slot (paired by that id, like `resultViews`); shown INSTEAD of `fields`. An
   unpaired id degrades to the descriptor fields.
 - **`defaultPipelineId`** pre-selects the type's pipeline in the picker.
+- **`defaultFragmentIds`** seed the type's standing context (best-practice fragment ids) onto every
+  new task of it, beside whatever it inherits from its service.
+
+**The picker is grouped, not flat** (`utils/taskTypePicker.ts`): the built-in types come first in
+one uncaptioned row, then one captioned row per declared `presentation.category` in registration
+order, then any uncategorized types under a translated "Other" heading. Declare a category once you
+ship more than a couple of types, or they pile up behind the everyday `feature` / `bug` choices.
+Categories differing only in case or spacing are ONE row, captioned as you first wrote it, so a
+stray `API delivery` / `API Delivery` pair does not split a category in half.
+
+Your own strings (labels, category captions, descriptions) are rendered verbatim and never enter a
+locale catalog; only the platform's own chrome around them is i18n, which is why the "Other" heading
+is the one caption you do not supply. Each row carries `data-testid="task-type-row"` plus
+`data-task-type-row="<id>"`, and each choice `data-testid="task-type-<taskType>"`, so your own e2e
+suite can address a row and the caption inside it.
+
+Together, `fields` + `defaultFragmentIds` + `defaultPipelineId` are what turns a task type from a
+badge into a **reusable operation**: a canned unit of work an org runs repeatedly with per-case
+input, whose collected values reach every agent's prompt. See
+[`docs/initiatives/reusable-operations.md`](../../../../docs/initiatives/reusable-operations.md)
+and the `org:introduce-api` worked example in `backend/internal/example-custom-agent`.
 
 The **same type can be delivered from the backend** instead of code-shipped: register it on the
 deployment's app-owned `TaskTypeRegistry` and it arrives in the workspace snapshot's

package/app/utils/taskTypePicker.spec.ts

@@ -0,0 +1,161 @@
+import { describe, it, expect } from 'vitest'
+import type { CustomTaskType } from '~/types/domain'
+import { buildTaskTypePickerRows, type TaskTypePickerChoice } from './taskTypePicker'
+
+const BUILT_INS: TaskTypePickerChoice[] = [
+  { value: 'feature', label: 'Feature', icon: 'i-lucide-sparkles' },
+  { value: 'bug', label: 'Bug', icon: 'i-lucide-bug' },
+]
+
+/** The localized chrome the caller passes in; the util never authors a display string itself. */
+const CAPTIONS = { other: 'Other' }
+
+const custom = (
+  taskType: string,
+  category?: string,
+  description = `What ${taskType} does`,
+): CustomTaskType =>
+  ({
+    taskType,
+    presentation: {
+      label: taskType.split(':')[1] ?? taskType,
+      icon: 'i-lucide-plug',
+      color: '#0ea5e9',
+      description,
+      ...(category === undefined ? {} : { category }),
+    },
+  }) as CustomTaskType
+
+describe('buildTaskTypePickerRows', () => {
+  it('puts the built-in types first, in one uncaptioned row', () => {
+    const rows = buildTaskTypePickerRows(
+      BUILT_INS,
+      [custom('org:introduce-api', 'API delivery')],
+      CAPTIONS,
+    )
+
+    expect(rows[0]).toEqual({ id: 'built-in', caption: null, choices: BUILT_INS })
+    expect(rows[1]?.caption).toBe('API delivery')
+  })
+
+  it('groups custom types sharing a category under one caption, in first-appearance order', () => {
+    const rows = buildTaskTypePickerRows(
+      BUILT_INS,
+      [
+        custom('org:introduce-api', 'API delivery'),
+        custom('org:onboard-tenant', 'Tenancy'),
+        custom('org:retire-endpoint', 'API delivery'),
+      ],
+      CAPTIONS,
+    )
+
+    // Registration order is the only order the deployment expressed, so it is the caption order,
+    // NOT alphabetical (which would put 'API delivery' first by accident here).
+    expect(rows.slice(1).map((r) => r.caption)).toEqual(['API delivery', 'Tenancy'])
+    expect(rows[1]?.choices.map((c) => c.value)).toEqual([
+      'org:introduce-api',
+      'org:retire-endpoint',
+    ])
+    expect(rows[2]?.choices.map((c) => c.value)).toEqual(['org:onboard-tenant'])
+  })
+
+  it('carries the verbatim wire presentation onto each custom choice', () => {
+    const rows = buildTaskTypePickerRows(
+      BUILT_INS,
+      [custom('org:introduce-api', 'API delivery', 'Expose functionality over the standard API.')],
+      CAPTIONS,
+    )
+
+    expect(rows[1]?.choices[0]).toEqual({
+      value: 'org:introduce-api',
+      label: 'introduce-api',
+      icon: 'i-lucide-plug',
+      description: 'Expose functionality over the standard API.',
+    })
+  })
+
+  it('folds captions differing only in case or spacing into one row, keeping the first spelling', () => {
+    const rows = buildTaskTypePickerRows(
+      BUILT_INS,
+      [custom('org:introduce-api', 'API delivery'), custom('org:retire-endpoint', 'api  DELIVERY')],
+      CAPTIONS,
+    )
+
+    // One row, captioned as the deployment first wrote it: a second heading differing only in case
+    // would read as a second category its author never declared.
+    expect(rows).toHaveLength(2)
+    expect(rows[1]?.caption).toBe('API delivery')
+    expect(rows[1]?.id).toBe('category:api delivery')
+    expect(rows[1]?.choices.map((c) => c.value)).toEqual([
+      'org:introduce-api',
+      'org:retire-endpoint',
+    ])
+  })
+
+  it('keeps captions that differ beyond case and spacing apart, non-ASCII included', () => {
+    const rows = buildTaskTypePickerRows(
+      [],
+      [custom('org:ambito', 'Ámbito'), custom('org:embito', 'Émbito')],
+      CAPTIONS,
+    )
+
+    expect(rows.map((r) => r.caption)).toEqual(['Ámbito', 'Émbito'])
+  })
+
+  it('captions the trailing uncategorized row with the caller chrome string', () => {
+    const rows = buildTaskTypePickerRows(
+      BUILT_INS,
+      [
+        custom('acme:incident'),
+        custom('org:introduce-api', 'API delivery'),
+        custom('acme:pentest'),
+      ],
+      CAPTIONS,
+    )
+
+    expect(rows.map((r) => r.caption)).toEqual([null, 'API delivery', 'Other'])
+    expect(rows[2]).toEqual({
+      id: 'other',
+      caption: 'Other',
+      choices: [
+        expect.objectContaining({ value: 'acme:incident' }),
+        expect.objectContaining({ value: 'acme:pentest' }),
+      ],
+    })
+  })
+
+  it('leaves the uncategorized row uncaptioned when it is the only row', () => {
+    // Nothing precedes it, so a heading would name a distinction the picker does not show.
+    const rows = buildTaskTypePickerRows([], [custom('acme:incident')], CAPTIONS)
+
+    expect(rows).toEqual([
+      {
+        id: 'other',
+        caption: null,
+        choices: [expect.objectContaining({ value: 'acme:incident' })],
+      },
+    ])
+  })
+
+  it('treats a blank category as no category rather than an empty caption', () => {
+    // A CODE-shipped consumer type skips the wire schema's `v.trim()`, so this is reachable.
+    const rows = buildTaskTypePickerRows(BUILT_INS, [custom('acme:incident', '   ')], CAPTIONS)
+
+    expect(rows.map((r) => r.id)).toEqual(['built-in', 'other'])
+  })
+
+  it('emits no rows for empty inputs, and no custom rows when nothing is registered', () => {
+    expect(buildTaskTypePickerRows([], [], CAPTIONS)).toEqual([])
+    expect(buildTaskTypePickerRows(BUILT_INS, [], CAPTIONS).map((r) => r.id)).toEqual(['built-in'])
+  })
+
+  it('keeps a row per category even when only custom types are offered', () => {
+    const rows = buildTaskTypePickerRows(
+      [],
+      [custom('org:introduce-api', 'API delivery')],
+      CAPTIONS,
+    )
+
+    expect(rows.map((r) => r.caption)).toEqual(['API delivery'])
+  })
+})

package/app/utils/taskTypePicker.ts

@@ -0,0 +1,127 @@
+import type { CustomTaskType } from '~/types/domain'
+
+/**
+ * The create-task type picker's layout rule (reusable-operations initiative, slice 3).
+ *
+ * The picker was one flat button row, which is right for the handful of built-in types and wrong
+ * the moment a deployment registers a catalog of REUSABLE OPERATIONS: an org with twenty of them
+ * ("Introduce API", "Retire endpoint", "Add tenant", …) turns the row into an undifferentiated
+ * wall in which the everyday `feature` / `bug` choices are no longer findable. Each custom type
+ * may declare a `presentation.category`, and this is where that axis becomes rows.
+ *
+ * Extracted rather than inlined in `AddTaskModal.vue` for the same reason as
+ * `buildFragmentCategoryGroups`: the ORDER is the behaviour worth pinning, and a rule inside an
+ * SFC is only reachable by mounting one.
+ */
+
+/** One selectable type in the picker. */
+export interface TaskTypePickerChoice<T extends string = string> {
+  /** The task type id submitted on create. */
+  value: T
+  /** Button label: an i18n string for a built-in, the verbatim wire presentation for a custom type. */
+  label: string
+  /** Icon id (`i-lucide-*`). */
+  icon: string
+  /**
+   * The deployment-authored one-liner from a CUSTOM type's presentation, rendered verbatim (never
+   * i18n). Absent for a built-in type, whose meaning is fixed and whose label is already localized.
+   */
+  description?: string
+}
+
+/** One row of the picker: the choices under an optional caption. */
+export interface TaskTypePickerRow<T extends string = string> {
+  /**
+   * Stable `v-for` key, also published as the row's `data-task-type-row` attribute so a caption
+   * (whose `data-testid` repeats per row, exactly as `pipeline-step`'s does) is addressable through
+   * its row instead of by position. Never rendered as text: `built-in`, `other`, or
+   * `category:<folded caption>`.
+   */
+  id: string
+  /**
+   * The row's heading, or `null` for an UNCAPTIONED row. Deployment-authored and rendered verbatim
+   * for a category row; the caller's localized chrome string for the leftovers row.
+   */
+  caption: string | null
+  choices: TaskTypePickerChoice<T>[]
+}
+
+/** The localized CHROME captions the picker needs; every other caption is deployment-authored. */
+export interface TaskTypePickerCaptions {
+  /** Heading for the trailing row of custom types that declared no category. */
+  other: string
+}
+
+/**
+ * Lay the picker out as rows: the BUILT-IN types first in one uncaptioned row (the everyday
+ * delivery loop stays where it has always been), then one captioned row per declared category in
+ * first-appearance order (the deployment's own registration order, which is the only order it
+ * expressed), then any uncategorized custom types in a trailing row captioned `captions.other`.
+ *
+ * Deliberately no collapsing, no overflow menu and no alphabetical re-sort: an operation catalog
+ * that needs those has outgrown what a create-task dialog should be asking, and each would hide a
+ * choice behind a second interaction.
+ */
+export function buildTaskTypePickerRows<T extends string>(
+  builtIns: readonly TaskTypePickerChoice<T>[],
+  customTypes: readonly CustomTaskType[],
+  captions: TaskTypePickerCaptions,
+): TaskTypePickerRow<T>[] {
+  const rows: TaskTypePickerRow<T>[] = []
+  if (builtIns.length > 0) rows.push({ id: 'built-in', caption: null, choices: [...builtIns] })
+
+  const byCategory = new Map<string, { caption: string; choices: TaskTypePickerChoice<T>[] }>()
+  const uncategorized: TaskTypePickerChoice<T>[] = []
+  for (const type of customTypes) {
+    const choice = toChoice<T>(type)
+    // A category is `v.trim()`-ed on the wire, but a CODE-shipped consumer type is trusted and
+    // unvalidated (see `docs/consumer-extensions.md`), so a whitespace-only caption is possible
+    // and must read as "no category" rather than render an empty heading.
+    const caption = type.presentation.category?.trim()
+    if (!caption) {
+      uncategorized.push(choice)
+      continue
+    }
+    const key = categoryKey(caption)
+    const bucket = byCategory.get(key)
+    if (bucket) bucket.choices.push(choice)
+    else byCategory.set(key, { caption, choices: [choice] })
+  }
+
+  for (const [key, { caption, choices }] of byCategory)
+    rows.push({ id: `category:${key}`, caption, choices })
+  // The leftovers are captioned only when something PRECEDES them: as the picker's only row they
+  // are the whole catalog, and a heading would then name a distinction the user cannot see.
+  if (uncategorized.length > 0)
+    rows.push({
+      id: 'other',
+      caption: rows.length > 0 ? captions.other : null,
+      choices: uncategorized,
+    })
+  return rows
+}
+
+/**
+ * The bucket a caption falls in: its own text folded on CASE and on whitespace runs, so two
+ * spellings of one category ("API delivery" / "api  delivery") are ONE row rather than
+ * near-duplicate headings sitting beside each other. The row still renders the FIRST-SEEN
+ * spelling verbatim, because the caption is the deployment's own words.
+ *
+ * Deliberately NOT slugified: a caption is arbitrary Unicode (a deployment writes it in its own
+ * language), so stripping it to an id-safe `[a-z0-9-]` key would fold genuinely distinct captions
+ * onto each other ("Ámbito" and "Émbito" both reduce to `mbito`). That is also why the row id
+ * carries the folded caption as-is and is addressed as an attribute VALUE rather than a testid.
+ */
+function categoryKey(caption: string): string {
+  return caption.toLowerCase().replace(/\s+/g, ' ')
+}
+
+/**
+ * A registered custom type as a picker choice. The id assertion carries the widened `taskType`
+ * contract (`<built-in> | <ns>:<name>`): a namespaced registered id IS a legal create-task value,
+ * which is what let `AddTaskModal` offer these choices in the first place.
+ */
+function toChoice<T extends string>(type: CustomTaskType): TaskTypePickerChoice<T> {
+  const { label, icon, description } = type.presentation
+  return { value: type.taskType as T, label, icon, ...(description ? { description } : {}) }
+}

package/i18n/locales/de.json

@@ -2600,6 +2600,7 @@
       "title": "Eine Aufgabe hinzufügen",
       "newTaskIn": "Neue Aufgabe in {container}",
       "typeLabel": "Typ",
+      "typeOther": "Sonstige",
       "types": {
         "feature": "Feature",
         "bug": "Bug",

package/i18n/locales/en.json

@@ -216,6 +216,10 @@
       "title": "Add a task",
       "newTaskIn": "New task in {container}",
       "typeLabel": "Type",
+      "typeOther": "Other",
+      "@typeOther": {
+        "description": "Heading over the trailing group in the task-type picker: the deployment's own registered task types that declared no category of their own. A NOUN-like group heading ('the other ones'), not the adjective describing a single type."
+      },
       "types": {
         "feature": "Feature",
         "bug": "Bug",

package/i18n/locales/es.json

@@ -189,6 +189,7 @@
       "title": "Añadir una tarea",
       "newTaskIn": "Nueva tarea en {container}",
       "typeLabel": "Tipo",
+      "typeOther": "Otros",
       "types": {
         "feature": "Funcionalidad",
         "bug": "Error",

package/i18n/locales/fr.json

@@ -189,6 +189,7 @@
       "title": "Ajouter une tâche",
       "newTaskIn": "Nouvelle tâche dans {container}",
       "typeLabel": "Type",
+      "typeOther": "Autres",
       "types": {
         "feature": "Fonctionnalité",
         "bug": "Bug",

package/i18n/locales/he.json

@@ -189,6 +189,7 @@
       "title": "הוסף משימה",
       "newTaskIn": "משימה חדשה ב-{container}",
       "typeLabel": "סוג",
+      "typeOther": "אחרים",
       "types": {
         "feature": "תכונה",
         "bug": "באג",

package/i18n/locales/it.json

@@ -2600,6 +2600,7 @@
       "title": "Aggiungi un'attività",
       "newTaskIn": "Nuova attività in {container}",
       "typeLabel": "Tipo",
+      "typeOther": "Altri",
       "types": {
         "feature": "Feature",
         "bug": "Bug",

package/i18n/locales/ja.json

@@ -189,6 +189,7 @@
       "title": "タスクを追加",
       "newTaskIn": "{container} 内の新しいタスク",
       "typeLabel": "種類",
+      "typeOther": "その他",
       "types": {
         "feature": "機能",
         "bug": "バグ",

package/i18n/locales/pl.json

@@ -189,6 +189,7 @@
       "title": "Dodaj zadanie",
       "newTaskIn": "Nowe zadanie w {container}",
       "typeLabel": "Typ",
+      "typeOther": "Inne",
       "types": {
         "feature": "Funkcja",
         "bug": "Błąd",

package/i18n/locales/tr.json

@@ -189,6 +189,7 @@
       "title": "Görev ekle",
       "newTaskIn": "{container} içinde yeni görev",
       "typeLabel": "Tür",
+      "typeOther": "Diğer",
       "types": {
         "feature": "Özellik",
         "bug": "Hata",

package/i18n/locales/uk.json

@@ -189,6 +189,7 @@
       "title": "Додати завдання",
       "newTaskIn": "Нове завдання в {container}",
       "typeLabel": "Тип",
+      "typeOther": "Інші",
       "types": {
         "feature": "Функція",
         "bug": "Помилка",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.219.1",
+  "version": "0.220.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.233.0"
+    "@cat-factory/contracts": "0.234.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",