@cat-factory/app 0.143.1 → 0.144.1

package/app/components/board/AddTaskModal.vue

@@ -21,12 +21,11 @@ import type {
   TaskTypeFields,
 } from '~/types/domain'
 import { DOC_KINDS, DOC_KIND_FIELDS } from '~/types/domain'
-import type { DropdownMenuItem } from '@nuxt/ui'
 import ContextDocumentPicker from '~/components/documents/ContextDocumentPicker.vue'
 import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
+import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 import { riskPolicyOptionLabel, riskPolicySummary } from '~/utils/riskPolicy'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
-import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -37,7 +36,6 @@ const modelPresets = useModelPresetsStore()
 const pipelines = usePipelinesStore()
 const agentConfig = useAgentConfigStore()
 const fragments = useFragmentsStore()
-const accounts = useAccountsStore()
 const toast = useToast()
 const { t } = useI18n()
 
@@ -314,50 +312,10 @@ const selectedModelPresetLabel = computed(() => {
 })
 
 // ---- best-practice prompt fragments (pinned at creation) -------------------
-// The fragments already chosen, resolved against the catalog. An id the catalog no longer
-// resolves still renders (labelled by its raw id) so it stays visible and removable — mirrors
-// the inspector's TaskStructure picker.
-const selectedFragments = computed(() =>
-  fragmentIds.value.map((id) => fragments.getFragment(id) ?? { id, title: id, summary: '' }),
-)
-// A trailing group linking out to the fragment library (board tier always; account tier when
-// enabled) — managing fragments is open to every member, exactly like the inspector picker.
-const fragmentManageItems = computed<DropdownMenuItem[]>(() => {
-  const items: DropdownMenuItem[] = [
-    {
-      label: t('inspector.fragments.manageBoard'),
-      icon: 'i-lucide-book-marked',
-      onSelect: () => ui.openFragmentLibrary(),
-    },
-  ]
-  if (accounts.enabled) {
-    items.push({
-      label: t('inspector.fragments.manageAccount'),
-      icon: 'i-lucide-users',
-      onSelect: () => ui.openAccountSettings('fragments'),
-    })
-  }
-  return items
-})
-// Picker menu: fragments appropriate to the enclosing frame's block type (the "scope"), not
-// already selected, grouped by category, with the management links appended as the final group.
-// Falls back to `service` before a frame resolves so the catalog is still browsable.
-const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
-  const selected = new Set(fragmentIds.value)
-  return [
-    ...buildFragmentPickerGroups(
-      fragments.forBlockType(frame.value?.type ?? 'service'),
-      (id) => selected.has(id),
-      (id) => {
-        if (!fragmentIds.value.includes(id)) fragmentIds.value = [...fragmentIds.value, id]
-      },
-    ),
-    fragmentManageItems.value,
-  ]
-})
-function removeFragment(id: string) {
-  fragmentIds.value = fragmentIds.value.filter((x) => x !== id)
-}
+// The pool the shared <FragmentSelector> offers: fragments appropriate to the enclosing frame's
+// block type (the "scope"). Falls back to `service` before a frame resolves so the catalog is
+// still browsable.
+const fragmentPool = computed(() => fragments.forBlockType(frame.value?.type ?? 'service'))
 
 // Hide UI-testing pipelines (`tester-ui` / `visual-confirmation`) when the target frame has no
 // UI to exercise — they'd be refused server-side (see utils/pipeline + the backend gate). Also
@@ -544,7 +502,11 @@ watch(open, (isOpen) => {
   docOutlineHints.value = ''
   reviewPrRef.value = ''
   reviewFocus.value = ''
-  fragmentIds.value = []
+  // Pre-seed the best-practice fragments from the enclosing service's standards, so a new task
+  // ships with its service's fragments already selected (and freely add/removable here). The task
+  // OWNS this selection from creation — the engine folds exactly these, without re-unioning the
+  // service's set, so removing one here actually drops it for this task.
+  fragmentIds.value = [...(frame.value?.serviceFragmentIds ?? [])]
   for (const key of Object.keys(docKindFieldValues) as DocKindFieldKey[])
     delete docKindFieldValues[key]
   riskPolicyId.value = ''
@@ -664,7 +626,10 @@ async function add() {
       ...(Object.keys(agentConfigValues.value).length
         ? { agentConfig: agentConfigValues.value }
         : {}),
-      ...(fragmentIds.value.length ? { fragmentIds: [...fragmentIds.value] } : {}),
+      // Always send the (service-seeded, then user-edited) selection — including an empty list,
+      // which means "the user cleared the inherited picks" and must be honoured rather than
+      // re-seeded from the service. The task owns its fragments from here.
+      fragmentIds: [...fragmentIds.value],
       ...(technical.value ? { technical: true } : {}),
     })
     if (block) {
@@ -1058,41 +1023,15 @@ async function add() {
             </div>
           </div>
 
-          <!-- Best-practice fragments pinned on the task at creation, scoped to the frame's type. -->
+          <!-- Best-practice fragments pinned on the task at creation, scoped to the frame's type.
+               Pre-seeded from the enclosing service's standards; the task owns them from here. -->
           <div class="space-y-2">
-            <div class="flex items-center justify-between">
-              <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-                {{ t('board.addTask.bestPractices') }}
-              </span>
-              <UDropdownMenu :items="fragmentMenu">
-                <UButton
-                  color="neutral"
-                  variant="soft"
-                  size="xs"
-                  icon="i-lucide-plus"
-                  trailing-icon="i-lucide-chevron-down"
-                >
-                  {{ t('board.addTask.attach') }}
-                </UButton>
-              </UDropdownMenu>
-            </div>
-            <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
-              <UBadge
-                v-for="f in selectedFragments"
-                :key="f.id"
-                color="primary"
-                variant="subtle"
-                size="sm"
-                class="cursor-pointer"
-                :title="f.summary"
-                @click="removeFragment(f.id)"
-              >
-                {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
-              </UBadge>
-            </div>
-            <p v-else class="text-[11px] text-slate-500">
-              {{ t('board.addTask.bestPracticesHint') }}
-            </p>
+            <FragmentSelector
+              v-model="fragmentIds"
+              :pool="fragmentPool"
+              :label="t('board.addTask.bestPractices')"
+              :empty-text="t('board.addTask.bestPracticesHint')"
+            />
           </div>
 
           <!-- Context documents (ungated; Attach disabled until a source is connected). -->

package/app/components/fragments/FragmentSelector.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+// Shared best-practice prompt-fragment picker: a category-grouped "add" dropdown (with links out
+// to the fragment library) plus the currently-selected fragments as removable badges.
+// Presentational + `v-model`-driven — the caller owns WHERE the selection lives (a task's
+// `fragmentIds`, a service's `serviceFragmentIds`, or a not-yet-created task's local draft) and
+// binds the id list. Authored once and reused by the create-task form and the task/service
+// inspectors so the three pickers can't drift. Ids the catalog no longer resolves still render
+// (labelled by their raw id) so they stay visible and removable.
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { PromptFragment } from '~/types/domain'
+import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
+
+const props = withDefaults(
+  defineProps<{
+    /** The selected fragment ids (`v-model`). */
+    modelValue: string[]
+    /** Candidate pool to offer — e.g. `fragments.forBlockType(type)` or the whole catalog. */
+    pool: PromptFragment[]
+    /** Optional label rendered to the left of the add button (omit when a section supplies it). */
+    label?: string
+    /** Optional text shown when nothing is selected. */
+    emptyText?: string
+  }>(),
+  { label: '', emptyText: '' },
+)
+const emit = defineEmits<{ 'update:modelValue': [string[]] }>()
+
+const fragments = useFragmentsStore()
+const ui = useUiStore()
+const accounts = useAccountsStore()
+const { t } = useI18n()
+
+// The catalog is per-board and invalidated on a workspace switch; (re)load it lazily — a no-op
+// while current.
+onMounted(() => fragments.ensureLoaded())
+
+const selectedFragments = computed(() =>
+  props.modelValue.map((id) => fragments.getFragment(id) ?? { id, title: id, summary: '' }),
+)
+
+// A trailing group that jumps from "attach a fragment" to authoring/editing the library itself
+// (board tier always; account tier when accounts are enabled). Open to every member.
+const manageItems = computed<DropdownMenuItem[]>(() => {
+  const items: DropdownMenuItem[] = [
+    {
+      label: t('inspector.fragments.manageBoard'),
+      icon: 'i-lucide-book-marked',
+      onSelect: () => ui.openFragmentLibrary(),
+    },
+  ]
+  if (accounts.enabled) {
+    items.push({
+      label: t('inspector.fragments.manageAccount'),
+      icon: 'i-lucide-users',
+      onSelect: () => ui.openAccountSettings('fragments'),
+    })
+  }
+  return items
+})
+
+// Picker menu: pool fragments not already selected, grouped into labelled per-category sections,
+// with the management links appended as the final group.
+const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
+  const selected = new Set(props.modelValue)
+  return [
+    ...buildFragmentPickerGroups(props.pool, (id) => selected.has(id), addFragment),
+    manageItems.value,
+  ]
+})
+
+function addFragment(id: string) {
+  if (props.modelValue.includes(id)) return
+  emit('update:modelValue', [...props.modelValue, id])
+}
+
+function removeFragment(id: string) {
+  emit(
+    'update:modelValue',
+    props.modelValue.filter((x) => x !== id),
+  )
+}
+</script>
+
+<template>
+  <div>
+    <div class="mb-1 flex items-center justify-between gap-2">
+      <span v-if="label" class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        {{ label }}
+      </span>
+      <span v-else />
+      <UDropdownMenu :items="fragmentMenu">
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-plus"
+          trailing-icon="i-lucide-chevron-down"
+          data-testid="fragment-add"
+        />
+      </UDropdownMenu>
+    </div>
+    <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
+      <UBadge
+        v-for="f in selectedFragments"
+        :key="f.id"
+        color="primary"
+        variant="subtle"
+        size="sm"
+        class="cursor-pointer"
+        :title="f.summary"
+        data-testid="fragment-badge"
+        @click="removeFragment(f.id)"
+      >
+        {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
+      </UBadge>
+    </div>
+    <div v-else-if="emptyText" class="text-[11px] text-slate-500">
+      {{ emptyText }}
+    </div>
+  </div>
+</template>

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

@@ -1,76 +1,22 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
-import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
+import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 
 // Service-level best-practice fragments (frame blocks). These are the programming
-// standards/guidelines for the whole service; at run time their bodies are folded
-// into the prompt of every `code-aware` agent on tasks under this service. Drawn from
-// the board's merged fragment catalog (built-in ∪ registered ∪ account ∪ workspace,
-// via the fragments store; static pool when the library is off), grouped by category.
-// `defaultOpen` expands the section on surfaces that embed this as the primary content
-// (the add-service modal); the inspector leaves it collapsed.
+// standards/guidelines for the whole service: they SEED a new task's own selection at creation,
+// and at run time their bodies fold into the frame's own `code-aware` runs. Drawn from the
+// board's merged fragment catalog (built-in ∪ registered ∪ account ∪ workspace). `defaultOpen`
+// expands the section on surfaces that embed this as the primary content (the add-service
+// modal); the inspector leaves it collapsed. The shared <FragmentSelector> renders the picker.
 const props = defineProps<{ block: Block; defaultOpen?: boolean }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
-const ui = useUiStore()
-const accounts = useAccountsStore()
 const { t } = useI18n()
 
-onMounted(() => fragments.ensureLoaded())
-
-// An id the catalog no longer resolves (removed/suppressed after selection) still
-// renders — labelled by its raw id — so it stays visible and removable.
-const selectedFragments = computed(() =>
-  (props.block.serviceFragmentIds ?? []).map(
-    (id) => fragments.getFragment(id) ?? { id, title: id, summary: '' },
-  ),
-)
-
-// A trailing group that jumps from "attach a fragment" to authoring/editing the
-// library itself (board tier always; account tier when accounts are enabled).
-// Open to every member — managing fragments is not an admin-only action.
-const manageItems = computed<DropdownMenuItem[]>(() => {
-  const items: DropdownMenuItem[] = [
-    {
-      label: t('inspector.fragments.manageBoard'),
-      icon: 'i-lucide-book-marked',
-      onSelect: () => ui.openFragmentLibrary(),
-    },
-  ]
-  if (accounts.enabled) {
-    items.push({
-      label: t('inspector.fragments.manageAccount'),
-      icon: 'i-lucide-users',
-      onSelect: () => ui.openAccountSettings('fragments'),
-    })
-  }
-  return items
-})
-
-// Picker menu: every pool fragment not already selected, grouped into labelled
-// per-category sections, with the management links appended as the final group.
-const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
-  const selected = new Set(props.block.serviceFragmentIds ?? [])
-  return [
-    ...buildFragmentPickerGroups(fragments.fragments, (id) => selected.has(id), addFragment),
-    manageItems.value,
-  ]
-})
-
-function addFragment(id: string) {
-  const list = props.block.serviceFragmentIds ? [...props.block.serviceFragmentIds] : []
-  if (!list.includes(id)) list.push(id)
-  board.updateBlock(props.block.id, { serviceFragmentIds: list })
-}
-
-function removeFragment(id: string) {
-  if (!props.block.serviceFragmentIds) return
-  board.updateBlock(props.block.id, {
-    serviceFragmentIds: props.block.serviceFragmentIds.filter((x) => x !== id),
-  })
+function setFragments(ids: string[]) {
+  board.updateBlock(props.block.id, { serviceFragmentIds: ids })
 }
 </script>
 
@@ -78,36 +24,14 @@ function removeFragment(id: string) {
   <InspectorSection
     :title="t('inspector.fragments.serviceTitle')"
     :hint="t('inspector.fragments.serviceHint')"
-    :count="selectedFragments.length"
+    :count="(block.serviceFragmentIds ?? []).length"
     :default-open="props.defaultOpen"
   >
-    <template #actions>
-      <UDropdownMenu :items="fragmentMenu">
-        <UButton
-          size="xs"
-          variant="ghost"
-          color="neutral"
-          icon="i-lucide-plus"
-          trailing-icon="i-lucide-chevron-down"
-        />
-      </UDropdownMenu>
-    </template>
-    <div v-if="selectedFragments.length" class="flex flex-wrap gap-1">
-      <UBadge
-        v-for="f in selectedFragments"
-        :key="f.id"
-        color="primary"
-        variant="subtle"
-        size="sm"
-        class="cursor-pointer"
-        :title="f.summary"
-        @click="removeFragment(f.id)"
-      >
-        {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
-      </UBadge>
-    </div>
-    <div v-else class="text-[11px] text-slate-500">
-      {{ t('inspector.fragments.serviceEmpty') }}
-    </div>
+    <FragmentSelector
+      :model-value="block.serviceFragmentIds ?? []"
+      :pool="fragments.fragments"
+      :empty-text="t('inspector.fragments.serviceEmpty')"
+      @update:model-value="setFragments"
+    />
   </InspectorSection>
 </template>

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

@@ -1,78 +1,20 @@
 <script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block } from '~/types/domain'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
-import { buildFragmentPickerGroups } from '~/utils/fragmentPicker'
+import FragmentSelector from '~/components/fragments/FragmentSelector.vue'
 
 const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const fragments = useFragmentsStore()
-const ui = useUiStore()
-const accounts = useAccountsStore()
 const { t } = useI18n()
 
-// The catalog is per-board and invalidated on a workspace switch, so (re)load it when the
-// task inspector mounts — mirrors ServiceFragments; ensureLoaded is a no-op while current.
-onMounted(() => fragments.ensureLoaded())
-
 // ---- best-practice prompt fragments ----------------------------------------
-// Selected fragments, resolved against the catalog. An id the catalog no longer
-// resolves (removed/suppressed after selection) still renders — labelled by its
-// raw id — so it stays visible and removable.
-const selectedFragments = computed(() =>
-  (props.block.fragmentIds ?? []).map(
-    (id) => fragments.getFragment(id) ?? { id, title: id, summary: '' },
-  ),
-)
-
-// A trailing group that jumps from "attach a fragment" to authoring/editing the
-// library itself (board tier always; account tier when accounts are enabled).
-// Open to every member — managing fragments is not an admin-only action.
-const manageItems = computed<DropdownMenuItem[]>(() => {
-  const items: DropdownMenuItem[] = [
-    {
-      label: t('inspector.fragments.manageBoard'),
-      icon: 'i-lucide-book-marked',
-      onSelect: () => ui.openFragmentLibrary(),
-    },
-  ]
-  if (accounts.enabled) {
-    items.push({
-      label: t('inspector.fragments.manageAccount'),
-      icon: 'i-lucide-users',
-      onSelect: () => ui.openAccountSettings('fragments'),
-    })
-  }
-  return items
-})
-
-// Picker menu: fragments suitable for this block's type, not already selected,
-// grouped into labelled per-category sections so the dropdown reads like the catalog,
-// with the management links appended as the final group.
-const fragmentMenu = computed<DropdownMenuItem[][]>(() => {
-  const selected = new Set(props.block.fragmentIds ?? [])
-  return [
-    ...buildFragmentPickerGroups(
-      fragments.forBlockType(props.block.type),
-      (id) => selected.has(id),
-      addFragment,
-    ),
-    manageItems.value,
-  ]
-})
-
-function addFragment(id: string) {
-  const list = props.block.fragmentIds ? [...props.block.fragmentIds] : []
-  if (!list.includes(id)) list.push(id)
-  board.updateBlock(props.block.id, { fragmentIds: list })
-}
-
-function removeFragment(id: string) {
-  if (!props.block.fragmentIds) return
-  board.updateBlock(props.block.id, {
-    fragmentIds: props.block.fragmentIds.filter((x) => x !== id),
-  })
+// The task's OWN selection (seeded from its service at creation, then editable per task). The
+// shared <FragmentSelector> renders the picker; a change persists via updateBlock.
+const fragmentPool = computed(() => fragments.forBlockType(props.block.type))
+function setFragments(ids: string[]) {
+  board.updateBlock(props.block.id, { fragmentIds: ids })
 }
 </script>
 
@@ -97,37 +39,13 @@ function removeFragment(id: string) {
 
     <!-- best practices (prompt fragments) -->
     <div>
-      <div class="mb-1 flex items-center justify-between">
-        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('inspector.structure.bestPractices') }}
-        </span>
-        <UDropdownMenu :items="fragmentMenu">
-          <UButton
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-plus"
-            trailing-icon="i-lucide-chevron-down"
-          />
-        </UDropdownMenu>
-      </div>
-      <div v-if="selectedFragments.length" class="mb-1 flex flex-wrap gap-1">
-        <UBadge
-          v-for="f in selectedFragments"
-          :key="f.id"
-          color="primary"
-          variant="subtle"
-          size="sm"
-          class="cursor-pointer"
-          :title="f.summary"
-          @click="removeFragment(f.id)"
-        >
-          {{ f.title }}<UIcon name="i-lucide-x" class="ms-0.5 h-3 w-3" />
-        </UBadge>
-      </div>
-      <div v-else class="text-[11px] text-slate-500">
-        {{ t('inspector.structure.bestPracticesEmpty') }}
-      </div>
+      <FragmentSelector
+        :model-value="block.fragmentIds ?? []"
+        :pool="fragmentPool"
+        :label="t('inspector.structure.bestPractices')"
+        :empty-text="t('inspector.structure.bestPracticesEmpty')"
+        @update:model-value="setFragments"
+      />
       <p class="mt-1 text-[11px] leading-snug text-slate-500">
         {{ t('inspector.structure.bestPracticesHint') }}
       </p>

package/app/components/prReview/PrReviewWindow.vue

@@ -17,7 +17,9 @@ import type {
   PrReviewResolution,
   PrReviewSeverity,
   PrReviewStepState,
+  StepSubtasks,
 } from '~/types/execution'
+import { subtaskIconClass } from '~/utils/pipelineRender'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 
 const execution = useExecutionStore()
@@ -44,6 +46,18 @@ const step = computed(() => {
 const state = computed<PrReviewStepState | null>(() => step.value?.prReview ?? null)
 const status = computed(() => state.value?.status ?? null)
 const awaiting = computed(() => status.value === 'awaiting_selection')
+// The reviewer's live todo list while it works, streamed onto the step. Its entries are the
+// cohesive slices/chunks the agent grouped the diff into (plus a final "aggregate" step), so it
+// surfaces slices-reviewed-so-far progress during the `reviewing` phase — richer than a spinner.
+const subtasks = computed<StepSubtasks | null>(() => step.value?.subtasks ?? null)
+const hasProgress = computed(() => (subtasks.value?.total ?? 0) > 0)
+
+/** Icon per todo-item status (matches the pipeline timeline's live subtask breakdown). */
+const ITEM_ICON: Record<string, string> = {
+  completed: 'i-lucide-check-circle-2',
+  in_progress: 'i-lucide-loader-circle',
+  pending: 'i-lucide-circle',
+}
 // A resolution is executing (the Fixer is committing, or comments are being posted) — show a
 // working state between the human's choice and the run advancing/the stream echoing `done`.
 const working = computed(() => status.value === 'fixing' || status.value === 'posting')
@@ -145,14 +159,82 @@ async function onResolve(action: PrReviewResolution): Promise<void> {
     </template>
 
     <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-      <!-- Reviewing: the read-only reviewer is still working. -->
+      <!-- Reviewing: the read-only reviewer is still working. Once it starts maintaining its
+           per-slice todo list, surface the live chunk progress (slices reviewed / total + the
+           breakdown) instead of a bare spinner. -->
       <div
         v-if="status === 'reviewing'"
-        class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+        data-testid="pr-review-reviewing"
+        class="flex h-full flex-col"
       >
-        <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
-        <p class="text-sm">{{ t('prReview.reviewing.title') }}</p>
-        <p class="max-w-sm text-[11px] text-slate-500">{{ t('prReview.reviewing.hint') }}</p>
+        <!-- Live chunk progress once the reviewer has planned its slices. -->
+        <div v-if="hasProgress" class="py-2">
+          <div class="mb-1 flex items-center gap-2 text-sm text-slate-200">
+            <UIcon
+              name="i-lucide-loader-circle"
+              class="h-4 w-4 shrink-0 animate-spin text-indigo-300"
+            />
+            <span>{{ t('prReview.reviewing.title') }}</span>
+          </div>
+          <p class="mb-3 text-[11px] text-slate-500">{{ t('prReview.reviewing.hint') }}</p>
+
+          <div class="flex items-center justify-between text-[11px] text-slate-400">
+            <span data-testid="pr-review-chunk-count">
+              {{
+                t('prReview.reviewing.chunks', {
+                  completed: subtasks!.completed,
+                  total: subtasks!.total,
+                })
+              }}
+            </span>
+            <span v-if="subtasks!.inProgress > 0" class="text-indigo-300">
+              {{ t('prReview.reviewing.inProgress', { count: subtasks!.inProgress }) }}
+            </span>
+          </div>
+          <div class="mt-1 h-1.5 overflow-hidden rounded-full bg-slate-700/60">
+            <div
+              class="h-full rounded-full bg-indigo-400 transition-all duration-500"
+              :style="{ width: `${(subtasks!.completed / subtasks!.total) * 100}%` }"
+            />
+          </div>
+
+          <!-- The slice/todo breakdown the agent is working through. -->
+          <ul
+            v-if="subtasks!.items?.length"
+            class="mt-3 space-y-1.5"
+            data-testid="pr-review-chunks"
+          >
+            <li
+              v-for="(item, i) in subtasks!.items"
+              :key="i"
+              class="flex items-start gap-1.5 text-[12px]"
+              :class="
+                item.status === 'completed'
+                  ? 'text-slate-500 line-through'
+                  : item.status === 'in_progress'
+                    ? 'text-slate-100'
+                    : 'text-slate-400'
+              "
+            >
+              <UIcon
+                :name="ITEM_ICON[item.status]"
+                class="mt-0.5 h-3.5 w-3.5 shrink-0"
+                :class="subtaskIconClass(item.status, false)"
+              />
+              <span>{{ item.label }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Before the reviewer has planned its slices: the cold-start spinner. -->
+        <div
+          v-else
+          class="flex h-full flex-col items-center justify-center gap-2 py-10 text-center text-slate-400"
+        >
+          <UIcon name="i-lucide-loader-circle" class="h-8 w-8 animate-spin opacity-60" />
+          <p class="text-sm">{{ t('prReview.reviewing.title') }}</p>
+          <p class="max-w-sm text-[11px] text-slate-500">{{ t('prReview.reviewing.hint') }}</p>
+        </div>
       </div>
 
       <!-- A resolution is executing: the Fixer is committing / comments are being posted. -->

package/app/stores/board.ts

@@ -241,7 +241,10 @@ export const useBoardStore = defineStore('board', () => {
       ...(options?.modelPresetId ? { modelPresetId: options.modelPresetId } : {}),
       ...(options?.pipelineId ? { pipelineId: options.pipelineId } : {}),
       ...(options?.agentConfig ? { agentConfig: options.agentConfig } : {}),
-      ...(options?.fragmentIds?.length ? { fragmentIds: options.fragmentIds } : {}),
+      // Forward the selection when the caller provides one (the create form always does, even
+      // when empty — an explicit clear the backend must honour rather than re-seed); omit only
+      // when a caller doesn't manage fragments at all (then the backend seeds from the service).
+      ...(options?.fragmentIds !== undefined ? { fragmentIds: options.fragmentIds } : {}),
       ...(options?.technical ? { technical: true } : {}),
     })
     upsert(block)

package/i18n/locales/de.json

@@ -4936,7 +4936,9 @@
     "line": "Zeile {line}",
     "reviewing": {
       "title": "Pull Request wird geprüft…",
-      "hint": "Der Diff wird in zusammenhängende Teile zerlegt und einzeln geprüft."
+      "hint": "Der Diff wird in zusammenhängende Teile zerlegt und einzeln geprüft.",
+      "chunks": "{completed} von {total} Abschnitten geprüft",
+      "inProgress": "{count} in Bearbeitung"
     },
     "fixing": {
       "title": "Ausgewählte Befunde werden behoben…",

package/i18n/locales/en.json

@@ -5065,7 +5065,9 @@
     "line": "line {line}",
     "reviewing": {
       "title": "Reviewing the pull request…",
-      "hint": "Slicing the diff into cohesive chunks and reviewing each one."
+      "hint": "Slicing the diff into cohesive chunks and reviewing each one.",
+      "chunks": "{completed} of {total} chunks reviewed",
+      "inProgress": "{count} in progress"
     },
     "fixing": {
       "title": "Fixing the selected findings…",

package/i18n/locales/es.json

@@ -4924,7 +4924,9 @@
     "line": "línea {line}",
     "reviewing": {
       "title": "Revisando el pull request…",
-      "hint": "Dividiendo el diff en bloques coherentes y revisando cada uno."
+      "hint": "Dividiendo el diff en bloques coherentes y revisando cada uno.",
+      "chunks": "{completed} de {total} fragmentos revisados",
+      "inProgress": "{count} en curso"
     },
     "fixing": {
       "title": "Corrigiendo los hallazgos seleccionados…",

package/i18n/locales/fr.json

@@ -4924,7 +4924,9 @@
     "line": "ligne {line}",
     "reviewing": {
       "title": "Revue de la pull request…",
-      "hint": "Découpage du diff en blocs cohérents et revue de chacun."
+      "hint": "Découpage du diff en blocs cohérents et revue de chacun.",
+      "chunks": "{completed} sur {total} sections examinées",
+      "inProgress": "{count} en cours"
     },
     "fixing": {
       "title": "Correction des points sélectionnés…",

package/i18n/locales/he.json

@@ -4935,7 +4935,9 @@
     "line": "שורה {line}",
     "reviewing": {
       "title": "בודק את בקשת המשיכה…",
-      "hint": "מחלק את ההבדלים לקטעים לכידים ובודק כל אחד."
+      "hint": "מחלק את ההבדלים לקטעים לכידים ובודק כל אחד.",
+      "chunks": "{completed} מתוך {total} מקטעים נבדקו",
+      "inProgress": "{count} בתהליך"
     },
     "fixing": {
       "title": "מתקן את הממצאים שנבחרו…",

package/i18n/locales/it.json

@@ -4936,7 +4936,9 @@
     "line": "riga {line}",
     "reviewing": {
       "title": "Revisione della pull request…",
-      "hint": "Suddivisione del diff in blocchi coerenti e revisione di ciascuno."
+      "hint": "Suddivisione del diff in blocchi coerenti e revisione di ciascuno.",
+      "chunks": "{completed} di {total} sezioni esaminate",
+      "inProgress": "{count} in corso"
     },
     "fixing": {
       "title": "Correzione dei rilievi selezionati…",

package/i18n/locales/ja.json

@@ -4936,7 +4936,9 @@
     "line": "{line}行目",
     "reviewing": {
       "title": "プルリクエストをレビュー中…",
-      "hint": "差分をまとまりのある単位に分割し、各単位をレビューしています。"
+      "hint": "差分をまとまりのある単位に分割し、各単位をレビューしています。",
+      "chunks": "{total} 個中 {completed} 個のチャンクをレビュー済み",
+      "inProgress": "{count} 件処理中"
     },
     "fixing": {
       "title": "選択した指摘を修正中…",

package/i18n/locales/pl.json

@@ -4924,7 +4924,9 @@
     "line": "wiersz {line}",
     "reviewing": {
       "title": "Przeglądanie pull requesta…",
-      "hint": "Dzielenie zmian na spójne części i przeglądanie każdej z nich."
+      "hint": "Dzielenie zmian na spójne części i przeglądanie każdej z nich.",
+      "chunks": "Sprawdzono {completed} z {total} fragmentów",
+      "inProgress": "{count} w toku"
     },
     "fixing": {
       "title": "Naprawianie wybranych uwag…",

package/i18n/locales/tr.json

@@ -4936,7 +4936,9 @@
     "line": "satır {line}",
     "reviewing": {
       "title": "Pull request inceleniyor…",
-      "hint": "Fark tutarlı parçalara bölünüp her biri inceleniyor."
+      "hint": "Fark tutarlı parçalara bölünüp her biri inceleniyor.",
+      "chunks": "{total} bölümden {completed} tanesi incelendi",
+      "inProgress": "{count} devam ediyor"
     },
     "fixing": {
       "title": "Seçili bulgular düzeltiliyor…",

package/i18n/locales/uk.json

@@ -4924,7 +4924,9 @@
     "line": "рядок {line}",
     "reviewing": {
       "title": "Перевірка pull request…",
-      "hint": "Поділ змін на цілісні частини та огляд кожної з них."
+      "hint": "Поділ змін на цілісні частини та огляд кожної з них.",
+      "chunks": "Перевірено {completed} з {total} фрагментів",
+      "inProgress": "{count} у процесі"
     },
     "fixing": {
       "title": "Виправлення вибраних зауважень…",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.143.1",
+  "version": "0.144.1",
   "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",
@@ -40,7 +40,7 @@
     "valibot": "^1.4.2",
     "vue": "3.5.40",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.152.0"
+    "@cat-factory/contracts": "0.152.1"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.2",