@cat-factory/app 0.308.0 → 0.310.0

package/app/components/provisioning/ProvisioningLogsDrawer.vue

@@ -22,6 +22,7 @@ import type {
   ProvisioningOutcome,
   ProvisioningSubsystem,
 } from '~/types/provisioningLogs'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{
   subsystem?: ProvisioningSubsystem
@@ -115,9 +116,9 @@ function when(epochMs: number): string {
 <template>
   <div class="rounded-lg border border-muted bg-default/50">
     <div class="flex items-center justify-between border-b border-default px-3 py-2">
-      <p class="text-[11px] font-semibold uppercase tracking-wide text-muted">
+      <SectionLabel as="p">
         {{ t('provisioning.title') }}
-      </p>
+      </SectionLabel>
       <UButton
         icon="i-lucide-rotate-ccw"
         variant="ghost"
@@ -129,17 +130,17 @@ function when(epochMs: number): string {
       </UButton>
     </div>
 
-    <p v-if="state.error" class="px-3 py-2 text-[12px] text-app-error-300">{{ state.error }}</p>
+    <p v-if="state.error" class="px-3 py-2 text-xs text-app-error-300">{{ state.error }}</p>
     <p
       v-else-if="!state.loading && state.entries.length === 0"
-      class="px-3 py-3 text-[12px] text-dimmed"
+      class="px-3 py-3 text-xs text-dimmed"
     >
       {{ t('provisioning.empty') }}
     </p>
 
     <ul v-else class="max-h-80 divide-y divide-default overflow-auto">
       <li v-for="entry in state.entries" :key="entry.id" class="px-3 py-2">
-        <div class="flex items-center gap-2 text-[12px]">
+        <div class="flex items-center gap-2 text-xs">
           <UIcon
             :name="entry.outcome === 'success' ? 'i-lucide-check-circle' : 'i-lucide-x-circle'"
             class="h-3.5 w-3.5 shrink-0"
@@ -147,7 +148,7 @@ function when(epochMs: number): string {
           />
           <span class="font-medium text-default">{{ OPERATION_LABEL[entry.operation] }}</span>
           <span
-            class="rounded px-1.5 py-0.5 text-[10px] uppercase tracking-wide"
+            class="rounded-sm px-1.5 py-0.5 text-3xs uppercase tracking-wide"
             :class="
               entry.outcome === 'success'
                 ? 'bg-app-success-950/60 text-app-success-300'
@@ -155,15 +156,15 @@ function when(epochMs: number): string {
             "
             >{{ OUTCOME_LABEL[entry.outcome] }}</span
           >
-          <span class="ms-auto text-[11px] text-dimmed">{{ when(entry.createdAt) }}</span>
+          <span class="ms-auto text-2xs text-dimmed">{{ when(entry.createdAt) }}</span>
         </div>
-        <div v-if="entry.targetId" class="mt-0.5 text-[11px] text-dimmed">
+        <div v-if="entry.targetId" class="mt-0.5 text-2xs text-dimmed">
           {{ entry.providerId ? `${entry.providerId} · ` : '' }}{{ entry.targetId }}
         </div>
         <!-- The verbatim provider/runtime error on a failed attempt. -->
         <pre
           v-if="entry.error"
-          class="mt-1 max-h-28 overflow-auto whitespace-pre-wrap rounded border border-app-error-900/50 bg-app-error-950/30 p-1.5 text-[11px] text-app-error-200/90"
+          class="mt-1 max-h-28 overflow-auto whitespace-pre-wrap rounded-sm border border-app-error-900/50 bg-app-error-950/30 p-1.5 text-2xs text-app-error-200/90"
           >{{ entry.error }}</pre>
       </li>
     </ul>

package/app/components/ralph/RalphLoopResultView.vue

@@ -10,6 +10,7 @@ import type { RalphStepState } from '~/types/execution'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
 import CopyButton from '~/components/common/CopyButton.vue'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const execution = useExecutionStore()
@@ -145,45 +146,46 @@ const STATUS_META = computed<
 
         <template v-else>
           <!-- The completion criterion. -->
-          <h3 class="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h3" class="mb-1.5">
             {{ t('ralph.validationCommand') }}
-          </h3>
+          </SectionLabel>
           <div class="relative rounded-md border border-default bg-app-950/60 px-3 py-2">
             <CopyButton :text="ralph.validationCommand" class="absolute end-1 top-1" />
-            <code class="block whitespace-pre-wrap pe-8 font-mono text-[12px] text-default">{{
+            <code class="block whitespace-pre-wrap pe-8 font-mono text-xs text-default">{{
               ralph.validationCommand
             }}</code>
           </div>
 
           <!-- The most recent validation output. -->
           <template v-if="ralph.lastValidationTail">
-            <h3 class="mb-1.5 mt-4 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-1.5 mt-4">
               {{ t('ralph.lastOutput', { exit: ralph.lastExitCode ?? '?' }) }}
-            </h3>
+            </SectionLabel>
             <div class="relative rounded-md border border-default bg-app-950/60 px-3 py-2">
               <CopyButton :text="ralph.lastValidationTail" class="absolute end-1 top-1" />
-              <pre
-                class="whitespace-pre-wrap pe-8 font-mono text-[11px] leading-relaxed text-muted"
-                >{{ ralph.lastValidationTail }}</pre>
+              <pre class="whitespace-pre-wrap pe-8 font-mono text-2xs leading-relaxed text-muted">{{
+                ralph.lastValidationTail
+              }}</pre>
             </div>
           </template>
 
-          <a
+          <ULink
+            raw
             v-if="prUrl"
-            :href="prUrl"
+            :to="prUrl"
             target="_blank"
             rel="noopener"
-            class="mt-3 inline-flex items-center gap-1 text-[12px] text-app-info-300 hover:text-app-info-200 hover:underline"
+            class="mt-3 inline-flex items-center gap-1 text-xs text-app-info-300 hover:text-app-info-200 hover:underline"
           >
             {{ t('ralph.viewPr') }}
             <UIcon name="i-lucide-external-link" class="h-3 w-3" />
-          </a>
+          </ULink>
 
           <!-- Why a loop that stopped short of its budget stopped: without this the count in
                the sidebar (e.g. "3 of 20") reads as an unexplained abandonment. -->
           <p
             v-if="status === 'stalled'"
-            class="mt-3 rounded-md border border-app-error-900/60 bg-app-error-950/30 px-3 py-2 text-[12px] leading-relaxed text-app-error-200"
+            class="mt-3 rounded-md border border-app-error-900/60 bg-app-error-950/30 px-3 py-2 text-xs leading-relaxed text-app-error-200"
             data-testid="ralph-stalled-note"
           >
             {{ t('ralph.stalledNote') }}
@@ -191,14 +193,14 @@ const STATUS_META = computed<
 
           <!-- Iteration history: what each pass produced and whether its validation passed. -->
           <section v-if="attempts.length" class="mt-5">
-            <h3 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+            <SectionLabel as="h3" class="mb-2">
               {{ t('ralph.iterationsHeading') }}
-            </h3>
+            </SectionLabel>
             <!-- The log is capped (it rides the run's detail blob); say so rather than letting a
                  long loop's partial history read as if those iterations never ran. -->
             <p
               v-if="droppedAttempts"
-              class="mb-2 text-[11px] text-dimmed"
+              class="mb-2 text-2xs text-dimmed"
               data-testid="ralph-iterations-truncated"
             >
               {{ t('ralph.iterationsTruncated', { count: droppedAttempts }, droppedAttempts) }}
@@ -216,23 +218,21 @@ const STATUS_META = computed<
                     class="h-3.5 w-3.5"
                     :class="a.validationPassed ? 'text-app-success-400' : 'text-app-error-400'"
                   />
-                  <span class="text-[12px] font-medium text-default">
+                  <span class="text-xs font-medium text-default">
                     {{ t('ralph.iteration', { number: a.attempt }) }}
                   </span>
-                  <span class="text-[11px] text-dimmed">
+                  <span class="text-2xs text-dimmed">
                     {{
                       a.validationPassed
                         ? t('ralph.iterationPassed')
                         : t('ralph.iterationFailed', { exit: a.exitCode ?? '?' })
                     }}
                   </span>
-                  <span class="ms-auto text-[10px] text-app-600">{{
-                    d(new Date(a.at), 'long')
-                  }}</span>
+                  <span class="ms-auto text-3xs text-app-600">{{ d(new Date(a.at), 'long') }}</span>
                 </div>
                 <p
                   v-if="a.summary"
-                  class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-muted"
+                  class="mt-1 whitespace-pre-wrap text-xs leading-relaxed text-muted"
                 >
                   {{ a.summary }}
                 </p>
@@ -246,10 +246,10 @@ const STATUS_META = computed<
         class="hidden w-60 shrink-0 flex-col gap-4 border-s border-default bg-default/50 px-4 py-4 lg:flex"
       >
         <div v-if="ralph">
-          <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-2">
             {{ t('ralph.sidebar.state') }}
-          </h4>
-          <div class="flex items-center gap-2 text-[13px]">
+          </SectionLabel>
+          <div class="flex items-center gap-2 text-sm">
             <UIcon
               :name="STATUS_META[status].icon"
               class="h-4 w-4"
@@ -259,10 +259,10 @@ const STATUS_META = computed<
           </div>
         </div>
         <div v-if="ralph">
-          <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-dimmed">
+          <SectionLabel as="h4" class="mb-1">
             {{ t('ralph.sidebar.iterations') }}
-          </h4>
-          <p class="text-[12px] text-toned" data-testid="ralph-iteration-count">
+          </SectionLabel>
+          <p class="text-xs text-toned" data-testid="ralph-iteration-count">
             {{ t('ralph.sidebar.count', { attempts: ralph.attempts, max: ralph.maxIterations }) }}
           </p>
         </div>
@@ -275,7 +275,7 @@ const STATUS_META = computed<
           :run-failed="instance?.status === 'failed'"
           :failure-at="instance?.failure?.occurredAt"
         />
-        <p class="mt-auto text-[10px] leading-relaxed text-app-600">
+        <p class="mt-auto text-3xs leading-relaxed text-app-600">
           {{ t('ralph.sidebar.footer') }}
         </p>
       </aside>

package/app/components/requirements/RequirementsReviewWindow.vue

@@ -28,6 +28,7 @@ import type {
   ReviewItemSeverity,
   ReviewItemStatus,
 } from '~/types/requirements'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const board = useBoardStore()
 const requirements = useRequirementsStore()
@@ -806,11 +807,11 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   </span>
                   <span class="h-px flex-1 bg-accented" />
                 </div>
-                <p class="mt-0.5 text-[11px] text-dimmed">{{ CLASS_HINTS[group] }}</p>
+                <p class="mt-0.5 text-2xs text-dimmed">{{ CLASS_HINTS[group] }}</p>
               </div>
               <div v-if="startsAttentionGroup(index)" class="flex items-center gap-2 pt-1">
                 <span
-                  class="text-[11px] font-semibold uppercase tracking-wide"
+                  class="text-2xs font-semibold uppercase tracking-wide"
                   :class="ATTENTION_LABEL_COLOR[attention]"
                 >
                   {{ ATTENTION_LABELS[attention] }}
@@ -873,9 +874,9 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                       v-if="item.reply && item.status !== 'open' && item.status !== 'answered'"
                       class="mt-2 max-w-3xl rounded-md border-s-2 border-muted bg-app-950/40 px-3 py-1.5 text-sm text-toned"
                     >
-                      <span class="text-[10px] uppercase tracking-wide text-dimmed">
+                      <SectionLabel as="span">
                         {{ t('requirements.answerLabel') }}
-                      </span>
+                      </SectionLabel>
                       <p class="whitespace-pre-line">{{ item.reply }}</p>
                     </div>
 
@@ -964,7 +965,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                         />
                         <p
                           v-if="isUserAnswered(item)"
-                          class="mt-1 flex items-center gap-1 text-[11px] text-app-success-400"
+                          class="mt-1 flex items-center gap-1 text-2xs text-app-success-400"
                         >
                           <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
                           {{ t('requirements.userAnswered') }}
@@ -1093,7 +1094,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                             :placeholder="t('requirements.guidancePlaceholder')"
                             :disabled="frozen"
                           />
-                          <p class="mt-1 flex items-center gap-1 text-[11px] text-primary/80">
+                          <p class="mt-1 flex items-center gap-1 text-2xs text-primary/80">
                             <UIcon name="i-lucide-wand-2" class="h-3 w-3 shrink-0" />
                             {{ t('requirements.guidanceHint') }}
                           </p>
@@ -1101,7 +1102,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                       </template>
 
                       <!-- DISMISS: nothing to fill in — a short note explains the effect -->
-                      <p v-else class="mt-2 text-[11px] text-dimmed">
+                      <p v-else class="mt-2 text-2xs text-dimmed">
                         {{ t('requirements.dismissedHint') }}
                       </p>
                     </template>
@@ -1115,8 +1116,10 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                    collapses as a unit (a long doc otherwise pushes the findings/recommendations
                    off-screen); the per-heading toggles below still work when it's expanded. -->
           <section v-if="outline" class="mt-6 border-t border-default pt-5">
-            <button
-              class="mb-3 flex w-full items-center gap-1.5 text-[11px] text-app-success-400"
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="mb-3 flex w-full items-center gap-1.5 p-0 text-2xs text-app-success-400 hover:bg-transparent"
               @click="toggleDoc"
             >
               <UIcon
@@ -1132,16 +1135,18 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     : t('requirements.incorporatedDraft')
                 }}
               </span>
-            </button>
+            </UButton>
             <!-- The same reading measure the findings' own prose takes above (see the shell's
                  `width` prop): the window is `full`-width now, and this is continuous prose that
                  would otherwise run to 200-character lines. Left-aligned rather than centred, so
                  it starts where every finding above it starts. -->
             <div v-show="!docCollapsed" class="max-w-3xl">
               <div v-for="s in outline.sections" :key="s.id" class="mb-2">
-                <button
+                <UButton
+                  color="neutral"
+                  variant="ghost"
                   v-if="s.title"
-                  class="group flex w-full items-center gap-2 text-start"
+                  class="group flex w-full items-center gap-2 p-0 text-start hover:bg-transparent"
                   @click="toggle(s.id)"
                 >
                   <UIcon
@@ -1154,10 +1159,10 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                     :class="s.depth <= 1 ? 'text-base' : s.depth === 2 ? 'text-sm' : 'text-xs'"
                     v-html="s.titleHtml"
                   />
-                </button>
+                </UButton>
                 <div
                   v-show="!s.title || !collapsed[s.id]"
-                  class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-toned"
+                  class="reader-prose mt-1 ps-5.5 text-sm leading-relaxed text-toned"
                   v-html="s.bodyHtml"
                 />
               </div>
@@ -1277,7 +1282,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             >
               {{ t('requirements.actions.incorporateAnswers') }}
             </UButton>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               <template v-if="canProceed">
                 {{ t('requirements.help.canProceed') }}
               </template>
@@ -1341,14 +1346,14 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 {{ t('requirements.actions.redoWithDirection') }}
               </UButton>
             </div>
-            <p class="text-[11px] leading-relaxed text-dimmed">
+            <p class="text-2xs leading-relaxed text-dimmed">
               {{ t('requirements.help.merged') }}
             </p>
           </div>
 
           <div
             v-if="review && incorporated"
-            class="border-t border-default pt-4 text-[11px] leading-relaxed text-dimmed"
+            class="border-t border-default pt-4 text-2xs leading-relaxed text-dimmed"
           >
             {{ t('requirements.settledFooter') }}
           </div>

package/app/components/riskPolicy/RiskPolicyPicker.vue

@@ -140,9 +140,10 @@ function choose(id: string) {
         <!-- left: selectable options, NAME ONLY -->
         <ul class="w-1/2 shrink-0 overflow-y-auto border-e border-default p-1">
           <li>
-            <button
-              type="button"
-              class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm"
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm"
               :class="[
                 refused.has('') ? 'cursor-not-allowed opacity-50' : 'hover:bg-elevated/60',
                 modelValue ? 'text-toned' : 'text-app-100',
@@ -164,12 +165,13 @@ function choose(id: string) {
                 name="i-lucide-check"
                 class="h-4 w-4 shrink-0 text-primary"
               />
-            </button>
+            </UButton>
           </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"
+            <UButton
+              color="neutral"
+              variant="ghost"
+              class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-start text-sm"
               :class="[
                 refused.has(p.id) ? 'cursor-not-allowed opacity-50' : 'hover:bg-elevated/60',
                 modelValue === p.id ? 'text-app-100' : 'text-toned',
@@ -191,7 +193,7 @@ function choose(id: string) {
                 name="i-lucide-check"
                 class="h-4 w-4 shrink-0 text-primary"
               />
-            </button>
+            </UButton>
           </li>
         </ul>
 
@@ -200,17 +202,17 @@ function choose(id: string) {
           <template v-if="preview.policy">
             <p
               v-if="previewRefusal"
-              class="mb-2 text-[11px] leading-snug text-app-warning-400"
+              class="mb-2 text-2xs leading-snug text-app-warning-400"
               data-testid="risk-policy-refusal"
             >
               {{ t(`riskPolicy.picker.refused.${previewRefusal}`) }}
             </p>
-            <p v-if="preview.viaWorkspaceDefault" class="mb-2 text-[11px] leading-snug text-dimmed">
+            <p v-if="preview.viaWorkspaceDefault" class="mb-2 text-2xs leading-snug text-dimmed">
               {{ t('riskPolicy.picker.workspaceDefaultCaption') }}
             </p>
             <RiskPolicyPreview :policy="preview.policy" />
           </template>
-          <div v-else class="text-[12px] leading-snug text-dimmed">
+          <div v-else class="text-xs leading-snug text-dimmed">
             {{ t('riskPolicy.picker.noneHint') }}
           </div>
         </div>

package/app/components/riskPolicy/RiskPolicyPreview.vue

@@ -10,6 +10,7 @@
 import { computed } from 'vue'
 import type { RiskPolicy, WorkspaceRole } from '~/types/merge'
 import { riskPolicyCeilings, rolePolicySummary, type RiskPolicyAxis } from '~/utils/riskPolicy'
+import SectionLabel from '~/components/common/SectionLabel.vue'
 
 const props = defineProps<{ policy: RiskPolicy }>()
 const { t, n } = useI18n()
@@ -56,15 +57,15 @@ const ceilings = computed(() =>
 
     <!-- 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-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-git-merge" class="h-3 w-3" />
         {{ t('riskPolicy.preview.autoMergeHeading') }}
-      </div>
+      </SectionLabel>
       <dl class="space-y-1">
         <div
           v-for="c in ceilings"
           :key="c.axis"
-          class="flex items-baseline justify-between gap-3 rounded bg-elevated/70 px-1.5 py-0.5 text-[12px]"
+          class="flex items-baseline justify-between gap-3 rounded-sm bg-elevated/70 px-1.5 py-0.5 text-xs"
         >
           <dt class="text-toned">{{ c.label }}</dt>
           <dd class="tabular-nums text-app-100">
@@ -72,43 +73,43 @@ const ceilings = computed(() =>
           </dd>
         </div>
       </dl>
-      <p class="mt-1.5 text-[12px] leading-snug text-muted">
+      <p class="mt-1.5 text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.autoMergeExplainer') }}
       </p>
     </div>
     <div v-else>
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-user-check" class="h-3 w-3" />
         {{ t('riskPolicy.preview.manualHeading') }}
-      </div>
-      <p class="text-[12px] leading-snug text-muted">
+      </SectionLabel>
+      <p class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.manualExplainer') }}
       </p>
     </div>
 
     <!-- Who started the run changes what may land, on a policy that says so. -->
     <div v-if="roleLayer.any" data-testid="risk-policy-preview-roles">
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-users" class="h-3 w-3" />
         {{ t('riskPolicy.preview.roleHeading') }}
-      </div>
-      <p v-if="roleLayer.sandboxed" class="text-[12px] leading-snug text-muted">
+      </SectionLabel>
+      <p v-if="roleLayer.sandboxed" class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.roleSandboxed', { roles: roleLayer.sandboxed }) }}
       </p>
-      <p v-if="roleLayer.scoped" class="text-[12px] leading-snug text-muted">
+      <p v-if="roleLayer.scoped" class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.roleScoped', { roles: roleLayer.scoped }) }}
       </p>
-      <p v-if="roleLayer.narrowed" class="text-[12px] leading-snug text-muted">
+      <p v-if="roleLayer.narrowed" class="text-xs leading-snug text-muted">
         {{ t('riskPolicy.preview.roleNarrowed', { roles: roleLayer.narrowed }) }}
       </p>
     </div>
 
     <div>
-      <div class="mb-1 flex items-center gap-1 text-[10px] uppercase tracking-wide text-dimmed">
+      <SectionLabel class="mb-1 flex items-center gap-1">
         <UIcon name="i-lucide-wrench" class="h-3 w-3" />
         {{ t('riskPolicy.preview.ciHeading') }}
-      </div>
-      <p class="text-[12px] leading-snug text-muted">
+      </SectionLabel>
+      <p class="text-xs leading-snug text-muted">
         {{
           t('riskPolicy.preview.ciAttempts', { count: policy.ciMaxAttempts }, policy.ciMaxAttempts)
         }}