@cat-factory/app 0.95.1 → 0.96.1

package/app/components/board/AgentFailureHistory.vue

@@ -5,14 +5,11 @@
 // 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'
+import FailureHistoryList from '~/components/board/FailureHistoryList.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())
+const { t } = useI18n()
 </script>
 
 <template>
@@ -28,33 +25,6 @@ const ordered = computed(() => [...props.failures].reverse())
       {{ 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>
+    <FailureHistoryList :failures="props.failures" class="mt-2" />
   </details>
 </template>

package/app/components/board/FailureHistoryList.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// The newest-first list of failed-attempt entries (timestamp + message + hint + collapsible
+// detail), shared by the task-inspector's "previous errors" disclosure (AgentFailureHistory)
+// and the step-detail overlay's per-step "execution history". Presentational only — the caller
+// decides which trail to pass (the whole run's, or one step's) and how to reveal it.
+import type { AgentFailure } from '~/types/domain'
+import FailureDetail from '~/components/board/FailureDetail.vue'
+
+const props = defineProps<{ failures: AgentFailure[] }>()
+
+const { d } = useI18n()
+
+// Newest attempt first — the most recent failure is the most relevant to look at.
+const ordered = computed(() => [...props.failures].reverse())
+</script>
+
+<template>
+  <ol class="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>
+</template>

package/app/components/clarity/ClarityReviewWindow.vue

@@ -27,6 +27,10 @@ const { t } = useI18n()
 
 // Draft replies, keyed by item id, so editing one item doesn't disturb others.
 const drafts = ref<Record<string, string>>({})
+// The server-side reply each draft was last seeded/synced to, so the seeding watch can refresh
+// a draft when the recorded reply changes server-side WITHOUT clobbering one the human is
+// actively editing (mirrors the requirements window).
+const seededReply = ref<Record<string, string>>({})
 // Freeform "do it differently" comment when redoing a merge the human was unhappy with.
 const redoComment = ref('')
 const showRedo = ref(false)
@@ -39,10 +43,14 @@ const showRedo = ref(false)
 const { open, blockId, close } = useResultView('clarity-review', {
   onOpen: (id) => {
     drafts.value = {}
+    seededReply.value = {}
     redoComment.value = ''
     showRedo.value = false
     void clarity.load(id)
   },
+  // Flush any typed-but-unblurred answer before the view tears down (X, backdrop, Escape) so
+  // closing the window never silently drops it (UX-33).
+  onClose: () => void flushDrafts(),
 })
 const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
 const review = computed<ClarityReview | null>(() =>
@@ -144,18 +152,70 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
-async function submitReply(item: ClarityReviewItem) {
-  if (!review.value) return
+// Answers auto-save on blur — no explicit "save" button (matching the requirements window, so
+// muscle memory carries across the two, UX-34). The textarea is pre-seeded with the recorded
+// reply (see the watch below); persist only when the trimmed draft actually differs from what's
+// already recorded, so blurring an untouched field is a no-op.
+async function persistDraft(item: ClarityReviewItem, r: ClarityReview | null = review.value) {
+  if (!r || frozen.value) return
   const text = (drafts.value[item.id] ?? '').trim()
-  if (!text) return
+  if (!text || text === (item.reply ?? '').trim()) return
   try {
-    await clarity.reply(review.value, item.id, text)
-    drafts.value = { ...drafts.value, [item.id]: '' }
+    await clarity.reply(r, item.id, text)
   } catch (e) {
     notifyError(t('clarity.error.saveAnswer'), e)
   }
 }
 
+// Persist every dirty draft before an action that consumes the answers (or on window close).
+// Snapshots the review up front and threads it through, so the persist completes even if the
+// window closes mid-flush (the reactive `review` goes null the moment the view tears down).
+async function flushDrafts() {
+  const r = review.value
+  if (!r) return
+  for (const item of r.items) {
+    if (item.status === 'open' || item.status === 'answered') await persistDraft(item, r)
+  }
+}
+
+// Seed a draft for each finding from its recorded reply so the textarea shows the current
+// answer (editing in place). New findings from a re-review get seeded; a draft the user hasn't
+// diverged from is refreshed when the recorded reply changes server-side; drafts the user is
+// actively editing are left untouched.
+watch(
+  review,
+  (r) => {
+    if (!r) return
+    const nextDrafts = { ...drafts.value }
+    const nextSeeded = { ...seededReply.value }
+    let changed = false
+    for (const item of r.items) {
+      const reply = item.reply ?? ''
+      if (!(item.id in nextDrafts)) {
+        nextDrafts[item.id] = reply
+        nextSeeded[item.id] = reply
+        changed = true
+        continue
+      }
+      const draft = nextDrafts[item.id] ?? ''
+      const seeded = nextSeeded[item.id] ?? ''
+      if (draft === seeded && draft !== reply) {
+        nextDrafts[item.id] = reply
+        nextSeeded[item.id] = reply
+        changed = true
+      } else if (draft === reply && seeded !== reply) {
+        nextSeeded[item.id] = reply
+        changed = true
+      }
+    }
+    if (changed) {
+      drafts.value = nextDrafts
+      seededReply.value = nextSeeded
+    }
+  },
+  { immediate: true },
+)
+
 async function setStatus(item: ClarityReviewItem, itemStatus: ClarityItemStatus) {
   if (!review.value) return
   try {
@@ -168,6 +228,7 @@ async function setStatus(item: ClarityReviewItem, itemStatus: ClarityItemStatus)
 async function incorporate(feedback?: string) {
   if (!review.value || !blockId.value) return
   try {
+    await flushDrafts()
     await clarity.incorporate(review.value, feedback)
   } catch (e) {
     notifyError(t('clarity.error.incorporate'), e)
@@ -208,6 +269,7 @@ async function proceed() {
   if (!blockId.value) return
   acting.value = true
   try {
+    await flushDrafts()
     await clarity.proceed(blockId.value)
     toast.add({ title: t('clarity.toast.proceeding'), icon: 'i-lucide-arrow-right' })
   } catch (e) {
@@ -269,7 +331,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
         </header>
 
-        <div class="flex min-h-0 flex-1">
+        <div class="flex min-h-0 flex-1 flex-col lg:flex-row">
           <!-- main column -->
           <div class="min-w-0 flex-1 overflow-y-auto px-6 py-5">
             <p class="mb-4 text-sm text-slate-400">
@@ -372,9 +434,10 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                         {{ item.detail }}
                       </p>
 
-                      <!-- recorded answer -->
+                      <!-- recorded answer (only for non-editable findings — for editable ones
+                           the answer lives in the textarea below, seeded from the reply) -->
                       <div
-                        v-if="item.reply"
+                        v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
                         class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
                       >
                         <span class="text-[10px] uppercase tracking-wide text-slate-500">
@@ -383,7 +446,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                         <p class="whitespace-pre-line">{{ item.reply }}</p>
                       </div>
 
-                      <!-- react: answer (relevant) or dismiss (irrelevant). Disabled once the
+                      <!-- react: answer (relevant) or dismiss (irrelevant). The answer
+                           auto-saves on blur — no explicit save button. Disabled once the
                            bug report is clarified / awaiting a higher-level decision. -->
                       <template v-if="item.status === 'open' || item.status === 'answered'">
                         <UTextarea
@@ -392,24 +456,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                           autoresize
                           size="sm"
                           class="mt-2 w-full"
-                          :placeholder="
-                            item.reply
-                              ? t('clarity.refineAnswerPlaceholder')
-                              : t('clarity.answerPlaceholder')
-                          "
+                          :placeholder="t('clarity.answerPlaceholder')"
                           :disabled="frozen"
+                          @blur="persistDraft(item)"
                         />
                         <div class="mt-2 flex flex-wrap items-center gap-2">
-                          <UButton
-                            color="primary"
-                            variant="soft"
-                            size="xs"
-                            icon="i-lucide-corner-down-left"
-                            :disabled="!(drafts[item.id] ?? '').trim() || frozen"
-                            @click="submitReply(item)"
-                          >
-                            {{ t('clarity.saveAnswer') }}
-                          </UButton>
                           <UButton
                             color="neutral"
                             variant="ghost"
@@ -476,10 +527,15 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </template>
           </div>
 
-          <!-- right action rail -->
-          <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
+          <!-- action rail: a right-hand column on wide screens, a bottom action bar below `lg`
+               (never hidden — the gate is otherwise unadvanceable on a laptop split-screen /
+               tablet, UX-32). The informational stats collapse away below `lg` to keep the
+               bottom bar compact; the actions themselves always show. -->
+          <aside
+            class="flex w-full shrink-0 flex-col border-t border-slate-800 lg:w-72 lg:border-s lg:border-t-0"
+          >
             <div class="flex flex-col gap-4 px-4 py-5">
-              <div v-if="review" class="space-y-2 text-xs text-slate-400">
+              <div v-if="review" class="hidden space-y-2 text-xs text-slate-400 lg:block">
                 <div class="flex items-center justify-between">
                   <span>{{ t('clarity.rail.findings') }}</span>
                   <span class="text-slate-300">{{ review.items.length }}</span>

package/app/components/layout/ConnectionStatusBanner.vue

@@ -1,36 +1,44 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
-// A slim top strip shown when the real-time WebSocket has dropped and is reconnecting, so a
+// A slim top strip shown when the real-time WebSocket isn't delivering events, so a
 // silently-frozen board (events stop arriving, nothing updates) is no longer indistinguishable
-// from an idle one. `useWorkspaceStream` already reconnects with exponential backoff and
-// resyncs on reconnect — this only makes that state visible. The `connected` ref is passed in
-// as a prop (the page owns the single stream instance; creating another here would open a
-// second socket).
-const props = defineProps<{ connected: boolean }>()
+// from an idle one. Two states:
+//   - RE-connecting: we were live and the socket dropped (`useWorkspaceStream` reconnects with
+//     exponential backoff and resyncs on reconnect — this just makes that state visible).
+//   - Offline: the very first handshake keeps failing (`connectionFailed`), so the board loaded
+//     over REST but will never go live — a user watching a run would otherwise see a frozen
+//     board with no hint why.
+// The `connected` / `everConnected` / `connectionFailed` refs are passed in as props (the page
+// owns the single stream instance; creating another here would open a second socket).
+const props = defineProps<{
+  connected: boolean
+  everConnected: boolean
+  connectionFailed: boolean
+}>()
 
 const { t } = useI18n()
 
-// Only surface a RE-connection, never the initial connect: once we've been connected we know a
-// later drop is a real interruption worth flagging. A short debounce rides out a quick socket
-// flap so a momentary blip doesn't flash the strip.
-const everConnected = ref(false)
+// A short debounce rides out a quick socket flap so a momentary blip doesn't flash the strip.
 const showAfterDelay = ref(false)
 let timer: ReturnType<typeof setTimeout> | null = null
 
+function clearTimer() {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+
 watch(
   () => props.connected,
   (connected) => {
     if (connected) {
-      everConnected.value = true
       showAfterDelay.value = false
-      if (timer) {
-        clearTimeout(timer)
-        timer = null
-      }
+      clearTimer()
       return
     }
-    if (!everConnected.value || timer) return
+    if (timer) return
     timer = setTimeout(() => {
       showAfterDelay.value = true
       timer = null
@@ -39,24 +47,24 @@ watch(
   { immediate: true },
 )
 
-const visible = computed(() => everConnected.value && !props.connected && showAfterDelay.value)
+// Reconnection: only surface once we've been connected — a later drop is a real interruption.
+const reconnecting = computed(() => props.everConnected && !props.connected && showAfterDelay.value)
+// Offline: never connected and repeated attempts failed. No debounce — it already took several
+// backoff cycles to flag, so it's not a flap.
+const offline = computed(() => props.connectionFailed && !props.connected && !props.everConnected)
 
 // Don't leave a pending debounce timer firing into a torn-down component.
-onBeforeUnmount(() => {
-  if (timer) {
-    clearTimeout(timer)
-    timer = null
-  }
-})
+onBeforeUnmount(clearTimer)
 </script>
 
 <template>
   <Transition name="fade">
     <div
-      v-if="visible"
+      v-if="reconnecting || offline"
       class="pointer-events-none absolute inset-x-0 top-0 z-50 flex justify-center px-4 pt-2"
     >
       <div
+        v-if="reconnecting"
         class="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-500/60 bg-amber-950/90 px-3 py-1.5 text-xs text-amber-100 shadow-lg backdrop-blur"
         role="status"
         aria-live="polite"
@@ -65,6 +73,16 @@ onBeforeUnmount(() => {
         <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin" />
         <span>{{ t('app.reconnecting') }}</span>
       </div>
+      <div
+        v-else
+        class="pointer-events-auto flex items-center gap-2 rounded-full border border-rose-500/60 bg-rose-950/90 px-3 py-1.5 text-xs text-rose-100 shadow-lg backdrop-blur"
+        role="status"
+        aria-live="polite"
+        data-testid="stream-offline"
+      >
+        <UIcon name="i-lucide-wifi-off" class="h-3.5 w-3.5" />
+        <span>{{ t('app.offline') }}</span>
+      </div>
     </div>
   </Transition>
 </template>

package/app/components/panels/AgentStepDetail.vue

@@ -11,6 +11,7 @@ import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBind
 import { UI_TESTER_AGENT_KIND } from '@cat-factory/contracts'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
 import IterationCapPrompt from '~/components/pipeline/IterationCapPrompt.vue'
+import FailureHistoryList from '~/components/board/FailureHistoryList.vue'
 import { useStepTimer } from '~/composables/useStepTimer'
 import { useStepProse } from '~/composables/useStepProse'
 import { useStepApproval } from '~/composables/useStepApproval'
@@ -84,6 +85,19 @@ const runNotes = computed(() => (isFrontendFrame.value ? (instance.value?.notes
 const showProvisioning = ref(false)
 const executionId = computed(() => instance.value?.id ?? null)
 
+// This step's own "execution history": the run-level failure trail narrowed to the failures
+// recorded for THIS step (each carries the `stepIndex` it failed at). Includes the current
+// failure when the run is presently failed at this step (it moves into `failureHistory` only on
+// the next retry). Revealed behind a toggle, mirroring the infra-attempts drawer above.
+const stepFailures = computed(() => {
+  const idx = ctx.value?.stepIndex
+  if (idx == null) return []
+  const trail = [...(instance.value?.failureHistory ?? [])]
+  if (instance.value?.failure) trail.push(instance.value.failure)
+  return trail.filter((f) => f.stepIndex === idx)
+})
+const showHistory = ref(false)
+
 // A failed run is no longer executing: a step left mid-flight (state still
 // `working`, no `finishedAt`) must stop looking live — no ticking clock, no
 // "spinning up" phase, no spinner.
@@ -188,6 +202,8 @@ watch(
   () => {
     prose.reset()
     approval.resetForStep()
+    // Collapse the per-step execution history so reopening a different step starts clean.
+    showHistory.value = false
   },
 )
 
@@ -423,6 +439,35 @@ async function copyOutput() {
                 />
               </div>
 
+              <!-- this step's failure trail (the run-level history narrowed to this step),
+                   behind a toggle — mirrors the "previous errors" history on the task inspector
+                   but scoped to the step the user is looking at -->
+              <div v-if="stepFailures.length">
+                <UButton
+                  :icon="showHistory ? 'i-lucide-chevron-up' : 'i-lucide-history'"
+                  variant="ghost"
+                  size="xs"
+                  data-testid="step-execution-history-toggle"
+                  @click="
+                    () => {
+                      showHistory = !showHistory
+                    }
+                  "
+                >
+                  {{
+                    showHistory
+                      ? t('panels.stepDetail.hideExecutionHistory')
+                      : t('panels.stepDetail.executionHistory')
+                  }}
+                </UButton>
+                <FailureHistoryList
+                  v-if="showHistory"
+                  class="mt-2"
+                  :failures="stepFailures"
+                  data-testid="step-execution-history"
+                />
+              </div>
+
               <!-- tester report: what was tested, the per-area outcomes, the concerns
                    it raised and the greenlight verdict; plus the fixer-loop phase -->
               <StepTestReport v-if="testReport" :report="testReport" :phase="testPhase" />