@cat-factory/app 0.165.0 → 0.167.0

package/app/components/board/AddTaskModal.vue

@@ -27,7 +27,7 @@ import type { AppSlots, ResultViewContribution } from '~/modular/slots'
 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 RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import { parseConflict } from '~/composables/usePipelineErrorToast'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 
@@ -334,33 +334,13 @@ const riskPolicyId = ref('')
 const modelPresetId = ref('')
 const pipelineId = ref('')
 
+// The "pick nothing" row names the default policy it resolves to; the picker's detail pane
+// explains what that policy does, so the row itself stays a bare name.
 const defaultPresetLabel = computed(() =>
   riskPolicies.defaultPreset
-    ? t('board.addTask.defaultPreset', {
-        name: riskPolicies.defaultPreset.name,
-        thresholds: riskPolicySummary(riskPolicies.defaultPreset),
-      })
+    ? t('board.addTask.defaultPreset', { name: riskPolicies.defaultPreset.name })
     : t('board.addTask.workspaceDefault'),
 )
-const presetMenu = computed(() => [
-  [
-    {
-      label: defaultPresetLabel.value,
-      icon: 'i-lucide-rotate-ccw',
-      onSelect: () => (riskPolicyId.value = ''),
-    },
-    ...riskPolicies.presets.map((p) => ({
-      label: riskPolicyOptionLabel(p),
-      icon: 'i-lucide-git-merge',
-      onSelect: () => (riskPolicyId.value = p.id),
-    })),
-  ],
-])
-const selectedPresetLabel = computed(() => {
-  if (!riskPolicyId.value) return defaultPresetLabel.value
-  const picked = riskPolicies.presets.find((p) => p.id === riskPolicyId.value)
-  return picked ? riskPolicyOptionLabel(picked) : t('board.addTask.workspaceDefault')
-})
 
 // Model preset: which model each agent runs on. Empty = workspace default preset.
 const defaultModelPresetLabel = computed(() =>
@@ -1146,18 +1126,14 @@ function openReviewFrictionDialog(conflict: NonNullable<ReturnType<typeof parseC
 
             <!-- A review task merges nothing, so its risk (merge) policy is meaningless — omit it. -->
             <UFormField v-if="!isReview" :label="t('board.addTask.mergePolicy')">
-              <UDropdownMenu :items="presetMenu" class="w-full">
-                <UButton
-                  color="neutral"
-                  variant="subtle"
-                  size="sm"
-                  icon="i-lucide-git-merge"
-                  trailing-icon="i-lucide-chevron-down"
-                  class="w-full justify-between"
-                >
-                  {{ selectedPresetLabel }}
-                </UButton>
-              </UDropdownMenu>
+              <RiskPolicyPicker
+                :model-value="riskPolicyId"
+                :options="riskPolicies.presets"
+                :default-policy="riskPolicies.defaultPreset"
+                :none-label="defaultPresetLabel"
+                trigger-class="w-full justify-between"
+                @update:model-value="riskPolicyId = $event"
+              />
             </UFormField>
 
             <UFormField :label="t('board.addTask.modelPreset')">

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

@@ -3,9 +3,9 @@ import { computed, onMounted } from 'vue'
 import { connectionNeighborIds } from '@cat-factory/contracts'
 import type { Block } from '~/types/domain'
 import type { WritebackOverride } from '~/types/tracker'
-import { riskPolicyOptionLabel, riskPolicySummary } from '~/utils/riskPolicy'
 import { pipelineAllowedForManualStart } from '~/utils/pipeline'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
+import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import TaskAprioriBranches from '~/components/panels/inspector/TaskAprioriBranches.vue'
 
 const props = defineProps<{ block: Block }>()
@@ -67,25 +67,13 @@ function setAutoStartDependents(value: boolean) {
 // budget. None selected → the workspace default preset. (The old confidence-based
 // auto-merge threshold is gone; the `merger` step gates on this policy instead.)
 const selectedPreset = computed(() => riskPolicies.resolve(props.block.riskPolicyId))
-const presetMenu = computed(() => [
-  [
-    {
-      label: riskPolicies.defaultPreset
-        ? t('inspector.runSettings.defaultPresetThresholds', {
-            name: riskPolicies.defaultPreset.name,
-            thresholds: riskPolicySummary(riskPolicies.defaultPreset),
-          })
-        : t('inspector.runSettings.workspaceDefault'),
-      icon: 'i-lucide-rotate-ccw',
-      onSelect: () => setPreset(''),
-    },
-    ...riskPolicies.presets.map((p) => ({
-      label: riskPolicyOptionLabel(p),
-      icon: 'i-lucide-git-merge',
-      onSelect: () => setPreset(p.id),
-    })),
-  ],
-])
+// The "pick nothing" row names the default policy it resolves to; the picker's detail pane
+// explains what that policy does, so the row itself stays a bare name.
+const defaultPresetLabel = computed(() =>
+  riskPolicies.defaultPreset
+    ? t('inspector.runSettings.defaultRiskPolicy', { name: riskPolicies.defaultPreset.name })
+    : t('inspector.runSettings.workspaceDefault'),
+)
 function setPreset(id: string) {
   board.updateBlock(props.block.id, { riskPolicyId: id })
 }
@@ -111,7 +99,7 @@ const modelPresetMenu = computed(() => [
   [
     {
       label: modelPresets.defaultPreset
-        ? t('inspector.runSettings.defaultPreset', { name: modelPresets.defaultPreset.name })
+        ? t('inspector.runSettings.defaultModelPreset', { name: modelPresets.defaultPreset.name })
         : t('inspector.runSettings.workspaceDefault'),
       icon: 'i-lucide-rotate-ccw',
       onSelect: () => setModelPreset(''),
@@ -308,24 +296,44 @@ const technicalLabel = computed(() => {
         <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
           {{ t('inspector.runSettings.mergePolicy') }}
         </span>
-        <UDropdownMenu :items="presetMenu">
-          <UButton
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-git-merge"
-            trailing-icon="i-lucide-chevron-down"
-          />
-        </UDropdownMenu>
+        <RiskPolicyPicker
+          :model-value="block.riskPolicyId ?? ''"
+          :options="riskPolicies.presets"
+          :default-policy="riskPolicies.defaultPreset"
+          :none-label="defaultPresetLabel"
+          @update:model-value="setPreset"
+        >
+          <template #trigger>
+            <UButton
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-git-merge"
+              trailing-icon="i-lucide-chevron-down"
+            />
+          </template>
+        </RiskPolicyPicker>
       </div>
       <div v-if="selectedPreset" class="text-[11px] text-slate-400">
-        <i18n-t keypath="inspector.runSettings.riskPolicyDetail" tag="span" scope="global">
+        <i18n-t
+          v-if="selectedPreset.autoMergeEnabled"
+          keypath="inspector.runSettings.riskPolicyDetail"
+          tag="span"
+          scope="global"
+        >
           <template #name>
             <span class="text-slate-300">{{ selectedPreset.name }}</span>
           </template>
-          <template #complexity>{{ n(selectedPreset.maxComplexity, { key: 'percent' }) }}</template>
           <template #risk>{{ n(selectedPreset.maxRisk, { key: 'percent' }) }}</template>
           <template #impact>{{ n(selectedPreset.maxImpact, { key: 'percent' }) }}</template>
+          <template #complexity>{{ n(selectedPreset.maxComplexity, { key: 'percent' }) }}</template>
+          <template #attempts>{{ selectedPreset.ciMaxAttempts }}</template>
+        </i18n-t>
+        <!-- Auto-merge off: the ceilings never apply, so quoting them would misdescribe it. -->
+        <i18n-t v-else keypath="inspector.runSettings.riskPolicyManual" tag="span" scope="global">
+          <template #name>
+            <span class="text-slate-300">{{ selectedPreset.name }}</span>
+          </template>
           <template #attempts>{{ selectedPreset.ciMaxAttempts }}</template>
         </i18n-t>
         <span v-if="!block.riskPolicyId" class="text-slate-500">{{

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -662,6 +662,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           >
         </i18n-t>
 
+        <!-- Why the findings never ask a technical question: this gate settles the
+                 product/business layer, and the architect/researcher steps settle the rest.
+                 Without this a reader reads the missing technical questions as an oversight. -->
+        <p class="mb-4 text-xs text-slate-500">{{ t('requirements.scopeNote') }}</p>
+
         <!-- empty state — the reviewer runs automatically as the first pipeline
                  gate step, so there's nothing to do here until then -->
         <div

package/app/components/riskPolicy/RiskPolicyPicker.logic.spec.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+import type { RiskPolicy } from '~/types/merge'
+import { resolveRiskPolicyPicker } from '~/components/riskPolicy/RiskPolicyPicker.logic'
+
+// The resolver reads ids only, so the fixture carries just enough to be identifiable.
+const policy = (id: string, name: string) => ({ id, name }) as unknown as RiskPolicy
+
+const balanced = policy('mp_balanced', 'Balanced')
+const strict = policy('mp_strict', 'Strict')
+const options = [balanced, strict]
+
+describe('resolveRiskPolicyPicker', () => {
+  it('previews the active row over the selection', () => {
+    const state = resolveRiskPolicyPicker({
+      options,
+      defaultPolicy: balanced,
+      modelValue: 'mp_balanced',
+      activeId: 'mp_strict',
+    })
+    expect(state).toEqual({ policy: strict, viaWorkspaceDefault: false })
+  })
+
+  it('falls back to the selection when no row is active', () => {
+    const state = resolveRiskPolicyPicker({
+      options,
+      defaultPolicy: balanced,
+      modelValue: 'mp_strict',
+      activeId: undefined,
+    })
+    expect(state).toEqual({ policy: strict, viaWorkspaceDefault: false })
+  })
+
+  it('previews the workspace default for the "pick nothing" row, captioned', () => {
+    const state = resolveRiskPolicyPicker({
+      options,
+      defaultPolicy: balanced,
+      modelValue: 'mp_strict',
+      activeId: '',
+    })
+    expect(state).toEqual({ policy: balanced, viaWorkspaceDefault: true })
+  })
+
+  it('previews the workspace default when nothing is selected at all', () => {
+    const state = resolveRiskPolicyPicker({
+      options,
+      defaultPolicy: balanced,
+      modelValue: '',
+      activeId: undefined,
+    })
+    expect(state).toEqual({ policy: balanced, viaWorkspaceDefault: true })
+  })
+
+  it('resolves a DELETED policy to the workspace default, as the run engine does', () => {
+    // A task can hold a riskPolicyId whose policy was since removed from the library. The
+    // store's resolve() hands that task the default, so the pane must not claim there is no
+    // policy — that would describe the run wrongly on the one surface explaining it.
+    const state = resolveRiskPolicyPicker({
+      options,
+      defaultPolicy: balanced,
+      modelValue: 'mp_deleted',
+      activeId: undefined,
+    })
+    expect(state).toEqual({ policy: balanced, viaWorkspaceDefault: true })
+  })
+
+  it('reports nothing to preview only when the workspace has no default at all', () => {
+    const state = resolveRiskPolicyPicker({
+      options: [],
+      defaultPolicy: null,
+      modelValue: '',
+      activeId: '',
+    })
+    expect(state).toEqual({ policy: null, viaWorkspaceDefault: false })
+  })
+})

package/app/components/riskPolicy/RiskPolicyPicker.logic.ts

@@ -0,0 +1,47 @@
+// Pure resolution behind <RiskPolicyPicker>'s detail pane.
+//
+// Kept out of the SFC because the interesting case is not the happy path: a task can hold a
+// `riskPolicyId` naming a policy that has since been DELETED from the workspace library, and
+// what the pane shows then has to agree with what the run engine would actually do. The
+// riskPolicies store's `resolve()` falls back to the workspace default for both an empty id
+// and a dangling one; this mirrors that, so the picker can never tell the user "no risk policy
+// configured" about a task the default is quietly governing.
+import type { RiskPolicy } from '~/types/merge'
+
+export interface RiskPolicyPickerState {
+  /** The policy the detail pane renders, or `null` when the workspace has none at all. */
+  policy: RiskPolicy | null
+  /**
+   * True when `policy` is the workspace default standing in for a row that names no live
+   * policy of its own — the pane captions it, so the user knows why they are looking at a
+   * policy they did not point at.
+   */
+  viaWorkspaceDefault: boolean
+}
+
+export interface RiskPolicyPickerInput {
+  /** The policies offered (the workspace's library). */
+  options: readonly RiskPolicy[]
+  /** The workspace default, resolved by the caller. `null` when the workspace has none. */
+  defaultPolicy: RiskPolicy | null
+  /** The selected policy id, or `''` for the "workspace default" row. */
+  modelValue: string
+  /**
+   * The row the pointer or keyboard focus is on: an id, `''` for the "workspace default"
+   * row, or `undefined` when neither is on a row (fall back to the selection).
+   */
+  activeId: string | undefined
+}
+
+/**
+ * Resolve what the detail pane shows: the active row's policy, else the selected one, else
+ * the workspace default. An id that resolves to nothing — empty (the explicit "workspace
+ * default" row) or dangling (a deleted policy) — takes the default, since that is the policy
+ * the task is governed by either way.
+ */
+export function resolveRiskPolicyPicker(input: RiskPolicyPickerInput): RiskPolicyPickerState {
+  const id = input.activeId ?? input.modelValue
+  const named = id ? input.options.find((p) => p.id === id) : undefined
+  if (named) return { policy: named, viaWorkspaceDefault: false }
+  return { policy: input.defaultPolicy, viaWorkspaceDefault: !!input.defaultPolicy }
+}

package/app/components/riskPolicy/RiskPolicyPicker.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+// The rich risk-policy picker used wherever a task's merge policy is chosen (add-task modal,
+// inspector run settings). A master-detail popover mirroring <PipelinePicker>: the left column
+// lists the policies by NAME ONLY (plus a "workspace default" row), and hovering a row reveals
+// that policy's ceilings and what they mean in the right column. Cramming the thresholds into
+// the option line itself made every row an unreadable run of abbreviated percentages; the
+// detail pane is where they belong. The trigger is customizable via the `#trigger` slot (the
+// inspector uses a bare icon button; the modal a full-width labelled one).
+//
+// The detail pane follows FOCUS as well as the pointer. Moving the numbers off the option
+// line would otherwise put them out of reach of anyone driving the list from the keyboard,
+// who never fires a `mouseenter` — the thresholds are the whole point of the pane, so they
+// cannot be pointer-only.
+import { computed, ref } from 'vue'
+import type { RiskPolicy } from '~/types/merge'
+import RiskPolicyPreview from '~/components/riskPolicy/RiskPolicyPreview.vue'
+import { resolveRiskPolicyPicker } from '~/components/riskPolicy/RiskPolicyPicker.logic'
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected policy id, or '' for the "workspace default" option. */
+    modelValue: string
+    /** The policies offered (the workspace's library). */
+    options: RiskPolicy[]
+    /**
+     * The workspace default a task picking nothing is governed by, resolved by the consumer
+     * (which already reads it off the store to build `noneLabel`) so the two can't disagree.
+     */
+    defaultPolicy: RiskPolicy | null
+    /** Label for the "workspace default" row (the consumer names the resolved default). */
+    noneLabel: string
+    /** Extra classes for the default trigger button (e.g. full-width in the modal). */
+    triggerClass?: string
+  }>(),
+  { triggerClass: '' },
+)
+
+const emit = defineEmits<{ 'update:modelValue': [string] }>()
+const { t } = useI18n()
+
+const open = ref(false)
+// The row the pointer or the keyboard is currently on, driving the right-column preview.
+// `undefined` ⇒ fall back to the selected policy; the sentinel '' means the "workspace
+// default" row is active.
+const activeId = ref<string | undefined>(undefined)
+
+const selected = computed(() => props.options.find((p) => p.id === props.modelValue))
+const triggerLabel = computed(() => selected.value?.name ?? props.noneLabel)
+
+const preview = computed(() =>
+  resolveRiskPolicyPicker({
+    options: props.options,
+    defaultPolicy: props.defaultPolicy,
+    modelValue: props.modelValue,
+    activeId: activeId.value,
+  }),
+)
+
+/**
+ * Tabbing BETWEEN two rows fires `focusout` on the one being left, so only focus leaving the
+ * panel altogether may drop the preview back to the selection.
+ */
+function onPanelFocusOut(event: FocusEvent) {
+  const panel = event.currentTarget
+  const next = event.relatedTarget
+  if (panel instanceof Node && next instanceof Node && panel.contains(next)) return
+  activeId.value = undefined
+}
+
+function choose(id: string) {
+  emit('update:modelValue', id)
+  open.value = false
+}
+</script>
+
+<template>
+  <UPopover v-model:open="open" :content="{ align: 'start' }">
+    <slot name="trigger" :label="triggerLabel">
+      <UButton
+        color="neutral"
+        variant="subtle"
+        size="sm"
+        icon="i-lucide-git-merge"
+        trailing-icon="i-lucide-chevron-down"
+        :class="triggerClass"
+        data-testid="risk-policy-picker-trigger"
+      >
+        {{ triggerLabel }}
+      </UButton>
+    </slot>
+
+    <template #content>
+      <div
+        class="flex max-h-[24rem] w-[min(40rem,94vw)]"
+        data-testid="risk-policy-picker-panel"
+        @mouseleave="activeId = undefined"
+        @focusout="onPanelFocusOut"
+      >
+        <!-- left: selectable options, NAME ONLY -->
+        <ul class="w-1/2 shrink-0 overflow-y-auto border-e border-slate-800 p-1">
+          <li>
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-slate-800/60"
+              :class="modelValue ? 'text-slate-300' : 'text-slate-100'"
+              data-testid="risk-policy-option-none"
+              @mouseenter="activeId = ''"
+              @focus="activeId = ''"
+              @click="choose('')"
+            >
+              <UIcon name="i-lucide-rotate-ccw" class="h-4 w-4 shrink-0 text-slate-400" />
+              <span class="flex-1 truncate">{{ noneLabel }}</span>
+              <UIcon
+                v-if="!modelValue"
+                name="i-lucide-check"
+                class="h-4 w-4 shrink-0 text-primary-400"
+              />
+            </button>
+          </li>
+          <li v-for="p in options" :key="p.id">
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm hover:bg-slate-800/60"
+              :class="modelValue === p.id ? 'text-slate-100' : 'text-slate-300'"
+              :data-testid="`risk-policy-option-${p.id}`"
+              @mouseenter="activeId = p.id"
+              @focus="activeId = p.id"
+              @click="choose(p.id)"
+            >
+              <UIcon name="i-lucide-git-merge" class="h-4 w-4 shrink-0 text-slate-400" />
+              <span class="flex-1 truncate">{{ p.name }}</span>
+              <UIcon
+                v-if="modelValue === p.id"
+                name="i-lucide-check"
+                class="h-4 w-4 shrink-0 text-primary-400"
+              />
+            </button>
+          </li>
+        </ul>
+
+        <!-- right: what the active (or selected) policy actually does -->
+        <div class="w-1/2 overflow-y-auto p-3">
+          <template v-if="preview.policy">
+            <p
+              v-if="preview.viaWorkspaceDefault"
+              class="mb-2 text-[11px] leading-snug text-slate-500"
+            >
+              {{ t('riskPolicy.picker.workspaceDefaultCaption') }}
+            </p>
+            <RiskPolicyPreview :policy="preview.policy" />
+          </template>
+          <div v-else class="text-[12px] leading-snug text-slate-500">
+            {{ t('riskPolicy.picker.noneHint') }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/app/components/riskPolicy/RiskPolicyPreview.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+// A compact, read-only summary of a risk policy: the three auto-merge ceilings grouped
+// together, plus prose saying what clearing them actually DOES (the pull request merges
+// without waiting for a human review). Shared by the risk-policy picker's hover preview so
+// "what this policy means" is explained the same way everywhere — the <PipelinePreview>
+// counterpart for merge policy.
+//
+// A policy with auto-merge off has no thresholds to explain (the master switch wins before
+// any score is compared), so it says so instead of listing ceilings that never apply.
+import { computed } from 'vue'
+import type { RiskPolicy } from '~/types/merge'
+import { riskPolicyCeilings, type RiskPolicyAxis } from '~/utils/riskPolicy'
+
+const props = defineProps<{ policy: RiskPolicy }>()
+const { t, n } = useI18n()
+
+// Exhaustive over the axis union with LITERAL keys, so both i18n drift guards apply: the
+// typed-key check catches a renamed key, and the Record catches a new axis.
+const AXIS_LABEL: Record<RiskPolicyAxis, () => string> = {
+  risk: () => t('riskPolicy.preview.axis.risk'),
+  impact: () => t('riskPolicy.preview.axis.impact'),
+  complexity: () => t('riskPolicy.preview.axis.complexity'),
+}
+
+const ceilings = computed(() =>
+  riskPolicyCeilings(props.policy).map((c) => ({ ...c, label: AXIS_LABEL[c.axis]() })),
+)
+</script>
+
+<template>
+  <div class="space-y-3" data-testid="risk-policy-preview">
+    <div class="flex items-center gap-1.5">
+      <span class="text-sm font-semibold text-slate-100">{{ policy.name }}</span>
+      <UBadge v-if="policy.isDefault" size="sm" variant="soft" color="neutral">
+        {{ t('riskPolicy.preview.defaultBadge') }}
+      </UBadge>
+    </div>
+
+    <!-- the three ceilings, grouped under one heading that names what they are -->
+    <div v-if="policy.autoMergeEnabled">
+      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-slate-500">
+        <UIcon name="i-lucide-git-merge" class="h-3 w-3" />
+        {{ t('riskPolicy.preview.autoMergeHeading') }}
+      </div>
+      <dl class="space-y-1">
+        <div
+          v-for="c in ceilings"
+          :key="c.axis"
+          class="flex items-baseline justify-between gap-3 rounded bg-slate-800/70 px-1.5 py-0.5 text-[12px]"
+        >
+          <dt class="text-slate-300">{{ c.label }}</dt>
+          <dd class="tabular-nums text-slate-100">
+            {{ t('riskPolicy.preview.ceiling', { value: n(c.max, { key: 'percent' }) }) }}
+          </dd>
+        </div>
+      </dl>
+      <p class="mt-1.5 text-[12px] leading-snug text-slate-400">
+        {{ t('riskPolicy.preview.autoMergeExplainer') }}
+      </p>
+    </div>
+    <div v-else>
+      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-slate-500">
+        <UIcon name="i-lucide-user-check" class="h-3 w-3" />
+        {{ t('riskPolicy.preview.manualHeading') }}
+      </div>
+      <p class="text-[12px] leading-snug text-slate-400">
+        {{ t('riskPolicy.preview.manualExplainer') }}
+      </p>
+    </div>
+
+    <div>
+      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-slate-500">
+        <UIcon name="i-lucide-wrench" class="h-3 w-3" />
+        {{ t('riskPolicy.preview.ciHeading') }}
+      </div>
+      <p class="text-[12px] leading-snug text-slate-400">
+        {{
+          t('riskPolicy.preview.ciAttempts', { count: policy.ciMaxAttempts }, policy.ciMaxAttempts)
+        }}
+      </p>
+    </div>
+  </div>
+</template>