@cat-factory/app 0.256.2 → 0.257.0

package/app/components/pipeline/BinaryOutputStepPicker.vue

@@ -23,12 +23,21 @@ import { computed, ref, watch } from 'vue'
 import {
   ASSET_STORAGE_CAPABILITY,
   GENERATION_CONTEXT_CAPABILITY,
+  isBinaryGeneratorCapability,
   isBinaryModality,
+  type BinaryGenerationOptions,
+  type BinaryGeneratorCapability,
   type BinaryModality,
   type BinaryOutputConfig,
 } from '@cat-factory/contracts'
 import { binaryOutputPickIssues, type BinaryOutputPickIssue } from '~/utils/binaryOutput'
-import { parseMediaTypeRequirement, sameFormats } from './BinaryOutputStepPicker.logic'
+import {
+  formatReferenceImages,
+  generationControlOffer,
+  parseMediaTypeRequirement,
+  parseReferenceImages,
+  sameFormats,
+} from './BinaryOutputStepPicker.logic'
 
 const props = defineProps<{ index: number }>()
 
@@ -241,6 +250,131 @@ 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'),
+  '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'),
+}
+
+/**
+ * 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 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 +481,199 @@ 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>
+
+      <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 +775,32 @@ 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>
+    <!-- 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/PipelineProgress.vue

@@ -11,11 +11,13 @@ import {
   FAILED_STEP_META,
   containerPhaseLabel,
   dedicatedParkView,
+  REDIRECT_PARK_PRESENTATION,
 } from '~/utils/pipelineRender'
 import { prReviewPhase } from '~/utils/prReviewProgress'
 import StepMetricsBar from '~/components/observability/StepMetricsBar.vue'
 import PrReviewPhaseBadge from '~/components/prReview/PrReviewPhaseBadge.vue'
 import { useNowTick, stepDurationLabel } from '~/composables/useStepTimer'
+import type { BadgeColor } from '~/utils/badge'
 
 const props = defineProps<{ instance: ExecutionInstance }>()
 const emit = defineEmits<{
@@ -89,6 +91,17 @@ function prReviewAwaiting(step: PipelineStep): boolean {
   return step.prReview?.status === 'awaiting_selection'
 }
 
+/**
+ * Whether a binary-output step is parked awaiting a human candidate choice. Asked of the shared
+ * park recognizer rather than re-derived from `step.binaryCandidates`, so this chip and the
+ * generic approval gate below (which suppresses itself for exactly the parks that recognizer
+ * names) can never disagree about who owns the park. That disagreement is what leaves a parked
+ * run showing no action at all.
+ */
+function candidatesAwaiting(step: PipelineStep): boolean {
+  return dedicatedParkView(step, props.instance) === 'binary-candidates'
+}
+
 /**
  * Whether a `pr-reviewer` step has a LIVE phase to surface (slicing / reviewing / … ). Drives
  * showing the phase badge in place of the generic subtask count header; a terminal (done/skipped)
@@ -147,15 +160,15 @@ const STATE_META = computed<Record<AgentState, { label: string; color: string; i
 )
 
 /** Visual language for the pipeline instance as a whole. */
-const STATUS_META = computed<Record<ExecutionInstance['status'], { label: string; chip: string }>>(
-  () => ({
-    running: { label: t('pipeline.progress.status.running'), chip: 'primary' },
-    blocked: { label: t('pipeline.progress.status.blocked'), chip: 'warning' },
-    paused: { label: t('pipeline.progress.status.paused'), chip: 'neutral' },
-    done: { label: t('pipeline.progress.status.done'), chip: 'success' },
-    failed: { label: t('pipeline.progress.status.failed'), chip: 'error' },
-  }),
-)
+const STATUS_META = computed<
+  Record<ExecutionInstance['status'], { label: string; chip: BadgeColor }>
+>(() => ({
+  running: { label: t('pipeline.progress.status.running'), chip: 'primary' },
+  blocked: { label: t('pipeline.progress.status.blocked'), chip: 'warning' },
+  paused: { label: t('pipeline.progress.status.paused'), chip: 'neutral' },
+  done: { label: t('pipeline.progress.status.done'), chip: 'success' },
+  failed: { label: t('pipeline.progress.status.failed'), chip: 'error' },
+}))
 
 const steps = computed(() => props.instance.steps)
 const total = computed(() => steps.value.length)
@@ -254,7 +267,7 @@ const ITEM_ICON: Record<string, string> = {
     <!-- summary -->
     <div class="rounded-xl border border-slate-800 bg-slate-900/60 p-4">
       <div class="flex flex-wrap items-center gap-3">
-        <UBadge :color="statusMeta.chip as any" variant="subtle">{{ statusMeta.label }}</UBadge>
+        <UBadge :color="statusMeta.chip" variant="subtle">{{ statusMeta.label }}</UBadge>
         <span class="text-sm text-slate-300">
           <i18n-t keypath="pipeline.progress.agentsComplete" tag="span" scope="global">
             <template #completed>
@@ -664,6 +677,31 @@ const ITEM_ICON: Record<string, string> = {
             </span>
           </button>
 
+          <!-- A generating step parked between its candidate pass and its delivering pass: a
+               purpose-built chip opening the comparison window, ahead of the generic approval
+               gate (mirrors the fork-decision and pr-review chips above). Without it the step
+               shows no action at all, because the generic gate below is suppressed for every
+               park a dedicated window owns. -->
+          <button
+            v-if="candidatesAwaiting(s)"
+            type="button"
+            data-testid="binary-candidates-open"
+            class="mt-3 flex w-full items-center gap-2 rounded-lg border border-dashed border-cyan-500/50 bg-cyan-500/10 px-2.5 py-1.5 text-start transition followup-blink hover:border-cyan-400/60"
+            @click="ui.openBinaryCandidates(instance.id, i)"
+          >
+            <span
+              class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-cyan-500/40 bg-cyan-500/15"
+            >
+              <UIcon
+                :name="REDIRECT_PARK_PRESENTATION['binary-candidates'].icon"
+                class="h-3 w-3 text-cyan-300"
+              />
+            </span>
+            <span class="min-w-0 flex-1 truncate text-[12px] text-slate-300">
+              {{ t('pipeline.progress.binaryCandidates.choose') }}
+            </span>
+          </button>
+
           <!-- reviewer gate folding/re-reviewing in the background: a working indicator,
                NOT a "Review & approve" gate (the human is summoned only if needed) -->
           <div