@cat-factory/app 0.87.1 → 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/package.json

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