@cat-factory/app 0.107.3 → 0.107.5

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AgentState } from '~/types/domain'
+import type { AgentState, PipelineStep } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
 import {
   subtaskIconClass,
@@ -63,6 +63,26 @@ const STATE_META: Record<AgentState, { color: string; icon: string }> = {
   done: { color: '#22c55e', icon: 'i-lucide-circle-check' },
 }
 
+// A reviewer gate (requirements-review / clarity-review) folding answers or re-reviewing in
+// the driver parks the step in `waiting_decision`, but it's actively doing background LLM
+// work and needs no human — so it must read as working (a spinning loader) rather than the
+// waiting-for-a-human question mark.
+function backgroundReview(s: PipelineStep) {
+  return reviews.isBackground(s.agentKind, props.taskId)
+}
+/** The state visual for a step's trailing status icon: failed cross for a mid-flight step on
+ *  a failed run, a spinning working loader for a reviewer gate mid background cycle, else the
+ *  plain per-state accent. */
+function stepVisual(s: PipelineStep) {
+  if (isFailedStep(s.state, runFailed.value)) return FAILED_STEP_META
+  if (backgroundReview(s)) return STATE_META.working
+  return STATE_META[s.state]
+}
+/** Whether that trailing icon should spin — a live `working` step or a background review. */
+function stepSpinning(s: PipelineStep) {
+  return !runFailed.value && (s.state === 'working' || backgroundReview(s))
+}
+
 // Same todo-status icons the bootstrap card uses, so a zoomed-in task reads the
 // same way as a zoomed-in bootstrap.
 const ITEM_ICON: Record<string, string> = {
@@ -106,16 +126,10 @@ const ITEM_ICON: Record<string, string> = {
         </span>
         <UIcon
           v-else
-          :name="
-            isFailedStep(s.state, runFailed) ? FAILED_STEP_META.icon : STATE_META[s.state].icon
-          "
+          :name="stepVisual(s).icon"
           class="ms-auto h-2.5 w-2.5 shrink-0"
-          :class="s.state === 'working' && !runFailed ? 'animate-spin' : ''"
-          :style="{
-            color: isFailedStep(s.state, runFailed)
-              ? FAILED_STEP_META.color
-              : STATE_META[s.state].color,
-          }"
+          :class="stepSpinning(s) ? 'animate-spin' : ''"
+          :style="{ color: stepVisual(s).color }"
         />
       </button>
 

package/app/components/pipeline/PipelineProgress.vue

@@ -139,16 +139,31 @@ const companionByStep = computed(() => steps.value.map((s) => gateCompanionFor(s
 // its container caught mid cold-boot) must stop looking live — no spinner, no pulse,
 // no "spinning up container" phase.
 const runFailed = computed(() => props.instance.status === 'failed')
-/** A step that is genuinely, currently working (not a stale mid-flight step). */
-function liveWorking(state: AgentState) {
-  return state === 'working' && !runFailed.value
+/**
+ * A reviewer gate (requirements-review / clarity-review) folding the answers or
+ * re-reviewing in the durable driver: the step parks in `waiting_decision` but is actively
+ * doing background LLM work and needs NO human, so it must read as working (a spinning
+ * loader), not the waiting-for-a-human question mark.
+ */
+function backgroundReview(s: PipelineStep) {
+  return reviews.isBackground(s.agentKind, props.instance.blockId)
+}
+/**
+ * A step that is genuinely, currently working (not a stale mid-flight step) — including a
+ * reviewer gate doing background fold/re-review work.
+ */
+function liveWorking(s: PipelineStep) {
+  return (s.state === 'working' || backgroundReview(s)) && !runFailed.value
 }
 /**
  * The state visual (label/color/icon) for a step: a step left `working` when the run
- * failed reads as "Failed" with a red cross, not a frozen "Working" loader.
+ * failed reads as "Failed" with a red cross, not a frozen "Working" loader; a reviewer gate
+ * mid background cycle reads as "Working" (a spinning loader), not "Needs decision".
  */
-function stepVisual(state: AgentState) {
-  return isFailedStep(state, runFailed.value) ? FAILED_STEP_META : STATE_META.value[state]
+function stepVisual(s: PipelineStep) {
+  if (isFailedStep(s.state, runFailed.value)) return FAILED_STEP_META
+  if (backgroundReview(s)) return STATE_META.value.working
+  return STATE_META.value[s.state]
 }
 
 /** A step counts as fully complete only once its state is `done`. */
@@ -248,14 +263,14 @@ const ITEM_ICON: Record<string, string> = {
         <!-- rail node -->
         <span
           class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 bg-slate-950"
-          :class="liveWorking(s.state) ? 'step-active' : ''"
-          :style="{ borderColor: stepVisual(s.state).color }"
+          :class="liveWorking(s) ? 'step-active' : ''"
+          :style="{ borderColor: stepVisual(s).color }"
         >
           <UIcon
-            :name="stepVisual(s.state).icon"
+            :name="stepVisual(s).icon"
             class="h-4 w-4"
-            :class="liveWorking(s.state) ? 'animate-spin' : ''"
-            :style="{ color: stepVisual(s.state).color }"
+            :class="liveWorking(s) ? 'animate-spin' : ''"
+            :style="{ color: stepVisual(s).color }"
           />
         </span>
 
@@ -307,9 +322,9 @@ const ITEM_ICON: Record<string, string> = {
             </div>
             <span
               class="ms-auto shrink-0 text-[11px] font-medium"
-              :style="{ color: stepVisual(s.state).color }"
+              :style="{ color: stepVisual(s).color }"
             >
-              {{ stepVisual(s.state).label }}
+              {{ stepVisual(s).label }}
             </span>
 
             <!-- restart-from-here: revealed on row hover, arms a two-click confirm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.107.3",
+  "version": "0.107.5",
   "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.117.0"
+    "@cat-factory/contracts": "0.118.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",