@cat-factory/app 0.147.1 → 0.147.3

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

@@ -9,6 +9,8 @@ import {
   COMPANION_STATE_META,
 } from '~/utils/pipelineRender'
 import { lodAtLeast } from '~/composables/useSemanticZoom'
+import { prReviewPhase } from '~/utils/prReviewProgress'
+import PrReviewPhaseBadge from '~/components/prReview/PrReviewPhaseBadge.vue'
 
 // Spatial drill-down inside a task card: at the `steps` zoom band the task's
 // build-pipeline steps appear, and one band deeper (`subtasks`) each step's live
@@ -83,6 +85,13 @@ function stepSpinning(s: PipelineStep) {
   return !runFailed.value && (s.state === 'working' || backgroundReview(s))
 }
 
+// Whether a step is a `pr-reviewer` with a LIVE phase to surface (slicing / reviewing / … ).
+// Drives replacing the generic N/M count + state icon with the phase badge, while a terminal
+// (done/skipped) review keeps its normal check/count visuals.
+function prPhaseActive(s: PipelineStep): boolean {
+  return prReviewPhase(s.prReview, s.subtasks) !== null
+}
+
 // 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> = {
@@ -118,14 +127,16 @@ const ITEM_ICON: Record<string, string> = {
           name="i-lucide-file-text"
           class="h-2.5 w-2.5 shrink-0 text-slate-500"
         />
+        <!-- The plain N/M count, replaced by the phase line below while a `pr-reviewer` step is
+             live — its slice progress reads better as Slicing… / Reviewing X/Y slices. -->
         <span
-          v-if="s.subtasks && s.subtasks.total > 0"
+          v-if="s.subtasks && s.subtasks.total > 0 && !prPhaseActive(s)"
           class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-slate-400"
         >
           {{ s.subtasks.completed }}/{{ s.subtasks.total }}
         </span>
         <UIcon
-          v-else
+          v-else-if="!prPhaseActive(s)"
           :name="stepVisual(s).icon"
           class="ms-auto h-2.5 w-2.5 shrink-0"
           :class="stepSpinning(s) ? 'animate-spin' : ''"
@@ -133,6 +144,16 @@ const ITEM_ICON: Record<string, string> = {
         />
       </button>
 
+      <!-- PR reviewer: the precise sub-phase (slicing vs reviewing N/M slices), so the board
+           card tells the reviewer's progress apart from a bare subtask count. Self-hides once
+           the review is terminal / for any non-pr-reviewer step. -->
+      <PrReviewPhaseBadge
+        v-if="prPhaseActive(s)"
+        :step="s"
+        :run-failed="runFailed"
+        class="ms-4 mt-1 text-[9px]"
+      />
+
       <!-- pending approval gate: jump straight to the conclusions reader. Suppressed
            while a reviewer gate is folding/re-reviewing in the background (no human needed). -->
       <button

package/app/components/pipeline/PipelineProgress.vue

@@ -11,7 +11,9 @@ import {
   FAILED_STEP_META,
   containerPhaseLabel,
 } from '~/utils/pipelineRender'
+import { prReviewPhase } from '~/utils/prReviewProgress'
 import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
+import PrReviewPhaseBadge from '~/components/prReview/PrReviewPhaseBadge.vue'
 import { useNowTick, stepDurationLabel } from '~/composables/useStepTimer'
 
 const props = defineProps<{ instance: ExecutionInstance }>()
@@ -84,6 +86,15 @@ function prReviewAwaiting(step: PipelineStep): boolean {
   return step.prReview?.status === 'awaiting_selection'
 }
 
+/**
+ * Whether a `pr-reviewer` step has a LIVE phase to surface (slicing / reviewing / … ). Drives
+ * showing the phase badge in place of the generic subtask count header; a terminal (done/skipped)
+ * review keeps the plain count.
+ */
+function prPhaseActive(step: PipelineStep): boolean {
+  return prReviewPhase(step.prReview, step.subtasks) !== null
+}
+
 // --- restart from a step -----------------------------------------------------
 // Re-run the pipeline from a chosen step onward: the server resets that step +
 // every later step's iteration counters and re-drives a fresh run, keeping the
@@ -444,9 +455,22 @@ const ITEM_ICON: Record<string, string> = {
             <span>{{ stepPhaseLabel(s) }}</span>
           </div>
 
+          <!-- PR reviewer: the precise sub-phase (Slicing… / Reviewing N/M slices), which reads
+               better than a bare subtask count. Shows during slicing (no todo list yet) too, so
+               it fills the gap before the chunk list exists. -->
+          <PrReviewPhaseBadge
+            v-if="prPhaseActive(s)"
+            :step="s"
+            :run-failed="runFailed"
+            class="mt-2 text-[11px]"
+          />
+
           <!-- live subtask counts from the agent's todo list -->
           <div v-if="s.subtasks && s.subtasks.total > 0" class="mt-2">
-            <div class="flex items-center justify-between text-[10px] text-slate-400">
+            <div
+              v-if="!prPhaseActive(s)"
+              class="flex items-center justify-between text-[10px] text-slate-400"
+            >
               <span>
                 {{
                   t('pipeline.progress.subtasks', {

package/app/components/prReview/PrReviewPhaseBadge.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PipelineStep } from '~/types/execution'
+import { prReviewPhase, type PrReviewPhaseKind } from '~/utils/prReviewProgress'
+
+// Compact, at-a-glance phase label for a live `pr-reviewer` step, so the BOARD surfaces (the
+// task-card mini pipeline + the focus-view timeline) tell the reviewer's sub-phase apart —
+// "Slicing…" while it groups the diff, "Reviewing X/Y slices" while it works through the chunks
+// — instead of a bare N/M count that reads the same as any other agent. Self-hides when the step
+// has no live review (terminal / not-a-pr-reviewer), so a host can drop it in unconditionally.
+// The precise phase derivation is the pure `prReviewPhase` helper (unit-tested).
+const props = defineProps<{
+  step: PipelineStep
+  /** The run has failed — freeze the phase (no spinner), matching the surrounding step visuals. */
+  runFailed?: boolean
+}>()
+
+const { t } = useI18n()
+
+const phase = computed(() => prReviewPhase(props.step.prReview, props.step.subtasks))
+
+// Per-phase icon + accent. `spin` drives the loader animation while the phase is actively
+// working (suppressed on a failed run). `awaiting` is the parked "findings ready" state — a
+// steady amber prompt, not a spinner.
+const PHASE_META: Record<PrReviewPhaseKind, { icon: string; spin: boolean; class: string }> = {
+  planning: { icon: 'i-lucide-loader-circle', spin: true, class: 'text-indigo-300' },
+  reviewing: { icon: 'i-lucide-loader-circle', spin: true, class: 'text-indigo-300' },
+  awaiting: { icon: 'i-lucide-clipboard-check', spin: false, class: 'text-amber-300' },
+  challenging: { icon: 'i-lucide-gavel', spin: true, class: 'text-indigo-300' },
+  fixing: { icon: 'i-lucide-wrench', spin: true, class: 'text-indigo-300' },
+  posting: { icon: 'i-lucide-send', spin: true, class: 'text-indigo-300' },
+}
+
+// Phase → i18n key. Exhaustive Record over the phase-kind union, so adding a kind without a
+// label fails the typecheck (the sanctioned dynamic enum→key guard — tier 1 can't see a
+// runtime-built key), matching the `CHUNK_STATUS_KEY` pattern in PrReviewWindow.vue.
+const PHASE_LABEL_KEY: Record<PrReviewPhaseKind, string> = {
+  planning: 'prReview.phase.planning',
+  reviewing: 'prReview.phase.reviewing',
+  awaiting: 'prReview.phase.awaiting',
+  challenging: 'prReview.phase.challenging',
+  fixing: 'prReview.phase.fixing',
+  posting: 'prReview.phase.posting',
+}
+
+const label = computed(() => {
+  const p = phase.value
+  if (!p) return null
+  // `reviewing` carries the live slice counts; the rest are static status copy.
+  if (p.kind === 'reviewing')
+    return t(PHASE_LABEL_KEY.reviewing, { completed: p.completed, total: p.total })
+  return t(PHASE_LABEL_KEY[p.kind])
+})
+
+const spinning = computed(
+  () => !!phase.value && PHASE_META[phase.value.kind].spin && !props.runFailed,
+)
+</script>
+
+<template>
+  <span
+    v-if="phase && label"
+    data-testid="pr-review-phase"
+    class="inline-flex items-center gap-1"
+    :class="runFailed ? 'text-rose-400' : PHASE_META[phase.kind].class"
+  >
+    <UIcon
+      :name="runFailed ? 'i-lucide-circle-x' : PHASE_META[phase.kind].icon"
+      class="h-3 w-3 shrink-0"
+      :class="spinning ? 'animate-spin' : ''"
+    />
+    <span class="truncate">{{ label }}</span>
+  </span>
+</template>