@cat-factory/app 0.72.0 → 0.73.1

package/app/components/board/nodes/TaskCard.vue

@@ -14,6 +14,7 @@ const agentRuns = useAgentRunsStore()
 const reviews = useReviewStage()
 const toast = useToast()
 const { t } = useI18n()
+const { confirm } = useConfirm()
 
 const task = computed<Block | undefined>(() => board.getBlock(props.taskId))
 const statusMeta = computed(() => (task.value ? STATUS_META[task.value.status] : null))
@@ -106,8 +107,17 @@ function review() {
   ui.focus(props.taskId)
 }
 
-function merge() {
-  execution.mergePr(props.taskId)
+async function merge() {
+  // Merging a PR into its base is consequential and effectively irreversible — gate it behind a
+  // confirm (plain, not the destructive shape). `execution.mergePr` surfaces its own error toast.
+  const ok = await confirm({
+    title: t('board.task.mergeConfirm.title'),
+    description: t('board.task.mergeConfirm.body'),
+    confirmLabel: t('board.task.mergeConfirm.confirm'),
+    icon: 'i-lucide-git-merge',
+  })
+  if (!ok) return
+  await execution.mergePr(props.taskId)
 }
 
 // A `blocked` task is waiting on a human for one of two reasons — an agent-raised

package/app/components/bootstrap/BootstrapModal.vue

@@ -444,7 +444,11 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <div class="space-y-2">
               <div class="flex items-center gap-2">
-                <UInput v-model="repoName" placeholder="payments-service" class="w-full" />
+                <UInput
+                  v-model="repoName"
+                  :placeholder="t('bootstrap.targetRepo.namePlaceholder')"
+                  class="w-full"
+                />
                 <UButton
                   color="neutral"
                   variant="subtle"
@@ -493,7 +497,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
           >
             <UInput
               v-model="description"
-              placeholder="Handles payment intents and refunds"
+              :placeholder="t('bootstrap.description.placeholder')"
               class="w-full"
             />
           </UFormField>
@@ -640,7 +644,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               <USelect
                 v-model="archRepoSlug"
                 :items="repoOptions"
-                placeholder="owner/name"
+                :placeholder="t('bootstrap.arch.pickRepo.placeholder')"
                 class="w-full"
               />
             </UFormField>
@@ -650,14 +654,26 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               :description="t('bootstrap.arch.name.description')"
               required
             >
-              <UInput v-model="archForm.name" placeholder="Service Template" class="w-full" />
+              <UInput
+                v-model="archForm.name"
+                :placeholder="t('bootstrap.arch.name.placeholder')"
+                class="w-full"
+              />
             </UFormField>
             <div class="grid grid-cols-2 gap-2">
               <UFormField :label="t('bootstrap.arch.repoOwner')" required>
-                <UInput v-model="archForm.repoOwner" placeholder="acme" class="w-full" />
+                <UInput
+                  v-model="archForm.repoOwner"
+                  :placeholder="t('bootstrap.arch.repoOwnerPlaceholder')"
+                  class="w-full"
+                />
               </UFormField>
               <UFormField :label="t('bootstrap.arch.repoName')" required>
-                <UInput v-model="archForm.repoName" placeholder="service-template" class="w-full" />
+                <UInput
+                  v-model="archForm.repoName"
+                  :placeholder="t('bootstrap.arch.repoNamePlaceholder')"
+                  class="w-full"
+                />
               </UFormField>
             </div>
             <UFormField :label="t('bootstrap.description.label')">
@@ -674,7 +690,7 @@ const statusLabel = computed<Record<BootstrapStatus, string>>(() => ({
               <UTextarea
                 v-model="archForm.defaultInstructions"
                 :rows="2"
-                placeholder="e.g. keep the structure; rename packages to match the new service"
+                :placeholder="t('bootstrap.arch.defaultInstructions.placeholder')"
                 class="w-full"
               />
             </UFormField>

package/app/components/brainstorm/BrainstormWindow.vue

@@ -256,6 +256,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/clarity/ClarityReviewWindow.vue

@@ -246,6 +246,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -98,6 +98,8 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/focus/BlockFocusView.vue

@@ -62,6 +62,8 @@ function openApprovalFor(approvalId: string) {
   <div
     v-if="block && statusMeta && typeMeta"
     class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+    role="dialog"
+    aria-modal="true"
   >
     <!-- header / breadcrumb -->
     <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/followUp/FollowUpWindow.vue

@@ -90,6 +90,8 @@ const STATUS_META: Record<
     >
       <div
         class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/gates/GateResultView.vue

@@ -170,6 +170,8 @@ const conflictVerdict = computed(() => {
     >
       <div
         class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/humanTest/HumanTestWindow.vue

@@ -142,6 +142,8 @@ const canDestroy = computed(
     >
       <div
         class="m-4 flex w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/layout/ConnectionStatusBanner.vue

@@ -0,0 +1,81 @@
+<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
+// 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 }>()
+
+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)
+const showAfterDelay = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(
+  () => props.connected,
+  (connected) => {
+    if (connected) {
+      everConnected.value = true
+      showAfterDelay.value = false
+      if (timer) {
+        clearTimeout(timer)
+        timer = null
+      }
+      return
+    }
+    if (!everConnected.value || timer) return
+    timer = setTimeout(() => {
+      showAfterDelay.value = true
+      timer = null
+    }, 1500)
+  },
+  { immediate: true },
+)
+
+const visible = computed(() => everConnected.value && !props.connected && showAfterDelay.value)
+
+// Don't leave a pending debounce timer firing into a torn-down component.
+onBeforeUnmount(() => {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="visible"
+      class="pointer-events-none absolute inset-x-0 top-0 z-50 flex justify-center px-4 pt-2"
+    >
+      <div
+        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"
+        data-testid="stream-reconnecting"
+      >
+        <UIcon name="i-lucide-loader" class="h-3.5 w-3.5 animate-spin" />
+        <span>{{ t('app.reconnecting') }}</span>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/app/components/layout/NotificationsInbox.vue

@@ -16,6 +16,17 @@ const toast = useToast()
 
 const busy = ref<string | null>(null)
 
+/** Toast a failed act/dismiss — the store throws, so without this a failure was silent and the
+ * item just stayed in the inbox with no explanation. */
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
 /** Per-type display metadata (icon, colour). The primary-action label is resolved
  * separately through the i18n catalog (`ACTION_KEYS`). */
 type Accent = 'warning' | 'primary' | 'error'
@@ -98,6 +109,8 @@ async function act(n: Notification) {
       color: 'success',
       icon: 'i-lucide-check',
     })
+  } catch (e) {
+    notifyError(t('layout.notifications.toast.actFailed'), e)
   } finally {
     busy.value = null
   }
@@ -112,6 +125,8 @@ async function dismiss(n: Notification) {
       color: 'neutral',
       icon: 'i-lucide-check',
     })
+  } catch (e) {
+    notifyError(t('layout.notifications.toast.dismissFailed'), e)
   } finally {
     busy.value = null
   }

package/app/components/panels/GenericStructuredResultView.vue

@@ -60,6 +60,8 @@ const customJson = computed<string | null>(() => {
     >
       <div
         class="m-4 flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- Header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-5 py-3">

package/app/components/panels/InspectorPanel.vue

@@ -54,6 +54,21 @@ const block = computed<Block | undefined>(() =>
 )
 const level = computed(() => block.value?.level ?? 'frame')
 const isFrame = computed(() => level.value === 'frame')
+
+// The title to fall back to when the user clears the field and blurs. Editing the title binds
+// straight to the store object via v-model, so there is nothing to fall back to otherwise —
+// restore this rather than persisting (and showing) an empty title. It is captured fresh at
+// edit start (`captureTitle` on focus), so it always reflects the current known-good value —
+// robust against a failed save (which rolls the title back) and an external rename of the same
+// block. Seeded here on block switch so the fallback is sane even before the first focus.
+const lastSavedTitle = ref('')
+watch(
+  () => block.value?.id,
+  () => {
+    lastSavedTitle.value = block.value?.title ?? ''
+  },
+  { immediate: true },
+)
 const isContainer = computed(() => level.value === 'frame' || level.value === 'module')
 const isTask = computed(() => level.value === 'task')
 const isEpic = computed(() => level.value === 'epic')
@@ -103,11 +118,24 @@ const started = computed(
 )
 const editable = computed(() => !started.value)
 
+// Snapshot the current title as the fallback the moment editing begins, so it reflects the
+// last known-good value (survives a failed save or an external rename) rather than a value we
+// only optimistically assumed had persisted.
+function captureTitle() {
+  lastSavedTitle.value = block.value?.title ?? ''
+}
 function saveTitle() {
   const b = block.value
   if (!b) return
   const next = b.title.trim()
-  if (next) board.updateBlock(b.id, { title: next })
+  // An emptied title can't persist — restore the last saved value so the field never shows a
+  // blank the user didn't intend (and the board keeps a real label).
+  if (!next) {
+    b.title = lastSavedTitle.value
+    return
+  }
+  b.title = next
+  board.updateBlock(b.id, { title: next })
 }
 function saveDescription() {
   const b = block.value
@@ -253,6 +281,7 @@ const showOriginalDescription = ref(false)
           size="sm"
           class="w-full"
           :placeholder="t('panels.inspector.titlePlaceholder')"
+          @focus="captureTitle"
           @change="saveTitle"
           @blur="saveTitle"
         />

package/app/components/panels/inspector/TaskExecution.vue

@@ -18,6 +18,7 @@ const ui = useUiStore()
 const models = useModelsStore()
 const reviews = useReviewStage()
 const { t, te } = useI18n()
+const { confirm } = useConfirm()
 
 // The async stage this task's iterative reviewer gate (requirements-review / clarity-review)
 // is mid-cycle in (folding the answers, then re-reviewing), or null. While set, the gate is
@@ -146,6 +147,16 @@ async function stopRun() {
 const resetting = ref(false)
 async function resetRun() {
   if (resetting.value) return
+  // Destructive: discards the run and returns the task to planned — gate it behind a confirm,
+  // matching the confirm-then-mutate contract the board delete path uses.
+  const ok = await confirm({
+    title: t('inspector.execution.resetConfirm.title'),
+    description: t('inspector.execution.resetConfirm.body'),
+    variant: 'destructive',
+    confirmLabel: t('inspector.execution.resetConfirm.confirm'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
   resetting.value = true
   try {
     await execution.cancel(props.block.id)
@@ -153,6 +164,19 @@ async function resetRun() {
     resetting.value = false
   }
 }
+
+// Merging a PR is consequential and effectively irreversible — confirm first. `execution.mergePr`
+// surfaces its own error toast, so no catch is needed here.
+async function mergePr() {
+  const ok = await confirm({
+    title: t('inspector.execution.mergeConfirm.title'),
+    description: t('inspector.execution.mergeConfirm.body'),
+    confirmLabel: t('inspector.execution.mergeConfirm.confirm'),
+    icon: 'i-lucide-git-merge',
+  })
+  if (!ok) return
+  await execution.mergePr(props.block.id)
+}
 </script>
 
 <template>
@@ -436,7 +460,7 @@ async function resetRun() {
       size="sm"
       icon="i-lucide-git-merge"
       block
-      @click="execution.mergePr(block.id)"
+      @click="mergePr"
     >
       {{ t('inspector.execution.mergePr') }}
     </UButton>

package/app/components/pipeline/PipelineBuilder.vue

@@ -3,7 +3,12 @@ import { computed, ref, watch } from 'vue'
 import type { AgentKind, Pipeline } from '~/types/domain'
 import AgentPalette from '~/components/palettes/AgentPalette.vue'
 import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
-import { agentKindMeta, companionForProducer, isConsensusEligibleKind } from '~/utils/catalog'
+import {
+  agentKindMeta,
+  companionForProducer,
+  isConsensusEligibleKind,
+  isTesterKind,
+} from '~/utils/catalog'
 import type { ConsensusStrategy } from '~/types/consensus'
 
 type DraftUnit = { index: number; kind: AgentKind; companionIndex: number | null }
@@ -146,15 +151,18 @@ function companionLabel(kind: string): string | null {
 }
 
 // Surfaced as an inline hint: a gated step needs a task-estimator before it (mirrors the
-// backend validation, which also rejects the save/start).
+// backend validation, which also rejects the save/start). Both the companion estimate gate
+// (`draftGating`) and the Tester QC companion's estimate gate (`draftTesterQuality[i].gating`)
+// count — either without a preceding estimator is rejected on save.
 const gatingNeedsEstimator = computed(() => {
   const kinds = pipelines.draft
+  const hasEstimatorBefore = (i: number) =>
+    kinds.slice(0, i).some((k, j) => k === 'task-estimator' && pipelines.draftEnabled[j] !== false)
   for (let i = 0; i < kinds.length; i++) {
-    if (!pipelines.draftGating[i]?.enabled || pipelines.draftEnabled[i] === false) continue
-    const hasEstimator = kinds
-      .slice(0, i)
-      .some((k, j) => k === 'task-estimator' && pipelines.draftEnabled[j] !== false)
-    if (!hasEstimator) return true
+    if (pipelines.draftEnabled[i] === false) continue
+    const gated =
+      pipelines.draftGating[i]?.enabled || pipelines.draftTesterQuality[i]?.gating?.enabled
+    if (gated && !hasEstimatorBefore(i)) return true
   }
   return false
 })
@@ -434,6 +442,30 @@ async function clone(p: Pipeline) {
                     "
                     @click="pipelines.toggleDraftFollowUps(unit.index)"
                   />
+                  <!-- Test quality-control companion: audits the Tester's report for coverage
+                     before the greenlight/fixer decision and loops the Tester on gaps (Tester
+                     steps only). Enabled by default. -->
+                  <UButton
+                    v-if="isTesterKind(unit.kind)"
+                    :icon="
+                      pipelines.draftTesterQuality[unit.index]?.enabled === false
+                        ? 'i-lucide-shield-off'
+                        : 'i-lucide-shield-check'
+                    "
+                    :color="
+                      pipelines.draftTesterQuality[unit.index]?.enabled === false
+                        ? 'neutral'
+                        : 'secondary'
+                    "
+                    variant="ghost"
+                    size="xs"
+                    :title="
+                      pipelines.draftTesterQuality[unit.index]?.enabled === false
+                        ? t('pipeline.builder.testerQualityEnableTooltip')
+                        : t('pipeline.builder.testerQualityDisableTooltip')
+                    "
+                    @click="pipelines.toggleDraftTesterQuality(unit.index)"
+                  />
                   <UButton
                     icon="i-lucide-chevron-up"
                     color="neutral"
@@ -642,6 +674,77 @@ async function clone(p: Pipeline) {
                   </template>
                 </div>
               </div>
+
+              <!-- Test quality-control companion config (shown when QC is enabled on a Tester
+                 step): an optional estimate gate so only heavy tasks get the coverage audit. -->
+              <div
+                v-if="
+                  isTesterKind(unit.kind) &&
+                  pipelines.draftTesterQuality[unit.index]?.enabled !== false
+                "
+                class="ms-6 space-y-2 rounded-md border border-sky-800/40 bg-sky-950/20 p-2 text-xs"
+              >
+                <div class="flex items-center gap-1.5">
+                  <UIcon name="i-lucide-shield-check" class="h-3.5 w-3.5 text-sky-400" />
+                  <span class="min-w-0 flex-1 truncate text-slate-200">
+                    {{ t('pipeline.builder.testerQualityLabel') }}
+                  </span>
+                  <UButton
+                    :icon="
+                      pipelines.draftTesterQuality[unit.index]?.gating?.enabled
+                        ? 'i-lucide-toggle-right'
+                        : 'i-lucide-toggle-left'
+                    "
+                    :color="
+                      pipelines.draftTesterQuality[unit.index]?.gating?.enabled
+                        ? 'success'
+                        : 'neutral'
+                    "
+                    variant="ghost"
+                    size="xs"
+                    :label="t('pipeline.builder.gateOnEstimate')"
+                    :title="t('pipeline.builder.testerQualityGateTooltip')"
+                    @click="pipelines.toggleDraftTesterQualityGating(unit.index)"
+                  />
+                </div>
+                <div
+                  v-if="pipelines.draftTesterQuality[unit.index]?.gating?.enabled"
+                  class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2"
+                >
+                  <span class="text-[10px] text-slate-500">{{
+                    t('pipeline.builder.runWhenAny')
+                  }}</span>
+                  <label class="text-slate-400">{{
+                    t('pipeline.builder.complexityThreshold')
+                  }}</label>
+                  <input
+                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minComplexity"
+                    type="number"
+                    min="0"
+                    max="1"
+                    step="0.1"
+                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                  />
+                  <label class="text-slate-400">{{ t('pipeline.builder.riskThreshold') }}</label>
+                  <input
+                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minRisk"
+                    type="number"
+                    min="0"
+                    max="1"
+                    step="0.1"
+                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                  />
+                  <label class="text-slate-400">{{ t('pipeline.builder.impactThreshold') }}</label>
+                  <input
+                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minImpact"
+                    type="number"
+                    min="0"
+                    max="1"
+                    step="0.1"
+                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                  />
+                </div>
+              </div>
             </li>
           </ol>
         </div>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -414,6 +414,8 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">

package/app/components/spec/ServiceSpecWindow.vue

@@ -123,6 +123,8 @@ function kindLabel(item: RequirementItem): string {
     >
       <div
         class="flex max-h-[90dvh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
         <!-- header -->
         <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">