@cat-factory/app 0.87.0 → 0.87.2

package/app/components/board/FailureDetail.vue

@@ -5,6 +5,8 @@
 // message. Tone (summary/pre classes) is passed by the host so it blends into each surface
 // (rose banner vs slate history) while the guard + the `showDetail` key + the whitespace-
 // preserving `<pre>` structure live in one place.
+import CopyButton from '~/components/common/CopyButton.vue'
+
 defineProps<{
   detail: string | null
   message: string
@@ -20,8 +22,15 @@ const { t } = useI18n()
     <summary class="cursor-pointer" :class="summaryClass">
       {{ t('board.failure.showDetail') }}
     </summary>
-    <pre class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded p-1.5" :class="preClass">{{
-      detail
-    }}</pre>
+    <!-- The stack trace / extended detail: the first thing a user does with it is copy it, so
+         offer a copy affordance floated over the scroll box (UX-39). -->
+    <div class="relative mt-1">
+      <CopyButton :text="detail" class="absolute end-1 top-1 z-10" />
+      <pre
+        class="max-h-32 overflow-auto whitespace-pre-wrap rounded p-1.5 pe-9"
+        :class="preClass"
+        >{{ detail }}</pre
+      >
+    </div>
   </details>
 </template>

package/app/components/common/CopyButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// Standard icon-only "copy to clipboard" button with confirmation feedback. Routes through
+// `useCopyToClipboard` so success/failure is always toasted (UX-38), and carries both a
+// `title` and an `aria-label` so it's named for pointer tooltips and screen readers alike.
+// Used to make error/detail surfaces copyable (UX-39) — the first thing a user does with a
+// stack trace or failure summary is copy it.
+const props = defineProps<{
+  /** The text to place on the clipboard. */
+  text: string
+  /** Accessible name + tooltip; defaults to the generic "Copy". */
+  label?: string
+  size?: 'xs' | 'sm' | 'md'
+}>()
+
+const { t } = useI18n()
+const { copy } = useCopyToClipboard()
+const label = computed(() => props.label ?? t('common.copy'))
+</script>
+
+<template>
+  <UButton
+    icon="i-lucide-copy"
+    color="neutral"
+    variant="ghost"
+    :size="size ?? 'xs'"
+    :title="label"
+    :aria-label="label"
+    @click.stop="copy(text)"
+  />
+</template>

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -8,6 +8,7 @@
 // as `consensus` stream events arrive.
 import { computed } from 'vue'
 import type { ConsensusContribution, ConsensusSession } from '~/types/consensus'
+import CopyButton from '~/components/common/CopyButton.vue'
 
 const { t, n } = useI18n()
 
@@ -149,9 +150,12 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
             <!-- failure -->
             <div
               v-if="session.status === 'failed'"
-              class="mb-5 rounded-lg border border-rose-800/60 bg-rose-950/40 px-4 py-3 text-sm text-rose-200"
+              class="mb-5 flex items-start gap-2 rounded-lg border border-rose-800/60 bg-rose-950/40 px-4 py-3 text-sm text-rose-200"
             >
-              {{ t('consensus.failed', { error: session.error ?? t('consensus.unknownError') }) }}
+              <span class="min-w-0 flex-1">{{
+                t('consensus.failed', { error: session.error ?? t('consensus.unknownError') })
+              }}</span>
+              <CopyButton v-if="session.error" :text="session.error" class="-me-1 shrink-0" />
             </div>
 
             <!-- synthesized result -->

package/app/components/gates/GateResultView.vue

@@ -12,6 +12,7 @@ import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
 import GateFailingCheckList from '~/components/gates/GateFailingCheckList.vue'
+import CopyButton from '~/components/common/CopyButton.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -252,12 +253,15 @@ const conflictVerdict = computed(() => {
                     <template v-else> {{ t('gates.humanReview.suffixAwaiting') }}</template>
                   </span>
                 </div>
-                <p
+                <div
                   v-if="gate.lastFailureSummary"
-                  class="mt-2 whitespace-pre-wrap rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] leading-relaxed text-slate-300"
+                  class="relative mt-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
                 >
-                  {{ gate.lastFailureSummary }}
-                </p>
+                  <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
+                  <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-slate-300">
+                    {{ gate.lastFailureSummary }}
+                  </p>
+                </div>
                 <a
                   v-if="prUrl"
                   :href="prUrl"
@@ -330,12 +334,15 @@ const conflictVerdict = computed(() => {
                 <!-- GitHub's API reports mergeability as a single bit (no file list), but the
                      conflict resolver discovers the conflicting files in the container and
                      reports them back — surface that account here. -->
-                <p
+                <div
                   v-if="gate.lastFailureSummary"
-                  class="mt-2 whitespace-pre-wrap rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2 text-[12px] leading-relaxed text-slate-300"
+                  class="relative mt-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
                 >
-                  {{ gate.lastFailureSummary }}
-                </p>
+                  <CopyButton :text="gate.lastFailureSummary" class="absolute end-1 top-1" />
+                  <p class="whitespace-pre-wrap pe-8 text-[12px] leading-relaxed text-slate-300">
+                    {{ gate.lastFailureSummary }}
+                  </p>
+                </div>
                 <a
                   v-if="prUrl"
                   :href="prUrl"

package/app/components/panels/AgentStepDetail.vue

@@ -195,8 +195,9 @@ onKeyStroke('Escape', () => {
   if (open.value) close()
 })
 
+const { copy } = useCopyToClipboard()
 async function copyOutput() {
-  if (step.value?.output) await navigator.clipboard?.writeText(step.value.output)
+  if (step.value?.output) await copy(step.value.output)
 }
 </script>
 

package/app/components/panels/StepContainerStatus.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import type { PipelineStep, RunContainerStatus } from '~/types/execution'
 import { containerPhaseLabel } from '~/utils/pipelineRender'
 
@@ -65,19 +64,7 @@ const phaseLabel = computed(() => containerPhaseLabel(props.step.container?.phas
 
 // Make the container id / URL one-click copyable (they're long and used to be
 // select-and-copy-by-hand), with a toast confirming the copy landed.
-const toast = useToast()
-const { copy, isSupported } = useClipboard()
-async function copyText(text: string) {
-  // Only claim success once the write actually landed — a failed/unsupported clipboard
-  // (insecure context, denied permission) must not show a misleading "Copied" toast.
-  try {
-    if (!isSupported.value) throw new Error('clipboard unsupported')
-    await copy(text)
-    toast.add({ title: t('common.copied'), color: 'success', icon: 'i-lucide-check' })
-  } catch {
-    toast.add({ title: t('common.copyFailed'), color: 'error', icon: 'i-lucide-x' })
-  }
-}
+const { copy: copyText } = useCopyToClipboard()
 </script>
 
 <template>

package/app/components/panels/StepMetadataCard.vue

@@ -70,9 +70,10 @@ function formatClock(ms?: number | null): string | null {
   return ms ? d(new Date(ms), 'long') : null
 }
 
+const { copy } = useCopyToClipboard()
 async function copyRunId() {
   const id = props.step.runId ?? props.instanceId
-  if (id) await navigator.clipboard?.writeText(id)
+  if (id) await copy(id)
 }
 </script>
 

package/app/components/panels/StepRunMeta.vue

@@ -40,8 +40,9 @@ function formatClock(ms?: number | null): string | null {
   return ms ? d(new Date(ms), 'long') : null
 }
 
+const { copy } = useCopyToClipboard()
 async function copyRunId() {
-  if (runId.value) await navigator.clipboard?.writeText(runId.value)
+  if (runId.value) await copy(runId.value)
 }
 </script>
 

package/app/components/settings/KubernetesEngineForm.vue

@@ -269,8 +269,9 @@ function optional(label: string): string {
 // example (not prose), so it stays inline rather than in the i18n catalog — mirroring the format
 // examples the i18n rules keep out of message bodies.
 const AUTO_SETUP_COMMAND = 'cat-factory k3s'
+const { copy } = useCopyToClipboard()
 async function copyAutoSetupCommand() {
-  await navigator.clipboard?.writeText(AUTO_SETUP_COMMAND)
+  await copy(AUTO_SETUP_COMMAND)
 }
 </script>
 

package/app/composables/useCopyToClipboard.ts

@@ -0,0 +1,29 @@
+// Shared clipboard-with-feedback primitive. Wraps VueUse's `useClipboard` with a toast that
+// confirms the copy actually landed (or reports failure) — the pattern first written inline in
+// `StepContainerStatus.vue`, extracted here so every copy affordance behaves the same.
+//
+// UX-38: several copy handlers called `navigator.clipboard?.writeText(...)` directly with no
+// feedback and no catch, so in an insecure context or when permission was denied the copy was a
+// silent no-op the user couldn't tell apart from success. Routing every copy through this seam
+// makes the outcome always visible.
+import { useClipboard } from '@vueuse/core'
+
+export function useCopyToClipboard() {
+  const { t } = useI18n()
+  const toast = useToast()
+  const { copy: writeClipboard, isSupported } = useClipboard()
+
+  async function copy(text: string) {
+    // Only claim success once the write actually landed — a failed/unsupported clipboard
+    // (insecure context, denied permission) must not show a misleading "Copied" toast.
+    try {
+      if (!isSupported.value) throw new Error('clipboard unsupported')
+      await writeClipboard(text)
+      toast.add({ title: t('common.copied'), color: 'success', icon: 'i-lucide-check' })
+    } catch {
+      toast.add({ title: t('common.copyFailed'), color: 'error', icon: 'i-lucide-x' })
+    }
+  }
+
+  return { copy, isSupported }
+}

package/i18n/locales/en.json

@@ -1664,9 +1664,9 @@
         "environment-provider": "Custom HTTP provider",
         "environment-providerDesc": "Provision ephemeral environments through your own HTTP management API. Best when you already have bespoke preview-env tooling.",
         "compose": "Docker Compose preview env",
-        "composeDesc": "Stand the repo's own docker-compose.yml up on a local Docker daemon as the Tester's URL. Best for local Compose-based apps. Image-based stacks only; needs a Docker daemon, so local deployments only."
+        "composeDesc": "Stand the repo's own docker-compose.yml up on a local Docker daemon as the Tester's URL. Best for local Compose-based apps. Supports pre-built images or building from source; needs a Docker daemon, so local deployments only."
       },
-      "dockerComposeInfo": "Docker Compose services stand up on the runtime's local Docker: no connection needed (the run's container must support Docker-in-Docker).",
+      "dockerComposeInfo": "Docker Compose services stand up on the runtime's local Docker: no connection needed (the run's container must support Docker-in-Docker). Configure the service, port, and image source (pull pre-built or build from source) on the service's environment settings.",
       "engine": {
         "local-k3s": "Local k3s",
         "remote-kubernetes": "Remote Kubernetes"

package/i18n/locales/es.json

@@ -2108,9 +2108,10 @@
       "testEnvBackend": {
         "label": "Dónde se ejecutan los entornos de prueba",
         "local-compose": "docker-compose en contenedor",
-        "environment-provider": "Proveedor de entornos"
+        "environment-provider": "Proveedor de entornos",
+        "composeDesc": "Levanta el docker-compose.yml del propio repositorio en un daemon de Docker local como URL del Tester. Ideal para apps locales basadas en Compose. Admite imágenes prediseñadas o compilación desde el código fuente; requiere un daemon de Docker, por lo que solo en despliegues locales."
       },
-      "dockerComposeInfo": "Los servicios de Docker Compose se levantan en el Docker local del runtime: no hace falta conexión (el contenedor de la ejecución debe admitir Docker-in-Docker).",
+      "dockerComposeInfo": "Los servicios de Docker Compose se levantan en el Docker local del runtime: no se necesita conexión (el contenedor de la ejecución debe admitir Docker-in-Docker). Configura el servicio, el puerto y el origen de la imagen (usar prediseñada o compilar desde el código fuente) en los ajustes de entorno del servicio.",
       "engine": {
         "local-k3s": "k3s local",
         "remote-kubernetes": "Kubernetes remoto"

package/i18n/locales/fr.json

@@ -2108,9 +2108,10 @@
       "testEnvBackend": {
         "label": "Où s'exécutent les environnements de test",
         "local-compose": "docker-compose dans le conteneur",
-        "environment-provider": "Fournisseur d'environnements"
+        "environment-provider": "Fournisseur d'environnements",
+        "composeDesc": "Démarre le docker-compose.yml du dépôt sur un démon Docker local comme URL du Testeur. Idéal pour les applications locales basées sur Compose. Prend en charge les images préconstruites ou la construction depuis les sources ; nécessite un démon Docker, donc uniquement pour les déploiements locaux."
       },
-      "dockerComposeInfo": "Les services Docker Compose démarrent sur le Docker local du runtime: aucune connexion requise (le conteneur de l'exécution doit prendre en charge Docker-in-Docker).",
+      "dockerComposeInfo": "Les services Docker Compose démarrent sur le Docker local du runtime : aucune connexion requise (le conteneur d’exécution doit prendre en charge Docker-in-Docker). Configurez le service, le port et la source de l’image (image préconstruite ou construction depuis les sources) dans les paramètres d’environnement du service.",
       "engine": {
         "local-k3s": "k3s local",
         "remote-kubernetes": "Kubernetes distant"

package/i18n/locales/he.json

@@ -1616,9 +1616,10 @@
         "kubernetes": "אשכול Kubernetes",
         "kubernetesDesc": "הקצה מרחב שמות לכל PR באשכול Kubernetes שאתה מפעיל.",
         "environment-provider": "ספק HTTP מותאם",
-        "environment-providerDesc": "הקצה סביבות ארעיות דרך ממשק ניהול HTTP משלך."
+        "environment-providerDesc": "הקצה סביבות ארעיות דרך ממשק ניהול HTTP משלך.",
+        "composeDesc": "מריץ את קובץ docker-compose.yml של המאגר עצמו על דימון Docker מקומי ככתובת ה-URL של הבוחן. מתאים בעיקר לאפליקציות מקומיות מבוססות Compose. תומך בתמונות בנויות מראש או בבנייה מקוד המקור; דורש דימון Docker, ולכן פריסות מקומיות בלבד."
       },
-      "dockerComposeInfo": "שירותי Docker Compose עולים על ה-Docker המקומי של זמן הריצה: אין צורך בחיבור (הקונטיינר של הריצה חייב לתמוך ב-Docker-in-Docker).",
+      "dockerComposeInfo": "שירותי Docker Compose עולים על ה-Docker המקומי של סביבת הריצה: אין צורך בחיבור (מכולת ההרצה חייבת לתמוך ב-Docker-in-Docker). הגדר את השירות, הפורט ומקור התמונה (משיכת תמונה בנויה מראש או בנייה מקוד המקור) בהגדרות הסביבה של השירות.",
       "engine": {
         "local-k3s": "k3s מקומי",
         "remote-kubernetes": "Kubernetes מרוחק"

package/i18n/locales/ja.json

@@ -1618,9 +1618,9 @@
         "environment-provider": "カスタム HTTP プロバイダー",
         "environment-providerDesc": "自前の HTTP 管理 API を通じて一時的な環境をプロビジョニングします。",
         "compose": "Docker Compose プレビュー環境",
-        "composeDesc": "リポジトリ自身の docker-compose.yml をローカルの Docker デーモンで起動し、テスターの URL として使用します。ローカルの Compose ベースのアプリに最適です。イメージベースのスタックのみ対応。Docker デーモンが必要なため、ローカルデプロイメント専用です。"
+        "composeDesc": "リポジトリ自身の docker-compose.yml をローカルの Docker デーモンで起動し、テスターの URL として使用します。ローカルの Compose ベースのアプリに最適です。ビルド済みイメージまたはソースからのビルドに対応。Docker デーモンが必要なため、ローカルデプロイのみ。"
       },
-      "dockerComposeInfo": "Docker Compose サービスはランタイムのローカル Docker 上で起動します。接続は不要です（実行のコンテナが Docker-in-Docker をサポートする必要があります）。",
+      "dockerComposeInfo": "Docker Compose サービスはランタイムのローカル Docker 上で起動します。接続は不要です（実行コンテナが Docker-in-Docker をサポートしている必要があります）。サービス、ポート、イメージソース（ビルド済みを取得するかソースからビルドするか）はサービスの環境設定で構成してください。",
       "engine": {
         "local-k3s": "ローカル k3s",
         "remote-kubernetes": "リモート Kubernetes"

package/i18n/locales/pl.json

@@ -2108,9 +2108,10 @@
       "testEnvBackend": {
         "label": "Gdzie działają środowiska testowe",
         "local-compose": "docker-compose w kontenerze",
-        "environment-provider": "Dostawca środowisk"
+        "environment-provider": "Dostawca środowisk",
+        "composeDesc": "Uruchamia własny plik docker-compose.yml repozytorium na lokalnym demonie Dockera jako adres URL Testera. Najlepsze dla lokalnych aplikacji opartych na Compose. Obsługuje gotowe obrazy lub budowanie ze źródeł; wymaga demona Dockera, więc tylko wdrożenia lokalne."
       },
-      "dockerComposeInfo": "Usługi Docker Compose są uruchamiane na lokalnym Dockerze środowiska uruchomieniowego: połączenie nie jest potrzebne (kontener uruchomienia musi obsługiwać Docker-in-Docker).",
+      "dockerComposeInfo": "Usługi Docker Compose uruchamiają się na lokalnym Dockerze środowiska uruchomieniowego: połączenie nie jest potrzebne (kontener uruchomienia musi obsługiwać Docker-in-Docker). Skonfiguruj usługę, port i źródło obrazu (pobranie gotowego lub budowanie ze źródeł) w ustawieniach środowiska usługi.",
       "engine": {
         "local-k3s": "Lokalny k3s",
         "remote-kubernetes": "Zdalny Kubernetes"

package/i18n/locales/tr.json

@@ -1618,9 +1618,9 @@
         "environment-provider": "Özel HTTP sağlayıcısı",
         "environment-providerDesc": "Geçici ortamları kendi HTTP yönetim API'niz aracılığıyla sağlayın.",
         "compose": "Docker Compose önizleme ortamı",
-        "composeDesc": "Deponun kendi docker-compose.yml dosyasını yerel bir Docker daemon üzerinde Tester'ın URL'si olarak ayağa kaldırır. Yerel Compose tabanlı uygulamalar için idealdir. Yalnızca imaj tabanlı stack'ler; bir Docker daemon gerektirir, bu nedenle yalnızca yerel dağıtımlar içindir."
+        "composeDesc": "Deponun kendi docker-compose.yml dosyasını yerel bir Docker arka plan hizmetinde Test Edici URL’si olarak ayağa kaldırır. Yerel Compose tabanlı uygulamalar için idealdir. Önceden oluşturulmuş imgeleri veya kaynaktan derlemeyi destekler; bir Docker arka plan hizmeti gerektirir, bu nedenle yalnızca yerel dağıtımlarda çalışır."
       },
-      "dockerComposeInfo": "Docker Compose servisleri çalışma zamanının yerel Docker'ında ayağa kalkar: bağlantı gerekmez (çalıştırmanın kapsayıcısı Docker-in-Docker'ı desteklemelidir).",
+      "dockerComposeInfo": "Docker Compose hizmetleri çalışma zamanının yerel Docker’ında ayağa kalkar: bağlantı gerekmez (çalıştırmanın kapsayıcısı Docker-in-Docker’ı desteklemelidir). Hizmeti, bağlantı noktasını ve imge kaynağını (önceden oluşturulmuş imge çekme veya kaynaktan derleme) hizmetin ortam ayarlarında yapılandırın.",
       "engine": {
         "local-k3s": "Yerel k3s",
         "remote-kubernetes": "Uzak Kubernetes"

package/i18n/locales/uk.json

@@ -2108,9 +2108,10 @@
       "testEnvBackend": {
         "label": "Де виконуються тестові середовища",
         "local-compose": "docker-compose у контейнері",
-        "environment-provider": "Провайдер середовищ"
+        "environment-provider": "Провайдер середовищ",
+        "composeDesc": "Піднімає власний docker-compose.yml репозиторію на локальному демоні Docker як URL Тестувальника. Найкраще підходить для локальних застосунків на основі Compose. Підтримує готові образи або збирання з вихідного коду; потребує демона Docker, тому лише для локальних розгортань."
       },
-      "dockerComposeInfo": "Служби Docker Compose піднімаються на локальному Docker середовища виконання: з'єднання не потрібне (контейнер запуску має підтримувати Docker-in-Docker).",
+      "dockerComposeInfo": "Служби Docker Compose піднімаються на локальному Docker середовища виконання: підключення не потрібне (контейнер запуску має підтримувати Docker-in-Docker). Налаштуйте службу, порт і джерело образу (завантаження готового чи збирання з вихідного коду) у налаштуваннях середовища служби.",
       "engine": {
         "local-k3s": "Локальний k3s",
         "remote-kubernetes": "Віддалений Kubernetes"

package/package.json

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