@cat-factory/app 0.96.2 → 0.96.4

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/auth/LoginScreen.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { apiErrorEnvelope } from '~/composables/api/errors'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const auth = useAuthStore()
 const { t } = useI18n()
@@ -320,9 +321,8 @@ const noSignInMethod = computed(
           size="lg"
           class="w-full"
         />
-        <UInput
+        <SecretInput
           v-model="password"
-          type="password"
           required
           :placeholder="t('auth.login.passwordPlaceholder')"
           icon="i-lucide-lock"
@@ -395,9 +395,8 @@ const noSignInMethod = computed(
               {{ PROVIDER_LABELS[p] }}
             </UButton>
           </div>
-          <UInput
+          <SecretInput
             v-model="remotePatToken"
-            type="password"
             required
             :placeholder="
               t('auth.login.patPlaceholder', { provider: PROVIDER_LABELS[remotePatProvider] })

package/app/components/auth/ResetPasswordScreen.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 // Standalone full-screen reset form reached from the emailed link
 // (`/reset-password?token=…`). It is a public route (see AuthGate), so a recipient who
@@ -76,18 +77,16 @@ function goToLogin() {
       </template>
 
       <form v-else class="space-y-3" @submit.prevent="submit">
-        <UInput
+        <SecretInput
           v-model="password"
-          type="password"
           required
           :placeholder="t('auth.resetPassword.newPasswordPlaceholder')"
           icon="i-lucide-lock"
           size="lg"
           class="w-full"
         />
-        <UInput
+        <SecretInput
           v-model="confirm"
-          type="password"
           required
           :placeholder="t('auth.resetPassword.confirmPasswordPlaceholder')"
           icon="i-lucide-lock"

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/common/SecretInput.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// Shared single-line secret/password input with a reveal (eye) toggle (UX-19/UX-20).
+// Masks the value by default (`type="password"`) and lets the user verify a pasted token via
+// the trailing eye button — without one, a mistyped/expired key looks identical to a good one,
+// the leading cause of invalid-credential retries. Replaces both the bare `type="password"`
+// UInputs (UX-19) and the fully-plaintext secret `UTextarea`s (UX-20), which rendered live
+// vendor keys in cleartext (shoulder-surf / screen-share leakage).
+//
+// When `secret` is false it degrades to a plain text input with no toggle, so descriptor-driven
+// fields whose secrecy is data-dependent (`field.secret ? … : …`) can bind it directly.
+// All other UInput props/listeners (icon, size, placeholder, disabled, autofocus, class, …)
+// pass straight through via `$attrs`; `secret` is a declared prop so it strips off first.
+// `$attrs` is bound BEFORE `type` so the mask/reveal control stays authoritative — a caller
+// that (out of old habit) also passes `type="password"` can't clobber the toggle.
+// Mirrors the shape of `common/CopyButton.vue` / `common/IconButton.vue`.
+const props = withDefaults(
+  defineProps<{
+    /** Whether the field holds a secret (masked + reveal toggle). When false, a plain text input. */
+    secret?: boolean
+  }>(),
+  { secret: true },
+)
+
+const model = defineModel<string>()
+const { t } = useI18n()
+const revealed = ref(false)
+const toggle = () => {
+  revealed.value = !revealed.value
+}
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <UInput v-if="!props.secret" v-model="model" v-bind="$attrs" type="text" />
+  <UInput v-else v-model="model" v-bind="$attrs" :type="revealed ? 'text' : 'password'">
+    <template #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="xs"
+        :icon="revealed ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+        :title="revealed ? t('common.hide') : t('common.reveal')"
+        :aria-label="revealed ? t('common.hide') : t('common.reveal')"
+        :aria-pressed="revealed"
+        @click.stop="toggle"
+      />
+    </template>
+  </UInput>
+</template>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -5,6 +5,7 @@
 // are write-only — the backend never returns them, so on reload we show
 // "Connected" with empty fields.
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -103,9 +104,9 @@ async function disconnect() {
             :label="field.label"
             :help="field.help"
           >
-            <UInput
+            <SecretInput
               v-model="values[field.key]"
-              :type="field.secret ? 'password' : 'text'"
+              :secret="!!field.secret"
               :placeholder="field.placeholder"
               class="w-full"
             />

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/layout/AccountDeploymentSettings.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import type { ContentStorageBackend, ContentStorageConfig } from '~/types/accountSettings'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 // Deployment integration secrets for an account (admin only): the Slack app OAuth
 // credentials, the container web-search upstream keys, and the binary-artifact (screenshot)
@@ -379,9 +380,8 @@ async function clearWeb() {
           :placeholder="t('layout.accountDeployment.slack.clientId')"
           size="sm"
         />
-        <UInput
+        <SecretInput
           v-model="slack.clientSecret"
-          type="password"
           :placeholder="t('layout.accountDeployment.slack.clientSecret')"
           size="sm"
         />
@@ -441,9 +441,8 @@ async function clearWeb() {
           :placeholder="t('layout.accountDeployment.linear.clientId')"
           size="sm"
         />
-        <UInput
+        <SecretInput
           v-model="linear.clientSecret"
-          type="password"
           :placeholder="t('layout.accountDeployment.linear.clientSecret')"
           size="sm"
         />
@@ -494,9 +493,8 @@ async function clearWeb() {
         {{ t('layout.accountDeployment.web.description') }}
       </p>
       <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
-        <UInput
+        <SecretInput
           v-model="web.braveApiKey"
-          type="password"
           :placeholder="t('layout.accountDeployment.web.braveKey')"
           size="sm"
         />
@@ -505,9 +503,8 @@ async function clearWeb() {
           :placeholder="t('layout.accountDeployment.web.searxngUrl')"
           size="sm"
         />
-        <UInput
+        <SecretInput
           v-model="web.searxngApiKey"
-          type="password"
           :placeholder="t('layout.accountDeployment.web.searxngKey')"
           size="sm"
         />
@@ -624,15 +621,13 @@ async function clearWeb() {
           </UBadge>
         </div>
         <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
-          <UInput
+          <SecretInput
             v-model="cs.accessKeyId"
-            type="password"
             :placeholder="t('layout.accountDeployment.contentStorage.accessKeyId')"
             size="sm"
           />
-          <UInput
+          <SecretInput
             v-model="cs.secretAccessKey"
-            type="password"
             :placeholder="t('layout.accountDeployment.contentStorage.secretAccessKey')"
             size="sm"
           />

package/app/components/layout/AccountTeamSettings.vue

@@ -4,6 +4,7 @@ import { apiErrorEnvelope } from '~/composables/api/errors'
 import type { AccountRole } from '~/types/domain'
 import type { InvitationStatus } from '@cat-factory/contracts'
 import AccountDeploymentSettings from '~/components/layout/AccountDeploymentSettings.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 // Team settings for an org account: the member roster (with combinable admin /
 // developer / product roles), pending email invitations, and the per-account
@@ -300,9 +301,8 @@ async function disconnectEmail() {
             :placeholder="t('layout.accountTeam.email.fromPlaceholder')"
             class="w-full"
           />
-          <UInput
+          <SecretInput
             v-model="emailApiKey"
-            type="password"
             :placeholder="t('layout.accountTeam.email.apiKeyPlaceholder')"
             class="w-full"
           />

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/providers/ApiKeysSection.vue

@@ -16,6 +16,7 @@
 //    account); admin-only, enforced server-side. Surfaced from account/team settings.
 import { computed, ref, watch } from 'vue'
 import type { ApiKey, ApiKeyProvider } from '~/types/domain'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const props = withDefaults(defineProps<{ accountId?: string; category?: 'direct' | 'proxy' }>(), {
   category: 'direct',
@@ -323,12 +324,11 @@ async function remove(k: ApiKey) {
         />
       </UFormField>
       <UFormField :label="t('providers.apiKeys.keyField')">
-        <UTextarea
+        <SecretInput
           v-model="key"
-          :rows="2"
           :disabled="needsSignIn"
           :placeholder="t('providers.apiKeys.keyPlaceholder')"
-          class="font-mono"
+          class="w-full font-mono"
         />
       </UFormField>
       <div class="flex justify-end">

package/app/components/providers/PersonalCredentialModal.vue

@@ -5,6 +5,7 @@
 // credential_required. On submit it transparently retries the gated action and caches the
 // password. The copy follows the pending vendor (Claude / GLM / ChatGPT-Codex).
 import { computed, ref, watch } from 'vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const personal = usePersonalSubscriptionsStore()
@@ -119,9 +120,8 @@ function goConnect() {
             {{ t('providers.personalCredential.passwordBody', { vendor: vendorLabel }) }}
           </p>
           <UFormField :label="t('providers.personalCredential.passwordField')">
-            <UInput
+            <SecretInput
               v-model="password"
-              type="password"
               autofocus
               :placeholder="t('providers.personalCredential.passwordPlaceholder')"
               @keydown.enter="submit()"

package/app/components/providers/PersonalSubscriptionSection.vue

@@ -6,6 +6,7 @@
 // such a run (cached locally so it's usually transparent). Recurring schedules can't use them.
 import { computed, onMounted, ref } from 'vue'
 import type { SubscriptionVendor } from '~/types/domain'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const personal = usePersonalSubscriptionsStore()
 const auth = useAuthStore()
@@ -233,19 +234,17 @@ async function disconnect(v: SubscriptionVendor) {
         />
       </UFormField>
       <UFormField :label="selectedMeta.tokenLabel">
-        <UTextarea
+        <SecretInput
           v-model="token"
-          :rows="2"
           :disabled="needsSignIn"
           :placeholder="selectedMeta.tokenPlaceholder"
-          class="font-mono"
+          class="w-full font-mono"
         />
       </UFormField>
       <div class="flex flex-wrap gap-3">
         <UFormField :label="t('personalSubscriptions.passwordField')" class="flex-1">
-          <UInput
+          <SecretInput
             v-model="password"
-            type="password"
             :disabled="needsSignIn"
             :placeholder="t('personalSubscriptions.passwordPlaceholder')"
           />

package/app/components/providers/VendorCredentialsModal.vue

@@ -8,6 +8,7 @@
 import { computed, ref, watch } from 'vue'
 import type { SubscriptionVendor } from '~/types/domain'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t, n } = useI18n()
 const ui = useUiStore()
@@ -215,11 +216,10 @@ function vendorLabel(v: SubscriptionVendor): string {
                 />
               </UFormField>
               <UFormField :label="t('providers.vendorCredentials.tokenField')">
-                <UTextarea
+                <SecretInput
                   v-model="token"
-                  :rows="3"
                   :placeholder="tokenPlaceholder"
-                  class="font-mono"
+                  class="w-full font-mono"
                 />
               </UFormField>
               <div class="flex justify-end">

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/settings/KubernetesEngineForm.vue

@@ -8,6 +8,7 @@
 // single-connection backend, which still carries the manifest source inline).
 import { computed, reactive, ref, watch } from 'vue'
 import { KUBERNETES_ENV_TOKEN_SECRET_KEY } from '@cat-factory/contracts'
+import SecretInput from '~/components/common/SecretInput.vue'
 import type {
   EnvironmentHandlerView,
   InfraEngine,
@@ -351,10 +352,9 @@ async function copyAutoSetupCommand() {
           {{ t('settings.infrastructure.kubernetesEngine.tokenSaved') }}
         </span>
       </template>
-      <UInput
+      <SecretInput
         v-model="apiToken"
-        type="password"
-        class="font-mono"
+        class="w-full font-mono"
         autocomplete="off"
         :placeholder="
           tokenStored

package/app/components/settings/KubernetesEnvironmentForm.vue

@@ -10,6 +10,7 @@
 // driven (see docs/initiatives/descriptor-driven-infra-forms.md).
 import { computed, reactive, ref, watch } from 'vue'
 import { KUBERNETES_ENV_TOKEN_SECRET_KEY } from '@cat-factory/contracts'
+import SecretInput from '~/components/common/SecretInput.vue'
 import type { ProviderConnection } from '~/types/providerConnections'
 
 const props = defineProps<{
@@ -253,7 +254,7 @@ function optional(label: string): string {
       :label="t('settings.providerConnection.kubernetesEnv.apiToken')"
       :help="t('settings.providerConnection.kubernetesEnv.apiTokenHelp')"
     >
-      <UInput v-model="apiToken" type="password" class="font-mono" />
+      <SecretInput v-model="apiToken" class="w-full font-mono" />
     </UFormField>
 
     <!-- Manifest source: where the per-PR resources are read from. -->

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -8,6 +8,7 @@
 import { computed, ref, watch } from 'vue'
 import { LOCAL_RUNNER_DEFAULTS, LOCAL_RUNNER_LABELS, type LocalRunner } from '~/types/localModels'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -276,9 +277,8 @@ async function remove(p: LocalRunner) {
           </UFormField>
 
           <UFormField :label="t('settings.localModelEndpoints.apiKeyOptional')">
-            <UInput
+            <SecretInput
               v-model="apiKey"
-              type="password"
               class="font-mono"
               :placeholder="
                 existing?.hasApiKey

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -7,6 +7,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import type { ObservabilityProviderKind } from '~/types/releaseHealth'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -194,17 +195,11 @@ const connectedLabel = computed(() => {
               <UInput v-model="datadog.site" placeholder="datadoghq.com" class="w-full" />
             </UFormField>
             <UFormField :label="t('settings.observabilityConnection.datadog.apiKey')">
-              <UInput
-                v-model="datadog.apiKey"
-                type="password"
-                placeholder="DD-API-KEY"
-                class="w-full"
-              />
+              <SecretInput v-model="datadog.apiKey" placeholder="DD-API-KEY" class="w-full" />
             </UFormField>
             <UFormField :label="t('settings.observabilityConnection.datadog.appKey')">
-              <UInput
+              <SecretInput
                 v-model="datadog.appKey"
-                type="password"
                 placeholder="DD-APPLICATION-KEY"
                 class="w-full"
               />
@@ -254,7 +249,7 @@ const connectedLabel = computed(() => {
           </p>
 
           <UFormField :label="t('settings.observabilityConnection.incident.pagerDutyToken')">
-            <UInput v-model="pagerDuty.apiToken" type="password" class="w-full" />
+            <SecretInput v-model="pagerDuty.apiToken" class="w-full" />
           </UFormField>
           <UFormField :label="t('settings.observabilityConnection.incident.pagerDutyFromEmail')">
             <UInput
@@ -265,7 +260,7 @@ const connectedLabel = computed(() => {
             />
           </UFormField>
           <UFormField :label="t('settings.observabilityConnection.incident.incidentIoKey')">
-            <UInput v-model="incidentIo.apiKey" type="password" class="w-full" />
+            <SecretInput v-model="incidentIo.apiKey" class="w-full" />
           </UFormField>
 
           <div class="flex gap-2">

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -10,6 +10,7 @@
 import { computed, ref, watch } from 'vue'
 import type { OpenRouterModelMeta } from '~/types/openrouter'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -276,11 +277,10 @@ function manageKeys() {
             </UFormField>
           </div>
           <UFormField :label="t('settings.openRouterCatalog.apiKey')">
-            <UTextarea
+            <SecretInput
               v-model="keyValue"
-              :rows="2"
               placeholder="paste your OpenRouter key (sk-or-…)"
-              class="font-mono"
+              class="w-full font-mono"
             />
           </UFormField>
           <div class="flex justify-end">

package/app/components/settings/PackageRegistriesPanel.vue

@@ -7,6 +7,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import type { PackageRegistryVendor } from '~/types/packageRegistries'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -199,12 +200,7 @@ async function removeEntry(entryId: string) {
           </UFormField>
 
           <UFormField :label="t('settings.packageRegistries.add.token')">
-            <UInput
-              v-model="form.token"
-              type="password"
-              class="w-full"
-              data-testid="package-registry-token"
-            />
+            <SecretInput v-model="form.token" class="w-full" data-testid="package-registry-token" />
           </UFormField>
 
           <UButton

package/app/components/settings/ProviderManifestEditor.vue

@@ -18,6 +18,7 @@ import { computed, ref, watch } from 'vue'
 import * as v from 'valibot'
 import { environmentManifestSchema, runnerPoolManifestSchema } from '@cat-factory/contracts'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const props = defineProps<{
   kind: ProviderConnectionKind
@@ -255,9 +256,8 @@ function onSave() {
         </p>
       </template>
       <UFormField v-for="key in secretKeys" :key="key" :label="key">
-        <UInput
+        <SecretInput
           v-model="secrets[key]"
-          type="password"
           class="w-full font-mono"
           autocomplete="off"
           :data-testid="`manifest-editor-secret-${key}`"

package/app/components/settings/UserSecretsSection.vue

@@ -7,6 +7,7 @@
 import { computed, ref, watch } from 'vue'
 import type { ProviderConfigField, UserSecretKind } from '~/types/userSecrets'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -207,9 +208,9 @@ async function remove() {
             "
             :help="field.help"
           >
-            <UInput
+            <SecretInput
               v-model="values[field.key]"
-              :type="field.secret ? 'password' : 'text'"
+              :secret="!!field.secret"
               class="font-mono"
               :placeholder="field.placeholder"
             />

package/app/components/slack/SlackPanel.vue

@@ -8,6 +8,7 @@ import { computed, reactive, ref, watch } from 'vue'
 import type { NotificationType } from '~/types/notifications'
 import type { SlackMemberMappingEntry, SlackMemberRole, SlackRoute } from '~/types/slack'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import SecretInput from '~/components/common/SecretInput.vue'
 
 const ui = useUiStore()
 const slack = useSlackStore()
@@ -188,13 +189,7 @@ async function saveMapping() {
               {{ t('slack.connect.orPasteToken') }}
             </span>
             <div class="flex gap-2">
-              <UInput
-                v-model="tokenInput"
-                size="sm"
-                class="flex-1"
-                type="password"
-                placeholder="xoxb-…"
-              />
+              <SecretInput v-model="tokenInput" size="sm" class="flex-1" placeholder="xoxb-…" />
               <UButton
                 color="primary"
                 variant="soft"

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/i18n/locales/en.json

@@ -21,6 +21,8 @@
     "retry": "Retry",
     "copy": "Copy",
     "copied": "Copied to clipboard",
+    "reveal": "Reveal",
+    "hide": "Hide",
     "delete": "Delete",
     "remove": "Remove",
     "confirm": {

package/i18n/locales/es.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "Puedes volver a configurarlo más tarde."
     },
     "copied": "Copiado al portapapeles",
+    "reveal": "Mostrar",
+    "hide": "Ocultar",
     "disconnect": "Desconectar",
     "copyFailed": "No se pudo copiar al portapapeles",
     "revoke": "Revocar",

package/i18n/locales/fr.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "Vous pourrez le reconfigurer plus tard."
     },
     "copied": "Copié dans le presse-papiers",
+    "reveal": "Afficher",
+    "hide": "Masquer",
     "disconnect": "Déconnecter",
     "copyFailed": "Échec de la copie dans le presse-papiers",
     "revoke": "Révoquer",

package/i18n/locales/he.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "אפשר להגדיר זאת שוב מאוחר יותר."
     },
     "copied": "הועתק ללוח",
+    "reveal": "הצג",
+    "hide": "הסתר",
     "disconnect": "נתק",
     "copyFailed": "לא ניתן להעתיק ללוח",
     "revoke": "לבטל",

package/i18n/locales/ja.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "後で再設定できます。"
     },
     "copied": "クリップボードにコピーしました",
+    "reveal": "表示",
+    "hide": "非表示",
     "disconnect": "切断",
     "copyFailed": "クリップボードにコピーできませんでした",
     "revoke": "取り消す",

package/i18n/locales/pl.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "Możesz skonfigurować to ponownie później."
     },
     "copied": "Skopiowano do schowka",
+    "reveal": "Pokaż",
+    "hide": "Ukryj",
     "disconnect": "Rozłącz",
     "copyFailed": "Nie udało się skopiować do schowka",
     "revoke": "Unieważnij",

package/i18n/locales/tr.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "Bunu daha sonra yeniden yapılandırabilirsiniz."
     },
     "copied": "Panoya kopyalandı",
+    "reveal": "Göster",
+    "hide": "Gizle",
     "disconnect": "Bağlantıyı kes",
     "copyFailed": "Panoya kopyalanamadı",
     "revoke": "İptal et",

package/i18n/locales/uk.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "Ви зможете налаштувати це знову пізніше."
     },
     "copied": "Скопійовано в буфер обміну",
+    "reveal": "Показати",
+    "hide": "Приховати",
     "disconnect": "Від'єднати",
     "copyFailed": "Не вдалося скопіювати до буфера обміну",
     "revoke": "Відкликати",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.96.2",
+  "version": "0.96.4",
   "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",
@@ -34,7 +34,7 @@
     "valibot": "^1.4.2",
     "vue": "3.5.39",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.106.0"
+    "@cat-factory/contracts": "0.107.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",