@cat-factory/app 0.195.1 → 0.196.0

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

@@ -75,6 +75,21 @@ const FRAME_LABEL_KEYS: Record<BlockStatus, string> = {
   done: 'board.frame.status.done',
 }
 const statusLabel = computed(() => t(FRAME_LABEL_KEYS[frameStatus.value]))
+// The badge is a ROLLUP over the frame's children, not a status anybody set on the service, and
+// the label alone never says which child produced it — "Needs attention" names no task, and
+// "Live" reads as a health check rather than "caught up". So each status gets its own tooltip
+// naming what it is rolled up from. `pr_ready`/`done` are unreachable here (`frameStatus` caps
+// below `done`: a service is long-lived and never finishes) but the Record stays exhaustive over
+// `BlockStatus` for the same reason the label map does, and mirrors that map's aliasing.
+const FRAME_STATUS_HINT_KEYS: Record<BlockStatus, string> = {
+  planned: 'board.frame.statusHint.planned',
+  ready: 'board.frame.statusHint.ready',
+  in_progress: 'board.frame.statusHint.in_progress',
+  blocked: 'board.frame.statusHint.blocked',
+  pr_ready: 'board.frame.statusHint.pr_ready',
+  done: 'board.frame.statusHint.done',
+}
+const statusHint = computed(() => t(FRAME_STATUS_HINT_KEYS[frameStatus.value]))
 
 const selected = computed(() => ui.selectedBlockId === props.id)
 // Services are always expanded to their task canvas, at every zoom level: there is no
@@ -349,7 +364,7 @@ const ITEM_ICON: Record<string, string> = {
           </UBadge>
         </div>
         <div class="flex items-center justify-between">
-          <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
+          <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm" :title="statusHint">{{
             statusLabel
           }}</UBadge>
           <span class="text-[11px] text-slate-400">{{
@@ -474,9 +489,13 @@ const ITEM_ICON: Record<string, string> = {
               </div>
             </div>
             <div class="flex items-center gap-1">
-              <UBadge :color="statusMeta.chip as any" variant="subtle" size="sm">{{
-                statusLabel
-              }}</UBadge>
+              <UBadge
+                :color="statusMeta.chip as any"
+                variant="subtle"
+                size="sm"
+                :title="statusHint"
+                >{{ statusLabel }}</UBadge
+              >
               <!-- Board-authoring buttons (create task / from issue / recurring / initiative)
                    are `board.write` — hidden for a read-only viewer, who keeps the badge +
                    collapse toggle (view-only affordances). -->

package/app/components/judge/JudgeResultView.vue

@@ -151,7 +151,11 @@ async function act(choice: 'proceed' | 'bounce' | 'stop') {
           <span class="text-[13px] font-semibold text-slate-100">
             {{ score === null ? t('judge.notScored') : n(score, 'percent') }}
           </span>
-          <span v-if="threshold !== null" class="text-[12px] text-slate-400">
+          <span
+            v-if="threshold !== null"
+            class="text-[12px] text-slate-400"
+            :title="t('judge.thresholdHint')"
+          >
             {{ t('judge.threshold', { threshold: n(threshold, 'percent') }) }}
           </span>
           <span v-if="judge.disposition" class="text-[12px] text-slate-400">

package/app/components/merge/MergeEffortChips.vue

@@ -87,7 +87,10 @@ function pick(effort: ReviewEffort) {
 <template>
   <div data-testid="merge-effort-chips" class="mt-2">
     <div class="flex items-center gap-1.5">
-      <span class="text-[10px] uppercase tracking-wide text-slate-500">
+      <span
+        class="text-[10px] uppercase tracking-wide text-slate-500"
+        :title="t('merge.effort.promptHint')"
+      >
         {{ t('merge.effort.prompt') }}
       </span>
       <UBadge
@@ -96,6 +99,7 @@ function pick(effort: ReviewEffort) {
         color="neutral"
         variant="subtle"
         size="sm"
+        :title="t('merge.changeClass.hint')"
       >
         {{ classLabel }}
       </UBadge>

package/app/components/panels/ReportsPanel.vue

@@ -309,12 +309,15 @@ watch(
                   </div>
                 </div>
                 <div class="mt-2 flex items-center gap-4 text-[11px] text-slate-500">
-                  <span class="flex items-center gap-1">
+                  <span class="flex items-center gap-1" :title="t('reports.legend.meteredHint')">
                     <span class="h-2 w-2 rounded-sm bg-violet-500" />{{
                       t('reports.legend.metered')
                     }}
                   </span>
-                  <span class="flex items-center gap-1">
+                  <span
+                    class="flex items-center gap-1"
+                    :title="t('reports.legend.subscriptionHint')"
+                  >
                     <span class="h-2 w-2 rounded-sm bg-amber-600" />{{
                       t('reports.legend.subscription')
                     }}

package/app/components/panels/ReportsSpendBreakdown.vue

@@ -40,7 +40,11 @@ const max = computed(() => maxOf(props.rows, spendMagnitude))
                figure would report money that was never billed. -->
           <span class="shrink-0 tabular-nums text-slate-400">
             {{ money(row.meteredCost) }}
-            <span v-if="row.subscriptionCost > 0" class="text-amber-400">
+            <span
+              v-if="row.subscriptionCost > 0"
+              class="text-amber-400"
+              :title="t('reports.legend.subscriptionHint')"
+            >
               {{ t('reports.spend.subscriptionAside', { value: money(row.subscriptionCost) }) }}
             </span>
           </span>

package/app/components/panels/StepEffortReport.vue

@@ -42,7 +42,12 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
     </div>
 
     <div class="flex items-center gap-2">
-      <span class="text-[12px] text-slate-300">{{ t('panels.stepDetail.effort.difficulty') }}</span>
+      <span
+        class="text-[12px] text-slate-300"
+        :title="t('panels.stepDetail.effort.difficultyHint')"
+      >
+        {{ t('panels.stepDetail.effort.difficulty') }}
+      </span>
       <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-700/60">
         <div
           class="h-full rounded-full"
@@ -50,7 +55,11 @@ const difficultyClass = computed(() => BAR_CLASS[effortBand(props.report.difficu
           :style="{ width: `${difficultyPct}%` }"
         />
       </div>
-      <span data-testid="step-effort-difficulty" class="text-[12px] font-medium text-slate-200">
+      <span
+        data-testid="step-effort-difficulty"
+        class="text-[12px] font-medium text-slate-200"
+        :title="t('panels.stepDetail.effort.difficultyHint')"
+      >
         {{ t('panels.stepDetail.effort.outOfTen', { value: report.difficulty }) }}
       </span>
     </div>

package/app/components/panels/StepFragmentAdherence.vue

@@ -33,7 +33,9 @@ function label(item: FragmentAdherence[number]): string {
       class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
     >
       <UIcon name="i-lucide-clipboard-check" class="h-3.5 w-3.5" />
-      <span>{{ t('panels.stepDetail.adherence.heading') }}</span>
+      <span :title="t('panels.stepDetail.adherence.headingHint')">
+        {{ t('panels.stepDetail.adherence.heading') }}
+      </span>
     </div>
 
     <div class="space-y-2.5">
@@ -54,7 +56,10 @@ function label(item: FragmentAdherence[number]): string {
               :style="{ width: `${ratingPct(item.rating)}%` }"
             />
           </div>
-          <span class="shrink-0 text-[12px] font-medium text-slate-200">
+          <span
+            class="shrink-0 text-[12px] font-medium text-slate-200"
+            :title="t('panels.stepDetail.adherence.ratingHint')"
+          >
             {{ t('panels.stepDetail.adherence.outOfTen', { value: item.rating }) }}
           </span>
         </div>

package/app/components/panels/StepMetadataCard.vue

@@ -48,6 +48,13 @@ const stateMeta = computed(() => {
 
 const modelLabel = computed(() => (props.step.model ? models.labelForRef(props.step.model) : null))
 
+/**
+ * The deployment-registered VARIANT this step ran under — an alternate prompt for its agent kind.
+ * Reported beside the model because it is the other half of "what actually ran"; null on every
+ * step that ran the shipped prompt, so the field is simply absent on the stock product.
+ */
+const promptVariant = useStepPromptVariant(() => props.step)
+
 const ITEM_ICON: Record<string, string> = {
   completed: 'i-lucide-check-circle-2',
   in_progress: 'i-lucide-loader-circle',
@@ -140,6 +147,15 @@ async function copyRunId() {
           {{ modelLabel ?? t('panels.stepMeta.notRecorded') }}
         </dd>
       </div>
+      <div v-if="promptVariant">
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.promptVariant') }}
+        </dt>
+        <dd class="mt-0.5 truncate text-slate-300">{{ promptVariant.label }}</dd>
+        <dd v-if="promptVariant.note" class="mt-0.5 text-[11px] text-amber-400/80">
+          {{ promptVariant.note }}
+        </dd>
+      </div>
       <!-- The run id this step belongs to, surfaced for debugging (copyable). -->
       <div class="col-span-2 sm:col-span-3">
         <dt class="text-[11px] uppercase tracking-wide text-slate-500">
@@ -207,7 +223,10 @@ async function copyRunId() {
 
     <!-- standards (prompt fragments) folded into this step -->
     <div v-if="step.selectedFragmentIds && step.selectedFragmentIds.length" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+      <div
+        class="text-[11px] uppercase tracking-wide text-slate-500"
+        :title="t('panels.stepMeta.standardsAppliedHint')"
+      >
         {{ t('panels.stepMeta.standardsApplied') }}
       </div>
       <div class="mt-1 flex flex-wrap gap-1">

package/app/components/panels/StepRunMeta.vue

@@ -27,6 +27,14 @@ const props = defineProps<{
 const models = useModelsStore()
 const { t, d } = useI18n()
 
+/**
+ * The deployment-registered VARIANT this step ran under — an alternate prompt for its agent kind.
+ * Reported beside the model because it is the other half of "what actually ran": two steps of the
+ * same kind on the same model can be told to be different things, and nothing else on this panel
+ * would say so. Null on every step that ran the shipped prompt.
+ */
+const promptVariant = useStepPromptVariant(() => props.step)
+
 const { isRunning, durationLabel, activityAgoLabel } = useStepTimer({
   step: () => props.step,
   runFailed: () => props.runFailed ?? false,
@@ -110,6 +118,16 @@ async function copyRunId() {
       </p>
     </div>
 
+    <div v-if="promptVariant">
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.promptVariant') }}
+      </h4>
+      <p class="break-all text-[12px] text-slate-300">{{ promptVariant.label }}</p>
+      <p v-if="promptVariant.note" class="mt-0.5 text-[11px] text-amber-400/80">
+        {{ promptVariant.note }}
+      </p>
+    </div>
+
     <div v-if="runId">
       <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
         {{ t('panels.stepMeta.run') }}

package/app/components/pipeline/EstimateThresholdFields.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// The estimate-gate threshold row, shared by every gate editor in the pipeline builder: a
+// companion step's own gate, a consensus step's escalation gate, and the Tester QC companion's
+// gate. One component because the three rendered the same 0..1 inputs from three copies of the
+// markup — and, more to the point, because the explanation these numbers need has to be worded
+// once. A bare "risk >=" label says nothing about where the score comes from, what its scale is,
+// or how the axes combine, and the scale is the trap: every other score the product shows a user
+// (judge verdicts, effort difficulty, adherence ratings) is out of ten, so an unlabelled 0..1
+// field reads as "risk 1 out of 10" and gates a step that was meant to run on everything.
+//
+// The gate itself is edited by the parent (the builder mutates store drafts in place), so this
+// component only renders and reports: it never writes through the `gating` prop.
+import type { EstimateAxis } from '~/utils/estimateGating'
+import {
+  ESTIMATE_AXIS_FIELD,
+  ESTIMATE_AXIS_HINT_KEYS,
+  ESTIMATE_AXIS_LABEL_KEYS,
+  parseAxisThreshold,
+} from '~/utils/estimateGating'
+
+const props = defineProps<{
+  /** The gate being edited. Read-only here — changes go back through `update`. */
+  gating: { minComplexity?: number; minRisk?: number; minImpact?: number }
+  /** Which axes this gate exposes, in render order. */
+  axes: readonly EstimateAxis[]
+  /** What clearing the gate DOES, which differs per gate and is half the explanation. */
+  outcome: 'step' | 'consensus'
+}>()
+
+const emit = defineEmits<{ update: [axis: EstimateAxis, value: number | undefined] }>()
+
+const { t } = useI18n()
+
+// Exhaustive Record over the two outcomes with LITERAL keys, so the typed-message-key check sees
+// them and a third outcome fails the typecheck rather than falling back to the step wording.
+const OUTCOME_HINT_KEYS: Record<'step' | 'consensus', string> = {
+  step: 'pipeline.builder.gatingRunWhenAnyHint',
+  consensus: 'pipeline.builder.gatingRunWhenAnyConsensusHint',
+}
+
+const fields = computed(() =>
+  props.axes.map((axis) => ({
+    axis,
+    label: t(ESTIMATE_AXIS_LABEL_KEYS[axis]),
+    hint: t(ESTIMATE_AXIS_HINT_KEYS[axis]),
+    value: props.gating[ESTIMATE_AXIS_FIELD[axis]],
+  })),
+)
+
+function commit(axis: EstimateAxis, raw: string) {
+  emit('update', axis, parseAxisThreshold(raw))
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2">
+    <span class="text-[10px] text-slate-500" :title="t(OUTCOME_HINT_KEYS[outcome])">
+      {{ t('pipeline.builder.runWhenAny') }}
+    </span>
+    <template v-for="f in fields" :key="f.axis">
+      <label class="text-slate-400" :title="f.hint">{{ f.label }}</label>
+      <input
+        :value="f.value"
+        :title="f.hint"
+        type="number"
+        min="0"
+        max="1"
+        step="0.1"
+        class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+        @change="commit(f.axis, ($event.target as HTMLInputElement).value)"
+      />
+    </template>
+  </div>
+</template>

package/app/components/pipeline/OutputBudgetInput.vue

@@ -63,6 +63,7 @@ function commit(raw: string | number) {
     :min="MIN_AGENT_MAX_OUTPUT_TOKENS"
     :max="MAX_AGENT_MAX_OUTPUT_TOKENS"
     :placeholder="placeholder"
+    :title="t('pipeline.outputBudget.hint')"
     :disabled="disabled"
     @change="commit(($event.target as HTMLInputElement).value)"
   />

package/app/components/pipeline/PipelineBuilder.vue

@@ -5,7 +5,9 @@ import type { AgentKind, Pipeline, PipelinePurpose } from '~/types/domain'
 import AgentPalette from '~/components/palettes/AgentPalette.vue'
 import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
 import AgentPromptEditor from '~/components/pipeline/AgentPromptEditor.vue'
+import EstimateThresholdFields from '~/components/pipeline/EstimateThresholdFields.vue'
 import OutputBudgetInput from '~/components/pipeline/OutputBudgetInput.vue'
+import { ESTIMATE_AXES, ESTIMATE_AXIS_FIELD, type EstimateAxis } from '~/utils/estimateGating'
 import { showOverrideField } from '~/utils/uiMode'
 import {
   agentKindMeta,
@@ -47,6 +49,31 @@ function addParticipant(i: number) {
 function removeParticipant(i: number, pIdx: number) {
   pipelines.draftConsensus[i]?.participants.splice(pIdx, 1)
 }
+/**
+ * The consensus escalation gate exposes only the two axes its toggle seeds (risk + impact) —
+ * complexity is a fine reason to run a deeper TEST audit but a poor reason to convene a panel,
+ * which is about disagreement risk. A module constant rather than a template literal so the
+ * array identity is stable across re-renders.
+ */
+const CONSENSUS_ESTIMATE_AXES: readonly EstimateAxis[] = ['risk', 'impact']
+
+// Writing one axis floor back onto each of the three draft gates. These are functions rather
+// than assignments inlined in the template because a template `v-if` does not narrow inside an
+// event handler's closure, so the inline form needs a non-null assertion at every call site —
+// and a `!` on a gate that has since been toggled off is the one shape that throws.
+function setCompanionGatingAxis(i: number | null, axis: EstimateAxis, value: number | undefined) {
+  const gating = i === null ? undefined : pipelines.draftGating[i]
+  if (gating) gating[ESTIMATE_AXIS_FIELD[axis]] = value
+}
+function setConsensusGatingAxis(i: number, axis: EstimateAxis, value: number | undefined) {
+  const gating = pipelines.draftConsensus[i]?.gating
+  if (gating) gating[ESTIMATE_AXIS_FIELD[axis]] = value
+}
+function setTesterQualityGatingAxis(i: number, axis: EstimateAxis, value: number | undefined) {
+  const gating = pipelines.draftTesterQuality[i]?.gating
+  if (gating) gating[ESTIMATE_AXIS_FIELD[axis]] = value
+}
+
 /** Toggle gating on/off for a draft step's consensus config. */
 function toggleGating(i: number) {
   const cfg = pipelines.draftConsensus[i]
@@ -124,6 +151,29 @@ function showOutputBudget(index: number): boolean {
 function inheritedOutputBudget(kind: AgentKind): number | undefined {
   return agentSettings.maxOutputTokensFor(kind)
 }
+/**
+ * Whether to offer the agent-kind VARIANT picker on this step: only when the deployment
+ * registered variants for its kind, and then only in advanced mode WHILE the step is still on the
+ * shipped prompt. Picking a variant is an OVERRIDE of what the kind ships, so `showOverrideField`
+ * keeps it visible the moment one is set — a step varied by a teammate (or by the API) must never
+ * become invisible to a basic-mode user who would then have no way to see, let alone undo, it.
+ */
+function showVariantPicker(index: number, kind: AgentKind): boolean {
+  if (!agents.variantsForKind(kind).length) return false
+  return showOverrideField(uiMode.isAdvanced, pipelines.draftAgentVariantId(index) ?? null)
+}
+
+/**
+ * The variants registered for a step's kind as USelect items, with an explicit "shipped prompt"
+ * entry so clearing the pick is a choice in the same list rather than a separate affordance.
+ */
+function variantSelectItems(kind: AgentKind) {
+  return [
+    { label: t('pipeline.builder.variantShipped'), value: '' },
+    ...agents.variantsForKind(kind).map((variant) => ({ label: variant.label, value: variant.id })),
+  ]
+}
+
 const releaseHealth = useReleaseHealthStore()
 const skills = useSkillsStore()
 
@@ -719,6 +769,29 @@ async function clone(p: Pipeline) {
                 </p>
               </div>
 
+              <!-- Agent-kind VARIANT picker: a deployment-registered alternate prompt for this
+                 step's kind (`stepOptions.agentVariantId`). The step still runs the kind — only
+                 the prompt changes — so this is an override of the shipped text, shown only where
+                 the deployment registered one. -->
+              <div
+                v-if="showVariantPicker(unit.index, unit.kind)"
+                class="ms-6 flex items-center gap-2"
+              >
+                <span class="text-[10px] text-slate-500">
+                  {{ t('pipeline.builder.variantLabel') }}
+                </span>
+                <USelect
+                  class="w-56"
+                  :model-value="pipelines.draftAgentVariantId(unit.index) ?? ''"
+                  :items="variantSelectItems(unit.kind)"
+                  value-key="value"
+                  size="xs"
+                  @update:model-value="
+                    pipelines.setDraftAgentVariantId(unit.index, $event || undefined)
+                  "
+                />
+              </div>
+
               <!-- This step's own output-token ceiling. An OVERRIDE of the workspace's per-kind
                  setting (itself an override of the deployment routing default), so it is
                  advanced-only until a value is pinned; empty inherits. -->
@@ -786,43 +859,15 @@ async function clone(p: Pipeline) {
                     @click="pipelines.toggleDraftGating(unit.companionIndex)"
                   />
                 </div>
-                <div
+                <EstimateThresholdFields
                   v-if="pipelines.draftGating[unit.companionIndex]?.enabled"
-                  class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2"
-                >
-                  <span class="text-[10px] text-slate-500">{{
-                    t('pipeline.builder.runWhenAny')
-                  }}</span>
-                  <label class="text-slate-400">{{
-                    t('pipeline.builder.complexityThreshold')
-                  }}</label>
-                  <input
-                    v-model.number="pipelines.draftGating[unit.companionIndex]!.minComplexity"
-                    type="number"
-                    min="0"
-                    max="1"
-                    step="0.1"
-                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  />
-                  <label class="text-slate-400">{{ t('pipeline.builder.riskThreshold') }}</label>
-                  <input
-                    v-model.number="pipelines.draftGating[unit.companionIndex]!.minRisk"
-                    type="number"
-                    min="0"
-                    max="1"
-                    step="0.1"
-                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  />
-                  <label class="text-slate-400">{{ t('pipeline.builder.impactThreshold') }}</label>
-                  <input
-                    v-model.number="pipelines.draftGating[unit.companionIndex]!.minImpact"
-                    type="number"
-                    min="0"
-                    max="1"
-                    step="0.1"
-                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  />
-                </div>
+                  :gating="pipelines.draftGating[unit.companionIndex]!"
+                  :axes="ESTIMATE_AXES"
+                  outcome="step"
+                  @update="
+                    (axis, value) => setCompanionGatingAxis(unit.companionIndex, axis, value)
+                  "
+                />
               </div>
 
               <!-- Consensus config (shown when the step is consensus-enabled). -->
@@ -953,31 +998,14 @@ async function clone(p: Pipeline) {
                       :title="t('pipeline.builder.consensusGateTooltip')"
                       @click="toggleGating(unit.index)"
                     />
-                    <template v-if="pipelines.draftConsensus[unit.index]!.gating?.enabled">
-                      <label class="text-slate-400">{{
-                        t('pipeline.builder.riskThreshold')
-                      }}</label>
-                      <input
-                        v-model.number="pipelines.draftConsensus[unit.index]!.gating!.minRisk"
-                        type="number"
-                        min="0"
-                        max="1"
-                        step="0.1"
-                        class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                      />
-                      <label class="text-slate-400">{{
-                        t('pipeline.builder.impactThreshold')
-                      }}</label>
-                      <input
-                        v-model.number="pipelines.draftConsensus[unit.index]!.gating!.minImpact"
-                        type="number"
-                        min="0"
-                        max="1"
-                        step="0.1"
-                        class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                      />
-                    </template>
                   </div>
+                  <EstimateThresholdFields
+                    v-if="pipelines.draftConsensus[unit.index]!.gating?.enabled"
+                    :gating="pipelines.draftConsensus[unit.index]!.gating!"
+                    :axes="CONSENSUS_ESTIMATE_AXES"
+                    outcome="consensus"
+                    @update="(axis, value) => setConsensusGatingAxis(unit.index, axis, value)"
+                  />
                 </template>
               </div>
 
@@ -1013,43 +1041,13 @@ async function clone(p: Pipeline) {
                     @click="pipelines.toggleDraftTesterQualityGating(unit.index)"
                   />
                 </div>
-                <div
+                <EstimateThresholdFields
                   v-if="pipelines.draftTesterQuality[unit.index]?.gating?.enabled"
-                  class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2"
-                >
-                  <span class="text-[10px] text-slate-500">{{
-                    t('pipeline.builder.runWhenAny')
-                  }}</span>
-                  <label class="text-slate-400">{{
-                    t('pipeline.builder.complexityThreshold')
-                  }}</label>
-                  <input
-                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minComplexity"
-                    type="number"
-                    min="0"
-                    max="1"
-                    step="0.1"
-                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  />
-                  <label class="text-slate-400">{{ t('pipeline.builder.riskThreshold') }}</label>
-                  <input
-                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minRisk"
-                    type="number"
-                    min="0"
-                    max="1"
-                    step="0.1"
-                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  />
-                  <label class="text-slate-400">{{ t('pipeline.builder.impactThreshold') }}</label>
-                  <input
-                    v-model.number="pipelines.draftTesterQuality[unit.index]!.gating!.minImpact"
-                    type="number"
-                    min="0"
-                    max="1"
-                    step="0.1"
-                    class="w-14 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  />
-                </div>
+                  :gating="pipelines.draftTesterQuality[unit.index]!.gating!"
+                  :axes="ESTIMATE_AXES"
+                  outcome="step"
+                  @update="(axis, value) => setTesterQualityGatingAxis(unit.index, axis, value)"
+                />
               </div>
             </li>
           </ol>

package/app/components/settings/ConsensusGroupsSection.vue

@@ -427,7 +427,10 @@ function fail(title: string, e: unknown) {
           {{ t('settings.consensusGroups.editor.gatedHint') }}
         </p>
         <div v-if="editor.gated" class="flex flex-wrap items-center gap-3 text-xs">
-          <label class="flex items-center gap-1.5 text-slate-400">
+          <label
+            class="flex items-center gap-1.5 text-slate-400"
+            :title="t('pipeline.builder.riskThresholdHint')"
+          >
             {{ t('pipeline.builder.riskThreshold') }}
             <UInput
               v-model.number="editor.minRisk"
@@ -439,7 +442,10 @@ function fail(title: string, e: unknown) {
               class="w-20"
             />
           </label>
-          <label class="flex items-center gap-1.5 text-slate-400">
+          <label
+            class="flex items-center gap-1.5 text-slate-400"
+            :title="t('pipeline.builder.impactThresholdHint')"
+          >
             {{ t('pipeline.builder.impactThreshold') }}
             <UInput
               v-model.number="editor.minImpact"
@@ -451,7 +457,10 @@ function fail(title: string, e: unknown) {
               class="w-20"
             />
           </label>
-          <label class="flex items-center gap-1.5 text-slate-400">
+          <label
+            class="flex items-center gap-1.5 text-slate-400"
+            :title="t('pipeline.builder.complexityThresholdHint')"
+          >
             {{ t('settings.consensusGroups.editor.complexityThreshold') }}
             <UInput
               v-model.number="editor.minComplexity"

package/app/composables/api/errors.ts

@@ -29,10 +29,17 @@ export class ApiError extends Error {
 
 /** The error envelope every controller emits (`handleError` / contract request-validator). */
 export interface ApiErrorEnvelope {
+  /** The status class — an `ApiErrorCode` from `@cat-factory/contracts`, when recognised. */
   code?: string
   message?: string
   details?: unknown
   issues?: { path?: string; message: string }[]
+  /**
+   * The request's correlation id (`mountRequestLogging` mints or adopts `X-Request-Id` and
+   * `handleError` puts it on EVERY envelope). It is the join between what the user saw and the
+   * one server log line that explains it, so any surface showing failure detail should quote it.
+   */
+  requestId?: string
 }
 
 /** Read the `{ error: {...} }` envelope out of a parsed response body, else undefined. */