@cat-factory/app 0.96.2 → 0.96.3

package/app/assets/css/main.css

@@ -94,6 +94,21 @@ body {
   }
 }
 
+/* Respect prefers-reduced-motion: the decorative, infinite attention pulses (the
+ * blocked / decision-needed halo, the PR-ready halo) and the marching-ants edge
+ * animation convey nothing the static state doesn't already, so we disable them for
+ * users who ask for less motion. Loading spinners are deliberately left alone — a
+ * spinner's motion IS its meaning ("work in progress"). */
+@media (prefers-reduced-motion: reduce) {
+  .board-pulse,
+  .board-pulse-green {
+    animation: none;
+  }
+  .vue-flow__edge.is-live .vue-flow__edge-path {
+    animation: none;
+  }
+}
+
 /* Custom block node should not show the default node chrome */
 .vue-flow__node-block {
   padding: 0;

package/app/components/board/nodes/TaskPipelineMini.vue

@@ -79,8 +79,9 @@ const ITEM_ICON: Record<string, string> = {
       {{ t('board.task.buildSteps') }}
     </div>
     <div v-for="(s, i) in steps" :key="i" class="rounded bg-slate-900/60 px-1.5 py-1">
-      <div
-        class="flex cursor-pointer items-center gap-1"
+      <button
+        type="button"
+        class="flex w-full cursor-pointer items-center gap-1 rounded text-start focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/60"
         :title="`${agentKindMeta(s.agentKind).label} — ${agentKindMeta(s.agentKind).description}\n${t('board.task.clickToViewStep')}`"
         @click.stop="openStep(i)"
       >
@@ -116,7 +117,7 @@ const ITEM_ICON: Record<string, string> = {
               : STATE_META[s.state].color,
           }"
         />
-      </div>
+      </button>
 
       <!-- pending approval gate: jump straight to the conclusions reader. Suppressed
            while a reviewer gate is folding/re-reviewing in the background (no human needed). -->

package/app/components/brainstorm/BrainstormWindow.vue

@@ -8,6 +8,7 @@
 // options or hits the iteration cap. The converged direction — not the original description — is
 // what the downstream stage (the requirements review / the architect) consumes.
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import { parseOutputOutline } from '~/utils/agentOutput'
 import type {
   BrainstormItem,
@@ -281,7 +282,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             <UBadge v-if="session" color="neutral" variant="subtle" size="sm">
               {{ t('brainstorm.iteration', { current: iteration, max: maxIterations }) }}
             </UBadge>
-            <UButton icon="i-lucide-x" color="neutral" variant="ghost" size="sm" @click="close" />
+            <IconButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :label="t('common.close')"
+              @click="close"
+            />
           </div>
         </header>
 

package/app/components/clarity/ClarityReviewWindow.vue

@@ -9,6 +9,7 @@
 // description — is what every downstream agent step (the bug investigator, the coder)
 // consumes.
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import { parseOutputOutline } from '~/utils/agentOutput'
 import type {
   ClarityItemStatus,
@@ -327,7 +328,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             <UBadge v-if="review" color="neutral" variant="subtle" size="sm">
               {{ t('clarity.iteration', { current: iteration, max: maxIterations }) }}
             </UBadge>
-            <UButton icon="i-lucide-x" color="neutral" variant="ghost" size="sm" @click="close" />
+            <IconButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :label="t('common.close')"
+              @click="close"
+            />
           </div>
         </header>
 

package/app/components/common/IconButton.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// Shared icon-only button primitive that ENFORCES the accessible-name convention (UX-62/63):
+// every icon button must carry a `label`, applied as BOTH `title` (pointer tooltip) and
+// `aria-label` (screen readers) — `title` alone never fires on touch and is invisible to
+// assistive tech, so an unlabeled icon button is a bug this component makes unrepresentable.
+// All other UButton props/listeners (icon, color, variant, size, @click, :loading, :disabled)
+// pass straight through via `$attrs`; `label` is declared as a prop so it strips off before
+// reaching UButton (whose own `label` prop would otherwise render visible text). Mirrors the
+// shape of `common/CopyButton.vue`.
+defineProps<{
+  /** Accessible name + tooltip. Required — the whole point of the primitive. */
+  label: string
+}>()
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <UButton v-bind="$attrs" :title="label" :aria-label="label" />
+</template>

package/app/components/focus/BlockFocusView.vue

@@ -4,6 +4,7 @@ import type { Block } from '~/types/domain'
 import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -106,7 +107,13 @@ function openApprovalFor(approvalId: string) {
             {{ instance ? t('focus.rerunPipeline') : t('focus.runPipeline') }}
           </UButton>
         </UDropdownMenu>
-        <UButton icon="i-lucide-x" color="neutral" variant="ghost" @click="close" />
+        <IconButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          :label="t('common.close')"
+          @click="close"
+        />
       </div>
     </header>
 

package/app/components/followUp/FollowUpWindow.vue

@@ -200,7 +200,7 @@ const STATUS_META: Record<
                         v-model="drafts[item.id]"
                         rows="2"
                         :placeholder="t('followUp.answerPlaceholder')"
-                        class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none"
+                        class="w-full resize-y rounded-md border border-slate-700 bg-slate-950/60 px-2.5 py-1.5 text-[12px] text-slate-100 placeholder:text-slate-600 focus:border-sky-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/60"
                       />
                       <div class="flex items-center gap-2">
                         <UButton

package/app/components/gates/GateResultView.vue

@@ -297,7 +297,7 @@ const conflictVerdict = computed(() => {
                     rows="3"
                     :disabled="fixBusy"
                     :placeholder="t('gates.humanReview.requestFixPlaceholder')"
-                    class="w-full resize-y rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-violet-500/60 focus:outline-none"
+                    class="w-full resize-y rounded-md border border-slate-800 bg-slate-950/60 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-violet-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/60"
                   />
                   <div class="mt-2 flex justify-end">
                     <UButton

package/app/components/humanTest/HumanTestWindow.vue

@@ -289,7 +289,7 @@ const canDestroy = computed(
                   v-model="findings"
                   rows="4"
                   :placeholder="t('humanTest.fix.placeholder')"
-                  class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none"
+                  class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/60"
                 />
                 <UButton
                   size="sm"

package/app/components/panels/InspectorPanel.vue

@@ -18,6 +18,7 @@ import TaskExecution from '~/components/panels/inspector/TaskExecution.vue'
 import TaskEstimateBadge from '~/components/panels/inspector/TaskEstimateBadge.vue'
 import EpicChildren from '~/components/panels/inspector/EpicChildren.vue'
 import InitiativeInspector from '~/components/panels/inspector/InitiativeInspector.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import RecurringScheduleSettings from '~/components/panels/inspector/RecurringScheduleSettings.vue'
 import AgentFailureCard from '~/components/board/AgentFailureCard.vue'
 import AgentStopButton from '~/components/board/AgentStopButton.vue'
@@ -265,11 +266,12 @@ const showOriginalDescription = ref(false)
             </div>
           </div>
         </div>
-        <UButton
+        <IconButton
           icon="i-lucide-x"
           color="neutral"
           variant="ghost"
           size="xs"
+          :label="t('common.close')"
           @click="ui.select(null)"
         />
       </div>

package/app/components/pipeline/PipelineProgress.vue

@@ -607,4 +607,12 @@ const ITEM_ICON: Record<string, string> = {
 .followup-blink {
   animation: followup-blink 1.4s ease-in-out infinite;
 }
+/* These decorative attention halos carry no information the static state lacks, so
+   silence them under prefers-reduced-motion (matches the board-pulse rule in main.css). */
+@media (prefers-reduced-motion: reduce) {
+  .step-active,
+  .followup-blink {
+    animation: none;
+  }
+}
 </style>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -10,6 +10,7 @@
 import { parseOutputOutline } from '~/utils/agentOutput'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
+import IconButton from '~/components/common/IconButton.vue'
 import type {
   RequirementRecommendation,
   RequirementReview,
@@ -489,7 +490,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
               :step-index="stepIndex"
               @restarted="close"
             />
-            <UButton icon="i-lucide-x" color="neutral" variant="ghost" size="sm" @click="close" />
+            <IconButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :label="t('common.close')"
+              @click="close"
+            />
           </div>
         </header>
 

package/app/components/spec/ServiceSpecWindow.vue

@@ -12,6 +12,7 @@ import type {
   RequirementPriority,
   SpecModule,
 } from '~/types/spec'
+import IconButton from '~/components/common/IconButton.vue'
 
 const { t } = useI18n()
 const board = useBoardStore()
@@ -176,7 +177,14 @@ function kindLabel(item: RequirementItem): string {
                 {{ t('spec.mode.gherkin') }}
               </UButton>
             </div>
-            <UButton icon="i-lucide-x" color="neutral" variant="ghost" size="sm" @click="close" />
+            <IconButton
+              icon="i-lucide-x"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :label="t('common.close')"
+              @click="close"
+            />
           </div>
         </header>
 

package/app/components/visualConfirm/VisualConfirmationWindow.vue

@@ -286,7 +286,7 @@ const canApprove = computed(
                     v-model="perViewNotes[p.view]"
                     rows="2"
                     :placeholder="t('visualConfirm.notePlaceholder', { view: p.view })"
-                    class="mt-1 w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-[12px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none"
+                    class="mt-1 w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-[12px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/60"
                   />
                 </div>
               </div>
@@ -340,7 +340,7 @@ const canApprove = computed(
                 v-model="globalFindings"
                 rows="3"
                 :placeholder="t('visualConfirm.requestFix.placeholder')"
-                class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none"
+                class="w-full rounded-md border border-slate-700 bg-slate-950 px-3 py-2 text-[13px] text-slate-200 placeholder:text-slate-600 focus:border-amber-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-500/60"
               />
               <div class="mt-2 flex items-center justify-between">
                 <span class="text-[11px] text-slate-500">

package/package.json

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