@cat-factory/app 0.267.0 → 0.268.0

package/app/components/layout/AccountRiskPolicySettings.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+// Account-tier risk policies (ADR 0055): the merge postures an org authors once, which every board
+// in the account inherits read-only and may clone or hide. A body-only section rendered in the "Risk
+// policies" tab of AccountSettingsPanel.
+//
+// The SAME editor rows the board panel uses, with the default-claim controls off: which policy
+// governs a task that pinned none is a per-board question, so an account row holds no default and a
+// promote button here would be a control over a decision this tier never makes.
+import { computed, onMounted, ref, watch } from 'vue'
+import type {
+  CreateRiskPolicyInput,
+  RiskPolicyLibraryEntry,
+  UpdateRiskPolicyInput,
+} from '~/types/merge'
+import RiskPolicyCreateForm from '~/components/settings/RiskPolicyCreateForm.vue'
+import RiskPolicyEditorRow from '~/components/settings/RiskPolicyEditorRow.vue'
+
+const props = defineProps<{ accountId: string }>()
+
+const { t } = useI18n()
+const store = useAccountRiskPoliciesStore()
+const toast = useToast()
+const { present } = usePipelineErrorToast()
+const { confirm } = useConfirm()
+
+const busy = ref<string | null>(null)
+const creating = ref(false)
+
+const policies = computed<RiskPolicyLibraryEntry[]>(() => store.policies(props.accountId))
+
+onMounted(() => void load())
+// Switching accounts re-reads rather than showing the previous account's library.
+watch(
+  () => props.accountId,
+  () => void load(),
+)
+
+async function load() {
+  try {
+    await store.load(props.accountId)
+  } catch (e) {
+    present(e, 'layout.accountRiskPolicies.loadFailed')
+  }
+}
+
+async function save(policy: RiskPolicyLibraryEntry, patch: UpdateRiskPolicyInput) {
+  busy.value = policy.id
+  try {
+    await store.update(props.accountId, policy.id, patch)
+    toast.add({
+      title: t('settings.riskPolicy.toast.saved'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    present(e, 'settings.riskPolicy.toast.saveFailed')
+  } finally {
+    busy.value = null
+  }
+}
+
+async function remove(policy: RiskPolicyLibraryEntry) {
+  const ok = await confirm({
+    title: t('settings.riskPolicy.confirmDelete.title'),
+    // Its own copy rather than the board's: withdrawing an account policy changes what EVERY board
+    // in the account can pin, and a task that pinned it falls back to its board's own default.
+    description: t('layout.accountRiskPolicies.confirmDelete', { name: policy.name }),
+    variant: 'destructive',
+    confirmLabel: t('common.delete'),
+    icon: 'i-lucide-trash-2',
+  })
+  if (!ok) return
+  busy.value = policy.id
+  try {
+    await store.remove(props.accountId, policy.id)
+  } catch (e) {
+    present(e, 'settings.riskPolicy.toast.deleteFailed')
+  } finally {
+    busy.value = null
+  }
+}
+
+async function create(input: CreateRiskPolicyInput) {
+  creating.value = true
+  try {
+    await store.create(props.accountId, input)
+    toast.add({
+      title: t('settings.riskPolicy.toast.created'),
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+  } catch (e) {
+    present(e, 'settings.riskPolicy.toast.createFailed')
+  } finally {
+    creating.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4 text-sm" data-testid="account-risk-policy-panel">
+    <p class="text-[11px] text-slate-400">{{ t('layout.accountRiskPolicies.intro') }}</p>
+
+    <p v-if="!store.loading && policies.length === 0" class="text-[11px] text-slate-500">
+      {{ t('layout.accountRiskPolicies.empty') }}
+    </p>
+
+    <RiskPolicyEditorRow
+      v-for="policy in policies"
+      :key="policy.id"
+      :policy="policy"
+      :busy="busy"
+      :show-defaults="false"
+      @save="save(policy, $event)"
+      @remove="remove(policy)"
+    />
+
+    <RiskPolicyCreateForm :busy="creating" @create="create($event)" />
+  </div>
+</template>

package/app/components/settings/AccountSettingsPanel.vue

@@ -2,14 +2,15 @@
 // Account settings — a single tabbed modal for the per-account configuration, distinct
 // from Workspace settings. Hosts the team panel (members + roles, invitations, email
 // sender, account-wide API keys; org-scoped, with a create-org CTA on a personal account)
-// the account-tier prompt-fragment library, the repo-sourced skills, and the foundational-service
-// catalog (all available for every account type).
+// the account-tier prompt-fragment library, the repo-sourced skills, the foundational-service
+// catalog and the account-tier risk policies (all available for every account type).
 // Opened from the SideBar Configuration section, the account switcher and the command
 // bar; bound to the `ui` store so any surface can open it and deep-link to a tab.
 import AccountTeamSettings from '~/components/layout/AccountTeamSettings.vue'
 import AccountFragmentSettings from '~/components/layout/AccountFragmentSettings.vue'
 import AccountSkillSettings from '~/components/layout/AccountSkillSettings.vue'
 import AccountFoundationalSettings from '~/components/layout/AccountFoundationalSettings.vue'
+import AccountRiskPolicySettings from '~/components/layout/AccountRiskPolicySettings.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -47,6 +48,12 @@ const tabs = computed(() => [
     icon: 'i-lucide-boxes',
     slot: 'foundational',
   },
+  {
+    value: 'riskPolicies',
+    label: t('settings.account.tabs.riskPolicies'),
+    icon: 'i-lucide-shield-check',
+    slot: 'riskPolicies',
+  },
 ])
 </script>
 
@@ -77,6 +84,14 @@ const tabs = computed(() => [
             :account-id="accounts.activeAccountId"
           />
         </template>
+        <template #riskPolicies>
+          <!-- Keyed on the account like its siblings: a mid-modal account switch must remount
+               against a fresh account-keyed store rather than the stale initial one. -->
+          <AccountRiskPolicySettings
+            :key="accounts.activeAccountId ?? undefined"
+            :account-id="accounts.activeAccountId"
+          />
+        </template>
         <template #skills>
           <!-- Key on the account so a mid-modal account switch remounts against a fresh
                account-keyed skill-library store rather than the stale initial one. -->

package/app/components/settings/RiskPolicyCreateForm.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+// The create row for a new risk policy, shared by the board and account tiers (ADR 0055): the
+// numbers only. Class and role rules start at their identity and are edited on the saved policy,
+// where each rule can be shown beside the base rule (and the track record) it narrows.
+import { computed, reactive } from 'vue'
+import type { CreateRiskPolicyInput, RequirementConcernLevel } from '~/types/merge'
+import {
+  CONCERN_LABEL_KEYS,
+  CONCERN_LEVELS,
+  blankRiskPolicyDraft,
+  forkGatingFromDraft,
+} from '~/utils/riskPolicyDraft'
+
+const props = defineProps<{ busy: boolean }>()
+
+const emit = defineEmits<{ create: [input: CreateRiskPolicyInput] }>()
+
+const { t } = useI18n()
+
+const draft = reactive(blankRiskPolicyDraft())
+
+const concernOptions = computed<{ value: RequirementConcernLevel; label: string }[]>(() =>
+  CONCERN_LEVELS.map((value) => ({ value, label: t(CONCERN_LABEL_KEYS[value]) })),
+)
+
+const canSubmit = computed(() => draft.name.trim().length > 0 && !props.busy)
+
+/**
+ * Emit the create body and reset the fields a second policy should not inherit.
+ *
+ * The numbers are deliberately KEPT: an operator authoring two related policies edits them from the
+ * first one's values, and re-typing four ceilings to make a near-identical policy is the friction
+ * that leads to cloning by hand. The name is cleared because two policies with one name is the one
+ * outcome nothing on screen would explain.
+ */
+function submit() {
+  if (!canSubmit.value) return
+  emit('create', {
+    name: draft.name.trim(),
+    maxComplexity: draft.maxComplexity / 100,
+    maxRisk: draft.maxRisk / 100,
+    maxImpact: draft.maxImpact / 100,
+    ciMaxAttempts: draft.ciMaxAttempts,
+    maxRequirementIterations: draft.maxRequirementIterations,
+    maxRequirementConcernAllowed: draft.maxRequirementConcernAllowed,
+    autoMergeEnabled: draft.autoMergeEnabled,
+    autonomy: draft.unattended ? 'unattended' : 'attended',
+    minAutoAnswerConfidence: draft.minAutoAnswerConfidence / 100,
+    classRules: draft.classRules,
+    forkDecision: forkGatingFromDraft(draft),
+  } as CreateRiskPolicyInput)
+  draft.name = ''
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-dashed border-slate-700 p-3">
+    <p class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+      {{ t('settings.riskPolicy.newPreset') }}
+    </p>
+    <div class="flex flex-wrap items-end gap-3">
+      <label class="block min-w-40 flex-1">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.create.name') }}
+        </span>
+        <UInput
+          v-model="draft.name"
+          size="sm"
+          :placeholder="t('settings.riskPolicy.create.namePlaceholder')"
+          data-testid="risk-policy-create-name"
+        />
+      </label>
+      <label class="block w-20">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.create.complexity') }}
+        </span>
+        <UInput
+          v-model.number="draft.maxComplexity"
+          type="number"
+          :min="0"
+          :max="100"
+          size="sm"
+          data-testid="risk-policy-create-complexity"
+        />
+      </label>
+      <label class="block w-20">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.create.risk') }}
+        </span>
+        <UInput
+          v-model.number="draft.maxRisk"
+          type="number"
+          :min="0"
+          :max="100"
+          size="sm"
+          data-testid="risk-policy-create-risk"
+        />
+      </label>
+      <label class="block w-20">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.create.impact') }}
+        </span>
+        <UInput
+          v-model.number="draft.maxImpact"
+          type="number"
+          :min="0"
+          :max="100"
+          size="sm"
+          data-testid="risk-policy-create-impact"
+        />
+      </label>
+      <label class="block w-20">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.create.ciFix') }}
+        </span>
+        <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
+      </label>
+      <label class="block w-20">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.create.reqIter') }}
+        </span>
+        <UInput
+          v-model.number="draft.maxRequirementIterations"
+          type="number"
+          :min="1"
+          :max="20"
+          size="sm"
+        />
+      </label>
+      <label class="block w-32">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.create.autoPass') }}
+        </span>
+        <USelect
+          v-model="draft.maxRequirementConcernAllowed"
+          :items="concernOptions"
+          value-key="value"
+          size="sm"
+        />
+      </label>
+      <USwitch
+        v-model="draft.autoMergeEnabled"
+        size="sm"
+        :label="t('settings.riskPolicy.field.autoMerge')"
+      />
+      <USwitch
+        v-model="draft.forkEnabled"
+        size="sm"
+        :label="t('settings.riskPolicy.forkDecision.label')"
+      />
+      <UButton
+        color="primary"
+        size="sm"
+        icon="i-lucide-plus"
+        :loading="busy"
+        :disabled="!canSubmit"
+        data-testid="risk-policy-create-submit"
+        @click="submit"
+      >
+        {{ t('settings.riskPolicy.add') }}
+      </UButton>
+    </div>
+  </div>
+</template>

package/app/components/settings/RiskPolicyEditorRow.vue

@@ -0,0 +1,315 @@
+<script setup lang="ts">
+// ONE editable risk policy: the ceilings, the loop budgets, the per-class and per-role rules, the
+// fork gate and the autonomy posture.
+//
+// Extracted out of `RiskPolicyPanel.vue` because the same form now serves two tiers (a board's own
+// policies and an account's, ADR 0055). It owns only the FORM state and emits intent — the panel
+// that mounts it knows which tier it is writing to, so nothing here has to.
+import { computed, reactive, watch } from 'vue'
+import type {
+  RiskPolicyLibraryEntry,
+  RequirementConcernLevel,
+  UpdateRiskPolicyInput,
+} from '~/types/merge'
+import {
+  CEILING_LABEL_KEYS,
+  CONCERN_LABEL_KEYS,
+  CONCERN_LEVELS,
+  FORK_FLOOR_FIELD,
+  FORK_FLOOR_LABEL_KEYS,
+  riskPolicyPatchFromDraft,
+  toRiskPolicyDraft,
+} from '~/utils/riskPolicyDraft'
+import { RISK_POLICY_AXES, RISK_POLICY_CEILING_FIELD } from '~/utils/riskPolicy'
+import MergeClassRulesEditor from '~/components/settings/MergeClassRulesEditor.vue'
+import MergeRolePolicyEditor from '~/components/settings/MergeRolePolicyEditor.vue'
+
+const props = defineProps<{
+  policy: RiskPolicyLibraryEntry
+  /** Which single control is mid-request, keyed `<policyId>[:<action>]` by the owning panel. */
+  busy: string | null
+  /**
+   * Whether this tier carries the two per-scope DEFAULT claims. False at the ACCOUNT tier, which
+   * holds none: which policy governs a task that pinned none is a per-board question, so the badges
+   * and promote buttons would be controls over a decision this tier never makes.
+   */
+  showDefaults: boolean
+}>()
+
+const emit = defineEmits<{
+  save: [patch: UpdateRiskPolicyInput]
+  promote: []
+  promoteUnattended: []
+  remove: []
+}>()
+
+const { t } = useI18n()
+
+const draft = reactive(toRiskPolicyDraft(props.policy))
+
+// Re-seed the form only when this row starts editing a DIFFERENT policy, so recycling the component
+// cannot leave the previous one's numbers in the fields.
+//
+// Keyed on the ID and deliberately not on the row: every store hydrate rebuilds each entry as a new
+// object, and both panels re-read after any write (`ws.refresh()` here, `store.load()` at the account
+// tier), which a coarse `board` realtime event also triggers. Watching the row identity therefore
+// re-seeded this form whenever an UNRELATED policy was saved, silently discarding whatever the
+// operator had typed into this one with nothing on screen saying so.
+watch(
+  () => props.policy.id,
+  () => Object.assign(draft, toRiskPolicyDraft(props.policy)),
+)
+
+const concernOptions = computed<{ value: RequirementConcernLevel; label: string }[]>(() =>
+  CONCERN_LEVELS.map((value) => ({ value, label: t(CONCERN_LABEL_KEYS[value]) })),
+)
+
+const onMissingOptions = computed<{ value: 'run' | 'skip'; label: string }[]>(() => [
+  { value: 'run', label: t('settings.riskPolicy.forkDecision.onMissing.run') },
+  { value: 'skip', label: t('settings.riskPolicy.forkDecision.onMissing.skip') },
+])
+
+/**
+ * Why the delete button is disabled, naming the flag that actually blocks it.
+ *
+ * The two defaults are promoted by DIFFERENT buttons, so collapsing them into one "promote another
+ * preset first" message sends an operator to re-point the in-app default and come back to a delete
+ * that is still refused, with nothing on screen saying why.
+ */
+const deleteBlockedReason = computed(() => {
+  if (!props.showDefaults) return t('settings.riskPolicy.deletePreset')
+  if (props.policy.isDefault && props.policy.isUnattendedDefault)
+    return t('settings.riskPolicy.deleteBothDefaultsBlocked')
+  if (props.policy.isDefault) return t('settings.riskPolicy.deleteDefaultBlocked')
+  if (props.policy.isUnattendedDefault)
+    return t('settings.riskPolicy.deleteUnattendedDefaultBlocked')
+  return t('settings.riskPolicy.deletePreset')
+})
+
+const deleteBlocked = computed(
+  () => props.showDefaults && (props.policy.isDefault || props.policy.isUnattendedDefault),
+)
+</script>
+
+<template>
+  <div
+    class="rounded-lg border border-slate-700 bg-slate-800/40 p-3"
+    data-testid="risk-policy-row"
+    :data-policy-id="policy.id"
+    :data-policy-tier="policy.tier"
+  >
+    <div class="mb-3 flex items-center gap-2">
+      <UInput
+        v-model="draft.name"
+        size="sm"
+        class="flex-1"
+        :placeholder="t('settings.riskPolicy.presetNamePlaceholder')"
+      />
+      <template v-if="showDefaults">
+        <UBadge v-if="policy.isUnattendedDefault" color="info" variant="subtle" size="sm">
+          {{ t('settings.riskPolicy.unattendedDefault') }}
+        </UBadge>
+        <!--
+          Visibly labelled, like its `makeDefault` sibling below. `title` is a tooltip, NOT an
+          accessible name: icon-only, this was announced as an unlabelled button, and a sighted
+          user had to hover a bare glyph to discover it re-points which policy governs every
+          unwatched run. `busy` is compared to a per-BUTTON key so promoting one default does not
+          spin the other's button too.
+        -->
+        <UButton
+          v-else
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          icon="i-lucide-bot"
+          :loading="busy === `${policy.id}:unattended`"
+          :title="t('settings.riskPolicy.makeUnattendedDefault')"
+          @click="emit('promoteUnattended')"
+        >
+          {{ t('settings.riskPolicy.makeUnattendedDefaultShort') }}
+        </UButton>
+        <UBadge v-if="policy.isDefault" color="primary" variant="subtle" size="sm">
+          {{ t('settings.riskPolicy.default') }}
+        </UBadge>
+        <UButton
+          v-else
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          icon="i-lucide-star"
+          :loading="busy === `${policy.id}:default`"
+          @click="emit('promote')"
+        >
+          {{ t('settings.riskPolicy.makeDefault') }}
+        </UButton>
+      </template>
+      <UButton
+        color="error"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-trash-2"
+        :disabled="deleteBlocked || busy?.startsWith(policy.id)"
+        :title="deleteBlockedReason"
+        @click="emit('remove')"
+      />
+    </div>
+
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-4">
+      <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t(CEILING_LABEL_KEYS[axis]) }}
+        </span>
+        <UInput
+          v-model.number="draft[RISK_POLICY_CEILING_FIELD[axis]]"
+          type="number"
+          :min="0"
+          :max="100"
+          size="sm"
+        />
+      </label>
+      <label class="block">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.field.ciMaxAttempts') }}
+        </span>
+        <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
+      </label>
+      <label class="block">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.field.maxRequirementIterations') }}
+        </span>
+        <UInput
+          v-model.number="draft.maxRequirementIterations"
+          type="number"
+          :min="1"
+          :max="20"
+          size="sm"
+        />
+      </label>
+      <label class="block">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.field.maxRequirementConcernAllowed') }}
+        </span>
+        <USelect
+          v-model="draft.maxRequirementConcernAllowed"
+          :items="concernOptions"
+          value-key="value"
+          size="sm"
+        />
+      </label>
+    </div>
+
+    <!-- Per-change-class auto-merge rules, each shown beside that class's accumulated track
+         record — the number that justifies widening the rule. -->
+    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+      <MergeClassRulesEditor
+        v-model="draft.classRules"
+        :auto-merge-enabled="draft.autoMergeEnabled"
+        :disabled="busy === policy.id"
+      />
+    </div>
+
+    <!-- The role layer over those rules: what a run may do depending on WHO started it, up to and
+         including a full sandbox. Directly under the base rules it narrows, since a role rule is
+         only readable against the rule it applies to. -->
+    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+      <MergeRolePolicyEditor
+        v-model:class-rules-by-role="draft.classRulesByRole"
+        v-model:dry-run-roles="draft.dryRunRoles"
+        v-model:submission-classes-by-role="draft.submissionClassesByRole"
+        :class-rules="draft.classRules"
+        :auto-merge-enabled="draft.autoMergeEnabled"
+        :disabled="busy === policy.id"
+      />
+    </div>
+
+    <!-- Implementation-fork decision gate: propose materially different approaches before the
+         Coder writes code (in `auto` tri-state, gated on the task estimate). -->
+    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+      <USwitch
+        v-model="draft.forkEnabled"
+        size="sm"
+        :label="t('settings.riskPolicy.forkDecision.label')"
+        :description="t('settings.riskPolicy.forkDecision.hint')"
+      />
+      <div v-if="draft.forkEnabled" class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-4">
+        <label v-for="axis in RISK_POLICY_AXES" :key="axis" class="block">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+            {{ t(FORK_FLOOR_LABEL_KEYS[axis]) }}
+          </span>
+          <UInput
+            v-model.number="draft[FORK_FLOOR_FIELD[axis]]"
+            type="number"
+            size="sm"
+            :min="0"
+            :max="100"
+          />
+        </label>
+        <label class="block">
+          <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+            {{ t('settings.riskPolicy.forkDecision.onMissingLabel') }}
+          </span>
+          <USelect v-model="draft.forkOnMissing" :items="onMissingOptions" size="sm" />
+        </label>
+      </div>
+    </div>
+
+    <!-- The autonomy posture: whether the parks the engine's own quality loops raise when they give
+         up wait for a person, or are answered on the record so the run finishes. Never touches a
+         gate the PIPELINE asked for. -->
+    <div class="mt-3 rounded-md border border-slate-800 bg-slate-900/40 p-3">
+      <USwitch
+        v-model="draft.unattended"
+        size="sm"
+        :label="t('settings.riskPolicy.autonomy.label')"
+        :description="
+          draft.unattended
+            ? t('settings.riskPolicy.autonomy.unattendedHint')
+            : t('settings.riskPolicy.autonomy.attendedHint')
+        "
+      />
+      <!-- Shown only while the posture is on, because that is the only state that reads it: a floor
+           on an attended policy would be a control over a decision this policy never makes. It is
+           not hidden as an "advanced override" — it is inert, which is a different thing. -->
+      <label v-if="draft.unattended" class="mt-3 block">
+        <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('settings.riskPolicy.autoAnswer.label') }}
+        </span>
+        <UInput
+          v-model.number="draft.minAutoAnswerConfidence"
+          type="number"
+          min="0"
+          max="100"
+          size="sm"
+          data-testid="risk-policy-auto-answer-floor"
+        />
+        <span class="mt-1 block text-[11px] text-slate-500">
+          {{ t('settings.riskPolicy.autoAnswer.hint') }}
+        </span>
+      </label>
+    </div>
+
+    <div class="mt-3 flex items-center justify-between gap-3">
+      <USwitch
+        v-model="draft.autoMergeEnabled"
+        size="sm"
+        :label="t('settings.riskPolicy.field.autoMerge')"
+        :description="
+          draft.autoMergeEnabled
+            ? t('settings.riskPolicy.autoMergeOnHint')
+            : t('settings.riskPolicy.autoMergeOffHint')
+        "
+      />
+      <UButton
+        color="primary"
+        variant="soft"
+        size="xs"
+        icon="i-lucide-save"
+        :loading="busy === policy.id"
+        data-testid="risk-policy-save"
+        @click="emit('save', riskPolicyPatchFromDraft(draft, policy.name))"
+      >
+        {{ t('common.save') }}
+      </UButton>
+    </div>
+  </div>
+</template>