@cat-factory/app 0.256.3 → 0.258.0

package/app/components/pipeline/BinaryOutputStepPicker.vue

@@ -23,12 +23,24 @@ import { computed, ref, watch } from 'vue'
 import {
   ASSET_STORAGE_CAPABILITY,
   GENERATION_CONTEXT_CAPABILITY,
+  isBinaryGeneratorCapability,
   isBinaryModality,
+  type BinaryGenerationOptions,
+  type BinaryGeneratorCapability,
   type BinaryModality,
   type BinaryOutputConfig,
+  type ConflictingOutputSizeOption,
 } from '@cat-factory/contracts'
 import { binaryOutputPickIssues, type BinaryOutputPickIssue } from '~/utils/binaryOutput'
-import { parseMediaTypeRequirement, sameFormats } from './BinaryOutputStepPicker.logic'
+import {
+  formatExtent,
+  formatReferenceImages,
+  generationControlOffer,
+  parseExtent,
+  parseMediaTypeRequirement,
+  parseReferenceImages,
+  sameFormats,
+} from './BinaryOutputStepPicker.logic'
 
 const props = defineProps<{ index: number }>()
 
@@ -241,6 +253,181 @@ const overlapSummary = computed(() =>
     .join('; '),
 )
 
+/**
+ * The capability vocabulary, as STATIC literal `t()` keys: one per member, never assembled at
+ * runtime, so the typed-message-key check covers them (the standing rule for an enum-keyed set).
+ */
+const CAPABILITY_LABELS: Record<BinaryGeneratorCapability, () => string> = {
+  'reference-image': () => t('pipeline.builder.binaryCapability.reference-image'),
+  'multi-reference': () => t('pipeline.builder.binaryCapability.multi-reference'),
+  'instruction-edit': () => t('pipeline.builder.binaryCapability.instruction-edit'),
+  'mask-edit': () => t('pipeline.builder.binaryCapability.mask-edit'),
+  'negative-prompt': () => t('pipeline.builder.binaryCapability.negative-prompt'),
+  seed: () => t('pipeline.builder.binaryCapability.seed'),
+  'aspect-ratio': () => t('pipeline.builder.binaryCapability.aspect-ratio'),
+  'exact-size': () => t('pipeline.builder.binaryCapability.exact-size'),
+  'candidate-batch': () => t('pipeline.builder.binaryCapability.candidate-batch'),
+  upscale: () => t('pipeline.builder.binaryCapability.upscale'),
+  'transparent-background': () => t('pipeline.builder.binaryCapability.transparent-background'),
+  tileable: () => t('pipeline.builder.binaryCapability.tileable'),
+}
+
+/**
+ * The options that restate a delivered size, named by the FIELD LABEL each one carries in this
+ * form, so the refusal points at a control the reader can see. Static literal keys, the
+ * enum-keyed-set rule again; the union is closed here (not a persisted vocabulary a stale step
+ * could carry a retired member of), so the lookup needs no membership guard.
+ */
+const SIZE_CONFLICT_LABELS: Record<ConflictingOutputSizeOption, () => string> = {
+  aspectRatio: () => t('pipeline.builder.binaryAspectRatio'),
+  upscale: () => t('pipeline.builder.binaryUpscale'),
+}
+
+/**
+ * A capability in the reader's language, INCLUDING one this build does not define.
+ *
+ * The `Record` is exhaustive over the union and the lookup is still not total: the integrations
+ * ride the workspace snapshot, and on a mothership-mode deployment that snapshot is served by a
+ * process which may be a build AHEAD of this one. A bare lookup on such a value is a `TypeError`
+ * on the surface where the selection is made. Same guard, same reason, as `modalityLabel`.
+ */
+function capabilityLabel(capability: BinaryGeneratorCapability): string {
+  return isBinaryGeneratorCapability(capability)
+    ? CAPABILITY_LABELS[capability]()
+    : t('pipeline.builder.binaryCapabilityUnknown', { capability: String(capability) })
+}
+
+const generation = computed<BinaryGenerationOptions>(() => config.value?.generation ?? {})
+
+/** The registered integrations this step has selected, in the order the step names them. */
+const selectedGenerators = computed(() => {
+  const byId = new Map(agents.binaryGenerators.map((generator) => [generator.id, generator]))
+  return (config.value?.generatorIds ?? []).flatMap((id) => byId.get(id) ?? [])
+})
+
+/**
+ * Whether to OFFER the control an option belongs to. The rule itself is pure and lives in the
+ * logic sibling, where its three cases (undeclared, declared, already-set) are testable without
+ * mounting this component.
+ */
+const offers = computed(() => generationControlOffer(selectedGenerators.value, generation.value))
+
+/** The edit modes, as static literal keys: the enum-keyed-set rule again. */
+const editModeItems = computed(() => [
+  { label: t('pipeline.builder.binaryEditModeInstruction'), value: 'instruction' },
+  { label: t('pipeline.builder.binaryEditModeMask'), value: 'mask' },
+])
+
+/**
+ * Patch ONE generation option, dropping it when it is cleared.
+ *
+ * A cleared option is REMOVED rather than stored as an empty value, because the two are different
+ * requirements: an absent `seed` means the step does not pin one, while `seed: 0` is a pinned
+ * seed of zero, and admission judges the option's PRESENCE.
+ */
+function setGeneration(fields: Partial<BinaryGenerationOptions>) {
+  const next: Record<string, unknown> = { ...generation.value, ...fields }
+  for (const [key, value] of Object.entries(fields)) {
+    if (value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
+      delete next[key]
+    }
+  }
+  patch({
+    generation: Object.keys(next).length > 0 ? (next as BinaryGenerationOptions) : undefined,
+  })
+}
+
+/**
+ * The size fields' own text, held locally like {@link referenceText} and for the same reason: a
+ * control has to render what is being typed, and the step must not store what is being typed.
+ *
+ * The pair is ONE requirement, so it reaches the step only once BOTH halves read as a pixel
+ * extent. Writing the unset half as 0 while the first number is typed would store a value the
+ * schema refuses (the minimum is 1), which makes the step unsaveable behind an opaque validation
+ * error and renders "0" back into a field nobody touched. A half-entered pair is instead simply
+ * not stored, and {@link outputSizeIncomplete} says so where it is being typed.
+ */
+const outputSizeText = ref({
+  width: formatExtent(config.value?.generation?.outputSize?.width),
+  height: formatExtent(config.value?.generation?.outputSize?.height),
+})
+
+watch(
+  () => config.value?.generation?.outputSize,
+  (size) => {
+    outputSizeText.value = { width: formatExtent(size?.width), height: formatExtent(size?.height) }
+  },
+)
+
+/** One half is filled and the other is not, so nothing is stored and the composer is told why. */
+const outputSizeIncomplete = computed(() => {
+  const filled = [outputSizeText.value.width, outputSizeText.value.height].filter(
+    (half) => half.trim() !== '',
+  )
+  return filled.length === 1
+})
+
+/** Patch ONE half of the exact output size, committing the pair only once both halves read. */
+function setOutputSize(axis: 'width' | 'height', raw: string) {
+  outputSizeText.value = { ...outputSizeText.value, [axis]: raw }
+  const width = parseExtent(outputSizeText.value.width)
+  const height = parseExtent(outputSizeText.value.height)
+  setGeneration({ outputSize: width !== null && height !== null ? { width, height } : undefined })
+}
+
+/** The reference-image field's text, and the lines it refused (see `parseReferenceImages`). */
+const referenceText = ref(formatReferenceImages(config.value?.generation?.referenceImages))
+const unusableReferences = ref<string[]>([])
+
+watch(
+  () => config.value?.generation?.referenceImages,
+  (references) => {
+    referenceText.value = formatReferenceImages(references)
+  },
+)
+
+function setReferences(text: string) {
+  const { usable, unusable } = parseReferenceImages(text)
+  unusableReferences.value = unusable
+  referenceText.value = formatReferenceImages(usable)
+  setGeneration({ referenceImages: usable })
+}
+
+/**
+ * Turn the candidate comparison on or off. Off DROPS the whole bag rather than storing a disabled
+ * one: the presence of `comparison` is what the engine reads, so a saved "off" object would be a
+ * configuration describing a behaviour the run does not have.
+ */
+function setComparison(on: boolean) {
+  patch({ comparison: on ? (config.value?.comparison ?? {}) : undefined })
+}
+
+function setPerGenerator(value: number) {
+  const current = config.value?.comparison
+  if (!current) return
+  patch({ comparison: { ...current, perGenerator: value } })
+}
+
+function setMultiSelect(on: boolean) {
+  const current = config.value?.comparison
+  if (!current) return
+  patch({
+    comparison: on ? { ...current, multiSelect: true } : { perGenerator: current.perGenerator },
+  })
+}
+
+/**
+ * Whether the step could actually produce a comparison: the SAME rule
+ * `assertComparableCandidates` refuses at save, stated here where it is fixable. Without it a
+ * step saves clean, starts, and keeps its only candidate without ever asking anyone.
+ */
+const comparisonUnreachable = computed(() => {
+  const comparison = config.value?.comparison
+  if (!comparison) return false
+  if ((comparison.perGenerator ?? 1) > 1) return false
+  return (config.value?.generatorIds?.length ?? 0) < 2
+})
+
 /** What the SELECTED integrations say they emit — the discoverable half of the free-text field. */
 const declaredFormats = computed(() => {
   const byId = new Map(agents.binaryGenerators.map((generator) => [generator.id, generator]))
@@ -347,6 +534,241 @@ const declaredFormats = computed(() => {
       }}
     </p>
 
+    <!-- GENERATION OPTIONS. Each control is gated on a capability the selected integrations
+         declare, so a step cannot ask for a reference image from an endpoint that takes no image
+         input. While nothing has DECLARED its capabilities every control stays offered and the
+         advisory line below says the support is unconfirmed: hiding one would be a claim about a
+         vendor's API that nobody established. Both tiers, like the rest of this picker: an
+         option nobody stated is an option the run does not apply. -->
+    <template v-if="config?.storageServiceId">
+      <div v-if="offers('reference-image')" class="flex items-start gap-2">
+        <span class="mt-1 text-[10px] text-slate-500">{{
+          t('pipeline.builder.binaryReferenceImages')
+        }}</span>
+        <UTextarea
+          class="w-56"
+          :rows="2"
+          size="xs"
+          :model-value="referenceText"
+          :placeholder="t('pipeline.builder.binaryReferenceImagesPlaceholder')"
+          data-testid="binary-output-reference-input"
+          @update:model-value="referenceText = String($event)"
+          @change="setReferences(referenceText)"
+        />
+      </div>
+      <p
+        v-if="unusableReferences.length"
+        class="ms-1 text-[10px] text-amber-400"
+        data-testid="binary-output-reference-unusable"
+      >
+        {{
+          t('pipeline.builder.binaryReferenceImagesUnusable', {
+            entries: unusableReferences.join('; '),
+          })
+        }}
+      </p>
+
+      <div v-if="offers('instruction-edit') || offers('mask-edit')" class="flex items-center gap-2">
+        <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryEditMode') }}</span>
+        <USelect
+          class="w-56"
+          size="xs"
+          :model-value="generation.edit?.mode ?? ''"
+          :items="editModeItems"
+          value-key="value"
+          :placeholder="t('pipeline.builder.binaryEditModeNone')"
+          data-testid="binary-output-edit-mode"
+          @update:model-value="
+            setGeneration({
+              edit: $event
+                ? { ...generation.edit, mode: $event as 'instruction' | 'mask' }
+                : undefined,
+            })
+          "
+        />
+      </div>
+      <div v-if="generation.edit" class="flex items-center gap-2">
+        <span class="text-[10px] text-slate-500">{{
+          t('pipeline.builder.binaryEditInstruction')
+        }}</span>
+        <UInput
+          class="w-56"
+          size="xs"
+          :model-value="generation.edit.instruction ?? ''"
+          :placeholder="t('pipeline.builder.binaryEditInstructionPlaceholder')"
+          data-testid="binary-output-edit-instruction"
+          @change="
+            setGeneration({
+              edit: { ...generation.edit!, instruction: ($event.target as HTMLInputElement).value },
+            })
+          "
+        />
+      </div>
+
+      <div v-if="offers('negative-prompt')" class="flex items-center gap-2">
+        <span class="text-[10px] text-slate-500">{{
+          t('pipeline.builder.binaryNegativePrompt')
+        }}</span>
+        <UInput
+          class="w-56"
+          size="xs"
+          :model-value="generation.negativePrompt ?? ''"
+          :placeholder="t('pipeline.builder.binaryNegativePromptPlaceholder')"
+          data-testid="binary-output-negative-prompt"
+          @change="
+            setGeneration({ negativePrompt: ($event.target as HTMLInputElement).value.trim() })
+          "
+        />
+      </div>
+
+      <div v-if="offers('aspect-ratio')" class="flex items-center gap-2">
+        <span class="text-[10px] text-slate-500">{{
+          t('pipeline.builder.binaryAspectRatio')
+        }}</span>
+        <UInput
+          class="w-56"
+          size="xs"
+          :model-value="generation.aspectRatio ?? ''"
+          :placeholder="t('pipeline.builder.binaryAspectRatioPlaceholder')"
+          data-testid="binary-output-aspect-ratio"
+          @change="setGeneration({ aspectRatio: ($event.target as HTMLInputElement).value.trim() })"
+        />
+      </div>
+
+      <!-- Two numbers rather than one free-text "WxH": the requirement is a pair of integers and
+           a parser over a string is a second place for it to be wrong. Offered only where an
+           integration declares `exact-size`, because a bucketed endpoint cannot be asked for
+           dimensions at all and a control implying otherwise is the misconception this axis
+           exists to remove. -->
+      <div v-if="offers('exact-size')" class="flex flex-col gap-1">
+        <div class="flex items-center gap-2">
+          <span class="text-[10px] text-slate-500">{{
+            t('pipeline.builder.binaryOutputSize')
+          }}</span>
+          <UInput
+            class="w-24"
+            type="number"
+            size="xs"
+            :model-value="outputSizeText.width"
+            :placeholder="t('pipeline.builder.binaryOutputSizeWidth')"
+            data-testid="binary-output-size-width"
+            @change="setOutputSize('width', ($event.target as HTMLInputElement).value)"
+          />
+          <span class="text-[10px] text-slate-500">×</span>
+          <UInput
+            class="w-24"
+            type="number"
+            size="xs"
+            :model-value="outputSizeText.height"
+            :placeholder="t('pipeline.builder.binaryOutputSizeHeight')"
+            data-testid="binary-output-size-height"
+            @change="setOutputSize('height', ($event.target as HTMLInputElement).value)"
+          />
+        </div>
+        <!-- Nothing is stored until both halves read, so the half-entered state is stated where
+             it is being typed. Silence there would be a field that looks filled in and a step
+             that does not carry the requirement. -->
+        <p
+          v-if="outputSizeIncomplete"
+          class="text-[10px] text-amber-400"
+          data-testid="binary-output-size-incomplete"
+        >
+          {{ t('pipeline.builder.binaryOutputSizeIncomplete') }}
+        </p>
+      </div>
+
+      <div v-if="offers('seed')" class="flex items-center gap-2">
+        <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binarySeed') }}</span>
+        <UInput
+          class="w-56"
+          type="number"
+          size="xs"
+          :model-value="generation.seed === undefined ? '' : String(generation.seed)"
+          :placeholder="t('pipeline.builder.binarySeedPlaceholder')"
+          data-testid="binary-output-seed"
+          @change="
+            setGeneration({
+              seed: ($event.target as HTMLInputElement).value
+                ? Number(($event.target as HTMLInputElement).value)
+                : undefined,
+            })
+          "
+        />
+      </div>
+
+      <div class="flex flex-wrap items-center gap-3">
+        <label v-if="offers('transparent-background')" class="flex items-center gap-1.5">
+          <UCheckbox
+            :model-value="generation.transparentBackground === true"
+            data-testid="binary-output-transparent"
+            @update:model-value="
+              setGeneration({ transparentBackground: $event ? true : undefined })
+            "
+          />
+          <span class="text-[10px] text-slate-500">{{
+            t('pipeline.builder.binaryTransparent')
+          }}</span>
+        </label>
+        <label v-if="offers('tileable')" class="flex items-center gap-1.5">
+          <UCheckbox
+            :model-value="generation.tileable === true"
+            data-testid="binary-output-tileable"
+            @update:model-value="setGeneration({ tileable: $event ? true : undefined })"
+          />
+          <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryTileable') }}</span>
+        </label>
+        <label v-if="offers('upscale')" class="flex items-center gap-1.5">
+          <UCheckbox
+            :model-value="generation.upscale !== undefined"
+            data-testid="binary-output-upscale"
+            @update:model-value="setGeneration({ upscale: $event ? 2 : undefined })"
+          />
+          <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryUpscale') }}</span>
+        </label>
+      </div>
+
+      <!-- CANDIDATE COMPARISON: generate several and let a person choose, rather than letting the
+           agent commit to one producer unobserved. -->
+      <label class="flex items-center gap-1.5">
+        <UCheckbox
+          :model-value="config.comparison !== undefined"
+          data-testid="binary-output-comparison"
+          @update:model-value="setComparison($event === true)"
+        />
+        <span class="text-[10px] text-slate-500">{{ t('pipeline.builder.binaryComparison') }}</span>
+      </label>
+      <div v-if="config.comparison" class="ms-6 flex flex-wrap items-center gap-3">
+        <span class="text-[10px] text-slate-500">{{
+          t('pipeline.builder.binaryPerGenerator')
+        }}</span>
+        <USelect
+          class="w-20"
+          size="xs"
+          :model-value="config.comparison.perGenerator ?? 1"
+          :items="[1, 2, 3, 4]"
+          data-testid="binary-output-per-generator"
+          @update:model-value="setPerGenerator(Number($event))"
+        />
+        <label class="flex items-center gap-1.5">
+          <UCheckbox
+            :model-value="config.comparison.multiSelect === true"
+            data-testid="binary-output-multi-select"
+            @update:model-value="setMultiSelect($event === true)"
+          />
+          <span class="text-[10px] text-slate-500">{{
+            t('pipeline.builder.binaryMultiSelect')
+          }}</span>
+        </label>
+      </div>
+      <p
+        v-if="comparisonUnreachable"
+        class="text-[10px] text-amber-400"
+        data-testid="binary-output-comparison-unreachable"
+      >
+        {{ t('pipeline.builder.binaryComparisonUnreachable') }}
+      </p>
+    </template>
+
     <!-- Every refusal this step would hit, named where it is fixable. Each is its own line
          with its own remedy: an unreachable catalog is not an empty one, a lost service is not
          an untagged one, and a lost CONTEXT service is not a lost storage target. -->
@@ -448,6 +870,46 @@ const declaredFormats = computed(() => {
     >
       {{ t('pipeline.builder.binaryOutputGeneratorOverlap', { overlaps: overlapSummary }) }}
     </p>
+    <p
+      v-if="has('capability_unsupported')"
+      class="text-[10px] text-amber-400"
+      data-testid="binary-output-capability-unsupported"
+    >
+      {{
+        t('pipeline.builder.binaryCapabilityUnsupported', {
+          capabilities: pick.unsupportedCapabilities.map(capabilityLabel).join(', '),
+        })
+      }}
+    </p>
+    <!-- A refusal the SAVE makes on the step's own fields, so it is stated here rather than
+         waited for: all three controls are offered together, and the remedy is deleting one of
+         two values on this form. -->
+    <p
+      v-if="has('output_size_ambiguous')"
+      class="text-[10px] text-amber-400"
+      data-testid="binary-output-size-ambiguous"
+    >
+      {{
+        t('pipeline.builder.binaryOutputSizeAmbiguous', {
+          options: pick.conflictingSizeOptions.map((o) => SIZE_CONFLICT_LABELS[o]()).join(', '),
+        })
+      }}
+    </p>
+    <!-- ADVISORY, grouped with the other two: an integration that declared no capabilities has
+         said only that they are unknown, and every integration registered before this axis
+         existed is in exactly that state. Styling it as a refusal would flag most working
+         selections in the product. -->
+    <p
+      v-if="has('capability_unverifiable')"
+      class="text-[10px] text-slate-500"
+      data-testid="binary-output-capability-unverifiable"
+    >
+      {{
+        t('pipeline.builder.binaryCapabilityUnverifiable', {
+          capabilities: pick.unverifiableCapabilities.map(capabilityLabel).join(', '),
+        })
+      }}
+    </p>
     <p
       v-if="unusableMediaTypes.length"
       class="text-[10px] text-amber-400"

package/app/components/pipeline/PipelineBuilder.vue

@@ -12,11 +12,20 @@ import BinaryOutputStepPicker from '~/components/pipeline/BinaryOutputStepPicker
 import { ESTIMATE_AXES, ESTIMATE_AXIS_FIELD, type EstimateAxis } from '~/utils/estimateGating'
 import { showOverrideField } from '~/utils/uiMode'
 import { narrowPipelineLibrary } from '~/utils/pipelineLibrary'
+import { CONDITION_MARKERS, stepConditionsAt } from '~/utils/pipeline'
+
+/** The cycle button's icon per state — the two condition markers, plus the unconditional one. */
+const CONDITION_ICONS = {
+  always: 'i-lucide-infinity',
+  frontend: CONDITION_MARKERS.frontend.icon,
+  backend: CONDITION_MARKERS.backend.icon,
+} as const
 import {
   agentKindMeta,
   companionForProducer,
   isConsensusEligibleKind,
   isTesterKind,
+  mayCarrySkipAxis,
 } from '~/utils/catalog'
 import type { ConsensusStrategy } from '~/types/consensus'
 
@@ -611,6 +620,31 @@ async function clone(p: Pipeline) {
                     "
                     @click="toggleEnabled(unit)"
                   />
+                  <!-- Run condition: restrict this step to tasks that change a frontend
+                     service, or to tasks that change anything else. Cycles through the three
+                     states (see `cycleDraftStepCondition`). Shown in BOTH interface tiers, and
+                     not behind `showOverrideField`: cloning a built-in carries the tester pair's
+                     conditions in, so a control that hid them by default would leave a basic-mode
+                     editor saving a step whose "when does this run" they were never shown.
+
+                     Offered only where the step MAY be skipped at all. A condition is a skip axis,
+                     so the engine holds it to the same gatability rule as an estimate gate
+                     (`assertValidRunConditions`) — without this the builder invited a condition on
+                     `merger` and answered the save with a 422. -->
+                  <UButton
+                    v-if="mayCarrySkipAxis(unit.kind)"
+                    :icon="CONDITION_ICONS[pipelines.draftStepCondition(unit.index) ?? 'always']"
+                    :color="pipelines.draftStepCondition(unit.index) ? 'info' : 'neutral'"
+                    variant="ghost"
+                    size="xs"
+                    :title="
+                      t(
+                        `pipeline.builder.condition.${pipelines.draftStepCondition(unit.index) ?? 'always'}`,
+                      )
+                    "
+                    data-testid="pipeline-step-condition"
+                    @click="pipelines.cycleDraftStepCondition(unit.index)"
+                  />
                   <!-- Approval gate: pause after this step so a human reviews (and
                      can edit) its proposal before the next step runs. -->
                   <UButton
@@ -1308,6 +1342,16 @@ async function clone(p: Pipeline) {
                     i + 1
                   }}</span>
                   <AgentKindIcon :kind="k" show-label />
+                  <!-- A step that does not run on every task says so HERE, in the library, because
+                       this list is what a reader compares two pipelines by: a preset whose testers
+                       are conditional and one whose testers always run look identical otherwise. -->
+                  <UIcon
+                    v-for="c in stepConditionsAt(p, i)"
+                    :key="c"
+                    :name="CONDITION_MARKERS[c].icon"
+                    class="h-3 w-3 shrink-0 text-sky-400"
+                    :title="t(CONDITION_MARKERS[c].key)"
+                  />
                 </li>
               </ol>
             </li>

package/app/components/pipeline/PipelinePreview.vue

@@ -11,7 +11,12 @@
 import { computed } from 'vue'
 import type { Pipeline } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
-import { pipelineDisplaySteps, pipelineGateCount } from '~/utils/pipeline'
+import {
+  CONDITION_MARKERS,
+  pipelineConditionalCount,
+  pipelineDisplaySteps,
+  pipelineGateCount,
+} from '~/utils/pipeline'
 import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
 
 const props = defineProps<{ pipeline: Pipeline }>()
@@ -19,6 +24,7 @@ const { t } = useI18n()
 
 const steps = computed(() => pipelineDisplaySteps(props.pipeline))
 const gateCount = computed(() => pipelineGateCount(props.pipeline))
+const conditionalCount = computed(() => pipelineConditionalCount(props.pipeline))
 
 /** What the agent at this step does — the same catalog prose the palette and step tooltips use. */
 function stepDescription(kind: string): string {
@@ -50,6 +56,12 @@ function stepDescription(kind: string): string {
         <UIcon name="i-lucide-shield-check" class="h-3 w-3" />
         {{ t('pipeline.preview.gateCount', { count: gateCount }, gateCount) }}
       </span>
+      <!-- Conditional steps change what a run of this pipeline actually does from task to task,
+           which is exactly what a preview read BEFORE picking has to say out loud. -->
+      <span v-if="conditionalCount" class="inline-flex items-center gap-1 text-sky-500">
+        <UIcon name="i-lucide-git-branch" class="h-3 w-3" />
+        {{ t('pipeline.preview.conditionalCount', { count: conditionalCount }, conditionalCount) }}
+      </span>
     </div>
 
     <!-- The ordered steps. The number column doubles as the flow connector (a rule drawn between
@@ -79,6 +91,13 @@ function stepDescription(kind: string): string {
               class="h-3 w-3 shrink-0 text-amber-400"
               :title="t('pipeline.preview.gated')"
             />
+            <UIcon
+              v-for="c in s.conditions"
+              :key="c"
+              :name="CONDITION_MARKERS[c].icon"
+              class="h-3 w-3 shrink-0 text-sky-400"
+              :title="t(CONDITION_MARKERS[c].key)"
+            />
           </div>
           <!-- Clamped: the catalog prose runs long for some kinds, and <AgentKindIcon> already
                carries the full text in its hover tooltip. -->