@cat-factory/app 0.74.3 → 0.75.2

package/app/components/board/AgentFailureCard.vue

@@ -5,6 +5,7 @@
 // inspector, task panel) gets identical behaviour from one place. Replaces the
 // three hand-rolled bootstrap banners that used to duplicate this logic.
 import type { AgentRunSummary } from '~/stores/agentRuns'
+import FailureDetail from '~/components/board/FailureDetail.vue'
 
 const props = withDefaults(
   defineProps<{ run: AgentRunSummary; variant?: 'compact' | 'expanded' }>(),
@@ -82,15 +83,13 @@ async function retry() {
       {{ failure.hint }}
     </p>
 
-    <details v-if="!compact && failure?.detail && failure.detail !== failure.message" class="mt-1">
-      <summary class="cursor-pointer text-[10px] text-rose-400/60 hover:text-rose-300">
-        {{ t('board.failure.showDetail') }}
-      </summary>
-      <pre
-        class="mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded bg-rose-950/60 p-1.5 text-[10px] text-rose-200/80"
-        >{{ failure.detail }}</pre
-      >
-    </details>
+    <FailureDetail
+      v-if="!compact && failure"
+      :detail="failure.detail"
+      :message="failure.message"
+      summary-class="text-[10px] text-rose-400/60 hover:text-rose-300"
+      pre-class="bg-rose-950/60 text-[10px] text-rose-200/80"
+    />
 
     <button
       type="button"

package/app/components/board/AgentFailureHistory.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// The error trail of a run's PRIOR attempts, preserved across retries/restarts. This is
+// deliberately SEPARATE from the top failure banner (`AgentFailureCard`, keyed on the
+// current `status === 'failed'`): when a failed task is retried it restarts and the top
+// banner disappears, but this collapsed history stays available so every previous error
+// remains viewable. Renders nothing when there is no trail.
+import type { AgentFailure } from '~/types/domain'
+import FailureDetail from '~/components/board/FailureDetail.vue'
+
+const props = defineProps<{ failures: AgentFailure[] }>()
+
+const { t, d } = useI18n()
+
+// Newest attempt first — the most recent failure is the most relevant to look at.
+const ordered = computed(() => [...props.failures].reverse())
+</script>
+
+<template>
+  <details
+    v-if="failures.length"
+    class="nodrag rounded-lg border border-slate-700/60 bg-slate-900/40 px-3 py-2"
+    data-testid="agent-failure-history"
+  >
+    <summary
+      class="flex cursor-pointer items-center gap-1.5 text-[11px] text-slate-400 hover:text-slate-200"
+    >
+      <UIcon name="i-lucide-history" class="h-3.5 w-3.5 shrink-0" />
+      {{ t('board.failure.history.previousErrors', { count: failures.length }, failures.length) }}
+    </summary>
+
+    <ol class="mt-2 space-y-2">
+      <li
+        v-for="failure in ordered"
+        :key="failure.occurredAt"
+        class="rounded-md border border-slate-800/80 bg-slate-950/50 px-2.5 py-2"
+        data-testid="agent-failure-history-entry"
+      >
+        <div class="flex items-center gap-1.5 text-[10px] text-slate-500">
+          <UIcon name="i-lucide-alert-triangle" class="h-3 w-3 shrink-0 text-rose-400/70" />
+          <time>{{ d(new Date(failure.occurredAt), 'long') }}</time>
+        </div>
+
+        <p class="mt-1 text-[11px] leading-snug text-slate-300" :title="failure.message">
+          {{ failure.message }}
+        </p>
+
+        <p v-if="failure.hint" class="mt-1 text-[10px] leading-snug text-slate-500">
+          {{ failure.hint }}
+        </p>
+
+        <FailureDetail
+          :detail="failure.detail"
+          :message="failure.message"
+          summary-class="text-[10px] text-slate-500 hover:text-slate-300"
+          pre-class="bg-slate-950/80 text-[10px] text-slate-400"
+        />
+      </li>
+    </ol>
+  </details>
+</template>

package/app/components/board/FailureDetail.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// Shared collapsible "Show detail" disclosure for a failure's extended `detail`, used by
+// both the failure banner (`AgentFailureCard`) and the prior-errors history
+// (`AgentFailureHistory`). Renders nothing when there is no detail or it merely repeats the
+// 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.
+defineProps<{
+  detail: string | null
+  message: string
+  summaryClass: string
+  preClass: string
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <details v-if="detail && detail !== message" class="mt-1">
+    <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>
+  </details>
+</template>