@cat-factory/app 0.96.3 → 0.96.5

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/BoardCanvas.vue

@@ -6,7 +6,7 @@ import EpicNode from './nodes/EpicNode.vue'
 import TaskDependencyEdges from './TaskDependencyEdges.vue'
 import DependencyConnectOverlay from './DependencyConnectOverlay.vue'
 import { readDndPayload, blockIdFromEvent } from '~/utils/dnd'
-import { BOARD_FLOW_ID } from '~/composables/useBoardFlow'
+import { BOARD_FLOW_ID, BOARD_MIN_ZOOM, BOARD_MAX_ZOOM } from '~/composables/useBoardFlow'
 import { useTaskExpansion } from '~/composables/useTaskExpansion'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameStacking } from '~/composables/useFrameStacking'
@@ -102,9 +102,20 @@ function onNodeClick({ node }: NodeMouseEvent) {
   ui.select(node.id)
 }
 
-function onNodeDoubleClick({ node }: NodeMouseEvent) {
-  // Frames are containers: double-click expands to reveal their tasks.
-  ui.toggleFrame(node.id)
+function onNodeDoubleClick({ event, node }: NodeMouseEvent) {
+  // Task cards live *inside* their frame node, so Vue Flow reports the frame here even
+  // when the double-click landed on a task. Resolve the real target from the DOM: a
+  // double-click on a task opens its focus view (the same "open this task" gesture as the
+  // card's review action), while a double-click on frame chrome centres the camera on the
+  // frame and zooms it in. Epics aren't containers, so their double-click stays a no-op.
+  const targetId = blockIdFromEvent(event)
+  const target = targetId ? board.getBlock(targetId) : undefined
+  if (target?.level === 'task') {
+    ui.select(target.id)
+    ui.focus(target.id)
+    return
+  }
+  if (node.type === 'block') void focusFrame(node.id)
 }
 
 function onPaneClick() {
@@ -147,7 +158,17 @@ async function onDrop(event: DragEvent) {
     const blockId = blockIdFromEvent(event)
     const target = blockId ? board.getBlock(blockId) : undefined
     const pipeline = pipelines.getPipeline(payload.pipelineId)
-    if (!target || !pipeline) return
+    // Unknown pipeline id is an internal glitch (nothing the user can act on); a drop
+    // onto blank canvas / a non-block, though, needs the same "aim at a task" nudge the
+    // wrong-level path gives — otherwise the drop just vanishes (UX-07).
+    if (!pipeline) return
+    if (!target) {
+      toast.add({
+        title: t('board.canvas.dropOntoTaskTitle'),
+        description: t('board.canvas.dropOntoTaskBody'),
+      })
+      return
+    }
     if (target.level !== 'task') {
       toast.add({
         title: t('board.canvas.dropOntoTaskTitle'),
@@ -179,8 +200,8 @@ async function onDrop(event: DragEvent) {
     <VueFlow
       :id="BOARD_FLOW_ID"
       :nodes="nodes"
-      :min-zoom="0.2"
-      :max-zoom="3"
+      :min-zoom="BOARD_MIN_ZOOM"
+      :max-zoom="BOARD_MAX_ZOOM"
       :default-viewport="{ x: 40, y: 20, zoom: 0.85 }"
       :pan-on-drag="panOnDrag"
       :elevate-nodes-on-select="false"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useBoardFlow } from '~/composables/useBoardFlow'
+import { useBoardFlow, BOARD_MIN_ZOOM, BOARD_MAX_ZOOM } from '~/composables/useBoardFlow'
 import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
+import IconButton from '~/components/common/IconButton.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -10,7 +11,7 @@ const workspaceSettings = useWorkspaceSettingsStore()
 const services = useServicesStore()
 const toast = useToast()
 const { t, n } = useI18n()
-const { fitView, zoomIn, zoomOut } = useBoardFlow()
+const { fitView, zoomIn, zoomOut, resetZoom } = useBoardFlow()
 
 async function mountService(serviceId: string, title: string) {
   try {
@@ -44,6 +45,10 @@ const mountableItems = computed(() =>
 )
 
 const zoomPct = computed(() => Math.round(ui.zoom * 100))
+// Disable the zoom buttons once the camera hits a clamp (Vue Flow pins the zoom exactly
+// at the limit, so a small epsilon guards against float drift). UX-16.
+const atMinZoom = computed(() => ui.zoom <= BOARD_MIN_ZOOM + 0.001)
+const atMaxZoom = computed(() => ui.zoom >= BOARD_MAX_ZOOM - 0.001)
 // Exhaustive (tier-2) map from level-of-detail → its label key, so adding an LOD
 // without a label fails the typecheck rather than leaking a raw key.
 const LOD_LABEL_KEYS = {
@@ -99,11 +104,13 @@ const decisionItems = computed(() =>
     class="absolute left-1/2 top-3 z-20 flex max-w-[calc(100vw-1rem)] -translate-x-1/2 items-center gap-1 overflow-x-auto rounded-full border border-slate-700 bg-slate-900/90 px-2 py-1.5 shadow-xl backdrop-blur"
   >
     <!-- zoom controls -->
-    <UButton
+    <IconButton
+      :label="t('board.toolbar.zoomOut')"
       icon="i-lucide-zoom-out"
       color="neutral"
       variant="ghost"
       size="sm"
+      :disabled="atMinZoom"
       data-testid="board-zoom-out"
       @click="
         () => {
@@ -111,16 +118,28 @@ const decisionItems = computed(() =>
         }
       "
     />
-    <!-- The zoom %/LOD readout is the first thing to drop on narrow viewports. -->
-    <div class="hidden w-20 text-center text-xs tabular-nums text-slate-300 sm:block">
+    <!-- Click the readout to snap back to 100%. Always visible (only the LOD sub-label
+         drops on narrow viewports) so the zoom level is never a mystery. -->
+    <button
+      type="button"
+      class="w-16 rounded text-center text-xs tabular-nums text-slate-300 hover:bg-slate-800 focus-visible:ring-2 focus-visible:ring-slate-400/60 sm:w-20"
+      :title="t('board.toolbar.resetZoom')"
+      :aria-label="t('board.toolbar.resetZoom')"
+      data-testid="board-zoom-reset"
+      @click="resetZoom()"
+    >
       {{ zoomPct }}%
-      <div class="text-[9px] uppercase tracking-wide text-slate-500">{{ lodLabel }}</div>
-    </div>
-    <UButton
+      <span class="hidden text-[9px] uppercase tracking-wide text-slate-500 sm:block">{{
+        lodLabel
+      }}</span>
+    </button>
+    <IconButton
+      :label="t('board.toolbar.zoomIn')"
       icon="i-lucide-zoom-in"
       color="neutral"
       variant="ghost"
       size="sm"
+      :disabled="atMaxZoom"
       data-testid="board-zoom-in"
       @click="
         () => {
@@ -128,7 +147,8 @@ const decisionItems = computed(() =>
         }
       "
     />
-    <UButton
+    <IconButton
+      :label="t('board.toolbar.fitView')"
       icon="i-lucide-maximize"
       color="neutral"
       variant="ghost"

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/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/composables/useBoardFlow.ts

@@ -4,8 +4,15 @@ import { useVueFlow } from '@vue-flow/core'
  * useVueFlow() from anywhere (e.g. the toolbar) accesses the same instance. */
 export const BOARD_FLOW_ID = 'board'
 
+/** Camera zoom clamps — the single source of truth shared by the canvas (which passes
+ * them to <VueFlow>) and the toolbar (which disables its zoom buttons at the limits). */
+export const BOARD_MIN_ZOOM = 0.2
+export const BOARD_MAX_ZOOM = 3
+
 /** Camera controls for the main board, usable outside the canvas component. */
 export function useBoardFlow() {
-  const { fitView, zoomIn, zoomOut, viewport } = useVueFlow(BOARD_FLOW_ID)
-  return { fitView, zoomIn, zoomOut, viewport }
+  const { fitView, zoomIn, zoomOut, zoomTo, viewport } = useVueFlow(BOARD_FLOW_ID)
+  /** Snap the camera back to 100% zoom (keeps the current centre). */
+  const resetZoom = () => zoomTo(1, { duration: 250 })
+  return { fitView, zoomIn, zoomOut, zoomTo, resetZoom, viewport }
 }

package/app/utils/dnd.ts

@@ -22,8 +22,9 @@ export function readDndPayload(event: DragEvent): DndPayload | null {
   }
 }
 
-/** Walk up from the drop target to find the block it landed on, if any. */
-export function blockIdFromEvent(event: DragEvent): string | null {
+/** Walk up from an event's target to find the block it landed on, if any. Works for any
+ * DOM event (drop, double-click, …) — only `event.target` is read. */
+export function blockIdFromEvent(event: Event): string | null {
   const el = (event.target as HTMLElement | null)?.closest('[data-block-id]')
   return el?.getAttribute('data-block-id') ?? null
 }

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": {
@@ -124,7 +126,11 @@
       "spendTitle": "Token spend this month",
       "spendLimitReached": "Spend limit reached — runs paused",
       "serviceAdded": "Added {title}",
-      "serviceAddFailed": "Could not add service"
+      "serviceAddFailed": "Could not add service",
+      "zoomOut": "Zoom out",
+      "zoomIn": "Zoom in",
+      "fitView": "Fit board to content",
+      "resetZoom": "Reset zoom to 100%"
     },
     "canvas": {
       "emptyTitle": "Your board is empty",

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",
@@ -106,7 +108,11 @@
       "spendTitle": "Gasto de tokens este mes",
       "spendLimitReached": "Límite de gasto alcanzado: ejecuciones en pausa",
       "serviceAdded": "Se añadió {title}",
-      "serviceAddFailed": "No se pudo añadir el servicio"
+      "serviceAddFailed": "No se pudo añadir el servicio",
+      "zoomOut": "Alejar",
+      "zoomIn": "Acercar",
+      "fitView": "Ajustar al contenido",
+      "resetZoom": "Restablecer zoom al 100%"
     },
     "canvas": {
       "emptyTitle": "Tu tablero está vacío",

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",
@@ -106,7 +108,11 @@
       "spendTitle": "Dépense de tokens ce mois-ci",
       "spendLimitReached": "Limite de dépense atteinte : exécutions en pause",
       "serviceAdded": "{title} ajouté",
-      "serviceAddFailed": "Impossible d’ajouter le service"
+      "serviceAddFailed": "Impossible d’ajouter le service",
+      "zoomOut": "Dézoomer",
+      "zoomIn": "Zoomer",
+      "fitView": "Ajuster au contenu",
+      "resetZoom": "Réinitialiser le zoom à 100 %"
     },
     "canvas": {
       "emptyTitle": "Votre tableau est vide",

package/i18n/locales/he.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "אפשר להגדיר זאת שוב מאוחר יותר."
     },
     "copied": "הועתק ללוח",
+    "reveal": "הצג",
+    "hide": "הסתר",
     "disconnect": "נתק",
     "copyFailed": "לא ניתן להעתיק ללוח",
     "revoke": "לבטל",
@@ -106,7 +108,11 @@
       "spendTitle": "צריכת טוקנים החודש",
       "spendLimitReached": "הוגעה למגבלת הצריכה — הריצות הושהו",
       "serviceAdded": "{title} נוסף",
-      "serviceAddFailed": "לא ניתן היה להוסיף את השירות"
+      "serviceAddFailed": "לא ניתן היה להוסיף את השירות",
+      "zoomOut": "הקטנה",
+      "zoomIn": "הגדלה",
+      "fitView": "התאמה לתוכן",
+      "resetZoom": "איפוס התקריב ל-100%"
     },
     "canvas": {
       "emptyTitle": "הלוח שלך ריק",

package/i18n/locales/ja.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "後で再設定できます。"
     },
     "copied": "クリップボードにコピーしました",
+    "reveal": "表示",
+    "hide": "非表示",
     "disconnect": "切断",
     "copyFailed": "クリップボードにコピーできませんでした",
     "revoke": "取り消す",
@@ -106,7 +108,11 @@
       "spendTitle": "今月のトークン消費量",
       "spendLimitReached": "消費上限に達しました。実行を一時停止しています",
       "serviceAdded": "{title} を追加しました",
-      "serviceAddFailed": "サービスを追加できませんでした"
+      "serviceAddFailed": "サービスを追加できませんでした",
+      "zoomOut": "縮小",
+      "zoomIn": "拡大",
+      "fitView": "内容に合わせる",
+      "resetZoom": "ズームを100%にリセット"
     },
     "canvas": {
       "emptyTitle": "ボードが空です",

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",
@@ -106,7 +108,11 @@
       "spendTitle": "Wydatki na tokeny w tym miesiącu",
       "spendLimitReached": "Osiągnięto limit wydatków: uruchomienia wstrzymane",
       "serviceAdded": "Dodano {title}",
-      "serviceAddFailed": "Nie udało się dodać usługi"
+      "serviceAddFailed": "Nie udało się dodać usługi",
+      "zoomOut": "Pomniejsz",
+      "zoomIn": "Powiększ",
+      "fitView": "Dopasuj do zawartości",
+      "resetZoom": "Zresetuj powiększenie do 100%"
     },
     "canvas": {
       "emptyTitle": "Twoja tablica jest pusta",

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",
@@ -106,7 +108,11 @@
       "spendTitle": "Bu ayki token harcaması",
       "spendLimitReached": "Harcama limitine ulaşıldı, çalıştırmalar duraklatıldı",
       "serviceAdded": "{title} eklendi",
-      "serviceAddFailed": "Servis eklenemedi"
+      "serviceAddFailed": "Servis eklenemedi",
+      "zoomOut": "Uzaklaştır",
+      "zoomIn": "Yakınlaştır",
+      "fitView": "İçeriğe sığdır",
+      "resetZoom": "Yakınlaştırmayı %100'e sıfırla"
     },
     "canvas": {
       "emptyTitle": "Panonuz boş",

package/i18n/locales/uk.json

@@ -40,6 +40,8 @@
       "reconfigureHint": "Ви зможете налаштувати це знову пізніше."
     },
     "copied": "Скопійовано в буфер обміну",
+    "reveal": "Показати",
+    "hide": "Приховати",
     "disconnect": "Від'єднати",
     "copyFailed": "Не вдалося скопіювати до буфера обміну",
     "revoke": "Відкликати",
@@ -106,7 +108,11 @@
       "spendTitle": "Витрати на токени цього місяця",
       "spendLimitReached": "Досягнуто ліміт витрат: запуски призупинено",
       "serviceAdded": "Додано {title}",
-      "serviceAddFailed": "Не вдалося додати сервіс"
+      "serviceAddFailed": "Не вдалося додати сервіс",
+      "zoomOut": "Зменшити",
+      "zoomIn": "Збільшити",
+      "fitView": "Вписати в область",
+      "resetZoom": "Скинути масштаб до 100%"
     },
     "canvas": {
       "emptyTitle": "Ваша дошка порожня",

package/package.json

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