@cat-factory/app 0.187.0 → 0.189.0

package/README.md

@@ -16,6 +16,7 @@ The SPA source lives under `app/` (the Nuxt srcDir).
 - [Tech stack](#tech-stack)
 - [Layout](#layout)
 - [Interface modes (basic / advanced)](#interface-modes-basic--advanced)
+- [Agent tiers (basic / intermediate / advanced)](#agent-tiers-basic--intermediate--advanced)
 - [Key UI surfaces](#key-ui-surfaces)
 - [Develop & test](#develop--test)
 
@@ -116,6 +117,31 @@ hoc where it can be avoided:
   `false` is a choice, not absence), so basic mode can never conceal a setting a run will
   actually use.
 
+## Agent tiers (basic / intermediate / advanced)
+
+A separate, narrower axis: how deep into the **agent catalog** a surface reaches. Every agent
+kind carries a `tier` — `basic` (the everyday delivery loop), `intermediate` (reached for
+regularly) or `advanced` (specialist) — and the two surfaces that enumerate the catalog, the
+**pipeline builder's palette** and the **model preset's per-agent override list**, show the
+selected tier and everything below it. They open on `basic`; the `AgentTierSelect` control on
+each widens them, with `advanced` showing the whole catalog. The choice is one shared,
+persisted preference (the `agentTier` store), because picking the agents a pipeline runs and
+picking what each of them runs on are halves of the same job.
+
+- The vocabulary, the default and the cumulative predicate live in `@cat-factory/contracts`
+  (`AGENT_TIERS` / `DEFAULT_AGENT_TIER` / `agentTierVisibleAt`), beside
+  `purposeAllowsAgentCategory` — so a **deployment-registered kind's** declared tier
+  (`presentation.tier`, carried in the workspace snapshot) and the SPA's own built-ins are
+  read by one rule. A kind that declares no tier is treated as `intermediate`.
+- **This is not the interface mode.** That tier decides which surfaces the whole SPA offers;
+  this one decides how much of one surface's catalog is listed. They are independent — an
+  advanced-mode user still starts on the basic agent tier — and the tier control is present in
+  **both** interface modes, since it is the only route to the kinds it hides.
+- A narrowed catalog states what it is holding back (the "n hidden at this tier" hint), and
+  the model preset list **always keeps a kind the edited preset already pins a model for**,
+  whatever the tier — the same rule `showOverrideField` states for a single field: a row the
+  user can neither read nor clear is worse than a longer list.
+
 ## Extending the layer (consumer modules)
 
 A deployment can contribute its own components — result windows, nav entries, inspector

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -124,6 +124,17 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
     @close="close"
   >
     <template v-if="session" #header-extras>
+      <!-- Which workspace consensus GROUP the run escalated to. Only a tiered step has one, and
+           the name is the session's own copy — so it still reads correctly after the library
+           entry was renamed or deleted. Without it, a reader asking "why did five models run on
+           this task" has the transcript but not the reason. -->
+      <span
+        v-if="session.groupName"
+        class="rounded-full bg-emerald-900/50 px-2.5 py-1 text-xs font-medium text-emerald-200"
+        :title="t('consensus.groupTitle')"
+      >
+        {{ session.groupName }}
+      </span>
       <span
         class="rounded-full px-2.5 py-1 text-xs font-medium"
         :class="STATUS_CLASS[session.status] ?? 'bg-slate-700 text-slate-300'"

package/app/components/palettes/AgentPalette.vue

@@ -3,10 +3,13 @@ import { computed } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import { purposeAllowsAgentCategory } from '@cat-factory/contracts'
 import type { AgentKind, PipelinePurpose } from '~/types/domain'
+import AgentTierSelect from '~/components/palettes/AgentTierSelect.vue'
+import { filterByAgentTier } from '~/utils/agentTier'
 import { AGENT_CATEGORIES, OBSERVABILITY_GATE_ARCHETYPE } from '~/utils/catalog'
 
 const { t } = useI18n()
 const agents = useAgentsStore()
+const agentTier = useAgentTierStore()
 const releaseHealth = useReleaseHealthStore()
 defineEmits<{ (e: 'add', kind: AgentKind): void }>()
 // The purpose of the pipeline being built. When set to a non-`build` classifier, the
@@ -16,7 +19,7 @@ const props = defineProps<{ purpose?: PipelinePurpose | null }>()
 
 // The post-release-health gate is only meaningful — and only accepted by the backend —
 // with an observability integration connected, so it appears in the palette ONLY then.
-const palette = computed(() => {
+const offered = computed(() => {
   const all = releaseHealth.connection.connected
     ? [...agents.archetypes, OBSERVABILITY_GATE_ARCHETYPE]
     : agents.archetypes
@@ -25,6 +28,13 @@ const palette = computed(() => {
   return all.filter((a) => !a.category || purposeAllowsAgentCategory(props.purpose, a.category))
 })
 
+// Then narrow to the selected tier. Applied AFTER the purpose gate so the "n hidden" hint
+// counts only what the TIER is holding back — a kind the pipeline's purpose rules out is not
+// something a wider tier would reveal, so counting it would send the user chasing a control
+// that cannot help them.
+const palette = computed(() => filterByAgentTier(offered.value, agentTier.tier))
+const hiddenByTier = computed(() => offered.value.length - palette.value.length)
+
 // Group the palette into the ordered catalog categories, plus a trailing "Custom" bucket
 // for runtime-added agents that carry no category. Empty groups are dropped.
 const groups = computed(() => {
@@ -54,6 +64,7 @@ function toggle(id: string) {
 <template>
   <div class="space-y-2">
     <p class="px-1 text-[11px] text-slate-500">{{ t('palette.hint') }}</p>
+    <AgentTierSelect :hidden-count="hiddenByTier" />
     <div class="space-y-2">
       <section v-for="g in groups" :key="g.id">
         <button

package/app/components/palettes/AgentTierSelect.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+// The agent-tier control, shared by the pipeline builder's palette and the model preset's
+// per-agent override list (the two surfaces that enumerate the agent catalog).
+//
+// Tiers are CUMULATIVE, so this is a level dial rather than a set of independent toggles:
+// `basic` is the everyday delivery loop, `intermediate` adds the kinds reached for regularly,
+// and `advanced` — the widest level — shows the whole catalog. The trailing hint states how
+// many kinds the current level is holding back, so a narrowed catalog never reads as the
+// complete one.
+import { computed } from 'vue'
+import { AGENT_TIERS, type AgentTier } from '@cat-factory/contracts'
+
+const { t } = useI18n()
+const agentTier = useAgentTierStore()
+
+const props = defineProps<{
+  /** How many kinds the current level hides. Renders the "n hidden" hint when > 0. */
+  hiddenCount?: number
+}>()
+
+// One STATIC literal `t()` key per tier (not a key assembled from the loop variable), so the
+// typed-message-keys check covers them — the same shape the vendor/enum-keyed sets use.
+const TIER_LABELS = computed<Record<AgentTier, string>>(() => ({
+  basic: t('agentTier.basic'),
+  intermediate: t('agentTier.intermediate'),
+  advanced: t('agentTier.advanced'),
+}))
+const TIER_HINTS = computed<Record<AgentTier, string>>(() => ({
+  basic: t('agentTier.basicHint'),
+  intermediate: t('agentTier.intermediateHint'),
+  advanced: t('agentTier.advancedHint'),
+}))
+
+const items = computed(() => [
+  AGENT_TIERS.map((tier) => ({
+    label: TIER_LABELS.value[tier],
+    // The hint is what distinguishes "everything below this level" from "only this level",
+    // which the bare tier names cannot say.
+    description: TIER_HINTS.value[tier],
+    icon: tier === agentTier.tier ? 'i-lucide-check' : 'i-lucide-layers',
+    onSelect: () => agentTier.setTier(tier),
+  })),
+])
+</script>
+
+<template>
+  <div class="space-y-1">
+    <UDropdownMenu :items="items" :ui="{ content: 'z-[60] max-w-72' }">
+      <UButton
+        size="xs"
+        color="neutral"
+        variant="soft"
+        icon="i-lucide-layers"
+        trailing-icon="i-lucide-chevron-down"
+        class="w-full justify-between"
+        :title="t('agentTier.tooltip')"
+      >
+        <span class="truncate">
+          {{ t('agentTier.label') }}: {{ TIER_LABELS[agentTier.tier] }}
+        </span>
+      </UButton>
+    </UDropdownMenu>
+    <p v-if="props.hiddenCount" class="px-1 text-[10px] text-slate-500">
+      {{ t('agentTier.hidden', { count: props.hiddenCount }, props.hiddenCount) }}
+    </p>
+  </div>
+</template>

package/app/components/pipeline/PipelineBuilder.vue

@@ -54,6 +54,34 @@ function toggleGating(i: number) {
     ? { ...cfg.gating, enabled: false }
     : { enabled: true, minRisk: 0.6, minImpact: 0.6, onMissingEstimate: 'consensus' }
 }
+
+// ---- The workspace consensus-GROUP tier set -------------------------------
+// A step either authors its panel inline (the participants + gating editor below) or names a
+// SET of workspace groups, each with its own estimate bar, and the engine runs the most
+// demanding tier the task clears. The two are mutually exclusive by design — a non-empty tier
+// set takes over — so the builder shows one editor or the other rather than both at once.
+const consensusGroups = useConsensusGroupsStore()
+
+/** Whether the draft step at `i` has escalated to the group library. */
+function usesGroups(i: number): boolean {
+  return (pipelines.draftConsensus[i]?.groupIds?.length ?? 0) > 0
+}
+
+function isGroupSelected(i: number, groupId: string): boolean {
+  return pipelines.draftConsensus[i]?.groupIds?.includes(groupId) ?? false
+}
+
+/**
+ * The bar a group sets, as display text: its highest named threshold, or the "always" label when
+ * it is ungated. What a reader needs from the tier list is where each panel sits relative to the
+ * others, which is exactly this one number.
+ */
+function groupBarLabel(groupId: string): string {
+  const group = consensusGroups.groups.find((g) => g.id === groupId)
+  if (!group) return ''
+  const bar = consensusGroups.barFor(group)
+  return bar === null ? t('pipeline.builder.consensusGroupAlways') : `≥ ${bar}`
+}
 const agents = useAgentsStore()
 const ui = useUiStore()
 const uiMode = useUiModeStore()
@@ -760,109 +788,155 @@ async function clone(p: Pipeline) {
                 v-if="pipelines.draftConsensus[unit.index]?.enabled"
                 class="ms-6 space-y-2 rounded-md border border-emerald-800/40 bg-emerald-950/20 p-2 text-xs"
               >
-                <div class="flex items-center gap-2">
-                  <label class="text-slate-400">{{ t('pipeline.builder.strategy') }}</label>
-                  <select
-                    v-model="pipelines.draftConsensus[unit.index]!.strategy"
-                    class="rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  >
-                    <option v-for="s in CONSENSUS_STRATEGIES" :key="s.value" :value="s.value">
-                      {{ s.label }}
-                    </option>
-                  </select>
-                  <label
-                    v-if="pipelines.draftConsensus[unit.index]!.strategy === 'debate'"
-                    class="ms-2 text-slate-400"
-                    >{{ t('pipeline.builder.rounds') }}</label
-                  >
-                  <input
-                    v-if="pipelines.draftConsensus[unit.index]!.strategy === 'debate'"
-                    v-model.number="pipelines.draftConsensus[unit.index]!.rounds"
-                    type="number"
-                    min="1"
-                    max="5"
-                    placeholder="2"
-                    class="w-12 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                  />
+                <!-- The workspace consensus-GROUP tier set: pick which reusable panels this
+                     step may escalate to. Each group carries its own estimate bar; the engine
+                     runs the most demanding one the task clears, and none clearing means the
+                     standard single agent runs. Selecting any group replaces the inline panel
+                     editor below, so the step has exactly one source of truth for its panel. -->
+                <div
+                  v-if="consensusGroups.hasGroups"
+                  class="space-y-1 border-b border-slate-800 pb-2"
+                >
+                  <div class="flex items-center gap-1.5">
+                    <UIcon name="i-lucide-layers" class="h-3.5 w-3.5 text-emerald-400" />
+                    <span class="text-slate-300">{{ t('pipeline.builder.consensusGroups') }}</span>
+                  </div>
+                  <p class="text-[11px] text-slate-500">
+                    {{ t('pipeline.builder.consensusGroupsHint') }}
+                  </p>
+                  <div class="flex flex-wrap gap-1">
+                    <button
+                      v-for="group in consensusGroups.groups"
+                      :key="group.id"
+                      type="button"
+                      class="rounded border px-1.5 py-0.5 text-[11px]"
+                      :class="
+                        isGroupSelected(unit.index, group.id)
+                          ? 'border-emerald-600 bg-emerald-900/40 text-emerald-200'
+                          : 'border-slate-700 bg-slate-900 text-slate-400 hover:text-slate-200'
+                      "
+                      :title="group.description"
+                      @click="pipelines.toggleDraftConsensusGroup(unit.index, group.id)"
+                    >
+                      {{ group.name }}
+                      <span class="ms-1 text-slate-500">{{ groupBarLabel(group.id) }}</span>
+                    </button>
+                  </div>
                 </div>
 
-                <!-- participants -->
-                <div class="space-y-1">
-                  <div
-                    v-for="(p, pIdx) in pipelines.draftConsensus[unit.index]!.participants"
-                    :key="p.id"
-                    class="flex items-center gap-1.5"
-                  >
-                    <input
-                      v-model="p.role"
-                      :placeholder="t('pipeline.builder.rolePlaceholder')"
-                      class="w-28 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
-                    />
+                <div v-if="usesGroups(unit.index)" class="text-[11px] text-slate-500">
+                  {{ t('pipeline.builder.consensusGroupsActive') }}
+                </div>
+
+                <template v-else>
+                  <div class="flex items-center gap-2">
+                    <label class="text-slate-400">{{ t('pipeline.builder.strategy') }}</label>
+                    <select
+                      v-model="pipelines.draftConsensus[unit.index]!.strategy"
+                      class="rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                    >
+                      <option v-for="s in CONSENSUS_STRATEGIES" :key="s.value" :value="s.value">
+                        {{ s.label }}
+                      </option>
+                    </select>
+                    <label
+                      v-if="pipelines.draftConsensus[unit.index]!.strategy === 'debate'"
+                      class="ms-2 text-slate-400"
+                      >{{ t('pipeline.builder.rounds') }}</label
+                    >
                     <input
-                      v-model="p.modelId"
-                      :placeholder="t('pipeline.builder.modelIdPlaceholder')"
-                      class="flex-1 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-300"
+                      v-if="pipelines.draftConsensus[unit.index]!.strategy === 'debate'"
+                      v-model.number="pipelines.draftConsensus[unit.index]!.rounds"
+                      type="number"
+                      min="1"
+                      max="5"
+                      placeholder="2"
+                      class="w-12 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
                     />
+                  </div>
+
+                  <!-- participants -->
+                  <div class="space-y-1">
+                    <div
+                      v-for="(p, pIdx) in pipelines.draftConsensus[unit.index]!.participants"
+                      :key="p.id"
+                      class="flex items-center gap-1.5"
+                    >
+                      <input
+                        v-model="p.role"
+                        :placeholder="t('pipeline.builder.rolePlaceholder')"
+                        class="w-28 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-100"
+                      />
+                      <input
+                        v-model="p.modelId"
+                        :placeholder="t('pipeline.builder.modelIdPlaceholder')"
+                        class="flex-1 rounded border border-slate-700 bg-slate-900 px-1.5 py-0.5 text-slate-300"
+                      />
+                      <UButton
+                        icon="i-lucide-x"
+                        color="error"
+                        variant="ghost"
+                        size="xs"
+                        :disabled="pipelines.draftConsensus[unit.index]!.participants.length <= 2"
+                        :title="t('pipeline.builder.removeParticipant')"
+                        @click="removeParticipant(unit.index, pIdx)"
+                      />
+                    </div>
                     <UButton
-                      icon="i-lucide-x"
-                      color="error"
+                      icon="i-lucide-plus"
+                      color="neutral"
                       variant="ghost"
                       size="xs"
-                      :disabled="pipelines.draftConsensus[unit.index]!.participants.length <= 2"
-                      :title="t('pipeline.builder.removeParticipant')"
-                      @click="removeParticipant(unit.index, pIdx)"
+                      :label="t('pipeline.builder.addParticipant')"
+                      @click="addParticipant(unit.index)"
                     />
                   </div>
-                  <UButton
-                    icon="i-lucide-plus"
-                    color="neutral"
-                    variant="ghost"
-                    size="xs"
-                    :label="t('pipeline.builder.addParticipant')"
-                    @click="addParticipant(unit.index)"
-                  />
-                </div>
 
-                <!-- gating -->
-                <div class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2">
-                  <UButton
-                    :icon="
-                      pipelines.draftConsensus[unit.index]!.gating?.enabled
-                        ? 'i-lucide-toggle-right'
-                        : 'i-lucide-toggle-left'
-                    "
-                    :color="
-                      pipelines.draftConsensus[unit.index]!.gating?.enabled ? 'success' : 'neutral'
-                    "
-                    variant="ghost"
-                    size="xs"
-                    :label="t('pipeline.builder.gateOnEstimate')"
-                    :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"
+                  <!-- gating -->
+                  <div class="flex flex-wrap items-center gap-2 border-t border-slate-800 pt-2">
+                    <UButton
+                      :icon="
+                        pipelines.draftConsensus[unit.index]!.gating?.enabled
+                          ? 'i-lucide-toggle-right'
+                          : 'i-lucide-toggle-left'
+                      "
+                      :color="
+                        pipelines.draftConsensus[unit.index]!.gating?.enabled
+                          ? 'success'
+                          : 'neutral'
+                      "
+                      variant="ghost"
+                      size="xs"
+                      :label="t('pipeline.builder.gateOnEstimate')"
+                      :title="t('pipeline.builder.consensusGateTooltip')"
+                      @click="toggleGating(unit.index)"
                     />
-                  </template>
-                </div>
+                    <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>
+                </template>
               </div>
 
               <!-- Test quality-control companion config (shown when QC is enabled on a Tester

package/app/components/pipeline/PipelineHealthModal.vue

@@ -3,15 +3,22 @@
 // `usePipelineHealth` reports any issue. Lists:
 //   • new built-in pipelines the workspace doesn't have yet (ADD them);
 //   • invalid pipelines (unknown agent kind / bad shape) — DELETE a custom one, RESEED a built-in;
-//   • outdated built-ins (a newer catalog definition is available) — RESEED to adopt it.
+//   • outdated built-ins (a newer catalog definition is available) — RESEED to adopt it;
+//   • RETIRED built-ins (withdrawn from the catalog) — REMOVE them; there is nothing left to
+//     reseed from, which is why they are the one built-in the backend lets a delete through.
 // Adding a new built-in and reseeding an existing one are the same reseed call (it creates or
 // updates by catalog id). Detection is client-side (see usePipelineHealth); the actions hit the
 // pipelines store.
 const { t } = useI18n()
 const ui = useUiStore()
 const pipelines = usePipelinesStore()
-const { invalid, outdated, newPipelines, hasIssues } = usePipelineHealth()
-const toast = useToast()
+const { invalid, outdated, newPipelines, retired, hasIssues } = usePipelineHealth()
+// Failures go through the shared conflict presenter rather than a raw `toast.add`: the refusals
+// this screen actually provokes are 409s (a recurring schedule still points at the pipeline), and
+// those carry a machine-readable `details.reason` the presenter turns into translated remedy copy.
+// Dumping `error.message` instead would put untranslated backend prose in front of every non-English
+// user — on the one screen whose whole purpose is telling them what to do next.
+const { present } = usePipelineErrorToast()
 
 const open = computed({
   get: () => ui.pipelineHealthOpen,
@@ -25,17 +32,14 @@ const busy = ref<Set<string>>(new Set())
 const isBusy = (id: string) => busy.value.has(id)
 const anyBusy = computed(() => busy.value.size > 0)
 
-async function run(id: string, action: () => Promise<unknown>, failTitle: string) {
+/** `failTitleKey` is an i18n KEY (not resolved copy) — `present` uses it only when the failure has
+ *  no mapped conflict reason of its own. */
+async function run(id: string, action: () => Promise<unknown>, failTitleKey: string) {
   busy.value = new Set(busy.value).add(id)
   try {
     await action()
   } catch (e) {
-    toast.add({
-      title: failTitle,
-      description: e instanceof Error ? e.message : String(e),
-      icon: 'i-lucide-triangle-alert',
-      color: 'error',
-    })
+    present(e, failTitleKey)
   } finally {
     const next = new Set(busy.value)
     next.delete(id)
@@ -44,9 +48,19 @@ async function run(id: string, action: () => Promise<unknown>, failTitle: string
 }
 
 const reseed = (id: string) =>
-  run(id, () => pipelines.reseed(id), t('pipeline.health.toast.reseedFailed'))
+  run(id, () => pipelines.reseed(id), 'pipeline.health.toast.reseedFailed')
 const remove = (id: string) =>
-  run(id, () => pipelines.removePipeline(id), t('pipeline.health.toast.deleteFailed'))
+  run(id, () => pipelines.removePipeline(id), 'pipeline.health.toast.deleteFailed')
+// Same call as `remove`, different failure copy: the retired section says "Remove" (the pipeline is
+// gone from the catalog), so a failure toast reading "could not DELETE" would name an action the
+// user was never offered. This is only the FALLBACK title — the likely failure here is a recurring
+// schedule still pointing at the pipeline, which arrives as a 409 the presenter words itself.
+const removeRetired = (id: string) =>
+  run(id, () => pipelines.removePipeline(id), 'pipeline.health.toast.removeFailed')
+
+// Removals are deliberately per-row with no bulk twin, unlike the reseeds below: a reseed restores
+// what the catalog says, while a delete is the one irreversible action on this screen (a built-in
+// the catalog no longer defines cannot be reseeded back). One click per pipeline is the point.
 
 /** Reseed every reseedable pipeline (new + outdated built-ins + invalid built-ins) in one go. */
 async function reseedAll() {
@@ -179,6 +193,48 @@ const reseedableCount = computed(
           </ul>
         </section>
 
+        <!-- Retired built-ins: withdrawn from the catalog, so the only action is removal. -->
+        <section v-if="retired.length" class="space-y-2">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-archive-x" class="h-4 w-4 text-slate-400" />
+            <h3 class="text-sm font-semibold text-slate-200">
+              {{ t('pipeline.health.retiredHeading') }}
+            </h3>
+          </div>
+          <p class="text-[11px] text-slate-500">{{ t('pipeline.health.retiredDescription') }}</p>
+          <ul class="space-y-2">
+            <li
+              v-for="r in retired"
+              :key="r.pipeline.id"
+              class="flex items-center justify-between gap-3 rounded-lg border border-slate-800 bg-slate-900/40 p-3"
+            >
+              <div class="min-w-0">
+                <span class="truncate text-sm font-medium text-slate-100">{{
+                  r.pipeline.name
+                }}</span>
+                <p class="text-[11px] text-slate-400/80">
+                  {{
+                    r.replacement
+                      ? t('pipeline.health.retiredReplacedBy', { name: r.replacement.name })
+                      : t('pipeline.health.retiredNote')
+                  }}
+                </p>
+              </div>
+              <UButton
+                size="xs"
+                color="error"
+                variant="subtle"
+                icon="i-lucide-trash-2"
+                :loading="isBusy(r.pipeline.id)"
+                :disabled="anyBusy"
+                @click="removeRetired(r.pipeline.id)"
+              >
+                {{ t('pipeline.health.remove') }}
+              </UButton>
+            </li>
+          </ul>
+        </section>
+
         <!-- Outdated built-ins: a newer catalog version is available. -->
         <section v-if="outdated.length" class="space-y-2">
           <div class="flex items-center gap-2">