@cat-factory/app 0.78.0 → 0.79.0

package/app/components/gates/GateFailingCheckList.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// Shared renderer for a gate's failing-check list (`gateFailingCheckSchema[]`): each check
+// links to its GitHub run when a URL is known, with its conclusion. Used by BOTH the CI
+// gate's precheck panel and each per-attempt "handed to the fixer" list in GateResultView,
+// so the link + conclusion-fallback logic lives in one place (they had drifted — the
+// per-attempt copy silently dropped the GitHub link).
+import type { GateFailingCheck } from '~/types/execution'
+
+defineProps<{
+  checks: GateFailingCheck[]
+  // Compact layout for the per-attempt timeline; the fuller card layout is the default
+  // (the precheck panel).
+  dense?: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <ul :class="dense ? 'space-y-0.5' : 'space-y-1'">
+    <li
+      v-for="(c, i) in checks"
+      :key="`${c.name}-${i}`"
+      class="flex items-center"
+      :class="
+        dense ? 'gap-1.5' : 'gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5'
+      "
+    >
+      <UIcon
+        name="i-lucide-circle-x"
+        class="shrink-0 text-rose-400"
+        :class="dense ? 'h-3 w-3' : 'h-3.5 w-3.5'"
+      />
+      <a
+        v-if="c.url"
+        :href="c.url"
+        target="_blank"
+        rel="noopener"
+        class="group min-w-0 flex-1 truncate text-sky-300 hover:text-sky-200 hover:underline"
+        :class="dense ? 'text-[12px]' : 'text-[13px]'"
+        :title="t('gates.ci.openOnGithub', { name: c.name })"
+      >
+        {{ c.name }}
+        <UIcon
+          name="i-lucide-external-link"
+          class="ms-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
+        />
+      </a>
+      <span
+        v-else
+        class="min-w-0 flex-1 truncate"
+        :class="dense ? 'text-[12px] text-slate-300' : 'text-[13px] text-slate-200'"
+        >{{ c.name }}</span
+      >
+      <span
+        class="shrink-0 uppercase text-rose-300"
+        :class="dense ? 'text-[10px]' : 'text-[11px]'"
+        >{{ c.conclusion ?? t('gates.ci.conclusionFallback') }}</span
+      >
+    </li>
+  </ul>
+</template>

package/app/components/gates/GateResultView.vue

@@ -10,10 +10,12 @@ import { agentKindMeta } from '~/utils/catalog'
 import type { GateAttempt, GateStepState } from '~/types/execution'
 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'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
-const { t, d } = useI18n()
+const { t } = useI18n()
 
 // Synchronous window: it reads its state straight off the execution step, so there's
 // nothing to fetch on open (no `onOpen` loader).
@@ -75,10 +77,6 @@ const OUTCOME_LABELS = computed<Record<GateAttempt['outcome'], string>>(() => ({
   failed: t('gates.outcome.failed'),
 }))
 
-function formatClock(ms?: number | null): string | null {
-  return ms ? d(new Date(ms), 'long') : null
-}
-
 /**
  * The display status — a roll-up of the persisted gate state + the run's status, so the
  * window reads as a conclusion rather than raw fields:
@@ -308,35 +306,7 @@ const conflictVerdict = computed(() => {
                 <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                   {{ t('gates.ci.failingChecks') }}
                 </h3>
-                <ul v-if="failingChecks.length" class="space-y-1">
-                  <li
-                    v-for="(c, i) in failingChecks"
-                    :key="`${c.name}-${i}`"
-                    class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950/40 px-3 py-1.5"
-                  >
-                    <UIcon name="i-lucide-circle-x" class="h-3.5 w-3.5 shrink-0 text-rose-400" />
-                    <a
-                      v-if="c.url"
-                      :href="c.url"
-                      target="_blank"
-                      rel="noopener"
-                      class="group min-w-0 flex-1 truncate text-[13px] text-sky-300 hover:text-sky-200 hover:underline"
-                      :title="t('gates.ci.openOnGithub', { name: c.name })"
-                    >
-                      {{ c.name }}
-                      <UIcon
-                        name="i-lucide-external-link"
-                        class="ms-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
-                      />
-                    </a>
-                    <span v-else class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
-                      c.name
-                    }}</span>
-                    <span class="shrink-0 text-[11px] uppercase text-rose-300">
-                      {{ c.conclusion ?? t('gates.ci.conclusionFallback') }}
-                    </span>
-                  </li>
-                </ul>
+                <GateFailingCheckList v-if="failingChecks.length" :checks="failingChecks" />
                 <p v-else class="text-[13px] leading-relaxed text-slate-300">
                   {{ gate.lastFailureSummary || t('gates.ci.failureFallback') }}
                 </p>
@@ -389,26 +359,47 @@ const conflictVerdict = computed(() => {
                     :key="a.attempt"
                     class="rounded-md border border-slate-800 bg-slate-950/40 px-3 py-2"
                   >
-                    <div class="flex items-center gap-2">
-                      <span class="text-[12px] font-semibold text-slate-200">{{
-                        t('gates.attempt', { number: a.attempt })
-                      }}</span>
-                      <UBadge
-                        :color="a.outcome === 'failed' ? 'error' : 'neutral'"
-                        variant="subtle"
-                        size="sm"
-                        >{{ OUTCOME_LABELS[a.outcome] }}</UBadge
+                    <AttemptEntryHeader
+                      :label="t('gates.attempt', { number: a.attempt })"
+                      :outcome="a.outcome"
+                      :outcome-label="OUTCOME_LABELS[a.outcome]"
+                      :at="a.at"
+                      date-format="long"
+                    />
+                    <!-- What this round was asked to fix: the instructions the gate handed the
+                         helper (the failing-check summary / conflict reason / review comments),
+                         plus the structured red checks for the CI gate. -->
+                    <div
+                      v-if="a.instructions || (a.failingChecks && a.failingChecks.length)"
+                      class="mt-1.5"
+                    >
+                      <p class="text-[11px] text-slate-500">
+                        {{ t('gates.attemptInstructions', { helper: helperMeta.label }) }}
+                      </p>
+                      <GateFailingCheckList
+                        v-if="a.failingChecks && a.failingChecks.length"
+                        class="mt-1"
+                        :checks="a.failingChecks"
+                        dense
+                      />
+                      <p
+                        v-else-if="a.instructions"
+                        class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-300"
                       >
-                      <span v-if="formatClock(a.at)" class="ms-auto text-[11px] text-slate-500">{{
-                        formatClock(a.at)
-                      }}</span>
+                        {{ a.instructions }}
+                      </p>
                     </div>
-                    <p
-                      v-if="a.summary"
-                      class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
-                    >
-                      {{ a.summary }}
-                    </p>
+                    <!-- The helper's own report of what it did / what remains. -->
+                    <template v-if="a.summary">
+                      <p class="mt-1.5 text-[11px] text-slate-500">
+                        {{ t('gates.attemptReport', { helper: helperMeta.label }) }}
+                      </p>
+                      <p
+                        class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-400"
+                      >
+                        {{ a.summary }}
+                      </p>
+                    </template>
                   </li>
                 </ol>
               </section>

package/app/components/panels/AttemptEntryHeader.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Shared header row for an attempt-timeline entry. The polling-gate helper attempts
+// (GateResultView) and the Tester's fixer rounds (TestReportWindow) render the same chrome —
+// a leading label, an outcome badge, and a timestamp — differing only in the optional icon,
+// the resolved label strings, and the date format. The per-attempt body stays the caller's.
+defineProps<{
+  label: string
+  outcome: 'completed' | 'failed'
+  outcomeLabel: string
+  at?: number | null
+  dateFormat?: 'short' | 'long'
+  icon?: string
+  iconClass?: string
+}>()
+
+const { d } = useI18n()
+
+function formatClock(ms: number | null | undefined, fmt: 'short' | 'long'): string | null {
+  return ms ? d(new Date(ms), fmt) : null
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UIcon v-if="icon" :name="icon" class="h-3.5 w-3.5 shrink-0" :class="iconClass" />
+    <span class="text-[13px] font-medium text-slate-200">{{ label }}</span>
+    <UBadge :color="outcome === 'failed' ? 'error' : 'neutral'" variant="subtle" size="sm">{{
+      outcomeLabel
+    }}</UBadge>
+    <span
+      v-if="formatClock(at, dateFormat ?? 'short')"
+      class="ms-auto text-[11px] text-slate-500"
+      >{{ formatClock(at, dateFormat ?? 'short') }}</span
+    >
+  </div>
+</template>

package/app/components/testing/TestReportWindow.vue

@@ -18,6 +18,7 @@ import ArtifactLightbox from '~/components/media/ArtifactLightbox.vue'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import StepContainerStatus from '~/components/panels/StepContainerStatus.vue'
+import AttemptEntryHeader from '~/components/panels/AttemptEntryHeader.vue'
 import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusPanel.vue'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 
@@ -507,30 +508,18 @@ const GROUP_STATUS_META: Record<ScenarioGroup['status'], { icon: string; text: s
                   data-testid="tester-fixer-attempt"
                   class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
                 >
-                  <div class="flex items-center gap-2">
-                    <UIcon
-                      :name="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
-                      class="h-3.5 w-3.5 shrink-0"
-                      :class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
-                    />
-                    <span class="text-[13px] font-medium text-slate-200">
-                      {{ t('testing.fixerTimeline.attempt', { n: a.attempt }) }}
-                    </span>
-                    <UBadge
-                      :color="a.outcome === 'completed' ? 'neutral' : 'error'"
-                      variant="subtle"
-                      size="sm"
-                    >
-                      {{
-                        a.outcome === 'completed'
-                          ? t('testing.fixerTimeline.completed')
-                          : t('testing.fixerTimeline.failed')
-                      }}
-                    </UBadge>
-                    <span class="ms-auto text-[11px] text-slate-500">{{
-                      d(new Date(a.at), 'short')
-                    }}</span>
-                  </div>
+                  <AttemptEntryHeader
+                    :label="t('testing.fixerTimeline.attempt', { n: a.attempt })"
+                    :outcome="a.outcome"
+                    :outcome-label="
+                      a.outcome === 'completed'
+                        ? t('testing.fixerTimeline.completed')
+                        : t('testing.fixerTimeline.failed')
+                    "
+                    :at="a.at"
+                    :icon="a.outcome === 'completed' ? 'i-lucide-wrench' : 'i-lucide-circle-x'"
+                    :icon-class="a.outcome === 'completed' ? 'text-amber-300' : 'text-rose-400'"
+                  />
                   <p v-if="a.summary" class="mt-1 text-[12px] leading-snug text-slate-400">
                     {{ a.summary }}
                   </p>

package/i18n/locales/en.json

@@ -2981,6 +2981,8 @@
     },
     "attemptsHeading": "{helper} attempts",
     "attempt": "Attempt {number}",
+    "attemptInstructions": "Handed to {helper}",
+    "attemptReport": "{helper} report",
     "outcome": {
       "completed": "completed",
       "failed": "failed"

package/i18n/locales/es.json

@@ -2885,6 +2885,8 @@
     },
     "attemptsHeading": "Intentos de {helper}",
     "attempt": "Intento {number}",
+    "attemptInstructions": "Entregado a {helper}",
+    "attemptReport": "Informe de {helper}",
     "outcome": {
       "completed": "completado",
       "failed": "fallido"

package/i18n/locales/fr.json

@@ -2885,6 +2885,8 @@
     },
     "attemptsHeading": "Tentatives du {helper}",
     "attempt": "Tentative {number}",
+    "attemptInstructions": "Transmis à {helper}",
+    "attemptReport": "Rapport de {helper}",
     "outcome": {
       "completed": "terminée",
       "failed": "échouée"

package/i18n/locales/he.json

@@ -2896,6 +2896,8 @@
     },
     "attemptsHeading": "ניסיונות {helper}",
     "attempt": "ניסיון {number}",
+    "attemptInstructions": "נמסר ל־{helper}",
+    "attemptReport": "דוח {helper}",
     "outcome": {
       "completed": "הושלם",
       "failed": "נכשל"

package/i18n/locales/ja.json

@@ -2898,6 +2898,8 @@
     },
     "attemptsHeading": "{helper} の試行",
     "attempt": "試行 {number}",
+    "attemptInstructions": "{helper} への指示",
+    "attemptReport": "{helper} のレポート",
     "outcome": {
       "completed": "完了",
       "failed": "失敗"

package/i18n/locales/pl.json

@@ -2885,6 +2885,8 @@
     },
     "attemptsHeading": "Próby: {helper}",
     "attempt": "Próba {number}",
+    "attemptInstructions": "Przekazano do: {helper}",
+    "attemptReport": "Raport: {helper}",
     "outcome": {
       "completed": "ukończono",
       "failed": "niepowodzenie"

package/i18n/locales/tr.json

@@ -2898,6 +2898,8 @@
     },
     "attemptsHeading": "{helper} denemeleri",
     "attempt": "Deneme {number}",
+    "attemptInstructions": "{helper}'a iletildi",
+    "attemptReport": "{helper} raporu",
     "outcome": {
       "completed": "tamamlandı",
       "failed": "başarısız oldu"

package/i18n/locales/uk.json

@@ -2885,6 +2885,8 @@
     },
     "attemptsHeading": "Спроби: {helper}",
     "attempt": "Спроба {number}",
+    "attemptInstructions": "Передано: {helper}",
+    "attemptReport": "Звіт: {helper}",
     "outcome": {
       "completed": "завершено",
       "failed": "помилка"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.78.0",
+  "version": "0.79.0",
   "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.84.0"
+    "@cat-factory/contracts": "0.85.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",