@cat-factory/app 0.232.0 → 0.232.2

package/app/components/layout/BoardSwitcher.vue

@@ -107,12 +107,17 @@ const boardItems = computed<DropdownMenuItem[][]>(() => [
     // manages membership can see at a glance which boards are scoped vs open to the account.
     icon: w.accessMode === 'restricted' ? 'i-lucide-lock' : 'i-lucide-layout-dashboard',
     trailingIcon: w.id === workspace.workspaceId ? 'i-lucide-check' : undefined,
+    // Addressable per board id: which board a row opens is the one thing about this menu a test
+    // (or a screen reader's user testing a switch) cannot get from the label, which is a name a
+    // person chose and two boards may share.
+    'data-testid': `board-option-${w.id}`,
     onSelect: () => void switchBoard(w.id),
   })),
   [
     {
       label: t('layout.boardSwitcher.board.new'),
       icon: 'i-lucide-plus',
+      'data-testid': 'board-new',
       onSelect: () => openPrompt('board'),
     },
     // Rename/delete of the active board is `settings.manage` — omit for a member/viewer,
@@ -290,6 +295,8 @@ async function submitPrompt() {
         class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-2.5 py-1.5 text-start transition hover:bg-slate-800/60"
         :class="collapsed ? 'justify-center' : ''"
         :disabled="busy"
+        data-testid="board-switcher"
+        :data-board-id="workspace.workspaceId ?? ''"
       >
         <UIcon name="i-lucide-layout-dashboard" class="h-4 w-4 shrink-0 text-indigo-400" />
         <span v-if="!collapsed" class="truncate text-sm font-medium text-white">

package/app/components/palettes/AgentPalette.vue

@@ -86,6 +86,7 @@ function toggle(id: string) {
             type="button"
             class="flex w-full items-center gap-2.5 rounded-lg border border-slate-700 bg-slate-800/60 p-2 text-start transition hover:border-slate-500 hover:bg-slate-800"
             :title="a.description"
+            :data-testid="`palette-agent-${a.kind}`"
             @click="$emit('add', a.kind)"
           >
             <div

package/app/components/panels/AgentStepDetail.vue

@@ -304,9 +304,13 @@ async function copyOutput() {
 <template>
   <Teleport to="body">
     <Transition name="reader-fade">
+      <!-- `data-agent-kind` names WHICH step this window is scoped to, as the kind rather than as
+           the heading beside it: the heading is a translated display label, so it is the wrong
+           thing to read for anything that needs to know which agent's step is open. -->
       <div
         v-if="open && step && agent"
         data-testid="step-detail"
+        :data-agent-kind="step?.agentKind"
         class="fixed inset-0 z-50 flex max-h-[100dvh] bg-slate-950/96 backdrop-blur-sm"
         role="dialog"
         aria-modal="true"

package/app/components/pipeline/PipelineBuilder.vue

@@ -521,6 +521,7 @@ async function clone(p: Pipeline) {
             :placeholder="t('pipeline.builder.namePlaceholder')"
             size="sm"
             class="mb-2"
+            data-testid="pipeline-builder-name"
           />
 
           <!-- Purpose: the pipeline's use-case classifier. Drives which task pickers offer it (a
@@ -621,6 +622,9 @@ async function clone(p: Pipeline) {
               :key="unit.index"
               class="flex flex-col gap-2 rounded-lg border border-slate-700 bg-slate-800/60 p-2"
               :class="{ 'opacity-50': pipelines.draftEnabled[unit.index] === false }"
+              data-testid="pipeline-draft-step"
+              :data-agent-kind="unit.kind"
+              :data-gated="pipelines.draftGates[unit.index] === true"
             >
               <div class="flex items-center gap-1.5">
                 <span class="w-4 shrink-0 text-center text-[10px] text-slate-500">{{
@@ -686,6 +690,7 @@ async function clone(p: Pipeline) {
                         ? t('pipeline.builder.approvalRemoveTooltip')
                         : t('pipeline.builder.approvalAddTooltip')
                     "
+                    data-testid="pipeline-step-gate"
                     @click="pipelines.toggleDraftGate(unit.index)"
                   />
                   <!-- Consensus: run this step through the multi-model mechanism (eligible

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.232.0",
+  "version": "0.232.2",
   "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.249.0"
+    "@cat-factory/contracts": "0.250.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",